@ecsplico/editor 3.6.0 → 4.0.0

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

@@ -26,7 +26,7 @@ import { createPortal } from "react-dom";
 * chip and one chip per tag (with a `+` chip to add tags), and on the front the kind icon. The icon is a button that
 * opens the details popover (kind with a confirmation before it changes, the kind's fields and the summary;
 * `CompositeDetails`) and, in an editable editor, the composite's drag handle: dragging it moves the composite
-* (`startBlockDrag`). With `blocks.kindIcon: 'hover'` it shows only while the composite is hovered, its popover is
+* (`startBlockDrag`). With `blocks.blockTypeIcon: 'hover'` it shows only while the composite is hovered, its popover is
 * open or the icon has keyboard focus. Chips and popover also render in read-only editors, without edit affordances.
 * The node view's own description and tags rows are hidden by CSS; this overlay shows and edits them.
 */
@@ -44,7 +44,7 @@ function CompositeChrome({ editor }) {
 	}, [editor]);
 	const { settings } = useEditorSettings();
 	const { t } = useEditorI18n();
-	const iconOnHover = settings.blocks.kindIcon === "hover";
+	const iconOnHover = settings.blocks.blockTypeIcon === "hover";
 	const [hoveredKeys, setHoveredKeys] = useState(NO_KEYS);
 	const [chipsHoveredKey, setChipsHoveredKey] = useState(null);
 	const latestRows = useRef(rows);
@@ -83,8 +83,8 @@ function CompositeChrome({ editor }) {
 		const found = compositeOfRow(editor.state.doc, row);
 		if (!found || !startBlockDrag(editor, event, found.pos)) event.preventDefault();
 	}
-	const expanded = useStore(editor.storage.composite.expanded);
-	const revealedTitles = useStore(editor.storage.composite.revealedTitles);
+	const expanded = useStore(editor.storage.typedBlock.expanded);
+	const revealedTitles = useStore(editor.storage.typedBlock.revealedTitles);
 	const placed = useMemo(() => {
 		const baskets = compositeBasketsOf(editor);
 		let hiddenUntil = -1;
@@ -108,10 +108,12 @@ function CompositeChrome({ editor }) {
 				status: rowStatus(row, t),
 				derived: derived && {
 					stale: derived.stale,
+					sourceMissing: derived.sourceMissing,
 					open,
 					toggleable: !!row.id
 				},
-				basket: basketById(baskets, basketOf(row)) ?? null,
+				hasBasket: row.capabilities.has("basket"),
+				basket: row.capabilities.has("basket") ? basketById(baskets, basketOf(row)) ?? null : null,
 				titleHidden
 			}];
 		});
@@ -185,7 +187,7 @@ function CompositeChrome({ editor }) {
 			onMouseEnter: () => setChipsHoveredKey(item.row.key),
 			onMouseLeave: () => setChipsHoveredKey(null),
 			children: [
-				item.editable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CompositeBasketMenu, {
+				item.editable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [item.hasBasket && /* @__PURE__ */ jsx(CompositeBasketMenu, {
 					editor,
 					row: item.row,
 					children: /* @__PURE__ */ jsx("button", {
@@ -245,6 +247,13 @@ function CompositeChrome({ editor }) {
 							name: "i-lucide-triangle-alert",
 							className: "size-3.5"
 						}), t("composites.derivation.stale")]
+					}),
+					item.derived.sourceMissing && /* @__PURE__ */ jsxs("span", {
+						className: cn(CHIP, "text-(--sk-warning)"),
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-unlink",
+							className: "size-3.5"
+						}), t("composites.derivation.sourceMissing")]
 					})
 				] }),
 				item.status && (item.editable ? /* @__PURE__ */ jsx(CompositeStatusMenu, {

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 { 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 { basketById, basketOf, titleHiddenOf } from '../baskets'\nimport { compositeBasketsOf } from '../nodes'\nimport { compositeOfRow, type CompositeRow, setCompositeTags } from '../rows'\nimport { CompositeBasketMenu } from './CompositeBasketMenu'\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  const revealedTitles = useStore(editor.storage.composite.revealedTitles)\n\n  const placed = useMemo(() => {\n    const baskets = compositeBasketsOf(editor)\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      const titleHidden = titleHiddenOf(row)\n      // A hidden title leaves nothing to measure: the chips sit in the strip beside the kind icon (`composites.css`).\n      const inStrip = titleHidden && !(row.id && revealedTitles.has(row.id)) && anchor.toggleSize > 0\n      // An empty title shows a placeholder the anchor cannot measure: keep clear of it.\n      const left = inStrip ? anchor.toggleLeft + anchor.toggleSize + 6 : anchor.lineEnd + (anchor.titleEmpty ? 116 : 12)\n      return [{\n        row,\n        anchor,\n        // A kind without `chrome.controls` renders as in a read-only editor.\n        editable: editable && row.controls,\n        left,\n        top: (inStrip ? anchor.toggleTop + anchor.toggleSize / 2 : 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        basket: basketById(baskets, basketOf(row)) ?? null,\n        titleHidden,\n      }]\n    })\n  }, [editor, rows, anchors, frame, expanded, revealedTitles, editable, 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  function toggleTitleHidden(row: CompositeRow) {\n    const found = compositeOfRow(editor.state.doc, row)\n    if (found) editor.commands.setCompositeTitleHidden(!titleHiddenOf(row), found.pos)\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={item.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                    item.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={item.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={item.editable} />\n              </PopoverContent>\n            </Popover>\n          )}\n\n          {(item.editable || item.basket || item.status || item.derived || (item.row.tagsVisible && item.row.tags.length > 0)) && (\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.editable\n                ? (\n                    <>\n                      <CompositeBasketMenu editor={editor} row={item.row}>\n                        <button\n                          type=\"button\"\n                          className={CHIP_BUTTON}\n                          aria-label={t('composites.basket.label')}\n                          title={item.basket ? `${t('composites.basket.label')}: ${item.basket.label}` : t('composites.basket.label')}\n                        >\n                          {item.basket\n                            ? <span className=\"size-2.5 rounded-full\" style={{ backgroundColor: item.basket.color }} />\n                            : <Icon name=\"i-lucide-circle-dashed\" className=\"size-3.5\" />}\n                        </button>\n                      </CompositeBasketMenu>\n                      <button\n                        type=\"button\"\n                        className={CHIP_BUTTON}\n                        aria-label={t(item.titleHidden ? 'composites.titleHidden.show' : 'composites.titleHidden.hide')}\n                        title={t(item.titleHidden ? 'composites.titleHidden.show' : 'composites.titleHidden.hide')}\n                        onClick={() => toggleTitleHidden(item.row)}\n                      >\n                        <Icon name={item.titleHidden ? 'i-lucide-eye' : 'i-lucide-eye-off'} className=\"size-3.5\" />\n                      </button>\n                    </>\n                  )\n                : item.basket && (\n                    <span className={CHIP} title={item.basket.label}>\n                      <span className=\"size-2.5 rounded-full\" style={{ backgroundColor: item.basket.color }} />\n                    </span>\n                  )}\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 && (item.editable\n                ? (\n                    <CompositeStatusMenu editor={editor} row={item.row}>\n                      <button type=\"button\" className={CHIP_BUTTON} aria-label={t('composites.status.label', { status: item.status.label })}>\n                        <Icon name={item.status.icon} className={cn('size-3.5', STATUS_COLOR[item.status.color] ?? item.status.color)} />{item.status.label}\n                      </button>\n                    </CompositeStatusMenu>\n                  )\n                : (\n                    <span className={CHIP}>\n                      <Icon name={item.status.icon} className={cn('size-3.5', STATUS_COLOR[item.status.color] ?? item.status.color)} />{item.status.label}\n                    </span>\n                  ))}\n\n              {(item.row.tagsVisible ? item.row.tags : []).map(tag => (\n                <span key={tag} className={cn(CHIP, 'group max-w-40 gap-0')}>\n                  <span className=\"truncate\">#{tag}</span>\n                  {item.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              {item.editable && item.row.tagsVisible && (\n                <Popover>\n                  <PopoverTrigger asChild>\n                    <button type=\"button\" className={CHIP_BUTTON} aria-label={t('composites.tag.add')} title={t('composites.tag.add')}>\n                      <Icon name=\"i-lucide-plus\" className=\"size-3.5\" />\n                    </button>\n                  </PopoverTrigger>\n                  <PopoverContent\n                    side=\"bottom\"\n                    align=\"start\"\n                    sideOffset={6}\n                    className=\"w-auto gap-0 p-0\"\n                    onCloseAutoFocus={event => event.preventDefault()}\n                  >\n                    <div className=\"w-64 p-3\">\n                      <CompositeTagsEditor editor={editor} row={item.row} />\n                    </div>\n                  </PopoverContent>\n                </Popover>\n              )}\n            </div>\n          )}\n        </Fragment>\n      ))}\n    </div>,\n    host,\n  )\n}\n\nconst NO_KEYS: ReadonlySet<string> = new Set()\n\n/** Chips start right after the title's last character and run on to the editor's right edge. */\nconst ROW_HEIGHT = 24\n\nconst CHIP = 'inline-flex h-5 shrink-0 items-center gap-1 rounded-sm px-1.5 text-xs leading-none whitespace-nowrap text-muted-foreground'\nconst CHIP_BUTTON = `${CHIP} transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary`\n\n/** `statusStyle` names Nuxt UI text colors: the shadcn counterparts (`--sk-info` and `--sk-success` come from the token stylesheets). */\nconst STATUS_COLOR: Record<string, string> = {\n  'text-muted': 'text-muted-foreground',\n  'text-info': 'text-(--sk-info)',\n  'text-success': 'text-(--sk-success)',\n  'text-dimmed': 'text-muted-foreground/70',\n}\n\n/** Scale and fade in from the icon (`transform-origin` is Radix's), a bit longer than the default; `composites.css` defines the keyframes and the reduced-motion override. */\nconst DETAILS_POPOVER = 'w-auto gap-0 p-0 composite-popover data-[state=open]:animate-[composite-pop-in_160ms_var(--ease-out)] data-[state=closed]:animate-[composite-pop-out_120ms_var(--ease-out)]'\n"],"mappings":"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"}
+{"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 { basketById, basketOf, titleHiddenOf } from '../baskets'\nimport { compositeBasketsOf } from '../nodes'\nimport { compositeOfRow, type CompositeRow, setCompositeTags } from '../rows'\nimport { CompositeBasketMenu } from './CompositeBasketMenu'\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.blockTypeIcon: '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.blockTypeIcon === 'hover'\n\n  // Hover state of `blockTypeIcon: '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.typedBlock.expanded)\n  const revealedTitles = useStore(editor.storage.typedBlock.revealedTitles)\n\n  const placed = useMemo(() => {\n    const baskets = compositeBasketsOf(editor)\n    // End of the collapsed derived Typed block 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      const titleHidden = titleHiddenOf(row)\n      // A hidden title leaves nothing to measure: the chips sit in the strip beside the kind icon (`composites.css`).\n      const inStrip = titleHidden && !(row.id && revealedTitles.has(row.id)) && anchor.toggleSize > 0\n      // An empty title shows a placeholder the anchor cannot measure: keep clear of it.\n      const left = inStrip ? anchor.toggleLeft + anchor.toggleSize + 6 : anchor.lineEnd + (anchor.titleEmpty ? 116 : 12)\n      return [{\n        row,\n        anchor,\n        // A kind without `chrome.controls` renders as in a read-only editor.\n        editable: editable && row.controls,\n        left,\n        top: (inStrip ? anchor.toggleTop + anchor.toggleSize / 2 : 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, sourceMissing: derived.sourceMissing, open, toggleable: !!row.id },\n        // The basket menu and chip belong to the `basket` capability: a Block type without it has neither.\n        hasBasket: row.capabilities.has('basket'),\n        basket: row.capabilities.has('basket') ? basketById(baskets, basketOf(row)) ?? null : null,\n        titleHidden,\n      }]\n    })\n  }, [editor, rows, anchors, frame, expanded, revealedTitles, editable, 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  function toggleTitleHidden(row: CompositeRow) {\n    const found = compositeOfRow(editor.state.doc, row)\n    if (found) editor.commands.setCompositeTitleHidden(!titleHiddenOf(row), found.pos)\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={item.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                    item.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={item.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={item.editable} />\n              </PopoverContent>\n            </Popover>\n          )}\n\n          {(item.editable || item.basket || item.status || item.derived || (item.row.tagsVisible && item.row.tags.length > 0)) && (\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.editable\n                ? (\n                    <>\n                      {item.hasBasket && (\n                        <CompositeBasketMenu editor={editor} row={item.row}>\n                          <button\n                            type=\"button\"\n                            className={CHIP_BUTTON}\n                            aria-label={t('composites.basket.label')}\n                            title={item.basket ? `${t('composites.basket.label')}: ${item.basket.label}` : t('composites.basket.label')}\n                          >\n                            {item.basket\n                              ? <span className=\"size-2.5 rounded-full\" style={{ backgroundColor: item.basket.color }} />\n                              : <Icon name=\"i-lucide-circle-dashed\" className=\"size-3.5\" />}\n                          </button>\n                        </CompositeBasketMenu>\n                      )}\n                      <button\n                        type=\"button\"\n                        className={CHIP_BUTTON}\n                        aria-label={t(item.titleHidden ? 'composites.titleHidden.show' : 'composites.titleHidden.hide')}\n                        title={t(item.titleHidden ? 'composites.titleHidden.show' : 'composites.titleHidden.hide')}\n                        onClick={() => toggleTitleHidden(item.row)}\n                      >\n                        <Icon name={item.titleHidden ? 'i-lucide-eye' : 'i-lucide-eye-off'} className=\"size-3.5\" />\n                      </button>\n                    </>\n                  )\n                : item.basket && (\n                    <span className={CHIP} title={item.basket.label}>\n                      <span className=\"size-2.5 rounded-full\" style={{ backgroundColor: item.basket.color }} />\n                    </span>\n                  )}\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                  {item.derived.sourceMissing && (\n                    <span className={cn(CHIP, 'text-(--sk-warning)')}>\n                      <Icon name=\"i-lucide-unlink\" className=\"size-3.5\" />{t('composites.derivation.sourceMissing')}\n                    </span>\n                  )}\n                </>\n              )}\n\n              {item.status && (item.editable\n                ? (\n                    <CompositeStatusMenu editor={editor} row={item.row}>\n                      <button type=\"button\" className={CHIP_BUTTON} aria-label={t('composites.status.label', { status: item.status.label })}>\n                        <Icon name={item.status.icon} className={cn('size-3.5', STATUS_COLOR[item.status.color] ?? item.status.color)} />{item.status.label}\n                      </button>\n                    </CompositeStatusMenu>\n                  )\n                : (\n                    <span className={CHIP}>\n                      <Icon name={item.status.icon} className={cn('size-3.5', STATUS_COLOR[item.status.color] ?? item.status.color)} />{item.status.label}\n                    </span>\n                  ))}\n\n              {(item.row.tagsVisible ? item.row.tags : []).map(tag => (\n                <span key={tag} className={cn(CHIP, 'group max-w-40 gap-0')}>\n                  <span className=\"truncate\">#{tag}</span>\n                  {item.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              {item.editable && item.row.tagsVisible && (\n                <Popover>\n                  <PopoverTrigger asChild>\n                    <button type=\"button\" className={CHIP_BUTTON} aria-label={t('composites.tag.add')} title={t('composites.tag.add')}>\n                      <Icon name=\"i-lucide-plus\" className=\"size-3.5\" />\n                    </button>\n                  </PopoverTrigger>\n                  <PopoverContent\n                    side=\"bottom\"\n                    align=\"start\"\n                    sideOffset={6}\n                    className=\"w-auto gap-0 p-0\"\n                    onCloseAutoFocus={event => event.preventDefault()}\n                  >\n                    <div className=\"w-64 p-3\">\n                      <CompositeTagsEditor editor={editor} row={item.row} />\n                    </div>\n                  </PopoverContent>\n                </Popover>\n              )}\n            </div>\n          )}\n        </Fragment>\n      ))}\n    </div>,\n    host,\n  )\n}\n\nconst NO_KEYS: ReadonlySet<string> = new Set()\n\n/** Chips start right after the title's last character and run on to the editor's right edge. */\nconst ROW_HEIGHT = 24\n\nconst CHIP = 'inline-flex h-5 shrink-0 items-center gap-1 rounded-sm px-1.5 text-xs leading-none whitespace-nowrap text-muted-foreground'\nconst CHIP_BUTTON = `${CHIP} transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary`\n\n/** `statusStyle` names Nuxt UI text colors: the shadcn counterparts (`--sk-info` and `--sk-success` come from the token stylesheets). */\nconst STATUS_COLOR: Record<string, string> = {\n  'text-muted': 'text-muted-foreground',\n  'text-info': 'text-(--sk-info)',\n  'text-success': 'text-(--sk-success)',\n  'text-dimmed': 'text-muted-foreground/70',\n}\n\n/** Scale and fade in from the icon (`transform-origin` is Radix's), a bit longer than the default; `composites.css` defines the keyframes and the reduced-motion override. */\nconst DETAILS_POPOVER = 'w-auto gap-0 p-0 composite-popover data-[state=open]:animate-[composite-pop-in_160ms_var(--ease-out)] data-[state=closed]:animate-[composite-pop-out_120ms_var(--ease-out)]'\n"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ 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 the meta keys the new kind declares, plus
+ * that names the field values the switch drops (`changeBlockType` keeps the meta keys the new kind declares, plus
  * `derivation` and `bib`, see `keepsMetaKey`) and
  * applies the change on „Ändern“.
  */

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

@@ -1,6 +1,7 @@
+import { derivationOf } from "../../../core/derivation.js";
 import { keepsMetaKey } from "../meta-keys.js";
-import { derivationOf } from "../derivation.js";
-import { compositeKindsOf } from "../nodes.js";
+import { blockTypesOf } from "../nodes.js";
+import { propertyHostOf } from "../properties.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { Icon } from "../../../react/Icon.js";
 import { Button } from "../../../react/ui/button.js";
@@ -15,19 +16,19 @@ 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 the meta keys the new kind declares, plus
+* that names the field values the switch drops (`changeBlockType` 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" && field.type !== "derivation");
+	const kinds = useMemo(() => blockTypesOf(editor), [editor]);
+	const fields = row.definitions.filter((field) => field.key !== "status" && field.type !== "derivation");
 	const derivedNode = useMemo(() => {
-		const found = compositeOfRow(editor.state.doc, row);
+		const found = propertyHostOf(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. */
+	/** The places that refer to the row's Typed block (chips in other blocks, `reference` fields), for the „Verweise“ list. */
 	const backlinks = useMemo(() => row.id ? compositeBacklinks(editor.state.doc, kinds, row.id) : [], [
 		editor,
 		kinds,
@@ -44,7 +45,7 @@ function CompositeDetails({ editor, row, editable }) {
 		const target = kinds.find((kind) => kind.id === pending);
 		if (!target) return [];
 		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 field = row.definitions.find((candidate) => candidate.key === key);
 			const text = typeof value === "object" ? JSON.stringify(value) : String(value);
 			return {
 				key,
@@ -56,7 +57,7 @@ function CompositeDetails({ editor, row, editable }) {
 		kinds,
 		pending,
 		row.meta,
-		row.fields
+		row.definitions
 	]);
 	function onKind(kind) {
 		setPending(kind !== row.kind ? kind : null);
@@ -65,7 +66,7 @@ function CompositeDetails({ editor, row, editable }) {
 		const kind = pending;
 		setPending(null);
 		const found = compositeOfRow(editor.state.doc, row);
-		if (kind && found) editor.commands.setCompositeKind(kind, found.pos);
+		if (kind && found) editor.commands.changeBlockType(kind, found.pos);
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex w-72 flex-col gap-2.5 p-3 text-sm",

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 { 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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"}
+{"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 '../../../core/derivation'\nimport { keepsMetaKey } from '../meta-keys'\nimport { blockTypesOf } from '../nodes'\nimport { propertyHostOf } from '../properties'\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 (`changeBlockType` 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(() => blockTypesOf(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.definitions.filter(field => field.key !== 'status' && field.type !== 'derivation')\n  const derivedNode = useMemo(() => {\n    const found = propertyHostOf(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 Typed block (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.definitions.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.definitions])\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.changeBlockType(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

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

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

@@ -1,9 +1,9 @@
+import { propertyHostOf, setBlockProperty } from "../properties.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { cn } from "../../../react/ui/utils.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";
@@ -29,7 +29,7 @@ const SELECT_SIZE = {
 	md: ""
 };
 /**
-* One meta field of a Baustein as an input that writes through `setCompositeMetaField`. Text-like inputs keep a local
+* One Block property of a block as an input that writes through `setBlockProperty`. Text-like inputs keep a local
 * draft and commit after typing pauses, on blur and on unmount, so the one-frame-late re-read of the rows never
 * overwrites what is being typed.
 */
@@ -64,7 +64,7 @@ function CompositeFieldEditor({ editor, row, field, disabled, size = "sm" }) {
 		if (!dirty.current) return;
 		dirty.current = false;
 		const current = target.current;
-		if (!current.editor.isDestroyed) setCompositeMetaField(current.editor, current.row, current.field.key, draftRef.current);
+		if (!current.editor.isDestroyed) setBlockProperty(current.editor, current.row, current.field.key, draftRef.current);
 	}, []);
 	useEffect(() => commit, [
 		commit,
@@ -84,7 +84,7 @@ function CompositeFieldEditor({ editor, row, field, disabled, size = "sm" }) {
 		commit();
 	}
 	function onChoice(value) {
-		setCompositeMetaField(editor, row, field.key, value === EMPTY ? "" : value);
+		setBlockProperty(editor, row, field.key, value === EMPTY ? "" : value);
 	}
 	if (field.type === "select") return /* @__PURE__ */ jsxs(Select, {
 		value: stored,
@@ -114,7 +114,7 @@ function CompositeFieldEditor({ editor, row, field, disabled, size = "sm" }) {
 					className: "size-3.5 shrink-0 accent-(--sk-primary)",
 					checked: chosen.includes(option.value),
 					disabled,
-					onChange: (event) => setCompositeMetaField(editor, row, field.key, event.target.checked ? [...chosen, option.value] : chosen.filter((item) => item !== option.value))
+					onChange: (event) => setBlockProperty(editor, row, field.key, event.target.checked ? [...chosen, option.value] : chosen.filter((item) => item !== option.value))
 				}), option.label]
 			}, option.value))
 		});
@@ -133,7 +133,7 @@ function CompositeFieldEditor({ editor, row, field, disabled, size = "sm" }) {
 		disabled
 	});
 	if (field.type === "derivation") {
-		const derived = compositeOfRow(editor.state.doc, row)?.node;
+		const derived = propertyHostOf(editor.state.doc, row)?.node;
 		return derived ? /* @__PURE__ */ jsx(DerivationBadge, {
 			editor,
 			node: derived

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 { 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 === 'multiselect') {\n    const value = row.meta[field.key]\n    const chosen = Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string') : []\n    return (\n      <div role=\"group\" aria-label={field.label} className=\"flex w-full flex-col gap-1\">\n        {(field.options ?? []).map(option => (\n          <label key={option.value} className={cn('flex items-center gap-2', size === 'md' ? 'text-sm' : 'text-xs')}>\n            <input\n              type=\"checkbox\"\n              className=\"size-3.5 shrink-0 accent-(--sk-primary)\"\n              checked={chosen.includes(option.value)}\n              disabled={disabled}\n              onChange={event => setCompositeMetaField(editor, row, field.key, event.target.checked ? [...chosen, option.value] : chosen.filter(item => item !== option.value))}\n            />\n            {option.label}\n          </label>\n        ))}\n      </div>\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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"}
+{"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 { PropertyDefinition } from '../../../core/properties'\nimport { metaText } from '../meta-display'\nimport { type BlockProperties, propertyHostOf, setBlockProperty } from '../properties'\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 Block property of a block as an input that writes through `setBlockProperty`. 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: BlockProperties\n  field: PropertyDefinition\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) setBlockProperty(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    setBlockProperty(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 === 'multiselect') {\n    const value = row.meta[field.key]\n    const chosen = Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string') : []\n    return (\n      <div role=\"group\" aria-label={field.label} className=\"flex w-full flex-col gap-1\">\n        {(field.options ?? []).map(option => (\n          <label key={option.value} className={cn('flex items-center gap-2', size === 'md' ? 'text-sm' : 'text-xs')}>\n            <input\n              type=\"checkbox\"\n              className=\"size-3.5 shrink-0 accent-(--sk-primary)\"\n              checked={chosen.includes(option.value)}\n              disabled={disabled}\n              onChange={event => setBlockProperty(editor, row, field.key, event.target.checked ? [...chosen, option.value] : chosen.filter(item => item !== option.value))}\n            />\n            {option.label}\n          </label>\n        ))}\n      </div>\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 = propertyHostOf(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.d.ts

@@ -2,13 +2,13 @@ import { Editor } from "@tiptap/core";
 import { ReactNode } from "react";
 //#region src/features/composites/react/CompositeInspector.d.ts
 /**
- * Side panel with the metadata of the document *or* of the Baustein under the caret — one at a time — connected to
+ * Side panel with the metadata of the document *or* of the Typed block under the caret — one at a time — connected to
  * `editor`. Fills the height of its container and scrolls on its own; the width comes from the host. Open/close is
  * the host's business. The `document` prop carries host-provided document facts (title, folder, dates, presence) at
  * the top of the „Dokument“ section: render them as a `<dl>` with the same grid as below to look native.
  *
- * The „Baustein“ section shows while the caret is in a Baustein of the editor; the „Dokument“ section shows before
- * the editor was ever focused, while the caret is in editor text outside any Baustein, and while `documentFocused`.
+ * The „Block“ section shows while the caret is in a Typed block of the editor; the „Dokument“ section shows before
+ * the editor was ever focused, while the caret is in editor text outside any Typed block, and while `documentFocused`.
  * `documentFocused`: the host's document-level input (its title field) has the focus. While it is true the panel
  * shows the „Dokument“ section and keeps showing it after the input blurs, until the caret returns to the editor.
  */