@hanzo/ui 8.27.45 → 8.27.47

package/dist/backends/gui/popover.cjs

@@ -23,6 +23,9 @@ const slot_1 = require("./slot.cjs");
 const DEFAULT_OFFSET = 4;
 const DEFAULT_SIDE = 'bottom';
 const Publish = /* @__PURE__ */ (0, react_1.createContext)(null);
+/** Whether the panel this one opened from is solid. A list opened inside a solid
+ *  panel stands on the same ground, so the pair reads as one surface. */
+const Solid = /* @__PURE__ */ (0, react_1.createContext)(false);
 function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
     const [placed, setPlaced] = (0, react_1.useState)({});
     const publish = (0, react_1.useCallback)((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
@@ -34,10 +37,12 @@ const PopoverAnchor = gui_1.Popover.Anchor;
 exports.PopoverAnchor = PopoverAnchor;
 const PopoverClose = gui_1.Popover.Close;
 exports.PopoverClose = PopoverClose;
-const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, ...props }) => {
+const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, solid, ...props }) => {
     const themeName = (0, portal_theme_1.useThemeName)();
     const publish = (0, react_1.useContext)(Publish);
+    const inherited = (0, react_1.useContext)(Solid);
+    const opaque = solid ?? inherited;
     (0, react_1.useEffect)(() => publish?.({ offset: sideOffset, align }), [publish, sideOffset, align]);
-    return ((0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { ...(0, slot_1.slot)('popover-content'), bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(Solid.Provider, { value: opaque, children: (0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { ...(0, slot_1.slot)('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), bg: opaque ? 'var(--popover)' : '$panel', borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }) }));
 };
 exports.PopoverContent = PopoverContent;

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

@@ -23,7 +23,14 @@ declare const PopoverClose: typeof GuiPopover.Close;
 export type PopoverContentProps = ComponentProps<typeof GuiPopover.Content> & {
     sideOffset?: number;
     align?: Align;
+    /**
+     * Stand on the opaque `--popover` ground instead of glass. For a panel over
+     * something that moves, such as a menu over a streaming transcript, where the
+     * text behind would read through the frost. It keeps the rung's shadow and
+     * lit edge, and any popover opened from inside it is solid too.
+     */
+    solid?: boolean;
 };
-declare const PopoverContent: ({ sideOffset, align, ...props }: PopoverContentProps) => import("react").JSX.Element;
+declare const PopoverContent: ({ sideOffset, align, solid, ...props }: PopoverContentProps) => import("react").JSX.Element;
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
 //# sourceMappingURL=popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAEd,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAM3C,YAAY,EAAE,KAAK,EAAE,CAAA;AAOrB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElG,iBAAS,OAAO,CAAC,EAAE,MAAuB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAY9E;AAED,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,aAAa,EAAE,OAAO,UAAU,CAAC,MAA0B,CAAA;AACjE,QAAA,MAAM,YAAY,EAAE,OAAO,UAAU,CAAC,KAAwB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAA;AAED,QAAA,MAAM,cAAc,oCAAsD,mBAAmB,gCAkB5F,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAEd,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAM3C,YAAY,EAAE,KAAK,EAAE,CAAA;AAWrB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElG,iBAAS,OAAO,CAAC,EAAE,MAAuB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAY9E;AAED,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,aAAa,EAAE,OAAO,UAAU,CAAC,MAA0B,CAAA;AACjE,QAAA,MAAM,YAAY,EAAE,OAAO,UAAU,CAAC,KAAwB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,cAAc,2CAA6D,mBAAmB,gCAuBnG,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}

package/dist/backends/gui/popover.js

@@ -19,6 +19,9 @@ import { slot } from './slot.js';
 const DEFAULT_OFFSET = 4;
 const DEFAULT_SIDE = 'bottom';
 const Publish = /* @__PURE__ */ createContext(null);
+/** Whether the panel this one opened from is solid. A list opened inside a solid
+ *  panel stands on the same ground, so the pair reads as one surface. */
+const Solid = /* @__PURE__ */ createContext(false);
 function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
     const [placed, setPlaced] = useState({});
     const publish = useCallback((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
@@ -27,11 +30,13 @@ function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
 const PopoverTrigger = GuiPopover.Trigger;
 const PopoverAnchor = GuiPopover.Anchor;
 const PopoverClose = GuiPopover.Close;
-const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, ...props }) => {
+const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, solid, ...props }) => {
     const themeName = useThemeName();
     const publish = useContext(Publish);
+    const inherited = useContext(Solid);
+    const opaque = solid ?? inherited;
     useEffect(() => publish?.({ offset: sideOffset, align }), [publish, sideOffset, align]);
-    return (_jsx(PortalTheme, { name: themeName, children: _jsx(GuiPopover.Content, { ...slot('popover-content'), bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }));
+    return (_jsx(Solid.Provider, { value: opaque, children: _jsx(PortalTheme, { name: themeName, children: _jsx(GuiPopover.Content, { ...slot('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), bg: opaque ? 'var(--popover)' : '$panel', borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }) }));
 };
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
 //# sourceMappingURL=popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,QAAQ,GAET,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,cAAc,GAAG,CAAC,CAAA;AACxB,MAAM,YAAY,GAAG,QAAQ,CAAA;AAO7B,MAAM,OAAO,GAAG,eAAe,CAAC,aAAa,CAA+B,IAAI,CAAC,CAAA;AAIjF,SAAS,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB;IAC7E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IACxF,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAC9B,KAAC,UAAU,IACT,MAAM,EAAE,MAAM,CAAC,MAAM,IAAI,MAAM,EAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,YAAY,EAAE,MAAM,CAAC,KAAK,CAAqB,KACzE,KAAK,GACT,GACe,CACpB,CAAA;AACH,CAAC;AAED,MAAM,cAAc,GAA8B,UAAU,CAAC,OAAO,CAAA;AACpE,MAAM,aAAa,GAA6B,UAAU,CAAC,MAAM,CAAA;AACjE,MAAM,YAAY,GAA4B,UAAU,CAAC,KAAK,CAAA;AAO9D,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,GAAG,cAAc,EAAE,KAAK,EAAE,GAAG,KAAK,EAAuB,EAAE,EAAE;IAC/F,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACnC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAA;IACvF,OAAO,CACL,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,YAC1B,KAAC,UAAU,CAAC,OAAO,OACb,IAAI,CAAC,iBAAiB,CAAC,EAC3B,EAAE,EAAC,QAAQ,EACX,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAC,IAAI,EACZ,CAAC,EAAC,IAAI,EACN,KAAK,EAAE,GAAG,KACN,KAAK,GACT,GACU,CACf,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"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"}

package/dist/chat/Chat.cjs

@@ -63,7 +63,7 @@ const words_1 = require("./words.cjs");
  * in exactly that direction: `Parts` reads `type` before it reads anything else.
  */
 const draw = (said) => typeof said === 'string' || said == null ? ((0, ink_1.ink)((0, words_1.words)(said))) : ((0, jsx_runtime_1.jsx)(Parts_1.Parts, { parts: said }));
-function Chat({ messages, streaming = false, send: onSend, stop: onStop, body, empty, composer, onFiles, ...thread }) {
+function Chat({ messages, streaming = false, send: onSend, stop: onStop, body, empty, center = false, composer, onFiles, ...thread }) {
     const [draft, setDraft] = (0, react_1.useState)('');
     // The ONE window-level drop, off the shared primitive. Enabled only when a
     // host passed `onFiles` — a surface that cannot route a file leaves the
@@ -80,6 +80,11 @@ function Chat({ messages, streaming = false, send: onSend, stop: onStop, body, e
         onSend(text);
     }, [draft, onSend]);
     const last = messages.length - 1;
+    const opening = messages.length === 0 && Boolean(empty);
+    // The spacers hold their places in the child list whether or not they draw,
+    // so the composer keeps its position and its field keeps focus when the
+    // first turn arrives.
+    const centred = center && opening;
     // No `minHeight: 0` on the frame: rnw's View base and gui's stack base both
     // set it already, measured on the rendered element — and gui publishes no
     // such prop, so writing it type-errors rather than silently doing nothing,
@@ -90,7 +95,7 @@ function Chat({ messages, streaming = false, send: onSend, stop: onStop, body, e
     // from the composer lands on a `display: contents` wrapper or on the page,
     // and then reports a component that is fine as broken, or one that is broken
     // as fine.
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, width: "100%", ...(0, slot_1.slot)('chat'), children: [messages.length === 0 && empty ? (empty) : ((0, jsx_runtime_1.jsx)(Thread_1.Thread, { flex: 1, ...thread, children: messages.map((turn, i) => ((0, jsx_runtime_1.jsx)(Message_1.Message, { role: turn.role, busy: streaming && i === last && turn.role === 'assistant', children: body ? body(turn) : draw(turn.content) }, turn.id))) })), (0, jsx_runtime_1.jsx)(Composer_1.Composer, { value: draft, onChange: setDraft, onSend: send, busy: streaming, ...(onStop ? { onStop } : {}), ...composer }), dropping ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, style: {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, width: "100%", ...(0, slot_1.slot)('chat'), children: [centred ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('chat-space'), flex: 1 }) : null, opening ? (empty) : ((0, jsx_runtime_1.jsx)(Thread_1.Thread, { flex: 1, ...thread, children: messages.map((turn, i) => ((0, jsx_runtime_1.jsx)(Message_1.Message, { role: turn.role, busy: streaming && i === last && turn.role === 'assistant', children: body ? body(turn) : draw(turn.content) }, turn.id))) })), (0, jsx_runtime_1.jsx)(Composer_1.Composer, { value: draft, onChange: setDraft, onSend: send, busy: streaming, ...(onStop ? { onStop } : {}), ...composer }), centred ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('chat-space'), flex: 1 }) : null, dropping ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, style: {
                     position: 'fixed',
                     inset: 0,
                     zIndex: 50,

package/dist/chat/Chat.d.ts

@@ -58,6 +58,19 @@ export interface ChatProps extends Omit<ThreadProps, 'children' | 'ref'> {
     body?: (turn: Turn) => ReactNode;
     /** Shown instead of the thread while nothing has been said. */
     empty?: ReactNode;
+    /**
+     * While nothing has been said, `empty` and the composer sit together in the
+     * middle of the height, the free space split evenly above and below them.
+     * Once a turn exists the thread takes the height and the composer docks under
+     * it.
+     *
+     * The space is two spacers around the pair, not margins on it. With a `head`
+     * or `foot` the composer is a shell around its frame, and a margin passed in
+     * `composer` lands on the frame inside that shell, where it moves nothing.
+     * The spacers shrink to nothing when the pair is taller than the window, so
+     * the heading is never pushed above the top.
+     */
+    center?: boolean;
     /** The composer's own props — placeholder, hint, the send control, the field. */
     composer?: Partial<ComposerProps>;
     /**
@@ -72,5 +85,5 @@ export interface ChatProps extends Omit<ThreadProps, 'children' | 'ref'> {
      */
     onFiles?: (files: File[]) => void;
 }
-export declare function Chat({ messages, streaming, send: onSend, stop: onStop, body, empty, composer, onFiles, ...thread }: ChatProps): import("react").JSX.Element;
+export declare function Chat({ messages, streaming, send: onSend, stop: onStop, body, empty, center, composer, onFiles, ...thread }: ChatProps): import("react").JSX.Element;
 //# sourceMappingURL=Chat.d.ts.map

package/dist/chat/Chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK7D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAW,KAAK,IAAI,EAAE,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAS,KAAK,IAAI,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;;;;GAOG;AACH,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,KAAK,CAAC;IACtE,sCAAsC;IACtC,QAAQ,EAAE,IAAI,EAAE,CAAA;IAChB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;;;;;OAUG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAA;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IACjC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CAClC;AAyBD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAiB,EACjB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,GAAG,MAAM,EACV,EAAE,SAAS,+BA6EX"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK7D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAW,KAAK,IAAI,EAAE,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAS,KAAK,IAAI,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;;;;GAOG;AACH,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,KAAK,CAAC;IACtE,sCAAsC;IACtC,QAAQ,EAAE,IAAI,EAAE,CAAA;IAChB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;;;;;OAUG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAA;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IACjC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CAClC;AAyBD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAiB,EACjB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EACJ,KAAK,EACL,MAAc,EACd,QAAQ,EACR,OAAO,EACP,GAAG,MAAM,EACV,EAAE,SAAS,+BAoFX"}

package/dist/chat/Chat.js

@@ -60,7 +60,7 @@ import { words } from './words.js';
  * in exactly that direction: `Parts` reads `type` before it reads anything else.
  */
 const draw = (said) => typeof said === 'string' || said == null ? (ink(words(said))) : (_jsx(Parts, { parts: said }));
-export function Chat({ messages, streaming = false, send: onSend, stop: onStop, body, empty, composer, onFiles, ...thread }) {
+export function Chat({ messages, streaming = false, send: onSend, stop: onStop, body, empty, center = false, composer, onFiles, ...thread }) {
     const [draft, setDraft] = useState('');
     // The ONE window-level drop, off the shared primitive. Enabled only when a
     // host passed `onFiles` — a surface that cannot route a file leaves the
@@ -77,6 +77,11 @@ export function Chat({ messages, streaming = false, send: onSend, stop: onStop,
         onSend(text);
     }, [draft, onSend]);
     const last = messages.length - 1;
+    const opening = messages.length === 0 && Boolean(empty);
+    // The spacers hold their places in the child list whether or not they draw,
+    // so the composer keeps its position and its field keeps focus when the
+    // first turn arrives.
+    const centred = center && opening;
     // No `minHeight: 0` on the frame: rnw's View base and gui's stack base both
     // set it already, measured on the rendered element — and gui publishes no
     // such prop, so writing it type-errors rather than silently doing nothing,
@@ -87,7 +92,7 @@ export function Chat({ messages, streaming = false, send: onSend, stop: onStop,
     // from the composer lands on a `display: contents` wrapper or on the page,
     // and then reports a component that is fine as broken, or one that is broken
     // as fine.
-    return (_jsxs(YStack, { flex: 1, width: "100%", ...slot('chat'), children: [messages.length === 0 && empty ? (empty) : (_jsx(Thread, { flex: 1, ...thread, children: messages.map((turn, i) => (_jsx(Message, { role: turn.role, busy: streaming && i === last && turn.role === 'assistant', children: body ? body(turn) : draw(turn.content) }, turn.id))) })), _jsx(Composer, { value: draft, onChange: setDraft, onSend: send, busy: streaming, ...(onStop ? { onStop } : {}), ...composer }), dropping ? (_jsx("div", { "aria-hidden": true, style: {
+    return (_jsxs(YStack, { flex: 1, width: "100%", ...slot('chat'), children: [centred ? _jsx(YStack, { ...slot('chat-space'), flex: 1 }) : null, opening ? (empty) : (_jsx(Thread, { flex: 1, ...thread, children: messages.map((turn, i) => (_jsx(Message, { role: turn.role, busy: streaming && i === last && turn.role === 'assistant', children: body ? body(turn) : draw(turn.content) }, turn.id))) })), _jsx(Composer, { value: draft, onChange: setDraft, onSend: send, busy: streaming, ...(onStop ? { onStop } : {}), ...composer }), centred ? _jsx(YStack, { ...slot('chat-space'), flex: 1 }) : null, dropping ? (_jsx("div", { "aria-hidden": true, style: {
                     position: 'fixed',
                     inset: 0,
                     zIndex: 50,

package/dist/chat/Chat.js.map

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

package/dist/gallery.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.27.45</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
+<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.27.47</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
 :root { --hanzo-ui-styles: 1; }
 /* Hanzo Design System — the entry point. Import THIS one file.
  *
@@ -1585,6 +1585,20 @@
   }
 }
 
+/* ── Solid — the one way out of the material ─────────────────────────────────
+   A panel over something that moves (a menu over a streaming transcript) reads
+   the motion through 72% frost. `<PopoverContent solid>` marks itself, and every
+   popover opened from inside it, with `data-material="solid"`: the ground is
+   design's opaque `--popover` and nothing behind is blurred into it. The rung's
+   shadow, lit edge and prism lip stay, so it is the same surface at the same
+   height with a solid fill. Declared after the material so the later rule wins
+   between two !important declarations of equal weight. */
+[data-material="solid"] {
+  background-color: var(--popover, #0f0f0f) !important;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 /* ── Depth — three rungs, and the lit edge is the load-bearing half ──────────
    A cast shadow is how a light page shows lift. On a near-black canvas it is
    nearly free of information: black on near-black moves no pixels, so a raised
@@ -1805,13 +1819,15 @@
    itself. Every animation is off under `prefers-reduced-motion: reduce`.
 
      rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+              `data-beat="n"` staggers it n x 70ms
      fade     opacity eases 240ms                      SlideOver's scrim
      slide    transform eases 260ms                    SlideOver's panel
      drag     a row eases into place while one is held Reorder
      pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
      blink    on/off, 1s                               Caret
      shimmer  a highlight sweeps a placeholder         product Skeleton
-     unfold   a sheet turns open about its hinge       unfold()                 */
+     unfold   a sheet turns open about its hinge       unfold()
+     run      a light sweeps a set, child by child     Run                      */
 
 @keyframes rise {
   from {
@@ -1829,6 +1845,17 @@
   will-change: transform, opacity;
 }
 
+/* A staged entrance: `data-beat="n"` holds a rise back n beats of 70ms, so a set
+   that arrives together still reads in order. Reduced motion drops the
+   animation and the delay with it, so nothing waits hidden. */
+[data-motion='rise'][data-beat='1'] { animation-delay: 70ms; }
+[data-motion='rise'][data-beat='2'] { animation-delay: 140ms; }
+[data-motion='rise'][data-beat='3'] { animation-delay: 210ms; }
+[data-motion='rise'][data-beat='4'] { animation-delay: 280ms; }
+[data-motion='rise'][data-beat='5'] { animation-delay: 350ms; }
+[data-motion='rise'][data-beat='6'] { animation-delay: 420ms; }
+[data-motion='rise'][data-beat='7'] { animation-delay: 490ms; }
+
 [data-motion='fade'] {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
@@ -1909,8 +1936,45 @@
   --turn: 7deg;
 }
 
+/* A run: a light crosses a set of things that are all true at once (`<Run>`).
+   Each direct child is lit `data-beat` steps of `--run-step` after the first;
+   the sweep owns `color` and returns it to `--run-rest`. */
+@keyframes run {
+  0%,
+  26%,
+  100% {
+    color: var(--run-rest, var(--neutral-400));
+    border-color: var(--neutral-800);
+  }
+  8% {
+    color: var(--foreground);
+    border-color: var(--muted-foreground);
+  }
+}
+
+[data-motion='run'] > * {
+  animation: run 5.4s var(--ease-in-out) infinite;
+}
+
+[data-motion='run'] > [data-beat='1'] { animation-delay: calc(1 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='2'] { animation-delay: calc(2 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='3'] { animation-delay: calc(3 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='4'] { animation-delay: calc(4 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='5'] { animation-delay: calc(5 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='6'] { animation-delay: calc(6 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='7'] { animation-delay: calc(7 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='8'] { animation-delay: calc(8 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='9'] { animation-delay: calc(9 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='10'] { animation-delay: calc(10 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='11'] { animation-delay: calc(11 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='12'] { animation-delay: calc(12 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='13'] { animation-delay: calc(13 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='14'] { animation-delay: calc(14 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='15'] { animation-delay: calc(15 * var(--run-step, 0.22s)); }
+
 @media (prefers-reduced-motion: reduce) {
-  [data-motion] {
+  [data-motion],
+  [data-motion='run'] > * {
     animation: none;
     transition: none;
   }
@@ -2486,13 +2550,15 @@ a svg,
    itself. Every animation is off under `prefers-reduced-motion: reduce`.
 
      rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+              `data-beat="n"` staggers it n x 70ms
      fade     opacity eases 240ms                      SlideOver's scrim
      slide    transform eases 260ms                    SlideOver's panel
      drag     a row eases into place while one is held Reorder
      pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
      blink    on/off, 1s                               Caret
      shimmer  a highlight sweeps a placeholder         product Skeleton
-     unfold   a sheet turns open about its hinge       unfold()                 */
+     unfold   a sheet turns open about its hinge       unfold()
+     run      a light sweeps a set, child by child     Run                      */
 
 @keyframes rise {
   from {
@@ -2510,6 +2576,17 @@ a svg,
   will-change: transform, opacity;
 }
 
+/* A staged entrance: `data-beat="n"` holds a rise back n beats of 70ms, so a set
+   that arrives together still reads in order. Reduced motion drops the
+   animation and the delay with it, so nothing waits hidden. */
+[data-motion='rise'][data-beat='1'] { animation-delay: 70ms; }
+[data-motion='rise'][data-beat='2'] { animation-delay: 140ms; }
+[data-motion='rise'][data-beat='3'] { animation-delay: 210ms; }
+[data-motion='rise'][data-beat='4'] { animation-delay: 280ms; }
+[data-motion='rise'][data-beat='5'] { animation-delay: 350ms; }
+[data-motion='rise'][data-beat='6'] { animation-delay: 420ms; }
+[data-motion='rise'][data-beat='7'] { animation-delay: 490ms; }
+
 [data-motion='fade'] {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
@@ -2590,8 +2667,45 @@ a svg,
   --turn: 7deg;
 }
 
+/* A run: a light crosses a set of things that are all true at once (`<Run>`).
+   Each direct child is lit `data-beat` steps of `--run-step` after the first;
+   the sweep owns `color` and returns it to `--run-rest`. */
+@keyframes run {
+  0%,
+  26%,
+  100% {
+    color: var(--run-rest, var(--neutral-400));
+    border-color: var(--neutral-800);
+  }
+  8% {
+    color: var(--foreground);
+    border-color: var(--muted-foreground);
+  }
+}
+
+[data-motion='run'] > * {
+  animation: run 5.4s var(--ease-in-out) infinite;
+}
+
+[data-motion='run'] > [data-beat='1'] { animation-delay: calc(1 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='2'] { animation-delay: calc(2 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='3'] { animation-delay: calc(3 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='4'] { animation-delay: calc(4 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='5'] { animation-delay: calc(5 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='6'] { animation-delay: calc(6 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='7'] { animation-delay: calc(7 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='8'] { animation-delay: calc(8 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='9'] { animation-delay: calc(9 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='10'] { animation-delay: calc(10 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='11'] { animation-delay: calc(11 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='12'] { animation-delay: calc(12 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='13'] { animation-delay: calc(13 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='14'] { animation-delay: calc(14 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='15'] { animation-delay: calc(15 * var(--run-step, 0.22s)); }
+
 @media (prefers-reduced-motion: reduce) {
-  [data-motion] {
+  [data-motion],
+  [data-motion='run'] > * {
     animation: none;
     transition: none;
   }

package/dist/glass.css

@@ -115,6 +115,20 @@
   }
 }
 
+/* ── Solid — the one way out of the material ─────────────────────────────────
+   A panel over something that moves (a menu over a streaming transcript) reads
+   the motion through 72% frost. `<PopoverContent solid>` marks itself, and every
+   popover opened from inside it, with `data-material="solid"`: the ground is
+   design's opaque `--popover` and nothing behind is blurred into it. The rung's
+   shadow, lit edge and prism lip stay, so it is the same surface at the same
+   height with a solid fill. Declared after the material so the later rule wins
+   between two !important declarations of equal weight. */
+[data-material="solid"] {
+  background-color: var(--popover, #0f0f0f) !important;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 /* ── Depth — three rungs, and the lit edge is the load-bearing half ──────────
    A cast shadow is how a light page shows lift. On a near-black canvas it is
    nearly free of information: black on near-black moves no pixels, so a raised

package/dist/marketing/Cta.cjs

@@ -19,8 +19,14 @@ const slot_1 = require("../backends/gui/slot.cjs");
 const Cta = ({ href, children, quiet = false, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Anchor, { ...(0, slot_1.slot)(quiet ? 'cta-quiet' : 'cta'), href: href, display: "inline-flex", items: "center", justify: "center", minH: 44, px: "$5", rounded: "$4", borderWidth: 1, borderColor: quiet ? '$borderColor' : 'transparent', bg: quiet ? 'transparent' : 'var(--primary)', color: quiet ? '$ink' : 'var(--primary-foreground)', fontSize: "$4", fontWeight: "500", text: "center", textDecorationLine: "none", hoverStyle: quiet ? { bg: '$hover' } : { bg: 'var(--primary-hover)' }, ...p, children: children }));
 exports.Cta = Cta;
 /**
- * TextLink — a link inside a sentence: the surrounding ink, underlined.
- * `Cta` is the control; this is the word.
+ * TextLink — a link inside a sentence: full ink and an underline, because in
+ * quiet text colour alone does not say "link", and the sentence's own face and
+ * size. `Cta` is the control; this is the word. A button inside such a sentence (no `href`) reads as one of its
+ * links: no box, and the sentence's own face, which @hanzo/design's base hands
+ * every button.
  */
-const TextLink = ({ href, children, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Anchor, { ...(0, slot_1.slot)('text-link'), href: href, color: "$ink", textDecorationLine: "underline", style: { textUnderlineOffset: 3 }, ...p, children: children }));
+/** The sentence's own type, which gui's Text would otherwise replace with its
+ *  body size. */
+const WORD = { fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', lineHeight: 'inherit', letterSpacing: 'inherit' };
+const TextLink = ({ href, children, ...p }) => href !== undefined ? ((0, jsx_runtime_1.jsx)(gui_1.Anchor, { ...(0, slot_1.slot)('text-link'), href: href, ...WORD, color: "$ink", textDecorationLine: "underline", style: { textUnderlineOffset: 3 }, ...p, children: children })) : ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('text-link'), render: (0, jsx_runtime_1.jsx)("button", { type: "button" }), p: 0, borderWidth: 0, bg: "transparent", ...WORD, color: "$ink", textDecorationLine: "underline", cursor: "pointer", style: { textUnderlineOffset: 3 }, ...p, children: children }));
 exports.TextLink = TextLink;

package/dist/marketing/Cta.d.ts

@@ -20,10 +20,12 @@ export type CtaProps = Omit<ComponentProps<typeof Anchor>, 'children' | 'href'>
 };
 declare const Cta: ({ href, children, quiet, ...p }: CtaProps) => import("react").JSX.Element;
 export { Cta };
-/**
- * TextLink — a link inside a sentence: the surrounding ink, underlined.
- * `Cta` is the control; this is the word.
- */
-declare const TextLink: ({ href, children, ...p }: Omit<CtaProps, 'quiet'>) => import("react").JSX.Element;
+export type TextLinkProps = Omit<CtaProps, 'quiet' | 'href'> & {
+    /** Where it goes. Without one it is a button that reads as a link — "try
+     *  again", "change address" — and `onPress` is what it does. */
+    href?: string;
+    disabled?: boolean;
+};
+declare const TextLink: ({ href, children, ...p }: TextLinkProps) => import("react").JSX.Element;
 export { TextLink };
 //# sourceMappingURL=Cta.d.ts.map

package/dist/marketing/Cta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Cta.d.ts","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,CAAA;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,GAAG,oCAA6C,QAAQ,gCAuB7D,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AAEd;;;GAGG;AACH,QAAA,MAAM,QAAQ,6BAA8B,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,gCAWlE,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"Cta.d.ts","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAQ,MAAM,YAAY,CAAA;AAEzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,CAAA;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,GAAG,oCAA6C,QAAQ,gCAuB7D,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AAEd,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAC7D;oEACgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAaD,QAAA,MAAM,QAAQ,6BAA8B,aAAa,gCA6BtD,CAAA;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/marketing/Cta.js

@@ -11,14 +11,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * The 44px floor is `minH`, not padding, so a two-line label stays balanced.
  */
-import { Anchor } from '@hanzo/gui';
+import { Anchor, Text } from '@hanzo/gui';
 import { slot } from '../backends/gui/slot.js';
 const Cta = ({ href, children, quiet = false, ...p }) => (_jsx(Anchor, { ...slot(quiet ? 'cta-quiet' : 'cta'), href: href, display: "inline-flex", items: "center", justify: "center", minH: 44, px: "$5", rounded: "$4", borderWidth: 1, borderColor: quiet ? '$borderColor' : 'transparent', bg: quiet ? 'transparent' : 'var(--primary)', color: quiet ? '$ink' : 'var(--primary-foreground)', fontSize: "$4", fontWeight: "500", text: "center", textDecorationLine: "none", hoverStyle: quiet ? { bg: '$hover' } : { bg: 'var(--primary-hover)' }, ...p, children: children }));
 export { Cta };
 /**
- * TextLink — a link inside a sentence: the surrounding ink, underlined.
- * `Cta` is the control; this is the word.
+ * TextLink — a link inside a sentence: full ink and an underline, because in
+ * quiet text colour alone does not say "link", and the sentence's own face and
+ * size. `Cta` is the control; this is the word. A button inside such a sentence (no `href`) reads as one of its
+ * links: no box, and the sentence's own face, which @hanzo/design's base hands
+ * every button.
  */
-const TextLink = ({ href, children, ...p }) => (_jsx(Anchor, { ...slot('text-link'), href: href, color: "$ink", textDecorationLine: "underline", style: { textUnderlineOffset: 3 }, ...p, children: children }));
+/** The sentence's own type, which gui's Text would otherwise replace with its
+ *  body size. */
+const WORD = { fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', lineHeight: 'inherit', letterSpacing: 'inherit' };
+const TextLink = ({ href, children, ...p }) => href !== undefined ? (_jsx(Anchor, { ...slot('text-link'), href: href, ...WORD, color: "$ink", textDecorationLine: "underline", style: { textUnderlineOffset: 3 }, ...p, children: children })) : (_jsx(Text, { ...slot('text-link'), render: _jsx("button", { type: "button" }), p: 0, borderWidth: 0, bg: "transparent", ...WORD, color: "$ink", textDecorationLine: "underline", cursor: "pointer", style: { textUnderlineOffset: 3 }, ...p, children: children }));
 export { TextLink };
 //# sourceMappingURL=Cta.js.map

package/dist/marketing/Cta.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cta.js","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAU3C,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,CAAC,EAAY,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,OACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,EACrC,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,EAAE,EACR,EAAE,EAAC,IAAI,EACP,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,EACnD,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,EAC5C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,2BAA2B,EACnD,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,KAAK,EAChB,IAAI,EAAC,QAAQ,EACb,kBAAkB,EAAC,MAAM,EACzB,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,sBAAsB,EAAE,KAChE,CAAY,YAEhB,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AAEd;;;GAGG;AACH,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,EAA2B,EAAE,EAAE,CAAC,CACtE,KAAC,MAAM,OACD,IAAI,CAAC,WAAW,CAAC,EACrB,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,MAAM,EACZ,kBAAkB,EAAC,WAAW,EAC9B,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAC,EAAE,KAC5B,CAAY,YAEhB,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"Cta.js","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAIzC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAU3C,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,CAAC,EAAY,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,OACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,EACrC,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,EAAE,EACR,EAAE,EAAC,IAAI,EACP,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,EACnD,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,EAC5C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,2BAA2B,EACnD,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,KAAK,EAChB,IAAI,EAAC,QAAQ,EACb,kBAAkB,EAAC,MAAM,EACzB,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,sBAAsB,EAAE,KAChE,CAAY,YAEhB,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AASd;;;;;;GAMG;AACH;iBACiB;AACjB,MAAM,IAAI,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAW,CAAA;AAE5I,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAiB,EAAE,EAAE,CAC3D,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACnB,KAAC,MAAM,OACD,IAAI,CAAC,WAAW,CAAC,EACrB,IAAI,EAAE,IAAI,KACL,IAAe,EACpB,KAAK,EAAC,MAAM,EACZ,kBAAkB,EAAC,WAAW,EAC9B,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAC,EAAE,KAC5B,CAAY,YAEhB,QAAQ,GACF,CACV,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OACC,IAAI,CAAC,WAAW,CAAC,EACrB,MAAM,EAAE,iBAAQ,IAAI,EAAC,QAAQ,GAAG,EAChC,CAAC,EAAE,CAAC,EACJ,WAAW,EAAE,CAAC,EACd,EAAE,EAAC,aAAa,KACX,IAAe,EACpB,KAAK,EAAC,MAAM,EACZ,kBAAkB,EAAC,WAAW,EAC9B,MAAM,EAAC,SAAS,EAChB,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAC,EAAE,KAC5B,CAAY,YAEhB,QAAQ,GACJ,CACR,CAAA;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/marketing/controls.cjs

@@ -0,0 +1,112 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.More = exports.Chip = exports.Action = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The three controls a marketing page closes a thought with, one set:
+ *
+ *   Action  the button — chrome glass, or `fill` for the one loud control
+ *   Chip    a word in an outline: a badge, a tag, a filter
+ *   More    the quiet link — "View all →", "See full pricing ↗"
+ *
+ * Each is a gui Text, so it carries its own type and draws its own box: the
+ * label and any icon beside it inherit the ink, and nothing reaches in from a
+ * stylesheet. White space is the parent's, so a control inside a line that
+ * clips with an ellipsis stays on that line. An `href` makes it a link: an internal one goes through the app's
+ * router link (@hanzo/ui's `Link` context, set once at the root), any other is
+ * an anchor. A control that does something passes `render="button"`.
+ *
+ * The ease between rest and hover is @hanzo/design's base, which grants every
+ * `<a>` and `<button>` its colour, fill, edge and shadow transition, and the
+ * pointer (or `not-allowed` on a disabled button); a control restates none of it.
+ *
+ * Both themes are props. On the light ground the dark glass would draw a grey
+ * slab and the white fill would vanish into the page, so `$theme-light` turns
+ * the quiet weight to white glass with a dark edge and the loud one to ink.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+const host_1 = require("./host.cjs");
+const BOX = {
+    display: 'inline-flex',
+    items: 'center',
+    whiteSpace: 'inherit',
+    textDecorationLine: 'none',
+};
+/** A rung that carries its own leading: naming the size alone leaves the line
+ *  box to whatever an ancestor sets. */
+const SMALL = { fontSize: '$2', lineHeight: 'calc(1.25 / 0.875)' };
+/**
+ * A caller's own value holds in every state, the way a value stated on the
+ * element always has: a key the caller passes is dropped from the hover and from
+ * the light theme, so `color` on a chip stays that colour under the pointer and
+ * on the light ground. A caller's own `hoverStyle` or `$theme-light` replaces
+ * the default whole.
+ */
+const states = (p, hover, light) => {
+    const own = (s) => Object.fromEntries(Object.entries(s).filter(([k]) => !(k in p)));
+    const { hoverStyle: lightHover, ...lightRest } = light;
+    return {
+        ...(p.hoverStyle === undefined ? { hoverStyle: own(hover) } : null),
+        ...(p['$theme-light'] === undefined
+            ? { '$theme-light': { ...own(lightRest), ...(lightHover && p.hoverStyle === undefined ? { hoverStyle: own(lightHover) } : null) } }
+            : null),
+    };
+};
+/** The quiet weight is chrome glass; `fill` drops the border outright rather
+ *  than making it transparent, which would leave the loud control 2px wider
+ *  than the quiet one beside it. 44px is the thumb floor, not a style. */
+const Action = ({ render, fill = false, ...p }) => {
+    const host = (0, host_1.useHost)(render, p.href, 'a');
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('action'), ...(fill ? { 'data-fill': '' } : null), render: host, ...BOX, ...SMALL, justify: "center", gap: "$2", minH: 44, px: "$5", rounded: 9999, fontWeight: "500", backdropFilter: "var(--chrome-blur)", ...(fill
+            ? {
+                borderWidth: 0,
+                bg: 'var(--pure-white)',
+                color: 'var(--pure-black)',
+                boxShadow: '0 4px 20px -2px var(--white-22), 0 2px 8px 0 color-mix(in srgb, var(--pure-black) 40%, transparent)',
+                ...states(p, { opacity: 0.92, bg: 'var(--neutral-100)', color: 'var(--pure-black)' }, {
+                    bg: 'var(--foreground)',
+                    color: 'var(--background)',
+                    boxShadow: '0 4px 16px -6px color-mix(in srgb, var(--pure-black) 40%, transparent)',
+                    hoverStyle: { bg: 'var(--foreground)', color: 'var(--background)' },
+                }),
+            }
+            : {
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: 'var(--white-14)',
+                bg: 'color-mix(in srgb, var(--neutral-900) 65%, transparent)',
+                color: 'var(--foreground)',
+                boxShadow: 'inset 0 1px 0 0 var(--white-14), 0 4px 16px -2px color-mix(in srgb, var(--pure-black) 30%, transparent)',
+                ...states(p, { bg: 'color-mix(in srgb, var(--neutral-800) 80%, transparent)', borderColor: 'var(--white-22)', color: 'var(--pure-white)' }, {
+                    borderColor: 'color-mix(in srgb, var(--pure-black) 14%, transparent)',
+                    bg: 'color-mix(in srgb, var(--pure-white) 72%, transparent)',
+                    color: 'var(--foreground)',
+                    boxShadow: '0 2px 10px -4px color-mix(in srgb, var(--pure-black) 18%, transparent)',
+                    hoverStyle: { borderColor: 'color-mix(in srgb, var(--pure-black) 26%, transparent)', bg: 'var(--pure-white)', color: 'var(--foreground)' },
+                }),
+            }), ...p }));
+};
+exports.Action = Action;
+/** A word in an outline. Not an action — no fill, no weight — so the padding is
+ *  the caller's: a chip and a badge are the same outline at two sizes. It
+ *  brightens on approach only when it is a link. */
+const Chip = ({ render, ...p }) => {
+    const host = (0, host_1.useHost)(render, p.href, 'span');
+    const link = (0, host_1.address)(host, p.href);
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('chip'), render: host, ...BOX, ...SMALL, gap: "$2", borderWidth: 1, borderStyle: "solid", borderColor: "var(--white-08)", rounded: 9999, color: "var(--neutral-300)", bg: "var(--white-03)", ...states(p, link ? { borderColor: 'var(--white-20)', color: 'var(--pure-white)' } : {}, {
+            borderColor: 'var(--border)',
+            bg: 'var(--glass)',
+            color: 'var(--muted-foreground)',
+            ...(link ? { hoverStyle: { borderColor: 'var(--border-strong)', color: 'var(--foreground)' } } : null),
+        }), ...p }));
+};
+exports.Chip = Chip;
+/** The quiet link. The hover is the reason it is a component rather than a
+ *  colour at the call site. */
+const More = ({ render, ...p }) => {
+    const host = (0, host_1.useHost)(render, p.href, 'a');
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('more'), render: host, ...BOX, ...SMALL, gap: "$2", fontWeight: "500", color: "var(--neutral-300)", ...states(p, { color: 'var(--pure-white)' }, { color: 'var(--muted-foreground)', hoverStyle: { color: 'var(--foreground)' } }), ...p }));
+};
+exports.More = More;