50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T197d,// Hairline UI · mode-switcher · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { Lock } from "lucide-react"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * MODE SWITCHER: Fast, Thinking, Research… * * A segmented radio group with a pill that is thrown to the chosen * mode, with a little give. The description underneath morphs * into the new mode's line, keeping the words they share. Locked * modes stay visible with a lock, so people see what an upgrade * unlocks; choosing one calls onLockedSelect instead. Arrow keys * move between modes, like any radio group. * ───────────────────────────────────────────────────────── */ export interface Mode { value: string; label: string; /** One line shown under the switcher for the chosen mode. */ description?: string; icon?: React.ReactNode; /** Visible but not selectable, e.g. a paid mode. */ locked?: boolean; } export interface ModeSwitcherProps extends Omit, "onChange" | "defaultValue"> { modes: Mode[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Called when someone picks a locked mode, e.g. to open pricing. */ onLockedSelect?: (mode: Mode) => void; /** Show the chosen mode's description underneath. */ showDescription?: boolean; label?: string; } const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); export function ModeSwitcher({ modes, value, defaultValue, onValueChange, onLockedSelect, showDescription = false, label = "Mode", className = "", ...props }: ModeSwitcherProps) { const reduced = useReducedMotion(); const [own, setOwn] = React.useState(defaultValue ?? modes.find((m) => !m.locked)?.value); const current = value ?? own; const refs = React.useRef<(HTMLButtonElement | null)[]>([]); const [pill, setPill] = React.useState<{ left: number; width: number; ready: boolean } | null>(null); const index = modes.findIndex((m) => m.value === current); const active = modes[index]; // Measure the chosen button so the pill can slide to it; re-measure when the container resizes. React.useLayoutEffect(() => { const el = refs.current[index]; if (!el) return; // The first placement doesn't animate; every move after that does. const measure = () => setPill((p) => (p && p.left === el.offsetLeft && p.width === el.offsetWidth ? p : { left: el.offsetLeft, width: el.offsetWidth, ready: p !== null })); measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, [index]); const choose = (mode: Mode) => { if (mode.locked) { onLockedSelect?.(mode); return; } if (value === undefined) setOwn(mode.value); onValueChange?.(mode.value); }; const onKeyDown = (e: React.KeyboardEvent) => { if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) return; e.preventDefault(); const dir = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1; const open = modes.map((m, i) => ({ m, i })).filter(({ m }) => !m.locked); const at = open.findIndex(({ i }) => i === index); const next = open[(at + dir + open.length) % open.length]; if (!next) return; choose(next.m); refs.current[next.i]?.focus(); }; return (

{pill && ( )} {modes.map((mode, i) => { const selected = mode.value === current; return ( ); })}

{showDescription && ( // One line that morphs from mode to mode, rather than being swapped.

{active?.description ?? ""}

)}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/mode-switcher.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]