KQ-2119 · ANCHORED/PALETTE

Anchored Palette

A document with a command menu that opens from your selection instead of the middle of the screen: select a phrase (it snaps to whole words and becomes a tinted mark) or some tasks, press Cmd or Ctrl+K, and the palette grows out of the selection's own rectangle on springs.glide, its x, y, width, height and radius travelling together while contents laid out at the final size fade in, to sit anchorGap pixels below the selection (above when only that fits, its list shortened rather than covering what it acts on). It quotes the selection, lists only the actions that fit it with a highlight on springs.snap, and previews what an action would make of the text; Escape shrinks it back into the selection on the exit ease. With nothing selected it opens the full palette, on a narrow frame it rises as a bottom sheet you can drag away, and a rejected run keeps it open with the row in danger.

KQ-2119 · ANCHORED/PALETTE

Waylight / Specs / Offline sync — v3

Offline sync — v3

The client retries every 30 seconds, backing off to five minutes after three failures, and never drops a queued edit without asking the person who made it.

The offline queue

When a device loses its connection, Waylight keeps every edit in a local queue and marks the document as offline for everyone else who has it open.

Open tasks

text · 4 words · palette closed

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/anchored-palette

Props

anchorGap: number; default 8; Pixels between the selection and the palette that grows out of it.
quoteStyle: "bar" | "marks" | "chip"; default "bar"; How the selection is quoted at the palette's top: an accent rule, a large opening mark, or one mono chip.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; The selection mark, the grow tint and the highlight. A name or any CSS colour.
doc: AnchoredDoc; default defaultAnchoredDoc; The document: { title, path, edited?, author?, blocks } of paragraphs, headings and task lists.
selection / defaultSelection: AnchoredSelection | null; default — / null; A word range of one paragraph ({ kind: "text", block, start, end }) or some tasks ({ kind: "items", ids }), controlled or initial.
onSelectionChange: (selection: AnchoredSelection | null) => void; default —; Fires from the drag, key or click that changed the selection.
actions: Record<"text" | "items" | "none", AnchoredAction[]>; default defaultAnchoredActions; The actions that fit each kind of selection ({ id, label, icon, hint?, keywords?, preview? }); none is the full palette.
recent: string[]; default defaultAnchoredRecent; Action ids listed first under Recent where they fit.
open / defaultOpen: boolean; default — / false; Whether the palette is open, controlled or initial. Opening from the prop never takes focus.
onOpenChange: (open: boolean) => void; default —; Fires from the shortcut, click, Escape, run or drag that opened or closed it.
onAction: (action, selection) => void | Promise<void>; default —; Run an action on the selection. A rejected promise shows the action-failed state.
onPreview: (action: AnchoredAction | null, selection) => void; default —; The highlighted action changed; null when the palette closes.
onDismiss: () => void; default —; The palette was dismissed: Escape, a click outside, or a drag down.
shortcut: boolean; default true; Cmd or Ctrl+K, pressed while focus is in the document, opens and closes it.
sheetBelow: number; default 420; Below this frame width the palette opens as a bottom sheet, in px.
now: number; default defaultAnchoredNow; The time "edited" is read from, in ms.
placeholder: string; default "Do something with this…"; The field's placeholder.
label: string; default "Selection actions"; The palette's accessible name, followed by what it acts on.
className: string; default —; Classes for the outer container.

Prop	Type	Default	Description
anchorGap	number	8	Pixels between the selection and the palette that grows out of it.
quoteStyle	"bar" \| "marks" \| "chip"	"bar"	How the selection is quoted at the palette's top: an accent rule, a large opening mark, or one mono chip.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	The selection mark, the grow tint and the highlight. A name or any CSS colour.
doc	AnchoredDoc	defaultAnchoredDoc	The document: { title, path, edited?, author?, blocks } of paragraphs, headings and task lists.
selection / defaultSelection	AnchoredSelection \| null	— / null	A word range of one paragraph ({ kind: "text", block, start, end }) or some tasks ({ kind: "items", ids }), controlled or initial.
onSelectionChange	(selection: AnchoredSelection \| null) => void	—	Fires from the drag, key or click that changed the selection.
actions	Record<"text" \| "items" \| "none", AnchoredAction[]>	defaultAnchoredActions	The actions that fit each kind of selection ({ id, label, icon, hint?, keywords?, preview? }); none is the full palette.
recent	string[]	defaultAnchoredRecent	Action ids listed first under Recent where they fit.
open / defaultOpen	boolean	— / false	Whether the palette is open, controlled or initial. Opening from the prop never takes focus.
onOpenChange	(open: boolean) => void	—	Fires from the shortcut, click, Escape, run or drag that opened or closed it.
onAction	(action, selection) => void \| Promise<void>	—	Run an action on the selection. A rejected promise shows the action-failed state.
onPreview	(action: AnchoredAction \| null, selection) => void	—	The highlighted action changed; null when the palette closes.
onDismiss	() => void	—	The palette was dismissed: Escape, a click outside, or a drag down.
shortcut	boolean	true	Cmd or Ctrl+K, pressed while focus is in the document, opens and closes it.
sheetBelow	number	420	Below this frame width the palette opens as a bottom sheet, in px.
now	number	defaultAnchoredNow	The time "edited" is read from, in ms.
placeholder	string	"Do something with this…"	The field's placeholder.
label	string	"Selection actions"	The palette's accessible name, followed by what it acts on.
className	string	—	Classes for the outer container.