@cloudgrid-io/ui 0.2.0 → 0.4.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.
 
-43 React components, built on [Base UI](https://base-ui.com), styled only through tokens
+46 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/entity-status.d.ts

@@ -0,0 +1,97 @@
+/**
+ * What a CloudGrid entity currently IS. A coloured dot and the word for it.
+ *
+ * The first component extracted out of the CloudGrid console and into this
+ * library (#114), so the console can delete its own `StatusChip` and the two
+ * stop disagreeing about what "live" looks like. The vocabulary below is the
+ * console's, unchanged.
+ *
+ * ## The mapping is a table, and the table is the thing a designer edits
+ *
+ * Nine statuses, five tones. `ENTITY_STATUS_TONE` is the whole mapping and
+ * nothing else in this file branches on a status, so retuning what colour
+ * `paused` is means editing one line. `ENTITY_STATUS_LABEL` is the same
+ * arrangement for the words.
+ *
+ * The tones are the tokens #111 added. No component invents a colour.
+ *
+ * ## The dot carries the colour; the word does not
+ *
+ * The one deliberate departure from the console, and it is the token's own note
+ * that decides it: `--cg-online` is 3.40:1 on white, which "clears the 3:1 bar
+ * for an indicator, which is all this is ever used as. Never body text on
+ * white." On its own chip fill it measures 3.06:1. Painting the WORD with it
+ * would ship text that fails AA on the default surface.
+ *
+ * The console can colour its word because its palette carries a separate
+ * `--color-volt-ink` foreground tuned for exactly that. This library has no
+ * `-ink` variant of a state colour, and adding one is a brand decision rather
+ * than a component's to take.
+ *
+ * So the dot is the colour at indicator contrast and the word is `text-ink`,
+ * which is declared in all three scopes and flips with the surface. State is
+ * never colour alone in either arrangement, because the word always renders.
+ *
+ * ## Surfaces
+ *
+ * Nothing is asked of the consumer. Every value here is a token, so
+ * `data-cg-surface="panel"` on any ancestor flips the dot, the ground and the
+ * word together. The chip declares `text-ink` itself rather than inheriting,
+ * because text is the one thing that does not flip by inheritance.
+ *
+ * ## Grounds
+ *
+ * Four tones sit on their own fill. `offline` sits on the card ground with a
+ * control border instead, which is #111's decision rather than this component's:
+ * the muted neutral on a neutral tint measures 2.90:1, under the bar, so absence
+ * of state deliberately has no fill of its own.
+ */
+/**
+ * Every state an entity can be in, in the order a surface should list them:
+ * serving first, terminal last. The console's vocabulary, unchanged.
+ *
+ * The array is the source and the type is derived from it, rather than the two
+ * being written out separately. A status added here is immediately missing from
+ * both tables below and typecheck says so, which is the only arrangement where
+ * a half-added status cannot ship.
+ */
+export declare const ENTITY_STATUS_ORDER: readonly ["live", "building", "charged", "draft", "paused", "stopped", "archived", "expired", "error"];
+export type EntityStatusName = (typeof ENTITY_STATUS_ORDER)[number];
+/** The five families of the state palette. One token pair each. */
+export type EntityStatusTone = "online" | "pending" | "offline" | "expired" | "danger";
+/**
+ * THE MAPPING. Edit this to change what a status looks like.
+ *
+ * Founder decisions, 2026-08-24 (#114), recorded because two of them are not
+ * what a reader would guess:
+ *
+ * `building` is PENDING, not offline. Progress reads warm, not dead-grey, and
+ * a building entity may still be serving its previous version — so grey would
+ * be wrong twice over. `--cg-pending` is an alias of `--cg-expired`, so the two
+ * are one amber today and can be separated later without touching a consumer.
+ *
+ * `charged` is OFFLINE, not online. A charged entity is a reserved cell on the
+ * grid waiting to be plugged; if nothing arrives it expires and is archived. It
+ * is not serving and it is not ready, so green would claim something untrue.
+ * Worth knowing that "reserved and waiting" is a different idea from "paused,
+ * stopped, archived, draft", and a designer may want to split it out later. It
+ * shares their tone today because the library has no token for that idea.
+ *
+ * `live` is the library's green, explicitly not the console's lime: the brand
+ * has already spent lime on decoration, so a lime "live" would not read as a
+ * signal.
+ */
+export declare const ENTITY_STATUS_TONE: Record<EntityStatusName, EntityStatusTone>;
+/**
+ * The word each status shows. Plain and specific: the state, not a sentence
+ * about it. Override per instance with the `label` prop when a surface knows
+ * something more exact, e.g. "Build failed" rather than "Error".
+ */
+export declare const ENTITY_STATUS_LABEL: Record<EntityStatusName, string>;
+declare function EntityStatus({ status, label, className, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
+    status: EntityStatusName;
+    /** Overrides the default word. The word always renders; there is no dot-only form. */
+    label?: React.ReactNode;
+}): import("react").JSX.Element;
+export { EntityStatus };
+//# sourceMappingURL=entity-status.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"entity-status.d.ts","sourceRoot":"","sources":["../../src/blocks/entity-status.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,wGAUtB,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnE,mEAAmE;AACnE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEtF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,gBAAgB,EAAE,gBAAgB,CAUzE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAUhE,CAAA;AAkBD,iBAAS,YAAY,CAAC,EACpB,MAAM,EACN,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,MAAM,EAAE,gBAAgB,CAAA;IACxB,sFAAsF;IACtF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,+BAqCA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/blocks/entity-status.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * What a CloudGrid entity currently IS. A coloured dot and the word for it.
+ *
+ * The first component extracted out of the CloudGrid console and into this
+ * library (#114), so the console can delete its own `StatusChip` and the two
+ * stop disagreeing about what "live" looks like. The vocabulary below is the
+ * console's, unchanged.
+ *
+ * ## The mapping is a table, and the table is the thing a designer edits
+ *
+ * Nine statuses, five tones. `ENTITY_STATUS_TONE` is the whole mapping and
+ * nothing else in this file branches on a status, so retuning what colour
+ * `paused` is means editing one line. `ENTITY_STATUS_LABEL` is the same
+ * arrangement for the words.
+ *
+ * The tones are the tokens #111 added. No component invents a colour.
+ *
+ * ## The dot carries the colour; the word does not
+ *
+ * The one deliberate departure from the console, and it is the token's own note
+ * that decides it: `--cg-online` is 3.40:1 on white, which "clears the 3:1 bar
+ * for an indicator, which is all this is ever used as. Never body text on
+ * white." On its own chip fill it measures 3.06:1. Painting the WORD with it
+ * would ship text that fails AA on the default surface.
+ *
+ * The console can colour its word because its palette carries a separate
+ * `--color-volt-ink` foreground tuned for exactly that. This library has no
+ * `-ink` variant of a state colour, and adding one is a brand decision rather
+ * than a component's to take.
+ *
+ * So the dot is the colour at indicator contrast and the word is `text-ink`,
+ * which is declared in all three scopes and flips with the surface. State is
+ * never colour alone in either arrangement, because the word always renders.
+ *
+ * ## Surfaces
+ *
+ * Nothing is asked of the consumer. Every value here is a token, so
+ * `data-cg-surface="panel"` on any ancestor flips the dot, the ground and the
+ * word together. The chip declares `text-ink` itself rather than inheriting,
+ * because text is the one thing that does not flip by inheritance.
+ *
+ * ## Grounds
+ *
+ * Four tones sit on their own fill. `offline` sits on the card ground with a
+ * control border instead, which is #111's decision rather than this component's:
+ * the muted neutral on a neutral tint measures 2.90:1, under the bar, so absence
+ * of state deliberately has no fill of its own.
+ */
+/**
+ * Every state an entity can be in, in the order a surface should list them:
+ * serving first, terminal last. The console's vocabulary, unchanged.
+ *
+ * The array is the source and the type is derived from it, rather than the two
+ * being written out separately. A status added here is immediately missing from
+ * both tables below and typecheck says so, which is the only arrangement where
+ * a half-added status cannot ship.
+ */
+export const ENTITY_STATUS_ORDER = [
+    "live",
+    "building",
+    "charged",
+    "draft",
+    "paused",
+    "stopped",
+    "archived",
+    "expired",
+    "error",
+];
+/**
+ * THE MAPPING. Edit this to change what a status looks like.
+ *
+ * Founder decisions, 2026-08-24 (#114), recorded because two of them are not
+ * what a reader would guess:
+ *
+ * `building` is PENDING, not offline. Progress reads warm, not dead-grey, and
+ * a building entity may still be serving its previous version — so grey would
+ * be wrong twice over. `--cg-pending` is an alias of `--cg-expired`, so the two
+ * are one amber today and can be separated later without touching a consumer.
+ *
+ * `charged` is OFFLINE, not online. A charged entity is a reserved cell on the
+ * grid waiting to be plugged; if nothing arrives it expires and is archived. It
+ * is not serving and it is not ready, so green would claim something untrue.
+ * Worth knowing that "reserved and waiting" is a different idea from "paused,
+ * stopped, archived, draft", and a designer may want to split it out later. It
+ * shares their tone today because the library has no token for that idea.
+ *
+ * `live` is the library's green, explicitly not the console's lime: the brand
+ * has already spent lime on decoration, so a lime "live" would not read as a
+ * signal.
+ */
+export const ENTITY_STATUS_TONE = {
+    live: "online",
+    building: "pending",
+    charged: "offline",
+    draft: "offline",
+    paused: "offline",
+    stopped: "offline",
+    archived: "offline",
+    expired: "expired",
+    error: "danger",
+};
+/**
+ * The word each status shows. Plain and specific: the state, not a sentence
+ * about it. Override per instance with the `label` prop when a surface knows
+ * something more exact, e.g. "Build failed" rather than "Error".
+ */
+export const ENTITY_STATUS_LABEL = {
+    live: "Live",
+    building: "Building",
+    charged: "Charged",
+    draft: "Draft",
+    paused: "Paused",
+    stopped: "Stopped",
+    archived: "Archived",
+    expired: "Expired",
+    error: "Error",
+};
+/**
+ * Tone to classes. Two slots: the chip's ground and the dot's colour.
+ *
+ * Every entry is a utility over a `--cg-*` token, so all of it flips per
+ * surface. A literal here would look correct on white and be the one wrong
+ * thing on a purple panel.
+ */
+const TONE_STYLE = {
+    online: { chip: "border-transparent bg-online-fill", dot: "bg-online" },
+    pending: { chip: "border-transparent bg-pending-fill", dot: "bg-pending" },
+    expired: { chip: "border-transparent bg-expired-fill", dot: "bg-expired" },
+    danger: { chip: "border-transparent bg-danger-fill", dot: "bg-danger" },
+    // No fill, by design. See the note at the top and #111's own.
+    offline: { chip: "border-line bg-card", dot: "bg-offline" },
+};
+function EntityStatus({ status, label, className, ...props }) {
+    const tone = ENTITY_STATUS_TONE[status];
+    const style = TONE_STYLE[tone];
+    return (_jsxs("span", { "data-slot": "entity-status", "data-status": status, "data-tone": tone, className: cn("inline-flex w-fit shrink-0 items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-caption font-medium whitespace-nowrap text-ink", style.chip, className), ...props, children: [_jsx("span", { "aria-hidden": "true", "data-slot": "entity-status-dot", className: cn("size-1.5 shrink-0 rounded-pill", style.dot, 
+                // Progress, drawn rather than only named. `motion-safe:` rather than a
+                // global prefers-reduced-motion rule, because the variant travels with
+                // this file into a consumer's repo and a rule in our stylesheet does
+                // not. Same reasoning as AgentPrompt's caret.
+                status === "building" && "motion-safe:animate-pulse") }), label ?? ENTITY_STATUS_LABEL[status]] }));
+}
+export { EntityStatus };
+//# sourceMappingURL=entity-status.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"entity-status.js","sourceRoot":"","sources":["../../src/blocks/entity-status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM;IACN,UAAU;IACV,SAAS;IACT,OAAO;IACP,QAAQ;IACR,SAAS;IACT,UAAU;IACV,SAAS;IACT,OAAO;CACC,CAAA;AAOV;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAA+C;IAC5E,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,QAAQ;CAChB,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqC;IACnE,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACf,CAAA;AAED;;;;;;GAMG;AACH,MAAM,UAAU,GAA4D;IAC1E,MAAM,EAAE,EAAE,IAAI,EAAE,mCAAmC,EAAE,GAAG,EAAE,WAAW,EAAE;IACvE,OAAO,EAAE,EAAE,IAAI,EAAE,oCAAoC,EAAE,GAAG,EAAE,YAAY,EAAE;IAC1E,OAAO,EAAE,EAAE,IAAI,EAAE,oCAAoC,EAAE,GAAG,EAAE,YAAY,EAAE;IAC1E,MAAM,EAAE,EAAE,IAAI,EAAE,mCAAmC,EAAE,GAAG,EAAE,WAAW,EAAE;IACvE,8DAA8D;IAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,GAAG,EAAE,YAAY,EAAE;CAC5D,CAAA;AAED,SAAS,YAAY,CAAC,EACpB,MAAM,EACN,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EAKT;IACC,MAAM,IAAI,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;IACvC,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;IAE9B,OAAO,CACL,6BACY,eAAe,iBAIZ,MAAM,eACR,IAAI,EACf,SAAS,EAAE,EAAE,CACX,uIAAuI,EACvI,KAAK,CAAC,IAAI,EACV,SAAS,CACV,KACG,KAAK,aAET,8BAGc,MAAM,eACR,mBAAmB,EAC7B,SAAS,EAAE,EAAE,CACX,gCAAgC,EAChC,KAAK,CAAC,GAAG;gBACT,uEAAuE;gBACvE,uEAAuE;gBACvE,qEAAqE;gBACrE,8CAA8C;gBAC9C,MAAM,KAAK,UAAU,IAAI,2BAA2B,CACrD,GACD,EACD,KAAK,IAAI,mBAAmB,CAAC,MAAM,CAAC,IAChC,CACR,CAAA;AACH,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/index.d.ts

@@ -27,6 +27,9 @@ 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";

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,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,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 146 exported names across all 43 components collide zero times,
+// safe here — the exported names across all 46 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 43 modules into a single client island.
+// them into one file would collapse 46 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,6 +44,9 @@ 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";

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,kFAAkF;AAClF,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,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,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/dist/theme.css

@@ -97,6 +97,36 @@
      --destructive to the same token, so both spellings resolve to one source. */
   --color-danger: var(--cg-danger);
 
+  /* ---- state ----
+     What an entity IS: online, offline, pending, expired, and danger above.
+
+     #111 added the tokens and stopped there, so for one release the state
+     palette was reachable only as raw var(--cg-online). That is the shape #30
+     and #91 both found people get wrong: `danger` had utilities and its five
+     siblings did not, so the first consumer of the state palette would either
+     hardcode an escape hatch or reach for `text-accent` and get a surface.
+
+     Each name serves every colour utility, so --color-online gives text-online,
+     bg-online and border-online alike.
+
+     Checked against rule 4 before claiming these: shadcn owns background,
+     foreground, card, popover, primary, secondary, muted, accent, destructive,
+     border, input, ring, chart-* and sidebar-*. None of these collide.
+
+     There is no --color-offline-fill, because there is no --cg-offline-fill.
+     #111's note explains why, and it is a design decision rather than an
+     omission: the muted neutral on a neutral tint measures 2.90:1, under the
+     3:1 bar, so an unplugged chip uses the card ground and border-control
+     instead. A utility here would have to invent the value it maps. */
+  --color-online: var(--cg-online);
+  --color-online-fill: var(--cg-online-fill);
+  --color-offline: var(--cg-offline);
+  --color-pending: var(--cg-pending);
+  --color-pending-fill: var(--cg-pending-fill);
+  --color-expired: var(--cg-expired);
+  --color-expired-fill: var(--cg-expired-fill);
+  --color-danger-fill: var(--cg-danger-fill);
+
   /* ---- lines ---- */
   --color-hairline: var(--cg-border-hairline);
   --color-line: var(--cg-border-control);

package/dist/tokens/base.json

@@ -52,7 +52,7 @@
     }
   },
   "state": {
-    "$description": "state: what an entity IS, not what it means editorially.\n\nAdopted from the Console rather than invented, 2026-08-24 (#96). The Console\nhad already chosen and contrast-tested these — --color-live and\n--color-attention — while the brand carried no state colour at all beyond the\ndanger placeholder. Taking its values means the Console's appearance does not\nchange when it starts consuming this package, and the two stop disagreeing\nabout what 'live' looks like.\n\nEach carries per-surface values in surface-panel and surface-ink, for the same\nreason danger does: measured against all three grounds, no single value works.\nThe live green is 1.72:1 on the purple panel, and the brand's own lime is\n1.54:1 on white. A flat value would be invisible somewhere.\n\nNo --cg-offline-fill, deliberately. Measured, the pair does not work: the\nmuted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a\nborder. Rather than invent a value to satisfy the ratio, an unplugged chip\nuses the existing surface-card ground with border-control, and --cg-offline\nis the dot on that ground, where it measures 3.28:1. Absence of state should\nnot need a colour of its own.",
+    "$description": "state: what an entity IS, not what it means editorially.\n\nAdopted from the Console rather than invented, 2026-08-24 (#96). The Console\nhad already chosen and contrast-tested these — --color-live and\n--color-attention — while the brand carried no state colour at all beyond the\ndanger placeholder. Taking its values means the Console's appearance does not\nchange when it starts consuming this package, and the two stop disagreeing\nabout what 'live' looks like.\n\nEach carries per-surface values in surface-panel and surface-ink, for the same\nreason danger does: measured against all three grounds, no single value works.\nThe live green is 1.72:1 on the purple panel, and the brand's own lime is\n1.54:1 on white. A flat value would be invisible somewhere.\n\nNo --cg-offline-fill, deliberately. Measured, the pair does not work: the\nmuted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a\nborder. Rather than invent a value to satisfy the ratio, an unplugged chip\nuses the existing surface-card ground with border-control, and --cg-offline\nis the dot on that ground, where it measures 3.28:1. Absence of state should\nnot need a colour of its own.\n\npending joined them on 2026-08-24 (#114) as an ALIAS of expired rather than a\nnew value. Same amber today, separate name, so the two can diverge later with\na one-line edit here and no change in any consumer. Aliases compile to var(),\nso the flip survives.",
     "online": {
       "$value": "#00a05c",
       "$type": "color",
@@ -82,6 +82,15 @@
         }
       }
     },
+    "pending": {
+      "$value": "{state.expired}",
+      "$description": "In progress. Deliberately an ALIAS of expired rather than the same hex written twice: the two are one amber today and they are not the same idea, so a designer must be able to separate them without touching a consumer.\n\nExpired is terminal, pending is transitional, and warm is the honest reading for both. Grey would be wrong twice over for a building entity, because it is not absence and because a building entity may still be serving its previous version.\n\nFounder decision 2026-08-24, issue #114: \"building is like something in progress, something in between amber and yellow and orange.\"",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending"
+        }
+      }
+    },
     "online-fill": {
       "$value": "#e6f7ef",
       "$type": "color",
@@ -102,6 +111,15 @@
         }
       }
     },
+    "pending-fill": {
+      "$value": "{state.expired-fill}",
+      "$description": "The chip ground for pending, aliased to expired's for the same reason the foreground is. Splitting pending from expired later means editing these two entries and nothing else.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-fill"
+        }
+      }
+    },
     "danger-fill": {
       "$value": "#fceded",
       "$type": "color",

package/dist/tokens/surface-ink.json

@@ -134,7 +134,7 @@
     }
   },
   "state": {
-    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed.",
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope.",
     "online": {
       "$value": "#5FD99A",
       "$type": "color",
@@ -165,6 +165,15 @@
         }
       }
     },
+    "pending": {
+      "$value": "{state.expired}",
+      "$description": "Aliased to expired, which is 8.63:1 on #222. Declared here as well as at :root because an alias is substituted where it is DECLARED — a :root-only pending would freeze to the white-surface amber and stop flipping, with no error.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending"
+        }
+      }
+    },
     "online-fill": {
       "$value": "rgba(255, 255, 255, 0.08)",
       "$type": "color",
@@ -185,6 +194,15 @@
         }
       }
     },
+    "pending-fill": {
+      "$value": "{state.expired-fill}",
+      "$description": "Aliased to expired-fill. Declared per scope for the same reason the foreground is.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-fill"
+        }
+      }
+    },
     "danger-fill": {
       "$value": "rgba(255, 255, 255, 0.08)",
       "$type": "color",

package/dist/tokens/surface-panel.json

@@ -118,7 +118,7 @@
     }
   },
   "state": {
-    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed.",
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope.",
     "online": {
       "$value": "#C8F5DC",
       "$type": "color",
@@ -149,6 +149,15 @@
         }
       }
     },
+    "pending": {
+      "$value": "{state.expired}",
+      "$description": "Aliased to expired, which is 4.68:1 on the purple. Declared here as well as at :root because an alias is substituted where it is DECLARED — a :root-only pending would freeze to the white-surface amber and stop flipping, with no error.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending"
+        }
+      }
+    },
     "online-fill": {
       "$value": "rgba(255, 255, 255, 0.16)",
       "$type": "color",
@@ -169,6 +178,15 @@
         }
       }
     },
+    "pending-fill": {
+      "$value": "{state.expired-fill}",
+      "$description": "Aliased to expired-fill. Declared per scope for the same reason the foreground is.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-fill"
+        }
+      }
+    },
     "danger-fill": {
       "$value": "rgba(255, 255, 255, 0.16)",
       "$type": "color",

package/dist/tokens.css

@@ -93,7 +93,12 @@
      border. Rather than invent a value to satisfy the ratio, an unplugged chip
      uses the existing surface-card ground with border-control, and --cg-offline
      is the dot on that ground, where it measures 3.28:1. Absence of state should
-     not need a colour of its own. */
+     not need a colour of its own.
+
+     pending joined them on 2026-08-24 (#114) as an ALIAS of expired rather than a
+     new value. Same amber today, separate name, so the two can diverge later with
+     a one-line edit here and no change in any consumer. Aliases compile to var(),
+     so the flip survives. */
   /*
      Serving. From the Console's --color-live. 3.40:1 on white — clears the 3:1 bar for an indicator, which is all this is ever used as. Never body text on white. */
   --cg-online: #00a05c;
@@ -103,12 +108,22 @@
   /*
      Past its 30-day life and no longer served. From the Console's --color-attention. 4.39:1 on white. Amber rather than red: expiry is the documented default for a drop, not a fault. */
   --cg-expired: #b0662a;
+  /*
+     In progress. Deliberately an ALIAS of expired rather than the same hex written twice: the two are one amber today and they are not the same idea, so a designer must be able to separate them without touching a consumer.
+
+     Expired is terminal, pending is transitional, and warm is the honest reading for both. Grey would be wrong twice over for a building entity, because it is not absence and because a building entity may still be serving its previous version.
+
+     Founder decision 2026-08-24, issue #114: "building is like something in progress, something in between amber and yellow and orange." */
+  --cg-pending: var(--cg-expired);
   /*
      From the Console's --color-live-fill. --cg-online measures 3.06:1 on it. */
   --cg-online-fill: #e6f7ef;
   /*
      From the Console's --color-attention-fill. --cg-expired measures 3.99:1 on it. */
   --cg-expired-fill: #fdf3e0;
+  /*
+     The chip ground for pending, aliased to expired's for the same reason the foreground is. Splitting pending from expired later means editing these two entries and nothing else. */
+  --cg-pending-fill: var(--cg-expired-fill);
   /*
      From the Console's --color-error-fill. --cg-danger measures 3.72:1 on it. danger had no fill before; a chip needs one. */
   --cg-danger-fill: #fceded;
@@ -317,7 +332,7 @@
   --cg-danger: #FFDAD6;
 
   /* ---- state ----
-     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. */
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. */
   /*
      4.88:1 on the purple. The source green is 1.72:1 here — invisible, same class as the danger override. */
   --cg-online: #C8F5DC;
@@ -327,12 +342,18 @@
   /*
      4.68:1. The amber as a tint; the source value is 1.38:1 on this ground. */
   --cg-expired: #FFE2B8;
+  /*
+     Aliased to expired, which is 4.68:1 on the purple. Declared here as well as at :root because an alias is substituted where it is DECLARED — a :root-only pending would freeze to the white-surface amber and stop flipping, with no error. */
+  --cg-pending: var(--cg-expired);
   /*
      Translucent white rather than a tint; the panel foreground measures 3.62:1 on it. */
   --cg-online-fill: rgba(255, 255, 255, 0.16);
   /*
      Translucent white rather than a tint; the panel foreground measures 3.47:1 on it. */
   --cg-expired-fill: rgba(255, 255, 255, 0.16);
+  /*
+     Aliased to expired-fill. Declared per scope for the same reason the foreground is. */
+  --cg-pending-fill: var(--cg-expired-fill);
   /*
      Translucent white rather than a tint; the panel foreground measures 3.35:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.16);
@@ -368,7 +389,7 @@
   --cg-danger: #FF8A80;
 
   /* ---- state ----
-     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. */
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. */
   /*
      9.00:1 on #222. Ink has headroom, so this stays a recognisable green rather than washing to mint. */
   --cg-online: #5FD99A;
@@ -376,10 +397,16 @@
   --cg-offline: #9A9A9A;
   /* 8.63:1. Keeps the amber legible without turning yellow. */
   --cg-expired: #F0B45E;
+  /*
+     Aliased to expired, which is 8.63:1 on #222. Declared here as well as at :root because an alias is substituted where it is DECLARED — a :root-only pending would freeze to the white-surface amber and stop flipping, with no error. */
+  --cg-pending: var(--cg-expired);
   /* Translucent white; the ink foreground measures 7.04:1 on it. */
   --cg-online-fill: rgba(255, 255, 255, 0.08);
   /* Translucent white; the ink foreground measures 6.76:1 on it. */
   --cg-expired-fill: rgba(255, 255, 255, 0.08);
+  /*
+     Aliased to expired-fill. Declared per scope for the same reason the foreground is. */
+  --cg-pending-fill: var(--cg-expired-fill);
   /* Translucent white; the ink foreground measures 5.45:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.08);
 }

package/dist/tokens.json

@@ -11,8 +11,10 @@
       "--cg-online": "#00a05c",
       "--cg-offline": "var(--cg-neutral-500)",
       "--cg-expired": "#b0662a",
+      "--cg-pending": "var(--cg-expired)",
       "--cg-online-fill": "#e6f7ef",
       "--cg-expired-fill": "#fdf3e0",
+      "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-danger-fill": "#fceded",
       "--cg-primary-press": "#4b39db",
       "--cg-primary-tint": "#eeecfe",
@@ -139,8 +141,10 @@
       "--cg-online": "#C8F5DC",
       "--cg-offline": "#D9D4FB",
       "--cg-expired": "#FFE2B8",
+      "--cg-pending": "var(--cg-expired)",
       "--cg-online-fill": "rgba(255, 255, 255, 0.16)",
       "--cg-expired-fill": "rgba(255, 255, 255, 0.16)",
+      "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-danger-fill": "rgba(255, 255, 255, 0.16)"
     },
     "ink": {
@@ -161,8 +165,10 @@
       "--cg-online": "#5FD99A",
       "--cg-offline": "#9A9A9A",
       "--cg-expired": "#F0B45E",
+      "--cg-pending": "var(--cg-expired)",
       "--cg-online-fill": "rgba(255, 255, 255, 0.08)",
       "--cg-expired-fill": "rgba(255, 255, 255, 0.08)",
+      "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-danger-fill": "rgba(255, 255, 255, 0.08)"
     }
   }

package/package.json

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