@particle-academy/fancy-slides 0.5.0 → 0.6.0

package/dist/index.d.cts

@@ -106,7 +106,12 @@ interface SlideViewerProps {
     autoAdvanceMs?: number;
     /** Hide the bottom progress bar + slide counter. */
     hideChrome?: boolean;
-    /** Optional custom renderer for element types Slide doesn't render natively (chart/code/table/embed). */
+    /**
+     * Custom renderer for element types Slide doesn't render natively
+     * (chart/code/table/embed). Defaults to the built-in
+     * `defaultElementRegistry` so decks play fully out of the box; pass your
+     * own to override.
+     */
     renderElement?: (element: SlideElement, slideWidthPx: number) => ReactNode | undefined;
     /** Extra classes on the viewer wrapper. */
     className?: string;
@@ -190,7 +195,14 @@ interface DeckEditorProps {
     /** Controlled selected slide id. Uncontrolled by default. */
     selectedSlideId?: string | null;
     onSelectedSlideChange?: (id: string | null) => void;
-    /** Optional renderer for chart / code / table / embed elements (the elements this package doesn't render natively). */
+    /**
+     * Renderer for chart / code / table / embed elements (the elements this
+     * package doesn't render natively). Defaults to the built-in
+     * `defaultElementRegistry` so the editor is full out of the box; pass your
+     * own to override (it wins entirely). The optional-peer hosts (chart/code)
+     * load fancy-echarts/fancy-code via guarded dynamic imports, so the base
+     * bundle never statically requires them.
+     */
     renderElement?: (element: SlideElement, slideWidthPx: number) => ReactNode | undefined;
     /** Hide the slide rail (e.g. for embedded use). */
     hideRail?: boolean;

package/dist/index.d.ts

@@ -106,7 +106,12 @@ interface SlideViewerProps {
     autoAdvanceMs?: number;
     /** Hide the bottom progress bar + slide counter. */
     hideChrome?: boolean;
-    /** Optional custom renderer for element types Slide doesn't render natively (chart/code/table/embed). */
+    /**
+     * Custom renderer for element types Slide doesn't render natively
+     * (chart/code/table/embed). Defaults to the built-in
+     * `defaultElementRegistry` so decks play fully out of the box; pass your
+     * own to override.
+     */
     renderElement?: (element: SlideElement, slideWidthPx: number) => ReactNode | undefined;
     /** Extra classes on the viewer wrapper. */
     className?: string;
@@ -190,7 +195,14 @@ interface DeckEditorProps {
     /** Controlled selected slide id. Uncontrolled by default. */
     selectedSlideId?: string | null;
     onSelectedSlideChange?: (id: string | null) => void;
-    /** Optional renderer for chart / code / table / embed elements (the elements this package doesn't render natively). */
+    /**
+     * Renderer for chart / code / table / embed elements (the elements this
+     * package doesn't render natively). Defaults to the built-in
+     * `defaultElementRegistry` so the editor is full out of the box; pass your
+     * own to override (it wins entirely). The optional-peer hosts (chart/code)
+     * load fancy-echarts/fancy-code via guarded dynamic imports, so the base
+     * bundle never statically requires them.
+     */
     renderElement?: (element: SlideElement, slideWidthPx: number) => ReactNode | undefined;
     /** Hide the slide rail (e.g. for embedded use). */
     hideRail?: boolean;

package/dist/index.js

@@ -1,3 +1,4 @@
+import { defaultElementRegistry } from './chunk-YEJZYKVB.js';
 import { isDarkColor, SlideContext } from './chunk-WIUXPQAK.js';
 export { useIsDarkSlide, useSlideContext, useSlideTheme } from './chunk-WIUXPQAK.js';
 import { useId, useRef, useState, useEffect, useMemo, useCallback } from 'react';
@@ -676,7 +677,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__ */ jsxs(
     "div",
     {
@@ -771,6 +772,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__ */ 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__ */ jsx("span", { style: { fontWeight: 600 }, children: label }),
+        /* @__PURE__ */ 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;
@@ -885,7 +917,7 @@ function SlideViewer({
   onExit,
   autoAdvanceMs,
   hideChrome = false,
-  renderElement,
+  renderElement = defaultElementRegistry,
   className
 }) {
   const isControlled = controlledIndex !== void 0;
@@ -2646,7 +2678,7 @@ function DeckEditor({
   onPresent,
   selectedSlideId: controlledSlideId,
   onSelectedSlideChange,
-  renderElement,
+  renderElement = defaultElementRegistry,
   hideRail = false,
   hideNotes = false,
   hideToolbar = false,