4e: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"] 4f:T3756,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; type Bounds = { width: number; height: number } | null; const WindowContainerContext = React.createContext<{ getRect: () => DOMRect | null; bumpZ: () => number; topZ: number; } | null>(null); export interface WindowContainerProps extends React.HTMLAttributes {} export function WindowContainer({ className, children, ...props }: WindowContainerProps) { const containerRef = React.useRef(null); const zCounterRef = React.useRef(10); const [topZ, setTopZ] = React.useState(zCounterRef.current); const getRect = React.useCallback((): DOMRect | null => { const el = containerRef.current; if (!el) return null; return el.getBoundingClientRect(); }, []); const bumpZ = React.useCallback((): number => { zCounterRef.current = zCounterRef.current + 1; setTopZ(zCounterRef.current); return zCounterRef.current; }, []); return (

{children}

); } function useContainerBounds() { const ctx = React.useContext(WindowContainerContext); return ctx?.getRect ?? (() => null); } function useZOrder() { const ctx = React.useContext(WindowContainerContext); return { bumpZ: ctx?.bumpZ ?? (() => 1), topZ: ctx?.topZ ?? 1 }; } export interface WindowProps extends React.HTMLAttributes { title?: string; initialX?: number; initialY?: number; initialWidth?: number; initialHeight?: number; minWidth?: number; minHeight?: number; onClose?: () => void; } export function Window({ className, children, title = "Window", initialX = 24, initialY = 24, initialWidth = 360, initialHeight = 220, minWidth = 240, minHeight = 120, ...props }: WindowProps) { const getRect = useContainerBounds(); const { bumpZ, topZ } = useZOrder(); const [position, setPosition] = React.useState({ x: initialX, y: initialY }); const [size, setSize] = React.useState({ width: initialWidth, height: initialHeight }); const [isDragging, setIsDragging] = React.useState(false); const [isResizing, setIsResizing] = React.useState< | null | "right" | "left" | "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left" >(null); const dragOffsetRef = React.useRef({ dx: 0, dy: 0 }); const HEADER_HEIGHT_PX = 36; // 2.25rem at 16px base const [hidden, setHidden] = React.useState(false); const [isMinimized, setIsMinimized] = React.useState(false); const [isMaximized, setIsMaximized] = React.useState(false); const prevForMaximizeRef = React.useRef<{ x: number; y: number; width: number; height: number; } | null>(null); const prevHeightForMinimizeRef = React.useRef(null); const [animateNext, setAnimateNext] = React.useState(false); const isInteracting = isDragging || Boolean(isResizing); const [zIndex, setZIndex] = React.useState(() => bumpZ()); const isFocused = zIndex === topZ; React.useEffect(() => { if (!animateNext) return; const id = window.setTimeout(() => setAnimateNext(false), 320); return () => window.clearTimeout(id); }, [animateNext]); const clampToBounds = React.useCallback( (x: number, y: number, width: number, height: number) => { const rect = getRect(); if (!rect) return { x, y }; const maxX = Math.max(0, rect.width - width); const maxY = Math.max(0, rect.height - height); return { x: Math.min(Math.max(0, x), maxX), y: Math.min(Math.max(0, y), maxY), }; }, [getRect] ); const onHeaderPointerDown = (e: React.PointerEvent) => { (e.target as Element).setPointerCapture?.(e.pointerId); // Avoid starting a drag if this pointerdown is part of a double-click (handled separately) if ((e as any).detail >= 2) return; setIsDragging(true); setZIndex(bumpZ()); const rect = getRect(); const localX = rect ? e.clientX - rect.left : e.clientX; const localY = rect ? e.clientY - rect.top : e.clientY; dragOffsetRef.current = { dx: localX - position.x, dy: localY - position.y, }; }; const onResizePointerDown = ( e: React.PointerEvent, direction: | "right" | "left" | "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left" ) => { (e.target as Element).setPointerCapture?.(e.pointerId); setAnimateNext(false); setIsResizing(direction); setZIndex(bumpZ()); }; React.useEffect(() => { const handleMove = (e: PointerEvent) => { const rect = getRect(); const localX = rect ? e.clientX - rect.left : e.clientX; const localY = rect ? e.clientY - rect.top : e.clientY; if (isDragging) { const nextX = localX - dragOffsetRef.current.dx; const nextY = localY - dragOffsetRef.current.dy; const clamped = clampToBounds(nextX, nextY, size.width, size.height); setPosition(clamped); } else if (isResizing) { if (!rect) return; if (isResizing === "right" || isResizing === "bottom-right" || isResizing === "top-right") { const maxWidth = Math.max(minWidth, rect.width - position.x); const desired = localX - position.x; // width based on pointer const newWidth = Math.max(minWidth, Math.min(maxWidth, desired)); setSize((s) => ({ ...s, width: newWidth })); } if (isResizing === "left" || isResizing === "bottom-left" || isResizing === "top-left") { const minX = 0; const maxX = position.x + size.width - minWidth; const newX = Math.max(minX, Math.min(maxX, localX)); const newWidth = Math.max(minWidth, size.width + (position.x - newX)); setPosition((p) => ({ ...p, x: newX })); setSize((s) => ({ ...s, width: newWidth })); } if ( isResizing === "bottom" || isResizing === "bottom-right" || isResizing === "bottom-left" ) { const maxHeight = Math.max(minHeight, rect.height - position.y); const desired = localY - position.y; // height based on pointer const newHeight = Math.max(minHeight, Math.min(maxHeight, desired)); setSize((s) => ({ ...s, height: newHeight })); } if (isResizing === "top" || isResizing === "top-right" || isResizing === "top-left") { const minY = 0; const maxY = position.y + size.height - minHeight; const newY = Math.max(minY, Math.min(maxY, localY)); const newHeight = Math.max(minHeight, size.height + (position.y - newY)); setPosition((p) => ({ ...p, y: newY })); setSize((s) => ({ ...s, height: newHeight })); } } }; const handleUp = () => { setIsDragging(false); setIsResizing(null); // Ensure position remains within bounds after interactions setPosition((p) => clampToBounds(p.x, p.y, size.width, size.height)); }; window.addEventListener("pointermove", handleMove); window.addEventListener("pointerup", handleUp); return () => { window.removeEventListener("pointermove", handleMove); window.removeEventListener("pointerup", handleUp); }; }, [ isDragging, isResizing, clampToBounds, getRect, minHeight, minWidth, position.x, position.y, size.width, size.height, ]); // Keep inside bounds if container size changes React.useEffect(() => { const ro = new ResizeObserver(() => { setPosition((p) => clampToBounds(p.x, p.y, size.width, size.height)); }); // Try to observe the nearest container element in DOM tree const containerEl = document?.querySelector?.("[data-window-container]") as HTMLElement | null; if (containerEl) ro.observe(containerEl); return () => ro.disconnect(); }, [clampToBounds, size.width, size.height]); return hidden ? null : (

setZIndex(bumpZ())} >

{ e.stopPropagation(); const rect = getRect(); if (!rect) return; setAnimateNext(true); if (!isMaximized) { prevForMaximizeRef.current = { x: position.x, y: position.y, width: size.width, height: size.height, }; setPosition({ x: 0, y: 0 }); setSize({ width: rect.width, height: rect.height }); setIsMaximized(true); setIsMinimized(false); } else { const prev = prevForMaximizeRef.current; if (prev) { setPosition({ x: prev.x, y: prev.y }); setSize({ width: prev.width, height: prev.height }); } setIsMaximized(false); } }} aria-label="Drag window" >

e.stopPropagation()} >

{title}

{children}

{/* Resize handles */}

onResizePointerDown(e, "right")} aria-label="Resize right" />

onResizePointerDown(e, "left")} aria-label="Resize left" />

onResizePointerDown(e, "bottom")} aria-label="Resize bottom" />

onResizePointerDown(e, "top")} aria-label="Resize top" />

onResizePointerDown(e, "bottom-right")} aria-label="Resize corner" />

onResizePointerDown(e, "bottom-left")} aria-label="Resize corner" />

onResizePointerDown(e, "top-right")} aria-label="Resize corner" />

onResizePointerDown(e, "top-left")} aria-label="Resize corner" />

); } export default Window; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/new-york/blocks/window/window.tsx","content":"$4f","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]