@heyramzi/ui 2.0.1 → 2.2.0

package/src/agents/helpers.ts

@@ -1,13 +1,15 @@
 /* Pure helpers for the avatar: numbers, theme, lights, idle scheduling. */
-import { DARK_INK, LIGHT_INK, luminance } from './vendor/color.js';
-import { stockLights } from './vendor/plastic.js';
+import { DARK_INK, LIGHT_INK, luminance } from "./vendor/color.js";
+import { stockLights } from "./vendor/plastic.js";
 
 const contrast = (a: number, b: number) => (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
 
 /** Off-black or off-white eyes, whichever reads stronger on the body: the vendor's fixed cutoff left 2:1 eyes on mid blues. */
 export function inkFor(body: string): string {
   const l = luminance(body);
-  return contrast(l, luminance(DARK_INK)) >= contrast(l, luminance(LIGHT_INK)) ? DARK_INK : LIGHT_INK;
+  return contrast(l, luminance(DARK_INK)) >= contrast(l, luminance(LIGHT_INK))
+    ? DARK_INK
+    : LIGHT_INK;
 }
 
 export const clamp = (v: number, lo: number, hi: number) =>
@@ -16,7 +18,7 @@ export const q = (v: number, lo: number, hi: number) => Math.round(clamp(v, lo,
 export const clampOpt = (v: number | undefined, d: number, lo: number, hi: number) =>
   clamp(v ?? d, lo, hi);
 export const deviceDpr = () =>
-  Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1);
+  Math.min(2, (typeof devicePixelRatio === "number" && devicePixelRatio) || 1);
 
 export function hashSeed(id: string): number {
   let h = 2166136261;
@@ -25,20 +27,23 @@ export function hashSeed(id: string): number {
 }
 
 export const reducedMotion = (): boolean =>
-  typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+  typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 
-export function resolveTheme(theme: 'auto' | 'dark' | 'light', el: HTMLElement | null): 'dark' | 'light' {
-  if (theme !== 'auto') return theme;
-  const host = el?.closest('[data-theme], .dark, .light') as HTMLElement | null;
+export function resolveTheme(
+  theme: "auto" | "dark" | "light",
+  el: HTMLElement | null,
+): "dark" | "light" {
+  if (theme !== "auto") return theme;
+  const host = el?.closest("[data-theme], .dark, .light") as HTMLElement | null;
   if (host) {
-    const v = host.getAttribute('data-theme');
-    if (v === 'dark' || v === 'light') return v;
-    if (host.classList.contains('dark')) return 'dark';
-    if (host.classList.contains('light')) return 'light';
+    const v = host.getAttribute("data-theme");
+    if (v === "dark" || v === "light") return v;
+    if (host.classList.contains("dark")) return "dark";
+    if (host.classList.contains("light")) return "light";
   }
-  return typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: light)').matches
-    ? 'light'
-    : 'dark';
+  return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: light)").matches
+    ? "light"
+    : "dark";
 }
 
 export function lightsFor(lightAt: number, backLight?: number, lightFront?: number) {
@@ -46,12 +51,13 @@ export function lightsFor(lightAt: number, backLight?: number, lightFront?: numb
   const b = ((backLight ?? 0) * Math.PI) / 180;
   const lights = stockLights(Math.sin(a), -Math.cos(a));
   if (backLight !== undefined) [lights.bx, lights.by] = [Math.sin(b), -Math.cos(b)];
-  if (lightFront !== undefined) lights.front = (Math.min(85, Math.max(0, lightFront)) * Math.PI) / 180;
+  if (lightFront !== undefined)
+    lights.front = (Math.min(85, Math.max(0, lightFront)) * Math.PI) / 180;
   return lights;
 }
 
 export function warmIdle(fn: () => void): () => void {
-  if (typeof requestIdleCallback === 'function') {
+  if (typeof requestIdleCallback === "function") {
     const id = requestIdleCallback(fn);
     return () => cancelIdleCallback(id);
   }

package/src/agents/index.ts

@@ -1,6 +1,6 @@
-export { default as AgentAvatar } from './agent-avatar.svelte';
-export { default as AgentCast } from './agent-cast.svelte';
-export type { Agent, AgentAvatarProps, AgentShape } from './types.js';
+export { default as AgentAvatar } from "./agent-avatar.svelte";
+export { default as AgentCast } from "./agent-cast.svelte";
+export type { Agent, AgentAvatarProps, AgentShape } from "./types.js";
 export {
   agentPresets,
   agentShapes,
@@ -8,4 +8,4 @@ export {
   agentStates,
   agentPalette,
   agentStateLabels,
-} from './types.js';
+} from "./types.js";

package/src/agents/page-state.ts

@@ -1,6 +1,6 @@
 /* What every avatar on the page shares: the batching shown-gate, so a row of
    them comes in together, the path caches, and one theme watcher. */
-import { bakesPending } from './vendor/plastic.js';
+import { bakesPending } from "./vendor/plastic.js";
 
 export const SHOW_WITHIN = 4000;
 export const waiters = new Map<object, { ready: () => boolean; show: () => void }>();
@@ -45,19 +45,19 @@ const themeListeners = new Set<() => void>();
 let themeWatch: (() => void) | null = null;
 export function onThemeChange(fn: () => void): () => void {
   themeListeners.add(fn);
-  if (!themeWatch && typeof MutationObserver === 'function' && typeof document !== 'undefined') {
+  if (!themeWatch && typeof MutationObserver === "function" && typeof document !== "undefined") {
     const fire = () => {
       for (const l of themeListeners) l();
     };
     const mo = new MutationObserver(fire);
-    const opts = { attributes: true, attributeFilter: ['class', 'data-theme'] };
+    const opts = { attributes: true, attributeFilter: ["class", "data-theme"] };
     mo.observe(document.documentElement, opts);
     if (document.body) mo.observe(document.body, opts);
-    const mq = typeof matchMedia === 'function' ? matchMedia('(prefers-color-scheme: dark)') : null;
-    mq?.addEventListener('change', fire);
+    const mq = typeof matchMedia === "function" ? matchMedia("(prefers-color-scheme: dark)") : null;
+    mq?.addEventListener("change", fire);
     themeWatch = () => {
       mo.disconnect();
-      mq?.removeEventListener('change', fire);
+      mq?.removeEventListener("change", fire);
     };
   }
   return () => {

package/src/agents/types.ts

@@ -1,4 +1,4 @@
-import type { BotAvatarFace, BotAvatarProps, BotAvatarType } from './vendor/types.js';
+import type { BotAvatarFace, BotAvatarProps, BotAvatarType } from "./vendor/types.js";
 
 /** The body shapes an agent can be drawn as. */
 export type AgentShape = BotAvatarType;
@@ -11,7 +11,7 @@ export type {
   BotAvatarHat as AgentHat,
   BotAvatarGlasses as AgentGlasses,
   BotAvatarPreset as AgentPreset,
-} from './vendor/types.js';
+} from "./vendor/types.js";
 
 export {
   botAvatarPresets as agentPresets,
@@ -20,7 +20,7 @@ export {
   botAvatarStates as agentStates,
   botAvatarPalette as agentPalette,
   stateLabels as agentStateLabels,
-} from './vendor/presets.js';
+} from "./vendor/presets.js";
 
 /** One member of a cast: a name, a role, and the face they draw. */
 export type Agent = {
@@ -51,7 +51,7 @@ type KnownProps<T> = {
  */
 export type AgentAvatarProps = Omit<
   KnownProps<BotAvatarProps>,
-  'type' | 'face' | 'ink' | 'size' | 'className' | 'style'
+  "type" | "face" | "ink" | "size" | "className" | "style"
 > & {
   /** Display name, for the default aria-label. */
   name?: string;
@@ -68,7 +68,7 @@ export type AgentAvatarProps = Omit<
   class?: string;
   style?: string;
   onclick?: (event: MouseEvent) => void;
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Hide the canvas from assistive tech when a parent already names the agent. */
-  'aria-hidden'?: boolean | 'true' | 'false';
+  "aria-hidden"?: boolean | "true" | "false";
 };

package/src/ai/ai-button/AiButton.svelte

@@ -50,12 +50,8 @@
 		size="sm"
 		icon
 		disabled={disabled || status === "processing"}
-		onclick={onclick}
-		class={cn(
-			"relative",
-			status === "processing" && "pointer-events-none",
-			className,
-		)}
+		{onclick}
+		class={cn("relative", status === "processing" && "pointer-events-none", className)}
 	>
 		{#if status === "processing"}
 			<Spinner class="size-4" />
@@ -68,12 +64,8 @@
 		{variant}
 		{size}
 		disabled={disabled || status === "processing"}
-		onclick={onclick}
-		class={cn(
-			"gap-1.5",
-			status === "processing" && "pointer-events-none",
-			className,
-		)}
+		{onclick}
+		class={cn("gap-1.5", status === "processing" && "pointer-events-none", className)}
 	>
 		{#if status === "processing"}
 			<Spinner class="size-3.5" />

package/src/ai/generation-progress/GenerationProgress.svelte

@@ -41,7 +41,9 @@
 	// DERIVED
 	// =========================
 	let heading = $derived(label || "Generating");
-	let percent = $derived(progress && progress.total > 0 ? (progress.completed / progress.total) * 100 : 0);
+	let percent = $derived(
+		progress && progress.total > 0 ? (progress.completed / progress.total) * 100 : 0,
+	);
 
 	// =========================
 	// EFFECTS
@@ -82,7 +84,9 @@
 						<!-- #key is the reflow: Svelte drops the node and builds a new one,
 						     which is what replays the pop-in on every step. -->
 						{#key progress.completed}
-							<span class="t-digit-group is-animating"><span class="t-digit">{progress.completed}</span></span>
+							<span class="t-digit-group is-animating"
+								><span class="t-digit">{progress.completed}</span></span
+							>
 						{/key}<span class="gen-total">/{progress.total}</span>
 					</span>
 				{/if}
@@ -93,7 +97,10 @@
 		</div>
 
 		<div class="gen-track" data-indeterminate={progress ? undefined : true}>
-			<div class="gen-fill" style:transform={progress ? `scaleX(${percent / 100})` : undefined}></div>
+			<div
+				class="gen-fill"
+				style:transform={progress ? `scaleX(${percent / 100})` : undefined}
+			></div>
 		</div>
 
 		{#if progress?.currentStep}

package/src/ai/prompt-input/PromptInputTextarea.svelte

@@ -70,5 +70,4 @@
 	bind:value
 	onkeydown={handleKeyDown}
 	{placeholder}
-	{...rest}
-></textarea>
+	{...rest}></textarea>

package/src/ai/response/Response.css

@@ -1,6 +1,5 @@
-/* WHY: the caret has to attach to the end of marked's {@html} output, which is
-   never touched by Svelte's scoping, so the last direct child is reached with
-   :global() while the parent class stays component-scoped. */
+/* WHY: Svelte never scopes marked's {@html} output, so the caret reaches its last child
+   with :global() while the parent class stays scoped. */
 .ai-response.is-streaming > :last-child::after {
   content: "";
   display: inline-block;

package/src/animations/avatar-group-hover.css

@@ -2,22 +2,8 @@
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
 /*
-  Usage:
-    Apply .t-avatar to each item in your group (avatar, chip,
-    badge, button). Bring your own size, shape, and stacking;
-    this stylesheet only owns the hover transform + transition.
-
-      <div class="t-avatar-group">
-        <div class="t-avatar">…</div>
-        <div class="t-avatar">…</div>
-      </div>
-
-  Wire-up (JS):
-    On mouseenter of any .t-avatar, walk every sibling and set
-    inline --shift and --scale-active with a distance falloff.
-    Set transition-timing-function inline BEFORE the variable
-    writes — --avatar-ease-in on hover-in, --avatar-ease-out on
-    the root's mouseleave.
+  JS sets each sibling's --shift and --scale-active on hover, and must set
+  transition-timing-function inline before those writes, or the ease is wrong.
 */
 
 :root {

package/src/animations/card-tilt.css

@@ -1,9 +1,6 @@
-/* Card hover tilt — transitions.dev `3d-tilt`.
-   Bind pointermove to the flat outer `.t-tilt`, never the card: the rotating
-   edges slip under the cursor and the hover flickers. JS writes --tilt-rx/ry
-   and --tilt-gx/gy, adds `.is-tilting` while moving and `.is-hover` for the
-   glare. Return and glare clocks have no token at their length, by design:
-   the settle is meant to read slower than any surface. */
+/* Card hover tilt, transitions.dev `3d-tilt`: bind pointermove to the flat outer
+   `.t-tilt`, never the card, or its rotating edges slip under the cursor and the
+   hover flickers. */
 :root {
   --tilt-perspective: 1000px;
   --tilt-return: 1000ms;

package/src/animations/digit-pop-in.css

@@ -2,21 +2,8 @@
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
 /*
-  Usage:
-    <span class="t-digit-group is-animating">
-      <span class="t-digit">1</span>
-      <span class="t-digit">2</span>
-      <span class="t-digit" data-stagger="1">.</span>
-      <span class="t-digit" data-stagger="2">3</span>
-    </span>
-
-  Replay:
-    Remove `.is-animating`, re-render digits (or swap text),
-    force a reflow, then re-add `.is-animating`.
-
-  Direction:
-    --digit-dir-x / --digit-dir-y are unit-less multipliers
-    (e.g. 1, -1, 0) applied to --digit-distance.
+  To replay, remove `.is-animating` from `.t-digit-group`, swap the digits, force a reflow, then
+  add it back, or the animation won't restart.
 */
 
 :root {

package/src/animations/dropdown.css

@@ -51,18 +51,8 @@
 }
 
 /* === Extension: bits-ui data-state integration === */
-/* WHY: bits-ui mounts content with [data-state] and [data-side]/[data-align]
-   attributes. These selectors mirror the upstream states so consumers can drop
-   .t-dropdown on a Popover/Menu/Tooltip Content.
-
-   WHY "instant-open" is in the list: a tooltip reports three open states, not
-   two. It says "delayed-open" when it waited out the hover delay and
-   "instant-open" when it skipped that delay, which is every open while
-   delayDuration is 0 and every neighbour opened inside the skip window. That
-   third name was missing here, so those tooltips mounted, took no open rule,
-   and stayed at opacity 0: present in the DOM, never on screen. Found
-   11 Sep 2026 in upsys, where the kit's provider defaulted delayDuration to 0
-   and so produced nothing but "instant-open". */
+/* WHY: a tooltip has three open states, and without "instant-open" every tooltip
+   with delayDuration 0 sat at opacity 0, never on screen (upsys, 11 Sep 2026). */
 .t-dropdown[data-state="open"],
 .t-dropdown[data-state="delayed-open"],
 .t-dropdown[data-state="instant-open"] {
@@ -111,11 +101,8 @@
   }
 }
 
-/* A tooltip that skipped its delay skips its entrance too. The first one in a
-   group waits and animates in; the neighbours the pointer travels to inside the
-   skip window are already open by the time the eye arrives, so animating them
-   only adds a wait the delay was there to hide. Scoped to the tooltip slot
-   because a menu or popover never reports this state. */
+/* A tooltip that skipped its delay skips its entrance too, since a neighbour opened
+   inside the skip window is already there when the eye arrives. */
 [data-slot="tooltip-content"].t-dropdown[data-state="instant-open"] {
   transition: none;
 }

package/src/animations/input-clear-dissolve.css

@@ -2,19 +2,9 @@
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
 /*
-  Usage:
-      <div class="t-clear has-value">
-        <input type="text" value="…" />
-        <div class="t-clear-mirror" aria-hidden="true">…</div>
-        <div class="t-clear-placeholder" aria-hidden="true">Search</div>
-        <div class="t-clear-glow" aria-hidden="true"></div>
-        <button class="t-clear-btn" aria-label="Clear">…</button>
-      </div>
-
-  The transitions live in JS (per-frame transform/opacity/filter
-  writes): the streak envelope and per-word gradient stack cannot
-  be expressed as static @keyframes. This stylesheet only owns the
-  resting state + the variables JS reads.
+  The clear runs in JS, since its per-word streak can't be static
+  @keyframes, so this file owns only the resting state and the
+  variables JS reads.
 */
 
 :root {
@@ -65,11 +55,8 @@
 .t-clear.has-value .t-clear-placeholder {
   opacity: 0;
 }
-/* The streak overlay: empty by default; JS writes a stack of
-   radial-gradient(...) layers into background during a clear,
-   then animates opacity. mix-blend-mode: multiply darkens the
-   underlying input; flip to screen in dark mode so the same
-   alpha values lighten instead of vanish. */
+/* JS paints the streak's gradients here during a clear; dark mode
+   flips multiply to screen so the same alphas lighten, not vanish. */
 .t-clear-glow {
   position: absolute;
   inset: 0;

package/src/animations/input-shake.css

@@ -2,34 +2,9 @@
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
 /*
-  Usage:
-    Apply .t-input-wrap to your wrapper, .t-input to the
-    element that should shake (your input field, its
-    bordered wrapper, whatever owns the visible border),
-    and .t-error-msg to the message you want to reveal.
-    Bring your own sizing, padding, border colors, and
-    typography.
-
-      <div class="t-input-wrap">
-        <div class="t-input">
-          <input type="text">
-        </div>
-        <p class="t-error-msg">Please enter a valid email.</p>
-      </div>
-
-  Trigger:
-    Add `.is-error` to .t-input-wrap and .t-input. Your
-    own border-color rules drive the visible color; this
-    stylesheet only owns the tween.
-    Restart the shake by removing `.is-shaking` from
-    .t-input, forcing a reflow, then re-adding it.
-    Optional: after --revert-hold ms, drop both
-    `.is-error` classes so border and message fade back
-    to neutral over --revert-dur.
-
-  Per-segment ease: each keyframe stop carries its own
-  animation-timing-function so each leg follows the Figma
-  cubic-bezier curve independently.
+  Put .is-error on .t-input-wrap and .t-input, and restart the
+  shake by removing `.is-shaking` from .t-input, forcing a
+  reflow, then re-adding it.
 */
 
 :root {
@@ -42,10 +17,8 @@
   --revert-dur: 280ms;
 }
 
-/* Border-color tween. Define your input's default / focused
-   / error border-color in your own component CSS, this rule
-   only owns the interpolation. Use a constant border-width
-   across states so the tween never shifts inner content. */
+/* This rule owns only the border-color tween, so keep the
+   border-width constant across states or the content shifts. */
 .t-input {
   transition: border-color 150ms ease-out;
   will-change: transform;
@@ -57,10 +30,8 @@
   transition: border-color var(--revert-dur, 280ms) ease-out;
 }
 
-/* Error message reveal. Visibility is delayed by --revert-dur
-   on hide so the message stays painted for the full opacity
-   fade-out. Entering .is-error drops the delay to 0 so the
-   message becomes visible immediately. */
+/* Hiding delays visibility by --revert-dur so the message stays
+   painted through its fade; .is-error drops the delay to 0. */
 .t-error-msg {
   opacity: 0;
   visibility: hidden;
@@ -76,11 +47,8 @@
     visibility 0s linear 0s;
 }
 
-/* Multi-segment keyframe with per-stop easing so each leg
-   of the shake follows its own cubic-bezier independently.
-   %-stops are cumulative durations as a fraction of the
-   total (80, 60, 80, 60 = 280ms): 28.57%, 57.14%, 78.57%,
-   100%. Recompute if any segment duration changes. */
+/* The %-stops are cumulative fractions of 280ms (80, 60, 80,
+   60), so recompute them if any segment's duration changes. */
 .t-input.is-shaking {
   animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
 }

package/src/animations/learn-more-hover.css

@@ -1,8 +1,5 @@
-/* Learn more hover — transitions.dev 24.
-   The chevron shifts along the direction it goes and its two arms rotate
-   apart about the apex, so the arrow leans into the move. Pure CSS.
-   `transform-box: view-box` is what makes the arm origin resolve against
-   the viewBox rather than each path's own bounding box. */
+/* Learn more hover, transitions.dev 24: `transform-box: view-box` makes the arm origin
+   resolve against the viewBox, not each path's own bounding box. */
 :root {
   --learn-shift: 2px;
   --learn-spread: 8deg;
@@ -22,23 +19,34 @@
   vector-effect: non-scaling-stroke;
   transition: transform var(--learn-out) var(--learn-ease);
 }
-.t-learn:hover .t-learn-chevron,
 .t-learn:focus-visible .t-learn-chevron {
   transform: translateX(var(--learn-shift));
   transition-duration: var(--learn-in);
 }
-.t-learn:hover .t-learn-arm,
 .t-learn:focus-visible .t-learn-arm {
   transition-duration: var(--learn-in);
 }
-.t-learn:hover .t-learn-arm-top,
 .t-learn:focus-visible .t-learn-arm-top {
   transform: rotate(var(--learn-spread));
 }
-.t-learn:hover .t-learn-arm-bot,
 .t-learn:focus-visible .t-learn-arm-bot {
   transform: rotate(calc(var(--learn-spread) * -1));
 }
+@media (hover: hover) and (pointer: fine) {
+  .t-learn:hover .t-learn-chevron {
+    transform: translateX(var(--learn-shift));
+    transition-duration: var(--learn-in);
+  }
+  .t-learn:hover .t-learn-arm {
+    transition-duration: var(--learn-in);
+  }
+  .t-learn:hover .t-learn-arm-top {
+    transform: rotate(var(--learn-spread));
+  }
+  .t-learn:hover .t-learn-arm-bot {
+    transform: rotate(calc(var(--learn-spread) * -1));
+  }
+}
 
 @media (prefers-reduced-motion: reduce) {
   .t-learn-chevron,

package/src/animations/like-button.css

@@ -1,7 +1,5 @@
-/* Like button — transitions.dev 23.
-   Toggle `data-liked` to fill and pop the heart; add `.is-bursting` for
-   one particle duration to fire the spray, writing --px/--py/--pdur/--pdelay
-   per dot in JS so no two bursts match. */
+/* Like button, transitions.dev 23. For the spray, JS writes --px/--py/--pdur/--pdelay
+   per dot while `.is-bursting` is on, so no two bursts match. */
 :root {
   --like-color: #f40051;
   --like-fill: var(--duration-quick, 150ms);

package/src/animations/page-side-by-side.css

@@ -2,16 +2,8 @@
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
 /*
-  Usage:
-    <div class="t-page-slide" data-page="1">
-      <section class="t-page" data-page-id="1">…</section>
-      <section class="t-page" data-page-id="2">…</section>
-    </div>
-
-  State:
-    Set data-page="1" or "2" on .t-page-slide.
-    Page 1 exits to the left, page 2 exits to the right.
-    --page-exit-enabled (0/1) disables the outgoing slide.
+  Set data-page="1" or "2" on .t-page-slide, which holds two .t-page
+  sections with data-page-id; --page-exit-enabled: 0 turns off the outgoing slide.
 */
 
 :root {

package/src/animations/plus-menu-morph.css

@@ -1,8 +1,5 @@
-/* Plus to menu morph — transitions.dev `dropdown-menu-morph`.
-   The trigger becomes the surface: width, height and radius animate while the
-   plus and the menu cross-fade through a blur. Set the open footprint on the
-   consumer side; the two sizes here are the upstream demo's. Use `dropdown.css`
-   instead when the surface is a separate popover that merely grows. */
+/* transitions.dev `dropdown-menu-morph`: the trigger itself becomes the menu. Set the open
+   size on the consumer side, since these sizes are the upstream demo's. */
 :root {
   --morph-open-dur: var(--duration-medium, 350ms);
   --morph-close-dur: var(--duration-fast, 250ms);

package/src/animations/shimmer-text.css

@@ -2,17 +2,9 @@
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
 /*
-  Usage:
-    Duplicate the visible string into data-text so the ::before
-    layer can mask the gradient onto the same glyphs. Keep them
-    in sync if the text changes.
-
-      <span class="t-shimmer" data-text="Planning next moves">
-        Planning next moves
-      </span>
-
-  Pure CSS — no JS. Tune --shimmer-base / --shimmer-highlight in
-  your own theme rules so the colors follow light / dark mode.
+  Copy the visible text into data-text and keep the two in sync, or the ::before
+  gradient lands on the wrong glyphs:
+  <span class="t-shimmer" data-text="Planning">Planning</span>
 */
 
 :root {
@@ -23,13 +15,8 @@
   --shimmer-ease: var(--ease-linear, linear);
 }
 
-/* Two-layer construction:
-   1. The base text renders normally in --shimmer-base.
-   2. ::before duplicates it via content: attr(data-text),
-      paints a transparent → highlight → transparent gradient
-      onto it, and clips that gradient to the glyphs via
-      background-clip: text. Animating background-position
-      sweeps the band across the text. */
+/* ::before repeats the text from data-text and clips a moving gradient band to its
+   glyphs with background-clip: text. */
 .t-shimmer {
   position: relative;
   display: inline-block;

package/src/animations/spinning-counter.css

@@ -1,9 +1,5 @@
-/* Spinning counter — transitions.dev 26.
-   One column per digit clips a 0-9 strip; JS translates each strip up by
-   (spins * 10 + digit) cells and staggers the columns. The motion streak is an
-   SVG feGaussianBlur with stdDeviation="0 Y" decayed per column: a CSS blur()
-   is isotropic and would smear the digit sideways. Use `digit-pop-in.css` when
-   a number simply updates in place. */
+/* Spinning counter, transitions.dev 26: the streak is an SVG feGaussianBlur with
+   stdDeviation="0 Y" because a CSS blur() is isotropic and would smear digits sideways. */
 :root {
   --reel-dur: 1400ms;
   --reel-cell: 30px;

package/src/animations/success-check.css

@@ -2,21 +2,8 @@
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
 /*
-  Usage:
-    Wrap your icon (SVG, image, anything) in .t-success-check.
-    The wrapper drives fade + rotate + blur + Y-bob; if your
-    icon is an SVG <path>, it gets the stroke-draw animation.
-
-      <span class="t-success-check" data-state="out" aria-hidden="true">
-        <svg viewBox="0 0 48 48" fill="none">…</svg>
-      </span>
-
-  Trigger:
-    Cold load is data-state="out" (opacity 0; no animation).
-    Show: set data-state="in".
-
-  Replace the stroke-dasharray placeholder (20) with the result
-  of path.getTotalLength() for your path, or set it inline in JS.
+  Wrap the icon in .t-success-check and flip data-state from "out" to "in".
+  Replace the stroke-dasharray placeholder (20) with your path's getTotalLength().
 */
 
 :root {