@casualoffice/sheets 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(src_exports, {
   CasualSheets: () => CasualSheets,
   CasualSheetsIframe: () => CasualSheetsIframe,
   DrawnSignaturePad: () => DrawnSignaturePad,
+  EmbedHostTransport: () => EmbedHostTransport,
   EmbedTransport: () => EmbedTransport,
   SigningPane: () => SigningPane,
   SigningProvider: () => SigningProvider,
@@ -775,6 +776,18 @@ var EmbedTransport = class {
   async requestSave(req, timeoutMs = 3e4) {
     return this.request("casual.save.request", req, timeoutMs, [req.bytes]);
   }
+  /** Editor → Host: the user asked to save (Ctrl/Cmd+S or a host save
+   *  command). Fire-and-forget snapshot notification — the lightweight
+   *  mirror of the React `onSave` hook. The host persists however it
+   *  likes; no response is awaited. */
+  sendSaveNotify(data) {
+    this.post("casual.save.notify", data);
+  }
+  /** Editor → Host: the editor is unmounting. Carries the final snapshot
+   *  so the host can persist on exit. Mirror of the React `onExit` hook. */
+  sendExit(data) {
+    this.post("casual.exit", data);
+  }
   /** Editor → Host: selection moved. Fire-and-forget. */
   sendSelectionChanged(data) {
     this.post("casual.selection.changed", data);
@@ -917,6 +930,159 @@ function newRequestId() {
   return Math.random().toString(16).slice(2, 10);
 }
 
+// src/embed/EmbedHostTransport.ts
+var EmbedHostTransport = class {
+  constructor(opts) {
+    __publicField(this, "opts");
+    __publicField(this, "handlers", {});
+    __publicField(this, "boundOnMessage");
+    __publicField(this, "destroyed", false);
+    this.opts = opts;
+    this.boundOnMessage = this.onMessage.bind(this);
+    const target = opts.hostWindow ?? window;
+    target.addEventListener("message", this.boundOnMessage);
+  }
+  on(handlers) {
+    this.handlers = { ...this.handlers, ...handlers };
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    const target = this.opts.hostWindow ?? window;
+    target.removeEventListener("message", this.boundOnMessage);
+  }
+  sendHostHello(data) {
+    this.post("casual.hello", data);
+  }
+  sendSetViewMode(data) {
+    this.post("casual.command.set.viewmode", data);
+  }
+  sendSetReadOnly(data) {
+    this.post("casual.command.set.readonly", data);
+  }
+  sendSetTheme(data) {
+    this.post("casual.command.set.theme", data);
+  }
+  sendSetLocale(data) {
+    this.post("casual.command.set.locale", data);
+  }
+  sendCommandSave() {
+    this.post("casual.command.save", null);
+  }
+  sendCommandFocus() {
+    this.post("casual.command.focus", null);
+  }
+  /** Host → Editor: run a formatting / navigation command (bold,
+   *  italic, undo, …) against the active selection. v0.6+. */
+  sendCommandExecute(data) {
+    this.post("casual.command.execute", data);
+  }
+  sendSignatureRequest(id, data) {
+    this.post("casual.signature.request", data, id);
+  }
+  sendSignatureCancel(data) {
+    this.post("casual.signature.cancel", data);
+  }
+  onMessage(ev) {
+    if (this.destroyed) return;
+    if (ev.origin !== this.opts.embedOrigin) return;
+    if (ev.source !== this.opts.iframeWindow) return;
+    if (!isCasualEnvelope(ev.data)) return;
+    if (ev.data.app !== this.opts.app) return;
+    void this.dispatch(ev.data);
+  }
+  async dispatch(env) {
+    switch (env.type) {
+      case "casual.ready":
+        this.handlers.onEditorReady?.(env.data);
+        return;
+      case "casual.load.request": {
+        if (!this.handlers.onLoadRequest) return;
+        const id = env.id ?? "";
+        try {
+          const resp = await this.handlers.onLoadRequest(env.data);
+          const transfer = resp.ok ? [resp.bytes] : [];
+          this.post("casual.load.response", resp, id, transfer);
+        } catch (err) {
+          this.post(
+            "casual.load.response",
+            {
+              ok: false,
+              code: "host_error",
+              message: err instanceof Error ? err.message : String(err)
+            },
+            id
+          );
+        }
+        return;
+      }
+      case "casual.save.request": {
+        if (!this.handlers.onSaveRequest) return;
+        const id = env.id ?? "";
+        try {
+          const resp = await this.handlers.onSaveRequest(env.data);
+          this.post("casual.save.response", resp, id);
+        } catch (err) {
+          this.post(
+            "casual.save.response",
+            {
+              ok: false,
+              code: "host_error",
+              message: err instanceof Error ? err.message : String(err)
+            },
+            id
+          );
+        }
+        return;
+      }
+      case "casual.save.notify":
+        this.handlers.onSaveNotify?.(env.data);
+        return;
+      case "casual.exit":
+        this.handlers.onExit?.(env.data);
+        return;
+      case "casual.selection.changed":
+        this.handlers.onSelectionChanged?.(env.data);
+        return;
+      case "casual.selection.format-state":
+        this.handlers.onSelectionFormatState?.(env.data);
+        return;
+      case "casual.telemetry.event":
+        this.handlers.onTelemetry?.(env.data);
+        return;
+      case "casual.signature.field.signed":
+        this.handlers.onSignatureFieldSigned?.(env.data);
+        return;
+      case "casual.signature.complete":
+        this.handlers.onSignatureComplete?.(env.data);
+        return;
+      case "casual.signature.cancel":
+        this.handlers.onSignatureCancel?.(env.data);
+        return;
+      case "casual.signature.request.ack":
+        return;
+      case "casual.error":
+        this.handlers.onError?.(env.data);
+        return;
+      default:
+        return;
+    }
+  }
+  post(type, data, id, transfer) {
+    const env = {
+      type,
+      app: this.opts.app,
+      v: 1,
+      data,
+      ...id ? { id } : {}
+    };
+    const send = this.opts.iframeWindow.postMessage.bind(
+      this.opts.iframeWindow
+    );
+    send(env, this.opts.embedOrigin, transfer);
+  }
+};
+
 // src/sheets/CasualSheets.tsx
 var import_react4 = require("react");
 var import_core2 = require("@univerjs/core");
@@ -1147,6 +1313,12 @@ function snapshotHasHyperlinks(snapshot) {
 
 // src/sheets/CasualSheets.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChromeTop = (0, import_react4.lazy)(
+  () => import("@casualoffice/sheets/chrome").then((m) => ({ default: m.ChromeTop }))
+);
+var ChromeBottom = (0, import_react4.lazy)(
+  () => import("@casualoffice/sheets/chrome").then((m) => ({ default: m.ChromeBottom }))
+);
 var DEFAULT_STYLE = {
   width: "100%",
   height: "100%",
@@ -1163,13 +1335,18 @@ function CasualSheets({
   onReady,
   onChange,
   onChangeDebounceMs = 400,
+  onSave,
+  onExit,
   lazyPlugins = true,
+  onBeforeCreateUnit,
+  formula,
   locale = import_core2.LocaleType.EN_US,
   locales,
   logLevel = import_core2.LogLevel.WARN,
   ui,
   theme = import_themes.defaultTheme,
   appearance = "light",
+  chrome = "none",
   style,
   className,
   testId = "casual-sheets"
@@ -1178,7 +1355,12 @@ function CasualSheets({
   const onChangeRef = (0, import_react4.useRef)(onChange);
   onChangeRef.current = onChange;
   const hasOnChange = (0, import_react4.useRef)(!!onChange).current;
+  const onSaveRef = (0, import_react4.useRef)(onSave);
+  onSaveRef.current = onSave;
+  const onExitRef = (0, import_react4.useRef)(onExit);
+  onExitRef.current = onExit;
   const apiRef = (0, import_react4.useRef)(null);
+  const [chromeApi, setChromeApi] = (0, import_react4.useState)(null);
   (0, import_react4.useEffect)(() => {
     const container = hostRef.current;
     if (!container) return;
@@ -1189,22 +1371,38 @@ function CasualSheets({
       logLevel
     });
     const uiOpts = { ...DEFAULT_UI, ...ui, container };
-    univer.registerPlugin(import_engine_render.UniverRenderEnginePlugin);
-    univer.registerPlugin(import_engine_formula.UniverFormulaEnginePlugin);
-    univer.registerPlugin(import_ui.UniverUIPlugin, uiOpts);
-    univer.registerPlugin(import_docs.UniverDocsPlugin);
-    univer.registerPlugin(import_docs_ui.UniverDocsUIPlugin);
-    univer.registerPlugin(import_sheets.UniverSheetsPlugin);
-    univer.registerPlugin(import_sheets_ui.UniverSheetsUIPlugin);
-    univer.registerPlugin(import_sheets_formula.UniverSheetsFormulaPlugin);
-    univer.registerPlugin(import_sheets_formula_ui.UniverSheetsFormulaUIPlugin);
-    univer.registerPlugin(import_sheets_numfmt.UniverSheetsNumfmtPlugin);
-    univer.registerPlugin(import_sheets_numfmt_ui.UniverSheetsNumfmtUIPlugin);
-    if (lazyPlugins) setUniverForLazyLoad(univer);
+    const offMain = !!formula?.worker;
     let cancelled = false;
     let changeTimer = null;
     let changeSub;
     void (async () => {
+      let RPCMainThreadPlugin = null;
+      if (offMain && formula?.worker) {
+        RPCMainThreadPlugin = (await import("@univerjs/rpc")).UniverRPCMainThreadPlugin;
+        if (cancelled) return;
+      }
+      univer.registerPlugin(import_engine_render.UniverRenderEnginePlugin);
+      univer.registerPlugin(
+        import_engine_formula.UniverFormulaEnginePlugin,
+        offMain ? { notExecuteFormula: true } : void 0
+      );
+      if (RPCMainThreadPlugin && formula?.worker) {
+        univer.registerPlugin(RPCMainThreadPlugin, { workerURL: formula.worker });
+      }
+      univer.registerPlugin(import_ui.UniverUIPlugin, uiOpts);
+      univer.registerPlugin(import_docs.UniverDocsPlugin);
+      univer.registerPlugin(import_docs_ui.UniverDocsUIPlugin);
+      univer.registerPlugin(import_sheets.UniverSheetsPlugin, offMain ? { notExecuteFormula: true } : void 0);
+      univer.registerPlugin(import_sheets_ui.UniverSheetsUIPlugin);
+      univer.registerPlugin(
+        import_sheets_formula.UniverSheetsFormulaPlugin,
+        offMain ? { notExecuteFormula: true, initialFormulaComputing: import_sheets_formula.CalculationMode.NO_CALCULATION } : void 0
+      );
+      univer.registerPlugin(import_sheets_formula_ui.UniverSheetsFormulaUIPlugin);
+      univer.registerPlugin(import_sheets_numfmt.UniverSheetsNumfmtPlugin);
+      univer.registerPlugin(import_sheets_numfmt_ui.UniverSheetsNumfmtUIPlugin);
+      if (lazyPlugins) setUniverForLazyLoad(univer);
+      onBeforeCreateUnit?.(univer);
       if (lazyPlugins) {
         await eagerLoadForSnapshot(univer, initialData);
         if (cancelled) return;
@@ -1212,6 +1410,7 @@ function CasualSheets({
       univer.createUnit(import_core2.UniverInstanceType.UNIVER_SHEET, initialData);
       const api = createCasualSheetsAPI(import_facade2.FUniver.newAPI(univer));
       apiRef.current = api;
+      if (!cancelled && chrome !== "none") setChromeApi(api);
       applyAppearance(api, container, appearance);
       onReady?.(api);
       if (hasOnChange) {
@@ -1232,7 +1431,12 @@ function CasualSheets({
       cancelled = true;
       if (changeTimer) clearTimeout(changeTimer);
       changeSub?.dispose();
+      if (onExitRef.current) {
+        const snap = apiRef.current?.getSnapshot();
+        if (snap) onExitRef.current(snap);
+      }
       apiRef.current = null;
+      setChromeApi(null);
       if (lazyPlugins) setUniverForLazyLoad(null);
       const toDispose = univer;
       queueMicrotask(() => toDispose.dispose());
@@ -1244,13 +1448,55 @@ function CasualSheets({
     if (!api || !container) return;
     applyAppearance(api, container, appearance);
   }, [appearance]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const onKeyDownCapture = (e) => {
+    if ((e.metaKey || e.ctrlKey) && (e.key === "s" || e.key === "S")) {
+      e.preventDefault();
+      const snap = apiRef.current?.getSnapshot();
+      if (snap) onSaveRef.current?.(snap);
+    }
+  };
+  if (chrome === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        ref: hostRef,
+        onKeyDownCapture,
+        style: { ...DEFAULT_STYLE, ...style },
+        className,
+        "data-testid": testId
+      }
+    );
+  }
+  const dark = appearance === "dark";
+  const chromeVars = {
+    "--cs-chrome-bg": dark ? "#2a2e35" : "#eef1f5",
+    "--cs-chrome-fg": dark ? "#e6e6e6" : "#201f1e",
+    "--cs-chrome-muted": dark ? "#b0b3ba" : "#605e5c",
+    "--cs-chrome-border": dark ? "#32363d" : "#e6e9ee",
+    "--cs-chrome-input-bg": dark ? "#23262c" : "#ffffff",
+    "--cs-chrome-hover": dark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
+    // accent (design-system #0e7490) for active toggle states.
+    "--cs-chrome-active": dark ? "rgba(21,151,186,0.22)" : "#e6f3f7",
+    "--cs-chrome-active-fg": dark ? "#7fd3e6" : "#0e7490"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
-      ref: hostRef,
-      style: { ...DEFAULT_STYLE, ...style },
       className,
-      "data-testid": testId
+      "data-testid": testId,
+      onKeyDownCapture,
+      style: {
+        ...DEFAULT_STYLE,
+        ...chromeVars,
+        ...style,
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChromeTop, { api: chromeApi }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: hostRef, style: { flex: "1 1 auto", minHeight: 0, position: "relative" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChromeBottom, { api: chromeApi }) })
+      ]
     }
   );
 }
@@ -1267,155 +1513,6 @@ function applyAppearance(api, container, appearance) {
 
 // src/sheets/CasualSheetsIframe.tsx
 var import_react5 = require("react");
-
-// src/embed/EmbedHostTransport.ts
-var EmbedHostTransport = class {
-  constructor(opts) {
-    __publicField(this, "opts");
-    __publicField(this, "handlers", {});
-    __publicField(this, "boundOnMessage");
-    __publicField(this, "destroyed", false);
-    this.opts = opts;
-    this.boundOnMessage = this.onMessage.bind(this);
-    const target = opts.hostWindow ?? window;
-    target.addEventListener("message", this.boundOnMessage);
-  }
-  on(handlers) {
-    this.handlers = { ...this.handlers, ...handlers };
-  }
-  destroy() {
-    if (this.destroyed) return;
-    this.destroyed = true;
-    const target = this.opts.hostWindow ?? window;
-    target.removeEventListener("message", this.boundOnMessage);
-  }
-  sendHostHello(data) {
-    this.post("casual.hello", data);
-  }
-  sendSetViewMode(data) {
-    this.post("casual.command.set.viewmode", data);
-  }
-  sendSetReadOnly(data) {
-    this.post("casual.command.set.readonly", data);
-  }
-  sendSetTheme(data) {
-    this.post("casual.command.set.theme", data);
-  }
-  sendSetLocale(data) {
-    this.post("casual.command.set.locale", data);
-  }
-  sendCommandSave() {
-    this.post("casual.command.save", null);
-  }
-  sendCommandFocus() {
-    this.post("casual.command.focus", null);
-  }
-  /** Host → Editor: run a formatting / navigation command (bold,
-   *  italic, undo, …) against the active selection. v0.6+. */
-  sendCommandExecute(data) {
-    this.post("casual.command.execute", data);
-  }
-  sendSignatureRequest(id, data) {
-    this.post("casual.signature.request", data, id);
-  }
-  sendSignatureCancel(data) {
-    this.post("casual.signature.cancel", data);
-  }
-  onMessage(ev) {
-    if (this.destroyed) return;
-    if (ev.origin !== this.opts.embedOrigin) return;
-    if (ev.source !== this.opts.iframeWindow) return;
-    if (!isCasualEnvelope(ev.data)) return;
-    if (ev.data.app !== this.opts.app) return;
-    void this.dispatch(ev.data);
-  }
-  async dispatch(env) {
-    switch (env.type) {
-      case "casual.ready":
-        this.handlers.onEditorReady?.(env.data);
-        return;
-      case "casual.load.request": {
-        if (!this.handlers.onLoadRequest) return;
-        const id = env.id ?? "";
-        try {
-          const resp = await this.handlers.onLoadRequest(env.data);
-          const transfer = resp.ok ? [resp.bytes] : [];
-          this.post("casual.load.response", resp, id, transfer);
-        } catch (err) {
-          this.post(
-            "casual.load.response",
-            {
-              ok: false,
-              code: "host_error",
-              message: err instanceof Error ? err.message : String(err)
-            },
-            id
-          );
-        }
-        return;
-      }
-      case "casual.save.request": {
-        if (!this.handlers.onSaveRequest) return;
-        const id = env.id ?? "";
-        try {
-          const resp = await this.handlers.onSaveRequest(env.data);
-          this.post("casual.save.response", resp, id);
-        } catch (err) {
-          this.post(
-            "casual.save.response",
-            {
-              ok: false,
-              code: "host_error",
-              message: err instanceof Error ? err.message : String(err)
-            },
-            id
-          );
-        }
-        return;
-      }
-      case "casual.selection.changed":
-        this.handlers.onSelectionChanged?.(env.data);
-        return;
-      case "casual.selection.format-state":
-        this.handlers.onSelectionFormatState?.(env.data);
-        return;
-      case "casual.telemetry.event":
-        this.handlers.onTelemetry?.(env.data);
-        return;
-      case "casual.signature.field.signed":
-        this.handlers.onSignatureFieldSigned?.(env.data);
-        return;
-      case "casual.signature.complete":
-        this.handlers.onSignatureComplete?.(env.data);
-        return;
-      case "casual.signature.cancel":
-        this.handlers.onSignatureCancel?.(env.data);
-        return;
-      case "casual.signature.request.ack":
-        return;
-      case "casual.error":
-        this.handlers.onError?.(env.data);
-        return;
-      default:
-        return;
-    }
-  }
-  post(type, data, id, transfer) {
-    const env = {
-      type,
-      app: this.opts.app,
-      v: 1,
-      data,
-      ...id ? { id } : {}
-    };
-    const send = this.opts.iframeWindow.postMessage.bind(
-      this.opts.iframeWindow
-    );
-    send(env, this.opts.embedOrigin, transfer);
-  }
-};
-
-// src/sheets/CasualSheetsIframe.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var DEFAULT_STYLE2 = {
   width: "100%",