@abraca/nuxt 1.9.1 → 2.0.0

package/dist/runtime/components/renderers/sheets/ASheetsGrid.vue

@@ -0,0 +1,737 @@
+<script setup>
+import { ref, computed, watch, nextTick, useTemplateRef } from "vue";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { useMediaQuery } from "@vueuse/core";
+import ASheetsCell from "./ASheetsCell.vue";
+const props = defineProps({
+  columnPositions: { type: Array, required: true },
+  dataColumns: { type: Array, required: true },
+  rowCount: { type: Number, required: true },
+  displayRowCount: { type: Number, required: true },
+  getRowHeight: { type: Function, required: true },
+  defaultRowHeight: { type: Number, required: true },
+  getCellValue: { type: Function, required: true },
+  getCellEntry: { type: Function, required: true },
+  activeCell: { type: [Object, null], required: true },
+  editMode: { type: Boolean, required: true },
+  editValue: { type: String, required: true },
+  selectionRange: { type: [Object, null], required: true },
+  cutRange: { type: [Object, null], required: true },
+  showGridlines: { type: Boolean, required: true },
+  editable: { type: Boolean, required: true },
+  remoteEditors: { type: Map, required: true },
+  remoteActiveCells: { type: Map, required: false },
+  remoteSelections: { type: Array, required: false },
+  cellContextItems: { type: Array, required: true },
+  colHeaderContextItems: { type: Function, required: true },
+  rowHeaderContextItems: { type: Function, required: true },
+  formulaRefMode: { type: Boolean, required: true },
+  formulaRefHighlights: { type: Map, required: true },
+  fillPreview: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["selectCell", "activateCell", "update:editValue", "commitEdit", "cancelEdit", "resizeColumn", "renameColumn", "selectRow", "selectColumn", "beginDrag", "continueDrag", "endDrag", "setRange", "formulaRefClick", "formulaRefDragStart", "formulaRefDragMove", "formulaRefDragEnd", "fillDragStart", "fillDragMove", "fillDragEnd", "autoFitColumn", "keydown", "paste", "copy", "cut"]);
+const isMobile = useMediaQuery("(max-width: 640px)");
+const ROW_HEADER_WIDTH = 48;
+const scrollRef = useTemplateRef("scrollRef");
+const editInputRef = useTemplateRef("editInputRef");
+const normalizedSelection = computed(() => {
+  const r = props.selectionRange;
+  if (!r) return null;
+  return {
+    minCol: Math.min(r.startCol, r.endCol),
+    maxCol: Math.max(r.startCol, r.endCol),
+    minRow: Math.min(r.startRow, r.endRow),
+    maxRow: Math.max(r.startRow, r.endRow)
+  };
+});
+const normalizedCut = computed(() => {
+  const r = props.cutRange;
+  if (!r) return null;
+  return {
+    minCol: Math.min(r.startCol, r.endCol),
+    maxCol: Math.max(r.startCol, r.endCol),
+    minRow: Math.min(r.startRow, r.endRow),
+    maxRow: Math.max(r.startRow, r.endRow)
+  };
+});
+const rowVirtualizer = useVirtualizer(computed(() => ({
+  count: props.displayRowCount,
+  getScrollElement: () => scrollRef.value,
+  estimateSize: (idx) => props.getRowHeight(idx),
+  overscan: 8
+})));
+const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems());
+const totalHeight = computed(() => rowVirtualizer.value.getTotalSize());
+const totalWidth = computed(() => {
+  const cols = props.columnPositions;
+  if (!cols.length) return 0;
+  const last = cols[cols.length - 1];
+  return last.start + last.size;
+});
+const scrollLeft = ref(0);
+let scrollRafId = 0;
+function onScroll() {
+  if (scrollRafId) return;
+  scrollRafId = requestAnimationFrame(() => {
+    scrollLeft.value = scrollRef.value?.scrollLeft ?? 0;
+    scrollRafId = 0;
+  });
+}
+const visibleColsReactive = computed(() => {
+  const sl = scrollLeft.value;
+  const el = scrollRef.value;
+  if (!el) return props.columnPositions;
+  const viewRight = sl + el.clientWidth + 200;
+  const viewLeft = Math.max(0, sl - 200);
+  return props.columnPositions.filter((c) => c.start + c.size > viewLeft && c.start < viewRight);
+});
+watch(() => props.editMode, (v) => {
+  if (v) {
+    if (isMobile.value && props.activeCell) {
+      nextTick(() => {
+        const { colIdx, rowIdx } = props.activeCell;
+        scrollToCell(colIdx, rowIdx);
+        requestAnimationFrame(() => editInputRef.value?.focus());
+      });
+    } else {
+      nextTick(() => editInputRef.value?.focus());
+    }
+  }
+});
+const editOverlayStyle = computed(() => {
+  if (!props.editMode || !props.activeCell) return null;
+  const col = props.columnPositions[props.activeCell.colIdx];
+  if (!col) return null;
+  const vRows = virtualRows.value;
+  const vRow = vRows.find((r) => r.index === props.activeCell.rowIdx);
+  if (!vRow) return null;
+  return {
+    position: "absolute",
+    top: `${vRow.start + props.defaultRowHeight}px`,
+    left: `${col.start + ROW_HEADER_WIDTH}px`,
+    width: `${col.size}px`,
+    height: `${vRow.size}px`,
+    zIndex: 30
+  };
+});
+function isInCutRange(colIdx, rowIdx) {
+  const r = normalizedCut.value;
+  if (!r) return false;
+  return colIdx >= r.minCol && colIdx <= r.maxCol && rowIdx >= r.minRow && rowIdx <= r.maxRow;
+}
+function cellInSelection(colIdx, rowIdx) {
+  const r = normalizedSelection.value;
+  if (!r) return false;
+  return colIdx >= r.minCol && colIdx <= r.maxCol && rowIdx >= r.minRow && rowIdx <= r.maxRow;
+}
+let resizeState = null;
+function onResizeStart(e, colId, currentWidth) {
+  e.preventDefault();
+  e.stopPropagation();
+  resizeState = { colId, startX: e.clientX, startWidth: currentWidth };
+  const onMove = (ev) => {
+    if (!resizeState) return;
+    const newWidth = Math.max(40, resizeState.startWidth + (ev.clientX - resizeState.startX));
+    emit("resizeColumn", resizeState.colId, newWidth);
+  };
+  const onUp = () => {
+    resizeState = null;
+    document.removeEventListener("pointermove", onMove);
+    document.removeEventListener("pointerup", onUp);
+  };
+  document.addEventListener("pointermove", onMove);
+  document.addEventListener("pointerup", onUp);
+}
+const renamingColId = ref(null);
+const renameValue = ref("");
+function startColRename(colId, label) {
+  renamingColId.value = colId;
+  renameValue.value = label;
+  nextTick(() => {
+    const el = document.querySelector(`[data-col-rename="${colId}"]`);
+    el?.focus();
+    el?.select();
+  });
+}
+function commitColRename() {
+  if (renamingColId.value) {
+    emit("renameColumn", renamingColId.value, renameValue.value);
+    renamingColId.value = null;
+  }
+}
+function onEditKeydown(e) {
+  if (e.key === "Escape") {
+    e.preventDefault();
+    e.stopPropagation();
+    emit("cancelEdit");
+    nextTick(() => scrollRef.value?.focus());
+    return;
+  }
+  if (e.key === "Enter" || e.key === "Tab") {
+    e.preventDefault();
+    e.stopPropagation();
+    emit("keydown", e);
+    nextTick(() => scrollRef.value?.focus());
+    return;
+  }
+}
+const formulaRefDragging = ref(false);
+let touchState = null;
+const LONG_PRESS_MS = 500;
+const TAP_MOVE_TOLERANCE = 10;
+function clearTouchState() {
+  if (touchState) {
+    clearTimeout(touchState.longPressTimer);
+    touchState = null;
+  }
+}
+function onCellPointerDown(e, colIdx, rowIdx) {
+  if (e.button !== 0) return;
+  if (props.formulaRefMode) {
+    e.preventDefault();
+    e.stopPropagation();
+    formulaRefDragging.value = true;
+    emit("formulaRefDragStart", colIdx, rowIdx);
+    return;
+  }
+  if (e.shiftKey) {
+    emit("selectCell", colIdx, rowIdx, true);
+    return;
+  }
+  if (e.pointerType === "touch") {
+    clearTouchState();
+    const target = e.target;
+    const timer = window.setTimeout(() => {
+      if (!touchState || touchState.moved) return;
+      emit("selectCell", colIdx, rowIdx, false);
+      const el = target;
+      if (el) {
+        el.dispatchEvent(new MouseEvent("contextmenu", {
+          bubbles: true,
+          cancelable: true,
+          clientX: touchState.startX,
+          clientY: touchState.startY
+        }));
+      }
+      clearTouchState();
+    }, LONG_PRESS_MS);
+    touchState = {
+      colIdx,
+      rowIdx,
+      startX: e.clientX,
+      startY: e.clientY,
+      moved: false,
+      pointerId: e.pointerId,
+      longPressTimer: timer,
+      startedAt: Date.now(),
+      target
+    };
+    return;
+  }
+  emit("beginDrag", colIdx, rowIdx);
+}
+function onCellPointerMove(e) {
+  if (!touchState || e.pointerId !== touchState.pointerId) return;
+  const dx = e.clientX - touchState.startX;
+  const dy = e.clientY - touchState.startY;
+  if (Math.abs(dx) > TAP_MOVE_TOLERANCE || Math.abs(dy) > TAP_MOVE_TOLERANCE) {
+    touchState.moved = true;
+    clearTimeout(touchState.longPressTimer);
+  }
+}
+function onCellPointerUp(e, colIdx, rowIdx) {
+  if (!touchState || e.pointerId !== touchState.pointerId) return;
+  if (!touchState.moved) {
+    emit("selectCell", colIdx, rowIdx, false);
+  }
+  clearTouchState();
+}
+function onCellPointerEnter(colIdx, rowIdx) {
+  if (formulaRefDragging.value) {
+    emit("formulaRefDragMove", colIdx, rowIdx);
+    return;
+  }
+  if (fillDragging.value) {
+    return;
+  }
+  emit("continueDrag", colIdx, rowIdx);
+}
+function onGridPointerUp() {
+  if (formulaRefDragging.value) {
+    formulaRefDragging.value = false;
+    emit("formulaRefDragEnd");
+    return;
+  }
+  if (fillDragging.value) {
+    return;
+  }
+  emit("endDrag");
+}
+const fillDragging = ref(false);
+const fillHandleStyle = computed(() => {
+  if (props.editMode || !props.activeCell || !props.editable) return null;
+  const range = props.selectionRange;
+  const targetCol = range ? Math.max(range.startCol, range.endCol) : props.activeCell.colIdx;
+  const targetRow = range ? Math.max(range.startRow, range.endRow) : props.activeCell.rowIdx;
+  const col = props.columnPositions[targetCol];
+  if (!col) return null;
+  const vRow = virtualRows.value.find((r) => r.index === targetRow);
+  if (!vRow) return null;
+  const touchOffset = isMobile.value ? 22 : 0;
+  return {
+    position: "absolute",
+    top: `${vRow.start + vRow.size + props.defaultRowHeight + touchOffset}px`,
+    left: `${col.start + col.size + ROW_HEADER_WIDTH + touchOffset}px`,
+    transform: "translate(-50%, -50%)",
+    touchAction: "none",
+    zIndex: 25
+  };
+});
+function rowIndexAtY(clientX, clientY) {
+  const hit = cellAtPoint(clientX, clientY);
+  if (hit) return hit.rowIdx;
+  const el = scrollRef.value;
+  if (!el) return 0;
+  const rect = el.getBoundingClientRect();
+  const relY = clientY - rect.top - props.defaultRowHeight + el.scrollTop;
+  const max = Math.max(0, props.displayRowCount - 1);
+  if (relY <= 0) return 0;
+  let y = 0;
+  for (let i = 0; i <= max; i++) {
+    y += props.getRowHeight(i);
+    if (y > relY) return i;
+  }
+  return max;
+}
+const fillPreviewStyle = computed(() => {
+  const p = props.fillPreview;
+  if (!p) return null;
+  const startColPos = props.columnPositions[p.startCol];
+  const endColPos = props.columnPositions[p.endCol];
+  if (!startColPos || !endColPos) return null;
+  let top;
+  let bottom;
+  const vFrom = virtualRows.value.find((r) => r.index === p.fromRow);
+  if (vFrom) {
+    top = vFrom.start;
+  } else {
+    top = 0;
+    for (let i = 0; i < p.fromRow; i++) top += props.getRowHeight(i);
+  }
+  const vTo = virtualRows.value.find((r) => r.index === p.toRow);
+  if (vTo) {
+    bottom = vTo.start + vTo.size;
+  } else {
+    bottom = top;
+    for (let i = p.fromRow; i <= p.toRow; i++) bottom += props.getRowHeight(i);
+  }
+  return {
+    position: "absolute",
+    top: `${top + props.defaultRowHeight}px`,
+    left: `${startColPos.start + ROW_HEADER_WIDTH}px`,
+    width: `${endColPos.start + endColPos.size - startColPos.start}px`,
+    height: `${bottom - top}px`,
+    border: "1.5px dashed var(--ui-primary)",
+    backgroundColor: "color-mix(in oklab, var(--ui-primary) 8%, transparent)",
+    pointerEvents: "none",
+    zIndex: 6
+  };
+});
+function onFillHandleDown(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  const ac = props.activeCell;
+  if (!ac) return;
+  fillDragging.value = true;
+  emit("fillDragStart", ac.rowIdx);
+  const pointerId = e.pointerId;
+  const target = e.target;
+  target.setPointerCapture?.(pointerId);
+  const onMove = (ev) => {
+    if (ev.pointerId !== pointerId) return;
+    ev.preventDefault();
+    autoScrollNearEdge(ev.clientX, ev.clientY);
+    emit("fillDragMove", rowIndexAtY(ev.clientX, ev.clientY));
+  };
+  const onEnd = (ev) => {
+    if (ev.pointerId !== pointerId) return;
+    document.removeEventListener("pointermove", onMove);
+    document.removeEventListener("pointerup", onEnd);
+    document.removeEventListener("pointercancel", onEnd);
+    target.releasePointerCapture?.(pointerId);
+    if (fillDragging.value) {
+      fillDragging.value = false;
+      emit("fillDragEnd");
+    }
+  };
+  document.addEventListener("pointermove", onMove, { passive: false });
+  document.addEventListener("pointerup", onEnd);
+  document.addEventListener("pointercancel", onEnd);
+}
+const showSelectionHandles = computed(() => {
+  if (!isMobile.value || !props.editable) return false;
+  if (props.editMode) return false;
+  return !!props.activeCell;
+});
+const selectionBounds = computed(() => {
+  const r = normalizedSelection.value;
+  if (r) return r;
+  const ac = props.activeCell;
+  if (!ac) return null;
+  return { minCol: ac.colIdx, maxCol: ac.colIdx, minRow: ac.rowIdx, maxRow: ac.rowIdx };
+});
+function cornerStyle(colIdx, rowIdx, corner) {
+  const col = props.columnPositions[colIdx];
+  if (!col) return null;
+  const vRow = virtualRows.value.find((r) => r.index === rowIdx);
+  if (!vRow) return null;
+  const x = corner === "nw" ? col.start : col.start + col.size;
+  const y = corner === "nw" ? vRow.start : vRow.start + vRow.size;
+  return {
+    position: "absolute",
+    top: `${y + props.defaultRowHeight}px`,
+    left: `${x + ROW_HEADER_WIDTH}px`,
+    zIndex: 26,
+    transform: "translate(-50%, -50%)",
+    touchAction: "none"
+  };
+}
+const handleNwStyle = computed(() => {
+  if (!showSelectionHandles.value) return null;
+  const b = selectionBounds.value;
+  if (!b) return null;
+  return cornerStyle(b.minCol, b.minRow, "nw");
+});
+const handleSeStyle = computed(() => {
+  if (!showSelectionHandles.value) return null;
+  const b = selectionBounds.value;
+  if (!b) return null;
+  return cornerStyle(b.maxCol, b.maxRow, "se");
+});
+let handleDrag = null;
+function cellAtPoint(clientX, clientY) {
+  const el = document.elementFromPoint(clientX, clientY);
+  if (!el) return null;
+  const cellEl = el.closest("[data-cell-col][data-cell-row]");
+  if (!cellEl) return null;
+  const colIdx = Number(cellEl.dataset.cellCol);
+  const rowIdx = Number(cellEl.dataset.cellRow);
+  if (Number.isNaN(colIdx) || Number.isNaN(rowIdx)) return null;
+  return { colIdx, rowIdx };
+}
+function autoScrollNearEdge(clientX, clientY) {
+  const el = scrollRef.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const edge = 36;
+  const speed = 14;
+  let dx = 0, dy = 0;
+  if (clientY - rect.top < edge) dy = -speed;
+  else if (rect.bottom - clientY < edge) dy = speed;
+  if (clientX - rect.left < edge) dx = -speed;
+  else if (rect.right - clientX < edge) dx = speed;
+  if (dx || dy) el.scrollBy({ left: dx, top: dy });
+}
+function onSelectionHandleDown(e, corner) {
+  e.preventDefault();
+  e.stopPropagation();
+  const b = selectionBounds.value;
+  if (!b) return;
+  const anchorCol = corner === "nw" ? b.maxCol : b.minCol;
+  const anchorRow = corner === "nw" ? b.maxRow : b.minRow;
+  handleDrag = { corner, pointerId: e.pointerId, anchorCol, anchorRow };
+  e.target.setPointerCapture?.(e.pointerId);
+  const onMove = (ev) => {
+    if (!handleDrag || ev.pointerId !== handleDrag.pointerId) return;
+    ev.preventDefault();
+    autoScrollNearEdge(ev.clientX, ev.clientY);
+    const hit = cellAtPoint(ev.clientX, ev.clientY);
+    if (!hit) return;
+    emit("setRange", handleDrag.anchorCol, handleDrag.anchorRow, hit.colIdx, hit.rowIdx);
+  };
+  const onUp = (ev) => {
+    if (!handleDrag || ev.pointerId !== handleDrag.pointerId) return;
+    handleDrag = null;
+    document.removeEventListener("pointermove", onMove);
+    document.removeEventListener("pointerup", onUp);
+    document.removeEventListener("pointercancel", onUp);
+  };
+  document.addEventListener("pointermove", onMove, { passive: false });
+  document.addEventListener("pointerup", onUp);
+  document.addEventListener("pointercancel", onUp);
+}
+const contextColIdx = ref(0);
+const contextRowIdx = ref(0);
+const contextMenuOpen = ref(false);
+const contextMenuType = ref("cell");
+const contextMenuItems = computed(() => {
+  if (contextMenuType.value === "col") return props.colHeaderContextItems(contextColIdx.value);
+  if (contextMenuType.value === "row") return props.rowHeaderContextItems(contextRowIdx.value);
+  return props.cellContextItems;
+});
+function onCellContextMenu(_e, colIdx, rowIdx) {
+  contextColIdx.value = colIdx;
+  contextRowIdx.value = rowIdx;
+  contextMenuType.value = "cell";
+  if (!cellInSelection(colIdx, rowIdx) && !(props.activeCell?.colIdx === colIdx && props.activeCell?.rowIdx === rowIdx)) {
+    emit("selectCell", colIdx, rowIdx, false);
+  }
+}
+function onColHeaderContextMenu(_e, colIdx) {
+  contextColIdx.value = colIdx;
+  contextMenuType.value = "col";
+}
+function onRowHeaderContextMenu(_e, rowIdx) {
+  contextRowIdx.value = rowIdx;
+  contextMenuType.value = "row";
+}
+function onGridContextMenu(_e) {
+}
+function onContextMenuOpenChange(open) {
+  contextMenuOpen.value = open;
+}
+const ROW_HEADER_WIDTH_SEL = 48;
+const remoteSelectionOverlays = computed(() => {
+  if (!props.remoteSelections?.length) return [];
+  const vRows = virtualRows.value;
+  if (!vRows.length) return [];
+  const cols = props.columnPositions;
+  if (!cols.length) return [];
+  return props.remoteSelections.map((sel) => {
+    const startCol = cols[sel.minCol];
+    const endCol = cols[sel.maxCol];
+    if (!startCol || !endCol) return null;
+    const startRow = vRows.find((r) => r.index === sel.minRow);
+    const endRow = vRows.find((r) => r.index === sel.maxRow);
+    if (!startRow || !endRow) return null;
+    return {
+      color: sel.color,
+      name: sel.name,
+      top: startRow.start + props.defaultRowHeight,
+      left: startCol.start + ROW_HEADER_WIDTH_SEL,
+      width: endCol.start + endCol.size - startCol.start,
+      height: endRow.start + endRow.size - startRow.start
+    };
+  }).filter(Boolean);
+});
+function scrollToCell(colIdx, rowIdx) {
+  const el = scrollRef.value;
+  if (!el) return;
+  rowVirtualizer.value.scrollToIndex(rowIdx, { align: "center" });
+  const col = props.columnPositions[colIdx];
+  if (col) {
+    const targetLeft = col.start - el.clientWidth / 2 + col.size / 2;
+    el.scrollTo({ left: Math.max(0, targetLeft), behavior: "smooth" });
+  }
+}
+defineExpose({ scrollToCell });
+</script>
+
+<template>
+  <UContextMenu :items="contextMenuItems" @update:open="onContextMenuOpenChange">
+    <div
+      ref="scrollRef"
+      class="flex-1 min-h-0 overflow-auto relative focus:outline-none"
+      tabindex="0"
+      @keydown="emit('keydown', $event)"
+      @scroll="onScroll"
+      @pointerup="onGridPointerUp"
+      @paste="emit('paste', $event)"
+      @copy="emit('copy', $event)"
+      @cut="emit('cut', $event)"
+      @contextmenu="onGridContextMenu"
+    >
+      <!-- Spacer for total scroll area -->
+      <div
+        :style="{
+  width: `${totalWidth + ROW_HEADER_WIDTH}px`,
+  height: `${totalHeight + defaultRowHeight}px`,
+  position: 'relative'
+}"
+      >
+        <!-- ── Column header row (sticky top, includes corner) ─────────────── -->
+        <div
+          class="sticky top-0 z-20"
+          :style="{ height: `${defaultRowHeight}px` }"
+        >
+          <!-- Corner cell -->
+          <div
+            class="sticky left-0 inline-block align-top z-30 bg-(--ui-bg)"
+            :class="showGridlines ? 'border-b border-r border-(--ui-border)' : ''"
+            :style="{ width: `${ROW_HEADER_WIDTH}px`, height: `${defaultRowHeight}px` }"
+          />
+
+          <!-- Column headers -->
+          <template v-for="col in visibleColsReactive" :key="col.id">
+            <div
+              class="absolute top-0 flex items-center justify-center text-xs font-medium text-(--ui-text-muted) select-none bg-(--ui-bg) group cursor-pointer"
+              :class="showGridlines ? 'border-b border-r border-(--ui-border)' : ''"
+              :style="{
+  left: `${col.start + ROW_HEADER_WIDTH}px`,
+  width: `${col.size}px`,
+  height: `${defaultRowHeight}px`
+}"
+              @click="emit('selectColumn', col.idx)"
+              @contextmenu="onColHeaderContextMenu($event, col.idx)"
+              @dblclick="editable && dataColumns.find((c) => c.id === col.id) ? startColRename(col.id, col.label) : void 0"
+            >
+              <input
+                v-if="renamingColId === col.id"
+                v-model="renameValue"
+                :data-col-rename="col.id"
+                class="w-full text-center bg-transparent outline-none text-xs font-medium"
+                @blur="commitColRename"
+                @keydown.enter="commitColRename"
+                @keydown.escape="renamingColId = null"
+                @click.stop
+              >
+              <span v-else class="truncate px-1">{{ col.label }}</span>
+
+              <!-- Resize handle (wider hit target on touch; visible marker on mobile) -->
+              <div
+                v-if="editable"
+                class="absolute right-0 top-0 bottom-0 cursor-col-resize"
+                :class="isMobile ? 'w-3' : 'w-1.5 opacity-0 group-hover:opacity-100 hover:bg-(--ui-primary)/20'"
+                :style="{ touchAction: 'none' }"
+                @pointerdown="onResizeStart($event, col.id, col.size)"
+                @dblclick.stop="emit('autoFitColumn', col.id)"
+              >
+                <div
+                  v-if="isMobile"
+                  class="absolute top-1/2 right-0.5 -translate-y-1/2 w-0.5 h-4 rounded-full bg-(--ui-border-accented)/70"
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- ── Row headers (sticky left, scrolls vertically) ────────────────── -->
+        <div
+          class="sticky left-0 z-10"
+          :style="{ width: `${ROW_HEADER_WIDTH}px`, height: 0 }"
+        >
+          <template v-for="vRow in virtualRows" :key="vRow.index">
+            <div
+              class="absolute flex items-center justify-center text-xs text-(--ui-text-dimmed) select-none bg-(--ui-bg) cursor-pointer"
+              :class="showGridlines ? 'border-b border-r border-(--ui-border)' : ''"
+              :style="{
+  top: `${vRow.start}px`,
+  width: `${ROW_HEADER_WIDTH}px`,
+  height: `${vRow.size}px`
+}"
+              @click="emit('selectRow', vRow.index)"
+              @contextmenu="onRowHeaderContextMenu($event, vRow.index)"
+            >
+              {{ vRow.index + 1 }}
+            </div>
+          </template>
+        </div>
+
+        <!-- ── Cells ───────────────────────────────────────────────────────── -->
+        <div
+          :style="{
+  position: 'absolute',
+  top: `${defaultRowHeight}px`,
+  left: `${ROW_HEADER_WIDTH}px`
+}"
+        >
+          <template v-for="vRow in virtualRows" :key="vRow.index">
+            <template v-for="col in visibleColsReactive" :key="`${vRow.index}:${col.id}`">
+              <ASheetsCell
+                :col-idx="col.idx"
+                :row-idx="vRow.index"
+                :top="vRow.start"
+                :left="col.start"
+                :width="col.size"
+                :height="vRow.size"
+                :value="getCellValue(col.idx, vRow.index)"
+                :entry="getCellEntry(col.idx, vRow.index)"
+                :is-active="activeCell?.colIdx === col.idx && activeCell?.rowIdx === vRow.index"
+                :is-selected="cellInSelection(col.idx, vRow.index)"
+                :is-cut="isInCutRange(col.idx, vRow.index)"
+                :is-editing="editMode && activeCell?.colIdx === col.idx && activeCell?.rowIdx === vRow.index"
+                :highlight="formulaRefHighlights.get(`${col.idx}:${vRow.index}`) ?? null"
+                :remote="remoteEditors.get(`${col.idx}:${vRow.index}`) ?? null"
+                :remote-active="remoteActiveCells?.get(`${col.idx}:${vRow.index}`) ?? null"
+                :show-gridlines="showGridlines"
+                :editable="editable"
+                @pointerdown="onCellPointerDown($event, col.idx, vRow.index)"
+                @pointermove="onCellPointerMove"
+                @pointerup="onCellPointerUp($event, col.idx, vRow.index)"
+                @pointercancel="clearTouchState"
+                @pointerenter="onCellPointerEnter(col.idx, vRow.index)"
+                @contextmenu="onCellContextMenu($event, col.idx, vRow.index)"
+                @dblclick="editable ? emit('activateCell', col.idx, vRow.index) : void 0"
+              />
+            </template>
+          </template>
+        </div>
+
+        <!-- ── Fill-preview overlay ──────────────────────────────────────── -->
+        <div
+          v-if="fillPreviewStyle"
+          :style="fillPreviewStyle"
+        />
+
+        <!-- ── Remote selection overlays ──────────────────────────────────── -->
+        <div
+          v-for="(sel, idx) in remoteSelectionOverlays"
+          :key="`rsel-${idx}`"
+          class="absolute pointer-events-none"
+          :style="{
+  top: `${sel.top}px`,
+  left: `${sel.left}px`,
+  width: `${sel.width}px`,
+  height: `${sel.height}px`,
+  backgroundColor: `${sel.color}18`,
+  border: `1px solid ${sel.color}60`,
+  zIndex: 3
+}"
+        />
+
+        <!-- ── Edit overlay input ──────────────────────────────────────────── -->
+        <input
+          v-if="editMode && activeCell && editOverlayStyle"
+          ref="editInputRef"
+          enterkeyhint="done"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          class="bg-(--ui-bg) px-1.5 text-base md:text-sm outline-none ring-2 ring-(--ui-primary)"
+          :style="editOverlayStyle"
+          :value="editValue"
+          @input="emit('update:editValue', $event.target.value)"
+          @blur="emit('commitEdit')"
+          @keydown="onEditKeydown"
+          @click.stop
+        >
+
+        <!-- ── Fill handle ────────────────────────────────────────────────── -->
+        <div
+          v-if="fillHandleStyle"
+          class="bg-(--ui-primary) cursor-crosshair border border-white rounded-sm"
+          :class="isMobile ? 'size-5' : 'size-2'"
+          :style="fillHandleStyle"
+          @pointerdown="onFillHandleDown"
+        />
+
+        <!-- ── Touch selection handles (NW, SE corners) ───────────────────── -->
+        <div
+          v-if="handleNwStyle"
+          class="size-5 rounded-full bg-(--ui-primary) ring-2 ring-white shadow-md"
+          :style="handleNwStyle"
+          aria-label="Selection handle"
+          @pointerdown="onSelectionHandleDown($event, 'nw')"
+        />
+        <div
+          v-if="handleSeStyle"
+          class="size-5 rounded-full bg-(--ui-primary) ring-2 ring-white shadow-md"
+          :style="handleSeStyle"
+          aria-label="Selection handle"
+          @pointerdown="onSelectionHandleDown($event, 'se')"
+        />
+      </div>
+    </div>
+  </UContextMenu>
+</template>