@braincrew-lab/langchain-canvas 0.7.5 → 0.7.7

package/dist/{DocxPreview-QK4K5427.js → DocxPreview-TXEOVBVR.js}

@@ -141,7 +141,222 @@ function docxStats(root) {
     substitutedFonts: substitutedFonts(root)
   };
 }
+
+// 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: {
+    61623: "\u2022"
+    // • bullet — Word's default list bullet
+  },
+  wingdings: {
+    61548: "\u25CF",
+    // ● black circle
+    61549: "\u274D",
+    // ❍ shadowed white circle
+    61550: "\u25A0",
+    // ■ black square
+    61551: "\u25A1",
+    // □ white square
+    61553: "\u2751",
+    // ❑ lower-right shadowed white square
+    61557: "\u25C6",
+    // ◆ black diamond
+    61607: "\u25AA",
+    // ▪ black small square
+    61656: "\u27A2",
+    // ➢ three-d top-lighted right arrowhead
+    61692: "\u2714",
+    // ✔ heavy check mark
+    61694: "\u2611"
+    // ☑ ballot box with check
+  }
+};
+function isPrivateUse(codePoint) {
+  return codePoint >= 57344 && codePoint <= 63743;
+}
+function primaryFont(fontFamily) {
+  const first = fontFamily.split(",")[0] ?? "";
+  return first.trim().replace(/^['"]|['"]$/g, "").toLowerCase();
+}
+function standardBullet(codePoint, fontFamily) {
+  const table = SYMBOL_FONT_BULLETS[primaryFont(fontFamily)];
+  return table?.[codePoint] ?? null;
+}
+function drawnOnPage(root, selectorText) {
+  return selectorText.split(",").some((part) => {
+    const base = part.trim().replace(/::?(before|after)\s*$/i, "").trim();
+    if (!base) return false;
+    try {
+      return root.querySelector(base) !== null;
+    } catch {
+      return false;
+    }
+  });
+}
+function styleRules(sheet) {
+  const found = [];
+  const stack = [...sheet.cssRules];
+  while (stack.length) {
+    const rule = stack.pop();
+    if (rule.cssRules?.length) {
+      stack.push(...rule.cssRules);
+      continue;
+    }
+    if (rule.style && rule.selectorText) found.push(rule);
+  }
+  return found;
+}
+function restoreSymbolBullets(root) {
+  const swaps = [];
+  for (const style of Array.from(root.querySelectorAll("style"))) {
+    let rules;
+    try {
+      rules = style.sheet ? styleRules(style.sheet) : [];
+    } catch {
+      continue;
+    }
+    for (const rule of rules) {
+      const content = rule.style.getPropertyValue("content");
+      if (!content) continue;
+      const font = rule.style.getPropertyValue("font-family");
+      if (!font) continue;
+      if (!drawnOnPage(root, rule.selectorText)) continue;
+      let next = "";
+      let changed = false;
+      for (const character of content) {
+        const code = character.codePointAt(0) ?? 0;
+        const standard = isPrivateUse(code) ? standardBullet(code, font) : null;
+        if (standard === null) {
+          next += character;
+          continue;
+        }
+        next += standard;
+        changed = true;
+        swaps.push({ from: character, to: standard, font: primaryFont(font) });
+      }
+      if (changed) rule.style.setProperty("content", next);
+    }
+  }
+  return swaps;
+}
+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,
@@ -151,6 +366,8 @@ function DocxPreview({
   const hostRef = useRef(null);
   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(() => {
@@ -160,6 +377,8 @@ function DocxPreview({
     if (!host) return;
     setStatus("loading");
     setStats(null);
+    setRedrawn([]);
+    setMissingShapes(0);
     setPicked(null);
     (async () => {
       const { renderAsync } = await loadOptional(
@@ -172,15 +391,18 @@ 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;
       stampDocxAddresses(host);
+      setRedrawn(redrawnFonts(restoreSymbolBullets(host)));
+      setMissingShapes(tallyShapes(host, storedParts(parsed)).missing);
       setStats(docxStats(host));
       setStatus("ready");
       let fittedFor = host.clientWidth;
@@ -262,7 +484,32 @@ function DocxPreview({
           stats.substitutedFonts.length > 0 && /* @__PURE__ */ jsxs("span", { className: "cv-docx__fonts", children: [
             "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",
+            {
+              className: "cv-docx__redrawn",
+              title: "This document writes its list bullets as characters in a symbol font's own private area, which no other font can draw. They are shown here as the standard characters that mean the same mark; the stored file is unchanged.",
+              children: [
+                "bullets redrawn: ",
+                redrawn.join(", ")
+              ]
+            }
+          )
         ]
       }
     )

package/dist/{FileRenderer-WPNFFBCP.js → FileRenderer-C4IHXUV4.js}

@@ -10,7 +10,7 @@ function formatSize(size) {
   return `${(size / (1024 * 1024)).toFixed(1)} MB`;
 }
 var DocxPreview = lazy(
-  () => import('./DocxPreview-QK4K5427.js').then((m) => ({ default: m.DocxPreview }))
+  () => import('./DocxPreview-TXEOVBVR.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-WPNFFBCP.js').then((m) => ({ default: m.FileRenderer })));
+var FileRenderer = lazy(() => import('./FileRenderer-C4IHXUV4.js').then((m) => ({ default: m.FileRenderer })));
 var builtinRenderers = {
   html: HtmlRenderer,
   document: DocumentRenderer,

package/dist/styles.css

@@ -1309,6 +1309,8 @@
 }
 .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.5",
+  "version": "0.7.7",
   "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)",