@ecsplico/editor 3.6.0 → 4.1.0

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

@@ -1,10 +1,11 @@
 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 { addGeneration, addReference, adoptImage, 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";
+import _sfc_main$2 from "./ImageStudioLibraryPanel.js";
+import _sfc_main$3 from "./ImageStudioTile.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, onBeforeUnmount, openBlock, ref, renderList, toDisplayString, unref, useId, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 //#region src/features/image-studio/components/ImageStudioDialog.vue
 const _hoisted_1 = {
 	class: "flex flex-col gap-3",
@@ -20,46 +21,57 @@ const _hoisted_7 = {
 	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 = {
+const _hoisted_9 = {
+	key: 0,
+	class: "flex gap-2",
+	role: "tablist",
+	"data-image-studio-tabs": ""
+};
+const _hoisted_10 = ["data-dragging", "aria-labelledby"];
+const _hoisted_11 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_12 = ["id"];
+const _hoisted_13 = {
 	key: 0,
 	class: "text-xs text-[var(--sk-muted)]",
 	role: "status"
 };
-const _hoisted_13 = {
+const _hoisted_14 = {
 	key: 2,
 	class: "grid grid-cols-2 gap-2 sm:grid-cols-3"
 };
-const _hoisted_14 = {
+const _hoisted_15 = {
 	key: 3,
 	class: "text-sm text-[var(--sk-muted)]"
 };
-const _hoisted_15 = ["aria-labelledby"];
-const _hoisted_16 = ["id"];
-const _hoisted_17 = {
+const _hoisted_16 = ["aria-labelledby"];
+const _hoisted_17 = ["id"];
+const _hoisted_18 = {
 	key: 0,
 	class: "grid grid-cols-2 gap-2 sm:grid-cols-3"
 };
-const _hoisted_18 = {
+const _hoisted_19 = {
 	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,
+const _hoisted_20 = { class: "flex min-h-0 flex-col gap-3" };
+const _hoisted_21 = ["aria-labelledby"];
+const _hoisted_22 = ["id"];
+const _hoisted_23 = { class: "flex aspect-square items-center justify-center overflow-hidden rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg-elevated)]" };
+const _hoisted_24 = ["src", "alt"];
+const _hoisted_25 = ["src"];
+const _hoisted_26 = {
+	key: 2,
 	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 Bild-Studio: description and prompt blocks 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`).
 *
+* With `store.library` the middle column has two tabs: „Dieser Block“ (the above) and „Galerie“ (the host's images to
+* use as the block's image, add as references, rename or delete). `store.placeholderUrl` is shown in the preview while
+* no image is selected.
+*
 * 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.
@@ -110,6 +122,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		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 tab = ref("block");
+		const library = computed(() => props.store.library);
+		const plain = ({ id, url, title }) => ({
+			id,
+			url,
+			title,
+			active: false
+		});
+		const useFromLibrary = (item) => update(adoptImage(props.store.state.value, plain(item)));
+		const referenceFromLibrary = (item) => update(addReference(props.store.state.value, plain(item)));
+		function removedFromLibrary(id) {
+			const current = props.store.state.value;
+			if (current.references.some((image) => image.id === id) || current.generations.some((image) => image.id === id)) update(removeImage(current, id));
+		}
 		const fileInputRef = useTemplateRef("fileInput");
 		const uploading = ref(0);
 		const uploadProblem = ref();
@@ -187,6 +213,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		watch(() => props.open, (open) => {
 			if (open) return;
+			tab.value = "block";
 			commitDescription();
 			abortGeneration();
 		});
@@ -255,49 +282,100 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						}), 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",
+					createElementVNode("div", _hoisted_8, [
+						library.value ? (openBlock(), createElementBlock("div", _hoisted_9, [(openBlock(), createElementBlock(Fragment, null, renderList(["block", "library"], (entry) => {
+							return createVNode(unref(UButton), {
+								key: entry,
+								label: unref(t)(`imageStudio.dialog.tabs.${entry}`),
 								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), {
+								variant: tab.value === entry ? "solid" : "ghost",
+								role: "tab",
+								"aria-selected": tab.value === entry,
+								"data-image-studio-tab": entry,
+								onClick: ($event) => tab.value = entry
+							}, null, 8, [
+								"label",
+								"variant",
+								"aria-selected",
+								"data-image-studio-tab",
+								"onClick"
+							]);
+						}), 64))])) : createCommentVNode("v-if", true),
+						library.value && tab.value === "library" ? (openBlock(), createBlock(_sfc_main$2, {
 							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, {
+							library: library.value,
+							state: state.value,
+							onUse: useFromLibrary,
+							onReference: referenceFromLibrary,
+							onRemoved: removedFromLibrary
+						}, null, 8, ["library", "state"])) : createCommentVNode("v-if", true),
+						withDirectives(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_11, [
+								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_12),
+								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_13, 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_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(state.value.references, (image) => {
+								return openBlock(), createBlock(_sfc_main$3, {
+									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_15, toDisplayString(unref(t)("imageStudio.dialog.references.drop")), 1))
+						], 40, _hoisted_10), [[vShow, tab.value === "block" || !library.value]]),
+						withDirectives(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_17), state.value.generations.length ? (openBlock(), createElementBlock("ul", _hoisted_18, [(openBlock(true), createElementBlock(Fragment, null, renderList(state.value.generations, (image) => {
+							return openBlock(), createBlock(_sfc_main$3, {
 								key: image.id,
 								image,
 								selected: state.value.selected === image.id,
@@ -311,43 +389,28 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								"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)]),
+						}), 128))])) : (openBlock(), createElementBlock("p", _hoisted_19, toDisplayString(unref(t)("imageStudio.dialog.generations.empty")), 1))], 8, _hoisted_16), [[vShow, tab.value === "block" || !library.value]])
+					]),
 					createCommentVNode(" Right: the block's image and the chat. "),
-					createElementVNode("div", _hoisted_19, [createElementVNode("section", {
+					createElementVNode("div", _hoisted_20, [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", {
+					}, toDisplayString(unref(t)("imageStudio.dialog.preview.heading")), 9, _hoisted_22), createElementVNode("div", _hoisted_23, [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, {
+					}, null, 8, _hoisted_24)) : __props.store.placeholderUrl ? (openBlock(), createElementBlock("img", {
+						key: 1,
+						src: __props.store.placeholderUrl,
+						alt: "",
+						class: "size-full object-contain opacity-60",
+						"data-image-studio-placeholder": ""
+					}, null, 8, _hoisted_25)) : (openBlock(), createElementBlock("p", _hoisted_26, toDisplayString(unref(t)("imageStudio.dialog.preview.empty")), 1))])], 8, _hoisted_21), createVNode(_sfc_main$1, {
 						turns: state.value.turns,
 						images: images.value,
 						running: running.value,

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

@@ -1 +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":"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"}
+{"version":3,"file":"ImageStudioDialog.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createElementVNode","_createCommentVNode","_toDisplayString","_createVNode","_createElementBlock","_Fragment","_renderList","ImageStudioLibraryPanel","_withDirectives","_withModifiers","ImageStudioTile","_vShow","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  adoptImage,\n  type ImageStudioState,\n  type ImageStudioTurn,\n  removeImage,\n  select,\n  selectedImage,\n  setDescription,\n  toggleImage,\n  togglePromptBlock,\n} from '../state'\nimport type { ImageStudioLibraryItem } from '../library'\nimport type { ImageStudioStore } from '../store'\nimport ImageStudioChat from './ImageStudioChat.vue'\nimport ImageStudioLibraryPanel from './ImageStudioLibraryPanel.vue'\nimport ImageStudioTile from './ImageStudioTile.vue'\n\n/**\n * The Bild-Studio: description and prompt blocks 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 * With `store.library` the middle column has two tabs: „Dieser Block“ (the above) and „Galerie“ (the host's images to\n * use as the block's image, add as references, rename or delete). `store.placeholderUrl` is shown in the preview while\n * no image is selected.\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// --- Gallery --------------------------------------------------------------------------------------------------------\n\nconst tab = ref<'block' | 'library'>('block')\nconst library = computed(() => props.store.library)\nconst plain = ({ id, url, title }: ImageStudioLibraryItem) => ({ id, url, title, active: false })\nconst useFromLibrary = (item: ImageStudioLibraryItem) => update(adoptImage(props.store.state.value, plain(item)))\nconst referenceFromLibrary = (item: ImageStudioLibraryItem) => update(addReference(props.store.state.value, plain(item)))\nfunction removedFromLibrary(id: string) {\n  const current = props.store.state.value\n  if (current.references.some(image => image.id === id) || current.generations.some(image => image.id === id)) update(removeImage(current, id))\n}\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  tab.value = 'block'\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            <div v-if=\"library\" class=\"flex gap-2\" role=\"tablist\" data-image-studio-tabs>\n              <UButton\n                v-for=\"entry in (['block', 'library'] as const)\"\n                :key=\"entry\"\n                :label=\"t(`imageStudio.dialog.tabs.${entry}`)\"\n                size=\"xs\"\n                color=\"neutral\"\n                :variant=\"tab === entry ? 'solid' : 'ghost'\"\n                role=\"tab\"\n                :aria-selected=\"tab === entry\"\n                :data-image-studio-tab=\"entry\"\n                @click=\"tab = entry\"\n              />\n            </div>\n            <ImageStudioLibraryPanel\n              v-if=\"library && tab === 'library'\"\n              :library=\"library\"\n              :state=\"state\"\n              @use=\"useFromLibrary\"\n              @reference=\"referenceFromLibrary\"\n              @removed=\"removedFromLibrary\"\n            />\n            <section\n              v-show=\"tab === 'block' || !library\"\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 v-show=\"tab === 'block' || !library\" 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                <img\n                  v-else-if=\"store.placeholderUrl\"\n                  :src=\"store.placeholderUrl\"\n                  alt=\"\"\n                  class=\"size-full object-contain opacity-60\"\n                  data-image-studio-placeholder\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":"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"}

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

@@ -1,10 +1,14 @@
 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 Bild-Studio: description and prompt blocks 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`).
  *
+ * With `store.library` the middle column has two tabs: „Dieser Block“ (the above) and „Galerie“ (the host's images to
+ * use as the block's image, add as references, rename or delete). `store.placeholderUrl` is shown in the preview while
+ * no image is selected.
+ *
  * 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.

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

@@ -0,0 +1,186 @@
+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 _sfc_main$1 from "./ImageStudioLibraryTile.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderList, toDisplayString, unref, watch } from "vue";
+//#region src/features/image-studio/components/ImageStudioLibraryPanel.vue
+const _hoisted_1 = {
+	class: "flex flex-col gap-3 p-1",
+	"data-image-studio-library": ""
+};
+const _hoisted_2 = { class: "flex flex-wrap items-center gap-2" };
+const _hoisted_3 = {
+	key: 1,
+	class: "text-sm text-[var(--sk-muted)]",
+	role: "status"
+};
+const _hoisted_4 = {
+	key: 2,
+	class: "text-sm text-[var(--sk-muted)]"
+};
+const _hoisted_5 = {
+	key: 3,
+	class: "grid grid-cols-2 gap-2 sm:grid-cols-3"
+};
+/**
+* The gallery tab of the Bild-Studio: search, one select per facet of the host and the host's images as tiles. The
+* list is read on mount (the facets with their first option chosen), after a facet change and 300 ms after the last
+* keystroke of the search; a newer read aborts the running one. Picking, referencing, renaming and deleting go to the
+* host (`library`) or up to the dialog (`use`, `reference`, `removed`), which applies the reducers.
+*/
+const SEARCH_DELAY_MS = 300;
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "ImageStudioLibraryPanel",
+	props: {
+		library: {},
+		state: {}
+	},
+	emits: [
+		"use",
+		"reference",
+		"removed"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { Alert: UAlert, Input: UInput, Select: USelect } = useUiKit();
+		const { t } = useEditorI18n();
+		const facets = props.library.facets();
+		const values = reactive(Object.fromEntries(facets.map((facet) => [facet.id, facet.options[0]?.value ?? ""])));
+		const search = ref("");
+		const items = ref([]);
+		const busy = ref(false);
+		const problem = ref();
+		let controller;
+		let searchTimer;
+		async function load() {
+			clearTimeout(searchTimer);
+			searchTimer = void 0;
+			controller?.abort();
+			const own = new AbortController();
+			controller = own;
+			busy.value = true;
+			problem.value = void 0;
+			try {
+				const found = await props.library.list({
+					search: search.value,
+					facets: { ...values }
+				}, own.signal);
+				if (own.signal.aborted) return;
+				items.value = found;
+			} catch (error) {
+				if (own.signal.aborted) return;
+				problem.value = t("imageStudio.dialog.library.failed", { message: fetchErrorMessage(error) });
+			} finally {
+				if (controller === own) {
+					controller = void 0;
+					busy.value = false;
+				}
+			}
+		}
+		onMounted(() => void load());
+		watch(values, () => void load());
+		watch(search, () => {
+			clearTimeout(searchTimer);
+			searchTimer = setTimeout(() => void load(), SEARCH_DELAY_MS);
+		});
+		onBeforeUnmount(() => {
+			clearTimeout(searchTimer);
+			controller?.abort();
+		});
+		const held = (id) => props.state.references.some((image) => image.id === id) || props.state.generations.some((image) => image.id === id);
+		async function rename(item, title) {
+			if (!props.library.rename) return;
+			problem.value = void 0;
+			try {
+				const renamed = await props.library.rename(item.id, title);
+				items.value = items.value.map((other) => other.id === item.id ? renamed : other);
+			} catch (error) {
+				problem.value = fetchErrorMessage(error);
+			}
+		}
+		async function remove(item) {
+			if (!props.library.remove) return;
+			problem.value = void 0;
+			try {
+				await props.library.remove(item.id);
+				items.value = items.value.filter((other) => other.id !== item.id);
+				emit("removed", item.id);
+			} catch (error) {
+				problem.value = fetchErrorMessage(error);
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("section", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [createVNode(unref(UInput), {
+					modelValue: search.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
+					class: "min-w-40 flex-1",
+					icon: "i-lucide-search",
+					size: "xs",
+					placeholder: unref(t)("imageStudio.dialog.library.search"),
+					"aria-label": unref(t)("imageStudio.dialog.library.search"),
+					"data-image-studio-library-search": ""
+				}, null, 8, [
+					"modelValue",
+					"placeholder",
+					"aria-label"
+				]), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(facets), (facet) => {
+					return openBlock(), createBlock(unref(USelect), {
+						key: facet.id,
+						modelValue: values[facet.id],
+						"onUpdate:modelValue": ($event) => values[facet.id] = $event,
+						items: facet.options.map((option) => ({
+							label: option.label,
+							value: option.value
+						})),
+						size: "xs",
+						"aria-label": facet.label,
+						"data-image-studio-facet": facet.id
+					}, null, 8, [
+						"modelValue",
+						"onUpdate:modelValue",
+						"items",
+						"aria-label",
+						"data-image-studio-facet"
+					]);
+				}), 128))]),
+				problem.value ? (openBlock(), createBlock(unref(UAlert), {
+					key: 0,
+					color: "error",
+					variant: "subtle",
+					title: problem.value
+				}, null, 8, ["title"])) : createCommentVNode("v-if", true),
+				busy.value ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(unref(t)("imageStudio.dialog.library.loading")), 1)) : !items.value.length && !problem.value ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(unref(t)("imageStudio.dialog.library.empty")), 1)) : createCommentVNode("v-if", true),
+				items.value.length ? (openBlock(), createElementBlock("ul", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item) => {
+					return openBlock(), createBlock(_sfc_main$1, {
+						key: item.id,
+						item,
+						selected: __props.state.selected === item.id,
+						held: held(item.id),
+						renamable: Boolean(__props.library.rename),
+						removable: Boolean(__props.library.remove),
+						onUse: ($event) => emit("use", item),
+						onReference: ($event) => emit("reference", item),
+						onRename: (title) => rename(item, title),
+						onRemove: ($event) => remove(item)
+					}, null, 8, [
+						"item",
+						"selected",
+						"held",
+						"renamable",
+						"removable",
+						"onUse",
+						"onReference",
+						"onRename",
+						"onRemove"
+					]);
+				}), 128))])) : createCommentVNode("v-if", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=ImageStudioLibraryPanel.js.map