4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollArea"] 4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollBar"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T3f04,"use client"; import { useEffect, useId, useRef, useState } from "react"; // --------------------------------------------------------------------------- // FlyballThrottle — a spend-cap widget built as a Watt centrifugal governor. // One governing scalar, omega = spendRate / safeRate (safeRate = cap / // periodDays), drives the whole mechanism: arm elevation angle rises with // omega squared (capped at 68deg — the linkage self-intersects past that), // the sleeve collar's drop down the spindle is computed FROM that angle // through the drawn linkage (armLength * (1 - cos angle)), and the throttle // lever's rotation maps LINEARLY from the collar's drop, sweeping across a // small gate track until it lies flat over it at full flare. Axial spin is // faked (never truly rotated — this is a side-profile diagram) by oscillating // the two-arm-and-balls group's x-scale on one shared keyframe, at a period // of SPIN_BASE_MS / omega set through a single CSS custom property — lazy // spin reads as healthy, a fast blur reads as hot, with no per-ball // choreography. `value`-style level state (percent of cap already spent) // never touches the geometry: the arms answer "how fast is it burning right // now", not "how much is gone" — that distinction is the whole point, and // is what keeps this legible on day 28 of a calm, on-pace period as well as // day 6 of a reckless one. Every geometry change (arm/ball position, collar // drop, lever angle) rides one shared 250ms non-overshooting CSS transition // on the transitionable SVG geometry properties (d/cx/cy/x/y — all // CSS-animatable in evergreen browsers) so a stream of per-request omega // updates settles smoothly instead of twitching frame to frame; no JS // spring loop. `spent` vs `cap` is a genuinely separate, level-based // boolean (capReached) that disables the two real action buttons — with // aria-disabled (not the native attribute, so Tab still reaches them) plus // an explanatory paragraph — and tints the collar's fill; it never feeds // the arm/collar/lever geometry itself. DOM+SVG+CSS only, no canvas, every // stroke/fill a `var(--token)`, --ns-accent reserved for focus/hover. // --------------------------------------------------------------------------- export interface FlyballThrottleProps { /** current burn rate, currency units per day */ spendRate: number; /** total spend cap for the period */ cap: number; /** length of the cap period, in days */ periodDays: number; /** amount already spent this period — the level that actually gates the buttons */ spent: number; /** currency symbol prefix for readouts (default "$") */ currency?: string; /** what's being governed, shown above the readout, e.g. "API spend" */ label?: string; /** called when "New purchase" is activated while under cap */ onNewPurchase?: () => void; /** called when "Raise limit" is activated while under cap */ onRaiseLimit?: () => void; /** extra classes merged onto the rendered root element */ className?: string; } // geometry, SVG viewBox units — one side-profile governor: lever+gate at the // top, arm pivot and flyball assembly below it, sleeve collar sliding on the // spindle below that, motor housing at the base. const VIEW_W = 280; const VIEW_H = 260; const CX = 140; const LEVER_PIVOT_Y = 48; const LEVER_LEN = 84; const LEVER_OPEN_DEG = 30; // resting angle above the gate track — clearly open const LEVER_CLOSED_DEG = 0; // flat along the gate track — fully closed over it const GATE_X1 = CX + LEVER_LEN; // where the gate track ends, == lever tip when flat const ARM_PIVOT_Y = 108; const ARM_LEN = 46; const BALL_R = 7; const MAX_ARM_DEG = 68; // the linkage self-intersects past this — hard ceiling const MAX_ARM_RAD = (MAX_ARM_DEG * Math.PI) / 180; const MAX_COLLAR_DROP = ARM_LEN * (1 - Math.cos(MAX_ARM_RAD)); const ANGLE_K = 22; // deg of arm elevation per omega^2 — small-physics approximation // real flyball arms hinge on a finite pivot and never fold flush against the // shaft — without a floor, low-omega ball centers sit closer together than // their own 2*BALL_R diameter and merge into one blob, which is exactly the // idle/default frame the registry's owner judges first and hardest. 13deg // keeps the two balls visibly separated (2*ARM_LEN*sin(13deg) ≈ 20.7px // center-to-center against a 14px diameter) at omega -> 0. const MIN_HANG_DEG = 13; const COLLAR_Y0 = 168; // collar's reference position at omega -> 0 (idle) const COLLAR_W = 34; const COLLAR_H = 10; const MOTOR_TOP_Y = 214; const MOTOR_H = 30; const HOT_OMEGA = 1.3; // burn meaningfully above sustainable pace, short of capped const SPIN_BASE_MS = 900; // spin period at omega == 1 (running exactly at sustainable pace) const MIN_SPIN_MS = 260; const MAX_SPIN_MS = 4000; const MIN_OMEGA_FOR_SPIN = 0.08; // divisor floor so idle settles at MAX_SPIN_MS, not Infinity type Band = "calm" | "hot" | "closed"; function clamp(n: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, n)); } function fmtMoney(n: number, currency: string) { if (!Number.isFinite(n)) return `${currency}0`; const v = Math.max(0, n); const text = v < 10 && !Number.isInteger(v) ? v.toFixed(1) : Math.round(v).toString(); return `${currency}${text}`; } function fmtDays(n: number) { if (!Number.isFinite(n) || n <= 0) return "today"; if (n < 1) return "under a day"; const r = Math.round(n); return `${r} day${r === 1 ? "" : "s"}`; } export function FlyballThrottle({ spendRate, cap, periodDays, spent, currency = "$", label = "Spend governor", onNewPurchase, onRaiseLimit, className = "", }: FlyballThrottleProps) { const uid = useId(); const labelId = `${uid}-label`; const descId = `${uid}-desc`; const closedNoteId = `${uid}-closed`; const safeSpendRate = Math.max(0, spendRate); const safeRate = periodDays > 0 ? cap / periodDays : 0; const omega = safeRate > 0 ? safeSpendRate / safeRate : safeSpendRate > 0 ? Number.POSITIVE_INFINITY : 0; const omegaForGeometry = Number.isFinite(omega) ? omega : 999; const angleDeg = clamp( MIN_HANG_DEG + ANGLE_K * omegaForGeometry * omegaForGeometry, MIN_HANG_DEG, MAX_ARM_DEG ); const angleRad = (angleDeg * Math.PI) / 180; const ballDX = ARM_LEN * Math.sin(angleRad); const ballDY = ARM_LEN * Math.cos(angleRad); const ballLeftX = CX - ballDX; const ballRightX = CX + ballDX; const ballY = ARM_PIVOT_Y + ballDY; const collarDrop = ARM_LEN * (1 - Math.cos(angleRad)); const collarY = COLLAR_Y0 + collarDrop; const throttleFrac = MAX_COLLAR_DROP > 0 ? clamp(collarDrop / MAX_COLLAR_DROP, 0, 1) : 0; const leverDeg = LEVER_OPEN_DEG - (LEVER_OPEN_DEG - LEVER_CLOSED_DEG) * throttleFrac; const leverRad = (leverDeg * Math.PI) / 180; const leverEndX = CX + LEVER_LEN * Math.cos(leverRad); const leverEndY = LEVER_PIVOT_Y - LEVER_LEN * Math.sin(leverRad); const spinMs = clamp(SPIN_BASE_MS / Math.max(omegaForGeometry, MIN_OMEGA_FOR_SPIN), MIN_SPIN_MS, MAX_SPIN_MS); // capReached is a real, independent level check — spent vs cap — never the // arm/collar/lever geometry above, which is entirely rate-derived (omega). const capReached = cap > 0 && spent >= cap; const daysToCap = safeSpendRate > 0 ? (cap - spent) / safeSpendRate : Number.POSITIVE_INFINITY; const forecastText = capReached ? "the cap has been reached for this period" : !Number.isFinite(daysToCap) || daysToCap > periodDays ? "on pace to stay under cap this period" : `cap reached in ${fmtDays(daysToCap)} at this pace`; const band: Band = capReached ? "closed" : omega >= HOT_OMEGA ? "hot" : "calm"; const [announce, setAnnounce] = useState(""); const prevBandRef = useRef(null); useEffect(() => { if (prevBandRef.current === null) { prevBandRef.current = band; // no crossing announcement on first paint return; } if (prevBandRef.current === band) return; prevBandRef.current = band; if (band === "closed") { setAnnounce( `Closed — spend cap of ${fmtMoney(cap, currency)} reached; new purchases and limit increases are disabled until next period.` ); } else if (band === "hot") { setAnnounce( `Hot — burning ${fmtMoney(safeSpendRate, currency)}/day against a ${fmtMoney(safeRate, currency)}/day sustainable rate.` ); } else { setAnnounce("Calm — burn rate back under the sustainable pace."); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [band]); const btnBase = "flex-1 rounded-md border px-3 py-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ns-accent"; const btnLive = "border-border bg-background text-foreground hover:border-foreground/30 hover:bg-foreground/[0.05] cursor-pointer"; const btnDead = "border-border bg-background text-ns-muted opacity-50 cursor-not-allowed"; return (

{label.toUpperCase()} {band.toUpperCase()}

Spending {fmtMoney(safeSpendRate, currency)}/day against a{" "} {fmtMoney(safeRate, currency)}/day sustainable rate — {forecastText}.

{announce}

{capReached ? (

Disabled — the {fmtMoney(cap, currency)} cap for this period has been reached. New purchases and limit increases resume next period.

) : null}

); } 4b:["$","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,["$","$L4c",null,{"namespace":"@ns-ui","registryDependencies":[]}]]}],["$","$L4d",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":["$","$L4e",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"}]]}]]}],["$","$L4f",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":["$","$L4e",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"}]]}]]}],["$","$L4f",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":["$","$L4e",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)"}]]}]]}],["$","$L4f",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/core/flyball-throttle/component.tsx","content":"$51","type":"registry:ui","target":"components/ui/flyball-throttle.tsx"}],"className":"h-[70svh] min-h-80"}]]}]