{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "retro-window", "title": "RetroWindow", "description": "A Mac OS 9 styled window frame with title bar, close/collapse/zoom controls, active/inactive states, and content area.", "registryDependencies": [ "https://nostalgia-ui.com/r/nostalgia-theme.json", "https://nostalgia-ui.com/r/retro-title-bar.json" ], "files": [ { "path": "registry/new-york/ui/retro-window.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { RetroTitleBar } from \"@/registry/new-york/ui/retro-title-bar\"\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\nexport interface RetroWindowSize {\n width: number\n height: number\n}\n\nexport interface RetroWindowPosition {\n x: number\n y: number\n}\n\nexport interface RetroWindowProps\n extends React.HTMLAttributes {\n /** Window title displayed in the title bar. */\n title: string\n /** Whether the window is in active/focused state. Defaults to true. */\n active?: boolean\n /** Callback when the close box is clicked. */\n onClose?: React.MouseEventHandler\n /**\n * Callback when the collapse box is clicked. Call `event.preventDefault()`\n * to suppress the built-in window-shade toggle.\n */\n onCollapse?: React.MouseEventHandler\n /** Callback when the zoom box is clicked. */\n onZoom?: React.MouseEventHandler\n\n /* ---- Window shade ---- */\n /** Controlled window-shade state (only the title bar is shown). */\n collapsed?: boolean\n /** Uncontrolled initial window-shade state. Defaults to false. */\n defaultCollapsed?: boolean\n /** Fired when the collapse box or a title-bar double-click toggles the shade. */\n onCollapsedChange?: (collapsed: boolean) => void\n\n /* ---- Resize ---- */\n /** Show a size box in the bottom-right corner. Defaults to false. */\n resizable?: boolean\n /** Minimum size while resizing. Defaults to 160 x 80. */\n minWidth?: number\n minHeight?: number\n /** Fired continuously while resizing. */\n onResize?: (size: RetroWindowSize) => void\n\n /* ---- Drag ---- */\n /** Allow dragging the window by its title bar (uses a translate transform). */\n draggable?: boolean\n /** Initial drag offset. Defaults to { x: 0, y: 0 }. */\n defaultPosition?: RetroWindowPosition\n /** Fired continuously while dragging. */\n onPositionChange?: (position: RetroWindowPosition) => void\n\n /* ---- Slots ---- */\n /** Bottom row, e.g. a placard or horizontal scrollbar. Sits beside the size box. */\n footer?: React.ReactNode\n /** Extra classes for the content area (default has 8px padding). */\n contentClassName?: string\n}\n\n/* ------------------------------------------------------------------ */\n/* Size box */\n/* ------------------------------------------------------------------ */\n\nfunction SizeBox({ className, ...props }: React.HTMLAttributes) {\n return (\n \n \n {/* Two overlapping squares — the Platinum grow box */}\n \n \n \n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* RetroWindow */\n/* ------------------------------------------------------------------ */\n\nconst RetroWindow = React.forwardRef(\n function RetroWindow(\n {\n title,\n active = true,\n onClose,\n onCollapse,\n onZoom,\n collapsed: collapsedProp,\n defaultCollapsed = false,\n onCollapsedChange,\n resizable = false,\n minWidth = 160,\n minHeight = 80,\n onResize,\n draggable = false,\n defaultPosition,\n onPositionChange,\n footer,\n contentClassName,\n className,\n style,\n children,\n ...props\n },\n ref\n ) {\n const rootRef = React.useRef(null)\n const setRefs = React.useCallback(\n (node: HTMLDivElement | null) => {\n rootRef.current = node\n if (typeof ref === \"function\") ref(node)\n else if (ref) ref.current = node\n },\n [ref]\n )\n\n /* ---- Window shade ---- */\n const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed)\n const collapsed = collapsedProp ?? internalCollapsed\n const toggleCollapsed = () => {\n const next = !collapsed\n if (collapsedProp === undefined) setInternalCollapsed(next)\n onCollapsedChange?.(next)\n }\n\n /* ---- Resize ---- */\n const [size, setSize] = React.useState(null)\n const resizeRef = React.useRef<{\n x: number\n y: number\n width: number\n height: number\n pointerId: number\n } | null>(null)\n\n const onResizeStart = (e: React.PointerEvent) => {\n const el = rootRef.current\n if (!el || e.button !== 0) return\n e.preventDefault()\n e.stopPropagation()\n e.currentTarget.setPointerCapture(e.pointerId)\n resizeRef.current = {\n x: e.clientX,\n y: e.clientY,\n width: el.offsetWidth,\n height: el.offsetHeight,\n pointerId: e.pointerId,\n }\n }\n const onResizeMove = (e: React.PointerEvent) => {\n const start = resizeRef.current\n if (!start || start.pointerId !== e.pointerId) return\n const next = {\n width: Math.max(minWidth, Math.round(start.width + e.clientX - start.x)),\n height: Math.max(minHeight, Math.round(start.height + e.clientY - start.y)),\n }\n setSize(next)\n onResize?.(next)\n }\n const onResizeEnd = (e: React.PointerEvent) => {\n if (resizeRef.current?.pointerId !== e.pointerId) return\n resizeRef.current = null\n if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n e.currentTarget.releasePointerCapture(e.pointerId)\n }\n }\n\n /* ---- Drag ---- */\n const [position, setPosition] = React.useState(\n defaultPosition ?? { x: 0, y: 0 }\n )\n const dragRef = React.useRef<{\n x: number\n y: number\n origin: RetroWindowPosition\n pointerId: number\n } | null>(null)\n\n const onDragStart = (e: React.PointerEvent) => {\n if (!draggable || e.button !== 0) return\n // Let the control boxes handle their own clicks.\n if ((e.target as HTMLElement).closest(\"button\")) return\n e.preventDefault()\n e.currentTarget.setPointerCapture(e.pointerId)\n dragRef.current = {\n x: e.clientX,\n y: e.clientY,\n origin: position,\n pointerId: e.pointerId,\n }\n }\n const onDragMove = (e: React.PointerEvent) => {\n const start = dragRef.current\n if (!start || start.pointerId !== e.pointerId) return\n const next = {\n x: start.origin.x + e.clientX - start.x,\n y: start.origin.y + e.clientY - start.y,\n }\n setPosition(next)\n onPositionChange?.(next)\n }\n const onDragEnd = (e: React.PointerEvent) => {\n if (dragRef.current?.pointerId !== e.pointerId) return\n dragRef.current = null\n if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n e.currentTarget.releasePointerCapture(e.pointerId)\n }\n }\n\n /* ---- Style ---- */\n const mergedStyle: React.CSSProperties = { ...style }\n if (size) {\n mergedStyle.width = size.width\n mergedStyle.height = size.height\n }\n if (collapsed) {\n mergedStyle.height = \"auto\"\n mergedStyle.minHeight = 0\n }\n if (draggable && (position.x !== 0 || position.y !== 0)) {\n mergedStyle.transform = `translate(${position.x}px, ${position.y}px)`\n }\n\n const showSizeBox = resizable && !collapsed\n\n return (\n \n {/* Title bar */}\n {\n onCollapse?.(e)\n if (!e.defaultPrevented) toggleCollapsed()\n }}\n onZoom={onZoom}\n onDoubleClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) return\n toggleCollapsed()\n }}\n onPointerDown={onDragStart}\n onPointerMove={onDragMove}\n onPointerUp={onDragEnd}\n onPointerCancel={onDragEnd}\n onLostPointerCapture={onDragEnd}\n className={cn(\"shrink-0\", draggable && \"touch-none select-none\")}\n />\n\n {!collapsed && (\n <>\n {/* Content area */}\n \n {children}\n \n\n {/* Footer row (+ size box) */}\n {footer ? (\n
\n
{footer}
\n {showSizeBox && (\n \n )}\n
\n ) : (\n showSizeBox && (\n
\n \n
\n )\n )}\n \n )}\n \n )\n }\n)\nRetroWindow.displayName = \"RetroWindow\"\n\nexport { RetroWindow }\n", "type": "registry:ui" } ], "type": "registry:ui" }