@hanzo/ui 8.27.9 → 8.27.11

package/dist/backends/gui/terminal.js

@@ -0,0 +1,231 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Terminal — an emulated shell: a title bar, a scrolling command history, and
+ * one input line. Enter runs a line through `onCommand` (after the built-ins
+ * `clear`, `help`, `date`, `echo …`); arrow keys walk the command history; Tab
+ * completes from `autoCompleteCommands`; hovering a past command reveals a
+ * button that copies it. Four literal palettes (`dark`, `light`, `matrix`,
+ * `dracula`) paint the surface — a terminal's colours are the emulator's own,
+ * not the host app's theme — and a small set of syntax rules colour strings,
+ * keywords, numbers and flags in every line.
+ */
+import { Input as GuiInput, SizableText, XStack, YStack } from '@hanzo/gui';
+import { Check, Copy } from '@hanzogui/lucide-icons-2';
+import * as React from 'react';
+import { slot } from './slot.js';
+const DEFAULT_COMMANDS = ['help', 'clear', 'exit', 'ls', 'cd', 'pwd', 'echo', 'date', 'whoami'];
+const PALETTE = {
+    dark: {
+        bg: '#111827',
+        fg: '#f3f4f6',
+        prompt: '#4ade80',
+        input: '#ffffff',
+        output: '#d1d5db',
+        error: '#f87171',
+        success: '#4ade80',
+        info: '#60a5fa',
+        border: '#1f2937',
+    },
+    light: {
+        bg: '#ffffff',
+        fg: '#111827',
+        prompt: '#2563eb',
+        input: '#111827',
+        output: '#374151',
+        error: '#dc2626',
+        success: '#16a34a',
+        info: '#2563eb',
+        border: '#e5e7eb',
+    },
+    matrix: {
+        bg: '#000000',
+        fg: '#4ade80',
+        prompt: '#22c55e',
+        input: '#86efac',
+        output: '#4ade80',
+        error: '#ef4444',
+        success: '#a3e635',
+        info: '#22d3ee',
+        border: '#14532d',
+    },
+    dracula: {
+        bg: '#282a36',
+        fg: '#f8f8f2',
+        prompt: '#50fa7b',
+        input: '#f8f8f2',
+        output: '#6272a4',
+        error: '#ff5555',
+        success: '#50fa7b',
+        info: '#8be9fd',
+        border: '#44475a',
+    },
+};
+/** One colour rule per syntax class, matched left to right, first pattern wins. */
+const SYNTAX = [
+    { regex: /"[^"]*"|'[^']*'/, color: '#facc15' },
+    { regex: /\b(?:true|false|null|undefined)\b/, color: '#fb923c' },
+    { regex: /\b\d+\b/, color: '#c084fc' },
+    { regex: /\b(?:function|const|let|var|if|else|for|while|return)\b/, color: '#f472b6' },
+    { regex: /--?\w+/, color: '#22d3ee' },
+];
+const COMBINED = /* @__PURE__ */ new RegExp(SYNTAX.map((s) => `(${s.regex.source})`).join('|'), 'g');
+/** Colours a line's strings, keywords, numbers and flags; everything else passes through. */
+const highlight = (text) => {
+    const parts = [];
+    let last = 0;
+    let key = 0;
+    for (const match of text.matchAll(COMBINED)) {
+        const start = match.index ?? 0;
+        if (start > last)
+            parts.push(text.slice(last, start));
+        const group = match.slice(1).findIndex((g) => g !== undefined);
+        parts.push(_jsx("span", { style: { color: SYNTAX[group]?.color }, children: match[0] }, key++));
+        last = start + match[0].length;
+    }
+    if (last < text.length)
+        parts.push(text.slice(last));
+    return parts.length ? _jsx(_Fragment, { children: parts }) : text;
+};
+const outputColor = (type, palette) => type === 'error' ? palette.error : type === 'success' ? palette.success : type === 'info' ? palette.info : palette.output;
+export function Terminal({ prompt = '$', initialCommands = [], onCommand, theme = 'dark', enableHistory = true, enableAutoComplete = true, autoCompleteCommands = DEFAULT_COMMANDS, maxHistorySize = 50, ...props }) {
+    const [lines, setLines] = React.useState(initialCommands);
+    const [value, setValue] = React.useState('');
+    const [historyIndex, setHistoryIndex] = React.useState(-1);
+    const [history, setHistory] = React.useState([]);
+    const [suggestions, setSuggestions] = React.useState([]);
+    const [suggestionIndex, setSuggestionIndex] = React.useState(0);
+    const [copied, setCopied] = React.useState(null);
+    const scroller = React.useRef(null);
+    const field = React.useRef(null);
+    const palette = PALETTE[theme];
+    React.useEffect(() => {
+        const el = scroller.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    }, [lines]);
+    React.useEffect(() => {
+        if (enableAutoComplete && value) {
+            const matches = autoCompleteCommands.filter((cmd) => cmd.toLowerCase().startsWith(value.toLowerCase()));
+            setSuggestions(matches);
+            setSuggestionIndex(0);
+        }
+        else {
+            setSuggestions([]);
+        }
+    }, [value, enableAutoComplete, autoCompleteCommands]);
+    const run = React.useCallback(async (raw) => {
+        const text = raw.trim();
+        if (!text)
+            return;
+        const line = {
+            id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+            input: raw,
+            output: '',
+            timestamp: new Date(),
+            type: 'command',
+        };
+        if (text.toLowerCase() === 'clear') {
+            setLines([]);
+            setValue('');
+            return;
+        }
+        if (text.toLowerCase() === 'help') {
+            line.output = (_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { style: { color: palette.output }, children: "Available commands:" }), _jsxs(YStack, { pl: "$4", gap: "$1", children: [_jsx(SizableText, { style: { color: palette.output }, children: "\u2022 clear - Clear the terminal" }), _jsx(SizableText, { style: { color: palette.output }, children: "\u2022 help - Show this help message" }), _jsx(SizableText, { style: { color: palette.output }, children: "\u2022 date - Show current date and time" }), _jsx(SizableText, { style: { color: palette.output }, children: "\u2022 echo [text] - Print text to terminal" }), autoCompleteCommands.map((cmd) => (_jsxs(SizableText, { style: { color: palette.output }, children: ["\u2022 ", cmd] }, cmd)))] })] }));
+            line.type = 'info';
+        }
+        else if (text.toLowerCase() === 'date') {
+            line.output = new Date().toString();
+            line.type = 'success';
+        }
+        else if (text.toLowerCase().startsWith('echo ')) {
+            line.output = text.slice(5);
+            line.type = 'success';
+        }
+        else if (onCommand) {
+            try {
+                line.output = await onCommand(text);
+                line.type = 'success';
+            }
+            catch (error) {
+                line.output = `Error: ${error instanceof Error ? error.message : String(error)}`;
+                line.type = 'error';
+            }
+        }
+        else {
+            line.output = `Command not found: ${text}`;
+            line.type = 'error';
+        }
+        setLines((prev) => [...prev, line]);
+        if (enableHistory) {
+            setHistory((prev) => [raw, ...prev.filter((cmd) => cmd !== raw)].slice(0, maxHistorySize));
+        }
+        setValue('');
+        setHistoryIndex(-1);
+        setSuggestions([]);
+    }, [onCommand, enableHistory, maxHistorySize, autoCompleteCommands, palette.output]);
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            run(value);
+        }
+        else if (e.key === 'ArrowUp' && enableHistory) {
+            e.preventDefault();
+            if (historyIndex < history.length - 1) {
+                const next = historyIndex + 1;
+                setHistoryIndex(next);
+                setValue(history[next]);
+            }
+        }
+        else if (e.key === 'ArrowDown' && enableHistory) {
+            e.preventDefault();
+            if (historyIndex > 0) {
+                const next = historyIndex - 1;
+                setHistoryIndex(next);
+                setValue(history[next]);
+            }
+            else if (historyIndex === 0) {
+                setHistoryIndex(-1);
+                setValue('');
+            }
+        }
+        else if (e.key === 'Tab' && suggestions.length > 0) {
+            e.preventDefault();
+            const suggestion = suggestions[suggestionIndex];
+            if (suggestion) {
+                setValue(suggestion);
+                setSuggestions([]);
+            }
+        }
+        else if (e.key === 'Escape') {
+            setSuggestions([]);
+            setSuggestionIndex(0);
+        }
+    };
+    const copy = async (text) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(text);
+            setTimeout(() => setCopied((c) => (c === text ? null : c)), 2000);
+        }
+        catch {
+            // No clipboard permission — nothing to copy with.
+        }
+    };
+    const onPaste = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            setValue((prev) => prev + text);
+            field.current?.focus();
+        }
+        catch {
+            // No clipboard permission — the browser's own paste still lands in the field.
+        }
+    };
+    return (_jsxs(YStack, { ref: scroller, ...slot('terminal'), "data-theme": theme, rounded: "$3", borderWidth: 1, p: "$4", overflow: "scroll", style: { backgroundColor: palette.bg, borderColor: palette.border }, onClick: () => field.current?.focus(), onPaste: onPaste, ...props, children: [_jsxs(XStack, { ...slot('terminal-header'), items: "center", gap: "$2", mb: "$4", children: [_jsx(YStack, { width: 12, height: 12, rounded: 999, style: { backgroundColor: '#ef4444' } }), _jsx(YStack, { width: 12, height: 12, rounded: 999, style: { backgroundColor: '#eab308' } }), _jsx(YStack, { width: 12, height: 12, rounded: 999, style: { backgroundColor: '#22c55e' } }), _jsx(SizableText, { size: "$1", opacity: 0.5, ml: "$2", style: { color: palette.fg }, children: "terminal" })] }), _jsx(YStack, { ...slot('terminal-history'), gap: "$2", children: lines.map((line) => (_jsxs(YStack, { ...slot('terminal-command'), children: [_jsxs(XStack, { items: "flex-start", gap: "$2", children: [_jsx(SizableText, { style: { color: palette.prompt }, children: prompt }), _jsx(SizableText, { flex: 1, style: { color: palette.input }, children: highlight(line.input) }), _jsx(XStack, { ...slot('terminal-copy'), cursor: "pointer", opacity: 0.5, hoverStyle: { opacity: 1 }, "aria-label": "Copy command", onPress: () => copy(line.input), children: copied === line.input ? _jsx(Check, { size: 12 }) : _jsx(Copy, { size: 12 }) })] }), line.output !== '' && line.output != null && (_jsx(YStack, { pl: "$4", mt: "$1", children: typeof line.output === 'string' ? (_jsx(SizableText, { style: { color: outputColor(line.type, palette) }, children: highlight(line.output) })) : (line.output) }))] }, line.id))) }), _jsxs(YStack, { ...slot('terminal-input-row'), position: "relative", mt: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { style: { color: palette.prompt }, children: prompt }), _jsx(GuiInput, { ref: field, ...slot('terminal-input'), unstyled: true, flex: 1, value: value, onChangeText: setValue, onKeyDown: onKeyDown, spellCheck: false, autoComplete: "off", "aria-label": "Terminal input", style: { color: palette.input, background: 'transparent', border: 'none', outline: 'none' } })] }), suggestions.length > 0 && (_jsx(YStack, { ...slot('terminal-suggestions'), position: "absolute", l: 0, t: "100%", mt: "$1", rounded: "$2", borderWidth: 1, p: "$1", z: 10, style: { backgroundColor: palette.bg, borderColor: palette.border }, children: suggestions.map((suggestion, index) => (_jsx(YStack, { ...slot('terminal-suggestion'), "data-active": index === suggestionIndex, rounded: "$1", px: "$2", py: "$1", cursor: "pointer", style: { backgroundColor: index === suggestionIndex ? palette.border : 'transparent' }, onPress: () => {
+                                setValue(suggestion);
+                                setSuggestions([]);
+                                field.current?.focus();
+                            }, children: _jsx(SizableText, { style: { color: palette.fg }, children: suggestion }) }, suggestion))) }))] })] }));
+}
+//# sourceMappingURL=terminal.js.map

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

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

package/dist/backends/gui/ticker.cjs

@@ -0,0 +1,79 @@
+'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.Ticker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Ticker — a single row of content that scrolls sideways forever.
+ *
+ * `children` is laid out once, rendered twice back to back inside a track, and
+ * one keyframe slides the track by exactly half its own width, so the second
+ * copy lands where the first began and the seam never shows. The reader hears
+ * one copy: the repeated half is `aria-hidden`. `speed` is the loop's full
+ * duration in seconds — the same number however wide `children` turns out to
+ * be — and `direction` picks which way the keyframe runs.
+ *
+ * The keyframes ride along as a hoisted `<style>`; React keys it by `href`, so
+ * any number of tickers on a page emit it once.
+ */
+const gui_1 = require("@hanzo/gui");
+const React = __importStar(require("react"));
+const sx_1 = require("../../sx.cjs");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const Frame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'Ticker',
+    position: 'relative',
+    overflow: 'hidden',
+    width: '100%',
+});
+const KEYFRAMES = `
+@keyframes ticker-scroll { to { transform: translateX(-50%) } }
+[data-slot="ticker"][data-pause-hover]:hover [data-slot="ticker-track"] { animation-play-state: paused }
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="ticker-track"] { animation: none !important }
+}
+`;
+exports.Ticker = React.forwardRef(({ children, speed = 50, direction = 'left', pauseOnHover = true, className, style, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(Frame, { ref: ref, ...(0, slot_1.slot)('ticker'), "data-pause-hover": pauseOnHover || undefined, style: style, ...(0, sx_1.sx)(className), ...props, children: [(0, jsx_runtime_1.jsx)("style", { href: "ticker", precedence: "default", children: KEYFRAMES }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('ticker-track'), shrink: 0, style: {
+                width: 'fit-content',
+                willChange: 'transform',
+                animationName: 'ticker-scroll',
+                animationDuration: `${speed}s`,
+                animationTimingFunction: 'linear',
+                animationIterationCount: 'infinite',
+                animationDirection: direction === 'right' ? 'reverse' : 'normal',
+            }, children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('ticker-group'), shrink: 0, children: (0, ink_1.ink)(children) }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('ticker-group'), shrink: 0, ...{ 'aria-hidden': 'true' }, children: (0, ink_1.ink)(children) })] })] })));
+exports.Ticker.displayName = 'Ticker';

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export type TickerDirection = 'left' | 'right';
+export type TickerProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
+    children: React.ReactNode;
+    /** Full loop duration, in seconds. */
+    speed?: number;
+    direction?: TickerDirection;
+    pauseOnHover?: boolean;
+    style?: React.CSSProperties;
+};
+export declare const Ticker: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "style"> & {
+    children: React.ReactNode;
+    /** Full loop duration, in seconds. */
+    speed?: number;
+    direction?: TickerDirection;
+    pauseOnHover?: boolean;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ticker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ticker.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/ticker.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAA;AAE9C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,MAAM;cARP,KAAK,CAAC,SAAS;IACzB,sCAAsC;YAC9B,MAAM;gBACF,eAAe;mBACZ,OAAO;YACd,KAAK,CAAC,aAAa;wCAsC5B,CAAA"}

package/dist/backends/gui/ticker.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Ticker — a single row of content that scrolls sideways forever.
+ *
+ * `children` is laid out once, rendered twice back to back inside a track, and
+ * one keyframe slides the track by exactly half its own width, so the second
+ * copy lands where the first began and the seam never shows. The reader hears
+ * one copy: the repeated half is `aria-hidden`. `speed` is the loop's full
+ * duration in seconds — the same number however wide `children` turns out to
+ * be — and `direction` picks which way the keyframe runs.
+ *
+ * The keyframes ride along as a hoisted `<style>`; React keys it by `href`, so
+ * any number of tickers on a page emit it once.
+ */
+import { XStack, styled } from '@hanzo/gui';
+import * as React from 'react';
+import { sx } from '../../sx.js';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+const Frame = styled(XStack, {
+    name: 'Ticker',
+    position: 'relative',
+    overflow: 'hidden',
+    width: '100%',
+});
+const KEYFRAMES = `
+@keyframes ticker-scroll { to { transform: translateX(-50%) } }
+[data-slot="ticker"][data-pause-hover]:hover [data-slot="ticker-track"] { animation-play-state: paused }
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="ticker-track"] { animation: none !important }
+}
+`;
+export const Ticker = React.forwardRef(({ children, speed = 50, direction = 'left', pauseOnHover = true, className, style, ...props }, ref) => (_jsxs(Frame, { ref: ref, ...slot('ticker'), "data-pause-hover": pauseOnHover || undefined, style: style, ...sx(className), ...props, children: [_jsx("style", { href: "ticker", precedence: "default", children: KEYFRAMES }), _jsxs(XStack, { ...slot('ticker-track'), shrink: 0, style: {
+                width: 'fit-content',
+                willChange: 'transform',
+                animationName: 'ticker-scroll',
+                animationDuration: `${speed}s`,
+                animationTimingFunction: 'linear',
+                animationIterationCount: 'infinite',
+                animationDirection: direction === 'right' ? 'reverse' : 'normal',
+            }, children: [_jsx(XStack, { ...slot('ticker-group'), shrink: 0, children: ink(children) }), _jsx(XStack, { ...slot('ticker-group'), shrink: 0, ...{ 'aria-hidden': 'true' }, children: ink(children) })] })] })));
+Ticker.displayName = 'Ticker';
+//# sourceMappingURL=ticker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ticker.js","sourceRoot":"","sources":["../../../src/backends/gui/ticker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,MAAM;CACd,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG;;;;;;CAMjB,CAAA;AAaD,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,YAAY,GAAG,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACtG,MAAC,KAAK,IACJ,GAAG,EAAE,GAAY,KACb,IAAI,CAAC,QAAQ,CAAC,sBACA,YAAY,IAAI,SAAS,EAC3C,KAAK,EAAE,KAAK,KACR,EAAE,CAAC,SAAS,CAAC,KACZ,KAA4C,aAEjD,gBAAO,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAC,SAAS,YACtC,SAAS,GACJ,EACR,MAAC,MAAM,OACD,IAAI,CAAC,cAAc,CAAC,EACxB,MAAM,EAAE,CAAC,EACT,KAAK,EAAE;gBACL,KAAK,EAAE,aAAa;gBACpB,UAAU,EAAE,WAAW;gBACvB,aAAa,EAAE,eAAe;gBAC9B,iBAAiB,EAAE,GAAG,KAAK,GAAG;gBAC9B,uBAAuB,EAAE,QAAQ;gBACjC,uBAAuB,EAAE,UAAU;gBACnC,kBAAkB,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;aACjE,aAED,KAAC,MAAM,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC,YACxC,GAAG,CAAC,QAAQ,CAAC,GACP,EACT,KAAC,MAAM,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC,KAAO,EAAE,aAAa,EAAE,MAAM,EAAa,YACnF,GAAG,CAAC,QAAQ,CAAC,GACP,IACF,IACH,CACT,CACF,CAAA;AACD,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}

package/dist/backends/gui/timeline.cjs

@@ -0,0 +1,154 @@
+'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.Timeline = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Timeline — a sequence of dated events, one marker and one caption per event,
+ * joined by a connecting line.
+ *
+ * `orientation` picks the axis (a vertical column or a horizontal scroller);
+ * `variant` picks how a vertical row reads: a bordered card beside the line
+ * (`default`), cards alternating left and right of a centered line
+ * (`alternate`), one compact line per event (`compact`), or a plain left rule
+ * with no card (`simple`). A marker's fill and glyph come from the event's
+ * `status` — a check for `completed`, a clock for `active`, nothing (a bare
+ * dot) for `pending` or unset — unless the event supplies its own `icon`.
+ *
+ * `animated` reveals each row with `hz-fade-up` (styles/motion.css) the first
+ * time it scrolls into view, via one shared `IntersectionObserver`; once
+ * revealed a row stays that way. Web only — there is nothing to observe
+ * scrolling into on native, so there `animated` has no effect and every row
+ * renders visible immediately.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const React = __importStar(require("react"));
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+/** A row is revealed once and stays that way — this never needs to un-see one. */
+const useReveal = (ids, animated) => {
+    const [seen, setSeen] = React.useState(() => new Set(animated ? [] : ids));
+    const observer = React.useRef(null);
+    React.useEffect(() => {
+        if (!animated)
+            setSeen(new Set(ids));
+    }, [animated, ids]);
+    React.useEffect(() => {
+        if (!animated || !gui_1.isWeb || typeof IntersectionObserver === 'undefined')
+            return;
+        observer.current = new IntersectionObserver((entries) => {
+            const arrived = entries
+                .filter((e) => e.isIntersecting)
+                .map((e) => e.target.dataset.timelineId)
+                .filter((id) => !!id);
+            if (!arrived.length)
+                return;
+            setSeen((prev) => new Set([...prev, ...arrived]));
+        }, { threshold: 0.1, rootMargin: '50px' });
+        const io = observer.current;
+        return () => io.disconnect();
+    }, [animated]);
+    const register = React.useCallback((el) => {
+        if (el)
+            observer.current?.observe(el);
+    }, []);
+    return { seen, register };
+};
+const statusFill = {
+    completed: { bg: '$green9', color: '$white1' },
+    active: { bg: '$blue9', color: '$white1' },
+    pending: { bg: '$gray5', color: '$quiet' },
+};
+const defaultFill = { bg: '$ink', color: '$sunken' };
+const fillFor = (status) => (status ? statusFill[status] : defaultFill);
+const glyphFor = (status, size, color) => {
+    if (status === 'completed')
+        return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: size, color: color });
+    if (status === 'active')
+        return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Clock, { size: size, color: color });
+    return (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Circle, { size: size, color: color });
+};
+const Marker = ({ item, size }) => {
+    const { bg, color } = fillFor(item.status);
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('timeline-marker'), "data-status": item.status ?? 'default', width: size, height: size, shrink: 0, rounded: 9999, items: "center", justify: "center", borderWidth: 2, borderColor: "$background", bg: bg, position: "relative", z: 1, children: item.icon ?? glyphFor(item.status, Math.round(size * 0.32), color) }));
+};
+const Title = (0, gui_1.styled)(gui_1.SizableText, { name: 'TimelineTitle', fontWeight: '600' });
+const Description = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'TimelineDescription',
+    size: '$2',
+    color: '$quiet',
+    mt: '$1',
+});
+const Meta = (0, gui_1.styled)(gui_1.SizableText, { name: 'TimelineMeta', size: '$1', color: '$quiet', mb: '$1' });
+const CardFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'TimelineCard',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$4',
+    bg: '$background',
+    p: '$4',
+});
+const VLine = (0, gui_1.styled)(gui_1.YStack, { name: 'TimelineConnectorV', position: 'absolute', width: 2, bg: '$borderColor' });
+const HLine = (0, gui_1.styled)(gui_1.XStack, { name: 'TimelineConnectorH', position: 'absolute', height: 2, bg: '$borderColor' });
+const MetaLine = ({ item }) => {
+    const text = [item.date, item.time].filter(Boolean).join(' • ');
+    return text ? (0, jsx_runtime_1.jsx)(Meta, { ...(0, slot_1.slot)('timeline-meta'), children: text }) : null;
+};
+const Body = ({ item, align = 'left' }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { items: align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start', children: [(0, jsx_runtime_1.jsx)(MetaLine, { item: item }), (0, jsx_runtime_1.jsx)(Title, { ...(0, slot_1.slot)('timeline-title'), children: (0, ink_1.ink)(item.title) }), item.description && (0, jsx_runtime_1.jsx)(Description, { ...(0, slot_1.slot)('timeline-description'), children: (0, ink_1.ink)(item.description) }), item.content && (0, jsx_runtime_1.jsx)(gui_1.YStack, { mt: "$3", children: item.content })] }));
+const Horizontal = ({ items, reveal }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { overflow: "scroll", pb: "$4", children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "flex-start", gap: "$8", children: items.map((item, i) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { "data-timeline-id": item.id, ...reveal(item.id), position: "relative", items: "center", minW: 200, children: [i < items.length - 1 && (0, jsx_runtime_1.jsx)(HLine, { t: 20, l: "50%", width: "calc(100% + 48px)" }), (0, jsx_runtime_1.jsx)(Marker, { item: item, size: 40 }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { mt: "$4", children: (0, jsx_runtime_1.jsx)(Body, { item: item, align: "center" }) })] }, item.id))) }) }));
+const Default = ({ items, reveal }) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$8", children: items.map((item, i) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { "data-timeline-id": item.id, ...reveal(item.id), position: "relative", gap: "$6", children: [i < items.length - 1 && (0, jsx_runtime_1.jsx)(VLine, { l: 20, t: 40, b: -48 }), (0, jsx_runtime_1.jsx)(Marker, { item: item, size: 40 }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { flex: 1, children: (0, jsx_runtime_1.jsx)(CardFrame, { children: (0, jsx_runtime_1.jsx)(Body, { item: item }) }) })] }, item.id))) }));
+const Alternate = ({ items, reveal }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { position: "relative", gap: "$8", children: [(0, jsx_runtime_1.jsx)(VLine, { l: "50%", x: -1, t: 0, b: 0 }), items.map((item, i) => {
+            const right = i % 2 === 1;
+            return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-timeline-id": item.id, ...reveal(item.id), justify: right ? 'flex-end' : 'flex-start', children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: "calc(50% - 2rem)", items: right ? 'flex-start' : 'flex-end', gap: "$2", children: [(0, jsx_runtime_1.jsx)(Marker, { item: item, size: 40 }), (0, jsx_runtime_1.jsx)(CardFrame, { width: "100%", children: (0, jsx_runtime_1.jsx)(Body, { item: item, align: right ? 'left' : 'right' }) })] }) }, item.id));
+        })] }));
+const Compact = ({ items, reveal }) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$1", children: items.map((item) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { "data-timeline-id": item.id, ...reveal(item.id), items: "center", gap: "$4", p: "$2", rounded: "$4", hoverStyle: { bg: '$hover' }, children: [(0, jsx_runtime_1.jsx)(Marker, { item: item, size: 24 }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, items: "baseline", justify: "space-between", gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "baseline", gap: "$2", children: [(0, jsx_runtime_1.jsx)(Title, { ...(0, slot_1.slot)('timeline-title'), size: "$2", children: (0, ink_1.ink)(item.title) }), item.description && ((0, jsx_runtime_1.jsx)(Description, { ...(0, slot_1.slot)('timeline-description'), mt: 0, size: "$2", children: (0, ink_1.ink)(item.description) }))] }), (0, jsx_runtime_1.jsx)(MetaLine, { item: item })] })] }, item.id))) }));
+const Simple = ({ items, reveal }) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { borderLeftWidth: 2, borderColor: "$borderColor", pl: "$6", gap: "$6", children: items.map((item) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { "data-timeline-id": item.id, ...reveal(item.id), position: "relative", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", l: -28, t: 2, children: (0, jsx_runtime_1.jsx)(Marker, { item: item, size: 16 }) }), (0, jsx_runtime_1.jsx)(Body, { item: item })] }, item.id))) }));
+/** The shared `data-timeline-id` + reveal wiring, one call per row. */
+const revealProps = (id, seen, register, animated) => animated
+    ? {
+        ref: register,
+        className: seen.has(id) ? 'hz-fade-up' : undefined,
+        style: seen.has(id) ? undefined : { opacity: 0 },
+    }
+    : {};
+const Timeline = ({ items, orientation = 'vertical', variant = 'default', animated = true, ...props }) => {
+    const ids = React.useMemo(() => items.map((item) => item.id), [items]);
+    const { seen, register } = useReveal(ids, animated);
+    const reveal = (id) => revealProps(id, seen, register, animated);
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('timeline'), "data-orientation": orientation, "data-variant": variant, "data-animated": animated, position: "relative", ...props, children: orientation === 'horizontal' ? ((0, jsx_runtime_1.jsx)(Horizontal, { items: items, reveal: reveal })) : variant === 'alternate' ? ((0, jsx_runtime_1.jsx)(Alternate, { items: items, reveal: reveal })) : variant === 'compact' ? ((0, jsx_runtime_1.jsx)(Compact, { items: items, reveal: reveal })) : variant === 'simple' ? ((0, jsx_runtime_1.jsx)(Simple, { items: items, reveal: reveal })) : ((0, jsx_runtime_1.jsx)(Default, { items: items, reveal: reveal })) }));
+};
+exports.Timeline = Timeline;

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

@@ -0,0 +1,42 @@
+/**
+ * Timeline — a sequence of dated events, one marker and one caption per event,
+ * joined by a connecting line.
+ *
+ * `orientation` picks the axis (a vertical column or a horizontal scroller);
+ * `variant` picks how a vertical row reads: a bordered card beside the line
+ * (`default`), cards alternating left and right of a centered line
+ * (`alternate`), one compact line per event (`compact`), or a plain left rule
+ * with no card (`simple`). A marker's fill and glyph come from the event's
+ * `status` — a check for `completed`, a clock for `active`, nothing (a bare
+ * dot) for `pending` or unset — unless the event supplies its own `icon`.
+ *
+ * `animated` reveals each row with `hz-fade-up` (styles/motion.css) the first
+ * time it scrolls into view, via one shared `IntersectionObserver`; once
+ * revealed a row stays that way. Web only — there is nothing to observe
+ * scrolling into on native, so there `animated` has no effect and every row
+ * renders visible immediately.
+ */
+import { type YStackProps } from '@hanzo/gui';
+import * as React from 'react';
+export type TimelineStatus = 'completed' | 'active' | 'pending';
+export type TimelineOrientation = 'vertical' | 'horizontal';
+export type TimelineVariant = 'default' | 'alternate' | 'compact' | 'simple';
+export interface TimelineItem {
+    id: string;
+    title: string;
+    description?: string;
+    date?: string;
+    time?: string;
+    status?: TimelineStatus;
+    icon?: React.ReactNode;
+    content?: React.ReactNode;
+}
+export interface TimelineProps extends Omit<YStackProps, 'children' | 'items'> {
+    items: TimelineItem[];
+    orientation?: TimelineOrientation;
+    variant?: TimelineVariant;
+    /** Reveal rows as they scroll into view. Defaults to true. */
+    animated?: boolean;
+}
+export declare const Timeline: ({ items, orientation, variant, animated, ...props }: TimelineProps) => React.JSX.Element;
+//# sourceMappingURL=timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/timeline.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAML,KAAK,WAAW,EACjB,MAAM,YAAY,CAAA;AAEnB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;AAC/D,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAC3D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE5E,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5E,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAgPD,eAAO,MAAM,QAAQ,wDAMlB,aAAa,sBA2Bf,CAAA"}