@particle-academy/fancy-slides 0.1.3

package/dist/index.js

@@ -0,0 +1,1761 @@
+import { useId, useRef, useState, useEffect, useCallback, useMemo } 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",
+  aspectRatio: 16 / 9,
+  slideWidth: 1920,
+  colors: {
+    background: "#ffffff",
+    text: "#0f172a",
+    muted: "#64748b",
+    accent: "#8b5cf6",
+    surface: "#f8fafc"
+  },
+  fonts: {
+    heading: '"Instrument Sans", ui-sans-serif, system-ui, sans-serif',
+    body: '"Instrument Sans", ui-sans-serif, system-ui, sans-serif',
+    mono: 'ui-monospace, "JetBrains Mono", "Fira Code", monospace'
+  },
+  defaultTransition: { kind: "fade", duration: 200 }
+};
+var darkTheme = {
+  ...defaultTheme,
+  name: "dark",
+  colors: {
+    background: "#0b1220",
+    text: "#f8fafc",
+    muted: "#94a3b8",
+    accent: "#a855f7",
+    surface: "#1e293b"
+  }
+};
+var vividTheme = {
+  ...defaultTheme,
+  name: "vivid",
+  colors: {
+    background: "#0f172a",
+    text: "#f8fafc",
+    muted: "#cbd5e1",
+    accent: "#22d3ee",
+    surface: "#1e293b"
+  }
+};
+var builtinThemes = {
+  default: defaultTheme,
+  dark: darkTheme,
+  vivid: vividTheme
+};
+
+// src/theme/theme-utils.ts
+function defineTheme(overrides) {
+  return {
+    ...defaultTheme,
+    ...overrides,
+    colors: { ...defaultTheme.colors, ...overrides.colors },
+    fonts: { ...defaultTheme.fonts, ...overrides.fonts },
+    defaultTransition: overrides.defaultTransition ?? defaultTheme.defaultTransition
+  };
+}
+function resolveTheme(theme) {
+  if (!theme) return defaultTheme;
+  return defineTheme(theme);
+}
+
+// src/utils/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function TextElementRenderer({
+  element,
+  theme,
+  slideWidthPx,
+  editing = false,
+  selected = false,
+  onContentChange
+}) {
+  const t = resolveTheme(theme);
+  const style = element.style ?? {};
+  const designWidth = t.slideWidth ?? 1920;
+  const scale = slideWidthPx / designWidth;
+  const format = element.format ?? "markdown";
+  const scopeId = useId();
+  const css = {
+    fontFamily: style.fontFamily ?? t.fonts?.body,
+    fontSize: `${(style.fontSize ?? 28) * scale}px`,
+    fontWeight: weight(style.weight) ?? 400,
+    fontStyle: style.italic ? "italic" : "normal",
+    textDecoration: style.underline ? "underline" : "none",
+    color: style.color ?? t.colors?.text,
+    textAlign: style.align ?? "left",
+    lineHeight: style.lineHeight ?? 1.4,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: style.verticalAlign === "middle" ? "center" : style.verticalAlign === "bottom" ? "flex-end" : "flex-start",
+    width: "100%",
+    height: "100%",
+    padding: 0,
+    margin: 0,
+    outline: "none",
+    background: "transparent",
+    whiteSpace: format === "plain" ? "pre-wrap" : "normal",
+    wordBreak: "break-word",
+    overflow: "hidden"
+  };
+  if (editing && selected) {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        value: element.content,
+        onChange: (e) => onContentChange?.(e.target.value),
+        style: {
+          ...css,
+          whiteSpace: "pre-wrap",
+          resize: "none",
+          border: "none",
+          pointerEvents: "auto",
+          cursor: "text"
+        }
+      }
+    );
+  }
+  if (format === "plain") {
+    return /* @__PURE__ */ jsx("div", { style: css, children: element.content });
+  }
+  const proseScope = `[data-fs-text-scope="${scopeId}"]`;
+  const doubleScope = `${proseScope}${proseScope}`;
+  return /* @__PURE__ */ jsxs("div", { "data-fs-text-scope": scopeId, style: css, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+                ${proseScope} > div { width: 100%; height: 100%; font-size: inherit; }
+                ${doubleScope} :is(p, ul, ol, li, blockquote, h1, h2, h3, h4, h5, h6, pre, code, strong, em, a) {
+                    font-size: inherit;
+                }
+                ${doubleScope} h1 { font-size: 1.6em; font-weight: 700; }
+                ${doubleScope} h2 { font-size: 1.35em; font-weight: 700; }
+                ${doubleScope} h3 { font-size: 1.15em; font-weight: 600; }
+                ${proseScope} :where(p, ul, ol, h1, h2, h3, h4, h5, h6, pre, blockquote) {
+                    margin: 0;
+                    padding: 0;
+                }
+                ${proseScope} :where(p, li) + :where(p, li, ul, ol) { margin-top: 0.4em; }
+                ${proseScope} :where(ul, ol) { padding-left: 1.4em; }
+                ${proseScope} :where(strong) { font-weight: ${Math.max(700, weight(style.weight) ?? 400 + 200)}; }
+                ${proseScope} :where(a) { color: inherit; text-decoration: underline; }
+                ${proseScope} :where(code) { font-family: ${t.fonts?.mono ?? "monospace"}; }
+            ` }),
+    /* @__PURE__ */ jsx(ContentRenderer, { value: element.content, format: format === "html" ? "html" : "markdown" })
+  ] });
+}
+function weight(w) {
+  if (typeof w === "number") return w;
+  if (w === "normal") return 400;
+  if (w === "medium") return 500;
+  if (w === "semibold") return 600;
+  if (w === "bold") return 700;
+  return void 0;
+}
+function ImageElementRenderer({ element }) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: element.src,
+      alt: element.alt ?? "",
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: element.fit ?? "contain",
+        display: "block"
+      },
+      draggable: false
+    }
+  );
+}
+function ShapeElementRenderer({ element, theme, slideWidthPx }) {
+  const t = resolveTheme(theme);
+  const designWidth = t.slideWidth ?? 1920;
+  const scale = slideWidthPx / designWidth;
+  const fill = element.fill ?? "rgba(139, 92, 246, 0.15)";
+  const stroke = element.stroke ?? t.colors?.accent ?? "#8b5cf6";
+  const strokeWidth = (element.strokeWidth ?? 2) * scale;
+  const dasharray = element.dashed ? `${6 * scale} ${4 * scale}` : void 0;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      style: { width: "100%", height: "100%", display: "block", overflow: "visible" },
+      children: renderShape(element, { fill, stroke, strokeWidth, dasharray })
+    }
+  );
+}
+function renderShape(el, s) {
+  const common = {
+    fill: s.fill,
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    strokeDasharray: s.dasharray,
+    vectorEffect: "non-scaling-stroke"
+  };
+  switch (el.shape) {
+    case "rect":
+      return /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "100", height: "100", ...common });
+    case "rounded-rect": {
+      const r = el.radius ?? 8;
+      return /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "100", height: "100", rx: r, ry: r, ...common });
+    }
+    case "ellipse":
+      return /* @__PURE__ */ jsx("ellipse", { cx: "50", cy: "50", rx: "50", ry: "50", ...common });
+    case "triangle":
+      return /* @__PURE__ */ jsx("polygon", { points: "50,0 100,100 0,100", ...common });
+    case "line":
+      return /* @__PURE__ */ jsx("line", { x1: "0", y1: "50", x2: "100", y2: "50", ...common, fill: "none" });
+    case "arrow":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "0", y1: "50", x2: "85", y2: "50", ...common, fill: "none" }),
+        /* @__PURE__ */ jsx("polygon", { points: "100,50 80,30 80,70", fill: s.stroke, stroke: "none" })
+      ] });
+    default:
+      return null;
+  }
+}
+function Slide({
+  slide,
+  theme,
+  width,
+  aspectRatio,
+  editing = false,
+  onElementContentChange,
+  onElementSelect,
+  selectedElementId,
+  onElementMove,
+  onElementResize,
+  renderElement,
+  className,
+  style
+}) {
+  const t = resolveTheme(theme);
+  const ratio = aspectRatio ?? t.aspectRatio ?? 16 / 9;
+  const ref = useRef(null);
+  const [measured, setMeasured] = useState(width ?? 0);
+  useEffect(() => {
+    if (width !== void 0) {
+      setMeasured(width);
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const e of entries) {
+        setMeasured(e.contentRect.width);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [width]);
+  const slideWidthPx = measured || 1;
+  const slideHeightPx = slideWidthPx / ratio;
+  const bg = slide.background;
+  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"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("fs-slide", className),
+      style: {
+        width: width ? `${width}px` : "100%",
+        height: width ? `${width / ratio}px` : `${slideHeightPx}px`,
+        position: "relative",
+        overflow: "hidden",
+        color: t.colors?.text,
+        ...backgroundStyle,
+        ...style
+      },
+      "data-fancy-slides-slide": slide.id,
+      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
+      ))
+    }
+  );
+}
+var MIN_DIM = 0.02;
+var CLICK_DRAG_THRESHOLD_PX = 3;
+function SlideElementHost({
+  element,
+  theme,
+  slideWidthPx,
+  slideHeightPx,
+  editing,
+  selected,
+  onContentChange,
+  onSelect,
+  onMove,
+  onResize,
+  renderElement
+}) {
+  const dragRef = useRef(null);
+  if (element.hidden) return null;
+  const left = element.x * slideWidthPx;
+  const top = element.y * slideHeightPx;
+  const width = element.w * slideWidthPx;
+  const height = element.h * slideHeightPx;
+  const interactive = editing && !element.locked;
+  const canMove = interactive && !!onMove;
+  const canResize = interactive && !!onResize && selected;
+  const startDrag = (mode) => (e) => {
+    e.stopPropagation();
+    e.target.setPointerCapture(e.pointerId);
+    dragRef.current = {
+      mode,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+      startX: element.x,
+      startY: element.y,
+      startW: element.w,
+      startH: element.h,
+      didMove: false
+    };
+  };
+  const onPointerMove = (e) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    const dxPx = e.clientX - drag.startClientX;
+    const dyPx = e.clientY - drag.startClientY;
+    if (Math.hypot(dxPx, dyPx) >= CLICK_DRAG_THRESHOLD_PX) drag.didMove = true;
+    const dx = dxPx / slideWidthPx;
+    const dy = dyPx / slideHeightPx;
+    if (drag.mode === "move") {
+      if (!onMove) return;
+      const maxX = 1 - element.w;
+      const maxY = 1 - element.h;
+      const nextX = clamp(drag.startX + dx, 0, Math.max(0, maxX));
+      const nextY = clamp(drag.startY + dy, 0, Math.max(0, maxY));
+      onMove(element.id, nextX, nextY);
+      return;
+    }
+    if (!onResize) return;
+    const patch = computeResize(drag, dx, dy);
+    onResize(element.id, patch);
+  };
+  const endDrag = (e) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    try {
+      e.target.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    const wasMove = drag.didMove;
+    dragRef.current = null;
+    if (!wasMove && onSelect) onSelect(element.id);
+  };
+  const box = {
+    position: "absolute",
+    left: `${left}px`,
+    top: `${top}px`,
+    width: `${width}px`,
+    height: `${height}px`,
+    transform: element.rotation ? `rotate(${element.rotation}deg)` : void 0,
+    transformOrigin: "center center",
+    zIndex: element.z ?? "auto",
+    outline: selected ? "2px solid #8b5cf6" : void 0,
+    outlineOffset: selected ? 2 : void 0,
+    cursor: canMove ? "move" : interactive ? "pointer" : "default",
+    touchAction: canMove ? "none" : void 0
+  };
+  const inner = renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange }) ?? renderElement?.(element, slideWidthPx);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: box,
+      "data-fancy-slides-element": element.id,
+      "data-fancy-slides-element-type": element.type,
+      onPointerDown: canMove ? startDrag("move") : void 0,
+      onPointerMove: canMove ? onPointerMove : void 0,
+      onPointerUp: canMove ? endDrag : void 0,
+      onPointerCancel: canMove ? endDrag : void 0,
+      onClick: (e) => {
+        if (!onSelect || canMove) return;
+        e.stopPropagation();
+        onSelect(element.id);
+      },
+      children: [
+        inner,
+        canResize && /* @__PURE__ */ jsx(
+          ResizeHandles,
+          {
+            onStart: (anchor) => startDrag(anchor),
+            onMove: onPointerMove,
+            onEnd: endDrag
+          }
+        )
+      ]
+    }
+  );
+}
+function ResizeHandles({ onStart, onMove, onEnd }) {
+  const anchors = [
+    { anchor: "nw", style: { left: -5, top: -5 }, cursor: "nwse-resize" },
+    { anchor: "n", style: { left: "calc(50% - 5px)", top: -5 }, cursor: "ns-resize" },
+    { anchor: "ne", style: { right: -5, top: -5 }, cursor: "nesw-resize" },
+    { anchor: "e", style: { right: -5, top: "calc(50% - 5px)" }, cursor: "ew-resize" },
+    { anchor: "se", style: { right: -5, bottom: -5 }, cursor: "nwse-resize" },
+    { anchor: "s", style: { left: "calc(50% - 5px)", bottom: -5 }, cursor: "ns-resize" },
+    { anchor: "sw", style: { left: -5, bottom: -5 }, cursor: "nesw-resize" },
+    { anchor: "w", style: { left: -5, top: "calc(50% - 5px)" }, cursor: "ew-resize" }
+  ];
+  return /* @__PURE__ */ jsx(Fragment, { children: anchors.map(({ anchor, style, cursor }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        width: 10,
+        height: 10,
+        background: "#ffffff",
+        border: "1.5px solid #8b5cf6",
+        borderRadius: 2,
+        cursor,
+        touchAction: "none",
+        boxShadow: "0 1px 2px rgba(0,0,0,0.15)",
+        ...style
+      },
+      "data-fancy-slides-resize-handle": anchor,
+      onPointerDown: onStart(anchor),
+      onPointerMove: onMove,
+      onPointerUp: onEnd,
+      onPointerCancel: onEnd
+    },
+    anchor
+  )) });
+}
+function renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange }) {
+  switch (element.type) {
+    case "text":
+      return /* @__PURE__ */ jsx(
+        TextElementRenderer,
+        {
+          element,
+          theme,
+          slideWidthPx,
+          editing,
+          selected,
+          onContentChange: onContentChange ? (c) => onContentChange(element.id, c) : void 0
+        }
+      );
+    case "image":
+      return /* @__PURE__ */ jsx(ImageElementRenderer, { element });
+    case "shape":
+      return /* @__PURE__ */ jsx(ShapeElementRenderer, { element, theme, slideWidthPx });
+    case "chart":
+    case "code":
+    case "table":
+    case "embed":
+      return void 0;
+    default:
+      return null;
+  }
+}
+function orderedElements(elements) {
+  return [...elements].sort((a, b) => {
+    const az = a.z ?? -1;
+    const bz = b.z ?? -1;
+    if (az === bz) return 0;
+    return az < bz ? -1 : 1;
+  });
+}
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+function computeResize(drag, dx, dy) {
+  let { startX: x, startY: y, startW: w, startH: h } = drag;
+  const right = drag.startX + drag.startW;
+  const bottom = drag.startY + drag.startH;
+  const anchor = drag.mode;
+  if (anchor.includes("w")) {
+    const newX = clamp(drag.startX + dx, 0, right - MIN_DIM);
+    x = newX;
+    w = right - newX;
+  } else if (anchor.includes("e")) {
+    w = clamp(drag.startW + dx, MIN_DIM, 1 - drag.startX);
+  }
+  if (anchor.includes("n")) {
+    const newY = clamp(drag.startY + dy, 0, bottom - MIN_DIM);
+    y = newY;
+    h = bottom - newY;
+  } else if (anchor.includes("s")) {
+    h = clamp(drag.startH + dy, MIN_DIM, 1 - drag.startY);
+  }
+  return { x, y, w, h };
+}
+function useSlideKeyboard({
+  total,
+  index,
+  goTo,
+  onExit,
+  onBlank,
+  onFullscreen,
+  enabled = true
+}) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) {
+        return;
+      }
+      switch (e.key) {
+        case "ArrowLeft":
+        case "PageUp":
+          e.preventDefault();
+          if (index > 0) goTo(index - 1);
+          return;
+        case "ArrowRight":
+        case "PageDown":
+        case " ":
+          e.preventDefault();
+          if (index < total - 1) goTo(index + 1);
+          return;
+        case "Home":
+          e.preventDefault();
+          goTo(0);
+          return;
+        case "End":
+          e.preventDefault();
+          goTo(total - 1);
+          return;
+        case "Escape":
+          if (onExit) {
+            e.preventDefault();
+            onExit();
+          }
+          return;
+        case "b":
+        case "B":
+        case ".":
+          if (onBlank) {
+            e.preventDefault();
+            onBlank();
+          }
+          return;
+        case "f":
+        case "F":
+          if (onFullscreen) {
+            e.preventDefault();
+            onFullscreen();
+          }
+          return;
+        default: {
+          const n = parseInt(e.key, 10);
+          if (Number.isFinite(n) && n >= 1 && n <= 9) {
+            e.preventDefault();
+            goTo(Math.min(total - 1, n - 1));
+          }
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [enabled, index, total, goTo, onExit, onBlank, onFullscreen]);
+}
+function SlideViewer({
+  deck,
+  index: controlledIndex,
+  defaultIndex,
+  onIndexChange,
+  onExit,
+  autoAdvanceMs,
+  hideChrome = false,
+  renderElement,
+  className
+}) {
+  const isControlled = controlledIndex !== void 0;
+  const [internalIndex, setInternalIndex] = useState(defaultIndex ?? 0);
+  const index = isControlled ? controlledIndex : internalIndex;
+  const goTo = useCallback(
+    (i) => {
+      const clamped = Math.max(0, Math.min(deck.slides.length - 1, i));
+      if (!isControlled) setInternalIndex(clamped);
+      onIndexChange?.(clamped);
+    },
+    [deck.slides.length, isControlled, onIndexChange]
+  );
+  const [blanked, setBlanked] = useState(false);
+  const containerRef = useRef(null);
+  useSlideKeyboard({
+    total: deck.slides.length,
+    index,
+    goTo,
+    onExit,
+    onBlank: () => setBlanked((b) => !b),
+    onFullscreen: () => {
+      const el = containerRef.current;
+      if (!el) return;
+      if (document.fullscreenElement) document.exitFullscreen();
+      else el.requestFullscreen?.();
+    }
+  });
+  useEffect(() => {
+    if (!autoAdvanceMs || deck.slides.length <= 1) return;
+    const t = setTimeout(() => {
+      goTo(index + 1 < deck.slides.length ? index + 1 : 0);
+    }, autoAdvanceMs);
+    return () => clearTimeout(t);
+  }, [autoAdvanceMs, index, deck.slides.length, goTo]);
+  const slide = deck.slides[index];
+  const theme = resolveTheme(deck.theme);
+  const aspectRatio = theme.aspectRatio ?? 16 / 9;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("fs-viewer", className),
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        background: blanked ? "#000000" : theme.colors?.background ?? "#000000",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden"
+      },
+      tabIndex: 0,
+      "data-fancy-slides-viewer": deck.id,
+      children: [
+        !blanked && slide && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              // Box that fits the slide while preserving aspect ratio.
+              width: "min(100%, calc(100vh * var(--fs-ratio)))",
+              aspectRatio: String(aspectRatio),
+              // CSS var lets us inline-style the aspect ratio so it works in any container.
+              ["--fs-ratio"]: aspectRatio.toString(),
+              boxShadow: "0 8px 30px rgba(0,0,0,0.35)"
+            },
+            children: /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement })
+          }
+        ),
+        !hideChrome && !blanked && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 16,
+              right: 16,
+              padding: "4px 10px",
+              borderRadius: 999,
+              background: "rgba(15, 23, 42, 0.6)",
+              color: "#f8fafc",
+              fontSize: 12,
+              fontFamily: theme.fonts?.mono,
+              backdropFilter: "blur(6px)"
+            },
+            "aria-label": "Slide counter",
+            children: [
+              index + 1,
+              " / ",
+              deck.slides.length
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function PresenterView({
+  deck,
+  index: controlledIndex,
+  defaultIndex,
+  onIndexChange,
+  onExit,
+  startedAt,
+  renderElement,
+  className
+}) {
+  const isControlled = controlledIndex !== void 0;
+  const [internalIndex, setInternalIndex] = useState(defaultIndex ?? 0);
+  const index = isControlled ? controlledIndex : internalIndex;
+  const goTo = useCallback(
+    (i) => {
+      const clamped = Math.max(0, Math.min(deck.slides.length - 1, i));
+      if (!isControlled) setInternalIndex(clamped);
+      onIndexChange?.(clamped);
+    },
+    [deck.slides.length, isControlled, onIndexChange]
+  );
+  useSlideKeyboard({
+    total: deck.slides.length,
+    index,
+    goTo,
+    onExit
+  });
+  const theme = resolveTheme(deck.theme);
+  const slide = deck.slides[index];
+  const nextSlide = deck.slides[index + 1];
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, []);
+  const startedAtRef = useMemo(() => startedAt ?? now, [startedAt]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("fs-presenter", className),
+      style: {
+        display: "grid",
+        gridTemplateRows: "1fr auto",
+        gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)",
+        width: "100%",
+        height: "100%",
+        background: "#0b1220",
+        color: "#f8fafc",
+        fontFamily: theme.fonts?.body
+      },
+      "data-fancy-slides-presenter": deck.id,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              gridRow: 1,
+              gridColumn: 1,
+              padding: 24,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: 0
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  aspectRatio: String(theme.aspectRatio ?? 16 / 9),
+                  maxHeight: "100%",
+                  boxShadow: "0 12px 40px rgba(0,0,0,0.5)",
+                  borderRadius: 8,
+                  overflow: "hidden"
+                },
+                children: slide ? /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement }) : null
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              gridRow: 1,
+              gridColumn: 2,
+              display: "grid",
+              gridTemplateRows: "auto 1fr",
+              gap: 12,
+              padding: 24,
+              paddingLeft: 0,
+              minHeight: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(SectionLabel, { children: "Up next" }),
+                nextSlide ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      marginTop: 8,
+                      width: "100%",
+                      aspectRatio: String(theme.aspectRatio ?? 16 / 9),
+                      boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
+                      borderRadius: 6,
+                      overflow: "hidden",
+                      opacity: 0.85
+                    },
+                    children: /* @__PURE__ */ jsx(Slide, { slide: nextSlide, theme, renderElement })
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      marginTop: 8,
+                      display: "grid",
+                      placeItems: "center",
+                      aspectRatio: String(theme.aspectRatio ?? 16 / 9),
+                      borderRadius: 6,
+                      border: "1px dashed rgba(255,255,255,0.2)",
+                      color: "rgba(255,255,255,0.4)",
+                      fontSize: 13
+                    },
+                    children: "End of deck"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+                /* @__PURE__ */ jsx(SectionLabel, { children: "Speaker notes" }),
+                /* @__PURE__ */ jsx(
+                  "pre",
+                  {
+                    style: {
+                      marginTop: 8,
+                      flex: 1,
+                      overflow: "auto",
+                      background: "rgba(255,255,255,0.04)",
+                      border: "1px solid rgba(255,255,255,0.08)",
+                      borderRadius: 6,
+                      padding: 12,
+                      fontFamily: theme.fonts?.body,
+                      fontSize: 15,
+                      lineHeight: 1.5,
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word",
+                      color: "rgba(248,250,252,0.92)",
+                      margin: 0
+                    },
+                    children: slide?.notes?.trim() || /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.35)", fontStyle: "italic" }, children: "No notes for this slide." })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              gridRow: 2,
+              gridColumn: "1 / span 2",
+              display: "flex",
+              alignItems: "center",
+              gap: 24,
+              padding: "12px 24px",
+              borderTop: "1px solid rgba(255,255,255,0.1)",
+              fontSize: 13,
+              color: "rgba(248,250,252,0.7)",
+              fontFamily: theme.fonts?.mono
+            },
+            children: [
+              /* @__PURE__ */ jsxs(StatusChip, { label: "Slide", children: [
+                index + 1,
+                " / ",
+                deck.slides.length
+              ] }),
+              /* @__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" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        color: "rgba(248,250,252,0.5)",
+        fontWeight: 600
+      },
+      children
+    }
+  );
+}
+function StatusChip({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "inline-flex", alignItems: "baseline", gap: 6 }, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          fontSize: 10,
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          color: "rgba(248,250,252,0.4)"
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { style: { color: "rgba(248,250,252,0.92)", fontWeight: 600 }, children })
+  ] });
+}
+function NavButton({ onClick, disabled, children }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      disabled,
+      style: {
+        padding: "4px 10px",
+        borderRadius: 6,
+        background: "rgba(255,255,255,0.08)",
+        border: "1px solid rgba(255,255,255,0.15)",
+        color: "rgba(248,250,252,0.92)",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.4 : 1,
+        fontSize: 13,
+        fontFamily: "inherit"
+      },
+      children
+    }
+  );
+}
+function formatClock(ms) {
+  const d = new Date(ms);
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+function formatElapsed(ms) {
+  const totalSec = Math.max(0, Math.floor(ms / 1e3));
+  const h = Math.floor(totalSec / 3600);
+  const m = Math.floor(totalSec % 3600 / 60);
+  const s = totalSec % 60;
+  if (h > 0) return `${h}:${pad(m)}:${pad(s)}`;
+  return `${pad(m)}:${pad(s)}`;
+}
+function pad(n) {
+  return n < 10 ? `0${n}` : String(n);
+}
+function SlideThumbnail({
+  slide,
+  theme,
+  width = 200,
+  active = false,
+  onClick,
+  onContextMenu,
+  renderElement,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("fs-thumbnail", className),
+      style: {
+        cursor: onClick ? "pointer" : "default",
+        borderRadius: 6,
+        border: active ? "2px solid #8b5cf6" : "1px solid rgba(0,0,0,0.08)",
+        overflow: "hidden",
+        boxShadow: active ? "0 0 0 3px rgba(139, 92, 246, 0.2)" : "0 1px 2px rgba(0,0,0,0.05)",
+        background: "#ffffff",
+        width,
+        ...style
+      },
+      onClick,
+      onContextMenu,
+      "data-fancy-slides-thumbnail": slide.id,
+      children: /* @__PURE__ */ jsx(Slide, { slide, theme, width, renderElement })
+    }
+  );
+}
+
+// src/utils/ids.ts
+var counter = 0;
+function nextId(prefix = "id") {
+  counter = (counter + 1) % 1e6;
+  const t = Date.now().toString(36);
+  const c = counter.toString(36).padStart(4, "0");
+  return `${prefix}-${t}-${c}`;
+}
+function slideId() {
+  return nextId("s");
+}
+function elementId() {
+  return nextId("e");
+}
+function deckId() {
+  return nextId("d");
+}
+function useDeckState({ value, onChange, onOp }) {
+  const apply = useCallback(
+    (op) => {
+      const next = reduce(value, op);
+      onChange(next);
+      onOp?.(op);
+    },
+    [value, onChange, onOp]
+  );
+  return useMemo(() => {
+    return {
+      apply,
+      setTitle: (title) => apply({ kind: "deck_set_title", title }),
+      applyTheme: (theme) => apply({ kind: "deck_apply_theme", theme }),
+      addSlide: (index, partial) => {
+        const id = partial?.id ?? slideId();
+        const slide = {
+          id,
+          layout: partial?.layout ?? "blank",
+          elements: partial?.elements ?? [],
+          background: partial?.background,
+          transition: partial?.transition,
+          notes: partial?.notes,
+          metadata: partial?.metadata
+        };
+        apply({ kind: "slide_add", index: index ?? value.slides.length, slide });
+        return id;
+      },
+      duplicateSlide: (id) => {
+        const src = value.slides.find((s) => s.id === id);
+        if (!src) return id;
+        const newId = slideId();
+        const clone = {
+          ...src,
+          id: newId,
+          elements: src.elements.map((e) => ({ ...e, id: elementId() }))
+        };
+        const idx = value.slides.findIndex((s) => s.id === id);
+        apply({ kind: "slide_add", index: idx + 1, slide: clone });
+        return newId;
+      },
+      removeSlide: (id) => apply({ kind: "slide_remove", id }),
+      reorderSlide: (id, toIndex) => apply({ kind: "slide_reorder", id, toIndex }),
+      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 }),
+      addElement: (slideId2, element) => {
+        const id = element.id ?? elementId();
+        apply({ kind: "element_add", slideId: slideId2, element: { ...element, id } });
+        return id;
+      },
+      removeElement: (slideIdArg, elementIdArg) => apply({ kind: "element_remove", slideId: slideIdArg, elementId: elementIdArg }),
+      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 }),
+      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)
+    };
+  }, [apply, value.slides]);
+}
+function reduce(deck, op) {
+  switch (op.kind) {
+    case "deck_set_title":
+      return { ...deck, title: op.title };
+    case "deck_apply_theme":
+      return { ...deck, theme: op.theme };
+    case "slide_add": {
+      const slides = [...deck.slides];
+      slides.splice(Math.max(0, Math.min(slides.length, op.index)), 0, op.slide);
+      return { ...deck, slides };
+    }
+    case "slide_remove":
+      return { ...deck, slides: deck.slides.filter((s) => s.id !== op.id) };
+    case "slide_reorder": {
+      const idx = deck.slides.findIndex((s) => s.id === op.id);
+      if (idx < 0) return deck;
+      const slides = [...deck.slides];
+      const [moved] = slides.splice(idx, 1);
+      slides.splice(Math.max(0, Math.min(slides.length, op.toIndex)), 0, moved);
+      return { ...deck, slides };
+    }
+    case "slide_set_layout":
+      return { ...deck, slides: deck.slides.map((s) => s.id === op.id ? { ...s, layout: op.layout } : s) };
+    case "slide_set_notes":
+      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 "element_add":
+      return {
+        ...deck,
+        slides: deck.slides.map((s) => s.id === op.slideId ? { ...s, elements: [...s.elements, op.element] } : s)
+      };
+    case "element_remove":
+      return {
+        ...deck,
+        slides: deck.slides.map(
+          (s) => s.id === op.slideId ? { ...s, elements: s.elements.filter((e) => e.id !== op.elementId) } : s
+        )
+      };
+    case "element_update":
+      return {
+        ...deck,
+        slides: deck.slides.map(
+          (s) => s.id === op.slideId ? { ...s, elements: s.elements.map((e) => e.id === op.elementId ? { ...e, ...op.patch } : e) } : s
+        )
+      };
+    case "element_move":
+      return {
+        ...deck,
+        slides: deck.slides.map(
+          (s) => s.id === op.slideId ? { ...s, elements: s.elements.map((e) => e.id === op.elementId ? { ...e, x: op.x, y: op.y } : e) } : s
+        )
+      };
+    case "element_resize":
+      return {
+        ...deck,
+        slides: deck.slides.map(
+          (s) => s.id === op.slideId ? { ...s, elements: s.elements.map((e) => e.id === op.elementId ? { ...e, w: op.w, h: op.h } : e) } : s
+        )
+      };
+  }
+}
+function SlideRail({
+  slides,
+  selectedId,
+  theme,
+  onSelect,
+  onAdd,
+  onDuplicate,
+  onRemove,
+  onReorder,
+  renderElement,
+  thumbnailWidth = 184
+}) {
+  const [dragOver, setDragOver] = useState(null);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "data-react-fancy-slide-rail": "",
+      className: "fs-rail flex h-full w-full min-w-0 flex-col gap-0.5",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2", children: [
+          /* @__PURE__ */ jsxs(Text, { size: "xs", weight: "semibold", className: "!uppercase !tracking-wider !text-zinc-500", children: [
+            "Slides \xB7 ",
+            slides.length
+          ] }),
+          /* @__PURE__ */ jsx(Action, { size: "xs", icon: "plus", onClick: () => onAdd(), "aria-label": "Add slide", children: "Add" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-3 pb-3", children: [
+          slides.map((slide, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              draggable: true,
+              onDragStart: (e) => {
+                e.dataTransfer.effectAllowed = "move";
+                e.dataTransfer.setData("text/plain", slide.id);
+              },
+              onDragOver: (e) => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = "move";
+                setDragOver(slide.id);
+              },
+              onDragLeave: () => setDragOver(null),
+              onDrop: (e) => {
+                e.preventDefault();
+                const id = e.dataTransfer.getData("text/plain");
+                setDragOver(null);
+                if (id && id !== slide.id) onReorder(id, i);
+              },
+              style: {
+                position: "relative",
+                paddingTop: dragOver === slide.id ? 3 : 0,
+                borderTop: dragOver === slide.id ? "2px solid #8b5cf6" : void 0,
+                transition: "padding 80ms ease"
+              },
+              children: /* @__PURE__ */ jsxs(ContextMenu, { children: [
+                /* @__PURE__ */ jsx(ContextMenu.Trigger, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xs", className: "!w-6 shrink-0 !pt-1 !text-right !font-mono !text-zinc-400", children: i + 1 }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                    SlideThumbnail,
+                    {
+                      slide,
+                      theme,
+                      width: thumbnailWidth - 32,
+                      active: selectedId === slide.id,
+                      onClick: () => onSelect(slide.id),
+                      renderElement
+                    }
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsxs(ContextMenu.Content, { children: [
+                  /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onSelect(slide.id), children: "Open" }),
+                  /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onDuplicate(slide.id), children: "Duplicate" }),
+                  /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onAdd(i), children: "Insert above" }),
+                  /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onAdd(i + 1), children: "Insert below" }),
+                  /* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+                  /* @__PURE__ */ jsx(ContextMenu.Item, { danger: true, onClick: () => onRemove(slide.id), children: "Delete" })
+                ] })
+              ] })
+            },
+            slide.id
+          )),
+          slides.length === 0 && /* @__PURE__ */ jsx("div", { className: "grid place-items-center rounded-md border border-dashed border-zinc-300 px-3 py-8 text-center text-xs text-zinc-500 dark:border-zinc-700", children: "Empty deck \u2014 add a slide to begin." })
+        ] })
+      ]
+    }
+  );
+}
+function EditorToolbar({
+  title,
+  onTitleChange,
+  themeName,
+  onApplyTheme,
+  onInsertText,
+  onInsertImage,
+  onInsertShape,
+  onInsertChart,
+  onInsertCode,
+  onInsertTable,
+  onPresent,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "fs-toolbar flex items-center gap-2 border-b border-zinc-200 bg-white px-4 py-2 dark:border-zinc-800 dark:bg-zinc-950", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        value: title,
+        onChange: (e) => onTitleChange?.(e.target.value),
+        placeholder: "Untitled deck",
+        className: "min-w-0 flex-1 max-w-xs border-0 bg-transparent px-1 text-sm font-semibold text-zinc-900 outline-none placeholder:text-zinc-400 focus:bg-zinc-50 dark:text-zinc-100 dark:focus:bg-zinc-900",
+        "aria-label": "Deck title"
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+    /* @__PURE__ */ jsx(Tooltip, { content: "Insert text", children: /* @__PURE__ */ jsx(Action, { variant: "ghost", size: "sm", icon: "type", onClick: onInsertText, disabled, "aria-label": "Insert text" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { content: "Insert image", children: /* @__PURE__ */ jsx(Action, { variant: "ghost", size: "sm", icon: "image", onClick: onInsertImage, disabled, "aria-label": "Insert image" }) }),
+    /* @__PURE__ */ jsxs(Dropdown, { children: [
+      /* @__PURE__ */ jsx(Dropdown.Trigger, { children: /* @__PURE__ */ jsx(Action, { variant: "ghost", size: "sm", icon: "square", iconTrailing: "chevron-down", disabled, children: "Shape" }) }),
+      /* @__PURE__ */ jsxs(Dropdown.Items, { children: [
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertShape?.("rect"), children: "Rectangle" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertShape?.("rounded-rect"), children: "Rounded rectangle" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertShape?.("ellipse"), children: "Ellipse" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertShape?.("triangle"), children: "Triangle" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onInsertShape?.("line"), children: "Line" }),
+        /* @__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__ */ 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" }),
+    /* @__PURE__ */ jsxs(Dropdown, { children: [
+      /* @__PURE__ */ jsx(Dropdown.Trigger, { children: /* @__PURE__ */ jsxs(Action, { variant: "ghost", size: "sm", iconTrailing: "chevron-down", children: [
+        /* @__PURE__ */ jsx(Badge, { size: "sm", color: "zinc", children: themeName ?? "default" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Theme" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Dropdown.Items, { children: Object.values(builtinThemes).map((t) => /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onApplyTheme?.(t), children: t.name }, t.name)) })
+    ] }),
+    /* @__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 }) {
+  if (!element) {
+    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." })
+    ] });
+  }
+  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__ */ jsxs("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: element.type }),
+        /* @__PURE__ */ jsxs(Text, { size: "xs", className: "!font-mono !text-zinc-400", children: [
+          "#",
+          element.id.slice(-6)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: element.locked ? "lock" : "unlock", onClick: () => onLockToggle?.(!element.locked), "aria-label": element.locked ? "Unlock" : "Lock" }),
+        onDelete && /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", color: "red", icon: "trash", onClick: onDelete, "aria-label": "Delete" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ jsxs(Tabs, { defaultTab: "style", variant: "pills", children: [
+      /* @__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: "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: "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 }) }) })
+      ] })
+    ] }) })
+  ] });
+}
+function LayoutSection({ element, onPatch }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx(Input, { label: "X", type: "number", value: String(roundFrac(element.x)), onChange: (e) => onPatch({ x: clamp2(parseFloat(e.target.value), 0, 1) }) }),
+      /* @__PURE__ */ jsx(Input, { label: "Y", type: "number", value: String(roundFrac(element.y)), onChange: (e) => onPatch({ y: clamp2(parseFloat(e.target.value), 0, 1) }) }),
+      /* @__PURE__ */ jsx(Input, { label: "Width", type: "number", value: String(roundFrac(element.w)), onChange: (e) => onPatch({ w: clamp2(parseFloat(e.target.value), 0, 1) }) }),
+      /* @__PURE__ */ jsx(Input, { label: "Height", type: "number", value: String(roundFrac(element.h)), onChange: (e) => onPatch({ h: clamp2(parseFloat(e.target.value), 0, 1) }) })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(Slider, { label: "Rotation", value: element.rotation ?? 0, onValueChange: (v) => onPatch({ rotation: Number(v) }), min: -180, max: 180 }),
+    /* @__PURE__ */ jsx(Input, { label: "Z-index", type: "number", value: String(element.z ?? 0), onChange: (e) => onPatch({ z: parseInt(e.target.value, 10) || 0 }) })
+  ] });
+}
+function AdvancedSection({ element, onPatch }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(Input, { label: "Element id", value: element.id, disabled: true }),
+    /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "The element id is stable \u2014 agents reference elements by id." }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__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" }) })
+  ] });
+}
+function StyleSection({ element, onPatch }) {
+  switch (element.type) {
+    case "text":
+      return /* @__PURE__ */ jsx(TextStyleControls, { element, onPatch });
+    case "image":
+      return /* @__PURE__ */ jsx(ImageStyleControls, { element, onPatch });
+    case "shape":
+      return /* @__PURE__ */ jsx(ShapeStyleControls, { element, onPatch });
+    case "code":
+      return /* @__PURE__ */ jsx(CodeStyleControls, { element, onPatch });
+    case "chart":
+      return /* @__PURE__ */ jsx(ChartStyleControls, { element, onPatch });
+    case "table":
+      return /* @__PURE__ */ jsx(TableStyleControls, { element, onPatch });
+    case "embed":
+      return /* @__PURE__ */ jsx(EmbedStyleControls, { element, onPatch });
+    default:
+      return /* @__PURE__ */ jsx(Text, { size: "sm", className: "!text-zinc-500", children: "No style controls for this element type." });
+  }
+}
+function TextStyleControls({ element, onPatch }) {
+  const setStyle = (next) => onPatch({ style: { ...element.style, ...next } });
+  const s = element.style ?? {};
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(Textarea, { label: "Content", value: element.content, onValueChange: (v) => onPatch({ content: v }), rows: 4, autoResize: true }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Format",
+        list: [
+          { value: "markdown", label: "Markdown" },
+          { value: "plain", label: "Plain" },
+          { value: "html", label: "HTML" }
+        ],
+        value: element.format ?? "markdown",
+        onValueChange: (v) => onPatch({ format: v })
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(Input, { label: "Font size", type: "number", value: String(s.fontSize ?? 28), onChange: (e) => setStyle({ fontSize: parseFloat(e.target.value) || 28 }) }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Weight",
+        list: [
+          { value: "normal", label: "Normal" },
+          { value: "medium", label: "Medium" },
+          { value: "semibold", label: "Semibold" },
+          { value: "bold", label: "Bold" }
+        ],
+        value: s.weight ?? "normal",
+        onValueChange: (v) => setStyle({ weight: v })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Align",
+        list: [
+          { value: "left", label: "Left" },
+          { value: "center", label: "Center" },
+          { value: "right", label: "Right" },
+          { value: "justify", label: "Justify" }
+        ],
+        value: s.align ?? "left",
+        onValueChange: (v) => setStyle({ align: v })
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsx(ColorPicker, { value: s.color ?? "#0f172a", onChange: (c) => setStyle({ color: c }) }) })
+  ] });
+}
+function ImageStyleControls({ element, onPatch }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__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(
+      Select,
+      {
+        label: "Fit",
+        list: [
+          { value: "contain", label: "Contain" },
+          { value: "cover", label: "Cover" },
+          { value: "fill", label: "Fill (stretch)" },
+          { value: "scale-down", label: "Scale down" }
+        ],
+        value: element.fit ?? "contain",
+        onValueChange: (v) => onPatch({ fit: v })
+      }
+    )
+  ] });
+}
+function ShapeStyleControls({ element, onPatch }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Shape",
+        list: [
+          { value: "rect", label: "Rectangle" },
+          { value: "rounded-rect", label: "Rounded rectangle" },
+          { value: "ellipse", label: "Ellipse" },
+          { value: "triangle", label: "Triangle" },
+          { value: "line", label: "Line" },
+          { value: "arrow", label: "Arrow" }
+        ],
+        value: element.shape,
+        onValueChange: (v) => onPatch({ shape: v })
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldLabel, { label: "Fill", children: /* @__PURE__ */ jsx(ColorPicker, { value: element.fill ?? "#ffffff", onChange: (c) => onPatch({ fill: c }) }) }),
+    /* @__PURE__ */ jsx(FieldLabel, { label: "Stroke", children: /* @__PURE__ */ jsx(ColorPicker, { value: element.stroke ?? "#0f172a", onChange: (c) => onPatch({ stroke: c }) }) }),
+    /* @__PURE__ */ jsx(Slider, { label: "Stroke width", value: element.strokeWidth ?? 2, onValueChange: (v) => onPatch({ strokeWidth: Number(v) }), min: 0, max: 20, step: 0.5 }),
+    (element.shape === "rounded-rect" || element.shape === "rect") && /* @__PURE__ */ jsx(Slider, { label: "Corner radius", value: element.radius ?? 0, onValueChange: (v) => onPatch({ radius: Number(v) }), min: 0, max: 40 })
+  ] });
+}
+function CodeStyleControls({ element, onPatch }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(Textarea, { label: "Code", value: element.code, onValueChange: (v) => onPatch({ code: v }), rows: 6, autoResize: true }),
+    /* @__PURE__ */ jsx(Input, { label: "Language", value: element.language ?? "javascript", onChange: (e) => onPatch({ language: e.target.value }) }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Theme",
+        list: [
+          { value: "auto", label: "Auto" },
+          { value: "light", label: "Light" },
+          { value: "dark", label: "Dark" }
+        ],
+        value: element.codeTheme ?? "auto",
+        onValueChange: (v) => onPatch({ codeTheme: v })
+      }
+    )
+  ] });
+}
+function ChartStyleControls({ element, onPatch }) {
+  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,
+      {
+        label: "ECharts option (JSON)",
+        value: JSON.stringify(element.option, null, 2),
+        onValueChange: (v) => {
+          try {
+            onPatch({ option: JSON.parse(v) });
+          } catch {
+          }
+        },
+        rows: 10
+      }
+    )
+  ] });
+}
+function TableStyleControls({ element, onPatch }) {
+  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 {
+          }
+        },
+        rows: 5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: "Rows (JSON)",
+        value: JSON.stringify(element.rows, null, 2),
+        onValueChange: (v) => {
+          try {
+            onPatch({ rows: JSON.parse(v) });
+          } catch {
+          }
+        },
+        rows: 8
+      }
+    )
+  ] });
+}
+function EmbedStyleControls({ element, onPatch }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(Input, { label: "Embed URL", value: element.src, onChange: (e) => onPatch({ src: e.target.value }) }),
+    /* @__PURE__ */ jsx(Input, { label: "Title (a11y)", value: element.title ?? "", onChange: (e) => onPatch({ title: e.target.value }) }),
+    /* @__PURE__ */ jsx(Input, { label: "Sandbox", value: element.sandbox ?? "allow-scripts", onChange: (e) => onPatch({ sandbox: e.target.value }) })
+  ] });
+}
+function FieldLabel({ label, children }) {
+  return /* @__PURE__ */ jsxs("label", { className: "block", children: [
+    /* @__PURE__ */ jsx("span", { className: "mb-1 block text-xs font-medium text-zinc-600 dark:text-zinc-400", children: label }),
+    children
+  ] });
+}
+function clamp2(n, min, max) {
+  if (!Number.isFinite(n)) return min;
+  return Math.max(min, Math.min(max, n));
+}
+function roundFrac(n) {
+  return Math.round(n * 1e3) / 1e3;
+}
+function SpeakerNotes({ notes, onChange, placeholder }) {
+  return /* @__PURE__ */ jsxs("div", { className: "fs-notes border-t border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950", children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h3", size: "xs", className: "mb-1 !uppercase !tracking-wider !text-zinc-500", children: "Speaker notes" }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: notes ?? "",
+        onValueChange: onChange,
+        placeholder: placeholder ?? "Notes are visible only to the presenter\u2026",
+        rows: 3,
+        autoResize: true,
+        minRows: 2,
+        maxRows: 6
+      }
+    )
+  ] });
+}
+function DeckEditor({
+  value,
+  onChange,
+  onOp,
+  onPresent,
+  selectedSlideId: controlledSlideId,
+  onSelectedSlideChange,
+  renderElement,
+  hideRail = false,
+  hideNotes = false,
+  hideToolbar = false,
+  hideInspector = false,
+  toolbarExtra,
+  className
+}) {
+  const deck = value;
+  const ops = useDeckState({ value: deck, onChange, onOp });
+  const [internalSlideId, setInternalSlideId] = useState(deck.slides[0]?.id ?? null);
+  const isControlled = controlledSlideId !== void 0;
+  const slideId2 = isControlled ? controlledSlideId : internalSlideId;
+  const setSlideId = useCallback(
+    (id) => {
+      if (!isControlled) setInternalSlideId(id);
+      onSelectedSlideChange?.(id);
+    },
+    [isControlled, onSelectedSlideChange]
+  );
+  useEffect(() => {
+    if (slideId2 && !deck.slides.some((s) => s.id === slideId2)) {
+      setSlideId(deck.slides[0]?.id ?? null);
+    } else if (!slideId2 && deck.slides.length > 0) {
+      setSlideId(deck.slides[0].id);
+    }
+  }, [deck.slides, slideId2, setSlideId]);
+  const slide = deck.slides.find((s) => s.id === slideId2);
+  const [elementIdSelected, setElementIdSelected] = useState(null);
+  useEffect(() => {
+    setElementIdSelected(null);
+  }, [slideId2]);
+  const selectedElement = slide && elementIdSelected ? slide.elements.find((e) => e.id === elementIdSelected) ?? null : null;
+  const insert = useCallback(
+    (element) => {
+      if (!slide) return;
+      const id = ops.addElement(slide.id, { id: elementId(), ...element });
+      setElementIdSelected(id);
+    },
+    [slide, ops]
+  );
+  const insertText = useCallback(
+    () => insert({
+      type: "text",
+      x: 0.1,
+      y: 0.4,
+      w: 0.8,
+      h: 0.2,
+      content: "Click to edit",
+      format: "plain",
+      style: { fontSize: 36, weight: "semibold", align: "center" }
+    }),
+    [insert]
+  );
+  const insertImage = useCallback(
+    () => insert({
+      type: "image",
+      x: 0.25,
+      y: 0.25,
+      w: 0.5,
+      h: 0.5,
+      src: "https://placehold.co/600x400?text=Image",
+      fit: "contain"
+    }),
+    [insert]
+  );
+  const insertShape = useCallback(
+    (shape) => insert({
+      type: "shape",
+      shape,
+      x: 0.3,
+      y: 0.3,
+      w: 0.4,
+      h: 0.4,
+      fill: shape === "line" || shape === "arrow" ? "none" : "rgba(139,92,246,0.15)",
+      stroke: "#8b5cf6",
+      strokeWidth: 2
+    }),
+    [insert]
+  );
+  const insertChart = useCallback(
+    () => 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] }]
+      }
+    }),
+    [insert]
+  );
+  const insertCode = useCallback(
+    () => insert({
+      type: "code",
+      x: 0.15,
+      y: 0.2,
+      w: 0.7,
+      h: 0.6,
+      code: 'function hello() {\n  return "world";\n}\n',
+      language: "typescript",
+      codeTheme: "dark"
+    }),
+    [insert]
+  );
+  const insertTable = useCallback(
+    () => insert({
+      type: "table",
+      x: 0.15,
+      y: 0.25,
+      w: 0.7,
+      h: 0.5,
+      columns: [
+        { key: "name", label: "Name" },
+        { key: "value", label: "Value" }
+      ],
+      rows: [
+        { name: "Alpha", value: 12 },
+        { name: "Beta", value: 34 },
+        { name: "Gamma", value: 56 }
+      ]
+    }),
+    [insert]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `fs-editor flex h-full w-full flex-col bg-zinc-100 dark:bg-zinc-950 ${className ?? ""}`,
+      "data-fancy-slides-editor": deck.id,
+      children: [
+        !hideToolbar && /* @__PURE__ */ jsx(
+          EditorToolbar,
+          {
+            title: deck.title,
+            onTitleChange: (t) => ops.setTitle(t),
+            themeName: deck.theme.name,
+            onApplyTheme: (t) => ops.applyTheme(t),
+            onInsertText: insertText,
+            onInsertImage: insertImage,
+            onInsertShape: insertShape,
+            onInsertChart: insertChart,
+            onInsertCode: insertCode,
+            onInsertTable: insertTable,
+            onPresent,
+            disabled: !slide
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+          !hideRail && /* @__PURE__ */ jsx("div", { className: "w-56 shrink-0 overflow-y-auto border-r border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950", children: /* @__PURE__ */ jsx(
+            SlideRail,
+            {
+              slides: deck.slides,
+              selectedId: slideId2,
+              theme: deck.theme,
+              onSelect: setSlideId,
+              onAdd: (after) => {
+                const id = ops.addSlide(after !== void 0 ? after : deck.slides.length);
+                setSlideId(id);
+              },
+              onDuplicate: (id) => {
+                const newId = ops.duplicateSlide(id);
+                setSlideId(newId);
+              },
+              onRemove: (id) => ops.removeSlide(id),
+              onReorder: (id, toIndex) => ops.reorderSlide(id, toIndex),
+              renderElement
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center overflow-auto p-6", children: slide ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rounded-lg shadow-xl",
+                style: {
+                  width: "min(96%, 1280px)",
+                  aspectRatio: String(resolveTheme(deck.theme).aspectRatio ?? 16 / 9),
+                  background: "white"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Slide,
+                  {
+                    slide,
+                    theme: deck.theme,
+                    editing: true,
+                    onElementContentChange: (eid, content) => ops.updateElement(slide.id, eid, { content }),
+                    onElementSelect: setElementIdSelected,
+                    selectedElementId: elementIdSelected,
+                    onElementMove: (eid, x, y) => ops.moveElement(slide.id, eid, x, y),
+                    onElementResize: (eid, patch) => ops.updateElement(slide.id, eid, patch),
+                    renderElement
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "grid place-items-center rounded-lg border border-dashed border-zinc-300 bg-white px-12 py-24 text-sm text-zinc-500 dark:border-zinc-700 dark:bg-zinc-950", children: "Add a slide to start editing." }) }),
+            !hideNotes && slide && /* @__PURE__ */ jsx(SpeakerNotes, { notes: slide.notes, onChange: (n) => ops.setNotes(slide.id, n) })
+          ] }),
+          !hideInspector && /* @__PURE__ */ jsx("div", { className: "w-72 shrink-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
+            ElementInspector,
+            {
+              element: selectedElement,
+              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 })
+            }
+          ) })
+        ] }),
+        toolbarExtra
+      ]
+    }
+  );
+}
+
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map