@cloudgrid-io/ui 0.3.0 → 0.5.0

package/README.md

@@ -3,7 +3,7 @@
 The CloudGrid design system: CSS custom properties, a Tailwind v4 theme, self-hosted
 fonts, and the same values as machine-readable JSON.
 
-44 React components, built on [Base UI](https://base-ui.com), styled only through tokens
+47 React components, built on [Base UI](https://base-ui.com), styled only through tokens
 and carrying no hardcoded colour.
 
 ## Install

package/dist/blocks/entity-card.d.ts

@@ -0,0 +1,89 @@
+/**
+ * The card an entity gets everywhere it is listed: a preview, a name, an
+ * address, a line about it, whatever state it is in, and a stat or two.
+ *
+ * Absorbed out of the console (#117), where the same composition serves the
+ * discover list, the discover map, my stuff, home, space pages and the inspired
+ * runtimes row. This library previously had `Card`, which is a shell — header,
+ * title, description, content, footer — and every CloudGrid-specific thing about
+ * an entity card was hand-built downstream and out of the designer's reach.
+ *
+ * This is the shell, not the console's card. It takes data as props and holds no
+ * product rules: it does not build URLs, does not know the wire status
+ * vocabulary, does not resolve visibility or permissions, does not fetch, and
+ * does not route. All of that stays where it belongs. A design system that
+ * learns the product's rules stops being a design system.
+ *
+ * ## Two tiers of preview, and neither can fail dark
+ *
+ * `seed` turns the preview region on. With `seed` alone the card shows the
+ * generative identity tile (`EntityIdentity`), derived from the id and the title
+ * with no network access at all. Add `previewUrl` and a real capture paints over
+ * it.
+ *
+ * The capture is a background image rather than an `<img>`, which is the one
+ * deliberate departure from the console's implementation. A background image
+ * that 404s paints nothing and the identity underneath simply shows through — so
+ * the fallback needs no `onError`, no `useState`, and therefore no client
+ * boundary on a card that is otherwise entirely static. The console needs its
+ * state only to hide a broken `<img>`.
+ *
+ * That costs the preview an `alt`. It is the right trade here: the console's own
+ * identity card is `aria-hidden` whenever a title sits beside it, because
+ * announcing a decorative preview after the title reads the card twice.
+ *
+ * ## Status is a slot
+ *
+ * `status` takes a node, not a status name. `EntityStatus` is a separate
+ * component with the nine-status CloudGrid vocabulary in it; putting that
+ * vocabulary in the card would mean the card knows what an entity can BE, which
+ * is product knowledge. The console maps its wire status through its own table
+ * and drops the result in here.
+ *
+ * ## Surfaces
+ *
+ * The chrome flips: ground, hairlines, title, body text and the stat rule all
+ * come from tokens, so `data-cg-surface="panel"` on any ancestor moves them
+ * together. The identity tile deliberately does not flip — see its own note; it
+ * is a picture, and a picture does not flip.
+ */
+export interface EntityCardStat {
+    /**
+     * A small decorative glyph, 14 to 16px. `label` is what gets announced, so
+     * the glyph itself should carry no accessible name.
+     */
+    icon?: React.ReactNode;
+    value: React.ReactNode;
+    /** Names the stat, e.g. "Views". Rendered for assistive tech. */
+    label: string;
+}
+declare function EntityCard({ title, slug, description, titleLines, descriptionLines, status, stats, seed, previewUrl, href, ariaLabel, meta, footer, className, children, ...props }: Omit<React.ComponentProps<"div">, "ref" | "title"> & {
+    title: string;
+    /** The entity's address, in the mono utility face. */
+    slug?: string;
+    description?: string;
+    titleLines?: 1 | 2;
+    descriptionLines?: 1 | 2;
+    /** Top right of the header row. Drop an `EntityStatus` in. */
+    status?: React.ReactNode;
+    stats?: EntityCardStat[];
+    /**
+     * The entity's stable id. Its presence is what turns the preview region on,
+     * and its value is what picks the identity look. Pass the id, not the title.
+     */
+    seed?: string;
+    /** A real capture, painted over the identity tile. A miss falls back to it. */
+    previewUrl?: string;
+    /** When set, the whole card is the target. A plain anchor: routing is yours. */
+    href?: string;
+    /** Accessible name for the whole-card link. Defaults to `title`. */
+    ariaLabel?: string;
+    /** Between the description and the stats. The console puts its residence line here. */
+    meta?: React.ReactNode;
+    /** Below everything, under no rule of its own. */
+    footer?: React.ReactNode;
+    /** Replaces the whole body. The preview and the card chrome still render. */
+    children?: React.ReactNode;
+}): import("react").JSX.Element;
+export { EntityCard };
+//# sourceMappingURL=entity-card.d.ts.map

package/dist/blocks/entity-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-card.d.ts","sourceRoot":"","sources":["../../src/blocks/entity-card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;CACd;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,UAAc,EACd,gBAAoB,EACpB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,GAAG;IACtD,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IAClB,gBAAgB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACxB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uFAAuF;IACvF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kDAAkD;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,+BAwIA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/blocks/entity-card.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card } from "../ui/card.js";
+import { EntityIdentity } from "./entity-identity.js";
+import { cn } from "../lib/cloudgrid-cn.js";
+function EntityCard({ title, slug, description, titleLines = 2, descriptionLines = 1, status, stats, seed, previewUrl, href, ariaLabel, meta, footer, className, children, ...props }) {
+    const body = children ??
+        (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { dir: "auto", "data-slot": "entity-card-title", title: title, className: cn("block text-body-sm font-medium break-words text-ink", titleLines === 1 ? "truncate" : "line-clamp-2"), children: title }), slug ? (_jsx("span", { dir: "auto", "data-slot": "entity-card-slug", title: slug, className: "mt-0.5 block truncate font-mono text-caption text-faint", children: slug })) : null] }), status ? _jsx("div", { className: "shrink-0", children: status }) : null] }), description ? (_jsx("p", { dir: "auto", "data-slot": "entity-card-description", title: description, className: cn("m-0 text-body-sm text-body", descriptionLines === 1 ? "truncate" : "line-clamp-2"), children: description })) : null, meta, _jsx("div", { "aria-hidden": "true", className: "grow" }), stats && stats.length > 0 ? (_jsx("div", { "data-slot": "entity-card-stats", className: "flex flex-wrap items-center gap-4 border-t border-hairline pt-3 text-caption text-body", children: stats.map((stat) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [stat.icon ? (_jsx("span", { "aria-hidden": "true", className: "inline-flex [&>svg]:size-4", children: stat.icon })) : null, stat.value, _jsx("span", { className: "sr-only", children: stat.label })] }, stat.label))) })) : null, footer] }));
+    const card = (_jsxs(Card, { "data-slot": "entity-card", 
+        // gap-0 py-0: `Card` pads itself for a header/content/footer stack, and
+        // this card's preview is full bleed to the top edge. The padding moves
+        // inside, onto the body, so the preview can touch the corners.
+        // No hover lift, shadow, scale or colour change, even when the whole card
+        // is a link. That is the console's founder card spec (2026-08-16) carried
+        // across rather than re-decided here, and it matches this system's own
+        // canon: containment is a hairline, not elevation.
+        // `h-full` only inside the link wrapper, where the card has to fill the
+        // anchor. As a direct grid item it must NOT be h-full: a grid area has a
+        // definite height, so height:100% pins the card to the tallest card in the
+        // row even when the grid was told `items-start`.
+        className: cn("gap-0 py-0", href && "h-full", className), ...props, children: [seed ? (_jsxs("div", { "data-slot": "entity-card-preview", className: "relative shrink-0 border-b border-hairline", children: [_jsx(EntityIdentity, { seed: seed, name: title }), previewUrl ? (_jsx("div", { "data-slot": "entity-card-capture", "aria-hidden": "true", className: "absolute inset-0 bg-cover bg-center", 
+                        // A background image, not an <img>: a URL that 404s paints
+                        // nothing and the identity tile below shows through, with no
+                        // state and no client boundary. encodeURI escapes the quote that
+                        // would otherwise break out of url("...").
+                        style: { backgroundImage: `url("${encodeURI(previewUrl)}")` } })) : null] })) : null, _jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-3 p-(--card-spacing)", children: body })] }));
+    if (!href)
+        return card;
+    return (_jsx("a", { href: href, "aria-label": ariaLabel ?? title, 
+        // The focus ring is the same token every control uses, so it flips with
+        // the surface. A card-sized link with no visible focus state is unusable
+        // by keyboard, and that failure never shows up in a screenshot.
+        className: "group block rounded-xl no-underline focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none", children: card }));
+}
+export { EntityCard };
+//# sourceMappingURL=entity-card.js.map

package/dist/blocks/entity-card.js.map

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

package/dist/blocks/entity-identity.d.ts

@@ -0,0 +1,127 @@
+/**
+ * The identity tile: what a CloudGrid entity looks like before it looks like
+ * anything. A flat tinted field, the CloudGrid motif as a hairline mesh over it,
+ * and a monogram tile carrying the entity's initials.
+ *
+ * Absorbed out of the console's `GenerativePreview` (#117), where it exists for
+ * one reason: an entity's preview slot has to be filled by SOMETHING the moment
+ * the entity is created, and a screenshot does not exist yet. Everything here is
+ * derived from the two strings the caller already has, so this can never fail to
+ * a broken image, a dark rectangle or a spinner.
+ *
+ * ## The same entity always looks the same
+ *
+ * `seed` picks the look, through FNV-1a. A grid of these reads as a set of
+ * stable identities rather than a set of placeholders, which is the whole point:
+ * the tile is doing the job a favicon does. Pass the entity's id, not its title,
+ * or a rename changes what the entity looks like.
+ *
+ * ## It does not flip per surface, deliberately
+ *
+ * Every other component in this library flips inside `data-cg-surface`. This one
+ * does not, and the reason is that it is standing in for a photograph: a real
+ * screenshot layered over it would not flip either, so a flipping fallback would
+ * make the two tiers of one slot behave differently. Its field is mixed against
+ * `--cg-neutral-0` and its ink is `--cg-text-on-primary`, both of which are white
+ * in all three scopes.
+ *
+ * The card AROUND it flips normally. Only the picture holds still.
+ *
+ * ## No colour was invented
+ *
+ * The console's version carries ten hand-picked hexes. This library's rule is
+ * that a component consumes custom properties and never hardcodes a hex, so the
+ * looks below are built from the brand's own four values by mixing. Eight looks
+ * out of four hues, at two tint depths.
+ */
+/**
+ * THE LOOK TABLE. Edit this to change what the identity tiles look like.
+ *
+ * Each entry is a hue token and how strongly the field is tinted with it. The
+ * monogram tile is the same hue driven toward ink, so it is always a deeper
+ * shade of the field it sits on and the white monogram on it always clears AA.
+ *
+ * Four hues, because the brand has four: the purple, the lime, the cyan and the
+ * ink. Two depths, because eight identities across a listing repeat noticeably
+ * less than four and cost nothing. Adding a fifth hue is one row here; nothing
+ * else in this file knows how many there are.
+ *
+ * The `tile` percentages are measured rather than eyeballed. White on the mixed
+ * tile: purple 7.99:1, lime 5.08:1, cyan 4.93:1, ink 15.9:1 — all clear AA for
+ * normal text, which is more than the monogram needs (it is decorative and set
+ * at a large-text size), and leaves room for a designer to lighten a tile
+ * without immediately going under.
+ */
+export declare const ENTITY_IDENTITY_LOOKS: readonly [{
+    readonly name: "brand-soft";
+    readonly hue: "--cg-primary";
+    readonly field: "12%";
+    readonly tile: "72%";
+}, {
+    readonly name: "lime-soft";
+    readonly hue: "--cg-secondary";
+    readonly field: "16%";
+    readonly tile: "44%";
+}, {
+    readonly name: "cyan-soft";
+    readonly hue: "--cg-tertiary";
+    readonly field: "16%";
+    readonly tile: "44%";
+}, {
+    readonly name: "ink-soft";
+    readonly hue: "--cg-ink";
+    readonly field: "8%";
+    readonly tile: "84%";
+}, {
+    readonly name: "brand-deep";
+    readonly hue: "--cg-primary";
+    readonly field: "22%";
+    readonly tile: "72%";
+}, {
+    readonly name: "lime-deep";
+    readonly hue: "--cg-secondary";
+    readonly field: "30%";
+    readonly tile: "44%";
+}, {
+    readonly name: "cyan-deep";
+    readonly hue: "--cg-tertiary";
+    readonly field: "30%";
+    readonly tile: "44%";
+}, {
+    readonly name: "ink-deep";
+    readonly hue: "--cg-ink";
+    readonly field: "16%";
+    readonly tile: "84%";
+}];
+export type EntityIdentityLook = (typeof ENTITY_IDENTITY_LOOKS)[number];
+/**
+ * FNV-1a over the seed. Deterministic, stable across sessions and across
+ * machines, and cheap enough to run for every card in a listing.
+ *
+ * Taken from the console unchanged, deliberately: an entity that has been the
+ * teal one for six months should not become the purple one because the library
+ * picked a different hash.
+ */
+export declare function entityIdentitySeed(seed: string): number;
+/** The look a seed maps to. Same seed, same look, forever. */
+export declare function entityIdentityLook(seed: string): EntityIdentityLook;
+/**
+ * A name to its monogram: the initials of the first two words, or the first two
+ * letters of a single word. Punctuation and symbols are dropped first, so
+ * "@cloudgrid/cli" reads CL rather than @C.
+ *
+ * An empty or symbol-only name gives "?" rather than an empty tile, because an
+ * empty tile looks like a rendering failure and a question mark looks like an
+ * unnamed thing, which is what it is.
+ */
+export declare function entityMonogram(name: string): string;
+declare function EntityIdentity({ seed, name, monogram, className, style, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+    /** The entity's stable id. Picks the look; never pass the title. */
+    seed: string;
+    /** The entity's name. Only used for the monogram. */
+    name?: string;
+    /** Overrides the derived monogram, for a name the initials read badly from. */
+    monogram?: string;
+}): import("react").JSX.Element;
+export { EntityIdentity };
+//# sourceMappingURL=entity-identity.d.ts.map

package/dist/blocks/entity-identity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-identity.d.ts","sourceRoot":"","sources":["../../src/blocks/entity-identity.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASxB,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOvD;AAED,8DAA8D;AAC9D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,CAEnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQnD;AAED,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAA;IACZ,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,+BAuDA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/blocks/entity-identity.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * The identity tile: what a CloudGrid entity looks like before it looks like
+ * anything. A flat tinted field, the CloudGrid motif as a hairline mesh over it,
+ * and a monogram tile carrying the entity's initials.
+ *
+ * Absorbed out of the console's `GenerativePreview` (#117), where it exists for
+ * one reason: an entity's preview slot has to be filled by SOMETHING the moment
+ * the entity is created, and a screenshot does not exist yet. Everything here is
+ * derived from the two strings the caller already has, so this can never fail to
+ * a broken image, a dark rectangle or a spinner.
+ *
+ * ## The same entity always looks the same
+ *
+ * `seed` picks the look, through FNV-1a. A grid of these reads as a set of
+ * stable identities rather than a set of placeholders, which is the whole point:
+ * the tile is doing the job a favicon does. Pass the entity's id, not its title,
+ * or a rename changes what the entity looks like.
+ *
+ * ## It does not flip per surface, deliberately
+ *
+ * Every other component in this library flips inside `data-cg-surface`. This one
+ * does not, and the reason is that it is standing in for a photograph: a real
+ * screenshot layered over it would not flip either, so a flipping fallback would
+ * make the two tiers of one slot behave differently. Its field is mixed against
+ * `--cg-neutral-0` and its ink is `--cg-text-on-primary`, both of which are white
+ * in all three scopes.
+ *
+ * The card AROUND it flips normally. Only the picture holds still.
+ *
+ * ## No colour was invented
+ *
+ * The console's version carries ten hand-picked hexes. This library's rule is
+ * that a component consumes custom properties and never hardcodes a hex, so the
+ * looks below are built from the brand's own four values by mixing. Eight looks
+ * out of four hues, at two tint depths.
+ */
+/**
+ * THE LOOK TABLE. Edit this to change what the identity tiles look like.
+ *
+ * Each entry is a hue token and how strongly the field is tinted with it. The
+ * monogram tile is the same hue driven toward ink, so it is always a deeper
+ * shade of the field it sits on and the white monogram on it always clears AA.
+ *
+ * Four hues, because the brand has four: the purple, the lime, the cyan and the
+ * ink. Two depths, because eight identities across a listing repeat noticeably
+ * less than four and cost nothing. Adding a fifth hue is one row here; nothing
+ * else in this file knows how many there are.
+ *
+ * The `tile` percentages are measured rather than eyeballed. White on the mixed
+ * tile: purple 7.99:1, lime 5.08:1, cyan 4.93:1, ink 15.9:1 — all clear AA for
+ * normal text, which is more than the monogram needs (it is decorative and set
+ * at a large-text size), and leaves room for a designer to lighten a tile
+ * without immediately going under.
+ */
+export const ENTITY_IDENTITY_LOOKS = [
+    { name: "brand-soft", hue: "--cg-primary", field: "12%", tile: "72%" },
+    { name: "lime-soft", hue: "--cg-secondary", field: "16%", tile: "44%" },
+    { name: "cyan-soft", hue: "--cg-tertiary", field: "16%", tile: "44%" },
+    { name: "ink-soft", hue: "--cg-ink", field: "8%", tile: "84%" },
+    { name: "brand-deep", hue: "--cg-primary", field: "22%", tile: "72%" },
+    { name: "lime-deep", hue: "--cg-secondary", field: "30%", tile: "44%" },
+    { name: "cyan-deep", hue: "--cg-tertiary", field: "30%", tile: "44%" },
+    { name: "ink-deep", hue: "--cg-ink", field: "16%", tile: "84%" },
+];
+/**
+ * FNV-1a over the seed. Deterministic, stable across sessions and across
+ * machines, and cheap enough to run for every card in a listing.
+ *
+ * Taken from the console unchanged, deliberately: an entity that has been the
+ * teal one for six months should not become the purple one because the library
+ * picked a different hash.
+ */
+export function entityIdentitySeed(seed) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < seed.length; i++) {
+        h ^= seed.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    return h >>> 0;
+}
+/** The look a seed maps to. Same seed, same look, forever. */
+export function entityIdentityLook(seed) {
+    return ENTITY_IDENTITY_LOOKS[entityIdentitySeed(seed) % ENTITY_IDENTITY_LOOKS.length];
+}
+/**
+ * A name to its monogram: the initials of the first two words, or the first two
+ * letters of a single word. Punctuation and symbols are dropped first, so
+ * "@cloudgrid/cli" reads CL rather than @C.
+ *
+ * An empty or symbol-only name gives "?" rather than an empty tile, because an
+ * empty tile looks like a rendering failure and a question mark looks like an
+ * unnamed thing, which is what it is.
+ */
+export function entityMonogram(name) {
+    const words = name
+        .replace(/[^\p{L}\p{N} ]/gu, " ")
+        .split(/\s+/)
+        .filter(Boolean);
+    const first = words[0]?.[0] ?? "?";
+    const second = words[1]?.[0] ?? words[0]?.[1] ?? "";
+    return (first + second).toUpperCase();
+}
+function EntityIdentity({ seed, name, monogram, className, style, ...props }) {
+    const look = entityIdentityLook(seed);
+    const letters = monogram ?? entityMonogram(name ?? "");
+    return (_jsxs("div", { "data-slot": "entity-identity", "data-look": look.name, "aria-hidden": "true", className: cn("relative isolate aspect-[1200/630] w-full select-none overflow-hidden", className), style: {
+            // Mixed against --cg-neutral-0 rather than --cg-surface-card: the card
+            // ground is `transparent` inside a purple panel, and mixing a hue into
+            // transparent gives a half-transparent hue rather than a tint. White is
+            // white in all three scopes, which is what "it does not flip" means.
+            background: `color-mix(in srgb, var(${look.hue}) ${look.field}, var(--cg-neutral-0))`,
+            ...style,
+        }, ...props, children: [_jsx("div", { "aria-hidden": "true", "data-slot": "entity-identity-mesh", className: "absolute inset-0", style: {
+                    backgroundImage: "linear-gradient(to right, var(--cg-identity-mesh) 1px, transparent 1px)," +
+                        " linear-gradient(to bottom, var(--cg-identity-mesh) 1px, transparent 1px)",
+                    backgroundSize: "22px 22px",
+                    backgroundPosition: "-1px -1px",
+                    "--cg-identity-mesh": "color-mix(in srgb, var(--cg-ink) 8%, transparent)",
+                } }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("span", { "data-slot": "entity-identity-monogram", className: "flex size-[46px] items-center justify-center rounded-md text-heading-md font-bold", style: {
+                        background: `color-mix(in srgb, var(${look.hue}) ${look.tile}, var(--cg-ink))`,
+                        color: "var(--cg-text-on-primary)",
+                    }, children: letters }) })] }));
+}
+export { EntityIdentity };
+//# sourceMappingURL=entity-identity.js.map

package/dist/blocks/entity-identity.js.map

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

package/dist/blocks/onboarding-question.d.ts

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { PageHeading } from "./page-heading.js";
+/**
+ * A question screen: a heading, a line saying how to answer it, a set of
+ * selectable option cards, and the button that moves on.
+ *
+ * The shape the console's onboarding asks every question in (#119). Read from
+ * Figma, the four channel flows reuse five screens and three of them are this
+ * one — "How did you find us", "What you usually build", "Let's know each other
+ * better" — differing in exactly one respect: whether you may pick more than
+ * one. So this is one component with a `mode`, not three screens and not two
+ * components. Everything else about them is identical, and duplicating it would
+ * mean a designer retuning the option card in two places and finding one.
+ *
+ * ## Presentation only
+ *
+ * The same line #117 drew for the entity card. This component carries no
+ * CloudGrid question, no channel logic and no idea what comes next. It knows
+ * nothing about "invite link" or "website"; it renders the options it is handed
+ * and reports what was picked. The strings, the sequence, the persistence and
+ * the meaning all stay in the console.
+ *
+ * ## One `mode`, two ARIA patterns
+ *
+ * These are not the same control with a different limit, and that is why they
+ * are Base UI's rather than a `role` attribute and a `keydown` handler:
+ *
+ * | | `single` | `multi` |
+ * |---|---|---|
+ * | container | `role="radiogroup"` | `role="group"` |
+ * | option | `role="radio"` | `role="checkbox"` |
+ * | tab stops | ONE for the group | one per option |
+ * | keys | arrows move and select, Space selects | Space toggles the focused one |
+ *
+ * A radio group has a single tab stop and roving focus; a checkbox group does
+ * not. Hand-rolling that reads correct in review and ships a group a keyboard
+ * cannot traverse, with nothing anywhere going red.
+ *
+ * ## The option IS the library's OptionCard
+ *
+ * Each option renders through `OptionCard` as Base UI's `render` element, so the
+ * card a designer tunes in `option-card.tsx` is the card this screen shows, and
+ * the selection behaviour is layered on top rather than a second card being
+ * grown here. `OptionCard` itself stays what it is — a static card or a link —
+ * because "a card that navigates" and "a card that holds an answer" are
+ * different controls, and a `selected` prop on the former would mean nothing
+ * most of the time.
+ *
+ * ## Selection is never colour alone
+ *
+ * Three independent signals, because the palette alone cannot carry it. Each
+ * option has an indicator that changes SHAPE when picked — an empty ring gains a
+ * dot, an empty box gains a tick — drawn in `currentColor`, which is `text-ink`
+ * and therefore legible on every surface. The card's border goes from hairline
+ * to strong. `aria-checked` carries the same fact to assistive tech.
+ *
+ * ## Surfaces, and the token that would have broken this
+ *
+ * On the panel scope `tokens.css` declares text, three line colours, the focus
+ * ring, a transparent card, the link pair and the state palette, and nothing
+ * else. `--cg-border-accent` is NOT among them, so it inherits `:root`, which is
+ * `var(--cg-primary)` — the panel's own purple. A selected card outlined in the
+ * accent is invisible on the panel, and looks perfect everywhere anyone would
+ * check. `--cg-primary-tint` is base-only and would paint near-white on purple.
+ *
+ * So the selected state is `--cg-border-strong` (ink on the page, white on both
+ * dark surfaces) plus the drawn indicator. No accent border, no tint, no fill.
+ */
+export interface OnboardingOption {
+    /** What `onValueChange` reports. Stable, and never shown. */
+    value: string;
+    /** The words on the card. */
+    label: string;
+    /**
+     * An outline SVG at 26 to 30px — `OptionCard`'s glyph contract, unchanged.
+     * Icons in this system are monoline: never filled, never on a chip.
+     */
+    icon?: React.ReactNode;
+    /** A line under the label, when the label alone is not enough. */
+    description?: string;
+    disabled?: boolean;
+}
+/** Two columns is the Figma arrangement. One reads as a list, three as a picker. */
+declare const COLUMNS: {
+    readonly 1: "grid-cols-1";
+    readonly 2: "grid-cols-1 sm:grid-cols-2";
+    readonly 3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
+};
+/** Everything both modes share. The mode-specific half is the union below. */
+type OnboardingQuestionBaseProps = Omit<React.ComponentProps<"section">, "ref" | "title" | "defaultValue" | "onChange"> & {
+    title: string;
+    /** How to answer it: "Pick one", "Pick all that apply". */
+    sub?: string;
+    eyebrow?: string;
+    options: OnboardingOption[];
+    columns?: keyof typeof COLUMNS;
+    /** Forwarded to `PageHeading`. `h2` for a question inside a larger page. */
+    level?: 1 | 2;
+    headingSize?: React.ComponentProps<typeof PageHeading>["size"];
+    continueLabel?: string;
+    onContinue?: () => void;
+    /**
+     * Overrides when the button is live. Left alone it enables as soon as there is
+     * an answer, which is the only rule this component can know. Anything else —
+     * a minimum, a question that may be skipped — is the console's to decide.
+     */
+    canContinue?: boolean;
+    /** Under the button. The console puts "Skip for now" here. */
+    footer?: React.ReactNode;
+    /** Submitted with a surrounding form, when there is one. */
+    name?: string;
+};
+type OnboardingQuestionProps = OnboardingQuestionBaseProps & ({
+    /** One answer. A radio group: one tab stop, arrows move and select. */
+    mode?: "single";
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+} | {
+    /** Any number of answers. A checkbox group: each option is a tab stop. */
+    mode: "multi";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+});
+declare function OnboardingQuestion(props: OnboardingQuestionProps): React.JSX.Element;
+export { OnboardingQuestion };
+//# sourceMappingURL=onboarding-question.d.ts.map

package/dist/blocks/onboarding-question.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-question.d.ts","sourceRoot":"","sources":["../../src/blocks/onboarding-question.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,oFAAoF;AACpF,QAAA,MAAM,OAAO;;;;CAIH,CAAA;AAsFV,8EAA8E;AAC9E,KAAK,2BAA2B,GAAG,IAAI,CACrC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAC/B,KAAK,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAC9C,GAAG;IACF,KAAK,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC9B,4EAA4E;IAC5E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACb,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,uBAAuB,GAAG,2BAA2B,GACxD,CACI;IACE,uEAAuE;IACvE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,GACD;IACE,0EAA0E;IAC1E,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC1C,CACJ,CAAA;AAEH,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBA8GzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/blocks/onboarding-question.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import { CheckIcon } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { OptionCard } from "./option-card.js";
+import { PageHeading } from "./page-heading.js";
+import { cn } from "../lib/cloudgrid-cn.js";
+/** Two columns is the Figma arrangement. One reads as a list, three as a picker. */
+const 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",
+};
+/**
+ * The card, in both modes. Every class here is a utility over a `--cg-*` token,
+ * so the whole thing flips with the surface.
+ *
+ * `group` is what lets the indicator inside react to the root's `data-checked`.
+ * `pe-11` reserves the indicator's corner so a long label cannot run under it;
+ * tailwind-merge resolves it against `OptionCard`'s own `p-5` rather than
+ * fighting it.
+ */
+const OPTION_CLASS = cn("group relative cursor-pointer pe-11 text-start transition-colors select-none", "hover:border-line", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none", "data-checked:border-line-strong data-checked:ring-1 data-checked:ring-(--cg-border-strong)", "data-disabled:pointer-events-none data-disabled:opacity-50");
+/** The indicator's frame. Round for one-of, square for many-of: shape says which. */
+const INDICATOR_CLASS = cn("pointer-events-none absolute end-4 top-4 flex size-4 shrink-0 items-center justify-center", "border border-line text-ink transition-colors group-data-checked:border-line-strong");
+function OnboardingQuestionOption({ option, mode, name, }) {
+    // `render` rather than children: Base UI merges its own role, aria-checked,
+    // data-checked, tabIndex, handlers and ref INTO this element, so the option is
+    // literally an OptionCard with radio or checkbox semantics rather than a
+    // lookalike. className is concatenated, and OptionCard runs the result through
+    // cn() last, so these utilities win the conflicts they are meant to win.
+    const card = (_jsx(OptionCard, { title: option.label, body: option.description, glyph: option.icon }));
+    if (mode === "multi") {
+        return (_jsx(Checkbox.Root, { value: option.value, name: name, disabled: option.disabled, "data-slot": "onboarding-question-option", className: OPTION_CLASS, render: card, children: _jsx("span", { "aria-hidden": "true", "data-slot": "onboarding-question-indicator", className: cn(INDICATOR_CLASS, "rounded-[4px]"), children: _jsx(Checkbox.Indicator, { className: "flex [&>svg]:size-3", children: _jsx(CheckIcon, { strokeWidth: 3 }) }) }) }));
+    }
+    return (_jsx(Radio.Root, { value: option.value, disabled: option.disabled, "data-slot": "onboarding-question-option", className: OPTION_CLASS, render: card, children: _jsx("span", { "aria-hidden": "true", "data-slot": "onboarding-question-indicator", className: cn(INDICATOR_CLASS, "rounded-pill"), children: _jsx(Radio.Indicator, { className: "size-2 rounded-pill bg-current" }) }) }));
+}
+function OnboardingQuestion(props) {
+    // Narrowed on the discriminant BEFORE destructuring, which is what keeps the
+    // value types honest: `single` answers with `string | null` and `multi` with
+    // `string[]`, and a consumer never has to narrow what came back. Destructuring
+    // first would collapse both into one union and hand the console a value it has
+    // to unpick at every call site.
+    const isMulti = props.mode === "multi";
+    const { title, sub, eyebrow, options, columns = 2, level = 1, headingSize = "md", continueLabel = "Continue", onContinue, canContinue, footer, name, className, 
+    // Held back so they cannot reach the DOM as attributes.
+    mode: _mode, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, ...rest } = props;
+    // A mirror, kept for ONE reason: to know whether the button should be live.
+    // The group below stays the source of truth in both directions — controlled
+    // through `value`, uncontrolled through `defaultValue` — so this never becomes
+    // a second place the answer lives. `canContinue` overrides it outright.
+    const [picked, setPicked] = React.useState(() => {
+        const initial = props.value ?? props.defaultValue;
+        if (initial == null)
+            return [];
+        return Array.isArray(initial) ? initial : [initial];
+    });
+    const answered = (props.value !== undefined
+        ? Array.isArray(props.value)
+            ? props.value
+            : props.value == null
+                ? []
+                : [props.value]
+        : picked).length > 0;
+    // The group is labelled by the whole lockup, deliberately. The subline is the
+    // instruction — "Pick all that apply" — and a group's label is exactly where a
+    // screen reader user needs to hear it. Labelling by the title alone would drop
+    // the one sentence that says how many answers are allowed.
+    const headingId = React.useId();
+    const grid = cn("grid gap-4", COLUMNS[columns]);
+    return (_jsxs("section", { "data-slot": "onboarding-question", className: cn("flex flex-col gap-8", className), ...rest, children: [_jsx(PageHeading, { id: headingId, eyebrow: eyebrow, title: title, sub: sub, size: headingSize, level: level }), isMulti ? (_jsx(CheckboxGroup, { "aria-labelledby": headingId, "data-slot": "onboarding-question-options", className: grid, defaultValue: props.defaultValue ?? undefined, value: props.value, onValueChange: (next) => {
+                    setPicked(next);
+                    props.onValueChange?.(next);
+                }, children: options.map((option) => (_jsx(OnboardingQuestionOption, { option: option, mode: "multi", name: name }, option.value))) })) : (_jsx(RadioGroup, { "aria-labelledby": headingId, "data-slot": "onboarding-question-options", className: grid, name: name, defaultValue: props.defaultValue ?? undefined, value: props.value === null ? "" : props.value, onValueChange: (next) => {
+                    const answer = typeof next === "string" && next !== "" ? next : null;
+                    setPicked(answer == null ? [] : [answer]);
+                    props.onValueChange?.(answer);
+                }, children: options.map((option) => (_jsx(OnboardingQuestionOption, { option: option, mode: "single" }, option.value))) })), _jsxs("div", { "data-slot": "onboarding-question-actions", className: "flex flex-col items-start gap-4", children: [_jsx(Button, { type: "button", size: "lg", "data-slot": "onboarding-question-continue", onClick: onContinue, disabled: !(canContinue ?? answered), children: continueLabel }), footer] })] }));
+}
+export { OnboardingQuestion };
+//# sourceMappingURL=onboarding-question.js.map

package/dist/blocks/onboarding-question.js.map

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

package/dist/blocks/page-heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-heading.d.ts","sourceRoot":"","sources":["../../src/blocks/page-heading.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,KAAK;;;;;CAKD,CAAA;AAEV,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,GAAG,EACH,IAAW,EACX,KAAe,EACf,KAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CACd,+BA8BA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"page-heading.d.ts","sourceRoot":"","sources":["../../src/blocks/page-heading.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,KAAK;;;;;CAKD,CAAA;AAEV,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,GAAG,EACH,IAAW,EACX,KAAe,EACf,KAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CACd,+BAuCA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/page-heading.js

@@ -24,7 +24,7 @@ const SIZES = {
 };
 function PageHeading({ eyebrow, title, sub, size = "lg", align = "start", level = 1, className, ...props }) {
     const Heading = level === 1 ? "h1" : "h2";
-    return (_jsxs("header", { "data-slot": "page-heading", className: cn("flex flex-col gap-3", align === "center" && "items-center text-center", className), ...props, children: [eyebrow ? (_jsx("p", { className: "text-label font-medium text-faint", children: eyebrow })) : null, _jsx(Heading, { className: cn("font-display font-heavy tracking-display uppercase leading-display text-balance text-brand", SIZES[size]), children: title }), sub ? _jsx("p", { className: "text-body-lg text-body", children: sub }) : null] }));
+    return (_jsxs("header", { "data-slot": "page-heading", className: cn("flex flex-col gap-3", align === "center" && "items-center text-center", className), ...props, children: [eyebrow ? (_jsx("p", { className: "text-label font-medium text-faint", children: eyebrow })) : null, _jsx(Heading, { className: cn("font-display font-heavy tracking-display uppercase leading-display text-balance text-(--cg-text-accent)", SIZES[size]), children: title }), sub ? _jsx("p", { className: "text-body-lg text-body", children: sub }) : null] }));
 }
 export { PageHeading };
 //# sourceMappingURL=page-heading.js.map

package/dist/blocks/page-heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-heading.js","sourceRoot":"","sources":["../../src/blocks/page-heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;CAChC,CAAA;AAEV,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,GAAG,EACH,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,OAAO,EACf,KAAK,GAAG,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EAST;IACC,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAEzC,OAAO,CACL,+BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,KAAK,KAAK,QAAQ,IAAI,0BAA0B,EAChD,SAAS,CACV,KACG,KAAK,aAER,OAAO,CAAC,CAAC,CAAC,CACT,YAAG,SAAS,EAAC,mCAAmC,YAAE,OAAO,GAAK,CAC/D,CAAC,CAAC,CAAC,IAAI,EAIR,KAAC,OAAO,IACN,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,KAAK,CAAC,IAAI,CAAC,CACZ,YAEA,KAAK,GACE,EACT,GAAG,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,wBAAwB,YAAE,GAAG,GAAK,CAAC,CAAC,CAAC,IAAI,IACtD,CACV,CAAA;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"page-heading.js","sourceRoot":"","sources":["../../src/blocks/page-heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,oCAAoC;CAChC,CAAA;AAEV,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,GAAG,EACH,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,OAAO,EACf,KAAK,GAAG,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EAST;IACC,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAEzC,OAAO,CACL,+BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,KAAK,KAAK,QAAQ,IAAI,0BAA0B,EAChD,SAAS,CACV,KACG,KAAK,aAER,OAAO,CAAC,CAAC,CAAC,CACT,YAAG,SAAS,EAAC,mCAAmC,YAAE,OAAO,GAAK,CAC/D,CAAC,CAAC,CAAC,IAAI,EAaR,KAAC,OAAO,IACN,SAAS,EAAE,EAAE,CACX,yGAAyG,EACzG,KAAK,CAAC,IAAI,CAAC,CACZ,YAEA,KAAK,GACE,EACT,GAAG,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,wBAAwB,YAAE,GAAG,GAAK,CAAC,CAAC,CAAC,IAAI,IACtD,CACV,CAAA;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/index.d.ts

@@ -27,10 +27,13 @@ export * from "./blocks/compare-table.js";
 export * from "./blocks/creation-tile.js";
 export * from "./blocks/cta-banner.js";
 export * from "./blocks/drop-zone.js";
+export * from "./blocks/entity-card.js";
+export * from "./blocks/entity-identity.js";
 export * from "./blocks/entity-status.js";
 export * from "./blocks/feature-cells.js";
 export * from "./blocks/hub-index.js";
 export * from "./blocks/logo.js";
+export * from "./blocks/onboarding-question.js";
 export * from "./blocks/option-card.js";
 export * from "./blocks/page-heading.js";
 export * from "./blocks/plug-method.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}

package/dist/index.js

@@ -1,14 +1,14 @@
 // The public surface of @cloudgrid-io/ui.
 //
 // GENERATED shape, hand-committed: one `export *` per component module. Flat is
-// safe here — the exported names across all 44 components collide zero times,
+// safe here — the exported names across all 47 components collide zero times,
 // asserted by a test so a future addition cannot break it silently.
 //
 // Per-module re-exports rather than a bundle, deliberately. 20 of these carry a
 // "use client" directive, and the client boundary is a property of the MODULE.
 // tsc emits file-per-file and preserves the directive, so a React Server
 // Component consumer keeps exactly the boundaries the source declares. Bundling
-// them into one file would collapse 44 modules into a single client island.
+// them into one file would collapse 47 modules into a single client island.
 //
 // The CSS is NOT imported here. It ships as separate entry points
 // (@cloudgrid-io/ui/tokens.css and friends) so a consumer with no React — the
@@ -44,10 +44,13 @@ export * from "./blocks/compare-table.js";
 export * from "./blocks/creation-tile.js";
 export * from "./blocks/cta-banner.js";
 export * from "./blocks/drop-zone.js";
+export * from "./blocks/entity-card.js";
+export * from "./blocks/entity-identity.js";
 export * from "./blocks/entity-status.js";
 export * from "./blocks/feature-cells.js";
 export * from "./blocks/hub-index.js";
 export * from "./blocks/logo.js";
+export * from "./blocks/onboarding-question.js";
 export * from "./blocks/option-card.js";
 export * from "./blocks/page-heading.js";
 export * from "./blocks/plug-method.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",