@warkypublic/svelix 0.1.0

package/dist/components/Gridler/Gridler.svelte

@@ -0,0 +1,778 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { GridlerProps, GridlerColumn, GridlerCell, GridlerTheme, Item, Selection, VisibleRange } from './types';
+  import { DEFAULT_THEME } from './types';
+  import { drawCell, drawHeaderCell, isInSelection } from './utils/rendering';
+  import { calculateVisibleRange, getColumnX, getTotalWidth, getTotalHeight, getCellFromPoint, scrollToCell, getResizeHandle, getColumnFromX } from './utils/scrolling';
+
+  export interface Props extends Partial<GridlerProps> {
+    columns: GridlerColumn[];
+    rows: number;
+    getCellContent: (item: Item) => GridlerCell;
+    children?: Snippet;
+  }
+
+  const {
+    columns,
+    rows,
+    getCellContent,
+    onCellEdited,
+    onRowAppended,
+    onColumnMoved,
+    onDelete,
+    onSelectionCleared,
+    width = '100%',
+    height = '400px',
+    rowHeight = 34,
+    headerHeight = 36,
+    readonly = false,
+    fixedColumns = 0,
+    rowMarkers = 'none',
+    showSearch = false,
+    searchValue = '',
+    theme = {},
+    selection = { type: 'none' } as Selection,
+    onSelectionChange,
+    children,
+  }: Props = $props();
+
+  const mergedTheme: GridlerTheme = $derived({ ...DEFAULT_THEME, ...theme });
+
+  let scrollX = $state(0);
+  let scrollY = $state(0);
+  let currentSelection = $state<Selection>(selection);
+  let focusedCell = $state<Item | null>(null);
+  let isEditing = $state(false);
+  let editingCell = $state<Item | null>(null);
+  let isDragging = $state(false);
+  let dragStart = $state<Item | null>(null);
+  let resizingColumn = $state<number | null>(null);
+  let draggingHeaderCol = $state<number | null>(null);
+  let dragHeaderCurrentX = $state(0);
+  let announcement = $state('');
+
+  let containerRef: HTMLDivElement | undefined = $state();
+  let canvasRef: HTMLCanvasElement | undefined = $state();
+  let scrollRef: HTMLDivElement | undefined = $state();
+  let ctx: CanvasRenderingContext2D | null = $derived(canvasRef?.getContext('2d') ?? null);
+
+  let containerWidth = $state(0);
+  let containerHeight = $state(0);
+
+  let drawPending = false;
+
+  const rowMarkerWidth = $derived(rowMarkers !== 'none' ? 40 : 0);
+  const totalWidth = $derived(getTotalWidth(columns) + rowMarkerWidth);
+  const totalHeight = $derived(getTotalHeight(rows, rowHeight));
+
+  const visibleRange: VisibleRange = $derived.by(() => {
+    if (!containerWidth || !containerHeight) {
+      return { firstCol: 0, lastCol: 0, firstRow: 0, lastRow: 0 };
+    }
+    return calculateVisibleRange(
+      scrollX,
+      scrollY,
+      containerWidth,
+      containerHeight,
+      columns,
+      rowHeight,
+      headerHeight,
+      rows
+    );
+  });
+
+  $effect(() => {
+    void visibleRange;
+    void searchValue;
+    void currentSelection;
+    if (ctx && containerWidth > 0 && containerHeight > 0) {
+      scheduleDraw();
+    }
+  });
+
+  function scheduleDraw() {
+    if (drawPending) return;
+    drawPending = true;
+    requestAnimationFrame(() => {
+      drawPending = false;
+      renderFrame();
+    });
+  }
+
+  function renderFrame() {
+    if (!ctx || !canvasRef) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const canvasWidth = containerWidth;
+    const canvasHeight = containerHeight;
+
+    canvasRef.width = canvasWidth * dpr;
+    canvasRef.height = canvasHeight * dpr;
+    canvasRef.style.width = `${canvasWidth}px`;
+    canvasRef.style.height = `${canvasHeight}px`;
+    ctx.scale(dpr, dpr);
+
+    ctx.fillStyle = mergedTheme.bgCell;
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+    renderHeaders(ctx, visibleRange);
+    renderCells(ctx, visibleRange);
+    renderRowMarkers(ctx, visibleRange);
+    renderDragIndicator(ctx);
+
+    if (fixedColumns > 0) {
+      renderFixedColumns(ctx, visibleRange);
+      renderFixedHeaders(ctx);
+    }
+  }
+
+  function renderHeaders(ctx: CanvasRenderingContext2D, range: VisibleRange) {
+    const isColSelected = (col: number) =>
+      currentSelection.type === 'column' && currentSelection.columns.includes(col);
+
+    for (let col = Math.max(range.firstCol, fixedColumns); col <= range.lastCol; col++) {
+      const column = columns[col];
+      if (!column) continue;
+      const x = getColumnX(columns, col) - scrollX + rowMarkerWidth;
+      drawHeaderCell(ctx, x, 0, column.width, headerHeight, column.title, mergedTheme, isColSelected(col));
+    }
+  }
+
+  function renderFixedHeaders(ctx: CanvasRenderingContext2D) {
+    const isColSelected = (col: number) =>
+      currentSelection.type === 'column' && currentSelection.columns.includes(col);
+
+    for (let col = 0; col < fixedColumns && col < columns.length; col++) {
+      const column = columns[col];
+      const x = getColumnX(columns, col) + rowMarkerWidth;
+      drawHeaderCell(ctx, x, 0, column.width, headerHeight, column.title, mergedTheme, isColSelected(col));
+    }
+
+    // Frozen column separator shadow
+    const frozenBoundaryX = getColumnX(columns, fixedColumns) + rowMarkerWidth;
+    const grad = ctx.createLinearGradient(frozenBoundaryX, 0, frozenBoundaryX + 6, 0);
+    grad.addColorStop(0, 'rgba(0,0,0,0.12)');
+    grad.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = grad;
+    ctx.fillRect(frozenBoundaryX, 0, 6, containerHeight);
+  }
+
+  function renderCells(ctx: CanvasRenderingContext2D, range: VisibleRange) {
+    const search = searchValue?.toLowerCase() ?? '';
+    for (let row = range.firstRow; row <= range.lastRow; row++) {
+      for (let col = Math.max(range.firstCol, fixedColumns); col <= range.lastCol; col++) {
+        const column = columns[col];
+        if (!column) continue;
+        const x = getColumnX(columns, col) - scrollX + rowMarkerWidth;
+        const y = row * rowHeight - scrollY + headerHeight;
+        const item: Item = [col, row];
+        const cell = getCellContent(item);
+        const selected = isInSelection(item, currentSelection);
+        const isSearchMatch = search.length > 0 && cell.displayData.toLowerCase().includes(search);
+        drawCell(ctx, x, y, column.width, rowHeight, cell, mergedTheme, selected, false, isSearchMatch);
+      }
+    }
+  }
+
+  function renderFixedColumns(ctx: CanvasRenderingContext2D, range: VisibleRange) {
+    const search = searchValue?.toLowerCase() ?? '';
+    for (let row = range.firstRow; row <= range.lastRow; row++) {
+      for (let col = 0; col < fixedColumns && col < columns.length; col++) {
+        const column = columns[col];
+        const x = getColumnX(columns, col) + rowMarkerWidth;
+        const y = row * rowHeight - scrollY + headerHeight;
+        const item: Item = [col, row];
+        const cell = getCellContent(item);
+        const selected = isInSelection(item, currentSelection);
+        const isSearchMatch = search.length > 0 && cell.displayData.toLowerCase().includes(search);
+        drawCell(ctx, x, y, column.width, rowHeight, cell, mergedTheme, selected, false, isSearchMatch);
+      }
+    }
+  }
+
+  function renderRowMarkers(ctx: CanvasRenderingContext2D, range: VisibleRange) {
+    if (rowMarkers === 'none') return;
+
+    ctx.fillStyle = mergedTheme.bgHeader;
+    ctx.fillRect(0, headerHeight, rowMarkerWidth, containerHeight - headerHeight);
+
+    ctx.strokeStyle = mergedTheme.borderColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(rowMarkerWidth, headerHeight);
+    ctx.lineTo(rowMarkerWidth, containerHeight);
+    ctx.stroke();
+
+    // Corner cell
+    ctx.fillStyle = mergedTheme.bgHeader;
+    ctx.fillRect(0, 0, rowMarkerWidth, headerHeight);
+    ctx.strokeStyle = mergedTheme.borderColor;
+    ctx.strokeRect(0, 0, rowMarkerWidth, headerHeight);
+
+    for (let row = range.firstRow; row <= range.lastRow; row++) {
+      const y = row * rowHeight - scrollY + headerHeight;
+
+      if (rowMarkers === 'number') {
+        const isRowSelected = currentSelection.type === 'row' && currentSelection.rows.includes(row);
+        if (isRowSelected) {
+          ctx.fillStyle = mergedTheme.bgHeaderHasFocus;
+          ctx.fillRect(0, y, rowMarkerWidth, rowHeight);
+        }
+        ctx.font = `${mergedTheme.fontSize}px ${mergedTheme.fontFamily}`;
+        ctx.fillStyle = mergedTheme.foreground;
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(String(row + 1), rowMarkerWidth - 8, y + rowHeight / 2);
+        ctx.textAlign = 'left';
+      } else if (rowMarkers === 'checkbox') {
+        const isSelected = currentSelection.type === 'row' && currentSelection.rows.includes(row);
+        const checkboxX = rowMarkerWidth / 2 - 6;
+        const checkboxY = y + rowHeight / 2 - 6;
+
+        ctx.strokeStyle = mergedTheme.borderColor;
+        ctx.lineWidth = 1;
+        ctx.strokeRect(checkboxX, checkboxY, 12, 12);
+
+        if (isSelected) {
+          ctx.fillStyle = mergedTheme.accentColor;
+          ctx.fillRect(checkboxX + 2, checkboxY + 2, 8, 8);
+        }
+      }
+    }
+  }
+
+  function renderDragIndicator(ctx: CanvasRenderingContext2D) {
+    if (draggingHeaderCol === null) return;
+    const col = columns[draggingHeaderCol];
+    if (!col) return;
+
+    const dropCol = getColumnFromX(dragHeaderCurrentX + scrollX - rowMarkerWidth, columns);
+    const dropX = getColumnX(columns, dropCol) - scrollX + rowMarkerWidth;
+
+    ctx.fillStyle = 'rgba(79,70,229,0.15)';
+    const colX = getColumnX(columns, draggingHeaderCol) - scrollX + rowMarkerWidth;
+    ctx.fillRect(colX, 0, col.width, containerHeight);
+
+    ctx.fillStyle = mergedTheme.accentColor;
+    ctx.fillRect(dropX - 2, 0, 3, containerHeight);
+  }
+
+  function handleScroll(e: Event) {
+    const target = e.target as HTMLElement;
+    scrollX = target.scrollLeft;
+    scrollY = target.scrollTop;
+  }
+
+  function handleMouseDown(e: MouseEvent) {
+    containerRef?.focus();
+    if (readonly) return;
+
+    // Header interactions
+    if (e.offsetY < headerHeight) {
+      const adjustedX = e.offsetX - rowMarkerWidth;
+
+      const resizeCol = getResizeHandle(adjustedX + scrollX, columns, 0);
+      if (resizeCol !== null) {
+        resizingColumn = resizeCol;
+        return;
+      }
+
+      // Column drag reorder (only if onColumnMoved provided)
+      if (onColumnMoved) {
+        const col = getColumnFromX(adjustedX + scrollX, columns);
+        draggingHeaderCol = col;
+        dragHeaderCurrentX = e.offsetX;
+        return;
+      }
+
+      // Column header click → column selection
+      const col = getColumnFromX(adjustedX + scrollX, columns);
+      if (col >= 0 && col < columns.length) {
+        if (e.shiftKey && currentSelection.type === 'column') {
+          const cols = [...currentSelection.columns];
+          if (!cols.includes(col)) cols.push(col);
+          currentSelection = { type: 'column', columns: cols };
+        } else {
+          currentSelection = { type: 'column', columns: [col] };
+        }
+        onSelectionChange?.(currentSelection);
+        announcement = `Column ${columns[col].title} selected`;
+      }
+      return;
+    }
+
+    const cell = getCellFromPoint(
+      e.offsetX - rowMarkerWidth,
+      e.offsetY,
+      scrollX,
+      scrollY,
+      columns,
+      rowHeight,
+      headerHeight
+    );
+
+    if (rowMarkers !== 'none' && e.offsetX < rowMarkerWidth) {
+      if (e.offsetY >= headerHeight) {
+        const row = Math.floor((e.offsetY - headerHeight + scrollY) / rowHeight);
+        if (row >= 0 && row < rows) toggleRowSelection(row);
+      }
+      return;
+    }
+
+    if (cell) {
+      if (e.shiftKey && focusedCell) {
+        const newSelection: Selection = { type: 'range', start: focusedCell, end: cell };
+        currentSelection = newSelection;
+        onSelectionChange?.(newSelection);
+      } else {
+        focusedCell = cell;
+        dragStart = cell;
+        isDragging = true;
+        currentSelection = { type: 'cell', item: cell };
+        onSelectionChange?.(currentSelection);
+        announcement = `Row ${cell[1] + 1}, column ${columns[cell[0]]?.title ?? cell[0] + 1}`;
+      }
+    }
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (resizingColumn !== null) {
+      const baseX = getColumnX(columns, resizingColumn) + rowMarkerWidth;
+      const newWidth = Math.max(50, e.offsetX - baseX + scrollX);
+      columns[resizingColumn].width = newWidth;
+      scheduleDraw();
+      return;
+    }
+
+    if (draggingHeaderCol !== null) {
+      dragHeaderCurrentX = e.offsetX;
+      scheduleDraw();
+      return;
+    }
+
+    if (!isDragging || !dragStart) return;
+
+    const cell = getCellFromPoint(
+      e.offsetX - rowMarkerWidth,
+      e.offsetY,
+      scrollX,
+      scrollY,
+      columns,
+      rowHeight,
+      headerHeight
+    );
+
+    if (cell && (cell[0] !== dragStart[0] || cell[1] !== dragStart[1])) {
+      currentSelection = { type: 'range', start: dragStart, end: cell };
+      onSelectionChange?.(currentSelection);
+    }
+  }
+
+  function handleMouseUp(e: MouseEvent) {
+    if (draggingHeaderCol !== null && onColumnMoved) {
+      const adjustedX = e.offsetX - rowMarkerWidth;
+      const targetCol = getColumnFromX(adjustedX + scrollX, columns);
+      if (targetCol !== draggingHeaderCol) {
+        onColumnMoved(draggingHeaderCol, targetCol);
+      }
+      draggingHeaderCol = null;
+      scheduleDraw();
+    }
+
+    isDragging = false;
+    dragStart = null;
+    resizingColumn = null;
+  }
+
+  function handleWheel(e: WheelEvent) {
+    if (scrollRef) {
+      scrollRef.scrollLeft += e.deltaX;
+      scrollRef.scrollTop += e.deltaY;
+    }
+  }
+
+  async function copySelection(): Promise<void> {
+    const lines: string[] = [];
+
+    if (currentSelection.type === 'cell') {
+      lines.push(getCellContent(currentSelection.item).displayData);
+    } else if (currentSelection.type === 'range') {
+      const [startCol, startRow] = currentSelection.start;
+      const [endCol, endRow] = currentSelection.end;
+      const minCol = Math.min(startCol, endCol);
+      const maxCol = Math.max(startCol, endCol);
+      const minRow = Math.min(startRow, endRow);
+      const maxRow = Math.max(startRow, endRow);
+      for (let row = minRow; row <= maxRow; row++) {
+        const rowData: string[] = [];
+        for (let col = minCol; col <= maxCol; col++) {
+          rowData.push(getCellContent([col, row]).displayData);
+        }
+        lines.push(rowData.join('\t'));
+      }
+    } else if (currentSelection.type === 'row') {
+      for (const row of currentSelection.rows) {
+        const rowData = columns.map((_, col) => getCellContent([col, row]).displayData);
+        lines.push(rowData.join('\t'));
+      }
+    } else if (currentSelection.type === 'column') {
+      for (let row = 0; row < rows; row++) {
+        const rowData = currentSelection.columns.map((col) => getCellContent([col, row]).displayData);
+        lines.push(rowData.join('\t'));
+      }
+    }
+
+    if (lines.length > 0) {
+      await navigator.clipboard.writeText(lines.join('\n'));
+      announcement = `Copied ${lines.length} row${lines.length > 1 ? 's' : ''} to clipboard`;
+    }
+  }
+
+  async function pasteFromClipboard(): Promise<void> {
+    if (readonly || !focusedCell) return;
+    const text = await navigator.clipboard.readText();
+    const pastedRows = text.split('\n').map((line) => line.split('\t'));
+    const [startCol, startRow] = focusedCell;
+
+    for (let r = 0; r < pastedRows.length; r++) {
+      for (let c = 0; c < pastedRows[r].length; c++) {
+        const col = startCol + c;
+        const row = startRow + r;
+        if (col >= columns.length || row >= rows) continue;
+        const item: Item = [col, row];
+        const cell = getCellContent(item);
+        if (!cell.readonly && cell.allowEditing !== false) {
+          const newCell: GridlerCell = { ...cell, displayData: pastedRows[r][c], data: pastedRows[r][c] };
+          onCellEdited?.(item, newCell);
+        }
+      }
+    }
+    announcement = `Pasted ${pastedRows.length} row${pastedRows.length > 1 ? 's' : ''}`;
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    // Copy/paste shortcuts
+    if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+      copySelection();
+      e.preventDefault();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+      pasteFromClipboard();
+      e.preventDefault();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+      if (rows > 0 && columns.length > 0) {
+        currentSelection = { type: 'range', start: [0, 0], end: [columns.length - 1, rows - 1] };
+        onSelectionChange?.(currentSelection);
+        announcement = 'All cells selected';
+      }
+      e.preventDefault();
+      return;
+    }
+
+    if (!focusedCell) return;
+
+    const [col, row] = focusedCell;
+    let newCol = col;
+    let newRow = row;
+
+    switch (e.key) {
+      case 'ArrowUp':
+        newRow = Math.max(0, row - 1);
+        e.preventDefault();
+        break;
+      case 'ArrowDown':
+        newRow = Math.min(rows - 1, row + 1);
+        e.preventDefault();
+        break;
+      case 'ArrowLeft':
+        newCol = Math.max(0, col - 1);
+        e.preventDefault();
+        break;
+      case 'ArrowRight':
+        newCol = Math.min(columns.length - 1, col + 1);
+        e.preventDefault();
+        break;
+      case 'Enter':
+        if (!readonly) {
+          beginEdit(focusedCell);
+        }
+        e.preventDefault();
+        return;
+      case 'Escape':
+        cancelEdit();
+        if (currentSelection.type !== 'none') {
+          onSelectionCleared?.();
+        }
+        return;
+      case 'Tab':
+        if (e.shiftKey) {
+          newCol = col - 1;
+          if (newCol < 0) {
+            newCol = columns.length - 1;
+            newRow = Math.max(0, row - 1);
+          }
+        } else {
+          newCol = col + 1;
+          if (newCol >= columns.length) {
+            newCol = 0;
+            newRow = Math.min(rows - 1, row + 1);
+            onRowAppended?.();
+          }
+        }
+        e.preventDefault();
+        break;
+      case 'Delete':
+      case 'Backspace':
+        if (!readonly && currentSelection.type !== 'none') {
+          onDelete?.(currentSelection);
+        }
+        return;
+      default:
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !readonly) {
+          beginEdit(focusedCell);
+        }
+        return;
+    }
+
+    if (newCol !== col || newRow !== row) {
+      focusedCell = [newCol, newRow];
+      currentSelection = { type: 'cell', item: focusedCell };
+      onSelectionChange?.(currentSelection);
+      announcement = `Row ${newRow + 1}, column ${columns[newCol]?.title ?? newCol + 1}`;
+
+      if (scrollRef) {
+        const scrollTarget = scrollToCell(
+          focusedCell,
+          columns,
+          rowHeight,
+          headerHeight,
+          containerWidth,
+          containerHeight
+        );
+        if (scrollTarget) {
+          scrollRef.scrollLeft = scrollTarget.scrollX;
+          scrollRef.scrollTop = scrollTarget.scrollY;
+        }
+      }
+    }
+  }
+
+  function beginEdit(cell: Item) {
+    const cellContent = getCellContent(cell);
+    if (cellContent.readonly) return;
+    editingCell = cell;
+    isEditing = true;
+  }
+
+  function cancelEdit() {
+    isEditing = false;
+    editingCell = null;
+  }
+
+  function handleEditComplete(value: string) {
+    if (editingCell) {
+      const cell = getCellContent(editingCell);
+      const newCell: GridlerCell = { ...cell, displayData: value, data: value };
+      onCellEdited?.(editingCell, newCell);
+    }
+    cancelEdit();
+  }
+
+  function toggleRowSelection(row: number) {
+    if (currentSelection.type === 'row' && currentSelection.rows.includes(row)) {
+      const newRows = currentSelection.rows.filter(r => r !== row);
+      currentSelection = newRows.length > 0 ? { type: 'row', rows: newRows } : { type: 'none' };
+    } else if (currentSelection.type === 'row') {
+      currentSelection = { type: 'row', rows: [...currentSelection.rows, row] };
+    } else {
+      currentSelection = { type: 'row', rows: [row] };
+    }
+    onSelectionChange?.(currentSelection);
+  }
+
+  $effect(() => {
+    if (!containerRef) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        containerWidth = entry.contentRect.width;
+        containerHeight = entry.contentRect.height;
+      }
+    });
+
+    observer.observe(containerRef);
+    return () => observer.disconnect();
+  });
+
+  const containerWidthStyle = $derived(typeof width === 'number' ? `${width}px` : width);
+  const containerHeightStyle = $derived(typeof height === 'number' ? `${height}px` : height);
+</script>
+
+<div
+  bind:this={containerRef}
+  class="gridler"
+  role="grid"
+  tabindex="0"
+  aria-rowcount={rows}
+  aria-colcount={columns.length}
+  aria-label="Data grid"
+  style:width={containerWidthStyle}
+  style:height={containerHeightStyle}
+  onkeydown={handleKeyDown}
+>
+  <canvas
+    bind:this={canvasRef}
+    class="gridler-canvas"
+    aria-hidden="true"
+    onmousedown={handleMouseDown}
+    onmousemove={handleMouseMove}
+    onmouseup={handleMouseUp}
+    onmouseleave={handleMouseUp}
+    onwheel={handleWheel}
+  ></canvas>
+
+  <div
+    bind:this={scrollRef}
+    class="gridler-scroll"
+    role="presentation"
+    onscroll={handleScroll}
+  >
+    <div
+      class="gridler-content"
+      style:width={`${totalWidth}px`}
+      style:height={`${totalHeight}px`}
+    ></div>
+  </div>
+
+  {#if isEditing && editingCell}
+    <div
+      class="gridler-editor"
+      role="gridcell"
+      style:left={`${getColumnX(columns, editingCell[0]) - scrollX + rowMarkerWidth}px`}
+      style:top={`${editingCell[1] * rowHeight - scrollY + headerHeight}px`}
+      style:width={`${columns[editingCell[0]].width}px`}
+      style:height={`${rowHeight}px`}
+    >
+      <input
+        type="text"
+        value={getCellContent(editingCell).displayData}
+        onkeydown={(e) => {
+          if (e.key === 'Enter') {
+            handleEditComplete(e.currentTarget.value);
+          } else if (e.key === 'Escape') {
+            cancelEdit();
+          }
+        }}
+        onblur={(e) => handleEditComplete(e.currentTarget.value)}
+      />
+    </div>
+  {/if}
+
+  {#if showSearch}
+    <div class="gridler-search" role="search">
+      <input
+        type="search"
+        placeholder="Search…"
+        value={searchValue}
+        aria-label="Search grid"
+        class="gridler-search-input"
+      />
+    </div>
+  {/if}
+
+  <div role="status" aria-live="polite" class="sr-only">
+    {announcement}
+  </div>
+
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .gridler {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid var(--gridler-border, #e2e8f0);
+    border-radius: 4px;
+    background: var(--gridler-bg, #ffffff);
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  .gridler-scroll {
+    flex: 1;
+    overflow: auto;
+    position: relative;
+    z-index: 1;
+  }
+
+  .gridler-content {
+    position: relative;
+    pointer-events: none;
+  }
+
+  .gridler-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    cursor: default;
+  }
+
+  .gridler-editor {
+    position: absolute;
+    z-index: 10;
+    pointer-events: auto;
+  }
+
+  .gridler-editor input {
+    width: 100%;
+    height: 100%;
+    padding: 4px 8px;
+    border: 2px solid var(--gridler-accent, #4f46e5);
+    border-radius: 2px;
+    font-size: 13px;
+    font-family: inherit;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  .gridler-search {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 20;
+  }
+
+  .gridler-search-input {
+    padding: 4px 8px;
+    border: 1px solid var(--gridler-border, #e2e8f0);
+    border-radius: 4px;
+    font-size: 12px;
+    outline: none;
+    background: white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .gridler-search-input:focus {
+    border-color: var(--gridler-accent, #4f46e5);
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>