@ecsplico/editor 2.1.2 → 3.1.0

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

@@ -0,0 +1,229 @@
+import { bibtexOf, cslOf, cslTypeOptions } from "../bibliography.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.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 { compositeOfRow, setCompositeMetaField } from "../rows.js";
+import { bibFormOf, bibItemOf } from "../bibliography-form.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/composites/react/BibliographyEditor.tsx
+const INPUT_CLASS = "h-6 w-full px-2 text-xs md:text-xs";
+const TEXTAREA_CLASS = "max-h-[8.5rem] min-h-0 w-full px-2 py-1 text-xs md:text-xs";
+const COUNTERS = [
+	{
+		key: "volume",
+		labelKey: "composites.bib.field.volume"
+	},
+	{
+		key: "issue",
+		labelKey: "composites.bib.field.issue"
+	},
+	{
+		key: "page",
+		labelKey: "composites.bib.field.page"
+	}
+];
+const LINES = [
+	{
+		key: "containerTitle",
+		labelKey: "composites.bib.field.containerTitle"
+	},
+	{
+		key: "publisher",
+		labelKey: "composites.bib.field.publisher"
+	},
+	{
+		key: "doi",
+		labelKey: "composites.bib.field.doi"
+	},
+	{
+		key: "isbn",
+		labelKey: "composites.bib.field.isbn"
+	},
+	{
+		key: "url",
+		labelKey: "composites.bib.field.url"
+	}
+];
+/**
+* The structured editor of a `bibliography` field (CSL-JSON item, `meta.bib`): type, authors, year, container, volume,
+* issue, pages, publisher, DOI, ISBN, URL and abstract. Inputs keep a local draft; every commit (blur, Enter, choosing
+* a type, unmount, another row) writes the whole item through `setCompositeMetaField`. The title is the Baustein's and
+* never stored.
+*/
+function BibliographyEditor({ editor, row, field, disabled }) {
+	const { t } = useEditorI18n();
+	const value = row.meta[field.key];
+	const stored = value && typeof value === "object" && typeof value.type === "string" ? value : null;
+	const [form, setForm] = useState(() => bibFormOf(stored));
+	const formRef = useRef(form);
+	const dirty = useRef(false);
+	const [copied, setCopied] = useState(false);
+	const target = useRef({
+		editor,
+		row,
+		field,
+		stored
+	});
+	useEffect(() => {
+		target.current = {
+			editor,
+			row,
+			field,
+			stored
+		};
+	});
+	useEffect(() => {
+		if (!dirty.current) {
+			const next = bibFormOf(stored);
+			formRef.current = next;
+			setForm(next);
+		}
+	}, [stored, row.key]);
+	const commit = useCallback(() => {
+		if (!dirty.current) return;
+		dirty.current = false;
+		const current = target.current;
+		if (!current.editor.isDestroyed) setCompositeMetaField(current.editor, current.row, current.field.key, bibItemOf(formRef.current, current.stored));
+	}, []);
+	useEffect(() => commit, [
+		commit,
+		editor,
+		row.key,
+		field.key
+	]);
+	useEffect(() => {
+		if (!copied) return;
+		const timer = window.setTimeout(() => setCopied(false), 1500);
+		return () => window.clearTimeout(timer);
+	}, [copied]);
+	function onInput(key, next) {
+		formRef.current = {
+			...formRef.current,
+			[key]: next
+		};
+		setForm(formRef.current);
+		dirty.current = true;
+	}
+	function onType(next) {
+		onInput("type", next);
+		commit();
+	}
+	async function copyBibtex() {
+		commit();
+		const node = compositeOfRow(editor.state.doc, row)?.node;
+		const csl = node && cslOf(node);
+		if (!csl) return;
+		await navigator.clipboard.writeText(bibtexOf(csl));
+		setCopied(true);
+	}
+	const canFetch = typeof editor.commands.fetchCompositeBibliography === "function";
+	const hasDoi = form.doi.trim() !== "" || typeof row.meta.doi === "string" && row.meta.doi.trim() !== "";
+	function fetchByDoi() {
+		commit();
+		const found = compositeOfRow(editor.state.doc, row);
+		if (found) editor.commands.fetchCompositeBibliography(found.pos);
+	}
+	const typeOptions = useMemo(() => cslTypeOptions(t), [t]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs(Select, {
+				value: form.type,
+				onValueChange: onType,
+				disabled,
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					size: "sm",
+					className: "w-full text-xs data-[size=sm]:h-6",
+					"aria-label": t("composites.bib.field.type"),
+					children: /* @__PURE__ */ jsx(SelectValue, {})
+				}), /* @__PURE__ */ jsx(SelectContent, { children: typeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+					value: option.value,
+					children: option.label
+				}, option.value)) })]
+			}),
+			/* @__PURE__ */ jsx(Textarea, {
+				value: form.authors,
+				placeholder: t("composites.bib.field.authorsHelp"),
+				"aria-label": t("composites.bib.field.authors"),
+				disabled,
+				rows: 2,
+				className: TEXTAREA_CLASS,
+				onBlur: commit,
+				onChange: (event) => onInput("authors", event.target.value)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-4 gap-1.5",
+				children: [/* @__PURE__ */ jsx(Input, {
+					value: form.year,
+					type: "number",
+					placeholder: t("composites.bib.field.year"),
+					"aria-label": t("composites.bib.field.year"),
+					disabled,
+					className: INPUT_CLASS,
+					onBlur: commit,
+					onKeyDown: (event) => {
+						if (event.key === "Enter") commit();
+					},
+					onChange: (event) => onInput("year", event.target.value)
+				}), COUNTERS.map((input) => /* @__PURE__ */ jsx(Input, {
+					value: form[input.key],
+					placeholder: t(input.labelKey),
+					"aria-label": t(input.labelKey),
+					disabled,
+					className: INPUT_CLASS,
+					onBlur: commit,
+					onKeyDown: (event) => {
+						if (event.key === "Enter") commit();
+					},
+					onChange: (event) => onInput(input.key, event.target.value)
+				}, input.key))]
+			}),
+			LINES.map((input) => /* @__PURE__ */ jsx(Input, {
+				value: form[input.key],
+				placeholder: t(input.labelKey),
+				"aria-label": t(input.labelKey),
+				disabled,
+				className: INPUT_CLASS,
+				onBlur: commit,
+				onKeyDown: (event) => {
+					if (event.key === "Enter") commit();
+				},
+				onChange: (event) => onInput(input.key, event.target.value)
+			}, input.key)),
+			/* @__PURE__ */ jsx(Textarea, {
+				value: form.abstract,
+				placeholder: t("composites.bib.field.abstract"),
+				"aria-label": t("composites.bib.field.abstract"),
+				disabled,
+				rows: 2,
+				className: TEXTAREA_CLASS,
+				onBlur: commit,
+				onChange: (event) => onInput("abstract", event.target.value)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-1.5",
+				children: [canFetch && /* @__PURE__ */ jsxs(Button, {
+					size: "xs",
+					variant: "ghost",
+					disabled: disabled || !hasDoi,
+					onClick: fetchByDoi,
+					children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-book-marked" }), t("composites.bib.fetchDoi")]
+				}), /* @__PURE__ */ jsxs(Button, {
+					size: "xs",
+					variant: "ghost",
+					disabled: !stored,
+					onClick: () => void copyBibtex(),
+					children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-copy" }), copied ? t("composites.bib.copied") : t("composites.bib.copyBibtex")]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { BibliographyEditor };
+
+//# sourceMappingURL=BibliographyEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BibliographyEditor.js","names":[],"sources":["../../../../src/features/composites/react/BibliographyEditor.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { Input } from '../../../react/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { Textarea } from '../../../react/ui/textarea'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { bibtexOf, type CslItem, type CslType, cslOf, cslTypeOptions } from '../bibliography'\nimport { type BibForm, bibFormOf, bibItemOf } from '../bibliography-form'\nimport type { CompositeMetaField } from '../kinds'\nimport { compositeOfRow, type CompositeRow, setCompositeMetaField } from '../rows'\nimport '../bibliography-command'\n\nconst INPUT_CLASS = 'h-6 w-full px-2 text-xs md:text-xs'\nconst TEXTAREA_CLASS = 'max-h-[8.5rem] min-h-0 w-full px-2 py-1 text-xs md:text-xs'\n\nconst COUNTERS = [\n  { key: 'volume', labelKey: 'composites.bib.field.volume' },\n  { key: 'issue', labelKey: 'composites.bib.field.issue' },\n  { key: 'page', labelKey: 'composites.bib.field.page' },\n] as const\nconst LINES = [\n  { key: 'containerTitle', labelKey: 'composites.bib.field.containerTitle' },\n  { key: 'publisher', labelKey: 'composites.bib.field.publisher' },\n  { key: 'doi', labelKey: 'composites.bib.field.doi' },\n  { key: 'isbn', labelKey: 'composites.bib.field.isbn' },\n  { key: 'url', labelKey: 'composites.bib.field.url' },\n] as const\n\n/**\n * The structured editor of a `bibliography` field (CSL-JSON item, `meta.bib`): type, authors, year, container, volume,\n * issue, pages, publisher, DOI, ISBN, URL and abstract. Inputs keep a local draft; every commit (blur, Enter, choosing\n * a type, unmount, another row) writes the whole item through `setCompositeMetaField`. The title is the Baustein's and\n * never stored.\n */\nexport function BibliographyEditor({ editor, row, field, disabled }: {\n  editor: Editor\n  row: CompositeRow\n  field: CompositeMetaField\n  disabled?: boolean\n}) {\n  const { t } = useEditorI18n()\n  const value = row.meta[field.key] as Partial<CslItem> | null | undefined\n  const stored = value && typeof value === 'object' && typeof value.type === 'string' ? value as CslItem : null\n  const [form, setForm] = useState<BibForm>(() => bibFormOf(stored))\n  const formRef = useRef(form)\n  const dirty = useRef(false)\n  const [copied, setCopied] = useState(false)\n  // The latest props for the commit on unmount; updated after every render, so the cleanup of a changed `row.key` still sees the previous row.\n  const target = useRef({ editor, row, field, stored })\n  useEffect(() => {\n    target.current = { editor, row, field, stored }\n  })\n\n  useEffect(() => {\n    if (!dirty.current) {\n      const next = bibFormOf(stored)\n      formRef.current = next\n      setForm(next)\n    }\n  }, [stored, row.key])\n\n  const commit = useCallback(() => {\n    if (!dirty.current) return\n    dirty.current = false\n    const current = target.current\n    if (!current.editor.isDestroyed) setCompositeMetaField(current.editor, current.row, current.field.key, bibItemOf(formRef.current, current.stored))\n  }, [])\n\n  // Flush on unmount and when the editor is bound to another row.\n  useEffect(() => commit, [commit, editor, row.key, field.key])\n\n  useEffect(() => {\n    if (!copied) return\n    const timer = window.setTimeout(() => setCopied(false), 1500)\n    return () => window.clearTimeout(timer)\n  }, [copied])\n\n  function onInput<K extends keyof BibForm>(key: K, next: BibForm[K]) {\n    formRef.current = { ...formRef.current, [key]: next }\n    setForm(formRef.current)\n    dirty.current = true\n  }\n\n  function onType(next: string) {\n    onInput('type', next as CslType)\n    commit()\n  }\n\n  async function copyBibtex() {\n    commit()\n    const node = compositeOfRow(editor.state.doc, row)?.node\n    const csl = node && cslOf(node)\n    if (!csl) return\n    await navigator.clipboard.writeText(bibtexOf(csl))\n    setCopied(true)\n  }\n\n  // Registered by the AI integration (`composite-ai`); without it there is nothing to fetch with.\n  const canFetch = typeof editor.commands.fetchCompositeBibliography === 'function'\n  const hasDoi = form.doi.trim() !== '' || (typeof row.meta.doi === 'string' && row.meta.doi.trim() !== '')\n\n  function fetchByDoi() {\n    commit()\n    const found = compositeOfRow(editor.state.doc, row)\n    if (found) editor.commands.fetchCompositeBibliography(found.pos)\n  }\n\n  const typeOptions = useMemo(() => cslTypeOptions(t), [t])\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Select value={form.type} onValueChange={onType} disabled={disabled}>\n        <SelectTrigger size=\"sm\" className=\"w-full text-xs data-[size=sm]:h-6\" aria-label={t('composites.bib.field.type')}>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          {typeOptions.map(option => (\n            <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <Textarea\n        value={form.authors}\n        placeholder={t('composites.bib.field.authorsHelp')}\n        aria-label={t('composites.bib.field.authors')}\n        disabled={disabled}\n        rows={2}\n        className={TEXTAREA_CLASS}\n        onBlur={commit}\n        onChange={event => onInput('authors', event.target.value)}\n      />\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        <Input\n          value={form.year}\n          type=\"number\"\n          placeholder={t('composites.bib.field.year')}\n          aria-label={t('composites.bib.field.year')}\n          disabled={disabled}\n          className={INPUT_CLASS}\n          onBlur={commit}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') commit()\n          }}\n          onChange={event => onInput('year', event.target.value)}\n        />\n        {COUNTERS.map(input => (\n          <Input\n            key={input.key}\n            value={form[input.key]}\n            placeholder={t(input.labelKey)}\n            aria-label={t(input.labelKey)}\n            disabled={disabled}\n            className={INPUT_CLASS}\n            onBlur={commit}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter') commit()\n            }}\n            onChange={event => onInput(input.key, event.target.value)}\n          />\n        ))}\n      </div>\n      {LINES.map(input => (\n        <Input\n          key={input.key}\n          value={form[input.key]}\n          placeholder={t(input.labelKey)}\n          aria-label={t(input.labelKey)}\n          disabled={disabled}\n          className={INPUT_CLASS}\n          onBlur={commit}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') commit()\n          }}\n          onChange={event => onInput(input.key, event.target.value)}\n        />\n      ))}\n      <Textarea\n        value={form.abstract}\n        placeholder={t('composites.bib.field.abstract')}\n        aria-label={t('composites.bib.field.abstract')}\n        disabled={disabled}\n        rows={2}\n        className={TEXTAREA_CLASS}\n        onBlur={commit}\n        onChange={event => onInput('abstract', event.target.value)}\n      />\n      <div className=\"flex justify-end gap-1.5\">\n        {canFetch && (\n          <Button size=\"xs\" variant=\"ghost\" disabled={disabled || !hasDoi} onClick={fetchByDoi}>\n            <Icon name=\"i-lucide-book-marked\" />\n            {t('composites.bib.fetchDoi')}\n          </Button>\n        )}\n        <Button size=\"xs\" variant=\"ghost\" disabled={!stored} onClick={() => void copyBibtex()}>\n          <Icon name=\"i-lucide-copy\" />\n          {copied ? t('composites.bib.copied') : t('composites.bib.copyBibtex')}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

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

@@ -2,18 +2,20 @@ 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 { useStore } from "../../../react/use-store.js";
 import { useEditorSettings } from "../../../react/settings.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../react/ui/popover.js";
 import { compositeOfRow, setCompositeTags } from "../rows.js";
 import { compositeSectionOf } from "../anchors.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../react/ui/popover.js";
+import { derivedChromeOf } from "../derived-chrome.js";
 import { rowStatus } from "../meta-display.js";
+import { useCompositeRows } from "./use-composite-rows.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/features/composites/react/CompositeChrome.tsx
 /**
@@ -78,24 +80,42 @@ function CompositeChrome({ editor }) {
 		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)
-		}];
-	}), [
+	const expanded = useStore(editor.storage.composite.expanded);
+	const placed = useMemo(() => {
+		let hiddenUntil = -1;
+		return rows.flatMap((row) => {
+			if (row.pos < hiddenUntil) return [];
+			const derived = derivedChromeOf(editor, row);
+			const open = !derived || !row.id || expanded.has(row.id);
+			if (!open) hiddenUntil = row.end;
+			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),
+				derived: derived && {
+					stale: derived.stale,
+					open,
+					toggleable: !!row.id
+				}
+			}];
+		});
+	}, [
+		editor,
 		rows,
 		anchors,
 		frame,
+		expanded,
 		t
 	]);
+	function toggleExpanded(row) {
+		if (row.id) editor.commands.toggleCompositeExpanded(row.id);
+	}
 	function removeTag(row, tag) {
 		setCompositeTags(editor, row, row.tags.filter((candidate) => candidate !== tag));
 	}
@@ -138,7 +158,7 @@ function CompositeChrome({ editor }) {
 				row: item.row,
 				editable
 			})
-		})] }), (item.status || item.row.tags.length > 0 || editable) && /* @__PURE__ */ jsxs("div", {
+		})] }), (item.status || item.derived || item.row.tagsVisible && (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`,
@@ -149,6 +169,34 @@ function CompositeChrome({ editor }) {
 			onMouseEnter: () => setChipsHoveredKey(item.row.key),
 			onMouseLeave: () => setChipsHoveredKey(null),
 			children: [
+				item.derived && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					item.derived.toggleable && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: CHIP_BUTTON,
+						"aria-expanded": item.derived.open,
+						"aria-label": t(item.derived.open ? "composites.derivation.collapse" : "composites.derivation.expand"),
+						title: t(item.derived.open ? "composites.derivation.collapse" : "composites.derivation.expand"),
+						onClick: () => toggleExpanded(item.row),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: item.derived.open ? "i-lucide-chevron-down" : "i-lucide-chevron-right",
+							className: "size-3.5"
+						})
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: CHIP,
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-git-branch",
+							className: "size-3.5"
+						}), t("composites.derivation.badge")]
+					}),
+					item.derived.stale && /* @__PURE__ */ jsxs("span", {
+						className: cn(CHIP, "text-(--sk-warning)"),
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-triangle-alert",
+							className: "size-3.5"
+						}), t("composites.derivation.stale")]
+					})
+				] }),
 				item.status && (editable ? /* @__PURE__ */ jsx(CompositeStatusMenu, {
 					editor,
 					row: item.row,
@@ -168,7 +216,7 @@ function CompositeChrome({ editor }) {
 						className: cn("size-3.5", STATUS_COLOR[item.status.color] ?? item.status.color)
 					}), item.status.label]
 				})),
-				item.row.tags.map((tag) => /* @__PURE__ */ jsxs("span", {
+				(item.row.tagsVisible ? item.row.tags : []).map((tag) => /* @__PURE__ */ jsxs("span", {
 					className: cn(CHIP, "group max-w-40 gap-0"),
 					children: [/* @__PURE__ */ jsxs("span", {
 						className: "truncate",
@@ -184,7 +232,7 @@ function CompositeChrome({ editor }) {
 						})
 					})]
 				}, tag)),
-				editable && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				editable && item.row.tagsVisible && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 					asChild: true,
 					children: /* @__PURE__ */ jsx("button", {
 						type: "button",

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

@@ -1 +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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"}
+{"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 { useStore } from '../../../react/use-store'\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 { derivedChromeOf } from '../derived-chrome'\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 expanded = useStore(editor.storage.composite.expanded)\n\n  const placed = useMemo(() => {\n    // End of the collapsed derived Baustein the rows being walked sit in: its clipped content shows no chrome.\n    let hiddenUntil = -1\n    return rows.flatMap((row) => {\n      if (row.pos < hiddenUntil) return []\n      const derived = derivedChromeOf(editor, row)\n      const open = !derived || !row.id || expanded.has(row.id)\n      if (!open) hiddenUntil = row.end\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        derived: derived && { stale: derived.stale, open, toggleable: !!row.id },\n      }]\n    })\n  }, [editor, rows, anchors, frame, expanded, t])\n\n  function toggleExpanded(row: CompositeRow) {\n    if (row.id) editor.commands.toggleCompositeExpanded(row.id)\n  }\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.derived || (item.row.tagsVisible && (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.derived && (\n                <>\n                  {item.derived.toggleable && (\n                    <button\n                      type=\"button\"\n                      className={CHIP_BUTTON}\n                      aria-expanded={item.derived.open}\n                      aria-label={t(item.derived.open ? 'composites.derivation.collapse' : 'composites.derivation.expand')}\n                      title={t(item.derived.open ? 'composites.derivation.collapse' : 'composites.derivation.expand')}\n                      onClick={() => toggleExpanded(item.row)}\n                    >\n                      <Icon name={item.derived.open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'} className=\"size-3.5\" />\n                    </button>\n                  )}\n                  <span className={CHIP}>\n                    <Icon name=\"i-lucide-git-branch\" className=\"size-3.5\" />{t('composites.derivation.badge')}\n                  </span>\n                  {item.derived.stale && (\n                    <span className={cn(CHIP, 'text-(--sk-warning)')}>\n                      <Icon name=\"i-lucide-triangle-alert\" className=\"size-3.5\" />{t('composites.derivation.stale')}\n                    </span>\n                  )}\n                </>\n              )}\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.tagsVisible ? 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 && item.row.tagsVisible && (\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

@@ -4,7 +4,8 @@ import { Editor } from "@tiptap/core";
 /**
  * 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
+ * that names the field values the switch drops (`setCompositeKind` keeps the meta keys the new kind declares, plus
+ * `derivation` and `bib`, see `keepsMetaKey`) and
  * applies the change on „Ändern“.
  */
 export declare function CompositeDetails({ editor, row, editable }: {

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

@@ -1,9 +1,12 @@
+import { keepsMetaKey } from "../meta-keys.js";
+import { derivationOf } from "../derivation.js";
 import { compositeKindsOf } from "../nodes.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { Icon } from "../../../react/Icon.js";
 import { Button } from "../../../react/ui/button.js";
-import { compositeOfRow } from "../rows.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../react/ui/select.js";
+import { compositeBacklinks, compositeOfRow } from "../rows.js";
+import { DerivationBadge } from "./DerivationBadge.js";
 import { CompositeFieldEditor } from "./CompositeFieldEditor.js";
 import { CompositeSummaryEditor } from "./CompositeSummaryEditor.js";
 import { useEffect, useMemo, useState } from "react";
@@ -12,25 +15,35 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 /**
 * 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
+* that names the field values the switch drops (`setCompositeKind` keeps the meta keys the new kind declares, plus
+* `derivation` and `bib`, see `keepsMetaKey`) 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");
+	const fields = row.fields.filter((field) => field.key !== "status" && field.type !== "derivation");
+	const derivedNode = useMemo(() => {
+		const found = compositeOfRow(editor.state.doc, row);
+		return found && derivationOf(found.node) ? found.node : null;
+	}, [editor, row]);
+	/** The places that refer to the row's Baustein (chips in other blocks, `reference` fields), for the „Verweise“ list. */
+	const backlinks = useMemo(() => row.id ? compositeBacklinks(editor.state.doc, kinds, row.id) : [], [
+		editor,
+		kinds,
+		row
+	]);
 	/** 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“. */
+	/** Field values of the row that the pending kind does not keep (`keepsMetaKey`), 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]) => {
+		return Object.entries(row.meta).filter(([key, value]) => !keepsMetaKey(target, 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 {
@@ -116,6 +129,11 @@ function CompositeDetails({ editor, row, editable }) {
 					})]
 				})]
 			}),
+			derivedNode && /* @__PURE__ */ jsx(DerivationBadge, {
+				editor,
+				node: derivedNode,
+				detailed: true
+			}),
 			fields.map((field) => /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1",
 				children: [/* @__PURE__ */ jsx("span", {
@@ -139,6 +157,27 @@ function CompositeDetails({ editor, row, editable }) {
 					row,
 					readonly: !editable
 				})]
+			}),
+			backlinks.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: t("composites.reference.backlinks")
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-0.5",
+					children: backlinks.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "flex w-full min-w-0 items-baseline gap-1 rounded-sm text-left text-xs text-foreground hover:text-primary focus-visible:outline-2 focus-visible:outline-primary",
+						onClick: () => editor.commands.revealBlock(link.from),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: link.excerpt || "…"
+						}), link.locator && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-muted-foreground",
+							children: link.locator
+						})]
+					}) }, `${link.from}:${index}`))
+				})]
 			})
 		]
 	});