@dashforge/tw 0.6.0-beta → 0.8.0-beta

package/src/components/DataGrid/resize/useColumnResize.ts

@@ -0,0 +1,106 @@
+import { useCallback, useRef, type PointerEvent as RPointerEvent } from 'react';
+
+/**
+ * Native column-resize behavior for DataGrid (and Table later if
+ * promoted to `_shared`).
+ *
+ * The returned `startResize` is wired to a `pointerdown` handler on a
+ * thin grabber positioned at the right edge of a `<th>`. We capture
+ * the pointer on the target element so `pointermove` / `pointerup`
+ * keep flowing even if the cursor leaves the grabber.
+ *
+ * Why native pointer events vs a drag library:
+ *  - Zero new runtime deps (sprint constraint)
+ *  - Pointer events normalize mouse/touch/pen out of the box
+ *  - Pointer capture means we don't have to track the global
+ *    `mousemove` / `mouseup` — the browser routes events to our
+ *    listener until release.
+ */
+
+export interface UseColumnResizeArgs {
+  /** Current column widths (Record<field, px>). */
+  widths: Record<string, number>;
+  /** Commit a new width map. */
+  onChange: (next: Record<string, number>) => void;
+  /** Hard floor for any column (px). @default 40 */
+  minWidth?: number;
+  /** Hard ceiling for any column (px). @default 1200 */
+  maxWidth?: number;
+}
+
+export interface ColumnResizeHandlers {
+  startResize: (
+    field: string,
+    startWidth: number,
+    clampMin: number,
+    clampMax: number,
+  ) => (e: RPointerEvent<HTMLElement>) => void;
+}
+
+export function useColumnResize(args: UseColumnResizeArgs): ColumnResizeHandlers {
+  const { widths, onChange, minWidth = 40, maxWidth = 1200 } = args;
+
+  // We need the LATEST widths inside the pointermove closure. Stick
+  // them in a ref so the closure captured at pointerdown stays valid
+  // for the duration of the drag.
+  const widthsRef = useRef(widths);
+  widthsRef.current = widths;
+
+  const startResize = useCallback(
+    (
+      field: string,
+      startWidth: number,
+      clampMin: number,
+      clampMax: number,
+    ) => {
+      return (e: RPointerEvent<HTMLElement>) => {
+        // Only respond to the primary mouse button (or touch / pen).
+        if (e.pointerType === 'mouse' && e.button !== 0) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        const startX = e.clientX;
+        const target = e.currentTarget;
+        try {
+          target.setPointerCapture(e.pointerId);
+        } catch {
+          // jsdom or older browsers — fine to fall back to global listeners.
+        }
+
+        const effectiveMin = Math.max(minWidth, clampMin);
+        const effectiveMax = Math.min(maxWidth, clampMax);
+
+        const handleMove = (ev: PointerEvent) => {
+          const delta = ev.clientX - startX;
+          const next = clamp(startWidth + delta, effectiveMin, effectiveMax);
+          onChange({ ...widthsRef.current, [field]: next });
+        };
+
+        const handleEnd = (ev: PointerEvent) => {
+          try {
+            target.releasePointerCapture(ev.pointerId);
+          } catch {
+            /* noop */
+          }
+          target.removeEventListener('pointermove', handleMove);
+          target.removeEventListener('pointerup', handleEnd);
+          target.removeEventListener('pointercancel', handleEnd);
+        };
+
+        target.addEventListener('pointermove', handleMove);
+        target.addEventListener('pointerup', handleEnd);
+        target.addEventListener('pointercancel', handleEnd);
+      };
+    },
+    [onChange, minWidth, maxWidth],
+  );
+
+  return { startResize };
+}
+
+function clamp(n: number, min: number, max: number): number {
+  if (n < min) return min;
+  if (n > max) return max;
+  return n;
+}

package/src/components/DataGrid/visibility/ColumnVisibilityDialog.tsx

@@ -0,0 +1,200 @@
+import { useState, useEffect, type ReactNode } from 'react';
+import { Dialog } from '../../Dialog/Dialog.js';
+import { cn } from '../../../utils/cn.js';
+import type { TableColumn } from '../../Table/table.types.js';
+
+/**
+ * Column visibility dialog for DataGrid.
+ *
+ * Renders a toolbar button (the trigger) that opens a `<Dialog>` with
+ * one checkbox per `hideable` column. The consumer can:
+ *  - Show/hide individual columns
+ *  - "Show all" / "Hide all" shortcuts
+ *  - Persist visibility via the controllable `hiddenColumns` model
+ *
+ * Columns with `hideable: false` are NEVER shown in the dialog —
+ * those are considered structurally required (e.g. an ID column).
+ *
+ * RBAC-hidden columns (`access.onUnauthorized === 'hide'`) are also
+ * excluded — they're already removed from `visibleCols` upstream.
+ */
+
+export interface ColumnVisibilityLabels {
+  columnsButton?: string;
+  columnsTitle?: string;
+  columnsDescription?: string;
+  columnsShowAll?: string;
+  columnsHideAll?: string;
+  columnsDone?: string;
+}
+
+const DEFAULT_VISIBILITY_LABELS: Required<ColumnVisibilityLabels> = {
+  columnsButton: 'Columns',
+  columnsTitle: 'Manage columns',
+  columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
+  columnsShowAll: 'Show all',
+  columnsHideAll: 'Hide all',
+  columnsDone: 'Done',
+};
+
+export interface ColumnVisibilityTriggerProps<T extends object> {
+  cols: TableColumn<T>[];
+  hiddenColumns: string[];
+  onChange: (next: string[]) => void;
+  disabled?: boolean;
+  labels?: ColumnVisibilityLabels;
+}
+
+export function ColumnVisibilityTrigger<T extends object>(
+  props: ColumnVisibilityTriggerProps<T>,
+) {
+  const { cols, hiddenColumns, onChange, disabled, labels: labelsProp } = props;
+  const labels = { ...DEFAULT_VISIBILITY_LABELS, ...labelsProp };
+  const [open, setOpen] = useState(false);
+
+  // Hideable cols are the only ones the user can toggle. `hideable`
+  // defaults to `true` — a column is hideable unless explicitly opted
+  // out with `hideable: false` (structurally required column).
+  const hideableCols = cols.filter((c) => c.hideable !== false);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        disabled={disabled}
+        className={cn(
+          'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md',
+          'text-sm text-neutral-700 hover:text-neutral-900',
+          'border border-neutral-300 bg-neutral-50 hover:bg-neutral-100',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+          'transition-colors motion-reduce:transition-none',
+          'disabled:opacity-50 disabled:cursor-not-allowed',
+        )}
+      >
+        <ColumnsIcon />
+        <span>{labels.columnsButton}</span>
+      </button>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title={labels.columnsTitle}
+        description={labels.columnsDescription}
+        size="sm"
+      >
+        <ColumnVisibilityBody
+          cols={hideableCols}
+          hiddenColumns={hiddenColumns}
+          onChange={onChange}
+          onDone={() => setOpen(false)}
+          labels={labels}
+        />
+      </Dialog>
+    </>
+  );
+}
+
+// ───── Dialog body ─────
+
+function ColumnVisibilityBody<T extends object>(props: {
+  cols: TableColumn<T>[];
+  hiddenColumns: string[];
+  onChange: (next: string[]) => void;
+  onDone: () => void;
+  labels: Required<ColumnVisibilityLabels>;
+}) {
+  const { cols, hiddenColumns, onChange, onDone, labels } = props;
+  // Local draft so the user can stage changes; commit on Done.
+  const [draft, setDraft] = useState<string[]>(hiddenColumns);
+
+  // Re-sync when the dialog re-opens with a different external state.
+  useEffect(() => {
+    setDraft(hiddenColumns);
+  }, [hiddenColumns]);
+
+  const toggle = (field: string) => {
+    setDraft((prev) =>
+      prev.includes(field) ? prev.filter((f) => f !== field) : [...prev, field],
+    );
+  };
+
+  const showAll = () => setDraft([]);
+  const hideAll = () => setDraft(cols.map((c) => c.field as string));
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
+        <button
+          type="button"
+          onClick={showAll}
+          className="text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline"
+        >
+          {labels.columnsShowAll}
+        </button>
+        <span className="text-neutral-300">·</span>
+        <button
+          type="button"
+          onClick={hideAll}
+          className="text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline"
+        >
+          {labels.columnsHideAll}
+        </button>
+      </div>
+      <ul className="flex flex-col gap-1.5 max-h-72 overflow-auto">
+        {cols.map((col) => {
+          const field = col.field as string;
+          const hidden = draft.includes(field);
+          const header =
+            typeof col.header === 'function' ? col.header() : col.header;
+          return (
+            <li key={field}>
+              <label className="flex items-center gap-2 cursor-pointer py-1 px-1 rounded hover:bg-neutral-100">
+                <input
+                  type="checkbox"
+                  checked={!hidden}
+                  onChange={() => toggle(field)}
+                  className="cursor-pointer"
+                />
+                <span className="text-sm text-neutral-900">{header}</span>
+              </label>
+            </li>
+          );
+        })}
+      </ul>
+      <div className="flex justify-end gap-2 pt-2 border-t border-neutral-200">
+        <button
+          type="button"
+          onClick={() => {
+            onChange(draft);
+            onDone();
+          }}
+          className="text-sm bg-primary-500 text-white rounded-md hover:bg-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 px-3 py-1.5"
+        >
+          {labels.columnsDone}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ───── Icon ─────
+
+function ColumnsIcon(): ReactNode {
+  return (
+    <svg
+      width="0.875em"
+      height="0.875em"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="2" y="3" width="3.5" height="10" rx="0.5" />
+      <rect x="6.25" y="3" width="3.5" height="10" rx="0.5" />
+      <rect x="10.5" y="3" width="3.5" height="10" rx="0.5" />
+    </svg>
+  );
+}

package/src/components/Dialog/dialog.variants.ts

@@ -26,21 +26,25 @@ export const dialogVariants = tv({
     ],
     content: [
       'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
-      'w-full bg-white dark:bg-neutral-900 rounded-lg shadow-xl',
-      'border border-neutral-200 dark:border-neutral-800',
+      // bg-white hardcoded (doesn't auto-invert) so `dark:` is needed.
+      // Target `dark:bg-neutral-100` = #171717 in dark mode (one
+      // elevation tier above page surface).
+      'w-full bg-white dark:bg-neutral-100 rounded-lg shadow-xl',
+      // border-neutral-200 auto-inverts — no `dark:` needed.
+      'border border-neutral-200',
       'p-6 flex flex-col gap-4 max-h-[90vh]',
       'focus:outline-none',
       'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=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',
     ],
-    title: 'text-lg font-semibold leading-tight text-neutral-900 dark:text-neutral-50',
-    description: 'text-sm text-neutral-600 dark:text-neutral-400',
+    // All neutral text classes auto-invert via CSS-var swap.
+    title: 'text-lg font-semibold leading-tight text-neutral-900',
+    description: 'text-sm text-neutral-600',
     closeButton: [
       'absolute top-4 right-4 inline-flex items-center justify-center',
       'h-8 w-8 rounded-md text-neutral-500 hover:text-neutral-900',
-      'dark:text-neutral-400 dark:hover:text-neutral-50',
-      'hover:bg-neutral-100 dark:hover:bg-neutral-800',
+      'hover:bg-neutral-100',
       'focus:outline-none focus:ring-2 focus:ring-primary-500',
       'transition-colors',
     ],

package/src/components/Divider/Divider.test.tsx

@@ -66,8 +66,10 @@ describe('<Divider>', () => {
     it('default neutral', () => {
       const { container } = render(<Divider />);
       const cls = container.firstElementChild?.className ?? '';
+      // Sprint 4.3 identity sweep: neutral palette auto-inverts via
+      // the dashforgePreset() CSS-var swap — no `dark:` needed.
       expect(cls).toContain('border-neutral-200');
-      expect(cls).toContain('dark:border-neutral-800');
+      expect(cls).not.toContain('dark:border-neutral-');
     });
 
     it('color="primary"', () => {

package/src/components/Divider/Divider.tsx

@@ -128,7 +128,7 @@ export const Divider = forwardRef<HTMLElement, DividerProps>(
         {...rest}
       >
         <span aria-hidden="true" className={cn(lineCommon, leftStubClass)} />
-        <span className={cn('shrink-0 text-sm text-neutral-500 dark:text-neutral-400', labelPadding)}>
+        <span className={cn('shrink-0 text-sm text-neutral-500', labelPadding)}>
           {children}
         </span>
         <span aria-hidden="true" className={cn(lineCommon, rightStubClass)} />

package/src/components/Divider/divider.variants.ts

@@ -85,7 +85,8 @@ export const dividerLineVariants = tv({
     },
 
     color: {
-      neutral:   'border-neutral-200 dark:border-neutral-800',
+      // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
+      neutral:   'border-neutral-200',
       primary:   'border-primary-300 dark:border-primary-700',
       secondary: 'border-secondary-300 dark:border-secondary-700',
       success:   'border-success-300 dark:border-success-700',

package/src/components/Pagination/Pagination.tsx

@@ -238,7 +238,9 @@ export function Pagination(props: PaginationProps) {
             disabled={disabled}
             aria-label={labels.perPage}
             className={cn(
-              'rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1',
+              // Auto-invert via CSS-var swap — no `dark:` variants needed
+              // on neutral palette.
+              'rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1',
               'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
             )}
           >

package/src/components/Pagination/pagination.variants.ts

@@ -23,28 +23,34 @@ import { tv, type VariantProps } from 'tailwind-variants';
 export const paginationVariants = tv({
   slots: {
     root: 'flex flex-wrap items-center gap-3',
-    summary: 'text-neutral-600 dark:text-neutral-400',
+    // All neutral classes auto-invert via the dashforgePreset() CSS-var
+    // swap. `bg-neutral-50` provides the button surface (matches page
+    // surface; the border gives the separation). `hover:bg-neutral-100`
+    // is the one-tier elevation that works in both modes.
+    summary: 'text-neutral-600',
     list: 'inline-flex items-center gap-1',
     pageButton: [
       'inline-flex items-center justify-center rounded-md',
-      'border border-neutral-300 dark:border-neutral-700',
-      'bg-white dark:bg-neutral-900',
-      'text-neutral-700 dark:text-neutral-300',
-      'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+      'border border-neutral-300',
+      'bg-neutral-50',
+      'text-neutral-700',
+      'hover:bg-neutral-100',
       'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
       'transition-colors motion-reduce:transition-none',
       'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
     ],
     activeButton: [
+      // Primary palette does NOT auto-invert — `dark:` shift is a
+      // design choice for tone refinement (kept).
       'bg-primary-500 text-white border-primary-500',
       'hover:bg-primary-600 dark:hover:bg-primary-400',
     ],
     navButton: [
       'inline-flex items-center justify-center rounded-md',
-      'border border-neutral-300 dark:border-neutral-700',
-      'bg-white dark:bg-neutral-900',
-      'text-neutral-700 dark:text-neutral-300',
-      'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+      'border border-neutral-300',
+      'bg-neutral-50',
+      'text-neutral-700',
+      'hover:bg-neutral-100',
       'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
       'transition-colors motion-reduce:transition-none',
       'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
@@ -52,12 +58,12 @@ export const paginationVariants = tv({
     ellipsis: 'inline-flex items-center justify-center text-neutral-500 px-1',
     pageSizeSelector: [
       'inline-flex items-center gap-2',
-      'text-neutral-700 dark:text-neutral-300',
+      'text-neutral-700',
     ],
     jumpInput: [
-      'rounded-md border border-neutral-300 dark:border-neutral-700',
-      'bg-white dark:bg-neutral-900',
-      'text-neutral-900 dark:text-neutral-50',
+      'rounded-md border border-neutral-300',
+      'bg-neutral-50',
+      'text-neutral-900',
       'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
       'transition-colors motion-reduce:transition-none',
     ],

package/src/components/Popover/popover.variants.ts

@@ -3,15 +3,21 @@ import { tv, type VariantProps } from 'tailwind-variants';
 export const popoverVariants = tv({
   slots: {
     content: [
-      'z-50 rounded-md border border-neutral-200 dark:border-neutral-800',
-      'bg-white dark:bg-neutral-900 p-4 shadow-lg',
-      'text-sm text-neutral-900 dark:text-neutral-50',
+      // Neutral border auto-inverts via CSS-var swap.
+      'z-50 rounded-md border border-neutral-200',
+      // bg-white hardcoded (no auto-invert) so `dark:` is required.
+      // Target `dark:bg-neutral-100` resolves to #171717 in dark mode
+      // (one elevation tier above the page surface).
+      'bg-white dark:bg-neutral-100 p-4 shadow-lg',
+      // Text auto-inverts.
+      'text-sm text-neutral-900',
       'focus:outline-none',
       'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=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-white dark:fill-neutral-900',
+    // Arrow follows content bg: `fill-white` in light + matching dark target.
+    arrow: 'fill-white dark:fill-neutral-100',
   },
 });
 

package/src/components/Skeleton/skeleton.variants.ts

@@ -35,7 +35,8 @@ export const skeletonVariants = tv({
   slots: {
     root: [
       'block',
-      'bg-neutral-200 dark:bg-neutral-800',
+      // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
+      'bg-neutral-200',
       'motion-reduce:animate-none',
     ],
   },

package/src/components/Table/Table.tsx

@@ -3,19 +3,19 @@ import { cn } from '../../utils/cn.js';
 import { useAccessState } from '../../hooks/useAccessState.js';
 import { Skeleton } from '../Skeleton/Skeleton.js';
 import { tableVariants } from './table.variants.js';
-import { useControllableState } from './_internal/useControllableState.js';
-import { useDebouncedValue } from './_internal/useDebouncedValue.js';
-import { useTableSearch } from './_internal/useTableSearch.js';
-import { useTableFilter } from './_internal/useTableFilter.js';
-import { useTableSort, cycleSortFor } from './_internal/useTableSort.js';
-import { useTableSelection } from './_internal/useTableSelection.js';
-import { getNestedValue } from './_internal/getNestedValue.js';
+import { useControllableState } from '../_shared/data/useControllableState.js';
+import { useDebouncedValue } from '../_shared/data/useDebouncedValue.js';
+import { useTableSearch } from '../_shared/data/useTableSearch.js';
+import { useTableFilter } from '../_shared/data/useTableFilter.js';
+import { useTableSort, cycleSortFor } from '../_shared/data/useTableSort.js';
+import { useTableSelection } from '../_shared/data/useTableSelection.js';
+import { getNestedValue } from '../_shared/data/getNestedValue.js';
 import {
   useColumnAutoDetect,
   resolveAlign,
   resolveMonospace,
   resolveTabularNums,
-} from './_internal/useColumnAutoDetect.js';
+} from '../_shared/data/useColumnAutoDetect.js';
 import type {
   TableProps,
   TableColumn,
@@ -40,10 +40,24 @@ const DEFAULT_LABELS: Required<TableLabels> = {
   filterColumn: 'Filter',
   filterApply: 'Apply',
   filterClear: 'Clear',
+  filterMin: 'Min',
+  filterMax: 'Max',
+  filterFrom: 'From',
+  filterTo: 'To',
+  filterAll: 'All',
+  filterTrue: 'True',
+  filterFalse: 'False',
   density: 'Density',
   densityCompact: 'Compact',
   densityComfortable: 'Comfortable',
   densitySpacious: 'Spacious',
+  columnsButton: 'Columns',
+  columnsTitle: 'Manage columns',
+  columnsDescription:
+    'Show or hide columns. Required columns cannot be toggled.',
+  columnsShowAll: 'Show all',
+  columnsHideAll: 'Hide all',
+  columnsDone: 'Done',
 };
 
 const DEFAULT_GET_ROW_ID = <T extends object>(_row: T, index: number) => String(index);

package/src/components/Table/table.types.ts

@@ -131,11 +131,20 @@ export interface TableColumn<T extends object> {
   searchable?: boolean;
 
   /**
-   * Enable per-column quick filter (text-based in v1).
+   * Enable per-column quick filter UI in the column header.
    * @default false
    */
   filterable?: boolean;
 
+  /**
+   * Override the filter UI type. By default the type is auto-detected
+   * from `useColumnAutoDetect` (number → range, date → range,
+   * boolean → select, anything else → text contains). Force a
+   * specific UI when the autodetect picks the wrong one — e.g. an
+   * ID column stored as a number that should filter by text contains.
+   */
+  filterType?: TableFilterType;
+
   /**
    * Custom cell renderer. Receives the full row + the resolved
    * (potentially nested) value, the row index, selection state,
@@ -151,9 +160,41 @@ export interface TableColumn<T extends object> {
    */
   access?: AccessRequirement;
 
-  /** Reserved for v1-bis (column-visibility dialog). */
+  /**
+   * Pin this column during horizontal scroll. `'left'` (DataGrid v1)
+   * uses CSS `position: sticky; left: 0`. `'right'` is reserved for
+   * v1-bis (CSS edge cases around last-column borders). Table
+   * (non-virtualized) ignores this prop today — only DataGrid honors
+   * it (Sprint 4.2).
+   */
+  sticky?: 'left' | 'right';
+
+  /**
+   * Allow user to hide this column from the column-visibility dialog.
+   * Pass `false` for structurally required columns (e.g. an ID column).
+   * @default true
+   */
   hideable?: boolean;
+  /** Hidden on first render (the user can re-show via the dialog). */
   defaultHidden?: boolean;
+
+  /**
+   * Allow user to resize this column by dragging the right edge of
+   * its header. Pass `false` to opt out per-column. The grid-level
+   * `enableColumnResize` flag must also be on (default `true`).
+   * @default true
+   */
+  resizable?: boolean;
+  /** Maximum width (px) honored by the resize drag. */
+  maxWidth?: number;
+
+  /**
+   * Allow user to reorder this column by dragging its header. Pass
+   * `false` to pin its position. The grid-level `enableColumnReorder`
+   * flag must also be on (default `true`).
+   * @default true
+   */
+  reorderable?: boolean;
 }
 
 // ───── State models ─────
@@ -172,15 +213,36 @@ export interface TableSortItem {
  */
 export type TableSortModel = TableSortItem[];
 
+/**
+ * Filter operator. The value shape depends on the operator:
+ *  - `contains` → `value: string` (text substring match)
+ *  - `equals` → `value: unknown` (exact match, used for booleans)
+ *  - `between` → `value: [min, max]` where each end can be `null`
+ *    for an open range. Used for number ranges (`value: [10, 50]`)
+ *    and date ranges (`value: ['2024-01-01', '2024-12-31']` as ISO).
+ */
+export type TableFilterOperator = 'contains' | 'equals' | 'between';
+
 export interface TableFilterItem {
   field: string;
-  /** Text substring match. Future ops: `equals`, `in`, `gte`, `lte`, `between`. */
-  op: 'contains';
-  value: string;
+  op: TableFilterOperator;
+  value: unknown;
 }
 
 export type TableFilterModel = TableFilterItem[];
 
+/**
+ * Column-level filter type hint. Determines which filter UI to
+ * render in the column header Popover. Auto-detected from
+ * `useColumnAutoDetect` when omitted:
+ *
+ *  - `number` → number range filter
+ *  - `date` → date range filter
+ *  - `boolean` → true/false/all select
+ *  - `string` (or anything else) → text contains
+ */
+export type TableFilterType = 'text' | 'number' | 'boolean' | 'date';
+
 export type TableRowSelectionMode = 'none' | 'single' | 'multiple';
 
 // ───── i18n labels ─────
@@ -212,11 +274,27 @@ export interface TableLabels {
   filterColumn?: string;
   filterApply?: string;
   filterClear?: string;
+  /** Number / date range filter inputs. */
+  filterMin?: string;
+  filterMax?: string;
+  filterFrom?: string;
+  filterTo?: string;
+  /** Boolean filter radio options. */
+  filterAll?: string;
+  filterTrue?: string;
+  filterFalse?: string;
   /** Density toggle. */
   density?: string;
   densityCompact?: string;
   densityComfortable?: string;
   densitySpacious?: string;
+  /** Column visibility dialog. */
+  columnsButton?: string;
+  columnsTitle?: string;
+  columnsDescription?: string;
+  columnsShowAll?: string;
+  columnsHideAll?: string;
+  columnsDone?: string;
 }
 
 // ───── Slot props ─────