@hanzo/ui 8.27.9 → 8.27.10

package/dist/backends/gui/animated-tooltip.cjs

@@ -0,0 +1,100 @@
+'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.AnimatedTooltip = AnimatedTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AnimatedTooltip — a floating label that fades up above whatever it wraps
+ * while the pointer or keyboard focus rests there.
+ *
+ * `content` is the label, `children` the trigger, and `delay` holds the
+ * entrance for that many milliseconds. The panel mounts only while visible, so
+ * mounting is the animation: `hz-fade-up` from `styles/motion.css` plays on
+ * every appearance, its `animation-delay` carries `delay`, and the
+ * reduced-motion guard lives in that stylesheet. It unmounts with no exit,
+ * the same trade AnimatedTestimonials makes. The keyframe owns
+ * `transform`, so the panel is centred by layout — an anchor spanning the
+ * trigger's width aligns it — never by a translate the animation would
+ * overwrite.
+ */
+const gui_1 = require("@hanzo/gui");
+const React = __importStar(require("react"));
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const Frame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'AnimatedTooltip',
+    display: 'inline-flex',
+    position: 'relative',
+});
+const Anchor = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'AnimatedTooltipAnchor',
+    position: 'absolute',
+    b: '100%',
+    l: 0,
+    r: 0,
+    mb: '$2',
+    items: 'center',
+    z: 50,
+});
+const Panel = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'AnimatedTooltipPanel',
+    position: 'relative',
+    bg: '$panel',
+    borderColor: '$borderColor',
+    borderWidth: 1,
+    rounded: '$3',
+    px: '$3',
+    py: '$1.5',
+});
+const Arrow = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'AnimatedTooltipArrow',
+    position: 'absolute',
+    t: '100%',
+    l: '50%',
+    ml: -4,
+    width: 0,
+    height: 0,
+    borderLeftWidth: 4,
+    borderRightWidth: 4,
+    borderTopWidth: 4,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: '$panel',
+});
+function AnimatedTooltip({ content, children, delay = 0, ...props }) {
+    const [isVisible, setIsVisible] = React.useState(false);
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ...(0, slot_1.slot)('animated-tooltip'), "data-state": isVisible ? 'visible' : 'hidden', onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), onFocus: () => setIsVisible(true), onBlur: () => setIsVisible(false), ...props, children: [children, isVisible && ((0, jsx_runtime_1.jsx)(Anchor, { ...(0, slot_1.slot)('animated-tooltip-anchor'), children: (0, jsx_runtime_1.jsxs)(Panel, { ...(0, slot_1.slot)('animated-tooltip-panel'), role: "tooltip", className: "hz-fade-up", style: { animationDelay: `${delay}ms` }, children: [(0, ink_1.ink)(content, undefined, { size: '$1', whiteSpace: 'nowrap' }), (0, jsx_runtime_1.jsx)(Arrow, { ...(0, slot_1.slot)('animated-tooltip-arrow') })] }) }))] }));
+}

package/dist/backends/gui/animated-tooltip.d.ts

@@ -0,0 +1,15 @@
+import * as React 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 AnimatedTooltipProps = Omit<React.ComponentProps<typeof Frame>, 'content'> & {
+    /** What the floating panel shows. */
+    content: React.ReactNode;
+    children: React.ReactNode;
+    /** Milliseconds to hold before the entrance animation starts. */
+    delay?: number;
+};
+export declare function AnimatedTooltip({ content, children, delay, ...props }: AnimatedTooltipProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=animated-tooltip.d.ts.map

package/dist/backends/gui/animated-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-tooltip.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/animated-tooltip.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,KAAK;;;8CAIT,CAAA;AAwCF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG;IACvF,qCAAqC;IACrC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,qBA6BtB"}

package/dist/backends/gui/animated-tooltip.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AnimatedTooltip — a floating label that fades up above whatever it wraps
+ * while the pointer or keyboard focus rests there.
+ *
+ * `content` is the label, `children` the trigger, and `delay` holds the
+ * entrance for that many milliseconds. The panel mounts only while visible, so
+ * mounting is the animation: `hz-fade-up` from `styles/motion.css` plays on
+ * every appearance, its `animation-delay` carries `delay`, and the
+ * reduced-motion guard lives in that stylesheet. It unmounts with no exit,
+ * the same trade AnimatedTestimonials makes. The keyframe owns
+ * `transform`, so the panel is centred by layout — an anchor spanning the
+ * trigger's width aligns it — never by a translate the animation would
+ * overwrite.
+ */
+import { XStack, YStack, styled } from '@hanzo/gui';
+import * as React from 'react';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+const Frame = styled(XStack, {
+    name: 'AnimatedTooltip',
+    display: 'inline-flex',
+    position: 'relative',
+});
+const Anchor = styled(YStack, {
+    name: 'AnimatedTooltipAnchor',
+    position: 'absolute',
+    b: '100%',
+    l: 0,
+    r: 0,
+    mb: '$2',
+    items: 'center',
+    z: 50,
+});
+const Panel = styled(YStack, {
+    name: 'AnimatedTooltipPanel',
+    position: 'relative',
+    bg: '$panel',
+    borderColor: '$borderColor',
+    borderWidth: 1,
+    rounded: '$3',
+    px: '$3',
+    py: '$1.5',
+});
+const Arrow = styled(YStack, {
+    name: 'AnimatedTooltipArrow',
+    position: 'absolute',
+    t: '100%',
+    l: '50%',
+    ml: -4,
+    width: 0,
+    height: 0,
+    borderLeftWidth: 4,
+    borderRightWidth: 4,
+    borderTopWidth: 4,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: '$panel',
+});
+export function AnimatedTooltip({ content, children, delay = 0, ...props }) {
+    const [isVisible, setIsVisible] = React.useState(false);
+    return (_jsxs(Frame, { ...slot('animated-tooltip'), "data-state": isVisible ? 'visible' : 'hidden', onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), onFocus: () => setIsVisible(true), onBlur: () => setIsVisible(false), ...props, children: [children, isVisible && (_jsx(Anchor, { ...slot('animated-tooltip-anchor'), children: _jsxs(Panel, { ...slot('animated-tooltip-panel'), role: "tooltip", className: "hz-fade-up", style: { animationDelay: `${delay}ms` }, children: [ink(content, undefined, { size: '$1', whiteSpace: 'nowrap' }), _jsx(Arrow, { ...slot('animated-tooltip-arrow') })] }) }))] }));
+}
+//# sourceMappingURL=animated-tooltip.js.map

package/dist/backends/gui/animated-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-tooltip.js","sourceRoot":"","sources":["../../../src/backends/gui/animated-tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE;IAC5B,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE,UAAU;IACpB,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,QAAQ;IACf,CAAC,EAAE,EAAE;CACN,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,sBAAsB;IAC5B,QAAQ,EAAE,UAAU;IACpB,EAAE,EAAE,QAAQ;IACZ,WAAW,EAAE,cAAc;IAC3B,WAAW,EAAE,CAAC;IACd,OAAO,EAAE,IAAI;IACb,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,MAAM;CACX,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,sBAAsB;IAC5B,QAAQ,EAAE,UAAU;IACpB,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,KAAK;IACR,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,eAAe,EAAE,CAAC;IAClB,gBAAgB,EAAE,CAAC;IACnB,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,aAAa;IAC9B,gBAAgB,EAAE,aAAa;IAC/B,cAAc,EAAE,QAAQ;CACzB,CAAC,CAAA;AAUF,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACa;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvD,OAAO,CACL,MAAC,KAAK,OACA,IAAI,CAAC,kBAAkB,CAAC,gBAChB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAC5C,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,KAC7B,KAAK,aAER,QAAQ,EACR,SAAS,IAAI,CACZ,KAAC,MAAM,OAAK,IAAI,CAAC,yBAAyB,CAAC,YACzC,MAAC,KAAK,OACA,IAAI,CAAC,wBAAwB,CAAC,EAClC,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,KAAK,IAAI,EAAE,aAEtC,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,EAC9D,KAAC,KAAK,OAAK,IAAI,CAAC,wBAAwB,CAAC,GAAI,IACvC,GACD,CACV,IACK,CACT,CAAA;AACH,CAAC"}

package/dist/backends/gui/announcement.cjs

@@ -0,0 +1,54 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Announcement = Announcement;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Announcement — an inline strip for a short message, with an optional dismiss
+ * button. Unlike Banner (an edge-anchored, role="alert" strip with a variant
+ * ladder), an Announcement is a bordered box that sits wherever it is placed,
+ * holds its own dismissed/visible state, and calls `onDismiss` once when the
+ * close button is pressed.
+ *
+ * Surface and message share no variant — there is only one look — so this is a
+ * styled frame and a styled text host. The message renders straight into that
+ * host, the way Banner's does: a Text host already gives a string somewhere to
+ * live on native, and a second one per string would carry its own type scale
+ * over the host's.
+ */
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const slot_1 = require("./slot.cjs");
+const gesture_1 = require("./gesture.cjs");
+const button_1 = require("./button.cjs");
+const CLOSE = 24;
+const AnnouncementFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'Announcement',
+    position: 'relative',
+    items: 'center',
+    gap: '$4',
+    rounded: '$3',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    bg: '$background',
+    px: '$4',
+    py: '$3',
+});
+const AnnouncementText = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'AnnouncementText',
+    render: 'div',
+    flex: 1,
+    size: '$2',
+    color: '$ink',
+});
+function Announcement({ children, dismissible = true, onDismiss, ...props }) {
+    const [visible, setVisible] = (0, react_1.useState)(true);
+    if (!visible)
+        return null;
+    const dismiss = () => {
+        setVisible(false);
+        onDismiss?.();
+    };
+    return ((0, jsx_runtime_1.jsxs)(AnnouncementFrame, { ...(0, slot_1.slot)('announcement'), ...props, children: [(0, jsx_runtime_1.jsx)(AnnouncementText, { ...(0, slot_1.slot)('announcement-message'), children: children }), dismissible ? ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('announcement-dismiss'), variant: "ghost", size: "icon", minH: CLOSE, minW: CLOSE, ...(0, gesture_1.touch)(CLOSE), "aria-label": "Dismiss", onPress: dismiss, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })) : null] }));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Announcement — an inline strip for a short message, with an optional dismiss
+ * button. Unlike Banner (an edge-anchored, role="alert" strip with a variant
+ * ladder), an Announcement is a bordered box that sits wherever it is placed,
+ * holds its own dismissed/visible state, and calls `onDismiss` once when the
+ * close button is pressed.
+ *
+ * Surface and message share no variant — there is only one look — so this is a
+ * styled frame and a styled text host. The message renders straight into that
+ * host, the way Banner's does: a Text host already gives a string somewhere to
+ * live on native, and a second one per string would carry its own type scale
+ * over the host's.
+ */
+import { type ComponentProps, type ReactNode } from 'react';
+declare const AnnouncementFrame: 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 AnnouncementProps = Omit<ComponentProps<typeof AnnouncementFrame>, 'children'> & {
+    children: ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+};
+export declare function Announcement({ children, dismissible, onDismiss, ...props }: AnnouncementProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=announcement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"announcement.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/announcement.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AASrE,QAAA,MAAM,iBAAiB;;;8CAWrB,CAAA;AAUF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3F,QAAQ,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,sCA4BnB"}

package/dist/backends/gui/announcement.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Announcement — an inline strip for a short message, with an optional dismiss
+ * button. Unlike Banner (an edge-anchored, role="alert" strip with a variant
+ * ladder), an Announcement is a bordered box that sits wherever it is placed,
+ * holds its own dismissed/visible state, and calls `onDismiss` once when the
+ * close button is pressed.
+ *
+ * Surface and message share no variant — there is only one look — so this is a
+ * styled frame and a styled text host. The message renders straight into that
+ * host, the way Banner's does: a Text host already gives a string somewhere to
+ * live on native, and a second one per string would carry its own type scale
+ * over the host's.
+ */
+import { useState } from 'react';
+import { SizableText, XStack, styled } from '@hanzo/gui';
+import { X } from '@hanzogui/lucide-icons-2';
+import { slot } from './slot.js';
+import { touch } from './gesture.js';
+import { Button } from './button.js';
+const CLOSE = 24;
+const AnnouncementFrame = styled(XStack, {
+    name: 'Announcement',
+    position: 'relative',
+    items: 'center',
+    gap: '$4',
+    rounded: '$3',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    bg: '$background',
+    px: '$4',
+    py: '$3',
+});
+const AnnouncementText = styled(SizableText, {
+    name: 'AnnouncementText',
+    render: 'div',
+    flex: 1,
+    size: '$2',
+    color: '$ink',
+});
+export function Announcement({ children, dismissible = true, onDismiss, ...props }) {
+    const [visible, setVisible] = useState(true);
+    if (!visible)
+        return null;
+    const dismiss = () => {
+        setVisible(false);
+        onDismiss?.();
+    };
+    return (_jsxs(AnnouncementFrame, { ...slot('announcement'), ...props, children: [_jsx(AnnouncementText, { ...slot('announcement-message'), children: children }), dismissible ? (_jsx(Button, { ...slot('announcement-dismiss'), variant: "ghost", size: "icon", minH: CLOSE, minW: CLOSE, ...touch(CLOSE), "aria-label": "Dismiss", onPress: dismiss, children: _jsx(X, { size: 16 }) })) : null] }));
+}
+//# sourceMappingURL=announcement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"announcement.js","sourceRoot":"","sources":["../../../src/backends/gui/announcement.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,EAAE,CAAC,EAAE,MAAM,0BAA0B,CAAA;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,MAAM,KAAK,GAAG,EAAE,CAAA;AAEhB,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE;IACvC,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,QAAQ;IACf,GAAG,EAAE,IAAI;IACT,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACT,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,WAAW,EAAE;IAC3C,IAAI,EAAE,kBAAkB;IACxB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,CAAC;IACP,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,MAAM;CACd,CAAC,CAAA;AAQF,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,GAAG,KAAK,EACU;IAClB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC5C,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzB,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,UAAU,CAAC,KAAK,CAAC,CAAA;QACjB,SAAS,EAAE,EAAE,CAAA;IACf,CAAC,CAAA;IAED,OAAO,CACL,MAAC,iBAAiB,OAAK,IAAI,CAAC,cAAc,CAAC,KAAM,KAAK,aACpD,KAAC,gBAAgB,OAAK,IAAI,CAAC,sBAAsB,CAAC,YAAG,QAAQ,GAAoB,EAChF,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,MAAM,OACD,IAAI,CAAC,sBAAsB,CAAC,EAChC,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,KAAK,KACP,KAAK,CAAC,KAAK,CAAC,gBACL,SAAS,EACpB,OAAO,EAAE,OAAO,YAEhB,KAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,GACR,CACV,CAAC,CAAC,CAAC,IAAI,IACU,CACrB,CAAA;AACH,CAAC"}

package/dist/backends/gui/apple-cards-carousel.cjs

@@ -0,0 +1,198 @@
+'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.gradientPresets = void 0;
+exports.AppleCardsCarousel = AppleCardsCarousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AppleCardsCarousel — a stack of full-bleed cards with one in front and the
+ * next two peeking out behind it, each a step smaller and further to the side,
+ * the way App Store "Today" cards fan out.
+ *
+ * A pointer drag on the front card carries it sideways and slides its
+ * background image the other way for depth; releasing past `swipeThreshold`,
+ * or with a quick flick, commits to the neighbour and the stack springs into
+ * its new order. A press that begins on a control inside the card belongs to
+ * the control, not to a drag. Arrow keys while the region has focus, the arrow
+ * buttons, the dots and an optional auto-play (held while the pointer is over
+ * the region, and never started under a reduced-motion preference) all move
+ * the same index. Cards more than two steps from the front are not drawn.
+ *
+ * Motion is CSS transform + transition on the card, switched off for the
+ * duration of a drag so the card tracks the pointer without lag, and off
+ * altogether under a reduced-motion preference.
+ */
+const React = __importStar(require("react"));
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const glass_1 = require("../../glass.cjs");
+const sx_1 = require("../../sx.cjs");
+const gesture_1 = require("./gesture.cjs");
+const SPRING = 'transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease';
+/** px/ms — a flick commits regardless of distance. */
+const FLICK = 0.5;
+/** Two pointer samples closer than half a frame say nothing about speed. */
+const FRAME = 8;
+/** A pointer that has been still this long before release is not flicking. */
+const STALE = 100;
+const ARROW = 36;
+/** What a press inside a card must not turn into a drag. */
+const CONTROL = 'a,button,input,select,textarea';
+const WHITE = (a) => `rgba(255,255,255,${a})`;
+/** Position, scale, opacity and stacking order for the card `offset` slots from the front. */
+const layerAt = (offset, cardCount, stackOffset, stackScale) => {
+    const abs = Math.abs(offset);
+    if (abs > 2)
+        return { visible: false, x: 0, scale: 1, opacity: 0, zIndex: 0 };
+    return {
+        visible: true,
+        x: offset * stackOffset,
+        scale: Math.pow(stackScale, abs),
+        opacity: Math.max(0, 1 - abs * 0.3),
+        zIndex: cardCount - abs,
+    };
+};
+const still = () => typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+function AppleCardsCarousel({ cards, autoPlay = false, autoPlayInterval = 5000, className, cardClassName, showArrows = true, showDots = true, parallaxOffset = 50, stackOffset = 10, stackScale = 0.95, swipeThreshold = 50, }) {
+    const [index, setIndex] = React.useState(0);
+    const [hovering, setHovering] = React.useState(false);
+    const [dragX, setDragX] = React.useState(0);
+    const [dragging, setDragging] = React.useState(false);
+    /**
+     * The drag in flight — pointer origin, offset so far, and the sample its
+     * velocity is measured from — or null between drags. `pointermove` fires for
+     * a pointer that is merely passing over the card, so null is what keeps a
+     * hover from moving it.
+     */
+    const track = React.useRef(null);
+    /** The reduced-motion preference, read once mounted so the server and the client agree. */
+    const [calm, setCalm] = React.useState(false);
+    React.useEffect(() => setCalm(still()), []);
+    const count = cards.length;
+    const step = React.useCallback((by) => setIndex((i) => (count ? (i + by + count) % count : 0)), [count]);
+    const goNext = React.useCallback(() => step(1), [step]);
+    const goPrevious = React.useCallback(() => step(-1), [step]);
+    React.useEffect(() => {
+        if (!autoPlay || hovering || count < 2 || calm)
+            return;
+        const t = setInterval(goNext, autoPlayInterval);
+        return () => clearInterval(t);
+    }, [autoPlay, hovering, autoPlayInterval, goNext, count, calm]);
+    const onKeyDown = React.useCallback((e) => {
+        if (e.key === 'ArrowLeft')
+            goPrevious();
+        else if (e.key === 'ArrowRight')
+            goNext();
+    }, [goNext, goPrevious]);
+    const begin = React.useCallback((e) => {
+        // The pointer capture `drag()` took would retarget the control's click to
+        // the card, so the capture goes back and the drag never arms.
+        const on = e.target;
+        if (on?.closest?.(CONTROL)) {
+            const card = e.currentTarget;
+            if (e.pointerId != null)
+                card?.releasePointerCapture?.(e.pointerId);
+            return;
+        }
+        track.current = { origin: (0, gesture_1.dragPos)(e, true), x: 0, v: 0, sample: { x: 0, t: Date.now() } };
+        setDragging(true);
+    }, []);
+    const move = React.useCallback((e) => {
+        const k = track.current;
+        if (!k)
+            return;
+        k.x = (0, gesture_1.dragPos)(e, true) - k.origin;
+        const t = Date.now();
+        const dt = t - k.sample.t;
+        if (dt >= FRAME) {
+            k.v = (k.x - k.sample.x) / dt;
+            k.sample = { x: k.x, t };
+        }
+        setDragX(k.x);
+    }, []);
+    const end = React.useCallback(() => {
+        const k = track.current;
+        if (!k)
+            return;
+        track.current = null;
+        const { x, v, sample } = k;
+        const flick = Date.now() - sample.t <= STALE && Math.abs(v) > FLICK;
+        if (Math.abs(x) > swipeThreshold || flick)
+            step(x > 0 ? -1 : 1);
+        setDragging(false);
+        setDragX(0);
+    }, [step, swipeThreshold]);
+    const gesture = (0, gesture_1.drag)({ begin, move, end, enabled: count > 1 });
+    const settle = dragging || calm ? 'none' : SPRING;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { "data-slot": "apple-carousel", role: "region", "aria-roledescription": "carousel", "aria-label": "Cards", position: "relative", width: "100%", maxW: 1152, mx: "auto", px: "$4", py: "$6", tabIndex: 0, onKeyDown: onKeyDown, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), ...(0, sx_1.sx)(className), children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "relative", width: "100%", height: 400, $md: { height: 500 }, $lg: { height: 600 }, items: "center", justify: "center", children: cards.map((card, i) => {
+                    const layer = layerAt(i - index, count, stackOffset, stackScale);
+                    const active = i === index;
+                    const x = layer.x + (active ? dragX : 0);
+                    const parallax = active
+                        ? Math.max(-parallaxOffset, Math.min(parallaxOffset, (-dragX / 200) * parallaxOffset))
+                        : 0;
+                    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { "data-slot": "apple-carousel-card", "data-active": active || undefined, role: "group", "aria-roledescription": "slide", "aria-label": `${i + 1} of ${count}`, "aria-hidden": !active || undefined, position: "absolute", inset: 0, pointerEvents: active ? 'auto' : 'none', display: layer.visible ? 'flex' : 'none', cursor: active ? (dragging ? 'grabbing' : 'grab') : undefined, style: {
+                            transform: `translateX(${x}px) scale(${layer.scale})`,
+                            opacity: layer.opacity,
+                            zIndex: layer.zIndex,
+                            transition: settle,
+                            // A sideways swipe is the card's; the page keeps vertical
+                            // scroll. Without this a touch browser takes the pan as a
+                            // scroll and cancels the pointer before the threshold.
+                            touchAction: 'pan-y',
+                            userSelect: 'none',
+                        }, ...(active ? gesture : null), children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { position: "relative", width: "100%", height: "100%", overflow: "hidden", rounded: "$6", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", shadowColor: "rgba(0,0,0,0.25)", shadowOffset: { width: 0, height: 25 }, shadowRadius: 50, style: { background: card.gradient }, ...(0, sx_1.sx)(cardClassName), children: [card.image ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { position: "absolute", inset: 0, style: {
+                                        transform: `translateX(${parallax}px)`,
+                                        transition: dragging || calm ? 'none' : 'transform .2s ease',
+                                    }, children: [(0, jsx_runtime_1.jsx)(gui_1.Image, { src: card.image, alt: card.title, width: "100%", height: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { position: "absolute", inset: 0, style: { background: 'linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.2), transparent)' } })] })) : null, (0, jsx_runtime_1.jsx)(gui_1.YStack, { position: "relative", justify: "flex-end", height: "100%", p: "$6", $md: { p: '$8' }, gap: "$2", children: card.content ?? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$9", fontWeight: "700", color: "white", children: card.title }), card.subtitle ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$6", color: WHITE(0.8), children: card.subtitle })) : null, card.description ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$4", color: WHITE(0.7), maxW: 640, children: card.description })) : null] })) })] }) }, card.id));
+                }) }), showArrows
+                ? [
+                    ['previous', 'Previous card', goPrevious, lucide_icons_2_1.ChevronLeft, { left: 16 }],
+                    ['next', 'Next card', goNext, lucide_icons_2_1.ChevronRight, { right: 16 }],
+                ].map(([name, label, go, Chevron, side]) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": `apple-carousel-${name}`, render: (0, jsx_runtime_1.jsx)("button", { type: "button" }), "aria-label": label, position: "absolute", display: "none", $md: { display: 'flex' }, style: { top: '50%', transform: 'translateY(-50%)', zIndex: 20, ...side }, items: "center", justify: "center", width: ARROW, height: ARROW, rounded: 999, ...(0, glass_1.glass)(2), bg: WHITE(0.1), hoverStyle: { bg: WHITE(0.2) }, borderWidth: 1, borderColor: WHITE(0.2), cursor: "pointer", ...(0, gesture_1.touch)(ARROW, 44), onClick: go, children: (0, jsx_runtime_1.jsx)(Chevron, { size: 20, color: "white" }) }, name)))
+                : null, showDots ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", style: { bottom: 16, left: '50%', transform: 'translateX(-50%)', zIndex: 20 }, gap: "$2", children: cards.map((card, i) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "apple-carousel-dot", render: (0, jsx_runtime_1.jsx)("button", { type: "button" }), "aria-label": `Go to card ${i + 1}`, "aria-current": i === index || undefined, "data-active": i === index || undefined, height: 8, width: i === index ? 32 : 8, rounded: 999, bg: i === index ? 'white' : WHITE(0.4), hoverStyle: { bg: i === index ? 'white' : WHITE(0.6) }, cursor: "pointer", style: { transition: 'width .3s ease, background-color .3s ease' }, ...(0, gesture_1.touch)(8, 44, 'y'), onClick: () => setIndex(i) }, card.id))) })) : null] }));
+}
+/** Pre-built CSS gradients for cards that skip `image`. */
+exports.gradientPresets = {
+    sunset: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    ocean: 'linear-gradient(135deg, #667eea 0%, #4ca1af 100%)',
+    fire: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+    forest: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+    galaxy: 'linear-gradient(135deg, #7303c0 0%, #ec38bc 50%, #fdeff9 100%)',
+    aurora: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)',
+    peach: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
+    lavender: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
+};

package/dist/backends/gui/apple-cards-carousel.d.ts

@@ -0,0 +1,45 @@
+/**
+ * AppleCardsCarousel — a stack of full-bleed cards with one in front and the
+ * next two peeking out behind it, each a step smaller and further to the side,
+ * the way App Store "Today" cards fan out.
+ *
+ * A pointer drag on the front card carries it sideways and slides its
+ * background image the other way for depth; releasing past `swipeThreshold`,
+ * or with a quick flick, commits to the neighbour and the stack springs into
+ * its new order. A press that begins on a control inside the card belongs to
+ * the control, not to a drag. Arrow keys while the region has focus, the arrow
+ * buttons, the dots and an optional auto-play (held while the pointer is over
+ * the region, and never started under a reduced-motion preference) all move
+ * the same index. Cards more than two steps from the front are not drawn.
+ *
+ * Motion is CSS transform + transition on the card, switched off for the
+ * duration of a drag so the card tracks the pointer without lag, and off
+ * altogether under a reduced-motion preference.
+ */
+import * as React from 'react';
+export type CarouselCard = {
+    id: string;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    image?: string;
+    gradient?: string;
+    content?: React.ReactNode;
+};
+export type AppleCardsCarouselProps = {
+    cards: CarouselCard[];
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    className?: string;
+    cardClassName?: string;
+    showArrows?: boolean;
+    showDots?: boolean;
+    parallaxOffset?: number;
+    stackOffset?: number;
+    stackScale?: number;
+    swipeThreshold?: number;
+};
+export declare function AppleCardsCarousel({ cards, autoPlay, autoPlayInterval, className, cardClassName, showArrows, showDots, parallaxOffset, stackOffset, stackScale, swipeThreshold, }: AppleCardsCarouselProps): React.JSX.Element;
+/** Pre-built CSS gradients for cards that skip `image`. */
+export declare const gradientPresets: Record<'sunset' | 'ocean' | 'fire' | 'forest' | 'galaxy' | 'aurora' | 'peach' | 'lavender', string>;
+//# sourceMappingURL=apple-cards-carousel.d.ts.map

package/dist/backends/gui/apple-cards-carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apple-cards-carousel.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/apple-cards-carousel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAgCD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAgB,EAChB,gBAAuB,EACvB,SAAS,EACT,aAAa,EACb,UAAiB,EACjB,QAAe,EACf,cAAmB,EACnB,WAAgB,EAChB,UAAiB,EACjB,cAAmB,GACpB,EAAE,uBAAuB,qBAyQzB;AAED,2DAA2D;AAC3D,eAAO,MAAM,eAAe,EAAE,MAAM,CAClC,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,EACnF,MAAM,CAUP,CAAA"}