@braincrew-lab/langchain-canvas 0.1.11 → 0.1.12

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

@@ -67,6 +67,16 @@ 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 ${editing ? "is-primary" : ""}`, onClick: () => setEditing((v) => !v), children: editing ? "Done" : "Edit data" })
     ] }),
@@ -128,9 +138,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 +164,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/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[];
 }

package/dist/index.js

@@ -2111,8 +2111,8 @@ 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 ChartRenderer = lazy(() => import('./ChartRenderer-CWV2OX3S.js').then((m) => ({ default: m.ChartRenderer })));
+var DocumentRenderer = lazy(() => import('./DocumentRenderer-KJ6FTGKH.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 builtinRenderers = {

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 {
@@ -690,6 +705,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.12",
   "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 };