@casualoffice/sheets 0.18.0 → 0.19.0

package/src/chrome/TablesPanel.tsx

@@ -0,0 +1,301 @@
+/**
+ * Copyright 2026 Casual Office
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ */
+
+/**
+ * Tables side panel: lists the formatted tables on the active sheet with
+ * inline rename, theme swatches, and delete. Ported from the standalone app's
+ * TablesPanel — the app-only `useUI`/`useBusy` couplings are replaced by the
+ * panel host's `onClose`, and the Univer facade is reached through `api.univer`.
+ */
+import { useEffect, useMemo, useState, type CSSProperties } from 'react';
+
+import { ensurePluginByName } from '../univer';
+import type { PanelComponentProps } from './extensions';
+import { Icon } from './Icon';
+
+// Univer's six built-in table themes, surfaced as swatches.
+const TABLE_THEMES = [
+  { id: 'table-default-0', label: 'Indigo', swatch: '#6280F9' },
+  { id: 'table-default-1', label: 'Teal', swatch: '#16BDCA' },
+  { id: 'table-default-2', label: 'Green', swatch: '#31C48D' },
+  { id: 'table-default-3', label: 'Purple', swatch: '#AC94FA' },
+  { id: 'table-default-4', label: 'Pink', swatch: '#F17EBB' },
+  { id: 'table-default-5', label: 'Red', swatch: '#F98080' },
+] as const;
+type TableThemeId = (typeof TABLE_THEMES)[number]['id'];
+
+interface TableRange {
+  startRow: number;
+  startColumn: number;
+  endRow: number;
+  endColumn: number;
+}
+interface RawTable {
+  id: string;
+  name: string;
+  subUnitId: string;
+  range: TableRange;
+}
+interface TableInfo extends RawTable {
+  styleId: string;
+}
+
+function colLetters(col: number): string {
+  let n = col + 1;
+  let out = '';
+  while (n > 0) {
+    const r = (n - 1) % 26;
+    out = String.fromCharCode(65 + r) + out;
+    n = Math.floor((n - 1) / 26);
+  }
+  return out;
+}
+function toA1(r: TableRange): string {
+  const start = `${colLetters(r.startColumn)}${r.startRow + 1}`;
+  const end = `${colLetters(r.endColumn)}${r.endRow + 1}`;
+  return start === end ? start : `${start}:${end}`;
+}
+
+const REFRESH_CMDS = new Set([
+  'sheet.command.add-table',
+  'sheet.command.delete-table',
+  'sheet.command.set-table-config',
+  'sheet.mutation.add-table',
+  'sheet.mutation.set-table-config',
+  'sheet.mutation.delete-table',
+  'sheet.operation.set-worksheet-activate',
+  'doc.command-replace-snapshot',
+]);
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function readTables(univer: any, sheetId: string | null): TableInfo[] {
+  try {
+    const wb = univer.getActiveWorkbook?.();
+    if (!wb) return [];
+    const all: RawTable[] = wb.getTableList?.() ?? [];
+    return all
+      .filter((t) => (sheetId ? t.subUnitId === sheetId : true))
+      .map((t) => ({ ...t, styleId: 'table-default-0' }));
+  } catch {
+    // Table plugin still registering — the CommandExecuted subscription
+    // recomputes once it's ready.
+    return [];
+  }
+}
+
+const header: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  padding: '10px 12px',
+  borderBottom: '1px solid var(--cs-chrome-border, #edeff3)',
+};
+
+export function TablesPanel({ api, onClose }: PanelComponentProps) {
+  const univer = (api as any).univer;
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [renaming, setRenaming] = useState<{ id: string; draft: string } | null>(null);
+
+  useEffect(() => {
+    if (!univer) return;
+    let cancelled = false;
+    let disp: { dispose?: () => void } | undefined;
+    const compute = () => {
+      if (cancelled) return;
+      const sheetId = univer.getActiveWorkbook?.()?.getActiveSheet?.()?.getSheetId?.() ?? null;
+      setTables(readTables(univer, sheetId));
+    };
+    // The table plugin is lazy-loaded — `getTableList()` resolves SheetTableService
+    // and throws if the plugin isn't registered yet, so ensure it before reading.
+    void ensurePluginByName('table').then(() => {
+      if (cancelled) return;
+      compute();
+      disp = univer.addEvent(univer.Event.CommandExecuted, (e: { id?: string }) => {
+        if (e.id && REFRESH_CMDS.has(e.id)) compute();
+      });
+    });
+    return () => {
+      cancelled = true;
+      disp?.dispose?.();
+    };
+  }, [univer]);
+
+  const themesById = useMemo(() => {
+    const m = new Map<string, (typeof TABLE_THEMES)[number]>();
+    for (const t of TABLE_THEMES) m.set(t.id, t);
+    return m;
+  }, []);
+
+  const empty = tables.length === 0;
+
+  const onRenameCommit = async (id: string, currentName: string) => {
+    if (!renaming || renaming.id !== id) return;
+    const next = renaming.draft.trim();
+    setRenaming(null);
+    if (!next || next === currentName) return;
+    const sheet = univer.getActiveWorkbook?.()?.getActiveSheet?.();
+    if (!sheet) return;
+    await ensurePluginByName('table');
+    const ok = await Promise.resolve(sheet.setTableName?.(id, next));
+    if (ok === false) console.warn(`[tables] rename rejected: "${next}"`);
+  };
+
+  const onPickTheme = async (id: string, themeId: TableThemeId) => {
+    const wb = univer.getActiveWorkbook?.();
+    if (!wb) return;
+    await ensurePluginByName('table');
+    univer.executeCommand('sheet.command.set-table-config', {
+      unitId: wb.getId(),
+      tableId: id,
+      theme: themeId,
+    });
+  };
+
+  const onDelete = async (id: string) => {
+    const wb = univer.getActiveWorkbook?.();
+    if (!wb) return;
+    await ensurePluginByName('table');
+    wb.removeTable?.(id);
+  };
+
+  return (
+    <div
+      data-testid="cs-tables-panel"
+      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+    >
+      <header style={header}>
+        <Icon name="table" size={18} />
+        <span style={{ fontWeight: 600, flex: 1 }}>Tables</span>
+        {!empty && <span style={{ opacity: 0.6, fontSize: 12 }}>{tables.length}</span>}
+        <button
+          type="button"
+          aria-label="Close tables panel"
+          onClick={onClose}
+          style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'inherit' }}
+        >
+          <Icon name="close" size={18} />
+        </button>
+      </header>
+
+      <div style={{ flex: 1, overflow: 'auto', padding: 12 }}>
+        {empty ? (
+          <div
+            data-testid="cs-tables-panel-empty"
+            style={{ textAlign: 'center', opacity: 0.75, padding: '24px 8px' }}
+          >
+            <Icon name="table_rows" size={40} style={{ opacity: 0.4 }} />
+            <div style={{ fontWeight: 600, marginTop: 8 }}>No tables on this sheet</div>
+            <div style={{ fontSize: 13, marginTop: 4 }}>
+              Select your data, then use <strong>Insert → Table</strong> from the menu.
+            </div>
+          </div>
+        ) : (
+          <ul
+            style={{
+              listStyle: 'none',
+              margin: 0,
+              padding: 0,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 8,
+            }}
+          >
+            {tables.map((t) => {
+              const isRenaming = renaming?.id === t.id;
+              const theme = themesById.get(t.styleId);
+              return (
+                <li
+                  key={t.id}
+                  data-testid={`cs-tables-panel-row-${t.id}`}
+                  style={{
+                    border: '1px solid var(--cs-chrome-border, #edeff3)',
+                    borderRadius: 8,
+                    padding: 10,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 6,
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    {isRenaming ? (
+                      <input
+                        autoFocus
+                        value={renaming.draft}
+                        onChange={(e) => setRenaming({ id: t.id, draft: e.target.value })}
+                        onBlur={() => onRenameCommit(t.id, t.name)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') onRenameCommit(t.id, t.name);
+                          if (e.key === 'Escape') setRenaming(null);
+                        }}
+                        style={{ flex: 1, font: 'inherit', padding: '2px 4px' }}
+                      />
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={() => setRenaming({ id: t.id, draft: t.name })}
+                        title="Click to rename"
+                        style={{
+                          flex: 1,
+                          textAlign: 'left',
+                          border: 'none',
+                          background: 'transparent',
+                          cursor: 'pointer',
+                          font: 'inherit',
+                          fontWeight: 600,
+                          color: 'inherit',
+                        }}
+                      >
+                        {t.name}
+                      </button>
+                    )}
+                    <span style={{ opacity: 0.6, fontSize: 12 }}>{toA1(t.range)}</span>
+                    <button
+                      type="button"
+                      aria-label={`Delete table ${t.name}`}
+                      title="Delete table"
+                      onClick={() => onDelete(t.id)}
+                      style={{
+                        border: 'none',
+                        background: 'transparent',
+                        cursor: 'pointer',
+                        color: 'inherit',
+                      }}
+                    >
+                      <Icon name="delete" size={16} />
+                    </button>
+                  </div>
+                  <div role="group" aria-label="Table theme" style={{ display: 'flex', gap: 4 }}>
+                    {TABLE_THEMES.map((opt) => (
+                      <button
+                        key={opt.id}
+                        type="button"
+                        title={opt.label}
+                        aria-label={opt.label}
+                        aria-pressed={theme?.id === opt.id}
+                        onClick={() => onPickTheme(t.id, opt.id)}
+                        style={{
+                          width: 18,
+                          height: 18,
+                          borderRadius: 4,
+                          cursor: 'pointer',
+                          background: opt.swatch,
+                          border:
+                            theme?.id === opt.id
+                              ? '2px solid var(--cs-chrome-active-fg, #0e7490)'
+                              : '1px solid rgba(0,0,0,0.15)',
+                        }}
+                      />
+                    ))}
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/chrome/panel-context.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright 2026 Casual Office
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ */
+
+/**
+ * Panel store for the SDK chrome's side-panel rail (Tables/Charts/Comments/…).
+ *
+ * A single `openPanelId` is the whole state — that IS the mutex: opening one
+ * panel closes any other, exactly like the standalone app's PanelMutex, but
+ * without the app-only `ui-context`. The rail toggles panels through here and
+ * the panel host renders whichever id is open. Kept deliberately tiny so the
+ * chrome stays a thin shell around Univer.
+ */
+import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';
+
+export interface PanelStore {
+  /** The id of the currently-open panel, or null when the rail is all-closed. */
+  openPanelId: string | null;
+  /** Open `id`, replacing whatever was open (mutex). */
+  open: (id: string) => void;
+  /** Close the open panel. */
+  close: () => void;
+  /** Toggle `id`: open it if closed, close it if it's the open one. */
+  toggle: (id: string) => void;
+}
+
+const PanelContext = createContext<PanelStore | null>(null);
+
+export function PanelProvider({ children }: { children: ReactNode }) {
+  const [openPanelId, setOpenPanelId] = useState<string | null>(null);
+  const store = useMemo<PanelStore>(
+    () => ({
+      openPanelId,
+      open: (id) => setOpenPanelId(id),
+      close: () => setOpenPanelId(null),
+      toggle: (id) => setOpenPanelId((cur) => (cur === id ? null : id)),
+    }),
+    [openPanelId],
+  );
+  return <PanelContext.Provider value={store}>{children}</PanelContext.Provider>;
+}
+
+/** Read the panel store. Returns a no-op store when used outside a provider. */
+export function usePanels(): PanelStore {
+  return (
+    useContext(PanelContext) ?? {
+      openPanelId: null,
+      open: () => {},
+      close: () => {},
+      toggle: () => {},
+    }
+  );
+}

package/src/chrome/panel-registry.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2026 Casual Office
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ */
+
+/**
+ * Built-in side panels the SDK chrome ships (mirrors `BUILT_IN_DIALOGS`). Each
+ * entry gets a rail button + a body rendered by the panel host. Hosts can add
+ * more via `extensions.panels` (see extensions.ts) — those are merged after
+ * these on the rail.
+ */
+import { lazy, type ComponentType } from 'react';
+
+import type { PanelComponentProps } from './extensions';
+import { TablesPanel } from './TablesPanel';
+import { PivotFieldsPanel } from './PivotFieldsPanel';
+import { CommentsPanel } from './CommentsPanel';
+import { HistoryPanel } from './HistoryPanel';
+// Charts panel pulls echarts — lazy so it (and echarts) only load when the
+// panel is first opened. PanelHost renders panels inside a Suspense boundary.
+const ChartsPanel = lazy(() =>
+  import('../charts/ChartsPanel').then((m) => ({ default: m.ChartsPanel })),
+);
+
+export interface BuiltInPanel {
+  /** Stable id (rail `data-testid` `cs-panel-rail-<id>`, mutex key). */
+  id: string;
+  /** Rail button tooltip / aria-label. */
+  label: string;
+  /** Material Symbols icon name for the rail button. */
+  icon: string;
+  /** The panel body; receives `{ api, onClose }`. */
+  component: ComponentType<PanelComponentProps>;
+}
+
+export const BUILT_IN_PANELS: BuiltInPanel[] = [
+  { id: 'tables', label: 'Tables', icon: 'table', component: TablesPanel },
+  {
+    id: 'pivot',
+    label: 'PivotTable Fields',
+    icon: 'pivot_table_chart',
+    component: PivotFieldsPanel,
+  },
+  { id: 'charts', label: 'Charts', icon: 'analytics', component: ChartsPanel },
+  { id: 'comments', label: 'Comments', icon: 'forum', component: CommentsPanel },
+  { id: 'history', label: 'History', icon: 'history', component: HistoryPanel },
+];

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
@@ -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>
   );
 }