@particle-academy/fancy-slides 0.1.7 → 0.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 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 { ContentRenderer, Text, Action, ContextMenu, Separator, Tooltip, Dropdown, Badge, Heading, Tabs, Card, Select, Input, ColorPicker, Slider, Textarea } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/theme/default-theme.ts
@@ -159,6 +159,22 @@ function weight(w) {
   return void 0;
 }
 function ImageElementRenderer({ element }) {
+  const crop = element.crop;
+  const fit = element.fit ?? "contain";
+  if (crop && crop.w > 0 && crop.h > 0) {
+    const inner = {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: `${1 / crop.w * 100}%`,
+      height: `${1 / crop.h * 100}%`,
+      transform: `translate(${-crop.x / crop.w * 100}%, ${-crop.y / crop.h * 100}%)`,
+      transformOrigin: "top left",
+      objectFit: fit,
+      display: "block"
+    };
+    return /* @__PURE__ */ jsx("div", { style: { position: "relative", width: "100%", height: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: element.src, alt: element.alt ?? "", style: inner, draggable: false }) });
+  }
   return /* @__PURE__ */ jsx(
     "img",
     {
@@ -167,7 +183,7 @@ function ImageElementRenderer({ element }) {
       style: {
         width: "100%",
         height: "100%",
-        objectFit: element.fit ?? "contain",
+        objectFit: fit,
         display: "block"
       },
       draggable: false
@@ -611,6 +627,11 @@ function SlideViewer({
   );
   const [blanked, setBlanked] = useState(false);
   const containerRef = useRef(null);
+  const prevIndexRef = useRef(index);
+  const forward = index >= prevIndexRef.current;
+  useEffect(() => {
+    prevIndexRef.current = index;
+  }, [index]);
   useSlideKeyboard({
     total: deck.slides.length,
     index,
@@ -634,6 +655,8 @@ function SlideViewer({
   const slide = deck.slides[index];
   const theme = resolveTheme(deck.theme);
   const aspectRatio = theme.aspectRatio ?? 16 / 9;
+  const transition = slide?.transition ?? theme.defaultTransition;
+  const enterStyle = transitionEnterStyle(transition, forward);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -652,6 +675,7 @@ function SlideViewer({
       tabIndex: 0,
       "data-fancy-slides-viewer": deck.id,
       children: [
+        /* @__PURE__ */ jsx("style", { children: TRANSITION_KEYFRAMES }),
         !blanked && slide && /* @__PURE__ */ jsx(
           "div",
           {
@@ -663,7 +687,7 @@ function SlideViewer({
               ["--fs-ratio"]: aspectRatio.toString(),
               boxShadow: "0 8px 30px rgba(0,0,0,0.35)"
             },
-            children: /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement })
+            children: /* @__PURE__ */ jsx("div", { className: "fs-slide-enter", style: enterStyle, children: /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement }) }, index)
           }
         ),
         !hideChrome && !blanked && /* @__PURE__ */ jsxs(
@@ -693,6 +717,68 @@ function SlideViewer({
     }
   );
 }
+var DEFAULT_DURATION = 400;
+var EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+function transitionEnterStyle(transition, forward) {
+  const kind = transition?.kind ?? "none";
+  if (kind === "none") return { width: "100%", height: "100%" };
+  const duration = transition?.duration ?? DEFAULT_DURATION;
+  let name;
+  switch (kind) {
+    case "fade":
+      name = "fs-fade-in";
+      break;
+    case "zoom":
+      name = "fs-zoom-in";
+      break;
+    case "slide": {
+      const dir = transition?.direction ?? (forward ? "right" : "left");
+      name = `fs-slide-in-${dir}`;
+      break;
+    }
+    default:
+      return { width: "100%", height: "100%" };
+  }
+  return {
+    width: "100%",
+    height: "100%",
+    animationName: name,
+    animationDuration: `${duration}ms`,
+    animationTimingFunction: EASE,
+    animationFillMode: "both"
+  };
+}
+var TRANSITION_KEYFRAMES = `
+@media (prefers-reduced-motion: reduce) {
+    .fs-slide-enter { animation: none !important; }
+}
+@media (prefers-reduced-motion: no-preference) {
+    @keyframes fs-fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    @keyframes fs-zoom-in {
+        from { opacity: 0; transform: scale(0.92); }
+        to { opacity: 1; transform: scale(1); }
+    }
+    @keyframes fs-slide-in-right {
+        from { opacity: 0; transform: translateX(8%); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes fs-slide-in-left {
+        from { opacity: 0; transform: translateX(-8%); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes fs-slide-in-up {
+        from { opacity: 0; transform: translateY(8%); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes fs-slide-in-down {
+        from { opacity: 0; transform: translateY(-8%); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+}
+`;
 function PresenterView({
   deck,
   index: controlledIndex,
@@ -1046,6 +1132,7 @@ function useDeckState({ value, onChange, onOp }) {
       setLayout: (id, layout) => apply({ kind: "slide_set_layout", id, layout }),
       setNotes: (id, notes) => apply({ kind: "slide_set_notes", id, notes }),
       setBackground: (id, background) => apply({ kind: "slide_set_background", id, background }),
+      setTransition: (id, transition) => apply({ kind: "slide_set_transition", id, transition }),
       addElement: (slideId2, element) => {
         const id = element.id ?? elementId();
         apply({ kind: "element_add", slideId: slideId2, element: { ...element, id } });
@@ -1087,6 +1174,8 @@ function reduce(deck, op) {
       return { ...deck, slides: deck.slides.map((s) => s.id === op.id ? { ...s, notes: op.notes } : s) };
     case "slide_set_background":
       return { ...deck, slides: deck.slides.map((s) => s.id === op.id ? { ...s, background: op.background } : s) };
+    case "slide_set_transition":
+      return { ...deck, slides: deck.slides.map((s) => s.id === op.id ? { ...s, transition: op.transition } : s) };
     case "element_add":
       return {
         ...deck,
@@ -1206,6 +1295,113 @@ function chartStarterOption(kind) {
       };
   }
 }
+var CHART_PALETTE = [
+  "#8b5cf6",
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#ec4899",
+  "#14b8a6",
+  "#6366f1"
+];
+function chartColorAt(index) {
+  return CHART_PALETTE[index % CHART_PALETTE.length];
+}
+function isPlainObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function toNumber(v) {
+  const n = typeof v === "number" ? v : parseFloat(String(v));
+  return Number.isFinite(n) ? n : 0;
+}
+function chartModelFromOption(option) {
+  if (!isPlainObject(option)) return null;
+  const seriesRaw = option.series;
+  if (!Array.isArray(seriesRaw) || seriesRaw.length === 0) return null;
+  if (!seriesRaw.every(isPlainObject)) return null;
+  const types = seriesRaw.map((s) => String(s.type ?? ""));
+  if (types[0] === "pie") {
+    if (seriesRaw.length !== 1) return null;
+    const data = seriesRaw[0].data;
+    if (!Array.isArray(data)) return null;
+    const slices = [];
+    for (const d of data) {
+      if (!isPlainObject(d)) return null;
+      slices.push({ name: String(d.name ?? ""), value: toNumber(d.value) });
+    }
+    return { kind: "pie", categories: [], series: [], slices };
+  }
+  const cartesian = /* @__PURE__ */ new Set(["bar", "line", "scatter"]);
+  if (!types.every((t) => cartesian.has(t))) return null;
+  if (new Set(types).size !== 1) return null;
+  const baseType = types[0];
+  const isArea = baseType === "line" && seriesRaw.every((s) => isPlainObject(s.areaStyle) || s.areaStyle != null);
+  const kind = baseType === "line" ? isArea ? "area" : "line" : baseType;
+  const xAxis = option.xAxis;
+  const axisData = isPlainObject(xAxis) ? xAxis.data : void 0;
+  const categories = Array.isArray(axisData) ? axisData.map((c) => String(c)) : [];
+  const firstData = seriesRaw[0].data;
+  const valueCount = Array.isArray(firstData) ? firstData.length : 0;
+  const cats = categories.length > 0 ? categories : Array.from({ length: valueCount }, (_, i) => String(i + 1));
+  const series = [];
+  for (const s of seriesRaw) {
+    const data = s.data;
+    if (!Array.isArray(data)) return null;
+    const values = data.map((d) => {
+      if (Array.isArray(d)) return toNumber(d[1]);
+      if (isPlainObject(d)) return toNumber(d.value);
+      return toNumber(d);
+    });
+    series.push({ name: String(s.name ?? "Series"), color: typeof s.itemStyle === "object" && s.itemStyle && isPlainObject(s.itemStyle) ? typeof s.itemStyle.color === "string" ? s.itemStyle.color : void 0 : typeof s.color === "string" ? s.color : void 0, values });
+  }
+  return { kind, categories: cats, series, slices: [] };
+}
+function chartOptionFromModel(model) {
+  if (model.kind === "pie") {
+    return {
+      tooltip: { trigger: "item" },
+      legend: { bottom: 0 },
+      color: model.slices.map((_, i) => chartColorAt(i)),
+      series: [
+        {
+          type: "pie",
+          radius: ["40%", "70%"],
+          name: "Segment",
+          data: model.slices.map((s) => ({ name: s.name, value: s.value }))
+        }
+      ]
+    };
+  }
+  const isScatter = model.kind === "scatter";
+  const isArea = model.kind === "area";
+  const seriesType = model.kind === "bar" ? "bar" : model.kind === "scatter" ? "scatter" : "line";
+  const series = model.series.map((s, i) => {
+    const color = s.color ?? chartColorAt(i);
+    const base = {
+      type: seriesType,
+      name: s.name,
+      itemStyle: { color }
+    };
+    if (isScatter) {
+      base.symbolSize = 12;
+      base.data = s.values.map((v, idx) => [idx, v]);
+    } else {
+      base.data = s.values;
+    }
+    if (seriesType === "line") base.smooth = true;
+    if (isArea) base.areaStyle = { color };
+    return base;
+  });
+  return {
+    grid: { top: 24, left: 56, right: 16, bottom: isScatter ? 32 : 40 },
+    tooltip: { trigger: isScatter ? "item" : "axis" },
+    legend: model.series.length > 1 ? { bottom: 0 } : void 0,
+    xAxis: isScatter ? { type: "value" } : { type: "category", data: [...model.categories] },
+    yAxis: { type: "value" },
+    series
+  };
+}
 function SlideRail({
   slides,
   selectedId,
@@ -1354,8 +1550,11 @@ function EditorToolbar({
     /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx(Tooltip, { content: "Present (F)", children: /* @__PURE__ */ jsx(Action, { color: "violet", size: "sm", icon: "play", onClick: onPresent, children: "Present" }) }) })
   ] });
 }
-function ElementInspector({ element, onPatch, onDelete, onLockToggle }) {
+function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground }) {
   if (!element) {
+    if (slide) {
+      return /* @__PURE__ */ jsx(SlideSettings, { slide, onSetTransition, onSetBackground });
+    }
     return /* @__PURE__ */ jsxs("div", { className: "fs-inspector flex h-full flex-col border-l border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900", children: [
       /* @__PURE__ */ jsx(Heading, { as: "h3", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Inspector" }),
       /* @__PURE__ */ jsx(Text, { size: "sm", className: "mt-2 !text-zinc-500", children: "Select an element to edit its properties." })
@@ -1389,6 +1588,80 @@ function ElementInspector({ element, onPatch, onDelete, onLockToggle }) {
     ] }) })
   ] });
 }
+function SlideSettings({
+  slide,
+  onSetTransition,
+  onSetBackground
+}) {
+  const transition = slide.transition;
+  const kind = transition?.kind ?? "none";
+  const setTransition = (next) => {
+    const merged = { kind, duration: transition?.duration, direction: transition?.direction, ...next };
+    onSetTransition?.(merged.kind === "none" ? { kind: "none" } : merged);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "fs-inspector flex h-full w-full flex-col border-l border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-zinc-200 px-3 py-2 dark:border-zinc-800", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h3", size: "xs", className: "!font-mono !uppercase !tracking-wider !text-zinc-500", children: "slide" }),
+      /* @__PURE__ */ jsxs(Text, { size: "xs", className: "!font-mono !text-zinc-400", children: [
+        "#",
+        slide.id.slice(-6)
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-3", children: [
+      /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Transition" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: "Kind",
+            list: [
+              { value: "none", label: "None" },
+              { value: "fade", label: "Fade" },
+              { value: "slide", label: "Slide" },
+              { value: "zoom", label: "Zoom" }
+            ],
+            value: kind,
+            onValueChange: (v) => setTransition({ kind: v })
+          }
+        ),
+        kind === "slide" && /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: "Direction",
+            list: [
+              { value: "left", label: "From left" },
+              { value: "right", label: "From right" },
+              { value: "up", label: "From bottom" },
+              { value: "down", label: "From top" }
+            ],
+            value: transition?.direction ?? "right",
+            onValueChange: (v) => setTransition({ direction: v })
+          }
+        ),
+        kind !== "none" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Duration (ms)",
+            type: "number",
+            value: String(transition?.duration ?? 400),
+            onChange: (e) => setTransition({ duration: parseInt(e.target.value, 10) || 400 })
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "Entrance animation played when this slide appears in the viewer. Falls back to the theme default. Honors prefers-reduced-motion." })
+      ] }) }),
+      onSetBackground && /* @__PURE__ */ jsx(Card, { padding: "md", className: "mt-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Background" }),
+        /* @__PURE__ */ jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            value: slide.background?.color ?? "#ffffff",
+            onChange: (c) => onSetBackground({ ...slide.background, color: c })
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}
 function LayoutSection({ element, onPatch }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
@@ -1482,7 +1755,35 @@ function TextStyleControls({ element, onPatch }) {
   ] });
 }
 function ImageStyleControls({ element, onPatch }) {
+  const fileRef = useRef(null);
+  const crop = element.crop;
+  const onFile = (file) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") onPatch({ src: reader.result });
+    };
+    reader.readAsDataURL(file);
+  };
+  const setCrop = (next) => {
+    const base = crop ?? { x: 0, y: 0, w: 1, h: 1 };
+    onPatch({ crop: { ...base, ...next } });
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileRef,
+        type: "file",
+        accept: "image/*",
+        className: "hidden",
+        onChange: (e) => {
+          onFile(e.target.files?.[0]);
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Action, { size: "sm", variant: "ghost", icon: "upload", onClick: () => fileRef.current?.click(), children: "Upload image" }),
     /* @__PURE__ */ jsx(Textarea, { label: "Image URL", value: element.src, onValueChange: (v) => onPatch({ src: v }), rows: 2 }),
     /* @__PURE__ */ jsx(Input, { label: "Alt text", value: element.alt ?? "", onChange: (e) => onPatch({ alt: e.target.value }) }),
     /* @__PURE__ */ jsx(
@@ -1498,7 +1799,17 @@ function ImageStyleControls({ element, onPatch }) {
         value: element.fit ?? "contain",
         onValueChange: (v) => onPatch({ fit: v })
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Crop" }),
+      crop && /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", onClick: () => onPatch({ crop: void 0 }), children: "Clear crop" })
+    ] }),
+    /* @__PURE__ */ jsx(Slider, { label: "X", value: crop?.x ?? 0, onValueChange: (v) => setCrop({ x: Number(v) }), min: 0, max: 1, step: 0.01, showValue: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Y", value: crop?.y ?? 0, onValueChange: (v) => setCrop({ y: Number(v) }), min: 0, max: 1, step: 0.01, showValue: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Width", value: crop?.w ?? 1, onValueChange: (v) => setCrop({ w: Number(v) }), min: 0.01, max: 1, step: 0.01, showValue: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Height", value: crop?.h ?? 1, onValueChange: (v) => setCrop({ h: Number(v) }), min: 0.01, max: 1, step: 0.01, showValue: true }),
+    /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "Crop is a window into the source image (0..1). Width/height shrink the visible region; X/Y pan it." })
   ] });
 }
 function ShapeStyleControls({ element, onPatch }) {
@@ -1545,54 +1856,254 @@ function CodeStyleControls({ element, onPatch }) {
   ] });
 }
 function ChartStyleControls({ element, onPatch }) {
+  const model = chartModelFromOption(element.option);
+  const writeModel = (m) => onPatch({ option: chartOptionFromModel(m) });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    model ? /* @__PURE__ */ jsx(ChartModelEditor, { model, onChange: writeModel }) : /* @__PURE__ */ jsx(Text, { size: "sm", className: "rounded-md bg-amber-50 p-2 !text-amber-700 dark:bg-amber-950/40 dark:!text-amber-400", children: "This chart's option is too custom for the visual editor. Edit it as JSON below." }),
+    /* @__PURE__ */ jsxs("details", { className: "rounded-md border border-zinc-200 dark:border-zinc-800", children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none px-2 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Advanced \u2014 edit option JSON" }),
+      /* @__PURE__ */ jsx("div", { className: "p-2 pt-0", children: /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          label: "ECharts option (JSON)",
+          value: JSON.stringify(element.option, null, 2),
+          onValueChange: (v) => {
+            try {
+              onPatch({ option: JSON.parse(v) });
+            } catch {
+            }
+          },
+          rows: 10
+        }
+      ) })
+    ] })
+  ] });
+}
+var CHART_TYPE_OPTIONS = [
+  { value: "bar", label: "Bar" },
+  { value: "line", label: "Line" },
+  { value: "area", label: "Area" },
+  { value: "pie", label: "Pie" },
+  { value: "scatter", label: "Scatter" }
+];
+function ChartModelEditor({ model, onChange }) {
+  const setKind = (kind) => {
+    if (kind === model.kind) return;
+    if (kind === "pie") {
+      const first = model.series[0];
+      const slices = model.slices.length ? model.slices : model.categories.length ? model.categories.map((name, i) => ({ name, value: first?.values[i] ?? 0 })) : [{ name: "Slice 1", value: 1 }];
+      onChange({ ...model, kind, slices });
+      return;
+    }
+    if (model.kind === "pie") {
+      const categories = model.slices.length ? model.slices.map((s) => s.name) : ["A", "B", "C"];
+      const values = model.slices.length ? model.slices.map((s) => s.value) : [1, 2, 3];
+      onChange({ ...model, kind, categories, series: [{ name: "Series 1", color: chartColorAt(0), values }] });
+      return;
+    }
+    onChange({ ...model, kind });
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx(Text, { size: "sm", className: "!text-zinc-500", children: "Chart option is JSON \u2014 paste any ECharts option here." }),
     /* @__PURE__ */ jsx(
-      Textarea,
+      Select,
       {
-        label: "ECharts option (JSON)",
-        value: JSON.stringify(element.option, null, 2),
-        onValueChange: (v) => {
-          try {
-            onPatch({ option: JSON.parse(v) });
-          } catch {
-          }
-        },
-        rows: 10
+        label: "Chart type",
+        list: CHART_TYPE_OPTIONS,
+        value: model.kind,
+        onValueChange: (v) => setKind(v)
       }
-    )
+    ),
+    model.kind === "pie" ? /* @__PURE__ */ jsx(PieSliceEditor, { model, onChange }) : /* @__PURE__ */ jsx(CartesianChartEditor, { model, onChange })
+  ] });
+}
+function PieSliceEditor({ model, onChange }) {
+  const slices = model.slices;
+  const update = (i, next) => {
+    const copy = slices.map((s, idx) => idx === i ? { ...s, ...next } : s);
+    onChange({ ...model, slices: copy });
+  };
+  const remove = (i) => onChange({ ...model, slices: slices.filter((_, idx) => idx !== i) });
+  const add = () => onChange({ ...model, slices: [...slices, { name: `Slice ${slices.length + 1}`, value: 0 }] });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Slices" }),
+    slices.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input, { label: i === 0 ? "Name" : void 0, value: s.name, onChange: (e) => update(i, { name: e.target.value }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "w-20", children: /* @__PURE__ */ jsx(Input, { label: i === 0 ? "Value" : void 0, type: "number", value: String(s.value), onChange: (e) => update(i, { value: parseFloat(e.target.value) || 0 }) }) }),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => remove(i), "aria-label": "Remove slice" })
+    ] }, i)),
+    /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: add, children: "Add slice" })
+  ] });
+}
+function CartesianChartEditor({ model, onChange }) {
+  const { categories, series } = model;
+  const updateCategory = (i, label) => {
+    onChange({ ...model, categories: categories.map((c, idx) => idx === i ? label : c) });
+  };
+  const removeCategory = (i) => {
+    onChange({
+      ...model,
+      categories: categories.filter((_, idx) => idx !== i),
+      series: series.map((s) => ({ ...s, values: s.values.filter((_, idx) => idx !== i) }))
+    });
+  };
+  const addCategory = () => {
+    onChange({
+      ...model,
+      categories: [...categories, `Cat ${categories.length + 1}`],
+      series: series.map((s) => ({ ...s, values: [...s.values, 0] }))
+    });
+  };
+  const updateSeries = (si, next) => {
+    onChange({ ...model, series: series.map((s, idx) => idx === si ? { ...s, ...next } : s) });
+  };
+  const updateValue = (si, ci, value) => {
+    onChange({
+      ...model,
+      series: series.map(
+        (s, idx) => idx === si ? { ...s, values: s.values.map((v, vi) => vi === ci ? value : v) } : s
+      )
+    });
+  };
+  const removeSeries = (si) => onChange({ ...model, series: series.filter((_, idx) => idx !== si) });
+  const addSeries = () => onChange({
+    ...model,
+    series: [
+      ...series,
+      { name: `Series ${series.length + 1}`, color: chartColorAt(series.length), values: categories.map(() => 0) }
+    ]
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Categories" }),
+      categories.map((c, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input, { value: c, onChange: (e) => updateCategory(i, e.target.value) }) }),
+        /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => removeCategory(i), "aria-label": "Remove category" })
+      ] }, i)),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: addCategory, children: "Add category" })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Series" }),
+      series.map((s, si) => /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border border-zinc-200 p-2 dark:border-zinc-800", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input, { label: "Name", value: s.name, onChange: (e) => updateSeries(si, { name: e.target.value }) }) }),
+          /* @__PURE__ */ jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsx(ColorPicker, { value: s.color ?? chartColorAt(si), onChange: (c) => updateSeries(si, { color: c }) }) }),
+          /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => removeSeries(si), "aria-label": "Remove series" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: categories.map((c, ci) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: c,
+            type: "number",
+            value: String(s.values[ci] ?? 0),
+            onChange: (e) => updateValue(si, ci, parseFloat(e.target.value) || 0)
+          },
+          ci
+        )) })
+      ] }, si)),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: addSeries, children: "Add series" })
+    ] })
   ] });
 }
 function TableStyleControls({ element, onPatch }) {
+  const columns = element.columns;
+  const rows = element.rows;
+  const nextColKey = () => {
+    const existing = new Set(columns.map((c) => c.key));
+    let n = columns.length + 1;
+    while (existing.has(`col${n}`)) n++;
+    return `col${n}`;
+  };
+  const setColumnLabel = (i, label) => {
+    onPatch({ columns: columns.map((c, idx) => idx === i ? { ...c, label } : c) });
+  };
+  const removeColumn = (i) => {
+    const key = columns[i]?.key;
+    const nextCols = columns.filter((_, idx) => idx !== i);
+    const nextRows = key ? rows.map((r) => {
+      const { [key]: _drop, ...rest } = r;
+      return rest;
+    }) : rows;
+    onPatch({ columns: nextCols, rows: nextRows });
+  };
+  const addColumn = () => {
+    const key = nextColKey();
+    onPatch({
+      columns: [...columns, { key, label: `Column ${columns.length + 1}` }],
+      rows: rows.map((r) => ({ ...r, [key]: "" }))
+    });
+  };
+  const setCell = (rowIdx, key, value) => {
+    onPatch({ rows: rows.map((r, idx) => idx === rowIdx ? { ...r, [key]: value } : r) });
+  };
+  const removeRow = (rowIdx) => onPatch({ rows: rows.filter((_, idx) => idx !== rowIdx) });
+  const addRow = () => {
+    const blank = {};
+    for (const c of columns) blank[c.key] = "";
+    onPatch({ rows: [...rows, blank] });
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        label: "Columns (JSON)",
-        value: JSON.stringify(element.columns, null, 2),
-        onValueChange: (v) => {
-          try {
-            onPatch({ columns: JSON.parse(v) });
-          } catch {
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Columns" }),
+      columns.map((c, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input, { value: c.label, onChange: (e) => setColumnLabel(i, e.target.value), "aria-label": `Column ${i + 1} label` }) }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", className: "!font-mono !text-zinc-400", children: c.key }),
+        /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => removeColumn(i), "aria-label": "Remove column" })
+      ] }, c.key)),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: addColumn, children: "Add column" })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Rows" }),
+      columns.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "Add a column to start adding rows." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        rows.map((r, rowIdx) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 border-b border-zinc-100 pb-2 dark:border-zinc-800", children: [
+          /* @__PURE__ */ jsx("div", { className: "grid flex-1 grid-cols-1 gap-1", children: columns.map((c) => /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: c.label,
+              value: r[c.key] == null ? "" : String(r[c.key]),
+              onChange: (e) => setCell(rowIdx, c.key, e.target.value)
+            },
+            c.key
+          )) }),
+          /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "x", onClick: () => removeRow(rowIdx), "aria-label": "Remove row" })
+        ] }, rowIdx)),
+        /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "plus", onClick: addRow, children: "Add row" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("details", { className: "rounded-md border border-zinc-200 dark:border-zinc-800", children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none px-2 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Edit as JSON" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-2 pt-0", children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            label: "Columns (JSON)",
+            value: JSON.stringify(columns, null, 2),
+            onValueChange: (v) => {
+              try {
+                onPatch({ columns: JSON.parse(v) });
+              } catch {
+              }
+            },
+            rows: 5
           }
-        },
-        rows: 5
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        label: "Rows (JSON)",
-        value: JSON.stringify(element.rows, null, 2),
-        onValueChange: (v) => {
-          try {
-            onPatch({ rows: JSON.parse(v) });
-          } catch {
+        ),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            label: "Rows (JSON)",
+            value: JSON.stringify(rows, null, 2),
+            onValueChange: (v) => {
+              try {
+                onPatch({ rows: JSON.parse(v) });
+              } catch {
+              }
+            },
+            rows: 8
           }
-        },
-        rows: 8
-      }
-    )
+        )
+      ] })
+    ] })
   ] });
 }
 function EmbedStyleControls({ element, onPatch }) {
@@ -1838,13 +2349,16 @@ function DeckEditor({
             ElementInspector,
             {
               element: selectedElement,
+              slide: slide ?? null,
               onPatch: (patch) => slide && elementIdSelected && ops.updateElement(slide.id, elementIdSelected, patch),
               onDelete: () => {
                 if (!slide || !elementIdSelected) return;
                 ops.removeElement(slide.id, elementIdSelected);
                 setElementIdSelected(null);
               },
-              onLockToggle: (locked) => slide && elementIdSelected && ops.updateElement(slide.id, elementIdSelected, { locked })
+              onLockToggle: (locked) => slide && elementIdSelected && ops.updateElement(slide.id, elementIdSelected, { locked }),
+              onSetTransition: (transition) => slide && ops.setTransition(slide.id, transition),
+              onSetBackground: (background) => slide && ops.setBackground(slide.id, background)
             }
           ) })
         ] }),