@hanzo/ui 8.27.91 → 8.29.0

package/dist/backends/gui/toaster.cjs

@@ -1,13 +1,177 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toast = exports.Toaster = void 0;
+exports.toast = exports.Toaster = exports.TOAST_DURATION = void 0;
+exports.ToastFace = ToastFace;
+exports.ToastCard = ToastCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Toaster — the toast viewport, mounted once near the root of an app, and
+ * `toast()`, the sonner-shaped call that fills it.
+ *
+ * gui owns the machinery: `@hanzogui/toast/v2`'s observer (`toast()`), its
+ * stack, its swipe and its exit animation. This file draws the toast itself, on
+ * the composable API (`Toast` → `Viewport` → `List` with a `renderItem`), in the
+ * record kit's shape — twenty-ui's Toast and Toaster (MIT, NOTICE):
+ *
+ *   · 296 wide on the floating material (`glass(2)`), 8px corners, padding
+ *     8 8 4, 8px between toasts, at the bottom-right 12px in; on a phone (≤768)
+ *     the full width at the top with square corners.
+ *   · A header row: the status icon (16), the message (12px, quiet, medium),
+ *     then a "Cancel" text button and a 24px close button pushed right.
+ *   · The description under it at 12px, soft, indented 24 to clear the icon.
+ *   · An action as a footer: a hairline, then the button at the end.
+ *   · The COUNTDOWN as a fill behind the whole toast in its status's tint,
+ *     draining linearly over the toast's duration (6s unless told) and PAUSED
+ *     while the pointer is over the toast or focus is inside it. A
+ *     `data: { progress }` (0–100) replaces the countdown with a progress fill,
+ *     and such a toast stays until it is dismissed or updated.
+ *   · At most three at once: a fourth closes the oldest.
+ *
+ * The timer is OURS, not gui's. gui's pauses only while the whole viewport is
+ * hovered and restarts from the full duration when it resumes, so a fill drawn
+ * over it would empty before the toast went. Each item hands gui a copy of its
+ * toast with an infinite duration and runs the one clock both the fill and the
+ * dismissal read.
+ *
+ * `toast()` keeps its signature. Status is its type — `toast()` neutral,
+ * `toast.info|success|warning|error()`; `id` is the dedupe key (a second toast
+ * with a visible one's id updates it rather than adding one); `cancel`,
+ * `action`, `description`, `duration`, `icon`, `onDismiss`, `onAutoClose` as in
+ * sonner. `className`, `style`, `richColors` and the per-part `classNames` stay
+ * accepted and inert.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const v2_1 = require("@hanzogui/toast/v2");
 Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return v2_1.toast; } });
 const react_1 = require("react");
+const glass_1 = require("../../glass.cjs");
+const button_1 = require("./button.cjs");
+const feedback_1 = require("./feedback.cjs");
+const slot_1 = require("./slot.cjs");
+/** A toast's default life, ms. */
+exports.TOAST_DURATION = 6000;
+const WIDTH = 296;
+const GAP = 8;
+const INSET = 12;
+const STATUS = {
+    default: 'neutral',
+    loading: 'neutral',
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+const ICON = {
+    neutral: lucide_icons_2_1.TriangleAlert,
+    info: lucide_icons_2_1.Info,
+    success: lucide_icons_2_1.SquareCheck,
+    warning: lucide_icons_2_1.TriangleAlert,
+    error: lucide_icons_2_1.TriangleAlert,
+};
+const read = (v) => (typeof v === 'function' ? v() : v);
+/** The progress a toast carries in `data.progress`, 0–100, if it carries one. */
+const progressOf = (t) => {
+    const p = t.data?.progress;
+    return typeof p === 'number' && Number.isFinite(p) ? Math.max(0, Math.min(100, p)) : null;
+};
+/** The frame every toast wears: the floating material, 296 wide. */
+const frame = (phone) => ({
+    ...(0, glass_1.glass)(2),
+    width: phone ? '100%' : WIDTH,
+    rounded: phone ? 0 : '$3',
+    borderWidth: 0,
+    p: 0,
+    overflow: 'hidden',
+});
+/**
+ * The body inside it, padded 8 8 4 and holding the fill. It is the body that
+ * hears the pointer and the focus: gui's item does not hand its own hover
+ * handlers on (measured — a pointer over the item reached none of them), and
+ * the body covers the whole toast.
+ */
+const body = { position: 'relative', pt: '$2', px: '$2', pb: '$1' };
+/**
+ * What a toast shows, without the stack around it: the fill, the header, the
+ * description and the footer. `Toaster` draws one inside each gui item; the
+ * gallery draws one alone so its rules ship in the sheet.
+ */
+function ToastFace({ t, duration, paused = false, onClose, onHold }) {
+    const status = STATUS[t.type ?? 'default'] ?? 'neutral';
+    const p = (0, feedback_1.paint)(status);
+    const Icon = ICON[status];
+    const progress = progressOf(t);
+    const title = read(t.title);
+    const description = t.description ? read(t.description) : null;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('toast-body'), ...body, ...(onHold
+            ? {
+                onHoverIn: () => onHold(true),
+                onHoverOut: () => onHold(false),
+                onFocus: () => onHold(true),
+                onBlur: () => onHold(false),
+            }
+            : null), children: [progress !== null ? ((0, jsx_runtime_1.jsx)(gui_1.View, { ...(0, slot_1.slot)('toast-progress'), position: "absolute", t: 0, l: 0, b: 0, bg: p.tint, style: { width: `${progress}%`, transition: 'width 300ms linear' }, pointerEvents: "none" })) : duration !== undefined ? ((0, jsx_runtime_1.jsx)(gui_1.View, { ...(0, slot_1.slot)('toast-countdown'), "data-motion": "drain", "data-paused": paused ? '' : undefined, position: "absolute", t: 0, l: 0, r: 0, b: 0, bg: p.tint, pointerEvents: "none", style: { ['--drain']: `${duration}ms` } })) : null, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('toast-header'), items: "center", gap: "$2", mb: "$1", minH: 24, children: [(0, jsx_runtime_1.jsx)(gui_1.View, { shrink: 0, width: 16, height: 16, items: "center", justify: "center", children: t.icon ?? (0, jsx_runtime_1.jsx)(Icon, { size: 16, color: p.ink, "aria-label": status }) }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('toast-message'), flex: 1, size: "$1", fontWeight: "500", color: "$aside", numberOfLines: 2, children: title }), t.cancel ? ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('toast-cancel'), size: "xs", variant: "ghost", fontWeight: "400", onPress: (e) => {
+                            t.cancel?.onClick?.(e);
+                            onClose?.();
+                        }, children: t.cancel.label || 'Cancel' })) : null, t.dismissible === false ? null : ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('toast-close'), size: "icon-xs", variant: "ghost", emphasis: "subtle", "aria-label": "Close", onPress: onClose, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, {}) }))] }), description ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('toast-description'), size: "$1", color: "$hint", pl: 24, maxW: 224, numberOfLines: 1, mb: "$1", children: description })) : null, t.action ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('toast-footer'), mt: "$2", borderTopWidth: 1, borderColor: "$borderColor", pt: "$1", items: "flex-end", children: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "xs", variant: "ghost", onPress: (e) => {
+                        t.action?.onClick?.(e);
+                        if (!e?.defaultPrevented)
+                            onClose?.();
+                    }, children: t.action.label }) })) : null] }));
+}
+/** A toast at rest, outside any stack — the gallery's, and a docs page's. */
+function ToastCard({ phone = false, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('toast'), position: "relative", ...frame(phone), children: (0, jsx_runtime_1.jsx)(ToastFace, { ...props }) }));
+}
+function ToastItem({ t, index, fallback, phone, }) {
+    const progress = progressOf(t);
+    const duration = t.duration ?? fallback;
+    const timed = progress === null && t.type !== 'loading' && Number.isFinite(duration) && duration > 0;
+    const [paused, setPaused] = (0, react_1.useState)(false);
+    const remaining = (0, react_1.useRef)(duration);
+    const done = (0, react_1.useRef)(false);
+    // The one clock: the fill drains on it and the toast closes on it. Once:
+    // the dismissal re-renders the item with a new toast object, and the clock
+    // must not start over on it.
+    (0, react_1.useEffect)(() => {
+        if (!timed || paused || done.current)
+            return;
+        const start = Date.now();
+        const id = setTimeout(() => {
+            done.current = true;
+            t.onAutoClose?.(t);
+            v2_1.toast.dismiss(t.id);
+        }, remaining.current);
+        return () => {
+            clearTimeout(id);
+            remaining.current = Math.max(0, remaining.current - (Date.now() - start));
+        };
+    }, [timed, paused, t]);
+    // gui sees an untimed toast, so its own clock never fires (see the header).
+    const held = (0, react_1.useMemo)(() => ({ ...t, duration: Number.POSITIVE_INFINITY }), [t]);
+    const close = () => {
+        t.onDismiss?.(t);
+        v2_1.toast.dismiss(t.id);
+    };
+    return ((0, jsx_runtime_1.jsx)(v2_1.Toast.Item, { toast: held, index: index, ...frame(phone), "data-status": STATUS[t.type ?? 'default'] ?? 'neutral', children: (0, jsx_runtime_1.jsx)(ToastFace, { t: t, duration: timed ? duration : undefined, paused: paused, onClose: close, onHold: setPaused }) }));
+}
+/** Closes the oldest once more than `limit` are on screen. */
+function Limit({ limit }) {
+    const { toasts } = (0, v2_1.useToasts)();
+    const live = toasts.filter((t) => !t.delete);
+    (0, react_1.useEffect)(() => {
+        // Newest first: the ones past the limit are the oldest.
+        for (const t of live.slice(limit))
+            v2_1.toast.dismiss(t.id);
+    }, [live, limit]);
+    return null;
+}
 const Toaster = /* @__PURE__ */ (0, react_1.forwardRef)(function Toaster(props, ref) {
-    const { theme = 'system', toastOptions, richColors: _richColors, ...rest } = props;
-    return (0, jsx_runtime_1.jsx)(v2_1.Toaster, { ref: ref, theme: theme, toastOptions: toastOptions, ...rest });
+    const { theme = 'system', toastOptions, richColors: _richColors, className: _className, style: _style, position, offset, gap, limit = 3, duration, containerAriaLabel = 'Notifications', hotkey, ...rest } = props;
+    const media = (0, gui_1.useMedia)();
+    const phone = !!media['max-md'];
+    const fallback = toastOptions?.duration ?? duration ?? exports.TOAST_DURATION;
+    return ((0, jsx_runtime_1.jsx)(v2_1.Toast, { ...rest, theme: theme, position: position ?? (phone ? 'top-center' : 'bottom-right'), gap: gap ?? GAP, visibleToasts: limit, duration: Number.POSITIVE_INFINITY, children: (0, jsx_runtime_1.jsxs)(v2_1.Toast.Viewport, { ref: ref, ...(0, slot_1.slot)('toaster'), offset: offset ?? (phone ? 0 : INSET), hotkey: hotkey, label: containerAriaLabel, ...(phone ? { width: '100%' } : null), children: [(0, jsx_runtime_1.jsx)(Limit, { limit: limit }), (0, jsx_runtime_1.jsx)(v2_1.Toast.List, { renderItem: ({ toast: t, index }) => (0, jsx_runtime_1.jsx)(ToastItem, { t: t, index: index, fallback: fallback, phone: phone }, t.id) })] }) }));
 });
 exports.Toaster = Toaster;

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

@@ -1,4 +1,4 @@
-import { toast, type ExternalToast, type ToasterProps as GuiToasterProps } from '@hanzogui/toast/v2';
+import { toast, type ExternalToast, type ToasterProps as GuiToasterProps, type ToastT } from '@hanzogui/toast/v2';
 /** Sonner's per-part class hooks. Inert — see the note above. */
 export type ToasterClassNames = Partial<Record<'toast' | 'title' | 'description' | 'icon' | 'actionButton' | 'cancelButton' | 'closeButton', string>>;
 export interface ToasterProps extends Omit<GuiToasterProps, 'toastOptions'> {
@@ -6,12 +6,38 @@ export interface ToasterProps extends Omit<GuiToasterProps, 'toastOptions'> {
     className?: string;
     /** Inert. gui themes the viewport from tokens. */
     style?: Record<string, string | number>;
-    /** Inert. Sonner's semantic palette; gui takes its colours from tokens. */
+    /** Inert. Sonner's semantic palette; the status colours are the kit's own. */
     richColors?: boolean;
     toastOptions?: ExternalToast & {
         classNames?: ToasterClassNames;
     };
+    /** How many show at once; a further one closes the oldest. Default 3. */
+    limit?: number;
 }
+/** A toast's default life, ms. */
+export declare const TOAST_DURATION = 6000;
+export type ToastFaceProps = {
+    /** The toast, as `toast()` made it. */
+    t: Pick<ToastT, 'title' | 'description' | 'type' | 'icon' | 'action' | 'cancel' | 'dismissible' | 'data'>;
+    /** Its life in ms, when it is timed; the countdown drains over it. */
+    duration?: number;
+    /** Whether the countdown is held. */
+    paused?: boolean;
+    /** Close it — the close button, and Cancel or the action after their own handler. */
+    onClose?: () => void;
+};
+/**
+ * What a toast shows, without the stack around it: the fill, the header, the
+ * description and the footer. `Toaster` draws one inside each gui item; the
+ * gallery draws one alone so its rules ship in the sheet.
+ */
+export declare function ToastFace({ t, duration, paused, onClose, onHold }: ToastFaceProps & {
+    onHold?: (held: boolean) => void;
+}): import("react").JSX.Element;
+/** A toast at rest, outside any stack — the gallery's, and a docs page's. */
+export declare function ToastCard({ phone, ...props }: ToastFaceProps & {
+    phone?: boolean;
+}): import("react").JSX.Element;
 declare const Toaster: import("react").ForwardRefExoticComponent<ToasterProps & import("react").RefAttributes<any>>;
 export { Toaster, toast };
 //# sourceMappingURL=toaster.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/toaster.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,oBAAoB,CAAA;AAG3B,iEAAiE;AACjE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACrC,MAAM,CACF,OAAO,GACP,OAAO,GACP,aAAa,GACb,MAAM,GACN,cAAc,GACd,cAAc,GACd,aAAa,EACf,MAAM,CACP,CACF,CAAA;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACzE,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;IACvC,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,aAAa,GAAG;QAAE,UAAU,CAAC,EAAE,iBAAiB,CAAA;KAAE,CAAA;CAClE;AAED,QAAA,MAAM,OAAO,8FAGX,CAAA;AAEF,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/toaster.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAEL,KAAK,EAEL,KAAK,aAAa,EAClB,KAAK,YAAY,IAAI,eAAe,EACpC,KAAK,MAAM,EACZ,MAAM,oBAAoB,CAAA;AAO3B,iEAAiE;AACjE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACrC,MAAM,CACF,OAAO,GACP,OAAO,GACP,aAAa,GACb,MAAM,GACN,cAAc,GACd,cAAc,GACd,aAAa,EACf,MAAM,CACP,CACF,CAAA;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACzE,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;IACvC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,aAAa,GAAG;QAAE,UAAU,CAAC,EAAE,iBAAiB,CAAA;KAAE,CAAA;IACjE,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,kCAAkC;AAClC,eAAO,MAAM,cAAc,OAAO,CAAA;AAiDlC,MAAM,MAAM,cAAc,GAAG;IAC3B,uCAAuC;IACvC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,GAAG,MAAM,CAAC,CAAA;IACzG,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAc,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,cAAc,GAAG;IAAE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,+BA8FhI;AAED,6EAA6E;AAC7E,wBAAgB,SAAS,CAAC,EAAE,KAAa,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,+BAM1F;AAmED,QAAA,MAAM,OAAO,8FA2CX,CAAA;AAEF,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/backends/gui/toaster.js

@@ -1,10 +1,172 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Toaster as GuiToaster, toast, } from '@hanzogui/toast/v2';
-import { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Toaster — the toast viewport, mounted once near the root of an app, and
+ * `toast()`, the sonner-shaped call that fills it.
+ *
+ * gui owns the machinery: `@hanzogui/toast/v2`'s observer (`toast()`), its
+ * stack, its swipe and its exit animation. This file draws the toast itself, on
+ * the composable API (`Toast` → `Viewport` → `List` with a `renderItem`), in the
+ * record kit's shape — twenty-ui's Toast and Toaster (MIT, NOTICE):
+ *
+ *   · 296 wide on the floating material (`glass(2)`), 8px corners, padding
+ *     8 8 4, 8px between toasts, at the bottom-right 12px in; on a phone (≤768)
+ *     the full width at the top with square corners.
+ *   · A header row: the status icon (16), the message (12px, quiet, medium),
+ *     then a "Cancel" text button and a 24px close button pushed right.
+ *   · The description under it at 12px, soft, indented 24 to clear the icon.
+ *   · An action as a footer: a hairline, then the button at the end.
+ *   · The COUNTDOWN as a fill behind the whole toast in its status's tint,
+ *     draining linearly over the toast's duration (6s unless told) and PAUSED
+ *     while the pointer is over the toast or focus is inside it. A
+ *     `data: { progress }` (0–100) replaces the countdown with a progress fill,
+ *     and such a toast stays until it is dismissed or updated.
+ *   · At most three at once: a fourth closes the oldest.
+ *
+ * The timer is OURS, not gui's. gui's pauses only while the whole viewport is
+ * hovered and restarts from the full duration when it resumes, so a fill drawn
+ * over it would empty before the toast went. Each item hands gui a copy of its
+ * toast with an infinite duration and runs the one clock both the fill and the
+ * dismissal read.
+ *
+ * `toast()` keeps its signature. Status is its type — `toast()` neutral,
+ * `toast.info|success|warning|error()`; `id` is the dedupe key (a second toast
+ * with a visible one's id updates it rather than adding one); `cancel`,
+ * `action`, `description`, `duration`, `icon`, `onDismiss`, `onAutoClose` as in
+ * sonner. `className`, `style`, `richColors` and the per-part `classNames` stay
+ * accepted and inert.
+ */
+import { SizableText, View, XStack, YStack, useMedia } from '@hanzo/gui';
+import { Info, SquareCheck, TriangleAlert, X } from '@hanzogui/lucide-icons-2';
+import { Toast, toast, useToasts, } from '@hanzogui/toast/v2';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { glass } from '../../glass.js';
+import { Button } from './button.js';
+import { paint } from './feedback.js';
+import { slot } from './slot.js';
+/** A toast's default life, ms. */
+export const TOAST_DURATION = 6000;
+const WIDTH = 296;
+const GAP = 8;
+const INSET = 12;
+const STATUS = {
+    default: 'neutral',
+    loading: 'neutral',
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+const ICON = {
+    neutral: TriangleAlert,
+    info: Info,
+    success: SquareCheck,
+    warning: TriangleAlert,
+    error: TriangleAlert,
+};
+const read = (v) => (typeof v === 'function' ? v() : v);
+/** The progress a toast carries in `data.progress`, 0–100, if it carries one. */
+const progressOf = (t) => {
+    const p = t.data?.progress;
+    return typeof p === 'number' && Number.isFinite(p) ? Math.max(0, Math.min(100, p)) : null;
+};
+/** The frame every toast wears: the floating material, 296 wide. */
+const frame = (phone) => ({
+    ...glass(2),
+    width: phone ? '100%' : WIDTH,
+    rounded: phone ? 0 : '$3',
+    borderWidth: 0,
+    p: 0,
+    overflow: 'hidden',
+});
+/**
+ * The body inside it, padded 8 8 4 and holding the fill. It is the body that
+ * hears the pointer and the focus: gui's item does not hand its own hover
+ * handlers on (measured — a pointer over the item reached none of them), and
+ * the body covers the whole toast.
+ */
+const body = { position: 'relative', pt: '$2', px: '$2', pb: '$1' };
+/**
+ * What a toast shows, without the stack around it: the fill, the header, the
+ * description and the footer. `Toaster` draws one inside each gui item; the
+ * gallery draws one alone so its rules ship in the sheet.
+ */
+export function ToastFace({ t, duration, paused = false, onClose, onHold }) {
+    const status = STATUS[t.type ?? 'default'] ?? 'neutral';
+    const p = paint(status);
+    const Icon = ICON[status];
+    const progress = progressOf(t);
+    const title = read(t.title);
+    const description = t.description ? read(t.description) : null;
+    return (_jsxs(YStack, { ...slot('toast-body'), ...body, ...(onHold
+            ? {
+                onHoverIn: () => onHold(true),
+                onHoverOut: () => onHold(false),
+                onFocus: () => onHold(true),
+                onBlur: () => onHold(false),
+            }
+            : null), children: [progress !== null ? (_jsx(View, { ...slot('toast-progress'), position: "absolute", t: 0, l: 0, b: 0, bg: p.tint, style: { width: `${progress}%`, transition: 'width 300ms linear' }, pointerEvents: "none" })) : duration !== undefined ? (_jsx(View, { ...slot('toast-countdown'), "data-motion": "drain", "data-paused": paused ? '' : undefined, position: "absolute", t: 0, l: 0, r: 0, b: 0, bg: p.tint, pointerEvents: "none", style: { ['--drain']: `${duration}ms` } })) : null, _jsxs(XStack, { ...slot('toast-header'), items: "center", gap: "$2", mb: "$1", minH: 24, children: [_jsx(View, { shrink: 0, width: 16, height: 16, items: "center", justify: "center", children: t.icon ?? _jsx(Icon, { size: 16, color: p.ink, "aria-label": status }) }), _jsx(SizableText, { ...slot('toast-message'), flex: 1, size: "$1", fontWeight: "500", color: "$aside", numberOfLines: 2, children: title }), t.cancel ? (_jsx(Button, { ...slot('toast-cancel'), size: "xs", variant: "ghost", fontWeight: "400", onPress: (e) => {
+                            t.cancel?.onClick?.(e);
+                            onClose?.();
+                        }, children: t.cancel.label || 'Cancel' })) : null, t.dismissible === false ? null : (_jsx(Button, { ...slot('toast-close'), size: "icon-xs", variant: "ghost", emphasis: "subtle", "aria-label": "Close", onPress: onClose, children: _jsx(X, {}) }))] }), description ? (_jsx(SizableText, { ...slot('toast-description'), size: "$1", color: "$hint", pl: 24, maxW: 224, numberOfLines: 1, mb: "$1", children: description })) : null, t.action ? (_jsx(YStack, { ...slot('toast-footer'), mt: "$2", borderTopWidth: 1, borderColor: "$borderColor", pt: "$1", items: "flex-end", children: _jsx(Button, { size: "xs", variant: "ghost", onPress: (e) => {
+                        t.action?.onClick?.(e);
+                        if (!e?.defaultPrevented)
+                            onClose?.();
+                    }, children: t.action.label }) })) : null] }));
+}
+/** A toast at rest, outside any stack — the gallery's, and a docs page's. */
+export function ToastCard({ phone = false, ...props }) {
+    return (_jsx(YStack, { ...slot('toast'), position: "relative", ...frame(phone), children: _jsx(ToastFace, { ...props }) }));
+}
+function ToastItem({ t, index, fallback, phone, }) {
+    const progress = progressOf(t);
+    const duration = t.duration ?? fallback;
+    const timed = progress === null && t.type !== 'loading' && Number.isFinite(duration) && duration > 0;
+    const [paused, setPaused] = useState(false);
+    const remaining = useRef(duration);
+    const done = useRef(false);
+    // The one clock: the fill drains on it and the toast closes on it. Once:
+    // the dismissal re-renders the item with a new toast object, and the clock
+    // must not start over on it.
+    useEffect(() => {
+        if (!timed || paused || done.current)
+            return;
+        const start = Date.now();
+        const id = setTimeout(() => {
+            done.current = true;
+            t.onAutoClose?.(t);
+            toast.dismiss(t.id);
+        }, remaining.current);
+        return () => {
+            clearTimeout(id);
+            remaining.current = Math.max(0, remaining.current - (Date.now() - start));
+        };
+    }, [timed, paused, t]);
+    // gui sees an untimed toast, so its own clock never fires (see the header).
+    const held = useMemo(() => ({ ...t, duration: Number.POSITIVE_INFINITY }), [t]);
+    const close = () => {
+        t.onDismiss?.(t);
+        toast.dismiss(t.id);
+    };
+    return (_jsx(Toast.Item, { toast: held, index: index, ...frame(phone), "data-status": STATUS[t.type ?? 'default'] ?? 'neutral', children: _jsx(ToastFace, { t: t, duration: timed ? duration : undefined, paused: paused, onClose: close, onHold: setPaused }) }));
+}
+/** Closes the oldest once more than `limit` are on screen. */
+function Limit({ limit }) {
+    const { toasts } = useToasts();
+    const live = toasts.filter((t) => !t.delete);
+    useEffect(() => {
+        // Newest first: the ones past the limit are the oldest.
+        for (const t of live.slice(limit))
+            toast.dismiss(t.id);
+    }, [live, limit]);
+    return null;
+}
 const Toaster = /* @__PURE__ */ forwardRef(function Toaster(props, ref) {
-    const { theme = 'system', toastOptions, richColors: _richColors, ...rest } = props;
-    return _jsx(GuiToaster, { ref: ref, theme: theme, toastOptions: toastOptions, ...rest });
+    const { theme = 'system', toastOptions, richColors: _richColors, className: _className, style: _style, position, offset, gap, limit = 3, duration, containerAriaLabel = 'Notifications', hotkey, ...rest } = props;
+    const media = useMedia();
+    const phone = !!media['max-md'];
+    const fallback = toastOptions?.duration ?? duration ?? TOAST_DURATION;
+    return (_jsx(Toast, { ...rest, theme: theme, position: position ?? (phone ? 'top-center' : 'bottom-right'), gap: gap ?? GAP, visibleToasts: limit, duration: Number.POSITIVE_INFINITY, children: _jsxs(Toast.Viewport, { ref: ref, ...slot('toaster'), offset: offset ?? (phone ? 0 : INSET), hotkey: hotkey, label: containerAriaLabel, ...(phone ? { width: '100%' } : null), children: [_jsx(Limit, { limit: limit }), _jsx(Toast.List, { renderItem: ({ toast: t, index }) => _jsx(ToastItem, { t: t, index: index, fallback: fallback, phone: phone }, t.id) })] }) }));
 });
 export { Toaster, toast };
 //# sourceMappingURL=toaster.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../../../src/backends/gui/toaster.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAgBZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,KAAK,GAGN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA0BlC,MAAM,OAAO,GAAG,eAAe,CAAC,UAAU,CAA2B,SAAS,OAAO,CAAC,KAAK,EAAE,GAAG;IAC9F,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAClF,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,KAAM,IAAI,GAAI,CAAA;AACrF,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../../../src/backends/gui/toaster.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/toggle-group.cjs

@@ -66,6 +66,11 @@ const REST = {
         borderColor: '$borderColor',
         hoverStyle: { backgroundColor: '$hover' },
     },
+    tile: {
+        backgroundColor: 'transparent',
+        borderColor: '$borderColor',
+        hoverStyle: { backgroundColor: '$hover' },
+    },
 };
 /**
  * The ON treatment. gui merges `activeStyle` into hover and focus as well as
@@ -77,6 +82,7 @@ const REST = {
 const ON = {
     default: { backgroundColor: '$rim', borderColor: '$bound' },
     outline: { backgroundColor: '$raised', borderColor: '$bound' },
+    tile: { backgroundColor: 'transparent', borderColor: 'var(--primary)' },
 };
 const GroupContext = /* @__PURE__ */ (0, react_1.createContext)({
     type: 'multiple',
@@ -102,6 +108,13 @@ function ToggleGroupItem({ variant, size, disabled, children, value, ...props })
     const s = group.size ?? size ?? 'default';
     const on = group.selected.includes(value);
     const off = disabled || group.disabled;
+    if (v === 'tile')
+        return ((0, jsx_runtime_1.jsx)(gui_1.ToggleGroup.Item, { value: value, ...(0, slot_1.slot)('toggle-group-item'), "data-variant": "tile", role: group.type === 'single' ? 'radio' : undefined, "aria-checked": group.type === 'single' ? on : undefined, unstyled: true, flexDirection: "column", items: "center", justify: "center", width: "100%", minH: 32, px: "$1", py: "$1.5", gap: "$1", borderWidth: 1, rounded: "$xs", select: "none", disabled: off, cursor: off ? 'default' : 'pointer', focusVisibleStyle: press_1.RING, ...REST.tile, ...(off ? { backgroundColor: '$panel', hoverStyle: { backgroundColor: '$panel' } } : null), activeStyle: ON.tile, animation: "75ms", ...(0, gesture_1.touch)(32, 44, 'y'), ...props, children: (0, ink_1.ink)(children, undefined, {
+                size: '$1',
+                fontWeight: '600',
+                numberOfLines: 1,
+                color: off ? 'var(--text-faint)' : on ? 'var(--primary)' : '$hint',
+            }) }));
     return ((0, jsx_runtime_1.jsx)(gui_1.ToggleGroup.Item, { value: value, ...(0, slot_1.slot)('toggle-group-item'), "data-variant": v, "data-size": s, 
         // The two Radix semantics gui drops in `single` mode. `aria-pressed` is
         // left alone for `multiple`, where gui already sets it from the same state.

package/dist/backends/gui/toggle-group.d.ts

@@ -40,7 +40,13 @@
  */
 import { ToggleGroup as GuiToggleGroup } from '@hanzo/gui';
 import { type CSSProperties, type ComponentProps, type ReactNode } from 'react';
-export type ToggleGroupVariant = 'default' | 'outline';
+/**
+ * `tile` is the picker tile (twenty-ui's MenuPicker, MIT, NOTICE): an icon over
+ * a small label in a 4px-cornered box that fills its grid cell — a chart type,
+ * a view layout. The chosen tile takes the accent edge and label; the label is
+ * 12px semibold and truncates.
+ */
+export type ToggleGroupVariant = 'default' | 'outline' | 'tile';
 export type ToggleGroupSize = 'default' | 'sm' | 'lg';
 /**
  * Written out rather than derived from gui's, which cannot be used here.

package/dist/backends/gui/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/toggle-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAwB,MAAM,YAAY,CAAA;AAChF,OAAO,EAA6B,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAM1G,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAA;AACtD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAuDrD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,KAAK,eAAe,GAAG;IACrB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAChC;;;;;;;;;OASG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAA0B,EAC1B,mBAAmB,EACnB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAoClB;AAED,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EAC1C,MAAM,CACP,GAAG;IACF,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB,CAAA;AAED,iBAAS,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BA+CpG;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/toggle-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAwB,MAAM,YAAY,CAAA;AAChF,OAAO,EAA6B,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAM1G;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AAC/D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AA6DrD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,KAAK,eAAe,GAAG;IACrB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAChC;;;;;;;;;OASG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAA0B,EAC1B,mBAAmB,EACnB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAoClB;AAED,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EAC1C,MAAM,CACP,GAAG;IACF,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB,CAAA;AAED,iBAAS,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAsFpG;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

package/dist/backends/gui/toggle-group.js

@@ -62,6 +62,11 @@ const REST = {
         borderColor: '$borderColor',
         hoverStyle: { backgroundColor: '$hover' },
     },
+    tile: {
+        backgroundColor: 'transparent',
+        borderColor: '$borderColor',
+        hoverStyle: { backgroundColor: '$hover' },
+    },
 };
 /**
  * The ON treatment. gui merges `activeStyle` into hover and focus as well as
@@ -73,6 +78,7 @@ const REST = {
 const ON = {
     default: { backgroundColor: '$rim', borderColor: '$bound' },
     outline: { backgroundColor: '$raised', borderColor: '$bound' },
+    tile: { backgroundColor: 'transparent', borderColor: 'var(--primary)' },
 };
 const GroupContext = /* @__PURE__ */ createContext({
     type: 'multiple',
@@ -98,6 +104,13 @@ function ToggleGroupItem({ variant, size, disabled, children, value, ...props })
     const s = group.size ?? size ?? 'default';
     const on = group.selected.includes(value);
     const off = disabled || group.disabled;
+    if (v === 'tile')
+        return (_jsx(GuiToggleGroup.Item, { value: value, ...slot('toggle-group-item'), "data-variant": "tile", role: group.type === 'single' ? 'radio' : undefined, "aria-checked": group.type === 'single' ? on : undefined, unstyled: true, flexDirection: "column", items: "center", justify: "center", width: "100%", minH: 32, px: "$1", py: "$1.5", gap: "$1", borderWidth: 1, rounded: "$xs", select: "none", disabled: off, cursor: off ? 'default' : 'pointer', focusVisibleStyle: RING, ...REST.tile, ...(off ? { backgroundColor: '$panel', hoverStyle: { backgroundColor: '$panel' } } : null), activeStyle: ON.tile, animation: "75ms", ...touch(32, 44, 'y'), ...props, children: ink(children, undefined, {
+                size: '$1',
+                fontWeight: '600',
+                numberOfLines: 1,
+                color: off ? 'var(--text-faint)' : on ? 'var(--primary)' : '$hint',
+            }) }));
     return (_jsx(GuiToggleGroup.Item, { value: value, ...slot('toggle-group-item'), "data-variant": v, "data-size": s, 
         // The two Radix semantics gui drops in `single` mode. `aria-pressed` is
         // left alone for `multiple`, where gui already sets it from the same state.

package/dist/backends/gui/toggle-group.js.map

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

package/dist/backends/gui/tooltip.cjs

@@ -9,25 +9,48 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * gui keeps the offset on the tooltip ROOT while the compound API spells it on
  * Content, as `sideOffset`. One value, one owner: the root holds it, Content
  * publishes into it — the same split `popover` resolves, for the same reason.
+ *
+ * The panel FOLLOWS THE THEME — a dark hint on a dark page, a light one on a
+ * light page (Hanzo's decision; twenty-ui's is a dark slab in both). It did not
+ * before, measured: gui's Tooltip frame carries a `t_Tooltip` sub-theme that
+ * inverts the ground, so on the dark page the hint was a light-grey slab
+ * (`--background` 85% lightness under glass) with near-black text, and on the
+ * light page a dark one. Naming the frame's component `Hint`, which no theme
+ * table carries, leaves it in the theme it was opened from. It takes twenty-ui's
+ * geometry (MIT, NOTICE): 4×6 padding, 12px text on
+ * a 16px line, 10px clear of its anchor, at most 300 wide, opening after 600ms.
+ * A title may lead with a 14px icon and carry a quieter description under it,
+ * line breaks kept.
  */
 const gui_1 = require("@hanzo/gui");
 const react_1 = require("react");
 const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
 const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
-const DEFAULT_OFFSET = 4;
+const DEFAULT_OFFSET = 10;
+/** How long a pointer rests before the hint opens, ms. */
+const DEFAULT_DELAY = 600;
+const MAX_W = 300;
 const Publish = /* @__PURE__ */ (0, react_1.createContext)(null);
-const Tooltip = ({ offset = DEFAULT_OFFSET, ...props }) => {
+/**
+ * Whether a tooltip sits in a `TooltipProvider`. gui lets a tooltip's own
+ * `delay` override its group's, so a tooltip in a group must leave the delay
+ * unsaid for the group's to hold; one standing alone takes the 600ms default.
+ */
+const Grouped = /* @__PURE__ */ (0, react_1.createContext)(false);
+const Tooltip = ({ offset = DEFAULT_OFFSET, delay, ...props }) => {
     const [placed, setPlaced] = (0, react_1.useState)({});
     const publish = (0, react_1.useCallback)((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
-    return ((0, jsx_runtime_1.jsx)(Publish.Provider, { value: publish, children: (0, jsx_runtime_1.jsx)(gui_1.Tooltip, { offset: placed.offset ?? offset, ...props }) }));
+    const grouped = (0, react_1.useContext)(Grouped);
+    return ((0, jsx_runtime_1.jsx)(Publish.Provider, { value: publish, children: (0, jsx_runtime_1.jsx)(gui_1.Tooltip, { offset: placed.offset ?? offset, delay: delay ?? (grouped ? undefined : DEFAULT_DELAY), ...props }) }));
 };
 exports.Tooltip = Tooltip;
 const TooltipTrigger = gui_1.Tooltip.Trigger;
 exports.TooltipTrigger = TooltipTrigger;
-const TooltipProvider = gui_1.TooltipGroup;
+/** gui's `TooltipGroup`: the tooltips in it share one delay, 600ms unless told otherwise. */
+const TooltipProvider = ({ delay = DEFAULT_DELAY, ...props }) => ((0, jsx_runtime_1.jsx)(Grouped.Provider, { value: true, children: (0, jsx_runtime_1.jsx)(gui_1.TooltipGroup, { delay: delay, ...props }) }));
 exports.TooltipProvider = TooltipProvider;
-const TooltipContent = ({ sideOffset, children, ...props }) => {
+const TooltipContent = ({ sideOffset, startIcon, description, children, ...props }) => {
     const themeName = (0, portal_theme_1.useThemeName)();
     const publish = (0, react_1.useContext)(Publish);
     // Only a Content that names an offset has anything to say about it; an absent
@@ -36,6 +59,6 @@ const TooltipContent = ({ sideOffset, children, ...props }) => {
         if (sideOffset !== undefined)
             publish?.({ offset: sideOffset });
     }, [publish, sideOffset]);
-    return ((0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Tooltip.Content, { ...(0, slot_1.slot)('tooltip-content'), bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", px: "$3", py: "$1.5", ...props, children: (0, ink_1.ink)(children, undefined, { size: '$1' }) }) }));
+    return ((0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Tooltip.Content, { ...(0, slot_1.slot)('tooltip-content'), componentName: "Hint", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", px: "$1.5", py: "$1", maxW: MAX_W, ...props, children: startIcon || description ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$0.5", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", children: [startIcon ? (0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, children: startIcon }) : null, (0, ink_1.ink)(children, undefined, { size: '$1', fontWeight: '500' })] }), description ? (typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('tooltip-description'), fontSize: "$1", lineHeight: "$1", color: "$aside", style: { whiteSpace: 'pre-line' }, children: description })) : (description)) : null] })) : ((0, ink_1.ink)(children, undefined, { size: '$1' })) }) }));
 };
 exports.TooltipContent = TooltipContent;