@particle-academy/react-fancy 5.56.0 → 5.58.0

package/CHANGELOG.md

@@ -11,6 +11,60 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.58.0] - 2026-10-22
+
+### Added
+
+- **`MultiSwitch` per-option colour.** An option in `list` can carry
+  `color` (any kit `Color`, including `brand`). While that option is
+  selected, the thumb and the switch's border take its colour, e.g. a green
+  "Assign" against a red "Unassign". **Nothing to do for an existing switch:**
+  without `color` the thumb is the same blue, the border the same token, and
+  the thumb's class string is byte-identical to 5.57.0.
+  - Light hues (`amber`, `yellow`, `lime`) get dark label text so the selected
+    label stays readable; the rest get white, as before.
+  - The thumb now carries `data-react-fancy-multi-switch-thumb` and, when
+    coloured, `data-color`.
+  - A caller's own border classes in `className` still win over the colour.
+  - New exported type `MultiSwitchOption` (an `InputOption` plus `color`).
+  - Verified in Chrome in light, `.dark` and `[data-theme="dark"]`.
+
+## [5.57.0] - 2026-10-22
+
+### Added
+
+- **`TimeGrid` column windowing (typed grid).** `windowColumns` renders only
+  the columns in view plus overscan. It is on by default above 500 columns,
+  and `windowColumns` forces it on or off. **Nothing to do for an existing
+  grid:** at 500 columns or fewer nothing changes unless you ask, and a
+  boolean grid (no `cells`) is never windowed.
+  - Stable handles and selection still cover every cell. Ids and the cells
+    passed to `onSelectionChange` come from `cells`, not the DOM, so a
+    selection across unrendered columns reports all of them.
+  - Keyboard focus moved past the window, or a `selection` set from outside
+    (a host, an agent through a bridge) that is out of view, scrolls it into
+    view. Windowed cells carry `aria-colindex`.
+  - The column tracks stay the full grid while scrolling. A jump is rendered
+    before the next paint, so the viewport never flashes blank. On the server
+    a windowed grid renders its frame with no cells.
+  - Measured in Chrome (Playwright, CDP 4x CPU throttle, 240 columns, median
+    of 7 page loads, 2026-10-22). Mount, 5.56.0 against 5.57.0 windowed:
+
+    | container | 7 days | 14 days | 31 days |
+    |---|---|---|---|
+    | 800px | 182 → 119 ms | 329 → 209 ms | 624 → 370 ms |
+    | 1280px | 139 → 131 ms | 286 → 263 ms | 632 → 524 ms |
+
+    The gain depends on how much of the grid is off screen: at 1280px the
+    window still holds 208 of 240 columns. 14 days in 1280px still misses a
+    200 ms budget.
+
+### Changed
+
+- Typed `TimeGrid` cells render in memoised 16-column chunks, so a selection
+  change re-renders only the chunks it touches. Unwindowed 31 days mounts in
+  545 ms against 632 ms in 5.56.0 (1280px, same setup as above).
+
 ## [5.56.0] - 2026-10-21
 
 ### Added

package/dist/{chunk-XO4UWQCU.cjs → chunk-4DL2U23D.cjs}

@@ -3,6 +3,7 @@
 var chunkI27K6NLX_cjs = require('./chunk-I27K6NLX.cjs');
 var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
+var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/TimeGrid/TimeGrid.selection.ts
@@ -109,7 +110,7 @@ var TONE_FILL = {
   zinc: "bg-zinc-500"
 };
 var NEUTRAL_FILL = "bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]";
-var CELL_BASE = "relative m-px rounded-sm";
+var CELL_BASE = "relative m-px h-[var(--tg-cell-h)] w-[var(--tg-cell-w)] rounded-sm";
 var CELL_ENABLED = "cursor-pointer hover:brightness-90 dark:hover:brightness-125";
 var CELL_DISABLED = "cursor-not-allowed opacity-40";
 var CELL_SELECTED = "after:pointer-events-none after:absolute after:inset-0 after:rounded-sm after:bg-[color:var(--fancy-focus,var(--color-blue-500))]/50 dark:after:bg-[color:var(--fancy-focus-dark,var(--color-blue-400))]/50";
@@ -127,6 +128,11 @@ function isDev() {
   }
 }
 var EMPTY = {};
+var WINDOW_DEFAULT_ABOVE = 500;
+var WINDOW_MIN_OVERSCAN = 16;
+var CHUNK = 16;
+var WINDOW_CHUNK = CHUNK;
+var ROW_START = { gridColumnStart: 1 };
 var warnedStates = /* @__PURE__ */ new Set();
 var warnedNoStates = false;
 var cellDomId = (baseId, r, c) => `${baseId}-${r}-${c}`;
@@ -143,23 +149,71 @@ var TypedRow = react.memo(function TypedRow2({
   selStart,
   selEnd,
   activeCol,
-  onRowHeader
+  onRowHeader,
+  colStart,
+  colEnd,
+  windowed
 }) {
-  const { baseId, rows, cols, states, marks, stateClass, cellWidth, cellHeight } = ctx;
-  const { cellId, ariaCell } = ctx.fns.current;
-  const out = new Array(cols.length + 1);
-  out[0] = /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "rowheader",
-      "data-react-fancy-timegrid-row": r,
-      onClick: onRowHeader ? () => onRowHeader(r) : void 0,
-      className: onRowHeader ? `${HEADER_ROW} ${HEADER_HOVER}` : HEADER_ROW,
-      children: rows[r]
-    },
-    "h"
+  const out = [];
+  out.push(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "rowheader",
+        "data-react-fancy-timegrid-row": r,
+        style: windowed ? ROW_START : void 0,
+        onClick: onRowHeader ? () => onRowHeader(r) : void 0,
+        className: onRowHeader ? `${HEADER_ROW} ${HEADER_HOVER}` : HEADER_ROW,
+        children: ctx.rows[r]
+      },
+      "h"
+    )
   );
-  for (let c = 0; c < cols.length; c++) {
+  if (colEnd >= colStart) {
+    const k0 = Math.floor(colStart / CHUNK);
+    const k1 = Math.floor(colEnd / CHUNK);
+    for (let k = k0; k <= k1; k++) {
+      const from = Math.max(k * CHUNK, colStart);
+      const to = Math.min(k * CHUNK + CHUNK - 1, colEnd);
+      const overlaps = selEnd >= from && selStart <= to;
+      out.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CellChunk,
+          {
+            ctx,
+            r,
+            rowCells,
+            from,
+            to,
+            selStart: overlaps ? Math.max(selStart, from) : -1,
+            selEnd: overlaps ? Math.min(selEnd, to) : -2,
+            activeCol: activeCol >= from && activeCol <= to ? activeCol : -1,
+            place: windowed && from === colStart,
+            windowed
+          },
+          k
+        )
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "contents", children: out });
+});
+var CellChunk = react.memo(function CellChunk2({
+  ctx,
+  r,
+  rowCells,
+  from,
+  to,
+  selStart,
+  selEnd,
+  activeCol,
+  place,
+  windowed
+}) {
+  const { baseId, rows, cols, states, marks, stateClass } = ctx;
+  const { cellId, ariaCell } = ctx.fns.current;
+  const out = [];
+  for (let c = from; c <= to; c++) {
     const cell = rowCells?.[c];
     const state = cell?.state ?? "";
     const selected = c >= selStart && c <= selEnd;
@@ -175,37 +229,40 @@ var TypedRow = react.memo(function TypedRow2({
     let cls = stateClass(state) + " " + (cell?.disabled ? CELL_DISABLED : CELL_ENABLED);
     if (selected) cls += " " + CELL_SELECTED;
     if (c === activeCol) cls += " " + CELL_ACTIVE;
-    out[c + 1] = /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        id: cellDomId(baseId, r, c),
-        role: "gridcell",
-        "data-react-fancy-timegrid-cell": cellId ? cellId(r, c) : `${r}:${c}`,
-        "data-state": state,
-        "data-marks": markIds?.length ? markIds.join(" ") : void 0,
-        "aria-selected": selected,
-        "aria-disabled": cell?.disabled ? true : void 0,
-        "aria-label": label,
-        "aria-description": reasons,
-        title: reasons,
-        className: cls,
-        style: { width: cellWidth, height: cellHeight },
-        children: markIds?.length ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute right-0 top-0 flex gap-px", children: markIds.map((m) => {
-          const def = marks[m];
-          return def?.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-timegrid-mark": m, className: "flex h-2.5 w-2.5 items-center justify-center [&>svg]:h-full [&>svg]:w-full", children: def.icon }, m) : /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "data-react-fancy-timegrid-mark": m,
-              className: `${MARK_DOT} ${def?.tone ? TONE_FILL[def.tone] : NEUTRAL_FILL}`
-            },
-            m
-          );
-        }) }) : null
-      },
-      c
+    out.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: cellDomId(baseId, r, c),
+          role: "gridcell",
+          "aria-colindex": windowed ? c + 2 : void 0,
+          style: place && c === from ? { gridColumnStart: c + 2 } : void 0,
+          "data-react-fancy-timegrid-cell": cellId ? cellId(r, c) : `${r}:${c}`,
+          "data-state": state,
+          "data-marks": markIds?.length ? markIds.join(" ") : void 0,
+          "aria-selected": selected,
+          "aria-disabled": cell?.disabled ? true : void 0,
+          "aria-label": label,
+          "aria-description": reasons,
+          title: reasons,
+          className: cls,
+          children: markIds?.length ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute right-0 top-0 flex gap-px", children: markIds.map((m) => {
+            const def = marks[m];
+            return def?.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-timegrid-mark": m, className: "flex h-2.5 w-2.5 items-center justify-center [&>svg]:h-full [&>svg]:w-full", children: def.icon }, m) : /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-react-fancy-timegrid-mark": m,
+                className: `${MARK_DOT} ${def?.tone ? TONE_FILL[def.tone] : NEUTRAL_FILL}`
+              },
+              m
+            );
+          }) }) : null
+        },
+        c
+      )
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "contents", children: out });
+  return out;
 });
 var TypedTimeGrid = react.forwardRef(function TypedTimeGrid2({
   rows,
@@ -227,6 +284,7 @@ var TypedTimeGrid = react.forwardRef(function TypedTimeGrid2({
   disabledRange = "clamp",
   onBlockedSelect,
   onCellHover,
+  windowColumns,
   "aria-label": ariaLabel
 }, ref) {
   if (!statesProp) {
@@ -254,6 +312,64 @@ var TypedTimeGrid = react.forwardRef(function TypedTimeGrid2({
   const anchorRef = react.useRef(null);
   const gestureRef = react.useRef(null);
   const hoverRef = react.useRef("");
+  const pitchX = cellWidth + 2;
+  const windowed = windowColumns ?? nCols > WINDOW_DEFAULT_ABOVE;
+  const metrics = react.useRef({ left: 0, width: 0, headerW: 0 });
+  const [win, setWin] = react.useState(null);
+  const visibleRange = react.useCallback(() => {
+    const { left, width, headerW } = metrics.current;
+    const first = Math.max(0, Math.floor((left - headerW) / pitchX));
+    const last = Math.min(nCols - 1, Math.max(first, Math.ceil((left + width - headerW) / pitchX)));
+    return [first, last];
+  }, [pitchX, nCols]);
+  const measure = react.useCallback(() => {
+    const el = outerRef.current;
+    if (!el) return;
+    const rh = el.querySelector('[role="rowheader"]');
+    metrics.current = {
+      left: el.scrollLeft,
+      width: el.clientWidth || (typeof window !== "undefined" ? window.innerWidth : 1024),
+      headerW: rh ? rh.offsetWidth + 2 : 0
+    };
+    const [first, last] = visibleRange();
+    const over = Math.max(WINDOW_MIN_OVERSCAN, Math.ceil((last - first) / 4));
+    const start = Math.max(0, Math.floor((first - over) / WINDOW_CHUNK) * WINDOW_CHUNK);
+    const end = Math.min(nCols - 1, Math.ceil((last + over + 1) / WINDOW_CHUNK) * WINDOW_CHUNK - 1);
+    setWin((w) => w && w.start === start && w.end === end ? w : { start, end });
+  }, [visibleRange, nCols]);
+  react.useLayoutEffect(() => {
+    if (!windowed) return;
+    measure();
+    const el = outerRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [windowed, measure]);
+  const onScroll = react.useCallback(() => reactDom.flushSync(measure), [measure]);
+  let colStart = 0;
+  let colEnd = nCols - 1;
+  if (windowed) {
+    colStart = win ? win.start : 0;
+    colEnd = win ? Math.min(win.end, nCols - 1) : -1;
+  }
+  const revealCol = react.useCallback(
+    (c) => {
+      const el = outerRef.current;
+      if (!el) return;
+      const { headerW } = metrics.current;
+      const width = el.clientWidth || metrics.current.width;
+      const x = headerW + c * pitchX;
+      let left = el.scrollLeft;
+      if (x < left + headerW) left = Math.max(0, x - headerW);
+      else if (x + pitchX > left + width) left = x + pitchX - width;
+      if (left !== el.scrollLeft) {
+        el.scrollLeft = left;
+        measure();
+      }
+    },
+    [pitchX, measure]
+  );
   const live = react.useRef({ cells, selection, selectionShape, disabledRange, onSelectionChange, onSelectionCommit, onBlockedSelect, onCellHover });
   live.current = { cells, selection, selectionShape, disabledRange, onSelectionChange, onSelectionCommit, onBlockedSelect, onCellHover };
   const fns = react.useRef({});
@@ -323,6 +439,23 @@ var TypedTimeGrid = react.forwardRef(function TypedTimeGrid2({
     },
     [cellsOf]
   );
+  const clampToGrid = react.useCallback(
+    (x, y) => {
+      const first = document.getElementById(cellDomId(baseId, 0, colStart));
+      const last = document.getElementById(cellDomId(baseId, nRows - 1, colEnd));
+      if (!first || !last) return null;
+      const a = first.getBoundingClientRect();
+      const b = last.getBoundingClientRect();
+      const w = (b.right - a.left) / (colEnd - colStart + 1);
+      const h = (b.bottom - a.top) / nRows;
+      if (!(w > 0) || !(h > 0)) return null;
+      return {
+        r: Math.min(nRows - 1, Math.max(0, Math.floor((y - a.top) / h))),
+        c: Math.min(nCols - 1, Math.max(0, colStart + Math.floor((x - a.left) / w)))
+      };
+    },
+    [baseId, nRows, nCols, colStart, colEnd]
+  );
   const coordFromEvent = react.useCallback(
     (e) => {
       const t = e.target;
@@ -334,23 +467,8 @@ var TypedTimeGrid = react.forwardRef(function TypedTimeGrid2({
       if (!hit) hit = clampToGrid(e.clientX, e.clientY);
       return hit;
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [baseId, nRows, nCols]
+    [baseId, clampToGrid]
   );
-  function clampToGrid(x, y) {
-    const first = document.getElementById(cellDomId(baseId, 0, 0));
-    const last = document.getElementById(cellDomId(baseId, nRows - 1, nCols - 1));
-    if (!first || !last) return null;
-    const a = first.getBoundingClientRect();
-    const b = last.getBoundingClientRect();
-    const w = (b.right - a.left) / nCols;
-    const h = (b.bottom - a.top) / nRows;
-    if (!(w > 0) || !(h > 0)) return null;
-    return {
-      r: Math.min(nRows - 1, Math.max(0, Math.floor((y - a.top) / h))),
-      c: Math.min(nCols - 1, Math.max(0, Math.floor((x - a.left) / w)))
-    };
-  }
   const onPointerDown = (e) => {
     if (e.button !== 0) return;
     const at = coordFromEvent(e);
@@ -481,13 +599,33 @@ var TypedTimeGrid = react.forwardRef(function TypedTimeGrid2({
     const b = el.getBoundingClientRect();
     setTipPos({ left: b.left - o.left + outer.scrollLeft, top: b.bottom - o.top + outer.scrollTop + 4 });
   }, [activeReasons, active.r, active.c, baseId]);
+  const reveal = react.useRef({ revealCol, windowed: windowed && !!win, visibleRange });
+  reveal.current = { revealCol, windowed: windowed && !!win, visibleRange };
   react.useEffect(() => {
     if (!focused) return;
+    if (reveal.current.windowed) {
+      reveal.current.revealCol(active.c);
+      return;
+    }
     const el = document.getElementById(cellDomId(baseId, active.r, active.c));
     el?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
   }, [focused, active.r, active.c, baseId]);
+  react.useEffect(() => {
+    const { windowed: w, visibleRange: vr, revealCol: rc } = reveal.current;
+    if (!w || !selection || gestureRef.current) return;
+    const [f, l] = vr();
+    let s0;
+    let s1;
+    if (selection.shape === "rectangle") {
+      s0 = selection.c1;
+      s1 = selection.c2;
+    } else if (selection.from.r === selection.to.r) {
+      s0 = selection.from.c;
+      s1 = selection.to.c;
+    } else return;
+    if (s1 < f || s0 > l) rc(s0);
+  }, [selection]);
   const colStep = Math.max(1, Math.floor(nCols / 6));
-  const pitchX = cellWidth + 2;
   const tipId = `${baseId}-tip`;
   const bodyRows = new Array(nRows);
   for (let r = 0; r < nRows; r++) {
@@ -501,17 +639,41 @@ var TypedTimeGrid = react.forwardRef(function TypedTimeGrid2({
         selStart: seg ? seg[0] : -1,
         selEnd: seg ? seg[1] : -2,
         activeCol: focused && active.r === r ? active.c : -1,
-        onRowHeader
+        onRowHeader,
+        colStart,
+        colEnd,
+        windowed
       },
       r
     );
   }
+  const gridTemplateColumns = `max-content repeat(${nCols}, ${pitchX}px)`;
+  const headerCols = [];
+  for (let c = colStart; c <= colEnd; c++) {
+    headerCols.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "columnheader",
+          "aria-colindex": windowed ? c + 2 : void 0,
+          style: windowed && c === colStart ? { gridColumnStart: c + 2 } : void 0,
+          "data-react-fancy-timegrid-col": c,
+          onClick: toggleStripsOnHeaderClick ? () => pickStrip({ r: 0, c }, { r: nRows - 1, c }) : void 0,
+          className: toggleStripsOnHeaderClick ? `${HEADER_COL} ${HEADER_HOVER}` : HEADER_COL,
+          children: sparseColLabels ? c % colStep === 0 ? cols[c] : "" : cols[c]
+        },
+        c
+      )
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: setOuterRef,
       "data-react-fancy-timegrid": "",
       "data-typed": "",
+      "data-windowed": windowed ? "" : void 0,
+      onScroll: windowed ? onScroll : void 0,
       className: chunkZU5Q77OT_cjs.cn("relative select-none overflow-x-auto", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -536,21 +698,15 @@ var TypedTimeGrid = react.forwardRef(function TypedTimeGrid2({
             onFocus: () => setFocused(true),
             onBlur: () => setFocused(false),
             className: "inline-grid touch-none items-center outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:focus-visible:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20",
-            style: { gridTemplateColumns: `max-content repeat(${nCols}, ${pitchX}px)` },
+            style: {
+              gridTemplateColumns,
+              "--tg-cell-w": `${cellWidth}px`,
+              "--tg-cell-h": `${cellHeight}px`
+            },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "row", className: "contents", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { role: "columnheader" }),
-                cols.map((label, c) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    role: "columnheader",
-                    "data-react-fancy-timegrid-col": c,
-                    onClick: toggleStripsOnHeaderClick ? () => pickStrip({ r: 0, c }, { r: nRows - 1, c }) : void 0,
-                    className: toggleStripsOnHeaderClick ? `${HEADER_COL} ${HEADER_HOVER}` : HEADER_COL,
-                    children: sparseColLabels ? c % colStep === 0 ? label : "" : label
-                  },
-                  c
-                ))
+                headerCols
               ] }),
               bodyRows
             ]
@@ -701,5 +857,5 @@ TimeGrid.displayName = "TimeGrid";
 BooleanTimeGrid.displayName = "BooleanTimeGrid";
 
 exports.TimeGrid = TimeGrid;
-//# sourceMappingURL=chunk-XO4UWQCU.cjs.map
-//# sourceMappingURL=chunk-XO4UWQCU.cjs.map
+//# sourceMappingURL=chunk-4DL2U23D.cjs.map
+//# sourceMappingURL=chunk-4DL2U23D.cjs.map