# 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

The package ships **two CDN bundles**, loaded independently. Pick the one(s) you need.

### Bundle 1 — web components (no React needed)

The default for static HTML pages, raw artifacts, anywhere you don't have React.

```html
<!doctype html>
<html>
  <body>
    <rapid-button appearance="primary">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, this 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`:
   - `provideDesignSystem`, `baseComponents`, `registerRapidDesignSystem` — registration primitives.
   - `tokens` — the most-overridden design tokens (`baseLayerLuminance`, semantic colors, `designUnit`, `density`, `bodyFont`, …). Artifact code can call `window.rapid.tokens.baseLayerLuminance.setValueFor(provider, window.rapid.StandardLuminance.LightMode)` without a module loader.
   - `StandardLuminance` — `{ LightMode: 1, DarkMode: 0.23 }`.
   - `docsUrl`, `aiReference` — pointers to the AI-facing component reference.

### Bundle 2 — additive React wrappers

For environments that have React (Claude Desktop artifacts, CodePen with React, etc.) and want the same PascalCase wrapper API engineers use in production. Loaded **on top of** bundle 1, after React.

React 19 (the production version) dropped UMD builds, so loading the React bundle on a standalone page means using ESM via an import map. The flow:

```html
<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@19",
      "react-dom/client": "https://esm.sh/react-dom@19/client"
    }
  }
</script>

<script type="module">
  import React from 'react';
  window.React = React;     // the rapid react bundle reads React off the global

  // Inject the IIFE bundles after React is available
  const inject = (src) => new Promise((r) => {
    const s = document.createElement('script');
    s.src = src;
    s.onload = r;
    document.head.appendChild(s);
  });
  await inject('https://cdn.jsdelivr.net/npm/@genesislcap/foundation-rapid-cdn');
  await inject('https://cdn.jsdelivr.net/npm/@genesislcap/foundation-rapid-cdn/dist/foundation-rapid-cdn.react.iife.min.js');

  const { Button, Card, TextField } = window.rapid.react;
  // …same shape as the production import:
  // import { Button, Card, TextField } from '@genesislcap/rapid-design-system/react';
</script>
```

This bundle augments `window.rapid` with `.react` — all 67 PascalCase wrappers (`Button`, `Card`, `TextField`, …) typed as `React.forwardRef` components. Same shape, same prop API as the production-app import. Boolean attrs are real booleans, custom events fire as typed `CustomEvent`s, refs work via `forwardRef`.

> Bundle 2 expects `window.React` to be defined **before** the bundle's IIFE evaluates, and bundle 1 to be loaded first. ReactDOM isn't required by this bundle (the wrappers don't use it), but you'll need it to render the React tree. In a Claude Desktop React-type artifact, the runtime provides React directly — see the artifact-preview pattern in [`components.md`](./components.md) for the full setup.

## 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         # web-component bundle on :4321 (test/index.html)
npm run test:browser:react   # React wrapper bundle on :4322 (test/react.html)
# or just: open test/index.html  /  open test/react.html
```
