@braincrew-lab/langchain-canvas 0.1.11 → 0.1.13

package/dist/{ChartRenderer-4MWKP2J4.js → ChartRenderer-FX6ZN4NC.js}

@@ -1,30 +1,32 @@
 import { useArtifactPatch } from './chunk-TERWLUW3.js';
 import './chunk-KKLWKR5G.js';
-import { useState, useMemo, useRef, useEffect } from 'react';
+import { useState, useRef, useMemo, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { BarChart, LineChart, PieChart } from 'echarts/charts';
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 echarts.use([BarChart, LineChart, PieChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
 var PALETTE = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#0ea5e9", "#a855f7"];
 var seriesColor = (series, index) => series.color ?? PALETTE[index % PALETTE.length];
 var sliceColor = (options, index) => options?.colors?.[index] ?? PALETTE[index % PALETTE.length];
 var CHART_TYPES = ["bar", "line", "area", "pie"];
-function EChart({ option, height }) {
+function EChart({ option, height, onInst }) {
   const boxRef = useRef(null);
   const instRef = useRef(null);
   useEffect(() => {
     if (!boxRef.current) return;
     const inst = echarts.init(boxRef.current, void 0, { renderer: "canvas" });
     instRef.current = inst;
+    onInst?.(inst);
     const ro = new ResizeObserver(() => inst.resize());
     ro.observe(boxRef.current);
     return () => {
       ro.disconnect();
       inst.dispose();
       instRef.current = null;
+      onInst?.(null);
     };
   }, []);
   useEffect(() => {
@@ -36,12 +38,28 @@ function ChartRenderer({ artifact }) {
   const { chart, rows, xKey, series, options, echartsOption } = artifact.data;
   const patch = useArtifactPatch(artifact.id);
   const [editing, setEditing] = useState(false);
+  const instRef = useRef(null);
+  const downloadPng = () => {
+    const inst = instRef.current;
+    if (!inst) return;
+    const url = inst.getDataURL({ type: "png", pixelRatio: 2, backgroundColor: "#ffffff" });
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${(artifact.title || "chart").replace(/[^a-z0-9가-힣]+/gi, "-").replace(/^-+|-+$/g, "") || "chart"}.png`;
+    a.click();
+  };
   const option = useMemo(
     () => echartsOption ?? toEChartsOption(chart, rows, xKey, series, options),
     [echartsOption, chart, rows, xKey, series, options]
   );
   if (echartsOption) {
-    return /* @__PURE__ */ jsx("div", { className: "cv-chart", children: /* @__PURE__ */ jsx(EChart, { option, height: 340 }) });
+    return /* @__PURE__ */ jsxs("div", { className: "cv-chart", children: [
+      /* @__PURE__ */ jsxs("div", { className: "cv-chart__toolbar cv-chrome", children: [
+        /* @__PURE__ */ jsx("span", { className: "cv-chart__spacer" }),
+        /* @__PURE__ */ jsx("button", { className: "cv-edit-btn", onClick: downloadPng, title: "Download as PNG", children: "\u2913 PNG" })
+      ] }),
+      /* @__PURE__ */ jsx(EChart, { option, height: 320, onInst: (i) => instRef.current = i })
+    ] });
   }
   if (rows.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "cv-chart cv-chart--empty", children: "Waiting for data\u2026" });
@@ -67,7 +85,18 @@ function ChartRenderer({ artifact }) {
         /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!options?.stacked, onChange: (e) => patch({ options: { ...options, stacked: e.target.checked } }) }),
         "Stacked"
       ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "cv-chart__title-input",
+          value: options?.title ?? "",
+          placeholder: "Chart title\u2026",
+          onChange: (e) => patch({ options: { ...options, title: e.target.value || void 0 } }),
+          title: "Chart title"
+        }
+      ),
       /* @__PURE__ */ jsx("span", { className: "cv-chart__spacer" }),
+      /* @__PURE__ */ jsx("button", { className: "cv-edit-btn", onClick: downloadPng, title: "Download as PNG", children: "\u2913 PNG" }),
       /* @__PURE__ */ jsx("button", { className: `cv-edit-btn ${editing ? "is-primary" : ""}`, onClick: () => setEditing((v) => !v), children: editing ? "Done" : "Edit data" })
     ] }),
     editing && /* @__PURE__ */ jsxs("div", { className: "cv-chart__editor cv-chrome", children: [
@@ -92,7 +121,7 @@ function ChartRenderer({ artifact }) {
       ] }),
       /* @__PURE__ */ jsx(DataGrid, { rows, xKey, series, onCell: setCell, onAddRow: addRow, onRemoveRow: removeRow })
     ] }),
-    /* @__PURE__ */ jsx(EChart, { option, height: editing ? 260 : 340 })
+    /* @__PURE__ */ jsx(EChart, { option, height: editing ? 260 : 340, onInst: (i) => instRef.current = i })
   ] });
 }
 function DataGrid({
@@ -128,9 +157,12 @@ function DataGrid({
 }
 function toEChartsOption(chart, rows, xKey, series, options) {
   const AXIS = "#9aa4b2";
+  const titleBlock = options?.title ? { title: { text: options.title, left: "center", top: 2, textStyle: { color: AXIS, fontSize: 15, fontWeight: 600 } } } : {};
+  const hasTitle = !!options?.title;
   if (chart === "pie") {
     const valueKey = series[0]?.key ?? "value";
     return {
+      ...titleBlock,
       tooltip: { trigger: "item" },
       legend: { bottom: 0, textStyle: { color: AXIS } },
       series: [
@@ -151,9 +183,10 @@ function toEChartsOption(chart, rows, xKey, series, options) {
   }
   const stacked = (chart === "bar" || chart === "area") && !!options?.stacked;
   return {
+    ...titleBlock,
     tooltip: { trigger: "axis" },
     legend: { bottom: 0, textStyle: { color: AXIS } },
-    grid: { left: 8, right: 16, top: 24, bottom: 40, containLabel: true },
+    grid: { left: 8, right: 16, top: hasTitle ? 44 : 24, bottom: 40, containLabel: true },
     xAxis: {
       type: "category",
       data: rows.map((r) => String(r[xKey] ?? "")),

package/dist/DocumentRenderer-KJ6FTGKH.js

@@ -0,0 +1,123 @@
+import { useArtifactPatch } from './chunk-TERWLUW3.js';
+import './chunk-KKLWKR5G.js';
+import { useState, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function wordStats(text) {
+  const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+  return { words, minutes: Math.max(1, Math.round(words / 200)) };
+}
+function DocumentRenderer({ artifact }) {
+  const { content } = artifact.data;
+  const patch = useArtifactPatch(artifact.id);
+  const [draft, setDraft] = useState(null);
+  const taRef = useRef(null);
+  const editing = draft !== null;
+  const commit = () => {
+    if (draft !== null && draft !== content) patch({ content: draft });
+    setDraft(null);
+  };
+  const apply = (fn) => {
+    const ta = taRef.current;
+    if (!ta || draft === null) return;
+    const { text, a, b } = fn(draft, ta.selectionStart, ta.selectionEnd);
+    setDraft(text);
+    requestAnimationFrame(() => {
+      ta.focus();
+      ta.setSelectionRange(a, b);
+    });
+  };
+  const wrap = (mark) => apply((full, s, e) => ({ text: full.slice(0, s) + mark + full.slice(s, e) + mark + full.slice(e), a: s + mark.length, b: e + mark.length }));
+  const link = () => apply((full, s, e) => {
+    const label = full.slice(s, e) || "link";
+    const ins = `[${label}](https://)`;
+    const urlAt = s + label.length + 3;
+    return { text: full.slice(0, s) + ins + full.slice(e), a: urlAt, b: urlAt + 8 };
+  });
+  const prefixLines = (prefix) => apply((full, s, e) => {
+    const start = full.lastIndexOf("\n", s - 1) + 1;
+    const nl = full.indexOf("\n", e);
+    const end = nl === -1 ? full.length : nl;
+    const block = full.slice(start, end).split("\n").map((l) => prefix + l).join("\n");
+    return { text: full.slice(0, start) + block + full.slice(end), a: start, b: start + block.length };
+  });
+  const { words, minutes } = wordStats(editing ? draft ?? "" : content);
+  return /* @__PURE__ */ jsxs("div", { className: "cv-word", children: [
+    editing && /* @__PURE__ */ jsxs("div", { className: "cv-doc-bar cv-chrome", onMouseDown: (e) => e.preventDefault(), children: [
+      /* @__PURE__ */ jsx("button", { title: "Bold", onMouseDown: (e) => {
+        e.preventDefault();
+        wrap("**");
+      }, children: /* @__PURE__ */ jsx("b", { children: "B" }) }),
+      /* @__PURE__ */ jsx("button", { title: "Italic", onMouseDown: (e) => {
+        e.preventDefault();
+        wrap("*");
+      }, children: /* @__PURE__ */ jsx("i", { children: "I" }) }),
+      /* @__PURE__ */ jsx("button", { title: "Inline code", onMouseDown: (e) => {
+        e.preventDefault();
+        wrap("`");
+      }, children: "<>" }),
+      /* @__PURE__ */ jsx("span", { className: "cv-doc-bar__sep" }),
+      /* @__PURE__ */ jsx("button", { title: "Heading 1", onMouseDown: (e) => {
+        e.preventDefault();
+        prefixLines("# ");
+      }, children: "H1" }),
+      /* @__PURE__ */ jsx("button", { title: "Heading 2", onMouseDown: (e) => {
+        e.preventDefault();
+        prefixLines("## ");
+      }, children: "H2" }),
+      /* @__PURE__ */ jsx("button", { title: "Bullet list", onMouseDown: (e) => {
+        e.preventDefault();
+        prefixLines("- ");
+      }, children: "\u2022" }),
+      /* @__PURE__ */ jsx("button", { title: "Numbered list", onMouseDown: (e) => {
+        e.preventDefault();
+        prefixLines("1. ");
+      }, children: "1." }),
+      /* @__PURE__ */ jsx("button", { title: "Quote", onMouseDown: (e) => {
+        e.preventDefault();
+        prefixLines("> ");
+      }, children: "\u275D" }),
+      /* @__PURE__ */ jsx("button", { title: "Link", onMouseDown: (e) => {
+        e.preventDefault();
+        link();
+      }, children: "\u{1F517}" }),
+      /* @__PURE__ */ jsx("span", { className: "cv-doc-bar__spacer" }),
+      /* @__PURE__ */ jsxs("span", { className: "cv-doc-bar__count", children: [
+        words,
+        " words \xB7 ",
+        minutes,
+        " min read"
+      ] }),
+      /* @__PURE__ */ jsx("button", { className: "cv-doc-bar__done", onMouseDown: (e) => {
+        e.preventDefault();
+        commit();
+      }, children: "Done" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "cv-word__page", children: editing ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: taRef,
+        className: "cv-doc-editor",
+        value: draft,
+        autoFocus: true,
+        onBlur: commit,
+        onChange: (e) => setDraft(e.target.value)
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: "cv-doc",
+        title: "Click to edit",
+        onClick: () => artifact.status !== "streaming" && setDraft(content),
+        children: [
+          /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: content }),
+          artifact.status === "streaming" && /* @__PURE__ */ jsx("span", { className: "cv-caret", "aria-hidden": true })
+        ]
+      }
+    ) })
+  ] });
+}
+
+export { DocumentRenderer };

package/dist/{SlidesRenderer-7ICJQHYT.js → SlidesRenderer-SK5VQDIL.js}

@@ -27,7 +27,7 @@ function snapAxis(pos, size, targets) {
   }
   return best ? { pos: pos + best.delta, guide: best.guide } : { pos, guide: null };
 }
-function FreeSlide({ elements, onChange }) {
+function FreeSlide({ elements, onChange, padding }) {
   const slideRef = useRef(null);
   const [els, setEls] = useState(elements);
   const [selected, setSelected] = useState(null);
@@ -136,6 +136,7 @@ function FreeSlide({ elements, onChange }) {
     {
       className: "cv-free",
       ref: slideRef,
+      style: padding ? { inset: `${padding}%` } : void 0,
       onPointerMove: onMove,
       onPointerUp: onUp,
       onPointerLeave: onUp,
@@ -200,10 +201,10 @@ function FreeSlide({ elements, onChange }) {
                 /* @__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 && el.type === "shape" && /* @__PURE__ */ jsx("div", { className: `cv-free__fmt ${el.y < 16 ? "cv-free__fmt--below" : ""}`, onPointerDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx("input", { type: "color", value: el.fill ?? "#5b5bd6", onChange: (e) => updateEl(el.id, { fill: e.target.value }), title: "Fill color" }) }),
               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);
@@ -369,7 +370,7 @@ function SlidesRenderer({ artifact }) {
           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(
+            /* @__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",
                 {
@@ -378,7 +379,7 @@ function SlidesRenderer({ artifact }) {
                 },
                 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
@@ -442,6 +443,10 @@ function SlidesRenderer({ artifact }) {
         ),
         /* @__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" }),
@@ -449,7 +454,7 @@ function SlidesRenderer({ artifact }) {
         /* @__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__ */ 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: [
@@ -470,7 +475,7 @@ function SlidesRenderer({ artifact }) {
       )
     ] }),
     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", children: resolveElements(slide).map(
+      /* @__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,

package/dist/{TableRenderer-ZF7MVA7I.js → TableRenderer-Y4JFRSLU.js}

@@ -2,7 +2,7 @@ import { loadOptional } from './chunk-YZZSJJMQ.js';
 import { useCanvasStore } from './chunk-KKLWKR5G.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';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/io/formula.ts
 var EMPTY = /* @__PURE__ */ new Map();
@@ -203,10 +203,34 @@ function TableRenderer({ artifact }) {
     };
   }, [dataKey, hasFormulas]);
   const hasSheet = !!artifact.data.sheet?.length;
+  const [sortCol, setSortCol] = useState("");
+  const [sortDir, setSortDir] = useState(1);
+  const [filter, setFilter] = useState("");
+  const [appliedFilter, setAppliedFilter] = useState("");
+  useEffect(() => {
+    const t = setTimeout(() => setAppliedFilter(filter), 300);
+    return () => clearTimeout(t);
+  }, [filter]);
+  const viewRows = useMemo(() => {
+    let r = rows;
+    const q = appliedFilter.trim().toLowerCase();
+    if (q) r = r.filter((row) => columns.some((c) => String(row[c.key] ?? "").toLowerCase().includes(q)));
+    if (sortCol) {
+      r = [...r].sort((a, b) => {
+        const av = a[sortCol];
+        const bv = b[sortCol];
+        const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av ?? "").localeCompare(String(bv ?? ""));
+        return cmp * sortDir;
+      });
+    }
+    return r;
+  }, [rows, columns, appliedFilter, sortCol, sortDir]);
+  const viewActive = !!appliedFilter.trim() || !!sortCol;
+  const wbKey = `${dataKey}:${viewActive ? `view-s${sortCol}${sortDir}-f${appliedFilter}` : hasSheet ? "sheet" : "rows"}`;
   const initialData = useMemo(
-    () => artifact.data.sheet?.length ? artifact.data.sheet : toWorkbook(columns, rows, formulas),
+    () => viewActive ? toWorkbook(columns, viewRows, formulas) : hasSheet ? artifact.data.sheet : toWorkbook(columns, rows, formulas),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dataKey, formulasReady]
+    [wbKey, formulasReady]
   );
   const applyEvent = useCanvasStore((s) => s.applyUserEvent);
   const persistTimer = useRef(null);
@@ -241,9 +265,36 @@ function TableRenderer({ artifact }) {
     /* @__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" }),
+      columns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__sep" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-sheet-tools__sort",
+            value: sortCol,
+            title: "Sort by column",
+            onChange: (e) => setSortCol(e.target.value),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Sort\u2026" }),
+              columns.map((c) => /* @__PURE__ */ jsx("option", { value: c.key, children: c.label ?? c.key }, c.key))
+            ]
+          }
+        ),
+        sortCol && /* @__PURE__ */ jsx("button", { type: "button", title: sortDir === 1 ? "Ascending" : "Descending", onClick: () => setSortDir((d) => d === 1 ? -1 : 1), children: sortDir === 1 ? "\u25B2" : "\u25BC" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "cv-sheet-tools__filter",
+            value: filter,
+            placeholder: "Filter\u2026",
+            onChange: (e) => setFilter(e.target.value),
+            title: "Filter rows"
+          }
+        )
+      ] }),
       /* @__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) }) })
+    /* @__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 }, wbKey) }) })
   ] });
 }
 

package/dist/index.d.ts

@@ -46,6 +46,8 @@ interface ChartSeries {
 interface ChartOptions {
     stacked?: boolean;
     yLabel?: string;
+    /** Chart title shown above the plot. */
+    title?: string;
     /** Per-slice colors for pie charts, index-aligned to `rows`. */
     colors?: string[];
 }
@@ -117,6 +119,9 @@ interface Slide {
     textColor?: string;
     /** Speaker notes (not shown on the slide; exported to the .pptx notes pane). */
     notes?: string;
+    /** Content padding as a percent of the slide width (a safe margin around the
+     *  free canvas). Applied in the editor, present view, thumbnails, and export. */
+    padding?: number;
 }
 interface SlidesData {
     slides: Slide[];

package/dist/index.js

@@ -2111,10 +2111,10 @@ function HtmlRenderer({ artifact: artifact2 }) {
 }
 
 // src/components/renderers/index.ts
-var ChartRenderer = lazy(() => import('./ChartRenderer-4MWKP2J4.js').then((m) => ({ default: m.ChartRenderer })));
-var DocumentRenderer = lazy(() => import('./DocumentRenderer-LJGP6N7E.js').then((m) => ({ default: m.DocumentRenderer })));
-var TableRenderer = lazy(() => import('./TableRenderer-ZF7MVA7I.js').then((m) => ({ default: m.TableRenderer })));
-var SlidesRenderer = lazy(() => import('./SlidesRenderer-7ICJQHYT.js').then((m) => ({ default: m.SlidesRenderer })));
+var ChartRenderer = lazy(() => import('./ChartRenderer-FX6ZN4NC.js').then((m) => ({ default: m.ChartRenderer })));
+var DocumentRenderer = lazy(() => import('./DocumentRenderer-KJ6FTGKH.js').then((m) => ({ default: m.DocumentRenderer })));
+var TableRenderer = lazy(() => import('./TableRenderer-Y4JFRSLU.js').then((m) => ({ default: m.TableRenderer })));
+var SlidesRenderer = lazy(() => import('./SlidesRenderer-SK5VQDIL.js').then((m) => ({ default: m.SlidesRenderer })));
 var builtinRenderers = {
   html: HtmlRenderer,
   document: DocumentRenderer,
@@ -2255,8 +2255,10 @@ async function slidesToPptx(data, _title) {
     const s = pptx.addSlide();
     if (slide.background && /^#[0-9a-f]{3,8}$/i.test(slide.background)) s.background = { color: slide.background.replace("#", "") };
     const tc = slide.textColor ? slide.textColor.replace("#", "") : void 0;
+    const pad = (slide.padding ?? 0) / 100;
+    const inset = (v) => pad + v / 100 * (1 - 2 * pad);
     for (const el of resolveElements(slide)) {
-      const box = { x: el.x / 100 * W, y: el.y / 100 * H, w: el.w / 100 * W, h: el.h / 100 * H };
+      const box = { x: inset(el.x) * W, y: inset(el.y) * H, w: el.w / 100 * (1 - 2 * pad) * W, h: el.h / 100 * (1 - 2 * pad) * H };
       if (el.type === "text") {
         const color = el.color ? el.color.replace("#", "") : tc;
         s.addText(el.text ?? "", { ...box, fontSize: (el.fontSize ?? 24) * 0.75, bold: !!el.bold, align: el.align ?? "left", ...color ? { color } : {} });
@@ -2294,7 +2296,9 @@ function slidesToPrintHtml(data, title) {
       const src = safeSrc(el.src);
       return src ? `<img class="el" style="${box}" src="${escapeAttr(src)}"/>` : "";
     }).join("");
-    return `<section class="slide" style="background:${escapeAttr(bg)}">${els}</section>`;
+    const pad = slide.padding ?? 0;
+    const inner = pad ? `<div style="position:absolute;inset:${pad}%">${els}</div>` : els;
+    return `<section class="slide" style="background:${escapeAttr(bg)}">${inner}</section>`;
   }).join("");
   return `<!doctype html><html><head><meta charset="utf-8"><title>${escapeXml(title)}</title><style>
     @page { size: 1280px 720px; margin: 0; }

package/dist/styles.css

@@ -295,6 +295,21 @@
 
 /* --- Word viewer (document page) ---------------------------------------------- */
 
+.cv-doc-bar {
+  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px;
+  max-width: 816px; margin: 0 auto 12px; padding: 6px 8px;
+  border: 1px solid var(--cv-border); border-radius: 10px; background: var(--cv-surface);
+  flex-wrap: wrap;
+}
+.cv-doc-bar button {
+  border: 0; background: transparent; color: var(--cv-text); font: inherit; font-size: 13px;
+  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 6px; cursor: pointer;
+}
+.cv-doc-bar button:hover { background: var(--cv-surface-2, rgba(120,120,140,0.12)); }
+.cv-doc-bar__sep { width: 1px; height: 18px; background: var(--cv-border); margin: 0 4px; }
+.cv-doc-bar__spacer { flex: 1; }
+.cv-doc-bar__count { font-size: 12px; color: var(--cv-muted); white-space: nowrap; }
+.cv-doc-bar__done { background: var(--cv-accent) !important; color: #fff; font-weight: 600; }
 .cv-word { background: #edeef1; padding: 28px 16px; min-height: 100%; }
 .cv-word .cv-edit-toolbar { max-width: 816px; margin: 0 auto 12px; }
 .cv-word__page {
@@ -381,6 +396,13 @@
   border-radius: 6px; background: var(--cv-bg); color: var(--cv-text); cursor: pointer;
 }
 .cv-sheet-tools button:hover { border-color: var(--cv-accent, #6366f1); color: var(--cv-accent, #6366f1); }
+.cv-sheet-tools__sep { width: 1px; height: 18px; background: var(--cv-border); margin: 0 2px; }
+.cv-sheet-tools__sort, .cv-sheet-tools__filter {
+  font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 6px;
+  border: 1px solid var(--cv-border); background: var(--cv-bg); color: var(--cv-text);
+}
+.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); }
 .cv-sheet { position: relative; width: 100%; flex: 1; height: auto; min-height: 0; }
 .cv-sheet .fortune-container { height: 100% !important; width: 100% !important; }
@@ -596,6 +618,13 @@
   width: 30px; height: 30px; padding: 0;
   border: 1px solid var(--cv-border); border-radius: 7px; background: none; cursor: pointer;
 }
+.cv-deck__pad {
+  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cv-muted);
+}
+.cv-deck__pad input {
+  width: 48px; font: inherit; font-size: 12.5px; padding: 4px 6px;
+  border: 1px solid var(--cv-border); border-radius: 6px; background: var(--cv-bg); color: var(--cv-text);
+}
 .cv-deck__present {
   width: auto !important; padding: 0 12px !important;
   background: var(--cv-accent) !important; color: #fff !important;
@@ -690,6 +719,12 @@
 .cv-chart__types .cv-edit-btn { text-transform: capitalize; }
 .cv-chart__stack { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cv-muted); cursor: pointer; }
 .cv-chart__spacer { flex: 1; }
+.cv-chart__title-input {
+  font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 7px;
+  border: 1px solid var(--cv-border); background: var(--cv-bg); color: var(--cv-text);
+  min-width: 120px; max-width: 220px;
+}
+.cv-chart__title-input:focus { outline: none; border-color: var(--cv-accent); }
 
 /* --- chart editor ------------------------------------------------------------- */
 .cv-chart__editor {

package/package.json

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

package/dist/DocumentRenderer-LJGP6N7E.js

@@ -1,40 +0,0 @@
-import { useArtifactPatch } from './chunk-TERWLUW3.js';
-import './chunk-KKLWKR5G.js';
-import { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function DocumentRenderer({ artifact }) {
-  const { content } = artifact.data;
-  const patch = useArtifactPatch(artifact.id);
-  const [draft, setDraft] = useState(null);
-  const editing = draft !== null;
-  const commit = () => {
-    if (draft !== null && draft !== content) patch({ content: draft });
-    setDraft(null);
-  };
-  return /* @__PURE__ */ jsx("div", { className: "cv-word", children: /* @__PURE__ */ jsx("div", { className: "cv-word__page", children: editing ? /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      className: "cv-doc-editor",
-      value: draft,
-      autoFocus: true,
-      onBlur: commit,
-      onChange: (e) => setDraft(e.target.value)
-    }
-  ) : /* @__PURE__ */ jsxs(
-    "article",
-    {
-      className: "cv-doc",
-      title: "Click to edit",
-      onClick: () => artifact.status !== "streaming" && setDraft(content),
-      children: [
-        /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: content }),
-        artifact.status === "streaming" && /* @__PURE__ */ jsx("span", { className: "cv-caret", "aria-hidden": true })
-      ]
-    }
-  ) }) });
-}
-
-export { DocumentRenderer };