@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/effects-chrome/Pipeline.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "../../ui";
+
+/**
+ * Pipeline — the dashboard's workflow visualization promoted from the
+ * design reference (effects/pipeline). Stages flow left→right, a `parallel`
+ * column fans out into a dashed group, each node carries its diagnostics
+ * (wall time · tokens · model), and selecting a node opens its inputs/outputs
+ * and full diagnostics in the detail panel below. Works for sequential and
+ * parallel graphs alike; an optional summary strip carries the run-level
+ * readout. All copy and numbers arrive via props — preformatted display
+ * strings, the component never formats.
+ *
+ * Selection is uncontrolled (`defaultSelectedId` + `onSelect`); status wears
+ * the accent for `running` and fades `queued`, per the reference grammar.
+ *
+ * Client component (selection state). Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/effects-chrome.css";
+ *                 @source "<path-to>/packages/ui/src/components/effects-chrome";
+ */
+export type PipelineStatus = "done" | "running" | "queued";
+
+export type PipelineNode = {
+  id: string;
+  /** Mono node name — "ingest", "backtest" … */
+  label: string;
+  status: PipelineStatus;
+  /**
+   * One line saying what this stage does, rendered under the name in the detail
+   * panel. Optional, and the only field here that is not a run diagnostic: a
+   * pipeline drawn as a *definition* rather than as a completed run has nothing
+   * to report for wall time or tokens but still has to explain itself.
+   */
+  note?: string;
+  /** Preformatted wall-time read — "2.41s", "120ms", "—". */
+  ms?: string;
+  /** Preformatted token read — "8.2k", "—". */
+  tokens?: string;
+  /** Model / engine chip — "opus", "nautilus", "polars" … */
+  model?: string;
+  /** What fed in — one preformatted line. Absent for a stage drawn as a
+   *  definition, where nothing was measured and no artefact was handed over. */
+  inputs?: string;
+  /** What came out — one preformatted line. */
+  outputs?: string;
+  /** Preformatted cost read — "$0.11", "—". */
+  cost?: string;
+};
+
+export type PipelineColumn = {
+  id: string;
+  /** `parallel` draws the dashed fan-out group around the column's nodes. */
+  kind: "step" | "parallel";
+  /** Tag over a parallel group — "parallel · 3". */
+  label?: string;
+  nodes: PipelineNode[];
+};
+
+export type PipelineSummaryItem = {
+  /** Mono micro-caps key — "wall time", "cost" … */
+  label: string;
+  /** Preformatted value — "8.4s", "$0.13". */
+  value: string;
+  /** Accent the value (the live "running" read). */
+  running?: boolean;
+};
+
+export type PipelineProps = {
+  columns: PipelineColumn[];
+  /** Optional run-level readout strip above the flow. */
+  summary?: PipelineSummaryItem[];
+  /** Node opened on first render — defaults to the first node. */
+  defaultSelectedId?: string;
+  onSelect?: (node: PipelineNode) => void;
+  className?: string;
+};
+
+export function Pipeline({ columns, summary, defaultSelectedId, onSelect, className }: PipelineProps) {
+  const [selId, setSelId] = useState(defaultSelectedId);
+  const all = columns.flatMap((c) => c.nodes);
+  const sel = all.find((n) => n.id === selId) ?? all[0];
+
+  return (
+    <div className={className}>
+      {summary && summary.length > 0 ? (
+        <div
+          className="pl-summary flex flex-wrap gap-x-[2rem] gap-y-0 rounded-none border border-hair bg-surface/55 px-[1.1rem] py-[0.85rem]"
+          role="list"
+        >
+          {summary.map((s) => (
+            <span key={s.label} role="listitem">
+              <span className="pl-sum-k">{s.label}</span>
+              <span className={`pl-sum-v${s.running ? " pl-running" : ""}`}>{s.value}</span>
+            </span>
+          ))}
+        </div>
+      ) : null}
+
+      <div
+        className={`pl-flow flex items-center gap-0 overflow-x-auto pt-[0.4rem] px-[0.1rem] pb-[0.8rem]${
+          summary && summary.length > 0 ? " mt-[1rem]" : ""
+        }`}
+      >
+        {columns.map((col, i) => (
+          <div key={col.id} className="pl-colwrap flex items-center shrink-0">
+            <div className={`pl-col flex flex-col gap-[0.5rem]${col.kind === "parallel" ? " pl-col--par" : ""}`}>
+              {col.label ? <span className="pl-col-tag">{col.label}</span> : null}
+              {col.nodes.map((n) => (
+                <Button
+                  key={n.id}
+                  type="button"
+                  variant="ghost"
+                  className={`pl-node h-auto items-stretch justify-start border-hair bg-surface px-[0.7rem] py-[0.6rem] font-normal whitespace-normal hover:bg-transparent pl-node--${n.status}${sel && n.id === sel.id ? " is-sel" : ""}`}
+                  aria-pressed={sel ? n.id === sel.id : false}
+                  onClick={() => {
+                    setSelId(n.id);
+                    onSelect?.(n);
+                  }}
+                >
+                  <span className="pl-node-head">
+                    <span className="pl-pip" aria-hidden="true" />
+                    <span className="pl-node-label">{n.label}</span>
+                    {/* The pip dot (aria-hidden) and the pl-node--${status}
+                        class are the only place a node's done/running/queued
+                        state renders — a screen reader gets aria-pressed
+                        (selection) but nothing for run status unless this
+                        node happens to be the one currently open in the
+                        detail panel below. .pl-sr, not Tailwind's sr-only:
+                        this is a shared component (see the .tl-sr/.tm-sr
+                        precedent in terminal-loaders.css/terminal-manifest.css
+                        for why). */}
+                    <span className="pl-sr">{n.status}</span>
+                  </span>
+                  {n.ms || n.tokens ? (
+                    <span className="pl-node-diag">
+                      {n.ms ? <span>{n.ms}</span> : null}
+                      {n.tokens ? <span className="pl-node-tok">{n.tokens} tok</span> : null}
+                    </span>
+                  ) : null}
+                </Button>
+              ))}
+            </div>
+            {i < columns.length - 1 ? (
+              <span className="pl-conn" aria-hidden="true">
+                <svg
+                  viewBox="0 0 24 24"
+                  width="18"
+                  height="18"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.6"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M4 12h15M13 6l6 6-6 6" />
+                </svg>
+              </span>
+            ) : null}
+          </div>
+        ))}
+      </div>
+
+      {sel ? (
+        <div className="pl-detail">
+          <div className="pl-detail-head">
+            <span className={`pl-pip pl-pip--${sel.status}`} aria-hidden="true" />
+            <span className="pl-detail-name">{sel.label}</span>
+            {sel.model ? <span className="pl-detail-model">{sel.model}</span> : null}
+            <span className={`pl-detail-status pl-detail-status--${sel.status}`}>{sel.status}</span>
+          </div>
+          {sel.note ? <p className="pl-note">{sel.note}</p> : null}
+          {sel.inputs || sel.outputs ? (
+            <dl className="pl-io">
+              {sel.inputs ? (
+                <div>
+                  <dt>inputs</dt>
+                  <dd>{sel.inputs}</dd>
+                </div>
+              ) : null}
+              {sel.outputs ? (
+                <div>
+                  <dt>outputs</dt>
+                  <dd>{sel.outputs}</dd>
+                </div>
+              ) : null}
+            </dl>
+          ) : null}
+          {/* Only the diagnostics this node actually has. A pipeline drawn as a
+              definition has no wall time or token count to report, and printing
+              an em dash row for each of them would read as a measurement that
+              came back empty rather than one that was never taken. */}
+          {[sel.ms, sel.tokens, sel.model, sel.cost].some(Boolean) ? (
+            <div className="pl-diag-grid">
+              {sel.ms ? (
+                <div>
+                  <span className="pl-diag-k">wall time</span>
+                  <span className="pl-diag-v">{sel.ms}</span>
+                </div>
+              ) : null}
+              {sel.tokens ? (
+                <div>
+                  <span className="pl-diag-k">tokens</span>
+                  <span className="pl-diag-v">{sel.tokens}</span>
+                </div>
+              ) : null}
+              {sel.model ? (
+                <div>
+                  <span className="pl-diag-k">model</span>
+                  <span className="pl-diag-v">{sel.model}</span>
+                </div>
+              ) : null}
+              {sel.cost ? (
+                <div>
+                  <span className="pl-diag-k">cost</span>
+                  <span className="pl-diag-v">{sel.cost}</span>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/effects-chrome/RotatingPrompts.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { m, useReducedMotion } from "motion/react";
+import { Button } from "../../ui";
+
+/**
+ * RotatingPrompts — the rotating hero teaser line promoted from the design
+ * reference (effects/rotating-prompts): a mono `>` prompt shell whose text
+ * cycles through real developer questions with a rise-in transition and a
+ * blinking caret. The teaser is a door, not a poster — consumers pass the
+ * prompts and typically link the shell into the live product. Link the
+ * shell AS A SIBLING (wrap both in a common container and stretch the
+ * anchor over it, e.g. an absolutely-positioned full-cover `<a>`), not by
+ * nesting this component INSIDE an `<a>` — the shell renders a real
+ * `<button>` (the pause control below), and nesting interactive content
+ * inside other interactive content is invalid HTML: some browsers also
+ * resolve the ambiguous click target inconsistently, and the button's own
+ * preventDefault() cannot reliably cancel a `<button>`-inside-`<a>` parse
+ * in every engine the way it can for a normal, non-nested ancestor click
+ * listener.
+ *
+ * aria-live-safe: the shell announces politely; under reduced motion the
+ * rotation stops and the FIRST prompt renders statically (also the no-JS /
+ * server-rendered state, so the line always reads without JS). The caret's
+ * @keyframes blink lives in styles/effects-chrome.css.
+ *
+ * WCAG 2.2.2 (Pause, Stop, Hide): the rotation runs longer than 5s and starts
+ * automatically, so a visible pause control is required beyond the OS-level
+ * reduced-motion escape hatch — a click on the shell (or Enter/Space, since
+ * it is a real button) toggles it, aria-pressed carries the state.
+ *
+ * Client component (interval state). Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/effects-chrome.css";
+ *                 @source "<path-to>/packages/ui/src/components/effects-chrome";
+ */
+export type RotatingPromptsProps = {
+  /** The rotation, in order. First item is the reduced-motion / no-JS state. */
+  prompts: string[];
+  /** Dwell per prompt, ms. */
+  intervalMs?: number;
+  className?: string;
+};
+
+export function RotatingPrompts({ prompts, intervalMs = 3200, className }: RotatingPromptsProps) {
+  const reduced = useReducedMotion();
+  const [index, setIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  useEffect(() => {
+    if (reduced || paused || prompts.length < 2) return;
+    const timer = setInterval(() => setIndex((i) => (i + 1) % prompts.length), intervalMs);
+    return () => clearInterval(timer);
+  }, [reduced, paused, prompts.length, intervalMs]);
+
+  if (prompts.length === 0) return null;
+  const current = prompts[reduced ? 0 : index % prompts.length];
+  const showPauseControl = !reduced && prompts.length > 1;
+
+  return (
+    <div
+      className={`flex items-baseline gap-[0.55rem] rounded-none border border-hair bg-surface px-[1.2rem] py-[1rem] font-mono text-[0.9rem] min-h-[3.4rem]${
+        className ? ` ${className}` : ""
+      }`}
+      aria-live="polite"
+    >
+      <span className="text-accent" aria-hidden="true">
+        &gt;
+      </span>
+      <m.span
+        key={reduced ? "static" : index}
+        className="text-ink"
+        initial={reduced ? false : { opacity: 0, y: 6 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.32, ease: [0.22, 1, 0.36, 1] }}
+      >
+        {current}
+      </m.span>
+      <span className="prompt-caret" aria-hidden="true" />
+      {showPauseControl ? (
+        <Button
+          type="button"
+          variant="ghost"
+          className="prompt-pause h-auto w-auto border-0 bg-transparent p-[0.2rem] hover:bg-transparent ms-auto"
+          // Belt-and-suspenders even though the header comment now tells
+          // consumers to link the shell as a SIBLING, not by nesting it
+          // inside an <a>: stopPropagation alone does NOT stop an ancestor
+          // <a>'s native navigation — only preventDefault does (the
+          // anchor's default action is checked once against the event's
+          // defaultPrevented flag after the full bubble phase, regardless
+          // of where propagation was stopped) — so both are kept: preventDefault
+          // so a click meant to pause never also navigates away, stopPropagation
+          // so it never also fires some other ancestor's own click handler.
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setPaused((p) => !p);
+          }}
+          aria-pressed={paused}
+          aria-label={paused ? "Resume rotating prompts" : "Pause rotating prompts"}
+        >
+          {paused ? (
+            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true">
+              <path d="M6 4l14 8-14 8z" />
+            </svg>
+          ) : (
+            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true">
+              <rect x="5" y="4" width="5" height="16" />
+              <rect x="14" y="4" width="5" height="16" />
+            </svg>
+          )}
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/effects-chrome/StackingPanels.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+
+/**
+ * StackingPanels — the layered between-sections transition promoted from the
+ * design reference (effects/stacking-panels; mined from revolut.com). Each
+ * panel pins in turn and the next slides up over it (hairline + shadow
+ * give the layered seam); as a panel is covered it scales back and dims.
+ *
+ * The "covered" amount keys off the *next* panel's approach to the pin line —
+ * not the panel's own view progress — so it's driven by a manual scroll
+ * handler writing to refs (the ResearchPipeline / zoom-morph pattern), which
+ * also keeps it verifiable. Scroll mechanics stay here per migrate-vs-leave;
+ * only the panel CONTENT arrives via props. Reduced motion: a plain sticky
+ * stack, no transform/dim writes. Content is server-rendered and fully
+ * readable with no JS.
+ *
+ * The sticky pin offset reads `--nav-h` from the consuming app (fallback
+ * 3.4rem) — see styles/effects-chrome.css.
+ *
+ * Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/effects-chrome.css";
+ *                 @source "<path-to>/packages/ui/src/components/effects-chrome";
+ */
+export type StackingPanel = {
+  /** Mono accent index over the title — "01", "2.0" … */
+  tag: string;
+  /** Serif panel title. */
+  title: string;
+  /** One or two sentences of mechanism. */
+  body: ReactNode;
+};
+
+export type StackingPanelsProps = {
+  panels: StackingPanel[];
+  className?: string;
+};
+
+const clamp = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v));
+
+export function StackingPanels({ panels, className }: StackingPanelsProps) {
+  const panelRefs = useRef<(HTMLElement | null)[]>([]);
+
+  useEffect(() => {
+    const els = panelRefs.current.filter(Boolean) as HTMLElement[];
+    if (els.length < 2) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    const stickyTop = parseFloat(getComputedStyle(els[0]).top) || 70;
+
+    let ticking = false;
+    const onScroll = () => {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(() => {
+        const coverStart = window.innerHeight * 0.55;
+        for (let i = 0; i < els.length - 1; i++) {
+          const nextTop = els[i + 1].getBoundingClientRect().top;
+          const covered = clamp((stickyTop + coverStart - nextTop) / coverStart, 0, 1);
+          els[i].style.transform = `translateY(${covered * -14}px) scale(${1 - covered * 0.06})`;
+          const dim = els[i].querySelector<HTMLElement>(".stk-dim");
+          if (dim) dim.style.opacity = `${covered * 0.55}`;
+        }
+        ticking = false;
+      });
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [panels.length]);
+
+  return (
+    <div className={className}>
+      {panels.map((p, i) => (
+        <section
+          key={p.tag}
+          className="stk-panel"
+          ref={(el) => {
+            panelRefs.current[i] = el;
+          }}
+        >
+          <div className="relative z-[1] max-w-[34rem]">
+            <span className="font-mono text-[0.7rem] tracking-[0.14em] text-accent">{p.tag}</span>
+            <h3 className="mt-[0.4rem] font-display font-normal text-[clamp(1.8rem,4vw,2.8rem)] tracking-[-0.015em] text-ink">
+              {p.title}
+            </h3>
+            <p className="mt-[0.7rem] max-w-[42ch] text-[0.95rem] leading-[1.6] text-ink-soft">
+              {p.body}
+            </p>
+          </div>
+          <span className="stk-dim" aria-hidden="true" />
+        </section>
+      ))}
+    </div>
+  );
+}

package/src/components/effects-chrome/TabStrip.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { useCallback, useLayoutEffect, useRef, type ReactNode } from "react";
+import { useReducedMotion } from "motion/react";
+import { Button } from "../../ui";
+
+/**
+ * TabStrip — the sliding-indicator tab strip promoted from the design
+ * reference (chrome/tabs). A proper tablist: role="tablist"/"tab",
+ * aria-selected, roving tabindex, ArrowLeft/Right + Home/End keyboard nav.
+ * The active indicator is a single absolutely-positioned element whose
+ * transform/width (and, for the box dresses, height) are measured from the
+ * active tab and written straight to a ref, so the slide is a CSS transition
+ * — no `layoutId` (the apps' LazyMotion runs `domAnimation`, which omits
+ * layout animations) and no per-frame React state. Survives resize and
+ * re-measures on a `dir` flip (ResizeObserver on the strip and its tabs;
+ * MutationObserver on <html>'s `dir`/`class`/`data-theme`/`style`), so the
+ * ink is correct the instant the document mirrors — not only after the next
+ * tab click. Honours reduced motion (indicator jumps, no slide). The ink
+ * anchors on
+ * `inset-inline-start` and measures the active tab from that same inline-start
+ * edge, so it lands under the active tab in both LTR and RTL; arrow-key nav
+ * swaps ArrowLeft/ArrowRight under RTL to match the visual order.
+ *
+ * Three dresses: `underline` for content regions, `pill` for a compact
+ * filled-rect mode switch (API name kept; shape is radius 0), `chip` for a
+ * wrapping row of bordered chips (dashboard sub-nav — mono face,
+ * accent-tinted active chip). `pill` and `chip` position the ink with
+ * translate(x, y) + measured height, so `chip` rows may flex-wrap. The strip is controlled (`active` + `onChange`);
+ * panels are consumer-owned — wire them with the exported `tabId`/
+ * `tabPanelId` helpers:
+ *
+ *   <TabStrip tabs={TABS} active={i} onChange={setI} label="Account view" />
+ *   <div role="tabpanel" id={tabPanelId("Account view", tab.id)}
+ *        aria-labelledby={tabId("Account view", tab.id)}>…</div>
+ *
+ * That per-tab-id default is only correct when the consumer genuinely mounts
+ * ONE role="tabpanel" per tab. Content-swapping consumers — one physical
+ * panel whose content changes with `active`, which is the common case —
+ * must pass `sharedPanel` instead: every tab's aria-controls then points at
+ * the CURRENTLY ACTIVE tab's panel id (matching the one real panel, which
+ * the consumer keys the same way: id={tabPanelId(label, tabs[active].id)}),
+ * rather than each tab dangling a reference to an id that only exists while
+ * IT is the active one. Found live in two shipped consumers (#2272) and,
+ * closer to home, in this file's own reference showcase before this fix —
+ * the tell is a single tabpanel below the strip whose `key` changes with
+ * `active` rather than one tabpanel per tab.
+ *
+ * When the consumer's panels carry no DOM ids at all (e.g. a wrapper
+ * adapting legacy children, or no panel semantics apply), pass
+ * `linkPanels={false}` to omit `aria-controls` entirely — the attribute is
+ * optional in the APG tabs pattern, and a dangling reference is worse than
+ * none.
+ *
+ * Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/effects-chrome.css";
+ *                 @source "<path-to>/packages/ui/src/components/effects-chrome";
+ */
+export type TabItem = { id: string; label: ReactNode };
+
+export type TabStripProps = {
+  tabs: TabItem[];
+  /** Index of the active tab. */
+  active: number;
+  onChange: (index: number) => void;
+  /** Accessible tablist name; also seeds the tab/panel id pairing. */
+  label: string;
+  variant?: "underline" | "pill" | "chip";
+  /** Emit aria-controls → tabPanelId(label, id) (default). False = omit. */
+  linkPanels?: boolean;
+  /**
+   * True when the consumer mounts ONE physical role="tabpanel" whose content
+   * swaps with `active`, rather than one tabpanel per tab (see the module
+   * doc comment above). Every tab's aria-controls then points at the
+   * currently active tab's panel id instead of its own — the one id that
+   * actually exists in the DOM — so inactive tabs never dangle a reference.
+   * No-op when `linkPanels` is false.
+   */
+  sharedPanel?: boolean;
+  className?: string;
+};
+
+/** Id base derived from the tablist label (spaces collapsed to dashes). */
+export function tabBaseId(label: string): string {
+  return label.replace(/\s+/g, "-");
+}
+
+/** DOM id of the tab button for `tabId(label, tab.id)` — pair with aria-labelledby. */
+export function tabId(label: string, id: string): string {
+  return `${tabBaseId(label)}-tab-${id}`;
+}
+
+/** DOM id the consumer's role="tabpanel" must carry (aria-controls points here). */
+export function tabPanelId(label: string, id: string): string {
+  return `${tabBaseId(label)}-panel-${id}`;
+}
+
+export function TabStrip({
+  tabs,
+  active,
+  onChange,
+  label,
+  variant = "underline",
+  linkPanels = true,
+  sharedPanel = false,
+  className,
+}: TabStripProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const inkRef = useRef<HTMLSpanElement>(null);
+  const mounted = useRef(false);
+  const reduced = useReducedMotion();
+
+  const position = useCallback(
+    (animate: boolean) => {
+      const list = listRef.current;
+      const ink = inkRef.current;
+      if (!list || !ink) return;
+      const el = list.querySelectorAll<HTMLButtonElement>('[role="tab"]')[active];
+      if (!el) return;
+      const listRect = list.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      // The ink is anchored with inset-inline-start: 0, so its origin mirrors
+      // with the strip. Measure the active tab from that same inline-start
+      // edge (physical left in LTR, physical right in RTL) and translate by
+      // the physical delta — `transform` has no logical form, so RTL negates.
+      const rtl = getComputedStyle(list).direction === "rtl";
+      const x = rtl ? listRect.right - elRect.right : elRect.left - listRect.left;
+      const y = elRect.top - listRect.top;
+      ink.style.transition = animate ? "" : "none";
+      // translate(x, y): measured against the strip's padding box — the same
+      // origin as the ink's absolute inset-inline-start/top — so the box
+      // dresses (pill/chip) track the tab even across wrapped rows.
+      ink.style.transform = `translate(${rtl ? -x : x}px, ${y}px)`;
+      ink.style.width = `${elRect.width}px`;
+      // The underline ink keeps its CSS height (2px, strip-bottom anchored);
+      // the box dresses take the tab's own height.
+      if (variant !== "underline") ink.style.height = `${elRect.height}px`;
+      if (!animate) {
+        // flush the jump before restoring the transition so it never animates
+        void ink.offsetWidth;
+        ink.style.transition = "";
+      }
+    },
+    [active, variant],
+  );
+
+  useLayoutEffect(() => {
+    position(mounted.current && !reduced);
+    mounted.current = true;
+  }, [position, reduced]);
+
+  // Re-measure whenever the geometry the ink is derived from can change: the
+  // strip's own box (font/zoom/layout), any tab's box (label reflow, wrap),
+  // and the document's writing direction. A `dir` flip is the case the
+  // reference audit caught (/rtl): the ink kept its LTR offset ~372px from the
+  // active tab until the next click, because nothing re-ran `position()` — a
+  // window `resize` never fires for it. ResizeObserver covers the box changes;
+  // MutationObserver on <html>'s `dir` (plus `class`/`data-theme`/`style`,
+  // which can restyle the strip through a theme/livery swap) covers the
+  // direction flip and any out-of-React dir change, not just the one the kit's
+  // own DirectionProvider makes.
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const remeasure = () => position(false);
+    const ro = new ResizeObserver(remeasure);
+    ro.observe(list);
+    for (const tab of list.querySelectorAll<HTMLElement>('[role="tab"]')) ro.observe(tab);
+    const mo = new MutationObserver(remeasure);
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir", "class", "data-theme", "style"],
+    });
+    window.addEventListener("resize", remeasure);
+    return () => {
+      ro.disconnect();
+      mo.disconnect();
+      window.removeEventListener("resize", remeasure);
+    };
+  }, [position]);
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    // In an RTL strip the tabs run right-to-left, so "next" is visually to the
+    // left: ArrowLeft/ArrowRight swap their DOM-order meaning.
+    const rtl = listRef.current
+      ? getComputedStyle(listRef.current).direction === "rtl"
+      : false;
+    const nextInDom = (active + 1) % tabs.length;
+    const prevInDom = (active - 1 + tabs.length) % tabs.length;
+    let next: number;
+    if (e.key === "ArrowRight") next = rtl ? prevInDom : nextInDom;
+    else if (e.key === "ArrowLeft") next = rtl ? nextInDom : prevInDom;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = tabs.length - 1;
+    else return;
+    e.preventDefault();
+    onChange(next);
+    listRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]')[next]?.focus();
+  };
+
+  return (
+    <div
+      ref={listRef}
+      className={`tab-strip ${variant}${className ? ` ${className}` : ""}`}
+      role="tablist"
+      aria-label={label}
+      onKeyDown={onKeyDown}
+    >
+      <span ref={inkRef} className={`tab-ink ${variant}`} aria-hidden="true" />
+      {tabs.map((t, i) => (
+        <Button
+          key={t.id}
+          type="button"
+          role="tab"
+          variant="ghost"
+          id={tabId(label, t.id)}
+          aria-selected={i === active}
+          aria-controls={
+            linkPanels
+              ? tabPanelId(label, sharedPanel ? tabs[active].id : t.id)
+              : undefined
+          }
+          tabIndex={i === active ? 0 : -1}
+          className="tab-btn h-auto inline-block border-0 bg-transparent text-[0.76rem] font-normal hover:bg-transparent"
+          onClick={() => onChange(i)}
+        >
+          {t.label}
+        </Button>
+      ))}
+    </div>
+  );
+}