@ai-matrx/design-system 0.21.14 → 0.22.0

package/dist/data-table/index.cjs

@@ -31,32 +31,61 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/data-table/index.ts
 var data_table_exports = {};
 __export(data_table_exports, {
+  BOOLEAN_TRUE_COLOR: () => BOOLEAN_TRUE_COLOR,
+  CELL_TINT_CLASS: () => CELL_TINT_CLASS,
+  COLOR_RULE_OPS: () => COLOR_RULE_OPS,
+  COLOR_RULE_OP_LABELS: () => COLOR_RULE_OP_LABELS,
   DataRowInspector: () => DataRowInspector,
   DataRowWindow: () => DataRowWindow,
+  EMPTY_TABLE_STYLE: () => EMPTY_TABLE_STYLE,
+  FORMAT_MISMATCH_CLASS: () => FORMAT_MISMATCH_CLASS,
+  FormattedCell: () => FormattedCell,
   GenericTablePagination: () => GenericTablePagination,
   MatrxDataTable: () => MatrxDataTable,
   MatrxDataTableProvider: () => MatrxDataTableProvider,
   MatrxTableRowAlchemyProvider: () => MatrxTableRowAlchemyProvider,
   MatrxUuidCell: () => MatrxUuidCell,
+  NO_FROZEN_COLUMNS: () => NO_FROZEN_COLUMNS,
+  OPS_WITH_VALUE: () => OPS_WITH_VALUE,
+  ROW_TINT_CLASS: () => ROW_TINT_CLASS,
+  STYLE_COLORS: () => STYLE_COLORS,
+  STYLE_COLOR_LABELS: () => STYLE_COLOR_LABELS,
+  SWATCH_CLASS: () => SWATCH_CLASS,
   SavedViewsControl: () => SavedViewsControl,
+  TABLE_STYLE_METADATA_KEY: () => TABLE_STYLE_METADATA_KEY,
+  TABLE_STYLE_VERSION: () => TABLE_STYLE_VERSION,
   TableTitleRow: () => TableTitleRow,
   TableViewTabs: () => TableViewTabs,
+  alignForFormat: () => alignForFormat,
+  applyStylePath: () => applyStylePath,
   buildRowAgentInput: () => buildRowAgentInput,
   buildViewAgentInput: () => buildViewAgentInput,
   buildViewHuman: () => buildViewHuman,
   collectSelectOptions: () => collectSelectOptions,
+  colorForChoice: () => colorForChoice,
   downloadTableAsXlsx: () => downloadTableAsXlsx,
+  evaluateRule: () => evaluateRule,
   filterKindLabel: () => filterKindLabel,
+  formatColumnValue: () => formatColumnValue,
   inferTableSearchRole: () => inferTableSearchRole,
+  isStyleColor: () => isStyleColor,
+  parseTableStyle: () => parseTableStyle,
   parseTableViewSnapshot: () => parseTableViewSnapshot,
+  pixelWidth: () => pixelWidth,
   rankTableSearchRows: () => rankTableSearchRows,
+  resolveCellColor: () => resolveCellColor,
   resolveColumnMarker: () => resolveColumnMarker,
   resolveFilterKind: () => resolveFilterKind,
+  resolveFrozenColumns: () => resolveFrozenColumns,
+  resolveRowColor: () => resolveRowColor,
   resolveTableSearchScopes: () => resolveTableSearchScopes,
   rowsToCsvFromColumns: () => rowsToCsvFromColumns,
   rowsToMarkdownTable: () => rowsToMarkdownTable,
   rowsToRecordsFromColumns: () => rowsToRecordsFromColumns,
   shortUuid: () => shortUuid,
+  stylePath: () => stylePath,
+  tableStyleFromMetadata: () => tableStyleFromMetadata,
+  tableStyleIsEmpty: () => tableStyleIsEmpty,
   tableUrlParamPrefix: () => tableUrlParamPrefix,
   useMatrxDataTableHost: () => useMatrxDataTableHost,
   useMatrxTableRowAlchemy: () => useMatrxTableRowAlchemy,
@@ -284,7 +313,7 @@ function useColumnReorderAnimation(tableRef, order, dragging) {
 }
 
 // src/data-table/MatrxDataTable.tsx
-var import_format3 = require("@ai-matrx/kit/format");
+var import_format5 = require("@ai-matrx/kit/format");
 
 // src/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
@@ -7017,6 +7046,295 @@ function ColumnManagerDragHandle({ id, label }) {
 
 // src/data-table/saved-view-snapshot.ts
 var import_zod2 = require("zod");
+
+// src/data-table/table-style.ts
+var TABLE_STYLE_VERSION = 1;
+var STYLE_COLORS = [
+  "slate",
+  "green",
+  "amber",
+  "red",
+  "blue",
+  "violet",
+  "teal"
+];
+function isStyleColor(v) {
+  return typeof v === "string" && STYLE_COLORS.includes(v);
+}
+var COLOR_RULE_OPS = [
+  "is",
+  "is_not",
+  "contains",
+  "is_empty",
+  "not_empty",
+  "is_true",
+  "is_false",
+  "gt",
+  "gte",
+  "lt",
+  "lte"
+];
+var OPS_WITH_VALUE = [
+  "is",
+  "is_not",
+  "contains",
+  "gt",
+  "gte",
+  "lt",
+  "lte"
+];
+var COLOR_RULE_OP_LABELS = {
+  is: "is",
+  is_not: "is not",
+  contains: "contains",
+  is_empty: "is empty",
+  not_empty: "is not empty",
+  is_true: "is checked",
+  is_false: "is unchecked",
+  gt: "is greater than",
+  gte: "is at least",
+  lt: "is less than",
+  lte: "is at most"
+};
+var EMPTY_TABLE_STYLE = { version: TABLE_STYLE_VERSION };
+var TABLE_STYLE_METADATA_KEY = "style";
+function tableStyleIsEmpty(style) {
+  return !style.colorBy && (style.rules?.length ?? 0) === 0 && Object.keys(style.rows ?? {}).length === 0 && Object.keys(style.cells ?? {}).length === 0 && Object.keys(style.columns ?? {}).length === 0;
+}
+function isRecord(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function parseColorMap(raw) {
+  const out = {};
+  if (!isRecord(raw)) return out;
+  for (const [k, v] of Object.entries(raw)) if (isStyleColor(v)) out[k] = v;
+  return out;
+}
+function parseRule(raw) {
+  if (!isRecord(raw)) return null;
+  const { id, field, op, value, color, target } = raw;
+  if (typeof id !== "string" || typeof field !== "string") return null;
+  if (typeof op !== "string" || !COLOR_RULE_OPS.includes(op)) return null;
+  if (!isStyleColor(color)) return null;
+  if (target !== "row" && target !== "cell") return null;
+  return {
+    id,
+    field,
+    op,
+    color,
+    target,
+    ...typeof value === "string" || typeof value === "number" ? { value: String(value) } : {}
+  };
+}
+function parseTableStyle(raw) {
+  if (!isRecord(raw)) return { ...EMPTY_TABLE_STYLE };
+  const style = { version: TABLE_STYLE_VERSION };
+  const colorBy = raw.colorBy;
+  if (isRecord(colorBy) && typeof colorBy.field === "string" && (colorBy.target === "row" || colorBy.target === "cell")) {
+    style.colorBy = { field: colorBy.field, target: colorBy.target };
+  }
+  if (Array.isArray(raw.rules)) {
+    const rules = raw.rules.map(parseRule).filter((r) => r !== null);
+    if (rules.length > 0) style.rules = rules;
+  }
+  const rows = parseColorMap(raw.rows);
+  if (Object.keys(rows).length > 0) style.rows = rows;
+  const columns = parseColorMap(raw.columns);
+  if (Object.keys(columns).length > 0) style.columns = columns;
+  if (isRecord(raw.cells)) {
+    const cells = {};
+    for (const [rowId, byField] of Object.entries(raw.cells)) {
+      const parsed = parseColorMap(byField);
+      if (Object.keys(parsed).length > 0) cells[rowId] = parsed;
+    }
+    if (Object.keys(cells).length > 0) style.cells = cells;
+  }
+  return style;
+}
+function tableStyleFromMetadata(metadata) {
+  return parseTableStyle(isRecord(metadata) ? metadata[TABLE_STYLE_METADATA_KEY] : null);
+}
+function cellText(value) {
+  if (value === null || value === void 0) return "";
+  if (Array.isArray(value)) return value.map((v) => String(v)).join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function isEmptyValue(value) {
+  if (value === null || value === void 0) return true;
+  if (typeof value === "string") return value.trim() === "";
+  if (Array.isArray(value)) return value.length === 0;
+  return false;
+}
+function evaluateRule(rule, value) {
+  switch (rule.op) {
+    case "is_empty":
+      return isEmptyValue(value);
+    case "not_empty":
+      return !isEmptyValue(value);
+    case "is_true":
+      return value === true;
+    case "is_false":
+      return value === false;
+    case "is": {
+      const want = (rule.value ?? "").trim().toLowerCase();
+      if (Array.isArray(value)) {
+        return value.some((v) => cellText(v).trim().toLowerCase() === want);
+      }
+      return cellText(value).trim().toLowerCase() === want;
+    }
+    case "is_not": {
+      const want = (rule.value ?? "").trim().toLowerCase();
+      if (Array.isArray(value)) {
+        return !value.some((v) => cellText(v).trim().toLowerCase() === want);
+      }
+      return cellText(value).trim().toLowerCase() !== want;
+    }
+    case "contains": {
+      const want = (rule.value ?? "").trim().toLowerCase();
+      if (!want) return false;
+      return cellText(value).toLowerCase().includes(want);
+    }
+    case "gt":
+    case "gte":
+    case "lt":
+    case "lte": {
+      const left = typeof value === "number" ? value : Number(cellText(value));
+      const right = Number(rule.value);
+      if (!Number.isFinite(left) || !Number.isFinite(right)) return false;
+      if (rule.op === "gt") return left > right;
+      if (rule.op === "gte") return left >= right;
+      if (rule.op === "lt") return left < right;
+      return left <= right;
+    }
+  }
+}
+function colorForChoice(choices, value) {
+  if (!choices || choices.length === 0) return void 0;
+  const wanted = String(value);
+  const index = choices.findIndex((c) => c.value === wanted);
+  if (index === -1) return void 0;
+  const declared = choices[index]?.color;
+  if (isStyleColor(declared)) return declared;
+  return STYLE_COLORS[index % STYLE_COLORS.length];
+}
+var BOOLEAN_TRUE_COLOR = "green";
+function colorByFor(style, target, data, choiceColorFor) {
+  const cb = style.colorBy;
+  if (!cb || cb.target !== target) return null;
+  const value = data[cb.field];
+  if (value === true) return BOOLEAN_TRUE_COLOR;
+  if (value === false || isEmptyValue(value)) return null;
+  const first = Array.isArray(value) ? value[0] : value;
+  return choiceColorFor(cb.field, first) ?? null;
+}
+function ruleColorFor(style, target, data, fieldName) {
+  for (const rule of style.rules ?? []) {
+    if (rule.target !== target) continue;
+    if (target === "cell" && rule.field !== fieldName) continue;
+    if (evaluateRule(rule, data[rule.field])) return rule.color;
+  }
+  return null;
+}
+function resolveRowColor(style, row, choiceColorFor) {
+  return style.rows?.[row.id] ?? ruleColorFor(style, "row", row.data) ?? colorByFor(style, "row", row.data, choiceColorFor);
+}
+function resolveCellColor(style, row, fieldName, choiceColorFor) {
+  const manual = style.cells?.[row.id]?.[fieldName];
+  if (manual) return manual;
+  const rule = ruleColorFor(style, "cell", row.data, fieldName);
+  if (rule) return rule;
+  if (style.colorBy?.target === "cell" && style.colorBy.field === fieldName) {
+    const cb = colorByFor(style, "cell", row.data, choiceColorFor);
+    if (cb) return cb;
+  }
+  return style.columns?.[fieldName] ?? null;
+}
+var ROW_TINT_CLASS = {
+  slate: "bg-slate-100/70 dark:bg-slate-800/40",
+  green: "bg-green-50 dark:bg-green-950/40",
+  amber: "bg-amber-50 dark:bg-amber-950/40",
+  red: "bg-red-50 dark:bg-red-950/40",
+  blue: "bg-blue-50 dark:bg-blue-950/40",
+  violet: "bg-violet-50 dark:bg-violet-950/40",
+  teal: "bg-teal-50 dark:bg-teal-950/40"
+};
+var CELL_TINT_CLASS = {
+  slate: "bg-slate-200/70 dark:bg-slate-700/50",
+  green: "bg-green-100 dark:bg-green-900/50",
+  amber: "bg-amber-100 dark:bg-amber-900/50",
+  red: "bg-red-100 dark:bg-red-900/50",
+  blue: "bg-blue-100 dark:bg-blue-900/50",
+  violet: "bg-violet-100 dark:bg-violet-900/50",
+  teal: "bg-teal-100 dark:bg-teal-900/50"
+};
+var SWATCH_CLASS = {
+  slate: "bg-slate-400",
+  green: "bg-green-500",
+  amber: "bg-amber-400",
+  red: "bg-red-500",
+  blue: "bg-blue-500",
+  violet: "bg-violet-500",
+  teal: "bg-teal-500"
+};
+var STYLE_COLOR_LABELS = {
+  slate: "Gray",
+  green: "Green",
+  amber: "Amber",
+  red: "Red",
+  blue: "Blue",
+  violet: "Violet",
+  teal: "Teal"
+};
+var stylePath = {
+  colorBy: () => ["colorBy"],
+  rules: () => ["rules"],
+  row: (rowId) => ["rows", rowId],
+  cell: (rowId, fieldName) => ["cells", rowId, fieldName],
+  column: (fieldName) => ["columns", fieldName]
+};
+function applyStylePath(style, path2, value) {
+  const next = { ...style };
+  const [head, a, b] = path2;
+  switch (head) {
+    case "colorBy":
+      next.colorBy = value === null ? null : parseTableStyle({ colorBy: value }).colorBy ?? null;
+      break;
+    case "rules":
+      next.rules = value === null ? [] : parseTableStyle({ rules: value }).rules ?? [];
+      break;
+    case "rows": {
+      const rows = { ...style.rows ?? {} };
+      if (a === void 0) break;
+      if (isStyleColor(value)) rows[a] = value;
+      else delete rows[a];
+      next.rows = rows;
+      break;
+    }
+    case "columns": {
+      const columns = { ...style.columns ?? {} };
+      if (a === void 0) break;
+      if (isStyleColor(value)) columns[a] = value;
+      else delete columns[a];
+      next.columns = columns;
+      break;
+    }
+    case "cells": {
+      if (a === void 0 || b === void 0) break;
+      const cells = { ...style.cells ?? {} };
+      const byField = { ...cells[a] ?? {} };
+      if (isStyleColor(value)) byField[b] = value;
+      else delete byField[b];
+      if (Object.keys(byField).length === 0) delete cells[a];
+      else cells[a] = byField;
+      next.cells = cells;
+      break;
+    }
+  }
+  return next;
+}
+
+// src/data-table/saved-view-snapshot.ts
 var filterSchema = import_zod2.z.union([
   import_zod2.z.object({ kind: import_zod2.z.literal("text"), value: import_zod2.z.string(), mode: import_zod2.z.enum(["contains", "empty", "not_empty", "null", "not_null"]).optional(), negated: import_zod2.z.boolean().optional() }),
   import_zod2.z.object({ kind: import_zod2.z.literal("select"), value: import_zod2.z.string(), values: import_zod2.z.array(import_zod2.z.string()).optional(), negated: import_zod2.z.boolean().optional() }),
@@ -7034,7 +7352,13 @@ var snapshotSchema = import_zod2.z.object({
     }),
     hidden: import_zod2.z.array(import_zod2.z.string().min(1)),
     widths: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.number().finite().positive()).optional()
-  })
+  }),
+  // The style is read by `parseTableStyle`, not described again here. That
+  // reader is tolerant BY DESIGN — an unknown key, a retired color name or a
+  // malformed rule is dropped, never thrown — and a Zod mirror of it would
+  // reject a whole saved view over one stale rule, which is the opposite of
+  // what a table must do when its colors go out of date.
+  style: import_zod2.z.unknown().optional()
 });
 function normalizeFilters(raw) {
   const filters = {};
@@ -7051,6 +7375,7 @@ function parseTableViewSnapshot(raw) {
   const parsed = snapshotSchema.safeParse(raw);
   if (!parsed.success) return null;
   const { query, columns } = parsed.data;
+  const style = parsed.data.style === void 0 ? null : parseTableStyle(parsed.data.style);
   return {
     __kind: "matrx-table-view",
     version: 1,
@@ -7068,7 +7393,8 @@ function parseTableViewSnapshot(raw) {
       order: columns.order,
       hidden: columns.hidden,
       ...columns.widths === void 0 ? {} : { widths: columns.widths }
-    }
+    },
+    ...style === null || tableStyleIsEmpty(style) ? {} : { style }
   };
 }
 
@@ -7527,8 +7853,736 @@ function defaultRowTitle(row, columns) {
   return value ? isUuidValue(value) ? value.slice(0, 8) : value : "Details";
 }
 
-// src/data-table/DirtySavePill.tsx
+// src/data-table/frozen-columns.ts
+var NO_FROZEN_COLUMNS = {
+  offsets: {},
+  active: false,
+  selectionOffset: null
+};
+function resolveFrozenColumns(ids, isFrozen, widthOf, leadingWidth) {
+  const run = [];
+  for (const id of ids) {
+    if (!isFrozen(id)) break;
+    run.push(id);
+  }
+  if (run.length === 0) return NO_FROZEN_COLUMNS;
+  if (leadingWidth === void 0) return NO_FROZEN_COLUMNS;
+  const base = leadingWidth ?? 0;
+  const offsets = {};
+  let cursor = base;
+  for (let i = 0; i < run.length; i += 1) {
+    const id = run[i];
+    offsets[id] = cursor;
+    if (i === run.length - 1) break;
+    const w = widthOf(id);
+    if (w === void 0 || !Number.isFinite(w) || w <= 0) return NO_FROZEN_COLUMNS;
+    cursor += w;
+  }
+  return {
+    offsets,
+    active: true,
+    selectionOffset: leadingWidth === null ? null : 0
+  };
+}
+function pixelWidth(width) {
+  if (typeof width === "number") return Number.isFinite(width) ? width : void 0;
+  if (typeof width === "string") {
+    const m = /^(\d+(?:\.\d+)?)px$/.exec(width.trim());
+    if (m) return Number(m[1]);
+  }
+  return void 0;
+}
+var FROZEN_CELL_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-20 sm:bg-inherit";
+var FROZEN_HEADER_CLASS = "sm:sticky sm:left-[var(--matrx-frozen-left)] sm:z-30";
+var FROZEN_EDGE_CLASS = "sm:shadow-[inset_-1px_0_0_var(--border)]";
+
+// src/field-formats/registry.ts
+var import_format3 = require("@ai-matrx/kit/format");
+function formatSignedDuration(totalSeconds) {
+  return (0, import_format3.formatDurationSeconds)(totalSeconds, { signed: true });
+}
+function toNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "string") {
+    const cleaned = value.replace(/[,\s$€£¥%]/g, "");
+    if (cleaned === "") return null;
+    const n = Number(cleaned);
+    return Number.isFinite(n) ? n : null;
+  }
+  return null;
+}
+function toText(value) {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean")
+    return String(value);
+  return null;
+}
+function toDate(value) {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  if (typeof value === "number") {
+    const d = new Date(value);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  if (typeof value === "string" && value.trim()) {
+    const d = new Date(value);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  return null;
+}
+function toList(value) {
+  if (Array.isArray(value)) return value;
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed.startsWith("[")) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        if (Array.isArray(parsed)) return parsed;
+      } catch {
+      }
+    }
+    if (trimmed === "") return [];
+    return trimmed.split(",").map((s) => s.trim());
+  }
+  return null;
+}
+function groupedNumber(n, options) {
+  return new Intl.NumberFormat(void 0, {
+    useGrouping: options.useGrouping !== false,
+    ...options.precision != null ? {
+      minimumFractionDigits: options.precision,
+      maximumFractionDigits: options.precision
+    } : { maximumFractionDigits: 10 }
+  }).format(n);
+}
+function affix(text, options) {
+  return `${options.prefix ?? ""}${text}${options.suffix ?? ""}`;
+}
+var DURATION_TO_SECONDS = { milliseconds: 1e-3, seconds: 1, minutes: 60, hours: 3600 };
+function findChoice(choices, value) {
+  if (!choices || choices.length === 0) return void 0;
+  const exact = choices.find((c) => c.value === value);
+  if (exact) return exact;
+  const lowered = value.toLowerCase();
+  return choices.find((c) => c.value.toLowerCase() === lowered);
+}
+var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var URL_RE = /^(?:[a-z][a-z0-9+.-]*:\/\/\S+|(?:[a-z0-9-]+\.)+[a-z]{2,}(?:[:/?#]\S*)?)$/i;
+var HEX_RE = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var DEFS = [
+  // ── Text ──────────────────────────────────────────────────────────────────
+  {
+    id: "text",
+    label: "Text",
+    description: "Plain single-line text",
+    group: "Text",
+    base: "string",
+    editor: "text",
+    // Deliberately no optionKeys — plain text is the default for every string
+    // column, and giving it prefix/suffix controls puts an options row under
+    // every column in the settings dialog for a setting almost nobody wants.
+    format: (v, o) => {
+      const t = toText(v);
+      return t === null ? null : affix(t, o);
+    },
+    parse: (raw) => raw === "" || raw == null ? null : String(raw)
+  },
+  {
+    id: "long_text",
+    label: "Long text",
+    description: "Multi-line text, edited in a larger box",
+    group: "Text",
+    base: "string",
+    editor: "textarea",
+    format: (v) => toText(v),
+    parse: (raw) => raw === "" || raw == null ? null : String(raw)
+  },
+  {
+    id: "markdown",
+    label: "Markdown",
+    description: "Rich text written as Markdown",
+    group: "Text",
+    base: "string",
+    editor: "textarea",
+    rich: true,
+    format: (v) => toText(v),
+    parse: (raw) => raw === "" || raw == null ? null : String(raw)
+  },
+  {
+    id: "email",
+    label: "Email",
+    description: "Email address \u2014 click to compose",
+    group: "Text",
+    base: "string",
+    editor: "email",
+    rich: true,
+    format: (v) => {
+      const t = toText(v)?.trim();
+      if (!t) return null;
+      return EMAIL_RE.test(t) ? t : null;
+    },
+    parse: (raw) => raw === "" || raw == null ? null : String(raw).trim()
+  },
+  {
+    id: "url",
+    label: "Link",
+    description: "Web address \u2014 click to open",
+    group: "Text",
+    base: "string",
+    editor: "url",
+    rich: true,
+    format: (v) => {
+      const t = toText(v)?.trim();
+      if (!t) return null;
+      if (/\s/.test(t)) return null;
+      if (!URL_RE.test(t)) return null;
+      try {
+        new URL(t.includes("://") ? t : `https://${t}`);
+        return t;
+      } catch {
+        return null;
+      }
+    },
+    parse: (raw) => raw === "" || raw == null ? null : String(raw).trim()
+  },
+  {
+    id: "phone",
+    label: "Phone",
+    description: "Phone number \u2014 click to call",
+    group: "Text",
+    base: "string",
+    editor: "tel",
+    rich: true,
+    format: (v) => {
+      const t = toText(v)?.trim();
+      if (!t) return null;
+      return (t.match(/\d/g) ?? []).length >= 7 ? t : null;
+    },
+    parse: (raw) => raw === "" || raw == null ? null : String(raw).trim()
+  },
+  {
+    id: "color",
+    label: "Color",
+    description: "Hex color with a swatch",
+    group: "Text",
+    base: "string",
+    editor: "color",
+    rich: true,
+    format: (v) => {
+      const t = toText(v)?.trim();
+      if (!t) return null;
+      return HEX_RE.test(t) ? t.toLowerCase() : null;
+    },
+    parse: (raw) => raw === "" || raw == null ? null : String(raw).trim()
+  },
+  // ── Numbers ───────────────────────────────────────────────────────────────
+  {
+    id: "number",
+    label: "Number",
+    description: "Plain number",
+    group: "Numbers",
+    base: "number",
+    alsoAccepts: ["integer"],
+    editor: "number",
+    numericAlign: true,
+    optionKeys: ["useGrouping", "precision", "prefix", "suffix"],
+    format: (v, o) => {
+      const n = toNumber(v);
+      return n === null ? null : affix(groupedNumber(n, o), o);
+    },
+    parse: (raw) => toNumber(raw)
+  },
+  {
+    id: "decimal",
+    label: "Decimal",
+    description: "Number with fixed decimal places",
+    group: "Numbers",
+    base: "number",
+    alsoAccepts: ["integer"],
+    editor: "number",
+    numericAlign: true,
+    optionKeys: ["precision", "useGrouping", "prefix", "suffix"],
+    format: (v, o) => {
+      const n = toNumber(v);
+      if (n === null) return null;
+      return affix(groupedNumber(n, { ...o, precision: o.precision ?? 2 }), o);
+    },
+    parse: (raw) => toNumber(raw)
+  },
+  {
+    id: "currency",
+    label: "Currency",
+    description: "Money \u2014 stored as a plain number, shown with a symbol",
+    group: "Numbers",
+    base: "number",
+    alsoAccepts: ["integer"],
+    editor: "number",
+    numericAlign: true,
+    optionKeys: ["currency", "precision"],
+    format: (v, o) => {
+      const n = toNumber(v);
+      if (n === null) return null;
+      const currency = (o.currency || "USD").toUpperCase();
+      try {
+        return new Intl.NumberFormat(void 0, {
+          style: "currency",
+          currency,
+          ...o.precision != null ? {
+            minimumFractionDigits: o.precision,
+            maximumFractionDigits: o.precision
+          } : {}
+        }).format(n);
+      } catch {
+        return `${groupedNumber(n, { precision: o.precision ?? 2 })} ${currency}`;
+      }
+    },
+    parse: (raw) => toNumber(raw)
+  },
+  {
+    id: "percent",
+    label: "Percent",
+    description: "Percentage \u2014 stored as a plain number",
+    group: "Numbers",
+    base: "number",
+    alsoAccepts: ["integer"],
+    editor: "number",
+    numericAlign: true,
+    optionKeys: ["percentScale", "precision"],
+    format: (v, o) => {
+      const n = toNumber(v);
+      if (n === null) return null;
+      const shown = o.percentScale === "fraction" ? n * 100 : n;
+      return `${groupedNumber(shown, o.precision === void 0 ? {} : { precision: o.precision })}%`;
+    },
+    parse: (raw) => toNumber(raw)
+  },
+  {
+    id: "duration",
+    label: "Duration",
+    description: "Length of time, shown as h:mm:ss",
+    group: "Numbers",
+    base: "number",
+    alsoAccepts: ["integer"],
+    editor: "number",
+    numericAlign: true,
+    optionKeys: ["durationUnit"],
+    format: (v, o) => {
+      const n = toNumber(v);
+      if (n === null) return null;
+      return formatSignedDuration(n * DURATION_TO_SECONDS[o.durationUnit ?? "seconds"]);
+    },
+    parse: (raw) => toNumber(raw)
+  },
+  {
+    id: "integer",
+    label: "Whole number",
+    description: "Integer with no decimal part",
+    group: "Numbers",
+    base: "integer",
+    alsoAccepts: ["number"],
+    editor: "number",
+    numericAlign: true,
+    optionKeys: ["useGrouping", "prefix", "suffix"],
+    format: (v, o) => {
+      const n = toNumber(v);
+      if (n === null) return null;
+      return affix(groupedNumber(Math.trunc(n), { ...o, precision: 0 }), o);
+    },
+    parse: (raw) => {
+      const n = toNumber(raw);
+      return n === null ? null : Math.trunc(n);
+    }
+  },
+  {
+    id: "rating",
+    label: "Rating",
+    description: "Score out of a maximum, shown as stars",
+    group: "Numbers",
+    base: "integer",
+    alsoAccepts: ["number"],
+    editor: "rating",
+    rich: true,
+    optionKeys: ["ratingMax"],
+    format: (v, o) => {
+      const n = toNumber(v);
+      if (n === null) return null;
+      const max = o.ratingMax ?? 5;
+      if (n < 0 || n > max) return null;
+      return `${n} / ${max}`;
+    },
+    parse: (raw) => {
+      const n = toNumber(raw);
+      return n === null ? null : Math.round(n);
+    }
+  },
+  {
+    id: "file_size",
+    label: "File size",
+    description: "Byte count shown as KB / MB / GB",
+    group: "Numbers",
+    base: "integer",
+    alsoAccepts: ["number"],
+    editor: "number",
+    numericAlign: true,
+    format: (v) => {
+      const n = toNumber(v);
+      return n === null ? null : (0, import_format3.formatFileSize)(n);
+    },
+    parse: (raw) => {
+      const n = toNumber(raw);
+      return n === null ? null : Math.trunc(n);
+    }
+  },
+  // ── Choice ────────────────────────────────────────────────────────────────
+  {
+    id: "boolean",
+    label: "Yes / No",
+    description: "True or false",
+    group: "Choice",
+    base: "boolean",
+    editor: "checkbox",
+    format: (v) => {
+      if (typeof v === "boolean") return v ? "Yes" : "No";
+      if (v === "true" || v === 1) return "Yes";
+      if (v === "false" || v === 0) return "No";
+      return null;
+    },
+    parse: (raw) => {
+      if (typeof raw === "boolean") return raw;
+      if (raw == null || raw === "") return null;
+      return String(raw).toLowerCase() === "true" || raw === 1;
+    }
+  },
+  // ── Dates ─────────────────────────────────────────────────────────────────
+  {
+    id: "date",
+    label: "Date",
+    description: "Calendar date",
+    group: "Dates",
+    base: "date",
+    alsoAccepts: ["datetime", "string"],
+    editor: "date",
+    optionKeys: ["dateStyle"],
+    format: (v, o) => {
+      const d = toDate(v);
+      if (!d) return null;
+      return d.toLocaleDateString(void 0, {
+        dateStyle: o.dateStyle ?? "medium"
+      });
+    },
+    parse: (raw) => raw === "" || raw == null ? null : String(raw)
+  },
+  {
+    id: "datetime",
+    label: "Date & time",
+    description: "Calendar date with a time of day",
+    group: "Dates",
+    base: "datetime",
+    alsoAccepts: ["date", "string"],
+    editor: "datetime",
+    optionKeys: ["dateStyle"],
+    format: (v, o) => {
+      const d = toDate(v);
+      if (!d) return null;
+      return d.toLocaleString(void 0, {
+        dateStyle: o.dateStyle ?? "medium",
+        timeStyle: "short"
+      });
+    },
+    parse: (raw) => raw === "" || raw == null ? null : String(raw)
+  },
+  {
+    id: "relative_time",
+    label: "Relative time",
+    description: 'Shown as "3 days ago"',
+    group: "Dates",
+    base: "datetime",
+    alsoAccepts: ["date", "string"],
+    editor: "datetime",
+    format: (v) => {
+      const d = toDate(v);
+      return d ? (0, import_format3.formatRelativeTime)(d, { style: "intl" }) : null;
+    },
+    parse: (raw) => raw === "" || raw == null ? null : String(raw)
+  },
+  // ── Structured ────────────────────────────────────────────────────────────
+  {
+    id: "json",
+    label: "JSON",
+    description: "Structured object",
+    group: "Structured",
+    base: "json",
+    alsoAccepts: ["array"],
+    editor: "json",
+    format: (v) => {
+      if (v === null || v === void 0) return null;
+      if (typeof v === "object") return JSON.stringify(v);
+      return toText(v);
+    },
+    parse: (raw) => {
+      if (raw == null || raw === "") return null;
+      if (typeof raw !== "string") return raw;
+      try {
+        return JSON.parse(raw);
+      } catch {
+        return raw;
+      }
+    }
+  },
+  {
+    id: "array",
+    label: "List",
+    description: "List of values",
+    group: "Structured",
+    base: "array",
+    alsoAccepts: ["json"],
+    editor: "json",
+    format: (v) => {
+      const list = toList(v);
+      return list === null ? null : list.map((i) => String(i)).join(", ");
+    },
+    parse: (raw) => {
+      if (raw == null || raw === "") return null;
+      if (Array.isArray(raw)) return raw;
+      return toList(raw) ?? raw;
+    }
+  },
+  {
+    id: "tags",
+    label: "Tags",
+    description: "List of values shown as chips",
+    group: "Structured",
+    base: "array",
+    alsoAccepts: ["json", "string"],
+    editor: "json",
+    rich: true,
+    format: (v) => {
+      const list = toList(v);
+      return list === null ? null : list.map((i) => String(i)).join(", ");
+    },
+    parse: (raw) => {
+      if (raw == null || raw === "") return null;
+      if (Array.isArray(raw)) return raw;
+      return toList(raw) ?? raw;
+    }
+  },
+  // ─── Choice ────────────────────────────────────────────────────────────────
+  //
+  // An enum WITHOUT a database enum. The column stays `string` (or `array` for
+  // multi), the database enforces nothing, and stripping the format leaves
+  // every stored value exactly as it was. Options are a UI layer — the same
+  // trick `percent` plays on a number.
+  //
+  // The fallback law is the whole reason this is safe to switch on over live
+  // data: a value not in the option list is NOT an error and is NEVER blanked.
+  // `format()` returns null for it, `<FormattedFieldValue>` renders it in amber
+  // with the reason, and the user can fix it or adopt it. Declaring the options
+  // is therefore how you FIND your stray values, not how you lose them.
+  //
+  // Options resolve through `choices.ts` — inline `options.choices`, or a
+  // structured list via `options.structuredList`. This def only ever sees
+  // whatever the caller resolved into `options.choices`, so it stays pure and
+  // synchronous like every other format.
+  {
+    id: "choice",
+    label: "Choice",
+    description: "One value from a list of options",
+    group: "Choice",
+    base: "string",
+    alsoAccepts: ["number", "integer", "boolean"],
+    editor: "select",
+    rich: true,
+    optionKeys: ["choices", "structuredList", "allowOther"],
+    format: (v, options) => {
+      const text = toText(v);
+      if (text === null) return null;
+      const trimmed = text.trim();
+      if (trimmed === "") return "";
+      const match = findChoice(options.choices, trimmed);
+      if (!options.choices || options.choices.length === 0) return trimmed;
+      return match ? match.label ?? match.value : null;
+    },
+    parse: (raw) => {
+      if (raw == null) return null;
+      const text = toText(raw);
+      if (text === null) return raw;
+      const trimmed = text.trim();
+      return trimmed === "" ? null : trimmed;
+    }
+  },
+  {
+    id: "multi_choice",
+    label: "Multi-choice",
+    description: "Any number of values from a list of options",
+    group: "Choice",
+    base: "array",
+    alsoAccepts: ["string", "json"],
+    editor: "multiselect",
+    rich: true,
+    optionKeys: ["choices", "structuredList", "allowOther"],
+    format: (v, options) => {
+      const list = toList(v);
+      if (list === null) return null;
+      if (list.length === 0) return "";
+      const labels = [];
+      let anyOffList = false;
+      for (const entry of list) {
+        const text = toText(entry);
+        if (text === null) {
+          anyOffList = true;
+          continue;
+        }
+        const match = findChoice(options.choices, text.trim());
+        if (match) labels.push(match.label ?? match.value);
+        else {
+          labels.push(text.trim());
+          anyOffList = true;
+        }
+      }
+      const haveOptions = !!options.choices && options.choices.length > 0;
+      if (haveOptions && anyOffList) return null;
+      return labels.join(", ");
+    },
+    parse: (raw) => {
+      if (raw == null || raw === "") return null;
+      if (Array.isArray(raw)) return raw;
+      return toList(raw) ?? raw;
+    }
+  },
+  // ─── Computed ──────────────────────────────────────────────────────────────
+  //
+  // A formula column stores NOTHING. `metadata.format.options.formula` holds
+  // the expression; the stored cell is always null; the value is computed on
+  // read from the other columns of the same row
+  // (`features/data-tables/formulas.ts`). Grouped under Structured on purpose
+  // — the picker's groups are a fixed vocabulary, and a formula is structure
+  // over a plain string column, not a sixth family.
+  //
+  // `format()` here is handed the COMPUTED value, never a stored one, and its
+  // only job is to render it: through `resultFormat`'s own `format()` when the
+  // column declares one (a computed total shown as Currency, a computed date
+  // shown as a Date), and plainly otherwise. It never returns null for an
+  // empty value, because a formula legitimately produces BLANK.
+  //
+  // No `optionKeys`: the expression is authored in its own editor, not in the
+  // generic option rail, and listing a key the picker has no control for would
+  // open an empty options section under every formula column.
+  {
+    id: "formula",
+    label: "Formula",
+    description: "Computed from the other columns in the row \u2014 never typed in",
+    group: "Structured",
+    base: "string",
+    editor: "computed",
+    format: (v, o) => {
+      const target = o.formula?.resultFormat;
+      if (target && target !== "formula") {
+        const delegate = FIELD_FORMATS[target];
+        if (delegate) {
+          const rendered = delegate.format(v, o);
+          if (rendered !== null) return rendered;
+        }
+      }
+      if (v === null || v === void 0) return "";
+      if (typeof v === "boolean") return v ? "Yes" : "No";
+      if (typeof v === "number") return groupedNumber(v, o);
+      return toText(v);
+    },
+    // Nothing is ever stored in a formula column. Returning the raw input here
+    // would be the one way a computed cell could acquire a value of its own.
+    parse: () => null
+  }
+];
+var FIELD_FORMATS = Object.freeze(
+  Object.fromEntries(DEFS.map((d) => [d.id, d]))
+);
+var FIELD_FORMAT_LIST = Object.freeze(DEFS);
+var FIELD_FORMAT_IDS = DEFS.map((d) => d.id);
+function getFieldFormat(id) {
+  if (!id) return null;
+  return FIELD_FORMATS[id] ?? null;
+}
+function defaultFormatForBase(base) {
+  switch (base) {
+    case "number":
+      return "number";
+    case "integer":
+      return "integer";
+    case "boolean":
+      return "boolean";
+    case "date":
+      return "date";
+    case "datetime":
+      return "datetime";
+    case "json":
+      return "json";
+    case "array":
+      return "array";
+    default:
+      return "text";
+  }
+}
+
+// src/field-formats/format.ts
+function isEmpty(value) {
+  return value === null || value === void 0 || value === "";
+}
+function baseText(value) {
+  if (isEmpty(value)) return "";
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+function formatFieldValue(value, config, dataType) {
+  if (isEmpty(value)) return { ok: true, text: "", empty: true };
+  const def = config ? getFieldFormat(config.id) : null;
+  const effective = def ?? FIELD_FORMATS[defaultFormatForBase(dataType ?? "string")];
+  let formatted;
+  try {
+    formatted = effective.format(value, config?.options ?? {});
+  } catch {
+    formatted = null;
+  }
+  if (formatted !== null) return { ok: true, text: formatted, empty: false };
+  return {
+    ok: false,
+    text: baseText(value),
+    empty: false,
+    reason: `This value is not a valid ${effective.label.toLowerCase()} \u2014 showing the stored value instead.`
+  };
+}
+
+// src/data-table/column-format.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
+function formatColumnValue(col, value) {
+  if (!col.format) return null;
+  return formatFieldValue(value, col.format);
+}
+function alignForFormat(col) {
+  if (col.align) return col.align;
+  if (!col.format) return void 0;
+  const def = getFieldFormat(col.format.id);
+  if (!def) return void 0;
+  return def.numericAlign ? "right" : void 0;
+}
+var FORMAT_MISMATCH_CLASS = "text-amber-600 underline decoration-dotted underline-offset-2 dark:text-amber-400";
+function FormattedCell({ result }) {
+  if (result.empty) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-muted-foreground", children: "\u2014" });
+  if (result.ok) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "block truncate text-sm text-foreground", children: result.text });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("block truncate text-sm", FORMAT_MISMATCH_CLASS), children: result.text }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { className: "max-w-md whitespace-pre-wrap break-words", children: result.reason ?? "This value does not fit the format this column declares." })
+  ] });
+}
+
+// src/data-table/DirtySavePill.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function DirtySavePill({
   changeCount,
   saving,
@@ -7537,20 +8591,20 @@ function DirtySavePill({
   className
 }) {
   if (changeCount <= 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       className: cn(
         "pointer-events-none fixed inset-x-0 bottom-6 z-50 flex justify-center pb-safe",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "pointer-events-auto flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 shadow-lg elevation-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "px-1 text-xs font-medium text-muted-foreground", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "pointer-events-auto flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 shadow-lg elevation-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "px-1 text-xs font-medium text-muted-foreground", children: [
           changeCount,
           " unsaved change",
           changeCount === 1 ? "" : "s"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
           Button,
           {
             type: "button",
@@ -7560,12 +8614,12 @@ function DirtySavePill({
             disabled: saving,
             onClick: onCancel,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(X, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-3.5 w-3.5" }),
               "Cancel"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
           Button,
           {
             type: "button",
@@ -7574,7 +8628,7 @@ function DirtySavePill({
             disabled: saving,
             onClick: onSave,
             children: [
-              saving ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Save, { className: "h-3.5 w-3.5" }),
+              saving ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Save, { className: "h-3.5 w-3.5" }),
               "Save"
             ]
           }
@@ -7586,7 +8640,7 @@ function DirtySavePill({
 
 // src/data-table/EditableTableCell.tsx
 var import_react18 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function CellEditShell({
   href,
   display,
@@ -7595,8 +8649,8 @@ function CellEditShell({
   editButton
 }) {
   const { Link: HostLink } = useMatrxDataTableHost();
-  const Link = HostLink ?? ((props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("a", { ...props }));
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  const Link = HostLink ?? ((props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("a", { ...props }));
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "span",
     {
       className: cn(
@@ -7608,7 +8662,7 @@ function CellEditShell({
         className
       ),
       children: [
-        href ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        href ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           Link,
           {
             href,
@@ -7616,7 +8670,7 @@ function CellEditShell({
             className: "min-w-0 flex-1 overflow-hidden truncate rounded outline-none  focus-visible:ring-2 focus-visible:ring-ring",
             children: display
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "block min-w-0 flex-1 overflow-hidden", children: display }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "block min-w-0 flex-1 overflow-hidden", children: display }),
         editButton
       ]
     }
@@ -7641,7 +8695,7 @@ function EditableTableCell({
   }, [editRequest]);
   const usePencil = Boolean(href) || editTrigger === "pencil";
   if (editType === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       InlineStringEditor,
       {
         value: stringifyCellValue(value),
@@ -7655,30 +8709,30 @@ function EditableTableCell({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-    usePencil ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    usePencil ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       CellEditShell,
       {
         ...href === void 0 ? {} : { href },
         display,
         ...dirty === void 0 ? {} : { dirty },
         ...className === void 0 ? {} : { className },
-        editButton: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        editButton: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "button",
             {
               type: "button",
               "aria-label": "Edit",
               onClick: (e) => e.stopPropagation(),
               className: CELL_PENCIL_CLASS,
-              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Pencil, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Pencil, { className: "h-3 w-3" })
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Edit" })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { children: "Edit" })
         ] })
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "button",
         {
           type: "button",
@@ -7689,20 +8743,20 @@ function EditableTableCell({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex-1 overflow-hidden", children: display }),
-            editType === "select" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground/70 transition-colors group-hover/cell-select:text-foreground" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "min-w-0 flex-1 overflow-hidden", children: display }),
+            editType === "select" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground/70 transition-colors group-hover/cell-select:text-foreground" }) : null
           ]
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Edit value" })
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { children: "Edit value" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       PopoverContent,
       {
         align: "start",
         className: "w-56 p-2",
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           TypedEditor,
           {
             editType,
@@ -7740,15 +8794,15 @@ function InlineStringEditor({
   }, [editRequest, value]);
   if (!editing) {
     if (usePencil) {
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         CellEditShell,
         {
           ...href === void 0 ? {} : { href },
           display,
           ...dirty === void 0 ? {} : { dirty },
           ...className === void 0 ? {} : { className },
-          editButton: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          editButton: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "button",
               {
                 type: "button",
@@ -7759,16 +8813,16 @@ function InlineStringEditor({
                   setEditing(true);
                 },
                 className: CELL_PENCIL_CLASS,
-                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Pencil, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Pencil, { className: "h-3 w-3" })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Edit" })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { children: "Edit" })
           ] })
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
@@ -7785,10 +8839,10 @@ function InlineStringEditor({
           children: display
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: "Click to edit" })
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { children: "Click to edit" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Input,
     {
       autoFocus: true,
@@ -7824,9 +8878,9 @@ function TypedEditor({
 }) {
   if (editType === "boolean") {
     const checked = Boolean(value);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs font-medium", children: "Value" }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-xs font-medium", children: "Value" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Checkbox,
         {
           checked,
@@ -7836,7 +8890,7 @@ function TypedEditor({
     ] });
   }
   if (editType === "number") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       NumberEditor,
       {
         value: typeof value === "number" ? value : Number(value) || 0,
@@ -7846,7 +8900,7 @@ function TypedEditor({
     );
   }
   if (editType === "tags") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       TagsEditor,
       {
         value: Array.isArray(value) ? value.map(String) : [],
@@ -7857,19 +8911,19 @@ function TypedEditor({
     );
   }
   if (editType === "select") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       Select,
       {
         value: stringifyCellValue(value),
         onValueChange: (v) => onCommit(v),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectValue, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectContent, { children: editOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectItem, { value: o.value, children: o.label }, o.value)) })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectValue, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectContent, { children: editOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectItem, { value: o.value, children: o.label }, o.value)) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Input,
     {
       type: "date",
@@ -7899,11 +8953,11 @@ function TagsEditor({
   const matches = suggestions.filter(
     (s) => !tags.includes(s.value) && s.value !== "__none__" && (!draft || s.label.toLowerCase().includes(draft.trim().toLowerCase()))
   ).slice(0, 6);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "space-y-2", onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      tags.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs text-muted-foreground", children: "No tags" }),
-      tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "space-y-2", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      tags.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-xs text-muted-foreground", children: "No tags" }),
+      tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
           "button",
           {
             type: "button",
@@ -7912,17 +8966,17 @@ function TagsEditor({
             className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-[11px] hover:border-destructive hover:text-destructive",
             children: [
               tag,
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-2.5 w-2.5" })
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(X, { className: "h-2.5 w-2.5" })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(TooltipContent, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(TooltipContent, { children: [
           "Remove ",
           tag
         ] })
       ] }, tag))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Input,
       {
         autoFocus: true,
@@ -7943,7 +8997,7 @@ function TagsEditor({
         className: "h-8 text-xs"
       }
     ),
-    matches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-wrap gap-1", children: matches.map((s) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    matches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-wrap gap-1", children: matches.map((s) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "button",
       {
         type: "button",
@@ -7956,8 +9010,8 @@ function TagsEditor({
       },
       s.value
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex justify-end gap-1 pt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex justify-end gap-1 pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Button,
         {
           size: "sm",
@@ -7965,17 +9019,17 @@ function TagsEditor({
           className: "h-7 px-2",
           "aria-label": "Cancel edit",
           onClick: onCancel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(X, { className: "h-3.5 w-3.5" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Button,
         {
           size: "sm",
           className: "h-7 px-2",
           "aria-label": "Apply tags",
           onClick: () => onCommit(tags),
-          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Check, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Check, { className: "h-3.5 w-3.5" })
         }
       )
     ] })
@@ -7987,8 +9041,8 @@ function NumberEditor({
   onCancel
 }) {
   const [draft, setDraft] = (0, import_react18.useState)(String(value));
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Input,
       {
         autoFocus: true,
@@ -8005,8 +9059,8 @@ function NumberEditor({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex justify-end gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex justify-end gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Button,
         {
           type: "button",
@@ -8015,10 +9069,10 @@ function NumberEditor({
           className: "h-7",
           "aria-label": "Cancel edit",
           onClick: onCancel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(X, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(X, { className: "h-3.5 w-3.5" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Button,
         {
           type: "button",
@@ -8029,7 +9083,7 @@ function NumberEditor({
             const n = Number(draft);
             if (Number.isFinite(n)) onCommit(n);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Check, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Check, { className: "h-3.5 w-3.5" })
         }
       )
     ] })
@@ -8037,24 +9091,24 @@ function NumberEditor({
 }
 
 // src/data-table/ToolbarFacets.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ToolbarFacets({ facets }) {
   if (facets.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: facets.map((facet) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: facets.map((facet) => {
     if (facet.type === "custom") {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: facet.render() }, facet.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: facet.render() }, facet.id);
     }
     const defaultValue = facet.defaultValue ?? facet.options[0]?.value ?? "";
     const isNonDefault = facet.value !== defaultValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         className: "flex flex-wrap items-center gap-1.5 max-sm:grid max-sm:w-full max-sm:grid-cols-3",
         children: [
-          facet.label ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "mr-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: facet.label }) : null,
+          facet.label ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "mr-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: facet.label }) : null,
           facet.options.map((opt) => {
             const active = facet.value === opt.value;
-            return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
               Button,
               {
                 type: "button",
@@ -8068,8 +9122,8 @@ function ToolbarFacets({ facets }) {
                 children: [
                   opt.icon,
                   opt.label,
-                  active && isNonDefault ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  active && isNonDefault ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       "span",
                       {
                         role: "button",
@@ -8087,10 +9141,10 @@ function ToolbarFacets({ facets }) {
                             facet.onChange(defaultValue);
                           }
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(X, { className: "h-3 w-3" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(X, { className: "h-3 w-3" })
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { side: "top", children: "Clear this filter" })
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipContent, { side: "top", children: "Clear this filter" })
                   ] }) }) : null
                 ]
               },
@@ -8117,7 +9171,7 @@ function resetToolbarFacets(facets) {
 
 // src/data-table/LayeredFilterBuilder.tsx
 var import_react19 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function moveRule(rules, from, to) {
   if (from === to || to < 0 || to >= rules.length) return [...rules];
   const next = [...rules];
@@ -8163,8 +9217,8 @@ function LayeredFilterBuilder({
   const reorder = (from, to) => {
     onChange(moveRule(rules, from, to));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       Popover,
       {
         open,
@@ -8176,7 +9230,7 @@ function LayeredFilterBuilder({
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             Button,
             {
               type: "button",
@@ -8185,25 +9239,25 @@ function LayeredFilterBuilder({
               className: "h-8 gap-1.5 px-2 text-xs",
               "aria-label": label,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "hidden sm:inline", children: rules.length > 0 ? `${rules.length} layers` : "Advanced" }),
-                rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "sm:hidden", children: rules.length }) : null
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "hidden sm:inline", children: rules.length > 0 ? `${rules.length} layers` : "Advanced" }),
+                rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "sm:hidden", children: rules.length }) : null
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             PopoverContent,
             {
               align: "start",
               sideOffset: 6,
               className: "w-[min(46rem,calc(100vw-1rem))] p-0",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-start justify-between gap-3 border-b border-border px-3 py-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-semibold text-foreground", children: "Narrow these results" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xs text-muted-foreground", children: "Every layer must match. Drag layers to put them in the order that makes sense to you." })
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-start justify-between gap-3 border-b border-border px-3 py-2.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-semibold text-foreground", children: "Narrow these results" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xs text-muted-foreground", children: "Every layer must match. Drag layers to put them in the order that makes sense to you." })
                   ] }),
-                  rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     Button,
                     {
                       type: "button",
@@ -8215,10 +9269,10 @@ function LayeredFilterBuilder({
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "max-h-[min(28rem,65dvh)] space-y-1.5 overflow-y-auto p-2.5 scrollbar-thin", children: rules.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "rounded-md border border-dashed border-border px-3 py-5 text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Start with one simple layer" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: "For example: Keyword contains ITAD, then Keyword doesn't have the word \u201Cwhat\u201D." })
-                ] }) : rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "max-h-[min(28rem,65dvh)] space-y-1.5 overflow-y-auto p-2.5 scrollbar-thin", children: rules.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "rounded-md border border-dashed border-border px-3 py-5 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Start with one simple layer" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: "For example: Keyword contains ITAD, then Keyword doesn't have the word \u201Cwhat\u201D." })
+                ] }) : rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   LayeredRuleRow,
                   {
                     index,
@@ -8238,9 +9292,9 @@ function LayeredFilterBuilder({
                   },
                   rule.id
                 )) }),
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-border px-3 py-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "The regular search still works and is applied before these layers." }),
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-border px-3 py-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "The regular search still works and is applied before these layers." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                     Button,
                     {
                       type: "button",
@@ -8250,7 +9304,7 @@ function LayeredFilterBuilder({
                       disabled: rules.length >= maxRules,
                       onClick: addRule,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Plus, { className: "h-3.5 w-3.5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Plus, { className: "h-3.5 w-3.5" }),
                         " Add layer"
                       ]
                     }
@@ -8262,7 +9316,7 @@ function LayeredFilterBuilder({
         ]
       }
     ),
-    rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "span",
       {
         className: cn(
@@ -8270,7 +9324,7 @@ function LayeredFilterBuilder({
           isCompleteLayeredFilterRule(rule) ? "border-border bg-muted/50 text-foreground" : "border-dashed border-warning/50 bg-warning/10 text-warning"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             "button",
             {
               type: "button",
@@ -8278,19 +9332,19 @@ function LayeredFilterBuilder({
               onClick: () => setOpen(true),
               title: isCompleteLayeredFilterRule(rule) ? layeredFilterRuleSummary(rule, fields) : `Layer ${index + 1} needs a value`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "mr-1 text-muted-foreground", children: index + 1 }),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "mr-1 text-muted-foreground", children: index + 1 }),
                 isCompleteLayeredFilterRule(rule) ? layeredFilterRuleSummary(rule, fields) : "Choose a value"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "button",
             {
               type: "button",
               className: "shrink-0 rounded-full p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
               "aria-label": `Remove filter layer ${index + 1}`,
               onClick: () => removeRule(index),
-              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(X, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(X, { className: "h-3 w-3" })
             }
           )
         ]
@@ -8320,7 +9374,7 @@ function LayeredRuleRow({
     event.preventDefault();
     onKeyboardMove(event.key === "ArrowUp" ? -1 : 1);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
       className: cn(
@@ -8333,7 +9387,7 @@ function LayeredRuleRow({
         onDrop(index);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "button",
           {
             type: "button",
@@ -8347,10 +9401,10 @@ function LayeredRuleRow({
             },
             onDragEnd,
             onKeyDown: handleMoveKey,
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           Select,
           {
             value: field.id,
@@ -8368,16 +9422,16 @@ function LayeredRuleRow({
               });
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 SelectTrigger,
                 {
                   size: "sm",
                   className: "h-7 w-full text-xs max-sm:col-span-1",
                   "aria-label": `Filter layer ${index + 1} field`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectValue, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectContent, { children: fields.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectContent, { children: fields.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 SelectItem,
                 {
                   value: candidate.id,
@@ -8389,7 +9443,7 @@ function LayeredRuleRow({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           Select,
           {
             value: rule.operator,
@@ -8401,35 +9455,35 @@ function LayeredRuleRow({
               });
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 SelectTrigger,
                 {
                   size: "sm",
                   className: "h-7 w-full text-xs max-sm:col-start-2",
                   "aria-label": `Filter layer ${index + 1} operator`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectValue, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectContent, { children: operators.map((operator) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectItem, { value: operator, className: "text-xs", children: LAYERED_FILTER_OPERATOR_LABELS[operator] }, operator)) })
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectContent, { children: operators.map((operator) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectItem, { value: operator, className: "text-xs", children: LAYERED_FILTER_OPERATOR_LABELS[operator] }, operator)) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "min-w-0 max-sm:col-span-3 max-sm:col-start-1", children: !needsValue ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex h-7 items-center px-2 text-xs text-muted-foreground", children: "No value needed" }) : field.kind === "select" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "min-w-0 max-sm:col-span-3 max-sm:col-start-1", children: !needsValue ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex h-7 items-center px-2 text-xs text-muted-foreground", children: "No value needed" }) : field.kind === "select" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           Select,
           {
             value: rule.value,
             onValueChange: (value) => onChange({ value }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 SelectTrigger,
                 {
                   size: "sm",
                   className: "h-7 w-full text-xs",
                   "aria-label": `Filter layer ${index + 1} value`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectValue, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectContent, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectContent, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 SelectItem,
                 {
                   value: option.value,
@@ -8440,8 +9494,8 @@ function LayeredRuleRow({
               )) })
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             Input,
             {
               value: rule.value,
@@ -8452,9 +9506,9 @@ function LayeredRuleRow({
               "aria-label": `Filter layer ${index + 1} value`
             }
           ),
-          rule.operator === "between" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "and" }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          rule.operator === "between" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "and" }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               Input,
               {
                 value: rule.valueTo ?? "",
@@ -8467,7 +9521,7 @@ function LayeredRuleRow({
             )
           ] }) : null
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           Button,
           {
             type: "button",
@@ -8476,7 +9530,7 @@ function LayeredRuleRow({
             className: "h-7 w-7 p-0 text-muted-foreground hover:text-destructive max-sm:col-start-3 max-sm:row-start-1",
             "aria-label": `Remove filter layer ${index + 1}`,
             onClick: onRemove,
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Trash2, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Trash2, { className: "h-3.5 w-3.5" })
           }
         )
       ]
@@ -8589,7 +9643,7 @@ function safeQueryPage(requestedPage, totalItems, pageSize) {
 }
 
 // src/data-table/MatrxDataTable.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function TableToolbarAction({
   HostAction,
   ariaLabel,
@@ -8600,10 +9654,10 @@ function TableToolbarAction({
   children
 }) {
   if (HostAction) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-matrx-table-toolbar-action": true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-matrx-table-toolbar-action": true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-matrx-table-toolbar-action": true, className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-matrx-table-toolbar-action": true, className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Button,
       {
         type: "button",
@@ -8618,7 +9672,7 @@ function TableToolbarAction({
         children: (0, import_react20.isValidElement)(children) ? (0, import_react20.cloneElement)(children, { className: cn("h-5 w-5", children.props.className) }) : children
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: tooltip ?? ariaLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: tooltip ?? ariaLabel })
   ] });
 }
 function hasSameRowReferences(previous, next) {
@@ -8635,7 +9689,7 @@ function TableRowCopyControl({
   sourceId,
   defaultColumns
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CopyButtons, { size, ...tableRowCopyProps(copy, row, sourceId, defaultColumns) });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CopyButtons, { size, ...tableRowCopyProps(copy, row, sourceId, defaultColumns) });
 }
 function tableRowCopyProps(copy, row, sourceId, defaultColumns) {
   const aiVariants = copy.rowAiVariants?.(row);
@@ -8659,8 +9713,8 @@ function isStringArray(value) {
 }
 var activeUrlTableIds = /* @__PURE__ */ new Set();
 function MatrxDataTable(props) {
-  if (!props.urlState) return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MatrxDataTableCore, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MatrxDataTableWithUrlState, { ...props, urlState: props.urlState });
+  if (!props.urlState) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MatrxDataTableCore, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MatrxDataTableWithUrlState, { ...props, urlState: props.urlState });
 }
 function MatrxDataTableWithUrlState({
   urlState,
@@ -8715,7 +9769,7 @@ function MatrxDataTableWithUrlState({
       props.selection?.onSelectedIdsChange(ids);
     }
   } : props.selection;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     MatrxDataTableCore,
     {
       ...props,
@@ -8767,7 +9821,7 @@ function opensRowHref(event) {
   return event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1;
 }
 function TableContextPassthrough({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children });
 }
 function MatrxDataTableCore({
   data: suppliedData,
@@ -8808,6 +9862,8 @@ function MatrxDataTableCore({
   rowActions,
   footerRows = [],
   rowClassName,
+  cellClassName,
+  tableStyle,
   highlightedIndex,
   onViewChange,
   rowWrapper,
@@ -9405,6 +10461,48 @@ function MatrxDataTableCore({
     setFixedTableGeometry(geometry);
   }, [resolvedDensity, measureFixedTableGeometry, usesMeasuredFixedLayout]);
   const fixedLayoutActive = usesMeasuredFixedLayout && fixedTableGeometry !== null;
+  const frozenColumns = (0, import_react20.useMemo)(() => {
+    if (!visibleColumns.some((column) => column.frozen)) return NO_FROZEN_COLUMNS;
+    const ids = visibleColumns.map(columnId);
+    const byId = new Map(visibleColumns.map((column) => [columnId(column), column]));
+    return resolveFrozenColumns(
+      ids,
+      (id) => byId.get(id)?.frozen === true,
+      (id) => effectiveColumnWidths[id] ?? pixelWidth(byId.get(id)?.width),
+      selection ? fixedTableGeometry?.selectionWidth : null
+    );
+  }, [visibleColumns, effectiveColumnWidths, selection, fixedTableGeometry]);
+  const frozenStyle = (id) => {
+    const left = frozenColumns.offsets[id];
+    if (left === void 0) return void 0;
+    return { "--matrx-frozen-left": `${left}px` };
+  };
+  const frozenEdgeId = (() => {
+    const ids = Object.keys(frozenColumns.offsets);
+    return ids.length === 0 ? null : ids[ids.length - 1];
+  })();
+  const styleFieldOf = tableStyle?.fieldOf ?? ((id) => id);
+  const styleDocumentOf = tableStyle?.documentOf ?? ((row) => row);
+  const noChoiceColor = () => void 0;
+  const rowTintClass = (row, id) => {
+    if (!tableStyle) return void 0;
+    const color = resolveRowColor(
+      tableStyle.style,
+      { id, data: styleDocumentOf(row) },
+      tableStyle.choiceColorFor ?? noChoiceColor
+    );
+    return color ? ROW_TINT_CLASS[color] : void 0;
+  };
+  const cellTintClass = (row, id, colId) => {
+    if (!tableStyle) return void 0;
+    const color = resolveCellColor(
+      tableStyle.style,
+      { id, data: styleDocumentOf(row) },
+      styleFieldOf(colId),
+      tableStyle.choiceColorFor ?? noChoiceColor
+    );
+    return color ? CELL_TINT_CLASS[color] : void 0;
+  };
   const declaredVisibleCopyColumns = (0, import_react20.useMemo)(
     () => visibleColumns.filter((column) => column.accessorFn !== void 0 || column.accessorKey !== void 0),
     [visibleColumns]
@@ -9612,9 +10710,9 @@ function MatrxDataTableCore({
   const showToolbarCopy = effectiveCopy !== void 0 && effectiveCopy.showToolbar !== false;
   const renderRowActions = (row, controls) => {
     const actions = rowActions?.(row, controls);
-    const scopedActions = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MatrxTableRowControlsScope, { value: controls, children: actions });
+    const scopedActions = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MatrxTableRowControlsScope, { value: controls, children: actions });
     if (!effectiveCopy || !showRowCopy) return scopedActions;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       MatrxTableRowAlchemyProvider,
       {
         copy: tableRowCopyProps(effectiveCopy, row, `${tableCopySourceNamespace}:row:${getRowId(row)}`, copy === void 0 ? declaredVisibleCopyColumns : void 0),
@@ -9711,7 +10809,7 @@ function MatrxDataTableCore({
   const renderedEmptyState = remoteQuery === null && data.length > 0 && hasActiveFilters ? {
     title: "No matching rows",
     description: "No rows match the current search or filters.",
-    action: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { type: "button", variant: "outline", size: "sm", onClick: clearAllFilters, children: "Clear filters" }),
+    action: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { type: "button", variant: "outline", size: "sm", onClick: clearAllFilters, children: "Clear filters" }),
     icon: void 0
   } : emptyState;
   const commitCell = (rowId, field, next) => {
@@ -10083,7 +11181,7 @@ function MatrxDataTableCore({
     const display = renderCell(applyRowEdits(row, rowEdits), col, index);
     const href = col.href?.(row) ?? void 0;
     if (editEnabled && col.editable && (col.editableIf?.(row) ?? true)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         EditableTableCell,
         {
           value: rowEdits && field in rowEdits ? rowEdits[field] : getCellValue(row, col),
@@ -10098,7 +11196,7 @@ function MatrxDataTableCore({
         }
       );
     }
-    return href ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Link, { href, onClick: (event) => event.stopPropagation(), className: "block w-full min-w-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring", children: display }) : display;
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Link, { href, onClick: (event) => event.stopPropagation(), className: "block w-full min-w-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring", children: display }) : display;
   };
   const currentViewSnapshot = (0, import_react20.useMemo)(
     () => ({
@@ -10204,7 +11302,7 @@ function MatrxDataTableCore({
     },
     [columns, commitColumnState, commitColumnWidths, controlledQuery, intelligentSearchEnabled, intelligentSearchScopes, toolbar]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ContextMenuBoundary, { label: tableId ?? "Data table", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ContextMenuBoundary, { label: tableId ?? "Data table", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     import_core3.DndContext,
     {
       id: tableDndContextId,
@@ -10297,7 +11395,7 @@ function MatrxDataTableCore({
         commitColumnState(order, effectiveHiddenColumnIds);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "div",
           {
             ref: rootRef,
@@ -10312,14 +11410,14 @@ function MatrxDataTableCore({
             ),
             children: [
               notice,
-              savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
-              toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
-              !hideToolbar && (viewTabs || toolbar?.title || showSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+              savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
+              toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
+              !hideToolbar && (viewTabs || toolbar?.title || showSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                 TableTitleRow,
                 {
-                  tabs: viewTabs ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applySavedView, related: relatedTableActions }, tableId ?? "table") : void 0,
+                  tabs: viewTabs ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applySavedView, related: relatedTableActions }, tableId ?? "table") : void 0,
                   ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
-                  context: tableId && SavedViews ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  context: tableId && SavedViews ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     SavedViews,
                     {
                       tableId,
@@ -10328,7 +11426,7 @@ function MatrxDataTableCore({
                       onApply: applySavedView
                     }
                   ) }) : void 0,
-                  search: showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  search: showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     TableSearch,
                     {
                       value: searchValue,
@@ -10338,7 +11436,7 @@ function MatrxDataTableCore({
                       scopes: intelligentSearchScopes,
                       ...toolbar?.searchPlaceholder === void 0 ? {} : { placeholder: toolbar.searchPlaceholder }
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                     "div",
                     {
                       "data-matrx-table-search": true,
@@ -10347,9 +11445,9 @@ function MatrxDataTableCore({
                         toolbar?.searchMatch ? "sm:max-w-md" : "sm:max-w-xs"
                       ),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             Input,
                             {
                               value: searchValue,
@@ -10362,22 +11460,22 @@ function MatrxDataTableCore({
                               style: { fontSize: "16px" }
                             }
                           ),
-                          searchValue ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                          searchValue ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                               "button",
                               {
                                 type: "button",
                                 "aria-label": "Clear search",
                                 className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
                                 onClick: () => setSearchValue(""),
-                                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(X, { className: "h-5 w-5" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(X, { className: "h-5 w-5" })
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "Clear search" })
+                            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: "Clear search" })
                           ] }) : null
                         ] }),
-                        toolbar?.searchMatch ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                        toolbar?.searchMatch ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                             Button,
                             {
                               type: "button",
@@ -10390,18 +11488,18 @@ function MatrxDataTableCore({
                                 searchMatchMode === "whole_words" ? "contains" : "whole_words"
                               ),
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(WholeWord, { className: "h-5 w-5" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(WholeWord, { className: "h-5 w-5" }),
                                 searchMatchMode === "whole_words" ? "Whole words" : "Contains"
                               ]
                             }
                           ) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: searchMatchMode === "whole_words" ? "Whole words \u2014 click to match text anywhere" : "Contains text \u2014 click to require whole words" })
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: searchMatchMode === "whole_words" ? "Whole words \u2014 click to match text anywhere" : "Contains text \u2014 click to require whole words" })
                         ] }) : null
                       ]
                     }
                   ) : null,
                   children: [
-                    toolbar?.layeredFilters ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    toolbar?.layeredFilters ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       LayeredFilterBuilder,
                       {
                         fields: toolbar.layeredFilters.fields,
@@ -10411,9 +11509,9 @@ function MatrxDataTableCore({
                         label: toolbar.layeredFilters.label
                       }
                     ) : null,
-                    toolbar?.anyOf ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative w-full max-w-xs", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    toolbar?.anyOf ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative w-full max-w-xs", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         Input,
                         {
                           value: anyOfValue,
@@ -10423,22 +11521,22 @@ function MatrxDataTableCore({
                           style: { fontSize: "16px" }
                         }
                       ),
-                      anyOfValue ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                      anyOfValue ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           "button",
                           {
                             type: "button",
                             "aria-label": "Clear match-any search",
                             className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
                             onClick: () => setAnyOfValue(""),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(X, { className: "h-5 w-5" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(X, { className: "h-5 w-5" })
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "Clear match-any search" })
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: "Clear match-any search" })
                       ] }) : null
                     ] }) : null,
-                    renderedFacets ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ToolbarFacets, { facets: renderedFacets }) : null,
-                    toolbar?.leading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    renderedFacets ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ToolbarFacets, { facets: renderedFacets }) : null,
+                    toolbar?.leading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       "div",
                       {
                         "data-matrx-table-toolbar-extras": true,
@@ -10446,13 +11544,13 @@ function MatrxDataTableCore({
                         children: toolbar.leading
                       }
                     ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                       "div",
                       {
                         "data-matrx-table-actions": true,
                         className: "ml-auto flex min-w-0 flex-wrap items-center gap-0",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             TableToolbarAction,
                             {
                               HostAction: host.ToolbarAction,
@@ -10460,10 +11558,10 @@ function MatrxDataTableCore({
                               tooltip: hasActiveFilters ? "Clear search and filters; keep columns and sort" : "No search or filters to clear",
                               disabled: !hasActiveFilters,
                               onClick: clearAllFilters,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Eraser, {})
+                              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Eraser, {})
                             }
                           ),
-                          showToolbarCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                          showToolbarCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             CopyButtons,
                             {
                               size: "toolbar",
@@ -10506,17 +11604,17 @@ function MatrxDataTableCore({
                               }
                             }
                           ) : null,
-                          columns.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                          columns.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             TableToolbarAction,
                             {
                               HostAction: host.ToolbarAction,
                               ariaLabel: "Columns",
                               tooltip: "Show, hide, or reorder columns",
                               onClick: () => setColumnManagerOpen(true),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SlidersHorizontal, {})
+                              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SlidersHorizontal, {})
                             }
                           ) : null,
-                          toolbar?.refresh ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                          toolbar?.refresh ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             TableToolbarAction,
                             {
                               HostAction: host.ToolbarAction,
@@ -10538,10 +11636,10 @@ function MatrxDataTableCore({
                                   setToolbarActionPending((current) => ({ ...current, refresh: false }));
                                 });
                               },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RefreshControlIcon, { spinning: isFetching || toolbarActionPending.refresh })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RefreshControlIcon, { spinning: isFetching || toolbarActionPending.refresh })
                             }
                           ) : null,
-                          toolbar?.add ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                          toolbar?.add ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             TableToolbarAction,
                             {
                               HostAction: host.ToolbarAction,
@@ -10563,7 +11661,7 @@ function MatrxDataTableCore({
                                   setToolbarActionPending((current) => ({ ...current, add: false }));
                                 });
                               },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Plus, {})
+                              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Plus, {})
                             }
                           ) : null,
                           toolbar?.actions
@@ -10573,15 +11671,15 @@ function MatrxDataTableCore({
                   ]
                 }
               ),
-              selection && selectionCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2 py-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-xs font-medium text-foreground", children: [
-                  (0, import_format3.formatCount)(selectionCount),
+              selection && selectionCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2 py-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-xs font-medium text-foreground", children: [
+                  (0, import_format5.formatCount)(selectionCount),
                   " ",
                   selectionNoun,
                   selectionCount === 1 ? "" : "s",
                   " selected"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                   Button,
                   {
                     type: "button",
@@ -10593,13 +11691,13 @@ function MatrxDataTableCore({
                       selection.onSelectedIdsChange([]);
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(X, { className: "h-3.5 w-3.5" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(X, { className: "h-3.5 w-3.5" }),
                       "Clear"
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
-                  effectiveCopy && selectedRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
+                  effectiveCopy && selectedRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     CopyButtons,
                     {
                       size: "icon",
@@ -10632,9 +11730,9 @@ function MatrxDataTableCore({
                   selection.actions?.(selectedRows, selection.selectedIds)
                 ] })
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { "data-matrx-table-body-region": true, className: "flex min-h-0 flex-1 flex-col gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
-                  mobileCards ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { "data-matrx-table-body-region": true, className: "flex min-h-0 flex-1 flex-col gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
+                  mobileCards ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                     "div",
                     {
                       ref: cardsScrollRef,
@@ -10646,34 +11744,34 @@ function MatrxDataTableCore({
                         mobileCardsClass
                       ),
                       children: [
-                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                           "div",
                           {
                             role: "status",
                             className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
+                              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
                             ]
                           }
                         ) : null,
-                        isLoading ? Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        isLoading ? Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           Skeleton,
                           {
                             className: "h-52 w-full shrink-0 rounded-lg"
                           },
                           `mobile-card-sk-${index}`
-                        )) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex min-h-48 flex-1 items-center justify-center px-4 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex max-w-sm flex-col items-center gap-2", children: [
+                        )) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex min-h-48 flex-1 items-center justify-center px-4 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex max-w-sm flex-col items-center gap-2", children: [
                           renderedEmptyState?.icon,
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
-                          renderedEmptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
+                          renderedEmptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
                           renderedEmptyState?.action
                         ] }) }) : paginated.map((row, index) => {
                           const id = getRowId(row);
                           const displayRow = applyRowEdits(row, edits[id]);
                           const controls = buildRecordControls(displayRow);
                           const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
-                          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { "data-row-id": id, className: "contents", children: mobileCards(displayRow, index, {
+                          return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { "data-row-id": id, className: "contents", children: mobileCards(displayRow, index, {
                             renderCell: (columnKey) => {
                               const column = columns.find((candidate) => columnId(candidate) === columnKey);
                               return column ? renderRecordCell(row, column, index) : null;
@@ -10689,14 +11787,14 @@ function MatrxDataTableCore({
                               else next.delete(id);
                               setSelectedIds(next);
                             },
-                            actions: showInlineRowCopy || rowActions ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                            actions: showInlineRowCopy || rowActions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                               "div",
                               {
                                 "data-matrx-table-row-actions": true,
                                 className: "inline-flex items-center justify-end gap-0",
                                 onClick: (event) => event.stopPropagation(),
                                 children: [
-                                  showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                  showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                     TableRowCopyControl,
                                     {
                                       size: "toolbar",
@@ -10717,7 +11815,7 @@ function MatrxDataTableCore({
                             expandedDetail: expandedDetail && isRowExpanded(row) ? expandedDetail.render(displayRow, controls) : null
                           }) }, id);
                         }),
-                        appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                        appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                           "div",
                           {
                             "data-matrx-table-append-loading-card": true,
@@ -10725,7 +11823,7 @@ function MatrxDataTableCore({
                             "aria-live": "polite",
                             className: "sticky bottom-0 z-20 flex h-16 w-full max-w-[100cqw] shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-card/95 px-3 text-sm font-medium text-foreground shadow-sm backdrop-blur-sm",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                 Loader2,
                                 {
                                   "aria-hidden": "true",
@@ -10739,7 +11837,7 @@ function MatrxDataTableCore({
                       ]
                     }
                   ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                     "div",
                     {
                       ref: scrollRef,
@@ -10753,32 +11851,32 @@ function MatrxDataTableCore({
                         tableClassName
                       ),
                       children: [
-                        hierarchy && draggedRow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        hierarchy && draggedRow ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           HierarchyRootDropTarget,
                           {
                             label: hierarchy.rootDropLabel ?? "Drop here to move to the top level",
                             draggedLabel: hierarchy.itemLabel?.(draggedRow) ?? "Moving row"
                           }
                         ) : null,
-                        hierarchy && draggedRowId ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        hierarchy && draggedRowId ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           HierarchyDragIndicatorLayer,
                           {
                             scrollRef,
                             resolve: resolveHierarchyMove
                           }
                         ) : null,
-                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                           "div",
                           {
                             role: "status",
                             className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
+                              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
                             ]
                           }
                         ) : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                           "table",
                           {
                             ref: tableRef,
@@ -10796,7 +11894,7 @@ function MatrxDataTableCore({
                               fixedLayoutActive && "sm:table-fixed sm:max-w-none sm:w-[var(--matrx-resized-table-width)]"
                             ),
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                 "thead",
                                 {
                                   ref: tableHeaderRef,
@@ -10805,14 +11903,14 @@ function MatrxDataTableCore({
                                     "z-10 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm",
                                     stickyHeader && (documentStickyHeader ? "relative translate-y-[var(--matrx-document-sticky-offset)]" : "sticky top-0")
                                   ),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { children: [
-                                    selection ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("tr", { children: [
+                                    selection ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                       "th",
                                       {
                                         "data-matrx-table-selection-column": true,
                                         className: "h-9 w-9 px-2 text-left align-middle",
                                         style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                           "div",
                                           {
                                             "data-matrx-table-selection-target": true,
@@ -10821,7 +11919,7 @@ function MatrxDataTableCore({
                                                 event.currentTarget.querySelector('[role="checkbox"]')?.click();
                                               }
                                             },
-                                            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                               Checkbox,
                                               {
                                                 className: CHECKBOX_TAP_AREA,
@@ -10847,7 +11945,7 @@ function MatrxDataTableCore({
                                       const compact = col.compact || marker !== void 0;
                                       const width = marker && col.width === void 0 ? 40 : col.width;
                                       const minWidth = marker && col.minWidth === void 0 ? 40 : col.minWidth;
-                                      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                                      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                                         "th",
                                         {
                                           "data-matrx-table-column-id": id,
@@ -10872,12 +11970,17 @@ function MatrxDataTableCore({
                                             (width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
                                             col.headerClassName,
                                             isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
-                                            col.align === "center" && "text-center",
-                                            col.align === "right" && "text-right"
+                                            alignForFormat(col) === "center" && "text-center",
+                                            alignForFormat(col) === "right" && "text-right",
+                                            frozenColumns.offsets[id] !== void 0 && FROZEN_HEADER_CLASS,
+                                            frozenEdgeId === id && FROZEN_EDGE_CLASS
                                           ),
-                                          style: columnWidthVar(width, effectiveColumnWidths[id], id, columnResizable),
+                                          style: {
+                                            ...columnWidthVar(width, effectiveColumnWidths[id], id, columnResizable),
+                                            ...frozenStyle(id)
+                                          },
                                           children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                               ColumnHeaderCell,
                                               {
                                                 label: col.header,
@@ -10916,7 +12019,7 @@ function MatrxDataTableCore({
                                                 reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
                                               }
                                             ) }),
-                                            columnResizable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                            columnResizable ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                               ColumnResizeHandle,
                                               {
                                                 columnId: id,
@@ -10937,22 +12040,22 @@ function MatrxDataTableCore({
                                         id
                                       );
                                     }),
-                                    showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                    showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                       "th",
                                       {
                                         "data-matrx-table-actions-column": true,
                                         className: "h-9 w-px whitespace-nowrap px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
                                         style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-matrx-table-actions-label": true, className: "inline-block whitespace-nowrap", children: "Actions" })
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-matrx-table-actions-label": true, className: "inline-block whitespace-nowrap", children: "Actions" })
                                       }
                                     )
                                   ] })
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tbody", { children: [
-                                isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { className: "border-b border-border/60", children: [
-                                  selection ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "px-2 py-2", style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
-                                  visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("tbody", { children: [
+                                isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("tr", { className: "border-b border-border/60", children: [
+                                  selection ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", { className: "px-2 py-2", style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
+                                  visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                     "td",
                                     {
                                       className: cn(
@@ -10960,20 +12063,20 @@ function MatrxDataTableCore({
                                         col.compact || resolveColumnMarker(col) !== void 0 ? "px-1" : "px-2",
                                         col.mobileHidden && "max-sm:hidden"
                                       ),
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Skeleton, { className: "h-5 w-full" })
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Skeleton, { className: "h-5 w-full" })
                                     },
                                     columnId(col)
                                   )),
-                                  showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "text-right align-middle", style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Skeleton, { className: "ml-auto h-5 w-10" }) })
-                                ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                  showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", { className: "text-right align-middle", style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Skeleton, { className: "ml-auto h-5 w-10" }) })
+                                ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                   "td",
                                   {
                                     colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
                                     className: "px-0 py-12 text-center",
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { "data-matrx-table-empty-state": true, className: "sticky left-0 flex flex-col items-center gap-2 whitespace-normal px-4", style: { width: "100cqw", maxWidth: "100%" }, children: [
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { "data-matrx-table-empty-state": true, className: "sticky left-0 flex flex-col items-center gap-2 whitespace-normal px-4", style: { width: "100cqw", maxWidth: "100%" }, children: [
                                       renderedEmptyState?.icon,
-                                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
-                                      renderedEmptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
+                                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
+                                      renderedEmptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
                                       renderedEmptyState?.action
                                     ] })
                                   }
@@ -10984,7 +12087,7 @@ function MatrxDataTableCore({
                                   const displayRow = applyRowEdits(row, rowEdits);
                                   const controls = buildRecordControls(displayRow);
                                   const isChecked = selectedIdSet.has(id);
-                                  const rowNode = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                                  const rowNode = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                                     "tr",
                                     {
                                       "data-row-id": id,
@@ -11017,16 +12120,28 @@ function MatrxDataTableCore({
                                         highlightedIndex === index && "bg-muted ring-1 ring-inset ring-primary/60",
                                         rowClassName?.(row, index),
                                         draggedRowId === id && "opacity-40",
-                                        zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20"
+                                        zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20",
+                                        // LAST so a colored row STAYS colored while selected
+                                        // and on an odd zebra stripe — `cn` is tailwind-merge
+                                        // and keeps the last background of a group. The
+                                        // checkbox already says the row is selected; the tint
+                                        // is the only thing saying WHY the row matters.
+                                        rowTintClass(row, id)
                                       ),
                                       children: [
-                                        selection ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                        selection ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                           "td",
                                           {
-                                            className: "px-2 py-1.5 align-middle lg:py-0.5",
+                                            className: cn(
+                                              "px-2 py-1.5 align-middle lg:py-0.5",
+                                              // When a data column is frozen the checkbox
+                                              // column has to freeze with it, or the first
+                                              // frozen column slides over the checkboxes.
+                                              frozenColumns.selectionOffset !== null && "sm:sticky sm:left-0 sm:z-20 sm:bg-inherit"
+                                            ),
                                             style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
                                             onClick: (e) => e.stopPropagation(),
-                                            children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                            children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                               "div",
                                               {
                                                 "data-matrx-table-selection-target": true,
@@ -11035,7 +12150,7 @@ function MatrxDataTableCore({
                                                     event.currentTarget.querySelector('[role="checkbox"]')?.click();
                                                   }
                                                 },
-                                                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                                   Checkbox,
                                                   {
                                                     className: CHECKBOX_TAP_AREA,
@@ -11050,7 +12165,7 @@ function MatrxDataTableCore({
                                         ) : null,
                                         visibleColumns.map((col, colIdx) => {
                                           const isColumnDragShadow = columnDragPreview?.draggedId === columnId(col) && columnDragPreview.targetId !== null;
-                                          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                          return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                             "td",
                                             {
                                               "data-matrx-table-column-id": columnId(col),
@@ -11065,23 +12180,33 @@ function MatrxDataTableCore({
                                                 ((resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width) !== void 0 || resizableColumns && col.resizable !== false) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
                                                 col.className,
                                                 isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
-                                                col.align === "center" && "text-center",
-                                                col.align === "right" && "text-right"
-                                              ),
-                                              style: columnWidthVar(
-                                                resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width,
-                                                effectiveColumnWidths[columnId(col)],
-                                                columnId(col),
-                                                resizableColumns && col.resizable !== false
+                                                alignForFormat(col) === "center" && "text-center",
+                                                alignForFormat(col) === "right" && "text-right",
+                                                frozenColumns.offsets[columnId(col)] !== void 0 && FROZEN_CELL_CLASS,
+                                                frozenEdgeId === columnId(col) && FROZEN_EDGE_CLASS,
+                                                // A cell tint paints OVER the row tint beneath
+                                                // it, and the consumer's own hook comes last so
+                                                // it can always win.
+                                                cellTintClass(row, id, columnId(col)),
+                                                cellClassName?.(row, columnId(col), index)
                                               ),
-                                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                                              style: {
+                                                ...columnWidthVar(
+                                                  resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width,
+                                                  effectiveColumnWidths[columnId(col)],
+                                                  columnId(col),
+                                                  resizableColumns && col.resizable !== false
+                                                ),
+                                                ...frozenStyle(columnId(col))
+                                              },
+                                              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                                                 "div",
                                                 {
                                                   className: cn(
                                                     colIdx === 0 && hierarchy && "flex min-w-0 items-center"
                                                   ),
                                                   children: [
-                                                    colIdx === 0 && hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                                    colIdx === 0 && hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                                       HierarchyDragHandle,
                                                       {
                                                         id,
@@ -11089,7 +12214,7 @@ function MatrxDataTableCore({
                                                         disabled: !(hierarchy.canReparent?.(row) ?? true)
                                                       }
                                                     ) : null,
-                                                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                                       "div",
                                                       {
                                                         "data-matrx-cell-content": true,
@@ -11104,20 +12229,20 @@ function MatrxDataTableCore({
                                             columnId(col)
                                           );
                                         }),
-                                        showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                        showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                           "td",
                                           {
                                             "data-matrx-table-row-action-cell": true,
                                             className: "text-right align-middle",
                                             style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
-                                            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                                               "div",
                                               {
                                                 "data-matrx-table-row-actions": true,
                                                 className: "inline-flex items-center justify-end gap-0",
                                                 onClick: (e) => e.stopPropagation(),
                                                 children: [
-                                                  showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                                  showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                                     TableRowCopyControl,
                                                     {
                                                       size: "toolbar",
@@ -11128,8 +12253,8 @@ function MatrxDataTableCore({
                                                     }
                                                   ) : null,
                                                   renderRowActions(displayRow, controls),
-                                                  windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-                                                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                                  windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                                                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                                       Button,
                                                       {
                                                         type: "button",
@@ -11143,10 +12268,10 @@ function MatrxDataTableCore({
                                                           if (windowConfig?.openOnRowClick === true) openDetail(row);
                                                           else openWindow(row);
                                                         },
-                                                        children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRight, { className: "h-5 w-5" })
+                                                        children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PanelRight, { className: "h-5 w-5" })
                                                       }
                                                     ) }),
-                                                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window" })
+                                                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window" })
                                                   ] }) : null
                                                 ]
                                               }
@@ -11158,12 +12283,12 @@ function MatrxDataTableCore({
                                     id
                                   );
                                   const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
-                                  const inlineDetail = expandedDetail && isRowExpanded(row) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                  const inlineDetail = expandedDetail && isRowExpanded(row) ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                     "tr",
                                     {
                                       "data-matrx-table-expanded-detail": id,
                                       className: cn("bg-muted/20", expandedDetail.className),
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                         "td",
                                         {
                                           colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
@@ -11174,8 +12299,8 @@ function MatrxDataTableCore({
                                     },
                                     `${id}:expanded-detail`
                                   ) : null;
-                                  return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react20.Fragment, { children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                  return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react20.Fragment, { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                       HierarchyDroppableRow,
                                       {
                                         id,
@@ -11184,24 +12309,24 @@ function MatrxDataTableCore({
                                       }
                                     ),
                                     inlineDetail
-                                  ] }, id) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react20.Fragment, { children: [
+                                  ] }, id) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react20.Fragment, { children: [
                                     wrappedRow,
                                     inlineDetail
                                   ] }, id);
                                 }),
-                                appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                   "td",
                                   {
                                     colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
                                     className: "sticky bottom-0 z-20 h-16 border-y border-border bg-card/95 px-0 py-0 text-left shadow-sm backdrop-blur-sm",
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                                       "div",
                                       {
                                         role: "status",
                                         "aria-live": "polite",
                                         className: "sticky left-0 flex h-16 w-fit max-w-[100cqw] items-center justify-center gap-2 px-3 text-sm font-medium text-foreground",
                                         children: [
-                                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                             Loader2,
                                             {
                                               "aria-hidden": "true",
@@ -11215,9 +12340,9 @@ function MatrxDataTableCore({
                                   }
                                 ) }) : null
                               ] }),
-                              footerRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { children: [
-                                selection ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "px-2 py-2" }) : null,
-                                visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                              footerRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("tr", { children: [
+                                selection ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", { className: "px-2 py-2" }) : null,
+                                visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                   "td",
                                   {
                                     className: cn(
@@ -11237,7 +12362,7 @@ function MatrxDataTableCore({
                                   },
                                   columnId(column)
                                 )),
-                                showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", {}) : null
+                                showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", {}) : null
                               ] }, `footer-${index}`)) }) : null
                             ]
                           }
@@ -11245,8 +12370,8 @@ function MatrxDataTableCore({
                       ]
                     }
                   ),
-                  scrollHintLeft ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  scrollHintLeft ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       Button,
                       {
                         type: "button",
@@ -11257,13 +12382,13 @@ function MatrxDataTableCore({
                         "data-matrx-table-scroll-control": "left",
                         className: "absolute left-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
                         onClick: () => scrollTableHorizontally("left"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronLeft, { className: "h-5 w-5" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronLeft, { className: "h-5 w-5" })
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "More columns to the left" })
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: "More columns to the left" })
                   ] }) : null,
-                  scrollHintRight ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  scrollHintRight ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       Button,
                       {
                         type: "button",
@@ -11274,26 +12399,26 @@ function MatrxDataTableCore({
                         "data-matrx-table-scroll-control": "right",
                         className: "absolute right-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
                         onClick: () => scrollTableHorizontally("right"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronRight, { className: "h-5 w-5" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronRight, { className: "h-5 w-5" })
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "More columns to the right" })
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: "More columns to the right" })
                   ] }) : null
                 ] }),
-                appendQuery ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                appendQuery ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                   "div",
                   {
                     "data-matrx-table-footer": true,
                     className: "flex min-h-8 shrink-0 flex-wrap items-center gap-2 border-t border-border",
                     "aria-busy": isLoading || isFetching,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                         "div",
                         {
                           ...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
                           className: "flex w-full min-w-0 items-center gap-2 text-xs text-muted-foreground sm:w-auto sm:flex-1",
                           children: [
-                            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                               Loader2,
                               {
                                 "data-matrx-table-append-loader": true,
@@ -11301,21 +12426,21 @@ function MatrxDataTableCore({
                                 className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
                               }
                             ) : null,
-                            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "min-w-0 break-words font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : appendQuery.pagination.sourceRecords ? `${(0, import_format3.formatCount)(processed.length)} ${appendQuery.pagination.sourceRecords.rowLabel}${appendQuery.pagination.sourceRecords.matchedRecords === void 0 ? "" : ` (${(0, import_format3.formatCount)(appendQuery.pagination.sourceRecords.matchedRecords)} matching ${appendQuery.pagination.sourceRecords.label})`} \xB7 ${(0, import_format3.formatCount)(appendQuery.pagination.sourceRecords.loaded)}${appendQuery.pagination.sourceRecords.total === void 0 ? "" : ` / ${(0, import_format3.formatCount)(appendQuery.pagination.sourceRecords.total)}`} ${appendQuery.pagination.sourceRecords.label} loaded` : `${(0, import_format3.formatCount)(data.length)} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${(0, import_format3.formatCount)(appendQuery.pagination.totalItems)}`}` }),
-                              appendQuery.pagination.sourceUntil || appendUsesLocalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", "aria-label": "Source coverage", className: "shrink-0 text-xs text-muted-foreground underline decoration-dotted underline-offset-4", children: "Source info" }) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(TooltipContent, { children: [
-                                  appendQuery.pagination.sourceUntil ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "min-w-0 break-words font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : appendQuery.pagination.sourceRecords ? `${(0, import_format5.formatCount)(processed.length)} ${appendQuery.pagination.sourceRecords.rowLabel}${appendQuery.pagination.sourceRecords.matchedRecords === void 0 ? "" : ` (${(0, import_format5.formatCount)(appendQuery.pagination.sourceRecords.matchedRecords)} matching ${appendQuery.pagination.sourceRecords.label})`} \xB7 ${(0, import_format5.formatCount)(appendQuery.pagination.sourceRecords.loaded)}${appendQuery.pagination.sourceRecords.total === void 0 ? "" : ` / ${(0, import_format5.formatCount)(appendQuery.pagination.sourceRecords.total)}`} ${appendQuery.pagination.sourceRecords.label} loaded` : `${(0, import_format5.formatCount)(data.length)} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${(0, import_format5.formatCount)(appendQuery.pagination.totalItems)}`}` }),
+                              appendQuery.pagination.sourceUntil || appendUsesLocalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", "aria-label": "Source coverage", className: "shrink-0 text-xs text-muted-foreground underline decoration-dotted underline-offset-4", children: "Source info" }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(TooltipContent, { children: [
+                                  appendQuery.pagination.sourceUntil ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("p", { children: [
                                     "Source fixed through ",
                                     new Date(appendQuery.pagination.sourceUntil).toLocaleString(),
                                     "."
                                   ] }) : null,
-                                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? "All source rows are loaded." : appendUsesLocalProcessing ? "Local search and filters cover loaded rows." : "Source paging is active." })
+                                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { children: !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? "All source rows are loaded." : appendUsesLocalProcessing ? "Local search and filters cover loaded rows." : "Source paging is active." })
                                 ] })
                               ] }) : null,
-                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null,
-                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { role: "status", children: [
+                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null,
+                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("p", { role: "status", children: [
                                 appendScrollPolicy.reason,
                                 " Load more remains available."
                               ] }) : null
@@ -11323,26 +12448,26 @@ function MatrxDataTableCore({
                           ]
                         }
                       ),
-                      appendQuery.pagination.sourcePageSize ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                      appendQuery.pagination.sourcePageSize ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                         Select,
                         {
                           value: String(appendQuery.pagination.sourcePageSize.value),
                           onValueChange: (value) => appendQuery.pagination.sourcePageSize?.onChange(Number(value)),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                               SelectTrigger,
                               {
                                 "aria-label": "Rows per load",
                                 className: "h-8 min-w-20 shrink-0 rounded-md border border-border bg-card px-3 text-sm [&_svg]:size-5",
                                 disabled: isLoading || isFetching || appendQuery.pagination.loadAll?.isLoading,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectValue, {})
+                                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectValue, {})
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectContent, { children: appendQuery.pagination.sourcePageSize.options.map((size) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectItem, { value: String(size), children: size }, size)) })
+                            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectContent, { children: appendQuery.pagination.sourcePageSize.options.map((size) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectItem, { value: String(size), children: size }, size)) })
                           ]
                         }
                       ) : null,
-                      appendQuery.pagination.loadAll?.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                      appendQuery.pagination.loadAll?.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         Button,
                         {
                           type: "button",
@@ -11351,7 +12476,7 @@ function MatrxDataTableCore({
                           onClick: appendQuery.pagination.loadAll.stop,
                           children: "Stop loading"
                         }
-                      ) : scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                      ) : scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         Button,
                         {
                           type: "button",
@@ -11360,8 +12485,8 @@ function MatrxDataTableCore({
                           onClick: appendQuery.pagination.retrySource ?? (appendQuery.pagination.hasNextPage ? appendQuery.pagination.loadNextPage : appendQuery.pagination.refresh),
                           children: appendQuery.pagination.retrySource ? "Retry source" : appendQuery.pagination.hasNextPage ? "Retry" : "Reload rows"
                         }
-                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex min-w-0 max-w-full flex-wrap gap-0", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex min-w-0 max-w-full flex-wrap gap-0", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           Button,
                           {
                             type: "button",
@@ -11372,7 +12497,7 @@ function MatrxDataTableCore({
                             children: "Load more"
                           }
                         ),
-                        appendQuery.pagination.loadAll ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        appendQuery.pagination.loadAll ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           Button,
                           {
                             type: "button",
@@ -11383,14 +12508,14 @@ function MatrxDataTableCore({
                             children: "Load all"
                           }
                         ) : null
-                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "min-w-0 max-w-full break-words whitespace-normal px-3 text-xs text-muted-foreground sm:text-sm", children: "All rows loaded" }) : null
+                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "min-w-0 max-w-full break-words whitespace-normal px-3 text-xs text-muted-foreground sm:text-sm", children: "All rows loaded" }) : null
                     ]
                   }
-                ) : !hidePagination && (totalItems > 0 || sourceTotal !== void 0) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                ) : !hidePagination && (totalItems > 0 || sourceTotal !== void 0) ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   GenericTablePagination,
                   {
                     totalItems,
-                    ...sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${(0, import_format3.formatCount)(start)}\u2013${(0, import_format3.formatCount)(end)} of ${(0, import_format3.formatCount)(total)} matching \xB7 ${(0, import_format3.formatCount)(data.length)} / ${(0, import_format3.formatCount)(sourceTotal)} loaded` },
+                    ...sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${(0, import_format5.formatCount)(start)}\u2013${(0, import_format5.formatCount)(end)} of ${(0, import_format5.formatCount)(total)} matching \xB7 ${(0, import_format5.formatCount)(data.length)} / ${(0, import_format5.formatCount)(sourceTotal)} loaded` },
                     ...localProgressiveEnabled ? { progressive: {
                       shownCount: progressiveRows.shownCount,
                       loadedCount: data.length,
@@ -11413,7 +12538,7 @@ function MatrxDataTableCore({
                   }
                 ) }) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 ColumnManager,
                 {
                   open: columnManagerOpen,
@@ -11424,7 +12549,7 @@ function MatrxDataTableCore({
                   onApply: commitColumnState
                 }
               ),
-              detailEnabled && selectedRow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              detailEnabled && selectedRow ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 SidePanelSurface,
                 {
                   title: resolveStringTitle(
@@ -11435,8 +12560,8 @@ function MatrxDataTableCore({
                   description: detail?.description?.(selectedRow),
                   onClose: () => setSelectedId(null),
                   defaultWidth: detail?.defaultWidth ?? 480,
-                  headerActions: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-1", children: [
-                    effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  headerActions: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       TableRowCopyControl,
                       {
                         size: "icon",
@@ -11448,8 +12573,8 @@ function MatrxDataTableCore({
                       }
                     ) : null,
                     detail?.headerActions?.(selectedRow),
-                    windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         Button,
                         {
                           type: "button",
@@ -11459,10 +12584,10 @@ function MatrxDataTableCore({
                           className: "h-7 w-7",
                           "aria-label": "Open in window",
                           onClick: () => openWindow(selectedRow),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRight, { className: "h-5 w-5" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PanelRight, { className: "h-5 w-5" })
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "Open in window" })
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: "Open in window" })
                     ] }) : null
                   ] }),
                   children: detail?.render ? (
@@ -11473,7 +12598,7 @@ function MatrxDataTableCore({
                     // fixes the whole class at once — a custom body that already
                     // scrolls (`h-full` + `overflow-y-auto` root) still resolves to
                     // this container's height, so no second scrollbar appears.
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-full min-h-0 overflow-y-auto", children: detail.render(selectedRow, {
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-full min-h-0 overflow-y-auto", children: detail.render(selectedRow, {
                       closeDetail: () => setSelectedId(null),
                       openDetail: () => openDetail(selectedRow),
                       openWindow: () => openWindow(selectedRow),
@@ -11481,7 +12606,7 @@ function MatrxDataTableCore({
                       hasPendingEdits: Boolean(edits[getRowId(selectedRow)]),
                       discardPendingEdits: () => discardRowEdits(getRowId(selectedRow))
                     }) })
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     DataRowInspector,
                     {
                       row: selectedRow,
@@ -11493,7 +12618,7 @@ function MatrxDataTableCore({
                   )
                 }
               ) : null,
-              windowRow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              windowRow ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 DataRowWindow,
                 {
                   isOpen: true,
@@ -11504,9 +12629,9 @@ function MatrxDataTableCore({
                   height: windowConfig?.height,
                   windowId: `matrx-data-row-${urlState?.id ?? "local"}-${getRowId(windowRow)}`,
                   defaultTab: windowConfig?.defaultTab,
-                  headerActions: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-1", children: [
-                    windowConfig?.openOnRowClick === true && detail?.enabled === true ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  headerActions: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    windowConfig?.openOnRowClick === true && detail?.enabled === true ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         Button,
                         {
                           type: "button",
@@ -11519,12 +12644,12 @@ function MatrxDataTableCore({
                             closeWindow();
                             openDetail(windowRow);
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRightOpen, { className: "h-5 w-5" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PanelRightOpen, { className: "h-5 w-5" })
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: "Open in side panel" })
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: "Open in side panel" })
                     ] }) : null,
-                    effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       TableRowCopyControl,
                       {
                         size: "icon",
@@ -11543,7 +12668,7 @@ function MatrxDataTableCore({
                     closeWindow,
                     hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
                     discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
-                  }) ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  }) ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     DataRowInspector,
                     {
                       row: windowRow,
@@ -11579,15 +12704,15 @@ function MatrxDataTableCore({
                   })
                 }
               ) : null,
-              editEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-                foreignDrafts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+              editEnabled ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+                foreignDrafts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                   "div",
                   {
                     "data-matrx-foreign-drafts": true,
                     className: "fixed inset-x-3 bottom-20 z-50 flex flex-wrap items-center justify-center gap-2 rounded-lg border border-amber-500/40 bg-card px-3 py-2 text-xs shadow-lg sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 sm:flex-nowrap",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Unsaved edits from previous results" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: "Unsaved edits from previous results" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         CopyButtons,
                         {
                           size: "xs",
@@ -11596,11 +12721,11 @@ function MatrxDataTableCore({
                           json: () => foreignDraftPayload
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 text-xs text-destructive", onClick: () => setConfirmForeignDraftDiscard(true), children: "Discard drafts" })
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 text-xs text-destructive", onClick: () => setConfirmForeignDraftDiscard(true), children: "Discard drafts" })
                     ]
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   ConfirmDialog,
                   {
                     open: confirmForeignDraftDiscard,
@@ -11620,7 +12745,7 @@ function MatrxDataTableCore({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   DirtySavePill,
                   {
                     changeCount,
@@ -11633,11 +12758,11 @@ function MatrxDataTableCore({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core3.DragOverlay, { children: draggedRow ? (
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core3.DragOverlay, { children: draggedRow ? (
           // w-max: the overlay inherits the ACTIVE node's size, and the active
           // node is the 16px grip handle — without it the label wraps to one
           // character per line.
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-max max-w-xs truncate rounded border border-border bg-card px-2.5 py-1.5 text-sm font-medium text-foreground shadow-md", children: hierarchy?.itemLabel?.(draggedRow) ?? "Moving row" })
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-max max-w-xs truncate rounded border border-border bg-card px-2.5 py-1.5 text-sm font-medium text-foreground shadow-md", children: hierarchy?.itemLabel?.(draggedRow) ?? "Moving row" })
         ) : null })
       ]
     }
@@ -11652,7 +12777,7 @@ function HierarchyDragHandle({
     id,
     disabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "button",
     {
       ref: setNodeRef,
@@ -11664,7 +12789,7 @@ function HierarchyDragHandle({
       onClick: (event) => event.stopPropagation(),
       ...attributes,
       ...listeners,
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
     }
   );
 }
@@ -11673,7 +12798,7 @@ function HierarchyRootDropTarget({
   draggedLabel
 }) {
   const { isOver, setNodeRef } = (0, import_core3.useDroppable)({ id: "__root__" });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       ref: setNodeRef,
@@ -11683,8 +12808,8 @@ function HierarchyRootDropTarget({
         isOver && "border-solid bg-primary/20 shadow-md shadow-primary/25"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "truncate", children: draggedLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-primary/75", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate", children: draggedLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-primary/75", children: label })
       ]
     }
   );
@@ -11733,7 +12858,7 @@ function HierarchyDragIndicatorLayer({
   const { preview: preview2 } = indicator;
   const indent = indicator.left + 10 + preview2.depth * 12;
   if (preview2.position === "inside") {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "div",
       {
         "aria-hidden": "true",
@@ -11745,7 +12870,7 @@ function HierarchyDragIndicatorLayer({
           width: Math.max(0, indicator.width - 4),
           height: indicator.height
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "span",
           {
             className: "absolute top-1/2 -translate-y-1/2 whitespace-nowrap rounded bg-card/95 px-1.5 py-0.5 text-[10px] font-medium text-primary",
@@ -11760,7 +12885,7 @@ function HierarchyDragIndicatorLayer({
     );
   }
   const lineTop = preview2.position === "before" ? indicator.top - 1 : indicator.top + indicator.height - 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     {
       "aria-hidden": "true",
@@ -11771,9 +12896,9 @@ function HierarchyDragIndicatorLayer({
         left: indent,
         width: Math.max(0, indicator.left + indicator.width - indent - 8)
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative h-0.5 rounded-full bg-primary", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border-2 border-primary bg-card" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative h-0.5 rounded-full bg-primary", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border-2 border-primary bg-card" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "span",
           {
             className: cn(
@@ -11814,7 +12939,7 @@ function ColumnHeaderDropZone({
     disabled: !enabled,
     data: { matrxDragKind: "column-header", columnId: id }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
 }
 function fixedUtilityWidth(width) {
   return width === void 0 ? void 0 : { width: `${width}px`, minWidth: `${width}px`, maxWidth: `${width}px` };
@@ -11848,9 +12973,9 @@ function DefaultJsonCell({ value }) {
   const Viewer = host.JsonViewer;
   const text = JSON.stringify(value, null, 2);
   const summary = Array.isArray(value) ? `${value.length} items` : Object.keys(value).slice(0, 3).join(", ") || "Empty object";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { type: "button", className: "block max-w-full truncate text-left text-sm text-foreground", onClick: (event) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("button", { type: "button", className: "block max-w-full truncate text-left text-sm text-foreground", onClick: (event) => {
         event.stopPropagation();
         setOpen(true);
       }, style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", whiteSpace: "normal", overflowWrap: "anywhere" }, "aria-label": "Open JSON value", children: [
@@ -11858,9 +12983,9 @@ function DefaultJsonCell({ value }) {
         " ",
         summary
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { className: "max-w-md max-h-80 overflow-auto whitespace-pre-wrap break-words", children: text })
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { className: "max-w-md max-h-80 overflow-auto whitespace-pre-wrap break-words", children: text })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DataRowWindow, { isOpen: open, onClose: () => setOpen(false), title: "JSON value", row: value, viewContent: Viewer ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Viewer, { data: value }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("pre", { className: "overflow-auto whitespace-pre-wrap p-3 text-xs", children: text }) })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DataRowWindow, { isOpen: open, onClose: () => setOpen(false), title: "JSON value", row: value, viewContent: Viewer ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Viewer, { data: value }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("pre", { className: "overflow-auto whitespace-pre-wrap p-3 text-xs", children: text }) })
   ] });
 }
 function DefaultMarkerCell({
@@ -11869,8 +12994,8 @@ function DefaultMarkerCell({
 }) {
   const label = marker === "favorite" ? value ? "Favorite" : "Not favorite" : value ? "Pinned" : "Not pinned";
   const Icon3 = marker === "favorite" ? Star : Pin;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "span",
       {
         role: "img",
@@ -11879,21 +13004,23 @@ function DefaultMarkerCell({
           "inline-flex size-5 items-center justify-center",
           value ? "text-amber-500" : "text-muted-foreground/45"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon3, { className: "size-4", ...value ? { fill: "currentColor" } : {} })
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon3, { className: "size-4", ...value ? { fill: "currentColor" } : {} })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { children: label })
   ] });
 }
 function renderCell(row, col, index) {
   if (col.cell) return col.cell(row, index);
   const raw = getCellValue(row, col);
+  const formattedByDeclaration = formatColumnValue(col, raw);
+  if (formattedByDeclaration) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FormattedCell, { result: formattedByDeclaration });
   const kind = col.cellKind ?? "auto";
   const asUuid = kind === "uuid" || kind === "fk" || kind === "auto" && isUuidValue(raw);
   if (asUuid && typeof raw === "string") {
     const forbidden = typeof col.fk?.forbidden === "function" ? col.fk.forbidden(raw, row) : Boolean(col.fk?.forbidden);
     const declaredToken = typeof col.fk?.token === "function" ? col.fk.token(row) : col.fk?.token;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       MatrxUuidCell,
       {
         value: raw,
@@ -11905,16 +13032,16 @@ function renderCell(row, col, index) {
       }
     );
   }
-  if (raw !== null && typeof raw === "object" && !(raw instanceof Date)) return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DefaultJsonCell, { value: raw });
+  if (raw !== null && typeof raw === "object" && !(raw instanceof Date)) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DefaultJsonCell, { value: raw });
   if (typeof raw === "boolean") {
     const marker = resolveColumnMarker(col);
-    if (marker) return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DefaultMarkerCell, { marker, value: raw });
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: raw ? "rounded bg-emerald-500/10 px-1.5 py-0.5 text-xs text-emerald-600" : "rounded bg-slate-500/10 px-1.5 py-0.5 text-xs text-muted-foreground", children: raw ? "Yes" : "No" });
+    if (marker) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DefaultMarkerCell, { marker, value: raw });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: raw ? "rounded bg-emerald-500/10 px-1.5 py-0.5 text-xs text-emerald-600" : "rounded bg-slate-500/10 px-1.5 py-0.5 text-xs text-muted-foreground", children: raw ? "Yes" : "No" });
   }
   const formatted = formatTableDisplayValue(raw);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "block text-sm text-foreground", style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", overflowWrap: "anywhere" }, children: formatted }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { className: "max-w-md whitespace-pre-wrap break-words max-h-80 overflow-auto", children: typeof raw === "object" && raw !== null ? JSON.stringify(raw, null, 2) : formatted })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "block text-sm text-foreground", style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", overflowWrap: "anywhere" }, children: formatted }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { className: "max-w-md whitespace-pre-wrap break-words max-h-80 overflow-auto", children: typeof raw === "object" && raw !== null ? JSON.stringify(raw, null, 2) : formatted })
   ] });
 }
 function resolveStringTitle(title, fallback) {
@@ -11929,14 +13056,14 @@ var import_react21 = require("react");
 // src/dropdown-menu.tsx
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var React17 = __toESM(require("react"), 1);
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
 var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -11949,12 +13076,12 @@ var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -11966,7 +13093,7 @@ var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) =
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     DropdownMenuPrimitive.Content,
     {
       ref,
@@ -11983,7 +13110,7 @@ var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, conta
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var DropdownMenuItem = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -11993,7 +13120,7 @@ var DropdownMenuItem = React17.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -12001,13 +13128,13 @@ var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...pro
     className: cn(MENU_INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -12015,13 +13142,13 @@ var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props
     className: cn(MENU_INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -12031,7 +13158,7 @@ var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var DropdownMenuSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -12044,7 +13171,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   "span",
   {
     "data-slot": "dropdown-menu-shortcut",
@@ -12055,7 +13182,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/data-table/SavedViewsControl.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function SavedViewsControl({
   views,
   activeId = null,
@@ -12113,10 +13240,10 @@ function SavedViewsControl({
     }
   };
   const activeName = activeId ? views.find((view) => view.id === activeId)?.name : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-1", "data-matrx-table-saved-views": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DropdownMenu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-1", "data-matrx-table-saved-views": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           Button,
           {
             type: "button",
@@ -12127,38 +13254,38 @@ function SavedViewsControl({
             "aria-describedby": dirty ? unsavedChangesId : void 0,
             disabled: saving,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 flex-1 truncate", children: loading ? "Loading views\u2026" : activeName ?? "Default view" }),
-              dirty ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-amber-500" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChevronDown, { className: "size-3.5 shrink-0" })
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "min-w-0 flex-1 truncate", children: loading ? "Loading views\u2026" : activeName ?? "Default view" }),
+              dirty ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-amber-500" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronDown, { className: "size-3.5 shrink-0" })
             ]
           }
         ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipContent, { children: "Choose or save a table view" })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipContent, { children: "Choose or save a table view" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DropdownMenuContent, { align: "end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuLabel, { children: "Views" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DropdownMenuRadioGroup, { value: activeId ?? "__default__", onValueChange: (value) => onSelect(value === "__default__" ? null : value), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuRadioItem, { value: "__default__", children: "Default view" }),
-          views.map((view) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuRadioItem, { value: view.id, children: view.name }, view.id))
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuLabel, { children: "Views" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DropdownMenuRadioGroup, { value: activeId ?? "__default__", onValueChange: (value) => onSelect(value === "__default__" ? null : value), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuRadioItem, { value: "__default__", children: "Default view" }),
+          views.map((view) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuRadioItem, { value: view.id, children: view.name }, view.id))
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuItem, { disabled: saving, onSelect: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuItem, { disabled: saving, onSelect: () => {
           setActionError(null);
           setSaveOpen(true);
         }, children: "Save current view\u2026" }),
-        activeId && onUpdate ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuItem, { disabled: saving, onSelect: () => void update(), children: "Update current view" }) : null,
-        onReload ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuItem, { disabled: saving || loading, onSelect: () => void reload(), children: "Reload views" }) : null
+        activeId && onUpdate ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuItem, { disabled: saving, onSelect: () => void update(), children: "Update current view" }) : null,
+        onReload ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuItem, { disabled: saving || loading, onSelect: () => void reload(), children: "Reload views" }) : null
       ] })
     ] }),
-    dirty ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { id: unsavedChangesId, className: "sr-only", children: "This table view has unsaved changes. Open the view menu to save or update it." }) : null,
-    visibleError ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { role: "alert", className: "basis-full break-words text-xs text-destructive", children: visibleError }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Dialog, { open: saveOpen, onOpenChange: setSaveOpen, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DialogContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogTitle, { children: "Save current view" }) }),
-      visibleError ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: visibleError }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Input, { "aria-label": "View name", value: name, onChange: (event) => setName(event.target.value), placeholder: "View name", autoFocus: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DialogFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { type: "button", variant: "outline", onClick: () => setSaveOpen(false), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { type: "button", disabled: !name.trim() || saving, onClick: () => void save(), children: saving ? "Saving\u2026" : "Save view" })
+    dirty ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { id: unsavedChangesId, className: "sr-only", children: "This table view has unsaved changes. Open the view menu to save or update it." }) : null,
+    visibleError ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { role: "alert", className: "basis-full break-words text-xs text-destructive", children: visibleError }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Dialog, { open: saveOpen, onOpenChange: setSaveOpen, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DialogContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DialogTitle, { children: "Save current view" }) }),
+      visibleError ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: visibleError }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Input, { "aria-label": "View name", value: name, onChange: (event) => setName(event.target.value), placeholder: "View name", autoFocus: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DialogFooter, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { type: "button", variant: "outline", onClick: () => setSaveOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { type: "button", disabled: !name.trim() || saving, onClick: () => void save(), children: saving ? "Saving\u2026" : "Save view" })
       ] })
     ] }) })
   ] });