@cloudgrid-io/ui 0.40.0 → 0.41.0

package/dist/blocks/action-link.d.ts

@@ -0,0 +1,31 @@
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * The teal text link of the 2026 Home (#382): "Explore All", "Open",
+ * "Dismiss", "onboard an agent" (spec §4.3 to §4.8, Figma Tertiary Dark).
+ *
+ * Body (15) in `--cg-tertiary-dark` (#45CDD4), no underline at rest, an
+ * underline on hover (the frames draw no hover state; this is the library's
+ * feedback for a text link), the focus ring on keyboard focus.
+ *
+ * ## The colour is under AA, on purpose
+ *
+ * #45CDD4 measures 1.92:1 on white. The design uses it knowingly (Gilad,
+ * 2026-11-01, spec §6.1), and every link drawn in it also carries an
+ * accessible name, so a reader who cannot see the colour still gets the words.
+ *
+ * ## The token comes from ui#381
+ *
+ * `--cg-tertiary-dark` is the header set's token (ui#381); this block reads it
+ * and does not declare it.
+ *
+ * `ACTION_LINK_CLASS` is exported for a control that is not an anchor but
+ * should look like one: Dismiss (a button) and the empty state's "onboard an
+ * agent" (a `CopyButton`).
+ */
+declare const ACTION_LINK_CLASS = "inline-flex items-center rounded-2xs text-body-sm text-(--cg-tertiary-dark) no-underline underline-offset-4 hover:underline outline-none focus-visible:ring-3 focus-visible:ring-ring";
+declare function ActionLink({ render, weight, className, ...props }: useRender.ComponentProps<"a"> & {
+    /** `regular` (Body: Open, "onboard an agent") or `bold` (Body Bold: Explore All, Dismiss). */
+    weight?: "regular" | "bold";
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { ACTION_LINK_CLASS, ActionLink };
+//# sourceMappingURL=action-link.d.ts.map

package/dist/blocks/action-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-link.d.ts","sourceRoot":"","sources":["../../src/blocks/action-link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAIrD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,iBAAiB,0LACkK,CAAA;AAEzL,iBAAS,UAAU,CAAC,EAClB,MAAM,EACN,MAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IACjC,8FAA8F;IAC9F,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;CAC5B,8FAUA;AAED,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAA"}

package/dist/blocks/action-link.js

@@ -0,0 +1,40 @@
+"use client";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * The teal text link of the 2026 Home (#382): "Explore All", "Open",
+ * "Dismiss", "onboard an agent" (spec §4.3 to §4.8, Figma Tertiary Dark).
+ *
+ * Body (15) in `--cg-tertiary-dark` (#45CDD4), no underline at rest, an
+ * underline on hover (the frames draw no hover state; this is the library's
+ * feedback for a text link), the focus ring on keyboard focus.
+ *
+ * ## The colour is under AA, on purpose
+ *
+ * #45CDD4 measures 1.92:1 on white. The design uses it knowingly (Gilad,
+ * 2026-11-01, spec §6.1), and every link drawn in it also carries an
+ * accessible name, so a reader who cannot see the colour still gets the words.
+ *
+ * ## The token comes from ui#381
+ *
+ * `--cg-tertiary-dark` is the header set's token (ui#381); this block reads it
+ * and does not declare it.
+ *
+ * `ACTION_LINK_CLASS` is exported for a control that is not an anchor but
+ * should look like one: Dismiss (a button) and the empty state's "onboard an
+ * agent" (a `CopyButton`).
+ */
+const ACTION_LINK_CLASS = "inline-flex items-center rounded-2xs text-body-sm text-(--cg-tertiary-dark) no-underline underline-offset-4 hover:underline outline-none focus-visible:ring-3 focus-visible:ring-ring";
+function ActionLink({ render, weight = "regular", className, ...props }) {
+    return useRender({
+        render,
+        defaultTagName: "a",
+        props: {
+            "data-slot": "action-link",
+            className: cn(ACTION_LINK_CLASS, weight === "bold" && "font-bold", className),
+            ...props,
+        },
+    });
+}
+export { ACTION_LINK_CLASS, ActionLink };
+//# sourceMappingURL=action-link.js.map

package/dist/blocks/action-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-link.js","sourceRoot":"","sources":["../../src/blocks/action-link.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,iBAAiB,GACrB,uLAAuL,CAAA;AAEzL,SAAS,UAAU,CAAC,EAClB,MAAM,EACN,MAAM,GAAG,SAAS,EAClB,SAAS,EACT,GAAG,KAAK,EAIT;IACC,OAAO,SAAS,CAAC;QACf,MAAM;QACN,cAAc,EAAE,GAAG;QACnB,KAAK,EAAE;YACL,WAAW,EAAE,aAAa;YAC1B,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,MAAM,IAAI,WAAW,EAAE,SAAS,CAAC;YAC7E,GAAG,KAAK;SACT;KACF,CAAC,CAAA;AACJ,CAAC;AAED,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAA"}

package/dist/blocks/activity-row.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { useRender } from "@base-ui/react/use-render";
+/**
+ * One line of activity: Home's "My Focus" row (#382, spec §4.7, Figma
+ * `11323:8714`, drawn there as "Grid Pulse").
+ *
+ * White, a 1px hairline, radius 12, 16 inside (the hairline drawn inside it, so
+ * the row is the frame's 54 tall), the content centred 20 apart: the time
+ * (Small, muted), a picture, one sentence (Body) and a teal "Open".
+ *
+ * ## The picture overhangs
+ *
+ * The frame lays the picture out in a 96 x 22 box (a Body line) and paints the
+ * 96 x 64 image centred on it, so it pokes 5px past the row's top and bottom
+ * and the row stays one line tall. Drawn the same way: a 22px box and an
+ * absolutely placed image. Decorative (`alt=""`); the sentence names the thing.
+ *
+ * ## Narrow widths
+ *
+ * The row lays out by its own width (a container query). Under 36rem the
+ * sentence wraps onto its own line under the picture (spec §4.12).
+ *
+ * The time is muted-strong rather than the frame's slate-500 (3.41:1): it is
+ * content (#232). The action is described by the row's sentence
+ * (`aria-describedby`), so a list of rows' "Open" links reads apart.
+ */
+declare function ActivityRow({ time, thumbnailSrc, actionLabel, href, render, className, children, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+    /** "Just now". Pass a `<time>` for a machine-readable date. */
+    time: React.ReactNode;
+    /** The creation's picture. */
+    thumbnailSrc?: string;
+    /** The sentence. */
+    children: React.ReactNode;
+    /** The action's words. Default "Open". */
+    actionLabel?: string;
+    /** Where the action goes. */
+    href?: string;
+    /** The action's element, for a router's link: `render={<Link href="…" />}`. */
+    render?: useRender.ComponentProps<"a">["render"];
+}): React.JSX.Element;
+export { ActivityRow };
+//# sourceMappingURL=activity-row.d.ts.map

package/dist/blocks/activity-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-row.d.ts","sourceRoot":"","sources":["../../src/blocks/activity-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAK1D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,YAAY,EACZ,WAAoB,EACpB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,+DAA+D;IAC/D,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAA;CACjD,qBA2CA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/activity-row.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cloudgrid-cn.js";
+import { ActionLink } from "./action-link.js";
+/**
+ * One line of activity: Home's "My Focus" row (#382, spec §4.7, Figma
+ * `11323:8714`, drawn there as "Grid Pulse").
+ *
+ * White, a 1px hairline, radius 12, 16 inside (the hairline drawn inside it, so
+ * the row is the frame's 54 tall), the content centred 20 apart: the time
+ * (Small, muted), a picture, one sentence (Body) and a teal "Open".
+ *
+ * ## The picture overhangs
+ *
+ * The frame lays the picture out in a 96 x 22 box (a Body line) and paints the
+ * 96 x 64 image centred on it, so it pokes 5px past the row's top and bottom
+ * and the row stays one line tall. Drawn the same way: a 22px box and an
+ * absolutely placed image. Decorative (`alt=""`); the sentence names the thing.
+ *
+ * ## Narrow widths
+ *
+ * The row lays out by its own width (a container query). Under 36rem the
+ * sentence wraps onto its own line under the picture (spec §4.12).
+ *
+ * The time is muted-strong rather than the frame's slate-500 (3.41:1): it is
+ * content (#232). The action is described by the row's sentence
+ * (`aria-describedby`), so a list of rows' "Open" links reads apart.
+ */
+function ActivityRow({ time, thumbnailSrc, actionLabel = "Open", href, render, className, children, ...props }) {
+    const hasAction = href !== undefined || render !== undefined;
+    // Every row's action is "Open", so a screen reader's list of links would show
+    // N identical entries. The link is described by its own row's sentence.
+    const textId = React.useId();
+    return (_jsx("div", { "data-slot": "activity-row", className: cn("@container/activity-row rounded-md border border-hairline bg-card p-[15px] text-ink", className), ...props, children: _jsxs("div", { "data-slot": "activity-row-content", className: "flex items-center justify-center gap-5 @max-[36rem]/activity-row:flex-wrap @max-[36rem]/activity-row:justify-start", children: [_jsx("span", { "data-slot": "activity-row-time", className: "shrink-0 text-caption text-faint-strong", children: time }), thumbnailSrc !== undefined ? (_jsx("span", { "data-slot": "activity-row-thumbnail", className: "relative block h-[22px] w-24 shrink-0", children: _jsx("img", { src: thumbnailSrc, alt: "", decoding: "async", draggable: false, className: "absolute top-1/2 left-0 block h-16 w-24 -translate-y-1/2 rounded-xs object-cover" }) })) : null, _jsx("span", { id: textId, "data-slot": "activity-row-text", className: "min-w-0 text-body-sm @max-[36rem]/activity-row:basis-full", children: children }), hasAction ? (_jsx(ActionLink, { href: href, render: render, "aria-describedby": textId, className: "shrink-0", children: actionLabel })) : null] }) }));
+}
+export { ActivityRow };
+//# sourceMappingURL=activity-row.js.map

package/dist/blocks/activity-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-row.js","sourceRoot":"","sources":["../../src/blocks/activity-row.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAEtD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAS,WAAW,CAAC,EACnB,IAAI,EACJ,YAAY,EACZ,WAAW,GAAG,MAAM,EACpB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAcT;IACC,MAAM,SAAS,GAAG,IAAI,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,CAAA;IAC5D,8EAA8E;IAC9E,wEAAwE;IACxE,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAE5B,OAAO,CACL,2BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,qFAAqF,EAAE,SAAS,CAAC,KAC3G,KAAK,YAIT,4BACY,sBAAsB,EAChC,SAAS,EAAC,oHAAoH,aAEhI,4BAAgB,mBAAmB,EAAC,SAAS,EAAC,yCAAyC,YACpF,IAAI,GACA,EACN,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,CAC5B,4BAAgB,wBAAwB,EAAC,SAAS,EAAC,uCAAuC,YACxF,cACE,GAAG,EAAE,YAAY,EACjB,GAAG,EAAC,EAAE,EACN,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,KAAK,EAChB,SAAS,EAAC,kFAAkF,GAC5F,GACG,CACR,CAAC,CAAC,CAAC,IAAI,EACR,eAAM,EAAE,EAAE,MAAM,eAAY,mBAAmB,EAAC,SAAS,EAAC,2DAA2D,YAClH,QAAQ,GACJ,EACN,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,sBAAoB,MAAM,EAAE,SAAS,EAAC,UAAU,YACnF,WAAW,GACD,CACd,CAAC,CAAC,CAAC,IAAI,IACF,GACF,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { type EntityCardTileSize } from "./entity-card.js";
+/**
+ * The dashed Add tile at the end of a row of cards (#382, spec §4.4, Figma
+ * `11324:91317`).
+ *
+ * Home's My Creations ends its Recent row with it: beside a single card in the
+ * "one creation" frame, past the scroll in the "several" frame. It is the box
+ * of the card it sits beside, read from `ENTITY_CARD_TILE_BOX` so the two cannot
+ * differ, at radius 20 with the library's one dashed line, holding the 48px
+ * `cta` Add (`Button size="2xl"`) with its plus after the label.
+ *
+ * The tile is not itself the control: the button is, so the hit area and the
+ * focus ring are the button's, as drawn. With `href` it renders as a link
+ * through `linkComponent` (Next's `Link`) and keeps the link role, the shape
+ * `EmptyCreations` uses; with only `onClick` it is a button.
+ */
+declare function AddTile({ size, label, href, linkComponent, onClick, className, ...props }: Omit<React.ComponentProps<"div">, "children" | "onClick"> & {
+    /** The card box it matches: `tile-lg` 329x242 (default) or `tile` 250x184. */
+    size?: EntityCardTileSize;
+    /** The button's label, and so its accessible name. */
+    label?: string;
+    /** Where Add goes. Renders the control as a link. */
+    href?: string;
+    /** The element a link renders through, for a router's own link. */
+    linkComponent?: React.ElementType;
+    /** Called when Add is pressed. With `href` too, it runs before the navigation. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+}): React.JSX.Element;
+export { AddTile };
+//# sourceMappingURL=add-tile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"add-tile.d.ts","sourceRoot":"","sources":["../../src/blocks/add-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAwB,KAAK,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAGzF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,OAAO,CAAC,EACf,IAAgB,EAChB,KAAa,EACb,IAAI,EACJ,aAAa,EACb,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAC7D,8EAA8E;IAC9E,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACjC,kFAAkF;IAClF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;CAC/C,qBAuCA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/blocks/add-tile.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cloudgrid-cn.js";
+import { Button } from "../ui/button.js";
+import { DASHED_LINE_CLASS } from "./dashed-line.js";
+import { ENTITY_CARD_TILE_BOX } from "./entity-card.js";
+import { PlusIcon } from "./icons.js";
+/**
+ * The dashed Add tile at the end of a row of cards (#382, spec §4.4, Figma
+ * `11324:91317`).
+ *
+ * Home's My Creations ends its Recent row with it: beside a single card in the
+ * "one creation" frame, past the scroll in the "several" frame. It is the box
+ * of the card it sits beside, read from `ENTITY_CARD_TILE_BOX` so the two cannot
+ * differ, at radius 20 with the library's one dashed line, holding the 48px
+ * `cta` Add (`Button size="2xl"`) with its plus after the label.
+ *
+ * The tile is not itself the control: the button is, so the hit area and the
+ * focus ring are the button's, as drawn. With `href` it renders as a link
+ * through `linkComponent` (Next's `Link`) and keeps the link role, the shape
+ * `EmptyCreations` uses; with only `onClick` it is a button.
+ */
+function AddTile({ size = "tile-lg", label = "Add", href, linkComponent, onClick, className, ...props }) {
+    const Link = linkComponent ?? "a";
+    const content = (_jsxs(_Fragment, { children: [label, _jsx(PlusIcon, {})] }));
+    return (_jsx("div", { "data-slot": "add-tile", className: cn("flex shrink-0 items-center justify-center rounded-container", ENTITY_CARD_TILE_BOX[size], DASHED_LINE_CLASS, className), ...props, children: href !== undefined ? (_jsx(Button, { "data-slot": "add-tile-action", variant: "cta", size: "2xl", render: _jsx(Link, { href: href }), nativeButton: false, role: "link", onClick: onClick, children: content })) : (_jsx(Button, { "data-slot": "add-tile-action", variant: "cta", size: "2xl", type: "button", onClick: onClick, children: content })) }));
+}
+export { AddTile };
+//# sourceMappingURL=add-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"add-tile.js","sourceRoot":"","sources":["../../src/blocks/add-tile.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAA2B,MAAM,2BAA2B,CAAA;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C;;;;;;;;;;;;;;GAcG;AACH,SAAS,OAAO,CAAC,EACf,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,KAAK,EACb,IAAI,EACJ,aAAa,EACb,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EAYT;IACC,MAAM,IAAI,GAAsB,aAAa,IAAI,GAAG,CAAA;IACpD,MAAM,OAAO,GAAG,CACd,8BACG,KAAK,EACN,KAAC,QAAQ,KAAG,IACX,CACJ,CAAA;IAED,OAAO,CACL,2BACY,UAAU,EACpB,SAAS,EAAE,EAAE,CACX,6DAA6D,EAC7D,oBAAoB,CAAC,IAAI,CAAC,EAC1B,iBAAiB,EACjB,SAAS,CACV,KACG,KAAK,YAER,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACpB,KAAC,MAAM,iBACK,iBAAiB,EAC3B,OAAO,EAAC,KAAK,EACb,IAAI,EAAC,KAAK,EACV,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC5B,YAAY,EAAE,KAAK,EACnB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,YAEf,OAAO,GACD,CACV,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,iBAAW,iBAAiB,EAAC,OAAO,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YACxF,OAAO,GACD,CACV,GACG,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/blocks/avatar-stack.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type AvatarDiameter } from "./avatar.js";
+/**
+ * THE AVATAR STACK (#381): overlapping faces with a "+N" chip, as the
+ * CloudGrid-2026 header draws the people in a grid (frame 11493:9953).
+ *
+ * Measured: 32px faces, a 1.5px ring in the page colour inside each face, a
+ * 12px overlap (a 20px step), and the chip last and on top: the page colour,
+ * a 1px slate-500 line, 13px slate-500 text, as big as a face.
+ *
+ * The Console carried two local copies of this (`chrome/InviteControl.tsx`,
+ * `onboarding/invite/AvatarStack.tsx`); both move onto it.
+ *
+ * One accessible name for the whole stack, from `label`. The faces and the
+ * count are hidden, because the label says what they show ("Members, 6"). With
+ * `onClick` it is a button, with `href` an anchor, with neither a named image,
+ * and with no label it is decorative.
+ */
+export type AvatarStackPerson = {
+    name: string;
+    seed?: string;
+    src?: string;
+};
+declare function AvatarStack({ people, max, size, label, href, onClick, render, className, ...props }: Omit<useRender.ComponentProps<"span">, "children"> & {
+    /** Who is in the stack, in the order they are drawn, first leftmost. */
+    people: readonly AvatarStackPerson[];
+    /** Faces drawn before the chip. Default 3; anything below 1 draws one. */
+    max?: number;
+    /** The diameter of every face and of the chip. Default 32, the frame's. */
+    size?: AvatarDiameter;
+    /** The accessible name of the whole stack, e.g. "Members, 6". */
+    label?: string;
+    /** Renders an anchor. */
+    href?: string;
+    /** Renders a `<button type="button">`. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export { AvatarStack };
+//# sourceMappingURL=avatar-stack.d.ts.map

package/dist/blocks/avatar-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-stack.d.ts","sourceRoot":"","sources":["../../src/blocks/avatar-stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAGrD,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAElE;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAI7E,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,GAAO,EACP,IAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACtD,wEAAwE;IACxE,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACpC,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2EAA2E;IAC3E,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;CAC/C,iFAmEA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/avatar-stack.js

@@ -0,0 +1,41 @@
+"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 { cn } from "../lib/cloudgrid-cn.js";
+import { Avatar } from "./avatar.js";
+const OVERLAP = "-ml-3";
+function AvatarStack({ people, max = 3, size = 32, label, href, onClick, render, className, ...props }) {
+    const shown = Math.min(people.length, Math.max(1, Math.floor(max)));
+    const rest = people.length - shown;
+    const interactive = Boolean(render || href || onClick);
+    const tag = href ? "a" : onClick ? "button" : "span";
+    // An interactive stack is never nameless: without a label it says its head count.
+    const name = label ?? (interactive ? `${people.length} ${people.length === 1 ? "person" : "people"}` : undefined);
+    const element = useRender({
+        render,
+        defaultTagName: tag,
+        props: {
+            "data-slot": "avatar-stack",
+            ...(tag === "button" && !render ? { type: "button" } : {}),
+            ...(href ? { href } : {}),
+            ...(onClick ? { onClick } : {}),
+            ...(interactive
+                ? { "aria-label": name }
+                : label
+                    ? { role: "img", "aria-label": label }
+                    : { "aria-hidden": true }),
+            className: cn("inline-flex items-center text-ink no-underline", interactive &&
+                "cursor-pointer rounded-pill focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none", className),
+            children: (_jsxs(_Fragment, { children: [people.slice(0, shown).map((person, i) => (_jsxs("span", { "data-slot": "avatar-stack-face", "aria-hidden": "true", className: cn("relative inline-flex shrink-0 rounded-pill", i > 0 && OVERLAP), children: [_jsx(Avatar, { name: person.name, seed: person.seed, src: person.src, size: size }), _jsx("span", { "data-slot": "avatar-stack-ring", className: "pointer-events-none absolute inset-0 rounded-pill", style: {
+                                    boxShadow: "inset 0 0 0 var(--cg-border-width-strong) var(--cg-surface-page)",
+                                } })] }, `${person.seed ?? person.name}-${i}`))), rest > 0 ? (_jsxs("span", { "data-slot": "avatar-stack-more", "aria-hidden": "true", className: cn("relative inline-flex shrink-0 items-center justify-center rounded-pill border border-steel bg-page text-caption text-steel", OVERLAP), style: { width: size, height: size }, children: ["+", rest] })) : null] })),
+            ...props,
+        },
+    });
+    if (people.length === 0)
+        return null;
+    return element;
+}
+export { AvatarStack };
+//# sourceMappingURL=avatar-stack.js.map

package/dist/blocks/avatar-stack.js.map

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

package/dist/blocks/avatar.d.ts

@@ -59,7 +59,7 @@
  * alone with no name in the markup.
  */
 /**
- * The ramp: 18, 24, 32, 38. The rung IS the diameter.
+ * The ramp: 18, 24, 32, 38, 56, 64. The rung IS the diameter.
  *
  * ## Why the letters went away (#212)
  *
@@ -92,8 +92,8 @@
  * 56 (cloudgrid-console#944), and `AvatarPicker` renders that picture through
  * this ramp. There is no letter for it, for the reason there is none for 32.
  */
-export declare const AVATAR_DIAMETERS: readonly [18, 24, 32, 38, 56];
-/** 18, 24, 32, 38 or 56 across. */
+export declare const AVATAR_DIAMETERS: readonly [18, 24, 32, 38, 56, 64];
+/** 18, 24, 32, 38, 56 or 64 across. */
 export type AvatarDiameter = (typeof AVATAR_DIAMETERS)[number];
 /**
  * The 0.26 letter names, and what each one was worth in pixels.
@@ -117,7 +117,28 @@ export declare const AVATAR_SIZES: {
 };
 /** @deprecated Use `AvatarDiameter`. Removed in 0.29. See #216. */
 export type AvatarSize = keyof typeof AVATAR_SIZES;
-declare function Avatar({ name, seed, src, alt, size, monogram, className, style, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
+/**
+ * #381 — THE GRID AVATAR of the CloudGrid-2026 header: a rounded square on a
+ * pastel ground with one Ink letter (frames 11323:8600, 11324:90635, 11324:90641).
+ *
+ * The pastel is picked by `entityIdentitySeed`, the library's one identity hash,
+ * so a grid keeps the same pastel at every size and shape, for every member,
+ * on every screen. The letters are Ink and do not flip: the pastels are
+ * identity colours declared at `:root` only, so on a purple panel the mark
+ * keeps its ground and its letter rather than inverting into a second look.
+ * Measured: 12.02:1, 10.74:1 and 11.43:1.
+ *
+ * The frames draw "A" for Atomic Labs, so the pastel look draws ONE letter, the
+ * first of the name; an explicit `monogram` still wins. Letters are Manrope
+ * Regular at 15/32 of the box (15px at 32, as the frame).
+ */
+export declare const AVATAR_PASTELS: readonly ["--cg-avatar-pastel-1", "--cg-avatar-pastel-2", "--cg-avatar-pastel-3"];
+export type AvatarPastel = (typeof AVATAR_PASTELS)[number];
+export type AvatarShape = "circle" | "square";
+export type AvatarLook = "identity" | "pastel";
+/** The pastel a seed lands on: the same hash the identity look reads. */
+export declare function avatarPastel(seed: string): AvatarPastel;
+declare function Avatar({ name, seed, src, alt, size, monogram, shape, look: lookName, className, style, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
     /** Whose mark this is. Read for the initials, and for the hue unless `seed` is given. */
     name: string;
     /**
@@ -136,7 +157,8 @@ declare function Avatar({ name, seed, src, alt, size, monogram, className, style
      */
     alt?: string;
     /**
-     * The diameter: `18`, `24`, `32`, `38` or `56`.
+     * The diameter: `18`, `24`, `32`, `38`, `56` or `64` (#381, the account
+     * menu's header).
      *
      * The 0.26 letters — `'s'`, `'m'`, `'l'` — still resolve to 18, 24 and 38
      * through 0.28. They are deprecated; see `AVATAR_DIAMETERS`.
@@ -144,6 +166,10 @@ declare function Avatar({ name, seed, src, alt, size, monogram, className, style
     size?: AvatarDiameter | AvatarSize;
     /** Overrides the derived initials, for a name they read badly from. */
     monogram?: string;
+    /** `circle` (the default) or `square`, the grid avatar's rounded square (#381). */
+    shape?: AvatarShape;
+    /** `identity` (the default) or `pastel`, the grid avatar's pastel ground and Ink letter (#381). */
+    look?: AvatarLook;
 }): import("react").JSX.Element;
 export { Avatar };
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,gBAAgB,+BAAgC,CAAA;AAE7D,mCAAmC;AACnC,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAA;AAEV,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAA;AAgBlD,iBAAS,MAAM,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,GAAG,UAAU,CAAA;IAClC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,+BA2DA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,gBAAgB,mCAAoC,CAAA;AAEjE,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAA;AAEV,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAA;AAgBlD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,mFAIjB,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAC7C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAA;AAE9C,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,CAEvD;AAuBD,iBAAS,MAAM,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAS,EACT,QAAQ,EACR,KAAgB,EAChB,IAAI,EAAE,QAAqB,EAC3B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,cAAc,GAAG,UAAU,CAAA;IAClC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,mGAAmG;IACnG,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,+BAoEA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/blocks/avatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cloudgrid-cn.js";
-import { entityIdentityLook, entityMonogram } from "./entity-identity.js";
+import { entityIdentityLook, entityIdentitySeed, entityMonogram, } from "./entity-identity.js";
 /**
  * A person, as a mark: their picture if there is one, their initials on a
  * derived ground if there is not.
@@ -62,7 +62,7 @@ import { entityIdentityLook, entityMonogram } from "./entity-identity.js";
  * alone with no name in the markup.
  */
 /**
- * The ramp: 18, 24, 32, 38. The rung IS the diameter.
+ * The ramp: 18, 24, 32, 38, 56, 64. The rung IS the diameter.
  *
  * ## Why the letters went away (#212)
  *
@@ -95,7 +95,7 @@ import { entityIdentityLook, entityMonogram } from "./entity-identity.js";
  * 56 (cloudgrid-console#944), and `AvatarPicker` renders that picture through
  * this ramp. There is no letter for it, for the reason there is none for 32.
  */
-export const AVATAR_DIAMETERS = [18, 24, 32, 38, 56];
+export const AVATAR_DIAMETERS = [18, 24, 32, 38, 56, 64];
 /**
  * The 0.26 letter names, and what each one was worth in pixels.
  *
@@ -129,26 +129,74 @@ export const AVATAR_SIZES = {
  * at 10.6px, which is where the console's own 24px avatar sat, and 32 at 14.1px.
  */
 const MONOGRAM_RATIO = 0.44;
-function Avatar({ name, seed, src, alt, size = 24, monogram, className, style, ...props }) {
+/**
+ * #381 — THE GRID AVATAR of the CloudGrid-2026 header: a rounded square on a
+ * pastel ground with one Ink letter (frames 11323:8600, 11324:90635, 11324:90641).
+ *
+ * The pastel is picked by `entityIdentitySeed`, the library's one identity hash,
+ * so a grid keeps the same pastel at every size and shape, for every member,
+ * on every screen. The letters are Ink and do not flip: the pastels are
+ * identity colours declared at `:root` only, so on a purple panel the mark
+ * keeps its ground and its letter rather than inverting into a second look.
+ * Measured: 12.02:1, 10.74:1 and 11.43:1.
+ *
+ * The frames draw "A" for Atomic Labs, so the pastel look draws ONE letter, the
+ * first of the name; an explicit `monogram` still wins. Letters are Manrope
+ * Regular at 15/32 of the box (15px at 32, as the frame).
+ */
+export const AVATAR_PASTELS = [
+    "--cg-avatar-pastel-1",
+    "--cg-avatar-pastel-2",
+    "--cg-avatar-pastel-3",
+];
+/** The pastel a seed lands on: the same hash the identity look reads. */
+export function avatarPastel(seed) {
+    return AVATAR_PASTELS[entityIdentitySeed(seed) % AVATAR_PASTELS.length];
+}
+/**
+ * The square's corner per diameter. 24 and 32 are the frames' (6 and 8); the
+ * rest are the radius token nearest a quarter of the diameter.
+ */
+const SQUARE_RADIUS = {
+    18: "--cg-radius-2xs",
+    24: "--cg-radius-2xs",
+    32: "--cg-radius-xs",
+    38: "--cg-radius-sm",
+    56: "--cg-radius-lg",
+    64: "--cg-radius-xl",
+};
+const PASTEL_RATIO = 15 / 32;
+const firstLetter = (name) => {
+    // Array.from walks code points, so an emoji first is drawn whole, never half a pair.
+    const ch = Array.from(name.trim())[0] ?? "";
+    return ch ? ch.toUpperCase() : "?";
+};
+function Avatar({ name, seed, src, alt, size = 24, monogram, shape = "circle", look: lookName = "identity", className, style, ...props }) {
     // One resolved diameter, whichever spelling arrived. Everything below reads
     // `box` and nothing below knows that letters were ever a thing.
     const box = typeof size === "number" ? size : AVATAR_SIZES[size];
     const look = entityIdentityLook(seed ?? name);
-    const letters = monogram ?? entityMonogram(name);
+    const pastel = lookName === "pastel";
+    const pastelToken = pastel ? avatarPastel(seed ?? name) : null;
+    const letters = monogram ?? (pastel ? firstLetter(name) : entityMonogram(name));
+    const squareRadius = shape === "square" ? SQUARE_RADIUS[box] ?? "--cg-radius-xs" : null;
     // One rule, resolved once, so the three elements below cannot disagree about
     // whether this mark is announced. See the docblock: silent by default.
     const spoken = alt !== undefined;
-    return (_jsxs("span", { "data-slot": "avatar", "data-size": box, "data-look": look.name, ...(spoken ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), className: cn("relative isolate inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-pill font-medium", className), style: {
+    return (_jsxs("span", { "data-slot": "avatar", "data-size": box, "data-look": pastelToken ? `pastel-${AVATAR_PASTELS.indexOf(pastelToken) + 1}` : look.name, "data-shape": shape, ...(spoken ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), className: cn("relative isolate inline-flex shrink-0 select-none items-center justify-center overflow-hidden", squareRadius ? null : "rounded-pill", pastel ? "font-normal" : "font-medium", className), style: {
             width: box,
             height: box,
-            fontSize: Math.round(box * MONOGRAM_RATIO * 10) / 10,
+            fontSize: Math.round(box * (pastel ? PASTEL_RATIO : MONOGRAM_RATIO) * 10) / 10,
+            ...(squareRadius ? { borderRadius: `var(${squareRadius})` } : null),
             lineHeight: 1,
             // The identity tile's measured shade, and mixed toward --cg-ink the same
             // way. Not mixed against --cg-surface-card: that token is `transparent`
             // inside a purple panel, and mixing a hue into transparent gives a
             // half-transparent hue rather than a shade.
-            background: `color-mix(in srgb, var(${look.hue}) ${look.tile}, var(--cg-ink))`,
-            color: "var(--cg-text-on-primary)",
+            background: pastelToken
+                ? `var(${pastelToken})`
+                : `color-mix(in srgb, var(${look.hue}) ${look.tile}, var(--cg-ink))`,
+            color: pastel ? "var(--cg-ink)" : "var(--cg-text-on-primary)",
             ...style,
         }, ...props, children: [_jsx("span", { "data-slot": "avatar-initials", "aria-hidden": "true", children: letters }), src ? (
             // Over the initials, never instead of them. `alt=""` when the mark is

package/dist/blocks/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU,CAAA;AAK7D;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;CACG,CAAA;AAKV;;;;;;;;;;;GAWG;AACH,MAAM,cAAc,GAAG,IAAI,CAAA;AAE3B,SAAS,MAAM,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EA4BT;IACC,4EAA4E;IAC5E,gEAAgE;IAChE,MAAM,GAAG,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;IAChE,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,CAAA;IAEhD,6EAA6E;IAC7E,uEAAuE;IACvE,MAAM,MAAM,GAAG,GAAG,KAAK,SAAS,CAAA;IAEhC,OAAO,CACL,6BACY,QAAQ,eASP,GAAG,eACH,IAAI,CAAC,IAAI,KAChB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAC3E,SAAS,EAAE,EAAE,CACX,wHAAwH,EACxH,SAAS,CACV,EACD,KAAK,EAAE;YACL,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,cAAc,GAAG,EAAE,CAAC,GAAG,EAAE;YACpD,UAAU,EAAE,CAAC;YACb,yEAAyE;YACzE,wEAAwE;YACxE,mEAAmE;YACnE,4CAA4C;YAC5C,UAAU,EAAE,0BAA0B,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,IAAI,kBAAkB;YAC9E,KAAK,EAAE,2BAA2B;YAClC,GAAG,KAAK;SACT,KACG,KAAK,aAET,4BAAgB,iBAAiB,iBAAa,MAAM,YACjD,OAAO,GACH,EACN,GAAG,CAAC,CAAC,CAAC;YACL,sEAAsE;YACtE,+DAA+D;YAC/D,2BACY,cAAc,EACxB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EACtB,SAAS,EAAC,yCAAyC,GACnD,CACH,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAA;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/copy-button.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Copy a value, and say so (#382, spec §4.10).
+ *
+ * Home copies one command from two places: the onboard bar under the page, and
+ * "or onboard an agent" in the empty state. Each says what happened in its own
+ * words: "Copied" for two seconds, or "Couldn't copy" when the clipboard
+ * refuses (an insecure origin, a denied permission, a browser without the
+ * API). The words are also put in a polite live region, because a label that
+ * changes under a screen reader that has already read the button is not heard.
+ *
+ * ## The pieces
+ *
+ * `copyText(value, clipboard)` is the one clipboard call: it resolves `copied`
+ * or `blocked` and never throws. `useCopy()` holds the state and the timer: each
+ * copy restarts the two seconds, and the timer is cleared on unmount, so a
+ * component that goes away mid-cycle does not set state afterwards.
+ * `CopyButton` is a button (or whatever `render` gives it) wired to both.
+ *
+ * ## No look of its own
+ *
+ * The block adds no visual class: the caller styles it, or renders it as
+ * something styled. "onboard an agent" passes `ACTION_LINK_CLASS`; the onboard
+ * bar passes `render` and a function child, so its tool marks stay while its
+ * line switches.
+ *
+ * `CodeBlock`, `CommandField`, `AgentPrompt`, `PromptBlock` and `InvitePopup`
+ * each carry their own copy of this cycle; they can move onto `useCopy` later.
+ */
+export type CopyState = "idle" | "copied" | "blocked";
+/** Writes `value` to `clipboard`. Resolves `copied` or `blocked`; never throws. */
+declare function copyText(value: string, clipboard: Pick<Clipboard, "writeText"> | undefined): Promise<"copied" | "blocked">;
+declare function useCopy({ resetAfter }?: {
+    resetAfter?: number;
+}): {
+    state: CopyState;
+    copy: (value: string) => Promise<CopyState>;
+};
+declare function CopyButton({ value, children, copiedLabel, blockedLabel, announceCopied, announceBlocked, resetAfter, onStateChange, render, onClick, ...props }: Omit<useRender.ComponentProps<"button">, "children" | "value"> & {
+    /** What is copied, exactly. */
+    value: string;
+    /** The idle content, or a function of the state for content that keeps parts of itself. */
+    children: React.ReactNode | ((state: CopyState) => React.ReactNode);
+    /** Replaces node children while copied. */
+    copiedLabel?: React.ReactNode;
+    /** Replaces node children while blocked. */
+    blockedLabel?: React.ReactNode;
+    /** What the live region says on a copy. */
+    announceCopied?: string;
+    /** What the live region says on a refusal. */
+    announceBlocked?: string;
+    /** How long the result shows, in ms. Default 2000. */
+    resetAfter?: number;
+    /** Called with each new state, e.g. to show the command in a tip when blocked. */
+    onStateChange?: (state: CopyState) => void;
+}): React.JSX.Element;
+export { CopyButton, copyText, useCopy };
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/blocks/copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../src/blocks/copy-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAErD,mFAAmF;AACnF,iBAAe,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,GAAG,SAAS,GAAG,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC,CAQzH;AAED,iBAAS,OAAO,CAAC,EAAE,UAAiB,EAAE,GAAE;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAO;;kBAclD,MAAM,KAAG,OAAO,CAAC,SAAS,CAAC;EAe5C;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,WAAsB,EACtB,YAA8B,EAC9B,cAA0C,EAC1C,eAAqE,EACrE,UAAiB,EACjB,aAAa,EACb,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IAClE,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,2FAA2F;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACnE,2CAA2C;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;CAC3C,qBA0CA;AAED,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAA"}