react-id-card-generator 1.0.22 → 1.1.1

package/README.md

@@ -161,14 +161,31 @@ await exportAsImage({
 
 ## Field Types
 
-1. **Text Field** - Displays text data (name, ID number, etc.)
-2. **Label** - Static text that doesn't change (e.g., "EMPLOYEE ID")
-3. **Image** - Shows photos or logos (supports border radius for circular photos)
-4. **QR Code** - Generates scannable QR codes from selected card fields
-
-## Template Storage
-
-Save and load templates:
+1. **Text Field** - Displays text data (name, ID number, etc.)
+2. **Label** - Static text that doesn't change (e.g., "EMPLOYEE ID")
+3. **Image** - Shows photos or logos (supports border radius for circular photos)
+4. **QR Code** - Generates scannable QR codes from selected card fields
+5. **Table** - Displays array-backed row data with configurable headers, columns, and styles
+
+### Table Data
+
+Table fields use the table field key as the data source, and each column field key maps to a property in every row object.
+
+```tsx
+const data = {
+  name: 'John Doe',
+  results: [
+    { subject: 'Math', marks: 95, grade: 'A' },
+    { subject: 'Science', marks: 91, grade: 'A' }
+  ]
+};
+```
+
+In the designer, set the table data source key to `results`, then set column field keys such as `subject`, `marks`, and `grade`. A new table starts with 5 body rows, 5 columns, and a visible header row.
+
+## Template Storage
+
+Save and load templates:
 
 ```tsx
 import { 
@@ -204,10 +221,14 @@ interface IDCardTemplate {
 }
 
 // User data for generating cards
-interface IDCardData {
-  [key: string]: string | number | boolean | undefined;
-}
-```
+interface IDCardData {
+  [key: string]: string | number | boolean | string[] | TableRowData[] | undefined;
+}
+
+interface TableRowData {
+  [key: string]: string | number | boolean | null | undefined;
+}
+```
 
 ## License
 

package/dist/cjs/components/IDCardDesigner.js

@@ -6,6 +6,7 @@ var useIDCardTemplate = require('../hooks/useIDCardTemplate.js');
 var deepCleanUndefined = require('../utils/deepCleanUndefined.js');
 var IDCardPreview = require('./IDCardPreview.js');
 var templateStorage = require('../storage/templateStorage.js');
+var tableUtils = require('../utils/tableUtils.js');
 
 // Available field types in the designer
 const defaultFieldTypes = [
@@ -13,7 +14,18 @@ const defaultFieldTypes = [
     { type: 'label', label: 'Static Label', icon: '🏷️' },
     { type: 'image', label: 'Image/Photo', icon: '🖼️' },
     { type: 'qrcode', label: 'QR Code', icon: '📱' },
+    { type: 'table', label: 'Table', icon: '▦' },
 ];
+const getPhotoRadiusSliderValue = (borderRadius) => {
+    if (typeof borderRadius !== 'string') {
+        return 0;
+    }
+    const parsed = Number.parseFloat(borderRadius);
+    if (!Number.isFinite(parsed)) {
+        return 0;
+    }
+    return Math.max(0, Math.min(200, Math.round(parsed)));
+};
 /**
  * IDCardDesigner - Visual drag-and-drop template builder
  *
@@ -57,6 +69,7 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
         bloodgroup: 'O+',
         phoneno: '9876543210',
         address: 'Sample Address',
+        results: tableUtils.createSampleTableRows(tableUtils.createDefaultTableConfig()),
     });
     // Get selected field
     const selectedField = template.fields.find((f) => f.id === selectedFieldId);
@@ -84,9 +97,10 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
     }, [selectedField, addField, setSelectedFieldId, template.cardSize.width, template.cardSize.height]);
     // Handle adding new field
     const handleAddField = react.useCallback((type) => {
+        const tableConfig = type === 'table' ? tableUtils.createDefaultTableConfig() : undefined;
         const newField = {
             id: templateStorage.generateId('field'),
-            fieldKey: `field_${Date.now()}`,
+            fieldKey: type === 'table' ? 'results' : `field_${Date.now()}`,
             label: type === 'label' ? 'Label' : '',
             type,
             side: activeSide,
@@ -100,6 +114,7 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
             },
             zIndex: template.fields.length + 1,
             staticText: type === 'label' ? 'Static Label' : '',
+            ...(tableConfig ? { table: tableConfig } : {}),
             ...(type === 'qrcode' ? { qrFields: [] } : {}),
         };
         // Adjust default sizes based on type
@@ -109,9 +124,24 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
         else if (type === 'qrcode') {
             newField.position = { x: 50, y: 50, width: 80, height: 80 };
         }
+        else if (type === 'table') {
+            const availableTableWidth = Math.max(20, template.cardSize.width - 40);
+            newField.position = {
+                x: 20,
+                y: 40,
+                width: Math.min(availableTableWidth, 300),
+                height: 120,
+            };
+        }
         addField(newField);
+        if (type === 'table' && tableConfig) {
+            setSampleData((prev) => ({
+                ...prev,
+                [newField.fieldKey]: prev[newField.fieldKey] || tableUtils.createSampleTableRows(tableConfig),
+            }));
+        }
         setSelectedFieldId(newField.id);
-    }, [activeSide, addField, template.fields.length]);
+    }, [activeSide, addField, template.cardSize.width, template.fields.length]);
     // Handle background upload
     const handleBackgroundUpload = react.useCallback(async (e) => {
         const file = e.target.files?.[0];
@@ -129,8 +159,8 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
     const handleOrientationChange = react.useCallback((orientation) => {
         setOrientation(orientation);
         // Update card size based on orientation
-        const baseWidth = 340;
-        const baseHeight = 215;
+        const baseWidth = 640;
+        const baseHeight = 415;
         if (orientation === 'portrait') {
             setCardSize({ width: baseHeight, height: baseWidth, unit: 'px' });
         }
@@ -253,6 +283,19 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
             });
         }
         else {
+            if (property === 'fieldKey' && selectedField.type === 'table' && typeof value === 'string') {
+                updateField(selectedField.id, { fieldKey: value });
+                setSampleData((prev) => {
+                    if (!value || value === selectedField.fieldKey || prev[value] !== undefined) {
+                        return prev;
+                    }
+                    const next = { ...prev };
+                    next[value] = prev[selectedField.fieldKey] || tableUtils.createSampleTableRows(selectedField.table);
+                    delete next[selectedField.fieldKey];
+                    return next;
+                });
+                return;
+            }
             // Only allow qrFields property on QR code fields
             if (property === 'qrFields') {
                 if (selectedField.type === 'qrcode') {
@@ -264,6 +307,73 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
             }
         }
     }, [selectedField, updateField]);
+    const handleTableConfigUpdate = react.useCallback((updates) => {
+        if (!selectedField || selectedField.type !== 'table')
+            return;
+        const table = tableUtils.normalizeTableConfig(selectedField.table);
+        updateField(selectedField.id, {
+            table: {
+                ...table,
+                ...updates,
+                style: {
+                    ...table.style,
+                    ...updates.style,
+                },
+            },
+        });
+    }, [selectedField, updateField]);
+    const handleTableStyleUpdate = react.useCallback((styleKey, value) => {
+        if (!selectedField || selectedField.type !== 'table')
+            return;
+        const table = tableUtils.normalizeTableConfig(selectedField.table);
+        handleTableConfigUpdate({
+            style: {
+                ...table.style,
+                [styleKey]: value,
+            },
+        });
+    }, [selectedField, handleTableConfigUpdate]);
+    const handleTableColumnUpdate = react.useCallback((columnIndex, updates) => {
+        if (!selectedField || selectedField.type !== 'table')
+            return;
+        const table = tableUtils.normalizeTableConfig(selectedField.table);
+        const columns = table.columns.map((column, index) => index === columnIndex ? { ...column, ...updates } : column);
+        handleTableConfigUpdate({ columns });
+    }, [selectedField, handleTableConfigUpdate]);
+    const handleTableColumnCountUpdate = react.useCallback((count) => {
+        if (!selectedField || selectedField.type !== 'table')
+            return;
+        const table = tableUtils.normalizeTableConfig(selectedField.table);
+        handleTableConfigUpdate({
+            columns: tableUtils.resizeTableColumns(table.columns, count),
+        });
+    }, [selectedField, handleTableConfigUpdate]);
+    const handleTableSampleCellUpdate = react.useCallback((field, table, rowIndex, columnKey, value) => {
+        setSampleData((prev) => {
+            const existingRows = tableUtils.coerceTableRows(prev[field.fieldKey]);
+            const rowCount = Math.max(table.rowCount, existingRows.length, rowIndex + 1);
+            const rows = Array.from({ length: rowCount }, (_, index) => ({
+                ...(existingRows[index] || {}),
+            }));
+            rows[rowIndex] = {
+                ...rows[rowIndex],
+                [columnKey]: value,
+            };
+            return {
+                ...prev,
+                [field.fieldKey]: rows,
+            };
+        });
+    }, []);
+    const handleAddTableSampleRow = react.useCallback((field) => {
+        setSampleData((prev) => {
+            const rows = tableUtils.coerceTableRows(prev[field.fieldKey]);
+            return {
+                ...prev,
+                [field.fieldKey]: [...rows, {}],
+            };
+        });
+    }, []);
     // Handle save
     const handleSave = react.useCallback(() => {
         const updatedTemplate = {
@@ -283,11 +393,15 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
     }, [selectedFieldId, removeField]);
     // Keyboard shortcuts
     react.useEffect(() => {
+        const handleLineHeightInputFocus = () => {
+        };
+        const handleLineHeightInputBlur = () => {
+        };
         // Listen for focus/blur on line height input
         const lhInput = document.getElementById('line-height-input');
         if (lhInput) {
-            lhInput.addEventListener('focus', () => { });
-            lhInput.addEventListener('blur', () => { });
+            lhInput.addEventListener('focus', handleLineHeightInputFocus);
+            lhInput.addEventListener('blur', handleLineHeightInputBlur);
         }
         const handleKeyDown = (e) => {
             if (selectedFieldId) {
@@ -337,30 +451,73 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
             }
         };
         document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            if (lhInput) {
+                lhInput.removeEventListener('focus', handleLineHeightInputFocus);
+                lhInput.removeEventListener('blur', handleLineHeightInputBlur);
+            }
+        };
     }, [selectedFieldId, handleDeleteField, template.fields, template.cardSize, updateField]);
-    return (jsxRuntime.jsxs("div", { className: `idcard-designer ${className}`, style: style, children: [jsxRuntime.jsxs("div", { className: "designer-header", children: [jsxRuntime.jsx("input", { type: "text", value: templateName, onChange: (e) => setTemplateName(e.target.value), className: "template-name-input", placeholder: "Template Name" }), jsxRuntime.jsxs("div", { className: "header-actions", children: [onCancel && (jsxRuntime.jsx("button", { onClick: onCancel, className: "btn btn-secondary", children: "Cancel" })), jsxRuntime.jsx("button", { onClick: handleSave, className: "btn btn-primary", disabled: !isValid, children: "Save Template" })] })] }), jsxRuntime.jsxs("div", { className: "designer-body", children: [jsxRuntime.jsxs("div", { className: "designer-sidebar left-sidebar", children: [jsxRuntime.jsx("h3", { children: "Add Fields" }), jsxRuntime.jsx("div", { className: "field-types", children: defaultFieldTypes.map((fieldType) => (jsxRuntime.jsxs("button", { onClick: () => handleAddField(fieldType.type), className: "field-type-btn", children: [jsxRuntime.jsx("span", { className: "field-icon", children: fieldType.icon }), jsxRuntime.jsx("span", { className: "field-label", children: fieldType.label })] }, fieldType.type))) }), jsxRuntime.jsx("h3", { children: "Card Settings" }), jsxRuntime.jsxs("div", { className: "card-settings", children: [jsxRuntime.jsxs("div", { className: "setting-group", children: [jsxRuntime.jsx("label", { children: "Orientation" }), jsxRuntime.jsxs("div", { className: "btn-group", children: [jsxRuntime.jsx("button", { className: `btn ${template.orientation === 'landscape' ? 'active' : ''}`, onClick: () => handleOrientationChange('landscape'), children: "Landscape" }), jsxRuntime.jsx("button", { className: `btn ${template.orientation === 'portrait' ? 'active' : ''}`, onClick: () => handleOrientationChange('portrait'), children: "Portrait" })] })] }), jsxRuntime.jsxs("div", { className: "setting-group", children: [jsxRuntime.jsx("label", { children: "Card Sides" }), jsxRuntime.jsxs("div", { className: "btn-group", children: [jsxRuntime.jsx("button", { className: `btn ${template.sides === 'single' ? 'active' : ''}`, onClick: () => handleSidesChange('single'), children: "Single" }), jsxRuntime.jsx("button", { className: `btn ${template.sides === 'double' ? 'active' : ''}`, onClick: () => handleSidesChange('double'), children: "Double" })] })] }), jsxRuntime.jsxs("div", { className: "setting-group", children: [jsxRuntime.jsx("label", { children: "Card Size (px)" }), jsxRuntime.jsxs("div", { className: "size-inputs", children: [jsxRuntime.jsx("input", { type: "number", value: template.cardSize.width, onChange: (e) => setCardSize({ ...template.cardSize, width: Number(e.target.value) }), placeholder: "Width" }), jsxRuntime.jsx("span", { children: "\u00D7" }), jsxRuntime.jsx("input", { type: "number", value: template.cardSize.height, onChange: (e) => setCardSize({ ...template.cardSize, height: Number(e.target.value) }), placeholder: "Height" })] })] })] }), jsxRuntime.jsx("h3", { children: "Background" }), jsxRuntime.jsxs("div", { className: "background-upload", children: [jsxRuntime.jsx("input", { type: "file", accept: "image/*", onChange: handleBackgroundUpload, id: "bg-upload", className: "file-input" }), jsxRuntime.jsxs("label", { htmlFor: "bg-upload", className: "btn btn-outline", children: ["Upload ", activeSide, " Background"] }), template.backgrounds[activeSide] && (jsxRuntime.jsx("button", { className: "btn btn-danger btn-sm", onClick: () => setBackground(activeSide, ''), children: "Remove" }))] })] }), jsxRuntime.jsxs("div", { className: "designer-preview", children: [jsxRuntime.jsxs("div", { className: "side-tabs", children: [jsxRuntime.jsx("button", { className: `tab ${activeSide === 'front' ? 'active' : ''}`, onClick: () => setActiveSide('front'), children: "Front" }), template.sides === 'double' && (jsxRuntime.jsx("button", { className: `tab ${activeSide === 'back' ? 'active' : ''}`, onClick: () => setActiveSide('back'), children: "Back" })), jsxRuntime.jsxs("label", { className: "grid-toggle", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showGrid, onChange: (e) => setShowGrid(e.target.checked) }), "Show Grid"] })] }), jsxRuntime.jsx("div", { ref: previewContainerRef, className: "preview-wrapper", onMouseDown: handleMouseDown, children: jsxRuntime.jsx(IDCardPreview.IDCardPreview, { template: template, data: sampleData, side: activeSide, showGrid: showGrid, onFieldSelect: handleFieldSelect, selectedFieldId: selectedFieldId, editable: true }) }), jsxRuntime.jsxs("div", { className: "fields-list", children: [jsxRuntime.jsxs("h4", { children: ["Fields on ", activeSide, " side:"] }), template.fields
+    return (jsxRuntime.jsxs("div", { className: `idcard-designer ${className}`, style: style, children: [jsxRuntime.jsxs("div", { className: "designer-header", children: [jsxRuntime.jsx("input", { type: "text", value: templateName, onChange: (e) => setTemplateName(e.target.value), className: "template-name-input", placeholder: "Template Name" }), jsxRuntime.jsxs("div", { className: "header-actions", children: [onCancel && (jsxRuntime.jsx("button", { type: "button", onClick: onCancel, className: "btn btn-secondary", children: "Cancel" })), jsxRuntime.jsx("button", { type: "button", onClick: handleSave, className: "btn btn-primary", disabled: !isValid, children: "Save Template" })] })] }), jsxRuntime.jsxs("div", { className: "designer-body", children: [jsxRuntime.jsxs("div", { className: "designer-sidebar left-sidebar", children: [jsxRuntime.jsx("h3", { children: "Add Fields" }), jsxRuntime.jsx("div", { className: "field-types", children: defaultFieldTypes.map((fieldType) => (jsxRuntime.jsxs("button", { type: "button", onClick: () => handleAddField(fieldType.type), className: "field-type-btn", children: [jsxRuntime.jsx("span", { className: "field-icon", children: fieldType.icon }), jsxRuntime.jsx("span", { className: "field-label", children: fieldType.label })] }, fieldType.type))) }), jsxRuntime.jsx("h3", { children: "Card Settings" }), jsxRuntime.jsxs("div", { className: "card-settings", children: [jsxRuntime.jsxs("div", { className: "setting-group", children: [jsxRuntime.jsx("label", { children: "Orientation" }), jsxRuntime.jsxs("div", { className: "btn-group", children: [jsxRuntime.jsx("button", { type: "button", className: `btn ${template.orientation === 'landscape' ? 'active' : ''}`, onClick: () => handleOrientationChange('landscape'), children: "Landscape" }), jsxRuntime.jsx("button", { type: "button", className: `btn ${template.orientation === 'portrait' ? 'active' : ''}`, onClick: () => handleOrientationChange('portrait'), children: "Portrait" })] })] }), jsxRuntime.jsxs("div", { className: "setting-group", children: [jsxRuntime.jsx("label", { children: "Card Sides" }), jsxRuntime.jsxs("div", { className: "btn-group", children: [jsxRuntime.jsx("button", { type: "button", className: `btn ${template.sides === 'single' ? 'active' : ''}`, onClick: () => handleSidesChange('single'), children: "Single" }), jsxRuntime.jsx("button", { type: "button", className: `btn ${template.sides === 'double' ? 'active' : ''}`, onClick: () => handleSidesChange('double'), children: "Double" })] })] }), jsxRuntime.jsxs("div", { className: "setting-group", children: [jsxRuntime.jsx("label", { children: "Card Size (px)" }), jsxRuntime.jsxs("div", { className: "size-inputs", children: [jsxRuntime.jsx("input", { type: "number", value: template.cardSize.width, onChange: (e) => setCardSize({ ...template.cardSize, width: Number(e.target.value) }), placeholder: "Width" }), jsxRuntime.jsx("span", { children: "\u00D7" }), jsxRuntime.jsx("input", { type: "number", value: template.cardSize.height, onChange: (e) => setCardSize({ ...template.cardSize, height: Number(e.target.value) }), placeholder: "Height" })] })] })] }), jsxRuntime.jsx("h3", { children: "Background" }), jsxRuntime.jsxs("div", { className: "background-upload", children: [jsxRuntime.jsx("input", { type: "file", accept: "image/*", onChange: handleBackgroundUpload, id: "bg-upload", className: "file-input" }), jsxRuntime.jsxs("label", { htmlFor: "bg-upload", className: "btn btn-outline", children: ["Upload ", activeSide, " Background"] }), template.backgrounds[activeSide] && (jsxRuntime.jsx("button", { type: "button", className: "btn btn-danger btn-sm", onClick: () => setBackground(activeSide, ''), children: "Remove" }))] })] }), jsxRuntime.jsxs("div", { className: "designer-preview", children: [jsxRuntime.jsxs("div", { className: "side-tabs", children: [jsxRuntime.jsx("button", { type: "button", className: `tab ${activeSide === 'front' ? 'active' : ''}`, onClick: () => setActiveSide('front'), children: "Front" }), template.sides === 'double' && (jsxRuntime.jsx("button", { type: "button", className: `tab ${activeSide === 'back' ? 'active' : ''}`, onClick: () => setActiveSide('back'), children: "Back" })), jsxRuntime.jsxs("label", { className: "grid-toggle", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showGrid, onChange: (e) => setShowGrid(e.target.checked) }), "Show Grid"] })] }), jsxRuntime.jsx("div", { ref: previewContainerRef, className: "preview-wrapper", onMouseDown: handleMouseDown, children: jsxRuntime.jsx(IDCardPreview.IDCardPreview, { template: template, data: sampleData, side: activeSide, showGrid: showGrid, onFieldSelect: handleFieldSelect, selectedFieldId: selectedFieldId, editable: true }) }), jsxRuntime.jsxs("div", { className: "fields-list", children: [jsxRuntime.jsxs("h4", { children: ["Fields on ", activeSide, " side:"] }), template.fields
                                         .filter((f) => f.side === activeSide)
-                                        .map((field) => (jsxRuntime.jsxs("div", { className: `field-item ${field.id === selectedFieldId ? 'selected' : ''}`, onClick: () => setSelectedFieldId(field.id), children: [jsxRuntime.jsx("span", { className: "field-type-icon", children: defaultFieldTypes.find((t) => t.type === field.type)?.icon }), jsxRuntime.jsx("span", { className: "field-key", children: field.fieldKey }), jsxRuntime.jsx("button", { className: "delete-btn", onClick: (e) => {
+                                        .map((field) => (jsxRuntime.jsxs("div", { className: `field-item ${field.id === selectedFieldId ? 'selected' : ''}`, onClick: () => setSelectedFieldId(field.id), children: [jsxRuntime.jsx("span", { className: "field-type-icon", children: defaultFieldTypes.find((t) => t.type === field.type)?.icon }), jsxRuntime.jsx("span", { className: "field-key", children: field.fieldKey }), jsxRuntime.jsx("button", { type: "button", className: "delete-btn", onClick: (e) => {
                                                     e.stopPropagation();
                                                     removeField(field.id);
                                                     if (field.id === selectedFieldId)
                                                         setSelectedFieldId(null);
-                                                }, children: "\u00D7" })] }, field.id)))] })] }), jsxRuntime.jsxs("div", { className: "designer-sidebar right-sidebar", children: [jsxRuntime.jsx("h3", { children: "Field Properties" }), selectedField ? (jsxRuntime.jsxs("div", { className: "field-properties", children: [jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Field Key" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.fieldKey, onChange: (e) => handleFieldPropertyUpdate('fieldKey', e.target.value) })] }), selectedField.type !== 'label' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.label || '', onChange: (e) => handleFieldPropertyUpdate('label', e.target.value) })] })), selectedField.type === 'text' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: "btn btn-outline btn-sm", style: { marginBottom: 12 }, onClick: handleDuplicateField, children: "Duplicate Field" }), jsxRuntime.jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Label Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Position" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelPosition || 'top', onChange: (e) => handleFieldPropertyUpdate('style.labelPosition', e.target.value), children: [jsxRuntime.jsx("option", { value: "top", children: "Top" }), jsxRuntime.jsx("option", { value: "left", children: "Left (Side)" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Vertical Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelVerticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.labelVerticalAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "top", children: "Top" }), jsxRuntime.jsx("option", { value: "middle", children: "Middle" }), jsxRuntime.jsx("option", { value: "bottom", children: "Bottom" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Font Size" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.style?.labelFontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.labelFontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Font Weight" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelFontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.labelFontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "100", children: "100" }), jsxRuntime.jsx("option", { value: "200", children: "200" }), jsxRuntime.jsx("option", { value: "300", children: "300" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" }), jsxRuntime.jsx("option", { value: "800", children: "800" }), jsxRuntime.jsx("option", { value: "900", children: "900" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Text Transform" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsxRuntime.jsx("option", { value: "none", children: "None" }), jsxRuntime.jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsxRuntime.jsx("option", { value: "lowercase", children: "lowercase" }), jsxRuntime.jsx("option", { value: "capitalize", children: "Capitalize" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Color" }), jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.labelColor || '#666666', onChange: (e) => handleFieldPropertyUpdate('style.labelColor', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Text Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelTextAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.labelTextAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] })] }), jsxRuntime.jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Text Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Font Size" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.style?.textFontSize || selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.textFontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Font Weight" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textFontWeight || selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.textFontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "100", children: "100" }), jsxRuntime.jsx("option", { value: "200", children: "200" }), jsxRuntime.jsx("option", { value: "300", children: "300" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" }), jsxRuntime.jsx("option", { value: "800", children: "800" }), jsxRuntime.jsx("option", { value: "900", children: "900" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Color" }), jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.textColor || selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.textColor', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textTextAlign || selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textTextAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Line Height" }), jsxRuntime.jsx("input", { id: "line-height-input", type: "number", min: 0.1, step: 0.1, value: selectedField.style?.lineHeight ? Number(selectedField.style.lineHeight) : 1, onChange: (e) => handleFieldPropertyUpdate('style.lineHeight', e.target.value), style: { width: 80 }, onFocus: () => setLineHeightInputFocused(true), onBlur: () => setLineHeightInputFocused(false) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Transform" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.textTransform', e.target.value), children: [jsxRuntime.jsx("option", { value: "none", children: "None" }), jsxRuntime.jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsxRuntime.jsx("option", { value: "lowercase", children: "lowercase" }), jsxRuntime.jsx("option", { value: "capitalize", children: "Capitalize" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Vertical Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textVerticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.textVerticalAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "top", children: "Top" }), jsxRuntime.jsx("option", { value: "middle", children: "Middle" }), jsxRuntime.jsx("option", { value: "bottom", children: "Bottom" })] })] })] }), jsxRuntime.jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Container Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Vertical Align (Container)" }), jsxRuntime.jsxs("select", { value: selectedField.style?.verticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.verticalAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "top", children: "Top" }), jsxRuntime.jsx("option", { value: "middle", children: "Middle" }), jsxRuntime.jsx("option", { value: "bottom", children: "Bottom" })] })] })] })] })), selectedField.type === 'label' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Static Text" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.staticText || '', onChange: (e) => handleFieldPropertyUpdate('staticText', e.target.value) })] })), selectedField.type === 'qrcode' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "QR Code Data Fields" }), jsxRuntime.jsx("small", { className: "hint", children: "Select which fields to encode in the QR code:" }), jsxRuntime.jsx("div", { style: { marginTop: '8px', maxHeight: '150px', overflowY: 'auto', border: '1px solid #ddd', borderRadius: '4px', padding: '8px' }, children: template.fields
-                                                    .filter(f => f.type !== 'qrcode' && f.type !== 'label')
+                                                }, children: "\u00D7" })] }, field.id)))] })] }), jsxRuntime.jsxs("div", { className: "designer-sidebar right-sidebar", children: [jsxRuntime.jsx("h3", { children: "Field Properties" }), selectedField ? (jsxRuntime.jsxs("div", { className: "field-properties", children: [jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: selectedField.type === 'table' ? 'Data Source Key' : 'Field Key' }), jsxRuntime.jsx("input", { type: "text", value: selectedField.fieldKey, onChange: (e) => handleFieldPropertyUpdate('fieldKey', e.target.value) })] }), selectedField.type !== 'label' && selectedField.type !== 'table' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.label || '', onChange: (e) => handleFieldPropertyUpdate('label', e.target.value) })] })), selectedField.type === 'table' && (() => {
+                                        const table = tableUtils.normalizeTableConfig(selectedField.table);
+                                        const sampleRows = tableUtils.coerceTableRows(sampleData[selectedField.fieldKey]);
+                                        const editableRows = Array.from({ length: Math.max(table.rowCount, sampleRows.length) }, (_, index) => sampleRows[index] || {});
+                                        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "table-editor-section", children: [jsxRuntime.jsx("strong", { children: "Table Layout" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Body Rows" }), jsxRuntime.jsx("input", { type: "number", min: 1, value: table.rowCount, onChange: (e) => handleTableConfigUpdate({
+                                                                        rowCount: Math.max(1, Number(e.target.value) || 1),
+                                                                    }) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Columns" }), jsxRuntime.jsx("input", { type: "number", min: 1, value: table.columns.length, onChange: (e) => handleTableColumnCountUpdate(Number(e.target.value) || 1) })] }), jsxRuntime.jsxs("div", { className: "property-group checkbox-group", children: [jsxRuntime.jsx("input", { id: "table-show-header", type: "checkbox", checked: table.showHeader !== false, onChange: (e) => handleTableConfigUpdate({ showHeader: e.target.checked }) }), jsxRuntime.jsx("label", { htmlFor: "table-show-header", children: "Show Header" })] }), jsxRuntime.jsxs("div", { className: "property-group checkbox-group", children: [jsxRuntime.jsx("input", { id: "table-zebra-rows", type: "checkbox", checked: Boolean(table.zebraRows), onChange: (e) => handleTableConfigUpdate({ zebraRows: e.target.checked }) }), jsxRuntime.jsx("label", { htmlFor: "table-zebra-rows", children: "Zebra Rows" })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Row Height" }), jsxRuntime.jsx("input", { type: "number", min: 1, placeholder: "Auto", value: table.rowHeight || '', onChange: (e) => handleTableConfigUpdate({
+                                                                        rowHeight: e.target.value ? Math.max(1, Number(e.target.value)) : undefined,
+                                                                    }) })] })] }), jsxRuntime.jsxs("div", { className: "table-editor-section", children: [jsxRuntime.jsx("strong", { children: "Columns" }), table.columns.map((column, index) => (jsxRuntime.jsxs("div", { className: "table-column-editor", children: [jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsxs("label", { children: ["Header ", index + 1] }), jsxRuntime.jsx("input", { type: "text", value: column.header, onChange: (e) => handleTableColumnUpdate(index, { header: e.target.value }) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Field Key" }), jsxRuntime.jsx("input", { type: "text", value: column.fieldKey, onChange: (e) => {
+                                                                                const nextKey = e.target.value;
+                                                                                const previousKey = column.fieldKey;
+                                                                                handleTableColumnUpdate(index, { fieldKey: nextKey });
+                                                                                if (nextKey && nextKey !== previousKey) {
+                                                                                    setSampleData((prev) => {
+                                                                                        const rows = tableUtils.coerceTableRows(prev[selectedField.fieldKey]);
+                                                                                        return {
+                                                                                            ...prev,
+                                                                                            [selectedField.fieldKey]: rows.map((row) => {
+                                                                                                if (row[nextKey] !== undefined)
+                                                                                                    return row;
+                                                                                                return {
+                                                                                                    ...row,
+                                                                                                    [nextKey]: row[previousKey],
+                                                                                                };
+                                                                                            }),
+                                                                                        };
+                                                                                    });
+                                                                                }
+                                                                            } })] }), jsxRuntime.jsxs("div", { className: "table-column-inline", children: [jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Width" }), jsxRuntime.jsx("input", { type: "number", min: 0.1, step: 0.1, value: column.width || 1, onChange: (e) => handleTableColumnUpdate(index, {
+                                                                                        width: Math.max(0.1, Number(e.target.value) || 1),
+                                                                                    }) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Align" }), jsxRuntime.jsxs("select", { value: column.align || 'left', onChange: (e) => handleTableColumnUpdate(index, {
+                                                                                        align: e.target.value,
+                                                                                    }), children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] })] })] }, column.id)))] }), jsxRuntime.jsxs("div", { className: "table-editor-section", children: [jsxRuntime.jsx("strong", { children: "Table Style" }), jsxRuntime.jsxs("div", { className: "table-column-inline", children: [jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Border Width" }), jsxRuntime.jsx("input", { type: "number", min: 0, value: table.style?.borderWidth ?? 1, onChange: (e) => handleTableStyleUpdate('borderWidth', Math.max(0, Number(e.target.value) || 0)) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Cell Padding" }), jsxRuntime.jsx("input", { type: "text", value: table.style?.cellPadding || '2px 4px', onChange: (e) => handleTableStyleUpdate('cellPadding', e.target.value) })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Border Color" }), jsxRuntime.jsx("input", { type: "color", value: table.style?.borderColor || '#000000', onChange: (e) => handleTableStyleUpdate('borderColor', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Header Background" }), jsxRuntime.jsx("input", { type: "color", value: table.style?.headerBackgroundColor || '#f0f0f0', onChange: (e) => handleTableStyleUpdate('headerBackgroundColor', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Header Text Color" }), jsxRuntime.jsx("input", { type: "color", value: table.style?.headerTextColor || '#000000', onChange: (e) => handleTableStyleUpdate('headerTextColor', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "table-column-inline", children: [jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Header Font Size" }), jsxRuntime.jsx("input", { type: "text", value: table.style?.headerFontSize || '10px', onChange: (e) => handleTableStyleUpdate('headerFontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Header Weight" }), jsxRuntime.jsxs("select", { value: table.style?.headerFontWeight || 'bold', onChange: (e) => handleTableStyleUpdate('headerFontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" })] })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Body Text Color" }), jsxRuntime.jsx("input", { type: "color", value: table.style?.bodyTextColor || '#000000', onChange: (e) => handleTableStyleUpdate('bodyTextColor', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "table-column-inline", children: [jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Body Font Size" }), jsxRuntime.jsx("input", { type: "text", value: table.style?.bodyFontSize || '10px', onChange: (e) => handleTableStyleUpdate('bodyFontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Body Weight" }), jsxRuntime.jsxs("select", { value: table.style?.bodyFontWeight || 'normal', onChange: (e) => handleTableStyleUpdate('bodyFontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" })] })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Zebra Background" }), jsxRuntime.jsx("input", { type: "color", value: table.style?.zebraBackgroundColor || '#f7f7f7', onChange: (e) => handleTableStyleUpdate('zebraBackgroundColor', e.target.value) })] })] }), jsxRuntime.jsxs("div", { className: "table-editor-section", children: [jsxRuntime.jsx("strong", { children: "Sample Rows" }), jsxRuntime.jsxs("small", { className: "hint", children: ["Preview data for ", selectedField.fieldKey] }), jsxRuntime.jsxs("div", { className: "table-sample-grid", style: {
+                                                                gridTemplateColumns: `repeat(${table.columns.length}, minmax(90px, 1fr))`,
+                                                            }, children: [table.columns.map((column) => (jsxRuntime.jsx("div", { className: "table-sample-header", children: column.header }, `sample-header-${column.id}`))), editableRows.map((row, rowIndex) => table.columns.map((column) => (jsxRuntime.jsx("input", { type: "text", value: String(row[column.fieldKey] ?? ''), onChange: (e) => handleTableSampleCellUpdate(selectedField, table, rowIndex, column.fieldKey, e.target.value) }, `sample-${rowIndex}-${column.id}`))))] }), jsxRuntime.jsx("button", { className: "btn btn-outline btn-sm", type: "button", onClick: () => handleAddTableSampleRow(selectedField), children: "+ Add Sample Row" })] })] }));
+                                    })(), selectedField.type === 'text' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", className: "btn btn-outline btn-sm", style: { marginBottom: 12 }, onClick: handleDuplicateField, children: "Duplicate Field" }), jsxRuntime.jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Label Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Position" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelPosition || 'top', onChange: (e) => handleFieldPropertyUpdate('style.labelPosition', e.target.value), children: [jsxRuntime.jsx("option", { value: "top", children: "Top" }), jsxRuntime.jsx("option", { value: "left", children: "Left (Side)" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Vertical Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelVerticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.labelVerticalAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "top", children: "Top" }), jsxRuntime.jsx("option", { value: "middle", children: "Middle" }), jsxRuntime.jsx("option", { value: "bottom", children: "Bottom" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Font Size" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.style?.labelFontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.labelFontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Font Weight" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelFontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.labelFontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "100", children: "100" }), jsxRuntime.jsx("option", { value: "200", children: "200" }), jsxRuntime.jsx("option", { value: "300", children: "300" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" }), jsxRuntime.jsx("option", { value: "800", children: "800" }), jsxRuntime.jsx("option", { value: "900", children: "900" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Text Transform" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsxRuntime.jsx("option", { value: "none", children: "None" }), jsxRuntime.jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsxRuntime.jsx("option", { value: "lowercase", children: "lowercase" }), jsxRuntime.jsx("option", { value: "capitalize", children: "Capitalize" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Color" }), jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.labelColor || '#666666', onChange: (e) => handleFieldPropertyUpdate('style.labelColor', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Label Text Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelTextAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.labelTextAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] })] }), jsxRuntime.jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Text Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Font Size" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.style?.textFontSize || selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.textFontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Font Weight" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textFontWeight || selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.textFontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "100", children: "100" }), jsxRuntime.jsx("option", { value: "200", children: "200" }), jsxRuntime.jsx("option", { value: "300", children: "300" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" }), jsxRuntime.jsx("option", { value: "800", children: "800" }), jsxRuntime.jsx("option", { value: "900", children: "900" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Color" }), jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.textColor || selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.textColor', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textTextAlign || selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textTextAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Line Height" }), jsxRuntime.jsx("input", { id: "line-height-input", type: "number", min: 0.1, step: 0.1, value: selectedField.style?.lineHeight ? Number(selectedField.style.lineHeight) : 1, onChange: (e) => handleFieldPropertyUpdate('style.lineHeight', e.target.value), style: { width: 80 }, onFocus: () => setLineHeightInputFocused(true), onBlur: () => setLineHeightInputFocused(false) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Transform" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.textTransform', e.target.value), children: [jsxRuntime.jsx("option", { value: "none", children: "None" }), jsxRuntime.jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsxRuntime.jsx("option", { value: "lowercase", children: "lowercase" }), jsxRuntime.jsx("option", { value: "capitalize", children: "Capitalize" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Vertical Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textVerticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.textVerticalAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "top", children: "Top" }), jsxRuntime.jsx("option", { value: "middle", children: "Middle" }), jsxRuntime.jsx("option", { value: "bottom", children: "Bottom" })] })] })] }), jsxRuntime.jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Container Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Vertical Align (Container)" }), jsxRuntime.jsxs("select", { value: selectedField.style?.verticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.verticalAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "top", children: "Top" }), jsxRuntime.jsx("option", { value: "middle", children: "Middle" }), jsxRuntime.jsx("option", { value: "bottom", children: "Bottom" })] })] })] })] })), selectedField.type === 'label' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Static Text" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.staticText || '', onChange: (e) => handleFieldPropertyUpdate('staticText', e.target.value) })] })), selectedField.type === 'qrcode' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "QR Code Data Fields" }), jsxRuntime.jsx("small", { className: "hint", children: "Select which fields to encode in the QR code:" }), jsxRuntime.jsx("div", { style: { marginTop: '8px', maxHeight: '150px', overflowY: 'auto', border: '1px solid #ddd', borderRadius: '4px', padding: '8px' }, children: template.fields
+                                                    .filter(f => f.type !== 'qrcode' && f.type !== 'label' && f.type !== 'table')
                                                     .map((field) => (jsxRuntime.jsxs("label", { style: { display: 'block', marginBottom: '6px', cursor: 'pointer' }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: selectedField.qrFields?.includes(field.fieldKey) || false, onChange: (e) => {
                                                                 const currentFields = selectedField.qrFields || [];
                                                                 const newFields = e.target.checked
                                                                     ? [...currentFields, field.fieldKey]
                                                                     : currentFields.filter(f => f !== field.fieldKey);
                                                                 handleFieldPropertyUpdate('qrFields', newFields);
-                                                            }, style: { marginRight: '6px' } }), field.label || field.fieldKey] }, field.fieldKey))) })] })), selectedField.type !== 'text' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Font Size" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.fontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Font Weight" }), jsxRuntime.jsxs("select", { value: selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.fontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "100", children: "100" }), jsxRuntime.jsx("option", { value: "200", children: "200" }), jsxRuntime.jsx("option", { value: "300", children: "300" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" }), jsxRuntime.jsx("option", { value: "800", children: "800" }), jsxRuntime.jsx("option", { value: "900", children: "900" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Color" }), jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.color', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] }), selectedField.type === 'label' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Transform" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsxRuntime.jsx("option", { value: "none", children: "None" }), jsxRuntime.jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsxRuntime.jsx("option", { value: "lowercase", children: "lowercase" }), jsxRuntime.jsx("option", { value: "capitalize", children: "Capitalize" })] })] }))] }), selectedField.type === 'qrcode' ? (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Background Color" }), jsxRuntime.jsx("div", { style: {
+                                                            }, style: { marginRight: '6px' } }), field.label || field.fieldKey] }, field.fieldKey))) })] })), selectedField.type === 'image' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { htmlFor: `photo-radius-input-${selectedField.id}`, children: "Photo Radius" }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [jsxRuntime.jsx("input", { type: "range", min: "0", max: "200", value: getPhotoRadiusSliderValue(selectedField.style?.borderRadius), onChange: (e) => handleFieldPropertyUpdate('style.borderRadius', `${e.target.value}px`), "aria-label": "Photo radius slider", style: { flex: 1 } }), jsxRuntime.jsx("input", { id: `photo-radius-input-${selectedField.id}`, type: "text", value: selectedField.style?.borderRadius || '0px', onChange: (e) => handleFieldPropertyUpdate('style.borderRadius', e.target.value.trim() || '0px'), style: { width: 72 } })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 8, marginTop: 8 }, children: [jsxRuntime.jsx("button", { type: "button", className: "btn btn-outline btn-sm", onClick: () => handleFieldPropertyUpdate('style.borderRadius', '0px'), children: "Square" }), jsxRuntime.jsx("button", { type: "button", className: "btn btn-outline btn-sm", onClick: () => handleFieldPropertyUpdate('style.borderRadius', '50%'), children: "Circle" })] })] })), selectedField.type !== 'text' && selectedField.type !== 'table' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Font Size" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.fontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Font Weight" }), jsxRuntime.jsxs("select", { value: selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.fontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "100", children: "100" }), jsxRuntime.jsx("option", { value: "200", children: "200" }), jsxRuntime.jsx("option", { value: "300", children: "300" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" }), jsxRuntime.jsx("option", { value: "800", children: "800" }), jsxRuntime.jsx("option", { value: "900", children: "900" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Color" }), jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.color', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] }), selectedField.type === 'label' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Transform" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsxRuntime.jsx("option", { value: "none", children: "None" }), jsxRuntime.jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsxRuntime.jsx("option", { value: "lowercase", children: "lowercase" }), jsxRuntime.jsx("option", { value: "capitalize", children: "Capitalize" })] })] }))] }), selectedField.type === 'qrcode' ? (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Background Color" }), jsxRuntime.jsx("div", { style: {
                                                     padding: '8px 10px',
                                                     border: '1px solid #ddd',
                                                     borderRadius: '4px',
                                                     backgroundColor: '#f8f8f8',
                                                     color: '#666',
-                                                }, children: "Transparent" })] })) : (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Background Color" }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [jsxRuntime.jsx("input", { type: "checkbox", id: "transparent-bg-checkbox", checked: selectedField.style?.backgroundColor === 'transparent', onChange: e => handleFieldPropertyUpdate('style.backgroundColor', e.target.checked ? 'transparent' : '#ffffff') }), jsxRuntime.jsx("label", { htmlFor: "transparent-bg-checkbox", style: { margin: 0, fontWeight: 400, fontSize: '0.95em' }, children: "Transparent" }), selectedField.style?.backgroundColor !== 'transparent' && (jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.backgroundColor || '#ffffff', onChange: e => handleFieldPropertyUpdate('style.backgroundColor', e.target.value) }))] })] })), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Side" }), jsxRuntime.jsxs("select", { value: selectedField.side, onChange: (e) => handleFieldPropertyUpdate('side', e.target.value), children: [jsxRuntime.jsx("option", { value: "front", children: "Front" }), template.sides === 'double' && jsxRuntime.jsx("option", { value: "back", children: "Back" })] })] }), jsxRuntime.jsx("button", { className: "btn btn-danger", onClick: handleDeleteField, children: "Delete Field" })] })) : (jsxRuntime.jsx("p", { className: "no-selection", children: "Select a field to edit its properties" })), jsxRuntime.jsx("h3", { children: "Sample Data" }), jsxRuntime.jsxs("div", { className: "sample-data", children: [jsxRuntime.jsx("p", { className: "hint", children: "Edit sample data to preview:" }), Object.entries(sampleData).map(([key, value]) => (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: key }), jsxRuntime.jsx("input", { type: "text", value: String(value), onChange: (e) => setSampleData((prev) => ({ ...prev, [key]: e.target.value })) })] }, key))), jsxRuntime.jsx("button", { className: "btn btn-outline btn-sm", onClick: () => setSampleData((prev) => ({ ...prev, [`custom_${Date.now()}`]: '' })), children: "+ Add Field" })] }), validationErrors.length > 0 && (jsxRuntime.jsxs("div", { className: "validation-errors", children: [jsxRuntime.jsx("h4", { children: "\u26A0\uFE0F Validation Issues" }), jsxRuntime.jsx("ul", { children: validationErrors.map((error, index) => (jsxRuntime.jsx("li", { children: error }, index))) })] }))] })] })] }));
+                                                }, children: "Transparent" })] })) : (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Background Color" }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [jsxRuntime.jsx("input", { type: "checkbox", id: "transparent-bg-checkbox", checked: selectedField.style?.backgroundColor === 'transparent', onChange: e => handleFieldPropertyUpdate('style.backgroundColor', e.target.checked ? 'transparent' : '#ffffff') }), jsxRuntime.jsx("label", { htmlFor: "transparent-bg-checkbox", style: { margin: 0, fontWeight: 400, fontSize: '0.95em' }, children: "Transparent" }), selectedField.style?.backgroundColor !== 'transparent' && (jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.backgroundColor || '#ffffff', onChange: e => handleFieldPropertyUpdate('style.backgroundColor', e.target.value) }))] })] })), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Side" }), jsxRuntime.jsxs("select", { value: selectedField.side, onChange: (e) => handleFieldPropertyUpdate('side', e.target.value), children: [jsxRuntime.jsx("option", { value: "front", children: "Front" }), template.sides === 'double' && jsxRuntime.jsx("option", { value: "back", children: "Back" })] })] }), jsxRuntime.jsx("button", { type: "button", className: "btn btn-danger", onClick: handleDeleteField, children: "Delete Field" })] })) : (jsxRuntime.jsx("p", { className: "no-selection", children: "Select a field to edit its properties" })), jsxRuntime.jsx("h3", { children: "Sample Data" }), jsxRuntime.jsxs("div", { className: "sample-data", children: [jsxRuntime.jsx("p", { className: "hint", children: "Edit sample data to preview:" }), Object.entries(sampleData)
+                                        .filter(([, value]) => !Array.isArray(value))
+                                        .map(([key, value]) => (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: key }), jsxRuntime.jsx("input", { type: "text", value: String(value), onChange: (e) => setSampleData((prev) => ({ ...prev, [key]: e.target.value })) })] }, key))), jsxRuntime.jsx("button", { type: "button", className: "btn btn-outline btn-sm", onClick: () => setSampleData((prev) => ({ ...prev, [`custom_${Date.now()}`]: '' })), children: "+ Add Field" })] }), validationErrors.length > 0 && (jsxRuntime.jsxs("div", { className: "validation-errors", children: [jsxRuntime.jsx("h4", { children: "\u26A0\uFE0F Validation Issues" }), jsxRuntime.jsx("ul", { children: validationErrors.map((error, index) => (jsxRuntime.jsx("li", { children: error }, index))) })] }))] })] })] }));
 };
 
 exports.IDCardDesigner = IDCardDesigner;