@ornery/ui-grid-vanilla 0.1.7-hotfix

package/demo/index.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI Grid Vanilla Demo</title>
+    <style>
+      :root {
+        font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+        color: #14213d;
+        background:
+          radial-gradient(circle at top left, rgba(244, 162, 97, 0.28), transparent 28%),
+          radial-gradient(circle at bottom right, rgba(42, 157, 143, 0.24), transparent 32%),
+          #f7f3eb;
+      }
+
+      body {
+        margin: 0;
+        min-height: 100vh;
+      }
+
+      .page {
+        display: grid;
+        gap: 1.5rem;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+      }
+
+      .hero {
+        padding: 1.5rem 1.75rem;
+        border: 1px solid rgba(20, 33, 61, 0.12);
+        border-radius: 1.25rem;
+        background: rgba(255, 255, 255, 0.72);
+        backdrop-filter: blur(18px);
+        box-shadow: 0 24px 80px rgba(20, 33, 61, 0.08);
+      }
+
+      h1 {
+        margin: 0 0 0.5rem;
+        font-size: clamp(2rem, 4vw, 3.5rem);
+        line-height: 0.95;
+      }
+
+      p {
+        margin: 0;
+        max-width: 65ch;
+        line-height: 1.5;
+      }
+
+      #app {
+        min-height: 640px;
+      }
+
+      .shell {
+        --ui-grid-surface: rgba(255, 255, 255, 0.88);
+        --ui-grid-header-background: #143a52;
+        --ui-grid-header-color: #f7f3eb;
+        --ui-grid-accent: #e76f51;
+        --ui-grid-cell-color: #14213d;
+        --ui-grid-border-color: rgba(20, 33, 61, 0.16);
+        --ui-grid-row-hover: rgba(231, 111, 81, 0.08);
+      }
+    </style>
+  </head>
+  <body>
+    <main class="page shell">
+      <section class="hero">
+        <h1>Vanilla + Rust/WASM UI Grid</h1>
+        <p>
+          This page mounts the Rust-backed custom element directly, without Angular or React host code.
+          It is the baseline integration target for future Rust-framework wrappers.
+        </p>
+      </section>
+      <section id="app"></section>
+    </main>
+    <script type="module" src="./main.ts"></script>
+  </body>
+  </html>

package/demo/main.ts

@@ -0,0 +1,68 @@
+import { mountVanillaUiGrid } from '../src/index';
+import type { GridOptions } from '../src/index';
+import * as uiGridRustWebModule from '../../../dist/ui-grid-wasm-web/ui_grid_wasm.js';
+
+const statuses = ['Active', 'Expansion', 'Enterprise', 'Pilot'] as const;
+const companies = ['Northwind', 'Blue Harbor', 'Forge Group', 'Larkspur', 'Atlas'] as const;
+const owners = ['Casey Tran', 'Jordan Silva', 'Priya Rao', 'Evan Brooks', 'Mina Patel'] as const;
+
+function createDemoData(count = 5000) {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `row-${i + 1}`,
+    name: `Customer ${i + 1}`,
+    company: companies[i % companies.length],
+    revenue: 40000 + i * 1350,
+    status: statuses[i % statuses.length],
+    renewalDate: `2026-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 27) + 1).padStart(2, '0')}`,
+    account: { owner: owners[i % owners.length] },
+  }));
+}
+
+const options: GridOptions = {
+  id: 'vanilla-demo-grid',
+  title: 'UI Grid Vanilla Demo',
+  emptyMessage: 'No rows match the current filters.',
+  rowHeight: 48,
+  viewportHeight: 620,
+  enableSorting: true,
+  enableFiltering: true,
+  enableGrouping: true,
+  enableVirtualization: true,
+  virtualizationThreshold: 25,
+  grouping: { groupBy: ['status'] },
+  columnDefs: [
+    { name: 'name', displayName: 'Customer', width: 'minmax(14rem, 1.2fr)' },
+    { name: 'company', width: 'minmax(12rem, 1fr)' },
+    {
+      name: 'revenue',
+      type: 'number',
+      align: 'end',
+      width: 'minmax(10rem, 0.7fr)',
+    },
+    { name: 'status', width: 'minmax(8rem, 0.7fr)' },
+    {
+      name: 'renewalDate',
+      type: 'date',
+      displayName: 'Renewal',
+      width: 'minmax(11rem, 0.8fr)',
+    },
+    {
+      name: 'owner',
+      field: 'account.owner',
+      displayName: 'Account Owner',
+      width: 'minmax(11rem, 0.8fr)',
+    },
+  ],
+  data: createDemoData(),
+};
+
+const mountPoint = document.getElementById('app');
+
+if (!mountPoint) {
+  throw new Error('Expected vanilla demo mount point');
+}
+
+void mountVanillaUiGrid(mountPoint, options, uiGridRustWebModule).catch((error) => {
+  console.error(error);
+  mountPoint.textContent = error instanceof Error ? error.message : String(error);
+});

package/dist/index.d.mts

@@ -0,0 +1,206 @@
+import { GridOptions, GridLabels, GridColumnDef, PipelineResult, SortState, PinnedColumnState, GridCellPosition, UiGridApi, DisplayItem, SortDirection, PinDirection, GridRow, GridRecord, GroupItem, BuildGridPipelineContext } from '@ornery/ui-grid-core';
+export { GridOptions, UiGridApi } from '@ornery/ui-grid-core';
+
+interface GridSaveState {
+    sortState: SortState;
+    activeFilters: Record<string, string>;
+    groupByColumns: string[];
+    pinnedColumns: PinnedColumnState;
+    columnOrder: string[];
+    currentPage: number;
+    pageSize: number;
+}
+interface GridControllerSnapshot {
+    options: GridOptions;
+    labels: GridLabels;
+    rowSize: number;
+    visibleColumns: GridColumnDef[];
+    gridTemplateColumns: string;
+    pipeline: PipelineResult;
+    activeFilters: Record<string, string>;
+    sortState: SortState;
+    groupByColumns: string[];
+    pinnedColumns: PinnedColumnState;
+    currentPage: number;
+    totalPages: number;
+    firstRowIndex: number;
+    lastRowIndex: number;
+    pageSize: number;
+    editingCell: GridCellPosition | null;
+    editingValue: string;
+}
+type GridControllerSubscriber = (snapshot: GridControllerSnapshot) => void;
+declare class VanillaGridController {
+    private options;
+    private activeFilters;
+    private sortState;
+    private groupByColumns;
+    private collapsedGroups;
+    private hiddenRowReasons;
+    private expandedRows;
+    private expandedTreeRows;
+    private pinnedColumns;
+    private columnOrder;
+    private currentPage;
+    private pageSize;
+    private editingCell;
+    private editingValue;
+    private pipeline;
+    private labels;
+    private visibleColumns;
+    private apiRegistered;
+    private readonly subscribers;
+    readonly gridApi: UiGridApi;
+    constructor(options: GridOptions);
+    setOptions(options: GridOptions): void;
+    subscribe(subscriber: GridControllerSubscriber): () => void;
+    getSnapshot(): GridControllerSnapshot;
+    getDisplayItems(): DisplayItem[];
+    setCollapsedGroup(groupId: string, collapsed: boolean): void;
+    toggleSort(columnName: string): void;
+    sortColumn(columnName: string, direction?: SortDirection): void;
+    setFilter(columnName: string, value: string): void;
+    clearAllFilters(): void;
+    toggleGrouping(columnName: string): void;
+    clearGrouping(): void;
+    seekPage(page: number): void;
+    setPageSize(pageSize: number): void;
+    pinColumn(columnName: string, direction: PinDirection): void;
+    moveVisibleColumn(columnName: string, targetColumnName: string): void;
+    toggleRowExpansion(row: GridRow | GridRecord | string): void;
+    expandAllRows(): void;
+    collapseAllRows(): void;
+    toggleTreeRow(row: GridRow | GridRecord | string): void;
+    expandAllTreeRows(): void;
+    collapseAllTreeRows(): void;
+    setTreeRowExpanded(row: GridRow | GridRecord | string, expanded: boolean): void;
+    beginCellEdit(row: GridRow | GridRecord | string, columnName: string, triggerEvent?: Event | KeyboardEvent | null): void;
+    updateEditingValue(value: string): void;
+    commitCellEdit(): void;
+    cancelCellEdit(): void;
+    isGroupingEnabled(): boolean;
+    isSortingEnabled(): boolean;
+    isFilteringEnabled(): boolean;
+    isPaginationEnabled(): boolean;
+    shouldShowPaginationControls(): boolean;
+    isTreeEnabled(): boolean;
+    isExpandableEnabled(): boolean;
+    isColumnSortable(column: GridColumnDef): boolean;
+    isColumnFilterable(column: GridColumnDef): boolean;
+    isColumnGrouped(column: GridColumnDef): boolean;
+    sortButtonLabel(column: GridColumnDef): string;
+    groupingButtonLabel(column: GridColumnDef): string;
+    filterPlaceholder(column: GridColumnDef): string;
+    getSortDirection(column: GridColumnDef): SortDirection;
+    isPinningEnabled(): boolean;
+    isColumnPinnable(column: GridColumnDef): boolean;
+    isPinned(column: GridColumnDef): boolean;
+    isPinnedLeftLast(column: GridColumnDef): boolean;
+    isPinnedRightFirst(column: GridColumnDef): boolean;
+    groupDisclosureLabel(group: GroupItem): string;
+    pinnedOffset(column: GridColumnDef): {
+        side: 'left' | 'right';
+        offset: string;
+    } | null;
+    displayValue(row: GridRow, column: GridColumnDef): unknown;
+    headerLabel(column: GridColumnDef): string;
+    cellIndent(row: GridRow, column: GridColumnDef): string;
+    showTreeToggle(row: GridRow, column: GridColumnDef): boolean;
+    showExpandToggle(_row: GridRow, column: GridColumnDef): boolean;
+    isTreeRowExpanded(row: GridRow): boolean;
+    treeToggleLabel(row: GridRow): string;
+    expandToggleLabel(row: GridRow): string;
+    editorInputType(column: GridColumnDef): string;
+    isEditingCell(rowId: string, columnName: string): boolean;
+    getState(): GridSaveState;
+    setState(state: Partial<GridSaveState>): void;
+    private refresh;
+    private emit;
+    private findRowById;
+    private buildRowsFromData;
+    private findColumnByName;
+    private resolveRowId;
+    private getRowSize;
+    private getTotalPages;
+    private getEffectivePageSize;
+    private getCurrentPage;
+    private getFirstRowIndex;
+    private getLastRowIndex;
+    private setRowInvisible;
+    private clearRowInvisible;
+    private benchmark;
+}
+declare function createVanillaGridController(options: GridOptions): VanillaGridController;
+
+type VanillaUiGridElement = HTMLElement & {
+    options: GridOptions;
+    getState(): GridSaveState | null;
+    setState(state: Partial<GridSaveState>): void;
+};
+type UiGridControlIconKey = 'sortNone' | 'sortAsc' | 'sortDesc' | 'group' | 'groupExpanded' | 'groupCollapsed' | 'treeExpanded' | 'treeCollapsed' | 'expandExpanded' | 'expandCollapsed' | 'pin' | 'pinLeft' | 'pinRight' | 'paginationPrev' | 'paginationNext';
+interface UiGridIconDefinition {
+    viewBox?: string;
+    path: string;
+}
+type UiGridIconOverrides = Partial<Record<UiGridControlIconKey, UiGridIconDefinition>>;
+declare class UiGridStandaloneElement extends HTMLElement {
+    private controller;
+    private snapshot;
+    private unsubscribe;
+    private activeOptions;
+    private iconOverrides;
+    private templateObserver;
+    private openPinMenuColumn;
+    private focusedCell;
+    private draggedColumnName;
+    private dropTargetColumnName;
+    private scrollPosition;
+    private scrollFrame;
+    private suppressScrollEvent;
+    private lastVirtualStartIndex;
+    private measuredHeaderStickyHeight;
+    private measuredFilterStickyHeight;
+    private stickyHeightRelayoutQueued;
+    private benchmarkAverage;
+    get options(): GridOptions;
+    set options(value: GridOptions);
+    get controlIcons(): UiGridIconOverrides;
+    set controlIcons(value: UiGridIconOverrides);
+    getState(): GridSaveState | null;
+    setState(state: Partial<GridSaveState>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private ensureShadowRoot;
+    private ensureController;
+    private observeTemplateSlots;
+    private buildEffectiveOptions;
+    private bindEvents;
+    private render;
+    private renderHeaderCell;
+    private renderFilterCell;
+    private renderDisplayItem;
+    private renderBodyCell;
+    private renderPagination;
+    private renderSlotRegistry;
+    private renderCellTemplate;
+    private renderExpandableTemplate;
+    private getTemplateMarkup;
+    private interpolateTemplate;
+    private resolveTemplateValue;
+    private rowIndexFor;
+    private cellSlotName;
+    private downloadCsv;
+    private renderControlIcon;
+    private renderIconWithClass;
+}
+declare function defineStandaloneUiGridElement(tagName?: string): Promise<void>;
+
+interface UiGridRustWebModule {
+    default(input?: unknown): Promise<unknown>;
+    build_pipeline_js(context: BuildGridPipelineContext): PipelineResult;
+}
+
+declare function registerVanillaUiGridRustModule(module: UiGridRustWebModule, input?: unknown): Promise<void>;
+declare function mountVanillaUiGrid(target: Element, options: GridOptions, rustModule?: UiGridRustWebModule, tagName?: string): Promise<VanillaUiGridElement>;
+
+export { type GridControllerSnapshot, type GridSaveState, type UiGridControlIconKey, type UiGridIconDefinition, type UiGridIconOverrides, type UiGridRustWebModule, UiGridStandaloneElement, VanillaGridController, type VanillaUiGridElement, createVanillaGridController, defineStandaloneUiGridElement, defineStandaloneUiGridElement as defineUiGridElement, mountVanillaUiGrid, registerVanillaUiGridRustModule };

package/dist/index.d.ts

@@ -0,0 +1,206 @@
+import { GridOptions, GridLabels, GridColumnDef, PipelineResult, SortState, PinnedColumnState, GridCellPosition, UiGridApi, DisplayItem, SortDirection, PinDirection, GridRow, GridRecord, GroupItem, BuildGridPipelineContext } from '@ornery/ui-grid-core';
+export { GridOptions, UiGridApi } from '@ornery/ui-grid-core';
+
+interface GridSaveState {
+    sortState: SortState;
+    activeFilters: Record<string, string>;
+    groupByColumns: string[];
+    pinnedColumns: PinnedColumnState;
+    columnOrder: string[];
+    currentPage: number;
+    pageSize: number;
+}
+interface GridControllerSnapshot {
+    options: GridOptions;
+    labels: GridLabels;
+    rowSize: number;
+    visibleColumns: GridColumnDef[];
+    gridTemplateColumns: string;
+    pipeline: PipelineResult;
+    activeFilters: Record<string, string>;
+    sortState: SortState;
+    groupByColumns: string[];
+    pinnedColumns: PinnedColumnState;
+    currentPage: number;
+    totalPages: number;
+    firstRowIndex: number;
+    lastRowIndex: number;
+    pageSize: number;
+    editingCell: GridCellPosition | null;
+    editingValue: string;
+}
+type GridControllerSubscriber = (snapshot: GridControllerSnapshot) => void;
+declare class VanillaGridController {
+    private options;
+    private activeFilters;
+    private sortState;
+    private groupByColumns;
+    private collapsedGroups;
+    private hiddenRowReasons;
+    private expandedRows;
+    private expandedTreeRows;
+    private pinnedColumns;
+    private columnOrder;
+    private currentPage;
+    private pageSize;
+    private editingCell;
+    private editingValue;
+    private pipeline;
+    private labels;
+    private visibleColumns;
+    private apiRegistered;
+    private readonly subscribers;
+    readonly gridApi: UiGridApi;
+    constructor(options: GridOptions);
+    setOptions(options: GridOptions): void;
+    subscribe(subscriber: GridControllerSubscriber): () => void;
+    getSnapshot(): GridControllerSnapshot;
+    getDisplayItems(): DisplayItem[];
+    setCollapsedGroup(groupId: string, collapsed: boolean): void;
+    toggleSort(columnName: string): void;
+    sortColumn(columnName: string, direction?: SortDirection): void;
+    setFilter(columnName: string, value: string): void;
+    clearAllFilters(): void;
+    toggleGrouping(columnName: string): void;
+    clearGrouping(): void;
+    seekPage(page: number): void;
+    setPageSize(pageSize: number): void;
+    pinColumn(columnName: string, direction: PinDirection): void;
+    moveVisibleColumn(columnName: string, targetColumnName: string): void;
+    toggleRowExpansion(row: GridRow | GridRecord | string): void;
+    expandAllRows(): void;
+    collapseAllRows(): void;
+    toggleTreeRow(row: GridRow | GridRecord | string): void;
+    expandAllTreeRows(): void;
+    collapseAllTreeRows(): void;
+    setTreeRowExpanded(row: GridRow | GridRecord | string, expanded: boolean): void;
+    beginCellEdit(row: GridRow | GridRecord | string, columnName: string, triggerEvent?: Event | KeyboardEvent | null): void;
+    updateEditingValue(value: string): void;
+    commitCellEdit(): void;
+    cancelCellEdit(): void;
+    isGroupingEnabled(): boolean;
+    isSortingEnabled(): boolean;
+    isFilteringEnabled(): boolean;
+    isPaginationEnabled(): boolean;
+    shouldShowPaginationControls(): boolean;
+    isTreeEnabled(): boolean;
+    isExpandableEnabled(): boolean;
+    isColumnSortable(column: GridColumnDef): boolean;
+    isColumnFilterable(column: GridColumnDef): boolean;
+    isColumnGrouped(column: GridColumnDef): boolean;
+    sortButtonLabel(column: GridColumnDef): string;
+    groupingButtonLabel(column: GridColumnDef): string;
+    filterPlaceholder(column: GridColumnDef): string;
+    getSortDirection(column: GridColumnDef): SortDirection;
+    isPinningEnabled(): boolean;
+    isColumnPinnable(column: GridColumnDef): boolean;
+    isPinned(column: GridColumnDef): boolean;
+    isPinnedLeftLast(column: GridColumnDef): boolean;
+    isPinnedRightFirst(column: GridColumnDef): boolean;
+    groupDisclosureLabel(group: GroupItem): string;
+    pinnedOffset(column: GridColumnDef): {
+        side: 'left' | 'right';
+        offset: string;
+    } | null;
+    displayValue(row: GridRow, column: GridColumnDef): unknown;
+    headerLabel(column: GridColumnDef): string;
+    cellIndent(row: GridRow, column: GridColumnDef): string;
+    showTreeToggle(row: GridRow, column: GridColumnDef): boolean;
+    showExpandToggle(_row: GridRow, column: GridColumnDef): boolean;
+    isTreeRowExpanded(row: GridRow): boolean;
+    treeToggleLabel(row: GridRow): string;
+    expandToggleLabel(row: GridRow): string;
+    editorInputType(column: GridColumnDef): string;
+    isEditingCell(rowId: string, columnName: string): boolean;
+    getState(): GridSaveState;
+    setState(state: Partial<GridSaveState>): void;
+    private refresh;
+    private emit;
+    private findRowById;
+    private buildRowsFromData;
+    private findColumnByName;
+    private resolveRowId;
+    private getRowSize;
+    private getTotalPages;
+    private getEffectivePageSize;
+    private getCurrentPage;
+    private getFirstRowIndex;
+    private getLastRowIndex;
+    private setRowInvisible;
+    private clearRowInvisible;
+    private benchmark;
+}
+declare function createVanillaGridController(options: GridOptions): VanillaGridController;
+
+type VanillaUiGridElement = HTMLElement & {
+    options: GridOptions;
+    getState(): GridSaveState | null;
+    setState(state: Partial<GridSaveState>): void;
+};
+type UiGridControlIconKey = 'sortNone' | 'sortAsc' | 'sortDesc' | 'group' | 'groupExpanded' | 'groupCollapsed' | 'treeExpanded' | 'treeCollapsed' | 'expandExpanded' | 'expandCollapsed' | 'pin' | 'pinLeft' | 'pinRight' | 'paginationPrev' | 'paginationNext';
+interface UiGridIconDefinition {
+    viewBox?: string;
+    path: string;
+}
+type UiGridIconOverrides = Partial<Record<UiGridControlIconKey, UiGridIconDefinition>>;
+declare class UiGridStandaloneElement extends HTMLElement {
+    private controller;
+    private snapshot;
+    private unsubscribe;
+    private activeOptions;
+    private iconOverrides;
+    private templateObserver;
+    private openPinMenuColumn;
+    private focusedCell;
+    private draggedColumnName;
+    private dropTargetColumnName;
+    private scrollPosition;
+    private scrollFrame;
+    private suppressScrollEvent;
+    private lastVirtualStartIndex;
+    private measuredHeaderStickyHeight;
+    private measuredFilterStickyHeight;
+    private stickyHeightRelayoutQueued;
+    private benchmarkAverage;
+    get options(): GridOptions;
+    set options(value: GridOptions);
+    get controlIcons(): UiGridIconOverrides;
+    set controlIcons(value: UiGridIconOverrides);
+    getState(): GridSaveState | null;
+    setState(state: Partial<GridSaveState>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private ensureShadowRoot;
+    private ensureController;
+    private observeTemplateSlots;
+    private buildEffectiveOptions;
+    private bindEvents;
+    private render;
+    private renderHeaderCell;
+    private renderFilterCell;
+    private renderDisplayItem;
+    private renderBodyCell;
+    private renderPagination;
+    private renderSlotRegistry;
+    private renderCellTemplate;
+    private renderExpandableTemplate;
+    private getTemplateMarkup;
+    private interpolateTemplate;
+    private resolveTemplateValue;
+    private rowIndexFor;
+    private cellSlotName;
+    private downloadCsv;
+    private renderControlIcon;
+    private renderIconWithClass;
+}
+declare function defineStandaloneUiGridElement(tagName?: string): Promise<void>;
+
+interface UiGridRustWebModule {
+    default(input?: unknown): Promise<unknown>;
+    build_pipeline_js(context: BuildGridPipelineContext): PipelineResult;
+}
+
+declare function registerVanillaUiGridRustModule(module: UiGridRustWebModule, input?: unknown): Promise<void>;
+declare function mountVanillaUiGrid(target: Element, options: GridOptions, rustModule?: UiGridRustWebModule, tagName?: string): Promise<VanillaUiGridElement>;
+
+export { type GridControllerSnapshot, type GridSaveState, type UiGridControlIconKey, type UiGridIconDefinition, type UiGridIconOverrides, type UiGridRustWebModule, UiGridStandaloneElement, VanillaGridController, type VanillaUiGridElement, createVanillaGridController, defineStandaloneUiGridElement, defineStandaloneUiGridElement as defineUiGridElement, mountVanillaUiGrid, registerVanillaUiGridRustModule };