web-to-print 0.1.0

package/dist/collection/components/wtp-print-area-editor/wtp-print-area-editor.js

@@ -0,0 +1,600 @@
+import { h } from "@stencil/core";
+import { Canvas, FabricObject, Control, Point } from "fabric";
+import { setCanvasBackground, printAreaToPixelCorners, pixelCornersToPrintArea, defaultPrintArea } from "../../utils/canvas-helpers";
+const CORNER_RADIUS = 7;
+/**
+ * Custom Fabric.js object that renders a quadrilateral defined by 4 corner
+ * offsets from the bounding-box center. Top/bottom edges can be curved
+ * via `bulge` (-1 to 1) using quadratic Bezier curves.
+ */
+class PrintAreaQuad extends FabricObject {
+    constructor(options) {
+        super(options);
+        this.cornerOffsets = options?.cornerOffsets ?? [
+            new Point(-50, -50), new Point(50, -50),
+            new Point(50, 50), new Point(-50, 50),
+        ];
+        this.bulge = options?.bulge ?? 0;
+        this.objectCaching = false;
+    }
+    _render(ctx) {
+        const [tl, tr, br, bl] = this.cornerOffsets;
+        ctx.beginPath();
+        ctx.moveTo(tl.x, tl.y);
+        if (this.bulge !== 0) {
+            // Curved top edge: control point at midpoint shifted by bulge
+            const topMidX = (tl.x + tr.x) / 2;
+            const topMidY = (tl.y + tr.y) / 2;
+            const bulgePixels = this.bulge * (this.height ?? 1);
+            ctx.quadraticCurveTo(topMidX, topMidY - bulgePixels, tr.x, tr.y);
+        }
+        else {
+            ctx.lineTo(tr.x, tr.y);
+        }
+        ctx.lineTo(br.x, br.y);
+        if (this.bulge !== 0) {
+            // Curved bottom edge: same direction as top for cylindrical appearance
+            const botMidX = (br.x + bl.x) / 2;
+            const botMidY = (br.y + bl.y) / 2;
+            const bulgePixels = this.bulge * (this.height ?? 1);
+            ctx.quadraticCurveTo(botMidX, botMidY - bulgePixels, bl.x, bl.y);
+        }
+        else {
+            ctx.lineTo(bl.x, bl.y);
+        }
+        ctx.closePath();
+        this._renderPaintInOrder(ctx);
+    }
+    /** Recompute left/top/width/height from absolute corner positions. */
+    recalcBounds() {
+        const center = this.getCenterPoint();
+        const abs = this.cornerOffsets.map(o => new Point(center.x + o.x, center.y + o.y));
+        const xs = abs.map(p => p.x);
+        const ys = abs.map(p => p.y);
+        const minX = Math.min(...xs);
+        const maxX = Math.max(...xs);
+        const minY = Math.min(...ys);
+        const maxY = Math.max(...ys);
+        const newCenterX = (minX + maxX) / 2;
+        const newCenterY = (minY + maxY) / 2;
+        this.cornerOffsets = abs.map(p => new Point(p.x - newCenterX, p.y - newCenterY));
+        this.set({
+            left: newCenterX,
+            top: newCenterY,
+            width: Math.max(maxX - minX, 1),
+            height: Math.max(maxY - minY, 1),
+        });
+        this.setCoords();
+    }
+}
+function buildCornerControl(index) {
+    return new Control({
+        x: 0,
+        y: 0,
+        sizeX: CORNER_RADIUS * 2,
+        sizeY: CORNER_RADIUS * 2,
+        touchSizeX: CORNER_RADIUS * 4,
+        touchSizeY: CORNER_RADIUS * 4,
+        cursorStyleHandler: () => 'move',
+        positionHandler: (_dim, finalMatrix, fabricObject) => {
+            const quad = fabricObject;
+            return new Point(quad.cornerOffsets[index].x, quad.cornerOffsets[index].y).transform(finalMatrix);
+        },
+        actionHandler: (_eventData, transformData, x, y) => {
+            const quad = transformData.target;
+            const center = quad.getCenterPoint();
+            quad.cornerOffsets[index] = new Point(x - center.x, y - center.y);
+            quad.recalcBounds();
+            return true;
+        },
+        render: (ctx, left, top) => {
+            ctx.save();
+            ctx.fillStyle = '#2563eb';
+            ctx.strokeStyle = '#ffffff';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.arc(left, top, CORNER_RADIUS, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+            ctx.restore();
+        },
+    });
+}
+function buildBulgeControl() {
+    const HANDLE_OFFSET_X = 24;
+    const TRACK_GAP = 4;
+    return new Control({
+        x: 0.5,
+        y: 0,
+        offsetX: HANDLE_OFFSET_X,
+        sizeX: CORNER_RADIUS * 2,
+        sizeY: CORNER_RADIUS * 2,
+        touchSizeX: CORNER_RADIUS * 4,
+        touchSizeY: CORNER_RADIUS * 4,
+        cursorStyleHandler: () => 'ns-resize',
+        positionHandler: (dim, finalMatrix, fabricObject) => {
+            const quad = fabricObject;
+            return new Point(0.5 * dim.x + HANDLE_OFFSET_X, -quad.bulge * dim.y / 2).transform(finalMatrix);
+        },
+        actionHandler: (_eventData, transformData, _x, y) => {
+            const quad = transformData.target;
+            const center = quad.getCenterPoint();
+            const halfH = (quad.height ?? 0) * (quad.scaleY ?? 1) / 2;
+            const bulge = Math.max(-1, Math.min(1, (center.y - y) / Math.max(halfH, 1)));
+            quad.bulge = bulge;
+            return true;
+        },
+        render: (ctx, left, top, _styleOverride, fabricObject) => {
+            const quad = fabricObject;
+            const halfH = ((quad.height ?? 0) * (quad.scaleY ?? 1)) / 2;
+            const angleRad = ((quad.angle ?? 0) * Math.PI) / 180;
+            const trackTopX = left + Math.sin(angleRad) * halfH;
+            const trackTopY = top - Math.cos(angleRad) * halfH;
+            const trackBotX = left - Math.sin(angleRad) * halfH;
+            const trackBotY = top + Math.cos(angleRad) * halfH;
+            ctx.save();
+            // Track line
+            ctx.strokeStyle = 'rgba(37, 99, 235, 0.3)';
+            ctx.lineWidth = 2;
+            ctx.setLineDash([3, 3]);
+            ctx.beginPath();
+            ctx.moveTo(trackTopX, trackTopY - TRACK_GAP);
+            ctx.lineTo(trackBotX, trackBotY + TRACK_GAP);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            // Handle circle
+            ctx.fillStyle = '#2563eb';
+            ctx.strokeStyle = '#ffffff';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.arc(left, top, CORNER_RADIUS, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+            // Arrow up + "+" label
+            ctx.fillStyle = 'rgba(37, 99, 235, 0.5)';
+            ctx.beginPath();
+            ctx.moveTo(trackTopX, trackTopY - TRACK_GAP);
+            ctx.lineTo(trackTopX - 4, trackTopY - TRACK_GAP + 6);
+            ctx.lineTo(trackTopX + 4, trackTopY - TRACK_GAP + 6);
+            ctx.closePath();
+            ctx.fill();
+            ctx.font = 'bold 10px sans-serif';
+            ctx.textAlign = 'center';
+            ctx.fillText('+', trackTopX, trackTopY - TRACK_GAP - 4);
+            // Arrow down + "\u2212" label
+            ctx.beginPath();
+            ctx.moveTo(trackBotX, trackBotY + TRACK_GAP);
+            ctx.lineTo(trackBotX - 4, trackBotY + TRACK_GAP - 6);
+            ctx.lineTo(trackBotX + 4, trackBotY + TRACK_GAP - 6);
+            ctx.closePath();
+            ctx.fill();
+            ctx.fillText('\u2212', trackBotX, trackBotY + TRACK_GAP + 12);
+            ctx.restore();
+        },
+    });
+}
+export class WtpPrintAreaEditor {
+    el;
+    /** Product background image URL. */
+    productImage;
+    /** Canvas width in pixels. */
+    width = 800;
+    /** Canvas height in pixels. */
+    height = 600;
+    /** Current print area (relative 0-1 coordinates). */
+    printArea;
+    /** Fires when the print area rectangle is modified. */
+    wtpPrintAreaChange;
+    canvas;
+    canvasEl;
+    areaQuad;
+    /** Generation counter to discard stale background loads. */
+    bgLoadGen = 0;
+    componentDidLoad() {
+        this.initCanvas();
+    }
+    disconnectedCallback() {
+        ++this.bgLoadGen;
+        this.canvas?.dispose();
+    }
+    async onProductImageChange() {
+        if (this.canvas === undefined || this.productImage === undefined)
+            return;
+        await this.reloadCanvas();
+    }
+    async onSizeChange() {
+        if (this.canvas === undefined)
+            return;
+        await this.reloadCanvas();
+    }
+    onPrintAreaChange() {
+        this.syncQuadFromPrintArea();
+    }
+    /** Get the current print area as relative 0-1 coordinates. */
+    async getPrintArea() {
+        return this.readQuadAsPrintArea();
+    }
+    /** Set the print area and update the quad on canvas. */
+    async setPrintArea(printArea) {
+        this.printArea = printArea;
+        this.syncQuadFromPrintArea();
+    }
+    /** Create the Fabric Canvas once and perform the initial load. */
+    async initCanvas() {
+        if (this.canvasEl === undefined)
+            return;
+        this.canvas = new Canvas(this.canvasEl, {
+            width: this.width,
+            height: this.height,
+            backgroundColor: '#ffffff',
+            selection: false,
+        });
+        this.canvas.on('object:modified', (e) => {
+            if (e.target === this.areaQuad) {
+                this.emitPrintArea();
+            }
+        });
+        this.canvas.on('object:moving', (e) => {
+            if (e.target === this.areaQuad) {
+                this.clampQuadToBounds();
+            }
+        });
+        await this.reloadCanvas();
+    }
+    /**
+     * Clear the canvas and reload background + quad.
+     * Keeps the Fabric Canvas instance alive (no dispose/recreate) to avoid
+     * stale DOM state from async dispose in Fabric v7.
+     */
+    async reloadCanvas() {
+        if (this.canvas === undefined)
+            return;
+        const gen = ++this.bgLoadGen;
+        // Remove all objects (background image + quad)
+        this.areaQuad = undefined;
+        this.canvas.discardActiveObject();
+        for (const obj of this.canvas.getObjects().slice()) {
+            this.canvas.remove(obj);
+        }
+        // Reset internal state to bounding-box dimensions
+        this.canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
+        this.canvas.setDimensions({ width: this.width, height: this.height });
+        this.canvas.backgroundColor = '#ffffff';
+        this.canvas.requestRenderAll();
+        // Load product image (may auto-resize canvas in contain mode)
+        if (this.productImage !== undefined && this.productImage !== '') {
+            await setCanvasBackground(this.canvas, this.productImage);
+        }
+        if (gen !== this.bgLoadGen)
+            return;
+        this.createAreaQuad();
+        this.canvas.renderAll();
+    }
+    createAreaQuad() {
+        if (this.canvas === undefined)
+            return;
+        const pa = this.printArea ?? defaultPrintArea();
+        // Convert relative coords directly to canvas pixels (image-relative coordinates)
+        const cw = this.canvas.getWidth();
+        const ch = this.canvas.getHeight();
+        const [tl, tr, br, bl] = printAreaToPixelCorners(pa, cw, ch);
+        // Compute centroid and bounding box
+        const cx = (tl.x + tr.x + br.x + bl.x) / 4;
+        const cy = (tl.y + tr.y + br.y + bl.y) / 4;
+        const xs = [tl.x, tr.x, br.x, bl.x];
+        const ys = [tl.y, tr.y, br.y, bl.y];
+        const bbW = Math.max(Math.max(...xs) - Math.min(...xs), 1);
+        const bbH = Math.max(Math.max(...ys) - Math.min(...ys), 1);
+        this.areaQuad = new PrintAreaQuad({
+            left: cx,
+            top: cy,
+            width: bbW,
+            height: bbH,
+            cornerOffsets: [
+                new Point(tl.x - cx, tl.y - cy),
+                new Point(tr.x - cx, tr.y - cy),
+                new Point(br.x - cx, br.y - cy),
+                new Point(bl.x - cx, bl.y - cy),
+            ],
+            bulge: pa.bulge ?? 0,
+            originX: 'center',
+            originY: 'center',
+            fill: 'rgba(37, 99, 235, 0.15)',
+            stroke: '#2563eb',
+            strokeWidth: 2,
+            strokeDashArray: [6, 4],
+            // Disable standard resize/rotate controls
+            lockScalingX: true,
+            lockScalingY: true,
+            lockRotation: true,
+            hasRotatingPoint: false,
+            borderColor: '#2563eb',
+        });
+        // Replace all controls with corner handles + bulge
+        this.areaQuad.controls = {
+            corner0: buildCornerControl(0),
+            corner1: buildCornerControl(1),
+            corner2: buildCornerControl(2),
+            corner3: buildCornerControl(3),
+            bulgeHandle: buildBulgeControl(),
+        };
+        this.canvas.add(this.areaQuad);
+        this.canvas.renderAll();
+    }
+    syncQuadFromPrintArea() {
+        if (this.areaQuad === undefined || this.canvas === undefined)
+            return;
+        const pa = this.printArea ?? defaultPrintArea();
+        // Convert relative coords directly to canvas pixels (image-relative coordinates)
+        const cw = this.canvas.getWidth();
+        const ch = this.canvas.getHeight();
+        const [tl, tr, br, bl] = printAreaToPixelCorners(pa, cw, ch);
+        const cx = (tl.x + tr.x + br.x + bl.x) / 4;
+        const cy = (tl.y + tr.y + br.y + bl.y) / 4;
+        const xs = [tl.x, tr.x, br.x, bl.x];
+        const ys = [tl.y, tr.y, br.y, bl.y];
+        this.areaQuad.cornerOffsets = [
+            new Point(tl.x - cx, tl.y - cy),
+            new Point(tr.x - cx, tr.y - cy),
+            new Point(br.x - cx, br.y - cy),
+            new Point(bl.x - cx, bl.y - cy),
+        ];
+        this.areaQuad.bulge = pa.bulge ?? 0;
+        this.areaQuad.set({
+            left: cx,
+            top: cy,
+            width: Math.max(Math.max(...xs) - Math.min(...xs), 1),
+            height: Math.max(Math.max(...ys) - Math.min(...ys), 1),
+            scaleX: 1,
+            scaleY: 1,
+        });
+        this.areaQuad.setCoords();
+        this.canvas.renderAll();
+    }
+    clampQuadToBounds() {
+        if (this.areaQuad === undefined)
+            return;
+        const center = this.areaQuad.getCenterPoint();
+        const abs = this.areaQuad.cornerOffsets.map(o => ({
+            x: center.x + o.x,
+            y: center.y + o.y,
+        }));
+        // Find how much the quad exceeds canvas bounds
+        let dx = 0;
+        let dy = 0;
+        for (const p of abs) {
+            if (p.x < 0)
+                dx = Math.max(dx, -p.x);
+            if (p.x > this.canvas.getWidth())
+                dx = Math.min(dx, this.canvas.getWidth() - p.x);
+            if (p.y < 0)
+                dy = Math.max(dy, -p.y);
+            if (p.y > this.canvas.getHeight())
+                dy = Math.min(dy, this.canvas.getHeight() - p.y);
+        }
+        if (dx !== 0 || dy !== 0) {
+            this.areaQuad.set({
+                left: (this.areaQuad.left ?? 0) + dx,
+                top: (this.areaQuad.top ?? 0) + dy,
+            });
+        }
+    }
+    readQuadAsPrintArea() {
+        if (this.areaQuad === undefined) {
+            return this.printArea ?? defaultPrintArea();
+        }
+        const center = this.areaQuad.getCenterPoint();
+        const corners = [
+            { x: center.x + this.areaQuad.cornerOffsets[0].x, y: center.y + this.areaQuad.cornerOffsets[0].y },
+            { x: center.x + this.areaQuad.cornerOffsets[1].x, y: center.y + this.areaQuad.cornerOffsets[1].y },
+            { x: center.x + this.areaQuad.cornerOffsets[2].x, y: center.y + this.areaQuad.cornerOffsets[2].y },
+            { x: center.x + this.areaQuad.cornerOffsets[3].x, y: center.y + this.areaQuad.cornerOffsets[3].y },
+        ];
+        // Convert canvas pixels directly to 0-1 image-relative coordinates
+        const cw = this.canvas.getWidth();
+        const ch = this.canvas.getHeight();
+        return pixelCornersToPrintArea(corners, cw, ch, this.areaQuad.bulge);
+    }
+    emitPrintArea() {
+        const area = this.readQuadAsPrintArea();
+        this.printArea = area;
+        this.wtpPrintAreaChange.emit(area);
+    }
+    render() {
+        return (h("div", { key: 'fbeaeb8ac49780440ceb1bffa38689a23aeef66a', class: "wtp-print-area-editor" }, h("canvas", { key: 'b7e97909efaa17c7ffb4b089cf31e508e20c094e', ref: el => (this.canvasEl = el) })));
+    }
+    static get is() { return "wtp-print-area-editor"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wtp-print-area-editor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wtp-print-area-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "productImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Product background image URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "product-image"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Canvas width in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "800"
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Canvas height in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "600"
+            },
+            "printArea": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "PrintArea | undefined",
+                    "resolved": "PrintArea",
+                    "references": {
+                        "PrintArea": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::PrintArea",
+                            "referenceLocation": "PrintArea"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current print area (relative 0-1 coordinates)."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wtpPrintAreaChange",
+                "name": "wtpPrintAreaChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the print area rectangle is modified."
+                },
+                "complexType": {
+                    "original": "PrintArea",
+                    "resolved": "PrintArea",
+                    "references": {
+                        "PrintArea": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::PrintArea",
+                            "referenceLocation": "PrintArea"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getPrintArea": {
+                "complexType": {
+                    "signature": "() => Promise<PrintArea>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PrintArea": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::PrintArea",
+                            "referenceLocation": "PrintArea"
+                        }
+                    },
+                    "return": "Promise<PrintArea>"
+                },
+                "docs": {
+                    "text": "Get the current print area as relative 0-1 coordinates.",
+                    "tags": []
+                }
+            },
+            "setPrintArea": {
+                "complexType": {
+                    "signature": "(printArea: PrintArea) => Promise<void>",
+                    "parameters": [{
+                            "name": "printArea",
+                            "type": "PrintArea",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PrintArea": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::PrintArea",
+                            "referenceLocation": "PrintArea"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the print area and update the quad on canvas.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "productImage",
+                "methodName": "onProductImageChange"
+            }, {
+                "propName": "width",
+                "methodName": "onSizeChange"
+            }, {
+                "propName": "height",
+                "methodName": "onSizeChange"
+            }, {
+                "propName": "printArea",
+                "methodName": "onPrintAreaChange"
+            }];
+    }
+}

package/dist/collection/examples/schaeffler--big.svg

@@ -0,0 +1 @@
+<!-- by TradingView --><svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path fill="#08954C" d="M0 0h56v56H0z"/><path d="M5.6 25C4.4 25 4 26.05 4 26.58c0 1.49 1.17 1.65 1.38 1.72.85.29 1.38.27 1.38 1.05 0 .48-.36.84-.77.84-.7 0-.91-.43-1-1.19H4v2h1v-.5c.15.31.6.5 1.07.5.93 0 1.71-.68 1.71-1.76 0-1.24-.78-1.55-1.47-1.78-.7-.23-1.31-.35-1.31-.9 0-.49.35-.77.64-.77.28 0 .5.12.69.31.17.18.3.44.35.74h.9V25h-.95v.48C6.36 25.18 6 25 5.6 25Zm5.07 0C9.45 25 8 25.94 8 27.96 8 29.67 9.22 31 10.69 31c1.11 0 2-.63 2.3-2h-.97c-.28.63-.57 1-1.33 1C9.6 30 9 29.09 9 28c0-1.11.62-2 1.69-2 .29 0 .59.06.83.24.24.17.43.44.5.76H13v-2h-1v.5c-.41-.44-1.16-.5-1.33-.5Zm2.84 0v1H14v4h-.5v1h2.03v-1H15v-1.62h2V30h-.54v1h2.06v-1H18v-4h.52v-1h-2.06v1H17v1.38h-2V26h.53v-1H13.5ZM20 25v1h.55l-1.27 4h-.43v1h1.83v-1h-.55l.36-1h1.54l.35 1h-.56v1h1.88v-1h-.38l-1.24-4h.55v-1H20Zm4.45 0v1H25v4h-.55v1h3.93v-2h-.8v1H26v-1.73h1.34v-.91H26V26h1.57v.65h.81V25h-3.93Zm4.88 0v1H30v4h-.67v1h2.21v-1H31v-1.73h1.33v-.91H31V26h1.4v.65h.93V25h-4ZM34 25v1h.5v4H34v1h2v-1h-.6v-1.73H37v-.91h-1.6V26H37v.65h1V25h-4Zm4.44 0v1H39v4h-.56v1H42v-2h-1v1h-1v-4h.57v-1h-2.13Zm4.06 0v1h.5v4h-.5v1H47v-2h-1v1h-2v-1.73h1.38v-.91H44V26h2v.65h1V25h-4.5Zm5.02 0v1H48v4h-.48v1h2.03v-1H49v-1.73h.54c.37 0 .88.04.88.58V31H52v-1h-.66v-1.22c0-.35-.04-.75-.62-.9v-.03c.53-.25.8-.62.8-1.29 0-.08.01-.45-.22-.79a1.81 1.81 0 0 0-1.58-.77h-2.2ZM49 26h.48c.48 0 1.11-.06 1.11.65 0 .77-.5.83-1 .83H49V26Zm-27.73.25h.01l.57 1.75h-1.17l.59-1.75Z" fill="#fff"/></svg>

package/dist/collection/index.js

@@ -0,0 +1,8 @@
+/**
+ * @fileoverview Entry point for the web-to-print component library.
+ *
+ * Use this file to export utilities, types, and constants.
+ * Components are consumed via the approaches outlined in the README.
+ */
+export { DEFAULT_VALIDATION_CONFIG, DEFAULT_BG_REMOVAL_CONFIG } from './types';
+export { exportProductPdf } from './utils/pdf-export';

package/dist/collection/types/editor.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/index.js

@@ -0,0 +1,2 @@
+export { DEFAULT_VALIDATION_CONFIG, DEFAULT_BG_REMOVAL_CONFIG } from './logo';
+export { DEFAULT_LOGO_UPLOAD_LABELS, DEFAULT_EDITOR_LABELS } from './labels';

package/dist/collection/types/labels.js

@@ -0,0 +1,30 @@
+// User-facing strings for components, overridable via the `labels` prop.
+// Pass any subset; missing keys fall back to the English defaults below.
+export const DEFAULT_LOGO_UPLOAD_LABELS = {
+    urlPlaceholder: 'https://example.com/logo.png',
+    urlSubmit: 'Fetch',
+    dividerText: 'or',
+    dropPromptText: 'Drag & drop your logo here or click to browse',
+    dropPromptHint: 'PNG, JPEG, SVG, TIFF, or AVIF',
+    uploadAriaLabel: 'Upload logo file',
+    removeAriaLabel: (fileName) => `Remove ${fileName}`,
+    urlErrorEmpty: 'Please enter a URL',
+    urlErrorInvalid: 'Invalid URL format',
+    urlErrorProtocol: 'Only HTTPS URLs are supported',
+    urlErrorHttp: (status, statusText) => `HTTP ${status}: ${statusText}`,
+    urlErrorNetwork: 'Could not fetch the image. The server may not allow cross-origin requests (CORS).',
+    urlErrorFetch: 'Failed to fetch image',
+    bgRemovalProcessing: 'Removing background...',
+    bgRemovalUseOriginal: 'Use Original',
+    bgRemovalUseRemoved: 'Without Background',
+    bgRemovalFailed: 'Failed',
+    rejectionDpiUnit: 'DPI',
+};
+export const DEFAULT_EDITOR_LABELS = {
+    addTextButton: 'Add Text',
+    addTextTooltip: 'Add text',
+    fontSelectTooltip: 'Font family',
+    colorPickerTooltip: 'Text color',
+    deleteButtonTooltip: 'Delete selected',
+    defaultText: 'New Text',
+};

package/dist/collection/types/logo.js

@@ -0,0 +1,13 @@
+export const DEFAULT_VALIDATION_CONFIG = {
+    minDpi: 300,
+    maxFileSize: 50 * 1024 * 1024, // 50MB
+    minWidth: 100,
+    minHeight: 100,
+    allowedFormats: ['png', 'jpeg', 'svg', 'tiff', 'avif'],
+};
+export const DEFAULT_BG_REMOVAL_CONFIG = {
+    tolerance: 40,
+    minEdgeRatio: 0.3,
+    autoCrop: true,
+    autoCropPadding: 2,
+};