@braincrew-lab/langchain-canvas 0.1.14 → 0.3.0

package/README.ko.md

@@ -1,8 +1,11 @@
 # @braincrew-lab/langchain-canvas
 
-LangChain 챗 앱을 위한 캔버스. 에이전트가 아티팩트(웹 페이지·스프레드시트·슬라이드·차트·문서)를 스트리밍하면 대화 옆에 실시간으로 뜨고 그 자리에서 편집됩니다. 사용자가 직접 손보고 실제 파일로 내보낼 수 있습니다.
+[![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)
 
-ChatGPT Canvas나 Claude Artifacts 같은 경험을, **내 React 앱에 넣고 내 에이전트에 연결하는 패키지**로 제공합니다.
+LangChain 챗 앱을 위한 캔버스. 에이전트가 아티팩트(웹 페이지·스프레드시트·슬라이드·차트·문서·PDF)를 스트리밍하면 대화 옆에 실시간으로 뜨고 그 자리에서 편집됩니다. 사용자가 직접 손보고 실제 파일로 내보낼 수 있습니다.
+
+ChatGPT Canvas나 Claude Artifacts 같은 경험을, **내 React 앱에 넣고 내 에이전트에 연결하는 패키지**로 제공합니다. 스크린샷·아키텍처·와이어 프로토콜 전체는 [GitHub 레포](https://github.com/braincrew-lab/langchain-canvas)에 있습니다.
 
 > [English README](./README.md)
 
@@ -74,26 +77,29 @@ HTML이 기본 substrate이고, 샌드박스 iframe에 렌더됩니다. 에이
 
 정적 표가 아니라 스프레드시트 엔진(Fortune-sheet) 위에서 동작합니다.
 
-- **실시간 수식** — `=SUM(C2:C4)`, `=AVERAGE(...)`, `=A2*B2` 입력 시 계산. 셀참조·범위·함수 자동완성 지원
+- **실시간 수식** — `=SUM(C2:C4)`, `=VLOOKUP(...)`, `=A2*B2` 입력 시 계산. 셀참조·범위·함수 자동완성 지원. 계산은 선택 설치 `fast-formula-parser`가 담당해 Excel 함수 세트(`IF`, `COUNTIF`, `SUMIF`, `INDEX`/`MATCH`, …)가 바로 동작
 - **데이터로 온 수식** — 에이전트가 값으로 보낸 수식(`"=AVERAGE(B2:B4)"`)은 **로드 시 미리 계산**되어 결과가 바로 표시
-- **전체 툴바** — 폰트, 숫자/통화/％ 서식, 굵게/기울임, 테두리, 셀 병합, 정렬, 다중 시트 — 데스크톱 수준
+- **Excel 스타일 리본** — 삽입 / 글꼴 / 맞춤 / 표시 형식 / 편집 / 보기로 그룹된 트레이, **수식 바**, **Σ 자동 합계** 메뉴
+- **서식** — 폰트, 숫자/통화/％/날짜 서식, 굵게/기울임, 테두리, 셀 병합/해제, 정렬, **틀 고정**, 다중 시트, 그리고 에이전트가 만든 요란한 셀 색을 한 번에 걷어내는 **스타일 정리**
 - 넓은 그리드에서 **상하좌우 부드러운 스크롤**
-- **Export** — `.xlsx`(폰트/병합/서식 포함) 또는 `.csv`
+- **Export** — `.xlsx`(폰트/병합/서식 포함) 또는 `.csv` — 둘 다 사용자의 그리드 편집이 반영됨
 
 ### 🖼️ 슬라이드 (`slides`) — 프리 캔버스 덱
 
 모든 요소가 움직이는 PowerPoint 스타일 편집기.
 
-- **자유 배치** — 텍스트/이미지 요소 드래그·리사이즈, 가이드 스냅
+- **자유 배치** — 텍스트/이미지 요소 드래그·리사이즈, 드래그와 리사이즈 모두에서 스냅 가이드, 회전, Shift로 비율 고정 리사이즈
+- **다중 선택 & 그룹** — Shift+클릭 또는 마퀴 선택 후 그룹/해제(⌘G / ⌘⇧G). 떠 있는 액션 바로 정렬·분배·복제·삭제
+- **키보드 편집** — 방향키 미세 이동, ⌘D 복제, ⌘C/⌘V(슬라이드 간 가능), ⌘] / ⌘[ z-순서
 - **인라인 편집** — 더블클릭 텍스트 편집, 굵게/크기/색/정렬 툴바
 - **구조** — 슬라이드 추가/복제/삭제/순서, 썸네일 레일, 발표자 노트
-- **테마·배경**, 발표 모드(전체화면, 방향키 이동)
-- **Export** — `.pptx`, **Figma 복사**(에디터블 프레임으로 바로 붙여넣기), **PDF**(전 슬라이드)
+- **8가지 테마**(Editorial · Gallery · Boardroom · Sage · Graphite · Observatory · Ultramarine · Bordeaux)·배경, 발표 모드(전체화면, 방향키 이동, 진행 표시)
+- **Export** — `.pptx` 또는 **PDF**(전 슬라이드)
 
 ### 📝 문서 (`document`) — Markdown / Word
 
 - **클릭 편집** — 페이지를 Markdown으로 편집(GFM 렌더)
-- **Export** — `.docx`, `.md`, `.pdf`, `.html`
+- **Export** — `.docx`, `.md`, `.hwpx`(한글), `.pdf`, `.html`
 
 ### 📈 차트 (`chart`)
 
@@ -102,10 +108,15 @@ 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 · Markdown · HTML · JSON** → 편집 가능한 아티팩트로
-- **Export** — 각 아티팩트를 네이티브 포맷으로, 그리고 범용 **standalone `.html`** · **PDF**(브라우저 인쇄)
+- **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**(브라우저 인쇄)
 
 ### 🧰 모든 아티팩트 공통
 
@@ -121,6 +132,7 @@ 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,8 +1,11 @@
 # @braincrew-lab/langchain-canvas
 
-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.
+[![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)
 
-Think ChatGPT Canvas or Claude Artifacts, but a package you drop into your own React app and point at your own agent.
+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).
 
 > [한국어 README](./README.ko.md)
 
@@ -74,26 +77,29 @@ 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)`, `=AVERAGE(...)`, `=A2*B2`; they calculate, with cell references, ranges, and function autocomplete.
+- **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.
 - **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.
-- **Full toolbar** — fonts, number/currency/percent formats, bold/italic, borders, cell merging, alignment, multiple sheets — like a desktop spreadsheet.
+- **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.
 - **Smooth scrolling** in both directions over a large grid.
-- **Export** to `.xlsx` (with fonts/merges/formats) or `.csv`.
+- **Export** to `.xlsx` (with fonts/merges/formats) or `.csv` — both include the user's in-grid edits.
 
 ### 🖼️ Slides (`slides`) — a free-canvas deck
 
 A PowerPoint-style editor where every element is movable.
 
-- **Free positioning** — drag and resize text/image elements; snap to guides.
+- **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.
 - **Inline editing** — double-click to edit text; format toolbar for bold/size/color/align.
 - **Structure** — add/duplicate/delete/reorder slides, thumbnails rail, speaker notes.
-- **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).
+- **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).
 
 ### 📝 Documents (`document`) — Markdown / Word
 
 - **Click-to-edit** the page as Markdown, rendered with GFM.
-- **Export** to `.docx`, `.md`, `.pdf`, or `.html`.
+- **Export** to `.docx`, `.md`, `.hwpx` (한글), `.pdf`, or `.html`.
 
 ### 📈 Charts (`chart`)
 
@@ -102,10 +108,15 @@ 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 · Markdown · HTML · JSON**. They open as editable artifacts.
-- **Export** every artifact to its native format, plus a universal **standalone `.html`** and **PDF** (browser print).
+- **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).
 
 ### 🧰 Across every artifact
 
@@ -121,6 +132,7 @@ 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-FX6ZN4NC.js → ChartRenderer-ABRQ5YFN.js}

@@ -1,17 +1,18 @@
-import { useArtifactPatch } from './chunk-TERWLUW3.js';
-import './chunk-KKLWKR5G.js';
+import { useArtifactPatch } from './chunk-FSFOURG5.js';
+import './chunk-ZLXAWRUP.js';
+import { useT } from './chunk-QMOJEGRH.js';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import * as echarts from 'echarts/core';
-import { BarChart, LineChart, PieChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, ScatterChart } 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, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
+echarts.use([BarChart, LineChart, PieChart, ScatterChart, 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"];
+var CHART_TYPES = ["bar", "line", "area", "scatter", "pie", "donut"];
 function EChart({ option, height, onInst }) {
   const boxRef = useRef(null);
   const instRef = useRef(null);
@@ -35,6 +36,7 @@ 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);
@@ -56,15 +58,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: "Download as PNG", children: "\u2913 PNG" })
+        /* @__PURE__ */ jsx("button", { className: "cv-edit-btn", onClick: downloadPng, title: t("downloadPng"), children: t("downloadPng") })
       ] }),
       /* @__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" });
+    return /* @__PURE__ */ jsx("div", { className: "cv-chart cv-chart--empty", children: t("waitingData") });
   }
-  const isPie = chart === "pie";
+  const isPie = chart === "pie" || chart === "donut";
   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]);
@@ -80,38 +82,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((t) => /* @__PURE__ */ jsx("button", { className: `cv-edit-btn ${chart === t ? "is-primary" : ""}`, onClick: () => patch({ chart: t }), children: t }, t)) }),
+      /* @__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)) }),
       (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 } }) }),
-        "Stacked"
+        t("stacked")
       ] }),
       /* @__PURE__ */ jsx(
         "input",
         {
           className: "cv-chart__title-input",
           value: options?.title ?? "",
-          placeholder: "Chart title\u2026",
+          placeholder: t("chartTitle"),
           onChange: (e) => patch({ options: { ...options, title: e.target.value || void 0 } }),
-          title: "Chart title"
+          title: t("chartTitle")
         }
       ),
       /* @__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" })
+      /* @__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") })
     ] }),
     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: "Series color" }),
+        /* @__PURE__ */ jsx("input", { type: "color", value: seriesColor(s, i), onChange: (e) => setSeries(i, { color: e.target.value }), title: t("seriesColor") }),
         /* @__PURE__ */ jsx(
           "input",
           {
             className: "cv-chart__series-name",
             value: s.label ?? s.key,
             onChange: (e) => setSeries(i, { label: e.target.value }),
-            title: "Series name"
+            title: t("seriesName")
           }
         )
       ] }, s.key)) }),
@@ -124,6 +126,23 @@ 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,
@@ -132,6 +151,7 @@ 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: [
@@ -141,25 +161,18 @@ 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(
-          "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" }) })
+        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" }) })
       ] }, i)) })
     ] }),
-    /* @__PURE__ */ jsx("button", { className: "cv-chart__addrow", onClick: onAddRow, children: "+ Add row" })
+    /* @__PURE__ */ jsx("button", { className: "cv-chart__addrow", onClick: onAddRow, children: t("addRowBtn") })
   ] });
 }
 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") {
+  if (chart === "pie" || chart === "donut") {
     const valueKey = series[0]?.key ?? "value";
     return {
       ...titleBlock,
@@ -168,7 +181,7 @@ function toEChartsOption(chart, rows, xKey, series, options) {
       series: [
         {
           type: "pie",
-          radius: ["45%", "72%"],
+          radius: chart === "donut" ? ["45%", "70%"] : ["45%", "72%"],
           padAngle: 2,
           itemStyle: { borderRadius: 4 },
           label: { color: AXIS },
@@ -181,13 +194,20 @@ 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: "axis" },
+    tooltip: { trigger: chart === "scatter" ? "item" : "axis" },
     legend: { bottom: 0, textStyle: { color: AXIS } },
     grid: { left: 8, right: 16, top: hasTitle ? 44 : 24, bottom: 40, containLabel: true },
-    xAxis: {
+    xAxis: scatterOnValueAxis ? {
+      type: "value",
+      axisLabel: { color: AXIS, fontSize: 12 },
+      axisLine: { lineStyle: { color: "#d4d7dd" } },
+      splitLine: { lineStyle: { color: "#e5e7eb", type: "dashed" } }
+    } : {
       type: "category",
       data: rows.map((r) => String(r[xKey] ?? "")),
       axisLabel: { color: AXIS, fontSize: 12 },
@@ -200,15 +220,23 @@ function toEChartsOption(chart, rows, xKey, series, options) {
       axisLabel: { color: AXIS, fontSize: 12 },
       splitLine: { lineStyle: { color: "#e5e7eb", type: "dashed" } }
     },
-    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))
-    }))
+    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))
+      }
+    )
   };
 }
 

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

@@ -1,5 +1,6 @@
-import { useArtifactPatch } from './chunk-TERWLUW3.js';
-import './chunk-KKLWKR5G.js';
+import { useArtifactPatch } from './chunk-FSFOURG5.js';
+import './chunk-ZLXAWRUP.js';
+import { useT } from './chunk-QMOJEGRH.js';
 import { useState, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -10,6 +11,7 @@ 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);
@@ -46,15 +48,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: "Bold", onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: t("bold"), onMouseDown: (e) => {
         e.preventDefault();
         wrap("**");
       }, children: /* @__PURE__ */ jsx("b", { children: "B" }) }),
-      /* @__PURE__ */ jsx("button", { title: "Italic", onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: t("italic"), onMouseDown: (e) => {
         e.preventDefault();
         wrap("*");
       }, children: /* @__PURE__ */ jsx("i", { children: "I" }) }),
-      /* @__PURE__ */ jsx("button", { title: "Inline code", onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: t("inlineCode"), onMouseDown: (e) => {
         e.preventDefault();
         wrap("`");
       }, children: "<>" }),
@@ -67,33 +69,36 @@ function DocumentRenderer({ artifact }) {
         e.preventDefault();
         prefixLines("## ");
       }, children: "H2" }),
-      /* @__PURE__ */ jsx("button", { title: "Bullet list", onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: t("bulletList"), onMouseDown: (e) => {
         e.preventDefault();
         prefixLines("- ");
       }, children: "\u2022" }),
-      /* @__PURE__ */ jsx("button", { title: "Numbered list", onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: t("numberedList"), onMouseDown: (e) => {
         e.preventDefault();
         prefixLines("1. ");
       }, children: "1." }),
-      /* @__PURE__ */ jsx("button", { title: "Quote", onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: t("quote"), onMouseDown: (e) => {
         e.preventDefault();
         prefixLines("> ");
       }, children: "\u275D" }),
-      /* @__PURE__ */ jsx("button", { title: "Link", onMouseDown: (e) => {
+      /* @__PURE__ */ jsx("button", { title: t("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 ",
+        " ",
+        t("words"),
+        " \xB7 ",
         minutes,
-        " min read"
+        " ",
+        t("minRead")
       ] }),
       /* @__PURE__ */ jsx("button", { className: "cv-doc-bar__done", onMouseDown: (e) => {
         e.preventDefault();
         commit();
-      }, children: "Done" })
+      }, children: t("doneEditing") })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "cv-word__page", children: editing ? /* @__PURE__ */ jsx(
       "textarea",

package/dist/PdfRenderer-GDA67MES.js

@@ -0,0 +1,98 @@
+import { useT } from './chunk-QMOJEGRH.js';
+import { useState, useEffect, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function dataUrlToBlob(url) {
+  const m = /^data:[^,]*?(;base64)?,(.*)$/s.exec(url);
+  if (!m) return null;
+  try {
+    if (m[1]) {
+      const bin = atob(m[2]);
+      const bytes = new Uint8Array(bin.length);
+      for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+      return new Blob([bytes], { type: "application/pdf" });
+    }
+    return new Blob([decodeURIComponent(m[2])], { type: "application/pdf" });
+  } catch {
+    return null;
+  }
+}
+function PdfRenderer({ artifact }) {
+  const t = useT();
+  const src = artifact.data.src;
+  const isData = typeof src === "string" && src.startsWith("data:");
+  const [blobUrl, setBlobUrl] = useState(null);
+  const [broken, setBroken] = useState(false);
+  useEffect(() => {
+    setBroken(false);
+    if (!isData) {
+      setBlobUrl(null);
+      return;
+    }
+    const blob = dataUrlToBlob(src);
+    if (!blob) {
+      setBroken(true);
+      setBlobUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(blob);
+    setBlobUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [src, isData]);
+  const viewUrl = isData ? blobUrl : src;
+  const filename = useMemo(
+    () => artifact.data.filename || `${artifact.title || "document"}.pdf`,
+    [artifact.data.filename, artifact.title]
+  );
+  const [zoom, setZoom] = useState("fit");
+  const zoomOut = () => setZoom((z) => Math.max(50, (z === "fit" ? 100 : z) - 25));
+  const zoomIn = () => setZoom((z) => Math.min(300, (z === "fit" ? 100 : z) + 25));
+  const frameSrc = viewUrl ? `${viewUrl}#toolbar=0&navpanes=0&zoom=${zoom === "fit" ? "page-width" : zoom}` : null;
+  const download = () => {
+    if (!viewUrl) return;
+    const a = document.createElement("a");
+    a.href = viewUrl;
+    a.download = filename;
+    a.click();
+  };
+  if (!src || broken) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-pdf cv-pdf--empty", children: t("waitingPdf") });
+  }
+  if (!viewUrl) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-pdf cv-pdf--empty", children: t("loading") });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "cv-pdf-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "cv-pdf-tools", children: [
+      /* @__PURE__ */ jsx("span", { className: "cv-pdf-tools__name", title: filename, children: filename }),
+      /* @__PURE__ */ jsx("span", { className: "cv-pdf-tools__spacer" }),
+      /* @__PURE__ */ jsxs("span", { className: "cv-pdf-tools__zoom", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: zoomOut, title: t("zoomOut"), children: "\u2212" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "cv-pdf-tools__zoom-label",
+            onClick: () => setZoom("fit"),
+            title: t("fitWidth"),
+            children: zoom === "fit" ? t("fitWidth") : `${zoom}%`
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: zoomIn, title: t("zoomIn"), children: "\uFF0B" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "cv-pdf-tools__sep" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: download, title: t("download"), children: t("download") }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => window.open(viewUrl, "_blank", "noopener"),
+          title: t("openBtn"),
+          children: t("openBtn")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "cv-pdf", children: /* @__PURE__ */ jsx("iframe", { className: "cv-pdf__frame", src: frameSrc, title: filename }, frameSrc) })
+  ] });
+}
+
+export { PdfRenderer };