@stratametriq/id-card-designer 1.7.1 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +26 -3
  2. package/dist/index.css +1502 -1
  3. package/dist/index.es.js +14220 -13748
  4. package/dist/index.js +135 -135
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  A universal, dynamic, and highly customizable **ID Card Designer & Batch Print Dashboard** for React, Vue, Angular, and Vanilla JS.
4
4
 
5
- > **Current release:** 1.7.0
5
+ > **Current release:** 1.8.0
6
6
 
7
7
  ---
8
8
 
@@ -10,12 +10,14 @@ A universal, dynamic, and highly customizable **ID Card Designer & Batch Print D
10
10
 
11
11
  - [Overview](#overview)
12
12
  - [Live Demo](#live-demo)
13
+ - [What's New in v1.8.0](#whats-new-in-v180)
13
14
  - [Features](#features)
14
15
  - [How It Works](#how-it-works)
15
16
  - [Import Data](#import-data)
16
17
  - [Design Cards](#design-cards)
17
18
  - [Batch Printing](#batch-printing)
18
19
  - [Offline Mode](#offline-mode)
20
+ - [Architecture & Compatibility](#architecture--compatibility)
19
21
  - [Privacy](#privacy)
20
22
  - [Developer Docs](#developer-docs)
21
23
  - [NPM](#npm)
@@ -48,16 +50,26 @@ You can launch a complete ID card design studio and batch print dashboard with j
48
50
 
49
51
  ---
50
52
 
53
+ ## What's New in v1.8.0
54
+ - **Canva-Style Smart Alignment Guides:** Magnetically snap elements to the center of the card or align them perfectly with other elements using color-coded visual guides (Purple for center, Red for edges).
55
+ - **High-Res ZIP Export:** Batch export individual ID cards as high-resolution (300 DPI) PNG files neatly packaged in a single ZIP archive.
56
+ - **Thermal PVC Printer Support:** Native support for exporting a perfectly dimensioned CR80 layout (1 card per page) specifically optimized for Zebra, Fargo, and Magicard thermal printers.
57
+ - **Dynamic Image Fallbacks:** Beautifully generated initial-based avatars with consistent gradient backgrounds are automatically inserted if a profile photo is missing.
58
+ - **Curved Typography:** Advanced SVG text rendering to wrap and curve text along circular paths.
59
+
60
+ ---
61
+
51
62
  ## Features
52
63
 
53
64
  - **🎨 Visual ID Card Designer:** A complete workspace for designing ID cards with a visual canvas, configurable elements, templates, and preview capabilities.
54
65
  - **📥 CSV & Excel Import:** Import structured card data from `.csv`, `.xlsx`, and `.xls`. Imported columns can be used as dynamic fields inside templates.
55
66
  - **🖼️ Bulk ZIP Photo Import:** Upload a ZIP archive containing your spreadsheet/CSV and images. The importer can fuzzy-match image filenames with records, making it possible to prepare large batches of cards without manually attaching every photo.
67
+ - **🖨️ Professional Print Calibration:** Define Bleed margins, X/Y hardware cutting offsets, and double-sided interleaved layouts.
56
68
  - **🔳 QR Codes & Barcodes:** Generate dynamic QR codes and 1D barcodes and bind them to record values such as admission numbers, employee IDs, URLs, or other unique identifiers.
57
69
  - **🏷️ Dynamic Field Placeholders:** Bind template elements to imported data (e.g., `ID: {{admissionNo}}`).
58
70
  - **🧠 Conditional Rendering:** Text elements can use JavaScript expressions for conditional output (e.g., `{{ department === 'HR' ? 'Red' : 'Blue' }}`).
59
- - **📐 Printer Calibration:** X/Y offsets can be applied to compensate for mechanical print alignment differences when producing physical PVC cards.
60
-
71
+ - **🔲 Smart Alignment Guides:** Snap elements to the center of the card or align them with other elements using visual color-coded guides (Purple for center, Red for edges).
72
+ - **⌨️ Keyboard Shortcuts:** Navigate the editor faster using Undo/Redo (`Ctrl+Z`, `Ctrl+Y`), Duplicate (`Ctrl+C`, `Ctrl+V`), Delete, and Arrow Key nudging.
61
73
  ---
62
74
 
63
75
  ## How It Works
@@ -155,6 +167,17 @@ Export a complete project workspace as a `.stmq` JSON project file. This provide
155
167
 
156
168
  ---
157
169
 
170
+ ## Architecture & Compatibility
171
+
172
+ This package is designed as a **purely client-side UI library**. It does NOT require or include any built-in backend APIs or server dependencies for generating cards.
173
+
174
+ **Where is it supportable?**
175
+ - **React Apps (Vite, CRA, Next.js):** Fully compatible.
176
+ - **Data Integrations:** Because this is a UI component, it expects you to pass your live server data down as a prop (e.g. `<IdCardManager sampleRecords={myLiveApiData} />`). It is completely agnostic to where your data comes from (REST API, GraphQL, Firebase, etc.).
177
+ - **Browsers:** Compatible with all modern browsers (Chrome, Edge, Firefox, Safari). PDF generation relies on HTML5 Canvas and `html2canvas` so modern ES6 support is required.
178
+
179
+ ---
180
+
158
181
  ## Privacy
159
182
 
160
183
  ID-card applications commonly process personal information such as Names, Student IDs, Employee IDs, Photos, and Admission numbers.