@charcuterie/ui 3.34.0 → 4.1.0

package/dist/ActionTiles/ActionTiles.d.ts

@@ -1,6 +1,20 @@
-import type { ControlSize } from "@charcuterie/tokens";
+import type { CategoricalIndex, ControlSize } from "@charcuterie/tokens";
 import type { ReactNode } from "react";
 export type ActionTileItem = {
+    /**
+     * Which of the ten hues this tile wears, overriding the one its
+     * position would have given it.
+     *
+     * Reach for it when a tile's colour means something outside the
+     * set — a destination that is red everywhere else in the app, a
+     * pair that must not drift apart when a third tile is inserted
+     * between them. An overridden tile keeps its hue and the rest go
+     * on walking the palette in order, so naming one does not force
+     * naming all of them.
+     *
+     * Ignored when the set is `accent="none"`.
+     */
+    categorical?: CategoricalIndex;
     /**
      * A line of help under the name. Drawn one step down the type ramp
      * in `content-muted`, **inside** the tile — so `getByRole` computes
@@ -20,10 +34,15 @@ export type ActionTileItem = {
      */
     href?: string;
     /**
-     * Leading content, above the name. A `Badge`, an app's own icon, a
-     * count.
+     * Leading content, drawn **beside** the name rather than above it.
+     * A glyph, a `Badge`, a count.
      *
-     * `aria-hidden` by construction: the name it sits above is inside
+     * Takes the tile's hue, so an app passes a `stroke="currentColor"`
+     * path and states no colour of its own. Size is the app's: around
+     * 22px at `md` and 30px at `lg` reads the way the fleet's
+     * hand-rolled tool cards did.
+     *
+     * `aria-hidden` by construction: the name it sits beside is inside
      * the same tile, so an announced icon is the label read twice.
      */
     icon?: ReactNode;
@@ -40,7 +59,22 @@ export type ActionTileItem = {
      */
     value: string;
 };
+/**
+ * Where a tile's colour comes from.
+ *
+ *  - `auto` — the set walks the ten-hue categorical palette in
+ *    order, so eight tiles get eight colours and no call site does
+ *    any work. An item may still name its own with `categorical`.
+ *  - `none` — no bar, no hue, and the neutral `border-strong`
+ *    hover every other box uses.
+ */
+export type ActionTilesAccent = "auto" | "none";
 export type ActionTilesProps = {
+    /**
+     * Whether the set colours itself. `auto` by default — see
+     * {@link ActionTilesAccent}.
+     */
+    accent?: ActionTilesAccent;
     className?: string;
     items: readonly ActionTileItem[];
     /** The set's accessible name. Required. */
@@ -59,9 +93,9 @@ export type ActionTilesProps = {
     size?: ControlSize;
 };
 /**
- * A set of ACTIONS drawn as tiles — a bordered card carrying a name
- * and a line of help, in a grid that gains columns with its
- * container.
+ * A set of ACTIONS drawn as tiles — a bordered card carrying a
+ * colour bar, an icon beside its name, and a line of help, in a
+ * grid that gains columns with its container.
  *
  * This is `RadioGroup`'s `itemShape="tile"` with the radio taken
  * away. The
@@ -90,6 +124,30 @@ export type ActionTilesProps = {
  * why QueuePilot's "Queue type" chooser is here and its Tonight
  * activity filter is not.
  *
+ * ### The colour is the point, and it is not decoration
+ *
+ * The first version of this component was neutral, and the owner's
+ * verdict on it was *"very boring, not colorful"*. Three apps had
+ * already answered the question themselves — mux-magic, Gallery
+ * Downloader and points-market all colour their tiles by hand — so
+ * the paint is now the library's and every one of them can stop.
+ *
+ * A tile wears a **bar down its leading edge**, drawn by `Card`'s
+ * accent-edge pseudo-element so a tile and a card on the same page
+ * are the same bar rather than two that nearly match. Its icon takes
+ * the same hue, and the box hovers in it too. The hue comes from the
+ * ten-wide categorical palette, taken **in order**, which is why a
+ * set of eight needs no colour props at all. See
+ * [the tile paint record](../../../../docs/decisions/2026-09-02-an-action-tile-is-coloured-and-the-icon-sits-beside-the-name.md)
+ * for the four other paints that were drawn and rejected.
+ *
+ * `categorical` and not `intent`, for the reason
+ * [`cardAccentEdge.ts`](../Card/cardAccentEdge.ts) gives: an intent
+ * is a *claim* — `danger` says what happens if you press the thing —
+ * and "Builder" beside "Jobs" is making no claim about either. Ten
+ * numbered hues say only "these are different from each other",
+ * which is exactly what a tile set means.
+ *
  * ### Why this is not a `Button` with a `className`
  *
  * A `Button` is sized by `h-(--control-height-md)` and carries **no
@@ -111,5 +169,5 @@ export type ActionTilesProps = {
  * true, so imposing that model would only cost a keyboard user the
  * ability to Tab to the second tile.
  */
-export declare const ActionTiles: ({ className, items, label, minTileInlineSize, newTabLabel, onChoose, size, }: ActionTilesProps) => ReactNode;
+export declare const ActionTiles: ({ accent, className, items, label, minTileInlineSize, newTabLabel, onChoose, size, }: ActionTilesProps) => ReactNode;
 //# sourceMappingURL=ActionTiles.d.ts.map

package/dist/ActionTiles/ActionTiles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionTiles.d.ts","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBrD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,WAAW,GAAI,8EAQzB,gBAAgB,KAAG,SAwJrB,CAAA"}
+{"version":3,"file":"ActionTiles.d.ts","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAK5B,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAwBrD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAA;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AA4CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,eAAO,MAAM,WAAW,GAAI,sFASzB,gBAAgB,KAAG,SAwMrB,CAAA"}

package/dist/ActionTiles/ActionTiles.js

@@ -1,14 +1,50 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CATEGORICAL_INDEX_COUNT, CATEGORICAL_INDEXES, } from "@charcuterie/tokens";
+import { getAccentEdgeClassName } from "../Card/cardAccentEdge.js";
+import { CATEGORICAL_CONTENT_CLASS, CATEGORICAL_HOVER_BORDER_CLASS, CATEGORICAL_HOVER_CLASS, } from "../categoricalStyles.js";
 import { FOCUS_RING_CLASS } from "../intentStyles.js";
 import { useRouterLink } from "../RouterLink/RouterLinkProvider.js";
 import { getIsRoutedHref } from "../RouterLink/routerLink.js";
-import { TILE_BOX_CLASS, TILE_COLUMNS_CLASS, TILE_GAP_CLASS, TILE_HINT_TEXT_CLASS, TILE_MIN_INLINE_SIZE_PROPERTY, TILE_PADDING_CLASS, TILE_TEXT_SIZE_CLASS, } from "../tileStyles.js";
+import { TILE_ACCENT_EDGE_PADDING_CLASS, TILE_BOX_CLASS, TILE_COLUMNS_CLASS, TILE_GAP_CLASS, TILE_HINT_TEXT_CLASS, TILE_MIN_INLINE_SIZE_PROPERTY, TILE_PADDING_CLASS, TILE_TEXT_SIZE_CLASS, } from "../tileStyles.js";
 import { toClassName } from "../toClassName.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 /**
- * A set of ACTIONS drawn as tiles — a bordered card carrying a name
- * and a line of help, in a grid that gains columns with its
- * container.
+ * The gap between the icon and the name it sits beside.
+ *
+ * Local to this component rather than in `tileStyles.ts`, because a
+ * radio tile's inner layout is a control beside a label and has no
+ * head row to space. The shared file owns the BOX; this is what goes
+ * in it.
+ */
+const HEAD_GAP_CLASS = {
+    sm: "gap-2",
+    md: "gap-2.5",
+    lg: "gap-3",
+};
+/** The gap between the head row and the hint under it. */
+const STACK_GAP_CLASS = {
+    sm: "gap-1",
+    md: "gap-1",
+    lg: "gap-2",
+};
+/**
+ * The hue a tile wears when it did not name one: its position in
+ * the set, wrapping at ten.
+ *
+ * Position rather than `getCategoricalIndex(value)`. That helper
+ * hashes a key so a row keeps its colour forever across a list
+ * nobody controls the order of — right for Docket's labels, wrong
+ * here, because a hash of two tile values can collide and hand a
+ * two-tile set the same colour twice. A tile set is short, ordered,
+ * and written out in the source; the eye reads it as a row, so the
+ * palette is walked as one.
+ */
+const getTileCategorical = (item, position) => item.categorical ??
+    CATEGORICAL_INDEXES[position % CATEGORICAL_INDEX_COUNT];
+/**
+ * A set of ACTIONS drawn as tiles — a bordered card carrying a
+ * colour bar, an icon beside its name, and a line of help, in a
+ * grid that gains columns with its container.
  *
  * This is `RadioGroup`'s `itemShape="tile"` with the radio taken
  * away. The
@@ -37,6 +73,30 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
  * why QueuePilot's "Queue type" chooser is here and its Tonight
  * activity filter is not.
  *
+ * ### The colour is the point, and it is not decoration
+ *
+ * The first version of this component was neutral, and the owner's
+ * verdict on it was *"very boring, not colorful"*. Three apps had
+ * already answered the question themselves — mux-magic, Gallery
+ * Downloader and points-market all colour their tiles by hand — so
+ * the paint is now the library's and every one of them can stop.
+ *
+ * A tile wears a **bar down its leading edge**, drawn by `Card`'s
+ * accent-edge pseudo-element so a tile and a card on the same page
+ * are the same bar rather than two that nearly match. Its icon takes
+ * the same hue, and the box hovers in it too. The hue comes from the
+ * ten-wide categorical palette, taken **in order**, which is why a
+ * set of eight needs no colour props at all. See
+ * [the tile paint record](../../../../docs/decisions/2026-09-02-an-action-tile-is-coloured-and-the-icon-sits-beside-the-name.md)
+ * for the four other paints that were drawn and rejected.
+ *
+ * `categorical` and not `intent`, for the reason
+ * [`cardAccentEdge.ts`](../Card/cardAccentEdge.ts) gives: an intent
+ * is a *claim* — `danger` says what happens if you press the thing —
+ * and "Builder" beside "Jobs" is making no claim about either. Ten
+ * numbered hues say only "these are different from each other",
+ * which is exactly what a tile set means.
+ *
  * ### Why this is not a `Button` with a `className`
  *
  * A `Button` is sized by `h-(--control-height-md)` and carries **no
@@ -58,11 +118,15 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
  * true, so imposing that model would only cost a keyboard user the
  * ability to Tab to the second tile.
  */
-export const ActionTiles = ({ className, items, label, minTileInlineSize = 200, newTabLabel = "(opens in a new tab)", onChoose, size = "md", }) => {
+export const ActionTiles = ({ accent = "auto", className, items, label, minTileInlineSize = 200, newTabLabel = "(opens in a new tab)", onChoose, size = "md", }) => {
     const RouterLink = useRouterLink();
     return (_jsx("div", { "aria-label": label, className: toClassName("grid", TILE_COLUMNS_CLASS, TILE_GAP_CLASS[size], className), role: "group", style: {
             [TILE_MIN_INLINE_SIZE_PROPERTY]: `${minTileInlineSize}px`,
-        }, children: items.map(({ hint, href, icon, isDisabled = false, isExternal = false, label: tileLabel, value, }) => {
+        }, children: items.map((item, position) => {
+            const { hint, href, icon, isDisabled = false, isExternal = false, label: tileLabel, value, } = item;
+            const categorical = accent === "none"
+                ? null
+                : getTileCategorical(item, position);
             const tileClassName = toClassName(
             // `flex`, not `inline-flex`: a grid item stretches to its
             // track, and an inline box would sit at max-content
@@ -71,15 +135,28 @@ export const ActionTiles = ({ className, items, label, minTileInlineSize = 200,
             // min-content width — one unbroken token would otherwise
             // set the track's floor and shove the grid out of its
             // container.
-            "flex min-w-0 flex-col gap-0.5 text-start wrap-anywhere transition-colors duration-(--duration-fast) ease-standard", TILE_BOX_CLASS, TILE_PADDING_CLASS[size], TILE_TEXT_SIZE_CLASS[size], 
+            "flex min-w-0 flex-col text-start wrap-anywhere transition-colors duration-(--duration-fast) ease-standard", STACK_GAP_CLASS[size], TILE_BOX_CLASS, TILE_PADDING_CLASS[size], TILE_TEXT_SIZE_CLASS[size], 
+            // The bar is an overlay and takes no space in the box
+            // model, so the tile makes room for it or the text lands
+            // on top of it.
+            categorical === null
+                ? null
+                : toClassName(getAccentEdgeClassName({ categorical }), TILE_ACCENT_EDGE_PADDING_CLASS[size]), 
             // Disabled turns the whole tile down with `opacity-60`,
             // the same family treatment as `Checkbox`, `Switch` and
             // the radio tile, rather than fading the border to a
-            // token that disappeared on a pale theme.
+            // token that disappeared on a pale theme. It also drops
+            // every hover class: a tile that cannot be pressed must
+            // not light up under the pointer.
             isDisabled
                 ? "cursor-not-allowed opacity-60"
-                : "cursor-pointer hover:border-border-strong", FOCUS_RING_CLASS);
-            const content = (_jsxs(_Fragment, { children: [icon === undefined ? null : (_jsx("span", { "aria-hidden": true, className: "flex", children: icon })), _jsx("span", { className: "font-semibold text-content-primary", children: tileLabel }), hint === undefined ? null : (_jsx("span", { className: toClassName("font-normal text-content-muted", TILE_HINT_TEXT_CLASS[size]), children: hint })), isExternal && href !== undefined ? (_jsx(VisuallyHidden, { children: newTabLabel })) : null] }));
+                : toClassName("cursor-pointer", categorical === null
+                    ? "hover:border-border-strong"
+                    : toClassName(CATEGORICAL_HOVER_BORDER_CLASS[categorical], CATEGORICAL_HOVER_CLASS[categorical]
+                        .ghost)), FOCUS_RING_CLASS);
+            const content = (_jsxs(_Fragment, { children: [_jsxs("span", { className: toClassName("flex min-w-0 items-center", HEAD_GAP_CLASS[size]), children: [icon === undefined ? null : (_jsx("span", { "aria-hidden": true, className: toClassName("flex shrink-0", categorical === null
+                                    ? null
+                                    : CATEGORICAL_CONTENT_CLASS[categorical]), children: icon })), _jsx("span", { className: "min-w-0 font-semibold text-content-primary", children: tileLabel })] }), hint === undefined ? null : (_jsx("span", { className: toClassName("font-normal text-content-muted", TILE_HINT_TEXT_CLASS[size]), children: hint })), isExternal && href !== undefined ? (_jsx(VisuallyHidden, { children: newTabLabel })) : null] }));
             if (href !== undefined && !isDisabled) {
                 // An external destination or a fragment is never the
                 // router's — pushing `https://…` or `#credits` onto the

package/dist/ActionTiles/ActionTiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionTiles.js","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionTiles.js","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"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"}

package/dist/Main/Main.d.ts

@@ -2,16 +2,6 @@ import { type ComponentPropsWithRef, type ReactNode } from "react";
 import { type ContentWidth } from "../Shell/contentWidth.ts";
 export type MainProps = ComponentPropsWithRef<"main"> & {
     contentWidth?: ContentWidth;
-    /**
-     * The history entry this page belongs to — react-router's
-     * `useLocation().key`, and the same value under a different
-     * router. Given it, `<main>` remembers where each entry was
-     * scrolled to and puts the offset back on Back and Forward.
-     *
-     * Omit it and nothing is remembered, which is the right default
-     * for a page with no history to remember.
-     */
-    scrollKey?: string;
 };
 /**
  * The `<main>` landmark and the content column.
@@ -102,18 +92,27 @@ export type MainProps = ComponentPropsWithRef<"main"> & {
  * therefore lands at the top of a list the reader had scrolled
  * half-way down, and no browser setting changes that.
  *
- * Pass `scrollKey` — react-router's `useLocation().key` — and the
- * offset comes back. `useScrollMemory.ts` holds the mechanism and
- * `scrollMemory.ts` the reasoning.
+ * So this element remembers it, and **there is no prop for it**.
+ * The history entry arrives on `ScrollMemoryContext`, which
+ * `ReactRouterAdapter` puts at the app root:
  *
  * ```tsx
- * const location = useLocation()
- *
- * <Main scrollKey={location.key}>
- *   <Outlet />
- * </Main>
+ * <BrowserRouter>
+ *   <ReactRouterAdapter>
+ *     <Routes>…</Routes>
+ *   </ReactRouterAdapter>
+ * </BrowserRouter>
  * ```
  *
+ * It was a prop for one release — `scrollKey` — and that release is
+ * the argument against a prop. One app wired it; the other three
+ * carried on losing the reader's place with the library sitting
+ * right there supporting it. Render no provider and nothing is
+ * remembered, which is what an app with no router should get.
+ *
+ * `useScrollMemory.ts` holds the mechanism and `scrollMemory.ts`
+ * the reasoning.
+ *
  * ## Two more things it does, both one line
  *
  * `tabIndex={-1}` so `Shell`'s skip link moves **focus** and not
@@ -143,5 +142,5 @@ export type MainProps = ComponentPropsWithRef<"main"> & {
  * wrap, so a wide one goes in an `overflow-x-auto` wrapper, which
  * `Main.mdx` shows.
  */
-export declare const Main: ({ children, className, contentWidth, id, ref, scrollKey, ...mainProps }: MainProps) => ReactNode;
+export declare const Main: ({ children, className, contentWidth, id, ref, ...mainProps }: MainProps) => ReactNode;
 //# sourceMappingURL=Main.d.ts.map

package/dist/Main/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAEd,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,0BAA0B,CAAA;AAKjC,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACtD,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiIG;AACH,eAAO,MAAM,IAAI,GAAI,yEAQlB,SAAS,KAAG,SAyDd,CAAA"}
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAEd,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,0BAA0B,CAAA;AAMjC,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACtD,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,eAAO,MAAM,IAAI,GAAI,8DAOlB,SAAS,KAAG,SA0Dd,CAAA"}

package/dist/Main/Main.js

@@ -4,6 +4,7 @@ import { useContext, } from "react";
 import { DEFAULT_CONTENT_WIDTH, toMaxInlineSize, } from "../Shell/contentWidth.js";
 import { ShellContext } from "../Shell/shellContext.js";
 import { toClassName } from "../toClassName.js";
+import { ScrollMemoryContext } from "./scrollMemoryContext.js";
 import { useScrollMemory } from "./useScrollMemory.js";
 /**
  * The `<main>` landmark and the content column.
@@ -94,18 +95,27 @@ import { useScrollMemory } from "./useScrollMemory.js";
  * therefore lands at the top of a list the reader had scrolled
  * half-way down, and no browser setting changes that.
  *
- * Pass `scrollKey` — react-router's `useLocation().key` — and the
- * offset comes back. `useScrollMemory.ts` holds the mechanism and
- * `scrollMemory.ts` the reasoning.
+ * So this element remembers it, and **there is no prop for it**.
+ * The history entry arrives on `ScrollMemoryContext`, which
+ * `ReactRouterAdapter` puts at the app root:
  *
  * ```tsx
- * const location = useLocation()
- *
- * <Main scrollKey={location.key}>
- *   <Outlet />
- * </Main>
+ * <BrowserRouter>
+ *   <ReactRouterAdapter>
+ *     <Routes>…</Routes>
+ *   </ReactRouterAdapter>
+ * </BrowserRouter>
  * ```
  *
+ * It was a prop for one release — `scrollKey` — and that release is
+ * the argument against a prop. One app wired it; the other three
+ * carried on losing the reader's place with the library sitting
+ * right there supporting it. Render no provider and nothing is
+ * remembered, which is what an app with no router should get.
+ *
+ * `useScrollMemory.ts` holds the mechanism and `scrollMemory.ts`
+ * the reasoning.
+ *
  * ## Two more things it does, both one line
  *
  * `tabIndex={-1}` so `Shell`'s skip link moves **focus** and not
@@ -135,9 +145,10 @@ import { useScrollMemory } from "./useScrollMemory.js";
  * wrap, so a wide one goes in an `overflow-x-auto` wrapper, which
  * `Main.mdx` shows.
  */
-export const Main = ({ children, className, contentWidth, id, ref, scrollKey, ...mainProps }) => {
+export const Main = ({ children, className, contentWidth, id, ref, ...mainProps }) => {
     const shell = useContext(ShellContext);
-    const setScrollport = useScrollMemory(scrollKey);
+    const scrollEntry = useContext(ScrollMemoryContext);
+    const setScrollport = useScrollMemory(scrollEntry);
     // Always called, never conditionally: a `Main` outside a `Shell`
     // still needs an id an app can point its own skip link at.
     const fallbackId = useUniqueId();

package/dist/Main/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,SAAS,EACT,WAAW,GACZ,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAIL,UAAU,GACX,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,qBAAqB,EACrB,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAgBtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,EAAE,EACF,GAAG,EACH,SAAS,EACT,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACtC,MAAM,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,CAAA;IAEhD,iEAAiE;IACjE,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,EAAE,CAAA;IAEhC,MAAM,aAAa,GAAG,eAAe,CACnC,YAAY;QACV,KAAK,EAAE,YAAY;QACnB,qBAAqB,CACxB,CAAA;IAED,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,6GAA6G,EAC7G,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,MAAM,IAAI,UAAU;QACrC,0DAA0D;QAC1D,2DAA2D;QAC3D,EAAE;QACF,yDAAyD;QACzD,8DAA8D;QAC9D,qBAAqB;QACrB,GAAG,EACD,GAAG;YACD,CAAC,CAAE,SAAS,CACR,GAAmB,EACnB,aAAa,CACe;YAChC,CAAC,CAAC,aAAa,EAEnB,QAAQ,EAAE,CAAC,CAAC,YAaZ,cACE,SAAS,EAAC,uFAAuF,EACjG,KAAK,EAAE,EAAE,aAAa,EAAE,YAEvB,QAAQ,GACL,GACD,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,SAAS,EACT,WAAW,GACZ,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAIL,UAAU,GACX,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,qBAAqB,EACrB,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAMtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,EAAE,EACF,GAAG,EACH,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACtC,MAAM,WAAW,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAA;IACnD,MAAM,aAAa,GAAG,eAAe,CAAC,WAAW,CAAC,CAAA;IAElD,iEAAiE;IACjE,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,EAAE,CAAA;IAEhC,MAAM,aAAa,GAAG,eAAe,CACnC,YAAY;QACV,KAAK,EAAE,YAAY;QACnB,qBAAqB,CACxB,CAAA;IAED,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,6GAA6G,EAC7G,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,MAAM,IAAI,UAAU;QACrC,0DAA0D;QAC1D,2DAA2D;QAC3D,EAAE;QACF,yDAAyD;QACzD,8DAA8D;QAC9D,qBAAqB;QACrB,GAAG,EACD,GAAG;YACD,CAAC,CAAE,SAAS,CACR,GAAmB,EACnB,aAAa,CACe;YAChC,CAAC,CAAC,aAAa,EAEnB,QAAQ,EAAE,CAAC,CAAC,YAaZ,cACE,SAAS,EAAC,uFAAuF,EACjG,KAAK,EAAE,EAAE,aAAa,EAAE,YAEvB,QAAQ,GACL,GACD,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/Main/ScrollMemoryProvider.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import type { ScrollEntry } from "./scrollMemory.ts";
+export type ScrollMemoryProviderProps = {
+    children?: ReactNode;
+    /**
+     * The history entry the page is showing, and the path it belongs
+     * to. Under react-router both come straight off `useLocation()`.
+     */
+    entry: ScrollEntry;
+};
+/**
+ * Tell every `Main` below this which history entry it is showing,
+ * so Back and Forward return the reader to where they were.
+ *
+ * An app that uses react-router should not render this directly —
+ * `ReactRouterAdapter` in the `./react-router` subpath wires it,
+ * along with the link seam, in one component at the root. This is
+ * the router-free half, for an app on a different router:
+ *
+ * ```tsx
+ * const [location] = useLocation()   // wouter, say
+ *
+ * <ScrollMemoryProvider
+ *   entry={{ key: historyKey, path: location }}
+ * >
+ *   <App />
+ * </ScrollMemoryProvider>
+ * ```
+ *
+ * **`key` must identify the history entry, not the URL.** Two visits
+ * to the same list are two entries and the reader may leave them at
+ * different offsets; a key derived from the path would give the
+ * second visit the first one's position and could not tell Back from
+ * Forward. A router that exposes no such key can pass a counter it
+ * increments on every push and restores on every pop.
+ */
+export declare const ScrollMemoryProvider: ({ children, entry, }: ScrollMemoryProviderProps) => ReactNode;
+//# sourceMappingURL=ScrollMemoryProvider.d.ts.map

package/dist/Main/ScrollMemoryProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollMemoryProvider.d.ts","sourceRoot":"","sources":["../../src/Main/ScrollMemoryProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGpD,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;OAGG;IACH,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,oBAAoB,GAAI,sBAGlC,yBAAyB,KAAG,SAI9B,CAAA"}

package/dist/Main/ScrollMemoryProvider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScrollMemoryContext } from "./scrollMemoryContext.js";
+/**
+ * Tell every `Main` below this which history entry it is showing,
+ * so Back and Forward return the reader to where they were.
+ *
+ * An app that uses react-router should not render this directly —
+ * `ReactRouterAdapter` in the `./react-router` subpath wires it,
+ * along with the link seam, in one component at the root. This is
+ * the router-free half, for an app on a different router:
+ *
+ * ```tsx
+ * const [location] = useLocation()   // wouter, say
+ *
+ * <ScrollMemoryProvider
+ *   entry={{ key: historyKey, path: location }}
+ * >
+ *   <App />
+ * </ScrollMemoryProvider>
+ * ```
+ *
+ * **`key` must identify the history entry, not the URL.** Two visits
+ * to the same list are two entries and the reader may leave them at
+ * different offsets; a key derived from the path would give the
+ * second visit the first one's position and could not tell Back from
+ * Forward. A router that exposes no such key can pass a counter it
+ * increments on every push and restores on every pop.
+ */
+export const ScrollMemoryProvider = ({ children, entry, }) => (_jsx(ScrollMemoryContext.Provider, { value: entry, children: children }));
+//# sourceMappingURL=ScrollMemoryProvider.js.map

package/dist/Main/ScrollMemoryProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollMemoryProvider.js","sourceRoot":"","sources":["../../src/Main/ScrollMemoryProvider.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAW9D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,KAAK,GACqB,EAAa,EAAE,CAAC,CAC1C,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACvC,QAAQ,GACoB,CAChC,CAAA"}

package/dist/Main/scrollMemory.d.ts

@@ -1,40 +1,66 @@
 /**
- * What the browser will not remember for you.
- *
- * `Shell` gives `<main>` the page's only vertical scrollport, so
- * the header and the rails stay put while the content moves —
- * that is the whole reason `Shell.test.tsx` asserts "only main
- * scrolls vertically, keeping the rail available".
- *
- * It costs exactly one thing, and this module is it. A browser
- * remembers **the document scroller's** offset per history entry
- * and puts it back on Back. It does that for a cross-document
- * load, and `history.scrollRestoration` is the switch for it. It
- * does **not** do it for an arbitrary element with
- * `overflow-y: auto`, and it does not do it at all for a
- * same-document `pushState` navigation, which is every link press
- * in a single-page app. So a page that scrolls its own `<main>`
- * loses the reader's place on Back, and no browser setting brings
- * it back:
+ * What the browser will not remember for you, and the one thing it
+ * would never have got wrong.
+ *
+ * `Shell` gives `<main>` the page's only vertical scrollport, so the
+ * header and the rails stay put while the content moves — that is
+ * what `Shell.test.tsx` asserts. It costs exactly one thing, and
+ * this module is it. A browser remembers **the document scroller's**
+ * offset per history entry and puts it back on Back. It does not do
+ * that for an arbitrary element with `overflow-y: auto`, and it does
+ * not do it at all for a same-document `pushState` navigation, which
+ * is every link press in a single-page app:
  *
  * > *"If I scroll, click on an item, then go back, it resets me to
  * > the top. […] It should remember where the scroll position was
  * > previously. Isn't this handled by Chrome already?"*
  *
- * The offsets are held **in memory**, not in `sessionStorage`. A
- * history key survives a reload, but the DOM it described does
- * not: the app re-fetches, re-measures and often re-orders, so a
- * pixel offset from before the reload points at a different row.
- * Restoring a stale number is worse than restoring nothing,
- * because it looks deliberate.
+ * ## An entry remembers its PATH as well as its offset
+ *
+ * Not decoration — the second field is what keeps this from being a
+ * worse bug than the one it fixes. A history entry is not a page. A
+ * filter chip, an expanded group, a selected tab: each writes a
+ * search param, and **`setSearchParams` navigates**, so each mints a
+ * history entry the memory has never seen. Treating an unseen entry
+ * as "start at the top" therefore threw the reader to the top of the
+ * list every time they opened a group — which is exactly what
+ * shipped, and what the path comparison exists to prevent.
+ *
+ * So the rule is about the PAGE, not the entry:
+ *
+ *  - **An entry we have seen** → its remembered offset. This is the
+ *    whole feature: Back and Forward land where you left them.
+ *  - **A new entry on the SAME path** → leave the scrollport alone.
+ *    A search param changed; the reader did not go anywhere. This is
+ *    also precisely what the app did before this memory existed, so
+ *    it can never be a regression.
+ *  - **A new entry on a DIFFERENT path** → the top. A page you have
+ *    not seen starts at its beginning, which is what a browser does
+ *    for a document.
+ *
+ * ## The offsets are in memory, never `sessionStorage`
+ *
+ * A history key survives a reload; the DOM it described does not.
+ * The app re-fetches, re-measures and often re-orders, so a pixel
+ * offset from before the reload points at a different row. Restoring
+ * a stale number is worse than restoring nothing, because it looks
+ * deliberate.
  */
-export declare const rememberScrollOffset: (key: string, offset: number) => void;
+export type ScrollEntry = {
+    /** The history entry — react-router's `useLocation().key`. */
+    key: string;
+    /** The page it belongs to — `useLocation().pathname`. */
+    path: string;
+};
+export declare const rememberScrollOffset: (entry: ScrollEntry, offset: number) => void;
 /**
- * `0` for an entry nobody has scrolled, which is also the right
- * answer for an entry nobody has *seen* — a link press lands at
- * the top of the new page.
+ * Where the scrollport should go for this entry, or `null` for
+ * **leave it alone** — which is a third answer rather than a missing
+ * one, and the difference between a search param and a page.
  */
-export declare const recallScrollOffset: (key: string) => number;
+export declare const resolveScrollOffset: (entry: ScrollEntry) => number | null;
+/** Called by the hook once it owns the scrollport for this entry. */
+export declare const enterScrollEntry: (entry: ScrollEntry) => void;
 /** Test-only. Module state outlives a mount; a test must not. */
 export declare const forgetScrollOffsets: () => void;
 //# sourceMappingURL=scrollMemory.d.ts.map

package/dist/Main/scrollMemory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scrollMemory.d.ts","sourceRoot":"","sources":["../../src/Main/scrollMemory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAaH,eAAO,MAAM,oBAAoB,GAC/B,KAAK,MAAM,EACX,QAAQ,MAAM,SAef,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,WACb,CAAA;AAEjC,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,YAE/B,CAAA"}
+{"version":3,"file":"scrollMemory.d.ts","sourceRoot":"","sources":["../../src/Main/scrollMemory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAUH,MAAM,MAAM,WAAW,GAAG;IACxB,8DAA8D;IAC9D,GAAG,EAAE,MAAM,CAAA;IACX,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAkBD,eAAO,MAAM,oBAAoB,GAC/B,OAAO,WAAW,EAClB,QAAQ,MAAM,SAkBf,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,WAAW,kBAYrD,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,gBAAgB,GAAI,OAAO,WAAW,SAElD,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,YAG/B,CAAA"}