@ecsplico/editor 2.1.1 → 3.0.0

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

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

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

@@ -4,7 +4,8 @@ import { Editor } from "@tiptap/core";
 /**
  * Content of the popover on a composite's front icon: the kind (a select, plain text while read-only), every field of
  * the kind except the status (its chip edits it) and the summary. Choosing another kind first shows an inline warning
- * that names the field values the switch drops (`setCompositeKind` keeps only meta keys the new kind declares) and
+ * that names the field values the switch drops (`setCompositeKind` keeps the meta keys the new kind declares, plus
+ * `derivation` and `bib`, see `keepsMetaKey`) and
  * applies the change on „Ändern“.
  */
 export declare function CompositeDetails({ editor, row, editable }: {

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

@@ -1,9 +1,12 @@
+import { keepsMetaKey } from "../meta-keys.js";
+import { derivationOf } from "../derivation.js";
 import { compositeKindsOf } from "../nodes.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { Icon } from "../../../react/Icon.js";
 import { Button } from "../../../react/ui/button.js";
-import { compositeOfRow } from "../rows.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../react/ui/select.js";
+import { compositeBacklinks, compositeOfRow } from "../rows.js";
+import { DerivationBadge } from "./DerivationBadge.js";
 import { CompositeFieldEditor } from "./CompositeFieldEditor.js";
 import { CompositeSummaryEditor } from "./CompositeSummaryEditor.js";
 import { useEffect, useMemo, useState } from "react";
@@ -12,25 +15,35 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 /**
 * Content of the popover on a composite's front icon: the kind (a select, plain text while read-only), every field of
 * the kind except the status (its chip edits it) and the summary. Choosing another kind first shows an inline warning
-* that names the field values the switch drops (`setCompositeKind` keeps only meta keys the new kind declares) and
+* that names the field values the switch drops (`setCompositeKind` keeps the meta keys the new kind declares, plus
+* `derivation` and `bib`, see `keepsMetaKey`) and
 * applies the change on „Ändern“.
 */
 function CompositeDetails({ editor, row, editable }) {
 	const { t } = useEditorI18n();
 	const kinds = useMemo(() => compositeKindsOf(editor), [editor]);
-	const fields = row.fields.filter((field) => field.key !== "status");
+	const fields = row.fields.filter((field) => field.key !== "status" && field.type !== "derivation");
+	const derivedNode = useMemo(() => {
+		const found = compositeOfRow(editor.state.doc, row);
+		return found && derivationOf(found.node) ? found.node : null;
+	}, [editor, row]);
+	/** The places that refer to the row's Baustein (chips in other blocks, `reference` fields), for the „Verweise“ list. */
+	const backlinks = useMemo(() => row.id ? compositeBacklinks(editor.state.doc, kinds, row.id) : [], [
+		editor,
+		kinds,
+		row
+	]);
 	/** The kind chosen in the select, waiting for the confirmation. */
 	const [pending, setPending] = useState(null);
 	useEffect(() => {
 		setPending(null);
 	}, [row.kind]);
 	const pendingLabel = kinds.find((kind) => kind.id === pending)?.label ?? "";
-	/** Field values of the row that the pending kind does not declare, as „Label: value“. */
+	/** Field values of the row that the pending kind does not keep (`keepsMetaKey`), as „Label: value“. */
 	const lost = useMemo(() => {
 		const target = kinds.find((kind) => kind.id === pending);
 		if (!target) return [];
-		const kept = new Set(target.fields.map((field) => field.key));
-		return Object.entries(row.meta).filter(([key, value]) => !kept.has(key) && value != null && value !== "").map(([key, value]) => {
+		return Object.entries(row.meta).filter(([key, value]) => !keepsMetaKey(target, key) && value != null && value !== "").map(([key, value]) => {
 			const field = row.fields.find((candidate) => candidate.key === key);
 			const text = typeof value === "object" ? JSON.stringify(value) : String(value);
 			return {
@@ -116,6 +129,11 @@ function CompositeDetails({ editor, row, editable }) {
 					})]
 				})]
 			}),
+			derivedNode && /* @__PURE__ */ jsx(DerivationBadge, {
+				editor,
+				node: derivedNode,
+				detailed: true
+			}),
 			fields.map((field) => /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1",
 				children: [/* @__PURE__ */ jsx("span", {
@@ -139,6 +157,27 @@ function CompositeDetails({ editor, row, editable }) {
 					row,
 					readonly: !editable
 				})]
+			}),
+			backlinks.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: t("composites.reference.backlinks")
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-0.5",
+					children: backlinks.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "flex w-full min-w-0 items-baseline gap-1 rounded-sm text-left text-xs text-foreground hover:text-primary focus-visible:outline-2 focus-visible:outline-primary",
+						onClick: () => editor.commands.revealBlock(link.from),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: link.excerpt || "…"
+						}), link.locator && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-muted-foreground",
+							children: link.locator
+						})]
+					}) }, `${link.from}:${index}`))
+				})]
 			})
 		]
 	});

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

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

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":"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"}
+{"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":";;;;;;;;;;;;;;;;AAiBA,MAAM,YAAY;AAElB,MAAM,gBAAgB,WAA0B,EAAE,mBAAmB,SAAS,UAAU,KAAK,KAAK,IAAI,QAAQ,oBAAoB;;AAGlI,SAAS,UAAU,EAAE,OAAO,MAAM,YAAmE;CACnG,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,oBAAC,OAAD;IAAO,WAAU;IAAuC,UAAA;GAAa,CAAA;GACpE;GACA,QAAQ,oBAAC,KAAD;IAAG,WAAU;IAAiC,UAAA;GAAQ,CAAA;EAC5D;;AAET;;;;;;AAOA,SAAS,eAAe,EAAE,OAAO,OAAO,UAAU,YAK/C;CACD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,gBAAgB,SAAS,KAAK,GAAG,CAAC,KAAK,CAAC;CACxC,MAAM,OAAO,SAAiB;EAC5B,SAAS,IAAI;EACb,SAAS,IAAI;CACf;CACA,OAAO,MAAM,SAAS,aAEhB,oBAAC,UAAD;EACE,OAAO;EACP,cAAY,MAAM;EAClB,MAAM;EACN,WAAU;EACA;EACV,WAAU,UAAS,IAAI,MAAM,OAAO,KAAK;CAC1C,CAAA,IAGD,oBAAC,OAAD;EACE,OAAO;EACP,MAAM,MAAM;EACZ,cAAY,MAAM;EAClB,WAAU;EACA;EACV,WAAU,UAAS,IAAI,MAAM,OAAO,KAAK;CAC1C,CAAA;AAET;;;;;;;;;;;;AAaA,SAAgB,mBAAmB,EAAE,QAAQ,iBAAiB,UAAU,aAMrE;CACD,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,EAAE,OAAO,cAAc,sBAAsB,QAAQ,eAAe;CAC1E,MAAM,EAAE,SAAS,UAAU,OAAO,YAAY,MAAM,UAAU,aAAa,YAAY,YAAY,MAAM,MAAM,OAAO,UAAU,YAAY;CAC5I,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,MAAM,MAAM;CAElB,OACE,oBAAC,SAAD;EAAO,WAAW,GAAG,wDAAwD,SAAS;EAAG,cAAY,EAAE,4BAA4B;EAChI,UAAA,YAAY,aAEP,qBAAC,WAAD;GAAS,WAAU;GAAa,mBAAiB,GAAG,IAAI;GAAxD,UAAA,CACE,oBAAC,MAAD;IAAI,IAAI,GAAG,IAAI;IAAY,WAAU;IAClC,UAAA,EAAE,+BAA+B;GAChC,CAAA,GACJ,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UACD,qBAAC,MAAD;KAAI,WAAU;KAAd,UAAA;MACE,oBAAC,MAAD;OAAI,WAAU;OACX,UAAA,EAAE,iCAAiC;MAClC,CAAA;MACH,MAAM,SAED,qBAAC,MAAD;OAAI,WAAU;OAAd,UAAA,CACG,MAAM,KAAI,SACT,qBAAC,QAAD;QAAoB,WAAU;QAA9B,UAAA;SACE,oBAAC,MAAD;UAAM,MAAM,KAAK;UAAM,WAAU;SAAyC,CAAA;SAC1E,oBAAC,QAAD;UAAM,WAAU;UAA2C,UAAA,KAAK;SAAY,CAAA;SAC5E,oBAAC,QAAD;UAAM,WAAU;UAAsC,UAAA,KAAK;SAAY,CAAA;QACnE;OAJK,GAAA,KAAK,EAIV,CACP,GACD,oBAAC,QAAD;QAAM,WAAU;QACb,UAAA,EAAE,mCAAmC;SAAE,GAAG;SAAY,OAAO,KAAK;QAAO,CAAC;OACvE,CAAA,CACJ;MAGJ,CAAA,IAAA,oBAAC,MAAD;OAAI,WAAU;OACX,UAAA,EAAE,2BAA2B;MAC5B,CAAA;MAGV,oBAAC,MAAD;OAAI,WAAU;OACX,UAAA,EAAE,uBAAuB;MACxB,CAAA;MACH,KAAK,SAEA,oBAAC,MAAD;OAAI,WAAU;OACX,UAAA,KAAK,KAAI,QAAO,oBAAC,OAAD;QAAiB,SAAQ;QAAY,WAAU;QAAc,UAAA,IAAI;OAAa,GAAlE,GAAkE,CAAC;MAC9F,CAAA,IAGJ,oBAAC,MAAD;OAAI,WAAU;OACX,UAAA,EAAE,2BAA2B;MAC5B,CAAA;MAGV,oBAAC,MAAD;OAAI,WAAU;OACX,UAAA,EAAE,+BAA+B;MAChC,CAAA;MACH,SAAS,SAEJ,oBAAC,MAAD;OAAI,WAAU;OACX,UAAA,SAAS,KAAI,YACZ,qBAAC,QAAD;QAEE,WAAU;QACV,OAAO;SAAE,GAAG,aAAa,QAAQ,KAAK;SAAG,YAAY;QAA6D;QAHpH,UAAA,CAKE,oBAAC,QAAD;SAAM,WAAU;SAAiC,OAAO,EAAE,YAAY,uBAAuB;QAAI,CAAA,GACjG,qBAAC,QAAD;SAAM,WAAU;SAAhB,UAAA,CAA2B,KAAE,QAAQ,KAAY;QAC7C,CAAA,CAAA;OANC,GAAA,QAAQ,EAMT,CACP;MACC,CAAA,IAGJ,oBAAC,MAAD;OAAI,WAAU;OACX,UAAA,EAAE,2BAA2B;MAC5B,CAAA;KAER;IACD,CAAA,CAAA;GACE,CAAA,CAAA;EAEX,CAAA,IAAA,WACA,qBAAC,WAAD;GAAS,WAAU;GAAa,mBAAiB,GAAG,IAAI;GAAxD,UAAA,CACE,oBAAC,MAAD;IAAI,IAAI,GAAG,IAAI;IAAa,WAAU;IACnC,UAAA,EAAE,gCAAgC;GACjC,CAAA,GAEJ,qBAAC,OAAD;IAAuB,WAAU;IAAjC,UAAA;KACE,oBAAC,WAAD;MAAW,OAAO,EAAE,2BAA2B;MAC7C,UAAA,qBAAC,QAAD;OAAQ,OAAO,QAAQ;OAAM,eAAe,UAAU;OAAS,UAAU,CAAC;OAA1E,UAAA,CACE,oBAAC,eAAD;QAAe,MAAK;QAAK,WAAU;QAAS,cAAY,EAAE,wBAAwB;QAChF,UAAA,oBAAC,aAAD,CAAc,CAAA;OACD,CAAA,GACf,oBAAC,eAAD,EAAA,UACG,YAAY,KAAI,SACf,qBAAC,YAAD;QAA6B,OAAO,KAAK;QAAzC,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACvB,KAAK,KACI;OAHK,GAAA,KAAK,KAGV,CACb,EACY,CAAA,CACT;;KACC,CAAA;KAEX,oBAAC,WAAD;MAAW,OAAO,EAAE,4BAA4B;MAAG,MAAM,WAAW,EAAE,gCAAgC,IAAI,KAAA;MACxG,UAAA,oBAAC,KAAD;OAAG,WAAW,GAAG,8BAA8B,QAAQ,QAAQ,oBAAoB,0BAA0B;OAAG,OAAO,QAAQ;OAC5H,UAAA,QAAQ,SAAS,EAAE,+BAA+B;MAClD,CAAA;KACM,CAAA;KAEX,oBAAC,WAAD;MACE,OAAO,EAAE,kCAAkC;MAC3C,MAAM,QAAQ,sBAAsB,KAAA,IAAY,EAAE,sCAAsC;MAExF,UAAA,oBAAC,UAAD;OACE,OAAO;OACP,MAAM;OACN,WAAU;OACV,aAAa,EAAE,kCAAkC;OACjD,cAAY,EAAE,kCAAkC;OAChD,UAAU,CAAC,YAAY,CAAC,QAAQ;OAChC,WAAU,UAAS,UAAU,iBAAiB,MAAM,OAAO,KAAK;OAChE,QAAQ,UAAU;MACnB,CAAA;KACQ,CAAA;KAEX,oBAAC,WAAD;MAAW,OAAO,EAAE,uBAAuB;MACzC,UAAA,qBAAC,SAAD;OACE,MAAM;OACN,eAAe,WAAW;QACxB,YAAY,MAAM;QAClB,IAAI,QAAQ,UAAU,WAAW;OACnC;OALF,UAAA,CAOE,oBAAC,eAAD;QAAe,SAAA;QACb,UAAA,qBAAC,OAAD;SAAK,WAAW,GAAG,8GAA8G,CAAC,YAAY,YAAY;SAA1J,UAAA;UACE,oBAAC,MAAD;WAAM,MAAK;WAAgB,WAAU;UAAkC,CAAA;UACtE,QAAQ,KAAK,KAAI,QAChB,qBAAC,OAAD;WAAiB,SAAQ;WAAY,WAAU;WAA/C,UAAA,CACE,oBAAC,QAAD;YAAM,WAAU;YAAY,UAAA;WAAU,CAAA,GACtC,oBAAC,UAAD;YACE,MAAK;YACL,WAAU;YACV,cAAY,EAAE,yBAAyB,EAAE,IAAI,CAAC;YAC9C,UAAU,CAAC;YACX,eAAe,UAAU,QAAQ,QAAQ,KAAK,QAAO,SAAQ,SAAS,GAAG,CAAC;YAE1E,UAAA,oBAAC,MAAD;aAAM,MAAK;aAAa,WAAU;YAAU,CAAA;WACtC,CAAA,CACH;UAXK,GAAA,GAWL,CACR;UACD,oBAAC,gBAAD;WAAgB,SAAA;WACd,UAAA,oBAAC,UAAD;YACE,MAAK;YACL,MAAK;YACL,iBAAe;YACf,cAAY,EAAE,uBAAuB;YACrC,UAAU,CAAC;YACX,WAAU;YAET,UAAA,QAAQ,KAAK,SAAS,KAAK,EAAE,uBAAuB;WAC/C,CAAA;UACM,CAAA;SACb;;OACQ,CAAA,GACf,oBAAC,gBAAD;QAAgB,OAAM;QAAQ,WAAU;QAEtC,UAAA,qBAAC,SAAD;SAAS,cAAc;SAAvB,UAAA,CACE,oBAAC,cAAD;UACE,OAAO;UACP,eAAe,UAAU;UACzB,aAAa,EAAE,uBAAuB;UACtC,cAAY,EAAE,uBAAuB;UACrC,YAAY,UAAU;WACpB,IAAI,MAAM,QAAQ,eAAe,CAAC,QAAQ,QAAQ,KAAK,QAAQ,UAAU,QAAQ,QAAQ,KAAK,MAAM,GAAG,EAAE,CAAC;UAC5G;SACD,CAAA,GACD,qBAAC,aAAD,EAAA,UAAA,CACG,SAAS,KAAK,QAAQ;UACrB,MAAM,WAAW,QAAQ,KAAK,SAAS,GAAG;UAC1C,OACE,oBAAC,aAAD;WAEE,OAAO;WACP,gBAAc;WACd,gBAAgB,UAAU,QAAQ,WAAW,QAAQ,KAAK,QAAO,SAAQ,SAAS,GAAG,IAAI,CAAC,GAAG,QAAQ,MAAM,GAAG,CAAC;WAE9G,UAAA;UACU,GANN,GAMM;SAEjB,CAAC,GACA,KAAK,KAAK,KACT,qBAAC,aAAD;UAAa,OAAO,cAAc;UAAQ,gBAAgB,UAAU,UAAU,IAAI;UAAlF,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,gBAAiB,CAAA,GAC3B,EAAE,0BAA0B,EAAE,KAAK,iBAAiB,IAAI,KAAK,KAAK,CAAC,CACzD;SAEJ,CAAA,CAAA,EAAA,CAAA,CACN;;OACK,CAAA,CACT;;KACA,CAAA;KAEV,QAAQ,OAAO,KAAI,UAClB,oBAAC,WAAD;MAA2B,OAAO,MAAM;MACrC,UAAA,MAAM,SAAS,WAEV,qBAAC,QAAD;OAAQ,OAAO,mBAAmB,SAAS,KAAK;OAAG,gBAAe,UAAS,UAAU,SAAS,OAAO,KAAK;OAAG,UAAU,CAAC;OAAxH,UAAA,CACE,oBAAC,eAAD;QAAe,MAAK;QAAK,WAAU;QAAS,cAAY,MAAM;QAC5D,UAAA,oBAAC,aAAD,EAAa,aAAY,IAAK,CAAA;OACjB,CAAA,GACf,oBAAC,eAAD,EAAA,WACI,MAAM,WAAW,CAAC,EAAA,CAAG,KAAI,WAAU,oBAAC,YAAD;QAA+B,OAAO,OAAO;QAAQ,UAAA,OAAO;OAAkB,GAA7D,OAAO,KAAsD,CAAC,EACvG,CAAA,CACT;MAGR,CAAA,IAAA,oBAAC,gBAAD;OACS;OACP,OAAO,mBAAmB,SAAS,KAAK;OACxC,UAAU,CAAC;OACX,WAAU,UAAS,UAAU,SAAS,OAAO,KAAK;MACnD,CAAA;KAEE,GApBK,MAAM,GAoBX,CACZ;KAED,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACE,oBAAC,MAAD;QAAM,MAAK;QAAoB,WAAU;OAAyC,CAAA;OAClF,oBAAC,QAAD;QAAM,WAAU;QAAyB,UAAA,EAAE,+BAA+B;OAAQ,CAAA;OAClF,qBAAC,QAAD;QAAM,WAAW,GAAG,4CAA4C,aAAa,oBAAoB,0BAA0B;QAA3H,UAAA,CACE,oBAAC,QAAD,EAAM,WAAW,GAAG,uBAAuB,aAAa,sBAAsB,WAAW,EAAI,CAAA,GAC5F,aAAa,EAAE,qCAAqC,IAAI,EAAE,qCAAqC,CAC5F;;MACH;;IACF;GApJK,GAAA,QAAQ,GAoJb,CACE;;CAER,CAAA;AAEX"}
+{"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", {