@ecsplico/editor 3.5.0 → 3.6.0

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

@@ -0,0 +1,101 @@
+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 { Textarea } from "../../../react/ui/textarea.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/image-studio/react/ImageStudioChat.tsx
+/**
+* The chat of the Bild-Studio: the turn log (instruction, the picture it produced if the block still has it, the
+* problem when it failed) and the instruction input. `Enter` sends, `Shift+Enter` breaks the line; while `running` the
+* input and the button are disabled. An empty instruction is sent when `emptyAllowed` (the block has a description to generate from).
+*/
+function ImageStudioChat({ turns, images, running, emptyAllowed, onSend }) {
+	const { t } = useEditorI18n();
+	const headingId = useId();
+	const [instruction, setInstruction] = useState("");
+	const log = useRef(null);
+	const thumbnail = (turn) => turn.imageId === null ? void 0 : images.find((image) => image.id === turn.imageId);
+	const instructionOf = (turn) => turn.instruction || t("imageStudio.dialog.chat.fromDescription");
+	function send() {
+		if (running || !emptyAllowed && instruction.trim() === "") return;
+		const text = instruction.trim();
+		setInstruction("");
+		onSend(text);
+	}
+	function onKeyDown(event) {
+		if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		send();
+	}
+	useEffect(() => {
+		if (log.current) log.current.scrollTop = log.current.scrollHeight;
+	}, [turns.length]);
+	return /* @__PURE__ */ jsxs("section", {
+		className: "flex min-h-0 flex-1 flex-col gap-2",
+		"aria-labelledby": headingId,
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				id: headingId,
+				className: "text-sm font-medium text-foreground",
+				children: t("imageStudio.dialog.chat.heading")
+			}),
+			/* @__PURE__ */ jsxs("ol", {
+				ref: log,
+				className: "flex min-h-24 flex-1 flex-col gap-2 overflow-y-auto",
+				"data-image-studio-log": true,
+				children: [!turns.length && /* @__PURE__ */ jsx("li", {
+					className: "text-sm text-muted-foreground",
+					children: t("imageStudio.dialog.chat.empty")
+				}), turns.map((turn) => {
+					const picture = thumbnail(turn);
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex items-start gap-2 rounded-md border border-border p-2",
+						"data-problem": turn.problem !== void 0,
+						"data-image-studio-turn": true,
+						children: [picture && /* @__PURE__ */ jsx("img", {
+							src: picture.url,
+							alt: t("imageStudio.dialog.chat.turnImage", { instruction: instructionOf(turn) }),
+							className: "size-12 shrink-0 rounded object-cover"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: cn("whitespace-pre-wrap break-words text-sm text-foreground", !turn.instruction && "italic text-muted-foreground"),
+								children: instructionOf(turn)
+							}), turn.problem && /* @__PURE__ */ jsx("p", {
+								className: "mt-1 whitespace-pre-wrap break-words text-sm text-destructive",
+								role: "alert",
+								children: turn.problem
+							})]
+						})]
+					}, turn.id);
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-end gap-2",
+				children: [/* @__PURE__ */ jsx(Textarea, {
+					value: instruction,
+					className: "min-w-0 flex-1",
+					rows: 2,
+					placeholder: t("imageStudio.dialog.chat.placeholder"),
+					"aria-label": t("imageStudio.dialog.chat.label"),
+					disabled: running,
+					onChange: (event) => setInstruction(event.target.value),
+					onKeyDown
+				}), /* @__PURE__ */ jsxs(Button, {
+					disabled: running || !emptyAllowed && instruction.trim() === "",
+					onClick: send,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: running ? "i-lucide-loader-circle" : "i-lucide-sparkles",
+						className: cn(running && "animate-spin")
+					}), running ? t("imageStudio.dialog.chat.running") : t("imageStudio.dialog.chat.send")]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { ImageStudioChat };
+
+//# sourceMappingURL=ImageStudioChat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageStudioChat.js","names":[],"sources":["../../../../src/features/image-studio/react/ImageStudioChat.tsx"],"sourcesContent":["import { type KeyboardEvent, useEffect, useId, useRef, useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { Textarea } from '../../../react/ui/textarea'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { ImageStudioImage, ImageStudioTurn } from '../state'\n\n/**\n * The chat of the Bild-Studio: the turn log (instruction, the picture it produced if the block still has it, the\n * problem when it failed) and the instruction input. `Enter` sends, `Shift+Enter` breaks the line; while `running` the\n * input and the button are disabled. An empty instruction is sent when `emptyAllowed` (the block has a description to generate from).\n */\nexport function ImageStudioChat({ turns, images, running, emptyAllowed, onSend }: {\n  turns: readonly ImageStudioTurn[]\n  /** The block's images, to show the thumbnail of a turn. */\n  images: readonly ImageStudioImage[]\n  running: boolean\n  emptyAllowed: boolean\n  onSend: (instruction: string) => void\n}) {\n  const { t } = useEditorI18n()\n  const headingId = useId()\n  const [instruction, setInstruction] = useState('')\n  const log = useRef<HTMLOListElement>(null)\n\n  const thumbnail = (turn: ImageStudioTurn): ImageStudioImage | undefined =>\n    turn.imageId === null ? undefined : images.find(image => image.id === turn.imageId)\n  const instructionOf = (turn: ImageStudioTurn): string => turn.instruction || t('imageStudio.dialog.chat.fromDescription')\n\n  function send() {\n    if (running || (!emptyAllowed && instruction.trim() === '')) return\n    const text = instruction.trim()\n    setInstruction('')\n    onSend(text)\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {\n    if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) return\n    event.preventDefault()\n    send()\n  }\n\n  // The newest turn stays in view.\n  useEffect(() => {\n    if (log.current) log.current.scrollTop = log.current.scrollHeight\n  }, [turns.length])\n\n  return (\n    <section className=\"flex min-h-0 flex-1 flex-col gap-2\" aria-labelledby={headingId}>\n      <h3 id={headingId} className=\"text-sm font-medium text-foreground\">\n        {t('imageStudio.dialog.chat.heading')}\n      </h3>\n      <ol ref={log} className=\"flex min-h-24 flex-1 flex-col gap-2 overflow-y-auto\" data-image-studio-log>\n        {!turns.length && <li className=\"text-sm text-muted-foreground\">{t('imageStudio.dialog.chat.empty')}</li>}\n        {turns.map((turn) => {\n          const picture = thumbnail(turn)\n          return (\n            <li\n              key={turn.id}\n              className=\"flex items-start gap-2 rounded-md border border-border p-2\"\n              data-problem={turn.problem !== undefined}\n              data-image-studio-turn\n            >\n              {picture && (\n                <img\n                  src={picture.url}\n                  alt={t('imageStudio.dialog.chat.turnImage', { instruction: instructionOf(turn) })}\n                  className=\"size-12 shrink-0 rounded object-cover\"\n                />\n              )}\n              <div className=\"min-w-0 flex-1\">\n                <p className={cn('whitespace-pre-wrap break-words text-sm text-foreground', !turn.instruction && 'italic text-muted-foreground')}>\n                  {instructionOf(turn)}\n                </p>\n                {turn.problem && (\n                  <p className=\"mt-1 whitespace-pre-wrap break-words text-sm text-destructive\" role=\"alert\">\n                    {turn.problem}\n                  </p>\n                )}\n              </div>\n            </li>\n          )\n        })}\n      </ol>\n      <div className=\"flex items-end gap-2\">\n        <Textarea\n          value={instruction}\n          className=\"min-w-0 flex-1\"\n          rows={2}\n          placeholder={t('imageStudio.dialog.chat.placeholder')}\n          aria-label={t('imageStudio.dialog.chat.label')}\n          disabled={running}\n          onChange={event => setInstruction(event.target.value)}\n          onKeyDown={onKeyDown}\n        />\n        <Button disabled={running || (!emptyAllowed && instruction.trim() === '')} onClick={send}>\n          <Icon name={running ? 'i-lucide-loader-circle' : 'i-lucide-sparkles'} className={cn(running && 'animate-spin')} />\n          {running ? t('imageStudio.dialog.chat.running') : t('imageStudio.dialog.chat.send')}\n        </Button>\n      </div>\n    </section>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAgB,gBAAgB,EAAE,OAAO,QAAQ,SAAS,cAAc,UAOrE;CACD,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,MAAM,OAAyB,IAAI;CAEzC,MAAM,aAAa,SACjB,KAAK,YAAY,OAAO,KAAA,IAAY,OAAO,MAAK,UAAS,MAAM,OAAO,KAAK,OAAO;CACpF,MAAM,iBAAiB,SAAkC,KAAK,eAAe,EAAE,yCAAyC;CAExH,SAAS,OAAO;EACd,IAAI,WAAY,CAAC,gBAAgB,YAAY,KAAK,MAAM,IAAK;EAC7D,MAAM,OAAO,YAAY,KAAK;EAC9B,eAAe,EAAE;EACjB,OAAO,IAAI;CACb;CAEA,SAAS,UAAU,OAA2C;EAC5D,IAAI,MAAM,QAAQ,WAAW,MAAM,YAAY,MAAM,YAAY,aAAa;EAC9E,MAAM,eAAe;EACrB,KAAK;CACP;CAGA,gBAAgB;EACd,IAAI,IAAI,SAAS,IAAI,QAAQ,YAAY,IAAI,QAAQ;CACvD,GAAG,CAAC,MAAM,MAAM,CAAC;CAEjB,OACE,qBAAC,WAAD;EAAS,WAAU;EAAqC,mBAAiB;EAAzE,UAAA;GACE,oBAAC,MAAD;IAAI,IAAI;IAAW,WAAU;IAC1B,UAAA,EAAE,iCAAiC;GAClC,CAAA;GACJ,qBAAC,MAAD;IAAI,KAAK;IAAK,WAAU;IAAsD,yBAAA;IAA9E,UAAA,CACG,CAAC,MAAM,UAAU,oBAAC,MAAD;KAAI,WAAU;KAAiC,UAAA,EAAE,+BAA+B;IAAM,CAAA,GACvG,MAAM,KAAK,SAAS;KACnB,MAAM,UAAU,UAAU,IAAI;KAC9B,OACE,qBAAC,MAAD;MAEE,WAAU;MACV,gBAAc,KAAK,YAAY,KAAA;MAC/B,0BAAA;MAJF,UAAA,CAMG,WACC,oBAAC,OAAD;OACE,KAAK,QAAQ;OACb,KAAK,EAAE,qCAAqC,EAAE,aAAa,cAAc,IAAI,EAAE,CAAC;OAChF,WAAU;MACX,CAAA,GAEH,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,oBAAC,KAAD;QAAG,WAAW,GAAG,2DAA2D,CAAC,KAAK,eAAe,8BAA8B;QAC5H,UAAA,cAAc,IAAI;OAClB,CAAA,GACF,KAAK,WACJ,oBAAC,KAAD;QAAG,WAAU;QAAgE,MAAK;QAC/E,UAAA,KAAK;OACL,CAAA,CAEF;MACH,CAAA,CAAA;KAtBG,GAAA,KAAK,EAsBR;IAER,CAAC,CACC;;GACJ,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,UAAD;KACE,OAAO;KACP,WAAU;KACV,MAAM;KACN,aAAa,EAAE,qCAAqC;KACpD,cAAY,EAAE,+BAA+B;KAC7C,UAAU;KACV,WAAU,UAAS,eAAe,MAAM,OAAO,KAAK;KACzC;IACZ,CAAA,GACD,qBAAC,QAAD;KAAQ,UAAU,WAAY,CAAC,gBAAgB,YAAY,KAAK,MAAM;KAAK,SAAS;KAApF,UAAA,CACE,oBAAC,MAAD;MAAM,MAAM,UAAU,2BAA2B;MAAqB,WAAW,GAAG,WAAW,cAAc;KAAI,CAAA,GAChH,UAAU,EAAE,iCAAiC,IAAI,EAAE,8BAA8B,CAC5E;IACL,CAAA,CAAA;;EACE;;AAEb"}

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

@@ -0,0 +1,19 @@
+import { ImageStudioReactStore } from "./store.js";
+//#region src/features/image-studio/react/ImageStudioDialog.d.ts
+/**
+ * The Bild-Studio: description and Prompt-Bausteine on the left, references and previous generations in the middle,
+ * the block's image and the chat on the right. The dialog applies the reducers of `../state` to `store.state` and
+ * hands every result to `store.update`; the store only generates, uploads and persists (see `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.
+ */
+export declare function ImageStudioDialog({ open, onOpenChange, store, title }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  store: ImageStudioReactStore;
+  title?: string;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=ImageStudioDialog.d.ts.map

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":"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"}

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"}