@hanzo/ui 8.27.9 → 8.27.11

package/dist/backends/gui/limelight-nav.js

@@ -0,0 +1,166 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LimelightNav — a row of items with a glowing highlight that slides to
+ * whichever one is active, plus a small beam of light hanging above it, the
+ * way a spotlight follows a performer across a stage.
+ *
+ * The glow's position is a plain `getBoundingClientRect()` measurement of the
+ * active item relative to the rail, applied as a CSS `transform`/`width`
+ * transition — the same technique `AnimatedBeam` and `Dock` already use in
+ * this backend, so no animation library is pulled in for one moving pill. It
+ * remeasures on resize via `ResizeObserver` and whenever the active item
+ * changes.
+ *
+ * `variant="floating"` is a self-sizing rounded pill, the shape a command bar
+ * or a segmented control takes. `variant="bar"` spans the full width with a
+ * bottom hairline, the shape a page's primary navigation takes.
+ */
+import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import * as React from 'react';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+import { touch } from './gesture.js';
+const ITEM_H = 40;
+/** The DOM box behind a ref, if there is one; a native view has none. */
+const box = (el) => typeof HTMLElement !== 'undefined' && el instanceof HTMLElement ? el : null;
+const Rail = styled(XStack, {
+    name: 'LimelightNavRail',
+    position: 'relative',
+    items: 'center',
+    gap: '$1',
+    rounded: '$6',
+    bg: '$hover',
+    p: '$1',
+    self: 'flex-start',
+    variants: {
+        variant: {
+            floating: {},
+            bar: {
+                rounded: 0,
+                bg: 'transparent',
+                borderBottomWidth: 1,
+                borderColor: '$borderColor',
+                width: '100%',
+                self: 'stretch',
+                justify: 'flex-start',
+                gap: '$4',
+                px: '$4',
+                py: 0,
+            },
+        },
+    },
+    defaultVariants: { variant: 'floating' },
+});
+const Item = styled(XStack, {
+    name: 'LimelightNavItem',
+    items: 'center',
+    justify: 'center',
+    gap: '$1.5',
+    px: '$3',
+    height: ITEM_H,
+    rounded: '$5',
+    cursor: 'pointer',
+    hoverStyle: { opacity: 0.85 },
+    style: { zIndex: 1 },
+});
+const Glow = styled(YStack, {
+    name: 'LimelightNavGlow',
+    position: 'absolute',
+    l: 0,
+    rounded: '$5',
+    bg: '$accentBackground',
+    pointerEvents: 'none',
+    style: { zIndex: 0 },
+    variants: {
+        variant: {
+            floating: { t: '$1', b: '$1' },
+            bar: { t: 0, b: 0, rounded: 0, borderBottomWidth: 2, borderColor: '$accentColor', bg: 'transparent' },
+        },
+    },
+    defaultVariants: { variant: 'floating' },
+});
+/** A small beam of light hanging above the active item, floating variant only. */
+const Beam = styled(YStack, {
+    name: 'LimelightNavBeam',
+    position: 'absolute',
+    l: 0,
+    height: 6,
+    rounded: 999,
+    bg: '$accentBackground',
+    pointerEvents: 'none',
+    style: { top: -10, zIndex: 0, filter: 'blur(4px)' },
+});
+export function LimelightNav({ items, value, defaultValue, onValueChange, variant = 'floating', ...props }) {
+    const [own, setOwn] = React.useState(defaultValue ?? items[0]?.id);
+    const active = value ?? own;
+    const railRef = React.useRef(null);
+    const itemRefs = React.useRef(new Map());
+    const [rect, setRect] = React.useState({ left: 0, width: 0 });
+    const measure = React.useCallback(() => {
+        const rail = box(railRef.current);
+        const el = active ? itemRefs.current.get(active) : undefined;
+        if (!rail || !el)
+            return;
+        const railBox = rail.getBoundingClientRect();
+        const itemBox = el.getBoundingClientRect();
+        setRect((prev) => {
+            const next = { left: itemBox.left - railBox.left, width: itemBox.width };
+            return prev.left === next.left && prev.width === next.width ? prev : next;
+        });
+    }, [active]);
+    React.useLayoutEffect(() => {
+        measure();
+    }, [measure, items.length, variant]);
+    React.useEffect(() => {
+        const rail = box(railRef.current);
+        if (!rail || typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(rail);
+        return () => observer.disconnect();
+    }, [measure]);
+    const select = (id) => {
+        if (value === undefined)
+            setOwn(id);
+        onValueChange?.(id);
+    };
+    /** Roving-tabindex arrow/Home/End navigation, per the WAI-ARIA tabs pattern. */
+    const onKeyDown = (e) => {
+        const from = items.findIndex((item) => item.id === active);
+        if (from < 0)
+            return;
+        const to = e.key === 'ArrowRight' || e.key === 'ArrowDown'
+            ? (from + 1) % items.length
+            : e.key === 'ArrowLeft' || e.key === 'ArrowUp'
+                ? (from - 1 + items.length) % items.length
+                : e.key === 'Home'
+                    ? 0
+                    : e.key === 'End'
+                        ? items.length - 1
+                        : -1;
+        if (to < 0)
+            return;
+        e.preventDefault();
+        const next = items[to];
+        select(next.id);
+        itemRefs.current.get(next.id)?.focus();
+    };
+    return (_jsxs(Rail, { ref: railRef, ...slot('limelight-nav'), role: "tablist", "aria-label": props['aria-label'] ?? 'Navigation', variant: variant, children: [variant === 'floating' && (_jsx(Beam, { ...slot('limelight-nav-beam'), style: { transform: `translateX(${rect.left}px)`, width: rect.width, transition: 'transform 200ms ease, width 200ms ease' } })), _jsx(Glow, { ...slot('limelight-nav-glow'), variant: variant, style: { transform: `translateX(${rect.left}px)`, width: rect.width, transition: 'transform 200ms ease, width 200ms ease' } }), items.map((item) => {
+                const isActive = item.id === active;
+                return (_jsxs(Item, { ref: (node) => {
+                        const el = box(node);
+                        if (el)
+                            itemRefs.current.set(item.id, el);
+                        else
+                            itemRefs.current.delete(item.id);
+                    }, ...slot('limelight-nav-item'), render: item.href ? 'a' : 'button', ...(item.href ? { href: item.href } : { type: 'button' }), role: "tab", "aria-selected": isActive, "aria-current": isActive ? 'page' : undefined, tabIndex: isActive ? 0 : -1, onClick: () => select(item.id), onKeyDown: onKeyDown, ...touch(ITEM_H, 44, 'y'), children: [item.icon, ink(item.label, SizableText, {
+                            size: '$2',
+                            fontWeight: isActive ? '600' : '500',
+                            color: isActive ? '$accentColor' : '$ink',
+                        })] }, item.id));
+            })] }));
+}
+//# sourceMappingURL=limelight-nav.js.map

package/dist/backends/gui/limelight-nav.js.map

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

package/dist/backends/gui/list.cjs

@@ -0,0 +1,26 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = List;
+exports.ListItem = ListItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * List — a vertical group of rows: a real `<ul>` (`List`) whose rows are real
+ * `<li>`s (`ListItem`), spaced by gap rather than a margin hack so the first
+ * and last row carry no stray space.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const ListFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'List',
+    gap: '$2',
+});
+const ListItemFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'ListItem',
+});
+function List({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(ListFrame, { ...(0, slot_1.slot)('list'), render: "ul", ...props, children: children }));
+}
+function ListItem({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(ListItemFrame, { ...(0, slot_1.slot)('list-item'), render: "li", ...props, children: children }));
+}

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

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+declare const ListFrame: 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>;
+declare const ListItemFrame: 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 ListProps = React.ComponentProps<typeof ListFrame>;
+export type ListItemProps = React.ComponentProps<typeof ListItemFrame>;
+export declare function List({ children, ...props }: ListProps): React.JSX.Element;
+export declare function ListItem({ children, ...props }: ListItemProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/list.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAGnC,QAAA,MAAM,SAAS;;;8CAGb,CAAA;AAEF,QAAA,MAAM,aAAa;;;8CAEjB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAC9D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAA;AAEtE,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAMrD;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAM7D"}

package/dist/backends/gui/list.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * List — a vertical group of rows: a real `<ul>` (`List`) whose rows are real
+ * `<li>`s (`ListItem`), spaced by gap rather than a margin hack so the first
+ * and last row carry no stray space.
+ */
+import { YStack, styled } from '@hanzo/gui';
+import { slot } from './slot.js';
+const ListFrame = styled(YStack, {
+    name: 'List',
+    gap: '$2',
+});
+const ListItemFrame = styled(YStack, {
+    name: 'ListItem',
+});
+export function List({ children, ...props }) {
+    return (_jsx(ListFrame, { ...slot('list'), render: "ul", ...props, children: children }));
+}
+export function ListItem({ children, ...props }) {
+    return (_jsx(ListItemFrame, { ...slot('list-item'), render: "li", ...props, children: children }));
+}
+//# sourceMappingURL=list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/backends/gui/list.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;GAIG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE;IAC/B,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,IAAI;CACV,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE;IACnC,IAAI,EAAE,UAAU;CACjB,CAAC,CAAA;AAKF,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa;IACpD,OAAO,CACL,KAAC,SAAS,OAAK,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,EAAC,IAAI,KAAK,KAAK,YAC/C,QAAQ,GACC,CACb,CAAA;AACH,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IAC5D,OAAO,CACL,KAAC,aAAa,OAAK,IAAI,CAAC,WAAW,CAAC,EAAE,MAAM,EAAC,IAAI,KAAK,KAAK,YACxD,QAAQ,GACK,CACjB,CAAA;AACH,CAAC"}

package/dist/backends/gui/macos-dock.cjs

@@ -0,0 +1,84 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MacosDock = MacosDock;
+exports.MacosDockItem = MacosDockItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * MacosDock — the floating icon shelf from macOS itself: real frosted glass
+ * (the same `glass()` material every menu and dialog in this library wears),
+ * a gradient sheen across the top, and items that grow as the pointer nears
+ * them, with a glass tooltip rising above the one you are on.
+ *
+ * `Dock`/`DockItem` in `./dock` already cover a plain icon shelf on any edge
+ * of the screen; this is the specific, always-bottom, always-glass macOS
+ * read, so the two live under different names rather than one file growing a
+ * `glass` toggle nobody asked for.
+ *
+ * Magnification is a pointer-distance calculation retargeting a CSS
+ * `width`/`height` transition per 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 glass_1 = require("../../glass.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 MacosDockConfigContext = /* @__PURE__ */ (0, react_1.createContext)({
+    magnification: 60,
+    distance: 140,
+});
+const Frame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'MacosDock',
+    self: 'center',
+    items: 'flex-end',
+    gap: '$2',
+    px: '$3',
+    pb: '$2',
+    minH: 64,
+    rounded: '$6',
+    borderWidth: 1,
+    shadowColor: '$dim',
+    shadowRadius: 24,
+    shadowOpacity: 0.2,
+});
+/** The main container component for the macOS dock. */
+function MacosDock({ className, magnification = 60, distance = 140, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(MacosDockConfigContext.Provider, { value: { magnification, distance }, children: (0, jsx_runtime_1.jsx)(Frame, { ...(0, slot_1.slot)('macos-dock'), ...(0, glass_1.glass)(2), ...(0, sx_1.sx)(className), ...props, children: children }) }));
+}
+const ItemFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'MacosDockItem',
+    items: 'center',
+    justify: 'center',
+    rounded: '$4',
+    bg: '$hover',
+    cursor: 'pointer',
+    overflow: 'hidden',
+    hoverStyle: { bg: '$edge' },
+    focusStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' },
+});
+/** Individual dock item component: an icon that magnifies and can carry a tooltip. */
+function MacosDockItem({ className, children, onClick, tooltip, ...props }) {
+    const { magnification, distance } = (0, react_1.useContext)(MacosDockConfigContext);
+    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)('macos-dock-item-wrap'), position: "relative", items: "center", children: [tooltip && hovered ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('macos-dock-tooltip'), position: "absolute", b: "100%", mb: "$2", self: "center", px: "$2", py: "$1", rounded: "$3", ...(0, glass_1.glass)(3), style: { whiteSpace: 'nowrap' }, children: (0, ink_1.ink)(tooltip) })) : null, (0, jsx_runtime_1.jsx)(ItemFrame, { ...(0, slot_1.slot)('macos-dock-item'), render: "button", ...{ type: '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) })] }));
+}

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

@@ -0,0 +1,30 @@
+import { type ComponentProps, type ReactNode } from 'react';
+declare const Frame: 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 MacosDockProps = Omit<ComponentProps<typeof Frame>, 'className'> & {
+    className?: string;
+    /** Maximum magnification amount in pixels. */
+    magnification?: number;
+    /** Distance from the pointer, in pixels, where magnification starts. */
+    distance?: number;
+    children?: ReactNode;
+};
+/** The main container component for the macOS dock. */
+declare function MacosDock({ className, magnification, distance, children, ...props }: MacosDockProps): 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 MacosDockItemProps = Omit<ComponentProps<typeof ItemFrame>, 'className' | 'onClick'> & {
+    className?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+    /** Tooltip text to show on hover. */
+    tooltip?: string;
+};
+/** Individual dock item component: an icon that magnifies and can carry a tooltip. */
+declare function MacosDockItem({ className, children, onClick, tooltip, ...props }: MacosDockItemProps): import("react").JSX.Element;
+export { MacosDock, MacosDockItem };
+//# sourceMappingURL=macos-dock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"macos-dock.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/macos-dock.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAiBd,QAAA,MAAM,KAAK;;;8CAaT,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,WAAW,CAAC,GAAG;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,uDAAuD;AACvD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,aAAkB,EAAE,QAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAQvG;AAED,QAAA,MAAM,SAAS;;;8CAUb,CAAA;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC,GAAG;IACjG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,sFAAsF;AACtF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAsD7F;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAA"}

package/dist/backends/gui/macos-dock.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MacosDock — the floating icon shelf from macOS itself: real frosted glass
+ * (the same `glass()` material every menu and dialog in this library wears),
+ * a gradient sheen across the top, and items that grow as the pointer nears
+ * them, with a glass tooltip rising above the one you are on.
+ *
+ * `Dock`/`DockItem` in `./dock` already cover a plain icon shelf on any edge
+ * of the screen; this is the specific, always-bottom, always-glass macOS
+ * read, so the two live under different names rather than one file growing a
+ * `glass` toggle nobody asked for.
+ *
+ * Magnification is a pointer-distance calculation retargeting a CSS
+ * `width`/`height` transition per 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 { XStack, YStack, styled } from '@hanzo/gui';
+import { createContext, useContext, useState, } from 'react';
+import { sx } from '../../sx.js';
+import { glass } from '../../glass.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 MacosDockConfigContext = /* @__PURE__ */ createContext({
+    magnification: 60,
+    distance: 140,
+});
+const Frame = styled(XStack, {
+    name: 'MacosDock',
+    self: 'center',
+    items: 'flex-end',
+    gap: '$2',
+    px: '$3',
+    pb: '$2',
+    minH: 64,
+    rounded: '$6',
+    borderWidth: 1,
+    shadowColor: '$dim',
+    shadowRadius: 24,
+    shadowOpacity: 0.2,
+});
+/** The main container component for the macOS dock. */
+function MacosDock({ className, magnification = 60, distance = 140, children, ...props }) {
+    return (_jsx(MacosDockConfigContext.Provider, { value: { magnification, distance }, children: _jsx(Frame, { ...slot('macos-dock'), ...glass(2), ...sx(className), ...props, children: children }) }));
+}
+const ItemFrame = styled(XStack, {
+    name: 'MacosDockItem',
+    items: 'center',
+    justify: 'center',
+    rounded: '$4',
+    bg: '$hover',
+    cursor: 'pointer',
+    overflow: 'hidden',
+    hoverStyle: { bg: '$edge' },
+    focusStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' },
+});
+/** Individual dock item component: an icon that magnifies and can carry a tooltip. */
+function MacosDockItem({ className, children, onClick, tooltip, ...props }) {
+    const { magnification, distance } = useContext(MacosDockConfigContext);
+    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('macos-dock-item-wrap'), position: "relative", items: "center", children: [tooltip && hovered ? (_jsx(XStack, { ...slot('macos-dock-tooltip'), position: "absolute", b: "100%", mb: "$2", self: "center", px: "$2", py: "$1", rounded: "$3", ...glass(3), style: { whiteSpace: 'nowrap' }, children: ink(tooltip) })) : null, _jsx(ItemFrame, { ...slot('macos-dock-item'), render: "button", ...{ type: '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) })] }));
+}
+export { MacosDock, MacosDockItem };
+//# sourceMappingURL=macos-dock.js.map

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

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

package/dist/backends/gui/magnetic.cjs

@@ -0,0 +1,40 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Magnetic = Magnetic;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Magnetic — a wrapper that pulls its child toward the pointer.
+ *
+ * While the pointer is over the frame, the child translates by the distance
+ * from the frame's centre to the pointer, scaled by `strength`; it eases back
+ * to rest the moment the pointer leaves. Wrap a button or a card in it for a
+ * pull-toward-the-cursor affordance.
+ *
+ * The live offset is an inline style rather than a style prop: gui compiles a
+ * style prop to one class per distinct value, and the offset takes a new value
+ * on every pixel of travel.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const slot_1 = require("./slot.cjs");
+const Frame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Magnetic',
+    display: 'inline-flex',
+    self: 'flex-start',
+});
+const REST = { x: 0, y: 0 };
+function Magnetic({ strength = 0.3, children, ...p }) {
+    const [at, setAt] = (0, react_1.useState)(REST);
+    const move = (e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        const cx = r.left + r.width / 2;
+        const cy = r.top + r.height / 2;
+        setAt({ x: (e.clientX - cx) * strength, y: (e.clientY - cy) * strength });
+    };
+    const rest = () => setAt(REST);
+    return ((0, jsx_runtime_1.jsx)(Frame, { ...(0, slot_1.slot)('magnetic'), "data-state": at.x === 0 && at.y === 0 ? 'idle' : 'hover', style: {
+            transform: `translate(${at.x}px, ${at.y}px)`,
+            transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1)',
+        }, onPointerMove: move, onPointerLeave: rest, ...p, children: children }));
+}

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

@@ -0,0 +1,12 @@
+import { type ComponentProps } from 'react';
+declare const Frame: 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 MagneticProps = ComponentProps<typeof Frame> & {
+    /** Fraction of the pointer's distance from centre the child travels. */
+    strength?: number;
+};
+export declare function Magnetic({ strength, children, ...p }: MagneticProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=magnetic.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"magnetic.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/magnetic.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAY,KAAK,cAAc,EAAqB,MAAM,OAAO,CAAA;AAGxE,QAAA,MAAM,KAAK;;;8CAIT,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,GAAG;IACzD,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAID,wBAAgB,QAAQ,CAAC,EAAE,QAAc,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,+BA0BzE"}

package/dist/backends/gui/magnetic.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Magnetic — a wrapper that pulls its child toward the pointer.
+ *
+ * While the pointer is over the frame, the child translates by the distance
+ * from the frame's centre to the pointer, scaled by `strength`; it eases back
+ * to rest the moment the pointer leaves. Wrap a button or a card in it for a
+ * pull-toward-the-cursor affordance.
+ *
+ * The live offset is an inline style rather than a style prop: gui compiles a
+ * style prop to one class per distinct value, and the offset takes a new value
+ * on every pixel of travel.
+ */
+import { YStack, styled } from '@hanzo/gui';
+import { useState } from 'react';
+import { slot } from './slot.js';
+const Frame = styled(YStack, {
+    name: 'Magnetic',
+    display: 'inline-flex',
+    self: 'flex-start',
+});
+const REST = { x: 0, y: 0 };
+export function Magnetic({ strength = 0.3, children, ...p }) {
+    const [at, setAt] = useState(REST);
+    const move = (e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        const cx = r.left + r.width / 2;
+        const cy = r.top + r.height / 2;
+        setAt({ x: (e.clientX - cx) * strength, y: (e.clientY - cy) * strength });
+    };
+    const rest = () => setAt(REST);
+    return (_jsx(Frame, { ...slot('magnetic'), "data-state": at.x === 0 && at.y === 0 ? 'idle' : 'hover', style: {
+            transform: `translate(${at.x}px, ${at.y}px)`,
+            transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1)',
+        }, onPointerMove: move, onPointerLeave: rest, ...p, children: children }));
+}
+//# sourceMappingURL=magnetic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"magnetic.js","sourceRoot":"","sources":["../../../src/backends/gui/magnetic.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAA0C,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa;IACtB,IAAI,EAAE,YAAY;CACnB,CAAC,CAAA;AAOF,MAAM,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AAE3B,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAiB;IACxE,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAElC,MAAM,IAAI,GAAG,CAAC,CAA+B,EAAE,EAAE;QAC/C,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAA;QACjD,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAA;QAC/B,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA;QAC/B,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,GAAG,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,GAAG,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAA;IAC3E,CAAC,CAAA;IACD,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAE9B,OAAO,CACL,KAAC,KAAK,OACA,IAAI,CAAC,UAAU,CAAC,gBACR,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACvD,KAAK,EAAE;YACL,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,KAAK;YAC5C,UAAU,EAAE,8CAA8C;SAC3D,EACD,aAAa,EAAE,IAAI,EACnB,cAAc,EAAE,IAAI,KAChB,CAAC,YAEJ,QAAQ,GACH,CACT,CAAA;AACH,CAAC"}