@braincrew-lab/langchain-canvas 0.3.0 → 0.5.0

package/README.ko.md

@@ -1,11 +1,8 @@
 # @braincrew-lab/langchain-canvas
 
-[![npm](https://img.shields.io/npm/v/%40braincrew-lab%2Flangchain-canvas?label=npm&color=cb3837)](https://www.npmjs.com/package/@braincrew-lab/langchain-canvas)
-[![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/braincrew-lab/langchain-canvas/blob/main/LICENSE)
+LangChain 챗 앱을 위한 캔버스. 에이전트가 아티팩트(웹 페이지·스프레드시트·슬라이드·차트·문서)를 스트리밍하면 대화 옆에 실시간으로 뜨고 그 자리에서 편집됩니다. 사용자가 직접 손보고 실제 파일로 내보낼 수 있습니다.
 
-LangChain 챗 앱을 위한 캔버스. 에이전트가 아티팩트(웹 페이지·스프레드시트·슬라이드·차트·문서·PDF)를 스트리밍하면 대화 옆에 실시간으로 뜨고 그 자리에서 편집됩니다. 사용자가 직접 손보고 실제 파일로 내보낼 수 있습니다.
-
-ChatGPT Canvas나 Claude Artifacts 같은 경험을, **내 React 앱에 넣고 내 에이전트에 연결하는 패키지**로 제공합니다. 스크린샷·아키텍처·와이어 프로토콜 전체는 [GitHub 레포](https://github.com/braincrew-lab/langchain-canvas)에 있습니다.
+ChatGPT Canvas나 Claude Artifacts 같은 경험을, **내 React 앱에 넣고 내 에이전트에 연결하는 패키지**로 제공합니다.
 
 > [English README](./README.md)
 
@@ -77,29 +74,26 @@ HTML이 기본 substrate이고, 샌드박스 iframe에 렌더됩니다. 에이
 
 정적 표가 아니라 스프레드시트 엔진(Fortune-sheet) 위에서 동작합니다.
 
-- **실시간 수식** — `=SUM(C2:C4)`, `=VLOOKUP(...)`, `=A2*B2` 입력 시 계산. 셀참조·범위·함수 자동완성 지원. 계산은 선택 설치 `fast-formula-parser`가 담당해 Excel 함수 세트(`IF`, `COUNTIF`, `SUMIF`, `INDEX`/`MATCH`, …)가 바로 동작
+- **실시간 수식** — `=SUM(C2:C4)`, `=AVERAGE(...)`, `=A2*B2` 입력 시 계산. 셀참조·범위·함수 자동완성 지원
 - **데이터로 온 수식** — 에이전트가 값으로 보낸 수식(`"=AVERAGE(B2:B4)"`)은 **로드 시 미리 계산**되어 결과가 바로 표시
-- **Excel 스타일 리본** — 삽입 / 글꼴 / 맞춤 / 표시 형식 / 편집 / 보기로 그룹된 트레이, **수식 바**, **Σ 자동 합계** 메뉴
-- **서식** — 폰트, 숫자/통화/％/날짜 서식, 굵게/기울임, 테두리, 셀 병합/해제, 정렬, **틀 고정**, 다중 시트, 그리고 에이전트가 만든 요란한 셀 색을 한 번에 걷어내는 **스타일 정리**
+- **전체 툴바** — 폰트, 숫자/통화/％ 서식, 굵게/기울임, 테두리, 셀 병합, 정렬, 다중 시트 — 데스크톱 수준
 - 넓은 그리드에서 **상하좌우 부드러운 스크롤**
-- **Export** — `.xlsx`(폰트/병합/서식 포함) 또는 `.csv` — 둘 다 사용자의 그리드 편집이 반영됨
+- **Export** — `.xlsx`(폰트/병합/서식 포함) 또는 `.csv`
 
 ### 🖼️ 슬라이드 (`slides`) — 프리 캔버스 덱
 
 모든 요소가 움직이는 PowerPoint 스타일 편집기.
 
-- **자유 배치** — 텍스트/이미지 요소 드래그·리사이즈, 드래그와 리사이즈 모두에서 스냅 가이드, 회전, Shift로 비율 고정 리사이즈
-- **다중 선택 & 그룹** — Shift+클릭 또는 마퀴 선택 후 그룹/해제(⌘G / ⌘⇧G). 떠 있는 액션 바로 정렬·분배·복제·삭제
-- **키보드 편집** — 방향키 미세 이동, ⌘D 복제, ⌘C/⌘V(슬라이드 간 가능), ⌘] / ⌘[ z-순서
+- **자유 배치** — 텍스트/이미지 요소 드래그·리사이즈, 가이드 스냅
 - **인라인 편집** — 더블클릭 텍스트 편집, 굵게/크기/색/정렬 툴바
 - **구조** — 슬라이드 추가/복제/삭제/순서, 썸네일 레일, 발표자 노트
-- **8가지 테마**(Editorial · Gallery · Boardroom · Sage · Graphite · Observatory · Ultramarine · Bordeaux)·배경, 발표 모드(전체화면, 방향키 이동, 진행 표시)
-- **Export** — `.pptx` 또는 **PDF**(전 슬라이드)
+- **테마·배경**, 발표 모드(전체화면, 방향키 이동)
+- **Export** — `.pptx`, **Figma 복사**(에디터블 프레임으로 바로 붙여넣기), **PDF**(전 슬라이드)
 
 ### 📝 문서 (`document`) — Markdown / Word
 
 - **클릭 편집** — 페이지를 Markdown으로 편집(GFM 렌더)
-- **Export** — `.docx`, `.md`, `.hwpx`(한글), `.pdf`, `.html`
+- **Export** — `.docx`, `.md`, `.pdf`, `.html`
 
 ### 📈 차트 (`chart`)
 
@@ -108,15 +102,10 @@ HTML이 기본 substrate이고, 샌드박스 iframe에 렌더됩니다. 에이
 - 시리즈(또는 파이 조각)별 **색상 변경**, 시리즈 이름, Y축 라벨, 스택 토글
 - **Export** — `.pdf`(차트가 SVG라 선명) 또는 raw JSON
 
-### 📄 PDF (`pdf`)
-
-- 에이전트가 `{ type: "pdf", data: { src } }`(`data:`/`blob:`/https URL)를 emit 하면 **브라우저 내장 뷰어**로 렌더 — 의존성 0, 줌 컨트롤 포함
-- `data:` 소스는 `application/pdf`로 고정되어, 조작된 아티팩트가 스크립트 실행 가능한 same-origin 프레임을 끼워 넣을 수 없음
-
 ### 📁 파일 — 라운드트립
 
-- **Import** — 드래그앤드롭 또는 파일 선택: **CSV · Excel(.xlsx) · Word(.docx) · PowerPoint(.pptx) · PDF · Markdown · HTML · JSON · 한글(.hwp / .hwpx)** → 편집 가능한 아티팩트로. `.xlsx`는 폰트/채우기/병합/서식/내장 이미지를, `.pptx`는 테마 색·마스터 스타일을 유지하고, 바이너리 `.hwp`는 직접 파싱해 서식 있는 HTML로 엽니다
-- **Export** — 각 아티팩트를 네이티브 포맷(`.xlsx` / `.csv` / `.docx` / `.md` / `.hwpx` / `.pptx` / 차트 JSON)으로, 그리고 범용 **standalone `.html`** · **PDF**(브라우저 인쇄)
+- **Import** — 드래그앤드롭 또는 파일 선택: **CSV · Excel · Markdown · HTML · JSON** → 편집 가능한 아티팩트로
+- **Export** — 각 아티팩트를 네이티브 포맷으로, 그리고 범용 **standalone `.html`** · **PDF**(브라우저 인쇄)
 
 ### 🧰 모든 아티팩트 공통
 
@@ -132,7 +121,6 @@ HTML이 기본 substrate이고, 샌드박스 iframe에 렌더됩니다. 에이
 - **peerDependency:** React 18 또는 19 — 직접 제공. ESM 전용.
 - **스타일:** `import "@braincrew-lab/langchain-canvas/styles.css"` 한 번.
 - **인스턴스 격리:** `<CanvasProvider>`가 서브트리마다 독립 store 제공.
-- **한국어 UI:** `<Canvas locale="ko" />` 하나로 UI 전체가 한국어/영어 전환.
 - **커스텀 렌더러:** `registry`로 타입 렌더 방식 추가/오버라이드.
 
 ```tsx

package/README.md

@@ -1,11 +1,8 @@
 # @braincrew-lab/langchain-canvas
 
-[![npm](https://img.shields.io/npm/v/%40braincrew-lab%2Flangchain-canvas?label=npm&color=cb3837)](https://www.npmjs.com/package/@braincrew-lab/langchain-canvas)
-[![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/braincrew-lab/langchain-canvas/blob/main/LICENSE)
+A canvas for your LangChain chat app. Your agent streams an artifact — a web page, a spreadsheet, a slide deck, a chart, a document — and it shows up next to the conversation, live and editable. Users can tweak it by hand and export it to a real file.
 
-A canvas for your LangChain chat app. Your agent streams an artifact — a web page, a spreadsheet, a slide deck, a chart, a document, a PDF — and it shows up next to the conversation, live and editable. Users can tweak it by hand and export it to a real file.
-
-Think ChatGPT Canvas or Claude Artifacts, but a package you drop into your own React app and point at your own agent. Screenshots, architecture, and the full wire protocol live in the [GitHub repo](https://github.com/braincrew-lab/langchain-canvas).
+Think ChatGPT Canvas or Claude Artifacts, but a package you drop into your own React app and point at your own agent.
 
 > [한국어 README](./README.ko.md)
 
@@ -77,29 +74,26 @@ HTML is the base substrate, rendered in a sandboxed iframe. Selecting and editin
 
 Runs on a spreadsheet engine (Fortune-sheet), not a static table.
 
-- **Live formulas** — type `=SUM(C2:C4)`, `=VLOOKUP(...)`, `=A2*B2`; they calculate, with cell references, ranges, and function autocomplete. Evaluation is delegated to the optional `fast-formula-parser`, so the Excel function set (`IF`, `COUNTIF`, `SUMIF`, `INDEX`/`MATCH`, …) works out of the box.
+- **Live formulas** — type `=SUM(C2:C4)`, `=AVERAGE(...)`, `=A2*B2`; they calculate, with cell references, ranges, and function autocomplete.
 - **Formulas from data** — a formula the agent sends as a value (e.g. `"=AVERAGE(B2:B4)"`) is **pre-computed on load** so it shows its result immediately.
-- **Excel-style ribbon** — grouped Insert / Font / Alignment / Number / Editing / View trays, plus a **formula bar** and a **Σ AutoSum** menu.
-- **Formatting** — fonts, number/currency/percent/date formats, bold/italic, borders, cell merge/unmerge, alignment, **freeze panes**, multiple sheets, and a one-click **clean styling** that strips garish agent-generated fills.
+- **Full toolbar** — fonts, number/currency/percent formats, bold/italic, borders, cell merging, alignment, multiple sheets — like a desktop spreadsheet.
 - **Smooth scrolling** in both directions over a large grid.
-- **Export** to `.xlsx` (with fonts/merges/formats) or `.csv` — both include the user's in-grid edits.
+- **Export** to `.xlsx` (with fonts/merges/formats) or `.csv`.
 
 ### 🖼️ Slides (`slides`) — a free-canvas deck
 
 A PowerPoint-style editor where every element is movable.
 
-- **Free positioning** — drag and resize text/image elements; snap guides on drag *and* resize; rotation; hold Shift to lock aspect while resizing.
-- **Multi-select & groups** — Shift+click or marquee-select, then group/ungroup (⌘G / ⌘⇧G); a floating bar offers align, distribute, duplicate, delete.
-- **Keyboard editing** — arrow-key nudge, ⌘D duplicate, ⌘C/⌘V across slides, ⌘] / ⌘[ z-order.
+- **Free positioning** — drag and resize text/image elements; snap to guides.
 - **Inline editing** — double-click to edit text; format toolbar for bold/size/color/align.
 - **Structure** — add/duplicate/delete/reorder slides, thumbnails rail, speaker notes.
-- **8 themes** (Editorial, Gallery, Boardroom, Sage, Graphite, Observatory, Ultramarine, Bordeaux) & backgrounds; present mode (full-screen, arrow-key navigation, progress bar).
-- **Export** to `.pptx` or **PDF** (all slides).
+- **Themes & backgrounds**, present mode (full-screen, arrow-key navigation).
+- **Export** to `.pptx`, or copy to **Figma** (paste straight in as editable frames), or **PDF** (all slides).
 
 ### 📝 Documents (`document`) — Markdown / Word
 
 - **Click-to-edit** the page as Markdown, rendered with GFM.
-- **Export** to `.docx`, `.md`, `.hwpx` (한글), `.pdf`, or `.html`.
+- **Export** to `.docx`, `.md`, `.pdf`, or `.html`.
 
 ### 📈 Charts (`chart`)
 
@@ -108,15 +102,10 @@ A PowerPoint-style editor where every element is movable.
 - **Recolor** each series (or each pie slice), rename series, set the y-axis label, toggle stacking.
 - **Export** to `.pdf` (the chart is SVG, so it prints crisply) or the raw JSON.
 
-### 📄 PDFs (`pdf`)
-
-- The agent emits `{ type: "pdf", data: { src } }` (a `data:`/`blob:`/https URL) and the file renders in the **browser's built-in viewer** — zero dependencies, with a zoom control.
-- `data:` sources are pinned to `application/pdf`, so a crafted artifact can't smuggle a scriptable same-origin frame.
-
 ### 📁 Files — round-trip
 
-- **Import** by drag-and-drop or a file picker: **CSV · Excel (.xlsx) · Word (.docx) · PowerPoint (.pptx) · PDF · Markdown · HTML · JSON · 한글 (.hwp / .hwpx)**. They open as editable artifacts — `.xlsx` keeps fonts/fills/merges/formats/embedded images, `.pptx` keeps theme colors and master styles, and binary `.hwp` is parsed from scratch into formatted HTML.
-- **Export** every artifact to its native format (`.xlsx` / `.csv` / `.docx` / `.md` / `.hwpx` / `.pptx` / chart JSON), plus a universal **standalone `.html`** and **PDF** (browser print).
+- **Import** by drag-and-drop or a file picker: **CSV · Excel · Markdown · HTML · JSON**. They open as editable artifacts.
+- **Export** every artifact to its native format, plus a universal **standalone `.html`** and **PDF** (browser print).
 
 ### 🧰 Across every artifact
 
@@ -132,7 +121,6 @@ A PowerPoint-style editor where every element is movable.
 - **Peer dependency:** React 18 or 19 — you bring your own. ESM only.
 - **Styles:** `import "@braincrew-lab/langchain-canvas/styles.css"` once.
 - **Isolated instances:** `<CanvasProvider>` gives each subtree its own store.
-- **Korean UI:** `<Canvas locale="ko" />` localizes the entire chrome (English / Korean).
 - **Bring your own renderer:** pass `registry` to add or override how a type renders.
 
 ```tsx

package/dist/{ChartRenderer-ABRQ5YFN.js → ChartRenderer-JGRJ23OB.js}

@@ -1,18 +1,17 @@
-import { useArtifactPatch } from './chunk-FSFOURG5.js';
-import './chunk-ZLXAWRUP.js';
-import { useT } from './chunk-QMOJEGRH.js';
+import { useArtifactPatch } from './chunk-K2UZAYW2.js';
+import './chunk-EHW446VF.js';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import * as echarts from 'echarts/core';
-import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart } from 'echarts/charts';
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-echarts.use([BarChart, LineChart, PieChart, ScatterChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
+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", "scatter", "pie", "donut"];
+var CHART_TYPES = ["bar", "line", "area", "pie"];
 function EChart({ option, height, onInst }) {
   const boxRef = useRef(null);
   const instRef = useRef(null);
@@ -36,7 +35,6 @@ function EChart({ option, height, onInst }) {
   return /* @__PURE__ */ jsx("div", { ref: boxRef, className: "cv-chart__canvas", style: { width: "100%", height } });
 }
 function ChartRenderer({ artifact }) {
-  const t = useT();
   const { chart, rows, xKey, series, options, echartsOption } = artifact.data;
   const patch = useArtifactPatch(artifact.id);
   const [editing, setEditing] = useState(false);
@@ -58,15 +56,15 @@ function ChartRenderer({ artifact }) {
     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: t("downloadPng"), children: t("downloadPng") })
+        /* @__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: t("waitingData") });
+    return /* @__PURE__ */ jsx("div", { className: "cv-chart cv-chart--empty", children: "Waiting for data\u2026" });
   }
-  const isPie = chart === "pie" || chart === "donut";
+  const isPie = chart === "pie";
   const setSeries = (i, partial) => patch({ series: series.map((s, j) => j === i ? { ...s, ...partial } : s) });
   const setSliceColor = (i, color) => {
     const colors = rows.map((_, j) => options?.colors?.[j] ?? PALETTE[j % PALETTE.length]);
@@ -82,38 +80,38 @@ function ChartRenderer({ artifact }) {
   const removeRow = (i) => patch({ rows: rows.filter((_, j) => j !== i) });
   return /* @__PURE__ */ jsxs("div", { className: "cv-chart", children: [
     /* @__PURE__ */ jsxs("div", { className: "cv-chart__toolbar cv-chrome", children: [
-      /* @__PURE__ */ jsx("div", { className: "cv-chart__types", children: CHART_TYPES.map((t2) => /* @__PURE__ */ jsx("button", { className: `cv-edit-btn ${chart === t2 ? "is-primary" : ""}`, onClick: () => patch({ chart: t2 }), children: t2 }, t2)) }),
+      /* @__PURE__ */ jsx("div", { className: "cv-chart__types", children: CHART_TYPES.map((t) => /* @__PURE__ */ jsx("button", { className: `cv-edit-btn ${chart === t ? "is-primary" : ""}`, onClick: () => patch({ chart: t }), children: t }, t)) }),
       (chart === "bar" || chart === "area") && /* @__PURE__ */ jsxs("label", { className: "cv-chart__stack", children: [
         /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!options?.stacked, onChange: (e) => patch({ options: { ...options, stacked: e.target.checked } }) }),
-        t("stacked")
+        "Stacked"
       ] }),
       /* @__PURE__ */ jsx(
         "input",
         {
           className: "cv-chart__title-input",
           value: options?.title ?? "",
-          placeholder: t("chartTitle"),
+          placeholder: "Chart title\u2026",
           onChange: (e) => patch({ options: { ...options, title: e.target.value || void 0 } }),
-          title: t("chartTitle")
+          title: "Chart title"
         }
       ),
       /* @__PURE__ */ jsx("span", { className: "cv-chart__spacer" }),
-      /* @__PURE__ */ jsx("button", { className: "cv-edit-btn", onClick: downloadPng, title: t("downloadPng"), children: t("downloadPng") }),
-      /* @__PURE__ */ jsx("button", { className: `cv-edit-btn ${editing ? "is-primary" : ""}`, onClick: () => setEditing((v) => !v), children: editing ? t("doneEditing") : t("editData") })
+      /* @__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: [
       /* @__PURE__ */ jsx("div", { className: "cv-chart__legend", children: isPie ? rows.map((r, i) => /* @__PURE__ */ jsxs("span", { className: "cv-chart__swatch", children: [
         /* @__PURE__ */ jsx("input", { type: "color", value: sliceColor(options, i), onChange: (e) => setSliceColor(i, e.target.value), title: `Color: ${r[xKey]}` }),
         /* @__PURE__ */ jsx("span", { className: "cv-chart__swatch-label", children: String(r[xKey]) })
       ] }, i)) : series.map((s, i) => /* @__PURE__ */ jsxs("span", { className: "cv-chart__swatch", children: [
-        /* @__PURE__ */ jsx("input", { type: "color", value: seriesColor(s, i), onChange: (e) => setSeries(i, { color: e.target.value }), title: t("seriesColor") }),
+        /* @__PURE__ */ jsx("input", { type: "color", value: seriesColor(s, i), onChange: (e) => setSeries(i, { color: e.target.value }), title: "Series color" }),
         /* @__PURE__ */ jsx(
           "input",
           {
             className: "cv-chart__series-name",
             value: s.label ?? s.key,
             onChange: (e) => setSeries(i, { label: e.target.value }),
-            title: t("seriesName")
+            title: "Series name"
           }
         )
       ] }, s.key)) }),
@@ -126,23 +124,6 @@ function ChartRenderer({ artifact }) {
     /* @__PURE__ */ jsx(EChart, { option, height: editing ? 260 : 340, onInst: (i) => instRef.current = i })
   ] });
 }
-function NumberCell({ value, onCommit }) {
-  const [draft, setDraft] = useState(null);
-  const shown = draft ?? String(Number(value ?? 0));
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "number",
-      value: shown,
-      onChange: (e) => {
-        setDraft(e.target.value);
-        const n = Number(e.target.value);
-        if (e.target.value !== "" && Number.isFinite(n)) onCommit(n);
-      },
-      onBlur: () => setDraft(null)
-    }
-  );
-}
 function DataGrid({
   rows,
   xKey,
@@ -151,7 +132,6 @@ function DataGrid({
   onAddRow,
   onRemoveRow
 }) {
-  const t = useT();
   return /* @__PURE__ */ jsxs("div", { className: "cv-chart__grid", children: [
     /* @__PURE__ */ jsxs("table", { children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
@@ -161,18 +141,25 @@ function DataGrid({
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("input", { value: String(row[xKey] ?? ""), onChange: (e) => onCell(i, xKey, e.target.value) }) }),
-        series.map((s) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(NumberCell, { value: row[s.key], onCommit: (n) => onCell(i, s.key, n) }) }, s.key)),
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("button", { className: "cv-chart__row-del", onClick: () => onRemoveRow(i), disabled: rows.length <= 1, title: t("removeRow"), children: "\xD7" }) })
+        series.map((s) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            value: Number(row[s.key] ?? 0),
+            onChange: (e) => onCell(i, s.key, e.target.value === "" ? 0 : Number(e.target.value))
+          }
+        ) }, s.key)),
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("button", { className: "cv-chart__row-del", onClick: () => onRemoveRow(i), disabled: rows.length <= 1, title: "Remove row", children: "\xD7" }) })
       ] }, i)) })
     ] }),
-    /* @__PURE__ */ jsx("button", { className: "cv-chart__addrow", onClick: onAddRow, children: t("addRowBtn") })
+    /* @__PURE__ */ jsx("button", { className: "cv-chart__addrow", onClick: onAddRow, children: "+ Add row" })
   ] });
 }
 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" || chart === "donut") {
+  if (chart === "pie") {
     const valueKey = series[0]?.key ?? "value";
     return {
       ...titleBlock,
@@ -181,7 +168,7 @@ function toEChartsOption(chart, rows, xKey, series, options) {
       series: [
         {
           type: "pie",
-          radius: chart === "donut" ? ["45%", "70%"] : ["45%", "72%"],
+          radius: ["45%", "72%"],
           padAngle: 2,
           itemStyle: { borderRadius: 4 },
           label: { color: AXIS },
@@ -194,20 +181,13 @@ function toEChartsOption(chart, rows, xKey, series, options) {
       ]
     };
   }
-  const isNumeric = (v) => v !== void 0 && v !== "" && Number.isFinite(Number(v));
-  const scatterOnValueAxis = chart === "scatter" && rows.length > 0 && rows.every((r) => isNumeric(r[xKey]));
   const stacked = (chart === "bar" || chart === "area") && !!options?.stacked;
   return {
     ...titleBlock,
-    tooltip: { trigger: chart === "scatter" ? "item" : "axis" },
+    tooltip: { trigger: "axis" },
     legend: { bottom: 0, textStyle: { color: AXIS } },
     grid: { left: 8, right: 16, top: hasTitle ? 44 : 24, bottom: 40, containLabel: true },
-    xAxis: scatterOnValueAxis ? {
-      type: "value",
-      axisLabel: { color: AXIS, fontSize: 12 },
-      axisLine: { lineStyle: { color: "#d4d7dd" } },
-      splitLine: { lineStyle: { color: "#e5e7eb", type: "dashed" } }
-    } : {
+    xAxis: {
       type: "category",
       data: rows.map((r) => String(r[xKey] ?? "")),
       axisLabel: { color: AXIS, fontSize: 12 },
@@ -220,23 +200,15 @@ function toEChartsOption(chart, rows, xKey, series, options) {
       axisLabel: { color: AXIS, fontSize: 12 },
       splitLine: { lineStyle: { color: "#e5e7eb", type: "dashed" } }
     },
-    series: series.map(
-      (s, i) => chart === "scatter" ? {
-        name: s.label ?? s.key,
-        type: "scatter",
-        symbolSize: 10,
-        itemStyle: { color: seriesColor(s, i) },
-        data: scatterOnValueAxis ? rows.map((r) => [Number(r[xKey]), Number(r[s.key] ?? 0)]) : rows.map((r) => Number(r[s.key] ?? 0))
-      } : {
-        name: s.label ?? s.key,
-        type: chart === "area" ? "line" : chart,
-        ...chart === "area" ? { areaStyle: { opacity: 0.2 }, smooth: false } : {},
-        ...chart !== "bar" ? { showSymbol: false, lineStyle: { width: 2 } } : {},
-        stack: stacked ? "total" : void 0,
-        itemStyle: { color: seriesColor(s, i) },
-        data: rows.map((r) => Number(r[s.key] ?? 0))
-      }
-    )
+    series: series.map((s, i) => ({
+      name: s.label ?? s.key,
+      type: chart === "area" ? "line" : chart,
+      ...chart === "area" ? { areaStyle: { opacity: 0.2 }, smooth: false } : {},
+      ...chart !== "bar" ? { showSymbol: false, lineStyle: { width: 2 } } : {},
+      stack: stacked ? "total" : void 0,
+      itemStyle: { color: seriesColor(s, i) },
+      data: rows.map((r) => Number(r[s.key] ?? 0))
+    }))
   };
 }
 

package/dist/{DocumentRenderer-YTEMC3Z4.js → DocumentRenderer-ZQDQMX7X.js}

@@ -1,8 +1,9 @@
-import { useArtifactPatch } from './chunk-FSFOURG5.js';
-import './chunk-ZLXAWRUP.js';
-import { useT } from './chunk-QMOJEGRH.js';
+import { useAssetUrl } from './chunk-FTNRRJ3K.js';
+import './chunk-7T5DRR3F.js';
+import { useArtifactPatch } from './chunk-K2UZAYW2.js';
+import './chunk-EHW446VF.js';
 import { useState, useRef } from 'react';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -11,12 +12,13 @@ function wordStats(text) {
   return { words, minutes: Math.max(1, Math.round(words / 200)) };
 }
 function DocumentRenderer({ artifact }) {
-  const t = useT();
   const { content } = artifact.data;
   const patch = useArtifactPatch(artifact.id);
   const [draft, setDraft] = useState(null);
   const taRef = useRef(null);
   const editing = draft !== null;
+  const assetUrl = useAssetUrl();
+  const urlTransform = (url) => defaultUrlTransform(assetUrl(url) ?? url);
   const commit = () => {
     if (draft !== null && draft !== content) patch({ content: draft });
     setDraft(null);
@@ -48,15 +50,15 @@ function DocumentRenderer({ artifact }) {
   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: t("bold"), onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: "Bold", onMouseDown: (e) => {
         e.preventDefault();
         wrap("**");
       }, children: /* @__PURE__ */ jsx("b", { children: "B" }) }),
-      /* @__PURE__ */ jsx("button", { title: t("italic"), onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: "Italic", onMouseDown: (e) => {
         e.preventDefault();
         wrap("*");
       }, children: /* @__PURE__ */ jsx("i", { children: "I" }) }),
-      /* @__PURE__ */ jsx("button", { title: t("inlineCode"), onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: "Inline code", onMouseDown: (e) => {
         e.preventDefault();
         wrap("`");
       }, children: "<>" }),
@@ -69,36 +71,33 @@ function DocumentRenderer({ artifact }) {
         e.preventDefault();
         prefixLines("## ");
       }, children: "H2" }),
-      /* @__PURE__ */ jsx("button", { title: t("bulletList"), onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: "Bullet list", onMouseDown: (e) => {
         e.preventDefault();
         prefixLines("- ");
       }, children: "\u2022" }),
-      /* @__PURE__ */ jsx("button", { title: t("numberedList"), onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: "Numbered list", onMouseDown: (e) => {
         e.preventDefault();
         prefixLines("1. ");
       }, children: "1." }),
-      /* @__PURE__ */ jsx("button", { title: t("quote"), onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: "Quote", onMouseDown: (e) => {
         e.preventDefault();
         prefixLines("> ");
       }, children: "\u275D" }),
-      /* @__PURE__ */ jsx("button", { title: t("link"), onMouseDown: (e) => {
+      /* @__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,
-        " ",
-        t("words"),
-        " \xB7 ",
+        " words \xB7 ",
         minutes,
-        " ",
-        t("minRead")
+        " min read"
       ] }),
       /* @__PURE__ */ jsx("button", { className: "cv-doc-bar__done", onMouseDown: (e) => {
         e.preventDefault();
         commit();
-      }, children: t("doneEditing") })
+      }, children: "Done" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "cv-word__page", children: editing ? /* @__PURE__ */ jsx(
       "textarea",
@@ -117,7 +116,7 @@ function DocumentRenderer({ artifact }) {
         title: "Click to edit",
         onClick: () => artifact.status !== "streaming" && setDraft(content),
         children: [
-          /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: content }),
+          /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], urlTransform, children: content }),
           artifact.status === "streaming" && /* @__PURE__ */ jsx("span", { className: "cv-caret", "aria-hidden": true })
         ]
       }

package/dist/FileRenderer-3ZHNORZJ.js

@@ -0,0 +1,39 @@
+import { isAssetReference, resolveAssetUrl } from './chunk-7T5DRR3F.js';
+import { useCanvasStore } from './chunk-EHW446VF.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function formatSize(size) {
+  if (typeof size !== "number") return null;
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+function iconFor(mediaType, name) {
+  if (mediaType?.startsWith("image/")) return "\u{1F5BC}\uFE0F";
+  if (mediaType === "application/pdf") return "\u{1F4D5}";
+  const lower = name.toLowerCase();
+  if (lower.endsWith(".docx") || lower.endsWith(".doc")) return "\u{1F4C4}";
+  if (lower.endsWith(".xlsx") || lower.endsWith(".csv")) return "\u{1F522}";
+  if (lower.endsWith(".pptx") || lower.endsWith(".ppt")) return "\u{1F4FD}\uFE0F";
+  return "\u{1F4CE}";
+}
+function FileRenderer({ artifact }) {
+  const { path, name, mediaType, size, cover, excerpt, detail } = artifact.data;
+  const assetBaseUrl = useCanvasStore((s) => s.assetBaseUrl);
+  const href = assetBaseUrl && isAssetReference(path) ? resolveAssetUrl(path, assetBaseUrl) : null;
+  const isImage = Boolean(mediaType?.startsWith("image/"));
+  const facts = [mediaType, formatSize(size), detail].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs("div", { className: "cv-file", children: [
+    isImage && href ? /* @__PURE__ */ jsx("img", { className: "cv-file__image", src: href, alt: name }) : cover ? /* @__PURE__ */ jsx("img", { className: "cv-file__cover", src: cover, alt: `${name} \u2014 first page` }) : excerpt ? /* @__PURE__ */ jsx("pre", { className: "cv-file__excerpt", children: excerpt }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "cv-file__card", children: [
+      /* @__PURE__ */ jsx("span", { className: "cv-file__icon", "aria-hidden": true, children: iconFor(mediaType, name) }),
+      /* @__PURE__ */ jsxs("span", { className: "cv-file__meta", children: [
+        /* @__PURE__ */ jsx("b", { children: name }),
+        facts && /* @__PURE__ */ jsx("span", { className: "cv-file__facts", children: facts })
+      ] }),
+      href && /* @__PURE__ */ jsx("a", { className: "cv-file__download", href, download: name, children: "Download" })
+    ] })
+  ] });
+}
+
+export { FileRenderer };