@particle-academy/fancy-slides 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,9 +1,9 @@
-import { useId, useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { isDarkColor, SlideContext } from './chunk-WIUXPQAK.js';
+export { useIsDarkSlide, useSlideContext, useSlideTheme } from './chunk-WIUXPQAK.js';
+import { useId, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { ContentRenderer, Text, Action, ContextMenu, Separator, Tooltip, Dropdown, Badge, Heading, Tabs, Card, Input, Slider, Textarea, Select, ColorPicker } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/components/Slide/Slide.tsx
-
 // src/theme/default-theme.ts
 var defaultTheme = {
   name: "default",
@@ -259,10 +259,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__ */ jsx(
+  const slideContext = useMemo(
+    () => ({
+      theme: t,
+      isDark: isDarkColor(effectiveBg),
+      slideWidthPx
+    }),
+    [t, effectiveBg, slideWidthPx]
+  );
+  return /* @__PURE__ */ jsx(SlideContext.Provider, { value: slideContext, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -298,7 +307,7 @@ function Slide({
         element.id
       ))
     }
-  );
+  ) });
 }
 var MIN_DIM = 0.02;
 var CLICK_DRAG_THRESHOLD_PX = 3;
@@ -1113,6 +1122,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,
@@ -1238,7 +1331,16 @@ function EditorToolbar({
         /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertShape?.("arrow"), children: "Arrow" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Tooltip, { content: "Insert chart", children: /* @__PURE__ */ jsx(Action, { variant: "ghost", size: "sm", icon: "bar-chart", onClick: onInsertChart, disabled, "aria-label": "Insert chart" }) }),
+    /* @__PURE__ */ jsxs(Dropdown, { children: [
+      /* @__PURE__ */ jsx(Dropdown.Trigger, { children: /* @__PURE__ */ jsx(Action, { variant: "ghost", size: "sm", icon: "bar-chart", iconTrailing: "chevron-down", disabled, "aria-label": "Insert chart" }) }),
+      /* @__PURE__ */ jsxs(Dropdown.Items, { children: [
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertChart?.("bar"), children: "Bar chart" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertChart?.("line"), children: "Line chart" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertChart?.("area"), children: "Area chart" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertChart?.("pie"), children: "Pie chart" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertChart?.("scatter"), children: "Scatter" })
+      ] })
+    ] }),
     /* @__PURE__ */ jsx(Tooltip, { content: "Insert code", children: /* @__PURE__ */ jsx(Action, { variant: "ghost", size: "sm", icon: "code", onClick: onInsertCode, disabled, "aria-label": "Insert code" }) }),
     /* @__PURE__ */ jsx(Tooltip, { content: "Insert table", children: /* @__PURE__ */ jsx(Action, { variant: "ghost", size: "sm", icon: "table", onClick: onInsertTable, disabled, "aria-label": "Insert table" }) }),
     /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
@@ -1618,17 +1720,13 @@ function DeckEditor({
     [insert]
   );
   const insertChart = 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]
   );
@@ -1756,6 +1854,6 @@ function DeckEditor({
   );
 }
 
-export { DeckEditor, EditorToolbar, ElementInspector, ImageElementRenderer, PresenterView, ShapeElementRenderer, Slide, SlideRail, SlideThumbnail, SlideViewer, SpeakerNotes, TextElementRenderer, builtinThemes, darkTheme, deckId, defaultTheme, defineTheme, elementId, nextId, reduce as reduceDeck, resolveTheme, slideId, useDeckState, useSlideKeyboard, vividTheme };
+export { DeckEditor, EditorToolbar, ElementInspector, ImageElementRenderer, PresenterView, ShapeElementRenderer, Slide, SlideRail, SlideThumbnail, SlideViewer, SpeakerNotes, TextElementRenderer, builtinThemes, chartStarterOption, darkTheme, deckId, defaultTheme, defineTheme, elementId, nextId, reduce as reduceDeck, resolveTheme, slideId, useDeckState, useSlideKeyboard, vividTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map