@cloudgrid-io/ui 0.30.0 → 0.31.1

package/README.md

@@ -93,6 +93,29 @@ what `text-ink` is doing above. Borders and backgrounds flip on their own. Text
 There is no dark mode here, and this is not a substitute for one. Dark surfaces are a
 property of a container, never a page-level theme.
 
+## The install panel
+
+Every CloudGrid install panel comes from this package, content and design both. Nothing is
+fetched.
+
+```tsx
+import { CloudGridInstall, INSTALL_PRESETS, installToolPreset } from "@cloudgrid-io/ui"
+
+<CloudGridInstall />                                    // the whole panel
+<CloudGridInstall preset={INSTALL_PRESETS.onboarding} onValueChange={recordTool} />
+<CloudGridInstall preset={installToolPreset("cursor")} />
+```
+
+There are no props for the words. A page chooses what is on screen (`tools`, `methods`,
+`defaultTool`, `defaultMethod`, `showFetchPrompt`, `showFooter`, or a `preset`) and what only
+it can know (the selected tool and method, the heading level, a Continue action). Tool values
+are stable identifiers, safe to record: `claude-code`, `cursor`, `codex`, `antigravity`,
+`gemini`, `chatgpt`, `claude-web`.
+
+`CloudGridFetchPrompt` and `CloudGridInstallFooter` render on their own. Without React, take the
+strings from `@cloudgrid-io/ui/install-content` (`INSTALL_TOOLS`, `INSTALL_COMMANDS` and the
+rest).
+
 ## Entry points
 
 | | |
@@ -104,9 +127,68 @@ property of a container, never a page-level theme.
 | `@cloudgrid-io/ui/fonts.css` | the three self-hosted families |
 | `@cloudgrid-io/ui/prose.css` | long-form text |
 | `@cloudgrid-io/ui/tokens.json` | the same values, machine-readable |
+| `@cloudgrid-io/ui/install-content` | the install content as plain data, no React |
 
 The JSON sets under `tokens/` are DTCG and are the source the CSS is compiled from.
 
+## The CloudGrid sign as files
+
+The socket glyph in a rounded square, as static files for a browser tab, a home screen or
+a web manifest. Two colourways: `mark` is the brand sign (purple square, white glyph, what
+the site uses) and `mark-inverted` is white with a purple glyph (what the Console's tab uses).
+
+| | |
+|---|---|
+| `@cloudgrid-io/ui/brand/mark.svg` | SVG favicon, purple |
+| `@cloudgrid-io/ui/brand/mark-inverted.svg` | SVG favicon, white |
+| `@cloudgrid-io/ui/brand/mark-32.png`, `mark-inverted-32.png` | PNG favicon fallback |
+| `@cloudgrid-io/ui/brand/mark-180.png`, `mark-inverted-180.png` | `apple-touch-icon`, full bleed: iOS rounds it |
+| `@cloudgrid-io/ui/brand/mark-192.png`, `mark-inverted-192.png` | web manifest |
+| `@cloudgrid-io/ui/brand/mark-512.png`, `mark-inverted-512.png` | web manifest |
+
+A browser needs a URL, so copy them into your public folder or import them through your
+bundler:
+
+```tsx
+// Next.js app router, e.g. app/layout.tsx
+import favicon from "@cloudgrid-io/ui/brand/mark-inverted.svg"
+import appleTouch from "@cloudgrid-io/ui/brand/mark-inverted-180.png"
+
+export const metadata = {
+  title: "CloudGrid",
+  icons: { icon: favicon.src, apple: appleTouch.src },
+}
+```
+
+```html
+<link rel="icon" href="/mark-inverted.svg" type="image/svg+xml">
+<link rel="icon" href="/mark-inverted-32.png" sizes="32x32" type="image/png">
+<link rel="apple-touch-icon" href="/mark-inverted-180.png">
+```
+
+Inside a page, use the component instead: `<LogoMark tone="inverted" size={32} />`. It draws
+the same glyph from the same constant as `Logo`, and the files are generated from that
+constant and the brand token by `scripts/generate-brand-mark.mjs`, so the three cannot drift.
+
+## The empty creations state
+
+The new-user empty state for a list of someone's creations: a dashed box, a fan of
+thumbnails around a "+" tile, "No creations yet", one line and an Add button.
+
+```tsx
+import Link from "next/link"
+import { EmptyCreations } from "@cloudgrid-io/ui"
+
+<EmptyCreations href="/drop" linkComponent={Link} level={3} />
+<EmptyCreations onAdd={openComposer} />
+```
+
+The words and the four thumbnails come from the package; `addLabel` and `previews` override
+them. It lays out by container query, so it fits whatever width it is given. The thumbnails
+are inlined in the component, and also ship as files for any other use:
+`@cloudgrid-io/ui/brand/creations/1.webp` to `4.webp` (164x94, 2 to 5KB each). After
+replacing a file, run `node scripts/generate-creation-previews.mjs`.
+
 ## Versioning
 
 Semver. Token value changes are minor; removals are major.

package/dist/blocks/agent-prompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-prompt.d.ts","sourceRoot":"","sources":["../../src/blocks/agent-prompt.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,SAAkB,EAClB,OAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IAC5C,OAAO,EAAE,MAAM,CAAA;IACf,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,qBAgHA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"agent-prompt.d.ts","sourceRoot":"","sources":["../../src/blocks/agent-prompt.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,SAAkB,EAClB,OAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IAC5C,OAAO,EAAE,MAAM,CAAA;IACf,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,qBAoHA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/agent-prompt.js

@@ -72,7 +72,12 @@ function AgentPrompt({ command, label, copyLabel = "Copy", variant = "default",
             setCopied(false);
         }, 1600);
     }
-    return (_jsxs("div", { "data-slot": "agent-prompt", "data-variant": variant, className: cn("flex flex-col gap-2", outline && "items-center", className), ...props, children: [label ? (_jsx("p", { className: cn("m-0 text-body-sm text-body", outline && "text-caption text-faint"), children: label })) : null, _jsxs("div", { ...(outline ? {} : { "data-cg-surface": "ink" }), className: cn("flex items-center gap-3 rounded-pill px-4 py-2.5", outline
+    return (_jsxs("div", { "data-slot": "agent-prompt", "data-variant": variant, 
+        // `min-w-0` for the reason `CloudGridInstall` gives (#275): the outline
+        // pill truncates, and a truncated line still reports its full width as
+        // min-content, so a grid track or flex row holding this would otherwise
+        // refuse to be narrower than the whole command.
+        className: cn("flex min-w-0 flex-col gap-2", outline && "items-center", className), ...props, children: [label ? (_jsx("p", { className: cn("m-0 text-body-sm text-body", outline && "text-caption text-faint"), children: label })) : null, _jsxs("div", { ...(outline ? {} : { "data-cg-surface": "ink" }), className: cn("flex items-center gap-3 rounded-pill px-4 py-2.5", outline
                     // See PromptBlock's FIELD note: --cg-surface-subtle is :root-only and
                     // freezes to a near-white lavender on ink, --cg-hover is declared in
                     // all three scopes.

package/dist/blocks/agent-prompt.js.map

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

package/dist/blocks/cloudgrid-install.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { type InstallFilter, type InstallMethodValue, type InstallToolValue } from "./install-content.js";
+import { PageHeading } from "./page-heading.js";
+import { type ToolSetupGroup, type ToolSetupTool } from "./tool-setup.js";
+/**
+ * The content's tools as `ToolSetup` takes them, in the order asked for, with
+ * every vendor mark and every body rendered.
+ *
+ * Exported for a page that composes `ToolSetup` itself, which is what the
+ * library gallery's `ToolSetup` specimens do. A method missing from `methods`
+ * is dropped from each tool, so a tool with nothing left leaves the strip.
+ *
+ * 15px marks, which is what the strip draws. A mark carries no size of its own,
+ * so every call site states one.
+ */
+export declare function installSetupTools(tools?: readonly InstallToolValue[], methods?: readonly InstallMethodValue[]): ToolSetupTool[];
+/** The two runs, each drawn as its glyph and named by its words. */
+export declare function installSetupGroups(): ToolSetupGroup[];
+/**
+ * "Not sure? Copy this prompt and paste it to your AI agent." over the one
+ * command an agent can act on.
+ *
+ * The outline pill, as the Console drew it under the panel, so it reads the
+ * surface it sits on. `showIntro={false}` is the standalone pill, which is what
+ * the old `fetch-prompt` block was.
+ */
+declare function CloudGridFetchPrompt({ showIntro, ...props }: Omit<React.ComponentProps<"div">, "ref" | "children"> & {
+    /** The "Not sure?" line over the pill. */
+    showIntro?: boolean;
+}): React.JSX.Element;
+/**
+ * The source line: one sentence, then the two repositories.
+ *
+ * `text-body` and not `text-faint`: faint is large-text-legal only (#232), and
+ * this is 15px. Every colour is a token, so it flips on the panel and on ink with
+ * the rest of the block; a container that sets `data-cg-surface` still owes its
+ * own `text-ink` (rule 3).
+ */
+declare function CloudGridInstallFooter({ className, ...props }: Omit<React.ComponentProps<"footer">, "ref" | "children">): React.JSX.Element;
+declare function CloudGridInstall({ preset, tools, methods, defaultTool, defaultMethod, showFetchPrompt, showFooter, value, onValueChange, method, onMethodChange, level, headingSize, continueLabel, onContinue, canContinue, className, ...props }: Omit<React.ComponentProps<"div">, "ref" | "children" | "defaultValue" | "onChange"> & InstallFilter & {
+    /**
+     * A named configuration: `INSTALL_PRESETS.hub`, `.onboarding`, `.console`,
+     * `.makeGame`, `.makeAppAgent`, `.makeDeckPage`, or `installToolPreset(tool)`.
+     * Any filter prop passed alongside overrides that field of it.
+     */
+    preset?: InstallFilter;
+    /** The selected tool, controlled. Pair with `onValueChange`. */
+    value?: InstallToolValue;
+    /** Reports the tool on screen, in the content's slugs (`gemini`, `claude-web`). */
+    onValueChange?: (value: InstallToolValue) => void;
+    /** The selected method, controlled. Pair with `onMethodChange`. */
+    method?: InstallMethodValue;
+    onMethodChange?: (method: InstallMethodValue) => void;
+    /** `2` for a section inside a larger page. */
+    level?: 1 | 2;
+    headingSize?: React.ComponentProps<typeof PageHeading>["size"];
+    /**
+     * A Continue button under the panel, for a flow. `null`, the default, draws
+     * none: with no handler a button is a dead end, and neither surface that
+     * renders this today has anything to continue to from inside it.
+     */
+    continueLabel?: string | null;
+    onContinue?: () => void;
+    canContinue?: boolean;
+}): React.JSX.Element;
+export { CloudGridFetchPrompt, CloudGridInstall, CloudGridInstallFooter };
+//# sourceMappingURL=cloudgrid-install.d.ts.map

package/dist/blocks/cloudgrid-install.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cloudgrid-install.d.ts","sourceRoot":"","sources":["../../src/blocks/cloudgrid-install.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,OAAO,EAQL,KAAK,aAAa,EAGlB,KAAK,kBAAkB,EAGvB,KAAK,gBAAgB,EACtB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAGxD,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,aAAa,EACnB,MAAM,0BAA0B,CAAA;AAyGjC;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,GAAE,SAAS,gBAAgB,EAAsC,EACtE,OAAO,GAAE,SAAS,kBAAkB,EAAwC,GAC3E,aAAa,EAAE,CAqBjB;AAED,oEAAoE;AACpE,wBAAgB,kBAAkB,IAAI,cAAc,EAAE,CAMrD;AAED;;;;;;;GAOG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,qBAWA;AAED;;;;;;;GAOG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,qBA0B1D;AAUD,iBAAS,gBAAgB,CAAC,EACxB,MAAM,EACN,KAAK,EACL,OAAO,EACP,WAAW,EACX,aAAa,EACb,eAAe,EACf,UAAU,EACV,KAAK,EACL,aAAa,EACb,MAAM,EACN,cAAc,EACd,KAAS,EACT,WAAW,EACX,aAAoB,EACpB,UAAU,EACV,WAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,CAAC,GACpF,aAAa,GAAG;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,gEAAgE;IAChE,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,mFAAmF;IACnF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;IACjD,mEAAmE;IACnE,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACrD,8CAA8C;IAC9C,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACb,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IAC9D;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,qBA4EF;AAED,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/blocks/cloudgrid-install.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AgentPrompt } from "./agent-prompt.js";
+import { Button } from "../ui/button.js";
+import { ChatAppIcon, DownloadIcon, GithubIcon, OpenLiveIcon, TerminalIcon, } from "./icons.js";
+import { INSTALL_FETCH_PROMPT, INSTALL_FOOTER, INSTALL_GROUPS, INSTALL_HEADING, INSTALL_METHODS, INSTALL_PRESETS, INSTALL_TOOLS, } from "./install-content.js";
+import { PageHeading } from "./page-heading.js";
+import { ToolLogo } from "./tool-logo.js";
+import { TOOL_MARKS } from "./tool-marks.js";
+import { ToolSetup, } from "./tool-setup.js";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * THE INSTALL PANEL, COMPLETE. Content and design both from this library (#266).
+ *
+ * `<CloudGridInstall />` with no props renders the whole thing: the heading, the
+ * method pills, the grouped tool strip, every pane, the "Not sure?" fetch prompt
+ * and the source footer. Nothing is fetched and nothing is passed in, because the
+ * content is `install-content.ts` and ships in the same package.
+ *
+ * Founder ruling, 2026-10-05: every install panel on every surface takes its
+ * content and its design from here. The Console's `/drop` page and onboarding
+ * step, and later the landing site, drop this in and choose a configuration.
+ *
+ * ## Configurations, not content props
+ *
+ * What a surface MAY choose is which part of the content is on screen: the
+ * tools, the methods, the defaults, and whether the fetch prompt and footer show.
+ * Pass a named `preset` (`INSTALL_PRESETS.onboarding`, `installToolPreset("cursor")`)
+ * and override any field of it with the same-named prop.
+ *
+ * What a surface may NOT choose is the words. There is no `title`, `sub`, `tools`
+ * array or step override, deliberately: a prop that replaces content is a second
+ * source of content, and two sources is how the old panel and the library came
+ * to say different things about the same setup.
+ *
+ * ## What a page still passes
+ *
+ * The things only the page can know. Which tool is selected (`value` /
+ * `onValueChange`: onboarding records it as `tool_selected`, in the snapshot's
+ * slugs), which method (`method` / `onMethodChange`), the heading's level and
+ * size for where it sits, and a Continue action when the panel is a step.
+ *
+ * ## Not a client module, on purpose
+ *
+ * Nothing here holds state; `ToolSetup` and `AgentPrompt` carry their own
+ * `"use client"`. So a React Server Component can render this with a preset, and
+ * the gallery, which is a server module, can call `installSetupTools` below
+ * rather than keeping a second copy of the mapping.
+ */
+// Every mark name the content uses is a real key in the vendor-mark set. The
+// content module spells them out so it can stay free of React types; this is the
+// compile-time half of that bargain.
+const MARKS = TOOL_MARKS;
+const ICONS = {
+    terminal: TerminalIcon,
+    chat: ChatAppIcon,
+    github: GithubIcon,
+    download: DownloadIcon,
+    external: OpenLiveIcon,
+};
+function Glyph({ icon, className }) {
+    const Mark = ICONS[icon];
+    return _jsx(Mark, { className: className });
+}
+/**
+ * Body runs to nodes. A bold run is a menu path or a folder and reads at medium
+ * weight in the ink colour; a code run is a command typed inline and reads in
+ * the mono face at the size around it. Both are tokens, so both flip per surface.
+ */
+function Body({ runs }) {
+    return (_jsx(_Fragment, { children: runs.map((run, i) => typeof run === "string" ? (_jsx(React.Fragment, { children: run }, i)) : "bold" in run ? (_jsx("b", { className: "font-medium text-ink", children: run.bold }, i)) : (_jsx("code", { "data-slot": "cloudgrid-install-code", className: "font-mono text-ink", children: run.code }, i))) }));
+}
+function toSetupStep(step) {
+    return {
+        ...(step.label ? { label: step.label } : {}),
+        title: step.title,
+        ...(step.body ? { body: _jsx(Body, { runs: step.body }) } : {}),
+        ...(step.prompt ? { prompt: step.prompt } : {}),
+        ...(step.code ? { code: step.code } : {}),
+        ...(step.link
+            ? {
+                link: {
+                    label: step.link.label,
+                    href: step.link.href,
+                    ...(step.link.icon ? { icon: _jsx(Glyph, { icon: step.link.icon }) } : {}),
+                    ...(step.link.primary ? { primary: true } : {}),
+                },
+            }
+            : {}),
+    };
+}
+/**
+ * The content's tools as `ToolSetup` takes them, in the order asked for, with
+ * every vendor mark and every body rendered.
+ *
+ * Exported for a page that composes `ToolSetup` itself, which is what the
+ * library gallery's `ToolSetup` specimens do. A method missing from `methods`
+ * is dropped from each tool, so a tool with nothing left leaves the strip.
+ *
+ * 15px marks, which is what the strip draws. A mark carries no size of its own,
+ * so every call site states one.
+ */
+export function installSetupTools(tools = INSTALL_TOOLS.map((t) => t.value), methods = INSTALL_METHODS.map((m) => m.value)) {
+    return tools.flatMap((value) => {
+        const tool = INSTALL_TOOLS.find((t) => t.value === value);
+        if (!tool)
+            return [];
+        const steps = {};
+        for (const method of methods) {
+            const pane = tool.steps[method];
+            if (pane?.length)
+                steps[method] = pane.map(toSetupStep);
+        }
+        if (Object.keys(steps).length === 0)
+            return [];
+        const { Mark, hex } = MARKS[tool.mark];
+        return [
+            {
+                value: tool.value,
+                label: tool.label,
+                group: tool.group,
+                mark: _jsx(ToolLogo, { name: tool.mark, hex: hex, mark: _jsx(Mark, {}), size: 15 }),
+                steps,
+            },
+        ];
+    });
+}
+/** The two runs, each drawn as its glyph and named by its words. */
+export function installSetupGroups() {
+    return INSTALL_GROUPS.map((group) => ({
+        value: group.value,
+        label: group.label,
+        icon: _jsx(Glyph, { icon: group.icon }),
+    }));
+}
+/**
+ * "Not sure? Copy this prompt and paste it to your AI agent." over the one
+ * command an agent can act on.
+ *
+ * The outline pill, as the Console drew it under the panel, so it reads the
+ * surface it sits on. `showIntro={false}` is the standalone pill, which is what
+ * the old `fetch-prompt` block was.
+ */
+function CloudGridFetchPrompt({ showIntro = true, ...props }) {
+    return (_jsx(AgentPrompt, { "data-part": "cloudgrid-fetch-prompt", variant: "outline", ...(showIntro ? { label: INSTALL_FETCH_PROMPT.intro } : {}), command: INSTALL_FETCH_PROMPT.command, copyLabel: "Copy fetch prompt", ...props }));
+}
+/**
+ * The source line: one sentence, then the two repositories.
+ *
+ * `text-body` and not `text-faint`: faint is large-text-legal only (#232), and
+ * this is 15px. Every colour is a token, so it flips on the panel and on ink with
+ * the rest of the block; a container that sets `data-cg-surface` still owes its
+ * own `text-ink` (rule 3).
+ */
+function CloudGridInstallFooter({ className, ...props }) {
+    return (_jsxs("footer", { "data-slot": "cloudgrid-install-footer", className: cn("flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-body-sm text-body", className), ...props, children: [_jsx("span", { children: INSTALL_FOOTER.note }), INSTALL_FOOTER.links.map((link) => (_jsxs("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", "data-slot": "cloudgrid-install-footer-link", className: "inline-flex items-center gap-1.5 text-body underline underline-offset-4 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: [link.icon ? _jsx(Glyph, { icon: link.icon, className: "size-4 shrink-0" }) : null, link.label] }, link.href)))] }));
+}
+/**
+ * Keep the caller's order and drop what does not exist, so a preset naming a
+ * method or tool this content does not have cannot put an empty tab on screen.
+ */
+function known(asked, all) {
+    return asked ? asked.filter((v) => all.includes(v)) : [...all];
+}
+function CloudGridInstall({ preset, tools, methods, defaultTool, defaultMethod, showFetchPrompt, showFooter, value, onValueChange, method, onMethodChange, level = 1, headingSize, continueLabel = null, onContinue, canContinue = true, className, ...props }) {
+    const base = { ...INSTALL_PRESETS.hub, ...preset };
+    const toolValues = known(tools ?? base.tools, INSTALL_TOOLS.map((t) => t.value));
+    const methodValues = known(methods ?? base.methods, INSTALL_METHODS.map((m) => m.value));
+    const withFetchPrompt = showFetchPrompt ?? base.showFetchPrompt ?? true;
+    const withFooter = showFooter ?? base.showFooter ?? true;
+    const setupTools = installSetupTools(toolValues, methodValues);
+    // A default the filter has removed is dropped rather than passed on. Handed
+    // through, `ToolSetup` would fall back to the first tab AND report that
+    // fallback, which would reach an analytics handler as a selection nobody made.
+    const askedTool = defaultTool ?? base.defaultTool;
+    const firstTool = setupTools.some((t) => t.value === askedTool) ? askedTool : undefined;
+    const askedMethod = defaultMethod ?? base.defaultMethod;
+    const firstMethod = askedMethod && methodValues.includes(askedMethod) ? askedMethod : undefined;
+    const setupMethods = INSTALL_METHODS.filter((m) => methodValues.includes(m.value))
+        // The caller's order, not the content's.
+        .sort((a, b) => methodValues.indexOf(a.value) - methodValues.indexOf(b.value));
+    return (_jsxs("div", { "data-slot": "cloudgrid-install", 
+        // `min-w-0` is load-bearing (#275). The fetch prompt's pill truncates its
+        // one line, and a truncated line still reports its FULL width as
+        // min-content. A page that puts this panel in a grid track or a flex row
+        // gives it an automatic minimum of that min-content, so at 390px the whole
+        // panel was 427px wide and ran off a phone's screen, Copy controls and
+        // all. Zero lets the host's track decide the width; the pill truncates
+        // inside it as designed.
+        className: cn("flex min-w-0 flex-col gap-6", className), ...props, children: [_jsx(ToolSetup, { title: INSTALL_HEADING.title, sub: INSTALL_HEADING.sub, level: level, ...(headingSize ? { headingSize } : {}), tools: setupTools, methods: setupMethods, groups: installSetupGroups(), ...(value !== undefined ? { value } : {}), ...(firstTool ? { defaultValue: firstTool } : {}), ...(onValueChange
+                    ? { onValueChange: (next) => onValueChange(next) }
+                    : {}), ...(method !== undefined ? { method } : {}), ...(firstMethod ? { defaultMethod: firstMethod } : {}), ...(onMethodChange
+                    ? { onMethodChange: (next) => onMethodChange(next) }
+                    : {}), 
+                // The panel's own action row sits under the fetch prompt and the footer,
+                // below, so the step's primary action is the last thing on it.
+                continueLabel: null }), withFetchPrompt ? _jsx(CloudGridFetchPrompt, {}) : null, withFooter ? _jsx(CloudGridInstallFooter, {}) : null, continueLabel !== null ? (_jsx("div", { "data-slot": "cloudgrid-install-actions", className: "flex flex-col items-start gap-4", children: _jsx(Button, { type: "button", size: "lg", "data-slot": "cloudgrid-install-continue", onClick: onContinue, disabled: !canContinue, children: continueLabel }) })) : null] }));
+}
+export { CloudGridFetchPrompt, CloudGridInstall, CloudGridInstallFooter };
+//# sourceMappingURL=cloudgrid-install.js.map

package/dist/blocks/cloudgrid-install.js.map

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

package/dist/blocks/command-field.d.ts

@@ -15,13 +15,44 @@ import * as React from "react";
  * that is a form control, it takes input, and a field the user cannot type into
  * should not be announced as one.
  *
- * ## The one line does not wrap, and that is deliberate
+ * ## A long value wraps, and the whole of it stays on screen (#275)
  *
- * A JSON blob or a long `npx` line is one token as far as the user is concerned,
- * and wrapping it inside a 40%-width column turns a copyable value into three
- * ragged lines that read like three commands. It scrolls horizontally instead,
- * with the scrollbar hidden the way `Tabs`'s pill strip hides its own: the value
- * is copied by the button, never read to the end by hand.
+ * It used to scroll. The reasoning was that a JSON blob is one token to the
+ * reader and three wrapped lines read as three commands, so the field scrolled
+ * sideways with its scrollbar hidden. Founder ruling 2026-10-06 reversed it: a
+ * value whose end is out of sight is a value nobody can check before pasting,
+ * and a hidden scrollbar means nothing on screen says there is an end to find.
+ *
+ * Two properties do the work, and both are needed.
+ *
+ *   `whitespace-pre-wrap`      keeps every space the command has (a JSON blob's
+ *                              indentation, a double space) and allows a break
+ *                              AT a space, so `codex mcp add cloudgrid -- npx`
+ *                              wraps between words.
+ *   `overflow-wrap: anywhere`  lets an unbroken token (a connector URL) break
+ *                              between any two characters, but only when it does
+ *                              not fit a line on its own. Unlike `break-word` it
+ *                              also counts those breaks when the browser works
+ *                              out the field's MIN-CONTENT width. That is the
+ *                              half that matters: with `whitespace-pre` or
+ *                              `break-word`, the min-content was the whole URL,
+ *                              and any ancestor sizing itself to fit its content
+ *                              grew to that width and ran out of its column.
+ *                              Not `break-all`, which breaks inside words that
+ *                              would have fitted after the next space.
+ *
+ * Written as an arbitrary property, not Tailwind's `wrap-anywhere`: that utility
+ * arrived in Tailwind 4.1, and a consumer on an earlier v4 would scan the class
+ * and emit nothing, which looks exactly like a working build.
+ *
+ * Wrapping is paint. The clipboard gets `command` itself, never the text as laid
+ * out, so a wrapped URL pastes with no break or space in it.
+ *
+ * The control aligns to the FIRST line, not to the middle of the block: on a
+ * three-line value a centred button floats beside nothing. The value's vertical
+ * padding is computed so that one line of mono sits centred on the 28px control
+ * (`Button` `size="sm"` is `h-7`), from the same two tokens `PromptBlock` builds
+ * its clip from, so a change to the mono ramp moves this with it.
  *
  * ## Copy feedback is announced, not merely shown
  *

package/dist/blocks/command-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-field.d.ts","sourceRoot":"","sources":["../../src/blocks/command-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,SAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IAC5C,OAAO,EAAE,MAAM,CAAA;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,qBAmEA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"command-field.d.ts","sourceRoot":"","sources":["../../src/blocks/command-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,SAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IAC5C,OAAO,EAAE,MAAM,CAAA;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,qBA0EA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/blocks/command-field.js

@@ -19,13 +19,44 @@ import { cn } from "../lib/cloudgrid-cn.js";
  * that is a form control, it takes input, and a field the user cannot type into
  * should not be announced as one.
  *
- * ## The one line does not wrap, and that is deliberate
+ * ## A long value wraps, and the whole of it stays on screen (#275)
  *
- * A JSON blob or a long `npx` line is one token as far as the user is concerned,
- * and wrapping it inside a 40%-width column turns a copyable value into three
- * ragged lines that read like three commands. It scrolls horizontally instead,
- * with the scrollbar hidden the way `Tabs`'s pill strip hides its own: the value
- * is copied by the button, never read to the end by hand.
+ * It used to scroll. The reasoning was that a JSON blob is one token to the
+ * reader and three wrapped lines read as three commands, so the field scrolled
+ * sideways with its scrollbar hidden. Founder ruling 2026-10-06 reversed it: a
+ * value whose end is out of sight is a value nobody can check before pasting,
+ * and a hidden scrollbar means nothing on screen says there is an end to find.
+ *
+ * Two properties do the work, and both are needed.
+ *
+ *   `whitespace-pre-wrap`      keeps every space the command has (a JSON blob's
+ *                              indentation, a double space) and allows a break
+ *                              AT a space, so `codex mcp add cloudgrid -- npx`
+ *                              wraps between words.
+ *   `overflow-wrap: anywhere`  lets an unbroken token (a connector URL) break
+ *                              between any two characters, but only when it does
+ *                              not fit a line on its own. Unlike `break-word` it
+ *                              also counts those breaks when the browser works
+ *                              out the field's MIN-CONTENT width. That is the
+ *                              half that matters: with `whitespace-pre` or
+ *                              `break-word`, the min-content was the whole URL,
+ *                              and any ancestor sizing itself to fit its content
+ *                              grew to that width and ran out of its column.
+ *                              Not `break-all`, which breaks inside words that
+ *                              would have fitted after the next space.
+ *
+ * Written as an arbitrary property, not Tailwind's `wrap-anywhere`: that utility
+ * arrived in Tailwind 4.1, and a consumer on an earlier v4 would scan the class
+ * and emit nothing, which looks exactly like a working build.
+ *
+ * Wrapping is paint. The clipboard gets `command` itself, never the text as laid
+ * out, so a wrapped URL pastes with no break or space in it.
+ *
+ * The control aligns to the FIRST line, not to the middle of the block: on a
+ * three-line value a centred button floats beside nothing. The value's vertical
+ * padding is computed so that one line of mono sits centred on the 28px control
+ * (`Button` `size="sm"` is `h-7`), from the same two tokens `PromptBlock` builds
+ * its clip from, so a change to the mono ramp moves this with it.
  *
  * ## Copy feedback is announced, not merely shown
  *
@@ -54,7 +85,12 @@ function CommandField({ command, copyLabel = "Copy", className, ...props }) {
         // becomes a near-white slab with white text in it. --cg-hover is the one
         // ground token declared in all three scopes. `PromptBlock`'s FIELD note
         // has the full version, including why it has no generated utility.
-        "flex items-center gap-2 rounded-xs border border-line bg-(--cg-hover) py-2 pr-2 pl-3", className), ...props, children: [_jsx("code", { "data-slot": "command-field-value", className: "min-w-0 flex-1 overflow-x-auto font-mono text-mono whitespace-pre text-ink [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: command }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: copy, "data-slot": "command-field-copy", "data-state": state, 
+        //
+        // `items-start`, not `items-center`: the control belongs to the first
+        // line of a wrapped value. See the header.
+        "flex items-start gap-2 rounded-xs border border-line bg-(--cg-hover) py-2 pr-2 pl-3", className), ...props, children: [_jsx("code", { "data-slot": "command-field-value", className: cn("min-w-0 flex-1 font-mono text-mono whitespace-pre-wrap text-ink [overflow-wrap:anywhere]", 
+                // One line of mono centred on the 28px control: (28px - line) / 2.
+                "py-[calc((1.75rem_-_var(--cg-mono-size)_*_var(--cg-mono-line))_/_2)]"), children: command }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: copy, "data-slot": "command-field-copy", "data-state": state, 
                 // `bg-transparent` is not cosmetic, and `CodeBlock` carries the same
                 // override with the same reasoning (#20): the outline variant sets
                 // `bg-background`, which maps to `--cg-surface-page` and is deliberately

package/dist/blocks/command-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-field.js","sourceRoot":"","sources":["../../src/blocks/command-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,SAAS,YAAY,CAAC,EACpB,OAAO,EACP,SAAS,GAAG,MAAM,EAClB,SAAS,EACT,GAAG,KAAK,EAKT;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgC,MAAM,CAAC,CAAA;IAC/E,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAA4C,SAAS,CAAC,CAAA;IAEhF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;IAE5D,KAAK,UAAU,IAAI;QACjB,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YAC5C,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC;QAAC,MAAM,CAAC;YACP,QAAQ,CAAC,SAAS,CAAC,CAAA;QACrB,CAAC;QACD,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAC3B,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;IAC1D,CAAC;IAED,OAAO,CACL,4BACY,eAAe,EACzB,SAAS,EAAE,EAAE;QACX,yEAAyE;QACzE,uEAAuE;QACvE,yEAAyE;QACzE,wEAAwE;QACxE,mEAAmE;QACnE,sFAAsF,EACtF,SAAS,CACV,KACG,KAAK,aAET,4BACY,qBAAqB,EAC/B,SAAS,EAAC,iIAAiI,YAE1I,OAAO,GACH,EAEP,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,IAAI,eACH,oBAAoB,gBAClB,KAAK;gBACjB,qEAAqE;gBACrE,mEAAmE;gBACnE,yEAAyE;gBACzE,qEAAqE;gBACrE,8BAA8B;gBAC9B,SAAS,EAAC,yBAAyB,gBAGvB,QAAQ,OAAO,mBAAmB,YAE7C,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GACrE,EAET,4BAAgB,QAAQ,EAAC,SAAS,EAAC,SAAS,YACzC,KAAK,KAAK,QAAQ;oBACjB,CAAC,CAAC,yBAAyB;oBAC3B,CAAC,CAAC,KAAK,KAAK,SAAS;wBACnB,CAAC,CAAC,8BAA8B;wBAChC,CAAC,CAAC,EAAE,GACH,IACH,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"command-field.js","sourceRoot":"","sources":["../../src/blocks/command-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,SAAS,YAAY,CAAC,EACpB,OAAO,EACP,SAAS,GAAG,MAAM,EAClB,SAAS,EACT,GAAG,KAAK,EAKT;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgC,MAAM,CAAC,CAAA;IAC/E,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAA4C,SAAS,CAAC,CAAA;IAEhF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;IAE5D,KAAK,UAAU,IAAI;QACjB,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YAC5C,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC;QAAC,MAAM,CAAC;YACP,QAAQ,CAAC,SAAS,CAAC,CAAA;QACrB,CAAC;QACD,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAC3B,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;IAC1D,CAAC;IAED,OAAO,CACL,4BACY,eAAe,EACzB,SAAS,EAAE,EAAE;QACX,yEAAyE;QACzE,uEAAuE;QACvE,yEAAyE;QACzE,wEAAwE;QACxE,mEAAmE;QACnE,EAAE;QACF,sEAAsE;QACtE,2CAA2C;QAC3C,qFAAqF,EACrF,SAAS,CACV,KACG,KAAK,aAET,4BACY,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CACX,0FAA0F;gBAC1F,mEAAmE;gBACnE,sEAAsE,CACvE,YAEA,OAAO,GACH,EAEP,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,IAAI,eACH,oBAAoB,gBAClB,KAAK;gBACjB,qEAAqE;gBACrE,mEAAmE;gBACnE,yEAAyE;gBACzE,qEAAqE;gBACrE,8BAA8B;gBAC9B,SAAS,EAAC,yBAAyB,gBAGvB,QAAQ,OAAO,mBAAmB,YAE7C,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GACrE,EAET,4BAAgB,QAAQ,EAAC,SAAS,EAAC,SAAS,YACzC,KAAK,KAAK,QAAQ;oBACjB,CAAC,CAAC,yBAAyB;oBAC3B,CAAC,CAAC,KAAK,KAAK,SAAS;wBACnB,CAAC,CAAC,8BAA8B;wBAChC,CAAC,CAAC,EAAE,GACH,IACH,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/blocks/empty-creations-previews.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The default thumbnails `EmptyCreations` fans out, left to right, as data URIs.
+ * The same bytes ship as files under `@cloudgrid-io/ui/brand/creations/*`.
+ */
+export declare const EMPTY_CREATIONS_PREVIEWS: readonly string[];
+//# sourceMappingURL=empty-creations-previews.d.ts.map

package/dist/blocks/empty-creations-previews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-creations-previews.d.ts","sourceRoot":"","sources":["../../src/blocks/empty-creations-previews.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,SAAS,MAAM,EASrD,CAAA"}