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:T5978,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"; // --------------------------------------------------------------------------- // RouterTierCascade — model routing drawn as a cascade of weirs. One hairline // row per model tier, cheapest at top. Each row's 1px baseline is broken by a // WEIR NOTCH at x = ceiling: a 10px gap flanked by two short vertical lips. // A request enters the top row as a 3px square and travels right at 90px/s. // If it reaches the notch and its difficulty exceeds that tier's ceiling it // SPILLS — one row down over 260ms with a 3px overshoot — and resumes on the // next row. It comes to rest at x = difficulty on whichever row could hold it. // Cost lives on the same geometry: a mono gutter per row with the accepted // count, the cumulative spend, and a 1px bar scaled to the busiest row. // There is no color coding anywhere — tier identity is row position and notch // x, never hue. DOM + CSS only, one rAF loop shared by all in-flight glyphs. // --------------------------------------------------------------------------- export interface RouterTier { id: string; /** shown in the left column, e.g. "edge-2b" */ label: string; /** cost ceiling as a 0..1 difficulty fraction — where this row's notch sits */ ceiling: number; /** price per 1k tokens, in whatever currency the caller formats around */ pricePer1k: number; } export interface RouterRequest { id: string; /** 0..1 — how hard the request is; also its resting x on the accepting row */ difficulty: number; /** tokens billed for this request */ tokens: number; /** * Advisory only. The component always derives the accepting row from the * LIVE ceilings, so dragging a notch re-routes settled traffic; a fixed * accepted tier would contradict that. */ acceptedTier?: string; } export interface RouterTierCascadeProps { /** model tiers, cheapest first — one hairline row each */ tiers: RouterTier[]; /** the routed traffic; appending to this array is what animates a cascade */ requests: RouterRequest[]; /** ms for a settled tick to fade 1 -> 0.25 (default 45000) */ decayMs?: number; /** fires when a notch is dragged or arrow-keyed to a new ceiling */ onCeilingChange?: (tierId: string, ceiling: number) => void; /** formats a spend figure for the right gutter */ formatCost?: (amount: number) => string; /** accessible name for the cascade */ ariaLabel?: string; /** extra classes merged onto the rendered root element */ className?: string; } const ROW_H = 34; // px, one tier const TICK = 3; // px, settled tick const TICK_HOVER = 5; const LIP = 4; // px, notch lip height const LIP_HOVER = 10; const NOTCH_GAP = 10; // px cut out of the baseline const SPILL_MS = 260; const SPILL_SETTLE_MS = 60; // the last stretch, easing the 3px overshoot out const OVERSHOOT = 3; // px const SPEED = 90; // px/s rightward travel const HOVER_TC = "0.16s"; const PULSE_MS = 3400; const JITTER_MS = 180; const CAP = 40; // FIFO settled ticks per row const MIN_CEIL = 0.02; const MAX_CEIL = 0.98; function clamp(v: number, lo: number, hi: number) { return Math.min(hi, Math.max(lo, v)); } function snap(v: number) { return Math.round(clamp(v, MIN_CEIL, MAX_CEIL) * 100) / 100; } // cubic-bezier(0.33, 0, 0.15, 1) evaluated in JS — the spill uses the same // curve the CSS re-cascade transition uses, so a drag-triggered re-route and a // live arrival move identically. function bezier(x1: number, y1: number, x2: number, y2: number, p: number) { const cx = (t: number) => ((1 - t) * (1 - t) * 3 * t * x1) + ((1 - t) * 3 * t * t * x2) + t * t * t; const cy = (t: number) => ((1 - t) * (1 - t) * 3 * t * y1) + ((1 - t) * 3 * t * t * y2) + t * t * t; let t = p; for (let i = 0; i < 6; i++) { const err = cx(t) - p; if (Math.abs(err) < 1e-5) break; const d = (cx(t + 1e-4) - cx(t - 1e-4)) / 2e-4; if (Math.abs(d) < 1e-6) break; t -= err / d; t = clamp(t, 0, 1); } return cy(t); } const SPILL_EASE = (p: number) => bezier(0.33, 0, 0.15, 1, clamp(p, 0, 1)); function useReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const on = () => setReduced(mq.matches); mq.addEventListener("change", on); return () => mq.removeEventListener("change", on); }, []); return reduced; } function defaultFormatCost(amount: number) { if (!Number.isFinite(amount)) return "$0"; if (amount === 0) return "$0"; if (amount >= 1) return `$${amount.toFixed(2)}`; return `$${amount.toFixed(4)}`; } interface Settled { id: string; difficulty: number; tokens: number; seq: number; /** ms of decay already elapsed when the tick first rendered (seeded batch) */ aged: number; } interface Flight { id: string; difficulty: number; tokens: number; row: number; x: number; // normalized 0..1 phase: "travel" | "spill"; t0: number; } /** first tier whose ceiling can hold this difficulty; the last tier otherwise */ function acceptRow(difficulty: number, ceilings: number[]) { for (let i = 0; i < ceilings.length; i++) { if (difficulty <= ceilings[i]) return i; } return Math.max(0, ceilings.length - 1); } export function RouterTierCascade({ tiers, requests, decayMs = 45000, onCeilingChange, formatCost = defaultFormatCost, ariaLabel = "Model routing cascade", className = "", }: RouterTierCascadeProps) { const uid = useId(); const reduced = useReducedMotion(); const [ceilings, setCeilings] = useState(() => tiers.map((t) => snap(t.ceiling))); const [settled, setSettled] = useState([]); const [flights, setFlights] = useState([]); const [hover, setHover] = useState(null); const ceilingsRef = useRef(ceilings); ceilingsRef.current = ceilings; // keep ceilings in sync when the caller genuinely changes the tier config, // without clobbering a ceiling the user just dragged const incomingSig = tiers.map((t) => `${t.id}:${t.ceiling}`).join("|"); const prevSig = useRef(incomingSig); useEffect(() => { if (prevSig.current === incomingSig) return; prevSig.current = incomingSig; setCeilings(tiers.map((t) => snap(t.ceiling))); // eslint-disable-next-line react-hooks/exhaustive-deps }, [incomingSig]); const trackRef = useRef(null); const trackW = useRef(640); useEffect(() => { const el = trackRef.current; if (!el) return; const read = () => { const w = el.getBoundingClientRect().width; if (w > 0) trackW.current = w; }; read(); const ro = new ResizeObserver(read); ro.observe(el); return () => ro.disconnect(); }, []); // ---- intake ------------------------------------------------------------- const seen = useRef>(new Set()); const seq = useRef(0); const firstBatch = useRef(true); useEffect(() => { const fresh = requests.filter((r) => !seen.current.has(r.id)); if (fresh.length === 0) return; fresh.forEach((r) => seen.current.add(r.id)); // The first batch is history, not live traffic: it lands settled, and each // tick is pre-aged along the decay ramp in arrival order so the resting // frame reads as accumulated traffic rather than 40 simultaneous arrivals. const seeding = firstBatch.current; firstBatch.current = false; if (seeding || reduced) { setSettled((prev) => { const next = [...prev]; fresh.forEach((r, i) => { next.push({ id: r.id, difficulty: clamp(r.difficulty, 0, 1), tokens: Math.max(0, r.tokens), seq: seq.current++, aged: seeding ? (1 - (i + 1) / (fresh.length + 1)) * decayMs * 0.55 : 0, }); }); return next.slice(-CAP * Math.max(1, tiers.length)); }); return; } setFlights((prev) => [ ...prev, ...fresh.map((r) => ({ id: r.id, difficulty: clamp(r.difficulty, 0, 1), tokens: Math.max(0, r.tokens), row: 0, x: 0, phase: "travel" as const, t0: 0, })), ]); // eslint-disable-next-line react-hooks/exhaustive-deps }, [requests, reduced]); // ---- the cascade loop --------------------------------------------------- const flightRefs = useRef(new Map()); const stateRef = useRef(new Map()); const rafRef = useRef(0); // mirror the React flight list into the mutable map the loop walks useEffect(() => { flights.forEach((f) => { if (!stateRef.current.has(f.id)) stateRef.current.set(f.id, { ...f }); }); const live = new Set(flights.map((f) => f.id)); stateRef.current.forEach((_, id) => { if (!live.has(id)) stateRef.current.delete(id); }); }, [flights]); const settle = useCallback((f: Flight) => { setSettled((prev) => [...prev, { id: f.id, difficulty: f.difficulty, tokens: f.tokens, seq: seq.current++, aged: 0 }].slice( -CAP * 8 ) ); setFlights((prev) => prev.filter((x) => x.id !== f.id)); }, []); useEffect(() => { if (flights.length === 0 || reduced) return; let last = performance.now(); const step = (now: number) => { const dt = Math.min(0.05, (now - last) / 1000); last = now; const cs = ceilingsRef.current; const speedNorm = SPEED / Math.max(1, trackW.current); const done: Flight[] = []; stateRef.current.forEach((f) => { const el = flightRefs.current.get(f.id); if (f.phase === "travel") { const ceil = cs[f.row] ?? 1; const lastRow = f.row >= cs.length - 1; const target = f.difficulty <= ceil || lastRow ? f.difficulty : ceil; f.x = Math.min(target, f.x + speedNorm * dt); if (f.x >= target - 1e-4) { f.x = target; if (f.difficulty <= ceil || lastRow) { done.push(f); } else { f.phase = "spill"; f.t0 = now; } } if (el) { el.style.left = `${f.x * 100}%`; el.style.transform = `translate(-50%, calc(-50% + ${f.row * ROW_H}px))`; } } else { const p = clamp((now - f.t0) / SPILL_MS, 0, 1); const risePart = (SPILL_MS - SPILL_SETTLE_MS) / SPILL_MS; let dy: number; if (p < risePart) { dy = SPILL_EASE(p / risePart) * (ROW_H + OVERSHOOT); } else { const q = (p - risePart) / (1 - risePart); dy = ROW_H + OVERSHOOT - OVERSHOOT * q; } if (el) { el.style.transform = `translate(-50%, calc(-50% + ${f.row * ROW_H + dy}px))`; } if (p >= 1) { f.row += 1; f.phase = "travel"; if (el) el.style.transform = `translate(-50%, calc(-50% + ${f.row * ROW_H}px))`; } } }); done.forEach((f) => { stateRef.current.delete(f.id); settle(f); }); rafRef.current = requestAnimationFrame(step); }; rafRef.current = requestAnimationFrame(step); return () => cancelAnimationFrame(rafRef.current); }, [flights.length, reduced, settle]); // ---- derived rows ------------------------------------------------------- const rows = useMemo(() => { const byRow: Settled[][] = tiers.map(() => []); settled.forEach((s) => { const r = acceptRow(s.difficulty, ceilings); byRow[Math.min(r, byRow.length - 1)]?.push(s); }); return byRow.map((list, i) => { const kept = list.slice(-CAP); const price = tiers[i]?.pricePer1k ?? 0; const spend = kept.reduce((a, s) => a + (s.tokens / 1000) * price, 0); const per = kept.map((s) => (s.tokens / 1000) * price).sort((a, b) => a - b); const median = per.length === 0 ? 0 : per.length % 2 ? per[(per.length - 1) / 2] : (per[per.length / 2 - 1] + per[per.length / 2]) / 2; return { ticks: kept, spend, median, count: kept.length }; }); }, [settled, ceilings, tiers]); const maxSpend = Math.max(1e-9, ...rows.map((r) => r.spend)); const newestId = useMemo(() => { let best: Settled | null = null; settled.forEach((s) => { if (!best || s.seq > best.seq) best = s; }); return (best as Settled | null)?.id ?? null; }, [settled]); // ---- notch drag / keyboard --------------------------------------------- const setCeiling = useCallback( (i: number, value: number) => { const v = snap(value); setCeilings((prev) => { if (prev[i] === v) return prev; const next = [...prev]; next[i] = v; return next; }); const tier = tiers[i]; if (tier) onCeilingChange?.(tier.id, v); }, [onCeilingChange, tiers] ); const dragging = useRef(null); const onNotchDown = (i: number) => (e: React.PointerEvent) => { dragging.current = i; e.currentTarget.setPointerCapture?.(e.pointerId); e.preventDefault(); }; const onNotchMove = (i: number) => (e: React.PointerEvent) => { if (dragging.current !== i) return; const box = trackRef.current?.getBoundingClientRect(); if (!box || box.width === 0) return; setCeiling(i, (e.clientX - box.left) / box.width); }; const onNotchUp = (i: number) => (e: React.PointerEvent) => { if (dragging.current !== i) return; dragging.current = null; e.currentTarget.releasePointerCapture?.(e.pointerId); }; const onNotchKey = (i: number) => (e: React.KeyboardEvent) => { const c = ceilings[i] ?? 0; let next = c; if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = c - 0.01; else if (e.key === "ArrowRight" || e.key === "ArrowUp") next = c + 0.01; else if (e.key === "PageDown") next = c - 0.1; else if (e.key === "PageUp") next = c + 0.1; else if (e.key === "Home") next = MIN_CEIL; else if (e.key === "End") next = MAX_CEIL; else return; e.preventDefault(); setCeiling(i, next); }; const dimmed = (i: number) => hover !== null && hover !== i; return (

tier difficulty spill → accepted · spend

setHover(null)}> {tiers.map((tier, i) => { const c = ceilings[i] ?? 0; const row = rows[i] ?? { ticks: [], spend: 0, median: 0, count: 0 }; const hot = hover === i; const size = hot ? TICK_HOVER : TICK; const lipH = hot ? LIP_HOVER : LIP; return (

setHover(i)} onPointerOut={(e) => { const to = e.relatedTarget as Node | null; if (!to || !e.currentTarget.contains(to)) setHover(null); }} >

{tier.label} {formatCost(tier.pricePer1k)}

{/* track: baseline + weir notch + settled ticks */}

{/* baseline, cut by the notch */}

{/* the two weir lips */}

{/* settled ticks */} {row.ticks.map((s) => { const jitter = ((s.seq * 97) % (2 * JITTER_MS)) - JITTER_MS; return (

); })} {/* in-flight glyphs live in row 0's track and translate down */} {i === 0 ? flights.map((f) => (

{ if (el) flightRefs.current.set(f.id, el); else flightRefs.current.delete(f.id); }} data-flight className="absolute top-1/2 bg-foreground" style={{ left: 0, width: TICK, height: TICK, transform: "translate(-50%, -50%)", }} /> )) : null} {/* the notch itself — a real slider */}

{/* cost gutter, same geometry as the routing */}

{row.count} {hot ? `~${formatCost(row.median)}` : formatCost(row.spend)}

{tier.label}: ceiling {Math.round(c * 100)} percent, {row.count} requests accepted,{" "} {formatCost(row.spend)} spent.

); })}

{hover === null ? "each row spills at its notch — median per request on hover" : `${tiers[hover]?.label ?? ""} · median per request`}

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