@braincrew-lab/langchain-canvas 0.6.2 → 0.7.1

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

@@ -1,4 +1,4 @@
-import { deckPage, pageAspect, DEFAULT_SLIDE_PAGE_IN, resolveElements, fontScaleFor } from './chunk-SE6AP3A7.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';
@@ -329,7 +329,7 @@ function SlidesRenderer({ artifact }) {
   };
   const duplicateSlide = () => {
     const next = [...slides];
-    next.splice(at + 1, 0, { ...slide, elements: resolveElements(slide).map((e) => ({ ...e })) });
+    next.splice(at + 1, 0, { ...slide, elements: resolveElements(slide, page).map((e) => ({ ...e })) });
     setSlides(next);
     setIndex(at + 1);
   };
@@ -354,7 +354,7 @@ function SlidesRenderer({ artifact }) {
     setSlides(next);
     setIndex(to);
   };
-  const addElement = (el) => update({ elements: [...resolveElements(slide), { ...el, id: newElementId() }] });
+  const addElement = (el) => update({ elements: [...resolveElements(slide, page), { ...el, id: newElementId() }] });
   const addTextEl = () => addElement({ type: "text", x: 12, y: 16, w: 45, h: 16, text: "Text", fontSize: 24 });
   const addImageEl = (file) => {
     if (!file) return;
@@ -392,7 +392,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: { aspectRatio: aspect, ...s.background ? { background: s.background } : {} }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: `${s.padding ?? 0}%` }, children: resolveElements(s).map(
+            /* @__PURE__ */ jsx("div", { className: "cv-deck__thumb-slide", style: { aspectRatio: aspect, ...s.background ? { background: s.background } : {} }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: `${s.padding ?? 0}%` }, children: resolveElements(s, page).map(
               (el) => el.type === "text" ? /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -476,7 +476,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", ref: editBox.ref, style: { aspectRatio: aspect, ...slideStyle }, children: /* @__PURE__ */ jsx(FreeSlide, { elements: resolveElements(slide), onChange: (elements) => update({ elements }), padding: slide.padding, fontScale: editBox.scale }) }),
+      /* @__PURE__ */ jsx("div", { className: "cv-slide cv-slide--blank", ref: editBox.ref, style: { aspectRatio: aspect, ...slideStyle }, children: /* @__PURE__ */ jsx(FreeSlide, { elements: resolveElements(slide, page), onChange: (elements) => update({ elements }), padding: slide.padding, fontScale: editBox.scale }) }),
       /* @__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: [
@@ -497,7 +497,7 @@ function SlidesRenderer({ artifact }) {
       )
     ] }),
     presenting && /* @__PURE__ */ jsxs("div", { className: "cv-present", onClick: () => setIndex(Math.min(at + 1, slides.length - 1)), children: [
-      /* @__PURE__ */ jsx("div", { ref: presentBox.ref, className: "cv-present__slide cv-present__fade cv-slide cv-slide--blank", style: { aspectRatio: aspect, ...slideStyle }, children: /* @__PURE__ */ jsx("div", { className: "cv-free", style: slide.padding ? { inset: `${slide.padding}%` } : void 0, children: resolveElements(slide).map(
+      /* @__PURE__ */ jsx("div", { ref: presentBox.ref, className: "cv-present__slide cv-present__fade cv-slide cv-slide--blank", style: { aspectRatio: aspect, ...slideStyle }, children: /* @__PURE__ */ jsx("div", { className: "cv-free", style: slide.padding ? { inset: `${slide.padding}%` } : void 0, children: resolveElements(slide, page).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) * presentBox.scale, 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: assetUrl(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/chunk-MZ5WQWTS.js

@@ -0,0 +1,176 @@
+// src/client/slidePage.ts
+var DEFAULT_SLIDE_PAGE_IN = { widthIn: 10, heightIn: 5.625 };
+var PAGE_DPI = 96;
+function deckPage(data) {
+  const page = data.page;
+  if (!page) return DEFAULT_SLIDE_PAGE_IN;
+  const { widthIn, heightIn } = page;
+  if (!Number.isFinite(widthIn) || !Number.isFinite(heightIn) || widthIn <= 0 || heightIn <= 0) {
+    return DEFAULT_SLIDE_PAGE_IN;
+  }
+  return { widthIn, heightIn };
+}
+function pageAspect(page) {
+  return `${page.widthIn} / ${page.heightIn}`;
+}
+function fontScaleFor(boxWidthPx, page) {
+  if (!Number.isFinite(boxWidthPx) || boxWidthPx <= 0) return 1;
+  return boxWidthPx / (page.widthIn * PAGE_DPI);
+}
+
+// src/client/slideElements.ts
+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;
+var BODY_TOP = 28;
+var BODY_BOTTOM = 88;
+var BODY_LEFT = 8;
+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 ";
+var WIDE_CHAR_FLOOR = 11903;
+function pagePx(page) {
+  const fallback = [DEFAULT_SLIDE_PAGE_IN.widthIn * PAGE_DPI, DEFAULT_SLIDE_PAGE_IN.heightIn * PAGE_DPI];
+  if (!page) return fallback;
+  const { widthIn, heightIn } = page;
+  if (!(widthIn > 0 && heightIn > 0)) return fallback;
+  return [widthIn * PAGE_DPI, heightIn * PAGE_DPI];
+}
+function displayWidth(text) {
+  let width = 0;
+  for (const ch of text) width += (ch.codePointAt(0) ?? 0) > WIDE_CHAR_FLOOR ? 2 : 1;
+  return width;
+}
+function linePercent(fontPx, pageHeightPx) {
+  return fontPx * LINE_HEIGHT / pageHeightPx * 100;
+}
+function lineCount(text, widthPercent, fontPx, pageWidthPx) {
+  if (!text) return 1;
+  const perLine = widthPercent / 100 * pageWidthPx / (fontPx / 2);
+  if (perLine < 1) return 1;
+  return Math.max(1, Math.ceil(displayWidth(text) / perLine));
+}
+function fit(texts, width, band, [pageW, pageH]) {
+  let size = BODY_RAMP[BODY_RAMP.length - 1];
+  let counts = [];
+  for (const candidate of BODY_RAMP) {
+    size = candidate;
+    counts = texts.map((t) => lineCount(t, width, candidate, pageW));
+    const line = linePercent(candidate, pageH);
+    const ink = counts.reduce((a, b) => a + b, 0) * line;
+    const floorGap = GAP_MIN * line * Math.max(0, texts.length - 1);
+    if (ink + floorGap <= band) return [candidate, counts];
+  }
+  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 [];
+  const band = o.bottom - o.top;
+  const line = linePercent(size, o.pageHeightPx);
+  const ink = counts.reduce((a, b) => a + b, 0) * line;
+  if (ink > band) {
+    const pitch = band / n;
+    return counts.map((_, i) => ({ x: o.left, y: o.top + i * pitch, w: o.width, h: pitch, fontSize: size }));
+  }
+  const gap = n > 1 ? Math.min(Math.max((band - ink) / (n - 1), 0), GAP_MAX * line) : 0;
+  const boxes = [];
+  let y = o.top + Math.max(band - (ink + gap * (n - 1)), 0) / 2;
+  for (const count of counts) {
+    const h = count * line;
+    boxes.push({ x: o.left, y, w: o.width, h, fontSize: size });
+    y += h + gap;
+  }
+  return boxes;
+}
+function bullets(texts, o) {
+  if (!texts.length) return [];
+  const lines = texts.map((t) => BULLET + t);
+  const [size, counts] = o.size === void 0 ? fit(lines, o.width, o.bottom - o.top, o.pagePx) : [o.size, lines.map((t) => lineCount(t, o.width, o.size, o.pagePx[0]))];
+  return place(counts, size, { top: o.top, bottom: o.bottom, left: o.left, width: o.width, pageHeightPx: o.pagePx[1] });
+}
+function toElements(s, page) {
+  const px = pagePx(page);
+  const [pageW, pageH] = px;
+  const layout = s.layout ?? "content";
+  const els = [];
+  const push = (id, e) => els.push({ color: s.textColor, ...e, id });
+  if (layout === "title" || layout === "section") {
+    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: 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: subSize, align: "center" });
+    }
+    return els;
+  }
+  let bodyTop = BODY_TOP;
+  if (s.title) {
+    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 [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;
+    const left = s.bullets ?? [];
+    const right = s.bullets2 ?? [];
+    const size = Math.min(
+      fit(left.map((t) => BULLET + t), COLUMN_WIDTH, band, px)[0],
+      fit(right.map((t) => BULLET + t), COLUMN_WIDTH, band, px)[0]
+    );
+    for (const [prefix, texts2, x] of [["bul", left, BODY_LEFT - 2], ["bul2", right, COLUMN_RIGHT_LEFT]]) {
+      bullets(texts2, { top: bodyTop, bottom: BODY_BOTTOM, left: x, width: COLUMN_WIDTH, pagePx: px, size }).forEach(
+        (b, i) => push(`${prefix}_${i}`, { type: "text", x: b.x, y: b.y, w: b.w, h: b.h, text: BULLET + texts2[i], fontSize: b.fontSize })
+      );
+    }
+    return els;
+  }
+  const texts = s.bullets ?? [];
+  bullets(texts, { top: bodyTop, bottom: BODY_BOTTOM, left: BODY_LEFT, width: BODY_WIDTH, pagePx: px }).forEach(
+    (b, i) => push(`bul_${i}`, { type: "text", x: b.x, y: b.y, w: b.w, h: b.h, text: BULLET + texts[i], fontSize: b.fontSize })
+  );
+  return els;
+}
+var resolveElements = (s, page) => s.elements?.length ? s.elements : toElements(s, page);
+
+export { DEFAULT_SLIDE_PAGE_IN, deckPage, fontScaleFor, pageAspect, resolveElements };

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-SE6AP3A7.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-IHVLXQ45.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,
@@ -2423,7 +2423,7 @@ async function slidesToPptx(data, _title) {
     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)) {
+    for (const el of resolveElements(slide, { widthIn: W, heightIn: 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;
@@ -2451,7 +2451,7 @@ function slidesToPrintHtml(data, title) {
   const pages = slides2.map((slide) => {
     const bg = slide.background ?? "#ffffff";
     const fg = slide.textColor ?? "#1f2328";
-    const els = resolveElements(slide).map((el) => {
+    const els = resolveElements(slide, page).map((el) => {
       const box = `left:${el.x}%;top:${el.y}%;width:${el.w}%;height:${el.h}%`;
       if (el.type === "text") {
         const style = `${box};font-size:${(el.fontSize ?? 24) / 7.2}vw;font-weight:${el.bold ? 700 : 400};color:${escapeAttr(el.color ?? fg)};text-align:${escapeAttr(el.align ?? "left")};white-space:pre-wrap`;

package/package.json

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

package/dist/chunk-SE6AP3A7.js

@@ -1,44 +0,0 @@
-// src/client/slideElements.ts
-function toElements(s) {
-  const layout = s.layout ?? "content";
-  const els = [];
-  const push = (id, e) => els.push({ color: s.textColor, ...e, id });
-  if (layout === "title" || layout === "section") {
-    if (s.title) push("title", { type: "text", x: 10, y: 34, w: 80, h: 18, text: s.title, fontSize: layout === "title" ? 54 : 40, bold: true, align: "center" });
-    if (s.subtitle) push("subtitle", { type: "text", x: 10, y: 58, w: 80, h: 8, text: s.subtitle, fontSize: 24, align: "center" });
-  } else if (layout === "image") {
-    if (s.title) push("title", { type: "text", x: 6, y: 6, w: 88, h: 10, text: s.title, fontSize: 28, bold: true });
-    if (s.image) els.push({ id: "img", type: "image", x: 14, y: 20, w: 72, h: 66, src: s.image });
-  } else if (layout === "two-column") {
-    if (s.title) push("title", { type: "text", x: 6, y: 6, w: 88, h: 10, text: s.title, fontSize: 28, bold: true });
-    (s.bullets ?? []).forEach((b, i) => push(`bul_${i}`, { type: "text", x: 6, y: 24 + i * 8, w: 42, h: 7, text: `\u2022 ${b}`, fontSize: 18 }));
-    (s.bullets2 ?? []).forEach((b, i) => push(`bul2_${i}`, { type: "text", x: 52, y: 24 + i * 8, w: 42, h: 7, text: `\u2022 ${b}`, fontSize: 18 }));
-  } else {
-    if (s.title) push("title", { type: "text", x: 6, y: 8, w: 88, h: 10, text: s.title, fontSize: 32, bold: true });
-    (s.bullets ?? []).forEach((b, i) => push(`bul_${i}`, { type: "text", x: 8, y: 28 + i * 9, w: 84, h: 8, text: `\u2022 ${b}`, fontSize: 20 }));
-  }
-  return els;
-}
-var resolveElements = (s) => s.elements?.length ? s.elements : toElements(s);
-
-// src/client/slidePage.ts
-var DEFAULT_SLIDE_PAGE_IN = { widthIn: 10, heightIn: 5.625 };
-var PAGE_DPI = 96;
-function deckPage(data) {
-  const page = data.page;
-  if (!page) return DEFAULT_SLIDE_PAGE_IN;
-  const { widthIn, heightIn } = page;
-  if (!Number.isFinite(widthIn) || !Number.isFinite(heightIn) || widthIn <= 0 || heightIn <= 0) {
-    return DEFAULT_SLIDE_PAGE_IN;
-  }
-  return { widthIn, heightIn };
-}
-function pageAspect(page) {
-  return `${page.widthIn} / ${page.heightIn}`;
-}
-function fontScaleFor(boxWidthPx, page) {
-  if (!Number.isFinite(boxWidthPx) || boxWidthPx <= 0) return 1;
-  return boxWidthPx / (page.widthIn * PAGE_DPI);
-}
-
-export { DEFAULT_SLIDE_PAGE_IN, deckPage, fontScaleFor, pageAspect, resolveElements };