@cloudgrid-io/ui 0.3.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.
 
-44 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/index.d.ts

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

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,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 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 44 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,8 @@ 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";

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,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.4.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",