@june-ai/june-ui 0.2.9 → 0.2.11

package/dist/{chunk-JSRO5CRO.js → chunk-2TBT4VRQ.js}

@@ -141,7 +141,7 @@ function OpenUIDevtoolsGate() {
 
 // src/engine/renderer/june-renderer.tsx
 import { Renderer } from "@openuidev/react-lang";
-import { Fragment, useCallback as useCallback2, useMemo as useMemo3, useRef as useRef2 } from "react";
+import { Fragment, useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2 } from "react";
 
 // src/core/context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -224,9 +224,16 @@ function createActionHandler(options) {
   };
 }
 
+// src/features/document-editor/document-bridge.tsx
+import { useMemo as useMemo2 } from "react";
+
 // src/features/document-editor/document-context.ts
 import { createContext as createContext3, useContext as useContext3, useSyncExternalStore } from "react";
 var JuneDocumentContext = createContext3({});
+var DocumentEditorConfigContext = createContext3({});
+function useDocumentEditorConfig() {
+  return useContext3(DocumentEditorConfigContext);
+}
 function useDocumentOptions() {
   return useContext3(JuneDocumentContext);
 }
@@ -608,13 +615,20 @@ function useDocumentBridge(options) {
 
 // src/features/document-editor/document-bridge.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-function DocumentBridge({ children, ...options }) {
+function DocumentBridge({
+  children,
+  documentEditor,
+  ...options
+}) {
   const value = useDocumentBridge(options);
-  return /* @__PURE__ */ jsx2(JuneDocumentContext.Provider, { value, children });
+  const presentation = documentEditor?.presentation;
+  const width = documentEditor?.width;
+  const config = useMemo2(() => ({ presentation, width }), [presentation, width]);
+  return /* @__PURE__ */ jsx2(JuneDocumentContext.Provider, { value, children: /* @__PURE__ */ jsx2(DocumentEditorConfigContext.Provider, { value: config, children }) });
 }
 
 // src/themes/theme-provider.tsx
-import { useMemo as useMemo2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useMemo as useMemo3, useSyncExternalStore as useSyncExternalStore2 } from "react";
 
 // src/themes/dark.ts
 var darkTheme = {
@@ -675,7 +689,7 @@ function useResolvedTheme(mode) {
 function JuneThemeProvider({ mode, vars, className, style, children }) {
   const explicit = mode !== void 0;
   const resolved = useResolvedTheme(mode ?? "system");
-  const mergedStyle = useMemo2(() => {
+  const mergedStyle = useMemo3(() => {
     const own = resolveThemeVars(vars, resolved);
     if (!explicit && !own && !style) return void 0;
     const base = explicit ? resolved === "dark" ? darkTheme : lightTheme : void 0;
@@ -686,7 +700,7 @@ function JuneThemeProvider({ mode, vars, className, style, children }) {
       ...style
     };
   }, [explicit, resolved, vars, style]);
-  const context = useMemo2(() => ({ mode: mode ?? "system", theme: resolved }), [mode, resolved]);
+  const context = useMemo3(() => ({ mode: mode ?? "system", theme: resolved }), [mode, resolved]);
   return /* @__PURE__ */ jsx3(JuneContext.Provider, { value: context, children: /* @__PURE__ */ jsx3(
     "div",
     {
@@ -1056,7 +1070,7 @@ var STATEMENT_START = /^\$?[A-Za-z_]\w*\s*=/;
 var PENDING_IDENTIFIER = /^\s*\$?[A-Za-z_]\w*\s*$/;
 var FENCE = /^(`{3,})\s*([\w-]*)/;
 var OPENUI_FENCE_LANGS = /* @__PURE__ */ new Set(["", "openui", "openui-lang", "openuilang"]);
-function scan(line, state) {
+function scan(line, state, preserveQuote = false) {
   for (let i = 0; i < line.length; i++) {
     const ch = line[i];
     if (state.quote) {
@@ -1070,7 +1084,95 @@ function scan(line, state) {
       state.depth = Math.max(0, state.depth - 1);
     }
   }
-  state.quote = null;
+  if (!preserveQuote) state.quote = null;
+}
+function quoteClosesLater(lines, from, state) {
+  const probe = { depth: state.depth, quote: state.quote };
+  for (let i = from; i < lines.length; i++) {
+    const line = lines[i];
+    if (probe.depth === 0 && STATEMENT_START.test(line.trim())) return false;
+    scan(line, probe, true);
+    if (!probe.quote) return true;
+  }
+  return false;
+}
+function decodeLangString(raw) {
+  let out = "";
+  for (let i = 0; i < raw.length; i++) {
+    const ch = raw[i];
+    if (ch === "\\" && i + 1 < raw.length) {
+      const next = raw[i + 1];
+      out += next === "n" ? "\n" : next === "t" ? "	" : next === "r" ? "\r" : next === "b" ? "\b" : next === "f" ? "\f" : next;
+      i++;
+      continue;
+    }
+    out += ch;
+  }
+  return out.replace(/\r/g, "");
+}
+function foldMultilineStrings(source) {
+  let out = "";
+  let i = 0;
+  while (i < source.length) {
+    if (source.startsWith('"""', i)) {
+      const end = source.indexOf('"""', i + 3);
+      if (end < 0) {
+        const nl = source.indexOf("\n", i);
+        if (nl < 0) {
+          out += source.slice(i);
+          break;
+        }
+        out += source.slice(i, nl + 1);
+        i = nl + 1;
+        continue;
+      }
+      out += JSON.stringify(source.slice(i + 3, end).replace(/\r/g, ""));
+      i = end + 3;
+      continue;
+    }
+    if (source[i] !== '"') {
+      out += source[i];
+      i++;
+      continue;
+    }
+    let j = i + 1;
+    let closed = false;
+    let hasNewline = false;
+    while (j < source.length) {
+      const ch = source[j];
+      if (ch === "\\") {
+        j += 2;
+        continue;
+      }
+      if (ch === "\n") {
+        if (STATEMENT_START.test(source.slice(j + 1))) break;
+        hasNewline = true;
+      }
+      if (ch === '"') {
+        closed = true;
+        break;
+      }
+      j++;
+    }
+    if (!closed) {
+      const nl = source.indexOf("\n", i);
+      if (nl < 0) {
+        out += source.slice(i);
+        break;
+      }
+      out += source.slice(i, nl + 1);
+      i = nl + 1;
+      continue;
+    }
+    if (!hasNewline) {
+      out += source.slice(i, j + 1);
+      i = j + 1;
+      continue;
+    }
+    out += JSON.stringify(decodeLangString(source.slice(i + 1, j)));
+    i = j + 1;
+  }
+  return out;
 }
 function splitResponse(source, options = {}) {
   const markdown = options.markdown === true;
@@ -1092,8 +1194,15 @@ function splitResponse(source, options = {}) {
     text = [];
     if (joined) (seenUi ? after : before).push(joined);
   };
-  for (const line of input.split(/\r?\n/)) {
+  const lines = input.split(/\r?\n/);
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index];
     const trimmed = line.trim();
+    if (state.quote) {
+      ui.push(line);
+      scan(line, state, true);
+      continue;
+    }
     if (codeFence !== null) {
       text.push(line);
       if (trimmed.startsWith(codeFence)) {
@@ -1122,7 +1231,8 @@ function splitResponse(source, options = {}) {
       flushText();
       seenUi = true;
       ui.push(line);
-      scan(line, state);
+      scan(line, state, true);
+      if (state.quote && !quoteClosesLater(lines, index + 1, state)) state.quote = null;
       continue;
     }
     if (trimmed === "") {
@@ -1134,7 +1244,7 @@ function splitResponse(source, options = {}) {
   flushText();
   return {
     before,
-    ui: ui.join("\n"),
+    ui: foldMultilineStrings(ui.join("\n")),
     after,
     pure: !sawFence && before.length === 0 && after.length === 0
   };
@@ -1144,7 +1254,7 @@ function splitResponse(source, options = {}) {
 function resolveMixedContent(response, options = {}) {
   const { mixedContent = true, isStreaming = false, repair = true, markdown = false } = options;
   const parts = mixedContent && response ? splitResponse(response, { streaming: isStreaming, markdown }) : null;
-  const raw = parts && !parts.pure ? parts.ui : response;
+  const raw = parts && !parts.pure ? parts.ui : typeof response === "string" ? foldMultilineStrings(response) : response;
   const ui = !repair || !mixedContent || isStreaming || typeof raw !== "string" || raw.length === 0 ? raw : normalizeProgram(raw);
   const before = parts?.before ?? [];
   const after = parts?.after ?? [];
@@ -1224,6 +1334,7 @@ function JuneRenderer(props) {
     onError,
     onJuneError,
     documents,
+    documentEditor,
     onResponseChange,
     responseChangeDelay,
     loadingFallback = null,
@@ -1267,8 +1378,8 @@ function JuneRenderer(props) {
     );
   }, []);
   const handleDocumentError = useCallback2((error) => latest.current.onJuneError?.(error), []);
-  const runtime = useMemo3(() => ({ isStreaming }), [isStreaming]);
-  const content = useMemo3(
+  const runtime = useMemo4(() => ({ isStreaming }), [isStreaming]);
+  const content = useMemo4(
     () => resolveMixedContent(response, { mixedContent, isStreaming, repair, markdown: textFormat === "markdown" }),
     [response, mixedContent, isStreaming, repair, textFormat]
   );
@@ -1280,6 +1391,7 @@ function JuneRenderer(props) {
       DocumentBridge,
       {
         documents,
+        documentEditor,
         response,
         onResponseChange,
         responseChangeDelay,
@@ -1643,7 +1755,7 @@ function defineJuneAction(definition) {
 }
 
 // src/features/streaming/use-june-stream.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo5, useRef as useRef3, useState } from "react";
 
 // src/features/streaming/stream-handler.ts
 function isReadableStream(source) {
@@ -1906,7 +2018,7 @@ function useJuneStream(options = {}) {
     },
     [clearTimer]
   );
-  return useMemo4(
+  return useMemo5(
     () => ({ ...state, start, startFetch, abort, reset }),
     [state, start, startFetch, abort, reset]
   );
@@ -1935,7 +2047,7 @@ function DocumentDraft({ title, words, state }) {
 
 // src/features/document-editor/document-editor.tsx
 import { useEditor } from "@tiptap/react";
-import { useCallback as useCallback4, useEffect as useEffect7, useId, useMemo as useMemo5, useRef as useRef8, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useId, useMemo as useMemo6, useRef as useRef8, useState as useState6 } from "react";
 
 // src/features/document-editor/document-bubble.tsx
 import { useEditorState as useEditorState2 } from "@tiptap/react";
@@ -2115,6 +2227,10 @@ var PATHS = {
     /* @__PURE__ */ jsx8("path", { d: "M18 6 6 18" }),
     /* @__PURE__ */ jsx8("path", { d: "m6 6 12 12" })
   ] }),
+  pencil: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx8("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
+    /* @__PURE__ */ jsx8("path", { d: "m15 5 4 4" })
+  ] }),
   maximize: /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsx8("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
     /* @__PURE__ */ jsx8("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
@@ -3603,15 +3719,15 @@ function DocumentEditorImpl(props) {
     className
   } = props;
   const ctxOptions = useDocumentOptions();
-  const options = useMemo5(() => ({ ...ctxOptions, ...props.options }), [ctxOptions, props.options]);
+  const options = useMemo6(() => ({ ...ctxOptions, ...props.options }), [ctxOptions, props.options]);
   const optionsRef = useRef8(options);
   optionsRef.current = options;
-  const store = useMemo5(() => options.store ?? getDefaultDocumentStore(), [options.store]);
+  const store = useMemo6(() => options.store ?? getDefaultDocumentStore(), [options.store]);
   const instanceId = useId();
   const { theme: contextTheme } = useJuneTheme();
   const resolvedTheme = theme === "auto" ? contextTheme : theme;
   const contentKey = typeof content === "string" ? content : content ? JSON.stringify(content) : "";
-  const parsed = useMemo5(() => {
+  const parsed = useMemo6(() => {
     if (!contentKey) return { json: null, error: null };
     try {
       return { json: parseDocumentContent(contentKey), error: null };
@@ -3663,7 +3779,7 @@ function DocumentEditorImpl(props) {
   );
   const saveRef = useRef8(async () => {
   });
-  const autosave = useMemo5(() => {
+  const autosave = useMemo6(() => {
     const delay = options.autosaveDelay ?? 1500;
     return delay > 0 ? debounce(() => void saveRef.current(), delay) : null;
   }, [options.autosaveDelay]);
@@ -3715,7 +3831,7 @@ function DocumentEditorImpl(props) {
     return () => clearTimeout(t);
   }, [saveState, options.onSave]);
   const [initialJson] = useState6(() => store.get(documentId)?.json ?? parsed.json ?? emptyDoc());
-  const extensions = useMemo5(() => createDocumentExtensions(), []);
+  const extensions = useMemo6(() => createDocumentExtensions(), []);
   const onUpdateRef = useRef8(() => {
   });
   onUpdateRef.current = (json) => {
@@ -3940,9 +4056,186 @@ function DocumentEditorImpl(props) {
   );
 }
 
+// src/features/document-editor/document-preview.tsx
+import { useEffect as useEffect8, useMemo as useMemo7, useState as useState7 } from "react";
+import { createPortal } from "react-dom";
+
+// src/features/document-editor/document-presentation.ts
+function resolveDocumentPresentation(documentPresentation, configured) {
+  if (documentPresentation === "inline" || documentPresentation === "side-panel") return documentPresentation;
+  if (configured === "inline" || configured === "side-panel") return configured;
+  return "inline";
+}
+function documentPanelWidth(width) {
+  if (typeof width === "number" && Number.isFinite(width)) return `${width}px`;
+  if (typeof width === "string" && width.trim()) return width.trim();
+  return void 0;
+}
+
+// src/features/document-editor/document-preview.tsx
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var FORMAT_LABEL = {
+  docx: "Word document",
+  pdf: "PDF",
+  html: "Web page",
+  markdown: "Markdown",
+  txt: "Plain text"
+};
+function DocumentPreview(props) {
+  const { documentId, title = "Untitled document", content, editable = true, exportFormats } = props;
+  const { theme: contextTheme } = useJuneTheme();
+  const resolvedTheme = props.theme && props.theme !== "auto" ? props.theme : contextTheme;
+  const ctxOptions = useDocumentOptions();
+  const editorConfig = useDocumentEditorConfig();
+  const presentation = resolveDocumentPresentation(props.presentation, editorConfig.presentation);
+  const panelWidth = documentPanelWidth(editorConfig.width);
+  const store = useMemo7(() => props.options?.store ?? ctxOptions.store ?? getDefaultDocumentStore(), [props.options?.store, ctxOptions.store]);
+  const storedJson = useDocumentValue(store, documentId, (record) => record?.json);
+  const [open, setOpen] = useState7(false);
+  const [preferStore, setPreferStore] = useState7(false);
+  const [notice, setNotice] = useState7(null);
+  const contentKey = typeof content === "string" ? content : content ? JSON.stringify(content) : "";
+  const options = props.options ?? ctxOptions;
+  useEffect8(() => {
+    setPreferStore(false);
+  }, [contentKey]);
+  const doc = useMemo7(() => {
+    try {
+      const fromContent = contentKey ? parseDocumentContent(contentKey) : null;
+      return preferStore && storedJson ? storedJson : fromContent;
+    } catch {
+      return null;
+    }
+  }, [contentKey, preferStore, storedJson]);
+  const html = useMemo7(() => doc ? docToHtml(doc) : "", [doc]);
+  const formats = (exportFormats ?? [...ALL_EXPORT_FORMATS]).filter((format2) => listDocumentExporters().includes(format2));
+  useEffect8(() => {
+    if (!notice) return;
+    const timer = setTimeout(() => setNotice(null), 2e3);
+    return () => clearTimeout(timer);
+  }, [notice]);
+  useEffect8(() => {
+    if (!open || presentation !== "side-panel" || typeof document === "undefined") return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open, presentation]);
+  const close = () => {
+    setPreferStore(true);
+    setOpen(false);
+  };
+  const handleExport = async (format2) => {
+    if (!doc) return;
+    try {
+      const result = await exportDocument(format2, { documentId, title, json: doc });
+      if (result.blob) downloadResult(result);
+      options.onExport?.({ documentId, format: format2, ...result });
+    } catch (error) {
+      options.onError?.(toJuneError(error, "EXPORT_ERROR"));
+      setNotice("Export failed");
+    }
+  };
+  const handleCopy = async () => {
+    if (!doc) return;
+    setNotice(await copyDocumentToClipboard({ title, json: doc }) ? "Copied" : "Copy failed");
+  };
+  const editor = /* @__PURE__ */ jsx17(
+    DocumentEditorImpl,
+    {
+      documentId: props.documentId,
+      title: props.title,
+      content: props.content,
+      documentType: props.documentType,
+      status: props.status,
+      editable: props.editable,
+      exportFormats: props.exportFormats,
+      theme: props.theme,
+      generating: props.generating,
+      options: props.options
+    }
+  );
+  const closeBar = /* @__PURE__ */ jsx17("div", { className: "june-doc-editor__bar", children: /* @__PURE__ */ jsxs11("button", { type: "button", className: "june-doc__btn june-doc__btn--ghost", "aria-label": "Close document", onClick: close, children: [
+    /* @__PURE__ */ jsx17(Icon, { name: "close", size: 16 }),
+    /* @__PURE__ */ jsx17("span", { children: "Close" })
+  ] }) });
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    !open ? /* @__PURE__ */ jsxs11("section", { className: "june-doc june-doc-card", "data-theme": resolvedTheme, "aria-label": title, children: [
+      /* @__PURE__ */ jsxs11("div", { className: "june-doc-card__bar", children: [
+        /* @__PURE__ */ jsx17("span", { className: "june-doc-card__title", children: title }),
+        /* @__PURE__ */ jsxs11("div", { className: "june-doc-card__actions", children: [
+          notice ? /* @__PURE__ */ jsx17("span", { className: "june-doc-card__notice", children: notice }) : null,
+          /* @__PURE__ */ jsx17(
+            Dropdown,
+            {
+              align: "end",
+              className: "june-doc__menu",
+              trigger: ({ open: menuOpen, toggle }) => /* @__PURE__ */ jsxs11("button", { type: "button", className: "june-doc__btn june-doc__btn--ghost", "aria-label": "Download", "aria-haspopup": "menu", "aria-expanded": menuOpen, onClick: toggle, children: [
+                /* @__PURE__ */ jsx17(Icon, { name: "download", size: 16 }),
+                /* @__PURE__ */ jsx17("span", { children: "Download" })
+              ] }),
+              children: (dismiss) => /* @__PURE__ */ jsx17("div", { role: "menu", "aria-label": "Download options", children: formats.map((format2) => /* @__PURE__ */ jsx17(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: "june-doc__menu-item",
+                  onClick: () => {
+                    dismiss();
+                    void handleExport(format2);
+                  },
+                  children: /* @__PURE__ */ jsx17("span", { className: "june-doc__menu-label", children: FORMAT_LABEL[format2] ?? format2.toUpperCase() })
+                },
+                format2
+              )) })
+            }
+          ),
+          /* @__PURE__ */ jsx17("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Copy document", title: "Copy", onClick: () => void handleCopy(), children: /* @__PURE__ */ jsx17(Icon, { name: "copy", size: 16 }) }),
+          editable ? /* @__PURE__ */ jsx17("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Edit document", title: "Edit", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx17(Icon, { name: "pencil", size: 16 }) }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx17("div", { className: "june-doc-card__canvas", children: /* @__PURE__ */ jsx17("div", { className: "june-doc-card__sheet", children: /* @__PURE__ */ jsx17("div", { className: "june-doc__prose", dangerouslySetInnerHTML: { __html: html } }) }) })
+    ] }) : null,
+    open && presentation === "inline" ? /* @__PURE__ */ jsxs11("section", { className: "june-doc june-doc-inline", "data-theme": resolvedTheme, "aria-label": title, onKeyDown: (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      if (event.currentTarget.querySelector(".june-doc--fullscreen")) return;
+      close();
+    }, children: [
+      closeBar,
+      editor
+    ] }) : null,
+    open && presentation === "side-panel" && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx17("div", { className: "june-doc-modal", "data-theme": resolvedTheme, onMouseDown: close, children: /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          className: "june-doc june-doc-modal__panel",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          tabIndex: -1,
+          "data-theme": resolvedTheme,
+          style: panelWidth ? { width: panelWidth, maxWidth: "100vw" } : void 0,
+          onMouseDown: (event) => event.stopPropagation(),
+          onKeyDown: (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented) return;
+            if (event.currentTarget.querySelector(".june-doc--fullscreen")) return;
+            close();
+          },
+          children: [
+            closeBar,
+            /* @__PURE__ */ jsx17("div", { className: "june-doc-modal__body", children: editor })
+          ]
+        }
+      ) }),
+      document.body
+    ) : null
+  ] });
+}
+
 // src/features/document-editor/document-component.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var DOCUMENT_COMPONENT_DESCRIPTION = 'Custom component. An editable document. DocumentEditor(documentId, title, content, documentType?, status?, editable?, exportFormats?). Place it in the root container (Card or Stack). "content" is the full document body as one Markdown string. Reuse documentId when revising the same document. Use it only when the user asks to create or revise a document.';
+import { jsx as jsx18 } from "react/jsx-runtime";
+var DOCUMENT_COMPONENT_DESCRIPTION = 'Custom component. An editable document. DocumentEditor(documentId, title, content, documentType?, status?, editable?, exportFormats?, presentation?). Place it in the root container (Card or Stack). "content" is the full document body as one Markdown string. Reuse documentId when revising the same document. Use it only when the user asks to create or revise a document. presentation is "inline" or "side-panel"; omit it to use the app default.';
 var documentProps = z.object({
   documentId: z.string().describe("Stable id. Reuse it when revising the same document."),
   title: z.string().describe("Document title. Do not repeat it as a heading in content."),
@@ -3950,28 +4243,30 @@ var documentProps = z.object({
   documentType: z.string().optional().describe("Kind of document, such as proposal, contract or invoice."),
   status: z.string().optional().describe('Use "draft" for generated documents.'),
   editable: z.boolean().optional().describe("Whether the user can edit. Defaults to true."),
-  exportFormats: z.array(z.string()).optional().describe("Export formats to offer, such as html, markdown, docx.")
+  exportFormats: z.array(z.string()).optional().describe("Export formats to offer, such as html, markdown, docx."),
+  presentation: z.enum(["inline", "side-panel"]).optional().describe('Where Edit opens the editor: "inline" in the chat, or "side-panel". Omit to use the app default.')
 });
 function DocumentEditor(props) {
   const { isStreaming } = useJuneRuntime();
   if (props.generating || isStreaming) {
-    return /* @__PURE__ */ jsx17(DocumentDraft, { title: props.title, state: "drafting" });
+    return /* @__PURE__ */ jsx18(DocumentDraft, { title: props.title, state: "drafting" });
   }
-  return /* @__PURE__ */ jsx17(DocumentEditorImpl, { ...props });
+  return /* @__PURE__ */ jsx18(DocumentEditorImpl, { ...props });
 }
 function OpenUIDocument({ props }) {
-  return /* @__PURE__ */ jsx17(
-    DocumentEditor,
-    {
-      documentId: props.documentId,
-      title: props.title,
-      content: props.content,
-      documentType: props.documentType,
-      status: props.status,
-      editable: props.editable,
-      exportFormats: props.exportFormats
-    }
-  );
+  const { isStreaming } = useJuneRuntime();
+  const shared = {
+    documentId: props.documentId,
+    title: props.title,
+    content: props.content,
+    documentType: props.documentType,
+    status: props.status,
+    editable: props.editable,
+    exportFormats: props.exportFormats,
+    presentation: props.presentation
+  };
+  if (isStreaming) return /* @__PURE__ */ jsx18(DocumentDraft, { title: props.title, state: "drafting" });
+  return /* @__PURE__ */ jsx18(DocumentPreview, { ...shared });
 }
 var JuneDocumentEditorComponent = defineComponent3({
   name: "DocumentEditor",
@@ -4009,7 +4304,7 @@ function getDocumentEditorRules(options = {}) {
   return [
     `WHEN TO USE ${name}: use it only when the user asks you to create, draft, write, prepare, generate or revise an editable document (${types}, or similar). Put the finished document inside ${name}.`,
     `WHEN NOT TO USE ${name}: for explanations ("explain what an NDA is"), factual answers, comparisons, brainstorming and general questions, answer with normal text and the other components. Never open ${name} for those.`,
-    `${name}(documentId, title, content, documentType?, status?, editable?, exportFormats?): "content" is the whole document body as Markdown inside ONE double-quoted string. Write line breaks as \\n and escape double quotes as \\". Supported Markdown: headings (#, ##, ###), paragraphs, **bold**, *italic*, lists, > quotes, [links](https://...), and tables.`,
+    `${name}(documentId, title, content, documentType?, status?, editable?, exportFormats?, presentation?): "content" is the whole document body as Markdown inside ONE double-quoted string. Write line breaks as \\n and escape double quotes as \\". Supported Markdown: headings (#, ##, ###), paragraphs, **bold**, *italic*, lists, > quotes, [links](https://...), and tables. presentation is optional: "inline" or "side-panel". Omit it to use the app default.`,
     `Do not repeat the title as a heading inside "content"; the title is shown separately. Structure the document with headings, short paragraphs and tables where useful. Keep a professional tone.`,
     `EDITING: when the user asks to change an existing document (add a section, rewrite a part, change the title), write ${name} again with the SAME documentId and the COMPLETE updated content, starting from the current document text you were given. Copy every unchanged section exactly as it was. Change only what was requested. The app merges your version with the user's own edits.`,
     `If the user asks for a document but leaves out details, write the document anyway and use clear placeholders such as [CLIENT NAME], [DATE], [AMOUNT]. Do not stop to ask unless the request is impossible to interpret.`,
@@ -4044,8 +4339,8 @@ ${docToMarkdown2(r.json)}
 }
 
 // src/features/tool-approval/tool-approval.tsx
-import { useId as useId2, useState as useState7 } from "react";
-import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useId as useId2, useState as useState8 } from "react";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultToolApprovalLabels = {
   approve: "Approve",
   reject: "Reject",
@@ -4083,8 +4378,8 @@ function ToolApproval({
 }) {
   const labels = { ...defaultToolApprovalLabels, ...labelOverrides };
   const options = request.options?.length ? request.options : ["approve", "reject"];
-  const [draft, setDraft] = useState7(null);
-  const [draftError, setDraftError] = useState7(null);
+  const [draft, setDraft] = useState8(null);
+  const [draftError, setDraftError] = useState8(null);
   const titleId = useId2();
   const pending = status === "pending";
   const decide = (decision) => {
@@ -4102,7 +4397,7 @@ function ToolApproval({
     setDraft(null);
     decide({ choice: "edit", editedArguments });
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "section",
     {
       className: className ? `june-approval ${className}` : "june-approval",
@@ -4110,14 +4405,14 @@ function ToolApproval({
       "data-status": status,
       "data-risk": request.risk,
       children: [
-        /* @__PURE__ */ jsxs11("header", { className: "june-approval__header", children: [
-          /* @__PURE__ */ jsx18("strong", { id: titleId, className: "june-approval__tool", children: request.tool }),
-          request.risk && /* @__PURE__ */ jsx18("span", { className: "june-approval__badge", "data-risk": request.risk, children: labels.risk(request.risk) }),
-          request.sideEffect && /* @__PURE__ */ jsx18("span", { className: "june-approval__badge", children: labels.sideEffect[request.sideEffect] })
+        /* @__PURE__ */ jsxs12("header", { className: "june-approval__header", children: [
+          /* @__PURE__ */ jsx19("strong", { id: titleId, className: "june-approval__tool", children: request.tool }),
+          request.risk && /* @__PURE__ */ jsx19("span", { className: "june-approval__badge", "data-risk": request.risk, children: labels.risk(request.risk) }),
+          request.sideEffect && /* @__PURE__ */ jsx19("span", { className: "june-approval__badge", children: labels.sideEffect[request.sideEffect] })
         ] }),
-        request.description && /* @__PURE__ */ jsx18("p", { className: "june-approval__description", children: request.description }),
-        draft !== null ? /* @__PURE__ */ jsxs11("div", { className: "june-approval__edit", children: [
-          /* @__PURE__ */ jsx18(
+        request.description && /* @__PURE__ */ jsx19("p", { className: "june-approval__description", children: request.description }),
+        draft !== null ? /* @__PURE__ */ jsxs12("div", { className: "june-approval__edit", children: [
+          /* @__PURE__ */ jsx19(
             "textarea",
             {
               "aria-label": labels.edit,
@@ -4128,12 +4423,12 @@ function ToolApproval({
               spellCheck: false
             }
           ),
-          draftError && /* @__PURE__ */ jsx18("p", { role: "alert", className: "june-approval__error", children: draftError })
-        ] }) : hasArguments(request.arguments) ? renderArguments ? renderArguments(request.arguments) : /* @__PURE__ */ jsx18("pre", { className: "june-approval__args", children: format(request.arguments) }) : null,
-        pending ? /* @__PURE__ */ jsx18("div", { className: "june-approval__actions", children: draft !== null ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
-          /* @__PURE__ */ jsx18("button", { type: "button", className: "june-approval__button", "data-variant": "primary", onClick: saveEdit, disabled, children: labels.save }),
-          /* @__PURE__ */ jsx18("button", { type: "button", className: "june-approval__button", onClick: () => setDraft(null), disabled, children: labels.cancel })
-        ] }) : options.map((choice) => /* @__PURE__ */ jsx18(
+          draftError && /* @__PURE__ */ jsx19("p", { role: "alert", className: "june-approval__error", children: draftError })
+        ] }) : hasArguments(request.arguments) ? renderArguments ? renderArguments(request.arguments) : /* @__PURE__ */ jsx19("pre", { className: "june-approval__args", children: format(request.arguments) }) : null,
+        pending ? /* @__PURE__ */ jsx19("div", { className: "june-approval__actions", children: draft !== null ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+          /* @__PURE__ */ jsx19("button", { type: "button", className: "june-approval__button", "data-variant": "primary", onClick: saveEdit, disabled, children: labels.save }),
+          /* @__PURE__ */ jsx19("button", { type: "button", className: "june-approval__button", onClick: () => setDraft(null), disabled, children: labels.cancel })
+        ] }) : options.map((choice) => /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -4144,7 +4439,7 @@ function ToolApproval({
             children: labels[choice]
           },
           choice
-        )) }) : /* @__PURE__ */ jsxs11("p", { className: "june-approval__status", role: "status", children: [
+        )) }) : /* @__PURE__ */ jsxs12("p", { className: "june-approval__status", role: "status", children: [
           labels.status[status],
           status === "failed" && error ? `: ${error}` : null
         ] })
@@ -4154,12 +4449,12 @@ function ToolApproval({
 }
 
 // src/features/tool-approval/tool-approval-list.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function ToolApprovalList({ approvals, pendingOnly = false, renderItem, labels, className }) {
   const entries = pendingOnly ? approvals.entries.filter((e) => e.status === "pending") : approvals.entries;
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsx19("div", { className: className ? `june-approval-list ${className}` : "june-approval-list", children: entries.map(
-    (entry) => renderItem ? /* @__PURE__ */ jsx19("div", { children: renderItem(entry, approvals.decide) }, entry.request.id) : /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20("div", { className: className ? `june-approval-list ${className}` : "june-approval-list", children: entries.map(
+    (entry) => renderItem ? /* @__PURE__ */ jsx20("div", { children: renderItem(entry, approvals.decide) }, entry.request.id) : /* @__PURE__ */ jsx20(
       ToolApproval,
       {
         request: entry.request,
@@ -4174,11 +4469,11 @@ function ToolApprovalList({ approvals, pendingOnly = false, renderItem, labels,
 }
 
 // src/features/tool-approval/use-tool-approval.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef9, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef9, useState as useState9 } from "react";
 var counter = 0;
 var nextId = () => `june-approval-${++counter}`;
 function useToolApproval() {
-  const [entries, setEntries] = useState8([]);
+  const [entries, setEntries] = useState9([]);
   const waiters = useRef9(/* @__PURE__ */ new Map());
   const settle = useCallback5((id, decision) => {
     const resolve = waiters.current.get(id);
@@ -4223,15 +4518,15 @@ function useToolApproval() {
     },
     [request]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     const map = waiters.current;
     return () => {
       map.forEach((resolve) => resolve({ choice: "reject" }));
       map.clear();
     };
   }, []);
-  const pending = useMemo6(() => entries.filter((e) => e.status === "pending"), [entries]);
-  return useMemo6(
+  const pending = useMemo8(() => entries.filter((e) => e.status === "pending"), [entries]);
+  return useMemo8(
     () => ({ entries, pending, request, decide, setStatus, dismiss, confirmAction }),
     [entries, pending, request, decide, setStatus, dismiss, confirmAction]
   );
@@ -4335,6 +4630,8 @@ export {
   runAction,
   createActionHandler,
   JuneDocumentContext,
+  DocumentEditorConfigContext,
+  useDocumentEditorConfig,
   useDocumentOptions,
   mergeDocuments,
   createDocumentStore,
@@ -4379,6 +4676,8 @@ export {
   downloadResult,
   copyDocumentToClipboard,
   ALL_EXPORT_FORMATS,
+  resolveDocumentPresentation,
+  documentPanelWidth,
   DOCUMENT_COMPONENT_DESCRIPTION,
   DocumentEditor,
   JuneDocumentEditorComponent,