@ecsplico/editor 0.0.0-stage → 1.0.0

package/dist/features/composites/anchors.d.ts

@@ -0,0 +1,47 @@
+import { ReadonlyStore } from "../../core/store.js";
+import { CompositeRow } from "./rows.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/composites/anchors.d.ts
+/** Where a Baustein sits in the scroll container's content box (so an overlay inside the container scrolls with it). */
+export interface CompositeAnchor {
+  /** The composite box's right edge. */
+  right: number;
+  /** Vertical centre of the title's last line and the x right after its last character. */
+  lastCenter: number;
+  lineEnd: number;
+  titleEmpty: boolean;
+  /** The kind icon at the front (`.composite__toggle`); all `0` when the node view has none. */
+  toggleTop: number;
+  toggleLeft: number;
+  toggleSize: number;
+}
+/** The editor's own box in the same coordinates: its right edge, where the chips end. */
+export interface CompositeFrame {
+  right: number;
+}
+/** The measurements of `observeCompositeAnchors`, as observable stores. */
+export interface CompositeAnchorsHandle {
+  /** The editor's scroll container (positioned `relative` while observed); `null` while the editor is not laid out. */
+  readonly host: ReadonlyStore<HTMLElement | null>;
+  /** By row key. Empty while the editor is not laid out (hidden by a table view, say). */
+  readonly anchors: ReadonlyStore<ReadonlyMap<string, CompositeAnchor>>;
+  readonly frame: ReadonlyStore<CompositeFrame | null>;
+  /** Measures again on the next animation frame; call when the rows changed. */
+  refresh: () => void;
+  /** Stops observing and gives the host its `position` back (idempotent). */
+  dispose: () => void;
+}
+/**
+ * The `.composite` section of a composite's node DOM: the node view's own element (Vue), or the child of the wrapper
+ * element a React node view renders into.
+ */
+export declare function compositeSectionOf(dom: Element): Element | null;
+/**
+ * Measures the title line and box of every row's composite, relative to the editor's scroll container (`host`), kept
+ * current after transactions, resizes and `refresh()`. An overlay portalled into `host` and positioned `absolute`
+ * from these numbers scrolls with the document and needs no scroll listener. `rows` is read at every measurement.
+ * Create one per editor.
+ */
+export declare function observeCompositeAnchors(editor: Editor | undefined, rows: () => readonly CompositeRow[]): CompositeAnchorsHandle;
+//#endregion
+//# sourceMappingURL=anchors.d.ts.map

package/dist/features/composites/anchors.js

@@ -0,0 +1,137 @@
+import { createStore } from "../../core/store.js";
+import { compositeOfRow } from "./rows.js";
+//#region src/features/composites/anchors.ts
+function scrollParentOf(el) {
+	for (let node = el.parentElement; node; node = node.parentElement) if (/(auto|scroll)/.test(getComputedStyle(node).overflowY)) return node;
+	return null;
+}
+/**
+* The `.composite` section of a composite's node DOM: the node view's own element (Vue), or the child of the wrapper
+* element a React node view renders into.
+*/
+function compositeSectionOf(dom) {
+	return dom.matches(".composite") ? dom : dom.querySelector(":scope > .composite");
+}
+const sameAnchor = (a, b) => Object.keys(a).every((key) => a[key] === b[key]);
+const NO_ANCHORS = /* @__PURE__ */ new Map();
+/**
+* Measures the title line and box of every row's composite, relative to the editor's scroll container (`host`), kept
+* current after transactions, resizes and `refresh()`. An overlay portalled into `host` and positioned `absolute`
+* from these numbers scrolls with the document and needs no scroll listener. `rows` is read at every measurement.
+* Create one per editor.
+*/
+function observeCompositeAnchors(editor, rows) {
+	const host = createStore(null);
+	const anchors = createStore(NO_ANCHORS);
+	const frame = createStore(null);
+	let raf = 0;
+	let disposed = false;
+	const schedule = () => {
+		if (!raf && !disposed) raf = requestAnimationFrame(measure);
+	};
+	/** The scroller this observer gave `position: relative` (only if it was static), so it can be put back. */
+	let positioned = null;
+	const restoreHostPosition = () => {
+		if (positioned) positioned.style.position = "";
+		positioned = null;
+	};
+	const clear = () => {
+		anchors.set(NO_ANCHORS);
+		frame.set(null);
+	};
+	function measure() {
+		raf = 0;
+		if (disposed) return;
+		if (!editor || editor.isDestroyed || !editor.view.dom.isConnected || !editor.view.dom.getClientRects().length) return clear();
+		const { view, state } = editor;
+		const scroller = scrollParentOf(view.dom);
+		if (!scroller) return clear();
+		if (host.get() !== scroller) {
+			restoreHostPosition();
+			if (getComputedStyle(scroller).position === "static") {
+				scroller.style.position = "relative";
+				positioned = scroller;
+			}
+			host.set(scroller);
+		}
+		const box = scroller.getBoundingClientRect();
+		const ox = scroller.scrollLeft - box.left - scroller.clientLeft;
+		const oy = scroller.scrollTop - box.top - scroller.clientTop;
+		const right = view.dom.getBoundingClientRect().right + ox;
+		if (frame.get()?.right !== right) frame.set({ right });
+		const next = /* @__PURE__ */ new Map();
+		for (const row of rows()) {
+			const found = compositeOfRow(state.doc, row);
+			const el = found ? view.nodeDOM(found.pos) : null;
+			const title = found?.node.firstChild;
+			if (!found || !title || !(el instanceof HTMLElement)) continue;
+			const rect = el.getBoundingClientRect();
+			if (!rect.height) continue;
+			const titleEl = el.querySelector(".composite-title");
+			const titleRect = (titleEl ?? el).getBoundingClientRect();
+			const lineHeight = titleEl ? parseFloat(getComputedStyle(titleEl).lineHeight) || titleRect.height : titleRect.height;
+			const toggle = compositeSectionOf(el)?.querySelector(":scope > .composite__toggle") ?? null;
+			const toggleRect = toggle ? toggle.getBoundingClientRect() : {
+				top: 0,
+				left: 0,
+				width: 0,
+				height: 0
+			};
+			let caret = {
+				left: titleRect.left,
+				top: titleRect.top,
+				bottom: titleRect.top + lineHeight
+			};
+			try {
+				caret = view.coordsAtPos(found.pos + title.nodeSize);
+			} catch {}
+			next.set(row.key, {
+				right: rect.right + ox,
+				lastCenter: (caret.top + caret.bottom) / 2 + oy,
+				lineEnd: caret.left + ox,
+				titleEmpty: title.content.size === 0,
+				toggleTop: toggle ? toggleRect.top + oy : 0,
+				toggleLeft: toggle ? toggleRect.left + ox : 0,
+				toggleSize: toggle ? Math.max(toggleRect.width, toggleRect.height) : 0
+			});
+		}
+		const prev = anchors.get();
+		let changed = prev.size !== next.size;
+		if (!changed) for (const [key, anchor] of next) {
+			const before = prev.get(key);
+			if (!before || !sameAnchor(before, anchor)) {
+				changed = true;
+				break;
+			}
+		}
+		if (changed) anchors.set(next);
+	}
+	let observer;
+	if (editor && !editor.isDestroyed) {
+		editor.on("transaction", schedule);
+		observer = new ResizeObserver(schedule);
+		observer.observe(editor.view.dom);
+		window.addEventListener("resize", schedule);
+		schedule();
+	}
+	return {
+		host,
+		anchors,
+		frame,
+		refresh: schedule,
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			editor?.off("transaction", schedule);
+			observer?.disconnect();
+			window.removeEventListener("resize", schedule);
+			restoreHostPosition();
+			if (raf) cancelAnimationFrame(raf);
+			raf = 0;
+		}
+	};
+}
+//#endregion
+export { compositeSectionOf, observeCompositeAnchors };
+
+//# sourceMappingURL=anchors.js.map

package/dist/features/composites/anchors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchors.js","names":[],"sources":["../../../src/features/composites/anchors.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { createStore, type ReadonlyStore } from '../../core/store'\nimport { compositeOfRow, type CompositeRow } from './rows'\n\n/** Where a Baustein sits in the scroll container's content box (so an overlay inside the container scrolls with it). */\nexport interface CompositeAnchor {\n  /** The composite box's right edge. */\n  right: number\n  /** Vertical centre of the title's last line and the x right after its last character. */\n  lastCenter: number\n  lineEnd: number\n  titleEmpty: boolean\n  /** The kind icon at the front (`.composite__toggle`); all `0` when the node view has none. */\n  toggleTop: number\n  toggleLeft: number\n  toggleSize: number\n}\n\n/** The editor's own box in the same coordinates: its right edge, where the chips end. */\nexport interface CompositeFrame {\n  right: number\n}\n\n/** The measurements of `observeCompositeAnchors`, as observable stores. */\nexport interface CompositeAnchorsHandle {\n  /** The editor's scroll container (positioned `relative` while observed); `null` while the editor is not laid out. */\n  readonly host: ReadonlyStore<HTMLElement | null>\n  /** By row key. Empty while the editor is not laid out (hidden by a table view, say). */\n  readonly anchors: ReadonlyStore<ReadonlyMap<string, CompositeAnchor>>\n  readonly frame: ReadonlyStore<CompositeFrame | null>\n  /** Measures again on the next animation frame; call when the rows changed. */\n  refresh: () => void\n  /** Stops observing and gives the host its `position` back (idempotent). */\n  dispose: () => void\n}\n\nfunction scrollParentOf(el: HTMLElement): HTMLElement | null {\n  for (let node = el.parentElement; node; node = node.parentElement) {\n    if (/(auto|scroll)/.test(getComputedStyle(node).overflowY)) return node\n  }\n  return null\n}\n\n/**\n * The `.composite` section of a composite's node DOM: the node view's own element (Vue), or the child of the wrapper\n * element a React node view renders into.\n */\nexport function compositeSectionOf(dom: Element): Element | null {\n  return dom.matches('.composite') ? dom : dom.querySelector(':scope > .composite')\n}\n\nconst sameAnchor = (a: CompositeAnchor, b: CompositeAnchor) => (Object.keys(a) as (keyof CompositeAnchor)[]).every(key => a[key] === b[key])\n\nconst NO_ANCHORS: ReadonlyMap<string, CompositeAnchor> = new Map()\n\n/**\n * Measures the title line and box of every row's composite, relative to the editor's scroll container (`host`), kept\n * current after transactions, resizes and `refresh()`. An overlay portalled into `host` and positioned `absolute`\n * from these numbers scrolls with the document and needs no scroll listener. `rows` is read at every measurement.\n * Create one per editor.\n */\nexport function observeCompositeAnchors(editor: Editor | undefined, rows: () => readonly CompositeRow[]): CompositeAnchorsHandle {\n  const host = createStore<HTMLElement | null>(null)\n  const anchors = createStore<ReadonlyMap<string, CompositeAnchor>>(NO_ANCHORS)\n  const frame = createStore<CompositeFrame | null>(null)\n\n  let raf = 0\n  let disposed = false\n  const schedule = () => {\n    if (!raf && !disposed) raf = requestAnimationFrame(measure)\n  }\n\n  /** The scroller this observer gave `position: relative` (only if it was static), so it can be put back. */\n  let positioned: HTMLElement | null = null\n  const restoreHostPosition = () => {\n    if (positioned) positioned.style.position = ''\n    positioned = null\n  }\n\n  const clear = () => {\n    anchors.set(NO_ANCHORS)\n    frame.set(null)\n  }\n\n  function measure() {\n    raf = 0\n    if (disposed) return\n    if (!editor || editor.isDestroyed || !editor.view.dom.isConnected || !editor.view.dom.getClientRects().length) return clear()\n    const { view, state } = editor\n    const scroller = scrollParentOf(view.dom)\n    if (!scroller) return clear()\n    if (host.get() !== scroller) {\n      restoreHostPosition()\n      if (getComputedStyle(scroller).position === 'static') {\n        scroller.style.position = 'relative'\n        positioned = scroller\n      }\n      host.set(scroller)\n    }\n    const box = scroller.getBoundingClientRect()\n    const ox = scroller.scrollLeft - box.left - scroller.clientLeft\n    const oy = scroller.scrollTop - box.top - scroller.clientTop\n\n    const right = view.dom.getBoundingClientRect().right + ox\n    if (frame.get()?.right !== right) frame.set({ right })\n\n    const next = new Map<string, CompositeAnchor>()\n    for (const row of rows()) {\n      const found = compositeOfRow(state.doc, row)\n      const el = found ? view.nodeDOM(found.pos) : null\n      const title = found?.node.firstChild\n      if (!found || !title || !(el instanceof HTMLElement)) continue\n      const rect = el.getBoundingClientRect()\n      if (!rect.height) continue\n      const titleEl = el.querySelector<HTMLElement>('.composite-title')\n      const titleRect = (titleEl ?? el).getBoundingClientRect()\n      const lineHeight = titleEl ? parseFloat(getComputedStyle(titleEl).lineHeight) || titleRect.height : titleRect.height\n      const toggle = compositeSectionOf(el)?.querySelector<HTMLElement>(':scope > .composite__toggle') ?? null\n      const toggleRect = toggle ? toggle.getBoundingClientRect() : { top: 0, left: 0, width: 0, height: 0 }\n      let caret = { left: titleRect.left, top: titleRect.top, bottom: titleRect.top + lineHeight }\n      try {\n        // Position right after the title's last character: the end of the title's own content.\n        caret = view.coordsAtPos(found.pos + title.nodeSize)\n      }\n      catch {\n        // Not laid out yet: the title block's own box is a good enough anchor until the next frame.\n      }\n      next.set(row.key, {\n        right: rect.right + ox,\n        lastCenter: (caret.top + caret.bottom) / 2 + oy,\n        lineEnd: caret.left + ox,\n        titleEmpty: title.content.size === 0,\n        toggleTop: toggle ? toggleRect.top + oy : 0,\n        toggleLeft: toggle ? toggleRect.left + ox : 0,\n        toggleSize: toggle ? Math.max(toggleRect.width, toggleRect.height) : 0,\n      })\n    }\n    const prev = anchors.get()\n    let changed = prev.size !== next.size\n    if (!changed) {\n      for (const [key, anchor] of next) {\n        const before = prev.get(key)\n        if (!before || !sameAnchor(before, anchor)) {\n          changed = true\n          break\n        }\n      }\n    }\n    if (changed) anchors.set(next)\n  }\n\n  let observer: ResizeObserver | undefined\n  if (editor && !editor.isDestroyed) {\n    editor.on('transaction', schedule)\n    observer = new ResizeObserver(schedule)\n    observer.observe(editor.view.dom)\n    window.addEventListener('resize', schedule)\n    schedule()\n  }\n\n  return {\n    host,\n    anchors,\n    frame,\n    refresh: schedule,\n    dispose() {\n      if (disposed) return\n      disposed = true\n      editor?.off('transaction', schedule)\n      observer?.disconnect()\n      window.removeEventListener('resize', schedule)\n      restoreHostPosition()\n      if (raf) cancelAnimationFrame(raf)\n      raf = 0\n    },\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,243 @@
+import { startBlockDrag } from "../../../core/block-drag.js";
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorSettings } from "../../../vue/settings.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { compositeOfRow, setCompositeTags } from "../rows.js";
+import { compositeSectionOf } from "../anchors.js";
+import { rowStatus } from "../meta-display.js";
+import { useCompositeAnchors } from "../use-composite-anchors.js";
+import { useCompositeRows } from "../use-composite-rows.js";
+import _sfc_main$1 from "./CompositeDetails.js";
+import _sfc_main$2 from "./CompositeStatusMenu.js";
+import _sfc_main$3 from "./CompositeTagsEditor.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, shallowRef, toDisplayString, unref, watch, withCtx, withKeys, withModifiers } from "vue";
+//#region src/features/composites/components/CompositeChrome.vue
+const _hoisted_1 = { class: "absolute left-0 top-0 h-0 w-0" };
+const _hoisted_2 = [
+	"draggable",
+	"aria-label",
+	"title",
+	"onDragstart"
+];
+const _hoisted_3 = ["onMouseenter"];
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = { class: "truncate" };
+const _hoisted_6 = ["aria-label", "onClick"];
+const _hoisted_7 = ["aria-label", "title"];
+const _hoisted_8 = { class: "w-64 p-3" };
+/**
+* Chrome of every composite, laid over the editor (mounted by the composites feature): on the title line the status
+* 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
+* 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.
+*/
+const ROW_HEIGHT = 24;
+const chip = "inline-flex h-5 shrink-0 items-center gap-1 rounded-sm px-1.5 text-xs leading-none whitespace-nowrap text-[var(--sk-muted)]";
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "CompositeChrome",
+	props: { editor: {} },
+	setup(__props) {
+		const props = __props;
+		const { Icon: UIcon, Popover: UPopover } = useUiKit();
+		const { t } = useEditorI18n();
+		const { rows } = useCompositeRows(() => props.editor);
+		const { host, anchors, frame } = useCompositeAnchors(() => props.editor, rows);
+		const editable = shallowRef(false);
+		watch(() => props.editor, (instance, _previous, onCleanup) => {
+			editable.value = !instance.isDestroyed && instance.isEditable;
+			const sync = () => {
+				editable.value = !instance.isDestroyed && instance.isEditable;
+			};
+			instance.on("transaction", sync);
+			onCleanup(() => instance.off("transaction", sync));
+		}, { immediate: true });
+		const { settings } = useEditorSettings();
+		const iconOnHover = computed(() => settings.value.blocks.kindIcon === "hover");
+		const hoveredKeys = shallowRef(/* @__PURE__ */ new Set());
+		const chipsHoveredKey = shallowRef(null);
+		let hoveredSection = null;
+		function onEditorMouseover(event) {
+			const section = event.target instanceof Element ? event.target.closest(".composite") : null;
+			if (section === hoveredSection) return;
+			hoveredSection = section;
+			const chain = /* @__PURE__ */ new Set();
+			for (let el = section; el; el = el.parentElement?.closest(".composite") ?? null) chain.add(el);
+			const { view, state } = props.editor;
+			hoveredKeys.value = new Set(rows.value.filter((row) => {
+				const found = compositeOfRow(state.doc, row);
+				const dom = found ? view.nodeDOM(found.pos) : null;
+				const section = dom instanceof Element ? compositeSectionOf(dom) : null;
+				return section !== null && chain.has(section);
+			}).map((row) => row.key));
+		}
+		function onEditorMouseleave() {
+			hoveredSection = null;
+			hoveredKeys.value = /* @__PURE__ */ new Set();
+		}
+		watch([() => props.editor, iconOnHover], ([instance, hover], _previous, onCleanup) => {
+			onEditorMouseleave();
+			if (!hover || instance.isDestroyed) return;
+			const { dom } = instance.view;
+			dom.addEventListener("mouseover", onEditorMouseover);
+			dom.addEventListener("mouseleave", onEditorMouseleave);
+			onCleanup(() => {
+				dom.removeEventListener("mouseover", onEditorMouseover);
+				dom.removeEventListener("mouseleave", onEditorMouseleave);
+			});
+		}, { immediate: true });
+		function onIconDragStart(event, row) {
+			const found = compositeOfRow(props.editor.state.doc, row);
+			if (!found || !startBlockDrag(props.editor, event, found.pos)) event.preventDefault();
+		}
+		/** Chips start right after the title's last character and run on to the editor's right edge. */
+		const placed = computed(() => rows.value.flatMap((row) => {
+			const anchor = anchors.value.get(row.key);
+			if (!anchor) return [];
+			const left = anchor.lineEnd + (anchor.titleEmpty ? 116 : 12);
+			return [{
+				row,
+				anchor,
+				left,
+				top: anchor.lastCenter - ROW_HEIGHT / 2,
+				width: Math.max((frame.value?.right ?? anchor.right) - left, 120),
+				status: rowStatus(row, t)
+			}];
+		}));
+		function removeTag(row, tag) {
+			setCompositeTags(props.editor, row, row.tags.filter((candidate) => candidate !== tag));
+		}
+		const chipButton = `${chip} transition-colors duration-150 hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--sk-primary)]`;
+		/** Scale and fade in from the icon (`transform-origin` is Reka's), a bit longer than Nuxt UI's default; `composites.css` defines the keyframes and the reduced-motion override. */
+		const detailsPopoverUi = { content: "composite-popover data-[state=open]:animate-[composite-pop-in_160ms_var(--ease-out)] data-[state=closed]:animate-[composite-pop-out_120ms_var(--ease-out)]" };
+		return (_ctx, _cache) => {
+			return unref(host) ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: unref(host)
+			}, [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(placed.value, (item) => {
+				return openBlock(), createElementBlock(Fragment, { key: item.row.key }, [item.anchor.toggleSize ? (openBlock(), createBlock(unref(UPopover), {
+					key: 0,
+					content: {
+						side: "bottom",
+						align: "start",
+						sideOffset: 4
+					},
+					ui: detailsPopoverUi
+				}, {
+					content: withCtx(() => [createVNode(_sfc_main$1, {
+						editor: __props.editor,
+						row: item.row,
+						editable: editable.value
+					}, null, 8, [
+						"editor",
+						"row",
+						"editable"
+					])]),
+					default: withCtx(() => [createElementVNode("span", {
+						role: "button",
+						tabindex: "0",
+						draggable: editable.value,
+						class: normalizeClass([
+							"absolute z-10 flex items-center justify-center rounded-sm bg-[var(--sk-bg)] text-[var(--sk-muted)] transition-[color,background-color,opacity] duration-120 motion-reduce:transition-none hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--sk-primary)]",
+							editable.value ? "cursor-grab active:cursor-grabbing" : "cursor-pointer",
+							iconOnHover.value && !hoveredKeys.value.has(item.row.key) && chipsHoveredKey.value !== item.row.key && "opacity-0 hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100"
+						]),
+						style: normalizeStyle({
+							top: `${item.anchor.toggleTop}px`,
+							left: `${item.anchor.toggleLeft}px`,
+							width: `${item.anchor.toggleSize}px`,
+							height: `${item.anchor.toggleSize}px`
+						}),
+						"aria-label": unref(t)("composites.chrome.details", { kind: item.row.kindLabel }),
+						title: editable.value ? unref(t)("composites.chrome.detailsDrag", { kind: item.row.kindLabel }) : unref(t)("composites.chrome.details", { kind: item.row.kindLabel }),
+						onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers(($event) => $event.currentTarget.click(), ["prevent"]), ["enter", "space"])),
+						onDragstart: ($event) => onIconDragStart($event, item.row)
+					}, [(openBlock(), createBlock(unref(UIcon), {
+						key: item.row.icon,
+						name: item.row.icon,
+						class: "size-3.5"
+					}, null, 8, ["name"]))], 46, _hoisted_2)]),
+					_: 2
+				}, 1024)) : createCommentVNode("v-if", true), item.status || item.row.tags.length || editable.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: "absolute z-10 flex items-center gap-px overflow-hidden rounded-md bg-[var(--sk-bg)]",
+					style: normalizeStyle({
+						top: `${item.top}px`,
+						left: `${item.left}px`,
+						maxWidth: `${item.width}px`,
+						height: `${ROW_HEIGHT}px`
+					}),
+					onMouseenter: ($event) => chipsHoveredKey.value = item.row.key,
+					onMouseleave: _cache[1] || (_cache[1] = ($event) => chipsHoveredKey.value = null)
+				}, [
+					item.status ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [editable.value ? (openBlock(), createBlock(_sfc_main$2, {
+						key: 0,
+						editor: __props.editor,
+						row: item.row
+					}, {
+						default: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(chipButton),
+							"aria-label": unref(t)("composites.status.label", { status: item.status.label })
+						}, [createVNode(unref(UIcon), {
+							name: item.status.icon,
+							class: normalizeClass(["size-3.5", item.status.color])
+						}, null, 8, ["name", "class"]), createTextVNode(toDisplayString(item.status.label), 1)], 8, _hoisted_4)]),
+						_: 2
+					}, 1032, ["editor", "row"])) : (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(chip)
+					}, [createVNode(unref(UIcon), {
+						name: item.status.icon,
+						class: normalizeClass(["size-3.5", item.status.color])
+					}, null, 8, ["name", "class"]), createTextVNode(toDisplayString(item.status.label), 1)]))], 64)) : createCommentVNode("v-if", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(item.row.tags, (tag) => {
+						return openBlock(), createElementBlock("span", {
+							key: tag,
+							class: normalizeClass([chip, "group max-w-40 gap-0"])
+						}, [createElementVNode("span", _hoisted_5, "#" + toDisplayString(tag), 1), editable.value ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "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-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] focus-visible:ml-1 focus-visible:w-4 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-[var(--sk-primary)]",
+							"aria-label": unref(t)("composites.tag.remove", { tag }),
+							onClick: ($event) => removeTag(item.row, tag)
+						}, [createVNode(unref(UIcon), {
+							name: "i-lucide-x",
+							class: "size-3"
+						})], 8, _hoisted_6)) : createCommentVNode("v-if", true)], 2);
+					}), 128)),
+					editable.value ? (openBlock(), createBlock(unref(UPopover), {
+						key: 1,
+						content: {
+							side: "bottom",
+							align: "start",
+							sideOffset: 6,
+							onCloseAutoFocus: (event) => event.preventDefault()
+						}
+					}, {
+						content: withCtx(() => [createElementVNode("div", _hoisted_8, [createVNode(_sfc_main$3, {
+							editor: __props.editor,
+							row: item.row
+						}, null, 8, ["editor", "row"])])]),
+						default: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(chipButton),
+							"aria-label": unref(t)("composites.tag.add"),
+							title: unref(t)("composites.tag.add")
+						}, [createVNode(unref(UIcon), {
+							name: "i-lucide-plus",
+							class: "size-3.5"
+						})], 8, _hoisted_7)]),
+						_: 2
+					}, 1032, ["content"])) : createCommentVNode("v-if", true)
+				], 44, _hoisted_3)) : createCommentVNode("v-if", true)], 64);
+			}), 128))])], 8, ["to"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=CompositeChrome.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeChrome.js","names":["_unref","_openBlock","_createBlock","_Teleport","_createElementVNode","_createElementBlock","_Fragment","_renderList","_withCtx","_createVNode","CompositeDetails","_normalizeClass","_normalizeStyle","_withKeys","_withModifiers","_createCommentVNode","CompositeStatusMenu","_createTextVNode","_toDisplayString","CompositeTagsEditor"],"sources":["../../../../src/features/composites/components/CompositeChrome.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed, shallowRef, watch } from 'vue'\nimport { startBlockDrag } from '../../../core'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport { useEditorSettings } from '../../../vue/settings'\nimport { compositeSectionOf } from '../anchors'\nimport { rowStatus } from '../meta-display'\nimport { compositeOfRow, type CompositeRow, setCompositeTags } from '../rows'\nimport { useCompositeAnchors } from '../use-composite-anchors'\nimport { useCompositeRows } from '../use-composite-rows'\nimport CompositeDetails from './CompositeDetails.vue'\nimport CompositeStatusMenu from './CompositeStatusMenu.vue'\nimport CompositeTagsEditor from './CompositeTagsEditor.vue'\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 */\nconst props = defineProps<{ editor: Editor }>()\n\nconst { Icon: UIcon, Popover: UPopover } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst { rows } = useCompositeRows(() => props.editor)\nconst { host, anchors, frame } = useCompositeAnchors(() => props.editor, rows)\n\n// `isEditable` is not reactive: follow it on every transaction (`EditorSurface` dispatches one after `setEditable`).\nconst editable = shallowRef(false)\nwatch(() => props.editor, (instance, _previous, onCleanup) => {\n  editable.value = !instance.isDestroyed && instance.isEditable\n  const sync = () => {\n    editable.value = !instance.isDestroyed && instance.isEditable\n  }\n  instance.on('transaction', sync)\n  onCleanup(() => instance.off('transaction', sync))\n}, { immediate: true })\n\nconst { settings } = useEditorSettings()\nconst iconOnHover = computed(() => settings.value.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).\nconst hoveredKeys = shallowRef<ReadonlySet<string>>(new Set())\nconst chipsHoveredKey = shallowRef<string | null>(null)\nlet hoveredSection: Element | null = null\n\nfunction onEditorMouseover(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 } = props.editor\n  hoveredKeys.value = new Set(rows.value.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\nfunction onEditorMouseleave() {\n  hoveredSection = null\n  hoveredKeys.value = new Set()\n}\n\nwatch([() => props.editor, iconOnHover], ([instance, hover], _previous, onCleanup) => {\n  onEditorMouseleave()\n  if (!hover || instance.isDestroyed) return\n  const { dom } = instance.view\n  dom.addEventListener('mouseover', onEditorMouseover)\n  dom.addEventListener('mouseleave', onEditorMouseleave)\n  onCleanup(() => {\n    dom.removeEventListener('mouseover', onEditorMouseover)\n    dom.removeEventListener('mouseleave', onEditorMouseleave)\n  })\n}, { immediate: true })\n\nfunction onIconDragStart(event: DragEvent, row: CompositeRow) {\n  const found = compositeOfRow(props.editor.state.doc, row)\n  if (!found || !startBlockDrag(props.editor, event, found.pos)) event.preventDefault()\n}\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 placed = computed(() => rows.value.flatMap((row) => {\n  const anchor = anchors.value.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.value?.right ?? anchor.right) - left, 120),\n    status: rowStatus(row, t),\n  }]\n}))\n\nfunction removeTag(row: CompositeRow, tag: string) {\n  setCompositeTags(props.editor, row, row.tags.filter(candidate => candidate !== tag))\n}\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-[var(--sk-muted)]'\nconst chipButton = `${chip} transition-colors duration-150 hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--sk-primary)]`\n\n/** Scale and fade in from the icon (`transform-origin` is Reka's), a bit longer than Nuxt UI's default; `composites.css` defines the keyframes and the reduced-motion override. */\nconst detailsPopoverUi = {\n  content: '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}\n</script>\n\n<template>\n  <Teleport v-if=\"host\" :to=\"host\">\n    <div class=\"absolute left-0 top-0 h-0 w-0\">\n      <template v-for=\"item in placed\" :key=\"item.row.key\">\n        <UPopover\n          v-if=\"item.anchor.toggleSize\"\n          :content=\"{ side: 'bottom', align: 'start', sideOffset: 4 }\"\n          :ui=\"detailsPopoverUi\"\n        >\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            :class=\"[\n              'absolute z-10 flex items-center justify-center rounded-sm bg-[var(--sk-bg)] text-[var(--sk-muted)] transition-[color,background-color,opacity] duration-120 motion-reduce:transition-none hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--sk-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            @keydown.enter.space.prevent=\"($event.currentTarget as HTMLElement).click()\"\n            @dragstart=\"onIconDragStart($event, item.row)\"\n          >\n            <UIcon :key=\"item.row.icon\" :name=\"item.row.icon\" class=\"size-3.5\" />\n          </span>\n          <template #content>\n            <CompositeDetails :editor=\"editor\" :row=\"item.row\" :editable=\"editable\" />\n          </template>\n        </UPopover>\n\n        <div\n          v-if=\"item.status || item.row.tags.length || editable\"\n          class=\"absolute z-10 flex items-center gap-px overflow-hidden rounded-md bg-[var(--sk-bg)]\"\n          :style=\"{ top: `${item.top}px`, left: `${item.left}px`, maxWidth: `${item.width}px`, height: `${ROW_HEIGHT}px` }\"\n          @mouseenter=\"chipsHoveredKey = item.row.key\"\n          @mouseleave=\"chipsHoveredKey = null\"\n        >\n          <template v-if=\"item.status\">\n            <CompositeStatusMenu v-if=\"editable\" :editor=\"editor\" :row=\"item.row\">\n              <button type=\"button\" :class=\"chipButton\" :aria-label=\"t('composites.status.label', { status: item.status.label })\">\n                <UIcon :name=\"item.status.icon\" :class=\"['size-3.5', item.status.color]\" />{{ item.status.label }}\n              </button>\n            </CompositeStatusMenu>\n            <span v-else :class=\"chip\">\n              <UIcon :name=\"item.status.icon\" :class=\"['size-3.5', item.status.color]\" />{{ item.status.label }}\n            </span>\n          </template>\n\n          <span v-for=\"tag in item.row.tags\" :key=\"tag\" :class=\"[chip, 'group max-w-40 gap-0']\">\n            <span class=\"truncate\">#{{ tag }}</span>\n            <button\n              v-if=\"editable\"\n              type=\"button\"\n              class=\"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-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] focus-visible:ml-1 focus-visible:w-4 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-[var(--sk-primary)]\"\n              :aria-label=\"t('composites.tag.remove', { tag })\"\n              @click=\"removeTag(item.row, tag)\"\n            >\n              <UIcon name=\"i-lucide-x\" class=\"size-3\" />\n            </button>\n          </span>\n\n          <UPopover\n            v-if=\"editable\"\n            :content=\"{ side: 'bottom', align: 'start', sideOffset: 6, onCloseAutoFocus: (event: Event) => event.preventDefault() }\"\n          >\n            <button type=\"button\" :class=\"chipButton\" :aria-label=\"t('composites.tag.add')\" :title=\"t('composites.tag.add')\">\n              <UIcon name=\"i-lucide-plus\" class=\"size-3.5\" />\n            </button>\n            <template #content>\n              <div class=\"w-64 p-3\">\n                <CompositeTagsEditor :editor=\"editor\" :row=\"item.row\" />\n              </div>\n            </template>\n          </UPopover>\n        </div>\n      </template>\n    </div>\n  </Teleport>\n</template>\n"],"mappings":"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"}

package/dist/features/composites/components/CompositeChrome.vue.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from "@tiptap/vue-3";
+//#region src/features/composites/components/CompositeChrome.vue.d.ts
+/**
+ * Chrome of every composite, laid over the editor (mounted by the composites feature): on the title line the status
+ * 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
+ * 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.
+ */
+type __VLS_Props = {
+  editor: Editor;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=CompositeChrome.vue.d.ts.map