@ecsplico/editor 2.1.1 → 3.0.0

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

@@ -0,0 +1,261 @@
+import { bibtexOf, cslOf, cslTypeOptions } from "../bibliography.js";
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { compositeOfRow, setCompositeMetaField } from "../rows.js";
+import { bibFormOf, bibItemOf } from "../bibliography-form.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, onBeforeUnmount, openBlock, reactive, ref, renderList, unref, watch, withKeys } from "vue";
+//#region src/features/composites/components/BibliographyEditor.vue
+const _hoisted_1 = { class: "flex flex-col gap-1.5" };
+const _hoisted_2 = { class: "grid grid-cols-4 gap-1.5" };
+const _hoisted_3 = { class: "flex justify-end gap-1.5" };
+/**
+* The structured editor of a `bibliography` field (CSL-JSON item, `meta.bib`): type, authors, year, container, volume,
+* issue, pages, publisher, DOI, ISBN, URL and abstract. Inputs keep a local draft; every commit (blur, Enter, choosing
+* a type, unmount) writes the whole item through `setCompositeMetaField`. The title is the Baustein's and never stored.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "BibliographyEditor",
+	props: {
+		editor: {},
+		row: {},
+		field: {},
+		disabled: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const { Button: UButton, Input: UInput, Select: USelect, Textarea: UTextarea } = useUiKit();
+		const { t } = useEditorI18n();
+		const stored = computed(() => {
+			const value = props.row.meta[props.field.key];
+			return value && typeof value === "object" && typeof value.type === "string" ? value : null;
+		});
+		const typeItems = computed(() => cslTypeOptions(t));
+		const form = reactive(bibFormOf(stored.value));
+		let dirty = false;
+		let target = null;
+		watch(() => props.row.key, () => {
+			commit();
+			Object.assign(form, bibFormOf(stored.value));
+		});
+		watch(stored, (value) => {
+			if (!dirty) Object.assign(form, bibFormOf(value));
+		});
+		function commit() {
+			if (!dirty || !target) return;
+			dirty = false;
+			const { row, field, stored: base } = target;
+			target = null;
+			const same = row.key === props.row.key;
+			if (!props.editor.isDestroyed) setCompositeMetaField(props.editor, same ? props.row : row, field.key, bibItemOf(form, same ? stored.value : base));
+		}
+		function markDirty() {
+			if (!dirty) target = {
+				row: props.row,
+				field: props.field,
+				stored: stored.value
+			};
+			dirty = true;
+		}
+		function onInput(key, value) {
+			form[key] = typeof value === "string" ? value : "";
+			markDirty();
+		}
+		function onType(value) {
+			if (typeof value !== "string") return;
+			form.type = value;
+			markDirty();
+			commit();
+		}
+		onBeforeUnmount(commit);
+		const copied = ref(false);
+		let copiedTimer;
+		onBeforeUnmount(() => clearTimeout(copiedTimer));
+		async function copyBibtex() {
+			commit();
+			const node = compositeOfRow(props.editor.state.doc, props.row)?.node;
+			const csl = node && cslOf(node);
+			if (!csl) return;
+			await navigator.clipboard.writeText(bibtexOf(csl));
+			copied.value = true;
+			clearTimeout(copiedTimer);
+			copiedTimer = setTimeout(() => {
+				copied.value = false;
+			}, 1500);
+		}
+		const canFetch = typeof props.editor.commands.fetchCompositeBibliography === "function";
+		const hasDoi = computed(() => form.doi.trim() !== "" || typeof props.row.meta.doi === "string" && props.row.meta.doi.trim() !== "");
+		function fetchByDoi() {
+			commit();
+			const found = compositeOfRow(props.editor.state.doc, props.row);
+			if (found) props.editor.commands.fetchCompositeBibliography(found.pos);
+		}
+		const inputs = [
+			{
+				key: "containerTitle",
+				labelKey: "composites.bib.field.containerTitle"
+			},
+			{
+				key: "publisher",
+				labelKey: "composites.bib.field.publisher"
+			},
+			{
+				key: "doi",
+				labelKey: "composites.bib.field.doi"
+			},
+			{
+				key: "isbn",
+				labelKey: "composites.bib.field.isbn"
+			},
+			{
+				key: "url",
+				labelKey: "composites.bib.field.url"
+			}
+		];
+		const numbers = [
+			{
+				key: "volume",
+				labelKey: "composites.bib.field.volume"
+			},
+			{
+				key: "issue",
+				labelKey: "composites.bib.field.issue"
+			},
+			{
+				key: "page",
+				labelKey: "composites.bib.field.page"
+			}
+		];
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(unref(USelect), {
+					"model-value": form.type,
+					items: typeItems.value,
+					"aria-label": unref(t)("composites.bib.field.type"),
+					disabled: __props.disabled,
+					size: "xs",
+					class: "w-full",
+					"onUpdate:modelValue": onType
+				}, null, 8, [
+					"model-value",
+					"items",
+					"aria-label",
+					"disabled"
+				]),
+				createVNode(unref(UTextarea), {
+					"model-value": form.authors,
+					placeholder: unref(t)("composites.bib.field.authorsHelp"),
+					"aria-label": unref(t)("composites.bib.field.authors"),
+					disabled: __props.disabled,
+					size: "xs",
+					autoresize: "",
+					rows: 2,
+					maxrows: 6,
+					class: "w-full",
+					onBlur: commit,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => onInput("authors", value))
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"aria-label",
+					"disabled"
+				]),
+				createElementVNode("div", _hoisted_2, [createVNode(unref(UInput), {
+					"model-value": form.year,
+					type: "number",
+					placeholder: unref(t)("composites.bib.field.year"),
+					"aria-label": unref(t)("composites.bib.field.year"),
+					disabled: __props.disabled,
+					size: "xs",
+					class: "col-span-1 w-full",
+					onBlur: commit,
+					onKeydown: withKeys(commit, ["enter"]),
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => onInput("year", value))
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"aria-label",
+					"disabled"
+				]), (openBlock(), createElementBlock(Fragment, null, renderList(numbers, (input) => {
+					return createVNode(unref(UInput), {
+						key: input.key,
+						"model-value": form[input.key],
+						placeholder: unref(t)(input.labelKey),
+						"aria-label": unref(t)(input.labelKey),
+						disabled: __props.disabled,
+						size: "xs",
+						class: "col-span-1 w-full",
+						onBlur: commit,
+						onKeydown: withKeys(commit, ["enter"]),
+						"onUpdate:modelValue": (value) => onInput(input.key, value)
+					}, null, 8, [
+						"model-value",
+						"placeholder",
+						"aria-label",
+						"disabled",
+						"onUpdate:modelValue"
+					]);
+				}), 64))]),
+				(openBlock(), createElementBlock(Fragment, null, renderList(inputs, (input) => {
+					return createVNode(unref(UInput), {
+						key: input.key,
+						"model-value": form[input.key],
+						placeholder: unref(t)(input.labelKey),
+						"aria-label": unref(t)(input.labelKey),
+						disabled: __props.disabled,
+						size: "xs",
+						class: "w-full",
+						onBlur: commit,
+						onKeydown: withKeys(commit, ["enter"]),
+						"onUpdate:modelValue": (value) => onInput(input.key, value)
+					}, null, 8, [
+						"model-value",
+						"placeholder",
+						"aria-label",
+						"disabled",
+						"onUpdate:modelValue"
+					]);
+				}), 64)),
+				createVNode(unref(UTextarea), {
+					"model-value": form.abstract,
+					placeholder: unref(t)("composites.bib.field.abstract"),
+					"aria-label": unref(t)("composites.bib.field.abstract"),
+					disabled: __props.disabled,
+					size: "xs",
+					autoresize: "",
+					rows: 2,
+					maxrows: 6,
+					class: "w-full",
+					onBlur: commit,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => onInput("abstract", value))
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"aria-label",
+					"disabled"
+				]),
+				createElementVNode("div", _hoisted_3, [canFetch ? (openBlock(), createBlock(unref(UButton), {
+					key: 0,
+					size: "xs",
+					color: "neutral",
+					variant: "ghost",
+					icon: "i-lucide-book-marked",
+					label: unref(t)("composites.bib.fetchDoi"),
+					disabled: __props.disabled || !hasDoi.value,
+					onClick: fetchByDoi
+				}, null, 8, ["label", "disabled"])) : createCommentVNode("v-if", true), createVNode(unref(UButton), {
+					size: "xs",
+					color: "neutral",
+					variant: "ghost",
+					icon: "i-lucide-copy",
+					label: copied.value ? unref(t)("composites.bib.copied") : unref(t)("composites.bib.copyBibtex"),
+					disabled: !stored.value,
+					onClick: copyBibtex
+				}, null, 8, ["label", "disabled"])])
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=BibliographyEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BibliographyEditor.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_createElementVNode","_withKeys","_Fragment","_renderList","_createBlock","_createCommentVNode"],"sources":["../../../../src/features/composites/components/BibliographyEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Editor } from '@tiptap/core'\nimport { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport { type CslItem, bibtexOf, cslOf, cslTypeOptions, type CslType } from '../bibliography'\nimport { type BibForm, bibFormOf, bibItemOf } from '../bibliography-form'\nimport type { CompositeMetaField } from '../kinds'\nimport { compositeOfRow, type CompositeRow, setCompositeMetaField } from '../rows'\nimport '../bibliography-command'\n\n/**\n * The structured editor of a `bibliography` field (CSL-JSON item, `meta.bib`): type, authors, year, container, volume,\n * issue, pages, publisher, DOI, ISBN, URL and abstract. Inputs keep a local draft; every commit (blur, Enter, choosing\n * a type, unmount) writes the whole item through `setCompositeMetaField`. The title is the Baustein's and never stored.\n */\nconst props = defineProps<{\n  editor: Editor\n  row: CompositeRow\n  field: CompositeMetaField\n  disabled?: boolean\n}>()\n\nconst { Button: UButton, Input: UInput, Select: USelect, Textarea: UTextarea } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst stored = computed<CslItem | null>(() => {\n  const value = props.row.meta[props.field.key] as Partial<CslItem> | null | undefined\n  return value && typeof value === 'object' && typeof value.type === 'string' ? value as CslItem : null\n})\nconst typeItems = computed(() => cslTypeOptions(t))\n\nconst form = reactive<BibForm>(bibFormOf(stored.value))\nlet dirty = false\n// The row/field the draft belongs to, taken at the first edit: when the component is re-bound to another row the pending\n// draft must still be written to the row it was typed for.\nlet target: { row: CompositeRow, field: CompositeMetaField, stored: CslItem | null } | null = null\n\nwatch(() => props.row.key, () => {\n  commit()\n  Object.assign(form, bibFormOf(stored.value))\n})\nwatch(stored, (value) => {\n  if (!dirty) Object.assign(form, bibFormOf(value))\n})\n\nfunction commit() {\n  if (!dirty || !target) return\n  dirty = false\n  const { row, field, stored: base } = target\n  target = null\n  // The same Baustein: the current props carry its up-to-date position and stored item.\n  const same = row.key === props.row.key\n  if (!props.editor.isDestroyed) setCompositeMetaField(props.editor, same ? props.row : row, field.key, bibItemOf(form, same ? stored.value : base))\n}\n\nfunction markDirty() {\n  if (!dirty) target = { row: props.row, field: props.field, stored: stored.value }\n  dirty = true\n}\n\nfunction onInput<K extends keyof BibForm>(key: K, value: unknown) {\n  form[key] = (typeof value === 'string' ? value : '') as BibForm[K]\n  markDirty()\n}\n\nfunction onType(value: unknown) {\n  if (typeof value !== 'string') return\n  form.type = value as CslType\n  markDirty()\n  commit()\n}\n\nonBeforeUnmount(commit)\n\nconst copied = ref(false)\nlet copiedTimer: ReturnType<typeof setTimeout> | undefined\nonBeforeUnmount(() => clearTimeout(copiedTimer))\n\nasync function copyBibtex() {\n  commit()\n  const node = compositeOfRow(props.editor.state.doc, props.row)?.node\n  const csl = node && cslOf(node)\n  if (!csl) return\n  await navigator.clipboard.writeText(bibtexOf(csl))\n  copied.value = true\n  clearTimeout(copiedTimer)\n  copiedTimer = setTimeout(() => {\n    copied.value = false\n  }, 1500)\n}\n\n// Registered by the AI integration (`composite-ai`); without it there is nothing to fetch with.\nconst canFetch = typeof props.editor.commands.fetchCompositeBibliography === 'function'\nconst hasDoi = computed(() => form.doi.trim() !== '' || (typeof props.row.meta.doi === 'string' && props.row.meta.doi.trim() !== ''))\n\nfunction fetchByDoi() {\n  commit()\n  const found = compositeOfRow(props.editor.state.doc, props.row)\n  if (found) props.editor.commands.fetchCompositeBibliography(found.pos)\n}\n\nconst inputs = [\n  { key: 'containerTitle', labelKey: 'composites.bib.field.containerTitle' },\n  { key: 'publisher', labelKey: 'composites.bib.field.publisher' },\n  { key: 'doi', labelKey: 'composites.bib.field.doi' },\n  { key: 'isbn', labelKey: 'composites.bib.field.isbn' },\n  { key: 'url', labelKey: 'composites.bib.field.url' },\n] as const\nconst numbers = [\n  { key: 'volume', labelKey: 'composites.bib.field.volume' },\n  { key: 'issue', labelKey: 'composites.bib.field.issue' },\n  { key: 'page', labelKey: 'composites.bib.field.page' },\n] as const\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1.5\">\n    <USelect\n      :model-value=\"form.type\"\n      :items=\"typeItems\"\n      :aria-label=\"t('composites.bib.field.type')\"\n      :disabled=\"disabled\"\n      size=\"xs\"\n      class=\"w-full\"\n      @update:model-value=\"onType\"\n    />\n    <UTextarea\n      :model-value=\"form.authors\"\n      :placeholder=\"t('composites.bib.field.authorsHelp')\"\n      :aria-label=\"t('composites.bib.field.authors')\"\n      :disabled=\"disabled\"\n      size=\"xs\"\n      autoresize\n      :rows=\"2\"\n      :maxrows=\"6\"\n      class=\"w-full\"\n      @blur=\"commit\"\n      @update:model-value=\"(value: unknown) => onInput('authors', value)\"\n    />\n    <div class=\"grid grid-cols-4 gap-1.5\">\n      <UInput\n        :model-value=\"form.year\"\n        type=\"number\"\n        :placeholder=\"t('composites.bib.field.year')\"\n        :aria-label=\"t('composites.bib.field.year')\"\n        :disabled=\"disabled\"\n        size=\"xs\"\n        class=\"col-span-1 w-full\"\n        @blur=\"commit\"\n        @keydown.enter=\"commit\"\n        @update:model-value=\"(value: unknown) => onInput('year', value)\"\n      />\n      <UInput\n        v-for=\"input in numbers\"\n        :key=\"input.key\"\n        :model-value=\"form[input.key]\"\n        :placeholder=\"t(input.labelKey)\"\n        :aria-label=\"t(input.labelKey)\"\n        :disabled=\"disabled\"\n        size=\"xs\"\n        class=\"col-span-1 w-full\"\n        @blur=\"commit\"\n        @keydown.enter=\"commit\"\n        @update:model-value=\"(value: unknown) => onInput(input.key, value)\"\n      />\n    </div>\n    <UInput\n      v-for=\"input in inputs\"\n      :key=\"input.key\"\n      :model-value=\"form[input.key]\"\n      :placeholder=\"t(input.labelKey)\"\n      :aria-label=\"t(input.labelKey)\"\n      :disabled=\"disabled\"\n      size=\"xs\"\n      class=\"w-full\"\n      @blur=\"commit\"\n      @keydown.enter=\"commit\"\n      @update:model-value=\"(value: unknown) => onInput(input.key, value)\"\n    />\n    <UTextarea\n      :model-value=\"form.abstract\"\n      :placeholder=\"t('composites.bib.field.abstract')\"\n      :aria-label=\"t('composites.bib.field.abstract')\"\n      :disabled=\"disabled\"\n      size=\"xs\"\n      autoresize\n      :rows=\"2\"\n      :maxrows=\"6\"\n      class=\"w-full\"\n      @blur=\"commit\"\n      @update:model-value=\"(value: unknown) => onInput('abstract', value)\"\n    />\n    <div class=\"flex justify-end gap-1.5\">\n      <UButton\n        v-if=\"canFetch\"\n        size=\"xs\"\n        color=\"neutral\"\n        variant=\"ghost\"\n        icon=\"i-lucide-book-marked\"\n        :label=\"t('composites.bib.fetchDoi')\"\n        :disabled=\"disabled || !hasDoi\"\n        @click=\"fetchByDoi\"\n      />\n      <UButton\n        size=\"xs\"\n        color=\"neutral\"\n        variant=\"ghost\"\n        icon=\"i-lucide-copy\"\n        :label=\"copied ? t('composites.bib.copied') : t('composites.bib.copyBibtex')\"\n        :disabled=\"!stored\"\n        @click=\"copyBibtex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ;EAOd,MAAM,EAAE,QAAQ,SAAS,OAAO,QAAQ,QAAQ,SAAS,UAAU,cAAc,SAAS;EAC1F,MAAM,EAAE,MAAM,cAAc;EAE5B,MAAM,SAAS,eAA+B;GAC5C,MAAM,QAAQ,MAAM,IAAI,KAAK,MAAM,MAAM;GACzC,OAAO,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,WAAW,QAAmB;EACnG,CAAC;EACD,MAAM,YAAY,eAAe,eAAe,CAAC,CAAC;EAElD,MAAM,OAAO,SAAkB,UAAU,OAAO,KAAK,CAAC;EACtD,IAAI,QAAQ;EAGZ,IAAI,SAA0F;EAE9F,YAAY,MAAM,IAAI,WAAW;GAC/B,OAAO;GACP,OAAO,OAAO,MAAM,UAAU,OAAO,KAAK,CAAC;EAC7C,CAAC;EACD,MAAM,SAAS,UAAU;GACvB,IAAI,CAAC,OAAO,OAAO,OAAO,MAAM,UAAU,KAAK,CAAC;EAClD,CAAC;EAED,SAAS,SAAS;GAChB,IAAI,CAAC,SAAS,CAAC,QAAQ;GACvB,QAAQ;GACR,MAAM,EAAE,KAAK,OAAO,QAAQ,SAAS;GACrC,SAAS;GAET,MAAM,OAAO,IAAI,QAAQ,MAAM,IAAI;GACnC,IAAI,CAAC,MAAM,OAAO,aAAa,sBAAsB,MAAM,QAAQ,OAAO,MAAM,MAAM,KAAK,MAAM,KAAK,UAAU,MAAM,OAAO,OAAO,QAAQ,IAAI,CAAC;EACnJ;EAEA,SAAS,YAAY;GACnB,IAAI,CAAC,OAAO,SAAS;IAAE,KAAK,MAAM;IAAK,OAAO,MAAM;IAAO,QAAQ,OAAO;GAAM;GAChF,QAAQ;EACV;EAEA,SAAS,QAAiC,KAAQ,OAAgB;GAChE,KAAK,OAAQ,OAAO,UAAU,WAAW,QAAQ;GACjD,UAAU;EACZ;EAEA,SAAS,OAAO,OAAgB;GAC9B,IAAI,OAAO,UAAU,UAAU;GAC/B,KAAK,OAAO;GACZ,UAAU;GACV,OAAO;EACT;EAEA,gBAAgB,MAAM;EAEtB,MAAM,SAAS,IAAI,KAAK;EACxB,IAAI;EACJ,sBAAsB,aAAa,WAAW,CAAC;EAE/C,eAAe,aAAa;GAC1B,OAAO;GACP,MAAM,OAAO,eAAe,MAAM,OAAO,MAAM,KAAK,MAAM,GAAG,CAAC,EAAE;GAChE,MAAM,MAAM,QAAQ,MAAM,IAAI;GAC9B,IAAI,CAAC,KAAK;GACV,MAAM,UAAU,UAAU,UAAU,SAAS,GAAG,CAAC;GACjD,OAAO,QAAQ;GACf,aAAa,WAAW;GACxB,cAAc,iBAAiB;IAC7B,OAAO,QAAQ;GACjB,GAAG,IAAI;EACT;EAGA,MAAM,WAAW,OAAO,MAAM,OAAO,SAAS,+BAA+B;EAC7E,MAAM,SAAS,eAAe,KAAK,IAAI,KAAK,MAAM,MAAO,OAAO,MAAM,IAAI,KAAK,QAAQ,YAAY,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,EAAG;EAEpI,SAAS,aAAa;GACpB,OAAO;GACP,MAAM,QAAQ,eAAe,MAAM,OAAO,MAAM,KAAK,MAAM,GAAG;GAC9D,IAAI,OAAO,MAAM,OAAO,SAAS,2BAA2B,MAAM,GAAG;EACvE;EAEA,MAAM,SAAS;GACb;IAAE,KAAK;IAAkB,UAAU;GAAsC;GACzE;IAAE,KAAK;IAAa,UAAU;GAAiC;GAC/D;IAAE,KAAK;IAAO,UAAU;GAA2B;GACnD;IAAE,KAAK;IAAQ,UAAU;GAA4B;GACrD;IAAE,KAAK;IAAO,UAAU;GAA2B;EACrD;EACA,MAAM,UAAU;GACd;IAAE,KAAK;IAAU,UAAU;GAA8B;GACzD;IAAE,KAAK;IAAS,UAAU;GAA6B;GACvD;IAAE,KAAK;IAAQ,UAAU;GAA4B;EACvD;;GAIE,OAAAA,UAAA,GAAAC,mBAiGM,OAjGN,YAiGM;IAhGJC,YAQEC,MAAA,OAAA,GAAA;KAPC,eAAa,KAAK;KAClB,OAAO,UAAA;KACP,cAAYA,MAAA,CAAA,CAAC,CAAA,2BAAA;KACb,UAAU,QAAA;KACX,MAAK;KACL,OAAM;KACL,uBAAoB;;;;;;;IAEvBD,YAYEC,MAAA,SAAA,GAAA;KAXC,eAAa,KAAK;KAClB,aAAaA,MAAA,CAAA,CAAC,CAAA,kCAAA;KACd,cAAYA,MAAA,CAAA,CAAC,CAAA,8BAAA;KACb,UAAU,QAAA;KACX,MAAK;KACL,YAAA;KACC,MAAM;KACN,SAAS;KACV,OAAM;KACL,QAAM;KACN,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAmB,QAAO,WAAY,KAAK;;;;;;;IAEnEC,mBA0BM,OA1BN,YA0BM,CAzBJF,YAWEC,MAAA,MAAA,GAAA;KAVC,eAAa,KAAK;KACnB,MAAK;KACJ,aAAaA,MAAA,CAAA,CAAC,CAAA,2BAAA;KACd,cAAYA,MAAA,CAAA,CAAC,CAAA,2BAAA;KACb,UAAU,QAAA;KACX,MAAK;KACL,OAAM;KACL,QAAM;KACN,WAAOE,SAAQ,QAAM,CAAA,OAAA,CAAA;KACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAmB,QAAO,QAAS,KAAK;;;;;;IAEhE,CAAA,IAAAL,UAAA,GAAAC,mBAYEK,UAAA,MAAAC,WAXgB,UAAT,UAAK;KADd,OAAAL,YAYEC,MAAA,MAAA,GAAA;MAVC,KAAK,MAAM;MACX,eAAa,KAAK,MAAM;MACxB,aAAaA,MAAA,CAAA,CAAC,CAAC,MAAM,QAAQ;MAC7B,cAAYA,MAAA,CAAA,CAAC,CAAC,MAAM,QAAQ;MAC5B,UAAU,QAAA;MACX,MAAK;MACL,OAAM;MACL,QAAM;MACN,WAAOE,SAAQ,QAAM,CAAA,OAAA,CAAA;MACrB,wBAAqB,UAAmB,QAAQ,MAAM,KAAK,KAAK;;;;;;;;;KAGrEL,UAAA,GAAAC,mBAYEK,UAAA,MAAAC,WAXgB,SAAT,UAAK;KADd,OAAAL,YAYEC,MAAA,MAAA,GAAA;MAVC,KAAK,MAAM;MACX,eAAa,KAAK,MAAM;MACxB,aAAaA,MAAA,CAAA,CAAC,CAAC,MAAM,QAAQ;MAC7B,cAAYA,MAAA,CAAA,CAAC,CAAC,MAAM,QAAQ;MAC5B,UAAU,QAAA;MACX,MAAK;MACL,OAAM;MACL,QAAM;MACN,WAAOE,SAAQ,QAAM,CAAA,OAAA,CAAA;MACrB,wBAAqB,UAAmB,QAAQ,MAAM,KAAK,KAAK;;;;;;;;;IAEnEH,YAYEC,MAAA,SAAA,GAAA;KAXC,eAAa,KAAK;KAClB,aAAaA,MAAA,CAAA,CAAC,CAAA,+BAAA;KACd,cAAYA,MAAA,CAAA,CAAC,CAAA,+BAAA;KACb,UAAU,QAAA;KACX,MAAK;KACL,YAAA;KACC,MAAM;KACN,SAAS;KACV,OAAM;KACL,QAAM;KACN,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAmB,QAAO,YAAa,KAAK;;;;;;;IAEpEC,mBAoBM,OApBN,YAoBM,CAlBI,YADRJ,UAAA,GAAAQ,YASEL,MAAA,OAAA,GAAA;;KAPA,MAAK;KACL,OAAM;KACN,SAAQ;KACR,MAAK;KACJ,OAAOA,MAAA,CAAA,CAAC,CAAA,yBAAA;KACR,UAAU,QAAA,YAAQ,CAAK,OAAA;KACvB,SAAO;IAEV,GAAA,MAAA,GAAA,CAAA,SAAA,UAAA,CAAA,KAAAM,mBAAA,QAAA,IAAA,GAAAP,YAQEC,MAAA,OAAA,GAAA;KAPA,MAAK;KACL,OAAM;KACN,SAAQ;KACR,MAAK;KACJ,OAAO,OAAA,QAASA,MAAA,CAAA,CAAC,CAAA,uBAAA,IAA4BA,MAAA,CAAA,CAAC,CAAA,2BAAA;KAC9C,UAAQ,CAAG,OAAA;KACX,SAAO"}

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

@@ -4,7 +4,9 @@ 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 { derivedChromeOf } from "../derived-chrome.js";
 import { rowStatus } from "../meta-display.js";
+import { useStoreRef } from "../../../vue/store-ref.js";
 import { useCompositeAnchors } from "../use-composite-anchors.js";
 import { useCompositeRows } from "../use-composite-rows.js";
 import _sfc_main$1 from "./CompositeDetails.js";
@@ -20,11 +22,17 @@ const _hoisted_2 = [
 	"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" };
+const _hoisted_4 = [
+	"aria-expanded",
+	"aria-label",
+	"title",
+	"onClick"
+];
+const _hoisted_5 = ["aria-label"];
+const _hoisted_6 = { class: "truncate" };
+const _hoisted_7 = ["aria-label", "onClick"];
+const _hoisted_8 = ["aria-label", "title"];
+const _hoisted_9 = { 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
@@ -93,19 +101,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			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)
-			}];
-		}));
+		const expanded = useStoreRef(() => props.editor.storage.composite.expanded);
+		const placed = computed(() => {
+			let hiddenUntil = -1;
+			return rows.value.flatMap((row) => {
+				if (row.pos < hiddenUntil) return [];
+				const derived = derivedChromeOf(props.editor, row);
+				const open = !derived || !row.id || expanded.value.has(row.id);
+				if (!open) hiddenUntil = row.end;
+				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),
+					derived: derived && {
+						stale: derived.stale,
+						open,
+						toggleable: !!row.id
+					}
+				}];
+			});
+		});
+		function toggleExpanded(row) {
+			if (row.id) props.editor.commands.toggleCompositeExpanded(row.id);
+		}
 		function removeTag(row, tag) {
 			setCompositeTags(props.editor, row, row.tags.filter((candidate) => candidate !== tag));
 		}
@@ -160,7 +184,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						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", {
+				}, 1024)) : createCommentVNode("v-if", true), item.status || item.row.tags.length || editable.value || item.derived ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					class: "absolute z-10 flex items-center gap-px overflow-hidden rounded-md bg-[var(--sk-bg)]",
 					style: normalizeStyle({
@@ -172,7 +196,32 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					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, {
+					item.derived ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+						item.derived.toggleable ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: normalizeClass(chipButton),
+							"aria-expanded": item.derived.open,
+							"aria-label": unref(t)(item.derived.open ? "composites.derivation.collapse" : "composites.derivation.expand"),
+							title: unref(t)(item.derived.open ? "composites.derivation.collapse" : "composites.derivation.expand"),
+							onClick: ($event) => toggleExpanded(item.row)
+						}, [createVNode(unref(UIcon), {
+							name: item.derived.open ? "i-lucide-chevron-down" : "i-lucide-chevron-right",
+							class: "size-3.5"
+						}, null, 8, ["name"])], 8, _hoisted_4)) : createCommentVNode("v-if", true),
+						createElementVNode("span", { class: normalizeClass(chip) }, [createVNode(unref(UIcon), {
+							name: "i-lucide-git-branch",
+							class: "size-3.5"
+						}), createTextVNode(toDisplayString(unref(t)("composites.derivation.badge")), 1)]),
+						item.derived.stale ? (openBlock(), createElementBlock("span", {
+							key: 1,
+							class: normalizeClass([chip, "text-[var(--sk-warning)]"])
+						}, [createVNode(unref(UIcon), {
+							name: "i-lucide-triangle-alert",
+							class: "size-3.5"
+						}), createTextVNode(toDisplayString(unref(t)("composites.derivation.stale")), 1)], 2)) : createCommentVNode("v-if", true)
+					], 64)) : createCommentVNode("v-if", true),
+					item.status ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [editable.value ? (openBlock(), createBlock(_sfc_main$2, {
 						key: 0,
 						editor: __props.editor,
 						row: item.row
@@ -184,7 +233,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						}, [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)]),
+						}, null, 8, ["name", "class"]), createTextVNode(toDisplayString(item.status.label), 1)], 8, _hoisted_5)]),
 						_: 2
 					}, 1032, ["editor", "row"])) : (openBlock(), createElementBlock("span", {
 						key: 1,
@@ -197,7 +246,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						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", {
+						}, [createElementVNode("span", _hoisted_6, "#" + 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)]",
@@ -206,10 +255,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						}, [createVNode(unref(UIcon), {
 							name: "i-lucide-x",
 							class: "size-3"
-						})], 8, _hoisted_6)) : createCommentVNode("v-if", true)], 2);
+						})], 8, _hoisted_7)) : createCommentVNode("v-if", true)], 2);
 					}), 128)),
 					editable.value ? (openBlock(), createBlock(unref(UPopover), {
-						key: 1,
+						key: 2,
 						content: {
 							side: "bottom",
 							align: "start",
@@ -217,7 +266,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							onCloseAutoFocus: (event) => event.preventDefault()
 						}
 					}, {
-						content: withCtx(() => [createElementVNode("div", _hoisted_8, [createVNode(_sfc_main$3, {
+						content: withCtx(() => [createElementVNode("div", _hoisted_9, [createVNode(_sfc_main$3, {
 							editor: __props.editor,
 							row: item.row
 						}, null, 8, ["editor", "row"])])]),
@@ -229,7 +278,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						}, [createVNode(unref(UIcon), {
 							name: "i-lucide-plus",
 							class: "size-3.5"
-						})], 8, _hoisted_7)]),
+						})], 8, _hoisted_8)]),
 						_: 2
 					}, 1032, ["content"])) : createCommentVNode("v-if", true)
 				], 44, _hoisted_3)) : createCommentVNode("v-if", true)], 64);

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

@@ -1 +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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"}
+{"version":3,"file":"CompositeChrome.js","names":["_unref","_openBlock","_createBlock","_Teleport","_createElementVNode","_createElementBlock","_Fragment","_renderList","_withCtx","_createVNode","CompositeDetails","_normalizeClass","_normalizeStyle","_withKeys","_withModifiers","_createCommentVNode","_createTextVNode","_toDisplayString","CompositeStatusMenu","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 { useStoreRef } from '../../../vue/store-ref'\nimport { useEditorSettings } from '../../../vue/settings'\nimport { compositeSectionOf } from '../anchors'\nimport { derivedChromeOf } from '../derived-chrome'\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 expanded = useStoreRef(() => props.editor.storage.composite.expanded)\n\nconst placed = computed(() => {\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.value.flatMap((row) => {\n    if (row.pos < hiddenUntil) return []\n    const derived = derivedChromeOf(props.editor, row)\n    const open = !derived || !row.id || expanded.value.has(row.id)\n    if (!open) hiddenUntil = row.end\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      derived: derived && { stale: derived.stale, open, toggleable: !!row.id },\n    }]\n  })\n})\n\nfunction toggleExpanded(row: CompositeRow) {\n  if (row.id) props.editor.commands.toggleCompositeExpanded(row.id)\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 || item.derived\"\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.derived\">\n            <button\n              v-if=\"item.derived.toggleable\"\n              type=\"button\"\n              :class=\"chipButton\"\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              @click=\"toggleExpanded(item.row)\"\n            >\n              <UIcon :name=\"item.derived.open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'\" class=\"size-3.5\" />\n            </button>\n            <span :class=\"chip\">\n              <UIcon name=\"i-lucide-git-branch\" class=\"size-3.5\" />{{ t('composites.derivation.badge') }}\n            </span>\n            <span v-if=\"item.derived.stale\" :class=\"[chip, 'text-[var(--sk-warning)]']\">\n              <UIcon name=\"i-lucide-triangle-alert\" class=\"size-3.5\" />{{ t('composites.derivation.stale') }}\n            </span>\n          </template>\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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"}