@unlev/exeq 0.5.1 → 0.5.3

package/dist/index.d.mts

@@ -188,7 +188,7 @@ interface PdfViewerProps {
     onMoveEnd?: () => void;
     mode: 'designer' | 'signer';
     currentSigner?: string;
-    renderFieldContent?: (field: FormField) => React.ReactNode;
+    renderFieldContent?: (field: FormField, pageWidthPt?: number, pageHeightPt?: number) => React.ReactNode;
     zoom?: number;
     /** Called with field IDs inside a drag-selection rectangle */
     onMarqueeSelect?: (ids: string[]) => void;

package/dist/index.d.ts

@@ -188,7 +188,7 @@ interface PdfViewerProps {
     onMoveEnd?: () => void;
     mode: 'designer' | 'signer';
     currentSigner?: string;
-    renderFieldContent?: (field: FormField) => React.ReactNode;
+    renderFieldContent?: (field: FormField, pageWidthPt?: number, pageHeightPt?: number) => React.ReactNode;
     zoom?: number;
     /** Called with field IDs inside a drag-selection rectangle */
     onMarqueeSelect?: (ids: string[]) => void;

package/dist/index.js

@@ -416,6 +416,8 @@ function PdfViewer({
               selectedIds: selectedFieldIds,
               mode,
               currentSigner,
+              pageWidthPt: page.pdfWidth,
+              pageHeightPt: page.pdfHeight,
               renderContent: renderFieldContent
             },
             field.id
@@ -506,6 +508,8 @@ function FieldOverlayItem({
   selectedIds,
   mode,
   currentSigner,
+  pageWidthPt,
+  pageHeightPt,
   renderContent
 }) {
   const overlayRef = (0, import_react.useRef)(null);
@@ -632,7 +636,7 @@ function FieldOverlayItem({
       onMouseDown: handleMouseDown,
       children: [
         mode === "designer" && !isRedact && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "field-overlay-label", style: { backgroundColor: color }, children: field.label }),
-        renderContent ? renderContent(field) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "field-overlay-placeholder", children: field.value || field.placeholder }),
+        renderContent ? renderContent(field, pageWidthPt, pageHeightPt) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "field-overlay-placeholder", children: field.value || field.placeholder }),
         mode === "designer" && isSelected && !field.locked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
@@ -2278,6 +2282,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: [import_pdf_lib.StandardFonts.Helvetica, import_pdf_lib.StandardFonts.HelveticaBold, import_pdf_lib.StandardFonts.HelveticaOblique, import_pdf_lib.StandardFonts.HelveticaBoldOblique],
@@ -2369,14 +2386,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) {
@@ -2630,6 +2647,41 @@ function FieldNavigator({
 
 // src/components/pdf-builder/SignerView.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var useIsoLayoutEffect = typeof window !== "undefined" ? import_react7.useLayoutEffect : import_react7.useEffect;
+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 = (0, import_react7.useRef)(null);
+  useIsoLayoutEffect(() => {
+    shrinkToFit(ref.current, maxPt, true);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { ref, ...rest });
+}
+function FitText({
+  maxPt,
+  className,
+  style,
+  children
+}) {
+  const ref = (0, import_react7.useRef)(null);
+  useIsoLayoutEffect(() => {
+    shrinkToFit(ref.current, maxPt, false);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className, style, children });
+}
 function SignerView({
   apiKey,
   initialPdfUrl,
@@ -2886,7 +2938,7 @@ ${row.join(",")}`, "csv");
       return null;
     }
     if (field.formula) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "field-overlay-value formula", children: field.value || "..." });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FitText, { maxPt: field.fontSize, className: "field-overlay-value formula", style: getCssTextStyle(field), children: field.value || "..." });
     }
     const editable = field.assignee === signer;
     if (!editable) {
@@ -2896,7 +2948,7 @@ ${row.join(",")}`, "csv");
       if (field.type === "checkbox") {
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "field-checkbox-display readonly", children: field.value === "true" ? "\u2713" : "" });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "field-overlay-placeholder readonly", children: field.value || field.placeholder });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FitText, { maxPt: field.fontSize, className: "field-overlay-placeholder readonly", style: getCssTextStyle(field), children: field.value || field.placeholder });
     }
     if (isSignatureField(field)) {
       if (field.value) {
@@ -2918,10 +2970,9 @@ ${row.join(",")}`, "csv");
       );
     }
     if (field.type === "signed-date") {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "field-overlay-value", children: field.value || (/* @__PURE__ */ new Date()).toLocaleDateString() });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(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)
@@ -2935,7 +2986,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__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: field.placeholder || "Select..." }),
             (field.options || []).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
@@ -2944,8 +2995,9 @@ ${row.join(",")}`, "csv");
       );
     }
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "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,