@braincrew-lab/langchain-canvas 0.7.1 → 0.7.4

package/README.md

@@ -18,13 +18,14 @@ const { sendMessage, messages, canvas } = useCanvasStream({ endpoint: "/api/chat
 npm i @braincrew-lab/langchain-canvas
 ```
 
-Export/import for Office formats uses optional peers — install only what you need:
+Office formats use optional peers — install only what you need:
 
 ```bash
-npm i exceljs docx pptxgenjs fast-formula-parser
+npm i exceljs docx pptxgenjs fast-formula-parser   # export / import
+npm i docx-preview                                 # read an uploaded .docx on the canvas
 ```
 
-If a format's package isn't installed, that one export just tells the user what to add; everything else keeps working.
+If a format's package isn't installed, that one feature says what to add and the rest keeps working: an export tells the user, and a Word upload falls back to the file card it showed before.
 
 ## Mount it
 

package/dist/DocxPreview-QK4K5427.js

@@ -0,0 +1,272 @@
+import { loadOptional } from './chunk-YZZSJJMQ.js';
+import { useCanvasStore } from './chunk-RAPTQ6VH.js';
+import { useRef, useState, useEffect } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/io/docxAddress.ts
+var DOCX_ADDRESS_ATTRIBUTE = "data-canvas-docx";
+var BODY_SELECTOR = "section.docx";
+function bodyOf(section) {
+  return section.querySelector(":scope > article") ?? section;
+}
+function pages(root) {
+  const sections = Array.from(root.querySelectorAll(BODY_SELECTOR));
+  return sections.length > 0 ? sections : [root];
+}
+function stampDocxAddresses(root) {
+  const blocks = [];
+  let paragraphs = 0;
+  let tables = 0;
+  for (const page of pages(root)) {
+    for (const element of Array.from(bodyOf(page).children)) {
+      const tag = element.tagName.toLowerCase();
+      if (tag !== "p" && tag !== "table") continue;
+      const kind = tag === "table" ? "table" : "paragraph";
+      const index = kind === "table" ? tables++ : paragraphs++;
+      const address = `${kind === "table" ? "t" : "p"}${index}`;
+      element.setAttribute(DOCX_ADDRESS_ATTRIBUTE, address);
+      blocks.push({ kind, index, address, element });
+    }
+  }
+  return blocks;
+}
+function addressedAncestor(root, node) {
+  let current = node;
+  while (current && current !== root) {
+    if (current instanceof Element && current.hasAttribute(DOCX_ADDRESS_ATTRIBUTE)) {
+      return current;
+    }
+    current = current.parentNode;
+  }
+  return null;
+}
+function pickOf(element, literal) {
+  const address = element.getAttribute(DOCX_ADDRESS_ATTRIBUTE) ?? "";
+  const kind = address.startsWith("t") ? "table" : "paragraph";
+  const text = (element.textContent ?? "").replace(/\s+/g, " ").trim();
+  return {
+    address,
+    kind,
+    label: literal ? `\u201C${literal}\u201D` : `[${address}]`,
+    text,
+    ...literal ? { literal } : {}
+  };
+}
+function pickFromNode(root, node) {
+  const element = addressedAncestor(root, node);
+  return element ? pickOf(element) : null;
+}
+function pickFromSelection(root, selection) {
+  if (!selection || selection.isCollapsed || selection.rangeCount === 0)
+    return null;
+  const literal = selection.toString().replace(/\s+/g, " ").trim();
+  if (!literal) return null;
+  const element = addressedAncestor(
+    root,
+    selection.getRangeAt(0).startContainer
+  );
+  return element ? pickOf(element, literal) : null;
+}
+var CJK = /[ㄱ-ㆎ가-힣぀-ヿ一-鿿]/gu;
+var LATIN_WORD = /[A-Za-z0-9][A-Za-z0-9'’-]*/gu;
+function countWords(text) {
+  return (text.match(LATIN_WORD)?.length ?? 0) + (text.match(CJK)?.length ?? 0);
+}
+function fitToWidth(root, available) {
+  const wrapper = root.querySelector(".docx-wrapper");
+  const page = root.querySelector(BODY_SELECTOR);
+  if (!wrapper || !page || available <= 0) return 1;
+  wrapper.style.zoom = "";
+  const width = Math.max(root.scrollWidth, page.getBoundingClientRect().width);
+  if (width <= 0) return 1;
+  const scale = Math.min(1, available / width);
+  wrapper.style.zoom = scale < 1 ? String(scale) : "";
+  return scale;
+}
+function declaredFontFamilies(root) {
+  const declarations = [];
+  for (const sheet of Array.from(root.querySelectorAll("style"))) {
+    for (const match of (sheet.textContent ?? "").matchAll(
+      /font-family:\s*([^;}]+)/g
+    )) {
+      declarations.push(match[1]);
+    }
+  }
+  for (const element of Array.from(
+    root.querySelectorAll("[style]")
+  )) {
+    if (element.style?.fontFamily) declarations.push(element.style.fontFamily);
+  }
+  const families = /* @__PURE__ */ new Set();
+  for (const declaration of declarations) {
+    for (const part of declaration.split(",")) {
+      const family = part.trim().replace(/^['"]|['"]$/g, "");
+      if (!family || family.startsWith("var(")) continue;
+      if (/^(serif|sans-serif|monospace|cursive|fantasy|inherit|initial|unset)$/i.test(
+        family
+      ))
+        continue;
+      families.add(family);
+    }
+  }
+  return Array.from(families).sort();
+}
+function substitutedFonts(root) {
+  const families = declaredFontFamilies(root);
+  if (families.length === 0) return [];
+  let context = null;
+  try {
+    context = document.createElement("canvas").getContext("2d");
+  } catch {
+    return [];
+  }
+  if (!context) return [];
+  const measured = context;
+  const probe = "\uAC00\uB098\uB2E4 Handgloves 0123";
+  const width = (font) => {
+    measured.font = `24px ${font}`;
+    return measured.measureText(probe).width;
+  };
+  const control = width("monospace");
+  return families.filter(
+    (family) => width(`"${family}", monospace`) === control
+  );
+}
+function docxStats(root) {
+  const bodies = pages(root).map((page) => bodyOf(page).textContent ?? "");
+  return {
+    words: countWords(bodies.join(" ")),
+    pagesDrawn: root.querySelectorAll(BODY_SELECTOR).length,
+    paginates: false,
+    substitutedFonts: substitutedFonts(root)
+  };
+}
+var BANNER = "Preview only \u2014 to change it, ask in chat or select some text.";
+function DocxPreview({
+  artifactId,
+  href,
+  name,
+  fallback
+}) {
+  const hostRef = useRef(null);
+  const [status, setStatus] = useState("loading");
+  const [stats, setStats] = useState(null);
+  const [picked, setPicked] = useState(null);
+  const setSelections = useCanvasStore((s) => s.setSelections);
+  useEffect(() => {
+    let live = true;
+    let observer = null;
+    const host = hostRef.current;
+    if (!host) return;
+    setStatus("loading");
+    setStats(null);
+    setPicked(null);
+    (async () => {
+      const { renderAsync } = await loadOptional(
+        "docx-preview",
+        () => import('docx-preview')
+      );
+      const response = await fetch(href);
+      if (!response.ok)
+        throw new Error(`${response.status} ${response.statusText}`);
+      const data = await response.arrayBuffer();
+      if (!live) return;
+      host.replaceChildren();
+      await renderAsync(data, host, void 0, {
+        inWrapper: true,
+        breakPages: true,
+        renderHeaders: true,
+        renderFooters: true,
+        useBase64URL: true
+      });
+      if (!live) return;
+      stampDocxAddresses(host);
+      setStats(docxStats(host));
+      setStatus("ready");
+      let fittedFor = host.clientWidth;
+      fitToWidth(host, fittedFor);
+      if (typeof ResizeObserver !== "undefined") {
+        observer = new ResizeObserver(() => {
+          if (Math.abs(host.clientWidth - fittedFor) < 2) return;
+          fittedFor = host.clientWidth;
+          fitToWidth(host, fittedFor);
+        });
+        observer.observe(host);
+      }
+    })().catch(() => {
+      if (live) setStatus("unavailable");
+    });
+    return () => {
+      live = false;
+      observer?.disconnect();
+    };
+  }, [href]);
+  const choose = (pick) => {
+    const host = hostRef.current;
+    if (!host) return;
+    for (const marked of Array.from(host.querySelectorAll(".is-picked"))) {
+      marked.classList.remove("is-picked");
+    }
+    if (!pick) {
+      setPicked(null);
+      setSelections([]);
+      return;
+    }
+    host.querySelector(`[${DOCX_ADDRESS_ATTRIBUTE}="${pick.address}"]`)?.classList.add("is-picked");
+    setPicked(pick.address);
+    setSelections([
+      {
+        artifactId,
+        cid: pick.address,
+        selector: pick.label,
+        tag: pick.kind === "table" ? "table" : "p",
+        text: pick.literal ?? pick.text
+      }
+    ]);
+  };
+  const onMouseUp = (event) => {
+    const host = hostRef.current;
+    if (!host || status !== "ready") return;
+    const dragged = pickFromSelection(host, window.getSelection?.() ?? null);
+    choose(dragged ?? pickFromNode(host, event.target));
+  };
+  if (status === "unavailable") return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  return /* @__PURE__ */ jsxs("div", { className: "cv-docx", children: [
+    /* @__PURE__ */ jsx("div", { className: "cv-docx__banner", role: "note", children: BANNER }),
+    status === "loading" && /* @__PURE__ */ jsx("div", { className: "cv-docx__loading", children: fallback }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: hostRef,
+        className: "cv-docx__page",
+        onMouseUp,
+        "aria-label": `${name} preview`,
+        hidden: status !== "ready"
+      }
+    ),
+    stats && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "cv-docx__status",
+        title: "The preview keeps the document's own page breaks; it does not repaginate, so it states no page number.",
+        children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            stats.words.toLocaleString(),
+            " words"
+          ] }),
+          picked && /* @__PURE__ */ jsxs("span", { className: "cv-docx__picked", children: [
+            "pointing at [",
+            picked,
+            "]"
+          ] }),
+          stats.substitutedFonts.length > 0 && /* @__PURE__ */ jsxs("span", { className: "cv-docx__fonts", children: [
+            "substituted: ",
+            stats.substitutedFonts.join(", ")
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+export { DocxPreview };

package/dist/{FileRenderer-2CDJYZ7I.js → FileRenderer-W2CR7BI2.js}

@@ -1,5 +1,6 @@
 import { isAssetReference, resolveAssetUrl } from './chunk-7T5DRR3F.js';
 import { useCanvasStore } from './chunk-RAPTQ6VH.js';
+import { lazy, Suspense } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function formatSize(size) {
@@ -8,6 +9,9 @@ function formatSize(size) {
   if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
   return `${(size / (1024 * 1024)).toFixed(1)} MB`;
 }
+var DocxPreview = lazy(
+  () => import('./DocxPreview-QK4K5427.js').then((m) => ({ default: m.DocxPreview }))
+);
 function iconFor(mediaType, name) {
   if (mediaType?.startsWith("image/")) return "\u{1F5BC}\uFE0F";
   if (mediaType === "application/pdf") return "\u{1F4D5}";
@@ -22,9 +26,26 @@ function FileRenderer({ artifact }) {
   const assetBaseUrl = useCanvasStore((s) => s.assetBaseUrl);
   const href = assetBaseUrl && isAssetReference(path) ? resolveAssetUrl(path, assetBaseUrl) : null;
   const isImage = Boolean(mediaType?.startsWith("image/"));
+  const isWord = `${path} ${name}`.toLowerCase().includes(".docx");
   const facts = [mediaType, formatSize(size), detail].filter(Boolean).join(" \xB7 ");
+  const preview = 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;
   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,
+    isWord && href ? /* @__PURE__ */ jsx(Suspense, { fallback: preview, children: /* @__PURE__ */ jsx(
+      DocxPreview,
+      {
+        artifactId: artifact.id,
+        href,
+        name,
+        fallback: preview
+      }
+    ) }) : preview,
     /* @__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: [

package/dist/index.js

@@ -2259,7 +2259,7 @@ var ChartRenderer = lazy(() => import('./ChartRenderer-TBTWNPV7.js').then((m) =>
 var DocumentRenderer = lazy(() => import('./DocumentRenderer-ER5TSNA6.js').then((m) => ({ default: m.DocumentRenderer })));
 var TableRenderer = lazy(() => import('./TableRenderer-YTOF2ZIC.js').then((m) => ({ default: m.TableRenderer })));
 var SlidesRenderer = lazy(() => import('./SlidesRenderer-AHE5ANBZ.js').then((m) => ({ default: m.SlidesRenderer })));
-var FileRenderer = lazy(() => import('./FileRenderer-2CDJYZ7I.js').then((m) => ({ default: m.FileRenderer })));
+var FileRenderer = lazy(() => import('./FileRenderer-W2CR7BI2.js').then((m) => ({ default: m.FileRenderer })));
 var builtinRenderers = {
   html: HtmlRenderer,
   document: DocumentRenderer,
@@ -2310,6 +2310,7 @@ var dataExporters = {
     { label: "PowerPoint", extension: "pptx", mime: MIME.pptx, build: (a) => slidesToPptx(a.data, a.title) }
   ]
 };
+var PRINT_COLOR_CSS = "*{-webkit-print-color-adjust:exact;print-color-adjust:exact}";
 function toStandaloneHtml(title, renderedHtml) {
   return `<!doctype html>
 <html lang="en">
@@ -2317,7 +2318,8 @@ function toStandaloneHtml(title, renderedHtml) {
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>${escapeHtml(title)}</title>
-<style>${EXPORT_CSS}</style>
+<style>${EXPORT_CSS}
+${PRINT_COLOR_CSS}</style>
 </head>
 <body>
 <main class="export">
@@ -2472,6 +2474,7 @@ function slidesToPrintHtml(data, title) {
   return `<!doctype html><html><head><meta charset="utf-8"><title>${escapeXml(title)}</title><style>
     @page { size: ${pw}px ${ph}px; margin: 0; }
     * { margin: 0; box-sizing: border-box; }
+    ${PRINT_COLOR_CSS}
     body { font-family: Inter, Arial, sans-serif; }
     .slide { position: relative; width: ${pw}px; height: ${ph}px; overflow: hidden; page-break-after: always; }
     .el { position: absolute; overflow: hidden; line-height: 1.25; }
@@ -2481,7 +2484,7 @@ function slidesToPrintHtml(data, title) {
 function htmlSlideToPrintHtml(html, ratio) {
   const w = ratio === "4:3" ? 960 : 1280;
   const h = 720;
-  const style = `<style>@page{size:${w}px ${h}px;margin:0}html,body{margin:0!important;padding:0!important;background:#fff}.slide-container{width:${w}px!important;height:${h}px!important;box-shadow:none!important;border-radius:0!important;overflow:hidden!important;page-break-after:avoid}</style>`;
+  const style = `<style>@page{size:${w}px ${h}px;margin:0}${PRINT_COLOR_CSS}html,body{margin:0!important;padding:0!important;background:#fff}.slide-container{width:${w}px!important;height:${h}px!important;box-shadow:none!important;border-radius:0!important;overflow:hidden!important;page-break-after:avoid}</style>`;
   const i = html.toLowerCase().lastIndexOf("</head>");
   return i === -1 ? style + html : html.slice(0, i) + style + html.slice(i);
 }

package/dist/styles.css

@@ -1268,6 +1268,48 @@
 }
 .cv-file__download:hover { border-color: var(--cv-accent); }
 
+/* Word preview — a page the user reads and points at, never types into.
+   The renderer writes the document's own colours and fonts inline, so this
+   only frames it: the banner that says it is read-only, the pointing
+   highlight, and the status line under it. */
+.cv-docx {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.cv-docx__banner {
+  padding: 7px 12px;
+  border: 1px solid var(--cv-border);
+  border-radius: 10px;
+  background: var(--cv-bg);
+  color: var(--cv-muted);
+  font-size: 12px;
+}
+.cv-docx__page {
+  max-height: 68vh;
+  overflow: auto;
+  border: 1px solid var(--cv-border);
+  border-radius: 12px;
+  background: var(--cv-bg);
+}
+.cv-docx__page [data-canvas-docx] { cursor: pointer; }
+.cv-docx__page [data-canvas-docx]:hover { outline: 1px dashed var(--cv-border); outline-offset: 2px; }
+.cv-docx__page .is-picked {
+  outline: 2px solid var(--cv-accent);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+.cv-docx__status {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  font-size: 11px;
+  color: var(--cv-muted);
+}
+.cv-docx__picked { color: var(--cv-accent); }
+.cv-docx__fonts { color: var(--cv-warn, #b45309); }
+
 /* Tablet / narrow desktop: tighten paddings, let toolbars wrap. */
 @media (max-width: 900px) {
   .cv-body { padding: 16px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braincrew-lab/langchain-canvas",
-  "version": "0.7.1",
+  "version": "0.7.4",
   "description": "A live canvas for LangChain agents — stream documents, charts, and rich artifacts into a React panel.",
   "license": "MIT",
   "author": "Brain Crew (https://github.com/braincrew-lab)",
@@ -69,6 +69,7 @@
   },
   "optionalDependencies": {
     "docx": "^9.0.2",
+    "docx-preview": "^0.4.0",
     "exceljs": "^4.4.0",
     "fast-formula-parser": "^1.0.19",
     "pptxgenjs": "^3.12.0"