@unlev/exeq 0.5.2 → 0.5.3

package/dist/index.js

@@ -2294,17 +2294,6 @@ function fitFontSize(o) {
   }
   return size;
 }
-var measureCtx = null;
-function measureTextWidth(text, size, opts) {
-  if (typeof document === "undefined") return text.length * size * 0.5;
-  if (!measureCtx) measureCtx = document.createElement("canvas").getContext("2d");
-  if (!measureCtx) return text.length * size * 0.5;
-  const family = getCssFontFamily(opts?.fontFamily) || "Helvetica, Arial, sans-serif";
-  measureCtx.font = `${opts?.italic ? "italic " : ""}${opts?.bold ? "bold " : ""}${size}px ${family}`;
-  const base = measureCtx.measureText(text).width;
-  const spacing = opts?.letterSpacing ? opts.letterSpacing * Math.max(0, text.length - 1) : 0;
-  return base + spacing;
-}
 
 // src/utils/pdfFiller.ts
 var FONT_VARIANTS = {
@@ -2658,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,
@@ -2909,12 +2933,12 @@ ${row.join(",")}`, "csv");
       setSubmitting(false);
     }
   }, [pdfSource, fields, callbackUrl, allRequiredFilled, onComplete, isLastSigner, signer, onSignerComplete, includeAuditTrail, exportFormat, onExport, getValues, transforms]);
-  const renderFieldContent = (0, import_react7.useCallback)((field, pageWidthPt, pageHeightPt) => {
+  const renderFieldContent = (0, import_react7.useCallback)((field) => {
     if (isRedactField(field)) {
       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) {
@@ -2924,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) {
@@ -2946,25 +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 fieldWidthPt = pageWidthPt ? field.width / 100 * pageWidthPt : Infinity;
-    const fieldHeightPt = pageHeightPt ? field.height / 100 * pageHeightPt : 0;
-    const effectiveFontSize = pageWidthPt ? fitFontSize({
-      value: field.value || "",
-      fontSize: field.fontSize,
-      autoShrink: field.autoShrink,
-      fieldWidthPt,
-      fieldHeightPt,
-      measure: (t, s) => measureTextWidth(t, s, {
-        fontFamily: field.fontFamily,
-        bold: field.bold,
-        italic: field.italic,
-        letterSpacing: field.letterSpacing
-      })
-    }) : field.fontSize;
     const fontStyle = {
-      fontSize: `${effectiveFontSize}pt`,
       letterSpacing: field.letterSpacing ? `${field.letterSpacing}pt` : void 0,
       lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0,
       ...getCssTextStyle(field)
@@ -2978,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))
@@ -2987,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,