web-to-print 0.1.0

package/dist/esm/wtp-print-area-editor.entry.js

@@ -0,0 +1,429 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-CUetmLbL.js';
+import { h as ho, s as setCanvasBackground, c as defaultPrintArea, N, p as printAreaToPixelCorners, e as pixelCornersToPrintArea, J, q } from './canvas-helpers-CK8OAq2J.js';
+
+const wtpPrintAreaEditorCss = () => `*.sc-wtp-print-area-editor,*.sc-wtp-print-area-editor::before,*.sc-wtp-print-area-editor::after{box-sizing:border-box}.sc-wtp-print-area-editor-h{font-family:var(--wtp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--wtp-color-text, #1e293b);line-height:1.5}.wtp-print-area-editor.sc-wtp-print-area-editor{display:inline-block;line-height:0;border:1px solid var(--wtp-color-border, #e2e8f0);border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%) 50%/20px 20px}`;
+
+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 J {
+    constructor(options) {
+        super(options);
+        this.cornerOffsets = options?.cornerOffsets ?? [
+            new N(-50, -50), new N(50, -50),
+            new N(50, 50), new N(-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 N(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 N(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 q({
+        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 N(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 N(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 q({
+        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 N(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();
+        },
+    });
+}
+const WtpPrintAreaEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.wtpPrintAreaChange = createEvent(this, "wtpPrintAreaChange");
+    }
+    get el() { return getElement(this); }
+    /** 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 ho(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 N(tl.x - cx, tl.y - cy),
+                new N(tr.x - cx, tr.y - cy),
+                new N(br.x - cx, br.y - cy),
+                new N(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 N(tl.x - cx, tl.y - cy),
+            new N(tr.x - cx, tr.y - cy),
+            new N(br.x - cx, br.y - cy),
+            new N(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 watchers() { return {
+        "productImage": [{
+                "onProductImageChange": 0
+            }],
+        "width": [{
+                "onSizeChange": 0
+            }],
+        "height": [{
+                "onSizeChange": 0
+            }],
+        "printArea": [{
+                "onPrintAreaChange": 0
+            }]
+    }; }
+};
+WtpPrintAreaEditor.style = wtpPrintAreaEditorCss();
+
+export { WtpPrintAreaEditor as wtp_print_area_editor };

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/types/components/wtp-editor/wtp-editor.d.ts

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EditorState, LogoData, PrintArea, EditorLabels } from '../../types';
+export declare class WtpEditor {
+    el: HTMLElement;
+    /** Canvas width in pixels. */
+    width: number;
+    /** Canvas height in pixels. */
+    height: number;
+    /** Product background image URL. */
+    productImage: string | undefined;
+    /** JSON-serialized initial editor state. */
+    initialState: string | undefined;
+    /** Available font families for the text tool. */
+    fonts: string[];
+    /** Print area definition (0-1 relative coordinates) to constrain objects. */
+    printArea: PrintArea | undefined;
+    /** Show print area overlay and bounding box for debugging. */
+    debug: boolean;
+    /** Override any of the user-facing toolbar strings. Missing keys fall back to English defaults. */
+    labels: Partial<EditorLabels>;
+    private getLabels;
+    selectedObjectId: string | null;
+    selectedObjectType: string | null;
+    selectedFont: string;
+    selectedTextColor: string;
+    /** Fires when the canvas is initialized and ready. */
+    wtpEditorReady: EventEmitter<void>;
+    /** Fires when the editor state changes (object add/move/remove). */
+    wtpEditorStateChanged: EventEmitter<EditorState>;
+    /** Fires when an object is selected on the canvas. */
+    wtpEditorObjectSelected: EventEmitter<{
+        id: string;
+        type: string;
+    }>;
+    /** Fires when the current selection is cleared. */
+    wtpEditorObjectDeselected: EventEmitter<void>;
+    private canvas;
+    private canvasEl;
+    private objectMap;
+    private previewUrlMap;
+    /** Resolves when the current background image has been loaded and the canvas resized. */
+    private backgroundReady;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onProductImageChange(): void;
+    onSizeChange(): void;
+    onDebugChange(): void;
+    onPrintAreaChange(): Promise<void>;
+    /** Add a logo image to the canvas and return its object ID. */
+    addLogo(logoData: LogoData): Promise<string>;
+    /** Add a text object to the canvas and return its object ID. */
+    addText(text: string, options?: {
+        fontFamily?: string;
+        fontSize?: number;
+        fill?: string;
+    }): Promise<string>;
+    /** Remove an object from the canvas by its ID. */
+    removeObject(id: string): Promise<void>;
+    /** Export the current editor state as a serializable object. */
+    exportState(): Promise<EditorState>;
+    /** Load a previously exported editor state. */
+    loadState(state: EditorState): Promise<void>;
+    /** Clear all user objects from the canvas, keeping the instance alive. */
+    resetCanvas(): Promise<void>;
+    /** Export the canvas as a data URL image. */
+    exportImage(format?: 'png' | 'jpeg', quality?: number): Promise<string>;
+    /** Export the canvas as a high-resolution data URL image (for PDF/print).
+     *  Returns the data URL plus the actual canvas dimensions (which may differ
+     *  from the width/height props after setCanvasBackground resizes the canvas). */
+    exportImageHighRes(format?: 'png' | 'jpeg', quality?: number, multiplier?: number): Promise<{
+        dataUrl: string;
+        width: number;
+        height: number;
+    }>;
+    /** Get a list of all objects on the canvas with their IDs and types. */
+    getObjects(): Promise<{
+        id: string;
+        type: string;
+    }[]>;
+    /** Update the text content of a text object by its ID. */
+    updateText(id: string, text: string): Promise<void>;
+    private initCanvas;
+    /** Draw print area outline and bounding box on the canvas when debug mode is active. */
+    private drawDebugOverlay;
+    /**
+     * Get the print area's rotated frame: center, local axes, and dimensions
+     * along those axes. This lets us clamp in the print area's own coordinate
+     * system instead of using an axis-aligned bounding box.
+     */
+    private getPrintAreaFrame;
+    private clampObjectToPrintArea;
+    private handleSelection;
+    private getObjectTransform;
+    private buildEditorState;
+    private emitStateChanged;
+    private handleAddText;
+    private handleFontChange;
+    private handleColorChange;
+    private handleDeleteSelected;
+    render(): any;
+}

package/dist/types/components/wtp-logo-renderer/wtp-logo-renderer.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { PlacedLogo, PrintArea } from '../../types';
+interface RenderedLayer {
+    id: string;
+    src: string;
+    exportImg: HTMLImageElement;
+    naturalWidth: number;
+    naturalHeight: number;
+    left: number;
+    top: number;
+    scaleX: number;
+    scaleY: number;
+    angle: number;
+    skewX: number;
+    skewY: number;
+}
+export declare class WtpLogoRenderer {
+    el: HTMLElement;
+    /** Product background image URL. */
+    productImage: string | undefined;
+    /** Container width in pixels. */
+    width: number;
+    /** Container height in pixels. */
+    height: number;
+    /** Array of logos to place on the renderer. */
+    logos: PlacedLogo[];
+    /** Background color. */
+    backgroundColor: string;
+    /** Print area definition for auto-fitting logos (relative 0-1 coordinates). */
+    printArea: PrintArea | undefined;
+    /** Fires when the renderer has finished rendering all logos. */
+    wtpRenderComplete: EventEmitter<{
+        dataUrl: string;
+    }>;
+    /** Fires when a rendering error occurs. */
+    wtpRenderError: EventEmitter<{
+        message: string;
+    }>;
+    layers: RenderedLayer[];
+    containerWidth: number;
+    containerHeight: number;
+    private productImg;
+    componentWillLoad(): void;
+    onProductImageChange(): void;
+    onLogosChange(): void;
+    onPrintAreaChange(): void;
+    onSizeChange(): void;
+    onBackgroundColorChange(): void;
+    /** Export the rendered scene as a data URL image. */
+    exportImage(format?: 'png' | 'jpeg', quality?: number): Promise<string>;
+    private computeLayout;
+    private emitRenderComplete;
+    render(): any;
+}
+export {};

package/dist/types/components/wtp-logo-upload/wtp-logo-upload.d.ts

@@ -0,0 +1,76 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LogoValidationConfig, LogoData, LogoValidationIssue, LogoMetadata, BgRemovalConfig, LogoUploadLabels } from '../../types';
+interface BgRemovalChoice {
+    originalDataUrl: string;
+    removedBgDataUrl: string | null;
+    removedBgWidth: number | null;
+    removedBgHeight: number | null;
+    metadata: LogoMetadata;
+    status: 'processing' | 'ready' | 'error';
+    errorMessage: string | null;
+}
+export declare class WtpLogoUpload {
+    /** Validation rules for uploaded logos. */
+    config: LogoValidationConfig;
+    /** Accepted file MIME types for the file input. */
+    accept: string;
+    /** Whether multiple files can be uploaded at once. */
+    multiple: boolean;
+    /** Disables the upload component. */
+    disabled: boolean;
+    /** Enables background removal for raster images after upload. */
+    enableBackgroundRemoval: boolean;
+    /** Configuration for the color-based background removal algorithm. */
+    bgRemovalConfig: Partial<BgRemovalConfig>;
+    /** Override any of the user-facing strings. Missing keys fall back to English defaults. */
+    labels: Partial<LogoUploadLabels>;
+    private getLabels;
+    isDragOver: boolean;
+    previews: LogoData[];
+    selectedIndex: number;
+    rejections: {
+        fileName: string;
+        issues: LogoValidationIssue[];
+    }[];
+    isProcessing: boolean;
+    pendingChoices: BgRemovalChoice[];
+    urlInput: string;
+    urlError: string | null;
+    isUrlFetching: boolean;
+    /** Fires when a logo passes validation and is ready for use. */
+    wtpLogoValidated: EventEmitter<LogoData>;
+    /** Fires when a logo fails validation. */
+    wtpLogoRejected: EventEmitter<{
+        file: File;
+        issues: LogoValidationIssue[];
+    }>;
+    /** Fires when processing state changes (true = busy, false = idle). */
+    wtpLogoProcessing: EventEmitter<boolean>;
+    /** Fires when a logo is selected from the preview gallery. */
+    wtpLogoSelected: EventEmitter<LogoData>;
+    private fileInputRef;
+    private buildLogoData;
+    private isRasterFormat;
+    private processFiles;
+    private addPendingChoice;
+    private performBackgroundRemoval;
+    private selectChoice;
+    private extractFileNameFromUrl;
+    private handleUrlSubmit;
+    private fileToDataUrl;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private handleInputChange;
+    private handleClick;
+    private handleKeyDown;
+    private handleUrlInput;
+    private handleUrlInputKeyDown;
+    private handleUrlSubmitClick;
+    private handleSelectOriginal;
+    private handleSelectRemoved;
+    private handleSelectPreview;
+    private handleRemovePreview;
+    render(): any;
+}
+export {};