@casualoffice/sheets 0.9.0 → 0.10.0

package/src/chrome/SheetTabs.tsx

@@ -0,0 +1,346 @@
+/**
+ * SheetTabs — worksheet tab strip for `<CasualSheets chrome>`.
+ *
+ * The fundamental multi-sheet control the built-in chrome was missing: switch
+ * sheets (click), add a sheet (+), rename (double-click), and delete (context
+ * menu). Drives the editor through the FUniver facade only — `insertSheet` /
+ * `setActiveSheet` / `deleteSheet` / `FWorksheet.setName` — and stays live by
+ * subscribing to the sheet-lifecycle facade events (plus the mutation-level
+ * fallback so collab/replay-driven changes refresh too).
+ *
+ * Scope of this batch: switch / add / rename / delete. Drag-reorder, tab
+ * colour, hide/unhide, and duplicate are richer host features deferred to
+ * later parity batches (the reference app's SheetTabs has them).
+ */
+
+import { useEffect, useState, type CSSProperties, type KeyboardEvent } from 'react';
+import type { CasualSheetsAPI } from '../sheets/api';
+
+interface SheetTab {
+  id: string;
+  name: string;
+  hidden: boolean;
+}
+
+interface SheetsSnapshot {
+  tabs: SheetTab[];
+  activeId: string | null;
+}
+
+const EMPTY: SheetsSnapshot = { tabs: [], activeId: null };
+
+/** Sheet-list mutations that must refresh the strip even when they arrive via
+ *  the collab bridge's mutation-only replay (which bypasses facade events). */
+const SHEET_LIST_MUTATIONS = new Set([
+  'sheet.mutation.insert-sheet',
+  'sheet.mutation.remove-sheet',
+  'sheet.mutation.set-worksheet-name',
+  'sheet.mutation.set-worksheet-order',
+  'sheet.mutation.set-worksheet-hidden',
+]);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyFacade = any;
+
+function readSheets(api: CasualSheetsAPI): SheetsSnapshot {
+  const wb = api.univer.getActiveWorkbook();
+  if (!wb) return EMPTY;
+  const tabs = wb.getSheets().map((s) => ({
+    id: s.getSheetId(),
+    name: s.getSheetName(),
+    hidden: (s as AnyFacade).isSheetHidden?.() === true,
+  }));
+  return { tabs, activeId: wb.getActiveSheet()?.getSheetId() ?? null };
+}
+
+const BAR_STYLE: CSSProperties = {
+  display: 'flex',
+  alignItems: 'stretch',
+  gap: 2,
+  height: 30,
+  flex: '0 0 auto',
+  padding: '0 6px',
+  borderTop: '1px solid var(--cs-chrome-border, rgba(0,0,0,0.12))',
+  background: 'var(--cs-chrome-bg, #f8f9fa)',
+  font: 'inherit',
+  fontSize: 13,
+  overflowX: 'auto',
+  overflowY: 'hidden',
+};
+
+const ADD_BTN_STYLE: CSSProperties = {
+  flex: '0 0 auto',
+  width: 28,
+  border: 'none',
+  background: 'transparent',
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  cursor: 'pointer',
+  fontSize: 18,
+  lineHeight: 1,
+  borderRadius: 4,
+};
+
+const RENAME_INPUT_STYLE: CSSProperties = {
+  height: 22,
+  alignSelf: 'center',
+  padding: '0 6px',
+  border: '1px solid var(--cs-chrome-active-fg, #0e7490)',
+  borderRadius: 4,
+  background: 'var(--cs-chrome-input-bg, #fff)',
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  font: 'inherit',
+  fontSize: 13,
+  width: 120,
+};
+
+const MENU_STYLE: CSSProperties = {
+  position: 'fixed',
+  zIndex: 1000,
+  minWidth: 140,
+  padding: 4,
+  border: '1px solid var(--cs-chrome-border, #e6e9ee)',
+  borderRadius: 8,
+  background: 'var(--cs-chrome-input-bg, #fff)',
+  boxShadow: '0 6px 20px rgba(0,0,0,0.16)',
+};
+
+const MENU_ITEM_STYLE: CSSProperties = {
+  display: 'block',
+  width: '100%',
+  textAlign: 'left',
+  height: 28,
+  padding: '0 10px',
+  border: 'none',
+  borderRadius: 6,
+  background: 'transparent',
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  font: 'inherit',
+  fontSize: 13,
+  cursor: 'pointer',
+};
+
+export interface SheetTabsProps {
+  /** Live API, or `null` until the editor is ready. */
+  api: CasualSheetsAPI | null;
+}
+
+export function SheetTabs({ api }: SheetTabsProps) {
+  const [{ tabs, activeId }, setSnapshot] = useState<SheetsSnapshot>(EMPTY);
+  // Inline-rename target sheet id (null = not renaming) + its draft text.
+  const [renaming, setRenaming] = useState<string | null>(null);
+  const [draft, setDraft] = useState('');
+  // Right-click context menu: anchor + target sheet id.
+  const [menu, setMenu] = useState<{ x: number; y: number; sheetId: string } | null>(null);
+
+  useEffect(() => {
+    if (!api) return;
+    const refresh = () => setSnapshot(readSheets(api));
+    refresh();
+    const f = api.univer as AnyFacade;
+    const subs: Array<{ dispose(): void }> = [];
+    try {
+      subs.push(
+        f.addEvent(f.Event.SheetCreated, refresh),
+        f.addEvent(f.Event.SheetDeleted, refresh),
+        f.addEvent(f.Event.SheetNameChanged, refresh),
+        f.addEvent(f.Event.ActiveSheetChanged, refresh),
+        f.addEvent(f.Event.SheetMoved, refresh),
+        // Mutation-level fallback — catches collab/replay-driven changes that
+        // don't emit the higher-level facade events.
+        f.addEvent(f.Event.CommandExecuted, (e: { id?: string }) => {
+          if (e?.id && SHEET_LIST_MUTATIONS.has(e.id)) refresh();
+        }),
+      );
+      // Whole-unit swaps (loadSnapshot / File→Open) don't fire SheetCreated;
+      // refresh a tick after the new unit is wired in.
+      if (typeof f.onUniverSheetCreated === 'function') {
+        subs.push(f.onUniverSheetCreated(() => queueMicrotask(refresh)));
+      }
+    } catch {
+      /* facade event surface differs — the initial read still populated tabs */
+    }
+    return () => {
+      for (const s of subs) s?.dispose?.();
+    };
+  }, [api]);
+
+  // Close the context menu on any outside interaction.
+  useEffect(() => {
+    if (!menu) return;
+    const close = () => setMenu(null);
+    window.addEventListener('pointerdown', close);
+    window.addEventListener('keydown', close);
+    return () => {
+      window.removeEventListener('pointerdown', close);
+      window.removeEventListener('keydown', close);
+    };
+  }, [menu]);
+
+  if (!api) {
+    return <div style={BAR_STYLE} data-testid="casual-sheets-tabs" />;
+  }
+
+  const visible = tabs.filter((t) => !t.hidden);
+  const wb = () => api.univer.getActiveWorkbook();
+
+  const switchTo = (id: string) => {
+    if (id === activeId) return;
+    wb()?.setActiveSheet(id);
+  };
+
+  const addSheet = () => {
+    const created = (wb() as AnyFacade)?.insertSheet?.();
+    created?.activate?.();
+  };
+
+  const startRename = (tab: SheetTab) => {
+    setMenu(null);
+    setRenaming(tab.id);
+    setDraft(tab.name);
+  };
+
+  const commitRename = () => {
+    const id = renaming;
+    setRenaming(null);
+    if (!id) return;
+    const name = draft.trim();
+    if (!name) return;
+    const sheet = (wb() as AnyFacade)?.getSheetBySheetId?.(id);
+    if (sheet && sheet.getSheetName?.() !== name) sheet.setName?.(name);
+  };
+
+  const deleteSheet = (id: string) => {
+    setMenu(null);
+    // Excel keeps at least one visible sheet — never delete the last one.
+    if (visible.length <= 1) return;
+    (wb() as AnyFacade)?.deleteSheet?.(id);
+  };
+
+  const onRenameKey = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commitRename();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setRenaming(null);
+    }
+  };
+
+  return (
+    <div style={BAR_STYLE} data-testid="casual-sheets-tabs" role="tablist">
+      {visible.map((tab) => {
+        const active = tab.id === activeId;
+        if (renaming === tab.id) {
+          return (
+            <input
+              key={tab.id}
+              autoFocus
+              style={RENAME_INPUT_STYLE}
+              value={draft}
+              data-testid="cs-tab-rename-input"
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={onRenameKey}
+              onBlur={commitRename}
+            />
+          );
+        }
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            data-testid={`cs-tab-${tab.id}`}
+            data-active={active || undefined}
+            title={tab.name}
+            style={{
+              flex: '0 0 auto',
+              maxWidth: 160,
+              padding: '0 12px',
+              border: 'none',
+              borderTop: active
+                ? '2px solid var(--cs-chrome-active-fg, #0e7490)'
+                : '2px solid transparent',
+              background: active ? 'var(--cs-chrome-input-bg, #fff)' : 'transparent',
+              color: active
+                ? 'var(--cs-chrome-active-fg, #0e7490)'
+                : 'var(--cs-chrome-fg, #201f1e)',
+              fontWeight: active ? 600 : 400,
+              font: 'inherit',
+              fontSize: 13,
+              cursor: 'pointer',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+            // mousedown keeps the grid from stealing focus mid-switch.
+            onMouseDown={(e) => {
+              e.preventDefault();
+              switchTo(tab.id);
+            }}
+            onDoubleClick={() => startRename(tab)}
+            onContextMenu={(e) => {
+              e.preventDefault();
+              setMenu({ x: e.clientX, y: e.clientY, sheetId: tab.id });
+            }}
+          >
+            {tab.name}
+          </button>
+        );
+      })}
+      <button
+        type="button"
+        style={ADD_BTN_STYLE}
+        aria-label="Add sheet"
+        title="Add sheet"
+        data-testid="cs-tab-add"
+        onMouseDown={(e) => {
+          e.preventDefault();
+          addSheet();
+        }}
+      >
+        +
+      </button>
+
+      {menu && (
+        <div
+          style={{ ...MENU_STYLE, left: menu.x, top: menu.y }}
+          data-testid="cs-tab-menu"
+          role="menu"
+          // Keep clicks inside the menu from closing it via the window handler.
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          <button
+            type="button"
+            role="menuitem"
+            style={MENU_ITEM_STYLE}
+            data-testid="cs-tab-menu-rename"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              const tab = tabs.find((t) => t.id === menu.sheetId);
+              if (tab) startRename(tab);
+            }}
+          >
+            Rename
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            style={{
+              ...MENU_ITEM_STYLE,
+              opacity: visible.length <= 1 ? 0.5 : 1,
+              cursor: visible.length <= 1 ? 'not-allowed' : 'pointer',
+            }}
+            data-testid="cs-tab-menu-delete"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              deleteSheet(menu.sheetId);
+            }}
+          >
+            Delete
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/chrome/StatusBar.tsx

@@ -0,0 +1,232 @@
+/**
+ * StatusBar — built-in status bar for `<CasualSheets chrome>`.
+ *
+ * Self-contained: reads the active selection through `CasualSheetsAPI` and shows
+ * Excel-style aggregates over it (Average / Count / Numerical Count / Min / Max
+ * / Sum), plus a zoom control on the right (− / level / +, click the level to
+ * reset to 100%). Drives the editor only through the facade + commands.
+ *
+ * Count = non-empty cells (any type); Numerical Count = numeric cells; the
+ * numeric aggregates (Average/Min/Max/Sum) run over the numeric cells only —
+ * matching Excel's status-bar semantics.
+ *
+ * Zoom dispatches the OPERATION `sheet.operation.set-zoom-ratio` (not the
+ * `set-zoom-ratio` / `change-zoom-ratio` commands, which bail when Univer's
+ * always-present formula-bar editor unit reports visible). The operation's
+ * render controller registers in sheets-ui's `onRendered` lifecycle — i.e. a
+ * frame or two after `onReady` — so the buttons just no-op until the grid has
+ * painted; in practice the user can't click that fast.
+ */
+
+import { useEffect, useState, type CSSProperties } from 'react';
+import { ICommandService } from '@univerjs/core';
+import type { CasualSheetsAPI } from '../sheets/api';
+
+interface Stats {
+  /** Non-empty cells (any type). */
+  count: number;
+  /** Numeric cells. */
+  numCount: number;
+  sum: number;
+  avg: number;
+  min: number;
+  max: number;
+}
+
+function readStats(api: CasualSheetsAPI): Stats | null {
+  const sel = api.getSelection();
+  const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+  if (!sel || !sheet) return null;
+  const { startRow, startColumn, endRow, endColumn } = sel.range;
+  // Single cell → nothing to aggregate (matches Excel).
+  if (startRow === endRow && startColumn === endColumn) return null;
+  const values = sheet.getRange(sel.range).getValues?.() as unknown[][] | undefined;
+  if (!values) return null;
+  let count = 0;
+  let numCount = 0;
+  let sum = 0;
+  let min = Infinity;
+  let max = -Infinity;
+  for (const row of values) {
+    for (const v of row) {
+      if (v == null || v === '') continue;
+      count += 1;
+      if (typeof v === 'number' && Number.isFinite(v)) {
+        numCount += 1;
+        sum += v;
+        if (v < min) min = v;
+        if (v > max) max = v;
+      }
+    }
+  }
+  if (count === 0) return null;
+  return { count, numCount, sum, avg: numCount ? sum / numCount : 0, min, max };
+}
+
+/** Current zoom as a fraction (1 = 100%). Reads the live worksheet config via
+ *  the facade's `getSheet()` escape hatch; falls back to 1. */
+function readZoom(api: CasualSheetsAPI): number {
+  const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const ws = (sheet as any)?.getSheet?.();
+  const z = ws?.getConfig?.().zoomRatio;
+  return typeof z === 'number' && z > 0 ? z : 1;
+}
+
+// Trim float noise without locking to a fixed precision.
+function fmt(n: number): string {
+  return Number(n.toFixed(10)).toLocaleString();
+}
+
+const BAR_STYLE: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: 16,
+  height: 24,
+  padding: '0 12px',
+  borderTop: '1px solid var(--cs-chrome-border, rgba(0,0,0,0.12))',
+  background: 'var(--cs-chrome-bg, #f8f9fa)',
+  color: 'var(--cs-chrome-muted, #4b5563)',
+  flex: '0 0 auto',
+  font: 'inherit',
+  fontSize: 12,
+  userSelect: 'none',
+};
+
+const ZOOM_GROUP_STYLE: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+};
+
+const ZOOM_BTN_STYLE: CSSProperties = {
+  width: 20,
+  height: 18,
+  border: 'none',
+  borderRadius: 4,
+  background: 'transparent',
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  cursor: 'pointer',
+  fontSize: 14,
+  lineHeight: 1,
+  padding: 0,
+};
+
+const ZOOM_LEVEL_STYLE: CSSProperties = {
+  minWidth: 40,
+  height: 18,
+  border: 'none',
+  borderRadius: 4,
+  background: 'transparent',
+  color: 'var(--cs-chrome-muted, #4b5563)',
+  cursor: 'pointer',
+  font: 'inherit',
+  fontSize: 12,
+  textAlign: 'center',
+};
+
+export interface StatusBarProps {
+  api: CasualSheetsAPI | null;
+}
+
+export function StatusBar({ api }: StatusBarProps) {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [zoom, setZoom] = useState(1);
+
+  useEffect(() => {
+    if (!api) return;
+    const refresh = () => {
+      setStats(readStats(api));
+      setZoom(readZoom(api));
+    };
+    refresh();
+    const injector = (api.univer as unknown as { _injector?: { get(t: unknown): unknown } })
+      ._injector;
+    const cmd = injector?.get(ICommandService) as
+      | { onCommandExecuted: (cb: () => void) => { dispose: () => void } }
+      | undefined;
+    const sub = cmd?.onCommandExecuted(() => refresh());
+    return () => sub?.dispose();
+  }, [api]);
+
+  // Drive the zoom OPERATION directly — see file header for why not the commands.
+  const setZoomRatio = (ratio: number) => {
+    const wb = api?.univer.getActiveWorkbook();
+    const sheet = wb?.getActiveSheet();
+    if (!wb || !sheet) return;
+    const clamped = Math.min(4, Math.max(0.1, ratio));
+    void api?.executeCommand('sheet.operation.set-zoom-ratio', {
+      unitId: wb.getId(),
+      subUnitId: sheet.getSheetId(),
+      zoomRatio: clamped,
+    });
+    // Optimistic local update — the onCommandExecuted refresh will reconcile.
+    setZoom(clamped);
+  };
+  const zoomBy = (delta: number) => setZoomRatio(Math.round((zoom + delta) * 100) / 100);
+  const resetZoom = () => setZoomRatio(1);
+
+  return (
+    <div style={BAR_STYLE} data-testid="casual-sheets-status-bar">
+      {stats && (
+        <>
+          {stats.numCount > 0 && <span data-stat="average">Average: {fmt(stats.avg)}</span>}
+          <span data-stat="count">Count: {stats.count}</span>
+          {stats.numCount > 0 && (
+            <>
+              <span data-stat="num-count">Numerical Count: {stats.numCount}</span>
+              <span data-stat="min">Min: {fmt(stats.min)}</span>
+              <span data-stat="max">Max: {fmt(stats.max)}</span>
+              <span data-stat="sum">Sum: {fmt(stats.sum)}</span>
+            </>
+          )}
+        </>
+      )}
+      <span style={ZOOM_GROUP_STYLE} data-testid="cs-zoom">
+        <button
+          type="button"
+          style={ZOOM_BTN_STYLE}
+          aria-label="Zoom out"
+          title="Zoom out"
+          data-testid="cs-zoom-out"
+          disabled={!api}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            zoomBy(-0.1);
+          }}
+        >
+          −
+        </button>
+        <button
+          type="button"
+          style={ZOOM_LEVEL_STYLE}
+          aria-label="Reset zoom to 100%"
+          title="Reset zoom to 100%"
+          data-testid="cs-zoom-level"
+          disabled={!api}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            resetZoom();
+          }}
+        >
+          {Math.round(zoom * 100)}%
+        </button>
+        <button
+          type="button"
+          style={ZOOM_BTN_STYLE}
+          aria-label="Zoom in"
+          title="Zoom in"
+          data-testid="cs-zoom-in"
+          disabled={!api}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            zoomBy(0.1);
+          }}
+        >
+          +
+        </button>
+      </span>
+    </div>
+  );
+}