@braincrew-lab/langchain-canvas 0.3.0 → 0.5.0

package/dist/SlidesRenderer-4TZNTSEL.js

@@ -0,0 +1,514 @@
+import { deckPage, pageAspect, DEFAULT_SLIDE_PAGE_IN, resolveElements, fontScaleFor } from './chunk-SE6AP3A7.js';
+import { useAssetUrl } from './chunk-FTNRRJ3K.js';
+import './chunk-7T5DRR3F.js';
+import { useArtifactPatch } from './chunk-K2UZAYW2.js';
+import './chunk-EHW446VF.js';
+import { useState, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function shapeStyle(el) {
+  const fill = el.fill ?? "currentColor";
+  if (el.shape === "ellipse") return { width: "100%", height: "100%", background: fill, borderRadius: "50%" };
+  if (el.shape === "line") return { width: "100%", height: "100%", background: fill, borderRadius: 2 };
+  return { width: "100%", height: "100%", background: fill, borderRadius: 8 };
+}
+var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+var dupSeq = 0;
+var dupId = (base) => `${base}_c${Date.now().toString(36)}${dupSeq++}`;
+var SNAP = 1.2;
+function snapAxis(pos, size, targets) {
+  const anchors = [pos, pos + size / 2, pos + size];
+  let best = null;
+  for (const anchor of anchors) {
+    for (const t of targets) {
+      const delta = t - anchor;
+      if (Math.abs(delta) <= SNAP && (!best || Math.abs(delta) < Math.abs(best.delta))) {
+        best = { delta, guide: t };
+      }
+    }
+  }
+  return best ? { pos: pos + best.delta, guide: best.guide } : { pos, guide: null };
+}
+function FreeSlide({ elements, onChange, padding, fontScale = 1 }) {
+  const slideRef = useRef(null);
+  const assetUrl = useAssetUrl();
+  const [els, setEls] = useState(elements);
+  const [selected, setSelected] = useState(null);
+  const [editingId, setEditingId] = useState(null);
+  const [guides, setGuides] = useState({ x: null, y: null });
+  const drag = useRef(null);
+  useEffect(() => {
+    if (!drag.current) setEls(elements);
+  }, [elements]);
+  const commit = (next) => {
+    setEls(next);
+    onChange(next);
+  };
+  const updateEl = (id, partial) => commit(els.map((el) => el.id === id ? { ...el, ...partial } : el));
+  const duplicate = (el) => {
+    const copy = {
+      ...el,
+      id: dupId(el.id),
+      x: Math.min(el.x + 4, 100 - el.w),
+      y: Math.min(el.y + 4, 100 - el.h)
+    };
+    commit([...els, copy]);
+    setSelected(copy.id);
+  };
+  const zorder = (id, dir) => {
+    const i = els.findIndex((e) => e.id === id);
+    const j = i + dir;
+    if (i < 0 || j < 0 || j >= els.length) return;
+    const next = [...els];
+    [next[i], next[j]] = [next[j], next[i]];
+    commit(next);
+  };
+  const onDown = (e, el, mode) => {
+    if (editingId === el.id && mode === "move") return;
+    e.preventDefault();
+    e.stopPropagation();
+    setSelected(el.id);
+    drag.current = { id: el.id, mode, sx: e.clientX, sy: e.clientY, orig: { ...el } };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onMove = (e) => {
+    const d = drag.current;
+    const rect = slideRef.current?.getBoundingClientRect();
+    if (!d || !rect) return;
+    const dx = (e.clientX - d.sx) / rect.width * 100;
+    const dy = (e.clientY - d.sy) / rect.height * 100;
+    if (d.mode === "resize") {
+      setGuides({ x: null, y: null });
+      setEls((prev) => prev.map((el) => el.id === d.id ? { ...el, w: clamp(d.orig.w + dx, 6, 100 - el.x), h: clamp(d.orig.h + dy, 5, 100 - el.y) } : el));
+      return;
+    }
+    const others = els.filter((el) => el.id !== d.id);
+    const xTargets = [0, 50, 100, ...others.flatMap((o) => [o.x, o.x + o.w / 2, o.x + o.w])];
+    const yTargets = [0, 50, 100, ...others.flatMap((o) => [o.y, o.y + o.h / 2, o.y + o.h])];
+    const rawX = clamp(d.orig.x + dx, 0, 100 - d.orig.w);
+    const rawY = clamp(d.orig.y + dy, 0, 100 - d.orig.h);
+    const sx = snapAxis(rawX, d.orig.w, xTargets);
+    const sy = snapAxis(rawY, d.orig.h, yTargets);
+    setGuides({ x: sx.guide, y: sy.guide });
+    setEls(
+      (prev) => prev.map(
+        (el) => el.id === d.id ? { ...el, x: clamp(sx.pos, 0, 100 - el.w), y: clamp(sy.pos, 0, 100 - el.h) } : el
+      )
+    );
+  };
+  const onUp = () => {
+    if (drag.current) {
+      drag.current = null;
+      setGuides({ x: null, y: null });
+      onChange(els);
+    }
+  };
+  useEffect(() => {
+    if (!selected) return;
+    const onKey = (e) => {
+      if (editingId) return;
+      const ae = document.activeElement;
+      if (ae && (ae.tagName === "INPUT" || ae.tagName === "TEXTAREA" || ae.isContentEditable)) return;
+      const el = els.find((x) => x.id === selected);
+      if (!el) return;
+      const step = e.shiftKey ? 5 : 1;
+      const nudge = (ddx, ddy) => {
+        e.preventDefault();
+        commit(els.map((x) => x.id === selected ? { ...x, x: clamp(x.x + ddx, 0, 100 - x.w), y: clamp(x.y + ddy, 0, 100 - x.h) } : x));
+      };
+      if (e.key === "ArrowLeft") nudge(-step, 0);
+      else if (e.key === "ArrowRight") nudge(step, 0);
+      else if (e.key === "ArrowUp") nudge(0, -step);
+      else if (e.key === "ArrowDown") nudge(0, step);
+      else if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        commit(els.filter((x) => x.id !== selected));
+        setSelected(null);
+      } else if ((e.metaKey || e.ctrlKey) && (e.key === "d" || e.key === "D")) {
+        e.preventDefault();
+        duplicate(el);
+      } else if (e.key === "Escape") {
+        setSelected(null);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [selected, editingId, els]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cv-free",
+      ref: slideRef,
+      style: padding ? { inset: `${padding}%` } : void 0,
+      onPointerMove: onMove,
+      onPointerUp: onUp,
+      onPointerLeave: onUp,
+      onClick: () => {
+        setSelected(null);
+        setEditingId(null);
+      },
+      children: [
+        guides.x !== null && /* @__PURE__ */ jsx("span", { className: "cv-free__guide cv-free__guide--v", style: { left: `${guides.x}%` } }),
+        guides.y !== null && /* @__PURE__ */ jsx("span", { className: "cv-free__guide cv-free__guide--h", style: { top: `${guides.y}%` } }),
+        els.map((el) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `cv-free__el ${selected === el.id ? "is-selected" : ""}`,
+            style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` },
+            onPointerDown: (e) => onDown(e, el, "move"),
+            onDoubleClick: (e) => {
+              if (el.type === "text") {
+                e.stopPropagation();
+                setEditingId(el.id);
+              }
+            },
+            onClick: (e) => {
+              e.stopPropagation();
+              setSelected(el.id);
+            },
+            children: [
+              el.type === "text" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "cv-free__text",
+                  contentEditable: editingId === el.id,
+                  suppressContentEditableWarning: true,
+                  style: {
+                    fontSize: (el.fontSize ?? 24) * fontScale,
+                    fontWeight: el.bold ? 700 : 400,
+                    color: el.color,
+                    textAlign: el.align ?? "left"
+                  },
+                  onBlur: (e) => {
+                    setEditingId(null);
+                    updateEl(el.id, { text: e.currentTarget.textContent ?? "" });
+                  },
+                  children: el.text
+                }
+              ) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { style: shapeStyle(el) }) : /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: assetUrl(el.src), alt: "", draggable: false }),
+              selected === el.id && el.type === "text" && /* @__PURE__ */ jsxs("div", { className: `cv-free__fmt ${el.y < 16 ? "cv-free__fmt--below" : ""}`, onPointerDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: [
+                /* @__PURE__ */ jsx("button", { className: el.bold ? "is-on" : "", onClick: () => updateEl(el.id, { bold: !el.bold }), title: "Bold", children: /* @__PURE__ */ jsx("b", { children: "B" }) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    min: 8,
+                    max: 120,
+                    value: el.fontSize ?? 24,
+                    onChange: (e) => updateEl(el.id, { fontSize: Number(e.target.value) }),
+                    title: "Font size"
+                  }
+                ),
+                /* @__PURE__ */ jsx("input", { type: "color", value: el.color ?? "#1f2328", onChange: (e) => updateEl(el.id, { color: e.target.value }), title: "Text color" }),
+                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "left" }), title: "Align left", children: "\u27F8" }),
+                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "center" }), title: "Align center", children: "\u2261" }),
+                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "right" }), title: "Align right", children: "\u27F9" })
+              ] }),
+              selected === el.id && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "cv-free__resize", onPointerDown: (e) => onDown(e, el, "resize") }),
+                /* @__PURE__ */ jsxs("div", { className: `cv-free__ctl ${el.y < 16 ? "cv-free__ctl--below" : ""}`, onPointerDown: (e) => e.stopPropagation(), children: [
+                  el.type === "shape" && /* @__PURE__ */ jsx("input", { className: "cv-free__ctl-fill", type: "color", value: el.fill ?? "#5b5bd6", onChange: (e) => updateEl(el.id, { fill: e.target.value }), onClick: (e) => e.stopPropagation(), title: "Fill color" }),
+                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    duplicate(el);
+                  }, title: "Duplicate", children: "\u29C9" }),
+                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    zorder(el.id, 1);
+                  }, title: "Bring forward", children: "\u2191" }),
+                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    zorder(el.id, -1);
+                  }, title: "Send back", children: "\u2193" }),
+                  /* @__PURE__ */ jsx("button", { className: "cv-free__ctl-del", onClick: (e) => {
+                    e.stopPropagation();
+                    commit(els.filter((x) => x.id !== el.id));
+                  }, title: "Delete", children: "\xD7" })
+                ] })
+              ] })
+            ]
+          },
+          el.id
+        ))
+      ]
+    }
+  );
+}
+function useFontScale(page) {
+  const [node, setNode] = useState(null);
+  const [scale, setScale] = useState(1);
+  useEffect(() => {
+    if (!node) return;
+    const measure = () => setScale(fontScaleFor(node.clientWidth, page));
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node, page.widthIn, page.heightIn]);
+  return { ref: setNode, scale };
+}
+var THEMES = [
+  { id: "light", label: "Light", bg: "#ffffff", text: "#1f2328" },
+  { id: "paper", label: "Paper", bg: "#f7f5ef", text: "#2b2a26" },
+  { id: "dark", label: "Dark", bg: "#14171f", text: "#f0f2f5" },
+  { id: "midnight", label: "Midnight", bg: "#0b1020", text: "#e6e8ef" },
+  { id: "navy", label: "Navy", bg: "#0d1b3e", text: "#eef2ff" },
+  { id: "forest", label: "Forest", bg: "#0f2a22", text: "#e6f2ec" },
+  { id: "sunset", label: "Sunset", bg: "#2b1a2e", text: "#ffe8d6" },
+  { id: "mint", label: "Mint", bg: "#0f2a24", text: "#d7f5ec" }
+];
+var SHAPES = [
+  { id: "rect", label: "\u25AD Rectangle", box: { w: 30, h: 20 } },
+  { id: "ellipse", label: "\u25EF Ellipse", box: { w: 24, h: 24 } },
+  { id: "line", label: "\u2014 Line", box: { w: 40, h: 2 } }
+];
+var LAYOUTS = {
+  title: { label: "Title", els: [
+    { type: "text", x: 12, y: 34, w: 76, h: 18, text: "Presentation title", fontSize: 54, bold: true, align: "center" },
+    { type: "text", x: 20, y: 56, w: 60, h: 10, text: "Subtitle or one-line summary", fontSize: 24, align: "center" }
+  ] },
+  section: { label: "Section", els: [
+    { type: "shape", shape: "rect", x: 10, y: 34, w: 8, h: 3, fill: "#5b5bd6" },
+    { type: "text", x: 10, y: 40, w: 80, h: 16, text: "Section title", fontSize: 46, bold: true }
+  ] },
+  bullets: { label: "Bullets", els: [
+    { type: "text", x: 10, y: 12, w: 80, h: 12, text: "Heading", fontSize: 36, bold: true },
+    { type: "text", x: 10, y: 30, w: 80, h: 50, text: "\u2022 First key point\n\u2022 Second key point\n\u2022 Third key point", fontSize: 26 }
+  ] },
+  "two-column": { label: "Two column", els: [
+    { type: "text", x: 8, y: 16, w: 40, h: 60, text: "Left column\n\n\u2022 point\n\u2022 point", fontSize: 24 },
+    { type: "text", x: 52, y: 16, w: 40, h: 60, text: "Right column\n\n\u2022 point\n\u2022 point", fontSize: 24 }
+  ] },
+  quote: { label: "Quote", els: [
+    { type: "text", x: 12, y: 30, w: 76, h: 30, text: "\u201CA short, memorable quote.\u201D", fontSize: 40, bold: true },
+    { type: "text", x: 12, y: 62, w: 50, h: 8, text: "\u2014 Attribution", fontSize: 22 }
+  ] }
+};
+var elementSeq = 0;
+var newElementId = () => `el_${Date.now().toString(36)}_${elementSeq++}`;
+function SlidesRenderer({ artifact }) {
+  const slides = artifact.data.slides ?? [];
+  const patch = useArtifactPatch(artifact.id);
+  const assetUrl = useAssetUrl();
+  const [index, setIndex] = useState(0);
+  const [dragIndex, setDragIndex] = useState(null);
+  const [presenting, setPresenting] = useState(false);
+  const imgRef = useRef(null);
+  const bgRef = useRef(null);
+  const page = deckPage(artifact.data);
+  const aspect = pageAspect(page);
+  const editBox = useFontScale(page);
+  const presentBox = useFontScale(page);
+  const thumbFont = 0.12 * (DEFAULT_SLIDE_PAGE_IN.widthIn / page.widthIn);
+  useEffect(() => {
+    if (!presenting) return;
+    const onKey = (e) => {
+      if (e.key === "ArrowRight" || e.key === " ") setIndex((i) => Math.min(i + 1, slides.length - 1));
+      else if (e.key === "ArrowLeft") setIndex((i) => Math.max(i - 1, 0));
+      else if (e.key === "Escape") setPresenting(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [presenting]);
+  if (slides.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-deck cv-deck--empty", children: "No slides yet\u2026" });
+  }
+  const at = Math.min(index, slides.length - 1);
+  const slide = slides[at];
+  const slideStyle = {
+    ...slide.background ? { background: slide.background } : {},
+    ...slide.textColor ? { color: slide.textColor } : {}
+  };
+  const setSlides = (next) => patch({ slides: next });
+  const update = (partial) => setSlides(slides.map((s, i) => i === at ? { ...s, ...partial } : s));
+  const addSlide = () => {
+    const next = [...slides];
+    next.splice(at + 1, 0, { elements: [{ id: newElementId(), type: "text", x: 8, y: 10, w: 80, h: 14, text: "New slide", fontSize: 36, bold: true }] });
+    setSlides(next);
+    setIndex(at + 1);
+  };
+  const duplicateSlide = () => {
+    const next = [...slides];
+    next.splice(at + 1, 0, { ...slide, elements: resolveElements(slide).map((e) => ({ ...e })) });
+    setSlides(next);
+    setIndex(at + 1);
+  };
+  const deleteSlide = () => {
+    if (slides.length === 1) return;
+    setSlides(slides.filter((_, i) => i !== at));
+    setIndex(Math.max(0, at - 1));
+  };
+  const moveSlide = (dir) => {
+    const j = at + dir;
+    if (j < 0 || j >= slides.length) return;
+    const next = [...slides];
+    [next[at], next[j]] = [next[j], next[at]];
+    setSlides(next);
+    setIndex(j);
+  };
+  const reorder = (from, to) => {
+    if (from === to) return;
+    const next = [...slides];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    setSlides(next);
+    setIndex(to);
+  };
+  const addElement = (el) => update({ elements: [...resolveElements(slide), { ...el, id: newElementId() }] });
+  const addTextEl = () => addElement({ type: "text", x: 12, y: 16, w: 45, h: 16, text: "Text", fontSize: 24 });
+  const addImageEl = (file) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => addElement({ type: "image", x: 22, y: 22, w: 40, h: 34, src: String(reader.result) });
+    reader.readAsDataURL(file);
+  };
+  const addShapeEl = (shape) => {
+    const s = SHAPES.find((x) => x.id === shape);
+    if (s) addElement({ type: "shape", shape, x: 20, y: 20, w: s.box.w, h: s.box.h, fill: "#5b5bd6" });
+  };
+  const applyLayout = (key) => {
+    const l = LAYOUTS[key];
+    if (l) update({ elements: l.els.map((e) => ({ ...e, id: newElementId() })) });
+  };
+  const setSlideBgImage = (file) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => update({ background: `#000 url("${String(reader.result)}") center/cover no-repeat` });
+    reader.readAsDataURL(file);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "cv-deck", children: [
+    /* @__PURE__ */ jsxs("aside", { className: "cv-deck__rail cv-chrome", children: [
+      slides.map((s, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `cv-deck__thumb-wrap ${i === at ? "is-active" : ""} ${dragIndex === i ? "is-dragging" : ""}`,
+          draggable: true,
+          onDragStart: () => setDragIndex(i),
+          onDragOver: (e) => e.preventDefault(),
+          onDrop: () => {
+            if (dragIndex !== null) reorder(dragIndex, i);
+            setDragIndex(null);
+          },
+          onDragEnd: () => setDragIndex(null),
+          children: /* @__PURE__ */ jsxs("button", { className: "cv-deck__thumb", onClick: () => setIndex(i), children: [
+            /* @__PURE__ */ jsx("span", { className: "cv-deck__thumb-n", children: i + 1 }),
+            /* @__PURE__ */ jsx("div", { className: "cv-deck__thumb-slide", style: { aspectRatio: aspect, ...s.background ? { background: s.background } : {} }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: `${s.padding ?? 0}%` }, children: resolveElements(s).map(
+              (el) => el.type === "text" ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, fontSize: (el.fontSize ?? 24) * thumbFont, fontWeight: el.bold ? 700 : 400, color: el.color ?? s.textColor, overflow: "hidden", whiteSpace: "pre-wrap" },
+                  children: el.text
+                },
+                el.id
+              ) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, color: s.textColor, ...shapeStyle(el) } }, el.id) : /* @__PURE__ */ jsx("img", { src: assetUrl(el.src), alt: "", style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, objectFit: "contain" } }, el.id)
+            ) }) })
+          ] })
+        },
+        i
+      )),
+      /* @__PURE__ */ jsx("button", { className: "cv-deck__addslide", onClick: addSlide, children: "+ Add slide" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "cv-deck__main", children: [
+      /* @__PURE__ */ jsxs("div", { className: "cv-deck__toolbar cv-chrome", children: [
+        /* @__PURE__ */ jsx("button", { onClick: addTextEl, title: "Add text box", children: "+ Text" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => imgRef.current?.click(), title: "Add image", children: "+ Image" }),
+        /* @__PURE__ */ jsx("input", { ref: imgRef, type: "file", accept: "image/*", hidden: true, onChange: (e) => addImageEl(e.target.files?.[0]) }),
+        /* @__PURE__ */ jsx("input", { ref: bgRef, type: "file", accept: "image/*", hidden: true, onChange: (e) => setSlideBgImage(e.target.files?.[0]) }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-deck__theme",
+            value: "",
+            title: "Add a shape",
+            onChange: (e) => {
+              if (e.target.value) addShapeEl(e.target.value);
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "+ Shape" }),
+              SHAPES.map((s) => /* @__PURE__ */ jsx("option", { value: s.id, children: s.label }, s.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-deck__theme",
+            value: "",
+            title: "Apply a layout",
+            onChange: (e) => {
+              if (e.target.value) applyLayout(e.target.value);
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Layout\u2026" }),
+              Object.entries(LAYOUTS).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-deck__theme",
+            value: "",
+            title: "Theme",
+            onChange: (e) => {
+              const t = THEMES.find((x) => x.id === e.target.value);
+              if (t) update({ background: t.bg, textColor: t.text });
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Theme\u2026" }),
+              THEMES.map((t) => /* @__PURE__ */ jsx("option", { value: t.id, children: t.label }, t.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("label", { className: "cv-deck__bg", title: "Background color", children: /* @__PURE__ */ jsx("input", { type: "color", value: /^#/.test(slide.background ?? "") ? slide.background : "#ffffff", onChange: (e) => update({ background: e.target.value }) }) }),
+        /* @__PURE__ */ jsx("button", { onClick: () => bgRef.current?.click(), title: "Background image", children: "\u{1F5BC} BG" }),
+        /* @__PURE__ */ jsxs("label", { className: "cv-deck__pad", title: "Content padding (% of slide)", children: [
+          "Pad",
+          /* @__PURE__ */ jsx("input", { type: "number", min: 0, max: 20, value: slide.padding ?? 0, onChange: (e) => update({ padding: Number(e.target.value) || void 0 }) })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "cv-deck__spacer" }),
+        /* @__PURE__ */ jsx("button", { className: "cv-deck__present", onClick: () => setPresenting(true), title: "Present (full screen)", children: "\u25B6 Present" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => moveSlide(-1), title: "Move up", disabled: at === 0, children: "\u25B2" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => moveSlide(1), title: "Move down", disabled: at === slides.length - 1, children: "\u25BC" }),
+        /* @__PURE__ */ jsx("button", { onClick: duplicateSlide, title: "Duplicate slide", children: "\u29C9" }),
+        /* @__PURE__ */ jsx("button", { onClick: deleteSlide, title: "Delete slide", disabled: slides.length === 1, children: "\u{1F5D1}" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "cv-slide cv-slide--blank", ref: editBox.ref, style: { aspectRatio: aspect, ...slideStyle }, children: /* @__PURE__ */ jsx(FreeSlide, { elements: resolveElements(slide), onChange: (elements) => update({ elements }), padding: slide.padding, fontScale: editBox.scale }) }),
+      /* @__PURE__ */ jsxs("div", { className: "cv-deck__nav cv-chrome", children: [
+        /* @__PURE__ */ jsx("button", { disabled: at === 0, onClick: () => setIndex(at - 1), "aria-label": "Previous slide", children: "\u2039" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          at + 1,
+          " / ",
+          slides.length
+        ] }),
+        /* @__PURE__ */ jsx("button", { disabled: at === slides.length - 1, onClick: () => setIndex(at + 1), "aria-label": "Next slide", children: "\u203A" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "cv-deck__notes cv-chrome",
+          value: slide.notes ?? "",
+          placeholder: "Speaker notes\u2026",
+          onChange: (e) => update({ notes: e.target.value })
+        }
+      )
+    ] }),
+    presenting && /* @__PURE__ */ jsxs("div", { className: "cv-present", onClick: () => setIndex(Math.min(at + 1, slides.length - 1)), children: [
+      /* @__PURE__ */ jsx("div", { ref: presentBox.ref, className: "cv-present__slide cv-present__fade cv-slide cv-slide--blank", style: { aspectRatio: aspect, ...slideStyle }, children: /* @__PURE__ */ jsx("div", { className: "cv-free", style: slide.padding ? { inset: `${slide.padding}%` } : void 0, children: resolveElements(slide).map(
+        (el) => el.type === "text" ? /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` }, children: /* @__PURE__ */ jsx("div", { className: "cv-free__text", style: { fontSize: (el.fontSize ?? 24) * presentBox.scale, fontWeight: el.bold ? 700 : 400, color: el.color, textAlign: el.align ?? "left", whiteSpace: "pre-wrap" }, children: el.text }) }, el.id) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, color: slide.textColor }, children: /* @__PURE__ */ jsx("div", { style: shapeStyle(el) }) }, el.id) : /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` }, children: /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: assetUrl(el.src), alt: "" }) }, el.id)
+      ) }) }, at),
+      slide.notes ? /* @__PURE__ */ jsx("div", { className: "cv-present__notes", onClick: (e) => e.stopPropagation(), children: slide.notes }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "cv-present__hint", children: [
+        at + 1,
+        " / ",
+        slides.length,
+        " \xB7 \u2190 \u2192 to navigate \xB7 Esc to exit"
+      ] })
+    ] })
+  ] });
+}
+
+export { SlidesRenderer };