@ecsplico/editor 0.0.0-stage → 1.0.0

package/dist/features/composites/outline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline.js","names":[],"sources":["../../../src/features/composites/outline.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport type { Node as PMNode } from '@tiptap/pm/model'\nimport { blockIdOf, findBlockById } from '../../core/schema'\n\n/** One Baustein of a document's outline. */\nexport interface OutlineNode {\n  /** Block ID, or `pos:<pos>` for a block without one yet; unique within the document. */\n  key: string\n  id: string | null\n  /** Position of the composite in the document it was read from. */\n  pos: number\n  kind: string\n  title: string\n  /** The composite has a description (the summary). */\n  hasSummary: boolean\n  children: OutlineNode[]\n}\n\n/**\n * The composites of `doc` as a tree (title, kind, summary flag). A composite without a title gets `untitled` (the\n * caller's translated „(ohne Titel)“). Composites of a kind in `hiddenKinds` are omitted and their visible descendants\n * take their place in the parent's list.\n */\nexport function compositeOutline(doc: PMNode, hiddenKinds: ReadonlySet<string>, untitled: string): OutlineNode[] {\n  function collect(parent: PMNode, start: number, into: OutlineNode[]) {\n    parent.forEach((node, offset) => {\n      const pos = start + offset\n      if (node.type.name === 'composite') {\n        const kind = String(node.attrs.kind)\n        const children: OutlineNode[] = []\n        collect(node, pos + 1, children)\n        if (hiddenKinds.has(kind)) {\n          into.push(...children)\n          return\n        }\n        const id = blockIdOf(node)\n        into.push({\n          key: id ?? `pos:${pos}`,\n          id,\n          pos,\n          kind,\n          title: node.firstChild?.textContent.trim() || untitled,\n          hasSummary: (node.maybeChild(1)?.content.size ?? 0) > 0,\n          children,\n        })\n      }\n      else if (!node.isTextblock && !node.isLeaf) {\n        // Composites can sit in quotes or lists as well.\n        collect(node, pos + 1, into)\n      }\n    })\n  }\n  const roots: OutlineNode[] = []\n  collect(doc, 0, roots)\n  return roots\n}\n\n/**\n * Whether block `id` can move into the composite `targetId` (`null` = the end of the document): both exist, the target\n * is a composite and neither the block itself nor inside it.\n */\nexport function canMoveBlockInto(editor: Editor, id: string, targetId: string | null): boolean {\n  const { doc } = editor.state\n  const block = findBlockById(doc, id)\n  if (!block) return false\n  if (targetId === null) return true\n  const target = findBlockById(doc, targetId)\n  if (!target || target.node.type.name !== 'composite') return false\n  return target.pos < block.pos || target.pos >= block.pos + block.node.nodeSize\n}\n\n/**\n * Moves block `id` to the end of the body of the composite `targetId` (`null` = the end of the document) in a single\n * transaction, i.e. one undo step. `false` when nothing moved: a block is missing, the target is not a composite, or it\n * is the block itself or lies inside it.\n */\nexport function moveBlockInto(editor: Editor, id: string, targetId: string | null): boolean {\n  if (!canMoveBlockInto(editor, id, targetId)) return false\n  const { doc, tr } = editor.state\n  const block = findBlockById(doc, id)!\n  const target = targetId === null ? null : findBlockById(doc, targetId)!\n  // A composite's body is its last children, so its end is just before the composite's closing token.\n  const insertPos = target ? target.pos + target.node.nodeSize - 1 : doc.content.size\n  tr.delete(block.pos, block.pos + block.node.nodeSize)\n  tr.insert(tr.mapping.map(insertPos), block.node)\n  editor.view.dispatch(tr.scrollIntoView())\n  return true\n}\n"],"mappings":";;;;;;;AAuBA,SAAgB,iBAAiB,KAAa,aAAkC,UAAiC;CAC/G,SAAS,QAAQ,QAAgB,OAAe,MAAqB;EACnE,OAAO,SAAS,MAAM,WAAW;GAC/B,MAAM,MAAM,QAAQ;GACpB,IAAI,KAAK,KAAK,SAAS,aAAa;IAClC,MAAM,OAAO,OAAO,KAAK,MAAM,IAAI;IACnC,MAAM,WAA0B,CAAC;IACjC,QAAQ,MAAM,MAAM,GAAG,QAAQ;IAC/B,IAAI,YAAY,IAAI,IAAI,GAAG;KACzB,KAAK,KAAK,GAAG,QAAQ;KACrB;IACF;IACA,MAAM,KAAK,UAAU,IAAI;IACzB,KAAK,KAAK;KACR,KAAK,MAAM,OAAO;KAClB;KACA;KACA;KACA,OAAO,KAAK,YAAY,YAAY,KAAK,KAAK;KAC9C,aAAa,KAAK,WAAW,CAAC,CAAC,EAAE,QAAQ,QAAQ,KAAK;KACtD;IACF,CAAC;GACH,OACK,IAAI,CAAC,KAAK,eAAe,CAAC,KAAK,QAElC,QAAQ,MAAM,MAAM,GAAG,IAAI;EAE/B,CAAC;CACH;CACA,MAAM,QAAuB,CAAC;CAC9B,QAAQ,KAAK,GAAG,KAAK;CACrB,OAAO;AACT;;;;;AAMA,SAAgB,iBAAiB,QAAgB,IAAY,UAAkC;CAC7F,MAAM,EAAE,QAAQ,OAAO;CACvB,MAAM,QAAQ,cAAc,KAAK,EAAE;CACnC,IAAI,CAAC,OAAO,OAAO;CACnB,IAAI,aAAa,MAAM,OAAO;CAC9B,MAAM,SAAS,cAAc,KAAK,QAAQ;CAC1C,IAAI,CAAC,UAAU,OAAO,KAAK,KAAK,SAAS,aAAa,OAAO;CAC7D,OAAO,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO,MAAM,MAAM,MAAM,KAAK;AACxE;;;;;;AAOA,SAAgB,cAAc,QAAgB,IAAY,UAAkC;CAC1F,IAAI,CAAC,iBAAiB,QAAQ,IAAI,QAAQ,GAAG,OAAO;CACpD,MAAM,EAAE,KAAK,OAAO,OAAO;CAC3B,MAAM,QAAQ,cAAc,KAAK,EAAE;CACnC,MAAM,SAAS,aAAa,OAAO,OAAO,cAAc,KAAK,QAAQ;CAErE,MAAM,YAAY,SAAS,OAAO,MAAM,OAAO,KAAK,WAAW,IAAI,IAAI,QAAQ;CAC/E,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,KAAK,QAAQ;CACpD,GAAG,OAAO,GAAG,QAAQ,IAAI,SAAS,GAAG,MAAM,IAAI;CAC/C,OAAO,KAAK,SAAS,GAAG,eAAe,CAAC;CACxC,OAAO;AACT"}

package/dist/features/composites/react/CompositeChrome.d.ts

@@ -0,0 +1,16 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/composites/react/CompositeChrome.d.ts
+/**
+ * Chrome of every composite, laid over the editor (mounted by the composites feature): on the title line the status
+ * chip and one chip per tag (with a `+` chip to add tags), and on the front the kind icon. The icon is a button that
+ * opens the details popover (kind with a confirmation before it changes, the kind's fields and the summary;
+ * `CompositeDetails`) and, in an editable editor, the composite's drag handle: dragging it moves the composite
+ * (`startBlockDrag`). With `blocks.kindIcon: 'hover'` it shows only while the composite is hovered, its popover is
+ * open or the icon has keyboard focus. Chips and popover also render in read-only editors, without edit affordances.
+ * The node view's own description and tags rows are hidden by CSS; this overlay shows and edits them.
+ */
+export declare function CompositeChrome({ editor }: {
+  editor: Editor;
+}): import("react").ReactPortal | null;
+//#endregion
+//# sourceMappingURL=CompositeChrome.d.ts.map

package/dist/features/composites/react/CompositeChrome.js

@@ -0,0 +1,234 @@
+import { startBlockDrag } from "../../../core/block-drag.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { Icon } from "../../../react/Icon.js";
+import { useEditorSettings } from "../../../react/settings.js";
+import { compositeOfRow, setCompositeTags } from "../rows.js";
+import { compositeSectionOf } from "../anchors.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../react/ui/popover.js";
+import { rowStatus } from "../meta-display.js";
+import { CompositeDetails } from "./CompositeDetails.js";
+import { CompositeStatusMenu } from "./CompositeStatusMenu.js";
+import { CompositeTagsEditor } from "./CompositeTagsEditor.js";
+import { useCompositeAnchors } from "./use-composite-anchors.js";
+import { useCompositeRows } from "./use-composite-rows.js";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/features/composites/react/CompositeChrome.tsx
+/**
+* Chrome of every composite, laid over the editor (mounted by the composites feature): on the title line the status
+* chip and one chip per tag (with a `+` chip to add tags), and on the front the kind icon. The icon is a button that
+* opens the details popover (kind with a confirmation before it changes, the kind's fields and the summary;
+* `CompositeDetails`) and, in an editable editor, the composite's drag handle: dragging it moves the composite
+* (`startBlockDrag`). With `blocks.kindIcon: 'hover'` it shows only while the composite is hovered, its popover is
+* open or the icon has keyboard focus. Chips and popover also render in read-only editors, without edit affordances.
+* The node view's own description and tags rows are hidden by CSS; this overlay shows and edits them.
+*/
+function CompositeChrome({ editor }) {
+	const { rows } = useCompositeRows(editor);
+	const { host, anchors, frame } = useCompositeAnchors(editor, rows);
+	const [editable, setEditable] = useState(() => !editor.isDestroyed && editor.isEditable);
+	useEffect(() => {
+		const sync = () => setEditable(!editor.isDestroyed && editor.isEditable);
+		sync();
+		editor.on("transaction", sync);
+		return () => {
+			editor.off("transaction", sync);
+		};
+	}, [editor]);
+	const { settings } = useEditorSettings();
+	const { t } = useEditorI18n();
+	const iconOnHover = settings.blocks.kindIcon === "hover";
+	const [hoveredKeys, setHoveredKeys] = useState(NO_KEYS);
+	const [chipsHoveredKey, setChipsHoveredKey] = useState(null);
+	const latestRows = useRef(rows);
+	latestRows.current = rows;
+	useEffect(() => {
+		let hoveredSection = null;
+		const onMouseleave = () => {
+			hoveredSection = null;
+			setHoveredKeys(NO_KEYS);
+		};
+		const onMouseover = (event) => {
+			const section = event.target instanceof Element ? event.target.closest(".composite") : null;
+			if (section === hoveredSection) return;
+			hoveredSection = section;
+			const chain = /* @__PURE__ */ new Set();
+			for (let el = section; el; el = el.parentElement?.closest(".composite") ?? null) chain.add(el);
+			const { view, state } = editor;
+			setHoveredKeys(new Set(latestRows.current.filter((row) => {
+				const found = compositeOfRow(state.doc, row);
+				const dom = found ? view.nodeDOM(found.pos) : null;
+				const section = dom instanceof Element ? compositeSectionOf(dom) : null;
+				return section !== null && chain.has(section);
+			}).map((row) => row.key)));
+		};
+		onMouseleave();
+		if (!iconOnHover || editor.isDestroyed) return;
+		const { dom } = editor.view;
+		dom.addEventListener("mouseover", onMouseover);
+		dom.addEventListener("mouseleave", onMouseleave);
+		return () => {
+			dom.removeEventListener("mouseover", onMouseover);
+			dom.removeEventListener("mouseleave", onMouseleave);
+		};
+	}, [editor, iconOnHover]);
+	function onIconDragStart(event, row) {
+		const found = compositeOfRow(editor.state.doc, row);
+		if (!found || !startBlockDrag(editor, event, found.pos)) event.preventDefault();
+	}
+	const placed = useMemo(() => rows.flatMap((row) => {
+		const anchor = anchors.get(row.key);
+		if (!anchor) return [];
+		const left = anchor.lineEnd + (anchor.titleEmpty ? 116 : 12);
+		return [{
+			row,
+			anchor,
+			left,
+			top: anchor.lastCenter - ROW_HEIGHT / 2,
+			width: Math.max((frame?.right ?? anchor.right) - left, 120),
+			status: rowStatus(row, t)
+		}];
+	}), [
+		rows,
+		anchors,
+		frame,
+		t
+	]);
+	function removeTag(row, tag) {
+		setCompositeTags(editor, row, row.tags.filter((candidate) => candidate !== tag));
+	}
+	if (!host) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "absolute top-0 left-0 h-0 w-0",
+		children: placed.map((item) => /* @__PURE__ */ jsxs(Fragment, { children: [item.anchor.toggleSize > 0 && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("span", {
+				role: "button",
+				tabIndex: 0,
+				draggable: editable,
+				className: cn("absolute z-10 flex items-center justify-center rounded-sm bg-background text-muted-foreground transition-[color,background-color,opacity] duration-120 motion-reduce:transition-none hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", editable ? "cursor-grab active:cursor-grabbing" : "cursor-pointer", iconOnHover && !hoveredKeys.has(item.row.key) && chipsHoveredKey !== item.row.key && "opacity-0 hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100"),
+				style: {
+					top: `${item.anchor.toggleTop}px`,
+					left: `${item.anchor.toggleLeft}px`,
+					width: `${item.anchor.toggleSize}px`,
+					height: `${item.anchor.toggleSize}px`
+				},
+				"aria-label": t("composites.chrome.details", { kind: item.row.kindLabel }),
+				title: editable ? t("composites.chrome.detailsDrag", { kind: item.row.kindLabel }) : t("composites.chrome.details", { kind: item.row.kindLabel }),
+				onKeyDown: (event) => {
+					if (event.key !== "Enter" && event.key !== " ") return;
+					event.preventDefault();
+					event.currentTarget.click();
+				},
+				onDragStart: (event) => onIconDragStart(event.nativeEvent, item.row),
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: item.row.icon,
+					className: "size-3.5"
+				}, item.row.icon)
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			className: DETAILS_POPOVER,
+			children: /* @__PURE__ */ jsx(CompositeDetails, {
+				editor,
+				row: item.row,
+				editable
+			})
+		})] }), (item.status || item.row.tags.length > 0 || editable) && /* @__PURE__ */ jsxs("div", {
+			className: "absolute z-10 flex items-center gap-px overflow-hidden rounded-md bg-background",
+			style: {
+				top: `${item.top}px`,
+				left: `${item.left}px`,
+				maxWidth: `${item.width}px`,
+				height: `${ROW_HEIGHT}px`
+			},
+			onMouseEnter: () => setChipsHoveredKey(item.row.key),
+			onMouseLeave: () => setChipsHoveredKey(null),
+			children: [
+				item.status && (editable ? /* @__PURE__ */ jsx(CompositeStatusMenu, {
+					editor,
+					row: item.row,
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: CHIP_BUTTON,
+						"aria-label": t("composites.status.label", { status: item.status.label }),
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: item.status.icon,
+							className: cn("size-3.5", STATUS_COLOR[item.status.color] ?? item.status.color)
+						}), item.status.label]
+					})
+				}) : /* @__PURE__ */ jsxs("span", {
+					className: CHIP,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: item.status.icon,
+						className: cn("size-3.5", STATUS_COLOR[item.status.color] ?? item.status.color)
+					}), item.status.label]
+				})),
+				item.row.tags.map((tag) => /* @__PURE__ */ jsxs("span", {
+					className: cn(CHIP, "group max-w-40 gap-0"),
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "truncate",
+						children: ["#", tag]
+					}), editable && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "flex h-4 w-0 shrink-0 items-center justify-center overflow-hidden rounded-sm opacity-0 transition-all duration-150 group-hover:ml-1 group-hover:w-4 group-hover:opacity-100 hover:bg-muted hover:text-foreground focus-visible:ml-1 focus-visible:w-4 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-primary",
+						"aria-label": t("composites.tag.remove", { tag }),
+						onClick: () => removeTag(item.row, tag),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-x",
+							className: "size-3"
+						})
+					})]
+				}, tag)),
+				editable && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: CHIP_BUTTON,
+						"aria-label": t("composites.tag.add"),
+						title: t("composites.tag.add"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-plus",
+							className: "size-3.5"
+						})
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					side: "bottom",
+					align: "start",
+					sideOffset: 6,
+					className: "w-auto gap-0 p-0",
+					onCloseAutoFocus: (event) => event.preventDefault(),
+					children: /* @__PURE__ */ jsx("div", {
+						className: "w-64 p-3",
+						children: /* @__PURE__ */ jsx(CompositeTagsEditor, {
+							editor,
+							row: item.row
+						})
+					})
+				})] })
+			]
+		})] }, item.row.key))
+	}), host);
+}
+const NO_KEYS = /* @__PURE__ */ new Set();
+/** Chips start right after the title's last character and run on to the editor's right edge. */
+const ROW_HEIGHT = 24;
+const CHIP = "inline-flex h-5 shrink-0 items-center gap-1 rounded-sm px-1.5 text-xs leading-none whitespace-nowrap text-muted-foreground";
+const CHIP_BUTTON = `${CHIP} transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary`;
+/** `statusStyle` names Nuxt UI text colors: the shadcn counterparts (`--sk-info` and `--sk-success` come from the token stylesheets). */
+const STATUS_COLOR = {
+	"text-muted": "text-muted-foreground",
+	"text-info": "text-(--sk-info)",
+	"text-success": "text-(--sk-success)",
+	"text-dimmed": "text-muted-foreground/70"
+};
+/** Scale and fade in from the icon (`transform-origin` is Radix's), a bit longer than the default; `composites.css` defines the keyframes and the reduced-motion override. */
+const DETAILS_POPOVER = "w-auto gap-0 p-0 composite-popover data-[state=open]:animate-[composite-pop-in_160ms_var(--ease-out)] data-[state=closed]:animate-[composite-pop-out_120ms_var(--ease-out)]";
+//#endregion
+export { CompositeChrome };
+
+//# sourceMappingURL=CompositeChrome.js.map

package/dist/features/composites/react/CompositeChrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeChrome.js","names":[],"sources":["../../../../src/features/composites/react/CompositeChrome.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { Fragment, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { startBlockDrag } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../react/ui/popover'\nimport { cn } from '../../../react/ui/utils'\nimport { compositeSectionOf } from '../anchors'\nimport { rowStatus } from '../meta-display'\nimport { compositeOfRow, type CompositeRow, setCompositeTags } from '../rows'\nimport { CompositeDetails } from './CompositeDetails'\nimport { CompositeStatusMenu } from './CompositeStatusMenu'\nimport { CompositeTagsEditor } from './CompositeTagsEditor'\nimport { useCompositeAnchors } from './use-composite-anchors'\nimport { useCompositeRows } from './use-composite-rows'\n\n/**\n * Chrome of every composite, laid over the editor (mounted by the composites feature): on the title line the status\n * chip and one chip per tag (with a `+` chip to add tags), and on the front the kind icon. The icon is a button that\n * opens the details popover (kind with a confirmation before it changes, the kind's fields and the summary;\n * `CompositeDetails`) and, in an editable editor, the composite's drag handle: dragging it moves the composite\n * (`startBlockDrag`). With `blocks.kindIcon: 'hover'` it shows only while the composite is hovered, its popover is\n * open or the icon has keyboard focus. Chips and popover also render in read-only editors, without edit affordances.\n * The node view's own description and tags rows are hidden by CSS; this overlay shows and edits them.\n */\nexport function CompositeChrome({ editor }: { editor: Editor }) {\n  const { rows } = useCompositeRows(editor)\n  const { host, anchors, frame } = useCompositeAnchors(editor, rows)\n\n  // `isEditable` is not reactive: follow it on every transaction (`EditorSurface` dispatches one after `setEditable`).\n  const [editable, setEditable] = useState(() => !editor.isDestroyed && editor.isEditable)\n  useEffect(() => {\n    const sync = () => setEditable(!editor.isDestroyed && editor.isEditable)\n    sync()\n    editor.on('transaction', sync)\n    return () => {\n      editor.off('transaction', sync)\n    }\n  }, [editor])\n\n  const { settings } = useEditorSettings()\n  const { t } = useEditorI18n()\n  const iconOnHover = settings.blocks.kindIcon === 'hover'\n\n  // Hover state of `kindIcon: 'hover'`: the keys of the rows whose composite is under the pointer (that one and every\n  // composite around it), plus the row whose chips the pointer is on (they sit outside the editor's DOM).\n  const [hoveredKeys, setHoveredKeys] = useState<ReadonlySet<string>>(NO_KEYS)\n  const [chipsHoveredKey, setChipsHoveredKey] = useState<string | null>(null)\n  const latestRows = useRef(rows)\n  latestRows.current = rows\n\n  useEffect(() => {\n    let hoveredSection: Element | null = null\n    const onMouseleave = () => {\n      hoveredSection = null\n      setHoveredKeys(NO_KEYS)\n    }\n    const onMouseover = (event: MouseEvent) => {\n      const section = event.target instanceof Element ? event.target.closest('.composite') : null\n      if (section === hoveredSection) return\n      hoveredSection = section\n      const chain = new Set<Element>()\n      for (let el = section; el; el = el.parentElement?.closest('.composite') ?? null) chain.add(el)\n      const { view, state } = editor\n      setHoveredKeys(new Set(latestRows.current.filter((row) => {\n        const found = compositeOfRow(state.doc, row)\n        const dom = found ? view.nodeDOM(found.pos) : null\n        const section = dom instanceof Element ? compositeSectionOf(dom) : null\n      return section !== null && chain.has(section)\n      }).map(row => row.key)))\n    }\n\n    onMouseleave()\n    if (!iconOnHover || editor.isDestroyed) return\n    const { dom } = editor.view\n    dom.addEventListener('mouseover', onMouseover)\n    dom.addEventListener('mouseleave', onMouseleave)\n    return () => {\n      dom.removeEventListener('mouseover', onMouseover)\n      dom.removeEventListener('mouseleave', onMouseleave)\n    }\n  }, [editor, iconOnHover])\n\n  function onIconDragStart(event: DragEvent, row: CompositeRow) {\n    const found = compositeOfRow(editor.state.doc, row)\n    if (!found || !startBlockDrag(editor, event, found.pos)) event.preventDefault()\n  }\n\n  const placed = useMemo(() => rows.flatMap((row) => {\n    const anchor = anchors.get(row.key)\n    if (!anchor) return []\n    // An empty title shows a placeholder the anchor cannot measure: keep clear of it.\n    const left = anchor.lineEnd + (anchor.titleEmpty ? 116 : 12)\n    return [{\n      row,\n      anchor,\n      left,\n      top: anchor.lastCenter - ROW_HEIGHT / 2,\n      width: Math.max((frame?.right ?? anchor.right) - left, 120),\n      status: rowStatus(row, t),\n    }]\n  }), [rows, anchors, frame, t])\n\n  function removeTag(row: CompositeRow, tag: string) {\n    setCompositeTags(editor, row, row.tags.filter(candidate => candidate !== tag))\n  }\n\n  if (!host) return null\n\n  return createPortal(\n    <div className=\"absolute top-0 left-0 h-0 w-0\">\n      {placed.map(item => (\n        <Fragment key={item.row.key}>\n          {item.anchor.toggleSize > 0 && (\n            <Popover>\n              <PopoverTrigger asChild>\n                {/* A span, not a `button`: Firefox does not start drags from buttons. */}\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  draggable={editable}\n                  className={cn(\n                    'absolute z-10 flex items-center justify-center rounded-sm bg-background text-muted-foreground transition-[color,background-color,opacity] duration-120 motion-reduce:transition-none hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n                    editable ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer',\n                    iconOnHover && !hoveredKeys.has(item.row.key) && chipsHoveredKey !== item.row.key && 'opacity-0 hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100',\n                  )}\n                  style={{ top: `${item.anchor.toggleTop}px`, left: `${item.anchor.toggleLeft}px`, width: `${item.anchor.toggleSize}px`, height: `${item.anchor.toggleSize}px` }}\n                  aria-label={t('composites.chrome.details', { kind: item.row.kindLabel })}\n                  title={editable ? t('composites.chrome.detailsDrag', { kind: item.row.kindLabel }) : t('composites.chrome.details', { kind: item.row.kindLabel })}\n                  onKeyDown={(event: KeyboardEvent<HTMLElement>) => {\n                    if (event.key !== 'Enter' && event.key !== ' ') return\n                    event.preventDefault()\n                    event.currentTarget.click()\n                  }}\n                  onDragStart={event => onIconDragStart(event.nativeEvent, item.row)}\n                >\n                  <Icon key={item.row.icon} name={item.row.icon} className=\"size-3.5\" />\n                </span>\n              </PopoverTrigger>\n              <PopoverContent\n                side=\"bottom\"\n                align=\"start\"\n                sideOffset={4}\n                className={DETAILS_POPOVER}\n              >\n                <CompositeDetails editor={editor} row={item.row} editable={editable} />\n              </PopoverContent>\n            </Popover>\n          )}\n\n          {(item.status || item.row.tags.length > 0 || editable) && (\n            <div\n              className=\"absolute z-10 flex items-center gap-px overflow-hidden rounded-md bg-background\"\n              style={{ top: `${item.top}px`, left: `${item.left}px`, maxWidth: `${item.width}px`, height: `${ROW_HEIGHT}px` }}\n              onMouseEnter={() => setChipsHoveredKey(item.row.key)}\n              onMouseLeave={() => setChipsHoveredKey(null)}\n            >\n              {item.status && (editable\n                ? (\n                    <CompositeStatusMenu editor={editor} row={item.row}>\n                      <button type=\"button\" className={CHIP_BUTTON} aria-label={t('composites.status.label', { status: item.status.label })}>\n                        <Icon name={item.status.icon} className={cn('size-3.5', STATUS_COLOR[item.status.color] ?? item.status.color)} />{item.status.label}\n                      </button>\n                    </CompositeStatusMenu>\n                  )\n                : (\n                    <span className={CHIP}>\n                      <Icon name={item.status.icon} className={cn('size-3.5', STATUS_COLOR[item.status.color] ?? item.status.color)} />{item.status.label}\n                    </span>\n                  ))}\n\n              {item.row.tags.map(tag => (\n                <span key={tag} className={cn(CHIP, 'group max-w-40 gap-0')}>\n                  <span className=\"truncate\">#{tag}</span>\n                  {editable && (\n                    <button\n                      type=\"button\"\n                      className=\"flex h-4 w-0 shrink-0 items-center justify-center overflow-hidden rounded-sm opacity-0 transition-all duration-150 group-hover:ml-1 group-hover:w-4 group-hover:opacity-100 hover:bg-muted hover:text-foreground focus-visible:ml-1 focus-visible:w-4 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-primary\"\n                      aria-label={t('composites.tag.remove', { tag })}\n                      onClick={() => removeTag(item.row, tag)}\n                    >\n                      <Icon name=\"i-lucide-x\" className=\"size-3\" />\n                    </button>\n                  )}\n                </span>\n              ))}\n\n              {editable && (\n                <Popover>\n                  <PopoverTrigger asChild>\n                    <button type=\"button\" className={CHIP_BUTTON} aria-label={t('composites.tag.add')} title={t('composites.tag.add')}>\n                      <Icon name=\"i-lucide-plus\" className=\"size-3.5\" />\n                    </button>\n                  </PopoverTrigger>\n                  <PopoverContent\n                    side=\"bottom\"\n                    align=\"start\"\n                    sideOffset={6}\n                    className=\"w-auto gap-0 p-0\"\n                    onCloseAutoFocus={event => event.preventDefault()}\n                  >\n                    <div className=\"w-64 p-3\">\n                      <CompositeTagsEditor editor={editor} row={item.row} />\n                    </div>\n                  </PopoverContent>\n                </Popover>\n              )}\n            </div>\n          )}\n        </Fragment>\n      ))}\n    </div>,\n    host,\n  )\n}\n\nconst NO_KEYS: ReadonlySet<string> = new Set()\n\n/** Chips start right after the title's last character and run on to the editor's right edge. */\nconst ROW_HEIGHT = 24\n\nconst CHIP = 'inline-flex h-5 shrink-0 items-center gap-1 rounded-sm px-1.5 text-xs leading-none whitespace-nowrap text-muted-foreground'\nconst CHIP_BUTTON = `${CHIP} transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary`\n\n/** `statusStyle` names Nuxt UI text colors: the shadcn counterparts (`--sk-info` and `--sk-success` come from the token stylesheets). */\nconst STATUS_COLOR: Record<string, string> = {\n  'text-muted': 'text-muted-foreground',\n  'text-info': 'text-(--sk-info)',\n  'text-success': 'text-(--sk-success)',\n  'text-dimmed': 'text-muted-foreground/70',\n}\n\n/** Scale and fade in from the icon (`transform-origin` is Radix's), a bit longer than the default; `composites.css` defines the keyframes and the reduced-motion override. */\nconst DETAILS_POPOVER = 'w-auto gap-0 p-0 composite-popover data-[state=open]:animate-[composite-pop-in_160ms_var(--ease-out)] data-[state=closed]:animate-[composite-pop-out_120ms_var(--ease-out)]'\n"],"mappings":"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"}

package/dist/features/composites/react/CompositeDetails.d.ts

@@ -0,0 +1,16 @@
+import { CompositeRow } from "../rows.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/composites/react/CompositeDetails.d.ts
+/**
+ * Content of the popover on a composite's front icon: the kind (a select, plain text while read-only), every field of
+ * the kind except the status (its chip edits it) and the summary. Choosing another kind first shows an inline warning
+ * that names the field values the switch drops (`setCompositeKind` keeps only meta keys the new kind declares) and
+ * applies the change on „Ändern“.
+ */
+export declare function CompositeDetails({ editor, row, editable }: {
+  editor: Editor;
+  row: CompositeRow;
+  editable: boolean;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CompositeDetails.d.ts.map

package/dist/features/composites/react/CompositeDetails.js

@@ -0,0 +1,149 @@
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.js";
+import { compositeKindsOf } from "../nodes.js";
+import { compositeOfRow } from "../rows.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../react/ui/select.js";
+import { CompositeFieldEditor } from "./CompositeFieldEditor.js";
+import { CompositeSummaryEditor } from "./CompositeSummaryEditor.js";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/composites/react/CompositeDetails.tsx
+/**
+* Content of the popover on a composite's front icon: the kind (a select, plain text while read-only), every field of
+* the kind except the status (its chip edits it) and the summary. Choosing another kind first shows an inline warning
+* that names the field values the switch drops (`setCompositeKind` keeps only meta keys the new kind declares) and
+* applies the change on „Ändern“.
+*/
+function CompositeDetails({ editor, row, editable }) {
+	const { t } = useEditorI18n();
+	const kinds = useMemo(() => compositeKindsOf(editor), [editor]);
+	const fields = row.fields.filter((field) => field.key !== "status");
+	/** The kind chosen in the select, waiting for the confirmation. */
+	const [pending, setPending] = useState(null);
+	useEffect(() => {
+		setPending(null);
+	}, [row.kind]);
+	const pendingLabel = kinds.find((kind) => kind.id === pending)?.label ?? "";
+	/** Field values of the row that the pending kind does not declare, as „Label: value“. */
+	const lost = useMemo(() => {
+		const target = kinds.find((kind) => kind.id === pending);
+		if (!target) return [];
+		const kept = new Set(target.fields.map((field) => field.key));
+		return Object.entries(row.meta).filter(([key, value]) => !kept.has(key) && value != null && value !== "").map(([key, value]) => {
+			const field = row.fields.find((candidate) => candidate.key === key);
+			const text = typeof value === "object" ? JSON.stringify(value) : String(value);
+			return {
+				key,
+				label: field?.label ?? key,
+				text: field?.options?.find((option) => option.value === text)?.label ?? text
+			};
+		});
+	}, [
+		kinds,
+		pending,
+		row.meta,
+		row.fields
+	]);
+	function onKind(kind) {
+		setPending(kind !== row.kind ? kind : null);
+	}
+	function apply() {
+		const kind = pending;
+		setPending(null);
+		const found = compositeOfRow(editor.state.doc, row);
+		if (kind && found) editor.commands.setCompositeKind(kind, found.pos);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-72 flex-col gap-2.5 p-3 text-sm",
+		children: [
+			editable ? /* @__PURE__ */ jsxs(Select, {
+				value: row.kind,
+				onValueChange: onKind,
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					size: "sm",
+					className: "w-full text-xs data-[size=sm]:h-6",
+					"aria-label": t("composites.kind.select"),
+					children: /* @__PURE__ */ jsx(SelectValue, {})
+				}), /* @__PURE__ */ jsx(SelectContent, { children: kinds.map((kind) => /* @__PURE__ */ jsxs(SelectItem, {
+					value: kind.id,
+					children: [/* @__PURE__ */ jsx(Icon, { name: kind.icon }), kind.label]
+				}, kind.id)) })]
+			}) : /* @__PURE__ */ jsxs("p", {
+				className: "flex min-w-0 items-center gap-1.5 text-foreground",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: row.icon,
+					className: "size-4 shrink-0 text-muted-foreground"
+				}, row.icon), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: row.kindLabel
+				})]
+			}),
+			pending && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "flex flex-col gap-2 rounded-md bg-(--sk-warning)/10 p-2 text-xs text-foreground ring-1 ring-(--sk-warning)/40",
+				children: [lost.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium",
+					children: t("composites.details.confirmLost", { kind: pendingLabel })
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-0.5",
+					children: lost.map((item) => /* @__PURE__ */ jsxs("li", {
+						className: "flex min-w-0 gap-1",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 text-muted-foreground",
+							children: [item.label, ":"]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							title: item.text,
+							children: item.text
+						})]
+					}, item.key))
+				})] }) : /* @__PURE__ */ jsx("p", {
+					className: "font-medium",
+					children: t("composites.details.confirm")
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-1.5",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "ghost",
+						onClick: () => setPending(null),
+						children: t("composites.details.cancel")
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						className: "bg-(--sk-warning) text-background hover:bg-(--sk-warning)/80",
+						onClick: apply,
+						children: t("composites.details.change")
+					})]
+				})]
+			}),
+			fields.map((field) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: field.label
+				}), /* @__PURE__ */ jsx(CompositeFieldEditor, {
+					editor,
+					row,
+					field,
+					disabled: !editable,
+					size: "xs"
+				})]
+			}, field.key)),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: t("composites.details.summary")
+				}), /* @__PURE__ */ jsx(CompositeSummaryEditor, {
+					editor,
+					row,
+					readonly: !editable
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { CompositeDetails };
+
+//# sourceMappingURL=CompositeDetails.js.map

package/dist/features/composites/react/CompositeDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeDetails.js","names":[],"sources":["../../../../src/features/composites/react/CompositeDetails.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEffect, useMemo, useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { compositeKindsOf } from '../nodes'\nimport { compositeOfRow, type CompositeRow } from '../rows'\nimport { CompositeFieldEditor } from './CompositeFieldEditor'\nimport { CompositeSummaryEditor } from './CompositeSummaryEditor'\n\n/**\n * Content of the popover on a composite's front icon: the kind (a select, plain text while read-only), every field of\n * the kind except the status (its chip edits it) and the summary. Choosing another kind first shows an inline warning\n * that names the field values the switch drops (`setCompositeKind` keeps only meta keys the new kind declares) and\n * applies the change on „Ändern“.\n */\nexport function CompositeDetails({ editor, row, editable }: { editor: Editor, row: CompositeRow, editable: boolean }) {\n  const { t } = useEditorI18n()\n  const kinds = useMemo(() => compositeKindsOf(editor), [editor])\n  const fields = row.fields.filter(field => field.key !== 'status')\n\n  /** The kind chosen in the select, waiting for the confirmation. */\n  const [pending, setPending] = useState<string | null>(null)\n  // The kind changed some other way (undo, inspector, another select): a stale confirmation would be misleading.\n  useEffect(() => {\n    setPending(null)\n  }, [row.kind])\n\n  const pendingLabel = kinds.find(kind => kind.id === pending)?.label ?? ''\n\n  /** Field values of the row that the pending kind does not declare, as „Label: value“. */\n  const lost = useMemo(() => {\n    const target = kinds.find(kind => kind.id === pending)\n    if (!target) return []\n    const kept = new Set(target.fields.map(field => field.key))\n    return Object.entries(row.meta)\n      .filter(([key, value]) => !kept.has(key) && value != null && value !== '')\n      .map(([key, value]) => {\n        const field = row.fields.find(candidate => candidate.key === key)\n        const text = typeof value === 'object' ? JSON.stringify(value) : String(value)\n        return { key, label: field?.label ?? key, text: field?.options?.find(option => option.value === text)?.label ?? text }\n      })\n  }, [kinds, pending, row.meta, row.fields])\n\n  function onKind(kind: string) {\n    setPending(kind !== row.kind ? kind : null)\n  }\n\n  function apply() {\n    const kind = pending\n    setPending(null)\n    const found = compositeOfRow(editor.state.doc, row)\n    if (kind && found) editor.commands.setCompositeKind(kind, found.pos)\n  }\n\n  return (\n    <div className=\"flex w-72 flex-col gap-2.5 p-3 text-sm\">\n      {editable\n        ? (\n            <Select value={row.kind} onValueChange={onKind}>\n              <SelectTrigger size=\"sm\" className=\"w-full text-xs data-[size=sm]:h-6\" aria-label={t('composites.kind.select')}>\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {kinds.map(kind => (\n                  <SelectItem key={kind.id} value={kind.id}>\n                    <Icon name={kind.icon} />\n                    {kind.label}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          )\n        : (\n            <p className=\"flex min-w-0 items-center gap-1.5 text-foreground\">\n              <Icon key={row.icon} name={row.icon} className=\"size-4 shrink-0 text-muted-foreground\" />\n              <span className=\"truncate\">{row.kindLabel}</span>\n            </p>\n          )}\n\n      {pending && (\n        <div role=\"alert\" className=\"flex flex-col gap-2 rounded-md bg-(--sk-warning)/10 p-2 text-xs text-foreground ring-1 ring-(--sk-warning)/40\">\n          {lost.length > 0\n            ? (\n                <>\n                  <p className=\"font-medium\">\n                    {t('composites.details.confirmLost', { kind: pendingLabel })}\n                  </p>\n                  <ul className=\"flex flex-col gap-0.5\">\n                    {lost.map(item => (\n                      <li key={item.key} className=\"flex min-w-0 gap-1\">\n                        <span className=\"shrink-0 text-muted-foreground\">{item.label}:</span>\n                        <span className=\"truncate\" title={item.text}>{item.text}</span>\n                      </li>\n                    ))}\n                  </ul>\n                </>\n              )\n            : (\n                <p className=\"font-medium\">\n                  {t('composites.details.confirm')}\n                </p>\n              )}\n          <div className=\"flex justify-end gap-1.5\">\n            <Button size=\"xs\" variant=\"ghost\" onClick={() => setPending(null)}>{t('composites.details.cancel')}</Button>\n            <Button size=\"xs\" className=\"bg-(--sk-warning) text-background hover:bg-(--sk-warning)/80\" onClick={apply}>{t('composites.details.change')}</Button>\n          </div>\n        </div>\n      )}\n\n      {fields.map(field => (\n        <div key={field.key} className=\"flex flex-col gap-1\">\n          <span className=\"text-xs text-muted-foreground\">{field.label}</span>\n          <CompositeFieldEditor editor={editor} row={row} field={field} disabled={!editable} size=\"xs\" />\n        </div>\n      ))}\n\n      <div className=\"flex flex-col gap-1\">\n        <span className=\"text-xs text-muted-foreground\">{t('composites.details.summary')}</span>\n        <CompositeSummaryEditor editor={editor} row={row} readonly={!editable} />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/features/composites/react/CompositeFieldEditor.d.ts

@@ -0,0 +1,18 @@
+import { CompositeMetaField } from "../kinds.js";
+import { CompositeRow } from "../rows.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/composites/react/CompositeFieldEditor.d.ts
+/**
+ * One meta field of a Baustein as an input that writes through `setCompositeMetaField`. Text-like inputs keep a local
+ * draft and commit after typing pauses, on blur and on unmount, so the one-frame-late re-read of the rows never
+ * overwrites what is being typed.
+ */
+export declare function CompositeFieldEditor({ editor, row, field, disabled, size }: {
+  editor: Editor;
+  row: CompositeRow;
+  field: CompositeMetaField;
+  disabled?: boolean;
+  size?: 'xs' | 'sm' | 'md';
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CompositeFieldEditor.d.ts.map

package/dist/features/composites/react/CompositeFieldEditor.js

@@ -0,0 +1,131 @@
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { setCompositeMetaField } from "../rows.js";
+import { Input } from "../../../react/ui/input.js";
+import { Textarea } from "../../../react/ui/textarea.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../react/ui/select.js";
+import { metaText } from "../meta-display.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/composites/react/CompositeFieldEditor.tsx
+/** Radix Select has no empty-string value: an option with an empty value travels as this sentinel. */
+const EMPTY = "__empty__";
+const INPUT_SIZE = {
+	xs: "h-6 px-2 text-xs md:text-xs",
+	sm: "h-7 px-2.5 text-sm md:text-sm",
+	md: ""
+};
+const TEXTAREA_SIZE = {
+	xs: "px-2 py-1 text-xs md:text-xs",
+	sm: "px-2.5 py-1.5 text-sm md:text-sm",
+	md: ""
+};
+const SELECT_SIZE = {
+	xs: "data-[size=sm]:h-6 text-xs",
+	sm: "data-[size=sm]:h-7",
+	md: ""
+};
+/**
+* One meta field of a Baustein as an input that writes through `setCompositeMetaField`. Text-like inputs keep a local
+* draft and commit after typing pauses, on blur and on unmount, so the one-frame-late re-read of the rows never
+* overwrites what is being typed.
+*/
+function CompositeFieldEditor({ editor, row, field, disabled, size = "sm" }) {
+	const { t } = useEditorI18n();
+	const stored = metaText(row, field);
+	const [draft, setDraft] = useState(stored);
+	const draftRef = useRef(draft);
+	const typing = useRef(false);
+	const dirty = useRef(false);
+	const timer = useRef(void 0);
+	const target = useRef({
+		editor,
+		row,
+		field
+	});
+	useEffect(() => {
+		target.current = {
+			editor,
+			row,
+			field
+		};
+	});
+	useEffect(() => {
+		if (!typing.current && !dirty.current) {
+			draftRef.current = stored;
+			setDraft(stored);
+		}
+	}, [stored, row.key]);
+	const commit = useCallback(() => {
+		clearTimeout(timer.current);
+		if (!dirty.current) return;
+		dirty.current = false;
+		const current = target.current;
+		if (!current.editor.isDestroyed) setCompositeMetaField(current.editor, current.row, current.field.key, draftRef.current);
+	}, []);
+	useEffect(() => commit, [
+		commit,
+		editor,
+		row.key,
+		field.key
+	]);
+	function onInput(value) {
+		draftRef.current = value;
+		setDraft(value);
+		dirty.current = true;
+		clearTimeout(timer.current);
+		timer.current = window.setTimeout(commit, 400);
+	}
+	function onBlur() {
+		typing.current = false;
+		commit();
+	}
+	function onChoice(value) {
+		setCompositeMetaField(editor, row, field.key, value === EMPTY ? "" : value);
+	}
+	if (field.type === "select") return /* @__PURE__ */ jsxs(Select, {
+		value: stored,
+		onValueChange: onChoice,
+		disabled,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size: "sm",
+			className: cn("w-full", SELECT_SIZE[size]),
+			"aria-label": field.label,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("composites.field.choose", { field: field.label }) })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: (field.options ?? []).map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			value: option.value || EMPTY,
+			children: option.label
+		}, option.value)) })]
+	});
+	if (field.type === "textarea") return /* @__PURE__ */ jsx(Textarea, {
+		value: draft,
+		"aria-label": field.label,
+		disabled,
+		rows: 2,
+		className: cn("max-h-[8.5rem] min-h-0 w-full", TEXTAREA_SIZE[size]),
+		onFocus: () => {
+			typing.current = true;
+		},
+		onBlur,
+		onChange: (event) => onInput(event.target.value)
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		value: draft,
+		type: field.type,
+		"aria-label": field.label,
+		disabled,
+		className: cn("w-full", INPUT_SIZE[size]),
+		onFocus: () => {
+			typing.current = true;
+		},
+		onBlur,
+		onKeyDown: (event) => {
+			if (event.key === "Enter") commit();
+		},
+		onChange: (event) => onInput(event.target.value)
+	});
+}
+//#endregion
+export { CompositeFieldEditor };
+
+//# sourceMappingURL=CompositeFieldEditor.js.map