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:T2cbf,"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; // --------------------------------------------------------------------------- // MeniscusMeter — a quota (storage, API budget, seats) rendered as liquid in // a thin open-top vessel, where the fill's top-edge CURVATURE, not its level, // carries the reading. Under the soft limit the level rises normally and the // edge is concave (wets the walls, dips at center — climbs higher at the // walls than the middle, same physical tell as water in a narrow glass tube). // Exactly at the soft limit it flattens. Between soft and hard the level // pins at the rim and the edge inverts to convex, bulging progressively // higher above the rim as the value approaches the hard cap — visibly // overfull, still held by surface tension, no color change required to read // "tolerated but over." The instant value crosses the hard limit a bead // detaches from the outer wall and eases down under gravity, then a static // 1px --ns-muted stain remains — the crossing becomes a permanent mark, not // just a momentary state. The whole shape is one SVG cubic bezier: fixed // endpoints at the current level, two shared control points whose y-offset // from that level is the single scalar that walks concave -> flat -> convex. // A CSS transition on `d` with a back-out (overshoot) timing function is the // "soft spring" — one wobble past the target, then it settles, no JS // simulation loop needed. `role=meter` carries the real semantics (SVG is // aria-hidden); a Geist Mono numeric readout beside the vessel means // curvature is never the only signal. Every stroke/fill is a token-driven // Tailwind class (text-border/text-ns-muted/text-foreground/text-ns-accent) at // low opacity — no hex, no canvas, no getComputedStyle needed since nothing // here is a raster surface. // --------------------------------------------------------------------------- export interface MeniscusMeterProps { /** current usage, same unit as softLimit/hardLimit */ value: number; /** the soft threshold — the vessel's rim; reaching it flattens the surface */ softLimit: number; /** the hard cap — crossing it detaches a bead and leaves a stain */ hardLimit: number; /** unit suffix for every readout, e.g. "%", "GB", "seats" (default "%") */ unit?: string; /** what's being metered, shown above the vessel, e.g. "Storage" */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } type Zone = "headroom" | "grace" | "spill"; // vessel geometry, SVG viewBox units const VIEW_W = 96; const VIEW_H = 168; const WALL_L = 30; const WALL_R = 66; const RIM_Y = 34; const FLOOR_Y = 142; const MAX_CONCAVE = 9; // control-point dip at value = 0 (deep headroom) const MAX_CONVEX = 20; // control-point rise at value = hardLimit (max dome) // a two-control-point cubic's midpoint sits at 0.25*end + 0.75*control, so a // concave dip of MAX_CONCAVE bows the visible trough ~0.75*MAX_CONCAVE below // the wall-anchor point — reserve that much clearance above FLOOR_Y so an // empty vessel's dipped meniscus never renders below the drawn floor line. const LEVEL_FLOOR_Y = FLOOR_Y - Math.ceil(MAX_CONCAVE * 0.75) - 3; const BEAD_X = WALL_R + 4; const DRIP_LEN = 46; // stain length below the rim function clamp(n: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, n)); } function fmt(n: number) { if (!Number.isFinite(n)) return "0"; const abs = Math.abs(n); if (Number.isInteger(n) || abs >= 100) return Math.round(n).toString(); return n.toFixed(1); } 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; } function zoneAnnounce(zone: Zone) { if (zone === "spill") return "over hard limit — overflowing"; if (zone === "grace") return "over soft limit — still held"; return "within soft limit"; } function zoneShort(zone: Zone) { if (zone === "spill") return "over hard limit"; if (zone === "grace") return "over soft limit"; return "under soft limit"; } function surface(value: number, softLimit: number, hardLimit: number) { const soft = Math.max(1e-6, softLimit); const hard = Math.max(soft + 1e-6, hardLimit); let levelY: number; let curveOffset: number; // positive = convex dome, negative = concave dip let zone: Zone; if (value <= soft) { const t = clamp(value / soft, 0, 1); // 0 empty -> 1 at rim levelY = LEVEL_FLOOR_Y - t * (LEVEL_FLOOR_Y - RIM_Y); curveOffset = -MAX_CONCAVE * (1 - t); zone = "headroom"; } else { levelY = RIM_Y; // pinned — the level itself never rises further const t = clamp((value - soft) / (hard - soft), 0, 1); curveOffset = MAX_CONVEX * t; zone = value >= hard ? "spill" : "grace"; } return { levelY, curveOffset, zone }; } function surfacePath(levelY: number, curveOffset: number) { const cpY = levelY - curveOffset; const cp1x = WALL_L + (WALL_R - WALL_L) * 0.33; const cp2x = WALL_L + (WALL_R - WALL_L) * 0.67; return `M ${WALL_L} ${levelY} C ${cp1x} ${cpY} ${cp2x} ${cpY} ${WALL_R} ${levelY}`; } function fillPath(levelY: number, curveOffset: number) { return `${surfacePath(levelY, curveOffset)} L ${WALL_R} ${FLOOR_Y} L ${WALL_L} ${FLOOR_Y} Z`; } export function MeniscusMeter({ value, softLimit, hardLimit, unit = "%", label = "Usage", className = "", }: MeniscusMeterProps) { const uid = useId(); const reduced = useReducedMotion(); const { levelY, curveOffset, zone } = useMemo( () => surface(value, softLimit, hardLimit), [value, softLimit, hardLimit] ); const prevZoneRef = useRef(zone); const [stained, setStained] = useState(zone === "spill"); const [beadTick, setBeadTick] = useState(0); const [announce, setAnnounce] = useState(() => zoneAnnounce(zone)); useEffect(() => { const prev = prevZoneRef.current; if (prev !== zone) { setAnnounce(zoneAnnounce(zone)); if (zone === "spill") { setStained(true); if (prev !== "spill") setBeadTick((k) => k + 1); } else if (zone === "headroom") { setStained(false); } prevZoneRef.current = zone; } }, [zone]); const labelId = `${uid}-label`; const liveId = `${uid}-live`; const unitSuffix = unit === "%" ? "%" : unit ? ` ${unit}` : ""; const valueText = `${fmt(value)}${unitSuffix}, ${zoneShort(zone)}`; const d = fillPath(levelY, curveOffset); const surfaceD = surfacePath(levelY, curveOffset); return (

{label.toUpperCase()} {zoneShort(zone)}

{fmt(value)} {unit === "%" ? "%" : ""} / {fmt(hardLimit)} {unit !== "%" ? ` ${unit}` : ""} cap

{zone === "spill" ? "held — overflow marked on the glass" : zone === "grace" ? "over the soft limit, still tolerated" : `${fmt(Math.max(0, softLimit - value))}${unitSuffix} of headroom left`}

{announce}

); } 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/meter-quota-meniscus/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/meter-quota-meniscus.tsx"}],"className":"h-[70svh] min-h-80"}]]}]