@qr-styled/browser 1.0.0

package/dist/lib/renderers/GradientRenderer.js

@@ -0,0 +1,43 @@
+/**
+ * Handles gradient creation for QR codes
+ */
+export class GradientRenderer {
+    constructor(ctx, options) {
+        this.ctx = ctx;
+        this.options = options;
+    }
+    /**
+     * Creates a gradient fill style
+     */
+    createGradient() {
+        const { size, gradientColors, gradientAngle } = this.options;
+        const ctx = this.ctx;
+        // Parse gradient colors
+        const colors = gradientColors.split(',').map(c => c.trim());
+        // Calculate angle in radians
+        const angleRad = (gradientAngle * Math.PI) / 180;
+        // Calculate gradient start and end points
+        const centerX = size / 2;
+        const centerY = size / 2;
+        const length = Math.sqrt(size * size + size * size) / 2;
+        const x0 = centerX - Math.cos(angleRad) * length;
+        const y0 = centerY - Math.sin(angleRad) * length;
+        const x1 = centerX + Math.cos(angleRad) * length;
+        const y1 = centerY + Math.sin(angleRad) * length;
+        // Create linear gradient
+        const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+        // Add color stops uniformly distributed
+        colors.forEach((color, index) => {
+            const stop = index / (colors.length - 1);
+            gradient.addColorStop(stop, color);
+        });
+        return gradient;
+    }
+    /**
+     * Gets the appropriate fill style (gradient or solid color)
+     */
+    getFillStyle() {
+        const { gradient, foregroundColor } = this.options;
+        return gradient ? this.createGradient() : foregroundColor;
+    }
+}

package/dist/lib/renderers/LogoRenderer.d.ts

@@ -0,0 +1,25 @@
+import { QROptions } from '../utils/types.js';
+/**
+ * Handles logo rendering on QR codes
+ */
+export declare class LogoRenderer {
+    private ctx;
+    private options;
+    constructor(ctx: CanvasRenderingContext2D, options: Required<QROptions>);
+    /**
+     * Renders logo with background
+     */
+    render(logo: string | HTMLImageElement): Promise<void>;
+    /**
+     * Loads an image from URL
+     */
+    private loadImage;
+    /**
+     * Draws logo background (circle or rounded square)
+     */
+    private drawLogoBackground;
+    /**
+     * Draws logo with shadow effect
+     */
+    private drawLogoWithShadow;
+}

package/dist/lib/renderers/LogoRenderer.js

@@ -0,0 +1,89 @@
+/**
+ * Handles logo rendering on QR codes
+ */
+export class LogoRenderer {
+    constructor(ctx, options) {
+        this.ctx = ctx;
+        this.options = options;
+    }
+    /**
+     * Renders logo with background
+     */
+    async render(logo) {
+        if (!logo)
+            return;
+        let img;
+        if (typeof logo === 'string') {
+            // Load image from URL
+            img = await this.loadImage(logo);
+        }
+        else {
+            img = logo;
+        }
+        const { size, logoPadding } = this.options;
+        const logoSize = size * 0.25;
+        const bgSize = logoSize + logoPadding;
+        const centerX = size / 2;
+        const centerY = size / 2;
+        // Draw logo background
+        this.drawLogoBackground(centerX, centerY, bgSize);
+        // Draw logo with shadow
+        this.drawLogoWithShadow(img, centerX, centerY, logoSize);
+    }
+    /**
+     * Loads an image from URL
+     */
+    loadImage(url) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = url;
+        });
+    }
+    /**
+     * Draws logo background (circle or rounded square)
+     */
+    drawLogoBackground(centerX, centerY, bgSize) {
+        const { logoShape, logoRadius, backgroundColor } = this.options;
+        const ctx = this.ctx;
+        ctx.fillStyle = backgroundColor;
+        if (logoShape === 'circle') {
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, bgSize / 2, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        else {
+            // Rounded square
+            const squareX = centerX - bgSize / 2;
+            const squareY = centerY - bgSize / 2;
+            ctx.beginPath();
+            ctx.moveTo(squareX + logoRadius, squareY);
+            ctx.arcTo(squareX + bgSize, squareY, squareX + bgSize, squareY + bgSize, logoRadius);
+            ctx.arcTo(squareX + bgSize, squareY + bgSize, squareX, squareY + bgSize, logoRadius);
+            ctx.arcTo(squareX, squareY + bgSize, squareX, squareY, logoRadius);
+            ctx.arcTo(squareX, squareY, squareX + bgSize, squareY, logoRadius);
+            ctx.closePath();
+            ctx.fill();
+        }
+    }
+    /**
+     * Draws logo with shadow effect
+     */
+    drawLogoWithShadow(img, centerX, centerY, logoSize) {
+        const ctx = this.ctx;
+        // Apply shadow
+        ctx.shadowColor = 'rgba(0, 0, 0, 0.15)';
+        ctx.shadowBlur = 12;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 2;
+        // Draw logo
+        const logoX = centerX - logoSize / 2;
+        const logoY = centerY - logoSize / 2;
+        ctx.drawImage(img, logoX, logoY, logoSize, logoSize);
+        // Reset shadow
+        ctx.shadowColor = 'transparent';
+        ctx.shadowBlur = 0;
+    }
+}

package/dist/lib/renderers/ModuleRenderer.d.ts

@@ -0,0 +1,43 @@
+import { QROptions } from '../utils/types.js';
+interface QRModules {
+    size: number;
+    get(row: number, col: number): number;
+}
+interface RenderOptions extends Required<QROptions> {
+    moduleCount: number;
+    moduleSize: number;
+}
+/**
+ * Handles QR module rendering with rounded corners
+ */
+export declare class ModuleRenderer {
+    private ctx;
+    private modules;
+    private options;
+    constructor(ctx: CanvasRenderingContext2D, modules: QRModules, options: RenderOptions);
+    /**
+     * Checks if a module exists at given position
+     */
+    private hasModule;
+    /**
+     * Checks if position is part of finder pattern (eye)
+     */
+    private isPartOfEye;
+    /**
+     * Renders all QR modules
+     */
+    render(fillStyle: string | CanvasGradient): void;
+    /**
+     * Renders modules with rounded corners
+     */
+    private renderRoundedModules;
+    /**
+     * Draws a single module with selectively rounded corners
+     */
+    private drawRoundedModule;
+    /**
+     * Renders simple square modules
+     */
+    private renderSquareModules;
+}
+export {};

package/dist/lib/renderers/ModuleRenderer.js

@@ -0,0 +1,161 @@
+/**
+ * Handles QR module rendering with rounded corners
+ */
+export class ModuleRenderer {
+    constructor(ctx, modules, options) {
+        this.ctx = ctx;
+        this.modules = modules;
+        this.options = options;
+    }
+    /**
+     * Checks if a module exists at given position
+     */
+    hasModule(row, col) {
+        const { moduleCount } = this.options;
+        if (row < 0 || row >= moduleCount || col < 0 || col >= moduleCount) {
+            return false;
+        }
+        return this.modules.get(row, col) === 1;
+    }
+    /**
+     * Checks if position is part of finder pattern (eye)
+     */
+    isPartOfEye(row, col) {
+        const { moduleCount } = this.options;
+        // Top-left eye
+        if (row < 7 && col < 7)
+            return true;
+        // Top-right eye
+        if (row < 7 && col >= moduleCount - 7)
+            return true;
+        // Bottom-left eye
+        if (row >= moduleCount - 7 && col < 7)
+            return true;
+        return false;
+    }
+    /**
+     * Renders all QR modules
+     */
+    render(fillStyle) {
+        const { rounded } = this.options;
+        this.ctx.fillStyle = fillStyle;
+        if (rounded) {
+            this.renderRoundedModules();
+        }
+        else {
+            this.renderSquareModules();
+        }
+    }
+    /**
+     * Renders modules with rounded corners
+     */
+    renderRoundedModules() {
+        const { moduleCount, moduleSize, padding, moduleRadius, eyeColor, eyeRadius } = this.options;
+        const ctx = this.ctx;
+        for (let row = 0; row < moduleCount; row++) {
+            for (let col = 0; col < moduleCount; col++) {
+                if (this.modules.get(row, col)) {
+                    const x = padding + col * moduleSize;
+                    const y = padding + row * moduleSize;
+                    // Determine if this is part of an eye (finder pattern)
+                    const isEye = this.isPartOfEye(row, col);
+                    // Use eye-specific color if available
+                    if (isEye && eyeColor) {
+                        ctx.fillStyle = eyeColor;
+                    }
+                    // Use eye-specific radius if available, otherwise use moduleRadius
+                    const cornerRadius = isEye && eyeRadius !== undefined && eyeRadius > 0
+                        ? moduleSize * eyeRadius
+                        : moduleSize * moduleRadius;
+                    // Check adjacent modules
+                    const top = this.hasModule(row - 1, col);
+                    const right = this.hasModule(row, col + 1);
+                    const bottom = this.hasModule(row + 1, col);
+                    const left = this.hasModule(row, col - 1);
+                    // Determine which corners to round
+                    const roundTL = !top && !left;
+                    const roundTR = !top && !right;
+                    const roundBR = !bottom && !right;
+                    const roundBL = !bottom && !left;
+                    // Small extension to eliminate gaps
+                    const gap = 0.5;
+                    const extendTop = top ? gap : 0;
+                    const extendRight = right ? gap : 0;
+                    const extendBottom = bottom ? gap : 0;
+                    const extendLeft = left ? gap : 0;
+                    this.drawRoundedModule(x, y, moduleSize, cornerRadius, { roundTL, roundTR, roundBR, roundBL }, { extendTop, extendRight, extendBottom, extendLeft });
+                }
+            }
+        }
+    }
+    /**
+     * Draws a single module with selectively rounded corners
+     */
+    drawRoundedModule(x, y, size, radius, corners, extensions) {
+        const ctx = this.ctx;
+        const { roundTL, roundTR, roundBR, roundBL } = corners;
+        const { extendTop, extendRight, extendBottom, extendLeft } = extensions;
+        ctx.beginPath();
+        // Top-left corner
+        if (roundTL) {
+            ctx.moveTo(x + radius - extendLeft, y - extendTop);
+        }
+        else {
+            ctx.moveTo(x - extendLeft, y - extendTop);
+        }
+        // Top side and top-right corner
+        if (roundTR) {
+            ctx.lineTo(x + size - radius + extendRight, y - extendTop);
+            ctx.quadraticCurveTo(x + size + extendRight, y - extendTop, x + size + extendRight, y + radius - extendTop);
+        }
+        else {
+            ctx.lineTo(x + size + extendRight, y - extendTop);
+        }
+        // Right side and bottom-right corner
+        if (roundBR) {
+            ctx.lineTo(x + size + extendRight, y + size - radius + extendBottom);
+            ctx.quadraticCurveTo(x + size + extendRight, y + size + extendBottom, x + size - radius + extendRight, y + size + extendBottom);
+        }
+        else {
+            ctx.lineTo(x + size + extendRight, y + size + extendBottom);
+        }
+        // Bottom side and bottom-left corner
+        if (roundBL) {
+            ctx.lineTo(x + radius - extendLeft, y + size + extendBottom);
+            ctx.quadraticCurveTo(x - extendLeft, y + size + extendBottom, x - extendLeft, y + size - radius + extendBottom);
+        }
+        else {
+            ctx.lineTo(x - extendLeft, y + size + extendBottom);
+        }
+        // Left side and close path
+        if (roundTL) {
+            ctx.lineTo(x - extendLeft, y + radius - extendTop);
+            ctx.quadraticCurveTo(x - extendLeft, y - extendTop, x + radius - extendLeft, y - extendTop);
+        }
+        else {
+            ctx.lineTo(x - extendLeft, y - extendTop);
+        }
+        ctx.closePath();
+        ctx.fill();
+    }
+    /**
+     * Renders simple square modules
+     */
+    renderSquareModules() {
+        const { moduleCount, moduleSize, padding, eyeColor } = this.options;
+        const ctx = this.ctx;
+        for (let row = 0; row < moduleCount; row++) {
+            for (let col = 0; col < moduleCount; col++) {
+                if (this.modules.get(row, col)) {
+                    const x = padding + col * moduleSize;
+                    const y = padding + row * moduleSize;
+                    // Use eye-specific color if this is part of an eye
+                    if (this.isPartOfEye(row, col) && eyeColor) {
+                        ctx.fillStyle = eyeColor;
+                    }
+                    ctx.fillRect(x, y, moduleSize, moduleSize);
+                }
+            }
+        }
+    }
+}

package/dist/lib/renderers/SVGRenderer.d.ts

@@ -0,0 +1,22 @@
+import type { QROptions } from '../utils/types.js';
+/**
+ * Renderer for SVG output
+ */
+export declare class SVGRenderer {
+    private options;
+    private qrData;
+    private size;
+    constructor(qrData: any, options: Required<QROptions>, size: number);
+    /**
+     * Generates SVG string
+     */
+    generate(): string;
+    /**
+     * Checks if module exists at position
+     */
+    private hasModule;
+    /**
+     * Checks if position is part of finder pattern (eye)
+     */
+    private isPartOfEye;
+}

package/dist/lib/renderers/SVGRenderer.js

@@ -0,0 +1,73 @@
+/**
+ * Renderer for SVG output
+ */
+export class SVGRenderer {
+    constructor(qrData, options, size) {
+        this.qrData = qrData;
+        this.options = options;
+        this.size = size;
+    }
+    /**
+     * Generates SVG string
+     */
+    generate() {
+        const { size, backgroundColor, foregroundColor, moduleRadius, eyeColor, eyeRadius } = this.options;
+        const modules = this.qrData.modules;
+        const moduleCount = modules.size;
+        const moduleSize = size / moduleCount;
+        let svg = `<?xml version="1.0" encoding="UTF-8"?>`;
+        svg += `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">`;
+        // Background
+        svg += `<rect width="${size}" height="${size}" fill="${backgroundColor}"/>`;
+        // QR modules
+        svg += `<g fill="${foregroundColor}">`;
+        for (let row = 0; row < moduleCount; row++) {
+            for (let col = 0; col < moduleCount; col++) {
+                if (this.hasModule(col, row)) {
+                    const x = col * moduleSize;
+                    const y = row * moduleSize;
+                    // Check if this is part of an eye (finder pattern)
+                    const isEye = this.isPartOfEye(col, row, moduleCount);
+                    const color = isEye && eyeColor ? eyeColor : foregroundColor;
+                    const radius = isEye && eyeRadius
+                        ? eyeRadius * moduleSize
+                        : moduleRadius * moduleSize;
+                    if (radius > 0) {
+                        svg += `<rect x="${x}" y="${y}" width="${moduleSize}" height="${moduleSize}" rx="${radius}" fill="${color}"/>`;
+                    }
+                    else {
+                        svg += `<rect x="${x}" y="${y}" width="${moduleSize}" height="${moduleSize}" fill="${color}"/>`;
+                    }
+                }
+            }
+        }
+        svg += `</g>`;
+        svg += `</svg>`;
+        return svg;
+    }
+    /**
+     * Checks if module exists at position
+     */
+    hasModule(x, y) {
+        const modules = this.qrData.modules;
+        if (x < 0 || x >= modules.size || y < 0 || y >= modules.size) {
+            return false;
+        }
+        return modules.data[y * modules.size + x] === 1;
+    }
+    /**
+     * Checks if position is part of finder pattern (eye)
+     */
+    isPartOfEye(x, y, size) {
+        // Top-left eye
+        if (x < 7 && y < 7)
+            return true;
+        // Top-right eye
+        if (x >= size - 7 && y < 7)
+            return true;
+        // Bottom-left eye
+        if (x < 7 && y >= size - 7)
+            return true;
+        return false;
+    }
+}

package/dist/lib/utils/formatters.d.ts

@@ -0,0 +1,25 @@
+import type { VCardData, WiFiData, EmailData, SMSData, GeoData, QRDataType } from './types.js';
+/**
+ * Formats vCard contact data to vCard 3.0 format
+ */
+export declare function formatVCard(data: VCardData): string;
+/**
+ * Formats WiFi configuration to WiFi QR format
+ */
+export declare function formatWiFi(data: WiFiData): string;
+/**
+ * Formats email data to mailto URI
+ */
+export declare function formatEmail(data: EmailData): string;
+/**
+ * Formats SMS data to SMS URI
+ */
+export declare function formatSMS(data: SMSData): string;
+/**
+ * Formats geolocation data to geo URI
+ */
+export declare function formatGeo(data: GeoData): string;
+/**
+ * Formats QR data based on type
+ */
+export declare function formatQRData(type: QRDataType, url?: string, data?: VCardData | WiFiData | EmailData | SMSData | GeoData): string;

package/dist/lib/utils/formatters.js

@@ -0,0 +1,106 @@
+/**
+ * Formats vCard contact data to vCard 3.0 format
+ */
+export function formatVCard(data) {
+    const lines = ['BEGIN:VCARD', 'VERSION:3.0'];
+    if (data.firstName || data.lastName) {
+        const name = `${data.lastName || ''};${data.firstName || ''};;;`;
+        lines.push(`N:${name}`);
+        lines.push(`FN:${[data.firstName, data.lastName].filter(Boolean).join(' ')}`);
+    }
+    if (data.organization) {
+        lines.push(`ORG:${data.organization}`);
+    }
+    if (data.title) {
+        lines.push(`TITLE:${data.title}`);
+    }
+    if (data.phone) {
+        lines.push(`TEL:${data.phone}`);
+    }
+    if (data.email) {
+        lines.push(`EMAIL:${data.email}`);
+    }
+    if (data.url) {
+        lines.push(`URL:${data.url}`);
+    }
+    if (data.address || data.city || data.state || data.zip || data.country) {
+        const adr = `;;${data.address || ''};${data.city || ''};${data.state || ''};${data.zip || ''};${data.country || ''}`;
+        lines.push(`ADR:${adr}`);
+    }
+    lines.push('END:VCARD');
+    return lines.join('\n');
+}
+/**
+ * Formats WiFi configuration to WiFi QR format
+ */
+export function formatWiFi(data) {
+    const { ssid, password = '', encryption = 'WPA', hidden = false } = data;
+    const escape = (str) => str.replace(/([\\;,:])/g, '\\$1');
+    let result = 'WIFI:';
+    result += `T:${encryption};`;
+    result += `S:${escape(ssid)};`;
+    if (password) {
+        result += `P:${escape(password)};`;
+    }
+    if (hidden) {
+        result += 'H:true;';
+    }
+    result += ';';
+    return result;
+}
+/**
+ * Formats email data to mailto URI
+ */
+export function formatEmail(data) {
+    let result = `mailto:${data.email}`;
+    const params = [];
+    if (data.subject) {
+        params.push(`subject=${encodeURIComponent(data.subject)}`);
+    }
+    if (data.body) {
+        params.push(`body=${encodeURIComponent(data.body)}`);
+    }
+    if (params.length > 0) {
+        result += '?' + params.join('&');
+    }
+    return result;
+}
+/**
+ * Formats SMS data to SMS URI
+ */
+export function formatSMS(data) {
+    let result = `sms:${data.phone}`;
+    if (data.message) {
+        result += `?body=${encodeURIComponent(data.message)}`;
+    }
+    return result;
+}
+/**
+ * Formats geolocation data to geo URI
+ */
+export function formatGeo(data) {
+    return `geo:${data.latitude},${data.longitude}`;
+}
+/**
+ * Formats QR data based on type
+ */
+export function formatQRData(type, url, data) {
+    switch (type) {
+        case 'url':
+            return url || '';
+        case 'text':
+            return url || '';
+        case 'vcard':
+            return data ? formatVCard(data) : '';
+        case 'wifi':
+            return data ? formatWiFi(data) : '';
+        case 'email':
+            return data ? formatEmail(data) : '';
+        case 'sms':
+            return data ? formatSMS(data) : '';
+        case 'geo':
+            return data ? formatGeo(data) : '';
+        default:
+            return url || '';
+    }
+}