4d: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"] 4e: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"] 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"],"ScrollArea"] 50: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"] 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/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"] 52:T66f7,"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; // --------------------------------------------------------------------------- // RidgeWalk — a model picker rendered as the actual decision: a point on the // cost/latency/quality Pareto frontier. It reads as a small scatter-plot // instrument that self-explains at rest. // // Layout is a real chart. The y-axis is QUALITY (higher = up, labelled top- // left where cheap-and-excellent never exists, so the corner is reliably // empty). The x-axis is the cost/latency blend (cheaper·faster left → // costlier·slower right; the speed/balance/quality toggle only re-weights // that blend). The frontier — the models nothing strictly beats — is drawn as // a single rising polyline with solid --foreground nodes: the line itself IS // the tradeoff, you cannot climb in quality without moving right into cost. // // Dominated models are not hidden. Each is a hollow --ns-muted node sitting below // the ridge, joined to it by a faint vertical connector whose LENGTH is the // quality you leave on the table by picking it — the single most legible way // to say "strictly worse". They stay fully selectable. // // Selection is a real radiogroup: one role="radio" per model (frontier and // dominated alike), roving tabindex, Arrow/Home/End move AND commit in visual // x-order. A drag anywhere on the plot snaps to the nearest node by 1D x // distance (a Voronoi partition) and commits on every zone crossing, so // dragging walks the selection node-to-node, never a free pointer echo. The // selected node is the only --ns-accent in the component (a filled dot with a // soft accent halo), matching "accent = interaction only". // // Beneath the plot a caption names the selected model, prints its three raw // numbers, and — once per COMMIT, never per drag pixel — the concrete delta // versus the previously selected model. A parallel sr-only aria-live region // says the same change in words on every focus/commit. Dominated selections // append who beats them and by how much. // // Nodes, ridge path `d`, and connectors all transition together on one // ease-out-expo curve; the frontier's point count is constant across modes so // the path interpolates cleanly. prefers-reduced-motion skips every one. // // No canvas (core). One aria-hidden SVG draws the lines (preserveAspectRatio // "none" is safe for straight strokes with non-scaling-stroke); every DOT is // a real DOM element positioned by percentage — so nodes stay perfect circles // at any aspect ratio and the hit-target buttons stay pixel-aligned with the // geometry with no ResizeObserver. All data lives in each radio's aria-label. // --------------------------------------------------------------------------- export interface RidgeWalkModel { id: string; name: string; /** USD per 1,000 tokens (or requests) — lower is better. */ cost: number; /** p50 latency in seconds — lower is better. */ latency: number; /** Quality score, e.g. an eval percentage — higher is better. */ score: number; } export type RidgeWalkAxisMode = "speed" | "balance" | "quality"; export interface RidgeWalkProps { /** The models to plot. Needs at least one entry to render controls. */ models: RidgeWalkModel[]; /** Controlled selected model id. */ value?: string; /** Initial selected id when uncontrolled. Defaults to the frontier model closest to the midline. */ defaultValue?: string; /** Fires on commit — click, drag zone-crossing, or an arrow/Home/End key move. */ onValueChange?: (id: string) => void; /** Controlled axis-emphasis mode. */ mode?: RidgeWalkAxisMode; /** Initial mode when uncontrolled. @default "balance" */ defaultMode?: RidgeWalkAxisMode; /** called with the new mode when a different axis emphasis is chosen */ onModeChange?: (mode: RidgeWalkAxisMode) => void; /** Accessible name for the model radiogroup. @default "Model" */ label?: string; /** Word used for the score axis in captions and announcements, e.g. "MMLU". @default "quality" */ scoreLabel?: string; /** extra classes merged onto the rendered root element */ className?: string; } const EASE = "cubic-bezier(0.16, 1, 0.3, 1)"; // ease-out-expo const DUR_MS = 450; // viewBox is a fixed 0-100 square with preserveAspectRatio="none", so a // coordinate value IS the percentage of the rendered box on both axes — // letting the DOM overlay dots/buttons use plain left/top percentages that // stay aligned with the SVG lines at any container size, no ResizeObserver. const PAD_X = 9; const SPAN_X = 82; const PAD_Y = 15; const SPAN_Y = 66; const BASELINE_Y = PAD_Y + SPAN_Y; type Pt = { x: number; y: number }; function clamp01(v: number): number { return v < 0 ? 0 : v > 1 ? 1 : v; } function norm(v: number, min: number, max: number): number { return max > min ? (v - min) / (max - min) : 0.5; } const AXIS_WEIGHTS: Record = { speed: { cost: 0.15, latency: 0.85 }, balance: { cost: 0.5, latency: 0.5 }, quality: { cost: 0.85, latency: 0.15 }, }; const AXIS_LABEL: Record = { speed: "Speed", balance: "Balance", quality: "Quality", }; // A model D dominates M if D is no worse on cost AND latency AND score, // and strictly better on at least one — the textbook Pareto relation. // Independent of the axis-emphasis mode: the mode only re-warps where things // sit on screen, never what the frontier actually is. function computeDominance(models: RidgeWalkModel[]): Map { const dominatedBy = new Map(); for (const m of models) { for (const other of models) { if (other.id === m.id || dominatedBy.has(m.id)) continue; const notWorse = other.cost <= m.cost && other.latency <= m.latency && other.score >= m.score; const strictlyBetter = other.cost < m.cost || other.latency < m.latency || other.score > m.score; if (notWorse && strictlyBetter) dominatedBy.set(m.id, other.id); } } return dominatedBy; } function computePositions( models: RidgeWalkModel[], mode: RidgeWalkAxisMode ): Map { const costs = models.map((m) => m.cost); const lats = models.map((m) => m.latency); const scores = models.map((m) => m.score); const costMin = Math.min(...costs); const costMax = Math.max(...costs); const latMin = Math.min(...lats); const latMax = Math.max(...lats); const scoreMin = Math.min(...scores); const scoreMax = Math.max(...scores); const w = AXIS_WEIGHTS[mode]; const positions = new Map(); for (const m of models) { const cN = norm(m.cost, costMin, costMax); const lN = norm(m.latency, latMin, latMax); const sN = norm(m.score, scoreMin, scoreMax); const xN = clamp01(w.cost * cN + w.latency * lN); positions.set(m.id, { x: PAD_X + xN * SPAN_X, y: PAD_Y + (1 - sN) * SPAN_Y, }); } return positions; } // Quality-height of the frontier ridge at an arbitrary x, by linear // interpolation along the (x-sorted) frontier polyline. Used to draw the // "quality left on the table" connector under each dominated node. function ridgeYAt(x: number, frontierPts: Pt[]): number { const n = frontierPts.length; if (n === 0) return BASELINE_Y; if (x <= frontierPts[0]!.x) return frontierPts[0]!.y; if (x >= frontierPts[n - 1]!.x) return frontierPts[n - 1]!.y; for (let i = 1; i < n; i++) { const a = frontierPts[i - 1]!; const b = frontierPts[i]!; if (x <= b.x) { const t = b.x > a.x ? (x - a.x) / (b.x - a.x) : 0; return a.y + (b.y - a.y) * t; } } return frontierPts[n - 1]!.y; } function useReducedMotion(): boolean { 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 fmtCost(v: number): string { return `$${v.toFixed(2)}`; } function signedMoney(v: number): string { const sign = v >= 0 ? "+" : "−"; const a = Math.abs(v); return `${sign}$${a.toFixed(2)}`; } function signedNum(v: number, digits: number, unit: string): string { const sign = v >= 0 ? "+" : "−"; return `${sign}${Math.abs(v).toFixed(digits)}${unit}`; } // Concrete delta vs the previously selected model — printed once per commit. function fmtDelta( curr: RidgeWalkModel, prev: RidgeWalkModel | null, scoreLabel: string ): string | null { if (!prev || prev.id === curr.id) return null; const dl = curr.latency - prev.latency; const dc = curr.cost - prev.cost; const ds = curr.score - prev.score; return `vs ${prev.name} ${signedNum(dl, 1, "s")} · ${signedMoney( dc )}/1k · ${signedNum(ds, 0, ` ${scoreLabel}`)}`; } function fmtWordDelta( curr: RidgeWalkModel, prev: RidgeWalkModel | null, scoreLabel: string, dominatorName?: string, dominatorScoreGain?: number ): string { let sentence: string; if (!prev || prev.id === curr.id) { sentence = `${curr.name} selected. ${curr.latency.toFixed( 1 )} seconds p50, ${fmtCost(curr.cost)} per thousand, ${Math.round( curr.score )} ${scoreLabel}.`; } else { const dl = curr.latency - prev.latency; const dc = curr.cost - prev.cost; const ds = curr.score - prev.score; const bits: string[] = []; if (Math.abs(dl) >= 0.05) bits.push(`${Math.abs(dl).toFixed(1)} seconds ${dl > 0 ? "slower" : "faster"}`); if (Math.abs(dc) >= 0.005) bits.push( `${fmtCost(Math.abs(dc))} ${dc > 0 ? "more expensive" : "cheaper"} per thousand` ); if (Math.abs(ds) >= 0.5) bits.push(`${Math.abs(Math.round(ds))} points ${ds > 0 ? "higher" : "lower"} ${scoreLabel}`); sentence = `${curr.name}: ${bits.length ? bits.join(", ") : "no meaningful change"}.`; } if (dominatorName) { const gain = dominatorScoreGain && dominatorScoreGain >= 0.5 ? ` — ${Math.round(dominatorScoreGain)} more ${scoreLabel} at no higher cost or latency` : ` — same cost and latency is available there with higher ${scoreLabel}`; sentence += ` Dominated by ${dominatorName}${gain}.`; } return sentence; } function ModeToggle({ mode, onChange, }: { mode: RidgeWalkAxisMode; onChange: (m: RidgeWalkAxisMode) => void; }) { const order: RidgeWalkAxisMode[] = ["speed", "balance", "quality"]; const refs = useRef>(new Map()); const onKeyDown = (e: React.KeyboardEvent) => { const idx = order.indexOf(mode); let next: number | null = null; if (e.key === "ArrowRight" || e.key === "ArrowDown") next = Math.min(order.length - 1, idx + 1); else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = Math.max(0, idx - 1); else if (e.key === "Home") next = 0; else if (e.key === "End") next = order.length - 1; else return; e.preventDefault(); const target = order[next]; onChange(target); refs.current.get(target)?.focus(); }; return (

{order.map((m) => { const checked = m === mode; return ( ); })}

); } export function RidgeWalk({ models, value, defaultValue, onValueChange, mode, defaultMode = "balance", onModeChange, label = "Model", scoreLabel = "quality", className = "", }: RidgeWalkProps) { const reducedMotion = useReducedMotion(); const groupId = useId(); const isModeControlled = mode !== undefined; const [internalMode, setInternalMode] = useState(defaultMode); const activeMode = isModeControlled ? (mode as RidgeWalkAxisMode) : internalMode; const dominatedBy = useMemo(() => computeDominance(models), [models]); const positions = useMemo(() => computePositions(models, activeMode), [models, activeMode]); const navOrder = useMemo( () => [...models].sort((a, b) => positions.get(a.id)!.x - positions.get(b.id)!.x), [models, positions] ); const frontier = useMemo( () => navOrder.filter((m) => !dominatedBy.has(m.id)), [navOrder, dominatedBy] ); const byId = useMemo(() => new Map(models.map((m) => [m.id, m] as const)), [models]); // Initial pick when uncontrolled: the frontier model nearest the midline. const [internalCommitted, setInternalCommitted] = useState(() => { if (defaultValue) return defaultValue; const pool = frontier.length > 0 ? frontier : models; if (pool.length === 0) return ""; let best = pool[0]; let bestD = Infinity; for (const m of pool) { const d = Math.abs(positions.get(m.id)!.x - (PAD_X + SPAN_X / 2)); if (d < bestD) { bestD = d; best = m; } } return best.id; }); const isControlled = value !== undefined; const committedId = isControlled ? (value as string) : internalCommitted; const prevIdRef = useRef(null); useEffect(() => { prevIdRef.current = committedId; }, [committedId]); const commit = (id: string) => { if (!isControlled) setInternalCommitted(id); if (id !== committedId) onValueChange?.(id); }; const commitMode = (m: RidgeWalkAxisMode) => { if (!isModeControlled) setInternalMode(m); if (m !== activeMode) onModeChange?.(m); }; const btnRefs = useRef>(new Map()); const trackRef = useRef(null); const draggingRef = useRef(false); const nearestByFraction = (fracPct: number): RidgeWalkModel => { let best = navOrder[0]; let bestD = Infinity; for (const m of navOrder) { const d = Math.abs(positions.get(m.id)!.x - fracPct); if (d < bestD) { bestD = d; best = m; } } return best; }; const fractionFromClientX = (clientX: number): number | null => { const el = trackRef.current; if (!el) return null; const rect = el.getBoundingClientRect(); if (rect.width === 0) return null; return clamp01((clientX - rect.left) / rect.width) * 100; }; const onPointerDown = (e: React.PointerEvent) => { if (navOrder.length === 0) return; draggingRef.current = true; trackRef.current?.setPointerCapture(e.pointerId); const frac = fractionFromClientX(e.clientX); if (frac !== null) commit(nearestByFraction(frac).id); }; const onPointerMove = (e: React.PointerEvent) => { if (!draggingRef.current) return; const frac = fractionFromClientX(e.clientX); if (frac === null) return; const nearest = nearestByFraction(frac); if (nearest.id !== committedId) commit(nearest.id); }; const endDrag = () => { draggingRef.current = false; }; const onKeyDown = (e: React.KeyboardEvent) => { if (navOrder.length === 0) return; const idx = navOrder.findIndex((m) => m.id === committedId); let nextIdx: number | null = null; if (e.key === "ArrowRight" || e.key === "ArrowUp") nextIdx = Math.min(navOrder.length - 1, (idx < 0 ? 0 : idx) + 1); else if (e.key === "ArrowLeft" || e.key === "ArrowDown") nextIdx = Math.max(0, (idx < 0 ? 0 : idx) - 1); else if (e.key === "Home") nextIdx = 0; else if (e.key === "End") nextIdx = navOrder.length - 1; else return; e.preventDefault(); const next = navOrder[nextIdx]; commit(next.id); btnRefs.current.get(next.id)?.focus(); }; if (models.length === 0 || !positions.has(committedId)) { return (

No models to compare.

); } const currModel = byId.get(committedId) ?? models[0]; const prevId = prevIdRef.current; const prevModel = prevId ? byId.get(prevId) ?? null : null; const currDominatorId = dominatedBy.get(committedId); const currDominator = currDominatorId ? byId.get(currDominatorId) : undefined; const currDominatorGain = currDominator ? currDominator.score - currModel.score : undefined; const isSelectedDominated = !!currDominator; const deltaLine = fmtDelta(currModel, prevModel, scoreLabel); const wordDelta = fmtWordDelta( currModel, prevModel, scoreLabel, currDominator?.name, currDominatorGain ); const frontierPts = frontier.map((m) => positions.get(m.id)!); const ridgeD = frontierPts .map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`) .join(" "); const lineTransition = reducedMotion ? "none" : `d ${DUR_MS}ms ${EASE}`; const connectorTransition = reducedMotion ? "none" : `x1 ${DUR_MS}ms ${EASE}, x2 ${DUR_MS}ms ${EASE}, y1 ${DUR_MS}ms ${EASE}, y2 ${DUR_MS}ms ${EASE}`; const nodeTransition = reducedMotion ? "none" : `left ${DUR_MS}ms ${EASE}, top ${DUR_MS}ms ${EASE}`; const scoreWord = scoreLabel.toUpperCase(); return (

{/* ---- plot ---- */}

{/* y-axis intent: cheap-and-excellent doesn't exist, so top-left is empty */}

{scoreWord}

{/* interactive layer: real DOM dots + hit targets, aligned by % */}

{navOrder.map((m) => { const p = positions.get(m.id)!; const dominated = dominatedBy.has(m.id); const dId = dominatedBy.get(m.id); const dName = dId ? byId.get(dId)?.name : undefined; const checked = m.id === committedId; const accLabel = `${m.name}, ${fmtCost(m.cost)} per thousand, ${m.latency.toFixed( 1 )} seconds p50, ${Math.round(m.score)} ${scoreLabel}${ dominated ? `, dominated by ${dName}` : ", on the frontier" }`; return ( ); })}

{/* ---- x-axis meaning ---- */}

cheaper · faster costlier · slower

{/* ---- selected readout (self-explains at rest) ---- */}

{currModel.name}

{isSelectedDominated ? "dominated" : "on frontier"}

Cost: {fmtCost(currModel.cost)} /1k
Latency: {currModel.latency.toFixed(1)} s
{scoreWord}: {Math.round(currModel.score)}

{/* ---- legend + axis toggle ---- */}

{wordDelta}

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