@ecsplico/editor 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,158 @@
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { compositeKindsOf } from "../nodes.js";
+import { compositeOfRow } from "../rows.js";
+import _sfc_main$1 from "./CompositeFieldEditor.js";
+import _sfc_main$2 from "./CompositeSummaryEditor.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, unref, watch } from "vue";
+//#region src/features/composites/components/CompositeDetails.vue
+const _hoisted_1 = { class: "flex w-72 flex-col gap-2.5 p-3 text-sm" };
+const _hoisted_2 = {
+	key: 1,
+	class: "flex min-w-0 items-center gap-1.5 text-[var(--sk-fg-highlighted)]"
+};
+const _hoisted_3 = { class: "truncate" };
+const _hoisted_4 = {
+	key: 2,
+	role: "alert",
+	class: "flex flex-col gap-2 rounded-md bg-[color-mix(in_oklab,var(--sk-warning)_10%,transparent)] p-2 text-xs text-[var(--sk-fg)] ring ring-[color-mix(in_oklab,var(--sk-warning)_40%,transparent)]"
+};
+const _hoisted_5 = { class: "font-medium" };
+const _hoisted_6 = { class: "flex flex-col gap-0.5" };
+const _hoisted_7 = { class: "shrink-0 text-[var(--sk-muted)]" };
+const _hoisted_8 = ["title"];
+const _hoisted_9 = {
+	key: 1,
+	class: "font-medium"
+};
+const _hoisted_10 = { class: "flex justify-end gap-1.5" };
+const _hoisted_11 = { class: "text-xs text-[var(--sk-muted)]" };
+const _hoisted_12 = { class: "flex flex-col gap-1" };
+const _hoisted_13 = { class: "text-xs text-[var(--sk-muted)]" };
+/**
+* Content of the popover on a composite's front icon: the kind (a select, plain text while read-only), every field of
+* the kind except the status (its chip edits it) and the summary. Choosing another kind first shows an inline warning
+* that names the field values the switch drops (`setCompositeKind` keeps only meta keys the new kind declares) and
+* applies the change on „Ändern“.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "CompositeDetails",
+	props: {
+		editor: {},
+		row: {},
+		editable: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const { Button: UButton, Icon: UIcon, Select: USelect } = useUiKit();
+		const { t } = useEditorI18n();
+		const kinds = computed(() => compositeKindsOf(props.editor));
+		const kindItems = computed(() => kinds.value.map((kind) => ({
+			value: kind.id,
+			label: kind.label,
+			icon: kind.icon
+		})));
+		const fields = computed(() => props.row.fields.filter((field) => field.key !== "status"));
+		/** The kind chosen in the select, waiting for the confirmation. */
+		const pending = ref(null);
+		watch(() => props.row.kind, () => {
+			pending.value = null;
+		});
+		const pendingLabel = computed(() => kinds.value.find((kind) => kind.id === pending.value)?.label ?? "");
+		/** Field values of the row that the pending kind does not declare, as „Label: value“. */
+		const lost = computed(() => {
+			const target = kinds.value.find((kind) => kind.id === pending.value);
+			if (!target) return [];
+			const kept = new Set(target.fields.map((field) => field.key));
+			return Object.entries(props.row.meta).filter(([key, value]) => !kept.has(key) && value != null && value !== "").map(([key, value]) => {
+				const field = props.row.fields.find((candidate) => candidate.key === key);
+				const text = typeof value === "object" ? JSON.stringify(value) : String(value);
+				return {
+					key,
+					label: field?.label ?? key,
+					text: field?.options?.find((option) => option.value === text)?.label ?? text
+				};
+			});
+		});
+		function onKind(kind) {
+			pending.value = typeof kind === "string" && kind !== props.row.kind ? kind : null;
+		}
+		function apply() {
+			const kind = pending.value;
+			pending.value = null;
+			const found = compositeOfRow(props.editor.state.doc, props.row);
+			if (kind && found) props.editor.commands.setCompositeKind(kind, found.pos);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				__props.editable ? (openBlock(), createBlock(unref(USelect), {
+					key: 0,
+					"model-value": __props.row.kind,
+					items: kindItems.value,
+					size: "xs",
+					class: "w-full",
+					"aria-label": unref(t)("composites.kind.select"),
+					"onUpdate:modelValue": onKind
+				}, null, 8, [
+					"model-value",
+					"items",
+					"aria-label"
+				])) : (openBlock(), createElementBlock("p", _hoisted_2, [(openBlock(), createBlock(unref(UIcon), {
+					key: __props.row.icon,
+					name: __props.row.icon,
+					class: "size-4 shrink-0 text-[var(--sk-muted)]"
+				}, null, 8, ["name"])), createElementVNode("span", _hoisted_3, toDisplayString(__props.row.kindLabel), 1)])),
+				pending.value ? (openBlock(), createElementBlock("div", _hoisted_4, [lost.value.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("p", _hoisted_5, toDisplayString(unref(t)("composites.details.confirmLost", { kind: pendingLabel.value })), 1), createElementVNode("ul", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(lost.value, (item) => {
+					return openBlock(), createElementBlock("li", {
+						key: item.key,
+						class: "flex min-w-0 gap-1"
+					}, [createElementVNode("span", _hoisted_7, toDisplayString(item.label) + ":", 1), createElementVNode("span", {
+						class: "truncate",
+						title: item.text
+					}, toDisplayString(item.text), 9, _hoisted_8)]);
+				}), 128))])], 64)) : (openBlock(), createElementBlock("p", _hoisted_9, toDisplayString(unref(t)("composites.details.confirm")), 1)), createElementVNode("div", _hoisted_10, [createVNode(unref(UButton), {
+					size: "xs",
+					color: "neutral",
+					variant: "ghost",
+					label: unref(t)("composites.details.cancel"),
+					onClick: _cache[0] || (_cache[0] = ($event) => pending.value = null)
+				}, null, 8, ["label"]), createVNode(unref(UButton), {
+					size: "xs",
+					color: "warning",
+					label: unref(t)("composites.details.change"),
+					onClick: apply
+				}, null, 8, ["label"])])])) : createCommentVNode("v-if", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(fields.value, (field) => {
+					return openBlock(), createElementBlock("div", {
+						key: field.key,
+						class: "flex flex-col gap-1"
+					}, [createElementVNode("span", _hoisted_11, toDisplayString(field.label), 1), createVNode(_sfc_main$1, {
+						editor: __props.editor,
+						row: __props.row,
+						field,
+						disabled: !__props.editable,
+						size: "xs"
+					}, null, 8, [
+						"editor",
+						"row",
+						"field",
+						"disabled"
+					])]);
+				}), 128)),
+				createElementVNode("div", _hoisted_12, [createElementVNode("span", _hoisted_13, toDisplayString(unref(t)("composites.details.summary")), 1), createVNode(_sfc_main$2, {
+					editor: __props.editor,
+					row: __props.row,
+					readonly: !__props.editable
+				}, null, 8, [
+					"editor",
+					"row",
+					"readonly"
+				])])
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=CompositeDetails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeDetails.js","names":["_openBlock","_createElementBlock","_createBlock","_unref","_createElementVNode","_toDisplayString","_Fragment","_renderList","_createVNode","_createCommentVNode","CompositeFieldEditor","CompositeSummaryEditor"],"sources":["../../../../src/features/composites/components/CompositeDetails.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed, ref, watch } from 'vue'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport { compositeKindsOf } from '../nodes'\nimport { compositeOfRow, type CompositeRow } from '../rows'\nimport CompositeFieldEditor from './CompositeFieldEditor.vue'\nimport CompositeSummaryEditor from './CompositeSummaryEditor.vue'\n\n/**\n * Content of the popover on a composite's front icon: the kind (a select, plain text while read-only), every field of\n * the kind except the status (its chip edits it) and the summary. Choosing another kind first shows an inline warning\n * that names the field values the switch drops (`setCompositeKind` keeps only meta keys the new kind declares) and\n * applies the change on „Ändern“.\n */\nconst props = defineProps<{ editor: Editor, row: CompositeRow, editable: boolean }>()\n\nconst { Button: UButton, Icon: UIcon, Select: USelect } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst kinds = computed(() => compositeKindsOf(props.editor))\nconst kindItems = computed(() => kinds.value.map(kind => ({ value: kind.id, label: kind.label, icon: kind.icon })))\nconst fields = computed(() => props.row.fields.filter(field => field.key !== 'status'))\n\n/** The kind chosen in the select, waiting for the confirmation. */\nconst pending = ref<string | null>(null)\n// The kind changed some other way (undo, inspector, another select): a stale confirmation would be misleading.\nwatch(() => props.row.kind, () => {\n  pending.value = null\n})\n\nconst pendingLabel = computed(() => kinds.value.find(kind => kind.id === pending.value)?.label ?? '')\n\n/** Field values of the row that the pending kind does not declare, as „Label: value“. */\nconst lost = computed(() => {\n  const target = kinds.value.find(kind => kind.id === pending.value)\n  if (!target) return []\n  const kept = new Set(target.fields.map(field => field.key))\n  return Object.entries(props.row.meta)\n    .filter(([key, value]) => !kept.has(key) && value != null && value !== '')\n    .map(([key, value]) => {\n      const field = props.row.fields.find(candidate => candidate.key === key)\n      const text = typeof value === 'object' ? JSON.stringify(value) : String(value)\n      return { key, label: field?.label ?? key, text: field?.options?.find(option => option.value === text)?.label ?? text }\n    })\n})\n\nfunction onKind(kind: unknown) {\n  pending.value = typeof kind === 'string' && kind !== props.row.kind ? kind : null\n}\n\nfunction apply() {\n  const kind = pending.value\n  pending.value = null\n  const found = compositeOfRow(props.editor.state.doc, props.row)\n  if (kind && found) props.editor.commands.setCompositeKind(kind, found.pos)\n}\n</script>\n\n<template>\n  <div class=\"flex w-72 flex-col gap-2.5 p-3 text-sm\">\n    <USelect\n      v-if=\"editable\"\n      :model-value=\"row.kind\"\n      :items=\"kindItems\"\n      size=\"xs\"\n      class=\"w-full\"\n      :aria-label=\"t('composites.kind.select')\"\n      @update:model-value=\"onKind\"\n    />\n    <p v-else class=\"flex min-w-0 items-center gap-1.5 text-[var(--sk-fg-highlighted)]\">\n      <UIcon :key=\"row.icon\" :name=\"row.icon\" class=\"size-4 shrink-0 text-[var(--sk-muted)]\" />\n      <span class=\"truncate\">{{ row.kindLabel }}</span>\n    </p>\n\n    <div v-if=\"pending\" role=\"alert\" class=\"flex flex-col gap-2 rounded-md bg-[color-mix(in_oklab,var(--sk-warning)_10%,transparent)] p-2 text-xs text-[var(--sk-fg)] ring ring-[color-mix(in_oklab,var(--sk-warning)_40%,transparent)]\">\n      <template v-if=\"lost.length\">\n        <p class=\"font-medium\">\n          {{ t('composites.details.confirmLost', { kind: pendingLabel }) }}\n        </p>\n        <ul class=\"flex flex-col gap-0.5\">\n          <li v-for=\"item in lost\" :key=\"item.key\" class=\"flex min-w-0 gap-1\">\n            <span class=\"shrink-0 text-[var(--sk-muted)]\">{{ item.label }}:</span>\n            <span class=\"truncate\" :title=\"item.text\">{{ item.text }}</span>\n          </li>\n        </ul>\n      </template>\n      <p v-else class=\"font-medium\">\n        {{ t('composites.details.confirm') }}\n      </p>\n      <div class=\"flex justify-end gap-1.5\">\n        <UButton size=\"xs\" color=\"neutral\" variant=\"ghost\" :label=\"t('composites.details.cancel')\" @click=\"pending = null\" />\n        <UButton size=\"xs\" color=\"warning\" :label=\"t('composites.details.change')\" @click=\"apply\" />\n      </div>\n    </div>\n\n    <div v-for=\"field in fields\" :key=\"field.key\" class=\"flex flex-col gap-1\">\n      <span class=\"text-xs text-[var(--sk-muted)]\">{{ field.label }}</span>\n      <CompositeFieldEditor :editor=\"editor\" :row=\"row\" :field=\"field\" :disabled=\"!editable\" size=\"xs\" />\n    </div>\n\n    <div class=\"flex flex-col gap-1\">\n      <span class=\"text-xs text-[var(--sk-muted)]\">{{ t('composites.details.summary') }}</span>\n      <CompositeSummaryEditor :editor=\"editor\" :row=\"row\" :readonly=\"!editable\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import { CompositeRow } from "../rows.js";
+import { Editor } from "@tiptap/vue-3";
+//#region src/features/composites/components/CompositeDetails.vue.d.ts
+/**
+ * Content of the popover on a composite's front icon: the kind (a select, plain text while read-only), every field of
+ * the kind except the status (its chip edits it) and the summary. Choosing another kind first shows an inline warning
+ * that names the field values the switch drops (`setCompositeKind` keeps only meta keys the new kind declares) and
+ * applies the change on „Ändern“.
+ */
+type __VLS_Props = {
+  editor: Editor;
+  row: CompositeRow;
+  editable: boolean;
+};
+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=CompositeDetails.vue.d.ts.map

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

@@ -0,0 +1,114 @@
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { setCompositeMetaField } from "../rows.js";
+import { metaText } from "../meta-display.js";
+import { computed, createBlock, defineComponent, onBeforeUnmount, openBlock, ref, unref, watch, withKeys } from "vue";
+//#region src/features/composites/components/CompositeFieldEditor.vue
+/**
+* One meta field of a Baustein as an input that writes through `setCompositeMetaField`. Text-like inputs keep a local
+* draft and commit after typing pauses, on blur and on unmount, so the one-frame-late re-read of the rows never
+* overwrites what is being typed.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "CompositeFieldEditor",
+	props: {
+		editor: {},
+		row: {},
+		field: {},
+		disabled: { type: Boolean },
+		size: { default: "sm" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { Input: UInput, Select: USelect, Textarea: UTextarea } = useUiKit();
+		const { t } = useEditorI18n();
+		const stored = computed(() => metaText(props.row, props.field));
+		const draft = ref(stored.value);
+		const typing = ref(false);
+		let dirty = false;
+		let timer;
+		watch(stored, (value) => {
+			if (!typing.value && !dirty) draft.value = value;
+		});
+		function commit() {
+			clearTimeout(timer);
+			if (!dirty) return;
+			dirty = false;
+			if (!props.editor.isDestroyed) setCompositeMetaField(props.editor, props.row, props.field.key, draft.value);
+		}
+		function onInput(value) {
+			draft.value = typeof value === "string" ? value : "";
+			dirty = true;
+			clearTimeout(timer);
+			timer = setTimeout(commit, 400);
+		}
+		function onBlur() {
+			typing.value = false;
+			commit();
+		}
+		onBeforeUnmount(commit);
+		function onChoice(value) {
+			setCompositeMetaField(props.editor, props.row, props.field.key, typeof value === "string" ? value : "");
+		}
+		return (_ctx, _cache) => {
+			return __props.field.type === "select" ? (openBlock(), createBlock(unref(USelect), {
+				key: 0,
+				"model-value": stored.value || void 0,
+				items: __props.field.options ?? [],
+				placeholder: unref(t)("composites.field.choose", { field: __props.field.label }),
+				"aria-label": __props.field.label,
+				disabled: __props.disabled,
+				size: __props.size,
+				class: "w-full",
+				"onUpdate:modelValue": onChoice
+			}, null, 8, [
+				"model-value",
+				"items",
+				"placeholder",
+				"aria-label",
+				"disabled",
+				"size"
+			])) : __props.field.type === "textarea" ? (openBlock(), createBlock(unref(UTextarea), {
+				key: 1,
+				"model-value": draft.value,
+				"aria-label": __props.field.label,
+				disabled: __props.disabled,
+				size: __props.size,
+				autoresize: "",
+				rows: 2,
+				maxrows: 6,
+				class: "w-full",
+				onFocus: _cache[0] || (_cache[0] = ($event) => typing.value = true),
+				onBlur,
+				"onUpdate:modelValue": onInput
+			}, null, 8, [
+				"model-value",
+				"aria-label",
+				"disabled",
+				"size"
+			])) : (openBlock(), createBlock(unref(UInput), {
+				key: 2,
+				"model-value": draft.value,
+				type: __props.field.type,
+				"aria-label": __props.field.label,
+				disabled: __props.disabled,
+				size: __props.size,
+				class: "w-full",
+				onFocus: _cache[1] || (_cache[1] = ($event) => typing.value = true),
+				onBlur,
+				onKeydown: withKeys(commit, ["enter"]),
+				"onUpdate:modelValue": onInput
+			}, null, 8, [
+				"model-value",
+				"type",
+				"aria-label",
+				"disabled",
+				"size"
+			]));
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=CompositeFieldEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeFieldEditor.js","names":["_openBlock","_createBlock","_unref","_withKeys"],"sources":["../../../../src/features/composites/components/CompositeFieldEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Editor } from '@tiptap/core'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport type { CompositeMetaField } from '../kinds'\nimport { metaText } from '../meta-display'\nimport { type CompositeRow, setCompositeMetaField } from '../rows'\n\n/**\n * One meta field of a Baustein as an input that writes through `setCompositeMetaField`. Text-like inputs keep a local\n * draft and commit after typing pauses, on blur and on unmount, so the one-frame-late re-read of the rows never\n * overwrites what is being typed.\n */\nconst props = withDefaults(defineProps<{\n  editor: Editor\n  row: CompositeRow\n  field: CompositeMetaField\n  disabled?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}>(), { size: 'sm' })\n\nconst { Input: UInput, Select: USelect, Textarea: UTextarea } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst stored = computed(() => metaText(props.row, props.field))\nconst draft = ref(stored.value)\nconst typing = ref(false)\nlet dirty = false\nlet timer: ReturnType<typeof setTimeout> | undefined\n\nwatch(stored, (value) => {\n  if (!typing.value && !dirty) draft.value = value\n})\n\nfunction commit() {\n  clearTimeout(timer)\n  if (!dirty) return\n  dirty = false\n  if (!props.editor.isDestroyed) setCompositeMetaField(props.editor, props.row, props.field.key, draft.value)\n}\n\nfunction onInput(value: unknown) {\n  draft.value = typeof value === 'string' ? value : ''\n  dirty = true\n  clearTimeout(timer)\n  timer = setTimeout(commit, 400)\n}\n\nfunction onBlur() {\n  typing.value = false\n  commit()\n}\n\nonBeforeUnmount(commit)\n\nfunction onChoice(value: unknown) {\n  setCompositeMetaField(props.editor, props.row, props.field.key, typeof value === 'string' ? value : '')\n}\n</script>\n\n<template>\n  <USelect\n    v-if=\"field.type === 'select'\"\n    :model-value=\"stored || undefined\"\n    :items=\"field.options ?? []\"\n    :placeholder=\"t('composites.field.choose', { field: field.label })\"\n    :aria-label=\"field.label\"\n    :disabled=\"disabled\"\n    :size=\"size\"\n    class=\"w-full\"\n    @update:model-value=\"onChoice\"\n  />\n  <UTextarea\n    v-else-if=\"field.type === 'textarea'\"\n    :model-value=\"draft\"\n    :aria-label=\"field.label\"\n    :disabled=\"disabled\"\n    :size=\"size\"\n    autoresize\n    :rows=\"2\"\n    :maxrows=\"6\"\n    class=\"w-full\"\n    @focus=\"typing = true\"\n    @blur=\"onBlur\"\n    @update:model-value=\"onInput\"\n  />\n  <UInput\n    v-else\n    :model-value=\"draft\"\n    :type=\"field.type\"\n    :aria-label=\"field.label\"\n    :disabled=\"disabled\"\n    :size=\"size\"\n    class=\"w-full\"\n    @focus=\"typing = true\"\n    @blur=\"onBlur\"\n    @keydown.enter=\"commit\"\n    @update:model-value=\"onInput\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAQd,MAAM,EAAE,OAAO,QAAQ,QAAQ,SAAS,UAAU,cAAc,SAAS;EACzE,MAAM,EAAE,MAAM,cAAc;EAE5B,MAAM,SAAS,eAAe,SAAS,MAAM,KAAK,MAAM,KAAK,CAAC;EAC9D,MAAM,QAAQ,IAAI,OAAO,KAAK;EAC9B,MAAM,SAAS,IAAI,KAAK;EACxB,IAAI,QAAQ;EACZ,IAAI;EAEJ,MAAM,SAAS,UAAU;GACvB,IAAI,CAAC,OAAO,SAAS,CAAC,OAAO,MAAM,QAAQ;EAC7C,CAAC;EAED,SAAS,SAAS;GAChB,aAAa,KAAK;GAClB,IAAI,CAAC,OAAO;GACZ,QAAQ;GACR,IAAI,CAAC,MAAM,OAAO,aAAa,sBAAsB,MAAM,QAAQ,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,KAAK;EAC5G;EAEA,SAAS,QAAQ,OAAgB;GAC/B,MAAM,QAAQ,OAAO,UAAU,WAAW,QAAQ;GAClD,QAAQ;GACR,aAAa,KAAK;GAClB,QAAQ,WAAW,QAAQ,GAAG;EAChC;EAEA,SAAS,SAAS;GAChB,OAAO,QAAQ;GACf,OAAO;EACT;EAEA,gBAAgB,MAAM;EAEtB,SAAS,SAAS,OAAgB;GAChC,sBAAsB,MAAM,QAAQ,MAAM,KAAK,MAAM,MAAM,KAAK,OAAO,UAAU,WAAW,QAAQ,EAAE;EACxG;;GAKU,OAAA,QAAA,MAAM,SAAI,YADlBA,UAAA,GAAAC,YAUEC,MAAA,OAAA,GAAA;;IARC,eAAa,OAAA,SAAU,KAAA;IACvB,OAAO,QAAA,MAAM,WAAO,CAAA;IACpB,aAAaA,MAAA,CAAA,CAAC,CAAA,2BAAA,EAAA,OAAqC,QAAA,MAAM,MAAK,CAAA;IAC9D,cAAY,QAAA,MAAM;IAClB,UAAU,QAAA;IACV,MAAM,QAAA;IACP,OAAM;IACL,uBAAoB;;;;;;;;GAGV,CAAA,KAAA,QAAA,MAAM,SAAI,cADvBF,UAAA,GAAAC,YAaEC,MAAA,SAAA,GAAA;;IAXC,eAAa,MAAA;IACb,cAAY,QAAA,MAAM;IAClB,UAAU,QAAA;IACV,MAAM,QAAA;IACP,YAAA;IACC,MAAM;IACN,SAAS;IACV,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAM;IACP;IACN,uBAAoB;;;;;;GAEvB,CAAA,MAAAF,UAAA,GAAAC,YAYEC,MAAA,MAAA,GAAA;;IAVC,eAAa,MAAA;IACb,MAAM,QAAA,MAAM;IACZ,cAAY,QAAA,MAAM;IAClB,UAAU,QAAA;IACV,MAAM,QAAA;IACP,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAM;IACP;IACN,WAAOC,SAAQ,QAAM,CAAA,OAAA,CAAA;IACrB,uBAAoB"}

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

@@ -0,0 +1,23 @@
+import { CompositeMetaField } from "../kinds.js";
+import { CompositeRow } from "../rows.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/composites/components/CompositeFieldEditor.vue.d.ts
+/**
+ * One meta field of a Baustein as an input that writes through `setCompositeMetaField`. Text-like inputs keep a local
+ * draft and commit after typing pauses, on blur and on unmount, so the one-frame-late re-read of the rows never
+ * overwrites what is being typed.
+ */
+type __VLS_Props = {
+  editor: Editor;
+  row: CompositeRow;
+  field: CompositeMetaField;
+  disabled?: boolean;
+  size?: 'xs' | 'sm' | 'md';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+  size: "xs" | "sm" | "md";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=CompositeFieldEditor.vue.d.ts.map