50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T16d4,import type { ReactNode } from "react"; import { cn } from "./lib/cn"; import "./shared/meter.css"; import "./meter.css"; export type MeterState = "good" | "fair" | "poor"; /** * The same rule as the HTML meter element: `low` and `high` split the range * into three bands, and `optimum` says which band is best. A value in the * best band is good, one band away is fair, two bands away is poor. */ export function meterState(value: number, { min = 0, max = 100, low, high, optimum }: { min?: number; max?: number; low?: number; high?: number; optimum?: number }): MeterState { const lo = Math.max(min, Math.min(low ?? min, max)); const hi = Math.max(lo, Math.min(high ?? max, max)); const best = optimum ?? (min + max) / 2; const band = (v: number) => (v < lo ? 0 : v > hi ? 2 : 1); if (low === undefined && high === undefined) return "good"; const distance = Math.abs(band(Math.max(min, Math.min(value, max))) - band(best)); return distance === 0 ? "good" : distance === 1 ? "fair" : "poor"; } const defaultWords: Record = { good: "Healthy", fair: "Getting high", poor: "Critical" }; /** * A measurement within a known range: storage used, a quality score, a * battery. It says whether the value is fine in words as well as colour, * marks the thresholds on the track and eases to a new value only when the * value really changes. For progress through a task use Progress; for usage * against a plan limit use UsageMeter. */ export function Meter({ label, value, min = 0, max = 100, low, high, optimum, format = (v) => `${Math.round(((v - min) / (max - min || 1)) * 100)}%`, words = defaultWords, showState = true, description, variant = "bar", size = "md", className, }: { label: string; value: number; min?: number; max?: number; /** Top of the low band. */ low?: number; /** Bottom of the high band. */ high?: number; /** Where the best value lies; below `low` means lower is better, e.g. latency. */ optimum?: number; /** The value in words, e.g. (v) => `${v} GB of 100 GB`. */ format?: (value: number) => string; /** What each state is called, e.g. { poor: "Almost full" }. */ words?: Partial>; /** Show the state word beside the value. */ showState?: boolean; /** One line under the meter, e.g. what happens when it is full. */ description?: ReactNode; /** `ring` is a compact circular gauge for a dashboard row. */ variant?: "bar" | "ring"; size?: "sm" | "md"; className?: string; }) { const state = meterState(value, { min, max, low, high, optimum }); const word = { ...defaultWords, ...words }[state]; const clamped = Math.max(min, Math.min(value, max)); const ratio = (clamped - min) / (max - min || 1); const at = (v: number) => `${((Math.max(min, Math.min(v, max)) - min) / (max - min || 1)) * 100}%`; const ticks = [low, high].filter((v): v is number => v !== undefined && v > min && v < max); const text = format(value); const valuetext = showState && (low !== undefined || high !== undefined) ? `${text}, ${word}` : text; const meterProps = { role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": clamped, "aria-valuetext": valuetext, } as const; if (variant === "ring") { const radius = size === "sm" ? 15 : 20; const stroke = size === "sm" ? 4 : 5; const box = (radius + stroke) * 2; const length = 2 * Math.PI * radius; return (

{label} {text} {showState && (low !== undefined || high !== undefined) && {word}} {description && {description}}

); } return (

{ticks.map((tick) => (

{description &&

{description}

}

); } 53:T743,/* meter.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="meter"][data-variant="bar"] [data-slot="meter-track"] { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: var(--sunken); box-shadow: var(--shadow-sunken); } [data-slot="meter"][data-size="sm"][data-variant="bar"] [data-slot="meter-track"] { height: 6px; } [data-slot="meter"][data-variant="bar"] [data-slot="meter-fill"] { position: absolute; inset: 0; border-radius: inherit; background: var(--meter-fill); transform-origin: left center; transition: transform var(--duration-deliberate) var(--ease-out), background-color var(--duration-normal) var(--ease-out); } [dir="rtl"] [data-slot="meter"][data-variant="bar"] [data-slot="meter-fill"] { transform-origin: right center; } [data-slot="meter-tick"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-inline-start: -1px; background: var(--background); } [data-slot="meter"] svg [data-slot="meter-track"] { stroke: var(--muted); } [data-slot="meter"] svg [data-slot="meter-fill"] { stroke: var(--meter-fill); transition: stroke-dashoffset var(--duration-deliberate) var(--ease-out), stroke var(--duration-normal) var(--ease-out); } [data-slot="meter-value"] { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--foreground); } [data-slot="meter"][data-variant="ring"] [data-slot="meter-value"] { color: var(--muted-foreground); } [data-slot="meter-state"] { font-size: 12px; font-weight: 500; color: var(--muted-foreground); } [data-slot="meter"][data-state="fair"] [data-slot="meter-state"] { color: var(--warning); } [data-slot="meter"][data-state="poor"] [data-slot="meter-state"] { color: var(--destructive); } } 4f:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/meter.tsx","content":"$52","type":"registry:ui","target":"components/ui/meter.tsx"},{"path":"ui/shared/meter.css","content":"/* Shared by meter.tsx, model-picker.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"meter\"] { display: inline-flex; align-items: center; gap: 0.35rem; }\n\n /* Meter: the fill scales from the start; state is a word and a colour. */\n [data-slot=\"meter\"] { --meter-fill: var(--foreground); }\n [data-slot=\"meter\"][data-state=\"fair\"] { --meter-fill: var(--warning); }\n [data-slot=\"meter\"][data-state=\"poor\"] { --meter-fill: var(--destructive); }\n}\n","type":"registry:file","target":"components/ui/shared/meter.css"},{"path":"ui/meter.css","content":"$53","type":"registry:file","target":"components/ui/meter.css"}],"className":"h-[70svh] min-h-80"}]]}]