@casualoffice/sheets 0.17.0 → 0.18.0

package/src/chrome/NameManagerDialog.tsx

@@ -0,0 +1,378 @@
+/**
+ * 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.
+ */
+
+/**
+ * NameManagerDialog — the SDK chrome's built-in Name Manager (defined names).
+ *
+ * Mirrors the Data Validation / Format Cells exemplars: it reaches the workbook
+ * off the FUniver facade and drives the workbook's defined-name API to list,
+ * add, edit, and delete named ranges. Grounded in
+ * `@univerjs/sheets/lib/types/facade/f-workbook.d.ts`:
+ *   - `getDefinedNames(): FDefinedName[]`                       (L571)
+ *   - `getDefinedName(name): FDefinedName | null`              (L559)
+ *   - `insertDefinedName(name, formulaOrRefString): FWorkbook` (L639)
+ *   - `deleteDefinedName(name): boolean`                       (L651)
+ *   - `updateDefinedNameBuilder(param): void`                  (L626)
+ * and `f-defined-name.d.ts`: `FDefinedName.getName()` (L221) /
+ * `getFormulaOrRefString()` (L265) / `toBuilder()` (L385); the builder's
+ * `setName` (L44) / `setRef` (L74) / `build()` (L175). The "add from selection"
+ * ref comes from `FRange.getA1Notation(true)` (sheet-qualified, e.g.
+ * `Sheet1!A1:B2` — `f-range.d.ts` L1220), which is exactly the shape
+ * `insertDefinedName`'s `formulaOrRefString` accepts.
+ *
+ * Univer's defined-name API is unscoped by name (no id needed here): to "edit" a
+ * name we rebuild it from `getDefinedName(oldName).toBuilder()`, preserving its
+ * identity while updating name + ref, then `updateDefinedNameBuilder`.
+ *
+ * Mounted by `<DialogHost>` when `openDialog('name-manager')` is called and no
+ * host override is registered.
+ */
+
+import { useCallback, useMemo, useState, type CSSProperties } from 'react';
+import type { DialogComponentProps } from './extensions';
+import type { CasualSheetsAPI } from '../sheets/api';
+import { Dialog } from './Dialog';
+import {
+  DIALOG_BTN_PRIMARY_STYLE,
+  DIALOG_BTN_SECONDARY_STYLE,
+  DIALOG_FIELD_STYLE,
+  DIALOG_INPUT_STYLE,
+  DIALOG_LABEL_STYLE,
+} from './dialog-styles';
+
+/** Minimal shape of the FDefinedNameBuilder chain we use (grounded in f-defined-name.ts). */
+interface FDefinedNameBuilderLike {
+  setName(name: string): FDefinedNameBuilderLike;
+  setRef(a1Notation: string): FDefinedNameBuilderLike;
+  build(): unknown;
+}
+
+/** Minimal shape of an FDefinedName we read (grounded in f-defined-name.ts). */
+interface FDefinedNameLike {
+  getName(): string;
+  getFormulaOrRefString(): string;
+  toBuilder(): FDefinedNameBuilderLike;
+}
+
+/** Minimal shape of the FWorkbook defined-name surface (grounded in f-workbook.d.ts). */
+interface FWorkbookLike {
+  getDefinedNames(): FDefinedNameLike[];
+  getDefinedName(name: string): FDefinedNameLike | null;
+  insertDefinedName(name: string, formulaOrRefString: string): unknown;
+  deleteDefinedName(name: string): boolean;
+  updateDefinedNameBuilder(param: unknown): void;
+  getActiveSheet(): {
+    getActiveRange(): { getA1Notation(withSheet?: boolean): string } | null;
+  } | null;
+}
+
+interface NameRow {
+  name: string;
+  refersTo: string;
+}
+
+/** Names must start with a letter/underscore and avoid A1-like tokens; keep it
+ *  loose but block the common mistakes (spaces, leading digit, empty). */
+const NAME_RE = /^[A-Za-z_][A-Za-z0-9_.]*$/;
+
+function workbook(api: CasualSheetsAPI): FWorkbookLike | null {
+  return (api.univer.getActiveWorkbook() as unknown as FWorkbookLike | null) ?? null;
+}
+
+function readRows(api: CasualSheetsAPI): NameRow[] {
+  const wb = workbook(api);
+  if (!wb) return [];
+  return wb.getDefinedNames().map((dn) => ({
+    name: dn.getName(),
+    refersTo: dn.getFormulaOrRefString(),
+  }));
+}
+
+/** Sheet-qualified A1 of the current selection, e.g. `Sheet1!A1:B2`, or ''. */
+function selectionRef(api: CasualSheetsAPI): string {
+  const range = workbook(api)?.getActiveSheet()?.getActiveRange();
+  return range?.getA1Notation(true) ?? '';
+}
+
+const ROW_STYLE: CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: '1fr 1.3fr auto',
+  alignItems: 'center',
+  gap: 8,
+  padding: '6px 8px',
+  borderBottom: '1px solid var(--cs-chrome-border, #edeff3)',
+};
+
+const LIST_STYLE: CSSProperties = {
+  border: '1px solid var(--cs-chrome-border, #cdd3db)',
+  borderRadius: 6,
+  maxHeight: 200,
+  overflow: 'auto',
+  marginBottom: 16,
+};
+
+const EMPTY_STYLE: CSSProperties = {
+  padding: '16px 8px',
+  fontSize: 13,
+  color: 'var(--cs-chrome-muted, #605e5c)',
+  textAlign: 'center',
+};
+
+const REF_CELL_STYLE: CSSProperties = {
+  fontSize: 12,
+  color: 'var(--cs-chrome-muted, #605e5c)',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+};
+
+const ROW_ACTIONS_STYLE: CSSProperties = {
+  display: 'flex',
+  gap: 4,
+};
+
+const SMALL_BTN_STYLE: CSSProperties = {
+  ...DIALOG_BTN_SECONDARY_STYLE,
+  height: 24,
+  padding: '0 8px',
+  fontSize: 12,
+};
+
+const SECTION_TITLE_STYLE: CSSProperties = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  margin: '0 0 8px',
+};
+
+const ERROR_STYLE: CSSProperties = {
+  fontSize: 12,
+  color: 'var(--cs-chrome-danger, #b91c1c)',
+  marginBottom: 8,
+};
+
+const TWO_COL_STYLE: CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: '1fr 1.3fr',
+  gap: 8,
+};
+
+export function NameManagerDialog({ api, onClose }: DialogComponentProps) {
+  const [rows, setRows] = useState<NameRow[]>(() => readRows(api));
+  // When editing, this holds the ORIGINAL name of the row being edited (used to
+  // locate + update it). null means we're adding a new name.
+  const [editingOriginal, setEditingOriginal] = useState<string | null>(null);
+  const [nameInput, setNameInput] = useState('');
+  const [refInput, setRefInput] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const initialSelRef = useMemo(() => selectionRef(api), [api]);
+
+  const refresh = useCallback(() => setRows(readRows(api)), [api]);
+
+  const resetForm = useCallback(() => {
+    setEditingOriginal(null);
+    setNameInput('');
+    setRefInput('');
+    setError(null);
+  }, []);
+
+  const startEdit = (row: NameRow) => {
+    setEditingOriginal(row.name);
+    setNameInput(row.name);
+    setRefInput(row.refersTo);
+    setError(null);
+  };
+
+  const useSelection = () => {
+    const ref = selectionRef(api);
+    if (ref) setRefInput(ref);
+  };
+
+  const remove = (row: NameRow) => {
+    const wb = workbook(api);
+    if (!wb) return;
+    wb.deleteDefinedName(row.name);
+    if (editingOriginal === row.name) resetForm();
+    refresh();
+  };
+
+  const submit = () => {
+    const wb = workbook(api);
+    if (!wb) {
+      setError('No active workbook.');
+      return;
+    }
+    const name = nameInput.trim();
+    const ref = refInput.trim();
+    if (!name) {
+      setError('Enter a name.');
+      return;
+    }
+    if (!NAME_RE.test(name)) {
+      setError('Names must start with a letter or underscore and contain no spaces.');
+      return;
+    }
+    if (!ref) {
+      setError('Enter a range or formula (e.g. Sheet1!A1:B2).');
+      return;
+    }
+
+    // Duplicate-name guard: allow keeping the same name while editing, but block
+    // colliding with a different existing name.
+    const collides = rows.some(
+      (r) => r.name.toLowerCase() === name.toLowerCase() && r.name !== editingOriginal,
+    );
+    if (collides) {
+      setError(`A defined name "${name}" already exists.`);
+      return;
+    }
+
+    if (editingOriginal === null) {
+      // Add.
+      wb.insertDefinedName(name, ref);
+    } else {
+      // Edit — rebuild from the existing name to preserve identity/scope, then
+      // update. If the row vanished (e.g. deleted elsewhere) fall back to insert.
+      const existing = wb.getDefinedName(editingOriginal);
+      if (existing) {
+        const param = existing.toBuilder().setName(name).setRef(ref).build();
+        wb.updateDefinedNameBuilder(param);
+      } else {
+        wb.insertDefinedName(name, ref);
+      }
+    }
+
+    refresh();
+    resetForm();
+  };
+
+  const isEditing = editingOriginal !== null;
+
+  return (
+    <Dialog
+      title="Name manager"
+      onClose={onClose}
+      width={480}
+      data-testid="cs-name-manager-dialog"
+      footer={
+        <>
+          <span style={{ flex: 1 }} />
+          <button type="button" style={DIALOG_BTN_SECONDARY_STYLE} onClick={onClose}>
+            Close
+          </button>
+        </>
+      }
+    >
+      <h3 style={SECTION_TITLE_STYLE}>Defined names</h3>
+      <div style={LIST_STYLE} data-testid="cs-name-manager-list">
+        {rows.length === 0 ? (
+          <div style={EMPTY_STYLE} data-testid="cs-name-manager-empty">
+            No defined names yet. Add one below.
+          </div>
+        ) : (
+          rows.map((row) => (
+            <div key={row.name} style={ROW_STYLE} data-testid="cs-name-manager-row">
+              <span style={{ fontWeight: 500 }}>{row.name}</span>
+              <span style={REF_CELL_STYLE} title={row.refersTo}>
+                {row.refersTo}
+              </span>
+              <span style={ROW_ACTIONS_STYLE}>
+                <button
+                  type="button"
+                  style={SMALL_BTN_STYLE}
+                  data-testid="cs-name-manager-edit"
+                  onClick={() => startEdit(row)}
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  style={SMALL_BTN_STYLE}
+                  data-testid="cs-name-manager-delete"
+                  onClick={() => remove(row)}
+                >
+                  Delete
+                </button>
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+
+      <h3 style={SECTION_TITLE_STYLE}>{isEditing ? 'Edit name' : 'Add a name'}</h3>
+
+      {error && (
+        <div style={ERROR_STYLE} data-testid="cs-name-manager-error">
+          {error}
+        </div>
+      )}
+
+      <div style={TWO_COL_STYLE}>
+        <label style={DIALOG_FIELD_STYLE}>
+          <span style={DIALOG_LABEL_STYLE}>Name</span>
+          <input
+            style={DIALOG_INPUT_STYLE}
+            data-testid="cs-name-manager-name"
+            value={nameInput}
+            placeholder="MyRange"
+            onChange={(e) => setNameInput(e.target.value)}
+          />
+        </label>
+        <label style={DIALOG_FIELD_STYLE}>
+          <span style={DIALOG_LABEL_STYLE}>Refers to</span>
+          <input
+            style={DIALOG_INPUT_STYLE}
+            data-testid="cs-name-manager-ref"
+            value={refInput}
+            placeholder={initialSelRef || 'Sheet1!A1:B2'}
+            onChange={(e) => setRefInput(e.target.value)}
+          />
+        </label>
+      </div>
+
+      <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
+        <button
+          type="button"
+          style={DIALOG_BTN_SECONDARY_STYLE}
+          data-testid="cs-name-manager-use-selection"
+          onClick={useSelection}
+        >
+          Use selection
+        </button>
+        <span style={{ flex: 1 }} />
+        {isEditing && (
+          <button
+            type="button"
+            style={DIALOG_BTN_SECONDARY_STYLE}
+            data-testid="cs-name-manager-cancel-edit"
+            onClick={resetForm}
+          >
+            Cancel
+          </button>
+        )}
+        <button
+          type="button"
+          style={DIALOG_BTN_PRIMARY_STYLE}
+          data-testid="cs-name-manager-submit"
+          onClick={submit}
+        >
+          {isEditing ? 'Update' : 'Add'}
+        </button>
+      </div>
+    </Dialog>
+  );
+}

package/src/chrome/PasteSpecialDialog.tsx

@@ -0,0 +1,286 @@
+/**
+ * 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.
+ */
+
+/**
+ * PasteSpecialDialog — the SDK chrome's built-in Paste Special modal.
+ *
+ * Copies the DataValidationDialog/FormatCellsDialog structure: reads the active
+ * A1 selection off the FUniver facade, gathers a mode via a small form, and
+ * applies through real Univer commands / facade calls (no app context).
+ *
+ * Modes → mechanism (all grounded in the INSTALLED @univerjs/sheets-ui build):
+ *   - values   → `sheet.command.paste` with `{ value: 'special-paste-value' }`
+ *   - formats  → `sheet.command.paste` with `{ value: 'special-paste-format' }`
+ *   - formulas → `sheet.command.paste` with `{ value: 'special-paste-formula' }`
+ *
+ *     The special-paste hook names live in `PREDEFINED_HOOK_NAME_PASTE`
+ *     (sheets-ui/lib/es/index.js: SPECIAL_PASTE_VALUE/FORMAT/FORMULA), and the
+ *     dedicated `SheetPasteValueCommand`/`SheetPasteFormatCommand` handlers just
+ *     forward `SheetPasteCommand.id` (= 'sheet.command.paste', name verified in
+ *     the same build) with those `{ value }` params. We dispatch the base
+ *     `sheet.command.paste` with the matching hook value so all three modes go
+ *     through one real, installed command — including 'formulas', which has no
+ *     dedicated `sheet.command.paste-*` id but IS a valid paste hook.
+ *
+ *   - transpose → in-place matrix flip via the sheets facade:
+ *     `FRange.getValues()` → transpose → `getRange(row, col, cols, rows)` →
+ *     `.setValues()`. There is NO transpose paste command anywhere in the
+ *     installed sheets/sheets-ui build (grep 'transpose' returns nothing), so
+ *     rather than stub it we transpose the CURRENT selection in place using the
+ *     real `getValues`/`getRange`/`setValues` facade methods (verified in
+ *     @univerjs/sheets/facade f-range.d.ts + f-worksheet.d.ts). See the
+ *     `limitations` note: this transposes the selection itself, not clipboard
+ *     contents (the facade exposes no clipboard-transpose primitive).
+ *
+ * Mounted by `<DialogHost>` when `openDialog('paste-special')` is called and no
+ * host override is registered.
+ */
+
+import { useMemo, useState, type CSSProperties } from 'react';
+// Side-effect import: installs the sheets-ui facade extensions and registers
+// the clipboard/paste commands on the FUniver facade so
+// `executeCommand('sheet.command.paste', …)` resolves at runtime. Mirrors the
+// `@univerjs/sheets/facade` side-effect import the SDK's api.ts already does for
+// the core sheets mixins.
+import '@univerjs/sheets-ui/facade';
+import type { DialogComponentProps } from './extensions';
+import type { CasualSheetsAPI } from '../sheets/api';
+import { Dialog } from './Dialog';
+import {
+  DIALOG_BTN_PRIMARY_STYLE,
+  DIALOG_BTN_SECONDARY_STYLE,
+  DIALOG_FIELD_STYLE,
+  DIALOG_LABEL_STYLE,
+} from './dialog-styles';
+
+/** Paste-special modes this dialog offers. */
+type PasteMode = 'values' | 'formats' | 'formulas' | 'transpose';
+
+const MODE_OPTIONS: Array<{ value: PasteMode; label: string; hint: string }> = [
+  {
+    value: 'values',
+    label: 'Values only',
+    hint: 'Paste cell values, dropping formatting and formulas.',
+  },
+  {
+    value: 'formats',
+    label: 'Formats only',
+    hint: 'Paste number formats, fonts, borders and fills — no values.',
+  },
+  {
+    value: 'formulas',
+    label: 'Formulas only',
+    hint: 'Paste formulas, adjusting relative references.',
+  },
+  {
+    value: 'transpose',
+    label: 'Transpose',
+    hint: 'Flip the current selection — rows become columns and columns become rows, in place.',
+  },
+];
+
+/** Paste hook names from sheets-ui `PREDEFINED_HOOK_NAME_PASTE`. */
+const PASTE_HOOK: Record<'values' | 'formats' | 'formulas', string> = {
+  values: 'special-paste-value',
+  formats: 'special-paste-format',
+  formulas: 'special-paste-formula',
+};
+
+/** The base sheets paste command; the special modes are `{ value: <hook> }`. */
+const SHEET_PASTE_COMMAND = 'sheet.command.paste';
+
+/** Minimal shape of the FRange we lean on for the transpose path. */
+interface TransposableRange {
+  getRow(): number;
+  getColumn(): number;
+  getWidth(): number;
+  getHeight(): number;
+  getValues(): unknown[][];
+  getA1Notation?(): string;
+}
+
+/** The active FRange, or null when there is no selection. */
+function activeRange(api: CasualSheetsAPI) {
+  return api.univer.getActiveWorkbook()?.getActiveSheet()?.getActiveRange() ?? null;
+}
+
+/**
+ * Transpose the current selection in place using the sheets facade: read the
+ * value matrix, flip it, then write it back into a range whose rows/columns are
+ * swapped, anchored at the same top-left cell. Returns false when there is no
+ * selection or nothing to transpose.
+ */
+function transposeSelection(api: CasualSheetsAPI): boolean {
+  const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+  const range = sheet?.getActiveRange() as unknown as TransposableRange | null;
+  if (!sheet || !range) return false;
+
+  const rows = range.getHeight();
+  const cols = range.getWidth();
+  if (rows <= 0 || cols <= 0) return false;
+
+  const values = range.getValues();
+  const transposed: unknown[][] = [];
+  for (let c = 0; c < cols; c++) {
+    const newRow: unknown[] = [];
+    for (let r = 0; r < rows; r++) {
+      newRow.push(values[r]?.[c] ?? null);
+    }
+    transposed.push(newRow);
+  }
+
+  // New range: same anchor, swapped dimensions (cols rows × rows columns).
+  const target = sheet.getRange(range.getRow(), range.getColumn(), cols, rows) as unknown as {
+    setValues: (v: unknown[][]) => unknown;
+  };
+  target.setValues(transposed);
+  return true;
+}
+
+/**
+ * Apply the chosen paste-special mode. Values/formats/formulas dispatch the real
+ * `sheet.command.paste` with the matching special-paste hook; transpose flips the
+ * selection in place. Returns a promise that resolves to whether it ran.
+ */
+async function applyPasteSpecial(api: CasualSheetsAPI, mode: PasteMode): Promise<boolean> {
+  if (activeRange(api) === null) return false;
+
+  if (mode === 'transpose') {
+    return transposeSelection(api);
+  }
+
+  return api.executeCommand(SHEET_PASTE_COMMAND, { value: PASTE_HOOK[mode] });
+}
+
+const MODE_RADIO_ROW_STYLE: CSSProperties = {
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: 8,
+  padding: '8px 10px',
+  border: '1px solid var(--cs-chrome-border, #cdd3db)',
+  borderRadius: 6,
+  marginBottom: 8,
+  cursor: 'pointer',
+};
+
+const MODE_RADIO_ROW_ACTIVE_STYLE: CSSProperties = {
+  ...MODE_RADIO_ROW_STYLE,
+  borderColor: 'var(--cs-chrome-active-fg, #0e7490)',
+  background: 'var(--cs-chrome-active-bg, rgba(14, 116, 144, 0.06))',
+};
+
+const MODE_LABEL_STYLE: CSSProperties = {
+  fontSize: 13,
+  fontWeight: 500,
+  color: 'var(--cs-chrome-fg, #201f1e)',
+};
+
+const MODE_HINT_STYLE: CSSProperties = {
+  fontSize: 12,
+  color: 'var(--cs-chrome-muted, #605e5c)',
+  marginTop: 2,
+  lineHeight: 1.35,
+};
+
+const RANGE_NOTE_STYLE: CSSProperties = {
+  fontSize: 12,
+  color: 'var(--cs-chrome-muted, #605e5c)',
+  marginBottom: 12,
+};
+
+export function PasteSpecialDialog({ api, onClose }: DialogComponentProps) {
+  const [mode, setMode] = useState<PasteMode>('values');
+
+  // Read the selection once for the header hint (getA1Notation is verified on
+  // the sheets facade FRange — f-range.d.ts).
+  const rangeLabel = useMemo(() => {
+    const fRange = activeRange(api) as unknown as { getA1Notation?: () => string } | null;
+    return fRange?.getA1Notation?.() ?? null;
+  }, [api]);
+
+  const hasSelection = activeRange(api) !== null;
+
+  const apply = () => {
+    void applyPasteSpecial(api, mode).then((ok) => {
+      if (ok) onClose();
+    });
+  };
+
+  return (
+    <Dialog
+      title="Paste special"
+      onClose={onClose}
+      width={440}
+      data-testid="cs-paste-special-dialog"
+      footer={
+        <>
+          <button type="button" style={DIALOG_BTN_SECONDARY_STYLE} onClick={onClose}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            style={DIALOG_BTN_PRIMARY_STYLE}
+            data-testid="cs-paste-special-apply"
+            disabled={!hasSelection}
+            onClick={apply}
+          >
+            Paste
+          </button>
+        </>
+      }
+    >
+      {hasSelection ? (
+        <div style={RANGE_NOTE_STYLE} data-testid="cs-paste-special-range">
+          {mode === 'transpose' ? 'Transposes' : 'Pastes into'}{' '}
+          <strong>{rangeLabel ?? 'the current selection'}</strong>
+        </div>
+      ) : (
+        <div style={RANGE_NOTE_STYLE} data-testid="cs-paste-special-no-selection">
+          Select the destination cell(s) first, then reopen this dialog.
+        </div>
+      )}
+
+      <div style={DIALOG_FIELD_STYLE}>
+        <span style={DIALOG_LABEL_STYLE}>Paste</span>
+        <div role="radiogroup" aria-label="Paste special mode">
+          {MODE_OPTIONS.map((opt) => {
+            const active = mode === opt.value;
+            return (
+              <label
+                key={opt.value}
+                style={active ? MODE_RADIO_ROW_ACTIVE_STYLE : MODE_RADIO_ROW_STYLE}
+                data-testid={`cs-paste-special-mode-${opt.value}`}
+              >
+                <input
+                  type="radio"
+                  name="cs-paste-special-mode"
+                  value={opt.value}
+                  checked={active}
+                  onChange={() => setMode(opt.value)}
+                  style={{ marginTop: 2 }}
+                />
+                <span>
+                  <span style={MODE_LABEL_STYLE}>{opt.label}</span>
+                  <span style={MODE_HINT_STYLE}>{opt.hint}</span>
+                </span>
+              </label>
+            );
+          })}
+        </div>
+      </div>
+    </Dialog>
+  );
+}

package/src/chrome/dialog-context.tsx

@@ -40,6 +40,18 @@ import { createContext, useCallback, useContext, useMemo, useState, type ReactNo
 import type { CasualSheetsAPI } from '../sheets/api';
 import type { ChromeExtensions, DialogComponentProps } from './extensions';
 import { FormatCellsDialog } from './FormatCellsDialog';
+import { DataValidationDialog } from './DataValidationDialog';
+import { ConditionalFormattingDialog } from './ConditionalFormattingDialog';
+import { CustomSortDialog } from './CustomSortDialog';
+import { PasteSpecialDialog } from './PasteSpecialDialog';
+import { InsertFunctionDialog } from './InsertFunctionDialog';
+import { NameManagerDialog } from './NameManagerDialog';
+import { InsertCellsDialog } from './InsertCellsDialog';
+import { DeleteCellsDialog } from './DeleteCellsDialog';
+import { GoalSeekDialog } from './GoalSeekDialog';
+import { InsertChartDialog } from './InsertChartDialog';
+import { InsertSparklineDialog } from './InsertSparklineDialog';
+import { InsertPivotDialog } from './InsertPivotDialog';
 
 /**
  * All dialog kinds the chrome knows about. Mirrors `MenuDialogKind` in MenuBar
@@ -76,6 +88,18 @@ export type DialogKind =
  */
 const BUILT_IN_DIALOGS: Partial<Record<DialogKind, React.ComponentType<DialogComponentProps>>> = {
   'format-cells': FormatCellsDialog,
+  'data-validation': DataValidationDialog,
+  'conditional-formatting': ConditionalFormattingDialog,
+  'custom-sort': CustomSortDialog,
+  'paste-special': PasteSpecialDialog,
+  'insert-function': InsertFunctionDialog,
+  'name-manager': NameManagerDialog,
+  'insert-cells': InsertCellsDialog,
+  'delete-cells': DeleteCellsDialog,
+  'goal-seek': GoalSeekDialog,
+  'insert-chart': InsertChartDialog,
+  'insert-sparkline': InsertSparklineDialog,
+  'insert-pivot': InsertPivotDialog,
 };
 
 /** Kinds the chrome can open without a host (built-in modal or self-managing). */