@ecsplico/editor 3.4.0 → 3.5.1

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

@@ -0,0 +1,357 @@
+import { fetchErrorMessage } from "../../../core/fetch-error.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../react/ui/dialog.js";
+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 { ImageStudioChat } from "./ImageStudioChat.js";
+import { ImageStudioTile } from "./ImageStudioTile.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/image-studio/react/ImageStudioDialog.tsx
+const COMMIT_DELAY_MS = 500;
+/**
+* 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 `ImageStudioReactStore`).
+*
+* 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.
+*/
+function ImageStudioDialog({ open, onOpenChange, store, title }) {
+	const { t } = useEditorI18n();
+	const uid = useId();
+	const { state, promptBlocks, problem } = store;
+	const images = [...state.generations, ...state.references];
+	const picture = selectedImage(state);
+	const storeRef = useRef(store);
+	storeRef.current = store;
+	const latest = useRef(state);
+	const seen = useRef(state);
+	if (seen.current !== state) {
+		seen.current = state;
+		latest.current = state;
+	}
+	const apply = (next) => {
+		latest.current = next;
+		storeRef.current.update(next);
+	};
+	const [draft, setDraft] = useState(state.description);
+	const draftRef = useRef(draft);
+	/** The description as last committed or received: the host's echo of our own commit must not overwrite a newer draft. */
+	const known = useRef(state.description);
+	const commitTimer = useRef(void 0);
+	function commitDescription() {
+		clearTimeout(commitTimer.current);
+		commitTimer.current = void 0;
+		if (draftRef.current === latest.current.description) return;
+		known.current = draftRef.current;
+		apply(setDescription(latest.current, draftRef.current));
+	}
+	function onDescriptionChange(event) {
+		const text = event.target.value;
+		draftRef.current = text;
+		setDraft(text);
+		if (text === latest.current.description) return;
+		clearTimeout(commitTimer.current);
+		commitTimer.current = setTimeout(commitDescription, COMMIT_DELAY_MS);
+	}
+	useEffect(() => {
+		if (state.description === known.current) return;
+		known.current = state.description;
+		if (commitTimer.current === void 0) {
+			draftRef.current = state.description;
+			setDraft(state.description);
+		}
+	}, [state.description]);
+	const fileInput = useRef(null);
+	const [uploading, setUploading] = useState(0);
+	const [uploadProblem, setUploadProblem] = useState();
+	const [dragging, setDragging] = useState(false);
+	async function upload(files) {
+		const pictures = files.filter((file) => file.type.startsWith("image/"));
+		if (!pictures.length) return;
+		setUploadProblem(void 0);
+		setUploading((count) => count + pictures.length);
+		await Promise.all(pictures.map(async (file) => {
+			try {
+				const image = await storeRef.current.upload(file);
+				apply(addReference(latest.current, image));
+			} catch (error) {
+				setUploadProblem(t("imageStudio.dialog.references.failed", { message: fetchErrorMessage(error) }));
+			} finally {
+				setUploading((count) => count - 1);
+			}
+		}));
+	}
+	function onFilesChosen(event) {
+		const input = event.target;
+		const files = [...input.files ?? []];
+		input.value = "";
+		upload(files);
+	}
+	function onDrop(event) {
+		event.preventDefault();
+		setDragging(false);
+		upload([...event.dataTransfer.files]);
+	}
+	const [running, setRunning] = useState(false);
+	const controller = useRef(void 0);
+	function abortGeneration() {
+		controller.current?.abort();
+		controller.current = void 0;
+		setRunning(false);
+	}
+	async function generate(instruction) {
+		if (controller.current) return;
+		commitDescription();
+		const own = new AbortController();
+		controller.current = own;
+		setRunning(true);
+		const turn = {
+			id: crypto.randomUUID(),
+			instruction,
+			imageId: null,
+			createdAt: (/* @__PURE__ */ new Date()).toISOString()
+		};
+		try {
+			const image = await storeRef.current.generate(instruction, own.signal);
+			if (own.signal.aborted) return;
+			apply(addGeneration(latest.current, image, turn));
+		} catch (error) {
+			if (own.signal.aborted) return;
+			apply({
+				...latest.current,
+				turns: [...latest.current.turns, {
+					...turn,
+					problem: fetchErrorMessage(error)
+				}]
+			});
+		} finally {
+			if (controller.current === own) {
+				controller.current = void 0;
+				setRunning(false);
+			}
+		}
+	}
+	function close() {
+		commitDescription();
+		abortGeneration();
+		onOpenChange(false);
+	}
+	useEffect(() => {
+		if (open) return;
+		commitDescription();
+		abortGeneration();
+	}, [open]);
+	useEffect(() => () => {
+		commitDescription();
+		abortGeneration();
+	}, []);
+	const heading = "text-sm font-medium text-foreground";
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (value) => {
+			if (!value) close();
+		},
+		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,
+			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,
+				children: [problem && /* @__PURE__ */ jsx(Alert, {
+					variant: "destructive",
+					children: /* @__PURE__ */ jsx(AlertTitle, { children: problem })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid gap-4 lg:h-[68vh] lg:grid-cols-[17rem_minmax(0,1fr)_minmax(0,22rem)]",
+					children: [
+						/* @__PURE__ */ jsxs("section", {
+							className: "flex min-h-0 flex-col gap-3 lg:overflow-y-auto",
+							"aria-labelledby": `${uid}-description`,
+							children: [
+								/* @__PURE__ */ jsx("h3", {
+									id: `${uid}-description`,
+									className: heading,
+									children: t("imageStudio.dialog.description.heading")
+								}),
+								/* @__PURE__ */ jsx(Textarea, {
+									value: draft,
+									rows: 6,
+									placeholder: t("imageStudio.dialog.description.placeholder"),
+									"aria-label": t("imageStudio.dialog.description.heading"),
+									onChange: onDescriptionChange,
+									onBlur: commitDescription
+								}),
+								/* @__PURE__ */ jsx("h3", {
+									id: `${uid}-blocks`,
+									className: cn(heading, "mt-2"),
+									children: t("imageStudio.dialog.blocks.heading")
+								}),
+								promptBlocks.length ? /* @__PURE__ */ jsx("ul", {
+									className: "flex flex-col gap-3",
+									"aria-labelledby": `${uid}-blocks`,
+									children: promptBlocks.map((block) => /* @__PURE__ */ jsxs("li", {
+										className: "flex items-start gap-2",
+										children: [/* @__PURE__ */ jsx(Switch, {
+											id: `${uid}-block-${block.id}`,
+											checked: state.promptBlockIds.includes(block.id),
+											"aria-labelledby": `${uid}-block-${block.id}-label`,
+											"aria-describedby": `${uid}-block-${block.id}-text`,
+											onCheckedChange: () => apply(togglePromptBlock(latest.current, block.id))
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "flex min-w-0 flex-col gap-0.5",
+											children: [/* @__PURE__ */ jsx("label", {
+												id: `${uid}-block-${block.id}-label`,
+												htmlFor: `${uid}-block-${block.id}`,
+												className: "text-sm font-medium text-foreground",
+												children: block.label
+											}), /* @__PURE__ */ jsx("p", {
+												id: `${uid}-block-${block.id}-text`,
+												className: "whitespace-pre-wrap break-words text-xs text-muted-foreground",
+												children: block.text
+											})]
+										})]
+									}, block.id))
+								}) : /* @__PURE__ */ jsx("p", {
+									className: "text-sm text-muted-foreground",
+									children: t("imageStudio.dialog.blocks.empty")
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex min-h-0 flex-col gap-4 lg:overflow-y-auto",
+							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`,
+								"data-image-studio-drop": true,
+								onDragEnter: (event) => {
+									event.preventDefault();
+									setDragging(true);
+								},
+								onDragOver: (event) => {
+									event.preventDefault();
+									setDragging(true);
+								},
+								onDragLeave: () => setDragging(false),
+								onDrop,
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center justify-between gap-2",
+										children: [
+											/* @__PURE__ */ jsx("h3", {
+												id: `${uid}-references`,
+												className: heading,
+												children: t("imageStudio.dialog.references.heading")
+											}),
+											/* @__PURE__ */ jsxs(Button, {
+												size: "xs",
+												variant: "outline",
+												disabled: uploading > 0,
+												onClick: () => fileInput.current?.click(),
+												children: [/* @__PURE__ */ jsx(Icon, {
+													name: uploading > 0 ? "i-lucide-loader-circle" : "i-lucide-upload",
+													className: cn(uploading > 0 && "animate-spin")
+												}), t("imageStudio.dialog.references.upload")]
+											}),
+											/* @__PURE__ */ jsx("input", {
+												ref: fileInput,
+												type: "file",
+												accept: "image/*",
+												multiple: true,
+												hidden: true,
+												"data-image-studio-file": true,
+												onChange: onFilesChosen
+											})
+										]
+									}),
+									uploading > 0 && /* @__PURE__ */ jsx("p", {
+										className: "text-xs text-muted-foreground",
+										role: "status",
+										children: t("imageStudio.dialog.references.uploading")
+									}),
+									uploadProblem && /* @__PURE__ */ jsx(Alert, {
+										variant: "destructive",
+										children: /* @__PURE__ */ jsx(AlertTitle, { children: uploadProblem })
+									}),
+									state.references.length ? /* @__PURE__ */ jsx("ul", {
+										className: "grid grid-cols-2 gap-2 sm:grid-cols-3",
+										children: state.references.map((image) => /* @__PURE__ */ jsx(ImageStudioTile, {
+											image,
+											selected: state.selected === image.id,
+											onToggle: () => apply(toggleImage(latest.current, image.id)),
+											onSelect: () => apply(select(latest.current, image.id)),
+											onRemove: () => apply(removeImage(latest.current, image.id))
+										}, image.id))
+									}) : /* @__PURE__ */ jsx("p", {
+										className: "text-sm text-muted-foreground",
+										children: t("imageStudio.dialog.references.drop")
+									})
+								]
+							}), /* @__PURE__ */ jsxs("section", {
+								className: "flex flex-col gap-2 p-1",
+								"aria-labelledby": `${uid}-generations`,
+								children: [/* @__PURE__ */ jsx("h3", {
+									id: `${uid}-generations`,
+									className: heading,
+									children: t("imageStudio.dialog.generations.heading")
+								}), state.generations.length ? /* @__PURE__ */ jsx("ul", {
+									className: "grid grid-cols-2 gap-2 sm:grid-cols-3",
+									children: state.generations.map((image) => /* @__PURE__ */ jsx(ImageStudioTile, {
+										image,
+										selected: state.selected === image.id,
+										onToggle: () => apply(toggleImage(latest.current, image.id)),
+										onSelect: () => apply(select(latest.current, image.id)),
+										onRemove: () => apply(removeImage(latest.current, image.id))
+									}, image.id))
+								}) : /* @__PURE__ */ jsx("p", {
+									className: "text-sm text-muted-foreground",
+									children: t("imageStudio.dialog.generations.empty")
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex min-h-0 flex-col gap-3",
+							children: [/* @__PURE__ */ jsxs("section", {
+								className: "flex flex-col gap-2",
+								"aria-labelledby": `${uid}-preview`,
+								children: [/* @__PURE__ */ jsx("h3", {
+									id: `${uid}-preview`,
+									className: heading,
+									children: t("imageStudio.dialog.preview.heading")
+								}), /* @__PURE__ */ jsx("div", {
+									className: "flex aspect-square items-center justify-center overflow-hidden rounded-md border border-border bg-muted",
+									children: picture ? /* @__PURE__ */ jsx("img", {
+										src: picture.url,
+										alt: picture.title || t("imageStudio.dialog.tile.untitled"),
+										className: "size-full object-contain",
+										"data-image-studio-preview": true
+									}) : /* @__PURE__ */ jsx("p", {
+										className: "text-sm text-muted-foreground",
+										children: t("imageStudio.dialog.preview.empty")
+									})
+								})]
+							}), /* @__PURE__ */ jsx(ImageStudioChat, {
+								turns: state.turns,
+								images,
+								running,
+								emptyAllowed: draft.trim() !== "",
+								onSend: (instruction) => void generate(instruction)
+							})]
+						})
+					]
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { ImageStudioDialog };
+
+//# sourceMappingURL=ImageStudioDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageStudioDialog.js","names":[],"sources":["../../../../src/features/image-studio/react/ImageStudioDialog.tsx"],"sourcesContent":["import { type ChangeEvent, type DragEvent, useEffect, useId, useRef, useState } from 'react'\nimport { fetchErrorMessage } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { Alert, AlertTitle } from '../../../react/ui/alert'\nimport { Button } from '../../../react/ui/button'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../react/ui/dialog'\nimport { Switch } from '../../../react/ui/switch'\nimport { Textarea } from '../../../react/ui/textarea'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/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 { ImageStudioChat } from './ImageStudioChat'\nimport { ImageStudioTile } from './ImageStudioTile'\nimport type { ImageStudioReactStore } from './store'\n\nconst COMMIT_DELAY_MS = 500\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 `ImageStudioReactStore`).\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 */\nexport function ImageStudioDialog({ open, onOpenChange, store, title }: {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  store: ImageStudioReactStore\n  title?: string\n}) {\n  const { t } = useEditorI18n()\n  const uid = useId()\n  const { state, promptBlocks, problem } = store\n  const images = [...state.generations, ...state.references]\n  const picture = selectedImage(state)\n\n  // The latest store and the latest state: async continuations (an upload, a generation) must build on the newest\n  // state, also when a render has not caught up with the `update` just made. A new `store.state` replaces it.\n  const storeRef = useRef(store)\n  storeRef.current = store\n  const latest = useRef(state)\n  const seen = useRef(state)\n  if (seen.current !== state) {\n    seen.current = state\n    latest.current = state\n  }\n  const apply = (next: ImageStudioState) => {\n    latest.current = next\n    storeRef.current.update(next)\n  }\n\n  // --- Description --------------------------------------------------------------------------------------------------\n\n  const [draft, setDraft] = useState(state.description)\n  const draftRef = useRef(draft)\n  /** The description as last committed or received: the host's echo of our own commit must not overwrite a newer draft. */\n  const known = useRef(state.description)\n  const commitTimer = useRef<ReturnType<typeof setTimeout>>(undefined)\n\n  function commitDescription() {\n    clearTimeout(commitTimer.current)\n    commitTimer.current = undefined\n    if (draftRef.current === latest.current.description) return\n    known.current = draftRef.current\n    apply(setDescription(latest.current, draftRef.current))\n  }\n\n  function onDescriptionChange(event: ChangeEvent<HTMLTextAreaElement>) {\n    const text = event.target.value\n    draftRef.current = text\n    setDraft(text)\n    if (text === latest.current.description) return\n    clearTimeout(commitTimer.current)\n    commitTimer.current = setTimeout(commitDescription, COMMIT_DELAY_MS)\n  }\n\n  // A change of the host (undo, another tab) shows unless the user has typed something that is not committed yet.\n  useEffect(() => {\n    if (state.description === known.current) return\n    known.current = state.description\n    if (commitTimer.current === undefined) {\n      draftRef.current = state.description\n      setDraft(state.description)\n    }\n  }, [state.description])\n\n  // --- References: upload and drop ----------------------------------------------------------------------------------\n\n  const fileInput = useRef<HTMLInputElement>(null)\n  const [uploading, setUploading] = useState(0)\n  const [uploadProblem, setUploadProblem] = useState<string>()\n  const [dragging, setDragging] = useState(false)\n\n  async function upload(files: readonly File[]) {\n    const pictures = files.filter(file => file.type.startsWith('image/'))\n    if (!pictures.length) return\n    setUploadProblem(undefined)\n    setUploading(count => count + pictures.length)\n    await Promise.all(pictures.map(async (file) => {\n      try {\n        const image = await storeRef.current.upload(file)\n        apply(addReference(latest.current, image))\n      }\n      catch (error) {\n        setUploadProblem(t('imageStudio.dialog.references.failed', { message: fetchErrorMessage(error) }))\n      }\n      finally {\n        setUploading(count => count - 1)\n      }\n    }))\n  }\n\n  function onFilesChosen(event: ChangeEvent<HTMLInputElement>) {\n    const input = event.target\n    const files = [...(input.files ?? [])]\n    input.value = '' // the same file can be chosen again\n    void upload(files)\n  }\n\n  function onDrop(event: DragEvent) {\n    event.preventDefault()\n    setDragging(false)\n    void upload([...event.dataTransfer.files])\n  }\n\n  // --- Generation ---------------------------------------------------------------------------------------------------\n\n  const [running, setRunning] = useState(false)\n  const controller = useRef<AbortController>(undefined)\n\n  function abortGeneration() {\n    controller.current?.abort()\n    controller.current = undefined\n    setRunning(false)\n  }\n\n  async function generate(instruction: string) {\n    if (controller.current) return\n    commitDescription()\n    const own = new AbortController()\n    controller.current = own\n    setRunning(true)\n    const turn: ImageStudioTurn = { id: crypto.randomUUID(), instruction, imageId: null, createdAt: new Date().toISOString() }\n    try {\n      const image = await storeRef.current.generate(instruction, own.signal)\n      if (own.signal.aborted) return\n      apply(addGeneration(latest.current, image, turn))\n    }\n    catch (error) {\n      if (own.signal.aborted) return\n      apply({ ...latest.current, turns: [...latest.current.turns, { ...turn, problem: fetchErrorMessage(error) }] })\n    }\n    finally {\n      if (controller.current === own) {\n        controller.current = undefined\n        setRunning(false)\n      }\n    }\n  }\n\n  // --- Closing ------------------------------------------------------------------------------------------------------\n\n  function close() {\n    commitDescription()\n    abortGeneration()\n    onOpenChange(false)\n  }\n\n  // The host closes the dialog itself, or the component goes: commit what was typed, stop what runs.\n  useEffect(() => {\n    if (open) return\n    commitDescription()\n    abortGeneration()\n  }, [open])\n  useEffect(() => () => {\n    commitDescription()\n    abortGeneration()\n  }, [])\n\n  const heading = 'text-sm font-medium text-foreground'\n\n  return (\n    <Dialog open={open} onOpenChange={(value) => { if (!value) close() }}>\n      <DialogContent className=\"max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-[min(72rem,calc(100vw-2rem))]\" aria-describedby={undefined}>\n        <DialogHeader>\n          <DialogTitle>{title ?? t('imageStudio.dialog.title')}</DialogTitle>\n        </DialogHeader>\n        <div className=\"flex flex-col gap-3\" data-image-studio-dialog>\n          {problem && (\n            <Alert variant=\"destructive\">\n              <AlertTitle>{problem}</AlertTitle>\n            </Alert>\n          )}\n          <div className=\"grid gap-4 lg:h-[68vh] lg:grid-cols-[17rem_minmax(0,1fr)_minmax(0,22rem)]\">\n            {/* Left: what the picture shows. */}\n            <section className=\"flex min-h-0 flex-col gap-3 lg:overflow-y-auto\" aria-labelledby={`${uid}-description`}>\n              <h3 id={`${uid}-description`} className={heading}>{t('imageStudio.dialog.description.heading')}</h3>\n              <Textarea\n                value={draft}\n                rows={6}\n                placeholder={t('imageStudio.dialog.description.placeholder')}\n                aria-label={t('imageStudio.dialog.description.heading')}\n                onChange={onDescriptionChange}\n                onBlur={commitDescription}\n              />\n              <h3 id={`${uid}-blocks`} className={cn(heading, 'mt-2')}>{t('imageStudio.dialog.blocks.heading')}</h3>\n              {promptBlocks.length\n                ? (\n                    <ul className=\"flex flex-col gap-3\" aria-labelledby={`${uid}-blocks`}>\n                      {promptBlocks.map(block => (\n                        <li key={block.id} className=\"flex items-start gap-2\">\n                          <Switch\n                            id={`${uid}-block-${block.id}`}\n                            checked={state.promptBlockIds.includes(block.id)}\n                            aria-labelledby={`${uid}-block-${block.id}-label`}\n                            aria-describedby={`${uid}-block-${block.id}-text`}\n                            onCheckedChange={() => apply(togglePromptBlock(latest.current, block.id))}\n                          />\n                          <div className=\"flex min-w-0 flex-col gap-0.5\">\n                            <label id={`${uid}-block-${block.id}-label`} htmlFor={`${uid}-block-${block.id}`} className=\"text-sm font-medium text-foreground\">\n                              {block.label}\n                            </label>\n                            <p id={`${uid}-block-${block.id}-text`} className=\"whitespace-pre-wrap break-words text-xs text-muted-foreground\">\n                              {block.text}\n                            </p>\n                          </div>\n                        </li>\n                      ))}\n                    </ul>\n                  )\n                : <p className=\"text-sm text-muted-foreground\">{t('imageStudio.dialog.blocks.empty')}</p>}\n            </section>\n\n            {/* Middle: references and previous generations. */}\n            <div className=\"flex min-h-0 flex-col gap-4 lg:overflow-y-auto\">\n              <section\n                className=\"flex flex-col gap-2 rounded-md border border-dashed border-transparent p-1 data-[dragging=true]:border-primary\"\n                data-dragging={dragging}\n                aria-labelledby={`${uid}-references`}\n                data-image-studio-drop\n                onDragEnter={(event) => { event.preventDefault(); setDragging(true) }}\n                onDragOver={(event) => { event.preventDefault(); setDragging(true) }}\n                onDragLeave={() => setDragging(false)}\n                onDrop={onDrop}\n              >\n                <div className=\"flex items-center justify-between gap-2\">\n                  <h3 id={`${uid}-references`} className={heading}>{t('imageStudio.dialog.references.heading')}</h3>\n                  <Button size=\"xs\" variant=\"outline\" disabled={uploading > 0} onClick={() => fileInput.current?.click()}>\n                    <Icon name={uploading > 0 ? 'i-lucide-loader-circle' : 'i-lucide-upload'} className={cn(uploading > 0 && 'animate-spin')} />\n                    {t('imageStudio.dialog.references.upload')}\n                  </Button>\n                  <input ref={fileInput} type=\"file\" accept=\"image/*\" multiple hidden data-image-studio-file onChange={onFilesChosen} />\n                </div>\n                {uploading > 0 && <p className=\"text-xs text-muted-foreground\" role=\"status\">{t('imageStudio.dialog.references.uploading')}</p>}\n                {uploadProblem && (\n                  <Alert variant=\"destructive\">\n                    <AlertTitle>{uploadProblem}</AlertTitle>\n                  </Alert>\n                )}\n                {state.references.length\n                  ? (\n                      <ul className=\"grid grid-cols-2 gap-2 sm:grid-cols-3\">\n                        {state.references.map(image => (\n                          <ImageStudioTile\n                            key={image.id}\n                            image={image}\n                            selected={state.selected === image.id}\n                            onToggle={() => apply(toggleImage(latest.current, image.id))}\n                            onSelect={() => apply(select(latest.current, image.id))}\n                            onRemove={() => apply(removeImage(latest.current, image.id))}\n                          />\n                        ))}\n                      </ul>\n                    )\n                  : <p className=\"text-sm text-muted-foreground\">{t('imageStudio.dialog.references.drop')}</p>}\n              </section>\n\n              <section className=\"flex flex-col gap-2 p-1\" aria-labelledby={`${uid}-generations`}>\n                <h3 id={`${uid}-generations`} className={heading}>{t('imageStudio.dialog.generations.heading')}</h3>\n                {state.generations.length\n                  ? (\n                      <ul className=\"grid grid-cols-2 gap-2 sm:grid-cols-3\">\n                        {state.generations.map(image => (\n                          <ImageStudioTile\n                            key={image.id}\n                            image={image}\n                            selected={state.selected === image.id}\n                            onToggle={() => apply(toggleImage(latest.current, image.id))}\n                            onSelect={() => apply(select(latest.current, image.id))}\n                            onRemove={() => apply(removeImage(latest.current, image.id))}\n                          />\n                        ))}\n                      </ul>\n                    )\n                  : <p className=\"text-sm text-muted-foreground\">{t('imageStudio.dialog.generations.empty')}</p>}\n              </section>\n            </div>\n\n            {/* Right: the block's image and the chat. */}\n            <div className=\"flex min-h-0 flex-col gap-3\">\n              <section className=\"flex flex-col gap-2\" aria-labelledby={`${uid}-preview`}>\n                <h3 id={`${uid}-preview`} className={heading}>{t('imageStudio.dialog.preview.heading')}</h3>\n                <div className=\"flex aspect-square items-center justify-center overflow-hidden rounded-md border border-border bg-muted\">\n                  {picture\n                    ? (\n                        <img\n                          src={picture.url}\n                          alt={picture.title || t('imageStudio.dialog.tile.untitled')}\n                          className=\"size-full object-contain\"\n                          data-image-studio-preview\n                        />\n                      )\n                    : <p className=\"text-sm text-muted-foreground\">{t('imageStudio.dialog.preview.empty')}</p>}\n                </div>\n              </section>\n              <ImageStudioChat\n                turns={state.turns}\n                images={images}\n                running={running}\n                emptyAllowed={draft.trim() !== ''}\n                onSend={instruction => void generate(instruction)}\n              />\n            </div>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAM,kBAAkB;;;;;;;;;;AAWxB,SAAgB,kBAAkB,EAAE,MAAM,cAAc,OAAO,SAK5D;CACD,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,MAAM,MAAM;CAClB,MAAM,EAAE,OAAO,cAAc,YAAY;CACzC,MAAM,SAAS,CAAC,GAAG,MAAM,aAAa,GAAG,MAAM,UAAU;CACzD,MAAM,UAAU,cAAc,KAAK;CAInC,MAAM,WAAW,OAAO,KAAK;CAC7B,SAAS,UAAU;CACnB,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,OAAO,OAAO,KAAK;CACzB,IAAI,KAAK,YAAY,OAAO;EAC1B,KAAK,UAAU;EACf,OAAO,UAAU;CACnB;CACA,MAAM,SAAS,SAA2B;EACxC,OAAO,UAAU;EACjB,SAAS,QAAQ,OAAO,IAAI;CAC9B;CAIA,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM,WAAW;CACpD,MAAM,WAAW,OAAO,KAAK;;CAE7B,MAAM,QAAQ,OAAO,MAAM,WAAW;CACtC,MAAM,cAAc,OAAsC,KAAA,CAAS;CAEnE,SAAS,oBAAoB;EAC3B,aAAa,YAAY,OAAO;EAChC,YAAY,UAAU,KAAA;EACtB,IAAI,SAAS,YAAY,OAAO,QAAQ,aAAa;EACrD,MAAM,UAAU,SAAS;EACzB,MAAM,eAAe,OAAO,SAAS,SAAS,OAAO,CAAC;CACxD;CAEA,SAAS,oBAAoB,OAAyC;EACpE,MAAM,OAAO,MAAM,OAAO;EAC1B,SAAS,UAAU;EACnB,SAAS,IAAI;EACb,IAAI,SAAS,OAAO,QAAQ,aAAa;EACzC,aAAa,YAAY,OAAO;EAChC,YAAY,UAAU,WAAW,mBAAmB,eAAe;CACrE;CAGA,gBAAgB;EACd,IAAI,MAAM,gBAAgB,MAAM,SAAS;EACzC,MAAM,UAAU,MAAM;EACtB,IAAI,YAAY,YAAY,KAAA,GAAW;GACrC,SAAS,UAAU,MAAM;GACzB,SAAS,MAAM,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,WAAW,CAAC;CAItB,MAAM,YAAY,OAAyB,IAAI;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC;CAC5C,MAAM,CAAC,eAAe,oBAAoB,SAAiB;CAC3D,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,eAAe,OAAO,OAAwB;EAC5C,MAAM,WAAW,MAAM,QAAO,SAAQ,KAAK,KAAK,WAAW,QAAQ,CAAC;EACpE,IAAI,CAAC,SAAS,QAAQ;EACtB,iBAAiB,KAAA,CAAS;EAC1B,cAAa,UAAS,QAAQ,SAAS,MAAM;EAC7C,MAAM,QAAQ,IAAI,SAAS,IAAI,OAAO,SAAS;GAC7C,IAAI;IACF,MAAM,QAAQ,MAAM,SAAS,QAAQ,OAAO,IAAI;IAChD,MAAM,aAAa,OAAO,SAAS,KAAK,CAAC;GAC3C,SACO,OAAO;IACZ,iBAAiB,EAAE,wCAAwC,EAAE,SAAS,kBAAkB,KAAK,EAAE,CAAC,CAAC;GACnG,UACQ;IACN,cAAa,UAAS,QAAQ,CAAC;GACjC;EACF,CAAC,CAAC;CACJ;CAEA,SAAS,cAAc,OAAsC;EAC3D,MAAM,QAAQ,MAAM;EACpB,MAAM,QAAQ,CAAC,GAAI,MAAM,SAAS,CAAC,CAAE;EACrC,MAAM,QAAQ;EACd,OAAY,KAAK;CACnB;CAEA,SAAS,OAAO,OAAkB;EAChC,MAAM,eAAe;EACrB,YAAY,KAAK;EACjB,OAAY,CAAC,GAAG,MAAM,aAAa,KAAK,CAAC;CAC3C;CAIA,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,aAAa,OAAwB,KAAA,CAAS;CAEpD,SAAS,kBAAkB;EACzB,WAAW,SAAS,MAAM;EAC1B,WAAW,UAAU,KAAA;EACrB,WAAW,KAAK;CAClB;CAEA,eAAe,SAAS,aAAqB;EAC3C,IAAI,WAAW,SAAS;EACxB,kBAAkB;EAClB,MAAM,MAAM,IAAI,gBAAgB;EAChC,WAAW,UAAU;EACrB,WAAW,IAAI;EACf,MAAM,OAAwB;GAAE,IAAI,OAAO,WAAW;GAAG;GAAa,SAAS;GAAM,4BAAW,IAAI,KAAK,EAAA,CAAE,YAAY;EAAE;EACzH,IAAI;GACF,MAAM,QAAQ,MAAM,SAAS,QAAQ,SAAS,aAAa,IAAI,MAAM;GACrE,IAAI,IAAI,OAAO,SAAS;GACxB,MAAM,cAAc,OAAO,SAAS,OAAO,IAAI,CAAC;EAClD,SACO,OAAO;GACZ,IAAI,IAAI,OAAO,SAAS;GACxB,MAAM;IAAE,GAAG,OAAO;IAAS,OAAO,CAAC,GAAG,OAAO,QAAQ,OAAO;KAAE,GAAG;KAAM,SAAS,kBAAkB,KAAK;IAAE,CAAC;GAAE,CAAC;EAC/G,UACQ;GACN,IAAI,WAAW,YAAY,KAAK;IAC9B,WAAW,UAAU,KAAA;IACrB,WAAW,KAAK;GAClB;EACF;CACF;CAIA,SAAS,QAAQ;EACf,kBAAkB;EAClB,gBAAgB;EAChB,aAAa,KAAK;CACpB;CAGA,gBAAgB;EACd,IAAI,MAAM;EACV,kBAAkB;EAClB,gBAAgB;CAClB,GAAG,CAAC,IAAI,CAAC;CACT,sBAAsB;EACpB,kBAAkB;EAClB,gBAAgB;CAClB,GAAG,CAAC,CAAC;CAEL,MAAM,UAAU;CAEhB,OACE,oBAAC,QAAD;EAAc;EAAM,eAAe,UAAU;GAAE,IAAI,CAAC,OAAO,MAAM;EAAE;EACjE,UAAA,qBAAC,eAAD;GAAe,WAAU;GAAkF,oBAAkB,KAAA;GAA7H,UAAA,CACE,oBAAC,cAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UAAc,SAAS,EAAE,0BAA0B,EAAe,CAAA,EACtD,CAAA,GACd,qBAAC,OAAD;IAAK,WAAU;IAAsB,4BAAA;IAArC,UAAA,CACG,WACC,oBAAC,OAAD;KAAO,SAAQ;KACb,UAAA,oBAAC,YAAD,EAAA,UAAa,QAAoB,CAAA;IAC5B,CAAA,GAET,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MAEE,qBAAC,WAAD;OAAS,WAAU;OAAiD,mBAAiB,GAAG,IAAI;OAA5F,UAAA;QACE,oBAAC,MAAD;SAAI,IAAI,GAAG,IAAI;SAAe,WAAW;SAAU,UAAA,EAAE,wCAAwC;QAAM,CAAA;QACnG,oBAAC,UAAD;SACE,OAAO;SACP,MAAM;SACN,aAAa,EAAE,4CAA4C;SAC3D,cAAY,EAAE,wCAAwC;SACtD,UAAU;SACV,QAAQ;QACT,CAAA;QACD,oBAAC,MAAD;SAAI,IAAI,GAAG,IAAI;SAAU,WAAW,GAAG,SAAS,MAAM;SAAI,UAAA,EAAE,mCAAmC;QAAM,CAAA;QACpG,aAAa,SAER,oBAAC,MAAD;SAAI,WAAU;SAAsB,mBAAiB,GAAG,IAAI;SACzD,UAAA,aAAa,KAAI,UAChB,qBAAC,MAAD;UAAmB,WAAU;UAA7B,UAAA,CACE,oBAAC,QAAD;WACE,IAAI,GAAG,IAAI,SAAS,MAAM;WAC1B,SAAS,MAAM,eAAe,SAAS,MAAM,EAAE;WAC/C,mBAAiB,GAAG,IAAI,SAAS,MAAM,GAAG;WAC1C,oBAAkB,GAAG,IAAI,SAAS,MAAM,GAAG;WAC3C,uBAAuB,MAAM,kBAAkB,OAAO,SAAS,MAAM,EAAE,CAAC;UACzE,CAAA,GACD,qBAAC,OAAD;WAAK,WAAU;WAAf,UAAA,CACE,oBAAC,SAAD;YAAO,IAAI,GAAG,IAAI,SAAS,MAAM,GAAG;YAAS,SAAS,GAAG,IAAI,SAAS,MAAM;YAAM,WAAU;YACzF,UAAA,MAAM;WACF,CAAA,GACP,oBAAC,KAAD;YAAG,IAAI,GAAG,IAAI,SAAS,MAAM,GAAG;YAAQ,WAAU;YAC/C,UAAA,MAAM;WACN,CAAA,CACA;UACH,CAAA,CAAA;SAhBK,GAAA,MAAM,EAgBX,CACL;QACC,CAAA,IAEN,oBAAC,KAAD;SAAG,WAAU;SAAiC,UAAA,EAAE,iCAAiC;QAAK,CAAA;OACnF;;MAGT,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,qBAAC,WAAD;QACE,WAAU;QACV,iBAAe;QACf,mBAAiB,GAAG,IAAI;QACxB,0BAAA;QACA,cAAc,UAAU;SAAE,MAAM,eAAe;SAAG,YAAY,IAAI;QAAE;QACpE,aAAa,UAAU;SAAE,MAAM,eAAe;SAAG,YAAY,IAAI;QAAE;QACnE,mBAAmB,YAAY,KAAK;QAC5B;QARV,UAAA;SAUE,qBAAC,OAAD;UAAK,WAAU;UAAf,UAAA;WACE,oBAAC,MAAD;YAAI,IAAI,GAAG,IAAI;YAAc,WAAW;YAAU,UAAA,EAAE,uCAAuC;WAAM,CAAA;WACjG,qBAAC,QAAD;YAAQ,MAAK;YAAK,SAAQ;YAAU,UAAU,YAAY;YAAG,eAAe,UAAU,SAAS,MAAM;YAArG,UAAA,CACE,oBAAC,MAAD;aAAM,MAAM,YAAY,IAAI,2BAA2B;aAAmB,WAAW,GAAG,YAAY,KAAK,cAAc;YAAI,CAAA,GAC1H,EAAE,sCAAsC,CACnC;;WACR,oBAAC,SAAD;YAAO,KAAK;YAAW,MAAK;YAAO,QAAO;YAAU,UAAA;YAAS,QAAA;YAAO,0BAAA;YAAuB,UAAU;WAAgB,CAAA;UAClH;;SACJ,YAAY,KAAK,oBAAC,KAAD;UAAG,WAAU;UAAgC,MAAK;UAAU,UAAA,EAAE,yCAAyC;SAAK,CAAA;SAC7H,iBACC,oBAAC,OAAD;UAAO,SAAQ;UACb,UAAA,oBAAC,YAAD,EAAA,UAAa,cAA0B,CAAA;SAClC,CAAA;SAER,MAAM,WAAW,SAEZ,oBAAC,MAAD;UAAI,WAAU;UACX,UAAA,MAAM,WAAW,KAAI,UACpB,oBAAC,iBAAD;WAES;WACP,UAAU,MAAM,aAAa,MAAM;WACnC,gBAAgB,MAAM,YAAY,OAAO,SAAS,MAAM,EAAE,CAAC;WAC3D,gBAAgB,MAAM,OAAO,OAAO,SAAS,MAAM,EAAE,CAAC;WACtD,gBAAgB,MAAM,YAAY,OAAO,SAAS,MAAM,EAAE,CAAC;UAC5D,GANM,MAAM,EAMZ,CACF;SACC,CAAA,IAEN,oBAAC,KAAD;UAAG,WAAU;UAAiC,UAAA,EAAE,oCAAoC;SAAK,CAAA;QACtF;OAET,CAAA,GAAA,qBAAC,WAAD;QAAS,WAAU;QAA0B,mBAAiB,GAAG,IAAI;QAArE,UAAA,CACE,oBAAC,MAAD;SAAI,IAAI,GAAG,IAAI;SAAe,WAAW;SAAU,UAAA,EAAE,wCAAwC;QAAM,CAAA,GAClG,MAAM,YAAY,SAEb,oBAAC,MAAD;SAAI,WAAU;SACX,UAAA,MAAM,YAAY,KAAI,UACrB,oBAAC,iBAAD;UAES;UACP,UAAU,MAAM,aAAa,MAAM;UACnC,gBAAgB,MAAM,YAAY,OAAO,SAAS,MAAM,EAAE,CAAC;UAC3D,gBAAgB,MAAM,OAAO,OAAO,SAAS,MAAM,EAAE,CAAC;UACtD,gBAAgB,MAAM,YAAY,OAAO,SAAS,MAAM,EAAE,CAAC;SAC5D,GANM,MAAM,EAMZ,CACF;QACC,CAAA,IAEN,oBAAC,KAAD;SAAG,WAAU;SAAiC,UAAA,EAAE,sCAAsC;QAAK,CAAA,CACxF;OACN,CAAA,CAAA;;MAGL,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,qBAAC,WAAD;QAAS,WAAU;QAAsB,mBAAiB,GAAG,IAAI;QAAjE,UAAA,CACE,oBAAC,MAAD;SAAI,IAAI,GAAG,IAAI;SAAW,WAAW;SAAU,UAAA,EAAE,oCAAoC;QAAM,CAAA,GAC3F,oBAAC,OAAD;SAAK,WAAU;SACZ,UAAA,UAEK,oBAAC,OAAD;UACE,KAAK,QAAQ;UACb,KAAK,QAAQ,SAAS,EAAE,kCAAkC;UAC1D,WAAU;UACV,6BAAA;SACD,CAAA,IAEH,oBAAC,KAAD;UAAG,WAAU;UAAiC,UAAA,EAAE,kCAAkC;SAAK,CAAA;QACxF,CAAA,CACE;OACT,CAAA,GAAA,oBAAC,iBAAD;QACE,OAAO,MAAM;QACL;QACC;QACT,cAAc,MAAM,KAAK,MAAM;QAC/B,SAAQ,gBAAe,KAAK,SAAS,WAAW;OACjD,CAAA,CACE;;KACF;IACF,CAAA,CAAA;GACQ,CAAA,CAAA;;CACT,CAAA;AAEZ"}

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

@@ -0,0 +1,51 @@
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/image-studio/react/ImageStudioTile.tsx
+/**
+* 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.
+*/
+function ImageStudioTile({ image, selected, onToggle, onSelect, onRemove }) {
+	const { t } = useEditorI18n();
+	const title = image.title || t("imageStudio.dialog.tile.untitled");
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex flex-col gap-1.5 rounded-md border border-border p-1.5 data-[active=true]:border-primary data-[active=true]:ring-2 data-[active=true]:ring-primary",
+		"data-active": image.active,
+		"data-selected": selected,
+		"data-image-studio-tile": true,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "block overflow-hidden rounded bg-muted focus-visible:outline-2 focus-visible:outline-primary",
+			"aria-pressed": image.active,
+			"aria-label": t("imageStudio.dialog.tile.toggle", { title }),
+			onClick: onToggle,
+			children: /* @__PURE__ */ jsx("img", {
+				src: image.url,
+				alt: title,
+				className: "aspect-square w-full object-cover",
+				draggable: false
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-1",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				size: "xs",
+				variant: selected ? "default" : "outline",
+				"aria-pressed": selected,
+				onClick: onSelect,
+				children: [selected && /* @__PURE__ */ jsx(Icon, { name: "i-lucide-check" }), t("imageStudio.dialog.tile.use")]
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "icon-xs",
+				variant: "ghost",
+				"aria-label": t("imageStudio.dialog.tile.remove"),
+				onClick: onRemove,
+				children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-trash-2" })
+			})]
+		})]
+	});
+}
+//#endregion
+export { ImageStudioTile };
+
+//# sourceMappingURL=ImageStudioTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageStudioTile.js","names":[],"sources":["../../../../src/features/image-studio/react/ImageStudioTile.tsx"],"sourcesContent":["import { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { useEditorI18n } from '../../../react/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 */\nexport function ImageStudioTile({ image, selected, onToggle, onSelect, onRemove }: {\n  image: ImageStudioImage\n  selected: boolean\n  onToggle: () => void\n  onSelect: () => void\n  onRemove: () => void\n}) {\n  const { t } = useEditorI18n()\n  const title = image.title || t('imageStudio.dialog.tile.untitled')\n  return (\n    <li\n      className=\"flex flex-col gap-1.5 rounded-md border border-border p-1.5 data-[active=true]:border-primary data-[active=true]:ring-2 data-[active=true]:ring-primary\"\n      data-active={image.active}\n      data-selected={selected}\n      data-image-studio-tile\n    >\n      <button\n        type=\"button\"\n        className=\"block overflow-hidden rounded bg-muted focus-visible:outline-2 focus-visible:outline-primary\"\n        aria-pressed={image.active}\n        aria-label={t('imageStudio.dialog.tile.toggle', { title })}\n        onClick={onToggle}\n      >\n        <img src={image.url} alt={title} className=\"aspect-square w-full object-cover\" draggable={false} />\n      </button>\n      <div className=\"flex items-center justify-between gap-1\">\n        <Button size=\"xs\" variant={selected ? 'default' : 'outline'} aria-pressed={selected} onClick={onSelect}>\n          {selected && <Icon name=\"i-lucide-check\" />}\n          {t('imageStudio.dialog.tile.use')}\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\" aria-label={t('imageStudio.dialog.tile.remove')} onClick={onRemove}>\n          <Icon name=\"i-lucide-trash-2\" />\n        </Button>\n      </div>\n    </li>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,gBAAgB,EAAE,OAAO,UAAU,UAAU,UAAU,YAMpE;CACD,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,QAAQ,MAAM,SAAS,EAAE,kCAAkC;CACjE,OACE,qBAAC,MAAD;EACE,WAAU;EACV,eAAa,MAAM;EACnB,iBAAe;EACf,0BAAA;EAJF,UAAA,CAME,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,gBAAc,MAAM;GACpB,cAAY,EAAE,kCAAkC,EAAE,MAAM,CAAC;GACzD,SAAS;GAET,UAAA,oBAAC,OAAD;IAAK,KAAK,MAAM;IAAK,KAAK;IAAO,WAAU;IAAoC,WAAW;GAAQ,CAAA;EAC5F,CAAA,GACR,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,QAAD;IAAQ,MAAK;IAAK,SAAS,WAAW,YAAY;IAAW,gBAAc;IAAU,SAAS;IAA9F,UAAA,CACG,YAAY,oBAAC,MAAD,EAAM,MAAK,iBAAkB,CAAA,GACzC,EAAE,6BAA6B,CAC1B;GACR,CAAA,GAAA,oBAAC,QAAD;IAAQ,MAAK;IAAU,SAAQ;IAAQ,cAAY,EAAE,gCAAgC;IAAG,SAAS;IAC/F,UAAA,oBAAC,MAAD,EAAM,MAAK,mBAAoB,CAAA;GACzB,CAAA,CACL;EACH,CAAA,CAAA;;AAER"}

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

@@ -0,0 +1,126 @@
+import { editorEntryOf } from "../../../core/editor-ui.js";
+import "../../media/assets.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.js";
+import { useNotifier } from "../../../react/use-notifier.js";
+import { normalizeImageStudioState } from "../state.js";
+import { IMAGE_STUDIO_OPEN } from "../feature.js";
+import { ImageStudioDialog } from "./ImageStudioDialog.js";
+import { useImageStudioNodeStore } from "./store.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeViewWrapper } from "@tiptap/react";
+//#region src/features/image-studio/react/ImageStudioView.tsx
+/** The studio of one block: its store (and with it the Prompt-Bausteine list) exists from the first opening on. */
+function NodeStudio({ editor, getPos, backend, documentId, open, onOpenChange }) {
+	const { t } = useEditorI18n();
+	const store = useImageStudioNodeStore({
+		editor,
+		getPos,
+		backend,
+		documentId
+	});
+	return store ? /* @__PURE__ */ jsx(ImageStudioDialog, {
+		open,
+		onOpenChange,
+		store,
+		title: t("imageStudio.node.dialogTitle")
+	}) : null;
+}
+/**
+* The `imageStudio` block: the selected picture (or the description as a placeholder), the description as caption and the
+* „Bild-Studio öffnen“ button. The studio dialog opens from that button, on double-click and through the block action
+* `image-studio.open` (the `IMAGE_STUDIO_OPEN` event on the block's node view element); a read-only editor opens none,
+* a backend without image generation explains itself.
+*/
+function ImageStudioView({ node, selected, editor, getPos }) {
+	const { t } = useEditorI18n();
+	const notify = useNotifier(editor);
+	const description = normalizeImageStudioState(node.attrs.studio).description.trim();
+	const [target, setTarget] = useState();
+	const [open, setOpen] = useState(false);
+	function openStudio() {
+		if (!editor.isEditable) return;
+		const ctx = editorEntryOf(editor)?.ctx;
+		const backend = ctx?.backend.images;
+		if (!ctx || !backend) {
+			notify({
+				id: "image-studio.unavailable",
+				title: t("imageStudio.action.notConfigured"),
+				kind: "warning"
+			});
+			return;
+		}
+		setTarget((previous) => previous?.backend === backend ? previous : {
+			backend,
+			documentId: ctx.documentId ?? "scratch"
+		});
+		setOpen(true);
+	}
+	const figure = useRef(null);
+	const openRef = useRef(openStudio);
+	openRef.current = openStudio;
+	useEffect(() => {
+		const dom = figure.current?.parentElement;
+		if (!dom) return;
+		const onOpen = () => openRef.current();
+		dom.addEventListener(IMAGE_STUDIO_OPEN, onOpen);
+		return () => dom.removeEventListener(IMAGE_STUDIO_OPEN, onOpen);
+	}, []);
+	return /* @__PURE__ */ jsxs(NodeViewWrapper, {
+		ref: figure,
+		as: "figure",
+		className: cn("my-3 flex flex-col gap-2 rounded-md", selected && "outline-2 outline-offset-2 outline-primary"),
+		"data-image-studio-block": true,
+		onDoubleClick: openStudio,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			contentEditable: false,
+			children: [
+				node.attrs.src ? /* @__PURE__ */ jsx("img", {
+					src: node.attrs.src,
+					alt: node.attrs.alt || description,
+					className: "m-0 max-w-full rounded-md"
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-32 flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border p-4 text-center text-sm",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "i-lucide-image-plus",
+						className: "size-6 text-muted-foreground/60"
+					}), description ? /* @__PURE__ */ jsx("span", {
+						className: "whitespace-pre-wrap text-muted-foreground",
+						children: description
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/60",
+						children: t("imageStudio.node.noDescription")
+					})]
+				}),
+				node.attrs.src && description && /* @__PURE__ */ jsx("figcaption", {
+					className: "whitespace-pre-wrap px-1 text-sm text-muted-foreground",
+					children: description
+				}),
+				editor.isEditable && /* @__PURE__ */ jsx("div", {
+					className: "flex",
+					children: /* @__PURE__ */ jsxs(Button, {
+						size: "xs",
+						variant: "secondary",
+						onClick: openStudio,
+						children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-wand-sparkles" }), t("imageStudio.node.open")]
+					})
+				})
+			]
+		}), target && /* @__PURE__ */ jsx(NodeStudio, {
+			editor,
+			getPos,
+			backend: target.backend,
+			documentId: target.documentId,
+			open,
+			onOpenChange: setOpen
+		})]
+	});
+}
+//#endregion
+export { ImageStudioView };
+
+//# sourceMappingURL=ImageStudioView.js.map

package/dist/features/image-studio/react/ImageStudioView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageStudioView.js","names":[],"sources":["../../../../src/features/image-studio/react/ImageStudioView.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { NodeViewWrapper, type NodeViewProps } from '@tiptap/react'\nimport { useEffect, useRef, useState } from 'react'\nimport { editorEntryOf } from '../../../core'\nimport type { EditorBackend } from '../../../core/backend'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { useNotifier } from '../../../react/use-notifier'\nimport { SCRATCH_DOCUMENT_ID } from '../../media/assets'\nimport { IMAGE_STUDIO_OPEN } from '../feature'\nimport { normalizeImageStudioState } from '../state'\nimport { ImageStudioDialog } from './ImageStudioDialog'\nimport { useImageStudioNodeStore } from './store'\n\n/** The studio of one block: its store (and with it the Prompt-Bausteine list) exists from the first opening on. */\nfunction NodeStudio({ editor, getPos, backend, documentId, open, onOpenChange }: {\n  editor: Editor\n  getPos: NodeViewProps['getPos']\n  backend: NonNullable<EditorBackend['images']>\n  documentId: string\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}) {\n  const { t } = useEditorI18n()\n  const store = useImageStudioNodeStore({ editor, getPos, backend, documentId })\n  return store\n    ? <ImageStudioDialog open={open} onOpenChange={onOpenChange} store={store} title={t('imageStudio.node.dialogTitle')} />\n    : null\n}\n\n/**\n * The `imageStudio` block: the selected picture (or the description as a placeholder), the description as caption and the\n * „Bild-Studio öffnen“ button. The studio dialog opens from that button, on double-click and through the block action\n * `image-studio.open` (the `IMAGE_STUDIO_OPEN` event on the block's node view element); a read-only editor opens none,\n * a backend without image generation explains itself.\n */\nexport function ImageStudioView({ node, selected, editor, getPos }: NodeViewProps) {\n  const { t } = useEditorI18n()\n  const notify = useNotifier(editor)\n  const studio = normalizeImageStudioState(node.attrs.studio)\n  const description = studio.description.trim()\n\n  const [target, setTarget] = useState<{ backend: NonNullable<EditorBackend['images']>, documentId: string }>()\n  const [open, setOpen] = useState(false)\n\n  function openStudio() {\n    if (!editor.isEditable) return\n    const ctx = editorEntryOf(editor)?.ctx\n    const backend = ctx?.backend.images\n    if (!ctx || !backend) {\n      notify({ id: 'image-studio.unavailable', title: t('imageStudio.action.notConfigured'), kind: 'warning' })\n      return\n    }\n    setTarget(previous => previous?.backend === backend ? previous : { backend, documentId: ctx.documentId ?? SCRATCH_DOCUMENT_ID })\n    setOpen(true)\n  }\n\n  // The block action dispatches `IMAGE_STUDIO_OPEN` on the node view's element, the parent of the wrapper rendered here.\n  const figure = useRef<HTMLElement>(null)\n  const openRef = useRef(openStudio)\n  openRef.current = openStudio\n  useEffect(() => {\n    const dom = figure.current?.parentElement\n    if (!dom) return\n    const onOpen = () => openRef.current()\n    dom.addEventListener(IMAGE_STUDIO_OPEN, onOpen)\n    return () => dom.removeEventListener(IMAGE_STUDIO_OPEN, onOpen)\n  }, [])\n\n  return (\n    <NodeViewWrapper\n      ref={figure}\n      as=\"figure\"\n      className={cn('my-3 flex flex-col gap-2 rounded-md', selected && 'outline-2 outline-offset-2 outline-primary')}\n      data-image-studio-block\n      onDoubleClick={openStudio}\n    >\n      <div className=\"flex flex-col gap-2\" contentEditable={false}>\n        {node.attrs.src\n          ? <img src={node.attrs.src} alt={node.attrs.alt || description} className=\"m-0 max-w-full rounded-md\" />\n          : (\n              <div className=\"flex min-h-32 flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border p-4 text-center text-sm\">\n                <Icon name=\"i-lucide-image-plus\" className=\"size-6 text-muted-foreground/60\" />\n                {description\n                  ? <span className=\"whitespace-pre-wrap text-muted-foreground\">{description}</span>\n                  : <span className=\"text-muted-foreground/60\">{t('imageStudio.node.noDescription')}</span>}\n              </div>\n            )}\n        {node.attrs.src && description && (\n          <figcaption className=\"whitespace-pre-wrap px-1 text-sm text-muted-foreground\">{description}</figcaption>\n        )}\n        {editor.isEditable && (\n          <div className=\"flex\">\n            <Button size=\"xs\" variant=\"secondary\" onClick={openStudio}>\n              <Icon name=\"i-lucide-wand-sparkles\" />\n              {t('imageStudio.node.open')}\n            </Button>\n          </div>\n        )}\n      </div>\n      {target && (\n        <NodeStudio\n          editor={editor}\n          getPos={getPos}\n          backend={target.backend}\n          documentId={target.documentId}\n          open={open}\n          onOpenChange={setOpen}\n        />\n      )}\n    </NodeViewWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,SAAS,WAAW,EAAE,QAAQ,QAAQ,SAAS,YAAY,MAAM,gBAO9D;CACD,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,QAAQ,wBAAwB;EAAE;EAAQ;EAAQ;EAAS;CAAW,CAAC;CAC7E,OAAO,QACH,oBAAC,mBAAD;EAAyB;EAAoB;EAAqB;EAAO,OAAO,EAAE,8BAA8B;CAAI,CAAA,IACpH;AACN;;;;;;;AAQA,SAAgB,gBAAgB,EAAE,MAAM,UAAU,QAAQ,UAAyB;CACjF,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,SAAS,YAAY,MAAM;CAEjC,MAAM,cADS,0BAA0B,KAAK,MAAM,MAC3B,CAAC,CAAC,YAAY,KAAK;CAE5C,MAAM,CAAC,QAAQ,aAAa,SAAgF;CAC5G,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,SAAS,aAAa;EACpB,IAAI,CAAC,OAAO,YAAY;EACxB,MAAM,MAAM,cAAc,MAAM,CAAC,EAAE;EACnC,MAAM,UAAU,KAAK,QAAQ;EAC7B,IAAI,CAAC,OAAO,CAAC,SAAS;GACpB,OAAO;IAAE,IAAI;IAA4B,OAAO,EAAE,kCAAkC;IAAG,MAAM;GAAU,CAAC;GACxG;EACF;EACA,WAAU,aAAY,UAAU,YAAY,UAAU,WAAW;GAAE;GAAS,YAAY,IAAI,cAAA;EAAkC,CAAC;EAC/H,QAAQ,IAAI;CACd;CAGA,MAAM,SAAS,OAAoB,IAAI;CACvC,MAAM,UAAU,OAAO,UAAU;CACjC,QAAQ,UAAU;CAClB,gBAAgB;EACd,MAAM,MAAM,OAAO,SAAS;EAC5B,IAAI,CAAC,KAAK;EACV,MAAM,eAAe,QAAQ,QAAQ;EACrC,IAAI,iBAAiB,mBAAmB,MAAM;EAC9C,aAAa,IAAI,oBAAoB,mBAAmB,MAAM;CAChE,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,iBAAD;EACE,KAAK;EACL,IAAG;EACH,WAAW,GAAG,uCAAuC,YAAY,4CAA4C;EAC7G,2BAAA;EACA,eAAe;EALjB,UAAA,CAOE,qBAAC,OAAD;GAAK,WAAU;GAAsB,iBAAiB;GAAtD,UAAA;IACG,KAAK,MAAM,MACR,oBAAC,OAAD;KAAK,KAAK,KAAK,MAAM;KAAK,KAAK,KAAK,MAAM,OAAO;KAAa,WAAU;IAA6B,CAAA,IAEnG,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAM,MAAK;MAAsB,WAAU;KAAmC,CAAA,GAC7E,cACG,oBAAC,QAAD;MAAM,WAAU;MAA6C,UAAA;KAAkB,CAAA,IAC/E,oBAAC,QAAD;MAAM,WAAU;MAA4B,UAAA,EAAE,gCAAgC;KAAQ,CAAA,CACvF;;IAEV,KAAK,MAAM,OAAO,eACjB,oBAAC,cAAD;KAAY,WAAU;KAA0D,UAAA;IAAwB,CAAA;IAEzG,OAAO,cACN,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,qBAAC,QAAD;MAAQ,MAAK;MAAK,SAAQ;MAAY,SAAS;MAA/C,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,yBAA0B,CAAA,GACpC,EAAE,uBAAuB,CACpB;;IACL,CAAA;GAEJ;EACJ,CAAA,GAAA,UACC,oBAAC,YAAD;GACU;GACA;GACR,SAAS,OAAO;GAChB,YAAY,OAAO;GACb;GACN,cAAc;EACf,CAAA,CAEY;;AAErB"}

package/dist/features/image-studio/react/store.d.ts

@@ -0,0 +1,37 @@
+import { ImageStudioImage, ImageStudioPromptBlock } from "../../../core/backend-types.js";
+import { ImageStudioState } from "../state.js";
+import { ImageStudioNodeCoreOptions } from "../node-core.js";
+//#region src/features/image-studio/react/store.d.ts
+/**
+ * What the React Bild-Studio dialog drives; a host supplies it. The same contract as the Vue `ImageStudioStore`, with
+ * plain values where Vue has refs: the host re-renders the dialog with a new `state` after `update`.
+ *
+ * The dialog applies the reducers of `../state` and hands the result to `update`; the store only persists it. The
+ * store's methods never touch `state` themselves:
+ * - `update` must lead to a new `state` (the dialog keeps working on its own latest value until `state` changes).
+ * - `generate` produces one image from the block's `state.description`, the active Prompt-Bausteine and the active
+ *   images (the host builds the prompt). When it resolves, the dialog calls `update(addGeneration(state, image, turn))`;
+ *   when it rejects (and the signal was not aborted) the dialog appends a turn with `imageId: null` and the message as
+ *   `problem`. An aborted generation adds nothing.
+ * - `upload` stores the file and returns the image; the dialog then calls `update(addReference(state, image))`.
+ * - `problem` is a problem of the store itself (the Prompt-Bausteine could not be loaded, say); the dialog shows it as a notice.
+ */
+export interface ImageStudioReactStore {
+  readonly state: ImageStudioState;
+  /** The managed list of Prompt-Bausteine, loaded by the host. */
+  readonly promptBlocks: readonly ImageStudioPromptBlock[];
+  /** Called with the state after a reducer; the host persists it. */
+  update: (next: ImageStudioState) => void;
+  generate: (instruction: string, signal: AbortSignal) => Promise<ImageStudioImage>;
+  upload: (file: File) => Promise<ImageStudioImage>;
+  readonly problem: string | undefined;
+}
+/**
+ * The `ImageStudioReactStore` of one `imageStudio` node (the React wrapper of `createImageStudioNodeCore`): `state`
+ * follows the node's `studio` attribute, `update` writes it back as one transaction, the rest goes to
+ * `backend.images`. The core lives for as long as the component and the `editor`, `backend` and `documentId` stay the
+ * same; the first render returns `undefined` (the core is built in an effect), so render the dialog once there is a store.
+ */
+export declare function useImageStudioNodeStore(options: ImageStudioNodeCoreOptions): ImageStudioReactStore | undefined;
+//#endregion
+//# sourceMappingURL=store.d.ts.map