@pixldocs/canvas-renderer 0.5.179 → 0.5.180

package/README.md

@@ -206,6 +206,48 @@ const result = await renderer.renderPdf(templateConfig, { title: 'My Doc' });
 
 ## API Reference
 
+### Form schema shape (V2 `sectionState`)
+
+`sectionState` accepts entries for both **repeatable sections** and
+**repeatable pages**. Both look the same on the wire — an array of entry
+objects keyed by the section/page `id`:
+
+```ts
+sectionState = {
+  // single section
+  personal: { name: 'Jane' },
+
+  // repeatable section (e.g. Experience)
+  experience: [
+    { title: 'Designer', company: 'Acme' },
+    { title: 'Lead',      company: 'Beta' },
+  ],
+
+  // repeatable PAGE (e.g. Photo Page) — same shape as above, but at render
+  // time the bound template page is cloned once per entry.
+  photo_page: [
+    { caption: 'Cover' },
+    { caption: 'Back'  },
+  ],
+}
+```
+
+Fetch the schema from the Pixldocs form API to discover what keys/fields are
+expected. The response exposes repeatable pages as a dedicated
+`schema.repeatablePages[]` array (each entry mirrors a repeatable section:
+`id`, `label`, `order`, `templateKeyPrefix`, `minEntries`, `maxEntries`,
+`entryFields`).
+
+```ts
+const res = await fetch(
+  `${SUPABASE_URL}/functions/v1/form-api?form_schema_id=${SCHEMA_ID}&action=schema`,
+  { headers: { apikey: SUPABASE_ANON_KEY } },
+).then((r) => r.json());
+
+res.schema.sections         // single + repeatable sections
+res.schema.repeatablePages  // repeatable pages (clone-per-entry)
+```
+
 ### `PixldocsPreview` (React Component)
 
 | Prop | Type | Default | Description |

package/dist/{index-BBOaToIA.cjs → index-B9NOXCTL.cjs}

@@ -484,9 +484,19 @@ function resolveStackGroupEffectivePositions(group, pageChildren, options) {
   const gap = group.stackSpacing ?? 8;
   const padTop = group.paddingTop ?? 0;
   const padLeft = group.paddingLeft ?? 0;
+  const padRight = group.paddingRight ?? 0;
+  const padBottom = group.paddingBottom ?? 0;
+  const justify = group.justifyContent ?? "start";
+  const align = group.alignItems ?? "start";
+  const isVertical = isVerticalStackLayoutMode(mode);
   const kids = group.children ?? [];
   const out = /* @__PURE__ */ new Map();
-  if (isVerticalStackLayoutMode(mode)) {
+  const sizes = /* @__PURE__ */ new Map();
+  for (const c of kids) {
+    const b = getNodeBounds(c, pageChildren);
+    sizes.set(c.id, { width: b.width, height: b.height });
+  }
+  if (isVertical) {
     let prevBottom = padTop;
     let firstSeen = false;
     for (let i = 0; i < kids.length; i++) {
@@ -498,7 +508,7 @@ function resolveStackGroupEffectivePositions(group, pageChildren, options) {
       const effectiveTop = !firstSeen ? padTop + storedTop + mTop : prevBottom + gap + storedTop + mTop;
       firstSeen = true;
       out.set(child.id, { top: effectiveTop, left: padLeft + storedLeft + mLeft });
-      const h = getNodeBounds(child, pageChildren).height;
+      const h = sizes.get(child.id).height;
       prevBottom = effectiveTop + h + (child.marginBottom ?? 0);
     }
   } else {
@@ -513,10 +523,99 @@ function resolveStackGroupEffectivePositions(group, pageChildren, options) {
       const effectiveLeft = !firstSeen ? padLeft + storedLeft + mLeft : prevRight + gap + storedLeft + mLeft;
       firstSeen = true;
       out.set(child.id, { top: padTop + storedTop + mTop, left: effectiveLeft });
-      const w = getNodeBounds(child, pageChildren).width;
+      const w = sizes.get(child.id).width;
       prevRight = effectiveLeft + w + (child.marginRight ?? 0);
     }
   }
+  const containerW = typeof group.width === "number" ? group.width : void 0;
+  const containerH = typeof group.height === "number" ? group.height : void 0;
+  const mainContainer = isVertical ? containerH : containerW;
+  const crossContainer = isVertical ? containerW : containerH;
+  if (align !== "start" && crossContainer != null && kids.length > 0) {
+    const crossPad0 = isVertical ? padLeft : padTop;
+    const crossPadEnd = isVertical ? padRight : padBottom;
+    const innerCross = Math.max(0, crossContainer - crossPad0 - crossPadEnd);
+    for (const child of kids) {
+      const pos = out.get(child.id);
+      if (!pos) continue;
+      const sz = sizes.get(child.id);
+      const childCross = isVertical ? sz.width : sz.height;
+      let crossPos;
+      if (align === "stretch") {
+        crossPos = crossPad0;
+      } else if (align === "center") {
+        crossPos = crossPad0 + (innerCross - childCross) / 2;
+      } else {
+        crossPos = crossPad0 + (innerCross - childCross);
+      }
+      if (isVertical) {
+        out.set(child.id, { top: pos.top, left: crossPos });
+      } else {
+        out.set(child.id, { top: crossPos, left: pos.left });
+      }
+    }
+  }
+  if (justify !== "start" && mainContainer != null && kids.length > 0) {
+    const mainPad0 = isVertical ? padTop : padLeft;
+    const mainPadEnd = isVertical ? padBottom : padRight;
+    const innerMain = Math.max(0, mainContainer - mainPad0 - mainPadEnd);
+    let totalMain = 0;
+    for (let i = 0; i < kids.length; i++) {
+      const child = kids[i];
+      const sz = sizes.get(child.id);
+      totalMain += isVertical ? sz.height : sz.width;
+      const marginStart = isVertical ? child.marginTop ?? 0 : child.marginLeft ?? 0;
+      const marginEnd = isVertical ? child.marginBottom ?? 0 : child.marginRight ?? 0;
+      totalMain += marginStart + marginEnd;
+    }
+    const baseGapTotal = gap * Math.max(0, kids.length - 1);
+    const free = innerMain - totalMain - baseGapTotal;
+    let offset = 0;
+    let extraGap = 0;
+    if (free > 0) {
+      switch (justify) {
+        case "center":
+          offset = free / 2;
+          break;
+        case "end":
+          offset = free;
+          break;
+        case "space-between":
+          if (kids.length > 1) extraGap = free / (kids.length - 1);
+          else offset = free / 2;
+          break;
+        case "space-around":
+          if (kids.length > 0) {
+            extraGap = free / kids.length;
+            offset = extraGap / 2;
+          }
+          break;
+        case "space-evenly":
+          extraGap = free / (kids.length + 1);
+          offset = extraGap;
+          break;
+      }
+    }
+    if (offset !== 0 || extraGap !== 0) {
+      let cursor = mainPad0 + offset;
+      for (let i = 0; i < kids.length; i++) {
+        const child = kids[i];
+        const sz = sizes.get(child.id);
+        const marginStart = isVertical ? child.marginTop ?? 0 : child.marginLeft ?? 0;
+        const marginEnd = isVertical ? child.marginBottom ?? 0 : child.marginRight ?? 0;
+        const main = isVertical ? sz.height : sz.width;
+        const pos = out.get(child.id);
+        if (!pos) continue;
+        const startMain = cursor + marginStart;
+        if (isVertical) {
+          out.set(child.id, { top: startMain, left: pos.left });
+        } else {
+          out.set(child.id, { top: pos.top, left: startMain });
+        }
+        cursor = startMain + main + marginEnd + gap + extraGap;
+      }
+    }
+  }
   return out;
 }
 function groupBoundsFromChildren(group, pageChildren, options) {
@@ -7617,7 +7716,28 @@ const PageCanvas = react.forwardRef(
         const element = id ? elementById.get(id) : void 0;
         if (!element) return;
         if (element.overflowPolicy === "auto-shrink") {
+          try {
+            const measured = createText(element);
+            const newFontSize = measured.fontSize;
+            const newWidth = measured.width;
+            const currentFontSize = obj.fontSize;
+            if (typeof newFontSize === "number" && newFontSize > 0 && newFontSize !== currentFontSize) {
+              obj.set({ fontSize: newFontSize });
+              if (typeof newWidth === "number" && newWidth > 0) {
+                obj.width = newWidth;
+              }
+              obj.initDimensions();
+              obj.setCoords();
+              didReflow = true;
+            }
+          } catch {
+          }
           obj.dirty = true;
+          try {
+            obj._forceClearCache = true;
+            if (typeof obj._clearCache === "function") obj._clearCache();
+          } catch {
+          }
           return;
         }
         const targetWidth = Math.max(1, Number(element.width) > 0 ? Number(element.width) : Number(obj.width ?? 200));
@@ -9230,9 +9350,26 @@ const PageCanvas = react.forwardRef(
               const needsCropGroupFadeUpdate = isCropGroup2 && fadeKeyChanged;
               const hadUrlBefore = storedImageUrl && String(storedImageUrl).trim() !== "";
               if (!hasUrl && hadUrlBefore) {
-                const placeholder = isCropGroup2 ? createImagePlaceholderForGroup(element) : createImagePlaceholder(element);
+                const resolvedSizeImg = (pageChildren == null ? void 0 : pageChildren.length) ? getNodeBounds(element, pageChildren) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
+                const hasExplicitSize = typeof element.width === "number" && Number.isFinite(element.width) && element.width > 0 && typeof element.height === "number" && Number.isFinite(element.height) && element.height > 0;
+                const minVisiblePlaceholder = hasExplicitSize ? 1 : 20;
+                const nextWidth = Math.max(minVisiblePlaceholder, Number(resolvedSizeImg.width) || 200);
+                const nextHeight = Math.max(minVisiblePlaceholder, Number(resolvedSizeImg.height) || 50);
+                const storePosImg = pageChildren ? (() => {
+                  const node = findNodeById(pageChildren, element.id);
+                  return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
+                })() : { left: element.left ?? 0, top: element.top ?? 0 };
+                const elementForPlaceholder = { ...element, width: nextWidth, height: nextHeight };
+                const placeholder = isCropGroup2 ? createImagePlaceholderForGroup(elementForPlaceholder) : createImagePlaceholder(elementForPlaceholder);
                 setObjectData(placeholder, element.id);
                 placeholder.__imageSrc = "";
+                placeholder.set({
+                  left: storePosImg.left + nextWidth / 2,
+                  top: storePosImg.top + nextHeight / 2,
+                  originX: "center",
+                  originY: "center"
+                });
+                placeholder.setCoords();
                 const idx = fc.getObjects().indexOf(existingObj);
                 fc.remove(existingObj);
                 if (idx >= 0) {
@@ -11756,7 +11893,8 @@ function formDefSectionsToInferred(schemaSections, repeatableNodeMap) {
           // Honor minEntries: 0 — start with no entries, user adds via "+ Add" button.
           initialEntryCount: minEntries,
           parentId,
-          entryNameFieldKey: def.entryNameFieldKey
+          entryNameFieldKey: def.entryNameFieldKey,
+          isRepeatablePage: def.isRepeatablePage
         };
         if (treeNodeId) section.treeNodeId = treeNodeId;
         sections.push(section);
@@ -16360,9 +16498,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.179";
+const resolvedPackageVersion = "0.5.180";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.179";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.180";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16864,7 +17002,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-Be8MJ_2c.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-B8qiTpn8.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -19009,7 +19147,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-Be8MJ_2c.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-B8qiTpn8.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19402,4 +19540,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-BBOaToIA.cjs.map
+//# sourceMappingURL=index-B9NOXCTL.cjs.map