@cloudgrid-io/ui 0.33.0 → 0.35.0

package/dist/expressive-code.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The code blocks of the docs site, as the library CodeBlock draws them. ui#341.
+ *
+ * Expressive Code renders every fenced block in the Starlight docs. This is its
+ * configuration, so the docs repo takes it in one line:
+ *
+ *     import { cloudgridExpressiveCode } from "@cloudgrid-io/ui/expressive-code"
+ *     starlight({ expressiveCode: cloudgridExpressiveCode, ... })
+ *
+ * MONOCHROME (founder, 2026-10-19), like CodeBlock: ink ground, every token in
+ * the on-code text, no syntax palette. The theme has no token rules at all, so
+ * Shiki gives every token the default foreground.
+ *
+ * TWO KINDS OF VALUE. Expressive Code paints through CSS, and every value it
+ * paints with here is a `var(--cg-*)` (`styleOverrides`), so a retune lands
+ * without touching this file. It also does colour arithmetic on its theme at
+ * build time (contrast, derived scrollbar and selection colours, the colour
+ * baked into each highlighted span), and that cannot read a custom property.
+ * Those values come from CODE_PALETTE, which scripts/build-expressive-code.mjs
+ * generates from tokens.css. Nothing here is a typed literal colour, and
+ * test/docs-preset.test.mjs holds it to that.
+ *
+ * PLAIN DATA. No functions, no class instances, no import from Expressive Code:
+ * Starlight serialises this config into a virtual module, and a theme object is
+ * accepted as-is (Expressive Code wraps it in ExpressiveCodeTheme itself).
+ *
+ * LIGHT ONLY. One theme, so Expressive Code emits no per-theme switch, and code
+ * is dark on a light page the way CodeBlock is everywhere.
+ *
+ * Measured against Expressive Code 0.44 (astro-expressive-code, via
+ * @astrojs/starlight 0.42.6).
+ */
+/** A VS Code-style theme, the shape Expressive Code accepts as a theme object. */
+export interface CodeTheme {
+    name: string;
+    type: "dark" | "light";
+    fg: string;
+    bg: string;
+    colors: Record<string, string>;
+    settings: Array<{
+        scope?: string[];
+        settings: Record<string, string>;
+    }>;
+}
+/** The subset of Expressive Code's options this export sets. */
+export interface CloudgridExpressiveCodeOptions {
+    themes: CodeTheme[];
+    styleOverrides: Record<string, string | Record<string, string>>;
+}
+/** The monochrome code theme: one ground, one foreground, no token rules. */
+export declare const cloudgridCodeTheme: CodeTheme;
+/** Every value Expressive Code paints through CSS, as a library token. */
+export declare const cloudgridCodeStyleOverrides: CloudgridExpressiveCodeOptions["styleOverrides"];
+/** The whole configuration: `starlight({ expressiveCode: cloudgridExpressiveCode })`. */
+export declare const cloudgridExpressiveCode: CloudgridExpressiveCodeOptions;
+export default cloudgridExpressiveCode;
+//# sourceMappingURL=expressive-code.d.ts.map

package/dist/expressive-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expressive-code.d.ts","sourceRoot":"","sources":["../src/expressive-code.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAIH,kFAAkF;AAClF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC,CAAA;CACxE;AAED,gEAAgE;AAChE,MAAM,WAAW,8BAA8B;IAC7C,MAAM,EAAE,SAAS,EAAE,CAAA;IACnB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CAChE;AAED,6EAA6E;AAC7E,eAAO,MAAM,kBAAkB,EAAE,SAahC,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,2BAA2B,EAAE,8BAA8B,CAAC,gBAAgB,CA4CxF,CAAA;AAED,yFAAyF;AACzF,eAAO,MAAM,uBAAuB,EAAE,8BAGrC,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/expressive-code.js

@@ -0,0 +1,101 @@
+/**
+ * The code blocks of the docs site, as the library CodeBlock draws them. ui#341.
+ *
+ * Expressive Code renders every fenced block in the Starlight docs. This is its
+ * configuration, so the docs repo takes it in one line:
+ *
+ *     import { cloudgridExpressiveCode } from "@cloudgrid-io/ui/expressive-code"
+ *     starlight({ expressiveCode: cloudgridExpressiveCode, ... })
+ *
+ * MONOCHROME (founder, 2026-10-19), like CodeBlock: ink ground, every token in
+ * the on-code text, no syntax palette. The theme has no token rules at all, so
+ * Shiki gives every token the default foreground.
+ *
+ * TWO KINDS OF VALUE. Expressive Code paints through CSS, and every value it
+ * paints with here is a `var(--cg-*)` (`styleOverrides`), so a retune lands
+ * without touching this file. It also does colour arithmetic on its theme at
+ * build time (contrast, derived scrollbar and selection colours, the colour
+ * baked into each highlighted span), and that cannot read a custom property.
+ * Those values come from CODE_PALETTE, which scripts/build-expressive-code.mjs
+ * generates from tokens.css. Nothing here is a typed literal colour, and
+ * test/docs-preset.test.mjs holds it to that.
+ *
+ * PLAIN DATA. No functions, no class instances, no import from Expressive Code:
+ * Starlight serialises this config into a virtual module, and a theme object is
+ * accepted as-is (Expressive Code wraps it in ExpressiveCodeTheme itself).
+ *
+ * LIGHT ONLY. One theme, so Expressive Code emits no per-theme switch, and code
+ * is dark on a light page the way CodeBlock is everywhere.
+ *
+ * Measured against Expressive Code 0.44 (astro-expressive-code, via
+ * @astrojs/starlight 0.42.6).
+ */
+import { CODE_PALETTE } from "./expressive-code-palette.js";
+/** The monochrome code theme: one ground, one foreground, no token rules. */
+export const cloudgridCodeTheme = {
+    name: "cloudgrid",
+    type: "dark",
+    fg: CODE_PALETTE.foreground,
+    bg: CODE_PALETTE.background,
+    colors: {
+        "editor.background": CODE_PALETTE.background,
+        "editor.foreground": CODE_PALETTE.foreground,
+        "terminal.background": CODE_PALETTE.background,
+        "terminal.foreground": CODE_PALETTE.foreground,
+    },
+    // The default entry only. No scoped rules is what makes it monochrome.
+    settings: [{ settings: { foreground: CODE_PALETTE.foreground, background: CODE_PALETTE.background } }],
+};
+/** Every value Expressive Code paints through CSS, as a library token. */
+export const cloudgridCodeStyleOverrides = {
+    // The frame: CodeBlock's corner on the ink ground, and no ring around it.
+    borderRadius: "var(--cg-radius-md)",
+    borderWidth: "var(--cg-border-width)",
+    borderColor: "var(--cg-surface-code)",
+    codeBackground: "var(--cg-surface-code)",
+    codeForeground: "var(--cg-text-on-code)",
+    codeFontFamily: "var(--cg-font-mono)",
+    codeFontSize: "var(--cg-mono-size)",
+    codeLineHeight: "var(--cg-mono-line)",
+    // CodeBlock's padding: py-5, px-6.
+    codePaddingBlock: "var(--cg-space-5)",
+    codePaddingInline: "var(--cg-space-6)",
+    uiFontFamily: "var(--cg-font-ui)",
+    uiFontSize: "var(--cg-body-14)",
+    // On ink the library's focus colour is the lime (`[data-cg-surface='ink']`
+    // sets --cg-border-accent to --cg-secondary); the purple measures about 2:1.
+    focusBorder: "var(--cg-secondary)",
+    frames: {
+        frameBoxShadowCssValue: "var(--cg-shadow-none)",
+        editorBackground: "var(--cg-surface-code)",
+        terminalBackground: "var(--cg-surface-code)",
+        // A titled frame and a terminal both keep their bar, on the same ink, so the
+        // block reads as one surface.
+        editorTabBarBackground: "var(--cg-surface-code)",
+        editorTabBarBorderColor: "var(--cg-surface-code)",
+        editorTabBarBorderBottomColor: "var(--cg-surface-code)",
+        editorActiveTabBackground: "var(--cg-surface-code)",
+        editorActiveTabForeground: "var(--cg-text-muted)",
+        editorActiveTabIndicatorTopColor: "var(--cg-surface-code)",
+        editorActiveTabIndicatorBottomColor: "var(--cg-surface-code)",
+        terminalTitlebarBackground: "var(--cg-surface-code)",
+        terminalTitlebarForeground: "var(--cg-text-muted)",
+        terminalTitlebarBorderBottomColor: "var(--cg-surface-code)",
+        // No dots colour: docs.css removes the window dots and the empty bar they
+        // sit in (founder, 2026-10-19), which Expressive Code has no setting for.
+        // The copy control, in the on-code text like everything else on ink.
+        inlineButtonForeground: "var(--cg-text-on-code)",
+        inlineButtonBackground: "var(--cg-text-on-code)",
+        inlineButtonBorder: "var(--cg-text-on-code)",
+        // The copy confirmation: the online state's text on its fill.
+        tooltipSuccessBackground: "var(--cg-online-fill)",
+        tooltipSuccessForeground: "var(--cg-online-strong)",
+    },
+};
+/** The whole configuration: `starlight({ expressiveCode: cloudgridExpressiveCode })`. */
+export const cloudgridExpressiveCode = {
+    themes: [cloudgridCodeTheme],
+    styleOverrides: cloudgridCodeStyleOverrides,
+};
+export default cloudgridExpressiveCode;
+//# sourceMappingURL=expressive-code.js.map

package/dist/expressive-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expressive-code.js","sourceRoot":"","sources":["../src/expressive-code.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAkB3D,6EAA6E;AAC7E,MAAM,CAAC,MAAM,kBAAkB,GAAc;IAC3C,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,MAAM;IACZ,EAAE,EAAE,YAAY,CAAC,UAAU;IAC3B,EAAE,EAAE,YAAY,CAAC,UAAU;IAC3B,MAAM,EAAE;QACN,mBAAmB,EAAE,YAAY,CAAC,UAAU;QAC5C,mBAAmB,EAAE,YAAY,CAAC,UAAU;QAC5C,qBAAqB,EAAE,YAAY,CAAC,UAAU;QAC9C,qBAAqB,EAAE,YAAY,CAAC,UAAU;KAC/C;IACD,uEAAuE;IACvE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;CACvG,CAAA;AAED,0EAA0E;AAC1E,MAAM,CAAC,MAAM,2BAA2B,GAAqD;IAC3F,0EAA0E;IAC1E,YAAY,EAAE,qBAAqB;IACnC,WAAW,EAAE,wBAAwB;IACrC,WAAW,EAAE,wBAAwB;IACrC,cAAc,EAAE,wBAAwB;IACxC,cAAc,EAAE,wBAAwB;IACxC,cAAc,EAAE,qBAAqB;IACrC,YAAY,EAAE,qBAAqB;IACnC,cAAc,EAAE,qBAAqB;IACrC,mCAAmC;IACnC,gBAAgB,EAAE,mBAAmB;IACrC,iBAAiB,EAAE,mBAAmB;IACtC,YAAY,EAAE,mBAAmB;IACjC,UAAU,EAAE,mBAAmB;IAC/B,2EAA2E;IAC3E,6EAA6E;IAC7E,WAAW,EAAE,qBAAqB;IAClC,MAAM,EAAE;QACN,sBAAsB,EAAE,uBAAuB;QAC/C,gBAAgB,EAAE,wBAAwB;QAC1C,kBAAkB,EAAE,wBAAwB;QAC5C,6EAA6E;QAC7E,8BAA8B;QAC9B,sBAAsB,EAAE,wBAAwB;QAChD,uBAAuB,EAAE,wBAAwB;QACjD,6BAA6B,EAAE,wBAAwB;QACvD,yBAAyB,EAAE,wBAAwB;QACnD,yBAAyB,EAAE,sBAAsB;QACjD,gCAAgC,EAAE,wBAAwB;QAC1D,mCAAmC,EAAE,wBAAwB;QAC7D,0BAA0B,EAAE,wBAAwB;QACpD,0BAA0B,EAAE,sBAAsB;QAClD,iCAAiC,EAAE,wBAAwB;QAC3D,0EAA0E;QAC1E,0EAA0E;QAC1E,qEAAqE;QACrE,sBAAsB,EAAE,wBAAwB;QAChD,sBAAsB,EAAE,wBAAwB;QAChD,kBAAkB,EAAE,wBAAwB;QAC5C,8DAA8D;QAC9D,wBAAwB,EAAE,uBAAuB;QACjD,wBAAwB,EAAE,yBAAyB;KACpD;CACF,CAAA;AAED,yFAAyF;AACzF,MAAM,CAAC,MAAM,uBAAuB,GAAmC;IACrE,MAAM,EAAE,CAAC,kBAAkB,CAAC;IAC5B,cAAc,EAAE,2BAA2B;CAC5C,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/index.d.ts

@@ -28,14 +28,18 @@ export * from "./ui/textarea.js";
 export * from "./ui/tooltip.js";
 export * from "./blocks/agent-prompt.js";
 export * from "./blocks/avatar.js";
+export * from "./blocks/bar-chart.js";
 export * from "./blocks/card-grid.js";
 export * from "./blocks/celebration.js";
+export * from "./blocks/chart-parts.js";
 export * from "./blocks/cloudgrid-install.js";
+export * from "./blocks/coming-soon-tag.js";
 export * from "./blocks/command-field.js";
 export * from "./blocks/compare-table.js";
 export * from "./blocks/confirm-delete-dialog.js";
 export * from "./blocks/creation-tile.js";
 export * from "./blocks/cta-banner.js";
+export * from "./blocks/disabled-button.js";
 export * from "./blocks/drop-zone.js";
 export * from "./blocks/empty-creations.js";
 export * from "./blocks/entity-card.js";
@@ -45,31 +49,40 @@ export * from "./blocks/eyebrow.js";
 export * from "./blocks/expiry-notice.js";
 export * from "./blocks/feature-cells.js";
 export * from "./blocks/feed-post.js";
+export * from "./blocks/full-screen-button.js";
 export * from "./blocks/hub-index.js";
 export * from "./blocks/install-content.js";
 export * from "./blocks/icons.js";
+export * from "./blocks/invite-popup.js";
 export * from "./blocks/logo.js";
+export * from "./blocks/meter.js";
+export * from "./blocks/notice.js";
 export * from "./blocks/notification-row.js";
 export * from "./blocks/onboarding-question.js";
 export * from "./blocks/option-card.js";
 export * from "./blocks/page-heading.js";
+export * from "./blocks/pager.js";
 export * from "./blocks/phosphor-marks.js";
 export * from "./blocks/pricing-tier-cards.js";
 export * from "./blocks/pricing-tiers.js";
 export * from "./blocks/prompt-block.js";
 export * from "./blocks/quote.js";
+export * from "./blocks/ranked-list.js";
 export * from "./blocks/rich-text.js";
 export * from "./blocks/shelf.js";
 export * from "./blocks/showcase-scroll.js";
 export * from "./blocks/side-nav.js";
 export * from "./blocks/sign-in-options.js";
+export * from "./blocks/stacked-bar.js";
 export * from "./blocks/stage-panel.js";
 export * from "./blocks/stat-tile.js";
 export * from "./blocks/step-item.js";
 export * from "./blocks/tab-bar.js";
+export * from "./blocks/timeline.js";
 export * from "./blocks/token-specimen.js";
 export * from "./blocks/tool-logo.js";
 export * from "./blocks/tool-setup.js";
 export * from "./blocks/tool-marks.js";
+export * from "./blocks/trend.js";
 export * from "./lib/cloudgrid-cn.js";
 //# sourceMappingURL=index.d.ts.map

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,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,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,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,mCAAmC,CAAA;AACjD,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,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,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,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,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,mCAAmC,CAAA;AACjD,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AAGjC,cAAc,uBAAuB,CAAA"}

package/dist/index.js

@@ -45,14 +45,18 @@ export * from "./ui/tooltip.js";
 // Composed blocks.
 export * from "./blocks/agent-prompt.js";
 export * from "./blocks/avatar.js";
+export * from "./blocks/bar-chart.js";
 export * from "./blocks/card-grid.js";
 export * from "./blocks/celebration.js";
+export * from "./blocks/chart-parts.js";
 export * from "./blocks/cloudgrid-install.js";
+export * from "./blocks/coming-soon-tag.js";
 export * from "./blocks/command-field.js";
 export * from "./blocks/compare-table.js";
 export * from "./blocks/confirm-delete-dialog.js";
 export * from "./blocks/creation-tile.js";
 export * from "./blocks/cta-banner.js";
+export * from "./blocks/disabled-button.js";
 export * from "./blocks/drop-zone.js";
 export * from "./blocks/empty-creations.js";
 export * from "./blocks/entity-card.js";
@@ -62,32 +66,41 @@ export * from "./blocks/eyebrow.js";
 export * from "./blocks/expiry-notice.js";
 export * from "./blocks/feature-cells.js";
 export * from "./blocks/feed-post.js";
+export * from "./blocks/full-screen-button.js";
 export * from "./blocks/hub-index.js";
 export * from "./blocks/install-content.js";
 export * from "./blocks/icons.js";
+export * from "./blocks/invite-popup.js";
 export * from "./blocks/logo.js";
+export * from "./blocks/meter.js";
+export * from "./blocks/notice.js";
 export * from "./blocks/notification-row.js";
 export * from "./blocks/onboarding-question.js";
 export * from "./blocks/option-card.js";
 export * from "./blocks/page-heading.js";
+export * from "./blocks/pager.js";
 export * from "./blocks/phosphor-marks.js";
 export * from "./blocks/pricing-tier-cards.js";
 export * from "./blocks/pricing-tiers.js";
 export * from "./blocks/prompt-block.js";
 export * from "./blocks/quote.js";
+export * from "./blocks/ranked-list.js";
 export * from "./blocks/rich-text.js";
 export * from "./blocks/shelf.js";
 export * from "./blocks/showcase-scroll.js";
 export * from "./blocks/side-nav.js";
 export * from "./blocks/sign-in-options.js";
+export * from "./blocks/stacked-bar.js";
 export * from "./blocks/stage-panel.js";
 export * from "./blocks/stat-tile.js";
 export * from "./blocks/step-item.js";
 export * from "./blocks/tab-bar.js";
+export * from "./blocks/timeline.js";
 export * from "./blocks/token-specimen.js";
 export * from "./blocks/tool-logo.js";
 export * from "./blocks/tool-setup.js";
 export * from "./blocks/tool-marks.js";
+export * from "./blocks/trend.js";
 // The class-merge helper, which the components use and consumers may too.
 export * from "./lib/cloudgrid-cn.js";
 //# sourceMappingURL=index.js.map

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,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,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,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,mCAAmC,CAAA;AACjD,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/tokens/base.json

@@ -2021,5 +2021,18 @@
         }
       }
     }
+  },
+  "data": {
+    "$description": "The colours a chart paints its data in, as distinct from the brand hues they come from (#332,\nfounder ruling 2026-10-19). A mark that carries a value must hold 3:1 against its ground (WCAG\n1.4.11), and the brand cyan does not on a light one:\n\n  #60e9f0 on the card        #ffffff : 1.46:1\n  #60e9f0 on the page ground #f1f1f6 : 1.29:1\n\nSo data gets its own token, which flips per surface, and the brand cyan keeps its value\neverywhere else. The first series needs none: it is --cg-text-accent, which already flips\n(purple, white, lime).",
+    "data-cyan": {
+      "$value": "#0a959b",
+      "$type": "color",
+      "$description": "The second data series (StackedBar's Output part). The brand cyan's hue, walked down in OKLCH\nlightness (L 0.862 to 0.610, chroma 0.118 to 0.102 to stay in gamut, hue -160.1) until the\nlightest ground a chart sits on clears 3:1 with margin, the practice --cg-accent's note records:\n\n  #0a959b on the card        #ffffff : 3.63:1\n  #0a959b on the page ground #f1f1f6 : 3.22:1\n  #0a959b on --cg-neutral-50 #f4f6f8 : 3.35:1\n\nThe first passing step on that ray, #039ba1, cleared the page ground by 0.01; this one holds\n0.22. Inside the panel and ink scopes it is the brand cyan itself, which already clears\n(4.01:1 on #5a47f0, 10.92:1 on #222222). A data colour, never text.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-data-cyan"
+        }
+      }
+    }
   }
 }

package/dist/tokens/surface-ink.json

@@ -359,5 +359,18 @@
         }
       }
     }
+  },
+  "data": {
+    "$description": "data: ink's answer is the brand cyan itself.",
+    "data-cyan": {
+      "$value": "{brand.tertiary}",
+      "$type": "color",
+      "$description": "The brand cyan: 10.92:1 on ink #222222.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-data-cyan"
+        }
+      }
+    }
   }
 }

package/dist/tokens/surface-panel.json

@@ -345,5 +345,18 @@
         }
       }
     }
+  },
+  "data": {
+    "$description": "data: the panel's answer is the brand cyan itself.",
+    "data-cyan": {
+      "$value": "{brand.tertiary}",
+      "$type": "color",
+      "$description": "The brand cyan: 4.01:1 on the panel's #5a47f0, so the data shade is not needed here.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-data-cyan"
+        }
+      }
+    }
   }
 }

package/dist/tokens.css

@@ -1597,6 +1597,31 @@
      "Secondary2 30" style, which is the nearest thing in the same set to the two
      above. Founder may veto (#196). */
   --cg-kind-agent: #d1c9ff;
+
+  /* ---- data ----
+     The colours a chart paints its data in, as distinct from the brand hues they come from (#332,
+     founder ruling 2026-10-19). A mark that carries a value must hold 3:1 against its ground (WCAG
+     1.4.11), and the brand cyan does not on a light one:
+
+       #60e9f0 on the card        #ffffff : 1.46:1
+       #60e9f0 on the page ground #f1f1f6 : 1.29:1
+
+     So data gets its own token, which flips per surface, and the brand cyan keeps its value
+     everywhere else. The first series needs none: it is --cg-text-accent, which already flips
+     (purple, white, lime). */
+  /*
+     The second data series (StackedBar's Output part). The brand cyan's hue, walked down in OKLCH
+     lightness (L 0.862 to 0.610, chroma 0.118 to 0.102 to stay in gamut, hue -160.1) until the
+     lightest ground a chart sits on clears 3:1 with margin, the practice --cg-accent's note records:
+
+       #0a959b on the card        #ffffff : 3.63:1
+       #0a959b on the page ground #f1f1f6 : 3.22:1
+       #0a959b on --cg-neutral-50 #f4f6f8 : 3.35:1
+
+     The first passing step on that ray, #039ba1, cleared the page ground by 0.01; this one holds
+     0.22. Inside the panel and ink scopes it is the brand cyan itself, which already clears
+     (4.01:1 on #5a47f0, 10.92:1 on #222222). A data colour, never text. */
+  --cg-data-cyan: #0a959b;
 }
 
 [data-cg-surface='panel'] {
@@ -1715,6 +1740,12 @@
      than as a grey cast on it. */
   --cg-shadow-tile: 0 1px 2px rgba(24, 12, 110, 0.16), 0 6px 16px -4px rgba(24, 12, 110, 0.26);
   --cg-shadow-tile-hover: 0 2px 4px rgba(24, 12, 110, 0.18), 0 16px 32px -8px rgba(24, 12, 110, 0.42);
+
+  /* ---- data ----
+     data: the panel's answer is the brand cyan itself. */
+  /*
+     The brand cyan: 4.01:1 on the panel's #5a47f0, so the data shade is not needed here. */
+  --cg-data-cyan: var(--cg-tertiary);
 }
 
 [data-cg-surface='ink'] {
@@ -1812,4 +1843,9 @@
      does not inherit the panel's violet. */
   --cg-shadow-tile: var(--cg-shadow-card);
   --cg-shadow-tile-hover: var(--cg-shadow-hover);
+
+  /* ---- data ----
+     data: ink's answer is the brand cyan itself. */
+  /* The brand cyan: 10.92:1 on ink #222222. */
+  --cg-data-cyan: var(--cg-tertiary);
 }

package/dist/tokens.json

@@ -211,7 +211,8 @@
       "--cg-hover": "rgba(34, 34, 34, 0.045)",
       "--cg-kind-inspiration": "#fae4b3",
       "--cg-kind-app": "#dffbfc",
-      "--cg-kind-agent": "#d1c9ff"
+      "--cg-kind-agent": "#d1c9ff",
+      "--cg-data-cyan": "#0a959b"
     },
     "panel": {
       "--cg-text-primary": "#ffffff",
@@ -249,7 +250,8 @@
       "--cg-danger-strong": "var(--cg-text-primary)",
       "--cg-hover": "rgba(255, 255, 255, 0.10)",
       "--cg-shadow-tile": "0 1px 2px rgba(24, 12, 110, 0.16), 0 6px 16px -4px rgba(24, 12, 110, 0.26)",
-      "--cg-shadow-tile-hover": "0 2px 4px rgba(24, 12, 110, 0.18), 0 16px 32px -8px rgba(24, 12, 110, 0.42)"
+      "--cg-shadow-tile-hover": "0 2px 4px rgba(24, 12, 110, 0.18), 0 16px 32px -8px rgba(24, 12, 110, 0.42)",
+      "--cg-data-cyan": "var(--cg-tertiary)"
     },
     "ink": {
       "--cg-text-primary": "#ffffff",
@@ -289,7 +291,8 @@
       "--cg-danger-strong": "var(--cg-text-primary)",
       "--cg-hover": "rgba(255, 255, 255, 0.06)",
       "--cg-shadow-tile": "var(--cg-shadow-card)",
-      "--cg-shadow-tile-hover": "var(--cg-shadow-hover)"
+      "--cg-shadow-tile-hover": "var(--cg-shadow-hover)",
+      "--cg-data-cyan": "var(--cg-tertiary)"
     }
   }
 }

package/dist/ui/card.d.ts

@@ -1,9 +1,30 @@
 import * as React from "react";
-declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+/**
+ * `example` (#334, Figma 10789:8587): the card shows illustrative values for a
+ * feature that is not built yet. Everything in `CardContent` is set in the
+ * strong muted rung (`--cg-text-muted-strong`); the header, and anything that
+ * paints its own colour (a chart's bars), is untouched. There is no "Example
+ * data" line, by founder ruling: the card says it is a preview with a
+ * `ComingSoonTag` in `CardAction`. A `StatTile` inside paints its own ink, so
+ * give it `example` too.
+ */
+declare function Card({ className, size, example, ...props }: React.ComponentProps<"div"> & {
     size?: "default" | "sm";
+    example?: boolean;
 }): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * The title's face. `heading` (the default, unchanged) is `font-heading`, the
+ * display face, Tanker, which is capitals by design. `body` is the brand's
+ * running-text face (`font-body`, Space Grotesk) in whatever case the words
+ * are written, which is what the App page v2 frames draw ("Creation Details",
+ * "Most used by", "Views over time"; founder ruling 2026-10-19). Only the face
+ * changes; size, leading and weight are the title's own.
+ */
+export type CardTitleFace = "heading" | "body";
+declare function CardTitle({ face, className, ...props }: React.ComponentProps<"div"> & {
+    face?: CardTitleFace;
+}): React.JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/ui/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;CAAE,qBAY3D;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAA"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;GAQG;AACH,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAgB,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,qBAa9E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,CAAA;AAE9C,iBAAS,SAAS,CAAC,EACjB,IAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,aAAa,CAAA;CAAE,qBAcxD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAA"}

package/dist/ui/card.js

@@ -1,14 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/cloudgrid-cn.js";
-function Card({ className, size = "default", ...props }) {
-    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-body-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
+/**
+ * `example` (#334, Figma 10789:8587): the card shows illustrative values for a
+ * feature that is not built yet. Everything in `CardContent` is set in the
+ * strong muted rung (`--cg-text-muted-strong`); the header, and anything that
+ * paints its own colour (a chart's bars), is untouched. There is no "Example
+ * data" line, by founder ruling: the card says it is a preview with a
+ * `ComingSoonTag` in `CardAction`. A `StatTile` inside paints its own ink, so
+ * give it `example` too.
+ */
+function Card({ className, size = "default", example, ...props }) {
+    return (_jsx("div", { "data-slot": "card", "data-size": size, "data-example": example ? "" : undefined, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-body-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
 }
 function CardHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
 }
-function CardTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-title", className: cn("font-heading text-body-md leading-snug font-medium group-data-[size=sm]/card:text-body-sm", className), ...props }));
+function CardTitle({ face = "heading", className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", "data-face": face === "body" ? "body" : undefined, className: cn(face === "body"
+            ? "font-body text-body-md leading-snug font-medium group-data-[size=sm]/card:text-body-sm"
+            : "font-heading text-body-md leading-snug font-medium group-data-[size=sm]/card:text-body-sm", className), ...props }));
 }
 function CardDescription({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-description", className: cn("text-body-sm text-muted-foreground", className), ...props }));
@@ -17,7 +28,7 @@ function CardAction({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
 }
 function CardContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing) group-data-example/card:text-faint-strong", className), ...props }));
 }
 function CardFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className), ...props }));

package/dist/ui/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/ui/card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,GAAG,KAAK,EACkD;IAC1D,OAAO,CACL,2BACY,MAAM,eACL,IAAI,EACf,SAAS,EAAE,EAAE,CACX,2ZAA2Z,EAC3Z,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,wPAAwP,EACxP,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACrE,OAAO,CACL,2BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,2FAA2F,EAC3F,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IAC3E,OAAO,CACL,2BACY,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,SAAS,CAAC,KAC1D,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,gEAAgE,EAChE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACvE,OAAO,CACL,2BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,wEAAwE,EACxE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAA"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/ui/card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;GAQG;AACH,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,OAAO,EACP,GAAG,KAAK,EACqE;IAC7E,OAAO,CACL,2BACY,MAAM,eACL,IAAI,kBACD,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACtC,SAAS,EAAE,EAAE,CACX,2ZAA2Z,EAC3Z,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,wPAAwP,EACxP,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAYD,SAAS,SAAS,CAAC,EACjB,IAAI,GAAG,SAAS,EAChB,SAAS,EACT,GAAG,KAAK,EAC+C;IACvD,OAAO,CACL,2BACY,YAAY,eACX,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EAAE,EAAE,CACX,IAAI,KAAK,MAAM;YACb,CAAC,CAAC,wFAAwF;YAC1F,CAAC,CAAC,2FAA2F,EAC/F,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IAC3E,OAAO,CACL,2BACY,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,SAAS,CAAC,KAC1D,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,gEAAgE,EAChE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACvE,OAAO,CACL,2BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,+DAA+D,EAAE,SAAS,CAAC,KACrF,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,wEAAwE,EACxE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAA"}

package/dist/ui/drawer.d.ts

@@ -50,9 +50,19 @@ import { type VariantProps } from "class-variance-authority";
  * three of the five shipped drawers, `max-w-lg` on the newest. #694's own frame
  * is 525 of 1600, which is `lg` to the nearest rung.
  *
- * There is deliberately no third rung. Two values cover every frame and every
- * shipped copy, and a wider one with nothing behind it would be a worker
- * inventing a brand decision.
+ * There was deliberately no third rung until a frame needed one: a wider one
+ * with nothing behind it would have been a worker inventing a brand decision.
+ *
+ *     xl   1152px  max-w-6xl
+ *
+ * The App page v2 side panel (#331, Figma 10789:8587, founder-approved
+ * 2026-10-18) is the frame: "Creation Details" opened over My Creations,
+ * 1143px of a 1600px design, holding the App page's own sidebar and its
+ * content. That is the designer's "about 1143px", and `max-w-6xl` is the
+ * Tailwind rung 9px from it, chosen over an arbitrary `max-w-[1143px]` for the
+ * reason `md` and `lg` are rungs: a drawer width is a step on a ladder, not a
+ * measurement copied to the pixel. Below 1152px it fills the screen like the
+ * other two.
  *
  * `size` is the INLINE width and applies to `left` and `right` only. A bottom
  * sheet is full width, which is what `PlugSheet` already does.
@@ -142,7 +152,7 @@ declare const drawerViewportVariants: (props?: ({
  */
 declare const drawerPopupVariants: (props?: ({
     side?: "bottom" | "left" | "right" | null | undefined;
-    size?: "lg" | "md" | null | undefined;
+    size?: "lg" | "md" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Drawer({ modal, ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
 declare function DrawerTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
@@ -174,13 +184,23 @@ declare function DrawerContent({ side, size, container, className, children, ...
  * `aria-labelledby` needs no wiring: `DrawerTitle` is Base UI's `Dialog.Title`,
  * which registers its own id on the popup. Passing `title` rather than leaving it
  * to the caller is what guarantees every drawer has one.
+ *
+ * `actions` (#331) is the row of controls the App page side panel draws between
+ * its title and the close glyph: Visibility, Open app, the menu, and Full
+ * screen. They sit in the title row, close is always last, and the row wraps
+ * when the sheet is narrower than its contents. Leave it out and the header
+ * renders exactly what it did before.
  */
-declare function DrawerHeader({ title, description, closeLabel, showCloseButton, className, children, ...props }: Omit<React.ComponentProps<"div">, "title"> & {
+declare function DrawerHeader({ title, description, closeLabel, showCloseButton, actions, titleFace, className, children, ...props }: Omit<React.ComponentProps<"div">, "title"> & {
     title: React.ReactNode;
     description?: React.ReactNode;
     /** The close button's accessible name. "Close user details" beats "Close". */
     closeLabel?: string;
     showCloseButton?: boolean;
+    /** Controls in the title row, before the close button. */
+    actions?: React.ReactNode;
+    /** The title's face; see `DrawerTitle`. "body" for the App page's sentence-case title. */
+    titleFace?: DrawerTitleFace;
 }): React.JSX.Element;
 /**
  * The scrolling half.
@@ -202,7 +222,18 @@ declare function DrawerBody({ className, ...props }: React.ComponentProps<"div">
  * text reads as part of the text.
  */
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function DrawerTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
+/**
+ * The title's face. `heading` (the default, unchanged) is `font-heading`, the
+ * display face, Tanker, which is capitals by design. `body` is the brand's
+ * running-text face (`font-body`, Space Grotesk) in whatever case the words
+ * are written, which is what the App page v2 frames draw ("Creation Details",
+ * "Most used by", "Views over time"; founder ruling 2026-10-19). Only the face
+ * changes; size, leading and weight are the title's own.
+ */
+export type DrawerTitleFace = "heading" | "body";
+declare function DrawerTitle({ face, className, ...props }: DialogPrimitive.Title.Props & {
+    face?: DrawerTitleFace;
+}): React.JSX.Element;
 declare function DrawerDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
 export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, drawerPopupVariants, drawerViewportVariants, };
 //# sourceMappingURL=drawer.d.ts.map