@ecsplico/editor 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,122 @@
+import { metadataOf } from "../../../core/metadata.js";
+import { METADATA_LIST } from "../../../core/metadata-types.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { Icon } from "../../../react/Icon.js";
+import { setCompositeTags } from "../rows.js";
+import { normalizeTagName } from "../../../core/tag-name.js";
+import { Command, CommandInput, CommandItem, CommandList } from "../../../react/ui/command.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/composites/react/CompositeTagsEditor.tsx
+/** Value of the „erstellen“ row of the list; suggestions use `tag:<name>`. */
+const CREATE = "__create__";
+/** Tags of one Baustein as an input menu with suggestions from the metadata registry, writing through `setCompositeTags`. */
+function CompositeTagsEditor({ editor, row }) {
+	const { t } = useEditorI18n();
+	const [term, setTerm] = useState("");
+	const [items, setItems] = useState([]);
+	const navigated = useRef(false);
+	useEffect(() => {
+		const controller = new AbortController();
+		const timer = window.setTimeout(async () => {
+			try {
+				const found = await metadataOf(editor).search(METADATA_LIST.hashtags, {
+					query: term,
+					editor,
+					signal: controller.signal
+				});
+				if (!controller.signal.aborted) setItems(found.map((item) => item.label));
+			} catch (error) {
+				if (!controller.signal.aborted) console.warn("Tag-Vorschläge konnten nicht geladen werden", error);
+			}
+		}, 150);
+		return () => {
+			window.clearTimeout(timer);
+			controller.abort();
+		};
+	}, [editor, term]);
+	function onTerm(value) {
+		setTerm(value);
+		navigated.current = false;
+	}
+	function toggle(tag) {
+		setCompositeTags(editor, row, row.tags.includes(tag) ? row.tags.filter((candidate) => candidate !== tag) : [...row.tags, tag]);
+	}
+	function remove(tag) {
+		setCompositeTags(editor, row, row.tags.filter((candidate) => candidate !== tag));
+	}
+	function onCreate(raw) {
+		const name = normalizeTagName(raw);
+		onTerm("");
+		if (!name || row.tags.includes(name)) return;
+		setCompositeTags(editor, row, [...row.tags, name]);
+		if (!items.includes(name)) metadataOf(editor).create(METADATA_LIST.hashtags, {
+			id: name,
+			label: name
+		});
+	}
+	const query = term.trim();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col gap-1.5",
+		children: [row.tags.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-wrap gap-1",
+			"aria-label": t("composites.tags.label"),
+			children: row.tags.map((tag) => /* @__PURE__ */ jsxs("li", {
+				className: "inline-flex h-5 max-w-full items-center gap-0.5 rounded-sm bg-muted px-1.5 text-xs leading-none text-foreground",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: tag
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary",
+					"aria-label": t("composites.tag.remove", { tag }),
+					onClick: () => remove(tag),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "i-lucide-x",
+						className: "size-3"
+					})
+				})]
+			}, tag))
+		}), /* @__PURE__ */ jsxs(Command, {
+			shouldFilter: false,
+			className: "h-auto overflow-visible bg-transparent p-0",
+			children: [/* @__PURE__ */ jsx(CommandInput, {
+				value: term,
+				onValueChange: onTerm,
+				placeholder: t("composites.tags.placeholder"),
+				"aria-label": t("composites.tags.label"),
+				onKeyDown: (event) => {
+					if (event.nativeEvent.isComposing) return;
+					if (event.key === "ArrowDown" || event.key === "ArrowUp") navigated.current = true;
+					else if (event.key === "Enter" && query && !navigated.current) {
+						event.preventDefault();
+						onCreate(term);
+					}
+					if (event.key === "Backspace" && !term && row.tags.length > 0) setCompositeTags(editor, row, row.tags.slice(0, -1));
+				}
+			}), /* @__PURE__ */ jsxs(CommandList, { children: [items.map((tag) => /* @__PURE__ */ jsxs(CommandItem, {
+				value: `tag:${tag}`,
+				"data-checked": row.tags.includes(tag),
+				onSelect: () => toggle(tag),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "i-lucide-hash",
+					className: "size-3.5 text-muted-foreground"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: tag
+				})]
+			}, tag)), query && /* @__PURE__ */ jsxs(CommandItem, {
+				value: CREATE,
+				onSelect: () => onCreate(term),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "i-lucide-plus",
+					className: "size-3.5 text-muted-foreground"
+				}), t("composites.tags.create", { tag: normalizeTagName(term) || term })]
+			})] })]
+		})]
+	});
+}
+//#endregion
+export { CompositeTagsEditor };
+
+//# sourceMappingURL=CompositeTagsEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeTagsEditor.js","names":[],"sources":["../../../../src/features/composites/react/CompositeTagsEditor.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEffect, useRef, useState } from 'react'\nimport { METADATA_LIST, metadataOf } from '../../../core'\nimport { normalizeTagName } from '../../../core/tag-name'\nimport { Icon } from '../../../react/Icon'\nimport { Command, CommandInput, CommandItem, CommandList } from '../../../react/ui/command'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { type CompositeRow, setCompositeTags } from '../rows'\n\n/** Value of the „erstellen“ row of the list; suggestions use `tag:<name>`. */\nconst CREATE = '__create__'\n\n/** Tags of one Baustein as an input menu with suggestions from the metadata registry, writing through `setCompositeTags`. */\nexport function CompositeTagsEditor({ editor, row }: { editor: Editor, row: CompositeRow }) {\n  const { t } = useEditorI18n()\n  const [term, setTerm] = useState('')\n  const [items, setItems] = useState<string[]>([])\n  // Set once the arrow keys moved the highlight into the list: until then Enter creates the typed tag.\n  const navigated = useRef(false)\n\n  // Suggestions are loaded when the list opens and 150 ms after typing pauses; a newer search aborts the older one.\n  useEffect(() => {\n    const controller = new AbortController()\n    const timer = window.setTimeout(async () => {\n      try {\n        const found = await metadataOf(editor).search(METADATA_LIST.hashtags, { query: term, editor, signal: controller.signal })\n        if (!controller.signal.aborted) setItems(found.map(item => item.label))\n      }\n      catch (error) {\n        if (!controller.signal.aborted) console.warn('Tag-Vorschläge konnten nicht geladen werden', error)\n      }\n    }, 150)\n    return () => {\n      window.clearTimeout(timer)\n      controller.abort()\n    }\n  }, [editor, term])\n\n  function onTerm(value: string) {\n    setTerm(value)\n    navigated.current = false\n  }\n\n  // Picking a suggestion toggles it: set tags are removed again.\n  function toggle(tag: string) {\n    setCompositeTags(editor, row, row.tags.includes(tag) ? row.tags.filter(candidate => candidate !== tag) : [...row.tags, tag])\n  }\n\n  function remove(tag: string) {\n    setCompositeTags(editor, row, row.tags.filter(candidate => candidate !== tag))\n  }\n\n  // „Neu Tag“ → `neu-tag`; a name that is already set is ignored.\n  function onCreate(raw: string) {\n    const name = normalizeTagName(raw)\n    onTerm('')\n    if (!name || row.tags.includes(name)) return\n    setCompositeTags(editor, row, [...row.tags, name])\n    if (!items.includes(name)) metadataOf(editor).create(METADATA_LIST.hashtags, { id: name, label: name })\n  }\n\n  const query = term.trim()\n\n  return (\n    <div className=\"flex w-full flex-col gap-1.5\">\n      {row.tags.length > 0 && (\n        <ul className=\"flex flex-wrap gap-1\" aria-label={t('composites.tags.label')}>\n          {row.tags.map(tag => (\n            <li key={tag} className=\"inline-flex h-5 max-w-full items-center gap-0.5 rounded-sm bg-muted px-1.5 text-xs leading-none text-foreground\">\n              <span className=\"truncate\">{tag}</span>\n              <button\n                type=\"button\"\n                className=\"flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary\"\n                aria-label={t('composites.tag.remove', { tag })}\n                onClick={() => remove(tag)}\n              >\n                <Icon name=\"i-lucide-x\" className=\"size-3\" />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      <Command shouldFilter={false} className=\"h-auto overflow-visible bg-transparent p-0\">\n        <CommandInput\n          value={term}\n          onValueChange={onTerm}\n          placeholder={t('composites.tags.placeholder')}\n          aria-label={t('composites.tags.label')}\n          onKeyDown={(event) => {\n            if (event.nativeEvent.isComposing) return\n            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') navigated.current = true\n            else if (event.key === 'Enter' && query && !navigated.current) {\n              // The list highlights its first suggestion; typed text is created instead, unless the user moved in the list.\n              event.preventDefault()\n              onCreate(term)\n            }\n            // Backspace in the empty field removes the last tag.\n            if (event.key === 'Backspace' && !term && row.tags.length > 0) {\n              setCompositeTags(editor, row, row.tags.slice(0, -1))\n            }\n          }}\n        />\n        <CommandList>\n          {items.map(tag => (\n            <CommandItem\n              key={tag}\n              value={`tag:${tag}`}\n              data-checked={row.tags.includes(tag)}\n              onSelect={() => toggle(tag)}\n            >\n              <Icon name=\"i-lucide-hash\" className=\"size-3.5 text-muted-foreground\" />\n              <span className=\"truncate\">{tag}</span>\n            </CommandItem>\n          ))}\n          {query && (\n            <CommandItem value={CREATE} onSelect={() => onCreate(term)}>\n              <Icon name=\"i-lucide-plus\" className=\"size-3.5 text-muted-foreground\" />\n              {t('composites.tags.create', { tag: normalizeTagName(term) || term })}\n            </CommandItem>\n          )}\n        </CommandList>\n      </Command>\n    </div>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+import { NodeViewProps } from "@tiptap/react";
+//#region src/features/composites/react/CompositeView.d.ts
+/** The composite block: the section with its content. The kind icon is drawn by the composite chrome overlay. */
+export declare function CompositeView({ editor, node, selected }: NodeViewProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CompositeView.d.ts.map

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

@@ -0,0 +1,30 @@
+import { cn } from "../../../react/ui/utils.js";
+import { compositeKind } from "../kinds.js";
+import { compositeKindsOf } from "../nodes.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
+//#region src/features/composites/react/CompositeView.tsx
+/** `text` as a CSS string literal (for `content:`). */
+const cssString = (text) => `"${text.replace(/["\\]/g, "\\$&").replace(/\n/g, "\\a ")}"`;
+/** The composite block: the section with its content. The kind icon is drawn by the composite chrome overlay. */
+function CompositeView({ editor, node, selected }) {
+	const kind = compositeKind(compositeKindsOf(editor), String(node.attrs.kind));
+	const placeholderVars = { "--composite-title-placeholder": cssString(kind.titlePlaceholder) };
+	return /* @__PURE__ */ jsxs(NodeViewWrapper, {
+		as: "section",
+		className: cn("composite", selected && "is-selected rounded-md ring-1 ring-primary"),
+		"data-type": "composite",
+		"data-kind": node.attrs.kind,
+		"data-id": node.attrs.id || void 0,
+		style: placeholderVars,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "composite__toggle",
+			contentEditable: false,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx(NodeViewContent, { className: "composite__content" })]
+	});
+}
+//#endregion
+export { CompositeView };
+
+//# sourceMappingURL=CompositeView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeView.js","names":[],"sources":["../../../../src/features/composites/react/CompositeView.tsx"],"sourcesContent":["import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react'\nimport type { CSSProperties } from 'react'\nimport { cn } from '../../../react/ui/utils'\nimport { compositeKind } from '../kinds'\nimport { compositeKindsOf } from '../nodes'\n\n/** `text` as a CSS string literal (for `content:`). */\nconst cssString = (text: string) => `\"${text.replace(/[\"\\\\]/g, '\\\\$&').replace(/\\n/g, '\\\\a ')}\"`\n\n/** The composite block: the section with its content. The kind icon is drawn by the composite chrome overlay. */\nexport function CompositeView({ editor, node, selected }: NodeViewProps) {\n  const kind = compositeKind(compositeKindsOf(editor), String(node.attrs.kind))\n  // Placeholder of the empty title (composites.css `content: var(…)`); a nested composite sets its own.\n  const placeholderVars = { '--composite-title-placeholder': cssString(kind.titlePlaceholder) } as CSSProperties\n  return (\n    <NodeViewWrapper\n      as=\"section\"\n      className={cn('composite', selected && 'is-selected rounded-md ring-1 ring-primary')}\n      data-type=\"composite\"\n      data-kind={node.attrs.kind}\n      data-id={node.attrs.id || undefined}\n      style={placeholderVars}\n    >\n      {/* Anchor of the kind icon on the left border: it only takes the icon's place and size. The composite chrome overlay\n          measures it and draws the icon as the button that opens the details popover and drags the composite. */}\n      <span className=\"composite__toggle\" contentEditable={false} aria-hidden=\"true\" />\n      <NodeViewContent className=\"composite__content\" />\n    </NodeViewWrapper>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAM,aAAa,SAAiB,IAAI,KAAK,QAAQ,UAAU,MAAM,CAAC,CAAC,QAAQ,OAAO,MAAM,EAAE;;AAG9F,SAAgB,cAAc,EAAE,QAAQ,MAAM,YAA2B;CACvE,MAAM,OAAO,cAAc,iBAAiB,MAAM,GAAG,OAAO,KAAK,MAAM,IAAI,CAAC;CAE5E,MAAM,kBAAkB,EAAE,iCAAiC,UAAU,KAAK,gBAAgB,EAAE;CAC5F,OACE,qBAAC,iBAAD;EACE,IAAG;EACH,WAAW,GAAG,aAAa,YAAY,4CAA4C;EACnF,aAAU;EACV,aAAW,KAAK,MAAM;EACtB,WAAS,KAAK,MAAM,MAAM,KAAA;EAC1B,OAAO;EANT,UAAA,CAUE,oBAAC,QAAD;GAAM,WAAU;GAAoB,iBAAiB;GAAO,eAAY;EAAQ,CAAA,GAChF,oBAAC,iBAAD,EAAiB,WAAU,qBAAsB,CAAA,CAClC;;AAErB"}

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

@@ -0,0 +1,8 @@
+import { CompositeKind } from "../kinds.js";
+//#region src/features/composites/react/SettingsEditingTab.d.ts
+/** „Bearbeiten“: Gliederung (structure mode, conversion scope), Bausteine defaults and the visibility of the block handles. */
+export declare function SettingsEditingTab({ kinds }: {
+  kinds: readonly CompositeKind[];
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SettingsEditingTab.d.ts.map

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

@@ -0,0 +1,153 @@
+import { DRAG_HANDLE_VISIBILITIES, HEADING_CONVERSION_SCOPES, KIND_ICON_VISIBILITIES, STRUCTURE_MODES, TREE_ROOTS } from "../../../settings/values.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { Icon } from "../../../react/Icon.js";
+import { useEditorSettings } from "../../../react/settings.js";
+import { STRUCTURE_MODE_KEYS } from "../structure-mode.js";
+import { TREE_ROOT_KEYS } from "../tree-root.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../react/ui/select.js";
+import { SettingsSection } from "../../../react/SettingsSection.js";
+import { Label } from "../../../react/ui/label.js";
+import { RadioGroup, RadioGroupItem } from "../../../react/ui/radio-group.js";
+import { DRAG_HANDLE_KEYS, HEADING_SCOPE_KEYS, KIND_ICON_KEYS, optionItems } from "../editing-settings-keys.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/composites/react/SettingsEditingTab.tsx
+/** A group of radio options under a legend (the counterpart of Nuxt UI's `URadioGroup`), the options one above the other. */
+function RadioField({ legend, items, value, onChange }) {
+	const legendId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "py-3",
+		children: [/* @__PURE__ */ jsx("p", {
+			id: legendId,
+			className: "mb-2 text-sm font-medium text-foreground",
+			children: legend
+		}), /* @__PURE__ */ jsx(RadioGroup, {
+			"aria-labelledby": legendId,
+			className: "flex flex-col gap-2",
+			value,
+			onValueChange: (next) => {
+				const item = items.find((candidate) => candidate.value === next);
+				if (item) onChange(item.value);
+			},
+			children: items.map((item) => /* @__PURE__ */ jsx(RadioOption, { item }, item.value))
+		})]
+	});
+}
+function RadioOption({ item }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-2",
+		children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+			id,
+			value: item.value,
+			className: "mt-0.5"
+		}), /* @__PURE__ */ jsxs(Label, {
+			htmlFor: id,
+			className: "flex-col items-start gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-foreground",
+				children: item.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-normal text-muted-foreground",
+				children: item.description
+			})]
+		})]
+	});
+}
+/** „Bearbeiten“: Gliederung (structure mode, conversion scope), Bausteine defaults and the visibility of the block handles. */
+function SettingsEditingTab({ kinds }) {
+	const { settings, update } = useEditorSettings();
+	const kindLabelId = useId();
+	const { t } = useEditorI18n();
+	const structureItems = optionItems(STRUCTURE_MODES, STRUCTURE_MODE_KEYS, t);
+	const scopeItems = optionItems(HEADING_CONVERSION_SCOPES, HEADING_SCOPE_KEYS, t);
+	const treeRootItems = optionItems(TREE_ROOTS, TREE_ROOT_KEYS, t);
+	const kindIconItems = optionItems(KIND_ICON_VISIBILITIES, KIND_ICON_KEYS, t);
+	const dragHandleItems = optionItems(DRAG_HANDLE_VISIBILITIES, DRAG_HANDLE_KEYS, t);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-8",
+		children: [
+			/* @__PURE__ */ jsxs(SettingsSection, {
+				title: t("composites.settings.structure.title"),
+				children: [/* @__PURE__ */ jsx(RadioField, {
+					legend: t("composites.settings.structure.legend"),
+					items: structureItems,
+					value: settings.blocks.structure,
+					onChange: (value) => update((draft) => {
+						draft.blocks.structure = value;
+					})
+				}), /* @__PURE__ */ jsx(RadioField, {
+					legend: t("composites.settings.scope.legend"),
+					items: scopeItems,
+					value: settings.editing.headingConversionScope,
+					onChange: (value) => update((draft) => {
+						draft.editing.headingConversionScope = value;
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(SettingsSection, {
+				title: t("composites.settings.sidebar.title"),
+				children: /* @__PURE__ */ jsx(RadioField, {
+					legend: t("composites.settings.treeRoot.legend"),
+					items: treeRootItems,
+					value: settings.blocks.treeRoot,
+					onChange: (value) => update((draft) => {
+						draft.blocks.treeRoot = value;
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs(SettingsSection, {
+				title: t("composites.settings.composites.title"),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-start justify-between gap-4 py-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx(Label, {
+								id: kindLabelId,
+								className: "text-sm font-medium text-foreground",
+								children: t("composites.settings.defaultKind.label")
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-muted-foreground",
+								children: t("composites.settings.defaultKind.description")
+							})]
+						}), /* @__PURE__ */ jsxs(Select, {
+							value: settings.blocks.defaultKind,
+							onValueChange: (value) => update((draft) => {
+								draft.blocks.defaultKind = value;
+							}),
+							children: [/* @__PURE__ */ jsx(SelectTrigger, {
+								"aria-labelledby": kindLabelId,
+								className: "w-64",
+								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__ */ jsx(RadioField, {
+						legend: t("composites.settings.kindIcon.legend"),
+						items: kindIconItems,
+						value: settings.blocks.kindIcon,
+						onChange: (value) => update((draft) => {
+							draft.blocks.kindIcon = value;
+						})
+					}),
+					/* @__PURE__ */ jsx(RadioField, {
+						legend: t("composites.settings.dragHandle.legend"),
+						items: dragHandleItems,
+						value: settings.blocks.dragHandle,
+						onChange: (value) => update((draft) => {
+							draft.blocks.dragHandle = value;
+						})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { SettingsEditingTab };
+
+//# sourceMappingURL=SettingsEditingTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsEditingTab.js","names":[],"sources":["../../../../src/features/composites/react/SettingsEditingTab.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { SettingsSection } from '../../../react/SettingsSection'\nimport { Label } from '../../../react/ui/label'\nimport { RadioGroup, RadioGroupItem } from '../../../react/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { DRAG_HANDLE_VISIBILITIES, HEADING_CONVERSION_SCOPES, KIND_ICON_VISIBILITIES, STRUCTURE_MODES, TREE_ROOTS } from '../../../settings'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { DRAG_HANDLE_KEYS, HEADING_SCOPE_KEYS, KIND_ICON_KEYS, optionItems } from '../editing-settings-keys'\nimport type { CompositeKind } from '../kinds'\nimport { STRUCTURE_MODE_KEYS } from '../structure-mode'\nimport { TREE_ROOT_KEYS } from '../tree-root'\n\n/** A group of radio options under a legend (the counterpart of Nuxt UI's `URadioGroup`), the options one above the other. */\nfunction RadioField<T extends string>({ legend, items, value, onChange }: {\n  legend: string\n  items: readonly { label: string, description: string, value: T }[]\n  value: T\n  onChange: (value: T) => void\n}) {\n  const legendId = useId()\n  return (\n    <div className=\"py-3\">\n      <p id={legendId} className=\"mb-2 text-sm font-medium text-foreground\">{legend}</p>\n      <RadioGroup\n        aria-labelledby={legendId}\n        className=\"flex flex-col gap-2\"\n        value={value}\n        onValueChange={(next) => {\n          const item = items.find(candidate => candidate.value === next)\n          if (item) onChange(item.value)\n        }}\n      >\n        {items.map(item => <RadioOption key={item.value} item={item} />)}\n      </RadioGroup>\n    </div>\n  )\n}\n\nfunction RadioOption({ item }: { item: { label: string, description: string, value: string } }) {\n  const id = useId()\n  return (\n    <div className=\"flex items-start gap-2\">\n      <RadioGroupItem id={id} value={item.value} className=\"mt-0.5\" />\n      <Label htmlFor={id} className=\"flex-col items-start gap-0.5\">\n        <span className=\"text-sm font-medium text-foreground\">{item.label}</span>\n        <span className=\"text-sm font-normal text-muted-foreground\">{item.description}</span>\n      </Label>\n    </div>\n  )\n}\n\n/** „Bearbeiten“: Gliederung (structure mode, conversion scope), Bausteine defaults and the visibility of the block handles. */\nexport function SettingsEditingTab({ kinds }: { kinds: readonly CompositeKind[] }) {\n  const { settings, update } = useEditorSettings()\n  const kindLabelId = useId()\n  const { t } = useEditorI18n()\n  const structureItems = optionItems(STRUCTURE_MODES, STRUCTURE_MODE_KEYS, t)\n  const scopeItems = optionItems(HEADING_CONVERSION_SCOPES, HEADING_SCOPE_KEYS, t)\n  const treeRootItems = optionItems(TREE_ROOTS, TREE_ROOT_KEYS, t)\n  const kindIconItems = optionItems(KIND_ICON_VISIBILITIES, KIND_ICON_KEYS, t)\n  const dragHandleItems = optionItems(DRAG_HANDLE_VISIBILITIES, DRAG_HANDLE_KEYS, t)\n\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <SettingsSection title={t('composites.settings.structure.title')}>\n        <RadioField\n          legend={t('composites.settings.structure.legend')}\n          items={structureItems}\n          value={settings.blocks.structure}\n          onChange={value => update((draft) => { draft.blocks.structure = value })}\n        />\n        <RadioField\n          legend={t('composites.settings.scope.legend')}\n          items={scopeItems}\n          value={settings.editing.headingConversionScope}\n          onChange={value => update((draft) => { draft.editing.headingConversionScope = value })}\n        />\n      </SettingsSection>\n\n      <SettingsSection title={t('composites.settings.sidebar.title')}>\n        <RadioField\n          legend={t('composites.settings.treeRoot.legend')}\n          items={treeRootItems}\n          value={settings.blocks.treeRoot}\n          onChange={value => update((draft) => { draft.blocks.treeRoot = value })}\n        />\n      </SettingsSection>\n\n      <SettingsSection title={t('composites.settings.composites.title')}>\n        <div className=\"flex items-start justify-between gap-4 py-3\">\n          <div className=\"min-w-0 flex-1\">\n            <Label id={kindLabelId} className=\"text-sm font-medium text-foreground\">{t('composites.settings.defaultKind.label')}</Label>\n            <p className=\"text-sm text-muted-foreground\">{t('composites.settings.defaultKind.description')}</p>\n          </div>\n          <Select value={settings.blocks.defaultKind} onValueChange={value => update((draft) => { draft.blocks.defaultKind = value })}>\n            <SelectTrigger aria-labelledby={kindLabelId} className=\"w-64\">\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        </div>\n        <RadioField\n          legend={t('composites.settings.kindIcon.legend')}\n          items={kindIconItems}\n          value={settings.blocks.kindIcon}\n          onChange={value => update((draft) => { draft.blocks.kindIcon = value })}\n        />\n        <RadioField\n          legend={t('composites.settings.dragHandle.legend')}\n          items={dragHandleItems}\n          value={settings.blocks.dragHandle}\n          onChange={value => update((draft) => { draft.blocks.dragHandle = value })}\n        />\n      </SettingsSection>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/features/composites/react/use-composite-anchors.d.ts

@@ -0,0 +1,17 @@
+import { CompositeRow } from "../rows.js";
+import { CompositeAnchor, CompositeFrame } from "../anchors.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/composites/react/use-composite-anchors.d.ts
+/**
+ * Measures the title line and box of every row's composite, relative to the editor's scroll container (`host`), kept
+ * current after transactions, resizes and row changes (see `observeCompositeAnchors`). An overlay portalled into `host`
+ * and positioned `absolute` from these numbers scrolls with the document and needs no scroll listener. Anchors are
+ * empty while the editor is not laid out (hidden by a table view, say).
+ */
+export declare function useCompositeAnchors(editor: Editor | undefined, rows: readonly CompositeRow[]): {
+  host: HTMLElement | null;
+  anchors: ReadonlyMap<string, CompositeAnchor>;
+  frame: CompositeFrame | null;
+};
+//#endregion
+//# sourceMappingURL=use-composite-anchors.d.ts.map

package/dist/features/composites/react/use-composite-anchors.js

@@ -0,0 +1,46 @@
+import { observeCompositeAnchors } from "../anchors.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/features/composites/react/use-composite-anchors.ts
+const NONE = /* @__PURE__ */ new Map();
+/**
+* Measures the title line and box of every row's composite, relative to the editor's scroll container (`host`), kept
+* current after transactions, resizes and row changes (see `observeCompositeAnchors`). An overlay portalled into `host`
+* and positioned `absolute` from these numbers scrolls with the document and needs no scroll listener. Anchors are
+* empty while the editor is not laid out (hidden by a table view, say).
+*/
+function useCompositeAnchors(editor, rows) {
+	const [host, setHost] = useState(null);
+	const [anchors, setAnchors] = useState(NONE);
+	const [frame, setFrame] = useState(null);
+	const latest = useRef(rows);
+	latest.current = rows;
+	const refresh = useRef(void 0);
+	useEffect(() => {
+		const model = observeCompositeAnchors(editor, () => latest.current);
+		setHost(model.host.get());
+		setAnchors(model.anchors.get());
+		setFrame(model.frame.get());
+		const stops = [
+			model.host.subscribe(setHost),
+			model.anchors.subscribe(setAnchors),
+			model.frame.subscribe(setFrame)
+		];
+		refresh.current = model.refresh;
+		return () => {
+			for (const stop of stops) stop();
+			model.dispose();
+			refresh.current = void 0;
+			setHost(null);
+		};
+	}, [editor]);
+	useEffect(() => refresh.current?.(), [rows]);
+	return {
+		host,
+		anchors,
+		frame
+	};
+}
+//#endregion
+export { useCompositeAnchors };
+
+//# sourceMappingURL=use-composite-anchors.js.map

package/dist/features/composites/react/use-composite-anchors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-composite-anchors.js","names":[],"sources":["../../../../src/features/composites/react/use-composite-anchors.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEffect, useRef, useState } from 'react'\nimport { type CompositeAnchor, type CompositeFrame, observeCompositeAnchors } from '../anchors'\nimport type { CompositeRow } from '../rows'\n\nconst NONE: ReadonlyMap<string, CompositeAnchor> = new Map()\n\n/**\n * Measures the title line and box of every row's composite, relative to the editor's scroll container (`host`), kept\n * current after transactions, resizes and row changes (see `observeCompositeAnchors`). An overlay portalled into `host`\n * and positioned `absolute` from these numbers scrolls with the document and needs no scroll listener. Anchors are\n * empty while the editor is not laid out (hidden by a table view, say).\n */\nexport function useCompositeAnchors(editor: Editor | undefined, rows: readonly CompositeRow[]): {\n  host: HTMLElement | null\n  anchors: ReadonlyMap<string, CompositeAnchor>\n  frame: CompositeFrame | null\n} {\n  const [host, setHost] = useState<HTMLElement | null>(null)\n  const [anchors, setAnchors] = useState(NONE)\n  const [frame, setFrame] = useState<CompositeFrame | null>(null)\n  const latest = useRef(rows)\n  latest.current = rows\n  const refresh = useRef<(() => void) | undefined>(undefined)\n\n  useEffect(() => {\n    const model = observeCompositeAnchors(editor, () => latest.current)\n    setHost(model.host.get())\n    setAnchors(model.anchors.get())\n    setFrame(model.frame.get())\n    const stops = [model.host.subscribe(setHost), model.anchors.subscribe(setAnchors), model.frame.subscribe(setFrame)]\n    refresh.current = model.refresh\n    return () => {\n      for (const stop of stops) stop()\n      model.dispose()\n      refresh.current = undefined\n      setHost(null)\n    }\n  }, [editor])\n  useEffect(() => refresh.current?.(), [rows])\n\n  return { host, anchors, frame }\n}\n"],"mappings":";;;AAKA,MAAM,uBAA6C,IAAI,IAAI;;;;;;;AAQ3D,SAAgB,oBAAoB,QAA4B,MAI9D;CACA,MAAM,CAAC,MAAM,WAAW,SAA6B,IAAI;CACzD,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,MAAM,CAAC,OAAO,YAAY,SAAgC,IAAI;CAC9D,MAAM,SAAS,OAAO,IAAI;CAC1B,OAAO,UAAU;CACjB,MAAM,UAAU,OAAiC,KAAA,CAAS;CAE1D,gBAAgB;EACd,MAAM,QAAQ,wBAAwB,cAAc,OAAO,OAAO;EAClE,QAAQ,MAAM,KAAK,IAAI,CAAC;EACxB,WAAW,MAAM,QAAQ,IAAI,CAAC;EAC9B,SAAS,MAAM,MAAM,IAAI,CAAC;EAC1B,MAAM,QAAQ;GAAC,MAAM,KAAK,UAAU,OAAO;GAAG,MAAM,QAAQ,UAAU,UAAU;GAAG,MAAM,MAAM,UAAU,QAAQ;EAAC;EAClH,QAAQ,UAAU,MAAM;EACxB,aAAa;GACX,KAAK,MAAM,QAAQ,OAAO,KAAK;GAC/B,MAAM,QAAQ;GACd,QAAQ,UAAU,KAAA;GAClB,QAAQ,IAAI;EACd;CACF,GAAG,CAAC,MAAM,CAAC;CACX,gBAAgB,QAAQ,UAAU,GAAG,CAAC,IAAI,CAAC;CAE3C,OAAO;EAAE;EAAM;EAAS;CAAM;AAChC"}

package/dist/features/composites/react/use-composite-rows.d.ts

@@ -0,0 +1,11 @@
+import { CompositeRowsState } from "../rows-model.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/composites/react/use-composite-rows.d.ts
+/**
+ * The composites of `editor`'s document as rows, kept current (see `createCompositeRows`): re-renders when the rows,
+ * tags, kinds, mentions or the focused composite change. Follows the editor when it changes; a missing editor yields
+ * empty lists. Use the `setComposite*` helpers to write.
+ */
+export declare function useCompositeRows(editor: Editor | undefined): CompositeRowsState;
+//#endregion
+//# sourceMappingURL=use-composite-rows.d.ts.map

package/dist/features/composites/react/use-composite-rows.js

@@ -0,0 +1,26 @@
+import { createCompositeRows } from "../rows-model.js";
+import { useEffect, useState } from "react";
+//#region src/features/composites/react/use-composite-rows.ts
+const EMPTY = createCompositeRows(void 0).state.get();
+/**
+* The composites of `editor`'s document as rows, kept current (see `createCompositeRows`): re-renders when the rows,
+* tags, kinds, mentions or the focused composite change. Follows the editor when it changes; a missing editor yields
+* empty lists. Use the `setComposite*` helpers to write.
+*/
+function useCompositeRows(editor) {
+	const [state, setState] = useState(EMPTY);
+	useEffect(() => {
+		const model = createCompositeRows(editor);
+		setState(model.state.get());
+		const stop = model.state.subscribe(setState);
+		return () => {
+			stop();
+			model.dispose();
+		};
+	}, [editor]);
+	return state;
+}
+//#endregion
+export { useCompositeRows };
+
+//# sourceMappingURL=use-composite-rows.js.map

package/dist/features/composites/react/use-composite-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-composite-rows.js","names":[],"sources":["../../../../src/features/composites/react/use-composite-rows.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEffect, useState } from 'react'\nimport { type CompositeRowsState, createCompositeRows } from '../rows-model'\n\nconst EMPTY: CompositeRowsState = createCompositeRows(undefined).state.get()\n\n/**\n * The composites of `editor`'s document as rows, kept current (see `createCompositeRows`): re-renders when the rows,\n * tags, kinds, mentions or the focused composite change. Follows the editor when it changes; a missing editor yields\n * empty lists. Use the `setComposite*` helpers to write.\n */\nexport function useCompositeRows(editor: Editor | undefined): CompositeRowsState {\n  const [state, setState] = useState(EMPTY)\n\n  // Paired create and dispose, so StrictMode's mount, cleanup, mount leaves exactly one editor listener.\n  useEffect(() => {\n    const model = createCompositeRows(editor)\n    setState(model.state.get())\n    const stop = model.state.subscribe(setState)\n    return () => {\n      stop()\n      model.dispose()\n    }\n  }, [editor])\n\n  return state\n}\n"],"mappings":";;;AAIA,MAAM,QAA4B,oBAAoB,KAAA,CAAS,CAAC,CAAC,MAAM,IAAI;;;;;;AAO3E,SAAgB,iBAAiB,QAAgD;CAC/E,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CAGxC,gBAAgB;EACd,MAAM,QAAQ,oBAAoB,MAAM;EACxC,SAAS,MAAM,MAAM,IAAI,CAAC;EAC1B,MAAM,OAAO,MAAM,MAAM,UAAU,QAAQ;EAC3C,aAAa;GACX,KAAK;GACL,MAAM,QAAQ;EAChB;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO;AACT"}

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

@@ -0,0 +1,24 @@
+import { ReactFeature } from "../../react/EditorSurface.js";
+import "../../react/index.js";
+import { CompositeFeatureOptions } from "./feature.js";
+import { CompositeChrome } from "./react/CompositeChrome.js";
+import { CompositeDetails } from "./react/CompositeDetails.js";
+import { CompositeFieldEditor } from "./react/CompositeFieldEditor.js";
+import { CompositeInspector } from "./react/CompositeInspector.js";
+import { CompositeStatusMenu } from "./react/CompositeStatusMenu.js";
+import { CompositeSummaryEditor } from "./react/CompositeSummaryEditor.js";
+import { CompositeTable } from "./react/CompositeTable.js";
+import { CompositeTagsEditor } from "./react/CompositeTagsEditor.js";
+import { CompositeView } from "./react/CompositeView.js";
+import { SettingsEditingTab } from "./react/SettingsEditingTab.js";
+import { useCompositeAnchors } from "./react/use-composite-anchors.js";
+import { useCompositeRows } from "./react/use-composite-rows.js";
+//#region src/features/composites/react.d.ts
+/**
+ * The React composites feature (shadcn): see `compositeFeatureCore`. The host places `CompositeTable` and
+ * `CompositeInspector` beside the editor.
+ */
+export declare function compositeFeature(options?: CompositeFeatureOptions): ReactFeature;
+//#endregion
+export { CompositeChrome, CompositeDetails, CompositeFieldEditor, CompositeInspector, CompositeStatusMenu, CompositeSummaryEditor, CompositeTable, CompositeTagsEditor, CompositeView, SettingsEditingTab, useCompositeAnchors, useCompositeRows };
+//# sourceMappingURL=react.d.ts.map

package/dist/features/composites/react.js

@@ -0,0 +1,30 @@
+import { compositeFeatureCore } from "./feature.js";
+import { CompositeFieldEditor } from "./react/CompositeFieldEditor.js";
+import { CompositeSummaryEditor } from "./react/CompositeSummaryEditor.js";
+import { CompositeDetails } from "./react/CompositeDetails.js";
+import { CompositeStatusMenu } from "./react/CompositeStatusMenu.js";
+import { CompositeTagsEditor } from "./react/CompositeTagsEditor.js";
+import { useCompositeAnchors } from "./react/use-composite-anchors.js";
+import { useCompositeRows } from "./react/use-composite-rows.js";
+import { CompositeChrome } from "./react/CompositeChrome.js";
+import { CompositeView } from "./react/CompositeView.js";
+import { SettingsEditingTab } from "./react/SettingsEditingTab.js";
+import { CompositeInspector } from "./react/CompositeInspector.js";
+import { CompositeTable } from "./react/CompositeTable.js";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+//#region src/features/composites/react.ts
+/**
+* The React composites feature (shadcn): see `compositeFeatureCore`. The host places `CompositeTable` and
+* `CompositeInspector` beside the editor.
+*/
+function compositeFeature(options = {}) {
+	return compositeFeatureCore({
+		chrome: CompositeChrome,
+		settingsTab: SettingsEditingTab,
+		nodeViews: { composite: ReactNodeViewRenderer(CompositeView) }
+	}, options);
+}
+//#endregion
+export { CompositeChrome, CompositeDetails, CompositeFieldEditor, CompositeInspector, CompositeStatusMenu, CompositeSummaryEditor, CompositeTable, CompositeTagsEditor, CompositeView, SettingsEditingTab, compositeFeature, useCompositeAnchors, useCompositeRows };
+
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","names":[],"sources":["../../../src/features/composites/react.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { ReactNodeViewRenderer } from '@tiptap/react'\nimport type { ComponentType } from 'react'\nimport type { ReactFeature } from '../../react'\nimport { type CompositeFeatureOptions, compositeFeatureCore } from './feature'\nimport { CompositeChrome } from './react/CompositeChrome'\nimport { CompositeView } from './react/CompositeView'\nimport { SettingsEditingTab } from './react/SettingsEditingTab'\n\nexport { CompositeChrome } from './react/CompositeChrome'\nexport { CompositeDetails } from './react/CompositeDetails'\nexport { CompositeFieldEditor } from './react/CompositeFieldEditor'\nexport { CompositeInspector } from './react/CompositeInspector'\nexport { CompositeStatusMenu } from './react/CompositeStatusMenu'\nexport { CompositeSummaryEditor } from './react/CompositeSummaryEditor'\nexport { CompositeTable } from './react/CompositeTable'\nexport { CompositeTagsEditor } from './react/CompositeTagsEditor'\nexport { CompositeView } from './react/CompositeView'\nexport { SettingsEditingTab } from './react/SettingsEditingTab'\nexport { useCompositeAnchors } from './react/use-composite-anchors'\nexport { useCompositeRows } from './react/use-composite-rows'\n\n/**\n * The React composites feature (shadcn): see `compositeFeatureCore`. The host places `CompositeTable` and\n * `CompositeInspector` beside the editor.\n */\nexport function compositeFeature(options: CompositeFeatureOptions = {}): ReactFeature {\n  return compositeFeatureCore<ComponentType<{ editor: Editor }>>({\n    chrome: CompositeChrome,\n    // A settings tab receives only its descriptor's `props` (`{ kinds }`), not the toolbar's `{ editor }` (see `EditorSettingsPanel`).\n    settingsTab: SettingsEditingTab as unknown as ComponentType<{ editor: Editor }>,\n    nodeViews: { composite: ReactNodeViewRenderer(CompositeView) },\n  }, options)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,SAAgB,iBAAiB,UAAmC,CAAC,GAAiB;CACpF,OAAO,qBAAwD;EAC7D,QAAQ;EAER,aAAa;EACb,WAAW,EAAE,WAAW,sBAAsB,aAAa,EAAE;CAC/D,GAAG,OAAO;AACZ"}

package/dist/features/composites/rows-model.d.ts

@@ -0,0 +1,38 @@
+import { ReadonlyStore } from "../../core/store.js";
+import { CompositeMention, CompositeRow } from "./rows.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/composites/rows-model.d.ts
+/** A kind in use in the document, with how many composites have it. */
+export interface CompositeKindCount {
+  id: string;
+  label: string;
+  icon: string;
+  count: number;
+}
+/** The live metadata read model of an editor's document (see `createCompositeRows`). */
+export interface CompositeRowsState {
+  /** Every composite in document order. */
+  rows: readonly CompositeRow[];
+  /** Distinct tags of all composites, sorted (German collation). */
+  tags: readonly string[];
+  /** Kinds in use with their counts: configured kinds in their configured order, then unknown ones in order of appearance. */
+  kinds: readonly CompositeKindCount[];
+  /** Distinct `@mention` chips of the document. */
+  mentions: readonly CompositeMention[];
+  /** The innermost composite around the selection head, `null` outside of any. */
+  focused: CompositeRow | null;
+}
+/** The composites of an editor's document as an observable state; `dispose()` detaches the editor listener (idempotent). */
+export interface CompositeRowsHandle {
+  readonly state: ReadonlyStore<CompositeRowsState>;
+  dispose: () => void;
+}
+/**
+ * The composites of `editor`'s document as rows, kept current: re-read once per animation frame after a transaction
+ * that changed the document (a selection-only change just moves `focused`). A missing or destroyed editor yields empty
+ * lists. Create one model per editor (a framework hook follows an editor that changes). Use the `setComposite*` helpers
+ * to write.
+ */
+export declare function createCompositeRows(editor: Editor | undefined): CompositeRowsHandle;
+//#endregion
+//# sourceMappingURL=rows-model.d.ts.map