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

package/dist/src/nile-grid/nile-grid.utils.js

@@ -1,493 +1,32 @@
-// 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, slotEl, ensureWidths, rebuildTemplate, stickyLeftIndexes, stickyRightIndexes) => {
-    const head = getHead(slotEl);
-    const body = getBody(slotEl);
-    if (!body)
-        return;
-    const headRows = head
-        ? Array.from(head.querySelectorAll('nile-grid-row'))
-        : [];
-    const bodyRows = Array.from(body.querySelectorAll('nile-grid-row'));
-    let colCount = 0;
-    colCount = computeHeadLayout(nileGrid, headRows, [], colCount, stickyLeftIndexes, stickyRightIndexes, nileGrid.columnWidths);
-    if (colCount) {
-        computeBodyLayout(nileGrid, bodyRows, [], colCount, stickyLeftIndexes, stickyRightIndexes, nileGrid.columnWidths);
+export const resizeLinesHandler = (resizeStart, resizeEnd, col, widthPx, scrollHeight, columnWidths, e) => {
+    resizeStart.style.display = 'block';
+    resizeEnd.style.display = 'block';
+    resizeStart.style.height = scrollHeight + 'px';
+    resizeEnd.style.height = scrollHeight + 'px';
+    if (col === 0) {
+        resizeStart.style.left = `${Math.max(60, widthPx) - 6}px`;
+        resizeEnd.style.left = `${Math.max(60, widthPx) - 2}px`;
     }
     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, rows, carry, colCount, stickyLeftIndexes, stickyRightIndexes, columnWidths, opts) {
-    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, row, rIdx, carry, colCount, stickyLeftIndexes, stickyRightIndexes, columnWidths, opts) {
-    let c = 1;
-    const rStart = rIdx + 1;
-    const items = [...row.querySelectorAll(opts.itemSelector)];
-    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, el, c, rStart, carry, colCount, stickyLeftIndexes, stickyRightIndexes, columnWidths, opts) {
-    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, el, rowspan) {
-    if (rowspan <= 1)
-        return;
-    nileGrid.cellHeight || (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, cStart, cEnd, rStart, rowspan) {
-    const rEnd = rStart + rowspan;
-    el.style.gridColumn = `${cStart} / ${cEnd}`;
-    el.style.gridRow = `${rStart} / ${rEnd}`;
-    el.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, cStart, opts, stickyLeftIndexes, stickyRightIndexes, columnWidths) {
-    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) {
-    for (let i = 0; i < carry.length; i++) {
-        if (carry[i] > 0) {
-            carry[i]--;
+        let totalWidth = 0;
+        if (e.target.getAttribute('colspan') &&
+            parseInt(e.target.getAttribute('colspan')) > 1) {
+            widthPx = widthPx - columnWidths[col - 1];
+            for (let i = 0; i < col; i++) {
+                totalWidth += columnWidths[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, headRows, carryHead, colCount, stickyLeftIndexes, stickyRightIndexes, columnWidths) {
-    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, bodyRows, carryBody, colCount, stickyLeftIndexes, stickyRightIndexes, columnWidths) {
-    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, colCount, columnWidths, slotEl) {
-    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) {
-    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, colCount, containerWidth, prevWidths) {
-    const desired = Array(colCount).fill(null);
-    const head = getHead(slotEl);
-    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, desired, colCount, containerWidth) {
-    const headRows = [...head.children].filter(el => el.tagName.toLowerCase() === 'nile-grid-row');
-    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, desired, colCount, containerWidth) {
-    const items = [...row.children].filter(el => el.tagName.toLowerCase() === 'nile-grid-head-item');
-    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, containerWidth) {
-    const cStart = Number(h.dataset?.cStart) || 1;
-    const colspan = Math.max(1, Number(h.getAttribute('colspan')) || 1);
-    const raw = h.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, cStart, colspan, cw, colCount) {
-    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, prevWidths) {
-    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, containerWidth) {
-    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, columnWidths, minCol) {
-    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, isSeeded, containerWidth, minCol) {
-    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, containerWidth, minCol) {
-    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) {
-    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, containerWidth, total) {
-    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, containerWidth, total, minCol) {
-    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, minCol) {
-    const candidates = [];
-    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];
+        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`;
     }
-    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, candidates, weightSum, need, minCol) {
-    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, minCol) {
-    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, resizeStart, resizeEnd, col, scrollHeight, columnWidths) => {
-    resizeStart.style.display = 'block';
-    resizeEnd.style.display = 'block';
-    resizeStart.style.height = scrollHeight + 'px';
-    resizeEnd.style.height = scrollHeight + 'px';
-    const floor = minColumnWidth;
-    const safe = (n) => Math.max(0, Math.round(n || 0));
-    const sum = (arr, endExclusive) => 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`;
 };
-/** 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, onResize, slotEl, _attachObserverAndLayout) => {
-    nileGrid.addEventListener('nile-column-resize', onResize);
+    nileGrid.addEventListener('nile-resize', onResize);
     nileGrid.addEventListener('nile-resize-start', () => {
         nileGrid.resizeStart.style.display = 'block';
     });
@@ -497,15 +36,8 @@ export const listenToEventListeners = (nileGrid, onResize, slotEl, _attachObserv
     });
     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, onResize, slotEl, _attachObserverAndLayout) => {
-    nileGrid.removeEventListener('nile-column-resize', onResize);
+    nileGrid.removeEventListener('nile-resize', onResize);
     nileGrid.removeEventListener('nile-resize-start', () => {
         nileGrid.resizeStart.style.display = 'block';
     });
@@ -515,27 +47,14 @@ export const removeEventListeners = (nileGrid, onResize, slotEl, _attachObserver
     });
     slotEl.removeEventListener('slotchange', () => _attachObserverAndLayout());
 };
-/** getHead
- * @param slotEl Slot element containing assigned nodes
- * @returns <nile-grid-head> element or null
- */
 export const getHead = (slotEl) => {
     const nodes = slotEl?.assignedElements() ?? [];
     return (nodes.find((n) => n.tagName.toLowerCase() === 'nile-grid-head') || null);
 };
-/** getBody
- * @param slotEl Slot element containing assigned nodes
- * @returns <nile-grid-body> element or null
- */
 export const getBody = (slotEl) => {
     const nodes = slotEl?.assignedElements() ?? [];
     return (nodes.find((n) => n.tagName.toLowerCase() === 'nile-grid-body') || null);
 };
-/** rebuildTemplate
- * @param colCount Number of columns
- * @param columnWidths Array of explicit column widths (px)
- * @returns CSS grid-template-columns string
- */
 export const rebuildTemplate = (colCount, columnWidths) => {
     const parts = [];
     for (let i = 0; i < colCount; i++) {
@@ -549,247 +68,103 @@ export const rebuildTemplate = (colCount, columnWidths) => {
     }
     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, colIndex, stickyLeftIndexes, stickyRightIndexes, columnWidths) {
-    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);
-    }
-}
-/**
- * @param el Grid item element to prepare for sticky positioning
- */
-function prepareStickyElement(el) {
-    el.style.position = 'sticky';
-    el.style.zIndex = '2';
-    el.style.left = '';
-    el.style.right = '';
-    el.removeAttribute('data-sticky');
-}
-/**
- * @param el Target element
- * @param colIndex Column index
- * @param stickyLeftIndexes Sticky-left column indexes
- * @param columnWidths Column width array
- */
-function applyLeftSticky(el, colIndex, stickyLeftIndexes, columnWidths) {
-    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`;
-}
-/**
- * @param el Target element
- * @param colIndex Column index
- * @param stickyRightIndexes Sticky-right indexes
- * @param columnWidths Column widths array
- */
-function applyRightSticky(el, colIndex, stickyRightIndexes, columnWidths) {
-    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`;
-}
-/**
- * @param el Target element within grid
- * @returns Scrollbar width compensation value
- */
-function getScrollbarComp(el) {
-    const scroller = el.closest('nile-grid');
-    return scroller ? scroller.offsetWidth - scroller.clientWidth : 0;
-}
-/**
- * @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, pos, widths, base = 0) {
-    let total = base;
-    for (let i = 0; i < pos; i++)
-        total += widths[order[i]] ?? 0;
-    return total;
-}
-/**
- * @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(nileGrid, columnWidths) {
-    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) {
-    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) {
-    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;
+export const applyTemplate = (head, body, colTemplate) => {
+    if (head)
+        head.style.gridTemplateColumns = colTemplate;
+    if (body) {
+        body.style.gridTemplateColumns = colTemplate;
+        body.style.overflowX = 'auto';
     }
+};
+function computeHeadLayout(headRows, carryHead, colCount) {
+    headRows.forEach((row, rIdx) => {
+        let c = 1;
+        const cells = Array.from(row.querySelectorAll('nile-grid-head-item, nile-grid-cell'));
+        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.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);
+        });
+        for (let i = 0; i < carryHead.length; i++)
+            if (carryHead[i] > 0)
+                carryHead[i]--;
+    });
+    return colCount;
 }
-/**
- * @param columnWidths Current widths
- * @param containerWidth Container width
- */
-export function resizeWithScroll(opts) {
-    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, start, floor) {
-    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, start, needInit, floor) {
-    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;
+function computeBodyLayout(bodyRows, carryBody, colCount) {
+    bodyRows.forEach((row, rIdx) => {
+        let c = 1;
+        const cells = Array.from(row.querySelectorAll('nile-grid-cell, nile-grid-header'));
+        const rStart = rIdx + 1;
+        let maxRowspan = 1;
+        const bg = row.shadowRoot?.querySelector('[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.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}`;
         }
-    }
-    return need;
+        for (let i = 0; i < carryBody.length; i++)
+            if (carryBody[i] > 0)
+                carryBody[i]--;
+    });
+    return colCount;
 }
-/**
- * @param columnWidths Current widths
- * @param amount Pixels to add to rightmost columns
- */
-export function giveToRight(widths, start, giveInit) {
-    let give = giveInit;
-    if (start < widths.length && give > 0) {
-        widths[start] += give;
-        give = 0;
+function computeColumnWidths(nileGrid, colCount, columnWidths) {
+    for (let col = 0; col < colCount; col++) {
+        const containerWidth = (nileGrid.getBoundingClientRect().width || 1) - 2;
+        columnWidths[col] =
+            nileGrid.customWidths[col] || containerWidth / Math.max(colCount, 1);
     }
-    return give;
-}
-/**
- * @param nileGrid The parent grid
- * @param columnWidths New column width array
- */
-export function applyAfterResize(grid, col) {
-    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);
 }
-// Sticky shadow synchronization: toggle shadow classes for sticky columns during horizontal scroll.
-/**
- * @param nileGrid Grid instance to sync shadows for
- */
-export function syncStickyShadows(nileGrid) {
-    const { showRightOnLeftStickies, showLeftOnRightStickies } = getShadowStates(nileGrid);
-    const { head, body } = getHeadAndBody(nileGrid);
-    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);
-}
-/**
- * @param nileGrid Grid instance
- * @returns Object containing booleans for left/right shadow visibility
- */
-function getShadowStates(nileGrid) {
-    const max = Math.max(0, nileGrid.scrollWidth - nileGrid.clientWidth);
-    return {
-        showRightOnLeftStickies: nileGrid.scrollLeft > 0,
-        showLeftOnRightStickies: nileGrid.scrollLeft < max
-    };
-}
-/**
- * @param nileGrid Grid instance
- * @returns Head and body elements from the grid slot
- */
-function getHeadAndBody(nileGrid) {
-    if (!nileGrid.shadowRoot)
-        return { head: undefined, body: undefined };
-    const assigned = nileGrid.slotEl.assignedElements();
-    const find = (tag) => assigned.find(n => n.tagName.toLowerCase() === tag);
-    return { head: find('nile-grid-head'), body: find('nile-grid-body') };
-}
-/**
- * @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, tag, side, cls, on) {
-    if (!root)
+export const layout = (nileGrid, slotEl, ensureWidths, rebuildTemplate, applyTemplate, columnWidths) => {
+    const head = getHead(slotEl);
+    const body = getBody(slotEl);
+    if (!body)
         return;
-    const sel = `${tag}[data-sticky="${side}"]`;
-    root.querySelectorAll(sel).forEach(el => el.classList.toggle(cls, on));
-}
+    const headRows = head
+        ? Array.from(head.querySelectorAll('nile-grid-row'))
+        : [];
+    const bodyRows = Array.from(body.querySelectorAll('nile-grid-row'));
+    let colCount = 0;
+    colCount = computeHeadLayout(headRows, [], colCount);
+    colCount = computeBodyLayout(bodyRows, [], colCount);
+    computeColumnWidths(nileGrid, colCount, columnWidths);
+    ensureWidths(colCount);
+    body.style.gridAutoRows = 'auto';
+    body.style.overflowY = 'auto';
+    nileGrid.colTemplate = rebuildTemplate(colCount, columnWidths);
+    applyTemplate(head, body, nileGrid.colTemplate, nileGrid.colTemplate);
+};
 //# sourceMappingURL=nile-grid.utils.js.map