# Rapid Design System CDN bundle

A side-effecting, self-contained IIFE bundle of `@genesislcap/rapid-design-system`. One `<script>` tag, no build step — drop into Claude Artifacts, CodePen, JSFiddle, plain HTML files, or any other sandboxed environment that has no module resolution.

> **Not for production apps.** Real applications should depend on `@genesislcap/rapid-design-system` directly and follow the standard `provideDesignSystem().register(...)` pattern. This package inlines every dependency, auto-registers everything against `document.body`, and trades bundle size for zero-config startup.

## Usage

```html
<!doctype html>
<html>
  <body>
    <rapid-button appearance="accent">Click me</rapid-button>
    <rapid-card>
      <h3>Hello</h3>
      <p>Rapid components, no setup.</p>
    </rapid-card>

    <script src="https://cdn.jsdelivr.net/npm/@genesislcap/foundation-rapid-cdn"></script>
  </body>
</html>
```

On load the bundle:

1. Registers every component in `baseComponents` (button, card, dialog, data-grid, …).
2. Wraps `document.body`'s children in a `<rapid-design-system-provider with-defaults>` so design tokens apply.
3. Exposes `window.rapid` for advanced use:
   - `provideDesignSystem`, `baseComponents`, `registerRapidDesignSystem` — the registration primitives.
   - `tokens` — the most-overridden design tokens (`baseLayerLuminance`, semantic colors, `designUnit`, `density`, `bodyFont`, …) so artifact code can call `window.rapid.tokens.baseLayerLuminance.withDefault(window.rapid.StandardLuminance.LightMode)` without a module loader.
   - `StandardLuminance` — `{ LightMode: 1, DarkMode: 0.23 }`.
   - `docsUrl`, `aiReference` — pointers to the AI-facing component reference.

## React component reference for AI tools

[`components.md`](./components.md) is a React-focused quick reference: import paths, event/prop conventions, and example usage of the most common ~50 components. Designed to be fed to a coding assistant generating React code that consumes `@genesislcap/rapid-design-system/react`.

CDN URL:

```
https://cdn.jsdelivr.net/npm/@genesislcap/foundation-rapid-cdn/components.md
```

Drop that URL into a Claude project's instructions, a `CLAUDE.md`, or a system prompt so the assistant fetches it on demand.

## Pinning a version

`@latest` follows stable releases, `@alpha` follows the prerelease channel:

```html
<!-- pinned, immutable, cached forever -->
<script src="https://cdn.jsdelivr.net/npm/@genesislcap/foundation-rapid-cdn@14.430.2"></script>

<!-- prerelease channel -->
<script src="https://cdn.jsdelivr.net/npm/@genesislcap/foundation-rapid-cdn@alpha"></script>
```

`unpkg.com` and `esm.sh` mirror the same files.

## Local smoke test

After `npm run build`, open `test/index.html` from this package — it loads the bundle from `../dist/...` and renders a button/card/dialog/tabs grid for visual verification.

```sh
npm run test:browser   # serves on :4321 and opens /test/ in the browser
# or just: open test/index.html
```
