@genesislcap/foundation-rapid-cdn

v14.445.2

Published

5 hours ago

Side-effecting CDN bundle that auto-registers the Rapid Design System. Intended for AI/prototyping tools (e.g. Claude Artifacts), not for production apps.

0High
0Medium
0Low

genesisnpm

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.

<!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:

Registers every component in baseComponents (button, card, dialog, data-grid, …).
Wraps document.body's children in a <rapid-design-system-provider with-defaults> so design tokens apply.
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:

<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 CustomEvents, 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 for the full setup.

React component reference for AI tools

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:

<!-- pinned, immutable, cached forever -->
<script src="https://cdn.jsdelivr.net/npm/@genesislcap/[email protected]"></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.

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme