@hanzo/ui 8.27.9 → 8.27.11

package/dist/backends/gui/marquee.cjs

@@ -0,0 +1,110 @@
+'use client';"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Marquee = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Marquee — an endless horizontal or vertical ticker.
+ *
+ * `children` is laid out `repeat` times as a group, the group is rendered
+ * twice back to back, and one keyframe slides the pair by exactly half its own
+ * length, so the second copy lands where the first began and the seam never
+ * shows. A reader hears one copy: every other is `aria-hidden`. Duration comes
+ * from the rendered track's length over `speed` (px/s), so a long set of items
+ * moves at the same pace as a short one.
+ *
+ * The keyframes ride along as a hoisted `<style>`: React keys it by `href`, so
+ * any number of marquees on a page emit it once.
+ */
+const gui_1 = require("@hanzo/gui");
+const React = __importStar(require("react"));
+const sx_1 = require("../../sx.cjs");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const Frame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'Marquee',
+    position: 'relative',
+    overflow: 'hidden',
+    width: '100%',
+});
+const KEYFRAMES = `
+@keyframes marquee-x { to { transform: translateX(-50%) } }
+@keyframes marquee-y { to { transform: translateY(-50%) } }
+[data-slot="marquee"][data-pause-hover]:hover [data-slot="marquee-track"] { animation-play-state: paused }
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="marquee-track"] { animation: none !important }
+}
+`;
+const UNMEASURED = { stage: 0, track: 0 };
+/** 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;
+exports.Marquee = React.forwardRef(({ children, repeat = 2, reverse = false, pauseOnHover = false, vertical = false, speed = 50, gap = 0, className, style, ...props }, ref) => {
+    const Axis = vertical ? gui_1.YStack : gui_1.XStack;
+    const stageRef = React.useRef(null);
+    const trackRef = React.useRef(null);
+    const [span, setSpan] = React.useState(UNMEASURED);
+    React.useEffect(() => {
+        const along = (el) => {
+            const b = box(el);
+            return b ? (vertical ? b.offsetHeight : b.offsetWidth) : 0;
+        };
+        const measure = () => {
+            const next = { stage: along(stageRef.current), track: along(trackRef.current) };
+            setSpan((s) => (s.stage === next.stage && s.track === next.track ? s : next));
+        };
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        const b = box(trackRef.current);
+        if (b)
+            observer.observe(b);
+        return () => observer.disconnect();
+    }, [vertical, children, repeat, gap]);
+    const duration = span.track > 0 ? span.track / 2 / speed : 20;
+    const group = (hidden) => ((0, jsx_runtime_1.jsx)(Axis, { ...(0, slot_1.slot)('marquee-group'), shrink: 0, items: "center", gap: gap, ...(vertical ? { pb: gap } : { pr: gap }), children: Array.from({ length: repeat }, (_, i) => ((0, jsx_runtime_1.jsx)(Axis, { "aria-hidden": hidden || undefined, ...(0, slot_1.slot)('marquee-item'), shrink: 0, children: (0, ink_1.ink)(children) }, i))) }));
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ref: ref, ...(0, slot_1.slot)('marquee'), "data-pause-hover": pauseOnHover || undefined, style: style, ...(0, sx_1.sx)(className), ...props, children: [(0, jsx_runtime_1.jsx)("style", { href: "marquee", precedence: "default", children: KEYFRAMES }), (0, jsx_runtime_1.jsx)(Axis, { ref: stageRef, ...(0, slot_1.slot)('marquee-stage'), width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(Axis, { ref: trackRef, ...(0, slot_1.slot)('marquee-track'), shrink: 0, style: {
+                        willChange: 'transform',
+                        animationName: `marquee-${vertical ? 'y' : 'x'}`,
+                        animationDuration: `${duration}s`,
+                        animationTimingFunction: 'linear',
+                        animationIterationCount: 'infinite',
+                        animationDirection: reverse ? 'reverse' : 'normal',
+                    }, children: [group(false), group(true)] }) })] }));
+});
+exports.Marquee.displayName = 'Marquee';

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

@@ -0,0 +1,44 @@
+/**
+ * Marquee — an endless horizontal or vertical ticker.
+ *
+ * `children` is laid out `repeat` times as a group, the group is rendered
+ * twice back to back, and one keyframe slides the pair by exactly half its own
+ * length, so the second copy lands where the first began and the seam never
+ * shows. A reader hears one copy: every other is `aria-hidden`. Duration comes
+ * from the rendered track's length over `speed` (px/s), so a long set of items
+ * moves at the same pace as a short one.
+ *
+ * The keyframes ride along as a hoisted `<style>`: React keys it by `href`, so
+ * any number of marquees on a page emit it once.
+ */
+import { type GuiElement } from '@hanzo/gui';
+import * as React from 'react';
+export type MarqueeProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
+    children: React.ReactNode;
+    /** How many times `children` is laid out per loop. */
+    repeat?: number;
+    /** Run the track backwards. */
+    reverse?: boolean;
+    pauseOnHover?: boolean;
+    vertical?: boolean;
+    /** Track travel, px/s. */
+    speed?: number;
+    /** Space between copies, px — across the loop's seam too. */
+    gap?: number;
+    style?: React.CSSProperties;
+};
+export declare const Marquee: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "style"> & {
+    children: React.ReactNode;
+    /** How many times `children` is laid out per loop. */
+    repeat?: number;
+    /** Run the track backwards. */
+    reverse?: boolean;
+    pauseOnHover?: boolean;
+    vertical?: boolean;
+    /** Track travel, px/s. */
+    speed?: number;
+    /** Space between copies, px — across the loop's seam too. */
+    gap?: number;
+    style?: React.CSSProperties;
+} & React.RefAttributes<GuiElement>>;
+//# sourceMappingURL=marquee.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/marquee.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,EAA0B,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IAC7F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AASD,eAAO,MAAM,OAAO;cArBR,KAAK,CAAC,SAAS;IACzB,sDAAsD;aAC7C,MAAM;IACf,+BAA+B;cACrB,OAAO;mBACF,OAAO;eACX,OAAO;IAClB,0BAA0B;YAClB,MAAM;IACd,6DAA6D;UACvD,MAAM;YACJ,KAAK,CAAC,aAAa;oCAuG5B,CAAA"}

package/dist/backends/gui/marquee.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Marquee — an endless horizontal or vertical ticker.
+ *
+ * `children` is laid out `repeat` times as a group, the group is rendered
+ * twice back to back, and one keyframe slides the pair by exactly half its own
+ * length, so the second copy lands where the first began and the seam never
+ * shows. A reader hears one copy: every other is `aria-hidden`. Duration comes
+ * from the rendered track's length over `speed` (px/s), so a long set of items
+ * moves at the same pace as a short one.
+ *
+ * The keyframes ride along as a hoisted `<style>`: React keys it by `href`, so
+ * any number of marquees on a page emit it once.
+ */
+import { XStack, YStack, styled } from '@hanzo/gui';
+import * as React from 'react';
+import { sx } from '../../sx.js';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+const Frame = styled(XStack, {
+    name: 'Marquee',
+    position: 'relative',
+    overflow: 'hidden',
+    width: '100%',
+});
+const KEYFRAMES = `
+@keyframes marquee-x { to { transform: translateX(-50%) } }
+@keyframes marquee-y { to { transform: translateY(-50%) } }
+[data-slot="marquee"][data-pause-hover]:hover [data-slot="marquee-track"] { animation-play-state: paused }
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="marquee-track"] { animation: none !important }
+}
+`;
+const UNMEASURED = { stage: 0, track: 0 };
+/** 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;
+export const Marquee = React.forwardRef(({ children, repeat = 2, reverse = false, pauseOnHover = false, vertical = false, speed = 50, gap = 0, className, style, ...props }, ref) => {
+    const Axis = vertical ? YStack : XStack;
+    const stageRef = React.useRef(null);
+    const trackRef = React.useRef(null);
+    const [span, setSpan] = React.useState(UNMEASURED);
+    React.useEffect(() => {
+        const along = (el) => {
+            const b = box(el);
+            return b ? (vertical ? b.offsetHeight : b.offsetWidth) : 0;
+        };
+        const measure = () => {
+            const next = { stage: along(stageRef.current), track: along(trackRef.current) };
+            setSpan((s) => (s.stage === next.stage && s.track === next.track ? s : next));
+        };
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        const b = box(trackRef.current);
+        if (b)
+            observer.observe(b);
+        return () => observer.disconnect();
+    }, [vertical, children, repeat, gap]);
+    const duration = span.track > 0 ? span.track / 2 / speed : 20;
+    const group = (hidden) => (_jsx(Axis, { ...slot('marquee-group'), shrink: 0, items: "center", gap: gap, ...(vertical ? { pb: gap } : { pr: gap }), children: Array.from({ length: repeat }, (_, i) => (_jsx(Axis, { "aria-hidden": hidden || undefined, ...slot('marquee-item'), shrink: 0, children: ink(children) }, i))) }));
+    return (_jsxs(Frame, { ref: ref, ...slot('marquee'), "data-pause-hover": pauseOnHover || undefined, style: style, ...sx(className), ...props, children: [_jsx("style", { href: "marquee", precedence: "default", children: KEYFRAMES }), _jsx(Axis, { ref: stageRef, ...slot('marquee-stage'), width: "100%", height: "100%", children: _jsxs(Axis, { ref: trackRef, ...slot('marquee-track'), shrink: 0, style: {
+                        willChange: 'transform',
+                        animationName: `marquee-${vertical ? 'y' : 'x'}`,
+                        animationDuration: `${duration}s`,
+                        animationTimingFunction: 'linear',
+                        animationIterationCount: 'infinite',
+                        animationDirection: reverse ? 'reverse' : 'normal',
+                    }, children: [group(false), group(true)] }) })] }));
+});
+Marquee.displayName = 'Marquee';
+//# sourceMappingURL=marquee.js.map

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

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

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

@@ -0,0 +1,64 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuDock = MenuDock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * MenuDock — a pill of icon buttons, laid out as a row or a column, each one
+ * showing its label as a tooltip on hover and a filled treatment when active.
+ *
+ * Unlike `Dock`, there is no pointer-distance magnification: an item is either
+ * `active` or not, and the whole thing is one `items` array rather than a set
+ * of composed children — the shape a navigation rail or a bottom tab bar wants.
+ */
+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");
+const ITEM_SIZE = 44;
+const Frame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'MenuDock',
+    gap: '$2',
+    p: '$2',
+    rounded: '$10',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    bg: '$panel',
+    shadowColor: '$dim',
+    shadowRadius: 24,
+    shadowOpacity: 0.25,
+    variants: {
+        orientation: {
+            horizontal: { flexDirection: 'row' },
+            vertical: { flexDirection: 'column' },
+        },
+    },
+    defaultVariants: { orientation: 'horizontal' },
+});
+const ItemFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'MenuDockItem',
+    items: 'center',
+    justify: 'center',
+    width: ITEM_SIZE,
+    height: ITEM_SIZE,
+    rounded: '$10',
+    bg: 'transparent',
+    cursor: 'pointer',
+    hoverStyle: { bg: '$hover' },
+    variants: {
+        active: {
+            true: { bg: '$ink', hoverStyle: { bg: '$ink' } },
+        },
+    },
+});
+function MenuDockButton({ item, orientation, }) {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('menu-dock-item-wrap'), position: "relative", items: "center", children: [hovered ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('menu-dock-tooltip'), position: "absolute", ...(orientation === 'vertical'
+                    ? { l: '100%', ml: '$2', t: '50%', style: { transform: 'translateY(-50%)' } }
+                    : { b: '100%', mb: '$2', self: 'center' }), px: "$2", py: "$1", rounded: "$3", bg: "$ink", style: { ...(orientation === 'vertical' ? { transform: 'translateY(-50%)' } : {}), whiteSpace: 'nowrap' }, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$sunken", children: item.label }) })) : null, (0, jsx_runtime_1.jsxs)(ItemFrame, { ...(0, slot_1.slot)('menu-dock-item'), "data-active": item.active ? 'true' : 'false', render: "button", ...{ type: 'button' }, active: item.active, onClick: item.onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), ...(0, slot_1.tip)(item.label), ...(0, gesture_1.touch)(ITEM_SIZE, 44), children: [(0, ink_1.ink)(item.icon), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('menu-dock-item-label'), size: "$1", style: { position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)' }, children: item.label })] })] }));
+}
+function MenuDock({ className, items, orientation = 'horizontal', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Frame, { ...(0, slot_1.slot)('menu-dock'), "data-orientation": orientation, orientation: orientation, ...(0, sx_1.sx)(className), ...props, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MenuDockButton, { item: item, orientation: orientation }) }, index))) }));
+}

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

@@ -0,0 +1,21 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export type MenuDockOrientation = 'horizontal' | 'vertical';
+export type MenuDockItem = {
+    icon: ReactNode;
+    label: string;
+    onClick?: () => void;
+    active?: boolean;
+};
+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;
+    orientation?: "horizontal" | "vertical" | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type MenuDockProps = Omit<ComponentProps<typeof Frame>, 'orientation' | 'className' | 'items'> & {
+    className?: string;
+    items: MenuDockItem[];
+    orientation?: MenuDockOrientation;
+};
+export declare function MenuDock({ className, items, orientation, ...props }: MenuDockProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=menu-dock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-dock.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/menu-dock.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAM/E,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,UAAU,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAID,QAAA,MAAM,KAAK;;;;8CAoBT,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,aAAa,GAAG,WAAW,GAAG,OAAO,CAAC,GAAG;IACtG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,mBAAmB,CAAA;CAClC,CAAA;AAqED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAgBjG"}

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

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MenuDock — a pill of icon buttons, laid out as a row or a column, each one
+ * showing its label as a tooltip on hover and a filled treatment when active.
+ *
+ * Unlike `Dock`, there is no pointer-distance magnification: an item is either
+ * `active` or not, and the whole thing is one `items` array rather than a set
+ * of composed children — the shape a navigation rail or a bottom tab bar wants.
+ */
+import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import { Fragment, useState } from 'react';
+import { sx } from '../../sx.js';
+import { ink } from './ink.js';
+import { slot, tip } from './slot.js';
+import { touch } from './gesture.js';
+const ITEM_SIZE = 44;
+const Frame = styled(XStack, {
+    name: 'MenuDock',
+    gap: '$2',
+    p: '$2',
+    rounded: '$10',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    bg: '$panel',
+    shadowColor: '$dim',
+    shadowRadius: 24,
+    shadowOpacity: 0.25,
+    variants: {
+        orientation: {
+            horizontal: { flexDirection: 'row' },
+            vertical: { flexDirection: 'column' },
+        },
+    },
+    defaultVariants: { orientation: 'horizontal' },
+});
+const ItemFrame = styled(XStack, {
+    name: 'MenuDockItem',
+    items: 'center',
+    justify: 'center',
+    width: ITEM_SIZE,
+    height: ITEM_SIZE,
+    rounded: '$10',
+    bg: 'transparent',
+    cursor: 'pointer',
+    hoverStyle: { bg: '$hover' },
+    variants: {
+        active: {
+            true: { bg: '$ink', hoverStyle: { bg: '$ink' } },
+        },
+    },
+});
+function MenuDockButton({ item, orientation, }) {
+    const [hovered, setHovered] = useState(false);
+    return (_jsxs(YStack, { ...slot('menu-dock-item-wrap'), position: "relative", items: "center", children: [hovered ? (_jsx(XStack, { ...slot('menu-dock-tooltip'), position: "absolute", ...(orientation === 'vertical'
+                    ? { l: '100%', ml: '$2', t: '50%', style: { transform: 'translateY(-50%)' } }
+                    : { b: '100%', mb: '$2', self: 'center' }), px: "$2", py: "$1", rounded: "$3", bg: "$ink", style: { ...(orientation === 'vertical' ? { transform: 'translateY(-50%)' } : {}), whiteSpace: 'nowrap' }, children: _jsx(SizableText, { size: "$1", color: "$sunken", children: item.label }) })) : null, _jsxs(ItemFrame, { ...slot('menu-dock-item'), "data-active": item.active ? 'true' : 'false', render: "button", ...{ type: 'button' }, active: item.active, onClick: item.onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), ...tip(item.label), ...touch(ITEM_SIZE, 44), children: [ink(item.icon), _jsx(SizableText, { ...slot('menu-dock-item-label'), size: "$1", style: { position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)' }, children: item.label })] })] }));
+}
+export function MenuDock({ className, items, orientation = 'horizontal', ...props }) {
+    return (_jsx(Frame, { ...slot('menu-dock'), "data-orientation": orientation, orientation: orientation, ...sx(className), ...props, children: items.map((item, index) => (_jsx(Fragment, { children: _jsx(MenuDockButton, { item: item, orientation: orientation }) }, index))) }));
+}
+//# sourceMappingURL=menu-dock.js.map

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

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

package/dist/backends/gui/menubar.cjs

@@ -0,0 +1,227 @@
+'use client';"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenubarRadioGroup = exports.MenubarSubTrigger = exports.MenubarSubContent = exports.MenubarSub = exports.MenubarPortal = exports.MenubarGroup = exports.MenubarSeparator = exports.MenubarLabel = exports.MenubarRadioItem = exports.MenubarCheckboxItem = exports.MenubarItem = exports.MenubarContent = exports.MenubarTrigger = void 0;
+exports.Menubar = Menubar;
+exports.MenubarMenu = MenubarMenu;
+exports.MenubarShortcut = MenubarShortcut;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Menubar — a persistent row of pull-down menus, the kind a desktop app keeps
+ * across the top of its window (File, Edit, View, ...).
+ *
+ * Each `MenubarMenu` is its own `@hanzo/gui` `Menu`, so a single trigger click
+ * opens a real menu with the full compound surface (items, checkbox items, a
+ * radio group, separators, a label, a submenu) and every a11y/dismiss/typeahead
+ * behaviour that `Menu` already has. What THIS file adds on top, because a row
+ * of independent menus is not yet a menubar, is the coordination between them:
+ * one open menu at a time, hovering a sibling trigger while a menu is open
+ * switches to it instead of requiring a second click, and the arrow keys rove
+ * focus across the triggers (Home/End jump to the first/last). That state lives
+ * in one root context, read by `MenubarTrigger` and `MenubarMenu` — neither
+ * hand-rolls it a second time.
+ *
+ * The rows, checkbox rows, radio rows, label, separator and submenu below are
+ * the same 32px-row, 8px-gutter, 44px-tap design as `dropdown-menu.tsx` and
+ * `context-menu.tsx` — one menu design, not three. `MenubarContent` mounts its
+ * own `Menu.Portal` and re-applies the trigger's resolved theme inside it via
+ * `PortalTheme` (gui portals re-root the subtree, so React theme context does
+ * not otherwise flow there).
+ *
+ * Cross-platform: gui style props only — no Tailwind class strings, no Radix,
+ * no DOM APIs beyond the `data-slot` markers every gui backend component uses
+ * to publish its parts for CSS and tests.
+ */
+const React = __importStar(require("react"));
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gesture_1 = require("./gesture.cjs");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
+// ── Geometry — the one menu design, restated (module-private in the siblings) ──
+const ROW_H = 32;
+const TAP_MIN = 44;
+const ROW_PX = 8;
+const MIN_W = 192;
+const INSET_PL = 32;
+const INDICATOR_SLOT = 14;
+const ICON = 16;
+const BAR_H = 40;
+const panel = {
+    bg: '$panel',
+    borderColor: '$borderColor',
+    borderWidth: 1,
+    rounded: '$4',
+    p: 4,
+    minW: MIN_W,
+    overflow: 'hidden',
+    shadowColor: 'rgba(0,0,0,0.45)',
+    shadowRadius: 20,
+    shadowOffset: { width: 0, height: 10 },
+};
+const row = {
+    items: 'center',
+    gap: ROW_PX,
+    px: ROW_PX,
+    minH: ROW_H,
+    rounded: '$3',
+    select: 'none',
+    cursor: 'pointer',
+    ...(0, gesture_1.touch)(ROW_H, TAP_MIN, 'y'),
+    hoverStyle: { bg: '$raised' },
+    focusStyle: { bg: '$raised' },
+    pressStyle: { bg: '$rim' },
+};
+/** Row text style — free-form children go through `ink()` so a bare string renders on native. */
+const label = { size: '$2', color: '$ink' };
+/** Trigger text style — same type scale, medium weight to read as a menu title. */
+const triggerLabel = { size: '$2', color: '$ink', fontWeight: '500' };
+/** Left indicator well shared by checkbox + radio rows. */
+const Indicator = ({ children }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", l: ROW_PX, width: INDICATOR_SLOT, height: INDICATOR_SLOT, items: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(gui_1.Menu.ItemIndicator, { children: children }) }));
+const MenubarContext = /* @__PURE__ */ React.createContext(null);
+/** Which menu a `MenubarMenu` is, read by its `MenubarTrigger`. */
+const MenubarMenuIdContext = /* @__PURE__ */ React.createContext(null);
+// gui puts popper geometry (`offset`, `placement`) on the `Menu` ROOT, while the
+// compound API puts `sideOffset`/`align` on `Content` — one value, one owner:
+// the root holds it, Content publishes into it via these two contexts, freshly
+// scoped per `MenubarMenu` instance. Same split as `dropdown-menu.tsx`.
+const OffsetContext = /* @__PURE__ */ React.createContext(null);
+const PlacementContext = /* @__PURE__ */ React.createContext(null);
+const DEFAULT_OFFSET = 8;
+function Menubar({ value, defaultValue, onValueChange, children, ...props }) {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const active = value !== undefined ? value : uncontrolled;
+    const setValue = React.useCallback((next) => {
+        if (value === undefined)
+            setUncontrolled(next);
+        onValueChange?.(next);
+    }, [value, onValueChange]);
+    /** Arrow/Home/End rove the triggers; a live menu follows focus onto the next one. */
+    const onKeyDown = (event) => {
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+            return;
+        const root = event.currentTarget;
+        const triggers = [...root.querySelectorAll('[data-slot="menubar-trigger"]')];
+        const at = triggers.indexOf(document.activeElement);
+        if (at === -1)
+            return;
+        event.preventDefault();
+        const next = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? triggers.length - 1
+                : event.key === 'ArrowRight'
+                    ? (at + 1) % triggers.length
+                    : (at - 1 + triggers.length) % triggers.length;
+        triggers[next]?.focus();
+        if (active !== undefined)
+            setValue(triggers[next]?.dataset.menubarValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(MenubarContext.Provider, { value: { value: active, setValue }, children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('menubar'), role: "menubar", items: "center", gap: 4, p: 4, minH: BAR_H, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$background", onKeyDown: onKeyDown, ...props, children: children }) }));
+}
+function MenubarMenu({ value, children, ...props }) {
+    const root = React.useContext(MenubarContext);
+    const auto = React.useId();
+    const id = value ?? auto;
+    const [offset, setOffset] = React.useState(DEFAULT_OFFSET);
+    const [placement, setPlacement] = React.useState(undefined);
+    return ((0, jsx_runtime_1.jsx)(MenubarMenuIdContext.Provider, { value: id, children: (0, jsx_runtime_1.jsx)(OffsetContext.Provider, { value: setOffset, children: (0, jsx_runtime_1.jsx)(PlacementContext.Provider, { value: setPlacement, children: (0, jsx_runtime_1.jsx)(gui_1.Menu, { open: root ? root.value === id : undefined, onOpenChange: (open) => root?.setValue(open ? id : undefined), offset: offset, ...(placement ? { placement } : null), ...props, children: children }) }) }) }));
+}
+const MenubarTrigger = /* @__PURE__ */ React.forwardRef(function MenubarTrigger({ children, onMouseEnter, ...props }, ref) {
+    const root = React.useContext(MenubarContext);
+    const id = React.useContext(MenubarMenuIdContext);
+    const open = root != null && id != null && root.value === id;
+    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Trigger, { ref: ref, ...(0, slot_1.slot)('menubar-trigger'), "data-menubar-value": id ?? undefined, "data-state": open ? 'open' : 'closed', tabIndex: 0, items: "center", select: "none", cursor: "pointer", px: 12, minH: ROW_H, rounded: "$3", bg: open ? '$raised' : 'transparent', hoverStyle: { bg: '$raised' }, focusStyle: { bg: '$raised' }, ...(0, gesture_1.touch)(ROW_H, TAP_MIN, 'y'), onMouseEnter: (event) => {
+            if (root?.value !== undefined && id != null)
+                root.setValue(id);
+            onMouseEnter?.(event);
+        }, ...props, children: (0, ink_1.ink)(children, undefined, triggerLabel) }));
+});
+exports.MenubarTrigger = MenubarTrigger;
+/** `align`, as the suffix of the floating-ui placement string the root's `Menu` reads. */
+const placementFor = (align) => align && align !== 'center' ? `bottom-${align}` : 'bottom';
+const MenubarContent = /* @__PURE__ */ React.forwardRef(function MenubarContent({ sideOffset = DEFAULT_OFFSET, align = 'start', children, ...props }, ref) {
+    const themeName = (0, portal_theme_1.useThemeName)();
+    const setOffset = React.useContext(OffsetContext);
+    const setPlacement = React.useContext(PlacementContext);
+    React.useEffect(() => setOffset?.(sideOffset), [setOffset, sideOffset]);
+    React.useEffect(() => setPlacement?.(placementFor(align)), [setPlacement, align]);
+    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Portal, { children: (0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Menu.Content, { ref: ref, ...(0, slot_1.slot)('menubar-content'), ...panel, ...props, children: children }) }) }));
+});
+exports.MenubarContent = MenubarContent;
+const MenubarSubContent = /* @__PURE__ */ React.forwardRef(function MenubarSubContent(props, ref) {
+    return (0, jsx_runtime_1.jsx)(gui_1.Menu.SubContent, { ref: ref, ...(0, slot_1.slot)('menubar-sub-content'), ...panel, ...props });
+});
+exports.MenubarSubContent = MenubarSubContent;
+const MenubarItem = /* @__PURE__ */ React.forwardRef(function MenubarItem({ inset, variant = 'default', disabled, children, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Item, { ref: ref, ...(0, slot_1.slot)('menubar-item'), "data-inset": inset, "data-variant": variant, disabled: disabled, ...row, pl: inset ? INSET_PL : ROW_PX, theme: variant === 'destructive' ? 'red' : undefined, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'default' : 'pointer', ...props, children: (0, ink_1.ink)(children, undefined, label) }));
+});
+exports.MenubarItem = MenubarItem;
+const MenubarCheckboxItem = /* @__PURE__ */ React.forwardRef(function MenubarCheckboxItem({ children, checked, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Menu.CheckboxItem, { ref: ref, ...(0, slot_1.slot)('menubar-checkbox-item'), checked: checked, ...row, pl: INSET_PL, ...props, children: [(0, jsx_runtime_1.jsx)(Indicator, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: ICON }) }), (0, ink_1.ink)(children, undefined, label)] }));
+});
+exports.MenubarCheckboxItem = MenubarCheckboxItem;
+const MenubarRadioItem = /* @__PURE__ */ React.forwardRef(function MenubarRadioItem({ children, value, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Menu.RadioItem, { ref: ref, ...(0, slot_1.slot)('menubar-radio-item'), value: value, ...row, pl: INSET_PL, ...props, children: [(0, jsx_runtime_1.jsx)(Indicator, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Circle, { size: 8, fill: "currentColor" }) }), (0, ink_1.ink)(children, undefined, label)] }));
+});
+exports.MenubarRadioItem = MenubarRadioItem;
+const MenubarSubTrigger = /* @__PURE__ */ React.forwardRef(function MenubarSubTrigger({ inset, children, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Menu.SubTrigger, { ref: ref, ...(0, slot_1.slot)('menubar-sub-trigger'), "data-inset": inset, ...row, pl: inset ? INSET_PL : ROW_PX, ...props, children: [(0, ink_1.ink)(children, undefined, label), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: ICON, ml: "auto", opacity: 0.6 })] }));
+});
+exports.MenubarSubTrigger = MenubarSubTrigger;
+// ── Static rows ─────────────────────────────────────────────────────────────────
+const MenubarLabel = /* @__PURE__ */ React.forwardRef(function MenubarLabel({ inset, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Label, { ref: ref, ...(0, slot_1.slot)('menubar-label'), "data-inset": inset, px: ROW_PX, py: 4, pl: inset ? INSET_PL : ROW_PX, fontSize: "$2", fontWeight: "500", color: "$ink", select: "none", ...props }));
+});
+exports.MenubarLabel = MenubarLabel;
+const MenubarSeparator = /* @__PURE__ */ React.forwardRef(function MenubarSeparator(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Separator, { ref: ref, ...(0, slot_1.slot)('menubar-separator'), height: 1, bg: "$borderColor", mx: 4, my: 4, ...props }));
+});
+exports.MenubarSeparator = MenubarSeparator;
+/** Right-aligned shortcut hint. gui `Text`, not a raw `<span>`, so it renders on native. */
+function MenubarShortcut(props) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('menubar-shortcut'), ml: "auto", fontSize: "$1", letterSpacing: 1, color: "$quiet", ...props }));
+}
+// ── Passthroughs — the gui part already IS the part ─────────────────────────────
+const MenubarGroup = gui_1.Menu.Group;
+exports.MenubarGroup = MenubarGroup;
+const MenubarPortal = gui_1.Menu.Portal;
+exports.MenubarPortal = MenubarPortal;
+const MenubarSub = gui_1.Menu.Sub;
+exports.MenubarSub = MenubarSub;
+const MenubarRadioGroup = gui_1.Menu.RadioGroup;
+exports.MenubarRadioGroup = MenubarRadioGroup;