@hanzo/ui 8.27.8 → 8.27.10

package/dist/backends/gui/3d-marquee.js

@@ -0,0 +1,190 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Marquee3D — an endless ticker seen through a CSS perspective.
+ *
+ * A stage holds the tilt (`perspective` and `rotateX`/`rotateY`/`rotateZ`) and
+ * a track inside it carries the items past, so a tilted row reads as a plane
+ * receding into the page rather than a flat crawl. The loop is one keyframe:
+ * `children` is laid out `repeat` times as a group, the group is rendered
+ * twice back to back, and the animation 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 the first copy once: every other is `aria-hidden`.
+ * Duration is that length over `speed` (px/s), read off the rendered track,
+ * so a long set of items moves at the same pace as a short one.
+ *
+ * Six looks (`variant`) fix their own surface and ink on every theme, except
+ * `default`, which takes the host's. `size` sets height and type size together.
+ * `Marquee3DPreset` bundles the five named looks; `Marquee3DFloating` bobs each
+ * glyph of a text child on top of the scroll.
+ *
+ * The keyframes ride along as a hoisted `<style>`: React keys it by `href`, so
+ * any number of marquees on a page emit it once, and a consumer that mounts none
+ * of this package's stylesheets still gets a marquee that moves.
+ */
+import { glass } from '../../glass.js';
+import { Text, XStack, YStack, styled } from '@hanzo/gui';
+import * as React from 'react';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+/** Frame height and type size per `size`, px. */
+const HEIGHT = { sm: 32, default: 48, lg: 64, xl: 80, '2xl': 96, '3xl': 128 };
+const FONT = { sm: 14, default: 16, lg: 18, xl: 20, '2xl': 24, '3xl': 30 };
+/** Viewing distance per `perspective`, px; 0 draws flat. */
+const DEPTH = { none: 0, sm: 500, default: 1000, lg: 1500, xl: 2000 };
+/** A gradient painted through the glyphs. */
+const clip = (backgroundImage) => ({
+    backgroundImage,
+    WebkitBackgroundClip: 'text',
+    backgroundClip: 'text',
+    color: 'transparent',
+});
+/**
+ * The ink per variant. It sits on the item, the nearest stack to the glyphs,
+ * and every child inherits it — a caller's own elements included — which is
+ * why it is an inline style and not a property of the text primitive. Nearest,
+ * because gui's stylesheet gives every stack the theme's weight, line height
+ * and letter spacing; a stack between the ink and the glyph would reset them.
+ */
+const INK = {
+    default: {},
+    neon: {
+        color: '#22d3ee',
+        filter: 'drop-shadow(0 0 10px currentColor)',
+        animation: 'marquee-3d-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+    },
+    rainbow: clip('linear-gradient(90deg, #ef4444, #eab308, #22c55e, #3b82f6, #a855f7)'),
+    metallic: clip('linear-gradient(180deg, #e5e7eb, #9ca3af, #4b5563)'),
+    fire: {
+        ...clip('linear-gradient(0deg, #dc2626, #f97316, #facc15)'),
+        filter: 'drop-shadow(0 0 20px #ff6600)',
+    },
+    glass: { color: 'rgba(255,255,255,0.9)', filter: 'drop-shadow(0 0 10px rgba(255,255,255,0.3))' },
+};
+const Frame = styled(XStack, {
+    name: 'Marquee3D',
+    position: 'relative',
+    overflow: 'hidden',
+    width: '100%',
+    items: 'center',
+    variants: {
+        variant: {
+            default: { bg: '$background', color: '$color' },
+            neon: { bg: '#000000' },
+            rainbow: { bg: '#000000' },
+            metallic: { bg: '#0f172a' },
+            fire: { bg: '#000000' },
+            glass: {},
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+/** The host for a bare text child. Ink and size come down from the item. */
+const Label = styled(Text, { name: 'Marquee3DText', color: 'inherit' });
+/**
+ * The pair of loops slides the doubled track by half of itself; `direction`
+ * only ever flips their play direction. The hover rule and the reduced-motion
+ * rule select on the slot markers, so nothing here needs a class.
+ */
+const KEYFRAMES = `
+@keyframes marquee-3d-x { to { transform: translateX(-50%) } }
+@keyframes marquee-3d-y { to { transform: translateY(-50%) } }
+@keyframes marquee-3d-pulse { 50% { opacity: 0.5 } }
+@keyframes marquee-3d-float { 50% { transform: translateY(var(--float)) rotateX(5deg) rotateY(2deg) } }
+[data-slot="marquee-3d"][data-pause-hover]:hover [data-slot="marquee-3d-track"] { animation-play-state: paused }
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="marquee-3d-track"], [data-slot="marquee-3d-group"], [data-slot="marquee-3d-char"] { animation: none !important }
+}
+`;
+const UNMEASURED = { stage: 0, track: 0, item: 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 Marquee3D = React.forwardRef(({ variant = 'default', size = 'default', direction = 'left', perspective = 'default', children, speed = 50, pauseOnHover = false, reverse = false, repeat = 5, autoFill = false, gap = 0, rotateX = 0, rotateY = 0, rotateZ = 0, gradient = false, gradientColor = '#ffffff', gradientWidth = 200, style, ...props }, ref) => {
+    const vertical = direction === 'up' || direction === 'down';
+    const flipped = direction === 'right' || direction === 'down';
+    const Axis = vertical ? YStack : XStack;
+    const stageRef = React.useRef(null);
+    const trackRef = React.useRef(null);
+    const itemRef = React.useRef(null);
+    const [span, setSpan] = React.useState(UNMEASURED);
+    // Half the track must cover the stage or the loop shows bare ground; one
+    // more copy keeps that true while the last one is still partly in view.
+    const count = autoFill && span.item > 0 ? Math.ceil(span.stage / (span.item + gap)) + 1 : repeat;
+    // Layout sizes, not bounding boxes: the stage is tilted, and a bounding box
+    // reports the projection. Re-read whenever the track's length can change:
+    // `count` and `size` move it from inside, the observer catches the rest.
+    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), item: along(itemRef.current) };
+            setSpan((s) => (s.stage === next.stage && s.track === next.track && s.item === next.item ? s : next));
+        };
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        for (const el of [stageRef.current, trackRef.current]) {
+            const b = box(el);
+            if (b)
+                observer.observe(b);
+        }
+        return () => observer.disconnect();
+    }, [vertical, children, count, size, gap]);
+    const duration = span.track > 0 ? span.track / 2 / speed : 20;
+    const play = flipped !== reverse ? 'reverse' : 'normal';
+    const tilt = `${DEPTH[perspective] ? `perspective(${DEPTH[perspective]}px) ` : ''}rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+    const mask = gradient &&
+        `linear-gradient(${vertical ? 'to bottom' : 'to right'}, transparent, ${gradientColor} ${gradientWidth}px, ${gradientColor} calc(100% - ${gradientWidth}px), transparent)`;
+    // The trailing pad is the gap between the last item of one copy and the
+    // first of the next, so the period is exactly half the track.
+    const group = (hidden) => (_jsx(Axis, { ...slot('marquee-3d-group'), shrink: 0, items: "center", gap: gap, ...(vertical ? { pb: gap } : { pr: gap }), children: Array.from({ length: count }, (_, i) => (_jsx(Axis, { ref: i === 0 && !hidden ? itemRef : undefined, "aria-hidden": hidden || i > 0 || undefined, ...slot('marquee-3d-item'), shrink: 0, items: "center", gap: gap, 
+            // The keyword, not a ratio: gui reads a bare number as px, and a
+            // 1.2px line box stacks every glyph on one line.
+            style: { fontSize: FONT[size], fontWeight: 700, lineHeight: 'normal', whiteSpace: 'nowrap', ...INK[variant] }, children: ink(children, Label, { ...slot('marquee-3d-text') }) }, i))) }));
+    return (_jsxs(Frame, { ref: ref, ...slot('marquee-3d'), "data-variant": variant, "data-direction": direction, "data-pause-hover": pauseOnHover || undefined, variant: variant, ...(variant === 'glass' ? glass(2) : null), height: HEIGHT[size], style: { ...(mask && { maskImage: mask, WebkitMaskImage: mask }), ...style }, ...props, children: [_jsx("style", { href: "marquee-3d", precedence: "default", children: KEYFRAMES }), _jsx(Axis, { ref: stageRef, ...slot('marquee-3d-stage'), width: "100%", height: "100%", items: "center", style: { transform: tilt }, children: _jsxs(Axis, { ref: trackRef, ...slot('marquee-3d-track'), shrink: 0, 
+                    // Longhands, so the play state is left to the hover rule: an
+                    // inline `animation` shorthand would set it too and outrank the sheet.
+                    style: {
+                        willChange: 'transform',
+                        animationName: `marquee-3d-${vertical ? 'y' : 'x'}`,
+                        animationDuration: `${duration}s`,
+                        animationTimingFunction: 'linear',
+                        animationIterationCount: 'infinite',
+                        animationDirection: play,
+                    }, children: [group(false), group(true)] }) })] }));
+});
+Marquee3D.displayName = 'Marquee3D';
+/** The five named looks, each a `Marquee3D` pinned to a variant and size; every other prop stays open. */
+export const Marquee3DPreset = {
+    Hero: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "rainbow", size: "3xl", speed: 30, rotateX: -10, gradient: true, ...props }))),
+    Neon: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "neon", size: "xl", speed: 40, rotateY: 5, pauseOnHover: true, ...props }))),
+    Metallic: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "metallic", size: "lg", speed: 35, rotateX: -5, rotateY: 2, gradient: true, gradientColor: "#c4c4c4", ...props }))),
+    Fire: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "fire", size: "2xl", speed: 60, rotateZ: 1, gradient: true, gradientColor: "#ff6600", ...props }))),
+    Glass: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "glass", size: "lg", speed: 25, rotateX: -8, pauseOnHover: true, gradient: true, gradientColor: "rgba(255,255,255,0.9)", ...props }))),
+};
+Marquee3DPreset.Hero.displayName = 'Marquee3DPreset.Hero';
+Marquee3DPreset.Neon.displayName = 'Marquee3DPreset.Neon';
+Marquee3DPreset.Metallic.displayName = 'Marquee3DPreset.Metallic';
+Marquee3DPreset.Fire.displayName = 'Marquee3DPreset.Fire';
+Marquee3DPreset.Glass.displayName = 'Marquee3DPreset.Glass';
+/**
+ * A `Marquee3D` whose text child floats glyph by glyph: each runs the same bob,
+ * offset by a tenth of a second per position, on top of the scroll. Any other
+ * child passes through untouched.
+ */
+export const Marquee3DFloating = React.forwardRef(({ children, floatIntensity = 10, floatSpeed = 3, ...props }, ref) => {
+    const text = typeof children === 'string' ? children : '';
+    return (_jsx(Marquee3D, { ref: ref, ...props, children: text ? (_jsx(Label, { ...slot('marquee-3d-text'), style: { display: 'inline-flex', gap: 4 }, children: [...text].map((char, i) => (_jsx(Label, { ...slot('marquee-3d-char'), style: {
+                    display: 'inline-block',
+                    ['--float']: `${-floatIntensity}px`,
+                    animation: `marquee-3d-float ${floatSpeed}s ease-in-out infinite`,
+                    animationDelay: `${i * 0.1}s`,
+                }, children: char === ' ' ? '\u00A0' : char }, i))) })) : (children) }));
+});
+Marquee3DFloating.displayName = 'Marquee3DFloating';
+//# sourceMappingURL=3d-marquee.js.map

package/dist/backends/gui/3d-marquee.js.map

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

package/dist/backends/gui/3d-pin.cjs

@@ -0,0 +1,51 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pin3D = Pin3D;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Pin3D — a frame that lifts what is inside it while it is hovered.
+ *
+ * A white wash fades in over the scene at half strength and the scene shrinks
+ * to 95% while the pointer is on the frame or, when the frame is a link, while
+ * it holds keyboard focus; both ease back over half a second. The frame is a
+ * gui `group`, so the wash and the scene each declare their lifted look against
+ * the frame's own pseudo state and the whole effect is one compiled stylesheet
+ * with nothing held on the client.
+ *
+ * `href` renders the frame as an anchor; `title` rides along as its tooltip.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const EASE = 'cubic-bezier(0.4, 0, 0.2, 1)';
+const DURATION = 500;
+/** Inline, as gui's `transition` prop names a driver rung rather than a property. */
+const ease = (property) => ({ transition: `${property} ${DURATION}ms ${EASE}` });
+const Frame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Pin3D',
+    group: true,
+    // A group is a size container unless told otherwise, and inline-size
+    // containment shrinks an auto-width frame in a row to nothing.
+    containerType: 'normal',
+    position: 'relative',
+    cursor: 'pointer',
+});
+const Wash = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Pin3DWash',
+    position: 'absolute',
+    inset: 0,
+    pointerEvents: 'none',
+    bg: '$white1',
+    opacity: 0,
+    '$group-hover': { opacity: 0.5 },
+    '$group-focusVisible': { opacity: 0.5 },
+});
+const Scene = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Pin3DScene',
+    scale: 1,
+    '$group-hover': { scale: 0.95 },
+    '$group-focusVisible': { scale: 0.95 },
+});
+function Pin3D({ title, href, children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ...(0, slot_1.slot)('3d-pin'), render: href ? 'a' : 'div', ...{ href, title }, ...props, children: [(0, jsx_runtime_1.jsx)(Wash, { ...(0, slot_1.slot)('3d-pin-wash'), style: { zIndex: 10, ...ease('opacity') } }), (0, jsx_runtime_1.jsx)(Scene, { ...(0, slot_1.slot)('3d-pin-scene'), style: ease('transform'), children: children })] }));
+}

package/dist/backends/gui/3d-pin.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type Pin3DProps = ComponentProps<typeof Frame> & {
+    /** Tooltip for the destination; carried through as the title attribute. */
+    title?: string;
+    /** Where the pin leads. Renders the frame as a link when set. */
+    href?: string;
+};
+export declare function Pin3D({ title, href, children, ...props }: Pin3DProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=3d-pin.d.ts.map

package/dist/backends/gui/3d-pin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"3d-pin.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/3d-pin.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAS3C,QAAA,MAAM,KAAK;;;8CAQT,CAAA;AAoBF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,GAAG;IACtD,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAepE"}

package/dist/backends/gui/3d-pin.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Pin3D — a frame that lifts what is inside it while it is hovered.
+ *
+ * A white wash fades in over the scene at half strength and the scene shrinks
+ * to 95% while the pointer is on the frame or, when the frame is a link, while
+ * it holds keyboard focus; both ease back over half a second. The frame is a
+ * gui `group`, so the wash and the scene each declare their lifted look against
+ * the frame's own pseudo state and the whole effect is one compiled stylesheet
+ * with nothing held on the client.
+ *
+ * `href` renders the frame as an anchor; `title` rides along as its tooltip.
+ */
+import { YStack, styled } from '@hanzo/gui';
+import { slot } from './slot.js';
+const EASE = 'cubic-bezier(0.4, 0, 0.2, 1)';
+const DURATION = 500;
+/** Inline, as gui's `transition` prop names a driver rung rather than a property. */
+const ease = (property) => ({ transition: `${property} ${DURATION}ms ${EASE}` });
+const Frame = styled(YStack, {
+    name: 'Pin3D',
+    group: true,
+    // A group is a size container unless told otherwise, and inline-size
+    // containment shrinks an auto-width frame in a row to nothing.
+    containerType: 'normal',
+    position: 'relative',
+    cursor: 'pointer',
+});
+const Wash = styled(YStack, {
+    name: 'Pin3DWash',
+    position: 'absolute',
+    inset: 0,
+    pointerEvents: 'none',
+    bg: '$white1',
+    opacity: 0,
+    '$group-hover': { opacity: 0.5 },
+    '$group-focusVisible': { opacity: 0.5 },
+});
+const Scene = styled(YStack, {
+    name: 'Pin3DScene',
+    scale: 1,
+    '$group-hover': { scale: 0.95 },
+    '$group-focusVisible': { scale: 0.95 },
+});
+export function Pin3D({ title, href, children, ...props }) {
+    return (_jsxs(Frame, { ...slot('3d-pin'), render: href ? 'a' : 'div', ...{ href, title }, ...props, children: [_jsx(Wash, { ...slot('3d-pin-wash'), style: { zIndex: 10, ...ease('opacity') } }), _jsx(Scene, { ...slot('3d-pin-scene'), style: ease('transform'), children: children })] }));
+}
+//# sourceMappingURL=3d-pin.js.map

package/dist/backends/gui/3d-pin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"3d-pin.js","sourceRoot":"","sources":["../../../src/backends/gui/3d-pin.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,IAAI,GAAG,8BAA8B,CAAA;AAC3C,MAAM,QAAQ,GAAG,GAAG,CAAA;AAEpB,qFAAqF;AACrF,MAAM,IAAI,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,QAAQ,IAAI,QAAQ,MAAM,IAAI,EAAE,EAAE,CAAC,CAAA;AAExF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,IAAI;IACX,qEAAqE;IACrE,+DAA+D;IAC/D,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,SAAS;CAClB,CAAC,CAAA;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE;IAC1B,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;IACR,aAAa,EAAE,MAAM;IACrB,EAAE,EAAE,SAAS;IACb,OAAO,EAAE,CAAC;IACV,cAAc,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IAChC,qBAAqB,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;CACxC,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,CAAC;IACR,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;IAC/B,qBAAqB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;CACvC,CAAC,CAAA;AASF,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc;IACnE,OAAO,CACL,MAAC,KAAK,OACA,IAAI,CAAC,QAAQ,CAAC,EAClB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,KACrB,EAAE,IAAI,EAAE,KAAK,EAAa,KAC3B,KAAK,aAGT,KAAC,IAAI,OAAK,IAAI,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,GAAI,EAC5E,KAAC,KAAK,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,YACtD,QAAQ,GACH,IACF,CACT,CAAA;AACH,CAAC"}

package/dist/backends/gui/advanced-chart.cjs

@@ -0,0 +1,61 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdvancedChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AdvancedChart — a TradingView chart of one symbol, in a gui frame.
+ *
+ * The candles are TradingView's, drawn inside TradingView's own document, so
+ * the chart is an `<iframe>` and nothing here draws a pixel of it. What this
+ * owns is the frame around it and the settings the chart opens with — symbol,
+ * interval, theme, the toolbars, the save-image control — written into the
+ * iframe's address the way TradingView's own embed script writes them:
+ * `/embed-widget/advanced-chart/?locale=…#<settings as JSON>`. Nothing is
+ * fetched or injected at mount, so the markup is the same on the server and in
+ * the browser, and the frame has its height before the chart arrives.
+ *
+ * The iframe is keyed on that address. A browser treats a `src` that differs
+ * only in its fragment as a same-document navigation and does not reload, so
+ * without the key a new `symbol` would change the URL and leave the old chart
+ * on screen.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/advanced-chart/?locale=en#';
+/** The settings TradingView reads, with the documented defaults filled in. */
+const settings = ({ symbol = 'NASDAQ:AAPL', interval = 'D', theme = 'dark', width = '100%', height = 500, autosize = true, hideTopToolbar = false, hideSideToolbar = false, saveImage = true, }) => ({
+    symbol,
+    interval,
+    theme,
+    width,
+    height,
+    autosize,
+    hide_top_toolbar: hideTopToolbar,
+    hide_side_toolbar: hideSideToolbar,
+    save_image: saveImage,
+    allow_symbol_change: true,
+    timezone: 'Etc/UTC',
+    style: '1',
+    calendar: false,
+    support_host: 'https://www.tradingview.com',
+});
+const AdvancedChart = ({ symbol, interval, theme, width, height, autosize, hideTopToolbar, hideSideToolbar, saveImage, ...props }) => {
+    const s = settings({
+        symbol,
+        interval,
+        theme,
+        width,
+        height,
+        autosize,
+        hideTopToolbar,
+        hideSideToolbar,
+        saveImage,
+    });
+    const src = EMBED + encodeURIComponent(JSON.stringify(s));
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('advanced-chart'), "data-symbol": s.symbol, "data-interval": s.interval, 
+        // The documented size is TradingView's — a number or a percent string —
+        // and gui declares a narrower one; on web both reach CSS as written.
+        width: s.width, height: s.height, overflow: "hidden", position: "relative", bg: "$panel", ...props, children: gui_1.isWeb && ((0, jsx_runtime_1.jsx)("iframe", { src: src, title: `${s.symbol} chart`, loading: "lazy", scrolling: "no", allowFullScreen: true, style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+};
+exports.AdvancedChart = AdvancedChart;

package/dist/backends/gui/advanced-chart.d.ts

@@ -0,0 +1,38 @@
+/**
+ * AdvancedChart — a TradingView chart of one symbol, in a gui frame.
+ *
+ * The candles are TradingView's, drawn inside TradingView's own document, so
+ * the chart is an `<iframe>` and nothing here draws a pixel of it. What this
+ * owns is the frame around it and the settings the chart opens with — symbol,
+ * interval, theme, the toolbars, the save-image control — written into the
+ * iframe's address the way TradingView's own embed script writes them:
+ * `/embed-widget/advanced-chart/?locale=…#<settings as JSON>`. Nothing is
+ * fetched or injected at mount, so the markup is the same on the server and in
+ * the browser, and the frame has its height before the chart arrives.
+ *
+ * The iframe is keyed on that address. A browser treats a `src` that differs
+ * only in its fragment as a same-document navigation and does not reload, so
+ * without the key a new `symbol` would change the URL and leave the old chart
+ * on screen.
+ */
+import { type YStackProps } from '@hanzo/gui';
+export type AdvancedChartInterval = '1' | '3' | '5' | '15' | '30' | '60' | '120' | '180' | '240' | 'D' | 'W' | 'M';
+export type AdvancedChartTheme = 'light' | 'dark';
+export interface AdvancedChartProps extends Omit<YStackProps, 'width' | 'height' | 'theme'> {
+    /** The symbol to chart, exchange-qualified. */
+    symbol?: string;
+    /** Minutes, or a day, a week, a month per bar. */
+    interval?: AdvancedChartInterval;
+    /** The chart's own palette; independent of the surrounding gui theme. */
+    theme?: AdvancedChartTheme;
+    width?: string | number;
+    height?: string | number;
+    /** Fill the frame; the chart then ignores its own `width` and `height`. */
+    autosize?: boolean;
+    hideTopToolbar?: boolean;
+    hideSideToolbar?: boolean;
+    saveImage?: boolean;
+}
+declare const AdvancedChart: ({ symbol, interval, theme, width, height, autosize, hideTopToolbar, hideSideToolbar, saveImage, ...props }: AdvancedChartProps) => import("react").JSX.Element;
+export { AdvancedChart };
+//# sourceMappingURL=advanced-chart.d.ts.map

package/dist/backends/gui/advanced-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-chart.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/advanced-chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAG5D,MAAM,MAAM,qBAAqB,GAC7B,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,GAAG,GACH,GAAG,GACH,GAAG,CAAA;AAEP,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,CAAA;AAEjD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzF,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,qBAAqB,CAAA;IAChC,yEAAyE;IACzE,KAAK,CAAC,EAAE,kBAAkB,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAgCD,QAAA,MAAM,aAAa,+GAWhB,kBAAkB,gCAwCpB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/backends/gui/advanced-chart.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AdvancedChart — a TradingView chart of one symbol, in a gui frame.
+ *
+ * The candles are TradingView's, drawn inside TradingView's own document, so
+ * the chart is an `<iframe>` and nothing here draws a pixel of it. What this
+ * owns is the frame around it and the settings the chart opens with — symbol,
+ * interval, theme, the toolbars, the save-image control — written into the
+ * iframe's address the way TradingView's own embed script writes them:
+ * `/embed-widget/advanced-chart/?locale=…#<settings as JSON>`. Nothing is
+ * fetched or injected at mount, so the markup is the same on the server and in
+ * the browser, and the frame has its height before the chart arrives.
+ *
+ * The iframe is keyed on that address. A browser treats a `src` that differs
+ * only in its fragment as a same-document navigation and does not reload, so
+ * without the key a new `symbol` would change the URL and leave the old chart
+ * on screen.
+ */
+import { YStack, isWeb } from '@hanzo/gui';
+import { slot } from './slot.js';
+const EMBED = 'https://www.tradingview-widget.com/embed-widget/advanced-chart/?locale=en#';
+/** The settings TradingView reads, with the documented defaults filled in. */
+const settings = ({ symbol = 'NASDAQ:AAPL', interval = 'D', theme = 'dark', width = '100%', height = 500, autosize = true, hideTopToolbar = false, hideSideToolbar = false, saveImage = true, }) => ({
+    symbol,
+    interval,
+    theme,
+    width,
+    height,
+    autosize,
+    hide_top_toolbar: hideTopToolbar,
+    hide_side_toolbar: hideSideToolbar,
+    save_image: saveImage,
+    allow_symbol_change: true,
+    timezone: 'Etc/UTC',
+    style: '1',
+    calendar: false,
+    support_host: 'https://www.tradingview.com',
+});
+const AdvancedChart = ({ symbol, interval, theme, width, height, autosize, hideTopToolbar, hideSideToolbar, saveImage, ...props }) => {
+    const s = settings({
+        symbol,
+        interval,
+        theme,
+        width,
+        height,
+        autosize,
+        hideTopToolbar,
+        hideSideToolbar,
+        saveImage,
+    });
+    const src = EMBED + encodeURIComponent(JSON.stringify(s));
+    return (_jsx(YStack, { ...slot('advanced-chart'), "data-symbol": s.symbol, "data-interval": s.interval, 
+        // The documented size is TradingView's — a number or a percent string —
+        // and gui declares a narrower one; on web both reach CSS as written.
+        width: s.width, height: s.height, overflow: "hidden", position: "relative", bg: "$panel", ...props, children: isWeb && (_jsx("iframe", { src: src, title: `${s.symbol} chart`, loading: "lazy", scrolling: "no", allowFullScreen: true, style: { display: 'block', width: '100%', height: '100%', border: 0 } }, src)) }));
+};
+export { AdvancedChart };
+//# sourceMappingURL=advanced-chart.js.map

package/dist/backends/gui/advanced-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-chart.js","sourceRoot":"","sources":["../../../src/backends/gui/advanced-chart.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,MAAM,EAAE,KAAK,EAAoB,MAAM,YAAY,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAkC7B,MAAM,KAAK,GAAG,4EAA4E,CAAA;AAE1F,8EAA8E;AAC9E,MAAM,QAAQ,GAAG,CAAC,EAChB,MAAM,GAAG,aAAa,EACtB,QAAQ,GAAG,GAAG,EACd,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,GAAG,EACZ,QAAQ,GAAG,IAAI,EACf,cAAc,GAAG,KAAK,EACtB,eAAe,GAAG,KAAK,EACvB,SAAS,GAAG,IAAI,GACG,EAAE,EAAE,CAAC,CAAC;IACzB,MAAM;IACN,QAAQ;IACR,KAAK;IACL,KAAK;IACL,MAAM;IACN,QAAQ;IACR,gBAAgB,EAAE,cAAc;IAChC,iBAAiB,EAAE,eAAe;IAClC,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,IAAI;IACzB,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,6BAA6B;CAC5C,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,cAAc,EACd,eAAe,EACf,SAAS,EACT,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,QAAQ,CAAC;QACjB,MAAM;QACN,QAAQ;QACR,KAAK;QACL,KAAK;QACL,MAAM;QACN,QAAQ;QACR,cAAc;QACd,eAAe;QACf,SAAS;KACV,CAAC,CAAA;IACF,MAAM,GAAG,GAAG,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACzD,OAAO,CACL,KAAC,MAAM,OACD,IAAI,CAAC,gBAAgB,CAAC,iBACb,CAAC,CAAC,MAAM,mBACN,CAAC,CAAC,QAAQ;QACzB,wEAAwE;QACxE,qEAAqE;QACrE,KAAK,EAAE,CAAC,CAAC,KAA6B,EACtC,MAAM,EAAE,CAAC,CAAC,MAA+B,EACzC,QAAQ,EAAC,QAAQ,EACjB,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,QAAQ,KACP,KAAK,YAER,KAAK,IAAI,CACR,iBAEE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,QAAQ,EAC1B,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,IAAI,EACd,eAAe,QACf,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,IANhE,GAAG,CAOR,CACH,GACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/backends/gui/alert.cjs

@@ -0,0 +1,106 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertDescription = exports.AlertTitle = void 0;
+exports.Alert = Alert;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Alert — a callout for one piece of information the page wants read: an
+ * optional leading icon, a title and a description in a bordered box, with a
+ * `default` and a `destructive` variant.
+ *
+ * The icon is the first child when that child is neither `AlertTitle` nor
+ * `AlertDescription`. It sits absolutely at the top-left corner and the text
+ * column indents to clear it, so `<Alert><Icon /><AlertTitle /><AlertDescription /></Alert>`
+ * needs no `icon` prop and a trailing action stays in the flow. Surface, icon,
+ * title and description are four styled parts sharing one `variant` through a
+ * styled context — the surface owns the border, the other three own color.
+ */
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const ICON = 16;
+const ICON_GUTTER = 28;
+const AlertContext = /* @__PURE__ */ (0, gui_1.createStyledContext)({ variant: 'default' });
+const AlertFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Alert',
+    context: AlertContext,
+    position: 'relative',
+    width: '100%',
+    rounded: '$4',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    bg: '$background',
+    p: '$4',
+    variants: {
+        variant: {
+            default: {},
+            destructive: { borderColor: '$red9' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const AlertTitleText = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'AlertTitle',
+    context: AlertContext,
+    render: 'h5',
+    size: '$3',
+    fontWeight: '500',
+    lineHeight: 16,
+    mb: '$1',
+    color: '$ink',
+    variants: {
+        variant: {
+            default: {},
+            destructive: { color: '$red9' },
+        },
+    },
+});
+// A div, so a paragraph or a list inside the description is valid markup.
+const AlertDescriptionText = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'AlertDescription',
+    context: AlertContext,
+    render: 'div',
+    size: '$2',
+    color: '$quiet',
+    variants: {
+        variant: {
+            default: {},
+            destructive: { color: '$red9' },
+        },
+    },
+});
+// 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: 'AlertIcon',
+    context: AlertContext,
+    display: 'flex',
+    position: 'absolute',
+    t: '$4',
+    l: '$4',
+    width: ICON,
+    height: ICON,
+    items: 'center',
+    justify: 'center',
+    color: '$ink',
+    variants: {
+        variant: {
+            default: {},
+            destructive: { color: '$red9' },
+        },
+    },
+});
+function Alert({ variant = 'default', 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.type !== AlertTitle && head.type !== AlertDescription ? head : null;
+    const body = icon ? items.slice(1) : items;
+    return ((0, jsx_runtime_1.jsxs)(AlertFrame, { role: "alert", variant: resolved, ...(0, slot_1.slot)('alert'), "data-variant": resolved, ...props, children: [icon ? ((0, jsx_runtime_1.jsx)(IconSlot, { variant: resolved, ...(0, slot_1.slot)('alert-icon'), children: icon })) : null, (0, jsx_runtime_1.jsx)(gui_1.YStack, { pl: icon ? ICON_GUTTER : 0, children: (0, ink_1.ink)(body) })] }));
+}
+const AlertTitle = (props) => (0, jsx_runtime_1.jsx)(AlertTitleText, { ...(0, slot_1.slot)('alert-title'), ...props });
+exports.AlertTitle = AlertTitle;
+const AlertDescription = (props) => ((0, jsx_runtime_1.jsx)(AlertDescriptionText, { ...(0, slot_1.slot)('alert-description'), ...props }));
+exports.AlertDescription = AlertDescription;