@arbidocs/blocks 0.5.37 → 0.5.38

package/dist/chunk-PTYERKEU.js

@@ -0,0 +1,2132 @@
+"use client";
+import { DetailPanel, DetailSection, DetailFields, DetailField, DetailLinkList, DetailLinkItem, DetailEmpty } from './chunk-ZCOVDK2E.js';
+import { GridView } from './chunk-7F5Z4K5W.js';
+import { testIdOr } from './chunk-7F6CBP3Z.js';
+import { Sigma, Search, ArrowUpRight, FileText, UserRound, ChevronDown, CheckSquare, CalendarDays, Hash, Type, X, Loader2, Check, Maximize2, Plus, Trash2, Rows3, ArrowLeft, FileSpreadsheet, Eye, MoreHorizontal, Upload, Download, Table2, Lock } from 'lucide-react';
+import { cn, Button, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DialogFooter, Textarea, Checkbox, Switch, Popover, PopoverTrigger, PopoverContent } from '@arbidocs/react/ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useMemo } from 'react';
+
+// src/databases/column-types.ts
+var DATABASE_COLUMN_TYPES = [
+  "text",
+  "number",
+  "date",
+  "checkbox",
+  "select",
+  "person",
+  "document",
+  "relation",
+  "lookup",
+  "rollup"
+];
+var COMPUTED_COLUMN_TYPES = /* @__PURE__ */ new Set([
+  "lookup",
+  "rollup"
+]);
+var LINK_COLUMN_TYPES = /* @__PURE__ */ new Set([
+  "document",
+  "relation"
+]);
+var isComputedColumn = (column) => COMPUTED_COLUMN_TYPES.has(column.type);
+var DATABASE_ROLLUP_OPS = ["count", "sum", "avg", "min", "max"];
+var DEFAULT_DATABASE_COLUMN_TYPE_LABELS = {
+  text: "Text",
+  number: "Number",
+  date: "Date",
+  checkbox: "Checkbox",
+  select: "Select",
+  person: "Person",
+  document: "Documents",
+  relation: "Relation",
+  lookup: "Lookup",
+  rollup: "Rollup"
+};
+var OPTION_TONES = [
+  "bg-blue-bg text-blue-text",
+  "bg-green-bg text-green-text",
+  "bg-yellow-bg text-yellow-text",
+  "bg-purple-bg text-purple-text",
+  "bg-red-bg text-red-text",
+  "bg-gray-bg text-gray-text"
+];
+function optionTone(option) {
+  let hash = 0;
+  for (const ch of option.toLowerCase()) hash = hash * 31 + ch.charCodeAt(0) >>> 0;
+  return OPTION_TONES[hash % OPTION_TONES.length];
+}
+var isEmpty = (value) => value === null || value === void 0 || typeof value === "string" && value.trim() === "" || Array.isArray(value) && value.length === 0;
+function cellList(value) {
+  if (isEmpty(value)) return [];
+  return Array.isArray(value) ? value.filter((v) => !isEmpty(v)) : [value];
+}
+function cellIds(value) {
+  return cellList(value).filter((v) => typeof v === "string");
+}
+function titleOf(id, titles) {
+  return titles?.[id] ?? id;
+}
+function sameCellValue(a, b) {
+  if (Array.isArray(a) || Array.isArray(b)) {
+    const la = cellList(a);
+    const lb = cellList(b);
+    return la.length === lb.length && la.every((v, i) => v === lb[i]);
+  }
+  return (a ?? null) === (b ?? null);
+}
+function formatDateValue(value, locale) {
+  const day = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (day) {
+    const [, y, m, d] = day;
+    return new Date(Date.UTC(+y, +m - 1, +d)).toLocaleDateString(locale, { timeZone: "UTC" });
+  }
+  const at = new Date(value);
+  return Number.isNaN(at.getTime()) ? value : at.toLocaleString(locale);
+}
+function formatNumberValue(value, locale) {
+  return value.toLocaleString(locale, { maximumFractionDigits: 6 });
+}
+var ISO_DATE = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?$/;
+function formatLookupValue(value, titles, locale) {
+  if (isEmpty(value)) return "";
+  if (typeof value === "number") return formatNumberValue(value, locale);
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "string") {
+    if (titles?.[value] !== void 0) return titles[value];
+    if (ISO_DATE.test(value)) return formatDateValue(value, locale);
+  }
+  return String(value);
+}
+var NAMED_TYPES = /* @__PURE__ */ new Set([
+  "person",
+  "document",
+  "relation"
+]);
+function formatCell(value, type, locale, titles) {
+  if (isEmpty(value)) return "";
+  if ((type === "number" || type === "rollup") && typeof value === "number")
+    return formatNumberValue(value, locale);
+  if (type === "date" && typeof value === "string") return formatDateValue(value, locale);
+  if (type === "checkbox") return value ? "Yes" : "No";
+  if (NAMED_TYPES.has(type))
+    return cellIds(value).map((id) => titleOf(id, titles)).join(", ");
+  if (type === "lookup")
+    return cellList(value).map((v) => formatLookupValue(v, titles, locale)).join(", ");
+  return String(value);
+}
+function toApiValue(value, type) {
+  if (isEmpty(value)) return null;
+  if (LINK_COLUMN_TYPES.has(type)) return cellIds(value);
+  if (type === "checkbox") return Boolean(value);
+  if (type === "date" && value instanceof Date) {
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+  }
+  if (type === "number" && typeof value === "string") {
+    const n = Number(value.replace(/,/g, ""));
+    return Number.isFinite(n) ? n : value;
+  }
+  return value;
+}
+function compareCells(a, b, type, titlesA, titlesB) {
+  const ea = isEmpty(a);
+  const eb = isEmpty(b);
+  if (ea || eb) return ea === eb ? 0 : ea ? 1 : -1;
+  if (type === "number" || type === "checkbox" || type === "rollup") return Number(a) - Number(b);
+  const shown = NAMED_TYPES.has(type) || type === "lookup";
+  const ta = shown ? formatCell(a, type, void 0, titlesA) : String(a);
+  const tb = shown ? formatCell(b, type, void 0, titlesB) : String(b);
+  return ta.localeCompare(tb, void 0, { sensitivity: "base", numeric: true });
+}
+function rowTitle(row, columns, locale) {
+  const first = columns[0];
+  return first ? formatCell(row.values[first.id], first.type, locale, row.titles) : "";
+}
+var CHIP = "inline-flex h-[22px] min-w-0 max-w-[14rem] shrink-0 items-center gap-1 rounded-md border border-border bg-muted/50 px-1.5 text-xs text-foreground";
+function initials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  const letters = parts.length > 1 ? parts[0][0] + parts[parts.length - 1][0] : name.slice(0, 2);
+  return letters.toUpperCase();
+}
+function PersonChip({ name }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-sm", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground",
+        children: initials(name)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: name })
+  ] });
+}
+function LinkChip({
+  label,
+  kind,
+  onOpen,
+  testId
+}) {
+  const Icon = kind === "document" ? FileText : ArrowUpRight;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+  ] });
+  if (!onOpen) {
+    return /* @__PURE__ */ jsx("span", { className: CHIP, title: label, "data-testid": testId, children: body });
+  }
+  const stop = (e) => e.stopPropagation();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: label,
+      "data-testid": testId,
+      onClick: (e) => {
+        e.stopPropagation();
+        onOpen();
+      },
+      onDoubleClick: stop,
+      onMouseDown: stop,
+      className: cn(CHIP, "hover:bg-muted hover:underline"),
+      children: body
+    }
+  );
+}
+function ChipRow({ children, wrap }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex min-w-0 items-center gap-1",
+        wrap ? "flex-wrap py-0.5" : "h-full overflow-hidden"
+      ),
+      children
+    }
+  );
+}
+function PersonCell({ value, titles }) {
+  const [id] = cellIds(value);
+  return id ? /* @__PURE__ */ jsx(PersonChip, { name: titleOf(id, titles) }) : null;
+}
+function LinkChipsCell({
+  value,
+  titles,
+  kind,
+  onOpenDocument,
+  wrap
+}) {
+  const ids = cellIds(value);
+  if (ids.length === 0) return null;
+  return /* @__PURE__ */ jsx(ChipRow, { wrap, children: ids.map((id) => /* @__PURE__ */ jsx(
+    LinkChip,
+    {
+      label: titleOf(id, titles),
+      kind,
+      testId: `database-chip-${id}`,
+      onOpen: kind === "document" && onOpenDocument ? () => onOpenDocument(id) : void 0
+    },
+    id
+  )) });
+}
+function LookupCell({
+  value,
+  titles,
+  locale,
+  wrap
+}) {
+  const values = cellList(value);
+  if (values.length === 0) return null;
+  return /* @__PURE__ */ jsx(ChipRow, { wrap, children: values.map((v, i) => {
+    const text = formatLookupValue(v, titles, locale);
+    const key = `${i}-${text}`;
+    if (typeof v === "string" && /^doc-/.test(v))
+      return /* @__PURE__ */ jsx(LinkChip, { label: text, kind: "document" }, key);
+    if (typeof v === "string" && /^dbr-/.test(v))
+      return /* @__PURE__ */ jsx(LinkChip, { label: text, kind: "relation" }, key);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        title: text,
+        className: "inline-flex h-[22px] min-w-0 max-w-[14rem] shrink-0 items-center truncate rounded-md bg-muted/60 px-1.5 text-xs text-foreground",
+        children: text
+      },
+      key
+    );
+  }) });
+}
+var MAX_SHOWN = 50;
+var SEARCH_DEBOUNCE_MS = 200;
+var DEFAULT_PICK_CELL_EDITOR_LABELS = {
+  searchPlaceholder: "Search\u2026",
+  noMatches: "No matches",
+  searching: "Searching\u2026",
+  clear: "Clear",
+  done: "Done",
+  remove: (label) => `Remove ${label}`
+};
+function useChoices(query, options, search) {
+  const [found, setFound] = useState([]);
+  const [loading, setLoading] = useState(Boolean(search));
+  useEffect(() => {
+    if (!search) return;
+    let live = true;
+    setLoading(true);
+    const t = setTimeout(
+      () => {
+        search(query.trim()).then((rows) => live && setFound(rows)).catch(() => live && setFound([])).finally(() => live && setLoading(false));
+      },
+      query ? SEARCH_DEBOUNCE_MS : 0
+    );
+    return () => {
+      live = false;
+      clearTimeout(t);
+    };
+  }, [query, search]);
+  const filtered = useMemo(() => {
+    if (search) return found.slice(0, MAX_SHOWN);
+    const q = query.trim().toLowerCase();
+    const all = options ?? [];
+    const hits = q ? all.filter(
+      (o) => o.label.toLowerCase().includes(q) || (o.description ?? "").toLowerCase().includes(q)
+    ) : all;
+    return hits.slice(0, MAX_SHOWN);
+  }, [found, options, query, search]);
+  return { choices: filtered, loading: Boolean(search) && loading };
+}
+function PickCellEditor(props) {
+  const { value, onValueChange, stopEditing, data, kind, options, search } = props;
+  const l = { ...DEFAULT_PICK_CELL_EDITOR_LABELS, ...props.labels };
+  const multiple = kind !== "person";
+  const [chosen, setChosen] = useState(() => cellIds(value));
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const input = useRef(null);
+  const { choices, loading } = useChoices(query, options, search);
+  const names = useRef({ ...data?.titles ?? {} });
+  for (const o of options ?? []) names.current[o.id] ??= o.label;
+  for (const o of choices) names.current[o.id] = o.label;
+  const nameOf = (id) => names.current[id] ?? id;
+  useEffect(() => input.current?.focus(), []);
+  useEffect(() => setActive(0), [query]);
+  const commit = (ids) => {
+    setChosen(ids);
+    if (data) {
+      const titles = { ...data.titles ?? {} };
+      for (const id of ids) titles[id] ??= nameOf(id);
+      data.titles = titles;
+    }
+    onValueChange(multiple ? ids : ids[0] ?? null);
+  };
+  const close = () => setTimeout(() => stopEditing(), 0);
+  const toggle = (id) => {
+    if (!multiple) {
+      commit([id]);
+      close();
+      return;
+    }
+    commit(chosen.includes(id) ? chosen.filter((x) => x !== id) : [...chosen, id]);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (choices.length === 0) return;
+      const step = e.key === "ArrowDown" ? 1 : -1;
+      setActive((i) => (i + step + choices.length) % choices.length);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      const pick = choices[active];
+      if (pick) toggle(pick.id);
+      else if (multiple) close();
+    } else if (e.key === "Backspace" && multiple && !query && chosen.length > 0) {
+      commit(chosen.slice(0, -1));
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End") {
+      e.stopPropagation();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "database-pick-editor",
+      className: "flex w-72 flex-col rounded-md border border-border bg-popover shadow-md",
+      children: [
+        multiple && chosen.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 border-b border-border p-1.5", children: chosen.map((id) => /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 items-center", children: [
+          /* @__PURE__ */ jsx(LinkChip, { label: nameOf(id), kind: kind === "document" ? "document" : "relation" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": l.remove(nameOf(id)),
+              onClick: () => commit(chosen.filter((x) => x !== id)),
+              "data-testid": `database-pick-remove-${id}`,
+              className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+            }
+          )
+        ] }, id)) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 border-b border-border px-2", children: [
+          /* @__PURE__ */ jsx(Search, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: input,
+              value: query,
+              placeholder: l.searchPlaceholder,
+              onChange: (e) => setQuery(e.target.value),
+              onKeyDown,
+              "data-testid": "database-pick-search",
+              className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            }
+          ),
+          loading && /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin text-muted-foreground" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { role: "listbox", "aria-multiselectable": multiple, className: "max-h-64 overflow-y-auto p-1", children: [
+          choices.map((o, i) => {
+            const isChosen = chosen.includes(o.id);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isChosen,
+                onMouseEnter: () => setActive(i),
+                onClick: () => toggle(o.id),
+                "data-testid": `database-pick-option-${o.id}`,
+                className: cn(
+                  "flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm",
+                  i === active && "bg-muted"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                    kind === "person" ? /* @__PURE__ */ jsx(PersonChip, { name: o.label }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: o.label }),
+                    o.description && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: o.description })
+                  ] }),
+                  isChosen && /* @__PURE__ */ jsx(Check, { className: "size-3.5 shrink-0" })
+                ]
+              },
+              o.id
+            );
+          }),
+          choices.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: loading ? l.searching : l.noMatches })
+        ] }),
+        (multiple || chosen.length > 0) && /* @__PURE__ */ jsx("div", { className: "flex justify-end border-t border-border p-1", children: !multiple ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              commit([]);
+              close();
+            },
+            "data-testid": "database-pick-clear",
+            className: "rounded px-2 py-1 text-sm text-muted-foreground hover:bg-muted",
+            children: l.clear
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: close,
+            "data-testid": "database-pick-done",
+            className: "rounded px-2 py-1 text-sm font-medium hover:bg-muted",
+            children: l.done
+          }
+        ) })
+      ]
+    }
+  );
+}
+function SelectChip({ value }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex max-w-full items-center truncate rounded-md px-2 py-0.5 text-xs font-medium",
+        optionTone(value)
+      ),
+      children: value
+    }
+  );
+}
+function SelectCellEditor(props) {
+  const { value, onValueChange, stopEditing, options, clearLabel = "Clear" } = props;
+  const items = [...options, null];
+  const [active, setActive] = useState(() => Math.max(0, options.indexOf(String(value ?? ""))));
+  const list = useRef(null);
+  useEffect(() => list.current?.focus(), []);
+  const pick = (option) => {
+    onValueChange(option);
+    setTimeout(() => stopEditing(), 0);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      const step = e.key === "ArrowDown" ? 1 : -1;
+      setActive((i) => (i + step + items.length) % items.length);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      pick(items[active]);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: list,
+      role: "listbox",
+      tabIndex: -1,
+      onKeyDown,
+      "data-testid": "database-select-editor",
+      className: "flex min-w-44 flex-col gap-0.5 rounded-md border border-border bg-popover p-1 shadow-md outline-none",
+      children: items.map((option, i) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": option === value,
+          onMouseEnter: () => setActive(i),
+          onClick: () => pick(option),
+          "data-testid": option === null ? "database-select-clear" : `database-select-option-${option}`,
+          className: cn(
+            "flex items-center gap-2 rounded px-2 py-1 text-left text-sm",
+            i === active && "bg-muted"
+          ),
+          children: [
+            option === null ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: clearLabel }) : /* @__PURE__ */ jsx(SelectChip, { value: option }),
+            option !== null && option === value && /* @__PURE__ */ jsx(Check, { className: "ml-auto size-3.5" })
+          ]
+        },
+        option ?? "__clear"
+      ))
+    }
+  );
+}
+var DEFAULT_DATABASE_COLUMN_LABELS = {
+  addColumn: "Add a column",
+  columnSettings: (name) => `${name} column settings`,
+  computed: "Computed from a relation (read-only)",
+  openRow: "Open row"
+};
+var ADD_COLUMN_COL_ID = "__add_column";
+var OPEN_ROW_COL_ID = "__open_row";
+var COLUMN_TYPE_ICONS = {
+  text: Type,
+  number: Hash,
+  date: CalendarDays,
+  checkbox: CheckSquare,
+  select: ChevronDown,
+  person: UserRound,
+  document: FileText,
+  relation: ArrowUpRight,
+  lookup: Search,
+  rollup: Sigma
+};
+var WIDTHS = {
+  text: 220,
+  number: 130,
+  date: 140,
+  checkbox: 110,
+  select: 160,
+  person: 180,
+  document: 240,
+  relation: 240,
+  lookup: 200,
+  rollup: 130
+};
+function HeaderLabel({
+  column,
+  onEdit,
+  label,
+  computedLabel
+}) {
+  const Icon = COLUMN_TYPE_ICONS[column.type];
+  return /* @__PURE__ */ jsxs("span", { className: "group/dbh flex min-w-0 items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "truncate text-[12.5px] font-medium", children: column.name }),
+    isComputedColumn(column) && /* @__PURE__ */ jsx("span", { title: computedLabel, "data-testid": `database-column-computed-${column.id}`, children: /* @__PURE__ */ jsx(Lock, { className: "size-3 shrink-0 text-muted-foreground/70", "aria-label": computedLabel }) }),
+    onEdit && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        title: label,
+        "data-testid": `database-column-settings-${column.id}`,
+        onClick: (e) => {
+          e.stopPropagation();
+          onEdit();
+        },
+        onMouseDown: (e) => e.stopPropagation(),
+        className: "ml-auto rounded p-0.5 text-muted-foreground opacity-0 hover:bg-muted hover:text-foreground focus-visible:opacity-100 group-hover/dbh:opacity-100",
+        children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
+function columnWidth(column) {
+  const header = Math.round(column.name.length * 8) + 76 + (isComputedColumn(column) ? 16 : 0);
+  return Math.min(320, Math.max(WIDTHS[column.type], header));
+}
+function canEditColumn(column, sources) {
+  if (isComputedColumn(column)) return false;
+  if (column.type === "person") return Boolean(sources?.members);
+  if (column.type === "document") return Boolean(sources?.documents);
+  if (column.type === "relation") return Boolean(sources?.searchRows && column.relation);
+  return true;
+}
+function editorFor(column, sources) {
+  const pick = (params) => ({
+    cellEditor: PickCellEditor,
+    cellEditorPopup: true,
+    cellEditorParams: params
+  });
+  switch (column.type) {
+    case "number":
+      return { cellEditor: "agNumberCellEditor", cellEditorParams: { showStepperButtons: false } };
+    case "date":
+      return { cellEditor: "agDateStringCellEditor" };
+    case "checkbox":
+      return { cellEditor: "agCheckboxCellEditor" };
+    case "select":
+      return {
+        cellEditor: SelectCellEditor,
+        cellEditorPopup: true,
+        cellEditorParams: { options: column.options ?? [] }
+      };
+    case "person":
+      return pick({ kind: "person", options: sources?.members ?? [] });
+    case "document":
+      return pick({ kind: "document", options: sources?.documents ?? [] });
+    case "relation": {
+      const target = column.relation?.database_id;
+      const searchRows = sources?.searchRows;
+      return pick({
+        kind: "relation",
+        search: target && searchRows ? (q) => searchRows(target, q) : void 0
+      });
+    }
+    case "lookup":
+    case "rollup":
+      return {};
+    default:
+      return { cellEditor: "agTextCellEditor" };
+  }
+}
+function rendererFor(column, locale, sources) {
+  switch (column.type) {
+    case "checkbox":
+      return {
+        cellRenderer: "agCheckboxCellRenderer",
+        cellClass: "flex items-center justify-center"
+      };
+    case "select":
+      return {
+        cellRenderer: (p) => typeof p.value === "string" && p.value ? /* @__PURE__ */ jsx(SelectChip, { value: p.value }) : null
+      };
+    case "number":
+      return {
+        cellClass: "cell-numeric",
+        valueFormatter: (p) => formatCell(p.value, "number", locale)
+      };
+    case "rollup":
+      return {
+        cellClass: "cell-numeric text-muted-foreground",
+        valueFormatter: (p) => formatCell(p.value, "rollup", locale)
+      };
+    case "date":
+      return {
+        valueFormatter: (p) => formatCell(p.value, "date", locale)
+      };
+    case "person":
+      return {
+        cellRenderer: (p) => /* @__PURE__ */ jsx(PersonCell, { value: p.value, titles: p.data?.titles })
+      };
+    case "document":
+    case "relation":
+      return {
+        cellRenderer: (p) => /* @__PURE__ */ jsx(
+          LinkChipsCell,
+          {
+            value: p.value,
+            titles: p.data?.titles,
+            kind: column.type === "document" ? "document" : "relation",
+            onOpenDocument: sources?.onOpenDocument
+          }
+        )
+      };
+    case "lookup":
+      return {
+        cellRenderer: (p) => /* @__PURE__ */ jsx(LookupCell, { value: p.value, titles: p.data?.titles, locale })
+      };
+    default:
+      return {};
+  }
+}
+function createDatabaseColumns(columns, options = {}) {
+  const { readOnly, onEditColumn, onAddColumn, onOpenRow, locale, sources } = options;
+  const l = { ...DEFAULT_DATABASE_COLUMN_LABELS, ...options.labels };
+  const openRow = onOpenRow && columns.length > 0 ? [
+    {
+      colId: OPEN_ROW_COL_ID,
+      headerName: "",
+      width: 40,
+      minWidth: 40,
+      maxWidth: 40,
+      resizable: false,
+      sortable: false,
+      editable: false,
+      suppressMovable: true,
+      // Pinned: the button stays in view however far the table scrolls.
+      pinned: "left",
+      lockPinned: true,
+      lockPosition: "left",
+      cellClass: "flex items-center justify-center !px-0",
+      valueGetter: () => null,
+      cellRenderer: (p) => p.data ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": l.openRow,
+          title: l.openRow,
+          "data-testid": `database-open-row-${p.data.id}`,
+          onClick: (e) => {
+            e.stopPropagation();
+            if (p.data) onOpenRow(p.data);
+          },
+          onDoubleClick: (e) => e.stopPropagation(),
+          className: "flex size-6 items-center justify-center rounded text-muted-foreground/70 hover:bg-muted hover:text-foreground",
+          children: /* @__PURE__ */ jsx(Maximize2, { className: "size-3.5" })
+        }
+      ) : null
+    }
+  ] : [];
+  const defs = columns.map((column) => ({
+    colId: column.id,
+    headerName: column.name,
+    width: columnWidth(column),
+    minWidth: 90,
+    resizable: true,
+    sortable: true,
+    editable: !readOnly && canEditColumn(column, sources),
+    // The grid's own type inference must not second-guess the database's column type.
+    cellDataType: false,
+    headerComponentParams: {
+      innerHeaderComponent: () => /* @__PURE__ */ jsx(
+        HeaderLabel,
+        {
+          column,
+          label: l.columnSettings(column.name),
+          computedLabel: l.computed,
+          onEdit: !readOnly && onEditColumn ? () => onEditColumn(column) : void 0
+        }
+      )
+    },
+    // An empty checkbox reads as unticked (not indeterminate).
+    valueGetter: (p) => column.type === "checkbox" ? p.data?.values[column.id] === true : p.data?.values[column.id] ?? null,
+    // Edits land in the row's values as the API would store them; the host saves them in
+    // onCellValueChanged and puts the server's normalised row back.
+    valueSetter: (p) => {
+      if (!p.data) return false;
+      const next = toApiValue(p.newValue, column.type);
+      if (sameCellValue(next, p.oldValue)) return false;
+      p.data.values = { ...p.data.values, [column.id]: next };
+      return true;
+    },
+    comparator: (a, b, nodeA, nodeB) => compareCells(a, b, column.type, nodeA?.data?.titles, nodeB?.data?.titles),
+    getQuickFilterText: (p) => formatCell(p.value, column.type, locale, p.data?.titles),
+    ...editorFor(column, sources),
+    ...rendererFor(column, locale, sources)
+  }));
+  defs.unshift(...openRow);
+  if (!readOnly && onAddColumn) {
+    defs.push({
+      colId: ADD_COLUMN_COL_ID,
+      width: 52,
+      minWidth: 52,
+      maxWidth: 52,
+      resizable: false,
+      sortable: false,
+      editable: false,
+      suppressMovable: true,
+      // Pinned: on a wide table the add button stays in view instead of scrolling off the right.
+      pinned: "right",
+      lockPinned: true,
+      headerComponent: () => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": l.addColumn,
+          title: l.addColumn,
+          "data-testid": "database-add-column",
+          onClick: onAddColumn,
+          className: "flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+          children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+        }
+      ),
+      valueGetter: () => null
+    });
+  }
+  return defs;
+}
+var DEFAULT_COLUMN_CONFIG_LABELS = {
+  relatedDatabase: "Related database",
+  pickDatabase: "Pick a database",
+  noDatabases: "There is no database to link to yet.",
+  targetFixed: "The related database can\u2019t be changed once the column has been added.",
+  thisDatabase: "this database",
+  showOnTarget: (target) => `Show on ${target}`,
+  showOnTargetHint: "Adds a column to the related database that lists the links back.",
+  pairName: "Name of the column there",
+  pairNamePlaceholder: (name) => name,
+  pairedWith: (target) => `Shown on ${target} too (two-way).`,
+  oneWay: "One-way: only this database shows the links.",
+  relation: "Relation",
+  pickRelation: "Pick a relation column",
+  noRelations: "Add a relation column first: lookups and rollups read through one.",
+  lookupColumn: "Column to show",
+  pickColumn: "Pick a column",
+  noColumns: "The related database has no column to show.",
+  rollupOp: "Calculate",
+  rollupColumn: "Of the number column",
+  noNumberColumns: "The related database has no number column.",
+  ops: { count: "Count", sum: "Sum", avg: "Average", min: "Min", max: "Max" }
+};
+function Field({ label, children, hint }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    children,
+    hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hint })
+  ] });
+}
+function Hint({ children, testId }) {
+  return /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", "data-testid": testId, children });
+}
+function ColumnSelect({
+  value,
+  onChange,
+  columns,
+  placeholder,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(Select, { value: value || void 0, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { "data-testid": testId, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: columns.map((c) => {
+      const Icon = COLUMN_TYPE_ICONS[c.type];
+      return /* @__PURE__ */ jsx(SelectItem, { value: c.id, "data-testid": `${testId}-${c.id}`, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4 text-muted-foreground" }),
+        c.name
+      ] }) }, c.id);
+    }) })
+  ] });
+}
+function RelationFields({
+  draft,
+  onChange,
+  databases,
+  databaseId,
+  databaseName,
+  editing,
+  column,
+  labels
+}) {
+  const nameOf = (id) => databases.find((d) => d.id === id)?.name ?? (id === databaseId ? labels.thisDatabase : id);
+  if (editing && column?.relation) {
+    const target2 = nameOf(column.relation.database_id);
+    return /* @__PURE__ */ jsxs(Field, { label: labels.relatedDatabase, hint: labels.targetFixed, children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm", "data-testid": "database-column-relation-target", children: target2 }),
+      /* @__PURE__ */ jsx(Hint, { children: column.relation.two_way ? labels.pairedWith(target2) : labels.oneWay })
+    ] });
+  }
+  if (databases.length === 0) return /* @__PURE__ */ jsx(Hint, { children: labels.noDatabases });
+  const target = draft.database_id ? nameOf(draft.database_id) : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Field, { label: labels.relatedDatabase, children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: draft.database_id || void 0,
+        onValueChange: (v) => onChange({ ...draft, database_id: v }),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { "data-testid": "database-column-relation-database", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: labels.pickDatabase }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: databases.map((d) => /* @__PURE__ */ jsx(
+            SelectItem,
+            {
+              value: d.id,
+              "data-testid": `database-column-relation-database-${d.id}`,
+              children: d.id === databaseId ? `${d.name} (${labels.thisDatabase})` : d.name
+            },
+            d.id
+          )) })
+        ]
+      }
+    ) }),
+    draft.database_id && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-border p-3", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: labels.showOnTarget(target) }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: labels.showOnTargetHint })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: draft.two_way,
+            onCheckedChange: (two_way) => onChange({ ...draft, two_way }),
+            "data-testid": "database-column-relation-two-way"
+          }
+        )
+      ] }),
+      draft.two_way && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "database-column-pair-name", children: labels.pairName }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "database-column-pair-name",
+            value: draft.pair_name,
+            maxLength: 200,
+            placeholder: labels.pairNamePlaceholder(databaseName ?? ""),
+            onChange: (e) => onChange({ ...draft, pair_name: e.target.value }),
+            "data-testid": "database-column-pair-name"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function relationColumnsOf(columns) {
+  return columns.filter((c) => c.type === "relation" && c.relation);
+}
+function targetColumnsOf(relationId, columns, databases, databaseId) {
+  const relation = columns.find((c) => c.id === relationId)?.relation;
+  if (!relation) return [];
+  if (relation.database_id === databaseId) return columns;
+  return databases.find((d) => d.id === relation.database_id)?.columns ?? [];
+}
+function LookupFields({
+  draft,
+  onChange,
+  columns,
+  databases,
+  databaseId,
+  labels
+}) {
+  const relations = relationColumnsOf(columns);
+  if (relations.length === 0)
+    return /* @__PURE__ */ jsx(Hint, { testId: "database-column-no-relations", children: labels.noRelations });
+  const shown = targetColumnsOf(draft.relation, columns, databases, databaseId).filter(
+    (c) => !isComputedColumn(c)
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Field, { label: labels.relation, children: /* @__PURE__ */ jsx(
+      ColumnSelect,
+      {
+        value: draft.relation,
+        onChange: (relation) => onChange({ relation, column: "" }),
+        columns: relations,
+        placeholder: labels.pickRelation,
+        testId: "database-column-lookup-relation"
+      }
+    ) }),
+    draft.relation && /* @__PURE__ */ jsx(Field, { label: labels.lookupColumn, children: shown.length ? /* @__PURE__ */ jsx(
+      ColumnSelect,
+      {
+        value: draft.column,
+        onChange: (column) => onChange({ ...draft, column }),
+        columns: shown,
+        placeholder: labels.pickColumn,
+        testId: "database-column-lookup-column"
+      }
+    ) : /* @__PURE__ */ jsx(Hint, { children: labels.noColumns }) })
+  ] });
+}
+function RollupFields({
+  draft,
+  onChange,
+  columns,
+  databases,
+  databaseId,
+  labels
+}) {
+  const relations = relationColumnsOf(columns);
+  if (relations.length === 0)
+    return /* @__PURE__ */ jsx(Hint, { testId: "database-column-no-relations", children: labels.noRelations });
+  const numbers = targetColumnsOf(draft.relation, columns, databases, databaseId).filter(
+    (c) => c.type === "number"
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Field, { label: labels.relation, children: /* @__PURE__ */ jsx(
+      ColumnSelect,
+      {
+        value: draft.relation,
+        onChange: (relation) => onChange({ ...draft, relation, column: "" }),
+        columns: relations,
+        placeholder: labels.pickRelation,
+        testId: "database-column-rollup-relation"
+      }
+    ) }),
+    draft.relation && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[8rem_1fr] gap-2", children: [
+      /* @__PURE__ */ jsx(Field, { label: labels.rollupOp, children: /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: draft.op,
+          onValueChange: (op) => onChange({ ...draft, op }),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { "data-testid": "database-column-rollup-op", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: DATABASE_ROLLUP_OPS.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op, "data-testid": `database-column-rollup-op-${op}`, children: labels.ops[op] }, op)) })
+          ]
+        }
+      ) }),
+      draft.op !== "count" && /* @__PURE__ */ jsx(Field, { label: labels.rollupColumn, children: numbers.length ? /* @__PURE__ */ jsx(
+        ColumnSelect,
+        {
+          value: draft.column,
+          onChange: (column) => onChange({ ...draft, column }),
+          columns: numbers,
+          placeholder: labels.pickColumn,
+          testId: "database-column-rollup-column"
+        }
+      ) : /* @__PURE__ */ jsx(Hint, { children: labels.noNumberColumns }) })
+    ] })
+  ] });
+}
+var DEFAULT_DATABASE_ROW_DETAIL_LABELS = {
+  untitled: "Untitled",
+  fields: "Fields",
+  documents: "Linked documents",
+  noDocuments: "No document is linked to this row.",
+  empty: "Empty",
+  deleteRow: "Delete row",
+  close: "Close",
+  computed: "Computed from a relation"
+};
+function DraftInput({
+  value,
+  type,
+  onCommit,
+  testId,
+  label
+}) {
+  const [draft, setDraft] = useState(value);
+  useEffect(() => setDraft(value), [value]);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      type,
+      value: draft,
+      "aria-label": label,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: () => draft !== value && onCommit(draft),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") e.currentTarget.blur();
+        if (e.key === "Escape") {
+          setDraft(value);
+          requestAnimationFrame(() => e.target.blur());
+        }
+      },
+      className: "h-8",
+      "data-testid": testId
+    }
+  );
+}
+function PopoverField({
+  display,
+  emptyLabel,
+  testId,
+  label,
+  renderEditor,
+  onCommit
+}) {
+  const [open, setOpen] = useState(false);
+  const pending = useRef(null);
+  const cancelled = useRef(false);
+  const close = (keep) => {
+    setOpen(false);
+    const change = pending.current;
+    pending.current = null;
+    if (change && !cancelled.current) onCommit(change.value);
+    cancelled.current = false;
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (next) {
+          pending.current = null;
+          cancelled.current = false;
+          setOpen(true);
+        } else close();
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": label,
+            "aria-haspopup": "dialog",
+            onKeyDown: (e) => {
+              if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                setOpen(true);
+              }
+            },
+            className: "flex min-h-8 w-full min-w-0 cursor-pointer items-center rounded-md border border-input bg-transparent px-2 py-1 text-left text-sm outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring",
+            "data-testid": testId,
+            children: display ?? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: emptyLabel })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            align: "start",
+            className: "w-auto border-0 bg-transparent p-0 shadow-none",
+            onEscapeKeyDown: () => {
+              cancelled.current = true;
+            },
+            children: renderEditor({
+              onValueChange: (value) => {
+                pending.current = { value };
+              },
+              stopEditing: () => close()
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function DatabaseRowDetail({
+  row,
+  columns,
+  onChange,
+  sources,
+  onDelete,
+  onClose,
+  readOnly = false,
+  locale,
+  labels,
+  className,
+  testId = "database-row-detail"
+}) {
+  const l = { ...DEFAULT_DATABASE_ROW_DETAIL_LABELS, ...labels };
+  const title = row ? rowTitle(row, columns, locale) || l.untitled : "";
+  const commit = (column, value) => {
+    if (!row || !onChange) return;
+    const next = toApiValue(value, column.type);
+    if (sameCellValue(next, row.values[column.id])) return;
+    onChange(row, column.id, next);
+  };
+  const fieldEditor = (column) => {
+    if (!row) return null;
+    const value = row.values[column.id];
+    const id = `${testId}-input-${column.id}`;
+    const editable = !readOnly && Boolean(onChange) && canEditColumn(column, sources);
+    const display = () => {
+      switch (column.type) {
+        case "select":
+          return typeof value === "string" && value ? /* @__PURE__ */ jsx(SelectChip, { value }) : null;
+        case "person":
+          return cellIds(value).length ? /* @__PURE__ */ jsx(PersonCell, { value, titles: row.titles }) : null;
+        case "document":
+        case "relation":
+          return cellIds(value).length ? /* @__PURE__ */ jsx(
+            LinkChipsCell,
+            {
+              value,
+              titles: row.titles,
+              kind: column.type,
+              onOpenDocument: sources?.onOpenDocument,
+              wrap: true
+            }
+          ) : null;
+        case "lookup":
+          return /* @__PURE__ */ jsx(LookupCell, { value, titles: row.titles, locale, wrap: true });
+        default: {
+          const text = formatCell(value, column.type, locale, row.titles);
+          return text ? /* @__PURE__ */ jsx("span", { className: "break-words", children: text }) : null;
+        }
+      }
+    };
+    if (!editable) {
+      const shown = display();
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex min-h-8 min-w-0 items-center py-1 text-sm",
+            isComputedColumn(column) && "text-muted-foreground"
+          ),
+          title: isComputedColumn(column) ? l.computed : void 0,
+          "data-testid": id,
+          children: shown ?? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" })
+        }
+      );
+    }
+    switch (column.type) {
+      case "checkbox":
+        return /* @__PURE__ */ jsx("div", { className: "flex min-h-8 items-center", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: value === true,
+            "aria-label": column.name,
+            onCheckedChange: (checked) => commit(column, checked === true),
+            "data-testid": id
+          }
+        ) });
+      case "number":
+      case "date":
+      case "text": {
+        const text = value == null ? "" : column.type === "date" ? String(value).slice(0, 10) : String(value);
+        return /* @__PURE__ */ jsx(
+          DraftInput,
+          {
+            value: text,
+            type: column.type,
+            label: column.name,
+            onCommit: (next) => commit(column, next),
+            testId: id
+          }
+        );
+      }
+      case "select":
+        return /* @__PURE__ */ jsx(
+          PopoverField,
+          {
+            display: display(),
+            emptyLabel: l.empty,
+            label: column.name,
+            testId: id,
+            onCommit: (next) => commit(column, next),
+            renderEditor: (editor) => /* @__PURE__ */ jsx(SelectCellEditor, { ...editor, value, options: column.options ?? [] })
+          }
+        );
+      case "person":
+      case "document":
+      case "relation": {
+        const target = column.relation?.database_id;
+        const searchRows = sources?.searchRows;
+        return /* @__PURE__ */ jsx(
+          PopoverField,
+          {
+            display: display(),
+            emptyLabel: l.empty,
+            label: column.name,
+            testId: id,
+            onCommit: (next) => commit(column, next),
+            renderEditor: (editor) => /* @__PURE__ */ jsx(
+              PickCellEditor,
+              {
+                ...editor,
+                value,
+                data: row,
+                kind: column.type,
+                options: column.type === "person" ? sources?.members : column.type === "document" ? sources?.documents : void 0,
+                search: column.type === "relation" && target && searchRows ? (q) => searchRows(target, q) : void 0
+              }
+            )
+          }
+        );
+      }
+      default:
+        return null;
+    }
+  };
+  const documents = /* @__PURE__ */ new Map();
+  if (row) {
+    for (const column of columns) {
+      if (column.type !== "document") continue;
+      for (const id of cellIds(row.values[column.id])) {
+        documents.set(id, [...documents.get(id) ?? [], column.name]);
+      }
+    }
+  }
+  const openDocument = sources?.onOpenDocument;
+  return /* @__PURE__ */ jsxs(
+    DetailPanel,
+    {
+      title,
+      icon: /* @__PURE__ */ jsx(Rows3, { className: "size-4" }),
+      isLoading: !row,
+      onClose,
+      labels: { close: l.close },
+      className,
+      testId,
+      actions: row && onDelete && !readOnly ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "size-8 text-red-text",
+          onClick: () => onDelete(row),
+          "aria-label": l.deleteRow,
+          title: l.deleteRow,
+          "data-testid": `${testId}-delete`,
+          children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+        }
+      ) : void 0,
+      children: [
+        /* @__PURE__ */ jsx(DetailSection, { title: l.fields, testId: `${testId}-fields`, children: /* @__PURE__ */ jsx(DetailFields, { children: columns.map((column) => {
+          const Icon = COLUMN_TYPE_ICONS[column.type];
+          return /* @__PURE__ */ jsx(
+            DetailField,
+            {
+              label: column.name,
+              icon: Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }) : void 0,
+              testId: `${testId}-field-${column.id}`,
+              children: fieldEditor(column)
+            },
+            column.id
+          );
+        }) }) }),
+        columns.some((c) => c.type === "document") && /* @__PURE__ */ jsx(DetailSection, { title: l.documents, count: documents.size, testId: `${testId}-documents`, children: documents.size ? /* @__PURE__ */ jsx(DetailLinkList, { children: [...documents].map(([id, via]) => /* @__PURE__ */ jsx(
+          DetailLinkItem,
+          {
+            icon: /* @__PURE__ */ jsx(FileText, { className: "size-4" }),
+            onClick: openDocument ? () => openDocument(id) : void 0,
+            testId: `${testId}-doc-${id}`,
+            children: /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: titleOf(id, row?.titles) }),
+              /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: via.join(", ") })
+            ] })
+          },
+          id
+        )) }) : /* @__PURE__ */ jsx(DetailEmpty, { children: l.noDocuments }) })
+      ]
+    }
+  );
+}
+var escapeHtml = (text) => text.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
+var DEFAULT_DATABASE_TABLE_LABELS = {
+  newRow: "New row",
+  emptyTitle: "No rows yet",
+  emptyMessage: "Add a row, or import a spreadsheet.",
+  noColumnsTitle: "No columns yet",
+  noColumnsMessage: "Add a column to start.",
+  noMatches: "No rows match your search."
+};
+function DatabaseTable({
+  columns,
+  rows,
+  onCellChange,
+  onAddRow,
+  onAddColumn,
+  onEditColumn,
+  onOpenRow,
+  sources,
+  onSelectionChange,
+  selected,
+  readOnly = false,
+  isFiltered = false,
+  isLoading,
+  locale,
+  gridId,
+  height = "100%",
+  labels,
+  columnLabels,
+  gridProps,
+  testId
+}) {
+  const l = { ...DEFAULT_DATABASE_TABLE_LABELS, ...labels };
+  const columnDefs = useMemo(
+    () => createDatabaseColumns(columns, {
+      readOnly,
+      onEditColumn,
+      onAddColumn,
+      onOpenRow,
+      sources,
+      locale,
+      labels: columnLabels
+    }),
+    [columns, readOnly, onEditColumn, onAddColumn, onOpenRow, sources, locale, columnLabels]
+  );
+  const noColumns = columns.length === 0;
+  const emptyState = {
+    icon: /* @__PURE__ */ jsx(Table2, { className: "size-8 text-muted-foreground" }),
+    title: l.noColumnsTitle,
+    message: readOnly ? void 0 : l.noColumnsMessage,
+    action: !readOnly && onAddColumn ? /* @__PURE__ */ jsxs(Button, { onClick: onAddColumn, "data-testid": "database-empty-add-column", className: "gap-1.5", children: [
+      /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+      columnLabels?.addColumn ?? DEFAULT_DATABASE_COLUMN_LABELS.addColumn
+    ] }) : void 0
+  };
+  const noRowsText = isFiltered ? l.noMatches : readOnly ? l.emptyTitle : `${l.emptyTitle}. ${l.emptyMessage}`;
+  const api = useRef(null);
+  const knownColumns = useRef(null);
+  useEffect(() => {
+    const ids = new Set(columns.map((c) => c.id));
+    const added = knownColumns.current ? columns.filter((c) => !knownColumns.current.has(c.id)) : [];
+    knownColumns.current = ids;
+    const last = added[added.length - 1];
+    if (last && api.current) {
+      const grid = api.current;
+      setTimeout(() => grid.ensureColumnVisible(last.id, "end"), 0);
+    }
+  }, [columns]);
+  const handleCellValueChanged = (event) => {
+    const columnId = event.column.getColId();
+    if (!event.data || !onCellChange) return;
+    onCellChange(event.data, columnId, event.data.values[columnId] ?? null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex h-full min-h-0 flex-col",
+      "data-testid": testIdOr(testId, { testId: "database-table" }),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+          GridView,
+          {
+            testId: "database-grid",
+            items: rows,
+            columnDefs,
+            getItemId: (row) => row.id,
+            getRowTestId: (row) => `database-row-${row.id}`,
+            getCellTestId: (colId, row) => `database-cell-${row.id}-${colId}`,
+            isLoading,
+            emptyState,
+            showEmpty: noColumns,
+            gridId,
+            height,
+            rowHeight: 38,
+            selection: onSelectionChange ? { mode: "multiple", selected: selected ?? [], onSelectionChange, controlled: true } : void 0,
+            onCellValueChanged: handleCellValueChanged,
+            ...gridProps,
+            onGridReady: (params) => {
+              api.current = params.api;
+              gridProps?.onGridReady?.(params);
+            },
+            gridOptions: {
+              overlayNoRowsTemplate: `<span class="text-sm text-muted-foreground">${escapeHtml(noRowsText)}</span>`,
+              singleClickEdit: false,
+              stopEditingWhenCellsLoseFocus: true,
+              enterNavigatesVerticallyAfterEdit: true,
+              undoRedoCellEditing: false,
+              ...gridProps?.gridOptions
+            }
+          }
+        ) }),
+        !readOnly && onAddRow && columns.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-2 py-1", children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onAddRow,
+            "data-testid": "database-add-row",
+            className: "gap-1.5 text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+              l.newRow
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+var DEFAULT_DATABASE_TOOLBAR_LABELS = {
+  back: "All databases",
+  rename: "Rename database",
+  rows: (n) => `${n.toLocaleString()} row${n === 1 ? "" : "s"}`,
+  showing: (shown, total) => `Showing ${shown.toLocaleString()} of ${total.toLocaleString()}`,
+  search: "Search",
+  deleteSelected: (n) => `Delete ${n} row${n === 1 ? "" : "s"}`,
+  more: "More actions",
+  importRows: "Import rows from a spreadsheet\u2026",
+  exportXlsx: "Export to Excel (.xlsx)",
+  exportCsv: "Export to CSV",
+  deleteDatabase: "Delete database",
+  readOnly: "Read-only here: this database belongs to another workspace."
+};
+var SPREADSHEET_ACCEPT = ".csv,.xlsx,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+function DatabaseToolbar({
+  name,
+  description,
+  total,
+  shown,
+  search,
+  onSearchChange,
+  onBack,
+  onRename,
+  selectedCount = 0,
+  onDeleteSelected,
+  onImportRows,
+  onExport,
+  onDeleteDatabase,
+  readOnly = false,
+  views,
+  labels
+}) {
+  const l = { ...DEFAULT_DATABASE_TOOLBAR_LABELS, ...labels };
+  const [title, setTitle] = useState(name);
+  const fileInput = useRef(null);
+  useEffect(() => setTitle(name), [name]);
+  const commitTitle = () => {
+    const next = title.trim();
+    if (next && next !== name) onRename?.(next);
+    else setTitle(name);
+  };
+  const onTitleKey = (e) => {
+    if (e.key === "Enter") e.currentTarget.blur();
+    if (e.key === "Escape") {
+      setTitle(name);
+      e.currentTarget.blur();
+    }
+  };
+  const onFile = (e) => {
+    const file = e.target.files?.[0];
+    if (file) onImportRows?.(file);
+    e.target.value = "";
+  };
+  const canRename = !readOnly && Boolean(onRename);
+  const hasMenu = Boolean(onExport || !readOnly && (onImportRows || onDeleteDatabase));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-2 pb-2 pt-1", "data-testid": "database-toolbar", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      onBack && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: onBack,
+          "aria-label": l.back,
+          title: l.back,
+          "data-testid": "database-back",
+          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(FileSpreadsheet, { className: "size-5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+      canRename ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: title,
+          "aria-label": l.rename,
+          maxLength: 200,
+          onChange: (e) => setTitle(e.target.value),
+          onBlur: commitTitle,
+          onKeyDown: onTitleKey,
+          "data-testid": "database-title",
+          className: "min-w-0 flex-1 truncate rounded-md bg-transparent px-1 text-xl font-semibold outline-none hover:bg-muted/60 focus:bg-muted/60"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: "min-w-0 flex-1 truncate px-1 text-xl font-semibold",
+          "data-testid": "database-title",
+          children: name
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-muted-foreground", "data-testid": "database-row-count", children: shown !== void 0 && shown < total ? l.showing(shown, total) : l.rows(total) })
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: "px-1 text-sm text-muted-foreground", children: description }),
+    readOnly && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: "flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground",
+        "data-testid": "database-read-only",
+        children: [
+          /* @__PURE__ */ jsx(Eye, { className: "size-3.5" }),
+          l.readOnly
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative max-w-sm flex-1", children: [
+        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: search,
+            onChange: (e) => onSearchChange(e.target.value),
+            placeholder: l.search,
+            "aria-label": l.search,
+            className: "h-8 pl-8",
+            "data-testid": "database-search"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+      views,
+      !readOnly && selectedCount > 0 && onDeleteSelected && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: onDeleteSelected,
+          className: "gap-1.5 text-red-text",
+          "data-testid": "database-delete-rows",
+          children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+            l.deleteSelected(selectedCount)
+          ]
+        }
+      ),
+      hasMenu && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            "aria-label": l.more,
+            title: l.more,
+            "data-testid": "database-menu",
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [
+          !readOnly && onImportRows && /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onSelect: () => fileInput.current?.click(),
+              "data-testid": "database-import-rows",
+              children: [
+                /* @__PURE__ */ jsx(Upload, { className: "size-4" }),
+                l.importRows
+              ]
+            }
+          ),
+          onExport && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onSelect: () => onExport("xlsx"),
+                "data-testid": "database-export-xlsx",
+                children: [
+                  /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+                  l.exportXlsx
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onSelect: () => onExport("csv"),
+                "data-testid": "database-export-csv",
+                children: [
+                  /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+                  l.exportCsv
+                ]
+              }
+            )
+          ] }),
+          !readOnly && onDeleteDatabase && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onSelect: onDeleteDatabase,
+                className: "text-red-text",
+                "data-testid": "database-delete",
+                children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+                  l.deleteDatabase
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInput,
+          type: "file",
+          accept: SPREADSHEET_ACCEPT,
+          className: "hidden",
+          onChange: onFile,
+          "data-testid": "database-import-rows-input"
+        }
+      )
+    ] })
+  ] });
+}
+var DEFAULT_DATABASE_COLUMN_DIALOG_LABELS = {
+  addTitle: "Add a column",
+  editTitle: "Column settings",
+  addDescription: "Pick what the column holds; every cell in it is checked against its type.",
+  editDescription: "Rename the column or change its options.",
+  name: "Name",
+  namePlaceholder: "e.g. Client, Reference, Fee",
+  type: "Type",
+  typeFixed: "A column\u2019s type can\u2019t be changed once it has been added.",
+  options: "Options",
+  optionPlaceholder: "Add an option and press Enter",
+  addOption: "Add",
+  removeOption: (option) => `Remove ${option}`,
+  needsOptions: "A select column needs at least one option.",
+  cancel: "Cancel",
+  add: "Add column",
+  save: "Save",
+  saving: "Saving\u2026",
+  delete: "Delete column",
+  confirmDelete: "Delete this column and every value in it?"
+};
+var NO_RELATION = { database_id: "", two_way: false, pair_name: "" };
+var NO_LOOKUP = { relation: "", column: "" };
+var NO_ROLLUP = { relation: "", column: "", op: "count" };
+var NO_COLUMNS = [];
+var NO_DATABASES = [];
+function configComplete(type, editing, relation, lookup, rollup) {
+  if (type === "relation") return editing || Boolean(relation.database_id);
+  if (type === "lookup") return Boolean(lookup.relation && lookup.column);
+  if (type === "rollup") return Boolean(rollup.relation && (rollup.op === "count" || rollup.column));
+  return true;
+}
+function DatabaseColumnDialog({
+  open,
+  onOpenChange,
+  column,
+  databaseId,
+  databaseName,
+  columns = NO_COLUMNS,
+  databases = NO_DATABASES,
+  onSave,
+  onDelete,
+  isSaving = false,
+  error,
+  labels,
+  typeLabels,
+  configLabels
+}) {
+  const l = { ...DEFAULT_DATABASE_COLUMN_DIALOG_LABELS, ...labels };
+  const tl = { ...DEFAULT_DATABASE_COLUMN_TYPE_LABELS, ...typeLabels };
+  const cl = { ...DEFAULT_COLUMN_CONFIG_LABELS, ...configLabels };
+  const editing = Boolean(column);
+  const [name, setName] = useState("");
+  const [type, setType] = useState("text");
+  const [options, setOptions] = useState([]);
+  const [optionDraft, setOptionDraft] = useState("");
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
+  const [relation, setRelation] = useState(NO_RELATION);
+  const [lookup, setLookup] = useState(NO_LOOKUP);
+  const [rollup, setRollup] = useState(NO_ROLLUP);
+  useEffect(() => {
+    if (!open) return;
+    setName(column?.name ?? "");
+    setType(column?.type ?? "text");
+    setOptions(column?.options ?? []);
+    setOptionDraft("");
+    setConfirmingDelete(false);
+    setRelation(NO_RELATION);
+    setLookup(column?.lookup ? { ...column.lookup } : NO_LOOKUP);
+    setRollup(
+      column?.rollup ? {
+        relation: column.rollup.relation,
+        column: column.rollup.column ?? "",
+        op: column.rollup.op ?? "count"
+      } : NO_ROLLUP
+    );
+  }, [open, column]);
+  const addOption = () => {
+    const option = optionDraft.trim();
+    if (option && !options.some((o) => o.toLowerCase() === option.toLowerCase())) {
+      setOptions([...options, option]);
+    }
+    setOptionDraft("");
+  };
+  const pendingOptions = optionDraft.trim() ? [...options, optionDraft.trim()] : options;
+  const missingOptions = type === "select" && pendingOptions.length === 0;
+  const canSave = name.trim().length > 0 && !missingOptions && configComplete(type, editing, relation, lookup, rollup) && !isSaving;
+  const submit = (e) => {
+    e.preventDefault();
+    if (!canSave) return;
+    const draft = {
+      name: name.trim(),
+      type,
+      options: type === "select" ? Array.from(new Set(pendingOptions)) : null
+    };
+    if (type === "relation" && !editing)
+      draft.relation = {
+        database_id: relation.database_id,
+        two_way: relation.two_way,
+        pair_name: relation.two_way ? relation.pair_name.trim() || null : null
+      };
+    if (type === "lookup") draft.lookup = { ...lookup };
+    if (type === "rollup")
+      draft.rollup = {
+        relation: rollup.relation,
+        op: rollup.op,
+        column: rollup.op === "count" ? null : rollup.column
+      };
+    onSave(draft);
+  };
+  const onOptionKey = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addOption();
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-md", "data-testid": "database-column-dialog", children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: editing ? l.editTitle : l.addTitle }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: editing ? l.editDescription : l.addDescription })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "database-column-name", children: l.name }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "database-column-name",
+          autoFocus: true,
+          value: name,
+          maxLength: 200,
+          placeholder: l.namePlaceholder,
+          onChange: (e) => setName(e.target.value),
+          "data-testid": "database-column-name"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { children: l.type }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: type,
+          onValueChange: (v) => setType(v),
+          disabled: editing,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { "data-testid": "database-column-type", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: DATABASE_COLUMN_TYPES.map((t) => {
+              const Icon = COLUMN_TYPE_ICONS[t];
+              return /* @__PURE__ */ jsx(SelectItem, { value: t, "data-testid": `database-column-type-${t}`, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Icon, { className: "size-4 text-muted-foreground" }),
+                tl[t]
+              ] }) }, t);
+            }) })
+          ]
+        }
+      ),
+      editing && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: l.typeFixed })
+    ] }),
+    type === "select" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "database-column-option", children: l.options }),
+      options.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", "data-testid": "database-column-options", children: options.map((option) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx(SelectChip, { value: option }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": l.removeOption(option),
+            onClick: () => setOptions(options.filter((o) => o !== option)),
+            className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+          }
+        )
+      ] }, option)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "database-column-option",
+            value: optionDraft,
+            maxLength: 200,
+            placeholder: l.optionPlaceholder,
+            onChange: (e) => setOptionDraft(e.target.value),
+            onKeyDown: onOptionKey,
+            "data-testid": "database-column-option-input"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: addOption,
+            disabled: !optionDraft.trim(),
+            children: l.addOption
+          }
+        )
+      ] }),
+      missingOptions && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: l.needsOptions })
+    ] }),
+    type === "relation" && /* @__PURE__ */ jsx(
+      RelationFields,
+      {
+        draft: relation,
+        onChange: setRelation,
+        databases,
+        databaseId,
+        databaseName,
+        editing,
+        column,
+        labels: cl
+      }
+    ),
+    type === "lookup" && /* @__PURE__ */ jsx(
+      LookupFields,
+      {
+        draft: lookup,
+        onChange: setLookup,
+        columns,
+        databases,
+        databaseId,
+        labels: cl
+      }
+    ),
+    type === "rollup" && /* @__PURE__ */ jsx(
+      RollupFields,
+      {
+        draft: rollup,
+        onChange: setRollup,
+        columns,
+        databases,
+        databaseId,
+        labels: cl
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-red-text", "data-testid": "database-column-error", children: error }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row items-center gap-2 sm:justify-between", children: [
+      editing && onDelete ? confirmingDelete ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: l.confirmDelete }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "destructive",
+            size: "sm",
+            onClick: onDelete,
+            "data-testid": "database-column-delete-confirm",
+            children: l.delete
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setConfirmingDelete(true),
+          className: "gap-1.5 text-red-text",
+          "data-testid": "database-column-delete",
+          children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+            l.delete
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsxs("span", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: l.cancel }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canSave, "data-testid": "database-column-save", children: isSaving ? l.saving : editing ? l.save : l.add })
+      ] })
+    ] })
+  ] }) }) });
+}
+var DEFAULT_DATABASE_LIST_LABELS = {
+  title: "Databases",
+  subtitle: "Tables your team keeps and searches \u2014 a client database, billing records, precedents.",
+  newDatabase: "New database",
+  importSpreadsheet: "Import spreadsheet",
+  importing: "Importing\u2026",
+  ownGroup: "In this workspace",
+  sharedGroup: "Shared with everyone",
+  readOnly: "Read-only",
+  rows: (n) => `${n.toLocaleString()} row${n === 1 ? "" : "s"}`,
+  columns: (n) => `${n} column${n === 1 ? "" : "s"}`,
+  emptyTitle: "No databases yet",
+  emptyMessage: "Start from a blank table, or import a spreadsheet (.xlsx or .csv) \u2014 its columns and their types come with it.",
+  loading: "Loading databases\u2026"
+};
+var SPREADSHEET_ACCEPT2 = ".csv,.xlsx,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+function DatabaseCard({
+  database,
+  onOpen,
+  l
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onOpen,
+      "data-testid": `database-card-${database.id}`,
+      className: cn(
+        "flex min-h-32 flex-col gap-2 rounded-lg border border-border bg-background p-4 text-left transition-colors",
+        "hover:border-primary/40 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex w-full items-start gap-2", children: [
+          /* @__PURE__ */ jsx(FileSpreadsheet, { className: "mt-0.5 size-5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: database.name }),
+          !database.editable && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Eye, { className: "size-3" }),
+            l.readOnly
+          ] })
+        ] }),
+        database.description && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm text-muted-foreground", children: database.description }),
+        /* @__PURE__ */ jsxs("span", { className: "mt-auto flex w-full items-center gap-3 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: l.rows(database.row_count) }),
+          /* @__PURE__ */ jsx("span", { children: l.columns(database.columns.length) }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto flex items-center gap-1", "aria-hidden": true, children: database.columns.slice(0, 6).map((c) => {
+            const Icon = COLUMN_TYPE_ICONS[c.type];
+            return /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }, c.id);
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+function DatabaseList({
+  databases,
+  onOpen,
+  onNew,
+  onImport,
+  isImporting = false,
+  isLoading = false,
+  labels
+}) {
+  const l = { ...DEFAULT_DATABASE_LIST_LABELS, ...labels };
+  const fileInput = useRef(null);
+  const own = databases.filter((d) => d.editable);
+  const shared = databases.filter((d) => !d.editable);
+  const onFile = (e) => {
+    const file = e.target.files?.[0];
+    if (file) onImport?.(file);
+    e.target.value = "";
+  };
+  const actions = /* @__PURE__ */ jsxs("span", { className: "flex gap-2", children: [
+    onImport && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        onClick: () => fileInput.current?.click(),
+        disabled: isImporting,
+        className: "gap-1.5",
+        "data-testid": "database-import",
+        children: [
+          /* @__PURE__ */ jsx(Upload, { className: "size-4" }),
+          isImporting ? l.importing : l.importSpreadsheet
+        ]
+      }
+    ),
+    onNew && /* @__PURE__ */ jsxs(Button, { onClick: onNew, className: "gap-1.5", "data-testid": "database-new", children: [
+      /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+      l.newDatabase
+    ] })
+  ] });
+  const grid = (items) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3", children: items.map((d) => /* @__PURE__ */ jsx(DatabaseCard, { database: d, onOpen: () => onOpen(d), l }, d.id)) });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-2 sm:p-4", "data-testid": "database-list", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: l.title }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: l.subtitle })
+      ] }),
+      actions
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: l.loading }) : databases.length === 0 ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col items-center gap-2 rounded-lg border border-dashed border-border px-6 py-12 text-center",
+        "data-testid": "database-list-empty",
+        children: [
+          /* @__PURE__ */ jsx(FileSpreadsheet, { className: "size-8 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium", children: l.emptyTitle }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: l.emptyMessage })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      own.length > 0 && /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+        shared.length > 0 && /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: l.ownGroup }),
+        grid(own)
+      ] }),
+      shared.length > 0 && /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", "data-testid": "database-list-shared", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: l.sharedGroup }),
+        grid(shared)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInput,
+        type: "file",
+        accept: SPREADSHEET_ACCEPT2,
+        className: "hidden",
+        onChange: onFile,
+        "data-testid": "database-import-input"
+      }
+    )
+  ] });
+}
+var DEFAULT_NEW_DATABASE_DIALOG_LABELS = {
+  title: "New database",
+  description: "A table your workspace keeps: add columns of the kinds you need, then rows.",
+  name: "Name",
+  namePlaceholder: "e.g. Client database",
+  about: "Description",
+  aboutPlaceholder: "Optional: what it holds and who keeps it",
+  cancel: "Cancel",
+  create: "Create",
+  creating: "Creating\u2026"
+};
+function NewDatabaseDialog({
+  open,
+  onOpenChange,
+  onCreate,
+  isCreating = false,
+  error,
+  labels
+}) {
+  const l = { ...DEFAULT_NEW_DATABASE_DIALOG_LABELS, ...labels };
+  const [name, setName] = useState("");
+  const [about, setAbout] = useState("");
+  useEffect(() => {
+    if (open) {
+      setName("");
+      setAbout("");
+    }
+  }, [open]);
+  const submit = (e) => {
+    e.preventDefault();
+    if (!name.trim() || isCreating) return;
+    onCreate({ name: name.trim(), description: about.trim() || null });
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-md", "data-testid": "new-database-dialog", children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: l.title }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: l.description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "new-database-name", children: l.name }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "new-database-name",
+          autoFocus: true,
+          value: name,
+          maxLength: 200,
+          placeholder: l.namePlaceholder,
+          onChange: (e) => setName(e.target.value),
+          "data-testid": "new-database-name"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "new-database-about", children: l.about }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "new-database-about",
+          value: about,
+          maxLength: 2e3,
+          rows: 2,
+          placeholder: l.aboutPlaceholder,
+          onChange: (e) => setAbout(e.target.value),
+          "data-testid": "new-database-description"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-red-text", children: error }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: l.cancel }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          disabled: !name.trim() || isCreating,
+          "data-testid": "new-database-create",
+          children: isCreating ? l.creating : l.create
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+export { ADD_COLUMN_COL_ID, COLUMN_TYPE_ICONS, COMPUTED_COLUMN_TYPES, DATABASE_COLUMN_TYPES, DATABASE_ROLLUP_OPS, DEFAULT_COLUMN_CONFIG_LABELS, DEFAULT_DATABASE_COLUMN_DIALOG_LABELS, DEFAULT_DATABASE_COLUMN_LABELS, DEFAULT_DATABASE_COLUMN_TYPE_LABELS, DEFAULT_DATABASE_LIST_LABELS, DEFAULT_DATABASE_ROW_DETAIL_LABELS, DEFAULT_DATABASE_TABLE_LABELS, DEFAULT_DATABASE_TOOLBAR_LABELS, DEFAULT_NEW_DATABASE_DIALOG_LABELS, DEFAULT_PICK_CELL_EDITOR_LABELS, DatabaseColumnDialog, DatabaseList, DatabaseRowDetail, DatabaseTable, DatabaseToolbar, LINK_COLUMN_TYPES, LinkChip, LinkChipsCell, LookupCell, NewDatabaseDialog, OPEN_ROW_COL_ID, PersonCell, PersonChip, PickCellEditor, SelectCellEditor, SelectChip, canEditColumn, cellIds, cellList, columnWidth, compareCells, createDatabaseColumns, formatCell, formatDateValue, formatLookupValue, formatNumberValue, isComputedColumn, optionTone, rowTitle, sameCellValue, titleOf, toApiValue };
+//# sourceMappingURL=chunk-PTYERKEU.js.map
+//# sourceMappingURL=chunk-PTYERKEU.js.map