@ecsplico/editor 3.5.0 → 3.5.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 3.5.1 - 2026-10-21
+
+### Added
+
+- React entry of the Bild-Studio, `@ecsplico/editor/image-studio/react`: `imageStudioFeature()` (the `imageStudio` block with its shadcn node view), `ImageStudioDialog` (props `open`, `onOpenChange`, `store`, `title?`; same behaviour and texts as the Vue dialog) and `ImageStudioReactStore`, the dialog's contract with plain values instead of refs (`state`, `promptBlocks`, `problem`, `update`, `generate`, `upload`; the host re-renders with the new `state` after `update`). `useImageStudioNodeStore({ editor, getPos, backend, documentId })` is the store of one node.
+- `createImageStudioNodeCore(options)` (`ImageStudioNodeCore`, `ImageStudioNodeSnapshot`, `ImageStudioNodeCoreOptions`, exported from `/image-studio/react`): the framework-free store of one `imageStudio` node (`get()`, `subscribe(listener)`, `update`, `generate`, `upload`, `dispose()`). `createImageStudioNodeStore` (Vue) is now a wrapper over it; its public API is unchanged.
+
 ## 3.5.0 - 2026-10-21
 
 ### Added
@@ -12,8 +19,6 @@
 
 - `attrComment` and `mediaTokenizer` are exported from `@ecsplico/editor/media/schema` (shared with the Bild-Studio's Markdown form); `attrComment` escapes U+2028 and U+2029 in the JSON comment so such text survives a Markdown round trip.
 
-React mirror of the dialog and node view follows in 3.5.1.
-
 ## 3.4.0 - 2026-10-21
 
 ### Added

package/dist/code/CodeSurface.vue.d.ts

@@ -19,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
   "onUpdate:modelValue"?: ((text: string) => any) | undefined;
   onSave?: ((text: string) => any) | undefined;
 }>, {
-  modelValue: string;
   editable: boolean;
+  modelValue: string;
   wordWrap: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/document/DocumentSurface.vue.d.ts

@@ -40,8 +40,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
   "onUpdate:modelValue"?: ((text: string) => any) | undefined;
   onSave?: ((text: string) => any) | undefined;
 }>, {
-  modelValue: string;
   editable: boolean;
+  modelValue: string;
   wordWrap: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/features/ai/protocol/generate.d.ts

@@ -16,8 +16,8 @@ export type ChatStream = (messages: ChatMessage[], signal: AbortSignal) => Async
 /** Body schema of the generate request (`POST /api/ai/generate`, `EditorBackend['ai'].stream('generate', …)`). */
 export declare const generateBodySchema: z.ZodObject<{
   task: z.ZodEnum<{
-    generate: "generate";
     custom: "custom";
+    generate: "generate";
     continue: "continue";
     reformulate: "reformulate";
     "transcript-summary": "transcript-summary";

package/dist/features/image-studio/node-core.d.ts

@@ -0,0 +1,46 @@
+import { ReadonlyStore } from "../../core/store.js";
+import { EditorBackend } from "../../core/backend.js";
+import { ImageStudioImage, ImageStudioPromptBlock } from "../../core/backend-types.js";
+import { ImageStudioState } from "./state.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/image-studio/node-core.d.ts
+export interface ImageStudioNodeCoreOptions {
+  editor: Editor;
+  /** Position of the `imageStudio` node (a node view's `getPos`); `undefined` once the node is gone. */
+  getPos: () => number | undefined;
+  /** The backend's image port; `undefined` (backend without the `images` capability) makes `generate` and `upload` reject. */
+  backend: EditorBackend['images'];
+  /** Document whose package stores the uploaded references. */
+  documentId: string;
+}
+/** What a view renders from a node's studio: the observable part of an `ImageStudioNodeCore`. */
+export interface ImageStudioNodeSnapshot {
+  readonly state: ImageStudioState;
+  /** The managed list of Prompt-Bausteine, as the backend answered; empty until then. */
+  readonly promptBlocks: readonly ImageStudioPromptBlock[];
+  /** The Prompt-Bausteine could not be loaded: the message. */
+  readonly problem: string | undefined;
+}
+/**
+ * The framework-free store of one `imageStudio` node (`createImageStudioNodeCore`): an observable `ImageStudioNodeSnapshot`
+ * (`get`/`subscribe`, see `ReadonlyStore`; every change replaces the snapshot) and the actions the dialog needs.
+ * The Vue and React bindings wrap it into the store shape of their dialog.
+ */
+export interface ImageStudioNodeCore extends ReadonlyStore<ImageStudioNodeSnapshot> {
+  /** Writes `next` into the node's `studio` attribute as one transaction (`src` follows the selected image). */
+  update: (next: ImageStudioState) => void;
+  generate: (instruction: string, signal: AbortSignal) => Promise<ImageStudioImage>;
+  upload: (file: File) => Promise<ImageStudioImage>;
+  /** Stops following the editor and ignores the answers still outstanding; call when the node view unmounts. */
+  dispose: () => void;
+}
+/**
+ * The core of the store of one `imageStudio` node: `state` follows the node's `studio` attribute (re-read on every
+ * editor transaction, so undo, collaboration and other writers show), `update` writes it back through
+ * `setImageStudioState` as one transaction (one undo step; the node's `src` follows the selected image), and
+ * `generate`, `upload` and the Prompt-Bausteine go to `backend.images`. Listeners run synchronously. Call `dispose`
+ * when the view goes.
+ */
+export declare function createImageStudioNodeCore(options: ImageStudioNodeCoreOptions): ImageStudioNodeCore;
+//#endregion
+//# sourceMappingURL=node-core.d.ts.map

package/dist/features/image-studio/node-core.js

@@ -0,0 +1,79 @@
+import { EMPTY_IMAGE_STUDIO_STATE, normalizeImageStudioState } from "./state.js";
+//#region src/features/image-studio/node-core.ts
+const NO_IMAGES = "@ecsplico/editor: the backend has no images capability";
+/**
+* The core of the store of one `imageStudio` node: `state` follows the node's `studio` attribute (re-read on every
+* editor transaction, so undo, collaboration and other writers show), `update` writes it back through
+* `setImageStudioState` as one transaction (one undo step; the node's `src` follows the selected image), and
+* `generate`, `upload` and the Prompt-Bausteine go to `backend.images`. Listeners run synchronously. Call `dispose`
+* when the view goes.
+*/
+function createImageStudioNodeCore(options) {
+	const { editor, getPos, backend, documentId } = options;
+	let snapshot = {
+		state: EMPTY_IMAGE_STUDIO_STATE,
+		promptBlocks: [],
+		problem: void 0
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	let disposed = false;
+	let source;
+	function publish(patch) {
+		snapshot = {
+			...snapshot,
+			...patch
+		};
+		for (const listener of [...listeners]) listener(snapshot);
+	}
+	function sync() {
+		const pos = getPos();
+		const node = pos === void 0 || editor.isDestroyed ? null : editor.state.doc.nodeAt(pos);
+		if (node?.type.name !== "imageStudio" || node.attrs.studio === source) return;
+		source = node.attrs.studio;
+		publish({ state: normalizeImageStudioState(source) });
+	}
+	editor.on("transaction", sync);
+	sync();
+	if (backend) backend.promptBlocks().then((blocks) => {
+		if (!disposed) publish({ promptBlocks: blocks });
+	}, (error) => {
+		if (!disposed) publish({ problem: error instanceof Error ? error.message : String(error) });
+	});
+	return {
+		get: () => snapshot,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		update(next) {
+			const pos = getPos();
+			if (pos === void 0 || editor.isDestroyed) return;
+			editor.commands.setImageStudioState(pos, next);
+		},
+		generate(instruction, signal) {
+			if (!backend) return Promise.reject(/* @__PURE__ */ new Error(NO_IMAGES));
+			const { description, promptBlockIds, references, generations } = snapshot.state;
+			const referenceUrls = [...references, ...generations].filter((image) => image.active).map((image) => image.url);
+			return backend.generate({
+				description,
+				instruction,
+				promptBlockIds: [...promptBlockIds],
+				referenceUrls
+			}, signal);
+		},
+		upload(file) {
+			return backend ? backend.upload(documentId, file) : Promise.reject(/* @__PURE__ */ new Error(NO_IMAGES));
+		},
+		dispose() {
+			disposed = true;
+			listeners.clear();
+			editor.off("transaction", sync);
+		}
+	};
+}
+//#endregion
+export { createImageStudioNodeCore };
+
+//# sourceMappingURL=node-core.js.map

package/dist/features/image-studio/node-core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-core.js","names":[],"sources":["../../../src/features/image-studio/node-core.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport type { EditorBackend } from '../../core/backend'\nimport type { ReadonlyStore } from '../../core/store'\nimport { EMPTY_IMAGE_STUDIO_STATE, type ImageStudioImage, type ImageStudioPromptBlock, type ImageStudioState, normalizeImageStudioState } from './state'\n\nexport interface ImageStudioNodeCoreOptions {\n  editor: Editor\n  /** Position of the `imageStudio` node (a node view's `getPos`); `undefined` once the node is gone. */\n  getPos: () => number | undefined\n  /** The backend's image port; `undefined` (backend without the `images` capability) makes `generate` and `upload` reject. */\n  backend: EditorBackend['images']\n  /** Document whose package stores the uploaded references. */\n  documentId: string\n}\n\n/** What a view renders from a node's studio: the observable part of an `ImageStudioNodeCore`. */\nexport interface ImageStudioNodeSnapshot {\n  readonly state: ImageStudioState\n  /** The managed list of Prompt-Bausteine, as the backend answered; empty until then. */\n  readonly promptBlocks: readonly ImageStudioPromptBlock[]\n  /** The Prompt-Bausteine could not be loaded: the message. */\n  readonly problem: string | undefined\n}\n\n/**\n * The framework-free store of one `imageStudio` node (`createImageStudioNodeCore`): an observable `ImageStudioNodeSnapshot`\n * (`get`/`subscribe`, see `ReadonlyStore`; every change replaces the snapshot) and the actions the dialog needs.\n * The Vue and React bindings wrap it into the store shape of their dialog.\n */\nexport interface ImageStudioNodeCore extends ReadonlyStore<ImageStudioNodeSnapshot> {\n  /** Writes `next` into the node's `studio` attribute as one transaction (`src` follows the selected image). */\n  update: (next: ImageStudioState) => void\n  generate: (instruction: string, signal: AbortSignal) => Promise<ImageStudioImage>\n  upload: (file: File) => Promise<ImageStudioImage>\n  /** Stops following the editor and ignores the answers still outstanding; call when the node view unmounts. */\n  dispose: () => void\n}\n\n// What a store without the backend's `images` port rejects with (the node view does not open one without the port).\nconst NO_IMAGES = '@ecsplico/editor: the backend has no images capability'\n\n/**\n * The core of the store of one `imageStudio` node: `state` follows the node's `studio` attribute (re-read on every\n * editor transaction, so undo, collaboration and other writers show), `update` writes it back through\n * `setImageStudioState` as one transaction (one undo step; the node's `src` follows the selected image), and\n * `generate`, `upload` and the Prompt-Bausteine go to `backend.images`. Listeners run synchronously. Call `dispose`\n * when the view goes.\n */\nexport function createImageStudioNodeCore(options: ImageStudioNodeCoreOptions): ImageStudioNodeCore {\n  const { editor, getPos, backend, documentId } = options\n  let snapshot: ImageStudioNodeSnapshot = { state: EMPTY_IMAGE_STUDIO_STATE, promptBlocks: [], problem: undefined }\n  const listeners = new Set<(value: ImageStudioNodeSnapshot) => void>()\n  let disposed = false\n  // The attribute value `state` was normalized from: a transaction that left it alone keeps `state` as it is.\n  let source: unknown\n\n  function publish(patch: Partial<ImageStudioNodeSnapshot>): void {\n    snapshot = { ...snapshot, ...patch }\n    // A copy: listeners may (un)subscribe while being notified.\n    for (const listener of [...listeners]) listener(snapshot)\n  }\n\n  function sync(): void {\n    const pos = getPos()\n    const node = pos === undefined || editor.isDestroyed ? null : editor.state.doc.nodeAt(pos)\n    if (node?.type.name !== 'imageStudio' || node.attrs.studio === source) return\n    source = node.attrs.studio\n    publish({ state: normalizeImageStudioState(source) })\n  }\n\n  editor.on('transaction', sync)\n  sync()\n\n  if (backend) {\n    backend.promptBlocks().then(\n      (blocks) => { if (!disposed) publish({ promptBlocks: blocks }) },\n      (error: unknown) => { if (!disposed) publish({ problem: error instanceof Error ? error.message : String(error) }) },\n    )\n  }\n\n  return {\n    get: () => snapshot,\n    subscribe(listener) {\n      listeners.add(listener)\n      return () => { listeners.delete(listener) }\n    },\n    update(next) {\n      const pos = getPos()\n      if (pos === undefined || editor.isDestroyed) return\n      editor.commands.setImageStudioState(pos, next)\n    },\n    generate(instruction, signal) {\n      if (!backend) return Promise.reject(new Error(NO_IMAGES))\n      const { description, promptBlockIds, references, generations } = snapshot.state\n      const referenceUrls = [...references, ...generations].filter(image => image.active).map(image => image.url)\n      return backend.generate({ description, instruction, promptBlockIds: [...promptBlockIds], referenceUrls }, signal)\n    },\n    upload(file): Promise<ImageStudioImage> {\n      return backend ? backend.upload(documentId, file) : Promise.reject(new Error(NO_IMAGES))\n    },\n    dispose() {\n      disposed = true\n      listeners.clear()\n      editor.off('transaction', sync)\n    },\n  }\n}\n"],"mappings":";;AAuCA,MAAM,YAAY;;;;;;;;AASlB,SAAgB,0BAA0B,SAA0D;CAClG,MAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe;CAChD,IAAI,WAAoC;EAAE,OAAO;EAA0B,cAAc,CAAC;EAAG,SAAS,KAAA;CAAU;CAChH,MAAM,4BAAY,IAAI,IAA8C;CACpE,IAAI,WAAW;CAEf,IAAI;CAEJ,SAAS,QAAQ,OAA+C;EAC9D,WAAW;GAAE,GAAG;GAAU,GAAG;EAAM;EAEnC,KAAK,MAAM,YAAY,CAAC,GAAG,SAAS,GAAG,SAAS,QAAQ;CAC1D;CAEA,SAAS,OAAa;EACpB,MAAM,MAAM,OAAO;EACnB,MAAM,OAAO,QAAQ,KAAA,KAAa,OAAO,cAAc,OAAO,OAAO,MAAM,IAAI,OAAO,GAAG;EACzF,IAAI,MAAM,KAAK,SAAS,iBAAiB,KAAK,MAAM,WAAW,QAAQ;EACvE,SAAS,KAAK,MAAM;EACpB,QAAQ,EAAE,OAAO,0BAA0B,MAAM,EAAE,CAAC;CACtD;CAEA,OAAO,GAAG,eAAe,IAAI;CAC7B,KAAK;CAEL,IAAI,SACF,QAAQ,aAAa,CAAC,CAAC,MACpB,WAAW;EAAE,IAAI,CAAC,UAAU,QAAQ,EAAE,cAAc,OAAO,CAAC;CAAE,IAC9D,UAAmB;EAAE,IAAI,CAAC,UAAU,QAAQ,EAAE,SAAS,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,EAAE,CAAC;CAAE,CACpH;CAGF,OAAO;EACL,WAAW;EACX,UAAU,UAAU;GAClB,UAAU,IAAI,QAAQ;GACtB,aAAa;IAAE,UAAU,OAAO,QAAQ;GAAE;EAC5C;EACA,OAAO,MAAM;GACX,MAAM,MAAM,OAAO;GACnB,IAAI,QAAQ,KAAA,KAAa,OAAO,aAAa;GAC7C,OAAO,SAAS,oBAAoB,KAAK,IAAI;EAC/C;EACA,SAAS,aAAa,QAAQ;GAC5B,IAAI,CAAC,SAAS,OAAO,QAAQ,uBAAO,IAAI,MAAM,SAAS,CAAC;GACxD,MAAM,EAAE,aAAa,gBAAgB,YAAY,gBAAgB,SAAS;GAC1E,MAAM,gBAAgB,CAAC,GAAG,YAAY,GAAG,WAAW,CAAC,CAAC,QAAO,UAAS,MAAM,MAAM,CAAC,CAAC,KAAI,UAAS,MAAM,GAAG;GAC1G,OAAO,QAAQ,SAAS;IAAE;IAAa;IAAa,gBAAgB,CAAC,GAAG,cAAc;IAAG;GAAc,GAAG,MAAM;EAClH;EACA,OAAO,MAAiC;GACtC,OAAO,UAAU,QAAQ,OAAO,YAAY,IAAI,IAAI,QAAQ,uBAAO,IAAI,MAAM,SAAS,CAAC;EACzF;EACA,UAAU;GACR,WAAW;GACX,UAAU,MAAM;GAChB,OAAO,IAAI,eAAe,IAAI;EAChC;CACF;AACF"}

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

@@ -1,16 +1,7 @@
-import { EditorBackend } from "../../core/backend.js";
+import { ImageStudioNodeCoreOptions } from "./node-core.js";
 import { ImageStudioStore } from "./store.js";
-import { Editor } from "@tiptap/core";
 //#region src/features/image-studio/node-store.d.ts
-export interface ImageStudioNodeStoreOptions {
-  editor: Editor;
-  /** Position of the `imageStudio` node (a node view's `getPos`); `undefined` once the node is gone. */
-  getPos: () => number | undefined;
-  /** The backend's image port; `undefined` (backend without the `images` capability) makes `generate` and `upload` reject. */
-  backend: EditorBackend['images'];
-  /** Document whose package stores the uploaded references. */
-  documentId: string;
-}
+export type ImageStudioNodeStoreOptions = ImageStudioNodeCoreOptions;
 /** A store over one node, with the function that detaches it from the editor. */
 export interface ImageStudioNodeStore extends ImageStudioStore {
   /** Stops following the editor and ignores the answers still outstanding; call when the node view unmounts. */
@@ -21,6 +12,7 @@ export interface ImageStudioNodeStore extends ImageStudioStore {
  * editor transaction, so undo, collaboration and other writers show), `update` writes it back through
  * `setImageStudioState` as one transaction (one undo step; the node's `src` follows the selected image), and
  * `generate`, `upload` and the Prompt-Bausteine go to `backend.images`. Call `dispose` when the view goes.
+ * The Vue wrapper of `createImageStudioNodeCore`.
  */
 export declare function createImageStudioNodeStore(options: ImageStudioNodeStoreOptions): ImageStudioNodeStore;
 //#endregion

package/dist/features/image-studio/node-store.js

@@ -1,61 +1,32 @@
-import { EMPTY_IMAGE_STUDIO_STATE, normalizeImageStudioState } from "./state.js";
+import { createImageStudioNodeCore } from "./node-core.js";
 import { shallowRef } from "vue";
 //#region src/features/image-studio/node-store.ts
-const NO_IMAGES = "@ecsplico/editor: the backend has no images capability";
 /**
 * The `ImageStudioStore` of one `imageStudio` node: `state` follows the node's `studio` attribute (re-read on every
 * editor transaction, so undo, collaboration and other writers show), `update` writes it back through
 * `setImageStudioState` as one transaction (one undo step; the node's `src` follows the selected image), and
 * `generate`, `upload` and the Prompt-Bausteine go to `backend.images`. Call `dispose` when the view goes.
+* The Vue wrapper of `createImageStudioNodeCore`.
 */
 function createImageStudioNodeStore(options) {
-	const { editor, getPos, backend, documentId } = options;
-	const state = shallowRef(EMPTY_IMAGE_STUDIO_STATE);
-	const promptBlocks = shallowRef([]);
-	const problem = shallowRef(void 0);
-	let disposed = false;
-	let source;
-	function sync() {
-		const pos = getPos();
-		const node = pos === void 0 || editor.isDestroyed ? null : editor.state.doc.nodeAt(pos);
-		if (node?.type.name !== "imageStudio" || node.attrs.studio === source) return;
-		source = node.attrs.studio;
-		state.value = normalizeImageStudioState(source);
-	}
-	editor.on("transaction", sync);
-	sync();
-	if (backend) backend.promptBlocks().then((blocks) => {
-		if (!disposed) promptBlocks.value = blocks;
-	}, (error) => {
-		if (!disposed) problem.value = error instanceof Error ? error.message : String(error);
+	const core = createImageStudioNodeCore(options);
+	const initial = core.get();
+	const state = shallowRef(initial.state);
+	const promptBlocks = shallowRef(initial.promptBlocks);
+	const problem = shallowRef(initial.problem);
+	core.subscribe((snapshot) => {
+		state.value = snapshot.state;
+		promptBlocks.value = snapshot.promptBlocks;
+		problem.value = snapshot.problem;
 	});
 	return {
 		state,
 		promptBlocks,
 		problem,
-		update(next) {
-			const pos = getPos();
-			if (pos === void 0 || editor.isDestroyed) return;
-			editor.commands.setImageStudioState(pos, next);
-		},
-		generate(instruction, signal) {
-			if (!backend) return Promise.reject(/* @__PURE__ */ new Error(NO_IMAGES));
-			const { description, promptBlockIds, references, generations } = state.value;
-			const referenceUrls = [...references, ...generations].filter((image) => image.active).map((image) => image.url);
-			return backend.generate({
-				description,
-				instruction,
-				promptBlockIds: [...promptBlockIds],
-				referenceUrls
-			}, signal);
-		},
-		upload(file) {
-			return backend ? backend.upload(documentId, file) : Promise.reject(/* @__PURE__ */ new Error(NO_IMAGES));
-		},
-		dispose() {
-			disposed = true;
-			editor.off("transaction", sync);
-		}
+		update: core.update,
+		generate: core.generate,
+		upload: core.upload,
+		dispose: core.dispose
 	};
 }
 //#endregion

package/dist/features/image-studio/node-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"node-store.js","names":[],"sources":["../../../src/features/image-studio/node-store.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { shallowRef } from 'vue'\nimport type { EditorBackend } from '../../core/backend'\nimport type { ImageStudioStore } from './store'\nimport { type ImageStudioImage, type ImageStudioPromptBlock, type ImageStudioState, EMPTY_IMAGE_STUDIO_STATE, normalizeImageStudioState } from './state'\n\nexport interface ImageStudioNodeStoreOptions {\n  editor: Editor\n  /** Position of the `imageStudio` node (a node view's `getPos`); `undefined` once the node is gone. */\n  getPos: () => number | undefined\n  /** The backend's image port; `undefined` (backend without the `images` capability) makes `generate` and `upload` reject. */\n  backend: EditorBackend['images']\n  /** Document whose package stores the uploaded references. */\n  documentId: string\n}\n\n/** A store over one node, with the function that detaches it from the editor. */\nexport interface ImageStudioNodeStore extends ImageStudioStore {\n  /** Stops following the editor and ignores the answers still outstanding; call when the node view unmounts. */\n  dispose: () => void\n}\n\n// What a store without the backend's `images` port rejects with (the node view does not open one without the port).\nconst NO_IMAGES = '@ecsplico/editor: the backend has no images capability'\n\n/**\n * The `ImageStudioStore` of one `imageStudio` node: `state` follows the node's `studio` attribute (re-read on every\n * editor transaction, so undo, collaboration and other writers show), `update` writes it back through\n * `setImageStudioState` as one transaction (one undo step; the node's `src` follows the selected image), and\n * `generate`, `upload` and the Prompt-Bausteine go to `backend.images`. Call `dispose` when the view goes.\n */\nexport function createImageStudioNodeStore(options: ImageStudioNodeStoreOptions): ImageStudioNodeStore {\n  const { editor, getPos, backend, documentId } = options\n  const state = shallowRef<ImageStudioState>(EMPTY_IMAGE_STUDIO_STATE)\n  const promptBlocks = shallowRef<readonly ImageStudioPromptBlock[]>([])\n  const problem = shallowRef<string | undefined>(undefined)\n  let disposed = false\n  // The attribute value `state` was normalized from: a transaction that left it alone keeps `state` as it is.\n  let source: unknown\n\n  function sync(): void {\n    const pos = getPos()\n    const node = pos === undefined || editor.isDestroyed ? null : editor.state.doc.nodeAt(pos)\n    if (node?.type.name !== 'imageStudio' || node.attrs.studio === source) return\n    source = node.attrs.studio\n    state.value = normalizeImageStudioState(source)\n  }\n\n  editor.on('transaction', sync)\n  sync()\n\n  if (backend) {\n    backend.promptBlocks().then(\n      (blocks) => { if (!disposed) promptBlocks.value = blocks },\n      (error: unknown) => { if (!disposed) problem.value = error instanceof Error ? error.message : String(error) },\n    )\n  }\n\n  return {\n    state,\n    promptBlocks,\n    problem,\n    update(next) {\n      const pos = getPos()\n      if (pos === undefined || editor.isDestroyed) return\n      editor.commands.setImageStudioState(pos, next)\n    },\n    generate(instruction, signal) {\n      if (!backend) return Promise.reject(new Error(NO_IMAGES))\n      const { description, promptBlockIds, references, generations } = state.value\n      const referenceUrls = [...references, ...generations].filter(image => image.active).map(image => image.url)\n      return backend.generate({ description, instruction, promptBlockIds: [...promptBlockIds], referenceUrls }, signal)\n    },\n    upload(file): Promise<ImageStudioImage> {\n      return backend ? backend.upload(documentId, file) : Promise.reject(new Error(NO_IMAGES))\n    },\n    dispose() {\n      disposed = true\n      editor.off('transaction', sync)\n    },\n  }\n}\n"],"mappings":";;;AAuBA,MAAM,YAAY;;;;;;;AAQlB,SAAgB,2BAA2B,SAA4D;CACrG,MAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe;CAChD,MAAM,QAAQ,WAA6B,wBAAwB;CACnE,MAAM,eAAe,WAA8C,CAAC,CAAC;CACrE,MAAM,UAAU,WAA+B,KAAA,CAAS;CACxD,IAAI,WAAW;CAEf,IAAI;CAEJ,SAAS,OAAa;EACpB,MAAM,MAAM,OAAO;EACnB,MAAM,OAAO,QAAQ,KAAA,KAAa,OAAO,cAAc,OAAO,OAAO,MAAM,IAAI,OAAO,GAAG;EACzF,IAAI,MAAM,KAAK,SAAS,iBAAiB,KAAK,MAAM,WAAW,QAAQ;EACvE,SAAS,KAAK,MAAM;EACpB,MAAM,QAAQ,0BAA0B,MAAM;CAChD;CAEA,OAAO,GAAG,eAAe,IAAI;CAC7B,KAAK;CAEL,IAAI,SACF,QAAQ,aAAa,CAAC,CAAC,MACpB,WAAW;EAAE,IAAI,CAAC,UAAU,aAAa,QAAQ;CAAO,IACxD,UAAmB;EAAE,IAAI,CAAC,UAAU,QAAQ,QAAQ,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;CAAE,CAC9G;CAGF,OAAO;EACL;EACA;EACA;EACA,OAAO,MAAM;GACX,MAAM,MAAM,OAAO;GACnB,IAAI,QAAQ,KAAA,KAAa,OAAO,aAAa;GAC7C,OAAO,SAAS,oBAAoB,KAAK,IAAI;EAC/C;EACA,SAAS,aAAa,QAAQ;GAC5B,IAAI,CAAC,SAAS,OAAO,QAAQ,uBAAO,IAAI,MAAM,SAAS,CAAC;GACxD,MAAM,EAAE,aAAa,gBAAgB,YAAY,gBAAgB,MAAM;GACvE,MAAM,gBAAgB,CAAC,GAAG,YAAY,GAAG,WAAW,CAAC,CAAC,QAAO,UAAS,MAAM,MAAM,CAAC,CAAC,KAAI,UAAS,MAAM,GAAG;GAC1G,OAAO,QAAQ,SAAS;IAAE;IAAa;IAAa,gBAAgB,CAAC,GAAG,cAAc;IAAG;GAAc,GAAG,MAAM;EAClH;EACA,OAAO,MAAiC;GACtC,OAAO,UAAU,QAAQ,OAAO,YAAY,IAAI,IAAI,QAAQ,uBAAO,IAAI,MAAM,SAAS,CAAC;EACzF;EACA,UAAU;GACR,WAAW;GACX,OAAO,IAAI,eAAe,IAAI;EAChC;CACF;AACF"}
+{"version":3,"file":"node-store.js","names":[],"sources":["../../../src/features/image-studio/node-store.ts"],"sourcesContent":["import { shallowRef } from 'vue'\nimport { createImageStudioNodeCore, type ImageStudioNodeCoreOptions } from './node-core'\nimport type { ImageStudioPromptBlock, ImageStudioState } from './state'\nimport type { ImageStudioStore } from './store'\n\nexport type ImageStudioNodeStoreOptions = ImageStudioNodeCoreOptions\n\n/** A store over one node, with the function that detaches it from the editor. */\nexport interface ImageStudioNodeStore extends ImageStudioStore {\n  /** Stops following the editor and ignores the answers still outstanding; call when the node view unmounts. */\n  dispose: () => void\n}\n\n/**\n * The `ImageStudioStore` of one `imageStudio` node: `state` follows the node's `studio` attribute (re-read on every\n * editor transaction, so undo, collaboration and other writers show), `update` writes it back through\n * `setImageStudioState` as one transaction (one undo step; the node's `src` follows the selected image), and\n * `generate`, `upload` and the Prompt-Bausteine go to `backend.images`. Call `dispose` when the view goes.\n * The Vue wrapper of `createImageStudioNodeCore`.\n */\nexport function createImageStudioNodeStore(options: ImageStudioNodeStoreOptions): ImageStudioNodeStore {\n  const core = createImageStudioNodeCore(options)\n  const initial = core.get()\n  const state = shallowRef<ImageStudioState>(initial.state)\n  const promptBlocks = shallowRef<readonly ImageStudioPromptBlock[]>(initial.promptBlocks)\n  const problem = shallowRef<string | undefined>(initial.problem)\n  core.subscribe((snapshot) => {\n    state.value = snapshot.state\n    promptBlocks.value = snapshot.promptBlocks\n    problem.value = snapshot.problem\n  })\n  return {\n    state,\n    promptBlocks,\n    problem,\n    update: core.update,\n    generate: core.generate,\n    upload: core.upload,\n    dispose: core.dispose,\n  }\n}\n"],"mappings":";;;;;;;;;;AAoBA,SAAgB,2BAA2B,SAA4D;CACrG,MAAM,OAAO,0BAA0B,OAAO;CAC9C,MAAM,UAAU,KAAK,IAAI;CACzB,MAAM,QAAQ,WAA6B,QAAQ,KAAK;CACxD,MAAM,eAAe,WAA8C,QAAQ,YAAY;CACvF,MAAM,UAAU,WAA+B,QAAQ,OAAO;CAC9D,KAAK,WAAW,aAAa;EAC3B,MAAM,QAAQ,SAAS;EACvB,aAAa,QAAQ,SAAS;EAC9B,QAAQ,QAAQ,SAAS;CAC3B,CAAC;CACD,OAAO;EACL;EACA;EACA;EACA,QAAQ,KAAK;EACb,UAAU,KAAK;EACf,QAAQ,KAAK;EACb,SAAS,KAAK;CAChB;AACF"}

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