@braincrew-lab/langchain-canvas 0.4.9 → 0.5.0

package/dist/{SlidesRenderer-56R3TNWN.js → SlidesRenderer-4TZNTSEL.js}

@@ -1,4 +1,4 @@
-import { resolveElements } from './chunk-6L3AL6W4.js';
+import { deckPage, pageAspect, DEFAULT_SLIDE_PAGE_IN, resolveElements, fontScaleFor } from './chunk-SE6AP3A7.js';
 import { useAssetUrl } from './chunk-FTNRRJ3K.js';
 import './chunk-7T5DRR3F.js';
 import { useArtifactPatch } from './chunk-K2UZAYW2.js';
@@ -29,7 +29,7 @@ function snapAxis(pos, size, targets) {
   }
   return best ? { pos: pos + best.delta, guide: best.guide } : { pos, guide: null };
 }
-function FreeSlide({ elements, onChange, padding }) {
+function FreeSlide({ elements, onChange, padding, fontScale = 1 }) {
   const slideRef = useRef(null);
   const assetUrl = useAssetUrl();
   const [els, setEls] = useState(elements);
@@ -174,7 +174,7 @@ function FreeSlide({ elements, onChange, padding }) {
                   contentEditable: editingId === el.id,
                   suppressContentEditableWarning: true,
                   style: {
-                    fontSize: el.fontSize ?? 24,
+                    fontSize: (el.fontSize ?? 24) * fontScale,
                     fontWeight: el.bold ? 700 : 400,
                     color: el.color,
                     textAlign: el.align ?? "left"
@@ -234,6 +234,19 @@ function FreeSlide({ elements, onChange, padding }) {
     }
   );
 }
+function useFontScale(page) {
+  const [node, setNode] = useState(null);
+  const [scale, setScale] = useState(1);
+  useEffect(() => {
+    if (!node) return;
+    const measure = () => setScale(fontScaleFor(node.clientWidth, page));
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node, page.widthIn, page.heightIn]);
+  return { ref: setNode, scale };
+}
 var THEMES = [
   { id: "light", label: "Light", bg: "#ffffff", text: "#1f2328" },
   { id: "paper", label: "Paper", bg: "#f7f5ef", text: "#2b2a26" },
@@ -282,6 +295,11 @@ function SlidesRenderer({ artifact }) {
   const [presenting, setPresenting] = useState(false);
   const imgRef = useRef(null);
   const bgRef = useRef(null);
+  const page = deckPage(artifact.data);
+  const aspect = pageAspect(page);
+  const editBox = useFontScale(page);
+  const presentBox = useFontScale(page);
+  const thumbFont = 0.12 * (DEFAULT_SLIDE_PAGE_IN.widthIn / page.widthIn);
   useEffect(() => {
     if (!presenting) return;
     const onKey = (e) => {
@@ -374,11 +392,11 @@ 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: s.background ? { background: s.background } : void 0, 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).map(
               (el) => el.type === "text" ? /* @__PURE__ */ jsx(
                 "span",
                 {
-                  style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, fontSize: (el.fontSize ?? 24) * 0.12, fontWeight: el.bold ? 700 : 400, color: el.color ?? s.textColor, overflow: "hidden", whiteSpace: "pre-wrap" },
+                  style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, fontSize: (el.fontSize ?? 24) * thumbFont, fontWeight: el.bold ? 700 : 400, color: el.color ?? s.textColor, overflow: "hidden", whiteSpace: "pre-wrap" },
                   children: el.text
                 },
                 el.id
@@ -458,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", style: slideStyle, children: /* @__PURE__ */ jsx(FreeSlide, { elements: resolveElements(slide), onChange: (elements) => update({ elements }), padding: slide.padding }) }),
+      /* @__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__ */ 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: [
@@ -479,8 +497,8 @@ function SlidesRenderer({ artifact }) {
       )
     ] }),
     presenting && /* @__PURE__ */ jsxs("div", { className: "cv-present", onClick: () => setIndex(Math.min(at + 1, slides.length - 1)), children: [
-      /* @__PURE__ */ jsx("div", { className: "cv-present__slide cv-present__fade cv-slide cv-slide--blank", style: slideStyle, children: /* @__PURE__ */ jsx("div", { className: "cv-free", style: slide.padding ? { inset: `${slide.padding}%` } : void 0, children: resolveElements(slide).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, 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)
+      /* @__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(
+        (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,
       /* @__PURE__ */ jsxs("div", { className: "cv-present__hint", children: [

package/dist/{chunk-6L3AL6W4.js → chunk-SE6AP3A7.js}

@@ -21,4 +21,24 @@ function toElements(s) {
 }
 var resolveElements = (s) => s.elements?.length ? s.elements : toElements(s);
 
-export { resolveElements };
+// 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 };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { projectSheetIntoRows, mergeRowsIntoSheet } from './chunk-IFNRLN4Y.js';
 import { loadOptional } from './chunk-YZZSJJMQ.js';
-import { resolveElements } from './chunk-6L3AL6W4.js';
+import { deckPage, resolveElements } from './chunk-SE6AP3A7.js';
 export { useAssetUrl } from './chunk-FTNRRJ3K.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-JGRJ23OB.js').then((m) => ({ default: m.ChartRenderer })));
 var DocumentRenderer = lazy(() => import('./DocumentRenderer-ZQDQMX7X.js').then((m) => ({ default: m.DocumentRenderer })));
 var TableRenderer = lazy(() => import('./TableRenderer-3ESF577F.js').then((m) => ({ default: m.TableRenderer })));
-var SlidesRenderer = lazy(() => import('./SlidesRenderer-56R3TNWN.js').then((m) => ({ default: m.SlidesRenderer })));
+var SlidesRenderer = lazy(() => import('./SlidesRenderer-4TZNTSEL.js').then((m) => ({ default: m.SlidesRenderer })));
 var FileRenderer = lazy(() => import('./FileRenderer-3ZHNORZJ.js').then((m) => ({ default: m.FileRenderer })));
 var builtinRenderers = {
   html: HtmlRenderer,
@@ -2414,8 +2414,9 @@ async function documentToDocx(data) {
 async function slidesToPptx(data, _title) {
   const PptxGenJS = (await loadOptional("pptxgenjs", () => import('pptxgenjs'))).default;
   const pptx = new PptxGenJS();
-  const W = 10;
-  const H = 5.625;
+  const { widthIn: W, heightIn: H } = deckPage(data);
+  pptx.defineLayout({ name: "CV_PAGE", width: W, height: H });
+  pptx.layout = "CV_PAGE";
   for (const slide of data.slides) {
     const s = pptx.addSlide();
     if (slide.background && /^#[0-9a-f]{3,8}$/i.test(slide.background)) s.background = { color: slide.background.replace("#", "") };
@@ -2444,6 +2445,9 @@ async function slidesToPptx(data, _title) {
 }
 function slidesToPrintHtml(data, title) {
   const slides2 = data.slides.length ? data.slides : [{ title: "Empty deck" }];
+  const page = deckPage(data);
+  const pw = Math.round(page.widthIn * 128);
+  const ph = Math.round(page.heightIn * 128);
   const pages = slides2.map((slide) => {
     const bg = slide.background ?? "#ffffff";
     const fg = slide.textColor ?? "#1f2328";
@@ -2466,10 +2470,10 @@ function slidesToPrintHtml(data, title) {
     return `<section class="slide" style="background:${escapeAttr(bg)}">${inner}</section>`;
   }).join("");
   return `<!doctype html><html><head><meta charset="utf-8"><title>${escapeXml(title)}</title><style>
-    @page { size: 1280px 720px; margin: 0; }
+    @page { size: ${pw}px ${ph}px; margin: 0; }
     * { margin: 0; box-sizing: border-box; }
     body { font-family: Inter, Arial, sans-serif; }
-    .slide { position: relative; width: 1280px; height: 720px; overflow: hidden; page-break-after: always; }
+    .slide { position: relative; width: ${pw}px; height: ${ph}px; overflow: hidden; page-break-after: always; }
     .el { position: absolute; overflow: hidden; line-height: 1.25; }
     img.el { object-fit: contain; }
   </style></head><body>${pages}</body></html>`;

package/package.json

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