@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/lib/gloomberb.ts

@@ -0,0 +1,69 @@
+/**
+ * Gloomberb attribution + deep-link conventions shared by the frontend
+ * surfaces (#4098).
+ *
+ * The constants mirror
+ * `digiquant/src/digiquant/data/gloomberb/attribution.py` — keep the strings
+ * and the `?ticker=` deep-link form in sync (spec §7).
+ */
+
+import { asRecord } from "./record";
+
+export const GLOOMBERB_ATTRIBUTION = "Sourced from Gloomberb";
+export const GLOOMBERB_DELAY_NOTICE = "Data delayed up to 15 minutes";
+export const GLOOMBERB_TERMINAL_URL = "https://term.gloom.sh/";
+
+export type GloomberbAttribution = {
+  attribution: string;
+  delayNotice?: string;
+  sourceUrl?: string;
+};
+
+/** Deep link to the Gloomberb terminal page for *symbol*. */
+export function gloomberbTickerUrl(symbol: string): string {
+  return `${GLOOMBERB_TERMINAL_URL}?ticker=${encodeURIComponent(symbol.trim())}`;
+}
+
+function parseMaybeJson(value: unknown): unknown {
+  if (typeof value !== "string") return value;
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("{")) return value;
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    return value;
+  }
+}
+
+/**
+ * Reads the §7 attribution block off a tool result. Unwraps the `result`
+ * envelope (digifetch payloads) and JSON-string results, then requires a
+ * non-blank `attribution` string: payloads that do not carry one (Yahoo-backed
+ * tools) return null so no surface credits Gloomberb for data it did not
+ * source. `source_url` is surfaced only when it is a `term.gloom.sh` link, so
+ * an off-terminal URL never wears the branded link.
+ */
+export function readGloomberbAttribution(result: unknown): GloomberbAttribution | null {
+  let payload = asRecord(parseMaybeJson(result));
+  if (payload && "result" in payload) {
+    payload = asRecord(parseMaybeJson(payload.result));
+  }
+  if (
+    !payload ||
+    typeof payload.attribution !== "string" ||
+    payload.attribution.trim() === ""
+  ) {
+    return null;
+  }
+  const attribution = payload.attribution;
+  const sourceUrl = payload.source_url;
+  return {
+    attribution,
+    delayNotice:
+      typeof payload.delay_notice === "string" ? payload.delay_notice : undefined,
+    sourceUrl:
+      typeof sourceUrl === "string" && sourceUrl.startsWith(GLOOMBERB_TERMINAL_URL)
+        ? sourceUrl
+        : undefined,
+  };
+}

package/src/lib/record.ts

@@ -0,0 +1,19 @@
+/**
+ * The one JSON-object reader.
+ *
+ * `asRecord` / `isRecord` had been hand-copied into app modules, and the copies
+ * drifted in two ways: some versions let arrays through as records, and some
+ * returned `{}` where the caller expected `null`. A record here is a parsed
+ * JSON object and nothing else — an array is not a record, because every caller
+ * reads a named key off the result and an array answers `undefined` to every
+ * key, silently.
+ */
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/** Narrow to a record, or `null` when the value is anything else. */
+export function asRecord(value: unknown): Record<string, unknown> | null {
+  return isRecord(value) ? value : null;
+}

package/src/lib/stub-payload.ts

@@ -0,0 +1,183 @@
+/**
+ * The one stub detector for every digiquant surface.
+ *
+ * Four surfaces painted the same "is this the stub envelope?" rule and drifted
+ * apart while they did it. Three of them matched numbers by value, one matched
+ * them as substrings of the serialised payload, and the substring copy is what
+ * put a stub banner over a live NAV block: a real figure that merely contained
+ * the fixture's digits (`204.045`, `1204.04`, `154.10`, `180.5`, `54.15`) read as
+ * the fixture. Every rule here is value-exact instead, so a longer number that
+ * only contains those digits is not the fixture.
+ *
+ * Two input shapes are accepted, because the surfaces do not agree on one:
+ *
+ * - A parsed payload (object or array). Checked structurally: numbers by value,
+ *   the fixture's string spellings as whole values, and the two fixture row
+ *   shapes as row conjunctions rather than as text.
+ * - Display lines (`string[]`, or a bare string). Checked per line by numeric
+ *   token, deliberately without the row conjunctions: a painted line carries
+ *   bare numbers, so a conjunction over them would be a guess. The surfaces that
+ *   hand over display lines have already run the structural check on the payload
+ *   they painted from, so nothing is lost.
+ */
+
+/**
+ * NAV values the dashboard-api stub fixtures emit. A live series never lands on
+ * one of these exactly.
+ */
+const STUB_NAV_VALUES = [99.909, 204.04];
+
+/**
+ * Since-inception style figures the stub fixtures emit. Matched by value so a
+ * live percentage that merely starts with the same digits is not the fixture.
+ */
+const STUB_SINCE_INCEPTION_VALUES = [103.040192, 104.44808, 3.040191838399986];
+
+/**
+ * String spellings the fixtures emit. Matched as whole values only, so the
+ * padded `204.040` is the fixture and a longer string that contains it is not.
+ */
+const STUB_TEXT_VALUES = new Set(["99.909", "204.04", "204.040"]);
+
+/**
+ * The only benchmark tape the stub fixtures emit. All three parts are required,
+ * exactly as the four copies required them: a tape that happens to close at 500
+ * on that date is a real tape until it also closes at 515.
+ */
+const STUB_TAPE_DATE = "2026-08-20";
+const STUB_TAPE_CLOSES = [500, 515];
+
+/**
+ * The two ledger rows the stub fixture always emits together. One row alone is
+ * ordinary house activity, so both are required.
+ */
+const STUB_LEDGER_ROWS = [
+  { date: "2026-09-03", ticker: "XLF", value: 54.1 },
+  { date: "2026-06-01", ticker: "GLD", value: 180 },
+];
+
+/** JSON round-trips a float through its shortest form, so this only absorbs that. */
+const EPSILON = 1e-6;
+
+/** A numeric literal inside a painted line. Signs are kept so `-54.15` stays negative. */
+const NUMBER_TOKEN = /[-+]?\d+(?:\.\d+)?/g;
+
+function near(value: number, target: number): boolean {
+  return Math.abs(value - target) < EPSILON;
+}
+
+/** True when `value` is one of the fixture's figures, to the precision JSON can carry. */
+function isStubNumber(value: number): boolean {
+  return (
+    STUB_NAV_VALUES.some((target) => near(value, target)) ||
+    STUB_SINCE_INCEPTION_VALUES.some((target) => near(value, target))
+  );
+}
+
+/** Every number painted in a display line, as values rather than as digit runs. */
+function numbersIn(text: string): number[] {
+  return (text.match(NUMBER_TOKEN) ?? [])
+    .map(Number)
+    .filter((value) => Number.isFinite(value));
+}
+
+/** A fixture NAV carried as a string rather than as a number. */
+function isStubTextValue(value: string): boolean {
+  return STUB_TEXT_VALUES.has(value.trim());
+}
+
+/** The price of a ledger row. The surfaces name it `price` or `fill_price`. */
+function rowPrice(row: Record<string, unknown>): number | null {
+  for (const key of ["price", "fill_price"]) {
+    const value = row[key];
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+    if (typeof value === "string" && value.trim() !== "") {
+      const parsed = Number(value);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+  }
+  return null;
+}
+
+function matchesLedgerRow(row: Record<string, unknown>, expected: (typeof STUB_LEDGER_ROWS)[number]): boolean {
+  const price = rowPrice(row);
+  return (
+    price != null &&
+    near(price, expected.value) &&
+    row.date === expected.date &&
+    row.ticker === expected.ticker
+  );
+}
+
+/** Records whichever parts of the stub tape this row carries. */
+function noteStubTapeRow(row: Record<string, unknown>, out: Scan): void {
+  if (row.date === STUB_TAPE_DATE) out.tapeDate = true;
+  const close = row.close;
+  if (typeof close !== "number" || !Number.isFinite(close)) return;
+  STUB_TAPE_CLOSES.forEach((target, index) => {
+    if (near(close, target)) out.tapeCloses.add(index);
+  });
+}
+
+/** What one walk of a parsed payload found. The ledger rows accumulate across the whole tree. */
+interface Scan {
+  stubValue: boolean;
+  tapeDate: boolean;
+  tapeCloses: Set<number>;
+  ledgerRows: Set<number>;
+}
+
+function scan(value: unknown, seen: Set<object>, out: Scan): void {
+  if (typeof value === "number") {
+    if (isStubNumber(value)) out.stubValue = true;
+    return;
+  }
+  if (typeof value === "string") {
+    if (isStubTextValue(value)) out.stubValue = true;
+    return;
+  }
+  if (value == null || typeof value !== "object") return;
+  if (seen.has(value)) return;
+  seen.add(value);
+
+  if (Array.isArray(value)) {
+    for (const item of value) scan(item, seen, out);
+    return;
+  }
+
+  const record = value as Record<string, unknown>;
+  noteStubTapeRow(record, out);
+  STUB_LEDGER_ROWS.forEach((expected, index) => {
+    if (!out.ledgerRows.has(index) && matchesLedgerRow(record, expected)) out.ledgerRows.add(index);
+  });
+  for (const nested of Object.values(record)) scan(nested, seen, out);
+}
+
+/**
+ * True when `payload` is the dashboard-api stub envelope rather than a house read.
+ *
+ * A `legacy_estimate` contract on its own is NOT a stub: three of the four
+ * surfaces that painted this rule never treated it as one, and a house NAV series
+ * carries that contract on real points. It only appears in fixtures alongside one
+ * of the figures above, which is where it is caught.
+ */
+export function isStubPayload(payload: unknown): boolean {
+  if (typeof payload === "string") return isStubLine(payload);
+  if (Array.isArray(payload) && payload.every((line) => typeof line === "string")) {
+    return (payload as string[]).some(isStubLine);
+  }
+
+  const out: Scan = { stubValue: false, tapeDate: false, tapeCloses: new Set(), ledgerRows: new Set() };
+  scan(payload, new Set<object>(), out);
+  const isStubTape = out.tapeDate && out.tapeCloses.size === STUB_TAPE_CLOSES.length;
+  return out.stubValue || isStubTape || out.ledgerRows.size === STUB_LEDGER_ROWS.length;
+}
+
+/**
+ * A painted display line is stub evidence only when it carries a fixture figure
+ * as a value. The row conjunctions are deliberately not re-applied here: a line
+ * holds bare numbers, so requiring them would be a guess about the format.
+ */
+function isStubLine(line: string): boolean {
+  return numbersIn(line).some(isStubNumber);
+}

package/src/lib/useBodyScrollLock.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Reference-counted document.body scroll lock — safe when more than one
+ * overlay in the same app (a nav drawer AND a command palette, say) may
+ * want the page locked at once, in any open/close order.
+ *
+ * A naive per-component `document.body.style.overflow = active ? "hidden"
+ * : ""` effect is NOT safe here: the moment ANY ONE overlay closes, its
+ * cleanup unconditionally clears the property, clobbering a second
+ * overlay's lock even if that second overlay is still open — and this
+ * happens regardless of which one opened first (an in-session PR review
+ * on #2269 confirmed both the naive pattern's cross-overlay collision
+ * itself, live-traced against NavShell's own pre-existing lock effect, and
+ * that the failure survives even the "close in reverse-open order" case a
+ * plain save/restore-on-mount pattern would otherwise handle).
+ *
+ * This instead increments/decrements a shared counter: the first `active`
+ * locker captures the pre-lock value and applies "hidden"; every
+ * subsequent concurrent locker is a no-op past the counter bump; only the
+ * LAST one releasing restores the true original value. Correct for any
+ * nesting or interleaving of open/close across every consumer.
+ */
+let lockCount = 0;
+let previousOverflow = "";
+
+export function useBodyScrollLock(active: boolean) {
+  useEffect(() => {
+    if (!active) return;
+    if (lockCount === 0) {
+      previousOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    lockCount += 1;
+    return () => {
+      lockCount -= 1;
+      if (lockCount === 0) {
+        document.body.style.overflow = previousOverflow;
+      }
+    };
+  }, [active]);
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/motion/primitives.tsx

@@ -0,0 +1,105 @@
+"use client";
+/**
+ * Shared Framer Motion vocabulary. All transitions use the brand easing.
+ * Everything degrades under prefers-reduced-motion via useMotionSafe().
+ * Animate transform / opacity / pathLength only.
+ */
+import {
+  LazyMotion,
+  domAnimation,
+  m,
+  useReducedMotion,
+  type Variants,
+  type Transition,
+} from "motion/react";
+import { useEffect, useState, type ReactNode } from "react";
+
+export const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1];
+export const baseTransition: Transition = { duration: 0.6, ease: EASE };
+
+/** True when motion is allowed (not reduced). Hydration-safe: SSR cannot know
+ *  the media query, so the first client render reports motion-safe to match the
+ *  server markup, then resolves the real preference after mount. For reduced-
+ *  motion users the primitives swap to their static branch one effect-tick
+ *  later — no animation ever plays. */
+export function useMotionSafe(): boolean {
+  const reduced = useReducedMotion();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted ? !reduced : true;
+}
+
+/** Wrap an app/tree once so `m.*` components have animation features (small bundle). */
+export function MotionProvider({ children }: { children: ReactNode }) {
+  return <LazyMotion features={domAnimation} strict>{children}</LazyMotion>;
+}
+
+export const revealVariants: Variants = {
+  hidden: { opacity: 0, y: 16 },
+  show: { opacity: 1, y: 0, transition: baseTransition },
+};
+
+export const staggerParent: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.06, delayChildren: 0.04 } },
+};
+
+/** Fade + rise when scrolled into view (once). Falls back to static if reduced. */
+export function Reveal({
+  children,
+  className,
+  as = "div",
+  delay = 0,
+}: {
+  children: ReactNode;
+  className?: string;
+  as?: keyof typeof m;
+  delay?: number;
+}) {
+  const safe = useMotionSafe();
+  const Comp = m[as] as typeof m.div;
+  if (!safe) return <Comp className={className}>{children}</Comp>;
+  return (
+    <Comp
+      className={className}
+      data-motion=""
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true, margin: "0px 0px -10% 0px" }}
+      variants={{ hidden: { opacity: 0, y: 16 }, show: { opacity: 1, y: 0, transition: { ...baseTransition, delay } } }}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+/** Stagger container; children should use <Reveal> or variants={revealVariants}. */
+export function Stagger({ children, className }: { children: ReactNode; className?: string }) {
+  const safe = useMotionSafe();
+  if (!safe) return <div className={className}>{children}</div>;
+  return (
+    <m.div
+      className={className}
+      data-motion=""
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true, margin: "0px 0px -10% 0px" }}
+      variants={staggerParent}
+    >
+      {children}
+    </m.div>
+  );
+}
+
+/** One-shot hero entrance on mount (no scroll). */
+export function HeroEntrance({ children, className }: { children: ReactNode; className?: string }) {
+  const safe = useMotionSafe();
+  if (!safe) return <div className={className}>{children}</div>;
+  return (
+    <m.div className={className} data-motion="" initial="hidden" animate="show" variants={staggerParent}>
+      {children}
+    </m.div>
+  );
+}
+
+export { m };

package/src/motion/scroll-glide.ts

@@ -0,0 +1,62 @@
+/**
+ * Skip-through / rest glide for a pinned scrolly section.
+ *
+ * The page scroll stays in charge. These helpers never return a scroll offset:
+ * while the reader is moving, the section shows the scroll-linked pose as-is
+ * (skip-through). Once the page has been still, the camera may ease from that
+ * live pose back onto the narrated boxes. A glide that is already more than
+ * half done is left where the reader stopped — rewinding it would fight the
+ * skip, and the page is not pulled to finish the beat.
+ */
+
+const clamp01 = (n: number): number => Math.max(0, Math.min(1, n));
+
+/** Quiet gap after the last scroll sample before a rest glide may start. */
+export const REST_QUIET_MS = 180;
+
+/** How long the camera takes to settle onto the parked boxes. */
+export const REST_GLIDE_MS = 520;
+
+/** Below this the camera is already on the narrated boxes. */
+export const REST_PARKED_GLIDE = 0.02;
+
+/**
+ * At or above this the reader has committed to the next beat. Settling would
+ * rewind the picture under a stationary page.
+ */
+export const REST_COMMIT_GLIDE = 0.5;
+
+export interface RestGlideInput {
+  /** Milliseconds since scroll position last changed. */
+  quietMs: number;
+  /** Scroll-linked camera blend, 0 parked on this beat and 1 on the next. */
+  liveGlide: number;
+  quietThreshold?: number;
+}
+
+/**
+ * Whether the camera should ease back to the parked boxes. False while the
+ * page is still moving, when the beat is already parked, and when the glide
+ * is committed — those stay with the page scroll.
+ */
+export function shouldStartRestGlide(input: RestGlideInput): boolean {
+  const quiet = input.quietThreshold ?? REST_QUIET_MS;
+  if (input.quietMs < quiet) return false;
+  const live = clamp01(input.liveGlide);
+  return live > REST_PARKED_GLIDE && live < REST_COMMIT_GLIDE;
+}
+
+/** Smoothstep progress of a rest glide, 0 at the start and 1 at `durationMs`. */
+export function restBlendAmount(elapsedMs: number, durationMs = REST_GLIDE_MS): number {
+  if (durationMs <= 0) return 1;
+  const t = clamp01(elapsedMs / durationMs);
+  return t * t * (3 - 2 * t);
+}
+
+/**
+ * The glide the camera should paint. `blend` 0 is the live scroll pose;
+ * `blend` 1 is the parked pose of the narrated beat.
+ */
+export function applyRestBlend(liveGlide: number, blend: number): number {
+  return clamp01(liveGlide) * (1 - clamp01(blend));
+}

package/src/motion/scrolly-core.ts

@@ -0,0 +1,38 @@
+/**
+ * Pure logic for the ScrollyFeatures primitive (pinned section + progress rail).
+ * Framework-free and side-effect-free so it can be unit-tested without a DOM —
+ * the React hook in `./scrolly.tsx` wraps these with `useScroll` + `matchMedia`.
+ *
+ * Generalizes the scroll→slide mapping that `ScrollyGraph` (components/graph.tsx)
+ * and digiquant-web's `PipelineScene` both hand-roll.
+ */
+
+/**
+ * Map a 0..1 scroll progress to an active slide index, clamped to
+ * `[0, slideCount - 1]`. `floor(progress * slideCount)` gives each slide an
+ * equal dwell; progress exactly at 1 maps to the last slide (not out of range).
+ */
+export function progressToIndex(progress: number, slideCount: number): number {
+  if (slideCount <= 0) return 0;
+  const raw = Math.floor(progress * slideCount);
+  return Math.max(0, Math.min(slideCount - 1, raw));
+}
+
+/**
+ * Vertical scroll budget (in `vh`) for a pinned scrolly: one dwell per slide.
+ * Derived from the slide count (content) rather than a hardcoded viewport
+ * multiple — the #1198 lesson (a pin's scroll budget must track its content so
+ * the next section can't overlap the pin and it holds up under browser zoom).
+ * Consumers with tall/variable slides can pass a larger `vhPerSlide`.
+ */
+export function scrollyTrackHeightVh(slideCount: number, vhPerSlide = 90): number {
+  return Math.max(1, slideCount) * vhPerSlide;
+}
+
+/**
+ * Media query that forces the flow-layout fallback: small viewport OR
+ * reduced-motion. When it matches, consumers render every slide in normal flow
+ * (no pinning) — satisfying `prefers-reduced-motion: reduce` by showing all
+ * slides, and giving small screens a static stepper.
+ */
+export const STEPPER_MEDIA_QUERY = "(max-width: 860px), (prefers-reduced-motion: reduce)";

package/src/motion/scrolly.tsx

@@ -0,0 +1,95 @@
+"use client";
+/**
+ * ScrollyFeatures — shared pinned-section + progress-rail primitive (Graphite
+ * pattern). Desktop: a `position: sticky` pin whose active slide advances with
+ * scroll. Small viewport / reduced-motion: consumers render every slide in flow
+ * (see `stepper`). Generalizes the scroll→slide logic that `ScrollyGraph`
+ * (components/graph.tsx) and digiquant-web's `PipelineScene` hand-roll.
+ *
+ * The hook owns state only; markup + CSS stay with the consumer (the
+ * `scrolly-*` classes in styles/web-theme.css are the reference skin). Pure math
+ * lives in ./scrolly-core (unit-tested).
+ *
+ * Usage:
+ *   const trackRef = useRef<HTMLDivElement>(null);
+ *   const { activeIndex, stepper } = useScrollyFeatures(trackRef, { slideCount: slides.length });
+ *   if (stepper) return <FlowStepper slides={slides} />;   // all slides, no pin
+ *   return (
+ *     <div ref={trackRef} className="scrolly-track"
+ *          style={{ height: `${scrollyTrackHeightVh(slides.length)}vh` }}>
+ *       <div className="scrolly-pin">…active slide…<ScrollyRail count={slides.length} activeIndex={activeIndex} /></div>
+ *     </div>
+ *   );
+ *
+ * Docs note (EVOLUTION.md §9): **max one pinned section per page.**
+ */
+import { useEffect, useRef, useState, type RefObject } from "react";
+import { useScroll, useMotionValueEvent } from "motion/react";
+import { progressToIndex, STEPPER_MEDIA_QUERY } from "./scrolly-core";
+
+export { progressToIndex, scrollyTrackHeightVh, STEPPER_MEDIA_QUERY } from "./scrolly-core";
+
+export interface ScrollyFeatures {
+  /** Scroll-driven active slide index, clamped to the slide range. */
+  activeIndex: number;
+  /** True on small viewport OR reduced-motion — render all slides in flow, unpinned. */
+  stepper: boolean;
+}
+
+export interface UseScrollyFeaturesOptions {
+  slideCount: number;
+  /** Fired once per active-slide change (not per scroll frame). */
+  onSlideChange?: (index: number) => void;
+}
+
+export function useScrollyFeatures(
+  trackRef: RefObject<HTMLElement | null>,
+  { slideCount, onSlideChange }: UseScrollyFeaturesOptions,
+): ScrollyFeatures {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [stepper, setStepper] = useState(false);
+  const prevIndex = useRef(0);
+
+  useEffect(() => {
+    if (typeof matchMedia !== "function") return;
+    const mq = matchMedia(STEPPER_MEDIA_QUERY);
+    const apply = () => setStepper(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, []);
+
+  const { scrollYProgress } = useScroll({ target: trackRef, offset: ["start start", "end end"] });
+  useMotionValueEvent(scrollYProgress, "change", (p) => {
+    const i = progressToIndex(p, slideCount);
+    if (i !== prevIndex.current) {
+      prevIndex.current = i;
+      setActiveIndex(i);
+      onSlideChange?.(i);
+    }
+  });
+
+  return { activeIndex, stepper };
+}
+
+/**
+ * Progress rail — one tick per slide, `.on` at the active index. Decorative
+ * (`aria-hidden`); slide state is conveyed by the slide content itself.
+ */
+export function ScrollyRail({
+  count,
+  activeIndex,
+  className = "scrolly-rail",
+}: {
+  count: number;
+  activeIndex: number;
+  className?: string;
+}) {
+  return (
+    <div className={className} aria-hidden="true">
+      {Array.from({ length: count }, (_, i) => (
+        <span key={i} className={`scrolly-tick${i === activeIndex ? " on" : ""}`} />
+      ))}
+    </div>
+  );
+}