@particle-academy/fancy-slides 0.2.0 → 0.4.0

package/dist/index.js

@@ -70,6 +70,79 @@ function resolveTheme(theme) {
 function cn(...parts) {
   return parts.filter(Boolean).join(" ");
 }
+
+// src/utils/builds.ts
+var DEFAULT_BUILD_DURATION = 500;
+function collectBuilds(slide) {
+  if (!slide) return [];
+  const builds = [];
+  slide.elements.forEach((element, index) => {
+    if (element.animation) {
+      builds.push({ element, animation: element.animation, index });
+    }
+  });
+  return builds.sort((a, b) => {
+    const ao = a.animation.order ?? 0;
+    const bo = b.animation.order ?? 0;
+    if (ao !== bo) return ao - bo;
+    return a.index - b.index;
+  });
+}
+function buildSteps(slide) {
+  const builds = collectBuilds(slide);
+  const steps = [];
+  for (const build of builds) {
+    const trigger = build.animation.trigger ?? "on-click";
+    if (steps.length === 0 || trigger === "on-click") {
+      steps.push({ builds: [build] });
+    } else {
+      steps[steps.length - 1].builds.push(build);
+    }
+  }
+  return steps;
+}
+function totalBuildSteps(slide) {
+  return buildSteps(slide).length;
+}
+function visibleElementIds(slide, buildStep) {
+  const visible = /* @__PURE__ */ new Set();
+  if (!slide) return visible;
+  const steps = buildSteps(slide);
+  const stepOfElement = /* @__PURE__ */ new Map();
+  steps.forEach((step, i) => {
+    for (const b of step.builds) stepOfElement.set(b.element.id, i + 1);
+  });
+  for (const element of slide.elements) {
+    const revealStep = stepOfElement.get(element.id);
+    if (revealStep === void 0) {
+      visible.add(element.id);
+    } else if (buildStep >= revealStep) {
+      visible.add(element.id);
+    }
+  }
+  return visible;
+}
+function buildsForStep(slide, buildStep) {
+  const steps = buildSteps(slide);
+  const step = steps[buildStep - 1];
+  return step ? step.builds : [];
+}
+function stepDelays(builds) {
+  const delays = /* @__PURE__ */ new Map();
+  const lead = builds[0];
+  if (!lead) return delays;
+  const leadDelay = lead.animation.delay ?? 0;
+  const leadDuration = lead.animation.duration ?? DEFAULT_BUILD_DURATION;
+  delays.set(lead.element.id, leadDelay);
+  for (let i = 1; i < builds.length; i++) {
+    const b = builds[i];
+    const own = b.animation.delay ?? 0;
+    const trigger = b.animation.trigger ?? "on-click";
+    const base = trigger === "after-prev" ? leadDelay + leadDuration : leadDelay;
+    delays.set(b.element.id, base + own);
+  }
+  return delays;
+}
 function TextElementRenderer({
   element,
   theme,
@@ -159,6 +232,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 +256,7 @@ function ImageElementRenderer({ element }) {
       style: {
         width: "100%",
         height: "100%",
-        objectFit: element.fit ?? "contain",
+        objectFit: fit,
         display: "block"
       },
       draggable: false
@@ -222,12 +311,94 @@ function renderShape(el, s) {
       return null;
   }
 }
+
+// src/components/Slide/builds-style.ts
+var DEFAULT_BUILD_DURATION2 = 500;
+var EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+function buildEnterStyle(animation, effectiveDelay) {
+  const duration = animation.duration ?? DEFAULT_BUILD_DURATION2;
+  const dir = animation.direction ?? "left";
+  let name;
+  switch (animation.effect) {
+    case "fade":
+      name = "fs-build-fade";
+      break;
+    case "zoom":
+      name = "fs-build-zoom";
+      break;
+    case "fly-in":
+      name = `fs-build-fly-${dir}`;
+      break;
+    case "wipe":
+      name = `fs-build-wipe-${dir}`;
+      break;
+    default:
+      name = "fs-build-fade";
+  }
+  return {
+    animationName: name,
+    animationDuration: `${duration}ms`,
+    animationDelay: `${effectiveDelay}ms`,
+    animationTimingFunction: EASE,
+    animationFillMode: "both"
+  };
+}
+var BUILD_KEYFRAMES = `
+@media (prefers-reduced-motion: reduce) {
+    .fs-build-enter { animation: none !important; }
+}
+@media (prefers-reduced-motion: no-preference) {
+    @keyframes fs-build-fade {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    @keyframes fs-build-zoom {
+        from { opacity: 0; transform: scale(0.8); }
+        to { opacity: 1; transform: scale(1); }
+    }
+    @keyframes fs-build-fly-left {
+        from { opacity: 0; transform: translateX(-24%); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes fs-build-fly-right {
+        from { opacity: 0; transform: translateX(24%); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes fs-build-fly-up {
+        from { opacity: 0; transform: translateY(24%); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes fs-build-fly-down {
+        from { opacity: 0; transform: translateY(-24%); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    /* wipe: clip-path inset reveals from the named edge toward the opposite one.
+       inset(top right bottom left) \u2014 start fully clipped on the far side. */
+    @keyframes fs-build-wipe-left {
+        from { clip-path: inset(0 100% 0 0); }
+        to { clip-path: inset(0 0 0 0); }
+    }
+    @keyframes fs-build-wipe-right {
+        from { clip-path: inset(0 0 0 100%); }
+        to { clip-path: inset(0 0 0 0); }
+    }
+    @keyframes fs-build-wipe-up {
+        from { clip-path: inset(100% 0 0 0); }
+        to { clip-path: inset(0 0 0 0); }
+    }
+    @keyframes fs-build-wipe-down {
+        from { clip-path: inset(0 0 100% 0); }
+        to { clip-path: inset(0 0 0 0); }
+    }
+}
+`;
 function Slide({
   slide,
   theme,
   width,
   aspectRatio,
   editing = false,
+  buildStep,
   onElementContentChange,
   onElementSelect,
   selectedElementId,
@@ -271,7 +442,21 @@ function Slide({
     }),
     [t, effectiveBg, slideWidthPx]
   );
-  return /* @__PURE__ */ jsx(SlideContext.Provider, { value: slideContext, children: /* @__PURE__ */ jsx(
+  const buildInfo = useMemo(() => {
+    if (editing) return null;
+    const steps = buildSteps(slide);
+    if (steps.length === 0) return null;
+    const revealStep = /* @__PURE__ */ new Map();
+    steps.forEach((step, i) => {
+      for (const b of step.builds) revealStep.set(b.element.id, i + 1);
+    });
+    const driven = buildStep !== void 0;
+    const currentStep = driven ? buildStep : steps.length;
+    const firing = driven ? steps[currentStep - 1] : void 0;
+    const delays = firing ? stepDelays(firing.builds) : /* @__PURE__ */ new Map();
+    return { revealStep, currentStep, delays };
+  }, [editing, slide, buildStep]);
+  return /* @__PURE__ */ jsx(SlideContext.Provider, { value: slideContext, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
@@ -289,23 +474,45 @@ function Slide({
       onClick: (e) => {
         if (e.target === e.currentTarget && onElementSelect) onElementSelect(null);
       },
-      children: orderedElements(slide.elements).map((element) => /* @__PURE__ */ jsx(
-        SlideElementHost,
-        {
-          element,
-          theme: t,
-          slideWidthPx,
-          slideHeightPx,
-          editing,
-          selected: selectedElementId === element.id,
-          onContentChange: onElementContentChange,
-          onSelect: onElementSelect,
-          onMove: onElementMove,
-          onResize: onElementResize,
-          renderElement
-        },
-        element.id
-      ))
+      children: [
+        buildInfo && /* @__PURE__ */ jsx("style", { children: BUILD_KEYFRAMES }),
+        orderedElements(slide.elements).map((element) => {
+          let buildHidden = false;
+          let buildAnimation;
+          let buildDelay = 0;
+          if (buildInfo) {
+            const step = buildInfo.revealStep.get(element.id);
+            if (step !== void 0) {
+              if (buildInfo.currentStep < step) {
+                buildHidden = true;
+              } else if (buildInfo.currentStep === step && element.animation) {
+                buildAnimation = element.animation;
+                buildDelay = buildInfo.delays.get(element.id) ?? 0;
+              }
+            }
+          }
+          if (buildHidden) return null;
+          return /* @__PURE__ */ jsx(
+            SlideElementHost,
+            {
+              element,
+              theme: t,
+              slideWidthPx,
+              slideHeightPx,
+              editing,
+              selected: selectedElementId === element.id,
+              onContentChange: onElementContentChange,
+              onSelect: onElementSelect,
+              onMove: onElementMove,
+              onResize: onElementResize,
+              renderElement,
+              buildAnimation,
+              buildDelay
+            },
+            element.id
+          );
+        })
+      ]
     }
   ) });
 }
@@ -322,7 +529,9 @@ function SlideElementHost({
   onSelect,
   onMove,
   onResize,
-  renderElement
+  renderElement,
+  buildAnimation,
+  buildDelay = 0
 }) {
   const dragRef = useRef(null);
   if (element.hidden) return null;
@@ -391,15 +600,18 @@ function SlideElementHost({
     outline: selected ? "2px solid #8b5cf6" : void 0,
     outlineOffset: selected ? 2 : void 0,
     cursor: canMove ? "move" : interactive ? "pointer" : "default",
-    touchAction: canMove ? "none" : void 0
+    touchAction: canMove ? "none" : void 0,
+    ...buildAnimation ? buildEnterStyle(buildAnimation, buildDelay) : null
   };
   const inner = renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange }) ?? renderElement?.(element, slideWidthPx);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      className: buildAnimation ? "fs-build-enter" : void 0,
       style: box,
       "data-fancy-slides-element": element.id,
       "data-fancy-slides-element-type": element.type,
+      "data-fancy-slides-build": buildAnimation ? "" : void 0,
       onPointerDown: canMove ? startDrag("move") : void 0,
       onPointerMove: canMove ? onPointerMove : void 0,
       onPointerUp: canMove ? endDrag : void 0,
@@ -521,6 +733,8 @@ function useSlideKeyboard({
   total,
   index,
   goTo,
+  onAdvance,
+  onRetreat,
   onExit,
   onBlank,
   onFullscreen,
@@ -537,13 +751,15 @@ function useSlideKeyboard({
         case "ArrowLeft":
         case "PageUp":
           e.preventDefault();
-          if (index > 0) goTo(index - 1);
+          if (onRetreat) onRetreat();
+          else if (index > 0) goTo(index - 1);
           return;
         case "ArrowRight":
         case "PageDown":
         case " ":
           e.preventDefault();
-          if (index < total - 1) goTo(index + 1);
+          if (onAdvance) onAdvance();
+          else if (index < total - 1) goTo(index + 1);
           return;
         case "Home":
           e.preventDefault();
@@ -585,7 +801,7 @@ function useSlideKeyboard({
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [enabled, index, total, goTo, onExit, onBlank, onFullscreen]);
+  }, [enabled, index, total, goTo, onAdvance, onRetreat, onExit, onBlank, onFullscreen]);
 }
 function SlideViewer({
   deck,
@@ -613,13 +829,34 @@ function SlideViewer({
   const containerRef = useRef(null);
   const prevIndexRef = useRef(index);
   const forward = index >= prevIndexRef.current;
+  const slide = deck.slides[index];
+  const totalSteps = totalBuildSteps(slide);
+  const [buildStep, setBuildStep] = useState(0);
+  const nextFreshRef = useRef(false);
   useEffect(() => {
+    if (index === prevIndexRef.current) return;
     prevIndexRef.current = index;
-  }, [index]);
+    const fresh = nextFreshRef.current;
+    nextFreshRef.current = false;
+    setBuildStep(fresh ? 0 : totalBuildSteps(deck.slides[index]));
+  }, [index, deck.slides]);
+  const advance = useCallback(() => {
+    if (buildStep < totalSteps) {
+      setBuildStep((s) => s + 1);
+    } else if (index < deck.slides.length - 1) {
+      nextFreshRef.current = true;
+      goTo(index + 1);
+    }
+  }, [buildStep, totalSteps, index, deck.slides.length, goTo]);
+  const retreat = useCallback(() => {
+    if (index > 0) goTo(index - 1);
+  }, [index, goTo]);
   useSlideKeyboard({
     total: deck.slides.length,
     index,
     goTo,
+    onAdvance: advance,
+    onRetreat: retreat,
     onExit,
     onBlank: () => setBlanked((b) => !b),
     onFullscreen: () => {
@@ -632,11 +869,15 @@ function SlideViewer({
   useEffect(() => {
     if (!autoAdvanceMs || deck.slides.length <= 1) return;
     const t = setTimeout(() => {
-      goTo(index + 1 < deck.slides.length ? index + 1 : 0);
+      if (buildStep < totalSteps) {
+        setBuildStep((s) => s + 1);
+      } else {
+        nextFreshRef.current = true;
+        goTo(index + 1 < deck.slides.length ? index + 1 : 0);
+      }
     }, autoAdvanceMs);
     return () => clearTimeout(t);
-  }, [autoAdvanceMs, index, deck.slides.length, goTo]);
-  const slide = deck.slides[index];
+  }, [autoAdvanceMs, index, deck.slides.length, goTo, buildStep, totalSteps]);
   const theme = resolveTheme(deck.theme);
   const aspectRatio = theme.aspectRatio ?? 16 / 9;
   const transition = slide?.transition ?? theme.defaultTransition;
@@ -658,6 +899,11 @@ function SlideViewer({
       },
       tabIndex: 0,
       "data-fancy-slides-viewer": deck.id,
+      "data-fancy-slides-build-step": buildStep,
+      onClick: () => {
+        if (blanked) return;
+        advance();
+      },
       children: [
         /* @__PURE__ */ jsx("style", { children: TRANSITION_KEYFRAMES }),
         !blanked && slide && /* @__PURE__ */ jsx(
@@ -671,7 +917,7 @@ function SlideViewer({
               ["--fs-ratio"]: aspectRatio.toString(),
               boxShadow: "0 8px 30px rgba(0,0,0,0.35)"
             },
-            children: /* @__PURE__ */ jsx("div", { className: "fs-slide-enter", style: enterStyle, children: /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement }) }, index)
+            children: /* @__PURE__ */ jsx("div", { className: "fs-slide-enter", style: enterStyle, children: /* @__PURE__ */ jsx(Slide, { slide, theme, buildStep, renderElement }) }, index)
           }
         ),
         !hideChrome && !blanked && /* @__PURE__ */ jsxs(
@@ -702,7 +948,7 @@ function SlideViewer({
   );
 }
 var DEFAULT_DURATION = 400;
-var EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+var EASE2 = "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%" };
@@ -728,7 +974,7 @@ function transitionEnterStyle(transition, forward) {
     height: "100%",
     animationName: name,
     animationDuration: `${duration}ms`,
-    animationTimingFunction: EASE,
+    animationTimingFunction: EASE2,
     animationFillMode: "both"
   };
 }
@@ -784,14 +1030,38 @@ function PresenterView({
     },
     [deck.slides.length, isControlled, onIndexChange]
   );
+  const slide = deck.slides[index];
+  const totalSteps = totalBuildSteps(slide);
+  const [buildStep, setBuildStep] = useState(0);
+  const prevIndexRef = useRef(index);
+  const nextFreshRef = useRef(false);
+  useEffect(() => {
+    if (index === prevIndexRef.current) return;
+    prevIndexRef.current = index;
+    const fresh = nextFreshRef.current;
+    nextFreshRef.current = false;
+    setBuildStep(fresh ? 0 : totalBuildSteps(deck.slides[index]));
+  }, [index, deck.slides]);
+  const advance = useCallback(() => {
+    if (buildStep < totalSteps) {
+      setBuildStep((s) => s + 1);
+    } else if (index < deck.slides.length - 1) {
+      nextFreshRef.current = true;
+      goTo(index + 1);
+    }
+  }, [buildStep, totalSteps, index, deck.slides.length, goTo]);
+  const retreat = useCallback(() => {
+    if (index > 0) goTo(index - 1);
+  }, [index, goTo]);
   useSlideKeyboard({
     total: deck.slides.length,
     index,
     goTo,
+    onAdvance: advance,
+    onRetreat: retreat,
     onExit
   });
   const theme = resolveTheme(deck.theme);
-  const slide = deck.slides[index];
   const nextSlide = deck.slides[index + 1];
   const [now, setNow] = useState(() => Date.now());
   useEffect(() => {
@@ -838,7 +1108,7 @@ function PresenterView({
                   borderRadius: 8,
                   overflow: "hidden"
                 },
-                children: slide ? /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement }) : null
+                children: slide ? /* @__PURE__ */ jsx(Slide, { slide, theme, buildStep, renderElement }) : null
               }
             )
           }
@@ -942,8 +1212,8 @@ function PresenterView({
               /* @__PURE__ */ jsx(StatusChip, { label: "Elapsed", children: formatElapsed(now - startedAtRef) }),
               /* @__PURE__ */ jsx(StatusChip, { label: "Clock", children: formatClock(now) }),
               /* @__PURE__ */ jsxs("div", { style: { marginLeft: "auto", display: "flex", gap: 8 }, children: [
-                /* @__PURE__ */ jsx(NavButton, { onClick: () => goTo(index - 1), disabled: index === 0, children: "\u2190 Prev" }),
-                /* @__PURE__ */ jsx(NavButton, { onClick: () => goTo(index + 1), disabled: index >= deck.slides.length - 1, children: "Next \u2192" })
+                /* @__PURE__ */ jsx(NavButton, { onClick: retreat, disabled: index === 0, children: "\u2190 Prev" }),
+                /* @__PURE__ */ jsx(NavButton, { onClick: advance, disabled: index >= deck.slides.length - 1 && buildStep >= totalSteps, children: "Next \u2192" })
               ] })
             ]
           }
@@ -1126,6 +1396,7 @@ function useDeckState({ value, onChange, onOp }) {
       updateElement: (slideIdArg, elementIdArg, patch) => apply({ kind: "element_update", slideId: slideIdArg, elementId: elementIdArg, patch }),
       moveElement: (slideIdArg, elementIdArg, x, y) => apply({ kind: "element_move", slideId: slideIdArg, elementId: elementIdArg, x, y }),
       resizeElement: (slideIdArg, elementIdArg, w, h) => apply({ kind: "element_resize", slideId: slideIdArg, elementId: elementIdArg, w, h }),
+      setAnimation: (slideIdArg, elementIdArg, animation) => apply({ kind: "element_set_animation", slideId: slideIdArg, elementId: elementIdArg, animation }),
       getSlide: (id) => value.slides.find((s) => s.id === id),
       getElement: (slideIdArg, elementIdArg) => value.slides.find((s) => s.id === slideIdArg)?.elements.find((e) => e.id === elementIdArg)
     };
@@ -1193,6 +1464,23 @@ function reduce(deck, op) {
           (s) => s.id === op.slideId ? { ...s, elements: s.elements.map((e) => e.id === op.elementId ? { ...e, w: op.w, h: op.h } : e) } : s
         )
       };
+    case "element_set_animation":
+      return {
+        ...deck,
+        slides: deck.slides.map(
+          (s) => s.id === op.slideId ? {
+            ...s,
+            elements: s.elements.map((e) => {
+              if (e.id !== op.elementId) return e;
+              if (op.animation === void 0) {
+                const { animation: _drop, ...rest } = e;
+                return rest;
+              }
+              return { ...e, animation: op.animation };
+            })
+          } : s
+        )
+      };
   }
 }
 
@@ -1279,6 +1567,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,
@@ -1427,10 +1822,10 @@ 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, slide, onSetTransition, onSetBackground }) {
+function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetAnimation, onSetElementAnimation }) {
   if (!element) {
     if (slide) {
-      return /* @__PURE__ */ jsx(SlideSettings, { slide, onSetTransition, onSetBackground });
+      return /* @__PURE__ */ jsx(SlideSettings, { slide, onSetTransition, onSetBackground, onSetElementAnimation });
     }
     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" }),
@@ -1455,10 +1850,12 @@ function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onS
       /* @__PURE__ */ jsxs(Tabs.List, { children: [
         /* @__PURE__ */ jsx(Tabs.Tab, { value: "style", children: "Style" }),
         /* @__PURE__ */ jsx(Tabs.Tab, { value: "layout", children: "Layout" }),
+        /* @__PURE__ */ jsx(Tabs.Tab, { value: "build", children: "Build" }),
         /* @__PURE__ */ jsx(Tabs.Tab, { value: "advanced", children: "Advanced" })
       ] }),
       /* @__PURE__ */ jsxs(Tabs.Panels, { children: [
         /* @__PURE__ */ jsx(Tabs.Panel, { value: "style", children: /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(StyleSection, { element, onPatch }) }) }),
+        /* @__PURE__ */ jsx(Tabs.Panel, { value: "build", children: /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(AnimateSection, { animation: element.animation, onSetAnimation }) }) }),
         /* @__PURE__ */ jsx(Tabs.Panel, { value: "layout", children: /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(LayoutSection, { element, onPatch }) }) }),
         /* @__PURE__ */ jsx(Tabs.Panel, { value: "advanced", children: /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(AdvancedSection, { element, onPatch }) }) })
       ] })
@@ -1468,7 +1865,8 @@ function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onS
 function SlideSettings({
   slide,
   onSetTransition,
-  onSetBackground
+  onSetBackground,
+  onSetElementAnimation
 }) {
   const transition = slide.transition;
   const kind = transition?.kind ?? "none";
@@ -1535,10 +1933,54 @@ function SlideSettings({
             onChange: (c) => onSetBackground({ ...slide.background, color: c })
           }
         ) })
-      ] }) })
+      ] }) }),
+      onSetElementAnimation && /* @__PURE__ */ jsx(Card, { padding: "md", className: "mt-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(BuildOrderList, { slide, onSetElementAnimation }) })
     ] })
   ] });
 }
+function BuildOrderList({
+  slide,
+  onSetElementAnimation
+}) {
+  const builds = collectBuilds(slide);
+  const move = (from, to) => {
+    if (to < 0 || to >= builds.length) return;
+    const reordered = [...builds];
+    const [item] = reordered.splice(from, 1);
+    reordered.splice(to, 0, item);
+    reordered.forEach((b, i) => {
+      if ((b.animation.order ?? 0) !== i) {
+        onSetElementAnimation(b.element.id, { ...b.animation, order: i });
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Build order" }),
+    builds.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "No animated elements yet. Select an element and add a build under its Build tab." }) : builds.map((b, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Text, { size: "xs", className: "!font-mono !text-zinc-400 w-5", children: [
+        i + 1,
+        "."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", className: "truncate", children: buildLabel(b.element) }),
+        /* @__PURE__ */ jsxs(Text, { size: "xs", className: "!font-mono !text-zinc-400", children: [
+          b.animation.effect,
+          " \xB7 ",
+          b.animation.trigger ?? "on-click"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "chevron-up", onClick: () => move(i, i - 1), disabled: i === 0, "aria-label": "Move earlier" }),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "chevron-down", onClick: () => move(i, i + 1), disabled: i === builds.length - 1, "aria-label": "Move later" })
+    ] }, b.element.id))
+  ] });
+}
+function buildLabel(element) {
+  if (element.type === "text") {
+    const text = element.content.replace(/\s+/g, " ").trim();
+    return text ? text.length > 28 ? `${text.slice(0, 28)}\u2026` : text : "Text";
+  }
+  return `${element.type} #${element.id.slice(-6)}`;
+}
 function LayoutSection({ element, onPatch }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
@@ -1560,6 +2002,100 @@ function AdvancedSection({ element, onPatch }) {
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Action, { size: "sm", variant: element.hidden ? "default" : "ghost", onClick: () => onPatch({ hidden: !element.hidden }), children: element.hidden ? "Hidden \u2014 show" : "Hide on slide" }) })
   ] });
 }
+var NO_ANIMATION = "none";
+function AnimateSection({
+  animation,
+  onSetAnimation
+}) {
+  if (!onSetAnimation) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", className: "!text-zinc-500", children: "Build animations aren't wired up in this editor." });
+  }
+  const effect = animation?.effect;
+  const set = (next) => {
+    const base = animation ?? { effect: "fade" };
+    onSetAnimation({ ...base, ...next });
+  };
+  const showDirection = effect === "fly-in" || effect === "wipe";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Effect",
+        list: [
+          { value: NO_ANIMATION, label: "None" },
+          { value: "fade", label: "Fade" },
+          { value: "fly-in", label: "Fly in" },
+          { value: "zoom", label: "Zoom" },
+          { value: "wipe", label: "Wipe" }
+        ],
+        value: effect ?? NO_ANIMATION,
+        onValueChange: (v) => {
+          if (v === NO_ANIMATION) onSetAnimation(void 0);
+          else set({ effect: v });
+        }
+      }
+    ),
+    effect && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "Trigger",
+          list: [
+            { value: "on-click", label: "On click" },
+            { value: "with-prev", label: "With previous" },
+            { value: "after-prev", label: "After previous" }
+          ],
+          value: animation?.trigger ?? "on-click",
+          onValueChange: (v) => set({ trigger: v })
+        }
+      ),
+      showDirection && /* @__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: animation?.direction ?? "left",
+          onValueChange: (v) => set({ direction: v })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Duration (ms)",
+            type: "number",
+            value: String(animation?.duration ?? 500),
+            onChange: (e) => set({ duration: parseInt(e.target.value, 10) || 500 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Delay (ms)",
+            type: "number",
+            value: String(animation?.delay ?? 0),
+            onChange: (e) => set({ delay: parseInt(e.target.value, 10) || 0 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          label: "Order",
+          type: "number",
+          value: String(animation?.order ?? 0),
+          onChange: (e) => set({ order: parseInt(e.target.value, 10) || 0 })
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: `Builds reveal in ascending order. "On click" starts a new step; "with previous" plays alongside the step's lead; "after previous" follows it. Honors prefers-reduced-motion.` })
+    ] })
+  ] });
+}
 function StyleSection({ element, onPatch }) {
   switch (element.type) {
     case "text":
@@ -1632,7 +2168,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(
@@ -1648,7 +2212,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 }) {
@@ -1695,54 +2269,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 }) {
@@ -1997,7 +2771,9 @@ function DeckEditor({
               },
               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)
+              onSetBackground: (background) => slide && ops.setBackground(slide.id, background),
+              onSetAnimation: (animation) => slide && elementIdSelected && ops.setAnimation(slide.id, elementIdSelected, animation),
+              onSetElementAnimation: (eid, animation) => slide && ops.setAnimation(slide.id, eid, animation)
             }
           ) })
         ] }),
@@ -2007,6 +2783,6 @@ function DeckEditor({
   );
 }
 
-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 };
+export { DeckEditor, EditorToolbar, ElementInspector, ImageElementRenderer, PresenterView, ShapeElementRenderer, Slide, SlideRail, SlideThumbnail, SlideViewer, SpeakerNotes, TextElementRenderer, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, nextId, reduce as reduceDeck, resolveTheme, slideId, stepDelays, totalBuildSteps, useDeckState, useSlideKeyboard, visibleElementIds, vividTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map