@braincrew-lab/langchain-canvas 0.1.12 → 0.1.13

package/dist/{ChartRenderer-CWV2OX3S.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" });
@@ -78,6 +96,7 @@ function ChartRenderer({ artifact }) {
         }
       ),
       /* @__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: [
@@ -102,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({

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

@@ -119,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-CWV2OX3S.js').then((m) => ({ default: m.ChartRenderer })));
+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-ZF7MVA7I.js').then((m) => ({ default: m.TableRenderer })));
-var SlidesRenderer = lazy(() => import('./SlidesRenderer-7ICJQHYT.js').then((m) => ({ default: m.SlidesRenderer })));
+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

@@ -396,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; }
@@ -611,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braincrew-lab/langchain-canvas",
-  "version": "0.1.12",
+  "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",