@ecsplico/editor 3.1.0 → 3.2.0

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

@@ -0,0 +1,88 @@
+import { basketOf } from "../baskets.js";
+import { compositeBasketsOf } from "../nodes.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { Icon } from "../../../react/Icon.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../react/ui/popover.js";
+import { compositeOfRow } from "../rows.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/composites/react/CompositeBasketMenu.tsx
+const OPTION = "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-150 hover:bg-muted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary";
+/**
+* Basket choice of a Baustein: the child (a button) opens a list of the editor's baskets (a dot in the basket's colour
+* and its label) and „Kein Korb“. The menu is a popover, not a dropdown menu: a dropdown item cannot show a dot in an
+* arbitrary CSS colour.
+*/
+function CompositeBasketMenu({ editor, row, children }) {
+	const { t } = useEditorI18n();
+	const [open, setOpen] = useState(false);
+	const current = basketOf(row);
+	function choose(next) {
+		setOpen(false);
+		const found = compositeOfRow(editor.state.doc, row);
+		if (found) editor.commands.setCompositeBasket(next, found.pos);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			className: "w-40 gap-0 p-1",
+			onCloseAutoFocus: (event) => event.preventDefault(),
+			children: /* @__PURE__ */ jsxs("div", {
+				role: "menu",
+				"aria-label": t("composites.basket.label"),
+				children: [compositeBasketsOf(editor).map((candidate) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": current === candidate.id,
+					className: OPTION,
+					onClick: () => choose(candidate.id),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "size-2.5 shrink-0 rounded-full",
+							style: { backgroundColor: candidate.color }
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: candidate.label
+						}),
+						current === candidate.id && /* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-check",
+							className: "ml-auto size-3.5 shrink-0"
+						})
+					]
+				}, candidate.id)), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": current === null,
+					className: OPTION,
+					onClick: () => choose(null),
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-circle-dashed",
+							className: "size-3 shrink-0 text-muted-foreground"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: t("composites.basket.none")
+						}),
+						current === null && /* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-check",
+							className: "ml-auto size-3.5 shrink-0"
+						})
+					]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { CompositeBasketMenu };
+
+//# sourceMappingURL=CompositeBasketMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeBasketMenu.js","names":[],"sources":["../../../../src/features/composites/react/CompositeBasketMenu.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { type ReactNode, useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../react/ui/popover'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { basketOf } from '../baskets'\nimport { compositeBasketsOf } from '../nodes'\nimport { compositeOfRow, type CompositeRow } from '../rows'\n\nconst OPTION = 'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm text-foreground transition-colors duration-150 hover:bg-muted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary'\n\n/**\n * Basket choice of a Baustein: the child (a button) opens a list of the editor's baskets (a dot in the basket's colour\n * and its label) and „Kein Korb“. The menu is a popover, not a dropdown menu: a dropdown item cannot show a dot in an\n * arbitrary CSS colour.\n */\nexport function CompositeBasketMenu({ editor, row, children }: { editor: Editor, row: CompositeRow, children: ReactNode }) {\n  const { t } = useEditorI18n()\n  const [open, setOpen] = useState(false)\n\n  const current = basketOf(row)\n\n  function choose(next: string | null) {\n    setOpen(false)\n    const found = compositeOfRow(editor.state.doc, row)\n    if (found) editor.commands.setCompositeBasket(next, found.pos)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <PopoverContent\n        side=\"bottom\"\n        align=\"start\"\n        sideOffset={4}\n        className=\"w-40 gap-0 p-1\"\n        onCloseAutoFocus={event => event.preventDefault()}\n      >\n        <div role=\"menu\" aria-label={t('composites.basket.label')}>\n          {compositeBasketsOf(editor).map(candidate => (\n            <button\n              key={candidate.id}\n              type=\"button\"\n              role=\"menuitemradio\"\n              aria-checked={current === candidate.id}\n              className={OPTION}\n              onClick={() => choose(candidate.id)}\n            >\n              <span className=\"size-2.5 shrink-0 rounded-full\" style={{ backgroundColor: candidate.color }} />\n              <span className=\"truncate\">{candidate.label}</span>\n              {current === candidate.id && <Icon name=\"i-lucide-check\" className=\"ml-auto size-3.5 shrink-0\" />}\n            </button>\n          ))}\n          <button type=\"button\" role=\"menuitemradio\" aria-checked={current === null} className={OPTION} onClick={() => choose(null)}>\n            <Icon name=\"i-lucide-circle-dashed\" className=\"size-3 shrink-0 text-muted-foreground\" />\n            <span className=\"truncate\">{t('composites.basket.none')}</span>\n            {current === null && <Icon name=\"i-lucide-check\" className=\"ml-auto size-3.5 shrink-0\" />}\n          </button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,MAAM,SAAS;;;;;;AAOf,SAAgB,oBAAoB,EAAE,QAAQ,KAAK,YAAwE;CACzH,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,UAAU,SAAS,GAAG;CAE5B,SAAS,OAAO,MAAqB;EACnC,QAAQ,KAAK;EACb,MAAM,QAAQ,eAAe,OAAO,MAAM,KAAK,GAAG;EAClD,IAAI,OAAO,OAAO,SAAS,mBAAmB,MAAM,MAAM,GAAG;CAC/D;CAEA,OACE,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GAAS;EAAyB,CAAA,GAClD,oBAAC,gBAAD;GACE,MAAK;GACL,OAAM;GACN,YAAY;GACZ,WAAU;GACV,mBAAkB,UAAS,MAAM,eAAe;GAEhD,UAAA,qBAAC,OAAD;IAAK,MAAK;IAAO,cAAY,EAAE,yBAAyB;IAAxD,UAAA,CACG,mBAAmB,MAAM,CAAC,CAAC,KAAI,cAC9B,qBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc,YAAY,UAAU;KACpC,WAAW;KACX,eAAe,OAAO,UAAU,EAAE;KANpC,UAAA;MAQE,oBAAC,QAAD;OAAM,WAAU;OAAiC,OAAO,EAAE,iBAAiB,UAAU,MAAM;MAAI,CAAA;MAC/F,oBAAC,QAAD;OAAM,WAAU;OAAY,UAAA,UAAU;MAAY,CAAA;MACjD,YAAY,UAAU,MAAM,oBAAC,MAAD;OAAM,MAAK;OAAiB,WAAU;MAA6B,CAAA;KAC1F;IAVD,GAAA,UAAU,EAUT,CACT,GACD,qBAAC,UAAD;KAAQ,MAAK;KAAS,MAAK;KAAgB,gBAAc,YAAY;KAAM,WAAW;KAAQ,eAAe,OAAO,IAAI;KAAxH,UAAA;MACE,oBAAC,MAAD;OAAM,MAAK;OAAyB,WAAU;MAAyC,CAAA;MACvF,oBAAC,QAAD;OAAM,WAAU;OAAY,UAAA,EAAE,wBAAwB;MAAQ,CAAA;MAC7D,YAAY,QAAQ,oBAAC,MAAD;OAAM,MAAK;OAAiB,WAAU;MAA6B,CAAA;KAClF;IACL,CAAA,CAAA;;EACS,CAAA,CACT;;AAEb"}

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

@@ -1,4 +1,6 @@
 import { startBlockDrag } from "../../../core/block-drag.js";
+import { basketById, basketOf, titleHiddenOf } from "../baskets.js";
+import { compositeBasketsOf } from "../nodes.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { cn } from "../../../react/ui/utils.js";
 import { Icon } from "../../../react/Icon.js";
@@ -9,6 +11,7 @@ import { compositeOfRow, setCompositeTags } from "../rows.js";
 import { compositeSectionOf } from "../anchors.js";
 import { derivedChromeOf } from "../derived-chrome.js";
 import { rowStatus } from "../meta-display.js";
+import { CompositeBasketMenu } from "./CompositeBasketMenu.js";
 import { useCompositeRows } from "./use-composite-rows.js";
 import { CompositeDetails } from "./CompositeDetails.js";
 import { CompositeStatusMenu } from "./CompositeStatusMenu.js";
@@ -81,7 +84,9 @@ function CompositeChrome({ editor }) {
 		if (!found || !startBlockDrag(editor, event, found.pos)) event.preventDefault();
 	}
 	const expanded = useStore(editor.storage.composite.expanded);
+	const revealedTitles = useStore(editor.storage.composite.revealedTitles);
 	const placed = useMemo(() => {
+		const baskets = compositeBasketsOf(editor);
 		let hiddenUntil = -1;
 		return rows.flatMap((row) => {
 			if (row.pos < hiddenUntil) return [];
@@ -90,19 +95,23 @@ function CompositeChrome({ editor }) {
 			if (!open) hiddenUntil = row.end;
 			const anchor = anchors.get(row.key);
 			if (!anchor) return [];
-			const left = anchor.lineEnd + (anchor.titleEmpty ? 116 : 12);
+			const titleHidden = titleHiddenOf(row);
+			const inStrip = titleHidden && !(row.id && revealedTitles.has(row.id)) && anchor.toggleSize > 0;
+			const left = inStrip ? anchor.toggleLeft + anchor.toggleSize + 6 : anchor.lineEnd + (anchor.titleEmpty ? 116 : 12);
 			return [{
 				row,
 				anchor,
 				left,
-				top: anchor.lastCenter - ROW_HEIGHT / 2,
+				top: (inStrip ? anchor.toggleTop + anchor.toggleSize / 2 : anchor.lastCenter) - ROW_HEIGHT / 2,
 				width: Math.max((frame?.right ?? anchor.right) - left, 120),
 				status: rowStatus(row, t),
 				derived: derived && {
 					stale: derived.stale,
 					open,
 					toggleable: !!row.id
-				}
+				},
+				basket: basketById(baskets, basketOf(row)) ?? null,
+				titleHidden
 			}];
 		});
 	}, [
@@ -111,6 +120,7 @@ function CompositeChrome({ editor }) {
 		anchors,
 		frame,
 		expanded,
+		revealedTitles,
 		t
 	]);
 	function toggleExpanded(row) {
@@ -119,6 +129,10 @@ function CompositeChrome({ editor }) {
 	function removeTag(row, tag) {
 		setCompositeTags(editor, row, row.tags.filter((candidate) => candidate !== tag));
 	}
+	function toggleTitleHidden(row) {
+		const found = compositeOfRow(editor.state.doc, row);
+		if (found) editor.commands.setCompositeTitleHidden(!titleHiddenOf(row), found.pos);
+	}
 	if (!host) return null;
 	return createPortal(/* @__PURE__ */ jsx("div", {
 		className: "absolute top-0 left-0 h-0 w-0",
@@ -158,7 +172,7 @@ function CompositeChrome({ editor }) {
 				row: item.row,
 				editable
 			})
-		})] }), (item.status || item.derived || item.row.tagsVisible && (item.row.tags.length > 0 || editable)) && /* @__PURE__ */ jsxs("div", {
+		})] }), (editable || item.basket || item.status || item.derived || item.row.tagsVisible && item.row.tags.length > 0) && /* @__PURE__ */ jsxs("div", {
 			className: "absolute z-10 flex items-center gap-px overflow-hidden rounded-md bg-background",
 			style: {
 				top: `${item.top}px`,
@@ -169,6 +183,40 @@ function CompositeChrome({ editor }) {
 			onMouseEnter: () => setChipsHoveredKey(item.row.key),
 			onMouseLeave: () => setChipsHoveredKey(null),
 			children: [
+				editable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CompositeBasketMenu, {
+					editor,
+					row: item.row,
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: CHIP_BUTTON,
+						"aria-label": t("composites.basket.label"),
+						title: item.basket ? `${t("composites.basket.label")}: ${item.basket.label}` : t("composites.basket.label"),
+						children: item.basket ? /* @__PURE__ */ jsx("span", {
+							className: "size-2.5 rounded-full",
+							style: { backgroundColor: item.basket.color }
+						}) : /* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-circle-dashed",
+							className: "size-3.5"
+						})
+					})
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: CHIP_BUTTON,
+					"aria-label": t(item.titleHidden ? "composites.titleHidden.show" : "composites.titleHidden.hide"),
+					title: t(item.titleHidden ? "composites.titleHidden.show" : "composites.titleHidden.hide"),
+					onClick: () => toggleTitleHidden(item.row),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: item.titleHidden ? "i-lucide-eye" : "i-lucide-eye-off",
+						className: "size-3.5"
+					})
+				})] }) : item.basket && /* @__PURE__ */ jsx("span", {
+					className: CHIP,
+					title: item.basket.label,
+					children: /* @__PURE__ */ jsx("span", {
+						className: "size-2.5 rounded-full",
+						style: { backgroundColor: item.basket.color }
+					})
+				}),
 				item.derived && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					item.derived.toggleable && /* @__PURE__ */ jsx("button", {
 						type: "button",

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

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

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

@@ -1,6 +1,7 @@
 import { compositeKind } from "../kinds.js";
+import { basketOf, titleHiddenOf } from "../baskets.js";
 import { derivationOf } from "../derivation.js";
-import { compositeKindsOf } from "../nodes.js";
+import { compositeBasketsOf, compositeKindsOf } from "../nodes.js";
 import { cn } from "../../../react/ui/utils.js";
 import { useStore } from "../../../react/use-store.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,13 +15,22 @@ function CompositeView({ editor, node, selected }) {
 	const expanded = useStore(editor.storage.composite.expanded);
 	const id = node.attrs.id;
 	const collapsed = typeof id === "string" && id !== "" && derivationOf(node) !== null && !expanded.has(id);
-	const placeholderVars = { "--composite-title-placeholder": cssString(kind.titlePlaceholder) };
+	const basket = basketOf(node);
+	const basketColor = compositeBasketsOf(editor).find((candidate) => candidate.id === basket)?.color;
+	const revealedTitles = useStore(editor.storage.composite.revealedTitles);
+	const titleHidden = titleHiddenOf(node) && !(typeof id === "string" && revealedTitles.has(id));
+	const placeholderVars = {
+		"--composite-title-placeholder": cssString(kind.titlePlaceholder),
+		...basketColor ? { "--sk-basket-color": basketColor } : {}
+	};
 	return /* @__PURE__ */ jsxs(NodeViewWrapper, {
 		as: "section",
 		className: cn("composite", collapsed && "is-collapsed", selected && "is-selected rounded-md ring-1 ring-primary"),
 		"data-type": "composite",
 		"data-kind": node.attrs.kind,
 		"data-id": node.attrs.id || void 0,
+		"data-basket": basket ?? void 0,
+		"data-title-hidden": titleHidden ? "" : void 0,
 		style: placeholderVars,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "composite__toggle",

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

@@ -1 +1 @@
-{"version":3,"file":"CompositeView.js","names":[],"sources":["../../../../src/features/composites/react/CompositeView.tsx"],"sourcesContent":["import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react'\nimport type { CSSProperties } from 'react'\nimport { cn } from '../../../react/ui/utils'\nimport { compositeKind } from '../kinds'\nimport { useStore } from '../../../react/use-store'\nimport { derivationOf } from '../derivation'\nimport { compositeKindsOf } from '../nodes'\n\n/** `text` as a CSS string literal (for `content:`). */\nconst cssString = (text: string) => `\"${text.replace(/[\"\\\\]/g, '\\\\$&').replace(/\\n/g, '\\\\a ')}\"`\n\n/** The composite block: the section with its content. The kind icon is drawn by the composite chrome overlay. */\nexport function CompositeView({ editor, node, selected }: NodeViewProps) {\n  const kind = compositeKind(compositeKindsOf(editor), String(node.attrs.kind))\n  // A derived Baustein (one with a `meta.derivation`) shows collapsed to a faded preview until it is opened; the content\n  // stays laid out (CSS clips it), so editing positions are unaffected. The chrome's chevron and a caret inside open it.\n  const expanded = useStore(editor.storage.composite.expanded)\n  const id: unknown = node.attrs.id\n  const collapsed = typeof id === 'string' && id !== '' && derivationOf(node) !== null && !expanded.has(id)\n  // Placeholder of the empty title (composites.css `content: var(…)`); a nested composite sets its own.\n  const placeholderVars = { '--composite-title-placeholder': cssString(kind.titlePlaceholder) } as CSSProperties\n  return (\n    <NodeViewWrapper\n      as=\"section\"\n      className={cn('composite', collapsed && 'is-collapsed', selected && 'is-selected rounded-md ring-1 ring-primary')}\n      data-type=\"composite\"\n      data-kind={node.attrs.kind}\n      data-id={node.attrs.id || undefined}\n      style={placeholderVars}\n    >\n      {/* Anchor of the kind icon on the left border: it only takes the icon's place and size. The composite chrome overlay\n          measures it and draws the icon as the button that opens the details popover and drags the composite. */}\n      <span className=\"composite__toggle\" contentEditable={false} aria-hidden=\"true\" />\n      <NodeViewContent className=\"composite__content\" />\n    </NodeViewWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,MAAM,aAAa,SAAiB,IAAI,KAAK,QAAQ,UAAU,MAAM,CAAC,CAAC,QAAQ,OAAO,MAAM,EAAE;;AAG9F,SAAgB,cAAc,EAAE,QAAQ,MAAM,YAA2B;CACvE,MAAM,OAAO,cAAc,iBAAiB,MAAM,GAAG,OAAO,KAAK,MAAM,IAAI,CAAC;CAG5E,MAAM,WAAW,SAAS,OAAO,QAAQ,UAAU,QAAQ;CAC3D,MAAM,KAAc,KAAK,MAAM;CAC/B,MAAM,YAAY,OAAO,OAAO,YAAY,OAAO,MAAM,aAAa,IAAI,MAAM,QAAQ,CAAC,SAAS,IAAI,EAAE;CAExG,MAAM,kBAAkB,EAAE,iCAAiC,UAAU,KAAK,gBAAgB,EAAE;CAC5F,OACE,qBAAC,iBAAD;EACE,IAAG;EACH,WAAW,GAAG,aAAa,aAAa,gBAAgB,YAAY,4CAA4C;EAChH,aAAU;EACV,aAAW,KAAK,MAAM;EACtB,WAAS,KAAK,MAAM,MAAM,KAAA;EAC1B,OAAO;EANT,UAAA,CAUE,oBAAC,QAAD;GAAM,WAAU;GAAoB,iBAAiB;GAAO,eAAY;EAAQ,CAAA,GAChF,oBAAC,iBAAD,EAAiB,WAAU,qBAAsB,CAAA,CAClC;;AAErB"}
+{"version":3,"file":"CompositeView.js","names":[],"sources":["../../../../src/features/composites/react/CompositeView.tsx"],"sourcesContent":["import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react'\nimport type { CSSProperties } from 'react'\nimport { cn } from '../../../react/ui/utils'\nimport { basketOf, titleHiddenOf } from '../baskets'\nimport { compositeKind } from '../kinds'\nimport { useStore } from '../../../react/use-store'\nimport { derivationOf } from '../derivation'\nimport { compositeBasketsOf, compositeKindsOf } from '../nodes'\n\n/** `text` as a CSS string literal (for `content:`). */\nconst cssString = (text: string) => `\"${text.replace(/[\"\\\\]/g, '\\\\$&').replace(/\\n/g, '\\\\a ')}\"`\n\n/** The composite block: the section with its content. The kind icon is drawn by the composite chrome overlay. */\nexport function CompositeView({ editor, node, selected }: NodeViewProps) {\n  const kind = compositeKind(compositeKindsOf(editor), String(node.attrs.kind))\n  // A derived Baustein (one with a `meta.derivation`) shows collapsed to a faded preview until it is opened; the content\n  // stays laid out (CSS clips it), so editing positions are unaffected. The chrome's chevron and a caret inside open it.\n  const expanded = useStore(editor.storage.composite.expanded)\n  const id: unknown = node.attrs.id\n  const collapsed = typeof id === 'string' && id !== '' && derivationOf(node) !== null && !expanded.has(id)\n  // Colour basket (`meta.basket`): `data-basket` carries the id, the stripe takes the basket's colour from `--sk-basket-color`.\n  const basket = basketOf(node)\n  const basketColor = compositeBasketsOf(editor).find(candidate => candidate.id === basket)?.color\n  // A hidden title (`meta.titleHidden`) stays hidden until a caret enters it (`revealedTitles`, see `CompositeNode`).\n  const revealedTitles = useStore(editor.storage.composite.revealedTitles)\n  const titleHidden = titleHiddenOf(node) && !(typeof id === 'string' && revealedTitles.has(id))\n  // Placeholder of the empty title (composites.css `content: var(…)`); a nested composite sets its own.\n  const placeholderVars = {\n    '--composite-title-placeholder': cssString(kind.titlePlaceholder),\n    ...(basketColor ? { '--sk-basket-color': basketColor } : {}),\n  } as CSSProperties\n  return (\n    <NodeViewWrapper\n      as=\"section\"\n      className={cn('composite', collapsed && 'is-collapsed', selected && 'is-selected rounded-md ring-1 ring-primary')}\n      data-type=\"composite\"\n      data-kind={node.attrs.kind}\n      data-id={node.attrs.id || undefined}\n      data-basket={basket ?? undefined}\n      data-title-hidden={titleHidden ? '' : undefined}\n      style={placeholderVars}\n    >\n      {/* Anchor of the kind icon on the left border: it only takes the icon's place and size. The composite chrome overlay\n          measures it and draws the icon as the button that opens the details popover and drags the composite. */}\n      <span className=\"composite__toggle\" contentEditable={false} aria-hidden=\"true\" />\n      <NodeViewContent className=\"composite__content\" />\n    </NodeViewWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,aAAa,SAAiB,IAAI,KAAK,QAAQ,UAAU,MAAM,CAAC,CAAC,QAAQ,OAAO,MAAM,EAAE;;AAG9F,SAAgB,cAAc,EAAE,QAAQ,MAAM,YAA2B;CACvE,MAAM,OAAO,cAAc,iBAAiB,MAAM,GAAG,OAAO,KAAK,MAAM,IAAI,CAAC;CAG5E,MAAM,WAAW,SAAS,OAAO,QAAQ,UAAU,QAAQ;CAC3D,MAAM,KAAc,KAAK,MAAM;CAC/B,MAAM,YAAY,OAAO,OAAO,YAAY,OAAO,MAAM,aAAa,IAAI,MAAM,QAAQ,CAAC,SAAS,IAAI,EAAE;CAExG,MAAM,SAAS,SAAS,IAAI;CAC5B,MAAM,cAAc,mBAAmB,MAAM,CAAC,CAAC,MAAK,cAAa,UAAU,OAAO,MAAM,CAAC,EAAE;CAE3F,MAAM,iBAAiB,SAAS,OAAO,QAAQ,UAAU,cAAc;CACvE,MAAM,cAAc,cAAc,IAAI,KAAK,EAAE,OAAO,OAAO,YAAY,eAAe,IAAI,EAAE;CAE5F,MAAM,kBAAkB;EACtB,iCAAiC,UAAU,KAAK,gBAAgB;EAChE,GAAI,cAAc,EAAE,qBAAqB,YAAY,IAAI,CAAC;CAC5D;CACA,OACE,qBAAC,iBAAD;EACE,IAAG;EACH,WAAW,GAAG,aAAa,aAAa,gBAAgB,YAAY,4CAA4C;EAChH,aAAU;EACV,aAAW,KAAK,MAAM;EACtB,WAAS,KAAK,MAAM,MAAM,KAAA;EAC1B,eAAa,UAAU,KAAA;EACvB,qBAAmB,cAAc,KAAK,KAAA;EACtC,OAAO;EART,UAAA,CAYE,oBAAC,QAAD;GAAM,WAAU;GAAoB,iBAAiB;GAAO,eAAY;EAAQ,CAAA,GAChF,oBAAC,iBAAD,EAAiB,WAAU,qBAAsB,CAAA,CAClC;;AAErB"}

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

@@ -2,7 +2,7 @@ import { derivationOf } from "../derivation.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { cn } from "../../../react/ui/utils.js";
 import { Icon } from "../../../react/Icon.js";
-import { derivationDetailsOf, derivationMethodLabel } from "../derived-chrome.js";
+import { derivationDetailsOf, derivationIsForeign, derivationMethodLabel } from "../derived-chrome.js";
 import { formatDate } from "../meta-display.js";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -24,6 +24,7 @@ function DerivationBadge({ editor, node, detailed }) {
 	]);
 	if (!derivation) return null;
 	const method = derivationMethodLabel(t, derivation.method);
+	const foreign = derivationIsForeign(editor, derivation);
 	const created = derivation.createdAt ? formatDate(derivation.createdAt) : "";
 	if (!detailed) return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground",
@@ -35,6 +36,7 @@ function DerivationBadge({ editor, node, detailed }) {
 			children: [
 				t("composites.derivation.badge"),
 				method,
+				foreign ? t("composites.derivation.foreign") : "",
 				created
 			].filter(Boolean).join(" · ")
 		})]
@@ -53,6 +55,13 @@ function DerivationBadge({ editor, node, detailed }) {
 							className: "size-3.5"
 						}), t("composites.derivation.badge")]
 					}),
+					details.foreign && /* @__PURE__ */ jsxs("span", {
+						className: cn(CHIP, "text-muted-foreground"),
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "i-lucide-file-symlink",
+							className: "size-3.5"
+						}), t("composites.derivation.foreign")]
+					}),
 					details.stale && /* @__PURE__ */ jsxs("span", {
 						className: cn(CHIP, "text-(--sk-warning)"),
 						children: [/* @__PURE__ */ jsx(Icon, {

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

@@ -1 +1 @@
-{"version":3,"file":"DerivationBadge.js","names":[],"sources":["../../../../src/features/composites/react/DerivationBadge.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { useMemo } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { derivationOf } from '../derivation'\nimport { derivationDetailsOf, derivationMethodLabel } from '../derived-chrome'\nimport { formatDate } from '../meta-display'\n\nconst CHIP = 'inline-flex h-5 shrink-0 items-center gap-1 rounded-sm px-1.5 text-xs leading-none whitespace-nowrap'\n\n/**\n * Where a derived Baustein comes from. Compact (the `derivation` field type): the „abgeleitet“ badge with method and\n * date. `detailed` (the details card): also the model, whether the source changed („Quelle geändert“), whether the body\n * was edited since it was generated („bearbeitet“) and a link to the stored raw output. The detailed variant hashes\n * the body, so it belongs only where one Baustein is shown.\n */\nexport function DerivationBadge({ editor, node, detailed }: { editor: Editor, node: ProseMirrorNode, detailed?: boolean }) {\n  const { t } = useEditorI18n()\n  const derivation = derivationOf(node)\n  const details = useMemo(() => detailed ? derivationDetailsOf(editor, node) : null, [detailed, editor, node])\n  if (!derivation) return null\n  const method = derivationMethodLabel(t, derivation.method)\n  const created = derivation.createdAt ? formatDate(derivation.createdAt) : ''\n\n  if (!detailed) {\n    return (\n      <div className=\"flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground\">\n        <Icon name=\"i-lucide-git-branch\" className=\"size-3.5 shrink-0\" />\n        <span className=\"truncate\">{[t('composites.derivation.badge'), method, created].filter(Boolean).join(' · ')}</span>\n      </div>\n    )\n  }\n  if (!details) return null\n\n  return (\n    <div className=\"flex flex-col gap-1.5 rounded-md p-2 text-xs ring-1 ring-border\">\n      <div className=\"flex flex-wrap items-center gap-1\">\n        <span className={cn(CHIP, 'text-muted-foreground')}>\n          <Icon name=\"i-lucide-git-branch\" className=\"size-3.5\" />{t('composites.derivation.badge')}\n        </span>\n        {details.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        {details.edited && (\n          <span className={cn(CHIP, 'text-muted-foreground')}>\n            <Icon name=\"i-lucide-pencil\" className=\"size-3.5\" />{t('composites.derivation.edited')}\n          </span>\n        )}\n      </div>\n      <dl className=\"grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5\">\n        <dt className=\"text-muted-foreground\">{t('composites.derivation.method')}</dt>\n        <dd className=\"truncate text-foreground\">{method}</dd>\n        {derivation.model && (\n          <>\n            <dt className=\"text-muted-foreground\">{t('composites.derivation.model')}</dt>\n            <dd className=\"truncate text-foreground\" title={derivation.model}>{derivation.model}</dd>\n          </>\n        )}\n        {created && (\n          <>\n            <dt className=\"text-muted-foreground\">{t('composites.derivation.createdAt')}</dt>\n            <dd className=\"text-foreground\">{created}</dd>\n          </>\n        )}\n      </dl>\n      {details.outputUrl && (\n        <a href={details.outputUrl} target=\"_blank\" rel=\"noopener\" className=\"inline-flex w-fit items-center gap-1 text-primary hover:underline\">\n          <Icon name=\"i-lucide-external-link\" className=\"size-3.5\" />{t('composites.derivation.openOutput')}\n        </a>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,OAAO;;;;;;;AAQb,SAAgB,gBAAgB,EAAE,QAAQ,MAAM,YAA2E;CACzH,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,aAAa,aAAa,IAAI;CACpC,MAAM,UAAU,cAAc,WAAW,oBAAoB,QAAQ,IAAI,IAAI,MAAM;EAAC;EAAU;EAAQ;CAAI,CAAC;CAC3G,IAAI,CAAC,YAAY,OAAO;CACxB,MAAM,SAAS,sBAAsB,GAAG,WAAW,MAAM;CACzD,MAAM,UAAU,WAAW,YAAY,WAAW,WAAW,SAAS,IAAI;CAE1E,IAAI,CAAC,UACH,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,MAAD;GAAM,MAAK;GAAsB,WAAU;EAAqB,CAAA,GAChE,oBAAC,QAAD;GAAM,WAAU;GAAY,UAAA;IAAC,EAAE,6BAA6B;IAAG;IAAQ;GAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,KAAK;EAAQ,CAAA,CAC/G;;CAGT,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,qBAAC,QAAD;MAAM,WAAW,GAAG,MAAM,uBAAuB;MAAjD,UAAA,CACE,oBAAC,MAAD;OAAM,MAAK;OAAsB,WAAU;MAAY,CAAA,GAAE,EAAE,6BAA6B,CACpF;;KACL,QAAQ,SACP,qBAAC,QAAD;MAAM,WAAW,GAAG,MAAM,qBAAqB;MAA/C,UAAA,CACE,oBAAC,MAAD;OAAM,MAAK;OAA0B,WAAU;MAAY,CAAA,GAAE,EAAE,6BAA6B,CACxF;;KAEP,QAAQ,UACP,qBAAC,QAAD;MAAM,WAAW,GAAG,MAAM,uBAAuB;MAAjD,UAAA,CACE,oBAAC,MAAD;OAAM,MAAK;OAAkB,WAAU;MAAY,CAAA,GAAE,EAAE,8BAA8B,CACjF;;IAEL;;GACL,qBAAC,MAAD;IAAI,WAAU;IAAd,UAAA;KACE,oBAAC,MAAD;MAAI,WAAU;MAAyB,UAAA,EAAE,8BAA8B;KAAM,CAAA;KAC7E,oBAAC,MAAD;MAAI,WAAU;MAA4B,UAAA;KAAW,CAAA;KACpD,WAAW,SACV,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;MAAI,WAAU;MAAyB,UAAA,EAAE,6BAA6B;KAAM,CAAA,GAC5E,oBAAC,MAAD;MAAI,WAAU;MAA2B,OAAO,WAAW;MAAQ,UAAA,WAAW;KAAU,CAAA,CACxF,EAAA,CAAA;KAEH,WACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;MAAI,WAAU;MAAyB,UAAA,EAAE,iCAAiC;KAAM,CAAA,GAChF,oBAAC,MAAD;MAAI,WAAU;MAAmB,UAAA;KAAY,CAAA,CAC7C,EAAA,CAAA;IAEF;;GACH,QAAQ,aACP,qBAAC,KAAD;IAAG,MAAM,QAAQ;IAAW,QAAO;IAAS,KAAI;IAAW,WAAU;IAArE,UAAA,CACE,oBAAC,MAAD;KAAM,MAAK;KAAyB,WAAU;IAAY,CAAA,GAAE,EAAE,kCAAkC,CAC/F;;EAEF;;AAET"}
+{"version":3,"file":"DerivationBadge.js","names":[],"sources":["../../../../src/features/composites/react/DerivationBadge.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { useMemo } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { derivationOf } from '../derivation'\nimport { derivationDetailsOf, derivationIsForeign, derivationMethodLabel } from '../derived-chrome'\nimport { formatDate } from '../meta-display'\n\nconst CHIP = 'inline-flex h-5 shrink-0 items-center gap-1 rounded-sm px-1.5 text-xs leading-none whitespace-nowrap'\n\n/**\n * Where a derived Baustein comes from. Compact (the `derivation` field type): the „abgeleitet“ badge with method and\n * date. `detailed` (the details card): also the model, whether the source changed („Quelle geändert“), whether the body\n * was edited since it was generated („bearbeitet“) and a link to the stored raw output. The detailed variant hashes\n * the body, so it belongs only where one Baustein is shown.\n */\nexport function DerivationBadge({ editor, node, detailed }: { editor: Editor, node: ProseMirrorNode, detailed?: boolean }) {\n  const { t } = useEditorI18n()\n  const derivation = derivationOf(node)\n  const details = useMemo(() => detailed ? derivationDetailsOf(editor, node) : null, [detailed, editor, node])\n  if (!derivation) return null\n  const method = derivationMethodLabel(t, derivation.method)\n  const foreign = derivationIsForeign(editor, derivation)\n  const created = derivation.createdAt ? formatDate(derivation.createdAt) : ''\n\n  if (!detailed) {\n    return (\n      <div className=\"flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground\">\n        <Icon name=\"i-lucide-git-branch\" className=\"size-3.5 shrink-0\" />\n        <span className=\"truncate\">{[t('composites.derivation.badge'), method, foreign ? t('composites.derivation.foreign') : '', created].filter(Boolean).join(' · ')}</span>\n      </div>\n    )\n  }\n  if (!details) return null\n\n  return (\n    <div className=\"flex flex-col gap-1.5 rounded-md p-2 text-xs ring-1 ring-border\">\n      <div className=\"flex flex-wrap items-center gap-1\">\n        <span className={cn(CHIP, 'text-muted-foreground')}>\n          <Icon name=\"i-lucide-git-branch\" className=\"size-3.5\" />{t('composites.derivation.badge')}\n        </span>\n        {details.foreign && (\n          <span className={cn(CHIP, 'text-muted-foreground')}>\n            <Icon name=\"i-lucide-file-symlink\" className=\"size-3.5\" />{t('composites.derivation.foreign')}\n          </span>\n        )}\n        {details.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        {details.edited && (\n          <span className={cn(CHIP, 'text-muted-foreground')}>\n            <Icon name=\"i-lucide-pencil\" className=\"size-3.5\" />{t('composites.derivation.edited')}\n          </span>\n        )}\n      </div>\n      <dl className=\"grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5\">\n        <dt className=\"text-muted-foreground\">{t('composites.derivation.method')}</dt>\n        <dd className=\"truncate text-foreground\">{method}</dd>\n        {derivation.model && (\n          <>\n            <dt className=\"text-muted-foreground\">{t('composites.derivation.model')}</dt>\n            <dd className=\"truncate text-foreground\" title={derivation.model}>{derivation.model}</dd>\n          </>\n        )}\n        {created && (\n          <>\n            <dt className=\"text-muted-foreground\">{t('composites.derivation.createdAt')}</dt>\n            <dd className=\"text-foreground\">{created}</dd>\n          </>\n        )}\n      </dl>\n      {details.outputUrl && (\n        <a href={details.outputUrl} target=\"_blank\" rel=\"noopener\" className=\"inline-flex w-fit items-center gap-1 text-primary hover:underline\">\n          <Icon name=\"i-lucide-external-link\" className=\"size-3.5\" />{t('composites.derivation.openOutput')}\n        </a>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,OAAO;;;;;;;AAQb,SAAgB,gBAAgB,EAAE,QAAQ,MAAM,YAA2E;CACzH,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,aAAa,aAAa,IAAI;CACpC,MAAM,UAAU,cAAc,WAAW,oBAAoB,QAAQ,IAAI,IAAI,MAAM;EAAC;EAAU;EAAQ;CAAI,CAAC;CAC3G,IAAI,CAAC,YAAY,OAAO;CACxB,MAAM,SAAS,sBAAsB,GAAG,WAAW,MAAM;CACzD,MAAM,UAAU,oBAAoB,QAAQ,UAAU;CACtD,MAAM,UAAU,WAAW,YAAY,WAAW,WAAW,SAAS,IAAI;CAE1E,IAAI,CAAC,UACH,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,MAAD;GAAM,MAAK;GAAsB,WAAU;EAAqB,CAAA,GAChE,oBAAC,QAAD;GAAM,WAAU;GAAY,UAAA;IAAC,EAAE,6BAA6B;IAAG;IAAQ,UAAU,EAAE,+BAA+B,IAAI;IAAI;GAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,KAAK;EAAQ,CAAA,CAClK;;CAGT,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,qBAAC,QAAD;MAAM,WAAW,GAAG,MAAM,uBAAuB;MAAjD,UAAA,CACE,oBAAC,MAAD;OAAM,MAAK;OAAsB,WAAU;MAAY,CAAA,GAAE,EAAE,6BAA6B,CACpF;;KACL,QAAQ,WACP,qBAAC,QAAD;MAAM,WAAW,GAAG,MAAM,uBAAuB;MAAjD,UAAA,CACE,oBAAC,MAAD;OAAM,MAAK;OAAwB,WAAU;MAAY,CAAA,GAAE,EAAE,+BAA+B,CACxF;;KAEP,QAAQ,SACP,qBAAC,QAAD;MAAM,WAAW,GAAG,MAAM,qBAAqB;MAA/C,UAAA,CACE,oBAAC,MAAD;OAAM,MAAK;OAA0B,WAAU;MAAY,CAAA,GAAE,EAAE,6BAA6B,CACxF;;KAEP,QAAQ,UACP,qBAAC,QAAD;MAAM,WAAW,GAAG,MAAM,uBAAuB;MAAjD,UAAA,CACE,oBAAC,MAAD;OAAM,MAAK;OAAkB,WAAU;MAAY,CAAA,GAAE,EAAE,8BAA8B,CACjF;;IAEL;;GACL,qBAAC,MAAD;IAAI,WAAU;IAAd,UAAA;KACE,oBAAC,MAAD;MAAI,WAAU;MAAyB,UAAA,EAAE,8BAA8B;KAAM,CAAA;KAC7E,oBAAC,MAAD;MAAI,WAAU;MAA4B,UAAA;KAAW,CAAA;KACpD,WAAW,SACV,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;MAAI,WAAU;MAAyB,UAAA,EAAE,6BAA6B;KAAM,CAAA,GAC5E,oBAAC,MAAD;MAAI,WAAU;MAA2B,OAAO,WAAW;MAAQ,UAAA,WAAW;KAAU,CAAA,CACxF,EAAA,CAAA;KAEH,WACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;MAAI,WAAU;MAAyB,UAAA,EAAE,iCAAiC;KAAM,CAAA,GAChF,oBAAC,MAAD;MAAI,WAAU;MAAmB,UAAA;KAAY,CAAA,CAC7C,EAAA,CAAA;IAEF;;GACH,QAAQ,aACP,qBAAC,KAAD;IAAG,MAAM,QAAQ;IAAW,QAAO;IAAS,KAAI;IAAW,WAAU;IAArE,UAAA,CACE,oBAAC,MAAD;KAAM,MAAK;KAAyB,WAAU;IAAY,CAAA,GAAE,EAAE,kCAAkC,CAC/F;;EAEF;;AAET"}

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

@@ -0,0 +1,11 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/composites/react/FocusChip.d.ts
+/**
+ * Focus mode indicator (mounted by the composites feature): while a Baustein is focused (`focusComposite`) a small chip
+ * fixed at the bottom of the surface names it and leaves focus mode.
+ */
+export declare function FocusChip({ editor }: {
+  editor: Editor;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=FocusChip.d.ts.map

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

@@ -0,0 +1,50 @@
+import { findBlockById } from "../../../core/schema/block-ids.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.js";
+import { compositeFocusOf } from "../focus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorState } from "@tiptap/react";
+//#region src/features/composites/react/FocusChip.tsx
+/**
+* Focus mode indicator (mounted by the composites feature): while a Baustein is focused (`focusComposite`) a small chip
+* fixed at the bottom of the surface names it and leaves focus mode.
+*/
+function FocusChip({ editor }) {
+	const { t } = useEditorI18n();
+	const title = useEditorState({
+		editor,
+		selector: ({ editor: current }) => {
+			if (current.isDestroyed) return null;
+			const id = compositeFocusOf(current.state);
+			const found = id ? findBlockById(current.state.doc, id) : null;
+			return found ? found.node.child(0).textContent.trim() || t("composites.untitled") : null;
+		}
+	});
+	if (title === null) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed bottom-4 left-1/2 z-20 flex max-w-[90vw] -translate-x-1/2 items-center gap-2 rounded-full border border-border bg-background py-1 pl-3 pr-1 shadow-lg",
+		role: "status",
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: "i-lucide-focus",
+				className: "shrink-0 text-primary"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate text-sm",
+				children: t("composites.focus.chip", { title })
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				size: "xs",
+				variant: "ghost",
+				"aria-label": t("composites.focus.leave"),
+				onClick: () => editor.commands.focusComposite(null),
+				children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-x" }), t("composites.focus.release")]
+			})
+		]
+	});
+}
+//#endregion
+export { FocusChip };
+
+//# sourceMappingURL=FocusChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FocusChip.js","names":[],"sources":["../../../../src/features/composites/react/FocusChip.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEditorState } from '@tiptap/react'\nimport { findBlockById } from '../../../core/schema'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { compositeFocusOf } from '../focus'\n\n/**\n * Focus mode indicator (mounted by the composites feature): while a Baustein is focused (`focusComposite`) a small chip\n * fixed at the bottom of the surface names it and leaves focus mode.\n */\nexport function FocusChip({ editor }: { editor: Editor }) {\n  const { t } = useEditorI18n()\n  const title = useEditorState({\n    editor,\n    selector: ({ editor: current }) => {\n      if (current.isDestroyed) return null\n      const id = compositeFocusOf(current.state)\n      const found = id ? findBlockById(current.state.doc, id) : null\n      return found ? found.node.child(0).textContent.trim() || t('composites.untitled') : null\n    },\n  })\n  if (title === null) return null\n  return (\n    <div\n      className=\"fixed bottom-4 left-1/2 z-20 flex max-w-[90vw] -translate-x-1/2 items-center gap-2 rounded-full border border-border bg-background py-1 pl-3 pr-1 shadow-lg\"\n      role=\"status\"\n    >\n      <Icon name=\"i-lucide-focus\" className=\"shrink-0 text-primary\" />\n      <span className=\"truncate text-sm\">{t('composites.focus.chip', { title })}</span>\n      <Button size=\"xs\" variant=\"ghost\" aria-label={t('composites.focus.leave')} onClick={() => editor.commands.focusComposite(null)}>\n        <Icon name=\"i-lucide-x\" />\n        {t('composites.focus.release')}\n      </Button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,UAAU,EAAE,UAA8B;CACxD,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,QAAQ,eAAe;EAC3B;EACA,WAAW,EAAE,QAAQ,cAAc;GACjC,IAAI,QAAQ,aAAa,OAAO;GAChC,MAAM,KAAK,iBAAiB,QAAQ,KAAK;GACzC,MAAM,QAAQ,KAAK,cAAc,QAAQ,MAAM,KAAK,EAAE,IAAI;GAC1D,OAAO,QAAQ,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,EAAE,qBAAqB,IAAI;EACtF;CACF,CAAC;CACD,IAAI,UAAU,MAAM,OAAO;CAC3B,OACE,qBAAC,OAAD;EACE,WAAU;EACV,MAAK;EAFP,UAAA;GAIE,oBAAC,MAAD;IAAM,MAAK;IAAiB,WAAU;GAAyB,CAAA;GAC/D,oBAAC,QAAD;IAAM,WAAU;IAAoB,UAAA,EAAE,yBAAyB,EAAE,MAAM,CAAC;GAAQ,CAAA;GAChF,qBAAC,QAAD;IAAQ,MAAK;IAAK,SAAQ;IAAQ,cAAY,EAAE,wBAAwB;IAAG,eAAe,OAAO,SAAS,eAAe,IAAI;IAA7H,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA,GACxB,EAAE,0BAA0B,CACvB;;EACL;;AAET"}

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

@@ -1,7 +1,9 @@
 import { DRAG_HANDLE_VISIBILITIES, HEADING_CONVERSION_SCOPES, KIND_ICON_VISIBILITIES, STRUCTURE_MODES, TREE_ROOTS } from "../../../settings/values.js";
+import { SPLIT_TARGET_CHARS_MAX, clampSplitTargetChars } from "../../../settings/index.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { Icon } from "../../../react/Icon.js";
 import { useEditorSettings } from "../../../react/settings.js";
+import { Input } from "../../../react/ui/input.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../react/ui/select.js";
 import { SettingsSection } from "../../../react/SettingsSection.js";
 import { Label } from "../../../react/ui/label.js";
@@ -9,7 +11,7 @@ import { RadioGroup, RadioGroupItem } from "../../../react/ui/radio-group.js";
 import { STRUCTURE_MODE_KEYS } from "../structure-mode.js";
 import { DRAG_HANDLE_KEYS, HEADING_SCOPE_KEYS, KIND_ICON_KEYS, optionItems } from "../editing-settings-keys.js";
 import { TREE_ROOT_KEYS } from "../tree-root.js";
-import { useId } from "react";
+import { useEffect, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/composites/react/SettingsEditingTab.tsx
 /** A group of radio options under a legend (the counterpart of Nuxt UI's `URadioGroup`), the options one above the other. */
@@ -58,6 +60,18 @@ function RadioOption({ item }) {
 function SettingsEditingTab({ kinds }) {
 	const { settings, update } = useEditorSettings();
 	const kindLabelId = useId();
+	const splitTargetId = useId();
+	const [splitTarget, setSplitTarget] = useState(String(settings.blocks.splitTargetChars));
+	useEffect(() => {
+		setSplitTarget(String(settings.blocks.splitTargetChars));
+	}, [settings.blocks.splitTargetChars]);
+	const commitSplitTarget = () => {
+		const next = clampSplitTargetChars(splitTarget, settings.blocks.splitTargetChars);
+		update((draft) => {
+			draft.blocks.splitTargetChars = next;
+		});
+		setSplitTarget(String(next));
+	};
 	const { t } = useEditorI18n();
 	const structureItems = optionItems(STRUCTURE_MODES, STRUCTURE_MODE_KEYS, t);
 	const scopeItems = optionItems(HEADING_CONVERSION_SCOPES, HEADING_SCOPE_KEYS, t);
@@ -126,6 +140,27 @@ function SettingsEditingTab({ kinds }) {
 							}, kind.id)) })]
 						})]
 					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-start justify-between gap-4 py-3",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: splitTargetId,
+							className: "min-w-0 flex-1 text-sm font-medium text-foreground",
+							children: t("settings.editing.splitTargetChars")
+						}), /* @__PURE__ */ jsx(Input, {
+							id: splitTargetId,
+							type: "number",
+							min: 200,
+							max: SPLIT_TARGET_CHARS_MAX,
+							step: 100,
+							className: "w-32",
+							value: splitTarget,
+							onChange: (event) => setSplitTarget(event.target.value),
+							onBlur: commitSplitTarget,
+							onKeyDown: (event) => {
+								if (event.key === "Enter") commitSplitTarget();
+							}
+						})]
+					}),
 					/* @__PURE__ */ jsx(RadioField, {
 						legend: t("composites.settings.kindIcon.legend"),
 						items: kindIconItems,