@pixerate/editor-svelte 0.18.0 → 0.20.0

package/dist/spreadsheet/FormulaHints.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { applyFormulaSuggestion, getFormulaHints } from '@pixerate/editor/spreadsheet';
+
+  interface Props {
+    /** The input being edited (a cell editor or the formula bar). */
+    input?: HTMLInputElement | null;
+    /** The input's current value. */
+    value?: string;
+    /** Called with the new value when a suggestion is accepted. */
+    onAccept?: (value: string) => void;
+    /** Maximum number of function suggestions (default 8). */
+    limit?: number;
+  }
+
+  let { input = null, value = '', onAccept, limit = 8 }: Props = $props();
+
+  let caret = $state<number | null>(null);
+  let focused = $state(false);
+  let selected = $state(0);
+  let dismissed = $state(false);
+  let position = $state<{ top: number; left: number; width: number } | null>(null);
+
+  let hints = $derived(getFormulaHints(value, caret ?? value.length, { limit }));
+  let suggestions = $derived(dismissed ? [] : hints.suggestions);
+  let selectedIndex = $derived(Math.max(0, Math.min(selected, suggestions.length - 1)));
+  let visible = $derived(
+    focused && value.trimStart().startsWith('=') && (suggestions.length > 0 || !!hints.activeCall)
+  );
+
+  async function accept(index: number) {
+    const suggestion = suggestions[index];
+    if (!suggestion || !input) return;
+    const next = applyFormulaSuggestion(value, caret ?? value.length, suggestion.name);
+    caret = next.caret;
+    selected = 0;
+    onAccept?.(next.value);
+    // Wait for the new value to reach the input, then put the caret inside "(".
+    await tick();
+    if (input.value === next.value) input.setSelectionRange(next.caret, next.caret);
+  }
+
+  $effect(() => {
+    const el = input;
+    if (!el) return;
+    const syncCaret = () => (caret = el.selectionStart ?? el.value.length);
+    const onInput = () => {
+      dismissed = false;
+      selected = 0;
+      syncCaret();
+    };
+    const onFocus = () => {
+      focused = true;
+      syncCaret();
+    };
+    const onBlur = () => (focused = false);
+    // A listener on the input runs before Svelte's delegated handlers (on the
+    // root), so stopping propagation keeps these keys away from the grid.
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (suggestions.length === 0) return;
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        const step = e.key === 'ArrowDown' ? 1 : -1;
+        selected = (selectedIndex + step + suggestions.length) % suggestions.length;
+      } else if (e.key === 'Tab' && !e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        accept(selectedIndex);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        dismissed = true;
+      }
+    };
+
+    el.addEventListener('input', onInput);
+    el.addEventListener('keyup', syncCaret);
+    el.addEventListener('click', syncCaret);
+    el.addEventListener('select', syncCaret);
+    el.addEventListener('focus', onFocus);
+    el.addEventListener('blur', onBlur);
+    el.addEventListener('keydown', onKeyDown);
+    if (typeof document !== 'undefined' && document.activeElement === el) onFocus();
+    return () => {
+      el.removeEventListener('input', onInput);
+      el.removeEventListener('keyup', syncCaret);
+      el.removeEventListener('click', syncCaret);
+      el.removeEventListener('select', syncCaret);
+      el.removeEventListener('focus', onFocus);
+      el.removeEventListener('blur', onBlur);
+      el.removeEventListener('keydown', onKeyDown);
+    };
+  });
+
+  $effect(() => {
+    if (!visible || !input) return;
+    void value;
+    const rect = input.getBoundingClientRect();
+    position = { top: rect.bottom + 2, left: rect.left, width: rect.width };
+  });
+</script>
+
+{#if visible}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    data-formula-hints=""
+    class="rounded-md border border-border bg-popover text-popover-foreground shadow-md text-xs font-sans overflow-hidden"
+    style="position: fixed; top: {position?.top ?? 0}px; left: {position?.left ?? 0}px; min-width: {Math.max(260, position?.width ?? 0)}px; max-width: 440px; z-index: 50; visibility: {position ? 'visible' : 'hidden'};"
+    onmousedown={(e) => e.preventDefault()}
+  >
+    {#if hints.activeCall}
+      <div data-formula-signature="" class="px-2 py-1.5 border-b border-border bg-muted/30">
+        <div class="font-mono">
+          {#each hints.activeCall.parts as part, i (i)}
+            <span data-active={part.active ? '' : undefined} class={part.active ? 'font-bold text-primary underline' : ''}>{part.text}</span>
+          {/each}
+        </div>
+        <div class="mt-0.5 text-muted-foreground">
+          {#if hints.activeCall.argument}
+            <span class="font-semibold">{hints.activeCall.argument.name}</span>: {hints.activeCall.argument.description}
+          {:else}
+            {hints.activeCall.description}
+          {/if}
+        </div>
+      </div>
+    {/if}
+    {#if suggestions.length > 0}
+      <ul role="listbox" aria-label="Formula suggestions" class="max-h-64 overflow-auto m-0 list-none p-0 py-1">
+        {#each suggestions as s, i (s.name)}
+          <li
+            role="option"
+            aria-selected={i === selectedIndex}
+            class="cursor-pointer px-2 py-1 {i === selectedIndex ? 'bg-primary/10' : 'hover:bg-muted/50'}"
+            onmouseenter={() => (selected = i)}
+            onmousedown={(e) => {
+              // Keep focus in the input so the edit isn't committed by blur.
+              e.preventDefault();
+              accept(i);
+            }}
+          >
+            <div class="font-mono font-semibold text-foreground">{s.signature}</div>
+            <div class="text-muted-foreground truncate">{s.description}</div>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+{/if}

package/dist/spreadsheet/FormulaHints.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** The input being edited (a cell editor or the formula bar). */
+    input?: HTMLInputElement | null;
+    /** The input's current value. */
+    value?: string;
+    /** Called with the new value when a suggestion is accepted. */
+    onAccept?: (value: string) => void;
+    /** Maximum number of function suggestions (default 8). */
+    limit?: number;
+}
+declare const FormulaHints: import("svelte").Component<Props, {}, "">;
+type FormulaHints = ReturnType<typeof FormulaHints>;
+export default FormulaHints;
+//# sourceMappingURL=FormulaHints.svelte.d.ts.map

package/dist/spreadsheet/FormulaHints.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormulaHints.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/FormulaHints.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoIH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/spreadsheet/SpreadsheetContextMenu.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { SpreadsheetMenuItem } from '@pixerate/editor/spreadsheet';
+
+  interface Props {
+    items: SpreadsheetMenuItem[];
+    x: number;
+    y: number;
+    onClose: () => void;
+  }
+
+  let { items, x, y, onClose }: Props = $props();
+  let menuEl = $state<HTMLDivElement | null>(null);
+
+  // Close on outside press or Escape.
+  $effect(() => {
+    const handlePointer = (e: MouseEvent) => {
+      if (!menuEl?.contains(e.target as Node)) onClose();
+    };
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('mousedown', handlePointer);
+    window.addEventListener('keydown', handleKey);
+    return () => {
+      window.removeEventListener('mousedown', handlePointer);
+      window.removeEventListener('keydown', handleKey);
+    };
+  });
+</script>
+
+<!-- The table context menu (sort, filter, freeze, hide, merge, categories, transpose). -->
+<div
+  bind:this={menuEl}
+  role="menu"
+  aria-label="Table actions"
+  tabindex="-1"
+  class="fixed z-50 min-w-[14rem] rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg"
+  style="left: {x}px; top: {y}px; background: var(--popover, var(--background, #fff));"
+  oncontextmenu={(e) => e.preventDefault()}
+  onkeydown={(e) => e.stopPropagation()}
+>
+  {#each items as item (item.id)}
+    {#if item.separatorBefore}
+      <div role="separator" class="my-1 h-px bg-border"></div>
+    {/if}
+    <button
+      type="button"
+      role="menuitem"
+      data-action={item.id}
+      disabled={item.disabled}
+      class="block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent"
+      onclick={() => {
+        onClose();
+        item.run();
+      }}
+    >
+      {item.label}
+    </button>
+  {/each}
+</div>

package/dist/spreadsheet/SpreadsheetContextMenu.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SpreadsheetMenuItem } from '@pixerate/editor/spreadsheet';
+interface Props {
+    items: SpreadsheetMenuItem[];
+    x: number;
+    y: number;
+    onClose: () => void;
+}
+declare const SpreadsheetContextMenu: import("svelte").Component<Props, {}, "">;
+type SpreadsheetContextMenu = ReturnType<typeof SpreadsheetContextMenu>;
+export default SpreadsheetContextMenu;
+//# sourceMappingURL=SpreadsheetContextMenu.svelte.d.ts.map

package/dist/spreadsheet/SpreadsheetContextMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpreadsheetContextMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetContextMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGtE,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA0CH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/spreadsheet/SpreadsheetEditor.svelte

@@ -1,8 +1,25 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { indexToColName, type SpreadsheetColumn, type SpreadsheetRow, type CellData } from '@pixerate/editor';
+  import {
+    indexToColName,
+    computeFillTarget,
+    getSpreadsheetMenuItems,
+    normalizeRange,
+    rangeContains,
+    type SpreadsheetColumn,
+    type SpreadsheetRow,
+    type CellData,
+    type CellRange,
+    type SpreadsheetMenuItem,
+    type SpreadsheetViewColumn,
+    type SpreadsheetViewRow
+  } from '@pixerate/editor/spreadsheet';
   import FormulaBar from './FormulaBar.svelte';
+  import SpreadsheetContextMenu from './SpreadsheetContextMenu.svelte';
+  import SpreadsheetGroupRow from './SpreadsheetGroupRow.svelte';
+  import FormulaHints from './FormulaHints.svelte';
   import { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
+  import { attachSpreadsheetClipboard } from './tableInteractions.js';
 
   interface Props {
     sheetState?: ReturnType<typeof createReactiveSpreadsheet>;
@@ -33,11 +50,75 @@
   let isReadOnly = $derived(readOnly || readonly);
 
   let gridContainer = $state<HTMLDivElement | null>(null);
+  let cellInput = $state<HTMLInputElement | null>(null);
   let resizingColId = $state<string | null>(null);
   let hoveredColId = $state<string | null>(null);
   let resizeStartX = $state(0);
   let resizeStartWidth = $state(0);
 
+  // --- Table operations: clipboard, fill handle, context menu, frozen panes ---
+
+  // Sizes of the sticky header row and row-number column, for frozen-pane offsets.
+  const COLUMN_HEADER_HEIGHT = 28;
+  const ROW_HEADER_WIDTH = 48;
+
+  let copyShortcutFallback: () => void = () => {};
+  $effect(() => {
+    const clipboard = attachSpreadsheetClipboard(() => gridContainer, sheetState, () => isReadOnly);
+    copyShortcutFallback = clipboard.copyShortcutFallback;
+    return () => clipboard.destroy();
+  });
+
+  let fillDrag = $state.raw<{ source: CellRange; target: CellRange | null } | null>(null);
+  let menu = $state.raw<{ x: number; y: number; items: SpreadsheetMenuItem[] } | null>(null);
+  let filteredColIds = $derived.by(() => {
+    const filter = sheetState.document.table?.filter;
+    return new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []);
+  });
+  let selection = $derived(sheetState.selectedRange ? normalizeRange(sheetState.selectedRange) : null);
+
+  /** Fill handle: press, move over cells, release to autofill (one undo step). */
+  function startFill(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    const range = sheetState.selectedRange;
+    if (!range) return;
+    fillDrag = { source: normalizeRange(range), target: null };
+    const finish = () => {
+      const current = fillDrag;
+      fillDrag = null;
+      if (current?.target) sheetState.autofill(current.source, current.target);
+    };
+    window.addEventListener('mouseup', finish, { once: true });
+  }
+
+  function extendFill(row: number, col: number) {
+    if (!fillDrag) return;
+    fillDrag = { source: fillDrag.source, target: computeFillTarget(fillDrag.source, { row, col }) };
+  }
+
+  function handleCellContextMenu(rIdx: number, cIdx: number, e: MouseEvent) {
+    if (isReadOnly) return;
+    e.preventDefault();
+    if (sheetState.editingCell) sheetState.commitEditing();
+    if (!sheetState.selectedRange || !rangeContains(sheetState.selectedRange, rIdx, cIdx)) {
+      sheetState.selectCell(rIdx, cIdx);
+    }
+    menu = { x: e.clientX, y: e.clientY, items: getSpreadsheetMenuItems(sheetState.controller, { row: rIdx, col: cIdx }) };
+  }
+
+  /** Sticky positioning for cells in frozen rows and/or columns. */
+  function frozenCellStyle(viewRow: Extract<SpreadsheetViewRow, { kind: 'row' }>, viewCol: SpreadsheetViewColumn): string {
+    if (!viewRow.frozen && !viewCol.frozen) return '';
+    const zIndex = viewRow.frozen && viewCol.frozen ? 14 : viewRow.frozen ? 12 : 11;
+    return (
+      'position: sticky;' +
+      (viewRow.frozen ? ` top: ${COLUMN_HEADER_HEIGHT + viewRow.stickyTop}px;` : '') +
+      (viewCol.frozen ? ` left: ${ROW_HEADER_WIDTH + viewCol.stickyLeft}px;` : '') +
+      ` z-index: ${zIndex}; background: var(--background, #fff);`
+    );
+  }
+
 
 
   function handleCellClick(rIdx: number, cIdx: number, e: MouseEvent) {
@@ -112,10 +193,9 @@
       e.preventDefault();
       sheetState.redo();
     } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'c') {
-      // Copy the selection, not the whole sheet.
-      e.preventDefault();
-      const tsv = sheetState.exportToTsv(sheetState.selectedRange);
-      navigator.clipboard?.writeText(tsv);
+      // Copy the selection, not the whole sheet. The browser's copy event
+      // writes TSV, HTML and the internal format; the fallback writes TSV.
+      copyShortcutFallback();
     } else if (!isReadOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       // Direct typing into cell starts editing
       const col = sheetState.document.columns[sheetState.activeCell.col];
@@ -256,8 +336,8 @@
     if (gridContainer && typeof document !== 'undefined') {
       const table = gridContainer.querySelector('table');
       if (table) {
-        const thElements = table.querySelectorAll('thead th');
-        const th = thElements[colIndex + 1] as HTMLElement | undefined;
+        // Look cells up by column index: hidden columns and merges shift DOM positions.
+        const th = table.querySelector(`thead th[data-col="${colIndex}"]`) as HTMLElement | null;
         if (th) {
           const headerInner = (th.firstElementChild as HTMLElement) || th;
           const headerW = measureElementContentWidth(headerInner, gridContainer);
@@ -268,7 +348,7 @@
         const sampleLimit = Math.min(rows.length, 150);
         for (let r = 0; r < sampleLimit; r++) {
           const tr = rows[r];
-          const td = tr.children[colIndex + 1] as HTMLElement | undefined;
+          const td = tr.querySelector(`td[data-col="${colIndex}"][colspan="1"]`) as HTMLElement | null;
           if (td) {
             const cellW = measureElementContentWidth(td, gridContainer);
             calculatedWidth = Math.max(calculatedWidth, cellW + 20);
@@ -345,15 +425,21 @@
           <th class="w-12 min-w-[3rem] sticky left-0 z-30 bg-muted/90 border-r border-border text-center text-[10px] text-muted-foreground font-medium">
             #
           </th>
-          {#each sheetState.document.columns as col, cIdx (col.id)}
+          {#each sheetState.viewModel.columns as viewCol (viewCol.column.id)}
+            {@const col = viewCol.column}
+            {@const cIdx = viewCol.index}
             <th
+              data-col={cIdx}
               class="relative border-r border-border px-2 text-left font-medium text-muted-foreground hover:bg-muted/90 transition-colors group overflow-hidden max-w-0 {onColumnHeaderClick ? 'cursor-pointer' : 'cursor-default'}"
-              style="width: {col.width || 130}px; min-width: {col.width || 130}px; max-width: {col.width || 130}px; overflow: hidden;"
+              style="width: {col.width || 130}px; min-width: {col.width || 130}px; max-width: {col.width || 130}px; overflow: hidden;{viewCol.frozen ? ` position: sticky; left: ${ROW_HEADER_WIDTH + viewCol.stickyLeft}px; z-index: 25; background: var(--muted, #f4f4f5);` : ''}"
               onclick={() => onColumnHeaderClick?.(col)}
               ondblclick={(e) => handleHeaderDblClick(col.id, cIdx, e)}
             >
               <div class="flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate">
                 <span class="truncate font-semibold text-foreground text-xs min-w-0">{col.title}</span>
+                {#if filteredColIds.has(col.id)}
+                  <span class="text-[10px] text-primary shrink-0" title="Filtered" data-filtered="true">⏷</span>
+                {/if}
                 <span class="text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0">({col.key})</span>
               </div>
               <!-- Column Resize Handle -->
@@ -388,43 +474,98 @@
 
       <!-- Table Body Rows -->
       <tbody>
-        {#each sheetState.document.rows as row, rIdx (row.id)}
-          <tr class="border-b border-border hover:bg-muted/10 transition-colors" style="height: {row.height || 32}px;">
+        {#each sheetState.viewModel.rows as viewRow (viewRow.kind === 'group' ? `group:${viewRow.group.key}` : viewRow.row.id)}
+          {#if viewRow.kind === 'group'}
+            <SpreadsheetGroupRow
+              group={viewRow.group}
+              columns={sheetState.viewModel.columns}
+              groupColId={sheetState.document.table?.grouping?.colId ?? ''}
+              onToggle={sheetState.toggleGroupCollapsed}
+              trailingCell={!!onAddColumnClick}
+            />
+          {:else}
+          {@const displayRowIndex = viewRow.index}
+          <tr
+            data-row={displayRowIndex}
+            class="border-b border-border hover:bg-muted/10 transition-colors {viewRow.section !== 'body' ? 'bg-muted/30 font-semibold' : ''}"
+            style="height: {viewRow.row.height || 32}px;"
+          >
             <!-- Row Header Index -->
-            <td class="w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/50 border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none">
-              {rIdx + 1}
+            <td
+              class="w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/50 border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none"
+              style={viewRow.frozen ? `top: ${COLUMN_HEADER_HEIGHT + viewRow.stickyTop}px; z-index: 15;` : undefined}
+            >
+              {displayRowIndex + 1}
             </td>
 
-            <!-- Cells -->
-            {#each sheetState.document.columns as col, cIdx (col.id)}
+            <!-- Cells (a merged cell renders its top-left cell, spanning the merge) -->
+            {#each sheetState.viewModel.columns as viewCol (viewCol.column.id)}
+              {@const span = sheetState.viewModel.getCellSpan(displayRowIndex, viewCol.index)}
+              {#if span}
+              {@const rIdx = span.source.row}
+              {@const cIdx = span.source.col}
+              {@const row = sheetState.document.rows[rIdx]}
+              {@const col = sheetState.document.columns[cIdx]}
               {@const cell = sheetState.getCell(row.id, col.id)}
               {@const selected = isCellSelected(rIdx, cIdx)}
               {@const active = isActiveCell(rIdx, cIdx)}
               {@const isEditing = sheetState.editingCell?.row === rIdx && sheetState.editingCell?.col === cIdx}
 
+              {@const inFillPreview = !!fillDrag?.target && !selected && rangeContains(fillDrag.target, displayRowIndex, viewCol.index)}
+              {@const showFillHandle =
+                !isReadOnly &&
+                !isEditing &&
+                !!selection &&
+                (span.merge
+                  ? rangeContains(span.merge, selection.endRow, selection.endCol)
+                  : selection.endRow === rIdx && selection.endCol === cIdx)}
+
+              <!-- svelte-ignore a11y_mouse_events_have_key_events -->
               <td
-                class="relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors {selected ? 'bg-primary/10' : ''} {active ? 'ring-2 ring-primary ring-inset z-10' : ''}"
-                style="max-width: 0; overflow: hidden;"
+                data-row={rIdx}
+                data-col={cIdx}
+                rowspan={span.rowSpan}
+                colspan={span.colSpan}
+                class="relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors {selected ? 'bg-primary/10' : ''} {active ? 'ring-2 ring-primary ring-inset z-10' : ''} {viewCol.header ? 'font-semibold' : ''}"
+                style="max-width: 0; overflow: hidden; {frozenCellStyle(viewRow, viewCol)}{inFillPreview ? ' outline: 1px dashed var(--primary, #6366f1); outline-offset: -1px;' : ''}"
                 onclick={(e) => handleCellClick(rIdx, cIdx, e)}
                 ondblclick={() => handleCellDblClick(rIdx, cIdx)}
+                oncontextmenu={(e) => handleCellContextMenu(rIdx, cIdx, e)}
+                onmouseover={() => extendFill(displayRowIndex, viewCol.index)}
               >
                 {#if isEditing}
                   <input
                     type="text"
                     class="absolute inset-0 w-full h-full px-2 py-1 bg-background text-foreground outline-none font-sans text-xs border-2 border-primary z-20"
+                    bind:this={cellInput}
                     bind:value={sheetState.draftValue}
                     onblur={() => sheetState.commitEditing()}
                     
                   />
+                  <FormulaHints input={cellInput} value={sheetState.draftValue} onAccept={(next) => (sheetState.draftValue = next)} />
                 {:else if customCellRenderer}
                   {@const cellArg = Object.assign({ row, col, cell }, cell)}
                   {@render (customCellRenderer as any)(cellArg, col, row)}
                 {:else}
-                  <span class="truncate block max-w-full {cell.error ? 'text-destructive font-semibold' : ''}">
+                  <span
+                    class="truncate block max-w-full {cell.error ? 'text-destructive font-semibold' : ''}"
+                    title={cell.error ? (cell.errorMessage ?? cell.error) : undefined}
+                  >
                     {cell.error || (cell.value ?? '')}
                   </span>
                 {/if}
+                {#if showFillHandle}
+                  <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+                  <div
+                    class="spreadsheet-fill-handle"
+                    aria-label="Fill handle"
+                    onmousedown={startFill}
+                    onclick={(e) => e.stopPropagation()}
+                    style="position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; background: var(--primary, #6366f1); cursor: crosshair; z-index: 25;"
+                  ></div>
+                {/if}
               </td>
+              {/if}
             {/each}
             {#if onAddColumnClick}
               <td class="w-10 min-w-[2.5rem] bg-muted/10 border-r border-border"></td>
@@ -432,10 +573,22 @@
             <!-- Spacer cell to absorb remaining table width -->
             <td class="border-b border-border bg-transparent p-0"></td>
           </tr>
+          {/if}
         {/each}
       </tbody>
     </table>
   </div>
+  {#if menu}
+    <SpreadsheetContextMenu
+      items={menu.items}
+      x={menu.x}
+      y={menu.y}
+      onClose={() => {
+        menu = null;
+        gridContainer?.focus();
+      }}
+    />
+  {/if}
 </div>
 
 <style>

package/dist/spreadsheet/SpreadsheetEditor.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type SpreadsheetColumn, type SpreadsheetRow, type CellData } from '@pixerate/editor';
+import { type SpreadsheetColumn, type SpreadsheetRow, type CellData } from '@pixerate/editor/spreadsheet';
 import { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
 interface Props {
     sheetState?: ReturnType<typeof createReactiveSpreadsheet>;

package/dist/spreadsheet/SpreadsheetEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpreadsheetEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAkB,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9G,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGlE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EACf,OAAO,CAAC,CAAC,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,GACtD,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,cAAc,CAAC;QAAC,GAAG,EAAE,iBAAiB,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AA4YH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SpreadsheetEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAMH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,QAAQ,EAKd,MAAM,8BAA8B,CAAC;AAKxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIlE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EACf,OAAO,CAAC,CAAC,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,GACtD,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,cAAc,CAAC;QAAC,GAAG,EAAE,iBAAiB,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AAqfH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/spreadsheet/SpreadsheetGroupRow.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { SpreadsheetRowGroup, SpreadsheetViewColumn } from '@pixerate/editor/spreadsheet';
+
+  interface Props {
+    group: SpreadsheetRowGroup;
+    columns: SpreadsheetViewColumn[];
+    /** Column the rows are grouped by: shows the group label and toggle. */
+    groupColId: string;
+    onToggle: (key: string) => void;
+    /** Render a trailing cell for the "add column" column. */
+    trailingCell?: boolean;
+  }
+
+  let { group, columns, groupColId, onToggle, trailingCell = false }: Props = $props();
+
+  // The label goes in the grouping column, or the first column when that one is hidden.
+  let labelColId = $derived(columns.some((c) => c.column.id === groupColId) ? groupColId : columns[0]?.column.id);
+
+  const formatSummary = (value: number | null) => (value === null ? '–' : String(value));
+</script>
+
+<!-- A category header row: collapse toggle, label, row count and per-column summaries. -->
+<tr class="border-b border-border bg-muted/40 font-semibold" data-group-key={group.key} style="height: 28px;">
+  <td class="w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/60 border-r border-border text-center">
+    <button
+      type="button"
+      aria-label="{group.collapsed ? 'Expand' : 'Collapse'} group {group.label}"
+      aria-expanded={!group.collapsed}
+      class="h-5 w-5 rounded text-[10px] text-muted-foreground hover:bg-muted"
+      onclick={(e) => {
+        e.stopPropagation();
+        onToggle(group.key);
+      }}
+    >
+      {group.collapsed ? '▸' : '▾'}
+    </button>
+  </td>
+  {#each columns as { column } (column.id)}
+    {@const summary = group.summaries[column.id]}
+    <td class="border-r border-border px-2 py-1 truncate max-w-0 text-foreground" style="max-width: 0; overflow: hidden;">
+      {#if column.id === labelColId}
+        <span class="truncate">
+          {group.label} <span class="font-normal text-muted-foreground">({group.rowIndices.length})</span>
+        </span>
+      {:else if summary !== undefined}
+        <span class="truncate" data-summary={column.id}>{formatSummary(summary)}</span>
+      {/if}
+    </td>
+  {/each}
+  {#if trailingCell}
+    <td class="w-10 min-w-[2.5rem] bg-muted/10 border-r border-border"></td>
+  {/if}
+  <!-- Spacer cell to absorb remaining table width -->
+  <td class="border-b border-border bg-transparent p-0"></td>
+</tr>

package/dist/spreadsheet/SpreadsheetGroupRow.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { SpreadsheetRowGroup, SpreadsheetViewColumn } from '@pixerate/editor/spreadsheet';
+interface Props {
+    group: SpreadsheetRowGroup;
+    columns: SpreadsheetViewColumn[];
+    /** Column the rows are grouped by: shows the group label and toggle. */
+    groupColId: string;
+    onToggle: (key: string) => void;
+    /** Render a trailing cell for the "add column" column. */
+    trailingCell?: boolean;
+}
+declare const SpreadsheetGroupRow: import("svelte").Component<Props, {}, "">;
+type SpreadsheetGroupRow = ReturnType<typeof SpreadsheetGroupRow>;
+export default SpreadsheetGroupRow;
+//# sourceMappingURL=SpreadsheetGroupRow.svelte.d.ts.map

package/dist/spreadsheet/SpreadsheetGroupRow.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpreadsheetGroupRow.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetGroupRow.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAG7F,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,CAAC;IAC3B,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA4CH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/spreadsheet/index.d.ts

@@ -1,9 +1,15 @@
 import type { ComponentProps } from "svelte";
 import type SpreadsheetEditorComponent from "./SpreadsheetEditor.svelte";
 import type FormulaBarComponent from "./FormulaBar.svelte";
+import type FormulaHintsComponent from "./FormulaHints.svelte";
 export { default as SpreadsheetEditor } from './SpreadsheetEditor.svelte';
 export { default as FormulaBar } from './FormulaBar.svelte';
+export { default as FormulaHints } from './FormulaHints.svelte';
 export * from './spreadsheet.svelte.js';
+export { default as SpreadsheetContextMenu } from './SpreadsheetContextMenu.svelte';
+export { default as SpreadsheetGroupRow } from './SpreadsheetGroupRow.svelte';
+export * from './tableInteractions.js';
 export type SpreadsheetEditorProps = ComponentProps<typeof SpreadsheetEditorComponent>;
 export type FormulaBarProps = ComponentProps<typeof FormulaBarComponent>;
+export type FormulaHintsProps = ComponentProps<typeof FormulaHintsComponent>;
 //# sourceMappingURL=index.d.ts.map

package/dist/spreadsheet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,cAAc,yBAAyB,CAAC;AAExC,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AACvF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,cAAc,wBAAwB,CAAC;AAEvC,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AACvF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}