@abraca/nuxt 1.6.0 → 1.8.0

package/dist/runtime/components/renderers/table/ATableHierarchyMode.d.vue.ts

@@ -0,0 +1,26 @@
+import type { useTableView } from '../../../composables/useTableView.js';
+import type { AbracadabraLocale } from '../../../locale.js';
+type TableLabels = AbracadabraLocale['renderers']['table'];
+type __VLS_Props = {
+    tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
+    tableView: ReturnType<typeof useTableView>;
+    states: Array<Record<string, any>>;
+    myClientId: number;
+    setLocalState: (state: Record<string, any>) => void;
+    editable?: boolean;
+    labels?: Partial<TableLabels>;
+};
+declare function addColumn(): void;
+declare function addRow(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    addColumn: typeof addColumn;
+    addRow: typeof addRow;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openNode: (id: string, label: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenNode?: ((id: string, label: string) => any) | undefined;
+}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/ATableHierarchyMode.vue

@@ -0,0 +1,662 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { useTouchDrag } from "../../../composables/useTouchDrag";
+import { DEFAULT_LOCALE } from "../../../locale";
+import ATableColumnHeader from "./ATableColumnHeader.vue";
+import ATableCell from "./cells/ATableCell.vue";
+const props = defineProps({
+  tree: { type: null, required: true },
+  tableView: { type: null, required: true },
+  states: { type: Array, required: true },
+  myClientId: { type: Number, required: true },
+  setLocalState: { type: Function, required: true },
+  editable: { type: Boolean, required: false, default: true },
+  labels: { type: Object, required: false }
+});
+const emit = defineEmits(["openNode"]);
+const labels = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.table,
+  ...props.labels ?? {}
+}));
+const INTERNAL_META_KEYS = /* @__PURE__ */ new Set([
+  "_metaFields",
+  "_metaInitialized",
+  "coverUploadId",
+  "coverDocId",
+  "coverMimeType",
+  "geoType",
+  "geoLat",
+  "geoLng",
+  "icon",
+  "color",
+  "geoDescription"
+]);
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function camelToTitle(s) {
+  return s.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase());
+}
+const columns = computed(
+  () => props.tree.childrenOf(null).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+);
+const orderedColumns = computed(() => {
+  const order = props.tableView.columnOrder.value;
+  if (!order.length) return columns.value;
+  const colMap = new Map(columns.value.map((c) => [c.id, c]));
+  const ordered = [];
+  for (const id of order) {
+    const col = colMap.get(id);
+    if (col) {
+      ordered.push(col);
+      colMap.delete(id);
+    }
+  }
+  for (const col of colMap.values()) ordered.push(col);
+  return ordered;
+});
+const colChildren = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const col of columns.value) {
+    map.set(col.id, props.tree.childrenOf(col.id).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+  }
+  return map;
+});
+const rowCount = computed(
+  () => Math.max(0, ...columns.value.map((c) => colChildren.value.get(c.id)?.length ?? 0))
+);
+function getCellEntry(colId, rowIdx) {
+  return colChildren.value.get(colId)?.[rowIdx];
+}
+function getRowRep(rowIdx) {
+  for (const col of columns.value) {
+    const entry = getCellEntry(col.id, rowIdx);
+    if (entry) return entry;
+  }
+  return void 0;
+}
+const allCellEntries = computed(() => {
+  const result = [];
+  for (const children of colChildren.value.values()) result.push(...children);
+  return result;
+});
+const metaColumns = computed(() => {
+  const colIds = new Set(columns.value.map((c) => c.id));
+  const keys = /* @__PURE__ */ new Set();
+  for (const col of columns.value) {
+    const children = colChildren.value.get(col.id) ?? [];
+    for (const cell of children) {
+      if (!cell.meta) continue;
+      for (const key of Object.keys(cell.meta)) {
+        if (INTERNAL_META_KEYS.has(key)) continue;
+        if (UUID_RE.test(key)) continue;
+        if (colIds.has(key)) continue;
+        keys.add(key);
+      }
+    }
+  }
+  return [...keys].sort().map((key) => ({
+    id: `__meta_${key}`,
+    label: camelToTitle(key),
+    metaKey: key,
+    metaType: props.tableView.inferColumnType(allCellEntries.value, key)
+  }));
+});
+const TYPE_MIN_WIDTHS = {
+  text: 180,
+  number: 100,
+  date: 150,
+  datetime: 170,
+  select: 130,
+  multiselect: 160,
+  tags: 160,
+  toggle: 80,
+  rating: 140,
+  url: 180,
+  color: 100,
+  colorPicker: 100,
+  slider: 150,
+  members: 140,
+  priority: 130,
+  status: 130
+};
+function getDocColumnWidth(colId) {
+  return props.tableView.columnWidths.value[colId] ?? 180;
+}
+function getMetaColumnWidth(mc) {
+  return props.tableView.columnWidths.value[mc.id] ?? TYPE_MIN_WIDTHS[mc.metaType] ?? 140;
+}
+function getCellValue(colId, rowIdx) {
+  const entry = getCellEntry(colId, rowIdx);
+  return entry?.label && entry.label !== "Untitled" ? entry.label : "";
+}
+function getMetaCellValue(rowIdx, metaKey) {
+  for (const col of columns.value) {
+    const entry = getCellEntry(col.id, rowIdx);
+    if (entry?.meta?.[metaKey] !== void 0) return entry.meta[metaKey];
+  }
+  return null;
+}
+function setCellValue(colId, rowIdx, value) {
+  if (!props.editable) return;
+  const str = typeof value === "string" ? value.trim() : String(value ?? "");
+  const entry = getCellEntry(colId, rowIdx);
+  if (entry) {
+    props.tree.renameEntry(entry.id, str || "Untitled");
+  } else {
+    props.tree.createChild(colId, str || "Untitled");
+  }
+}
+function setMetaCellValue(rowIdx, metaKey, value) {
+  if (!props.editable) return;
+  const rep = getRowRep(rowIdx);
+  if (rep) props.tree.updateMeta(rep.id, { [metaKey]: value });
+}
+function addColumn() {
+  if (!props.editable) return;
+  props.tree.createChild(null, labels.value.column || "New Column");
+}
+function deleteColumn(col) {
+  if (!props.editable) return;
+  props.tree.deleteEntry(col.id);
+}
+function deleteMetaColumn(metaKey) {
+  if (!props.editable) return;
+  for (const col of columns.value) {
+    const children = colChildren.value.get(col.id) ?? [];
+    for (const cell of children) {
+      if (cell.meta?.[metaKey] !== void 0) {
+        const newMeta = { ...cell.meta };
+        delete newMeta[metaKey];
+        props.tree.treeMap.set(cell.id, { ...props.tree.treeMap.get(cell.id), meta: newMeta });
+      }
+    }
+  }
+}
+function addRow() {
+  if (!props.editable) return;
+  if (!columns.value[0]) return;
+  props.tree.createChild(columns.value[0].id, "");
+}
+function deleteRow(rowIdx) {
+  if (!props.editable) return;
+  for (const col of columns.value) {
+    const entry = getCellEntry(col.id, rowIdx);
+    if (entry) props.tree.deleteEntry(entry.id);
+  }
+}
+const editingCell = ref(null);
+function startEditDocCol(rowIdx, col) {
+  if (!props.editable) return;
+  editingCell.value = { rowIdx, colId: col.id };
+  props.setLocalState({ "table:editing": { rowIdx, fieldId: col.id } });
+}
+function startEditMetaCol(rowIdx, mc) {
+  if (!props.editable) return;
+  editingCell.value = { rowIdx, colId: mc.id, metaKey: mc.metaKey };
+  props.setLocalState({ "table:editing": { rowIdx, fieldId: mc.id } });
+}
+function stopEdit() {
+  editingCell.value = null;
+  props.setLocalState({ "table:editing": null });
+}
+function onDocCellUpdate(colId, rowIdx, value) {
+  setCellValue(colId, rowIdx, value);
+}
+function onMetaCellUpdate(rowIdx, metaKey, value) {
+  setMetaCellValue(rowIdx, metaKey, value);
+}
+function renameColumn(colId, label) {
+  if (!props.editable) return;
+  props.tree.renameEntry(colId, label);
+}
+function onResizeStart(e, colId) {
+  if (!props.editable) return;
+  const startX = e.clientX;
+  const startWidth = props.tableView.columnWidths.value[colId] ?? 120;
+  props.setLocalState({ "table:resizing": colId });
+  function onMove(ev) {
+    const newWidth = Math.max(80, startWidth + (ev.clientX - startX));
+    props.tableView.setColumnWidth(colId, newWidth);
+  }
+  function onUp() {
+    document.removeEventListener("pointermove", onMove);
+    document.removeEventListener("pointerup", onUp);
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+    props.setLocalState({ "table:resizing": null });
+  }
+  document.addEventListener("pointermove", onMove);
+  document.addEventListener("pointerup", onUp);
+  document.body.style.userSelect = "none";
+  document.body.style.cursor = "col-resize";
+}
+function rowIdxFromDragId(dragId) {
+  return Number.parseInt(dragId.replace("row-", ""), 10);
+}
+const {
+  dragId: rowDragId,
+  dragOverId: rowDragOverId,
+  handlePointerDown: handleRowPointerDown
+} = useTouchDrag({
+  idAttr: "data-drag-id",
+  onDragStart: (dragId) => {
+    if (!props.editable) return;
+    props.setLocalState({ "table:dragging": rowIdxFromDragId(dragId) });
+  },
+  onDragEnd: () => {
+    props.setLocalState({ "table:dragging": null });
+  },
+  onDrop: (srcDragId, targetDragId) => {
+    if (!props.editable) return;
+    const srcIdx = rowIdxFromDragId(srcDragId);
+    const targetIdx = rowIdxFromDragId(targetDragId);
+    if (srcIdx === targetIdx) return;
+    for (const col of columns.value) {
+      const children = colChildren.value.get(col.id) ?? [];
+      const srcEntry = children[srcIdx];
+      if (!srcEntry) continue;
+      const prev = children[targetIdx - (targetIdx > srcIdx ? 0 : 1)];
+      const next = children[targetIdx + (targetIdx > srcIdx ? 1 : 0)];
+      let newOrder;
+      if (!prev && !next) newOrder = Date.now();
+      else if (!prev) newOrder = next.order - 1e3;
+      else if (!next) newOrder = prev.order + 1e3;
+      else newOrder = (prev.order + next.order) / 2;
+      props.tree.moveEntry(srcEntry.id, col.id, newOrder);
+    }
+    props.setLocalState({ "table:dragging": null });
+  }
+});
+const {
+  dragId: colDragId,
+  dragOverId: colDragOverId,
+  handlePointerDown: handleColPointerDown
+} = useTouchDrag({
+  idAttr: "data-col-drag-id",
+  onDrop: (srcId, targetId) => {
+    if (!props.editable) return;
+    if (srcId === targetId) return;
+    const cols = orderedColumns.value;
+    const srcIdx = cols.findIndex((c) => c.id === srcId);
+    const targetIdx = cols.findIndex((c) => c.id === targetId);
+    if (srcIdx === -1 || targetIdx === -1) return;
+    const reordered = [...cols];
+    const [moved] = reordered.splice(srcIdx, 1);
+    reordered.splice(targetIdx, 0, moved);
+    props.tableView.setColumnOrder(reordered.map((c) => c.id));
+    const prev = reordered[targetIdx - 1];
+    const next = reordered[targetIdx + 1];
+    let newOrder;
+    if (!prev && !next) newOrder = Date.now();
+    else if (!prev) newOrder = next.order - 1e3;
+    else if (!next) newOrder = prev.order + 1e3;
+    else newOrder = (prev.order + next.order) / 2;
+    props.tree.moveEntry(srcId, null, newOrder);
+  }
+});
+function handleSort(key, dir) {
+  if (dir === "clear") props.tableView.setSort(void 0);
+  else props.tableView.setSort(key, dir);
+}
+const ctxCell = ref(null);
+const ctxPos = ref({ x: 0, y: 0 });
+const showCtx = ref(false);
+function onCellContextMenu(e, entry) {
+  if (!entry) return;
+  e.preventDefault();
+  ctxCell.value = entry;
+  ctxPos.value = { x: e.clientX, y: e.clientY };
+  showCtx.value = true;
+}
+useEventListener(window, "pointerdown", () => {
+  showCtx.value = false;
+});
+let longPressTimer = null;
+function startLongPress(e, rowIdx) {
+  const entry = getRowRep(rowIdx);
+  if (!entry) return;
+  longPressTimer = setTimeout(() => {
+    const touch = e.touches[0];
+    if (touch) {
+      ctxCell.value = entry;
+      ctxPos.value = { x: touch.clientX, y: touch.clientY };
+      showCtx.value = true;
+    }
+    longPressTimer = null;
+  }, 500);
+}
+function cancelLongPress() {
+  if (longPressTimer) {
+    clearTimeout(longPressTimer);
+    longPressTimer = null;
+  }
+}
+const ctxItems = computed(() => {
+  if (!ctxCell.value) return [];
+  const cell = ctxCell.value;
+  return [
+    [
+      { label: labels.value.open, icon: "i-lucide-external-link", onSelect: () => emit("openNode", cell.id, cell.label) },
+      { label: labels.value.rename, icon: "i-lucide-pencil", onSelect: () => {
+        for (const col of columns.value) {
+          const children = colChildren.value.get(col.id) ?? [];
+          const rowIdx = children.findIndex((c) => c.id === cell.id);
+          if (rowIdx !== -1) {
+            startEditDocCol(rowIdx, col);
+            break;
+          }
+        }
+      } },
+      { label: labels.value.duplicate, icon: "i-lucide-copy", onSelect: () => props.tree.duplicateEntry(cell.id) }
+    ],
+    [
+      { label: labels.value.delete, icon: "i-lucide-trash-2", color: "error", onSelect: () => props.tree.deleteEntry(cell.id) }
+    ]
+  ];
+});
+function cellEditor(rowIdx, fieldId) {
+  return props.states.filter((s) => s.clientId !== props.myClientId).find(
+    (s) => s["table:editing"]?.rowIdx === rowIdx && s["table:editing"]?.fieldId === fieldId
+  );
+}
+function onRowPointerEnter(rowIdx) {
+  if (rowDragId.value) return;
+  props.setLocalState({ "table:hovering": rowIdx });
+}
+function onRowPointerLeave() {
+  if (rowDragId.value) return;
+  props.setLocalState({ "table:hovering": null });
+}
+function rowHoverers(rowIdx) {
+  const result = [];
+  for (const s of props.states) {
+    if (s.clientId === props.myClientId) continue;
+    if (s["table:hovering"] === rowIdx && s.user) {
+      result.push({ name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return result;
+}
+function rowEditors(rowIdx) {
+  const result = [];
+  for (const s of props.states) {
+    if (s.clientId === props.myClientId) continue;
+    if (s["table:editing"]?.rowIdx === rowIdx && s.user) {
+      result.push({ name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return result;
+}
+function remoteResizeColor(colId) {
+  for (const s of props.states) {
+    if (s.clientId === props.myClientId) continue;
+    if (s["table:resizing"] === colId && s.user) {
+      return s.user.color ?? null;
+    }
+  }
+  return null;
+}
+onBeforeUnmount(() => {
+  props.setLocalState({
+    "table:editing": null,
+    "table:hovering": null,
+    "table:dragging": null,
+    "table:resizing": null
+  });
+});
+defineExpose({ addColumn, addRow });
+</script>
+
+<template>
+  <div class="flex-1 overflow-auto">
+    <!-- Empty state -->
+    <div
+      v-if="columns.length === 0"
+      class="flex flex-col items-center justify-center h-full gap-3 text-center py-12"
+    >
+      <UIcon
+        name="i-lucide-table"
+        class="size-10 text-(--ui-text-dimmed)"
+      />
+      <p class="text-sm text-(--ui-text-muted)">
+        {{ labels.noRows }}
+      </p>
+      <UButton
+        v-if="editable"
+        icon="i-lucide-plus"
+        :label="labels.addColumn"
+        size="sm"
+        @click="addColumn"
+      />
+    </div>
+
+    <template v-else>
+      <table
+        class="text-sm border-collapse"
+        style="table-layout: fixed; min-width: 100%;"
+      >
+        <thead class="sticky top-0 bg-(--ui-bg) z-10">
+          <tr class="border-b border-(--ui-border)">
+            <th class="w-0 p-0" />
+            <th class="w-6 px-1">
+              <!-- grip -->
+            </th>
+            <th class="text-left px-2 py-2 text-xs font-medium text-(--ui-text-muted) w-20">
+              #
+            </th>
+            <!-- Document columns -->
+            <ATableColumnHeader
+              v-for="col in orderedColumns"
+              :key="col.id"
+              :column-id="col.id"
+              :label="col.label"
+              :width="getDocColumnWidth(col.id)"
+              :sort-key="tableView.sortKey.value"
+              :sort-dir="tableView.sortDir.value"
+              :can-rename="editable !== false"
+              :can-delete="editable !== false"
+              :can-drag="editable !== false"
+              :data-col-drag-id="col.id"
+              :class="[
+  colDragOverId === col.id ? 'border-l-2 border-(--ui-primary)' : '',
+  colDragId === col.id ? 'opacity-30' : ''
+]"
+              :style="remoteResizeColor(col.id) ? { backgroundColor: remoteResizeColor(col.id) + '20' } : {}"
+              @rename="renameColumn(col.id, $event)"
+              @delete="deleteColumn(col)"
+              @sort="handleSort(col.id, $event)"
+              @resize-start="onResizeStart($event, col.id)"
+              @drag-pointer-down="handleColPointerDown($event, col.id)"
+            />
+            <!-- Auto-detected meta columns -->
+            <ATableColumnHeader
+              v-for="mc in metaColumns"
+              :key="mc.id"
+              :column-id="mc.id"
+              :label="mc.label"
+              :width="getMetaColumnWidth(mc)"
+              :sort-key="tableView.sortKey.value"
+              :sort-dir="tableView.sortDir.value"
+              :can-rename="false"
+              :can-delete="editable !== false"
+              :can-drag="false"
+              @delete="deleteMetaColumn(mc.metaKey)"
+              @sort="handleSort(mc.id, $event)"
+            />
+          </tr>
+        </thead>
+        <TransitionGroup
+          name="trow"
+          tag="tbody"
+        >
+          <tr
+            v-for="idx in rowCount"
+            :key="getRowRep(idx - 1)?.id ?? `row-${idx}`"
+            :data-drag-id="`row-${idx - 1}`"
+            class="group hover:bg-(--ui-bg-elevated)"
+            :class="[
+  rowDragOverId === `row-${idx - 1}` ? 'border-t-2 border-(--ui-primary)' : 'border-b border-(--ui-border)',
+  rowDragId === `row-${idx - 1}` ? 'opacity-30' : ''
+]"
+            @contextmenu="editable !== false && onCellContextMenu($event, getRowRep(idx - 1))"
+            @touchstart.passive="editable !== false && startLongPress($event, idx - 1)"
+            @touchend="cancelLongPress"
+            @touchmove="cancelLongPress"
+            @pointerenter="onRowPointerEnter(idx - 1)"
+            @pointerleave="onRowPointerLeave"
+          >
+            <td class="w-0 p-0 relative overflow-visible">
+              <div
+                v-if="rowEditors(idx - 1).length"
+                class="absolute left-0 top-0 bottom-0 w-0.5 rounded-full z-10"
+                :style="{ background: rowEditors(idx - 1)[0].color }"
+              />
+              <span
+                v-if="rowHoverers(idx - 1).length"
+                class="absolute -top-2.5 left-6 text-[10px] px-1 rounded text-white leading-tight z-10 whitespace-nowrap pointer-events-none"
+                :style="{ backgroundColor: rowHoverers(idx - 1)[0].color }"
+              >
+                {{ rowHoverers(idx - 1).map((h) => h.name).join(", ") }}
+              </span>
+            </td>
+            <td
+              class="px-1 py-1.5 text-(--ui-text-dimmed) opacity-0 group-hover:opacity-60 cursor-grab w-6 touch-none"
+              @pointerdown="handleRowPointerDown($event, `row-${idx - 1}`)"
+            >
+              <div class="flex items-center justify-center">
+                <UIcon
+                  name="i-lucide-grip-vertical"
+                  class="size-4"
+                />
+              </div>
+            </td>
+            <td class="px-2 py-1.5 text-xs text-(--ui-text-dimmed) select-none w-20">
+              <div class="flex items-center gap-0.5">
+                <span class="w-4 text-center">{{ idx }}</span>
+                <UTooltip
+                  v-if="getRowRep(idx - 1)"
+                  :text="labels.openAsSlideover"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-external-link"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    class="opacity-0 group-hover:opacity-100"
+                    @click="emit('openNode', getRowRep(idx - 1).id, getRowRep(idx - 1).label)"
+                  />
+                </UTooltip>
+                <UTooltip
+                  v-if="editable !== false"
+                  :text="labels.deleteRow"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-trash-2"
+                    size="xs"
+                    variant="ghost"
+                    color="error"
+                    class="opacity-0 group-hover:opacity-100"
+                    @click="deleteRow(idx - 1)"
+                  />
+                </UTooltip>
+              </div>
+            </td>
+            <!-- Document column cells -->
+            <td
+              v-for="col in orderedColumns"
+              :key="col.id"
+              class="px-1 py-0.5"
+              :style="
+  cellEditor(idx - 1, col.id) ? { outline: `2px solid ${cellEditor(idx - 1, col.id).user?.color}` } : {}
+"
+            >
+              <ATableCell
+                :value="getCellValue(col.id, idx - 1)"
+                meta-type="text"
+                :editing="editingCell?.rowIdx === idx - 1 && editingCell?.colId === col.id"
+                :column="{ id: col.id, type: 'label', label: col.label }"
+                @update:model-value="onDocCellUpdate(col.id, idx - 1, $event)"
+                @start-edit="startEditDocCol(idx - 1, col)"
+                @stop-edit="stopEdit"
+              />
+            </td>
+            <!-- Auto-detected meta column cells -->
+            <td
+              v-for="mc in metaColumns"
+              :key="mc.id"
+              class="px-1 py-0.5"
+              :style="
+  cellEditor(idx - 1, mc.id) ? { outline: `2px solid ${cellEditor(idx - 1, mc.id).user?.color}` } : {}
+"
+            >
+              <ATableCell
+                :value="getMetaCellValue(idx - 1, mc.metaKey)"
+                :meta-type="mc.metaType"
+                :editing="editingCell?.rowIdx === idx - 1 && editingCell?.colId === mc.id"
+                :column="{ id: mc.id, type: 'meta', metaKey: mc.metaKey, metaType: mc.metaType, label: mc.label }"
+                @update:model-value="onMetaCellUpdate(idx - 1, mc.metaKey, $event)"
+                @start-edit="startEditMetaCol(idx - 1, mc)"
+                @stop-edit="stopEdit"
+              />
+            </td>
+          </tr>
+        </TransitionGroup>
+        <tfoot v-if="editable !== false">
+          <tr>
+            <td :colspan="orderedColumns.length + metaColumns.length + 3">
+              <button
+                class="w-full text-left px-3 py-2 text-xs text-(--ui-text-dimmed) hover:bg-(--ui-bg-elevated) border-b border-(--ui-border) transition-colors"
+                @click="addRow"
+              >
+                + {{ labels.addRow }}
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </template>
+
+    <!-- Cell context menu -->
+    <Teleport
+      v-if="editable !== false"
+      to="body"
+    >
+      <div
+        v-if="showCtx && ctxItems.length"
+        class="fixed z-50 min-w-40 bg-(--ui-bg) border border-(--ui-border) rounded-lg shadow-xl py-1 text-sm"
+        :style="{ left: ctxPos.x + 'px', top: ctxPos.y + 'px' }"
+      >
+        <template
+          v-for="(group, gi) in ctxItems"
+          :key="gi"
+        >
+          <div
+            v-if="gi > 0"
+            class="my-1 border-t border-(--ui-border)"
+          />
+          <button
+            v-for="item in group"
+            :key="item.label"
+            class="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-(--ui-bg-elevated) text-left cursor-default"
+            :class="item.color === 'error' ? 'text-(--ui-color-error-500)' : 'text-(--ui-text)'"
+            @pointerdown.stop
+            @click="item.onSelect();
+  showCtx = false"
+          >
+            <UIcon
+              :name="item.icon"
+              class="size-3.5 shrink-0 opacity-70"
+            />
+            {{ item.label }}
+          </button>
+        </template>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.trow-move{transition:transform .25s ease}.trow-enter-active{transition:opacity .18s ease,transform .18s ease}.trow-enter-from{opacity:0;transform:translateY(-6px) scale(.97)}.trow-leave-active{transition:opacity .15s ease}.trow-leave-to{opacity:0}
+</style>