@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

package/src/nile-grid/nile-grid.utils.ts

@@ -1,721 +1,48 @@
 import { NileGrid } from './nile-grid';
-import { HeadItemEl } from './nile-grid.types';
 
-// Layout methods: compute and position grid rows, cells, and sticky logic in layout phase.
-/** layout
- * @param nileGrid Parent NileGrid instance
- * @param slotEl <slot> element hosting head/body
- * @param ensureWidths Function to ensure columnWidths length matches colCount
- * @param rebuildTemplate Function(colCount, widths) -> grid-template string
- * @param stickyLeftIndexes Mutable list of left-sticky column indexes
- * @param stickyRightIndexes Mutable list of right-sticky column indexes
- * @returns void
- */
-export const layout = (
-  nileGrid: NileGrid,
-  slotEl: any,
-  ensureWidths: any,
-  rebuildTemplate: any,
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[]
-) => {
-  const head = getHead(slotEl);
-  const body = getBody(slotEl);
-  if (!body) return;
-
-  const headRows = head
-    ? (Array.from(head.querySelectorAll('nile-grid-row')) as HTMLElement[])
-    : [];
-  const bodyRows = Array.from(
-    body.querySelectorAll('nile-grid-row')
-  ) as HTMLElement[];
-
-  let colCount = 0;
-  colCount = computeHeadLayout(nileGrid, headRows, [], colCount, stickyLeftIndexes, stickyRightIndexes, nileGrid.columnWidths);
-  if (colCount) {
-    computeBodyLayout(nileGrid, bodyRows, [], colCount, stickyLeftIndexes, stickyRightIndexes, nileGrid.columnWidths);
-  } else {
-    colCount = computeBodyLayout(nileGrid, bodyRows, [], colCount, stickyLeftIndexes, stickyRightIndexes, nileGrid.columnWidths);
-  }
-
-  setTimeout(() => {
-    computeColumnWidths(nileGrid, colCount, nileGrid.columnWidths, slotEl); 
-  });
-  ensureWidths(colCount);
-  nileGrid.colTemplate = rebuildTemplate(colCount, nileGrid.columnWidths);
-};
-
-/** 
- * @param nileGrid The parent NileGrid instance
- * @param rows Array of grid row elements
- * @param carry Array tracking rowspan, colspan continuation
- * @param colCount Total column count
- * @param stickyLeftIndexes List of sticky-left column indexes
- * @param stickyRightIndexes List of sticky-right column indexes
- * @param columnWidths Computed column widths
- * @param opts Options controlling layout behavior
- * @returns Final computed column count
- */
-function layoutRows(
-  nileGrid: NileGrid,
-  rows: HTMLElement[],
-  carry: number[],
-  colCount: number,
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[],
-  columnWidths: number[],
-  opts: { itemSelector: string; useStickyAttr?: boolean; handleRowBg?: boolean }
-): number {
-  rows.forEach((row, rIdx) => {
-    if (nileGrid.hoverable) row.setAttribute('hover', 'true');
-    colCount = layoutSingleRow(
-      nileGrid,
-      row,
-      rIdx,
-      carry,
-      colCount,
-      stickyLeftIndexes,
-      stickyRightIndexes,
-      columnWidths,
-      opts
-    );
-  });
-  return colCount;
-}
-
-/**
- * @param nileGrid The grid element being processed
- * @param row Single row element to layout
- * @param rIdx Row index in the grid
- * @param carry Rowspan tracking array
- * @param colCount Current column count
- * @param stickyLeftIndexes Sticky-left indexes
- * @param stickyRightIndexes Sticky-right indexes
- * @param columnWidths Column widths array
- * @param opts Layout options
- * @returns Updated column count
- */
-function layoutSingleRow(
-  nileGrid: NileGrid,
-  row: HTMLElement,
-  rIdx: number,
-  carry: number[],
-  colCount: number,
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[],
-  columnWidths: number[],
-  opts: { itemSelector: string; useStickyAttr?: boolean }
-): number {
-  let c = 1;
-  const rStart = rIdx + 1;
-  const items = [...row.querySelectorAll(opts.itemSelector)] as HTMLElement[];
-
-  for (const el of items) {
-    while ((carry[c - 1] || 0) > 0) c++;
-    ({ c, colCount } = layoutCell(
-      nileGrid,
-      el,
-      c,
-      rStart,
-      carry,
-      colCount,
-      stickyLeftIndexes,
-      stickyRightIndexes,
-      columnWidths,
-      opts
-    ));
-  }
-  decrementCarry(carry);
-  return colCount;
-}
-
-/**
- * @param nileGrid The parent grid
- * @param el Cell element being laid out
- * @param c Current column index
- * @param rStart Row start index
- * @param carry Rowspan carry array
- * @param colCount Current max column count
- * @param stickyLeftIndexes Left sticky indexes
- * @param stickyRightIndexes Right sticky indexes
- * @param columnWidths Column widths
- * @param opts Sticky and layout options
- * @returns Updated column index and column count
- */
-function layoutCell(
-  nileGrid: NileGrid,
-  el: HTMLElement,
-  c: number,
-  rStart: number,
-  carry: number[],
-  colCount: number,
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[],
-  columnWidths: number[],
-  opts: { useStickyAttr?: boolean }
-) {
-  const colspan = Math.max(1, +el.getAttribute('colspan')! || 1);
-  const rowspan = Math.max(1, +el.getAttribute('rowspan')! || 1);
-  handleRowspan(nileGrid, el, rowspan);
-
-  const cStart = c;
-  const cEnd = c + colspan;
-  setGridPosition(el, cStart, cEnd, rStart, rowspan);
-  handleSticky(
-    el,
-    cStart,
-    opts,
-    stickyLeftIndexes,
-    stickyRightIndexes,
-    columnWidths
-  );
-
-  for (let k = 0; k < colspan; k++) {
-    carry[c - 1 + k] = Math.max(carry[c - 1 + k] || 0, rowspan);
-  }
-  return {
-    c: cEnd,
-    colCount: Math.max(colCount, cEnd - 1),
-  };
-}
-
-/** 
- * @param nileGrid The grid container 
- * @param el Element that spans multiple rows 
- * @param rowspan Number of rows to span 
- */
-function handleRowspan(nileGrid: NileGrid, el: HTMLElement, rowspan: number) {
-  if (rowspan <= 1) return;
-  nileGrid.cellHeight ||= el.getBoundingClientRect().height;
-  el.style.position = 'absolute';
-  el.style.height = `${nileGrid.cellHeight * rowspan}px`;
-  el.style.zIndex = '2';
-}
-
-/**
- * @param el Grid item element
- * @param cStart Starting column index
- * @param cEnd Ending column index
- * @param rStart Starting row index
- * @param rowspan Row span value
- */
-function setGridPosition(
-  el: HTMLElement,
-  cStart: number,
-  cEnd: number,
-  rStart: number,
-  rowspan: number
-) {
-  const rEnd = rStart + rowspan;
-  el.style.gridColumn = `${cStart} / ${cEnd}`;
-  el.style.gridRow = `${rStart} / ${rEnd}`;
-  (el as any).dataset.cStart = String(cStart);
-}
-
-/**
- * @param el Grid item element
- * @param cStart Column start index
- * @param opts Sticky configuration options
- * @param stickyLeftIndexes Left sticky indexes
- * @param stickyRightIndexes Right sticky indexes
- * @param columnWidths Array of column widths
- */
-function handleSticky(
-  el: HTMLElement,
-  cStart: number,
-  opts: { useStickyAttr?: boolean },
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[],
-  columnWidths: number[]
-) {
-  if (opts.useStickyAttr && el.hasAttribute('colSticky') && !stickyLeftIndexes.includes(cStart - 1)) {
-    stickyLeftIndexes.push(cStart - 1);
-  }
-  if (opts.useStickyAttr && el.hasAttribute('lastColSticky') && !stickyRightIndexes.includes(cStart - 1)) {
-    stickyRightIndexes.push(cStart - 1);
-  }
-  applySticky(el, cStart - 1, stickyLeftIndexes, stickyRightIndexes, columnWidths);
-}
-
-/**
- * @param carry Rowspan tracking array
- */
-function decrementCarry(carry: number[]) {
-  for (let i = 0; i < carry.length; i++) {
-    if (carry[i] > 0) {
-      carry[i]--;
-    }
-  }
-}
-
-/** computeHeadLayout
- * @param nileGrid Grid instance
- * @param headRows Header rows (<nile-grid-row>[])
- * @param carryHead Rowspan carry tracking array
- * @param colCount Current column count
- * @param stickyLeftIndexes Left-sticky indexes
- * @param stickyRightIndexes Right-sticky indexes
- * @param columnWidths Column widths array
- * @returns Final column count after header layout
- */
-function computeHeadLayout(
-  nileGrid: NileGrid,
-  headRows: HTMLElement[],
-  carryHead: number[],
-  colCount: number,
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[],
-  columnWidths: number[]
-): number {
-  return layoutRows(
-    nileGrid,
-    headRows,
-    carryHead,
-    colCount,
-    stickyLeftIndexes,
-    stickyRightIndexes,
-    columnWidths,
-    {
-      itemSelector: 'nile-grid-head-item',
-      useStickyAttr: true,
-      handleRowBg: false,
-    }
-  );
-}
-
-/** computeBodyLayout
- * @param nileGrid Grid instance
- * @param bodyRows Body rows (<nile-grid-row>[])
- * @param carryBody Rowspan carry tracking array
- * @param colCount Current column count
- * @param stickyLeftIndexes Left-sticky indexes
- * @param stickyRightIndexes Right-sticky indexes
- * @param columnWidths Column widths array
- * @returns Final column count after body layout
- */
-function computeBodyLayout(
-  nileGrid: NileGrid,
-  bodyRows: HTMLElement[],
-  carryBody: number[],
-  colCount: number,
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[],
-  columnWidths: number[]
-): number {
-  return layoutRows(
-    nileGrid,
-    bodyRows,
-    carryBody,
-    colCount,
-    stickyLeftIndexes,
-    stickyRightIndexes,
-    columnWidths,
-    {
-      itemSelector: 'nile-grid-cell-item',
-      useStickyAttr: false,
-      handleRowBg: true,
-    }
-  );
-}
-
-
-// Column width computation: read, parse, and assign column widths from head items or attributes.
-
-/** computeColumnWidths
- * @param nileGrid Grid instance (reads minColumnWidth, columnWidths)
- * @param colCount Total columns
- * @param columnWidths Mutable widths array to fill/update
- * @param slotEl Slot element (to read head for desired widths)
- * @returns void
- */
-function computeColumnWidths(
-  nileGrid: NileGrid,
-  colCount: number,
-  columnWidths: number[],
-  slotEl: any
-) {
-  const minCol = nileGrid.minColumnWidth;
-  const containerWidth = getContainerWidth(nileGrid);
-  const desired = readDesiredFromHead(slotEl, colCount, containerWidth, columnWidths);
-  const isSeeded = seedWidthsFromDesired(desired, columnWidths, minCol);
-
-  distributeFlex(columnWidths, isSeeded, containerWidth, minCol);
-  normalizeToContainer(columnWidths, containerWidth, minCol);
-  clampAndRound(columnWidths, minCol);
-  applyColumnsTemplate(nileGrid, columnWidths);
-}
-
-/** getContainerWidth
- * @param nileGrid Grid root element
- * @returns Numeric container width in pixels (accounting for padding/offset)
- */
-function getContainerWidth(nileGrid: NileGrid): number {
-  return Math.max(0, (nileGrid.getBoundingClientRect().width || 0) - 4);
-}
-
-/**
- * @param slotEl The slot element containing head rows
- * @param colCount Number of columns
- * @param containerWidth Width of the parent container
- * @param prevWidths Previously computed column widths
- * @returns Array of desired column widths
- */
-function readDesiredFromHead(
-  slotEl: any,
-  colCount: number,
-  containerWidth: number,
-  prevWidths?: number[]
-): (number | null)[] {
-  const desired = Array(colCount).fill(null);
-  const head = getHead(slotEl) as HTMLElement | null;
-  if (head) fillDesiredFromHeadRows(head, desired, colCount, containerWidth);
-  if (prevWidths?.length === colCount) fillFromPrevWidths(desired, prevWidths);
-  return desired;
-}
-
-/**
- * @param head Head element containing grid header rows
- * @param desired Desired widths array to fill
- * @param colCount Column count
- * @param containerWidth Grid container width
- */
-function fillDesiredFromHeadRows(
-  head: HTMLElement,
-  desired: (number | null)[],
-  colCount: number,
-  containerWidth: number
-) {
-  const headRows = [...head.children].filter(
-    el => el.tagName.toLowerCase() === 'nile-grid-row'
-  ) as HTMLElement[];
-  for (const row of headRows) {
-    fillFromHeadRow(row, desired, colCount, containerWidth);
-  }
-}
-
-/**
- * @param row A single header row element
- * @param desired Desired widths array
- * @param colCount Total number of columns
- * @param containerWidth Container width
- */
-function fillFromHeadRow(
-  row: HTMLElement,
-  desired: (number | null)[],
-  colCount: number,
-  containerWidth: number
-) {
-  const items = [...row.children].filter(
-    el => el.tagName.toLowerCase() === 'nile-grid-head-item'
-  ) as HeadItemEl[];
-  const parsed = items
-    .map(h => parseHeadItemWidth(h, containerWidth))
-    .filter(x => x.cw != null);
-  parsed.sort((a, b) => a.colspan - b.colspan);
-  parsed.forEach(({ cStart, colspan, cw }) => {
-    assignWidth(desired, cStart, colspan, cw!, colCount);
-  });
-}
-
-/**
- * @param h Header item element
- * @param containerWidth Width of parent container
- * @returns Parsed object containing start, colspan, and computed width
- */
-function parseHeadItemWidth(h: HeadItemEl, containerWidth: number) {
-  const cStart = Number((h as any).dataset?.cStart) || 1;
-  const colspan = Math.max(1, Number(h.getAttribute('colspan')) || 1);
-  const raw = (h as any).width ?? h.getAttribute('width') ?? null;
-  const cw = parseCustomWidth(raw, containerWidth);
-  return { cStart, colspan, cw };
-}
-
-/**
- * @param desired Array of desired widths
- * @param cStart Start column index
- * @param colspan Column span value
- * @param cw Computed width value
- * @param colCount Total column count
- */
-function assignWidth(
-  desired: (number | null)[],
-  cStart: number,
-  colspan: number,
-  cw: number,
-  colCount: number
-) {
-  const perCol = Math.round(cw / colspan);
-  for (let k = 0; k < colspan; k++) {
-    const idx = cStart - 1 + k;
-    if (idx >= 0 && idx < colCount && desired[idx] == null) {
-      desired[idx] = perCol;
-    }
-  }
-}
-
-/**
- * @param desired Desired widths array
- * @param prevWidths Previous column widths
- */
-function fillFromPrevWidths(desired: (number | null)[], prevWidths: number[]) {
-  for (let i = 0; i < prevWidths.length; i++) {
-    if (desired[i] == null && Number.isFinite(prevWidths[i]!)) {
-      desired[i] = Math.max(40, Math.round(prevWidths[i]!));
-    }
-  }
-}
-
-/** parseCustomWidth
- * @param raw User-specified width (number | string like "120px" or "20%")
- * @param containerWidth Container width for % resolution
- * @returns Width in pixels or null if invalid
- */
-function parseCustomWidth(raw: any, containerWidth: number): number | null {
-  if (raw == null) return null;
-  if (typeof raw === 'number' && Number.isFinite(raw)) return raw;
-  const s = String(raw).trim().toLowerCase();
-  if (!s) return null;
-
-  if (s.endsWith('px')) {
-    const v = parseFloat(s);
-    return Number.isFinite(v) ? v : null;
-  }
-  if (s.endsWith('%')) {
-    const v = parseFloat(s);
-    return Number.isFinite(v) ? (v / 100) * containerWidth : null;
-  }
-  const v = parseFloat(s);
-  return Number.isFinite(v) ? v : null;
-}
-
-/** seedWidthsFromDesired
- * @param desired Array of desired widths (px) or nulls
- * @param columnWidths Output array to seed (mutated)
- * @param minCol Minimum per-column width
- * @returns Boolean[] flags indicating which columns were seeded
- */
-function seedWidthsFromDesired(
-  desired: (number | null)[],
-  columnWidths: number[],
-  minCol: number
-): boolean[] {
-  const isSeeded = Array(desired.length).fill(false);
-
-  for (let i = 0; i < desired.length; i++) {
-    const w = desired[i] ?? null;
-    columnWidths[i] =
-      w != null && !Number.isNaN(w) ? Math.max(minCol, Number(w)) : 0;
-    isSeeded[i] = w != null && !Number.isNaN(w);
-  }
-  return isSeeded;
-}
-
-/** distributeFlex
- * @param columnWidths Mutable widths array
- * @param isSeeded Boolean[] indicating fixed/seeded columns
- * @param containerWidth Total width to fill
- * @param minCol Minimum width per flexible column
- * @returns void
- */
-function distributeFlex(
-  columnWidths: number[],
-  isSeeded: boolean[],
-  containerWidth: number,
-  minCol: number
-) {
-  const sumSeed = columnWidths.reduce((a, b) => a + b, 0);
-  const remaining = containerWidth - sumSeed;
-  const flexIdxs = Array.from(
-    { length: columnWidths.length },
-    (_, i) => i
-  ).filter(i => !isSeeded[i]);
-  if (flexIdxs.length === 0) return;
-
-  const each = remaining / flexIdxs.length;
-  for (const i of flexIdxs) columnWidths[i] = Math.max(minCol, each);
-}
-
-
-// Normalization (container fitting): adjust total column widths to match the container width proportionally.
-/**
- * @param columnWidths Array of current column widths
- * @param containerWidth Total grid container width
- * @param minCol Minimum allowed column width
- */
-function normalizeToContainer(
-  columnWidths: number[],
-  containerWidth: number,
-  minCol: number
-) {
-  let total = sumWidths(columnWidths);
-  if (total < containerWidth) {
-    expandWidths(columnWidths, containerWidth, total);
-  } else if (total > containerWidth) {
-    shrinkWidths(columnWidths, containerWidth, total, minCol);
-  }
-}
-
-/**
- * @param widths Array of column widths
- * @returns Sum of all column widths
- */
-function sumWidths(widths: number[]) {
-  return widths.reduce((a, b) => a + b, 0);
-}
-
-
-/**
- * @param columnWidths Current column widths
- * @param containerWidth Container total width
- * @param total Current total width
- */
-function expandWidths(
-  columnWidths: number[],
-  containerWidth: number,
-  total: number
-) {
-  if (!columnWidths.length) return;
-  const add = containerWidth - total;
-  const weight = total || 1;
-  for (let i = 0; i < columnWidths.length; i++) {
-    columnWidths[i] += add * (columnWidths[i] / weight);
-  }
-}
-
-/**
- * @param columnWidths Current widths
- * @param containerWidth Container width
- * @param total Current total
- * @param minCol Minimum width constraint
- */
-function shrinkWidths(
-  columnWidths: number[],
-  containerWidth: number,
-  total: number,
-  minCol: number
-) {
-  let need = total - containerWidth;
-  for (let iter = 0; iter < 8 && need > 0.5; iter++) {
-    const { candidates, weightSum } = collectReducible(columnWidths, minCol);
-    if (!candidates.length || weightSum <= 0) break;
-    const reduced = reduceWidths(
-      columnWidths,
-      candidates,
-      weightSum,
-      need,
-      minCol
-    );
-    need -= reduced;
-    if (reduced < 0.5) break;
-  }
-}
-
-/**
- * @param columnWidths Current widths
- * @param minCol Minimum column width
- * @returns Reducible column indexes and weight sum
- */
-function collectReducible(columnWidths: number[], minCol: number) {
-  const candidates: number[] = [];
-  let weightSum = 0;
-  for (let i = 0; i < columnWidths.length; i++) {
-    const reducible = Math.max(0, columnWidths[i] - minCol);
-    if (reducible > 0) {
-      candidates.push(i);
-      weightSum += columnWidths[i];
-    }
-  }
-  return { candidates, weightSum };
-}
-
-/**
- * @param columnWidths Current widths array
- * @param candidates Reducible column indexes
- * @param weightSum Sum of reducible widths
- * @param need Total amount to reduce
- * @param minCol Minimum width
- * @returns Total reduced width
- */
-function reduceWidths(
-  columnWidths: number[],
-  candidates: number[],
-  weightSum: number,
-  need: number,
-  minCol: number
-) {
-  let reduced = 0;
-  for (const i of candidates) {
-    const reducible = Math.max(0, columnWidths[i] - minCol);
-    const share = columnWidths[i] / weightSum;
-    const cut = Math.min(reducible, need * share);
-    columnWidths[i] -= cut;
-    reduced += cut;
-  }
-  return reduced;
-}
-
-function clampAndRound(columnWidths: number[], minCol: number) {
-  for (let i = 0; i < columnWidths.length; i++) {
-    columnWidths[i] = Math.max(minCol, Math.round(columnWidths[i]));
-  }
-}
-
-
-// Sticky columns: apply and manage left/right sticky positioning for grid items.
-
-/** resizeLinesHandler
- * @param minColumnWidth Minimum allowed column width
- * @param resizeStart Guide line element (start)
- * @param resizeEnd Guide line element (end)
- * @param col Active column index
- * @param scrollHeight Height to apply to guides
- * @param columnWidths Current column widths
- * @returns void
- */
 export const resizeLinesHandler = (
-  minColumnWidth: number,
-  resizeStart: HTMLElement,
-  resizeEnd: HTMLElement,
+  resizeStart: any,
+  resizeEnd: any,
   col: number,
-  scrollHeight: number,
-  columnWidths: number[],
+  widthPx: number,
+  scrollHeight: any,
+  columnWidths: any,
+  e: any
 ) => {
   resizeStart.style.display = 'block';
   resizeEnd.style.display = 'block';
   resizeStart.style.height = scrollHeight + 'px';
   resizeEnd.style.height = scrollHeight + 'px';
-  const floor = minColumnWidth;
-  const safe = (n: number) => Math.max(0, Math.round(n || 0));
-  const sum = (arr: number[], endExclusive: number) => safe(arr.slice(0, Math.max(0, endExclusive)).reduce((a, b) => a + (b || 0), 0));
-
-  const totalGridWidth = safe(columnWidths.reduce((a, b) => a + (b || 0), 0));
-  const baseLeft = sum(columnWidths, col);
-  const appliedColWidth = safe(Math.max(floor, columnWidths[col] ?? floor));
-  let handleLeft = baseLeft + appliedColWidth;
-
-  const minEdge = baseLeft + floor;
-  const maxEdge = totalGridWidth;
-  handleLeft = Math.min(Math.max(handleLeft, minEdge), maxEdge);
-  handleLeft = Math.max(handleLeft, 20);
-
-  resizeStart.style.left = `${handleLeft - 6}px`;
-  resizeEnd.style.left = `${handleLeft - 2}px`;
+  if (col === 0) {
+    resizeStart.style.left = `${Math.max(60, widthPx) - 6}px`;
+    resizeEnd.style.left = `${Math.max(60, widthPx) - 2}px`;
+  } else {
+    let totalWidth = 0;
+    if (
+      (e.target as HTMLElement).getAttribute('colspan') &&
+      parseInt((e.target as HTMLElement).getAttribute('colspan')!) > 1
+    ) {
+      widthPx = widthPx - columnWidths[col - 1];
+      for (let i = 0; i < col; i++) {
+        totalWidth += columnWidths[i];
+      }
+    } else {
+      for (let i = 0; i < col; i++) {
+        totalWidth += columnWidths[i];
+      }
+    }
+    resizeStart.style.left = `${totalWidth + Math.max(60, widthPx) - 6}px`;
+    resizeEnd.style.left = `${totalWidth + Math.max(60, widthPx) - 2}px`;
+  }
 };
 
-/** listenToEventListeners
- * @param nileGrid Grid element to attach listeners on
- * @param onResize Handler for 'nile-column-resize'
- * @param slotEl Slot element to watch for 'slotchange'
- * @param _attachObserverAndLayout Callback to reattach observer + layout
- * @returns void
- */
 export const listenToEventListeners = (
   nileGrid: NileGrid,
   onResize: any,
   slotEl: any,
   _attachObserverAndLayout: any
 ) => {
-  nileGrid.addEventListener('nile-column-resize', onResize);
+  nileGrid.addEventListener('nile-resize', onResize);
   nileGrid.addEventListener('nile-resize-start', () => {
     nileGrid.resizeStart.style.display = 'block';
   });
@@ -726,20 +53,13 @@ export const listenToEventListeners = (
   slotEl.addEventListener('slotchange', () => _attachObserverAndLayout());
 };
 
-/** removeEventListeners
- * @param nileGrid Grid element to detach listeners from
- * @param onResize Handler previously attached to 'nile-column-resize'
- * @param slotEl Slot element to remove 'slotchange' from
- * @param _attachObserverAndLayout Callback reference used during attach
- * @returns void
- */
 export const removeEventListeners = (
   nileGrid: NileGrid,
   onResize: any,
   slotEl: any,
   _attachObserverAndLayout: any
 ) => {
-  nileGrid.removeEventListener('nile-column-resize', onResize);
+  nileGrid.removeEventListener('nile-resize', onResize);
   nileGrid.removeEventListener('nile-resize-start', () => {
     nileGrid.resizeStart.style.display = 'block';
   });
@@ -750,10 +70,6 @@ export const removeEventListeners = (
   slotEl.removeEventListener('slotchange', () => _attachObserverAndLayout());
 };
 
-/** getHead
- * @param slotEl Slot element containing assigned nodes
- * @returns <nile-grid-head> element or null
- */
 export const getHead = (slotEl: any) => {
   const nodes = slotEl?.assignedElements() ?? [];
   return (
@@ -763,10 +79,6 @@ export const getHead = (slotEl: any) => {
   );
 };
 
-/** getBody
- * @param slotEl Slot element containing assigned nodes
- * @returns <nile-grid-body> element or null
- */
 export const getBody = (slotEl: any) => {
   const nodes = slotEl?.assignedElements() ?? [];
   return (
@@ -776,11 +88,6 @@ export const getBody = (slotEl: any) => {
   );
 };
 
-/** rebuildTemplate
- * @param colCount Number of columns
- * @param columnWidths Array of explicit column widths (px)
- * @returns CSS grid-template-columns string
- */
 export const rebuildTemplate = (
   colCount: number,
   columnWidths: number[]
@@ -798,323 +105,148 @@ export const rebuildTemplate = (
   return parts.join(' ');
 };
 
-// Resize handling: recompute column widths and templates during user resize actions.
-/**
- * @param el Target grid cell element
- * @param colIndex Column index
- * @param stickyLeftIndexes Sticky-left indexes
- * @param stickyRightIndexes Sticky-right indexes
- * @param columnWidths Column widths array
- */
-function applySticky(
-  el: HTMLElement,
-  colIndex: number,
-  stickyLeftIndexes: number[],
-  stickyRightIndexes: number[],
-  columnWidths: number[]
-) {
-  const onLeft = stickyLeftIndexes.includes(colIndex);
-  const onRight = stickyRightIndexes.includes(colIndex);
-  if (!onLeft && !onRight) return;
-
-  prepareStickyElement(el);
-  if (onLeft && !onRight) {
-    applyLeftSticky(el, colIndex, stickyLeftIndexes, columnWidths);
-  } else {
-    applyRightSticky(el, colIndex, stickyRightIndexes, columnWidths);
+export const applyTemplate = (
+  head: HTMLElement | null,
+  body: HTMLElement | null,
+  colTemplate: string
+) => {
+  if (head) head.style.gridTemplateColumns = colTemplate;
+  if (body) {
+    body.style.gridTemplateColumns = colTemplate;
+    body.style.overflowX = 'auto';
   }
-}
+};
 
-/**
- * @param el Grid item element to prepare for sticky positioning
- */
-function prepareStickyElement(el: HTMLElement) {
-  el.style.position = 'sticky';
-  el.style.zIndex = '2';
-  el.style.left = '';
-  el.style.right = '';
-  el.removeAttribute('data-sticky');
-}
+function computeHeadLayout(
+  headRows: HTMLElement[],
+  carryHead: number[],
+  colCount: number
+): number {
+  headRows.forEach((row, rIdx) => {
+    let c = 1;
+    const cells = Array.from(
+      row.querySelectorAll('nile-grid-head-item, nile-grid-cell')
+    ) as HTMLElement[];
+    const rStart = rIdx + 1;
+
+    cells.forEach(cell => {
+      while (carryHead[c - 1] > 0) c++;
+      const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);
+      const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
+
+      const cStart = c,
+        cEnd = c + colspan;
+      const rEnd = rStart + rowspan;
+
+      cell.style.gridColumn = `${cStart} / ${cEnd}`;
+      cell.style.gridRow = `${rStart} / ${rEnd}`;
+      (cell as any).dataset.cStart = String(cStart);
+
+      for (let k = 0; k < colspan; k++) {
+        const idx = c - 1 + k;
+        carryHead[idx] = Math.max(carryHead[idx] || 0, rowspan);
+      }
+      c = cEnd;
+      colCount = Math.max(colCount, cEnd - 1);
+    });
 
-/**
- * @param el Target element
- * @param colIndex Column index
- * @param stickyLeftIndexes Sticky-left column indexes
- * @param columnWidths Column width array
- */
-function applyLeftSticky(
-  el: HTMLElement,
-  colIndex: number,
-  stickyLeftIndexes: number[],
-  columnWidths: number[]
-) {
-  el.setAttribute('data-sticky', 'left');
-  const leftOrder = [...stickyLeftIndexes].sort((a, b) => a - b);
-  const pos = leftOrder.indexOf(colIndex);
-  const left = computeOffset(leftOrder, pos, columnWidths);
-  el.style.left = `${Math.max(0, Math.round(left))}px`;
+    for (let i = 0; i < carryHead.length; i++)
+      if (carryHead[i] > 0) carryHead[i]--;
+  });
+  return colCount;
 }
 
-/**
- * @param el Target element
- * @param colIndex Column index
- * @param stickyRightIndexes Sticky-right indexes
- * @param columnWidths Column widths array
- */
-function applyRightSticky(
-  el: HTMLElement,
-  colIndex: number,
-  stickyRightIndexes: number[],
-  columnWidths: number[]
+function computeBodyLayout(
+  bodyRows: HTMLElement[],
+  carryBody: number[],
+  colCount: number
 ) {
-  el.setAttribute('data-sticky', 'right');
-  const rightOrder = [...stickyRightIndexes].sort((a, b) => b - a);
-  const pos = rightOrder.indexOf(colIndex);
-  const scrollbarComp = getScrollbarComp(el);
-  const right = computeOffset(rightOrder, pos, columnWidths, scrollbarComp);
-  el.style.right = `${Math.max(0, Math.round(right - 2))}px`;
-}
+  bodyRows.forEach((row, rIdx) => {
+    let c = 1;
+    const cells = Array.from(
+      row.querySelectorAll('nile-grid-cell, nile-grid-header')
+    ) as HTMLElement[];
+    const rStart = rIdx + 1;
+    let maxRowspan = 1;
+
+    const bg = row.shadowRoot?.querySelector<HTMLElement>('[data-row-bg]');
+    if (bg) bg.style.gridColumn = `1 / -1`;
+
+    cells.forEach(cell => {
+      while (carryBody[c - 1] > 0) c++;
+      const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);
+      const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
+
+      const cStart = c,
+        cEnd = c + colspan;
+      const rEnd = rStart + rowspan;
+
+      cell.style.gridColumn = `${cStart} / ${cEnd}`;
+      cell.style.gridRow = `${rStart} / ${rEnd}`;
+      (cell as any).dataset.cStart = String(cStart);
+
+      for (let k = 0; k < colspan; k++) {
+        const idx = c - 1 + k;
+        carryBody[idx] = Math.max(carryBody[idx] || 0, rowspan);
+      }
+      maxRowspan = Math.max(maxRowspan, rowspan);
+      c = cEnd;
+      colCount = Math.max(colCount, cEnd - 1);
+    });
+
+    if (bg) {
+      const rEnd = rStart + maxRowspan;
+      bg.style.gridRow = `${rStart} / ${rEnd}`;
+    }
 
-/**
- * @param el Target element within grid
- * @returns Scrollbar width compensation value
- */
-function getScrollbarComp(el: HTMLElement) {
-  const scroller = el.closest('nile-grid') as HTMLElement | null;
-  return scroller ? scroller.offsetWidth - scroller.clientWidth : 0;
-}
+    for (let i = 0; i < carryBody.length; i++)
+      if (carryBody[i] > 0) carryBody[i]--;
+  });
 
-/**
- * @param order Array of sticky column indexes
- * @param pos Current position within order
- * @param widths Column widths
- * @param base Base offset value
- * @returns Computed pixel offset
- */
-function computeOffset(
-  order: number[],
-  pos: number,
-  widths: number[],
-  base = 0
-) {
-  let total = base;
-  for (let i = 0; i < pos; i++) total += widths[order[i]] ?? 0;
-  return total;
+  return colCount;
 }
 
-/**
- * @param nileGrid Grid container element
- * @param colCount Total number of columns
- * @param columnWidths Column width array
- * @param headElement Header element for template update
- */
-export function applyColumnsTemplate(
+function computeColumnWidths(
   nileGrid: NileGrid,
+  colCount: number,
   columnWidths: number[]
 ) {
-  const cols = columnWidths
-    .map((w, idx) => {
-      if (idx === columnWidths.length - 1) {
-        return `minmax(${Math.round(w)}px, auto)`;
-      }
-      return `${Math.max(0, Math.round(w))}px`;
-    })
-    .join(' ');
-  nileGrid.style.setProperty('--nile-grid-columns', cols);
-}
-
-/**
- * @param targetWidth New computed width in pixels
- * @param min Minimum allowed width
- * @param max Maximum allowed width
- * @returns Adjusted column width
- */
-export function computeNewWidth(opts: {
-  target: HTMLElement;
-  col: number;
-  widthPx: number;
-  floor: number;
-  columnWidths: number[];
-}) {
-  const { target, col, widthPx, floor, columnWidths } = opts;
-  const hasSpan =
-    !!target.getAttribute('colspan') &&
-    parseInt(target.getAttribute('colspan')!, 10) > 1;
-  const prevW = columnWidths[col] ?? floor;
-  const newWraw = hasSpan ? widthPx - (columnWidths[col - 1] ?? 0) : widthPx;
-  const newW = Math.max(
-    floor,
-    Math.round(Number.isFinite(newWraw) ? newWraw : prevW)
-  );
-  return { prevW, newW, delta0: newW - prevW };
-}
-
-/**
- * @param columnWidths Current widths array
- * @param containerWidth Container total width
- */
-export function resizeNoScroll(opts: {
-  grid: NileGrid;
-  col: number;
-  prevW: number;
-  newW: number;
-  floor: number;
-}) {
-  const { grid, col, prevW, newW, floor } = opts;
-  let delta = newW - prevW;
-
-  if (delta > 0) {
-    const rightReducible = totalReducible(grid.columnWidths, col + 1, floor);
-    if (rightReducible <= 0) return;
-    delta = Math.min(delta, rightReducible);
-    grid.columnWidths[col] = prevW + delta;
-    if (delta > 0) takeFromRight(grid.columnWidths, col + 1, delta, floor);
-  } else {
-    if (col === grid.columnWidths.length - 1) return;
-    const shrink = -delta;
-    const newColW = Math.max(floor, prevW - shrink);
-    const actualShrink = prevW - newColW;
-    grid.columnWidths[col] = newColW;
-    const remaining = giveToRight(grid.columnWidths, col + 1, actualShrink);
-    if (remaining > 0) grid.columnWidths[col] = prevW;
+  for (let col = 0; col < colCount; col++) {
+    const containerWidth = (nileGrid.getBoundingClientRect().width || 1) - 2;
+    columnWidths[col] =
+      nileGrid.customWidths[col] || containerWidth / Math.max(colCount, 1);
   }
 }
 
-/**
- * @param columnWidths Current widths
- * @param containerWidth Container width
- */
-export function resizeWithScroll(opts: {
-  grid: NileGrid;
-  col: number;
-  newW: number;
-}) {
-  const { grid, col, newW } = opts;
-  grid.columnWidths[col] = newW;
-}
-
-/**
- * @param columnWidths Current widths array
- * @param minCol Minimum column width
- * @returns Total reducible pixels
- */
-export function totalReducible(widths: number[], start: number, floor: number) {
-  let sum = 0;
-  for (let i = start; i < widths.length; i++)
-    sum += Math.max(0, widths[i] - floor);
-  return sum;
-}
-
-/**
- * @param columnWidths Current widths
- * @param amount Pixels to remove from rightmost columns
- */
-export function takeFromRight(
-  widths: number[],
-  start: number,
-  needInit: number,
-  floor: number
-) {
-  let need = needInit;
-  for (let i = start; i < widths.length && need > 0; i++) {
-    const reducible = Math.max(0, widths[i] - floor);
-    const cut = Math.min(reducible, need);
-    if (cut > 0) {
-      widths[i] -= cut;
-      need -= cut;
-    }
-  }
-  return need;
-}
-
-/**
- * @param columnWidths Current widths
- * @param amount Pixels to add to rightmost columns
- */
-export function giveToRight(widths: number[], start: number, giveInit: number) {
-  let give = giveInit;
-  if (start < widths.length && give > 0) {
-    widths[start] += give;
-    give = 0;
-  }
-  return give;
-}
-
-/**
- * @param nileGrid The parent grid
- * @param columnWidths New column width array
- */
-export function applyAfterResize(grid: any, col: number) {
-  resizeLinesHandler(
-    grid.minColumnWidth,
-    grid.resizeStart,
-    grid.resizeEnd,
-    col,
-    grid.scrollHeight,
-    grid.columnWidths
-  );
-  grid.colTemplate = rebuildTemplate(
-    grid.columnWidths.length,
-    grid.columnWidths
-  );
-  syncStickyShadows(grid);
-  applyColumnsTemplate(grid, grid.columnWidths);
-}
-
+export const layout = (
+  nileGrid: NileGrid,
+  slotEl: any,
+  ensureWidths: any,
+  rebuildTemplate: any,
+  applyTemplate: any,
+  columnWidths: any
+) => {
+  const head = getHead(slotEl);
+  const body = getBody(slotEl);
+  if (!body) return;
 
-// Sticky shadow synchronization: toggle shadow classes for sticky columns during horizontal scroll.
-/**
- * @param nileGrid Grid instance to sync shadows for
- */
-export function syncStickyShadows(nileGrid: NileGrid) {
-  const { showRightOnLeftStickies, showLeftOnRightStickies } = getShadowStates(nileGrid);
-  const { head, body } = getHeadAndBody(nileGrid);
+  const headRows = head
+    ? (Array.from(head.querySelectorAll('nile-grid-row')) as HTMLElement[])
+    : [];
+  const bodyRows = Array.from(
+    body.querySelectorAll('nile-grid-row')
+  ) as HTMLElement[];
 
-  toggleStickyShadow(head, 'nile-grid-head-item', 'left', 'shadow-right', showRightOnLeftStickies);
-  toggleStickyShadow(body, 'nile-grid-cell-item', 'left', 'shadow-right', showRightOnLeftStickies);
-  toggleStickyShadow(head, 'nile-grid-head-item', 'right', 'shadow-left', showLeftOnRightStickies);
-  toggleStickyShadow(body, 'nile-grid-cell-item', 'right', 'shadow-left', showLeftOnRightStickies);
-}
+  let colCount = 0;
 
-/**
- * @param nileGrid Grid instance
- * @returns Object containing booleans for left/right shadow visibility
- */
-function getShadowStates(nileGrid: NileGrid) {
-  const max = Math.max(0, nileGrid.scrollWidth - nileGrid.clientWidth);
-  return {
-    showRightOnLeftStickies: nileGrid.scrollLeft > 0,
-    showLeftOnRightStickies: nileGrid.scrollLeft < max
-  };
-}
+  colCount = computeHeadLayout(headRows, [], colCount);
+  colCount = computeBodyLayout(bodyRows, [], colCount);
 
-/**
- * @param nileGrid Grid instance
- * @returns Head and body elements from the grid slot
- */
-function getHeadAndBody(nileGrid: NileGrid) {
-  if (!nileGrid.shadowRoot) return { head: undefined, body: undefined };
-  const assigned = nileGrid.slotEl.assignedElements();
-  const find = (tag: string) =>
-    assigned.find(n => n.tagName.toLowerCase() === tag) as HTMLElement | undefined;
-  return { head: find('nile-grid-head'), body: find('nile-grid-body') };
-}
+  computeColumnWidths(nileGrid, colCount, columnWidths);
 
-/**
- * @param root Root element (head or body)
- * @param tag Target tag selector
- * @param side Sticky side ('left' or 'right')
- * @param cls Shadow CSS class to toggle
- * @param on Whether to apply or remove the shadow
- */
-function toggleStickyShadow(
-  root: HTMLElement | undefined,
-  tag: string,
-  side: 'left' | 'right',
-  cls: string,
-  on: boolean
-) {
-  if (!root) return;
-  const sel = `${tag}[data-sticky="${side}"]`;
-  root.querySelectorAll<HTMLElement>(sel).forEach(el => el.classList.toggle(cls, on));
-}
+  ensureWidths(colCount);
+  body.style.gridAutoRows = 'auto';
+  body.style.overflowY = 'auto';
+  nileGrid.colTemplate = rebuildTemplate(colCount, columnWidths);
+  applyTemplate(head, body, nileGrid.colTemplate, nileGrid.colTemplate);
+};