@ecsplico/editor 3.3.0 → 3.5.0

package/dist/features/image-studio/components/ImageStudioDialog.js

@@ -0,0 +1,371 @@
+import { fetchErrorMessage } from "../../../core/fetch-error.js";
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { addGeneration, addReference, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock } from "../state.js";
+import _sfc_main$1 from "./ImageStudioChat.js";
+import _sfc_main$2 from "./ImageStudioTile.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, onBeforeUnmount, openBlock, ref, renderList, toDisplayString, unref, useId, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+//#region src/features/image-studio/components/ImageStudioDialog.vue
+const _hoisted_1 = {
+	class: "flex flex-col gap-3",
+	"data-image-studio-dialog": ""
+};
+const _hoisted_2 = { class: "grid gap-4 lg:h-[68vh] lg:grid-cols-[17rem_minmax(0,1fr)_minmax(0,22rem)]" };
+const _hoisted_3 = ["aria-labelledby"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = ["id"];
+const _hoisted_6 = ["aria-labelledby"];
+const _hoisted_7 = {
+	key: 1,
+	class: "text-sm text-[var(--sk-muted)]"
+};
+const _hoisted_8 = { class: "flex min-h-0 flex-col gap-4 lg:overflow-y-auto" };
+const _hoisted_9 = ["data-dragging", "aria-labelledby"];
+const _hoisted_10 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_11 = ["id"];
+const _hoisted_12 = {
+	key: 0,
+	class: "text-xs text-[var(--sk-muted)]",
+	role: "status"
+};
+const _hoisted_13 = {
+	key: 2,
+	class: "grid grid-cols-2 gap-2 sm:grid-cols-3"
+};
+const _hoisted_14 = {
+	key: 3,
+	class: "text-sm text-[var(--sk-muted)]"
+};
+const _hoisted_15 = ["aria-labelledby"];
+const _hoisted_16 = ["id"];
+const _hoisted_17 = {
+	key: 0,
+	class: "grid grid-cols-2 gap-2 sm:grid-cols-3"
+};
+const _hoisted_18 = {
+	key: 1,
+	class: "text-sm text-[var(--sk-muted)]"
+};
+const _hoisted_19 = { class: "flex min-h-0 flex-col gap-3" };
+const _hoisted_20 = ["aria-labelledby"];
+const _hoisted_21 = ["id"];
+const _hoisted_22 = { class: "flex aspect-square items-center justify-center overflow-hidden rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg-elevated)]" };
+const _hoisted_23 = ["src", "alt"];
+const _hoisted_24 = {
+	key: 1,
+	class: "text-sm text-[var(--sk-muted)]"
+};
+/**
+* The Bild-Studio: description and Prompt-Bausteine on the left, references and previous generations in the middle,
+* the block's image and the chat on the right. The dialog applies the reducers of `../state` to `store.state` and
+* hands every result to `store.update`; the store only generates, uploads and persists (see `ImageStudioStore`).
+*
+* The description is committed 500 ms after the last keystroke and at once on blur, on „Erzeugen“ and on close, so the
+* host never builds a prompt from a stale text. Closing (or unmounting) aborts a running generation; an aborted
+* generation adds no turn, a failed one adds a turn with the problem.
+*/
+const COMMIT_DELAY_MS = 500;
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "ImageStudioDialog",
+	props: {
+		open: { type: Boolean },
+		store: {},
+		title: {}
+	},
+	emits: ["update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { Alert: UAlert, Button: UButton, Modal: UModal, Switch: USwitch, Textarea: UTextarea } = useUiKit();
+		const { t } = useEditorI18n();
+		const uid = useId();
+		const state = computed(() => props.store.state.value);
+		const promptBlocks = computed(() => props.store.promptBlocks.value);
+		const problem = computed(() => props.store.problem.value);
+		const images = computed(() => [...state.value.generations, ...state.value.references]);
+		const picture = computed(() => selectedImage(state.value));
+		const draft = ref(state.value.description);
+		/** The description as last committed or received: the host's echo of our own commit must not overwrite a newer draft. */
+		let known = state.value.description;
+		let commitTimer;
+		function commitDescription() {
+			clearTimeout(commitTimer);
+			commitTimer = void 0;
+			if (draft.value === props.store.state.value.description) return;
+			known = draft.value;
+			props.store.update(setDescription(props.store.state.value, draft.value));
+		}
+		watch(draft, (text) => {
+			if (text === props.store.state.value.description) return;
+			clearTimeout(commitTimer);
+			commitTimer = setTimeout(commitDescription, COMMIT_DELAY_MS);
+		});
+		watch(() => state.value.description, (description) => {
+			if (description === known) return;
+			known = description;
+			if (commitTimer === void 0) draft.value = description;
+		});
+		const update = (next) => props.store.update(next);
+		const toggleBlock = (id) => update(togglePromptBlock(props.store.state.value, id));
+		const toggle = (id) => update(toggleImage(props.store.state.value, id));
+		const use = (id) => update(select(props.store.state.value, id));
+		const remove = (id) => update(removeImage(props.store.state.value, id));
+		const fileInputRef = useTemplateRef("fileInput");
+		const uploading = ref(0);
+		const uploadProblem = ref();
+		const dragging = ref(false);
+		async function upload(files) {
+			const pictures = files.filter((file) => file.type.startsWith("image/"));
+			if (!pictures.length) return;
+			uploadProblem.value = void 0;
+			uploading.value += pictures.length;
+			await Promise.all(pictures.map(async (file) => {
+				try {
+					const image = await props.store.upload(file);
+					update(addReference(props.store.state.value, image));
+				} catch (error) {
+					uploadProblem.value = t("imageStudio.dialog.references.failed", { message: fetchErrorMessage(error) });
+				} finally {
+					uploading.value -= 1;
+				}
+			}));
+		}
+		function onFilesChosen(event) {
+			const input = event.target;
+			const files = [...input.files ?? []];
+			input.value = "";
+			upload(files);
+		}
+		function onDrop(event) {
+			dragging.value = false;
+			upload([...event.dataTransfer?.files ?? []]);
+		}
+		const running = ref(false);
+		let controller;
+		function abortGeneration() {
+			controller?.abort();
+			controller = void 0;
+			running.value = false;
+		}
+		async function generate(instruction) {
+			if (controller) return;
+			commitDescription();
+			const own = new AbortController();
+			controller = own;
+			running.value = true;
+			const turn = {
+				id: crypto.randomUUID(),
+				instruction,
+				imageId: null,
+				createdAt: (/* @__PURE__ */ new Date()).toISOString()
+			};
+			try {
+				const image = await props.store.generate(instruction, own.signal);
+				if (own.signal.aborted) return;
+				props.store.update(addGeneration(props.store.state.value, image, turn));
+			} catch (error) {
+				if (own.signal.aborted) return;
+				const current = props.store.state.value;
+				props.store.update({
+					...current,
+					turns: [...current.turns, {
+						...turn,
+						problem: fetchErrorMessage(error)
+					}]
+				});
+			} finally {
+				if (controller === own) {
+					controller = void 0;
+					running.value = false;
+				}
+			}
+		}
+		function close() {
+			commitDescription();
+			abortGeneration();
+			emit("update:open", false);
+		}
+		watch(() => props.open, (open) => {
+			if (open) return;
+			commitDescription();
+			abortGeneration();
+		});
+		onBeforeUnmount(() => {
+			commitDescription();
+			abortGeneration();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(UModal), {
+				open: __props.open,
+				title: __props.title ?? unref(t)("imageStudio.dialog.title"),
+				ui: { content: "sm:w-[72rem] sm:max-w-[calc(100vw-2rem)]" },
+				"onUpdate:open": _cache[5] || (_cache[5] = (value) => {
+					if (!value) close();
+				})
+			}, {
+				body: withCtx(() => [createElementVNode("div", _hoisted_1, [problem.value ? (openBlock(), createBlock(unref(UAlert), {
+					key: 0,
+					color: "error",
+					variant: "subtle",
+					title: problem.value
+				}, null, 8, ["title"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [
+					createCommentVNode(" Left: what the picture shows. "),
+					createElementVNode("section", {
+						class: "flex min-h-0 flex-col gap-3 lg:overflow-y-auto",
+						"aria-labelledby": `${unref(uid)}-description`
+					}, [
+						createElementVNode("h3", {
+							id: `${unref(uid)}-description`,
+							class: "text-sm font-medium text-[var(--sk-fg-highlighted)]"
+						}, toDisplayString(unref(t)("imageStudio.dialog.description.heading")), 9, _hoisted_4),
+						createVNode(unref(UTextarea), {
+							modelValue: draft.value,
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => draft.value = $event),
+							rows: 6,
+							maxrows: 14,
+							autoresize: "",
+							placeholder: unref(t)("imageStudio.dialog.description.placeholder"),
+							"aria-label": unref(t)("imageStudio.dialog.description.heading"),
+							onBlur: commitDescription
+						}, null, 8, [
+							"modelValue",
+							"placeholder",
+							"aria-label"
+						]),
+						createElementVNode("h3", {
+							id: `${unref(uid)}-blocks`,
+							class: "mt-2 text-sm font-medium text-[var(--sk-fg-highlighted)]"
+						}, toDisplayString(unref(t)("imageStudio.dialog.blocks.heading")), 9, _hoisted_5),
+						promptBlocks.value.length ? (openBlock(), createElementBlock("ul", {
+							key: 0,
+							class: "flex flex-col gap-3",
+							"aria-labelledby": `${unref(uid)}-blocks`
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(promptBlocks.value, (block) => {
+							return openBlock(), createElementBlock("li", { key: block.id }, [createVNode(unref(USwitch), {
+								"model-value": state.value.promptBlockIds.includes(block.id),
+								label: block.label,
+								description: block.text,
+								"onUpdate:modelValue": ($event) => toggleBlock(block.id)
+							}, null, 8, [
+								"model-value",
+								"label",
+								"description",
+								"onUpdate:modelValue"
+							])]);
+						}), 128))], 8, _hoisted_6)) : (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(unref(t)("imageStudio.dialog.blocks.empty")), 1))
+					], 8, _hoisted_3),
+					createCommentVNode(" Middle: references and previous generations. "),
+					createElementVNode("div", _hoisted_8, [createElementVNode("section", {
+						class: "flex flex-col gap-2 rounded-md border border-dashed border-transparent p-1 data-[dragging=true]:border-[var(--sk-primary)]",
+						"data-dragging": dragging.value,
+						"aria-labelledby": `${unref(uid)}-references`,
+						"data-image-studio-drop": "",
+						onDragenter: _cache[2] || (_cache[2] = withModifiers(($event) => dragging.value = true, ["prevent"])),
+						onDragover: _cache[3] || (_cache[3] = withModifiers(($event) => dragging.value = true, ["prevent"])),
+						onDragleave: _cache[4] || (_cache[4] = ($event) => dragging.value = false),
+						onDrop: withModifiers(onDrop, ["prevent"])
+					}, [
+						createElementVNode("div", _hoisted_10, [
+							createElementVNode("h3", {
+								id: `${unref(uid)}-references`,
+								class: "text-sm font-medium text-[var(--sk-fg-highlighted)]"
+							}, toDisplayString(unref(t)("imageStudio.dialog.references.heading")), 9, _hoisted_11),
+							createVNode(unref(UButton), {
+								label: unref(t)("imageStudio.dialog.references.upload"),
+								icon: "i-lucide-upload",
+								size: "xs",
+								color: "neutral",
+								variant: "outline",
+								loading: uploading.value > 0,
+								onClick: _cache[1] || (_cache[1] = ($event) => fileInputRef.value?.click())
+							}, null, 8, ["label", "loading"]),
+							createElementVNode("input", {
+								ref: "fileInput",
+								type: "file",
+								accept: "image/*",
+								multiple: "",
+								hidden: "",
+								"data-image-studio-file": "",
+								onChange: onFilesChosen
+							}, null, 544)
+						]),
+						uploading.value ? (openBlock(), createElementBlock("p", _hoisted_12, toDisplayString(unref(t)("imageStudio.dialog.references.uploading")), 1)) : createCommentVNode("v-if", true),
+						uploadProblem.value ? (openBlock(), createBlock(unref(UAlert), {
+							key: 1,
+							color: "error",
+							variant: "subtle",
+							title: uploadProblem.value
+						}, null, 8, ["title"])) : createCommentVNode("v-if", true),
+						state.value.references.length ? (openBlock(), createElementBlock("ul", _hoisted_13, [(openBlock(true), createElementBlock(Fragment, null, renderList(state.value.references, (image) => {
+							return openBlock(), createBlock(_sfc_main$2, {
+								key: image.id,
+								image,
+								selected: state.value.selected === image.id,
+								onToggle: ($event) => toggle(image.id),
+								onSelect: ($event) => use(image.id),
+								onRemove: ($event) => remove(image.id)
+							}, null, 8, [
+								"image",
+								"selected",
+								"onToggle",
+								"onSelect",
+								"onRemove"
+							]);
+						}), 128))])) : (openBlock(), createElementBlock("p", _hoisted_14, toDisplayString(unref(t)("imageStudio.dialog.references.drop")), 1))
+					], 40, _hoisted_9), createElementVNode("section", {
+						class: "flex flex-col gap-2 p-1",
+						"aria-labelledby": `${unref(uid)}-generations`
+					}, [createElementVNode("h3", {
+						id: `${unref(uid)}-generations`,
+						class: "text-sm font-medium text-[var(--sk-fg-highlighted)]"
+					}, toDisplayString(unref(t)("imageStudio.dialog.generations.heading")), 9, _hoisted_16), state.value.generations.length ? (openBlock(), createElementBlock("ul", _hoisted_17, [(openBlock(true), createElementBlock(Fragment, null, renderList(state.value.generations, (image) => {
+						return openBlock(), createBlock(_sfc_main$2, {
+							key: image.id,
+							image,
+							selected: state.value.selected === image.id,
+							onToggle: ($event) => toggle(image.id),
+							onSelect: ($event) => use(image.id),
+							onRemove: ($event) => remove(image.id)
+						}, null, 8, [
+							"image",
+							"selected",
+							"onToggle",
+							"onSelect",
+							"onRemove"
+						]);
+					}), 128))])) : (openBlock(), createElementBlock("p", _hoisted_18, toDisplayString(unref(t)("imageStudio.dialog.generations.empty")), 1))], 8, _hoisted_15)]),
+					createCommentVNode(" Right: the block's image and the chat. "),
+					createElementVNode("div", _hoisted_19, [createElementVNode("section", {
+						class: "flex flex-col gap-2",
+						"aria-labelledby": `${unref(uid)}-preview`
+					}, [createElementVNode("h3", {
+						id: `${unref(uid)}-preview`,
+						class: "text-sm font-medium text-[var(--sk-fg-highlighted)]"
+					}, toDisplayString(unref(t)("imageStudio.dialog.preview.heading")), 9, _hoisted_21), createElementVNode("div", _hoisted_22, [picture.value ? (openBlock(), createElementBlock("img", {
+						key: 0,
+						src: picture.value.url,
+						alt: picture.value.title || unref(t)("imageStudio.dialog.tile.untitled"),
+						class: "size-full object-contain",
+						"data-image-studio-preview": ""
+					}, null, 8, _hoisted_23)) : (openBlock(), createElementBlock("p", _hoisted_24, toDisplayString(unref(t)("imageStudio.dialog.preview.empty")), 1))])], 8, _hoisted_20), createVNode(_sfc_main$1, {
+						turns: state.value.turns,
+						images: images.value,
+						running: running.value,
+						"empty-allowed": draft.value.trim() !== "",
+						onSend: generate
+					}, null, 8, [
+						"turns",
+						"images",
+						"running",
+						"empty-allowed"
+					])])
+				])])]),
+				_: 1
+			}, 8, ["open", "title"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=ImageStudioDialog.js.map

package/dist/features/image-studio/components/ImageStudioDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageStudioDialog.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createElementVNode","_createCommentVNode","_toDisplayString","_createVNode","_createElementBlock","_Fragment","_renderList","_withModifiers","ImageStudioTile","ImageStudioChat"],"sources":["../../../../src/features/image-studio/components/ImageStudioDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, useId, useTemplateRef, watch } from 'vue'\nimport { fetchErrorMessage } from '../../../core'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport {\n  addGeneration,\n  addReference,\n  type ImageStudioState,\n  type ImageStudioTurn,\n  removeImage,\n  select,\n  selectedImage,\n  setDescription,\n  toggleImage,\n  togglePromptBlock,\n} from '../state'\nimport type { ImageStudioStore } from '../store'\nimport ImageStudioChat from './ImageStudioChat.vue'\nimport ImageStudioTile from './ImageStudioTile.vue'\n\n/**\n * The Bild-Studio: description and Prompt-Bausteine on the left, references and previous generations in the middle,\n * the block's image and the chat on the right. The dialog applies the reducers of `../state` to `store.state` and\n * hands every result to `store.update`; the store only generates, uploads and persists (see `ImageStudioStore`).\n *\n * The description is committed 500 ms after the last keystroke and at once on blur, on „Erzeugen“ and on close, so the\n * host never builds a prompt from a stale text. Closing (or unmounting) aborts a running generation; an aborted\n * generation adds no turn, a failed one adds a turn with the problem.\n */\nconst props = defineProps<{ open: boolean, store: ImageStudioStore, title?: string }>()\nconst emit = defineEmits<{ 'update:open': [open: boolean] }>()\n\nconst { Alert: UAlert, Button: UButton, Modal: UModal, Switch: USwitch, Textarea: UTextarea } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst uid = useId()\nconst state = computed(() => props.store.state.value)\nconst promptBlocks = computed(() => props.store.promptBlocks.value)\nconst problem = computed(() => props.store.problem.value)\nconst images = computed(() => [...state.value.generations, ...state.value.references])\nconst picture = computed(() => selectedImage(state.value))\n\n// --- Description ----------------------------------------------------------------------------------------------------\n\nconst COMMIT_DELAY_MS = 500\nconst draft = ref(state.value.description)\n/** The description as last committed or received: the host's echo of our own commit must not overwrite a newer draft. */\nlet known = state.value.description\nlet commitTimer: ReturnType<typeof setTimeout> | undefined\n\nfunction commitDescription() {\n  clearTimeout(commitTimer)\n  commitTimer = undefined\n  if (draft.value === props.store.state.value.description) return\n  known = draft.value\n  props.store.update(setDescription(props.store.state.value, draft.value))\n}\n\nwatch(draft, (text) => {\n  if (text === props.store.state.value.description) return\n  clearTimeout(commitTimer)\n  commitTimer = setTimeout(commitDescription, COMMIT_DELAY_MS)\n})\n// A change of the host (undo, another tab) shows unless the user has typed something that is not committed yet.\nwatch(() => state.value.description, (description) => {\n  if (description === known) return\n  known = description\n  if (commitTimer === undefined) draft.value = description\n})\n\n// --- Reducers -------------------------------------------------------------------------------------------------------\n\nconst update = (next: ImageStudioState) => props.store.update(next)\nconst toggleBlock = (id: string) => update(togglePromptBlock(props.store.state.value, id))\nconst toggle = (id: string) => update(toggleImage(props.store.state.value, id))\nconst use = (id: string) => update(select(props.store.state.value, id))\nconst remove = (id: string) => update(removeImage(props.store.state.value, id))\n\n// --- References: upload and drop ------------------------------------------------------------------------------------\n\nconst fileInputRef = useTemplateRef<HTMLInputElement>('fileInput')\nconst uploading = ref(0)\nconst uploadProblem = ref<string>()\nconst dragging = ref(false)\n\nasync function upload(files: readonly File[]) {\n  const pictures = files.filter(file => file.type.startsWith('image/'))\n  if (!pictures.length) return\n  uploadProblem.value = undefined\n  uploading.value += pictures.length\n  await Promise.all(pictures.map(async (file) => {\n    try {\n      const image = await props.store.upload(file)\n      update(addReference(props.store.state.value, image))\n    } catch (error) {\n      uploadProblem.value = t('imageStudio.dialog.references.failed', { message: fetchErrorMessage(error) })\n    } finally {\n      uploading.value -= 1\n    }\n  }))\n}\n\nfunction onFilesChosen(event: Event) {\n  const input = event.target as HTMLInputElement\n  const files = [...(input.files ?? [])]\n  input.value = '' // the same file can be chosen again\n  void upload(files)\n}\n\nfunction onDrop(event: DragEvent) {\n  dragging.value = false\n  void upload([...(event.dataTransfer?.files ?? [])])\n}\n\n// --- Generation -----------------------------------------------------------------------------------------------------\n\nconst running = ref(false)\nlet controller: AbortController | undefined\n\nfunction abortGeneration() {\n  controller?.abort()\n  controller = undefined\n  running.value = false\n}\n\nasync function generate(instruction: string) {\n  if (controller) return\n  commitDescription()\n  const own = new AbortController()\n  controller = own\n  running.value = true\n  const turn: ImageStudioTurn = { id: crypto.randomUUID(), instruction, imageId: null, createdAt: new Date().toISOString() }\n  try {\n    const image = await props.store.generate(instruction, own.signal)\n    if (own.signal.aborted) return\n    props.store.update(addGeneration(props.store.state.value, image, turn))\n  } catch (error) {\n    if (own.signal.aborted) return\n    const current = props.store.state.value\n    props.store.update({ ...current, turns: [...current.turns, { ...turn, problem: fetchErrorMessage(error) }] })\n  } finally {\n    if (controller === own) {\n      controller = undefined\n      running.value = false\n    }\n  }\n}\n\n// --- Closing --------------------------------------------------------------------------------------------------------\n\nfunction close() {\n  commitDescription()\n  abortGeneration()\n  emit('update:open', false)\n}\n\nwatch(() => props.open, (open) => {\n  if (open) return\n  commitDescription()\n  abortGeneration()\n})\n\nonBeforeUnmount(() => {\n  commitDescription()\n  abortGeneration()\n})\n</script>\n\n<template>\n  <UModal\n    :open=\"open\"\n    :title=\"title ?? t('imageStudio.dialog.title')\"\n    :ui=\"{ content: 'sm:w-[72rem] sm:max-w-[calc(100vw-2rem)]' }\"\n    @update:open=\"(value: boolean) => { if (!value) close() }\"\n  >\n    <template #body>\n      <div class=\"flex flex-col gap-3\" data-image-studio-dialog>\n        <UAlert v-if=\"problem\" color=\"error\" variant=\"subtle\" :title=\"problem\" />\n        <div class=\"grid gap-4 lg:h-[68vh] lg:grid-cols-[17rem_minmax(0,1fr)_minmax(0,22rem)]\">\n          <!-- Left: what the picture shows. -->\n          <section class=\"flex min-h-0 flex-col gap-3 lg:overflow-y-auto\" :aria-labelledby=\"`${uid}-description`\">\n            <h3 :id=\"`${uid}-description`\" class=\"text-sm font-medium text-[var(--sk-fg-highlighted)]\">\n              {{ t('imageStudio.dialog.description.heading') }}\n            </h3>\n            <UTextarea\n              v-model=\"draft\"\n              :rows=\"6\"\n              :maxrows=\"14\"\n              autoresize\n              :placeholder=\"t('imageStudio.dialog.description.placeholder')\"\n              :aria-label=\"t('imageStudio.dialog.description.heading')\"\n              @blur=\"commitDescription\"\n            />\n            <h3 :id=\"`${uid}-blocks`\" class=\"mt-2 text-sm font-medium text-[var(--sk-fg-highlighted)]\">\n              {{ t('imageStudio.dialog.blocks.heading') }}\n            </h3>\n            <ul v-if=\"promptBlocks.length\" class=\"flex flex-col gap-3\" :aria-labelledby=\"`${uid}-blocks`\">\n              <li v-for=\"block in promptBlocks\" :key=\"block.id\">\n                <USwitch\n                  :model-value=\"state.promptBlockIds.includes(block.id)\"\n                  :label=\"block.label\"\n                  :description=\"block.text\"\n                  @update:model-value=\"toggleBlock(block.id)\"\n                />\n              </li>\n            </ul>\n            <p v-else class=\"text-sm text-[var(--sk-muted)]\">\n              {{ t('imageStudio.dialog.blocks.empty') }}\n            </p>\n          </section>\n\n          <!-- Middle: references and previous generations. -->\n          <div class=\"flex min-h-0 flex-col gap-4 lg:overflow-y-auto\">\n            <section\n              class=\"flex flex-col gap-2 rounded-md border border-dashed border-transparent p-1 data-[dragging=true]:border-[var(--sk-primary)]\"\n              :data-dragging=\"dragging\"\n              :aria-labelledby=\"`${uid}-references`\"\n              data-image-studio-drop\n              @dragenter.prevent=\"dragging = true\"\n              @dragover.prevent=\"dragging = true\"\n              @dragleave=\"dragging = false\"\n              @drop.prevent=\"onDrop\"\n            >\n              <div class=\"flex items-center justify-between gap-2\">\n                <h3 :id=\"`${uid}-references`\" class=\"text-sm font-medium text-[var(--sk-fg-highlighted)]\">\n                  {{ t('imageStudio.dialog.references.heading') }}\n                </h3>\n                <UButton\n                  :label=\"t('imageStudio.dialog.references.upload')\"\n                  icon=\"i-lucide-upload\"\n                  size=\"xs\"\n                  color=\"neutral\"\n                  variant=\"outline\"\n                  :loading=\"uploading > 0\"\n                  @click=\"fileInputRef?.click()\"\n                />\n                <input ref=\"fileInput\" type=\"file\" accept=\"image/*\" multiple hidden data-image-studio-file @change=\"onFilesChosen\">\n              </div>\n              <p v-if=\"uploading\" class=\"text-xs text-[var(--sk-muted)]\" role=\"status\">\n                {{ t('imageStudio.dialog.references.uploading') }}\n              </p>\n              <UAlert v-if=\"uploadProblem\" color=\"error\" variant=\"subtle\" :title=\"uploadProblem\" />\n              <ul v-if=\"state.references.length\" class=\"grid grid-cols-2 gap-2 sm:grid-cols-3\">\n                <ImageStudioTile\n                  v-for=\"image in state.references\"\n                  :key=\"image.id\"\n                  :image=\"image\"\n                  :selected=\"state.selected === image.id\"\n                  @toggle=\"toggle(image.id)\"\n                  @select=\"use(image.id)\"\n                  @remove=\"remove(image.id)\"\n                />\n              </ul>\n              <p v-else class=\"text-sm text-[var(--sk-muted)]\">\n                {{ t('imageStudio.dialog.references.drop') }}\n              </p>\n            </section>\n\n            <section class=\"flex flex-col gap-2 p-1\" :aria-labelledby=\"`${uid}-generations`\">\n              <h3 :id=\"`${uid}-generations`\" class=\"text-sm font-medium text-[var(--sk-fg-highlighted)]\">\n                {{ t('imageStudio.dialog.generations.heading') }}\n              </h3>\n              <ul v-if=\"state.generations.length\" class=\"grid grid-cols-2 gap-2 sm:grid-cols-3\">\n                <ImageStudioTile\n                  v-for=\"image in state.generations\"\n                  :key=\"image.id\"\n                  :image=\"image\"\n                  :selected=\"state.selected === image.id\"\n                  @toggle=\"toggle(image.id)\"\n                  @select=\"use(image.id)\"\n                  @remove=\"remove(image.id)\"\n                />\n              </ul>\n              <p v-else class=\"text-sm text-[var(--sk-muted)]\">\n                {{ t('imageStudio.dialog.generations.empty') }}\n              </p>\n            </section>\n          </div>\n\n          <!-- Right: the block's image and the chat. -->\n          <div class=\"flex min-h-0 flex-col gap-3\">\n            <section class=\"flex flex-col gap-2\" :aria-labelledby=\"`${uid}-preview`\">\n              <h3 :id=\"`${uid}-preview`\" class=\"text-sm font-medium text-[var(--sk-fg-highlighted)]\">\n                {{ t('imageStudio.dialog.preview.heading') }}\n              </h3>\n              <div class=\"flex aspect-square items-center justify-center overflow-hidden rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg-elevated)]\">\n                <img\n                  v-if=\"picture\"\n                  :src=\"picture.url\"\n                  :alt=\"picture.title || t('imageStudio.dialog.tile.untitled')\"\n                  class=\"size-full object-contain\"\n                  data-image-studio-preview\n                >\n                <p v-else class=\"text-sm text-[var(--sk-muted)]\">\n                  {{ t('imageStudio.dialog.preview.empty') }}\n                </p>\n              </div>\n            </section>\n            <ImageStudioChat\n              :turns=\"state.turns\"\n              :images=\"images\"\n              :running=\"running\"\n              :empty-allowed=\"draft.trim() !== ''\"\n              @send=\"generate\"\n            />\n          </div>\n        </div>\n      </div>\n    </template>\n  </UModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,kBAAkB;;;;;;;;;;EAfxB,MAAM,QAAQ;EACd,MAAM,OAAO;EAEb,MAAM,EAAE,OAAO,QAAQ,QAAQ,SAAS,OAAO,QAAQ,QAAQ,SAAS,UAAU,cAAc,SAAS;EACzG,MAAM,EAAE,MAAM,cAAc;EAE5B,MAAM,MAAM,MAAM;EAClB,MAAM,QAAQ,eAAe,MAAM,MAAM,MAAM,KAAK;EACpD,MAAM,eAAe,eAAe,MAAM,MAAM,aAAa,KAAK;EAClE,MAAM,UAAU,eAAe,MAAM,MAAM,QAAQ,KAAK;EACxD,MAAM,SAAS,eAAe,CAAC,GAAG,MAAM,MAAM,aAAa,GAAG,MAAM,MAAM,UAAU,CAAC;EACrF,MAAM,UAAU,eAAe,cAAc,MAAM,KAAK,CAAC;EAKzD,MAAM,QAAQ,IAAI,MAAM,MAAM,WAAW;;EAEzC,IAAI,QAAQ,MAAM,MAAM;EACxB,IAAI;EAEJ,SAAS,oBAAoB;GAC3B,aAAa,WAAW;GACxB,cAAc,KAAA;GACd,IAAI,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,aAAa;GACzD,QAAQ,MAAM;GACd,MAAM,MAAM,OAAO,eAAe,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;EACzE;EAEA,MAAM,QAAQ,SAAS;GACrB,IAAI,SAAS,MAAM,MAAM,MAAM,MAAM,aAAa;GAClD,aAAa,WAAW;GACxB,cAAc,WAAW,mBAAmB,eAAe;EAC7D,CAAC;EAED,YAAY,MAAM,MAAM,cAAc,gBAAgB;GACpD,IAAI,gBAAgB,OAAO;GAC3B,QAAQ;GACR,IAAI,gBAAgB,KAAA,GAAW,MAAM,QAAQ;EAC/C,CAAC;EAID,MAAM,UAAU,SAA2B,MAAM,MAAM,OAAO,IAAI;EAClE,MAAM,eAAe,OAAe,OAAO,kBAAkB,MAAM,MAAM,MAAM,OAAO,EAAE,CAAC;EACzF,MAAM,UAAU,OAAe,OAAO,YAAY,MAAM,MAAM,MAAM,OAAO,EAAE,CAAC;EAC9E,MAAM,OAAO,OAAe,OAAO,OAAO,MAAM,MAAM,MAAM,OAAO,EAAE,CAAC;EACtE,MAAM,UAAU,OAAe,OAAO,YAAY,MAAM,MAAM,MAAM,OAAO,EAAE,CAAC;EAI9E,MAAM,eAAe,eAAiC,WAAW;EACjE,MAAM,YAAY,IAAI,CAAC;EACvB,MAAM,gBAAgB,IAAY;EAClC,MAAM,WAAW,IAAI,KAAK;EAE1B,eAAe,OAAO,OAAwB;GAC5C,MAAM,WAAW,MAAM,QAAO,SAAQ,KAAK,KAAK,WAAW,QAAQ,CAAC;GACpE,IAAI,CAAC,SAAS,QAAQ;GACtB,cAAc,QAAQ,KAAA;GACtB,UAAU,SAAS,SAAS;GAC5B,MAAM,QAAQ,IAAI,SAAS,IAAI,OAAO,SAAS;IAC7C,IAAI;KACF,MAAM,QAAQ,MAAM,MAAM,MAAM,OAAO,IAAI;KAC3C,OAAO,aAAa,MAAM,MAAM,MAAM,OAAO,KAAK,CAAC;IACrD,SAAS,OAAO;KACd,cAAc,QAAQ,EAAE,wCAAwC,EAAE,SAAS,kBAAkB,KAAK,EAAE,CAAC;IACvG,UAAU;KACR,UAAU,SAAS;IACrB;GACF,CAAC,CAAC;EACJ;EAEA,SAAS,cAAc,OAAc;GACnC,MAAM,QAAQ,MAAM;GACpB,MAAM,QAAQ,CAAC,GAAI,MAAM,SAAS,CAAC,CAAE;GACrC,MAAM,QAAQ;GACd,OAAY,KAAK;EACnB;EAEA,SAAS,OAAO,OAAkB;GAChC,SAAS,QAAQ;GACjB,OAAY,CAAC,GAAI,MAAM,cAAc,SAAS,CAAC,CAAE,CAAC;EACpD;EAIA,MAAM,UAAU,IAAI,KAAK;EACzB,IAAI;EAEJ,SAAS,kBAAkB;GACzB,YAAY,MAAM;GAClB,aAAa,KAAA;GACb,QAAQ,QAAQ;EAClB;EAEA,eAAe,SAAS,aAAqB;GAC3C,IAAI,YAAY;GAChB,kBAAkB;GAClB,MAAM,MAAM,IAAI,gBAAgB;GAChC,aAAa;GACb,QAAQ,QAAQ;GAChB,MAAM,OAAwB;IAAE,IAAI,OAAO,WAAW;IAAG;IAAa,SAAS;IAAM,4BAAW,IAAI,KAAK,EAAA,CAAE,YAAY;GAAE;GACzH,IAAI;IACF,MAAM,QAAQ,MAAM,MAAM,MAAM,SAAS,aAAa,IAAI,MAAM;IAChE,IAAI,IAAI,OAAO,SAAS;IACxB,MAAM,MAAM,OAAO,cAAc,MAAM,MAAM,MAAM,OAAO,OAAO,IAAI,CAAC;GACxE,SAAS,OAAO;IACd,IAAI,IAAI,OAAO,SAAS;IACxB,MAAM,UAAU,MAAM,MAAM,MAAM;IAClC,MAAM,MAAM,OAAO;KAAE,GAAG;KAAS,OAAO,CAAC,GAAG,QAAQ,OAAO;MAAE,GAAG;MAAM,SAAS,kBAAkB,KAAK;KAAE,CAAC;IAAE,CAAC;GAC9G,UAAU;IACR,IAAI,eAAe,KAAK;KACtB,aAAa,KAAA;KACb,QAAQ,QAAQ;IAClB;GACF;EACF;EAIA,SAAS,QAAQ;GACf,kBAAkB;GAClB,gBAAgB;GAChB,KAAK,eAAe,KAAK;EAC3B;EAEA,YAAY,MAAM,OAAO,SAAS;GAChC,IAAI,MAAM;GACV,kBAAkB;GAClB,gBAAgB;EAClB,CAAC;EAED,sBAAsB;GACpB,kBAAkB;GAClB,gBAAgB;EAClB,CAAC;;GAIC,OAAAA,UAAA,GAAAC,YA4ISC,MAAA,MAAA,GAAA;IA3IN,MAAM,QAAA;IACN,OAAO,QAAA,SAASA,MAAA,CAAA,CAAC,CAAA,0BAAA;IACjB,IAAI,EAAA,SAAA,2CAAA;IACJ,iBAAW,OAAA,OAAA,OAAA,MAAG,UAAc;KAAA,IAAA,CAAY,OAAO,MAAK;IAAA;;IAE1C,MAAIC,cAoIP,CAnINC,mBAmIM,OAnIN,YAmIM,CAlIU,QAAA,SAAdJ,UAAA,GAAAC,YAAyEC,MAAA,MAAA,GAAA;;KAAlD,OAAM;KAAQ,SAAQ;KAAU,OAAO,QAAA;IAC9D,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,KAAAG,mBAAA,QAAA,IAAA,GAAAD,mBAgIM,OAhIN,YAgIM;KA/HJC,mBAAA,iCAAA;KACAD,mBA6BU,WAAA;MA7BD,OAAM;MAAkD,mBAAe,GAAKF,MAAA,GAAA,EAAG;;MACtFE,mBAEK,MAAA;OAFA,IAAE,GAAKF,MAAA,GAAA,EAAG;OAAgB,OAAM;MAChC,GAAAI,gBAAAJ,MAAA,CAAA,CAAC,CAAA,wCAAA,CAAA,GAAA,GAAA,UAAA;MAENK,YAQEL,MAAA,SAAA,GAAA;OAPS,YAAA,MAAA;OAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;OACb,MAAM;OACN,SAAS;OACV,YAAA;OACC,aAAaA,MAAA,CAAA,CAAC,CAAA,4CAAA;OACd,cAAYA,MAAA,CAAA,CAAC,CAAA,wCAAA;OACb,QAAM;;;;;;MAETE,mBAEK,MAAA;OAFA,IAAE,GAAKF,MAAA,GAAA,EAAG;OAAW,OAAM;MAC3B,GAAAI,gBAAAJ,MAAA,CAAA,CAAC,CAAA,mCAAA,CAAA,GAAA,GAAA,UAAA;MAEI,aAAA,MAAa,UAAvBF,UAAA,GAAAQ,mBASK,MAAA;;OAT0B,OAAM;OAAuB,mBAAe,GAAKN,MAAA,GAAA,EAAG;MACjF,GAAA,EAAAF,UAAA,IAAA,GAAAQ,mBAOKC,UAAA,MAAAC,WAPe,aAAA,QAAT,UAAK;OAAhB,OAAAV,UAAA,GAAAQ,mBAOK,MAAA,EAP8B,KAAK,MAAM,GAAA,GAAA,CAC5CD,YAKEL,MAAA,OAAA,GAAA;QAJC,eAAa,MAAA,MAAM,eAAe,SAAS,MAAM,EAAE;QACnD,OAAO,MAAM;QACb,aAAa,MAAM;QACnB,wBAAkB,WAAE,YAAY,MAAM,EAAE;;;;;;;MAI/C,CAAA,GAAA,GAAA,EAAA,GAAA,GAAA,UAAA,MAAAF,UAAA,GAAAQ,mBAEI,KAFJ,YAEIF,gBADCJ,MAAA,CAAA,CAAC,CAAA,iCAAA,CAAA,GAAA,CAAA;;KAIRG,mBAAA,gDAAA;KACAD,mBAiEM,OAjEN,YAiEM,CAhEJA,mBA2CU,WAAA;MA1CR,OAAM;MACL,iBAAe,SAAA;MACf,mBAAe,GAAKF,MAAA,GAAA,EAAG;MACxB,0BAAA;MACC,aAAS,OAAA,OAAA,OAAA,KAAAS,eAAA,WAAU,SAAA,QAAQ,MAAA,CAAA,SAAA,CAAA;MAC3B,YAAQ,OAAA,OAAA,OAAA,KAAAA,eAAA,WAAU,SAAA,QAAQ,MAAA,CAAA,SAAA,CAAA;MAC1B,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;MACnB,QAAIA,cAAU,QAAM,CAAA,SAAA,CAAA;;MAErBP,mBAcM,OAdN,aAcM;OAbJA,mBAEK,MAAA;QAFA,IAAE,GAAKF,MAAA,GAAA,EAAG;QAAe,OAAM;OAC/B,GAAAI,gBAAAJ,MAAA,CAAA,CAAC,CAAA,uCAAA,CAAA,GAAA,GAAA,WAAA;OAENK,YAQEL,MAAA,OAAA,GAAA;QAPC,OAAOA,MAAA,CAAA,CAAC,CAAA,sCAAA;QACT,MAAK;QACL,MAAK;QACL,OAAM;QACN,SAAQ;QACP,SAAS,UAAA,QAAS;QAClB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,aAAA,OAAc,MAAK;;OAE7BE,mBAAmH,SAAA;QAA5G,KAAI;QAAY,MAAK;QAAO,QAAO;QAAU,UAAA;QAAS,QAAA;QAAO,0BAAA;QAAwB,UAAQ;;;MAE7F,UAAA,SAATJ,UAAA,GAAAQ,mBAEI,KAFJ,aAEIF,gBADCJ,MAAA,CAAA,CAAC,CAAA,yCAAA,CAAA,GAAA,CAAA,KAAAG,mBAAA,QAAA,IAAA;MAEQ,cAAA,SAAdL,UAAA,GAAAC,YAAqFC,MAAA,MAAA,GAAA;;OAAxD,OAAM;OAAQ,SAAQ;OAAU,OAAO,cAAA;;MAC1D,MAAA,MAAM,WAAW,UAA3BF,UAAA,GAAAQ,mBAUK,MAVL,aAUK,EATHR,UAAA,IAAA,GAAAQ,mBAQEC,UAAA,MAAAC,WAPgB,MAAA,MAAM,aAAf,UAAK;OADd,OAAAV,UAAA,GAAAC,YAQEW,aAAA;QANC,KAAK,MAAM;QACJ;QACP,UAAU,MAAA,MAAM,aAAa,MAAM;QACnC,WAAM,WAAE,OAAO,MAAM,EAAE;QACvB,WAAM,WAAE,IAAI,MAAM,EAAE;QACpB,WAAM,WAAE,OAAO,MAAM,EAAE;;;;;;;;MAG5B,CAAA,GAAA,GAAA,EAAA,CAAA,MAAAZ,UAAA,GAAAQ,mBAEI,KAFJ,aAEIF,gBADCJ,MAAA,CAAA,CAAC,CAAA,oCAAA,CAAA,GAAA,CAAA;KAIR,GAAA,IAAA,UAAA,GAAAE,mBAkBU,WAAA;MAlBD,OAAM;MAA2B,mBAAe,GAAKF,MAAA,GAAA,EAAG;KAC/D,GAAA,CAAAE,mBAEK,MAAA;MAFA,IAAE,GAAKF,MAAA,GAAA,EAAG;MAAgB,OAAM;KAChC,GAAAI,gBAAAJ,MAAA,CAAA,CAAC,CAAA,wCAAA,CAAA,GAAA,GAAA,WAAA,GAEI,MAAA,MAAM,YAAY,UAA5BF,UAAA,GAAAQ,mBAUK,MAVL,aAUK,EATHR,UAAA,IAAA,GAAAQ,mBAQEC,UAAA,MAAAC,WAPgB,MAAA,MAAM,cAAf,UAAK;MADd,OAAAV,UAAA,GAAAC,YAQEW,aAAA;OANC,KAAK,MAAM;OACJ;OACP,UAAU,MAAA,MAAM,aAAa,MAAM;OACnC,WAAM,WAAE,OAAO,MAAM,EAAE;OACvB,WAAM,WAAE,IAAI,MAAM,EAAE;OACpB,WAAM,WAAE,OAAO,MAAM,EAAE;;;;;;;;KAG5B,CAAA,GAAA,GAAA,EAAA,CAAA,MAAAZ,UAAA,GAAAQ,mBAEI,KAFJ,aAEIF,gBADCJ,MAAA,CAAA,CAAC,CAAA,sCAAA,CAAA,GAAA,CAAA,EAAA,GAAA,GAAA,WAAA,CAAA,CAAA;KAKVG,mBAAA,0CAAA;KACAD,mBAyBM,OAzBN,aAyBM,CAxBJA,mBAgBU,WAAA;MAhBD,OAAM;MAAuB,mBAAe,GAAKF,MAAA,GAAA,EAAG;KAC3D,GAAA,CAAAE,mBAEK,MAAA;MAFA,IAAE,GAAKF,MAAA,GAAA,EAAG;MAAY,OAAM;KAC5B,GAAAI,gBAAAJ,MAAA,CAAA,CAAC,CAAA,oCAAA,CAAA,GAAA,GAAA,WAAA,GAENE,mBAWM,OAXN,aAWM,CATI,QAAA,SADRJ,UAAA,GAAAQ,mBAMC,OAAA;;MAJE,KAAK,QAAA,MAAQ;MACb,KAAK,QAAA,MAAQ,SAASN,MAAA,CAAA,CAAC,CAAA,kCAAA;MACxB,OAAM;MACN,6BAAA;KAEF,GAAA,MAAA,GAAA,WAAA,MAAAF,UAAA,GAAAQ,mBAEI,KAFJ,aAEIF,gBADCJ,MAAA,CAAA,CAAC,CAAA,kCAAA,CAAA,GAAA,CAAA,EAAA,CAAA,CAAA,GAAA,GAAA,WAAA,GAIVK,YAMEM,aAAA;MALC,OAAO,MAAA,MAAM;MACb,QAAQ,OAAA;MACR,SAAS,QAAA;MACT,iBAAe,MAAA,MAAM,KAAI,MAAA;MACzB,QAAM"}

package/dist/features/image-studio/components/ImageStudioDialog.vue.d.ts

@@ -0,0 +1,25 @@
+import { ImageStudioStore } from "../store.js";
+//#region src/features/image-studio/components/ImageStudioDialog.vue.d.ts
+/**
+ * The Bild-Studio: description and Prompt-Bausteine on the left, references and previous generations in the middle,
+ * the block's image and the chat on the right. The dialog applies the reducers of `../state` to `store.state` and
+ * hands every result to `store.update`; the store only generates, uploads and persists (see `ImageStudioStore`).
+ *
+ * The description is committed 500 ms after the last keystroke and at once on blur, on „Erzeugen“ and on close, so the
+ * host never builds a prompt from a stale text. Closing (or unmounting) aborts a running generation; an aborted
+ * generation adds no turn, a failed one adds a turn with the problem.
+ */
+type __VLS_Props = {
+  open: boolean;
+  store: ImageStudioStore;
+  title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+  "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=ImageStudioDialog.vue.d.ts.map

package/dist/features/image-studio/components/ImageStudioTile.js

@@ -0,0 +1,74 @@
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, unref } from "vue";
+//#region src/features/image-studio/components/ImageStudioTile.vue
+const _hoisted_1 = ["data-active", "data-selected"];
+const _hoisted_2 = ["aria-pressed", "aria-label"];
+const _hoisted_3 = ["src", "alt"];
+const _hoisted_4 = { class: "flex items-center justify-between gap-1" };
+/**
+* One reference or previous generation of the Bild-Studio. A click on the picture flips `active` (goes into the next
+* generation, ring via `data-active`), „Als Bild verwenden“ makes it the block's image, „Entfernen“ drops it from the block.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "ImageStudioTile",
+	props: {
+		image: {},
+		selected: { type: Boolean }
+	},
+	emits: [
+		"toggle",
+		"select",
+		"remove"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { Button: UButton } = useUiKit();
+		const { t } = useEditorI18n();
+		const title = computed(() => props.image.title || t("imageStudio.dialog.tile.untitled"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", {
+				class: "flex flex-col gap-1.5 rounded-md border border-[var(--sk-border)] p-1.5 data-[active=true]:border-[var(--sk-primary)] data-[active=true]:ring-2 data-[active=true]:ring-[var(--sk-primary)]",
+				"data-active": __props.image.active,
+				"data-selected": __props.selected,
+				"data-image-studio-tile": ""
+			}, [createElementVNode("button", {
+				type: "button",
+				class: "block overflow-hidden rounded bg-[var(--sk-bg-elevated)] focus-visible:outline-2 focus-visible:outline-[var(--sk-primary)]",
+				"aria-pressed": __props.image.active,
+				"aria-label": unref(t)("imageStudio.dialog.tile.toggle", { title: title.value }),
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("toggle"))
+			}, [createElementVNode("img", {
+				src: __props.image.url,
+				alt: title.value,
+				class: "aspect-square w-full object-cover",
+				draggable: "false"
+			}, null, 8, _hoisted_3)], 8, _hoisted_2), createElementVNode("div", _hoisted_4, [createVNode(unref(UButton), {
+				label: unref(t)("imageStudio.dialog.tile.use"),
+				icon: __props.selected ? "i-lucide-check" : void 0,
+				size: "xs",
+				color: "primary",
+				variant: __props.selected ? "solid" : "outline",
+				"aria-pressed": __props.selected,
+				onClick: _cache[1] || (_cache[1] = ($event) => emit("select"))
+			}, null, 8, [
+				"label",
+				"icon",
+				"variant",
+				"aria-pressed"
+			]), createVNode(unref(UButton), {
+				icon: "i-lucide-trash-2",
+				size: "xs",
+				color: "neutral",
+				variant: "ghost",
+				"aria-label": unref(t)("imageStudio.dialog.tile.remove"),
+				onClick: _cache[2] || (_cache[2] = ($event) => emit("remove"))
+			}, null, 8, ["aria-label"])])], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=ImageStudioTile.js.map

package/dist/features/image-studio/components/ImageStudioTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageStudioTile.js","names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_createVNode"],"sources":["../../../../src/features/image-studio/components/ImageStudioTile.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport type { ImageStudioImage } from '../state'\n\n/**\n * One reference or previous generation of the Bild-Studio. A click on the picture flips `active` (goes into the next\n * generation, ring via `data-active`), „Als Bild verwenden“ makes it the block's image, „Entfernen“ drops it from the block.\n */\nconst props = defineProps<{ image: ImageStudioImage, selected: boolean }>()\nconst emit = defineEmits<{ toggle: [], select: [], remove: [] }>()\n\nconst { Button: UButton } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst title = computed(() => props.image.title || t('imageStudio.dialog.tile.untitled'))\n</script>\n\n<template>\n  <li\n    class=\"flex flex-col gap-1.5 rounded-md border border-[var(--sk-border)] p-1.5 data-[active=true]:border-[var(--sk-primary)] data-[active=true]:ring-2 data-[active=true]:ring-[var(--sk-primary)]\"\n    :data-active=\"image.active\"\n    :data-selected=\"selected\"\n    data-image-studio-tile\n  >\n    <button\n      type=\"button\"\n      class=\"block overflow-hidden rounded bg-[var(--sk-bg-elevated)] focus-visible:outline-2 focus-visible:outline-[var(--sk-primary)]\"\n      :aria-pressed=\"image.active\"\n      :aria-label=\"t('imageStudio.dialog.tile.toggle', { title })\"\n      @click=\"emit('toggle')\"\n    >\n      <img :src=\"image.url\" :alt=\"title\" class=\"aspect-square w-full object-cover\" draggable=\"false\">\n    </button>\n    <div class=\"flex items-center justify-between gap-1\">\n      <UButton\n        :label=\"t('imageStudio.dialog.tile.use')\"\n        :icon=\"selected ? 'i-lucide-check' : undefined\"\n        size=\"xs\"\n        color=\"primary\"\n        :variant=\"selected ? 'solid' : 'outline'\"\n        :aria-pressed=\"selected\"\n        @click=\"emit('select')\"\n      />\n      <UButton\n        icon=\"i-lucide-trash-2\"\n        size=\"xs\"\n        color=\"neutral\"\n        variant=\"ghost\"\n        :aria-label=\"t('imageStudio.dialog.tile.remove')\"\n        @click=\"emit('remove')\"\n      />\n    </div>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EACd,MAAM,OAAO;EAEb,MAAM,EAAE,QAAQ,YAAY,SAAS;EACrC,MAAM,EAAE,MAAM,cAAc;EAE5B,MAAM,QAAQ,eAAe,MAAM,MAAM,SAAS,EAAE,kCAAkC,CAAC;;GAIrF,OAAAA,UAAA,GAAAC,mBAkCK,MAAA;IAjCH,OAAM;IACL,eAAa,QAAA,MAAM;IACnB,iBAAe,QAAA;IAChB,0BAAA;GAEA,GAAA,CAAAC,mBAQS,UAAA;IAPP,MAAK;IACL,OAAM;IACL,gBAAc,QAAA,MAAM;IACpB,cAAYC,MAAA,CAAA,CAAC,CAAA,kCAAA,EAAA,OAAqC,MAAA,MAAK,CAAA;IACvD,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;GAEZ,GAAA,CAAAD,mBAA+F,OAAA;IAAzF,KAAK,QAAA,MAAM;IAAM,KAAK,MAAA;IAAO,OAAM;IAAoC,WAAU;GAEzF,GAAA,MAAA,GAAA,UAAA,CAAA,GAAA,GAAA,UAAA,GAAAA,mBAkBM,OAlBN,YAkBM,CAjBJE,YAQED,MAAA,OAAA,GAAA;IAPC,OAAOA,MAAA,CAAA,CAAC,CAAA,6BAAA;IACR,MAAM,QAAA,WAAQ,mBAAsB,KAAA;IACrC,MAAK;IACL,OAAM;IACL,SAAS,QAAA,WAAQ,UAAA;IACjB,gBAAc,QAAA;IACd,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;;;;;GAEd,CAAA,GAAAC,YAOED,MAAA,OAAA,GAAA;IANA,MAAK;IACL,MAAK;IACL,OAAM;IACN,SAAQ;IACP,cAAYA,MAAA,CAAA,CAAC,CAAA,gCAAA;IACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA"}

package/dist/features/image-studio/components/ImageStudioView.js

@@ -0,0 +1,117 @@
+import { editorEntryOf } from "../../../core/editor-ui.js";
+import "../../media/assets.js";
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { useNotifier } from "../../../vue/use-notifier.js";
+import { normalizeImageStudioState } from "../state.js";
+import { createImageStudioNodeStore } from "../node-store.js";
+import _sfc_main$1 from "./ImageStudioDialog.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, ref, shallowRef, toDisplayString, toRaw, unref, withCtx } from "vue";
+import { NodeViewWrapper, nodeViewProps } from "@tiptap/vue-3";
+//#region src/features/image-studio/components/ImageStudioView.vue
+const _hoisted_1 = {
+	class: "flex flex-col gap-2",
+	contenteditable: "false"
+};
+const _hoisted_2 = ["src", "alt"];
+const _hoisted_3 = {
+	key: 1,
+	class: "flex min-h-32 flex-col items-center justify-center gap-2 rounded-md border border-dashed border-[var(--sk-border)] p-4 text-center text-sm"
+};
+const _hoisted_4 = {
+	key: 0,
+	class: "whitespace-pre-wrap text-[var(--sk-muted)]"
+};
+const _hoisted_5 = {
+	key: 1,
+	class: "text-[var(--sk-fg-dimmed)]"
+};
+const _hoisted_6 = {
+	key: 2,
+	class: "whitespace-pre-wrap px-1 text-sm text-[var(--sk-muted)]"
+};
+const _hoisted_7 = {
+	key: 3,
+	class: "flex"
+};
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "ImageStudioView",
+	props: nodeViewProps,
+	setup(__props) {
+		const props = __props;
+		const { Button: UButton, Icon: UIcon } = useUiKit();
+		const { t } = useEditorI18n();
+		const notify = useNotifier(() => props.editor);
+		const studio = computed(() => normalizeImageStudioState(props.node.attrs.studio));
+		const description = computed(() => studio.value.description.trim());
+		const open = ref(false);
+		const store = shallowRef();
+		/** Opens the studio dialog; a read-only editor opens none, a backend without image generation explains itself. */
+		function openStudio() {
+			if (!props.editor.isEditable) return;
+			const ctx = editorEntryOf(toRaw(props.editor))?.ctx;
+			const backend = ctx?.backend.images;
+			if (!ctx || !backend) {
+				notify({
+					id: "image-studio.unavailable",
+					title: t("imageStudio.action.notConfigured"),
+					kind: "warning"
+				});
+				return;
+			}
+			store.value ??= createImageStudioNodeStore({
+				editor: toRaw(props.editor),
+				getPos: props.getPos,
+				backend,
+				documentId: ctx.documentId ?? "scratch"
+			});
+			open.value = true;
+		}
+		onBeforeUnmount(() => store.value?.dispose());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(NodeViewWrapper), {
+				as: "figure",
+				"data-image-studio-block": "",
+				class: normalizeClass(["my-3 flex flex-col gap-2 rounded-md", { "outline-2 outline-offset-2 outline-[var(--sk-primary)]": _ctx.selected }]),
+				onDblclick: openStudio,
+				onSkImageStudioOpen: openStudio
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
+					_ctx.node.attrs.src ? (openBlock(), createElementBlock("img", {
+						key: 0,
+						src: _ctx.node.attrs.src,
+						alt: _ctx.node.attrs.alt || description.value,
+						class: "m-0 max-w-full rounded-md"
+					}, null, 8, _hoisted_2)) : (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(UIcon), {
+						name: "i-lucide-image-plus",
+						class: "size-6 shrink-0 text-[var(--sk-fg-dimmed)]"
+					}), description.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(description.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(t)("imageStudio.node.noDescription")), 1))])),
+					_ctx.node.attrs.src && description.value ? (openBlock(), createElementBlock("figcaption", _hoisted_6, toDisplayString(description.value), 1)) : createCommentVNode("v-if", true),
+					_ctx.editor.isEditable ? (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(unref(UButton), {
+						label: unref(t)("imageStudio.node.open"),
+						icon: "i-lucide-wand-sparkles",
+						size: "xs",
+						color: "neutral",
+						variant: "soft",
+						onClick: openStudio
+					}, null, 8, ["label"])])) : createCommentVNode("v-if", true)
+				]), store.value ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 0,
+					open: open.value,
+					"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+					store: store.value,
+					title: unref(t)("imageStudio.node.dialogTitle")
+				}, null, 8, [
+					"open",
+					"store",
+					"title"
+				])) : createCommentVNode("v-if", true)]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=ImageStudioView.js.map