@particle-academy/fancy-slides 0.5.0 → 0.6.0

package/dist/chart-host-ZJE7WAHE.js

@@ -0,0 +1,30 @@
+import { useIsDarkSlide } from './chunk-WIUXPQAK.js';
+import { PeerMissing } from './chunk-4HHEWTDW.js';
+import { lazy, Suspense } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var ChartInner = lazy(async () => {
+  try {
+    const mod = await import('@particle-academy/fancy-echarts');
+    const EChart = mod.EChart;
+    if (!EChart) {
+      return { default: () => /* @__PURE__ */ jsx(PeerMissing, { label: "Chart", install: "npm i @particle-academy/fancy-echarts" }) };
+    }
+    mod.registerAll?.();
+    mod.registerBuiltinThemes?.();
+    return {
+      default: ({ option, theme }) => /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, theme }) })
+    };
+  } catch {
+    return { default: () => /* @__PURE__ */ jsx(PeerMissing, { label: "Chart", install: "npm i @particle-academy/fancy-echarts" }) };
+  }
+});
+function ChartHost({ element }) {
+  const isDarkSlide = useIsDarkSlide();
+  const theme = element.chartTheme ?? (isDarkSlide ? "dark" : void 0);
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(ChartInner, { option: element.option, theme }) });
+}
+
+export { ChartHost as default };
+//# sourceMappingURL=chart-host-ZJE7WAHE.js.map
+//# sourceMappingURL=chart-host-ZJE7WAHE.js.map

package/dist/chart-host-ZJE7WAHE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/element-renderers/chart-host.tsx"],"names":[],"mappings":";;;;;AAqBA,IAAM,UAAA,GAAwC,KAAK,YAAY;AAC3D,EAAA,IAAI;AACA,IAAA,MAAM,GAAA,GAA+B,MAAM,OAAO,iCAAiC,CAAA;AACnF,IAAA,MAAM,SAAS,GAAA,CAAI,MAAA;AAGnB,IAAA,IAAI,CAAC,MAAA,EAAQ;AACT,MAAA,OAAO,EAAE,SAAS,sBAAM,GAAA,CAAC,eAAY,KAAA,EAAM,OAAA,EAAQ,OAAA,EAAQ,uCAAA,EAAwC,CAAA,EAAG;AAAA,IAC1G;AAKA,IAAC,IAAI,WAAA,IAA2C;AAChD,IAAC,IAAI,qBAAA,IAAqD;AAC1D,IAAA,OAAO;AAAA,MACH,SAAS,CAAC,EAAE,QAAQ,KAAA,EAAM,yBACrB,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,QAAQ,MAAA,EAAO,EACxC,8BAAC,MAAA,EAAA,EAAO,MAAA,EAAgB,OAAc,CAAA,EAC1C;AAAA,KAER;AAAA,EACJ,CAAA,CAAA,MAAQ;AACJ,IAAA,OAAO,EAAE,SAAS,sBAAM,GAAA,CAAC,eAAY,KAAA,EAAM,OAAA,EAAQ,OAAA,EAAQ,uCAAA,EAAwC,CAAA,EAAG;AAAA,EAC1G;AACJ,CAAC,CAAA;AAEc,SAAR,SAAA,CAA2B,EAAE,OAAA,EAAQ,EAAoD;AAI5F,EAAA,MAAM,cAAc,cAAA,EAAe;AACnC,EAAA,MAAM,KAAA,GAAQ,OAAA,CAAQ,UAAA,KAAe,WAAA,GAAc,MAAA,GAAS,MAAA,CAAA;AAC5D,EAAA,uBACI,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAU,IAAA,EAChB,QAAA,kBAAA,GAAA,CAAC,cAAW,MAAA,EAAQ,OAAA,CAAQ,MAAA,EAAQ,KAAA,EAAc,CAAA,EACtD,CAAA;AAER","file":"chart-host-ZJE7WAHE.js","sourcesContent":["import { lazy, Suspense, type ComponentType } from \"react\";\nimport type { ChartElement } from \"../../types\";\nimport { useIsDarkSlide } from \"../../components/Slide/slide-context\";\nimport { PeerMissing } from \"./peer-missing\";\n\n/**\n * fancy-echarts is an OPTIONAL peer. A static `import { EChart } from\n * \"@particle-academy/fancy-echarts\"` would make Rollup statically resolve the\n * peer when a CONSUMER builds — and blow up with MISSING_EXPORT if they never\n * installed it. So instead we load the peer via a DYNAMIC import and read its\n * members off the resolved module at RUNTIME, guarding for the stub case.\n *\n * The dynamic `import().then(m => …)` resolves to the optional-peer stub when\n * the peer is absent (`m.EChart` is `undefined`), which we detect and swap for\n * a placeholder — no build-time named binding to break.\n */\ninterface InnerProps {\n    option: unknown;\n    theme: string | undefined;\n}\n\nconst ChartInner: ComponentType<InnerProps> = lazy(async () => {\n    try {\n        const mod: Record<string, unknown> = await import(\"@particle-academy/fancy-echarts\");\n        const EChart = mod.EChart as\n            | ComponentType<{ option: unknown; theme?: string }>\n            | undefined;\n        if (!EChart) {\n            return { default: () => <PeerMissing label=\"Chart\" install=\"npm i @particle-academy/fancy-echarts\" /> };\n        }\n        // fancy-echarts ships its chart types as opt-in tree-shake-friendly\n        // modules, so the consumer normally calls `registerAll()` somewhere\n        // global. We wire it here, but only once the peer has actually loaded —\n        // both calls are idempotent on echarts' side, so re-imports are safe.\n        (mod.registerAll as (() => void) | undefined)?.();\n        (mod.registerBuiltinThemes as (() => void) | undefined)?.();\n        return {\n            default: ({ option, theme }: InnerProps) => (\n                <div style={{ width: \"100%\", height: \"100%\" }}>\n                    <EChart option={option} theme={theme} />\n                </div>\n            ),\n        };\n    } catch {\n        return { default: () => <PeerMissing label=\"Chart\" install=\"npm i @particle-academy/fancy-echarts\" /> };\n    }\n});\n\nexport default function ChartHost({ element }: { element: ChartElement; slideWidthPx: number }) {\n    // Hooks stay in the OUTER component (Rules of Hooks); resolved values are\n    // passed into the lazily-loaded inner. If the slide background reads as dark\n    // and the chart doesn't pin a theme, fall back to echarts' built-in \"dark\".\n    const isDarkSlide = useIsDarkSlide();\n    const theme = element.chartTheme ?? (isDarkSlide ? \"dark\" : undefined);\n    return (\n        <Suspense fallback={null}>\n            <ChartInner option={element.option} theme={theme} />\n        </Suspense>\n    );\n}\n"]}

package/dist/chunk-4HHEWTDW.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/registry/element-renderers/peer-missing.tsx
+function PeerMissing({ label, install }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.4em",
+        textAlign: "center",
+        padding: "0.6em",
+        boxSizing: "border-box",
+        border: "1px dashed currentColor",
+        borderRadius: 8,
+        opacity: 0.6,
+        overflow: "hidden",
+        fontFamily: "ui-sans-serif, system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: label }),
+        /* @__PURE__ */ jsx(
+          "code",
+          {
+            style: {
+              fontSize: "0.72em",
+              opacity: 0.85,
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+            },
+            children: install
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { PeerMissing };
+//# sourceMappingURL=chunk-4HHEWTDW.js.map
+//# sourceMappingURL=chunk-4HHEWTDW.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/element-renderers/peer-missing.tsx"],"names":[],"mappings":";;;AAWO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,OAAA,EAAQ,EAAuC;AAChF,EAAA,uBACI,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,KAAA,EAAO;AAAA,QACH,KAAA,EAAO,MAAA;AAAA,QACP,MAAA,EAAQ,MAAA;AAAA,QACR,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe,QAAA;AAAA,QACf,UAAA,EAAY,QAAA;AAAA,QACZ,cAAA,EAAgB,QAAA;AAAA,QAChB,GAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,QAAA;AAAA,QACX,OAAA,EAAS,OAAA;AAAA,QACT,SAAA,EAAW,YAAA;AAAA,QACX,MAAA,EAAQ,yBAAA;AAAA,QACR,YAAA,EAAc,CAAA;AAAA,QACd,OAAA,EAAS,GAAA;AAAA,QACT,QAAA,EAAU,QAAA;AAAA,QACV,UAAA,EAAY;AAAA,OAChB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAK,KAAA,EAAO,EAAE,UAAA,EAAY,GAAA,IAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACzC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACG,KAAA,EAAO;AAAA,cACH,QAAA,EAAU,QAAA;AAAA,cACV,OAAA,EAAS,IAAA;AAAA,cACT,UAAA,EAAY;AAAA,aAChB;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACL;AAAA;AAAA,GACJ;AAER","file":"chunk-4HHEWTDW.js","sourcesContent":["/**\n * Placeholder shown when an OPTIONAL peer package isn't installed. The\n * chart / code hosts load their peer (`fancy-echarts` / `fancy-code`) via a\n * guarded dynamic import; if that import resolves to a stub (because the\n * consumer never installed the peer), the host renders this instead of\n * crashing — and, crucially, the consumer's build never fails on a missing\n * static import.\n *\n * Inline styles only (no Tailwind), fills 100%×100% so it drops into the\n * element box exactly like the real widget would.\n */\nexport function PeerMissing({ label, install }: { label: string; install: string }) {\n    return (\n        <div\n            style={{\n                width: \"100%\",\n                height: \"100%\",\n                display: \"flex\",\n                flexDirection: \"column\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                gap: \"0.4em\",\n                textAlign: \"center\",\n                padding: \"0.6em\",\n                boxSizing: \"border-box\",\n                border: \"1px dashed currentColor\",\n                borderRadius: 8,\n                opacity: 0.6,\n                overflow: \"hidden\",\n                fontFamily: \"ui-sans-serif, system-ui, sans-serif\",\n            }}\n        >\n            <span style={{ fontWeight: 600 }}>{label}</span>\n            <code\n                style={{\n                    fontSize: \"0.72em\",\n                    opacity: 0.85,\n                    fontFamily: \"ui-monospace, SFMono-Regular, Menlo, monospace\",\n                }}\n            >\n                {install}\n            </code>\n        </div>\n    );\n}\n"]}

package/dist/chunk-YEJZYKVB.js

@@ -0,0 +1,44 @@
+import { lazy, Suspense } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/registry/index.tsx
+var ChartHost = lazy(() => import('./chart-host-ZJE7WAHE.js'));
+var CodeHost = lazy(() => import('./code-host-ZLDVJP2X.js'));
+var TableHost = lazy(() => import('./table-host-LWPOQHTL.js'));
+var EmbedHost = lazy(() => import('./embed-host-ZECUEAOU.js'));
+var Loading = ({ label }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    style: {
+      display: "grid",
+      placeItems: "center",
+      width: "100%",
+      height: "100%",
+      color: "rgba(0,0,0,0.4)",
+      fontSize: 12,
+      fontFamily: "ui-sans-serif, system-ui, sans-serif"
+    },
+    children: [
+      label,
+      "\u2026"
+    ]
+  }
+);
+function defaultElementRegistry(element, slideWidthPx) {
+  switch (element.type) {
+    case "chart":
+      return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { label: "Loading chart" }), children: /* @__PURE__ */ jsx(ChartHost, { element, slideWidthPx }) });
+    case "code":
+      return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { label: "Loading code" }), children: /* @__PURE__ */ jsx(CodeHost, { element }) });
+    case "table":
+      return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { label: "Loading table" }), children: /* @__PURE__ */ jsx(TableHost, { element }) });
+    case "embed":
+      return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { label: "Loading embed" }), children: /* @__PURE__ */ jsx(EmbedHost, { element }) });
+    default:
+      return void 0;
+  }
+}
+
+export { defaultElementRegistry };
+//# sourceMappingURL=chunk-YEJZYKVB.js.map
+//# sourceMappingURL=chunk-YEJZYKVB.js.map

package/dist/chunk-YEJZYKVB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/index.tsx"],"names":[],"mappings":";;;;AAkBA,IAAM,SAAA,GAAY,IAAA,CAAK,MAAM,OAAO,0BAAgC,CAAC,CAAA;AACrE,IAAM,QAAA,GAAW,IAAA,CAAK,MAAM,OAAO,yBAA+B,CAAC,CAAA;AACnE,IAAM,SAAA,GAAY,IAAA,CAAK,MAAM,OAAO,0BAAgC,CAAC,CAAA;AACrE,IAAM,SAAA,GAAY,IAAA,CAAK,MAAM,OAAO,0BAAgC,CAAC,CAAA;AAErE,IAAM,OAAA,GAAU,CAAC,EAAE,KAAA,EAAM,qBACrB,IAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACG,KAAA,EAAO;AAAA,MACH,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,MAAA;AAAA,MACR,KAAA,EAAO,iBAAA;AAAA,MACP,QAAA,EAAU,EAAA;AAAA,MACV,UAAA,EAAY;AAAA,KAChB;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MAAM;AAAA;AAAA;AACX,CAAA;AAQG,SAAS,sBAAA,CAAuB,SAAuB,YAAA,EAAsB;AAChF,EAAA,QAAQ,QAAQ,IAAA;AAAM,IAClB,KAAK,OAAA;AACD,MAAA,uBACI,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,kBAAU,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAM,eAAA,EAAgB,CAAA,EAC/C,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAkC,YAAA,EAA4B,CAAA,EAC7E,CAAA;AAAA,IAER,KAAK,MAAA;AACD,MAAA,uBACI,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,kBAAU,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAM,cAAA,EAAe,CAAA,EAC9C,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAiC,CAAA,EAC/C,CAAA;AAAA,IAER,KAAK,OAAA;AACD,MAAA,uBACI,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,kBAAU,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAM,eAAA,EAAgB,CAAA,EAC/C,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAkC,CAAA,EACjD,CAAA;AAAA,IAER,KAAK,OAAA;AACD,MAAA,uBACI,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,kBAAU,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAM,eAAA,EAAgB,CAAA,EAC/C,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAkC,CAAA,EACjD,CAAA;AAAA,IAER;AACI,MAAA,OAAO,MAAA;AAAA;AAEnB","file":"chunk-YEJZYKVB.js","sourcesContent":["/**\n * Default element registry. Wires up the element types fancy-slides doesn't\n * render natively (chart / code / table / embed) by composing the other\n * fancy packages as optional peer deps.\n *\n * Hosts opt into this by importing from the `/registry` subpath:\n *\n *     import { defaultElementRegistry } from \"@particle-academy/fancy-slides/registry\";\n *     <DeckEditor renderElement={defaultElementRegistry} … />\n *\n * Keeping it behind a subpath means consumers who only render decks with\n * built-in element types (text / image / shape) never pull fancy-echarts,\n * fancy-code, or react-fancy Table into their bundle.\n */\n\nimport { lazy, Suspense } from \"react\";\nimport type { ChartElement, CodeElement, SlideElement, EmbedElement, TableElement } from \"../types\";\n\nconst ChartHost = lazy(() => import(\"./element-renderers/chart-host\"));\nconst CodeHost = lazy(() => import(\"./element-renderers/code-host\"));\nconst TableHost = lazy(() => import(\"./element-renderers/table-host\"));\nconst EmbedHost = lazy(() => import(\"./element-renderers/embed-host\"));\n\nconst Loading = ({ label }: { label: string }) => (\n    <div\n        style={{\n            display: \"grid\",\n            placeItems: \"center\",\n            width: \"100%\",\n            height: \"100%\",\n            color: \"rgba(0,0,0,0.4)\",\n            fontSize: 12,\n            fontFamily: \"ui-sans-serif, system-ui, sans-serif\",\n        }}\n    >\n        {label}…\n    </div>\n);\n\n/**\n * Renderer signature compatible with `Slide`'s `renderElement` prop. Returns\n * `undefined` for element types fancy-slides handles itself, so the call\n * site falls back to the built-in renderer.\n */\nexport function defaultElementRegistry(element: SlideElement, slideWidthPx: number) {\n    switch (element.type) {\n        case \"chart\":\n            return (\n                <Suspense fallback={<Loading label=\"Loading chart\" />}>\n                    <ChartHost element={element as ChartElement} slideWidthPx={slideWidthPx} />\n                </Suspense>\n            );\n        case \"code\":\n            return (\n                <Suspense fallback={<Loading label=\"Loading code\" />}>\n                    <CodeHost element={element as CodeElement} />\n                </Suspense>\n            );\n        case \"table\":\n            return (\n                <Suspense fallback={<Loading label=\"Loading table\" />}>\n                    <TableHost element={element as TableElement} />\n                </Suspense>\n            );\n        case \"embed\":\n            return (\n                <Suspense fallback={<Loading label=\"Loading embed\" />}>\n                    <EmbedHost element={element as EmbedElement} />\n                </Suspense>\n            );\n        default:\n            return undefined;\n    }\n}\n"]}

package/dist/code-host-ZLDVJP2X.js

@@ -0,0 +1,33 @@
+import { PeerMissing } from './chunk-4HHEWTDW.js';
+import { lazy, Suspense } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var CodeInner = lazy(async () => {
+  try {
+    const mod = await import('@particle-academy/fancy-code');
+    const CodeEditor = mod.CodeEditor;
+    if (!CodeEditor) {
+      return { default: () => /* @__PURE__ */ jsx(PeerMissing, { label: "Code", install: "npm i @particle-academy/fancy-code" }) };
+    }
+    return {
+      default: ({ code, language, codeTheme, lineNumbers }) => /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", overflow: "hidden", borderRadius: 8 }, children: /* @__PURE__ */ jsx(CodeEditor, { value: code, language, theme: codeTheme, readOnly: true, lineNumbers, children: /* @__PURE__ */ jsx(CodeEditor.Panel, {}) }) })
+    };
+  } catch {
+    return { default: () => /* @__PURE__ */ jsx(PeerMissing, { label: "Code", install: "npm i @particle-academy/fancy-code" }) };
+  }
+});
+function CodeHost({ element }) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+    CodeInner,
+    {
+      code: element.code,
+      language: element.language ?? "javascript",
+      codeTheme: element.codeTheme ?? "dark",
+      lineNumbers: element.lineNumbers ?? true
+    }
+  ) });
+}
+
+export { CodeHost as default };
+//# sourceMappingURL=code-host-ZLDVJP2X.js.map
+//# sourceMappingURL=code-host-ZLDVJP2X.js.map

package/dist/code-host-ZLDVJP2X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/element-renderers/code-host.tsx"],"names":[],"mappings":";;;;AAkBA,IAAM,SAAA,GAAuC,KAAK,YAAY;AAC1D,EAAA,IAAI;AACA,IAAA,MAAM,GAAA,GAA+B,MAAM,OAAO,8BAA8B,CAAA;AAEhF,IAAA,MAAM,aAAa,GAAA,CAAI,UAAA;AAUvB,IAAA,IAAI,CAAC,UAAA,EAAY;AACb,MAAA,OAAO,EAAE,SAAS,sBAAM,GAAA,CAAC,eAAY,KAAA,EAAM,MAAA,EAAO,OAAA,EAAQ,oCAAA,EAAqC,CAAA,EAAG;AAAA,IACtG;AACA,IAAA,OAAO;AAAA,MACH,SAAS,CAAC,EAAE,IAAA,EAAM,QAAA,EAAU,WAAW,WAAA,EAAY,qBAC/C,GAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,MAAA,EAAQ,QAAQ,QAAA,EAAU,QAAA,EAAU,YAAA,EAAc,CAAA,IAC3E,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAM,UAAoB,KAAA,EAAO,SAAA,EAAW,QAAA,EAAQ,IAAA,EAAC,aACpE,QAAA,kBAAA,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,GACtB,CAAA,EACJ;AAAA,KAER;AAAA,EACJ,CAAA,CAAA,MAAQ;AACJ,IAAA,OAAO,EAAE,SAAS,sBAAM,GAAA,CAAC,eAAY,KAAA,EAAM,MAAA,EAAO,OAAA,EAAQ,oCAAA,EAAqC,CAAA,EAAG;AAAA,EACtG;AACJ,CAAC,CAAA;AAEc,SAAR,QAAA,CAA0B,EAAE,OAAA,EAAQ,EAA6B;AACpE,EAAA,uBACI,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAU,IAAA,EAChB,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACG,MAAM,OAAA,CAAQ,IAAA;AAAA,MACd,QAAA,EAAU,QAAQ,QAAA,IAAY,YAAA;AAAA,MAC9B,SAAA,EAAW,QAAQ,SAAA,IAAa,MAAA;AAAA,MAChC,WAAA,EAAa,QAAQ,WAAA,IAAe;AAAA;AAAA,GACxC,EACJ,CAAA;AAER","file":"code-host-ZLDVJP2X.js","sourcesContent":["import { lazy, Suspense, type ComponentType } from \"react\";\nimport type { CodeElement } from \"../../types\";\nimport { PeerMissing } from \"./peer-missing\";\n\n/**\n * fancy-code is an OPTIONAL peer. As with chart-host, a static\n * `import { CodeEditor } from \"@particle-academy/fancy-code\"` would make\n * Rollup statically resolve the peer at CONSUMER build time and fail with\n * MISSING_EXPORT when it isn't installed. We load it via a DYNAMIC import and\n * read `CodeEditor` off the resolved module at RUNTIME, guarding the stub case.\n */\ninterface InnerProps {\n    code: string;\n    language: string;\n    codeTheme: string;\n    lineNumbers: boolean;\n}\n\nconst CodeInner: ComponentType<InnerProps> = lazy(async () => {\n    try {\n        const mod: Record<string, unknown> = await import(\"@particle-academy/fancy-code\");\n        // CodeEditor is a component with a static `.Panel` sub-component.\n        const CodeEditor = mod.CodeEditor as\n            | (ComponentType<{\n                  value: string;\n                  language: string;\n                  theme: string;\n                  readOnly?: boolean;\n                  lineNumbers?: boolean;\n                  children?: React.ReactNode;\n              }> & { Panel: ComponentType })\n            | undefined;\n        if (!CodeEditor) {\n            return { default: () => <PeerMissing label=\"Code\" install=\"npm i @particle-academy/fancy-code\" /> };\n        }\n        return {\n            default: ({ code, language, codeTheme, lineNumbers }: InnerProps) => (\n                <div style={{ width: \"100%\", height: \"100%\", overflow: \"hidden\", borderRadius: 8 }}>\n                    <CodeEditor value={code} language={language} theme={codeTheme} readOnly lineNumbers={lineNumbers}>\n                        <CodeEditor.Panel />\n                    </CodeEditor>\n                </div>\n            ),\n        };\n    } catch {\n        return { default: () => <PeerMissing label=\"Code\" install=\"npm i @particle-academy/fancy-code\" /> };\n    }\n});\n\nexport default function CodeHost({ element }: { element: CodeElement }) {\n    return (\n        <Suspense fallback={null}>\n            <CodeInner\n                code={element.code}\n                language={element.language ?? \"javascript\"}\n                codeTheme={element.codeTheme ?? \"dark\"}\n                lineNumbers={element.lineNumbers ?? true}\n            />\n        </Suspense>\n    );\n}\n"]}

package/dist/index.cjs

@@ -1,10 +1,218 @@
 'use strict';
 
 var react = require('react');
-var reactFancy = require('@particle-academy/react-fancy');
 var jsxRuntime = require('react/jsx-runtime');
+var reactFancy = require('@particle-academy/react-fancy');
 
-// src/components/Slide/Slide.tsx
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function useSlideContext() {
+  return react.useContext(SlideContext);
+}
+function useSlideTheme() {
+  return react.useContext(SlideContext)?.theme;
+}
+function useIsDarkSlide() {
+  return react.useContext(SlideContext)?.isDark ?? false;
+}
+function isDarkColor(color) {
+  const m = color.match(/^#([0-9a-f]{3,8})$/i);
+  if (m) {
+    let hex = m[1];
+    if (hex.length === 3) {
+      hex = hex.split("").map((c) => c + c).join("");
+    }
+    if (hex.length >= 6) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      return relativeLuminance(r, g, b) < 0.5;
+    }
+  }
+  const rgb = color.match(/rgba?\(([^)]+)\)/i);
+  if (rgb) {
+    const [r, g, b] = rgb[1].split(",").map((s) => parseInt(s.trim(), 10));
+    if (!Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b)) {
+      return relativeLuminance(r, g, b) < 0.5;
+    }
+  }
+  return false;
+}
+function relativeLuminance(r, g, b) {
+  const toLinear = (c) => {
+    const v = c / 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+var SlideContext;
+var init_slide_context = __esm({
+  "src/components/Slide/slide-context.ts"() {
+    SlideContext = react.createContext(null);
+  }
+});
+function PeerMissing({ label, install }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.4em",
+        textAlign: "center",
+        padding: "0.6em",
+        boxSizing: "border-box",
+        border: "1px dashed currentColor",
+        borderRadius: 8,
+        opacity: 0.6,
+        overflow: "hidden",
+        fontFamily: "ui-sans-serif, system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "code",
+          {
+            style: {
+              fontSize: "0.72em",
+              opacity: 0.85,
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+            },
+            children: install
+          }
+        )
+      ]
+    }
+  );
+}
+var init_peer_missing = __esm({
+  "src/registry/element-renderers/peer-missing.tsx"() {
+  }
+});
+
+// src/registry/element-renderers/chart-host.tsx
+var chart_host_exports = {};
+__export(chart_host_exports, {
+  default: () => ChartHost
+});
+function ChartHost({ element }) {
+  const isDarkSlide = useIsDarkSlide();
+  const theme = element.chartTheme ?? (isDarkSlide ? "dark" : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(ChartInner, { option: element.option, theme }) });
+}
+var ChartInner;
+var init_chart_host = __esm({
+  "src/registry/element-renderers/chart-host.tsx"() {
+    init_slide_context();
+    init_peer_missing();
+    ChartInner = react.lazy(async () => {
+      try {
+        const mod = await import('@particle-academy/fancy-echarts');
+        const EChart = mod.EChart;
+        if (!EChart) {
+          return { default: () => /* @__PURE__ */ jsxRuntime.jsx(PeerMissing, { label: "Chart", install: "npm i @particle-academy/fancy-echarts" }) };
+        }
+        mod.registerAll?.();
+        mod.registerBuiltinThemes?.();
+        return {
+          default: ({ option, theme }) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(EChart, { option, theme }) })
+        };
+      } catch {
+        return { default: () => /* @__PURE__ */ jsxRuntime.jsx(PeerMissing, { label: "Chart", install: "npm i @particle-academy/fancy-echarts" }) };
+      }
+    });
+  }
+});
+
+// src/registry/element-renderers/code-host.tsx
+var code_host_exports = {};
+__export(code_host_exports, {
+  default: () => CodeHost
+});
+function CodeHost({ element }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+    CodeInner,
+    {
+      code: element.code,
+      language: element.language ?? "javascript",
+      codeTheme: element.codeTheme ?? "dark",
+      lineNumbers: element.lineNumbers ?? true
+    }
+  ) });
+}
+var CodeInner;
+var init_code_host = __esm({
+  "src/registry/element-renderers/code-host.tsx"() {
+    init_peer_missing();
+    CodeInner = react.lazy(async () => {
+      try {
+        const mod = await import('@particle-academy/fancy-code');
+        const CodeEditor = mod.CodeEditor;
+        if (!CodeEditor) {
+          return { default: () => /* @__PURE__ */ jsxRuntime.jsx(PeerMissing, { label: "Code", install: "npm i @particle-academy/fancy-code" }) };
+        }
+        return {
+          default: ({ code, language, codeTheme, lineNumbers }) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", height: "100%", overflow: "hidden", borderRadius: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(CodeEditor, { value: code, language, theme: codeTheme, readOnly: true, lineNumbers, children: /* @__PURE__ */ jsxRuntime.jsx(CodeEditor.Panel, {}) }) })
+        };
+      } catch {
+        return { default: () => /* @__PURE__ */ jsxRuntime.jsx(PeerMissing, { label: "Code", install: "npm i @particle-academy/fancy-code" }) };
+      }
+    });
+  }
+});
+
+// src/registry/element-renderers/table-host.tsx
+var table_host_exports = {};
+__export(table_host_exports, {
+  default: () => TableHost
+});
+function TableHost({ element }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.Table, { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Table.Head, { children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Table.Row, { children: element.columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Table.Cell, { header: true, children: c.label }, c.key)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Table.Body, { children: element.rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Table.Row, { children: element.columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Table.Cell, { children: formatCell(row[c.key]) }, c.key)) }, i)) })
+  ] }) });
+}
+function formatCell(v) {
+  if (v == null) return "";
+  if (typeof v === "object") return JSON.stringify(v);
+  return String(v);
+}
+var init_table_host = __esm({
+  "src/registry/element-renderers/table-host.tsx"() {
+  }
+});
+
+// src/registry/element-renderers/embed-host.tsx
+var embed_host_exports = {};
+__export(embed_host_exports, {
+  default: () => EmbedHost
+});
+function EmbedHost({ element }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      src: element.src,
+      title: element.title ?? "Embedded content",
+      sandbox: element.sandbox ?? "allow-scripts",
+      style: { width: "100%", height: "100%", border: 0, display: "block" }
+    }
+  );
+}
+var init_embed_host = __esm({
+  "src/registry/element-renderers/embed-host.tsx"() {
+  }
+});
 
 // src/theme/default-theme.ts
 var defaultTheme = {
@@ -461,46 +669,9 @@ function renderShape(el, s) {
       return null;
   }
 }
-var SlideContext = react.createContext(null);
-function useSlideContext() {
-  return react.useContext(SlideContext);
-}
-function useSlideTheme() {
-  return react.useContext(SlideContext)?.theme;
-}
-function useIsDarkSlide() {
-  return react.useContext(SlideContext)?.isDark ?? false;
-}
-function isDarkColor(color) {
-  const m = color.match(/^#([0-9a-f]{3,8})$/i);
-  if (m) {
-    let hex = m[1];
-    if (hex.length === 3) {
-      hex = hex.split("").map((c) => c + c).join("");
-    }
-    if (hex.length >= 6) {
-      const r = parseInt(hex.slice(0, 2), 16);
-      const g = parseInt(hex.slice(2, 4), 16);
-      const b = parseInt(hex.slice(4, 6), 16);
-      return relativeLuminance(r, g, b) < 0.5;
-    }
-  }
-  const rgb = color.match(/rgba?\(([^)]+)\)/i);
-  if (rgb) {
-    const [r, g, b] = rgb[1].split(",").map((s) => parseInt(s.trim(), 10));
-    if (!Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b)) {
-      return relativeLuminance(r, g, b) < 0.5;
-    }
-  }
-  return false;
-}
-function relativeLuminance(r, g, b) {
-  const toLinear = (c) => {
-    const v = c / 255;
-    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
-  };
-  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
-}
+
+// src/components/Slide/Slide.tsx
+init_slide_context();
 function Slide({
   slide,
   theme,
@@ -718,7 +889,7 @@ function SlideElementHost({
     touchAction: canMove ? "none" : void 0,
     ...buildAnimation ? buildEnterStyle(buildAnimation, buildDelay) : null
   };
-  const inner = renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal }) ?? renderElement?.(element, slideWidthPx);
+  const inner = renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal }) ?? renderElement?.(element, slideWidthPx) ?? elementPlaceholder(element);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -813,6 +984,37 @@ function renderInner({ element, theme, slideWidthPx, editing, selected, onConten
       return null;
   }
 }
+function elementPlaceholder(element) {
+  if (element.type !== "chart" && element.type !== "code" && element.type !== "table" && element.type !== "embed") {
+    return null;
+  }
+  const label = element.type.charAt(0).toUpperCase() + element.type.slice(1);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.35em",
+        textAlign: "center",
+        padding: "0.5em",
+        boxSizing: "border-box",
+        border: "1px dashed currentColor",
+        borderRadius: 8,
+        opacity: 0.55,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.7em", opacity: 0.8 }, children: "Pass renderElement to render" })
+      ]
+    }
+  );
+}
 function orderedElements(elements) {
   return [...elements].sort((a, b) => {
     const az = a.z ?? -1;
@@ -845,6 +1047,9 @@ function computeResize(drag, dx, dy) {
   }
   return { x, y, w, h };
 }
+
+// src/index.ts
+init_slide_context();
 function useSlideKeyboard({
   total,
   index,
@@ -919,6 +1124,42 @@ function useSlideKeyboard({
     return () => window.removeEventListener("keydown", handler);
   }, [enabled, index, total, goTo, onAdvance, onRetreat, onExit, onBlank, onFullscreen]);
 }
+var ChartHost2 = react.lazy(() => Promise.resolve().then(() => (init_chart_host(), chart_host_exports)));
+var CodeHost2 = react.lazy(() => Promise.resolve().then(() => (init_code_host(), code_host_exports)));
+var TableHost2 = react.lazy(() => Promise.resolve().then(() => (init_table_host(), table_host_exports)));
+var EmbedHost2 = react.lazy(() => Promise.resolve().then(() => (init_embed_host(), embed_host_exports)));
+var Loading = ({ label }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    style: {
+      display: "grid",
+      placeItems: "center",
+      width: "100%",
+      height: "100%",
+      color: "rgba(0,0,0,0.4)",
+      fontSize: 12,
+      fontFamily: "ui-sans-serif, system-ui, sans-serif"
+    },
+    children: [
+      label,
+      "\u2026"
+    ]
+  }
+);
+function defaultElementRegistry(element, slideWidthPx) {
+  switch (element.type) {
+    case "chart":
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Loading, { label: "Loading chart" }), children: /* @__PURE__ */ jsxRuntime.jsx(ChartHost2, { element, slideWidthPx }) });
+    case "code":
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Loading, { label: "Loading code" }), children: /* @__PURE__ */ jsxRuntime.jsx(CodeHost2, { element }) });
+    case "table":
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Loading, { label: "Loading table" }), children: /* @__PURE__ */ jsxRuntime.jsx(TableHost2, { element }) });
+    case "embed":
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Loading, { label: "Loading embed" }), children: /* @__PURE__ */ jsxRuntime.jsx(EmbedHost2, { element }) });
+    default:
+      return void 0;
+  }
+}
 function SlideViewer({
   deck,
   index: controlledIndex,
@@ -927,7 +1168,7 @@ function SlideViewer({
   onExit,
   autoAdvanceMs,
   hideChrome = false,
-  renderElement,
+  renderElement = defaultElementRegistry,
   className
 }) {
   const isControlled = controlledIndex !== void 0;
@@ -2688,7 +2929,7 @@ function DeckEditor({
   onPresent,
   selectedSlideId: controlledSlideId,
   onSelectedSlideChange,
-  renderElement,
+  renderElement = defaultElementRegistry,
   hideRail = false,
   hideNotes = false,
   hideToolbar = false,