@happyvertical/smrt-ui 0.42.3 → 0.42.5

package/dist/svelte/playground/DataTablePreview.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
+import { onMount } from 'svelte';
+import {
+  createDataTableConformanceRows,
+  dataTableConformanceColumns,
+  dataTableConformanceRows,
+  dataTableConformanceScenarios,
+} from '../../components/data/__fixtures__/DataTableConformanceFixture.js';
 import DataTable from '../../components/data/DataTable.svelte';
+import { createDataTableController } from '../../components/data/DataTableController.js';
 import type {
   DataTableColumn,
-  SortState,
+  DataTableStructuralRow,
 } from '../../components/data/types.js';
 import Toggle from '../../components/forms/Toggle.svelte';
 import Badge from '../../components/ui/Badge.svelte';
@@ -17,6 +25,16 @@ interface WorkspaceUser {
   lastSeen: string;
 }
 
+interface ReportLine {
+  id: string;
+  account: string;
+  actual: number;
+  forecast: number;
+  variance: number;
+  status: string;
+  action: string;
+}
+
 const users: WorkspaceUser[] = [
   {
     id: 'user-ada',
@@ -68,13 +86,224 @@ const columns: DataTableColumn<WorkspaceUser>[] = [
   { id: 'lastSeen', label: 'Last seen', sortable: true, align: 'right' },
 ];
 
-let selected = $state<Set<string | number>>(new Set());
-let sort = $state<SortState>({ columnId: null, direction: null });
+const reportRows: ReportLine[] = [
+  {
+    id: 'revenue',
+    account: 'Subscription revenue',
+    actual: 182400,
+    forecast: 176000,
+    variance: 6400,
+    status: 'On track',
+    action: 'Review',
+  },
+  {
+    id: 'services',
+    account: 'Professional services',
+    actual: 48300,
+    forecast: 52000,
+    variance: -3700,
+    status: 'Watch',
+    action: 'Review',
+  },
+];
+
+const reportColumns: DataTableColumn<ReportLine>[] = [
+  {
+    id: 'account',
+    label: 'Account',
+    headerPath: [{ id: 'dimension', label: 'Dimensions' }],
+    minWidth: '13rem',
+    resizable: true,
+  },
+  {
+    id: 'actual',
+    label: 'Actual',
+    headerPath: [{ id: 'performance', label: 'Performance' }],
+    align: 'right',
+    resizable: true,
+  },
+  {
+    id: 'forecast',
+    label: 'Forecast',
+    headerPath: [{ id: 'performance', label: 'Performance' }],
+    align: 'right',
+    resizable: true,
+  },
+  {
+    id: 'variance',
+    label: 'Variance',
+    headerPath: [{ id: 'performance', label: 'Performance' }],
+    align: 'right',
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    role: 'status',
+    responsive: { keepVisible: true, priority: 10 },
+  },
+  {
+    id: 'action',
+    label: 'Action',
+    role: 'action',
+    responsive: { keepVisible: true, priority: 10 },
+  },
+];
+
+const reportStructuralRows: DataTableStructuralRow<ReportLine>[] = [
+  {
+    id: 'forecast-subtotal',
+    kind: 'subtotal',
+    label: 'Current forecast',
+    values: { actual: 230700, forecast: 228000, variance: 2700 },
+  },
+  {
+    id: 'forecast-total',
+    kind: 'footer',
+    label: 'All accounts',
+    values: { actual: 230700, forecast: 228000, variance: 2700 },
+  },
+];
+
 let loading = $state(false);
 let dense = $state(false);
+const tableController = createDataTableController({
+  columnIds: columns.map((column) => column.id),
+  initialState: { pageSize: 3 },
+});
+const reportController = createDataTableController({
+  columnIds: reportColumns.map((column) => column.id),
+  initialState: {
+    columnOrder: reportColumns.map((column) => column.id),
+    columnWidths: [
+      { columnId: 'account', width: 240 },
+      { columnId: 'actual', width: 112 },
+      { columnId: 'forecast', width: 112 },
+    ],
+    columnPinning: [
+      { columnId: 'account', position: 'start' },
+      { columnId: 'action', position: 'end' },
+    ],
+  },
+});
+const manualController = createDataTableController({
+  columnIds: dataTableConformanceColumns.map((column) => column.id),
+  modes: { filtering: 'manual', sorting: 'manual', pagination: 'manual' },
+  initialState: { page: 2, pageSize: 25 },
+});
+const virtualRows = createDataTableConformanceRows(120);
+const virtualColumns = dataTableConformanceColumns.slice(0, 2);
+const virtualization = { rowHeight: 32, viewportHeight: 176, overscan: 3 };
+const manualQueryCommands = new Set([
+  'setSearch',
+  'setFilters',
+  'setSorting',
+  'toggleSorting',
+  'setPage',
+  'setPageSize',
+]);
+let tableState = $state(tableController.getState());
+let manualState = $state(manualController.getState());
+let manualLifecycle = $state<'ready' | 'refreshing' | 'stale' | 'error'>(
+  'ready',
+);
+let manualQueryRevision = $state(1);
+const manualQueryFingerprint = $derived(
+  JSON.stringify({
+    search: manualState.search,
+    filters: manualState.filters,
+    sorting: manualState.sorting,
+    page: manualState.page,
+    pageSize: manualState.pageSize,
+  }),
+);
+
+onMount(() => {
+  const unsubscribeTable = tableController.subscribe((transition) => {
+    tableState = transition.next.state;
+  });
+  const unsubscribeManual = manualController.subscribe((transition) => {
+    manualState = transition.next.state;
+    if (
+      transition.command &&
+      manualQueryCommands.has(transition.command.type)
+    ) {
+      manualQueryRevision += 1;
+      manualLifecycle = 'refreshing';
+    }
+  });
+  return () => {
+    unsubscribeTable();
+    unsubscribeManual();
+  };
+});
 
 function clearSelection() {
-  selected = new Set();
+  tableController.dispatch({ type: 'setSelectedRows', rowIds: [] });
+}
+
+function toggleActiveFilter() {
+  tableController.dispatch({
+    type: 'setFilters',
+    filters: tableState.filters.length
+      ? []
+      : [{ columnId: 'status', operator: 'equals', value: 'Active' }],
+  });
+}
+
+function restoreReportLayout() {
+  reportController.replaceState({
+    ...reportController.getState(),
+    columnOrder: reportColumns.map((column) => column.id),
+    columnVisibility: reportColumns.map((column) => ({
+      columnId: column.id,
+      visible: true,
+    })),
+    columnWidths: [
+      { columnId: 'account', width: 240 },
+      { columnId: 'actual', width: 112 },
+      { columnId: 'forecast', width: 112 },
+    ],
+    columnPinning: [
+      { columnId: 'account', position: 'start' },
+      { columnId: 'action', position: 'end' },
+    ],
+  });
+}
+
+function showStaleManualResult() {
+  manualQueryRevision += 1;
+  manualLifecycle = 'stale';
+}
+
+function resolveManualQuery() {
+  manualLifecycle = 'ready';
+}
+
+function retryManualQuery() {
+  manualLifecycle = 'refreshing';
+  manualQueryRevision += 1;
+}
+
+function showManualFailure() {
+  manualLifecycle = 'error';
+}
+
+function toggleManualFilter() {
+  manualController.dispatch({
+    type: 'setFilters',
+    filters: manualState.filters.length
+      ? []
+      : [{ columnId: 'status', operator: 'equals', value: 'On track' }],
+  });
+}
+
+function selectAllMatching() {
+  manualController.dispatch({
+    type: 'selectAllMatching',
+    queryFingerprint: manualQueryFingerprint,
+    queryRevision: `revision-${manualQueryRevision}`,
+    expectedCount: 120,
+  });
 }
 </script>
 
@@ -88,13 +317,13 @@ function clearSelection() {
       </p>
     </div>
     <div class="summary" aria-live="polite">
-      <Badge variant={selected.size > 0 ? 'primary' : 'default'}>
-        {selected.size} selected
+      <Badge variant={tableState.selectedRowIds.length > 0 ? 'primary' : 'default'}>
+        {tableState.selectedRowIds.length} selected
       </Badge>
       <Button
         variant="ghost"
         size="sm"
-        disabled={selected.size === 0}
+        disabled={tableState.selectedRowIds.length === 0}
         onclick={clearSelection}
       >
         Clear
@@ -105,8 +334,13 @@ function clearSelection() {
   <div class="table-controls" aria-label="Table display controls">
     <Toggle label="Dense rows" size="sm" bind:checked={dense} />
     <Toggle label="Loading state" size="sm" bind:checked={loading} />
+    <Button variant="ghost" size="sm" onclick={toggleActiveFilter}>
+      {tableState.filters.length ? 'Clear active filter' : 'Show active'}
+    </Button>
     <span>
-      Sort: {sort.columnId ? `${sort.columnId} ${sort.direction}` : 'none'}
+      Sort: {tableState.sorting.length
+        ? tableState.sorting.map((rule) => `${rule.columnId} ${rule.direction}`).join(', ')
+        : 'none'}
     </span>
   </div>
 
@@ -122,12 +356,126 @@ function clearSelection() {
       stickyHeader
       {loading}
       {dense}
-      bind:selected
-      bind:sort
+      controller={tableController}
       caption="Workspace users"
     />
   </div>
 
+  <section class="report-fixture" aria-labelledby="report-fixture-title">
+    <div class="report-fixture__header">
+      <div>
+        <p class="eyebrow">Report structure</p>
+        <h4 id="report-fixture-title">Forecast report</h4>
+        <p class="supporting">
+          Grouped headers, structural totals, restored widths, and pinned status/action columns.
+        </p>
+      </div>
+      <Button variant="ghost" size="sm" onclick={restoreReportLayout}>
+        Restore saved layout
+      </Button>
+    </div>
+    <div class="table-frame">
+      <DataTable
+        data={reportRows}
+        columns={reportColumns}
+        rowKey="id"
+        structuralRows={reportStructuralRows}
+        controller={reportController}
+        caption="Forecast report"
+        hoverable
+        stickyHeader
+      />
+    </div>
+  </section>
+
+  <section class="manual-fixture" aria-labelledby="manual-fixture-title">
+    <div class="report-fixture__header">
+      <div>
+        <p class="eyebrow">Manual query and async states</p>
+        <h4 id="manual-fixture-title">Server-owned results</h4>
+        <p class="supporting">
+          Supplied rows remain usable through refresh, stale, and error states. The caller owns
+          query revisions and discards late responses.
+        </p>
+      </div>
+      <Badge variant={manualLifecycle === 'error' ? 'error' : 'default'}>
+        Revision {manualQueryRevision}
+      </Badge>
+    </div>
+    <div class="table-controls" aria-label="Manual query controls">
+      <Button variant="ghost" size="sm" onclick={showStaleManualResult}>
+        Show stale result
+      </Button>
+      <Button variant="ghost" size="sm" onclick={resolveManualQuery}>
+        Accept newer result
+      </Button>
+      <Button variant="ghost" size="sm" onclick={showManualFailure}>
+        Show failure
+      </Button>
+      <Button variant="ghost" size="sm" onclick={toggleManualFilter}>
+        {manualState.filters.length ? 'Clear manual filter' : 'Request manual filter'}
+      </Button>
+      <Button variant="ghost" size="sm" onclick={selectAllMatching}>
+        Select all 120 matching
+      </Button>
+      {#if manualState.selection.scope === 'allMatching'}
+        <span>All matching selection is bound to {manualState.selection.queryRevision}.</span>
+      {/if}
+    </div>
+    <div class="table-frame">
+      <DataTable
+        data={dataTableConformanceRows}
+        columns={dataTableConformanceColumns}
+        rowKey="id"
+        selectable
+        controller={manualController}
+        sortable
+        totalRows={120}
+        refreshing={manualLifecycle === 'refreshing'}
+        stale={manualLifecycle === 'stale'}
+        partialResults={manualLifecycle === 'stale'}
+        error={manualLifecycle === 'error' ? 'The query failed. Retry to request the current revision.' : null}
+        onRetry={retryManualQuery}
+        caption="Manual workspace report"
+        stickyHeader
+      />
+    </div>
+  </section>
+
+  <section class="scale-fixture" aria-labelledby="scale-fixture-title">
+    <div>
+      <p class="eyebrow">Scale boundary</p>
+      <h4 id="scale-fixture-title">Virtualized result window</h4>
+      <p class="supporting">
+        A fixed-height, keyboard-scrollable body renders a stable row-key window while its
+        semantic header remains visible.
+      </p>
+    </div>
+    <div class="table-frame table-frame--virtual">
+      <DataTable
+        data={virtualRows}
+        columns={virtualColumns}
+        rowKey="id"
+        {virtualization}
+        caption="Virtual workspace report"
+        striped
+        stickyHeader
+      />
+    </div>
+  </section>
+
+  <section class="coverage-fixture" aria-labelledby="coverage-fixture-title">
+    <div>
+      <p class="eyebrow">Release conformance</p>
+      <h4 id="coverage-fixture-title">Every supported DataTable surface</h4>
+    </div>
+    <ul>
+      {#each dataTableConformanceScenarios as scenario}
+        <li><strong>{scenario.title}:</strong> {scenario.contracts.join(', ')}</li>
+      {/each}
+    </ul>
+  </section>
+
   <div class="empty-state">
     <div>
       <strong>Empty state</strong>
@@ -222,6 +570,47 @@ function clearSelection() {
     border-top: 1px solid var(--smrt-color-outline-variant);
   }
 
+  .report-fixture {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    padding-top: var(--smrt-spacing-4);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .manual-fixture,
+  .scale-fixture,
+  .coverage-fixture {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    padding-top: var(--smrt-spacing-4);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .table-frame--virtual {
+    max-height: 20rem;
+  }
+
+  .coverage-fixture ul {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+    padding: 0;
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+    font: var(--smrt-typography-body-small-font);
+    list-style: none;
+  }
+
+  .coverage-fixture strong {
+    color: var(--smrt-color-on-surface);
+  }
+
+  .report-fixture__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-4);
+  }
+
   .empty-state > div:first-child {
     justify-content: space-between;
     gap: var(--smrt-spacing-4);
@@ -234,6 +623,7 @@ function clearSelection() {
 
   @media (max-width: 760px) {
     .workbench__header,
+    .report-fixture__header,
     .empty-state > div:first-child {
       align-items: flex-start;
       flex-direction: column;

package/dist/svelte/playground/DataTablePreview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/DataTablePreview.svelte.ts"],"names":[],"mappings":"AAuIA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"DataTablePreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/DataTablePreview.svelte.ts"],"names":[],"mappings":"AAucA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/playground.js

@@ -51,10 +51,10 @@ export default {
         {
             id: 'data-table',
             title: 'Data Table',
-            description: 'Sortable and selectable tabular data with loading, density, and empty states.',
+            description: 'Accessible local and manual tables with query lifecycle states, grouped reports, saved layout, responsive overflow, and virtualization.',
             loadComponent: loadDataTable,
             order: 5,
-            tags: ['data', 'table', 'grid'],
+            tags: ['data', 'table', 'manual-query', 'reporting', 'accessibility'],
             modes: {
                 mock: {
                     label: 'Interactive',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.42.3",
+  "version": "0.42.5",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
   "main": "./dist/index.js",
@@ -124,7 +124,7 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2",
-    "@happyvertical/smrt-types": "0.42.3"
+    "@happyvertical/smrt-types": "0.42.5"
   },
   "peerDependencies": {
     "svelte": "^5.56.4"
@@ -152,6 +152,7 @@
     "build": "svelte-package -i src --tsconfig tsconfig.svelte.json",
     "dev": "svelte-package -i src --watch",
     "check": "pnpm exec svelte-check --tsconfig ./tsconfig.svelte.json",
+    "bench:data-table": "vitest bench src/components/data/__benchmarks__/DataTable.bench.ts",
     "generate:themes": "tsx scripts/generate-theme-styles.ts",
     "test": "vitest run",
     "typecheck": "tsc --noEmit && node ../../scripts/svelte-check-a11y.mjs --tsconfig ./tsconfig.svelte.json",