@hanzo/ui 8.27.9 → 8.27.11

package/dist/backends/gui/relative-time.js

@@ -0,0 +1,132 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * RelativeTime — a `<time>` element that keeps saying how long ago (or from
+ * now) a moment was, ticking on an interval so a page left open does not go
+ * stale. `format` picks the wording: `auto` ("3 hours ago"), `short` ("3h"),
+ * or `long`, which hands the same distance to `Intl.RelativeTimeFormat` for
+ * locale-correct phrasing ("yesterday", "in 3 hours").
+ */
+import { SizableText, styled } from '@hanzo/gui';
+import * as React from 'react';
+const UNITS = [
+    ['year', 31536000],
+    ['month', 2592000],
+    ['week', 604800],
+    ['day', 86400],
+    ['hour', 3600],
+    ['minute', 60],
+    ['second', 1],
+];
+const SHORT_SUFFIX = {
+    year: 'y',
+    month: 'mo',
+    week: 'w',
+    day: 'd',
+    hour: 'h',
+    minute: 'm',
+    second: 's',
+};
+const shortForm = (diffInSeconds) => {
+    const abs = Math.abs(diffInSeconds);
+    for (const [unit, secondsInUnit] of UNITS) {
+        if (abs >= secondsInUnit || unit === 'second') {
+            const value = Math.floor(abs / secondsInUnit);
+            const distance = `${value}${SHORT_SUFFIX[unit]}`;
+            return diffInSeconds < 0 ? `in ${distance}` : distance;
+        }
+    }
+    return '0s';
+};
+const autoForm = (diffInSeconds) => {
+    if (diffInSeconds < 0) {
+        const abs = -diffInSeconds;
+        if (abs < 60)
+            return 'in a moment';
+        if (abs < 120)
+            return 'in 1 minute';
+        if (abs < 3600)
+            return `in ${Math.floor(abs / 60)} minutes`;
+        if (abs < 7200)
+            return 'in 1 hour';
+        if (abs < 86400)
+            return `in ${Math.floor(abs / 3600)} hours`;
+        if (abs < 172800)
+            return 'tomorrow';
+        if (abs < 604800)
+            return `in ${Math.floor(abs / 86400)} days`;
+        if (abs < 1209600)
+            return 'in 1 week';
+        if (abs < 2592000)
+            return `in ${Math.floor(abs / 604800)} weeks`;
+        if (abs < 5184000)
+            return 'in 1 month';
+        if (abs < 31536000)
+            return `in ${Math.floor(abs / 2592000)} months`;
+        if (abs < 63072000)
+            return 'in 1 year';
+        return `in ${Math.floor(abs / 31536000)} years`;
+    }
+    if (diffInSeconds < 60)
+        return 'just now';
+    if (diffInSeconds < 120)
+        return '1 minute ago';
+    if (diffInSeconds < 3600)
+        return `${Math.floor(diffInSeconds / 60)} minutes ago`;
+    if (diffInSeconds < 7200)
+        return '1 hour ago';
+    if (diffInSeconds < 86400)
+        return `${Math.floor(diffInSeconds / 3600)} hours ago`;
+    if (diffInSeconds < 172800)
+        return '1 day ago';
+    if (diffInSeconds < 604800)
+        return `${Math.floor(diffInSeconds / 86400)} days ago`;
+    if (diffInSeconds < 1209600)
+        return '1 week ago';
+    if (diffInSeconds < 2592000)
+        return `${Math.floor(diffInSeconds / 604800)} weeks ago`;
+    if (diffInSeconds < 5184000)
+        return '1 month ago';
+    if (diffInSeconds < 31536000)
+        return `${Math.floor(diffInSeconds / 2592000)} months ago`;
+    if (diffInSeconds < 63072000)
+        return '1 year ago';
+    return `${Math.floor(diffInSeconds / 31536000)} years ago`;
+};
+const longFormatter = /* @__PURE__ */ (() => {
+    let cached;
+    return () => (cached ??= new Intl.RelativeTimeFormat(undefined, { numeric: 'auto', style: 'long' }));
+})();
+const longForm = (diffInSeconds) => {
+    for (const [unit, secondsInUnit] of UNITS) {
+        const abs = Math.abs(diffInSeconds);
+        if (abs >= secondsInUnit || unit === 'second') {
+            const value = Math.round(diffInSeconds / secondsInUnit) * -1;
+            return longFormatter().format(value, unit);
+        }
+    }
+    return longFormatter().format(0, 'second');
+};
+const relativeTime = (date, format) => {
+    const diffInSeconds = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
+    if (format === 'short')
+        return shortForm(diffInSeconds);
+    if (format === 'long')
+        return longForm(diffInSeconds);
+    return autoForm(diffInSeconds);
+};
+const RelativeTimeText = styled(SizableText, {
+    name: 'RelativeTime',
+    render: 'time',
+});
+/** A self-updating `<time>` reading how long ago (or until) `date` is. */
+export function RelativeTime({ date, format = 'auto', updateInterval = 60000, ...props }) {
+    const [text, setText] = React.useState(() => relativeTime(date, format));
+    React.useEffect(() => {
+        setText(relativeTime(date, format));
+        const id = setInterval(() => setText(relativeTime(date, format)), updateInterval);
+        return () => clearInterval(id);
+    }, [date, format, updateInterval]);
+    return (_jsx(RelativeTimeText, { "data-slot": "relative-time", "data-format": format, ...{ dateTime: new Date(date).toISOString(), ...props }, children: text }));
+}
+//# sourceMappingURL=relative-time.js.map

package/dist/backends/gui/relative-time.js.map

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

package/dist/backends/gui/safari.cjs

@@ -0,0 +1,65 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Safari = Safari;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Safari — a browser-window frame for showing a screenshot, a demo or a live
+ * preview inside: a traffic-light title bar, back/forward controls, a URL
+ * pill with a lock and a reload button, three trailing actions, an optional
+ * secondary toolbar (Favorites / Reading List / History), and the content
+ * area itself.
+ *
+ * The chrome is decorative by default, the same way the real browser's own
+ * controls only matter once something is listening — so every button takes
+ * an optional handler and renders whether or not one is given.
+ */
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const gesture_1 = require("./gesture.cjs");
+const CONTROL = 12;
+const ICON = 16;
+/** One traffic-light dot: close (red), minimize (yellow) or maximize (green). Decorative — the real controls live on the window this frame sits in. */
+const Light = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'SafariLight',
+    width: CONTROL,
+    height: CONTROL,
+    rounded: 999,
+    variants: {
+        tone: {
+            close: { bg: '$red9' },
+            minimize: { bg: '$yellow9' },
+            maximize: { bg: '$green9' },
+        },
+    },
+});
+const IconButton = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'SafariIconButton',
+    items: 'center',
+    justify: 'center',
+    width: 24,
+    height: 24,
+    rounded: '$2',
+    cursor: 'pointer',
+    hoverStyle: { bg: '$hover' },
+});
+const ToolbarButton = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'SafariToolbarButton',
+    items: 'center',
+    gap: '$1.5',
+    cursor: 'pointer',
+    hoverStyle: { opacity: 0.75 },
+});
+const TOOLBAR_ITEMS = [
+    { item: 'favorites', label: 'Favorites', icon: lucide_icons_2_1.Star },
+    { item: 'reading-list', label: 'Reading List', icon: lucide_icons_2_1.Bookmark },
+    { item: 'history', label: 'History', icon: lucide_icons_2_1.Clock },
+];
+/**
+ * A macOS Safari window as a frame around `children` — drop a screenshot, an
+ * iframe or a live component in and it reads as a captured browser tab.
+ */
+function Safari({ children, url = 'https://ui.hanzo.ai', showToolbar = true, onBack, onForward, onReload, onShare, onNewTab, onMenu, onToolbarItemPress, }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('safari'), width: "100%", maxW: 960, self: "center", rounded: "$5", borderWidth: 1, borderColor: "$borderColor", overflow: "hidden", shadowColor: "$shadowColor", shadowRadius: 24, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('safari-chrome'), items: "center", gap: "$2", px: "$3", py: "$2", bg: "$panel", borderBottomWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('safari-traffic-lights'), gap: "$2", children: [(0, jsx_runtime_1.jsx)(Light, { tone: "close" }), (0, jsx_runtime_1.jsx)(Light, { tone: "minimize" }), (0, jsx_runtime_1.jsx)(Light, { tone: "maximize" })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('safari-nav'), ml: "$2", items: "center", gap: "$1", children: [(0, jsx_runtime_1.jsx)(IconButton, { ...(0, slot_1.slot)('safari-back'), onPress: onBack, ...(0, gesture_1.touch)(24, 44, 'both'), "aria-label": "Go back", role: "button", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronLeft, { size: ICON, color: "$quiet" }) }), (0, jsx_runtime_1.jsx)(IconButton, { ...(0, slot_1.slot)('safari-forward'), onPress: onForward, ...(0, gesture_1.touch)(24, 44, 'both'), "aria-label": "Go forward", role: "button", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: ICON, color: "$quiet" }) })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('safari-url-bar'), mx: "$3", flex: 1, items: "center", gap: "$2", rounded: "$4", bg: "$background", px: "$3", py: "$1.5", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Lock, { size: 14, color: "$quiet" }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('safari-url-text'), flex: 1, size: "$2", color: "$quiet", numberOfLines: 1, children: url }), (0, jsx_runtime_1.jsx)(IconButton, { ...(0, slot_1.slot)('safari-reload'), width: 22, height: 22, onPress: onReload, ...(0, gesture_1.touch)(22, 44, 'both'), "aria-label": "Reload page", role: "button", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.RotateCw, { size: 14, color: "$quiet" }) })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('safari-actions'), items: "center", gap: "$1", children: [(0, jsx_runtime_1.jsx)(IconButton, { ...(0, slot_1.slot)('safari-share'), onPress: onShare, ...(0, gesture_1.touch)(24, 44, 'both'), "aria-label": "Share", role: "button", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Share2, { size: ICON, color: "$quiet" }) }), (0, jsx_runtime_1.jsx)(IconButton, { ...(0, slot_1.slot)('safari-new-tab'), onPress: onNewTab, ...(0, gesture_1.touch)(24, 44, 'both'), "aria-label": "New tab", role: "button", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: ICON, color: "$quiet" }) }), (0, jsx_runtime_1.jsx)(IconButton, { ...(0, slot_1.slot)('safari-menu'), onPress: onMenu, ...(0, gesture_1.touch)(24, 44, 'both'), "aria-label": "Menu", role: "button", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Menu, { size: ICON, color: "$quiet" }) })] })] }), showToolbar ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('safari-secondary-toolbar'), items: "center", gap: "$4", px: "$4", py: "$2", bg: "$panel", borderBottomWidth: 1, borderColor: "$borderColor", children: TOOLBAR_ITEMS.map(({ item, label, icon: Icon }) => ((0, jsx_runtime_1.jsxs)(ToolbarButton, { ...(0, slot_1.slot)(`safari-toolbar-${item}`), onPress: () => onToolbarItemPress?.(item), ...(0, gesture_1.touch)(20, 44, 'y'), "aria-label": label, role: "button", children: [(0, jsx_runtime_1.jsx)(Icon, { size: 14, color: "$quiet" }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$quiet", children: label })] }, item))) })) : null, (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('safari-content'), bg: "$background", children: children })] }));
+}

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export type SafariToolbarItem = 'favorites' | 'reading-list' | 'history';
+export type SafariProps = {
+    children?: ReactNode;
+    /** Shown in the URL pill. */
+    url?: string;
+    /** The Favorites / Reading List / History row under the address bar. */
+    showToolbar?: boolean;
+    onBack?: () => void;
+    onForward?: () => void;
+    onReload?: () => void;
+    onShare?: () => void;
+    onNewTab?: () => void;
+    onMenu?: () => void;
+    /** Fires with which secondary-toolbar item was pressed. */
+    onToolbarItemPress?: (item: SafariToolbarItem) => void;
+};
+/**
+ * A macOS Safari window as a frame around `children` — drop a screenshot, an
+ * iframe or a live component in and it reads as a captured browser tab.
+ */
+export declare function Safari({ children, url, showToolbar, onBack, onForward, onReload, onShare, onNewTab, onMenu, onToolbarItemPress, }: SafariProps): import("react").JSX.Element;
+//# sourceMappingURL=safari.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"safari.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/safari.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AA0CtC,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,cAAc,GAAG,SAAS,CAAA;AAQxE,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,2DAA2D;IAC3D,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;CACvD,CAAA;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,GAA2B,EAC3B,WAAkB,EAClB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,kBAAkB,GACnB,EAAE,WAAW,+BAgJb"}

package/dist/backends/gui/safari.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Safari — a browser-window frame for showing a screenshot, a demo or a live
+ * preview inside: a traffic-light title bar, back/forward controls, a URL
+ * pill with a lock and a reload button, three trailing actions, an optional
+ * secondary toolbar (Favorites / Reading List / History), and the content
+ * area itself.
+ *
+ * The chrome is decorative by default, the same way the real browser's own
+ * controls only matter once something is listening — so every button takes
+ * an optional handler and renders whether or not one is given.
+ */
+import { Bookmark, ChevronLeft, ChevronRight, Clock, Lock, Menu, Plus, RotateCw, Share2, Star, } from '@hanzogui/lucide-icons-2';
+import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import { slot } from './slot.js';
+import { touch } from './gesture.js';
+const CONTROL = 12;
+const ICON = 16;
+/** One traffic-light dot: close (red), minimize (yellow) or maximize (green). Decorative — the real controls live on the window this frame sits in. */
+const Light = styled(XStack, {
+    name: 'SafariLight',
+    width: CONTROL,
+    height: CONTROL,
+    rounded: 999,
+    variants: {
+        tone: {
+            close: { bg: '$red9' },
+            minimize: { bg: '$yellow9' },
+            maximize: { bg: '$green9' },
+        },
+    },
+});
+const IconButton = styled(XStack, {
+    name: 'SafariIconButton',
+    items: 'center',
+    justify: 'center',
+    width: 24,
+    height: 24,
+    rounded: '$2',
+    cursor: 'pointer',
+    hoverStyle: { bg: '$hover' },
+});
+const ToolbarButton = styled(XStack, {
+    name: 'SafariToolbarButton',
+    items: 'center',
+    gap: '$1.5',
+    cursor: 'pointer',
+    hoverStyle: { opacity: 0.75 },
+});
+const TOOLBAR_ITEMS = [
+    { item: 'favorites', label: 'Favorites', icon: Star },
+    { item: 'reading-list', label: 'Reading List', icon: Bookmark },
+    { item: 'history', label: 'History', icon: Clock },
+];
+/**
+ * A macOS Safari window as a frame around `children` — drop a screenshot, an
+ * iframe or a live component in and it reads as a captured browser tab.
+ */
+export function Safari({ children, url = 'https://ui.hanzo.ai', showToolbar = true, onBack, onForward, onReload, onShare, onNewTab, onMenu, onToolbarItemPress, }) {
+    return (_jsxs(YStack, { ...slot('safari'), width: "100%", maxW: 960, self: "center", rounded: "$5", borderWidth: 1, borderColor: "$borderColor", overflow: "hidden", shadowColor: "$shadowColor", shadowRadius: 24, children: [_jsxs(XStack, { ...slot('safari-chrome'), items: "center", gap: "$2", px: "$3", py: "$2", bg: "$panel", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(XStack, { ...slot('safari-traffic-lights'), gap: "$2", children: [_jsx(Light, { tone: "close" }), _jsx(Light, { tone: "minimize" }), _jsx(Light, { tone: "maximize" })] }), _jsxs(XStack, { ...slot('safari-nav'), ml: "$2", items: "center", gap: "$1", children: [_jsx(IconButton, { ...slot('safari-back'), onPress: onBack, ...touch(24, 44, 'both'), "aria-label": "Go back", role: "button", children: _jsx(ChevronLeft, { size: ICON, color: "$quiet" }) }), _jsx(IconButton, { ...slot('safari-forward'), onPress: onForward, ...touch(24, 44, 'both'), "aria-label": "Go forward", role: "button", children: _jsx(ChevronRight, { size: ICON, color: "$quiet" }) })] }), _jsxs(XStack, { ...slot('safari-url-bar'), mx: "$3", flex: 1, items: "center", gap: "$2", rounded: "$4", bg: "$background", px: "$3", py: "$1.5", children: [_jsx(Lock, { size: 14, color: "$quiet" }), _jsx(SizableText, { ...slot('safari-url-text'), flex: 1, size: "$2", color: "$quiet", numberOfLines: 1, children: url }), _jsx(IconButton, { ...slot('safari-reload'), width: 22, height: 22, onPress: onReload, ...touch(22, 44, 'both'), "aria-label": "Reload page", role: "button", children: _jsx(RotateCw, { size: 14, color: "$quiet" }) })] }), _jsxs(XStack, { ...slot('safari-actions'), items: "center", gap: "$1", children: [_jsx(IconButton, { ...slot('safari-share'), onPress: onShare, ...touch(24, 44, 'both'), "aria-label": "Share", role: "button", children: _jsx(Share2, { size: ICON, color: "$quiet" }) }), _jsx(IconButton, { ...slot('safari-new-tab'), onPress: onNewTab, ...touch(24, 44, 'both'), "aria-label": "New tab", role: "button", children: _jsx(Plus, { size: ICON, color: "$quiet" }) }), _jsx(IconButton, { ...slot('safari-menu'), onPress: onMenu, ...touch(24, 44, 'both'), "aria-label": "Menu", role: "button", children: _jsx(Menu, { size: ICON, color: "$quiet" }) })] })] }), showToolbar ? (_jsx(XStack, { ...slot('safari-secondary-toolbar'), items: "center", gap: "$4", px: "$4", py: "$2", bg: "$panel", borderBottomWidth: 1, borderColor: "$borderColor", children: TOOLBAR_ITEMS.map(({ item, label, icon: Icon }) => (_jsxs(ToolbarButton, { ...slot(`safari-toolbar-${item}`), onPress: () => onToolbarItemPress?.(item), ...touch(20, 44, 'y'), "aria-label": label, role: "button", children: [_jsx(Icon, { size: 14, color: "$quiet" }), _jsx(SizableText, { size: "$2", color: "$quiet", children: label })] }, item))) })) : null, _jsx(YStack, { ...slot('safari-content'), bg: "$background", children: children })] }));
+}
+//# sourceMappingURL=safari.js.map

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

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

package/dist/backends/gui/snippet.cjs

@@ -0,0 +1,144 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Snippet = Snippet;
+exports.InlineCode = InlineCode;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Snippet — a piece of source code shown as text, in three shapes: a bordered
+ * `default` panel with a header (filename, language badge, copy button), an
+ * `inline` code span for a phrase inside a sentence, and a borderless
+ * `minimal` block that keeps only a floating copy button. Any panel over
+ * `collapsedHeight` can be made `expandable`, showing a fade and a
+ * maximize/minimize control that toggles between `collapsedHeight` and
+ * `maxHeight`.
+ *
+ * A line is plain monospace text, not colorized tokens — the workspace ships
+ * no syntax highlighter, the same constraint `code-block.tsx` documents.
+ * `theme` names a fixed palette for the code surface, independent of the
+ * page's own light or dark theme; `size` picks the type scale.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const badge_1 = require("./badge.cjs");
+const button_1 = require("./button.cjs");
+const slot_1 = require("./slot.cjs");
+/** One fixed color quartet per theme — see `code-block.tsx` for the same trade. */
+const PALETTE = {
+    dark: { bg: '#020617', border: '#1e293b', fg: '#e2e8f0', muted: '#94a3b8' },
+    light: { bg: '#f8fafc', border: '#e2e8f0', fg: '#0f172a', muted: '#64748b' },
+    github: { bg: '#ffffff', border: '#e2e8f0', fg: '#24292e', muted: '#6e7781' },
+    'github-dark': { bg: '#0d1117', border: '#30363d', fg: '#c9d1d9', muted: '#8b949e' },
+    terminal: { bg: '#000000', border: '#22c55e4d', fg: '#4ade80', muted: '#4ade8099' },
+    retro: { bg: '#fffbeb', border: '#fde68a', fg: '#78350f', muted: '#92400e' },
+};
+const FONT_SIZE = { xs: 11, sm: 12, default: 14, lg: 16 };
+const Frame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'Snippet',
+    position: 'relative',
+    width: '100%',
+    variants: {
+        variant: {
+            default: { rounded: '$3', borderWidth: 1, overflow: 'hidden' },
+            inline: {},
+            minimal: { overflow: 'hidden' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const Header = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'SnippetHeader',
+    items: 'center',
+    justify: 'space-between',
+    gap: '$2',
+    px: '$4',
+    py: '$2',
+    borderBottomWidth: 1,
+});
+const Row = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'SnippetLine',
+    items: 'center',
+    minH: 24,
+    px: '$4',
+    py: '$0.5',
+    gap: '$2',
+    borderLeftWidth: 2,
+    borderLeftColor: 'transparent',
+    variants: {
+        highlighted: {
+            true: { bg: '#3b82f61a', borderLeftColor: '#3b82f6' },
+        },
+        wrap: {
+            true: { flexWrap: 'wrap' },
+        },
+    },
+});
+const Mono = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'SnippetText',
+    fontFamily: '$mono',
+    variants: {
+        wrap: {
+            true: { whiteSpace: 'pre-wrap', style: { wordBreak: 'break-word' } },
+            false: { whiteSpace: 'pre' },
+        },
+    },
+    defaultVariants: { wrap: false },
+});
+/** `code` split into numbered rows starting at `startLineNumber`. */
+const rows = (code, start) => code.split('\n').map((text, i) => ({ n: i + start, text }));
+/** The copy button, shared by every variant that shows one. */
+function CopyButton({ copied, onPress, muted, floating, }) {
+    const label = copied ? 'Copied' : 'Copy code';
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", size: "icon-sm", onClick: onPress, "aria-label": label, title: label, ...(floating ? { position: 'absolute', t: '$2', r: '$2' } : null), children: copied ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: "#22c55e" }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, { size: 14, color: muted }) }));
+}
+/**
+ * A syntax-plain code panel: `variant="default"` shows a header and a gutter
+ * of numbered lines, `variant="inline"` renders one line as an inline code
+ * span, and `variant="minimal"` drops the border and header down to a floating
+ * copy button. `expandable` clamps the body to `collapsedHeight` until its
+ * maximize control is pressed.
+ */
+function Snippet({ code, language = 'text', filename, variant, theme, size, showLineNumbers = false, highlightLines = [], showCopyButton = true, showLanguageBadge = true, showHeader = true, maxHeight, expandable = false, collapsedHeight = 200, wrapLines = false, startLineNumber = 1, ...props }) {
+    const resolvedVariant = variant ?? 'default';
+    const palette = PALETTE[theme ?? 'dark'];
+    const fontSize = FONT_SIZE[size ?? 'default'];
+    const lineHeight = fontSize * 1.5;
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(!expandable);
+    const lines = (0, react_1.useMemo)(() => rows(code, startLineNumber), [code, startLineNumber]);
+    const copy = (0, react_1.useCallback)(async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // No clipboard permission or no clipboard API — nothing else to do.
+        }
+    }, [code]);
+    if (resolvedVariant === 'inline') {
+        return ((0, jsx_runtime_1.jsx)(Mono, { ...(0, slot_1.slot)('snippet'), "data-variant": "inline", fontFamily: "$mono", rounded: "$2", px: "$2", py: "$1", wrap: wrapLines, style: {
+                display: 'inline-block',
+                backgroundColor: palette.bg,
+                color: palette.fg,
+                fontSize,
+            }, ...props, children: code }));
+    }
+    const hasHeader = resolvedVariant === 'default' &&
+        showHeader &&
+        Boolean(filename || (showLanguageBadge && language) || showCopyButton || expandable);
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ...(0, slot_1.slot)('snippet'), "data-variant": resolvedVariant, variant: resolvedVariant, style: resolvedVariant === 'default'
+            ? { backgroundColor: palette.bg, borderColor: palette.border }
+            : undefined, ...props, children: [hasHeader && ((0, jsx_runtime_1.jsxs)(Header, { ...(0, slot_1.slot)('snippet-header'), style: { borderBottomColor: palette.border }, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [filename && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1.5", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.FileText, { size: 14, color: palette.muted }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", fontWeight: "500", style: { color: palette.fg }, children: filename })] })), showLanguageBadge && language && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { ...(0, slot_1.slot)('snippet-language'), variant: "secondary", children: language }))] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", children: [expandable && ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", size: "icon-sm", onClick: () => setIsExpanded((v) => !v), "aria-label": isExpanded ? 'Collapse' : 'Expand', title: isExpanded ? 'Collapse' : 'Expand', children: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Minimize2, { size: 14, color: palette.muted })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Maximize2, { size: 14, color: palette.muted })) })), showCopyButton && (0, jsx_runtime_1.jsx)(CopyButton, { copied: copied, onPress: copy, muted: palette.muted })] })] })), (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('snippet-body'), style: {
+                    maxHeight: isExpanded ? maxHeight : collapsedHeight,
+                    overflow: 'auto',
+                }, children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { py: "$2", minW: "100%", self: "flex-start", children: lines.map(({ n, text }) => {
+                        const isHighlighted = highlightLines.includes(n);
+                        return ((0, jsx_runtime_1.jsxs)(Row, { highlighted: isHighlighted, wrap: wrapLines, "data-slot": "snippet-line", "data-line": n, "data-highlighted": isHighlighted ? 'true' : undefined, children: [showLineNumbers && ((0, jsx_runtime_1.jsx)(Mono, { width: 32, text: "right", select: "none", wrap: false, fontSize: FONT_SIZE.sm, lineHeight: lineHeight, style: { color: palette.muted }, children: n })), (0, jsx_runtime_1.jsx)(Mono, { flex: 1, wrap: wrapLines, fontSize: fontSize, lineHeight: lineHeight, style: { color: palette.fg }, children: text || ' ' })] }, n));
+                    }) }) }), expandable && !isExpanded && ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('snippet-fade'), position: "absolute", b: 0, l: 0, r: 0, height: 32, pointerEvents: "none", style: { background: `linear-gradient(to top, ${palette.bg}, transparent)` } })), resolvedVariant === 'minimal' && showCopyButton && ((0, jsx_runtime_1.jsx)(CopyButton, { copied: copied, onPress: copy, muted: palette.muted, floating: true }))] }));
+}
+/** A phrase of code inline in text — `Snippet` fixed to `variant="inline"`. */
+function InlineCode({ children, language, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Snippet, { code: children, language: language, variant: "inline", showCopyButton: false, showLanguageBadge: false, showHeader: false, ...props }));
+}

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

@@ -0,0 +1,38 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export type SnippetVariant = 'default' | 'inline' | 'minimal';
+export type SnippetTheme = 'dark' | 'light' | 'github' | 'github-dark' | 'terminal' | 'retro';
+export type SnippetSize = 'xs' | 'sm' | 'default' | 'lg';
+export interface SnippetProps extends Omit<ComponentProps<'div'>, 'children'> {
+    code: string;
+    language?: string;
+    filename?: string;
+    variant?: SnippetVariant | null;
+    theme?: SnippetTheme | null;
+    size?: SnippetSize | null;
+    showLineNumbers?: boolean;
+    highlightLines?: number[];
+    showCopyButton?: boolean;
+    showLanguageBadge?: boolean;
+    showHeader?: boolean;
+    /** The expanded body's ceiling, in px or any CSS length. */
+    maxHeight?: number | string;
+    expandable?: boolean;
+    /** The collapsed body's height while `expandable` and not yet expanded. */
+    collapsedHeight?: number | string;
+    wrapLines?: boolean;
+    startLineNumber?: number;
+}
+/**
+ * A syntax-plain code panel: `variant="default"` shows a header and a gutter
+ * of numbered lines, `variant="inline"` renders one line as an inline code
+ * span, and `variant="minimal"` drops the border and header down to a floating
+ * copy button. `expandable` clamps the body to `collapsedHeight` until its
+ * maximize control is pressed.
+ */
+export declare function Snippet({ code, language, filename, variant, theme, size, showLineNumbers, highlightLines, showCopyButton, showLanguageBadge, showHeader, maxHeight, expandable, collapsedHeight, wrapLines, startLineNumber, ...props }: SnippetProps): import("react").JSX.Element;
+export interface InlineCodeProps extends Omit<SnippetProps, 'variant' | 'code'> {
+    children: string;
+}
+/** A phrase of code inline in text — `Snippet` fixed to `variant="inline"`. */
+export declare function InlineCode({ children, language, ...props }: InlineCodeProps): ReactNode;
+//# sourceMappingURL=snippet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snippet.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/snippet.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK3F,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAE7D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,OAAO,CAAA;AAE7F,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;AAiBxD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3E,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACzB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AA6FD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,QAAiB,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,IAAI,EACJ,eAAuB,EACvB,cAAmB,EACnB,cAAqB,EACrB,iBAAwB,EACxB,UAAiB,EACjB,SAAS,EACT,UAAkB,EAClB,eAAqB,EACrB,SAAiB,EACjB,eAAmB,EACnB,GAAG,KAAK,EACT,EAAE,YAAY,+BAkKd;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7E,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,SAAS,CAYvF"}