motion-ui-skill 2.0.0

package/lib/hooks/use-row-cursor.ts

@@ -0,0 +1,86 @@
+"use client";
+
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+
+/**
+ * Where the keyboard or the pointer last moved to: the row's id, stamped with
+ * the query it was placed under.
+ */
+type RowCursor = { id: string; query: string };
+
+/** The cursor's row, or -1 once the query has moved on or the row has left. */
+function indexOfCursor(
+  rows: readonly { id: string }[],
+  query: string,
+  cursor: RowCursor | null,
+) {
+  if (cursor === null || cursor.query !== query) return -1;
+  return rows.findIndex((row) => row.id === cursor.id);
+}
+
+/**
+ * The highlighted row of a list whose rows can change under it.
+ *
+ * Which row is highlighted is resolved during render, never in a passive
+ * effect: a passive effect runs after the commit, so a list that had just
+ * changed would carry an `aria-activedescendant` naming a row that has left it,
+ * and a key pressed in that window would commit the wrong row or nothing at
+ * all.
+ *
+ * The cursor holds the row's id, not its position. A position alone cannot tell
+ * a list that shrank from one that swapped its rows for a different set of the
+ * same length, and the second case is the one that silently hands Enter to a
+ * row the user never chose. A cursor whose row has left the list returns the
+ * highlight to the first row rather than to the nearest surviving one: the row
+ * the user aimed at is gone, and the first row is where a new query already
+ * puts the highlight.
+ *
+ * Pass the query the list is filtered by. The cursor is stamped with it and
+ * dropped when it changes, so a caller cannot forget to clear it — including a
+ * caller whose query arrives as a prop and so never runs its own handler. Rows
+ * that come back under a query that has moved on cannot revive it either.
+ * `moveTo(null)` is for deliberate resets, such as reopening the list.
+ *
+ * Both callbacks keep one identity for the life of the component, and read the
+ * rows and the query through a ref to do it. A caller will put them in an
+ * effect's dependencies — the exhaustive-deps rule makes it — and a `moveTo`
+ * rebuilt on every keystroke would re-run that effect on every keystroke.
+ */
+export function useRowCursor(rows: readonly { id: string }[], query: string) {
+  const [cursor, setCursor] = useState<RowCursor | null>(null);
+  // Written after commit, not during render: a render React discards or has not
+  // finished still runs the component body, and an event handler that read this
+  // in that window would stamp the cursor with a query the committed tree does
+  // not have.
+  const latest = useRef({ rows, query });
+  useLayoutEffect(() => {
+    latest.current = { rows, query };
+  });
+
+  const cursorRow = indexOfCursor(rows, query, cursor);
+  // Cleared rather than ignored: React re-runs this render with the cursor
+  // already gone, so rows that come back cannot revive a highlight the user has
+  // stopped aiming at.
+  if (cursor !== null && cursorRow < 0) setCursor(null);
+
+  const moveTo = useCallback(
+    (id: string | null) =>
+      setCursor(id === null ? null : { id, query: latest.current.query }),
+    [],
+  );
+
+  const moveActive = useCallback((direction: 1 | -1) => {
+    const { rows: live, query: liveQuery } = latest.current;
+    const last = live.length - 1;
+    if (last < 0) return;
+    // Steps from the row the cursor is really on, inside the update, so that
+    // two keys landing in one batch move two rows rather than one.
+    setCursor((current) => {
+      const at = Math.max(indexOfCursor(live, liveQuery, current), 0);
+      const next = Math.min(Math.max(at + direction, 0), last);
+      return { id: live[next].id, query: liveQuery };
+    });
+  }, []);
+
+  return { activeIndex: cursorRow < 0 ? 0 : cursorRow, moveTo, moveActive };
+}

package/lib/hooks/use-slider.ts

@@ -0,0 +1,176 @@
+"use client";
+
+import { type KeyboardEvent, type PointerEvent, useCallback, useRef, useState } from "react";
+import { capturePointer, releasePointer } from "@/lib/touch";
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+
+/** Nearest legal value on [min, max] for the given step. max counts as a
+ * candidate when the step does not divide the range, so a pointer near the end
+ * does not snap back onto the last whole step. */
+export function snapSliderValue(next: number, min: number, max: number, step: number): number {
+  // Neither case has a grid to walk. An empty range has exactly one legal
+  // point, and a non-positive step only needs a clamp, which also keeps the
+  // division below away from zero.
+  if (!(max > min)) return min;
+  if (!(step > 0)) return clamp(next, min, max);
+  const whole = Math.floor(Number(((max - min) / step).toFixed(6)));
+  const lastWhole = Number((min + whole * step).toFixed(6));
+  const toGrid = clamp(Math.round((next - min) / step) * step + min, min, lastWhole);
+  const snapped =
+    lastWhole < max && Math.abs(next - max) <= Math.abs(next - toGrid) ? max : toGrid;
+  return Number(snapped.toFixed(6));
+}
+
+export interface SliderOptions {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  "aria-label"?: string;
+  /** Announced instead of the raw number — pass one when the value carries a
+   * unit or a suffix ("72.5 kg", "35%"); a bare number needs no valueText. */
+  formatValueText?: (value: number) => string;
+}
+
+/**
+ * Shared value + input plumbing for slider designs: controlled/uncontrolled
+ * value, step snapping, pointer-capture drag along a track and arrow-key
+ * control. Visuals and motion live in the component; this only owns the number.
+ */
+export function useSlider({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  "aria-label": ariaLabel,
+  formatValueText,
+}: SliderOptions) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const sliderEl = useRef<HTMLElement | null>(null);
+  // The state drives visuals. Move reads this ref instead, so the first
+  // pointermove after pointerdown does not have to wait on a re-render.
+  const draggingRef = useRef(false);
+  const [internal, setInternal] = useState(defaultValue);
+  const [dragging, setDragging] = useState(false);
+  const controlled = value !== undefined;
+  // Collapse inverted or empty ranges and non-positive steps here, so that
+  // percent, ticks and the keyboard maths never divide by zero or walk a
+  // NaN grid.
+  const lo = min;
+  const hi = max > min ? max : min;
+  const stride = step > 0 ? step : 1;
+  const current = clamp(controlled ? value : internal, lo, hi);
+  const percent = hi > lo ? ((current - lo) / (hi - lo)) * 100 : 0;
+
+  const commit = useCallback(
+    (next: number) => {
+      const clean = snapSliderValue(next, lo, hi, stride);
+      if (!controlled) setInternal(clean);
+      onValueChange?.(clean);
+    },
+    [controlled, onValueChange, lo, hi, stride],
+  );
+
+  const commitFromX = useCallback(
+    (clientX: number) => {
+      const rect = trackRef.current?.getBoundingClientRect();
+      if (!rect || rect.width === 0) return;
+      const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+      commit(lo + ratio * (hi - lo));
+    },
+    [commit, lo, hi],
+  );
+
+  const onPointerDown = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (disabled) return;
+      // Start the drag first: capture is a convenience, and a browser that
+      // refuses it — or a test DOM that has no pointer capture at all — must
+      // not take the drag down with it.
+      draggingRef.current = true;
+      setDragging(true);
+      capturePointer(event.currentTarget, event.pointerId);
+      // A click on the track should land keyboard focus on the handle.
+      sliderEl.current?.focus({ preventScroll: true });
+      commitFromX(event.clientX);
+    },
+    [disabled, commitFromX],
+  );
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (!draggingRef.current || disabled) return;
+      commitFromX(event.clientX);
+    },
+    [disabled, commitFromX],
+  );
+
+  const endDrag = useCallback((event: PointerEvent<HTMLDivElement>) => {
+    releasePointer(event.currentTarget, event.pointerId);
+    draggingRef.current = false;
+    setDragging(false);
+  }, []);
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (disabled) return;
+      const map: Record<string, number> = {
+        ArrowRight: current + stride,
+        ArrowUp: current + stride,
+        ArrowLeft: current - stride,
+        ArrowDown: current - stride,
+        PageUp: current + stride * 10,
+        PageDown: current - stride * 10,
+        Home: lo,
+        End: hi,
+      };
+      if (event.key in map) {
+        event.preventDefault();
+        commit(map[event.key]);
+      }
+    },
+    [disabled, current, stride, lo, hi, commit],
+  );
+
+  return {
+    current,
+    percent,
+    dragging,
+    min: lo,
+    max: hi,
+    step: stride,
+    commit,
+    /** Pointer handlers for the track element — drag anywhere on it. */
+    trackProps: {
+      ref: trackRef,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onLostPointerCapture: endDrag,
+    },
+    /** ARIA + keyboard props for the focusable slider element. */
+    sliderProps: {
+      // Callback keeps the handle typed across button/div/motion hosts.
+      ref: (node: HTMLElement | null) => {
+        sliderEl.current = node;
+      },
+      role: "slider" as const,
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-valuemin": lo,
+      "aria-valuemax": hi,
+      "aria-valuenow": current,
+      "aria-valuetext": formatValueText?.(current),
+      "aria-disabled": disabled || undefined,
+      onKeyDown,
+    },
+  };
+}

package/lib/hooks/use-tap-gesture.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import { useMemo, useRef } from "react";
+
+/** What a pointerdown recorded, read back by the click that ends its gesture. */
+export interface TapRecord<S> {
+  /** Which input started the gesture. */
+  pointerType: string;
+  /** What the surface was showing when it started. */
+  state: S;
+}
+
+export interface TapGesture<S> {
+  /** Record the gesture a pointerdown starts, with the state it starts in. */
+  start: (event: { pointerType: string }, state: S) => void;
+  /** Read the record and clear it. `null` when no pointer is behind this click. */
+  take: () => TapRecord<S> | null;
+  /** Drop the record: this gesture will never spend it on a click. */
+  drop: () => void;
+}
+
+/**
+ * The pointer gesture behind a click, recorded where the click cannot report
+ * it. A `click` carries no `pointerType` in the engines that matter, so the
+ * `pointerdown` before it is the only thing that says which input activated
+ * the control — and whether one did at all, since keyboard activation
+ * synthesizes a click with no pointer behind it.
+ *
+ * State goes in with the record because a click reports that no better: a
+ * browser that focuses a control on contact can open the very panel the tap
+ * was meant to open, and reading "is it open" at click time then undoes it.
+ * What the gesture started against is what it acts on.
+ *
+ * The record is spent by one click and dropped by everything else, because a
+ * record that outlives its gesture is worse than none:
+ *
+ * - A scroll or an OS gesture takes the touch away — `pointercancel`, no click
+ *   ever — and the finger would sit in the record until some later click.
+ * - That later click is often `Enter` on a keyboard, which arrives with no
+ *   pointerdown of its own and would inherit the abandoned finger. A keydown
+ *   is the start of a keyboard activation and never part of a tap, so it drops
+ *   the record too.
+ *
+ * Both ends have to be wired by the surface: `drop` on `onPointerCancel` and
+ * on `onKeyDown`.
+ */
+export function useTapGesture<S>(): TapGesture<S> {
+  const record = useRef<TapRecord<S> | null>(null);
+
+  return useMemo(
+    () => ({
+      start: (event, state) => {
+        record.current = { pointerType: event.pointerType, state };
+      },
+      take: () => {
+        const spent = record.current;
+        record.current = null;
+        return spent;
+      },
+      drop: () => {
+        record.current = null;
+      },
+    }),
+    [],
+  );
+}

package/lib/hooks/use-touch-capable.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * Returns true on devices that can be touched, whatever else they claim.
+ *
+ * This is not the inverse of `useHoverCapable`: iPadOS Safari browses
+ * desktop-class and answers `(hover: hover) and (pointer: fine)` with true
+ * while a finger is the only input there is, so anything that treats
+ * hover-capable as "no touch here" strands every iPad. Gate the *touch path*
+ * of an interaction on this hook and leave hover-only polish on
+ * `useHoverCapable`, so a component that opens on hover also opens on tap.
+ */
+export function useTouchCapable() {
+  const [canTouch, setCanTouch] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia?.("(any-pointer: coarse)");
+    // iPadOS disguises its pointer media queries; maxTouchPoints it reports
+    // honestly, which is what makes it the standard iPad tell.
+    const update = () =>
+      setCanTouch(Boolean(mq?.matches) || navigator.maxTouchPoints > 0);
+    update();
+    mq?.addEventListener?.("change", update);
+    return () => mq?.removeEventListener?.("change", update);
+  }, []);
+
+  return canTouch;
+}

package/lib/presence-gate.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useIsPresent } from "motion/react";
+import type { ReactNode } from "react";
+
+export interface PresenceGateRenderProps {
+  /**
+   * False from the render that starts the exit animation onward. An overlay
+   * kept in the tree by `AnimatePresence` is still the topmost thing on the
+   * page, so anything it decides from `open` alone stays true for the whole
+   * exit — this is the boolean that already knows the overlay is leaving.
+   */
+  isPresent: boolean;
+  /**
+   * Spread onto every layer that takes pointer events while the overlay is
+   * open. Interaction releases in the same commit that starts the exit while
+   * the visual exit keeps playing: pointer events stop landing, and `inert`
+   * drops the subtree from focus order, from tab order and from the
+   * accessibility tree — an exiting dialog is not a dialog you can still type
+   * into. A layer that never takes pointer events (a wrapper that only centres
+   * the panel) takes `inert={!isPresent}` alone, so its own
+   * `pointer-events-none` is not overwritten.
+   */
+  gate: {
+    inert: boolean;
+    style: { pointerEvents: "auto" | "none" };
+  };
+}
+
+export interface PresenceGateProps {
+  children: (props: PresenceGateRenderProps) => ReactNode;
+}
+
+/**
+ * Reads the presence of the subtree it renders and hands it down.
+ *
+ * `useIsPresent` only answers inside the `AnimatePresence` subtree, and the
+ * components that own an overlay render the `AnimatePresence` themselves, so
+ * the boolean has to be read one component further down: this is that
+ * component, and the render prop is how it reaches the layers.
+ */
+export function PresenceGate({ children }: PresenceGateProps) {
+  const isPresent = useIsPresent();
+
+  return children({
+    isPresent,
+    gate: {
+      inert: !isPresent,
+      style: { pointerEvents: isPresent ? "auto" : "none" },
+    },
+  });
+}

package/lib/styles.ts

@@ -0,0 +1,124 @@
+/**
+ * Motion UI - Multi-Style Presets & Aesthetic Themes
+ *
+ * Provides canonical style presets across 6 distinct design aesthetics:
+ * - `minimal`: Clean, monochrome, flat surfaces, subtle borders (shadcn / Vercel style)
+ * - `origin`: High-craft, micro-elevation, fine inner border glows, dark luxury (Coss / Cal.com style)
+ * - `enterprise`: High information density, compact paddings, structured hierarchy (KeenThemes ReUI style)
+ * - `glow`: Luminous radial glows, metallic beam accents, dark ambient highlights (ibelick style)
+ * - `ios`: Fluid liquid curves, translucent backdrop blur, tactile bounce, haptics (Expo / Apple style)
+ * - `brutalist`: 2px/3px solid black borders, hard offset shadows, high contrast retro (Neo-brutalist style)
+ */
+
+import { SPRING_BOUNCE, SPRING_GENTLE, SPRING_PRESS, SPRING_SNAPPY, type SpringConfig } from "./ease";
+
+export type StylePreset =
+  | "minimal"
+  | "origin"
+  | "enterprise"
+  | "glow"
+  | "ios"
+  | "brutalist";
+
+export interface StyleTokens {
+  name: string;
+  description: string;
+  card: string;
+  buttonPrimary: string;
+  buttonSecondary: string;
+  buttonGhost: string;
+  input: string;
+  badge: string;
+  panel: string;
+  radius: string;
+  spring: SpringConfig;
+}
+
+export const STYLE_PRESETS: Record<StylePreset, StyleTokens> = {
+  minimal: {
+    name: "Minimal",
+    description: "Clean monochrome typography, flat card surfaces, crisp 1px borders, and zero-distraction layout.",
+    card: "rounded-xl border border-border bg-card text-card-foreground shadow-none",
+    buttonPrimary: "rounded-lg bg-foreground text-background font-medium hover:bg-foreground/90 transition-colors shadow-sm",
+    buttonSecondary: "rounded-lg border border-border bg-background text-foreground font-medium hover:bg-muted/60 transition-colors",
+    buttonGhost: "rounded-lg text-foreground hover:bg-muted font-medium transition-colors",
+    input: "rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-foreground focus:ring-1 focus:ring-foreground/20",
+    badge: "rounded-md border border-border bg-muted/50 px-2 py-0.5 text-xs font-medium text-foreground",
+    panel: "rounded-xl border border-border bg-card shadow-lg",
+    radius: "rounded-lg",
+    spring: SPRING_PRESS,
+  },
+  origin: {
+    name: "Origin (High-Craft)",
+    description: "Subtle gradients, micro-elevation, fine inner specular borders, refined typography, and precision focus rings.",
+    card: "rounded-2xl border border-border/70 bg-gradient-to-b from-card to-card/90 p-5 shadow-sm ring-1 ring-white/5 backdrop-blur-sm",
+    buttonPrimary: "rounded-xl bg-primary text-primary-foreground font-semibold shadow-[0_1px_2px_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,0.1)_inset] hover:brightness-105 active:scale-[0.98] transition-all",
+    buttonSecondary: "rounded-xl border border-border/80 bg-card/80 text-foreground font-medium shadow-sm hover:bg-muted/70 active:scale-[0.98] transition-all",
+    buttonGhost: "rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted/60 font-medium transition-all",
+    input: "rounded-xl border border-border/80 bg-card/70 px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground/80 shadow-inner focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all",
+    badge: "rounded-full border border-primary/20 bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05)]",
+    panel: "rounded-2xl border border-border/80 bg-card/95 p-4 shadow-xl ring-1 ring-white/10 backdrop-blur-md",
+    radius: "rounded-xl",
+    spring: SPRING_SNAPPY,
+  },
+  enterprise: {
+    name: "Enterprise (Dense ReUI)",
+    description: "High data-density, compact spacing, clear semantic contrast, sharp geometry, and functional clarity.",
+    card: "rounded-lg border border-border bg-card p-4 shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05)]",
+    buttonPrimary: "rounded-md bg-primary text-primary-foreground text-xs font-semibold px-3 py-1.5 hover:bg-primary/90 transition-colors",
+    buttonSecondary: "rounded-md border border-border bg-secondary text-secondary-foreground text-xs font-medium px-3 py-1.5 hover:bg-muted transition-colors",
+    buttonGhost: "rounded-md text-foreground text-xs hover:bg-muted px-2.5 py-1.5 transition-colors",
+    input: "rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary",
+    badge: "rounded border border-border bg-muted px-1.5 py-0.5 text-[11px] font-semibold text-foreground tracking-tight",
+    panel: "rounded-lg border border-border bg-card p-3 shadow-md",
+    radius: "rounded-md",
+    spring: SPRING_PRESS,
+  },
+  glow: {
+    name: "Luminous Glow",
+    description: "Deep dark canvases with radial gradient halos, spotlight cursor highlights, and cyan/purple border beams.",
+    card: "relative rounded-2xl border border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-6 shadow-2xl backdrop-blur-xl overflow-hidden before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_50%_0%,rgba(59,130,246,0.15),transparent_70%)]",
+    buttonPrimary: "rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium shadow-[0_0_20px_rgba(79,70,229,0.4)] hover:shadow-[0_0_25px_rgba(79,70,229,0.6)] hover:brightness-110 active:scale-[0.98] transition-all",
+    buttonSecondary: "rounded-xl border border-blue-500/30 bg-card/60 text-foreground font-medium shadow-[0_0_15px_rgba(59,130,246,0.15)] hover:border-blue-500/50 hover:bg-card active:scale-[0.98] transition-all",
+    buttonGhost: "rounded-xl text-foreground/80 hover:text-white hover:bg-white/10 font-medium transition-colors",
+    input: "rounded-xl border border-border/80 bg-background/60 px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 backdrop-blur-md shadow-[0_0_15px_rgba(59,130,246,0.1)]",
+    badge: "rounded-full border border-blue-500/40 bg-blue-500/10 px-3 py-0.5 text-xs font-medium text-blue-400 shadow-[0_0_10px_rgba(59,130,246,0.2)]",
+    panel: "rounded-2xl border border-border/60 bg-card/90 p-5 shadow-[0_0_40px_rgba(0,0,0,0.5)] backdrop-blur-2xl ring-1 ring-white/10",
+    radius: "rounded-2xl",
+    spring: SPRING_GENTLE,
+  },
+  ios: {
+    name: "iOS Liquid",
+    description: "Deep rounded squircle corners, translucent blurred glass surfaces, tactile spring bounce, and touch-first layout.",
+    card: "rounded-3xl border border-white/20 dark:border-white/10 bg-white/70 dark:bg-zinc-900/70 p-5 shadow-xl backdrop-blur-2xl",
+    buttonPrimary: "rounded-2xl bg-blue-500 text-white font-semibold py-2.5 px-4 shadow-md hover:bg-blue-600 active:scale-95 transition-transform",
+    buttonSecondary: "rounded-2xl bg-zinc-200/80 dark:bg-zinc-800/80 text-foreground font-semibold py-2.5 px-4 backdrop-blur-lg hover:bg-zinc-300 dark:hover:bg-zinc-700 active:scale-95 transition-transform",
+    buttonGhost: "rounded-2xl text-blue-500 font-semibold hover:bg-blue-500/10 px-3 py-2 transition-colors active:scale-95",
+    input: "rounded-2xl border border-black/5 dark:border-white/10 bg-zinc-100/80 dark:bg-zinc-800/80 px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground backdrop-blur-xl focus:outline-none focus:ring-2 focus:ring-blue-500/40",
+    badge: "rounded-full bg-zinc-200 dark:bg-zinc-800 px-3 py-1 text-xs font-semibold text-foreground",
+    panel: "rounded-3xl border border-white/20 dark:border-white/10 bg-white/85 dark:bg-zinc-900/85 p-6 shadow-2xl backdrop-blur-3xl",
+    radius: "rounded-3xl",
+    spring: SPRING_BOUNCE,
+  },
+  brutalist: {
+    name: "Neo-Brutalist",
+    description: "Bold 2px black outlines, high-contrast flat fills, hard 4px offset drop-shadows, and assertive tactile press shifts.",
+    card: "rounded-none border-2 border-foreground bg-background p-5 shadow-[4px_4px_0px_0px_currentColor] text-foreground",
+    buttonPrimary: "rounded-none border-2 border-foreground bg-primary text-primary-foreground font-bold px-4 py-2 shadow-[3px_3px_0px_0px_currentColor] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[2px_2px_0px_0px_currentColor] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none transition-all",
+    buttonSecondary: "rounded-none border-2 border-foreground bg-background text-foreground font-bold px-4 py-2 shadow-[3px_3px_0px_0px_currentColor] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[2px_2px_0px_0px_currentColor] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none transition-all",
+    buttonGhost: "rounded-none text-foreground font-bold hover:bg-foreground hover:text-background px-3 py-2 transition-colors",
+    input: "rounded-none border-2 border-foreground bg-background px-3 py-2 text-sm font-medium text-foreground placeholder:text-muted-foreground shadow-[2px_2px_0px_0px_currentColor] focus:outline-none focus:shadow-[4px_4px_0px_0px_currentColor]",
+    badge: "rounded-none border-2 border-foreground bg-yellow-300 text-black px-2 py-0.5 text-xs font-black uppercase tracking-wider",
+    panel: "rounded-none border-[3px] border-foreground bg-background p-5 shadow-[6px_6px_0px_0px_currentColor]",
+    radius: "rounded-none",
+    spring: SPRING_PRESS,
+  },
+};
+
+/**
+ * Returns the StyleTokens object for the specified preset.
+ * Defaults to "origin" (high-craft) if unspecified.
+ */
+export function getStylePreset(preset?: StylePreset): StyleTokens {
+  return STYLE_PRESETS[preset || "origin"] || STYLE_PRESETS.origin;
+}

package/lib/text-shimmer.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties } from "react";
+
+// The reduced-motion rule travels with the component. app/globals.css calms CSS
+// animation globally, but the registry bundles imports only, so an installed
+// copy never receives that reset.
+//
+// `!important` because the sweep is an inline style, which outranks a plain rule
+// in a media query. It selects a marker class carried by TEXT_SHIMMER_CLASS_NAME
+// so it also reaches consumers that build their own span out of these exports.
+export const TEXT_SHIMMER_KEYFRAMES =
+  "@keyframes motion-text-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}" +
+  "@media (prefers-reduced-motion: reduce){.motion-text-shimmer{animation:none !important}}";
+
+export const TEXT_SHIMMER_CLASS_NAME =
+  "motion-text-shimmer bg-[length:200%_100%] bg-clip-text text-transparent bg-[linear-gradient(110deg,var(--muted-foreground)_30%,var(--foreground)_50%,var(--muted-foreground)_70%)]";
+
+export function textShimmerStyle(duration: number): CSSProperties {
+  return {
+    animation: `motion-text-shimmer ${duration}s linear infinite`,
+  };
+}