@dashforge/tw 0.6.0-beta → 0.8.0-beta

package/src/components/Tabs/tabs.variants.ts

@@ -19,21 +19,32 @@ export const tabsVariants = tv({
   variants: {
     variant: {
       underline: {
-        list: 'border-b border-neutral-200 dark:border-neutral-800',
+        // Neutral palette auto-inverts via CSS-var swap.
+        list: 'border-b border-neutral-200',
         trigger: [
-          'px-3 py-2 border-b-2 border-transparent text-neutral-600 dark:text-neutral-400',
-          'hover:text-neutral-900 dark:hover:text-neutral-50',
+          'px-3 py-2 border-b-2 border-transparent text-neutral-600',
+          'hover:text-neutral-900',
+          // Primary palette does NOT auto-invert — `dark:` shift is
+          // an intentional tone refinement (kept).
           'data-[state=active]:border-primary-500 data-[state=active]:text-primary-700',
           'dark:data-[state=active]:text-primary-400',
         ],
       },
       pill: {
-        list: 'rounded-lg bg-neutral-100 dark:bg-neutral-800 p-1',
+        // Pill list bg uses the elevation tier — auto-inverts.
+        list: 'rounded-lg bg-neutral-100 p-1',
         trigger: [
-          'px-3 py-1.5 rounded-md text-neutral-600 dark:text-neutral-400',
-          'hover:text-neutral-900 dark:hover:text-neutral-50',
-          'data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-900',
-          'data-[state=active]:text-neutral-900 dark:data-[state=active]:text-neutral-50',
+          'px-3 py-1.5 rounded-md text-neutral-600',
+          'hover:text-neutral-900',
+          // Active pill is one tier above the list bg
+          // (`bg-neutral-100`-inverted = #171717 in dark).
+          // `bg-white` is hardcoded so a `dark:` is required —
+          // target `dark:bg-neutral-200` (= #262626 in dark) sits
+          // ONE TIER above the list bg, preserving the elevation
+          // semantic from light mode (where `bg-white` sits above
+          // `bg-neutral-100` = #f5f5f5).
+          'data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-200',
+          'data-[state=active]:text-neutral-900',
           'data-[state=active]:shadow-sm',
         ],
       },

package/src/components/Tooltip/tooltip.variants.ts

@@ -4,14 +4,24 @@ export const tooltipVariants = tv({
   slots: {
     content: [
       'z-50 max-w-xs rounded-md px-3 py-1.5 text-xs font-medium',
+      // Auto-invert via the dashforgePreset() CSS-var swap:
+      //  - Light mode: `bg-neutral-900` = #171717 (dark surface) +
+      //    `text-neutral-50` = #fafafa (light text) — DARK tooltip
+      //    on the light page (high contrast).
+      //  - Dark mode: `bg-neutral-900` flips to #f5f5f5 (light) +
+      //    `text-neutral-50` flips to #0a0a0a (dark text) — LIGHT
+      //    tooltip on the dark page (high contrast against page).
+      // Adding `dark:bg-neutral-50 dark:text-neutral-900` (the old
+      // pattern) would force the dark-mode tooltip back to a dark
+      // surface — invisible against the dark page.
       'bg-neutral-900 text-neutral-50',
-      'dark:bg-neutral-50 dark:text-neutral-900',
       'shadow-md',
       'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
       'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
       'motion-reduce:transition-none motion-reduce:duration-0',
     ],
-    arrow: 'fill-neutral-900 dark:fill-neutral-50',
+    // Arrow tracks the content bg — auto-inverts the same way.
+    arrow: 'fill-neutral-900',
   },
 });
 

package/src/components/Typography/Typography.test.tsx

@@ -219,8 +219,10 @@ describe('<Typography>', () => {
       const { container } = render(<Typography color={color}>x</Typography>);
       const cls = container.firstElementChild?.className ?? '';
       if (color === 'muted') {
+        // Sprint 4.3 identity sweep: neutral palette auto-inverts via
+        // CSS-var swap — no `dark:` variant needed.
         expect(cls).toContain('text-neutral-600');
-        expect(cls).toContain('dark:text-neutral-400');
+        expect(cls).not.toContain('dark:text-neutral-');
       } else {
         expect(cls).toContain(`text-${color}-700`);
         expect(cls).toContain(`dark:text-${color}-400`);

package/src/components/Typography/typography.variants.ts

@@ -62,8 +62,12 @@ export const typographyVariants = tv({
       warning:   'text-warning-700 dark:text-warning-400',
       danger:    'text-danger-700 dark:text-danger-400',
       info:      'text-info-700 dark:text-info-400',
-      neutral:   'text-neutral-900 dark:text-neutral-100',
-      muted:     'text-neutral-600 dark:text-neutral-400',
+      // Neutral palette auto-inverts via the dashforgePreset() CSS-var
+      // swap — no `dark:` variants. `text-neutral-900` resolves to
+      // dark text in light mode and light text in dark mode; same
+      // applies to `text-neutral-600` (muted).
+      neutral:   'text-neutral-900',
+      muted:     'text-neutral-600',
     },
 
     /*

package/src/components/{Table/_internal → _shared/data}/useColumnAutoDetect.test.ts

@@ -7,7 +7,7 @@ import {
   resolveMonospace,
   resolveTabularNums,
 } from './useColumnAutoDetect.js';
-import type { TableColumn } from '../table.types.js';
+import type { TableColumn } from '../../Table/table.types.js';
 
 interface Row {
   name: string;

package/src/components/{Table/_internal → _shared/data}/useColumnAutoDetect.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { getNestedValue } from './getNestedValue.js';
-import type { TableColumn, TableColumnInferredType } from '../table.types.js';
+import type { TableColumn, TableColumnInferredType } from '../../Table/table.types.js';
 
 /**
  * Auto-detects the primitive type of each column by scanning the

package/src/components/_shared/data/useTableFilter.test.ts

@@ -0,0 +1,166 @@
+// @vitest-environment node
+import { describe, it, expect } from 'vitest';
+import { passesFilter, toNumber, toDateMs } from './useTableFilter.js';
+
+describe('useTableFilter — toNumber', () => {
+  it('returns null for null and undefined', () => {
+    expect(toNumber(null)).toBeNull();
+    expect(toNumber(undefined)).toBeNull();
+  });
+
+  it('returns the value for finite numbers', () => {
+    expect(toNumber(42)).toBe(42);
+    expect(toNumber(0)).toBe(0);
+    expect(toNumber(-3.14)).toBe(-3.14);
+  });
+
+  it('returns null for non-finite numbers', () => {
+    expect(toNumber(Number.NaN)).toBeNull();
+    expect(toNumber(Number.POSITIVE_INFINITY)).toBeNull();
+  });
+
+  it('coerces numeric strings', () => {
+    expect(toNumber('42')).toBe(42);
+    expect(toNumber('0.5')).toBe(0.5);
+  });
+
+  it('returns null for non-numeric strings', () => {
+    expect(toNumber('abc')).toBeNull();
+  });
+
+  // JS quirk: Number('') === 0 (finite). Empty-string is treated as 0
+  // by toNumber. Callers that need open-range semantics (e.g. the
+  // NumberRangeFilter UI) explicitly null-out empty inputs before
+  // passing them through.
+  it('returns 0 for empty string (JS Number("") === 0)', () => {
+    expect(toNumber('')).toBe(0);
+  });
+
+  it('coerces bigint to number', () => {
+    expect(toNumber(10n)).toBe(10);
+  });
+
+  it('returns null for objects/arrays/booleans', () => {
+    expect(toNumber({})).toBeNull();
+    expect(toNumber([])).toBeNull();
+    expect(toNumber(true)).toBeNull();
+  });
+});
+
+describe('useTableFilter — toDateMs', () => {
+  it('returns null for null and undefined', () => {
+    expect(toDateMs(null)).toBeNull();
+    expect(toDateMs(undefined)).toBeNull();
+  });
+
+  it('returns epoch ms for Date instances', () => {
+    const d = new Date('2026-05-19T00:00:00Z');
+    expect(toDateMs(d)).toBe(d.getTime());
+  });
+
+  it('parses ISO strings', () => {
+    const ms = toDateMs('2026-05-19');
+    expect(ms).not.toBeNull();
+    expect(new Date(ms!).toISOString()).toContain('2026-05-19');
+  });
+
+  it('returns null for invalid date strings', () => {
+    expect(toDateMs('not-a-date')).toBeNull();
+  });
+});
+
+describe('useTableFilter — passesFilter (contains)', () => {
+  it('returns true for empty needle (no-op filter)', () => {
+    expect(passesFilter('Hello', 'contains', '')).toBe(true);
+    expect(passesFilter('Hello', 'contains', '   ')).toBe(true);
+  });
+
+  it('matches substring case-insensitively', () => {
+    expect(passesFilter('Hello World', 'contains', 'hello')).toBe(true);
+    expect(passesFilter('Hello World', 'contains', 'WORLD')).toBe(true);
+    expect(passesFilter('Hello World', 'contains', 'xyz')).toBe(false);
+  });
+
+  it('stringifies non-string row values for searching', () => {
+    expect(passesFilter(42, 'contains', '42')).toBe(true);
+    expect(passesFilter(true, 'contains', 'true')).toBe(true);
+  });
+});
+
+describe('useTableFilter — passesFilter (equals)', () => {
+  it('returns true when filter value is null (no-op)', () => {
+    expect(passesFilter('anything', 'equals', null)).toBe(true);
+  });
+
+  it('does strict equality for booleans', () => {
+    expect(passesFilter(true, 'equals', true)).toBe(true);
+    expect(passesFilter(false, 'equals', false)).toBe(true);
+    expect(passesFilter(true, 'equals', false)).toBe(false);
+  });
+
+  it('does strict equality for primitives', () => {
+    expect(passesFilter('a', 'equals', 'a')).toBe(true);
+    expect(passesFilter('a', 'equals', 'b')).toBe(false);
+    expect(passesFilter(1, 'equals', 1)).toBe(true);
+  });
+});
+
+describe('useTableFilter — passesFilter (between, number range)', () => {
+  it('returns true when range is fully open', () => {
+    expect(passesFilter(42, 'between', [null, null])).toBe(true);
+  });
+
+  it('respects min bound', () => {
+    expect(passesFilter(5, 'between', [10, null])).toBe(false);
+    expect(passesFilter(10, 'between', [10, null])).toBe(true);
+    expect(passesFilter(15, 'between', [10, null])).toBe(true);
+  });
+
+  it('respects max bound', () => {
+    expect(passesFilter(5, 'between', [null, 10])).toBe(true);
+    expect(passesFilter(10, 'between', [null, 10])).toBe(true);
+    expect(passesFilter(15, 'between', [null, 10])).toBe(false);
+  });
+
+  it('respects both bounds inclusively', () => {
+    expect(passesFilter(7, 'between', [5, 10])).toBe(true);
+    expect(passesFilter(5, 'between', [5, 10])).toBe(true);
+    expect(passesFilter(10, 'between', [5, 10])).toBe(true);
+    expect(passesFilter(4, 'between', [5, 10])).toBe(false);
+    expect(passesFilter(11, 'between', [5, 10])).toBe(false);
+  });
+
+  it('coerces string row values to number', () => {
+    expect(passesFilter('7', 'between', [5, 10])).toBe(true);
+  });
+
+  it('returns true for malformed filter value (defensive)', () => {
+    expect(passesFilter(42, 'between', 'not a tuple')).toBe(true);
+    expect(passesFilter(42, 'between', [1])).toBe(true);
+  });
+});
+
+describe('useTableFilter — passesFilter (between, date range)', () => {
+  it('respects ISO date range bounds', () => {
+    const row = '2026-05-19';
+    expect(passesFilter(row, 'between', ['2026-01-01', '2026-12-31'])).toBe(true);
+    expect(passesFilter(row, 'between', ['2026-06-01', '2026-12-31'])).toBe(false);
+    expect(passesFilter(row, 'between', ['2026-01-01', '2026-05-01'])).toBe(false);
+  });
+
+  it('accepts Date instances as row values', () => {
+    const row = new Date('2026-05-19T00:00:00Z');
+    expect(passesFilter(row, 'between', ['2026-01-01', '2026-12-31'])).toBe(true);
+  });
+
+  it('treats null bounds as open ended', () => {
+    expect(passesFilter('2026-05-19', 'between', [null, '2026-12-31'])).toBe(true);
+    expect(passesFilter('2026-05-19', 'between', ['2026-01-01', null])).toBe(true);
+  });
+});
+
+describe('useTableFilter — passesFilter (unknown operator)', () => {
+  it('returns true for unrecognized operator (defensive no-op)', () => {
+    expect(passesFilter('anything', 'unknownOp', 'anything')).toBe(true);
+  });
+});

package/src/components/_shared/data/useTableFilter.ts

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import { getNestedValue } from './getNestedValue.js';
+import { stringifyForSearch } from './useTableSearch.js';
+import type { TableFilterModel } from '../../Table/table.types.js';
+
+/**
+ * Coerce a value to a number for range comparison. Returns
+ * `null` if not coercible.
+ */
+function toNumber(value: unknown): number | null {
+  if (value == null) return null;
+  if (typeof value === 'number') return Number.isFinite(value) ? value : null;
+  if (typeof value === 'bigint') return Number(value);
+  if (typeof value === 'string') {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : null;
+  }
+  return null;
+}
+
+/**
+ * Coerce a value to a Date's epoch ms for date-range comparison.
+ * Accepts `Date` instances + ISO 8601 strings. Returns `null` if
+ * not coercible.
+ */
+function toDateMs(value: unknown): number | null {
+  if (value == null) return null;
+  if (value instanceof Date) return value.getTime();
+  if (typeof value === 'string') {
+    const d = new Date(value);
+    const t = d.getTime();
+    return Number.isNaN(t) ? null : t;
+  }
+  return null;
+}
+
+/**
+ * Test one row × one filter. Returns `true` if the row passes the
+ * filter. The operator decides the predicate:
+ *
+ *  - `contains` → substring match on stringified value (text filter)
+ *  - `equals` → strict equality (boolean filter mostly)
+ *  - `between` → `value: [min, max]` tuple. Each end can be `null`
+ *    for an open range. Used by number range + date range filters.
+ *
+ * Empty filter is a no-op (passes every row).
+ */
+function passesFilter(rowValue: unknown, op: string, filterValue: unknown): boolean {
+  switch (op) {
+    case 'contains': {
+      const needle =
+        typeof filterValue === 'string' ? filterValue.trim().toLowerCase() : '';
+      if (!needle) return true;
+      return stringifyForSearch(rowValue).toLowerCase().includes(needle);
+    }
+    case 'equals': {
+      if (filterValue == null) return true;
+      return rowValue === filterValue;
+    }
+    case 'between': {
+      if (!Array.isArray(filterValue) || filterValue.length !== 2) return true;
+      const [min, max] = filterValue as [unknown, unknown];
+      if (min == null && max == null) return true;
+
+      // Try number range first.
+      const rowNum = toNumber(rowValue);
+      const minNum = min == null ? null : toNumber(min);
+      const maxNum = max == null ? null : toNumber(max);
+      if (rowNum != null && (minNum != null || maxNum != null)) {
+        if (minNum != null && rowNum < minNum) return false;
+        if (maxNum != null && rowNum > maxNum) return false;
+        return true;
+      }
+
+      // Fall through to date range.
+      const rowMs = toDateMs(rowValue);
+      const minMs = min == null ? null : toDateMs(min);
+      const maxMs = max == null ? null : toDateMs(max);
+      if (rowMs != null && (minMs != null || maxMs != null)) {
+        if (minMs != null && rowMs < minMs) return false;
+        if (maxMs != null && rowMs > maxMs) return false;
+        return true;
+      }
+
+      // If neither coercion worked, let the row pass (defensive).
+      return true;
+    }
+    default:
+      return true;
+  }
+}
+
+/**
+ * Filters `rows` by the per-column filter model. AND semantics
+ * across columns — a row must pass EVERY active filter.
+ *
+ * Each filter item specifies an `op` (`'contains'` / `'equals'` /
+ * `'between'`) and a `value` whose shape matches the operator
+ * (string for contains; primitive for equals; `[min, max]` tuple
+ * for between).
+ */
+export function useTableFilter<T extends object>(
+  rows: T[],
+  filterModel: TableFilterModel,
+): T[] {
+  return useMemo(() => {
+    if (!filterModel || filterModel.length === 0) return rows;
+    return rows.filter((row) =>
+      filterModel.every((filter) => {
+        const value = getNestedValue(row, filter.field);
+        return passesFilter(value, filter.op, filter.value);
+      }),
+    );
+  }, [rows, filterModel]);
+}
+
+// Exposed for testing.
+export { passesFilter, toNumber, toDateMs };

package/src/components/{Table/_internal → _shared/data}/useTableSearch.test.ts

@@ -2,7 +2,7 @@
 import { describe, it, expect } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useTableSearch, stringifyForSearch } from './useTableSearch.js';
-import type { TableColumn } from '../table.types.js';
+import type { TableColumn } from '../../Table/table.types.js';
 
 interface User {
   name: string;

package/src/components/{Table/_internal → _shared/data}/useTableSearch.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { getNestedValue } from './getNestedValue.js';
-import type { TableColumn } from '../table.types.js';
+import type { TableColumn } from '../../Table/table.types.js';
 
 /**
  * Stringify any value into a search-comparable form. Handles all

package/src/components/{Table/_internal → _shared/data}/useTableSelection.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import type { TableRowSelectionMode } from '../table.types.js';
+import type { TableRowSelectionMode } from '../../Table/table.types.js';
 
 export interface UseTableSelectionResult {
   selectedRowIds: string[];

package/src/components/{Table/_internal → _shared/data}/useTableSort.test.ts

@@ -2,7 +2,7 @@
 import { describe, it, expect } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useTableSort, cycleSortFor } from './useTableSort.js';
-import type { TableColumn, TableSortModel } from '../table.types.js';
+import type { TableColumn, TableSortModel } from '../../Table/table.types.js';
 
 interface Row {
   id: string;

package/src/components/{Table/_internal → _shared/data}/useTableSort.ts

@@ -4,7 +4,7 @@ import type {
   TableColumn,
   TableSortModel,
   TableSortDirection,
-} from '../table.types.js';
+} from '../../Table/table.types.js';
 
 /**
  * Default comparator. Handles the common primitive types in a

package/src/components/_shared/data/useVirtualizer.test.ts

@@ -0,0 +1,158 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { computeWindow } from './useVirtualizer.js';
+
+describe('computeWindow', () => {
+  it('returns empty window when totalCount is 0', () => {
+    const w = computeWindow({
+      totalCount: 0,
+      rowHeight: 48,
+      viewportHeight: 600,
+      scrollTop: 0,
+    });
+    expect(w.endIndex).toBeLessThan(w.startIndex);
+    expect(w.paddingTop).toBe(0);
+    expect(w.paddingBottom).toBe(0);
+  });
+
+  it('returns first window when scrollTop=0 (with overscan)', () => {
+    const w = computeWindow({
+      totalCount: 1000,
+      rowHeight: 48,
+      viewportHeight: 600,
+      scrollTop: 0,
+      overscan: 5,
+    });
+    // viewport fits 600 / 48 = 12.5 → 13 rows + 5 overscan top + 5 overscan bottom
+    expect(w.startIndex).toBe(0);
+    // 13 visible + 5 overscan_bottom = end at 17 ish
+    expect(w.endIndex).toBeGreaterThanOrEqual(12);
+    expect(w.paddingTop).toBe(0);
+    expect(w.paddingBottom).toBeGreaterThan(0);
+  });
+
+  it('scrolls forward — start index advances with scrollTop', () => {
+    const w = computeWindow({
+      totalCount: 1000,
+      rowHeight: 48,
+      viewportHeight: 600,
+      scrollTop: 480, // 10 rows down
+      overscan: 0,
+    });
+    expect(w.startIndex).toBe(10);
+    expect(w.paddingTop).toBe(480);
+  });
+
+  it('overscan extends start index upward', () => {
+    const w = computeWindow({
+      totalCount: 1000,
+      rowHeight: 48,
+      viewportHeight: 600,
+      scrollTop: 480,
+      overscan: 5,
+    });
+    expect(w.startIndex).toBe(5);
+    expect(w.paddingTop).toBe(5 * 48);
+  });
+
+  it('overscan extends end index downward', () => {
+    const w = computeWindow({
+      totalCount: 1000,
+      rowHeight: 48,
+      viewportHeight: 600,
+      scrollTop: 0,
+      overscan: 5,
+    });
+    // raw end was ceil(600/48) = 13. with overscan: 13 + 5 = 18.
+    expect(w.endIndex).toBe(18);
+  });
+
+  it('clamps start at 0 when overscan would go negative', () => {
+    const w = computeWindow({
+      totalCount: 1000,
+      rowHeight: 48,
+      viewportHeight: 600,
+      scrollTop: 0,
+      overscan: 10,
+    });
+    expect(w.startIndex).toBe(0);
+    expect(w.paddingTop).toBe(0);
+  });
+
+  it('clamps end at totalCount-1 when overscan would exceed', () => {
+    // scroll near the end
+    const w = computeWindow({
+      totalCount: 20,
+      rowHeight: 48,
+      viewportHeight: 600,
+      scrollTop: 480, // would try to show rows 10-22
+      overscan: 5,
+    });
+    expect(w.endIndex).toBe(19); // clamped
+    expect(w.paddingBottom).toBe(0);
+  });
+
+  it('paddingTop + visible rows + paddingBottom = total scrollable height', () => {
+    const totalCount = 1000;
+    const rowHeight = 48;
+    const w = computeWindow({
+      totalCount,
+      rowHeight,
+      viewportHeight: 600,
+      scrollTop: 5000,
+      overscan: 3,
+    });
+    const visibleRowCount = w.endIndex - w.startIndex + 1;
+    const totalRendered = w.paddingTop + visibleRowCount * rowHeight + w.paddingBottom;
+    const totalExpected = totalCount * rowHeight;
+    expect(totalRendered).toBe(totalExpected);
+  });
+
+  it('handles small dataset (everything fits in viewport)', () => {
+    const w = computeWindow({
+      totalCount: 5,
+      rowHeight: 48,
+      viewportHeight: 600,
+      scrollTop: 0,
+      overscan: 5,
+    });
+    expect(w.startIndex).toBe(0);
+    expect(w.endIndex).toBe(4); // clamped to totalCount - 1
+    expect(w.paddingTop).toBe(0);
+    expect(w.paddingBottom).toBe(0);
+  });
+
+  it('returns empty window when rowHeight = 0 (defensive)', () => {
+    const w = computeWindow({
+      totalCount: 1000,
+      rowHeight: 0,
+      viewportHeight: 600,
+      scrollTop: 100,
+    });
+    expect(w.endIndex).toBeLessThan(w.startIndex);
+  });
+
+  it('returns empty window when viewportHeight = 0', () => {
+    const w = computeWindow({
+      totalCount: 1000,
+      rowHeight: 48,
+      viewportHeight: 0,
+      scrollTop: 100,
+    });
+    expect(w.endIndex).toBeLessThan(w.startIndex);
+  });
+
+  it('supports very large dataset (1 million rows)', () => {
+    const w = computeWindow({
+      totalCount: 1_000_000,
+      rowHeight: 48,
+      viewportHeight: 600,
+      scrollTop: 24_000_000, // ~middle
+      overscan: 5,
+    });
+    expect(w.startIndex).toBe(499_995);
+    expect(w.endIndex).toBeGreaterThan(w.startIndex);
+    expect(w.paddingTop).toBe(499_995 * 48);
+    expect(w.paddingBottom).toBeGreaterThan(0);
+  });
+});