web-to-print 0.1.0

package/dist/collection/components/wtp-logo-upload/wtp-logo-upload.js

@@ -0,0 +1,573 @@
+import { h } from "@stencil/core";
+import { DEFAULT_VALIDATION_CONFIG, DEFAULT_LOGO_UPLOAD_LABELS } from "../../types";
+import { validateLogo } from "../../utils/logo-validation";
+import { removeBackground } from "../../utils/background-removal";
+import { generatePreviewDataUrl } from "../../utils/image-preview";
+import { trimSvgWhitespace, parseSvgDimensions } from "../../utils/canvas-helpers";
+export class WtpLogoUpload {
+    /** Validation rules for uploaded logos. */
+    config = DEFAULT_VALIDATION_CONFIG;
+    /** Accepted file MIME types for the file input. */
+    accept = 'image/png,image/jpeg,image/svg+xml,image/tiff,image/avif';
+    /** Whether multiple files can be uploaded at once. */
+    multiple = false;
+    /** Disables the upload component. */
+    disabled = false;
+    /** Enables background removal for raster images after upload. */
+    enableBackgroundRemoval = false;
+    /** Configuration for the color-based background removal algorithm. */
+    bgRemovalConfig = {};
+    /** Override any of the user-facing strings. Missing keys fall back to English defaults. */
+    labels = {};
+    getLabels() {
+        return { ...DEFAULT_LOGO_UPLOAD_LABELS, ...this.labels };
+    }
+    isDragOver = false;
+    previews = [];
+    selectedIndex = -1;
+    rejections = [];
+    isProcessing = false;
+    pendingChoices = [];
+    urlInput = '';
+    urlError = null;
+    isUrlFetching = false;
+    /** Fires when a logo passes validation and is ready for use. */
+    wtpLogoValidated;
+    /** Fires when a logo fails validation. */
+    wtpLogoRejected;
+    /** Fires when processing state changes (true = busy, false = idle). */
+    wtpLogoProcessing;
+    /** Fires when a logo is selected from the preview gallery. */
+    wtpLogoSelected;
+    fileInputRef;
+    async buildLogoData(dataUrl, metadata) {
+        const previewDataUrl = await generatePreviewDataUrl(dataUrl);
+        return { dataUrl, previewDataUrl, metadata };
+    }
+    isRasterFormat(format) {
+        return ['png', 'jpeg', 'tiff', 'avif'].includes(format);
+    }
+    async processFiles(files) {
+        if (this.disabled)
+            return;
+        this.isProcessing = true;
+        this.rejections = [];
+        this.wtpLogoProcessing.emit(true);
+        const fileArray = Array.from(files);
+        for (const file of fileArray) {
+            const result = await validateLogo(file, this.config);
+            if (result.valid) {
+                const rawDataUrl = await this.fileToDataUrl(file);
+                let dataUrl;
+                const metadata = result.metadata;
+                if (metadata.format === 'svg') {
+                    dataUrl = await trimSvgWhitespace(rawDataUrl);
+                    const trimmedDims = parseSvgDimensions(dataUrl);
+                    if (trimmedDims !== null) {
+                        metadata.width = trimmedDims.width;
+                        metadata.height = trimmedDims.height;
+                    }
+                }
+                else {
+                    dataUrl = rawDataUrl;
+                }
+                if (this.enableBackgroundRemoval && this.isRasterFormat(metadata.format)) {
+                    this.addPendingChoice(dataUrl, metadata, file);
+                }
+                else {
+                    const logoData = await this.buildLogoData(dataUrl, metadata);
+                    this.previews = [...this.previews, logoData];
+                    this.selectedIndex = this.previews.length - 1;
+                    this.wtpLogoValidated.emit(logoData);
+                    this.wtpLogoSelected.emit(logoData);
+                }
+            }
+            else {
+                this.rejections = [...this.rejections, { fileName: file.name, issues: result.issues }];
+                this.wtpLogoRejected.emit({ file, issues: result.issues });
+            }
+        }
+        this.isProcessing = false;
+        this.wtpLogoProcessing.emit(false);
+    }
+    addPendingChoice(originalDataUrl, metadata, file) {
+        const choice = {
+            originalDataUrl,
+            removedBgDataUrl: null,
+            removedBgWidth: null,
+            removedBgHeight: null,
+            metadata,
+            status: 'processing',
+            errorMessage: null,
+        };
+        this.pendingChoices = [...this.pendingChoices, choice];
+        const index = this.pendingChoices.length - 1;
+        this.performBackgroundRemoval(file, index);
+    }
+    async performBackgroundRemoval(file, index) {
+        try {
+            const result = await removeBackground(file, this.bgRemovalConfig);
+            this.pendingChoices = this.pendingChoices.map((c, i) => i === index ? { ...c, removedBgDataUrl: result.dataUrl, removedBgWidth: result.width, removedBgHeight: result.height, status: 'ready' } : c);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Background removal failed';
+            this.pendingChoices = this.pendingChoices.map((c, i) => i === index ? { ...c, status: 'error', errorMessage: message } : c);
+        }
+    }
+    async selectChoice(index, useRemoved) {
+        const choice = this.pendingChoices[index];
+        if (choice === undefined)
+            return;
+        const dataUrl = useRemoved && choice.removedBgDataUrl !== null ? choice.removedBgDataUrl : choice.originalDataUrl;
+        const metadata = useRemoved && choice.removedBgWidth !== null && choice.removedBgHeight !== null
+            ? { ...choice.metadata, width: choice.removedBgWidth, height: choice.removedBgHeight }
+            : choice.metadata;
+        const logoData = await this.buildLogoData(dataUrl, metadata);
+        this.previews = [...this.previews, logoData];
+        this.selectedIndex = this.previews.length - 1;
+        this.wtpLogoValidated.emit(logoData);
+        this.wtpLogoSelected.emit(logoData);
+        this.pendingChoices = this.pendingChoices.filter((_, i) => i !== index);
+    }
+    extractFileNameFromUrl(url) {
+        try {
+            const pathname = new URL(url).pathname;
+            const segments = pathname.split('/');
+            const last = segments[segments.length - 1];
+            return last !== undefined && last !== '' && last.includes('.') ? decodeURIComponent(last) : 'downloaded-image';
+        }
+        catch {
+            return 'downloaded-image';
+        }
+    }
+    async handleUrlSubmit() {
+        const url = this.urlInput.trim();
+        const labels = this.getLabels();
+        this.urlError = null;
+        if (url === '') {
+            this.urlError = labels.urlErrorEmpty;
+            return;
+        }
+        let parsed;
+        try {
+            parsed = new URL(url);
+        }
+        catch {
+            this.urlError = labels.urlErrorInvalid;
+            return;
+        }
+        if (parsed.protocol !== 'https:') {
+            this.urlError = labels.urlErrorProtocol;
+            return;
+        }
+        this.isUrlFetching = true;
+        try {
+            const response = await fetch(url, { mode: 'cors' });
+            if (!response.ok) {
+                this.urlError = labels.urlErrorHttp(response.status, response.statusText);
+                return;
+            }
+            const blob = await response.blob();
+            const fileName = this.extractFileNameFromUrl(url);
+            const file = new File([blob], fileName, { type: blob.type });
+            this.urlInput = '';
+            await this.processFiles([file]);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : labels.urlErrorFetch;
+            if (message.includes('Failed to fetch') || message.includes('NetworkError')) {
+                this.urlError = labels.urlErrorNetwork;
+            }
+            else {
+                this.urlError = message;
+            }
+        }
+        finally {
+            this.isUrlFetching = false;
+        }
+    }
+    fileToDataUrl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = () => reject(new Error('Failed to read file'));
+            reader.readAsDataURL(file);
+        });
+    }
+    handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!this.disabled)
+            this.isDragOver = true;
+    };
+    handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.isDragOver = false;
+    };
+    handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.isDragOver = false;
+        if (e.dataTransfer?.files !== undefined) {
+            this.processFiles(e.dataTransfer.files);
+        }
+    };
+    handleInputChange = (e) => {
+        const input = e.target;
+        if (input.files !== null) {
+            this.processFiles(input.files);
+        }
+    };
+    handleClick = () => {
+        if (!this.disabled) {
+            this.fileInputRef?.click();
+        }
+    };
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.handleClick();
+        }
+    };
+    handleUrlInput = (e) => {
+        this.urlInput = e.target.value;
+    };
+    handleUrlInputKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.handleUrlSubmit();
+        }
+    };
+    handleUrlSubmitClick = () => {
+        this.handleUrlSubmit();
+    };
+    handleSelectOriginal = (e) => {
+        const btn = e.currentTarget.closest('[data-index]');
+        if (btn === null)
+            return;
+        this.selectChoice(Number(btn.dataset.index), false);
+    };
+    handleSelectRemoved = (e) => {
+        const btn = e.currentTarget.closest('[data-index]');
+        if (btn === null)
+            return;
+        this.selectChoice(Number(btn.dataset.index), true);
+    };
+    handleSelectPreview = (e) => {
+        const item = e.currentTarget.closest('[data-index]');
+        if (item === null)
+            return;
+        const index = Number(item.dataset.index);
+        this.selectedIndex = index;
+        this.wtpLogoSelected.emit(this.previews[index]);
+    };
+    handleRemovePreview = (e) => {
+        e.stopPropagation();
+        const btn = e.currentTarget.closest('[data-index]');
+        if (btn === null)
+            return;
+        const index = Number(btn.dataset.index);
+        this.previews = this.previews.filter((_, i) => i !== index);
+        if (this.selectedIndex === index) {
+            this.selectedIndex = this.previews.length > 0 ? 0 : -1;
+            if (this.selectedIndex >= 0) {
+                this.wtpLogoSelected.emit(this.previews[this.selectedIndex]);
+            }
+        }
+        else if (this.selectedIndex > index) {
+            this.selectedIndex--;
+        }
+    };
+    render() {
+        const labels = this.getLabels();
+        return (h("div", { key: '605b0b0f0e3d523fad548c8e250deb586fa047cd', class: "wtp-logo-upload", part: "root" }, h("div", { key: '206c52a14ba4bf1ca88361298ea1dd34ede33abe', class: "url-input-section" }, h("div", { key: '8bbe6a257f53d3aaf40566b1686c77352a571182', class: "url-input-wrapper" }, h("input", { key: '88f87e7772bf404088a1978a3964af098362d2fd', type: "url", class: "url-input", part: "url-input", placeholder: labels.urlPlaceholder, value: this.urlInput, disabled: this.disabled || this.isUrlFetching, onInput: this.handleUrlInput, onKeyDown: this.handleUrlInputKeyDown }), h("button", { key: '77b0b04012be3869fcad0841542ff6ba65175b69', class: "url-submit-btn", part: "url-submit-btn", disabled: this.disabled || this.isUrlFetching || this.urlInput.trim() === '', onClick: this.handleUrlSubmitClick }, this.isUrlFetching ? h("span", { class: "spinner-sm" }) : labels.urlSubmit)), this.urlError !== null && h("p", { key: '21af070e82a88911b00cfb35c21c9f4a0b1f9537', class: "url-error", part: "url-error" }, this.urlError)), h("div", { key: '40ea61275f84ea49bde47d4a2d7df6b48733b8df', class: "divider", part: "divider" }, h("span", { key: '617d48c410b5166efbe38902fbc36a537f98f359', class: "divider-text" }, labels.dividerText)), h("div", { key: '56aebdb221b17ed365e8e1b780f643d2985a0a76', class: {
+                'upload-zone': true,
+                'drag-over': this.isDragOver,
+                'disabled': this.disabled,
+            }, part: `upload-zone${this.isDragOver ? ' drag-over' : ''}${this.disabled ? ' disabled' : ''}`, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: this.disabled ? -1 : 0, "aria-label": labels.uploadAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("input", { key: 'b4dd839c3d9dfa26f7e22058ca8d88d1b5128a78', type: "file", ref: el => (this.fileInputRef = el), accept: this.accept, multiple: this.multiple, onChange: this.handleInputChange, class: "file-input", tabindex: -1 }), h("slot", { key: '77c9c469ed07b881d8e09d15ba6ab39938c8685e', name: "prompt" }, h("div", { key: '1dc98ac4ee1f0a830fff45c420dcdb83d5e51e08', class: "default-prompt" }, h("svg", { key: '6b0b37518c24f7af3d69df7cfb00a367ceeed172', class: "upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '7f8c88dc1022380127cac7dc278b6363013293f8', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '0ae415e56725fa3e35229dd95824c69c35b8b157', points: "17 8 12 3 7 8" }), h("line", { key: '4aceb053d8f82b24b01c250337d17787435b93a2', x1: "12", y1: "3", x2: "12", y2: "15" })), h("p", { key: 'dbc8e47dc04b7f1c03053e244c7d8c5d5e70b533', class: "prompt-text", part: "prompt-text" }, labels.dropPromptText), h("p", { key: 'f3c1d7b332ce6439725dcf15eda5732a8f6d45e2', class: "prompt-hint", part: "prompt-hint" }, labels.dropPromptHint))), this.isProcessing && h("div", { key: '4f5730a0bfd918788c851dd7b4e0282643e782cc', class: "processing-overlay" }, h("span", { key: 'd1f7e503dd250b7125132790976554c3b91a0aba', class: "spinner" }))), this.rejections.length > 0 && (h("div", { key: '5f2aa8bb1b64d70db7138ff2eddda68ed7aa62e3', class: "rejections", part: "rejections" }, this.rejections.map(r => (h("div", { class: "rejection-item", part: "rejection-item" }, h("strong", null, r.fileName), h("ul", null, r.issues.filter(i => i.severity === 'error').map(i => (h("li", { class: "error" }, i.message))), r.issues.filter(i => i.severity === 'warning').map(i => (h("li", { class: "warning" }, i.message))))))))), this.pendingChoices.length > 0 && (h("div", { key: 'c1c43dfeb2d32a66261c70d3c4edd0339c88f098', class: "pending-choices", part: "pending-choices" }, this.pendingChoices.map((choice, index) => (h("div", { class: "choice-card", part: "choice-card" }, h("p", { class: "choice-title" }, choice.metadata.fileName), h("div", { class: "choice-options" }, h("button", { class: "choice-option", part: "choice-option", "data-index": index, onClick: this.handleSelectOriginal }, h("img", { src: choice.originalDataUrl, alt: "Original", class: "choice-image" }), h("span", { class: "choice-label" }, labels.bgRemovalUseOriginal)), h("button", { class: {
+                'choice-option': true,
+                'choice-option--disabled': choice.status === 'processing',
+            }, part: "choice-option", disabled: choice.status === 'processing', "data-index": index, onClick: this.handleSelectRemoved }, choice.status === 'processing' && (h("div", { class: "choice-image choice-image--loading" }, h("span", { class: "spinner-sm" }), h("span", { class: "choice-loading-text" }, labels.bgRemovalProcessing))), choice.status === 'ready' && choice.removedBgDataUrl !== null && (h("img", { src: choice.removedBgDataUrl, alt: "Background removed", class: "choice-image choice-image--transparent" })), choice.status === 'error' && (h("div", { class: "choice-image choice-image--error" }, h("span", { class: "choice-error-text" }, choice.errorMessage))), h("span", { class: "choice-label" }, choice.status === 'error' ? labels.bgRemovalFailed : labels.bgRemovalUseRemoved)))))))), this.previews.length > 0 && (h("div", { key: '69d0dab6c5377d471b8802d7ba92c640785e3d52', class: "previews", part: "previews" }, this.previews.map((preview, index) => (h("div", { class: { 'preview-item': true, 'preview-item--selected': index === this.selectedIndex }, part: `preview-item${index === this.selectedIndex ? ' selected' : ''}`, "data-index": index, onClick: this.handleSelectPreview, role: "button", tabindex: 0 }, h("img", { src: preview.previewDataUrl ?? preview.dataUrl, alt: preview.metadata.fileName, class: "preview-image" }), h("div", { class: "preview-info" }, h("span", { class: "preview-name" }, preview.metadata.fileName), h("span", { class: "preview-dims" }, preview.metadata.width, " x ", preview.metadata.height, "px"), preview.metadata.dpiX !== null && h("span", { class: "preview-dpi" }, preview.metadata.dpiX, " ", labels.rejectionDpiUnit)), h("button", { class: "remove-btn", part: "remove-btn", "data-index": index, onClick: this.handleRemovePreview, "aria-label": labels.removeAriaLabel(preview.metadata.fileName) }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
+    }
+    static get is() { return "wtp-logo-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wtp-logo-upload.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wtp-logo-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LogoValidationConfig",
+                    "resolved": "LogoValidationConfig",
+                    "references": {
+                        "LogoValidationConfig": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::LogoValidationConfig",
+                            "referenceLocation": "LogoValidationConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation rules for uploaded logos."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "DEFAULT_VALIDATION_CONFIG"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted file MIME types for the file input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept",
+                "defaultValue": "'image/png,image/jpeg,image/svg+xml,image/tiff,image/avif'"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether multiple files can be uploaded at once."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the upload component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "enableBackgroundRemoval": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables background removal for raster images after upload."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-background-removal",
+                "defaultValue": "false"
+            },
+            "bgRemovalConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<BgRemovalConfig>",
+                    "resolved": "BgRemovalConfig",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "BgRemovalConfig": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::BgRemovalConfig",
+                            "referenceLocation": "BgRemovalConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Configuration for the color-based background removal algorithm."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "labels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<LogoUploadLabels>",
+                    "resolved": "LogoUploadLabels",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "LogoUploadLabels": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::LogoUploadLabels",
+                            "referenceLocation": "LogoUploadLabels"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override any of the user-facing strings. Missing keys fall back to English defaults."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragOver": {},
+            "previews": {},
+            "selectedIndex": {},
+            "rejections": {},
+            "isProcessing": {},
+            "pendingChoices": {},
+            "urlInput": {},
+            "urlError": {},
+            "isUrlFetching": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wtpLogoValidated",
+                "name": "wtpLogoValidated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a logo passes validation and is ready for use."
+                },
+                "complexType": {
+                    "original": "LogoData",
+                    "resolved": "LogoData",
+                    "references": {
+                        "LogoData": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::LogoData",
+                            "referenceLocation": "LogoData"
+                        }
+                    }
+                }
+            }, {
+                "method": "wtpLogoRejected",
+                "name": "wtpLogoRejected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a logo fails validation."
+                },
+                "complexType": {
+                    "original": "{ file: File; issues: LogoValidationIssue[] }",
+                    "resolved": "{ file: File; issues: LogoValidationIssue[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        },
+                        "LogoValidationIssue": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::LogoValidationIssue",
+                            "referenceLocation": "LogoValidationIssue"
+                        }
+                    }
+                }
+            }, {
+                "method": "wtpLogoProcessing",
+                "name": "wtpLogoProcessing",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when processing state changes (true = busy, false = idle)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "wtpLogoSelected",
+                "name": "wtpLogoSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a logo is selected from the preview gallery."
+                },
+                "complexType": {
+                    "original": "LogoData",
+                    "resolved": "LogoData",
+                    "references": {
+                        "LogoData": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::LogoData",
+                            "referenceLocation": "LogoData"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,20 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  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 {
+  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;
+}