gridsmith-ui 0.21.0 → 0.23.0

package/dist/{table-utils-GounRE6s.d.ts → table-utils-BkjNEWts.d.ts}

@@ -31,6 +31,10 @@ declare function BreakpointWidthProvider({ width, children }: {
 declare function useBreakpoint(key: BreakpointKey): boolean;
 
 /** Shared column-kind inference for Table and DataGrid. */
-type ColumnKind = "date" | "number" | "email" | "label" | "text";
+/**
+ * What a column holds, which decides how its cells lay out: numbers and dates shrink to their content and stay whole,
+ * an identifier (a long run of digits: a barcode, an ID) may wrap anywhere, an email truncates, text wraps at spaces.
+ */
+type ColumnKind = "date" | "number" | "email" | "label" | "text" | "identifier";
 
 export { type BreakpointKey as B, type ColumnKind as C, BreakpointWidthProvider as a, useBreakpoint as u };

package/dist/tokens.css

@@ -168,9 +168,12 @@
   --ds-sidebar-active-accent: var(--ds-sidebar-accent);
   --ds-sidebar-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-image: none;
+  --ds-switch-off-fill: transparent;
+  --ds-switch-off-edge: var(--ds-input-border);
+  --ds-switch-off-knob: color-mix(in oklab, var(--ds-input-border) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
 }
 
-/* Navigation active styles — redeclared for nested mode wrappers and overlay portals */
+/* Navigation active styles and the switch's off look — redeclared for nested mode wrappers and overlay portals */
 :root, [data-mode], [data-ds-overlay] {
   --ds-nav-h-active-bg: transparent;
   --ds-nav-h-active-text: var(--ds-text-primary);
@@ -198,6 +201,9 @@
   --ds-sidebar-active-accent: var(--ds-sidebar-accent);
   --ds-sidebar-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-image: none;
+  --ds-switch-off-fill: transparent;
+  --ds-switch-off-edge: var(--ds-input-border);
+  --ds-switch-off-knob: color-mix(in oklab, var(--ds-input-border) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
 }
 
 /* Density — hold the configured value at every viewport */
@@ -241,6 +247,9 @@
   --ds-text-on-primary: oklch(1 0 0);
   --ds-accent-wash: var(--ds-gradient);
   --ds-text-muted-on-tint: var(--ds-neutral-400);
+  --ds-check-bg: var(--ds-primary-400);
+  --ds-check-fg: var(--ds-neutral-950);
+  --ds-check-border: var(--ds-primary-400);
   --ds-palette-1-bold: oklch(0.55 0.1200 48);
   --ds-palette-1-subtle: oklch(0.92 0.0300 48);
   --ds-palette-1-dark: oklch(0.35 0.1000 48);
@@ -290,6 +299,7 @@
   --ds-chart-6-soft: color-mix(in oklch, var(--ds-palette-5-chart) 30%, transparent);
   --ds-chart-fill: var(--ds-chart-1);
   --ds-chart-fill-soft: var(--ds-chart-1-soft);
+  --ds-check-gradient: none;
   --ds-status-success: oklch(0.65 0.12 150);
   --ds-status-success-bg: oklch(0.22 0.02 150);
   --ds-status-warning: oklch(0.75 0.12 55);
@@ -339,8 +349,8 @@
   --ds-tab-hover-bg: var(--ds-bg-muted);
   --ds-tab-active-bg: var(--ds-bg-surface);
   --ds-input-bg: var(--ds-neutral-800);
-  --ds-input-border: var(--ds-neutral-600);
-  --ds-input-border-hover: var(--ds-neutral-500);
+  --ds-input-border: oklch(0.645 calc(0.008 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-input-border-hover: var(--ds-neutral-400);
   --ds-input-focus-ring: var(--ds-ring-active);
   --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
   --ds-accent-primary: var(--ds-primary-500);
@@ -359,6 +369,9 @@
   --ds-accent-muted: color-mix(in srgb, var(--ds-accent-primary) 20%, transparent);
   --ds-accent-soft: color-mix(in srgb, var(--ds-accent-primary) 30%, transparent);
   --ds-accent-subtle-text: var(--ds-accent-primary);
+  --ds-check-bg: var(--ds-primary-400);
+  --ds-check-fg: var(--ds-neutral-950);
+  --ds-check-border: var(--ds-primary-400);
   --ds-nav-h-active-bg: transparent;
   --ds-nav-h-active-text: var(--ds-text-primary);
   --ds-nav-h-inactive-text: var(--ds-text-muted);
@@ -385,4 +398,8 @@
   --ds-sidebar-active-accent: var(--ds-sidebar-accent);
   --ds-sidebar-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-image: none;
+  --ds-switch-off-fill: transparent;
+  --ds-switch-off-edge: var(--ds-input-border);
+  --ds-switch-off-knob: color-mix(in oklab, var(--ds-input-border) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
+  --ds-check-gradient: none;
 }

package/dist/use-pagination-DiJo0aW5.d.ts

@@ -0,0 +1,153 @@
+import * as react from 'react';
+
+type PreferenceValidationTiming = "onBlur" | "onSubmit" | "onChange";
+type PreferenceBreakpoint = "sm" | "md" | "lg";
+type PreferenceEmptyStyle = "illustration-cta" | "text-cta" | "redirect";
+type PreferenceLoadingStyle = "skeleton" | "spinner" | "progress-bar";
+type PreferenceDestructiveMode = "dialog" | "undo";
+/** dataDisplay.paginationStyle — how a long list shows more: page numbers, a Load more button, or loading as the user scrolls. */
+type PreferencePaginationStyle = "pagination" | "load-more" | "infinite-scroll";
+interface AppShellPreferences {
+    /** forms.validationTiming — when a field first shows its error. */
+    validationTiming?: PreferenceValidationTiming;
+    /** forms.actions — where a form's buttons sit and how they align. */
+    formActions?: {
+        align?: "start" | "end";
+        placement?: "auto" | "inline";
+    };
+    /** dataDisplay.itemsPerPage — the page size of a paged or load-more list. */
+    itemsPerPage?: number;
+    /** dataDisplay.paginationStyle — page numbers, a Load more button, or loading on scroll; usePagination and Pagination follow it (round 22). */
+    paginationStyle?: PreferencePaginationStyle;
+    /** responsive.tableToCardsBreakpoint — below this width a Table becomes stacked cards. */
+    tableToCardsBreakpoint?: PreferenceBreakpoint;
+    /** emptyStates.emptyStyle — illustration with an action, text with an action, or redirect to creation. */
+    emptyStyle?: PreferenceEmptyStyle;
+    /** emptyStates.loadingStyle — what a page shows while data loads. */
+    loadingStyle?: PreferenceLoadingStyle;
+    /** destructiveActions.mode — confirm in a dialog, or act now with an Undo toast. */
+    destructiveMode?: PreferenceDestructiveMode;
+    /** destructiveActions.highSeverityActions — always confirm in a dialog, even in undo mode. */
+    highSeverityActions?: string[];
+    /** destructiveActions.typeToConfirmActions — the user types the name before the confirm enables. */
+    typeToConfirmActions?: string[];
+    /** destructiveActions.undoWindowSeconds — how long the Undo toast stays. */
+    undoWindowSeconds?: number;
+}
+declare const PreferencesContext: react.Context<AppShellPreferences | null>;
+/** Every preference in force, the shell's value or the house default — what app code reads. */
+interface ResolvedPreferences {
+    validationTiming: PreferenceValidationTiming;
+    formActions: {
+        align: "start" | "end";
+        placement: "auto" | "inline";
+    };
+    itemsPerPage: number;
+    paginationStyle: PreferencePaginationStyle;
+    tableToCardsBreakpoint: PreferenceBreakpoint;
+    emptyStyle: PreferenceEmptyStyle;
+    loadingStyle: PreferenceLoadingStyle;
+    destructiveMode: PreferenceDestructiveMode;
+    highSeverityActions: string[];
+    typeToConfirmActions: string[];
+    undoWindowSeconds: number;
+}
+/**
+ * For app code: every preference in force — the shell's value, else the house default — so a page never writes a
+ * fallback of its own. Round 21 (run 58): with every field optional, TypeScript made the builder write
+ * `const { itemsPerPage = 20 } = usePreferences()`, a second copy of the preference it then edited by hand when the
+ * rule changed. Paged lists use `usePagination`, which reads the page size itself.
+ */
+declare function usePreferences(): ResolvedPreferences;
+/**
+ * "Remove range" → "remove_range": the key the high-severity and type-to-confirm lists use. The engine's `actionKey`
+ * (platform/src/lib/destructive-mode.ts) is the same rule for compliance; a platform test keeps the two identical.
+ */
+declare function preferenceActionKey(label: string): string;
+
+/**
+ * A long list in one hook (round 21; all three list styles since round 22). The page size and the list style are the
+ * project's `dataDisplay.itemsPerPage` and `dataDisplay.paginationStyle`, read from the shell, so a mid-build
+ * `update_rule` on either reaches every list with no page edited. The page gets what to show, the props for
+ * `<Pagination>` — page numbers, a Load more button or loading on scroll, whichever the project's style is — and the
+ * numbers the count line needs ("Showing 51–100 of 200 events", or "Showing 40 of 120 members" while a list grows).
+ *
+ * Run 58 hand-wrote the paging; runs 59 and 60 hand-wrote load-more and scroll loading — an IntersectionObserver, a
+ * visible count and a page size copied in as a constant, twice in one app — because the library had no way to.
+ *
+ *   const rows = events.map(toRow)
+ *   const pager = usePagination(rows)
+ *   <TableToolbar resultCount={rows.length} resultNoun={["event", "events"]} pagination={pager} />
+ *   <Table columns={columns} data={rows} pager={pager} />
+ *
+ * The list takes the whole pager (Sprint 25.13 A3): Table, DataGrid, StackedList, Timeline and VirtualizedList draw the
+ * pager's part of every row and its control beneath, and a sortable Table sorts every row, not one page. For anything
+ * else, draw the page's items and the control yourself: `pager.items.map(…)` then `<Pagination {...pager.props} />`.
+ *
+ * A long page that must mount only the rows on screen (logs, a feed) still pages: the size the user asked for goes to
+ * the hook, with its override note, and the list mounts only what is on screen of each page (A49):
+ *
+ *   // @gridsmith-override dataDisplay.itemsPerPage: <the user's words>
+ *   const pager = usePagination(entries, { pageSize: 100 })
+ *   <VirtualizedList items={entries} pager={pager} estimateSize={() => 40} renderItem={(entry) => <LogLine entry={entry} />} />
+ */
+interface Pager<T> {
+    /** The list style this list follows: the project's, unless `style` was passed. */
+    style: PreferencePaginationStyle;
+    /** What to show: the current page's rows, or every row loaded so far on a list that grows. */
+    items: T[];
+    /** The current page, from 1; on a growing list, how many pages are loaded. */
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    totalPages: number;
+    /** The first and last row numbers on screen, from 1 ("Showing 51–100"); [0, 0] for an empty list. */
+    range: [number, number];
+    /** How many rows are on screen. */
+    shown: number;
+    /** Rows left to show: a next page, or more to load. */
+    hasMore: boolean;
+    /** The next page, or the next `pageSize` rows on a growing list. */
+    loadMore: () => void;
+    setPage: (page: number) => void;
+    /** A page-size selector's choice; it wins over the project's page size and starts again at page 1. */
+    setPageSize: (size: number) => void;
+    /**
+     * Spread onto <Pagination>: it renders page numbers, a Load more button or the scroll trigger, as `style` says. A list
+     * given the whole pager (`<Table pager={pager}>`, Sprint 25.13 A3) draws this control itself.
+     */
+    props: {
+        currentPage: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+        pageSize: number;
+        onPageSizeChange: (size: number) => void;
+        mode: PreferencePaginationStyle;
+        hasMore: boolean;
+        onLoadMore: () => void;
+        /** The page sizes the user may choose between, when the page offers the choice (`pageSizeOptions` below). */
+        pageSizeOptions?: number[];
+        /** Which pager the control belongs to, so a second control for the same list is caught in development (A3). */
+        pagerToken: object;
+    };
+}
+interface PaginationOptions {
+    /** A fixed page size for this list, over the project's. Leave it out: the project's page size is the rule. */
+    pageSize?: number;
+    /** Values that start the list again at page 1 when they change — the sort column and direction, a search query. */
+    resetOn?: unknown;
+    /**
+     * A list style for this list only, over the project's. Leave it out: the project's style is the rule. Passing one that
+     * differs is overriding a rule in force — ask the user first, and put `// @gridsmith-override
+     * dataDisplay.paginationStyle: <their reason>` above the call.
+     */
+    style?: PreferencePaginationStyle;
+    /**
+     * The page sizes the user may choose between, beside the page numbers (`[10, 25, 50]`). The choice goes with the
+     * control, so a list given the pager (A3) offers it too. Leave it out for the project's page size alone.
+     */
+    pageSizeOptions?: number[];
+}
+declare function usePagination<T>(list: readonly T[], options?: PaginationOptions): Pager<T>;
+
+export { type AppShellPreferences as A, type Pager as P, type ResolvedPreferences as R, type PaginationOptions as a, PreferencesContext as b, usePreferences as c, preferenceActionKey as p, usePagination as u };

package/dist/virtualized.d.ts

@@ -1,16 +1,26 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, Ref } from 'react';
 import { VirtualItem } from '@tanstack/react-virtual';
+import { P as Pager } from './use-pagination-DiJo0aW5.js';
 
 interface VirtualizedListProps<T> {
     items: T[];
     estimateSize: (index: number) => number;
+    /** An item, with its index in `items` (the whole list, when the list is paged). */
     renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;
     overscan?: number;
     height?: number | string;
     className?: string;
     ref?: Ref<HTMLDivElement>;
+    /**
+     * The list's pager (Sprint 25.13 A49): paging and drawing only the rows on screen combine. Pass every item and
+     * `usePagination(items)`'s pager: the list mounts only the rows on screen of the pager's part, and beneath it draws the
+     * control in the project's style. A new page starts at its top; with infinite scroll, scrolling inside the list loads
+     * more. For a long page (logs, feeds) the user asked to page differently, pass the size to the hook
+     * (`usePagination(rows, { pageSize: 100 })`) with its override note.
+     */
+    pager?: Pager<unknown>;
 }
-declare function VirtualizedList<T>({ items, estimateSize, renderItem, overscan, height, className, ref, }: VirtualizedListProps<T>): react_jsx_runtime.JSX.Element;
+declare function VirtualizedList<T>({ items: allItems, estimateSize, renderItem, overscan, height, className, ref, pager, }: VirtualizedListProps<T>): react_jsx_runtime.JSX.Element;
 
 export { VirtualizedList };

package/dist/virtualized.js

@@ -1,25 +1,67 @@
+import { useWholeListCheck, pagerPart, Pagination } from './chunk-ICNWPNMM.js';
+import './chunk-7TOJ4G7S.js';
+import './chunk-RT7RYGC3.js';
+import { useScrollsInside } from './chunk-CKWITUSH.js';
+import './chunk-CXMV7SXJ.js';
+import './chunk-7Q46JXSK.js';
+import { useLatest } from './chunk-WH2FUFAC.js';
+import './chunk-4LDYR7QP.js';
 import { cn } from './chunk-M2QRNBDQ.js';
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 function VirtualizedList({
-  items,
+  items: allItems,
   estimateSize,
   renderItem,
   overscan = 5,
   height = 400,
   className,
-  ref
+  ref,
+  pager
 }) {
+  useScrollsInside();
   const parentRef = useRef(null);
+  const endRef = useRef(null);
+  useWholeListCheck("VirtualizedList", allItems.length, pager);
+  const items = pagerPart(allItems, pager);
+  const offset = pager ? Math.max(0, pager.range[0] - 1) : 0;
   const virtualizer = useVirtualizer({
     count: items.length,
     getScrollElement: () => parentRef.current,
-    estimateSize,
+    estimateSize: (index) => estimateSize(offset + index),
+    // a row is known by its place in the whole list, so page 2's third row isn't page 1's (the review of 30 September:
+    // an entry opened on page 1 showed opened on page 2, and page 1's heights carried over)
+    getItemKey: (index) => offset + index,
     overscan
   });
-  return /* @__PURE__ */ jsx(
+  const page = pager ? pager.page : null;
+  const pageBefore = useRef(page);
+  const numbered = pager?.style === "pagination";
+  useEffect(() => {
+    const before = pageBefore.current;
+    pageBefore.current = page;
+    if (page === null || !parentRef.current) return;
+    if (numbered ? page !== before : before !== null && page < before) parentRef.current.scrollTop = 0;
+  }, [page, numbered]);
+  const loadMore = useLatest(pager?.loadMore);
+  const growing = pager?.style === "infinite-scroll" && pager.hasMore;
+  const loadedAt = useRef(-1);
+  useEffect(() => {
+    const root = parentRef.current;
+    const end = endRef.current;
+    if (loadedAt.current !== items.length) loadedAt.current = -1;
+    if (!growing || !root || !end || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => {
+      if (!entries.some((e) => e.isIntersecting) || loadedAt.current === items.length) return;
+      loadedAt.current = items.length;
+      loadMore.current?.();
+    }, { root, rootMargin: "200px 0px" });
+    observer.observe(end);
+    return () => observer.disconnect();
+  }, [growing, items.length, loadMore]);
+  const list = /* @__PURE__ */ jsxs(
     "div",
     {
       ref: (node) => {
@@ -27,27 +69,36 @@ function VirtualizedList({
         if (typeof ref === "function") ref(node);
         else if (ref) ref.current = node;
       },
+      "data-ds-list": pager ? "" : void 0,
       className: cn(
         "overflow-auto",
         "rounded-[var(--ds-radius-md)]",
         "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         "bg-[var(--ds-bg-surface)]",
-        className
+        !pager && className
       ),
       style: { height },
-      children: /* @__PURE__ */ jsx("div", { className: "relative w-full", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-index": virtualItem.index,
-          ref: virtualizer.measureElement,
-          className: "absolute top-0 left-0 w-full",
-          style: { transform: `translateY(${virtualItem.start}px)` },
-          children: renderItem(items[virtualItem.index], virtualItem.index, virtualItem)
-        },
-        virtualItem.key
-      )) })
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative w-full", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-index": virtualItem.index,
+            ref: virtualizer.measureElement,
+            className: "absolute top-0 left-0 w-full",
+            style: { transform: `translateY(${virtualItem.start}px)` },
+            children: renderItem(items[virtualItem.index], offset + virtualItem.index, virtualItem)
+          },
+          virtualItem.key
+        )) }),
+        growing && /* @__PURE__ */ jsx("div", { ref: endRef, "data-load-more-trigger": "", "aria-hidden": "true", className: "h-px w-full" })
+      ]
     }
   );
+  if (!pager) return list;
+  return /* @__PURE__ */ jsxs("div", { "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
+    list,
+    allItems.length > 0 && /* @__PURE__ */ jsx(Pagination, { ...pager.props, mode: pager.style === "infinite-scroll" ? "load-more" : pager.props.mode })
+  ] });
 }
 
 export { VirtualizedList };

package/dist/virtualized.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../showcase/src/components/VirtualizedList.tsx"],"names":[],"mappings":";;;;;AAcO,SAAS,eAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA,GAAW,CAAA;AAAA,EACX,MAAA,GAAS,GAAA;AAAA,EACT,SAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAG7C,EAAA,MAAM,cAAc,cAAA,CAAe;AAAA,IACjC,OAAO,KAAA,CAAM,MAAA;AAAA,IACb,gBAAA,EAAkB,MAAM,SAAA,CAAU,OAAA;AAAA,IAClC,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,QAAC,UAA4D,OAAA,GAAU,IAAA;AACvE,QAAA,IAAI,OAAO,GAAA,KAAQ,UAAA,EAAY,GAAA,CAAI,IAAI,CAAA;AAAA,aAAA,IAC9B,GAAA,EAAM,GAAA,CAAsD,OAAA,GAAU,IAAA;AAAA,MACjF,CAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,eAAA;AAAA,QACA,+BAAA;AAAA,QACA,yEAAA;AAAA,QACA,2BAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,MAAA,EAAO;AAAA,MAEhB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBAAA,EAAkB,KAAA,EAAO,EAAE,MAAA,EAAQ,WAAA,CAAY,YAAA,EAAa,IACxE,QAAA,EAAA,WAAA,CAAY,eAAA,EAAgB,CAAE,GAAA,CAAI,CAAC,WAAA,qBAClC,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,cAAY,WAAA,CAAY,KAAA;AAAA,UACxB,KAAK,WAAA,CAAY,cAAA;AAAA,UACjB,SAAA,EAAU,8BAAA;AAAA,UACV,OAAO,EAAE,SAAA,EAAW,CAAA,WAAA,EAAc,WAAA,CAAY,KAAK,CAAA,GAAA,CAAA,EAAM;AAAA,UAExD,qBAAW,KAAA,CAAM,WAAA,CAAY,KAAK,CAAA,EAAG,WAAA,CAAY,OAAO,WAAW;AAAA,SAAA;AAAA,QAN/D,WAAA,CAAY;AAAA,OAQpB,CAAA,EACH;AAAA;AAAA,GACF;AAEJ","file":"virtualized.js","sourcesContent":["import { useRef, type ReactNode, type Ref } from \"react\";\nimport { useVirtualizer, type VirtualItem } from \"@tanstack/react-virtual\";\nimport { cn } from \"../lib/utils\";\n\nexport interface VirtualizedListProps<T> {\n  items: T[];\n  estimateSize: (index: number) => number;\n  renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;\n  overscan?: number;\n  height?: number | string;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function VirtualizedList<T>({\n  items,\n  estimateSize,\n  renderItem,\n  overscan = 5,\n  height = 400,\n  className,\n  ref,\n}: VirtualizedListProps<T>) {\n  const parentRef = useRef<HTMLDivElement>(null);\n\n  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual is not compiler-compatible (informational; the project does not use the React Compiler)\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize,\n    overscan,\n  });\n\n  return (\n    <div\n      ref={(node) => {\n        (parentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }}\n      className={cn(\n        \"overflow-auto\",\n        \"rounded-[var(--ds-radius-md)]\",\n        \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n        \"bg-[var(--ds-bg-surface)]\",\n        className,\n      )}\n      style={{ height }}\n    >\n      <div className=\"relative w-full\" style={{ height: virtualizer.getTotalSize() }}>\n        {virtualizer.getVirtualItems().map((virtualItem) => (\n          <div\n            key={virtualItem.key}\n            data-index={virtualItem.index}\n            ref={virtualizer.measureElement}\n            className=\"absolute top-0 left-0 w-full\"\n            style={{ transform: `translateY(${virtualItem.start}px)` }}\n          >\n            {renderItem(items[virtualItem.index], virtualItem.index, virtualItem)}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../../../showcase/src/components/VirtualizedList.tsx"],"names":[],"mappings":"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","file":"virtualized.js","sourcesContent":["import { useEffect, useRef, type ReactNode, type Ref } from \"react\";\nimport { useVirtualizer, type VirtualItem } from \"@tanstack/react-virtual\";\nimport { cn } from \"../lib/utils\";\nimport { useLatest } from \"../lib/use-latest\";\nimport { Pagination } from \"./Pagination\";\nimport { pagerPart, useWholeListCheck, type Pager } from \"../lib/use-pagination\";\nimport { useScrollsInside } from \"../lib/surface-context\";\n\nexport interface VirtualizedListProps<T> {\n  items: T[];\n  estimateSize: (index: number) => number;\n  /** An item, with its index in `items` (the whole list, when the list is paged). */\n  renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;\n  overscan?: number;\n  height?: number | string;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * The list's pager (Sprint 25.13 A49): paging and drawing only the rows on screen combine. Pass every item and\n   * `usePagination(items)`'s pager: the list mounts only the rows on screen of the pager's part, and beneath it draws the\n   * control in the project's style. A new page starts at its top; with infinite scroll, scrolling inside the list loads\n   * more. For a long page (logs, feeds) the user asked to page differently, pass the size to the hook\n   * (`usePagination(rows, { pageSize: 100 })`) with its override note.\n   */\n  pager?: Pager<unknown>;\n}\n\nexport function VirtualizedList<T>({\n  items: allItems,\n  estimateSize,\n  renderItem,\n  overscan = 5,\n  height = 400,\n  className,\n  ref,\n  pager,\n}: VirtualizedListProps<T>) {\n  // Sprint 25.14 A44: a list with no frame of its own: a SplitView's list pane keeps its hairline around it\n  useScrollsInside();\n  const parentRef = useRef<HTMLDivElement>(null);\n  const endRef = useRef<HTMLDivElement>(null);\n  useWholeListCheck(\"VirtualizedList\", allItems.length, pager);\n  const items = pagerPart(allItems, pager);\n  const offset = pager ? Math.max(0, pager.range[0] - 1) : 0;\n\n  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual is not compiler-compatible (informational; the project does not use the React Compiler)\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: (index) => estimateSize(offset + index),\n    // a row is known by its place in the whole list, so page 2's third row isn't page 1's (the review of 30 September:\n    // an entry opened on page 1 showed opened on page 2, and page 1's heights carried over)\n    getItemKey: (index) => offset + index,\n    overscan,\n  });\n\n  // A49: a new page starts at its top, and so does a growing list that starts again at its first page (a new order, a\n  // search): left scrolled to its end, it loaded the next page at once (the review of 30 September)\n  const page = pager ? pager.page : null;\n  const pageBefore = useRef(page);\n  const numbered = pager?.style === \"pagination\";\n  useEffect(() => {\n    const before = pageBefore.current;\n    pageBefore.current = page;\n    if (page === null || !parentRef.current) return;\n    if (numbered ? page !== before : before !== null && page < before) parentRef.current.scrollTop = 0;\n  }, [page, numbered]);\n\n  // A49: with infinite scroll, the trigger sits at the end of the list's own content and watches the list's scroller\n  // (it watched the viewport, so scrolling inside the list never loaded more); it loads once per growth of the list\n  const loadMore = useLatest(pager?.loadMore);\n  const growing = pager?.style === \"infinite-scroll\" && pager.hasMore;\n  const loadedAt = useRef(-1);\n  useEffect(() => {\n    const root = parentRef.current;\n    const end = endRef.current;\n    // the list's length changed since the last load (it grew, or started again at page 1): it may load again (the\n    // review of 30 September: after a reset to the first page it never loaded again)\n    if (loadedAt.current !== items.length) loadedAt.current = -1;\n    if (!growing || !root || !end || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver((entries) => {\n      if (!entries.some((e) => e.isIntersecting) || loadedAt.current === items.length) return;\n      loadedAt.current = items.length;\n      loadMore.current?.();\n    }, { root, rootMargin: \"200px 0px\" });\n    observer.observe(end);\n    return () => observer.disconnect();\n  }, [growing, items.length, loadMore]);\n\n  const list = (\n    <div\n      ref={(node) => {\n        (parentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }}\n      data-ds-list={pager ? \"\" : undefined}\n      className={cn(\n        \"overflow-auto\",\n        \"rounded-[var(--ds-radius-md)]\",\n        \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n        \"bg-[var(--ds-bg-surface)]\",\n        !pager && className,\n      )}\n      style={{ height }}\n    >\n      <div className=\"relative w-full\" style={{ height: virtualizer.getTotalSize() }}>\n        {virtualizer.getVirtualItems().map((virtualItem) => (\n          <div\n            key={virtualItem.key}\n            data-index={virtualItem.index}\n            ref={virtualizer.measureElement}\n            className=\"absolute top-0 left-0 w-full\"\n            style={{ transform: `translateY(${virtualItem.start}px)` }}\n          >\n            {renderItem(items[virtualItem.index], offset + virtualItem.index, virtualItem)}\n          </div>\n        ))}\n      </div>\n      {growing && <div ref={endRef} data-load-more-trigger=\"\" aria-hidden=\"true\" className=\"h-px w-full\" />}\n    </div>\n  );\n  // A3: the pager's control is the list's next sibling, as <Pagination {...pager.props} /> would be. With infinite\n  // scroll it is the Load more button alone, for keyboard users: the list's own trigger loads as it scrolls (A49). The\n  // two are one element, which takes the className, so in a grid or a flex row they stay one item, and the list keeps\n  // its element while its items come and go (the review of 30 September).\n  if (!pager) return list;\n  return (\n    <div data-gs-paged=\"\" className={cn(\"flex flex-col min-w-0\", className)}>\n      {list}\n      {allItems.length > 0 && <Pagination {...pager.props} mode={pager.style === \"infinite-scroll\" ? \"load-more\" : pager.props.mode} />}\n    </div>\n  );\n}\n"]}

package/dist-static/tokens.css

@@ -168,9 +168,12 @@
   --ds-sidebar-active-accent: var(--ds-sidebar-accent);
   --ds-sidebar-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-image: none;
+  --ds-switch-off-fill: transparent;
+  --ds-switch-off-edge: var(--ds-input-border);
+  --ds-switch-off-knob: color-mix(in oklab, var(--ds-input-border) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
 }
 
-/* Navigation active styles — redeclared for nested mode wrappers and overlay portals */
+/* Navigation active styles and the switch's off look — redeclared for nested mode wrappers and overlay portals */
 :root, [data-mode], [data-ds-overlay] {
   --ds-nav-h-active-bg: transparent;
   --ds-nav-h-active-text: var(--ds-text-primary);
@@ -198,6 +201,9 @@
   --ds-sidebar-active-accent: var(--ds-sidebar-accent);
   --ds-sidebar-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-image: none;
+  --ds-switch-off-fill: transparent;
+  --ds-switch-off-edge: var(--ds-input-border);
+  --ds-switch-off-knob: color-mix(in oklab, var(--ds-input-border) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
 }
 
 /* Density — hold the configured value at every viewport */
@@ -241,6 +247,9 @@
   --ds-text-on-primary: oklch(1 0 0);
   --ds-accent-wash: var(--ds-gradient);
   --ds-text-muted-on-tint: var(--ds-neutral-400);
+  --ds-check-bg: var(--ds-primary-400);
+  --ds-check-fg: var(--ds-neutral-950);
+  --ds-check-border: var(--ds-primary-400);
   --ds-palette-1-bold: oklch(0.55 0.1200 48);
   --ds-palette-1-subtle: oklch(0.92 0.0300 48);
   --ds-palette-1-dark: oklch(0.35 0.1000 48);
@@ -290,6 +299,7 @@
   --ds-chart-6-soft: color-mix(in oklch, var(--ds-palette-5-chart) 30%, transparent);
   --ds-chart-fill: var(--ds-chart-1);
   --ds-chart-fill-soft: var(--ds-chart-1-soft);
+  --ds-check-gradient: none;
   --ds-status-success: oklch(0.65 0.12 150);
   --ds-status-success-bg: oklch(0.22 0.02 150);
   --ds-status-warning: oklch(0.75 0.12 55);
@@ -339,8 +349,8 @@
   --ds-tab-hover-bg: var(--ds-bg-muted);
   --ds-tab-active-bg: var(--ds-bg-surface);
   --ds-input-bg: var(--ds-neutral-800);
-  --ds-input-border: var(--ds-neutral-600);
-  --ds-input-border-hover: var(--ds-neutral-500);
+  --ds-input-border: oklch(0.645 calc(0.008 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-input-border-hover: var(--ds-neutral-400);
   --ds-input-focus-ring: var(--ds-ring-active);
   --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
   --ds-accent-primary: var(--ds-primary-500);
@@ -359,6 +369,9 @@
   --ds-accent-muted: color-mix(in srgb, var(--ds-accent-primary) 20%, transparent);
   --ds-accent-soft: color-mix(in srgb, var(--ds-accent-primary) 30%, transparent);
   --ds-accent-subtle-text: var(--ds-accent-primary);
+  --ds-check-bg: var(--ds-primary-400);
+  --ds-check-fg: var(--ds-neutral-950);
+  --ds-check-border: var(--ds-primary-400);
   --ds-nav-h-active-bg: transparent;
   --ds-nav-h-active-text: var(--ds-text-primary);
   --ds-nav-h-inactive-text: var(--ds-text-muted);
@@ -385,4 +398,8 @@
   --ds-sidebar-active-accent: var(--ds-sidebar-accent);
   --ds-sidebar-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-image: none;
+  --ds-switch-off-fill: transparent;
+  --ds-switch-off-edge: var(--ds-input-border);
+  --ds-switch-off-knob: color-mix(in oklab, var(--ds-input-border) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
+  --ds-check-gradient: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridsmith-ui",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Gridsmith component library — 116 React components (13 of them charts) with design tokens and a CSS custom property theming engine",
   "type": "module",
   "sideEffects": [