@abraca/nuxt 1.9.1 → 2.0.0

package/dist/runtime/components/renderers/ASheetsRenderer.client.vue

@@ -0,0 +1,865 @@
+<script setup>
+import { ref, computed, watch, inject, nextTick, onBeforeUnmount } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useMediaQuery } from "@vueuse/core";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { useNodePanelFollow } from "../../composables/useNodePanelFollow";
+import { treeUndoKey } from "../../composables/useTreeUndoManager";
+import { useSheetsView } from "../../composables/useSheetsView";
+import { useSheetsSelection } from "../../composables/useSheetsSelection";
+import { useSheetsClipboard } from "../../composables/useSheetsClipboard";
+import {
+  evaluateFormula,
+  formatFormulaResult,
+  FormulaError,
+  extractCellRefs,
+  adjustFormulaRefs
+} from "../../composables/useSheetsFormulas";
+import { useDocumentPermissions } from "../../composables/useDocumentPermissions";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import { DEFAULT_LOCALE } from "../../locale";
+import ASheetsToolbar from "./sheets/ASheetsToolbar.vue";
+import ASheetsGrid from "./sheets/ASheetsGrid.vue";
+import ASheetsMobileActionBar from "./sheets/ASheetsMobileActionBar.vue";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  followingUser: { type: [String, null], required: false, default: null },
+  labels: { type: Object, required: false }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.sheets,
+  ...config.public?.abracadabra?.locale?.renderers?.sheets ?? {},
+  ...props.labels ?? {}
+}));
+const { childProviderRef, childDoc: _childDoc, rootDoc, tree, connectedUsers, states, setLocalState } = useRendererBase(props);
+const { canWrite } = useDocumentPermissions(useAbracadabra().effectiveRole);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  isLoading: nodePanelLoading,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+useNodePanelFollow(openNodeId, openNodeLabel, openNode, closePanel, () => props.followingUser, states, setLocalState);
+const isMobile = useMediaQuery("(max-width: 640px)");
+const sheetsView = useSheetsView(tree, props.docId);
+const MIN_DISPLAY_COLS = 26;
+const MIN_DISPLAY_ROWS = 50;
+const columns = computed(() => tree.childrenOf(null));
+const dataRowCount = computed(() => {
+  let max = 0;
+  for (const col of columns.value) {
+    const count = tree.childrenOf(col.id).length;
+    if (count > max) max = count;
+  }
+  return max + 1;
+});
+const displayRowCount = computed(() => Math.max(dataRowCount.value, MIN_DISPLAY_ROWS));
+const columnPositions = computed(
+  () => sheetsView.getColumnPositions(columns.value, MIN_DISPLAY_COLS)
+);
+function getCellEntry(colIdx, rowIdx) {
+  const col = columns.value[colIdx];
+  if (!col) return void 0;
+  return tree.childrenOf(col.id)[rowIdx];
+}
+function getCellValue(colIdx, rowIdx) {
+  const entry = getCellEntry(colIdx, rowIdx);
+  if (!entry) return "";
+  return entry.label === "Untitled" ? "" : entry.label;
+}
+function childrenOfLive(parentId) {
+  const yMap = tree.treeMap.yMap?.value;
+  if (!yMap) return [];
+  const target = parentId === null ? props.docId : parentId;
+  const list = [];
+  yMap.forEach((v, id) => {
+    const raw = v && typeof v === "object" && "toJSON" in v && typeof v.toJSON === "function" && v._map !== void 0 ? v.toJSON() : v;
+    const pid = raw.parentId ?? null;
+    if (pid !== target) return;
+    list.push({
+      id,
+      label: raw.label || "Untitled",
+      parentId: pid,
+      order: raw.order ?? 0,
+      meta: raw.meta
+    });
+  });
+  list.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  return list;
+}
+function getCellComputedValue(colIdx, rowIdx) {
+  const entry = getCellEntry(colIdx, rowIdx);
+  if (!entry) return 0;
+  if (entry.meta?.number !== void 0 && entry.meta.number !== null) return entry.meta.number;
+  const label = entry.label === "Untitled" ? "" : entry.label;
+  const num = Number(label);
+  return label !== "" && !isNaN(num) ? num : label;
+}
+function makeFormulaCtx() {
+  return {
+    getCellValue: getCellComputedValue,
+    colLetterToIndex: sheetsView.colLetterToIndex,
+    indexToColLetter: sheetsView.indexToColLetter,
+    evaluating: /* @__PURE__ */ new Set()
+  };
+}
+function recalcFormulas() {
+  const ctx = makeFormulaCtx();
+  const cols = columns.value;
+  for (let colIdx = 0; colIdx < cols.length; colIdx++) {
+    const cells = tree.childrenOf(cols[colIdx].id);
+    for (let rowIdx = 0; rowIdx < cells.length; rowIdx++) {
+      const cell = cells[rowIdx];
+      const formula = cell.meta?.formula;
+      if (!formula) continue;
+      ctx.evaluating.clear();
+      ctx.evaluating.add(`${colIdx}:${rowIdx}`);
+      const result = evaluateFormula(formula, ctx);
+      ctx.evaluating.clear();
+      const display = formatFormulaResult(result);
+      if (cell.label !== display) tree.renameEntry(cell.id, display);
+      const numVal = result instanceof FormulaError ? void 0 : typeof result === "number" ? result : void 0;
+      if (cell.meta?.number !== numVal) tree.updateMeta(cell.id, { number: numVal });
+    }
+  }
+}
+function ensureCell(colIdx, rowIdx) {
+  let colsLive = childrenOfLive(null);
+  if (!colsLive[colIdx]) {
+    for (let i = colsLive.length; i <= colIdx; i++) {
+      tree.createChild(null, sheetsView.indexToColLetter(i));
+    }
+    colsLive = childrenOfLive(null);
+  }
+  const col = colsLive[colIdx];
+  if (!col) return "";
+  const cells = childrenOfLive(col.id);
+  const existing = cells[rowIdx];
+  if (existing) return existing.id;
+  for (let i = cells.length; i < rowIdx; i++) {
+    tree.createChild(col.id, "");
+  }
+  return tree.createChild(col.id, "");
+}
+function writeCellValue(colIdx, rowIdx, value) {
+  const cellId = ensureCell(colIdx, rowIdx);
+  if (!cellId) return;
+  if (value.startsWith("=")) {
+    const formulaText = value.slice(1);
+    const ctx = makeFormulaCtx();
+    ctx.evaluating.add(`${colIdx}:${rowIdx}`);
+    const result = evaluateFormula(formulaText, ctx);
+    const display = formatFormulaResult(result);
+    tree.renameEntry(cellId, display);
+    tree.updateMeta(cellId, {
+      formula: formulaText,
+      number: result instanceof FormulaError ? void 0 : typeof result === "number" ? result : void 0
+    });
+  } else {
+    tree.renameEntry(cellId, value);
+    const num = Number(value);
+    tree.updateMeta(cellId, {
+      formula: void 0,
+      number: value !== "" && !isNaN(num) ? num : void 0
+    });
+  }
+}
+function commitCellValue(colIdx, rowIdx, value) {
+  writeCellValue(colIdx, rowIdx, value);
+  recalcFormulas();
+  stopUndoCapturing();
+}
+function clearCellValue(colIdx, rowIdx) {
+  const entry = getCellEntry(colIdx, rowIdx);
+  if (entry) {
+    tree.renameEntry(entry.id, "");
+    tree.updateMeta(entry.id, { number: void 0, formula: void 0 });
+  }
+}
+function clearCell(colIdx, rowIdx) {
+  clearCellValue(colIdx, rowIdx);
+  recalcFormulas();
+  stopUndoCapturing();
+}
+function transact(fn) {
+  const doc = rootDoc.value;
+  if (doc) doc.transact(fn);
+  else fn();
+}
+const treeUndo = inject(treeUndoKey, null);
+function stopUndoCapturing() {
+  treeUndo?.undoManager.value?.stopCapturing();
+}
+function getCellEditableValue(colIdx, rowIdx) {
+  const entry = getCellEntry(colIdx, rowIdx);
+  if (entry?.meta?.formula) return `=${entry.meta.formula}`;
+  return getCellValue(colIdx, rowIdx);
+}
+const selection = useSheetsSelection({
+  colCount: computed(() => Math.max(columns.value.length + 1, MIN_DISPLAY_COLS)),
+  rowCount: displayRowCount,
+  getCellValue: getCellEditableValue,
+  commitValue: commitCellValue,
+  clearCell,
+  clearCellValue,
+  transact,
+  recalcFormulas
+});
+const clipboard = useSheetsClipboard({
+  activeCell: selection.activeCell,
+  normalizedRange: selection.normalizedRange,
+  onCommit: () => stopUndoCapturing(),
+  getCellValue,
+  commitCellValue,
+  writeCellValue,
+  clearCell,
+  clearCellValue,
+  transact,
+  recalcFormulas
+});
+watch([() => selection.activeCell.value, () => selection.editMode.value], () => {
+  const ac = selection.activeCell.value;
+  if (ac) {
+    setLocalState({
+      "sheets:activeCell": {
+        colIdx: ac.colIdx,
+        rowIdx: ac.rowIdx,
+        editing: selection.editMode.value,
+        t: Date.now()
+      }
+    });
+  } else {
+    setLocalState({ "sheets:activeCell": null });
+  }
+});
+watch(() => {
+  const ac = selection.activeCell.value;
+  return ac ? `${ac.colIdx}:${ac.rowIdx}` : null;
+}, () => {
+  stopUndoCapturing();
+});
+watch(() => selection.selectionRange.value, (range) => {
+  if (props.followingUser) return;
+  setLocalState({
+    "sheets:selection": range ? { startCol: range.startCol, startRow: range.startRow, endCol: range.endCol, endRow: range.endRow, t: Date.now() } : null
+  });
+});
+onBeforeUnmount(() => {
+  setLocalState({ "sheets:activeCell": null, "sheets:selection": null });
+});
+const remoteEditors = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const s of states.value) {
+    const ac = s["sheets:activeCell"];
+    if (ac?.editing && s.user) {
+      const key = `${ac.colIdx}:${ac.rowIdx}`;
+      map.set(key, { name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return map;
+});
+const remoteActiveCells = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const s of states.value) {
+    const ac = s["sheets:activeCell"];
+    if (ac && !ac.editing && s.user) {
+      const key = `${ac.colIdx}:${ac.rowIdx}`;
+      map.set(key, { name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return map;
+});
+const remoteSelections = computed(() => {
+  const result = [];
+  for (const s of states.value) {
+    const sel = s["sheets:selection"];
+    if (sel && s.user) {
+      result.push({
+        name: s.user.name ?? "",
+        color: s.user.color ?? "#888",
+        minCol: Math.min(sel.startCol, sel.endCol),
+        maxCol: Math.max(sel.startCol, sel.endCol),
+        minRow: Math.min(sel.startRow, sel.endRow),
+        maxRow: Math.max(sel.startRow, sel.endRow)
+      });
+    }
+  }
+  return result;
+});
+const sheetsGridRef = ref(null);
+let lastFollowedCellKey = "";
+watch([() => props.followingUser, states], () => {
+  const key = props.followingUser;
+  if (!key) return;
+  const state = states.value.find((s) => s.user?.publicKey === key);
+  const ac = state?.["sheets:activeCell"];
+  if (!ac) return;
+  const cellKey = `${ac.colIdx}:${ac.rowIdx}`;
+  if (cellKey === lastFollowedCellKey) return;
+  lastFollowedCellKey = cellKey;
+  sheetsGridRef.value?.scrollToCell?.(ac.colIdx, ac.rowIdx);
+});
+const cellRef = computed(() => {
+  if (!selection.activeCell.value) return "";
+  const { colIdx, rowIdx } = selection.activeCell.value;
+  return `${sheetsView.indexToColLetter(colIdx)}${rowIdx + 1}`;
+});
+const cellDisplayValue = computed(() => {
+  if (!selection.activeCell.value) return "";
+  const entry = getCellEntry(selection.activeCell.value.colIdx, selection.activeCell.value.rowIdx);
+  if (entry?.meta?.formula) return `=${entry.meta.formula}`;
+  return getCellValue(selection.activeCell.value.colIdx, selection.activeCell.value.rowIdx);
+});
+function getSelectionBounds() {
+  const range = selection.normalizedRange.value;
+  const ac = selection.activeCell.value;
+  if (!range && !ac) return null;
+  return {
+    startCol: range?.startCol ?? ac.colIdx,
+    endCol: range?.endCol ?? ac.colIdx,
+    startRow: range?.startRow ?? ac.rowIdx,
+    endRow: range?.endRow ?? ac.rowIdx
+  };
+}
+function getSelectionFormat(key) {
+  const bounds = getSelectionBounds();
+  if (!bounds) return void 0;
+  let commonVal = void 0;
+  let first = true;
+  for (let c = bounds.startCol; c <= bounds.endCol; c++) {
+    for (let r = bounds.startRow; r <= bounds.endRow; r++) {
+      const entry = getCellEntry(c, r);
+      const val = entry?.meta?.[key];
+      if (first) {
+        commonVal = val;
+        first = false;
+      } else if (val !== commonVal) return void 0;
+    }
+  }
+  return commonVal;
+}
+function applyFormatting(key, value) {
+  const bounds = getSelectionBounds();
+  if (!bounds) return;
+  transact(() => {
+    for (let c = bounds.startCol; c <= bounds.endCol; c++) {
+      for (let r = bounds.startRow; r <= bounds.endRow; r++) {
+        const cellId = ensureCell(c, r);
+        if (cellId) tree.updateMeta(cellId, { [key]: value });
+      }
+    }
+  });
+  stopUndoCapturing();
+}
+function toggleFormat(key) {
+  const current = getSelectionFormat(key);
+  applyFormatting(key, !current);
+}
+const selectionFormats = computed(() => {
+  const bounds = getSelectionBounds();
+  if (!bounds) return { bold: false, italic: false, align: void 0, textColor: void 0, bgColor: void 0, numberFormat: void 0 };
+  const keys = ["bold", "italic", "align", "textColor", "bgColor", "numberFormat"];
+  const common = {};
+  const first = {};
+  let isFirst = true;
+  for (let c = bounds.startCol; c <= bounds.endCol; c++) {
+    for (let r = bounds.startRow; r <= bounds.endRow; r++) {
+      const entry = getCellEntry(c, r);
+      for (const key of keys) {
+        const val = entry?.meta?.[key];
+        if (isFirst) {
+          first[key] = val;
+          common[key] = val;
+        } else if (common[key] !== val) common[key] = void 0;
+      }
+      isFirst = false;
+    }
+  }
+  return {
+    bold: !!common.bold,
+    italic: !!common.italic,
+    align: common.align,
+    textColor: common.textColor,
+    bgColor: common.bgColor,
+    numberFormat: common.numberFormat
+  };
+});
+const selectionBold = computed(() => selectionFormats.value.bold);
+const selectionItalic = computed(() => selectionFormats.value.italic);
+const selectionAlign = computed(() => selectionFormats.value.align);
+const selectionTextColor = computed(() => selectionFormats.value.textColor);
+const selectionBgColor = computed(() => selectionFormats.value.bgColor);
+const selectionNumberFormat = computed(() => selectionFormats.value.numberFormat);
+const formulaRefMode = computed(
+  () => selection.editMode.value && selection.editValue.value.startsWith("=")
+);
+const REF_COLORS = ["#3b82f6", "#ef4444", "#22c55e", "#a855f7", "#f97316"];
+const formulaRefHighlights = computed(() => {
+  if (!formulaRefMode.value) return /* @__PURE__ */ new Map();
+  const formula = selection.editValue.value.slice(1);
+  const refs = extractCellRefs(formula);
+  const map = /* @__PURE__ */ new Map();
+  refs.forEach((r, idx) => {
+    const color = REF_COLORS[idx % REF_COLORS.length];
+    if ("range" in r) {
+      const minC = Math.min(r.startCol, r.endCol);
+      const maxC = Math.max(r.startCol, r.endCol);
+      const minR = Math.min(r.startRow, r.endRow);
+      const maxR = Math.max(r.startRow, r.endRow);
+      for (let c = minC; c <= maxC; c++) {
+        for (let row = minR; row <= maxR; row++) {
+          map.set(`${c}:${row}`, color);
+        }
+      }
+    } else {
+      map.set(`${r.colIdx}:${r.rowIdx}`, color);
+    }
+  });
+  return map;
+});
+const formulaRefDragStart = ref(null);
+function onFormulaRefDragStart(colIdx, rowIdx) {
+  formulaRefDragStart.value = { colIdx, rowIdx };
+  insertFormulaRef(colIdx, rowIdx, colIdx, rowIdx);
+}
+function onFormulaRefDragMove(colIdx, rowIdx) {
+  if (!formulaRefDragStart.value) return;
+  const start = formulaRefDragStart.value;
+  insertFormulaRef(start.colIdx, start.rowIdx, colIdx, rowIdx);
+}
+function onFormulaRefDragEnd() {
+  formulaRefDragStart.value = null;
+}
+function insertFormulaRef(startCol, startRow, endCol, endRow) {
+  const val = selection.editValue.value;
+  const insertPos = findFormulaInsertPos(val);
+  const prefix = val.slice(0, insertPos);
+  const startRef = `${sheetsView.indexToColLetter(startCol)}${startRow + 1}`;
+  let ref2;
+  if (startCol === endCol && startRow === endRow) {
+    ref2 = startRef;
+  } else {
+    const endRef = `${sheetsView.indexToColLetter(endCol)}${endRow + 1}`;
+    ref2 = `${startRef}:${endRef}`;
+  }
+  selection.editValue.value = prefix + ref2;
+}
+function findFormulaInsertPos(val) {
+  let lastDelim = 0;
+  for (let i = 0; i < val.length; i++) {
+    const ch = val[i];
+    if (ch === "+" || ch === "-" || ch === "*" || ch === "/" || ch === "^" || ch === "(" || ch === "," || ch === "=" || ch === ">" || ch === "<" || ch === " ") {
+      lastDelim = i + 1;
+    }
+  }
+  return lastDelim;
+}
+function orderBetween(list, targetIdx) {
+  const prev = list[targetIdx - 1];
+  const next = list[targetIdx];
+  if (!prev && !next) return Date.now();
+  if (!prev) return next.order - 1e3;
+  if (!next) return prev.order + 1e3;
+  return (prev.order + next.order) / 2;
+}
+function relabelColumns() {
+  const cols = tree.childrenOf(null);
+  for (let i = 0; i < cols.length; i++) {
+    const expected = sheetsView.indexToColLetter(i);
+    if (cols[i].label !== expected) {
+      tree.renameEntry(cols[i].id, expected);
+    }
+  }
+}
+function insertRowAt(rowIdx) {
+  transact(() => {
+    for (const col of columns.value) {
+      const cells = tree.childrenOf(col.id);
+      const order = orderBetween(cells, rowIdx);
+      const id = tree.createChild(col.id, "");
+      tree.moveEntry(id, col.id, order);
+    }
+  });
+}
+function insertColAt(colIdx) {
+  transact(() => {
+    const cols = columns.value;
+    const order = orderBetween(cols, colIdx);
+    tree.createChild(null, sheetsView.indexToColLetter(colIdx));
+    const newCols = tree.childrenOf(null);
+    const created = newCols[newCols.length - 1];
+    if (created) tree.moveEntry(created.id, null, order);
+    relabelColumns();
+  });
+}
+function deleteColumnAt(colIdx) {
+  const col = columns.value[colIdx];
+  if (!col) return;
+  transact(() => {
+    tree.deleteEntry(col.id);
+    relabelColumns();
+  });
+}
+function deleteRowAt(rowIdx) {
+  transact(() => {
+    for (const col of columns.value) {
+      const cells = tree.childrenOf(col.id);
+      const cell = cells[rowIdx];
+      if (cell) tree.deleteEntry(cell.id);
+    }
+  });
+}
+const fillTargetRow = ref(null);
+const fillPreview = computed(() => {
+  const target = fillTargetRow.value;
+  if (target === null) return null;
+  const range = selection.normalizedRange.value;
+  const ac = selection.activeCell.value;
+  if (!ac) return null;
+  const startCol = range?.startCol ?? ac.colIdx;
+  const endCol = range?.endCol ?? ac.colIdx;
+  const srcStartRow = range?.startRow ?? ac.rowIdx;
+  const srcEndRow = range?.endRow ?? ac.rowIdx;
+  if (target >= srcStartRow && target <= srcEndRow) return null;
+  const fillDown = target > srcEndRow;
+  return {
+    startCol,
+    endCol,
+    fromRow: fillDown ? srcEndRow + 1 : target,
+    toRow: fillDown ? target : srcStartRow - 1
+  };
+});
+function onFillDragStart(rowIdx) {
+  fillTargetRow.value = rowIdx;
+}
+function onFillDragMove(rowIdx) {
+  fillTargetRow.value = rowIdx;
+}
+function onFillDragEnd() {
+  const target = fillTargetRow.value;
+  fillTargetRow.value = null;
+  if (target === null) return;
+  const range = selection.normalizedRange.value;
+  const ac = selection.activeCell.value;
+  if (!ac) return;
+  const startCol = range?.startCol ?? ac.colIdx;
+  const endCol = range?.endCol ?? ac.colIdx;
+  const srcStartRow = range?.startRow ?? ac.rowIdx;
+  const srcEndRow = range?.endRow ?? ac.rowIdx;
+  const srcLen = srcEndRow - srcStartRow + 1;
+  if (target <= srcEndRow && target >= srcStartRow) return;
+  transact(() => {
+    const fillDown = target > srcEndRow;
+    const fillStart = fillDown ? srcEndRow + 1 : target;
+    const fillEnd = fillDown ? target : srcStartRow - 1;
+    for (let r = fillStart; r <= fillEnd; r++) {
+      const srcRowIdx = srcStartRow + (r - fillStart) % srcLen;
+      const rowOffset = r - srcRowIdx;
+      for (let c = startCol; c <= endCol; c++) {
+        const srcEntry = getCellEntry(c, srcRowIdx);
+        const srcFormula = srcEntry?.meta?.formula;
+        const srcValue = getCellValue(c, srcRowIdx);
+        if (srcFormula) {
+          const adjusted = adjustFormulaRefs(srcFormula, 0, rowOffset);
+          writeCellValue(c, r, `=${adjusted}`);
+        } else if (srcLen >= 2 && srcValue !== "" && !isNaN(Number(srcValue))) {
+          const prevValue = getCellValue(c, srcRowIdx === srcStartRow && srcLen > 1 ? srcStartRow : srcRowIdx - 1);
+          if (prevValue !== "" && !isNaN(Number(prevValue)) && srcLen >= 2) {
+            const first = Number(getCellValue(c, srcStartRow));
+            const last = Number(getCellValue(c, srcEndRow));
+            const step = (last - first) / (srcLen - 1);
+            if (step !== 0) {
+              writeCellValue(c, r, String(first + step * (r - srcStartRow)));
+              continue;
+            }
+          }
+          writeCellValue(c, r, srcValue);
+        } else {
+          writeCellValue(c, r, srcValue);
+        }
+      }
+    }
+    recalcFormulas();
+  });
+  stopUndoCapturing();
+}
+function autoFitColumn(colId) {
+  const colIdx = columns.value.findIndex((c) => c.id === colId);
+  if (colIdx === -1) return;
+  let maxWidth = 40;
+  for (let r = 0; r < dataRowCount.value; r++) {
+    const val = getCellValue(colIdx, r);
+    const width = val.length * 8 + 24;
+    if (width > maxWidth) maxWidth = width;
+  }
+  const col = columns.value[colIdx];
+  if (col) {
+    const headerWidth = col.label.length * 8 + 24;
+    if (headerWidth > maxWidth) maxWidth = headerWidth;
+  }
+  sheetsView.setColWidth(colId, Math.min(maxWidth, 400));
+}
+function sortByColumn(colIdx, ascending) {
+  const sortCol = columns.value[colIdx];
+  if (!sortCol) return;
+  transact(() => {
+    const sortCells = tree.childrenOf(sortCol.id);
+    const indices = sortCells.map((cell, i) => ({ idx: i, val: cell.label }));
+    indices.sort((a, b) => {
+      const na = Number(a.val);
+      const nb = Number(b.val);
+      const bothNum = !isNaN(na) && a.val !== "" && !isNaN(nb) && b.val !== "";
+      const cmp = bothNum ? na - nb : a.val.localeCompare(b.val);
+      return ascending ? cmp : -cmp;
+    });
+    for (const col of columns.value) {
+      const cells = tree.childrenOf(col.id);
+      let order = 1e3;
+      for (const { idx } of indices) {
+        const cell = cells[idx];
+        if (cell) tree.moveEntry(cell.id, col.id, order);
+        order += 1e3;
+      }
+    }
+    recalcFormulas();
+  });
+}
+const cellContextItems = computed(() => {
+  if (!canWrite.value) return [];
+  const ac = selection.activeCell.value;
+  return [
+    [
+      { label: locale.value.cut, icon: "i-lucide-scissors", onSelect: () => clipboard.cut() },
+      { label: locale.value.copy, icon: "i-lucide-copy", onSelect: () => clipboard.copy() },
+      { label: locale.value.paste, icon: "i-lucide-clipboard-paste", onSelect: () => clipboard.paste() }
+    ],
+    [
+      { label: locale.value.clearContents, icon: "i-lucide-eraser", onSelect: () => selection.clearRange() }
+    ],
+    [
+      { label: locale.value.sortAsc, icon: "i-lucide-arrow-up-a-z", onSelect: () => ac && sortByColumn(ac.colIdx, true) },
+      { label: locale.value.sortDesc, icon: "i-lucide-arrow-down-z-a", onSelect: () => ac && sortByColumn(ac.colIdx, false) }
+    ],
+    [
+      { label: locale.value.insertRowAbove, icon: "i-lucide-arrow-up", onSelect: () => ac && insertRowAt(ac.rowIdx) },
+      { label: locale.value.insertRowBelow, icon: "i-lucide-arrow-down", onSelect: () => ac && insertRowAt(ac.rowIdx + 1) }
+    ],
+    [
+      { label: locale.value.insertColumnLeft, icon: "i-lucide-arrow-left", onSelect: () => ac && insertColAt(ac.colIdx) },
+      { label: locale.value.insertColumnRight, icon: "i-lucide-arrow-right", onSelect: () => ac && insertColAt(ac.colIdx + 1) }
+    ],
+    [
+      { label: locale.value.deleteRow, icon: "i-lucide-trash-2", color: "error", onSelect: () => ac && deleteRowAt(ac.rowIdx) },
+      { label: locale.value.deleteColumn, icon: "i-lucide-trash-2", color: "error", onSelect: () => ac && deleteColumnAt(ac.colIdx) }
+    ]
+  ];
+});
+function colHeaderContextItems(colIdx) {
+  if (!canWrite.value) return [];
+  return [
+    [
+      { label: locale.value.sortAsc, icon: "i-lucide-arrow-up-a-z", onSelect: () => sortByColumn(colIdx, true) },
+      { label: locale.value.sortDesc, icon: "i-lucide-arrow-down-z-a", onSelect: () => sortByColumn(colIdx, false) }
+    ],
+    [
+      { label: locale.value.renameColumn, icon: "i-lucide-pencil", onSelect: () => {
+      } }
+    ],
+    [
+      { label: locale.value.insertColumnLeft, icon: "i-lucide-arrow-left", onSelect: () => insertColAt(colIdx) },
+      { label: locale.value.insertColumnRight, icon: "i-lucide-arrow-right", onSelect: () => insertColAt(colIdx + 1) }
+    ],
+    [
+      { label: locale.value.deleteColumn, icon: "i-lucide-trash-2", color: "error", onSelect: () => deleteColumnAt(colIdx) }
+    ]
+  ];
+}
+function rowHeaderContextItems(rowIdx) {
+  if (!canWrite.value) return [];
+  return [
+    [
+      { label: locale.value.insertRowAbove, icon: "i-lucide-arrow-up", onSelect: () => insertRowAt(rowIdx) },
+      { label: locale.value.insertRowBelow, icon: "i-lucide-arrow-down", onSelect: () => insertRowAt(rowIdx + 1) }
+    ],
+    [
+      { label: locale.value.deleteRow, icon: "i-lucide-trash-2", color: "error", onSelect: () => deleteRowAt(rowIdx) }
+    ]
+  ];
+}
+function addColumn() {
+  const label = sheetsView.indexToColLetter(columns.value.length);
+  tree.createChild(null, label);
+}
+function addRow() {
+  const col = columns.value[0];
+  if (!col) {
+    const colId = tree.createChild(null, "A");
+    tree.createChild(colId, "");
+  } else {
+    tree.createChild(col.id, "");
+  }
+}
+function renameColumn(colId, label) {
+  tree.renameEntry(colId, label);
+}
+function resizeColumn(colId, width) {
+  sheetsView.setColWidth(colId, width);
+}
+function onStartEditFromBar() {
+  if (selection.activeCell.value) selection.startEdit(true);
+}
+function onCommitFormulaBar() {
+  selection.commitEdit();
+}
+function onCancelFormulaBar() {
+  selection.cancelEdit();
+}
+function onGridKeydown(e) {
+  selection.onKeydown(e);
+}
+void nextTick;
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div class="flex-1 min-h-0 flex flex-col relative">
+    <ASheetsToolbar
+      :active-cell="selection.activeCell.value"
+      :edit-mode="selection.editMode.value"
+      :edit-value="selection.editValue.value"
+      :cell-display-value="cellDisplayValue"
+      :cell-ref="cellRef"
+      :col-count="columns.length"
+      :row-count="dataRowCount - 1"
+      :editable="canWrite"
+      :selection-bold="selectionBold"
+      :selection-italic="selectionItalic"
+      :selection-align="selectionAlign"
+      :selection-text-color="selectionTextColor"
+      :selection-bg-color="selectionBgColor"
+      :selection-number-format="selectionNumberFormat"
+      :labels="labels"
+      @add-column="addColumn"
+      @add-row="addRow"
+      @update:edit-value="selection.editValue.value = $event"
+      @commit-formula-bar="onCommitFormulaBar"
+      @cancel-formula-bar="onCancelFormulaBar"
+      @start-edit-from-bar="onStartEditFromBar"
+      @toggle-bold="toggleFormat('bold')"
+      @toggle-italic="toggleFormat('italic')"
+      @set-text-color="(c) => applyFormatting('textColor', c)"
+      @set-bg-color="(c) => applyFormatting('bgColor', c)"
+      @set-align="(a) => applyFormatting('align', a)"
+      @set-number-format="(f) => applyFormatting('numberFormat', f)"
+    />
+
+    <!-- Empty state -->
+    <div
+      v-if="columns.length === 0"
+      class="flex-1 flex flex-col items-center justify-center text-(--ui-text-dimmed)"
+    >
+      <UIcon name="i-lucide-grid-3x3" class="size-12 mb-3 opacity-20" />
+      <p class="text-sm font-medium">
+        {{ locale.emptyTitle }}
+      </p>
+      <p class="text-xs mt-1 opacity-60 max-w-xs text-center">
+        {{ locale.emptyHint }}
+      </p>
+      <UButton
+        v-if="canWrite"
+        icon="i-lucide-plus"
+        size="sm"
+        variant="soft"
+        class="mt-4"
+        :label="locale.addColumn"
+        @click="addColumn"
+      />
+    </div>
+
+    <!-- Grid -->
+    <ASheetsGrid
+      v-else
+      ref="sheetsGridRef"
+      :column-positions="columnPositions"
+      :data-columns="columns"
+      :row-count="dataRowCount"
+      :display-row-count="displayRowCount"
+      :get-row-height="(rowIdx) => sheetsView.getRowHeight(rowIdx)"
+      :default-row-height="sheetsView.defaultRowHeight.value"
+      :get-cell-value="getCellValue"
+      :get-cell-entry="getCellEntry"
+      :active-cell="selection.activeCell.value"
+      :edit-mode="selection.editMode.value"
+      :edit-value="selection.editValue.value"
+      :selection-range="selection.selectionRange.value"
+      :cut-range="clipboard.cutRange.value"
+      :show-gridlines="sheetsView.showGridlines.value"
+      :editable="canWrite"
+      :remote-editors="remoteEditors"
+      :remote-active-cells="remoteActiveCells"
+      :remote-selections="remoteSelections"
+      :cell-context-items="cellContextItems"
+      :col-header-context-items="colHeaderContextItems"
+      :row-header-context-items="rowHeaderContextItems"
+      :formula-ref-mode="formulaRefMode"
+      :formula-ref-highlights="formulaRefHighlights"
+      :fill-preview="fillPreview"
+      @select-cell="selection.selectCell"
+      @activate-cell="selection.activateCell"
+      @update:edit-value="selection.editValue.value = $event"
+      @commit-edit="selection.commitEdit"
+      @cancel-edit="selection.cancelEdit"
+      @resize-column="resizeColumn"
+      @rename-column="renameColumn"
+      @select-row="selection.selectRow"
+      @select-column="selection.selectColumn"
+      @begin-drag="selection.beginDrag"
+      @continue-drag="selection.continueDrag"
+      @end-drag="selection.endDrag"
+      @set-range="selection.setRange"
+      @formula-ref-click="onFormulaRefDragStart"
+      @formula-ref-drag-start="onFormulaRefDragStart"
+      @formula-ref-drag-move="onFormulaRefDragMove"
+      @formula-ref-drag-end="onFormulaRefDragEnd"
+      @fill-drag-start="onFillDragStart"
+      @fill-drag-move="onFillDragMove"
+      @fill-drag-end="onFillDragEnd"
+      @auto-fit-column="autoFitColumn"
+      @keydown="onGridKeydown"
+      @paste="clipboard.onPaste"
+      @copy="clipboard.onCopy"
+      @cut="clipboard.onCut"
+    />
+
+    <ASheetsMobileActionBar
+      :visible="isMobile && !!selection.activeCell.value && !selection.editMode.value && columns.length > 0"
+      :editable="canWrite"
+      :cell-ref="cellRef"
+      :has-range="!!selection.selectionRange.value"
+      :cell-context-items="cellContextItems"
+      @edit="onStartEditFromBar"
+      @copy="clipboard.copy"
+      @cut="clipboard.cut"
+      @paste="clipboard.paste"
+      @clear="selection.clearRange"
+      @toggle-bold="toggleFormat('bold')"
+      @toggle-italic="toggleFormat('italic')"
+    />
+
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      :is-loading="nodePanelLoading"
+      :following-user="followingUser"
+      @close="closePanel"
+    />
+  </div>
+</template>