@hanzo/ui 8.27.8 → 8.27.10

package/dist/backends/gui/date-picker.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DatePicker — a button that opens a calendar in a popover, for picking one
+ * date (`mode="single"`, the default) or a range (`mode="range"`), with an
+ * optional list of quick presets shown above the calendar.
+ *
+ * The trigger reads the current pick, or `placeholder` while empty. `selected`
+ * and `onSelect` name the value the same way `Calendar` does, since this is a
+ * `Calendar` with a trigger and a panel in front of it, not a different
+ * contract. Picking a single date closes the popover; a range stays open
+ * until both ends are set. `disabled` marks days that cannot be picked, same
+ * contract as `Calendar`.
+ */
+import { SizableText, YStack } from '@hanzo/gui';
+import { Calendar as CalendarIcon } from '@hanzogui/lucide-icons-2';
+import { useState } from 'react';
+import { Button } from './button.js';
+import { Calendar } from './calendar.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select.js';
+import { slot } from './slot.js';
+const MONTHS = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+const format = (d) => `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+export function DatePicker(props) {
+    const { placeholder = 'Pick a date', disabled, className, width = 280 } = props;
+    const isRange = props.mode === 'range';
+    const [open, setOpen] = useState(false);
+    const [ownDate, setOwnDate] = useState(isRange ? undefined : props.selected);
+    const [ownRange, setOwnRange] = useState(isRange ? props.selected : undefined);
+    const date = !isRange ? (props.selected ?? ownDate) : undefined;
+    const range = isRange ? (props.selected ?? ownRange) : undefined;
+    const selectDate = (d) => {
+        setOwnDate(d);
+        props.onSelect?.(d);
+        setOpen(false);
+    };
+    const selectRange = (r) => {
+        setOwnRange(r);
+        props.onSelect?.(r);
+    };
+    const label = isRange
+        ? range?.from
+            ? range.to && !sameDay(range.to, range.from)
+                ? `${format(range.from)} - ${format(range.to)}`
+                : format(range.from)
+            : placeholder
+        : date
+            ? format(date)
+            : placeholder;
+    const empty = isRange ? !range?.from : !date;
+    const presets = !isRange ? props.presets : undefined;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ...slot('date-picker-trigger'), "data-empty": empty || undefined, variant: "outline", width: width, justify: "flex-start", className: className, children: [_jsx(CalendarIcon, { size: 16 }), empty ? _jsx(SizableText, { color: "$quiet", children: label }) : label] }) }), _jsxs(PopoverContent, { ...slot('date-picker-content'), width: "auto", p: 0, align: "start", children: [presets && presets.length > 0 && (_jsx(YStack, { ...slot('date-picker-presets'), p: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: _jsxs(Select, { onValueChange: (value) => {
+                                const days = Number(value);
+                                const picked = new Date();
+                                picked.setDate(picked.getDate() + days);
+                                selectDate(picked);
+                            }, children: [_jsx(SelectTrigger, { ...slot('date-picker-preset-trigger'), children: _jsx(SelectValue, { placeholder: "Select" }) }), _jsx(SelectContent, { children: presets.map((preset) => (_jsx(SelectItem, { value: String(preset.days), children: preset.label }, preset.days))) })] }) })), isRange ? (_jsx(Calendar, { mode: "range", selected: range, onSelect: selectRange, defaultMonth: range?.from, numberOfMonths: props.numberOfMonths ?? 2, disabled: disabled, initialFocus: true })) : (_jsx(Calendar, { mode: "single", selected: date, onSelect: selectDate, disabled: disabled, initialFocus: true }))] })] }));
+}
+//# sourceMappingURL=date-picker.js.map

package/dist/backends/gui/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/backends/gui/date-picker.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/desktop-spotlight.cjs

@@ -0,0 +1,46 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spotlight = Spotlight;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Spotlight — a macOS-style search dialog: type to filter a flat list of
+ * items grouped by category, arrow keys move the cursor, Enter runs the
+ * highlighted row, Escape or a backdrop click closes it.
+ *
+ * The search, the grouping, the cursor and the keyboard bindings are not
+ * reimplemented here — they are `Command`'s, the same state machine the
+ * command palette runs on. This file is composition: a `CommandDialog` wired
+ * to `isOpen`/`onClose`, with `SpotlightItem`s spread across `CommandGroup`s.
+ */
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const command_1 = require("./command.cjs");
+const NO_CATEGORY = 'Results';
+/** Items in first-seen category order — the grouping `Object.entries` alone won't give. */
+function groupByCategory(items) {
+    const order = [];
+    const groups = new Map();
+    for (const item of items) {
+        const category = item.category || NO_CATEGORY;
+        if (!groups.has(category)) {
+            groups.set(category, []);
+            order.push(category);
+        }
+        groups.get(category).push(item);
+    }
+    return order.map((category) => [category, groups.get(category)]);
+}
+function Spotlight({ isOpen, onClose, items = [], onSelect, placeholder = 'Search...', }) {
+    const groups = (0, react_1.useMemo)(() => groupByCategory(items), [items]);
+    const pick = (item) => {
+        item.action?.();
+        onSelect?.(item);
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(command_1.CommandDialog, { "data-slot": "spotlight", open: isOpen, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, title: "Spotlight", description: placeholder, children: [(0, jsx_runtime_1.jsx)(command_1.CommandInput, { placeholder: placeholder, autoFocus: true }), (0, jsx_runtime_1.jsxs)(command_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(command_1.CommandEmpty, { children: "No results found" }), groups.map(([category, categoryItems]) => ((0, jsx_runtime_1.jsx)(command_1.CommandGroup, { heading: category, children: categoryItems.map((item) => ((0, jsx_runtime_1.jsx)(command_1.CommandItem, { "data-slot": "spotlight-item", value: item.title, keywords: item.keywords, onSelect: () => pick(item), children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$3", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", justify: "center", width: 32, height: 32, rounded: "$3", bg: "$hover", children: item.icon ?? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 16, opacity: 0.7 }) }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", fontWeight: "500", numberOfLines: 1, children: item.title }), item.subtitle ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$quiet", numberOfLines: 1, children: item.subtitle })) : null] })] }) }, item.id))) }, category)))] })] }));
+}

package/dist/backends/gui/desktop-spotlight.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Spotlight — a macOS-style search dialog: type to filter a flat list of
+ * items grouped by category, arrow keys move the cursor, Enter runs the
+ * highlighted row, Escape or a backdrop click closes it.
+ *
+ * The search, the grouping, the cursor and the keyboard bindings are not
+ * reimplemented here — they are `Command`'s, the same state machine the
+ * command palette runs on. This file is composition: a `CommandDialog` wired
+ * to `isOpen`/`onClose`, with `SpotlightItem`s spread across `CommandGroup`s.
+ */
+import { type ReactNode } from 'react';
+export interface SpotlightItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    icon?: ReactNode;
+    category?: string;
+    keywords?: string[];
+    action?: () => void;
+}
+export interface SpotlightProps {
+    /** Controls visibility of the spotlight dialog. */
+    isOpen: boolean;
+    /** Called when the spotlight is closed — Escape, backdrop, or a selection. */
+    onClose: () => void;
+    /** The searchable items, in the order groups should fall when unfiltered. */
+    items?: SpotlightItem[];
+    /** Called with the picked item, after its own `action` (if any) runs. */
+    onSelect?: (item: SpotlightItem) => void;
+    /** Search input placeholder text. */
+    placeholder?: string;
+}
+export declare function Spotlight({ isOpen, onClose, items, onSelect, placeholder, }: SpotlightProps): import("react").JSX.Element;
+//# sourceMappingURL=desktop-spotlight.d.ts.map

package/dist/backends/gui/desktop-spotlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"desktop-spotlight.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/desktop-spotlight.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAa/C,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,MAAM,EAAE,OAAO,CAAA;IACf,8EAA8E;IAC9E,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,aAAa,EAAE,CAAA;IACvB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAmBD,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,OAAO,EACP,KAAU,EACV,QAAQ,EACR,WAAyB,GAC1B,EAAE,cAAc,+BA6DhB"}

package/dist/backends/gui/desktop-spotlight.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Spotlight — a macOS-style search dialog: type to filter a flat list of
+ * items grouped by category, arrow keys move the cursor, Enter runs the
+ * highlighted row, Escape or a backdrop click closes it.
+ *
+ * The search, the grouping, the cursor and the keyboard bindings are not
+ * reimplemented here — they are `Command`'s, the same state machine the
+ * command palette runs on. This file is composition: a `CommandDialog` wired
+ * to `isOpen`/`onClose`, with `SpotlightItem`s spread across `CommandGroup`s.
+ */
+import { useMemo } from 'react';
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Search as SearchIcon } from '@hanzogui/lucide-icons-2';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from './command.js';
+const NO_CATEGORY = 'Results';
+/** Items in first-seen category order — the grouping `Object.entries` alone won't give. */
+function groupByCategory(items) {
+    const order = [];
+    const groups = new Map();
+    for (const item of items) {
+        const category = item.category || NO_CATEGORY;
+        if (!groups.has(category)) {
+            groups.set(category, []);
+            order.push(category);
+        }
+        groups.get(category).push(item);
+    }
+    return order.map((category) => [category, groups.get(category)]);
+}
+export function Spotlight({ isOpen, onClose, items = [], onSelect, placeholder = 'Search...', }) {
+    const groups = useMemo(() => groupByCategory(items), [items]);
+    const pick = (item) => {
+        item.action?.();
+        onSelect?.(item);
+        onClose();
+    };
+    return (_jsxs(CommandDialog, { "data-slot": "spotlight", open: isOpen, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, title: "Spotlight", description: placeholder, children: [_jsx(CommandInput, { placeholder: placeholder, autoFocus: true }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found" }), groups.map(([category, categoryItems]) => (_jsx(CommandGroup, { heading: category, children: categoryItems.map((item) => (_jsx(CommandItem, { "data-slot": "spotlight-item", value: item.title, keywords: item.keywords, onSelect: () => pick(item), children: _jsxs(XStack, { items: "center", gap: "$3", flex: 1, minW: 0, children: [_jsx(XStack, { items: "center", justify: "center", width: 32, height: 32, rounded: "$3", bg: "$hover", children: item.icon ?? _jsx(SearchIcon, { size: 16, opacity: 0.7 }) }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "500", numberOfLines: 1, children: item.title }), item.subtitle ? (_jsx(SizableText, { size: "$1", color: "$quiet", numberOfLines: 1, children: item.subtitle })) : null] })] }) }, item.id))) }, category)))] })] }));
+}
+//# sourceMappingURL=desktop-spotlight.js.map

package/dist/backends/gui/desktop-spotlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"desktop-spotlight.js","sourceRoot":"","sources":["../../../src/backends/gui/desktop-spotlight.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/desktop-window.cjs

@@ -0,0 +1,180 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopWindowControls = DesktopWindowControls;
+exports.DesktopWindow = DesktopWindow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DesktopWindow — a macOS-style floating panel: a title bar with traffic-light
+ * controls (close/minimize/maximize), a draggable title bar, a resizable
+ * bottom-right corner, and a double-click (or the maximize button) to fill the
+ * viewport and restore.
+ *
+ * Dragging and resizing both run on `drag()` from `./gesture` — the one
+ * pointer/responder contract this backend already uses for the color picker's
+ * saturation field and hue bar. Position and size are plain numeric state; the
+ * frame's box is set through `style` because it is a live pixel rectangle, not
+ * a themed surface — everything else on the frame (background, border, radius,
+ * shadow) is a token read through `variant`.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const gesture_1 = require("./gesture.cjs");
+const slot_1 = require("./slot.cjs");
+const TITLE_BAR_H = 40;
+const CONTROL = 12;
+const RESIZE_HANDLE = 16;
+const box = (el) => typeof HTMLElement !== 'undefined' && el instanceof HTMLElement ? el : null;
+const WindowContext = /* @__PURE__ */ (0, gui_1.createStyledContext)({
+    windowType: 'default',
+});
+const Frame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'DesktopWindow',
+    context: WindowContext,
+    borderWidth: 1,
+    rounded: '$5',
+    overflow: 'hidden',
+    shadowColor: '$shadowColor',
+    shadowRadius: 24,
+    variants: {
+        windowType: {
+            default: { bg: '$panel', borderColor: '$borderColor' },
+            dark: { bg: '$color1', borderColor: '$borderColor' },
+            light: { bg: '$color12', borderColor: '$borderColor' },
+            transparent: { bg: '$panel', borderColor: '$borderColor', opacity: 0.92 },
+        },
+    },
+    defaultVariants: { windowType: 'default' },
+});
+const TitleText = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'DesktopWindowTitleText',
+    context: WindowContext,
+    size: '$2',
+    fontWeight: '600',
+    variants: {
+        windowType: {
+            default: { color: '$ink' },
+            dark: { color: '$white1' },
+            light: { color: '$color1' },
+            transparent: { color: '$ink' },
+        },
+    },
+});
+/** One traffic-light dot: close (red), minimize (yellow) or maximize (green). */
+const Light = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'DesktopWindowLight',
+    width: CONTROL,
+    height: CONTROL,
+    rounded: 999,
+    items: 'center',
+    justify: 'center',
+    cursor: 'pointer',
+    variants: {
+        tone: {
+            close: { bg: '$red9', hoverStyle: { bg: '$red10' } },
+            minimize: { bg: '$yellow9', hoverStyle: { bg: '$yellow10' } },
+            maximize: { bg: '$green9', hoverStyle: { bg: '$green10' } },
+        },
+    },
+});
+/** The three traffic-light dots on their own, for a title bar built by hand. */
+function DesktopWindowControls({ onClose, onMinimize, onMaximize, isMaximized = false, }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('desktop-window-controls'), items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(Light, { ...(0, slot_1.slot)('desktop-window-close'), tone: "close", onPress: onClose, ...(0, gesture_1.touch)(CONTROL, 44, 'both'), "aria-label": "Close window", role: "button" }), (0, jsx_runtime_1.jsx)(Light, { ...(0, slot_1.slot)('desktop-window-minimize'), tone: "minimize", onPress: onMinimize, ...(0, gesture_1.touch)(CONTROL, 44, 'both'), "aria-label": "Minimize window", role: "button" }), (0, jsx_runtime_1.jsx)(Light, { ...(0, slot_1.slot)('desktop-window-maximize'), tone: "maximize", onPress: onMaximize, ...(0, gesture_1.touch)(CONTROL, 44, 'both'), "aria-label": isMaximized ? 'Restore window' : 'Maximize window', role: "button" })] }));
+}
+/**
+ * A macOS-style window: `title` names it, `onClose`/`onMinimize`/`onMaximize`
+ * wire the traffic lights, `initialPosition`/`initialSize` place it, and
+ * `windowType` picks its surface. Position and size stay in this component —
+ * a caller that needs several windows keeps one of these per window and an
+ * `onFocus` that raises its `zIndex`.
+ */
+function DesktopWindow({ title, icon, children, onClose, onMinimize, onMaximize, onFocus, initialPosition, initialSize, minWidth = 200, minHeight = 150, maxWidth, maxHeight, windowType = 'default', resizable = true, draggable = true, hideControls = false, zIndex = 1000, }) {
+    const frameRef = (0, react_1.useRef)(null);
+    const [position, setPosition] = (0, react_1.useState)(() => initialPosition ?? { x: 100, y: 100 });
+    const [size, setSize] = (0, react_1.useState)(() => initialSize ?? { width: 800, height: 600 });
+    const [isMaximized, setIsMaximized] = (0, react_1.useState)(false);
+    const restoreRef = (0, react_1.useRef)(null);
+    const lastPointer = (0, react_1.useRef)({ x: 0, y: 0 });
+    const startSize = (0, react_1.useRef)(size);
+    const titleId = `desktop-window-title-${title.replace(/\s+/g, '-').toLowerCase()}`;
+    const handleMaximize = (0, react_1.useCallback)(() => {
+        setIsMaximized((was) => {
+            if (was) {
+                if (restoreRef.current) {
+                    setPosition(restoreRef.current.position);
+                    setSize(restoreRef.current.size);
+                }
+                return false;
+            }
+            restoreRef.current = { position, size };
+            setPosition({ x: 0, y: 0 });
+            setSize({
+                width: typeof window !== 'undefined' ? window.innerWidth : size.width,
+                height: typeof window !== 'undefined' ? window.innerHeight : size.height,
+            });
+            return true;
+        });
+        onMaximize?.();
+    }, [position, size, onMaximize]);
+    const beginDrag = (0, react_1.useCallback)((e) => {
+        lastPointer.current = { x: (0, gesture_1.dragPos)(e, true), y: (0, gesture_1.dragPos)(e, false) };
+    }, []);
+    const moveDrag = (0, react_1.useCallback)((e) => {
+        const x = (0, gesture_1.dragPos)(e, true);
+        const y = (0, gesture_1.dragPos)(e, false);
+        const dx = x - lastPointer.current.x;
+        const dy = y - lastPointer.current.y;
+        lastPointer.current = { x, y };
+        setPosition((p) => ({ x: p.x + dx, y: p.y + dy }));
+    }, []);
+    const dragGesture = (0, gesture_1.drag)({
+        begin: beginDrag,
+        move: moveDrag,
+        end: () => { },
+        enabled: draggable && !isMaximized,
+    });
+    const beginResize = (0, react_1.useCallback)((e) => {
+        lastPointer.current = { x: (0, gesture_1.dragPos)(e, true), y: (0, gesture_1.dragPos)(e, false) };
+        startSize.current = size;
+    }, [size]);
+    const moveResize = (0, react_1.useCallback)((e) => {
+        const x = (0, gesture_1.dragPos)(e, true);
+        const y = (0, gesture_1.dragPos)(e, false);
+        const dx = x - lastPointer.current.x;
+        const dy = y - lastPointer.current.y;
+        const width = Math.max(minWidth, Math.min(startSize.current.width + dx, maxWidth ?? Infinity));
+        const height = Math.max(minHeight, Math.min(startSize.current.height + dy, maxHeight ?? Infinity));
+        setSize({ width, height });
+    }, [minWidth, minHeight, maxWidth, maxHeight]);
+    const resizeGesture = (0, gesture_1.drag)({
+        begin: beginResize,
+        move: moveResize,
+        end: () => { },
+        enabled: resizable && !isMaximized,
+    });
+    // Escape closes the window, same as a real one — only while it has focus.
+    (0, react_1.useEffect)(() => {
+        const el = box(frameRef.current);
+        if (!el)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose?.();
+        };
+        el.addEventListener('keydown', onKeyDown);
+        return () => el.removeEventListener('keydown', onKeyDown);
+    }, [onClose]);
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ref: frameRef, ...(0, slot_1.slot)('desktop-window'), windowType: windowType, role: "dialog", "aria-labelledby": titleId, tabIndex: -1, onPointerDown: onFocus, style: {
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            width: size.width,
+            height: size.height,
+            minWidth,
+            minHeight,
+            maxWidth: isMaximized ? undefined : maxWidth,
+            maxHeight: isMaximized ? undefined : maxHeight,
+            zIndex,
+        }, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('desktop-window-title-bar'), height: TITLE_BAR_H, px: "$3", items: "center", justify: "space-between", borderBottomWidth: 1, borderColor: "$borderColor", cursor: draggable && !isMaximized ? 'grab' : 'default', onDoubleClick: handleMaximize, ...dragGesture, children: [hideControls ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: CONTROL * 3 + 16 })) : ((0, jsx_runtime_1.jsx)(DesktopWindowControls, { onClose: onClose, onMinimize: onMinimize, onMaximize: handleMaximize, isMaximized: isMaximized })), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", flex: 1, justify: "center", children: [icon, (0, jsx_runtime_1.jsx)(TitleText, { id: titleId, windowType: windowType, numberOfLines: 1, children: title })] }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { width: CONTROL * 3 + 16 })] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('desktop-window-content'), flex: 1, overflow: "scroll", children: children }), resizable && !isMaximized ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('desktop-window-resize-handle'), position: "absolute", b: 0, r: 0, width: RESIZE_HANDLE, height: RESIZE_HANDLE, cursor: "se-resize", ...resizeGesture })) : null] }));
+}

package/dist/backends/gui/desktop-window.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+export type DesktopWindowType = 'default' | 'dark' | 'light' | 'transparent';
+export type DesktopWindowControlsProps = {
+    onClose?: () => void;
+    onMinimize?: () => void;
+    onMaximize?: () => void;
+    isMaximized?: boolean;
+};
+/** The three traffic-light dots on their own, for a title bar built by hand. */
+export declare function DesktopWindowControls({ onClose, onMinimize, onMaximize, isMaximized, }: DesktopWindowControlsProps): import("react").JSX.Element;
+export type DesktopWindowProps = {
+    /** Text shown in the title bar. */
+    title: string;
+    icon?: ReactNode;
+    children?: ReactNode;
+    onClose?: () => void;
+    onMinimize?: () => void;
+    onMaximize?: () => void;
+    /** Fires on pointer-down anywhere on the frame — wire it to bring-to-front. */
+    onFocus?: () => void;
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    initialSize?: {
+        width: number;
+        height: number;
+    };
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    /** Style variant — the frame's background, border and title-text color. */
+    windowType?: DesktopWindowType;
+    /** Drag the corner to resize. Defaults to on. */
+    resizable?: boolean;
+    /** Drag the title bar to move. Defaults to on. */
+    draggable?: boolean;
+    /** Hide the three traffic-light dots. */
+    hideControls?: boolean;
+    zIndex?: number;
+};
+/**
+ * A macOS-style window: `title` names it, `onClose`/`onMinimize`/`onMaximize`
+ * wire the traffic lights, `initialPosition`/`initialSize` place it, and
+ * `windowType` picks its surface. Position and size stay in this component —
+ * a caller that needs several windows keeps one of these per window and an
+ * `onFocus` that raises its `zIndex`.
+ */
+export declare function DesktopWindow({ title, icon, children, onClose, onMinimize, onMaximize, onFocus, initialPosition, initialSize, minWidth, minHeight, maxWidth, maxHeight, windowType, resizable, draggable, hideControls, zIndex, }: DesktopWindowProps): import("react").JSX.Element;
+//# sourceMappingURL=desktop-window.d.ts.map

package/dist/backends/gui/desktop-window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"desktop-window.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/desktop-window.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,CAAA;AAqE5E,MAAM,MAAM,0BAA0B,GAAG;IACvC,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,CAAA;AAED,gFAAgF;AAChF,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,UAAU,EACV,UAAU,EACV,WAAmB,GACpB,EAAE,0BAA0B,+BA6B5B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1C,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,UAAU,EACV,OAAO,EACP,eAAe,EACf,WAAW,EACX,QAAc,EACd,SAAe,EACf,QAAQ,EACR,SAAS,EACT,UAAsB,EACtB,SAAgB,EAChB,SAAgB,EAChB,YAAoB,EACpB,MAAa,GACd,EAAE,kBAAkB,+BA+JpB"}

package/dist/backends/gui/desktop-window.js

@@ -0,0 +1,177 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DesktopWindow — a macOS-style floating panel: a title bar with traffic-light
+ * controls (close/minimize/maximize), a draggable title bar, a resizable
+ * bottom-right corner, and a double-click (or the maximize button) to fill the
+ * viewport and restore.
+ *
+ * Dragging and resizing both run on `drag()` from `./gesture` — the one
+ * pointer/responder contract this backend already uses for the color picker's
+ * saturation field and hue bar. Position and size are plain numeric state; the
+ * frame's box is set through `style` because it is a live pixel rectangle, not
+ * a themed surface — everything else on the frame (background, border, radius,
+ * shadow) is a token read through `variant`.
+ */
+import { SizableText, XStack, YStack, createStyledContext, styled } from '@hanzo/gui';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { drag, dragPos, touch } from './gesture.js';
+import { slot } from './slot.js';
+const TITLE_BAR_H = 40;
+const CONTROL = 12;
+const RESIZE_HANDLE = 16;
+const box = (el) => typeof HTMLElement !== 'undefined' && el instanceof HTMLElement ? el : null;
+const WindowContext = /* @__PURE__ */ createStyledContext({
+    windowType: 'default',
+});
+const Frame = styled(YStack, {
+    name: 'DesktopWindow',
+    context: WindowContext,
+    borderWidth: 1,
+    rounded: '$5',
+    overflow: 'hidden',
+    shadowColor: '$shadowColor',
+    shadowRadius: 24,
+    variants: {
+        windowType: {
+            default: { bg: '$panel', borderColor: '$borderColor' },
+            dark: { bg: '$color1', borderColor: '$borderColor' },
+            light: { bg: '$color12', borderColor: '$borderColor' },
+            transparent: { bg: '$panel', borderColor: '$borderColor', opacity: 0.92 },
+        },
+    },
+    defaultVariants: { windowType: 'default' },
+});
+const TitleText = styled(SizableText, {
+    name: 'DesktopWindowTitleText',
+    context: WindowContext,
+    size: '$2',
+    fontWeight: '600',
+    variants: {
+        windowType: {
+            default: { color: '$ink' },
+            dark: { color: '$white1' },
+            light: { color: '$color1' },
+            transparent: { color: '$ink' },
+        },
+    },
+});
+/** One traffic-light dot: close (red), minimize (yellow) or maximize (green). */
+const Light = styled(XStack, {
+    name: 'DesktopWindowLight',
+    width: CONTROL,
+    height: CONTROL,
+    rounded: 999,
+    items: 'center',
+    justify: 'center',
+    cursor: 'pointer',
+    variants: {
+        tone: {
+            close: { bg: '$red9', hoverStyle: { bg: '$red10' } },
+            minimize: { bg: '$yellow9', hoverStyle: { bg: '$yellow10' } },
+            maximize: { bg: '$green9', hoverStyle: { bg: '$green10' } },
+        },
+    },
+});
+/** The three traffic-light dots on their own, for a title bar built by hand. */
+export function DesktopWindowControls({ onClose, onMinimize, onMaximize, isMaximized = false, }) {
+    return (_jsxs(XStack, { ...slot('desktop-window-controls'), items: "center", gap: "$2", children: [_jsx(Light, { ...slot('desktop-window-close'), tone: "close", onPress: onClose, ...touch(CONTROL, 44, 'both'), "aria-label": "Close window", role: "button" }), _jsx(Light, { ...slot('desktop-window-minimize'), tone: "minimize", onPress: onMinimize, ...touch(CONTROL, 44, 'both'), "aria-label": "Minimize window", role: "button" }), _jsx(Light, { ...slot('desktop-window-maximize'), tone: "maximize", onPress: onMaximize, ...touch(CONTROL, 44, 'both'), "aria-label": isMaximized ? 'Restore window' : 'Maximize window', role: "button" })] }));
+}
+/**
+ * A macOS-style window: `title` names it, `onClose`/`onMinimize`/`onMaximize`
+ * wire the traffic lights, `initialPosition`/`initialSize` place it, and
+ * `windowType` picks its surface. Position and size stay in this component —
+ * a caller that needs several windows keeps one of these per window and an
+ * `onFocus` that raises its `zIndex`.
+ */
+export function DesktopWindow({ title, icon, children, onClose, onMinimize, onMaximize, onFocus, initialPosition, initialSize, minWidth = 200, minHeight = 150, maxWidth, maxHeight, windowType = 'default', resizable = true, draggable = true, hideControls = false, zIndex = 1000, }) {
+    const frameRef = useRef(null);
+    const [position, setPosition] = useState(() => initialPosition ?? { x: 100, y: 100 });
+    const [size, setSize] = useState(() => initialSize ?? { width: 800, height: 600 });
+    const [isMaximized, setIsMaximized] = useState(false);
+    const restoreRef = useRef(null);
+    const lastPointer = useRef({ x: 0, y: 0 });
+    const startSize = useRef(size);
+    const titleId = `desktop-window-title-${title.replace(/\s+/g, '-').toLowerCase()}`;
+    const handleMaximize = useCallback(() => {
+        setIsMaximized((was) => {
+            if (was) {
+                if (restoreRef.current) {
+                    setPosition(restoreRef.current.position);
+                    setSize(restoreRef.current.size);
+                }
+                return false;
+            }
+            restoreRef.current = { position, size };
+            setPosition({ x: 0, y: 0 });
+            setSize({
+                width: typeof window !== 'undefined' ? window.innerWidth : size.width,
+                height: typeof window !== 'undefined' ? window.innerHeight : size.height,
+            });
+            return true;
+        });
+        onMaximize?.();
+    }, [position, size, onMaximize]);
+    const beginDrag = useCallback((e) => {
+        lastPointer.current = { x: dragPos(e, true), y: dragPos(e, false) };
+    }, []);
+    const moveDrag = useCallback((e) => {
+        const x = dragPos(e, true);
+        const y = dragPos(e, false);
+        const dx = x - lastPointer.current.x;
+        const dy = y - lastPointer.current.y;
+        lastPointer.current = { x, y };
+        setPosition((p) => ({ x: p.x + dx, y: p.y + dy }));
+    }, []);
+    const dragGesture = drag({
+        begin: beginDrag,
+        move: moveDrag,
+        end: () => { },
+        enabled: draggable && !isMaximized,
+    });
+    const beginResize = useCallback((e) => {
+        lastPointer.current = { x: dragPos(e, true), y: dragPos(e, false) };
+        startSize.current = size;
+    }, [size]);
+    const moveResize = useCallback((e) => {
+        const x = dragPos(e, true);
+        const y = dragPos(e, false);
+        const dx = x - lastPointer.current.x;
+        const dy = y - lastPointer.current.y;
+        const width = Math.max(minWidth, Math.min(startSize.current.width + dx, maxWidth ?? Infinity));
+        const height = Math.max(minHeight, Math.min(startSize.current.height + dy, maxHeight ?? Infinity));
+        setSize({ width, height });
+    }, [minWidth, minHeight, maxWidth, maxHeight]);
+    const resizeGesture = drag({
+        begin: beginResize,
+        move: moveResize,
+        end: () => { },
+        enabled: resizable && !isMaximized,
+    });
+    // Escape closes the window, same as a real one — only while it has focus.
+    useEffect(() => {
+        const el = box(frameRef.current);
+        if (!el)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose?.();
+        };
+        el.addEventListener('keydown', onKeyDown);
+        return () => el.removeEventListener('keydown', onKeyDown);
+    }, [onClose]);
+    return (_jsxs(Frame, { ref: frameRef, ...slot('desktop-window'), windowType: windowType, role: "dialog", "aria-labelledby": titleId, tabIndex: -1, onPointerDown: onFocus, style: {
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            width: size.width,
+            height: size.height,
+            minWidth,
+            minHeight,
+            maxWidth: isMaximized ? undefined : maxWidth,
+            maxHeight: isMaximized ? undefined : maxHeight,
+            zIndex,
+        }, children: [_jsxs(XStack, { ...slot('desktop-window-title-bar'), height: TITLE_BAR_H, px: "$3", items: "center", justify: "space-between", borderBottomWidth: 1, borderColor: "$borderColor", cursor: draggable && !isMaximized ? 'grab' : 'default', onDoubleClick: handleMaximize, ...dragGesture, children: [hideControls ? (_jsx(XStack, { width: CONTROL * 3 + 16 })) : (_jsx(DesktopWindowControls, { onClose: onClose, onMinimize: onMinimize, onMaximize: handleMaximize, isMaximized: isMaximized })), _jsxs(XStack, { items: "center", gap: "$2", flex: 1, justify: "center", children: [icon, _jsx(TitleText, { id: titleId, windowType: windowType, numberOfLines: 1, children: title })] }), _jsx(XStack, { width: CONTROL * 3 + 16 })] }), _jsx(YStack, { ...slot('desktop-window-content'), flex: 1, overflow: "scroll", children: children }), resizable && !isMaximized ? (_jsx(XStack, { ...slot('desktop-window-resize-handle'), position: "absolute", b: 0, r: 0, width: RESIZE_HANDLE, height: RESIZE_HANDLE, cursor: "se-resize", ...resizeGesture })) : null] }));
+}
+//# sourceMappingURL=desktop-window.js.map