@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/fields/repeater.js

@@ -0,0 +1,209 @@
+import { useFormatter } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { useField } from "../form/form-context.js";
+import { useScrollToErroredItem, useVirtualList } from "../../hooks/use-virtual-list.js";
+import { DeferredSchema } from "../layout/deferred.js";
+import { useFieldActionContext } from "../schema/field-actions.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Collapsible, CollapsibleContent } from "../ui/collapsible.js";
+import { AddActionRow, CollapseAllActions, ItemActionButton, ItemHeaderActions, useItemActionFallbacks, useItemActions, useItemMoves, useRunItemAction } from "./item-actions.js";
+import { RepeaterTable } from "./repeater-table.js";
+import { VIRTUAL_ESTIMATES, appendRepeaterItem, cloneIndexedState, cloneRepeaterItem, fieldIds, gridColumnsClasses, isDeferredPlaceholder, moveIndexedState, moveRepeaterItem, removeIndexedState, removeRepeaterItem, reorderedItemKeys, replacePlaceholder, virtualizeOptions } from "@alfakit/core";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/repeater.tsx
+/**
+* Items use the per-index schema from the server when available (so closures see item
+* state) and fall back to the template for freshly added items.
+*/
+/**
+* `deferLoading()`: a skeleton until the field scrolls into view, then the field with its
+* items (loaded from the server).
+*/
+function RepeaterField({ component }) {
+	if (!isDeferredPlaceholder(component)) return /* @__PURE__ */ jsx(RepeaterFieldContent, { component });
+	return /* @__PURE__ */ jsx(DeferredSchema, {
+		component,
+		children: (loaded) => /* @__PURE__ */ jsx(RepeaterFieldContent, { component: loaded })
+	});
+}
+function RepeaterFieldContent({ component }) {
+	const formatter = useFormatter();
+	const { value, setValue, error, id, disabled, readOnly, aria } = useField(component);
+	const context = useFieldActionContext(component);
+	const runItemAction = useRunItemAction(context);
+	const fallbacks = useItemActionFallbacks(component.addActionLabel);
+	const resolve = useItemActions(component, fallbacks);
+	const locked = disabled || readOnly;
+	const items = value ?? [];
+	const [collapsed, setCollapsed] = useState({});
+	const [dragIndex, setDragIndex] = useState(null);
+	const virtual = useVirtualList(items.length, virtualizeOptions(component.virtualize, VIRTUAL_ESTIMATES.item, 12, component.grid ? "auto" : 1));
+	const { range, indexes, style, attach, item } = virtual;
+	useScrollToErroredItem(virtual.list, range.active, component.statePath);
+	const moveItem = (from, to) => {
+		setValue(moveRepeaterItem(items, from, to));
+		setCollapsed((state) => moveIndexedState(state, from, to));
+	};
+	const removeItem = (index) => {
+		setValue(removeRepeaterItem(items, index));
+		setCollapsed((state) => removeIndexedState(state, index));
+	};
+	const cloneItem = (index) => {
+		setValue(cloneRepeaterItem(items, index));
+		setCollapsed((state) => cloneIndexedState(state, index));
+	};
+	const { moveWithButton, region: moveRegion, containerRef: moveContainerRef } = useItemMoves(value, moveItem, (index) => component.items[index]?.label, items.length);
+	const dropItem = (from, to) => runItemAction(resolve("reorder"), { items: reorderedItemKeys(items.length, from, to) }, () => moveItem(from, to));
+	const setAllCollapsed = (value) => setCollapsed(Object.fromEntries(items.map((_, index) => [index, value])));
+	const addItem = () => setValue(appendRepeaterItem(items, component.simple ? { [Object.keys(component.templateState)[0] ?? "value"]: null } : component.templateState));
+	const schemaFor = (index) => component.items[index]?.schema ?? replacePlaceholder(component.template, "__INDEX__", String(index));
+	const canAdd = component.addable && !locked && (component.maxItems == null || items.length < component.maxItems);
+	const canDelete = component.deletable && !locked && (component.minItems == null || items.length > component.minItems);
+	const draggable = component.reorderable && component.reorderableWithDragAndDrop !== false && !locked && resolve("reorder") !== null;
+	const buttons = component.reorderable && component.reorderableWithButtons !== false && !locked;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: moveContainerRef,
+			className: "flex flex-col gap-3",
+			children: [
+				moveRegion,
+				component.table?.length && !component.simple ? /* @__PURE__ */ jsx(RepeaterTable, {
+					id,
+					columns: component.table,
+					compact: component.compact,
+					count: items.length,
+					prefixFor: (index) => `${component.statePath}.${index}.`,
+					schemaFor,
+					labelledBy: component.label ? fieldIds(id).label : void 0,
+					describedBy: aria["aria-describedby"],
+					reorderable: buttons,
+					cloneable: Boolean(component.cloneable) && canAdd,
+					deletable: canDelete,
+					onMove: moveItem,
+					onClone: cloneItem,
+					onRemove: removeItem,
+					virtual,
+					context,
+					resolve: (name, index) => resolve(name, component.items[index]),
+					extraActionsFor: (index) => component.items[index]?.actions
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [component.collapsible && !component.simple && items.length > 0 && /* @__PURE__ */ jsx(CollapseAllActions, {
+					context,
+					resolve: (name) => resolve(name),
+					onCollapseAll: () => setAllCollapsed(true),
+					onExpandAll: () => setAllCollapsed(false)
+				}), /* @__PURE__ */ jsx("ul", {
+					id,
+					"aria-labelledby": component.label ? fieldIds(id).label : void 0,
+					"aria-describedby": aria["aria-describedby"],
+					ref: attach,
+					style,
+					className: cn("grid gap-3", component.grid && gridColumnsClasses(component.grid)),
+					children: indexes.map((index) => {
+						const isCollapsed = collapsed[index] ?? component.collapsed ?? false;
+						const label = component.items[index]?.label ?? null;
+						const serverItem = component.items[index];
+						return /* @__PURE__ */ jsx("li", {
+							ref: item,
+							"data-index": index,
+							"aria-setsize": range.active ? items.length : void 0,
+							"aria-posinset": range.active ? index + 1 : void 0,
+							draggable,
+							onDragStart: () => setDragIndex(index),
+							onDragOver: (event) => draggable && event.preventDefault(),
+							onDrop: () => {
+								if (dragIndex !== null && dragIndex !== index) dropItem(dragIndex, index);
+								setDragIndex(null);
+							},
+							onDragEnd: () => setDragIndex(null),
+							className: cn("bg-card min-w-0 rounded-lg border shadow-xs", dragIndex === index && "opacity-50", component.simple && "border-0 shadow-none"),
+							children: /* @__PURE__ */ jsxs(Collapsible, {
+								open: !isCollapsed,
+								children: [!component.simple && /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-wrap items-center gap-1 border-b px-2 py-1.5",
+									"data-slot": "item-header",
+									children: [
+										draggable && /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground cursor-grab",
+											title: resolve("reorder", serverItem)?.label ?? void 0,
+											"aria-hidden": "true",
+											children: /* @__PURE__ */ jsx(Icon, { name: resolve("reorder", serverItem)?.icon ?? "grip-vertical" })
+										}),
+										component.itemNumbers && /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground text-xs tabular-nums",
+											children: formatter.number(index + 1)
+										}),
+										label && /* @__PURE__ */ jsx("span", {
+											dir: "auto",
+											className: "min-w-0 truncate text-sm font-medium",
+											children: label
+										}),
+										/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+										/* @__PURE__ */ jsx(ItemHeaderActions, {
+											context,
+											itemKey: String(index),
+											index,
+											count: items.length,
+											resolve: (name) => resolve(name, serverItem),
+											extraActions: locked ? void 0 : serverItem?.actions,
+											buttons,
+											canClone: Boolean(component.cloneable) && canAdd,
+											canDelete,
+											collapsible: Boolean(component.collapsible),
+											collapsed: isCollapsed,
+											onMove: moveWithButton,
+											onClone: () => cloneItem(index),
+											onDelete: () => removeItem(index),
+											onToggle: () => setCollapsed((state) => ({
+												...state,
+												[index]: !isCollapsed
+											}))
+										})
+									]
+								}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", {
+									className: cn("flex gap-2", component.simple ? "items-start" : "p-4"),
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "flex-1",
+										children: /* @__PURE__ */ jsx(SchemaRenderer, {
+											components: schemaFor(index),
+											columns: component.simple ? { default: 1 } : component.columns ?? {
+												default: 1,
+												lg: 2
+											},
+											className: cn(component.simple && "gap-0", "[&_[data-slot=field]_[data-slot=label]]:hidden", !component.simple && "[&_[data-slot=field]_[data-slot=label]]:flex")
+										})
+									}), component.simple && canDelete && /* @__PURE__ */ jsx(ItemActionButton, {
+										action: resolve("delete", serverItem),
+										context,
+										args: { item: String(index) },
+										size: "default",
+										className: "text-muted-foreground",
+										onClient: () => removeItem(index)
+									})]
+								}) })]
+							})
+						}, index);
+					})
+				})] }),
+				canAdd && /* @__PURE__ */ jsx(AddActionRow, {
+					alignment: component.addActionAlignment,
+					children: /* @__PURE__ */ jsx(ItemActionButton, {
+						action: resolve("add"),
+						context,
+						size: "sm",
+						onClient: addItem
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { RepeaterField };
+
+//# sourceMappingURL=repeater.js.map

package/dist/components/fields/repeater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeater.js","names":[],"sources":["../../../src/components/fields/repeater.tsx"],"sourcesContent":["import type { RepeaterSchema, SchemaComponent } from '@alfakit/core'\nimport {\n  VIRTUAL_ESTIMATES,\n  appendRepeaterItem,\n  cloneIndexedState,\n  cloneRepeaterItem,\n  columnSpanClasses,\n  fieldIds,\n  gridColumnsClasses,\n  isDeferredPlaceholder,\n  moveIndexedState,\n  moveRepeaterItem,\n  removeIndexedState,\n  removeRepeaterItem,\n  reorderedItemKeys,\n  replacePlaceholder,\n  virtualizeOptions,\n} from '@alfakit/core'\nimport { useState } from 'react'\nimport { useFormatter } from '../../context'\nimport { useScrollToErroredItem, useVirtualList } from '../../hooks/use-virtual-list'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { DeferredSchema } from '../layout/deferred'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { Collapsible, CollapsibleContent } from '../ui/collapsible'\nimport {\n  AddActionRow,\n  CollapseAllActions,\n  ItemActionButton,\n  ItemHeaderActions,\n  useItemActionFallbacks,\n  useItemActions,\n  useItemMoves,\n  useRunItemAction,\n} from './item-actions'\nimport { RepeaterTable } from './repeater-table'\n\n/**\n * Items use the per-index schema from the server when available (so closures see item\n * state) and fall back to the template for freshly added items.\n */\n/**\n * `deferLoading()`: a skeleton until the field scrolls into view, then the field with its\n * items (loaded from the server).\n */\nexport function RepeaterField({ component }: { component: RepeaterSchema }) {\n  if (!isDeferredPlaceholder(component)) return <RepeaterFieldContent component={component} />\n\n  return (\n    <DeferredSchema component={component}>\n      {(loaded) => <RepeaterFieldContent component={loaded} />}\n    </DeferredSchema>\n  )\n}\n\nfunction RepeaterFieldContent({ component }: { component: RepeaterSchema }) {\n  const formatter = useFormatter()\n  const { value, setValue, error, id, disabled, readOnly, aria } = useField<unknown[] | null>(\n    component,\n  )\n  const context = useFieldActionContext(component)\n  const runItemAction = useRunItemAction(context)\n  const fallbacks = useItemActionFallbacks(component.addActionLabel)\n  const resolve = useItemActions(component, fallbacks)\n  // Read-only shows the items but hides add, delete, clone and reorder controls.\n  const locked = disabled || readOnly\n  const items = value ?? []\n  const [collapsed, setCollapsed] = useState<Record<number, boolean>>({})\n  const [dragIndex, setDragIndex] = useState<number | null>(null)\n  // Long lists render only the visible items (plus a few around them); a multi-column\n  // `grid()` is windowed by whole rows, counting its columns from the rendered grid.\n  const virtual = useVirtualList(\n    items.length,\n    virtualizeOptions(\n      component.virtualize,\n      VIRTUAL_ESTIMATES.item,\n      12,\n      component.grid ? 'auto' : 1,\n    ),\n  )\n  const { range, indexes, style, attach, item } = virtual\n  useScrollToErroredItem(virtual.list, range.active, component.statePath)\n\n  // Collapsed flags are keyed by index, so they move with their item.\n  const moveItem = (from: number, to: number) => {\n    setValue(moveRepeaterItem(items, from, to))\n    setCollapsed((state) => moveIndexedState(state, from, to))\n  }\n  const removeItem = (index: number) => {\n    setValue(removeRepeaterItem(items, index))\n    setCollapsed((state) => removeIndexedState(state, index))\n  }\n  const cloneItem = (index: number) => {\n    setValue(cloneRepeaterItem(items, index))\n    setCollapsed((state) => cloneIndexedState(state, index))\n  }\n  // Move buttons: announced, one at a time, focus kept on the moved item.\n  const {\n    moveWithButton,\n    region: moveRegion,\n    containerRef: moveContainerRef,\n  } = useItemMoves(value, moveItem, (index) => component.items[index]?.label, items.length)\n  // A drop runs the reorder action: in the browser, or on the server when customised.\n  const dropItem = (from: number, to: number) =>\n    runItemAction(resolve('reorder'), { items: reorderedItemKeys(items.length, from, to) }, () =>\n      moveItem(from, to),\n    )\n  const setAllCollapsed = (value: boolean) =>\n    setCollapsed(Object.fromEntries(items.map((_, index) => [index, value])))\n  const addItem = () =>\n    setValue(\n      appendRepeaterItem(\n        items,\n        component.simple\n          ? ({ [Object.keys(component.templateState)[0] ?? 'value']: null } as Record<\n              string,\n              unknown\n            >)\n          : component.templateState,\n      ),\n    )\n\n  const schemaFor = (index: number): SchemaComponent[] =>\n    component.items[index]?.schema ??\n    replacePlaceholder(component.template, '__INDEX__', String(index))\n\n  const canAdd =\n    component.addable &&\n    !locked &&\n    (component.maxItems == null || items.length < component.maxItems)\n  const canDelete =\n    component.deletable &&\n    !locked &&\n    (component.minItems == null || items.length > component.minItems)\n  const draggable =\n    component.reorderable &&\n    component.reorderableWithDragAndDrop !== false &&\n    !locked &&\n    resolve('reorder') !== null\n  const buttons = component.reorderable && component.reorderableWithButtons !== false && !locked\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div ref={moveContainerRef} className=\"flex flex-col gap-3\">\n        {moveRegion}\n        {component.table?.length && !component.simple ? (\n          <RepeaterTable\n            id={id}\n            columns={component.table}\n            compact={component.compact}\n            count={items.length}\n            prefixFor={(index) => `${component.statePath}.${index}.`}\n            schemaFor={schemaFor}\n            labelledBy={component.label ? fieldIds(id).label : undefined}\n            describedBy={aria['aria-describedby']}\n            reorderable={buttons}\n            cloneable={Boolean(component.cloneable) && canAdd}\n            deletable={canDelete}\n            onMove={moveItem}\n            onClone={cloneItem}\n            onRemove={removeItem}\n            virtual={virtual}\n            context={context}\n            resolve={(name, index) => resolve(name, component.items[index])}\n            extraActionsFor={(index) => component.items[index]?.actions}\n          />\n        ) : (\n          <>\n            {component.collapsible && !component.simple && items.length > 0 && (\n              <CollapseAllActions\n                context={context}\n                resolve={(name) => resolve(name)}\n                onCollapseAll={() => setAllCollapsed(true)}\n                onExpandAll={() => setAllCollapsed(false)}\n              />\n            )}\n            <ul\n              id={id}\n              aria-labelledby={component.label ? fieldIds(id).label : undefined}\n              aria-describedby={aria['aria-describedby']}\n              ref={attach}\n              style={style}\n              className={cn('grid gap-3', component.grid && gridColumnsClasses(component.grid))}\n            >\n              {indexes.map((index) => {\n                const isCollapsed = collapsed[index] ?? component.collapsed ?? false\n                const label = component.items[index]?.label ?? null\n                const serverItem = component.items[index]\n\n                return (\n                  <li\n                    key={index}\n                    ref={item}\n                    data-index={index}\n                    aria-setsize={range.active ? items.length : undefined}\n                    aria-posinset={range.active ? index + 1 : undefined}\n                    draggable={draggable}\n                    onDragStart={() => setDragIndex(index)}\n                    onDragOver={(event) => draggable && event.preventDefault()}\n                    onDrop={() => {\n                      if (dragIndex !== null && dragIndex !== index) dropItem(dragIndex, index)\n                      setDragIndex(null)\n                    }}\n                    onDragEnd={() => setDragIndex(null)}\n                    className={cn(\n                      'bg-card min-w-0 rounded-lg border shadow-xs',\n                      dragIndex === index && 'opacity-50',\n                      component.simple && 'border-0 shadow-none',\n                    )}\n                  >\n                    <Collapsible open={!isCollapsed}>\n                      {!component.simple && (\n                        <div\n                          className=\"flex flex-wrap items-center gap-1 border-b px-2 py-1.5\"\n                          data-slot=\"item-header\"\n                        >\n                          {draggable && (\n                            <span\n                              className=\"text-muted-foreground cursor-grab\"\n                              title={resolve('reorder', serverItem)?.label ?? undefined}\n                              aria-hidden=\"true\"\n                            >\n                              <Icon\n                                name={resolve('reorder', serverItem)?.icon ?? 'grip-vertical'}\n                              />\n                            </span>\n                          )}\n                          {component.itemNumbers && (\n                            <span className=\"text-muted-foreground text-xs tabular-nums\">\n                              {formatter.number(index + 1)}\n                            </span>\n                          )}\n                          {label && (\n                            <span dir=\"auto\" className=\"min-w-0 truncate text-sm font-medium\">\n                              {label}\n                            </span>\n                          )}\n                          <span className=\"flex-1\" />\n                          <ItemHeaderActions\n                            context={context}\n                            itemKey={String(index)}\n                            index={index}\n                            count={items.length}\n                            resolve={(name) => resolve(name, serverItem)}\n                            extraActions={locked ? undefined : serverItem?.actions}\n                            buttons={buttons}\n                            canClone={Boolean(component.cloneable) && canAdd}\n                            canDelete={canDelete}\n                            collapsible={Boolean(component.collapsible)}\n                            collapsed={isCollapsed}\n                            onMove={moveWithButton}\n                            onClone={() => cloneItem(index)}\n                            onDelete={() => removeItem(index)}\n                            onToggle={() =>\n                              setCollapsed((state) => ({ ...state, [index]: !isCollapsed }))\n                            }\n                          />\n                        </div>\n                      )}\n                      <CollapsibleContent>\n                        <div className={cn('flex gap-2', component.simple ? 'items-start' : 'p-4')}>\n                          <div className=\"flex-1\">\n                            <SchemaRenderer\n                              components={schemaFor(index)}\n                              columns={\n                                component.simple\n                                  ? { default: 1 }\n                                  : (component.columns ?? { default: 1, lg: 2 })\n                              }\n                              className={cn(\n                                component.simple && 'gap-0',\n                                '[&_[data-slot=field]_[data-slot=label]]:hidden',\n                                !component.simple && '[&_[data-slot=field]_[data-slot=label]]:flex',\n                              )}\n                            />\n                          </div>\n                          {component.simple && canDelete && (\n                            <ItemActionButton\n                              action={resolve('delete', serverItem)}\n                              context={context}\n                              args={{ item: String(index) }}\n                              size=\"default\"\n                              className=\"text-muted-foreground\"\n                              onClient={() => removeItem(index)}\n                            />\n                          )}\n                        </div>\n                      </CollapsibleContent>\n                    </Collapsible>\n                  </li>\n                )\n              })}\n            </ul>\n          </>\n        )}\n        {canAdd && (\n          <AddActionRow alignment={component.addActionAlignment}>\n            <ItemActionButton\n              action={resolve('add')}\n              context={context}\n              size=\"sm\"\n              onClient={addItem}\n            />\n          </AddActionRow>\n        )}\n      </div>\n    </FieldWrapper>\n  )\n}\n\nexport function columnSpanOf(component: SchemaComponent): string {\n  return columnSpanClasses(component.columnSpan)\n}\n"],"mappings":"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"}

package/dist/components/fields/rich-editor-extensions.js

@@ -0,0 +1,295 @@
+import { useActionRunner, useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { useStore } from "../../hooks/use-store.js";
+import { useOptionalFormStore } from "../form/form-context.js";
+import { Input } from "../ui/input.js";
+import { EditorSuggestions, RichEditorRemote, commandLabel, customBlockNodeConfig, fieldActionContext, groupCustomBlocks, groupTriggerButton, isCustomBlockResult, mentionNodeConfig, mergeTagNodeConfig, mergeTagText } from "@alfakit/core";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BlocksIcon, BracesIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import { Node } from "@tiptap/react";
+//#region src/components/fields/rich-editor-extensions.tsx
+/**
+* Mentions, merge tags and custom blocks for a RichEditor. `editorRef` points at the live
+* editor, which the custom block node views and suggestions act on.
+*/
+function useRichEditorExtensions(component, editorRef) {
+	const t = useT();
+	const form = useOptionalFormStore();
+	const page = usePageActionContext();
+	const runner = useActionRunner();
+	const context = useMemo(() => fieldActionContext({
+		token: page.token,
+		form,
+		key: component.key
+	}), [
+		page.token,
+		form,
+		component.key
+	]);
+	const contextRef = useRef(context);
+	const componentRef = useRef(component);
+	const [remote] = useState(() => new RichEditorRemote(form, component.statePath));
+	const [suggestions] = useState(() => new EditorSuggestions({
+		mentions: component.mentions ?? [],
+		mergeTags: component.mergeTags ?? [],
+		search: (trigger, query) => remote.searchMentions(trigger, query)
+	}));
+	useEffect(() => () => suggestions.destroy(), [suggestions]);
+	const runBlock = async (id, config) => {
+		const block = componentRef.current.customBlocks?.find((candidate) => candidate.id === id);
+		if (!block) return null;
+		const result = await runner.runField(block.action, {
+			...contextRef.current,
+			arguments: config ? {
+				config,
+				editing: true
+			} : {}
+		});
+		if (!isCustomBlockResult(result)) return null;
+		if (result.preview !== void 0) remote.primePreview(result.id, result.config, result.preview, result.prose === true);
+		return result;
+	};
+	const runBlockRef = useRef(runBlock);
+	useEffect(() => {
+		contextRef.current = context;
+		componentRef.current = component;
+		runBlockRef.current = runBlock;
+	});
+	const [extensions] = useState(() => [
+		Node.create(mentionNodeConfig()),
+		Node.create(mergeTagNodeConfig()),
+		Node.create(customBlockNodeConfig({
+			get blocks() {
+				return componentRef.current.customBlocks ?? [];
+			},
+			loadPreview: (id, config) => remote.loadPreview(id, config),
+			onEdit: ({ id, config, pos }) => {
+				runBlockRef.current(id, config).then((result) => {
+					const editor = editorRef.current;
+					if (!result || !editor || editor.isDestroyed) return;
+					editor.view.dispatch(editor.state.tr.setNodeMarkup(pos, void 0, {
+						id,
+						config: result.config
+					}));
+				});
+			},
+			labels: {
+				edit: t("editor.edit_block", {}, "Edit block"),
+				remove: t("editor.remove_block", {}, "Remove block")
+			},
+			minimal: Boolean(component.minimalCustomBlockControls)
+		}))
+	]);
+	const insertBlock = async (id) => {
+		const result = await runBlock(id);
+		const editor = editorRef.current;
+		if (!result || !editor || editor.isDestroyed) return;
+		editor.chain().focus().insertContent({
+			type: "customBlock",
+			attrs: {
+				id: result.id,
+				config: result.config
+			}
+		}).run();
+	};
+	return {
+		extensions,
+		suggestions,
+		insertBlock,
+		context
+	};
+}
+/** The toolbar button that opens the custom blocks or merge tags panel. */
+function ExtensionToolbarButton({ name, component, editable, open, onToggle }) {
+	const t = useT();
+	if ((name === "customBlocks" ? (component.customBlocks ?? []).length : (component.mergeTags ?? []).length) === 0) return null;
+	const label = name === "customBlocks" ? t("editor.custom_blocks", {}, "Insert block") : t("editor.merge_tags", {}, "Insert merge tag");
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "icon-sm",
+		"aria-label": label,
+		title: label,
+		"aria-pressed": open,
+		"aria-expanded": open,
+		disabled: !editable,
+		className: cn(open && "bg-accent text-accent-foreground"),
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: onToggle,
+		children: name === "customBlocks" ? /* @__PURE__ */ jsx(BlocksIcon, {}) : /* @__PURE__ */ jsx(BracesIcon, {})
+	});
+}
+/**
+* The custom blocks or merge tags panel: beside the content on wide editors, above it on
+* narrow ones. Blocks are grouped, optionally searchable and shown as a grid.
+*/
+function RichEditorSidePanel({ panel, component, editable, sticky, onInsertBlock, onInsertMergeTag, onClose }) {
+	const t = useT();
+	const [search, setSearch] = useState("");
+	const heading = panel === "customBlocks" ? t("editor.custom_blocks_heading", {}, "Custom blocks") : t("editor.merge_tags_heading", {}, "Merge tags");
+	const groups = panel === "customBlocks" ? groupCustomBlocks(component.customBlocks ?? [], search) : [];
+	const grid = Boolean(component.customBlocksGrid);
+	const itemClass = "hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50";
+	return /* @__PURE__ */ jsx("aside", {
+		"aria-label": heading,
+		"data-slot": "rich-editor-panel",
+		"data-panel": panel,
+		className: "bg-muted/20 shrink-0 border-b @2xl:w-64 @2xl:border-s @2xl:border-b-0",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col gap-2 p-2", sticky !== null && "@2xl:sticky"),
+			style: sticky !== null ? { top: sticky } : void 0,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-xs font-medium",
+						children: heading
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": t("editor.close_panel", {}, "Close panel"),
+						title: t("editor.close_panel", {}, "Close panel"),
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: onClose,
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})]
+				}),
+				panel === "customBlocks" && component.searchableCustomBlocks && /* @__PURE__ */ jsx(Input, {
+					type: "search",
+					value: search,
+					"aria-label": t("editor.search_blocks", {}, "Search blocks"),
+					placeholder: t("editor.search_blocks", {}, "Search blocks"),
+					className: "h-8",
+					onChange: (event) => setSearch(event.target.value)
+				}),
+				panel === "customBlocks" ? groups.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground px-2 py-1.5 text-sm",
+					children: t("no_results", {}, "No results.")
+				}) : groups.map(({ group, blocks }) => /* @__PURE__ */ jsxs("div", {
+					role: "group",
+					"aria-label": group ?? heading,
+					children: [group && /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground px-2 pt-1 pb-0.5 text-xs font-medium",
+						children: group
+					}), /* @__PURE__ */ jsx("div", {
+						className: cn(grid ? "grid grid-cols-2 gap-1" : "flex flex-col gap-0.5"),
+						children: blocks.map((block) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							disabled: !editable,
+							className: cn(itemClass, grid && "flex-col justify-center border py-3 text-center"),
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => onInsertBlock(block.id),
+							children: [block.icon ? /* @__PURE__ */ jsx(Icon, {
+								name: block.icon,
+								className: "size-4 shrink-0"
+							}) : /* @__PURE__ */ jsx(BlocksIcon, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: block.label
+							})]
+						}, block.id))
+					})]
+				}, group ?? "")) : /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-0.5",
+					children: (component.mergeTags ?? []).map((tag) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						disabled: !editable,
+						className: itemClass,
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => onInsertMergeTag(tag.id),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: tag.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground ms-auto font-mono text-xs",
+							dir: "ltr",
+							children: mergeTagText({ id: tag.id })
+						})]
+					}, tag.id))
+				})
+			]
+		})
+	});
+}
+/** A `ToolbarButtonGroup`: a dropdown of buttons (icons, or labels with `textualButtons()`). */
+function ToolbarGroupButton({ group, editor, editable, commands, icons, translate, onRun }) {
+	const buttons = group.buttons.filter((name) => commands[name]);
+	if (buttons.length === 0) return null;
+	const trigger = groupTriggerButton(buttons, editor, commands);
+	const active = buttons.some((name) => commands[name]?.active?.(editor));
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "sm",
+			"aria-label": group.label,
+			title: group.label,
+			disabled: !editable,
+			className: cn("h-8 gap-0.5 px-1.5", active && "bg-accent text-accent-foreground"),
+			onMouseDown: (event) => event.preventDefault(),
+			children: [group.icon ? /* @__PURE__ */ jsx(Icon, { name: group.icon }) : trigger ? icons(trigger) : group.label, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 opacity-60" })]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "start",
+		"aria-label": group.label,
+		className: cn(!group.textual && "flex min-w-0 flex-row gap-0.5"),
+		children: buttons.map((name) => {
+			const label = commandLabel(name, commands, translate);
+			const pressed = commands[name]?.active?.(editor);
+			return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				"aria-label": group.textual ? void 0 : label,
+				title: label,
+				className: cn(pressed && "bg-accent text-accent-foreground"),
+				onSelect: () => onRun(name),
+				children: [icons(name), group.textual && /* @__PURE__ */ jsx("span", { children: label })]
+			}, name);
+		})
+	})] });
+}
+/** Inline style of a sticky toolbar. */
+function stickyStyle(top) {
+	return top === null ? void 0 : { top };
+}
+/** The mention / merge tag listbox under the trigger. */
+function SuggestionPopup({ suggestions, editor, id }) {
+	const t = useT();
+	const state = useStore(suggestions.store);
+	if (!state.open || !editor) return null;
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		role: "listbox",
+		"aria-label": t("editor.suggestions", {}, "Suggestions"),
+		"data-slot": "rich-editor-suggestions",
+		className: "bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md",
+		style: state.coords ? {
+			left: state.coords.left,
+			top: state.coords.bottom + 4
+		} : void 0,
+		children: state.loading && state.items.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground px-2 py-1.5 text-sm",
+			children: t("loading", {}, "Loading…")
+		}) : state.items.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground px-2 py-1.5 text-sm",
+			children: t("no_results", {}, "No results.")
+		}) : state.items.map((item, index) => /* @__PURE__ */ jsx("div", {
+			id: `${id}-${index}`,
+			role: "option",
+			"aria-selected": index === state.index,
+			className: cn("cursor-pointer rounded-sm px-2 py-1.5 text-sm", index === state.index && "bg-accent text-accent-foreground"),
+			onMouseDown: (event) => event.preventDefault(),
+			onMouseEnter: () => suggestions.highlight(index),
+			onClick: () => suggestions.select(index, editor),
+			children: state.kind === "mention" ? `${state.trigger}${item.label}` : item.label
+		}, item.id))
+	});
+}
+//#endregion
+export { ExtensionToolbarButton, RichEditorSidePanel, SuggestionPopup, ToolbarGroupButton, stickyStyle, useRichEditorExtensions };
+
+//# sourceMappingURL=rich-editor-extensions.js.map

package/dist/components/fields/rich-editor-extensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-editor-extensions.js","names":[],"sources":["../../../src/components/fields/rich-editor-extensions.tsx"],"sourcesContent":["import type {\n  ActionContext,\n  RichEditorPanel,\n  RichEditorSchema,\n  RichEditorToolbarGroupSchema,\n  SuggestionState,\n  ToolbarCommand,\n} from '@alfakit/core'\nimport {\n  commandLabel,\n  customBlockNodeConfig,\n  EditorSuggestions,\n  fieldActionContext,\n  groupCustomBlocks,\n  groupTriggerButton,\n  isCustomBlockResult,\n  mentionNodeConfig,\n  mergeTagNodeConfig,\n  mergeTagText,\n  RichEditorRemote,\n} from '@alfakit/core'\nimport { Node, type Editor, type Extensions } from '@tiptap/react'\nimport { BlocksIcon, BracesIcon, ChevronDownIcon, XIcon } from 'lucide-react'\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type MutableRefObject,\n  type ReactNode,\n} from 'react'\nimport { useActionRunner, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { Button } from '../ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { Input } from '../ui/input'\n\ntype NodeConfig = Parameters<typeof Node.create>[0]\n\nexport interface RichEditorExtensions {\n  extensions: Extensions\n  suggestions: EditorSuggestions\n  /** Insert a custom block (opening its modal first when it has a form). */\n  insertBlock: (id: string) => Promise<void>\n  context: ActionContext\n}\n\n/**\n * Mentions, merge tags and custom blocks for a RichEditor. `editorRef` points at the live\n * editor, which the custom block node views and suggestions act on.\n */\nexport function useRichEditorExtensions(\n  component: RichEditorSchema,\n  editorRef: MutableRefObject<Editor | null>,\n): RichEditorExtensions {\n  const t = useT()\n  const form = useOptionalFormStore()\n  const page = usePageActionContext()\n  const runner = useActionRunner()\n  const context = useMemo(\n    () => fieldActionContext({ token: page.token, form, key: component.key }),\n    [page.token, form, component.key],\n  )\n  const contextRef = useRef(context)\n  const componentRef = useRef(component)\n\n  const [remote] = useState(() => new RichEditorRemote(form, component.statePath))\n  const [suggestions] = useState(\n    () =>\n      new EditorSuggestions({\n        mentions: component.mentions ?? [],\n        mergeTags: component.mergeTags ?? [],\n        search: (trigger, query) => remote.searchMentions(trigger, query),\n      }),\n  )\n\n  useEffect(() => () => suggestions.destroy(), [suggestions])\n\n  const runBlock = async (id: string, config?: Record<string, unknown>) => {\n    const block = componentRef.current.customBlocks?.find((candidate) => candidate.id === id)\n\n    if (!block) return null\n\n    const result = await runner.runField(block.action, {\n      ...contextRef.current,\n      arguments: config ? { config, editing: true } : {},\n    })\n\n    if (!isCustomBlockResult(result)) return null\n\n    if (result.preview !== undefined) {\n      remote.primePreview(result.id, result.config, result.preview, result.prose === true)\n    }\n\n    return result\n  }\n\n  const runBlockRef = useRef(runBlock)\n\n  useEffect(() => {\n    contextRef.current = context\n    componentRef.current = component\n    runBlockRef.current = runBlock\n  })\n\n  // The editor is created once; the node views read the latest props through refs when\n  // they run (on edit, on preview), never during render.\n  // eslint-disable-next-line react-hooks/refs\n  const [extensions] = useState<Extensions>(() => [\n    Node.create(mentionNodeConfig() as NodeConfig),\n    Node.create(mergeTagNodeConfig() as NodeConfig),\n    Node.create(\n      customBlockNodeConfig({\n        get blocks() {\n          return componentRef.current.customBlocks ?? []\n        },\n        loadPreview: (id, config) => remote.loadPreview(id, config),\n        onEdit: ({ id, config, pos }) => {\n          void runBlockRef.current(id, config).then((result) => {\n            const editor = editorRef.current\n\n            if (!result || !editor || editor.isDestroyed) return\n\n            editor.view.dispatch(\n              editor.state.tr.setNodeMarkup(pos, undefined, { id, config: result.config }),\n            )\n          })\n        },\n        labels: {\n          edit: t('editor.edit_block', {}, 'Edit block'),\n          remove: t('editor.remove_block', {}, 'Remove block'),\n        },\n        minimal: Boolean(component.minimalCustomBlockControls),\n      }) as NodeConfig,\n    ),\n  ])\n\n  const insertBlock = async (id: string) => {\n    const result = await runBlock(id)\n    const editor = editorRef.current\n\n    if (!result || !editor || editor.isDestroyed) return\n\n    editor\n      .chain()\n      .focus()\n      .insertContent({ type: 'customBlock', attrs: { id: result.id, config: result.config } })\n      .run()\n  }\n\n  return { extensions, suggestions, insertBlock, context }\n}\n\n/** The toolbar button that opens the custom blocks or merge tags panel. */\nexport function ExtensionToolbarButton({\n  name,\n  component,\n  editable,\n  open,\n  onToggle,\n}: {\n  name: RichEditorPanel\n  component: RichEditorSchema\n  editable: boolean\n  open: boolean\n  onToggle: () => void\n}) {\n  const t = useT()\n  const count =\n    name === 'customBlocks'\n      ? (component.customBlocks ?? []).length\n      : (component.mergeTags ?? []).length\n\n  if (count === 0) return null\n\n  const label =\n    name === 'customBlocks'\n      ? t('editor.custom_blocks', {}, 'Insert block')\n      : t('editor.merge_tags', {}, 'Insert merge tag')\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      aria-label={label}\n      title={label}\n      aria-pressed={open}\n      aria-expanded={open}\n      disabled={!editable}\n      className={cn(open && 'bg-accent text-accent-foreground')}\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={onToggle}\n    >\n      {name === 'customBlocks' ? <BlocksIcon /> : <BracesIcon />}\n    </Button>\n  )\n}\n\n/**\n * The custom blocks or merge tags panel: beside the content on wide editors, above it on\n * narrow ones. Blocks are grouped, optionally searchable and shown as a grid.\n */\nexport function RichEditorSidePanel({\n  panel,\n  component,\n  editable,\n  sticky,\n  onInsertBlock,\n  onInsertMergeTag,\n  onClose,\n}: {\n  panel: RichEditorPanel\n  component: RichEditorSchema\n  editable: boolean\n  /** `top` of a sticky panel, or null. */\n  sticky: string | null\n  onInsertBlock: (id: string) => void\n  onInsertMergeTag: (id: string) => void\n  onClose: () => void\n}) {\n  const t = useT()\n  const [search, setSearch] = useState('')\n  const heading =\n    panel === 'customBlocks'\n      ? t('editor.custom_blocks_heading', {}, 'Custom blocks')\n      : t('editor.merge_tags_heading', {}, 'Merge tags')\n  const groups =\n    panel === 'customBlocks' ? groupCustomBlocks(component.customBlocks ?? [], search) : []\n  const grid = Boolean(component.customBlocksGrid)\n  const itemClass =\n    'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50'\n\n  return (\n    <aside\n      aria-label={heading}\n      data-slot=\"rich-editor-panel\"\n      data-panel={panel}\n      className=\"bg-muted/20 shrink-0 border-b @2xl:w-64 @2xl:border-s @2xl:border-b-0\"\n    >\n      <div\n        className={cn('flex flex-col gap-2 p-2', sticky !== null && '@2xl:sticky')}\n        // The offset is a runtime value: no Tailwind class can hold it.\n        style={sticky !== null ? { top: sticky } : undefined}\n      >\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"text-muted-foreground text-xs font-medium\">{heading}</span>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label={t('editor.close_panel', {}, 'Close panel')}\n            title={t('editor.close_panel', {}, 'Close panel')}\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={onClose}\n          >\n            <XIcon />\n          </Button>\n        </div>\n        {panel === 'customBlocks' && component.searchableCustomBlocks && (\n          <Input\n            type=\"search\"\n            value={search}\n            aria-label={t('editor.search_blocks', {}, 'Search blocks')}\n            placeholder={t('editor.search_blocks', {}, 'Search blocks')}\n            className=\"h-8\"\n            onChange={(event) => setSearch(event.target.value)}\n          />\n        )}\n        {panel === 'customBlocks' ? (\n          groups.length === 0 ? (\n            <p className=\"text-muted-foreground px-2 py-1.5 text-sm\">\n              {t('no_results', {}, 'No results.')}\n            </p>\n          ) : (\n            groups.map(({ group, blocks }) => (\n              <div key={group ?? ''} role=\"group\" aria-label={group ?? heading}>\n                {group && (\n                  <div className=\"text-muted-foreground px-2 pt-1 pb-0.5 text-xs font-medium\">\n                    {group}\n                  </div>\n                )}\n                <div className={cn(grid ? 'grid grid-cols-2 gap-1' : 'flex flex-col gap-0.5')}>\n                  {blocks.map((block) => (\n                    <button\n                      key={block.id}\n                      type=\"button\"\n                      disabled={!editable}\n                      className={cn(\n                        itemClass,\n                        grid && 'flex-col justify-center border py-3 text-center',\n                      )}\n                      onMouseDown={(event) => event.preventDefault()}\n                      onClick={() => onInsertBlock(block.id)}\n                    >\n                      {block.icon ? (\n                        <Icon name={block.icon} className=\"size-4 shrink-0\" />\n                      ) : (\n                        <BlocksIcon className=\"size-4 shrink-0\" />\n                      )}\n                      <span className=\"truncate\">{block.label}</span>\n                    </button>\n                  ))}\n                </div>\n              </div>\n            ))\n          )\n        ) : (\n          <div className=\"flex flex-col gap-0.5\">\n            {(component.mergeTags ?? []).map((tag) => (\n              <button\n                key={tag.id}\n                type=\"button\"\n                disabled={!editable}\n                className={itemClass}\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={() => onInsertMergeTag(tag.id)}\n              >\n                <span className=\"truncate\">{tag.label}</span>\n                <span className=\"text-muted-foreground ms-auto font-mono text-xs\" dir=\"ltr\">\n                  {mergeTagText({ id: tag.id })}\n                </span>\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n    </aside>\n  )\n}\n\n/** A `ToolbarButtonGroup`: a dropdown of buttons (icons, or labels with `textualButtons()`). */\nexport function ToolbarGroupButton({\n  group,\n  editor,\n  editable,\n  commands,\n  icons,\n  translate,\n  onRun,\n}: {\n  group: RichEditorToolbarGroupSchema\n  editor: Editor\n  editable: boolean\n  commands: Record<string, ToolbarCommand>\n  icons: (name: string) => ReactNode\n  translate: (key: string, fallback: string) => string\n  onRun: (name: string) => void\n}) {\n  const buttons = group.buttons.filter((name) => commands[name])\n\n  if (buttons.length === 0) return null\n\n  const trigger = groupTriggerButton(buttons, editor, commands)\n  const active = buttons.some((name) => commands[name]?.active?.(editor))\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          aria-label={group.label}\n          title={group.label}\n          disabled={!editable}\n          className={cn('h-8 gap-0.5 px-1.5', active && 'bg-accent text-accent-foreground')}\n          onMouseDown={(event) => event.preventDefault()}\n        >\n          {group.icon ? <Icon name={group.icon} /> : trigger ? icons(trigger) : group.label}\n          <ChevronDownIcon className=\"size-3 opacity-60\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align=\"start\"\n        aria-label={group.label}\n        className={cn(!group.textual && 'flex min-w-0 flex-row gap-0.5')}\n      >\n        {buttons.map((name) => {\n          const label = commandLabel(name, commands, translate)\n          const pressed = commands[name]?.active?.(editor)\n\n          return (\n            <DropdownMenuItem\n              key={name}\n              aria-label={group.textual ? undefined : label}\n              title={label}\n              className={cn(pressed && 'bg-accent text-accent-foreground')}\n              onSelect={() => onRun(name)}\n            >\n              {icons(name)}\n              {group.textual && <span>{label}</span>}\n            </DropdownMenuItem>\n          )\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** Inline style of a sticky toolbar. */\nexport function stickyStyle(top: string | null): CSSProperties | undefined {\n  return top === null ? undefined : { top }\n}\n\n/** The mention / merge tag listbox under the trigger. */\nexport function SuggestionPopup({\n  suggestions,\n  editor,\n  id,\n}: {\n  suggestions: EditorSuggestions\n  editor: Editor | null\n  id: string\n}) {\n  const t = useT()\n  const state: SuggestionState = useStore(suggestions.store)\n\n  if (!state.open || !editor) return null\n\n  return (\n    <div\n      id={id}\n      role=\"listbox\"\n      aria-label={t('editor.suggestions', {}, 'Suggestions')}\n      data-slot=\"rich-editor-suggestions\"\n      className=\"bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\"\n      // Runtime coordinates cannot be Tailwind classes.\n      style={state.coords ? { left: state.coords.left, top: state.coords.bottom + 4 } : undefined}\n    >\n      {state.loading && state.items.length === 0 ? (\n        <div className=\"text-muted-foreground px-2 py-1.5 text-sm\">\n          {t('loading', {}, 'Loading…')}\n        </div>\n      ) : state.items.length === 0 ? (\n        <div className=\"text-muted-foreground px-2 py-1.5 text-sm\">\n          {t('no_results', {}, 'No results.')}\n        </div>\n      ) : (\n        state.items.map((item, index) => (\n          <div\n            key={item.id}\n            id={`${id}-${index}`}\n            role=\"option\"\n            aria-selected={index === state.index}\n            className={cn(\n              'cursor-pointer rounded-sm px-2 py-1.5 text-sm',\n              index === state.index && 'bg-accent text-accent-foreground',\n            )}\n            onMouseDown={(event) => event.preventDefault()}\n            onMouseEnter={() => suggestions.highlight(index)}\n            onClick={() => suggestions.select(index, editor)}\n          >\n            {state.kind === 'mention' ? `${state.trigger}${item.label}` : item.label}\n          </div>\n        ))\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6DA,SAAgB,wBACd,WACA,WACsB;CACtB,MAAM,IAAI,KAAK;CACf,MAAM,OAAO,qBAAqB;CAClC,MAAM,OAAO,qBAAqB;CAClC,MAAM,SAAS,gBAAgB;CAC/B,MAAM,UAAU,cACR,mBAAmB;EAAE,OAAO,KAAK;EAAO;EAAM,KAAK,UAAU;CAAI,CAAC,GACxE;EAAC,KAAK;EAAO;EAAM,UAAU;CAAG,CAClC;CACA,MAAM,aAAa,OAAO,OAAO;CACjC,MAAM,eAAe,OAAO,SAAS;CAErC,MAAM,CAAC,UAAU,eAAe,IAAI,iBAAiB,MAAM,UAAU,SAAS,CAAC;CAC/E,MAAM,CAAC,eAAe,eAElB,IAAI,kBAAkB;EACpB,UAAU,UAAU,YAAY,CAAC;EACjC,WAAW,UAAU,aAAa,CAAC;EACnC,SAAS,SAAS,UAAU,OAAO,eAAe,SAAS,KAAK;CAClE,CAAC,CACL;CAEA,sBAAsB,YAAY,QAAQ,GAAG,CAAC,WAAW,CAAC;CAE1D,MAAM,WAAW,OAAO,IAAY,WAAqC;EACvE,MAAM,QAAQ,aAAa,QAAQ,cAAc,MAAM,cAAc,UAAU,OAAO,EAAE;EAExF,IAAI,CAAC,OAAO,OAAO;EAEnB,MAAM,SAAS,MAAM,OAAO,SAAS,MAAM,QAAQ;GACjD,GAAG,WAAW;GACd,WAAW,SAAS;IAAE;IAAQ,SAAS;GAAK,IAAI,CAAC;EACnD,CAAC;EAED,IAAI,CAAC,oBAAoB,MAAM,GAAG,OAAO;EAEzC,IAAI,OAAO,YAAY,KAAA,GACrB,OAAO,aAAa,OAAO,IAAI,OAAO,QAAQ,OAAO,SAAS,OAAO,UAAU,IAAI;EAGrF,OAAO;CACT;CAEA,MAAM,cAAc,OAAO,QAAQ;CAEnC,gBAAgB;EACd,WAAW,UAAU;EACrB,aAAa,UAAU;EACvB,YAAY,UAAU;CACxB,CAAC;CAKD,MAAM,CAAC,cAAc,eAA2B;EAC9C,KAAK,OAAO,kBAAkB,CAAe;EAC7C,KAAK,OAAO,mBAAmB,CAAe;EAC9C,KAAK,OACH,sBAAsB;GACpB,IAAI,SAAS;IACX,OAAO,aAAa,QAAQ,gBAAgB,CAAC;GAC/C;GACA,cAAc,IAAI,WAAW,OAAO,YAAY,IAAI,MAAM;GAC1D,SAAS,EAAE,IAAI,QAAQ,UAAU;IAC/B,YAAiB,QAAQ,IAAI,MAAM,CAAC,CAAC,MAAM,WAAW;KACpD,MAAM,SAAS,UAAU;KAEzB,IAAI,CAAC,UAAU,CAAC,UAAU,OAAO,aAAa;KAE9C,OAAO,KAAK,SACV,OAAO,MAAM,GAAG,cAAc,KAAK,KAAA,GAAW;MAAE;MAAI,QAAQ,OAAO;KAAO,CAAC,CAC7E;IACF,CAAC;GACH;GACA,QAAQ;IACN,MAAM,EAAE,qBAAqB,CAAC,GAAG,YAAY;IAC7C,QAAQ,EAAE,uBAAuB,CAAC,GAAG,cAAc;GACrD;GACA,SAAS,QAAQ,UAAU,0BAA0B;EACvD,CAAC,CACH;CACF,CAAC;CAED,MAAM,cAAc,OAAO,OAAe;EACxC,MAAM,SAAS,MAAM,SAAS,EAAE;EAChC,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,UAAU,OAAO,aAAa;EAE9C,OACG,MAAM,CAAC,CACP,MAAM,CAAC,CACP,cAAc;GAAE,MAAM;GAAe,OAAO;IAAE,IAAI,OAAO;IAAI,QAAQ,OAAO;GAAO;EAAE,CAAC,CAAC,CACvF,IAAI;CACT;CAEA,OAAO;EAAE;EAAY;EAAa;EAAa;CAAQ;AACzD;;AAGA,SAAgB,uBAAuB,EACrC,MACA,WACA,UACA,MACA,YAOC;CACD,MAAM,IAAI,KAAK;CAMf,KAJE,SAAS,kBACJ,UAAU,gBAAgB,CAAC,EAAA,CAAG,UAC9B,UAAU,aAAa,CAAC,EAAA,CAAG,YAEpB,GAAG,OAAO;CAExB,MAAM,QACJ,SAAS,iBACL,EAAE,wBAAwB,CAAC,GAAG,cAAc,IAC5C,EAAE,qBAAqB,CAAC,GAAG,kBAAkB;CAEnD,OACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,OAAO;EACP,gBAAc;EACd,iBAAe;EACf,UAAU,CAAC;EACX,WAAW,GAAG,QAAQ,kCAAkC;EACxD,cAAc,UAAU,MAAM,eAAe;EAC7C,SAAS;EAER,UAAA,SAAS,iBAAiB,oBAAC,YAAD,CAAa,CAAA,IAAI,oBAAC,YAAD,CAAa,CAAA;CACnD,CAAA;AAEZ;;;;;AAMA,SAAgB,oBAAoB,EAClC,OACA,WACA,UACA,QACA,eACA,kBACA,WAUC;CACD,MAAM,IAAI,KAAK;CACf,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,UACJ,UAAU,iBACN,EAAE,gCAAgC,CAAC,GAAG,eAAe,IACrD,EAAE,6BAA6B,CAAC,GAAG,YAAY;CACrD,MAAM,SACJ,UAAU,iBAAiB,kBAAkB,UAAU,gBAAgB,CAAC,GAAG,MAAM,IAAI,CAAC;CACxF,MAAM,OAAO,QAAQ,UAAU,gBAAgB;CAC/C,MAAM,YACJ;CAEF,OACE,oBAAC,SAAD;EACE,cAAY;EACZ,aAAU;EACV,cAAY;EACZ,WAAU;EAEV,UAAA,qBAAC,OAAD;GACE,WAAW,GAAG,2BAA2B,WAAW,QAAQ,aAAa;GAEzE,OAAO,WAAW,OAAO,EAAE,KAAK,OAAO,IAAI,KAAA;GAH7C,UAAA;IAKE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,QAAD;MAAM,WAAU;MAA6C,UAAA;KAAc,CAAA,GAC3E,oBAAC,QAAD;MACE,MAAK;MACL,SAAQ;MACR,MAAK;MACL,cAAY,EAAE,sBAAsB,CAAC,GAAG,aAAa;MACrD,OAAO,EAAE,sBAAsB,CAAC,GAAG,aAAa;MAChD,cAAc,UAAU,MAAM,eAAe;MAC7C,SAAS;MAET,UAAA,oBAAC,OAAD,CAAQ,CAAA;KACF,CAAA,CACL;;IACJ,UAAU,kBAAkB,UAAU,0BACrC,oBAAC,OAAD;KACE,MAAK;KACL,OAAO;KACP,cAAY,EAAE,wBAAwB,CAAC,GAAG,eAAe;KACzD,aAAa,EAAE,wBAAwB,CAAC,GAAG,eAAe;KAC1D,WAAU;KACV,WAAW,UAAU,UAAU,MAAM,OAAO,KAAK;IAClD,CAAA;IAEF,UAAU,iBACT,OAAO,WAAW,IAChB,oBAAC,KAAD;KAAG,WAAU;KACV,UAAA,EAAE,cAAc,CAAC,GAAG,aAAa;IACjC,CAAA,IAEH,OAAO,KAAK,EAAE,OAAO,aACnB,qBAAC,OAAD;KAAuB,MAAK;KAAQ,cAAY,SAAS;KAAzD,UAAA,CACG,SACC,oBAAC,OAAD;MAAK,WAAU;MACZ,UAAA;KACE,CAAA,GAEP,oBAAC,OAAD;MAAK,WAAW,GAAG,OAAO,2BAA2B,uBAAuB;MACzE,UAAA,OAAO,KAAK,UACX,qBAAC,UAAD;OAEE,MAAK;OACL,UAAU,CAAC;OACX,WAAW,GACT,WACA,QAAQ,iDACV;OACA,cAAc,UAAU,MAAM,eAAe;OAC7C,eAAe,cAAc,MAAM,EAAE;OATvC,UAAA,CAWG,MAAM,OACL,oBAAC,MAAD;QAAM,MAAM,MAAM;QAAM,WAAU;OAAmB,CAAA,IAErD,oBAAC,YAAD,EAAY,WAAU,kBAAmB,CAAA,GAE3C,oBAAC,QAAD;QAAM,WAAU;QAAY,UAAA,MAAM;OAAY,CAAA,CACxC;MAhBD,GAAA,MAAM,EAgBL,CACT;KACE,CAAA,CACF;IA5BK,GAAA,SAAS,EA4Bd,CACN,IAGH,oBAAC,OAAD;KAAK,WAAU;KACX,WAAA,UAAU,aAAa,CAAC,EAAA,CAAG,KAAK,QAChC,qBAAC,UAAD;MAEE,MAAK;MACL,UAAU,CAAC;MACX,WAAW;MACX,cAAc,UAAU,MAAM,eAAe;MAC7C,eAAe,iBAAiB,IAAI,EAAE;MANxC,UAAA,CAQE,oBAAC,QAAD;OAAM,WAAU;OAAY,UAAA,IAAI;MAAY,CAAA,GAC5C,oBAAC,QAAD;OAAM,WAAU;OAAkD,KAAI;OACnE,UAAA,aAAa,EAAE,IAAI,IAAI,GAAG,CAAC;MACxB,CAAA,CACA;KAXD,GAAA,IAAI,EAWH,CACT;IACE,CAAA;GAEJ;;CACA,CAAA;AAEX;;AAGA,SAAgB,mBAAmB,EACjC,OACA,QACA,UACA,UACA,OACA,WACA,SASC;CACD,MAAM,UAAU,MAAM,QAAQ,QAAQ,SAAS,SAAS,KAAK;CAE7D,IAAI,QAAQ,WAAW,GAAG,OAAO;CAEjC,MAAM,UAAU,mBAAmB,SAAS,QAAQ,QAAQ;CAC5D,MAAM,SAAS,QAAQ,MAAM,SAAS,SAAS,KAAK,EAAE,SAAS,MAAM,CAAC;CAEtE,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;EAAqB,SAAA;EACnB,UAAA,qBAAC,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,cAAY,MAAM;GAClB,OAAO,MAAM;GACb,UAAU,CAAC;GACX,WAAW,GAAG,sBAAsB,UAAU,kCAAkC;GAChF,cAAc,UAAU,MAAM,eAAe;GAR/C,UAAA,CAUG,MAAM,OAAO,oBAAC,MAAD,EAAM,MAAM,MAAM,KAAO,CAAA,IAAI,UAAU,MAAM,OAAO,IAAI,MAAM,OAC5E,oBAAC,iBAAD,EAAiB,WAAU,oBAAqB,CAAA,CAC1C;;CACW,CAAA,GACrB,oBAAC,qBAAD;EACE,OAAM;EACN,cAAY,MAAM;EAClB,WAAW,GAAG,CAAC,MAAM,WAAW,+BAA+B;EAE9D,UAAA,QAAQ,KAAK,SAAS;GACrB,MAAM,QAAQ,aAAa,MAAM,UAAU,SAAS;GACpD,MAAM,UAAU,SAAS,KAAK,EAAE,SAAS,MAAM;GAE/C,OACE,qBAAC,kBAAD;IAEE,cAAY,MAAM,UAAU,KAAA,IAAY;IACxC,OAAO;IACP,WAAW,GAAG,WAAW,kCAAkC;IAC3D,gBAAgB,MAAM,IAAI;IAL5B,UAAA,CAOG,MAAM,IAAI,GACV,MAAM,WAAW,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,CACrB;GARX,GAAA,IAQW;EAEtB,CAAC;CACkB,CAAA,CACT,EAAA,CAAA;AAElB;;AAGA,SAAgB,YAAY,KAA+C;CACzE,OAAO,QAAQ,OAAO,KAAA,IAAY,EAAE,IAAI;AAC1C;;AAGA,SAAgB,gBAAgB,EAC9B,aACA,QACA,MAKC;CACD,MAAM,IAAI,KAAK;CACf,MAAM,QAAyB,SAAS,YAAY,KAAK;CAEzD,IAAI,CAAC,MAAM,QAAQ,CAAC,QAAQ,OAAO;CAEnC,OACE,oBAAC,OAAD;EACM;EACJ,MAAK;EACL,cAAY,EAAE,sBAAsB,CAAC,GAAG,aAAa;EACrD,aAAU;EACV,WAAU;EAEV,OAAO,MAAM,SAAS;GAAE,MAAM,MAAM,OAAO;GAAM,KAAK,MAAM,OAAO,SAAS;EAAE,IAAI,KAAA;EAEjF,UAAA,MAAM,WAAW,MAAM,MAAM,WAAW,IACvC,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,EAAE,WAAW,CAAC,GAAG,UAAU;EACzB,CAAA,IACH,MAAM,MAAM,WAAW,IACzB,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,EAAE,cAAc,CAAC,GAAG,aAAa;EAC/B,CAAA,IAEL,MAAM,MAAM,KAAK,MAAM,UACrB,oBAAC,OAAD;GAEE,IAAI,GAAG,GAAG,GAAG;GACb,MAAK;GACL,iBAAe,UAAU,MAAM;GAC/B,WAAW,GACT,iDACA,UAAU,MAAM,SAAS,kCAC3B;GACA,cAAc,UAAU,MAAM,eAAe;GAC7C,oBAAoB,YAAY,UAAU,KAAK;GAC/C,eAAe,YAAY,OAAO,OAAO,MAAM;GAE9C,UAAA,MAAM,SAAS,YAAY,GAAG,MAAM,UAAU,KAAK,UAAU,KAAK;EAChE,GAbE,KAAK,EAaP,CACN;CAEA,CAAA;AAET"}

package/dist/components/fields/rich-editor-lazy.d.ts

@@ -0,0 +1,9 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { RichEditorSchema } from "@alfakit/core";
+//#region src/components/fields/rich-editor-lazy.d.ts
+/** The rich and Markdown editors; Tiptap loads the first time one is shown. */
+export declare const RichEditorField: LazyComponent<{
+  component: RichEditorSchema;
+}>;
+//#endregion
+//# sourceMappingURL=rich-editor-lazy.d.ts.map

package/dist/components/fields/rich-editor-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-editor-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/fields/rich-editor-lazy.tsx"],"mappings":";;;;qBAiBa,iBAA6CA;EAAA,WAAA"}

package/dist/components/fields/rich-editor-lazy.js

@@ -0,0 +1,24 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { useField } from "../form/form-context.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fields/rich-editor-lazy.tsx
+function RichEditorSkeleton({ component }) {
+	const { id, error } = useField(component);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-40 w-full",
+			"aria-hidden": "true"
+		})
+	});
+}
+/** The rich and Markdown editors; Tiptap loads the first time one is shown. */
+const RichEditorField = lazyComponent(() => import("./rich-editor.js").then((module) => module.RichEditorField), (props) => /* @__PURE__ */ jsx(RichEditorSkeleton, { ...props }));
+//#endregion
+export { RichEditorField };
+
+//# sourceMappingURL=rich-editor-lazy.js.map

package/dist/components/fields/rich-editor-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-editor-lazy.js","names":[],"sources":["../../../src/components/fields/rich-editor-lazy.tsx"],"sourcesContent":["import type { RichEditorSchema } from '@alfakit/core'\nimport { lazyComponent } from '../../lib/lazy'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Skeleton } from '../ui/skeleton'\n\nfunction RichEditorSkeleton({ component }: { component: RichEditorSchema }) {\n  const { id, error } = useField<string | null>(component)\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <Skeleton className=\"h-40 w-full\" aria-hidden=\"true\" />\n    </FieldWrapper>\n  )\n}\n\n/** The rich and Markdown editors; Tiptap loads the first time one is shown. */\nexport const RichEditorField = lazyComponent<{ component: RichEditorSchema }>(\n  () => import('./rich-editor').then((module) => module.RichEditorField),\n  (props) => <RichEditorSkeleton {...props} />,\n)\n"],"mappings":";;;;;;AAMA,SAAS,mBAAmB,EAAE,aAA8C;CAC1E,MAAM,EAAE,IAAI,UAAU,SAAwB,SAAS;CAEvD,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAClD,UAAA,oBAAC,UAAD;GAAU,WAAU;GAAc,eAAY;EAAQ,CAAA;CAC1C,CAAA;AAElB;;AAGA,MAAa,kBAAkB,oBACvB,OAAO,mBAAgB,CAAC,MAAM,WAAW,OAAO,eAAe,IACpE,UAAU,oBAAC,oBAAD,EAAoB,GAAI,MAAQ,CAAA,CAC7C"}