64: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"] 65: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"] 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"],"ScrollArea"] 67: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"] 68: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"] 69:T65e2,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react"; // --------------------------------------------------------------------------- // IndicatorRack — a plan selector built on the indicator-tablet rack of a // pre-electronic cash register (NCR, c. 1900-1950). Every possible reading // is a separate printed tablet, permanently present, edge-on at the foot of // its column; pressing a key springs one tablet up into the window while the // tablet previously showing drops back onto the stack. Changing the reading // is a SORT — two plates trade places and visibly cross — never a mutation // of one glyph in place (that's split-flap-board's mechanism; see below). // // Four columns (tens / units / cents / term), ten tablets each (digits 0-9), // all ten always mounted — nothing is created or destroyed on a change, only // repositioned. Column geometry derives from the container's SMALLER // dimension: lift = clamp(0.19 * min(w,h), 44, 96)px (the spec's reference // figures assume a 62px lift). Selecting a plan or a billing term changes // the digit shown in one or more columns; each changed column runs two // independent WAAPI animations on its own tablet pair — a spring RAISE // (40ms latch hold, 210ms lift with a 4px overshoot, 90ms settle = 340ms) // starting immediately, and a gravity DROP (178ms fall with a 2px // overshoot-past-rest bounce, 70ms damping = 248ms) starting 25ms later, so // the latch's release of the old tablet visibly precedes the spring's // release of the new one — the offset that makes the two plates cross mid // column instead of trading places invisibly. A rapid re-selection cancels // whatever is in flight on that column (reading its LIVE computed // translateY first, so the interrupted plate keeps moving from wherever it // actually is, never snapping) and re-targets from there; the real DOM // price text and the aria-live announcement are never gated on the // animation, they update the instant a selection commits. // // Idle, unconditional, always running (this is what keeps the control alive // at rest with zero input): a 40px shop-light reflection band crosses the // window every 6.00s; a pivoted "AMT" flag above the window swings ±1.2° on // a 3.40s period and never damps; a drive-shaft pawl indexes the whole rack // 0.5px sideways every 1.60s. All three are pure CSS `animation: infinite` // loops, contrast-capped so none of them competes with the real price text // sitting outside the window. // // prefers-reduced-motion freezes the DECORATIVE rack (aria-hidden) on one // composed still frame — flag held at its +1.2° extreme, reflection held // mid-window, and every column's selected tablet held mid-crossing (41px up) // against a synthetic predecessor (the previous digit, cyclically) held // mid-fall (22px down) — a pure function of the selected plan and a frozen // clock, no PRNG, byte-stable over time. The real radios, the real price // text and the aria-live region are unaffected: the CONTROL stays fully // functional, only its illustration stops moving and stops literally // tracking the animation curve. // // Distinct from split-flap-board: a flap cell MUTATES in place — one hinged // leaf rotates through a glyph set, so values it isn't showing don't exist // on screen. A tablet rack is a SORT — every value is a separate plate // permanently in frame, and changing the reading costs the travel of two // plates moving in opposite directions past each other. Distinct from // counter-carry-ripple: that component is about a carry propagating between // columns; here the four columns are mechanically independent and read that // way, no carry ever crosses a column boundary. // --------------------------------------------------------------------------- export interface IndicatorRackPlan { /** stable identifier, used as the native radio's value */ value: string; label: string; } export type IndicatorRackTerm = "monthly" | "annual"; export interface IndicatorRackProps { /** accessible name for the plan radiogroup. @default "Plan" */ label?: string; /** the plan options. @default three placeholder plans, Plan A/B/C */ plans?: IndicatorRackPlan[]; /** controlled selected plan value */ value?: string; /** initial plan when uncontrolled. @default plans[0]?.value */ defaultValue?: string; /** called with the new plan value when a different plan is selected */ onValueChange?: (value: string) => void; /** controlled billing term */ term?: IndicatorRackTerm; /** initial billing term when uncontrolled. @default "monthly" */ defaultTerm?: IndicatorRackTerm; /** called with the new term when it changes */ onTermChange?: (term: IndicatorRackTerm) => void; /** shared `name` for the plan radios. @default a generated id */ name?: string; /** extra classes merged onto the rendered root element */ className?: string; } type Vars = React.CSSProperties & Record<`--${string}`, string | number>; const DEFAULT_PLANS: IndicatorRackPlan[] = [ { value: "a", label: "Plan A" }, { value: "b", label: "Plan B" }, { value: "c", label: "Plan C" }, ]; // The rack reads out the plan's figure the way a register does — leading // zeros included — so the three digit columns ARE the price text beside them. // The three placeholder figures are chosen so every column changes on at // least one transition: a column that never moves reads as decoration. const PLAN_AMOUNTS: Record = { a: 19, b: 42, c: 128 }; const PLAN_DIGITS: Record = { a: [0, 1, 9], b: [0, 4, 2], c: [1, 2, 8], }; const FALLBACK_DIGITS: [number, number, number] = [0, 0, 0]; const TERM_DIGIT: Record = { monthly: 0, annual: 1 }; // The term column carries the same ten plates as every other column, but its // two reachable ones are printed M and A: a bare 0/1 in a price readout reads // as another digit, which is exactly the wrong thing for it to say. const TERM_FACES = ["M", "A", "2", "3", "4", "5", "6", "7", "8", "9"] as const; const COLUMN_LABELS = ["HUND", "TENS", "UNITS", "TERM"] as const; const TABLET_COUNT = 10; const STACK_BAND_H = 30; // px — fixed, not derived (spec §3) const PITCH = 3; // px — fixed pitch between down-stacked tablet edges const LIFT_RATIO = 0.19; const LIFT_MIN = 44; const LIFT_MAX = 96; const RAISED_Y = 0; // a raised tablet fills the window; rest is below it const RAISE_LATCH_MS = 40; const RAISE_SPRING_MS = 210; const RAISE_SETTLE_MS = 90; const RAISE_TOTAL_MS = RAISE_LATCH_MS + RAISE_SPRING_MS + RAISE_SETTLE_MS; // 340 const RAISE_OVERSHOOT_PX = 4; const RAISE_DELAY_MS = 0; const DROP_FALL_MS = 178; const DROP_BOUNCE_MS = 70; const DROP_TOTAL_MS = DROP_FALL_MS + DROP_BOUNCE_MS; // 248 const DROP_BOUNCE_PX = 2; const DROP_DELAY_MS = 25; // the offset that makes the plates cross const ANNOUNCE_DEBOUNCE_MS = 350; function clamp(v: number, lo: number, hi: number): number { return v < lo ? lo : v > hi ? hi : v; } 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; } /** Reads the tablet's LIVE on-screen translateY (px) from its computed * transform matrix, so an interrupted animation can be re-targeted from * where the plate actually is rather than snapping to its rest style. */ function readTranslateY(el: HTMLElement): number { const t = getComputedStyle(el).transform; if (!t || t === "none") return 0; const m = t.match(/matrix$([^)]+)$/); if (!m) return 0; const parts = m[1]!.split(",").map((n) => parseFloat(n.trim())); return parts[5] ?? 0; } function restY(digit: number, lift: number): number { return lift + digit * PITCH; } interface ColumnHandle { tablets: (HTMLDivElement | null)[]; anims: (Animation | null)[]; digit: number; } function makeColumn(digit: number): ColumnHandle { return { tablets: new Array(TABLET_COUNT).fill(null), anims: new Array(TABLET_COUNT).fill(null), digit, }; } export function IndicatorRack({ label = "Plan", plans = DEFAULT_PLANS, value, defaultValue, onValueChange, term, defaultTerm = "monthly", onTermChange, name, className = "", }: IndicatorRackProps) { const generatedName = useId(); const groupName = name ?? generatedName; const isPlanControlled = value !== undefined; const [internalPlan, setInternalPlan] = useState( () => defaultValue ?? plans[0]?.value ?? "" ); const committedPlan = isPlanControlled ? (value as string) : internalPlan; const activePlan = plans.find((p) => p.value === committedPlan) ?? plans[0]; const isTermControlled = term !== undefined; const [internalTerm, setInternalTerm] = useState(defaultTerm); const committedTerm = isTermControlled ? (term as IndicatorRackTerm) : internalTerm; const reducedMotion = useReducedMotion(); const commitPlan = useCallback( (v: string) => { if (!isPlanControlled) setInternalPlan(v); if (v !== committedPlan) onValueChange?.(v); }, [isPlanControlled, committedPlan, onValueChange] ); const commitTerm = useCallback( (t: IndicatorRackTerm) => { if (!isTermControlled) setInternalTerm(t); if (t !== committedTerm) onTermChange?.(t); }, [isTermControlled, committedTerm, onTermChange] ); // -- geometry: derived from the container's smaller dimension ----------- const rootRef = useRef(null); const [lift, setLift] = useState(62); useEffect(() => { const el = rootRef.current; if (!el || typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver((entries) => { const box = entries[0]?.contentRect; if (!box) return; const next = clamp(LIFT_RATIO * Math.min(box.width, box.height), LIFT_MIN, LIFT_MAX); setLift(next); }); ro.observe(el); return () => ro.disconnect(); }, []); const columnWidth = clamp(lift * 0.62, 28, 64); // -- rack digits for the current plan + term ----------------------------- const [tens, units, cents] = PLAN_DIGITS[activePlan?.value ?? ""] ?? FALLBACK_DIGITS; const amount = PLAN_AMOUNTS[activePlan?.value ?? ""] ?? 0; const termDigit = TERM_DIGIT[committedTerm]; const digits = useMemo(() => [tens, units, cents, termDigit], [tens, units, cents, termDigit]); const columnsRef = useRef(digits.map((d) => makeColumn(d))); // -- raise/drop: one column at a time, cancel-and-retarget on interrupt -- useLayoutEffect(() => { if (reducedMotion) { columnsRef.current.forEach((col, ci) => { col.anims.forEach((a) => a?.cancel()); col.anims.fill(null); col.digit = digits[ci]!; }); return; } digits.forEach((targetDigit, ci) => { const col = columnsRef.current[ci]; if (!col || col.digit === targetDigit) return; const outgoing = col.digit; const incoming = targetDigit; const outEl = col.tablets[outgoing]; const inEl = col.tablets[incoming]; col.digit = targetDigit; if (outEl) { const fromY = col.anims[outgoing] ? readTranslateY(outEl) : RAISED_Y; col.anims[outgoing]?.cancel(); const toRestY = restY(outgoing, lift); const anim = outEl.animate( [ { transform: `translateY(${fromY}px)`, offset: 0 }, { transform: `translateY(${toRestY + DROP_BOUNCE_PX}px)`, offset: DROP_FALL_MS / DROP_TOTAL_MS, easing: "cubic-bezier(0.55,0,1,0.45)", }, { transform: `translateY(${toRestY}px)`, offset: 1, easing: "ease-out" }, ], { duration: DROP_TOTAL_MS, delay: DROP_DELAY_MS, fill: "forwards", easing: "linear" } ); col.anims[outgoing] = anim; anim.onfinish = () => { if (col.anims[outgoing] === anim) col.anims[outgoing] = null; }; } if (inEl) { const fromY = col.anims[incoming] ? readTranslateY(inEl) : restY(incoming, lift); col.anims[incoming]?.cancel(); const anim = inEl.animate( [ { transform: `translateY(${fromY}px)`, offset: 0 }, { transform: `translateY(${fromY}px)`, offset: RAISE_LATCH_MS / RAISE_TOTAL_MS }, { transform: `translateY(${RAISED_Y - RAISE_OVERSHOOT_PX}px)`, offset: (RAISE_LATCH_MS + RAISE_SPRING_MS) / RAISE_TOTAL_MS, easing: "cubic-bezier(0.34,1.56,0.64,1)", }, { transform: `translateY(${RAISED_Y}px)`, offset: 1, easing: "ease-out" }, ], { duration: RAISE_TOTAL_MS, delay: RAISE_DELAY_MS, fill: "forwards", easing: "linear" } ); col.anims[incoming] = anim; anim.onfinish = () => { if (col.anims[incoming] === anim) col.anims[incoming] = null; }; } }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [digits, lift, reducedMotion]); useEffect(() => { return () => { columnsRef.current.forEach((col) => col.anims.forEach((a) => a?.cancel())); }; }, []); // -- aria-live: announce on commit only, debounced ----------------------- const [announceText, setAnnounceText] = useState(""); const announceTimerRef = useRef(undefined); useEffect(() => { window.clearTimeout(announceTimerRef.current); announceTimerRef.current = window.setTimeout(() => { const billed = committedTerm === "annual" ? "annually" : "monthly"; setAnnounceText( `${activePlan?.label}, ${amount} dollars per month, billed ${billed}.` ); }, ANNOUNCE_DEBOUNCE_MS); return () => window.clearTimeout(announceTimerRef.current); }, [activePlan, committedTerm, amount]); // -- Home/End roving to the rails (arrows + Space are native on radios) -- const planInputRefs = useRef<(HTMLInputElement | null)[]>([]); const termInputRefs = useRef<(HTMLInputElement | null)[]>([]); const railKeyDown = useCallback( ( e: React.KeyboardEvent, refs: React.MutableRefObject<(HTMLInputElement | null)[]>, commit: (v: string) => void, values: string[] ) => { if (e.key !== "Home" && e.key !== "End") return; e.preventDefault(); const idx = e.key === "Home" ? 0 : refs.current.length - 1; const el = refs.current[idx]; if (el) { el.focus(); el.checked = true; commit(values[idx]!); } }, [] ); const billedLabel = committedTerm === "annual" ? "billed annually" : "billed monthly"; return (

{digits.map((selectedDigit, ci) => { const predecessor = (selectedDigit + TABLET_COUNT - 1) % TABLET_COUNT; return (

{Array.from({ length: TABLET_COUNT }, (_, digit) => { let reducedTransform: string | undefined; if (reducedMotion) { if (digit === selectedDigit) { // still rising: short of seated by 21/62 of the lift reducedTransform = `translateY(${(21 / 62) * lift}px)`; } else if (digit === predecessor) { // still falling: short of its rest by 22/62 of the lift reducedTransform = `translateY(${restY(digit, lift) - (22 / 62) * lift}px)`; } else { reducedTransform = `translateY(${restY(digit, lift)}px)`; } } return (

{ columnsRef.current[ci].tablets[digit] = el; }} className="ns-ir-tablet" style={{ transform: reducedTransform ?? `translateY(${digit === selectedDigit ? RAISED_Y : restY(digit, lift)}px)`, }} > {ci === 3 ? TERM_FACES[digit] : digit}

); })}

{COLUMN_LABELS.map((l) => ( {l} ))}

{plans.map((p, i) => ( { planInputRefs.current[i] = el; }} type="radio" className="ns-ir-input" name={groupName} value={p.value} checked={p.value === committedPlan} onChange={() => commitPlan(p.value)} onKeyDown={(e) => railKeyDown(e, planInputRefs, commitPlan, plans.map((o) => o.value)) } /> {p.label} ))}

{(["monthly", "annual"] as IndicatorRackTerm[]).map((t, i) => ( { termInputRefs.current[i] = el; }} type="radio" className="ns-ir-input" name={`${groupName}-term`} value={t} checked={t === committedTerm} onChange={() => commitTerm(t)} onKeyDown={(e) => railKeyDown(e, termInputRefs, (v) => commitTerm(v as IndicatorRackTerm), ["monthly", "annual"]) } /> {t === "monthly" ? "Monthly" : "Annual"} ))}

{activePlan?.label} $ {amount} per month, {billedLabel}

{announceText}

); } const CSS = ` .ns-ir-root{ display:flex; flex-direction:column; gap:16px; container-type:inline-size; } .ns-ir-sr-only{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .ns-ir-rack{ position:relative; align-self:flex-start; padding:10px 10px 4px; border:1px solid var(--border); border-radius:8px; background:var(--background); } .ns-ir-window{ position:relative; display:flex; gap:calc(var(--fr-col-w) * 0.14); height:calc(var(--fr-lift) + ${STACK_BAND_H}px); overflow:hidden; border-radius:4px; } .ns-ir-column{ position:relative; width:var(--fr-col-w); height:100%; overflow:hidden; border-left:1px solid color-mix(in oklab, var(--ns-muted) 30%, transparent); } .ns-ir-column:first-child{ border-left:none; } .ns-ir-stack{ position:relative; width:100%; height:100%; } .ns-ir-tablet{ position:absolute; top:0; left:0; width:100%; height:var(--fr-lift); display:flex; align-items:center; justify-content:center; box-sizing:border-box; /* a printed plate, not a hole in the rack: one step off the rack's own background so the down-stacked edges read as a stack of plates rather than as pinstriping, and the raised plate reads as a face. */ background:color-mix(in oklab, var(--background) 90%, var(--foreground) 10%); color:var(--foreground); border-top:1px solid color-mix(in oklab, var(--ns-muted) 75%, transparent); border-bottom:1px solid color-mix(in oklab, var(--background) 55%, var(--foreground) 45%); font-family:var(--font-geist-mono, ui-monospace, monospace); font-size:calc(var(--fr-col-w) * 0.72); font-weight:500; line-height:1; font-variant-numeric:tabular-nums; will-change:transform; } .ns-ir-cur{ display:flex; align-items:center; justify-content:center; width:calc(var(--fr-col-w) * 0.6); height:var(--fr-lift); flex:none; font-family:var(--font-geist-mono, ui-monospace, monospace); font-size:calc(var(--fr-col-w) * 0.5); color:var(--ns-muted); } .ns-ir-labels-cur{ width:calc(var(--fr-col-w) * 0.6) !important; flex:none; } .ns-ir-reflection{ position:absolute; top:0; left:-40px; width:40px; height:100%; background:linear-gradient( 90deg, transparent, color-mix(in oklab, var(--background) 90%, var(--foreground) 10%), transparent ); mix-blend-mode:overlay; opacity:0.14; pointer-events:none; animation:ns-ir-reflect 6s linear infinite; } .dark .ns-ir-reflection{ background:linear-gradient( 90deg, transparent, color-mix(in oklab, var(--foreground) 55%, var(--background) 45%), transparent ); } @keyframes ns-ir-reflect{ from{ transform:translateX(0); } to{ transform:translateX(196px); } } .ns-ir-flag{ position:absolute; top:2px; right:14px; width:2px; height:7px; background:var(--ns-muted); transform-origin:top center; animation:ns-ir-flag 3.4s ease-in-out infinite; } @keyframes ns-ir-flag{ 0%,100%{ transform:rotate(1.2deg); } 50%{ transform:rotate(-1.2deg); } } .ns-ir-rack:not([data-reduced]) .ns-ir-window{ animation:ns-ir-tick 3.2s ease-in-out infinite; } @keyframes ns-ir-tick{ 0%,7%{ transform:translateX(0); } 50%{ transform:translateX(0.5px); } 57%,100%{ transform:translateX(0.5px); } } .ns-ir-rack[data-reduced] .ns-ir-reflection{ animation:none; transform:translateX(9px); opacity:0.14; } .ns-ir-rack[data-reduced] .ns-ir-flag{ animation:none; transform:rotate(1.2deg); } .ns-ir-rack[data-reduced] .ns-ir-window{ animation:none; } .ns-ir-labels{ display:flex; gap:calc(var(--fr-col-w) * 0.14); margin-top:4px; } .ns-ir-labels span{ width:var(--fr-col-w); font-family:var(--font-geist-mono, ui-monospace, monospace); font-size:8px; letter-spacing:0.1em; text-align:center; color:var(--ns-muted); } .ns-ir-controls{ display:flex; flex-direction:column; gap:12px; } .ns-ir-radiogroup{ display:flex; gap:6px; flex-wrap:wrap; } .ns-ir-option{ position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent; } .ns-ir-input{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .ns-ir-option-face{ display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 14px; border:1px solid var(--border); border-radius:6px; font-size:0.8125rem; color:var(--ns-muted); transition:color 140ms ease, border-color 140ms ease, background-color 140ms ease; } .ns-ir-input:checked + .ns-ir-option-face{ color:var(--foreground); border-color:var(--foreground); background:color-mix(in oklab, var(--foreground) 5%, transparent); } .ns-ir-input:focus-visible + .ns-ir-option-face{ outline:2px solid var(--ns-accent); outline-offset:2px; } .ns-ir-option-term .ns-ir-option-face{ min-height:32px; padding:5px 12px; font-size:0.75rem; } .ns-ir-price{ display:flex; align-items:baseline; gap:8px; margin:0; } .ns-ir-price-plan{ font-size:0.75rem; color:var(--ns-muted); } .ns-ir-price-word{ font-family:var(--font-geist-mono, ui-monospace, monospace); font-size:1.05rem; font-weight:500; color:var(--foreground); letter-spacing:0.04em; } .ns-ir-price-meta{ font-size:0.75rem; color:var(--ns-muted); } .ns-ir-actions{ display:flex; align-items:center; gap:14px; } .ns-ir-cta{ min-height:40px; padding:0 18px; border:1px solid var(--ns-accent); border-radius:6px; background:var(--ns-accent); color:var(--background); font-size:0.8125rem; font-weight:500; cursor:pointer; } .ns-ir-cta:focus-visible{ outline:2px solid var(--ns-accent); outline-offset:2px; } .ns-ir-link{ border:none; background:none; padding:0; font-size:0.8125rem; color:var(--ns-muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; } .ns-ir-link:focus-visible{ outline:2px solid var(--ns-accent); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ .ns-ir-tablet{ transition:none !important; } } `; 63:["$","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,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",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":["$","$L66",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"}]]}]]}],["$","$L67",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":["$","$L66",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"}]]}]]}],["$","$L67",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":["$","$L66",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)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/indicator-rack/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/indicator-rack.tsx"}],"className":"h-[70svh] min-h-80"}]]}]