@braincrew-lab/langchain-canvas 0.1.14 → 0.2.0

package/dist/styles.css

@@ -212,6 +212,16 @@
 .cv-body--flush { padding: 0; overflow: hidden; }
 .cv-fallback { color: var(--cv-muted); font-size: 14px; }
 
+/* Browsing an old version: a preview, not an editing surface. Interaction is
+   blocked wholesale — renderers patch by artifact id, so edits made "in the
+   past" would silently overwrite the live version. */
+.cv-body--history > :not(.cv-history-note) { pointer-events: none; user-select: none; }
+.cv-history-note {
+  position: sticky; top: 0; z-index: 5; margin-bottom: 12px;
+  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
+  color: var(--cv-muted); background: var(--cv-surface); border: 1px solid var(--cv-border);
+}
+
 /* --- inline editing (document / table / slides) ------------------------------- */
 
 .cv-edit-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
@@ -404,6 +414,23 @@
 .cv-sheet-tools__filter { min-width: 96px; max-width: 160px; }
 .cv-sheet-tools__sort:focus, .cv-sheet-tools__filter:focus { outline: none; border-color: var(--cv-accent); }
 .cv-sheet-tools__hint { margin-left: auto; font-size: 11px; color: var(--cv-muted); }
+
+/* selection formatting cluster — reads as one tight group between separators */
+.cv-sheet-tools__fmt { display: inline-flex; align-items: center; gap: 3px; }
+.cv-sheet-tools__fmt button:disabled,
+.cv-sheet-tools button:disabled { opacity: 0.4; cursor: default; }
+.cv-sheet-tools button:disabled:hover { border-color: var(--cv-border); color: var(--cv-text); }
+.cv-sheet-tools__bold, .cv-sheet-tools__align { width: 28px; padding: 4px 0 !important; text-align: center; }
+.cv-sheet-tools__bold--on,
+.cv-sheet-tools__freeze--on {
+  background: var(--cv-accent-weak) !important; border-color: var(--cv-accent) !important;
+  color: var(--cv-accent) !important;
+}
+.cv-sheet-tools__color {
+  width: 28px; height: 26px; padding: 2px; border: 1px solid var(--cv-border);
+  border-radius: 6px; background: var(--cv-bg); cursor: pointer;
+}
+.cv-sheet-tools__color:disabled { opacity: 0.4; cursor: default; }
 .cv-sheet { position: relative; width: 100%; flex: 1; height: auto; min-height: 0; }
 .cv-sheet .fortune-container { height: 100% !important; width: 100% !important; }
 .cv-sheet--empty { display: grid; place-items: center; height: 200px; color: var(--cv-muted); font-size: 14px; }
@@ -613,6 +640,31 @@
 .cv-free__fmt input[type="number"] { width: 46px; height: 24px; border: 1px solid var(--cv-border); border-radius: 5px; background: var(--cv-bg); color: var(--cv-text); font-size: 12px; padding: 0 4px; }
 .cv-free__fmt input[type="color"] { width: 26px; height: 24px; padding: 0; border: 1px solid var(--cv-border); border-radius: 5px; background: none; cursor: pointer; }
 
+/* multi-select: marquee, selection state, floating action bar */
+.cv-free { outline: none; } /* the canvas is focusable for keyboard nudge/shortcuts */
+.cv-free:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -2px; border-radius: 4px; }
+.cv-free__marquee {
+  position: absolute; z-index: 7; pointer-events: none;
+  border: 1px solid var(--cv-accent);
+  background: color-mix(in srgb, var(--cv-accent) 10%, transparent);
+  border-radius: 2px;
+}
+.cv-free__el--selected { outline: 1.5px solid var(--cv-accent); outline-offset: 1px; }
+.cv-free__multibar {
+  position: absolute; z-index: 8; transform: translate(-50%, calc(-100% - 8px));
+  display: flex; align-items: center; gap: 2px;
+  padding: 3px; background: var(--cv-bg); border: 1px solid var(--cv-border);
+  border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); cursor: default;
+}
+.cv-free__multibar--below { transform: translate(-50%, 8px); }
+.cv-free__multibar button {
+  min-width: 24px; height: 24px; padding: 0 6px; border: none; border-radius: 5px;
+  background: transparent; color: var(--cv-text); cursor: pointer; font-size: 12px; white-space: nowrap;
+}
+.cv-free__multibar button:hover { background: var(--cv-surface); }
+.cv-free__multibar button:disabled { opacity: 0.4; cursor: default; background: transparent; }
+.cv-free__multibar-del:hover { background: #fee2e2 !important; color: #dc2626; }
+
 /* toolbar: background swatch + present button */
 .cv-deck__bg input[type="color"] {
   width: 30px; height: 30px; padding: 0;
@@ -656,6 +708,22 @@
   background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 10px; padding: 12px 16px; cursor: default; white-space: pre-wrap;
 }
+/* Deck progress: a hairline track pinned to the bottom edge, plus a counter chip. */
+.cv-present__progress {
+  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
+  background: rgba(255, 255, 255, 0.08);
+}
+.cv-present__progress-fill {
+  height: 100%; background: var(--cv-accent);
+  transition: width 0.28s ease;
+}
+@media (prefers-reduced-motion: reduce) { .cv-present__progress-fill { transition: none; } }
+.cv-present__count {
+  position: absolute; top: 16px; right: 20px;
+  color: #9aa4b2; font-size: 13px; font-variant-numeric: tabular-nums;
+  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px; padding: 3px 10px; cursor: default;
+}
 
 /* in-place editing cues */
 .cv-word .cv-doc { cursor: text; }
@@ -1086,6 +1154,36 @@
   color: var(--cv-muted);
 }
 
+/* --- PDF viewer ---------------------------------------------------------------- */
+
+/* Fills the flush body outright — `flex: 1` alone collapsed the iframe to its
+   content height (a thin strip of page) because `.cv-body` is a block, not a
+   flex container. */
+.cv-pdf-panel { display: flex; flex-direction: column; height: 100%; min-height: 480px; }
+.cv-pdf-tools {
+  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
+  border-bottom: 1px solid var(--cv-border); background: var(--cv-bg); flex: 0 0 auto;
+}
+.cv-pdf-tools button {
+  font-size: 12px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--cv-border);
+  border-radius: 6px; background: var(--cv-bg); color: var(--cv-text); cursor: pointer;
+}
+.cv-pdf-tools button:hover { border-color: var(--cv-accent); color: var(--cv-accent); }
+.cv-pdf-tools__name {
+  font-size: 12px; font-weight: 600; color: var(--cv-muted);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
+}
+.cv-pdf-tools__spacer { flex: 1; }
+.cv-pdf-tools__sep { width: 1px; height: 18px; background: var(--cv-border); margin: 0 2px; }
+.cv-pdf-tools__zoom { display: inline-flex; align-items: center; gap: 3px; }
+.cv-pdf-tools__zoom button { min-width: 26px; }
+.cv-pdf-tools__zoom-label {
+  min-width: 52px; font-variant-numeric: tabular-nums; color: var(--cv-muted);
+}
+.cv-pdf { position: relative; flex: 1; min-height: 0; background: var(--cv-surface); }
+.cv-pdf__frame { display: block; width: 100%; height: 100%; border: 0; }
+.cv-pdf--empty { display: grid; place-items: center; min-height: 200px; color: var(--cv-muted); }
+
 /* --- inline artifact card (for the transcript) -------------------------------- */
 
 .cv-card {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braincrew-lab/langchain-canvas",
-  "version": "0.1.14",
+  "version": "0.2.0",
   "description": "A live canvas for LangChain agents — stream documents, charts, and rich artifacts into a React panel.",
   "license": "MIT",
   "type": "module",

package/dist/SlidesRenderer-SK5VQDIL.js

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