react-id-card-generator 1.0.0

package/dist/cjs/components/IDCardPreview.js

@@ -0,0 +1,168 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styleUtils = require('../utils/styleUtils.js');
+var qrUtils = require('../core/qrUtils.js');
+
+/**
+ * IDCardPreview - Interactive card preview component
+ *
+ * Renders an ID card with:
+ * - Field selection and highlighting
+ * - Resize handles for selected fields
+ * - Grid overlay for alignment
+ * - Dynamic field rendering based on type
+ *
+ * Used inside the designer for visual editing
+ */
+const IDCardPreview = ({ template, data, side, scale = 1, showGrid = false, onFieldSelect, selectedFieldId, editable = true, onFieldUpdate, }) => {
+    // Get only fields that belong to the current side
+    const fieldsToRender = react.useMemo(() => {
+        return template.fields.filter((field) => field.side === side);
+    }, [template.fields, side]);
+    // Get background for current side
+    const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;
+    // Render resize handles for selected field
+    const renderResizeHandles = (field) => {
+        if (field.id !== selectedFieldId || !editable)
+            return null;
+        const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
+        const handleStyle = {
+            position: 'absolute',
+            width: '8px',
+            height: '8px',
+            backgroundColor: '#2196F3',
+            border: '1px solid #fff',
+            borderRadius: '2px',
+            zIndex: 1000,
+        };
+        const positions = {
+            n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },
+            s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },
+            e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },
+            w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },
+            ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },
+            nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },
+            se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },
+            sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },
+        };
+        return handles.map((handle) => (jsxRuntime.jsx("div", { className: `resize-handle resize-handle-${handle}`, style: { ...handleStyle, ...positions[handle] }, "data-handle": handle }, handle)));
+    };
+    // Render a single field
+    const renderField = (field) => {
+        const posStyle = styleUtils.positionToStyle(field.position);
+        const fieldStyle = styleUtils.fieldStyleToCSS(field.style);
+        const isSelected = field.id === selectedFieldId;
+        const combinedStyle = {
+            ...posStyle,
+            ...fieldStyle,
+            zIndex: field.zIndex || 1,
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            cursor: editable ? 'move' : 'default',
+            outline: isSelected ? '2px solid #2196F3' : 'none',
+            outlineOffset: '1px',
+        };
+        const handleClick = (e) => {
+            e.stopPropagation();
+            onFieldSelect?.(field);
+        };
+        const value = data[field.fieldKey];
+        const content = (() => {
+            switch (field.type) {
+                case 'text':
+                    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [field.label && (jsxRuntime.jsx("span", { style: { fontSize: '0.75em', display: 'block', opacity: 0.7 }, children: field.label })), jsxRuntime.jsx("span", { children: String(value || field.placeholder || field.fieldKey) })] }));
+                case 'label':
+                    return jsxRuntime.jsx("span", { children: field.staticText || field.label || 'Label' });
+                case 'image':
+                    return value ? (jsxRuntime.jsx("img", { src: String(value), alt: field.label || 'Image', style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            objectPosition: 'center top',
+                        } })) : (jsxRuntime.jsxs("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: '#e0e0e0',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '10px',
+                            color: '#666',
+                            flexDirection: 'column',
+                        }, children: [jsxRuntime.jsx("span", { children: "\uD83D\uDCF7" }), jsxRuntime.jsx("span", { children: field.label || 'Photo' })] }));
+                case 'qrcode':
+                    const qrDataUrl = field.qrFields
+                        ? qrUtils.generateQrCodeFromFields(data, field.qrFields, 200)
+                        : '';
+                    return qrDataUrl ? (jsxRuntime.jsx("img", { src: qrDataUrl, alt: "QR Code", style: { width: '100%', height: '100%', objectFit: 'contain' } })) : (jsxRuntime.jsx("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: '#f0f0f0',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '10px',
+                            color: '#666',
+                            border: '1px dashed #ccc',
+                        }, children: "QR Code" }));
+                default:
+                    return null;
+            }
+        })();
+        return (jsxRuntime.jsxs("div", { id: `preview-${field.id}`, style: combinedStyle, onClick: handleClick, className: `preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`, children: [content, renderResizeHandles(field)] }, field.id));
+    };
+    // Card container style
+    const cardStyle = {
+        width: template.cardSize.width,
+        height: template.cardSize.height,
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',
+        border: '1px solid #ddd',
+        transform: `scale(${scale})`,
+        transformOrigin: 'top left',
+    };
+    // Grid overlay style
+    const gridStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundImage: showGrid
+            ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'
+            : 'none',
+        backgroundSize: '10px 10px',
+        pointerEvents: 'none',
+        zIndex: 999,
+    };
+    const handleContainerClick = () => {
+        onFieldSelect?.(null);
+    };
+    return (jsxRuntime.jsxs("div", { className: "idcard-preview-container", style: cardStyle, onClick: handleContainerClick, children: [backgroundImage && (jsxRuntime.jsx("img", { src: backgroundImage, alt: `${side} background`, style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    zIndex: 0,
+                    pointerEvents: 'none',
+                } })), fieldsToRender.map(renderField), showGrid && jsxRuntime.jsx("div", { style: gridStyle }), !backgroundImage && fieldsToRender.length === 0 && (jsxRuntime.jsxs("div", { style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    textAlign: 'center',
+                    color: '#999',
+                    fontSize: '14px',
+                }, children: [jsxRuntime.jsx("p", { children: "Upload a background image" }), jsxRuntime.jsx("p", { children: "and add fields to get started" })] }))] }));
+};
+
+exports.IDCardPreview = IDCardPreview;
+exports.default = IDCardPreview;
+//# sourceMappingURL=IDCardPreview.js.map

package/dist/cjs/components/IDCardPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDCardPreview.js","sources":["../../../src/components/IDCardPreview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\nimport type { IDCardPreviewProps, FieldMapping } from '../types';\r\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\r\nimport { generateQrCodeFromFields } from '../core/qrUtils';\r\n\r\n/**\r\n * IDCardPreview - Interactive card preview component\r\n * \r\n * Renders an ID card with:\r\n * - Field selection and highlighting\r\n * - Resize handles for selected fields\r\n * - Grid overlay for alignment\r\n * - Dynamic field rendering based on type\r\n * \r\n * Used inside the designer for visual editing\r\n */\r\nexport const IDCardPreview: React.FC<IDCardPreviewProps> = ({\r\n  template,\r\n  data,\r\n  side,\r\n  scale = 1,\r\n  showGrid = false,\r\n  onFieldSelect,\r\n  selectedFieldId,\r\n  editable = true,\r\n  onFieldUpdate,\r\n}: IDCardPreviewProps) => {\r\n  // Get only fields that belong to the current side\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render resize handles for selected field\r\n  const renderResizeHandles = (field: FieldMapping) => {\r\n    if (field.id !== selectedFieldId || !editable) return null;\r\n\r\n    const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\r\n    const handleStyle: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width: '8px',\r\n      height: '8px',\r\n      backgroundColor: '#2196F3',\r\n      border: '1px solid #fff',\r\n      borderRadius: '2px',\r\n      zIndex: 1000,\r\n    };\r\n\r\n    const positions: Record<string, React.CSSProperties> = {\r\n      n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },\r\n      s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },\r\n      e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },\r\n      w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },\r\n      ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },\r\n      nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },\r\n      se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },\r\n      sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },\r\n    };\r\n\r\n    return handles.map((handle) => (\r\n      <div\r\n        key={handle}\r\n        className={`resize-handle resize-handle-${handle}`}\r\n        style={{ ...handleStyle, ...positions[handle] }}\r\n        data-handle={handle}\r\n      />\r\n    ));\r\n  };\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    const fieldStyle = fieldStyleToCSS(field.style);\r\n    const isSelected = field.id === selectedFieldId;\r\n\r\n    const combinedStyle: React.CSSProperties = {\r\n      ...posStyle,\r\n      ...fieldStyle,\r\n      zIndex: field.zIndex || 1,\r\n      boxSizing: 'border-box',\r\n      overflow: 'hidden',\r\n      cursor: editable ? 'move' : 'default',\r\n      outline: isSelected ? '2px solid #2196F3' : 'none',\r\n      outlineOffset: '1px',\r\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onFieldSelect?.(field);\r\n    };\r\n\r\n    const value = data[field.fieldKey];\r\n\r\n    const content = (() => {\r\n      switch (field.type) {\r\n        case 'text':\r\n          return (\r\n            <>\r\n              {field.label && (\r\n                <span style={{ fontSize: '0.75em', display: 'block', opacity: 0.7 }}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span>{String(value || field.placeholder || field.fieldKey)}</span>\r\n            </>\r\n          );\r\n\r\n        case 'label':\r\n          return <span>{field.staticText || field.label || 'Label'}</span>;\r\n\r\n        case 'image':\r\n          return value ? (\r\n            <img\r\n              src={String(value)}\r\n              alt={field.label || 'Image'}\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                objectFit: 'cover',\r\n                objectPosition: 'center top',\r\n              }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#e0e0e0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                flexDirection: 'column',\r\n              }}\r\n            >\r\n              <span>📷</span>\r\n              <span>{field.label || 'Photo'}</span>\r\n            </div>\r\n          );\r\n\r\n        case 'qrcode':\r\n          const qrDataUrl = field.qrFields\r\n            ? generateQrCodeFromFields(data, field.qrFields, 200)\r\n            : '';\r\n\r\n          return qrDataUrl ? (\r\n            <img\r\n              src={qrDataUrl}\r\n              alt=\"QR Code\"\r\n              style={{ width: '100%', height: '100%', objectFit: 'contain' }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#f0f0f0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                border: '1px dashed #ccc',\r\n              }}\r\n            >\r\n              QR Code\r\n            </div>\r\n          );\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    })();\r\n\r\n    return (\r\n      <div\r\n        key={field.id}\r\n        id={`preview-${field.id}`}\r\n        style={combinedStyle}\r\n        onClick={handleClick}\r\n        className={`preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`}\r\n      >\r\n        {content}\r\n        {renderResizeHandles(field)}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: template.cardSize.width,\r\n    height: template.cardSize.height,\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',\r\n    border: '1px solid #ddd',\r\n    transform: `scale(${scale})`,\r\n    transformOrigin: 'top left',\r\n  };\r\n\r\n  // Grid overlay style\r\n  const gridStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backgroundImage: showGrid\r\n      ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'\r\n      : 'none',\r\n    backgroundSize: '10px 10px',\r\n    pointerEvents: 'none',\r\n    zIndex: 999,\r\n  };\r\n\r\n  const handleContainerClick = () => {\r\n    onFieldSelect?.(null);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"idcard-preview-container\"\r\n      style={cardStyle}\r\n      onClick={handleContainerClick}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: '100%',\r\n            height: '100%',\r\n            objectFit: 'cover',\r\n            zIndex: 0,\r\n            pointerEvents: 'none',\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n\r\n      {/* Grid overlay */}\r\n      {showGrid && <div style={gridStyle} />}\r\n\r\n      {/* Empty state */}\r\n      {!backgroundImage && fieldsToRender.length === 0 && (\r\n        <div\r\n          style={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            left: '50%',\r\n            transform: 'translate(-50%, -50%)',\r\n            textAlign: 'center',\r\n            color: '#999',\r\n            fontSize: '14px',\r\n          }}\r\n        >\r\n          <p>Upload a background image</p>\r\n          <p>and add fields to get started</p>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default IDCardPreview;\r\n"],"names":["useMemo","_jsx","positionToStyle","fieldStyleToCSS","_jsxs","generateQrCodeFromFields"],"mappings":"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"}

package/dist/cjs/core/exportUtils.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var html2canvas_esm = require('../node_modules/html2canvas/dist/html2canvas.esm.js');
+var jspdf_es_min = require('../node_modules/jspdf/dist/jspdf.es.min.js');
+var qrUtils = require('./qrUtils.js');
+
+// High-quality canvas rendering defaults
+const defaultCanvasOptions = {
+    scale: 10, // 10x resolution for crisp output
+    dpi: 1200,
+    imageTimeout: 15000,
+    letterRendering: true,
+    logging: false,
+    useCORS: true, // Allow cross-origin images
+    backgroundColor: null,
+};
+/**
+ * Capture a DOM element as a high-resolution canvas
+ * Uses html2canvas to convert the element to an image
+ * @returns Canvas and the original element, or null if not found
+ */
+async function captureElement(elementId, scale = 10) {
+    const element = document.getElementById(elementId);
+    if (!element)
+        return null;
+    const canvas = await html2canvas_esm(element, {
+        ...defaultCanvasOptions,
+        scale,
+    });
+    return { canvas, element };
+}
+/**
+ * Download ID card(s) as a PDF file
+ * Captures DOM elements and converts them to a multi-page PDF
+ * @param options - Configuration for PDF export
+ * @returns Export result with success status and any errors
+ */
+async function downloadIDCardAsPDF(options) {
+    try {
+        const { frontElementId = 'idcardfront', backElementId, filename = 'ID_Card', data, qrElementId, qrFields, scale = 10, } = options;
+        // Generate QR code if configured
+        if (qrElementId && data && qrFields && qrFields.length > 0) {
+            const qrData = {};
+            for (const field of qrFields) {
+                if (data[field] !== undefined) {
+                    qrData[field] = data[field];
+                }
+            }
+            qrUtils.setQrCodeOnElement(qrElementId, qrData, 200);
+        }
+        // Wait for QR code and any images to fully render
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const pages = [];
+        // Capture front
+        const frontCapture = await captureElement(frontElementId, scale);
+        if (frontCapture)
+            pages.push(frontCapture);
+        // Capture back if exists
+        if (backElementId) {
+            const backCapture = await captureElement(backElementId, scale);
+            if (backCapture)
+                pages.push(backCapture);
+        }
+        if (pages.length === 0) {
+            return { success: false, error: 'No elements found to capture' };
+        }
+        let pdf;
+        for (let i = 0; i < pages.length; i++) {
+            const { canvas, element } = pages[i];
+            const imgData = canvas.toDataURL('image/jpeg', 1.0);
+            // Calculate PDF dimensions
+            const pdfWidth = parseInt(element.style.width) * 0.264583 || 85;
+            const aspectRatio = canvas.height / canvas.width;
+            const pdfHeight = pdfWidth * aspectRatio;
+            const orientation = pdfWidth >= pdfHeight ? 'landscape' : 'portrait';
+            if (i === 0) {
+                pdf = new jspdf_es_min.default({
+                    unit: 'mm',
+                    format: [pdfWidth, pdfHeight],
+                    orientation,
+                });
+            }
+            else {
+                pdf.addPage([pdfWidth, pdfHeight], orientation);
+            }
+            pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
+        }
+        if (pdf) {
+            const blob = pdf.output('blob');
+            pdf.save(`${filename}.pdf`);
+            return { success: true, blob };
+        }
+        return { success: false, error: 'Failed to generate PDF' };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : 'Unknown error',
+        };
+    }
+}
+/**
+ * Download ID card as image (PNG or JPEG)
+ */
+async function downloadIDCardAsImage(options) {
+    try {
+        const { frontElementId = 'idcardfront', filename = 'ID_Card', data, qrElementId, qrFields, format = 'png', scale = 10, quality = 1.0, } = options;
+        // Generate QR code if needed
+        if (qrElementId && data && qrFields && qrFields.length > 0) {
+            const qrData = {};
+            for (const field of qrFields) {
+                if (data[field] !== undefined) {
+                    qrData[field] = data[field];
+                }
+            }
+            qrUtils.setQrCodeOnElement(qrElementId, qrData, 200);
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const capture = await captureElement(frontElementId, scale);
+        if (!capture) {
+            return { success: false, error: 'Element not found' };
+        }
+        const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';
+        const dataUrl = capture.canvas.toDataURL(mimeType, quality);
+        // Trigger download
+        const link = document.createElement('a');
+        link.download = `${filename}.${format}`;
+        link.href = dataUrl;
+        link.click();
+        return { success: true, dataUrl };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : 'Unknown error',
+        };
+    }
+}
+/**
+ * Export ID card with unified options
+ */
+async function exportIDCard(options) {
+    const { format, ...rest } = options;
+    if (format === 'pdf') {
+        return downloadIDCardAsPDF(rest);
+    }
+    else {
+        return downloadIDCardAsImage({ ...rest, format });
+    }
+}
+
+exports.downloadIDCardAsImage = downloadIDCardAsImage;
+exports.downloadIDCardAsPDF = downloadIDCardAsPDF;
+exports.exportIDCard = exportIDCard;
+//# sourceMappingURL=exportUtils.js.map

package/dist/cjs/core/exportUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exportUtils.js","sources":["../../../src/core/exportUtils.ts"],"sourcesContent":["import html2canvas from 'html2canvas';\r\nimport jsPDF from 'jspdf';\r\nimport type { ExportOptions, ExportResult, IDCardData } from '../types';\r\nimport { setQrCodeOnElement } from './qrUtils';\r\n\r\ninterface DownloadIDCardOptions {\r\n  frontElementId?: string;\r\n  backElementId?: string;\r\n  filename?: string;\r\n  data?: IDCardData;\r\n  qrElementId?: string;\r\n  qrFields?: string[];\r\n  format?: 'pdf' | 'png' | 'jpeg';\r\n  scale?: number;      // Canvas scale for quality (higher = better, but slower)\r\n  quality?: number;    // JPEG quality (0-1)\r\n}\r\n\r\n// High-quality canvas rendering defaults\r\nconst defaultCanvasOptions = {\r\n  scale: 10,           // 10x resolution for crisp output\r\n  dpi: 1200,\r\n  imageTimeout: 15000,\r\n  letterRendering: true,\r\n  logging: false,\r\n  useCORS: true,       // Allow cross-origin images\r\n  backgroundColor: null,\r\n};\r\n\r\n/**\r\n * Capture a DOM element as a high-resolution canvas\r\n * Uses html2canvas to convert the element to an image\r\n * @returns Canvas and the original element, or null if not found\r\n */\r\nasync function captureElement(\r\n  elementId: string,\r\n  scale = 10\r\n): Promise<{ canvas: HTMLCanvasElement; element: HTMLElement } | null> {\r\n  const element = document.getElementById(elementId);\r\n  if (!element) return null;\r\n\r\n  const canvas = await html2canvas(element, {\r\n    ...defaultCanvasOptions,\r\n    scale,\r\n  });\r\n\r\n  return { canvas, element };\r\n}\r\n\r\n/**\r\n * Download ID card(s) as a PDF file\r\n * Captures DOM elements and converts them to a multi-page PDF\r\n * @param options - Configuration for PDF export\r\n * @returns Export result with success status and any errors\r\n */\r\nexport async function downloadIDCardAsPDF(\r\n  options: DownloadIDCardOptions\r\n): Promise<ExportResult> {\r\n  try {\r\n    const {\r\n      frontElementId = 'idcardfront',\r\n      backElementId,\r\n      filename = 'ID_Card',\r\n      data,\r\n      qrElementId,\r\n      qrFields,\r\n      scale = 10,\r\n    } = options;\r\n\r\n    // Generate QR code if configured\r\n    if (qrElementId && data && qrFields && qrFields.length > 0) {\r\n      const qrData: Record<string, unknown> = {};\r\n      for (const field of qrFields) {\r\n        if (data[field] !== undefined) {\r\n          qrData[field] = data[field];\r\n        }\r\n      }\r\n      setQrCodeOnElement(qrElementId, qrData, 200);\r\n    }\r\n\r\n    // Wait for QR code and any images to fully render\r\n    await new Promise((resolve) => setTimeout(resolve, 100));\r\n\r\n    const pages: { canvas: HTMLCanvasElement; element: HTMLElement }[] = [];\r\n\r\n    // Capture front\r\n    const frontCapture = await captureElement(frontElementId, scale);\r\n    if (frontCapture) pages.push(frontCapture);\r\n\r\n    // Capture back if exists\r\n    if (backElementId) {\r\n      const backCapture = await captureElement(backElementId, scale);\r\n      if (backCapture) pages.push(backCapture);\r\n    }\r\n\r\n    if (pages.length === 0) {\r\n      return { success: false, error: 'No elements found to capture' };\r\n    }\r\n\r\n    let pdf: jsPDF | undefined;\r\n\r\n    for (let i = 0; i < pages.length; i++) {\r\n      const { canvas, element } = pages[i];\r\n      const imgData = canvas.toDataURL('image/jpeg', 1.0);\r\n\r\n      // Calculate PDF dimensions\r\n      const pdfWidth = parseInt(element.style.width) * 0.264583 || 85;\r\n      const aspectRatio = canvas.height / canvas.width;\r\n      const pdfHeight = pdfWidth * aspectRatio;\r\n\r\n      const orientation = pdfWidth >= pdfHeight ? 'landscape' : 'portrait';\r\n\r\n      if (i === 0) {\r\n        pdf = new jsPDF({\r\n          unit: 'mm',\r\n          format: [pdfWidth, pdfHeight],\r\n          orientation,\r\n        });\r\n      } else {\r\n        pdf!.addPage([pdfWidth, pdfHeight], orientation);\r\n      }\r\n\r\n      pdf!.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);\r\n    }\r\n\r\n    if (pdf) {\r\n      const blob = pdf.output('blob');\r\n      pdf.save(`${filename}.pdf`);\r\n      return { success: true, blob };\r\n    }\r\n\r\n    return { success: false, error: 'Failed to generate PDF' };\r\n  } catch (error) {\r\n    return {\r\n      success: false,\r\n      error: error instanceof Error ? error.message : 'Unknown error',\r\n    };\r\n  }\r\n}\r\n\r\n/**\r\n * Download ID card as image (PNG or JPEG)\r\n */\r\nexport async function downloadIDCardAsImage(\r\n  options: DownloadIDCardOptions\r\n): Promise<ExportResult> {\r\n  try {\r\n    const {\r\n      frontElementId = 'idcardfront',\r\n      filename = 'ID_Card',\r\n      data,\r\n      qrElementId,\r\n      qrFields,\r\n      format = 'png',\r\n      scale = 10,\r\n      quality = 1.0,\r\n    } = options;\r\n\r\n    // Generate QR code if needed\r\n    if (qrElementId && data && qrFields && qrFields.length > 0) {\r\n      const qrData: Record<string, unknown> = {};\r\n      for (const field of qrFields) {\r\n        if (data[field] !== undefined) {\r\n          qrData[field] = data[field];\r\n        }\r\n      }\r\n      setQrCodeOnElement(qrElementId, qrData, 200);\r\n    }\r\n\r\n    await new Promise((resolve) => setTimeout(resolve, 100));\r\n\r\n    const capture = await captureElement(frontElementId, scale);\r\n    if (!capture) {\r\n      return { success: false, error: 'Element not found' };\r\n    }\r\n\r\n    const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';\r\n    const dataUrl = capture.canvas.toDataURL(mimeType, quality);\r\n\r\n    // Trigger download\r\n    const link = document.createElement('a');\r\n    link.download = `${filename}.${format}`;\r\n    link.href = dataUrl;\r\n    link.click();\r\n\r\n    return { success: true, dataUrl };\r\n  } catch (error) {\r\n    return {\r\n      success: false,\r\n      error: error instanceof Error ? error.message : 'Unknown error',\r\n    };\r\n  }\r\n}\r\n\r\n/**\r\n * Export ID card with unified options\r\n */\r\nexport async function exportIDCard(\r\n  options: ExportOptions & {\r\n    frontElementId?: string;\r\n    backElementId?: string;\r\n    data?: IDCardData;\r\n    qrElementId?: string;\r\n    qrFields?: string[];\r\n  }\r\n): Promise<ExportResult> {\r\n  const { format, ...rest } = options;\r\n\r\n  if (format === 'pdf') {\r\n    return downloadIDCardAsPDF(rest);\r\n  } else {\r\n    return downloadIDCardAsImage({ ...rest, format });\r\n  }\r\n}\r\n"],"names":["html2canvas","setQrCodeOnElement","jsPDF"],"mappings":"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"}

package/dist/cjs/core/qrUtils.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var qrious = require('../node_modules/qrious/dist/qrious.js');
+
+/**
+ * Generate a QR code as a base64 data URL
+ * @param data - Data to encode in the QR code (will be JSON stringified)
+ * @param size - QR code size in pixels
+ * @param options - Customization options (error correction level, colors, etc.)
+ * @returns Base64 PNG data URL
+ */
+function generateQrCodeDataURL(data, size = 200, options) {
+    const qr = new qrious({
+        value: JSON.stringify(data),
+        size,
+        level: options?.level || 'H', // High error correction by default
+        padding: options?.padding ?? 0,
+        background: options?.background || 'white',
+        backgroundAlpha: 1,
+        foreground: options?.foreground || 'black',
+        foregroundAlpha: 1,
+    });
+    return qr.toDataURL('image/png');
+}
+/**
+ * Generate QR code from specific fields in the card data
+ * Only includes fields that exist in the data object
+ * @param data - Full card data object
+ * @param fields - Array of field keys to include in QR code
+ * @param size - QR code size in pixels
+ * @returns Base64 PNG data URL
+ */
+function generateQrCodeFromFields(data, fields, size = 200) {
+    // Build object with only the specified fields
+    const qrData = {};
+    for (const field of fields) {
+        if (data[field] !== undefined) {
+            qrData[field] = data[field];
+        }
+    }
+    return generateQrCodeDataURL(qrData, size);
+}
+/**
+ * Set QR code image src on a DOM element
+ */
+function setQrCodeOnElement(elementId, data, size = 200, container = document) {
+    const qrDataURL = generateQrCodeDataURL(data, size);
+    const imgTag = (container === document
+        ? document.getElementById(elementId)
+        : container.querySelector(`#${elementId}`));
+    if (imgTag) {
+        imgTag.setAttribute('src', qrDataURL);
+        imgTag.style.display = 'block';
+        imgTag.style.opacity = '1';
+        imgTag.style.visibility = 'visible';
+        return true;
+    }
+    return false;
+}
+
+exports.generateQrCodeDataURL = generateQrCodeDataURL;
+exports.generateQrCodeFromFields = generateQrCodeFromFields;
+exports.setQrCodeOnElement = setQrCodeOnElement;
+//# sourceMappingURL=qrUtils.js.map

package/dist/cjs/core/qrUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrUtils.js","sources":["../../../src/core/qrUtils.ts"],"sourcesContent":["import QRious from 'qrious';\r\nimport type { IDCardData } from '../types';\r\n\r\n/**\r\n * Generate a QR code as a base64 data URL\r\n * @param data - Data to encode in the QR code (will be JSON stringified)\r\n * @param size - QR code size in pixels\r\n * @param options - Customization options (error correction level, colors, etc.)\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeDataURL(\r\n  data: Record<string, unknown>,\r\n  size = 200,\r\n  options?: {\r\n    level?: 'L' | 'M' | 'Q' | 'H';  // Error correction level\r\n    padding?: number;\r\n    background?: string;\r\n    foreground?: string;\r\n  }\r\n): string {\r\n  const qr = new (QRious as any)({\r\n    value: JSON.stringify(data),\r\n    size,\r\n    level: options?.level || 'H',  // High error correction by default\r\n    padding: options?.padding ?? 0,\r\n    background: options?.background || 'white',\r\n    backgroundAlpha: 1,\r\n    foreground: options?.foreground || 'black',\r\n    foregroundAlpha: 1,\r\n  });\r\n  return qr.toDataURL('image/png');\r\n}\r\n\r\n/**\r\n * Generate QR code from specific fields in the card data\r\n * Only includes fields that exist in the data object\r\n * @param data - Full card data object\r\n * @param fields - Array of field keys to include in QR code\r\n * @param size - QR code size in pixels\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeFromFields(\r\n  data: IDCardData,\r\n  fields: string[],\r\n  size = 200\r\n): string {\r\n  // Build object with only the specified fields\r\n  const qrData: Record<string, unknown> = {};\r\n  for (const field of fields) {\r\n    if (data[field] !== undefined) {\r\n      qrData[field] = data[field];\r\n    }\r\n  }\r\n  return generateQrCodeDataURL(qrData, size);\r\n}\r\n\r\n/**\r\n * Set QR code image src on a DOM element\r\n */\r\nexport function setQrCodeOnElement(\r\n  elementId: string,\r\n  data: Record<string, unknown>,\r\n  size = 200,\r\n  container: Document | HTMLElement = document\r\n): boolean {\r\n  const qrDataURL = generateQrCodeDataURL(data, size);\r\n  const imgTag = (\r\n    container === document\r\n      ? document.getElementById(elementId)\r\n      : (container as HTMLElement).querySelector(`#${elementId}`)\r\n  ) as HTMLImageElement | null;\r\n\r\n  if (imgTag) {\r\n    imgTag.setAttribute('src', qrDataURL);\r\n    imgTag.style.display = 'block';\r\n    imgTag.style.opacity = '1';\r\n    imgTag.style.visibility = 'visible';\r\n    return true;\r\n  }\r\n  return false;\r\n}\r\n"],"names":["QRious"],"mappings":";;;;AAGA;;;;;;AAMG;AACG,SAAU,qBAAqB,CACnC,IAA6B,EAC7B,IAAI,GAAG,GAAG,EACV,OAKC,EAAA;AAED,IAAA,MAAM,EAAE,GAAG,IAAKA,MAAc,CAAC;AAC7B,QAAA,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAC3B,IAAI;AACJ,QAAA,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,GAAG;AAC5B,QAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC;AAC9B,QAAA,UAAU,EAAE,OAAO,EAAE,UAAU,IAAI,OAAO;AAC1C,QAAA,eAAe,EAAE,CAAC;AAClB,QAAA,UAAU,EAAE,OAAO,EAAE,UAAU,IAAI,OAAO;AAC1C,QAAA,eAAe,EAAE,CAAC;AACnB,KAAA,CAAC;AACF,IAAA,OAAO,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC;AAClC;AAEA;;;;;;;AAOG;AACG,SAAU,wBAAwB,CACtC,IAAgB,EAChB,MAAgB,EAChB,IAAI,GAAG,GAAG,EAAA;;IAGV,MAAM,MAAM,GAA4B,EAAE;AAC1C,IAAA,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;AAC1B,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE;YAC7B,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7B;IACF;AACA,IAAA,OAAO,qBAAqB,CAAC,MAAM,EAAE,IAAI,CAAC;AAC5C;AAEA;;AAEG;AACG,SAAU,kBAAkB,CAChC,SAAiB,EACjB,IAA6B,EAC7B,IAAI,GAAG,GAAG,EACV,SAAA,GAAoC,QAAQ,EAAA;IAE5C,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC;AACnD,IAAA,MAAM,MAAM,IACV,SAAS,KAAK;AACZ,UAAE,QAAQ,CAAC,cAAc,CAAC,SAAS;UAChC,SAAyB,CAAC,aAAa,CAAC,IAAI,SAAS,CAAA,CAAE,CAAC,CACnC;IAE5B,IAAI,MAAM,EAAE;AACV,QAAA,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC;AACrC,QAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO;AAC9B,QAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG;AAC1B,QAAA,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS;AACnC,QAAA,OAAO,IAAI;IACb;AACA,IAAA,OAAO,KAAK;AACd;;;;;;"}

package/dist/cjs/hooks/useFieldMapping.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var react = require('react');
+
+function useFieldMapping(options) {
+    const { onFieldUpdate, containerRef, gridSize = 5, snapToGrid = false } = options || {};
+    const [selectedField, setSelectedField] = react.useState(null);
+    const [isDragging, setIsDragging] = react.useState(false);
+    const [isResizing, setIsResizing] = react.useState(false);
+    const dragStartRef = react.useRef({ x: 0, y: 0, fieldX: 0, fieldY: 0 });
+    const resizeStartRef = react.useRef({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        fieldX: 0,
+        fieldY: 0,
+        handle: '',
+    });
+    const snapValue = react.useCallback((value) => {
+        if (!snapToGrid)
+            return value;
+        return Math.round(value / gridSize) * gridSize;
+    }, [snapToGrid, gridSize]);
+    const selectField = react.useCallback((field) => {
+        setSelectedField(field);
+    }, []);
+    const updatePosition = react.useCallback((position) => {
+        if (!selectedField)
+            return;
+        const updatedField = {
+            ...selectedField,
+            position: {
+                ...selectedField.position,
+                ...position,
+            },
+        };
+        setSelectedField(updatedField);
+        onFieldUpdate?.(updatedField);
+    }, [selectedField, onFieldUpdate]);
+    const updateStyle = react.useCallback((style) => {
+        if (!selectedField)
+            return;
+        const updatedField = {
+            ...selectedField,
+            style: {
+                ...selectedField.style,
+                ...style,
+            },
+        };
+        setSelectedField(updatedField);
+        onFieldUpdate?.(updatedField);
+    }, [selectedField, onFieldUpdate]);
+    const startDrag = react.useCallback((e) => {
+        if (!selectedField)
+            return;
+        e.preventDefault();
+        setIsDragging(true);
+        dragStartRef.current = {
+            x: e.clientX,
+            y: e.clientY,
+            fieldX: selectedField.position.x,
+            fieldY: selectedField.position.y,
+        };
+    }, [selectedField]);
+    const startResize = react.useCallback((e, handle) => {
+        if (!selectedField)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsResizing(true);
+        resizeStartRef.current = {
+            x: e.clientX,
+            y: e.clientY,
+            width: selectedField.position.width,
+            height: selectedField.position.height,
+            fieldX: selectedField.position.x,
+            fieldY: selectedField.position.y,
+            handle,
+        };
+    }, [selectedField]);
+    // Handle mouse move for dragging and resizing
+    react.useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (isDragging && selectedField) {
+                const deltaX = e.clientX - dragStartRef.current.x;
+                const deltaY = e.clientY - dragStartRef.current.y;
+                const newX = snapValue(dragStartRef.current.fieldX + deltaX);
+                const newY = snapValue(dragStartRef.current.fieldY + deltaY);
+                updatePosition({ x: Math.max(0, newX), y: Math.max(0, newY) });
+            }
+            if (isResizing && selectedField) {
+                const { handle, x, y, width, height, fieldX, fieldY } = resizeStartRef.current;
+                const deltaX = e.clientX - x;
+                const deltaY = e.clientY - y;
+                let newWidth = width;
+                let newHeight = height;
+                let newX = fieldX;
+                let newY = fieldY;
+                if (handle.includes('e')) {
+                    newWidth = snapValue(Math.max(20, width + deltaX));
+                }
+                if (handle.includes('w')) {
+                    newWidth = snapValue(Math.max(20, width - deltaX));
+                    newX = snapValue(fieldX + deltaX);
+                }
+                if (handle.includes('s')) {
+                    newHeight = snapValue(Math.max(20, height + deltaY));
+                }
+                if (handle.includes('n')) {
+                    newHeight = snapValue(Math.max(20, height - deltaY));
+                    newY = snapValue(fieldY + deltaY);
+                }
+                updatePosition({
+                    x: Math.max(0, newX),
+                    y: Math.max(0, newY),
+                    width: newWidth,
+                    height: newHeight,
+                });
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+            setIsResizing(false);
+        };
+        if (isDragging || isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, isResizing, selectedField, updatePosition, snapValue]);
+    return {
+        selectedField,
+        selectField,
+        updatePosition,
+        updateStyle,
+        isDragging,
+        isResizing,
+        startDrag,
+        startResize,
+    };
+}
+
+exports.useFieldMapping = useFieldMapping;
+//# sourceMappingURL=useFieldMapping.js.map

package/dist/cjs/hooks/useFieldMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldMapping.js","sources":["../../../src/hooks/useFieldMapping.ts"],"sourcesContent":["import type React from 'react';\r\nimport { useState, useCallback, useRef, useEffect } from 'react';\r\nimport type { FieldMapping, FieldPosition, FieldStyle, UseFieldMappingReturn } from '../types';\r\n\r\ninterface UseFieldMappingOptions {\r\n  onFieldUpdate?: (field: FieldMapping) => void;\r\n  containerRef?: React.RefObject<HTMLElement>;\r\n  gridSize?: number;\r\n  snapToGrid?: boolean;\r\n}\r\n\r\nexport function useFieldMapping(options?: UseFieldMappingOptions): UseFieldMappingReturn {\r\n  const { onFieldUpdate, containerRef, gridSize = 5, snapToGrid = false } = options || {};\r\n\r\n  const [selectedField, setSelectedField] = useState<FieldMapping | null>(null);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const [isResizing, setIsResizing] = useState(false);\r\n\r\n  const dragStartRef = useRef({ x: 0, y: 0, fieldX: 0, fieldY: 0 });\r\n  const resizeStartRef = useRef({\r\n    x: 0,\r\n    y: 0,\r\n    width: 0,\r\n    height: 0,\r\n    fieldX: 0,\r\n    fieldY: 0,\r\n    handle: '',\r\n  });\r\n\r\n  const snapValue = useCallback(\r\n    (value: number): number => {\r\n      if (!snapToGrid) return value;\r\n      return Math.round(value / gridSize) * gridSize;\r\n    },\r\n    [snapToGrid, gridSize]\r\n  );\r\n\r\n  const selectField = useCallback((field: FieldMapping | null) => {\r\n    setSelectedField(field);\r\n  }, []);\r\n\r\n  const updatePosition = useCallback(\r\n    (position: Partial<FieldPosition>) => {\r\n      if (!selectedField) return;\r\n\r\n      const updatedField: FieldMapping = {\r\n        ...selectedField,\r\n        position: {\r\n          ...selectedField.position,\r\n          ...position,\r\n        },\r\n      };\r\n\r\n      setSelectedField(updatedField);\r\n      onFieldUpdate?.(updatedField);\r\n    },\r\n    [selectedField, onFieldUpdate]\r\n  );\r\n\r\n  const updateStyle = useCallback(\r\n    (style: Partial<FieldStyle>) => {\r\n      if (!selectedField) return;\r\n\r\n      const updatedField: FieldMapping = {\r\n        ...selectedField,\r\n        style: {\r\n          ...selectedField.style,\r\n          ...style,\r\n        },\r\n      };\r\n\r\n      setSelectedField(updatedField);\r\n      onFieldUpdate?.(updatedField);\r\n    },\r\n    [selectedField, onFieldUpdate]\r\n  );\r\n\r\n  const startDrag = useCallback(\r\n    (e: React.MouseEvent) => {\r\n      if (!selectedField) return;\r\n\r\n      e.preventDefault();\r\n      setIsDragging(true);\r\n\r\n      dragStartRef.current = {\r\n        x: e.clientX,\r\n        y: e.clientY,\r\n        fieldX: selectedField.position.x,\r\n        fieldY: selectedField.position.y,\r\n      };\r\n    },\r\n    [selectedField]\r\n  );\r\n\r\n  const startResize = useCallback(\r\n    (e: React.MouseEvent, handle: string) => {\r\n      if (!selectedField) return;\r\n\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      setIsResizing(true);\r\n\r\n      resizeStartRef.current = {\r\n        x: e.clientX,\r\n        y: e.clientY,\r\n        width: selectedField.position.width,\r\n        height: selectedField.position.height,\r\n        fieldX: selectedField.position.x,\r\n        fieldY: selectedField.position.y,\r\n        handle,\r\n      };\r\n    },\r\n    [selectedField]\r\n  );\r\n\r\n  // Handle mouse move for dragging and resizing\r\n  useEffect(() => {\r\n    const handleMouseMove = (e: MouseEvent) => {\r\n      if (isDragging && selectedField) {\r\n        const deltaX = e.clientX - dragStartRef.current.x;\r\n        const deltaY = e.clientY - dragStartRef.current.y;\r\n\r\n        const newX = snapValue(dragStartRef.current.fieldX + deltaX);\r\n        const newY = snapValue(dragStartRef.current.fieldY + deltaY);\r\n\r\n        updatePosition({ x: Math.max(0, newX), y: Math.max(0, newY) });\r\n      }\r\n\r\n      if (isResizing && selectedField) {\r\n        const { handle, x, y, width, height, fieldX, fieldY } = resizeStartRef.current;\r\n        const deltaX = e.clientX - x;\r\n        const deltaY = e.clientY - y;\r\n\r\n        let newWidth = width;\r\n        let newHeight = height;\r\n        let newX = fieldX;\r\n        let newY = fieldY;\r\n\r\n        if (handle.includes('e')) {\r\n          newWidth = snapValue(Math.max(20, width + deltaX));\r\n        }\r\n        if (handle.includes('w')) {\r\n          newWidth = snapValue(Math.max(20, width - deltaX));\r\n          newX = snapValue(fieldX + deltaX);\r\n        }\r\n        if (handle.includes('s')) {\r\n          newHeight = snapValue(Math.max(20, height + deltaY));\r\n        }\r\n        if (handle.includes('n')) {\r\n          newHeight = snapValue(Math.max(20, height - deltaY));\r\n          newY = snapValue(fieldY + deltaY);\r\n        }\r\n\r\n        updatePosition({\r\n          x: Math.max(0, newX),\r\n          y: Math.max(0, newY),\r\n          width: newWidth,\r\n          height: newHeight,\r\n        });\r\n      }\r\n    };\r\n\r\n    const handleMouseUp = () => {\r\n      setIsDragging(false);\r\n      setIsResizing(false);\r\n    };\r\n\r\n    if (isDragging || isResizing) {\r\n      document.addEventListener('mousemove', handleMouseMove);\r\n      document.addEventListener('mouseup', handleMouseUp);\r\n    }\r\n\r\n    return () => {\r\n      document.removeEventListener('mousemove', handleMouseMove);\r\n      document.removeEventListener('mouseup', handleMouseUp);\r\n    };\r\n  }, [isDragging, isResizing, selectedField, updatePosition, snapValue]);\r\n\r\n  return {\r\n    selectedField,\r\n    selectField,\r\n    updatePosition,\r\n    updateStyle,\r\n    isDragging,\r\n    isResizing,\r\n    startDrag,\r\n    startResize,\r\n  };\r\n}\r\n"],"names":["useState","useRef","useCallback","useEffect"],"mappings":"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"}