@cloudgrid-io/ui 0.2.0 → 0.3.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
+44 React components, built on [Base UI](https://base-ui.com), styled only through tokens
 and carrying no hardcoded colour.
 
 ## Install

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