@braincrew-lab/langchain-canvas 0.3.0 → 0.4.9

package/dist/SlidesRenderer-JNPXNTNJ.js

@@ -1,964 +0,0 @@
-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 };