@unlev/exeq 0.5.1 → 0.5.3

package/dist/index.mjs

@@ -344,6 +344,8 @@ function PdfViewer({
               selectedIds: selectedFieldIds,
               mode,
               currentSigner,
+              pageWidthPt: page.pdfWidth,
+              pageHeightPt: page.pdfHeight,
               renderContent: renderFieldContent
             },
             field.id
@@ -434,6 +436,8 @@ function FieldOverlayItem({
   selectedIds,
   mode,
   currentSigner,
+  pageWidthPt,
+  pageHeightPt,
   renderContent
 }) {
   const overlayRef = useRef(null);
@@ -560,7 +564,7 @@ function FieldOverlayItem({
       onMouseDown: handleMouseDown,
       children: [
         mode === "designer" && !isRedact && /* @__PURE__ */ jsx("div", { className: "field-overlay-label", style: { backgroundColor: color }, children: field.label }),
-        renderContent ? renderContent(field) : /* @__PURE__ */ jsx("div", { className: "field-overlay-placeholder", children: field.value || field.placeholder }),
+        renderContent ? renderContent(field, pageWidthPt, pageHeightPt) : /* @__PURE__ */ jsx("div", { className: "field-overlay-placeholder", children: field.value || field.placeholder }),
         mode === "designer" && isSelected && !field.locked && /* @__PURE__ */ jsx(
           "div",
           {
@@ -2083,7 +2087,7 @@ function DesignerView({
 }
 
 // src/components/pdf-builder/SignerView.tsx
-import { useState as useState7, useCallback as useCallback5, useEffect as useEffect3, useRef as useRef5 } from "react";
+import { useState as useState7, useCallback as useCallback5, useEffect as useEffect3, useRef as useRef5, useLayoutEffect } from "react";
 
 // src/utils/pdfFiller.ts
 import {
@@ -2210,6 +2214,19 @@ function resolveAllFormulas(fields, customTransforms, values) {
   });
 }
 
+// src/utils/fitText.ts
+function fitFontSize(o) {
+  let size = o.autoShrink ? Math.min(o.fontSize, o.fieldHeightPt * 0.7) : o.fontSize;
+  if (o.autoShrink && o.value) {
+    const padding = 4;
+    while (size > 4) {
+      if (o.measure(o.value, size) <= o.fieldWidthPt - padding) break;
+      size -= 0.5;
+    }
+  }
+  return size;
+}
+
 // src/utils/pdfFiller.ts
 var FONT_VARIANTS = {
   Helvetica: [StandardFonts.Helvetica, StandardFonts.HelveticaBold, StandardFonts.HelveticaOblique, StandardFonts.HelveticaBoldOblique],
@@ -2301,14 +2318,14 @@ async function renderFieldsOnPages(pages, fields, getFont, getSignature) {
       const font = await getFont(field.fontFamily || "Helvetica", field.bold, field.italic);
       const spacing = field.letterSpacing || 0;
       const textWidthAtSize = (text, size) => font.widthOfTextAtSize(text, size) + spacing * (text.length - 1);
-      let fontSize = field.autoShrink ? Math.min(field.fontSize, h * 0.7) : field.fontSize;
-      if (field.autoShrink) {
-        const padding = 4;
-        while (fontSize > 4) {
-          if (textWidthAtSize(field.value, fontSize) <= w - padding) break;
-          fontSize -= 0.5;
-        }
-      }
+      const fontSize = fitFontSize({
+        value: field.value,
+        fontSize: field.fontSize,
+        autoShrink: field.autoShrink,
+        fieldWidthPt: w,
+        fieldHeightPt: h,
+        measure: textWidthAtSize
+      });
       const textX = x + 2;
       const baselineY = y + h * 0.3;
       if (spacing > 0) {
@@ -2562,6 +2579,41 @@ function FieldNavigator({
 
 // src/components/pdf-builder/SignerView.tsx
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect3;
+function shrinkToFit(el, maxPt, selfBox) {
+  if (!el) return;
+  const box = selfBox ? el : el.parentElement;
+  if (!box) return;
+  let pt = Math.max(1, maxPt);
+  el.style.fontSize = `${pt}pt`;
+  let guard = 0;
+  while (pt > 2 && guard++ < 400 && (el.scrollWidth > box.clientWidth + 0.5 || el.scrollHeight > box.clientHeight + 0.5)) {
+    pt -= 0.5;
+    el.style.fontSize = `${pt}pt`;
+  }
+}
+function FitInput({
+  maxPt,
+  ...rest
+}) {
+  const ref = useRef5(null);
+  useIsoLayoutEffect(() => {
+    shrinkToFit(ref.current, maxPt, true);
+  });
+  return /* @__PURE__ */ jsx6("input", { ref, ...rest });
+}
+function FitText({
+  maxPt,
+  className,
+  style,
+  children
+}) {
+  const ref = useRef5(null);
+  useIsoLayoutEffect(() => {
+    shrinkToFit(ref.current, maxPt, false);
+  });
+  return /* @__PURE__ */ jsx6("div", { ref, className, style, children });
+}
 function SignerView({
   apiKey,
   initialPdfUrl,
@@ -2818,7 +2870,7 @@ ${row.join(",")}`, "csv");
       return null;
     }
     if (field.formula) {
-      return /* @__PURE__ */ jsx6("div", { className: "field-overlay-value formula", children: field.value || "..." });
+      return /* @__PURE__ */ jsx6(FitText, { maxPt: field.fontSize, className: "field-overlay-value formula", style: getCssTextStyle(field), children: field.value || "..." });
     }
     const editable = field.assignee === signer;
     if (!editable) {
@@ -2828,7 +2880,7 @@ ${row.join(",")}`, "csv");
       if (field.type === "checkbox") {
         return /* @__PURE__ */ jsx6("div", { className: "field-checkbox-display readonly", children: field.value === "true" ? "\u2713" : "" });
       }
-      return /* @__PURE__ */ jsx6("div", { className: "field-overlay-placeholder readonly", children: field.value || field.placeholder });
+      return /* @__PURE__ */ jsx6(FitText, { maxPt: field.fontSize, className: "field-overlay-placeholder readonly", style: getCssTextStyle(field), children: field.value || field.placeholder });
     }
     if (isSignatureField(field)) {
       if (field.value) {
@@ -2850,10 +2902,9 @@ ${row.join(",")}`, "csv");
       );
     }
     if (field.type === "signed-date") {
-      return /* @__PURE__ */ jsx6("div", { className: "field-overlay-value", children: field.value || (/* @__PURE__ */ new Date()).toLocaleDateString() });
+      return /* @__PURE__ */ jsx6(FitText, { maxPt: field.fontSize, className: "field-overlay-value", style: getCssTextStyle(field), children: field.value || (/* @__PURE__ */ new Date()).toLocaleDateString() });
     }
     const fontStyle = {
-      fontSize: `${field.fontSize}pt`,
       letterSpacing: field.letterSpacing ? `${field.letterSpacing}pt` : void 0,
       lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0,
       ...getCssTextStyle(field)
@@ -2867,7 +2918,7 @@ ${row.join(",")}`, "csv");
           onChange: (e) => handleFieldUpdate(field.id, e.target.value),
           onFocus: () => setSelectedFieldId(field.id),
           onClick: (e) => e.stopPropagation(),
-          style: fontStyle,
+          style: { fontSize: `${field.fontSize}pt`, ...fontStyle },
           children: [
             /* @__PURE__ */ jsx6("option", { value: "", children: field.placeholder || "Select..." }),
             (field.options || []).map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
@@ -2876,8 +2927,9 @@ ${row.join(",")}`, "csv");
       );
     }
     return /* @__PURE__ */ jsx6(
-      "input",
+      FitInput,
       {
+        maxPt: field.fontSize,
         type: field.textSubtype === "email" ? "email" : field.textSubtype === "number" ? "number" : field.textSubtype === "phone" ? "tel" : field.textSubtype === "date" ? "date" : "text",
         className: "field-inline-input",
         value: field.value,