What's New

ID Card Digital Verification & Card Lifecycle Suite: Upgraded the package from a badge design studio into an end-to-end Enterprise Credential Management and Anti-Counterfeiting Platform.

Standalone Digital Verification Modal (<IdCardVerificationModal />): Real-time verification certificate modal displaying dynamic color-coded validity banners: Active, Issued & Valid, Draft / Unverified, Suspended, Revoked, Lost / Stolen, and Expired.

Anti-Tampering Photo Match: Displays official high-resolution database photos alongside credential metadata to instantly expose physical photo-substitution tampering on printed cards.

Built-in HTML5 Camera Scanner & Barcode Reader: Integrated direct webcam and smartphone camera scanning using getUserMedia with a real-time targeting reticle overlay for instant badge lookups at gates and reception desks.

Instant Roll / ID Lookup & 1-Click Admin Status Controls: Direct search with live suggestion filtering, plus 1-click administrative action buttons (Activate, Mark Issued, Suspend Access, Revoke Credential, Report Lost) with instant state synchronization.

Card Lifecycle State Machine in <IdCardManager />: Added a dedicated Lifecycle Status column with interactive status pills, row-level 'Verify' action buttons, smart lifecycle filter tabs (All, Active, Issued, Draft, Suspended, Revoked), and batch actions for bulk status transitions.

Automatic Print Issuance Tracking: When exporting cards via Batch PDF or ZIP, selected records automatically transition to 'Issued' status and record their issuance timestamp (issuedAt).

Dynamic Verification QR Code Preset: Added a dedicated 'Verification QR' preset button in the Studio sidebar supporting customizable verification base endpoints and dynamic cardholder ID binding.

Public Verification Link Generator: Generates copyable secure verification URLs (e.g. https://verify.stratametriq.com/badge/{{id}}) with tamper-proof digital checksum indicators.

Exported IdCardVerificationModal Component: Exported <IdCardVerificationModal /> from package root for embedding in custom security gate portals, kiosks, and mobile applications.

Brand & Security Watermark Suite: Integrated complete watermarking support for templates, live canvas editing, card previews, and batch print exports.

Multi-Type Watermarking: Supports custom Brand / Security text (defaulting to STRATAMETRIQ with dynamic placeholder interpolation such as {{companyName}} or {{employeeId}}), custom uploaded Seal / Logo images, and repeating SVG security pattern tiles.

Interactive Watermark Inspector: Added dedicated controls in the right Property Inspector with quick preset buttons (STRATAMETRIQ, OFFICIAL, CONFIDENTIAL, SAMPLE, DRAFT), fine-tuned opacity slider (3%–40%), rotation angle presets (-45°, -30°, 0°, 30°, 45°), color picker, and font size selector.

Layer Placement Control: Configure watermarks to sit in the Background layer (behind text, photos, and barcodes for crisp readability) or the Overlay layer (top security/draft layer across the entire badge).

Target Side Selection: Apply watermarks to Both Sides (Front & Back), Front Side Only, or Back Side Only.

High-DPI PDF & Batch Export Pipeline: Watermarks are rendered in high resolution (300 DPI) across single-card PNG downloads, thermal PVC CR80 prints, and multi-page batch PDF print sheets while maintaining 100% optical scannability for barcodes and QR codes.

Exported WatermarkLayer Component: Exported <WatermarkLayer /> in package entry point for standalone custom ID card previews and embedded applications.

Multi-Mode Scannable QR Codes: Added support for three QR modes: Dynamic Field Mode (Binds QR codes dynamically to any roster field with custom URL prefix and suffix parameters), Static URL / Text Mode (Encodes fixed web URLs or static verification strings), and vCard 3.0 Digital Contact Mode (Automatically formats and encodes Full Name, Designation, Phone, Email, and Organization from active records into a smartphone-scannable digital contact card).

Custom QR Styling & Color Pickers: Added foreground module color and background color pickers directly to the Property Inspector, allowing QR codes to match organizational branding.

Selectable Error Correction Level (ECC): Added an ECC dropdown (`L - 7%`, `M - 15%`, `Q - 25%`, `H - 30%`) to optimize scannability on small print cards or with logo overlays.

1-Click Blank Excel Template Generator: Added a <Download /> button to Step 1 that generates and downloads a clean, pre-formatted `.xlsx` file tailored to the active department.

Prominent Studio Scannables Toolbar: Restructured the left palette in the designer studio with dedicated one-click buttons for Dynamic QR Codes and 1D Barcodes.

CR80 Thermal PVC Print Matrix Calculation: Fixed the Live Sheet Matrix calculation for CR80 card formats to accurately reflect single-card capacity (`1 Col × 1 Row`, `54×86 mm`) rather than falling back to multi-card A4 sheet dimensions.

Roster ID Number Badge Wrapping: Added `whiteSpace: nowrap` to table ID badges in the Live Roster Directory to prevent hyphens from splitting codes across multiple lines.

Auto-Shrink & Multi-Line Text Wrapping: Fixed text rendering so elements without auto-shrink enabled wrap cleanly across multiple lines with `word-break: break-word` instead of overflowing horizontally.

Classic Preset Vertical Spacing: Adjusted element coordinates in `v_classic_traditional` to eliminate clipping between the address field and Principal signature line.

Full Roster CRUD & IndexedDB Sync: Added a dedicated '+ Add Record' modal with integrated photo upload, an 'Edit Record' modal for inline detail fixes, row-level 'Delete' with confirmation, and bulk 'Delete Selected' actions—all synchronized in real-time with browser IndexedDB (localforage).

Interactive Multi-Column Sorting: Enabled 1-click column header sorting (Ascending / Descending) across Name & Avatar, Class/Designation, ID Number, Guardian/Department, and Contact Phone.

Smart Roster Pagination: Integrated a high-performance pagination and rows-per-page toolbar (`10`, `25`, `50`, `100`, `All`) with responsive page navigation controls, preventing DOM lag on large imported rosters (1,000+ cards).

Accurate Selection Counters: Fixed selection counters to dynamically reflect active category record counts and prevent negative selection indexes.

Production-Ready Scannable QR Codes: Upgraded the QR code generator to use the industry-standard `qrcode` engine. Generated QR codes are mathematically accurate and fully scannable with mobile camera scanners and physical optical scanners.

Production-Ready Code 128 1D Barcodes: Upgraded 1D barcode generation with `jsbarcode` for native Code 128 barcode rendering in both the canvas preview and high-resolution PDF print exports.

Smart Data Field Filtering for QR/Barcode Elements: When selecting a QR Code or Barcode element in the designer, the Data Field Key dropdown automatically filters to display only relevant ID, code, number, and contact fields, eliminating clutter from irrelevant fields (like photo URLs, blood groups, or long addresses) for a clean user experience.

Multi-CSV Import Append: Enhanced the CSV importer to append new data instead of overriding previous uploads. When importing multiple CSV, Excel, or ZIP files sequentially, the new records and any new dynamic fields are now merged seamlessly into the existing active workspace and automatically saved to IndexedDB.

AI Background Removal Bundler Interop: Fixed a dynamic import resolution bug that caused the AI module to fail (`removeBackground is not a function`) when the library was used inside Webpack/Next.js environments.

WASM CDN Loading Error: Removed a manual proxy CDN configuration that was causing `Failed to fetch` errors on some adblocked networks. The library now natively uses its built-in globally distributed edge servers to download the AI models.

Improved Security Logging: Added an intuitive frontend popup alert to specifically notify the user if their browser's strict CORS policy blocks the AI from reading a random external internet image link.

AI Background Removal: Integrated an advanced, fully client-side WebAssembly machine learning model (`@imgly/background-removal`) directly into the Live Roster Data Table. Users can now perfectly remove the background from uploaded profile photos or webcam captures with a single click, completely offline, without any backend processing or API keys.

Fixed an infinite re-render loop in the Webcam Capture Modal that caused the video feed to get stuck on a black screen.

Enhanced camera error handling to provide specific, actionable feedback when the camera is blocked, missing, or in use by another application.

Core Management & Export Utilities: Initialized core ID card management functions and PDF export utilities for improved rendering and data handling.

Premium Header Redesign: Completely redesigned the SaaS dashboard header to feature a modern, sleek glassmorphism aesthetic with glowing gradients.

Dynamic Status Indicators: Added beautiful pulsating status pills to indicate active dynamic data bindings.

Enhanced Footer: Replaced bulky text links with a minimal, professional icon-based footer.

Enterprise Toggle: Added a showFooter prop to the NPM package, allowing enterprise developers to easily hide the Stratametriq branding when embedding the engine inside their private ERP systems.

Documentation Overhaul: Updated official documentation to explicitly detail our 100% secure, local browser-based data processing architecture.

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).

High-Res ZIP Export: Batch export individual ID cards as high-resolution (300 DPI) PNG files neatly packaged in a single ZIP archive.

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.

Dynamic Image Fallbacks: Beautifully generated initial-based avatars with consistent gradient backgrounds are automatically inserted if a profile photo is missing.

Curved Typography: Advanced SVG text rendering to wrap and curve text along circular paths.

Licensing & Metadata: Updated package metadata (homepage, engines) and finalized the internal licensing documentation for the StrataMetriq release. No functional code changes.

Excel & ZIP Bulk Import: Upload `.xlsx`, `.xls`, or `.zip` archives. Automatically binds images to rows using fuzzy matching.

Full Workspace Persistence (IndexedDB): The dashboard automatically saves the entire workspace state (data, templates, active tabs) offline.

Offline Project Backup (.stmq): Serialize the entire workspace state into a `.stmq` file for offline, air-gapped portability.

CSV Data Mapping UX: Built a 'fuzzy mapper' that automatically aliases variations in CSV column headers to preset template bindings.

Image CORS Blockers: Removed strict crossOrigin requirement, fixing broken images for non-CORS compliant URLs.

Studio Property Editor UX: Reorganized Inspector layout to prioritize 'Text Content & Binding'.

Excel Output Fix: Importer now correctly ignores empty rows padded with hidden quote marks from .xlsx conversions.

Dynamic Expression Engine: Text elements now support Javascript expressions and conditional rendering logic.

Double-Sided ID Cards: Native support for designing both Front and Back of ID cards with a side-toggle UI.

Advanced Batch Export Options: PDF engine now supports Front Only, Interleaved Pages, and A4 Mirrored Grids.

Hardware Printer Calibration: Manual X and Y offset controls to compensate for mechanical print drift in PVC printers.

API Flow Mapping: Added support for dynamic template routes (e.g., fetch(`/api/${id}`)).

Pre-Deployment Safety: Refined debug code detection to eliminate false positives in strings.

Circular Dependencies: Fixed edge resolution for missing extensions and absolute paths.

Duplicate Logic: Increased scan limits to properly analyze large codebases.

API Flow Mapping: Traces every step of API workflows from start to finish.

Duplicate Logic Detection: Identify repetitive code structures like duplicate logins.

Migrated issue tracking to a public repository to enhance community support.

Optimized marketplace SEO keywords for better visibility among full-stack developers.

Custom Architecture Governance Rules Engine via stratametriq.rules.yaml.

SARIF integration in @stratametriq/cli for GitHub Advanced Security and GitLab CI gates.

Live VS Code squiggles (Diagnostics) for instant architectural rule violation feedback.

Native VS Code integrations including Explorer Context Menus and Configuration Settings.

Aggressive architectural caching for massively improved scan performance.

Full-Stack Enterprise Polyglot Support: Native AST parsing for Python, Java, Kotlin, Go, C#, and more.

Cross-Stack Vertical Flow Tracing: Traces frontend API calls directly into backend framework endpoints.

Improved DFS cycle detection algorithm for circular dependency detection.

Resolved a false positive in the secret detection engine for variables ending in _URL.

Live Demo: Added an interactive StackBlitz live demo link to the Quick Start section.

API Documentation: Documented the standalone <IdCardDesigner /> props and all available lifecycle events.

Market Comparisons: Expanded the FAQ section to include direct capability comparisons against Canva and enterprise desktop software.

Added repository and bugs tracking links to package.json for better NPM discoverability.

Bulk CSV Import Dashboard: Click the 'Import CSV' button to automatically create a dedicated 'Imported Data' workspace tab.

Dynamic Field Definitions: Extracts column headers and generates dynamic text fields for the Property Inspector.

Advanced Paper Dimensions: Full mathematical rendering support for A3, A4, A5, US Letter, and US Legal paper sheets.

Landscape PDF Scaling Fix: Resolved jspdf engine bug where hardware crop marks lost landscape rotation constraints.

Initial documented release of the Turnkey Dashboard (<IdCardManager />).

Core HTML2Canvas and jsPDF high-resolution rendering engine.

Drag-and-Drop Bounding Boxes: Introduced visual snapping handles for resizing elements on the canvas.

Resolved a custom Google Font loading timeout that caused text rendering glitches on slow networks.

Undo / Redo History Stack: Full tracking of canvas actions using Ctrl+Z and Ctrl+Y shortcuts.

Keyboard Nudging: Use arrow keys for 1px precise element alignment (Hold Shift for 5px jumps).

Dedicated Image Property Inspector: New controls for Object Fit (cover, contain, scale-down).

Avatar Styling: Instant Corner Radius toggles for Circular vs Square profile photos with custom CSS borders.

Grid Snapping & Alignment Guides: Toggleable millimeter measurement rulers (0mm - 86mm).

Radial Grid Overlay: Snap-to-grid accuracy for 1mm or 5mm intervals.

QR Code & Barcode Generation: Built-in deterministic vector 1D Barcode and 2D QR Code generation.

Live Data Binding: Bind QR codes directly to database keys like {{admissionNo}}.

Initial Public Release: The core <IdCardPreview /> component and atomic rendering engine.

Variable Placeholders: Introduced handlebar syntax ({{name}}) for text interpolation.

Interactive VS Code Extension: First release of the interactive developer UI with real-time editor sync.

13-Point Safety Audit: Shipped the automated DevSecOps pre-deployment audit engine.