@ecsplico/editor 2.1.2 → 3.0.0

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

@@ -13,6 +13,6 @@ export declare function CompositeFieldEditor({ editor, row, field, disabled, siz
   field: CompositeMetaField;
   disabled?: boolean;
   size?: 'xs' | 'sm' | 'md';
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 //#endregion
 //# sourceMappingURL=CompositeFieldEditor.d.ts.map

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

@@ -1,10 +1,13 @@
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { cn } from "../../../react/ui/utils.js";
-import { setCompositeMetaField } from "../rows.js";
 import { Input } from "../../../react/ui/input.js";
 import { Textarea } from "../../../react/ui/textarea.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../react/ui/select.js";
+import { compositeOfRow, setCompositeMetaField } from "../rows.js";
 import { metaText } from "../meta-display.js";
+import { BibliographyEditor } from "./BibliographyEditor.js";
+import { DerivationBadge } from "./DerivationBadge.js";
+import { ReferenceFieldSelect } from "./ReferenceFieldSelect.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/composites/react/CompositeFieldEditor.tsx
@@ -97,6 +100,26 @@ function CompositeFieldEditor({ editor, row, field, disabled, size = "sm" }) {
 			children: option.label
 		}, option.value)) })]
 	});
+	if (field.type === "reference") return /* @__PURE__ */ jsx(ReferenceFieldSelect, {
+		editor,
+		row,
+		field,
+		disabled,
+		size
+	});
+	if (field.type === "bibliography") return /* @__PURE__ */ jsx(BibliographyEditor, {
+		editor,
+		row,
+		field,
+		disabled
+	});
+	if (field.type === "derivation") {
+		const derived = compositeOfRow(editor.state.doc, row)?.node;
+		return derived ? /* @__PURE__ */ jsx(DerivationBadge, {
+			editor,
+			node: derived
+		}) : null;
+	}
 	if (field.type === "textarea") return /* @__PURE__ */ jsx(Textarea, {
 		value: draft,
 		"aria-label": field.label,

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

@@ -1 +1 @@
-{"version":3,"file":"CompositeFieldEditor.js","names":[],"sources":["../../../../src/features/composites/react/CompositeFieldEditor.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Input } from '../../../react/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { Textarea } from '../../../react/ui/textarea'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { CompositeMetaField } from '../kinds'\nimport { metaText } from '../meta-display'\nimport { type CompositeRow, setCompositeMetaField } from '../rows'\n\n/** Radix Select has no empty-string value: an option with an empty value travels as this sentinel. */\nconst EMPTY = '__empty__'\n\nconst INPUT_SIZE = {\n  xs: 'h-6 px-2 text-xs md:text-xs',\n  sm: 'h-7 px-2.5 text-sm md:text-sm',\n  md: '',\n}\nconst TEXTAREA_SIZE = {\n  xs: 'px-2 py-1 text-xs md:text-xs',\n  sm: 'px-2.5 py-1.5 text-sm md:text-sm',\n  md: '',\n}\nconst SELECT_SIZE = {\n  xs: 'data-[size=sm]:h-6 text-xs',\n  sm: 'data-[size=sm]:h-7',\n  md: '',\n}\n\n/**\n * One meta field of a Baustein as an input that writes through `setCompositeMetaField`. Text-like inputs keep a local\n * draft and commit after typing pauses, on blur and on unmount, so the one-frame-late re-read of the rows never\n * overwrites what is being typed.\n */\nexport function CompositeFieldEditor({ editor, row, field, disabled, size = 'sm' }: {\n  editor: Editor\n  row: CompositeRow\n  field: CompositeMetaField\n  disabled?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}) {\n  const { t } = useEditorI18n()\n  const stored = metaText(row, field)\n  const [draft, setDraft] = useState(stored)\n  const draftRef = useRef(draft)\n  const typing = useRef(false)\n  const dirty = useRef(false)\n  const timer = useRef<number | undefined>(undefined)\n  // The latest props for the debounced commit and the flush on unmount; updated after every render, so the cleanup of a\n  // changed `row.key` still sees the previous row.\n  const target = useRef({ editor, row, field })\n  useEffect(() => {\n    target.current = { editor, row, field }\n  })\n\n  useEffect(() => {\n    if (!typing.current && !dirty.current) {\n      draftRef.current = stored\n      setDraft(stored)\n    }\n  }, [stored, row.key])\n\n  const commit = useCallback(() => {\n    clearTimeout(timer.current)\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, draftRef.current)\n  }, [])\n\n  // Flush on unmount and when the field is bound to another row.\n  useEffect(() => commit, [commit, editor, row.key, field.key])\n\n  function onInput(value: string) {\n    draftRef.current = value\n    setDraft(value)\n    dirty.current = true\n    clearTimeout(timer.current)\n    timer.current = window.setTimeout(commit, 400)\n  }\n\n  function onBlur() {\n    typing.current = false\n    commit()\n  }\n\n  function onChoice(value: string) {\n    setCompositeMetaField(editor, row, field.key, value === EMPTY ? '' : value)\n  }\n\n  if (field.type === 'select') {\n    return (\n      <Select value={stored} onValueChange={onChoice} disabled={disabled}>\n        <SelectTrigger size=\"sm\" className={cn('w-full', SELECT_SIZE[size])} aria-label={field.label}>\n          <SelectValue placeholder={t('composites.field.choose', { field: field.label })} />\n        </SelectTrigger>\n        <SelectContent>\n          {(field.options ?? []).map(option => (\n            <SelectItem key={option.value} value={option.value || EMPTY}>{option.label}</SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    )\n  }\n\n  if (field.type === 'textarea') {\n    return (\n      <Textarea\n        value={draft}\n        aria-label={field.label}\n        disabled={disabled}\n        rows={2}\n        className={cn('max-h-[8.5rem] min-h-0 w-full', TEXTAREA_SIZE[size])}\n        onFocus={() => {\n          typing.current = true\n        }}\n        onBlur={onBlur}\n        onChange={event => onInput(event.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Input\n      value={draft}\n      type={field.type}\n      aria-label={field.label}\n      disabled={disabled}\n      className={cn('w-full', INPUT_SIZE[size])}\n      onFocus={() => {\n        typing.current = true\n      }}\n      onBlur={onBlur}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter') commit()\n      }}\n      onChange={event => onInput(event.target.value)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,QAAQ;AAEd,MAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AACA,MAAM,gBAAgB;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AACA,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,SAAgB,qBAAqB,EAAE,QAAQ,KAAK,OAAO,UAAU,OAAO,QAMzE;CACD,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,SAAS,SAAS,KAAK,KAAK;CAClC,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,QAAQ,OAAO,KAAK;CAC1B,MAAM,QAAQ,OAA2B,KAAA,CAAS;CAGlD,MAAM,SAAS,OAAO;EAAE;EAAQ;EAAK;CAAM,CAAC;CAC5C,gBAAgB;EACd,OAAO,UAAU;GAAE;GAAQ;GAAK;EAAM;CACxC,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,OAAO,WAAW,CAAC,MAAM,SAAS;GACrC,SAAS,UAAU;GACnB,SAAS,MAAM;EACjB;CACF,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC;CAEpB,MAAM,SAAS,kBAAkB;EAC/B,aAAa,MAAM,OAAO;EAC1B,IAAI,CAAC,MAAM,SAAS;EACpB,MAAM,UAAU;EAChB,MAAM,UAAU,OAAO;EACvB,IAAI,CAAC,QAAQ,OAAO,aAAa,sBAAsB,QAAQ,QAAQ,QAAQ,KAAK,QAAQ,MAAM,KAAK,SAAS,OAAO;CACzH,GAAG,CAAC,CAAC;CAGL,gBAAgB,QAAQ;EAAC;EAAQ;EAAQ,IAAI;EAAK,MAAM;CAAG,CAAC;CAE5D,SAAS,QAAQ,OAAe;EAC9B,SAAS,UAAU;EACnB,SAAS,KAAK;EACd,MAAM,UAAU;EAChB,aAAa,MAAM,OAAO;EAC1B,MAAM,UAAU,OAAO,WAAW,QAAQ,GAAG;CAC/C;CAEA,SAAS,SAAS;EAChB,OAAO,UAAU;EACjB,OAAO;CACT;CAEA,SAAS,SAAS,OAAe;EAC/B,sBAAsB,QAAQ,KAAK,MAAM,KAAK,UAAU,QAAQ,KAAK,KAAK;CAC5E;CAEA,IAAI,MAAM,SAAS,UACjB,OACE,qBAAC,QAAD;EAAQ,OAAO;EAAQ,eAAe;EAAoB;EAA1D,UAAA,CACE,oBAAC,eAAD;GAAe,MAAK;GAAK,WAAW,GAAG,UAAU,YAAY,KAAK;GAAG,cAAY,MAAM;GACrF,UAAA,oBAAC,aAAD,EAAa,aAAa,EAAE,2BAA2B,EAAE,OAAO,MAAM,MAAM,CAAC,EAAI,CAAA;EACpE,CAAA,GACf,oBAAC,eAAD,EAAA,WACI,MAAM,WAAW,CAAC,EAAA,CAAG,KAAI,WACzB,oBAAC,YAAD;GAA+B,OAAO,OAAO,SAAS;GAAQ,UAAA,OAAO;EAAkB,GAAtE,OAAO,KAA+D,CACxF,EACY,CAAA,CACT;;CAIZ,IAAI,MAAM,SAAS,YACjB,OACE,oBAAC,UAAD;EACE,OAAO;EACP,cAAY,MAAM;EACR;EACV,MAAM;EACN,WAAW,GAAG,iCAAiC,cAAc,KAAK;EAClE,eAAe;GACb,OAAO,UAAU;EACnB;EACQ;EACR,WAAU,UAAS,QAAQ,MAAM,OAAO,KAAK;CAC9C,CAAA;CAIL,OACE,oBAAC,OAAD;EACE,OAAO;EACP,MAAM,MAAM;EACZ,cAAY,MAAM;EACR;EACV,WAAW,GAAG,UAAU,WAAW,KAAK;EACxC,eAAe;GACb,OAAO,UAAU;EACnB;EACQ;EACR,YAAY,UAAU;GACpB,IAAI,MAAM,QAAQ,SAAS,OAAO;EACpC;EACA,WAAU,UAAS,QAAQ,MAAM,OAAO,KAAK;CAC9C,CAAA;AAEL"}
+{"version":3,"file":"CompositeFieldEditor.js","names":[],"sources":["../../../../src/features/composites/react/CompositeFieldEditor.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Input } from '../../../react/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { Textarea } from '../../../react/ui/textarea'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { CompositeMetaField } from '../kinds'\nimport { metaText } from '../meta-display'\nimport { compositeOfRow, type CompositeRow, setCompositeMetaField } from '../rows'\nimport { BibliographyEditor } from './BibliographyEditor'\nimport { DerivationBadge } from './DerivationBadge'\nimport { ReferenceFieldSelect } from './ReferenceFieldSelect'\n\n/** Radix Select has no empty-string value: an option with an empty value travels as this sentinel. */\nconst EMPTY = '__empty__'\n\nconst INPUT_SIZE = {\n  xs: 'h-6 px-2 text-xs md:text-xs',\n  sm: 'h-7 px-2.5 text-sm md:text-sm',\n  md: '',\n}\nconst TEXTAREA_SIZE = {\n  xs: 'px-2 py-1 text-xs md:text-xs',\n  sm: 'px-2.5 py-1.5 text-sm md:text-sm',\n  md: '',\n}\nconst SELECT_SIZE = {\n  xs: 'data-[size=sm]:h-6 text-xs',\n  sm: 'data-[size=sm]:h-7',\n  md: '',\n}\n\n/**\n * One meta field of a Baustein as an input that writes through `setCompositeMetaField`. Text-like inputs keep a local\n * draft and commit after typing pauses, on blur and on unmount, so the one-frame-late re-read of the rows never\n * overwrites what is being typed.\n */\nexport function CompositeFieldEditor({ editor, row, field, disabled, size = 'sm' }: {\n  editor: Editor\n  row: CompositeRow\n  field: CompositeMetaField\n  disabled?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}) {\n  const { t } = useEditorI18n()\n  const stored = metaText(row, field)\n  const [draft, setDraft] = useState(stored)\n  const draftRef = useRef(draft)\n  const typing = useRef(false)\n  const dirty = useRef(false)\n  const timer = useRef<number | undefined>(undefined)\n  // The latest props for the debounced commit and the flush on unmount; updated after every render, so the cleanup of a\n  // changed `row.key` still sees the previous row.\n  const target = useRef({ editor, row, field })\n  useEffect(() => {\n    target.current = { editor, row, field }\n  })\n\n  useEffect(() => {\n    if (!typing.current && !dirty.current) {\n      draftRef.current = stored\n      setDraft(stored)\n    }\n  }, [stored, row.key])\n\n  const commit = useCallback(() => {\n    clearTimeout(timer.current)\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, draftRef.current)\n  }, [])\n\n  // Flush on unmount and when the field is bound to another row.\n  useEffect(() => commit, [commit, editor, row.key, field.key])\n\n  function onInput(value: string) {\n    draftRef.current = value\n    setDraft(value)\n    dirty.current = true\n    clearTimeout(timer.current)\n    timer.current = window.setTimeout(commit, 400)\n  }\n\n  function onBlur() {\n    typing.current = false\n    commit()\n  }\n\n  function onChoice(value: string) {\n    setCompositeMetaField(editor, row, field.key, value === EMPTY ? '' : value)\n  }\n\n  if (field.type === 'select') {\n    return (\n      <Select value={stored} onValueChange={onChoice} disabled={disabled}>\n        <SelectTrigger size=\"sm\" className={cn('w-full', SELECT_SIZE[size])} aria-label={field.label}>\n          <SelectValue placeholder={t('composites.field.choose', { field: field.label })} />\n        </SelectTrigger>\n        <SelectContent>\n          {(field.options ?? []).map(option => (\n            <SelectItem key={option.value} value={option.value || EMPTY}>{option.label}</SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    )\n  }\n\n  if (field.type === 'reference') {\n    return <ReferenceFieldSelect editor={editor} row={row} field={field} disabled={disabled} size={size} />\n  }\n\n  if (field.type === 'bibliography') {\n    return <BibliographyEditor editor={editor} row={row} field={field} disabled={disabled} />\n  }\n\n  if (field.type === 'derivation') {\n    const derived = compositeOfRow(editor.state.doc, row)?.node\n    return derived ? <DerivationBadge editor={editor} node={derived} /> : null\n  }\n\n  if (field.type === 'textarea') {\n    return (\n      <Textarea\n        value={draft}\n        aria-label={field.label}\n        disabled={disabled}\n        rows={2}\n        className={cn('max-h-[8.5rem] min-h-0 w-full', TEXTAREA_SIZE[size])}\n        onFocus={() => {\n          typing.current = true\n        }}\n        onBlur={onBlur}\n        onChange={event => onInput(event.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Input\n      value={draft}\n      type={field.type}\n      aria-label={field.label}\n      disabled={disabled}\n      className={cn('w-full', INPUT_SIZE[size])}\n      onFocus={() => {\n        typing.current = true\n      }}\n      onBlur={onBlur}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter') commit()\n      }}\n      onChange={event => onInput(event.target.value)}\n    />\n  )\n}\n"],"mappings":"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"}

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

@@ -1,15 +1,16 @@
+import { normalizeTagName } from "../../../core/tag-name.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { cn } from "../../../react/ui/utils.js";
 import { Icon } from "../../../react/Icon.js";
-import { normalizeTagName } from "../../../core/tag-name.js";
-import { compositeFieldText } from "../inspector-model.js";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../../react/ui/popover.js";
 import { Input } from "../../../react/ui/input.js";
 import { Textarea } from "../../../react/ui/textarea.js";
+import { Command, CommandInput, CommandItem, CommandList } from "../../../react/ui/command.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../../react/ui/popover.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../react/ui/select.js";
 import { Label } from "../../../react/ui/label.js";
 import { Badge } from "../../../react/ui/badge.js";
-import { Command, CommandInput, CommandItem, CommandList } from "../../../react/ui/command.js";
+import { CompositeFieldEditor } from "./CompositeFieldEditor.js";
+import { compositeFieldText, isStructuredField } from "../inspector-model.js";
 import { useCompositeInspector } from "./use-composite-inspector.js";
 import { useEffect, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -299,7 +300,12 @@ function CompositeInspector({ editor, documentFocused, document, className }) {
 					}),
 					focused.fields.map((field) => /* @__PURE__ */ jsx(FormField, {
 						label: field.label,
-						children: field.type === "select" ? /* @__PURE__ */ jsxs(Select, {
+						children: isStructuredField(field) ? editor && /* @__PURE__ */ jsx(CompositeFieldEditor, {
+							editor,
+							row: focused,
+							field,
+							disabled: !editable
+						}) : field.type === "select" ? /* @__PURE__ */ jsxs(Select, {
 							value: compositeFieldText(focused, field),
 							onValueChange: (value) => inspector.setField(field, value),
 							disabled: !editable,

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

@@ -1 +1 @@
-{"version":3,"file":"CompositeInspector.js","names":[],"sources":["../../../../src/features/composites/react/CompositeInspector.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { type CSSProperties, type ReactNode, useEffect, useId, useState } from 'react'\nimport { normalizeTagName } from '../../../core/tag-name'\nimport { Icon } from '../../../react/Icon'\nimport { Badge } from '../../../react/ui/badge'\nimport { Command, CommandInput, CommandItem, CommandList } from '../../../react/ui/command'\nimport { Input } from '../../../react/ui/input'\nimport { Label } from '../../../react/ui/label'\nimport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '../../../react/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { Textarea } from '../../../react/ui/textarea'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { CompositeMetaField } from '../kinds'\nimport { compositeFieldText } from '../inspector-model'\nimport { useCompositeInspector } from './use-composite-inspector'\n\nconst HEX_COLOR = /^#[0-9a-f]{3,8}$/i\n// Same tint as the chip in the document (`--mention-color`), only invalid colors fall back to the primary color.\nconst mentionStyle = (color: string | null) => ({ '--mention-color': color && HEX_COLOR.test(color) ? color : 'var(--sk-primary)' }) as CSSProperties\n\n/** A label (+ help) above its control; the counterpart of Nuxt UI's `UFormField` (size `sm`). */\nfunction FormField({ label, help, children }: { label: string, help?: string, children: ReactNode }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label className=\"text-xs font-medium text-foreground\">{label}</Label>\n      {children}\n      {help && <p className=\"text-xs text-muted-foreground\">{help}</p>}\n    </div>\n  )\n}\n\n/**\n * A meta field input that writes through on every change like the Vue `UInput`/`UTextarea` bound to the row. The\n * document is re-read asynchronously (once per frame), so a purely controlled input would snap back while typing:\n * it keeps the typed value locally and follows the document whenever the document's value changes.\n */\nfunction MetaFieldInput({ field, value, readOnly, onChange }: {\n  field: CompositeMetaField\n  value: string\n  readOnly: boolean\n  onChange: (value: string) => void\n}) {\n  const [local, setLocal] = useState(value)\n  useEffect(() => setLocal(value), [value])\n  const set = (next: string) => {\n    setLocal(next)\n    onChange(next)\n  }\n  return field.type === 'textarea'\n    ? (\n        <Textarea\n          value={local}\n          aria-label={field.label}\n          rows={2}\n          className=\"max-h-40 min-h-12 w-full resize-none overflow-y-auto text-sm md:text-sm\"\n          readOnly={readOnly}\n          onChange={event => set(event.target.value)}\n        />\n      )\n    : (\n        <Input\n          value={local}\n          type={field.type}\n          aria-label={field.label}\n          className=\"h-7 w-full text-sm md:text-sm\"\n          readOnly={readOnly}\n          onChange={event => set(event.target.value)}\n        />\n      )\n}\n\n/**\n * Side panel with the metadata of the document *or* of the Baustein under the caret — one at a time — connected to\n * `editor`. Fills the height of its container and scrolls on its own; the width comes from the host. Open/close is\n * the host's business. The `document` prop carries host-provided document facts (title, folder, dates, presence) at\n * the top of the „Dokument“ section: render them as a `<dl>` with the same grid as below to look native.\n *\n * The „Baustein“ section shows while the caret is in a Baustein of the editor; the „Dokument“ section shows before\n * the editor was ever focused, while the caret is in editor text outside any Baustein, and while `documentFocused`.\n * `documentFocused`: the host's document-level input (its title field) has the focus. While it is true the panel\n * shows the „Dokument“ section and keeps showing it after the input blurs, until the caret returns to the editor.\n */\nexport function CompositeInspector({ editor, documentFocused, document, className }: {\n  editor?: Editor\n  documentFocused?: boolean\n  /** Document facts known to the host only, rendered above the facts derived from the editor. */\n  document?: ReactNode\n  className?: string\n}) {\n  const { t } = useEditorI18n()\n  const { state, inspector } = useCompositeInspector(editor, documentFocused)\n  const { section, editable, draft, searchTerm: term, tagItems, kindOptions, summarized, hasSummary, rows, tags, kinds, mentions, focused } = state\n  const [tagsOpen, setTagsOpen] = useState(false)\n  const uid = useId()\n\n  return (\n    <aside className={cn('flex h-full min-h-0 flex-col overflow-y-auto text-sm', className)} aria-label={t('composites.inspector.label')}>\n      {section === 'document'\n        ? (\n            <section className=\"flex-1 p-4\" aria-labelledby={`${uid}-document`}>\n              <h2 id={`${uid}-document`} className=\"mb-3 text-sm font-semibold text-foreground\">\n                {t('composites.inspector.document')}\n              </h2>\n              <div className=\"flex flex-col gap-y-2\">\n                {document}\n                <dl className=\"grid grid-cols-[6.5rem_minmax(0,1fr)] items-start gap-x-3 gap-y-2\">\n                  <dt className=\"min-h-6 leading-6 text-muted-foreground\">\n                    {t('composites.inspector.composites')}\n                  </dt>\n                  {kinds.length\n                    ? (\n                        <dd className=\"m-0 flex min-w-0 flex-col gap-y-1\">\n                          {kinds.map(kind => (\n                            <span key={kind.id} className=\"flex min-h-6 min-w-0 items-center gap-2\">\n                              <Icon name={kind.icon} className=\"size-4 shrink-0 text-muted-foreground\" />\n                              <span className=\"min-w-0 flex-1 truncate text-foreground\">{kind.label}</span>\n                              <span className=\"text-muted-foreground tabular-nums\">{kind.count}</span>\n                            </span>\n                          ))}\n                          <span className=\"min-h-6 leading-6 text-muted-foreground tabular-nums\">\n                            {t('composites.inspector.summarized', { n: summarized, total: rows.length })}\n                          </span>\n                        </dd>\n                      )\n                    : (\n                        <dd className=\"m-0 min-h-6 leading-6 text-muted-foreground/70\">\n                          {t('composites.inspector.none')}\n                        </dd>\n                      )}\n\n                  <dt className=\"min-h-6 leading-6 text-muted-foreground\">\n                    {t('composites.tags.label')}\n                  </dt>\n                  {tags.length\n                    ? (\n                        <dd className=\"m-0 flex min-w-0 flex-wrap items-center gap-1\">\n                          {tags.map(tag => <Badge key={tag} variant=\"secondary\" className=\"max-w-full\">{`#${tag}`}</Badge>)}\n                        </dd>\n                      )\n                    : (\n                        <dd className=\"m-0 min-h-6 leading-6 text-muted-foreground/70\">\n                          {t('composites.inspector.none')}\n                        </dd>\n                      )}\n\n                  <dt className=\"min-h-6 leading-6 text-muted-foreground\">\n                    {t('composites.inspector.mentions')}\n                  </dt>\n                  {mentions.length\n                    ? (\n                        <dd className=\"m-0 flex min-w-0 flex-wrap items-center gap-1\">\n                          {mentions.map(mention => (\n                            <span\n                              key={mention.id}\n                              className=\"inline-flex max-w-full items-center gap-1.5 truncate rounded-sm px-1.5 py-0.5 text-xs font-medium text-foreground\"\n                              style={{ ...mentionStyle(mention.color), background: 'color-mix(in oklab, var(--mention-color) 15%, transparent)' }}\n                            >\n                              <span className=\"size-1.5 shrink-0 rounded-full\" style={{ background: 'var(--mention-color)' }} />\n                              <span className=\"truncate\">@{mention.label}</span>\n                            </span>\n                          ))}\n                        </dd>\n                      )\n                    : (\n                        <dd className=\"m-0 min-h-6 leading-6 text-muted-foreground/70\">\n                          {t('composites.inspector.none')}\n                        </dd>\n                      )}\n                </dl>\n              </div>\n            </section>\n          )\n        : focused && (\n          <section className=\"flex-1 p-4\" aria-labelledby={`${uid}-composite`}>\n            <h2 id={`${uid}-composite`} className=\"mb-3 text-sm font-semibold text-foreground\">\n              {t('composites.inspector.composite')}\n            </h2>\n\n            <div key={focused.key} className=\"flex flex-col gap-3\">\n              <FormField label={t('composites.inspector.kind')}>\n                <Select value={focused.kind} onValueChange={inspector.setKind} disabled={!editable}>\n                  <SelectTrigger size=\"sm\" className=\"w-full\" aria-label={t('composites.kind.select')}>\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {kindOptions.map(item => (\n                      <SelectItem key={item.value} value={item.value}>\n                        <Icon name={item.icon} />\n                        {item.label}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </FormField>\n\n              <FormField label={t('composites.inspector.title')} help={editable ? t('composites.inspector.titleHelp') : undefined}>\n                <p className={cn('min-h-6 truncate leading-6', focused.title ? 'text-foreground' : 'text-muted-foreground/70')} title={focused.title}>\n                  {focused.title || t('composites.inspector.untitled')}\n                </p>\n              </FormField>\n\n              <FormField\n                label={t('composites.inspector.description')}\n                help={focused.descriptionTextOnly ? undefined : t('composites.inspector.descriptionHelp')}\n              >\n                <Textarea\n                  value={draft}\n                  rows={3}\n                  className=\"max-h-52 min-h-[4.5rem] w-full resize-none overflow-y-auto text-sm md:text-sm\"\n                  placeholder={t('composites.inspector.description')}\n                  aria-label={t('composites.inspector.description')}\n                  readOnly={!editable || !focused.descriptionTextOnly}\n                  onChange={event => inspector.inputDescription(event.target.value)}\n                  onBlur={inspector.blurDescription}\n                />\n              </FormField>\n\n              <FormField label={t('composites.tags.label')}>\n                <Popover\n                  open={tagsOpen}\n                  onOpenChange={(isOpen) => {\n                    setTagsOpen(isOpen)\n                    if (isOpen) inspector.searchTags()\n                  }}\n                >\n                  <PopoverAnchor asChild>\n                    <div className={cn('flex min-h-7 w-full flex-wrap items-center gap-1 rounded-lg border border-input px-2 py-1 dark:bg-input/30', !editable && 'opacity-50')}>\n                      <Icon name=\"i-lucide-hash\" className=\"size-3.5 text-muted-foreground\" />\n                      {focused.tags.map(tag => (\n                        <Badge key={tag} variant=\"secondary\" className=\"max-w-full gap-0.5 pr-1\">\n                          <span className=\"truncate\">{tag}</span>\n                          <button\n                            type=\"button\"\n                            className=\"inline-flex cursor-pointer items-center rounded-full outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed\"\n                            aria-label={t('composites.tag.remove', { tag })}\n                            disabled={!editable}\n                            onClick={() => inspector.setTags(focused.tags.filter(item => item !== tag))}\n                          >\n                            <Icon name=\"i-lucide-x\" className=\"size-3\" />\n                          </button>\n                        </Badge>\n                      ))}\n                      <PopoverTrigger asChild>\n                        <button\n                          type=\"button\"\n                          role=\"combobox\"\n                          aria-expanded={tagsOpen}\n                          aria-label={t('composites.tags.label')}\n                          disabled={!editable}\n                          className=\"min-w-12 flex-1 cursor-text self-stretch rounded text-left text-sm text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed\"\n                        >\n                          {focused.tags.length ? '' : t('composites.tags.label')}\n                        </button>\n                      </PopoverTrigger>\n                    </div>\n                  </PopoverAnchor>\n                  <PopoverContent align=\"start\" className=\"w-64 gap-0 p-0\">\n                    {/* `shouldFilter` off: the list is the metadata source's answer to the search term. */}\n                    <Command shouldFilter={false}>\n                      <CommandInput\n                        value={term}\n                        onValueChange={inspector.setSearchTerm}\n                        placeholder={t('composites.tags.label')}\n                        aria-label={t('composites.tags.label')}\n                        onKeyDown={(event) => {\n                          if (event.key === 'Backspace' && !term && focused.tags.length) inspector.setTags(focused.tags.slice(0, -1))\n                        }}\n                      />\n                      <CommandList>\n                        {tagItems.map((tag) => {\n                          const selected = focused.tags.includes(tag)\n                          return (\n                            <CommandItem\n                              key={tag}\n                              value={tag}\n                              data-checked={selected}\n                              onSelect={() => inspector.setTags(selected ? focused.tags.filter(item => item !== tag) : [...focused.tags, tag])}\n                            >\n                              {tag}\n                            </CommandItem>\n                          )\n                        })}\n                        {term.trim() && (\n                          <CommandItem value={`__create__:${term}`} onSelect={() => inspector.createTag(term)}>\n                            <Icon name=\"i-lucide-plus\" />\n                            {t('composites.tags.create', { tag: normalizeTagName(term) || term })}\n                          </CommandItem>\n                        )}\n                      </CommandList>\n                    </Command>\n                  </PopoverContent>\n                </Popover>\n              </FormField>\n\n              {focused.fields.map(field => (\n                <FormField key={field.key} label={field.label}>\n                  {field.type === 'select'\n                    ? (\n                        <Select value={compositeFieldText(focused, field)} onValueChange={value => inspector.setField(field, value)} disabled={!editable}>\n                          <SelectTrigger size=\"sm\" className=\"w-full\" aria-label={field.label}>\n                            <SelectValue placeholder=\"–\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            {(field.options ?? []).map(option => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}\n                          </SelectContent>\n                        </Select>\n                      )\n                    : (\n                        <MetaFieldInput\n                          field={field}\n                          value={compositeFieldText(focused, field)}\n                          readOnly={!editable}\n                          onChange={value => inspector.setField(field, value)}\n                        />\n                      )}\n                </FormField>\n              ))}\n\n              <div className=\"flex items-center gap-2 border-t border-border pt-3\">\n                <Icon name=\"i-lucide-sparkles\" className=\"size-4 shrink-0 text-muted-foreground\" />\n                <span className=\"text-muted-foreground\">{t('composites.inspector.aiStatus')}</span>\n                <span className={cn('ml-auto inline-flex items-center gap-1.5', hasSummary ? 'text-foreground' : 'text-muted-foreground/70')}>\n                  <span className={cn('size-2 rounded-full', hasSummary ? 'bg-(--sk-success)' : 'bg-border')} />\n                  {hasSummary ? t('composites.inspector.summaryPresent') : t('composites.inspector.summaryMissing')}\n                </span>\n              </div>\n            </div>\n          </section>\n        )}\n    </aside>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"CompositeInspector.js","names":[],"sources":["../../../../src/features/composites/react/CompositeInspector.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { type CSSProperties, type ReactNode, useEffect, useId, useState } from 'react'\nimport { normalizeTagName } from '../../../core/tag-name'\nimport { Icon } from '../../../react/Icon'\nimport { Badge } from '../../../react/ui/badge'\nimport { Command, CommandInput, CommandItem, CommandList } from '../../../react/ui/command'\nimport { Input } from '../../../react/ui/input'\nimport { Label } from '../../../react/ui/label'\nimport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '../../../react/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { Textarea } from '../../../react/ui/textarea'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { CompositeMetaField } from '../kinds'\nimport { compositeFieldText, isStructuredField } from '../inspector-model'\nimport { CompositeFieldEditor } from './CompositeFieldEditor'\nimport { useCompositeInspector } from './use-composite-inspector'\n\nconst HEX_COLOR = /^#[0-9a-f]{3,8}$/i\n// Same tint as the chip in the document (`--mention-color`), only invalid colors fall back to the primary color.\nconst mentionStyle = (color: string | null) => ({ '--mention-color': color && HEX_COLOR.test(color) ? color : 'var(--sk-primary)' }) as CSSProperties\n\n/** A label (+ help) above its control; the counterpart of Nuxt UI's `UFormField` (size `sm`). */\nfunction FormField({ label, help, children }: { label: string, help?: string, children: ReactNode }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label className=\"text-xs font-medium text-foreground\">{label}</Label>\n      {children}\n      {help && <p className=\"text-xs text-muted-foreground\">{help}</p>}\n    </div>\n  )\n}\n\n/**\n * A meta field input that writes through on every change like the Vue `UInput`/`UTextarea` bound to the row. The\n * document is re-read asynchronously (once per frame), so a purely controlled input would snap back while typing:\n * it keeps the typed value locally and follows the document whenever the document's value changes.\n */\nfunction MetaFieldInput({ field, value, readOnly, onChange }: {\n  field: CompositeMetaField\n  value: string\n  readOnly: boolean\n  onChange: (value: string) => void\n}) {\n  const [local, setLocal] = useState(value)\n  useEffect(() => setLocal(value), [value])\n  const set = (next: string) => {\n    setLocal(next)\n    onChange(next)\n  }\n  return field.type === 'textarea'\n    ? (\n        <Textarea\n          value={local}\n          aria-label={field.label}\n          rows={2}\n          className=\"max-h-40 min-h-12 w-full resize-none overflow-y-auto text-sm md:text-sm\"\n          readOnly={readOnly}\n          onChange={event => set(event.target.value)}\n        />\n      )\n    : (\n        <Input\n          value={local}\n          type={field.type}\n          aria-label={field.label}\n          className=\"h-7 w-full text-sm md:text-sm\"\n          readOnly={readOnly}\n          onChange={event => set(event.target.value)}\n        />\n      )\n}\n\n/**\n * Side panel with the metadata of the document *or* of the Baustein under the caret — one at a time — connected to\n * `editor`. Fills the height of its container and scrolls on its own; the width comes from the host. Open/close is\n * the host's business. The `document` prop carries host-provided document facts (title, folder, dates, presence) at\n * the top of the „Dokument“ section: render them as a `<dl>` with the same grid as below to look native.\n *\n * The „Baustein“ section shows while the caret is in a Baustein of the editor; the „Dokument“ section shows before\n * the editor was ever focused, while the caret is in editor text outside any Baustein, and while `documentFocused`.\n * `documentFocused`: the host's document-level input (its title field) has the focus. While it is true the panel\n * shows the „Dokument“ section and keeps showing it after the input blurs, until the caret returns to the editor.\n */\nexport function CompositeInspector({ editor, documentFocused, document, className }: {\n  editor?: Editor\n  documentFocused?: boolean\n  /** Document facts known to the host only, rendered above the facts derived from the editor. */\n  document?: ReactNode\n  className?: string\n}) {\n  const { t } = useEditorI18n()\n  const { state, inspector } = useCompositeInspector(editor, documentFocused)\n  const { section, editable, draft, searchTerm: term, tagItems, kindOptions, summarized, hasSummary, rows, tags, kinds, mentions, focused } = state\n  const [tagsOpen, setTagsOpen] = useState(false)\n  const uid = useId()\n\n  return (\n    <aside className={cn('flex h-full min-h-0 flex-col overflow-y-auto text-sm', className)} aria-label={t('composites.inspector.label')}>\n      {section === 'document'\n        ? (\n            <section className=\"flex-1 p-4\" aria-labelledby={`${uid}-document`}>\n              <h2 id={`${uid}-document`} className=\"mb-3 text-sm font-semibold text-foreground\">\n                {t('composites.inspector.document')}\n              </h2>\n              <div className=\"flex flex-col gap-y-2\">\n                {document}\n                <dl className=\"grid grid-cols-[6.5rem_minmax(0,1fr)] items-start gap-x-3 gap-y-2\">\n                  <dt className=\"min-h-6 leading-6 text-muted-foreground\">\n                    {t('composites.inspector.composites')}\n                  </dt>\n                  {kinds.length\n                    ? (\n                        <dd className=\"m-0 flex min-w-0 flex-col gap-y-1\">\n                          {kinds.map(kind => (\n                            <span key={kind.id} className=\"flex min-h-6 min-w-0 items-center gap-2\">\n                              <Icon name={kind.icon} className=\"size-4 shrink-0 text-muted-foreground\" />\n                              <span className=\"min-w-0 flex-1 truncate text-foreground\">{kind.label}</span>\n                              <span className=\"text-muted-foreground tabular-nums\">{kind.count}</span>\n                            </span>\n                          ))}\n                          <span className=\"min-h-6 leading-6 text-muted-foreground tabular-nums\">\n                            {t('composites.inspector.summarized', { n: summarized, total: rows.length })}\n                          </span>\n                        </dd>\n                      )\n                    : (\n                        <dd className=\"m-0 min-h-6 leading-6 text-muted-foreground/70\">\n                          {t('composites.inspector.none')}\n                        </dd>\n                      )}\n\n                  <dt className=\"min-h-6 leading-6 text-muted-foreground\">\n                    {t('composites.tags.label')}\n                  </dt>\n                  {tags.length\n                    ? (\n                        <dd className=\"m-0 flex min-w-0 flex-wrap items-center gap-1\">\n                          {tags.map(tag => <Badge key={tag} variant=\"secondary\" className=\"max-w-full\">{`#${tag}`}</Badge>)}\n                        </dd>\n                      )\n                    : (\n                        <dd className=\"m-0 min-h-6 leading-6 text-muted-foreground/70\">\n                          {t('composites.inspector.none')}\n                        </dd>\n                      )}\n\n                  <dt className=\"min-h-6 leading-6 text-muted-foreground\">\n                    {t('composites.inspector.mentions')}\n                  </dt>\n                  {mentions.length\n                    ? (\n                        <dd className=\"m-0 flex min-w-0 flex-wrap items-center gap-1\">\n                          {mentions.map(mention => (\n                            <span\n                              key={mention.id}\n                              className=\"inline-flex max-w-full items-center gap-1.5 truncate rounded-sm px-1.5 py-0.5 text-xs font-medium text-foreground\"\n                              style={{ ...mentionStyle(mention.color), background: 'color-mix(in oklab, var(--mention-color) 15%, transparent)' }}\n                            >\n                              <span className=\"size-1.5 shrink-0 rounded-full\" style={{ background: 'var(--mention-color)' }} />\n                              <span className=\"truncate\">@{mention.label}</span>\n                            </span>\n                          ))}\n                        </dd>\n                      )\n                    : (\n                        <dd className=\"m-0 min-h-6 leading-6 text-muted-foreground/70\">\n                          {t('composites.inspector.none')}\n                        </dd>\n                      )}\n                </dl>\n              </div>\n            </section>\n          )\n        : focused && (\n          <section className=\"flex-1 p-4\" aria-labelledby={`${uid}-composite`}>\n            <h2 id={`${uid}-composite`} className=\"mb-3 text-sm font-semibold text-foreground\">\n              {t('composites.inspector.composite')}\n            </h2>\n\n            <div key={focused.key} className=\"flex flex-col gap-3\">\n              <FormField label={t('composites.inspector.kind')}>\n                <Select value={focused.kind} onValueChange={inspector.setKind} disabled={!editable}>\n                  <SelectTrigger size=\"sm\" className=\"w-full\" aria-label={t('composites.kind.select')}>\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {kindOptions.map(item => (\n                      <SelectItem key={item.value} value={item.value}>\n                        <Icon name={item.icon} />\n                        {item.label}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </FormField>\n\n              <FormField label={t('composites.inspector.title')} help={editable ? t('composites.inspector.titleHelp') : undefined}>\n                <p className={cn('min-h-6 truncate leading-6', focused.title ? 'text-foreground' : 'text-muted-foreground/70')} title={focused.title}>\n                  {focused.title || t('composites.inspector.untitled')}\n                </p>\n              </FormField>\n\n              <FormField\n                label={t('composites.inspector.description')}\n                help={focused.descriptionTextOnly ? undefined : t('composites.inspector.descriptionHelp')}\n              >\n                <Textarea\n                  value={draft}\n                  rows={3}\n                  className=\"max-h-52 min-h-[4.5rem] w-full resize-none overflow-y-auto text-sm md:text-sm\"\n                  placeholder={t('composites.inspector.description')}\n                  aria-label={t('composites.inspector.description')}\n                  readOnly={!editable || !focused.descriptionTextOnly}\n                  onChange={event => inspector.inputDescription(event.target.value)}\n                  onBlur={inspector.blurDescription}\n                />\n              </FormField>\n\n              <FormField label={t('composites.tags.label')}>\n                <Popover\n                  open={tagsOpen}\n                  onOpenChange={(isOpen) => {\n                    setTagsOpen(isOpen)\n                    if (isOpen) inspector.searchTags()\n                  }}\n                >\n                  <PopoverAnchor asChild>\n                    <div className={cn('flex min-h-7 w-full flex-wrap items-center gap-1 rounded-lg border border-input px-2 py-1 dark:bg-input/30', !editable && 'opacity-50')}>\n                      <Icon name=\"i-lucide-hash\" className=\"size-3.5 text-muted-foreground\" />\n                      {focused.tags.map(tag => (\n                        <Badge key={tag} variant=\"secondary\" className=\"max-w-full gap-0.5 pr-1\">\n                          <span className=\"truncate\">{tag}</span>\n                          <button\n                            type=\"button\"\n                            className=\"inline-flex cursor-pointer items-center rounded-full outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed\"\n                            aria-label={t('composites.tag.remove', { tag })}\n                            disabled={!editable}\n                            onClick={() => inspector.setTags(focused.tags.filter(item => item !== tag))}\n                          >\n                            <Icon name=\"i-lucide-x\" className=\"size-3\" />\n                          </button>\n                        </Badge>\n                      ))}\n                      <PopoverTrigger asChild>\n                        <button\n                          type=\"button\"\n                          role=\"combobox\"\n                          aria-expanded={tagsOpen}\n                          aria-label={t('composites.tags.label')}\n                          disabled={!editable}\n                          className=\"min-w-12 flex-1 cursor-text self-stretch rounded text-left text-sm text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed\"\n                        >\n                          {focused.tags.length ? '' : t('composites.tags.label')}\n                        </button>\n                      </PopoverTrigger>\n                    </div>\n                  </PopoverAnchor>\n                  <PopoverContent align=\"start\" className=\"w-64 gap-0 p-0\">\n                    {/* `shouldFilter` off: the list is the metadata source's answer to the search term. */}\n                    <Command shouldFilter={false}>\n                      <CommandInput\n                        value={term}\n                        onValueChange={inspector.setSearchTerm}\n                        placeholder={t('composites.tags.label')}\n                        aria-label={t('composites.tags.label')}\n                        onKeyDown={(event) => {\n                          if (event.key === 'Backspace' && !term && focused.tags.length) inspector.setTags(focused.tags.slice(0, -1))\n                        }}\n                      />\n                      <CommandList>\n                        {tagItems.map((tag) => {\n                          const selected = focused.tags.includes(tag)\n                          return (\n                            <CommandItem\n                              key={tag}\n                              value={tag}\n                              data-checked={selected}\n                              onSelect={() => inspector.setTags(selected ? focused.tags.filter(item => item !== tag) : [...focused.tags, tag])}\n                            >\n                              {tag}\n                            </CommandItem>\n                          )\n                        })}\n                        {term.trim() && (\n                          <CommandItem value={`__create__:${term}`} onSelect={() => inspector.createTag(term)}>\n                            <Icon name=\"i-lucide-plus\" />\n                            {t('composites.tags.create', { tag: normalizeTagName(term) || term })}\n                          </CommandItem>\n                        )}\n                      </CommandList>\n                    </Command>\n                  </PopoverContent>\n                </Popover>\n              </FormField>\n\n              {focused.fields.map(field => (\n                <FormField key={field.key} label={field.label}>\n                  {isStructuredField(field)\n                    ? (\n                        // Not text (reference, bibliography, derivation): own editors as in the details card; a text input would overwrite the stored object with a string.\n                        editor && <CompositeFieldEditor editor={editor} row={focused} field={field} disabled={!editable} />\n                      )\n                    : field.type === 'select'\n                    ? (\n                        <Select value={compositeFieldText(focused, field)} onValueChange={value => inspector.setField(field, value)} disabled={!editable}>\n                          <SelectTrigger size=\"sm\" className=\"w-full\" aria-label={field.label}>\n                            <SelectValue placeholder=\"–\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            {(field.options ?? []).map(option => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}\n                          </SelectContent>\n                        </Select>\n                      )\n                    : (\n                        <MetaFieldInput\n                          field={field}\n                          value={compositeFieldText(focused, field)}\n                          readOnly={!editable}\n                          onChange={value => inspector.setField(field, value)}\n                        />\n                      )}\n                </FormField>\n              ))}\n\n              <div className=\"flex items-center gap-2 border-t border-border pt-3\">\n                <Icon name=\"i-lucide-sparkles\" className=\"size-4 shrink-0 text-muted-foreground\" />\n                <span className=\"text-muted-foreground\">{t('composites.inspector.aiStatus')}</span>\n                <span className={cn('ml-auto inline-flex items-center gap-1.5', hasSummary ? 'text-foreground' : 'text-muted-foreground/70')}>\n                  <span className={cn('size-2 rounded-full', hasSummary ? 'bg-(--sk-success)' : 'bg-border')} />\n                  {hasSummary ? t('composites.inspector.summaryPresent') : t('composites.inspector.summaryMissing')}\n                </span>\n              </div>\n            </div>\n          </section>\n        )}\n    </aside>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { Icon } from "../../../react/Icon.js";
-import { setCompositeMetaField } from "../rows.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "../../../react/ui/dropdown-menu.js";
+import { setCompositeMetaField } from "../rows.js";
 import { rowStatus, statusStyle } from "../meta-display.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/composites/react/CompositeStatusMenu.tsx

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

@@ -1,6 +1,6 @@
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
-import { setCompositeDescription } from "../rows.js";
 import { Textarea } from "../../../react/ui/textarea.js";
+import { setCompositeDescription } from "../rows.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/composites/react/CompositeSummaryEditor.tsx

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

@@ -1,3 +1,4 @@
+import { compositeKindsOf } from "../nodes.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { cn } from "../../../react/ui/utils.js";
 import { Icon } from "../../../react/Icon.js";
@@ -15,7 +16,20 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 function CompositeTable({ editor, onSelect, className }) {
 	const { rows, tags, kinds } = useCompositeRows(editor);
 	const { t } = useEditorI18n();
-	const fieldColumns = useMemo(() => fieldColumnsOf(rows, kinds), [rows, kinds]);
+	const fieldContext = useMemo(() => editor ? {
+		doc: editor.state.doc,
+		kinds: compositeKindsOf(editor),
+		t
+	} : void 0, [
+		editor,
+		rows,
+		t
+	]);
+	const fieldColumns = useMemo(() => fieldColumnsOf(rows, kinds, fieldContext), [
+		rows,
+		kinds,
+		fieldContext
+	]);
 	const specs = useMemo(() => columnSpecsOf(fieldColumns, t), [fieldColumns, t]);
 	const [search, setSearch] = useState("");
 	const [pickedKinds, setPickedKinds] = useState([]);
@@ -314,7 +328,7 @@ function CompositeTable({ editor, onSelect, className }) {
 						}, spec.id);
 						const column = fieldColumns.find((item) => item.id === spec.id);
 						if (!column) return /* @__PURE__ */ jsx(TableCell, { className: cellClass }, spec.id);
-						const text = fieldText(row, column.field.key);
+						const text = fieldText(row, column.field.key, fieldContext);
 						return /* @__PURE__ */ jsx(TableCell, {
 							className: cellClass,
 							children: text ? /* @__PURE__ */ jsx("span", {

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

@@ -1 +1 @@
-{"version":3,"file":"CompositeTable.js","names":[],"sources":["../../../../src/features/composites/react/CompositeTable.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useMemo, useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { Badge } from '../../../react/ui/badge'\nimport { Button } from '../../../react/ui/button'\nimport { Input } from '../../../react/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../react/ui/table'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { CompositeRow } from '../rows'\nimport { columnSpecsOf, FILTER_ALL, fieldColumnsOf, fieldOf, fieldText, hasText, isLongText, sortRows, toggled } from '../table-model'\nimport { useCompositeRows } from './use-composite-rows'\n\n// All Bausteine of an editor's document as a sortable, filterable table. Columns beyond the fixed ones derive from the\n// meta fields of the kinds present in the document, so a host kind with fields gets its columns without code changes.\n// The column specs, cell text and sorting are the framework-free `table-model`, shared with the Vue table.\n\n/** The table of an editor's Bausteine: sortable columns, filters by kind, tag and select fields, a text search; `onSelect` receives the clicked row. */\nexport function CompositeTable({ editor, onSelect, className }: {\n  editor?: Editor\n  onSelect?: (row: CompositeRow) => void\n  className?: string\n}) {\n  const { rows, tags, kinds } = useCompositeRows(editor)\n\n  const { t } = useEditorI18n()\n  const fieldColumns = useMemo(() => fieldColumnsOf(rows, kinds), [rows, kinds])\n  const specs = useMemo(() => columnSpecsOf(fieldColumns, t), [fieldColumns, t])\n\n  const [search, setSearch] = useState('')\n  const [pickedKinds, setPickedKinds] = useState<string[]>([])\n  const [pickedTags, setPickedTags] = useState<string[]>([])\n  const [pickedOptions, setPickedOptions] = useState<Record<string, string>>({})\n\n  /** One select per `select` field in use; its choices are the union of the options of all kinds that have the key. */\n  const selectFilters = useMemo(() => fieldColumns.flatMap((column) => {\n    if (column.field.type !== 'select') return []\n    const options = new Map<string, string>()\n    for (const row of rows) {\n      for (const option of fieldOf(row, column.field.key)?.options ?? []) if (!options.has(option.value)) options.set(option.value, option.label)\n    }\n    return [{\n      key: column.field.key,\n      label: column.field.label,\n      items: [{ label: t('composites.table.filter.all'), value: FILTER_ALL }, ...[...options].map(([value, label]) => ({ label, value }))],\n    }]\n  }), [fieldColumns, rows, t])\n\n  // A kind, tag or option that vanished from the document can no longer be unpicked in the UI, so it must not filter either.\n  const activeKinds = useMemo(() => pickedKinds.filter(id => kinds.some(kind => kind.id === id)), [pickedKinds, kinds])\n  const activeTags = useMemo(() => pickedTags.filter(tag => tags.includes(tag)), [pickedTags, tags])\n  const activeOptions = useMemo(() => selectFilters.flatMap((filter) => {\n    const value = pickedOptions[filter.key]\n    return value && filter.items.some(item => item.value === value && value !== FILTER_ALL) ? [[filter.key, value] as const] : []\n  }), [selectFilters, pickedOptions])\n  const needle = search.trim().toLowerCase()\n  const filterActive = activeKinds.length > 0 || activeTags.length > 0 || activeOptions.length > 0 || needle !== ''\n\n  function resetFilters() {\n    setSearch('')\n    setPickedKinds([])\n    setPickedTags([])\n    setPickedOptions({})\n  }\n\n  const filtered = useMemo(() => rows.filter((row) => {\n    if (activeKinds.length && !activeKinds.includes(row.kind)) return false\n    if (activeTags.length && !activeTags.every(tag => row.tags.includes(tag))) return false\n    if (activeOptions.some(([key, value]) => row.meta[key] !== value)) return false\n    if (needle) {\n      const haystack = `${row.title}\\n${row.description}\\n${row.tags.map(tag => `#${tag}`).join(' ')}`.toLowerCase()\n      if (!haystack.includes(needle)) return false\n    }\n    return true\n  }), [rows, activeKinds, activeTags, activeOptions, needle])\n\n  // --- Sorting (client side, over the filtered rows) ---\n\n  const [sorting, setSorting] = useState<{ id: string, desc: boolean } | null>(null)\n  const activeSort = useMemo(() => {\n    const spec = sorting && specs.find(item => item.id === sorting.id)\n    return sorting && spec ? { id: sorting.id, desc: sorting.desc, sort: spec.sort } : null\n  }, [sorting, specs])\n\n  /** Header click cycles ascending → descending → unsorted. */\n  function cycleSort(id: string) {\n    setSorting(current => current?.id !== id ? { id, desc: false } : current.desc ? null : { id, desc: true })\n  }\n  const sortIcon = (id: string) => {\n    if (sorting?.id !== id) return 'i-lucide-chevrons-up-down'\n    return sorting.desc ? 'i-lucide-arrow-down' : 'i-lucide-arrow-up'\n  }\n\n  const sorted = useMemo(() => activeSort ? sortRows(filtered, activeSort.sort, activeSort.desc) : filtered, [filtered, activeSort])\n\n  const countLabel = t(rows.length === 1 ? 'composites.table.count.one' : 'composites.table.count.other', { n: sorted.length, total: rows.length })\n  const columnCount = specs.length\n\n  return (\n    <section className={cn('flex min-h-0 flex-col gap-3', className)} aria-label={t('composites.table.label')}>\n      {!rows.length\n        ? (\n            <div className=\"mx-auto flex max-w-sm flex-1 flex-col items-center justify-center gap-2 py-16 text-center\">\n              <Icon name=\"i-lucide-table-2\" className=\"size-8 text-muted-foreground/70\" />\n              <p className=\"text-sm font-medium text-foreground\">\n                {t('composites.table.emptyTitle')}\n              </p>\n              <p className=\"text-sm text-muted-foreground\">\n                {t('composites.table.emptyText')}\n              </p>\n            </div>\n          )\n        : (\n            <>\n              <div className=\"flex flex-col gap-2\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <div className=\"relative w-64\">\n                    <Icon name=\"i-lucide-search\" className=\"pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground\" />\n                    <Input\n                      value={search}\n                      onChange={event => setSearch(event.target.value)}\n                      className={cn('h-7 pl-8 text-sm', search && 'pr-8')}\n                      placeholder={t('composites.table.search.placeholder')}\n                      aria-label={t('composites.table.search.label')}\n                    />\n                    {search && (\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon-xs\"\n                        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n                        aria-label={t('composites.table.search.clear')}\n                        onClick={() => setSearch('')}\n                      >\n                        <Icon name=\"i-lucide-x\" />\n                      </Button>\n                    )}\n                  </div>\n\n                  {selectFilters.map(filter => (\n                    <div key={filter.key} className=\"flex items-center gap-1.5\">\n                      <span className=\"text-sm text-muted-foreground\" aria-hidden=\"true\">{filter.label}</span>\n                      <Select\n                        value={pickedOptions[filter.key] ?? FILTER_ALL}\n                        onValueChange={value => setPickedOptions({ ...pickedOptions, [filter.key]: String(value) })}\n                      >\n                        <SelectTrigger size=\"sm\" className=\"w-36\" aria-label={filter.label}>\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          {filter.items.map(item => <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>)}\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  ))}\n\n                  {filterActive && (\n                    <Button size=\"sm\" variant=\"ghost\" onClick={resetFilters}>\n                      <Icon name=\"i-lucide-filter-x\" />\n                      {t('composites.table.filter.reset')}\n                    </Button>\n                  )}\n                  <span className=\"ml-auto text-xs text-muted-foreground tabular-nums\" role=\"status\">{countLabel}</span>\n                </div>\n\n                {kinds.length > 1 && (\n                  <div className=\"flex flex-wrap items-center gap-1\" role=\"group\" aria-label={t('composites.table.filter.byKind')}>\n                    {kinds.map(kind => (\n                      <Button\n                        key={kind.id}\n                        size=\"xs\"\n                        variant={activeKinds.includes(kind.id) ? 'default' : 'outline'}\n                        aria-pressed={activeKinds.includes(kind.id)}\n                        onClick={() => setPickedKinds(toggled(pickedKinds, kind.id))}\n                      >\n                        <Icon name={kind.icon} />\n                        {kind.label}\n                      </Button>\n                    ))}\n                  </div>\n                )}\n\n                {tags.length > 0 && (\n                  <div className=\"flex flex-wrap items-center gap-1\" role=\"group\" aria-label={t('composites.table.filter.byTag')}>\n                    {tags.map(tag => (\n                      <Button\n                        key={tag}\n                        size=\"xs\"\n                        variant={activeTags.includes(tag) ? 'default' : 'outline'}\n                        aria-pressed={activeTags.includes(tag)}\n                        onClick={() => setPickedTags(toggled(pickedTags, tag))}\n                      >\n                        {`#${tag}`}\n                      </Button>\n                    ))}\n                  </div>\n                )}\n              </div>\n\n              {/* Own scroll container instead of `<Table>`'s: the sticky header needs the element that scrolls vertically. */}\n              <div className=\"min-h-0 flex-1 overflow-auto rounded-md border border-border\">\n                <table data-slot=\"table\" className=\"w-full caption-bottom text-sm\">\n                  <TableHeader className=\"sticky top-0 z-10 bg-background\">\n                    <TableRow className=\"hover:bg-transparent\">\n                      {specs.map(spec => (\n                        <TableHead\n                          key={spec.id}\n                          className={cn('h-auto px-3 py-2 text-sm', spec.id === 'title' && 'min-w-56', spec.align === 'end' && 'text-right')}\n                          aria-sort={activeSort?.id === spec.id ? (activeSort.desc ? 'descending' : 'ascending') : 'none'}\n                        >\n                          <button\n                            type=\"button\"\n                            className=\"-mx-1.5 inline-flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 font-semibold hover:bg-muted focus-visible:outline-2 focus-visible:outline-primary\"\n                            onClick={() => cycleSort(spec.id)}\n                          >\n                            {spec.label}\n                            <Icon name={sortIcon(spec.id)} className={cn('size-3.5', activeSort?.id === spec.id ? 'text-foreground' : 'text-muted-foreground/70')} />\n                          </button>\n                        </TableHead>\n                      ))}\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {sorted.length === 0\n                      ? (\n                          <TableRow className=\"hover:bg-transparent\">\n                            <TableCell colSpan={columnCount} className=\"px-3 py-2 text-muted-foreground\">\n                              <div className=\"flex flex-col items-center gap-2 py-6\">\n                                <p className=\"text-sm text-muted-foreground\">\n                                  {t('composites.table.filter.noMatch')}\n                                </p>\n                                <Button size=\"sm\" variant=\"outline\" onClick={resetFilters}>\n                                  <Icon name=\"i-lucide-filter-x\" />\n                                  {t('composites.table.filter.reset')}\n                                </Button>\n                              </div>\n                            </TableCell>\n                          </TableRow>\n                        )\n                      : sorted.map(row => (\n                          <TableRow key={row.key} className=\"cursor-pointer\" onClick={() => onSelect?.(row)}>\n                            {specs.map((spec) => {\n                              const cellClass = cn('px-3 py-2 text-muted-foreground', spec.align === 'end' && 'text-right')\n                              if (spec.id === 'title') {\n                                return (\n                                  <TableCell key={spec.id} className={cellClass}>\n                                    <div className=\"flex min-w-0 items-center gap-1.5\" style={{ paddingLeft: `${row.depth * 1.25}rem` }}>\n                                      <Icon name={row.icon} className=\"size-4 shrink-0 text-muted-foreground\" />\n                                      {hasText(row.title)\n                                        ? <span className=\"truncate font-medium text-foreground\">{row.title}</span>\n                                        : <span className=\"truncate text-muted-foreground\">{t('composites.untitled')}</span>}\n                                    </div>\n                                  </TableCell>\n                                )\n                              }\n                              if (spec.id === 'kind') return <TableCell key={spec.id} className={cellClass}>{row.kindLabel}</TableCell>\n                              if (spec.id === 'tags') {\n                                return (\n                                  <TableCell key={spec.id} className={cellClass}>\n                                    {row.tags.length\n                                      ? (\n                                          <div className=\"flex flex-wrap gap-1\">\n                                            {row.tags.map(tag => <Badge key={tag} variant=\"secondary\">{`#${tag}`}</Badge>)}\n                                          </div>\n                                        )\n                                      : (\n                                          <>\n                                            <span className=\"text-muted-foreground/70\" aria-hidden=\"true\">–</span>\n                                            <span className=\"sr-only\">{t('composites.table.noTags')}</span>\n                                          </>\n                                        )}\n                                  </TableCell>\n                                )\n                              }\n                              if (spec.id === 'summary') {\n                                return (\n                                  <TableCell key={spec.id} className={cellClass}>\n                                    {hasText(row.description)\n                                      ? (\n                                          <>\n                                            <span className=\"inline-block size-2 rounded-full bg-primary\" aria-hidden=\"true\" title={row.description} />\n                                            <span className=\"sr-only\">{t('composites.table.summaryPresent')}</span>\n                                          </>\n                                        )\n                                      : (\n                                          <>\n                                            <span className=\"text-muted-foreground/70\" aria-hidden=\"true\">–</span>\n                                            <span className=\"sr-only\">{t('composites.summary.none')}</span>\n                                          </>\n                                        )}\n                                  </TableCell>\n                                )\n                              }\n                              const column = fieldColumns.find(item => item.id === spec.id)\n                              if (!column) return <TableCell key={spec.id} className={cellClass} />\n                              const text = fieldText(row, column.field.key)\n                              return (\n                                <TableCell key={spec.id} className={cellClass}>\n                                  {text\n                                    ? (\n                                        <span\n                                          className={cn('block', (column.field.type === 'number' || column.field.type === 'date') && 'tabular-nums', isLongText(column.field) && 'max-w-64 truncate')}\n                                          title={isLongText(column.field) ? text : undefined}\n                                        >\n                                          {text}\n                                        </span>\n                                      )\n                                    : (\n                                        <>\n                                          <span className=\"text-muted-foreground/70\" aria-hidden=\"true\">–</span>\n                                          <span className=\"sr-only\">{t('composites.table.noValue')}</span>\n                                        </>\n                                      )}\n                                </TableCell>\n                              )\n                            })}\n                          </TableRow>\n                        ))}\n                  </TableBody>\n                </table>\n              </div>\n            </>\n          )}\n    </section>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"CompositeTable.js","names":[],"sources":["../../../../src/features/composites/react/CompositeTable.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useMemo, useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { Badge } from '../../../react/ui/badge'\nimport { Button } from '../../../react/ui/button'\nimport { Input } from '../../../react/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../react/ui/table'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { compositeKindsOf } from '../nodes'\nimport type { CompositeRow } from '../rows'\nimport { columnSpecsOf, type FieldContext, FILTER_ALL, fieldColumnsOf, fieldOf, fieldText, hasText, isLongText, sortRows, toggled } from '../table-model'\nimport { useCompositeRows } from './use-composite-rows'\n\n// All Bausteine of an editor's document as a sortable, filterable table. Columns beyond the fixed ones derive from the\n// meta fields of the kinds present in the document, so a host kind with fields gets its columns without code changes.\n// The column specs, cell text and sorting are the framework-free `table-model`, shared with the Vue table.\n\n/** The table of an editor's Bausteine: sortable columns, filters by kind, tag and select fields, a text search; `onSelect` receives the clicked row. */\nexport function CompositeTable({ editor, onSelect, className }: {\n  editor?: Editor\n  onSelect?: (row: CompositeRow) => void\n  className?: string\n}) {\n  const { rows, tags, kinds } = useCompositeRows(editor)\n\n  const { t } = useEditorI18n()\n  // `reference` cells resolve their target in the document; re-read whenever the rows change.\n  const fieldContext = useMemo<FieldContext | undefined>(() => (editor ? { doc: editor.state.doc, kinds: compositeKindsOf(editor), t } : undefined), [editor, rows, t])\n  const fieldColumns = useMemo(() => fieldColumnsOf(rows, kinds, fieldContext), [rows, kinds, fieldContext])\n  const specs = useMemo(() => columnSpecsOf(fieldColumns, t), [fieldColumns, t])\n\n  const [search, setSearch] = useState('')\n  const [pickedKinds, setPickedKinds] = useState<string[]>([])\n  const [pickedTags, setPickedTags] = useState<string[]>([])\n  const [pickedOptions, setPickedOptions] = useState<Record<string, string>>({})\n\n  /** One select per `select` field in use; its choices are the union of the options of all kinds that have the key. */\n  const selectFilters = useMemo(() => fieldColumns.flatMap((column) => {\n    if (column.field.type !== 'select') return []\n    const options = new Map<string, string>()\n    for (const row of rows) {\n      for (const option of fieldOf(row, column.field.key)?.options ?? []) if (!options.has(option.value)) options.set(option.value, option.label)\n    }\n    return [{\n      key: column.field.key,\n      label: column.field.label,\n      items: [{ label: t('composites.table.filter.all'), value: FILTER_ALL }, ...[...options].map(([value, label]) => ({ label, value }))],\n    }]\n  }), [fieldColumns, rows, t])\n\n  // A kind, tag or option that vanished from the document can no longer be unpicked in the UI, so it must not filter either.\n  const activeKinds = useMemo(() => pickedKinds.filter(id => kinds.some(kind => kind.id === id)), [pickedKinds, kinds])\n  const activeTags = useMemo(() => pickedTags.filter(tag => tags.includes(tag)), [pickedTags, tags])\n  const activeOptions = useMemo(() => selectFilters.flatMap((filter) => {\n    const value = pickedOptions[filter.key]\n    return value && filter.items.some(item => item.value === value && value !== FILTER_ALL) ? [[filter.key, value] as const] : []\n  }), [selectFilters, pickedOptions])\n  const needle = search.trim().toLowerCase()\n  const filterActive = activeKinds.length > 0 || activeTags.length > 0 || activeOptions.length > 0 || needle !== ''\n\n  function resetFilters() {\n    setSearch('')\n    setPickedKinds([])\n    setPickedTags([])\n    setPickedOptions({})\n  }\n\n  const filtered = useMemo(() => rows.filter((row) => {\n    if (activeKinds.length && !activeKinds.includes(row.kind)) return false\n    if (activeTags.length && !activeTags.every(tag => row.tags.includes(tag))) return false\n    if (activeOptions.some(([key, value]) => row.meta[key] !== value)) return false\n    if (needle) {\n      const haystack = `${row.title}\\n${row.description}\\n${row.tags.map(tag => `#${tag}`).join(' ')}`.toLowerCase()\n      if (!haystack.includes(needle)) return false\n    }\n    return true\n  }), [rows, activeKinds, activeTags, activeOptions, needle])\n\n  // --- Sorting (client side, over the filtered rows) ---\n\n  const [sorting, setSorting] = useState<{ id: string, desc: boolean } | null>(null)\n  const activeSort = useMemo(() => {\n    const spec = sorting && specs.find(item => item.id === sorting.id)\n    return sorting && spec ? { id: sorting.id, desc: sorting.desc, sort: spec.sort } : null\n  }, [sorting, specs])\n\n  /** Header click cycles ascending → descending → unsorted. */\n  function cycleSort(id: string) {\n    setSorting(current => current?.id !== id ? { id, desc: false } : current.desc ? null : { id, desc: true })\n  }\n  const sortIcon = (id: string) => {\n    if (sorting?.id !== id) return 'i-lucide-chevrons-up-down'\n    return sorting.desc ? 'i-lucide-arrow-down' : 'i-lucide-arrow-up'\n  }\n\n  const sorted = useMemo(() => activeSort ? sortRows(filtered, activeSort.sort, activeSort.desc) : filtered, [filtered, activeSort])\n\n  const countLabel = t(rows.length === 1 ? 'composites.table.count.one' : 'composites.table.count.other', { n: sorted.length, total: rows.length })\n  const columnCount = specs.length\n\n  return (\n    <section className={cn('flex min-h-0 flex-col gap-3', className)} aria-label={t('composites.table.label')}>\n      {!rows.length\n        ? (\n            <div className=\"mx-auto flex max-w-sm flex-1 flex-col items-center justify-center gap-2 py-16 text-center\">\n              <Icon name=\"i-lucide-table-2\" className=\"size-8 text-muted-foreground/70\" />\n              <p className=\"text-sm font-medium text-foreground\">\n                {t('composites.table.emptyTitle')}\n              </p>\n              <p className=\"text-sm text-muted-foreground\">\n                {t('composites.table.emptyText')}\n              </p>\n            </div>\n          )\n        : (\n            <>\n              <div className=\"flex flex-col gap-2\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <div className=\"relative w-64\">\n                    <Icon name=\"i-lucide-search\" className=\"pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground\" />\n                    <Input\n                      value={search}\n                      onChange={event => setSearch(event.target.value)}\n                      className={cn('h-7 pl-8 text-sm', search && 'pr-8')}\n                      placeholder={t('composites.table.search.placeholder')}\n                      aria-label={t('composites.table.search.label')}\n                    />\n                    {search && (\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon-xs\"\n                        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n                        aria-label={t('composites.table.search.clear')}\n                        onClick={() => setSearch('')}\n                      >\n                        <Icon name=\"i-lucide-x\" />\n                      </Button>\n                    )}\n                  </div>\n\n                  {selectFilters.map(filter => (\n                    <div key={filter.key} className=\"flex items-center gap-1.5\">\n                      <span className=\"text-sm text-muted-foreground\" aria-hidden=\"true\">{filter.label}</span>\n                      <Select\n                        value={pickedOptions[filter.key] ?? FILTER_ALL}\n                        onValueChange={value => setPickedOptions({ ...pickedOptions, [filter.key]: String(value) })}\n                      >\n                        <SelectTrigger size=\"sm\" className=\"w-36\" aria-label={filter.label}>\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          {filter.items.map(item => <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>)}\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  ))}\n\n                  {filterActive && (\n                    <Button size=\"sm\" variant=\"ghost\" onClick={resetFilters}>\n                      <Icon name=\"i-lucide-filter-x\" />\n                      {t('composites.table.filter.reset')}\n                    </Button>\n                  )}\n                  <span className=\"ml-auto text-xs text-muted-foreground tabular-nums\" role=\"status\">{countLabel}</span>\n                </div>\n\n                {kinds.length > 1 && (\n                  <div className=\"flex flex-wrap items-center gap-1\" role=\"group\" aria-label={t('composites.table.filter.byKind')}>\n                    {kinds.map(kind => (\n                      <Button\n                        key={kind.id}\n                        size=\"xs\"\n                        variant={activeKinds.includes(kind.id) ? 'default' : 'outline'}\n                        aria-pressed={activeKinds.includes(kind.id)}\n                        onClick={() => setPickedKinds(toggled(pickedKinds, kind.id))}\n                      >\n                        <Icon name={kind.icon} />\n                        {kind.label}\n                      </Button>\n                    ))}\n                  </div>\n                )}\n\n                {tags.length > 0 && (\n                  <div className=\"flex flex-wrap items-center gap-1\" role=\"group\" aria-label={t('composites.table.filter.byTag')}>\n                    {tags.map(tag => (\n                      <Button\n                        key={tag}\n                        size=\"xs\"\n                        variant={activeTags.includes(tag) ? 'default' : 'outline'}\n                        aria-pressed={activeTags.includes(tag)}\n                        onClick={() => setPickedTags(toggled(pickedTags, tag))}\n                      >\n                        {`#${tag}`}\n                      </Button>\n                    ))}\n                  </div>\n                )}\n              </div>\n\n              {/* Own scroll container instead of `<Table>`'s: the sticky header needs the element that scrolls vertically. */}\n              <div className=\"min-h-0 flex-1 overflow-auto rounded-md border border-border\">\n                <table data-slot=\"table\" className=\"w-full caption-bottom text-sm\">\n                  <TableHeader className=\"sticky top-0 z-10 bg-background\">\n                    <TableRow className=\"hover:bg-transparent\">\n                      {specs.map(spec => (\n                        <TableHead\n                          key={spec.id}\n                          className={cn('h-auto px-3 py-2 text-sm', spec.id === 'title' && 'min-w-56', spec.align === 'end' && 'text-right')}\n                          aria-sort={activeSort?.id === spec.id ? (activeSort.desc ? 'descending' : 'ascending') : 'none'}\n                        >\n                          <button\n                            type=\"button\"\n                            className=\"-mx-1.5 inline-flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 font-semibold hover:bg-muted focus-visible:outline-2 focus-visible:outline-primary\"\n                            onClick={() => cycleSort(spec.id)}\n                          >\n                            {spec.label}\n                            <Icon name={sortIcon(spec.id)} className={cn('size-3.5', activeSort?.id === spec.id ? 'text-foreground' : 'text-muted-foreground/70')} />\n                          </button>\n                        </TableHead>\n                      ))}\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {sorted.length === 0\n                      ? (\n                          <TableRow className=\"hover:bg-transparent\">\n                            <TableCell colSpan={columnCount} className=\"px-3 py-2 text-muted-foreground\">\n                              <div className=\"flex flex-col items-center gap-2 py-6\">\n                                <p className=\"text-sm text-muted-foreground\">\n                                  {t('composites.table.filter.noMatch')}\n                                </p>\n                                <Button size=\"sm\" variant=\"outline\" onClick={resetFilters}>\n                                  <Icon name=\"i-lucide-filter-x\" />\n                                  {t('composites.table.filter.reset')}\n                                </Button>\n                              </div>\n                            </TableCell>\n                          </TableRow>\n                        )\n                      : sorted.map(row => (\n                          <TableRow key={row.key} className=\"cursor-pointer\" onClick={() => onSelect?.(row)}>\n                            {specs.map((spec) => {\n                              const cellClass = cn('px-3 py-2 text-muted-foreground', spec.align === 'end' && 'text-right')\n                              if (spec.id === 'title') {\n                                return (\n                                  <TableCell key={spec.id} className={cellClass}>\n                                    <div className=\"flex min-w-0 items-center gap-1.5\" style={{ paddingLeft: `${row.depth * 1.25}rem` }}>\n                                      <Icon name={row.icon} className=\"size-4 shrink-0 text-muted-foreground\" />\n                                      {hasText(row.title)\n                                        ? <span className=\"truncate font-medium text-foreground\">{row.title}</span>\n                                        : <span className=\"truncate text-muted-foreground\">{t('composites.untitled')}</span>}\n                                    </div>\n                                  </TableCell>\n                                )\n                              }\n                              if (spec.id === 'kind') return <TableCell key={spec.id} className={cellClass}>{row.kindLabel}</TableCell>\n                              if (spec.id === 'tags') {\n                                return (\n                                  <TableCell key={spec.id} className={cellClass}>\n                                    {row.tags.length\n                                      ? (\n                                          <div className=\"flex flex-wrap gap-1\">\n                                            {row.tags.map(tag => <Badge key={tag} variant=\"secondary\">{`#${tag}`}</Badge>)}\n                                          </div>\n                                        )\n                                      : (\n                                          <>\n                                            <span className=\"text-muted-foreground/70\" aria-hidden=\"true\">–</span>\n                                            <span className=\"sr-only\">{t('composites.table.noTags')}</span>\n                                          </>\n                                        )}\n                                  </TableCell>\n                                )\n                              }\n                              if (spec.id === 'summary') {\n                                return (\n                                  <TableCell key={spec.id} className={cellClass}>\n                                    {hasText(row.description)\n                                      ? (\n                                          <>\n                                            <span className=\"inline-block size-2 rounded-full bg-primary\" aria-hidden=\"true\" title={row.description} />\n                                            <span className=\"sr-only\">{t('composites.table.summaryPresent')}</span>\n                                          </>\n                                        )\n                                      : (\n                                          <>\n                                            <span className=\"text-muted-foreground/70\" aria-hidden=\"true\">–</span>\n                                            <span className=\"sr-only\">{t('composites.summary.none')}</span>\n                                          </>\n                                        )}\n                                  </TableCell>\n                                )\n                              }\n                              const column = fieldColumns.find(item => item.id === spec.id)\n                              if (!column) return <TableCell key={spec.id} className={cellClass} />\n                              const text = fieldText(row, column.field.key, fieldContext)\n                              return (\n                                <TableCell key={spec.id} className={cellClass}>\n                                  {text\n                                    ? (\n                                        <span\n                                          className={cn('block', (column.field.type === 'number' || column.field.type === 'date') && 'tabular-nums', isLongText(column.field) && 'max-w-64 truncate')}\n                                          title={isLongText(column.field) ? text : undefined}\n                                        >\n                                          {text}\n                                        </span>\n                                      )\n                                    : (\n                                        <>\n                                          <span className=\"text-muted-foreground/70\" aria-hidden=\"true\">–</span>\n                                          <span className=\"sr-only\">{t('composites.table.noValue')}</span>\n                                        </>\n                                      )}\n                                </TableCell>\n                              )\n                            })}\n                          </TableRow>\n                        ))}\n                  </TableBody>\n                </table>\n              </div>\n            </>\n          )}\n    </section>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,SAAgB,eAAe,EAAE,QAAQ,UAAU,aAIhD;CACD,MAAM,EAAE,MAAM,MAAM,UAAU,iBAAiB,MAAM;CAErD,MAAM,EAAE,MAAM,cAAc;CAE5B,MAAM,eAAe,cAAyC,SAAS;EAAE,KAAK,OAAO,MAAM;EAAK,OAAO,iBAAiB,MAAM;EAAG;CAAE,IAAI,KAAA,GAAY;EAAC;EAAQ;EAAM;CAAC,CAAC;CACpK,MAAM,eAAe,cAAc,eAAe,MAAM,OAAO,YAAY,GAAG;EAAC;EAAM;EAAO;CAAY,CAAC;CACzG,MAAM,QAAQ,cAAc,cAAc,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CAE7E,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,aAAa,kBAAkB,SAAmB,CAAC,CAAC;CAC3D,MAAM,CAAC,YAAY,iBAAiB,SAAmB,CAAC,CAAC;CACzD,MAAM,CAAC,eAAe,oBAAoB,SAAiC,CAAC,CAAC;;CAG7E,MAAM,gBAAgB,cAAc,aAAa,SAAS,WAAW;EACnE,IAAI,OAAO,MAAM,SAAS,UAAU,OAAO,CAAC;EAC5C,MAAM,0BAAU,IAAI,IAAoB;EACxC,KAAK,MAAM,OAAO,MAChB,KAAK,MAAM,UAAU,QAAQ,KAAK,OAAO,MAAM,GAAG,CAAC,EAAE,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,IAAI,OAAO,KAAK,GAAG,QAAQ,IAAI,OAAO,OAAO,OAAO,KAAK;EAE5I,OAAO,CAAC;GACN,KAAK,OAAO,MAAM;GAClB,OAAO,OAAO,MAAM;GACpB,OAAO,CAAC;IAAE,OAAO,EAAE,6BAA6B;IAAG,OAAO;GAAW,GAAG,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY;IAAE;IAAO;GAAM,EAAE,CAAC;EACrI,CAAC;CACH,CAAC,GAAG;EAAC;EAAc;EAAM;CAAC,CAAC;CAG3B,MAAM,cAAc,cAAc,YAAY,QAAO,OAAM,MAAM,MAAK,SAAQ,KAAK,OAAO,EAAE,CAAC,GAAG,CAAC,aAAa,KAAK,CAAC;CACpH,MAAM,aAAa,cAAc,WAAW,QAAO,QAAO,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,YAAY,IAAI,CAAC;CACjG,MAAM,gBAAgB,cAAc,cAAc,SAAS,WAAW;EACpE,MAAM,QAAQ,cAAc,OAAO;EACnC,OAAO,SAAS,OAAO,MAAM,MAAK,SAAQ,KAAK,UAAU,SAAS,UAAA,SAAoB,IAAI,CAAC,CAAC,OAAO,KAAK,KAAK,CAAU,IAAI,CAAC;CAC9H,CAAC,GAAG,CAAC,eAAe,aAAa,CAAC;CAClC,MAAM,SAAS,OAAO,KAAK,CAAC,CAAC,YAAY;CACzC,MAAM,eAAe,YAAY,SAAS,KAAK,WAAW,SAAS,KAAK,cAAc,SAAS,KAAK,WAAW;CAE/G,SAAS,eAAe;EACtB,UAAU,EAAE;EACZ,eAAe,CAAC,CAAC;EACjB,cAAc,CAAC,CAAC;EAChB,iBAAiB,CAAC,CAAC;CACrB;CAEA,MAAM,WAAW,cAAc,KAAK,QAAQ,QAAQ;EAClD,IAAI,YAAY,UAAU,CAAC,YAAY,SAAS,IAAI,IAAI,GAAG,OAAO;EAClE,IAAI,WAAW,UAAU,CAAC,WAAW,OAAM,QAAO,IAAI,KAAK,SAAS,GAAG,CAAC,GAAG,OAAO;EAClF,IAAI,cAAc,MAAM,CAAC,KAAK,WAAW,IAAI,KAAK,SAAS,KAAK,GAAG,OAAO;EAC1E,IAAI,QAEE;OAAA,CADa,GAAG,IAAI,MAAM,IAAI,IAAI,YAAY,IAAI,IAAI,KAAK,KAAI,QAAO,IAAI,KAAK,CAAC,CAAC,KAAK,GAAG,IAAI,YACrF,CAAC,CAAC,SAAS,MAAM,GAAG,OAAO;EAAA;EAEzC,OAAO;CACT,CAAC,GAAG;EAAC;EAAM;EAAa;EAAY;EAAe;CAAM,CAAC;CAI1D,MAAM,CAAC,SAAS,cAAc,SAA+C,IAAI;CACjF,MAAM,aAAa,cAAc;EAC/B,MAAM,OAAO,WAAW,MAAM,MAAK,SAAQ,KAAK,OAAO,QAAQ,EAAE;EACjE,OAAO,WAAW,OAAO;GAAE,IAAI,QAAQ;GAAI,MAAM,QAAQ;GAAM,MAAM,KAAK;EAAK,IAAI;CACrF,GAAG,CAAC,SAAS,KAAK,CAAC;;CAGnB,SAAS,UAAU,IAAY;EAC7B,YAAW,YAAW,SAAS,OAAO,KAAK;GAAE;GAAI,MAAM;EAAM,IAAI,QAAQ,OAAO,OAAO;GAAE;GAAI,MAAM;EAAK,CAAC;CAC3G;CACA,MAAM,YAAY,OAAe;EAC/B,IAAI,SAAS,OAAO,IAAI,OAAO;EAC/B,OAAO,QAAQ,OAAO,wBAAwB;CAChD;CAEA,MAAM,SAAS,cAAc,aAAa,SAAS,UAAU,WAAW,MAAM,WAAW,IAAI,IAAI,UAAU,CAAC,UAAU,UAAU,CAAC;CAEjI,MAAM,aAAa,EAAE,KAAK,WAAW,IAAI,+BAA+B,gCAAgC;EAAE,GAAG,OAAO;EAAQ,OAAO,KAAK;CAAO,CAAC;CAChJ,MAAM,cAAc,MAAM;CAE1B,OACE,oBAAC,WAAD;EAAS,WAAW,GAAG,+BAA+B,SAAS;EAAG,cAAY,EAAE,wBAAwB;EACrG,UAAA,CAAC,KAAK,SAED,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,MAAD;KAAM,MAAK;KAAmB,WAAU;IAAmC,CAAA;IAC3E,oBAAC,KAAD;KAAG,WAAU;KACV,UAAA,EAAE,6BAA6B;IAC/B,CAAA;IACH,oBAAC,KAAD;KAAG,WAAU;KACV,UAAA,EAAE,4BAA4B;IAC9B,CAAA;GACA;EAGL,CAAA,IAAA,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA;QACE,oBAAC,MAAD;SAAM,MAAK;SAAkB,WAAU;QAA+F,CAAA;QACtI,oBAAC,OAAD;SACE,OAAO;SACP,WAAU,UAAS,UAAU,MAAM,OAAO,KAAK;SAC/C,WAAW,GAAG,oBAAoB,UAAU,MAAM;SAClD,aAAa,EAAE,qCAAqC;SACpD,cAAY,EAAE,+BAA+B;QAC9C,CAAA;QACA,UACC,oBAAC,QAAD;SACE,SAAQ;SACR,MAAK;SACL,WAAU;SACV,cAAY,EAAE,+BAA+B;SAC7C,eAAe,UAAU,EAAE;SAE3B,UAAA,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;QACnB,CAAA;OAEP;;MAEJ,cAAc,KAAI,WACjB,qBAAC,OAAD;OAAsB,WAAU;OAAhC,UAAA,CACE,oBAAC,QAAD;QAAM,WAAU;QAAgC,eAAY;QAAQ,UAAA,OAAO;OAAY,CAAA,GACvF,qBAAC,QAAD;QACE,OAAO,cAAc,OAAO,QAAA;QAC5B,gBAAe,UAAS,iBAAiB;SAAE,GAAG;UAAgB,OAAO,MAAM,OAAO,KAAK;QAAE,CAAC;QAF5F,UAAA,CAIE,oBAAC,eAAD;SAAe,MAAK;SAAK,WAAU;SAAO,cAAY,OAAO;SAC3D,UAAA,oBAAC,aAAD,CAAc,CAAA;QACD,CAAA,GACf,oBAAC,eAAD,EAAA,UACG,OAAO,MAAM,KAAI,SAAQ,oBAAC,YAAD;SAA6B,OAAO,KAAK;SAAQ,UAAA,KAAK;QAAkB,GAAvD,KAAK,KAAkD,CAAC,EACtF,CAAA,CACT;OACL,CAAA,CAAA;MAbK,GAAA,OAAO,GAaZ,CACN;MAEA,gBACC,qBAAC,QAAD;OAAQ,MAAK;OAAK,SAAQ;OAAQ,SAAS;OAA3C,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,oBAAqB,CAAA,GAC/B,EAAE,+BAA+B,CAC5B;;MAEV,oBAAC,QAAD;OAAM,WAAU;OAAqD,MAAK;OAAU,UAAA;MAAiB,CAAA;KAClG;;IAEJ,MAAM,SAAS,KACd,oBAAC,OAAD;KAAK,WAAU;KAAoC,MAAK;KAAQ,cAAY,EAAE,gCAAgC;KAC3G,UAAA,MAAM,KAAI,SACT,qBAAC,QAAD;MAEE,MAAK;MACL,SAAS,YAAY,SAAS,KAAK,EAAE,IAAI,YAAY;MACrD,gBAAc,YAAY,SAAS,KAAK,EAAE;MAC1C,eAAe,eAAe,QAAQ,aAAa,KAAK,EAAE,CAAC;MAL7D,UAAA,CAOE,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACvB,KAAK,KACA;KARD,GAAA,KAAK,EAQJ,CACT;IACE,CAAA;IAGN,KAAK,SAAS,KACb,oBAAC,OAAD;KAAK,WAAU;KAAoC,MAAK;KAAQ,cAAY,EAAE,+BAA+B;KAC1G,UAAA,KAAK,KAAI,QACR,oBAAC,QAAD;MAEE,MAAK;MACL,SAAS,WAAW,SAAS,GAAG,IAAI,YAAY;MAChD,gBAAc,WAAW,SAAS,GAAG;MACrC,eAAe,cAAc,QAAQ,YAAY,GAAG,CAAC;MAEpD,UAAA,IAAI;KACC,GAPD,GAOC,CACT;IACE,CAAA;GAEJ;EAGL,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,qBAAC,SAAD;IAAO,aAAU;IAAQ,WAAU;IAAnC,UAAA,CACE,oBAAC,aAAD;KAAa,WAAU;KACrB,UAAA,oBAAC,UAAD;MAAU,WAAU;MACjB,UAAA,MAAM,KAAI,SACT,oBAAC,WAAD;OAEE,WAAW,GAAG,4BAA4B,KAAK,OAAO,WAAW,YAAY,KAAK,UAAU,SAAS,YAAY;OACjH,aAAW,YAAY,OAAO,KAAK,KAAM,WAAW,OAAO,eAAe,cAAe;OAEzF,UAAA,qBAAC,UAAD;QACE,MAAK;QACL,WAAU;QACV,eAAe,UAAU,KAAK,EAAE;QAHlC,UAAA,CAKG,KAAK,OACN,oBAAC,MAAD;SAAM,MAAM,SAAS,KAAK,EAAE;SAAG,WAAW,GAAG,YAAY,YAAY,OAAO,KAAK,KAAK,oBAAoB,0BAA0B;QAAI,CAAA,CAClI;;MACC,GAZJ,KAAK,EAYD,CACZ;KACO,CAAA;IACC,CAAA,GACb,oBAAC,WAAD,EAAA,UACG,OAAO,WAAW,IAEb,oBAAC,UAAD;KAAU,WAAU;KAClB,UAAA,oBAAC,WAAD;MAAW,SAAS;MAAa,WAAU;MACzC,UAAA,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,oBAAC,KAAD;QAAG,WAAU;QACV,UAAA,EAAE,iCAAiC;OACnC,CAAA,GACH,qBAAC,QAAD;QAAQ,MAAK;QAAK,SAAQ;QAAU,SAAS;QAA7C,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,oBAAqB,CAAA,GAC/B,EAAE,+BAA+B,CAC5B;OACL,CAAA,CAAA;;KACI,CAAA;IACH,CAAA,IAEZ,OAAO,KAAI,QACT,oBAAC,UAAD;KAAwB,WAAU;KAAiB,eAAe,WAAW,GAAG;KAC7E,UAAA,MAAM,KAAK,SAAS;MACnB,MAAM,YAAY,GAAG,mCAAmC,KAAK,UAAU,SAAS,YAAY;MAC5F,IAAI,KAAK,OAAO,SACd,OACE,oBAAC,WAAD;OAAyB,WAAW;OAClC,UAAA,qBAAC,OAAD;QAAK,WAAU;QAAoC,OAAO,EAAE,aAAa,GAAG,IAAI,QAAQ,KAAK,KAAK;QAAlG,UAAA,CACE,oBAAC,MAAD;SAAM,MAAM,IAAI;SAAM,WAAU;QAAyC,CAAA,GACxE,QAAQ,IAAI,KAAK,IACd,oBAAC,QAAD;SAAM,WAAU;SAAwC,UAAA,IAAI;QAAY,CAAA,IACxE,oBAAC,QAAD;SAAM,WAAU;SAAkC,UAAA,EAAE,qBAAqB;QAAQ,CAAA,CAClF;;MACI,GAPK,KAAK,EAOV;MAGf,IAAI,KAAK,OAAO,QAAQ,OAAO,oBAAC,WAAD;OAAyB,WAAW;OAAY,UAAA,IAAI;MAAqB,GAAzD,KAAK,EAAoD;MACxG,IAAI,KAAK,OAAO,QACd,OACE,oBAAC,WAAD;OAAyB,WAAW;OACjC,UAAA,IAAI,KAAK,SAEJ,oBAAC,OAAD;QAAK,WAAU;QACZ,UAAA,IAAI,KAAK,KAAI,QAAO,oBAAC,OAAD;SAAiB,SAAQ;SAAa,UAAA,IAAI;QAAa,GAA3C,GAA2C,CAAC;OAC1E,CAAA,IAGL,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;QAAM,WAAU;QAA2B,eAAY;QAAO,UAAA;OAAO,CAAA,GACrE,oBAAC,QAAD;QAAM,WAAU;QAAW,UAAA,EAAE,yBAAyB;OAAQ,CAAA,CAC9D,EAAA,CAAA;MAEC,GAbK,KAAK,EAaV;MAGf,IAAI,KAAK,OAAO,WACd,OACE,oBAAC,WAAD;OAAyB,WAAW;OACjC,UAAA,QAAQ,IAAI,WAAW,IAElB,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;QAAM,WAAU;QAA8C,eAAY;QAAO,OAAO,IAAI;OAAc,CAAA,GAC1G,oBAAC,QAAD;QAAM,WAAU;QAAW,UAAA,EAAE,iCAAiC;OAAQ,CAAA,CACtE,EAAA,CAAA,IAGF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;QAAM,WAAU;QAA2B,eAAY;QAAO,UAAA;OAAO,CAAA,GACrE,oBAAC,QAAD;QAAM,WAAU;QAAW,UAAA,EAAE,yBAAyB;OAAQ,CAAA,CAC9D,EAAA,CAAA;MAEC,GAdK,KAAK,EAcV;MAGf,MAAM,SAAS,aAAa,MAAK,SAAQ,KAAK,OAAO,KAAK,EAAE;MAC5D,IAAI,CAAC,QAAQ,OAAO,oBAAC,WAAD,EAAyB,WAAW,UAAY,GAAhC,KAAK,EAA2B;MACpE,MAAM,OAAO,UAAU,KAAK,OAAO,MAAM,KAAK,YAAY;MAC1D,OACE,oBAAC,WAAD;OAAyB,WAAW;OACjC,UAAA,OAEK,oBAAC,QAAD;QACE,WAAW,GAAG,UAAU,OAAO,MAAM,SAAS,YAAY,OAAO,MAAM,SAAS,WAAW,gBAAgB,WAAW,OAAO,KAAK,KAAK,mBAAmB;QAC1J,OAAO,WAAW,OAAO,KAAK,IAAI,OAAO,KAAA;QAExC,UAAA;OACG,CAAA,IAGN,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;QAAM,WAAU;QAA2B,eAAY;QAAO,UAAA;OAAO,CAAA,GACrE,oBAAC,QAAD;QAAM,WAAU;QAAW,UAAA,EAAE,0BAA0B;OAAQ,CAAA,CAC/D,EAAA,CAAA;MAEC,GAhBK,KAAK,EAgBV;KAEf,CAAC;IACO,GA5EK,IAAI,GA4ET,CACX,EACI,CAAA,CACN;;EACJ,CAAA,CACL,EAAA,CAAA;CAED,CAAA;AAEb"}

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

@@ -1,10 +1,10 @@
 import { metadataOf } from "../../../core/metadata.js";
 import { METADATA_LIST } from "../../../core/metadata-types.js";
+import { normalizeTagName } from "../../../core/tag-name.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 { setCompositeTags } from "../rows.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/composites/react/CompositeTagsEditor.tsx

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

@@ -1,6 +1,8 @@
 import { compositeKind } from "../kinds.js";
+import { derivationOf } from "../derivation.js";
 import { compositeKindsOf } from "../nodes.js";
 import { cn } from "../../../react/ui/utils.js";
+import { useStore } from "../../../react/use-store.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
 //#region src/features/composites/react/CompositeView.tsx
@@ -9,10 +11,13 @@ const cssString = (text) => `"${text.replace(/["\\]/g, "\\$&").replace(/\n/g, "\
 /** 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 expanded = useStore(editor.storage.composite.expanded);
+	const id = node.attrs.id;
+	const collapsed = typeof id === "string" && id !== "" && derivationOf(node) !== null && !expanded.has(id);
 	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"),
+		className: cn("composite", collapsed && "is-collapsed", selected && "is-selected rounded-md ring-1 ring-primary"),
 		"data-type": "composite",
 		"data-kind": node.attrs.kind,
 		"data-id": node.attrs.id || void 0,

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

@@ -1 +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"}
+{"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 { useStore } from '../../../react/use-store'\nimport { derivationOf } from '../derivation'\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  // A derived Baustein (one with a `meta.derivation`) shows collapsed to a faded preview until it is opened; the content\n  // stays laid out (CSS clips it), so editing positions are unaffected. The chrome's chevron and a caret inside open it.\n  const expanded = useStore(editor.storage.composite.expanded)\n  const id: unknown = node.attrs.id\n  const collapsed = typeof id === 'string' && id !== '' && derivationOf(node) !== null && !expanded.has(id)\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', collapsed && 'is-collapsed', 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":";;;;;;;;;AASA,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;CAG5E,MAAM,WAAW,SAAS,OAAO,QAAQ,UAAU,QAAQ;CAC3D,MAAM,KAAc,KAAK,MAAM;CAC/B,MAAM,YAAY,OAAO,OAAO,YAAY,OAAO,MAAM,aAAa,IAAI,MAAM,QAAQ,CAAC,SAAS,IAAI,EAAE;CAExG,MAAM,kBAAkB,EAAE,iCAAiC,UAAU,KAAK,gBAAgB,EAAE;CAC5F,OACE,qBAAC,iBAAD;EACE,IAAG;EACH,WAAW,GAAG,aAAa,aAAa,gBAAgB,YAAY,4CAA4C;EAChH,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"}