@particle-academy/fancy-slides 0.1.4 → 0.1.6

package/dist/{chart-host-BHP6GUWO.js → chart-host-X55F6S44.js}

@@ -1,13 +1,15 @@
+import { useIsDarkSlide } from './chunk-WIUXPQAK.js';
 import { registerAll, registerBuiltinThemes, EChart } from '@particle-academy/fancy-echarts';
 import { jsx } from 'react/jsx-runtime';
 
-// src/registry/element-renderers/chart-host.tsx
 registerAll();
 registerBuiltinThemes();
 function ChartHost({ element }) {
-  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option: element.option, theme: element.chartTheme }) });
+  const isDarkSlide = useIsDarkSlide();
+  const theme = element.chartTheme ?? (isDarkSlide ? "dark" : void 0);
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option: element.option, theme }) });
 }
 
 export { ChartHost as default };
-//# sourceMappingURL=chart-host-BHP6GUWO.js.map
-//# sourceMappingURL=chart-host-BHP6GUWO.js.map
+//# sourceMappingURL=chart-host-X55F6S44.js.map
+//# sourceMappingURL=chart-host-X55F6S44.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/element-renderers/chart-host.tsx"],"names":[],"mappings":";;;;AAaA,WAAA,EAAY;AACZ,qBAAA,EAAsB;AAEP,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,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAO,MAAA,EAAQ,MAAA,EAAQ,MAAA,EAAO,EACxC,8BAAC,MAAA,EAAA,EAAO,MAAA,EAAQ,OAAA,CAAQ,MAAA,EAAkD,OAAc,CAAA,EAC5F,CAAA;AAER","file":"chart-host-X55F6S44.js","sourcesContent":["import { EChart, registerAll, registerBuiltinThemes } from \"@particle-academy/fancy-echarts\";\nimport type { ChartElement } from \"../../types\";\nimport { useIsDarkSlide } from \"../../components/Slide/slide-context\";\n\n// fancy-echarts ships its chart types as opt-in tree-shake-friendly modules,\n// so the consumer normally calls `registerAll()` somewhere global. The\n// registry subpath here is the natural spot to wire it: this module only\n// loads when a deck actually contains a chart element (defaultElementRegistry\n// is React.lazy), so the registration cost is paid by chart-using hosts\n// only — non-chart consumers never even import this file.\n//\n// `registerAll()` is idempotent on echarts' side, so re-imports across\n// chunks are safe.\nregisterAll();\nregisterBuiltinThemes();\n\nexport default function ChartHost({ element }: { element: ChartElement; slideWidthPx: number }) {\n    // If the slide background reads as dark and the chart doesn't already\n    // pin a theme explicitly, fall back to echarts' built-in \"dark\" theme\n    // so the chart legend/axis/tooltip text stay legible.\n    const isDarkSlide = useIsDarkSlide();\n    const theme = element.chartTheme ?? (isDarkSlide ? \"dark\" : undefined);\n    return (\n        <div style={{ width: \"100%\", height: \"100%\" }}>\n            <EChart option={element.option as Parameters<typeof EChart>[0][\"option\"]} theme={theme} />\n        </div>\n    );\n}\n"]}

package/dist/chunk-WIUXPQAK.js

@@ -0,0 +1,47 @@
+import { createContext, useContext } from 'react';
+
+// src/components/Slide/slide-context.ts
+var SlideContext = createContext(null);
+function useSlideContext() {
+  return useContext(SlideContext);
+}
+function useSlideTheme() {
+  return useContext(SlideContext)?.theme;
+}
+function useIsDarkSlide() {
+  return 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);
+}
+
+export { SlideContext, isDarkColor, useIsDarkSlide, useSlideContext, useSlideTheme };
+//# sourceMappingURL=chunk-WIUXPQAK.js.map
+//# sourceMappingURL=chunk-WIUXPQAK.js.map

package/dist/chunk-WIUXPQAK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slide/slide-context.ts"],"names":[],"mappings":";;;AAsBO,IAAM,YAAA,GAAe,cAAwC,IAAI;AAOjE,SAAS,eAAA,GAA4C;AACxD,EAAA,OAAO,WAAW,YAAY,CAAA;AAClC;AAMO,SAAS,aAAA,GAAmC;AAC/C,EAAA,OAAO,UAAA,CAAW,YAAY,CAAA,EAAG,KAAA;AACrC;AAMO,SAAS,cAAA,GAA0B;AACtC,EAAA,OAAO,UAAA,CAAW,YAAY,CAAA,EAAG,MAAA,IAAU,KAAA;AAC/C;AAGO,SAAS,YAAY,KAAA,EAAwB;AAEhD,EAAA,MAAM,CAAA,GAAI,KAAA,CAAM,KAAA,CAAM,qBAAqB,CAAA;AAC3C,EAAA,IAAI,CAAA,EAAG;AACH,IAAA,IAAI,GAAA,GAAM,EAAE,CAAC,CAAA;AACb,IAAA,IAAI,GAAA,CAAI,WAAW,CAAA,EAAG;AAClB,MAAA,GAAA,GAAM,GAAA,CAAI,KAAA,CAAM,EAAE,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,GAAI,CAAC,CAAA,CAAE,IAAA,CAAK,EAAE,CAAA;AAAA,IACjD;AACA,IAAA,IAAI,GAAA,CAAI,UAAU,CAAA,EAAG;AACjB,MAAA,MAAM,IAAI,QAAA,CAAS,GAAA,CAAI,MAAM,CAAA,EAAG,CAAC,GAAG,EAAE,CAAA;AACtC,MAAA,MAAM,IAAI,QAAA,CAAS,GAAA,CAAI,MAAM,CAAA,EAAG,CAAC,GAAG,EAAE,CAAA;AACtC,MAAA,MAAM,IAAI,QAAA,CAAS,GAAA,CAAI,MAAM,CAAA,EAAG,CAAC,GAAG,EAAE,CAAA;AACtC,MAAA,OAAO,iBAAA,CAAkB,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,GAAI,GAAA;AAAA,IACxC;AAAA,EACJ;AACA,EAAA,MAAM,GAAA,GAAM,KAAA,CAAM,KAAA,CAAM,mBAAmB,CAAA;AAC3C,EAAA,IAAI,GAAA,EAAK;AACL,IAAA,MAAM,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,GAAI,GAAA,CAAI,CAAC,CAAA,CAAE,KAAA,CAAM,GAAG,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,QAAA,CAAS,EAAE,IAAA,EAAK,EAAG,EAAE,CAAC,CAAA;AACrE,IAAA,IAAI,CAAC,MAAA,CAAO,KAAA,CAAM,CAAC,KAAK,CAAC,MAAA,CAAO,KAAA,CAAM,CAAC,CAAA,IAAK,CAAC,MAAA,CAAO,KAAA,CAAM,CAAC,CAAA,EAAG;AAC1D,MAAA,OAAO,iBAAA,CAAkB,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,GAAI,GAAA;AAAA,IACxC;AAAA,EACJ;AACA,EAAA,OAAO,KAAA;AACX;AAEA,SAAS,iBAAA,CAAkB,CAAA,EAAW,CAAA,EAAW,CAAA,EAAmB;AAEhE,EAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAc;AAC5B,IAAA,MAAM,IAAI,CAAA,GAAI,GAAA;AACd,IAAA,OAAO,CAAA,IAAK,UAAU,CAAA,GAAI,KAAA,GAAQ,KAAK,GAAA,CAAA,CAAK,CAAA,GAAI,KAAA,IAAS,KAAA,EAAO,GAAG,CAAA;AAAA,EACvE,CAAA;AACA,EAAA,OAAO,MAAA,GAAS,QAAA,CAAS,CAAC,CAAA,GAAI,MAAA,GAAS,SAAS,CAAC,CAAA,GAAI,MAAA,GAAS,QAAA,CAAS,CAAC,CAAA;AAC5E","file":"chunk-WIUXPQAK.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { Theme } from \"../../types\";\n\n/**\n * What the surrounding <Slide> knows about itself. Exposed to children\n * (including `renderElement` callbacks and registry hosts like chart-host)\n * via React context so they can react to the deck's theme without the\n * renderElement signature having to carry it around.\n */\nexport interface SlideContextValue {\n    /** Fully-resolved theme (merged with defaults). */\n    theme: Theme;\n    /**\n     * Heuristic: true when the resolved background is dark enough that\n     * native-rendered widgets (charts, code blocks) should use a dark variant.\n     * Computed once from `theme.colors.background` luminance.\n     */\n    isDark: boolean;\n    /** Slide width in CSS pixels at the current render size. */\n    slideWidthPx: number;\n}\n\nexport const SlideContext = createContext<SlideContextValue | null>(null);\n\n/**\n * Read the surrounding <Slide>'s context. Returns null when called outside\n * a Slide — chart-host / code-host can use that signal to fall back to\n * a sensible default (light theme, no resize anchor).\n */\nexport function useSlideContext(): SlideContextValue | null {\n    return useContext(SlideContext);\n}\n\n/**\n * Convenience: returns the resolved theme, or undefined when the caller\n * isn't inside a Slide.\n */\nexport function useSlideTheme(): Theme | undefined {\n    return useContext(SlideContext)?.theme;\n}\n\n/**\n * Convenience: returns true when the surrounding slide's background reads\n * as \"dark enough\" — useful for charts/code blocks that ship a dark variant.\n */\nexport function useIsDarkSlide(): boolean {\n    return useContext(SlideContext)?.isDark ?? false;\n}\n\n/** Compute `isDark` from a hex/rgb colour. Used by Slide when building the context. */\nexport function isDarkColor(color: string): boolean {\n    // Normalise #rgb / #rrggbb / rgb()/rgba() to a triple.\n    const m = color.match(/^#([0-9a-f]{3,8})$/i);\n    if (m) {\n        let hex = m[1];\n        if (hex.length === 3) {\n            hex = hex.split(\"\").map((c) => c + c).join(\"\");\n        }\n        if (hex.length >= 6) {\n            const r = parseInt(hex.slice(0, 2), 16);\n            const g = parseInt(hex.slice(2, 4), 16);\n            const b = parseInt(hex.slice(4, 6), 16);\n            return relativeLuminance(r, g, b) < 0.5;\n        }\n    }\n    const rgb = color.match(/rgba?\\(([^)]+)\\)/i);\n    if (rgb) {\n        const [r, g, b] = rgb[1].split(\",\").map((s) => parseInt(s.trim(), 10));\n        if (!Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b)) {\n            return relativeLuminance(r, g, b) < 0.5;\n        }\n    }\n    return false;\n}\n\nfunction relativeLuminance(r: number, g: number, b: number): number {\n    // Standard sRGB → relative luminance.\n    const toLinear = (c: number) => {\n        const v = c / 255;\n        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n    };\n    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n}\n"]}

package/dist/index.cjs

@@ -224,6 +224,46 @@ 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);
+}
 function Slide({
   slide,
   theme,
@@ -261,10 +301,19 @@ function Slide({
   const slideWidthPx = measured || 1;
   const slideHeightPx = slideWidthPx / ratio;
   const bg = slide.background;
+  const effectiveBg = bg?.color ?? t.colors?.background ?? "#ffffff";
   const backgroundStyle = {
-    background: bg?.gradient ? bg.gradient : bg?.image ? `${bg.color ?? "transparent"} url(${bg.image}) center/${bg.imageFit ?? "cover"} no-repeat` : bg?.color ?? t.colors?.background ?? "#ffffff"
+    background: bg?.gradient ? bg.gradient : bg?.image ? `${bg.color ?? "transparent"} url(${bg.image}) center/${bg.imageFit ?? "cover"} no-repeat` : effectiveBg
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const slideContext = react.useMemo(
+    () => ({
+      theme: t,
+      isDark: isDarkColor(effectiveBg),
+      slideWidthPx
+    }),
+    [t, effectiveBg, slideWidthPx]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SlideContext.Provider, { value: slideContext, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref,
@@ -300,7 +349,7 @@ function Slide({
         element.id
       ))
     }
-  );
+  ) });
 }
 var MIN_DIM = 0.02;
 var CLICK_DRAG_THRESHOLD_PX = 3;
@@ -1115,6 +1164,90 @@ function reduce(deck, op) {
       };
   }
 }
+
+// src/utils/chart-presets.ts
+var QUARTERS = ["Q1", "Q2", "Q3", "Q4"];
+var REVENUE = [24e3, 38e3, 31e3, 47e3];
+function chartStarterOption(kind) {
+  switch (kind) {
+    case "bar":
+      return {
+        grid: { top: 24, left: 56, right: 16, bottom: 32 },
+        tooltip: { trigger: "axis" },
+        xAxis: { type: "category", data: [...QUARTERS] },
+        yAxis: { type: "value" },
+        series: [{ type: "bar", name: "Revenue", data: [...REVENUE] }]
+      };
+    case "line":
+      return {
+        grid: { top: 24, left: 56, right: 16, bottom: 32 },
+        tooltip: { trigger: "axis" },
+        xAxis: { type: "category", data: [...QUARTERS] },
+        yAxis: { type: "value" },
+        series: [{ type: "line", name: "Revenue", smooth: true, data: [...REVENUE] }]
+      };
+    case "area":
+      return {
+        grid: { top: 24, left: 56, right: 16, bottom: 32 },
+        tooltip: { trigger: "axis" },
+        xAxis: { type: "category", data: [...QUARTERS] },
+        yAxis: { type: "value" },
+        series: [
+          {
+            type: "line",
+            name: "Revenue",
+            smooth: true,
+            areaStyle: {},
+            data: [...REVENUE]
+          }
+        ]
+      };
+    case "pie":
+      return {
+        tooltip: { trigger: "item" },
+        legend: { bottom: 0 },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            name: "Segment",
+            data: [
+              { value: 1048, name: "Direct" },
+              { value: 735, name: "Search" },
+              { value: 580, name: "Email" }
+            ]
+          }
+        ]
+      };
+    case "scatter":
+      return {
+        grid: { top: 24, left: 48, right: 16, bottom: 32 },
+        tooltip: { trigger: "item" },
+        xAxis: { type: "value" },
+        yAxis: { type: "value" },
+        series: [
+          {
+            type: "scatter",
+            name: "Points",
+            symbolSize: 12,
+            data: [
+              [10, 8.04],
+              [8, 6.95],
+              [13, 7.58],
+              [9, 8.81],
+              [11, 8.33],
+              [14, 9.96],
+              [6, 7.24],
+              [4, 4.26],
+              [12, 10.84],
+              [7, 4.82],
+              [5, 5.68]
+            ]
+          }
+        ]
+      };
+  }
+}
 function SlideRail({
   slides,
   selectedId,
@@ -1240,7 +1373,16 @@ function EditorToolbar({
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertShape?.("arrow"), children: "Arrow" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tooltip, { content: "Insert chart", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { variant: "ghost", size: "sm", icon: "bar-chart", onClick: onInsertChart, disabled, "aria-label": "Insert chart" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.Dropdown, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { variant: "ghost", size: "sm", icon: "bar-chart", iconTrailing: "chevron-down", disabled, "aria-label": "Insert chart" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.Dropdown.Items, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("bar"), children: "Bar chart" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("line"), children: "Line chart" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("area"), children: "Area chart" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("pie"), children: "Pie chart" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onInsertChart?.("scatter"), children: "Scatter" })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tooltip, { content: "Insert code", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { variant: "ghost", size: "sm", icon: "code", onClick: onInsertCode, disabled, "aria-label": "Insert code" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tooltip, { content: "Insert table", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { variant: "ghost", size: "sm", icon: "table", onClick: onInsertTable, disabled, "aria-label": "Insert table" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Separator, { orientation: "vertical" }),
@@ -1620,17 +1762,13 @@ function DeckEditor({
     [insert]
   );
   const insertChart = react.useCallback(
-    () => insert({
+    (kind = "bar") => insert({
       type: "chart",
       x: 0.1,
       y: 0.2,
       w: 0.8,
       h: 0.6,
-      option: {
-        xAxis: { type: "category", data: ["Q1", "Q2", "Q3", "Q4"] },
-        yAxis: { type: "value" },
-        series: [{ type: "bar", data: [24, 38, 31, 47] }]
-      }
+      option: chartStarterOption(kind)
     }),
     [insert]
   );
@@ -1771,6 +1909,7 @@ exports.SlideViewer = SlideViewer;
 exports.SpeakerNotes = SpeakerNotes;
 exports.TextElementRenderer = TextElementRenderer;
 exports.builtinThemes = builtinThemes;
+exports.chartStarterOption = chartStarterOption;
 exports.darkTheme = darkTheme;
 exports.deckId = deckId;
 exports.defaultTheme = defaultTheme;
@@ -1781,7 +1920,10 @@ exports.reduceDeck = reduce;
 exports.resolveTheme = resolveTheme;
 exports.slideId = slideId;
 exports.useDeckState = useDeckState;
+exports.useIsDarkSlide = useIsDarkSlide;
+exports.useSlideContext = useSlideContext;
 exports.useSlideKeyboard = useSlideKeyboard;
+exports.useSlideTheme = useSlideTheme;
 exports.vividTheme = vividTheme;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map