cursedbelt 0.0.0 → 2.3.0

package/src/react/hooks/useScrollEdges.spec.ts

@@ -0,0 +1,60 @@
+import { describe, expect, test } from 'bun:test';
+import { scrollFadeMask, type ScrollEdges } from './useScrollEdges';
+
+const edges = (o: Partial<ScrollEdges>): ScrollEdges => ({
+  atStart: true,
+  atEnd: true,
+  overflowing: false,
+  ...o,
+});
+
+describe('scrollFadeMask', () => {
+  test('a region that does not overflow carries NO mask', () => {
+    // A mask is a compositing layer. A rail short enough to show everything must not pay
+    // for one, and must not fade an edge that hides nothing.
+    expect(scrollFadeMask(edges({ overflowing: false }))).toBeUndefined();
+  });
+
+  test('parked at the top: the BOTTOM fades, the top stays hard', () => {
+    const mask = scrollFadeMask(edges({ overflowing: true, atStart: true, atEnd: false }));
+    expect(mask).toContain('to bottom');
+    expect(mask).toContain('black 0');
+    expect(mask).toContain('transparent 100%');
+  });
+
+  test('scrolled into the middle: BOTH edges fade — the vault folder-rail case', () => {
+    // The owner's 2026-08-16 screenshot: two rows above FOLDERS sliced through the middle,
+    // reported as illegible text. Both edges hide content here, so both must say so.
+    const mask = scrollFadeMask(edges({ overflowing: true, atStart: false, atEnd: false }));
+    expect(mask).toContain('transparent 0');
+    expect(mask).toContain('transparent 100%');
+  });
+
+  test('scrolled to the end: the TOP fades, the bottom stays hard', () => {
+    const mask = scrollFadeMask(edges({ overflowing: true, atStart: false, atEnd: true }));
+    expect(mask).toContain('transparent 0');
+    expect(mask).toContain('black 100%');
+    expect(mask).not.toContain('transparent 100%');
+  });
+
+  test('overflowing but pinned at both edges is treated as no overflow', () => {
+    expect(
+      scrollFadeMask(edges({ overflowing: true, atStart: true, atEnd: true })),
+    ).toBeUndefined();
+  });
+
+  test('the x axis fades left/right, not top/bottom', () => {
+    const mask = scrollFadeMask(edges({ overflowing: true, atStart: false, atEnd: false }), 'x');
+    expect(mask).toContain('to right');
+  });
+
+  test('the fade size is configurable and lands in both stops', () => {
+    const mask = scrollFadeMask(
+      edges({ overflowing: true, atStart: false, atEnd: false }),
+      'y',
+      '3rem',
+    );
+    expect(mask).toContain('black 3rem');
+    expect(mask).toContain('calc(100% - 3rem)');
+  });
+});

package/src/react/hooks/useScrollEdges.ts

@@ -0,0 +1,107 @@
+import { type RefObject, useCallback, useEffect, useState } from 'react';
+
+export interface ScrollEdges {
+  /** The scroller is at its start (top for `y`, left for `x`) — nothing hidden before it. */
+  atStart: boolean;
+  /** The scroller is at its end — nothing hidden after it. */
+  atEnd: boolean;
+  /** The content overflows at all. `false` means both edges are meaningless. */
+  overflowing: boolean;
+}
+
+const NO_OVERFLOW: ScrollEdges = { atStart: true, atEnd: true, overflowing: false };
+
+// Sub-pixel scroll positions (zoom, fractional device pixels) mean `scrollTop` never
+// reaches exactly `scrollHeight - clientHeight`; without slack the end edge never reads
+// as reached and a rail permanently claims there is more below.
+const SLACK_PX = 1;
+
+/**
+ * Track whether a scroll container has content hidden before/after the visible band.
+ *
+ * 🔴 **Why this exists.** A raw `overflow-y-auto` cuts its content at an arbitrary pixel,
+ * mid-glyph, with nothing on screen saying so. The owner sent a screenshot of the vault's
+ * folder rail on 2026-08-16 where the two rows above `FOLDERS` were sliced through the
+ * middle and read as *"text above FOLDERS is not legible"* — a rendering bug, as far as
+ * anyone looking at it could tell. Nothing was broken: the rail was simply scrolled, and
+ * a hard cut is indistinguishable from a broken one.
+ *
+ * The verdict a scroll position gets is a fact about layout, so it is measured rather than
+ * guessed: `scroll` (passive), plus a `ResizeObserver` on the scroller AND its content, so
+ * a rail that gains rows while untouched re-evaluates instead of keeping a stale verdict.
+ */
+export function useScrollEdges(
+  ref: RefObject<HTMLElement | null>,
+  axis: 'y' | 'x' = 'y',
+  enabled = true,
+): ScrollEdges {
+  const [edges, setEdges] = useState<ScrollEdges>(NO_OVERFLOW);
+
+  const measure = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const pos = axis === 'y' ? el.scrollTop : el.scrollLeft;
+    const view = axis === 'y' ? el.clientHeight : el.clientWidth;
+    const total = axis === 'y' ? el.scrollHeight : el.scrollWidth;
+    const overflowing = total - view > SLACK_PX;
+    const next: ScrollEdges = overflowing
+      ? { atStart: pos <= SLACK_PX, atEnd: pos + view >= total - SLACK_PX, overflowing: true }
+      : NO_OVERFLOW;
+    // Compare before setting: a scroll event fires per frame and an unchanged verdict
+    // must not re-render the whole rail.
+    setEdges((prev) =>
+      prev.atStart === next.atStart &&
+      prev.atEnd === next.atEnd &&
+      prev.overflowing === next.overflowing
+        ? prev
+        : next,
+    );
+  }, [ref, axis]);
+
+  useEffect(() => {
+    if (!enabled) {
+      setEdges(NO_OVERFLOW);
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+    measure();
+    el.addEventListener('scroll', measure, { passive: true });
+
+    // happy-dom and older Safari lack ResizeObserver; the scroll listener alone is a
+    // correct-but-less-eager fallback rather than a crash.
+    const RO = typeof ResizeObserver === 'undefined' ? null : ResizeObserver;
+    const ro = RO ? new RO(measure) : null;
+    if (ro) {
+      ro.observe(el);
+      // The CONTENT box too: rows arriving from a fetch change scrollHeight without
+      // changing the scroller's own size, and that is the common case in a filter rail.
+      for (const child of Array.from(el.children)) ro.observe(child);
+    }
+    return () => {
+      el.removeEventListener('scroll', measure);
+      ro?.disconnect();
+    };
+  }, [ref, measure, enabled]);
+
+  return edges;
+}
+
+/**
+ * The `mask-image` that fades whichever edge has content hidden behind it. Returns
+ * `undefined` when nothing is hidden, so a non-overflowing region carries no mask at all
+ * (a mask is a compositing layer — it should not exist when it has nothing to say).
+ *
+ * Kept as a standalone pure export so the exact gradient is unit-testable without a DOM.
+ */
+export function scrollFadeMask(
+  edges: ScrollEdges,
+  axis: 'y' | 'x' = 'y',
+  size = '1.25rem',
+): string | undefined {
+  if (!edges.overflowing || (edges.atStart && edges.atEnd)) return undefined;
+  const dir = axis === 'y' ? 'to bottom' : 'to right';
+  const head = edges.atStart ? 'black 0' : `transparent 0, black ${size}`;
+  const tail = edges.atEnd ? 'black 100%' : `black calc(100% - ${size}), transparent 100%`;
+  return `linear-gradient(${dir}, ${head}, ${tail})`;
+}

package/src/react/hooks/useStableOrder.spec.tsx

@@ -0,0 +1,79 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+import { useStableOrder } from './useStableOrder';
+
+afterEach(cleanup);
+
+interface Row {
+  id: string;
+  chosen: boolean;
+}
+
+/** Renders the resolved order as a single string so a rerender can be compared to it. */
+function Probe({ rows, query }: { rows: Row[]; query: string }) {
+  const ordered = useStableOrder(rows, {
+    keyOf: (r) => r.id,
+    // Chosen first — apps/family's people picker, exactly.
+    rankOf: (r) => (r.chosen ? 0 : 1),
+    resetKey: query,
+  });
+  return <span data-testid='order'>{ordered.map((r) => r.id).join(',')}</span>;
+}
+
+const rows = (chosen: string[] = []): Row[] =>
+  ['ann', 'bob', 'cat', 'dan'].map((id) => ({ id, chosen: chosen.includes(id) }));
+
+describe('useStableOrder', () => {
+  test('ranks on first render — the float still happens on arrival', () => {
+    const { getByTestId } = render(<Probe rows={rows(['cat'])} query='' />);
+    expect(getByTestId('order').textContent).toBe('cat,ann,bob,dan');
+  });
+
+  /**
+   * 🔴 Owner, 2026-08-16 (apps/family): *"when checking someone it shouldn't move the
+   * position on the picture tagging checkbox list … they scrolled down checked a name and it
+   * made them lose their place so they scrolled down again to find it after each check for a
+   * picture with a dozen people to tag in it."*
+   */
+  test('a selection made mid-list does NOT move anything', () => {
+    const { getByTestId, rerender } = render(<Probe rows={rows()} query='' />);
+    expect(getByTestId('order').textContent).toBe('ann,bob,cat,dan');
+    // The reader scrolls down and ticks `dan`.
+    rerender(<Probe rows={rows(['dan'])} query='' />);
+    expect(getByTestId('order').textContent).toBe('ann,bob,cat,dan');
+    // ...and ticks `cat` too. Still nothing moves.
+    rerender(<Probe rows={rows(['dan', 'cat'])} query='' />);
+    expect(getByTestId('order').textContent).toBe('ann,bob,cat,dan');
+  });
+
+  test('the reader’s OWN action re-ranks — the float is preserved, not removed', () => {
+    const { getByTestId, rerender } = render(<Probe rows={rows()} query='' />);
+    rerender(<Probe rows={rows(['dan'])} query='' />);
+    expect(getByTestId('order').textContent).toBe('ann,bob,cat,dan');
+    // Typing in the search box is the reader asking for the list again.
+    rerender(<Probe rows={rows(['dan'])} query='a' />);
+    expect(getByTestId('order').textContent).toBe('dan,ann,bob,cat');
+  });
+
+  test('an item that arrives mid-edit is appended, never dropped', () => {
+    const { getByTestId, rerender } = render(<Probe rows={rows()} query='' />);
+    rerender(<Probe rows={[...rows(['dan']), { id: 'eve', chosen: true }]} query='' />);
+    // `eve` is chosen, so a re-rank would put her first; she is new, so she goes last —
+    // the reader is mid-list and their positions must hold.
+    expect(getByTestId('order').textContent).toBe('ann,bob,cat,dan,eve');
+  });
+
+  test('a removed item simply disappears; the rest hold their places', () => {
+    const { getByTestId, rerender } = render(<Probe rows={rows()} query='' />);
+    rerender(<Probe rows={rows().filter((r) => r.id !== 'bob')} query='' />);
+    expect(getByTestId('order').textContent).toBe('ann,cat,dan');
+  });
+
+  test('re-rendering with identical props is idempotent (StrictMode double-invoke safe)', () => {
+    const stable = rows(['cat']);
+    const { getByTestId, rerender } = render(<Probe rows={stable} query='' />);
+    const first = getByTestId('order').textContent;
+    rerender(<Probe rows={stable} query='' />);
+    expect(getByTestId('order').textContent).toBe(first);
+  });
+});

package/src/react/hooks/useStableOrder.ts

@@ -0,0 +1,71 @@
+import { useMemo, useRef } from 'react';
+
+export interface StableOrderOptions<T> {
+  /** Stable identity for an item. */
+  keyOf: (item: T) => string;
+  /**
+   * Lower sorts first. Read freely — it is evaluated only when the order is allowed to be
+   * recomputed, so a rank that depends on the current selection is fine and is the point.
+   */
+  rankOf: (item: T) => number;
+  /**
+   * The order is recomputed when this changes, and ONLY then. Make it the things the
+   * reader themselves changed on purpose — a search query, an open/close, a tab — never
+   * the selection, which is the thing that must not move the list.
+   */
+  resetKey: string;
+}
+
+/**
+ * Sort a list so that helpful ordering happens when the reader ASKS for it, and never
+ * underneath their pointer.
+ *
+ * 🔴 **The measured report.** apps/family's people picker floats chosen names to the top,
+ * for a good reason written at its own site: *"on a long list, a tag made thirty names ago
+ * must not scroll out of sight, or somebody will tag them twice trying to find out whether
+ * they did."* True — and it re-sorted on EVERY tick, so the owner reported (2026-08-16):
+ * *"when checking someone it shouldn't move the position on the picture tagging checkbox
+ * list … they scrolled down checked a name and it made them lose their place so they
+ * scrolled down again to find it after each check for a picture with a dozen people to tag
+ * in it."* Tagging twelve people cost twelve scrolls back.
+ *
+ * Both requirements are real and they are not actually in conflict — they are about
+ * different MOMENTS. The float is wanted when the list is arrived at or re-queried; the
+ * freeze is wanted while a run of checkboxes is being worked through. So the ranking is
+ * evaluated on `resetKey`, and between those points the order is held: a newly-checked
+ * name stays exactly where the reader's eye and pointer left it, and floats to the top the
+ * next time they search or reopen.
+ *
+ * Items that appear while the order is frozen are appended in their incoming order rather
+ * than dropped, so a list that streams in does not silently hide its tail.
+ */
+export function useStableOrder<T>(items: T[], { keyOf, rankOf, resetKey }: StableOrderOptions<T>): T[] {
+  // The frozen sequence of keys. A ref, not state: it is derived from the props on every
+  // pass, and writing it must not schedule a render of its own. Re-deriving it here is
+  // idempotent for a given (items, resetKey), which is what makes a StrictMode double
+  // invoke — and any other repeated render — produce the same list.
+  const frozen = useRef<{ resetKey: string; keys: string[] } | null>(null);
+
+  return useMemo(() => {
+    if (frozen.current === null || frozen.current.resetKey !== resetKey) {
+      const ranked = [...items].sort((a, b) => rankOf(a) - rankOf(b));
+      frozen.current = { resetKey, keys: ranked.map(keyOf) };
+      return ranked;
+    }
+
+    const position = new Map(frozen.current.keys.map((key, index) => [key, index]));
+    const known: T[] = [];
+    const fresh: T[] = [];
+    for (const item of items) {
+      (position.has(keyOf(item)) ? known : fresh).push(item);
+    }
+    known.sort(
+      (a, b) => (position.get(keyOf(a)) as number) - (position.get(keyOf(b)) as number),
+    );
+    // Appended, not re-ranked: an item that arrived mid-edit has no place in an order the
+    // reader is already navigating, and dropping it would hide it entirely.
+    const next = [...known, ...fresh];
+    if (fresh.length > 0) frozen.current = { resetKey, keys: next.map(keyOf) };
+    return next;
+  }, [items, keyOf, rankOf, resetKey]);
+}

package/src/react/hooks/useSwipeToDismiss.ts

@@ -0,0 +1,87 @@
+import { useCallback, useRef } from 'react';
+
+export type SwipeDismissDirection = 'left' | 'right' | 'down';
+
+const DISTANCE_THRESHOLD = 64; // px of travel in the closing direction to commit
+const AXIS_RATIO = 1.2; // how much more the dominant axis must move than the other
+
+/**
+ * Drag-to-dismiss on a single "handle" element (a drawer's header/title bar, or a
+ * bottom-sheet's grabber pill) — NEVER the whole panel. Scoping the gesture to the
+ * handle keeps it from fighting a scrollable body (`ScrollArea`) or, critically, any
+ * pointer-based drag-and-drop living in the body (dnd-kit et al): both would otherwise
+ * race the same pointer events for capture.
+ *
+ * Returns a callback ref rather than taking a `RefObject` + `useEffect` — the handle
+ * lives inside a Radix `Dialog` portal, whose content mounts into the DOM a beat after
+ * the host component's own first commit; an effect keyed on a stable ref object would
+ * run once against a still-null `.current` and never re-fire once the portal actually
+ * mounts. A callback ref fires exactly when the node attaches/detaches, portal or not.
+ *
+ * Uses plain `window` pointermove/pointerup listeners (no `setPointerCapture`) so a
+ * tap that never crosses the distance threshold still resolves as an ordinary click on
+ * whatever's under the pointer (the drawer's own Close button lives in the handle).
+ */
+export function useSwipeToDismiss(
+  direction: SwipeDismissDirection,
+  onDismiss: () => void,
+  enabled = true,
+): (node: HTMLElement | null) => void {
+  const cleanupRef = useRef<() => void>(() => {});
+
+  return useCallback(
+    (node: HTMLElement | null) => {
+      cleanupRef.current();
+      cleanupRef.current = () => {};
+      if (!node || !enabled) return;
+
+      let startX = 0;
+      let startY = 0;
+      let dragging = false;
+
+      function distanceClosing(dx: number, dy: number): number {
+        if (direction === 'down') return dy;
+        if (direction === 'left') return -dx;
+        return dx; // 'right'
+      }
+
+      function onMove(e: PointerEvent) {
+        if (!dragging) return;
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+        const closing = distanceClosing(dx, dy);
+        const cross = direction === 'down' ? dx : dy;
+        if (closing <= 0 || Math.abs(closing) < Math.abs(cross) * AXIS_RATIO) return;
+        if (closing > DISTANCE_THRESHOLD) {
+          dragging = false;
+          onDismiss();
+        }
+      }
+
+      function onUp() {
+        dragging = false;
+      }
+
+      function onDown(e: PointerEvent) {
+        // A click on the close button (or anything else in the handle) still fires
+        // normally — no preventDefault, no pointer capture, nothing claimed until the
+        // distance threshold above actually commits to a dismiss.
+        startX = e.clientX;
+        startY = e.clientY;
+        dragging = true;
+      }
+
+      node.addEventListener('pointerdown', onDown);
+      window.addEventListener('pointermove', onMove);
+      window.addEventListener('pointerup', onUp);
+      window.addEventListener('pointercancel', onUp);
+      cleanupRef.current = () => {
+        node.removeEventListener('pointerdown', onDown);
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+        window.removeEventListener('pointercancel', onUp);
+      };
+    },
+    [direction, onDismiss, enabled],
+  );
+}

package/src/react/hooks/useTableSort.ts

@@ -0,0 +1,79 @@
+import { useMemo, useState } from 'react';
+
+export type SortDir = 'asc' | 'desc';
+
+/** A comparable value. Nullish/empty values always sort to the end, in both
+ *  directions (e.g. "never logged in" rows stay at the bottom either way). */
+export type SortValue = string | number | boolean | null | undefined;
+
+const isEmpty = (v: SortValue): boolean => v === null || v === undefined || v === '';
+
+/** Compare two sort values, empties last. Ascending order. */
+export const compareSortValues = (a: SortValue, b: SortValue): number => {
+  const aEmpty = isEmpty(a);
+  const bEmpty = isEmpty(b);
+  if (aEmpty && bEmpty) return 0;
+  if (aEmpty) return 1;
+  if (bEmpty) return -1;
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  if (typeof a === 'boolean' && typeof b === 'boolean') return a === b ? 0 : a ? 1 : -1;
+  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });
+};
+
+type Accessors<T> = Record<string, (row: T) => SortValue>;
+
+/**
+ * Click-to-sort for any table. Pass the rows and a map of column-key → value
+ * accessor. `onSort(key)` cycles asc → desc → unsorted on repeated clicks;
+ * empties always sort last regardless of direction.
+ *
+ *   const { sorted, sortProps } = useTableSort(rows, {
+ *     name: (r) => r.name,
+ *     lastLogin: (r) => r.lastLoginAt,
+ *   });
+ */
+export const useTableSort = <T>(
+  rows: T[],
+  accessors: Accessors<T>,
+  initial?: { key: string; dir: SortDir },
+) => {
+  const [sortKey, setSortKey] = useState<string | null>(initial?.key ?? null);
+  const [sortDir, setSortDir] = useState<SortDir | null>(initial?.dir ?? null);
+
+  const onSort = (key: string) => {
+    if (sortKey !== key) {
+      setSortKey(key);
+      setSortDir('asc');
+    } else if (sortDir === 'asc') {
+      setSortDir('desc');
+    } else {
+      // Third click clears the sort, restoring the original order.
+      setSortKey(null);
+      setSortDir(null);
+    }
+  };
+
+  const sorted = useMemo(() => {
+    if (!sortKey || !sortDir) return rows;
+    const accessor = accessors[sortKey];
+    if (!accessor) return rows;
+    const dir = sortDir === 'asc' ? 1 : -1;
+    return [...rows].sort((x, y) => {
+      const ax = accessor(x);
+      const ay = accessor(y);
+      const result = compareSortValues(ax, ay);
+      // Keep empties last regardless of direction; flip only real comparisons.
+      if (result === 1 && isEmpty(ax)) return 1;
+      if (result === -1 && isEmpty(ay)) return -1;
+      return result * dir;
+    });
+  }, [rows, accessors, sortKey, sortDir]);
+
+  const sortProps = (key: string) => ({
+    active: sortKey === key,
+    dir: sortDir,
+    onSort: () => onSort(key),
+  });
+
+  return { sorted, sortKey, sortDir, onSort, sortProps };
+};

package/src/react/hooks/useWindowResize.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+export interface WindowSize {
+  width: number;
+  height: number;
+}
+
+const getWindowSize = (): WindowSize =>
+  typeof window === 'undefined'
+    ? { width: 0, height: 0 }
+    : { width: window.innerWidth, height: window.innerHeight };
+
+/**
+ * Track the viewport size (`window.innerWidth`/`innerHeight`), debounced 100 ms so a
+ * resize drag doesn't fire a render per pixel. SSR-safe (returns `0×0` until mounted).
+ * Prefer `innerHeight`/`100dvh` over `100vh` on mobile, where browser chrome covers
+ * part of the `vh` viewport. For responsive *branching* prefer `useMediaQuery`; reach
+ * for this only when you need the actual pixel dimensions.
+ */
+export const useWindowResize = (): WindowSize => {
+  const [size, setSize] = useState<WindowSize>(getWindowSize);
+  useEffect(() => {
+    let timer = 0;
+    const onResize = () => {
+      clearTimeout(timer);
+      timer = window.setTimeout(() => setSize(getWindowSize()), 100);
+    };
+    window.addEventListener('resize', onResize);
+    // Sync once on mount in case the size changed between first render and effect.
+    setSize(getWindowSize());
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+  return size;
+};

package/src/react/icons.spec.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from 'bun:test';
+import { render } from '@testing-library/react';
+import { createIconMapRegistry, DynamicIcon, IconRegistry } from './icons';
+
+describe('createIconMapRegistry', () => {
+  test('resolves every IconRegistry token to a real icon by default', () => {
+    const icons = createIconMapRegistry();
+    for (const token of Object.keys(IconRegistry) as (keyof typeof IconRegistry)[]) {
+      expect(icons.get(token)).toBeDefined();
+    }
+  });
+
+  test('register() overrides only the given tokens, leaving the rest default', () => {
+    const icons = createIconMapRegistry();
+    const before = icons.get('home');
+    const Custom = () => null;
+    icons.register({ board: Custom });
+    expect(icons.get('board')).toBe(Custom);
+    expect(icons.get('home')).toBe(before);
+  });
+});
+
+describe('DynamicIcon fallback', () => {
+  // Regression: an unresolved token used to render as full inline text (e.g.
+  // "board"), which ignores a `size-*` className on an inline element and
+  // visually overflows into sibling content — the "green 'board' text overlapping
+  // black 'Breadcrumbs'" bug. The fallback must stay clipped to one character.
+  test('renders a single clipped glyph, never the full token as unclipped text', () => {
+    const icons = createIconMapRegistry();
+    icons.clear();
+    const { container } = render(DynamicIcon({ token: 'board', iconMap: icons, className: 'size-4' }));
+    const span = container.querySelector('[data-icon="board"]');
+    expect(span).not.toBeNull();
+    expect(span?.textContent).toBe('b');
+    expect(span?.className).toContain('overflow-hidden');
+    expect(span?.className).toContain('size-4');
+  });
+
+  test('renders nothing for an empty token', () => {
+    const icons = createIconMapRegistry();
+    const { container } = render(DynamicIcon({ iconMap: icons }));
+    expect(container.innerHTML).toBe('');
+  });
+});