react-id-card-generator 1.0.21 → 1.1.0

package/dist/cjs/utils/tableUtils.js

@@ -0,0 +1,106 @@
+'use strict';
+
+const DEFAULT_TABLE_ROW_COUNT = 5;
+const DEFAULT_TABLE_COLUMN_COUNT = 5;
+function createDefaultTableColumns(count = DEFAULT_TABLE_COLUMN_COUNT) {
+    return Array.from({ length: Math.max(1, count) }, (_, index) => ({
+        id: `column_${index + 1}`,
+        header: `Header ${index + 1}`,
+        fieldKey: `column${index + 1}`,
+        width: 1,
+        align: 'left',
+    }));
+}
+function createDefaultTableConfig() {
+    return {
+        rowCount: DEFAULT_TABLE_ROW_COUNT,
+        columns: createDefaultTableColumns(DEFAULT_TABLE_COLUMN_COUNT),
+        showHeader: true,
+        zebraRows: false,
+        style: {
+            borderColor: '#000000',
+            borderWidth: 1,
+            headerBackgroundColor: '#f0f0f0',
+            headerTextColor: '#000000',
+            headerFontSize: '10px',
+            headerFontWeight: 'bold',
+            bodyTextColor: '#000000',
+            bodyFontSize: '10px',
+            bodyFontWeight: 'normal',
+            cellPadding: '2px 4px',
+            zebraBackgroundColor: '#f7f7f7',
+        },
+    };
+}
+function resizeTableColumns(columns, count) {
+    const safeCount = Math.max(1, Math.floor(count || 1));
+    const existing = columns || [];
+    return Array.from({ length: safeCount }, (_, index) => {
+        const current = existing[index];
+        if (current) {
+            return {
+                ...current,
+                id: current.id || `column_${index + 1}`,
+                header: current.header ?? `Header ${index + 1}`,
+                fieldKey: current.fieldKey || `column${index + 1}`,
+                width: current.width && current.width > 0 ? current.width : 1,
+                align: current.align || 'left',
+            };
+        }
+        return createDefaultTableColumns(safeCount)[index];
+    });
+}
+function normalizeTableConfig(table) {
+    const defaults = createDefaultTableConfig();
+    const columns = resizeTableColumns(table?.columns?.length ? table.columns : defaults.columns, table?.columns?.length || DEFAULT_TABLE_COLUMN_COUNT);
+    return {
+        ...defaults,
+        ...table,
+        rowCount: Math.max(1, Math.floor(table?.rowCount || defaults.rowCount)),
+        columns,
+        showHeader: table?.showHeader ?? defaults.showHeader,
+        zebraRows: table?.zebraRows ?? defaults.zebraRows,
+        rowHeight: typeof table?.rowHeight === 'number' && table.rowHeight > 0
+            ? table.rowHeight
+            : undefined,
+        style: {
+            ...defaults.style,
+            ...table?.style,
+            borderWidth: typeof table?.style?.borderWidth === 'number' && table.style.borderWidth >= 0
+                ? table.style.borderWidth
+                : defaults.style?.borderWidth,
+        },
+    };
+}
+function coerceTableRows(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value
+        .filter((row) => Boolean(row) && typeof row === 'object' && !Array.isArray(row))
+        .map((row) => ({ ...row }));
+}
+function getRenderedTableRows(data, fieldKey, table) {
+    const rows = coerceTableRows(data[fieldKey]);
+    const renderedRowCount = Math.max(table.rowCount, rows.length);
+    return Array.from({ length: renderedRowCount }, (_, index) => rows[index] || {});
+}
+function createSampleTableRows(tableConfig) {
+    const table = normalizeTableConfig(tableConfig);
+    return Array.from({ length: table.rowCount }, (_, rowIndex) => {
+        return table.columns.reduce((row, column) => {
+            row[column.fieldKey] = `${column.header} ${rowIndex + 1}`;
+            return row;
+        }, {});
+    });
+}
+
+exports.DEFAULT_TABLE_COLUMN_COUNT = DEFAULT_TABLE_COLUMN_COUNT;
+exports.DEFAULT_TABLE_ROW_COUNT = DEFAULT_TABLE_ROW_COUNT;
+exports.coerceTableRows = coerceTableRows;
+exports.createDefaultTableColumns = createDefaultTableColumns;
+exports.createDefaultTableConfig = createDefaultTableConfig;
+exports.createSampleTableRows = createSampleTableRows;
+exports.getRenderedTableRows = getRenderedTableRows;
+exports.normalizeTableConfig = normalizeTableConfig;
+exports.resizeTableColumns = resizeTableColumns;
+//# sourceMappingURL=tableUtils.js.map

package/dist/cjs/utils/tableUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableUtils.js","sources":["../../../src/utils/tableUtils.ts"],"sourcesContent":["import type { IDCardData, TableColumn, TableConfig, TableRowData } from '../types';\n\nexport const DEFAULT_TABLE_ROW_COUNT = 5;\nexport const DEFAULT_TABLE_COLUMN_COUNT = 5;\n\nexport function createDefaultTableColumns(count = DEFAULT_TABLE_COLUMN_COUNT): TableColumn[] {\n  return Array.from({ length: Math.max(1, count) }, (_, index) => ({\n    id: `column_${index + 1}`,\n    header: `Header ${index + 1}`,\n    fieldKey: `column${index + 1}`,\n    width: 1,\n    align: 'left',\n  }));\n}\n\nexport function createDefaultTableConfig(): TableConfig {\n  return {\n    rowCount: DEFAULT_TABLE_ROW_COUNT,\n    columns: createDefaultTableColumns(DEFAULT_TABLE_COLUMN_COUNT),\n    showHeader: true,\n    zebraRows: false,\n    style: {\n      borderColor: '#000000',\n      borderWidth: 1,\n      headerBackgroundColor: '#f0f0f0',\n      headerTextColor: '#000000',\n      headerFontSize: '10px',\n      headerFontWeight: 'bold',\n      bodyTextColor: '#000000',\n      bodyFontSize: '10px',\n      bodyFontWeight: 'normal',\n      cellPadding: '2px 4px',\n      zebraBackgroundColor: '#f7f7f7',\n    },\n  };\n}\n\nexport function resizeTableColumns(\n  columns: TableColumn[] | undefined,\n  count: number\n): TableColumn[] {\n  const safeCount = Math.max(1, Math.floor(count || 1));\n  const existing = columns || [];\n\n  return Array.from({ length: safeCount }, (_, index) => {\n    const current = existing[index];\n    if (current) {\n      return {\n        ...current,\n        id: current.id || `column_${index + 1}`,\n        header: current.header ?? `Header ${index + 1}`,\n        fieldKey: current.fieldKey || `column${index + 1}`,\n        width: current.width && current.width > 0 ? current.width : 1,\n        align: current.align || 'left',\n      };\n    }\n\n    return createDefaultTableColumns(safeCount)[index];\n  });\n}\n\nexport function normalizeTableConfig(table?: TableConfig): TableConfig {\n  const defaults = createDefaultTableConfig();\n  const columns = resizeTableColumns(\n    table?.columns?.length ? table.columns : defaults.columns,\n    table?.columns?.length || DEFAULT_TABLE_COLUMN_COUNT\n  );\n\n  return {\n    ...defaults,\n    ...table,\n    rowCount: Math.max(1, Math.floor(table?.rowCount || defaults.rowCount)),\n    columns,\n    showHeader: table?.showHeader ?? defaults.showHeader,\n    zebraRows: table?.zebraRows ?? defaults.zebraRows,\n    rowHeight:\n      typeof table?.rowHeight === 'number' && table.rowHeight > 0\n        ? table.rowHeight\n        : undefined,\n    style: {\n      ...defaults.style,\n      ...table?.style,\n      borderWidth:\n        typeof table?.style?.borderWidth === 'number' && table.style.borderWidth >= 0\n          ? table.style.borderWidth\n          : defaults.style?.borderWidth,\n    },\n  };\n}\n\nexport function coerceTableRows(value: IDCardData[string]): TableRowData[] {\n  if (!Array.isArray(value)) return [];\n\n  return value\n    .filter((row): row is TableRowData => Boolean(row) && typeof row === 'object' && !Array.isArray(row))\n    .map((row) => ({ ...row }));\n}\n\nexport function getRenderedTableRows(data: IDCardData, fieldKey: string, table: TableConfig): TableRowData[] {\n  const rows = coerceTableRows(data[fieldKey]);\n  const renderedRowCount = Math.max(table.rowCount, rows.length);\n\n  return Array.from({ length: renderedRowCount }, (_, index) => rows[index] || {});\n}\n\nexport function createSampleTableRows(tableConfig?: TableConfig): TableRowData[] {\n  const table = normalizeTableConfig(tableConfig);\n\n  return Array.from({ length: table.rowCount }, (_, rowIndex) => {\n    return table.columns.reduce<TableRowData>((row, column) => {\n      row[column.fieldKey] = `${column.header} ${rowIndex + 1}`;\n      return row;\n    }, {});\n  });\n}\n"],"names":[],"mappings":"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"}

package/dist/cjs/utils/validators.js

@@ -27,16 +27,7 @@ function validateTemplate(template) {
             errors.push({ field: 'cardSize.height', message: 'Card height must be positive' });
         }
     }
-    // Validate backgrounds
-    if (!template.backgrounds?.front && template.sides === 'single') {
-        errors.push({ field: 'backgrounds.front', message: 'Front background is required' });
-    }
-    if (template.sides === 'double' && !template.backgrounds?.back) {
-        errors.push({
-            field: 'backgrounds.back',
-            message: 'Back background is required for double-sided cards',
-        });
-    }
+    // Backgrounds are optional; blank card sides render with the default card background.
     // Validate fields
     if (!template.fields || template.fields.length === 0) {
         errors.push({ field: 'fields', message: 'At least one field is required' });
@@ -108,6 +99,38 @@ function validateField(field, index) {
             message: 'Label fields require static text',
         });
     }
+    if (field.type === 'table') {
+        if (!field.table) {
+            errors.push({
+                field: `${prefix}.table`,
+                message: 'Table fields require table configuration',
+            });
+        }
+        else {
+            if (!field.table.rowCount || field.table.rowCount <= 0) {
+                errors.push({
+                    field: `${prefix}.table.rowCount`,
+                    message: 'Table row count must be positive',
+                });
+            }
+            if (!field.table.columns || field.table.columns.length === 0) {
+                errors.push({
+                    field: `${prefix}.table.columns`,
+                    message: 'Table fields require at least one column',
+                });
+            }
+            else {
+                field.table.columns.forEach((column, columnIndex) => {
+                    if (!column.fieldKey) {
+                        errors.push({
+                            field: `${prefix}.table.columns[${columnIndex}].fieldKey`,
+                            message: 'Table columns require field keys',
+                        });
+                    }
+                });
+            }
+        }
+    }
     return errors;
 }
 /**

package/dist/cjs/utils/validators.js.map

@@ -1 +1 @@
-{"version":3,"file":"validators.js","sources":["../../../src/utils/validators.ts"],"sourcesContent":["import type { IDCardTemplate, FieldMapping, CardSize } from '../types';\r\n\r\nexport interface ValidationError {\r\n  field: string;\r\n  message: string;\r\n}\r\n\r\n/**\r\n * Validate a complete ID card template\r\n * Checks for required fields, valid dimensions, and proper field configuration\r\n * @param template - The template to validate\r\n * @returns Array of validation errors (empty if valid)\r\n */\r\nexport function validateTemplate(template: IDCardTemplate): ValidationError[] {\r\n  const errors: ValidationError[] = [];\r\n\r\n  // Check required metadata\r\n  if (!template.id) {\r\n    errors.push({ field: 'id', message: 'Template ID is required' });\r\n  }\r\n\r\n  if (!template.name) {\r\n    errors.push({ field: 'name', message: 'Template name is required' });\r\n  }\r\n\r\n  // Validate card dimensions\r\n  if (!template.cardSize) {\r\n    errors.push({ field: 'cardSize', message: 'Card size is required' });\r\n  } else {\r\n    if (template.cardSize.width <= 0) {\r\n      errors.push({ field: 'cardSize.width', message: 'Card width must be positive' });\r\n    }\r\n    if (template.cardSize.height <= 0) {\r\n      errors.push({ field: 'cardSize.height', message: 'Card height must be positive' });\r\n    }\r\n  }\r\n\r\n  // Validate backgrounds\r\n  if (!template.backgrounds?.front && template.sides === 'single') {\r\n    errors.push({ field: 'backgrounds.front', message: 'Front background is required' });\r\n  }\r\n\r\n  if (template.sides === 'double' && !template.backgrounds?.back) {\r\n    errors.push({\r\n      field: 'backgrounds.back',\r\n      message: 'Back background is required for double-sided cards',\r\n    });\r\n  }\r\n\r\n  // Validate fields\r\n  if (!template.fields || template.fields.length === 0) {\r\n    errors.push({ field: 'fields', message: 'At least one field is required' });\r\n  } else {\r\n    template.fields.forEach((field, index) => {\r\n      const fieldErrors = validateField(field, index);\r\n      errors.push(...fieldErrors);\r\n    });\r\n  }\r\n\r\n  // Ensure no duplicate field IDs (would cause rendering issues)\r\n  const fieldIds = template.fields?.map((f) => f.id) || [];\r\n  const duplicateIds = fieldIds.filter((id, index) => fieldIds.indexOf(id) !== index);\r\n  if (duplicateIds.length > 0) {\r\n    errors.push({\r\n      field: 'fields',\r\n      message: `Duplicate field IDs: ${[...new Set(duplicateIds)].join(', ')}`,\r\n    });\r\n  }\r\n\r\n  return errors;\r\n}\r\n\r\n/**\r\n * Validate a single field's configuration\r\n * @param field - The field to validate\r\n * @param index - Field index (for error messages)\r\n * @returns Array of validation errors\r\n */\r\nexport function validateField(field: FieldMapping, index: number): ValidationError[] {\r\n  const errors: ValidationError[] = [];\r\n  const prefix = `fields[${index}]`;\r\n\r\n  if (!field.id) {\r\n    errors.push({ field: `${prefix}.id`, message: 'Field ID is required' });\r\n  }\r\n\r\n  if (!field.fieldKey) {\r\n    errors.push({ field: `${prefix}.fieldKey`, message: 'Field key is required' });\r\n  }\r\n\r\n  if (!field.type) {\r\n    errors.push({ field: `${prefix}.type`, message: 'Field type is required' });\r\n  }\r\n\r\n  if (!field.side) {\r\n    errors.push({ field: `${prefix}.side`, message: 'Field side is required' });\r\n  }\r\n\r\n  if (!field.position) {\r\n    errors.push({ field: `${prefix}.position`, message: 'Field position is required' });\r\n  } else {\r\n    if (field.position.x < 0) {\r\n      errors.push({ field: `${prefix}.position.x`, message: 'X position cannot be negative' });\r\n    }\r\n    if (field.position.y < 0) {\r\n      errors.push({ field: `${prefix}.position.y`, message: 'Y position cannot be negative' });\r\n    }\r\n    if (field.position.width <= 0) {\r\n      errors.push({ field: `${prefix}.position.width`, message: 'Width must be positive' });\r\n    }\r\n    if (field.position.height <= 0) {\r\n      errors.push({ field: `${prefix}.position.height`, message: 'Height must be positive' });\r\n    }\r\n  }\r\n\r\n\r\n\r\n  if (field.type === 'qrcode' && (!field.qrFields || field.qrFields.length === 0)) {\r\n    errors.push({\r\n      field: `${prefix}.qrFields`,\r\n      message: 'QR code fields require at least one data field',\r\n    });\r\n  }\r\n\r\n  if (field.type === 'label' && !field.staticText && !field.label) {\r\n    errors.push({\r\n      field: `${prefix}.staticText`,\r\n      message: 'Label fields require static text',\r\n    });\r\n  }\r\n\r\n  return errors;\r\n}\r\n\r\n/**\r\n * Validate card size against standard dimensions\r\n */\r\nexport function validateCardSize(size: CardSize): boolean {\r\n  const standardSizes = {\r\n    'CR80': { width: 85.6, height: 53.98, unit: 'mm' },\r\n    'CR79': { width: 83.9, height: 51.0, unit: 'mm' },\r\n    'CR100': { width: 98.0, height: 67.0, unit: 'mm' },\r\n  };\r\n\r\n  // Just ensure dimensions are reasonable\r\n  if (size.unit === 'mm') {\r\n    return size.width >= 30 && size.width <= 200 && size.height >= 30 && size.height <= 200;\r\n  }\r\n  if (size.unit === 'px') {\r\n    return size.width >= 100 && size.width <= 2000 && size.height >= 100 && size.height <= 2000;\r\n  }\r\n  if (size.unit === 'in') {\r\n    return size.width >= 1 && size.width <= 10 && size.height >= 1 && size.height <= 10;\r\n  }\r\n\r\n  return true;\r\n}\r\n\r\n/**\r\n * Check if a field is within card bounds\r\n */\r\nexport function isFieldInBounds(\r\n  field: FieldMapping,\r\n  cardSize: CardSize\r\n): boolean {\r\n  const { x, y, width, height } = field.position;\r\n  return (\r\n    x >= 0 &&\r\n    y >= 0 &&\r\n    x + width <= cardSize.width &&\r\n    y + height <= cardSize.height\r\n  );\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"validators.js","sources":["../../../src/utils/validators.ts"],"sourcesContent":["import type { IDCardTemplate, FieldMapping, CardSize } from '../types';\r\n\r\nexport interface ValidationError {\r\n  field: string;\r\n  message: string;\r\n}\r\n\r\n/**\r\n * Validate a complete ID card template\r\n * Checks for required fields, valid dimensions, and proper field configuration\r\n * @param template - The template to validate\r\n * @returns Array of validation errors (empty if valid)\r\n */\r\nexport function validateTemplate(template: IDCardTemplate): ValidationError[] {\r\n  const errors: ValidationError[] = [];\r\n\r\n  // Check required metadata\r\n  if (!template.id) {\r\n    errors.push({ field: 'id', message: 'Template ID is required' });\r\n  }\r\n\r\n  if (!template.name) {\r\n    errors.push({ field: 'name', message: 'Template name is required' });\r\n  }\r\n\r\n  // Validate card dimensions\r\n  if (!template.cardSize) {\r\n    errors.push({ field: 'cardSize', message: 'Card size is required' });\r\n  } else {\r\n    if (template.cardSize.width <= 0) {\r\n      errors.push({ field: 'cardSize.width', message: 'Card width must be positive' });\r\n    }\r\n    if (template.cardSize.height <= 0) {\r\n      errors.push({ field: 'cardSize.height', message: 'Card height must be positive' });\r\n    }\r\n  }\r\n\r\n  // Backgrounds are optional; blank card sides render with the default card background.\n\r\n  // Validate fields\r\n  if (!template.fields || template.fields.length === 0) {\r\n    errors.push({ field: 'fields', message: 'At least one field is required' });\r\n  } else {\r\n    template.fields.forEach((field, index) => {\r\n      const fieldErrors = validateField(field, index);\r\n      errors.push(...fieldErrors);\r\n    });\r\n  }\r\n\r\n  // Ensure no duplicate field IDs (would cause rendering issues)\r\n  const fieldIds = template.fields?.map((f) => f.id) || [];\r\n  const duplicateIds = fieldIds.filter((id, index) => fieldIds.indexOf(id) !== index);\r\n  if (duplicateIds.length > 0) {\r\n    errors.push({\r\n      field: 'fields',\r\n      message: `Duplicate field IDs: ${[...new Set(duplicateIds)].join(', ')}`,\r\n    });\r\n  }\r\n\r\n  return errors;\r\n}\r\n\r\n/**\r\n * Validate a single field's configuration\r\n * @param field - The field to validate\r\n * @param index - Field index (for error messages)\r\n * @returns Array of validation errors\r\n */\r\nexport function validateField(field: FieldMapping, index: number): ValidationError[] {\r\n  const errors: ValidationError[] = [];\r\n  const prefix = `fields[${index}]`;\r\n\r\n  if (!field.id) {\r\n    errors.push({ field: `${prefix}.id`, message: 'Field ID is required' });\r\n  }\r\n\r\n  if (!field.fieldKey) {\r\n    errors.push({ field: `${prefix}.fieldKey`, message: 'Field key is required' });\r\n  }\r\n\r\n  if (!field.type) {\r\n    errors.push({ field: `${prefix}.type`, message: 'Field type is required' });\r\n  }\r\n\r\n  if (!field.side) {\r\n    errors.push({ field: `${prefix}.side`, message: 'Field side is required' });\r\n  }\r\n\r\n  if (!field.position) {\r\n    errors.push({ field: `${prefix}.position`, message: 'Field position is required' });\r\n  } else {\r\n    if (field.position.x < 0) {\r\n      errors.push({ field: `${prefix}.position.x`, message: 'X position cannot be negative' });\r\n    }\r\n    if (field.position.y < 0) {\r\n      errors.push({ field: `${prefix}.position.y`, message: 'Y position cannot be negative' });\r\n    }\r\n    if (field.position.width <= 0) {\r\n      errors.push({ field: `${prefix}.position.width`, message: 'Width must be positive' });\r\n    }\r\n    if (field.position.height <= 0) {\r\n      errors.push({ field: `${prefix}.position.height`, message: 'Height must be positive' });\r\n    }\r\n  }\r\n\r\n\r\n\r\n  if (field.type === 'qrcode' && (!field.qrFields || field.qrFields.length === 0)) {\r\n    errors.push({\r\n      field: `${prefix}.qrFields`,\r\n      message: 'QR code fields require at least one data field',\r\n    });\r\n  }\r\n\r\n  if (field.type === 'label' && !field.staticText && !field.label) {\n    errors.push({\n      field: `${prefix}.staticText`,\n      message: 'Label fields require static text',\n    });\n  }\n\n  if (field.type === 'table') {\n    if (!field.table) {\n      errors.push({\n        field: `${prefix}.table`,\n        message: 'Table fields require table configuration',\n      });\n    } else {\n      if (!field.table.rowCount || field.table.rowCount <= 0) {\n        errors.push({\n          field: `${prefix}.table.rowCount`,\n          message: 'Table row count must be positive',\n        });\n      }\n\n      if (!field.table.columns || field.table.columns.length === 0) {\n        errors.push({\n          field: `${prefix}.table.columns`,\n          message: 'Table fields require at least one column',\n        });\n      } else {\n        field.table.columns.forEach((column, columnIndex) => {\n          if (!column.fieldKey) {\n            errors.push({\n              field: `${prefix}.table.columns[${columnIndex}].fieldKey`,\n              message: 'Table columns require field keys',\n            });\n          }\n        });\n      }\n    }\n  }\n\n  return errors;\n}\n\r\n/**\r\n * Validate card size against standard dimensions\r\n */\r\nexport function validateCardSize(size: CardSize): boolean {\r\n  const standardSizes = {\r\n    'CR80': { width: 85.6, height: 53.98, unit: 'mm' },\r\n    'CR79': { width: 83.9, height: 51.0, unit: 'mm' },\r\n    'CR100': { width: 98.0, height: 67.0, unit: 'mm' },\r\n  };\r\n\r\n  // Just ensure dimensions are reasonable\r\n  if (size.unit === 'mm') {\r\n    return size.width >= 30 && size.width <= 200 && size.height >= 30 && size.height <= 200;\r\n  }\r\n  if (size.unit === 'px') {\r\n    return size.width >= 100 && size.width <= 2000 && size.height >= 100 && size.height <= 2000;\r\n  }\r\n  if (size.unit === 'in') {\r\n    return size.width >= 1 && size.width <= 10 && size.height >= 1 && size.height <= 10;\r\n  }\r\n\r\n  return true;\r\n}\r\n\r\n/**\r\n * Check if a field is within card bounds\r\n */\r\nexport function isFieldInBounds(\r\n  field: FieldMapping,\r\n  cardSize: CardSize\r\n): boolean {\r\n  const { x, y, width, height } = field.position;\r\n  return (\r\n    x >= 0 &&\r\n    y >= 0 &&\r\n    x + width <= cardSize.width &&\r\n    y + height <= cardSize.height\r\n  );\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/IDCardDesigner.js

@@ -4,6 +4,7 @@ import { useIDCardTemplate } from '../hooks/useIDCardTemplate.js';
 import { deepCleanUndefined } from '../utils/deepCleanUndefined.js';
 import { IDCardPreview } from './IDCardPreview.js';
 import { generateId, imageFileToBase64 } from '../storage/templateStorage.js';
+import { createSampleTableRows, createDefaultTableConfig, normalizeTableConfig, resizeTableColumns, coerceTableRows } from '../utils/tableUtils.js';
 
 // Available field types in the designer
 const defaultFieldTypes = [
@@ -11,6 +12,7 @@ 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: '▦' },
 ];
 /**
  * IDCardDesigner - Visual drag-and-drop template builder
@@ -55,6 +57,7 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
         bloodgroup: 'O+',
         phoneno: '9876543210',
         address: 'Sample Address',
+        results: createSampleTableRows(createDefaultTableConfig()),
     });
     // Get selected field
     const selectedField = template.fields.find((f) => f.id === selectedFieldId);
@@ -82,9 +85,10 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
     }, [selectedField, addField, setSelectedFieldId, template.cardSize.width, template.cardSize.height]);
     // Handle adding new field
     const handleAddField = useCallback((type) => {
+        const tableConfig = type === 'table' ? createDefaultTableConfig() : undefined;
         const newField = {
             id: generateId('field'),
-            fieldKey: `field_${Date.now()}`,
+            fieldKey: type === 'table' ? 'results' : `field_${Date.now()}`,
             label: type === 'label' ? 'Label' : '',
             type,
             side: activeSide,
@@ -98,6 +102,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
@@ -107,9 +112,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] || createSampleTableRows(tableConfig),
+            }));
+        }
         setSelectedFieldId(newField.id);
-    }, [activeSide, addField, template.fields.length]);
+    }, [activeSide, addField, template.cardSize.width, template.fields.length]);
     // Handle background upload
     const handleBackgroundUpload = useCallback(async (e) => {
         const file = e.target.files?.[0];
@@ -127,8 +147,8 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
     const handleOrientationChange = 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' });
         }
@@ -251,6 +271,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] || 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') {
@@ -262,6 +295,73 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
             }
         }
     }, [selectedField, updateField]);
+    const handleTableConfigUpdate = useCallback((updates) => {
+        if (!selectedField || selectedField.type !== 'table')
+            return;
+        const table = normalizeTableConfig(selectedField.table);
+        updateField(selectedField.id, {
+            table: {
+                ...table,
+                ...updates,
+                style: {
+                    ...table.style,
+                    ...updates.style,
+                },
+            },
+        });
+    }, [selectedField, updateField]);
+    const handleTableStyleUpdate = useCallback((styleKey, value) => {
+        if (!selectedField || selectedField.type !== 'table')
+            return;
+        const table = normalizeTableConfig(selectedField.table);
+        handleTableConfigUpdate({
+            style: {
+                ...table.style,
+                [styleKey]: value,
+            },
+        });
+    }, [selectedField, handleTableConfigUpdate]);
+    const handleTableColumnUpdate = useCallback((columnIndex, updates) => {
+        if (!selectedField || selectedField.type !== 'table')
+            return;
+        const table = normalizeTableConfig(selectedField.table);
+        const columns = table.columns.map((column, index) => index === columnIndex ? { ...column, ...updates } : column);
+        handleTableConfigUpdate({ columns });
+    }, [selectedField, handleTableConfigUpdate]);
+    const handleTableColumnCountUpdate = useCallback((count) => {
+        if (!selectedField || selectedField.type !== 'table')
+            return;
+        const table = normalizeTableConfig(selectedField.table);
+        handleTableConfigUpdate({
+            columns: resizeTableColumns(table.columns, count),
+        });
+    }, [selectedField, handleTableConfigUpdate]);
+    const handleTableSampleCellUpdate = useCallback((field, table, rowIndex, columnKey, value) => {
+        setSampleData((prev) => {
+            const existingRows = 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 = useCallback((field) => {
+        setSampleData((prev) => {
+            const rows = coerceTableRows(prev[field.fieldKey]);
+            return {
+                ...prev,
+                [field.fieldKey]: [...rows, {}],
+            };
+        });
+    }, []);
     // Handle save
     const handleSave = useCallback(() => {
         const updatedTemplate = {
@@ -337,28 +437,65 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, [selectedFieldId, handleDeleteField, template.fields, template.cardSize, updateField]);
-    return (jsxs("div", { className: `idcard-designer ${className}`, style: style, children: [jsxs("div", { className: "designer-header", children: [jsx("input", { type: "text", value: templateName, onChange: (e) => setTemplateName(e.target.value), className: "template-name-input", placeholder: "Template Name" }), jsxs("div", { className: "header-actions", children: [onCancel && (jsx("button", { onClick: onCancel, className: "btn btn-secondary", children: "Cancel" })), jsx("button", { onClick: handleSave, className: "btn btn-primary", disabled: !isValid, children: "Save Template" })] })] }), jsxs("div", { className: "designer-body", children: [jsxs("div", { className: "designer-sidebar left-sidebar", children: [jsx("h3", { children: "Add Fields" }), jsx("div", { className: "field-types", children: defaultFieldTypes.map((fieldType) => (jsxs("button", { onClick: () => handleAddField(fieldType.type), className: "field-type-btn", children: [jsx("span", { className: "field-icon", children: fieldType.icon }), jsx("span", { className: "field-label", children: fieldType.label })] }, fieldType.type))) }), jsx("h3", { children: "Card Settings" }), jsxs("div", { className: "card-settings", children: [jsxs("div", { className: "setting-group", children: [jsx("label", { children: "Orientation" }), jsxs("div", { className: "btn-group", children: [jsx("button", { className: `btn ${template.orientation === 'landscape' ? 'active' : ''}`, onClick: () => handleOrientationChange('landscape'), children: "Landscape" }), jsx("button", { className: `btn ${template.orientation === 'portrait' ? 'active' : ''}`, onClick: () => handleOrientationChange('portrait'), children: "Portrait" })] })] }), jsxs("div", { className: "setting-group", children: [jsx("label", { children: "Card Sides" }), jsxs("div", { className: "btn-group", children: [jsx("button", { className: `btn ${template.sides === 'single' ? 'active' : ''}`, onClick: () => handleSidesChange('single'), children: "Single" }), jsx("button", { className: `btn ${template.sides === 'double' ? 'active' : ''}`, onClick: () => handleSidesChange('double'), children: "Double" })] })] }), jsxs("div", { className: "setting-group", children: [jsx("label", { children: "Card Size (px)" }), jsxs("div", { className: "size-inputs", children: [jsx("input", { type: "number", value: template.cardSize.width, onChange: (e) => setCardSize({ ...template.cardSize, width: Number(e.target.value) }), placeholder: "Width" }), jsx("span", { children: "\u00D7" }), jsx("input", { type: "number", value: template.cardSize.height, onChange: (e) => setCardSize({ ...template.cardSize, height: Number(e.target.value) }), placeholder: "Height" })] })] })] }), jsx("h3", { children: "Background" }), jsxs("div", { className: "background-upload", children: [jsx("input", { type: "file", accept: "image/*", onChange: handleBackgroundUpload, id: "bg-upload", className: "file-input" }), jsxs("label", { htmlFor: "bg-upload", className: "btn btn-outline", children: ["Upload ", activeSide, " Background"] }), template.backgrounds[activeSide] && (jsx("button", { className: "btn btn-danger btn-sm", onClick: () => setBackground(activeSide, ''), children: "Remove" }))] })] }), jsxs("div", { className: "designer-preview", children: [jsxs("div", { className: "side-tabs", children: [jsx("button", { className: `tab ${activeSide === 'front' ? 'active' : ''}`, onClick: () => setActiveSide('front'), children: "Front" }), template.sides === 'double' && (jsx("button", { className: `tab ${activeSide === 'back' ? 'active' : ''}`, onClick: () => setActiveSide('back'), children: "Back" })), jsxs("label", { className: "grid-toggle", children: [jsx("input", { type: "checkbox", checked: showGrid, onChange: (e) => setShowGrid(e.target.checked) }), "Show Grid"] })] }), jsx("div", { ref: previewContainerRef, className: "preview-wrapper", onMouseDown: handleMouseDown, children: jsx(IDCardPreview, { template: template, data: sampleData, side: activeSide, showGrid: showGrid, onFieldSelect: handleFieldSelect, selectedFieldId: selectedFieldId, editable: true }) }), jsxs("div", { className: "fields-list", children: [jsxs("h4", { children: ["Fields on ", activeSide, " side:"] }), template.fields
+    return (jsxs("div", { className: `idcard-designer ${className}`, style: style, children: [jsxs("div", { className: "designer-header", children: [jsx("input", { type: "text", value: templateName, onChange: (e) => setTemplateName(e.target.value), className: "template-name-input", placeholder: "Template Name" }), jsxs("div", { className: "header-actions", children: [onCancel && (jsx("button", { type: "button", onClick: onCancel, className: "btn btn-secondary", children: "Cancel" })), jsx("button", { type: "button", onClick: handleSave, className: "btn btn-primary", disabled: !isValid, children: "Save Template" })] })] }), jsxs("div", { className: "designer-body", children: [jsxs("div", { className: "designer-sidebar left-sidebar", children: [jsx("h3", { children: "Add Fields" }), jsx("div", { className: "field-types", children: defaultFieldTypes.map((fieldType) => (jsxs("button", { type: "button", onClick: () => handleAddField(fieldType.type), className: "field-type-btn", children: [jsx("span", { className: "field-icon", children: fieldType.icon }), jsx("span", { className: "field-label", children: fieldType.label })] }, fieldType.type))) }), jsx("h3", { children: "Card Settings" }), jsxs("div", { className: "card-settings", children: [jsxs("div", { className: "setting-group", children: [jsx("label", { children: "Orientation" }), jsxs("div", { className: "btn-group", children: [jsx("button", { type: "button", className: `btn ${template.orientation === 'landscape' ? 'active' : ''}`, onClick: () => handleOrientationChange('landscape'), children: "Landscape" }), jsx("button", { type: "button", className: `btn ${template.orientation === 'portrait' ? 'active' : ''}`, onClick: () => handleOrientationChange('portrait'), children: "Portrait" })] })] }), jsxs("div", { className: "setting-group", children: [jsx("label", { children: "Card Sides" }), jsxs("div", { className: "btn-group", children: [jsx("button", { type: "button", className: `btn ${template.sides === 'single' ? 'active' : ''}`, onClick: () => handleSidesChange('single'), children: "Single" }), jsx("button", { type: "button", className: `btn ${template.sides === 'double' ? 'active' : ''}`, onClick: () => handleSidesChange('double'), children: "Double" })] })] }), jsxs("div", { className: "setting-group", children: [jsx("label", { children: "Card Size (px)" }), jsxs("div", { className: "size-inputs", children: [jsx("input", { type: "number", value: template.cardSize.width, onChange: (e) => setCardSize({ ...template.cardSize, width: Number(e.target.value) }), placeholder: "Width" }), jsx("span", { children: "\u00D7" }), jsx("input", { type: "number", value: template.cardSize.height, onChange: (e) => setCardSize({ ...template.cardSize, height: Number(e.target.value) }), placeholder: "Height" })] })] })] }), jsx("h3", { children: "Background" }), jsxs("div", { className: "background-upload", children: [jsx("input", { type: "file", accept: "image/*", onChange: handleBackgroundUpload, id: "bg-upload", className: "file-input" }), jsxs("label", { htmlFor: "bg-upload", className: "btn btn-outline", children: ["Upload ", activeSide, " Background"] }), template.backgrounds[activeSide] && (jsx("button", { type: "button", className: "btn btn-danger btn-sm", onClick: () => setBackground(activeSide, ''), children: "Remove" }))] })] }), jsxs("div", { className: "designer-preview", children: [jsxs("div", { className: "side-tabs", children: [jsx("button", { type: "button", className: `tab ${activeSide === 'front' ? 'active' : ''}`, onClick: () => setActiveSide('front'), children: "Front" }), template.sides === 'double' && (jsx("button", { type: "button", className: `tab ${activeSide === 'back' ? 'active' : ''}`, onClick: () => setActiveSide('back'), children: "Back" })), jsxs("label", { className: "grid-toggle", children: [jsx("input", { type: "checkbox", checked: showGrid, onChange: (e) => setShowGrid(e.target.checked) }), "Show Grid"] })] }), jsx("div", { ref: previewContainerRef, className: "preview-wrapper", onMouseDown: handleMouseDown, children: jsx(IDCardPreview, { template: template, data: sampleData, side: activeSide, showGrid: showGrid, onFieldSelect: handleFieldSelect, selectedFieldId: selectedFieldId, editable: true }) }), jsxs("div", { className: "fields-list", children: [jsxs("h4", { children: ["Fields on ", activeSide, " side:"] }), template.fields
                                         .filter((f) => f.side === activeSide)
-                                        .map((field) => (jsxs("div", { className: `field-item ${field.id === selectedFieldId ? 'selected' : ''}`, onClick: () => setSelectedFieldId(field.id), children: [jsx("span", { className: "field-type-icon", children: defaultFieldTypes.find((t) => t.type === field.type)?.icon }), jsx("span", { className: "field-key", children: field.fieldKey }), jsx("button", { className: "delete-btn", onClick: (e) => {
+                                        .map((field) => (jsxs("div", { className: `field-item ${field.id === selectedFieldId ? 'selected' : ''}`, onClick: () => setSelectedFieldId(field.id), children: [jsx("span", { className: "field-type-icon", children: defaultFieldTypes.find((t) => t.type === field.type)?.icon }), jsx("span", { className: "field-key", children: field.fieldKey }), jsx("button", { type: "button", className: "delete-btn", onClick: (e) => {
                                                     e.stopPropagation();
                                                     removeField(field.id);
                                                     if (field.id === selectedFieldId)
                                                         setSelectedFieldId(null);
-                                                }, children: "\u00D7" })] }, field.id)))] })] }), jsxs("div", { className: "designer-sidebar right-sidebar", children: [jsx("h3", { children: "Field Properties" }), selectedField ? (jsxs("div", { className: "field-properties", children: [jsxs("div", { className: "property-group", children: [jsx("label", { children: "Field Key" }), jsx("input", { type: "text", value: selectedField.fieldKey, onChange: (e) => handleFieldPropertyUpdate('fieldKey', e.target.value) })] }), selectedField.type !== 'label' && (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label" }), jsx("input", { type: "text", value: selectedField.label || '', onChange: (e) => handleFieldPropertyUpdate('label', e.target.value) })] })), selectedField.type === 'text' && (jsxs(Fragment, { children: [jsx("button", { className: "btn btn-outline btn-sm", style: { marginBottom: 12 }, onClick: handleDuplicateField, children: "Duplicate Field" }), jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Label Style" }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Position" }), jsxs("select", { value: selectedField.style?.labelPosition || 'top', onChange: (e) => handleFieldPropertyUpdate('style.labelPosition', e.target.value), children: [jsx("option", { value: "top", children: "Top" }), jsx("option", { value: "left", children: "Left (Side)" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Vertical Align" }), jsxs("select", { value: selectedField.style?.labelVerticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.labelVerticalAlign', e.target.value), children: [jsx("option", { value: "top", children: "Top" }), jsx("option", { value: "middle", children: "Middle" }), jsx("option", { value: "bottom", children: "Bottom" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Font Size" }), jsx("input", { type: "text", value: selectedField.style?.labelFontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.labelFontSize', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Font Weight" }), jsxs("select", { value: selectedField.style?.labelFontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.labelFontWeight', e.target.value), children: [jsx("option", { value: "normal", children: "Normal" }), jsx("option", { value: "bold", children: "Bold" }), jsx("option", { value: "100", children: "100" }), jsx("option", { value: "200", children: "200" }), jsx("option", { value: "300", children: "300" }), jsx("option", { value: "400", children: "400" }), jsx("option", { value: "500", children: "500" }), jsx("option", { value: "600", children: "600" }), jsx("option", { value: "700", children: "700" }), jsx("option", { value: "800", children: "800" }), jsx("option", { value: "900", children: "900" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Text Transform" }), jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsx("option", { value: "none", children: "None" }), jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsx("option", { value: "lowercase", children: "lowercase" }), jsx("option", { value: "capitalize", children: "Capitalize" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Color" }), jsx("input", { type: "color", value: selectedField.style?.labelColor || '#666666', onChange: (e) => handleFieldPropertyUpdate('style.labelColor', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Text Align" }), jsxs("select", { value: selectedField.style?.labelTextAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.labelTextAlign', e.target.value), children: [jsx("option", { value: "left", children: "Left" }), jsx("option", { value: "center", children: "Center" }), jsx("option", { value: "right", children: "Right" })] })] })] }), jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Text Style" }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Font Size" }), jsx("input", { type: "text", value: selectedField.style?.textFontSize || selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.textFontSize', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Font Weight" }), jsxs("select", { value: selectedField.style?.textFontWeight || selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.textFontWeight', e.target.value), children: [jsx("option", { value: "normal", children: "Normal" }), jsx("option", { value: "bold", children: "Bold" }), jsx("option", { value: "100", children: "100" }), jsx("option", { value: "200", children: "200" }), jsx("option", { value: "300", children: "300" }), jsx("option", { value: "400", children: "400" }), jsx("option", { value: "500", children: "500" }), jsx("option", { value: "600", children: "600" }), jsx("option", { value: "700", children: "700" }), jsx("option", { value: "800", children: "800" }), jsx("option", { value: "900", children: "900" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Color" }), jsx("input", { type: "color", value: selectedField.style?.textColor || selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.textColor', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Align" }), jsxs("select", { value: selectedField.style?.textTextAlign || selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textTextAlign', e.target.value), children: [jsx("option", { value: "left", children: "Left" }), jsx("option", { value: "center", children: "Center" }), jsx("option", { value: "right", children: "Right" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Line Height" }), 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) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Transform" }), jsxs("select", { value: selectedField.style?.textTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.textTransform', e.target.value), children: [jsx("option", { value: "none", children: "None" }), jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsx("option", { value: "lowercase", children: "lowercase" }), jsx("option", { value: "capitalize", children: "Capitalize" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Vertical Align" }), jsxs("select", { value: selectedField.style?.textVerticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.textVerticalAlign', e.target.value), children: [jsx("option", { value: "top", children: "Top" }), jsx("option", { value: "middle", children: "Middle" }), jsx("option", { value: "bottom", children: "Bottom" })] })] })] }), jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Container Style" }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Vertical Align (Container)" }), jsxs("select", { value: selectedField.style?.verticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.verticalAlign', e.target.value), children: [jsx("option", { value: "top", children: "Top" }), jsx("option", { value: "middle", children: "Middle" }), jsx("option", { value: "bottom", children: "Bottom" })] })] })] })] })), selectedField.type === 'label' && (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Static Text" }), jsx("input", { type: "text", value: selectedField.staticText || '', onChange: (e) => handleFieldPropertyUpdate('staticText', e.target.value) })] })), selectedField.type === 'qrcode' && (jsxs("div", { className: "property-group", children: [jsx("label", { children: "QR Code Data Fields" }), jsx("small", { className: "hint", children: "Select which fields to encode in the QR code:" }), 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)))] })] }), jsxs("div", { className: "designer-sidebar right-sidebar", children: [jsx("h3", { children: "Field Properties" }), selectedField ? (jsxs("div", { className: "field-properties", children: [jsxs("div", { className: "property-group", children: [jsx("label", { children: selectedField.type === 'table' ? 'Data Source Key' : 'Field Key' }), jsx("input", { type: "text", value: selectedField.fieldKey, onChange: (e) => handleFieldPropertyUpdate('fieldKey', e.target.value) })] }), selectedField.type !== 'label' && selectedField.type !== 'table' && (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label" }), jsx("input", { type: "text", value: selectedField.label || '', onChange: (e) => handleFieldPropertyUpdate('label', e.target.value) })] })), selectedField.type === 'table' && (() => {
+                                        const table = normalizeTableConfig(selectedField.table);
+                                        const sampleRows = coerceTableRows(sampleData[selectedField.fieldKey]);
+                                        const editableRows = Array.from({ length: Math.max(table.rowCount, sampleRows.length) }, (_, index) => sampleRows[index] || {});
+                                        return (jsxs(Fragment, { children: [jsxs("div", { className: "table-editor-section", children: [jsx("strong", { children: "Table Layout" }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Body Rows" }), jsx("input", { type: "number", min: 1, value: table.rowCount, onChange: (e) => handleTableConfigUpdate({
+                                                                        rowCount: Math.max(1, Number(e.target.value) || 1),
+                                                                    }) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Columns" }), jsx("input", { type: "number", min: 1, value: table.columns.length, onChange: (e) => handleTableColumnCountUpdate(Number(e.target.value) || 1) })] }), jsxs("div", { className: "property-group checkbox-group", children: [jsx("input", { id: "table-show-header", type: "checkbox", checked: table.showHeader !== false, onChange: (e) => handleTableConfigUpdate({ showHeader: e.target.checked }) }), jsx("label", { htmlFor: "table-show-header", children: "Show Header" })] }), jsxs("div", { className: "property-group checkbox-group", children: [jsx("input", { id: "table-zebra-rows", type: "checkbox", checked: Boolean(table.zebraRows), onChange: (e) => handleTableConfigUpdate({ zebraRows: e.target.checked }) }), jsx("label", { htmlFor: "table-zebra-rows", children: "Zebra Rows" })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Row Height" }), 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,
+                                                                    }) })] })] }), jsxs("div", { className: "table-editor-section", children: [jsx("strong", { children: "Columns" }), table.columns.map((column, index) => (jsxs("div", { className: "table-column-editor", children: [jsxs("div", { className: "property-group", children: [jsxs("label", { children: ["Header ", index + 1] }), jsx("input", { type: "text", value: column.header, onChange: (e) => handleTableColumnUpdate(index, { header: e.target.value }) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Field Key" }), 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 = coerceTableRows(prev[selectedField.fieldKey]);
+                                                                                        return {
+                                                                                            ...prev,
+                                                                                            [selectedField.fieldKey]: rows.map((row) => {
+                                                                                                if (row[nextKey] !== undefined)
+                                                                                                    return row;
+                                                                                                return {
+                                                                                                    ...row,
+                                                                                                    [nextKey]: row[previousKey],
+                                                                                                };
+                                                                                            }),
+                                                                                        };
+                                                                                    });
+                                                                                }
+                                                                            } })] }), jsxs("div", { className: "table-column-inline", children: [jsxs("div", { className: "property-group", children: [jsx("label", { children: "Width" }), 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),
+                                                                                    }) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Align" }), jsxs("select", { value: column.align || 'left', onChange: (e) => handleTableColumnUpdate(index, {
+                                                                                        align: e.target.value,
+                                                                                    }), children: [jsx("option", { value: "left", children: "Left" }), jsx("option", { value: "center", children: "Center" }), jsx("option", { value: "right", children: "Right" })] })] })] })] }, column.id)))] }), jsxs("div", { className: "table-editor-section", children: [jsx("strong", { children: "Table Style" }), jsxs("div", { className: "table-column-inline", children: [jsxs("div", { className: "property-group", children: [jsx("label", { children: "Border Width" }), jsx("input", { type: "number", min: 0, value: table.style?.borderWidth ?? 1, onChange: (e) => handleTableStyleUpdate('borderWidth', Math.max(0, Number(e.target.value) || 0)) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Cell Padding" }), jsx("input", { type: "text", value: table.style?.cellPadding || '2px 4px', onChange: (e) => handleTableStyleUpdate('cellPadding', e.target.value) })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Border Color" }), jsx("input", { type: "color", value: table.style?.borderColor || '#000000', onChange: (e) => handleTableStyleUpdate('borderColor', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Header Background" }), jsx("input", { type: "color", value: table.style?.headerBackgroundColor || '#f0f0f0', onChange: (e) => handleTableStyleUpdate('headerBackgroundColor', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Header Text Color" }), jsx("input", { type: "color", value: table.style?.headerTextColor || '#000000', onChange: (e) => handleTableStyleUpdate('headerTextColor', e.target.value) })] }), jsxs("div", { className: "table-column-inline", children: [jsxs("div", { className: "property-group", children: [jsx("label", { children: "Header Font Size" }), jsx("input", { type: "text", value: table.style?.headerFontSize || '10px', onChange: (e) => handleTableStyleUpdate('headerFontSize', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Header Weight" }), jsxs("select", { value: table.style?.headerFontWeight || 'bold', onChange: (e) => handleTableStyleUpdate('headerFontWeight', e.target.value), children: [jsx("option", { value: "normal", children: "Normal" }), jsx("option", { value: "bold", children: "Bold" }), jsx("option", { value: "400", children: "400" }), jsx("option", { value: "500", children: "500" }), jsx("option", { value: "600", children: "600" }), jsx("option", { value: "700", children: "700" })] })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Body Text Color" }), jsx("input", { type: "color", value: table.style?.bodyTextColor || '#000000', onChange: (e) => handleTableStyleUpdate('bodyTextColor', e.target.value) })] }), jsxs("div", { className: "table-column-inline", children: [jsxs("div", { className: "property-group", children: [jsx("label", { children: "Body Font Size" }), jsx("input", { type: "text", value: table.style?.bodyFontSize || '10px', onChange: (e) => handleTableStyleUpdate('bodyFontSize', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Body Weight" }), jsxs("select", { value: table.style?.bodyFontWeight || 'normal', onChange: (e) => handleTableStyleUpdate('bodyFontWeight', e.target.value), children: [jsx("option", { value: "normal", children: "Normal" }), jsx("option", { value: "bold", children: "Bold" }), jsx("option", { value: "400", children: "400" }), jsx("option", { value: "500", children: "500" }), jsx("option", { value: "600", children: "600" }), jsx("option", { value: "700", children: "700" })] })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Zebra Background" }), jsx("input", { type: "color", value: table.style?.zebraBackgroundColor || '#f7f7f7', onChange: (e) => handleTableStyleUpdate('zebraBackgroundColor', e.target.value) })] })] }), jsxs("div", { className: "table-editor-section", children: [jsx("strong", { children: "Sample Rows" }), jsxs("small", { className: "hint", children: ["Preview data for ", selectedField.fieldKey] }), jsxs("div", { className: "table-sample-grid", style: {
+                                                                gridTemplateColumns: `repeat(${table.columns.length}, minmax(90px, 1fr))`,
+                                                            }, children: [table.columns.map((column) => (jsx("div", { className: "table-sample-header", children: column.header }, `sample-header-${column.id}`))), editableRows.map((row, rowIndex) => table.columns.map((column) => (jsx("input", { type: "text", value: String(row[column.fieldKey] ?? ''), onChange: (e) => handleTableSampleCellUpdate(selectedField, table, rowIndex, column.fieldKey, e.target.value) }, `sample-${rowIndex}-${column.id}`))))] }), jsx("button", { className: "btn btn-outline btn-sm", type: "button", onClick: () => handleAddTableSampleRow(selectedField), children: "+ Add Sample Row" })] })] }));
+                                    })(), selectedField.type === 'text' && (jsxs(Fragment, { children: [jsx("button", { type: "button", className: "btn btn-outline btn-sm", style: { marginBottom: 12 }, onClick: handleDuplicateField, children: "Duplicate Field" }), jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Label Style" }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Position" }), jsxs("select", { value: selectedField.style?.labelPosition || 'top', onChange: (e) => handleFieldPropertyUpdate('style.labelPosition', e.target.value), children: [jsx("option", { value: "top", children: "Top" }), jsx("option", { value: "left", children: "Left (Side)" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Vertical Align" }), jsxs("select", { value: selectedField.style?.labelVerticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.labelVerticalAlign', e.target.value), children: [jsx("option", { value: "top", children: "Top" }), jsx("option", { value: "middle", children: "Middle" }), jsx("option", { value: "bottom", children: "Bottom" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Font Size" }), jsx("input", { type: "text", value: selectedField.style?.labelFontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.labelFontSize', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Font Weight" }), jsxs("select", { value: selectedField.style?.labelFontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.labelFontWeight', e.target.value), children: [jsx("option", { value: "normal", children: "Normal" }), jsx("option", { value: "bold", children: "Bold" }), jsx("option", { value: "100", children: "100" }), jsx("option", { value: "200", children: "200" }), jsx("option", { value: "300", children: "300" }), jsx("option", { value: "400", children: "400" }), jsx("option", { value: "500", children: "500" }), jsx("option", { value: "600", children: "600" }), jsx("option", { value: "700", children: "700" }), jsx("option", { value: "800", children: "800" }), jsx("option", { value: "900", children: "900" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Text Transform" }), jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsx("option", { value: "none", children: "None" }), jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsx("option", { value: "lowercase", children: "lowercase" }), jsx("option", { value: "capitalize", children: "Capitalize" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Color" }), jsx("input", { type: "color", value: selectedField.style?.labelColor || '#666666', onChange: (e) => handleFieldPropertyUpdate('style.labelColor', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Label Text Align" }), jsxs("select", { value: selectedField.style?.labelTextAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.labelTextAlign', e.target.value), children: [jsx("option", { value: "left", children: "Left" }), jsx("option", { value: "center", children: "Center" }), jsx("option", { value: "right", children: "Right" })] })] })] }), jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Text Style" }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Font Size" }), jsx("input", { type: "text", value: selectedField.style?.textFontSize || selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.textFontSize', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Font Weight" }), jsxs("select", { value: selectedField.style?.textFontWeight || selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.textFontWeight', e.target.value), children: [jsx("option", { value: "normal", children: "Normal" }), jsx("option", { value: "bold", children: "Bold" }), jsx("option", { value: "100", children: "100" }), jsx("option", { value: "200", children: "200" }), jsx("option", { value: "300", children: "300" }), jsx("option", { value: "400", children: "400" }), jsx("option", { value: "500", children: "500" }), jsx("option", { value: "600", children: "600" }), jsx("option", { value: "700", children: "700" }), jsx("option", { value: "800", children: "800" }), jsx("option", { value: "900", children: "900" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Color" }), jsx("input", { type: "color", value: selectedField.style?.textColor || selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.textColor', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Align" }), jsxs("select", { value: selectedField.style?.textTextAlign || selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textTextAlign', e.target.value), children: [jsx("option", { value: "left", children: "Left" }), jsx("option", { value: "center", children: "Center" }), jsx("option", { value: "right", children: "Right" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Line Height" }), 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) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Transform" }), jsxs("select", { value: selectedField.style?.textTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.textTransform', e.target.value), children: [jsx("option", { value: "none", children: "None" }), jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsx("option", { value: "lowercase", children: "lowercase" }), jsx("option", { value: "capitalize", children: "Capitalize" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Vertical Align" }), jsxs("select", { value: selectedField.style?.textVerticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.textVerticalAlign', e.target.value), children: [jsx("option", { value: "top", children: "Top" }), jsx("option", { value: "middle", children: "Middle" }), jsx("option", { value: "bottom", children: "Bottom" })] })] })] }), jsxs("div", { style: { border: '1px solid #eee', borderRadius: 4, marginBottom: 12, padding: 8 }, children: [jsx("strong", { style: { fontSize: '1em', display: 'block', marginBottom: 6 }, children: "Container Style" }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Vertical Align (Container)" }), jsxs("select", { value: selectedField.style?.verticalAlign || 'top', onChange: (e) => handleFieldPropertyUpdate('style.verticalAlign', e.target.value), children: [jsx("option", { value: "top", children: "Top" }), jsx("option", { value: "middle", children: "Middle" }), jsx("option", { value: "bottom", children: "Bottom" })] })] })] })] })), selectedField.type === 'label' && (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Static Text" }), jsx("input", { type: "text", value: selectedField.staticText || '', onChange: (e) => handleFieldPropertyUpdate('staticText', e.target.value) })] })), selectedField.type === 'qrcode' && (jsxs("div", { className: "property-group", children: [jsx("label", { children: "QR Code Data Fields" }), jsx("small", { className: "hint", children: "Select which fields to encode in the QR code:" }), 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) => (jsxs("label", { style: { display: 'block', marginBottom: '6px', cursor: 'pointer' }, children: [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' && jsxs(Fragment, { children: [jsx("h4", { children: "Style" }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Font Size" }), jsx("input", { type: "text", value: selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.fontSize', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Font Weight" }), jsxs("select", { value: selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.fontWeight', e.target.value), children: [jsx("option", { value: "normal", children: "Normal" }), jsx("option", { value: "bold", children: "Bold" }), jsx("option", { value: "100", children: "100" }), jsx("option", { value: "200", children: "200" }), jsx("option", { value: "300", children: "300" }), jsx("option", { value: "400", children: "400" }), jsx("option", { value: "500", children: "500" }), jsx("option", { value: "600", children: "600" }), jsx("option", { value: "700", children: "700" }), jsx("option", { value: "800", children: "800" }), jsx("option", { value: "900", children: "900" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Color" }), jsx("input", { type: "color", value: selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.color', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Align" }), jsxs("select", { value: selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textAlign', e.target.value), children: [jsx("option", { value: "left", children: "Left" }), jsx("option", { value: "center", children: "Center" }), jsx("option", { value: "right", children: "Right" })] })] }), selectedField.type === 'label' && (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Transform" }), jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsx("option", { value: "none", children: "None" }), jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsx("option", { value: "lowercase", children: "lowercase" }), jsx("option", { value: "capitalize", children: "Capitalize" })] })] }))] }), selectedField.type === 'qrcode' ? (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Background Color" }), jsx("div", { style: {
+                                                            }, style: { marginRight: '6px' } }), field.label || field.fieldKey] }, field.fieldKey))) })] })), selectedField.type !== 'text' && selectedField.type !== 'table' && jsxs(Fragment, { children: [jsx("h4", { children: "Style" }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Font Size" }), jsx("input", { type: "text", value: selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.fontSize', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Font Weight" }), jsxs("select", { value: selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.fontWeight', e.target.value), children: [jsx("option", { value: "normal", children: "Normal" }), jsx("option", { value: "bold", children: "Bold" }), jsx("option", { value: "100", children: "100" }), jsx("option", { value: "200", children: "200" }), jsx("option", { value: "300", children: "300" }), jsx("option", { value: "400", children: "400" }), jsx("option", { value: "500", children: "500" }), jsx("option", { value: "600", children: "600" }), jsx("option", { value: "700", children: "700" }), jsx("option", { value: "800", children: "800" }), jsx("option", { value: "900", children: "900" })] })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Color" }), jsx("input", { type: "color", value: selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.color', e.target.value) })] }), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Align" }), jsxs("select", { value: selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textAlign', e.target.value), children: [jsx("option", { value: "left", children: "Left" }), jsx("option", { value: "center", children: "Center" }), jsx("option", { value: "right", children: "Right" })] })] }), selectedField.type === 'label' && (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Text Transform" }), jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsx("option", { value: "none", children: "None" }), jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsx("option", { value: "lowercase", children: "lowercase" }), jsx("option", { value: "capitalize", children: "Capitalize" })] })] }))] }), selectedField.type === 'qrcode' ? (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Background Color" }), jsx("div", { style: {
                                                     padding: '8px 10px',
                                                     border: '1px solid #ddd',
                                                     borderRadius: '4px',
                                                     backgroundColor: '#f8f8f8',
                                                     color: '#666',
-                                                }, children: "Transparent" })] })) : (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Background Color" }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [jsx("input", { type: "checkbox", id: "transparent-bg-checkbox", checked: selectedField.style?.backgroundColor === 'transparent', onChange: e => handleFieldPropertyUpdate('style.backgroundColor', e.target.checked ? 'transparent' : '#ffffff') }), jsx("label", { htmlFor: "transparent-bg-checkbox", style: { margin: 0, fontWeight: 400, fontSize: '0.95em' }, children: "Transparent" }), selectedField.style?.backgroundColor !== 'transparent' && (jsx("input", { type: "color", value: selectedField.style?.backgroundColor || '#ffffff', onChange: e => handleFieldPropertyUpdate('style.backgroundColor', e.target.value) }))] })] })), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Side" }), jsxs("select", { value: selectedField.side, onChange: (e) => handleFieldPropertyUpdate('side', e.target.value), children: [jsx("option", { value: "front", children: "Front" }), template.sides === 'double' && jsx("option", { value: "back", children: "Back" })] })] }), jsx("button", { className: "btn btn-danger", onClick: handleDeleteField, children: "Delete Field" })] })) : (jsx("p", { className: "no-selection", children: "Select a field to edit its properties" })), jsx("h3", { children: "Sample Data" }), jsxs("div", { className: "sample-data", children: [jsx("p", { className: "hint", children: "Edit sample data to preview:" }), Object.entries(sampleData).map(([key, value]) => (jsxs("div", { className: "property-group", children: [jsx("label", { children: key }), jsx("input", { type: "text", value: String(value), onChange: (e) => setSampleData((prev) => ({ ...prev, [key]: e.target.value })) })] }, key))), jsx("button", { className: "btn btn-outline btn-sm", onClick: () => setSampleData((prev) => ({ ...prev, [`custom_${Date.now()}`]: '' })), children: "+ Add Field" })] }), validationErrors.length > 0 && (jsxs("div", { className: "validation-errors", children: [jsx("h4", { children: "\u26A0\uFE0F Validation Issues" }), jsx("ul", { children: validationErrors.map((error, index) => (jsx("li", { children: error }, index))) })] }))] })] })] }));
+                                                }, children: "Transparent" })] })) : (jsxs("div", { className: "property-group", children: [jsx("label", { children: "Background Color" }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [jsx("input", { type: "checkbox", id: "transparent-bg-checkbox", checked: selectedField.style?.backgroundColor === 'transparent', onChange: e => handleFieldPropertyUpdate('style.backgroundColor', e.target.checked ? 'transparent' : '#ffffff') }), jsx("label", { htmlFor: "transparent-bg-checkbox", style: { margin: 0, fontWeight: 400, fontSize: '0.95em' }, children: "Transparent" }), selectedField.style?.backgroundColor !== 'transparent' && (jsx("input", { type: "color", value: selectedField.style?.backgroundColor || '#ffffff', onChange: e => handleFieldPropertyUpdate('style.backgroundColor', e.target.value) }))] })] })), jsxs("div", { className: "property-group", children: [jsx("label", { children: "Side" }), jsxs("select", { value: selectedField.side, onChange: (e) => handleFieldPropertyUpdate('side', e.target.value), children: [jsx("option", { value: "front", children: "Front" }), template.sides === 'double' && jsx("option", { value: "back", children: "Back" })] })] }), jsx("button", { type: "button", className: "btn btn-danger", onClick: handleDeleteField, children: "Delete Field" })] })) : (jsx("p", { className: "no-selection", children: "Select a field to edit its properties" })), jsx("h3", { children: "Sample Data" }), jsxs("div", { className: "sample-data", children: [jsx("p", { className: "hint", children: "Edit sample data to preview:" }), Object.entries(sampleData)
+                                        .filter(([, value]) => !Array.isArray(value))
+                                        .map(([key, value]) => (jsxs("div", { className: "property-group", children: [jsx("label", { children: key }), jsx("input", { type: "text", value: String(value), onChange: (e) => setSampleData((prev) => ({ ...prev, [key]: e.target.value })) })] }, key))), jsx("button", { type: "button", className: "btn btn-outline btn-sm", onClick: () => setSampleData((prev) => ({ ...prev, [`custom_${Date.now()}`]: '' })), children: "+ Add Field" })] }), validationErrors.length > 0 && (jsxs("div", { className: "validation-errors", children: [jsx("h4", { children: "\u26A0\uFE0F Validation Issues" }), jsx("ul", { children: validationErrors.map((error, index) => (jsx("li", { children: error }, index))) })] }))] })] })] }));
 };
 
 export { IDCardDesigner };