63: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"] 64: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"] 65: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"] 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"],"ScrollBar"] 67: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"] 68:T6b69,"use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; // --------------------------------------------------------------------------- // NomogramEdge — a two-input estimator built as a real paper nomogram, not a // decorated pair of sliders. Three vertical ASCII scales (tick glyphs ─ ┬ on // a │ spine): left and right carry draggable role=slider handles, the middle // is read-only and sits at the exact horizontal midpoint. GEOMETRY: with a // shared log modulus R = ln(leftMax/leftMin) and both outer scales anchored // so their own max maps to frac 0 (top), frac(u) = ln(leftMax/u)/R and // frac(v) = ln(rightMax/v)/R. Because the middle column is the true pixel // midpoint between the two handles, the straight line's crossing there is // ALWAYS (fracLeft+fracRight)/2 by the intercept theorem — so rendering the // middle scale's own ticks at frac(w) = ln(wMax/w)/(2R), wMax = leftMax * // rightMax, makes a straight SVG line between the handles land exactly on // the middle scale's tick for w = u*v. No pixel measurement, no canvas: the // crossing is computed analytically (result = leftValue*rightValue) and // placed at that same halfway-average fraction, so the drawn line and the // printed number are provably the same answer. R is taken from the LEFT // domain only — the right scale (and therefore the middle scale, since it's // the average) may span less than the full track when its own log-ratio is // smaller than the left's, ending at a real "══" scale cap rather than // filling the column. That's authentic nomography, not a bug: doubling the // right value moves the crossing by ln(2)/(2R) same as doubling the left // would, but a scale whose reachable domain covers fewer decades swings the // SAME handle travel through a much bigger fraction of its own range, which // is the actual sensitivity story this component tells. `mode="sum"` swaps // the same machinery to linear scales/addition for non-multiplicative pairs. // Handles are role=slider with arrow/page/home/end tick-stepping; drag is // continuous and un-quantized, release snaps to the nearest tick with a // spring-flavored CSS ease (skipped under prefers-reduced-motion, detected // in JS so the transition can be fully suppressed rather than just shortened). // The straightedge carries a small quadratic-bezier sag while a handle is // down (control point offset from the true midpoint) and eases flat again on // release — decorative only; the crossing computation never reads the path. // DOM + inline SVG only, no canvas. --ns-accent appears nowhere but the // grabbed handle and focus rings. // --------------------------------------------------------------------------- type Mode = "product" | "sum"; type Side = "left" | "right"; type Tick = { value: number; major: boolean }; const TRACK_H_DEFAULT = 480; // px, track column height — a pricing-hero instrument, not a form-row widget const SAG = 3.2; // viewBox units, straightedge sag while a handle is down // A handful of illustrative (fracLeft, fracRight) waypoints the crossing // drifts through before anyone touches the component — spread across the // domain so the sensitivity story (one side swinging the crossing more than // the other) is visible without a single click. Permanently cancelled on the // first real pointerdown/keydown (see interactedRef) and never started under // reduced motion. const IDLE_WAYPOINTS: [number, number][] = [ [0.14, 0.82], [0.62, 0.26], [0.36, 0.58], [0.8, 0.12], ]; const IDLE_STEP_MS = 2600; const IDLE_FIRST_DELAY_MS = 1100; const ENTRY_FRAC = 0.5; // both handles start here on mount and spring out to their real reading const ENTRANCE_MS = 640; // draw-in duration, same overshoot curve as the interactive snap function clamp(v: number, lo: number, hi: number): number { return v < lo ? lo : v > hi ? hi : v; } function refSpanOf(mode: Mode, min: number, max: number): number { return mode === "product" ? Math.log(max / min) : max - min; } // frac 0 = anchorMax (top of column), frac grows downward as value falls. function fracOf(mode: Mode, value: number, anchorMax: number, refSpan: number): number { if (mode === "product") { const v = value > 0 ? value : anchorMax * 1e-9; return Math.log(anchorMax / v) / refSpan; } return (anchorMax - value) / refSpan; } function valueOf(mode: Mode, frac: number, anchorMax: number, refSpan: number): number { return mode === "product" ? anchorMax * Math.exp(-frac * refSpan) : anchorMax - frac * refSpan; } function combine(mode: Mode, u: number, v: number): number { return mode === "product" ? u * v : u + v; } function buildLogTicks(min: number, max: number): Tick[] { const out: Tick[] = []; const k0 = Math.floor(Math.log10(min)); const k1 = Math.ceil(Math.log10(max)); for (let k = k0; k <= k1; k++) { for (const m of [1, 2, 5]) { const v = m * Math.pow(10, k); if (v >= min * 0.999 && v <= max * 1.001) out.push({ value: v, major: m === 1 }); } } return out.sort((a, b) => a.value - b.value); } function niceLinearStep(range: number): number { const raw = range / 8; const mag = Math.pow(10, Math.floor(Math.log10(raw))); const norm = raw / mag; const nice = norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10; return nice * mag; } function buildLinearTicks(min: number, max: number): Tick[] { const step = niceLinearStep(max - min) || 1; const out: Tick[] = []; const start = Math.ceil(min / step) * step; for (let v = start; v <= max + step * 1e-6; v += step) { out.push({ value: Number(v.toFixed(6)), major: Math.round(v / step) % 5 === 0 }); } return out; } function buildTicks(mode: Mode, min: number, max: number): Tick[] { return mode === "product" ? buildLogTicks(min, max) : buildLinearTicks(min, max); } function fmtCompact(v: number): string { const abs = Math.abs(v); if (abs >= 1_000_000) return `${(v / 1_000_000).toFixed(v % 1_000_000 === 0 ? 0 : 1)}M`; if (abs >= 1000) return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`; if (abs > 0 && abs < 1) return v.toFixed(abs < 0.01 ? 3 : 2).replace(/0+$/, "").replace(/\.$/, ""); return Number.isInteger(v) ? String(v) : v.toFixed(1); } function usePrefersReducedMotion(): 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; } export interface NomogramEdgeProps { /** "product" (log scales, w = left*right) or "sum" (linear scales, w = left+right) */ mode?: Mode; leftLabel?: string; rightLabel?: string; middleLabel?: string; leftMin?: number; leftMax?: number; rightMin?: number; rightMax?: number; defaultLeftValue?: number; defaultRightValue?: number; formatLeft?: (v: number) => string; formatRight?: (v: number) => string; formatResult?: (v: number) => string; onValuesChange?: (left: number, right: number, result: number) => void; /** Track column height in px. Default 480 — a full instrument, not a form-row control. */ trackHeight?: number; /** Before any interaction, the crossing drifts through a few illustrative * value pairs on its own (off under prefers-reduced-motion, and cancelled * for good the moment a real drag or keystroke lands). Default true. */ ambient?: boolean; className?: string; } export function NomogramEdge({ mode = "product", leftLabel = "Requests / mo", rightLabel = "Price / request", middleLabel = "Monthly cost", leftMin = 100, leftMax = 100_000, rightMin = 0.01, rightMax = 1, defaultLeftValue = 100_000, defaultRightValue = 0.01, formatLeft = (v) => `${fmtCompact(v)} requests`, formatRight = (v) => `$${v.toFixed(2)}/request`, formatResult = (v) => (v >= 1000 ? `$${Math.round(v).toLocaleString()}/mo` : `$${v.toFixed(2)}/mo`), onValuesChange, trackHeight = TRACK_H_DEFAULT, ambient = true, className = "", }: NomogramEdgeProps) { const reduced = usePrefersReducedMotion(); const [leftValue, setLeftValue] = useState(() => clamp(defaultLeftValue, leftMin, leftMax)); const [rightValue, setRightValue] = useState(() => clamp(defaultRightValue, rightMin, rightMax)); const [dragging, setDragging] = useState(null); // flips (and stays flipped) the instant a real drag or keystroke lands — // ends the idle drift for good and switches the handle's `top` easing from // the slow ambient drift back to the snappy interactive spring. const [interacted, setInteracted] = useState(false); const interactedRef = useRef(false); const stepIndexRef = useRef(0); const markInteracted = useCallback(() => { if (interactedRef.current) return; interactedRef.current = true; setInteracted(true); }, []); // `entered` flips true one paint after mount so the very first frame draws // both handles at ENTRY_FRAC with no transition, then the flip animates // them out to their real reading on the same overshoot spring as an // interactive snap — the "drawn in" reveal. `settled` flips true once that // reveal has had time to finish, so the ambient idle ease (below) doesn't // start competing with it. Both resolve instantly under reduced motion. const [entered, setEntered] = useState(false); const [settled, setSettled] = useState(false); useEffect(() => { if (reduced) { setEntered(true); setSettled(true); return; } let raf2 = 0; const raf1 = requestAnimationFrame(() => { raf2 = requestAnimationFrame(() => setEntered(true)); }); return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); }; }, [reduced]); useEffect(() => { if (!entered || reduced) return; const t = setTimeout(() => setSettled(true), ENTRANCE_MS + 60); return () => clearTimeout(t); }, [entered, reduced]); const [liveText, setLiveText] = useState( () => `${formatLeft(clamp(defaultLeftValue, leftMin, leftMax))} × ${formatRight( clamp(defaultRightValue, rightMin, rightMax) )} → ${formatResult(combine(mode, clamp(defaultLeftValue, leftMin, leftMax), clamp(defaultRightValue, rightMin, rightMax)))}` ); const leftTrackRef = useRef(null); const rightTrackRef = useRef(null); const leftHandleRef = useRef(null); const rightHandleRef = useRef(null); // mirrors of the latest committed values, updated synchronously alongside // setState — pointerup can fire before a just-queued setState from the // final pointermove has landed, so the release-time snap reads these // refs (always current) rather than the possibly one-frame-stale state. const leftValueRef = useRef(leftValue); const rightValueRef = useRef(rightValue); const setLeft = (v: number) => { leftValueRef.current = v; setLeftValue(v); }; const setRight = (v: number) => { rightValueRef.current = v; setRightValue(v); }; const R = useMemo(() => refSpanOf(mode, leftMin, leftMax), [mode, leftMin, leftMax]); const rightSpanFrac = useMemo( () => refSpanOf(mode, rightMin, rightMax) / R, [mode, rightMin, rightMax, R] ); const midSpanFrac = (1 + rightSpanFrac) / 2; const wMax = combine(mode, leftMax, rightMax); const wMin = combine(mode, leftMin, rightMin); const ticksLeft = useMemo(() => buildTicks(mode, leftMin, leftMax), [mode, leftMin, leftMax]); const ticksRight = useMemo(() => buildTicks(mode, rightMin, rightMax), [mode, rightMin, rightMax]); const ticksMid = useMemo(() => buildTicks(mode, wMin, wMax), [mode, wMin, wMax]); const fracLeft = fracOf(mode, leftValue, leftMax, R); const fracRight = fracOf(mode, rightValue, rightMax, R); const fracMid = (fracLeft + fracRight) / 2; const result = combine(mode, leftValue, rightValue); // visual-only positions: everything DRAWN (handles, line, crossing) reads // these, never the raw fracs directly, so the pre-`entered` first frame // paints at ENTRY_FRAC while `leftValue`/`rightValue` (and therefore every // number on screen) are already correct from the very first render. const renderFracLeft = entered ? fracLeft : ENTRY_FRAC; const renderFracRight = entered ? fracRight : ENTRY_FRAC; const renderFracMid = (renderFracLeft + renderFracRight) / 2; const updateFromClientY = useCallback( (side: Side, clientY: number) => { const trackEl = side === "left" ? leftTrackRef.current : rightTrackRef.current; if (!trackEl) return; const rect = trackEl.getBoundingClientRect(); const frac = clamp((clientY - rect.top) / Math.max(1, rect.height), 0, 1); const anchorMax = side === "left" ? leftMax : rightMax; const min = side === "left" ? leftMin : rightMin; const max = side === "left" ? leftMax : rightMax; const v = clamp(valueOf(mode, frac, anchorMax, R), min, max); const nextLeft = side === "left" ? v : leftValueRef.current; const nextRight = side === "right" ? v : rightValueRef.current; if (side === "left") setLeft(v); else setRight(v); onValuesChange?.(nextLeft, nextRight, combine(mode, nextLeft, nextRight)); }, [mode, leftMin, leftMax, rightMin, rightMax, R, onValuesChange] ); const commitValue = useCallback( (side: Side, v: number) => { const nextLeft = side === "left" ? v : leftValueRef.current; const nextRight = side === "right" ? v : rightValueRef.current; if (side === "left") setLeft(v); else setRight(v); const nextResult = combine(mode, nextLeft, nextRight); const joiner = mode === "product" ? "×" : "+"; setLiveText(`${formatLeft(nextLeft)} ${joiner} ${formatRight(nextRight)} → ${formatResult(nextResult)}`); onValuesChange?.(nextLeft, nextRight, nextResult); }, [mode, formatLeft, formatRight, formatResult, onValuesChange] ); const nearestTickIndex = (ticks: Tick[], side: Side, current: number): number => { if (ticks.length === 0) return -1; const anchorMax = side === "left" ? leftMax : rightMax; const curFrac = fracOf(mode, current, anchorMax, R); let best = 0; let bestD = Infinity; ticks.forEach((t, i) => { const f = fracOf(mode, t.value, anchorMax, R); const d = Math.abs(f - curFrac); if (d < bestD) { bestD = d; best = i; } }); return best; }; const snapToNearestTick = (side: Side) => { const ticks = side === "left" ? ticksLeft : ticksRight; const current = side === "left" ? leftValueRef.current : rightValueRef.current; const idx = nearestTickIndex(ticks, side, current); if (idx >= 0) commitValue(side, ticks[idx].value); }; const onPointerDown = (side: Side) => (e: React.PointerEvent) => { e.preventDefault(); markInteracted(); const trackEl = side === "left" ? leftTrackRef.current : rightTrackRef.current; trackEl?.setPointerCapture(e.pointerId); (side === "left" ? leftHandleRef : rightHandleRef).current?.focus({ preventScroll: true }); setDragging(side); updateFromClientY(side, e.clientY); }; const onPointerMove = (side: Side) => (e: React.PointerEvent) => { if (dragging !== side) return; updateFromClientY(side, e.clientY); }; const endDrag = (side: Side) => () => { if (dragging !== side) return; setDragging(null); snapToNearestTick(side); }; const onKeyDown = (side: Side) => (e: React.KeyboardEvent) => { const ticks = side === "left" ? ticksLeft : ticksRight; if (ticks.length === 0) return; const current = side === "left" ? leftValueRef.current : rightValueRef.current; const idx = nearestTickIndex(ticks, side, current); const jump = mode === "product" ? 3 : 5; let next = idx; switch (e.key) { case "ArrowUp": case "ArrowRight": next = idx + 1; break; case "ArrowDown": case "ArrowLeft": next = idx - 1; break; case "PageUp": next = idx + jump; break; case "PageDown": next = idx - jump; break; case "Home": next = 0; break; case "End": next = ticks.length - 1; break; default: return; } e.preventDefault(); markInteracted(); next = clamp(next, 0, ticks.length - 1); commitValue(side, ticks[next].value); }; // Before anyone touches a handle, the crossing drifts through a few // illustrative waypoints on its own — this is what makes the resting frame // read as alive rather than a static instrument nobody has picked up. // Cancelled for good (interactedRef) the instant a real drag or keystroke // lands, whether from an actual visitor or the site's own autoplay driver // (both dispatch genuine pointerdown events onPointerDown already sees). useEffect(() => { if (!ambient || reduced) return; let cancelled = false; const step = () => { if (cancelled || interactedRef.current) return; const [fl, fr] = IDLE_WAYPOINTS[stepIndexRef.current % IDLE_WAYPOINTS.length]; stepIndexRef.current += 1; const lv = clamp(valueOf(mode, fl, leftMax, R), leftMin, leftMax); const rv = clamp(valueOf(mode, fr, rightMax, R), rightMin, rightMax); setLeft(lv); setRight(rv); // no aria-live announce here and no `commitValue` — an autonomous // demo drift is not a user commit, and shouldn't read to a screen // reader as though someone chose these values. onValuesChange?.(lv, rv, combine(mode, lv, rv)); }; const first = setTimeout(step, IDLE_FIRST_DELAY_MS); const id = setInterval(step, IDLE_STEP_MS); return () => { cancelled = true; clearTimeout(first); clearInterval(id); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [ambient, reduced, mode, leftMin, leftMax, rightMin, rightMax, R]); // Four motion phases, in the order a mount actually passes through them: // "none" (pre-entrance first paint, no transition at all), "entrance" (the // spring draw-in), "idle" (the slow ambient drift, once settled and still // untouched), "interactive" (the normal drag-release/keyboard snap). Same // phase drives the handle's `top`, the crossing's `top`, and the // straightedge path's `d` so the three never fall out of sync with // each other mid-transition. const motionPhase: "none" | "entrance" | "idle" | "interactive" = !entered ? "none" : !settled ? "entrance" : !interacted && ambient ? "idle" : "interactive"; const posEase = motionPhase === "entrance" ? `${ENTRANCE_MS}ms cubic-bezier(0.34,1.56,0.64,1)` : motionPhase === "idle" ? "1600ms cubic-bezier(0.45,0,0.55,1)" : motionPhase === "interactive" ? "320ms cubic-bezier(0.34,1.56,0.64,1)" : null; const handleTransition = (side: Side) => reduced ? "none" : dragging === side ? "background-color 150ms ease, border-color 150ms ease" : `${posEase ? `top ${posEase}, ` : ""}background-color 150ms ease, border-color 150ms ease`; const crossingTransition = reduced ? "none" : posEase ? `top ${posEase}` : "none"; const pathTransition = reduced ? "none" : posEase ? `d ${posEase}` : "none"; // straightedge: quadratic bezier whose control point sits at the true // midpoint x (50) and the average of the two endpoint y's — at sag=0 this // is mathematically identical to a straight line through both handles. const x1 = 100 / 6; const xm = 50; const x2 = 500 / 6; const y1 = renderFracLeft * 100; const y2 = renderFracRight * 100; const sag = dragging ? SAG : 0; const pathD = `M ${x1.toFixed(2)} ${y1.toFixed(2)} Q ${xm} ${((y1 + y2) / 2 + sag).toFixed(2)} ${x2.toFixed(2)} ${y2.toFixed(2)}`; const renderOuterTicks = (ticks: Tick[], side: Side, anchorMax: number) => ( <> {ticks.map((t) => { const f = fracOf(mode, t.value, anchorMax, R); return (

{t.major ? "┬" : "─"} {t.major ? ( // mr-4/ml-4 (16px) clears the 16px handle's ~11.3px rotated // half-diagonal with margin to spare — at the old mr-1.5 (6px) // gap, a handle sitting at or near this tick's own value // visually swallowed the number it's supposed to label. `z-20` // plus its own `bg-background` chip is a second, size-independent // defense: even if a future resize shrinks that clearance again, // the label paints over the handle instead of the reverse. {fmtCompact(t.value)} ) : null}

); })} ); const renderMidTicks = () => ( <> {ticksMid.map((t) => { const f = fracOf(mode, t.value, wMax, 2 * R); return ( {t.major ? "┬" : "─"} ); })} ); const renderSpine = (spanFrac: number) => ( <>

{spanFrac < 0.999 ? ( {"══"} ) : null} ); const renderHandle = (side: Side) => { const value = side === "left" ? leftValue : rightValue; const frac = side === "left" ? renderFracLeft : renderFracRight; const min = side === "left" ? leftMin : rightMin; const max = side === "left" ? leftMax : rightMax; const label = side === "left" ? leftLabel : rightLabel; const fmt = side === "left" ? formatLeft : formatRight; return (

); }; const renderTrack = (side: Side) => { const ticks = side === "left" ? ticksLeft : ticksRight; const anchorMax = side === "left" ? leftMax : rightMax; const spanFrac = side === "left" ? 1 : rightSpanFrac; return (

{renderSpine(spanFrac)} {renderOuterTicks(ticks, side, anchorMax)} {renderHandle(side)}

); }; return (

{leftLabel} {formatLeft(leftValue)}

{middleLabel} {formatResult(result)}

{rightLabel} {formatRight(rightValue)}

{renderTrack("left")}

{renderSpine(midSpanFrac)} {renderMidTicks()}

{"╪"} {formatResult(result)}

{renderTrack("right")}

drag or arrow-key either handle · the straightedge crosses the middle scale at the answer

{liveText}

); } 62:["$","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,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/nomogram-edge/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/nomogram-edge.tsx"}],"className":"h-[70svh] min-h-80"}]]}]