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:T38b1,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; // --------------------------------------------------------------------------- // UmbraToggle — a binary switch drawn as an eclipse. A small bright "sun" // disc sits fixed inside a 56x28 track; a dark "occluder" disc slides across // it. The overlap between the two circles is pure geometry — the occluder is // just a second circle in the same SVG, painted with the track's own // background color so it visually "cuts into" the sun rather than needing a // mask, and at full occlusion a thin corona (a 1px --foreground ring plus a // soft blur glow) appears around the sun's rim. Occlusion fraction (0 = off, // 1 = on) is the single driver: it positions the occluder, interpolates the // track's ambient tint, and fades the corona in near fraction=1. Everything // per-frame during a drag is written straight to refs (no React state), and // discrete transitions (click, keyboard) run the same writer on a short CSS // transition instead of a rAF loop. // --------------------------------------------------------------------------- export interface UmbraToggleProps { /** controlled state; omit for uncontrolled */ checked?: boolean; /** uncontrolled initial state. Default false. */ defaultChecked?: boolean; /** called with the new state after a toggle */ onCheckedChange?: (checked: boolean) => void; /** accessible name; falls back to the visible Light/Dark label pair */ "aria-label"?: string; /** extra classes merged onto the rendered root element */ className?: string; } const TRACK_W = 56; const TRACK_H = 28; const SUN_R = 8; const OCCLUDER_R = 9; const INSET = 6; // sun center offset from each edge at rest const TRAVEL = TRACK_W - INSET * 2; // distance the occluder center travels const TRANSITION_MS = 220; const BREATHE_MS = 900; function lerp(a: number, b: number, t: number) { return a + (b - a) * t; } function applyFrame( occluderEl: SVGCircleElement | null, trackEl: HTMLButtonElement | null, coronaEl: SVGCircleElement | null, fraction: number, transition: boolean ) { if (occluderEl) { // rests clear of the sun when off (fraction 0) and slides fully onto // it — same center, larger radius — when on (fraction 1), so "off" // shows the bare sun and "on" is a total eclipse with the corona const cx = lerp(INSET + TRAVEL, INSET, fraction); occluderEl.style.transition = transition ? `cx ${TRANSITION_MS}ms cubic-bezier(0.16,1,0.3,1), fill ${TRANSITION_MS}ms linear` : "none"; occluderEl.setAttribute("cx", String(cx)); } if (trackEl) { // ambient tint darkens smoothly with occlusion — interpolate toward a // darker mix of the track's own border token rather than a hardcoded // color. The occluder disc's fill reads this same custom property (it // inherits down through the SVG), so it always matches the track's // current backing color exactly and reads as "cutting into" the sun via // plain paint order rather than a mask. const tint = `color-mix(in srgb, var(--border) ${100 - fraction * 55}%, #000 ${fraction * 55}%)`; trackEl.style.transition = transition ? `background-color ${TRANSITION_MS}ms linear, border-color ${TRANSITION_MS}ms linear` : "none"; trackEl.style.backgroundColor = tint; trackEl.style.setProperty("--umbra-tint", tint); // Near full occlusion (the same fade window the corona uses) the // occluder is otherwise painted in the exact tint the track background // was just set to, so the "moon" reads as a hole rather than a disc — // in light theme especially, where the tint never gets dark enough for // the blurred corona ring alone to read against it. Mix a sliver of the // themed --umbra-bright token (always the *light* token for the current // theme, same trick the corona stroke already uses) into the occluder's // own fill so it stays a legible disc instead of disappearing into the // background it's built from. At fraction <= 0.72 this is a 0% mix, i.e. // exactly `tint` — unchanged from before. const moonMix = Math.max(0, (fraction - 0.72) / 0.28) * 22; const moon = moonMix > 0 ? `color-mix(in srgb, ${tint} ${100 - moonMix}%, var(--umbra-bright) ${moonMix}%)` : tint; trackEl.style.setProperty("--umbra-moon", moon); } if (coronaEl) { // A running `breathe` keyframe animation outranks this opacity write in // the cascade (animations win over the specified/inline value for the // property they animate) — without cancelling it first, a toggle that // lands mid-breathe keeps the corona visibly pulsing on the "off" sun // for the rest of the 900ms, instead of fading out immediately. coronaEl.style.animation = "none"; const coronaOpacity = Math.max(0, (fraction - 0.72) / 0.28); coronaEl.style.transition = transition ? `opacity ${TRANSITION_MS}ms linear` : "none"; coronaEl.style.opacity = String(coronaOpacity); } } export function UmbraToggle({ checked, defaultChecked = false, onCheckedChange, "aria-label": ariaLabel, className = "", }: UmbraToggleProps) { const [uncontrolled, setUncontrolled] = useState(defaultChecked); const isControlled = checked !== undefined; const value = isControlled ? checked : uncontrolled; const trackRef = useRef(null); const occluderRef = useRef(null); const coronaRef = useRef(null); const reducedRef = useRef(false); const dragFractionRef = useRef(value ? 1 : 0); const pointerDownRef = useRef(false); const movedRef = useRef(false); const startXRef = useRef(0); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); reducedRef.current = mq.matches; const onChange = () => { reducedRef.current = mq.matches; }; mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); // reflect `value` whenever it changes and we're not mid-drag useEffect(() => { if (pointerDownRef.current) return; dragFractionRef.current = value ? 1 : 0; applyFrame(occluderRef.current, trackRef.current, coronaRef.current, dragFractionRef.current, !reducedRef.current); }, [value]); const commit = useCallback( (next: boolean) => { if (!isControlled) setUncontrolled(next); onCheckedChange?.(next); }, [isControlled, onCheckedChange] ); const toggle = useCallback(() => { commit(!value); }, [commit, value]); // Pointer down always arms; only real movement past a small threshold // (movedRef) counts as a drag. A plain click/tap (no movement) just flips // the current value — a drag instead snaps to whichever side the pointer // ended up closer to, so click and drag are two coherent gestures rather // than one continuous-position model fighting a discrete toggle. const updateFromPointer = (clientX: number) => { const track = trackRef.current; if (!track) return; const rect = track.getBoundingClientRect(); // the occluder tracks the pointer directly (1:1) rather than the pointer // driving `fraction` straight — fraction is ON-ness (1 = occluder at // INSET, over the sun), which is the *opposite* end of the track from // where the occluder rests when off, so deriving fraction from a plain // left-to-right t would move the disc backwards relative to the pointer const cx = Math.min(INSET + TRAVEL, Math.max(INSET, clientX - rect.left)); const fraction = 1 - (cx - INSET) / TRAVEL; dragFractionRef.current = fraction; applyFrame(occluderRef.current, trackRef.current, coronaRef.current, fraction, false); }; const onPointerDown = (e: React.PointerEvent) => { const track = trackRef.current; if (!track) return; pointerDownRef.current = true; movedRef.current = false; startXRef.current = e.clientX; track.setPointerCapture(e.pointerId); }; const onPointerMove = (e: React.PointerEvent) => { if (!pointerDownRef.current) return; if (!movedRef.current && Math.abs(e.clientX - startXRef.current) > 3) { movedRef.current = true; } if (movedRef.current) updateFromPointer(e.clientX); }; const onPointerUp = (e: React.PointerEvent) => { if (!pointerDownRef.current) return; pointerDownRef.current = false; trackRef.current?.releasePointerCapture(e.pointerId); const next = movedRef.current ? dragFractionRef.current >= 0.5 : !value; // Only paint the guessed `next` state when it's actually going to become // `value` — a controlled parent can ignore `onCheckedChange` and leave // `value` unchanged, and painting the guess anyway would desync the // visible disc from aria-checked. When `next` isn't adopted (or a drag // released back on the side it started from, so `[value]` never refires), // settle back to the real current value instead. if (next !== value) commit(next); else applyFrame(occluderRef.current, trackRef.current, coronaRef.current, value ? 1 : 0, !reducedRef.current); }; // A cancelled gesture (browser-initiated scroll takeover, stylus lift, // system interruption) is not a release — nothing was decided, so it must // never commit. Just disarm and repaint from the real value. const onPointerCancel = (e: React.PointerEvent) => { if (!pointerDownRef.current) return; pointerDownRef.current = false; trackRef.current?.releasePointerCapture(e.pointerId); applyFrame(occluderRef.current, trackRef.current, coronaRef.current, value ? 1 : 0, !reducedRef.current); }; const onKeyDown = (e: React.KeyboardEvent) => { if (e.repeat) return; // holding the key shouldn't machine-gun the toggle if (e.key === " " || e.key === "Enter") { e.preventDefault(); toggle(); } }; const breathe = () => { const el = coronaRef.current; if (!el || reducedRef.current || !value) return; el.style.animation = "none"; el.getBoundingClientRect(); // force reflow so re-adding the animation restarts it el.style.animation = `ns-umbra-breathe ${BREATHE_MS}ms ease-in-out`; }; return ( ); } const CSS = ` @keyframes ns-umbra-breathe { 0% { opacity: 1; } 40% { opacity: 0.35; } 100% { opacity: 1; } } /* Corona stroke: var(--background) in light theme (white, the brightest token available, against the mid-gray tint the occluder darkens toward) and var(--foreground) in dark theme (unchanged from before — already high-contrast against the near-black tint there). */ .ns-umbra-track .ns-umbra-corona { stroke: var(--background); } .dark .ns-umbra-track .ns-umbra-corona { stroke: var(--foreground); } /* Same "always the bright token for this theme" trick, exposed as a custom property the occluder's near-full-occlusion highlight (--umbra-moon, set in applyFrame) mixes into its own fill. */ .ns-umbra-track { --umbra-bright: var(--background); } .dark .ns-umbra-track { --umbra-bright: var(--foreground); } @media (prefers-reduced-motion: reduce) { button.ns-umbra-track svg circle { transition: none !important; animation: none !important; } } `; 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/switch-eclipse/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/switch-eclipse.tsx"}],"className":"h-[70svh] min-h-80"}]]}]