@stratametriq/id-card-designer 1.7.0 → 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 (6) hide show
  1. package/LICENSE +13 -16
  2. package/README.md +184 -169
  3. package/dist/index.css +1502 -1
  4. package/dist/index.es.js +14050 -13546
  5. package/dist/index.js +136 -136
  6. package/package.json +14 -20
package/LICENSE CHANGED
@@ -1,21 +1,18 @@
1
- MIT License
1
+ STRATAMETRIQ DUAL LICENSE
2
2
 
3
3
  Copyright (c) 2026 Stratametriq
4
4
 
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
5
+ This software is licensed under a dual-tier model:
11
6
 
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
7
+ 1. COMMUNITY TIER (Non-Commercial Use)
8
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to use, copy, modify, merge, publish, and distribute the Software solely for personal, educational, open-source, or non-commercial purposes.
14
9
 
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
10
+ You may NOT use this Software in any commercial product, for-profit SaaS application, internal corporate tool, or revenue-generating service without purchasing a Commercial Enterprise License.
11
+
12
+ 2. COMMERCIAL ENTERPRISE TIER (Commercial Use)
13
+ If you intend to use this Software in a commercial capacity (e.g., School ERP systems, HR suites, SaaS platforms, or production deployments within a for-profit organization), you MUST purchase a valid Commercial Enterprise License.
14
+
15
+ A Commercial Enterprise License can be purchased at:
16
+ https://waniabid.gumroad.com/l/id-card-designer-pro
17
+
18
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md CHANGED
@@ -1,254 +1,269 @@
1
1
  # 📦 @stratametriq/id-card-designer
2
2
 
3
- ![NPM Version](https://img.shields.io/npm/v/@stratametriq/id-card-designer?style=for-the-badge&color=blue)
4
- ![NPM Downloads](https://img.shields.io/npm/dm/@stratametriq/id-card-designer?style=for-the-badge&color=success)
5
- ![License](https://img.shields.io/npm/l/@stratametriq/id-card-designer?style=for-the-badge&color=orange)
6
-
7
3
  A universal, dynamic, and highly customizable **ID Card Designer & Batch Print Dashboard** for React, Vue, Angular, and Vanilla JS.
8
4
 
9
- Whether you are building a **Student Information System**, **HR Employee Directory**, or **Event Badge Generator**, this package gives your users a professional visual canvas to design, customize, preview, and batch export PVC ID cards directly inside your app.
5
+ > **Current release:** 1.8.0
10
6
 
11
7
  ---
12
8
 
13
9
  ## 📑 Table of Contents
14
10
 
15
- - [Installation](#installation)
16
- - [Quick Start](#quick-start)
11
+ - [Overview](#overview)
12
+ - [Live Demo](#live-demo)
13
+ - [What's New in v1.8.0](#whats-new-in-v180)
17
14
  - [Features](#features)
18
- - [Props](#props)
19
- - [Templates](#templates)
20
- - [Customization](#customization)
21
- - [Events](#events)
22
- - [Examples](#examples)
15
+ - [How It Works](#how-it-works)
16
+ - [Import Data](#import-data)
17
+ - [Design Cards](#design-cards)
18
+ - [Batch Printing](#batch-printing)
19
+ - [Offline Mode](#offline-mode)
20
+ - [Architecture & Compatibility](#architecture--compatibility)
21
+ - [Privacy](#privacy)
22
+ - [Developer Docs](#developer-docs)
23
+ - [NPM](#npm)
24
+ - [Pricing / License](#pricing--license)
23
25
  - [FAQ](#faq)
24
- - [License](#license)
25
26
 
26
27
  ---
27
28
 
28
- ## 💻 Installation
29
+ ## Overview
29
30
 
30
- Install the package using NPM or Yarn:
31
+ `@stratametriq/id-card-designer` is a developer-focused ID-card design and generation package.
31
32
 
32
- ```bash
33
- npm install @stratametriq/id-card-designer
34
- # or
35
- yarn add @stratametriq/id-card-designer
36
- ```
33
+ It is designed for applications such as:
34
+ - Student Information Systems
35
+ - School and College ERP systems
36
+ - HR and Employee Management systems
37
+ - Event and Conference Badge systems
38
+ - Membership systems
39
+ - Internal identity-card workflows
37
40
 
38
- ---
41
+ The package combines **visual card design** with **structured data and batch generation** so developers do not need to build an ID-card production workflow from scratch.
39
42
 
40
- ## ⚡ Quick Start
43
+ ---
41
44
 
42
- ### 🚀 [Try the Live Interactive Demo on StackBlitz](https://stackblitz.com/edit/vitejs-vite-jtyvdj5g?file=package.json,src%2FApp.tsx,src%2FApp.css,src%2Findex.css&terminal=dev)
45
+ ## Live Demo
43
46
 
44
47
  You can launch a complete ID card design studio and batch print dashboard with just **two lines of code**. It comes with pre-built dummy data so you can test it immediately!
45
48
 
46
- ```jsx
47
- import { IdCardManager } from '@stratametriq/id-card-designer';
48
- import '@stratametriq/id-card-designer/dist/index.css';
49
-
50
- export default function App() {
51
- // This will render the complete turnkey dashboard with demo data!
52
- return <IdCardManager />;
53
- }
54
- ```
49
+ ### 🚀 [Try the Live Interactive Demo on StackBlitz](https://stackblitz.com/edit/vitejs-vite-jtyvdj5g?file=src%2FApp.tsx)
55
50
 
56
51
  ---
57
52
 
58
- ## 🌟 Features
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
59
 
60
- - **🎨 Turnkey Dashboard:** A complete workspace with department tabs, vector stage, and batch printing ready out-of-the-box.
61
- - **💾 Offline Workspace & Project Backup:** Automatic IndexedDB persistence means you never lose work on a page refresh. Export and share entire offline workspaces via `.stmq` JSON project files.
62
- - **📥 Batch CSV/Excel & ZIP Import:** Let users upload spreadsheets (`.csv`, `.xlsx`) to instantly generate hundreds of cards. Upload `.zip` archives to automatically fuzzy-match and bind hundreds of high-res student photos instantly.
63
- - **🔳 QR & Barcodes:** Built-in dynamic 1D Barcode and 2D QR Code generation.
64
- - **🏷️ Variable Placeholders:** Easily map database fields to card text (e.g., `ID: {{admissionNo}}`).
65
- - **🖼️ High-Res PDF/PNG Export:** Batch export to A3/A4/A5/Letter size PDF sheets with hardware cut marks.
66
- - **🌐 Framework Agnostic:** Works natively with React and Next.js, and easily mounts into Vue, Angular, and Vanilla HTML.
60
+ ---
67
61
 
62
+ ## Features
63
+
64
+ - **🎨 Visual ID Card Designer:** A complete workspace for designing ID cards with a visual canvas, configurable elements, templates, and preview capabilities.
65
+ - **📥 CSV & Excel Import:** Import structured card data from `.csv`, `.xlsx`, and `.xls`. Imported columns can be used as dynamic fields inside templates.
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.
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.
69
+ - **🏷️ Dynamic Field Placeholders:** Bind template elements to imported data (e.g., `ID: {{admissionNo}}`).
70
+ - **🧠 Conditional Rendering:** Text elements can use JavaScript expressions for conditional output (e.g., `{{ department === 'HR' ? 'Red' : 'Blue' }}`).
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.
68
73
  ---
69
74
 
70
- ## 📖 Step-by-Step User Guide
75
+ ## How It Works
76
+
77
+ The package is designed around a client-side card-generation workflow.
78
+
79
+ ```text
80
+ CSV / Excel / JSON
81
+ ↓
82
+ Import Records
83
+ ↓
84
+ Match Photos
85
+ ↓
86
+ Design Template
87
+ ↓
88
+ Bind Dynamic Fields
89
+ ↓
90
+ Add QR / Barcode
91
+ ↓
92
+ Preview
93
+ ↓
94
+ Batch Generate
95
+ ↓
96
+ PDF / PNG
97
+ ```
71
98
 
72
- ### 1. Importing Your Data
73
- The dashboard allows you to import data in multiple ways:
74
- - **Excel/CSV Upload:** Click the "Import Data" button and select an `.xlsx` or `.csv` file. The engine will automatically parse your columns into dynamic fields.
75
- - **Bulk ZIP Upload with Photos:** If you have photos, create a `.zip` archive containing your Excel/CSV file alongside a folder of images. The importer will automatically fuzzy-match the image filenames (e.g., `aarav_sharma.jpg`) to the rows in your spreadsheet.
99
+ The package can be embedded into an existing web application. Your application remains responsible for its own backend, authentication, database, and business logic.
76
100
 
77
- ### 2. Designing the Template
78
- Click **"Launch Studio Canvas"** to enter the Drag-and-Drop editor:
79
- - **Dynamic Text Binding:** Click "Add Text" and type `{{ columnName }}` to dynamically bind the text to your imported spreadsheet data.
80
- - **Conditional Logic:** Use Javascript expressions in your text elements like `{{ department === 'HR' ? 'Red' : 'Blue' }}` for conditional rendering.
81
- - **QR & Barcodes:** Drag in a barcode or QR code element and bind it to unique employee IDs or URLs.
82
- - **Backgrounds:** Upload high-resolution backgrounds and layer your text and images on top.
101
+ ---
102
+
103
+ ## Import Data
83
104
 
84
- ### 3. Saving & Managing Workspaces
85
- - **Automatic Offline Saving:** As you work, the dashboard automatically saves your entire workspace (data, photos, and templates) to your browser's IndexedDB. You can safely refresh the page or close your browser without losing work.
86
- - **Exporting a Project:** Click **"Backup Project"** to download a `.stmq` file. You can take this file on a USB drive to an offline/air-gapped computer and upload it to instantly restore your entire workspace.
105
+ ### CSV / Excel
106
+ Select **Import Data** and upload `.csv`, `.xlsx`, or `.xls` files. The importer automatically maps spreadsheet columns into dynamic fields.
87
107
 
88
- ### 4. Batch Exporting to PDF
89
- Once your template is perfect, click **"Batch Export A4 PDF"**:
90
- - The engine will loop through every row in your spreadsheet.
91
- - It calculates exact millimeter dimensions (CR80 format) and automatically aligns them into an A4 grid with hardware cutting marks.
92
- - You can apply X/Y offset calibrations to fix mechanical drift in physical PVC card printers (like Zebra or Fargo).
108
+ ### ZIP + Photos
109
+ Prepare a ZIP containing the spreadsheet/CSV and image files.
110
+ ```text
111
+ id-cards.zip
112
+ ├── students.xlsx
113
+ └── photos/
114
+ ├── aarav_sharma.jpg
115
+ └── diya_patel.jpg
116
+ ```
117
+ The importer attempts to fuzzy-match image filenames to the corresponding records.
93
118
 
94
119
  ---
95
120
 
96
- ## ⚙️ Props
121
+ ## Design Cards
97
122
 
98
- The main `<IdCardManager />` component accepts the following props:
123
+ Open **Launch Studio Canvas**.
99
124
 
100
- | Prop | Type | Default | Description |
101
- |---|---|---|---|
102
- | `sampleRecords` | `object` | `default data` | Pass your own database records to populate the dashboard. |
103
- | `categories` | `object` | `default config` | Custom category definitions for different ID types. |
104
- | `onBatchExportComplete` | `function` | `undefined` | Callback fired when PDF generation completes. |
105
-
106
- ### Standalone `<IdCardDesigner />` Props
107
-
108
- If you are using the standalone designer component directly, you can pass these props to configure the editor:
109
-
110
- ```jsx
111
- <IdCardDesigner
112
- width={350}
113
- height={200}
114
- template={template}
115
- onSave={handleSave}
116
- onExport={handleExport}
117
- />
125
+ ### Dynamic Text
126
+ Use a field placeholder:
127
+ ```text
128
+ {{studentName}}
118
129
  ```
119
130
 
131
+ ### Conditional Text
132
+ Use Javascript expressions:
133
+ ```text
134
+ {{ department === 'HR' ? 'Red' : 'Blue' }}
135
+ ```
136
+
137
+ ### QR / Barcode
138
+ Add a QR or barcode element and bind it to a unique field.
139
+
140
+ ### Background
141
+ Upload a high-resolution card background from your computer or URL, and position other elements above it.
142
+
120
143
  ---
121
144
 
122
- ## 🧩 Templates
145
+ ## Batch Printing
123
146
 
124
- Designs are saved and loaded as clean JSON schemas.
147
+ Select **Batch Export A4 PDF** or the applicable export workflow.
125
148
 
126
- ```json
127
- {
128
- "id": "tpl_school_vertical_01",
129
- "orientation": "vertical",
130
- "width": 54,
131
- "height": 86,
132
- "elements": [
133
- {
134
- "id": "el_student_name",
135
- "type": "field",
136
- "fieldKey": "studentName",
137
- "label": "Student Name",
138
- "x": 2, "y": 48, "width": 50, "height": 7
139
- }
140
- ]
141
- }
142
- ```
149
+ The engine processes the records and places cards into printable sheets. The documented workflow includes:
150
+ - CR80 card dimensions
151
+ - A3, A4, A5, and Letter sheet sizes
152
+ - Multiple cards per sheet
153
+ - Hardware cutting marks
154
+ - X/Y print calibration offsets
143
155
 
144
156
  ---
145
157
 
146
- ## 🎨 Customization
158
+ ## Offline Mode
147
159
 
148
- You can define custom categories to control exactly what fields your ID cards should support.
160
+ The package is designed to support workflows where ID-card data should remain on the user's machine.
149
161
 
150
- ```jsx
151
- const myCategories = {
152
- university: {
153
- id: "university",
154
- label: "University Students",
155
- fieldDefinitions: [
156
- { key: "studentName", label: "Student Full Name" },
157
- { key: "enrollmentNo", label: "Enrollment Number" }
158
- ]
159
- }
160
- };
162
+ ### Offline Workspace Persistence
163
+ The dashboard stores workspace state in the browser's IndexedDB, including imported data, templates, and active workspace information. Refreshing or reopening the browser does not automatically discard the saved workspace.
161
164
 
162
- <IdCardManager categories={myCategories} />
163
- ```
165
+ ### `.stmq` Project Backup
166
+ Export a complete project workspace as a `.stmq` JSON project file. This provides a portable way to move a workspace between machines, including offline/air-gapped workflows.
164
167
 
165
- ### Modular Components
168
+ ---
169
+
170
+ ## Architecture & Compatibility
166
171
 
167
- If you don't want the full dashboard, you can use our modular components:
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.
168
173
 
169
- * **`<IdCardPreview />`**: Embed a live ID card directly on a user profile page.
170
- * **`<IdCardDesignerModal />`**: Open the drag-and-drop design studio inside your own popup.
171
- * **`generateIdCardsPdf()`**: Trigger a high-resolution PDF export programmatically.
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.
172
178
 
173
179
  ---
174
180
 
175
- ## 📡 Events
181
+ ## Privacy
176
182
 
177
- You can hook into various lifecycle and user action events across the components:
183
+ ID-card applications commonly process personal information such as Names, Student IDs, Employee IDs, Photos, and Admission numbers.
178
184
 
179
- ### `<IdCardManager />` Events
180
- - **`onBatchExportComplete(category, records)`**: Fired when a user successfully exports a batch of IDs to PDF.
185
+ The documented generation workflow is entirely **client-side**.
186
+ - Local browser processing
187
+ - IndexedDB workspace persistence
188
+ - Local `.stmq` project backup
189
+ - Local PDF/image generation
190
+ - No backend server required for the core generation workflow
181
191
 
182
- ### `<IdCardDesigner />` Events
183
- - **`onSave(templateData)`**: Fired when the user clicks the save button. Returns the full JSON schema of the current design.
184
- - **`onExport(format, data)`**: Fired when an export action is triggered (e.g., exporting a single card to PNG or PDF).
185
- - **`onChange(elementData)`**: Fired continuously as the user drags, resizes, or modifies elements on the canvas.
186
- - **`onDelete(elementId)`**: Fired when a specific element is deleted from the canvas.
187
- - **`onTemplateChange(templateId)`**: Fired when the user switches to a different template.
192
+ Your application remains responsible for compliance with applicable privacy and data-protection requirements.
188
193
 
189
194
  ---
190
195
 
191
- ## 💡 Examples
192
-
193
- ### Connect Your Own Data (React)
196
+ ## Developer Docs
194
197
 
195
- ```jsx
196
- import { IdCardManager } from '@stratametriq/id-card-designer';
197
- import '@stratametriq/id-card-designer/dist/index.css';
198
+ ### Components
199
+ - `<IdCardManager />`: Complete dashboard experience. Use this when you want the complete import → design → preview → batch-export workflow.
200
+ - `<IdCardDesigner />`: Standalone visual designer.
201
+ - `<IdCardPreview />`: Embed a live ID-card preview inside another application screen.
202
+ - `<IdCardDesignerModal />`: Open the designer inside your application's modal/dialog workflow.
198
203
 
199
- export default function MyPortal() {
200
- const myRealStudents = [
201
- { studentName: "Aarav Sharma", admissionNo: "101", bloodGroup: "O+" },
202
- { studentName: "Diya Patel", admissionNo: "102", bloodGroup: "B+" }
203
- ];
204
+ ### Props (IdCardManager)
205
+ | Prop | Type | Default | Description |
206
+ |---|---|---|---|
207
+ | `sampleRecords` | `object` | Default data | Records used to populate the dashboard |
208
+ | `categories` | `object` | Default config | Custom ID-card categories |
209
+ | `onBatchExportComplete` | `function` | `undefined` | Callback after batch PDF generation |
204
210
 
205
- return (
206
- <IdCardManager sampleRecords={{ student: myRealStudents }} />
207
- );
211
+ ### Templates
212
+ Designs are represented as JSON-compatible template structures.
213
+ ```json
214
+ {
215
+ "id": "tpl_school_vertical",
216
+ "orientation": "vertical",
217
+ "width": 54,
218
+ "height": 86,
219
+ "elements": []
208
220
  }
209
221
  ```
210
222
 
211
- ### Mounting in Vue, Angular, or Vanilla HTML
223
+ ---
212
224
 
213
- ```html
214
- <div id="id-card-manager-root"></div>
215
- <script type="module">
216
- import React from 'react';
217
- import { createRoot } from 'react-dom/client';
218
- import { IdCardManager } from '@stratametriq/id-card-designer';
219
- import '@stratametriq/id-card-designer/dist/index.css';
225
+ ## NPM
220
226
 
221
- const root = createRoot(document.getElementById('id-card-manager-root'));
222
- root.render(React.createElement(IdCardManager));
223
- </script>
227
+ Install using NPM:
228
+ ```bash
229
+ npm install @stratametriq/id-card-designer
230
+ ```
231
+
232
+ Or Yarn:
233
+ ```bash
234
+ yarn add @stratametriq/id-card-designer
224
235
  ```
225
236
 
226
237
  ---
227
238
 
228
- ## ❓ FAQ & Comparisons
239
+ ## Pricing / License
229
240
 
230
- **Q: How is this different from Canva?**
231
- **A:** Canva is fantastic for creating manual, one-off designs. However, if you need to generate 500 student ID cards with unique photos, barcodes, and names, Canva becomes tedious. This package is an **automation pipeline**—you design the template once, feed it an array of JSON data, and instantly generate thousands of unique cards.
241
+ `@stratametriq/id-card-designer` operates under a **Dual Licensing Model** to support both the open-source community and enterprise development.
232
242
 
233
- **Q: Why not just use standard HTML-to-Image libraries directly?**
234
- **A:** Building a production-ready ID card designer from scratch using standard HTML-to-canvas libraries is incredibly frustrating. You have to handle exact hardware printing dimensions (like CR80 PVC card aspect ratios), perfect image scaling, drag-and-drop boundary logic, and multi-page A4 PDF rendering with precise cut-marks. We've solved all of that complex math for you out-of-the-box.
243
+ ### 1. Community Tier (Free)
244
+ Free for personal projects, students, open-source initiatives, and non-profit organizations. Under this tier, you may not use the software in any commercial product or revenue-generating service.
235
245
 
236
- **Q: How does this compare to enterprise desktop ID software?**
237
- **A:** Traditional ID software usually requires heavy Windows installations and expensive per-seat licenses. This package allows you to bring that exact same enterprise-level design capability directly into your web app as a lightweight React component that works on Mac, Windows, and Linux.
246
+ ### 2. Commercial / Enterprise Tier (Paid)
247
+ Required for any commercial use, including:
248
+ - Commercial SaaS applications
249
+ - School & College ERP systems
250
+ - HR & Employee Management suites
251
+ - Internal corporate production deployments
252
+ - White-label applications
238
253
 
239
- **Q: Does our sensitive data leave our servers?**
240
- **A:** **Absolutely not.** Employee and student data (PII) is a massive security concern. That is why this engine runs **100% Client-Side** in the browser. Zero network requests are made to external servers. The PDFs and images are generated purely on the user's local machine, and all workspace data is saved offline via IndexedDB. Your users can even export `.stmq` project backups and move them via USB to air-gapped computers!
254
+ 👉 **[Purchase a Commercial Enterprise License Here](https://waniabid.gumroad.com/l/id-card-designer-pro)**
241
255
 
242
- **Q: Can I remove your branding? (White-labeling)**
243
- **A:** Yes! The enterprise license is 100% white-label, allowing you to seamlessly integrate the designer into your own SaaS product without your users ever knowing you are using our software.
256
+ *For full legal terms, please review the `LICENSE` file included in this repository.*
244
257
 
245
258
  ---
246
259
 
247
- ## 📜 License
260
+ ## FAQ
248
261
 
249
- `@stratametriq/id-card-designer` is dual-licensed:
262
+ **How is this different from Canva?**
263
+ Canva is designed primarily for visual design. `@stratametriq/id-card-designer` focuses on an automated data-driven ID-card workflow: One Template + Many Records = Batch Printable ID Cards.
250
264
 
251
- 1. **Community / Open Source Tier (MIT License):** Free for non-commercial evaluation and personal open-source projects. See [MIT License](./LICENSE).
252
- 2. **Commercial / Enterprise Tier:** Required for commercial SaaS applications, School ERPs, HR suites, and production use.
265
+ **Does the core workflow require a StrataMetriq server?**
266
+ No backend server from StrataMetriq is required for the documented client-side card-generation workflow.
253
267
 
254
- 👉 **[Purchase a Commercial Enterprise License to Unlock Production Usage & Priority Support](https://waniabid.gumroad.com/l/id-card-designer-pro)**
268
+ **Can it be used for offline workflows?**
269
+ Yes. The package includes IndexedDB workspace persistence and `.stmq` project backup capabilities intended to support local and offline-capable workflows.