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:T3122,"use client"; import { useCallback, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { cn } from "@/lib/utils"; const MIN_WIDTH = 260; const MIN_HEIGHT = 160; const KEY_STEP = 24; const MARKS = { close: [ "absolute inset-x-[8%] inset-y-[calc(50%-0.5px)] rotate-45 bg-current", "-rotate-45 absolute inset-x-[8%] inset-y-[calc(50%-0.5px)] bg-current", ], collapse: ["absolute inset-x-[12%] inset-y-[calc(50%-0.5px)] bg-current"], zoom: [ "absolute inset-x-[12%] inset-y-[calc(50%-0.5px)] bg-current", "absolute inset-x-[calc(50%-0.5px)] inset-y-[12%] bg-current", ], } as const; type LightName = keyof typeof MARKS; type Variant = "macos" | "windows" | "terminal"; const LIGHTS: { name: LightName; label: string; color: string }[] = [ { color: "var(--window-close)", label: "Close", name: "close" }, { color: "var(--window-collapse)", label: "Collapse", name: "collapse" }, { color: "var(--window-zoom)", label: "Zoom", name: "zoom" }, ]; const CHROME: Record< Variant, { frame: string; bar: string; barTall: string; plate: string; subtitle: string; title: string; content: string; footer: string; edgeX: string; edgeY: string; corner: string; grip: string; control: string; markBox: string; } > = { macos: { bar: "border-window-rule bg-window-titlebar p-1.5 min-h-9 justify-between", barTall: "min-h-[3.25rem]", content: "m-2 border-2 border-window-inset [border-style:inset]", control: "relative block size-[0.72rem] border border-window-control p-0 text-transparent transition-colors group-hover/titlebar:text-window-text/72", corner: "-right-[3px] -bottom-[3px] size-3.5", edgeX: "-right-[3px] w-2", edgeY: "-bottom-[3px] h-2", footer: "min-h-7 px-2.5 pr-6 text-[0.48rem] border-window-footer text-window-footer-text", frame: "border-[3px] border-window-border border-double bg-window-surface text-window-text shadow-window", grip: "bg-window-grip", markBox: "absolute inset-0", plate: "bg-window-surface px-2 py-0.5 shrink justify-items-center text-center", subtitle: "text-window-text-muted", title: "font-bold text-[0.82rem]", }, terminal: { bar: "border-line bg-secondary px-2 py-1 min-h-7", barTall: "min-h-11", content: "", control: "relative grid size-[0.9rem] place-items-center border border-line bg-panel p-0 text-phosphor-dim transition-colors hover:border-line-strong hover:text-phosphor-bright", corner: "-right-px -bottom-px size-3", edgeX: "-right-px w-1.5", edgeY: "-bottom-px h-1.5", footer: "min-h-5 px-2 pr-5 text-[0.4375rem] border-line text-phosphor-dim", frame: "border border-line bg-panel text-foreground shadow-panel", grip: "bg-[repeating-linear-gradient(-45deg,transparent_0_2px,var(--phosphor-dim)_2px_3px)]", markBox: "relative block size-[0.5rem]", plate: "mr-auto justify-items-start", subtitle: "text-phosphor-dim", title: "font-semibold text-1xs text-phosphor-bright uppercase tracking-terminal-lg", }, windows: { bar: "border-window-rule bg-window-titlebar p-1.5 min-h-9", barTall: "min-h-[3.25rem]", content: "m-2 border-2 border-window-inset [border-style:inset]", control: "relative grid size-[1.15rem] place-items-center border border-t-window-bevel-light border-r-window-bevel-dark border-b-window-bevel-dark border-l-window-bevel-light bg-window-surface p-0 text-window-rule active:border-t-window-bevel-dark active:border-r-window-bevel-light active:border-b-window-bevel-light active:border-l-window-bevel-dark", corner: "-right-[3px] -bottom-[3px] size-3.5", edgeX: "-right-[3px] w-2", edgeY: "-bottom-[3px] h-2", footer: "min-h-7 px-2.5 pr-6 text-[0.48rem] border-window-footer text-window-footer-text", frame: "border-[3px] border-window-border border-double bg-window-surface text-window-text shadow-window", grip: "bg-window-grip", markBox: "relative block size-[0.55rem]", plate: "bg-window-surface px-2 py-0.5 mr-auto justify-items-start", subtitle: "text-window-text-muted", title: "font-bold text-[0.82rem]", }, }; function Marks({ name }: { name: LightName }) { return ( <> {MARKS[name].map((mark) => ( ))} ); } function Light({ light, action, className, children, }: { light: (typeof LIGHTS)[number]; action?: () => void; className: string; children: React.ReactNode; }) { if (!action) { return ( ); } return ( ); } function Controls({ variant, action, }: { variant: Variant; action: Record void) | undefined>; }) { const chrome = CHROME[variant]; return ( <> {LIGHTS.map((light) => ( {variant === "macos" && ( ))} ); } function TerminalWindow({ className, children, title, subtitle, footer, variant = "macos", resizable = false, collapsible = false, onClose, onZoom, style, ...props }: React.ComponentProps<"div"> & { title: string; subtitle?: string; footer?: React.ReactNode; variant?: Variant; resizable?: boolean; collapsible?: boolean; onClose?: () => void; onZoom?: () => void; }) { const frame = useRef(null); const [size, setSize] = useState<{ width: number; height: number } | null>( null ); const [collapsed, setCollapsed] = useState(false); const chrome = CHROME[variant]; const startResize = useCallback((event: ReactPointerEvent) => { const axis = event.currentTarget.dataset.axis as "x" | "y" | "both"; const box = frame.current?.getBoundingClientRect(); if (!box) { return; } event.preventDefault(); const handle = event.currentTarget; const originX = event.clientX; const originY = event.clientY; try { handle.setPointerCapture(event.pointerId); } catch { // Not every pointer allows capture; the listeners below still work. } const move = (moved: PointerEvent) => { setSize({ height: axis === "x" ? box.height : Math.max(MIN_HEIGHT, box.height + moved.clientY - originY), width: axis === "y" ? box.width : Math.max(MIN_WIDTH, box.width + moved.clientX - originX), }); }; const stop = () => { handle.removeEventListener("pointermove", move); handle.removeEventListener("pointerup", stop); handle.removeEventListener("pointercancel", stop); }; handle.addEventListener("pointermove", move); handle.addEventListener("pointerup", stop); handle.addEventListener("pointercancel", stop); }, []); const nudge = useCallback((event: React.KeyboardEvent) => { const step = { ArrowDown: [0, KEY_STEP], ArrowLeft: [-KEY_STEP, 0], ArrowRight: [KEY_STEP, 0], ArrowUp: [0, -KEY_STEP], }[event.key]; const box = frame.current?.getBoundingClientRect(); if (!(step && box)) { return; } event.preventDefault(); setSize({ height: Math.max(MIN_HEIGHT, box.height + step[1]), width: Math.max(MIN_WIDTH, box.width + step[0]), }); }, []); const toggleCollapsed = useCallback(() => setCollapsed((open) => !open), []); const action: Record void) | undefined> = { close: onClose, collapse: collapsible ? toggleCollapsed : undefined, zoom: onZoom, }; return (

{variant === "macos" && (

)}

{subtitle ? ( {subtitle} ) : null}

{title}

{/* Mirrors the controls to keep the macOS title centered. */} {variant === "macos" && ( {!collapsed && ( <>

{children}

{footer ? (

{footer}

) : null} )} {resizable && !collapsed && ( <> {/* Only the corner is keyboard-focusable. */}

); } export { TerminalWindow }; 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":[null,["$","$L50",null,{"namespace":"@afterglow","registryDependencies":["@afterglow/theme"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/terminal/components/terminal-window.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]