@cloudgrid-io/ui 0.27.1 → 0.27.2

package/dist/blocks/icons.d.ts

@@ -338,7 +338,7 @@ export { SparkleMark as AiIcon, DatabaseMark as DatabaseIcon, HardDriveMark as S
 /** The rest: glyphs an onboarding question or a sign-in method reaches for. */
 export { UserMark as PersonIcon, EnvelopeMark as EmailIcon, MagnifyingGlassMark as SearchIcon, MegaphoneSimpleMark as AdIcon, StackMark as LayersIcon, ChartPieSliceMark as DashboardIcon, } from "./phosphor-marks.js";
 /** Navigation: the shell's own furniture — a rail, a tab bar, a top bar. */
-export { HouseSimpleMark as HomeIcon, PulseMark as ActivityIcon, CompassMark as DiscoverIcon, ArrowsLeftRightMark as SwitchGridIcon, GridFourMark as SpaceIcon, ListMark as MenuIcon, SidebarSimpleMark as SidebarToggleIcon, BellMark as NotificationsIcon, SignOutMark as SignOutIcon, CaretLeftMark as BackIcon, ArrowRightMark as ForwardIcon, } from "./phosphor-marks.js";
+export { HouseSimpleMark as HomeIcon, PulseMark as ActivityIcon, CompassMark as DiscoverIcon, ArrowsLeftRightMark as SwitchGridIcon, GridFourMark as SpaceIcon, ListMark as MenuIcon, SidebarSimpleMark as SidebarToggleIcon, BellMark as NotificationsIcon, SignOutMark as SignOutIcon, CaretLeftMark as BackIcon, ArrowRightMark as ForwardIcon, GridFourMark as OverviewIcon, } from "./phosphor-marks.js";
 /** Actions a row, a card kebab or a detail header offers. */
 export { PencilSimpleMark as EditIcon, TrashMark as DeleteIcon, PushPinMark as PinIcon, ArrowsClockwiseMark as RefreshIcon, DownloadSimpleMark as DownloadIcon, FileTextMark as DocumentIcon, ArrowUpMark as SortAscendingIcon, ArrowDownMark as SortDescendingIcon, } from "./phosphor-marks.js";
 /** Access, and the people it is about. */

package/dist/blocks/icons.d.ts.map

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

package/dist/blocks/icons.js

@@ -338,7 +338,19 @@ export { SparkleMark as AiIcon, DatabaseMark as DatabaseIcon, HardDriveMark as S
 /** The rest: glyphs an onboarding question or a sign-in method reaches for. */
 export { UserMark as PersonIcon, EnvelopeMark as EmailIcon, MagnifyingGlassMark as SearchIcon, MegaphoneSimpleMark as AdIcon, StackMark as LayersIcon, ChartPieSliceMark as DashboardIcon, } from "./phosphor-marks.js";
 /** Navigation: the shell's own furniture — a rail, a tab bar, a top bar. */
-export { HouseSimpleMark as HomeIcon, PulseMark as ActivityIcon, CompassMark as DiscoverIcon, ArrowsLeftRightMark as SwitchGridIcon, GridFourMark as SpaceIcon, ListMark as MenuIcon, SidebarSimpleMark as SidebarToggleIcon, BellMark as NotificationsIcon, SignOutMark as SignOutIcon, CaretLeftMark as BackIcon, ArrowRightMark as ForwardIcon, } from "./phosphor-marks.js";
+export { HouseSimpleMark as HomeIcon, PulseMark as ActivityIcon, CompassMark as DiscoverIcon, ArrowsLeftRightMark as SwitchGridIcon, GridFourMark as SpaceIcon, ListMark as MenuIcon, SidebarSimpleMark as SidebarToggleIcon, BellMark as NotificationsIcon, SignOutMark as SignOutIcon, CaretLeftMark as BackIcon, ArrowRightMark as ForwardIcon, 
+// The same glyph as `SpaceIcon`, under a second role name, and deliberately
+// not a rename of it (#225). `grid-four` is what the app page's sidebar draws
+// on its Overview row, and `SpaceIcon` is the name a GRID wears in the
+// console's own shell — one is a destination inside a thing, the other is the
+// thing. Writing `SpaceIcon` on an app's Overview row would teach a reader of
+// the call site that the two are the same idea.
+//
+// The `SaveIcon` / `PinIcon` precedent (#200), applied: a duplicate costs a
+// paragraph, and deleting a name is the one move that breaks every consumer
+// at once. Both are pinned in icon-surface.test.mjs so the paragraph cannot
+// quietly stop being true.
+GridFourMark as OverviewIcon, } from "./phosphor-marks.js";
 /** Actions a row, a card kebab or a detail header offers. */
 export { PencilSimpleMark as EditIcon, TrashMark as DeleteIcon, PushPinMark as PinIcon, ArrowsClockwiseMark as RefreshIcon, DownloadSimpleMark as DownloadIcon, FileTextMark as DocumentIcon, ArrowUpMark as SortAscendingIcon, ArrowDownMark as SortDescendingIcon, } from "./phosphor-marks.js";
 /** Access, and the people it is about. */

package/dist/blocks/icons.js.map

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

package/dist/blocks/side-nav.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+declare function SideNav({ label, context, className, children, onKeyDown, ...props }: Omit<React.ComponentProps<"nav">, "ref"> & {
+    /**
+     * Names the landmark. Required, not optional: a page with two `<nav>`s and no
+     * names gives a screen-reader user two identical "navigation" entries and no
+     * way to tell the app's sidebar from the site's header.
+     */
+    label: string;
+    /**
+     * The line above the groups. The frame's is "Atomic Labs / chimp-me", and the
+     * separator is in there because the caller composes it — this block does not
+     * know that a grid contains an app.
+     */
+    context?: React.ReactNode;
+}): React.JSX.Element;
+declare function SideNavGroup({ label, icon, collapsible, open, defaultOpen, onOpenChange, className, children, ...props }: Omit<React.ComponentProps<"div">, "ref" | "children"> & {
+    /** APP, MANAGE, or the header's words when `collapsible`. */
+    label?: React.ReactNode;
+    /**
+     * The header's leading glyph, for a collapsible group. A plain group is
+     * labelled by an eyebrow and has no glyph, which is what the frames draw.
+     */
+    icon?: React.ReactNode;
+    collapsible?: boolean;
+    /** Controlled. Pass `onOpenChange` with it. */
+    open?: boolean;
+    /** Uncontrolled starting state. Ignored when `open` is passed. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function SideNavItem({ label, icon, count, active, render, className, onKeyDown, ...props }: Omit<useRender.ComponentProps<"button">, "children"> & {
+    label: React.ReactNode;
+    /** 14 to 16px. The row's label is what gets announced, so the glyph carries no name. */
+    icon?: React.ReactNode;
+    /**
+     * The trailing pill. The frame's Feedback row wears a `0`.
+     *
+     * It renders as text inside the row, so the accessible name becomes
+     * "Feedback 0" — the same two pieces of information a sighted reader gets. A
+     * caller who needs "Feedback, 0 unread" passes that as `label` and leaves
+     * this alone, because only the caller knows what is being counted.
+     */
+    count?: number;
+    active?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { SideNav, SideNavGroup, SideNavItem };
+//# sourceMappingURL=side-nav.d.ts.map

package/dist/blocks/side-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../src/blocks/side-nav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AA0GrD,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IAC5C;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,qBAqCA;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACzD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,qBAgGA;AAED,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACxD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,wFAAwF;IACxF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,0EAmEA;AAED,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/side-nav.js

@@ -0,0 +1,217 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronDownIcon } from "./icons.js";
+import { Eyebrow } from "./eyebrow.js";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * The vertical navigation that stands inside a page box: a context line, a set
+ * of labelled groups, and a column of rows one of which is the page you are on.
+ *
+ * Read from the Console's redesigned app page (ui#225, Figma 8010:385,
+ * 8316:2158, 8306:2294). Three roles see three different columns of the same
+ * nav — an owner sees APP with `Build & run` collapsed, a grid admin sees it
+ * expanded with seven children, a viewer sees APP alone — so the shape that
+ * ships is one nav whose groups and rows are handed in, not three sidebars.
+ *
+ * ## It draws and it behaves. It does not know where anything is
+ *
+ * The line #117 drew for the entity card, and the reason `render` below exists.
+ * This block builds no `href`, matches no route and gates no role. The consumer
+ * decides which rows a reader may see, which one is `active`, and what element
+ * a row actually is. Anything else would put the Console's URL helpers and its
+ * role model inside the design system, where neither can be right for long.
+ *
+ * ## Three parts, and what each is for
+ *
+ * `SideNav`         the `<nav>` landmark, the context slot, and the keyboard.
+ * `SideNavGroup`    an eyebrow-labelled run of rows (APP, MANAGE), or a
+ *                   collapsible one with a header of its own (Build & run).
+ * `SideNavItem`     one row: a glyph, a label, an optional count, and whether
+ *                   it is the page you are on.
+ *
+ * ## The keyboard
+ *
+ * Every row is a real tab stop, so Tab walks the column in DOM order. Arrow
+ * keys are laid over that rather than replacing it: ArrowDown and ArrowUp move
+ * focus between rows and wrap at the ends, which is what a reader who has
+ * landed in a 15-row column expects and what Tab alone makes tedious.
+ *
+ * This is deliberately NOT a roving-tabindex tablist. A tablist owns one tab
+ * stop because its tabs are one control; these rows are links to separate
+ * pages, and making fourteen of them unreachable by Tab to satisfy a pattern
+ * they are not an instance of is a worse nav, not a more correct one.
+ *
+ * A collapsible group's header is in the same ring as the rows. It sits in the
+ * column and looks like a row, so an arrow key that skipped it would strand the
+ * one control that reveals six more.
+ *
+ * Space is handled explicitly, and only where the browser does not. A `<button>`
+ * activates on both Enter and Space already; an `<a href>` activates on Enter
+ * and SCROLLS THE PAGE on Space. Since a row is normally an anchor — that is
+ * what `render={<Link />}` makes it — the nav synthesises the click for Space
+ * on anything that is not a button. Doing it unconditionally would fire a
+ * button's activation twice, once here and once natively.
+ *
+ * ## The active row does not flip, and that is the decision
+ *
+ * The frame's active row is a pale lavender chip carrying purple text:
+ * `--cg-primary-tint` under `--cg-primary`. Both are declared at `:root` only,
+ * so the row paints the same two values on the page, on the purple panel and on
+ * ink — and that is the point rather than an oversight.
+ *
+ * It is the kind badge's rule (#196) applied to a row: the chip brings its own
+ * ground, so it does not need the surface's answer for one. The pair measures
+ * 5.02:1, which clears AA for its 15px label everywhere, and the chip measures
+ * 1.16:1 against the white card, 5.02:1 against the panel and 13.68:1 on ink.
+ * `packages/ui/test/contrast-guardrail.test.mjs` holds every one of those
+ * numbers, and says why the chip's own floor is not 3:1.
+ *
+ * The alternative was a surface-scoped `--cg-primary-tint`, and it fails on the
+ * panel for a measured reason the token file already records: a white wash over
+ * the brand purple gives white text 4.31:1, under the floor, and white is the
+ * lightest colour there is. AA on a tinted row over that ground needs the FILL
+ * to move, which is a brand decision and not this block's.
+ *
+ * Everything else in the nav does flip: the rows' text, the hover wash, the
+ * hairline, the count pill. The root sets `text-ink` because text does not flip
+ * by inheritance (rule 3).
+ *
+ * ## No hover ground you can name
+ *
+ * The rows hover on `var(--cg-hover)` directly. It is the one token that means
+ * "a wash over whatever this sits on" and it is declared in all three scopes;
+ * `theme.css` gives it no utility on purpose, because `bg-hover` sits one
+ * character from Tailwind's own `hover:` variant. `bg-subtle` would have been
+ * the obvious reach and it is lavender at `:root` only, so a hovered row on the
+ * purple panel would have been white text on near-white.
+ */
+/** Rows and group headers, in the order the column draws them. */
+const ROW_SELECTOR = '[data-slot="side-nav-item"],[data-slot="side-nav-group-header"]';
+/**
+ * The rows a key press can actually reach.
+ *
+ * Filtered on `getClientRects()` rather than on the DOM, because a closed
+ * group's rows stay MOUNTED (see `SideNavGroup`) and a ring that counted them
+ * would move focus onto a `display: none` element, which silently drops it to
+ * the body.
+ */
+function reachableRows(root) {
+    return Array.from(root.querySelectorAll(ROW_SELECTOR)).filter((el) => el.getClientRects().length > 0 && !el.hasAttribute("disabled"));
+}
+function SideNav({ label, context, className, children, onKeyDown, ...props }) {
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const step = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+        if (step === 0)
+            return;
+        const rows = reachableRows(event.currentTarget);
+        const from = rows.indexOf(document.activeElement);
+        // Not -1 only when focus is already on a row. A key press while focus sits
+        // in the context line should scroll the page, as it would anywhere else.
+        if (from === -1 || rows.length === 0)
+            return;
+        event.preventDefault();
+        rows[(from + step + rows.length) % rows.length]?.focus();
+    }
+    return (_jsxs("nav", { "data-slot": "side-nav", "aria-label": label, onKeyDown: handleKeyDown, 
+        // text-ink because text does not flip by inheritance: without it every
+        // row inside a panel would inherit the page's dark ink and stay dark on
+        // purple.
+        className: cn("flex w-full flex-col gap-6 text-ink", className), ...props, children: [context ? (_jsx("div", { "data-slot": "side-nav-context", className: "px-3 text-caption text-faint", children: context })) : null, children] }));
+}
+function SideNavGroup({ label, icon, collapsible, open, defaultOpen = false, onOpenChange, className, children, ...props }) {
+    const panelId = React.useId();
+    const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : uncontrolled;
+    function toggle() {
+        const next = !isOpen;
+        if (!isControlled)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    }
+    const rows = (_jsx("div", { className: 
+        // The display utility is applied ONLY when open, and that is not a
+        // shortcut. The UA's `[hidden] { display: none }` is an author-beatable
+        // rule, so a `flex` class on the same element wins it and the panel
+        // stays visible while announcing itself collapsed.
+        //
+        // Tailwind v4's preflight covers for that with
+        // `[hidden]:where(:not([hidden='until-found'])) { display: none
+        // !important }`, which is why the trap does not bite in this repo's own
+        // gallery. It bites in a consumer that takes the theme without the
+        // preflight — the Astro surface this registry serves, and anyone who
+        // disables it — so the fix belongs in the component rather than in a
+        // stylesheet the component does not ship. Same argument as `Eyebrow`'s
+        // `m-0`.
+        isOpen ? "flex flex-col gap-0.5" : undefined, children: children }));
+    if (!collapsible) {
+        return (_jsxs("div", { "data-slot": "side-nav-group", className: cn("flex flex-col gap-1", className), ...props, children: [label ? (
+                // The library's eyebrow rather than its recipe, so retuning the label
+                // step is one edit in eyebrow.tsx. Caps and the caption size are this
+                // frame's treatment of it, which is what `className` is for — see the
+                // eyebrow's own note on not being uppercase by default.
+                _jsx(Eyebrow, { className: "px-3 text-caption uppercase", children: label })) : null, rows] }));
+    }
+    return (_jsxs("div", { "data-slot": "side-nav-group", "data-collapsible": "", "data-open": isOpen ? "" : undefined, className: cn("flex flex-col gap-0.5", className), ...props, children: [_jsxs("button", { type: "button", "data-slot": "side-nav-group-header", "aria-expanded": isOpen, "aria-controls": panelId, onClick: toggle, className: cn("flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-body-sm text-body", "transition-colors hover:bg-(--cg-hover) hover:text-ink", "focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none"), children: [icon ? (_jsx("span", { "data-slot": "side-nav-icon", className: "flex size-4 shrink-0 items-center justify-center", children: icon })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx(ChevronDownIcon
+                    // The caret is the only thing in this block that moves. It rotates
+                    // rather than swapping to a second glyph, so the direction it points
+                    // is continuous with the panel opening under it.
+                    , { 
+                        // The caret is the only thing in this block that moves. It rotates
+                        // rather than swapping to a second glyph, so the direction it points
+                        // is continuous with the panel opening under it.
+                        className: cn("size-4 shrink-0 transition-transform duration-[var(--cg-duration)] ease-out", isOpen ? "rotate-0" : "-rotate-90") })] }), _jsx("div", { id: panelId, hidden: !isOpen, className: isOpen ? "pl-3" : undefined, children: rows })] }));
+}
+function SideNavItem({ label, icon, count, active, render, className, onKeyDown, ...props }) {
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        // See the module note: Space on an anchor scrolls. Synthesised only for the
+        // elements the browser does not already activate, or a button fires twice.
+        if (event.key !== " ")
+            return;
+        const el = event.currentTarget;
+        if (el.tagName === "BUTTON")
+            return;
+        event.preventDefault();
+        el.click();
+    }
+    return useRender({
+        render,
+        defaultTagName: "button",
+        props: {
+            "data-slot": "side-nav-item",
+            "data-active": active ? "" : undefined,
+            // aria-current is what says "this is the page you are on". The tint says
+            // it to a reader who can see it, and colour is never the only channel.
+            "aria-current": active ? "page" : undefined,
+            // Only when this really is a <button>. `type` on an anchor is invalid,
+            // and `render={<Link />}` is the common case.
+            ...(render ? {} : { type: "button" }),
+            onKeyDown: handleKeyDown,
+            className: cn("flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-body-sm no-underline", "transition-colors focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none", active
+                ? // The self-contained chip. See the module note for the numbers and
+                    // for why it is the same two values on all three surfaces.
+                    "bg-brand-tint font-medium text-brand"
+                : "text-body hover:bg-(--cg-hover) hover:text-ink", className),
+            // The row's content is composed from the three slots rather than taken as
+            // `children`, which is why `children` is omitted from the props type: a
+            // caller who could pass both would have two ways to fill one row and no
+            // rule about which wins.
+            children: (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "data-slot": "side-nav-icon", className: "flex size-4 shrink-0 items-center justify-center", children: icon })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), count === undefined ? null : (_jsx("span", { "data-slot": "side-nav-count", 
+                        // The wash again, for the reason the hover uses it: a pale grey
+                        // pill named `bg-raised` is neutral-50 at :root only, so it would
+                        // be a near-white pill on the purple panel.
+                        className: "shrink-0 rounded-pill bg-(--cg-hover) px-2 text-caption text-body", children: count }))] })),
+            ...props,
+        },
+    });
+}
+export { SideNav, SideNavGroup, SideNavItem };
+//# sourceMappingURL=side-nav.js.map

package/dist/blocks/side-nav.js.map

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

package/dist/blocks/stat-tile.d.ts

@@ -0,0 +1,69 @@
+import * as React from "react";
+/**
+ * One metric, in a bordered card: a small label, a large value, one line of
+ * sub-label under it.
+ *
+ * Every number on the Console's redesigned app page is this tile (ui#227, Figma
+ * 8010:385 and 8036:780) — Views, Time on view, AI tokens, Requests,
+ * Deployments, App type — laid out in rows of three or four. The Console
+ * hand-rolls the arrangement in `EntityAnalyticsBoard` today and Home keeps a
+ * second copy, which is two places for one tile and the reason this exists.
+ *
+ * ## `value` is a node, and that is load-bearing
+ *
+ * Six of the eight tiles in the Insights frame carry a number, and the other
+ * two carry "Static" and "11 plugs · 0 errors". A tile that took a `number`
+ * would have forced the Console to keep its own component for the two that are
+ * words, which is the duplication this block is replacing.
+ *
+ * ## `pending`, so a tile never invents a number
+ *
+ * The frame's "Time per request" tile reads "Coming soon" in the value's own
+ * position, muted, with the hint still saying "Latency". That is the whole
+ * state: the metric is real, the reporting is not built, and the tile says so
+ * rather than showing a zero that a reader would take for a measurement. The
+ * words are this block's rather than the caller's on purpose — one spelling,
+ * everywhere it is true.
+ *
+ * ## The hint's two tones
+ *
+ * `neutral` is the reporting period ("Last 30 days", "Median", "All time"), and
+ * it is the common case. `positive` is the one the frames do not draw and the
+ * issue asks for: "+50 this week", growth said in the state palette's own
+ * green.
+ *
+ * It resolves `--cg-online-strong` rather than `--cg-online`. The tone is tuned
+ * for a dot and its own note says so — "3.40:1 on white, never body text on
+ * white" — while `-strong` is the rung the system added for a status as WORDS
+ * and it holds 4.5:1. Inside the panel and ink scopes `-strong` resolves to the
+ * surface's own primary text, which is the token file's recorded decision, not
+ * a fallback invented here: there is no green on the purple panel that clears
+ * AA at any value. So a positive hint on a dark surface reads as the surface's
+ * brightest text beside a muted neutral one, which is still a difference a
+ * reader can see.
+ *
+ * No new colour was added for it, per ui#227.
+ *
+ * ## Type
+ *
+ * The value takes the display rung and the display face, and deliberately not
+ * `PageHeading`'s uppercase and display tracking: those are tuned for a lockup
+ * of words. `tabular-nums` because a column of tiles whose digits are
+ * proportional jitters when one of them ticks over.
+ */
+/** The hint's tone. `positive` is growth; there is no negative, because the frames draw none. */
+export type StatHintTone = "neutral" | "positive";
+declare function StatTile({ label, value, hint, hintTone, pending, className, ...props }: Omit<React.ComponentProps<"div">, "ref" | "children"> & {
+    /** Names the metric. Small and muted, above the value. */
+    label: React.ReactNode;
+    /** The measurement. Ignored when `pending`. */
+    value?: React.ReactNode;
+    /** One line under the value: the reporting period, or what moved. */
+    hint?: React.ReactNode;
+    hintTone?: StatHintTone;
+    /** The metric is real and the number is not available yet. */
+    pending?: boolean;
+}): React.JSX.Element;
+declare function StatTileRow({ className, children, ...props }: Omit<React.ComponentProps<"div">, "ref">): React.JSX.Element;
+export { StatTile, StatTileRow };
+//# sourceMappingURL=stat-tile.d.ts.map

package/dist/blocks/stat-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-tile.d.ts","sourceRoot":"","sources":["../../src/blocks/stat-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAEH,iGAAiG;AACjG,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAA;AAOjD,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAoB,EACpB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACzD,0DAA0D;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBAkCA;AAsBD,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,qBAiB1C;AAcD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/stat-tile.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cloudgrid-cn.js";
+const HINT_TONE = {
+    neutral: "text-faint",
+    positive: "text-online-strong",
+};
+function StatTile({ label, value, hint, hintTone = "neutral", pending, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "stat-tile", "data-pending": pending ? "" : undefined, 
+        // text-ink on the root, because text does not flip by inheritance
+        // (rule 3): without it a tile inside a panel inherits the page's dark ink
+        // and its value stays dark on purple.
+        className: cn("flex min-w-0 flex-col gap-1 rounded-xl border border-hairline bg-card p-4 text-ink", className), ...props, children: [_jsx("span", { "data-slot": "stat-tile-label", className: "text-caption text-faint", children: label }), _jsx("span", { "data-slot": "stat-tile-value", "data-pending": pending ? "" : undefined, className: cn("font-display text-display-sm leading-display font-medium tabular-nums", pending && "text-faint"), children: pending ? "Coming soon" : value }), hint ? (_jsx("span", { "data-slot": "stat-tile-hint", "data-tone": hintTone, className: cn("text-caption", HINT_TONE[hintTone]), children: hint })) : null] }));
+}
+/**
+ * A row of tiles: two, three or four, side by side, stacking as the column
+ * narrows.
+ *
+ * The frames draw three on Overview and four on Insights, so the count is the
+ * caller's and the breakpoints are derived from it rather than passed. Four
+ * across at phone width would be four columns of two characters each.
+ *
+ * The class strings are a lookup rather than a template, and that is not
+ * stylistic: Tailwind emits only the utilities it finds by scanning source, so
+ * a built `lg:grid-cols-${n}` compiles to a class that exists in the markup and
+ * in no stylesheet. Nothing errors; the row simply never becomes a grid.
+ */
+const ROW_COLUMNS = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+function StatTileRow({ className, children, ...props }) {
+    // Counted rather than taken as a prop, so a tile added to a row cannot leave
+    // the layout describing the row it used to be. Anything over four falls to
+    // the four-column ramp: it wraps, which is a legible answer, and the issue's
+    // range is two to four.
+    const count = Math.min(4, Math.max(1, countTiles(children)));
+    return (_jsx("div", { "data-slot": "stat-tile-row", "data-tiles": count, className: cn("grid gap-4", ROW_COLUMNS[count], className), ...props, children: children }));
+}
+/**
+ * How many tiles a caller actually handed over.
+ *
+ * `React.Children.count` counts a mapped array as one child, and a row built
+ * from data — which is how a consumer will build it — is exactly that shape. So
+ * this flattens first, and drops the nulls a `cond && <StatTile />` leaves
+ * behind, since a conditional tile that is absent must not hold a column open.
+ */
+function countTiles(children) {
+    return React.Children.toArray(children).length;
+}
+export { StatTile, StatTileRow };
+//# sourceMappingURL=stat-tile.js.map

package/dist/blocks/stat-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-tile.js","sourceRoot":"","sources":["../../src/blocks/stat-tile.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AA0DvC,MAAM,SAAS,GAAiC;IAC9C,OAAO,EAAE,YAAY;IACrB,QAAQ,EAAE,oBAAoB;CAC/B,CAAA;AAED,SAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,SAAS,EACpB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EAWT;IACC,OAAO,CACL,4BACY,WAAW,kBACP,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;QACtC,kEAAkE;QAClE,0EAA0E;QAC1E,sCAAsC;QACtC,SAAS,EAAE,EAAE,CACX,oFAAoF,EACpF,SAAS,CACV,KACG,KAAK,aAET,4BAAgB,iBAAiB,EAAC,SAAS,EAAC,yBAAyB,YAClE,KAAK,GACD,EACP,4BACY,iBAAiB,kBACb,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACtC,SAAS,EAAE,EAAE,CACX,uEAAuE,EACvE,OAAO,IAAI,YAAY,CACxB,YAEA,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,GAC3B,EACN,IAAI,CAAC,CAAC,CAAC,CACN,4BAAgB,gBAAgB,eAAY,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,YACrG,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,GAA2B;IAC1C,CAAC,EAAE,aAAa;IAChB,CAAC,EAAE,4BAA4B;IAC/B,CAAC,EAAE,2CAA2C;IAC9C,CAAC,EAAE,2CAA2C;CAC/C,CAAA;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACiC;IACzC,6EAA6E;IAC7E,2EAA2E;IAC3E,6EAA6E;IAC7E,wBAAwB;IACxB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAE5D,OAAO,CACL,2BACY,eAAe,gBACb,KAAK,EACjB,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,KACtD,KAAK,YAER,QAAQ,GACL,CACP,CAAA;AACH,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,UAAU,CAAC,QAAyB;IAC3C,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAA;AAChD,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/tool-setup.d.ts

@@ -44,7 +44,64 @@ import { PageHeading } from "./page-heading.js";
  * that an answer had been given when the user was reading. Tabs say "same
  * screen, different content", which is what this is.
  */
-export interface ToolSetupTool {
+/**
+ * An install METHOD: MCP, CLI, Skills. Optional, and everything about the method
+ * axis is keyed on whether any are passed.
+ *
+ * A tool supports a method when it has steps for it. Nothing declares support
+ * separately, because two places to say the same thing is one place to get it
+ * wrong: the CLI tab drops ChatGPT because ChatGPT has no CLI steps, not because
+ * a flag says so.
+ */
+export interface ToolSetupMethod {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * A heading for a run of tools in the strip. Coding agents, chat apps.
+ *
+ * A group whose tools are all filtered out by the current method disappears,
+ * along with the divider that would have sat beside it. That is the same rule
+ * `HubIndex` encodes for its own groups, and for the same reason: a group may
+ * legitimately name nothing right now.
+ */
+export interface ToolSetupGroup {
+    value: string;
+    label: string;
+}
+/**
+ * One step of a pane.
+ *
+ * `label` is an alternative marker ("Easiest", "Or") rather than a sequence
+ * position. A pane whose first step carries one is a set of CHOICES and renders
+ * as columns; a pane without is a SEQUENCE and renders as a numbered `StepList`,
+ * whose `<ol>` does the numbering for a screen reader.
+ *
+ * `body` is a node, not a string. Body copy carries emphasis, and a text grammar
+ * in the design system is a second content system arriving through the side
+ * door. The caller renders its own Markdown, or HTML, or nothing, and hands over
+ * what it wants painted. Same line #117, #121 and #126 drew.
+ */
+export interface ToolSetupStep {
+    /** "Easiest", "Or". Present on the first step makes the pane a set of choices. */
+    label?: string;
+    title: string;
+    body?: React.ReactNode;
+    /** A multi line prompt to hand an agent. */
+    prompt?: string;
+    /** A single command to run. */
+    code?: string;
+    link?: {
+        label: string;
+        href: string;
+        /** The caller's glyph. The library does not pick it, per HubIndex and #47. */
+        icon?: React.ReactNode;
+        /** Draw it as the primary action rather than a secondary one. */
+        primary?: boolean;
+    };
+}
+interface ToolSetupToolBase {
     /** What `onValueChange` reports. Stable, and never shown. */
     value: string;
     /** The words on the tab. Two short words wrap; they are not truncated. */
@@ -55,8 +112,14 @@ export interface ToolSetupTool {
      * boilerplate at the exact moment the user needs to know where the text goes.
      */
     instruction?: string;
-    /** The text to paste. Multi-line is normal here; `CodeBlock` preserves it. */
-    prompt: string;
+    /** Which `ToolSetupGroup` this sits under. Ignored when no groups are passed. */
+    group?: string;
+    /**
+     * The vendor mark, supplied by the caller. A node rather than a name: which
+     * marks exist is content, and the trademark question in #47 is not this
+     * component's to answer.
+     */
+    mark?: React.ReactNode;
     /** Shown beside the instruction. For a tool with a manual path as well. */
     alternative?: {
         label: string;
@@ -64,8 +127,38 @@ export interface ToolSetupTool {
     };
     disabled?: boolean;
 }
-declare function ToolSetup({ tools, value, defaultValue, onValueChange, title, sub, eyebrow, level, headingSize, continueLabel, onContinue, canContinue, footer, className, ...props }: Omit<React.ComponentProps<"section">, "ref" | "title" | "defaultValue" | "onChange"> & {
+/**
+ * A tool has to have something to show, and the type says so.
+ *
+ * Making `prompt` merely optional was wrong: it took the guarantee away from
+ * every existing caller, so a typo in `prompt` stopped being a compile error and
+ * became a tab with an empty bordered panel under it. The union keeps the old
+ * contract for callers that pass no steps and adds the new one, without a
+ * runtime check standing in for a type.
+ *
+ * `prompt` stays readable on the union because both arms declare it, so the
+ * panel can fall back to it without narrowing.
+ *
+ * `steps` is keyed by method value. Passing it is what puts a tool on the method
+ * axis; a tool with no entry for the selected method is filtered out of the
+ * strip, which is also why a `prompt` only tool never appears in method mode.
+ */
+export type ToolSetupTool = ToolSetupToolBase & ({
+    prompt: string;
+    steps?: Record<string, ToolSetupStep[]>;
+} | {
+    prompt?: string;
+    steps: Record<string, ToolSetupStep[]>;
+});
+declare function ToolSetup({ tools, methods, groups, method, defaultMethod, onMethodChange, value, defaultValue, onValueChange, title, sub, eyebrow, level, headingSize, continueLabel, emptyLabel, onContinue, canContinue, footer, className, ...props }: Omit<React.ComponentProps<"section">, "ref" | "title" | "defaultValue" | "onChange"> & {
     tools: ToolSetupTool[];
+    /** Pass these and the method strip appears above the tool strip. */
+    methods?: ToolSetupMethod[];
+    /** Pass these and the tool strip is grouped, with empty groups dropped. */
+    groups?: ToolSetupGroup[];
+    method?: string;
+    defaultMethod?: string;
+    onMethodChange?: (method: string) => void;
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -89,6 +182,14 @@ declare function ToolSetup({ tools, value, defaultValue, onValueChange, title, s
      * declarative opt-out works from both.
      */
     continueLabel?: string | null;
+    /**
+     * Shown when the selected method leaves no tools to pick from. A default
+     * rather than a required prop, on the same reasoning as `continueLabel`: the
+     * state is reachable by passing a method nothing supports, and a heading over
+     * blank space is the "reads as broken" outcome the note on `first` exists to
+     * prevent.
+     */
+    emptyLabel?: string;
     onContinue?: () => void;
     /**
      * Defaults to `true`, unlike `OnboardingQuestion`'s. Nothing here is an answer