@pixerate/editor-react 0.16.0 → 0.17.0

package/dist/spreadsheet/index.cjs

@@ -31,9 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var spreadsheet_exports = {};
 __export(spreadsheet_exports, {
   FormulaHints: () => FormulaHints,
+  NameManager: () => NameManager,
+  SheetTabs: () => SheetTabs,
+  SpreadsheetConditionalFormatPanel: () => SpreadsheetConditionalFormatPanel,
   SpreadsheetContextMenu: () => SpreadsheetContextMenu,
+  SpreadsheetDataValidationPanel: () => SpreadsheetDataValidationPanel,
   SpreadsheetEditor: () => SpreadsheetEditor,
   SpreadsheetGroupRow: () => SpreadsheetGroupRow,
+  SpreadsheetValidationDialog: () => SpreadsheetValidationDialog,
   useFillHandle: () => useFillHandle,
   useSpreadsheetClipboard: () => useSpreadsheetClipboard,
   useSpreadsheetEditor: () => useSpreadsheetEditor
@@ -69,6 +74,7 @@ function useSpreadsheetEditor(options = {}) {
   const [selectedRange, setSelectedRange] = (0, import_react.useState)(controller.selectedRange);
   const [editingCell, setEditingCell] = (0, import_react.useState)(null);
   const [draftValue, setDraftState] = (0, import_react.useState)("");
+  const [validationPrompt, setValidationPrompt] = (0, import_react.useState)(null);
   settersRef.current = { setDoc, setActiveCell, setSelectedRange };
   const setDraftValue = (0, import_react.useCallback)((value) => {
     controller.draftValue = value;
@@ -93,12 +99,28 @@ function useSpreadsheetEditor(options = {}) {
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
   }, [controller]);
-  const commitEditing = (0, import_react.useCallback)((val) => {
-    controller.commitEditing(val);
-    setEditingCell(null);
-    setDraftValue("");
+  const syncEditing = (0, import_react.useCallback)(() => {
+    setEditingCell(controller.editingCell);
+    setDraftValue(controller.draftValue);
+    setValidationPrompt(controller.validationPrompt);
+    setActiveCell(controller.activeCell);
+    setSelectedRange(controller.selectedRange);
     setDoc({ ...controller.document });
   }, [controller]);
+  const commitEditing = (0, import_react.useCallback)((val) => {
+    const result = controller.commitEditing(val);
+    syncEditing();
+    return result;
+  }, [controller, syncEditing]);
+  const commitCellInput = (0, import_react.useCallback)((rowId, colId, raw) => {
+    const result = controller.commitCellInput(rowId, colId, raw);
+    syncEditing();
+    return result;
+  }, [controller, syncEditing]);
+  const resolveValidationPrompt = (0, import_react.useCallback)((action) => {
+    controller.resolveValidationPrompt(action);
+    syncEditing();
+  }, [controller, syncEditing]);
   const cancelEditing = (0, import_react.useCallback)(() => {
     controller.cancelEditing();
     setEditingCell(null);
@@ -148,13 +170,57 @@ function useSpreadsheetEditor(options = {}) {
   const undo = (0, import_react.useCallback)(() => {
     controller.undo();
     setDoc({ ...controller.document });
+    setActiveCell(controller.activeCell);
+    setSelectedRange(controller.selectedRange);
   }, [controller]);
   const redo = (0, import_react.useCallback)(() => {
     controller.redo();
     setDoc({ ...controller.document });
+    setActiveCell(controller.activeCell);
+    setSelectedRange(controller.selectedRange);
   }, [controller]);
   const tableActions = (0, import_react.useMemo)(() => (0, import_spreadsheet.bindSpreadsheetTableActions)(controller), [controller]);
   const viewModel = (0, import_react.useMemo)(() => controller.getViewModel(), [controller, doc]);
+  const sheets = (0, import_react.useMemo)(() => controller.getSheets(), [controller, doc]);
+  const names = (0, import_react.useMemo)(() => controller.getNames(), [controller, doc]);
+  const afterSheetSwitch = (0, import_react.useCallback)(() => {
+    setEditingCell(controller.editingCell);
+    setDraftValue(controller.draftValue);
+    setActiveCell(controller.activeCell);
+    setSelectedRange(controller.selectedRange);
+    setDoc({ ...controller.document });
+  }, [controller, setDraftValue]);
+  const workbookActions = (0, import_react.useMemo)(
+    () => ({
+      setActiveSheet: (idOrName) => {
+        const changed = controller.setActiveSheet(idOrName);
+        afterSheetSwitch();
+        return changed;
+      },
+      addSheet: (options2) => {
+        const id = controller.addSheet(options2);
+        afterSheetSwitch();
+        return id;
+      },
+      renameSheet: (idOrName, newName) => controller.renameSheet(idOrName, newName),
+      moveSheet: (idOrName, toIndex) => controller.moveSheet(idOrName, toIndex),
+      deleteSheet: (idOrName) => {
+        const deleted = controller.deleteSheet(idOrName);
+        afterSheetSwitch();
+        return deleted;
+      },
+      duplicateSheet: (idOrName, options2) => {
+        const id = controller.duplicateSheet(idOrName, options2);
+        afterSheetSwitch();
+        return id;
+      },
+      defineName: (name, refersTo, options2) => controller.defineName(name, refersTo, options2),
+      renameName: (oldName, newName, options2) => controller.renameName(oldName, newName, options2),
+      deleteName: (name, options2) => controller.deleteName(name, options2)
+    }),
+    [controller, afterSheetSwitch]
+  );
+  const conditionalFormatOverlay = (0, import_react.useMemo)(() => controller.getConditionalFormatOverlay(), [controller, doc]);
   return {
     document: doc,
     activeCell,
@@ -162,6 +228,9 @@ function useSpreadsheetEditor(options = {}) {
     editingCell,
     draftValue,
     setDraftValue,
+    validationPrompt,
+    resolveValidationPrompt,
+    commitCellInput,
     controller,
     getCell: (rowId, colId) => controller.getCell(rowId, colId),
     setCellValue,
@@ -200,21 +269,28 @@ function useSpreadsheetEditor(options = {}) {
     },
     ...tableActions,
     viewModel,
+    /** The sheets in tab order (see `SpreadsheetController.getSheets`). */
+    sheets,
+    activeSheetId: controller.activeSheetId,
+    /** Defined names (see `SpreadsheetController.getNames`). */
+    names,
+    ...workbookActions,
+    conditionalFormatOverlay,
     undo,
     redo
   };
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_react5 = require("react");
-var import_spreadsheet5 = require("@pixerate/editor/spreadsheet");
+var import_react8 = require("react");
+var import_spreadsheet7 = require("@pixerate/editor/spreadsheet");
 
 // src/spreadsheet/SpreadsheetContextMenu.tsx
 var import_react2 = __toESM(require("react"), 1);
 var import_spreadsheet2 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime = require("react/jsx-runtime");
 var VIEWPORT_MARGIN = 4;
-var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
+var SpreadsheetContextMenu = ({ items, x, y, onClose, onOpenPanel, ariaLabel = "Table actions" }) => {
   const menuRef = (0, import_react2.useRef)(null);
   const onCloseRef = (0, import_react2.useRef)(onClose);
   onCloseRef.current = onClose;
@@ -250,7 +326,7 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
     {
       ref: menuRef,
       role: "menu",
-      "aria-label": "Table actions",
+      "aria-label": ariaLabel,
       className: "fixed z-50 min-w-[14rem] rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg",
       style: {
         left: position.x,
@@ -274,7 +350,8 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
             className: `block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent ${item.checked ? "font-semibold" : ""}`,
             onClick: () => {
               onClose();
-              (0, import_spreadsheet2.runSpreadsheetMenuItem)(item);
+              if (item.panel) onOpenPanel?.(item.panel);
+              else (0, import_spreadsheet2.runSpreadsheetMenuItem)(item);
             },
             children: item.label
           }
@@ -406,35 +483,337 @@ function useFillHandle(state) {
   return { fillTarget: drag?.target ?? null, isFilling: dragging, startFill, extendFill };
 }
 
-// src/spreadsheet/FormulaHints.tsx
+// src/spreadsheet/SpreadsheetValidationDialog.tsx
 var import_react4 = require("react");
-var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
-  const [caret, setCaret] = (0, import_react4.useState)(null);
-  const [focused, setFocused] = (0, import_react4.useState)(false);
-  const [selected, setSelected] = (0, import_react4.useState)(0);
-  const [dismissed, setDismissed] = (0, import_react4.useState)(false);
-  const [position, setPosition] = (0, import_react4.useState)(null);
-  const pendingCaret = (0, import_react4.useRef)(null);
-  const hints = (0, import_react4.useMemo)(
-    () => (0, import_spreadsheet4.getFormulaHints)(value, caret ?? value.length, { limit }),
-    [value, caret, limit]
+var SpreadsheetValidationDialog = ({ prompt, onResolve }) => {
+  const style = prompt.result.errorStyle ?? "stop";
+  const firstButton = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    firstButton.current?.focus();
+  }, [prompt]);
+  const buttons = style === "stop" ? [
+    { label: "Retry", action: "retry" },
+    { label: "Cancel", action: "cancel" }
+  ] : style === "warning" ? [
+    { label: "Yes", action: "accept" },
+    { label: "No", action: "retry" },
+    { label: "Cancel", action: "cancel" }
+  ] : [
+    { label: "OK", action: "accept" },
+    { label: "Cancel", action: "cancel" }
+  ];
+  const icon = style === "stop" ? "\u26D4" : style === "warning" ? "\u26A0" : "\u2139";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 z-[60] flex items-center justify-center bg-black/30",
+      onMouseDown: (e) => e.preventDefault(),
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Escape") {
+          e.preventDefault();
+          onResolve("cancel");
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          role: "alertdialog",
+          "aria-modal": "true",
+          "aria-labelledby": "spreadsheet-validation-title",
+          "aria-describedby": "spreadsheet-validation-message",
+          "data-error-style": style,
+          className: "w-[22rem] max-w-[calc(100vw-2rem)] rounded-md border border-border bg-popover p-4 text-xs text-popover-foreground shadow-xl",
+          style: { background: "var(--popover, var(--background, #fff))" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", className: "text-lg leading-none", children: icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { id: "spreadsheet-validation-title", className: "mb-1 text-sm font-semibold", children: prompt.result.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { id: "spreadsheet-validation-message", className: "whitespace-pre-wrap", children: prompt.result.message }),
+                style === "warning" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-2", children: "Continue?" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-4 flex justify-end gap-2", children: buttons.map((button, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                ref: i === 0 ? firstButton : void 0,
+                type: "button",
+                "data-action": button.action,
+                className: `rounded border border-border px-3 py-1 ${i === 0 ? "bg-primary text-primary-foreground" : "hover:bg-muted"}`,
+                onClick: () => onResolve(button.action),
+                children: button.label
+              },
+              button.action
+            )) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/spreadsheet/SpreadsheetRulePanels.tsx
+var import_react5 = require("react");
+var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var inputClass = "w-full rounded border border-border bg-background px-1.5 py-0.5 text-xs text-foreground";
+var buttonClass = "rounded border border-border px-2 py-0.5 hover:bg-muted disabled:opacity-40";
+function selectionText(range) {
+  return range ? (0, import_spreadsheet4.formatRuleRanges)([range]) : "A1";
+}
+var PanelFrame = ({
+  title,
+  label,
+  onClose,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  "div",
+  {
+    role: "dialog",
+    "aria-label": label,
+    className: "fixed right-4 top-16 z-40 flex max-h-[calc(100vh-5rem)] w-80 flex-col overflow-y-auto rounded-md border border-border bg-popover p-3 text-xs text-popover-foreground shadow-lg",
+    style: { background: "var(--popover, var(--background, #fff))" },
+    onKeyDown: (e) => {
+      e.stopPropagation();
+      if (e.key === "Escape") onClose();
+    },
+    onContextMenu: (e) => e.stopPropagation(),
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "text-sm font-semibold", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "aria-label": "Close", className: "px-1 text-muted-foreground hover:text-foreground", onClick: onClose, children: "\u2715" })
+      ] }),
+      children
+    ]
+  }
+);
+function RuleSwatch({ rule }) {
+  if (rule.type === "colorScale") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "inline-block h-3 w-6 shrink-0 rounded-sm border border-border",
+        style: { background: `linear-gradient(90deg, ${rule.stops.map((s) => s.color).join(", ")})` }
+      }
+    );
+  }
+  if (rule.type === "dataBar") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "inline-block h-3 w-6 shrink-0 rounded-sm", style: { background: rule.color ?? "#638ec6" } });
+  }
+  if (rule.type === "iconSet") return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "shrink-0", children: "\u25CF" });
+  const css = (0, import_spreadsheet4.getConditionalFormatCss)(rule.style);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "inline-flex h-4 w-6 shrink-0 items-center justify-center rounded-sm border border-border", style: css, children: "Aa" });
+}
+var SpreadsheetConditionalFormatPanel = ({ state, onClose }) => {
+  const rules = state.document.table?.conditionalFormats ?? [];
+  const [kind, setKind] = (0, import_react5.useState)("greaterThan");
+  const [appliesTo, setAppliesTo] = (0, import_react5.useState)(() => selectionText(state.selectedRange));
+  const [value, setValue] = (0, import_react5.useState)("");
+  const [value2, setValue2] = (0, import_react5.useState)("");
+  const [text, setText] = (0, import_react5.useState)("");
+  const [formula, setFormula] = (0, import_react5.useState)("=");
+  const [rank, setRank] = (0, import_react5.useState)("10");
+  const [period, setPeriod] = (0, import_react5.useState)("today");
+  const [iconSet, setIconSet] = (0, import_react5.useState)("3TrafficLights1");
+  const [color, setColor] = (0, import_react5.useState)("#638ec6");
+  const [styleId, setStyleId] = (0, import_react5.useState)(import_spreadsheet4.CONDITIONAL_FORMAT_STYLE_PRESETS[0].id);
+  const preset = (0, import_react5.useMemo)(() => import_spreadsheet4.CONDITIONAL_FORMAT_PRESETS.find((p) => p.kind === kind), [kind]);
+  const ranges = (0, import_spreadsheet4.parseRuleRanges)(appliesTo);
+  const add = () => {
+    if (!ranges) return;
+    state.addConditionalFormat(
+      (0, import_spreadsheet4.createConditionalFormatRule)({
+        kind,
+        ranges,
+        value,
+        value2,
+        text,
+        formula,
+        rank: Number(rank) || 10,
+        period,
+        iconSet,
+        color,
+        style: import_spreadsheet4.CONDITIONAL_FORMAT_STYLE_PRESETS.find((s) => s.id === styleId)?.style
+      })
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(PanelFrame, { title: "Conditional formatting", label: "Conditional formatting rules", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("ol", { className: "mb-3 flex flex-col gap-1", "aria-label": "Rules in priority order", children: [
+      rules.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: "text-muted-foreground", children: "No rules on this sheet." }),
+      rules.map((rule, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { "data-rule-id": rule.id, className: "flex items-center gap-1.5 rounded border border-border px-1.5 py-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RuleSwatch, { rule }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "truncate", title: (0, import_spreadsheet4.describeConditionalFormat)(rule), children: (0, import_spreadsheet4.describeConditionalFormat)(rule) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "truncate font-mono text-[10px] text-muted-foreground", children: (0, import_spreadsheet4.formatRuleRanges)(rule.ranges) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-0.5 text-[10px]", title: "Stop if true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": "Stop if true",
+              checked: !!rule.stopIfTrue,
+              onChange: (e) => state.updateConditionalFormat(rule.id, { stopIfTrue: e.target.checked })
+            }
+          ),
+          "Stop"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "aria-label": "Move up", className: buttonClass, disabled: i === 0, onClick: () => state.moveConditionalFormat(rule.id, { by: -1 }), children: "\u25B2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Move down",
+            className: buttonClass,
+            disabled: i === rules.length - 1,
+            onClick: () => state.moveConditionalFormat(rule.id, { by: 1 }),
+            children: "\u25BC"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "aria-label": "Delete rule", className: buttonClass, onClick: () => state.deleteConditionalFormat(rule.id), children: "\u2715" })
+      ] }, rule.id))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("fieldset", { className: "flex flex-col gap-1.5 border-t border-border pt-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("legend", { className: "sr-only", children: "New rule" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
+        "Format cells",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Rule type", className: inputClass, value: kind, onChange: (e) => setKind(e.target.value), children: import_spreadsheet4.CONDITIONAL_FORMAT_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: p.kind, children: p.label }, p.kind)) })
+      ] }),
+      preset.fields.includes("value") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Value", placeholder: "Value or =formula", className: inputClass, value, onChange: (e) => setValue(e.target.value) }),
+      preset.fields.includes("value2") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Second value", placeholder: "and", className: inputClass, value: value2, onChange: (e) => setValue2(e.target.value) }),
+      preset.fields.includes("text") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Text", placeholder: "Text", className: inputClass, value: text, onChange: (e) => setText(e.target.value) }),
+      preset.fields.includes("formula") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Formula", placeholder: "=$A1>10", className: inputClass, value: formula, onChange: (e) => setFormula(e.target.value) }),
+      preset.fields.includes("rank") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Rank", type: "number", min: 1, className: inputClass, value: rank, onChange: (e) => setRank(e.target.value) }),
+      preset.fields.includes("period") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Period", className: inputClass, value: period, onChange: (e) => setPeriod(e.target.value), children: import_spreadsheet4.CONDITIONAL_FORMAT_TIME_PERIODS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: p.period, children: p.label }, p.period)) }),
+      preset.fields.includes("iconSet") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Icon set", className: inputClass, value: iconSet, onChange: (e) => setIconSet(e.target.value), children: import_spreadsheet4.CONDITIONAL_FORMAT_ICON_SETS.map((set) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: set, children: set }, set)) }),
+      preset.fields.includes("color") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Bar colour", type: "color", className: "h-6 w-12", value: color, onChange: (e) => setColor(e.target.value) }),
+      preset.usesStyle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Style", className: inputClass, value: styleId, onChange: (e) => setStyleId(e.target.value), children: import_spreadsheet4.CONDITIONAL_FORMAT_STYLE_PRESETS.map((s) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: s.id, children: s.label }, s.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
+        "Applies to",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Applies to", className: `${inputClass} font-mono`, value: appliesTo, onChange: (e) => setAppliesTo(e.target.value) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass, onClick: () => setAppliesTo(selectionText(state.selectedRange)), children: "Use selection" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass, disabled: !ranges, onClick: add, children: "Add rule" })
+      ] })
+    ] })
+  ] });
+};
+var SpreadsheetDataValidationPanel = ({ state, onClose }) => {
+  const rules = state.document.table?.dataValidations ?? [];
+  const [type, setType] = (0, import_react5.useState)("list");
+  const [operator, setOperator] = (0, import_react5.useState)("between");
+  const [formula1, setFormula1] = (0, import_react5.useState)("");
+  const [formula2, setFormula2] = (0, import_react5.useState)("");
+  const [errorStyle, setErrorStyle] = (0, import_react5.useState)("stop");
+  const [errorMessage, setErrorMessage] = (0, import_react5.useState)("");
+  const [inputMessage, setInputMessage] = (0, import_react5.useState)("");
+  const [ignoreBlank, setIgnoreBlank] = (0, import_react5.useState)(true);
+  const [appliesTo, setAppliesTo] = (0, import_react5.useState)(() => selectionText(state.selectedRange));
+  const ranges = (0, import_spreadsheet4.parseRuleRanges)(appliesTo);
+  const usesOperator = type === "whole" || type === "decimal" || type === "date" || type === "time" || type === "textLength";
+  const needsTwo = usesOperator && (operator === "between" || operator === "notBetween");
+  const circles = state.controller.getInvalidDataCircles();
+  const apply = () => {
+    if (!ranges) return;
+    state.addDataValidation({
+      ranges,
+      type,
+      ...usesOperator ? { operator } : {},
+      ...formula1 ? { formula1 } : {},
+      ...needsTwo && formula2 ? { formula2 } : {},
+      errorStyle,
+      ...errorMessage ? { errorMessage } : {},
+      ...inputMessage ? { inputMessage } : {},
+      ignoreBlank
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(PanelFrame, { title: "Data validation", label: "Data validation rules", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("ul", { className: "mb-3 flex flex-col gap-1", "aria-label": "Validation rules", children: [
+      rules.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: "text-muted-foreground", children: "No validation on this sheet." }),
+      rules.map((rule) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { "data-rule-id": rule.id, className: "flex items-center gap-1.5 rounded border border-border px-1.5 py-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "truncate", title: (0, import_spreadsheet4.describeDataValidation)(rule), children: (0, import_spreadsheet4.describeDataValidation)(rule) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "truncate font-mono text-[10px] text-muted-foreground", children: [
+            (0, import_spreadsheet4.formatRuleRanges)(rule.ranges),
+            " \xB7 ",
+            rule.errorStyle ?? "stop"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "aria-label": "Delete rule", className: buttonClass, onClick: () => state.deleteDataValidation(rule.id), children: "\u2715" })
+      ] }, rule.id))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("fieldset", { className: "flex flex-col gap-1.5 border-t border-border pt-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("legend", { className: "sr-only", children: "New validation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
+        "Allow",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Allow", className: inputClass, value: type, onChange: (e) => setType(e.target.value), children: import_spreadsheet4.DATA_VALIDATION_TYPE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: o.type, children: o.label }, o.type)) })
+      ] }),
+      usesOperator && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Operator", className: inputClass, value: operator, onChange: (e) => setOperator(e.target.value), children: import_spreadsheet4.DATA_VALIDATION_OPERATOR_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: o.operator, children: o.label }, o.operator)) }),
+      type !== "any" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          "aria-label": type === "list" ? "Source" : type === "custom" ? "Formula" : needsTwo ? "Minimum" : "Value",
+          placeholder: type === "list" ? "Low,Medium,High or =$H$1:$H$5" : type === "custom" ? "=A1>0" : "Value or =formula",
+          className: inputClass,
+          value: formula1,
+          onChange: (e) => setFormula1(e.target.value)
+        }
+      ),
+      needsTwo && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Maximum", placeholder: "Maximum", className: inputClass, value: formula2, onChange: (e) => setFormula2(e.target.value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: ignoreBlank, onChange: (e) => setIgnoreBlank(e.target.checked) }),
+        " Ignore blank"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Input message", placeholder: "Input message (optional)", className: inputClass, value: inputMessage, onChange: (e) => setInputMessage(e.target.value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Error style", className: inputClass, value: errorStyle, onChange: (e) => setErrorStyle(e.target.value), children: import_spreadsheet4.DATA_VALIDATION_ERROR_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: o.style, children: o.label }, o.style)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Error message", placeholder: "Error message (optional)", className: inputClass, value: errorMessage, onChange: (e) => setErrorMessage(e.target.value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
+        "Applies to",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { "aria-label": "Applies to", className: `${inputClass} font-mono`, value: appliesTo, onChange: (e) => setAppliesTo(e.target.value) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass, onClick: () => setAppliesTo(selectionText(state.selectedRange)), children: "Use selection" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass, disabled: !ranges, onClick: () => ranges && ranges.forEach((r) => state.clearDataValidation(r)), children: "Clear" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass, disabled: !ranges, onClick: apply, children: "Apply" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass, "aria-pressed": circles, onClick: () => state.setInvalidDataCircles(!circles), children: circles ? "Clear validation circles" : "Circle invalid data" })
+    ] })
+  ] });
+};
+
+// src/spreadsheet/FormulaHints.tsx
+var import_react6 = require("react");
+var import_spreadsheet5 = require("@pixerate/editor/spreadsheet");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
+  const [caret, setCaret] = (0, import_react6.useState)(null);
+  const [focused, setFocused] = (0, import_react6.useState)(false);
+  const [selected, setSelected] = (0, import_react6.useState)(0);
+  const [dismissed, setDismissed] = (0, import_react6.useState)(false);
+  const [position, setPosition] = (0, import_react6.useState)(null);
+  const pendingCaret = (0, import_react6.useRef)(null);
+  const hints = (0, import_react6.useMemo)(
+    () => (0, import_spreadsheet5.getFormulaHints)(value, caret ?? value.length, { limit, names }),
+    [value, caret, limit, names]
   );
   const suggestions = dismissed ? [] : hints.suggestions;
   const selectedIndex = Math.max(0, Math.min(selected, suggestions.length - 1));
   const visible = focused && value.trimStart().startsWith("=") && (suggestions.length > 0 || !!hints.activeCall);
-  const latest = (0, import_react4.useRef)({ suggestions, selected: selectedIndex, value, caret, onAccept });
+  const latest = (0, import_react6.useRef)({ suggestions, selected: selectedIndex, value, caret, onAccept });
   latest.current = { suggestions, selected: selectedIndex, value, caret, onAccept };
   const accept = (index) => {
     const { suggestions: list, value: current, caret: at, onAccept: commit } = latest.current;
     const suggestion = list[index];
     if (!suggestion) return;
-    const next = (0, import_spreadsheet4.applyFormulaSuggestion)(current, at ?? current.length, suggestion.name);
+    const next = (0, import_spreadsheet5.applyFormulaSuggestion)(current, at ?? current.length, suggestion);
     pendingCaret.current = next.caret;
     commit(next.value);
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const input = inputRef.current;
     if (!input) return;
     const syncCaret = () => setCaret(input.selectionStart ?? input.value.length);
@@ -484,7 +863,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
       input.removeEventListener("keydown", onKeyDown);
     };
   }, [inputRef]);
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     const input = inputRef.current;
     const at = pendingCaret.current;
     if (!input || at === null || input.value !== value) return;
@@ -493,7 +872,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
     setCaret(at);
     setSelected(0);
   }, [value, inputRef]);
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     const input = inputRef.current;
     if (!visible || !input) return;
     const rect = input.getBoundingClientRect();
@@ -501,7 +880,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
   }, [visible, value, inputRef]);
   if (!visible) return null;
   const { activeCall } = hints;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       "data-formula-hints": "",
@@ -517,8 +896,8 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
       },
       onMouseDown: (e) => e.preventDefault(),
       children: [
-        activeCall && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-formula-signature": "", className: "px-2 py-1.5 border-b border-border bg-muted/30", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-mono", children: activeCall.parts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        activeCall && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-formula-signature": "", className: "px-2 py-1.5 border-b border-border bg-muted/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "font-mono", children: activeCall.parts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "span",
             {
               "data-active": part.active ? "" : void 0,
@@ -527,13 +906,13 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
             },
             i
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-0.5 text-muted-foreground", children: activeCall.argument ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-semibold", children: activeCall.argument.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-0.5 text-muted-foreground", children: activeCall.argument ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold", children: activeCall.argument.name }),
             ": ",
             activeCall.argument.description
           ] }) : activeCall.description })
         ] }),
-        suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { role: "listbox", "aria-label": "Formula suggestions", className: "max-h-64 overflow-auto py-1 m-0 list-none p-0", children: suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { role: "listbox", "aria-label": "Formula suggestions", className: "max-h-64 overflow-auto py-1 m-0 list-none p-0", children: suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "li",
           {
             role: "option",
@@ -545,19 +924,162 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
               accept(i);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-mono font-semibold text-foreground", children: s.signature }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-muted-foreground truncate", children: s.description })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "font-mono font-semibold text-foreground", children: s.signature }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-muted-foreground truncate", children: s.description })
             ]
           },
-          s.name
+          `${s.kind ?? "fn"}:${s.name}`
         )) })
       ]
     }
   );
 };
 
+// src/spreadsheet/SheetTabs.tsx
+var import_react7 = require("react");
+var import_spreadsheet6 = require("@pixerate/editor/spreadsheet");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SheetTabs = ({ state, readOnly = false, className = "" }) => {
+  const { controller, sheets } = state;
+  const [renaming, setRenaming] = (0, import_react7.useState)(null);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [menu, setMenu] = (0, import_react7.useState)(null);
+  const dragFrom = (0, import_react7.useRef)(null);
+  const [dropTarget, setDropTarget] = (0, import_react7.useState)(null);
+  const commitRename = (cancelOnError) => {
+    if (!renaming) return;
+    const sheet = sheets.find((s) => s.id === renaming.id);
+    const name = renaming.draft.trim();
+    if (!sheet || !name || name === sheet.name) {
+      setRenaming(null);
+      setError(null);
+      return;
+    }
+    try {
+      state.renameSheet(renaming.id, name);
+      setRenaming(null);
+      setError(null);
+    } catch (err) {
+      setError(err?.message ?? String(err));
+      if (cancelOnError) setRenaming(null);
+    }
+  };
+  const dropAfter = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    return e.clientX > rect.left + rect.width / 2;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex flex-col ${className}`, "data-sheet-tabs": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        role: "tablist",
+        "aria-label": "Sheets",
+        className: "flex items-center gap-0.5 overflow-x-auto border-t border-border bg-muted px-1 py-1 text-xs",
+        children: [
+          sheets.map(
+            (sheet, index) => renaming?.id === sheet.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "input",
+              {
+                "aria-label": "Sheet name",
+                autoFocus: true,
+                className: "w-32 rounded border border-primary bg-background px-2 py-0.5 text-xs outline-none",
+                value: renaming.draft,
+                onChange: (e) => setRenaming({ id: sheet.id, draft: e.target.value }),
+                onFocus: (e) => e.currentTarget.select(),
+                onKeyDown: (e) => {
+                  e.stopPropagation();
+                  if (e.key === "Enter") commitRename(false);
+                  else if (e.key === "Escape") {
+                    setRenaming(null);
+                    setError(null);
+                  }
+                },
+                onBlur: () => commitRename(true)
+              },
+              sheet.id
+            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": sheet.active,
+                "data-sheet-id": sheet.id,
+                draggable: !readOnly,
+                title: readOnly ? sheet.name : `${sheet.name} \u2014 double-click to rename, drag to move`,
+                className: `whitespace-nowrap rounded px-3 py-0.5 ${sheet.active ? "bg-background font-semibold text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/60"} ${dropTarget?.index === index ? dropTarget.after ? "border-r-2 border-primary" : "border-l-2 border-primary" : ""}`,
+                onClick: () => state.setActiveSheet(sheet.id),
+                onDoubleClick: () => {
+                  if (readOnly) return;
+                  setError(null);
+                  setRenaming({ id: sheet.id, draft: sheet.name });
+                },
+                onContextMenu: (e) => {
+                  if (readOnly) return;
+                  e.preventDefault();
+                  setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet6.getSheetTabMenuItems)(controller, sheet.id, { onError: setError }) });
+                },
+                onDragStart: (e) => {
+                  dragFrom.current = index;
+                  e.dataTransfer?.setData("text/plain", sheet.id);
+                  if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+                },
+                onDragOver: (e) => {
+                  if (dragFrom.current === null) return;
+                  e.preventDefault();
+                  const after = dropAfter(e);
+                  setDropTarget((prev) => prev?.index === index && prev.after === after ? prev : { index, after });
+                },
+                onDragLeave: () => setDropTarget(null),
+                onDrop: (e) => {
+                  e.preventDefault();
+                  const from = dragFrom.current;
+                  dragFrom.current = null;
+                  setDropTarget(null);
+                  if (from === null) return;
+                  state.moveSheet(sheets[from].id, (0, import_spreadsheet6.sheetDropIndex)(from, index, dropAfter(e)));
+                },
+                onDragEnd: () => {
+                  dragFrom.current = null;
+                  setDropTarget(null);
+                },
+                children: sheet.name
+              },
+              sheet.id
+            )
+          ),
+          !readOnly && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Add sheet",
+              title: "Add sheet",
+              className: "rounded px-2 py-0.5 text-muted-foreground hover:bg-background/60",
+              onClick: () => {
+                setError(null);
+                state.addSheet();
+              },
+              children: "+"
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "alert", className: "px-2 py-1 text-xs text-destructive", children: error }),
+    menu && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      SpreadsheetContextMenu,
+      {
+        items: menu.items,
+        x: menu.x,
+        y: menu.y,
+        ariaLabel: "Sheet actions",
+        onClose: () => setMenu(null)
+      }
+    )
+  ] });
+};
+
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var COLUMN_HEADER_HEIGHT = 28;
 var ROW_HEADER_WIDTH = 48;
 function frozenCellStyle(viewRow, viewCol) {
@@ -570,7 +1092,7 @@ function frozenCellStyle(viewRow, viewCol) {
     background: "var(--background, #fff)"
   };
 }
-var coordKey = (cell) => cell ? `${(0, import_spreadsheet5.indexToColName)(cell.col)}${cell.row + 1}` : "";
+var coordKey = (cell) => cell ? `${(0, import_spreadsheet7.indexToColName)(cell.col)}${cell.row + 1}` : "";
 function spillBorderStyle(range, row, col) {
   const line = "1px solid color-mix(in srgb, var(--primary, #6366f1) 60%, transparent)";
   return {
@@ -584,18 +1106,34 @@ function spillBorderStyle(range, row, col) {
     borderRight: col === range.endCol ? line : void 0
   };
 }
-function CellText({ cell }) {
-  const shown = (0, import_spreadsheet5.formatCellForDisplay)(cell);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+function CellText({ cell, conditional }) {
+  const shown = (0, import_spreadsheet7.formatCellForDisplay)(cell);
+  const color = conditional?.color ?? (shown.color ? (0, import_spreadsheet7.numberFormatColorToCss)(shown.color) : void 0);
+  const decorated = !!conditional?.dataBar || !!conditional?.icon;
+  const text = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "span",
     {
       className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`,
       title: cell.error ? cell.errorMessage ?? cell.error : void 0,
       "data-numeric": shown.numeric ? "" : void 0,
-      style: shown.numeric || shown.color ? { ...shown.numeric ? { textAlign: "right" } : {}, ...shown.color ? { color: (0, import_spreadsheet5.numberFormatColorToCss)(shown.color) } : {} } : void 0,
-      children: shown.text
+      style: shown.numeric || color || decorated ? {
+        ...decorated ? { position: "relative" } : {},
+        ...conditional?.icon ? { flex: 1, minWidth: 0 } : {},
+        ...shown.numeric ? { textAlign: "right" } : {},
+        ...color ? { color } : {}
+      } : void 0,
+      children: conditional?.hideValue ? "" : shown.text
     }
   );
+  if (!conditional || !decorated) return text;
+  const icon = conditional.icon ? (0, import_spreadsheet7.getConditionalFormatIcon)(conditional.icon.set, conditional.icon.index) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    conditional.dataBar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-data-bar", style: (0, import_spreadsheet7.getDataBarCss)(conditional.dataBar) }),
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-1 min-w-0", style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "spreadsheet-cf-icon shrink-0", role: "img", "aria-label": icon.label, "data-icon": conditional.icon.id, style: { color: icon.color }, children: icon.glyph }),
+      text
+    ] }) : text
+  ] });
 }
 var SpreadsheetEditor = ({
   state: externalState,
@@ -603,57 +1141,66 @@ var SpreadsheetEditor = ({
   customCellRenderer,
   onAddColumnClick,
   onColumnHeaderClick,
-  onColumnResize
+  onColumnResize,
+  showSheetTabs = false
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = (0, import_react5.useRef)(null);
-  const formulaBarRef = (0, import_react5.useRef)(null);
-  const cellInputRef = (0, import_react5.useRef)(null);
-  const [resizingColId, setResizingColId] = (0, import_react5.useState)(null);
-  const [hoveredColId, setHoveredColId] = (0, import_react5.useState)(null);
-  const [resizeStartX, setResizeStartX] = (0, import_react5.useState)(0);
-  const [resizeStartWidth, setResizeStartWidth] = (0, import_react5.useState)(0);
+  const gridRef = (0, import_react8.useRef)(null);
+  const formulaBarRef = (0, import_react8.useRef)(null);
+  const cellInputRef = (0, import_react8.useRef)(null);
+  const [resizingColId, setResizingColId] = (0, import_react8.useState)(null);
+  const [hoveredColId, setHoveredColId] = (0, import_react8.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react8.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react8.useState)(0);
   const view = state.viewModel;
   const { copyShortcutFallback } = useSpreadsheetClipboard(gridRef, state, readOnly);
   const { fillTarget, startFill, extendFill } = useFillHandle(state);
-  const [menu, setMenu] = (0, import_react5.useState)(null);
+  const [menu, setMenu] = (0, import_react8.useState)(null);
+  const [panel, setPanel] = (0, import_react8.useState)(null);
+  const [listMenu, setListMenu] = (0, import_react8.useState)(null);
+  const overlay = state.conditionalFormatOverlay;
   const filter = state.document.table?.filter;
-  const filteredColIds = (0, import_react5.useMemo)(
+  const filteredColIds = (0, import_react8.useMemo)(
     () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
     [filter]
   );
-  const handleCellContextMenu = (0, import_react5.useCallback)((rIdx, cIdx, e) => {
+  const handleCellContextMenu = (0, import_react8.useCallback)((rIdx, cIdx, e) => {
     if (readOnly) return;
     e.preventDefault();
     if (state.editingCell) state.commitEditing();
-    if (!state.selectedRange || !(0, import_spreadsheet5.rangeContains)(state.selectedRange, rIdx, cIdx)) {
+    if (!state.selectedRange || !(0, import_spreadsheet7.rangeContains)(state.selectedRange, rIdx, cIdx)) {
       state.selectCell(rIdx, cIdx);
     }
-    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet5.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
+    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet7.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
   }, [readOnly, state]);
-  const activeRawValue = (0, import_react5.useMemo)(() => {
+  const nameSuggestions = (0, import_react8.useMemo)(
+    () => state.controller.getNameSuggestions(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.controller, state.document]
+  );
+  const activeRawValue = (0, import_react8.useMemo)(() => {
     if (!state.activeCell) return "";
     const row = state.document.rows[state.activeCell.row];
     const col = state.document.columns[state.activeCell.col];
     if (!row || !col) return "";
     return state.getCell(row.id, col.id).raw;
   }, [state.activeCell, state.document]);
-  const activeSpill = (0, import_react5.useMemo)(
+  const activeSpill = (0, import_react8.useMemo)(
     () => state.activeCell ? state.controller.getSpillAt(state.activeCell.row, state.activeCell.col) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.activeCell, state.document]
   );
   const spillFormula = activeSpill && !activeRawValue && activeSpill.key !== coordKey(state.activeCell) ? activeSpill.formula : "";
-  const coordLabel = (0, import_react5.useMemo)(() => {
+  const coordLabel = (0, import_react8.useMemo)(() => {
     if (!state.activeCell) return "--";
-    const colName = (0, import_spreadsheet5.indexToColName)(state.activeCell.col);
+    const colName = (0, import_spreadsheet7.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = (0, import_react5.useState)(null);
+  const [formulaDraft, setFormulaDraft] = (0, import_react8.useState)(null);
   const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
   const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setFormulaDraft(null);
   }, [state.activeCell?.row, state.activeCell?.col]);
   const commitFormulaBar = () => {
@@ -665,34 +1212,34 @@ var SpreadsheetEditor = ({
     const row = state.document.rows[state.activeCell.row];
     const col = state.document.columns[state.activeCell.col];
     if (row && col && !formulaBarReadOnly && formulaDraft !== activeRawValue) {
-      state.setCellValue(row.id, col.id, formulaDraft);
+      state.commitCellInput(row.id, col.id, formulaDraft);
     }
     setFormulaDraft(null);
   };
-  const handleCellClick = (0, import_react5.useCallback)((rIdx, cIdx, e) => {
+  const handleCellClick = (0, import_react8.useCallback)((rIdx, cIdx, e) => {
     if (state.editingCell && (state.editingCell.row !== rIdx || state.editingCell.col !== cIdx)) {
       state.commitEditing();
     }
     state.selectCell(rIdx, cIdx, e.shiftKey);
   }, [state]);
-  const handleCellDblClick = (0, import_react5.useCallback)((rIdx, cIdx) => {
+  const handleCellDblClick = (0, import_react8.useCallback)((rIdx, cIdx) => {
     if (readOnly) return;
     const col = state.document.columns[cIdx];
     if (col?.readOnly) return;
     state.startEditing(rIdx, cIdx);
   }, [readOnly, state]);
-  const handleKeyDown = (0, import_react5.useCallback)((e) => {
+  const handleKeyDown = (0, import_react8.useCallback)((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
-        state.commitEditing();
+        if (state.commitEditing().status !== "committed") return;
         state.moveCursor("down");
       } else if (e.key === "Escape") {
         e.preventDefault();
         state.cancelEditing();
       } else if (e.key === "Tab") {
         e.preventDefault();
-        state.commitEditing();
+        if (state.commitEditing().status !== "committed") return;
         state.moveCursor(e.shiftKey ? "left" : "right");
       } else {
         return;
@@ -701,7 +1248,10 @@ var SpreadsheetEditor = ({
       return;
     }
     if (!state.activeCell) return;
-    if (e.key === "ArrowUp") {
+    if (e.altKey && e.key === "ArrowDown") {
+      e.preventDefault();
+      openListMenu(state.activeCell.row, state.activeCell.col);
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       state.moveCursor("up", e.shiftKey);
     } else if (e.key === "ArrowDown") {
@@ -750,11 +1300,53 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state, copyShortcutFallback]);
-  const stateRef = (0, import_react5.useRef)(state);
+  const activeListValues = (0, import_react8.useMemo)(
+    () => state.activeCell && !readOnly ? state.controller.getValidationListValues(state.activeCell.row, state.activeCell.col) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.controller, state.activeCell, state.document, readOnly]
+  );
+  const activeRule = (0, import_react8.useMemo)(
+    () => state.activeCell ? state.controller.getDataValidationAt(state.activeCell.row, state.activeCell.col) : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.controller, state.activeCell, state.document]
+  );
+  const inputMessage = activeRule && activeRule.showInputMessage !== false && (activeRule.inputTitle || activeRule.inputMessage) ? activeRule : null;
+  function openListMenu(row, col, anchor) {
+    if (readOnly || state.document.columns[col]?.readOnly) return;
+    const values = state.controller.getValidationListValues(row, col);
+    if (!values) return;
+    const td = anchor ?? gridRef.current?.querySelector(`td[data-row="${row}"][data-col="${col}"]`);
+    const rect = td?.getBoundingClientRect();
+    setListMenu({ x: rect ? rect.left : 0, y: rect ? rect.bottom : 0, row, col, values });
+  }
+  (0, import_react8.useEffect)(() => {
+    if (!listMenu) return;
+    const close = (e) => {
+      if (!e.target?.closest?.('[aria-label="Allowed values"], .spreadsheet-list-arrow')) setListMenu(null);
+    };
+    window.addEventListener("mousedown", close);
+    return () => window.removeEventListener("mousedown", close);
+  }, [listMenu]);
+  const chooseListValue = (value) => {
+    if (!listMenu) return;
+    const row = state.document.rows[listMenu.row];
+    const col = state.document.columns[listMenu.col];
+    setListMenu(null);
+    if (row && col) state.commitCellInput(row.id, col.id, value);
+    gridRef.current?.focus();
+  };
+  const resolveValidation = (action) => {
+    state.resolveValidationPrompt(action);
+    requestAnimationFrame(() => {
+      if (cellInputRef.current) cellInputRef.current.focus();
+      else gridRef.current?.focus();
+    });
+  };
+  const stateRef = (0, import_react8.useRef)(state);
   stateRef.current = state;
-  const onColumnResizeRef = (0, import_react5.useRef)(onColumnResize);
+  const onColumnResizeRef = (0, import_react8.useRef)(onColumnResize);
   onColumnResizeRef.current = onColumnResize;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -805,7 +1397,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth]);
-  const measureElementContentWidth = (0, import_react5.useCallback)((el, container) => {
+  const measureElementContentWidth = (0, import_react8.useCallback)((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -853,7 +1445,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = (0, import_react5.useCallback)((colId, colIndex) => {
+  const autoFitColumn = (0, import_react8.useCallback)((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -889,12 +1481,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = (0, import_react5.useCallback)((colId, colIndex, e) => {
+  const handleResizeDblClick = (0, import_react8.useCallback)((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = (0, import_react5.useCallback)((colId, colIndex, e) => {
+  const handleHeaderDblClick = (0, import_react8.useCallback)((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -916,7 +1508,7 @@ var SpreadsheetEditor = ({
   const isActiveCell = (rIdx, cIdx) => {
     return state.activeCell?.row === rIdx && state.activeCell?.col === cIdx;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const grid = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ref: gridRef,
@@ -926,10 +1518,10 @@ var SpreadsheetEditor = ({
       role: "grid",
       "aria-label": "Spreadsheet",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground", children: coordLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center text-muted-foreground select-none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "italic font-serif font-bold text-sm text-primary", children: "fx" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground", children: coordLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center text-muted-foreground select-none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "italic font-serif font-bold text-sm text-primary", children: "fx" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
               ref: formulaBarRef,
@@ -965,19 +1557,24 @@ var SpreadsheetEditor = ({
               }
             }
           ),
-          !formulaBarReadOnly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          !formulaBarReadOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             FormulaHints,
             {
               inputRef: formulaBarRef,
               value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
-              onAccept: (next) => state.editingCell ? state.setDraftValue(next) : setFormulaDraft(next)
+              onAccept: (next) => state.editingCell ? state.setDraftValue(next) : setFormulaDraft(next),
+              names: nameSuggestions
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: "h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
-            view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        inputMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "note", "data-validation-input-message": "", className: "border-b border-border bg-muted/30 px-3 py-1 text-[11px] text-muted-foreground", children: [
+          inputMessage.inputTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mr-1 font-semibold text-foreground", children: inputMessage.inputTitle }),
+          inputMessage.inputMessage
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("tr", { className: "h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
+            view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "th",
               {
                 "data-col": cIdx,
@@ -992,16 +1589,16 @@ var SpreadsheetEditor = ({
                 onClick: () => onColumnHeaderClick?.(col),
                 onDoubleClick: (e) => handleHeaderDblClick(col.id, cIdx, e),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate font-semibold text-foreground text-xs min-w-0", children: col.title }),
-                    filteredColIds.has(col.id) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] text-primary shrink-0", title: "Filtered", "data-filtered": "true", children: "\u23F7" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate font-semibold text-foreground text-xs min-w-0", children: col.title }),
+                    filteredColIds.has(col.id) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] text-primary shrink-0", title: "Filtered", "data-filtered": "true", children: "\u23F7" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0", children: [
                       "(",
                       col.key,
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "div",
                     {
                       className: "col-resize-handle",
@@ -1018,7 +1615,7 @@ var SpreadsheetEditor = ({
                       onDoubleClick: (e) => handleResizeDblClick(col.id, cIdx, e),
                       role: "separator",
                       "aria-orientation": "vertical",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "div",
                         {
                           className: "col-resize-handle-line",
@@ -1037,19 +1634,19 @@ var SpreadsheetEditor = ({
               },
               col.id
             )),
-            onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "th",
               {
                 className: "w-10 min-w-[2.5rem] px-1 text-center bg-muted/40 hover:bg-muted cursor-pointer transition-colors",
                 onClick: onAddColumnClick,
                 title: "Add Column",
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: view.rows.map((viewRow) => {
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: view.rows.map((viewRow) => {
             if (viewRow.kind === "group") {
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 SpreadsheetGroupRow,
                 {
                   group: viewRow.group,
@@ -1062,15 +1659,15 @@ var SpreadsheetEditor = ({
               );
             }
             const displayRowIndex = viewRow.index;
-            const selection = state.selectedRange ? (0, import_spreadsheet5.normalizeRange)(state.selectedRange) : null;
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            const selection = state.selectedRange ? (0, import_spreadsheet7.normalizeRange)(state.selectedRange) : null;
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "tr",
               {
                 "data-row": displayRowIndex,
                 className: `border-b border-border hover:bg-muted/10 transition-colors ${viewRow.section !== "body" ? "bg-muted/30 font-semibold" : ""}`,
                 style: { height: viewRow.row.height || 32 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "td",
                     {
                       className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none",
@@ -1089,9 +1686,13 @@ var SpreadsheetEditor = ({
                     const selected = isCellSelected(rIdx, cIdx);
                     const active = isActiveCell(rIdx, cIdx);
                     const isEditing = state.editingCell?.row === rIdx && state.editingCell?.col === cIdx;
-                    const inFillPreview = !!fillTarget && !selected && (0, import_spreadsheet5.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
-                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet5.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
-                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                    const conditional = overlay.get(rIdx, cIdx);
+                    const conditionalCss = (0, import_spreadsheet7.getConditionalFormatCss)(conditional);
+                    const circled = state.controller.isInvalidDataCircled(rIdx, cIdx);
+                    const showListArrow = active && !isEditing && !!activeListValues;
+                    const inFillPreview = !!fillTarget && !selected && (0, import_spreadsheet7.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
+                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet7.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
+                    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                       "td",
                       {
                         "data-row": rIdx,
@@ -1103,15 +1704,19 @@ var SpreadsheetEditor = ({
                           maxWidth: 0,
                           overflow: "hidden",
                           ...frozenCellStyle(viewRow, viewCol),
+                          ...conditionalCss,
+                          // Keep the selection tint visible over a conditional fill.
+                          ...conditionalCss.background && selected ? { boxShadow: "inset 0 0 0 9999px color-mix(in srgb, var(--primary, #6366f1) 12%, transparent)" } : {},
                           ...inFillPreview ? { outline: "1px dashed var(--primary, #6366f1)", outlineOffset: -1 } : {}
                         },
+                        "data-cf-fill": conditional?.fill,
                         onClick: (e) => handleCellClick(rIdx, cIdx, e),
                         onDoubleClick: () => handleCellDblClick(rIdx, cIdx),
                         onContextMenu: (e) => handleCellContextMenu(rIdx, cIdx, e),
                         onMouseOver: () => extendFill(displayRowIndex, viewCol.index),
                         children: [
-                          isEditing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          isEditing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                               "input",
                               {
                                 ref: cellInputRef,
@@ -1127,10 +1732,36 @@ var SpreadsheetEditor = ({
                                 autoFocus: true
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormulaHints, { inputRef: cellInputRef, value: state.draftValue, onAccept: state.setDraftValue })
-                          ] }) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CellText, { cell }),
-                          activeSpill && (0, import_spreadsheet5.rangeContains)(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
-                          showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormulaHints, { inputRef: cellInputRef, value: state.draftValue, onAccept: state.setDraftValue, names: nameSuggestions })
+                          ] }) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CellText, { cell, conditional }),
+                          circled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                            "span",
+                            {
+                              className: "spreadsheet-invalid-circle",
+                              "aria-label": "Invalid value",
+                              style: { position: "absolute", inset: "1px 2px", border: "2px solid #e11d48", borderRadius: "50%", pointerEvents: "none", zIndex: 6 }
+                            }
+                          ),
+                          showListArrow && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              className: "spreadsheet-list-arrow",
+                              "aria-label": "Show allowed values",
+                              "aria-haspopup": "listbox",
+                              tabIndex: -1,
+                              style: { position: "absolute", right: 1, top: 1, bottom: 1, width: 16, zIndex: 24, fontSize: 10, lineHeight: 1, background: "var(--muted, #f4f4f5)", border: "1px solid var(--border, #e4e4e7)", borderRadius: 2, cursor: "pointer", padding: 0 },
+                              onMouseDown: (e) => e.stopPropagation(),
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                if (listMenu) setListMenu(null);
+                                else openListMenu(rIdx, cIdx, e.currentTarget.parentElement);
+                              },
+                              children: "\u25BE"
+                            }
+                          ),
+                          activeSpill && (0, import_spreadsheet7.rangeContains)(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
+                          showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             "div",
                             {
                               className: "spreadsheet-fill-handle",
@@ -1145,14 +1776,14 @@ var SpreadsheetEditor = ({
                       viewCol.column.id
                     );
                   }),
-                  onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
+                  onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
                 ]
               },
               viewRow.row.id
             );
           }) })
         ] }) }),
-        menu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        menu && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           SpreadsheetContextMenu,
           {
             items: menu.items,
@@ -1161,10 +1792,45 @@ var SpreadsheetEditor = ({
             onClose: () => {
               setMenu(null);
               gridRef.current?.focus();
-            }
+            },
+            onOpenPanel: setPanel
+          }
+        ),
+        panel === "conditionalFormatting" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SpreadsheetConditionalFormatPanel, { state, onClose: () => setPanel(null) }),
+        panel === "dataValidation" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SpreadsheetDataValidationPanel, { state, onClose: () => setPanel(null) }),
+        listMenu && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            role: "listbox",
+            "aria-label": "Allowed values",
+            className: "fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg",
+            style: { left: listMenu.x, top: listMenu.y, background: "var(--popover, var(--background, #fff))" },
+            onKeyDown: (e) => {
+              e.stopPropagation();
+              if (e.key === "Escape") {
+                setListMenu(null);
+                gridRef.current?.focus();
+              }
+            },
+            children: [
+              listMenu.values.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-3 py-1 text-muted-foreground", children: "No values" }),
+              listMenu.values.map((value, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": false,
+                  className: "block w-full px-3 py-1 text-left hover:bg-muted",
+                  onClick: () => chooseListValue(value),
+                  children: value
+                },
+                `${i}:${value}`
+              ))
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+        state.validationPrompt && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SpreadsheetValidationDialog, { prompt: state.validationPrompt, onResolve: resolveValidation }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
         .col-resize-handle:hover .col-resize-handle-line {
           background-color: var(--primary, #6366f1);
           opacity: 0.75;
@@ -1184,13 +1850,178 @@ var SpreadsheetEditor = ({
       ]
     }
   );
+  if (!showSheetTabs) return grid;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex h-full w-full flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-h-0 flex-1", children: grid }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SheetTabs, { state, readOnly })
+  ] });
+};
+
+// src/spreadsheet/NameManager.tsx
+var import_react9 = require("react");
+var import_spreadsheet8 = require("@pixerate/editor/spreadsheet");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var EMPTY_DRAFT = { original: null, name: "", refersTo: "=", scope: "", comment: "" };
+var NameManager = ({ state, readOnly = false, onClose, className = "" }) => {
+  const { controller, sheets } = state;
+  const rows = (0, import_react9.useMemo)(
+    () => (0, import_spreadsheet8.getNameManagerRows)(controller),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [controller, state.document, state.names]
+  );
+  const [draft, setDraft] = (0, import_react9.useState)(EMPTY_DRAFT);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const edit = (row) => {
+    setError(null);
+    setDraft({
+      original: { name: row.name, sheetId: row.sheetId },
+      name: row.name,
+      refersTo: row.refersTo,
+      scope: row.sheetId ?? "",
+      comment: row.comment ?? ""
+    });
+  };
+  const save = (e) => {
+    e.preventDefault();
+    const scope = draft.scope ? { sheet: draft.scope } : {};
+    try {
+      const invalid = controller.validateDefinedName(draft.name.trim());
+      if (invalid) throw new Error(invalid);
+      try {
+        (0, import_spreadsheet8.parseFormula)(draft.refersTo.trim().startsWith("=") ? draft.refersTo.trim() : `=${draft.refersTo.trim()}`);
+      } catch (err) {
+        throw new Error(`There's a problem with this formula: ${err?.message ?? draft.refersTo}`);
+      }
+      const original = draft.original;
+      if (original) {
+        const originalScope = original.sheetId ? { sheet: original.sheetId } : {};
+        if ((original.sheetId ?? "") !== draft.scope) {
+          state.deleteName(original.name, originalScope);
+        } else if (original.name !== draft.name) {
+          state.renameName(original.name, draft.name.trim(), originalScope);
+        }
+      }
+      state.defineName(draft.name.trim(), draft.refersTo, { ...scope, comment: draft.comment || void 0 });
+      setDraft(EMPTY_DRAFT);
+      setError(null);
+    } catch (err) {
+      setError(err?.message ?? String(err));
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { "aria-label": "Name Manager", className: `flex flex-col gap-2 text-xs ${className}`, "data-name-manager": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "m-0 text-sm font-semibold", children: "Name Manager" }),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "aria-label": "Close Name Manager", className: "rounded px-2 hover:bg-muted", onClick: onClose, children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { className: "text-left text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { className: "px-1 font-medium", children: "Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { className: "px-1 font-medium", children: "Value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { className: "px-1 font-medium", children: "Refers to" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { className: "px-1 font-medium", children: "Scope" }),
+        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { className: "px-1" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tbody", { children: [
+        rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { colSpan: 5, className: "px-1 py-2 text-muted-foreground", children: "No names yet." }) }),
+        rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { "data-name": row.name, className: "border-t border-border", title: row.comment, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { className: "px-1 py-0.5 font-mono font-semibold", children: row.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { className: "px-1 py-0.5", children: row.value }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { className: "px-1 py-0.5 font-mono", children: row.refersTo }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { className: "px-1 py-0.5", children: row.scopeLabel }),
+          !readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("td", { className: "whitespace-nowrap px-1 py-0.5 text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "aria-label": `Edit ${row.name}`, className: "rounded px-1 hover:bg-muted", onClick: () => edit(row), children: "Edit" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Delete ${row.name}`,
+                className: "rounded px-1 text-destructive hover:bg-muted",
+                onClick: () => {
+                  state.deleteName(row.name, row.sheetId ? { sheet: row.sheetId } : {});
+                  if (draft.original?.name === row.name && (draft.original.sheetId ?? "") === (row.sheetId ?? "")) setDraft(EMPTY_DRAFT);
+                },
+                children: "Delete"
+              }
+            )
+          ] })
+        ] }, `${row.sheetId ?? ""}!${row.name}`))
+      ] })
+    ] }),
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { className: "grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1", onSubmit: save, "aria-label": draft.original ? `Edit name ${draft.original.name}` : "New name", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: "pixerate-name-manager-name", children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "input",
+        {
+          id: "pixerate-name-manager-name",
+          className: "rounded border border-border bg-background px-1 py-0.5",
+          value: draft.name,
+          onChange: (e) => setDraft({ ...draft, name: e.target.value })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: "pixerate-name-manager-refers", children: "Refers to" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "input",
+        {
+          id: "pixerate-name-manager-refers",
+          className: "rounded border border-border bg-background px-1 py-0.5 font-mono",
+          value: draft.refersTo,
+          onChange: (e) => setDraft({ ...draft, refersTo: e.target.value })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: "pixerate-name-manager-scope", children: "Scope" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "select",
+        {
+          id: "pixerate-name-manager-scope",
+          className: "rounded border border-border bg-background px-1 py-0.5",
+          value: draft.scope,
+          onChange: (e) => setDraft({ ...draft, scope: e.target.value }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: "Workbook" }),
+            sheets.map((sheet) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: sheet.id, children: sheet.name }, sheet.id))
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: "pixerate-name-manager-comment", children: "Comment" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "input",
+        {
+          id: "pixerate-name-manager-comment",
+          className: "rounded border border-border bg-background px-1 py-0.5",
+          value: draft.comment,
+          onChange: (e) => setDraft({ ...draft, comment: e.target.value })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "col-span-2 flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", className: "rounded bg-primary px-2 py-0.5 text-primary-foreground", children: draft.original ? "Save" : "Add name" }),
+        draft.original && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded px-2 py-0.5 hover:bg-muted",
+            onClick: () => {
+              setDraft(EMPTY_DRAFT);
+              setError(null);
+            },
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", className: "text-destructive", children: error })
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FormulaHints,
+  NameManager,
+  SheetTabs,
+  SpreadsheetConditionalFormatPanel,
   SpreadsheetContextMenu,
+  SpreadsheetDataValidationPanel,
   SpreadsheetEditor,
   SpreadsheetGroupRow,
+  SpreadsheetValidationDialog,
   useFillHandle,
   useSpreadsheetClipboard,
   useSpreadsheetEditor