@ecsplico/editor 3.5.0 → 3.6.0

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

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

@@ -0,0 +1,46 @@
+import { createImageStudioNodeCore } from "../node-core.js";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+//#region src/features/image-studio/react/store.ts
+const noUnsubscribe = () => {};
+/**
+* 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.
+*/
+function useImageStudioNodeStore(options) {
+	const { editor, backend, documentId } = options;
+	const getPos = useRef(options.getPos);
+	getPos.current = options.getPos;
+	const [core, setCore] = useState();
+	useEffect(() => {
+		const own = createImageStudioNodeCore({
+			editor,
+			backend,
+			documentId,
+			getPos: () => getPos.current()
+		});
+		setCore(own);
+		return () => {
+			own.dispose();
+			setCore(void 0);
+		};
+	}, [
+		editor,
+		backend,
+		documentId
+	]);
+	const subscribe = useCallback((listener) => core ? core.subscribe(listener) : noUnsubscribe, [core]);
+	const getSnapshot = useCallback(() => core?.get(), [core]);
+	const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+	return useMemo(() => core && snapshot ? {
+		...snapshot,
+		update: core.update,
+		generate: core.generate,
+		upload: core.upload
+	} : void 0, [core, snapshot]);
+}
+//#endregion
+export { useImageStudioNodeStore };
+
+//# sourceMappingURL=store.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":[],"sources":["../../../../src/features/image-studio/react/store.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'\nimport { createImageStudioNodeCore, type ImageStudioNodeCore, type ImageStudioNodeCoreOptions } from '../node-core'\nimport type { ImageStudioImage, ImageStudioPromptBlock, ImageStudioState } from '../state'\n\n/**\n * What the React Bild-Studio dialog drives; a host supplies it. The same contract as the Vue `ImageStudioStore`, with\n * plain values where Vue has refs: the host re-renders the dialog with a new `state` after `update`.\n *\n * The dialog applies the reducers of `../state` and hands the result to `update`; the store only persists it. The\n * store's methods never touch `state` themselves:\n * - `update` must lead to a new `state` (the dialog keeps working on its own latest value until `state` changes).\n * - `generate` produces one image from the block's `state.description`, the active Prompt-Bausteine and the active\n *   images (the host builds the prompt). When it resolves, the dialog calls `update(addGeneration(state, image, turn))`;\n *   when it rejects (and the signal was not aborted) the dialog appends a turn with `imageId: null` and the message as\n *   `problem`. An aborted generation adds nothing.\n * - `upload` stores the file and returns the image; the dialog then calls `update(addReference(state, image))`.\n * - `problem` is a problem of the store itself (the Prompt-Bausteine could not be loaded, say); the dialog shows it as a notice.\n */\nexport interface ImageStudioReactStore {\n  readonly state: ImageStudioState\n  /** The managed list of Prompt-Bausteine, loaded by the host. */\n  readonly promptBlocks: readonly ImageStudioPromptBlock[]\n  /** Called with the state after a reducer; the host persists it. */\n  update: (next: ImageStudioState) => void\n  generate: (instruction: string, signal: AbortSignal) => Promise<ImageStudioImage>\n  upload: (file: File) => Promise<ImageStudioImage>\n  readonly problem: string | undefined\n}\n\nconst noUnsubscribe = () => {}\n\n/**\n * The `ImageStudioReactStore` of one `imageStudio` node (the React wrapper of `createImageStudioNodeCore`): `state`\n * follows the node's `studio` attribute, `update` writes it back as one transaction, the rest goes to\n * `backend.images`. The core lives for as long as the component and the `editor`, `backend` and `documentId` stay the\n * same; the first render returns `undefined` (the core is built in an effect), so render the dialog once there is a store.\n */\nexport function useImageStudioNodeStore(options: ImageStudioNodeCoreOptions): ImageStudioReactStore | undefined {\n  const { editor, backend, documentId } = options\n  const getPos = useRef(options.getPos)\n  getPos.current = options.getPos\n  const [core, setCore] = useState<ImageStudioNodeCore>()\n  useEffect(() => {\n    const own = createImageStudioNodeCore({ editor, backend, documentId, getPos: () => getPos.current() })\n    setCore(own)\n    return () => {\n      own.dispose()\n      setCore(undefined)\n    }\n  }, [editor, backend, documentId])\n  const subscribe = useCallback((listener: () => void) => core ? core.subscribe(listener) : noUnsubscribe, [core])\n  const getSnapshot = useCallback(() => core?.get(), [core])\n  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n  return useMemo(\n    () => core && snapshot ? { ...snapshot, update: core.update, generate: core.generate, upload: core.upload } : undefined,\n    [core, snapshot],\n  )\n}\n"],"mappings":";;;AA6BA,MAAM,sBAAsB,CAAC;;;;;;;AAQ7B,SAAgB,wBAAwB,SAAwE;CAC9G,MAAM,EAAE,QAAQ,SAAS,eAAe;CACxC,MAAM,SAAS,OAAO,QAAQ,MAAM;CACpC,OAAO,UAAU,QAAQ;CACzB,MAAM,CAAC,MAAM,WAAW,SAA8B;CACtD,gBAAgB;EACd,MAAM,MAAM,0BAA0B;GAAE;GAAQ;GAAS;GAAY,cAAc,OAAO,QAAQ;EAAE,CAAC;EACrG,QAAQ,GAAG;EACX,aAAa;GACX,IAAI,QAAQ;GACZ,QAAQ,KAAA,CAAS;EACnB;CACF,GAAG;EAAC;EAAQ;EAAS;CAAU,CAAC;CAChC,MAAM,YAAY,aAAa,aAAyB,OAAO,KAAK,UAAU,QAAQ,IAAI,eAAe,CAAC,IAAI,CAAC;CAC/G,MAAM,cAAc,kBAAkB,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC;CACzD,MAAM,WAAW,qBAAqB,WAAW,aAAa,WAAW;CACzE,OAAO,cACC,QAAQ,WAAW;EAAE,GAAG;EAAU,QAAQ,KAAK;EAAQ,UAAU,KAAK;EAAU,QAAQ,KAAK;CAAO,IAAI,KAAA,GAC9G,CAAC,MAAM,QAAQ,CACjB;AACF"}

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

@@ -0,0 +1,18 @@
+import { ImageStudioImage, ImageStudioPromptBlock } from "../../core/backend-types.js";
+import { ReactFeature } from "../../react/EditorSurface.js";
+import "../../react/index.js";
+import { EMPTY_IMAGE_STUDIO_STATE, ImageStudioState, ImageStudioTurn, addGeneration, addReference, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock } from "./state.js";
+import { ImageStudioNodeCore, ImageStudioNodeCoreOptions, ImageStudioNodeSnapshot, createImageStudioNodeCore } from "./node-core.js";
+import { ImageStudioReactStore, useImageStudioNodeStore } from "./react/store.js";
+import { ImageStudioDialog } from "./react/ImageStudioDialog.js";
+//#region src/features/image-studio/react.d.ts
+/**
+ * The React Bild-Studio feature (shadcn): the `imageStudio` block with its React view (picture or description
+ * placeholder, opens the studio dialog on double-click and through the block action `image-studio.open`), the `/` entry
+ * `bild-studio` and the action. Generation, upload and the Prompt-Bausteine need a backend with the `images`
+ * capability; without it the view says that generation is not set up.
+ */
+export declare function imageStudioFeature(): ReactFeature;
+//#endregion
+export { EMPTY_IMAGE_STUDIO_STATE, ImageStudioDialog, type ImageStudioImage, type ImageStudioNodeCore, type ImageStudioNodeCoreOptions, type ImageStudioNodeSnapshot, type ImageStudioPromptBlock, type ImageStudioReactStore, type ImageStudioState, type ImageStudioTurn, addGeneration, addReference, createImageStudioNodeCore, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock, useImageStudioNodeStore };
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,21 @@
+import { EMPTY_IMAGE_STUDIO_STATE, addGeneration, addReference, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock } from "./state.js";
+import { imageStudioFeatureCore } from "./feature.js";
+import { ImageStudioDialog } from "./react/ImageStudioDialog.js";
+import { createImageStudioNodeCore } from "./node-core.js";
+import { useImageStudioNodeStore } from "./react/store.js";
+import { ImageStudioView } from "./react/ImageStudioView.js";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+//#region src/features/image-studio/react.ts
+/**
+* The React Bild-Studio feature (shadcn): the `imageStudio` block with its React view (picture or description
+* placeholder, opens the studio dialog on double-click and through the block action `image-studio.open`), the `/` entry
+* `bild-studio` and the action. Generation, upload and the Prompt-Bausteine need a backend with the `images`
+* capability; without it the view says that generation is not set up.
+*/
+function imageStudioFeature() {
+	return imageStudioFeatureCore({ nodeView: ReactNodeViewRenderer(ImageStudioView) });
+}
+//#endregion
+export { EMPTY_IMAGE_STUDIO_STATE, ImageStudioDialog, addGeneration, addReference, createImageStudioNodeCore, imageStudioFeature, isEmptyImageStudioState, normalizeImageStudioState, removeImage, select, selectedImage, setDescription, toggleImage, togglePromptBlock, useImageStudioNodeStore };
+
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","names":[],"sources":["../../../src/features/image-studio/react.ts"],"sourcesContent":["import { ReactNodeViewRenderer } from '@tiptap/react'\nimport type { ReactFeature } from '../../react'\nimport { imageStudioFeatureCore } from './feature'\nimport { ImageStudioView } from './react/ImageStudioView'\n\nexport { ImageStudioDialog } from './react/ImageStudioDialog'\nexport { type ImageStudioReactStore, useImageStudioNodeStore } from './react/store'\nexport { createImageStudioNodeCore, type ImageStudioNodeCore, type ImageStudioNodeCoreOptions, type ImageStudioNodeSnapshot } from './node-core'\nexport {\n  addGeneration,\n  addReference,\n  EMPTY_IMAGE_STUDIO_STATE,\n  type ImageStudioImage,\n  type ImageStudioPromptBlock,\n  type ImageStudioState,\n  type ImageStudioTurn,\n  isEmptyImageStudioState,\n  normalizeImageStudioState,\n  removeImage,\n  select,\n  selectedImage,\n  setDescription,\n  toggleImage,\n  togglePromptBlock,\n} from './state'\n\n/**\n * The React Bild-Studio feature (shadcn): the `imageStudio` block with its React view (picture or description\n * placeholder, opens the studio dialog on double-click and through the block action `image-studio.open`), the `/` entry\n * `bild-studio` and the action. Generation, upload and the Prompt-Bausteine need a backend with the `images`\n * capability; without it the view says that generation is not set up.\n */\nexport function imageStudioFeature(): ReactFeature {\n  return imageStudioFeatureCore({ nodeView: ReactNodeViewRenderer(ImageStudioView) })\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCA,SAAgB,qBAAmC;CACjD,OAAO,uBAAuB,EAAE,UAAU,sBAAsB,eAAe,EAAE,CAAC;AACpF"}

package/dist/markdown/MarkdownSurface.vue.d.ts

@@ -41,24 +41,24 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
   settingsOpen: import("vue").WritableComputedRef<boolean, boolean>;
   settingsTab: import("vue").WritableComputedRef<string | undefined, string | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  settingsOpen: (tab?: string | undefined) => any;
   "update:sidebarOpen": (value: boolean) => any;
   "update:commentsOpen": (value: boolean) => any;
-  ready: (editor: Editor) => any;
   "update:modelValue": (markdown: string) => any;
+  frontmatter: (frontmatter: string | null) => any;
+  ready: (editor: Editor) => any;
   metadataCreate: (list: string, item: MetadataItem) => any;
   contentError: (error: Error) => any;
-  settingsOpen: (tab?: string | undefined) => any;
-  frontmatter: (frontmatter: string | null) => any;
   diagnostics: (diagnostics: MarkdownDiagnostic[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onSettingsOpen?: ((tab?: string | undefined) => any) | undefined;
   "onUpdate:sidebarOpen"?: ((value: boolean) => any) | undefined;
   "onUpdate:commentsOpen"?: ((value: boolean) => any) | undefined;
-  onReady?: ((editor: Editor) => any) | undefined;
   "onUpdate:modelValue"?: ((markdown: string) => any) | undefined;
+  onFrontmatter?: ((frontmatter: string | null) => any) | undefined;
+  onReady?: ((editor: Editor) => any) | undefined;
   onMetadataCreate?: ((list: string, item: MetadataItem) => any) | undefined;
   onContentError?: ((error: Error) => any) | undefined;
-  onSettingsOpen?: ((tab?: string | undefined) => any) | undefined;
-  onFrontmatter?: ((frontmatter: string | null) => any) | undefined;
   onDiagnostics?: ((diagnostics: MarkdownDiagnostic[]) => any) | undefined;
 }>, {
   modelValue: string;

package/dist/server/handlers/ai.d.ts

@@ -11,9 +11,9 @@ export declare const chatBodySchema: z.ZodObject<{
     feedback: z.ZodOptional<z.ZodArray<z.ZodObject<{
       op: z.ZodString;
       type: z.ZodEnum<{
-        add: "add";
-        delete: "delete";
         update: "update";
+        delete: "delete";
+        add: "add";
         convert: "convert";
       }>;
       target: z.ZodNullable<z.ZodString>;

package/dist/vue/AdvancedEditor.vue.d.ts

@@ -71,24 +71,24 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
   editor: import("vue").ComputedRef<Editor | undefined>;
   preset: ComposedEditor<Component>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  settingsOpen: (tab?: string | undefined) => any;
   "update:sidebarOpen": (value: boolean) => any;
   "update:commentsOpen": (value: boolean) => any;
-  ready: (editor: Editor) => any;
   "update:modelValue": (content: JSONContent) => any;
+  ready: (editor: Editor) => any;
   metadataCreate: (list: string, item: MetadataItem) => any;
   contentError: (error: Error) => any;
-  settingsOpen: (tab?: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onSettingsOpen?: ((tab?: string | undefined) => any) | undefined;
   "onUpdate:sidebarOpen"?: ((value: boolean) => any) | undefined;
   "onUpdate:commentsOpen"?: ((value: boolean) => any) | undefined;
-  onReady?: ((editor: Editor) => any) | undefined;
   "onUpdate:modelValue"?: ((content: JSONContent) => any) | undefined;
+  onReady?: ((editor: Editor) => any) | undefined;
   onMetadataCreate?: ((list: string, item: MetadataItem) => any) | undefined;
   onContentError?: ((error: Error) => any) | undefined;
-  onSettingsOpen?: ((tab?: string | undefined) => any) | undefined;
 }>, {
-  ai: boolean;
   content: ContentLevel | readonly FeatureId[];
+  ai: boolean;
   editable: boolean;
   settingsUi: "internal" | "external";
   interaction: InteractionLevel | readonly FeatureId[];

package/dist/vue/SimpleEditor.vue.d.ts

@@ -41,21 +41,21 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
   editor: import("vue").ComputedRef<Editor | undefined>;
   preset: EditorPreset<Component>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  settingsOpen: (tab?: string | undefined) => any;
   "update:sidebarOpen": (value: boolean) => any;
   "update:commentsOpen": (value: boolean) => any;
-  ready: (editor: Editor) => any;
   "update:modelValue": (content: JSONContent) => any;
+  ready: (editor: Editor) => any;
   metadataCreate: (list: string, item: MetadataItem) => any;
   contentError: (error: Error) => any;
-  settingsOpen: (tab?: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onSettingsOpen?: ((tab?: string | undefined) => any) | undefined;
   "onUpdate:sidebarOpen"?: ((value: boolean) => any) | undefined;
   "onUpdate:commentsOpen"?: ((value: boolean) => any) | undefined;
-  onReady?: ((editor: Editor) => any) | undefined;
   "onUpdate:modelValue"?: ((content: JSONContent) => any) | undefined;
+  onReady?: ((editor: Editor) => any) | undefined;
   onMetadataCreate?: ((list: string, item: MetadataItem) => any) | undefined;
   onContentError?: ((error: Error) => any) | undefined;
-  onSettingsOpen?: ((tab?: string | undefined) => any) | undefined;
 }>, {
   editable: boolean;
   settingsUi: "internal" | "external";

package/dist/vue/components/EditorSurface.vue.d.ts

@@ -43,21 +43,21 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
   settingsOpen: import("vue").Ref<boolean, boolean>;
   settingsTab: import("vue").Ref<string | undefined, string | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  settingsOpen: (tab?: string | undefined) => any;
   "update:sidebarOpen": (value: boolean) => any;
   "update:commentsOpen": (value: boolean) => any;
-  ready: (editor: Editor) => any;
   "update:modelValue": (content: JSONContent) => any;
+  ready: (editor: Editor) => any;
   metadataCreate: (list: string, item: MetadataItem) => any;
   contentError: (error: Error) => any;
-  settingsOpen: (tab?: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onSettingsOpen?: ((tab?: string | undefined) => any) | undefined;
   "onUpdate:sidebarOpen"?: ((value: boolean) => any) | undefined;
   "onUpdate:commentsOpen"?: ((value: boolean) => any) | undefined;
-  onReady?: ((editor: Editor) => any) | undefined;
   "onUpdate:modelValue"?: ((content: JSONContent) => any) | undefined;
+  onReady?: ((editor: Editor) => any) | undefined;
   onMetadataCreate?: ((list: string, item: MetadataItem) => any) | undefined;
   onContentError?: ((error: Error) => any) | undefined;
-  onSettingsOpen?: ((tab?: string | undefined) => any) | undefined;
 }>, {
   editable: boolean;
   settingsUi: "internal" | "external";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecsplico/editor",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "type": "module",
   "description": "Vue and React editor library on TipTap v3 (Vue: Nuxt UI; React: shadcn/ui): framework-free features with Vue and React bindings, simple and advanced presets, tree-shakeable entries. Built ESM with type declarations.",
   "license": "MIT",
@@ -184,6 +184,11 @@
       "types": "./dist/features/image-studio/vue.d.ts",
       "import": "./dist/features/image-studio/vue.js"
     },
+    "./image-studio/react": {
+      "skaile-source": "./src/features/image-studio/react.ts",
+      "types": "./dist/features/image-studio/react.d.ts",
+      "import": "./dist/features/image-studio/react.js"
+    },
     "./image-studio/schema": {
       "skaile-source": "./src/features/image-studio/schema.ts",
       "types": "./dist/features/image-studio/schema.d.ts",