@braincrew-lab/langchain-canvas 0.1.0

package/dist/SlidesRenderer-KFSPD63I.js

@@ -0,0 +1,399 @@
+import { resolveElements } from './chunk-6L3AL6W4.js';
+import { useArtifactPatch } from './chunk-HHJWIO2C.js';
+import './chunk-PSIT32I5.js';
+import { useState, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+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 }) {
+  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,
+      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
+                }
+              ) : /* @__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: [
+                  /* @__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: "dark", label: "Dark", bg: "#14171f", text: "#f0f2f5" },
+  { id: "midnight", label: "Midnight", bg: "#0b1020", text: "#e6e8ef" },
+  { id: "sunset", label: "Sunset", bg: "#2b1a2e", text: "#ffe8d6" },
+  { id: "mint", label: "Mint", bg: "#0f2a24", text: "#d7f5ec" }
+];
+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);
+  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);
+  };
+  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: 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" },
+                  children: el.text
+                },
+                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__ */ 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 });
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Theme" }),
+              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: slide.background ?? "#ffffff", onChange: (e) => update({ background: e.target.value }) }) }),
+        /* @__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 }) }) }),
+      /* @__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-slide cv-slide--blank", style: slideStyle, children: /* @__PURE__ */ jsx("div", { className: "cv-free", 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" }, children: el.text }) }, 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)
+      ) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "cv-present__hint", children: [
+        at + 1,
+        " / ",
+        slides.length,
+        " \xB7 \u2190 \u2192 to navigate \xB7 Esc to exit"
+      ] })
+    ] })
+  ] });
+}
+
+export { SlidesRenderer };

package/dist/TableRenderer-TRYSMQA7.js

@@ -0,0 +1,250 @@
+import { loadOptional } from './chunk-YZZSJJMQ.js';
+import { useCanvasStore } from './chunk-PSIT32I5.js';
+import { lazy, useMemo, useState, useRef, useEffect, useCallback, Suspense } from 'react';
+import '@fortune-sheet/react/dist/index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/io/formula.ts
+var EMPTY = /* @__PURE__ */ new Map();
+async function computeFormulas(columns, rows) {
+  const formulaCells = [];
+  rows.forEach(
+    (row, dataIdx) => columns.forEach((col, c) => {
+      const v = row[col.key];
+      if (typeof v === "string" && v.startsWith("=")) formulaCells.push({ dataIdx, col: c, formula: v });
+    })
+  );
+  if (formulaCells.length === 0) return EMPTY;
+  const mod = await loadOptional("fast-formula-parser", () => import('fast-formula-parser'));
+  const FormulaParser = mod.default ?? mod;
+  const memo = /* @__PURE__ */ new Map();
+  const inProgress = /* @__PURE__ */ new Set();
+  const rawAt = (row, col) => {
+    const colIdx = col - 1;
+    if (row === 1) return columns[colIdx]?.label ?? columns[colIdx]?.key ?? null;
+    const dataRow = rows[row - 2];
+    const column = columns[colIdx];
+    if (!dataRow || !column) return null;
+    const v = dataRow[column.key];
+    return v ?? null;
+  };
+  const valueAt = (row, col) => {
+    const raw = rawAt(row, col);
+    if (typeof raw !== "string" || !raw.startsWith("=")) return raw ?? 0;
+    const key = `${row},${col}`;
+    const cached = memo.get(key);
+    if (cached !== void 0) return cached;
+    if (inProgress.has(key)) return 0;
+    inProgress.add(key);
+    const value = evaluate(raw, row, col);
+    inProgress.delete(key);
+    memo.set(key, value);
+    return value;
+  };
+  const parser = new FormulaParser({
+    onCell: ({ row, col }) => valueAt(row, col),
+    onRange: (ref) => {
+      const maxRow = Math.min(ref.to.row, rows.length + 1);
+      const maxCol = Math.min(ref.to.col, columns.length);
+      const grid = [];
+      for (let r = ref.from.row; r <= maxRow; r++) {
+        const line = [];
+        for (let c = ref.from.col; c <= maxCol; c++) line.push(valueAt(r, c));
+        grid.push(line);
+      }
+      return grid;
+    }
+  });
+  const evaluate = (formula, row, col) => {
+    try {
+      const result = parser.parse(formula.slice(1), { row, col });
+      if (result != null && typeof result === "object") return "#ERR";
+      return result ?? 0;
+    } catch {
+      return "#ERR";
+    }
+  };
+  const out = /* @__PURE__ */ new Map();
+  for (const { dataIdx, col, formula } of formulaCells) {
+    out.set(`${dataIdx + 1},${col}`, evaluate(formula, dataIdx + 2, col + 1));
+  }
+  return out;
+}
+var Workbook = lazy(() => import('@fortune-sheet/react').then((m) => ({ default: m.Workbook })));
+var isFormula = (v) => typeof v === "string" && v.startsWith("=");
+function toWorkbook(columns, rows, formulas) {
+  const celldata = [];
+  columns.forEach((col, c) => {
+    const label = col.label ?? col.key;
+    celldata.push({ r: 0, c, v: { v: label, m: String(label), bl: 1, bg: "#f3f4f6" } });
+  });
+  rows.forEach((row, r) => {
+    columns.forEach((col, c) => {
+      const val = row[col.key];
+      if (val === void 0 || val === null || val === "") return;
+      if (isFormula(val)) {
+        const computed = formulas.get(`${r + 1},${c}`);
+        const v = { f: val };
+        if (computed !== void 0) {
+          v.v = computed;
+          v.m = String(computed);
+          if (typeof computed === "number") v.ct = { fa: "General", t: "n" };
+        }
+        celldata.push({ r: r + 1, c, v });
+        return;
+      }
+      const numeric = typeof val === "number";
+      celldata.push({
+        r: r + 1,
+        c,
+        v: { v: val, m: String(val), ...numeric ? { ct: { fa: "General", t: "n" } } : {} }
+      });
+    });
+  });
+  const sample = Math.min(rows.length, 400);
+  const columnlen = {};
+  columns.forEach((col, c) => {
+    let widest = String(col.label ?? col.key).length;
+    for (let ri = 0; ri < sample; ri++) {
+      let v = rows[ri][col.key];
+      if (isFormula(v)) v = formulas.get(`${ri + 1},${c}`) ?? "";
+      if (v != null && v !== "") widest = Math.max(widest, String(v).length);
+    }
+    columnlen[c] = Math.min(360, Math.max(64, Math.round(widest * 8.5) + 18));
+  });
+  return [
+    {
+      name: "Sheet1",
+      id: "sheet1",
+      order: 0,
+      // Size the grid to the data plus a modest buffer — big enough to feel like a
+      // real sheet and to keep growing, small enough that the scrollbar stays
+      // proportional (a huge empty grid makes scrolling feel disconnected).
+      row: Math.max(rows.length + 40, 60),
+      column: Math.max(columns.length + 2, 8),
+      celldata,
+      // No frozen pane: a freeze split offsets the initial scroll and hides the
+      // first data rows behind the split line. A plain grid scrolls cleanly.
+      config: { rowlen: { 0: 28 }, columnlen }
+    }
+  ];
+}
+function deriveColumns(rows) {
+  const keys = /* @__PURE__ */ new Set();
+  for (let i = 0; i < Math.min(rows.length, 50); i++) Object.keys(rows[i] ?? {}).forEach((k) => keys.add(k));
+  return [...keys].map((key) => ({ key }));
+}
+var EMPTY_FORMULAS = /* @__PURE__ */ new Map();
+function TableRenderer({ artifact }) {
+  const rows = artifact.data.rows;
+  const columns = useMemo(
+    () => artifact.data.columns.length ? artifact.data.columns : deriveColumns(rows),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [artifact.id, artifact.version, artifact.data.columns.length, rows.length]
+  );
+  const [mounted, setMounted] = useState(false);
+  const rootRef = useRef(null);
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const onWheel = (e) => {
+      const y = root.querySelector(".luckysheet-scrollbar-y");
+      const x = root.querySelector(".luckysheet-scrollbar-x");
+      let moved = false;
+      if (y && e.deltaY && y.scrollHeight > y.clientHeight) {
+        const max = y.scrollHeight - y.clientHeight;
+        const next = Math.max(0, Math.min(max, y.scrollTop + e.deltaY));
+        if (next !== y.scrollTop) {
+          y.scrollTop = next;
+          moved = true;
+        }
+      }
+      if (x && e.deltaX && x.scrollWidth > x.clientWidth) {
+        const max = x.scrollWidth - x.clientWidth;
+        const next = Math.max(0, Math.min(max, x.scrollLeft + e.deltaX));
+        if (next !== x.scrollLeft) {
+          x.scrollLeft = next;
+          moved = true;
+        }
+      }
+      const horizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+      if (moved || horizontal && e.deltaX) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    root.addEventListener("wheel", onWheel, { passive: false, capture: true });
+    return () => root.removeEventListener("wheel", onWheel, { capture: true });
+  }, [mounted]);
+  const dataKey = `${artifact.id}:v${artifact.version}:${columns.length}x${rows.length}`;
+  const hasFormulas = useMemo(
+    () => rows.slice(0, 400).some((row) => columns.some((col) => isFormula(row[col.key]))),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dataKey]
+  );
+  const [formulas, setFormulas] = useState(EMPTY_FORMULAS);
+  const [formulasReady, setFormulasReady] = useState(!hasFormulas);
+  useEffect(() => {
+    if (!hasFormulas) {
+      setFormulas(EMPTY_FORMULAS);
+      setFormulasReady(true);
+      return;
+    }
+    let alive = true;
+    setFormulasReady(false);
+    computeFormulas(columns, rows).then((values) => {
+      if (!alive) return;
+      setFormulas(values);
+      setFormulasReady(true);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [dataKey, hasFormulas]);
+  const hasSheet = !!artifact.data.sheet?.length;
+  const initialData = useMemo(
+    () => artifact.data.sheet?.length ? artifact.data.sheet : toWorkbook(columns, rows, formulas),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dataKey, formulasReady]
+  );
+  const applyEvent = useCanvasStore((s) => s.applyEvent);
+  const persistTimer = useRef(null);
+  const handleChange = useCallback(
+    (sheets) => {
+      if (persistTimer.current) clearTimeout(persistTimer.current);
+      persistTimer.current = setTimeout(() => {
+        applyEvent({ type: "canvas.patch", id: artifact.id, patch: { sheet: sheets } });
+      }, 400);
+    },
+    [applyEvent, artifact.id]
+  );
+  useEffect(() => () => {
+    if (persistTimer.current) clearTimeout(persistTimer.current);
+  }, []);
+  const wbRef = useRef(null);
+  const insert = (type) => {
+    const sel = wbRef.current?.getSelection?.();
+    const range = sel?.[0]?.[type] ?? [0, 0];
+    wbRef.current?.insertRowOrColumn(type, Math.max(0, range[1]), 1, "rightbottom");
+  };
+  if (!mounted) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: "Loading spreadsheet\u2026" });
+  }
+  if (!hasSheet && columns.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: "Waiting for data\u2026" });
+  }
+  if (!hasSheet && !formulasReady) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: "Calculating\u2026" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "cv-sheet-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "cv-sheet-tools", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => insert("column"), children: "\uFF0B Column" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => insert("row"), children: "\uFF0B Row" }),
+      /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__hint", children: "Right-click a header for more, or drag to edit" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "cv-sheet", ref: rootRef, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "cv-sheet--empty", children: "Loading\u2026" }), children: /* @__PURE__ */ jsx(Workbook, { ref: wbRef, data: initialData, onChange: handleChange }, dataKey) }) })
+  ] });
+}
+
+export { TableRenderer };

package/dist/chunk-6L3AL6W4.js

@@ -0,0 +1,24 @@
+// src/client/slideElements.ts
+function toElements(s) {
+  const layout = s.layout ?? "content";
+  const els = [];
+  const push = (id, e) => els.push({ color: s.textColor, ...e, id });
+  if (layout === "title" || layout === "section") {
+    if (s.title) push("title", { type: "text", x: 10, y: 34, w: 80, h: 18, text: s.title, fontSize: layout === "title" ? 54 : 40, bold: true, align: "center" });
+    if (s.subtitle) push("subtitle", { type: "text", x: 10, y: 58, w: 80, h: 8, text: s.subtitle, fontSize: 24, align: "center" });
+  } else if (layout === "image") {
+    if (s.title) push("title", { type: "text", x: 6, y: 6, w: 88, h: 10, text: s.title, fontSize: 28, bold: true });
+    if (s.image) els.push({ id: "img", type: "image", x: 14, y: 20, w: 72, h: 66, src: s.image });
+  } else if (layout === "two-column") {
+    if (s.title) push("title", { type: "text", x: 6, y: 6, w: 88, h: 10, text: s.title, fontSize: 28, bold: true });
+    (s.bullets ?? []).forEach((b, i) => push(`bul_${i}`, { type: "text", x: 6, y: 24 + i * 8, w: 42, h: 7, text: `\u2022 ${b}`, fontSize: 18 }));
+    (s.bullets2 ?? []).forEach((b, i) => push(`bul2_${i}`, { type: "text", x: 52, y: 24 + i * 8, w: 42, h: 7, text: `\u2022 ${b}`, fontSize: 18 }));
+  } else {
+    if (s.title) push("title", { type: "text", x: 6, y: 8, w: 88, h: 10, text: s.title, fontSize: 32, bold: true });
+    (s.bullets ?? []).forEach((b, i) => push(`bul_${i}`, { type: "text", x: 8, y: 28 + i * 9, w: 84, h: 8, text: `\u2022 ${b}`, fontSize: 20 }));
+  }
+  return els;
+}
+var resolveElements = (s) => s.elements?.length ? s.elements : toElements(s);
+
+export { resolveElements };