4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 51:T3113,"use client"; import { type PointerEvent as ReactPointerEvent, useCallback, useRef, useState, } 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 }; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":["@afterglow/theme"]}]]}],["$","$L4f",null,{"sourceUrl":"https://afterglow.thebuilder.dk/r/terminal-window.json","proxyUrl":"https://shadcnregistry.com/r/afterglow/terminal-window","itemId":"@afterglow/terminal-window"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/terminal/components/terminal-window.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

Terminal Window

Installation

Files

components

Styles