react-id-card-generator 1.0.21 → 1.1.0

package/dist/esm/components/IDCardGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDCardGenerator.js","sources":["../../../src/components/IDCardGenerator.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardGeneratorProps, FieldMapping, IDCardData, IDCardTemplate } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardGenerator - Renders a completed ID card\r\n * \r\n * Takes a template and user data, then renders the filled card.\r\n * This is the component used to display actual ID cards for individual users.\r\n * \r\n * Example:\r\n * ```tsx\r\n * <IDCardGenerator \r\n *   template={myTemplate}\r\n *   data={{ name: 'John Doe', photo: '...' }}\r\n *   side=\"front\"\r\n * />\r\n * ```\r\n */\r\nexport const IDCardGenerator: React.FC<IDCardGeneratorProps> = ({\r\n  template,\r\n  data,\r\n  side = 'front',\r\n  scale = 1,\r\n  className = '',\r\n  style = {},\r\n  onFieldClick,\r\n  editable = false,\r\n}: IDCardGeneratorProps) => {\r\n  // Get fields for the current side only\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    \r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' | undefined = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: don't set alignItems on container if individual alignments are specified\r\n        // Let labelAlignSelf and textAlignSelf handle it\r\n        if (field.style?.labelVerticalAlign || field.style?.textVerticalAlign) {\r\n          alignItems = undefined;\r\n        } else {\r\n          // Fall back to general verticalAlign if individual ones aren't specified\r\n          if (verticalAlign === 'middle') alignItems = 'center';\r\n          else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n          else alignItems = 'flex-start';\r\n        }\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'pointer' : 'default',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      if (onFieldClick) {\r\n        e.stopPropagation();\r\n        onFieldClick(field);\r\n      }\r\n    };\r\n\r\n    const value = getFieldValue(field, data);\r\n\r\n    switch (field.type) {\r\n      case 'text': {\r\n        // Label style properties\r\n        let labelFontSize = field.style?.labelFontSize;\r\n        if (!labelFontSize || labelFontSize === '0.75em') {\r\n          labelFontSize = '12px';\r\n        } else if (!labelFontSize.endsWith('px')) {\r\n          const num = parseFloat(labelFontSize);\r\n          if (!isNaN(num)) labelFontSize = num + 'px';\r\n          else labelFontSize = '12px';\r\n        }\r\n        const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n        const labelColor = field.style?.labelColor || '#666666';\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n        \r\n        // Text/value style properties (separate from label)\r\n        const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n        const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n        const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n        const textTextTransform = field.style?.textTransform || 'none';\r\n        const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n        \r\n        // For row layout (label on left), use individual span alignment\r\n        if (field.style?.labelPosition === 'left') {\r\n          let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n          else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n          \r\n          let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n          else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n          \r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \r\n            fontWeight: labelFontWeight, \r\n            color: labelColor, \r\n            opacity: 0.7, \r\n            marginRight: 8, \r\n            alignSelf: labelAlignSelf, \r\n            whiteSpace: 'nowrap', \r\n            textTransform: labelTextTransform \r\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor, \r\n            alignSelf: textAlignSelf\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n              </span>\r\n            </div>\r\n          );\r\n        } else {\r\n          // For column layout (label on top), let container alignment handle positioning\r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \r\n            fontWeight: labelFontWeight, \r\n            color: labelColor, \r\n            opacity: 0.7, \r\n            textTransform: labelTextTransform,\r\n            width: '100%',\r\n            textAlign: labelTextAlign\r\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor,\r\n            width: '100%',\r\n            textAlign: textTextAlign\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n            </div>\r\n          );\r\n        }\r\n      }\r\n\r\n      case 'label': {\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-label\"\r\n          >\r\n            <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || ''}</span>\r\n          </div>\r\n        );\r\n      }\r\n\r\n      case 'image':\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n          >\r\n            {value ? (\r\n              <img\r\n                src={String(value)}\r\n                alt={field.label || 'Image'}\r\n                style={{\r\n                  width: '100%',\r\n                  display: 'block',\r\n                }}\r\n              />\r\n            ) : (\r\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#e0e0e0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                {field.label || 'Photo'}\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\n      case 'qrcode':\n        const qrSize = getQrCodeSize(field.position.width, field.position.height);\n        const qrDataUrl = field.qrFields?.length\n          ? generateQrCodeFromFields(\n              data,\n              field.qrFields,\n              qrSize\n            )\n          : '';\n\n        return (\n          <div\n            key={field.id}\n            id={field.id}\n            style={combinedStyle}\n            onClick={handleClick}\n            className=\"idcard-field idcard-field-qrcode\"\n          >\n            {qrDataUrl ? (\n              <img\n                src={qrDataUrl}\n                alt=\"QR Code\"\n                data-qr-code-image=\"true\"\n                style={{\n                  width: `${qrSize}px`,\n                  height: `${qrSize}px`,\n                  display: 'block',\n                  backgroundColor: 'transparent',\n                  objectFit: 'contain',\n                  objectPosition: 'center',\n                  maxWidth: '100%',\n                  maxHeight: '100%',\n                  flexShrink: 0,\n                }}\n              />\n            ) : (\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#f0f0f0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                QR Code\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: '#fff',\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div\r\n      id={side === 'front' ? 'idcardfront' : 'idcardback'}\r\n      className={`idcard-container idcard-${side} ${className}`}\r\n      style={cardStyle}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Get field value from data based on field configuration\r\n */\r\nfunction getFieldValue(field: FieldMapping, data: IDCardData): string | number | undefined {\r\n  if (field.type === 'label') {\r\n    return field.staticText;\r\n  }\r\n\r\n  const value = data[field.fieldKey];\r\n\r\n  // Handle array values (like department)\r\n  if (Array.isArray(value)) {\r\n    return value[0];\r\n  }\r\n\r\n  return value as string | number | undefined;\r\n}\r\n\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"IDCardGenerator.js","sources":["../../../src/components/IDCardGenerator.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardGeneratorProps, FieldMapping, IDCardData, IDCardTemplate } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\nimport { IDCardTable } from './IDCardTable';\n\r\n/**\r\n * IDCardGenerator - Renders a completed ID card\r\n * \r\n * Takes a template and user data, then renders the filled card.\r\n * This is the component used to display actual ID cards for individual users.\r\n * \r\n * Example:\r\n * ```tsx\r\n * <IDCardGenerator \r\n *   template={myTemplate}\r\n *   data={{ name: 'John Doe', photo: '...' }}\r\n *   side=\"front\"\r\n * />\r\n * ```\r\n */\r\nexport const IDCardGenerator: React.FC<IDCardGeneratorProps> = ({\r\n  template,\r\n  data,\r\n  side = 'front',\r\n  scale = 1,\r\n  className = '',\r\n  style = {},\r\n  onFieldClick,\r\n  editable = false,\r\n}: IDCardGeneratorProps) => {\r\n  // Get fields for the current side only\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    \r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' | undefined = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: don't set alignItems on container if individual alignments are specified\r\n        // Let labelAlignSelf and textAlignSelf handle it\r\n        if (field.style?.labelVerticalAlign || field.style?.textVerticalAlign) {\r\n          alignItems = undefined;\r\n        } else {\r\n          // Fall back to general verticalAlign if individual ones aren't specified\r\n          if (verticalAlign === 'middle') alignItems = 'center';\r\n          else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n          else alignItems = 'flex-start';\r\n        }\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'pointer' : 'default',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      if (onFieldClick) {\r\n        e.stopPropagation();\r\n        onFieldClick(field);\r\n      }\r\n    };\r\n\r\n    const value = getFieldValue(field, data);\r\n\r\n    switch (field.type) {\r\n      case 'text': {\r\n        // Label style properties\r\n        let labelFontSize = field.style?.labelFontSize;\r\n        if (!labelFontSize || labelFontSize === '0.75em') {\r\n          labelFontSize = '12px';\r\n        } else if (!labelFontSize.endsWith('px')) {\r\n          const num = parseFloat(labelFontSize);\r\n          if (!isNaN(num)) labelFontSize = num + 'px';\r\n          else labelFontSize = '12px';\r\n        }\r\n        const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n        const labelColor = field.style?.labelColor || '#666666';\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n        \r\n        // Text/value style properties (separate from label)\r\n        const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n        const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n        const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n        const textTextTransform = field.style?.textTransform || 'none';\r\n        const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n        \r\n        // For row layout (label on left), use individual span alignment\r\n        if (field.style?.labelPosition === 'left') {\r\n          let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n          else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n          \r\n          let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n          else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n          \r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \n            fontWeight: labelFontWeight, \n            color: labelColor, \n            marginRight: 8, \n            alignSelf: labelAlignSelf, \n            whiteSpace: 'nowrap', \n            textTransform: labelTextTransform \r\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor, \r\n            alignSelf: textAlignSelf\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n              </span>\r\n            </div>\r\n          );\r\n        } else {\r\n          // For column layout (label on top), let container alignment handle positioning\r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \n            fontWeight: labelFontWeight, \n            color: labelColor, \n            textTransform: labelTextTransform,\n            width: '100%',\n            textAlign: labelTextAlign\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor,\r\n            width: '100%',\r\n            textAlign: textTextAlign\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n            </div>\r\n          );\r\n        }\r\n      }\r\n\r\n      case 'label': {\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-label\"\r\n          >\r\n            <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || ''}</span>\r\n          </div>\r\n        );\r\n      }\r\n\r\n      case 'image':\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n          >\r\n            {value ? (\r\n              <img\r\n                src={String(value)}\r\n                alt={field.label || 'Image'}\r\n                style={{\r\n                  width: '100%',\r\n                  display: 'block',\r\n                }}\r\n              />\r\n            ) : (\r\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#e0e0e0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                {field.label || 'Photo'}\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\n      case 'qrcode':\n        const qrSize = getQrCodeSize(field.position.width, field.position.height);\n        const qrDataUrl = field.qrFields?.length\n          ? generateQrCodeFromFields(\n              data,\n              field.qrFields,\n              qrSize\n            )\n          : '';\n\n        return (\n          <div\n            key={field.id}\n            id={field.id}\n            style={combinedStyle}\n            onClick={handleClick}\n            className=\"idcard-field idcard-field-qrcode\"\n          >\n            {qrDataUrl ? (\n              <img\n                src={qrDataUrl}\n                alt=\"QR Code\"\n                data-qr-code-image=\"true\"\n                style={{\n                  width: `${qrSize}px`,\n                  height: `${qrSize}px`,\n                  display: 'block',\n                  backgroundColor: 'transparent',\n                  objectFit: 'contain',\n                  objectPosition: 'center',\n                  maxWidth: '100%',\n                  maxHeight: '100%',\n                  flexShrink: 0,\n                }}\n              />\n            ) : (\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#f0f0f0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                QR Code\r\n              </div>\r\n            )}\n          </div>\n        );\n\n      case 'table':\n        return (\n          <div\n            key={field.id}\n            id={field.id}\n            style={combinedStyle}\n            onClick={handleClick}\n            className=\"idcard-field idcard-field-table\"\n          >\n            <IDCardTable field={field} data={data} />\n          </div>\n        );\n\n      default:\n        return null;\n    }\n  };\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: '#fff',\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div\r\n      id={side === 'front' ? 'idcardfront' : 'idcardback'}\r\n      className={`idcard-container idcard-${side} ${className}`}\r\n      style={cardStyle}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Get field value from data based on field configuration\r\n */\r\nfunction getFieldValue(field: FieldMapping, data: IDCardData): string | number | undefined {\n  if (field.type === 'label') {\n    return field.staticText;\n  }\n\n  const value = data[field.fieldKey];\n\n  // Handle array values (like department)\n  if (Array.isArray(value)) {\n    const firstValue = value[0];\n    if (firstValue && typeof firstValue === 'object') {\n      return undefined;\n    }\n\n    return firstValue;\n  }\n\n  return value as string | number | undefined;\n}\n\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/IDCardPreview.js

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { positionToStyle, fieldStyleToCSS } from '../utils/styleUtils.js';
 import { getQrCodeSize, generateQrCodeFromFields } from '../core/qrUtils.js';
+import { IDCardTable } from './IDCardTable.js';
 
 /**
  * IDCardPreview - Interactive card preview component
@@ -160,7 +161,6 @@ const IDCardPreview = ({ template, data, side, scale = 1, showGrid = false, onFi
                             fontSize: labelFontSize,
                             fontWeight: labelFontWeight,
                             color: labelColor,
-                            opacity: 0.7,
                             marginRight: 8,
                             alignSelf: labelAlignSelf,
                             whiteSpace: 'nowrap',
@@ -181,7 +181,6 @@ const IDCardPreview = ({ template, data, side, scale = 1, showGrid = false, onFi
                             fontSize: labelFontSize,
                             fontWeight: labelFontWeight,
                             color: labelColor,
-                            opacity: 0.7,
                             textTransform: labelTextTransform,
                             width: '100%',
                             textAlign: labelTextAlign
@@ -243,6 +242,8 @@ const IDCardPreview = ({ template, data, side, scale = 1, showGrid = false, onFi
                             color: '#666',
                             border: '1px dashed #ccc',
                         }, children: "QR Code" }));
+                case 'table':
+                    return jsx(IDCardTable, { field: field, data: data });
                 default:
                     return null;
             }

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

@@ -1 +1 @@
-{"version":3,"file":"IDCardPreview.js","sources":["../../../src/components/IDCardPreview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardPreviewProps, FieldMapping } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardPreview - Interactive card preview component\r\n * \r\n * Renders an ID card with:\r\n * - Field selection and highlighting\r\n * - Resize handles for selected fields\r\n * - Grid overlay for alignment\r\n * - Dynamic field rendering based on type\r\n * \r\n * Used inside the designer for visual editing\r\n */\r\nexport const IDCardPreview: React.FC<IDCardPreviewProps> = ({\r\n  template,\r\n  data,\r\n  side,\r\n  scale = 1,\r\n  showGrid = false,\r\n  onFieldSelect,\r\n  selectedFieldId,\r\n  editable = true,\r\n  onFieldUpdate,\r\n}: IDCardPreviewProps) => {\r\n  // Get only fields that belong to the current side\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render resize handles for selected field\r\n  const renderResizeHandles = (field: FieldMapping) => {\r\n    if (field.id !== selectedFieldId || !editable) return null;\r\n\r\n    const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\r\n    const handleStyle: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width: '8px',\r\n      height: '8px',\r\n      backgroundColor: '#2196F3',\r\n      border: '1px solid #fff',\r\n      borderRadius: '2px',\r\n      zIndex: 1000,\r\n    };\r\n\r\n    const positions: Record<string, React.CSSProperties> = {\r\n      n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },\r\n      s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },\r\n      e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },\r\n      w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },\r\n      ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },\r\n      nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },\r\n      se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },\r\n      sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },\r\n    };\r\n\r\n    return handles.map((handle) => (\r\n      <div\r\n        key={handle}\r\n        className={`resize-handle resize-handle-${handle}`}\r\n        style={{ ...handleStyle, ...positions[handle] }}\r\n        data-handle={handle}\r\n      />\r\n    ));\r\n  };\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    const isSelected = field.id === selectedFieldId;\r\n\r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: verticalAlign controls alignItems (vertical)\r\n        if (verticalAlign === 'middle') alignItems = 'center';\r\n        else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n        // justifyContent can be left as default for row\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'move' : 'default',\n      outline: isSelected ? '2px solid #2196F3' : 'none',\n      outlineOffset: '1px',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onFieldSelect?.(field);\r\n    };\r\n\r\n    const value = data[field.fieldKey];\r\n\r\n    const content = (() => {\r\n\r\n      switch (field.type) {\r\n        case 'text': {\r\n          // Label style properties\r\n          // Always use px for label font size, default 12px\r\n          let labelFontSize = field.style?.labelFontSize;\r\n          if (!labelFontSize || labelFontSize === '0.75em') {\r\n            labelFontSize = '12px';\r\n          } else if (!labelFontSize.endsWith('px')) {\r\n            const num = parseFloat(labelFontSize);\r\n            if (!isNaN(num)) labelFontSize = num + 'px';\r\n            else labelFontSize = '12px';\r\n          }\r\n          const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n          const labelColor = field.style?.labelColor || '#666666';\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n          \r\n          // Text/value style properties (separate from label)\r\n          const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n          const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n          const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n          const textTextTransform = field.style?.textTransform || 'none';\r\n          const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n          \r\n          // For row layout (label on left), use individual span alignment\r\n          if (field.style?.labelPosition === 'left') {\r\n            let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n            else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n            \r\n            let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n            else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n            \r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \r\n              fontWeight: labelFontWeight, \r\n              color: labelColor, \r\n              opacity: 0.7, \r\n              marginRight: 8, \r\n              alignSelf: labelAlignSelf, \r\n              whiteSpace: 'nowrap', \r\n              textTransform: labelTextTransform \r\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor, \r\n              alignSelf: textAlignSelf\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                  <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n                </span>\r\n              </>\r\n            );\r\n          } else {\r\n            // For column layout (label on top), let container alignment handle positioning\r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \r\n              fontWeight: labelFontWeight, \r\n              color: labelColor, \r\n              opacity: 0.7, \r\n              textTransform: labelTextTransform,\r\n              width: '100%',\r\n              textAlign: labelTextAlign\r\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor,\r\n              width: '100%',\r\n              textAlign: textTextAlign\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n              </>\r\n            );\r\n          }\r\n        }\r\n\r\n        case 'label': {\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          return <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || 'Label'}</span>;\r\n        }\r\n\r\n        case 'image':\r\n          return value ? (\r\n            <img\r\n              src={String(value)}\r\n              alt={field.label || 'Image'}\r\n              style={{\r\n                width: '100%',\r\n                display: 'block',\r\n              }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#e0e0e0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                flexDirection: 'column',\r\n              }}\r\n            >\r\n              <span>📷</span>\r\n              <span>{field.label || 'Photo'}</span>\r\n            </div>\r\n          );\r\n\n        case 'qrcode':\n          const qrSize = getQrCodeSize(field.position.width, field.position.height);\n          const qrDataUrl = field.qrFields?.length\n            ? generateQrCodeFromFields(data, field.qrFields, qrSize)\n            : '';\n\r\n          return qrDataUrl ? (\r\n            <img\n              src={qrDataUrl}\n              alt=\"QR Code\"\n              data-qr-code-image=\"true\"\n              style={{\n                width: `${qrSize}px`,\n                height: `${qrSize}px`,\n                display: 'block',\n                pointerEvents: 'none',\n                backgroundColor: 'transparent',\n                objectFit: 'contain',\n                objectPosition: 'center',\n                maxWidth: '100%',\n                maxHeight: '100%',\n                flexShrink: 0,\n              }}\n            />\n          ) : (\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#f0f0f0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                border: '1px dashed #ccc',\r\n              }}\r\n            >\r\n              QR Code\r\n            </div>\r\n          );\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    })();\r\n\r\n    return (\r\n      <div\r\n        key={field.id}\r\n        id={`preview-${field.id}`}\r\n        style={combinedStyle}\r\n        onClick={handleClick}\r\n        className={`preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`}\r\n      >\r\n        {content}\r\n        {renderResizeHandles(field)}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',\r\n    border: '1px solid #ddd',\r\n  };\r\n\r\n  // Grid overlay style\r\n  const gridStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backgroundImage: showGrid\r\n      ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'\r\n      : 'none',\r\n    backgroundSize: '10px 10px',\r\n    pointerEvents: 'none',\r\n    zIndex: 999,\r\n  };\r\n\r\n  const handleContainerClick = () => {\r\n    onFieldSelect?.(null);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"idcard-preview-container\"\r\n      style={cardStyle}\r\n      onClick={handleContainerClick}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n            pointerEvents: 'none',\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n\r\n      {/* Grid overlay */}\r\n      {showGrid && <div style={gridStyle} />}\r\n\r\n      {/* Empty state */}\r\n      {!backgroundImage && fieldsToRender.length === 0 && (\r\n        <div\r\n          style={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            left: '50%',\r\n            transform: 'translate(-50%, -50%)',\r\n            textAlign: 'center',\r\n            color: '#999',\r\n            fontSize: '14px',\r\n          }}\r\n        >\r\n          <p>Upload a background image</p>\r\n          <p>and add fields to get started</p>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"IDCardPreview.js","sources":["../../../src/components/IDCardPreview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardPreviewProps, FieldMapping } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\nimport { IDCardTable } from './IDCardTable';\n\r\n/**\r\n * IDCardPreview - Interactive card preview component\r\n * \r\n * Renders an ID card with:\r\n * - Field selection and highlighting\r\n * - Resize handles for selected fields\r\n * - Grid overlay for alignment\r\n * - Dynamic field rendering based on type\r\n * \r\n * Used inside the designer for visual editing\r\n */\r\nexport const IDCardPreview: React.FC<IDCardPreviewProps> = ({\r\n  template,\r\n  data,\r\n  side,\r\n  scale = 1,\r\n  showGrid = false,\r\n  onFieldSelect,\r\n  selectedFieldId,\r\n  editable = true,\r\n  onFieldUpdate,\r\n}: IDCardPreviewProps) => {\r\n  // Get only fields that belong to the current side\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render resize handles for selected field\r\n  const renderResizeHandles = (field: FieldMapping) => {\r\n    if (field.id !== selectedFieldId || !editable) return null;\r\n\r\n    const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\r\n    const handleStyle: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width: '8px',\r\n      height: '8px',\r\n      backgroundColor: '#2196F3',\r\n      border: '1px solid #fff',\r\n      borderRadius: '2px',\r\n      zIndex: 1000,\r\n    };\r\n\r\n    const positions: Record<string, React.CSSProperties> = {\r\n      n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },\r\n      s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },\r\n      e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },\r\n      w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },\r\n      ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },\r\n      nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },\r\n      se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },\r\n      sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },\r\n    };\r\n\r\n    return handles.map((handle) => (\r\n      <div\r\n        key={handle}\r\n        className={`resize-handle resize-handle-${handle}`}\r\n        style={{ ...handleStyle, ...positions[handle] }}\r\n        data-handle={handle}\r\n      />\r\n    ));\r\n  };\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    const isSelected = field.id === selectedFieldId;\r\n\r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: verticalAlign controls alignItems (vertical)\r\n        if (verticalAlign === 'middle') alignItems = 'center';\r\n        else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n        // justifyContent can be left as default for row\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'move' : 'default',\n      outline: isSelected ? '2px solid #2196F3' : 'none',\n      outlineOffset: '1px',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onFieldSelect?.(field);\r\n    };\r\n\r\n    const value = data[field.fieldKey];\r\n\r\n    const content = (() => {\r\n\r\n      switch (field.type) {\r\n        case 'text': {\r\n          // Label style properties\r\n          // Always use px for label font size, default 12px\r\n          let labelFontSize = field.style?.labelFontSize;\r\n          if (!labelFontSize || labelFontSize === '0.75em') {\r\n            labelFontSize = '12px';\r\n          } else if (!labelFontSize.endsWith('px')) {\r\n            const num = parseFloat(labelFontSize);\r\n            if (!isNaN(num)) labelFontSize = num + 'px';\r\n            else labelFontSize = '12px';\r\n          }\r\n          const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n          const labelColor = field.style?.labelColor || '#666666';\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n          \r\n          // Text/value style properties (separate from label)\r\n          const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n          const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n          const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n          const textTextTransform = field.style?.textTransform || 'none';\r\n          const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n          \r\n          // For row layout (label on left), use individual span alignment\r\n          if (field.style?.labelPosition === 'left') {\r\n            let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n            else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n            \r\n            let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n            else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n            \r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \n              fontWeight: labelFontWeight, \n              color: labelColor, \n              marginRight: 8, \n              alignSelf: labelAlignSelf, \n              whiteSpace: 'nowrap', \n              textTransform: labelTextTransform \r\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor, \r\n              alignSelf: textAlignSelf\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                  <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n                </span>\r\n              </>\r\n            );\r\n          } else {\r\n            // For column layout (label on top), let container alignment handle positioning\r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \n              fontWeight: labelFontWeight, \n              color: labelColor, \n              textTransform: labelTextTransform,\n              width: '100%',\n              textAlign: labelTextAlign\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor,\r\n              width: '100%',\r\n              textAlign: textTextAlign\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n              </>\r\n            );\r\n          }\r\n        }\r\n\r\n        case 'label': {\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          return <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || 'Label'}</span>;\r\n        }\r\n\r\n        case 'image':\r\n          return value ? (\r\n            <img\r\n              src={String(value)}\r\n              alt={field.label || 'Image'}\r\n              style={{\r\n                width: '100%',\r\n                display: 'block',\r\n              }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#e0e0e0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                flexDirection: 'column',\r\n              }}\r\n            >\r\n              <span>📷</span>\r\n              <span>{field.label || 'Photo'}</span>\r\n            </div>\r\n          );\r\n\n        case 'qrcode':\n          const qrSize = getQrCodeSize(field.position.width, field.position.height);\n          const qrDataUrl = field.qrFields?.length\n            ? generateQrCodeFromFields(data, field.qrFields, qrSize)\n            : '';\n\r\n          return qrDataUrl ? (\r\n            <img\n              src={qrDataUrl}\n              alt=\"QR Code\"\n              data-qr-code-image=\"true\"\n              style={{\n                width: `${qrSize}px`,\n                height: `${qrSize}px`,\n                display: 'block',\n                pointerEvents: 'none',\n                backgroundColor: 'transparent',\n                objectFit: 'contain',\n                objectPosition: 'center',\n                maxWidth: '100%',\n                maxHeight: '100%',\n                flexShrink: 0,\n              }}\n            />\n          ) : (\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#f0f0f0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                border: '1px dashed #ccc',\r\n              }}\r\n            >\r\n              QR Code\r\n            </div>\r\n          );\n\n        case 'table':\n          return <IDCardTable field={field} data={data} />;\n\n        default:\n          return null;\n      }\n    })();\r\n\r\n    return (\r\n      <div\r\n        key={field.id}\r\n        id={`preview-${field.id}`}\r\n        style={combinedStyle}\r\n        onClick={handleClick}\r\n        className={`preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`}\r\n      >\r\n        {content}\r\n        {renderResizeHandles(field)}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',\r\n    border: '1px solid #ddd',\r\n  };\r\n\r\n  // Grid overlay style\r\n  const gridStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backgroundImage: showGrid\r\n      ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'\r\n      : 'none',\r\n    backgroundSize: '10px 10px',\r\n    pointerEvents: 'none',\r\n    zIndex: 999,\r\n  };\r\n\r\n  const handleContainerClick = () => {\r\n    onFieldSelect?.(null);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"idcard-preview-container\"\r\n      style={cardStyle}\r\n      onClick={handleContainerClick}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n            pointerEvents: 'none',\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n\r\n      {/* Grid overlay */}\r\n      {showGrid && <div style={gridStyle} />}\r\n\r\n      {/* Empty state */}\r\n      {!backgroundImage && fieldsToRender.length === 0 && (\r\n        <div\r\n          style={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            left: '50%',\r\n            transform: 'translate(-50%, -50%)',\r\n            textAlign: 'center',\r\n            color: '#999',\r\n            fontSize: '14px',\r\n          }}\r\n        >\r\n          <p>Upload a background image</p>\r\n          <p>and add fields to get started</p>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/components/IDCardTable.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { normalizeTableConfig, getRenderedTableRows } from '../utils/tableUtils.js';
+
+const IDCardTable = ({ field, data }) => {
+    const table = normalizeTableConfig(field.table);
+    const rows = getRenderedTableRows(data, field.fieldKey, table);
+    const borderWidth = table.style?.borderWidth ?? 1;
+    const borderColor = table.style?.borderColor || '#000000';
+    const border = `${borderWidth}px solid ${borderColor}`;
+    const gridTemplateColumns = table.columns
+        .map((column) => `minmax(0, ${Math.max(column.width || 1, 0.1)}fr)`)
+        .join(' ');
+    const gridAutoRows = table.rowHeight ? `${table.rowHeight}px` : 'minmax(0, 1fr)';
+    const getCellJustify = (align) => {
+        if (align === 'center')
+            return 'center';
+        if (align === 'right')
+            return 'flex-end';
+        return 'flex-start';
+    };
+    const baseCellStyle = {
+        minWidth: 0,
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        padding: table.style?.cellPadding || '2px 4px',
+        borderRight: border,
+        borderBottom: border,
+        display: 'flex',
+        alignItems: 'center',
+        lineHeight: 1.2,
+        whiteSpace: 'nowrap',
+    };
+    return (jsxs("div", { className: "idcard-table", style: {
+            width: '100%',
+            height: '100%',
+            borderTop: border,
+            borderLeft: border,
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            display: 'grid',
+            gridTemplateColumns,
+            gridAutoRows,
+            fontFamily: field.style?.fontFamily,
+            backgroundColor: field.style?.backgroundColor || 'transparent',
+        }, children: [table.showHeader &&
+                table.columns.map((column) => (jsx("div", { className: "idcard-table-cell idcard-table-header-cell", style: {
+                        ...baseCellStyle,
+                        justifyContent: getCellJustify(column.align),
+                        textAlign: column.align || 'left',
+                        backgroundColor: table.style?.headerBackgroundColor || '#f0f0f0',
+                        color: table.style?.headerTextColor || '#000000',
+                        fontSize: table.style?.headerFontSize || '10px',
+                        fontWeight: table.style?.headerFontWeight || 'bold',
+                    }, children: jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: column.header }) }, `header-${column.id}`))), rows.flatMap((row, rowIndex) => table.columns.map((column) => {
+                const value = row[column.fieldKey];
+                const zebraBackground = table.zebraRows && rowIndex % 2 === 1
+                    ? table.style?.zebraBackgroundColor || '#f7f7f7'
+                    : 'transparent';
+                return (jsx("div", { className: "idcard-table-cell idcard-table-body-cell", style: {
+                        ...baseCellStyle,
+                        justifyContent: getCellJustify(column.align),
+                        textAlign: column.align || 'left',
+                        backgroundColor: zebraBackground,
+                        color: table.style?.bodyTextColor || '#000000',
+                        fontSize: table.style?.bodyFontSize || '10px',
+                        fontWeight: table.style?.bodyFontWeight || 'normal',
+                    }, children: jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value === null || value === undefined ? '' : String(value) }) }, `${rowIndex}-${column.id}`));
+            }))] }));
+};
+
+export { IDCardTable };
+//# sourceMappingURL=IDCardTable.js.map

package/dist/esm/components/IDCardTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDCardTable.js","sources":["../../../src/components/IDCardTable.tsx"],"sourcesContent":["import React from 'react';\nimport type { FieldMapping, IDCardData } from '../types';\nimport { getRenderedTableRows, normalizeTableConfig } from '../utils/tableUtils';\n\ninterface IDCardTableProps {\n  field: FieldMapping;\n  data: IDCardData;\n}\n\nexport const IDCardTable: React.FC<IDCardTableProps> = ({ field, data }) => {\n  const table = normalizeTableConfig(field.table);\n  const rows = getRenderedTableRows(data, field.fieldKey, table);\n  const borderWidth = table.style?.borderWidth ?? 1;\n  const borderColor = table.style?.borderColor || '#000000';\n  const border = `${borderWidth}px solid ${borderColor}`;\n  const gridTemplateColumns = table.columns\n    .map((column) => `minmax(0, ${Math.max(column.width || 1, 0.1)}fr)`)\n    .join(' ');\n  const gridAutoRows = table.rowHeight ? `${table.rowHeight}px` : 'minmax(0, 1fr)';\n\n  const getCellJustify = (align: 'left' | 'center' | 'right' | undefined) => {\n    if (align === 'center') return 'center';\n    if (align === 'right') return 'flex-end';\n    return 'flex-start';\n  };\n\n  const baseCellStyle: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n    boxSizing: 'border-box',\n    padding: table.style?.cellPadding || '2px 4px',\n    borderRight: border,\n    borderBottom: border,\n    display: 'flex',\n    alignItems: 'center',\n    lineHeight: 1.2,\n    whiteSpace: 'nowrap',\n  };\n\n  return (\n    <div\n      className=\"idcard-table\"\n      style={{\n        width: '100%',\n        height: '100%',\n        borderTop: border,\n        borderLeft: border,\n        boxSizing: 'border-box',\n        overflow: 'hidden',\n        display: 'grid',\n        gridTemplateColumns,\n        gridAutoRows,\n        fontFamily: field.style?.fontFamily,\n        backgroundColor: field.style?.backgroundColor || 'transparent',\n      }}\n    >\n      {table.showHeader &&\n        table.columns.map((column) => (\n          <div\n            key={`header-${column.id}`}\n            className=\"idcard-table-cell idcard-table-header-cell\"\n            style={{\n              ...baseCellStyle,\n              justifyContent: getCellJustify(column.align),\n              textAlign: column.align || 'left',\n              backgroundColor: table.style?.headerBackgroundColor || '#f0f0f0',\n              color: table.style?.headerTextColor || '#000000',\n              fontSize: table.style?.headerFontSize || '10px',\n              fontWeight: table.style?.headerFontWeight || 'bold',\n            }}\n          >\n            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n              {column.header}\n            </span>\n          </div>\n        ))}\n\n      {rows.flatMap((row, rowIndex) =>\n        table.columns.map((column) => {\n          const value = row[column.fieldKey];\n          const zebraBackground =\n            table.zebraRows && rowIndex % 2 === 1\n              ? table.style?.zebraBackgroundColor || '#f7f7f7'\n              : 'transparent';\n\n          return (\n            <div\n              key={`${rowIndex}-${column.id}`}\n              className=\"idcard-table-cell idcard-table-body-cell\"\n              style={{\n                ...baseCellStyle,\n                justifyContent: getCellJustify(column.align),\n                textAlign: column.align || 'left',\n                backgroundColor: zebraBackground,\n                color: table.style?.bodyTextColor || '#000000',\n                fontSize: table.style?.bodyFontSize || '10px',\n                fontWeight: table.style?.bodyFontWeight || 'normal',\n              }}\n            >\n              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n                {value === null || value === undefined ? '' : String(value)}\n              </span>\n            </div>\n          );\n        })\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/index.js

@@ -9,4 +9,5 @@ export { downloadIDCardAsImage, downloadIDCardAsPDF, exportIDCard } from './core
 export { createDefaultTemplate, exportTemplateAsJSON, generateId, imageFileToBase64, importTemplateFromJSON, listTemplatesFromLocal, loadTemplateFromLocal, removeTemplateFromLocal, saveTemplateToLocal } from './storage/templateStorage.js';
 export { isFieldInBounds, validateCardSize, validateField, validateTemplate } from './utils/validators.js';
 export { cn, defaultFieldStyles, fieldStyleToCSS, mergeStyles, positionToStyle, toReactStyle } from './utils/styleUtils.js';
+export { createDefaultTableColumns, createDefaultTableConfig, normalizeTableConfig } from './utils/tableUtils.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/esm/storage/templateStorage.js

@@ -131,8 +131,8 @@ function createDefaultTemplate(name = 'New Template') {
         orientation: 'landscape',
         sides: 'single',
         cardSize: {
-            width: 340,
-            height: 215,
+            width: 640,
+            height: 415,
             unit: 'px',
         },
         backgrounds: {},

package/dist/esm/storage/templateStorage.js.map

@@ -1 +1 @@
-{"version":3,"file":"templateStorage.js","sources":["../../../src/storage/templateStorage.ts"],"sourcesContent":["import type { IDCardTemplate } from '../types';\r\n\r\nconst STORAGE_PREFIX = 'idcard_template_';\r\n\r\n/**\r\n * Save a template to browser localStorage\r\n * @param key - Unique identifier for the template\r\n * @param template - The template to save\r\n * @throws Error if localStorage is unavailable or quota exceeded\r\n */\r\nexport function saveTemplateToLocal(key: string, template: IDCardTemplate): void {\r\n  try {\r\n    const data = JSON.stringify(template);\r\n    localStorage.setItem(`${STORAGE_PREFIX}${key}`, data);\r\n  } catch (error) {\r\n    console.error('Failed to save template:', error);\r\n    throw new Error('Failed to save template to localStorage');\r\n  }\r\n}\r\n\r\n/**\r\n * Load a template from browser localStorage\r\n * @param key - Template identifier\r\n * @returns The template, or null if not found or invalid\r\n */\r\nexport function loadTemplateFromLocal(key: string): IDCardTemplate | null {\r\n  try {\r\n    const data = localStorage.getItem(`${STORAGE_PREFIX}${key}`);\r\n    if (!data) return null;\r\n    return JSON.parse(data) as IDCardTemplate;\r\n  } catch (error) {\r\n    console.error('Failed to load template:', error);\r\n    return null;\r\n  }\r\n}\r\n\r\n/**\r\n * Get all saved template keys from localStorage\r\n * @returns Array of template keys (without the prefix)\r\n */\r\nexport function listTemplatesFromLocal(): string[] {\r\n  const keys: string[] = [];\r\n  for (let i = 0; i < localStorage.length; i++) {\r\n    const key = localStorage.key(i);\r\n    if (key?.startsWith(STORAGE_PREFIX)) {\r\n      keys.push(key.replace(STORAGE_PREFIX, ''));\r\n    }\r\n  }\r\n  return keys;\r\n}\r\n\r\n/**\r\n * Remove a template from localStorage\r\n * @param key - Template identifier to remove\r\n */\r\nexport function removeTemplateFromLocal(key: string): void {\r\n  localStorage.removeItem(`${STORAGE_PREFIX}${key}`);\r\n}\r\n\r\n/**\r\n * Export a template as a downloadable JSON file\r\n * @param template - The template to export\r\n * @param filename - Optional custom filename (defaults to template name)\r\n */\r\nexport function exportTemplateAsJSON(template: IDCardTemplate, filename?: string): void {\r\n  const data = JSON.stringify(template, null, 2);\r\n  const blob = new Blob([data], { type: 'application/json' });\r\n  const url = URL.createObjectURL(blob);\r\n\r\n  const link = document.createElement('a');\r\n  link.href = url;\r\n  link.download = filename || `${template.name || 'template'}.json`;\r\n  link.click();\r\n\r\n  URL.revokeObjectURL(url);\r\n}\r\n\r\n/**\r\n * Import a template from a JSON file\r\n * @param file - The JSON file to read\r\n * @returns Promise that resolves to the parsed template\r\n */\r\nexport function importTemplateFromJSON(file: File): Promise<IDCardTemplate> {\r\n  return new Promise((resolve, reject) => {\r\n    const reader = new FileReader();\r\n\r\n    reader.onload = (event) => {\r\n      try {\r\n        const data = JSON.parse(event.target?.result as string);\r\n        resolve(data as IDCardTemplate);\r\n      } catch (error) {\r\n        reject(new Error('Invalid JSON file'));\r\n      }\r\n    };\r\n\r\n    reader.onerror = () => {\r\n      reject(new Error('Failed to read file'));\r\n    };\r\n\r\n    reader.readAsText(file);\r\n  });\r\n}\r\n\r\n/**\r\n * Convert an image file to a base64 data URL\r\n * Useful for embedding images in templates\r\n * @param file - Image file (JPG, PNG, etc.)\r\n * @returns Promise that resolves to a base64 data URL\r\n */\r\nexport function imageFileToBase64(file: File): Promise<string> {\r\n  return new Promise((resolve, reject) => {\r\n    const reader = new FileReader();\r\n\r\n    reader.onload = (event) => {\r\n      resolve(event.target?.result as string);\r\n    };\r\n\r\n    reader.onerror = () => {\r\n      reject(new Error('Failed to read image file'));\r\n    };\r\n\r\n    reader.readAsDataURL(file);\r\n  });\r\n}\r\n\r\n/**\r\n * Generate a unique ID with timestamp and random component\r\n * @param prefix - Prefix for the ID (e.g., 'field', 'template')\r\n * @returns Unique string like 'field_1703234567890_abc123def'\r\n */\r\nexport function generateId(prefix = 'field'): string {\r\n  return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\r\n}\r\n\r\n/**\r\n * Create a default template\r\n */\r\nexport function createDefaultTemplate(\r\n  name: string = 'New Template'\r\n): IDCardTemplate {\r\n  const now = new Date().toISOString();\r\n  return {\r\n    id: generateId('template'),\r\n    name,\r\n    version: '1.0.0',\r\n    createdAt: now,\r\n    updatedAt: now,\r\n    orientation: 'landscape',\r\n    sides: 'single',\r\n    cardSize: {\r\n      width: 340,\r\n      height: 215,\r\n      unit: 'px',\r\n    },\r\n    backgrounds: {},\r\n    fields: [],\r\n  };\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"templateStorage.js","sources":["../../../src/storage/templateStorage.ts"],"sourcesContent":["import type { IDCardTemplate } from '../types';\r\n\r\nconst STORAGE_PREFIX = 'idcard_template_';\r\n\r\n/**\r\n * Save a template to browser localStorage\r\n * @param key - Unique identifier for the template\r\n * @param template - The template to save\r\n * @throws Error if localStorage is unavailable or quota exceeded\r\n */\r\nexport function saveTemplateToLocal(key: string, template: IDCardTemplate): void {\r\n  try {\r\n    const data = JSON.stringify(template);\r\n    localStorage.setItem(`${STORAGE_PREFIX}${key}`, data);\r\n  } catch (error) {\r\n    console.error('Failed to save template:', error);\r\n    throw new Error('Failed to save template to localStorage');\r\n  }\r\n}\r\n\r\n/**\r\n * Load a template from browser localStorage\r\n * @param key - Template identifier\r\n * @returns The template, or null if not found or invalid\r\n */\r\nexport function loadTemplateFromLocal(key: string): IDCardTemplate | null {\r\n  try {\r\n    const data = localStorage.getItem(`${STORAGE_PREFIX}${key}`);\r\n    if (!data) return null;\r\n    return JSON.parse(data) as IDCardTemplate;\r\n  } catch (error) {\r\n    console.error('Failed to load template:', error);\r\n    return null;\r\n  }\r\n}\r\n\r\n/**\r\n * Get all saved template keys from localStorage\r\n * @returns Array of template keys (without the prefix)\r\n */\r\nexport function listTemplatesFromLocal(): string[] {\r\n  const keys: string[] = [];\r\n  for (let i = 0; i < localStorage.length; i++) {\r\n    const key = localStorage.key(i);\r\n    if (key?.startsWith(STORAGE_PREFIX)) {\r\n      keys.push(key.replace(STORAGE_PREFIX, ''));\r\n    }\r\n  }\r\n  return keys;\r\n}\r\n\r\n/**\r\n * Remove a template from localStorage\r\n * @param key - Template identifier to remove\r\n */\r\nexport function removeTemplateFromLocal(key: string): void {\r\n  localStorage.removeItem(`${STORAGE_PREFIX}${key}`);\r\n}\r\n\r\n/**\r\n * Export a template as a downloadable JSON file\r\n * @param template - The template to export\r\n * @param filename - Optional custom filename (defaults to template name)\r\n */\r\nexport function exportTemplateAsJSON(template: IDCardTemplate, filename?: string): void {\r\n  const data = JSON.stringify(template, null, 2);\r\n  const blob = new Blob([data], { type: 'application/json' });\r\n  const url = URL.createObjectURL(blob);\r\n\r\n  const link = document.createElement('a');\r\n  link.href = url;\r\n  link.download = filename || `${template.name || 'template'}.json`;\r\n  link.click();\r\n\r\n  URL.revokeObjectURL(url);\r\n}\r\n\r\n/**\r\n * Import a template from a JSON file\r\n * @param file - The JSON file to read\r\n * @returns Promise that resolves to the parsed template\r\n */\r\nexport function importTemplateFromJSON(file: File): Promise<IDCardTemplate> {\r\n  return new Promise((resolve, reject) => {\r\n    const reader = new FileReader();\r\n\r\n    reader.onload = (event) => {\r\n      try {\r\n        const data = JSON.parse(event.target?.result as string);\r\n        resolve(data as IDCardTemplate);\r\n      } catch (error) {\r\n        reject(new Error('Invalid JSON file'));\r\n      }\r\n    };\r\n\r\n    reader.onerror = () => {\r\n      reject(new Error('Failed to read file'));\r\n    };\r\n\r\n    reader.readAsText(file);\r\n  });\r\n}\r\n\r\n/**\r\n * Convert an image file to a base64 data URL\r\n * Useful for embedding images in templates\r\n * @param file - Image file (JPG, PNG, etc.)\r\n * @returns Promise that resolves to a base64 data URL\r\n */\r\nexport function imageFileToBase64(file: File): Promise<string> {\r\n  return new Promise((resolve, reject) => {\r\n    const reader = new FileReader();\r\n\r\n    reader.onload = (event) => {\r\n      resolve(event.target?.result as string);\r\n    };\r\n\r\n    reader.onerror = () => {\r\n      reject(new Error('Failed to read image file'));\r\n    };\r\n\r\n    reader.readAsDataURL(file);\r\n  });\r\n}\r\n\r\n/**\r\n * Generate a unique ID with timestamp and random component\r\n * @param prefix - Prefix for the ID (e.g., 'field', 'template')\r\n * @returns Unique string like 'field_1703234567890_abc123def'\r\n */\r\nexport function generateId(prefix = 'field'): string {\r\n  return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\r\n}\r\n\r\n/**\r\n * Create a default template\r\n */\r\nexport function createDefaultTemplate(\r\n  name: string = 'New Template'\r\n): IDCardTemplate {\r\n  const now = new Date().toISOString();\r\n  return {\r\n    id: generateId('template'),\r\n    name,\r\n    version: '1.0.0',\r\n    createdAt: now,\r\n    updatedAt: now,\r\n    orientation: 'landscape',\r\n    sides: 'single',\n    cardSize: {\n      width: 640,\n      height: 415,\n      unit: 'px',\n    },\n    backgrounds: {},\r\n    fields: [],\r\n  };\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/styles.css

@@ -1 +1 @@
-.idcard-designer{background-color:#f5f5f5;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;height:100vh}.designer-header{align-items:center;background:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;justify-content:space-between;padding:12px 20px}.template-name-input{background:transparent;border:none;border-radius:6px;font-size:18px;font-weight:600;outline:none;padding:8px 12px;transition:background .2s}.template-name-input:focus,.template-name-input:hover{background:#f0f0f0}.header-actions{display:flex;gap:10px}.designer-body{display:flex;flex:1;overflow:hidden}.designer-sidebar{background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;padding:16px;width:280px}.designer-sidebar.right-sidebar{border-left:1px solid #e0e0e0;border-right:none}.designer-sidebar h3{border-bottom:1px solid #eee;color:#666;font-size:13px;font-weight:600;letter-spacing:.5px;margin:20px 0 12px;padding-bottom:8px;text-transform:uppercase}.designer-sidebar h3:first-child{margin-top:0}.designer-sidebar h4{color:#888;font-size:12px;font-weight:600;margin:16px 0 8px}.field-types{display:grid;gap:8px;grid-template-columns:1fr 1fr}.field-type-btn{align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:12px 8px;transition:all .2s}.field-type-btn:hover{background:#f5f9ff;border-color:#2196f3}.field-icon{font-size:20px;margin-bottom:4px}.field-label{color:#666;font-size:11px}.card-settings .setting-group{margin-bottom:16px}.card-settings label{color:#666;display:block;font-size:12px;font-weight:500;margin-bottom:6px}.btn-group{display:flex;gap:0}.btn-group .btn{border-radius:0;border-right-width:0;flex:1}.btn-group .btn:first-child{border-radius:6px 0 0 6px}.btn-group .btn:last-child{border-radius:0 6px 6px 0;border-right-width:1px}.btn-group .btn.active{background:#2196f3;border-color:#2196f3;color:#fff}.size-inputs{align-items:center;display:flex;gap:8px}.size-inputs input{flex:1;width:100%}.size-inputs span{color:#999}.background-upload{display:flex;flex-direction:column;gap:8px}.file-input{display:none}.designer-preview{background:#e8e8e8;display:flex;flex:1;flex-direction:column;overflow:hidden;padding:20px}.side-tabs{align-items:center;display:flex;gap:8px;margin-bottom:16px}.side-tabs .tab{background:#fff;border:none;border-radius:6px;color:#666;cursor:pointer;font-weight:500;padding:8px 20px;transition:all .2s}.side-tabs .tab.active{background:#2196f3;color:#fff}.grid-toggle{align-items:center;color:#666;cursor:pointer;display:flex;font-size:13px;gap:6px;margin-left:auto}.preview-wrapper{align-items:flex-start;background:#ddd;border-radius:8px;display:flex;flex:1;justify-content:center;overflow:auto;padding:20px}.idcard-preview-container{border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15)}.fields-list{background:#fff;border-radius:8px;margin-top:16px;max-height:150px;overflow-y:auto;padding:12px}.fields-list h4{color:#666;font-size:12px;margin:0 0 8px}.field-item{align-items:center;border-radius:6px;cursor:pointer;display:flex;gap:8px;padding:8px;transition:background .2s}.field-item:hover{background:#f5f5f5}.field-item.selected{background:#e3f2fd}.field-type-icon{font-size:14px}.field-key{flex:1;font-family:monospace;font-size:13px}.delete-btn{background:#ff5252;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:14px;height:20px;line-height:1;opacity:0;transition:opacity .2s;width:20px}.field-item:hover .delete-btn{opacity:1}.field-properties{display:flex;flex-direction:column;gap:4px}.property-group{margin-bottom:12px}.property-group label{color:#888;display:block;font-size:11px;font-weight:500;letter-spacing:.3px;margin-bottom:4px;text-transform:uppercase}.property-group input[type=number],.property-group input[type=text],.property-group select{border:1px solid #e0e0e0;border-radius:6px;font-size:13px;padding:8px 10px;transition:border-color .2s;width:100%}.property-group input:focus,.property-group select:focus{border-color:#2196f3;outline:none}.property-group input[type=color]{border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;height:36px;padding:2px;width:100%}.position-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.property-group.half{margin-bottom:8px}.no-selection{color:#999;font-size:13px;padding:20px;text-align:center}.sample-data{margin-top:8px}.sample-data .hint{color:#888;font-size:12px;margin-bottom:12px}.sample-data .property-group{margin-bottom:8px}.validation-errors{background:#fff3e0;border:1px solid #ffcc80;border-radius:8px;margin-top:20px;padding:12px}.validation-errors h4{color:#e65100;font-size:13px;margin:0 0 8px}.validation-errors ul{margin:0;padding-left:20px}.validation-errors li{color:#bf360c;font-size:12px;margin-bottom:4px}.btn{background:#fff;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;padding:8px 16px;transition:all .2s}.btn:hover{background:#f5f5f5}.btn-primary{background:#2196f3;border-color:#2196f3;color:#fff}.btn-primary:hover{background:#1976d2}.btn-primary:disabled{background:#90caf9;cursor:not-allowed}.btn-secondary{background:#757575;border-color:#757575;color:#fff}.btn-secondary:hover{background:#616161}.btn-danger{background:#f44336;border-color:#f44336;color:#fff}.btn-danger:hover{background:#d32f2f}.btn-outline{background:transparent;border:1px dashed #999;color:#666}.btn-outline:hover{border-color:#2196f3;border-style:solid;color:#2196f3}.btn-sm{font-size:12px;padding:4px 10px}.preview-field{background:hsla(0,0%,100%,.1);transition:outline .2s}.preview-field:hover{outline:1px dashed #2196f3}.preview-field.selected{outline:2px solid #2196f3!important}.resize-handle{background:#2196f3;border:1px solid #fff;border-radius:2px;height:8px;position:absolute;width:8px;z-index:1000}.resize-handle-n{cursor:n-resize;top:-4px}.resize-handle-n,.resize-handle-s{left:50%;transform:translateX(-50%)}.resize-handle-s{bottom:-4px;cursor:s-resize}.resize-handle-e{cursor:e-resize;right:-4px}.resize-handle-e,.resize-handle-w{top:50%;transform:translateY(-50%)}.resize-handle-w{cursor:w-resize;left:-4px}.resize-handle-ne{cursor:ne-resize;right:-4px;top:-4px}.resize-handle-nw{cursor:nw-resize;left:-4px;top:-4px}.resize-handle-se{bottom:-4px;cursor:se-resize;right:-4px}.resize-handle-sw{bottom:-4px;cursor:sw-resize;left:-4px}@media (max-width:1200px){.designer-sidebar{width:240px}}@media (max-width:900px){.designer-body{flex-direction:column}.designer-sidebar{border-bottom:1px solid #e0e0e0;border-right:none;max-height:200px;width:100%}.designer-sidebar.right-sidebar{border-left:none;border-top:1px solid #e0e0e0}}
+.idcard-designer{background-color:#f5f5f5;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;height:100vh}.designer-header{align-items:center;background:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;justify-content:space-between;padding:12px 20px}.template-name-input{background:transparent;border:none;border-radius:6px;font-size:18px;font-weight:600;outline:none;padding:8px 12px;transition:background .2s}.template-name-input:focus,.template-name-input:hover{background:#f0f0f0}.header-actions{display:flex;gap:10px}.designer-body{display:flex;flex:1;overflow:hidden}.designer-sidebar{background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;padding:16px;width:280px}.designer-sidebar.right-sidebar{border-left:1px solid #e0e0e0;border-right:none}.designer-sidebar h3{border-bottom:1px solid #eee;color:#666;font-size:13px;font-weight:600;letter-spacing:.5px;margin:20px 0 12px;padding-bottom:8px;text-transform:uppercase}.designer-sidebar h3:first-child{margin-top:0}.designer-sidebar h4{color:#888;font-size:12px;font-weight:600;margin:16px 0 8px}.field-types{display:grid;gap:8px;grid-template-columns:1fr 1fr}.field-type-btn{align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:12px 8px;transition:all .2s}.field-type-btn:hover{background:#f5f9ff;border-color:#2196f3}.field-icon{font-size:20px;margin-bottom:4px}.field-label{color:#666;font-size:11px}.card-settings .setting-group{margin-bottom:16px}.card-settings label{color:#666;display:block;font-size:12px;font-weight:500;margin-bottom:6px}.btn-group{display:flex;gap:0}.btn-group .btn{border-radius:0;border-right-width:0;flex:1}.btn-group .btn:first-child{border-radius:6px 0 0 6px}.btn-group .btn:last-child{border-radius:0 6px 6px 0;border-right-width:1px}.btn-group .btn.active{background:#2196f3;border-color:#2196f3;color:#fff}.size-inputs{align-items:center;display:flex;gap:8px}.size-inputs input{flex:1;width:100%}.size-inputs span{color:#999}.background-upload{display:flex;flex-direction:column;gap:8px}.file-input{display:none}.designer-preview{background:#e8e8e8;display:flex;flex:1;flex-direction:column;overflow:hidden;padding:20px}.side-tabs{align-items:center;display:flex;gap:8px;margin-bottom:16px}.side-tabs .tab{background:#fff;border:none;border-radius:6px;color:#666;cursor:pointer;font-weight:500;padding:8px 20px;transition:all .2s}.side-tabs .tab.active{background:#2196f3;color:#fff}.grid-toggle{align-items:center;color:#666;cursor:pointer;display:flex;font-size:13px;gap:6px;margin-left:auto}.preview-wrapper{align-items:flex-start;background:#ddd;border-radius:8px;display:flex;flex:1;justify-content:center;overflow:auto;padding:20px}.idcard-preview-container{border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15)}.fields-list{background:#fff;border-radius:8px;margin-top:16px;max-height:150px;overflow-y:auto;padding:12px}.fields-list h4{color:#666;font-size:12px;margin:0 0 8px}.field-item{align-items:center;border-radius:6px;cursor:pointer;display:flex;gap:8px;padding:8px;transition:background .2s}.field-item:hover{background:#f5f5f5}.field-item.selected{background:#e3f2fd}.field-type-icon{font-size:14px}.field-key{flex:1;font-family:monospace;font-size:13px}.delete-btn{background:#ff5252;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:14px;height:20px;line-height:1;opacity:0;transition:opacity .2s;width:20px}.field-item:hover .delete-btn{opacity:1}.field-properties{display:flex;flex-direction:column;gap:4px}.property-group{margin-bottom:12px}.property-group label{color:#888;display:block;font-size:11px;font-weight:500;letter-spacing:.3px;margin-bottom:4px;text-transform:uppercase}.property-group input[type=number],.property-group input[type=text],.property-group select{border:1px solid #e0e0e0;border-radius:6px;font-size:13px;padding:8px 10px;transition:border-color .2s;width:100%}.property-group input:focus,.property-group select:focus{border-color:#2196f3;outline:none}.property-group input[type=color]{border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;height:36px;padding:2px;width:100%}.position-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.property-group.half{margin-bottom:8px}.table-editor-section{border:1px solid #eee;border-radius:6px;margin-bottom:12px;padding:10px}.table-editor-section>strong{color:#555;display:block;font-size:12px;margin-bottom:10px}.property-group.checkbox-group{align-items:center;display:flex;gap:8px}.property-group.checkbox-group input{margin:0}.property-group.checkbox-group label{color:#666;letter-spacing:0;margin:0;text-transform:none}.table-column-editor{background:#fafafa;border:1px solid #f0f0f0;border-radius:6px;margin-bottom:8px;padding:8px}.table-column-inline{display:grid;gap:8px;grid-template-columns:1fr 1fr}.table-sample-grid{display:grid;gap:4px;margin:8px 0;overflow-x:auto;padding-bottom:4px}.table-sample-grid input{border:1px solid #e0e0e0;font-size:12px}.table-sample-grid input,.table-sample-header{border-radius:4px;min-width:90px;padding:6px 8px}.table-sample-header{background:#f0f0f0;color:#666;font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-selection{color:#999;font-size:13px;padding:20px;text-align:center}.sample-data{margin-top:8px}.sample-data .hint{color:#888;font-size:12px;margin-bottom:12px}.sample-data .property-group{margin-bottom:8px}.validation-errors{background:#fff3e0;border:1px solid #ffcc80;border-radius:8px;margin-top:20px;padding:12px}.validation-errors h4{color:#e65100;font-size:13px;margin:0 0 8px}.validation-errors ul{margin:0;padding-left:20px}.validation-errors li{color:#bf360c;font-size:12px;margin-bottom:4px}.btn{background:#fff;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;padding:8px 16px;transition:all .2s}.btn:hover{background:#f5f5f5}.btn-primary{background:#2196f3;border-color:#2196f3;color:#fff}.btn-primary:hover{background:#1976d2}.btn-primary:disabled{background:#90caf9;cursor:not-allowed}.btn-secondary{background:#757575;border-color:#757575;color:#fff}.btn-secondary:hover{background:#616161}.btn-danger{background:#f44336;border-color:#f44336;color:#fff}.btn-danger:hover{background:#d32f2f}.btn-outline{background:transparent;border:1px dashed #999;color:#666}.btn-outline:hover{border-color:#2196f3;border-style:solid;color:#2196f3}.btn-sm{font-size:12px;padding:4px 10px}.preview-field{background:hsla(0,0%,100%,.1);transition:outline .2s}.preview-field:hover{outline:1px dashed #2196f3}.preview-field.selected{outline:2px solid #2196f3!important}.resize-handle{background:#2196f3;border:1px solid #fff;border-radius:2px;height:8px;position:absolute;width:8px;z-index:1000}.resize-handle-n{cursor:n-resize;top:-4px}.resize-handle-n,.resize-handle-s{left:50%;transform:translateX(-50%)}.resize-handle-s{bottom:-4px;cursor:s-resize}.resize-handle-e{cursor:e-resize;right:-4px}.resize-handle-e,.resize-handle-w{top:50%;transform:translateY(-50%)}.resize-handle-w{cursor:w-resize;left:-4px}.resize-handle-ne{cursor:ne-resize;right:-4px;top:-4px}.resize-handle-nw{cursor:nw-resize;left:-4px;top:-4px}.resize-handle-se{bottom:-4px;cursor:se-resize;right:-4px}.resize-handle-sw{bottom:-4px;cursor:sw-resize;left:-4px}@media (max-width:1200px){.designer-sidebar{width:240px}}@media (max-width:900px){.designer-body{flex-direction:column}.designer-sidebar{border-bottom:1px solid #e0e0e0;border-right:none;max-height:200px;width:100%}.designer-sidebar.right-sidebar{border-left:none;border-top:1px solid #e0e0e0}}

package/dist/esm/utils/styleUtils.js

@@ -81,6 +81,9 @@ const defaultFieldStyles = {
     qrcode: {
         backgroundColor: 'transparent',
     },
+    table: {
+        backgroundColor: 'transparent',
+    },
 };
 /**
  * CSS class name generator

package/dist/esm/utils/styleUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"styleUtils.js","sources":["../../../src/utils/styleUtils.ts"],"sourcesContent":["import type React from 'react';\r\nimport type { FieldStyle } from '../types';\r\n\r\n/**\r\n * Convert a style object with kebab-case keys to React camelCase\r\n * Useful when importing styles from external sources\r\n */\r\nexport function toReactStyle(\r\n  styleObj: Record<string, unknown> | undefined\r\n): React.CSSProperties {\r\n  if (!styleObj) return {};\r\n\r\n  const out: Record<string, unknown> = {};\r\n  for (const key in styleObj) {\r\n    // Skip non-style properties\r\n    if (key === 'frontOrBack' || key === 'category' || key === 'element') {\r\n      continue;\r\n    }\r\n    // Convert kebab-case to camelCase (e.g., 'font-size' -> 'fontSize')\r\n    const reactKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());\r\n    out[reactKey] = styleObj[key];\r\n  }\r\n  return out as React.CSSProperties;\r\n}\r\n\r\n/**\r\n * Convert FieldStyle to React CSS properties\r\n * @param style - The field style object\r\n * @returns React-compatible CSS properties object\r\n */\r\nexport function fieldStyleToCSS(style: FieldStyle | undefined): React.CSSProperties {\r\n  if (!style) return {};\r\n  return {\r\n    fontSize: style.fontSize,\r\n    fontWeight: style.fontWeight,\r\n    fontFamily: style.fontFamily,\r\n    color: style.color,\r\n    textAlign: style.textAlign,\r\n    textTransform: style.textTransform,\r\n    backgroundColor: style.backgroundColor,\r\n    borderRadius: style.borderRadius,\r\n    padding: style.padding,\r\n    border: style.border,\r\n    lineHeight: style.lineHeight,\r\n    letterSpacing: style.letterSpacing,\r\n    // verticalAlign is handled in the preview component for flex\r\n  };\r\n}\r\n\r\n/**\r\n * Merge multiple style objects\r\n */\r\nexport function mergeStyles(\r\n  ...styles: (React.CSSProperties | undefined)[]\r\n): React.CSSProperties {\r\n  return Object.assign({}, ...styles.filter(Boolean));\r\n}\r\n\r\n/**\r\n * Generate position styles from field position\r\n * Rounds values to integers for better html2canvas compatibility\r\n */\r\nexport function positionToStyle(position: {\r\n  x: number;\r\n  y: number;\r\n  width: number;\r\n  height: number;\r\n}): React.CSSProperties {\r\n  return {\r\n    position: 'absolute',\r\n    left: `${Math.round(position.x)}px`,\r\n    top: `${Math.round(position.y)}px`,\r\n    width: `${Math.round(position.width)}px`,\r\n    height: `${Math.round(position.height)}px`,\r\n  };\r\n}\r\n\r\n/**\r\n * Default styles for different field types\r\n */\r\nexport const defaultFieldStyles: Record<string, FieldStyle> = {\r\n  text: {\r\n    fontSize: '12px',\r\n    fontWeight: 'normal',\r\n    color: '#000000',\r\n    textAlign: 'left',\r\n  },\r\n  label: {\r\n    fontSize: '10px',\r\n    fontWeight: 'bold',\r\n    color: '#333333',\r\n    textAlign: 'left',\r\n    textTransform: 'uppercase',\r\n  },\r\n  image: {},\n  qrcode: {\n    backgroundColor: 'transparent',\n  },\n};\n\r\n/**\r\n * CSS class name generator\r\n */\r\nexport function cn(...classes: (string | undefined | null | false)[]): string {\r\n  return classes.filter(Boolean).join(' ');\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styleUtils.js","sources":["../../../src/utils/styleUtils.ts"],"sourcesContent":["import type React from 'react';\r\nimport type { FieldStyle } from '../types';\r\n\r\n/**\r\n * Convert a style object with kebab-case keys to React camelCase\r\n * Useful when importing styles from external sources\r\n */\r\nexport function toReactStyle(\r\n  styleObj: Record<string, unknown> | undefined\r\n): React.CSSProperties {\r\n  if (!styleObj) return {};\r\n\r\n  const out: Record<string, unknown> = {};\r\n  for (const key in styleObj) {\r\n    // Skip non-style properties\r\n    if (key === 'frontOrBack' || key === 'category' || key === 'element') {\r\n      continue;\r\n    }\r\n    // Convert kebab-case to camelCase (e.g., 'font-size' -> 'fontSize')\r\n    const reactKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());\r\n    out[reactKey] = styleObj[key];\r\n  }\r\n  return out as React.CSSProperties;\r\n}\r\n\r\n/**\r\n * Convert FieldStyle to React CSS properties\r\n * @param style - The field style object\r\n * @returns React-compatible CSS properties object\r\n */\r\nexport function fieldStyleToCSS(style: FieldStyle | undefined): React.CSSProperties {\r\n  if (!style) return {};\r\n  return {\r\n    fontSize: style.fontSize,\r\n    fontWeight: style.fontWeight,\r\n    fontFamily: style.fontFamily,\r\n    color: style.color,\r\n    textAlign: style.textAlign,\r\n    textTransform: style.textTransform,\r\n    backgroundColor: style.backgroundColor,\r\n    borderRadius: style.borderRadius,\r\n    padding: style.padding,\r\n    border: style.border,\r\n    lineHeight: style.lineHeight,\r\n    letterSpacing: style.letterSpacing,\r\n    // verticalAlign is handled in the preview component for flex\r\n  };\r\n}\r\n\r\n/**\r\n * Merge multiple style objects\r\n */\r\nexport function mergeStyles(\r\n  ...styles: (React.CSSProperties | undefined)[]\r\n): React.CSSProperties {\r\n  return Object.assign({}, ...styles.filter(Boolean));\r\n}\r\n\r\n/**\r\n * Generate position styles from field position\r\n * Rounds values to integers for better html2canvas compatibility\r\n */\r\nexport function positionToStyle(position: {\r\n  x: number;\r\n  y: number;\r\n  width: number;\r\n  height: number;\r\n}): React.CSSProperties {\r\n  return {\r\n    position: 'absolute',\r\n    left: `${Math.round(position.x)}px`,\r\n    top: `${Math.round(position.y)}px`,\r\n    width: `${Math.round(position.width)}px`,\r\n    height: `${Math.round(position.height)}px`,\r\n  };\r\n}\r\n\r\n/**\r\n * Default styles for different field types\r\n */\r\nexport const defaultFieldStyles: Record<string, FieldStyle> = {\r\n  text: {\r\n    fontSize: '12px',\r\n    fontWeight: 'normal',\r\n    color: '#000000',\r\n    textAlign: 'left',\r\n  },\r\n  label: {\r\n    fontSize: '10px',\r\n    fontWeight: 'bold',\r\n    color: '#333333',\r\n    textAlign: 'left',\r\n    textTransform: 'uppercase',\r\n  },\r\n  image: {},\n  qrcode: {\n    backgroundColor: 'transparent',\n  },\n  table: {\n    backgroundColor: 'transparent',\n  },\n};\n\r\n/**\r\n * CSS class name generator\r\n */\r\nexport function cn(...classes: (string | undefined | null | false)[]): string {\r\n  return classes.filter(Boolean).join(' ');\r\n}\r\n"],"names":[],"mappings":"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"}