@ecsplico/editor 4.0.0 → 4.1.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageStudioLibraryPanel.js","names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","_unref","_Fragment","_renderList","_createBlock","_createCommentVNode","_toDisplayString","ImageStudioLibraryTile"],"sources":["../../../../src/features/image-studio/components/ImageStudioLibraryPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport { fetchErrorMessage } from '../../../core'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport type { ImageStudioLibrary, ImageStudioLibraryItem } from '../library'\nimport type { ImageStudioState } from '../state'\nimport ImageStudioLibraryTile from './ImageStudioLibraryTile.vue'\n\n/**\n * The gallery tab of the Bild-Studio: search, one select per facet of the host and the host's images as tiles. The\n * list is read on mount (the facets with their first option chosen), after a facet change and 300 ms after the last\n * keystroke of the search; a newer read aborts the running one. Picking, referencing, renaming and deleting go to the\n * host (`library`) or up to the dialog (`use`, `reference`, `removed`), which applies the reducers.\n */\nconst props = defineProps<{ library: ImageStudioLibrary, state: ImageStudioState }>()\nconst emit = defineEmits<{ use: [item: ImageStudioLibraryItem], reference: [item: ImageStudioLibraryItem], removed: [id: string] }>()\n\nconst { Alert: UAlert, Input: UInput, Select: USelect } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst SEARCH_DELAY_MS = 300\n\nconst facets = props.library.facets()\nconst values = reactive<Record<string, string>>(Object.fromEntries(facets.map(facet => [facet.id, facet.options[0]?.value ?? ''])))\nconst search = ref('')\nconst items = ref<readonly ImageStudioLibraryItem[]>([])\nconst busy = ref(false)\nconst problem = ref<string>()\n\nlet controller: AbortController | undefined\nlet searchTimer: ReturnType<typeof setTimeout> | undefined\n\nasync function load() {\n  clearTimeout(searchTimer)\n  searchTimer = undefined\n  controller?.abort()\n  const own = new AbortController()\n  controller = own\n  busy.value = true\n  problem.value = undefined\n  try {\n    const found = await props.library.list({ search: search.value, facets: { ...values } }, own.signal)\n    if (own.signal.aborted) return\n    items.value = found\n  } catch (error) {\n    if (own.signal.aborted) return\n    problem.value = t('imageStudio.dialog.library.failed', { message: fetchErrorMessage(error) })\n  } finally {\n    if (controller === own) {\n      controller = undefined\n      busy.value = false\n    }\n  }\n}\n\nonMounted(() => void load())\nwatch(values, () => void load())\nwatch(search, () => {\n  clearTimeout(searchTimer)\n  searchTimer = setTimeout(() => void load(), SEARCH_DELAY_MS)\n})\nonBeforeUnmount(() => {\n  clearTimeout(searchTimer)\n  controller?.abort()\n})\n\nconst held = (id: string) => props.state.references.some(image => image.id === id) || props.state.generations.some(image => image.id === id)\n\nasync function rename(item: ImageStudioLibraryItem, title: string) {\n  if (!props.library.rename) return\n  problem.value = undefined\n  try {\n    const renamed = await props.library.rename(item.id, title)\n    items.value = items.value.map(other => other.id === item.id ? renamed : other)\n  } catch (error) {\n    problem.value = fetchErrorMessage(error)\n  }\n}\n\nasync function remove(item: ImageStudioLibraryItem) {\n  if (!props.library.remove) return\n  problem.value = undefined\n  try {\n    await props.library.remove(item.id)\n    items.value = items.value.filter(other => other.id !== item.id)\n    emit('removed', item.id)\n  } catch (error) {\n    problem.value = fetchErrorMessage(error)\n  }\n}\n</script>\n\n<template>\n  <section class=\"flex flex-col gap-3 p-1\" data-image-studio-library>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <UInput\n        v-model=\"search\"\n        class=\"min-w-40 flex-1\"\n        icon=\"i-lucide-search\"\n        size=\"xs\"\n        :placeholder=\"t('imageStudio.dialog.library.search')\"\n        :aria-label=\"t('imageStudio.dialog.library.search')\"\n        data-image-studio-library-search\n      />\n      <USelect\n        v-for=\"facet in facets\"\n        :key=\"facet.id\"\n        v-model=\"values[facet.id]\"\n        :items=\"facet.options.map(option => ({ label: option.label, value: option.value }))\"\n        size=\"xs\"\n        :aria-label=\"facet.label\"\n        :data-image-studio-facet=\"facet.id\"\n      />\n    </div>\n    <UAlert v-if=\"problem\" color=\"error\" variant=\"subtle\" :title=\"problem\" />\n    <p v-if=\"busy\" class=\"text-sm text-[var(--sk-muted)]\" role=\"status\">\n      {{ t('imageStudio.dialog.library.loading') }}\n    </p>\n    <p v-else-if=\"!items.length && !problem\" class=\"text-sm text-[var(--sk-muted)]\">\n      {{ t('imageStudio.dialog.library.empty') }}\n    </p>\n    <ul v-if=\"items.length\" class=\"grid grid-cols-2 gap-2 sm:grid-cols-3\">\n      <ImageStudioLibraryTile\n        v-for=\"item in items\"\n        :key=\"item.id\"\n        :item=\"item\"\n        :selected=\"state.selected === item.id\"\n        :held=\"held(item.id)\"\n        :renamable=\"Boolean(library.rename)\"\n        :removable=\"Boolean(library.remove)\"\n        @use=\"emit('use', item)\"\n        @reference=\"emit('reference', item)\"\n        @rename=\"title => rename(item, title)\"\n        @remove=\"remove(item)\"\n      />\n    </ul>\n  </section>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,134 @@
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, toDisplayString, unref, withKeys, withModifiers } from "vue";
+//#region src/features/image-studio/components/ImageStudioLibraryTile.vue
+const _hoisted_1 = ["data-selected"];
+const _hoisted_2 = { class: "block overflow-hidden rounded bg-[var(--sk-bg-elevated)]" };
+const _hoisted_3 = ["src", "alt"];
+const _hoisted_4 = { class: "flex min-w-0 flex-col" };
+const _hoisted_5 = ["title"];
+const _hoisted_6 = ["title"];
+const _hoisted_7 = { class: "flex flex-wrap items-center justify-between gap-1" };
+const _hoisted_8 = { class: "flex items-center" };
+/**
+* One image of the host's gallery. „Als Bild verwenden“ makes it the block's image, „Als Referenz“ adds it to the
+* references (disabled once the block holds it), the pencil renames it in place (Enter commits, Escape or blur cancels)
+* and the trash asks the host to delete it. The host's `subtitle` shows under the title.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "ImageStudioLibraryTile",
+	props: {
+		item: {},
+		selected: { type: Boolean },
+		held: { type: Boolean },
+		renamable: { type: Boolean },
+		removable: { type: Boolean }
+	},
+	emits: [
+		"use",
+		"reference",
+		"rename",
+		"remove"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { Button: UButton, Input: UInput } = useUiKit();
+		const { t } = useEditorI18n();
+		const title = computed(() => props.item.title || t("imageStudio.dialog.tile.untitled"));
+		const editing = ref(false);
+		const draft = ref("");
+		function startRename() {
+			draft.value = props.item.title;
+			editing.value = true;
+		}
+		function commitRename() {
+			if (!editing.value) return;
+			editing.value = false;
+			const next = draft.value.trim();
+			if (next !== "" && next !== props.item.title) emit("rename", next);
+		}
+		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-[selected=true]:border-[var(--sk-primary)]",
+				"data-selected": __props.selected,
+				"data-image-studio-library-tile": ""
+			}, [
+				createElementVNode("div", _hoisted_2, [createElementVNode("img", {
+					src: __props.item.url,
+					alt: title.value,
+					class: "aspect-square w-full object-cover",
+					draggable: "false"
+				}, null, 8, _hoisted_3)]),
+				createElementVNode("div", _hoisted_4, [editing.value ? (openBlock(), createBlock(unref(UInput), {
+					key: 0,
+					modelValue: draft.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => draft.value = $event),
+					size: "xs",
+					autofocus: "",
+					"aria-label": unref(t)("imageStudio.dialog.library.rename"),
+					"data-image-studio-library-rename": "",
+					onKeydown: [withKeys(withModifiers(commitRename, ["prevent"]), ["enter"]), _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => editing.value = false, ["prevent", "stop"]), ["esc"]))],
+					onBlur: _cache[2] || (_cache[2] = ($event) => editing.value = false)
+				}, null, 8, [
+					"modelValue",
+					"aria-label",
+					"onKeydown"
+				])) : (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: "truncate text-xs font-medium text-[var(--sk-fg-highlighted)]",
+					title: title.value
+				}, toDisplayString(title.value), 9, _hoisted_5)), __props.item.subtitle ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: "truncate text-xs text-[var(--sk-muted)]",
+					title: __props.item.subtitle
+				}, toDisplayString(__props.item.subtitle), 9, _hoisted_6)) : createCommentVNode("v-if", true)]),
+				createElementVNode("div", _hoisted_7, [
+					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[3] || (_cache[3] = ($event) => emit("use"))
+					}, null, 8, [
+						"label",
+						"icon",
+						"variant",
+						"aria-pressed"
+					]),
+					createVNode(unref(UButton), {
+						label: unref(t)("imageStudio.dialog.library.reference"),
+						size: "xs",
+						color: "neutral",
+						variant: "outline",
+						disabled: __props.held,
+						onClick: _cache[4] || (_cache[4] = ($event) => emit("reference"))
+					}, null, 8, ["label", "disabled"]),
+					createElementVNode("span", _hoisted_8, [__props.renamable ? (openBlock(), createBlock(unref(UButton), {
+						key: 0,
+						icon: "i-lucide-pencil",
+						size: "xs",
+						color: "neutral",
+						variant: "ghost",
+						"aria-label": unref(t)("imageStudio.dialog.library.rename"),
+						onClick: startRename
+					}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true), __props.removable ? (openBlock(), createBlock(unref(UButton), {
+						key: 1,
+						icon: "i-lucide-trash-2",
+						size: "xs",
+						color: "neutral",
+						variant: "ghost",
+						"aria-label": unref(t)("imageStudio.dialog.library.remove"),
+						onClick: _cache[5] || (_cache[5] = ($event) => emit("remove"))
+					}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true)])
+				])
+			], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=ImageStudioLibraryTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageStudioLibraryTile.js","names":["_openBlock","_createElementBlock","_createElementVNode","_createBlock","_unref","_withKeys","_withModifiers","_toDisplayString","_createCommentVNode","_createVNode"],"sources":["../../../../src/features/image-studio/components/ImageStudioLibraryTile.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport type { ImageStudioLibraryItem } from '../library'\n\n/**\n * One image of the host's gallery. „Als Bild verwenden“ makes it the block's image, „Als Referenz“ adds it to the\n * references (disabled once the block holds it), the pencil renames it in place (Enter commits, Escape or blur cancels)\n * and the trash asks the host to delete it. The host's `subtitle` shows under the title.\n */\nconst props = defineProps<{ item: ImageStudioLibraryItem, selected: boolean, held: boolean, renamable: boolean, removable: boolean }>()\nconst emit = defineEmits<{ use: [], reference: [], rename: [title: string], remove: [] }>()\n\nconst { Button: UButton, Input: UInput } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst title = computed(() => props.item.title || t('imageStudio.dialog.tile.untitled'))\n\nconst editing = ref(false)\nconst draft = ref('')\n\nfunction startRename() {\n  draft.value = props.item.title\n  editing.value = true\n}\n\nfunction commitRename() {\n  if (!editing.value) return\n  editing.value = false\n  const next = draft.value.trim()\n  if (next !== '' && next !== props.item.title) emit('rename', next)\n}\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-[selected=true]:border-[var(--sk-primary)]\"\n    :data-selected=\"selected\"\n    data-image-studio-library-tile\n  >\n    <div class=\"block overflow-hidden rounded bg-[var(--sk-bg-elevated)]\">\n      <img :src=\"item.url\" :alt=\"title\" class=\"aspect-square w-full object-cover\" draggable=\"false\">\n    </div>\n    <div class=\"flex min-w-0 flex-col\">\n      <UInput\n        v-if=\"editing\"\n        v-model=\"draft\"\n        size=\"xs\"\n        autofocus\n        :aria-label=\"t('imageStudio.dialog.library.rename')\"\n        data-image-studio-library-rename\n        @keydown.enter.prevent=\"commitRename\"\n        @keydown.esc.prevent.stop=\"editing = false\"\n        @blur=\"editing = false\"\n      />\n      <span v-else class=\"truncate text-xs font-medium text-[var(--sk-fg-highlighted)]\" :title=\"title\">{{ title }}</span>\n      <span v-if=\"item.subtitle\" class=\"truncate text-xs text-[var(--sk-muted)]\" :title=\"item.subtitle\">{{ item.subtitle }}</span>\n    </div>\n    <div class=\"flex flex-wrap 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('use')\"\n      />\n      <UButton\n        :label=\"t('imageStudio.dialog.library.reference')\"\n        size=\"xs\"\n        color=\"neutral\"\n        variant=\"outline\"\n        :disabled=\"held\"\n        @click=\"emit('reference')\"\n      />\n      <span class=\"flex items-center\">\n        <UButton\n          v-if=\"renamable\"\n          icon=\"i-lucide-pencil\"\n          size=\"xs\"\n          color=\"neutral\"\n          variant=\"ghost\"\n          :aria-label=\"t('imageStudio.dialog.library.rename')\"\n          @click=\"startRename\"\n        />\n        <UButton\n          v-if=\"removable\"\n          icon=\"i-lucide-trash-2\"\n          size=\"xs\"\n          color=\"neutral\"\n          variant=\"ghost\"\n          :aria-label=\"t('imageStudio.dialog.library.remove')\"\n          @click=\"emit('remove')\"\n        />\n      </span>\n    </div>\n  </li>\n</template>\n"],"mappings":"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"}

package/dist/features/image-studio/index.d.ts

@@ -1,5 +1,6 @@
 import { ImageStudioImage, ImageStudioPromptBlock } from "../../core/backend-types.js";
 import { IMAGE_STUDIO_OPEN, ImageStudioUi, imageStudioFeatureCore } from "./feature.js";
-import { EMPTY_IMAGE_STUDIO_STATE, ImageStudioState, ImageStudioTurn, addGeneration, addReference, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock } from "./state.js";
+import { EMPTY_IMAGE_STUDIO_STATE, ImageStudioState, ImageStudioTurn, addGeneration, addReference, adoptImage, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock } from "./state.js";
 import { ImageStudioAttrs, ImageStudioNode, imageStudioSchemaExtensions } from "./schema.js";
-export { EMPTY_IMAGE_STUDIO_STATE, IMAGE_STUDIO_OPEN, type ImageStudioAttrs, type ImageStudioImage, ImageStudioNode, type ImageStudioPromptBlock, type ImageStudioState, type ImageStudioTurn, type ImageStudioUi, addGeneration, addReference, imageStudioFeatureCore, imageStudioSchemaExtensions, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock };
+import { ImageStudioLibrary, ImageStudioLibraryFacet, ImageStudioLibraryItem, ImageStudioLibraryQuery } from "./library.js";
+export { EMPTY_IMAGE_STUDIO_STATE, IMAGE_STUDIO_OPEN, type ImageStudioAttrs, type ImageStudioImage, type ImageStudioLibrary, type ImageStudioLibraryFacet, type ImageStudioLibraryItem, type ImageStudioLibraryQuery, ImageStudioNode, type ImageStudioPromptBlock, type ImageStudioState, type ImageStudioTurn, type ImageStudioUi, addGeneration, addReference, adoptImage, imageStudioFeatureCore, imageStudioSchemaExtensions, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock };

package/dist/features/image-studio/index.js

@@ -1,4 +1,4 @@
-import { EMPTY_IMAGE_STUDIO_STATE, addGeneration, addReference, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock } from "./state.js";
+import { EMPTY_IMAGE_STUDIO_STATE, addGeneration, addReference, adoptImage, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock } from "./state.js";
 import { ImageStudioNode, imageStudioSchemaExtensions } from "./schema.js";
 import { IMAGE_STUDIO_OPEN, imageStudioFeatureCore } from "./feature.js";
-export { EMPTY_IMAGE_STUDIO_STATE, IMAGE_STUDIO_OPEN, ImageStudioNode, addGeneration, addReference, imageStudioFeatureCore, imageStudioSchemaExtensions, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock };
+export { EMPTY_IMAGE_STUDIO_STATE, IMAGE_STUDIO_OPEN, ImageStudioNode, addGeneration, addReference, adoptImage, imageStudioFeatureCore, imageStudioSchemaExtensions, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock };

package/dist/features/image-studio/library.d.ts

@@ -0,0 +1,35 @@
+import { ImageStudioImage } from "../../core/backend-types.js";
+import "./state.js";
+//#region src/features/image-studio/library.d.ts
+/**
+ * One filter of the gallery (a Kapitel select, say); the dialog renders it as a select. Option values must be
+ * non-empty: select primitives reserve the empty string, so an «all» option needs a value of its own (`'alle'`).
+ */
+export interface ImageStudioLibraryFacet {
+  readonly id: string;
+  readonly label: string;
+  readonly options: readonly {
+    readonly value: string;
+    readonly label: string;
+  }[];
+}
+/** What the gallery shows: the search text and the chosen option (`value`) of each facet, by facet id. */
+export interface ImageStudioLibraryQuery {
+  readonly search: string;
+  readonly facets: Readonly<Record<string, string>>;
+}
+/** An image of the gallery; `subtitle` is a host line under the title (origin, usage, Kapitel). */
+export interface ImageStudioLibraryItem extends ImageStudioImage {
+  readonly subtitle?: string;
+}
+export interface ImageStudioLibrary {
+  /** The host's filter facets; the first option of each is the default. Read each time the gallery tab opens. */
+  facets: () => readonly ImageStudioLibraryFacet[];
+  list: (query: ImageStudioLibraryQuery, signal: AbortSignal) => Promise<readonly ImageStudioLibraryItem[]>;
+  /** Resolves with the renamed item; absent = no renaming. */
+  rename?: (id: string, title: string) => Promise<ImageStudioLibraryItem>;
+  /** Rejects with an Error whose message the dialog shows (asset in use, say); absent = no deleting. */
+  remove?: (id: string) => Promise<void>;
+}
+//#endregion
+//# sourceMappingURL=library.d.ts.map

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

@@ -7,11 +7,12 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../react
 import { Textarea } from "../../../react/ui/textarea.js";
 import { Alert, AlertTitle } from "../../../react/ui/alert.js";
 import { Switch } from "../../../react/ui/switch.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 { ImageStudioChat } from "./ImageStudioChat.js";
+import { ImageStudioLibraryPanel } from "./ImageStudioLibraryPanel.js";
 import { ImageStudioTile } from "./ImageStudioTile.js";
 import { useEffect, useId, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/image-studio/react/ImageStudioDialog.tsx
 const COMMIT_DELAY_MS = 500;
 /**
@@ -139,6 +140,8 @@ function ImageStudioDialog({ open, onOpenChange, store, title }) {
 			}
 		}
 	}
+	const { library } = store;
+	const [tab, setTab] = useState("block");
 	function close() {
 		commitDescription();
 		abortGeneration();
@@ -146,6 +149,7 @@ function ImageStudioDialog({ open, onOpenChange, store, title }) {
 	}
 	useEffect(() => {
 		if (open) return;
+		setTab("block");
 		commitDescription();
 		abortGeneration();
 	}, [open]);
@@ -154,6 +158,13 @@ function ImageStudioDialog({ open, onOpenChange, store, title }) {
 		abortGeneration();
 	}, []);
 	const heading = "text-sm font-medium text-foreground";
+	/** A gallery item as the state holds it: without the host's `subtitle`, not active. */
+	const pick = ({ id, url, title }) => ({
+		id,
+		url,
+		title,
+		active: false
+	});
 	return /* @__PURE__ */ jsx(Dialog, {
 		open,
 		onOpenChange: (value) => {
@@ -162,6 +173,9 @@ function ImageStudioDialog({ open, onOpenChange, store, title }) {
 		children: /* @__PURE__ */ jsxs(DialogContent, {
 			className: "max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-[min(72rem,calc(100vw-2rem))]",
 			"aria-describedby": void 0,
+			onEscapeKeyDown: (event) => {
+				if (event.target instanceof Element && event.target.closest("[data-image-studio-library-rename]")) event.preventDefault();
+			},
 			children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: title ?? t("imageStudio.dialog.title") }) }), /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-3",
 				"data-image-studio-dialog": true,
@@ -226,7 +240,29 @@ function ImageStudioDialog({ open, onOpenChange, store, title }) {
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex min-h-0 flex-col gap-4 lg:overflow-y-auto",
-							children: [/* @__PURE__ */ jsxs("section", {
+							children: [library && /* @__PURE__ */ jsx("div", {
+								className: "flex gap-1",
+								role: "tablist",
+								"data-image-studio-tabs": true,
+								children: ["block", "library"].map((name) => /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									variant: tab === name ? "default" : "ghost",
+									role: "tab",
+									"aria-selected": tab === name,
+									"data-image-studio-tab": name,
+									onClick: () => setTab(name),
+									children: t(name === "block" ? "imageStudio.dialog.tabs.block" : "imageStudio.dialog.tabs.library")
+								}, name))
+							}), library && tab === "library" ? /* @__PURE__ */ jsx(ImageStudioLibraryPanel, {
+								library,
+								state,
+								onUse: (item) => apply(adoptImage(latest.current, pick(item))),
+								onReference: (item) => apply(addReference(latest.current, pick(item))),
+								onRemoved: (id) => {
+									const current = latest.current;
+									if (current.references.some((image) => image.id === id) || current.generations.some((image) => image.id === id)) apply(removeImage(current, id));
+								}
+							}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("section", {
 								className: "flex flex-col gap-2 rounded-md border border-dashed border-transparent p-1 data-[dragging=true]:border-primary",
 								"data-dragging": dragging,
 								"aria-labelledby": `${uid}-references`,
@@ -314,7 +350,7 @@ function ImageStudioDialog({ open, onOpenChange, store, title }) {
 									className: "text-sm text-muted-foreground",
 									children: t("imageStudio.dialog.generations.empty")
 								})]
-							})]
+							})] })]
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex min-h-0 flex-col gap-3",
@@ -332,6 +368,11 @@ function ImageStudioDialog({ open, onOpenChange, store, title }) {
 										alt: picture.title || t("imageStudio.dialog.tile.untitled"),
 										className: "size-full object-contain",
 										"data-image-studio-preview": true
+									}) : store.placeholderUrl ? /* @__PURE__ */ jsx("img", {
+										src: store.placeholderUrl,
+										alt: "",
+										className: "size-full object-contain opacity-60",
+										"data-image-studio-placeholder": true
 									}) : /* @__PURE__ */ jsx("p", {
 										className: "text-sm text-muted-foreground",
 										children: t("imageStudio.dialog.preview.empty")