@arbidocs/blocks 0.4.77 → 0.4.79

package/dist/databases/index.js

@@ -3,9 +3,9 @@ import { GridView } from '../chunk-ZPLG7QYF.js';
 import '../chunk-SLSBJRWW.js';
 import { testIdOr } from '../chunk-7F6CBP3Z.js';
 import '../chunk-VUNV25KB.js';
-import { ChevronDown, CheckSquare, CalendarDays, Hash, Type, Check, Plus, ArrowLeft, FileSpreadsheet, Eye, Search, Trash2, MoreHorizontal, Upload, Download, X, Table2 } 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 } from '@arbidocs/react/ui';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Sigma, Search, ArrowUpRight, FileText, UserRound, ChevronDown, CheckSquare, CalendarDays, Hash, Type, X, Loader2, Check, Plus, ArrowLeft, FileSpreadsheet, Eye, Trash2, 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, Switch } from '@arbidocs/react/ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo } from 'react';
 
 // src/databases/column-types.ts
@@ -14,14 +14,34 @@ var DATABASE_COLUMN_TYPES = [
   "number",
   "date",
   "checkbox",
-  "select"
+  "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"
+  select: "Select",
+  person: "Person",
+  document: "Documents",
+  relation: "Relation",
+  lookup: "Lookup",
+  rollup: "Rollup"
 };
 var OPTION_TONES = [
   "bg-blue-bg text-blue-text",
@@ -36,7 +56,25 @@ function optionTone(option) {
   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() === "";
+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) {
@@ -49,15 +87,37 @@ function formatDateValue(value, locale) {
 function formatNumberValue(value, locale) {
   return value.toLocaleString(locale, { maximumFractionDigits: 6 });
 }
-function formatCell(value, type, locale) {
+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 (type === "number" && typeof value === "number") return formatNumberValue(value, locale);
+  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");
@@ -69,12 +129,299 @@ function toApiValue(value, type) {
   }
   return value;
 }
-function compareCells(a, b, type) {
+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") return Number(a) - Number(b);
-  return String(a).localeCompare(String(b), void 0, { sensitivity: "base", numeric: true });
+  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 });
+}
+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 }) {
+  return /* @__PURE__ */ jsx("span", { className: "flex h-full min-w-0 items-center gap-1 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
+}) {
+  const ids = cellIds(value);
+  if (ids.length === 0) return null;
+  return /* @__PURE__ */ jsx(ChipRow, { 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
+}) {
+  const values = cellList(value);
+  if (values.length === 0) return null;
+  return /* @__PURE__ */ jsx(ChipRow, { 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(
@@ -144,7 +491,8 @@ function SelectCellEditor(props) {
 }
 var DEFAULT_DATABASE_COLUMN_LABELS = {
   addColumn: "Add a column",
-  columnSettings: (name) => `${name} column settings`
+  columnSettings: (name) => `${name} column settings`,
+  computed: "Computed from a relation (read-only)"
 };
 var ADD_COLUMN_COL_ID = "__add_column";
 var COLUMN_TYPE_ICONS = {
@@ -152,24 +500,36 @@ var COLUMN_TYPE_ICONS = {
   number: Hash,
   date: CalendarDays,
   checkbox: CheckSquare,
-  select: ChevronDown
+  select: ChevronDown,
+  person: UserRound,
+  document: FileText,
+  relation: ArrowUpRight,
+  lookup: Search,
+  rollup: Sigma
 };
 var WIDTHS = {
   text: 220,
   number: 130,
   date: 140,
   checkbox: 110,
-  select: 160
+  select: 160,
+  person: 180,
+  document: 240,
+  relation: 240,
+  lookup: 200,
+  rollup: 130
 };
 function HeaderLabel({
   column,
   onEdit,
-  label
+  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",
       {
@@ -189,9 +549,22 @@ function HeaderLabel({
   ] });
 }
 function columnWidth(column) {
-  return Math.min(320, Math.max(WIDTHS[column.type], Math.round(column.name.length * 8) + 76));
+  const header = Math.round(column.name.length * 8) + 76 + (isComputedColumn(column) ? 16 : 0);
+  return Math.min(320, Math.max(WIDTHS[column.type], header));
 }
-function editorFor(column) {
+function canEdit(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 } };
@@ -205,11 +578,26 @@ function editorFor(column) {
         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) {
+function rendererFor(column, locale, sources) {
   switch (column.type) {
     case "checkbox":
       return {
@@ -225,16 +613,42 @@ function rendererFor(column, locale) {
         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, locale } = options;
+  const { readOnly, onEditColumn, onAddColumn, locale, sources } = options;
   const l = { ...DEFAULT_DATABASE_COLUMN_LABELS, ...options.labels };
   const defs = columns.map((column) => ({
     colId: column.id,
@@ -243,7 +657,7 @@ function createDatabaseColumns(columns, options = {}) {
     minWidth: 90,
     resizable: true,
     sortable: true,
-    editable: !readOnly,
+    editable: !readOnly && canEdit(column, sources),
     // The grid's own type inference must not second-guess the database's column type.
     cellDataType: false,
     headerComponentParams: {
@@ -252,6 +666,7 @@ function createDatabaseColumns(columns, options = {}) {
         {
           column,
           label: l.columnSettings(column.name),
+          computedLabel: l.computed,
           onEdit: !readOnly && onEditColumn ? () => onEditColumn(column) : void 0
         }
       )
@@ -263,14 +678,14 @@ function createDatabaseColumns(columns, options = {}) {
     valueSetter: (p) => {
       if (!p.data) return false;
       const next = toApiValue(p.newValue, column.type);
-      if (next === (p.oldValue ?? null)) return false;
+      if (sameCellValue(next, p.oldValue)) return false;
       p.data.values = { ...p.data.values, [column.id]: next };
       return true;
     },
-    comparator: (a, b) => compareCells(a, b, column.type),
-    getQuickFilterText: (p) => formatCell(p.value, column.type, locale),
-    ...editorFor(column),
-    ...rendererFor(column, locale)
+    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)
   }));
   if (!readOnly && onAddColumn) {
     defs.push({
@@ -302,6 +717,225 @@ function createDatabaseColumns(columns, options = {}) {
   }
   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 escapeHtml = (text) => text.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
 var DEFAULT_DATABASE_TABLE_LABELS = {
   newRow: "New row",
@@ -318,6 +952,7 @@ function DatabaseTable({
   onAddRow,
   onAddColumn,
   onEditColumn,
+  sources,
   onSelectionChange,
   selected,
   readOnly = false,
@@ -337,10 +972,11 @@ function DatabaseTable({
       readOnly,
       onEditColumn,
       onAddColumn,
+      sources,
       locale,
       labels: columnLabels
     }),
-    [columns, readOnly, onEditColumn, onAddColumn, locale, columnLabels]
+    [columns, readOnly, onEditColumn, onAddColumn, sources, locale, columnLabels]
   );
   const noColumns = columns.length === 0;
   const emptyState = {
@@ -660,25 +1296,45 @@ var DEFAULT_DATABASE_COLUMN_DIALOG_LABELS = {
   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
+  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 ?? "");
@@ -686,6 +1342,15 @@ function DatabaseColumnDialog({
     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();
@@ -696,15 +1361,29 @@ function DatabaseColumnDialog({
   };
   const pendingOptions = optionDraft.trim() ? [...options, optionDraft.trim()] : options;
   const missingOptions = type === "select" && pendingOptions.length === 0;
-  const canSave = name.trim().length > 0 && !missingOptions && !isSaving;
+  const canSave = name.trim().length > 0 && !missingOptions && configComplete(type, editing, relation, lookup, rollup) && !isSaving;
   const submit = (e) => {
     e.preventDefault();
     if (!canSave) return;
-    onSave({
+    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") {
@@ -795,6 +1474,41 @@ function DatabaseColumnDialog({
       ] }),
       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: [
@@ -1050,6 +1764,6 @@ function NewDatabaseDialog({
   ] }) }) });
 }
 
-export { ADD_COLUMN_COL_ID, COLUMN_TYPE_ICONS, DATABASE_COLUMN_TYPES, DEFAULT_DATABASE_COLUMN_DIALOG_LABELS, DEFAULT_DATABASE_COLUMN_LABELS, DEFAULT_DATABASE_COLUMN_TYPE_LABELS, DEFAULT_DATABASE_LIST_LABELS, DEFAULT_DATABASE_TABLE_LABELS, DEFAULT_DATABASE_TOOLBAR_LABELS, DEFAULT_NEW_DATABASE_DIALOG_LABELS, DatabaseColumnDialog, DatabaseList, DatabaseTable, DatabaseToolbar, NewDatabaseDialog, SelectCellEditor, SelectChip, columnWidth, compareCells, createDatabaseColumns, formatCell, formatDateValue, formatNumberValue, optionTone, toApiValue };
+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_TABLE_LABELS, DEFAULT_DATABASE_TOOLBAR_LABELS, DEFAULT_NEW_DATABASE_DIALOG_LABELS, DEFAULT_PICK_CELL_EDITOR_LABELS, DatabaseColumnDialog, DatabaseList, DatabaseTable, DatabaseToolbar, LINK_COLUMN_TYPES, LinkChip, LinkChipsCell, LookupCell, NewDatabaseDialog, PersonCell, PersonChip, PickCellEditor, SelectCellEditor, SelectChip, cellIds, cellList, columnWidth, compareCells, createDatabaseColumns, formatCell, formatDateValue, formatLookupValue, formatNumberValue, isComputedColumn, optionTone, sameCellValue, titleOf, toApiValue };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map