@pdfme/schemas 5.5.9 → 5.5.10-dev.125

package/package.json

@@ -1,99 +1,83 @@
 {
   "name": "@pdfme/schemas",
-  "version": "5.5.9",
-  "sideEffects": false,
-  "author": "hand-dot",
-  "license": "MIT",
+  "version": "5.5.10-dev.125",
+  "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
   "keywords": [
     "pdf",
-    "pdf-generation",
     "pdf-designer",
+    "pdf-generation",
     "pdf-viewer",
-    "typescript",
-    "react"
+    "react",
+    "typescript"
   ],
-  "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
   "homepage": "https://pdfme.com",
+  "bugs": {
+    "url": "https://github.com/pdfme/pdfme/issues"
+  },
+  "license": "MIT",
+  "author": "hand-dot",
   "repository": {
     "type": "git",
     "url": "git@github.com:pdfme/pdfme.git"
   },
-  "bugs": {
-    "url": "https://github.com/pdfme/pdfme/issues"
-  },
-  "main": "dist/cjs/src/index.js",
-  "module": "dist/esm/src/index.js",
-  "types": "dist/types/src/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "node": "./dist/node/src/index.js",
-        "default": "./dist/esm/src/index.js"
-      },
-      "require": "./dist/cjs/src/index.js",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./builtins": {
+      "types": "./dist/builtins.d.ts",
+      "import": "./dist/builtins.js",
+      "default": "./dist/builtins.js"
+    },
+    "./tables": {
+      "types": "./dist/tables.d.ts",
+      "import": "./dist/tables.js",
+      "default": "./dist/tables.js"
     },
     "./utils": {
-      "import": {
-        "node": "./dist/node/src/utils.js",
-        "default": "./dist/esm/src/utils.js"
-      },
-      "require": "./dist/cjs/src/utils.js",
-      "types": "./dist/types/src/utils.d.ts"
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js",
+      "default": "./dist/utils.js"
     }
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
-    "dev": "tsc -p tsconfig.esm.json -w",
-    "build": "run-p build:cjs build:esm build:node",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "build:node": "tsc -p tsconfig.node.json",
+    "dev": "vite build --watch",
+    "build": "vite build && tsc -p tsconfig.build.json",
     "clean": "rimraf dist",
-    "lint": "eslint --ext .ts src --config eslint.config.mjs",
-    "test": "jest",
-    "prune": "ts-prune src",
-    "prettier": "prettier --write 'src/**/*.ts'"
+    "lint": "vp lint -c ../../.oxlintrc.json src",
+    "fmt": "vp fmt -c ../../.oxfmtrc.json src --write",
+    "test": "vitest run --config ../../vitest.config.ts"
   },
   "dependencies": {
     "@pdfme/pdf-lib": "*",
     "air-datepicker": "^3.6.0",
-    "bwip-js": "^4.8.0",
+    "bwip-js": "^4.9.0",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.3.3",
     "fontkit": "^2.0.2",
-    "dompurify": "^3.3.1",
-    "lucide": "^0.575.0"
+    "lucide": "^0.577.0",
+    "signature_pad": "^4.2.0"
   },
   "devDependencies": {
     "@pdfme/common": "*",
-    "@types/dompurify": "^3.2.0",
     "@types/bwip-js": "^3.2.1",
-    "@types/fontkit": "^2.0.8",
+    "@types/fontkit": "^2.0.9",
     "@types/pngjs": "^6.0.2",
+    "csstype": "^3.2.3",
     "jsqr": "^1.4.0",
     "pngjs": "^7.0.0"
   },
   "peerDependencies": {
     "@pdfme/common": "latest"
-  },
-  "jest": {
-    "resolver": "ts-jest-resolver",
-    "moduleFileExtensions": [
-      "js",
-      "ts"
-    ],
-    "transform": {
-      "^.+\\.ts?$": [
-        "ts-jest",
-        {
-          "tsconfig": "tsconfig.esm.json"
-        }
-      ]
-    },
-    "testMatch": [
-      "**/*.test.ts"
-    ]
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

package/src/barcodes/helper.ts

@@ -55,7 +55,7 @@ export const validateBarcodeInput = (type: BarcodeTypes, input: string) => {
   if (type === 'code39') {
     // For Code39: Valid characters are digits (0-9), uppercase alphabets (A-Z),
     // symbols (-, ., $, /, +, %), and space.
-    const regexp = /^(\d|[A-Z]|\-|\.|\$|\/|\+|\%|\s)+$/;
+    const regexp = /^(\d|[A-Z]|[-.$/+%]|\s)+$/;
     return regexp.test(input);
   }
   if (type === 'code128') {
@@ -68,7 +68,7 @@ export const validateBarcodeInput = (type: BarcodeTypes, input: string) => {
   if (type === 'nw7') {
     // For NW-7: Valid characters are digits (0-9) and symbols (-, ., $, :, /, +).
     // The first and last characters must be one of the alphabets A-D (start/stop codes).
-    const regexp = /^[A-Da-d]([0-9\-\.\$\:\/\+])+[A-Da-d]$/;
+    const regexp = /^[A-Da-d]([0-9.$:/+-])+[A-Da-d]$/;
     return regexp.test(input);
   }
   if (type === 'itf14') {

package/src/barcodes/types.ts

@@ -1,12 +1,12 @@
 import { Schema } from '@pdfme/common';
 import { BARCODE_TYPES } from './constants.js';
 
-export interface BarcodeSchema extends Schema {
+export type BarcodeSchema = Schema & {
   type: (typeof BARCODE_TYPES)[number];
   backgroundColor: string;
   barColor: string;
   textColor?: string;
   includetext?: boolean;
-}
+};
 
 export type BarcodeTypes = (typeof BARCODE_TYPES)[number];

package/src/builtins.ts

@@ -0,0 +1,8 @@
+import text from './text/index.js';
+
+// The default built-in plugin surface is intentionally limited to text.
+// Generator/UI consumers that need image, barcode, table, or other schema types
+// must import and pass those plugins explicitly from `@pdfme/schemas`.
+const builtInPlugins = { Text: text };
+
+export { builtInPlugins };

package/src/date/helper.ts

@@ -70,43 +70,55 @@ interface Locale {
   formatLocale: dateFns.Locale;
 }
 
+const normalizeAdLocale = (
+  locale: AirDatepickerLocale | { default: AirDatepickerLocale },
+): AirDatepickerLocale => {
+  // Air Datepicker locales can arrive as either the locale object itself or as an
+  // ESM default export shim when bundlers interop with the package's CJS build.
+  return 'default' in locale ? locale.default : locale;
+};
+
 const LOCALE_MAP: Record<string, Locale> = {
-  ar: { label: 'Arabic', adLocale: localeAr, formatLocale: dateFns.ar },
-  bg: { label: 'Bulgarian', adLocale: localeBg, formatLocale: dateFns.bg },
-  ca: { label: 'Catalan', adLocale: localeCa, formatLocale: dateFns.ca },
-  cs: { label: 'Czech', adLocale: localeCs, formatLocale: dateFns.cs },
-  da: { label: 'Danish', adLocale: localeDa, formatLocale: dateFns.da },
-  de: { label: 'German', adLocale: localeDe, formatLocale: dateFns.de },
-  el: { label: 'Greek', adLocale: localeEl, formatLocale: dateFns.el },
-  en: { label: 'English', adLocale: localeEn, formatLocale: dateFns.enUS },
-  es: { label: 'Spanish', adLocale: localeEs, formatLocale: dateFns.es },
-  eu: { label: 'Basque', adLocale: localeEu, formatLocale: dateFns.eu },
-  fi: { label: 'Finnish', adLocale: localeFi, formatLocale: dateFns.fi },
-  fr: { label: 'French', adLocale: localeFr, formatLocale: dateFns.fr },
-  hr: { label: 'Croatian', adLocale: localeHr, formatLocale: dateFns.hr },
-  hu: { label: 'Hungarian', adLocale: localeHu, formatLocale: dateFns.hu },
-  id: { label: 'Indonesian', adLocale: localeId, formatLocale: dateFns.id },
-  it: { label: 'Italian', adLocale: localeIt, formatLocale: dateFns.it },
-  ja: { label: 'Japanese', adLocale: localeJa, formatLocale: dateFns.ja },
-  ko: { label: 'Korean', adLocale: localeKo, formatLocale: dateFns.ko },
-  nb: { label: 'Norwegian Bokmål', adLocale: localeNb, formatLocale: dateFns.nb },
-  nl: { label: 'Dutch', adLocale: localeNl, formatLocale: dateFns.nl },
-  pl: { label: 'Polish', adLocale: localePl, formatLocale: dateFns.pl },
-  'pt-Br': { label: 'Portuguese', adLocale: localePtBR, formatLocale: dateFns.ptBR },
-  pt: { label: 'Portuguese', adLocale: localePt, formatLocale: dateFns.pt },
-  ro: { label: 'Romanian', adLocale: localeRo, formatLocale: dateFns.ro },
-  ru: { label: 'Russian', adLocale: localeRu, formatLocale: dateFns.ru },
-  si: { label: 'Sinhala', adLocale: localeSi, formatLocale: dateFns.enUS },
-  sk: { label: 'Slovak', adLocale: localeSk, formatLocale: dateFns.sk },
-  sl: { label: 'Slovenian', adLocale: localeSl, formatLocale: dateFns.sl },
-  sv: { label: 'Swedish', adLocale: localeSv, formatLocale: dateFns.sv },
-  th: { label: 'Thai', adLocale: localeTh, formatLocale: dateFns.th },
-  tr: { label: 'Turkish', adLocale: localeTr, formatLocale: dateFns.tr },
-  uk: { label: 'Ukrainian', adLocale: localeUk, formatLocale: dateFns.uk },
-  zh: { label: 'Chinese', adLocale: localeZh, formatLocale: dateFns.zhCN },
+  ar: { label: 'Arabic', adLocale: normalizeAdLocale(localeAr), formatLocale: dateFns.ar },
+  bg: { label: 'Bulgarian', adLocale: normalizeAdLocale(localeBg), formatLocale: dateFns.bg },
+  ca: { label: 'Catalan', adLocale: normalizeAdLocale(localeCa), formatLocale: dateFns.ca },
+  cs: { label: 'Czech', adLocale: normalizeAdLocale(localeCs), formatLocale: dateFns.cs },
+  da: { label: 'Danish', adLocale: normalizeAdLocale(localeDa), formatLocale: dateFns.da },
+  de: { label: 'German', adLocale: normalizeAdLocale(localeDe), formatLocale: dateFns.de },
+  el: { label: 'Greek', adLocale: normalizeAdLocale(localeEl), formatLocale: dateFns.el },
+  en: { label: 'English', adLocale: normalizeAdLocale(localeEn), formatLocale: dateFns.enUS },
+  es: { label: 'Spanish', adLocale: normalizeAdLocale(localeEs), formatLocale: dateFns.es },
+  eu: { label: 'Basque', adLocale: normalizeAdLocale(localeEu), formatLocale: dateFns.eu },
+  fi: { label: 'Finnish', adLocale: normalizeAdLocale(localeFi), formatLocale: dateFns.fi },
+  fr: { label: 'French', adLocale: normalizeAdLocale(localeFr), formatLocale: dateFns.fr },
+  hr: { label: 'Croatian', adLocale: normalizeAdLocale(localeHr), formatLocale: dateFns.hr },
+  hu: { label: 'Hungarian', adLocale: normalizeAdLocale(localeHu), formatLocale: dateFns.hu },
+  id: { label: 'Indonesian', adLocale: normalizeAdLocale(localeId), formatLocale: dateFns.id },
+  it: { label: 'Italian', adLocale: normalizeAdLocale(localeIt), formatLocale: dateFns.it },
+  ja: { label: 'Japanese', adLocale: normalizeAdLocale(localeJa), formatLocale: dateFns.ja },
+  ko: { label: 'Korean', adLocale: normalizeAdLocale(localeKo), formatLocale: dateFns.ko },
+  nb: { label: 'Norwegian Bokmål', adLocale: normalizeAdLocale(localeNb), formatLocale: dateFns.nb },
+  nl: { label: 'Dutch', adLocale: normalizeAdLocale(localeNl), formatLocale: dateFns.nl },
+  pl: { label: 'Polish', adLocale: normalizeAdLocale(localePl), formatLocale: dateFns.pl },
+  'pt-Br': {
+    label: 'Portuguese',
+    adLocale: normalizeAdLocale(localePtBR),
+    formatLocale: dateFns.ptBR,
+  },
+  pt: { label: 'Portuguese', adLocale: normalizeAdLocale(localePt), formatLocale: dateFns.pt },
+  ro: { label: 'Romanian', adLocale: normalizeAdLocale(localeRo), formatLocale: dateFns.ro },
+  ru: { label: 'Russian', adLocale: normalizeAdLocale(localeRu), formatLocale: dateFns.ru },
+  si: { label: 'Sinhala', adLocale: normalizeAdLocale(localeSi), formatLocale: dateFns.enUS },
+  sk: { label: 'Slovak', adLocale: normalizeAdLocale(localeSk), formatLocale: dateFns.sk },
+  sl: { label: 'Slovenian', adLocale: normalizeAdLocale(localeSl), formatLocale: dateFns.sl },
+  sv: { label: 'Swedish', adLocale: normalizeAdLocale(localeSv), formatLocale: dateFns.sv },
+  th: { label: 'Thai', adLocale: normalizeAdLocale(localeTh), formatLocale: dateFns.th },
+  tr: { label: 'Turkish', adLocale: normalizeAdLocale(localeTr), formatLocale: dateFns.tr },
+  uk: { label: 'Ukrainian', adLocale: normalizeAdLocale(localeUk), formatLocale: dateFns.uk },
+  zh: { label: 'Chinese', adLocale: normalizeAdLocale(localeZh), formatLocale: dateFns.zhCN },
 };
 
-const getAirDatepickerLocale = (locale: string) => {
+export const getAirDatepickerLocale = (locale: string) => {
   const data = LOCALE_MAP[locale];
   if (!data) {
     throw new Error(`Unsupported locale: ${locale}`);
@@ -151,7 +163,7 @@ const strDateToDate = (strDate: string, type: PickerType): Date => {
   return new Date(strDate);
 };
 
-const getFormat = (type: PickerType, locale: Locale): string => {
+export const getFormat = (type: PickerType, locale: Locale): string => {
   switch (type) {
     case 'date': {
       return locale.adLocale.dateFormat;
@@ -165,14 +177,49 @@ const getFormat = (type: PickerType, locale: Locale): string => {
   }
 };
 
-const getFmtValue = (
+export const isValidDateFormat = (
+  formatString: string | undefined,
+  locale: Locale,
+): formatString is string => {
+  if (typeof formatString !== 'string') {
+    return false;
+  }
+
+  const normalizedFormat = formatString.trim();
+  if (!normalizedFormat || normalizedFormat === 'undefined') {
+    return false;
+  }
+
+  try {
+    format(new Date(0), normalizedFormat, {
+      locale: locale.formatLocale,
+    });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const getSafeFormat = (
+  type: PickerType,
+  schema: Pick<DateSchema, 'format'>,
+  locale: Locale,
+): string => {
+  return isValidDateFormat(schema.format, locale)
+    ? schema.format.trim()
+    : getFormat(type, locale);
+};
+
+export const getFmtValue = (
   value: string,
   type: PickerType,
   schema: DateSchema,
   locale: Locale,
 ): string => {
+  const formatString = getSafeFormat(type, schema, locale);
+
   return value
-    ? format(strDateToDate(value, type), schema.format, {
+    ? format(strDateToDate(value, type), formatString, {
         locale: locale.formatLocale,
       })
     : '';
@@ -204,6 +251,7 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
       const { schema, value, onChange, rootElement, mode, options, i18n } = arg;
 
       const locale = getAirDatepickerLocale(schema.locale || options.lang || defaultLocale);
+      const formatString = getSafeFormat(type, schema, locale);
 
       const textElement = document.createElement('div');
       const textElementStyle: CSS.Properties = {
@@ -270,14 +318,14 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
         locale: locale.adLocale,
         selectedDates: value.trim() ? [strDateToDate(value, type)] : [],
         dateFormat: (date: AirDatepickerDate) =>
-          format(date, schema.format, { locale: locale.formatLocale }),
+          format(date, formatString, { locale: locale.formatLocale }),
         timepicker: type !== 'date',
         onlyTimepicker: type === 'time',
         isMobile: window.innerWidth < 768,
         buttons: adButtons,
         position({ $datepicker, $target, $pointer, done }) {
           $datepicker.style.position = 'fixed';
-          const offset = 5; 
+          const offset = 5;
           const scrollY = window.scrollY;
           const scrollX = window.scrollX;
 
@@ -291,29 +339,29 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
           const showAbove = spaceBelow < dpHeight + offset && spaceAbove > dpHeight;
 
           let top = showAbove
-              ? targetRect.top + scrollY - dpHeight - offset
-              : targetRect.bottom + scrollY + offset;
+            ? targetRect.top + scrollY - dpHeight - offset
+            : targetRect.bottom + scrollY + offset;
 
           let left = targetRect.left + scrollX;
 
           if (left + dpWidth > window.innerWidth) {
-              left = window.innerWidth - dpWidth - 10;
+            left = window.innerWidth - dpWidth - 10;
           }
 
           $datepicker.style.position = 'absolute';
           $datepicker.style.top = `${top}px`;
           $datepicker.style.left = `${left}px`;
           if ($pointer) {
-              $pointer.style.display = 'block';
-              $pointer.style.position = 'absolute';
-              $pointer.style.left = '10px'; 
-              $pointer.style.top = showAbove ? 'calc(100% - 5px)' : '-5px';
-              $pointer.style.transform = showAbove ? 'rotate(135deg)' : 'rotate(-45deg)';
+            $pointer.style.display = 'block';
+            $pointer.style.position = 'absolute';
+            $pointer.style.left = '10px';
+            $pointer.style.top = showAbove ? 'calc(100% - 5px)' : '-5px';
+            $pointer.style.transform = showAbove ? 'rotate(135deg)' : 'rotate(-45deg)';
           }
           return function completeHide() {
-              done();
+            done();
           };
-      },
+        },
         onSelect: ({ datepicker }: { datepicker: AirDatepickerInstance }) => {
           if (type === 'date') {
             commitChange(datepicker.selectedDates.length ? datepicker.selectedDates[0] : null);
@@ -355,19 +403,27 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
         const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
         const fontNames = Object.keys(font);
         const fallbackFontName = getFallbackFontName(font);
+        const activeDateSchema = activeSchema as { locale?: string; format?: string };
 
         const locale = getAirDatepickerLocale(
-          (activeSchema as { locale?: string }).locale || options.lang || defaultLocale,
+          activeDateSchema.locale || options.lang || defaultLocale,
         );
+        const defaultFormat = getFormat(type, locale);
+        const safeFormat = getSafeFormat(
+          type,
+          activeDateSchema as Pick<DateSchema, 'format'>,
+          locale,
+        );
+        const schemaChanges = [];
 
-        if (
-          (activeSchema as { locale?: string }).locale === undefined &&
-          (activeSchema as { locale?: string }).locale !== options.lang
-        ) {
-          changeSchemas([
-            { schemaId: activeSchema.id, key: 'locale', value: options.lang },
-            { schemaId: activeSchema.id, key: 'format', value: getFormat(type, locale) },
-          ]);
+        if (activeDateSchema.locale === undefined && activeDateSchema.locale !== options.lang) {
+          schemaChanges.push({ schemaId: activeSchema.id, key: 'locale', value: options.lang });
+        }
+        if (activeDateSchema.format !== safeFormat) {
+          schemaChanges.push({ schemaId: activeSchema.id, key: 'format', value: safeFormat });
+        }
+        if (schemaChanges.length > 0) {
+          changeSchemas(schemaChanges);
         }
 
         const formatter = getExtraFormatterSchema(i18n);
@@ -375,16 +431,8 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
           (button) => button.key === Formatter.ALIGNMENT,
         );
 
-        const validateDateTimeFormat = (_rule: unknown, formatString: string): boolean => {
-          try {
-            format('Thu Jan 01 1970 00:00:00 GMT+0000', formatString, {
-              locale: locale.formatLocale,
-            });
-            return true;
-          } catch {
-            return false;
-          }
-        };
+        const validateDateTimeFormat = (_rule: unknown, formatString: string): boolean =>
+          isValidDateFormat(formatString, locale);
 
         const localeOptions = Object.keys(LOCALE_MAP).map((lc) => ({
           label: `${lc} (${LOCALE_MAP[lc].label})`,
@@ -395,8 +443,8 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
           format: {
             title: i18n('schemas.date.format'),
             type: 'string',
-            default: getFormat(type, locale),
-            placeholder: getFormat(type, locale),
+            default: safeFormat,
+            placeholder: defaultFormat,
             rules: [
               {
                 validator: validateDateTimeFormat,

package/src/graphics/image.ts

@@ -1,4 +1,3 @@
-import type { ChangeEvent } from 'react';
 import type { PDFImage } from '@pdfme/pdf-lib';
 import type { Plugin } from '@pdfme/common';
 import type { Schema } from '@pdfme/common';
@@ -165,8 +164,9 @@ const imageSchema: Plugin<ImageSchema> = {
       input.type = 'file';
       input.accept = 'image/jpeg, image/png';
       input.addEventListener('change', (event: Event) => {
-        const changeEvent = event as unknown as ChangeEvent<HTMLInputElement>;
-        readFile(changeEvent.target.files)
+        const target = event.target;
+        const files = target instanceof HTMLInputElement ? target.files : null;
+        readFile(files)
           .then((result) => {
             if (onChange) onChange({ key: 'content', value: result as string });
           })

package/src/graphics/signature.ts

@@ -0,0 +1,136 @@
+import type { Plugin, Schema } from '@pdfme/common';
+import { ZOOM } from '@pdfme/common';
+import image from './image.js';
+
+type SignatureSchema = Schema;
+
+const createLoadErrorBadge = (message: string) => {
+  const badge = document.createElement('div');
+  badge.setAttribute('role', 'alert');
+  badge.textContent = message;
+  badge.style.position = 'absolute';
+  badge.style.left = '4px';
+  badge.style.right = '4px';
+  badge.style.bottom = '4px';
+  badge.style.zIndex = '2';
+  badge.style.padding = '4px 6px';
+  badge.style.borderRadius = '4px';
+  badge.style.background = 'rgba(176, 0, 32, 0.92)';
+  badge.style.color = '#ffffff';
+  badge.style.fontSize = '11px';
+  badge.style.lineHeight = '1.25';
+  badge.style.pointerEvents = 'none';
+  return badge;
+};
+
+const getEffectiveScale = (element: HTMLElement | null) => {
+  let scale = 1;
+  while (element && element !== document.body) {
+    const style = window.getComputedStyle(element);
+    const transform = style.transform;
+    if (transform && transform !== 'none') {
+      const localScale = parseFloat(transform.match(/matrix\((.+)\)/)?.[1].split(', ')[3] || '1');
+      scale *= localScale;
+    }
+    element = element.parentElement;
+  }
+  return scale;
+};
+
+const signature: Plugin<SignatureSchema> = {
+  ui: async (arg) => {
+    const { schema, value, onChange, rootElement, mode, i18n } = arg;
+    const { default: SignaturePad } = await import('signature_pad');
+
+    const canvas = document.createElement('canvas');
+    canvas.width = schema.width * ZOOM;
+    canvas.height = schema.height * ZOOM;
+
+    const context = canvas.getContext('2d');
+    if (context) {
+      const resetScale = 1 / getEffectiveScale(rootElement);
+      context.scale(resetScale, resetScale);
+
+      const signaturePad = new SignaturePad(canvas);
+      const loadErrorMessage =
+        i18n('signature.invalidData') || 'Saved signature could not be loaded.';
+      let loadErrorBadge: HTMLDivElement | null = null;
+      const clearLoadError = () => {
+        loadErrorBadge?.remove();
+        loadErrorBadge = null;
+      };
+      const showLoadError = () => {
+        if (loadErrorBadge) {
+          return;
+        }
+        loadErrorBadge = createLoadErrorBadge(loadErrorMessage);
+        rootElement.appendChild(loadErrorBadge);
+      };
+      const handleEndStroke = () => {
+        clearLoadError();
+        const data = signaturePad.toDataURL('image/png');
+        if (onChange && data) {
+          onChange({ key: 'content', value: data });
+        }
+      };
+
+      try {
+        if (value) {
+          signaturePad.fromDataURL(value, { ratio: resetScale });
+        } else {
+          signaturePad.clear();
+        }
+      } catch (error) {
+        signaturePad.clear();
+        showLoadError();
+        console.error('[@pdfme/schemas] Failed to restore saved signature data.', error);
+      }
+
+      if (mode === 'viewer' || (mode === 'form' && schema.readOnly)) {
+        signaturePad.off();
+      } else {
+        signaturePad.on();
+        const clearButton = document.createElement('button');
+        const handleClear = () => {
+          clearLoadError();
+          if (onChange) {
+            onChange({ key: 'content', value: '' });
+          }
+        };
+        const cleanup = () => {
+          clearLoadError();
+          signaturePad.off();
+          signaturePad.removeEventListener('endStroke', handleEndStroke);
+          clearButton.removeEventListener('click', handleClear);
+          clearButton.remove();
+          rootElement.removeEventListener('beforeRemove', cleanup);
+        };
+
+        rootElement.addEventListener('beforeRemove', cleanup);
+        clearButton.type = 'button';
+        clearButton.style.position = 'absolute';
+        clearButton.style.zIndex = '1';
+        clearButton.textContent = i18n('signature.clear') || 'x';
+        clearButton.addEventListener('click', handleClear);
+        rootElement.appendChild(clearButton);
+        signaturePad.addEventListener('endStroke', handleEndStroke);
+      }
+    }
+
+    rootElement.appendChild(canvas);
+  },
+  pdf: image.pdf,
+  propPanel: {
+    schema: {},
+    defaultSchema: {
+      name: '',
+      type: 'signature',
+      content: '',
+      position: { x: 0, y: 0 },
+      width: 62.5,
+      height: 37.5,
+    },
+  },
+};
+
+export default signature;

package/src/index.ts

@@ -1,6 +1,7 @@
 import multiVariableText from './multiVariableText/index.js';
 import text from './text/index.js';
 import image from './graphics/image.js';
+import signature from './graphics/signature.js';
 import svg from './graphics/svg.js';
 import barcodes from './barcodes/index.js';
 import line from './shapes/line.js';
@@ -12,15 +13,14 @@ import time from './date/time.js';
 import select from './select/index.js';
 import radioGroup from './radioGroup/index.js';
 import checkbox from './checkbox/index.js';
-
-const builtInPlugins = { Text: text };
+export { builtInPlugins } from './builtins.js';
 
 export {
-  builtInPlugins,
   // schemas
   text,
   multiVariableText,
   image,
+  signature,
   svg,
   table,
   barcodes,
@@ -36,4 +36,4 @@ export {
 };
 
 // Export utility functions
-export { getDynamicHeightsForTable } from './tables/dynamicTemplate.js';
+export { getDynamicHeightsForTable } from './tables.js';