@classic-homes/slides 0.7.0 → 0.8.1

package/README.md

@@ -96,7 +96,8 @@ Every slide also accepts `track` (value/red, build/teal, neutral/navy),
 
 Charts are rendered to static SVG with ECharts (server-side rendering, themed
 from `@classic-homes/charts-core`), so they work offline and in print. ECharts
-is loaded only when a deck has charts.
+is loaded only when a deck has charts, and `/core` leaves it out entirely (see
+[As a library](#as-a-library)).
 
 ### Video and embeds
 
@@ -160,8 +161,24 @@ import { buildDeckFile, fileImageResolver } from '@classic-homes/slides/node';
 const { html } = await renderDeck(deck, { resolveImage: (src) => lookUp(src) });
 ```
 
-The core entry has no Node dependencies (it runs in Workers and browsers);
-`/node` adds file-based image loading and `buildDeckFile`. For editors,
+The main entry has no Node dependencies (it runs in Workers and browsers);
+`/node` adds file-based image loading and `buildDeckFile`.
+
+`/core` is the main entry without ECharts (about 650 KB minified), for bundles
+that must stay small, such as a Cloudflare Worker. Its `renderDeck` draws charts
+with the `renderCharts` option you pass: a `ChartSvgRenderer` that gets every
+chart in the deck in one call (`{ spec, width, height, palette?, title? }`,
+plain data that survives RPC) and returns their SVGs in the same order. Run
+`renderChartSvgs` from the main entry wherever ECharts can live (another Worker,
+a server) and return its output. A deck with charts and no renderer throws.
+
+````ts
+import { renderDeck } from '@classic-homes/slides/core';
+
+const { html } = await renderDeck(deck, {
+  renderCharts: (charts) => env.CHARTS.renderSlideChartSvgs(charts),
+});
+``` For editors,
 `layoutEditorInfo()` / `deckEditorFields()` describe every field as a widget
 (with `hint`s for chart, grid, url, video-url and point pickers),
 `blankSlide(layout)` gives a valid starting slide, and `renderDeck(deck,
@@ -199,3 +216,4 @@ Colours come from `@classic-homes/theme-tokens`. Fonts (Figtree, Spectral) are
 embedded from `assets/fonts`. Styling lives in `src/styles.ts`; add a layout in
 `src/layouts/` and register it in `src/layouts/index.ts` — its example is
 tested automatically.
+````

package/dist/chunk-4NSKDQ5V.js

@@ -0,0 +1,7 @@
+// src/generated/runtime-hash.ts
+var RUNTIME_SCRIPT_HASH = "sha256-gElvQAb4VPvKu4UeyJRVKuoHYNp8NGhXwx2EhL7NB88=";
+
+export {
+  RUNTIME_SCRIPT_HASH
+};
+//# sourceMappingURL=chunk-4NSKDQ5V.js.map

package/dist/chunk-4NSKDQ5V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/generated/runtime-hash.ts"],"sourcesContent":["// Generated by scripts/embed-fonts.ts. Do not edit.\n/** CSP source for the inline presenter runtime: script-src '<hash>'. */\nexport const RUNTIME_SCRIPT_HASH = 'sha256-gElvQAb4VPvKu4UeyJRVKuoHYNp8NGhXwx2EhL7NB88=';\n"],"mappings":";AAEO,IAAM,sBAAsB;","names":[]}

package/dist/{chunk-HI5ZCAHO.js → chunk-R5HURANW.js}

@@ -147,6 +147,69 @@ function validateBrandProfile(input) {
   return { ok: true, profile: parsed.data };
 }
 
+// src/inline.ts
+var ESCAPES = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, (c) => ESCAPES[c]);
+}
+function escapeAttr(value) {
+  return escapeHtml(value);
+}
+function escapeCssString(value) {
+  return value.replace(/["'\\\n\r\f]/g, (c) => `\\${c.charCodeAt(0).toString(16)} `);
+}
+var SAFE_URL = /^(https?:|mailto:|tel:|#|\/)/i;
+function isSafeLinkUrl(url) {
+  return SAFE_URL.test(url);
+}
+function inline(text) {
+  if (!text) return "";
+  text = text.replace(/[\uE000\uE001]/g, "");
+  if (!text) return "";
+  const codes = [];
+  let s = text.replace(/`([^`]+)`/g, (_, code) => {
+    codes.push(code);
+    return `\uE000${codes.length - 1}\uE000`;
+  });
+  const links = [];
+  s = s.replace(/\[([^[\]]+)\]\(([^)\s[]+)\)/g, (match, label, url) => {
+    if (!isSafeLinkUrl(url)) return label;
+    links.push(`<a href="${escapeAttr(url)}">${formatEmphasis(escapeHtml(label))}</a>`);
+    return `\uE001${links.length - 1}\uE001`;
+  });
+  s = formatEmphasis(escapeHtml(s));
+  s = s.replace(/\r?\n/g, "<br>");
+  s = s.replace(/\uE001(\d+)\uE001/g, (_, i) => links[Number(i)]);
+  s = s.replace(
+    /\uE000(\d+)\uE000/g,
+    (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`
+  );
+  return s;
+}
+function formatEmphasis(escaped) {
+  return escaped.replace(/\*\*(.+?)\*\*/g, "<b>$1</b>").replace(/(^|[^*])\*(?!\s)([^*\n]+?)(?<!\s)\*(?!\*)/g, '$1<em class="hl">$2</em>');
+}
+function prose(text) {
+  if (!text) return "";
+  return text.trim().split(/\n\s*\n/).map((para) => {
+    const lines = para.split(/\n/);
+    if (lines.every((l) => /^\s*[-*]\s+/.test(l))) {
+      return `<ul>${lines.map((l) => `<li>${inline(l.replace(/^\s*[-*]\s+/, ""))}</li>`).join("")}</ul>`;
+    }
+    return `<p>${inline(para)}</p>`;
+  }).join("");
+}
+function plain(text) {
+  if (!text) return "";
+  return text.replace(/`([^`]+)`/g, "$1").replace(/\[([^[\]]+)\]\([^)[]+\)/g, "$1").replace(/\*\*(.+?)\*\*/g, "$1").replace(/\*(.+?)\*/g, "$1");
+}
+
 // src/theme.ts
 import { colors as colors2 } from "@classic-homes/theme-tokens";
 
@@ -1062,17 +1125,8 @@ ${fmt(p.value)}` : p.name
     })
   };
 }
-var renderer;
-function loadChartRenderer() {
-  renderer ??= import("./echarts-render-GDCT5QAF.js").then((m) => m.createRenderer());
-  return renderer;
-}
-async function renderChartSvg(spec, opts = {}) {
-  const width = opts.width ?? 960;
-  const height = opts.height ?? 520;
-  const r = await loadChartRenderer();
-  const svg = r.render(chartOption(spec, opts.palette), width, height);
-  const label = `${opts.title ? `${opts.title}: ` : ""}${describeChart(spec)}`.replace(
+function finishChartSvg(svg, spec, title2) {
+  const label = `${title2 ? `${title2}: ` : ""}${describeChart(spec)}`.replace(
     /[&<>"]/g,
     (c) => `&#${c.charCodeAt(0)};`
   );
@@ -1098,69 +1152,6 @@ function describeChart(spec) {
   return `${kind} ${parts.join(". ")}.`;
 }
 
-// src/inline.ts
-var ESCAPES = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;"
-};
-function escapeHtml(value) {
-  return value.replace(/[&<>"']/g, (c) => ESCAPES[c]);
-}
-function escapeAttr(value) {
-  return escapeHtml(value);
-}
-function escapeCssString(value) {
-  return value.replace(/["'\\\n\r\f]/g, (c) => `\\${c.charCodeAt(0).toString(16)} `);
-}
-var SAFE_URL = /^(https?:|mailto:|tel:|#|\/)/i;
-function isSafeLinkUrl(url) {
-  return SAFE_URL.test(url);
-}
-function inline(text) {
-  if (!text) return "";
-  text = text.replace(/[\uE000\uE001]/g, "");
-  if (!text) return "";
-  const codes = [];
-  let s = text.replace(/`([^`]+)`/g, (_, code) => {
-    codes.push(code);
-    return `\uE000${codes.length - 1}\uE000`;
-  });
-  const links = [];
-  s = s.replace(/\[([^[\]]+)\]\(([^)\s[]+)\)/g, (match, label, url) => {
-    if (!isSafeLinkUrl(url)) return label;
-    links.push(`<a href="${escapeAttr(url)}">${formatEmphasis(escapeHtml(label))}</a>`);
-    return `\uE001${links.length - 1}\uE001`;
-  });
-  s = formatEmphasis(escapeHtml(s));
-  s = s.replace(/\r?\n/g, "<br>");
-  s = s.replace(/\uE001(\d+)\uE001/g, (_, i) => links[Number(i)]);
-  s = s.replace(
-    /\uE000(\d+)\uE000/g,
-    (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`
-  );
-  return s;
-}
-function formatEmphasis(escaped) {
-  return escaped.replace(/\*\*(.+?)\*\*/g, "<b>$1</b>").replace(/(^|[^*])\*(?!\s)([^*\n]+?)(?<!\s)\*(?!\*)/g, '$1<em class="hl">$2</em>');
-}
-function prose(text) {
-  if (!text) return "";
-  return text.trim().split(/\n\s*\n/).map((para) => {
-    const lines = para.split(/\n/);
-    if (lines.every((l) => /^\s*[-*]\s+/.test(l))) {
-      return `<ul>${lines.map((l) => `<li>${inline(l.replace(/^\s*[-*]\s+/, ""))}</li>`).join("")}</ul>`;
-    }
-    return `<p>${inline(para)}</p>`;
-  }).join("");
-}
-function plain(text) {
-  if (!text) return "";
-  return text.replace(/`([^`]+)`/g, "$1").replace(/\[([^[\]]+)\]\([^)[]+\)/g, "$1").replace(/\*\*(.+?)\*\*/g, "$1").replace(/\*(.+?)\*/g, "$1");
-}
-
 // src/video.ts
 var YT = /^(?:https:\/\/)?(?:www\.|m\.)?(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([\w-]{11})/;
 var VIMEO = /^(?:https:\/\/)?(?:www\.|player\.)?vimeo\.com\/(?:video\/)?(\d{6,12})/;
@@ -4045,15 +4036,25 @@ async function renderDeck(input, options = {}) {
     })
   );
   const charts = /* @__PURE__ */ new Map();
-  for (const [key, req] of chartReqs) {
-    charts.set(
-      key,
-      await renderChartSvg(req.spec, {
+  if (chartReqs.size) {
+    if (!options.renderCharts) {
+      throw new Error(
+        "This deck has charts but no chart renderer: pass options.renderCharts (the @classic-homes/slides/core entry has no built-in one)."
+      );
+    }
+    const reqs = [...chartReqs.values()];
+    const svgs = await options.renderCharts(
+      reqs.map((req) => ({
+        spec: req.spec,
         width: req.width,
         height: req.height,
         palette: brand.stock ? void 0 : brand.palette
-      })
+      }))
     );
+    if (svgs.length !== reqs.length) {
+      throw new Error(`renderCharts returned ${svgs.length} SVGs for ${reqs.length} charts.`);
+    }
+    reqs.forEach((req, i) => charts.set(req.key, svgs[i]));
   }
   const imageBudget = options.maxInlineImageBytes;
   if (imageBudget !== void 0 && (!Number.isFinite(imageBudget) || imageBudget < 0)) {
@@ -4498,19 +4499,21 @@ export {
   resolveBrand,
   checkPalette,
   validateBrandProfile,
+  escapeHtml,
+  inline,
+  prose,
   PALETTE,
   LOGO_SVG,
   logoLockup,
   CHART_TYPES,
   SINGLE_SERIES_CHARTS,
   ChartSpec,
+  chartIssues,
+  chartWarnings,
   formatValue,
   chartOption,
-  renderChartSvg,
+  finishChartSvg,
   describeChart,
-  escapeHtml,
-  inline,
-  prose,
   parseVideoUrl,
   videoEmbedUrl,
   LAYOUTS,
@@ -4553,4 +4556,4 @@ export {
   inlineDeckImages,
   externalizeDeckImages
 };
-//# sourceMappingURL=chunk-HI5ZCAHO.js.map
+//# sourceMappingURL=chunk-R5HURANW.js.map