@xlabs-store/core 0.0.1

package/dist/cjs/x-qr-code.cjs.entry.js

@@ -0,0 +1,446 @@
+'use strict';
+
+var index = require('./index-C7sKs9A2.js');
+
+class QRCache {
+    map = new Map();
+    max = 100;
+    get(k) {
+        if (!this.map.has(k))
+            return;
+        const v = this.map.get(k);
+        this.map.delete(k);
+        this.map.set(k, v);
+        return v;
+    }
+    set(k, v) {
+        if (this.map.size >= this.max) {
+            const f = this.map.keys().next().value;
+            this.map.delete(f);
+        }
+        this.map.set(k, v);
+    }
+}
+const qrCache = new QRCache();
+
+function renderSVG(matrix, size, options = {}) {
+    const { gradient, logo, color = '#000', bgColor = '#fff' } = options;
+    const n = matrix.length;
+    const cell = size / n;
+    let path = '';
+    for (let y = 0; y < n; y++) {
+        for (let x = 0; x < n; x++) {
+            if (matrix[y][x]) {
+                path += `M${x * cell},${y * cell}h${cell}v${cell}h-${cell}z `;
+            }
+        }
+    }
+    const id = `qr-grad-${Math.random().toString(36).substr(2, 9)}`;
+    let svg = `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">`;
+    if (gradient) {
+        svg += `
+      <defs>
+        <linearGradient id="${id}" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#4f46e5" />
+          <stop offset="100%" stop-color="#9333ea" />
+        </linearGradient>
+      </defs>`;
+    }
+    svg += `<rect width="100%" height="100%" fill="${bgColor}"/>`;
+    svg += `<path d="${path.trim()}" fill="${gradient ? `url(#${id})` : color}"/>`;
+    if (logo) {
+        const logoSize = size * 0.2;
+        const pos = (size - logoSize) / 2;
+        svg += `<image href="${logo}" x="${pos}" y="${pos}" width="${logoSize}" height="${logoSize}" />`;
+    }
+    svg += `</svg>`;
+    return svg;
+}
+
+async function renderCanvas(canvas, matrix, size, options = {}) {
+    const { logo, color = '#000', bgColor = '#fff' } = options;
+    const ctx = canvas.getContext('2d');
+    const n = matrix.length;
+    const cell = size / n;
+    canvas.width = size;
+    canvas.height = size;
+    // Draw background
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, size, size);
+    // Draw QR cells
+    ctx.fillStyle = color;
+    for (let y = 0; y < n; y++) {
+        for (let x = 0; x < n; x++) {
+            if (matrix[y][x]) {
+                // Use floor/ceil to avoid sub-pixel gaps
+                ctx.fillRect(Math.floor(x * cell), Math.floor(y * cell), Math.ceil(cell), Math.ceil(cell));
+            }
+        }
+    }
+    // Draw logo
+    if (logo) {
+        const img = new Image();
+        img.src = logo;
+        await new Promise((resolve, reject) => {
+            img.onload = resolve;
+            img.onerror = reject;
+        });
+        const logoSize = size * 0.2;
+        const pos = (size - logoSize) / 2;
+        // Clear area behind logo
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(pos - 2, pos - 2, logoSize + 4, logoSize + 4);
+        ctx.drawImage(img, pos, pos, logoSize, logoSize);
+    }
+}
+
+const CAP = {
+    1: { L: 17, M: 14, Q: 11, H: 7 },
+    2: { L: 32, M: 26, Q: 20, H: 14 },
+};
+function getVersion(len, ec) {
+    for (let v in CAP) {
+        if (len <= CAP[v][ec])
+            return Number(v);
+    }
+    return 1;
+}
+
+const GF_EXP = new Array(512);
+const GF_LOG = new Array(256);
+(function init() {
+    let x = 1;
+    for (let i = 0; i < 256; i++) {
+        GF_EXP[i] = x;
+        GF_LOG[x] = i;
+        x <<= 1;
+        if (x & 0x100)
+            x ^= 0x11d;
+    }
+    for (let i = 256; i < 512; i++)
+        GF_EXP[i] = GF_EXP[i - 256];
+})();
+function gfMul(x, y) {
+    if (x === 0 || y === 0)
+        return 0;
+    return GF_EXP[GF_LOG[x] + GF_LOG[y]];
+}
+
+const POLYS = {};
+function getPoly(n) {
+    if (POLYS[n])
+        return POLYS[n];
+    let p = [1];
+    for (let i = 0; i < n; i++) {
+        const next = new Array(p.length + 1).fill(0);
+        for (let j = 0; j < p.length; j++) {
+            next[j] ^= gfMul(p[j], GF_EXP[i]);
+            next[j + 1] ^= p[j];
+        }
+        p = next;
+    }
+    return POLYS[n] = p;
+}
+function reedSolomon(data, ecCount) {
+    const poly = getPoly(ecCount);
+    const res = [...data, ...new Array(ecCount).fill(0)];
+    for (let i = 0; i < data.length; i++) {
+        const factor = res[i];
+        if (factor !== 0) {
+            for (let j = 0; j < poly.length; j++) {
+                res[i + j] ^= gfMul(poly[j], factor);
+            }
+        }
+    }
+    return res.slice(data.length);
+}
+
+function applyMask(matrix, reserved, mask) {
+    const n = matrix.length;
+    for (let y = 0; y < n; y++) {
+        for (let x = 0; x < n; x++) {
+            if (reserved[y][x])
+                continue;
+            let cond = false;
+            switch (mask) {
+                case 0:
+                    cond = (x + y) % 2 === 0;
+                    break;
+                case 1:
+                    cond = y % 2 === 0;
+                    break;
+                case 2:
+                    cond = x % 3 === 0;
+                    break;
+                case 3:
+                    cond = (x + y) % 3 === 0;
+                    break;
+                case 4:
+                    cond = (Math.floor(y / 2) + Math.floor(x / 3)) % 2 === 0;
+                    break;
+                case 5:
+                    cond = (x * y) % 2 + (x * y) % 3 === 0;
+                    break;
+                case 6:
+                    cond = ((x * y) % 2 + (x * y) % 3) % 2 === 0;
+                    break;
+                case 7:
+                    cond = ((x * y) % 3 + (x + y) % 2) % 2 === 0;
+                    break;
+            }
+            if (cond)
+                matrix[y][x] ^= 1;
+        }
+    }
+}
+function score(m) {
+    const n = m.length;
+    // Penalty N1 & N2 omitted for brevity, but let's at least check balance
+    let blocks = 0;
+    for (let y = 0; y < n - 1; y++)
+        for (let x = 0; x < n - 1; x++)
+            if (m[y][x] === m[y][x + 1] && m[y][x] === m[y + 1][x] && m[y][x] === m[y + 1][x + 1])
+                blocks++;
+    let dark = 0;
+    for (let y = 0; y < n; y++)
+        for (let x = 0; x < n; x++)
+            if (m[y][x])
+                dark++;
+    const ratio = Math.abs(dark / (n * n) - 0.5) * 20;
+    return blocks * 3 + ratio * 10;
+}
+
+class QREngine {
+    data;
+    ec;
+    size;
+    matrix;
+    reserved;
+    constructor(data, ec = 'M') {
+        this.data = data;
+        this.ec = ec;
+        const v = getVersion(data.length, ec);
+        this.size = 21 + (v - 1) * 4;
+        this.matrix = Array.from({ length: this.size }, () => Array(this.size).fill(0));
+        this.reserved = Array.from({ length: this.size }, () => Array(this.size).fill(false));
+    }
+    set(x, y, v) {
+        this.matrix[y][x] = v;
+        this.reserved[y][x] = true;
+    }
+    patterns() {
+        const drawFinder = (x, y) => {
+            for (let r = -1; r <= 7; r++) {
+                for (let c = -1; c <= 7; c++) {
+                    const row = y + r, col = x + c;
+                    if (row >= 0 && row < this.size && col >= 0 && col < this.size) {
+                        const v = (r === 0 || r === 6 || c === 0 || c === 6 || (r >= 2 && r <= 4 && c >= 2 && c <= 4)) ? 1 : 0;
+                        this.set(col, row, v);
+                    }
+                }
+            }
+        };
+        drawFinder(0, 0);
+        drawFinder(this.size - 7, 0);
+        drawFinder(0, this.size - 7);
+        for (let i = 8; i < this.size - 8; i++) {
+            this.set(i, 6, i % 2 === 0 ? 1 : 0);
+            this.set(6, i, i % 2 === 0 ? 1 : 0);
+        }
+        this.set(8, this.size - 8, 1);
+    }
+    formatInfo(mask) {
+        const ech = { 'L': 1, 'M': 0, 'Q': 3, 'H': 2 };
+        let bits = (ech[this.ec] << 3) | mask;
+        let rem = bits;
+        for (let i = 0; i < 10; i++)
+            rem = (rem << 1) ^ ((rem >> 9) ? 0x537 : 0);
+        let data = ((bits << 10) | rem) ^ 0x5412;
+        for (let i = 0; i < 15; i++) {
+            const v = (data >> i) & 1;
+            if (i < 6)
+                this.matrix[i][8] = v;
+            else if (i < 8)
+                this.matrix[i + 1][8] = v;
+            else
+                this.matrix[this.size - 15 + i][8] = v;
+            if (i < 8)
+                this.matrix[8][this.size - 1 - i] = v;
+            else if (i < 9)
+                this.matrix[8][15 - i + 7 - 1] = v;
+            else
+                this.matrix[8][15 - i - 1] = v;
+        }
+    }
+    encode() {
+        const bits = [];
+        bits.push(0, 1, 0, 0);
+        for (let i = 7; i >= 0; i--)
+            bits.push((this.data.length >> i) & 1);
+        new TextEncoder().encode(this.data).forEach(b => {
+            for (let i = 7; i >= 0; i--)
+                bits.push((b >> i) & 1);
+        });
+        return bits;
+    }
+    place(bits) {
+        let col = this.size - 1, row = this.size - 1, dir = -1, i = 0;
+        while (col > 0) {
+            if (col === 6)
+                col--;
+            for (let r = 0; r < this.size; r++) {
+                let y = row + dir * r;
+                if (y < 0 || y >= this.size)
+                    continue;
+                for (let j = 0; j < 2; j++) {
+                    let x = col - j;
+                    if (this.reserved[y][x])
+                        continue;
+                    this.matrix[y][x] = bits[i++] || 0;
+                }
+            }
+            col -= 2;
+            dir *= -1;
+        }
+    }
+    build() {
+        this.patterns();
+        const bits = this.encode();
+        const bytes = [];
+        for (let i = 0; i < bits.length; i += 8) {
+            let b = 0;
+            for (let j = 0; j < 8; j++)
+                b = (b << 1) | (bits[i + j] || 0);
+            bytes.push(b);
+        }
+        const ecCount = { 1: { L: 7, M: 10, Q: 13, H: 17 }, 2: { L: 10, M: 16, Q: 22, H: 28 } }[this.size === 21 ? 1 : 2][this.ec];
+        const ec = reedSolomon(bytes, ecCount);
+        const full = [...bytes, ...ec];
+        const fullBits = [];
+        full.forEach(b => {
+            for (let i = 7; i >= 0; i--)
+                fullBits.push((b >> i) & 1);
+        });
+        this.place(fullBits);
+        let bestScore = 1000000, best = this.matrix;
+        for (let m = 0; m < 8; m++) {
+            const temp = this.matrix.map(r => [...r]);
+            applyMask(temp, this.reserved, m);
+            this.matrix = temp; // temporary for formatInfo
+            this.formatInfo(m);
+            const s = score(temp);
+            if (s < bestScore) {
+                bestScore = s;
+                best = this.matrix.map(r => [...r]);
+            }
+        }
+        return best;
+    }
+}
+
+const xQrCodeCss = () => `:host{display:inline-block;line-height:0}.qr-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;border-radius:8px;background:white;-webkit-box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);-webkit-transition:-webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;transition:-webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;transition:transform 0.3s ease, box-shadow 0.3s ease;transition:transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease}.qr-wrapper:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);box-shadow:0 8px 24px rgba(0, 0, 0, 0.12)}.qr-svg-container,canvas{width:100%;height:100%;-webkit-animation:qr-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);animation:qr-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1)}@-webkit-keyframes qr-fade-in{from{opacity:0;-webkit-transform:scale(0.95);transform:scale(0.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes qr-fade-in{from{opacity:0;-webkit-transform:scale(0.95);transform:scale(0.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}`;
+
+const XQRCode = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    // ===== Props =====
+    /** The value to encode in the QR code */
+    value = '';
+    /** Size of the QR code in pixels */
+    size = 256;
+    /** Error correction level */
+    ec = 'M';
+    /** Rendering type: 'svg' or 'canvas' */
+    type = 'svg';
+    /** Show gradient effect (SVG only) */
+    gradient = false;
+    /** Optional logo URL to display in the center */
+    logo;
+    color = '#000000';
+    /** Background color */
+    bgColor = '#ffffff';
+    // ===== State =====
+    svgContent = '';
+    matrix = null;
+    canvas;
+    // ===== Lifecycle =====
+    componentDidLoad() {
+        this.generate();
+    }
+    // ===== Watch =====
+    async generate() {
+        if (!this.value) {
+            this.matrix = null;
+            this.svgContent = '';
+            return;
+        }
+        const key = `${this.value}_${this.ec}`;
+        let matrix = qrCache.get(key);
+        if (!matrix) {
+            const qr = new QREngine(this.value, this.ec);
+            matrix = qr.build();
+            qrCache.set(key, matrix);
+        }
+        this.matrix = matrix;
+        this.renderQR();
+    }
+    renderQR() {
+        if (!this.matrix)
+            return;
+        if (this.type === 'svg') {
+            this.svgContent = renderSVG(this.matrix, this.size, {
+                gradient: this.gradient,
+                logo: this.logo,
+                color: this.color,
+                bgColor: this.bgColor,
+            });
+        }
+        else {
+            // Use requestAnimationFrame to ensure canvas is available and avoid blocking UI
+            requestAnimationFrame(async () => {
+                if (this.canvas && this.matrix) {
+                    await renderCanvas(this.canvas, this.matrix, this.size, {
+                        logo: this.logo,
+                        color: this.color,
+                        bgColor: this.bgColor,
+                    });
+                }
+            });
+        }
+    }
+    // ===== Render =====
+    render() {
+        return (index.h("div", { key: '7ed0e5fc4b8420634962d1992faff7779a0d41d0', class: "qr-wrapper", style: { width: `${this.size}px`, height: `${this.size}px` } }, this.type === 'svg' ? (index.h("div", { class: "qr-svg-container", innerHTML: this.svgContent })) : (index.h("canvas", { ref: (el) => (this.canvas = el), style: { display: 'block' } }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "generate": 0
+            }],
+        "ec": [{
+                "generate": 0
+            }],
+        "size": [{
+                "renderQR": 0
+            }],
+        "type": [{
+                "renderQR": 0
+            }],
+        "gradient": [{
+                "renderQR": 0
+            }],
+        "logo": [{
+                "renderQR": 0
+            }],
+        "color": [{
+                "renderQR": 0
+            }],
+        "bgColor": [{
+                "renderQR": 0
+            }]
+    }; }
+};
+XQRCode.style = xQrCodeCss();
+
+exports.x_qr_code = XQRCode;