-
`
- : ``}
+
- Live preview not available — charts load peer deps outside the bundle. See spec card or copy the code.
-
+
@@ -1109,24 +1065,27 @@ function renderComponentPage(name) {
const head = `
- `;
+ ${chart ? `
+ ` : ""}`;
// Build a script that runs each demo and wires up copy / toggle / sidebar drawer.
- // Charts skip the live runner — they're not in the IIFE bundle.
- const runCalls = chart
- ? ""
- : demos.map((d, i) => `runExample(${JSON.stringify(d.code)}, "demo-render-${i}");`).join("\n ");
+ // The runner functions themselves verify their bundle is loaded (window.RCS
+ // for runExample, window.RCSCharts for runChartExample) and surface the
+ // failure inline, so we only need to guard against runner.js itself failing.
+ const runFn = chart ? "runChartExample" : "runExample";
+ const runCalls = demos.map((d, i) => `${runFn}(${JSON.stringify(d.code)}, "demo-render-${i}");`).join("\n ");
const codeJson = JSON.stringify(demos.map((d) => d.code));
const tail = `
-
+ ${chart ? `
+ ` : ""}
`;
+
+ return htmlShell({ title: `Foundations — ${pkg.name}`, depth: 2, active: "components", body, head, tail });
+}
+
// ─── 9. Write all output files ────────────────────────────────────────
mkdirSync(outDir, { recursive: true });
mkdirSync(join(outDir, "dist"), { recursive: true });
mkdirSync(join(outDir, "apps"), { recursive: true });
-mkdirSync(join(outDir, "preview"), { recursive: true });
mkdirSync(join(outDir, "docs"), { recursive: true });
mkdirSync(join(outDir, "docs/playground"), { recursive: true });
+mkdirSync(join(outDir, "docs/foundations"), { recursive: true });
writeFileSync(join(outDir, "site.css"), renderSiteCss());
writeFileSync(join(outDir, "dist/styles.css"), colorsAndTypeCss + "\n" + componentStylesCss);
@@ -1298,18 +1577,11 @@ writeFileSync(join(outDir, "dist/styles.css"), colorsAndTypeCss + "\n" + compone
writeFileSync(join(outDir, "index.html"), renderRootIndex());
writeFileSync(join(outDir, "apps/index.html"), renderAppsIndex());
-// /preview/index.html — list every preview HTML card we've staged
-let previewFiles = [];
-try {
- const { readdirSync } = await import("node:fs");
- previewFiles = readdirSync(join(outDir, "preview")).filter((f) => f.endsWith(".html"));
-} catch { /* preview/ not staged yet — script may run before workflow's cp */ }
-writeFileSync(join(outDir, "preview/index.html"), renderBrandIndex(previewFiles));
-
writeFileSync(join(outDir, "docs/index.html"), renderDocsIndex());
writeFileSync(join(outDir, "docs/docs.css"), renderDocsCss());
writeFileSync(join(outDir, "docs/runner.js"), renderRunner());
writeFileSync(join(outDir, "docs/playground/index.html"), renderPlaygroundPage());
+writeFileSync(join(outDir, "docs/foundations/index.html"), renderFoundationsPage());
let count = 0;
for (const name of ALL_NAMES) {
@@ -1320,7 +1592,6 @@ for (const name of ALL_NAMES) {
}
console.log(`Wrote site to ${outDir}`);
-console.log(` ${count} component pages (${runtimeExports.size} core + ${chartExports.size} charts), 1 docs index, 1 playground, 1 apps index, 1 brand index, 1 root`);
+console.log(` ${count} component pages (${runtimeExports.size} core + ${chartExports.size} charts), 1 foundations, 1 docs index, 1 playground, 1 apps index, 1 root`);
console.log(` ${runtimeExports.size + chartExports.size} runtime exports across ${DOCS_CATEGORIES.filter((c) => exportsByCategory.get(c.id).length > 0).length} docs categories`);
console.log(` ${tokenTypeAliases.length} tokens, ${interfaces.length} interfaces, ${componentTypeAliases.length} type aliases`);
-console.log(` preview cards listed: ${previewFiles.filter((f) => f !== "index.html").length}`);
diff --git a/scripts/build-site.mjs b/scripts/build-site.mjs
index c389960..8cc71be 100644
--- a/scripts/build-site.mjs
+++ b/scripts/build-site.mjs
@@ -8,7 +8,7 @@
*
* Steps:
* 1. Recreate /
- * 2. Stage colors_and_type.css + assets/ + preview/ + ui_kits/
+ * 2. Stage colors_and_type.css + assets/ + ui_kits/
* 3. Bundle src → /docs/bundle/rcs.iife.js (esbuild IIFE)
* 4. Run scripts/build-docs.mjs to write per-component pages
*/
@@ -25,7 +25,7 @@ rmSync(out, { recursive: true, force: true });
mkdirSync(join(out, "docs/bundle"), { recursive: true });
cpSync(join(root, "colors_and_type.css"), join(out, "colors_and_type.css"));
-for (const dir of ["assets", "preview", "ui_kits"]) {
+for (const dir of ["assets", "ui_kits"]) {
const src = join(root, dir);
if (existsSync(src)) cpSync(src, join(out, dir), { recursive: true });
}
@@ -49,6 +49,24 @@ const r1 = spawnSync(esbuildBin, [
], { stdio: "inherit" });
if (r1.status !== 0) process.exit(r1.status ?? 1);
+// Charts bundle — loaded only by chart docs pages. Heavy WebGL peer deps
+// stay external; chart components fall back to canvas2d / SVG paths.
+const r1b = spawnSync(esbuildBin, [
+ "scripts/bundle-entry-charts.ts",
+ "--bundle",
+ "--format=iife",
+ "--global-name=RCSCharts",
+ `--outfile=${join(out, "docs/bundle/rcs-charts.iife.js")}`,
+ "--target=es2020",
+ "--jsx=automatic",
+ "--minify",
+ '--define:process.env.NODE_ENV="production"',
+ "--external:@deck.gl/core",
+ "--external:@deck.gl/layers",
+ "--external:d3-force",
+], { stdio: "inherit" });
+if (r1b.status !== 0) process.exit(r1b.status ?? 1);
+
const r2 = spawnSync(process.execPath, ["scripts/build-docs.mjs", out], { stdio: "inherit" });
if (r2.status !== 0) process.exit(r2.status ?? 1);
diff --git a/scripts/bundle-entry-charts.ts b/scripts/bundle-entry-charts.ts
new file mode 100644
index 0000000..ff86dc4
--- /dev/null
+++ b/scripts/bundle-entry-charts.ts
@@ -0,0 +1,31 @@
+/**
+ * Bundle entry for the charts subpath live previews.
+ *
+ * Mirrors scripts/bundle-entry.ts but bundles only the chart components
+ * plus the chart-only peer deps (uplot, d3-hierarchy, cytoscape,
+ * cytoscape-cose-bilkent). React and ReactDOM's createRoot are bundled
+ * inline so chart demos can render without sharing the main bundle's
+ * React instance — this avoids the "two React instances in one tree"
+ * footgun, since chart demos never nest inside core components.
+ *
+ * Heavy GPU peer deps (@deck.gl/core, @deck.gl/layers, d3-force) are
+ * marked `--external` at bundle time. Chart components already have a
+ * canvas2d / SVG fallback path when the WebGL handoff fails to import,
+ * so the docs site renders charts via the canvas paths and skips
+ * deck.gl entirely. That keeps the chart bundle ~700 KB instead of
+ * pulling in another ~1.5 MB of WebGL machinery.
+ *
+ * Built by esbuild as IIFE → `window.RCSCharts = { Chart, Donut, …,
+ * React, createRoot }`. Loaded only by chart docs pages, never by the
+ * main docs site or playground.
+ *
+ * Used by:
+ * - scripts/build-site.mjs (bundle pass)
+ * - scripts/build-docs.mjs renderComponentPage (chart pages)
+ */
+
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+
+export * from "../src/charts";
+export { React, createRoot };
diff --git a/tests/unit/Sparkline.test.tsx b/tests/unit/Sparkline.test.tsx
index 466b0bf..3950072 100644
--- a/tests/unit/Sparkline.test.tsx
+++ b/tests/unit/Sparkline.test.tsx
@@ -1,9 +1,9 @@
/**
* Sparkline — minimal smoke test.
- * The chart components live behind the optional "/charts" subpath
- * and depend on optional peer deps; only Sparkline is dependency-free
- * so it's the only chart we test in unit-land. The rest are covered
- * by playwright e2e against rendered preview cards.
+ * Chart components live behind the optional "/charts" subpath and
+ * depend on optional peer deps; Sparkline is dependency-free (pure
+ * SVG) so it's the easiest one to exercise in jsdom. Heavier charts
+ * are covered by playwright e2e against the live docs pages.
*/
import { describe, it, expect } from "vitest";
import { render } from "@testing-library/react";
${escapeHtml(d.code)}