@schnsrw/casual-sheets 0.2.0 → 0.3.0

package/dist/sheets.js

@@ -0,0 +1,89 @@
+// src/sheets/CasualSheets.tsx
+import { useEffect, useRef } from "react";
+import {
+  LocaleType,
+  LogLevel,
+  Univer,
+  UniverInstanceType
+} from "@univerjs/core";
+import { FUniver } from "@univerjs/core/facade";
+import { defaultTheme } from "@univerjs/themes";
+import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
+import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
+import { UniverUIPlugin } from "@univerjs/ui";
+import { UniverDocsPlugin } from "@univerjs/docs";
+import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
+import { UniverSheetsPlugin } from "@univerjs/sheets";
+import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
+import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
+import { UniverSheetsFormulaUIPlugin } from "@univerjs/sheets-formula-ui";
+import { UniverSheetsNumfmtPlugin } from "@univerjs/sheets-numfmt";
+import { UniverSheetsNumfmtUIPlugin } from "@univerjs/sheets-numfmt-ui";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_STYLE = {
+  width: "100%",
+  height: "100%",
+  position: "relative"
+};
+var DEFAULT_UI = {
+  header: false,
+  toolbar: false,
+  footer: false,
+  contextMenu: true
+};
+function CasualSheets({
+  initialData,
+  onReady,
+  locale = LocaleType.EN_US,
+  locales,
+  logLevel = LogLevel.WARN,
+  ui,
+  theme = defaultTheme,
+  style,
+  className,
+  testId = "casual-sheets"
+}) {
+  const hostRef = useRef(null);
+  useEffect(() => {
+    const container = hostRef.current;
+    if (!container) return;
+    const univer = new Univer({
+      theme,
+      locale,
+      locales,
+      logLevel
+    });
+    const uiOpts = { ...DEFAULT_UI, ...ui, container };
+    univer.registerPlugin(UniverRenderEnginePlugin);
+    univer.registerPlugin(UniverFormulaEnginePlugin);
+    univer.registerPlugin(UniverUIPlugin, uiOpts);
+    univer.registerPlugin(UniverDocsPlugin);
+    univer.registerPlugin(UniverDocsUIPlugin);
+    univer.registerPlugin(UniverSheetsPlugin);
+    univer.registerPlugin(UniverSheetsUIPlugin);
+    univer.registerPlugin(UniverSheetsFormulaPlugin);
+    univer.registerPlugin(UniverSheetsFormulaUIPlugin);
+    univer.registerPlugin(UniverSheetsNumfmtPlugin);
+    univer.registerPlugin(UniverSheetsNumfmtUIPlugin);
+    univer.createUnit(UniverInstanceType.UNIVER_SHEET, initialData);
+    const api = FUniver.newAPI(univer);
+    onReady?.(api, univer);
+    return () => {
+      const toDispose = univer;
+      queueMicrotask(() => toDispose.dispose());
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      style: { ...DEFAULT_STYLE, ...style },
+      className,
+      "data-testid": testId
+    }
+  );
+}
+export {
+  CasualSheets
+};
+//# sourceMappingURL=sheets.js.map

package/dist/sheets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sheets/CasualSheets.tsx"],"sourcesContent":["/**\n * CasualSheets — minimal React wrapper around Univer Sheets.\n *\n * Boots Univer with the eager plugin set (render + formula engine +\n * UI + docs + sheets + sheets-ui + sheets-formula + numfmt), mounts a\n * single workbook unit from `initialData`, and surfaces the\n * `FUniver` API to the host via `onReady`.\n *\n * Intentionally NOT included (host can layer on top via FUniver):\n *   - Lazy plugin loading (conditional formatting, drawings, sort,\n *     filter, hyperlinks, tables, comments, find/replace, …). Host\n *     calls `univer.registerPlugin(...)` after `onReady`.\n *   - Formula compute via Web Worker — `notExecuteFormula: false`\n *     is the default; the formula engine runs on the main thread.\n *     Host wires `UniverRPCMainThreadPlugin` + a worker URL itself\n *     if it wants the off-main path.\n *   - Snapshot swap (this component mounts a snapshot once; change\n *     the React `key` to remount with a fresh snapshot).\n *   - Paste-merge hooks, dev helpers, zoom-shortcut overrides,\n *     facade extensions — all app concerns.\n *\n * Styles: host must import `@schnsrw/casual-sheets/styles.css`\n * (or the per-plugin CSS) once at app boot. Tree-shaking strips the\n * styles from this entry if the host doesn't reach the styles export.\n */\n\nimport { useEffect, useRef, type CSSProperties } from 'react';\nimport {\n  LocaleType,\n  LogLevel,\n  Univer,\n  UniverInstanceType,\n  type IWorkbookData,\n  type ILocales,\n} from '@univerjs/core';\nimport { FUniver } from '@univerjs/core/facade';\nimport { defaultTheme } from '@univerjs/themes';\n\nimport { UniverRenderEnginePlugin } from '@univerjs/engine-render';\nimport { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';\nimport { UniverUIPlugin } from '@univerjs/ui';\nimport { UniverDocsPlugin } from '@univerjs/docs';\nimport { UniverDocsUIPlugin } from '@univerjs/docs-ui';\nimport { UniverSheetsPlugin } from '@univerjs/sheets';\nimport { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';\nimport { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';\nimport { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui';\nimport { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';\nimport { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui';\n\nexport interface CasualSheetsProps {\n  /** Workbook snapshot to mount. Read once on initial mount; change\n   *  the React `key` on this component to remount with a new\n   *  workbook. */\n  initialData: IWorkbookData;\n  /** Called after the workbook unit is created. The FUniver API is\n   *  how the host drives the sheet (read cells, mutate, listen for\n   *  events, register additional plugins). */\n  onReady?: (api: FUniver, univer: Univer) => void;\n  /** Locale identifier. Defaults to `LocaleType.EN_US`. */\n  locale?: LocaleType;\n  /** Locale string bundle. Optional — Univer's default English\n   *  strings load if omitted. */\n  locales?: ILocales;\n  /** Univer log level. Defaults to `LogLevel.WARN`. */\n  logLevel?: LogLevel;\n  /** Univer chrome toggles. Defaults: header / toolbar / footer off,\n   *  context menu on — matches Casual Sheets' embedded shape. */\n  ui?: {\n    header?: boolean;\n    toolbar?: boolean;\n    footer?: boolean;\n    contextMenu?: boolean;\n  };\n  /** Override the theme. Defaults to Univer's `defaultTheme`. */\n  theme?: typeof defaultTheme;\n  /** Container style. Default fills the parent. */\n  style?: CSSProperties;\n  /** Container className for additional styling hooks. */\n  className?: string;\n  /** Optional test id for the host container. */\n  testId?: string;\n}\n\nconst DEFAULT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n  position: 'relative',\n};\n\nconst DEFAULT_UI = {\n  header: false,\n  toolbar: false,\n  footer: false,\n  contextMenu: true,\n};\n\nexport function CasualSheets({\n  initialData,\n  onReady,\n  locale = LocaleType.EN_US,\n  locales,\n  logLevel = LogLevel.WARN,\n  ui,\n  theme = defaultTheme,\n  style,\n  className,\n  testId = 'casual-sheets',\n}: CasualSheetsProps) {\n  const hostRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = hostRef.current;\n    if (!container) return;\n\n    const univer = new Univer({\n      theme,\n      locale,\n      locales,\n      logLevel,\n    });\n\n    const uiOpts = { ...DEFAULT_UI, ...ui, container };\n\n    univer.registerPlugin(UniverRenderEnginePlugin);\n    univer.registerPlugin(UniverFormulaEnginePlugin);\n    univer.registerPlugin(UniverUIPlugin, uiOpts);\n    univer.registerPlugin(UniverDocsPlugin);\n    univer.registerPlugin(UniverDocsUIPlugin);\n    univer.registerPlugin(UniverSheetsPlugin);\n    univer.registerPlugin(UniverSheetsUIPlugin);\n    univer.registerPlugin(UniverSheetsFormulaPlugin);\n    univer.registerPlugin(UniverSheetsFormulaUIPlugin);\n    univer.registerPlugin(UniverSheetsNumfmtPlugin);\n    univer.registerPlugin(UniverSheetsNumfmtUIPlugin);\n\n    univer.createUnit(UniverInstanceType.UNIVER_SHEET, initialData);\n\n    const api = FUniver.newAPI(univer);\n    onReady?.(api, univer);\n\n    return () => {\n      // Defer disposal off the React render phase — Univer owns its\n      // own React root, and a synchronous unmount mid-render warns\n      // and leaves the canvas detached.\n      const toDispose = univer;\n      queueMicrotask(() => toDispose.dispose());\n    };\n    // initialData is intentionally NOT in the dep array — the wrapper\n    // mounts the snapshot once. Hosts that need to swap workbooks\n    // change the React `key` to force a remount.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div\n      ref={hostRef}\n      style={{ ...DEFAULT_STYLE, ...style }}\n      className={className}\n      data-testid={testId}\n    />\n  );\n}\n"],"mappings":";AA0BA,SAAS,WAAW,cAAkC;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAE7B,SAAS,gCAAgC;AACzC,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC,SAAS,iCAAiC;AAC1C,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AA2GvC;AAvEJ,IAAM,gBAA+B;AAAA,EACnC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,IAAM,aAAa;AAAA,EACjB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,SAAS,WAAW;AAAA,EACpB;AAAA,EACA,WAAW,SAAS;AAAA,EACpB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,SAAS;AACX,GAAsB;AACpB,QAAM,UAAU,OAAuB,IAAI;AAE3C,YAAU,MAAM;AACd,UAAM,YAAY,QAAQ;AAC1B,QAAI,CAAC,UAAW;AAEhB,UAAM,SAAS,IAAI,OAAO;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,SAAS,EAAE,GAAG,YAAY,GAAG,IAAI,UAAU;AAEjD,WAAO,eAAe,wBAAwB;AAC9C,WAAO,eAAe,yBAAyB;AAC/C,WAAO,eAAe,gBAAgB,MAAM;AAC5C,WAAO,eAAe,gBAAgB;AACtC,WAAO,eAAe,kBAAkB;AACxC,WAAO,eAAe,kBAAkB;AACxC,WAAO,eAAe,oBAAoB;AAC1C,WAAO,eAAe,yBAAyB;AAC/C,WAAO,eAAe,2BAA2B;AACjD,WAAO,eAAe,wBAAwB;AAC9C,WAAO,eAAe,0BAA0B;AAEhD,WAAO,WAAW,mBAAmB,cAAc,WAAW;AAE9D,UAAM,MAAM,QAAQ,OAAO,MAAM;AACjC,cAAU,KAAK,MAAM;AAErB,WAAO,MAAM;AAIX,YAAM,YAAY;AAClB,qBAAe,MAAM,UAAU,QAAQ,CAAC;AAAA,IAC1C;AAAA,EAKF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO,EAAE,GAAG,eAAe,GAAG,MAAM;AAAA,MACpC;AAAA,MACA,eAAa;AAAA;AAAA,EACf;AAEJ;","names":[]}

package/dist/styles.cjs

@@ -0,0 +1,10 @@
+"use strict";
+
+// src/styles.ts
+var import_lib = require("@univerjs/design/lib/index.css");
+var import_lib2 = require("@univerjs/ui/lib/index.css");
+var import_lib3 = require("@univerjs/docs-ui/lib/index.css");
+var import_lib4 = require("@univerjs/sheets-ui/lib/index.css");
+var import_lib5 = require("@univerjs/sheets-formula-ui/lib/index.css");
+var import_lib6 = require("@univerjs/sheets-numfmt-ui/lib/index.css");
+//# sourceMappingURL=styles.cjs.map

package/dist/styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles.ts"],"sourcesContent":["/**\n * Univer plugin CSS — side-effect-only imports for the eager plugin\n * set CasualSheets boots. Hosts import this once at app boot:\n *\n *   import '@schnsrw/casual-sheets/styles';\n *\n * If the host adds lazy plugins (sort, filter, drawing, comments,\n * conditional formatting, …) it imports the corresponding CSS\n * separately — those plugins ship their own /lib/index.css.\n */\nimport '@univerjs/design/lib/index.css';\nimport '@univerjs/ui/lib/index.css';\nimport '@univerjs/docs-ui/lib/index.css';\nimport '@univerjs/sheets-ui/lib/index.css';\nimport '@univerjs/sheets-formula-ui/lib/index.css';\nimport '@univerjs/sheets-numfmt-ui/lib/index.css';\n"],"mappings":";;;AAUA,iBAAO;AACP,IAAAA,cAAO;AACP,IAAAA,cAAO;AACP,IAAAA,cAAO;AACP,IAAAA,cAAO;AACP,IAAAA,cAAO;","names":["import_lib"]}

package/dist/styles.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles.js

@@ -0,0 +1,8 @@
+// src/styles.ts
+import "@univerjs/design/lib/index.css";
+import "@univerjs/ui/lib/index.css";
+import "@univerjs/docs-ui/lib/index.css";
+import "@univerjs/sheets-ui/lib/index.css";
+import "@univerjs/sheets-formula-ui/lib/index.css";
+import "@univerjs/sheets-numfmt-ui/lib/index.css";
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles.ts"],"sourcesContent":["/**\n * Univer plugin CSS — side-effect-only imports for the eager plugin\n * set CasualSheets boots. Hosts import this once at app boot:\n *\n *   import '@schnsrw/casual-sheets/styles';\n *\n * If the host adds lazy plugins (sort, filter, drawing, comments,\n * conditional formatting, …) it imports the corresponding CSS\n * separately — those plugins ship their own /lib/index.css.\n */\nimport '@univerjs/design/lib/index.css';\nimport '@univerjs/ui/lib/index.css';\nimport '@univerjs/docs-ui/lib/index.css';\nimport '@univerjs/sheets-ui/lib/index.css';\nimport '@univerjs/sheets-formula-ui/lib/index.css';\nimport '@univerjs/sheets-numfmt-ui/lib/index.css';\n"],"mappings":";AAUA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@schnsrw/casual-sheets",
-  "version": "0.2.0",
-  "description": "Casual Sheets SDK — signing pipeline + iframe postMessage protocol. Univer wrapper (CasualSheets component) to follow.",
+  "version": "0.3.0",
+  "description": "Casual Sheets SDK — signing pipeline, iframe postMessage protocol, and CasualSheets React wrapper around Univer.",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -28,6 +28,15 @@
       "types": "./dist/embed.d.ts",
       "import": "./dist/embed.js",
       "require": "./dist/embed.cjs"
+    },
+    "./sheets": {
+      "types": "./dist/sheets.d.ts",
+      "import": "./dist/sheets.js",
+      "require": "./dist/sheets.cjs"
+    },
+    "./styles": {
+      "import": "./dist/styles.js",
+      "require": "./dist/styles.cjs"
     }
   },
   "files": [
@@ -37,7 +46,21 @@
   ],
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@univerjs/core": "^0.24.0",
+    "@univerjs/design": "^0.24.0",
+    "@univerjs/docs": "^0.24.0",
+    "@univerjs/docs-ui": "^0.24.0",
+    "@univerjs/engine-formula": "^0.24.0",
+    "@univerjs/engine-render": "^0.24.0",
+    "@univerjs/sheets": "^0.24.0",
+    "@univerjs/sheets-formula": "^0.24.0",
+    "@univerjs/sheets-formula-ui": "^0.24.0",
+    "@univerjs/sheets-numfmt": "^0.24.0",
+    "@univerjs/sheets-numfmt-ui": "^0.24.0",
+    "@univerjs/sheets-ui": "^0.24.0",
+    "@univerjs/themes": "^0.24.0",
+    "@univerjs/ui": "^0.24.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -45,6 +68,48 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "@univerjs/core": {
+      "optional": true
+    },
+    "@univerjs/design": {
+      "optional": true
+    },
+    "@univerjs/docs": {
+      "optional": true
+    },
+    "@univerjs/docs-ui": {
+      "optional": true
+    },
+    "@univerjs/engine-formula": {
+      "optional": true
+    },
+    "@univerjs/engine-render": {
+      "optional": true
+    },
+    "@univerjs/sheets": {
+      "optional": true
+    },
+    "@univerjs/sheets-formula": {
+      "optional": true
+    },
+    "@univerjs/sheets-formula-ui": {
+      "optional": true
+    },
+    "@univerjs/sheets-numfmt": {
+      "optional": true
+    },
+    "@univerjs/sheets-numfmt-ui": {
+      "optional": true
+    },
+    "@univerjs/sheets-ui": {
+      "optional": true
+    },
+    "@univerjs/themes": {
+      "optional": true
+    },
+    "@univerjs/ui": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -55,7 +120,21 @@
     "react-dom": "^19.0.0",
     "tsup": "^8.0.0",
     "tsx": "^4.0.0",
-    "typescript": "^5.4.0"
+    "typescript": "^5.4.0",
+    "@univerjs/core": "0.24.0",
+    "@univerjs/design": "0.24.0",
+    "@univerjs/docs": "0.24.0",
+    "@univerjs/docs-ui": "0.24.0",
+    "@univerjs/engine-formula": "0.24.0",
+    "@univerjs/engine-render": "0.24.0",
+    "@univerjs/sheets": "0.24.0",
+    "@univerjs/sheets-formula": "0.24.0",
+    "@univerjs/sheets-formula-ui": "0.24.0",
+    "@univerjs/sheets-numfmt": "0.24.0",
+    "@univerjs/sheets-numfmt-ui": "0.24.0",
+    "@univerjs/sheets-ui": "0.24.0",
+    "@univerjs/themes": "0.24.0",
+    "@univerjs/ui": "0.24.0"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -1,13 +1,16 @@
 /**
  * @schnsrw/casual-sheets — Casual Sheets SDK
  *
- * Two surfaces shipped in v0.1.0:
- *   - `./signing` — anchored cell signatures (drawn / typed / uploaded)
- *   - `./embed`   — iframe postMessage protocol for host integrations
+ * Three surfaces:
+ *   - `./signing` — anchored cell signatures (drawn / typed / uploaded).
+ *   - `./embed`   — iframe postMessage protocol for host integrations.
+ *   - `./sheets`  — `CasualSheets` React wrapper around Univer Sheets.
  *
- * A `CasualSheets` React component that wraps the Univer-Sheets bootstrap
- * is planned for a follow-up release.
+ * The `./styles` side-effect entry brings in the eager plugin CSS:
+ *
+ *   import '@schnsrw/casual-sheets/styles';
  */
 
 export * from './signing';
 export * from './embed';
+export * from './sheets';

package/src/sheets/CasualSheets.tsx

@@ -0,0 +1,163 @@
+/**
+ * CasualSheets — minimal React wrapper around Univer Sheets.
+ *
+ * Boots Univer with the eager plugin set (render + formula engine +
+ * UI + docs + sheets + sheets-ui + sheets-formula + numfmt), mounts a
+ * single workbook unit from `initialData`, and surfaces the
+ * `FUniver` API to the host via `onReady`.
+ *
+ * Intentionally NOT included (host can layer on top via FUniver):
+ *   - Lazy plugin loading (conditional formatting, drawings, sort,
+ *     filter, hyperlinks, tables, comments, find/replace, …). Host
+ *     calls `univer.registerPlugin(...)` after `onReady`.
+ *   - Formula compute via Web Worker — `notExecuteFormula: false`
+ *     is the default; the formula engine runs on the main thread.
+ *     Host wires `UniverRPCMainThreadPlugin` + a worker URL itself
+ *     if it wants the off-main path.
+ *   - Snapshot swap (this component mounts a snapshot once; change
+ *     the React `key` to remount with a fresh snapshot).
+ *   - Paste-merge hooks, dev helpers, zoom-shortcut overrides,
+ *     facade extensions — all app concerns.
+ *
+ * Styles: host must import `@schnsrw/casual-sheets/styles.css`
+ * (or the per-plugin CSS) once at app boot. Tree-shaking strips the
+ * styles from this entry if the host doesn't reach the styles export.
+ */
+
+import { useEffect, useRef, type CSSProperties } from 'react';
+import {
+  LocaleType,
+  LogLevel,
+  Univer,
+  UniverInstanceType,
+  type IWorkbookData,
+  type ILocales,
+} from '@univerjs/core';
+import { FUniver } from '@univerjs/core/facade';
+import { defaultTheme } from '@univerjs/themes';
+
+import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
+import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
+import { UniverUIPlugin } from '@univerjs/ui';
+import { UniverDocsPlugin } from '@univerjs/docs';
+import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
+import { UniverSheetsPlugin } from '@univerjs/sheets';
+import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
+import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';
+import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui';
+import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
+import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui';
+
+export interface CasualSheetsProps {
+  /** Workbook snapshot to mount. Read once on initial mount; change
+   *  the React `key` on this component to remount with a new
+   *  workbook. */
+  initialData: IWorkbookData;
+  /** Called after the workbook unit is created. The FUniver API is
+   *  how the host drives the sheet (read cells, mutate, listen for
+   *  events, register additional plugins). */
+  onReady?: (api: FUniver, univer: Univer) => void;
+  /** Locale identifier. Defaults to `LocaleType.EN_US`. */
+  locale?: LocaleType;
+  /** Locale string bundle. Optional — Univer's default English
+   *  strings load if omitted. */
+  locales?: ILocales;
+  /** Univer log level. Defaults to `LogLevel.WARN`. */
+  logLevel?: LogLevel;
+  /** Univer chrome toggles. Defaults: header / toolbar / footer off,
+   *  context menu on — matches Casual Sheets' embedded shape. */
+  ui?: {
+    header?: boolean;
+    toolbar?: boolean;
+    footer?: boolean;
+    contextMenu?: boolean;
+  };
+  /** Override the theme. Defaults to Univer's `defaultTheme`. */
+  theme?: typeof defaultTheme;
+  /** Container style. Default fills the parent. */
+  style?: CSSProperties;
+  /** Container className for additional styling hooks. */
+  className?: string;
+  /** Optional test id for the host container. */
+  testId?: string;
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+};
+
+const DEFAULT_UI = {
+  header: false,
+  toolbar: false,
+  footer: false,
+  contextMenu: true,
+};
+
+export function CasualSheets({
+  initialData,
+  onReady,
+  locale = LocaleType.EN_US,
+  locales,
+  logLevel = LogLevel.WARN,
+  ui,
+  theme = defaultTheme,
+  style,
+  className,
+  testId = 'casual-sheets',
+}: CasualSheetsProps) {
+  const hostRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = hostRef.current;
+    if (!container) return;
+
+    const univer = new Univer({
+      theme,
+      locale,
+      locales,
+      logLevel,
+    });
+
+    const uiOpts = { ...DEFAULT_UI, ...ui, container };
+
+    univer.registerPlugin(UniverRenderEnginePlugin);
+    univer.registerPlugin(UniverFormulaEnginePlugin);
+    univer.registerPlugin(UniverUIPlugin, uiOpts);
+    univer.registerPlugin(UniverDocsPlugin);
+    univer.registerPlugin(UniverDocsUIPlugin);
+    univer.registerPlugin(UniverSheetsPlugin);
+    univer.registerPlugin(UniverSheetsUIPlugin);
+    univer.registerPlugin(UniverSheetsFormulaPlugin);
+    univer.registerPlugin(UniverSheetsFormulaUIPlugin);
+    univer.registerPlugin(UniverSheetsNumfmtPlugin);
+    univer.registerPlugin(UniverSheetsNumfmtUIPlugin);
+
+    univer.createUnit(UniverInstanceType.UNIVER_SHEET, initialData);
+
+    const api = FUniver.newAPI(univer);
+    onReady?.(api, univer);
+
+    return () => {
+      // Defer disposal off the React render phase — Univer owns its
+      // own React root, and a synchronous unmount mid-render warns
+      // and leaves the canvas detached.
+      const toDispose = univer;
+      queueMicrotask(() => toDispose.dispose());
+    };
+    // initialData is intentionally NOT in the dep array — the wrapper
+    // mounts the snapshot once. Hosts that need to swap workbooks
+    // change the React `key` to force a remount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      ref={hostRef}
+      style={{ ...DEFAULT_STYLE, ...style }}
+      className={className}
+      data-testid={testId}
+    />
+  );
+}

package/src/sheets/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Sheets surface — React wrapper around Univer Sheets.
+ */
+export { CasualSheets, type CasualSheetsProps } from './CasualSheets';

package/src/styles.ts

@@ -0,0 +1,16 @@
+/**
+ * Univer plugin CSS — side-effect-only imports for the eager plugin
+ * set CasualSheets boots. Hosts import this once at app boot:
+ *
+ *   import '@schnsrw/casual-sheets/styles';
+ *
+ * If the host adds lazy plugins (sort, filter, drawing, comments,
+ * conditional formatting, …) it imports the corresponding CSS
+ * separately — those plugins ship their own /lib/index.css.
+ */
+import '@univerjs/design/lib/index.css';
+import '@univerjs/ui/lib/index.css';
+import '@univerjs/docs-ui/lib/index.css';
+import '@univerjs/sheets-ui/lib/index.css';
+import '@univerjs/sheets-formula-ui/lib/index.css';
+import '@univerjs/sheets-numfmt-ui/lib/index.css';