@cloudgrid-io/ui 0.0.1 → 0.1.0

package/README.md

@@ -0,0 +1,109 @@
+# @cloudgrid-io/ui
+
+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
+and carrying no hardcoded colour.
+
+## Install
+
+```bash
+npm install @cloudgrid-io/ui
+```
+
+The three font families come with it and are self-hosted, so there is no request to a font
+CDN in your critical path.
+
+## Use a component
+
+```tsx
+import { Button, Card, PricingTiers } from "@cloudgrid-io/ui"
+```
+
+Components are shipped compiled, one module per component, with type declarations. The 20
+that need it keep their `"use client"` directive, so a React Server Component app gets
+exactly the client boundaries the source declares.
+
+React is an **optional** peer dependency: take the stylesheets alone and nothing pulls in a
+component tree.
+
+## Import the CSS, in this order
+
+```css
+@import "tailwindcss";
+
+@import "@cloudgrid-io/ui/fonts.css";
+@import "@cloudgrid-io/ui/tokens.css";
+@import "@cloudgrid-io/ui/theme.css";
+@import "@cloudgrid-io/ui/shadcn.css";
+```
+
+The order matters, and getting it wrong fails quietly rather than loudly.
+
+- `theme.css` maps Tailwind utilities onto the tokens. Before `tokens.css` has run there is
+  nothing to map, so every utility resolves to nothing and the page renders unstyled
+  instead of erroring.
+- `shadcn.css` must come after whatever `:root` your own `shadcn init` wrote, because it
+  overrides those values. Put it earlier and the stock grey palette wins.
+
+Not using shadcn: skip the last line. Not using Tailwind: `tokens.css` alone gives you every
+value as a custom property.
+
+## Point Tailwind at the package
+
+Tailwind v4 ignores `node_modules` when it scans for classes, so utilities used only inside
+a component are never generated:
+
+```css
+@source "../node_modules/@cloudgrid-io/ui/dist";
+```
+
+Adjust the path to your layout. **Skipping this fails quietly** — the build succeeds, the
+page renders, and the components come out unstyled.
+
+## Surfaces flip
+
+Put `data-cg-surface` on a container and every semantic token inside it resolves to its
+on-surface value. Borders, backgrounds, focus rings and component internals follow, with no
+`dark:` variants and no second stylesheet.
+
+```html
+<div data-cg-surface="panel" class="bg-panel text-ink">
+  <!-- everything in here is now on brand purple -->
+</div>
+
+<div data-cg-surface="ink" class="bg-code text-ink">
+  <!-- and everything in here is on near-black -->
+</div>
+```
+
+Three surfaces: the default white page, `panel` on brand purple, and `ink` on near-black.
+
+**Text is the exception.** Children inherit a colour their ancestor already resolved, so a
+container that sets `data-cg-surface` must also declare a token-based text colour — that is
+what `text-ink` is doing above. Borders and backgrounds flip on their own. Text does not.
+
+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.
+
+## Entry points
+
+| | |
+|---|---|
+| `@cloudgrid-io/ui/tokens.css` | every value as a CSS custom property |
+| `@cloudgrid-io/ui/theme.css` | maps Tailwind utilities onto the tokens |
+| `@cloudgrid-io/ui/shadcn.css` | maps shadcn's variables onto the tokens |
+| `@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 |
+
+The JSON sets under `tokens/` are DTCG and are the source the CSS is compiled from.
+
+## Versioning
+
+Semver. Token value changes are minor; removals are major.
+
+## Licence
+
+See the repository.

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+/**
+ * The agent one-liner as an artifact: the sentence you hand to an agent, dressed
+ * as the terminal line it becomes and copyable in one press.
+ *
+ * Ported from v0's `site/AgentPrompt`. Ink pill, mono text behind a prompt mark, a
+ * caret, one copy button. Inside a purple panel the ink pill sits on the stage like
+ * the brand's own prompt surfaces.
+ *
+ * ## The caret uses `motion-safe:`, not a global rule
+ *
+ * v0's caret "stops under reduced motion via the global blanket rule" — a
+ * `prefers-reduced-motion` block in the site's `global.css`. **This repo has no
+ * such rule**, and adding one would not help: `globals.css` is not shipped to
+ * consumers, so a component relying on it animates against the user's stated
+ * preference in every app that pulls it. Same shape as the leading and the merge
+ * config before it. `motion-safe:` is per-utility and travels with the file.
+ *
+ * ## Copy feedback is announced, not just shown
+ *
+ * v0 flips the button's own text. That is invisible to a screen reader, which has
+ * already read the button and has no reason to read it again. The label still
+ * flips, and the result is also written to a polite live region, so the
+ * confirmation reaches someone who cannot see the button change.
+ *
+ * The failure path is honest rather than silent: `navigator.clipboard` rejects on
+ * insecure origins and without permission, and saying "copy blocked" beats a button
+ * that appears to do nothing.
+ */
+declare function AgentPrompt({ command, label, copyLabel, className, ...props }: Omit<React.ComponentProps<"div">, "ref"> & {
+    command: string;
+    /** Small lead-in above the pill, e.g. "Working with an agent? One line:" */
+    label?: string;
+    copyLabel?: string;
+}): React.JSX.Element;
+export { AgentPrompt };
+//# sourceMappingURL=agent-prompt.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agent-prompt.d.ts","sourceRoot":"","sources":["../../src/blocks/agent-prompt.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,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,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,qBAuDA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/agent-prompt.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * The agent one-liner as an artifact: the sentence you hand to an agent, dressed
+ * as the terminal line it becomes and copyable in one press.
+ *
+ * Ported from v0's `site/AgentPrompt`. Ink pill, mono text behind a prompt mark, a
+ * caret, one copy button. Inside a purple panel the ink pill sits on the stage like
+ * the brand's own prompt surfaces.
+ *
+ * ## The caret uses `motion-safe:`, not a global rule
+ *
+ * v0's caret "stops under reduced motion via the global blanket rule" — a
+ * `prefers-reduced-motion` block in the site's `global.css`. **This repo has no
+ * such rule**, and adding one would not help: `globals.css` is not shipped to
+ * consumers, so a component relying on it animates against the user's stated
+ * preference in every app that pulls it. Same shape as the leading and the merge
+ * config before it. `motion-safe:` is per-utility and travels with the file.
+ *
+ * ## Copy feedback is announced, not just shown
+ *
+ * v0 flips the button's own text. That is invisible to a screen reader, which has
+ * already read the button and has no reason to read it again. The label still
+ * flips, and the result is also written to a polite live region, so the
+ * confirmation reaches someone who cannot see the button change.
+ *
+ * The failure path is honest rather than silent: `navigator.clipboard` rejects on
+ * insecure origins and without permission, and saying "copy blocked" beats a button
+ * that appears to do nothing.
+ */
+function AgentPrompt({ command, label, copyLabel = "Copy", className, ...props }) {
+    const [feedback, setFeedback] = React.useState(null);
+    const timer = React.useRef(undefined);
+    // Cleared on unmount, or a state update fires against a component that is gone
+    // when someone navigates within the 1600ms window.
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(command);
+            setFeedback("copied ✓");
+        }
+        catch {
+            setFeedback("copy blocked by browser");
+        }
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setFeedback(null), 1600);
+    }
+    return (_jsxs("div", { "data-slot": "agent-prompt", className: cn("flex flex-col gap-2", className), ...props, children: [label ? _jsx("p", { className: "m-0 text-body-sm text-body", children: label }) : null, _jsxs("div", { "data-cg-surface": "ink", className: "flex items-center gap-3 rounded-pill bg-code px-4 py-2.5 text-ink", children: [_jsx("span", { "aria-hidden": "true", className: "font-mono text-mono text-faint", children: ">" }), _jsxs("code", { className: "flex min-w-0 flex-1 items-center gap-1 font-mono text-mono break-all", children: [command, _jsx("span", { "aria-hidden": "true", className: "inline-block h-[1.1em] w-[0.5ch] shrink-0 bg-ink motion-safe:animate-pulse" })] }), _jsx("button", { type: "button", onClick: copy, className: "shrink-0 rounded-md px-2 py-1 font-mono text-caption text-body transition-colors hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: feedback ?? copyLabel })] }), _jsx("span", { "aria-live": "polite", className: "sr-only", children: feedback })] }));
+}
+export { AgentPrompt };
+//# sourceMappingURL=agent-prompt.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agent-prompt.js","sourceRoot":"","sources":["../../src/blocks/agent-prompt.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,SAAS,GAAG,MAAM,EAClB,SAAS,EACT,GAAG,KAAK,EAMT;IACC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAA;IACnE,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAA4C,SAAS,CAAC,CAAA;IAEhF,+EAA+E;IAC/E,mDAAmD;IACnD,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,WAAW,CAAC,UAAU,CAAC,CAAA;QACzB,CAAC;QAAC,MAAM,CAAC;YACP,WAAW,CAAC,yBAAyB,CAAC,CAAA;QACxC,CAAC;QACD,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAC3B,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;IAC3D,CAAC;IAED,OAAO,CACL,4BAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAAM,KAAK,aACrF,KAAK,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,4BAA4B,YAAE,KAAK,GAAK,CAAC,CAAC,CAAC,IAAI,EAErE,kCACkB,KAAK,EACrB,SAAS,EAAC,mEAAmE,aAE7E,8BAAkB,MAAM,EAAC,SAAS,EAAC,gCAAgC,kBAE5D,EAEP,gBAAM,SAAS,EAAC,sEAAsE,aACnF,OAAO,EACR,8BACc,MAAM,EAClB,SAAS,EAAC,4EAA4E,GACtF,IACG,EAEP,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,EACb,SAAS,EAAC,mLAAmL,YAE5L,QAAQ,IAAI,SAAS,GACf,IACL,EAIN,4BAAgB,QAAQ,EAAC,SAAS,EAAC,SAAS,YACzC,QAAQ,GACJ,IACH,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/blocks/card-grid.d.ts

@@ -0,0 +1,38 @@
+/**
+ * A grid of link cards. Ported from v0's `core/CardGrid`.
+ *
+ * v0's version reimplemented the card chrome, because it depended on a global
+ * `.card` recipe in the site's stylesheet. This composes **our** `card` instead,
+ * which is what #7 meant by rebuilding rather than copying: the cards inherit the
+ * token wiring, the surface flips and the focus ring for free, and there is one
+ * card in the library rather than two that drift.
+ *
+ * The `band` and `container` wrappers are dropped as everywhere else: page layout
+ * belongs to the page.
+ *
+ * v0's grid was `repeat(3, 1fr)` flat, which is three unreadable columns on a
+ * phone. Made responsive here, because a registry component has to stand on its
+ * own in a consumer's layout rather than rely on the site's media queries.
+ */
+declare const COLUMNS: {
+    readonly 2: "sm:grid-cols-2";
+    readonly 3: "sm:grid-cols-2 lg:grid-cols-3";
+};
+type CardGridCard = {
+    /** A short glyph or two letters set in mono. Decoration, so aria-hidden. */
+    icon?: string;
+    title: string;
+    body: string;
+    link?: {
+        href: string;
+        label: string;
+    };
+};
+declare function CardGrid({ title, columns, cards, className, ...props }: Omit<React.ComponentProps<"section">, "ref"> & {
+    title?: string;
+    columns?: keyof typeof COLUMNS;
+    cards: CardGridCard[];
+}): import("react").JSX.Element;
+export { CardGrid };
+export type { CardGridCard };
+//# sourceMappingURL=card-grid.d.ts.map

package/dist/blocks/card-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-grid.d.ts","sourceRoot":"","sources":["../../src/blocks/card-grid.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,OAAO;;;CAGH,CAAA;AAEV,KAAK,YAAY,GAAG;IAClB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;CACvC,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,OAAW,EACX,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC9B,KAAK,EAAE,YAAY,EAAE,CAAA;CACtB,+BAmCA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AACnB,YAAY,EAAE,YAAY,EAAE,CAAA"}

package/dist/blocks/card-grid.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * A grid of link cards. Ported from v0's `core/CardGrid`.
+ *
+ * v0's version reimplemented the card chrome, because it depended on a global
+ * `.card` recipe in the site's stylesheet. This composes **our** `card` instead,
+ * which is what #7 meant by rebuilding rather than copying: the cards inherit the
+ * token wiring, the surface flips and the focus ring for free, and there is one
+ * card in the library rather than two that drift.
+ *
+ * The `band` and `container` wrappers are dropped as everywhere else: page layout
+ * belongs to the page.
+ *
+ * v0's grid was `repeat(3, 1fr)` flat, which is three unreadable columns on a
+ * phone. Made responsive here, because a registry component has to stand on its
+ * own in a consumer's layout rather than rely on the site's media queries.
+ */
+const COLUMNS = {
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-2 lg:grid-cols-3",
+};
+function CardGrid({ title, columns = 3, cards, className, ...props }) {
+    return (_jsxs("section", { "data-slot": "card-grid", className: cn("flex flex-col gap-6", className), ...props, children: [title ? _jsx("h2", { className: "text-heading-lg font-medium text-ink", children: title }) : null, _jsx("div", { className: cn("grid grid-cols-1 gap-5", COLUMNS[columns]), children: cards.map((card) => (
+                // Keyed on the title rather than the index: an index key makes React
+                // reuse the wrong card when the list is filtered or reordered, which is
+                // the sort of thing that looks like a caching bug later.
+                _jsxs(Card, { children: [_jsxs(CardHeader, { children: [card.icon ? (_jsx("span", { "aria-hidden": "true", className: "font-mono text-mono text-(--cg-text-accent)", children: card.icon })) : null, _jsx(CardTitle, { className: "text-heading-md", children: card.title }), _jsx(CardDescription, { children: card.body })] }), card.link ? (_jsx("a", { href: card.link.href, className: "mx-6 -mt-2 w-fit font-mono text-mono text-ink underline-offset-4 hover:text-(--cg-text-accent) hover:underline focus-visible:rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: card.link.label })) : null] }, card.title))) })] }));
+}
+export { CardGrid };
+//# sourceMappingURL=card-grid.js.map

package/dist/blocks/card-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-grid.js","sourceRoot":"","sources":["../../src/blocks/card-grid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,GAAG;IACd,CAAC,EAAE,gBAAgB;IACnB,CAAC,EAAE,+BAA+B;CAC1B,CAAA;AAUV,SAAS,QAAQ,CAAC,EAChB,KAAK,EACL,OAAO,GAAG,CAAC,EACX,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EAKT;IACC,OAAO,CACL,gCAAmB,WAAW,EAAC,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAAM,KAAK,aACtF,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAC,sCAAsC,YAAE,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EACjF,cAAK,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,YAC3D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;gBACnB,qEAAqE;gBACrE,wEAAwE;gBACxE,yDAAyD;gBACzD,MAAC,IAAI,eACH,MAAC,UAAU,eACR,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,8BACc,MAAM,EAClB,SAAS,EAAC,6CAA6C,YAEtD,IAAI,CAAC,IAAI,GACL,CACR,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,SAAS,IAAC,SAAS,EAAC,iBAAiB,YAAE,IAAI,CAAC,KAAK,GAAa,EAC/D,KAAC,eAAe,cAAE,IAAI,CAAC,IAAI,GAAmB,IACnC,EACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,YACE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACpB,SAAS,EAAC,2NAA2N,YAEpO,IAAI,CAAC,IAAI,CAAC,KAAK,GACd,CACL,CAAC,CAAC,CAAC,IAAI,KApBC,IAAI,CAAC,KAAK,CAqBd,CACR,CAAC,GACE,IACE,CACX,CAAA;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/blocks/compare-table.d.ts

@@ -0,0 +1,13 @@
+type CompareRow = {
+    q: string;
+    a: string;
+};
+declare function CompareTable({ rival, rivalLogo, rows, className, ...props }: Omit<React.ComponentProps<"div">, "ref"> & {
+    rival: string;
+    /** The rival's mark, if you have one to show beside its name. */
+    rivalLogo?: React.ReactNode;
+    rows: CompareRow[];
+}): import("react").JSX.Element;
+export { CompareTable };
+export type { CompareRow };
+//# sourceMappingURL=compare-table.d.ts.map

package/dist/blocks/compare-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-table.d.ts","sourceRoot":"","sources":["../../src/blocks/compare-table.tsx"],"names":[],"mappings":"AAqCA,KAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAe1C,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,iEAAiE;IACjE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,IAAI,EAAE,UAAU,EAAE,CAAA;CACnB,+BA+DA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,UAAU,EAAE,CAAA"}

package/dist/blocks/compare-table.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleCheck, CircleX } from "lucide-react";
+import { Logo } from "./logo.js";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * A check/X feature matrix for a compare page. Three columns: the feature line,
+ * the rival, CloudGrid. Ported from v0's `site/CompareTable`.
+ *
+ * The CloudGrid column is lifted by an accent ring, the way a pricing table lifts
+ * its recommended plan.
+ *
+ * ## The honesty rule is load-bearing, keep it
+ *
+ * A row's `a` value must be `both`, `us`, `them` or `neither`, and anything else
+ * **throws during render**. Under SSG that is a build failure, which is the point:
+ * a typo must break the build rather than quietly render a wrong claim about a
+ * competitor. v0's canon puts it plainly, and it is worth repeating here because
+ * the temptation is real: rivals get their checks, and a matrix of straight
+ * X-them/check-us rows reads as marketing noise and is worse than no table.
+ *
+ * ## The rival's mark is a slot
+ *
+ * v0 rendered `<ToolLogo name={rival} />`. That component is held pending a
+ * trademark question (#47), and the coupling was wrong anyway: which mark
+ * represents a rival is the caller's call, not this component's. Pass a
+ * `rivalLogo` if you have one. Without it the name alone reads fine.
+ *
+ * ## Marks are lucide, and they carry text
+ *
+ * Phosphor inlined strings become `CircleCheck` / `CircleX`, as elsewhere. The
+ * icons are `aria-hidden` and each cell carries visually-hidden "Included" or
+ * "Not included", so a screen reader hears the claim rather than nothing, and so
+ * does anything reading the markup.
+ */
+const VALID = ["both", "us", "them", "neither"];
+function Mark({ yes }) {
+    const Icon = yes ? CircleCheck : CircleX;
+    return (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", className: cn("inline-block size-[22px]", yes ? "text-brand" : "text-faint") }), _jsx("span", { className: "sr-only", children: yes ? "Included" : "Not included" })] }));
+}
+function CompareTable({ rival, rivalLogo, rows, className, ...props }) {
+    const parsed = rows.map((pair) => {
+        const who = pair.a.trim().toLowerCase();
+        if (!VALID.includes(who)) {
+            throw new Error(`CompareTable: matrix row "${pair.q}" has a="${pair.a}". ` +
+                `Allowed values: ${VALID.join(", ")}.`);
+        }
+        return { label: pair.q, us: who === "both" || who === "us", them: who === "both" || who === "them" };
+    });
+    return (_jsx("div", { "data-slot": "compare-table", 
+        // The table scrolls inside its own box rather than pushing the page sideways
+        // on a narrow screen.
+        className: cn("w-full overflow-x-auto", className), ...props, children: _jsxs("table", { className: "w-full border-collapse text-body-sm", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { "aria-hidden": "true" }), _jsx("th", { scope: "col", className: "p-3 text-left font-medium text-ink", children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [rivalLogo, rival] }) }), _jsx("th", { scope: "col", className: "rounded-t-xl border border-b-0 border-line-accent bg-brand-tint p-3 text-left font-medium text-ink", children: _jsx(Logo, { height: 18, label: "CloudGrid" }) })] }) }), _jsx("tbody", { children: parsed.map((row, i) => (_jsxs("tr", { className: i % 2 === 0 ? "bg-subtle" : undefined, children: [_jsx("th", { scope: "row", className: "p-3 text-left font-normal text-body", children: row.label }), _jsx("td", { className: "p-3", children: _jsx(Mark, { yes: row.them }) }), _jsx("td", { className: cn("border-x border-line-accent bg-brand-tint p-3", i === parsed.length - 1 && "rounded-b-xl border-b"), children: _jsx(Mark, { yes: row.us }) })] }, row.label))) })] }) }));
+}
+export { CompareTable };
+//# sourceMappingURL=compare-table.js.map

package/dist/blocks/compare-table.js.map

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

package/dist/blocks/creation-tile.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+/**
+ * One creation on the grid. Ported from v0's `site/CreationTile`.
+ *
+ * The tile shows the creation's real screen: a poster, with a silent loop played
+ * on hover. Server-rendered HTML is the poster alone, which is the honest state.
+ *
+ * The approved copy fixed the anatomy: thumbnail and name, and deliberately **no**
+ * maker caption and no one-liner. The grid is the content, and a caption under
+ * every tile turns a wall of work into a list of credits.
+ *
+ * Both actions are always in the markup rather than injected on hover: a crawler
+ * that never fires a pointer event still sees "Open it", and a touch device has no
+ * hover to give.
+ *
+ * ## Three changes from v0
+ *
+ * **The loop respects `prefers-reduced-motion`.** v0 plays on pointer enter
+ * unconditionally. Autoplaying video is close to the centre of what that setting
+ * exists for, and the poster is already the honest fallback, so the check costs
+ * nothing. Read at play time rather than at mount, so the setting can change.
+ *
+ * **`pickUpHref` is a required prop.** v0 hardcodes `/plug?door=drop`, a route on
+ * the CloudGrid site. A registry component cannot know a consumer's routes and one
+ * that guesses ships a dead link. v0's own comment notes that no pick-up flow
+ * exists yet and the destination is a placeholder, which is more reason for the
+ * caller to own it.
+ *
+ * **`data-cta` and `data-tilt` are dropped**, as elsewhere: the site's analytics
+ * and motion vocabulary, not a registry component's API. Both still work through
+ * `...props` on the wrapper.
+ *
+ * `CreationGrid` ships with it because this renders an `<li>`, and an `<li>`
+ * outside a list is invalid markup that nothing warns you about.
+ */
+type Creation = {
+    name: string;
+    maker: string;
+    species: string;
+    url: string;
+    image?: string;
+    video?: string;
+    pickedUp: boolean;
+};
+declare function CreationGrid({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function CreationTile({ creation, pickUpHref, openLabel, pickUpLabel, eager, className, ...props }: Omit<React.ComponentProps<"li">, "ref"> & {
+    creation: Creation;
+    /** Where "pick it up" goes. Required: this component cannot know your routes. */
+    pickUpHref: string;
+    openLabel?: string;
+    pickUpLabel?: string;
+    /** Loads the poster eagerly. For the first row of a field. */
+    eager?: boolean;
+}): React.JSX.Element;
+export { CreationTile, CreationGrid };
+export type { Creation };
+//# sourceMappingURL=creation-tile.d.ts.map

package/dist/blocks/creation-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"creation-tile.d.ts","sourceRoot":"","sources":["../../src/blocks/creation-tile.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAYxE;AAED,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,UAAU,EACV,SAAqB,EACrB,WAA0B,EAC1B,KAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG;IAC3C,QAAQ,EAAE,QAAQ,CAAA;IAClB,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,qBA4FA;AAED,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AACrC,YAAY,EAAE,QAAQ,EAAE,CAAA"}

package/dist/blocks/creation-tile.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cloudgrid-cn.js";
+function CreationGrid({ className, ...props }) {
+    return (_jsx("ul", { role: "list", "data-slot": "creation-grid", className: cn("m-0 grid list-none grid-cols-1 gap-5 p-0 sm:grid-cols-2 lg:grid-cols-3", className), ...props }));
+}
+function CreationTile({ creation, pickUpHref, openLabel = "Open it", pickUpLabel = "Pick it up", eager = false, className, ...props }) {
+    const loop = React.useRef(null);
+    function play() {
+        // Checked at play time, not at mount: someone can change the setting while
+        // the page is open, and a value captured in an effect would be stale.
+        if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)
+            return;
+        loop.current?.play().catch(() => {
+            // Autoplay refusals leave the poster showing, which is the honest state.
+        });
+    }
+    function rest() {
+        const video = loop.current;
+        if (!video)
+            return;
+        video.pause();
+        video.currentTime = 0;
+    }
+    return (_jsxs("li", { "data-slot": "creation-tile", onPointerEnter: play, onPointerLeave: rest, className: cn("group/tile flex flex-col gap-2", className), ...props, children: [_jsxs("span", { className: "relative block overflow-hidden rounded-xl border border-hairline bg-subtle", children: [creation.image ? (_jsxs(_Fragment, { children: [_jsx("img", { src: creation.image, 
+                                // The alt says what it is and whose it is, because a wall of these
+                                // is unusable if every image announces only a name.
+                                alt: `${creation.name}, a ${creation.species} by ${creation.maker}, live on the grid`, loading: eager ? "eager" : "lazy", decoding: "async", className: "block aspect-video w-full object-cover" }), creation.video ? (_jsx("video", { ref: loop, muted: true, loop: true, playsInline: true, preload: "none", poster: creation.image, "aria-hidden": "true", className: "absolute inset-0 block size-full object-cover opacity-0 transition-opacity group-hover/tile:opacity-100", children: _jsx("source", { src: creation.video }) })) : null] })) : (_jsx("span", { "aria-hidden": "true", className: "flex aspect-video items-center justify-center font-mono text-mono text-faint", children: creation.species })), _jsxs("span", { className: "absolute inset-x-0 bottom-0 flex gap-2 p-2 opacity-0 transition-opacity group-hover/tile:opacity-100 focus-within:opacity-100", children: [_jsxs("a", { href: creation.url, className: "rounded-md bg-code px-2 py-1 font-mono text-caption text-inverse no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: [openLabel, _jsxs("span", { className: "sr-only", children: [": ", creation.name] })] }), _jsxs("a", { href: pickUpHref, className: "rounded-md bg-code px-2 py-1 font-mono text-caption text-inverse no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: [pickUpLabel, _jsxs("span", { className: "sr-only", children: [": ", creation.name] })] })] }), creation.pickedUp ? (_jsx("span", { className: "absolute top-2 right-2 rounded-pill bg-lime px-2 py-0.5 font-mono text-caption text-on-accent", children: "picked up" })) : null] }), _jsx("span", { className: "text-body-sm font-medium text-ink", children: creation.name })] }));
+}
+export { CreationTile, CreationGrid };
+//# sourceMappingURL=creation-tile.js.map

package/dist/blocks/creation-tile.js.map

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

package/dist/blocks/cta-banner.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A closing call to action: optional line of text, and an action.
+ *
+ * Ported from v0's `core/CtaBanner`, with the site coupling removed. v0's version
+ * rendered its own Button and defaulted the destination to `/plug?door=<door>`,
+ * which is a route on the CloudGrid site. A registry component cannot know a
+ * consumer's routes, and one that guesses produces a dead link in someone else's
+ * app, so the `door` and `href` props are gone and the action is a slot. The
+ * consumer passes their own Button, Link, or form.
+ *
+ * v0's `band band-alt` page wrapper is dropped for the same reason as Quote:
+ * page layout belongs to the page. What is kept is the surface, because that is
+ * the component's own look rather than the page's.
+ *
+ * `data-cg-surface="panel"` puts this on the brand purple. Per rule 3 the text
+ * colour has to be declared here: children inherit an already-resolved colour, so
+ * `text-ink` is what makes the flip reach the text rather than leaving it dark on
+ * purple.
+ *
+ * A `default` Button is correct in here. It was not until #41: primary rendered
+ * the brand purple in every scope, so on the purple panel the button and its
+ * ground were the same colour and the control had no shape. Primary is lime on
+ * both dark brand surfaces now, measured at 3.79:1 against the panel.
+ */
+declare function CtaBanner({ text, action, className, children, ...props }: React.ComponentProps<"section"> & {
+    text?: string;
+    /** The action. A Button, a link, whatever the consumer routes with. */
+    action?: React.ReactNode;
+}): import("react").JSX.Element;
+export { CtaBanner };
+//# sourceMappingURL=cta-banner.d.ts.map

package/dist/blocks/cta-banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta-banner.d.ts","sourceRoot":"","sources":["../../src/blocks/cta-banner.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,+BAkBA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/blocks/cta-banner.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * A closing call to action: optional line of text, and an action.
+ *
+ * Ported from v0's `core/CtaBanner`, with the site coupling removed. v0's version
+ * rendered its own Button and defaulted the destination to `/plug?door=<door>`,
+ * which is a route on the CloudGrid site. A registry component cannot know a
+ * consumer's routes, and one that guesses produces a dead link in someone else's
+ * app, so the `door` and `href` props are gone and the action is a slot. The
+ * consumer passes their own Button, Link, or form.
+ *
+ * v0's `band band-alt` page wrapper is dropped for the same reason as Quote:
+ * page layout belongs to the page. What is kept is the surface, because that is
+ * the component's own look rather than the page's.
+ *
+ * `data-cg-surface="panel"` puts this on the brand purple. Per rule 3 the text
+ * colour has to be declared here: children inherit an already-resolved colour, so
+ * `text-ink` is what makes the flip reach the text rather than leaving it dark on
+ * purple.
+ *
+ * A `default` Button is correct in here. It was not until #41: primary rendered
+ * the brand purple in every scope, so on the purple panel the button and its
+ * ground were the same colour and the control had no shape. Primary is lime on
+ * both dark brand surfaces now, measured at 3.79:1 against the panel.
+ */
+function CtaBanner({ text, action, className, children, ...props }) {
+    return (_jsxs("section", { "data-slot": "cta-banner", "data-cg-surface": "panel", className: cn("flex flex-col items-start gap-6 rounded-2xl bg-panel px-6 py-10 text-ink", "sm:flex-row sm:items-center sm:justify-between", className), ...props, children: [text?.trim() ? (_jsx("p", { className: "max-w-(--cg-measure) text-body-lg text-balance", children: text })) : null, action ?? children] }));
+}
+export { CtaBanner };
+//# sourceMappingURL=cta-banner.js.map

package/dist/blocks/cta-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta-banner.js","sourceRoot":"","sources":["../../src/blocks/cta-banner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAS,SAAS,CAAC,EACjB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAKT;IACC,OAAO,CACL,gCACY,YAAY,qBACN,OAAO,EACvB,SAAS,EAAE,EAAE,CACX,0EAA0E,EAC1E,gDAAgD,EAChD,SAAS,CACV,KACG,KAAK,aAER,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CACd,YAAG,SAAS,EAAC,gDAAgD,YAAE,IAAI,GAAK,CACzE,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,IAAI,QAAQ,IACX,CACX,CAAA;AACH,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/blocks/drop-zone.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+/**
+ * The drop target for the first of the three doors: drag something onto the grid.
+ *
+ * Built from scratch rather than on a Base UI primitive because there is not one.
+ * `@base-ui/react@1.7.0` exports 82 subpaths and none of them is file, drop or
+ * drag shaped, so this is the same category as PlugMethod.
+ *
+ * ## The keyboard path is a real file input
+ *
+ * The visible dashed area is decoration. Underneath is an actual
+ * `<input type="file">`, visually hidden but focusable, wrapped in a `<label>`.
+ * Tab order, Enter, Space, the native picker and the screen-reader announcement
+ * all come from the browser and cannot drift out of sync with the visuals.
+ *
+ * Drag and drop is an ENHANCEMENT layered on top, which is the correct shape:
+ * dragging is a pointer gesture with no keyboard equivalent, so it can never be
+ * the only way in. A `div` with `role="button"` and hand-rolled key handlers
+ * would have been the other option, and would have owned three bugs this does
+ * not have.
+ *
+ * ## Fills inherit rather than name a surface
+ *
+ * `bg-current/5` instead of `bg-accent`. `--cg-surface-subtle` is declared only
+ * in the base scope, so `bg-accent` paints lavender #f2f1f7 inside a purple
+ * panel. `currentColor` is the already-flipped text colour, so the wash is 5%
+ * ink on white and 5% white on both dark surfaces. Borders can safely use
+ * `border-ring`, which does flip per scope: purple at :root, white on panel,
+ * lime on ink.
+ */
+type DropZoneProps = {
+    /** Called with what survived the `accept` filter. */
+    onDrop?: (items: File[]) => void;
+    /** Called with what did not, so a caller can say why nothing happened. */
+    onReject?: (items: File[]) => void;
+    /** Same syntax as the native attribute. Enforced on BOTH paths, see below. */
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** The headline. Defaults to the grid's own wording. */
+    title?: React.ReactNode;
+    /** One line under it. */
+    hint?: React.ReactNode;
+    /** The line inside the target area. */
+    prompt?: React.ReactNode;
+    name?: string;
+    id?: string;
+    className?: string;
+};
+declare function DropZone({ onDrop, onReject, accept, multiple, disabled, invalid, title, hint, prompt, name, id, className, }: DropZoneProps): React.JSX.Element;
+export { DropZone };
+export type { DropZoneProps };
+//# sourceMappingURL=drop-zone.d.ts.map

package/dist/blocks/drop-zone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-zone.d.ts","sourceRoot":"","sources":["../../src/blocks/drop-zone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,KAAK,aAAa,GAAG;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAClC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,yBAAyB;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,uCAAuC;IACvC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAoBD,iBAAS,QAAQ,CAAC,EAChB,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,KAAgC,EAChC,IAAgC,EAChC,MAA2C,EAC3C,IAAI,EACJ,EAAE,EACF,SAAS,GACV,EAAE,aAAa,qBA8Kf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AACnB,YAAY,EAAE,aAAa,EAAE,CAAA"}