@unlev/exeq 0.4.1 → 0.5.0

package/dist/index.mjs

@@ -56,6 +56,17 @@ var CSS_FONT_MAP = {
 function getCssFontFamily(fontFamily) {
   return fontFamily ? CSS_FONT_MAP[fontFamily] : void 0;
 }
+function getCssTextStyle(field) {
+  const decorations = [];
+  if (field.underline) decorations.push("underline");
+  if (field.strikethrough) decorations.push("line-through");
+  return {
+    fontFamily: getCssFontFamily(field.fontFamily),
+    fontWeight: field.bold ? "bold" : void 0,
+    fontStyle: field.italic ? "italic" : void 0,
+    textDecorationLine: decorations.length ? decorations.join(" ") : void 0
+  };
+}
 function sortFieldsByPosition(fields) {
   return [...fields].sort((a, b) => {
     if (a.page !== b.page) return a.page - b.page;
@@ -711,6 +722,15 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete, prefillCon
         /* @__PURE__ */ jsx2("label", { children: "Font Size (pt)" }),
         /* @__PURE__ */ jsx2("input", { type: "number", min: "6", max: "72", value: field.fontSize, onChange: (e) => onUpdate(field.id, { fontSize: Number(e.target.value) }) })
       ] }),
+      isText && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+        /* @__PURE__ */ jsx2("label", { children: "Formatting" }),
+        /* @__PURE__ */ jsxs2("div", { className: "text-format-buttons", children: [
+          /* @__PURE__ */ jsx2("button", { type: "button", className: `text-format-btn ${field.bold ? "active" : ""}`, style: { fontWeight: "bold" }, title: "Bold", onClick: () => onUpdate(field.id, { bold: !field.bold }), children: "B" }),
+          /* @__PURE__ */ jsx2("button", { type: "button", className: `text-format-btn ${field.italic ? "active" : ""}`, style: { fontStyle: "italic" }, title: "Italic", onClick: () => onUpdate(field.id, { italic: !field.italic }), children: "I" }),
+          /* @__PURE__ */ jsx2("button", { type: "button", className: `text-format-btn ${field.underline ? "active" : ""}`, style: { textDecorationLine: "underline" }, title: "Underline", onClick: () => onUpdate(field.id, { underline: !field.underline }), children: "U" }),
+          /* @__PURE__ */ jsx2("button", { type: "button", className: `text-format-btn ${field.strikethrough ? "active" : ""}`, style: { textDecorationLine: "line-through" }, title: "Strikethrough", onClick: () => onUpdate(field.id, { strikethrough: !field.strikethrough }), children: "S" })
+        ] })
+      ] }),
       isText && /* @__PURE__ */ jsxs2("div", { className: "panel-field-row", children: [
         /* @__PURE__ */ jsxs2("div", { className: "panel-field panel-field-half", children: [
           /* @__PURE__ */ jsx2("label", { children: "Letter Spacing" }),
@@ -783,6 +803,10 @@ function BulkPropertyPanel({ fields, signerRoles, onUpdate, onAlign, onDelete })
   const sharedInkColor = sharedValue(fields.map((f) => f.inkColor || "#000000"));
   const sharedLetterSpacing = sharedValue(fields.map((f) => f.letterSpacing || 0));
   const sharedLineHeight = sharedValue(fields.map((f) => f.lineHeight || 1.2));
+  const allBold = fields.every((f) => f.bold);
+  const allItalic = fields.every((f) => f.italic);
+  const allUnderline = fields.every((f) => f.underline);
+  const allStrike = fields.every((f) => f.strikethrough);
   return /* @__PURE__ */ jsxs2("div", { className: "field-property-panel", children: [
     /* @__PURE__ */ jsxs2("div", { className: "panel-header", children: [
       /* @__PURE__ */ jsxs2("h3", { children: [
@@ -897,6 +921,15 @@ function BulkPropertyPanel({ fields, signerRoles, onUpdate, onAlign, onDelete })
         }
       )
     ] }),
+    hasText && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      /* @__PURE__ */ jsx2("label", { children: "Formatting" }),
+      /* @__PURE__ */ jsxs2("div", { className: "text-format-buttons", children: [
+        /* @__PURE__ */ jsx2("button", { type: "button", className: `text-format-btn ${allBold ? "active" : ""}`, style: { fontWeight: "bold" }, title: "Bold", onClick: () => onUpdate({ bold: !allBold }), children: "B" }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: `text-format-btn ${allItalic ? "active" : ""}`, style: { fontStyle: "italic" }, title: "Italic", onClick: () => onUpdate({ italic: !allItalic }), children: "I" }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: `text-format-btn ${allUnderline ? "active" : ""}`, style: { textDecorationLine: "underline" }, title: "Underline", onClick: () => onUpdate({ underline: !allUnderline }), children: "U" }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: `text-format-btn ${allStrike ? "active" : ""}`, style: { textDecorationLine: "line-through" }, title: "Strikethrough", onClick: () => onUpdate({ strikethrough: !allStrike }), children: "S" })
+      ] })
+    ] }),
     hasText && /* @__PURE__ */ jsxs2("div", { className: "panel-field-row", children: [
       /* @__PURE__ */ jsxs2("div", { className: "panel-field panel-field-half", children: [
         /* @__PURE__ */ jsx2("label", { children: "Letter Spacing" }),
@@ -1679,7 +1712,6 @@ function DesignerView({
       }
     }
     const inkColor = field.inkColor || "#000000";
-    const cssFontFamily = getCssFontFamily(field.fontFamily);
     return /* @__PURE__ */ jsx4(
       "div",
       {
@@ -1687,9 +1719,9 @@ function DesignerView({
         style: {
           color: field.value ? inkColor : void 0,
           fontSize: `${field.fontSize}pt`,
-          fontFamily: cssFontFamily,
           letterSpacing: field.letterSpacing ? `${field.letterSpacing}pt` : void 0,
-          lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0
+          lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0,
+          ...getCssTextStyle(field)
         },
         children: field.value || field.placeholder
       }
@@ -1704,7 +1736,6 @@ function DesignerView({
   ] }) : null;
   return /* @__PURE__ */ jsxs4("div", { className: "designer-layout", children: [
     headerPortalRef?.current && headerButtons && createPortal(headerButtons, headerPortalRef.current),
-    !hideHeader && !headerPortalRef && /* @__PURE__ */ jsx4("div", { className: "designer-header", children: /* @__PURE__ */ jsx4("div", { className: "designer-header-right", children: headerButtons }) }),
     /* @__PURE__ */ jsxs4("div", { className: "designer-body", children: [
       pages.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "designer-palette", children: [
         /* @__PURE__ */ jsx4("div", { className: "palette-heading", children: "New Field Role" }),
@@ -1818,6 +1849,7 @@ function DesignerView({
       pages.length > 0 && /* @__PURE__ */ jsxs4(Fragment2, { children: [
         /* @__PURE__ */ jsx4("div", { className: "panel-resize-handle", onMouseDown: handleResizeStart }),
         /* @__PURE__ */ jsxs4("div", { className: "designer-panel", style: { width: panelWidth }, children: [
+          !hideHeader && !headerPortalRef && headerButtons && /* @__PURE__ */ jsx4("div", { className: "designer-panel-actions", children: headerButtons }),
           /* @__PURE__ */ jsxs4("div", { className: "designer-panel-header", children: [
             /* @__PURE__ */ jsxs4("div", { className: "signer-role-indicator", children: [
               /* @__PURE__ */ jsx4("span", { className: "signer-role-indicator-label", children: "Editing as" }),
@@ -2150,11 +2182,19 @@ function resolveAllFormulas(fields, customTransforms) {
 }
 
 // src/utils/pdfFiller.ts
-var FONT_MAP = {
-  Helvetica: StandardFonts.Helvetica,
-  Courier: StandardFonts.Courier,
-  TimesRoman: StandardFonts.TimesRoman
+var FONT_VARIANTS = {
+  Helvetica: [StandardFonts.Helvetica, StandardFonts.HelveticaBold, StandardFonts.HelveticaOblique, StandardFonts.HelveticaBoldOblique],
+  Courier: [StandardFonts.Courier, StandardFonts.CourierBold, StandardFonts.CourierOblique, StandardFonts.CourierBoldOblique],
+  TimesRoman: [StandardFonts.TimesRoman, StandardFonts.TimesRomanBold, StandardFonts.TimesRomanItalic, StandardFonts.TimesRomanBoldItalic]
 };
+function resolveStandardFont(family, bold, italic) {
+  const variants = FONT_VARIANTS[family] || FONT_VARIANTS.Helvetica;
+  const idx = (bold ? 1 : 0) + (italic ? 2 : 0);
+  return variants[idx];
+}
+function fontKey(family, bold, italic) {
+  return `${family}|${bold ? "b" : ""}|${italic ? "i" : ""}`;
+}
 var US_LETTER = [612, 792];
 var US_LEGAL = [612, 1008];
 var A4 = [595.28, 841.89];
@@ -2229,7 +2269,7 @@ async function renderFieldsOnPages(pages, fields, getFont, getSignature) {
         page.drawImage(img, { x, y, width: w, height: h });
       }
     } else {
-      const font = await getFont(field.fontFamily || "Helvetica");
+      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;
@@ -2240,13 +2280,14 @@ async function renderFieldsOnPages(pages, fields, getFont, getSignature) {
           fontSize -= 0.5;
         }
       }
+      const textX = x + 2;
+      const baselineY = y + h * 0.3;
       if (spacing > 0) {
-        let cx = x + 2;
-        const cy = y + h * 0.3;
+        let cx = textX;
         for (const char of field.value) {
           page.drawText(char, {
             x: cx,
-            y: cy,
+            y: baselineY,
             size: fontSize,
             font,
             color: inkColor
@@ -2255,13 +2296,35 @@ async function renderFieldsOnPages(pages, fields, getFont, getSignature) {
         }
       } else {
         page.drawText(field.value, {
-          x: x + 2,
-          y: y + h * 0.3,
+          x: textX,
+          y: baselineY,
           size: fontSize,
           font,
           color: inkColor
         });
       }
+      if (field.underline || field.strikethrough) {
+        const textWidth = textWidthAtSize(field.value, fontSize);
+        const lineThickness = Math.max(0.5, fontSize * 0.06);
+        if (field.underline) {
+          const uy = baselineY - fontSize * 0.12;
+          page.drawLine({
+            start: { x: textX, y: uy },
+            end: { x: textX + textWidth, y: uy },
+            thickness: lineThickness,
+            color: inkColor
+          });
+        }
+        if (field.strikethrough) {
+          const sy = baselineY + fontSize * 0.3;
+          page.drawLine({
+            start: { x: textX, y: sy },
+            end: { x: textX + textWidth, y: sy },
+            thickness: lineThickness,
+            color: inkColor
+          });
+        }
+      }
     }
   }
 }
@@ -2275,18 +2338,19 @@ async function createPdfBuilder(defaults = {}) {
   const fontCache = /* @__PURE__ */ new Map();
   const embeddedPagesByUrl = /* @__PURE__ */ new Map();
   const signatureCache = /* @__PURE__ */ new Map();
-  async function getFont(family) {
-    let f = fontCache.get(family);
+  async function getFont(family, bold, italic) {
+    const key = fontKey(family, bold, italic);
+    let f = fontCache.get(key);
     if (!f) {
-      const stdName = FONT_MAP[family] || StandardFonts.Helvetica;
-      f = await doc.embedFont(stdName);
-      fontCache.set(family, f);
+      f = await doc.embedFont(resolveStandardFont(family, bold, italic));
+      fontCache.set(key, f);
     }
     return f;
   }
   async function ensureFonts(fields) {
-    const keys = new Set(fields.map((f) => f.fontFamily || "Helvetica"));
-    for (const k of keys) await getFont(k);
+    const keys = /* @__PURE__ */ new Map();
+    for (const f of fields) keys.set(fontKey(f.fontFamily || "Helvetica", f.bold, f.italic), f);
+    for (const f of keys.values()) await getFont(f.fontFamily || "Helvetica", f.bold, f.italic);
   }
   async function embedSource(source) {
     if (typeof source === "string") {
@@ -2763,7 +2827,7 @@ ${row.join(",")}`, "csv");
       fontSize: `${field.fontSize}pt`,
       letterSpacing: field.letterSpacing ? `${field.letterSpacing}pt` : void 0,
       lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0,
-      fontFamily: getCssFontFamily(field.fontFamily)
+      ...getCssTextStyle(field)
     };
     if (field.type === "dropdown" || field.options && field.options.length > 0) {
       return /* @__PURE__ */ jsxs6(