@multicomma/arkcn 0.1.2 → 0.1.3

package/src/components/ui/data-table.tsx

@@ -221,9 +221,11 @@ function DataTableFacetedFilter<TData, TValue>({
   options,
 }: {
   table?: DataTableInstance<TData>
+  /** Id of the column this filter applies to. */
   columnId?: string
   column?: DataTableColumn<TData, TValue>
   title?: string
+  /** Facet options as `{ value, label, icon? }`. */
   options: FacetOption[]
 }) {
   const table = useDataTableContext(tableProp)
@@ -581,6 +583,7 @@ function DataTableBody<TData>({
   ...props
 }: Omit<React.ComponentProps<typeof TableBody>, "children"> & {
   table?: DataTableInstance<TData>
+  /** Content shown when there are no rows. */
   empty?: React.ReactNode
   children: (row: DataTableRowInstance<TData>) => React.ReactNode
 }) {
@@ -676,6 +679,7 @@ function DataTablePageSize<TData>({
   children,
 }: {
   table?: DataTableInstance<TData>
+  /** Choices offered in the page size select. */
   pageSizes?: number[]
   className?: string
   children?: React.ReactNode
@@ -823,6 +827,7 @@ function DataTableBulkActions<TData>({
   ...props
 }: React.ComponentProps<"div"> & {
   table?: DataTableInstance<TData>
+  /** Noun used in the selection announcement, e.g. `task`. */
   entityName?: string
 }) {
   const table = useDataTableContext(tableProp)
@@ -892,6 +897,7 @@ function DataTableBulkActionsCount<TData>({
   ...props
 }: React.ComponentProps<"div"> & {
   table?: DataTableInstance<TData>
+  /** Noun used in the selection announcement, e.g. `task`. */
   entityName?: string
 }) {
   const table = useDataTableContext(tableProp)

package/src/components/ui/direction.tsx

@@ -17,7 +17,9 @@ function DirectionProvider({
   direction,
   children,
 }: {
+  /** Text direction, `ltr` or `rtl`. */
   dir?: Direction
+  /** Alias of `dir`. */
   direction?: Direction
   children?: React.ReactNode
 }) {

package/src/components/ui/dropdown-menu.tsx

@@ -93,6 +93,7 @@ function DropdownMenuItem({
   ...props
 }: Omit<React.ComponentProps<typeof DropdownMenuPrimitive.Item>, "value"> & {
   value?: string
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
   variant?: "default" | "destructive"
 }) {
@@ -137,8 +138,10 @@ function DropdownMenuCheckboxItem({
   value,
   ...props
 }: Omit<React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>, "checked" | "value"> & {
+  /** Checked state of the item. */
   checked?: boolean
   value?: string
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
 }) {
   const id = React.useId()
@@ -169,6 +172,7 @@ function DropdownMenuRadioItem({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
 }) {
   return (
@@ -191,6 +195,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
 }) {
   return (
@@ -240,6 +245,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
 }) {
   return (

package/src/components/ui/field.tsx

@@ -164,6 +164,7 @@ function FieldError({
   errors,
   ...props
 }: React.ComponentProps<"div"> & {
+  /** Error messages to render; a string, an array, or an object with a `message`. */
   errors?: Array<{ message?: string } | undefined>
 }) {
   const content = useMemo(() => {

package/src/components/ui/gantt.tsx

@@ -81,16 +81,22 @@ type BarStore = ReturnType<typeof createBarStore>
 type Interaction = {
   id: string
   type: "move" | "resize-start" | "resize-end"
+  /** First date on the time scale. */
   start: Date
+  /** Last date on the time scale. */
   end: Date
 }
 
 type GanttContextValue = {
+  /** First date on the time scale. */
   start: Date
+  /** Last date on the time scale. */
   end: Date
   days: number
   dayWidth: number
+  /** Height of every row in px. */
   rowHeight: number
+  /** Width of the sticky label column in px. */
   sidebarWidth: number
   scale: GanttScale
   editable: boolean
@@ -148,19 +154,28 @@ function Gantt({
   children,
   ...props
 }: Omit<React.ComponentProps<"div">, "onChange"> & {
+  /** First date on the time scale. */
   start: Date
+  /** Last date on the time scale. */
   end: Date
   /** Pixels per day; controllable. Zooming changes it. */
   dayWidth?: number
+  /** Initial pixels per day when uncontrolled. */
   defaultDayWidth?: number
+  /** Called when the zoom changes. */
   onDayWidthChange?: (dayWidth: number) => void
+  /** Lower bound for zooming out. */
   minDayWidth?: number
+  /** Upper bound for zooming in. */
   maxDayWidth?: number
   /** Header tiers. Defaults from `dayWidth`: month below 16px, week below 32px, else day. */
   scale?: GanttScale
+  /** Height of every row in px. */
   rowHeight?: number
+  /** Width of the sticky label column in px. */
   sidebarWidth?: number
   editable?: boolean
+  /** Called with `{ id, start, end }` snapped to whole days after a move, resize, or keyboard change. */
   onBarChange?: (change: GanttBarChange) => void
 }) {
   const viewportRef = React.useRef<HTMLDivElement>(null)

package/src/components/ui/hotkeys.tsx

@@ -108,6 +108,7 @@ function formatHotkey(hotkey: string, mac = isMac()): string[][] {
 
 type HotkeyEntry = {
   id: string
+  /** Key combination such as `mod+k`, or a sequence such as `g d`. */
   hotkey: string
   label: string
   group: string
@@ -152,6 +153,7 @@ function HotkeysProvider({
   children: React.ReactNode
   /** Opens the shortcuts dialog; `null` disables it. */
   dialogHotkey?: string | null
+  /** Milliseconds allowed between keys of a sequence. */
   sequenceTimeout?: number
 }) {
   const [entries, setEntries] = React.useState<HotkeyEntry[]>([])
@@ -222,6 +224,7 @@ function HotkeysProvider({
 
 /** Register a hotkey for the lifetime of the component. Listed in `HotkeysDialog` when it has a label. */
 function useHotkey(
+  /** Key combination such as `mod+k`, or a sequence such as `g d`. */
   hotkey: string,
   handler: (event: KeyboardEvent) => void,
   options: { label?: string; group?: string; enabled?: boolean; allowInInput?: boolean } = {}

package/src/components/ui/kanban.tsx

@@ -127,7 +127,9 @@ function Kanban({
   children,
   ...props
 }: React.ComponentProps<"div"> & {
+  /** Called with `{ cardId, fromColumnId, toColumnId, fromIndex, toIndex }`; apply it with `moveCard`. */
   onCardMove?: (details: KanbanCardMoveDetails) => void
+  /** Called with `{ columnId, fromIndex, toIndex }`; apply it with `moveColumn`. */
   onColumnMove?: (details: KanbanColumnMoveDetails) => void
 }) {
   const [instanceId] = React.useState(() => Symbol("kanban"))
@@ -221,6 +223,7 @@ function Kanban({
           type: data.type,
           id: data.type === "card" ? data.cardId : data.columnId,
           columnId: data.type === "card" ? data.columnId : undefined,
+          /** Height of the drop slot, normally the dragged card's height. */
           height: source.element.getBoundingClientRect().height,
         })
       },

package/src/components/ui/menubar.tsx

@@ -249,6 +249,7 @@ function MenubarItem({
   ...props
 }: Omit<React.ComponentProps<typeof MenubarPrimitive.Item>, "value"> & {
   value?: string
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
   variant?: "default" | "destructive"
 }) {
@@ -293,8 +294,10 @@ function MenubarCheckboxItem({
   value,
   ...props
 }: Omit<React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>, "checked" | "value"> & {
+  /** Checked state of the item. */
   checked?: boolean
   value?: string
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
 }) {
   const id = React.useId()
@@ -325,6 +328,7 @@ function MenubarRadioItem({
   inset,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
 }) {
   return (
@@ -347,6 +351,7 @@ function MenubarLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.ItemGroupLabel> & {
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
 }) {
   return (
@@ -396,6 +401,7 @@ function MenubarSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.TriggerItem> & {
+  /** Indent the item to align with items that have an indicator. */
   inset?: boolean
 }) {
   return (

package/src/components/ui/navigation-menu.tsx

@@ -10,6 +10,7 @@ function NavigationMenu({
   viewport = true,
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  /** Render content in the shared viewport instead of inline. */
   viewport?: boolean
 }) {
   return (

package/src/components/ui/node-graph.tsx

@@ -39,9 +39,11 @@ type NodeGraphConnection = { source: NodeGraphPortRef; target: NodeGraphPortRef
 type NodeGraphSelection = { nodes: string[]; edges: string[] }
 type NodeGraphNodeMove = { id: string; position: XY }
 type NodeGraphConnectingState = {
+  /** Output-side port as `{ nodeId, portId }`. */
   source: NodeGraphPortRef & { side: NodeGraphPortSide; type: string }
   /** Cursor position in graph coordinates. */
   position: XY
+  /** Input-side port as `{ nodeId, portId }`. */
   target: (NodeGraphPortRef & { side: NodeGraphPortSide; type: string }) | null
   valid: boolean
 }
@@ -121,13 +123,17 @@ type LayoutStore = ReturnType<typeof createLayoutStore>
 
 type NodeGraphContextValue = {
   store: LayoutStore
+  /** Controlled pan and zoom as `{ x, y, zoom }`. */
   viewport: NodeGraphViewportState
   setViewport: (next: NodeGraphViewportState | ((prev: NodeGraphViewportState) => NodeGraphViewportState)) => void
   viewportRef: React.RefObject<HTMLDivElement | null>
   size: { width: number; height: number }
+  /** Lower zoom bound. */
   minZoom: number
+  /** Upper zoom bound. */
   maxZoom: number
   snapGrid: number
+  /** Controlled selection as `{ nodes, edges }` ids. */
   selection: NodeGraphSelection
   setSelection: (next: NodeGraphSelection) => void
   connecting: NodeGraphConnectingState | null
@@ -208,13 +214,21 @@ function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (v
  * ------------------------------------------------------------------------- */
 
 type NodeGraphProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
+  /** Controlled pan and zoom as `{ x, y, zoom }`. */
   viewport?: NodeGraphViewportState
+  /** Initial pan and zoom when uncontrolled. */
   defaultViewport?: NodeGraphViewportState
+  /** Called with `{ x, y, zoom }` while panning or zooming. */
   onViewportChange?: (viewport: NodeGraphViewportState) => void
+  /** Controlled selection as `{ nodes, edges }` ids. */
   selection?: NodeGraphSelection
+  /** Initial selected nodes and edges when uncontrolled. */
   defaultSelection?: NodeGraphSelection
+  /** Called with `{ nodes, edges }` when the selection changes. */
   onSelectionChange?: (selection: NodeGraphSelection) => void
+  /** Lower zoom bound. */
   minZoom?: number
+  /** Upper zoom bound. */
   maxZoom?: number
   /** Grid size nodes snap to while dragging and nudging. `0` disables snapping. */
   snapGrid?: number
@@ -473,6 +487,7 @@ function NodeGraph({
           }
           lastMoves = [...starts].map(([id, start]) => ({
             id,
+            /** Node position in graph coordinates. */
             position: { x: snap(start.x + dx, snapGrid), y: snap(start.y + dy, snapGrid) },
           }))
           latest.current.onNodesMove?.(lastMoves)
@@ -498,7 +513,9 @@ function NodeGraph({
       const [source, target] = a.side === "output" ? [a, b] : [b, a]
       if (isValidConnection) {
         return isValidConnection({
+          /** Output-side port as `{ nodeId, portId }`. */
           source: { nodeId: source.nodeId, portId: source.portId },
+          /** Input-side port as `{ nodeId, portId }`. */
           target: { nodeId: target.nodeId, portId: target.portId },
           sourceType: source.type,
           targetType: target.type,
@@ -531,6 +548,7 @@ function NodeGraph({
           const anchored = target && validate(source, target) ? store.getPortPosition(target) : null
           state = {
             source,
+            /** Node position in graph coordinates. */
             position: anchored ?? screenToGraph({ x: e.clientX, y: e.clientY }),
             target,
             valid: !!anchored,
@@ -542,12 +560,15 @@ function NodeGraph({
           if (state.target && state.valid) {
             const [from, to] = source.side === "output" ? [source, state.target] : [state.target, source]
             latest.current.onConnect?.({
+              /** Output-side port as `{ nodeId, portId }`. */
               source: { nodeId: from.nodeId, portId: from.portId },
+              /** Input-side port as `{ nodeId, portId }`. */
               target: { nodeId: to.nodeId, portId: to.portId },
             })
           } else if (!state.target) {
             latest.current.onConnectEnd?.({
               source,
+              /** Node position in graph coordinates. */
               position: screenToGraph({ x: e.clientX, y: e.clientY }),
               client: { x: e.clientX, y: e.clientY },
             })
@@ -1056,7 +1077,9 @@ function NodeGraphEdge({
   ...props
 }: Omit<React.ComponentProps<"g">, "children" | "target"> & {
   value: string
+  /** Output-side port as `{ nodeId, portId }`. */
   source: NodeGraphPortRef
+  /** Input-side port as `{ nodeId, portId }`. */
   target: NodeGraphPortRef
   selected?: boolean
   /** Render prop for labels; receives the path midpoint. */

package/src/components/ui/pagination.tsx

@@ -25,6 +25,7 @@ function PaginationItem({ ...props }: React.ComponentProps<"li">) {
 }
 
 type PaginationLinkProps = {
+  /** Marks the current page link. */
   isActive?: boolean
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
   React.ComponentProps<"a">

package/src/components/ui/query-builder.tsx

@@ -183,6 +183,7 @@ function valueLabel(rule: QueryRule, field: QueryField | undefined): string {
 
 /** Natural-language sentence, e.g. "Status is Active and Created is after 2026-01-01". */
 function describeQuery(
+  /** The group node this part renders. */
   group: QueryGroup,
   { fields, operators = defaultOperators }: DescribeOptions,
   depth = 0
@@ -215,7 +216,9 @@ function pruneQuery(group: QueryGroup, operators = defaultOperators): QueryGroup
  * ------------------------------------------------------------------------- */
 
 type QueryBuilderContextValue = {
+  /** Fields the user can filter on: `{ name, label, type, options, operators, placeholder }`. */
   fields: QueryField[]
+  /** Operator definitions; defaults to `defaultOperators`. */
   operators: QueryOperator[]
   value: QueryGroup
   disabled: boolean
@@ -263,7 +266,9 @@ function QueryBuilder({
   children,
   ...props
 }: Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
+  /** Fields the user can filter on: `{ name, label, type, options, operators, placeholder }`. */
   fields: QueryField[]
+  /** Operator definitions; defaults to `defaultOperators`. */
   operators?: QueryOperator[]
   value?: QueryGroup
   defaultValue?: QueryGroup
@@ -412,6 +417,7 @@ function QueryBuilderMatch({
 }: Omit<React.ComponentProps<typeof Select>, "collection" | "value" | "onValueChange"> & {
   /** Text before the select. Defaults to "Match" at the top level and "Where" in nested groups. */
   before?: React.ReactNode
+  /** Text rendered after the match select. */
   after?: React.ReactNode
 }) {
   const { setMatch, disabled } = useQueryBuilder()
@@ -580,6 +586,7 @@ function QueryBuilderOperatorSelect({ className, ...props }: PickerProps & { cla
 }
 
 type ValueEditorRenderProps = {
+  /** The rule node this part renders. */
   rule: QueryRule
   field: QueryField | undefined
   operator: QueryOperator | undefined

package/src/components/ui/resizable.tsx

@@ -22,6 +22,7 @@ function ResizableHandle({
   className,
   ...props
 }: ResizablePrimitive.SeparatorProps & {
+  /** Render a visible grip on the handle. */
   withHandle?: boolean
 }) {
   return (

package/src/components/ui/rich-text-editor.tsx

@@ -114,13 +114,16 @@ function RichTextEditor({
 }: Omit<React.ComponentProps<"div">, "content" | "onChange"> & {
   /** Controlled HTML. Prefer `defaultContent` + `onChange` unless you need to replace the document. */
   content?: string
+  /** Initial HTML when uncontrolled. */
   defaultContent?: string
   onChange?: (change: RichTextChange) => void
   placeholder?: string
   editable?: boolean
+  /** Focus the editor on mount. */
   autofocus?: boolean
   /** Extra tiptap extensions appended to the built-in set. */
   extensions?: Extensions
+  /** Maximum characters; the count shows `data-over` past it. */
   characterLimit?: number
   /** Escape hatch for any other `useEditor` option. */
   editorOptions?: Partial<UseEditorOptions>
@@ -196,8 +199,11 @@ function RichTextEditor({
 type ActionDef = {
   label: string
   icon: React.ComponentType<{ className?: string }>
+  /** Keyboard shortcut shown in the tooltip. */
   shortcut?: string
+  /** Whether the toggle is pressed. */
   isActive?: (editor: Editor) => boolean
+  /** Whether the action can run right now; disables the control when false. */
   canRun?: (editor: Editor) => boolean
   run: (editor: Editor) => void
 }
@@ -208,133 +214,171 @@ const actions = {
   bold: {
     label: "Bold",
     icon: BoldIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘B",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("bold"),
     run: (e) => chain(e).toggleBold().run(),
   },
   italic: {
     label: "Italic",
     icon: ItalicIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘I",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("italic"),
     run: (e) => chain(e).toggleItalic().run(),
   },
   underline: {
     label: "Underline",
     icon: UnderlineIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘U",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("underline"),
     run: (e) => chain(e).toggleUnderline().run(),
   },
   strike: {
     label: "Strikethrough",
     icon: StrikethroughIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧S",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("strike"),
     run: (e) => chain(e).toggleStrike().run(),
   },
   code: {
     label: "Inline code",
     icon: CodeIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘E",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("code"),
     run: (e) => chain(e).toggleCode().run(),
   },
   highlight: {
     label: "Highlight",
     icon: HighlighterIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧H",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("highlight"),
     run: (e) => chain(e).toggleHighlight().run(),
   },
   paragraph: {
     label: "Paragraph",
     icon: PilcrowIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⌥0",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("paragraph"),
     run: (e) => chain(e).setParagraph().run(),
   },
   heading1: {
     label: "Heading 1",
     icon: Heading1Icon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⌥1",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("heading", { level: 1 }),
     run: (e) => chain(e).toggleHeading({ level: 1 }).run(),
   },
   heading2: {
     label: "Heading 2",
     icon: Heading2Icon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⌥2",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("heading", { level: 2 }),
     run: (e) => chain(e).toggleHeading({ level: 2 }).run(),
   },
   heading3: {
     label: "Heading 3",
     icon: Heading3Icon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⌥3",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("heading", { level: 3 }),
     run: (e) => chain(e).toggleHeading({ level: 3 }).run(),
   },
   bulletList: {
     label: "Bullet list",
     icon: ListIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧8",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("bulletList"),
     run: (e) => chain(e).toggleBulletList().run(),
   },
   orderedList: {
     label: "Numbered list",
     icon: ListOrderedIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧7",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("orderedList"),
     run: (e) => chain(e).toggleOrderedList().run(),
   },
   taskList: {
     label: "Task list",
     icon: ListChecksIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧9",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("taskList"),
     run: (e) => chain(e).toggleTaskList().run(),
   },
   blockquote: {
     label: "Quote",
     icon: QuoteIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧B",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("blockquote"),
     run: (e) => chain(e).toggleBlockquote().run(),
   },
   codeBlock: {
     label: "Code block",
     icon: SquareCodeIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⌥C",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("codeBlock"),
     run: (e) => chain(e).toggleCodeBlock().run(),
   },
   alignLeft: {
     label: "Align left",
     icon: AlignLeftIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧L",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive({ textAlign: "left" }),
     run: (e) => chain(e).setTextAlign("left").run(),
   },
   alignCenter: {
     label: "Align center",
     icon: AlignCenterIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧E",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive({ textAlign: "center" }),
     run: (e) => chain(e).setTextAlign("center").run(),
   },
   alignRight: {
     label: "Align right",
     icon: AlignRightIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧R",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive({ textAlign: "right" }),
     run: (e) => chain(e).setTextAlign("right").run(),
   },
   alignJustify: {
     label: "Justify",
     icon: AlignJustifyIcon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧J",
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive({ textAlign: "justify" }),
     run: (e) => chain(e).setTextAlign("justify").run(),
   },
@@ -347,21 +391,27 @@ const actions = {
   undo: {
     label: "Undo",
     icon: Undo2Icon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘Z",
+    /** Whether the action can run right now; disables the control when false. */
     canRun: (e) => e.can().undo(),
     run: (e) => chain(e).undo().run(),
   },
   redo: {
     label: "Redo",
     icon: Redo2Icon,
+    /** Keyboard shortcut shown in the tooltip. */
     shortcut: "⌘⇧Z",
+    /** Whether the action can run right now; disables the control when false. */
     canRun: (e) => e.can().redo(),
     run: (e) => chain(e).redo().run(),
   },
   unsetLink: {
     label: "Remove link",
     icon: UnlinkIcon,
+    /** Whether the toggle is pressed. */
     isActive: (e) => e.isActive("link"),
+    /** Whether the action can run right now; disables the control when false. */
     canRun: (e) => e.isActive("link"),
     run: (e) => chain(e).unsetLink().run(),
   },
@@ -440,6 +490,7 @@ function ControlTooltip({
   children,
 }: {
   label: React.ReactNode
+  /** Keyboard shortcut shown in the tooltip. */
   shortcut?: string
   children: React.ReactElement
 }) {
@@ -458,8 +509,11 @@ type ControlProps = {
   /** A built-in action; supplies icon, label, shortcut and behaviour. */
   name?: ActionName
   label?: string
+  /** Keyboard shortcut shown in the tooltip. */
   shortcut?: string
+  /** Whether the toggle is pressed. */
   isActive?: (editor: Editor) => boolean
+  /** Whether the action can run right now; disables the control when false. */
   canRun?: (editor: Editor) => boolean
   onToggle?: (editor: Editor) => void
   tooltip?: boolean