@hanzo/ui 5.3.34 → 5.3.35

package/dist/src/desktop/index.d.ts

@@ -0,0 +1,7 @@
+export { Window, WindowControls } from './window';
+export type { WindowProps, WindowControlsProps } from './window';
+export { Spotlight } from './spotlight';
+export type { SpotlightProps, SpotlightItem } from './spotlight';
+export { useWindowManager, useDesktopSettings, useOverlayManager, useKeyboardShortcuts, } from './hooks';
+export type { WindowId, WindowState, WindowManager, DesktopSettings, DesktopSettingsActions, ColorScheme, DockPosition, OverlayState, OverlayManager, KeyboardShortcut, } from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/desktop/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/desktop/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACjD,YAAY,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAGhE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAGhE,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,SAAS,CAAA;AAEhB,YAAY,EACV,QAAQ,EACR,WAAW,EACX,aAAa,EACb,eAAe,EACf,sBAAsB,EACtB,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,MAAM,SAAS,CAAA"}

package/dist/src/desktop/index.js

@@ -0,0 +1,8 @@
+// Desktop Environment Components for @hanzo/ui
+// Provides macOS-style window management, spotlight search, and desktop utilities
+// Window Component
+export { Window, WindowControls } from './window';
+// Spotlight Search
+export { Spotlight } from './spotlight';
+// Hooks
+export { useWindowManager, useDesktopSettings, useOverlayManager, useKeyboardShortcuts, } from './hooks';

package/dist/src/desktop/spotlight.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export interface SpotlightItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    icon?: React.ReactNode;
+    category?: string;
+    action?: () => void;
+    keywords?: string[];
+}
+export interface SpotlightProps {
+    isOpen: boolean;
+    onClose: () => void;
+    items?: SpotlightItem[];
+    onSelect?: (item: SpotlightItem) => void;
+    placeholder?: string;
+    className?: string;
+    maxResults?: number;
+    categories?: string[];
+    renderItem?: (item: SpotlightItem, isSelected: boolean) => React.ReactNode;
+}
+export declare const Spotlight: React.FC<SpotlightProps>;
+export default Spotlight;
+//# sourceMappingURL=spotlight.d.ts.map

package/dist/src/desktop/spotlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight.d.ts","sourceRoot":"","sources":["../../../src/desktop/spotlight.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;CAC3E;AASD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgQ9C,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/src/desktop/spotlight.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Search, Command, ArrowRight, FileText, Folder, Settings, X } from "lucide-react";
+import { cn } from "../utils";
+const categoryIcons = {
+    'Applications': _jsx(Folder, { className: "w-4 h-4" }),
+    'Files': _jsx(FileText, { className: "w-4 h-4" }),
+    'Settings': _jsx(Settings, { className: "w-4 h-4" }),
+    'Actions': _jsx(Command, { className: "w-4 h-4" }),
+};
+export const Spotlight = ({ isOpen, onClose, items = [], onSelect, placeholder = "Search...", className, maxResults = 8, categories, renderItem, }) => {
+    const [query, setQuery] = React.useState("");
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const inputRef = React.useRef(null);
+    // Filter items based on query
+    const filteredItems = React.useMemo(() => {
+        if (!query.trim()) {
+            return items.slice(0, maxResults);
+        }
+        const lowerQuery = query.toLowerCase();
+        return items
+            .filter((item) => {
+            const matchesTitle = item.title.toLowerCase().includes(lowerQuery);
+            const matchesSubtitle = item.subtitle?.toLowerCase().includes(lowerQuery);
+            const matchesKeywords = item.keywords?.some((k) => k.toLowerCase().includes(lowerQuery));
+            const matchesCategory = item.category?.toLowerCase().includes(lowerQuery);
+            return matchesTitle || matchesSubtitle || matchesKeywords || matchesCategory;
+        })
+            .slice(0, maxResults);
+    }, [items, query, maxResults]);
+    // Group items by category
+    const groupedItems = React.useMemo(() => {
+        const groups = {};
+        const orderedCategories = categories || [];
+        filteredItems.forEach((item) => {
+            const category = item.category || "Results";
+            if (!groups[category]) {
+                groups[category] = [];
+            }
+            groups[category].push(item);
+        });
+        // Sort by category order if provided
+        if (orderedCategories.length > 0) {
+            const sortedGroups = {};
+            orderedCategories.forEach((cat) => {
+                if (groups[cat]) {
+                    sortedGroups[cat] = groups[cat];
+                }
+            });
+            Object.keys(groups).forEach((cat) => {
+                if (!sortedGroups[cat]) {
+                    sortedGroups[cat] = groups[cat];
+                }
+            });
+            return sortedGroups;
+        }
+        return groups;
+    }, [filteredItems, categories]);
+    // Flatten for keyboard navigation
+    const flatItems = Object.values(groupedItems).flat();
+    // Reset selection when query changes
+    React.useEffect(() => {
+        setSelectedIndex(0);
+    }, [query]);
+    // Focus input when opened
+    React.useEffect(() => {
+        if (isOpen) {
+            setQuery("");
+            setSelectedIndex(0);
+            requestAnimationFrame(() => {
+                inputRef.current?.focus();
+            });
+        }
+    }, [isOpen]);
+    // Keyboard navigation
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            switch (e.key) {
+                case "ArrowDown":
+                    e.preventDefault();
+                    setSelectedIndex((prev) => Math.min(prev + 1, flatItems.length - 1));
+                    break;
+                case "ArrowUp":
+                    e.preventDefault();
+                    setSelectedIndex((prev) => Math.max(prev - 1, 0));
+                    break;
+                case "Enter":
+                    e.preventDefault();
+                    const selectedItem = flatItems[selectedIndex];
+                    if (selectedItem) {
+                        selectedItem.action?.();
+                        onSelect?.(selectedItem);
+                        onClose();
+                    }
+                    break;
+                case "Escape":
+                    e.preventDefault();
+                    onClose();
+                    break;
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, flatItems, selectedIndex, onSelect, onClose]);
+    return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(_Fragment, { children: [_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: onClose, className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" }), _jsxs(motion.div, { initial: { opacity: 0, scale: 0.95, y: -20 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: -20 }, transition: { type: "spring", damping: 25, stiffness: 300 }, className: cn("fixed left-1/2 top-[15%] -translate-x-1/2 w-full max-w-xl z-[10000]", "bg-gray-900/95 border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl overflow-hidden", className), children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/10", children: [_jsx(Search, { className: "w-5 h-5 text-white/50" }), _jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: placeholder, className: "flex-1 bg-transparent text-white text-lg outline-none placeholder:text-white/40" }), query && (_jsx("button", { onClick: () => setQuery(""), className: "p-1 hover:bg-white/10 rounded transition-colors", children: _jsx(X, { className: "w-4 h-4 text-white/50" }) })), _jsx("kbd", { className: "px-2 py-0.5 bg-white/10 rounded text-xs text-white/50", children: "ESC" })] }), _jsx("div", { className: "max-h-[50vh] overflow-y-auto", children: flatItems.length === 0 ? (_jsxs("div", { className: "px-4 py-8 text-center text-white/50", children: ["No results found for \"", query, "\""] })) : (Object.entries(groupedItems).map(([category, categoryItems]) => (_jsxs("div", { children: [_jsx("div", { className: "px-4 py-2 text-xs font-medium text-white/40 uppercase tracking-wider bg-white/5", children: category }), categoryItems.map((item) => {
+                                        const itemIndex = flatItems.indexOf(item);
+                                        const isSelected = itemIndex === selectedIndex;
+                                        if (renderItem) {
+                                            return (_jsx("div", { onClick: () => {
+                                                    item.action?.();
+                                                    onSelect?.(item);
+                                                    onClose();
+                                                }, children: renderItem(item, isSelected) }, item.id));
+                                        }
+                                        return (_jsxs("div", { onClick: () => {
+                                                item.action?.();
+                                                onSelect?.(item);
+                                                onClose();
+                                            }, className: cn("flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors", isSelected ? "bg-blue-500/20" : "hover:bg-white/5"), children: [_jsx("div", { className: "w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center", children: item.icon || categoryIcons[category] || _jsx(FileText, { className: "w-4 h-4 text-white/70" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium text-white truncate", children: item.title }), item.subtitle && (_jsx("div", { className: "text-xs text-white/50 truncate", children: item.subtitle }))] }), isSelected && (_jsx(ArrowRight, { className: "w-4 h-4 text-white/50" }))] }, item.id));
+                                    })] }, category)))) }), _jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-white/10 text-xs text-white/40", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "px-1.5 py-0.5 bg-white/10 rounded", children: "\u2191" }), _jsx("kbd", { className: "px-1.5 py-0.5 bg-white/10 rounded", children: "\u2193" }), "to navigate"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "px-1.5 py-0.5 bg-white/10 rounded", children: "\u23CE" }), "to select"] })] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Command, { className: "w-3 h-3" }), _jsx("span", { children: "+ Space to open" })] })] })] })] })) }));
+};
+export default Spotlight;

package/dist/src/desktop/window.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+export interface WindowProps {
+    title: string;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    onClose?: () => void;
+    onMinimize?: () => void;
+    onMaximize?: () => void;
+    onFocus?: () => void;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    defaultX?: number;
+    defaultY?: number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    resizable?: boolean;
+    draggable?: boolean;
+    centered?: boolean;
+    hideControls?: boolean;
+    variant?: 'default' | 'dark' | 'light' | 'transparent';
+}
+export interface WindowControlsProps {
+    onClose?: () => void;
+    onMinimize?: () => void;
+    onMaximize?: () => void;
+    isMaximized?: boolean;
+}
+export declare const WindowControls: React.FC<WindowControlsProps>;
+export declare const Window: React.ForwardRefExoticComponent<WindowProps & React.RefAttributes<HTMLDivElement>>;
+export default Window;
+//# sourceMappingURL=window.d.ts.map

package/dist/src/desktop/window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/desktop/window.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,CAAA;CACvD;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsCxD,CAAA;AASD,eAAO,MAAM,MAAM,oFAwMlB,CAAA;AAID,eAAe,MAAM,CAAA"}

package/dist/src/desktop/window.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { motion, useDragControls } from "framer-motion";
+import { X, Minus, Maximize2, Minimize2 } from "lucide-react";
+import { cn } from "../utils";
+export const WindowControls = ({ onClose, onMinimize, onMaximize, isMaximized = false, }) => {
+    return (_jsxs("div", { className: "flex items-center gap-2 group", children: [_jsx("button", { onClick: onClose, className: "w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-colors flex items-center justify-center group-hover:shadow-sm", title: "Close", "aria-label": "Close window", children: _jsx(X, { className: "w-2 h-2 text-red-900 opacity-0 group-hover:opacity-100 transition-opacity" }) }), _jsx("button", { onClick: onMinimize, className: "w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors flex items-center justify-center group-hover:shadow-sm", title: "Minimize", "aria-label": "Minimize window", children: _jsx(Minus, { className: "w-2 h-2 text-yellow-900 opacity-0 group-hover:opacity-100 transition-opacity" }) }), _jsx("button", { onClick: onMaximize, className: "w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-colors flex items-center justify-center group-hover:shadow-sm", title: isMaximized ? "Restore" : "Maximize", "aria-label": isMaximized ? "Restore window" : "Maximize window", children: isMaximized ? (_jsx(Minimize2, { className: "w-2 h-2 text-green-900 opacity-0 group-hover:opacity-100 transition-opacity" })) : (_jsx(Maximize2, { className: "w-2 h-2 text-green-900 opacity-0 group-hover:opacity-100 transition-opacity" })) })] }));
+};
+const variantStyles = {
+    default: "bg-gray-900/95 border-white/10",
+    dark: "bg-black/95 border-white/5",
+    light: "bg-white/95 border-gray-200 text-gray-900",
+    transparent: "bg-gray-900/80 border-white/10",
+};
+export const Window = React.forwardRef(({ title, icon, children, className, onClose, onMinimize, onMaximize, onFocus, defaultWidth = 600, defaultHeight = 400, defaultX, defaultY, minWidth = 200, minHeight = 100, maxWidth, maxHeight, resizable = true, draggable = true, centered = true, hideControls = false, variant = 'default', }, ref) => {
+    const dragControls = useDragControls();
+    const [isMaximized, setIsMaximized] = React.useState(false);
+    const [position, setPosition] = React.useState(() => {
+        if (typeof window !== 'undefined') {
+            const x = defaultX ?? (centered ? (window.innerWidth - defaultWidth) / 2 : 100);
+            const y = defaultY ?? (centered ? (window.innerHeight - defaultHeight) / 2 : 100);
+            return { x, y };
+        }
+        return { x: 100, y: 100 };
+    });
+    const [size, setSize] = React.useState({ width: defaultWidth, height: defaultHeight });
+    const [preMaximizeState, setPreMaximizeState] = React.useState(null);
+    const [initialMount, setInitialMount] = React.useState(true);
+    // Update position only on prop changes after initial mount
+    React.useEffect(() => {
+        if (initialMount) {
+            setInitialMount(false);
+            return;
+        }
+        if (typeof window !== 'undefined') {
+            const x = defaultX ?? (centered ? (window.innerWidth - defaultWidth) / 2 : 100);
+            const y = defaultY ?? (centered ? (window.innerHeight - defaultHeight) / 2 : 100);
+            setPosition({ x, y });
+        }
+    }, [defaultX, defaultY, defaultWidth, defaultHeight, centered]);
+    const handleMaximize = () => {
+        if (isMaximized) {
+            // Restore
+            if (preMaximizeState) {
+                setPosition(preMaximizeState.position);
+                setSize(preMaximizeState.size);
+            }
+            setIsMaximized(false);
+        }
+        else {
+            // Maximize
+            setPreMaximizeState({ position, size });
+            setPosition({ x: 0, y: 28 }); // Account for menu bar
+            setSize({
+                width: typeof window !== 'undefined' ? window.innerWidth : defaultWidth,
+                height: typeof window !== 'undefined' ? window.innerHeight - 28 : defaultHeight,
+            });
+            setIsMaximized(true);
+        }
+        onMaximize?.();
+    };
+    const handleDragEnd = (_, info) => {
+        setPosition((prev) => ({
+            x: prev.x + info.offset.x,
+            y: prev.y + info.offset.y,
+        }));
+    };
+    return (_jsxs(motion.div, { ref: ref, role: "dialog", "aria-labelledby": `window-title-${title.replace(/\s+/g, '-').toLowerCase()}`, drag: draggable && !isMaximized, dragControls: dragControls, dragMomentum: false, dragListener: false, onDragEnd: handleDragEnd, initial: { opacity: 0, scale: 0.95, y: 10 }, animate: {
+            opacity: 1,
+            scale: 1,
+            y: 0,
+            x: position.x,
+            width: size.width,
+            height: size.height,
+        }, exit: { opacity: 0, scale: 0.95, y: 10 }, transition: { type: "spring", damping: 25, stiffness: 300 }, style: {
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            minWidth,
+            minHeight,
+            maxWidth: isMaximized ? undefined : maxWidth,
+            maxHeight: isMaximized ? undefined : maxHeight,
+            zIndex: 1000,
+        }, onClick: onFocus, className: cn("flex flex-col rounded-xl border shadow-2xl backdrop-blur-xl overflow-hidden", variantStyles[variant], className), children: [_jsxs("div", { onPointerDown: (e) => {
+                    if (draggable && !isMaximized) {
+                        dragControls.start(e);
+                    }
+                }, onDoubleClick: handleMaximize, className: cn("flex items-center justify-between h-10 px-3 select-none cursor-default shrink-0", "border-b border-white/5 bg-gradient-to-b from-white/5 to-transparent"), children: [!hideControls && (_jsx(WindowControls, { onClose: onClose, onMinimize: onMinimize, onMaximize: handleMaximize, isMaximized: isMaximized })), _jsxs("div", { className: "flex items-center gap-2 absolute left-1/2 -translate-x-1/2", children: [icon && _jsx("span", { className: "w-4 h-4", children: icon }), _jsx("span", { id: `window-title-${title.replace(/\s+/g, '-').toLowerCase()}`, className: "text-sm font-medium text-white/90 truncate max-w-[200px]", children: title })] }), _jsx("div", { className: "w-14" })] }), _jsx("div", { className: "flex-1 overflow-auto", children: children }), resizable && !isMaximized && (_jsx("div", { className: "absolute bottom-0 right-0 w-4 h-4 cursor-se-resize opacity-0 hover:opacity-100 transition-opacity", style: {
+                    background: 'linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.3) 50%)',
+                }, onPointerDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const startX = e.clientX;
+                    const startY = e.clientY;
+                    const startWidth = size.width;
+                    const startHeight = size.height;
+                    const handleMove = (moveEvent) => {
+                        const deltaX = moveEvent.clientX - startX;
+                        const deltaY = moveEvent.clientY - startY;
+                        const newWidth = Math.max(minWidth, Math.min(startWidth + deltaX, maxWidth ?? Infinity));
+                        const newHeight = Math.max(minHeight, Math.min(startHeight + deltaY, maxHeight ?? Infinity));
+                        setSize({ width: newWidth, height: newHeight });
+                    };
+                    const handleUp = () => {
+                        document.removeEventListener('pointermove', handleMove);
+                        document.removeEventListener('pointerup', handleUp);
+                    };
+                    document.addEventListener('pointermove', handleMove);
+                    document.addEventListener('pointerup', handleUp);
+                } }))] }));
+});
+Window.displayName = "Window";
+export default Window;

package/dist/src/device/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/src/device/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/device/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAA"}

package/dist/src/device/index.js

@@ -0,0 +1 @@
+export {};

package/dist/src/dock/basic.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+interface DockProps {
+    className?: string;
+    children?: React.ReactNode;
+    position?: "bottom" | "left" | "right";
+    magnification?: number;
+    distance?: number;
+}
+interface DockItemProps {
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: () => void;
+    tooltip?: string;
+    magnification?: number;
+    distance?: number;
+}
+declare const Dock: React.ForwardRefExoticComponent<DockProps & React.RefAttributes<HTMLDivElement>>;
+declare const DockItem: React.ForwardRefExoticComponent<DockItemProps & React.RefAttributes<HTMLButtonElement>>;
+export { Dock, DockItem };
+//# sourceMappingURL=basic.d.ts.map

package/dist/src/dock/basic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic.d.ts","sourceRoot":"","sources":["../../../src/dock/basic.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACtC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAUD,QAAA,MAAM,IAAI,kFAkCT,CAAA;AAGD,QAAA,MAAM,QAAQ,yFAkGb,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA"}

package/dist/src/dock/basic.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
+import { cn } from "../utils";
+const DockContext = React.createContext({
+    magnification: 60,
+    distance: 140,
+});
+const Dock = React.forwardRef(({ className, children, position = "bottom", magnification = 60, distance = 140, }, ref) => {
+    const positionClasses = {
+        bottom: "bottom-0 left-1/2 -translate-x-1/2 flex-row",
+        left: "left-0 top-1/2 -translate-y-1/2 flex-col",
+        right: "right-0 top-1/2 -translate-y-1/2 flex-col",
+    };
+    return (_jsx(DockContext.Provider, { value: { magnification, distance }, children: _jsx("div", { ref: ref, className: cn("fixed z-50 flex items-end gap-1 rounded-2xl border border-white/10 bg-black/10 p-2 backdrop-blur-xl", "shadow-2xl shadow-black/20", "before:absolute before:inset-0 before:rounded-2xl before:bg-gradient-to-b before:from-white/10 before:to-transparent before:opacity-50", positionClasses[position], className), children: children }) }));
+});
+Dock.displayName = "Dock";
+const DockItem = React.forwardRef(({ className, children, onClick, tooltip, magnification: itemMagnification, distance: itemDistance, }, ref) => {
+    const buttonRef = React.useRef(null);
+    const { magnification: contextMagnification, distance: contextDistance } = React.useContext(DockContext);
+    const magnification = itemMagnification ?? contextMagnification;
+    const distance = itemDistance ?? contextDistance;
+    const [isHovered, setIsHovered] = React.useState(false);
+    const mouseX = useMotionValue(Infinity);
+    const springConfig = { mass: 0.1, stiffness: 150, damping: 12 };
+    const size = useSpring(useTransform(mouseX, [-distance, 0, distance], [48, 48 + magnification, 48]), springConfig);
+    const handleMouseMove = (e) => {
+        if (!buttonRef.current)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        mouseX.set(e.clientX - centerX);
+    };
+    const handleMouseLeave = () => {
+        mouseX.set(Infinity);
+        setIsHovered(false);
+    };
+    return (_jsxs(motion.div, { className: "relative", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onMouseEnter: () => setIsHovered(true), children: [tooltip && isHovered && (_jsxs(motion.div, { initial: { opacity: 0, y: 10, scale: 0.9 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 5, scale: 0.95 }, transition: { duration: 0.15 }, className: "absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-black/80 px-2 py-1 text-xs text-white backdrop-blur-md", children: [tooltip, _jsx("div", { className: "absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-black/80" })] })), _jsxs(motion.button, { ref: buttonRef, style: {
+                    width: size,
+                    height: size,
+                }, whileTap: { scale: 0.9 }, onClick: onClick, className: cn("relative flex items-center justify-center rounded-xl bg-white/10 backdrop-blur-md transition-colors", "hover:bg-white/20", "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50", className), children: [_jsx(motion.div, { style: {
+                            width: size,
+                            height: size,
+                        }, className: "flex items-center justify-center", children: children }), _jsx(motion.div, { className: "absolute inset-0 rounded-xl", style: {
+                            background: "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%)",
+                        } })] })] }));
+});
+DockItem.displayName = "DockItem";
+export { Dock, DockItem };

package/dist/src/dock/index.d.ts

@@ -0,0 +1,6 @@
+export { Dock, DockItem } from './basic';
+export { Dock as MacDock, DockItem as MacDockItem } from './macos';
+export { LimelightNav } from './limelight-nav';
+export { MenuDock, type MenuDockItem, type MenuDockProps } from './menu';
+export { MessageDock, type Message, type MessageDockProps } from './message';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/dock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dock/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,SAAS,CAAA;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,WAAW,EAAE,KAAK,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAA"}

package/dist/src/dock/index.js

@@ -0,0 +1,6 @@
+// Dock components
+export { Dock, DockItem } from './basic';
+export { Dock as MacDock, DockItem as MacDockItem } from './macos';
+export { LimelightNav } from './limelight-nav';
+export { MenuDock } from './menu';
+export { MessageDock } from './message';

package/dist/src/dock/limelight-nav.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface LimelightNavProps extends React.HTMLAttributes<HTMLElement> {
+    items?: Array<{
+        label: string;
+        href: string;
+    }>;
+}
+declare const LimelightNav: React.ForwardRefExoticComponent<LimelightNavProps & React.RefAttributes<HTMLElement>>;
+export { LimelightNav };
+//# sourceMappingURL=limelight-nav.d.ts.map

package/dist/src/dock/limelight-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"limelight-nav.d.ts","sourceRoot":"","sources":["../../../src/dock/limelight-nav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC/C;AAED,QAAA,MAAM,YAAY,uFAmFjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/src/dock/limelight-nav.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Command, Search } from "lucide-react";
+import { cn } from "../utils";
+import { Button } from "../../primitives/button";
+import { Input } from "../../primitives/input";
+const LimelightNav = React.forwardRef(({ className, items = [], ...props }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [search, setSearch] = React.useState("");
+    React.useEffect(() => {
+        const down = (e) => {
+            if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                setIsOpen((open) => !open);
+            }
+        };
+        document.addEventListener("keydown", down);
+        return () => document.removeEventListener("keydown", down);
+    }, []);
+    const filteredItems = items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));
+    return (_jsxs(_Fragment, { children: [_jsxs("nav", { ref: ref, className: cn("flex items-center gap-4", className), ...props, children: [_jsxs(Button, { variant: "outline", onClick: () => setIsOpen(true), className: "relative w-64 justify-start", children: [_jsx(Search, { className: "mr-2 h-4 w-4" }), _jsx("span", { className: "text-muted-foreground", children: "Search..." }), _jsxs("kbd", { className: "pointer-events-none absolute right-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: [_jsx(Command, { className: "h-3 w-3" }), "K"] })] }), items.slice(0, 4).map((item) => (_jsx("a", { href: item.href, className: "text-sm font-medium transition-colors hover:text-primary", children: item.label }, item.href)))] }), isOpen && (_jsx("div", { className: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", onClick: () => setIsOpen(false), children: _jsxs("div", { className: "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-card p-6 shadow-lg", onClick: (e) => e.stopPropagation(), children: [_jsx(Input, { placeholder: "Search navigation...", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true, className: "mb-4" }), _jsx("div", { className: "max-h-96 space-y-1 overflow-auto", children: filteredItems.map((item) => (_jsx("a", { href: item.href, className: "block rounded-md px-4 py-2 hover:bg-accent", onClick: () => setIsOpen(false), children: item.label }, item.href))) })] }) }))] }));
+});
+LimelightNav.displayName = "LimelightNav";
+export { LimelightNav };

package/dist/src/dock/macos.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+interface DockProps {
+    className?: string;
+    children?: React.ReactNode;
+    magnification?: number;
+    distance?: number;
+}
+interface DockItemProps {
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: () => void;
+    tooltip?: string;
+}
+declare const Dock: React.ForwardRefExoticComponent<DockProps & React.RefAttributes<HTMLDivElement>>;
+declare const DockItem: React.ForwardRefExoticComponent<DockItemProps & React.RefAttributes<HTMLButtonElement>>;
+export { Dock, DockItem };
+//# sourceMappingURL=macos.d.ts.map

package/dist/src/dock/macos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"macos.d.ts","sourceRoot":"","sources":["../../../src/dock/macos.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAYD,QAAA,MAAM,IAAI,kFAsBT,CAAA;AAGD,QAAA,MAAM,QAAQ,yFAuEb,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA"}

package/dist/src/dock/macos.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
+import { cn } from "../utils";
+const DockContext = React.createContext({
+    magnification: 60,
+    distance: 140,
+    mouseX: null,
+});
+const Dock = React.forwardRef(({ className, children, magnification = 60, distance = 140 }, ref) => {
+    const mouseX = useMotionValue(Infinity);
+    return (_jsx(DockContext.Provider, { value: { magnification, distance, mouseX }, children: _jsx(motion.div, { ref: ref, onMouseMove: (e) => mouseX.set(e.pageX), onMouseLeave: () => mouseX.set(Infinity), className: cn("mx-auto flex h-16 items-end gap-2 rounded-2xl border border-white/10 bg-black/10 px-3 pb-2 backdrop-blur-xl", "shadow-2xl shadow-black/20", "before:absolute before:inset-0 before:rounded-2xl before:bg-gradient-to-b before:from-white/10 before:to-transparent before:opacity-50", className), children: children }) }));
+});
+Dock.displayName = "Dock";
+const DockItem = React.forwardRef(({ className, children, onClick, tooltip }, ref) => {
+    const buttonRef = React.useRef(null);
+    const { magnification, distance, mouseX } = React.useContext(DockContext);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const distanceCalc = useTransform(mouseX, (val) => {
+        const bounds = buttonRef.current?.getBoundingClientRect() ?? {
+            x: 0,
+            width: 0,
+        };
+        return val - bounds.x - bounds.width / 2;
+    });
+    const widthSync = useTransform(distanceCalc, [-distance, 0, distance], [48, 48 + magnification, 48]);
+    const width = useSpring(widthSync, {
+        mass: 0.1,
+        stiffness: 150,
+        damping: 12,
+    });
+    return (_jsxs(motion.div, { className: "relative", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [tooltip && isHovered && (_jsxs(motion.div, { initial: { opacity: 0, y: 10, scale: 0.9 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 5, scale: 0.95 }, transition: { duration: 0.15 }, className: "absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-black/80 px-2 py-1 text-xs text-white backdrop-blur-md", children: [tooltip, _jsx("div", { className: "absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-black/80" })] })), _jsxs(motion.button, { ref: buttonRef, style: { width }, whileTap: { scale: 0.95 }, onClick: onClick, className: cn("aspect-square w-12 rounded-xl bg-white/10 backdrop-blur-md transition-colors", "hover:bg-white/20", "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50", "relative overflow-hidden", className), children: [_jsx("div", { className: "flex h-full w-full items-center justify-center", children: children }), _jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl", style: {
+                            background: "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%)",
+                        } })] })] }));
+});
+DockItem.displayName = "DockItem";
+export { Dock, DockItem };

package/dist/src/dock/menu.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface MenuDockItem {
+    icon: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+    active?: boolean;
+}
+export interface MenuDockProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: MenuDockItem[];
+    orientation?: "horizontal" | "vertical";
+}
+declare const MenuDock: React.ForwardRefExoticComponent<MenuDockProps & React.RefAttributes<HTMLDivElement>>;
+export { MenuDock };
+//# sourceMappingURL=menu.d.ts.map

package/dist/src/dock/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/dock/menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CACxC;AAED,QAAA,MAAM,QAAQ,sFAiCb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/src/dock/menu.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils";
+const MenuDock = React.forwardRef(({ className, items, orientation = "horizontal", ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex gap-2 rounded-full border bg-background/95 p-2 shadow-lg backdrop-blur", orientation === "vertical" ? "flex-col" : "flex-row", className), ...props, children: items.map((item, index) => (_jsxs("button", { onClick: item.onClick, className: cn("group relative flex items-center justify-center rounded-full p-3 transition-colors hover:bg-accent", item.active &&
+                "bg-primary text-primary-foreground hover:bg-primary/90"), title: item.label, children: [item.icon, _jsx("span", { className: "sr-only", children: item.label }), _jsx("span", { className: "absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 transition-opacity group-hover:opacity-100", children: item.label })] }, index))) }));
+});
+MenuDock.displayName = "MenuDock";
+export { MenuDock };

package/dist/src/dock/message.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface Message {
+    id: string;
+    type?: "info" | "success" | "warning" | "error";
+    title: string;
+    description?: string;
+}
+export interface MessageDockProps extends React.HTMLAttributes<HTMLDivElement> {
+    messages: Message[];
+    onClose?: (id: string) => void;
+    position?: "top" | "bottom" | "top-right" | "bottom-right";
+}
+declare const MessageDock: React.ForwardRefExoticComponent<MessageDockProps & React.RefAttributes<HTMLDivElement>>;
+export { MessageDock };
+//# sourceMappingURL=message.d.ts.map

package/dist/src/dock/message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/dock/message.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAA;CAC3D;AAED,QAAA,MAAM,WAAW,yFA+DhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}