@hanzo/ui 8.27.8 → 8.27.10

package/dist/backends/gui/dialog-stack.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DialogStack — a pile of panels offset diagonally, front one on top.
+ *
+ * Each dialog is an absolutely positioned card inside a relatively positioned
+ * frame; index alone decides both its offset (`translate(index*10, index*10)`)
+ * and its stacking (`zIndex: index`), so the last item in `dialogs` reads as the
+ * top of the pile. A panel closes through its own corner button, which reports
+ * the closed id back through `onClose` — nothing here removes an item from the
+ * list, the caller owns that.
+ */
+import { XStack, YStack } from '@hanzo/gui';
+import { X } from '@hanzogui/lucide-icons-2';
+import { Button } from './button.js';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+import { touch } from './gesture.js';
+const OFFSET = 10;
+const CLOSE = 24;
+export function DialogStack({ dialogs, onClose, children, ...props }) {
+    return (_jsxs(YStack, { ...slot('dialog-stack'), position: "relative", ...props, children: [dialogs.map((dialog, index) => (_jsxs(YStack, { ...slot('dialog-stack-item'), "data-index": index, position: "absolute", t: 0, l: 0, r: 0, b: 0, rounded: "$5", borderWidth: 1, borderColor: "$borderColor", bg: "$background", p: "$6", gap: "$4", transform: [{ translateX: index * OFFSET }, { translateY: index * OFFSET }], style: { zIndex: index }, children: [_jsxs(XStack, { items: "center", justify: "space-between", children: [ink(dialog.title, undefined, { fontSize: '$5', fontWeight: '600' }), _jsx(Button, { ...slot('dialog-stack-close'), variant: "ghost", size: "icon", minH: CLOSE, minW: CLOSE, ...touch(CLOSE), "aria-label": "Close", onPress: () => onClose?.(dialog.id), children: _jsx(X, { size: 16 }) })] }), _jsx(YStack, { children: ink(dialog.content) })] }, dialog.id))), children] }));
+}
+//# sourceMappingURL=dialog-stack.js.map

package/dist/backends/gui/dialog-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-stack.js","sourceRoot":"","sources":["../../../src/backends/gui/dialog-stack.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;GASG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,CAAC,EAAE,MAAM,0BAA0B,CAAA;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,MAAM,GAAG,EAAE,CAAA;AACjB,MAAM,KAAK,GAAG,EAAE,CAAA;AAahB,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IACpF,OAAO,CACL,MAAC,MAAM,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAC,UAAU,KAAK,KAAK,aAC5D,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,MAAC,MAAM,OAED,IAAI,CAAC,mBAAmB,CAAC,gBACjB,KAAK,EACjB,QAAQ,EAAC,UAAU,EACnB,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,EAAE,EAAC,aAAa,EAChB,CAAC,EAAC,IAAI,EACN,GAAG,EAAC,IAAI,EACR,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC,EAC3E,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAExB,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,aAC3C,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EACpE,KAAC,MAAM,OACD,IAAI,CAAC,oBAAoB,CAAC,EAC9B,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,KAAK,KACP,KAAK,CAAC,KAAK,CAAC,gBACL,OAAO,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,YAEnC,KAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,GACR,IACF,EACT,KAAC,MAAM,cAAE,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,GAAU,KAhCjC,MAAM,CAAC,EAAE,CAiCP,CACV,CAAC,EACD,QAAQ,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/backends/gui/dock.cjs

@@ -0,0 +1,99 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dock = Dock;
+exports.DockItem = DockItem;
+exports.DockSeparator = DockSeparator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Dock — a macOS-style icon shelf. `DockItem`s sit in a row (or a column, on
+ * `left`/`right`) and grow as the pointer nears them; `DockSeparator` splits
+ * them into clusters, the way Finder and Safari sit apart from Mail and
+ * Calendar in the real thing.
+ *
+ * The size ramp is a plain pointer-distance calculation retargeting a CSS
+ * `width`/`height` transition on each item — the same visual read as a spring
+ * without pulling in an animation library the workspace does not carry. Each
+ * item tracks its own pointer offset, so hovering one does not re-render its
+ * neighbours.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const sx_1 = require("../../sx.cjs");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const gesture_1 = require("./gesture.cjs");
+/** Resting size of an item, in px, before any magnification is applied. */
+const BASE_SIZE = 48;
+const DockConfigContext = /* @__PURE__ */ (0, react_1.createContext)({
+    magnification: 60,
+    distance: 140,
+    position: 'bottom',
+});
+const Frame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'Dock',
+    items: 'flex-end',
+    gap: '$1.5',
+    p: '$2',
+    rounded: '$6',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    bg: '$panel',
+    shadowColor: '$dim',
+    shadowRadius: 24,
+    shadowOpacity: 0.25,
+    variants: {
+        // Named `edge`, not `position`: gui's own `position` prop is the CSS
+        // property (`relative`/`absolute`/…), and a variant sharing that name
+        // would fight it instead of picking a layout.
+        edge: {
+            bottom: { flexDirection: 'row', items: 'flex-end' },
+            left: { flexDirection: 'column', items: 'flex-end' },
+            right: { flexDirection: 'column', items: 'flex-start' },
+        },
+    },
+    defaultVariants: { edge: 'bottom' },
+});
+function Dock({ className, position = 'bottom', magnification = 60, distance = 140, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(DockConfigContext.Provider, { value: { magnification, distance, position }, children: (0, jsx_runtime_1.jsx)(Frame, { ...(0, slot_1.slot)('dock'), "data-position": position, edge: position, ...(0, sx_1.sx)(className), ...props, children: children }) }));
+}
+const ItemFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'DockItem',
+    items: 'center',
+    justify: 'center',
+    rounded: '$4',
+    bg: '$hover',
+    cursor: 'pointer',
+    hoverStyle: { bg: '$edge' },
+});
+function DockItem({ className, children, onClick, tooltip, magnification: itemMagnification, distance: itemDistance, ...props }) {
+    const { magnification: contextMagnification, distance: contextDistance } = (0, react_1.useContext)(DockConfigContext);
+    const magnification = itemMagnification ?? contextMagnification;
+    const distance = itemDistance ?? contextDistance;
+    const [size, setSize] = (0, react_1.useState)(BASE_SIZE);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const handleMove = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        if (distance <= 0)
+            return;
+        const centerX = rect.left + rect.width / 2;
+        const offset = Math.min(Math.abs(e.clientX - centerX), distance);
+        setSize(BASE_SIZE + magnification * (1 - offset / distance));
+    };
+    const handleLeave = () => {
+        setSize(BASE_SIZE);
+        setHovered(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('dock-item-wrap'), position: "relative", items: "center", children: [tooltip && hovered ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('dock-tooltip'), position: "absolute", b: "100%", mb: "$2", self: "center", px: "$2", py: "$1", rounded: "$3", bg: "$ink", style: { whiteSpace: 'nowrap' }, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$sunken", children: tooltip }) })) : null, (0, jsx_runtime_1.jsx)(ItemFrame, { ...(0, slot_1.slot)('dock-item'), render: "button", onClick: onClick, onPointerEnter: () => setHovered(true), onPointerMove: handleMove, onPointerLeave: handleLeave, ...(tooltip ? (0, slot_1.tip)(tooltip) : null), ...(0, gesture_1.touch)(BASE_SIZE, 44), style: { width: size, height: size, transition: 'width 150ms ease-out, height 150ms ease-out' }, ...(0, sx_1.sx)(className), ...props, children: (0, ink_1.ink)(children) })] }));
+}
+const SeparatorFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'DockSeparator',
+    self: 'center',
+    bg: '$borderColor',
+});
+/** A hairline divider that groups items into clusters, e.g. Finder | Mail. */
+function DockSeparator(props) {
+    const { position } = (0, react_1.useContext)(DockConfigContext);
+    const vertical = position !== 'bottom';
+    return ((0, jsx_runtime_1.jsx)(SeparatorFrame, { ...(0, slot_1.slot)('dock-separator'), width: vertical ? 40 : 1, height: vertical ? 1 : 40, mx: vertical ? 0 : '$1', my: vertical ? '$1' : 0, ...props }));
+}

package/dist/backends/gui/dock.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export type DockPosition = 'bottom' | 'left' | 'right';
+declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    edge?: "bottom" | "left" | "right" | undefined;
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type DockProps = Omit<ComponentProps<typeof Frame>, 'edge' | 'position' | 'className'> & {
+    className?: string;
+    position?: DockPosition;
+    /** How far, in px, a hovered item grows beyond `BASE_SIZE`. */
+    magnification?: number;
+    /** How far, in px either side of an item's centre, the growth reaches. */
+    distance?: number;
+    children?: ReactNode;
+};
+declare function Dock({ className, position, magnification, distance, children, ...props }: DockProps): import("react").JSX.Element;
+declare const ItemFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type DockItemProps = Omit<ComponentProps<typeof ItemFrame>, 'className' | 'onClick'> & {
+    className?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+    tooltip?: string;
+    /** Overrides the Dock's `magnification` for this one item. */
+    magnification?: number;
+    /** Overrides the Dock's `distance` for this one item. */
+    distance?: number;
+};
+declare function DockItem({ className, children, onClick, tooltip, magnification: itemMagnification, distance: itemDistance, ...props }: DockItemProps): import("react").JSX.Element;
+declare const SeparatorFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type DockSeparatorProps = ComponentProps<typeof SeparatorFrame>;
+/** A hairline divider that groups items into clusters, e.g. Finder | Mail. */
+declare function DockSeparator(props: DockSeparatorProps): import("react").JSX.Element;
+export { Dock, DockItem, DockSeparator };
+//# sourceMappingURL=dock.d.ts.map

package/dist/backends/gui/dock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/dock.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAMd,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAatD,QAAA,MAAM,KAAK;;;;8CAyBT,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,CAAC,GAAG;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,QAAmB,EACnB,aAAkB,EAClB,QAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,+BAcX;AAED,QAAA,MAAM,SAAS;;;8CAQb,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC,GAAG;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAO,EACP,aAAa,EAAE,iBAAiB,EAChC,QAAQ,EAAE,YAAY,EACtB,GAAG,KAAK,EACT,EAAE,aAAa,+BA2Df;AAED,QAAA,MAAM,cAAc;;;8CAIlB,CAAA;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAEtE,8EAA8E;AAC9E,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAa/C;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAA"}

package/dist/backends/gui/dock.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Dock — a macOS-style icon shelf. `DockItem`s sit in a row (or a column, on
+ * `left`/`right`) and grow as the pointer nears them; `DockSeparator` splits
+ * them into clusters, the way Finder and Safari sit apart from Mail and
+ * Calendar in the real thing.
+ *
+ * The size ramp is a plain pointer-distance calculation retargeting a CSS
+ * `width`/`height` transition on each item — the same visual read as a spring
+ * without pulling in an animation library the workspace does not carry. Each
+ * item tracks its own pointer offset, so hovering one does not re-render its
+ * neighbours.
+ */
+import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import { createContext, useContext, useState, } from 'react';
+import { sx } from '../../sx.js';
+import { ink } from './ink.js';
+import { slot, tip } from './slot.js';
+import { touch } from './gesture.js';
+/** Resting size of an item, in px, before any magnification is applied. */
+const BASE_SIZE = 48;
+const DockConfigContext = /* @__PURE__ */ createContext({
+    magnification: 60,
+    distance: 140,
+    position: 'bottom',
+});
+const Frame = styled(XStack, {
+    name: 'Dock',
+    items: 'flex-end',
+    gap: '$1.5',
+    p: '$2',
+    rounded: '$6',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    bg: '$panel',
+    shadowColor: '$dim',
+    shadowRadius: 24,
+    shadowOpacity: 0.25,
+    variants: {
+        // Named `edge`, not `position`: gui's own `position` prop is the CSS
+        // property (`relative`/`absolute`/…), and a variant sharing that name
+        // would fight it instead of picking a layout.
+        edge: {
+            bottom: { flexDirection: 'row', items: 'flex-end' },
+            left: { flexDirection: 'column', items: 'flex-end' },
+            right: { flexDirection: 'column', items: 'flex-start' },
+        },
+    },
+    defaultVariants: { edge: 'bottom' },
+});
+function Dock({ className, position = 'bottom', magnification = 60, distance = 140, children, ...props }) {
+    return (_jsx(DockConfigContext.Provider, { value: { magnification, distance, position }, children: _jsx(Frame, { ...slot('dock'), "data-position": position, edge: position, ...sx(className), ...props, children: children }) }));
+}
+const ItemFrame = styled(XStack, {
+    name: 'DockItem',
+    items: 'center',
+    justify: 'center',
+    rounded: '$4',
+    bg: '$hover',
+    cursor: 'pointer',
+    hoverStyle: { bg: '$edge' },
+});
+function DockItem({ className, children, onClick, tooltip, magnification: itemMagnification, distance: itemDistance, ...props }) {
+    const { magnification: contextMagnification, distance: contextDistance } = useContext(DockConfigContext);
+    const magnification = itemMagnification ?? contextMagnification;
+    const distance = itemDistance ?? contextDistance;
+    const [size, setSize] = useState(BASE_SIZE);
+    const [hovered, setHovered] = useState(false);
+    const handleMove = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        if (distance <= 0)
+            return;
+        const centerX = rect.left + rect.width / 2;
+        const offset = Math.min(Math.abs(e.clientX - centerX), distance);
+        setSize(BASE_SIZE + magnification * (1 - offset / distance));
+    };
+    const handleLeave = () => {
+        setSize(BASE_SIZE);
+        setHovered(false);
+    };
+    return (_jsxs(YStack, { ...slot('dock-item-wrap'), position: "relative", items: "center", children: [tooltip && hovered ? (_jsx(XStack, { ...slot('dock-tooltip'), position: "absolute", b: "100%", mb: "$2", self: "center", px: "$2", py: "$1", rounded: "$3", bg: "$ink", style: { whiteSpace: 'nowrap' }, children: _jsx(SizableText, { size: "$1", color: "$sunken", children: tooltip }) })) : null, _jsx(ItemFrame, { ...slot('dock-item'), render: "button", onClick: onClick, onPointerEnter: () => setHovered(true), onPointerMove: handleMove, onPointerLeave: handleLeave, ...(tooltip ? tip(tooltip) : null), ...touch(BASE_SIZE, 44), style: { width: size, height: size, transition: 'width 150ms ease-out, height 150ms ease-out' }, ...sx(className), ...props, children: ink(children) })] }));
+}
+const SeparatorFrame = styled(YStack, {
+    name: 'DockSeparator',
+    self: 'center',
+    bg: '$borderColor',
+});
+/** A hairline divider that groups items into clusters, e.g. Finder | Mail. */
+function DockSeparator(props) {
+    const { position } = useContext(DockConfigContext);
+    const vertical = position !== 'bottom';
+    return (_jsx(SeparatorFrame, { ...slot('dock-separator'), width: vertical ? 40 : 1, height: vertical ? 1 : 40, mx: vertical ? 0 : '$1', my: vertical ? '$1' : 0, ...props }));
+}
+export { Dock, DockItem, DockSeparator };
+//# sourceMappingURL=dock.js.map

package/dist/backends/gui/dock.js.map

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

package/dist/backends/gui/dropzone.cjs

@@ -0,0 +1,142 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropzone = Dropzone;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Dropzone — a region that accepts files by drag-and-drop or by a click that
+ * opens the browser's file picker, and lists what it is holding underneath.
+ *
+ * File drag-and-drop is a DOM concept (`DataTransfer`, `<input type="file">`),
+ * so the frame reads `isWeb` from `@hanzo/gui` and no-ops the drag handlers
+ * off the web: the click-to-browse input still renders everywhere, only the
+ * drag affordance is web-only. State is a plain `useState` list of `File`,
+ * accepted or rejected against `accept`/`maxFiles`/`maxSize`.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_2 = require("react");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const sx_1 = require("../../sx.cjs");
+const gesture_1 = require("./gesture.cjs");
+/** Enter/Space activate a `role="button"` frame the way a native button would. */
+const asButton = (onActivate) => ({
+    role: 'button',
+    tabIndex: 0,
+    onPress: onActivate,
+    onKeyDown: (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        onActivate();
+    },
+});
+const REMOVE_SIZE = 24;
+const Frame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Dropzone',
+    cursor: 'pointer',
+    items: 'center',
+    justify: 'center',
+    gap: '$2',
+    rounded: '$4',
+    borderWidth: 2,
+    borderStyle: 'dashed',
+    borderColor: '$borderColor',
+    p: '$8',
+    variants: {
+        active: {
+            true: { borderColor: '$ink', bg: '$hover' },
+        },
+        disabled: {
+            true: { cursor: 'default', opacity: 0.5 },
+        },
+    },
+    hoverStyle: { borderColor: '$rim' },
+    defaultVariants: { active: false, disabled: false },
+});
+/** `{"image/*": [".png"]}` → an `accept` attribute value the file input reads. */
+const acceptAttr = (accept) => Object.entries(accept)
+    .flatMap(([mime, extensions]) => [mime, ...extensions])
+    .join(',');
+/** A file matches `accept` on its MIME type, a MIME wildcard, or its extension. */
+const matches = (file, accept) => Object.entries(accept).some(([mime, extensions]) => {
+    if (mime.endsWith('/*') && file.type.startsWith(mime.slice(0, -1)))
+        return true;
+    if (mime === file.type)
+        return true;
+    return extensions.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
+});
+const sortFiles = (incoming, accept, maxSize) => {
+    const accepted = [];
+    const rejected = [];
+    for (const file of incoming) {
+        const sized = file.size <= maxSize;
+        const typed = !accept || Object.keys(accept).length === 0 || matches(file, accept);
+        (sized && typed ? accepted : rejected).push(file);
+    }
+    return { accepted, rejected };
+};
+const formatSize = (bytes) => `${(bytes / 1024).toFixed(1)} KB`;
+function Dropzone({ className, onFilesAccepted, onFilesRejected, maxFiles = 5, maxSize = 5242880, accept = {
+    'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
+    'application/pdf': ['.pdf'],
+}, disabled = false, ...props }) {
+    const [files, setFiles] = (0, react_2.useState)([]);
+    const [active, setActive] = (0, react_2.useState)(false);
+    const inputRef = (0, react_2.useRef)(null);
+    const inputId = (0, react_2.useId)();
+    const take = (incoming) => {
+        if (disabled || incoming.length === 0)
+            return;
+        const { accepted, rejected } = sortFiles(incoming, accept, maxSize);
+        if (accepted.length > 0) {
+            setFiles((prev) => [...prev, ...accepted].slice(0, maxFiles));
+            onFilesAccepted?.(accepted);
+        }
+        if (rejected.length > 0)
+            onFilesRejected?.(rejected);
+    };
+    const removeFile = (index) => setFiles((prev) => prev.filter((_, i) => i !== index));
+    const onDrop = (event) => {
+        event.preventDefault();
+        setActive(false);
+        if (disabled)
+            return;
+        take([...event.dataTransfer.files]);
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('dropzone'), width: "100%", ...(0, sx_1.sx)(className), ...props, children: [(0, jsx_runtime_1.jsxs)(Frame, { ...(0, slot_1.slot)('dropzone-region'), "data-state": active ? 'active' : 'idle', "data-disabled": disabled || undefined, active: active, disabled: disabled, "aria-disabled": disabled, ...asButton(() => !disabled && inputRef.current?.click()), ...(gui_1.isWeb
+                    ? {
+                        onDragEnter: (event) => {
+                            event.preventDefault();
+                            if (!disabled)
+                                setActive(true);
+                        },
+                        onDragOver: (event) => {
+                            event.preventDefault();
+                        },
+                        onDragLeave: (event) => {
+                            event.preventDefault();
+                            setActive(false);
+                        },
+                        onDrop,
+                    }
+                    : null), children: [(0, jsx_runtime_1.jsx)("input", { ...(0, slot_1.slot)('dropzone-input'), ref: inputRef, id: inputId, type: "file", multiple: maxFiles > 1, accept: acceptAttr(accept), disabled: disabled, style: { display: 'none' }, onChange: (event) => {
+                            take([...(event.target.files ?? [])]);
+                            event.target.value = '';
+                        } }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Upload, { size: 32, color: "$quiet" }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", items: "center", children: [(0, ink_1.ink)(active ? 'Drop files here' : 'Drag & drop files here', gui_1.SizableText, {
+                                fontWeight: '500',
+                            }), (0, ink_1.ink)(`or click to browse (max ${maxFiles} files, ${Math.round(maxSize / 1024 / 1024)}MB each)`, gui_1.SizableText, { fontSize: '$1', color: '$quiet' })] })] }), files.length > 0 && ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('dropzone-list'), gap: "$2", mt: "$4", children: files.map((file, index) => ((0, react_1.createElement)(gui_1.XStack, { ...(0, slot_1.slot)('dropzone-item'), key: `${file.name}-${file.lastModified}-${index}`, items: "center", gap: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", p: "$2" },
+                    (0, jsx_runtime_1.jsx)(lucide_icons_2_1.File, { size: 16, color: "$quiet" }),
+                    (0, ink_1.ink)(file.name, gui_1.SizableText, {
+                        flex: 1,
+                        fontSize: '$2',
+                        numberOfLines: 1,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    }),
+                    (0, ink_1.ink)(formatSize(file.size), gui_1.SizableText, { fontSize: '$1', color: '$quiet' }),
+                    (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('dropzone-item-remove'), "aria-label": `Remove ${file.name}`, items: "center", justify: "center", rounded: "$2", p: "$1", cursor: "pointer", hoverStyle: { bg: '$hover' }, ...asButton(() => removeFile(index)), ...(0, gesture_1.touch)(REMOVE_SIZE, 44, 'both'), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })))) }))] }));
+}

package/dist/backends/gui/dropzone.d.ts

@@ -0,0 +1,12 @@
+export type DropzoneAccept = Record<string, string[]>;
+export type DropzoneProps = {
+    className?: string;
+    onFilesAccepted?: (files: File[]) => void;
+    onFilesRejected?: (files: File[]) => void;
+    maxFiles?: number;
+    maxSize?: number;
+    accept?: DropzoneAccept;
+    disabled?: boolean;
+};
+export declare function Dropzone({ className, onFilesAccepted, onFilesRejected, maxFiles, maxSize, accept, disabled, ...props }: DropzoneProps): import("react").JSX.Element;
+//# sourceMappingURL=dropzone.d.ts.map

package/dist/backends/gui/dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/dropzone.tsx"],"names":[],"mappings":"AAgCA,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;AAErD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IACzC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AA6DD,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,eAAe,EACf,eAAe,EACf,QAAY,EACZ,OAAiB,EACjB,MAGC,EACD,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,aAAa,+BA0Hf"}

package/dist/backends/gui/dropzone.js

@@ -0,0 +1,140 @@
+'use client';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Dropzone — a region that accepts files by drag-and-drop or by a click that
+ * opens the browser's file picker, and lists what it is holding underneath.
+ *
+ * File drag-and-drop is a DOM concept (`DataTransfer`, `<input type="file">`),
+ * so the frame reads `isWeb` from `@hanzo/gui` and no-ops the drag handlers
+ * off the web: the click-to-browse input still renders everywhere, only the
+ * drag affordance is web-only. State is a plain `useState` list of `File`,
+ * accepted or rejected against `accept`/`maxFiles`/`maxSize`.
+ */
+import { SizableText, XStack, YStack, isWeb, styled } from '@hanzo/gui';
+import { File as FileIcon, Upload, X } from '@hanzogui/lucide-icons-2';
+import { useId, useRef, useState } from 'react';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+import { sx } from '../../sx.js';
+import { touch } from './gesture.js';
+/** Enter/Space activate a `role="button"` frame the way a native button would. */
+const asButton = (onActivate) => ({
+    role: 'button',
+    tabIndex: 0,
+    onPress: onActivate,
+    onKeyDown: (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        onActivate();
+    },
+});
+const REMOVE_SIZE = 24;
+const Frame = styled(YStack, {
+    name: 'Dropzone',
+    cursor: 'pointer',
+    items: 'center',
+    justify: 'center',
+    gap: '$2',
+    rounded: '$4',
+    borderWidth: 2,
+    borderStyle: 'dashed',
+    borderColor: '$borderColor',
+    p: '$8',
+    variants: {
+        active: {
+            true: { borderColor: '$ink', bg: '$hover' },
+        },
+        disabled: {
+            true: { cursor: 'default', opacity: 0.5 },
+        },
+    },
+    hoverStyle: { borderColor: '$rim' },
+    defaultVariants: { active: false, disabled: false },
+});
+/** `{"image/*": [".png"]}` → an `accept` attribute value the file input reads. */
+const acceptAttr = (accept) => Object.entries(accept)
+    .flatMap(([mime, extensions]) => [mime, ...extensions])
+    .join(',');
+/** A file matches `accept` on its MIME type, a MIME wildcard, or its extension. */
+const matches = (file, accept) => Object.entries(accept).some(([mime, extensions]) => {
+    if (mime.endsWith('/*') && file.type.startsWith(mime.slice(0, -1)))
+        return true;
+    if (mime === file.type)
+        return true;
+    return extensions.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
+});
+const sortFiles = (incoming, accept, maxSize) => {
+    const accepted = [];
+    const rejected = [];
+    for (const file of incoming) {
+        const sized = file.size <= maxSize;
+        const typed = !accept || Object.keys(accept).length === 0 || matches(file, accept);
+        (sized && typed ? accepted : rejected).push(file);
+    }
+    return { accepted, rejected };
+};
+const formatSize = (bytes) => `${(bytes / 1024).toFixed(1)} KB`;
+export function Dropzone({ className, onFilesAccepted, onFilesRejected, maxFiles = 5, maxSize = 5242880, accept = {
+    'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
+    'application/pdf': ['.pdf'],
+}, disabled = false, ...props }) {
+    const [files, setFiles] = useState([]);
+    const [active, setActive] = useState(false);
+    const inputRef = useRef(null);
+    const inputId = useId();
+    const take = (incoming) => {
+        if (disabled || incoming.length === 0)
+            return;
+        const { accepted, rejected } = sortFiles(incoming, accept, maxSize);
+        if (accepted.length > 0) {
+            setFiles((prev) => [...prev, ...accepted].slice(0, maxFiles));
+            onFilesAccepted?.(accepted);
+        }
+        if (rejected.length > 0)
+            onFilesRejected?.(rejected);
+    };
+    const removeFile = (index) => setFiles((prev) => prev.filter((_, i) => i !== index));
+    const onDrop = (event) => {
+        event.preventDefault();
+        setActive(false);
+        if (disabled)
+            return;
+        take([...event.dataTransfer.files]);
+    };
+    return (_jsxs(YStack, { ...slot('dropzone'), width: "100%", ...sx(className), ...props, children: [_jsxs(Frame, { ...slot('dropzone-region'), "data-state": active ? 'active' : 'idle', "data-disabled": disabled || undefined, active: active, disabled: disabled, "aria-disabled": disabled, ...asButton(() => !disabled && inputRef.current?.click()), ...(isWeb
+                    ? {
+                        onDragEnter: (event) => {
+                            event.preventDefault();
+                            if (!disabled)
+                                setActive(true);
+                        },
+                        onDragOver: (event) => {
+                            event.preventDefault();
+                        },
+                        onDragLeave: (event) => {
+                            event.preventDefault();
+                            setActive(false);
+                        },
+                        onDrop,
+                    }
+                    : null), children: [_jsx("input", { ...slot('dropzone-input'), ref: inputRef, id: inputId, type: "file", multiple: maxFiles > 1, accept: acceptAttr(accept), disabled: disabled, style: { display: 'none' }, onChange: (event) => {
+                            take([...(event.target.files ?? [])]);
+                            event.target.value = '';
+                        } }), _jsx(Upload, { size: 32, color: "$quiet" }), _jsxs(YStack, { gap: "$1", items: "center", children: [ink(active ? 'Drop files here' : 'Drag & drop files here', SizableText, {
+                                fontWeight: '500',
+                            }), ink(`or click to browse (max ${maxFiles} files, ${Math.round(maxSize / 1024 / 1024)}MB each)`, SizableText, { fontSize: '$1', color: '$quiet' })] })] }), files.length > 0 && (_jsx(YStack, { ...slot('dropzone-list'), gap: "$2", mt: "$4", children: files.map((file, index) => (_createElement(XStack, { ...slot('dropzone-item'), key: `${file.name}-${file.lastModified}-${index}`, items: "center", gap: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", p: "$2" },
+                    _jsx(FileIcon, { size: 16, color: "$quiet" }),
+                    ink(file.name, SizableText, {
+                        flex: 1,
+                        fontSize: '$2',
+                        numberOfLines: 1,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    }),
+                    ink(formatSize(file.size), SizableText, { fontSize: '$1', color: '$quiet' }),
+                    _jsx(XStack, { ...slot('dropzone-item-remove'), "aria-label": `Remove ${file.name}`, items: "center", justify: "center", rounded: "$2", p: "$1", cursor: "pointer", hoverStyle: { bg: '$hover' }, ...asButton(() => removeFile(index)), ...touch(REMOVE_SIZE, 44, 'both'), children: _jsx(X, { size: 16 }) })))) }))] }));
+}
+//# sourceMappingURL=dropzone.js.map

package/dist/backends/gui/dropzone.js.map

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