@hanzo/ui 8.27.18 → 8.27.20

package/dist/catalog/Shelf.cjs

@@ -0,0 +1,76 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Shelf = Shelf;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Shelf — a catalogue page: what an org has, and what it can add, one kind at a
+ * time.
+ *
+ *   Customize
+ *   What the agent brings to a run …
+ *   ▢ Skills   ⌁ Connectors   ⧉ Plugins   ☺ Agents          the kinds, a tablist
+ *   ─────────
+ *   [ Yours | Discover ]                       [ + New skill ]
+ *   [ Search skills…                                         ]
+ *   (the cards — `Tiles` of `Tile`s, a `Featured` first)
+ *
+ * The kinds are a tab strip underlined at the chosen one: one tab stop, arrows
+ * move the choice, Home/End jump. Yours/Discover is the package's one segmented
+ * control (`Views`, from `@hanzo/ui/agents`), so it is not drawn twice. The
+ * search and the Add are the shelf's; what they find and add is the host's.
+ *
+ * Presentational: the kind, the half and the query come in, every change goes
+ * out, and the cards are `children`. On a phone the column takes the width, the
+ * tabs drop their icons, and the grid stacks to one card a row.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const Workspace_1 = require("../agents/Workspace.cjs");
+const button_1 = require("../backends/gui/button.cjs");
+const input_1 = require("../backends/gui/input.cjs");
+const press_1 = require("../backends/gui/press.cjs");
+const slot_1 = require("../backends/gui/slot.cjs");
+/** The page's measure, px. Three 280px cards and their gaps, with room. */
+const MEASURE = 1080;
+/** What a shelf shows by default: the org's own, and what it can add. */
+const HALVES = [
+    { id: 'yours', label: 'Yours' },
+    { id: 'discover', label: 'Discover' },
+];
+function Shelf({ title, detail, tabs, tab, onTab, views = HALVES, view, onView, search, query, onQuery, add, onAdd, level = 1, children, ...rest }) {
+    const refs = (0, react_1.useRef)([]);
+    const id = (0, react_1.useId)();
+    const panel = `${id}-panel`;
+    // The strip's one tab stop is the open kind — or the first, when `tab` names
+    // none, so the strip is never unreachable from the keyboard.
+    const stop = Math.max(0, tabs.findIndex((t) => t.id === tab));
+    const move = (e, index) => {
+        const last = tabs.length - 1;
+        const to = e.key === 'ArrowRight' ? (index === last ? 0 : index + 1)
+            : e.key === 'ArrowLeft' ? (index === 0 ? last : index - 1)
+                : e.key === 'Home' ? 0
+                    : e.key === 'End' ? last
+                        : -1;
+        if (to < 0) {
+            // A tab is a button: Enter and Space choose it, which gui does not do for
+            // a stack on its own.
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault?.();
+                onTab(tabs[index].id);
+            }
+            return;
+        }
+        e.preventDefault?.();
+        onTab(tabs[to].id);
+        refs.current[to]?.focus();
+    };
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('shelf'), flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, ...rest, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: "100%", maxW: MEASURE, mx: "auto", gap: "$4", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { role: "heading", "aria-level": level, size: "$6", color: "$ink", children: title }), detail ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$soft", children: detail })) : null] }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('shelf-tabs'), role: "tablist", "aria-label": title, gap: "$4", borderBottomWidth: 1, borderColor: "$borderColor", "$max-md": { gap: '$3' }, children: tabs.map((t, index) => {
+                        const on = t.id === tab;
+                        const Icon = t.icon;
+                        return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ref: (el) => {
+                                refs.current[index] = el;
+                            }, ...(0, slot_1.slot)('shelf-tab'), id: `${id}-tab-${t.id}`, role: "tab", tabIndex: index === stop ? 0 : -1, "aria-selected": on, "aria-controls": on ? panel : undefined, onPress: () => onTab(t.id), onKeyDown: (e) => move(e, index), items: "center", gap: "$1.5", pb: "$2", mb: -1, cursor: "pointer", borderBottomWidth: 2, borderColor: on ? '$ink' : 'transparent', hoverStyle: { borderColor: on ? '$ink' : '$edge' }, focusVisibleStyle: press_1.RING, children: [Icon ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { opacity: on ? 1 : 0.6, "aria-hidden": true, "$max-md": { display: 'none' }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) })) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: on ? '$ink' : '$soft', children: t.label })] }, t.id));
+                    }) }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('shelf-panel'), id: panel, role: "tabpanel", "aria-labelledby": tabs.some((t) => t.id === tab) ? `${id}-tab-${tab}` : undefined, "aria-label": tabs.some((t) => t.id === tab) ? undefined : title, gap: "$4", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(Workspace_1.Views, { views: views, value: view, onChange: onView, label: "Show", labels: "all" }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), add && onAdd ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { size: "sm", onPress: onAdd, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 14 }), " ", add] })) : null] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: query, onChangeText: onQuery, placeholder: `${search}…`, "aria-label": search }), children] })] }) }));
+}

package/dist/catalog/Shelf.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Shelf — a catalogue page: what an org has, and what it can add, one kind at a
+ * time.
+ *
+ *   Customize
+ *   What the agent brings to a run …
+ *   ▢ Skills   ⌁ Connectors   ⧉ Plugins   ☺ Agents          the kinds, a tablist
+ *   ─────────
+ *   [ Yours | Discover ]                       [ + New skill ]
+ *   [ Search skills…                                         ]
+ *   (the cards — `Tiles` of `Tile`s, a `Featured` first)
+ *
+ * The kinds are a tab strip underlined at the chosen one: one tab stop, arrows
+ * move the choice, Home/End jump. Yours/Discover is the package's one segmented
+ * control (`Views`, from `@hanzo/ui/agents`), so it is not drawn twice. The
+ * search and the Add are the shelf's; what they find and add is the host's.
+ *
+ * Presentational: the kind, the half and the query come in, every change goes
+ * out, and the cards are `children`. On a phone the column takes the width, the
+ * tabs drop their icons, and the grid stacks to one card a row.
+ */
+import { YStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+import { type View } from '../agents/Workspace.js';
+type Col = Omit<ComponentProps<typeof YStack>, 'children'>;
+export interface ShelfProps extends Col {
+    /** The page's title. */
+    title: string;
+    /** One or two lines on what the page is for. */
+    detail?: string;
+    /** The kinds, as tabs. An icon is a component, drawn at 15px. */
+    tabs: readonly View[];
+    /** The open kind's id. */
+    tab: string;
+    onTab: (id: string) => void;
+    /** The halves of a kind. Yours and Discover unless given. */
+    views?: readonly View[];
+    /** The open half's id. */
+    view: string;
+    onView: (id: string) => void;
+    /** The search's name and placeholder — "Search skills". */
+    search: string;
+    query: string;
+    onQuery: (q: string) => void;
+    /** The Add action's words — "New skill". None, and there is no Add. */
+    add?: string;
+    onAdd?: () => void;
+    /** The title's outline level. */
+    level?: 1 | 2;
+    /** The cards. */
+    children?: ReactNode;
+}
+export declare function Shelf({ title, detail, tabs, tab, onTab, views, view, onView, search, query, onQuery, add, onAdd, level, children, ...rest }: ShelfProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Shelf.d.ts.map

package/dist/catalog/Shelf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shelf.d.ts","sourceRoot":"","sources":["../../src/catalog/Shelf.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAuB,MAAM,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE1E,OAAO,EAAS,KAAK,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAMtD,KAAK,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,CAAA;AAW1D,MAAM,WAAW,UAAW,SAAQ,GAAG;IACrC,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,IAAI,EAAE,SAAS,IAAI,EAAE,CAAA;IACrB,0BAA0B;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAA;IACvB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,2DAA2D;IAC3D,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACb,iBAAiB;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,MAAM,EACN,IAAI,EACJ,GAAG,EACH,KAAK,EACL,KAAc,EACd,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACL,OAAO,EACP,GAAG,EACH,KAAK,EACL,KAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,+BA8HZ"}

package/dist/catalog/Shelf.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shelf — a catalogue page: what an org has, and what it can add, one kind at a
+ * time.
+ *
+ *   Customize
+ *   What the agent brings to a run …
+ *   ▢ Skills   ⌁ Connectors   ⧉ Plugins   ☺ Agents          the kinds, a tablist
+ *   ─────────
+ *   [ Yours | Discover ]                       [ + New skill ]
+ *   [ Search skills…                                         ]
+ *   (the cards — `Tiles` of `Tile`s, a `Featured` first)
+ *
+ * The kinds are a tab strip underlined at the chosen one: one tab stop, arrows
+ * move the choice, Home/End jump. Yours/Discover is the package's one segmented
+ * control (`Views`, from `@hanzo/ui/agents`), so it is not drawn twice. The
+ * search and the Add are the shelf's; what they find and add is the host's.
+ *
+ * Presentational: the kind, the half and the query come in, every change goes
+ * out, and the cards are `children`. On a phone the column takes the width, the
+ * tabs drop their icons, and the grid stacks to one card a row.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Plus } from '@hanzogui/lucide-icons-2';
+import { useId, useRef } from 'react';
+import { Views } from '../agents/Workspace.js';
+import { Button } from '../backends/gui/button.js';
+import { Input } from '../backends/gui/input.js';
+import { RING } from '../backends/gui/press.js';
+import { slot } from '../backends/gui/slot.js';
+/** The page's measure, px. Three 280px cards and their gaps, with room. */
+const MEASURE = 1080;
+/** What a shelf shows by default: the org's own, and what it can add. */
+const HALVES = [
+    { id: 'yours', label: 'Yours' },
+    { id: 'discover', label: 'Discover' },
+];
+export function Shelf({ title, detail, tabs, tab, onTab, views = HALVES, view, onView, search, query, onQuery, add, onAdd, level = 1, children, ...rest }) {
+    const refs = useRef([]);
+    const id = useId();
+    const panel = `${id}-panel`;
+    // The strip's one tab stop is the open kind — or the first, when `tab` names
+    // none, so the strip is never unreachable from the keyboard.
+    const stop = Math.max(0, tabs.findIndex((t) => t.id === tab));
+    const move = (e, index) => {
+        const last = tabs.length - 1;
+        const to = e.key === 'ArrowRight' ? (index === last ? 0 : index + 1)
+            : e.key === 'ArrowLeft' ? (index === 0 ? last : index - 1)
+                : e.key === 'Home' ? 0
+                    : e.key === 'End' ? last
+                        : -1;
+        if (to < 0) {
+            // A tab is a button: Enter and Space choose it, which gui does not do for
+            // a stack on its own.
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault?.();
+                onTab(tabs[index].id);
+            }
+            return;
+        }
+        e.preventDefault?.();
+        onTab(tabs[to].id);
+        refs.current[to]?.focus();
+    };
+    return (_jsx(YStack, { ...slot('shelf'), flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, ...rest, children: _jsxs(YStack, { width: "100%", maxW: MEASURE, mx: "auto", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { role: "heading", "aria-level": level, size: "$6", color: "$ink", children: title }), detail ? (_jsx(SizableText, { size: "$2", color: "$soft", children: detail })) : null] }), _jsx(XStack, { ...slot('shelf-tabs'), role: "tablist", "aria-label": title, gap: "$4", borderBottomWidth: 1, borderColor: "$borderColor", "$max-md": { gap: '$3' }, children: tabs.map((t, index) => {
+                        const on = t.id === tab;
+                        const Icon = t.icon;
+                        return (_jsxs(XStack, { ref: (el) => {
+                                refs.current[index] = el;
+                            }, ...slot('shelf-tab'), id: `${id}-tab-${t.id}`, role: "tab", tabIndex: index === stop ? 0 : -1, "aria-selected": on, "aria-controls": on ? panel : undefined, onPress: () => onTab(t.id), onKeyDown: (e) => move(e, index), items: "center", gap: "$1.5", pb: "$2", mb: -1, cursor: "pointer", borderBottomWidth: 2, borderColor: on ? '$ink' : 'transparent', hoverStyle: { borderColor: on ? '$ink' : '$edge' }, focusVisibleStyle: RING, children: [Icon ? (_jsx(XStack, { opacity: on ? 1 : 0.6, "aria-hidden": true, "$max-md": { display: 'none' }, children: _jsx(Icon, { size: 15 }) })) : null, _jsx(SizableText, { size: "$3", color: on ? '$ink' : '$soft', children: t.label })] }, t.id));
+                    }) }), _jsxs(YStack, { ...slot('shelf-panel'), id: panel, role: "tabpanel", "aria-labelledby": tabs.some((t) => t.id === tab) ? `${id}-tab-${tab}` : undefined, "aria-label": tabs.some((t) => t.id === tab) ? undefined : title, gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Views, { views: views, value: view, onChange: onView, label: "Show", labels: "all" }), _jsx(XStack, { flex: 1 }), add && onAdd ? (_jsxs(Button, { size: "sm", onPress: onAdd, children: [_jsx(Plus, { size: 14 }), " ", add] })) : null] }), _jsx(Input, { value: query, onChangeText: onQuery, placeholder: `${search}…`, "aria-label": search }), children] })] }) }));
+}
+//# sourceMappingURL=Shelf.js.map

package/dist/catalog/Shelf.js.map

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

package/dist/catalog/Tile.cjs

@@ -0,0 +1,72 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tiles = Tiles;
+exports.Tile = Tile;
+exports.Featured = Featured;
+exports.Add = Add;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The cards on a `Shelf`.
+ *
+ *   Tiles      the cards, in as many columns as fit — one on a phone
+ *   Tile       one card: its mark, what it is, a few lines, a quiet fact, and
+ *              its one action at the top right
+ *   Featured   the one card a shelf puts first, drawn larger
+ *   Add        a card's action: a plus while it is not yours, a check once it is
+ *
+ * Pressing a card opens it; its action is its own control BESIDE that press,
+ * never inside it — a button in a button is two targets that fight.
+ *
+ * `Tiles` lays out on the package's one grid (`@hanzo/ui/grid`), whose `{ min }`
+ * track is `repeat(auto-fill, minmax(min(280px, 100%), 1fr))`: as many columns
+ * as fit, and never a track wider than a phone. That grid is a `div` with
+ * `display: grid`, so this module is web-only, like the grid itself.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const button_1 = require("../backends/gui/button.cjs");
+const press_1 = require("../backends/gui/press.cjs");
+const slot_1 = require("../backends/gui/slot.cjs");
+const grid_1 = require("../grid.cjs");
+/** A card's narrowest column, px. */
+const MIN = 280;
+/** A press that holds a card's words reads from the left. */
+const LEFT = { textAlign: 'left' };
+/** The cards, in as many columns as fit, one on a phone. A list of `Tile`s. */
+function Tiles({ label, min = MIN, children }) {
+    return ((0, jsx_runtime_1.jsx)(grid_1.Grid, { role: "list", "aria-label": label, columns: { min }, gap: 12, children: children }));
+}
+/**
+ * The press's name is the title and its description the lines under it: named
+ * by `aria-label` alone, a reader heard "git_repos, button" and never what it
+ * does or where it comes from.
+ */
+const told = (id, ...parts) => {
+    const ids = parts.filter(([, v]) => v).map(([k]) => `${id}-${k}`);
+    return ids.length ? ids.join(' ') : undefined;
+};
+/** One card: what it is, a few lines about it, a quiet fact, and its action. */
+function Tile({ title, detail, meta, mark, action, onOpen }) {
+    const id = (0, react_1.useId)();
+    const body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [mark, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, gap: "$1", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: `${id}-title`, size: "$3", color: "$ink", numberOfLines: 1, children: title }), detail ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: `${id}-detail`, size: "$1", color: "$soft", numberOfLines: 3, children: detail })) : null, meta ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: `${id}-meta`, size: "$1", color: "$soft", numberOfLines: 1, opacity: 0.8, children: meta })) : null] })] }));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('tile'), role: "listitem", items: "flex-start", gap: "$2", p: "$3", minW: 0, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: onOpen ? { borderColor: '$edge' } : undefined, children: [onOpen ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('tile-open'), ...(0, press_1.press)(onOpen), "aria-labelledby": `${id}-title`, "aria-describedby": told(id, ['detail', detail], ['meta', meta]), flex: 1, minW: 0, gap: "$3", items: "flex-start", cursor: "pointer", rounded: "$2", style: LEFT, focusVisibleStyle: press_1.RING, children: body })) : ((0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1, minW: 0, gap: "$3", items: "flex-start", children: body })), action] }));
+}
+/** The one card the shelf puts first, drawn larger. Its action wraps under it on a phone. */
+function Featured({ title, detail, meta, mark, action, onOpen, tag = 'Featured' }) {
+    const id = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('featured'), items: "flex-start", gap: "$4", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", flexWrap: "wrap", rowGap: "$3", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('featured-open'), ...(0, press_1.press)(onOpen), "aria-labelledby": `${id}-title`, "aria-describedby": told(id, ['tag', tag], ['detail', detail], ['meta', meta]), flex: 1, minW: 220, gap: "$4", items: "flex-start", cursor: "pointer", rounded: "$2", style: LEFT, focusVisibleStyle: press_1.RING, children: [mark, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, gap: "$1.5", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: `${id}-tag`, size: "$1", color: "$soft", textTransform: "uppercase", letterSpacing: 1, children: tag }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: `${id}-title`, size: "$6", color: "$ink", numberOfLines: 1, children: title }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: `${id}-detail`, size: "$2", color: "$soft", numberOfLines: 3, children: detail }), meta ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: `${id}-meta`, size: "$1", color: "$soft", numberOfLines: 1, children: meta })) : null] })] }), action] }));
+}
+/**
+ * A card's add control: a plus while it is not yours, a check once it is.
+ *
+ * ONE button through all three states, so focus stays where it was: swapping
+ * the button for a bare check (or `disabled`, which drops focus) sent a
+ * keyboard user back to the top of the page the moment the add landed. Busy and
+ * added are `aria-disabled` — still focusable, still named, inert.
+ */
+function Add({ name, added, busy, onPress }) {
+    const inert = added || busy;
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-sm", variant: added ? 'ghost' : 'outline', "aria-label": added ? `${name} is added` : `Add ${name}`, "aria-disabled": inert || undefined, "aria-busy": busy || undefined, onPress: inert ? undefined : onPress, opacity: busy ? 0.5 : 1, cursor: inert ? 'default' : 'pointer', hoverStyle: added ? { bg: 'transparent' } : undefined, children: added ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 14 }) }));
+}

package/dist/catalog/Tile.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from 'react';
+export interface TilesProps {
+    /** Names the list — "Skills to add". */
+    label: string;
+    /** Narrowest a column gets before the grid drops one, px. */
+    min?: number;
+    children?: ReactNode;
+}
+/** The cards, in as many columns as fit, one on a phone. A list of `Tile`s. */
+export declare function Tiles({ label, min, children }: TilesProps): import("react").JSX.Element;
+export interface TileProps {
+    title: string;
+    /** A few lines about it; clamped at three. */
+    detail?: string;
+    /** A quiet fact under them — where it comes from, when it was saved. */
+    meta?: string;
+    /** Its picture, ~32px square. */
+    mark?: ReactNode;
+    /** Its one control, at the top right — an `Add`, a switch. */
+    action?: ReactNode;
+    /** Pressing the card. None, and the card is words only. */
+    onOpen?: () => void;
+}
+/** One card: what it is, a few lines about it, a quiet fact, and its action. */
+export declare function Tile({ title, detail, meta, mark, action, onOpen }: TileProps): import("react").JSX.Element;
+export interface FeaturedProps {
+    title: string;
+    detail: string;
+    meta?: string;
+    mark: ReactNode;
+    action?: ReactNode;
+    onOpen: () => void;
+    /** The word over the title. */
+    tag?: string;
+}
+/** The one card the shelf puts first, drawn larger. Its action wraps under it on a phone. */
+export declare function Featured({ title, detail, meta, mark, action, onOpen, tag }: FeaturedProps): import("react").JSX.Element;
+export interface AddProps {
+    /** What is added — names the control ("Add git_repos") and the check. */
+    name: string;
+    /** It is already yours: a check, not a control. */
+    added: boolean;
+    /** A request is in flight. */
+    busy?: boolean;
+    onPress: () => void;
+}
+/**
+ * A card's add control: a plus while it is not yours, a check once it is.
+ *
+ * ONE button through all three states, so focus stays where it was: swapping
+ * the button for a bare check (or `disabled`, which drops focus) sent a
+ * keyboard user back to the top of the page the moment the add landed. Busy and
+ * added are `aria-disabled` — still focusable, still named, inert.
+ */
+export declare function Add({ name, added, busy, onPress }: AddProps): import("react").JSX.Element;
+//# sourceMappingURL=Tile.d.ts.map

package/dist/catalog/Tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../src/catalog/Tile.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAa7C,MAAM,WAAW,UAAU;IACzB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,+EAA+E;AAC/E,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,GAAS,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAM/D;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAYD,gFAAgF;AAChF,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,+BA6D5E;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,6FAA6F;AAC7F,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,GAAgB,EAAE,EAAE,aAAa,+BAkDtG;AAED,MAAM,WAAW,QAAQ;IACvB,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,KAAK,EAAE,OAAO,CAAA;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,QAAQ,+BAiB3D"}

package/dist/catalog/Tile.js

@@ -0,0 +1,67 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The cards on a `Shelf`.
+ *
+ *   Tiles      the cards, in as many columns as fit — one on a phone
+ *   Tile       one card: its mark, what it is, a few lines, a quiet fact, and
+ *              its one action at the top right
+ *   Featured   the one card a shelf puts first, drawn larger
+ *   Add        a card's action: a plus while it is not yours, a check once it is
+ *
+ * Pressing a card opens it; its action is its own control BESIDE that press,
+ * never inside it — a button in a button is two targets that fight.
+ *
+ * `Tiles` lays out on the package's one grid (`@hanzo/ui/grid`), whose `{ min }`
+ * track is `repeat(auto-fill, minmax(min(280px, 100%), 1fr))`: as many columns
+ * as fit, and never a track wider than a phone. That grid is a `div` with
+ * `display: grid`, so this module is web-only, like the grid itself.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Check, Plus } from '@hanzogui/lucide-icons-2';
+import { useId } from 'react';
+import { Button } from '../backends/gui/button.js';
+import { press, RING } from '../backends/gui/press.js';
+import { slot } from '../backends/gui/slot.js';
+import { Grid } from '../grid.js';
+/** A card's narrowest column, px. */
+const MIN = 280;
+/** A press that holds a card's words reads from the left. */
+const LEFT = { textAlign: 'left' };
+/** The cards, in as many columns as fit, one on a phone. A list of `Tile`s. */
+export function Tiles({ label, min = MIN, children }) {
+    return (_jsx(Grid, { role: "list", "aria-label": label, columns: { min }, gap: 12, children: children }));
+}
+/**
+ * The press's name is the title and its description the lines under it: named
+ * by `aria-label` alone, a reader heard "git_repos, button" and never what it
+ * does or where it comes from.
+ */
+const told = (id, ...parts) => {
+    const ids = parts.filter(([, v]) => v).map(([k]) => `${id}-${k}`);
+    return ids.length ? ids.join(' ') : undefined;
+};
+/** One card: what it is, a few lines about it, a quiet fact, and its action. */
+export function Tile({ title, detail, meta, mark, action, onOpen }) {
+    const id = useId();
+    const body = (_jsxs(_Fragment, { children: [mark, _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { id: `${id}-title`, size: "$3", color: "$ink", numberOfLines: 1, children: title }), detail ? (_jsx(SizableText, { id: `${id}-detail`, size: "$1", color: "$soft", numberOfLines: 3, children: detail })) : null, meta ? (_jsx(SizableText, { id: `${id}-meta`, size: "$1", color: "$soft", numberOfLines: 1, opacity: 0.8, children: meta })) : null] })] }));
+    return (_jsxs(XStack, { ...slot('tile'), role: "listitem", items: "flex-start", gap: "$2", p: "$3", minW: 0, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: onOpen ? { borderColor: '$edge' } : undefined, children: [onOpen ? (_jsx(XStack, { ...slot('tile-open'), ...press(onOpen), "aria-labelledby": `${id}-title`, "aria-describedby": told(id, ['detail', detail], ['meta', meta]), flex: 1, minW: 0, gap: "$3", items: "flex-start", cursor: "pointer", rounded: "$2", style: LEFT, focusVisibleStyle: RING, children: body })) : (_jsx(XStack, { flex: 1, minW: 0, gap: "$3", items: "flex-start", children: body })), action] }));
+}
+/** The one card the shelf puts first, drawn larger. Its action wraps under it on a phone. */
+export function Featured({ title, detail, meta, mark, action, onOpen, tag = 'Featured' }) {
+    const id = useId();
+    return (_jsxs(XStack, { ...slot('featured'), items: "flex-start", gap: "$4", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", flexWrap: "wrap", rowGap: "$3", children: [_jsxs(XStack, { ...slot('featured-open'), ...press(onOpen), "aria-labelledby": `${id}-title`, "aria-describedby": told(id, ['tag', tag], ['detail', detail], ['meta', meta]), flex: 1, minW: 220, gap: "$4", items: "flex-start", cursor: "pointer", rounded: "$2", style: LEFT, focusVisibleStyle: RING, children: [mark, _jsxs(YStack, { flex: 1, minW: 0, gap: "$1.5", children: [_jsx(SizableText, { id: `${id}-tag`, size: "$1", color: "$soft", textTransform: "uppercase", letterSpacing: 1, children: tag }), _jsx(SizableText, { id: `${id}-title`, size: "$6", color: "$ink", numberOfLines: 1, children: title }), _jsx(SizableText, { id: `${id}-detail`, size: "$2", color: "$soft", numberOfLines: 3, children: detail }), meta ? (_jsx(SizableText, { id: `${id}-meta`, size: "$1", color: "$soft", numberOfLines: 1, children: meta })) : null] })] }), action] }));
+}
+/**
+ * A card's add control: a plus while it is not yours, a check once it is.
+ *
+ * ONE button through all three states, so focus stays where it was: swapping
+ * the button for a bare check (or `disabled`, which drops focus) sent a
+ * keyboard user back to the top of the page the moment the add landed. Busy and
+ * added are `aria-disabled` — still focusable, still named, inert.
+ */
+export function Add({ name, added, busy, onPress }) {
+    const inert = added || busy;
+    return (_jsx(Button, { size: "icon-sm", variant: added ? 'ghost' : 'outline', "aria-label": added ? `${name} is added` : `Add ${name}`, "aria-disabled": inert || undefined, "aria-busy": busy || undefined, onPress: inert ? undefined : onPress, opacity: busy ? 0.5 : 1, cursor: inert ? 'default' : 'pointer', hoverStyle: added ? { bg: 'transparent' } : undefined, children: added ? _jsx(Check, { size: 16 }) : _jsx(Plus, { size: 14 }) }));
+}
+//# sourceMappingURL=Tile.js.map

package/dist/catalog/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.js","sourceRoot":"","sources":["../../src/catalog/Tile.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAkB,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,qCAAqC;AACrC,MAAM,GAAG,GAAG,GAAG,CAAA;AAEf,6DAA6D;AAC7D,MAAM,IAAI,GAAG,EAAE,SAAS,EAAE,MAAM,EAAW,CAAA;AAU3C,+EAA+E;AAC/E,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,QAAQ,EAAc;IAC9D,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,gBAAa,KAAK,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,YAC3D,QAAQ,GACJ,CACR,CAAA;AACH,CAAC;AAgBD;;;;GAIG;AACH,MAAM,IAAI,GAAG,CAAC,EAAU,EAAE,GAAG,KAA0B,EAAE,EAAE;IACzD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAA;IACjE,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AAC/C,CAAC,CAAA;AAED,gFAAgF;AAChF,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAa;IAC3E,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IAClB,MAAM,IAAI,GAAG,CACX,8BACG,IAAI,EACL,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,IAAI,aAChC,KAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,MAAM,EAAC,aAAa,EAAE,CAAC,YACpE,KAAK,GACM,EACb,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAE,CAAC,YACtE,MAAM,GACK,CACf,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,YAClF,IAAI,GACO,CACf,CAAC,CAAC,CAAC,IAAI,IACD,IACR,CACJ,CAAA;IACD,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,MAAM,CAAC,EAChB,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,YAAY,EAClB,GAAG,EAAC,IAAI,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAE,CAAC,EACP,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,EAAE,EAAC,QAAQ,EACX,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,aAExD,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,MAAM,OACD,IAAI,CAAC,WAAW,CAAC,KACjB,KAAK,CAAC,MAAM,CAAC,qBACA,GAAG,EAAE,QAAQ,sBACZ,IAAI,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,EAC9D,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,CAAC,EACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAC,YAAY,EAClB,MAAM,EAAC,SAAS,EAChB,OAAO,EAAC,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,iBAAiB,EAAE,IAAI,YAEtB,IAAI,GACE,CACV,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,YAAY,YAClD,IAAI,GACE,CACV,EACA,MAAM,IACA,CACV,CAAA;AACH,CAAC;AAaD,6FAA6F;AAC7F,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,UAAU,EAAiB;IACrG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IAClB,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,UAAU,CAAC,EACpB,KAAK,EAAC,YAAY,EAClB,GAAG,EAAC,IAAI,EACR,CAAC,EAAC,IAAI,EACN,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,MAAM,EACf,MAAM,EAAC,IAAI,aAEX,MAAC,MAAM,OACD,IAAI,CAAC,eAAe,CAAC,KACrB,KAAK,CAAC,MAAM,CAAC,qBACA,GAAG,EAAE,QAAQ,sBACZ,IAAI,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,EAC5E,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,GAAG,EACT,GAAG,EAAC,IAAI,EACR,KAAK,EAAC,YAAY,EAClB,MAAM,EAAC,SAAS,EAChB,OAAO,EAAC,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,iBAAiB,EAAE,IAAI,aAEtB,IAAI,EACL,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,MAAM,aAClC,KAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAC,WAAW,EAAC,aAAa,EAAE,CAAC,YAC7F,GAAG,GACQ,EACd,KAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,MAAM,EAAC,aAAa,EAAE,CAAC,YACpE,KAAK,GACM,EACd,KAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAE,CAAC,YACtE,MAAM,GACK,EACb,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAE,CAAC,YACpE,IAAI,GACO,CACf,CAAC,CAAC,CAAC,IAAI,IACD,IACF,EACR,MAAM,IACA,CACV,CAAA;AACH,CAAC;AAYD;;;;;;;GAOG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAY;IAC1D,MAAM,KAAK,GAAG,KAAK,IAAI,IAAI,CAAA;IAC3B,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,gBACxB,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,mBACvC,KAAK,IAAI,SAAS,eACtB,IAAI,IAAI,SAAS,EAC5B,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACpC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACvB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACrC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,SAAS,YAEpD,KAAK,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GAC1C,CACV,CAAA;AACH,CAAC"}

package/dist/catalog/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tiles = exports.Tile = exports.Featured = exports.Add = exports.Shelf = void 0;
+/**
+ * @hanzo/ui/catalog — a catalogue page: what an org has, and what it can add.
+ *
+ * `Shelf` is the page — title, the kinds as tabs, Yours/Discover, one search
+ * and one Add over both — and the cards are its `children`: `Tiles` of `Tile`s,
+ * a `Featured` first, each with an `Add`.
+ *
+ * Web-only, and off `@hanzo/ui/product` for it: `Tiles` lays out on
+ * `@hanzo/ui/grid` (a `div` with `display: grid`), which the cross-platform
+ * product layer cannot promise. The section parts a tab draws around its cards
+ * — `Group`, `Soft`, `Note`, `Field` — are `@hanzo/ui/settings`'s, one set for
+ * every page.
+ */
+var Shelf_1 = require("./Shelf.cjs");
+Object.defineProperty(exports, "Shelf", { enumerable: true, get: function () { return Shelf_1.Shelf; } });
+var Tile_1 = require("./Tile.cjs");
+Object.defineProperty(exports, "Add", { enumerable: true, get: function () { return Tile_1.Add; } });
+Object.defineProperty(exports, "Featured", { enumerable: true, get: function () { return Tile_1.Featured; } });
+Object.defineProperty(exports, "Tile", { enumerable: true, get: function () { return Tile_1.Tile; } });
+Object.defineProperty(exports, "Tiles", { enumerable: true, get: function () { return Tile_1.Tiles; } });

package/dist/catalog/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @hanzo/ui/catalog — a catalogue page: what an org has, and what it can add.
+ *
+ * `Shelf` is the page — title, the kinds as tabs, Yours/Discover, one search
+ * and one Add over both — and the cards are its `children`: `Tiles` of `Tile`s,
+ * a `Featured` first, each with an `Add`.
+ *
+ * Web-only, and off `@hanzo/ui/product` for it: `Tiles` lays out on
+ * `@hanzo/ui/grid` (a `div` with `display: grid`), which the cross-platform
+ * product layer cannot promise. The section parts a tab draws around its cards
+ * — `Group`, `Soft`, `Note`, `Field` — are `@hanzo/ui/settings`'s, one set for
+ * every page.
+ */
+export { Shelf, type ShelfProps } from './Shelf.js';
+export { Add, Featured, Tile, Tiles, type AddProps, type FeaturedProps, type TileProps, type TilesProps, } from './Tile.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/catalog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/catalog/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EACL,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,UAAU,GAChB,MAAM,QAAQ,CAAA"}

package/dist/catalog/index.js

@@ -0,0 +1,16 @@
+/**
+ * @hanzo/ui/catalog — a catalogue page: what an org has, and what it can add.
+ *
+ * `Shelf` is the page — title, the kinds as tabs, Yours/Discover, one search
+ * and one Add over both — and the cards are its `children`: `Tiles` of `Tile`s,
+ * a `Featured` first, each with an `Add`.
+ *
+ * Web-only, and off `@hanzo/ui/product` for it: `Tiles` lays out on
+ * `@hanzo/ui/grid` (a `div` with `display: grid`), which the cross-platform
+ * product layer cannot promise. The section parts a tab draws around its cards
+ * — `Group`, `Soft`, `Note`, `Field` — are `@hanzo/ui/settings`'s, one set for
+ * every page.
+ */
+export { Shelf } from './Shelf.js';
+export { Add, Featured, Tile, Tiles, } from './Tile.js';
+//# sourceMappingURL=index.js.map

package/dist/catalog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/catalog/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EACL,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,KAAK,GAKN,MAAM,QAAQ,CAAA"}

package/dist/chat/Home.cjs

@@ -0,0 +1,30 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Home = Home;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Home — a fresh pane: the question, and the field that answers it, together in
+ * the middle of the page.
+ *
+ * The mark and the question are one centred line at the display size ($8); the
+ * composer and its chips arrive as `children` and sit under it in the same
+ * column, so the eye reads straight down from the one into the other. A run's
+ * own page keeps its composer at the foot; this is the page before there is a
+ * run.
+ *
+ * `EmptyPrompt` is the other empty state — a smaller question at the top of the
+ * column, for a pane whose composer stays at the foot.
+ *
+ * The mark is a slot, never a brand this package picks: a surface passes its
+ * own (`HanzoMark`, an org mark, nothing), and the heading is the same either
+ * way.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+const EmptyPrompt_1 = require("./EmptyPrompt.cjs");
+/** The composer column's width, so the question and the field share it. */
+const COLUMN = 768;
+function Home({ title = EmptyPrompt_1.NEXT, mark, column = COLUMN, level = 1, children, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.ScrollView, { ...(0, slot_1.slot)('home'), flex: 1, minH: 0, minW: 0, overflowY: "auto", showsVerticalScrollIndicator: false, contentContainerStyle: { grow: 1, justify: 'center' }, ...rest, children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", items: "center", px: "$4", pb: "$10", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: "100%", maxW: column, gap: "$5", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "center", items: "center", gap: "$3", flexWrap: "wrap", children: [mark ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('home-mark'), shrink: 0, items: "center", "aria-hidden": true, children: mark })) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('home-title'), role: "heading", "aria-level": level, size: "$8", color: "$ink", text: "center", children: title })] }), children ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$2", children: children }) : null] }) }) }));
+}

package/dist/chat/Home.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Home — a fresh pane: the question, and the field that answers it, together in
+ * the middle of the page.
+ *
+ * The mark and the question are one centred line at the display size ($8); the
+ * composer and its chips arrive as `children` and sit under it in the same
+ * column, so the eye reads straight down from the one into the other. A run's
+ * own page keeps its composer at the foot; this is the page before there is a
+ * run.
+ *
+ * `EmptyPrompt` is the other empty state — a smaller question at the top of the
+ * column, for a pane whose composer stays at the foot.
+ *
+ * The mark is a slot, never a brand this package picks: a surface passes its
+ * own (`HanzoMark`, an org mark, nothing), and the heading is the same either
+ * way.
+ */
+import { ScrollView } from '@hanzo/gui';
+import type { ComponentProps, ReactNode } from 'react';
+type Scroll = Omit<ComponentProps<typeof ScrollView>, 'children'>;
+export interface HomeProps extends Scroll {
+    /** The question. */
+    title?: ReactNode;
+    /** Drawn before the question — a surface's own mark, ~26px. */
+    mark?: ReactNode;
+    /** The column the question and the composer share, px. */
+    column?: number;
+    /** The heading's outline level; a pane with a page title above it passes 2. */
+    level?: 1 | 2 | 3;
+    /** The composer, and whatever the surface says beside it. */
+    children?: ReactNode;
+}
+export declare function Home({ title, mark, column, level, children, ...rest }: HomeProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Home.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/chat/Home.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAA+B,MAAM,YAAY,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtD,KAAK,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,UAAU,CAAC,CAAA;AAKjE,MAAM,WAAW,SAAU,SAAQ,MAAM;IACvC,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+EAA+E;IAC/E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACjB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAY,EAAE,IAAI,EAAE,MAAe,EAAE,KAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAyCpG"}

package/dist/chat/Home.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Home — a fresh pane: the question, and the field that answers it, together in
+ * the middle of the page.
+ *
+ * The mark and the question are one centred line at the display size ($8); the
+ * composer and its chips arrive as `children` and sit under it in the same
+ * column, so the eye reads straight down from the one into the other. A run's
+ * own page keeps its composer at the foot; this is the page before there is a
+ * run.
+ *
+ * `EmptyPrompt` is the other empty state — a smaller question at the top of the
+ * column, for a pane whose composer stays at the foot.
+ *
+ * The mark is a slot, never a brand this package picks: a surface passes its
+ * own (`HanzoMark`, an org mark, nothing), and the heading is the same either
+ * way.
+ */
+import { ScrollView, SizableText, XStack, YStack } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+import { NEXT } from './EmptyPrompt.js';
+/** The composer column's width, so the question and the field share it. */
+const COLUMN = 768;
+export function Home({ title = NEXT, mark, column = COLUMN, level = 1, children, ...rest }) {
+    return (_jsx(ScrollView, { ...slot('home'), flex: 1, minH: 0, minW: 0, overflowY: "auto", showsVerticalScrollIndicator: false, contentContainerStyle: { grow: 1, justify: 'center' }, ...rest, children: _jsx(YStack, { width: "100%", items: "center", px: "$4", pb: "$10", children: _jsxs(YStack, { width: "100%", maxW: column, gap: "$5", children: [_jsxs(XStack, { justify: "center", items: "center", gap: "$3", flexWrap: "wrap", children: [mark ? (_jsx(XStack, { ...slot('home-mark'), shrink: 0, items: "center", "aria-hidden": true, children: mark })) : null, _jsx(SizableText, { ...slot('home-title'), role: "heading", "aria-level": level, size: "$8", color: "$ink", text: "center", children: title })] }), children ? _jsx(YStack, { gap: "$2", children: children }) : null] }) }) }));
+}
+//# sourceMappingURL=Home.js.map