@braincrew-lab/langchain-canvas 0.1.14 → 0.3.0

package/dist/SlidesRenderer-JNPXNTNJ.js

@@ -0,0 +1,964 @@
+import { resolveElements } from './chunk-6L3AL6W4.js';
+import { useArtifactPatch } from './chunk-FSFOURG5.js';
+import './chunk-ZLXAWRUP.js';
+import { useT } from './chunk-QMOJEGRH.js';
+import { useState, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function shapeStyle(el) {
+  if (el.shape === "line") return { width: "100%", height: "100%", background: el.fill ?? "currentColor", borderRadius: 2 };
+  const borderRadius = el.shape === "ellipse" ? "50%" : el.radius ?? 8;
+  if (!el.fill) {
+    return { width: "100%", height: "100%", background: "transparent", border: "1.5px solid currentColor", borderRadius, boxSizing: "border-box" };
+  }
+  return { width: "100%", height: "100%", background: el.fill, borderRadius };
+}
+function rotateStyle(el) {
+  return el.rotate ? { transform: `rotate(${el.rotate}deg)` } : {};
+}
+var normalizeDeg = (deg) => {
+  const d = (deg % 360 + 360) % 360;
+  return d === 0 ? void 0 : d;
+};
+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 groupSeq = 0;
+var newGroupId = () => `grp_${Date.now().toString(36)}${groupSeq++}`;
+var elementClipboard = [];
+var SNAP = 1.2;
+var NUDGE_STEP = 0.5;
+var NUDGE_STEP_BIG = 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 boundsOf(els) {
+  const x1 = Math.min(...els.map((el) => el.x));
+  const y1 = Math.min(...els.map((el) => el.y));
+  const x2 = Math.max(...els.map((el) => el.x + el.w));
+  const y2 = Math.max(...els.map((el) => el.y + el.h));
+  return { x1, y1, x2, y2 };
+}
+function FreeSlide({ elements, onChange, padding }) {
+  const t = useT();
+  const slideRef = useRef(null);
+  const [els, setEls] = useState(elements);
+  const [selected, setSelected] = useState([]);
+  const [editingId, setEditingId] = useState(null);
+  const [guides, setGuides] = useState({ x: null, y: null });
+  const drag = useRef(null);
+  const marquee = useRef(null);
+  const [marqueeBox, setMarqueeBox] = useState(null);
+  const suppressCanvasClick = useRef(false);
+  useEffect(() => {
+    if (!drag.current) setEls(elements);
+    setSelected((prev) => prev.filter((id) => elements.some((el) => el.id === id)));
+  }, [elements]);
+  const selectedSet = new Set(selected);
+  const selEls = els.filter((el) => selectedSet.has(el.id));
+  const soloId = selEls.length === 1 ? selEls[0].id : null;
+  const commit = (next) => {
+    setEls(next);
+    onChange(next);
+  };
+  const updateEl = (id, partial) => commit(els.map((el) => el.id === id ? { ...el, ...partial } : el));
+  const groupOf = (id) => {
+    const el = els.find((x) => x.id === id);
+    if (!el?.group) return [id];
+    const gid = el.group;
+    return els.filter((x) => x.group === gid).map((x) => x.id);
+  };
+  const expandGroups = (ids) => {
+    const out = /* @__PURE__ */ new Set();
+    for (const id of ids) for (const member of groupOf(id)) out.add(member);
+    return [...out];
+  };
+  const cloneElements = (source, offset) => {
+    const groupMap = /* @__PURE__ */ new Map();
+    return source.map((el) => {
+      const copy = {
+        ...el,
+        id: dupId(el.id),
+        x: clamp(el.x + offset, 0, 100 - el.w),
+        y: clamp(el.y + offset, 0, 100 - el.h)
+      };
+      if (el.group) {
+        if (!groupMap.has(el.group)) groupMap.set(el.group, newGroupId());
+        copy.group = groupMap.get(el.group);
+      }
+      return copy;
+    });
+  };
+  const duplicateSelection = () => {
+    if (selEls.length === 0) return;
+    const copies = cloneElements(selEls, 4);
+    commit([...els, ...copies]);
+    setSelected(copies.map((c) => c.id));
+  };
+  const copySelection = () => {
+    if (selEls.length > 0) elementClipboard = selEls.map((el) => ({ ...el }));
+  };
+  const pasteClipboard = () => {
+    if (elementClipboard.length === 0) return;
+    const pasted = cloneElements(elementClipboard, 3);
+    commit([...els, ...pasted]);
+    setSelected(pasted.map((p) => p.id));
+  };
+  const deleteSelection = () => {
+    if (selEls.length === 0) return;
+    commit(els.filter((el) => !selectedSet.has(el.id)));
+    setSelected([]);
+  };
+  const groupSelection = () => {
+    if (selEls.length < 2) return;
+    const gid = newGroupId();
+    commit(els.map((el) => selectedSet.has(el.id) ? { ...el, group: gid } : el));
+  };
+  const ungroupSelection = () => {
+    if (!selEls.some((el) => el.group)) return;
+    commit(
+      els.map((el) => {
+        if (!selectedSet.has(el.id) || !el.group) return el;
+        const { group: _group, ...rest } = el;
+        return rest;
+      })
+    );
+  };
+  const reorderSelection = (dir, extreme = false) => {
+    if (selEls.length === 0) return;
+    if (extreme) {
+      const sel = els.filter((el) => selectedSet.has(el.id));
+      const rest = els.filter((el) => !selectedSet.has(el.id));
+      commit(dir === 1 ? [...rest, ...sel] : [...sel, ...rest]);
+      return;
+    }
+    const next = [...els];
+    if (dir === 1) {
+      for (let i = next.length - 2; i >= 0; i--) {
+        if (selectedSet.has(next[i].id) && !selectedSet.has(next[i + 1].id)) [next[i], next[i + 1]] = [next[i + 1], next[i]];
+      }
+    } else {
+      for (let i = 1; i < next.length; i++) {
+        if (selectedSet.has(next[i].id) && !selectedSet.has(next[i - 1].id)) [next[i], next[i - 1]] = [next[i - 1], next[i]];
+      }
+    }
+    commit(next);
+  };
+  const clampDelta = (dx, dy, targets) => {
+    let loX = -100, hiX = 100, loY = -100, hiY = 100;
+    for (const el of targets) {
+      loX = Math.max(loX, -el.x);
+      hiX = Math.min(hiX, 100 - el.w - el.x);
+      loY = Math.max(loY, -el.y);
+      hiY = Math.min(hiY, 100 - el.h - el.y);
+    }
+    return { dx: clamp(dx, loX, hiX), dy: clamp(dy, loY, hiY) };
+  };
+  const nudgeSelection = (ddx, ddy) => {
+    const { dx, dy } = clampDelta(ddx, ddy, selEls);
+    if (dx === 0 && dy === 0) return;
+    commit(els.map((el) => selectedSet.has(el.id) ? { ...el, x: el.x + dx, y: el.y + dy } : el));
+  };
+  const alignSelection = (op) => {
+    if (selEls.length < 2) return;
+    const b = boundsOf(selEls);
+    commit(
+      els.map((el) => {
+        if (!selectedSet.has(el.id)) return el;
+        if (op === "left") return { ...el, x: b.x1 };
+        if (op === "center") return { ...el, x: b.x1 + (b.x2 - b.x1 - el.w) / 2 };
+        if (op === "right") return { ...el, x: b.x2 - el.w };
+        if (op === "top") return { ...el, y: b.y1 };
+        if (op === "middle") return { ...el, y: b.y1 + (b.y2 - b.y1 - el.h) / 2 };
+        return { ...el, y: b.y2 - el.h };
+      })
+    );
+  };
+  const toPct = (e) => {
+    const rect = slideRef.current.getBoundingClientRect();
+    return {
+      x: clamp((e.clientX - rect.left) / rect.width * 100, 0, 100),
+      y: clamp((e.clientY - rect.top) / rect.height * 100, 0, 100)
+    };
+  };
+  const onDown = (e, el, mode) => {
+    if (editingId === el.id && mode === "move") return;
+    e.preventDefault();
+    e.stopPropagation();
+    slideRef.current?.focus();
+    if (mode === "move" && e.shiftKey) {
+      const unit = groupOf(el.id);
+      setSelected(
+        (prev) => prev.some((id) => unit.includes(id)) ? prev.filter((id) => !unit.includes(id)) : [...prev, ...unit.filter((id) => !prev.includes(id))]
+      );
+      return;
+    }
+    const wasSelected = selectedSet.has(el.id);
+    const ids = mode === "resize" ? [el.id] : wasSelected ? selected : groupOf(el.id);
+    if (!wasSelected) setSelected(mode === "resize" ? [el.id] : groupOf(el.id));
+    drag.current = {
+      ids,
+      id: el.id,
+      mode,
+      sx: e.clientX,
+      sy: e.clientY,
+      origs: new Map(els.filter((x) => ids.includes(x.id)).map((x) => [x.id, { ...x }])),
+      moved: false,
+      wasSelected
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onCanvasDown = (e) => {
+    if (e.target !== e.currentTarget) return;
+    e.preventDefault();
+    slideRef.current?.focus();
+    const p = toPct(e);
+    marquee.current = { x0: p.x, y0: p.y, x1: p.x, y1: p.y, moved: false };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onMove = (e) => {
+    const rect = slideRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const mq = marquee.current;
+    if (mq) {
+      const p = toPct(e);
+      mq.x1 = p.x;
+      mq.y1 = p.y;
+      mq.moved = true;
+      setMarqueeBox({ x0: mq.x0, y0: mq.y0, x1: mq.x1, y1: mq.y1 });
+      const rx1 = Math.min(mq.x0, mq.x1), rx2 = Math.max(mq.x0, mq.x1);
+      const ry1 = Math.min(mq.y0, mq.y1), ry2 = Math.max(mq.y0, mq.y1);
+      const hits = els.filter((el) => el.x < rx2 && el.x + el.w > rx1 && el.y < ry2 && el.y + el.h > ry1).map((el) => el.id);
+      setSelected(expandGroups(hits));
+      return;
+    }
+    const d = drag.current;
+    if (!d) return;
+    const dx = (e.clientX - d.sx) / rect.width * 100;
+    const dy = (e.clientY - d.sy) / rect.height * 100;
+    if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) d.moved = true;
+    const orig = d.origs.get(d.id);
+    if (!orig) return;
+    const others = els.filter((el) => !d.ids.includes(el.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])];
+    if (d.mode === "resize") {
+      if (e.shiftKey) {
+        const scale = Math.abs(dx) / orig.w > Math.abs(dy) / orig.h ? (orig.w + dx) / orig.w : (orig.h + dy) / orig.h;
+        const sMin = Math.max(6 / orig.w, 5 / orig.h);
+        const sMax = Math.min((100 - orig.x) / orig.w, (100 - orig.y) / orig.h);
+        const s = clamp(scale, sMin, sMax);
+        setGuides({ x: null, y: null });
+        setEls((prev) => prev.map((el) => el.id === d.id ? { ...el, w: orig.w * s, h: orig.h * s } : el));
+        return;
+      }
+      const gx = snapAxis(orig.x + clamp(orig.w + dx, 6, 100 - orig.x), 0, xTargets);
+      const gy = snapAxis(orig.y + clamp(orig.h + dy, 5, 100 - orig.y), 0, yTargets);
+      const w = clamp(gx.pos - orig.x, 6, 100 - orig.x);
+      const h = clamp(gy.pos - orig.y, 5, 100 - orig.y);
+      setGuides({
+        x: gx.guide !== null && Math.abs(orig.x + w - gx.guide) < 0.01 ? gx.guide : null,
+        y: gy.guide !== null && Math.abs(orig.y + h - gy.guide) < 0.01 ? gy.guide : null
+      });
+      setEls((prev) => prev.map((el) => el.id === d.id ? { ...el, w, h } : el));
+      return;
+    }
+    const origs = [...d.origs.values()];
+    const c = clampDelta(dx, dy, origs);
+    const sx = snapAxis(orig.x + c.dx, orig.w, xTargets);
+    const sy = snapAxis(orig.y + c.dy, orig.h, yTargets);
+    const snapped = clampDelta(sx.pos - orig.x, sy.pos - orig.y, origs);
+    setGuides({
+      x: sx.guide !== null && Math.abs(snapped.dx - (sx.pos - orig.x)) < 0.01 ? sx.guide : null,
+      y: sy.guide !== null && Math.abs(snapped.dy - (sy.pos - orig.y)) < 0.01 ? sy.guide : null
+    });
+    setEls(
+      (prev) => prev.map((el) => {
+        const o = d.origs.get(el.id);
+        return o ? { ...el, x: o.x + snapped.dx, y: o.y + snapped.dy } : el;
+      })
+    );
+  };
+  const onUp = () => {
+    if (marquee.current) {
+      if (marquee.current.moved) suppressCanvasClick.current = true;
+      marquee.current = null;
+      setMarqueeBox(null);
+      return;
+    }
+    const d = drag.current;
+    if (!d) return;
+    drag.current = null;
+    setGuides({ x: null, y: null });
+    if (d.moved) {
+      onChange(els);
+      return;
+    }
+    if (d.mode === "move" && d.wasSelected) setSelected(groupOf(d.id));
+  };
+  const onKeyDown = (e) => {
+    if (editingId) return;
+    const t2 = e.target;
+    if (t2.tagName === "INPUT" || t2.tagName === "TEXTAREA" || t2.isContentEditable) return;
+    const meta = e.metaKey || e.ctrlKey;
+    if (e.key === "Escape") {
+      setSelected([]);
+      setEditingId(null);
+      return;
+    }
+    if (meta && (e.key === "v" || e.key === "V")) {
+      e.preventDefault();
+      pasteClipboard();
+      return;
+    }
+    if (selEls.length === 0) return;
+    const step = e.shiftKey ? NUDGE_STEP_BIG : NUDGE_STEP;
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      if (e.key === "ArrowLeft") nudgeSelection(-step, 0);
+      else if (e.key === "ArrowRight") nudgeSelection(step, 0);
+      else if (e.key === "ArrowUp") nudgeSelection(0, -step);
+      else nudgeSelection(0, step);
+    } else if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault();
+      deleteSelection();
+    } else if (meta && (e.key === "d" || e.key === "D")) {
+      e.preventDefault();
+      duplicateSelection();
+    } else if (meta && (e.key === "c" || e.key === "C")) {
+      e.preventDefault();
+      copySelection();
+    } else if (meta && (e.key === "g" || e.key === "G")) {
+      e.preventDefault();
+      if (e.shiftKey) ungroupSelection();
+      else groupSelection();
+    } else if (meta && e.key === "]") {
+      e.preventDefault();
+      reorderSelection(1);
+    } else if (meta && e.key === "[") {
+      e.preventDefault();
+      reorderSelection(-1);
+    }
+  };
+  const multiBounds = selEls.length >= 2 ? boundsOf(selEls) : null;
+  const multibarBelow = multiBounds !== null && multiBounds.y1 < 16;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cv-free",
+      ref: slideRef,
+      tabIndex: 0,
+      style: padding ? { inset: `${padding}%` } : void 0,
+      onPointerDown: onCanvasDown,
+      onPointerMove: onMove,
+      onPointerUp: onUp,
+      onPointerLeave: onUp,
+      onKeyDown,
+      onClick: () => {
+        if (suppressCanvasClick.current) {
+          suppressCanvasClick.current = false;
+          return;
+        }
+        setSelected([]);
+        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}%` } }),
+        marqueeBox && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "cv-free__marquee",
+            style: {
+              left: `${Math.min(marqueeBox.x0, marqueeBox.x1)}%`,
+              top: `${Math.min(marqueeBox.y0, marqueeBox.y1)}%`,
+              width: `${Math.abs(marqueeBox.x1 - marqueeBox.x0)}%`,
+              height: `${Math.abs(marqueeBox.y1 - marqueeBox.y0)}%`
+            }
+          }
+        ),
+        els.map((el) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `cv-free__el ${selectedSet.has(el.id) ? "is-selected cv-free__el--selected" : ""}`,
+            style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, ...rotateStyle(el) },
+            onPointerDown: (e) => onDown(e, el, "move"),
+            onDoubleClick: (e) => {
+              if (el.type === "text") {
+                e.stopPropagation();
+                setEditingId(el.id);
+              }
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              el.type === "text" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "cv-free__text",
+                  contentEditable: editingId === el.id,
+                  suppressContentEditableWarning: true,
+                  style: {
+                    // px at the 1280-wide design → cqw, so type scales with the slide
+                    // (12.8px of design width per 1cqw).
+                    fontSize: `${((el.fontSize ?? 24) / 12.8).toFixed(3)}cqw`,
+                    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: el.src,
+                  alt: "",
+                  draggable: false,
+                  style: { objectFit: el.fit ?? "contain", ...el.radius ? { borderRadius: el.radius } : {} }
+                }
+              ),
+              soloId === 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: t("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: t("fontSize")
+                  }
+                ),
+                /* @__PURE__ */ jsx("input", { type: "color", value: el.color ?? "#1f2328", onChange: (e) => updateEl(el.id, { color: e.target.value }), title: t("textColor") }),
+                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "left" }), title: t("alignLeft"), children: "\u27F8" }),
+                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "center" }), title: t("alignCenter"), children: "\u2261" }),
+                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "right" }), title: t("alignRight"), children: "\u27F9" })
+              ] }),
+              soloId === el.id && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "cv-free__resize", title: t("resizeTip"), 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: t("fillColor") }),
+                  el.type === "image" && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: el.fit === "cover" ? "is-on" : "",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        updateEl(el.id, { fit: el.fit === "cover" ? void 0 : "cover" });
+                      },
+                      title: t("fitToggle"),
+                      children: "\u26F6"
+                    }
+                  ),
+                  (el.type === "image" || el.shape === "rect") && /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      className: "cv-free__ctl-radius",
+                      type: "number",
+                      min: 0,
+                      max: 32,
+                      value: el.radius ?? (el.type === "shape" ? 8 : 0),
+                      onChange: (e) => updateEl(el.id, { radius: clamp(Number(e.target.value) || 0, 0, 32) }),
+                      onClick: (e) => e.stopPropagation(),
+                      title: t("cornerRadius")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        updateEl(el.id, { rotate: normalizeDeg((el.rotate ?? 0) + (e.shiftKey ? -15 : 15)) });
+                      },
+                      title: t("rotateStep"),
+                      children: "\u27F3"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      className: "cv-free__ctl-rot",
+                      type: "number",
+                      min: -360,
+                      max: 360,
+                      value: Math.round(el.rotate ?? 0),
+                      onChange: (e) => {
+                        const deg = Number(e.target.value);
+                        updateEl(el.id, { rotate: Number.isFinite(deg) && deg !== 0 ? clamp(deg, -360, 360) : void 0 });
+                      },
+                      onClick: (e) => e.stopPropagation(),
+                      title: t("rotationDeg")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    duplicateSelection();
+                  }, title: t("duplicateShort"), children: "\u29C9" }),
+                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    reorderSelection(1, true);
+                  }, title: t("bringToFront"), children: "\u2912" }),
+                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    reorderSelection(1);
+                  }, title: t("bringForward"), children: "\u2191" }),
+                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    reorderSelection(-1);
+                  }, title: t("sendBackward"), children: "\u2193" }),
+                  /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    reorderSelection(-1, true);
+                  }, title: t("sendToBack"), children: "\u2913" }),
+                  /* @__PURE__ */ jsx("button", { className: "cv-free__ctl-del", onClick: (e) => {
+                    e.stopPropagation();
+                    deleteSelection();
+                  }, title: t("delete"), children: "\xD7" })
+                ] })
+              ] })
+            ]
+          },
+          el.id
+        )),
+        multiBounds && !marqueeBox && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `cv-free__multibar ${multibarBelow ? "cv-free__multibar--below" : ""}`,
+            style: {
+              left: `${(multiBounds.x1 + multiBounds.x2) / 2}%`,
+              top: multibarBelow ? `${multiBounds.y2}%` : `${multiBounds.y1}%`
+            },
+            onPointerDown: (e) => e.stopPropagation(),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx("button", { onClick: groupSelection, title: t("groupShort"), children: "\u229E" }),
+              /* @__PURE__ */ jsx("button", { onClick: ungroupSelection, disabled: !selEls.some((el) => el.group), title: t("ungroupShort"), children: "\u229F" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("left"), title: t("alignLeftEdges"), children: "\u21E4" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("center"), title: t("alignHCenters"), children: "\u2194" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("right"), title: t("alignRightEdges"), children: "\u21E5" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("top"), title: t("alignTopEdges"), children: "\u2912" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("middle"), title: t("alignVCenters"), children: "\u2195" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("bottom"), title: t("alignBottomEdges"), children: "\u2913" }),
+              /* @__PURE__ */ jsx("button", { onClick: duplicateSelection, title: t("duplicateShort"), children: "\u29C9" }),
+              /* @__PURE__ */ jsx("button", { className: "cv-free__multibar-del", onClick: deleteSelection, title: t("deleteSelection"), children: "\xD7" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var THEMES = [
+  // Light — warm white + crimson serif, magazine front-of-book.
+  { id: "editorial", label: "Editorial", bg: "#f9f8f4", text: "#1c1a17", accent: "#a51c30", font: '"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif' },
+  // Light — pure white, pure black, no color at all: gallery-catalog restraint.
+  { id: "gallery", label: "Gallery", bg: "#ffffff", text: "#111111", accent: "#111111", font: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
+  // Light — cool paper + navy ink + cobalt, the quiet corporate default.
+  { id: "boardroom", label: "Boardroom", bg: "#f3f5f8", text: "#142743", accent: "#1f56c9", font: 'ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif' },
+  // Light — sage paper + moss ink + fern, humanist and unhurried.
+  { id: "sage", label: "Sage", bg: "#edf0e8", text: "#273428", accent: "#4c7a4f", font: 'Seravek, "Gill Sans", "Trebuchet MS", Verdana, sans-serif' },
+  // Dark — soft charcoal + amber, geometric grotesque; studio pitch deck.
+  { id: "graphite", label: "Graphite", bg: "#1e1f21", text: "#f1f0ed", accent: "#ecb22e", font: '"Avenir Next", Avenir, Futura, "Century Gothic", sans-serif' },
+  // Dark — midnight blue + starlight gold, high-contrast didone serif.
+  { id: "observatory", label: "Observatory", bg: "#0d1526", text: "#e2e8f4", accent: "#d4af6a", font: 'Didot, "Bodoni MT", "Bodoni 72", Georgia, serif' },
+  // Mid — Klein blue + signal yellow, Swiss poster energy.
+  { id: "ultramarine", label: "Ultramarine", bg: "#002fa7", text: "#f2f5ff", accent: "#ffd02f", font: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
+  // Dark — wine-cellar aubergine + rosé, old-style serif; dinner-party keynote.
+  { id: "bordeaux", label: "Bordeaux", bg: "#241722", text: "#f0e8ee", accent: "#d98ca0", font: '"Hoefler Text", Baskerville, "Baskerville Old Face", Georgia, serif' }
+];
+var FALLBACK_ACCENT = "#5b5bd6";
+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: (accent) => [
+    { type: "shape", shape: "rect", x: 8, y: 30, w: 7, h: 1.4, fill: accent },
+    { type: "text", x: 8, y: 35, w: 72, h: 20, text: "Presentation title", fontSize: 52, bold: true },
+    { type: "text", x: 8, y: 57, w: 56, h: 8, text: "A one-line summary of the story", fontSize: 22 },
+    { type: "text", x: 8, y: 86, w: 50, h: 5, text: "Team name \xB7 Date", fontSize: 14 }
+  ] },
+  section: { label: "Section divider", els: (accent) => [
+    { type: "text", x: 8, y: 12, w: 26, h: 26, text: "01", fontSize: 104, bold: true, color: accent },
+    { type: "shape", shape: "rect", x: 8, y: 50, w: 84, h: 0.5, fill: accent },
+    { type: "text", x: 8, y: 55, w: 76, h: 14, text: "Section title", fontSize: 44, bold: true },
+    { type: "text", x: 8, y: 71, w: 60, h: 7, text: "What this chapter covers, in one line", fontSize: 20 }
+  ] },
+  agenda: { label: "Agenda", els: (accent) => [
+    { type: "text", x: 8, y: 10, w: 40, h: 10, text: "Agenda", fontSize: 40, bold: true },
+    { type: "shape", shape: "rect", x: 8, y: 22, w: 7, h: 1.2, fill: accent },
+    { type: "text", x: 8, y: 32, w: 7, h: 8, text: "01", fontSize: 20, bold: true, color: accent },
+    { type: "text", x: 17, y: 32, w: 66, h: 8, text: "First topic", fontSize: 24 },
+    { type: "text", x: 8, y: 46, w: 7, h: 8, text: "02", fontSize: 20, bold: true, color: accent },
+    { type: "text", x: 17, y: 46, w: 66, h: 8, text: "Second topic", fontSize: 24 },
+    { type: "text", x: 8, y: 60, w: 7, h: 8, text: "03", fontSize: 20, bold: true, color: accent },
+    { type: "text", x: 17, y: 60, w: 66, h: 8, text: "Third topic", fontSize: 24 },
+    { type: "text", x: 8, y: 74, w: 7, h: 8, text: "04", fontSize: 20, bold: true, color: accent },
+    { type: "text", x: 17, y: 74, w: 66, h: 8, text: "Fourth topic", fontSize: 24 }
+  ] },
+  bullets: { label: "Bullets", els: (accent) => [
+    { type: "text", x: 8, y: 9, w: 60, h: 5, text: "Where we are", fontSize: 14, bold: true, color: accent },
+    { type: "text", x: 8, y: 16, w: 80, h: 12, text: "Heading that states the takeaway", fontSize: 38, bold: true },
+    { type: "text", x: 8, y: 34, w: 78, h: 54, text: "\u2022  First key point, one line each\n\n\u2022  Second key point\n\n\u2022  Third key point", fontSize: 22 }
+  ] },
+  "two-column": { label: "Two column", els: (accent) => [
+    { type: "text", x: 8, y: 10, w: 84, h: 10, text: "Two sides of the argument", fontSize: 36, bold: true },
+    { type: "shape", shape: "rect", x: 49.9, y: 28, w: 0.2, h: 54, fill: accent },
+    { type: "text", x: 8, y: 28, w: 36, h: 6, text: "Before", fontSize: 20, bold: true, color: accent },
+    { type: "text", x: 8, y: 37, w: 36, h: 45, text: "\u2022  point\n\n\u2022  point\n\n\u2022  point", fontSize: 20 },
+    { type: "text", x: 56, y: 28, w: 36, h: 6, text: "After", fontSize: 20, bold: true, color: accent },
+    { type: "text", x: 56, y: 37, w: 36, h: 45, text: "\u2022  point\n\n\u2022  point\n\n\u2022  point", fontSize: 20 }
+  ] },
+  stat: { label: "Big stat", els: (accent) => [
+    { type: "text", x: 8, y: 14, w: 60, h: 6, text: "The number that matters", fontSize: 14, bold: true },
+    { type: "text", x: 8, y: 24, w: 66, h: 32, text: "3.4\xD7", fontSize: 116, bold: true, color: accent },
+    { type: "shape", shape: "rect", x: 8, y: 64, w: 10, h: 0.8, fill: accent },
+    { type: "text", x: 8, y: 69, w: 62, h: 12, text: "One line explaining what the number means and why it matters", fontSize: 24 }
+  ] },
+  quote: { label: "Quote", els: (accent) => [
+    { type: "text", x: 6, y: 6, w: 12, h: 18, text: "\u201C", fontSize: 120, bold: true, color: accent },
+    { type: "text", x: 14, y: 28, w: 72, h: 30, text: "The quote \u2014 one strong sentence people will remember.", fontSize: 36, bold: true },
+    { type: "shape", shape: "rect", x: 14, y: 64, w: 8, h: 0.8, fill: accent },
+    { type: "text", x: 14, y: 68, w: 56, h: 7, text: "Name Surname \u2014 Role, Company", fontSize: 18 }
+  ] }
+};
+var elementSeq = 0;
+var newElementId = () => `el_${Date.now().toString(36)}_${elementSeq++}`;
+function SlidesRenderer({ artifact }) {
+  const t = useT();
+  const slides = artifact.data.slides ?? [];
+  const patch = useArtifactPatch(artifact.id);
+  const [index, setIndex] = useState(0);
+  const [dragIndex, setDragIndex] = useState(null);
+  const [dropIndex, setDropIndex] = useState(null);
+  const [presenting, setPresenting] = useState(false);
+  const imgRef = useRef(null);
+  const bgRef = useRef(null);
+  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 } : {},
+    ...slide.fontFamily ? { fontFamily: slide.fontFamily } : {}
+  };
+  const accent = slide.accent ?? FALLBACK_ACCENT;
+  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: accent });
+  };
+  const applyLayout = (key) => {
+    const l = LAYOUTS[key];
+    if (l) update({ elements: l.els(accent).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);
+  };
+  const arrange = (op) => {
+    const els = resolveElements(slide);
+    if (els.length === 0) return;
+    const GAP = 4;
+    const M = 6;
+    let next;
+    if (op === "stack-v") {
+      let y = M;
+      next = [...els].sort((a, b) => a.y - b.y).map((el) => {
+        const placed = { ...el, x: (100 - el.w) / 2, y };
+        y += el.h + GAP;
+        return placed;
+      });
+    } else if (op === "stack-h") {
+      let x = M;
+      next = [...els].sort((a, b) => a.x - b.x).map((el) => {
+        const placed = { ...el, x, y: (100 - el.h) / 2 };
+        x += el.w + GAP;
+        return placed;
+      });
+    } else if (op === "align-left") next = els.map((el) => ({ ...el, x: M }));
+    else if (op === "align-center") next = els.map((el) => ({ ...el, x: (100 - el.w) / 2 }));
+    else if (op === "align-right") next = els.map((el) => ({ ...el, x: 100 - M - el.w }));
+    else if (op === "align-top") next = els.map((el) => ({ ...el, y: M }));
+    else if (op === "align-middle") next = els.map((el) => ({ ...el, y: (100 - el.h) / 2 }));
+    else if (op === "align-bottom") next = els.map((el) => ({ ...el, y: 100 - M - el.h }));
+    else if (op === "dist-v" || op === "dist-h") {
+      if (els.length < 3) return;
+      const k = op === "dist-v" ? "y" : "x";
+      const sk = op === "dist-v" ? "h" : "w";
+      const sorted = [...els].sort((a, b) => a[k] - b[k]);
+      const start = sorted[0][k];
+      const end = sorted[sorted.length - 1][k] + sorted[sorted.length - 1][sk];
+      const total = sorted.reduce((acc, e) => acc + e[sk], 0);
+      const g = (end - start - total) / (sorted.length - 1);
+      let pos = start;
+      const placed = /* @__PURE__ */ new Map();
+      for (const el of sorted) {
+        placed.set(el.id, { ...el, [k]: pos });
+        pos += el[sk] + g;
+      }
+      next = els.map((e) => placed.get(e.id) ?? e);
+    } else return;
+    update({ elements: next });
+  };
+  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" : ""} ${dragIndex !== null && dropIndex === i && i !== dragIndex ? i < dragIndex ? "cv-deck__thumb-wrap--drop-before" : "cv-deck__thumb-wrap--drop-after" : ""}`,
+          draggable: true,
+          onDragStart: () => setDragIndex(i),
+          onDragOver: (e) => {
+            e.preventDefault();
+            if (dragIndex !== null && i !== dragIndex) setDropIndex(i);
+          },
+          onDragLeave: () => setDropIndex((cur) => cur === i ? null : cur),
+          onDrop: () => {
+            if (dragIndex !== null) reorder(dragIndex, i);
+            setDragIndex(null);
+            setDropIndex(null);
+          },
+          onDragEnd: () => {
+            setDragIndex(null);
+            setDropIndex(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: {
+                  ...s.background ? { background: s.background } : {},
+                  ...s.fontFamily ? { fontFamily: s.fontFamily } : {}
+                },
+                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) / 12.8).toFixed(3)}cqw`, fontWeight: el.bold ? 700 : 400, color: el.color ?? s.textColor, overflow: "visible", whiteSpace: "pre-wrap", ...rotateStyle(el) },
+                      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, ...rotateStyle(el), ...shapeStyle(el) } }, el.id) : /* @__PURE__ */ jsx("img", { src: el.src, alt: "", style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, objectFit: el.fit ?? "contain", ...el.radius ? { borderRadius: el.radius } : {}, ...rotateStyle(el) } }, 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: t("addTextBox"), children: t("addText") }),
+        /* @__PURE__ */ jsx("button", { onClick: () => imgRef.current?.click(), title: t("addImageTip"), children: t("addImage") }),
+        /* @__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: t("addShapeTip"),
+            onChange: (e) => {
+              if (e.target.value) addShapeEl(e.target.value);
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: t("addShape") }),
+              SHAPES.map((s) => /* @__PURE__ */ jsx("option", { value: s.id, children: s.label }, s.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-deck__theme",
+            value: "",
+            title: t("applyLayout"),
+            onChange: (e) => {
+              if (e.target.value) applyLayout(e.target.value);
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: t("layoutMenu") }),
+              Object.entries(LAYOUTS).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-deck__theme",
+            value: "",
+            title: t("autoLayoutTip"),
+            onChange: (e) => {
+              if (e.target.value) arrange(e.target.value);
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: t("arrangeMenu") }),
+              /* @__PURE__ */ jsxs("optgroup", { label: "Auto layout", children: [
+                /* @__PURE__ */ jsx("option", { value: "stack-v", children: "Stack vertical" }),
+                /* @__PURE__ */ jsx("option", { value: "stack-h", children: "Stack horizontal" })
+              ] }),
+              /* @__PURE__ */ jsxs("optgroup", { label: "Align", children: [
+                /* @__PURE__ */ jsx("option", { value: "align-left", children: "Left" }),
+                /* @__PURE__ */ jsx("option", { value: "align-center", children: "Center" }),
+                /* @__PURE__ */ jsx("option", { value: "align-right", children: "Right" }),
+                /* @__PURE__ */ jsx("option", { value: "align-top", children: "Top" }),
+                /* @__PURE__ */ jsx("option", { value: "align-middle", children: "Middle" }),
+                /* @__PURE__ */ jsx("option", { value: "align-bottom", children: "Bottom" })
+              ] }),
+              /* @__PURE__ */ jsxs("optgroup", { label: "Distribute", children: [
+                /* @__PURE__ */ jsx("option", { value: "dist-v", children: "Vertical gaps" }),
+                /* @__PURE__ */ jsx("option", { value: "dist-h", children: "Horizontal gaps" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-deck__theme",
+            value: "",
+            title: t("theme"),
+            onChange: (e) => {
+              const t2 = THEMES.find((x) => x.id === e.target.value);
+              if (t2) update({ background: t2.bg, textColor: t2.text, accent: t2.accent, fontFamily: t2.font });
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: t("themeMenu") }),
+              THEMES.map((t2) => /* @__PURE__ */ jsx("option", { value: t2.id, children: t2.label }, t2.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("label", { className: "cv-deck__bg", title: t("bgColor"), 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: t("bgImageTip"), children: t("bgImage") }),
+        /* @__PURE__ */ jsxs("label", { className: "cv-deck__pad", title: t("padTip"), children: [
+          t("padding"),
+          /* @__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__ */ jsxs("button", { className: "cv-deck__present", onClick: () => setPresenting(true), title: t("presentTip"), children: [
+          "\u25B6 ",
+          t("present")
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => moveSlide(-1), title: t("moveUp"), disabled: at === 0, children: "\u25B2" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => moveSlide(1), title: t("moveDown"), disabled: at === slides.length - 1, children: "\u25BC" }),
+        /* @__PURE__ */ jsx("button", { onClick: duplicateSlide, title: t("duplicateSlide"), children: "\u29C9" }),
+        /* @__PURE__ */ jsx("button", { onClick: deleteSlide, title: t("deleteSlide"), disabled: slides.length === 1, children: "\u{1F5D1}" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "cv-slide cv-slide--blank", style: slideStyle, children: /* @__PURE__ */ jsx(FreeSlide, { elements: resolveElements(slide), onChange: (elements) => update({ elements }), padding: slide.padding }) }),
+      /* @__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: t("speakerNotes"),
+          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", { className: "cv-present__slide cv-present__fade cv-slide cv-slide--blank", style: 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}%`, ...rotateStyle(el) }, children: /* @__PURE__ */ jsx("div", { className: "cv-free__text", style: { fontSize: el.fontSize ?? 24, 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, ...rotateStyle(el) }, 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}%`, ...rotateStyle(el) }, children: /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: el.src, alt: "", style: { objectFit: el.fit ?? "contain", ...el.radius ? { borderRadius: el.radius } : {} } }) }, el.id)
+      ) }) }, at),
+      slide.notes ? /* @__PURE__ */ jsx("div", { className: "cv-present__notes", onClick: (e) => e.stopPropagation(), children: slide.notes }) : null,
+      /* @__PURE__ */ jsx("div", { className: "cv-present__progress", children: /* @__PURE__ */ jsx("span", { className: "cv-present__progress-fill", style: { width: `${(at + 1) / slides.length * 100}%` } }) }),
+      /* @__PURE__ */ jsxs("div", { className: "cv-present__count", children: [
+        at + 1,
+        " / ",
+        slides.length
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "cv-present__hint", children: t("presentHint") })
+    ] })
+  ] });
+}
+
+export { SlidesRenderer };