@aquera/nile-elements 0.1.74 → 0.1.75-beta-1.3

package/dist/src/internal/resizable-helper.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Resizable Helper Utility
+ * Provides common functionality for resizable table columns
+ */
+export interface ResizeOptions {
+    minWidth?: number;
+    startX: number;
+    startWidth: number;
+    element: HTMLElement;
+}
+export interface ColumnResizeData {
+    columnIndex: number;
+    newWidth: number;
+}
+/**
+ * Handles the start of a resize operation
+ * @param e Mouse event
+ * @param options Resize configuration options
+ * @returns Cleanup function to remove event listeners
+ */
+export declare function handleResizeStart(e: MouseEvent, options: ResizeOptions): () => void;
+/**
+ * Gets the column index of an element within its table row
+ * @param element The table cell or header element
+ * @param selector The CSS selector for the column elements
+ * @returns Column index (0-based)
+ */
+export declare function getColumnIndex(element: HTMLElement, selector: string): number;
+/**
+ * Synchronizes the width of all cells in the same column
+ * @param sourceElement The element that was resized
+ * @param newWidth The new width to apply
+ */
+export declare function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: number): void;
+/**
+ * Checks if an element has the resizable attribute
+ * @param element The element to check
+ * @returns True if the element is resizable
+ */
+export declare function isResizable(element: HTMLElement): boolean;
+/**
+ * Creates a resize handler function for use in component event listeners
+ * @param element The element to make resizable
+ * @param minWidth Minimum width constraint
+ * @returns Event handler function
+ */
+export declare function createResizeHandler(element: HTMLElement, minWidth?: number): (e: MouseEvent) => void;
+/**
+ * Detects if any columns in a table are resizable
+ * @param tableBody The table body element
+ * @returns True if any columns have resizable attribute
+ */
+export declare function hasResizableColumns(tableBody: HTMLElement): boolean;

package/dist/src/internal/resizable-helper.js

@@ -0,0 +1,115 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Handles the start of a resize operation
+ * @param e Mouse event
+ * @param options Resize configuration options
+ * @returns Cleanup function to remove event listeners
+ */
+export function handleResizeStart(e, options) {
+    e.preventDefault();
+    e.stopPropagation();
+    const { minWidth = 50, startX, startWidth, element } = options;
+    const resizer = e.target;
+    // Add resizing class for visual feedback
+    resizer.classList.add('resizing');
+    const onMouseMove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const delta = e.pageX - startX;
+        const newWidth = Math.max(minWidth, startWidth + delta);
+        // Apply width to the current element
+        element.style.width = newWidth + 'px';
+        // Synchronize width across all cells in the same column
+        synchronizeColumnWidth(element, newWidth);
+    };
+    const onMouseUp = () => {
+        resizer.classList.remove('resizing');
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    // Return cleanup function
+    return () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+}
+/**
+ * Gets the column index of an element within its table row
+ * @param element The table cell or header element
+ * @param selector The CSS selector for the column elements
+ * @returns Column index (0-based)
+ */
+export function getColumnIndex(element, selector) {
+    const tableRow = element.closest('nile-table-row');
+    if (tableRow) {
+        const columns = tableRow.querySelectorAll(selector);
+        return Array.from(columns).indexOf(element);
+    }
+    return 0;
+}
+/**
+ * Synchronizes the width of all cells in the same column
+ * @param sourceElement The element that was resized
+ * @param newWidth The new width to apply
+ */
+export function synchronizeColumnWidth(sourceElement, newWidth) {
+    const tableBody = sourceElement.closest('nile-table-body');
+    if (!tableBody)
+        return;
+    const isHeader = sourceElement.tagName.toLowerCase() === 'nile-table-header-item';
+    const selector = isHeader ? 'nile-table-header-item' : 'nile-table-cell-item';
+    const targetSelector = isHeader ? 'nile-table-cell-item' : 'nile-table-cell-item';
+    const columnIndex = getColumnIndex(sourceElement, selector);
+    const rows = tableBody.querySelectorAll('nile-table-row');
+    rows.forEach(row => {
+        const cells = row.querySelectorAll(targetSelector);
+        if (cells[columnIndex]) {
+            cells[columnIndex].style.width = newWidth + 'px';
+        }
+    });
+}
+/**
+ * Checks if an element has the resizable attribute
+ * @param element The element to check
+ * @returns True if the element is resizable
+ */
+export function isResizable(element) {
+    return element.hasAttribute('resizable');
+}
+/**
+ * Creates a resize handler function for use in component event listeners
+ * @param element The element to make resizable
+ * @param minWidth Minimum width constraint
+ * @returns Event handler function
+ */
+export function createResizeHandler(element, minWidth = 50) {
+    return (e) => {
+        const options = {
+            minWidth,
+            startX: e.pageX,
+            startWidth: element.offsetWidth,
+            element
+        };
+        handleResizeStart(e, options);
+    };
+}
+/**
+ * Detects if any columns in a table are resizable
+ * @param tableBody The table body element
+ * @returns True if any columns have resizable attribute
+ */
+export function hasResizableColumns(tableBody) {
+    const headerItems = tableBody.querySelectorAll('nile-table-header-item');
+    const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
+    const hasResizableHeaders = Array.from(headerItems).some(item => isResizable(item));
+    const hasResizableCells = Array.from(cellItems).some(item => isResizable(item));
+    return hasResizableHeaders || hasResizableCells;
+}
+//# sourceMappingURL=resizable-helper.js.map

package/dist/src/internal/resizable-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-helper.js","sourceRoot":"","sources":["../../../src/internal/resizable-helper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Resizable Helper Utility\n * Provides common functionality for resizable table columns\n */\n\nexport interface ResizeOptions {\n  minWidth?: number;\n  startX: number;\n  startWidth: number;\n  element: HTMLElement;\n}\n\nexport interface ColumnResizeData {\n  columnIndex: number;\n  newWidth: number;\n}\n\n/**\n * Handles the start of a resize operation\n * @param e Mouse event\n * @param options Resize configuration options\n * @returns Cleanup function to remove event listeners\n */\nexport function handleResizeStart(e: MouseEvent, options: ResizeOptions): () => void {\n  e.preventDefault();\n  e.stopPropagation();\n  \n  const { minWidth = 50, startX, startWidth, element } = options;\n  const resizer = e.target as HTMLElement;\n  \n  // Add resizing class for visual feedback\n  resizer.classList.add('resizing');\n\n  const onMouseMove = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    \n    const delta = e.pageX - startX;\n    const newWidth = Math.max(minWidth, startWidth + delta);\n\n    // Apply width to the current element\n    element.style.width = newWidth + 'px';\n\n    // Synchronize width across all cells in the same column\n    synchronizeColumnWidth(element, newWidth);\n  };\n\n  const onMouseUp = () => {\n    resizer.classList.remove('resizing');\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n\n  document.addEventListener('mousemove', onMouseMove);\n  document.addEventListener('mouseup', onMouseUp);\n\n  // Return cleanup function\n  return () => {\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n}\n\n/**\n * Gets the column index of an element within its table row\n * @param element The table cell or header element\n * @param selector The CSS selector for the column elements\n * @returns Column index (0-based)\n */\nexport function getColumnIndex(element: HTMLElement, selector: string): number {\n  const tableRow = element.closest('nile-table-row');\n  if (tableRow) {\n    const columns = tableRow.querySelectorAll(selector);\n    return Array.from(columns).indexOf(element);\n  }\n  return 0;\n}\n\n/**\n * Synchronizes the width of all cells in the same column\n * @param sourceElement The element that was resized\n * @param newWidth The new width to apply\n */\nexport function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: number): void {\n  const tableBody = sourceElement.closest('nile-table-body');\n  if (!tableBody) return;\n\n  const isHeader = sourceElement.tagName.toLowerCase() === 'nile-table-header-item';\n  const selector = isHeader ? 'nile-table-header-item' : 'nile-table-cell-item';\n  const targetSelector = isHeader ? 'nile-table-cell-item' : 'nile-table-cell-item';\n  \n  const columnIndex = getColumnIndex(sourceElement, selector);\n  const rows = tableBody.querySelectorAll('nile-table-row');\n  \n  rows.forEach(row => {\n    const cells = row.querySelectorAll(targetSelector);\n    if (cells[columnIndex]) {\n      cells[columnIndex].style.width = newWidth + 'px';\n    }\n  });\n}\n\n/**\n * Checks if an element has the resizable attribute\n * @param element The element to check\n * @returns True if the element is resizable\n */\nexport function isResizable(element: HTMLElement): boolean {\n  return element.hasAttribute('resizable');\n}\n\n/**\n * Creates a resize handler function for use in component event listeners\n * @param element The element to make resizable\n * @param minWidth Minimum width constraint\n * @returns Event handler function\n */\nexport function createResizeHandler(element: HTMLElement, minWidth: number = 50): (e: MouseEvent) => void {\n  return (e: MouseEvent) => {\n    const options: ResizeOptions = {\n      minWidth,\n      startX: e.pageX,\n      startWidth: element.offsetWidth,\n      element\n    };\n    \n    handleResizeStart(e, options);\n  };\n}\n\n/**\n * Detects if any columns in a table are resizable\n * @param tableBody The table body element\n * @returns True if any columns have resizable attribute\n */\nexport function hasResizableColumns(tableBody: HTMLElement): boolean {\n  const headerItems = tableBody.querySelectorAll('nile-table-header-item');\n  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');\n  \n  const hasResizableHeaders = Array.from(headerItems).some(item => \n    isResizable(item)\n  );\n  const hasResizableCells = Array.from(cellItems).some(item => \n    isResizable(item)\n  );\n  \n  return hasResizableHeaders || hasResizableCells;\n} \n"]}

package/dist/src/internal/resizable-styles.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+export declare const resizableHostStyles: import("lit").CSSResult;
+export declare const resizableHeaderStyles: import("lit").CSSResult;
+export declare const resizerStyles: import("lit").CSSResult;
+export declare const headerResizerStyles: import("lit").CSSResult;
+export declare const resizableSlotStyles: import("lit").CSSResult;
+export declare const tableLayoutStyles: import("lit").CSSResult;

package/dist/src/internal/resizable-styles.js

@@ -0,0 +1,144 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+export const resizableHostStyles = css `
+  /* Resizable-specific host styles */
+  :host([resizable]) {
+    position: relative;
+    overflow: hidden;
+    table-layout: fixed;
+  }
+`;
+export const resizableHeaderStyles = css `
+  /* Resizable-specific header styles */
+  :host([resizable]) {
+    position: relative;
+    border-right: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  /* Resizable-specific wrapper styles */
+  :host([resizable]) .header__item__wrapper {
+    position: relative;
+  }
+`;
+export const resizerStyles = css `
+  /* Resizer styles - only apply when resizable */
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: col-resize;
+    user-select: none;
+    background-color: var(--nile-colors-neutral-100);
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    right: 3px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: var(--nile-colors-neutral-500);
+    opacity: 0.8;
+  }
+
+  .resizer:hover {
+    background-color: var(--nile-colors-neutral-400);
+  }
+
+  .resizer:hover::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+  }
+
+  .resizer.resizing {
+    background-color: var(--nile-colors-neutral-400);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer.resizing::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+    width: 3px;
+  }
+`;
+export const headerResizerStyles = css `
+  /* Header resizer styles */
+  .resizer {
+    position: absolute;
+    right: -2px;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: ew-resize;
+    user-select: none;
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    opacity: 0.8;
+  }
+
+  .resizer.resizing {
+    border-right: 4px double var(--nile-colors-neutral-400);
+    background-color: transparent;
+    opacity: 1;
+  }
+`;
+export const resizableSlotStyles = css `
+  /* Slot styles for resizable mode */
+  :host([resizable]) ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  :host([resizable]) ::slotted(span),
+  :host([resizable]) ::slotted(div),
+  :host([resizable]) ::slotted(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+export const tableLayoutStyles = css `
+  /* Apply fixed table layout only when resizable columns are present */
+  .nile__table__body[resizable] {
+    table-layout: fixed;
+  }
+`;
+//# sourceMappingURL=resizable-styles.js.map

package/dist/src/internal/resizable-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-styles.js","sourceRoot":"","sources":["../../../src/internal/resizable-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;CAOrC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;CAWvC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsD/B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCrC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBrC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;CAKnC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Resizable Styles Utility\n * Centralized styles for resizable table functionality\n */\n\nexport const resizableHostStyles = css`\n  /* Resizable-specific host styles */\n  :host([resizable]) {\n    position: relative;\n    overflow: hidden;\n    table-layout: fixed;\n  }\n`;\n\nexport const resizableHeaderStyles = css`\n  /* Resizable-specific header styles */\n  :host([resizable]) {\n    position: relative;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  /* Resizable-specific wrapper styles */\n  :host([resizable]) .header__item__wrapper {\n    position: relative;\n  }\n`;\n\nexport const resizerStyles = css`\n  /* Resizer styles - only apply when resizable */\n  .resizer {\n    position: absolute;\n    right: 0;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: col-resize;\n    user-select: none;\n    background-color: var(--nile-colors-neutral-100);\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    pointer-events: none;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    right: 3px;\n    top: 0;\n    width: 2px;\n    height: 100%;\n    background-color: var(--nile-colors-neutral-500);\n    opacity: 0.8;\n  }\n\n  .resizer:hover {\n    background-color: var(--nile-colors-neutral-400);\n  }\n\n  .resizer:hover::before {\n    background-color: var(--nile-colors-neutral-700);\n    opacity: 1;\n  }\n\n  .resizer.resizing {\n    background-color: var(--nile-colors-neutral-400);\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer.resizing::before {\n    background-color: var(--nile-colors-neutral-700);\n    opacity: 1;\n    width: 3px;\n  }\n`;\n\nexport const headerResizerStyles = css`\n  /* Header resizer styles */\n  .resizer {\n    position: absolute;\n    right: -2px;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: ew-resize;\n    user-select: none;\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    height: 100%;\n    opacity: 0.8;\n  }\n\n  .resizer.resizing {\n    border-right: 4px double var(--nile-colors-neutral-400);\n    background-color: transparent;\n    opacity: 1;\n  }\n`;\n\nexport const resizableSlotStyles = css`\n  /* Slot styles for resizable mode */\n  :host([resizable]) ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n\n  :host([resizable]) ::slotted(span),\n  :host([resizable]) ::slotted(div),\n  :host([resizable]) ::slotted(p) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const tableLayoutStyles = css`\n  /* Apply fixed table layout only when resizable columns are present */\n  .nile__table__body[resizable] {\n    table-layout: fixed;\n  }\n`; \n"]}

package/dist/src/internal/virtualizer-error-handler.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Error handler specifically for virtualizer DOM manipulation errors
+ * Catches and ignores common virtualizer errors that occur during rapid updates
+ */
+export declare class VirtualizerErrorHandler {
+    private static isSetup;
+    private static originalConsoleError;
+    /**
+     * Sets up global error handling for virtualizer errors
+     * This should be called once during application initialization
+     */
+    static setup(): void;
+    /**
+     * Restores original error handling
+     */
+    static teardown(): void;
+    /**
+     * Checks if an error is a virtualizer DOM manipulation error that should be ignored
+     */
+    static isVirtualizerError(error: any): boolean;
+    private static setupConsoleErrorHandler;
+    private static setupUnhandledErrorHandler;
+    private static setupUnhandledRejectionHandler;
+}

package/dist/src/internal/virtualizer-error-handler.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Error handler specifically for virtualizer DOM manipulation errors
+ * Catches and ignores common virtualizer errors that occur during rapid updates
+ */
+export class VirtualizerErrorHandler {
+    /**
+     * Sets up global error handling for virtualizer errors
+     * This should be called once during application initialization
+     */
+    static setup() {
+        if (this.isSetup) {
+            return;
+        }
+        this.originalConsoleError = console.error;
+        this.setupConsoleErrorHandler();
+        this.setupUnhandledErrorHandler();
+        this.setupUnhandledRejectionHandler();
+        this.isSetup = true;
+    }
+    /**
+     * Restores original error handling
+     */
+    static teardown() {
+        if (!this.isSetup) {
+            return;
+        }
+        if (this.originalConsoleError) {
+            console.error = this.originalConsoleError;
+        }
+        this.isSetup = false;
+    }
+    /**
+     * Checks if an error is a virtualizer DOM manipulation error that should be ignored
+     */
+    static isVirtualizerError(error) {
+        const errorMessage = error?.message || error?.toString() || '';
+        return (errorMessage.includes('Cannot read properties of null (reading \'insertBefore\')') ||
+            errorMessage.includes('directive-helpers.ts:132') ||
+            errorMessage.includes('repeat.ts:416') ||
+            errorMessage.includes('virtualize.ts:139') ||
+            errorMessage.includes('Virtualizer.ts:816') ||
+            errorMessage.includes('Virtualizer.ts:546') ||
+            errorMessage.includes('Virtualizer.ts:617'));
+    }
+    static setupConsoleErrorHandler() {
+        console.error = (...args) => {
+            const errorMessage = args[0]?.toString() || '';
+            if (this.isVirtualizerError(errorMessage)) {
+                console.warn('Virtualizer DOM error caught and ignored:', ...args);
+                return;
+            }
+            // For all other errors, use the original console.error
+            this.originalConsoleError.apply(console, args);
+        };
+    }
+    static setupUnhandledErrorHandler() {
+        window.addEventListener('error', (event) => {
+            if (this.isVirtualizerError(event.error)) {
+                console.warn('Unhandled virtualizer error caught and ignored:', event.error);
+                event.preventDefault();
+                return false;
+            }
+        });
+    }
+    static setupUnhandledRejectionHandler() {
+        window.addEventListener('unhandledrejection', (event) => {
+            if (this.isVirtualizerError(event.reason)) {
+                console.warn('Unhandled virtualizer promise rejection caught and ignored:', event.reason);
+                event.preventDefault();
+                return false;
+            }
+        });
+    }
+}
+VirtualizerErrorHandler.isSetup = false;
+//# sourceMappingURL=virtualizer-error-handler.js.map

package/dist/src/internal/virtualizer-error-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualizer-error-handler.js","sourceRoot":"","sources":["../../../src/internal/virtualizer-error-handler.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;GAGG;AACH,MAAM,OAAO,uBAAuB;IAIlC;;;OAGG;IACH,MAAM,CAAC,KAAK;QACV,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,KAAK,CAAC;QAC1C,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAClC,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACtC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,QAAQ;QACb,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAC5C,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,kBAAkB,CAAC,KAAU;QAClC,MAAM,YAAY,GAAG,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC/D,OAAO,CACL,YAAY,CAAC,QAAQ,CAAC,2DAA2D,CAAC;YAClF,YAAY,CAAC,QAAQ,CAAC,0BAA0B,CAAC;YACjD,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAC;YACtC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAAC;YAC1C,YAAY,CAAC,QAAQ,CAAC,oBAAoB,CAAC;YAC3C,YAAY,CAAC,QAAQ,CAAC,oBAAoB,CAAC;YAC3C,YAAY,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAC5C,CAAC;IACJ,CAAC;IAEO,MAAM,CAAC,wBAAwB;QACrC,OAAO,CAAC,KAAK,GAAG,CAAC,GAAG,IAAW,EAAE,EAAE;YACjC,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAE/C,IAAI,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,CAAC;gBAC1C,OAAO,CAAC,IAAI,CAAC,2CAA2C,EAAE,GAAG,IAAI,CAAC,CAAC;gBACnE,OAAO;YACT,CAAC;YAED,uDAAuD;YACvD,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC;IAEO,MAAM,CAAC,0BAA0B;QACvC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACzC,IAAI,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;gBACzC,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;gBAC7E,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,MAAM,CAAC,8BAA8B;QAC3C,MAAM,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,CAAC,KAAK,EAAE,EAAE;YACtD,IAAI,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC1C,OAAO,CAAC,IAAI,CAAC,6DAA6D,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;gBAC1F,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;;AAjFc,+BAAO,GAAG,KAAK,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Error handler specifically for virtualizer DOM manipulation errors\n * Catches and ignores common virtualizer errors that occur during rapid updates\n */\nexport class VirtualizerErrorHandler {\n  private static isSetup = false;\n  private static originalConsoleError: typeof console.error;\n\n  /**\n   * Sets up global error handling for virtualizer errors\n   * This should be called once during application initialization\n   */\n  static setup(): void {\n    if (this.isSetup) {\n      return;\n    }\n\n    this.originalConsoleError = console.error;\n    this.setupConsoleErrorHandler();\n    this.setupUnhandledErrorHandler();\n    this.setupUnhandledRejectionHandler();\n    this.isSetup = true;\n  }\n\n  /**\n   * Restores original error handling\n   */\n  static teardown(): void {\n    if (!this.isSetup) {\n      return;\n    }\n\n    if (this.originalConsoleError) {\n      console.error = this.originalConsoleError;\n    }\n    this.isSetup = false;\n  }\n\n  /**\n   * Checks if an error is a virtualizer DOM manipulation error that should be ignored\n   */\n  static isVirtualizerError(error: any): boolean {\n    const errorMessage = error?.message || error?.toString() || '';\n    return (\n      errorMessage.includes('Cannot read properties of null (reading \\'insertBefore\\')') ||\n      errorMessage.includes('directive-helpers.ts:132') ||\n      errorMessage.includes('repeat.ts:416') ||\n      errorMessage.includes('virtualize.ts:139') ||\n      errorMessage.includes('Virtualizer.ts:816') ||\n      errorMessage.includes('Virtualizer.ts:546') ||\n      errorMessage.includes('Virtualizer.ts:617')\n    );\n  }\n\n  private static setupConsoleErrorHandler(): void {\n    console.error = (...args: any[]) => {\n      const errorMessage = args[0]?.toString() || '';\n      \n      if (this.isVirtualizerError(errorMessage)) {\n        console.warn('Virtualizer DOM error caught and ignored:', ...args);\n        return;\n      }\n      \n      // For all other errors, use the original console.error\n      this.originalConsoleError.apply(console, args);\n    };\n  }\n\n  private static setupUnhandledErrorHandler(): void {\n    window.addEventListener('error', (event) => {\n      if (this.isVirtualizerError(event.error)) {\n        console.warn('Unhandled virtualizer error caught and ignored:', event.error);\n        event.preventDefault();\n        return false;\n      }\n    });\n  }\n\n  private static setupUnhandledRejectionHandler(): void {\n    window.addEventListener('unhandledrejection', (event) => {\n      if (this.isVirtualizerError(event.reason)) {\n        console.warn('Unhandled virtualizer promise rejection caught and ignored:', event.reason);\n        event.preventDefault();\n        return false;\n      }\n    });\n  }\n}\n"]}

package/dist/src/lib/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { virtualize, createVirtualizer, type VirtualizeOptions } from './virtualize.js';

package/dist/src/lib/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { virtualize, createVirtualizer } from './virtualize.js';
+//# sourceMappingURL=index.js.map

package/dist/src/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAA0B,MAAM,iBAAiB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport { virtualize, createVirtualizer, type VirtualizeOptions } from './virtualize.js';\n"]}

package/dist/src/lib/virtualize.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type TemplateResult } from 'lit';
+export interface VirtualizeOptions {
+    items: any[];
+    renderItem: (item: any, index: number) => TemplateResult;
+    scroller?: boolean;
+    itemHeight?: number;
+    containerHeight?: number;
+    overscan?: number;
+}
+/**
+ * Custom virtualize function that mimics the @lit-labs/virtualizer API
+ * but uses our own implementation for better control and customization
+ */
+export declare function virtualize(options: VirtualizeOptions): TemplateResult;
+/**
+ * Enhanced virtualize function with better performance and scroll handling
+ */
+export declare function createVirtualizer(options: VirtualizeOptions): {
+    handleScroll: (e: Event) => void;
+    getVisibleRange: () => {
+        start: number;
+        end: number;
+    };
+    getTotalHeight: () => number;
+    scrollToItem: (index: number, container: HTMLElement) => void;
+};

package/dist/src/lib/virtualize.js

@@ -0,0 +1,105 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { html } from 'lit';
+/**
+ * Custom virtualize function that mimics the @lit-labs/virtualizer API
+ * but uses our own implementation for better control and customization
+ */
+export function virtualize(options) {
+    const { items = [], renderItem, scroller = true, itemHeight = 40, containerHeight = 300, overscan = 5 } = options;
+    // If no items, return empty template
+    if (!items.length) {
+        return html ``;
+    }
+    // For small datasets, render all items without virtualization
+    if (items.length < 10) {
+        return html `
+      ${items.map((item, index) => renderItem(item, index))}
+    `;
+    }
+    // Create a unique ID for this virtualizer instance
+    const virtualizerId = `virtualizer-${Math.random().toString(36).substr(2, 9)}`;
+    return html `
+    <div 
+      id="${virtualizerId}"
+      class="custom-virtualizer"
+      style="
+        height: ${containerHeight}px; 
+        overflow-y: auto; 
+        position: relative;
+        contain: layout style paint;
+      "
+      @scroll=${(e) => {
+        const container = e.target;
+        const scrollTop = container.scrollTop;
+        // Calculate visible range
+        const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+        const end = Math.min(start + Math.ceil(containerHeight / itemHeight) + (overscan * 2), items.length);
+        // Update the virtualized content
+        updateVirtualizedContent(container, items, renderItem, start, end, itemHeight);
+    }}
+    >
+      ${(() => {
+        // Initial render - show first visible items
+        const start = 0;
+        const end = Math.min(Math.ceil(containerHeight / itemHeight) + (overscan * 2), items.length);
+        return html `
+          ${updateVirtualizedContent(null, items, renderItem, start, end, itemHeight)}
+        `;
+    })()}
+    </div>
+  `;
+}
+/**
+ * Update the virtualized content based on scroll position
+ */
+function updateVirtualizedContent(container, items, renderItem, start, end, itemHeight) {
+    const visibleItems = items.slice(start, end);
+    const spacerBefore = start * itemHeight;
+    const spacerAfter = (items.length - end) * itemHeight;
+    return html `
+    ${spacerBefore > 0 ? html `<div style="height: ${spacerBefore}px; flex-shrink: 0;"></div>` : ''}
+    ${visibleItems.map((item, index) => html `<div style="height: ${itemHeight}px; flex-shrink: 0;">${renderItem(item, start + index)}</div>`)}
+    ${spacerAfter > 0 ? html `<div style="height: ${spacerAfter}px; flex-shrink: 0;"></div>` : ''}
+  `;
+}
+/**
+ * Enhanced virtualize function with better performance and scroll handling
+ */
+export function createVirtualizer(options) {
+    const { items = [], renderItem, scroller = true, itemHeight = 40, containerHeight = 300, overscan = 5 } = options;
+    let scrollTop = 0;
+    let isScrolling = false;
+    let scrollTimeout;
+    const handleScroll = (e) => {
+        const container = e.target;
+        scrollTop = container.scrollTop;
+        isScrolling = true;
+        // Debounce scroll end detection
+        if (scrollTimeout) {
+            clearTimeout(scrollTimeout);
+        }
+        scrollTimeout = setTimeout(() => {
+            isScrolling = false;
+        }, 150);
+    };
+    return {
+        handleScroll,
+        getVisibleRange: () => {
+            const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+            const end = Math.min(start + Math.ceil(containerHeight / itemHeight) + (overscan * 2), items.length);
+            return { start, end };
+        },
+        getTotalHeight: () => items.length * itemHeight,
+        scrollToItem: (index, container) => {
+            const scrollPosition = index * itemHeight;
+            container.scrollTop = scrollPosition;
+            scrollTop = scrollPosition;
+        }
+    };
+}
+//# sourceMappingURL=virtualize.js.map