63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 65:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 66:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 67:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 68:T3507,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; // --------------------------------------------------------------------------- // ChopPress — a rating / level input rendered as a row of seal impressions. // Chosen levels are stamped solid with a short physical "thud" (scale // 1.15 -> 1.0, ease-out-expo) while a single concentric ring in --border // expands and fades outward, reading as paper taking the impression. // Unfilled levels wait as faint --ns-muted outlines. Lowering the value drains // marks right-to-left with a 30ms stagger, as if the ink is lifting off in // sequence. Hovering (or focusing) a level dashes the outline of whichever // marks would change if you committed there, without committing anything. // // Real ARIA radiogroup semantics underneath: one role="radio" per level, // only the committed level's radio is aria-checked, roving tabindex, arrow // keys move AND commit (Home/End jump to the ends), and each radio's // accessible name reads "N of M" plus an optional word ("3 of 5 - High"). // The stamp is a purely visual layer on top — nothing here depends on a // screen reader ever seeing the seal glyph. Reduced motion: stamps land and // drain instantly, no scale/ring/stagger. // // Pure DOM/SVG/CSS — no canvas. All ink is token-relative: --foreground for // the stamp body, --ns-muted for resting outlines, --border for the impression // ring, --ns-accent only for the keyboard focus ring. // --------------------------------------------------------------------------- const PRESS_MS = 140; // press-landing scale, ease-out-expo const RING_MS = 380; // impression ring expand + fade const PRESS_FILL_MS = 90; // ink appears fast — a thud, not a fade-in const DRAIN_FILL_MS = 170; // ink lifts gradually const STAGGER_MS = 30; // per-mark delay, both directions const SIZE_PX = { sm: 26, md: 34, lg: 42 } as const; type Kind = "press" | "drain"; export interface ChopPressProps { /** Accessible name for the radiogroup, e.g. "Priority". */ label: string; /** Number of levels. @default 5 */ max?: number; /** Controlled value, 0..max. 0 = nothing stamped yet. */ value?: number; /** Initial value when uncontrolled. @default 0 */ defaultValue?: number; /** Fires on commit — click, or an arrow/Home/End key move. Never on hover. */ onValueChange?: (value: number) => void; /** * Optional word per level (index 0 = level 1), appended to that level's * accessible name — e.g. `["Low", "", "", "", "Critical"]` reads level 5 * as "5 of 5 - Critical". Sparse arrays are fine, empty entries are * skipped. */ levelNames?: string[]; /** @default "md" */ size?: "sm" | "md" | "lg"; /** extra classes merged onto the rendered root element */ className?: string; } type Vars = React.CSSProperties & Record<`--${string}`, string | number>; function clampLevel(v: number, max: number) { if (!Number.isFinite(v)) return 0; return Math.min(max, Math.max(0, Math.round(v))); } // Deterministic per-index variation (rotation + corner radius) so seals read // as individually struck rather than one glyph rubber-stamped M times. // Seeded off the index only — identical across renders and between the two // themes. function sealVariant(i: number) { const s = Math.sin(i * 12.9898 + 4.1414) * 43758.5453; const frac = s - Math.floor(s); return { rotate: (frac - 0.5) * 5, // -2.5..2.5deg rx: 3.2 + frac * 1.8, // 3.2..5 corner radius, viewBox units }; } function useReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = () => setReduced(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } export function ChopPress({ label, max = 5, value, defaultValue = 0, onValueChange, levelNames, size = "md", className = "", }: ChopPressProps) { const M = Math.max(1, Math.floor(max)); const isControlled = value !== undefined; const [internal, setInternal] = useState(() => clampLevel(defaultValue, M)); const committed = clampLevel(isControlled ? (value as number) : internal, M); const reducedMotion = useReducedMotion(); const prevRef = useRef(committed); const [batch, setBatch] = useState(0); const [transitions, setTransitions] = useState< Map >(new Map()); const [hoverIndex, setHoverIndex] = useState(null); const btnRefs = useRef<(HTMLButtonElement | null)[]>([]); const groupId = useId(); // Runs before paint whenever the committed value changes, whichever path // caused it (click, arrow key, or a controlled prop update from outside). // Building the transition map here — not inside the click handler — means // both paths animate identically and there's no one-frame flash of the // final state before the animation classes attach. useLayoutEffect(() => { const prev = prevRef.current; if (committed !== prev) { if (reducedMotion) { setTransitions(new Map()); } else { const map = new Map(); if (committed > prev) { for (let i = prev; i < committed; i++) { map.set(i, { kind: "press", delay: (i - prev) * STAGGER_MS }); } } else { for (let i = committed; i < prev; i++) { // right-to-left: the highest index (rightmost) drains first. map.set(i, { kind: "drain", delay: (prev - 1 - i) * STAGGER_MS }); } } setTransitions(map); setBatch((b) => b + 1); } prevRef.current = committed; } }, [committed, reducedMotion]); const commit = useCallback( (next: number) => { const clamped = clampLevel(next, M); if (!isControlled) setInternal(clamped); if (clamped !== committed) onValueChange?.(clamped); }, [M, isControlled, committed, onValueChange] ); const onKeyDown = (e: React.KeyboardEvent) => { let next: number | null = null; if (e.key === "ArrowRight" || e.key === "ArrowUp") { next = Math.min(M, Math.max(1, committed + 1)); } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { next = Math.max(1, committed - 1); } else if (e.key === "Home") { next = 1; } else if (e.key === "End") { next = M; } else { return; } e.preventDefault(); commit(next); btnRefs.current[next - 1]?.focus(); }; const levels = useMemo(() => Array.from({ length: M }, (_, i) => i), [M]); return (

{levels.map((i) => { const filled = i < committed; const previewTarget = hoverIndex !== null ? i <= hoverIndex : filled; const previewing = hoverIndex !== null && previewTarget !== filled; const checked = i === committed - 1; const t = transitions.get(i); const variant = sealVariant(i); const level = i + 1; const name = levelNames?.[i]; const ariaLabel = `${level} of ${M}${name ? ` - ${name}` : ""}`; const tabbable = committed === 0 ? i === 0 : i === committed - 1; const fillMs = t?.kind === "drain" ? DRAIN_FILL_MS : PRESS_FILL_MS; return ( ); })}

); } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/rating-stamp/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/rating-stamp.tsx"}],"className":"h-[70svh] min-h-80"}]]}]