@hanzo/ui 8.27.9 → 8.27.11

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

@@ -0,0 +1,162 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "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.
+ */
+import * as React from 'react';
+import { Image, SizableText, XStack, YStack } from '@hanzo/gui';
+import { ChevronLeft, ChevronRight } from '@hanzogui/lucide-icons-2';
+import { glass } from '../../glass.js';
+import { sx } from '../../sx.js';
+import { drag, dragPos, touch } from './gesture.js';
+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;
+export 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: 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 = 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 = drag({ begin, move, end, enabled: count > 1 });
+    const settle = dragging || calm ? 'none' : SPRING;
+    return (_jsxs(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), ...sx(className), children: [_jsx(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 (_jsx(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: _jsxs(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 }, ...sx(cardClassName), children: [card.image ? (_jsxs(YStack, { position: "absolute", inset: 0, style: {
+                                        transform: `translateX(${parallax}px)`,
+                                        transition: dragging || calm ? 'none' : 'transform .2s ease',
+                                    }, children: [_jsx(Image, { src: card.image, alt: card.title, width: "100%", height: "100%", objectFit: "cover" }), _jsx(YStack, { position: "absolute", inset: 0, style: { background: 'linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.2), transparent)' } })] })) : null, _jsx(YStack, { position: "relative", justify: "flex-end", height: "100%", p: "$6", $md: { p: '$8' }, gap: "$2", children: card.content ?? (_jsxs(_Fragment, { children: [_jsx(SizableText, { size: "$9", fontWeight: "700", color: "white", children: card.title }), card.subtitle ? (_jsx(SizableText, { size: "$6", color: WHITE(0.8), children: card.subtitle })) : null, card.description ? (_jsx(SizableText, { size: "$4", color: WHITE(0.7), maxW: 640, children: card.description })) : null] })) })] }) }, card.id));
+                }) }), showArrows
+                ? [
+                    ['previous', 'Previous card', goPrevious, ChevronLeft, { left: 16 }],
+                    ['next', 'Next card', goNext, ChevronRight, { right: 16 }],
+                ].map(([name, label, go, Chevron, side]) => (_jsx(XStack, { "data-slot": `apple-carousel-${name}`, render: _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, ...glass(2), bg: WHITE(0.1), hoverStyle: { bg: WHITE(0.2) }, borderWidth: 1, borderColor: WHITE(0.2), cursor: "pointer", ...touch(ARROW, 44), onClick: go, children: _jsx(Chevron, { size: 20, color: "white" }) }, name)))
+                : null, showDots ? (_jsx(XStack, { position: "absolute", style: { bottom: 16, left: '50%', transform: 'translateX(-50%)', zIndex: 20 }, gap: "$2", children: cards.map((card, i) => (_jsx(XStack, { "data-slot": "apple-carousel-dot", render: _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' }, ...touch(8, 44, 'y'), onClick: () => setIndex(i) }, card.id))) })) : null] }));
+}
+/** Pre-built CSS gradients for cards that skip `image`. */
+export const 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%)',
+};
+//# sourceMappingURL=apple-cards-carousel.js.map

package/dist/backends/gui/apple-cards-carousel.js.map

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

package/dist/backends/gui/apple-hello-effect.cjs

@@ -0,0 +1,38 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppleHelloEffect = AppleHelloEffect;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AppleHelloEffect — a string that reveals itself one letter at a time. Each
+ * letter fades in while rising fifty pixels into place, and the letters start
+ * a tenth of a second apart, the way Apple's "Hello" splash plays.
+ *
+ * `text` is the string and `duration` the seconds each letter's own rise
+ * takes; the stagger rides on each letter as `animationDelay`. The keyframe
+ * rides along as a hoisted `<style>` keyed by `href`, so any number of these
+ * on a page emit it once, and under `prefers-reduced-motion` the letters stand
+ * whole and still.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const KEYFRAMES = `
+@keyframes hello-rise { from { opacity: 0; transform: translateY(50px) } to { opacity: 1; transform: none } }
+[data-slot="apple-hello-effect-letter"] { animation-name: hello-rise; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-fill-mode: both; will-change: transform, opacity }
+@media (prefers-reduced-motion: reduce) { [data-slot="apple-hello-effect-letter"] { animation: none !important } }
+`;
+const Frame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'AppleHelloEffect',
+    position: 'relative',
+    items: 'center',
+    justify: 'center',
+});
+const Letter = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'AppleHelloEffectLetter',
+    fontSize: 60,
+    lineHeight: 60,
+    fontWeight: '700',
+});
+function AppleHelloEffect({ text = 'Hello', duration = 2, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ...(0, slot_1.slot)('apple-hello-effect'), ...props, children: [(0, jsx_runtime_1.jsx)("style", { href: "apple-hello-effect", precedence: "default", children: KEYFRAMES }), [...text].map((letter, index) => ((0, jsx_runtime_1.jsx)(Letter, { ...(0, slot_1.slot)('apple-hello-effect-letter'), style: { animationDuration: `${duration}s`, animationDelay: `${index / 10}s` }, children: letter === ' ' ? '\u00A0' : letter }, index)))] }));
+}

package/dist/backends/gui/apple-hello-effect.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type AppleHelloEffectProps = React.ComponentProps<'div'> & {
+    /** The string to reveal, one letter at a time. */
+    text?: string;
+    /** Seconds each letter's own rise takes. */
+    duration?: number;
+};
+export declare function AppleHelloEffect({ text, duration, ...props }: AppleHelloEffectProps): React.JSX.Element;
+//# sourceMappingURL=apple-hello-effect.d.ts.map

package/dist/backends/gui/apple-hello-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apple-hello-effect.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/apple-hello-effect.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAc,EACd,QAAY,EACZ,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAiBvB"}

package/dist/backends/gui/apple-hello-effect.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AppleHelloEffect — a string that reveals itself one letter at a time. Each
+ * letter fades in while rising fifty pixels into place, and the letters start
+ * a tenth of a second apart, the way Apple's "Hello" splash plays.
+ *
+ * `text` is the string and `duration` the seconds each letter's own rise
+ * takes; the stagger rides on each letter as `animationDelay`. The keyframe
+ * rides along as a hoisted `<style>` keyed by `href`, so any number of these
+ * on a page emit it once, and under `prefers-reduced-motion` the letters stand
+ * whole and still.
+ */
+import { SizableText, XStack, styled } from '@hanzo/gui';
+import { slot } from './slot.js';
+const KEYFRAMES = `
+@keyframes hello-rise { from { opacity: 0; transform: translateY(50px) } to { opacity: 1; transform: none } }
+[data-slot="apple-hello-effect-letter"] { animation-name: hello-rise; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-fill-mode: both; will-change: transform, opacity }
+@media (prefers-reduced-motion: reduce) { [data-slot="apple-hello-effect-letter"] { animation: none !important } }
+`;
+const Frame = styled(XStack, {
+    name: 'AppleHelloEffect',
+    position: 'relative',
+    items: 'center',
+    justify: 'center',
+});
+const Letter = styled(SizableText, {
+    name: 'AppleHelloEffectLetter',
+    fontSize: 60,
+    lineHeight: 60,
+    fontWeight: '700',
+});
+export function AppleHelloEffect({ text = 'Hello', duration = 2, ...props }) {
+    return (_jsxs(Frame, { ...slot('apple-hello-effect'), ...props, children: [_jsx("style", { href: "apple-hello-effect", precedence: "default", children: KEYFRAMES }), [...text].map((letter, index) => (_jsx(Letter, { ...slot('apple-hello-effect-letter'), style: { animationDuration: `${duration}s`, animationDelay: `${index / 10}s` }, children: letter === ' ' ? '\u00A0' : letter }, index)))] }));
+}
+//# sourceMappingURL=apple-hello-effect.js.map

package/dist/backends/gui/apple-hello-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apple-hello-effect.js","sourceRoot":"","sources":["../../../src/backends/gui/apple-hello-effect.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,SAAS,GAAG;;;;CAIjB,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,kBAAkB;IACxB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;CAClB,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;IACjC,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,KAAK;CAClB,CAAC,CAAA;AASF,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,GAAG,OAAO,EACd,QAAQ,GAAG,CAAC,EACZ,GAAG,KAAK,EACc;IACtB,OAAO,CACL,MAAC,KAAK,OAAK,IAAI,CAAC,oBAAoB,CAAC,KAAO,KAA4C,aACtF,gBAAO,IAAI,EAAC,oBAAoB,EAAC,UAAU,EAAC,SAAS,YAClD,SAAS,GACJ,EACP,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,MAAM,OAED,IAAI,CAAC,2BAA2B,CAAC,EACrC,KAAK,EAAE,EAAE,iBAAiB,EAAE,GAAG,QAAQ,GAAG,EAAE,cAAc,EAAE,GAAG,KAAK,GAAG,EAAE,GAAG,EAAE,YAE7E,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,IAJ9B,KAAK,CAKH,CACV,CAAC,IACI,CACT,CAAA;AACH,CAAC"}

package/dist/backends/gui/banner.cjs

@@ -0,0 +1,108 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Banner = Banner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Banner — a full-width strip anchored to an edge of its container: a leading
+ * icon, a message, and an optional close button, in one of five variants
+ * (`default`, `info`, `success`, `warning`, `error`).
+ *
+ * The icon is the first child when that child is not itself a string, the same
+ * convention `Alert` uses — it sits absolutely at the left edge and the message
+ * column indents to clear it. Surface, icon and text are three styled parts
+ * sharing one `variant` through a styled context, so a variant reaches all
+ * three without any part reading it twice by hand.
+ *
+ * `onClose` only reports that the close button was pressed. A Banner carries no
+ * visibility state of its own; whether the strip stays mounted is the caller's
+ * decision.
+ *
+ * Message and icon paint from the hue's text rungs — step 12 for the message,
+ * step 11 for the icon — because step 9 is a fill: on the light theme it reads
+ * at 1.2:1 for yellow and about 3:1 for blue and green over the step-2 ground.
+ */
+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 ICON = 16;
+const ICON_GUTTER = 28;
+const CLOSE = 24;
+const BannerContext = /* @__PURE__ */ (0, gui_1.createStyledContext)({
+    variant: 'default',
+});
+const BannerFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Banner',
+    context: BannerContext,
+    position: 'relative',
+    width: '100%',
+    borderBottomWidth: 1,
+    borderColor: '$borderColor',
+    bg: '$background',
+    px: '$4',
+    py: '$3',
+    variants: {
+        variant: {
+            default: {},
+            info: { borderColor: '$blue9', bg: '$blue2' },
+            success: { borderColor: '$green9', bg: '$green2' },
+            warning: { borderColor: '$yellow9', bg: '$yellow2' },
+            error: { borderColor: '$red9', bg: '$red2' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const BannerText = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'BannerText',
+    context: BannerContext,
+    render: 'div',
+    size: '$2',
+    color: '$ink',
+    variants: {
+        variant: {
+            default: {},
+            info: { color: '$blue12' },
+            success: { color: '$green12' },
+            warning: { color: '$yellow12' },
+            error: { color: '$red12' },
+        },
+    },
+});
+// A Text host because a View takes no `color`, and an svg child paints in
+// `currentColor`.
+const IconSlot = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'BannerIcon',
+    context: BannerContext,
+    display: 'flex',
+    position: 'absolute',
+    t: '$3',
+    l: '$4',
+    width: ICON,
+    height: ICON,
+    items: 'center',
+    justify: 'center',
+    color: '$ink',
+    variants: {
+        variant: {
+            default: {},
+            info: { color: '$blue11' },
+            success: { color: '$green11' },
+            warning: { color: '$yellow11' },
+            error: { color: '$red11' },
+        },
+    },
+});
+function Banner({ variant = 'default', onClose, children, ...props }) {
+    const resolved = variant ?? 'default';
+    const items = react_1.Children.toArray(children);
+    const head = items[0];
+    const icon = (0, react_1.isValidElement)(head) ? head : null;
+    const body = icon ? items.slice(1) : items;
+    return ((0, jsx_runtime_1.jsxs)(BannerFrame, { role: "alert", variant: resolved, ...(0, slot_1.slot)('banner'), "data-variant": resolved, ...props, children: [icon ? ((0, jsx_runtime_1.jsx)(IconSlot, { ...(0, slot_1.slot)('banner-icon'), children: icon })) : null, (0, jsx_runtime_1.jsx)(BannerText, { ...(0, slot_1.slot)('banner-message'), pl: icon ? ICON_GUTTER : 0, pr: onClose ? CLOSE + 12 : 0, children: body }), onClose ? ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('banner-close'), variant: "ghost", size: "icon", minH: CLOSE, minW: CLOSE, ...(0, gesture_1.touch)(CLOSE), 
+                // After `touch`, which sets `position: relative` on web to host its
+                // hit-area overlay; an absolute box hosts it just as well.
+                position: "absolute", t: "$3", r: "$4", "aria-label": "Close", onPress: onClose, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })) : null] }));
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Banner — a full-width strip anchored to an edge of its container: a leading
+ * icon, a message, and an optional close button, in one of five variants
+ * (`default`, `info`, `success`, `warning`, `error`).
+ *
+ * The icon is the first child when that child is not itself a string, the same
+ * convention `Alert` uses — it sits absolutely at the left edge and the message
+ * column indents to clear it. Surface, icon and text are three styled parts
+ * sharing one `variant` through a styled context, so a variant reaches all
+ * three without any part reading it twice by hand.
+ *
+ * `onClose` only reports that the close button was pressed. A Banner carries no
+ * visibility state of its own; whether the strip stays mounted is the caller's
+ * decision.
+ *
+ * Message and icon paint from the hue's text rungs — step 12 for the message,
+ * step 11 for the icon — because step 9 is a fill: on the light theme it reads
+ * at 1.2:1 for yellow and about 3:1 for blue and green over the step-2 ground.
+ */
+import { type ComponentProps } from 'react';
+export type BannerVariant = 'default' | 'info' | 'success' | 'warning' | 'error';
+declare const BannerFrame: 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;
+    variant?: "default" | "error" | "info" | "success" | "warning" | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type BannerProps = Omit<ComponentProps<typeof BannerFrame>, 'variant'> & {
+    variant?: BannerVariant | null;
+    onClose?: () => void;
+};
+export declare function Banner({ variant, onClose, children, ...props }: BannerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/banner.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAOrE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAUhF,QAAA,MAAM,WAAW;;;;8CAsBf,CAAA;AA8CF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC9E,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BA0CvF"}

package/dist/backends/gui/banner.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Banner — a full-width strip anchored to an edge of its container: a leading
+ * icon, a message, and an optional close button, in one of five variants
+ * (`default`, `info`, `success`, `warning`, `error`).
+ *
+ * The icon is the first child when that child is not itself a string, the same
+ * convention `Alert` uses — it sits absolutely at the left edge and the message
+ * column indents to clear it. Surface, icon and text are three styled parts
+ * sharing one `variant` through a styled context, so a variant reaches all
+ * three without any part reading it twice by hand.
+ *
+ * `onClose` only reports that the close button was pressed. A Banner carries no
+ * visibility state of its own; whether the strip stays mounted is the caller's
+ * decision.
+ *
+ * Message and icon paint from the hue's text rungs — step 12 for the message,
+ * step 11 for the icon — because step 9 is a fill: on the light theme it reads
+ * at 1.2:1 for yellow and about 3:1 for blue and green over the step-2 ground.
+ */
+import { Children, isValidElement } from 'react';
+import { SizableText, YStack, createStyledContext, 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 ICON = 16;
+const ICON_GUTTER = 28;
+const CLOSE = 24;
+const BannerContext = /* @__PURE__ */ createStyledContext({
+    variant: 'default',
+});
+const BannerFrame = styled(YStack, {
+    name: 'Banner',
+    context: BannerContext,
+    position: 'relative',
+    width: '100%',
+    borderBottomWidth: 1,
+    borderColor: '$borderColor',
+    bg: '$background',
+    px: '$4',
+    py: '$3',
+    variants: {
+        variant: {
+            default: {},
+            info: { borderColor: '$blue9', bg: '$blue2' },
+            success: { borderColor: '$green9', bg: '$green2' },
+            warning: { borderColor: '$yellow9', bg: '$yellow2' },
+            error: { borderColor: '$red9', bg: '$red2' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const BannerText = styled(SizableText, {
+    name: 'BannerText',
+    context: BannerContext,
+    render: 'div',
+    size: '$2',
+    color: '$ink',
+    variants: {
+        variant: {
+            default: {},
+            info: { color: '$blue12' },
+            success: { color: '$green12' },
+            warning: { color: '$yellow12' },
+            error: { color: '$red12' },
+        },
+    },
+});
+// A Text host because a View takes no `color`, and an svg child paints in
+// `currentColor`.
+const IconSlot = styled(SizableText, {
+    name: 'BannerIcon',
+    context: BannerContext,
+    display: 'flex',
+    position: 'absolute',
+    t: '$3',
+    l: '$4',
+    width: ICON,
+    height: ICON,
+    items: 'center',
+    justify: 'center',
+    color: '$ink',
+    variants: {
+        variant: {
+            default: {},
+            info: { color: '$blue11' },
+            success: { color: '$green11' },
+            warning: { color: '$yellow11' },
+            error: { color: '$red11' },
+        },
+    },
+});
+export function Banner({ variant = 'default', onClose, children, ...props }) {
+    const resolved = variant ?? 'default';
+    const items = Children.toArray(children);
+    const head = items[0];
+    const icon = isValidElement(head) ? head : null;
+    const body = icon ? items.slice(1) : items;
+    return (_jsxs(BannerFrame, { role: "alert", variant: resolved, ...slot('banner'), "data-variant": resolved, ...props, children: [icon ? (_jsx(IconSlot, { ...slot('banner-icon'), children: icon })) : null, _jsx(BannerText, { ...slot('banner-message'), pl: icon ? ICON_GUTTER : 0, pr: onClose ? CLOSE + 12 : 0, children: body }), onClose ? (_jsx(Button, { ...slot('banner-close'), variant: "ghost", size: "icon", minH: CLOSE, minW: CLOSE, ...touch(CLOSE), 
+                // After `touch`, which sets `position: relative` on web to host its
+                // hit-area overlay; an absolute box hosts it just as well.
+                position: "absolute", t: "$3", r: "$4", "aria-label": "Close", onPress: onClose, children: _jsx(X, { size: 16 }) })) : null] }));
+}
+//# sourceMappingURL=banner.js.map

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

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