@charcuterie/ui 3.34.0 → 4.1.0

package/dist/Main/scrollMemory.js

@@ -1,63 +1,104 @@
 /**
- * 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.
  */
 /**
  * How many history entries keep an offset. A reader goes back
  * through a handful of screens, never fifty, so this is a ceiling
  * against a long session rather than a working set — the map holds
- * one small number per entry and evicts the least recently
- * written.
+ * one small record per entry and evicts the least recently written.
  */
 const REMEMBERED_ENTRY_LIMIT = 50;
-const rememberedOffsets = new Map();
-export const rememberScrollOffset = (key, offset) => {
-    // Delete before set, so insertion order is least-recent-first
-    // and the eviction below takes the right one. A plain `set` on
-    // an existing key keeps its original position.
-    rememberedOffsets.delete(key);
-    rememberedOffsets.set(key, offset);
-    for (const oldestKey of rememberedOffsets.keys()) {
-        if (rememberedOffsets.size <= REMEMBERED_ENTRY_LIMIT) {
+const rememberedEntries = new Map();
+/**
+ * The entry the scrollport is showing. Module state rather than a
+ * ref, because the question it answers — *did the reader change page
+ * or only a search param?* — is asked by the incoming entry's effect
+ * about the OUTGOING one, and by then the outgoing effect has
+ * already been cleaned up.
+ */
+let currentEntry = null;
+export const rememberScrollOffset = (entry, offset) => {
+    // Delete before set, so insertion order is least-recent-first and
+    // the eviction below takes the right one. A plain `set` on an
+    // existing key keeps its original position.
+    rememberedEntries.delete(entry.key);
+    rememberedEntries.set(entry.key, {
+        offset,
+        path: entry.path,
+    });
+    for (const oldestKey of rememberedEntries.keys()) {
+        if (rememberedEntries.size <= REMEMBERED_ENTRY_LIMIT) {
             break;
         }
-        rememberedOffsets.delete(oldestKey);
+        rememberedEntries.delete(oldestKey);
     }
 };
 /**
- * `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 const recallScrollOffset = (key) => rememberedOffsets.get(key) ?? 0;
+export const resolveScrollOffset = (entry) => {
+    const remembered = rememberedEntries.get(entry.key);
+    if (remembered) {
+        return remembered.offset;
+    }
+    const isSamePage = currentEntry !== null &&
+        currentEntry.path === entry.path;
+    return isSamePage ? null : 0;
+};
+/** Called by the hook once it owns the scrollport for this entry. */
+export const enterScrollEntry = (entry) => {
+    currentEntry = entry;
+};
 /** Test-only. Module state outlives a mount; a test must not. */
 export const forgetScrollOffsets = () => {
-    rememberedOffsets.clear();
+    rememberedEntries.clear();
+    currentEntry = null;
 };
 //# sourceMappingURL=scrollMemory.js.map

package/dist/Main/scrollMemory.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollMemory.js","sourceRoot":"","sources":["../../src/Main/scrollMemory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH;;;;;;GAMG;AACH,MAAM,sBAAsB,GAAG,EAAE,CAAA;AAEjC,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAkB,CAAA;AAEnD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,GAAW,EACX,MAAc,EACd,EAAE;IACF,8DAA8D;IAC9D,+DAA+D;IAC/D,+CAA+C;IAC/C,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;IAC7B,iBAAiB,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA;IAElC,KAAK,MAAM,SAAS,IAAI,iBAAiB,CAAC,IAAI,EAAE,EAAE,CAAC;QACjD,IAAI,iBAAiB,CAAC,IAAI,IAAI,sBAAsB,EAAE,CAAC;YACrD,MAAK;QACP,CAAC;QAED,iBAAiB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;IACrC,CAAC;AACH,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAE,EAAE,CAChD,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;AAEjC,iEAAiE;AACjE,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,iBAAiB,CAAC,KAAK,EAAE,CAAA;AAC3B,CAAC,CAAA"}
+{"version":3,"file":"scrollMemory.js","sourceRoot":"","sources":["../../src/Main/scrollMemory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH;;;;;GAKG;AACH,MAAM,sBAAsB,GAAG,EAAE,CAAA;AAcjC,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAA2B,CAAA;AAE5D;;;;;;GAMG;AACH,IAAI,YAAY,GAAuB,IAAI,CAAA;AAE3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,KAAkB,EAClB,MAAc,EACd,EAAE;IACF,kEAAkE;IAClE,8DAA8D;IAC9D,4CAA4C;IAC5C,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IACnC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE;QAC/B,MAAM;QACN,IAAI,EAAE,KAAK,CAAC,IAAI;KACjB,CAAC,CAAA;IAEF,KAAK,MAAM,SAAS,IAAI,iBAAiB,CAAC,IAAI,EAAE,EAAE,CAAC;QACjD,IAAI,iBAAiB,CAAC,IAAI,IAAI,sBAAsB,EAAE,CAAC;YACrD,MAAK;QACP,CAAC;QAED,iBAAiB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;IACrC,CAAC;AACH,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAkB,EAAE,EAAE;IACxD,MAAM,UAAU,GAAG,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAEnD,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,UAAU,CAAC,MAAM,CAAA;IAC1B,CAAC;IAED,MAAM,UAAU,GACd,YAAY,KAAK,IAAI;QACrB,YAAY,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAA;IAElC,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;AAC9B,CAAC,CAAA;AAED,qEAAqE;AACrE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAkB,EAAE,EAAE;IACrD,YAAY,GAAG,KAAK,CAAA;AACtB,CAAC,CAAA;AAED,iEAAiE;AACjE,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,iBAAiB,CAAC,KAAK,EAAE,CAAA;IACzB,YAAY,GAAG,IAAI,CAAA;AACrB,CAAC,CAAA"}

package/dist/Main/scrollMemoryContext.d.ts

@@ -0,0 +1,18 @@
+import type { ScrollEntry } from "./scrollMemory.ts";
+/**
+ * How the history entry reaches `Main` without `Main` knowing a
+ * router exists.
+ *
+ * `@charcuterie/ui`'s main entry is router-free and stays that way —
+ * `sourceRules.test.ts` asserts it, and the fleet runs five
+ * different routers. So the entry arrives as a plain
+ * `{ key, path }`, and the one component that knows how to read it
+ * from react-router lives in the `./react-router` subpath.
+ *
+ * A context rather than a prop, because the alternative is a prop
+ * every app has to remember on every `Main` it renders. It was a
+ * prop first, exactly once, and three of the four apps that needed
+ * it did not have it.
+ */
+export declare const ScrollMemoryContext: import("react").Context<ScrollEntry | null>;
+//# sourceMappingURL=scrollMemoryContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollMemoryContext.d.ts","sourceRoot":"","sources":["../../src/Main/scrollMemoryContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,6CACS,CAAA"}

package/dist/Main/scrollMemoryContext.js

@@ -0,0 +1,18 @@
+import { createContext } from "react";
+/**
+ * How the history entry reaches `Main` without `Main` knowing a
+ * router exists.
+ *
+ * `@charcuterie/ui`'s main entry is router-free and stays that way —
+ * `sourceRules.test.ts` asserts it, and the fleet runs five
+ * different routers. So the entry arrives as a plain
+ * `{ key, path }`, and the one component that knows how to read it
+ * from react-router lives in the `./react-router` subpath.
+ *
+ * A context rather than a prop, because the alternative is a prop
+ * every app has to remember on every `Main` it renders. It was a
+ * prop first, exactly once, and three of the four apps that needed
+ * it did not have it.
+ */
+export const ScrollMemoryContext = createContext(null);
+//# sourceMappingURL=scrollMemoryContext.js.map

package/dist/Main/scrollMemoryContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollMemoryContext.js","sourceRoot":"","sources":["../../src/Main/scrollMemoryContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAIrC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAC9B,aAAa,CAAqB,IAAI,CAAC,CAAA"}

package/dist/Main/useScrollMemory.d.ts

@@ -1,29 +1,31 @@
+import { type ScrollEntry } from "./scrollMemory.ts";
 /**
- * Remember where this history entry was scrolled to, and put it
- * back when the reader returns to it.
+ * Remember where this history entry was scrolled to, and put it back
+ * when the reader returns to it.
  *
- * `scrollMemory.ts` says why the browser will not. This is the
- * part that has to survive the two things a real page does:
+ * `scrollMemory.ts` says why the browser will not, and what an entry
+ * that has never been seen should do. This is the part that has to
+ * survive the two things a real page does:
  *
  *  1. **The content arrives late.** An offset applied against a
- *     600px skeleton clamps to `0` and looks like it did nothing.
- *     A `ResizeObserver` on the scrollport and on its content
- *     column re-applies the offset every time either grows, until
- *     the offset lands or the window closes.
- *  2. **The reader scrolls during all that.** Any wheel, touch,
- *     key or pointer press ends the restore immediately. The
- *     alternative is a page that jumps out from under somebody who
- *     has already started reading.
+ *     600px skeleton clamps to `0` and looks like it did nothing. A
+ *     `ResizeObserver` on the scrollport and on its content column
+ *     re-applies the offset every time either grows, until the
+ *     offset lands or the window closes.
+ *  2. **The reader scrolls during all that.** Any wheel, touch, key
+ *     or pointer press ends the restore immediately. The alternative
+ *     is a page that jumps out from under somebody who has already
+ *     started reading.
  *
  * The save is a passive `scroll` listener, suppressed while a
  * restore is in flight. Without that suppression the feature eats
  * itself: writing `scrollTop` on a still-short page clamps to `0`
- * and fires a `scroll` event reading `0`, which would be saved
- * over the very offset being restored.
+ * and fires a `scroll` event reading `0`, which would be saved over
+ * the very offset being restored.
  *
- * @param scrollKey Identifies the history entry — react-router's
- *   `useLocation().key`. `undefined` turns the memory off, which is
- *   what an app with no router gets.
+ * @param entry The history entry and the page it belongs to.
+ *   `null` turns the memory off, which is what an app that renders
+ *   no `ScrollMemoryProvider` gets.
  */
-export declare const useScrollMemory: (scrollKey: string | undefined) => (node: unknown) => void;
+export declare const useScrollMemory: (entry: ScrollEntry | null | undefined) => (node: unknown) => void;
 //# sourceMappingURL=useScrollMemory.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollMemory.d.ts","sourceRoot":"","sources":["../../src/Main/useScrollMemory.ts"],"names":[],"mappings":"AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,eAAe,GAC1B,WAAW,MAAM,GAAG,SAAS,YAaS,OAAO,SA6F9C,CAAA"}
+{"version":3,"file":"useScrollMemory.d.ts","sourceRoot":"","sources":["../../src/Main/useScrollMemory.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAA;AAwB1B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,WAAW,GAAG,IAAI,GAAG,SAAS,YAaC,OAAO,SAkI9C,CAAA"}

package/dist/Main/useScrollMemory.js

@@ -1,16 +1,16 @@
 import { useCallback, useLayoutEffect, useRef } from "react";
-import { recallScrollOffset, rememberScrollOffset, } from "./scrollMemory.js";
+import { enterScrollEntry, rememberScrollOffset, resolveScrollOffset, } from "./scrollMemory.js";
 /**
  * How long a restore keeps trying while the content is still
  * arriving.
  *
  * The offset cannot be applied until the scrollport is tall enough
  * to hold it, and on a client-rendered page it is not: the commit
- * that changes the route draws a skeleton, and the rows land a
- * fetch later. So the restore re-applies as the content grows, and
- * gives up after this. A page that takes longer than three seconds
- * to fill has already been read from the top, and moving it then
- * is a worse answer than leaving it where the reader put it.
+ * that changes the route draws a skeleton, and the rows land a fetch
+ * later. So the restore re-applies as the content grows, and gives
+ * up after this. A page that takes longer than three seconds to fill
+ * has already been read from the top, and moving it then is a worse
+ * answer than leaving it where the reader put it.
  */
 const RESTORE_WINDOW_MS = 3000;
 /** A scroll the reader asked for. It ends the restore at once. */
@@ -21,38 +21,39 @@ const READER_INTENT_EVENTS = [
     "wheel",
 ];
 /**
- * Remember where this history entry was scrolled to, and put it
- * back when the reader returns to it.
+ * Remember where this history entry was scrolled to, and put it back
+ * when the reader returns to it.
  *
- * `scrollMemory.ts` says why the browser will not. This is the
- * part that has to survive the two things a real page does:
+ * `scrollMemory.ts` says why the browser will not, and what an entry
+ * that has never been seen should do. This is the part that has to
+ * survive the two things a real page does:
  *
  *  1. **The content arrives late.** An offset applied against a
- *     600px skeleton clamps to `0` and looks like it did nothing.
- *     A `ResizeObserver` on the scrollport and on its content
- *     column re-applies the offset every time either grows, until
- *     the offset lands or the window closes.
- *  2. **The reader scrolls during all that.** Any wheel, touch,
- *     key or pointer press ends the restore immediately. The
- *     alternative is a page that jumps out from under somebody who
- *     has already started reading.
+ *     600px skeleton clamps to `0` and looks like it did nothing. A
+ *     `ResizeObserver` on the scrollport and on its content column
+ *     re-applies the offset every time either grows, until the
+ *     offset lands or the window closes.
+ *  2. **The reader scrolls during all that.** Any wheel, touch, key
+ *     or pointer press ends the restore immediately. The alternative
+ *     is a page that jumps out from under somebody who has already
+ *     started reading.
  *
  * The save is a passive `scroll` listener, suppressed while a
  * restore is in flight. Without that suppression the feature eats
  * itself: writing `scrollTop` on a still-short page clamps to `0`
- * and fires a `scroll` event reading `0`, which would be saved
- * over the very offset being restored.
+ * and fires a `scroll` event reading `0`, which would be saved over
+ * the very offset being restored.
  *
- * @param scrollKey Identifies the history entry — react-router's
- *   `useLocation().key`. `undefined` turns the memory off, which is
- *   what an app with no router gets.
+ * @param entry The history entry and the page it belongs to.
+ *   `null` turns the memory off, which is what an app that renders
+ *   no `ScrollMemoryProvider` gets.
  */
-export const useScrollMemory = (scrollKey) => {
+export const useScrollMemory = (entry) => {
     const elementRef = useRef(null);
     const isRestoringRef = useRef(false);
-    // A ref rather than a query for the `<main>` id: the effect
-    // below runs in the same commit that mounts the node, and only a
-    // ref can say which node that was.
+    // A ref rather than a query for the `<main>` id: the effect below
+    // runs in the same commit that mounts the node, and only a ref can
+    // say which node that was.
     //
     // `unknown` in, narrowed here, so the returned function is both a
     // `RefCallback<HTMLElement>` and something `mergeRefs` accepts —
@@ -62,34 +63,55 @@ export const useScrollMemory = (scrollKey) => {
         elementRef.current =
             node instanceof HTMLElement ? node : null;
     }, []);
+    const key = entry?.key;
+    const path = entry?.path;
     useLayoutEffect(() => {
         const element = elementRef.current;
-        if (!element || scrollKey === undefined) {
+        if (!element ||
+            key === undefined ||
+            path === undefined) {
             return undefined;
         }
-        const offset = recallScrollOffset(scrollKey);
-        // The arrow defers the read of `applyOffset`, so the three
-        // pieces can be declared in the order they depend on each
-        // other rather than in the order they are used.
+        const currentEntry = { key, path };
+        // `null` means leave the scrollport alone: a search param
+        // changed and the reader did not go anywhere. It is read BEFORE
+        // this entry becomes the current one, because the answer depends
+        // on the page the reader is arriving from.
+        const offset = resolveScrollOffset(currentEntry);
+        enterScrollEntry(currentEntry);
+        // Seed the entry now rather than waiting for a `scroll` event.
+        // A reader who opens a group and then follows a link never
+        // scrolls in between, so without this the entry they came from
+        // is one the memory has never seen — and Back would send them to
+        // the top of a list they were half-way down.
+        rememberScrollOffset(currentEntry, offset ?? element.scrollTop);
+        // The arrow defers the read of `applyOffset`, so the pieces can
+        // be declared in the order they depend on each other rather than
+        // in the order they are used.
         const observer = new ResizeObserver(() => {
             applyOffset();
         });
         const deadline = globalThis.setTimeout(() => {
             stopRestoring();
         }, RESTORE_WINDOW_MS);
-        const stopRestoring = () => {
-            if (!isRestoringRef.current) {
-                return;
-            }
-            isRestoringRef.current = false;
+        let isRestoring = offset !== null;
+        const teardown = () => {
             observer.disconnect();
             globalThis.clearTimeout(deadline);
             for (const eventName of READER_INTENT_EVENTS) {
                 element.removeEventListener(eventName, stopRestoring);
             }
         };
+        const stopRestoring = () => {
+            if (!isRestoring) {
+                return;
+            }
+            isRestoring = false;
+            isRestoringRef.current = false;
+            teardown();
+        };
         const applyOffset = () => {
-            if (!isRestoringRef.current) {
+            if (!isRestoring || offset === null) {
                 return;
             }
             element.scrollTop = offset;
@@ -102,9 +124,9 @@ export const useScrollMemory = (scrollKey) => {
             if (isRestoringRef.current) {
                 return;
             }
-            rememberScrollOffset(scrollKey, element.scrollTop);
+            rememberScrollOffset(currentEntry, element.scrollTop);
         };
-        isRestoringRef.current = true;
+        isRestoringRef.current = isRestoring;
         for (const eventName of READER_INTENT_EVENTS) {
             element.addEventListener(eventName, stopRestoring, {
                 passive: true,
@@ -122,10 +144,15 @@ export const useScrollMemory = (scrollKey) => {
         });
         applyOffset();
         return () => {
-            stopRestoring();
+            // Unconditional, unlike `stopRestoring` — a restore that
+            // already landed still has an observer and four listeners on
+            // an element the next entry is about to use, and a stale
+            // observer that survives its effect applies a stale offset.
+            isRestoring = false;
+            teardown();
             element.removeEventListener("scroll", onScroll);
         };
-    }, [scrollKey]);
+    }, [key, path]);
     return setElement;
 };
 //# sourceMappingURL=useScrollMemory.js.map

package/dist/Main/useScrollMemory.js.map

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

package/dist/PortraitTiles/PortraitAvatar.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+/**
+ * The face, and the one piece of this component that holds state.
+ *
+ * A portrait grid is the shape that cannot absorb a broken image:
+ * a missing `<img>` is a torn hole where a person's face was, next
+ * to nine that rendered. `onError` is the only signal a browser
+ * gives for a 404, a wrong content type, or a file the user's
+ * network stripped — so the fallback the caller already supplied for
+ * "no picture" covers "no picture *today*" as well.
+ *
+ * Its own component because the state is per portrait. Hoisting it
+ * to a `Record<string, boolean>` in the set would re-render every
+ * tile whenever any one image failed.
+ */
+export declare const PortraitAvatar: ({ className, imageSrc, initials, }: {
+    className: string;
+    imageSrc: string | undefined;
+    initials: ReactNode;
+}) => ReactNode;
+//# sourceMappingURL=PortraitAvatar.d.ts.map

package/dist/PortraitTiles/PortraitAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortraitAvatar.d.ts","sourceRoot":"","sources":["../../src/PortraitTiles/PortraitAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,GAAI,oCAI5B;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,QAAQ,EAAE,SAAS,CAAA;CACpB,KAAG,SAuBH,CAAA"}

package/dist/PortraitTiles/PortraitAvatar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+/**
+ * The face, and the one piece of this component that holds state.
+ *
+ * A portrait grid is the shape that cannot absorb a broken image:
+ * a missing `<img>` is a torn hole where a person's face was, next
+ * to nine that rendered. `onError` is the only signal a browser
+ * gives for a 404, a wrong content type, or a file the user's
+ * network stripped — so the fallback the caller already supplied for
+ * "no picture" covers "no picture *today*" as well.
+ *
+ * Its own component because the state is per portrait. Hoisting it
+ * to a `Record<string, boolean>` in the set would re-render every
+ * tile whenever any one image failed.
+ */
+export const PortraitAvatar = ({ className, imageSrc, initials, }) => {
+    const [isImageBroken, setIsImageBroken] = useState(false);
+    if (imageSrc === undefined || isImageBroken) {
+        return (_jsx("span", { "aria-hidden": true, className: className, children: initials }));
+    }
+    return (_jsx("img", { 
+        // The name is beside it, inside the same tile, so an alt here
+        // is the name announced twice.
+        alt: "", className: className, onError: () => {
+            setIsImageBroken(true);
+        }, src: imageSrc }));
+};
+//# sourceMappingURL=PortraitAvatar.js.map

package/dist/PortraitTiles/PortraitAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortraitAvatar.js","sourceRoot":"","sources":["../../src/PortraitTiles/PortraitAvatar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,QAAQ,GAKT,EAAa,EAAE;IACd,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzD,IAAI,QAAQ,KAAK,SAAS,IAAI,aAAa,EAAE,CAAC;QAC5C,OAAO,CACL,oCAAkB,SAAS,EAAE,SAAS,YACnC,QAAQ,GACJ,CACR,CAAA;IACH,CAAC;IAED,OAAO,CACL;QACE,8DAA8D;QAC9D,+BAA+B;QAC/B,GAAG,EAAC,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,gBAAgB,CAAC,IAAI,CAAC,CAAA;QACxB,CAAC,EACD,GAAG,EAAE,QAAQ,GACb,CACH,CAAA;AACH,CAAC,CAAA"}