@hanzo/ui 8.27.8 → 8.27.10

package/README.md

@@ -215,4 +215,5 @@ emit({ component: 'PlanCard', action: 'select', id: 'pro' })
 - **Clean-room** — original implementation, no GPL / Twenty code. Airtable/Twenty-*class* polish, our own code.
 - **Cross-platform** — web + native + desktop, because it's only `@hanzo/gui`.
 
-MIT · Hanzo AI — see [LICENSE.md](../../LICENSE.md). HIP-0137 (`hanzoai/hips`).
+Hanzo AI, Inc — licensed [Apache-2.0](./LICENSE-APACHE) OR [MIT](./LICENSE-MIT), at your
+option. HIP-0137 (`hanzoai/hips`).

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

@@ -0,0 +1,100 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card3DFooter = exports.Card3DContent = exports.Card3DDescription = exports.Card3DTitle = exports.Card3DHeader = void 0;
+exports.Card3D = Card3D;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Card3D — a card that tilts toward the pointer.
+ *
+ * The frame turns about its centre by up to `maxTilt` degrees in proportion to
+ * where the pointer sits, grows by `scale` while the pointer is on it, and eases
+ * flat again over `speed` ms once it leaves. A radial glare follows the pointer
+ * across the surface. Header, title, description, content and footer each stand
+ * at their own `depth` along z, so the layers part as the card turns.
+ *
+ * The live transform is an inline style rather than a style prop: gui compiles
+ * a style prop to one class per distinct value, and a tilt takes a new value on
+ * every pixel of travel. A layer's depth is fixed and goes inline only to stay
+ * in the same vocabulary.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const PAD = 24;
+/** Where each layer stands along z, in px. The glare rides above the deepest. */
+const DEPTH = { header: 20, title: 30, description: 10, content: 25, footer: 15, glare: 40 };
+const EASE = 'cubic-bezier(0.03, 0.98, 0.52, 0.99)';
+const Frame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Card3D',
+    position: 'relative',
+    bg: '$background',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$6',
+    py: PAD,
+    gap: PAD,
+    shadowColor: '$shadowColor',
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+    cursor: 'pointer',
+});
+const Glare = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Card3DGlare',
+    position: 'absolute',
+    inset: 0,
+    rounded: '$6',
+    pointerEvents: 'none',
+});
+const HeaderFrame = (0, gui_1.styled)(gui_1.YStack, { name: 'Card3DHeader', px: PAD, gap: '$1.5' });
+const TitleFrame = (0, gui_1.styled)(gui_1.SizableText, { name: 'Card3DTitle', size: '$7', fontWeight: '600' });
+const DescriptionFrame = (0, gui_1.styled)(gui_1.SizableText, { name: 'Card3DDescription', size: '$2', color: '$quiet' });
+const ContentFrame = (0, gui_1.styled)(gui_1.YStack, { name: 'Card3DContent', px: PAD });
+const FooterFrame = (0, gui_1.styled)(gui_1.XStack, { name: 'Card3DFooter', px: PAD, items: 'center' });
+/** The pointer as fractions of the card, 0..1 from its top-left corner. */
+const CENTRE = { x: 0.5, y: 0.5, live: false };
+function Card3D({ maxTilt = 15, perspective = 1000, scale = 1.05, speed = 400, glare = true, glareMaxOpacity = 0.7, children, ...p }) {
+    const [at, setAt] = (0, react_1.useState)(CENTRE);
+    // Settles when the pointer leaves: by moving off or, for one that cannot
+    // hover, by lifting — a touch's pointerup or cancel is followed by pointerleave.
+    // The last position is kept so the glare fades where it was, not at the centre.
+    const rest = () => setAt((a) => ({ ...a, live: false }));
+    const move = (e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        setAt({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height, live: true });
+    };
+    const rx = at.live ? (1 - 2 * at.y) * maxTilt : 0;
+    const ry = at.live ? (2 * at.x - 1) * maxTilt : 0;
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ...(0, slot_1.slot)('3d-card'), "data-state": at.live ? 'hover' : 'idle', style: {
+            transform: `perspective(${perspective}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${at.live ? scale : 1})`,
+            transition: at.live ? 'none' : `transform ${speed}ms ${EASE}`,
+            transformStyle: 'preserve-3d',
+            willChange: 'transform',
+            touchAction: 'none',
+        }, onPointerMove: move, onPointerLeave: rest, ...p, children: [children, glare && ((0, jsx_runtime_1.jsx)(Glare, { ...(0, slot_1.slot)('3d-card-glare'), style: {
+                    opacity: at.live ? 1 : 0,
+                    background: `radial-gradient(circle at ${at.x * 100}% ${at.y * 100}%, rgba(255,255,255,${glareMaxOpacity}) 0%, transparent 50%)`,
+                    transition: at.live ? 'none' : `opacity ${speed}ms ease-out`,
+                    // Above every layer, shrunk by what the perspective would grow it,
+                    // so it meets the card's edge instead of overhanging it.
+                    transform: `translateZ(${DEPTH.glare}px) scale(${(perspective - DEPTH.glare) / perspective})`,
+                } }))] }));
+}
+/**
+ * A layer's own transform: its depth along z, under whatever inline style the
+ * caller adds — so a colour on a title keeps the title standing off the card.
+ */
+const layer = (depth, style) => ({
+    style: { transform: `translateZ(${depth}px)`, ...style },
+});
+const Card3DHeader = ({ depth = DEPTH.header, style, ...p }) => ((0, jsx_runtime_1.jsx)(HeaderFrame, { ...(0, slot_1.slot)('3d-card-header'), ...layer(depth, style), ...p }));
+exports.Card3DHeader = Card3DHeader;
+const Card3DTitle = ({ depth = DEPTH.title, style, ...p }) => ((0, jsx_runtime_1.jsx)(TitleFrame, { ...(0, slot_1.slot)('3d-card-title'), ...layer(depth, style), ...p }));
+exports.Card3DTitle = Card3DTitle;
+const Card3DDescription = ({ depth = DEPTH.description, style, ...p }) => ((0, jsx_runtime_1.jsx)(DescriptionFrame, { ...(0, slot_1.slot)('3d-card-description'), ...layer(depth, style), ...p }));
+exports.Card3DDescription = Card3DDescription;
+const Card3DContent = ({ depth = DEPTH.content, style, children, ...p }) => ((0, jsx_runtime_1.jsx)(ContentFrame, { ...(0, slot_1.slot)('3d-card-content'), ...layer(depth, style), ...p, children: (0, ink_1.ink)(children) }));
+exports.Card3DContent = Card3DContent;
+const Card3DFooter = ({ depth = DEPTH.footer, style, children, ...p }) => ((0, jsx_runtime_1.jsx)(FooterFrame, { ...(0, slot_1.slot)('3d-card-footer'), ...layer(depth, style), ...p, children: (0, ink_1.ink)(children) }));
+exports.Card3DFooter = Card3DFooter;

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

@@ -0,0 +1,59 @@
+import { type CSSProperties, type ComponentProps, type ElementType } 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>;
+declare const HeaderFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const TitleFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiTextElement, import("@hanzogui/web").TextNonStyleProps, import("@hanzogui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@hanzogui/web").FontSizeTokens | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const DescriptionFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiTextElement, import("@hanzogui/web").TextNonStyleProps, import("@hanzogui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@hanzogui/web").FontSizeTokens | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const ContentFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const FooterFrame: 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 Card3DProps = ComponentProps<typeof Frame> & {
+    /** Largest turn about either axis, in degrees, reached at the card's edge. */
+    maxTilt?: number;
+    /** Viewer distance in px; shorter is a more dramatic turn. */
+    perspective?: number;
+    /** Growth while the pointer is on the card. */
+    scale?: number;
+    /** How long the card takes to settle flat, in ms. */
+    speed?: number;
+    /** Whether the radial highlight follows the pointer. */
+    glare?: boolean;
+    /** Peak alpha of that highlight. */
+    glareMaxOpacity?: number;
+};
+type Layer = {
+    /** Distance the layer stands off the surface, in px. */
+    depth?: number;
+    /** Inline style, laid over the depth transform. */
+    style?: CSSProperties;
+};
+type Layered<T extends ElementType> = Omit<ComponentProps<T>, 'style'> & Layer;
+export type Card3DHeaderProps = Layered<typeof HeaderFrame>;
+export type Card3DTitleProps = Layered<typeof TitleFrame>;
+export type Card3DDescriptionProps = Layered<typeof DescriptionFrame>;
+export type Card3DContentProps = Layered<typeof ContentFrame>;
+export type Card3DFooterProps = Layered<typeof FooterFrame>;
+export declare function Card3D({ maxTilt, perspective, scale, speed, glare, glareMaxOpacity, children, ...p }: Card3DProps): import("react").JSX.Element;
+export declare const Card3DHeader: ({ depth, style, ...p }: Card3DHeaderProps) => import("react").JSX.Element;
+export declare const Card3DTitle: ({ depth, style, ...p }: Card3DTitleProps) => import("react").JSX.Element;
+export declare const Card3DDescription: ({ depth, style, ...p }: Card3DDescriptionProps) => import("react").JSX.Element;
+export declare const Card3DContent: ({ depth, style, children, ...p }: Card3DContentProps) => import("react").JSX.Element;
+export declare const Card3DFooter: ({ depth, style, children, ...p }: Card3DFooterProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=3d-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"3d-card.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/3d-card.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAqB,MAAM,OAAO,CAAA;AAW9G,QAAA,MAAM,KAAK;;;8CAaT,CAAA;AAUF,QAAA,MAAM,WAAW;;;8CAAiE,CAAA;AAClF,QAAA,MAAM,UAAU;;;8CAA8E,CAAA;AAC9F,QAAA,MAAM,gBAAgB;;;8CAAkF,CAAA;AACxG,QAAA,MAAM,YAAY;;;8CAAqD,CAAA;AACvE,QAAA,MAAM,WAAW;;;8CAAqE,CAAA;AAEtF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,GAAG;IACvD,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,KAAK,KAAK,GAAG;IACX,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AACD,KAAK,OAAO,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;AAC3D,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAA;AACzD,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC,OAAO,gBAAgB,CAAC,CAAA;AACrE,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,OAAO,YAAY,CAAC,CAAA;AAC7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;AAK3D,wBAAgB,MAAM,CAAC,EACrB,OAAY,EACZ,WAAkB,EAClB,KAAY,EACZ,KAAW,EACX,KAAY,EACZ,eAAqB,EACrB,QAAQ,EACR,GAAG,CAAC,EACL,EAAE,WAAW,+BA2Cb;AAUD,eAAO,MAAM,YAAY,2BAA2C,iBAAiB,gCAEpF,CAAA;AACD,eAAO,MAAM,WAAW,2BAA0C,gBAAgB,gCAEjF,CAAA;AACD,eAAO,MAAM,iBAAiB,2BAAgD,sBAAsB,gCAEnG,CAAA;AACD,eAAO,MAAM,aAAa,qCAAsD,kBAAkB,gCAIjG,CAAA;AACD,eAAO,MAAM,YAAY,qCAAqD,iBAAiB,gCAI9F,CAAA"}

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

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Card3D — a card that tilts toward the pointer.
+ *
+ * The frame turns about its centre by up to `maxTilt` degrees in proportion to
+ * where the pointer sits, grows by `scale` while the pointer is on it, and eases
+ * flat again over `speed` ms once it leaves. A radial glare follows the pointer
+ * across the surface. Header, title, description, content and footer each stand
+ * at their own `depth` along z, so the layers part as the card turns.
+ *
+ * The live transform is an inline style rather than a style prop: gui compiles
+ * a style prop to one class per distinct value, and a tilt takes a new value on
+ * every pixel of travel. A layer's depth is fixed and goes inline only to stay
+ * in the same vocabulary.
+ */
+import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import { useState } from 'react';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+const PAD = 24;
+/** Where each layer stands along z, in px. The glare rides above the deepest. */
+const DEPTH = { header: 20, title: 30, description: 10, content: 25, footer: 15, glare: 40 };
+const EASE = 'cubic-bezier(0.03, 0.98, 0.52, 0.99)';
+const Frame = styled(YStack, {
+    name: 'Card3D',
+    position: 'relative',
+    bg: '$background',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$6',
+    py: PAD,
+    gap: PAD,
+    shadowColor: '$shadowColor',
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+    cursor: 'pointer',
+});
+const Glare = styled(YStack, {
+    name: 'Card3DGlare',
+    position: 'absolute',
+    inset: 0,
+    rounded: '$6',
+    pointerEvents: 'none',
+});
+const HeaderFrame = styled(YStack, { name: 'Card3DHeader', px: PAD, gap: '$1.5' });
+const TitleFrame = styled(SizableText, { name: 'Card3DTitle', size: '$7', fontWeight: '600' });
+const DescriptionFrame = styled(SizableText, { name: 'Card3DDescription', size: '$2', color: '$quiet' });
+const ContentFrame = styled(YStack, { name: 'Card3DContent', px: PAD });
+const FooterFrame = styled(XStack, { name: 'Card3DFooter', px: PAD, items: 'center' });
+/** The pointer as fractions of the card, 0..1 from its top-left corner. */
+const CENTRE = { x: 0.5, y: 0.5, live: false };
+export function Card3D({ maxTilt = 15, perspective = 1000, scale = 1.05, speed = 400, glare = true, glareMaxOpacity = 0.7, children, ...p }) {
+    const [at, setAt] = useState(CENTRE);
+    // Settles when the pointer leaves: by moving off or, for one that cannot
+    // hover, by lifting — a touch's pointerup or cancel is followed by pointerleave.
+    // The last position is kept so the glare fades where it was, not at the centre.
+    const rest = () => setAt((a) => ({ ...a, live: false }));
+    const move = (e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        setAt({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height, live: true });
+    };
+    const rx = at.live ? (1 - 2 * at.y) * maxTilt : 0;
+    const ry = at.live ? (2 * at.x - 1) * maxTilt : 0;
+    return (_jsxs(Frame, { ...slot('3d-card'), "data-state": at.live ? 'hover' : 'idle', style: {
+            transform: `perspective(${perspective}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${at.live ? scale : 1})`,
+            transition: at.live ? 'none' : `transform ${speed}ms ${EASE}`,
+            transformStyle: 'preserve-3d',
+            willChange: 'transform',
+            touchAction: 'none',
+        }, onPointerMove: move, onPointerLeave: rest, ...p, children: [children, glare && (_jsx(Glare, { ...slot('3d-card-glare'), style: {
+                    opacity: at.live ? 1 : 0,
+                    background: `radial-gradient(circle at ${at.x * 100}% ${at.y * 100}%, rgba(255,255,255,${glareMaxOpacity}) 0%, transparent 50%)`,
+                    transition: at.live ? 'none' : `opacity ${speed}ms ease-out`,
+                    // Above every layer, shrunk by what the perspective would grow it,
+                    // so it meets the card's edge instead of overhanging it.
+                    transform: `translateZ(${DEPTH.glare}px) scale(${(perspective - DEPTH.glare) / perspective})`,
+                } }))] }));
+}
+/**
+ * A layer's own transform: its depth along z, under whatever inline style the
+ * caller adds — so a colour on a title keeps the title standing off the card.
+ */
+const layer = (depth, style) => ({
+    style: { transform: `translateZ(${depth}px)`, ...style },
+});
+export const Card3DHeader = ({ depth = DEPTH.header, style, ...p }) => (_jsx(HeaderFrame, { ...slot('3d-card-header'), ...layer(depth, style), ...p }));
+export const Card3DTitle = ({ depth = DEPTH.title, style, ...p }) => (_jsx(TitleFrame, { ...slot('3d-card-title'), ...layer(depth, style), ...p }));
+export const Card3DDescription = ({ depth = DEPTH.description, style, ...p }) => (_jsx(DescriptionFrame, { ...slot('3d-card-description'), ...layer(depth, style), ...p }));
+export const Card3DContent = ({ depth = DEPTH.content, style, children, ...p }) => (_jsx(ContentFrame, { ...slot('3d-card-content'), ...layer(depth, style), ...p, children: ink(children) }));
+export const Card3DFooter = ({ depth = DEPTH.footer, style, children, ...p }) => (_jsx(FooterFrame, { ...slot('3d-card-footer'), ...layer(depth, style), ...p, children: ink(children) }));
+//# sourceMappingURL=3d-card.js.map

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

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

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

@@ -0,0 +1,225 @@
+'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.Marquee3DFloating = exports.Marquee3DPreset = exports.Marquee3D = void 0;
+const jsx_runtime_1 = require("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.
+ */
+const glass_1 = require("../../glass.cjs");
+const gui_1 = require("@hanzo/gui");
+const React = __importStar(require("react"));
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+/** 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 = (0, gui_1.styled)(gui_1.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 = (0, gui_1.styled)(gui_1.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;
+exports.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 ? gui_1.YStack : gui_1.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) => ((0, jsx_runtime_1.jsx)(Axis, { ...(0, slot_1.slot)('marquee-3d-group'), shrink: 0, items: "center", gap: gap, ...(vertical ? { pb: gap } : { pr: gap }), children: Array.from({ length: count }, (_, i) => ((0, jsx_runtime_1.jsx)(Axis, { ref: i === 0 && !hidden ? itemRef : undefined, "aria-hidden": hidden || i > 0 || undefined, ...(0, slot_1.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: (0, ink_1.ink)(children, Label, { ...(0, slot_1.slot)('marquee-3d-text') }) }, i))) }));
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ref: ref, ...(0, slot_1.slot)('marquee-3d'), "data-variant": variant, "data-direction": direction, "data-pause-hover": pauseOnHover || undefined, variant: variant, ...(variant === 'glass' ? (0, glass_1.glass)(2) : null), height: HEIGHT[size], style: { ...(mask && { maskImage: mask, WebkitMaskImage: mask }), ...style }, ...props, children: [(0, jsx_runtime_1.jsx)("style", { href: "marquee-3d", precedence: "default", children: KEYFRAMES }), (0, jsx_runtime_1.jsx)(Axis, { ref: stageRef, ...(0, slot_1.slot)('marquee-3d-stage'), width: "100%", height: "100%", items: "center", style: { transform: tilt }, children: (0, jsx_runtime_1.jsxs)(Axis, { ref: trackRef, ...(0, slot_1.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)] }) })] }));
+});
+exports.Marquee3D.displayName = 'Marquee3D';
+/** The five named looks, each a `Marquee3D` pinned to a variant and size; every other prop stays open. */
+exports.Marquee3DPreset = {
+    Hero: React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Marquee3D, { ref: ref, variant: "rainbow", size: "3xl", speed: 30, rotateX: -10, gradient: true, ...props }))),
+    Neon: React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Marquee3D, { ref: ref, variant: "neon", size: "xl", speed: 40, rotateY: 5, pauseOnHover: true, ...props }))),
+    Metallic: React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Marquee3D, { ref: ref, variant: "metallic", size: "lg", speed: 35, rotateX: -5, rotateY: 2, gradient: true, gradientColor: "#c4c4c4", ...props }))),
+    Fire: React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Marquee3D, { ref: ref, variant: "fire", size: "2xl", speed: 60, rotateZ: 1, gradient: true, gradientColor: "#ff6600", ...props }))),
+    Glass: React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Marquee3D, { ref: ref, variant: "glass", size: "lg", speed: 25, rotateX: -8, pauseOnHover: true, gradient: true, gradientColor: "rgba(255,255,255,0.9)", ...props }))),
+};
+exports.Marquee3DPreset.Hero.displayName = 'Marquee3DPreset.Hero';
+exports.Marquee3DPreset.Neon.displayName = 'Marquee3DPreset.Neon';
+exports.Marquee3DPreset.Metallic.displayName = 'Marquee3DPreset.Metallic';
+exports.Marquee3DPreset.Fire.displayName = 'Marquee3DPreset.Fire';
+exports.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.
+ */
+exports.Marquee3DFloating = React.forwardRef(({ children, floatIntensity = 10, floatSpeed = 3, ...props }, ref) => {
+    const text = typeof children === 'string' ? children : '';
+    return ((0, jsx_runtime_1.jsx)(exports.Marquee3D, { ref: ref, ...props, children: text ? ((0, jsx_runtime_1.jsx)(Label, { ...(0, slot_1.slot)('marquee-3d-text'), style: { display: 'inline-flex', gap: 4 }, children: [...text].map((char, i) => ((0, jsx_runtime_1.jsx)(Label, { ...(0, slot_1.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) }));
+});
+exports.Marquee3DFloating.displayName = 'Marquee3DFloating';

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

@@ -0,0 +1,114 @@
+import { type GuiElement } from '@hanzo/gui';
+import * as React from 'react';
+export type Marquee3DVariant = 'default' | 'neon' | 'rainbow' | 'metallic' | 'fire' | 'glass';
+export type Marquee3DSize = 'sm' | 'default' | 'lg' | 'xl' | '2xl' | '3xl';
+export type Marquee3DDirection = 'left' | 'right' | 'up' | 'down';
+export type Marquee3DPerspective = 'none' | 'sm' | 'default' | 'lg' | 'xl';
+export type Marquee3DProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
+    children: React.ReactNode;
+    variant?: Marquee3DVariant;
+    size?: Marquee3DSize;
+    direction?: Marquee3DDirection;
+    perspective?: Marquee3DPerspective;
+    /** Track travel, px/s. */
+    speed?: number;
+    pauseOnHover?: boolean;
+    /** Run against `direction`. */
+    reverse?: boolean;
+    /** How many times `children` is laid out per loop. */
+    repeat?: number;
+    /** Lay `children` out as many times as it takes to cover the frame, whatever `repeat` says. */
+    autoFill?: boolean;
+    /** Space between items, px — across the loop's seam too. */
+    gap?: number;
+    rotateX?: number;
+    rotateY?: number;
+    rotateZ?: number;
+    /** Fade both ends of the frame. */
+    gradient?: boolean;
+    gradientColor?: string;
+    /** Length of each fade, px. */
+    gradientWidth?: number;
+    style?: React.CSSProperties;
+};
+export declare const Marquee3D: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "style"> & {
+    children: React.ReactNode;
+    variant?: Marquee3DVariant;
+    size?: Marquee3DSize;
+    direction?: Marquee3DDirection;
+    perspective?: Marquee3DPerspective;
+    /** Track travel, px/s. */
+    speed?: number;
+    pauseOnHover?: boolean;
+    /** Run against `direction`. */
+    reverse?: boolean;
+    /** How many times `children` is laid out per loop. */
+    repeat?: number;
+    /** Lay `children` out as many times as it takes to cover the frame, whatever `repeat` says. */
+    autoFill?: boolean;
+    /** Space between items, px — across the loop's seam too. */
+    gap?: number;
+    rotateX?: number;
+    rotateY?: number;
+    rotateZ?: number;
+    /** Fade both ends of the frame. */
+    gradient?: boolean;
+    gradientColor?: string;
+    /** Length of each fade, px. */
+    gradientWidth?: number;
+    style?: React.CSSProperties;
+} & React.RefAttributes<GuiElement>>;
+type PresetProps = Omit<Marquee3DProps, 'variant' | 'size'>;
+/** The five named looks, each a `Marquee3D` pinned to a variant and size; every other prop stays open. */
+export declare const Marquee3DPreset: {
+    Hero: React.ForwardRefExoticComponent<PresetProps & React.RefAttributes<GuiElement>>;
+    Neon: React.ForwardRefExoticComponent<PresetProps & React.RefAttributes<GuiElement>>;
+    Metallic: React.ForwardRefExoticComponent<PresetProps & React.RefAttributes<GuiElement>>;
+    Fire: React.ForwardRefExoticComponent<PresetProps & React.RefAttributes<GuiElement>>;
+    Glass: React.ForwardRefExoticComponent<PresetProps & React.RefAttributes<GuiElement>>;
+};
+export type Marquee3DFloatingProps = Marquee3DProps & {
+    /** Peak lift of each glyph, px. */
+    floatIntensity?: number;
+    /** Seconds per bob. */
+    floatSpeed?: number;
+};
+/**
+ * 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 declare const Marquee3DFloating: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "style"> & {
+    children: React.ReactNode;
+    variant?: Marquee3DVariant;
+    size?: Marquee3DSize;
+    direction?: Marquee3DDirection;
+    perspective?: Marquee3DPerspective;
+    /** Track travel, px/s. */
+    speed?: number;
+    pauseOnHover?: boolean;
+    /** Run against `direction`. */
+    reverse?: boolean;
+    /** How many times `children` is laid out per loop. */
+    repeat?: number;
+    /** Lay `children` out as many times as it takes to cover the frame, whatever `repeat` says. */
+    autoFill?: boolean;
+    /** Space between items, px — across the loop's seam too. */
+    gap?: number;
+    rotateX?: number;
+    rotateY?: number;
+    rotateZ?: number;
+    /** Fade both ends of the frame. */
+    gradient?: boolean;
+    gradientColor?: string;
+    /** Length of each fade, px. */
+    gradientWidth?: number;
+    style?: React.CSSProperties;
+} & {
+    /** Peak lift of each glyph, px. */
+    floatIntensity?: number;
+    /** Seconds per bob. */
+    floatSpeed?: number;
+} & React.RefAttributes<GuiElement>>;
+export {};
+//# sourceMappingURL=3d-marquee.d.ts.map

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

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