@braincrew-lab/langchain-canvas 0.7.6 → 0.7.8

package/dist/{DocxPreview-NGT3Z5KW.js → DocxPreview-MAS4GRDG.js}

@@ -142,6 +142,153 @@ function docxStats(root) {
   };
 }
 
+// src/io/docxAlignment.ts
+var PLACEMENT = {
+  // [margin-left, margin-right] — an empty string leaves the side alone.
+  center: ["auto", "auto"],
+  right: ["auto", ""]
+};
+function ownRows(table) {
+  return Array.from(table.rows ?? []);
+}
+function takeBlockAlignment(element) {
+  const stated = element.style.textAlign;
+  if (stated) element.style.removeProperty("text-align");
+  return stated;
+}
+function placed(table) {
+  return Boolean(table.style.marginLeft || table.style.marginRight);
+}
+function agreedAlignment(rows) {
+  if (rows.length === 0) return "";
+  const first = rows[0];
+  return rows.every((value) => value === first) ? first : "";
+}
+function separateBlockAlignment(root) {
+  const fix = { rows: 0, placed: 0 };
+  for (const table of Array.from(root.querySelectorAll("table"))) {
+    takeBlockAlignment(table);
+    const rows = ownRows(table);
+    const stated = rows.map((row) => takeBlockAlignment(row)).filter((value) => value !== "");
+    fix.rows += stated.length;
+    if (stated.length !== rows.length || placed(table)) continue;
+    const margins = PLACEMENT[agreedAlignment(stated)];
+    if (!margins) continue;
+    if (margins[0]) table.style.marginLeft = margins[0];
+    if (margins[1]) table.style.marginRight = margins[1];
+    fix.placed += 1;
+  }
+  return fix;
+}
+
+// src/io/docxShapes.ts
+var VML_NS = "urn:schemas-microsoft-com:vml";
+var VML_SHAPES = /* @__PURE__ */ new Set([
+  "oval",
+  "rect",
+  "roundrect",
+  "line",
+  "polyline",
+  "arc",
+  "curve",
+  "shape",
+  "group"
+]);
+var PAINTABLE = "ellipse,rect,circle,path,line,polygon,polyline,image,foreignObject";
+function isVml(node) {
+  return node.namespaceURI === VML_NS || node.tagName.startsWith("v:");
+}
+function alphaOf(paint) {
+  const inside = /^rgba?\(([^)]*)\)$/.exec(paint);
+  if (!inside) return null;
+  const [channels, slashAlpha] = inside[1].split("/");
+  const raw = slashAlpha !== void 0 ? slashAlpha : (() => {
+    const parts = channels.split(",").map((part) => part.trim());
+    return parts.length === 4 ? parts[3] : void 0;
+  })();
+  if (raw === void 0) return null;
+  const value = raw.trim();
+  const number = value.endsWith("%") ? Number(value.slice(0, -1)) / 100 : Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+function invisible(paint) {
+  const value = paint.trim();
+  if (!value || value === "none" || value === "transparent") return true;
+  return alphaOf(value) === 0;
+}
+function paints(element) {
+  const tag = element.tagName.toLowerCase();
+  if (tag === "image" || tag === "foreignobject") return true;
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  const resolved = (name) => style?.getPropertyValue(name) || element.getAttribute(name) || "";
+  return !invisible(resolved("fill")) || !invisible(resolved("stroke"));
+}
+function drawsNothing(shape) {
+  return shape.getAttribute("filled") === "f" && shape.getAttribute("stroked") === "f";
+}
+function vmlShapeIn(node) {
+  if (isVml(node) && VML_SHAPES.has(node.localName)) return node;
+  for (const child of Array.from(node.children)) {
+    const found = vmlShapeIn(child);
+    if (found) return found;
+  }
+  return null;
+}
+function drawingIsShape(drawing) {
+  const data = drawing.getElementsByTagName("*");
+  for (const node of Array.from(data)) {
+    if (node.localName === "graphicData") {
+      return !Array.from(node.children).some((child) => child.localName === "pic");
+    }
+  }
+  return false;
+}
+function insideAlternateContent(node) {
+  let parent = node.parentElement;
+  while (parent) {
+    if (parent.localName === "AlternateContent") return true;
+    parent = parent.parentElement;
+  }
+  return false;
+}
+function shapesAskedFor(xml) {
+  let count = 0;
+  const seenTwins = /* @__PURE__ */ new Set();
+  for (const node of Array.from(xml.getElementsByTagName("*"))) {
+    if (node.localName !== "AlternateContent") continue;
+    const twin = vmlShapeIn(node);
+    const drawing = Array.from(node.getElementsByTagName("*")).find(
+      (child) => child.localName === "drawing"
+    );
+    const isShape = twin !== null || (drawing ? drawingIsShape(drawing) : false);
+    if (isShape && !(twin && drawsNothing(twin))) count += 1;
+    seenTwins.add(node);
+  }
+  for (const node of Array.from(xml.getElementsByTagName("*"))) {
+    if (insideAlternateContent(node)) continue;
+    if (isVml(node) && VML_SHAPES.has(node.localName)) {
+      if (node.parentElement && vmlShapeIn(node.parentElement) === node.parentElement) continue;
+      if (!drawsNothing(node)) count += 1;
+      continue;
+    }
+    if (node.localName === "drawing" && drawingIsShape(node)) count += 1;
+  }
+  return count;
+}
+function shapesShown(root) {
+  let count = 0;
+  for (const svg of Array.from(root.querySelectorAll("svg"))) {
+    if (Array.from(svg.querySelectorAll(PAINTABLE)).some(paints)) count += 1;
+  }
+  return count;
+}
+function tallyShapes(root, xmls) {
+  if (xmls.length === 0) return { askedFor: 0, shown: 0, missing: 0 };
+  const askedFor = xmls.reduce((total, xml) => total + shapesAskedFor(xml), 0);
+  const shown = shapesShown(root);
+  return { askedFor, shown, missing: Math.max(0, askedFor - shown) };
+}
+
 // src/io/symbolBullets.ts
 var SYMBOL_FONT_BULLETS = {
   symbol: {
@@ -243,6 +390,12 @@ function redrawnFonts(swaps) {
   return [...new Set(swaps.map((swap) => swap.font))];
 }
 var BANNER = "Preview only \u2014 to change it, ask in chat or select some text.";
+var CONTENT_PART = /^word\/(document|header\d*|footer\d*)\.xml$/;
+function storedParts(parsed) {
+  const parts = parsed?.parts;
+  if (!Array.isArray(parts)) return [];
+  return parts.filter((part) => typeof part?.path === "string" && CONTENT_PART.test(part.path)).map((part) => part._xmlDocument).filter((xml) => Boolean(xml));
+}
 function DocxPreview({
   artifactId,
   href,
@@ -253,6 +406,7 @@ function DocxPreview({
   const [status, setStatus] = useState("loading");
   const [stats, setStats] = useState(null);
   const [redrawn, setRedrawn] = useState([]);
+  const [missingShapes, setMissingShapes] = useState(0);
   const [picked, setPicked] = useState(null);
   const setSelections = useCanvasStore((s) => s.setSelections);
   useEffect(() => {
@@ -263,6 +417,7 @@ function DocxPreview({
     setStatus("loading");
     setStats(null);
     setRedrawn([]);
+    setMissingShapes(0);
     setPicked(null);
     (async () => {
       const { renderAsync } = await loadOptional(
@@ -275,16 +430,19 @@ function DocxPreview({
       const data = await response.arrayBuffer();
       if (!live) return;
       host.replaceChildren();
-      await renderAsync(data, host, void 0, {
+      const parsed = await renderAsync(data, host, void 0, {
         inWrapper: true,
         breakPages: true,
         renderHeaders: true,
         renderFooters: true,
-        useBase64URL: true
+        useBase64URL: true,
+        keepOrigin: true
       });
       if (!live) return;
+      separateBlockAlignment(host);
       stampDocxAddresses(host);
       setRedrawn(redrawnFonts(restoreSymbolBullets(host)));
+      setMissingShapes(tallyShapes(host, storedParts(parsed)).missing);
       setStats(docxStats(host));
       setStatus("ready");
       let fittedFor = host.clientWidth;
@@ -367,6 +525,20 @@ function DocxPreview({
             "substituted: ",
             stats.substitutedFonts.join(", ")
           ] }),
+          missingShapes > 0 && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "cv-docx__missing",
+              title: "This document draws shapes the preview cannot show. They are in the file \u2014 a download opens with them in place.",
+              children: [
+                missingShapes,
+                " shape",
+                missingShapes === 1 ? "" : "s",
+                " not shown \u2014 download the file to see ",
+                missingShapes === 1 ? "it" : "them"
+              ]
+            }
+          ),
           redrawn.length > 0 && /* @__PURE__ */ jsxs(
             "span",
             {

package/dist/{FileRenderer-TZSZVVLY.js → FileRenderer-66GPPGMK.js}

@@ -10,7 +10,7 @@ function formatSize(size) {
   return `${(size / (1024 * 1024)).toFixed(1)} MB`;
 }
 var DocxPreview = lazy(
-  () => import('./DocxPreview-NGT3Z5KW.js').then((m) => ({ default: m.DocxPreview }))
+  () => import('./DocxPreview-MAS4GRDG.js').then((m) => ({ default: m.DocxPreview }))
 );
 function iconFor(mediaType, name) {
   if (mediaType?.startsWith("image/")) return "\u{1F5BC}\uFE0F";

package/dist/index.js

@@ -2264,7 +2264,7 @@ var ChartRenderer = lazy(() => import('./ChartRenderer-TBTWNPV7.js').then((m) =>
 var DocumentRenderer = lazy(() => import('./DocumentRenderer-ZGJXDVKG.js').then((m) => ({ default: m.DocumentRenderer })));
 var TableRenderer = lazy(() => import('./TableRenderer-YTOF2ZIC.js').then((m) => ({ default: m.TableRenderer })));
 var SlidesRenderer = lazy(() => import('./SlidesRenderer-4QWZVWWD.js').then((m) => ({ default: m.SlidesRenderer })));
-var FileRenderer = lazy(() => import('./FileRenderer-TZSZVVLY.js').then((m) => ({ default: m.FileRenderer })));
+var FileRenderer = lazy(() => import('./FileRenderer-66GPPGMK.js').then((m) => ({ default: m.FileRenderer })));
 var builtinRenderers = {
   html: HtmlRenderer,
   document: DocumentRenderer,

package/dist/styles.css

@@ -1310,6 +1310,7 @@
 .cv-docx__picked { color: var(--cv-accent); }
 .cv-docx__fonts { color: var(--cv-warn, #b45309); }
 .cv-docx__redrawn { color: var(--cv-warn, #b45309); }
+.cv-docx__missing { color: var(--cv-warn, #b45309); }
 
 /* Tablet / narrow desktop: tighten paddings, let toolbars wrap. */
 @media (max-width: 900px) {

package/package.json

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