@braincrew-lab/langchain-canvas 0.7.0 → 0.7.2

package/dist/{SlidesRenderer-YLO3NLEY.js → SlidesRenderer-AHE5ANBZ.js}

@@ -1,4 +1,4 @@
-import { deckPage, pageAspect, DEFAULT_SLIDE_PAGE_IN, resolveElements, fontScaleFor } from './chunk-GXCUFFEL.js';
+import { deckPage, pageAspect, DEFAULT_SLIDE_PAGE_IN, resolveElements, fontScaleFor } from './chunk-MZ5WQWTS.js';
 import { useAssetUrl } from './chunk-HCF2DXCR.js';
 import './chunk-7T5DRR3F.js';
 import { useArtifactPatch } from './chunk-N5JW2BKI.js';

package/dist/{chunk-GXCUFFEL.js → chunk-MZ5WQWTS.js}

@@ -22,6 +22,8 @@ function fontScaleFor(boxWidthPx, page) {
 var FONT_DISPLAY = 48;
 var FONT_TITLE = 38;
 var BODY_RAMP = [30, 24, 19];
+var TITLE_RAMP = [FONT_TITLE, 30, 24];
+var DISPLAY_RAMP = [FONT_DISPLAY, FONT_TITLE, 30];
 var LINE_HEIGHT = 1.35;
 var GAP_MIN = 0.35;
 var GAP_MAX = 3;
@@ -32,6 +34,12 @@ var BODY_WIDTH = 84;
 var TITLE_TOP = 7;
 var TITLE_LEFT = 6;
 var TITLE_WIDTH = 88;
+var TITLE_BOTTOM = 46;
+var SUBTITLE_BUDGET = 12;
+var COVER_TOP = 6;
+var COVER_BOTTOM = 94;
+var COVER_TITLE_SHARE = 0.66;
+var COVER_SUBTITLE_SHARE = 0.22;
 var COLUMN_WIDTH = 42;
 var COLUMN_RIGHT_LEFT = 52;
 var BULLET = "\u2022 ";
@@ -70,6 +78,16 @@ function fit(texts, width, band, [pageW, pageH]) {
   }
   return [size, counts];
 }
+function headline(text, width, budget, [pageW, pageH], ramp) {
+  let size = ramp[ramp.length - 1];
+  let height = 0;
+  for (const candidate of ramp) {
+    size = candidate;
+    height = lineCount(text, width, candidate, pageW) * linePercent(candidate, pageH);
+    if (height <= budget) return [candidate, height];
+  }
+  return [size, Math.min(height, budget)];
+}
 function place(counts, size, o) {
   const n = counts.length;
   if (n === 0) return [];
@@ -103,33 +121,34 @@ function toElements(s, page) {
   const els = [];
   const push = (id, e) => els.push({ color: s.textColor, ...e, id });
   if (layout === "title" || layout === "section") {
-    const titleH = s.title ? lineCount(s.title, TITLE_WIDTH, FONT_DISPLAY, pageW) * linePercent(FONT_DISPLAY, pageH) : 0;
-    const subH = s.subtitle ? lineCount(s.subtitle, TITLE_WIDTH, BODY_RAMP[0], pageW) * linePercent(BODY_RAMP[0], pageH) : 0;
-    const spacer = titleH && subH ? linePercent(BODY_RAMP[0], pageH) : 0;
-    let y = (100 - (titleH + spacer + subH)) / 2;
+    const budget = COVER_BOTTOM - COVER_TOP;
+    const [titleSize, titleH] = s.title ? headline(s.title, TITLE_WIDTH, budget * COVER_TITLE_SHARE, px, DISPLAY_RAMP) : [FONT_DISPLAY, 0];
+    const [subSize, subH] = s.subtitle ? headline(s.subtitle, TITLE_WIDTH, budget * COVER_SUBTITLE_SHARE, px, BODY_RAMP) : [BODY_RAMP[0], 0];
+    const spacer = titleH && subH ? linePercent(subSize, pageH) : 0;
+    let y = Math.max(COVER_TOP, (100 - (titleH + spacer + subH)) / 2);
     if (s.title) {
-      push("title", { type: "text", x: TITLE_LEFT, y, w: TITLE_WIDTH, h: titleH, text: s.title, fontSize: FONT_DISPLAY, bold: true, align: "center" });
+      push("title", { type: "text", x: TITLE_LEFT, y, w: TITLE_WIDTH, h: titleH, text: s.title, fontSize: titleSize, bold: true, align: "center" });
       y += titleH + spacer;
     }
     if (s.subtitle) {
-      push("subtitle", { type: "text", x: TITLE_LEFT, y, w: TITLE_WIDTH, h: subH, text: s.subtitle, fontSize: BODY_RAMP[0], align: "center" });
+      push("subtitle", { type: "text", x: TITLE_LEFT, y, w: TITLE_WIDTH, h: subH, text: s.subtitle, fontSize: subSize, align: "center" });
     }
     return els;
   }
   let bodyTop = BODY_TOP;
   if (s.title) {
-    const h = lineCount(s.title, TITLE_WIDTH, FONT_TITLE, pageW) * linePercent(FONT_TITLE, pageH);
-    push("title", { type: "text", x: TITLE_LEFT, y: TITLE_TOP, w: TITLE_WIDTH, h, text: s.title, fontSize: FONT_TITLE, bold: true });
-    bodyTop = Math.max(bodyTop, TITLE_TOP + h + linePercent(FONT_TITLE, pageH) * 0.9);
+    const [size, h] = headline(s.title, TITLE_WIDTH, TITLE_BOTTOM - TITLE_TOP, px, TITLE_RAMP);
+    push("title", { type: "text", x: TITLE_LEFT, y: TITLE_TOP, w: TITLE_WIDTH, h, text: s.title, fontSize: size, bold: true });
+    bodyTop = Math.max(bodyTop, TITLE_TOP + h + linePercent(size, pageH) * 0.9);
   }
   if (layout === "image") {
     if (s.image) els.push({ id: "img", type: "image", x: 14, y: bodyTop, w: 72, h: Math.max(BODY_BOTTOM - bodyTop, 0), src: s.image });
     return els;
   }
   if (s.subtitle) {
-    const h = lineCount(s.subtitle, TITLE_WIDTH, BODY_RAMP[0], pageW) * linePercent(BODY_RAMP[0], pageH);
-    push("subtitle", { type: "text", x: TITLE_LEFT, y: bodyTop, w: TITLE_WIDTH, h, text: s.subtitle, fontSize: BODY_RAMP[0] });
-    bodyTop = bodyTop + h + linePercent(BODY_RAMP[0], pageH) * 0.9;
+    const [size, h] = headline(s.subtitle, TITLE_WIDTH, SUBTITLE_BUDGET, px, BODY_RAMP);
+    push("subtitle", { type: "text", x: TITLE_LEFT, y: bodyTop, w: TITLE_WIDTH, h, text: s.subtitle, fontSize: size });
+    bodyTop = bodyTop + h + linePercent(size, pageH) * 0.9;
   }
   if (layout === "two-column") {
     const band = BODY_BOTTOM - bodyTop;

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { projectSheetIntoRows, mergeRowsIntoSheet } from './chunk-IFNRLN4Y.js';
 import { loadOptional } from './chunk-YZZSJJMQ.js';
-import { deckPage, resolveElements } from './chunk-GXCUFFEL.js';
+import { deckPage, resolveElements } from './chunk-MZ5WQWTS.js';
 export { useAssetUrl } from './chunk-HCF2DXCR.js';
 import { inlineArtifactAssets, inlineHtmlAssets } from './chunk-7T5DRR3F.js';
 export { ASSET_REFERENCE_PREFIXES, fetchAssetDataUri, inlineArtifactAssets, inlineHtmlAssets, isAssetReference, normalizeAssetReference, resolveAssetUrl } from './chunk-7T5DRR3F.js';
@@ -2258,7 +2258,7 @@ function HtmlRenderer({ artifact: artifact2 }) {
 var ChartRenderer = lazy(() => import('./ChartRenderer-TBTWNPV7.js').then((m) => ({ default: m.ChartRenderer })));
 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-YLO3NLEY.js').then((m) => ({ default: m.SlidesRenderer })));
+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 builtinRenderers = {
   html: HtmlRenderer,
@@ -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/package.json

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