@casualoffice/sheets 0.18.0 → 0.20.0

package/src/pivots/fields-model.ts

@@ -0,0 +1,267 @@
+/**
+ * Copyright 2026 Casual Office
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Pure, immutable model transforms for the PivotTable Fields pane.
+ *
+ * The pane mirrors Excel's "PivotTable Fields" panel: a source-field
+ * list plus four drop zones — Filters / Columns / Rows / Values. Every
+ * edit (assign a field to a zone, remove it, reorder, change a value's
+ * aggregation) is expressed here as a `PivotModel → PivotModel` step so
+ * the React panel never mutates the live model in place. (An earlier
+ * bug elsewhere came from aliasing a live array; these clone instead.)
+ *
+ * Axis rules, matching Excel:
+ *   - Rows / Columns / Filters hold a given source column at most once.
+ *   - A field on an axis is mutually exclusive across Rows/Columns/Filters
+ *     (moving it to one strips it from the others).
+ *   - Values may hold the same column more than once (Sum + Count of the
+ *     same field), so Values entries are addressed by index, not column.
+ *   - Placing a field on an axis does NOT remove it from Values, and
+ *     vice-versa (e.g. Region in Rows + Count of Region in Values).
+ */
+
+import type { DateGrouping, PivotAggregation, PivotModel, PivotValueField } from './types';
+
+export type ZoneId = 'filters' | 'rows' | 'cols' | 'values';
+
+export const ZONE_LABELS: Record<ZoneId, string> = {
+  filters: 'Filters',
+  cols: 'Columns',
+  rows: 'Rows',
+  values: 'Values',
+};
+
+/** Single-instance axes — a column appears at most once in each. */
+const AXES: ZoneId[] = ['rows', 'cols', 'filters'];
+
+/** Every source column placed somewhere, for the field-list checkmarks. */
+export function placedColumns(model: PivotModel): Set<number> {
+  const s = new Set<number>();
+  for (const r of model.rows) s.add(r.column);
+  for (const c of model.cols) s.add(c.column);
+  for (const v of model.values) s.add(v.column);
+  for (const f of model.filters ?? []) s.add(f.column);
+  return s;
+}
+
+/** Shallow-clone the four zone arrays so callers can mutate the copies. */
+function cloneZones(model: PivotModel): {
+  rows: PivotModel['rows'];
+  cols: PivotModel['cols'];
+  values: PivotValueField[];
+  filters: NonNullable<PivotModel['filters']>;
+} {
+  return {
+    rows: model.rows.map((r) => ({ ...r })),
+    cols: model.cols.map((c) => ({ ...c })),
+    values: model.values.map((v) => ({ ...v })),
+    filters: (model.filters ?? []).map((f) => ({ ...f, allowedValues: [...f.allowedValues] })),
+  };
+}
+
+/** Drop a column from the single-instance axes (rows/cols/filters). */
+function stripFromAxes(z: ReturnType<typeof cloneZones>, column: number): void {
+  z.rows = z.rows.filter((r) => r.column !== column);
+  z.cols = z.cols.filter((c) => c.column !== column);
+  z.filters = z.filters.filter((f) => f.column !== column);
+}
+
+/**
+ * Assign a source column to a zone.
+ *
+ * Rows/Columns/Filters: idempotent — moving the column to a new axis
+ * strips it from the other two. Values: appends a new entry (so a field
+ * can be aggregated more than once); `defaultAgg` lets the caller pick
+ * Sum for numeric columns and Count for text.
+ */
+export function addFieldToZone(
+  model: PivotModel,
+  column: number,
+  zone: ZoneId,
+  opts?: { defaultAgg?: PivotAggregation; allowedValues?: string[] },
+): PivotModel {
+  const z = cloneZones(model);
+  if (zone === 'values') {
+    z.values.push({ column, agg: opts?.defaultAgg ?? 'sum', showAs: 'normal' });
+    return { ...model, rows: z.rows, cols: z.cols, values: z.values, filters: z.filters };
+  }
+  // Axis zones are mutually exclusive — pull the column off every axis first.
+  stripFromAxes(z, column);
+  if (zone === 'rows') z.rows.push({ column });
+  else if (zone === 'cols') z.cols.push({ column });
+  else z.filters.push({ column, allowedValues: opts?.allowedValues ?? [] });
+  return { ...model, rows: z.rows, cols: z.cols, values: z.values, filters: z.filters };
+}
+
+/** Remove the entry at `index` from a zone (Values by index; axes by index too). */
+export function removeFieldFromZone(model: PivotModel, zone: ZoneId, index: number): PivotModel {
+  const z = cloneZones(model);
+  z[zone] = z[zone].filter((_, i) => i !== index) as never;
+  return { ...model, rows: z.rows, cols: z.cols, values: z.values, filters: z.filters };
+}
+
+/** Reorder within a zone (drag a chip up/down, or the order buttons). */
+export function moveWithinZone(
+  model: PivotModel,
+  zone: ZoneId,
+  from: number,
+  to: number,
+): PivotModel {
+  const z = cloneZones(model);
+  const arr = z[zone] as unknown[];
+  if (from < 0 || from >= arr.length || to < 0 || to >= arr.length || from === to) return model;
+  const [moved] = arr.splice(from, 1);
+  arr.splice(to, 0, moved);
+  return { ...model, rows: z.rows, cols: z.cols, values: z.values, filters: z.filters };
+}
+
+/** Patch a Values entry (aggregation / Show-Values-As). */
+export function updateValueField(
+  model: PivotModel,
+  index: number,
+  patch: Partial<Pick<PivotValueField, 'agg' | 'showAs'>>,
+): PivotModel {
+  const values = model.values.map((v, i) => (i === index ? { ...v, ...patch } : v));
+  return { ...model, values };
+}
+
+/** Set the date grouping on a Rows entry (Year/Quarter/Month/none). */
+export function updateRowGrouping(
+  model: PivotModel,
+  index: number,
+  grouping: DateGrouping,
+): PivotModel {
+  const rows = model.rows.map((r, i) =>
+    i === index ? { ...r, grouping: grouping === 'none' ? undefined : grouping } : r,
+  );
+  return { ...model, rows };
+}
+
+/** True when the model still has at least one value field — the panel
+ *  blocks removing the last one (a value-less pivot renders nothing). */
+export function hasValues(model: PivotModel): boolean {
+  return model.values.length > 0;
+}
+
+/** Which axis (if any) currently holds a column — drives the field-list
+ *  badge ("R" / "C" / "▽"). Values is reported separately since a column
+ *  can be on an axis and in Values at once. */
+export function axisOf(model: PivotModel, column: number): Exclude<ZoneId, 'values'> | null {
+  for (const ax of AXES) {
+    const arr = ax === 'filters' ? (model.filters ?? []) : model[ax];
+    if (arr.some((e) => e.column === column)) return ax as Exclude<ZoneId, 'values'>;
+  }
+  return null;
+}
+
+/**
+ * Check/uncheck a single value on a report filter (Filters zone). The
+ * allowedValues list is the set of values that pass; compute keeps only
+ * records whose value is in it (an empty list excludes everything, same
+ * as Excel showing nothing when you deselect all). `allValues` is the
+ * filter field's full distinct set — needed so the first uncheck can
+ * seed the list from "all selected" rather than an empty array, and so
+ * the result preserves the canonical (sorted) order.
+ */
+export function toggleFilterValue(
+  model: PivotModel,
+  filterIndex: number,
+  value: string,
+  checked: boolean,
+  allValues: string[],
+): PivotModel {
+  const filters = (model.filters ?? []).map((f) => ({ ...f, allowedValues: [...f.allowedValues] }));
+  const f = filters[filterIndex];
+  if (!f) return model;
+  // A filter stored with the complete set (or an empty list, the slice-1
+  // "all pass" convention) starts from every value; toggling narrows it.
+  const current = new Set(f.allowedValues.length ? f.allowedValues : allValues);
+  if (checked) current.add(value);
+  else current.delete(value);
+  f.allowedValues = allValues.filter((v) => current.has(v));
+  return { ...model, filters };
+}
+
+/** Set a filter's allowed set wholesale (Select all / Clear). */
+export function setFilterValues(
+  model: PivotModel,
+  filterIndex: number,
+  values: string[],
+): PivotModel {
+  const filters = (model.filters ?? []).map((f) => ({ ...f, allowedValues: [...f.allowedValues] }));
+  if (!filters[filterIndex]) return model;
+  filters[filterIndex].allowedValues = [...values];
+  return { ...model, filters };
+}
+
+/** Count of allowed values for a filter, treating an empty stored list as
+ *  "all" (the slice-1 convention) so the chip can show "M of M". */
+export function filterAllowedCount(
+  model: PivotModel,
+  filterIndex: number,
+  allCount: number,
+): number {
+  const f = (model.filters ?? [])[filterIndex];
+  if (!f) return allCount;
+  return f.allowedValues.length ? f.allowedValues.length : allCount;
+}
+
+/** What's being dragged in the Fields pane — a not-yet-placed source field
+ *  from the field list, or an already-placed chip in a zone. */
+export type DragPayload =
+  | { from: 'list'; column: number }
+  | { from: 'zone'; zone: ZoneId; index: number };
+
+/** The source column held by a placed chip (Values address by index since a
+ *  column can repeat there). */
+function columnInZone(model: PivotModel, zone: ZoneId, index: number): number | null {
+  const arr =
+    zone === 'values' ? model.values : zone === 'filters' ? (model.filters ?? []) : model[zone];
+  return arr[index]?.column ?? null;
+}
+
+/**
+ * Resolve a drag-and-drop drop onto a zone into a model change.
+ *
+ * - From the field list → assign the column to the target zone (same as the
+ *   click "+" menu).
+ * - From another zone → move the field (remove from source, add to target).
+ *   Dropping onto the same zone is a no-op here — within-zone reorder is the
+ *   chip's ▲▼ buttons (a remove+re-add would discard a Values entry's
+ *   aggregation). Moving the last Values field out is also a no-op so the
+ *   pivot never goes value-less (matches the remove-button guard).
+ *
+ * `optsFor(column)` supplies the per-column defaults (Sum vs Count for a new
+ * Values entry; the full distinct set for a new report filter) — kept as a
+ * callback so this stays pure + unit-testable without source access.
+ */
+export function applyDrop(
+  model: PivotModel,
+  payload: DragPayload,
+  targetZone: ZoneId,
+  optsFor: (column: number) => { defaultAgg?: PivotAggregation; allowedValues?: string[] },
+): PivotModel {
+  if (payload.from === 'list') {
+    return addFieldToZone(model, payload.column, targetZone, optsFor(payload.column));
+  }
+  if (payload.zone === targetZone) return model;
+  const column = columnInZone(model, payload.zone, payload.index);
+  if (column == null) return model;
+  if (payload.zone === 'values' && model.values.length <= 1) return model;
+  const removed = removeFieldFromZone(model, payload.zone, payload.index);
+  return addFieldToZone(removed, column, targetZone, optsFor(column));
+}

package/src/pivots/types.ts

@@ -0,0 +1,137 @@
+/**
+ * Copyright 2026 Casual Office
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Pivot table model. Excel's PivotCacheDefinition + PivotTableDefinition,
+ * compressed to what we need for v0.1. The model is small and
+ * JSON-serializable so it can live on `IWorkbookData.resources` the
+ * same way chart models do.
+ *
+ * Conventions (same as charts):
+ *
+ *   - Source range row 0 = header row → field names.
+ *   - Subsequent rows = records.
+ *   - Field references are column indices within the source range
+ *     (0-indexed). Names are looked up from the headers at render
+ *     time so the model survives a column rename — there's no
+ *     ambiguity until somebody changes the source range shape, at
+ *     which point the field count may shift.
+ */
+
+export type PivotAggregation = 'sum' | 'count' | 'average' | 'min' | 'max' | 'distinctCount';
+
+export const PIVOT_AGG_LABELS: Record<PivotAggregation, string> = {
+  sum: 'Sum',
+  count: 'Count',
+  average: 'Average',
+  min: 'Min',
+  max: 'Max',
+  distinctCount: 'Distinct Count',
+};
+
+/** Pivot field reference — column index within the source range. */
+/** Date grouping for a (date) row field — buckets records by the derived
+ *  period instead of the raw date. 'none' keys by the raw value. */
+export type DateGrouping = 'none' | 'year' | 'quarter' | 'month';
+
+export const PIVOT_DATE_GROUP_LABELS: Record<DateGrouping, string> = {
+  none: 'No grouping',
+  year: 'Years',
+  quarter: 'Quarters',
+  month: 'Months',
+};
+
+/** Pivot field reference — column index within the source range, plus an
+ *  optional date grouping applied when bucketing rows. */
+export type PivotFieldRef = { column: number; grouping?: DateGrouping };
+
+/** Pivot value field — a column to aggregate + the aggregation. */
+/** How a value field is displayed (Excel's "Show Values As"). 'normal' = the
+ *  raw aggregate; 'pctOfGrandTotal' = each cell as a % of the field's overall
+ *  grand total; 'pctOfColumnTotal' = each cell as a % of its column's total
+ *  (in a cross-tab; identical to grand total in the row-only layout). */
+export type PivotShowAs = 'normal' | 'pctOfGrandTotal' | 'pctOfColumnTotal' | 'pctOfRowTotal';
+
+export const PIVOT_SHOW_AS_LABELS: Record<PivotShowAs, string> = {
+  normal: 'Normal',
+  pctOfGrandTotal: '% of Grand Total',
+  pctOfColumnTotal: '% of Column Total',
+  pctOfRowTotal: '% of Row Total',
+};
+
+export type PivotValueField = {
+  column: number;
+  agg: PivotAggregation;
+  /** Display transform; absent/`'normal'` shows the raw aggregate. */
+  showAs?: PivotShowAs;
+};
+
+/** P1 — a filter field. Source records are kept only when the value
+ *  in `column` is one of `allowedValues` (compared as strings). An
+ *  empty `allowedValues` excludes everything; absent entry means no
+ *  restriction. */
+export type PivotFilter = {
+  column: number;
+  allowedValues: string[];
+};
+
+export type PivotModel = {
+  id: string;
+  /** Sheet the SOURCE data lives on. */
+  sourceSheetId: string;
+  /** Source data range — first row is headers, subsequent rows are
+   *  records. */
+  source: { startRow: number; endRow: number; startColumn: number; endColumn: number };
+  /** Sheet the pivot OUTPUT lives on. Often the same as source, but
+   *  Excel lets you target a different sheet. */
+  targetSheetId: string;
+  /** Top-left cell of the pivot output (0-indexed row + col). */
+  target: { row: number; column: number };
+  /** Row fields, applied left-to-right. P0 ships single-field; the
+   *  array shape makes multi-field a P1 follow-up without a schema
+   *  bump. */
+  rows: PivotFieldRef[];
+  /** Column fields. Empty in P0 — every value column collapses into
+   *  one column. */
+  cols: PivotFieldRef[];
+  /** Value fields. Each one produces its own column in the output. */
+  values: PivotValueField[];
+  /** P1 — filter fields. Optional for backwards-compat; an absent or
+   *  empty array means no filtering. */
+  filters?: PivotFilter[];
+  /** Last written output extent so `Refresh` can clear the previous
+   *  output rectangle before writing the new one. Absent on freshly-
+   *  loaded pivots from pre-P1 workbooks — refresh in that case just
+   *  overwrites the new extent and leaves any residual rows. */
+  lastOutputExtent?: { rows: number; cols: number };
+  /** Display name. Auto-generated "PivotTable N" on insert; renameable
+   *  via the Pivots panel. */
+  title?: string;
+};
+
+export function newPivotId(): string {
+  return `pt-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+}
+
+/** Plugin-resource name we use when stashing pivot models in
+ *  `IWorkbookData.resources`. Mirrors `CHARTS_RESOURCE_NAME` — survives
+ *  xlsx via the hidden `__casual_sheets_resources__` sheet. */
+export const PIVOTS_RESOURCE_NAME = '__casual_sheets_pivots__';
+
+export type PivotsResourceV1 = {
+  v: 1;
+  pivots: PivotModel[];
+};

package/src/sheets/CasualSheets.tsx

@@ -106,6 +106,16 @@ import {
 import type { ChromeExtensions } from '../chrome/extensions';
 import type { DialogKind } from '../chrome/dialog-context';
 import { AiPanelSurface, type SheetsAiConfig } from '../ai/AiPanelSurface';
+import { PanelProvider } from '../chrome/panel-context';
+import { PanelRail } from '../chrome/PanelRail';
+import { PanelHost } from '../chrome/PanelHost';
+// Charts: the provider is echarts-free (resources/types only) so it imports
+// eagerly; the overlay pulls echarts, so it's lazy — echarts becomes its own
+// async chunk, loaded only when a chart actually renders.
+import { ChartsProvider } from '../charts/charts-context';
+const ChartLayer = lazy(() =>
+  import('../charts/ChartLayer').then((m) => ({ default: m.ChartLayer })),
+);
 // Chrome is lazy-loaded from the `@casualoffice/sheets/chrome` subpath (NOT a
 // relative import — that would inline under this build's splitting:false). The
 // subpath is externalised in tsup, so the consumer's bundler code-splits it and
@@ -475,7 +485,7 @@ export function CasualSheets({
 
       univer.createUnit(UniverInstanceType.UNIVER_SHEET, initialData);
 
-      const api = createCasualSheetsAPI(FUniver.newAPI(univer));
+      const api = createCasualSheetsAPI(FUniver.newAPI(univer), initialData.resources);
       const apiInternal = api as CasualSheetsAPIInternal;
       apiRef.current = api;
       // Bridge the declarative event props (doc 38 §3) to the unified emitter, so
@@ -713,47 +723,63 @@ export function CasualSheets({
   } as CSSProperties;
 
   return (
-    <div
-      className={className}
-      data-testid={testId}
-      data-theme={dark ? 'dark' : 'light'}
-      onKeyDownCapture={onKeyDownCapture}
-      style={{
-        ...DEFAULT_STYLE,
-        ...chromeVars,
-        ...style,
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      {/* Bars appear once their lazy chunk loads (a tick after first paint); the
+    <PanelProvider>
+      <div
+        className={className}
+        data-testid={testId}
+        data-theme={dark ? 'dark' : 'light'}
+        onKeyDownCapture={onKeyDownCapture}
+        style={{
+          ...DEFAULT_STYLE,
+          ...chromeVars,
+          ...style,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {/* Bars appear once their lazy chunk loads (a tick after first paint); the
           grid host is OUTSIDE Suspense so Univer mounts immediately. */}
-      <Suspense fallback={null}>
-        <ChromeTop
-          api={chromeApi}
-          features={features}
-          onDialogRequest={onDialogRequest}
-          hostOwnedDialogs={hostOwnedDialogs}
-          extensions={extensions}
-        />
-      </Suspense>
-      {hasAi ? (
-        // Grid + AI pane share a flex row so the built-in chrome (top/bottom
-        // bars) still spans the full width. Shape fixed at mount by `hasAi`.
+        <Suspense fallback={null}>
+          <ChromeTop
+            api={chromeApi}
+            features={features}
+            onDialogRequest={onDialogRequest}
+            hostOwnedDialogs={hostOwnedDialogs}
+            extensions={extensions}
+          />
+        </Suspense>
+        {/* Grid + side panels + rail share a flex row so the built-in chrome
+          (top/bottom bars) still spans the full width. The row shape is stable
+          (grid host never remounts); PanelHost/AI aside only add/remove
+          siblings, and the rail is always present. */}
         <div style={{ flex: '1 1 auto', minHeight: 0, display: 'flex', flexDirection: 'row' }}>
           <div
             ref={hostRef}
+            data-testid="univer-host"
             style={{ flex: '1 1 auto', minWidth: 0, minHeight: 0, position: 'relative' }}
           />
-          <AiPanelSurface config={ai} api={aiApi} />
+          {/* Charts context + overlay live once the api is ready (it arrives
+              after Univer boots into the grid host above, so it can't gate the
+              host). ChartLayer portals onto the `univer-host` marker; the
+              Charts panel (inside PanelHost) reads the same context. */}
+          {chromeApi ? (
+            <ChartsProvider api={chromeApi}>
+              <Suspense fallback={null}>
+                <ChartLayer />
+              </Suspense>
+              <PanelHost api={chromeApi} extensions={extensions} />
+            </ChartsProvider>
+          ) : (
+            <PanelHost api={chromeApi} extensions={extensions} />
+          )}
+          {hasAi && <AiPanelSurface config={ai} api={aiApi} />}
+          <PanelRail extensions={extensions} />
         </div>
-      ) : (
-        <div ref={hostRef} style={{ flex: '1 1 auto', minHeight: 0, position: 'relative' }} />
-      )}
-      <Suspense fallback={null}>
-        <ChromeBottom api={chromeApi} />
-      </Suspense>
-    </div>
+        <Suspense fallback={null}>
+          <ChromeBottom api={chromeApi} />
+        </Suspense>
+      </div>
+    </PanelProvider>
   );
 }
 

package/src/sheets/api.ts

@@ -235,7 +235,33 @@ export interface CasualSheetsAPIInternal extends CasualSheetsAPI {
  * to {@link CasualSheetsAPI} for hosts, while the `<CasualSheets>` wrapper casts
  * back to reach `emit` / `markDirty`.
  */
-export function createCasualSheetsAPI(univerAPI: FUniver): CasualSheetsAPI {
+export function createCasualSheetsAPI(
+  univerAPI: FUniver,
+  initialResources?: IWorkbookData['resources'],
+): CasualSheetsAPI {
+  // SDK-owned snapshot resources (charts / pivots / sparklines panels persist
+  // their models here). Univer's `.save()`/`.load()` silently drop any resource
+  // it doesn't own, so getContent()/setContent() alone can't round-trip them.
+  // We shadow them in an SDK-layer store: setContent captures them before the
+  // workbook swap, getContent merges them back onto the Univer snapshot. This
+  // keeps the panels' existing `IWorkbookData.resources` read/write working and
+  // makes them survive save/reload + collab.
+  const CUSTOM_RESOURCE_NAMES = new Set([
+    '__casual_sheets_charts__',
+    '__casual_sheets_pivots__',
+    '__casual_sheets_sparklines__',
+  ]);
+  const customResources = new Map<string, string>();
+  const captureCustom = (resources: IWorkbookData['resources']) => {
+    customResources.clear();
+    for (const r of resources ?? []) {
+      if (CUSTOM_RESOURCE_NAMES.has(r.name) && r.data) customResources.set(r.name, r.data);
+    }
+  };
+  // Seed from the mounted snapshot so pivots/charts saved in a loaded workbook
+  // are visible before the first edit.
+  captureCustom(initialResources);
+
   // Extracted so importXlsx / setContent reuse the exact same swap semantics.
   const swapWorkbook = (data: IWorkbookData) => {
     const current = univerAPI.getActiveWorkbook();
@@ -267,9 +293,18 @@ export function createCasualSheetsAPI(univerAPI: FUniver): CasualSheetsAPI {
   let documentMode: DocumentMode = 'editing';
   let readOnlyDisposer: (() => void) | null = null;
 
-  const getContent = (): IWorkbookData | null => univerAPI.getActiveWorkbook()?.save() ?? null;
+  const getContent = (): IWorkbookData | null => {
+    const snap = univerAPI.getActiveWorkbook()?.save() ?? null;
+    if (!snap || customResources.size === 0) return snap;
+    // Re-attach the SDK-owned resources Univer dropped on save.
+    const resources = (snap.resources ?? []).filter((r) => !CUSTOM_RESOURCE_NAMES.has(r.name));
+    for (const [name, data] of customResources) resources.push({ name, data });
+    return { ...snap, resources };
+  };
 
   const setContent = (data: IWorkbookData): void => {
+    // Capture the SDK-owned resources before Univer drops them on the swap.
+    captureCustom(data.resources);
     swapWorkbook(data);
     // A fresh snapshot is a clean buffer until the user edits it.
     markDirty(false);