web-to-print 0.1.0

package/dist/collection/utils/logo-validation.js

@@ -0,0 +1,141 @@
+import ExifReader from "exifreader";
+import { DEFAULT_VALIDATION_CONFIG } from "../types";
+import { detectFileFormat, isSvgContent } from "./format-detection";
+function createIssue(code, severity, message) {
+    return { code, severity, message };
+}
+async function extractDpi(file, format) {
+    if (format !== 'jpeg' && format !== 'tiff' && format !== 'png' && format !== 'avif') {
+        return { dpiX: null, dpiY: null };
+    }
+    try {
+        const buffer = await file.arrayBuffer();
+        const tags = ExifReader.load(buffer, { expanded: true });
+        // Try EXIF XResolution/YResolution
+        const xRes = tags.exif?.XResolution?.value;
+        const yRes = tags.exif?.YResolution?.value;
+        if (xRes !== undefined && xRes !== null && yRes !== undefined && yRes !== null) {
+            const dpiX = Array.isArray(xRes) ? xRes[0] / xRes[1] : Number(xRes);
+            const dpiY = Array.isArray(yRes) ? yRes[0] / yRes[1] : Number(yRes);
+            return { dpiX, dpiY };
+        }
+        // Try PNG pHYs chunk (pixels per meter -> DPI)
+        if (format === 'png' && 'pHYs' in tags) {
+            const pHYs = tags['pHYs'];
+            const pngX = pHYs?.['Pixels Per Unit X']?.value;
+            const pngY = pHYs?.['Pixels Per Unit Y']?.value;
+            const unit = pHYs?.['Unit']?.value;
+            if (pngX !== undefined && pngX !== null && pngY !== undefined && pngY !== null && unit === 1) {
+                return { dpiX: Math.round(Number(pngX) / 39.3701), dpiY: Math.round(Number(pngY) / 39.3701) };
+            }
+        }
+        return { dpiX: null, dpiY: null };
+    }
+    catch {
+        return { dpiX: null, dpiY: null };
+    }
+}
+async function extractImageDimensions(file, format) {
+    if (format === 'svg') {
+        const text = await file.text();
+        const match = text.match(/viewBox=["'](\d+[\s,]+\d+[\s,]+(\d+(?:\.\d+)?)[\s,]+(\d+(?:\.\d+)?))["']/);
+        if (match !== null) {
+            return { width: Math.round(parseFloat(match[2])), height: Math.round(parseFloat(match[3])) };
+        }
+        const widthMatch = text.match(/width=["'](\d+(?:\.\d+)?)(?:px)?["']/);
+        const heightMatch = text.match(/height=["'](\d+(?:\.\d+)?)(?:px)?["']/);
+        return {
+            width: widthMatch !== null ? Math.round(parseFloat(widthMatch[1])) : 0,
+            height: heightMatch !== null ? Math.round(parseFloat(heightMatch[1])) : 0,
+        };
+    }
+    // For raster images, try to extract dimensions from EXIF/file header
+    try {
+        const buffer = await file.arrayBuffer();
+        const tags = ExifReader.load(buffer, { expanded: true });
+        const exifWidth = tags.file?.['Image Width']?.value ?? tags.exif?.ImageWidth?.value ?? tags.exif?.PixelXDimension?.value;
+        const exifHeight = tags.file?.['Image Height']?.value ?? tags.exif?.ImageLength?.value ?? tags.exif?.PixelYDimension?.value;
+        if (exifWidth !== undefined && exifWidth !== null && exifHeight !== undefined && exifHeight !== null) {
+            return { width: Number(exifWidth), height: Number(exifHeight) };
+        }
+    }
+    catch {
+        // Fall through
+    }
+    // Fallback: use Image element if available (browser environment)
+    if (typeof globalThis.Image !== 'undefined') {
+        return new Promise(resolve => {
+            const url = URL.createObjectURL(file);
+            const img = new globalThis.Image();
+            img.onload = () => {
+                URL.revokeObjectURL(url);
+                resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            };
+            img.onerror = () => {
+                URL.revokeObjectURL(url);
+                resolve({ width: 0, height: 0 });
+            };
+            img.src = url;
+        });
+    }
+    return { width: 0, height: 0 };
+}
+export async function validateLogo(file, config = DEFAULT_VALIDATION_CONFIG) {
+    const issues = [];
+    const format = await detectFileFormat(file);
+    // Format check
+    if (!config.allowedFormats.includes(format)) {
+        issues.push(createIssue('FORMAT_NOT_ALLOWED', 'error', `Format "${format}" is not allowed. Allowed: ${config.allowedFormats.join(', ')}`));
+    }
+    // File size check
+    if (file.size > config.maxFileSize) {
+        const maxMb = Math.round(config.maxFileSize / (1024 * 1024));
+        issues.push(createIssue('FILE_TOO_LARGE', 'error', `File size exceeds ${maxMb}MB limit`));
+    }
+    // SVG content validation
+    if (format === 'svg') {
+        const text = await file.text();
+        if (!isSvgContent(text)) {
+            issues.push(createIssue('INVALID_SVG', 'error', 'File does not contain valid SVG content'));
+        }
+    }
+    // Extract metadata
+    const { dpiX, dpiY } = await extractDpi(file, format);
+    const { width, height } = await extractImageDimensions(file, format);
+    // DPI check for raster images
+    const isRaster = format === 'png' || format === 'jpeg' || format === 'tiff' || format === 'avif';
+    if (isRaster) {
+        if (dpiX === null || dpiY === null) {
+            issues.push(createIssue('DPI_UNKNOWN', 'warning', 'Could not determine image DPI. Recommended minimum is ' + config.minDpi + ' DPI'));
+        }
+        else if (dpiX < config.minDpi || dpiY < config.minDpi) {
+            const effectiveDpi = Math.min(dpiX, dpiY);
+            issues.push(createIssue('DPI_TOO_LOW', 'error', `Image DPI (${effectiveDpi}) is below minimum ${config.minDpi} DPI`));
+        }
+    }
+    // Dimension check for raster images only (vector formats like SVG/PDF are resolution-independent)
+    if (isRaster) {
+        if (width > 0 && width < config.minWidth) {
+            issues.push(createIssue('WIDTH_TOO_SMALL', 'error', `Image width (${width}px) is below minimum ${config.minWidth}px`));
+        }
+        if (height > 0 && height < config.minHeight) {
+            issues.push(createIssue('HEIGHT_TOO_SMALL', 'error', `Image height (${height}px) is below minimum ${config.minHeight}px`));
+        }
+    }
+    const metadata = {
+        format,
+        width,
+        height,
+        dpiX,
+        dpiY,
+        fileSize: file.size,
+        fileName: file.name,
+        mimeType: file.type,
+        hasTransparency: format === 'png' || format === 'svg' || format === 'avif',
+    };
+    return {
+        valid: !issues.some(i => i.severity === 'error'),
+        metadata,
+        issues,
+    };
+}

package/dist/collection/utils/pdf-export.js

@@ -0,0 +1,224 @@
+import { printAreaToPixelCorners, upscaleSvgDataUrl } from "./canvas-helpers";
+const DEFAULT_PDF_CONFIG = {
+    pageFormat: 'a4',
+    orientation: 'portrait',
+    marginMm: 15,
+    showPrintAreaGuides: true,
+    title: 'Logo Print Specification',
+};
+/**
+ * Get the jsPDF constructor from the global scope.
+ * jsPDF must be loaded via script tag (e.g. from unpkg CDN) before calling exportProductPdf().
+ * This avoids bundling jsPDF into the Stencil build (which fails due to Rollup/CommonJS conflicts).
+ */
+function getJsPDF() {
+    const global = typeof window !== 'undefined' ? window : undefined;
+    const jspdfModule = global?.['jspdf'];
+    if (jspdfModule?.jsPDF != null) {
+        return jspdfModule.jsPDF;
+    }
+    throw new Error('jsPDF is required for PDF export. Load it via: <script src="https://unpkg.com/jspdf@4.1.0/dist/jspdf.umd.min.js"></script>');
+}
+/** Detect image format from a data URL for jsPDF's addImage(). */
+export function dataUrlToImageFormat(dataUrl) {
+    if (dataUrl.startsWith('data:image/jpeg') || dataUrl.startsWith('data:image/jpg')) {
+        return 'JPEG';
+    }
+    return 'PNG';
+}
+/** Returns true if the data URL is an SVG (which jsPDF cannot embed directly). */
+export function isSvgDataUrl(dataUrl) {
+    return dataUrl.startsWith('data:image/svg+xml');
+}
+/**
+ * Rasterize a data URL to PNG via an offscreen canvas.
+ * SVG data URLs must be rasterized because jsPDF only supports PNG/JPEG.
+ * For SVGs, upscaleSvgDataUrl is applied first so the browser rasterizes
+ * the vector artwork at high resolution (maxSize px) instead of the often
+ * tiny intrinsic SVG dimensions.
+ * Non-SVG data URLs are returned unchanged.
+ */
+export function rasterizeDataUrl(dataUrl, maxSize = 4000) {
+    if (!isSvgDataUrl(dataUrl))
+        return Promise.resolve(dataUrl);
+    // Upscale SVG so the browser rasterizes vectors at high resolution
+    const { dataUrl: upscaledUrl } = upscaleSvgDataUrl(dataUrl, maxSize);
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            const w = img.naturalWidth || maxSize;
+            const h = img.naturalHeight || maxSize;
+            const canvas = document.createElement('canvas');
+            canvas.width = w;
+            canvas.height = h;
+            const ctx = canvas.getContext('2d');
+            if (ctx == null) {
+                reject(new Error('Failed to get 2D context for SVG rasterization'));
+                return;
+            }
+            ctx.drawImage(img, 0, 0, w, h);
+            resolve(canvas.toDataURL('image/png'));
+        };
+        img.onerror = () => reject(new Error('Failed to load image for rasterization'));
+        img.src = upscaledUrl;
+    });
+}
+/** Merge partial config with defaults. */
+export function buildPdfConfig(partial) {
+    return { ...DEFAULT_PDF_CONFIG, ...partial };
+}
+/** Format a file size in bytes as a human-readable string. */
+function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/** Render page 1: logo at full quality with metadata table. */
+function renderLogoPage(doc, logo, rasterLogoDataUrl, config) {
+    const pageW = doc.internal.pageSize.getWidth();
+    const pageH = doc.internal.pageSize.getHeight();
+    const margin = config.marginMm;
+    const contentW = pageW - 2 * margin;
+    // Title
+    doc.setFontSize(18);
+    doc.setFont('helvetica', 'bold');
+    doc.text(config.title, pageW / 2, margin + 8, { align: 'center' });
+    // Logo image — centered, filling available width while maintaining aspect ratio
+    const logoFormat = dataUrlToImageFormat(rasterLogoDataUrl);
+    const logoY = margin + 16;
+    const maxLogoH = pageH * 0.5;
+    const aspectRatio = logo.metadata.width / Math.max(logo.metadata.height, 1);
+    let imgW = contentW;
+    let imgH = imgW / aspectRatio;
+    if (imgH > maxLogoH) {
+        imgH = maxLogoH;
+        imgW = imgH * aspectRatio;
+    }
+    const imgX = (pageW - imgW) / 2;
+    doc.addImage(rasterLogoDataUrl, logoFormat, imgX, logoY, imgW, imgH);
+    // Metadata table below the logo
+    const tableY = logoY + imgH + 10;
+    const meta = logo.metadata;
+    const rows = [
+        ['Format', meta.format.toUpperCase()],
+        ['Dimensions', `${meta.width} x ${meta.height} px`],
+        ['DPI', meta.dpiX !== null ? `${meta.dpiX} x ${meta.dpiY ?? meta.dpiX}` : 'Not available'],
+        ['File Size', formatFileSize(meta.fileSize)],
+        ['Transparency', meta.hasTransparency ? 'Yes' : 'No'],
+        ['File Name', meta.fileName],
+    ];
+    doc.setFontSize(10);
+    const rowH = 7;
+    const col1W = 30;
+    rows.forEach((row, i) => {
+        const y = tableY + i * rowH;
+        doc.setFont('helvetica', 'bold');
+        doc.text(row[0], margin, y);
+        doc.setFont('helvetica', 'normal');
+        doc.text(row[1], margin + col1W, y);
+    });
+    // Separator line above the table
+    doc.setDrawColor(200, 200, 200);
+    doc.setLineWidth(0.3);
+    doc.line(margin, tableY - 4, margin + contentW, tableY - 4);
+}
+/** Draw dashed print area guide overlay on the product mockup. */
+function drawPrintAreaGuide(doc, printArea, imgX, imgY, imgW, imgH, canvasW, canvasH) {
+    const corners = printAreaToPixelCorners(printArea, canvasW, canvasH);
+    const scaleX = imgW / canvasW;
+    const scaleY = imgH / canvasH;
+    const pdfCorners = corners.map(c => ({
+        x: imgX + c.x * scaleX,
+        y: imgY + c.y * scaleY,
+    }));
+    doc.setDrawColor(37, 99, 235);
+    doc.setLineWidth(0.4);
+    doc.setLineDashPattern([2, 1.5], 0);
+    for (let i = 0; i < 4; i++) {
+        const from = pdfCorners[i];
+        const to = pdfCorners[(i + 1) % 4];
+        doc.line(from.x, from.y, to.x, to.y);
+    }
+    doc.setLineDashPattern([], 0);
+}
+/** Render page 2: product mockup with header and print area guides. */
+function renderProductPage(doc, article, viewIndex, mockupDataUrl, canvasW, canvasH, config) {
+    const pageW = doc.internal.pageSize.getWidth();
+    const pageH = doc.internal.pageSize.getHeight();
+    const margin = config.marginMm;
+    const contentW = pageW - 2 * margin;
+    doc.setFontSize(16);
+    doc.setFont('helvetica', 'bold');
+    doc.text(article.name, pageW / 2, margin + 8, { align: 'center' });
+    // Article details table
+    const view = article.views[viewIndex];
+    const detailRows = [['Article ID', article.id]];
+    if (view?.impMethod)
+        detailRows.push(['Print Method', view.impMethod]);
+    if (view?.impLocation)
+        detailRows.push(['Print Location', view.impLocation]);
+    if (view?.impDiameterMm && view.impDiameterMm > 0) {
+        detailRows.push(['Print Area', `\u00D8 ${view.impDiameterMm} mm`]);
+    }
+    else if (view?.impWidthMm && view?.impHeightMm) {
+        detailRows.push(['Print Area', `${view.impWidthMm} \u00D7 ${view.impHeightMm} mm`]);
+    }
+    if (view?.maxColours)
+        detailRows.push(['Max Colors', `${view.maxColours}`]);
+    const detailRowH = 6;
+    const detailCol1W = 30;
+    const detailTableY = margin + 16;
+    doc.setFontSize(9);
+    detailRows.forEach((row, i) => {
+        const y = detailTableY + i * detailRowH;
+        doc.setFont('helvetica', 'bold');
+        doc.text(row[0], margin, y);
+        doc.setFont('helvetica', 'normal');
+        doc.text(row[1], margin + detailCol1W, y);
+    });
+    doc.setDrawColor(200, 200, 200);
+    doc.setLineWidth(0.3);
+    doc.line(margin, detailTableY + detailRows.length * detailRowH + 2, margin + contentW, detailTableY + detailRows.length * detailRowH + 2);
+    const mockupFormat = dataUrlToImageFormat(mockupDataUrl);
+    const mockupY = detailTableY + detailRows.length * detailRowH + 6;
+    const maxMockupH = pageH - mockupY - margin;
+    const aspectRatio = canvasW / Math.max(canvasH, 1);
+    let imgW = contentW;
+    let imgH = imgW / aspectRatio;
+    if (imgH > maxMockupH) {
+        imgH = maxMockupH;
+        imgW = imgH * aspectRatio;
+    }
+    const imgX = (pageW - imgW) / 2;
+    doc.addImage(mockupDataUrl, mockupFormat, imgX, mockupY, imgW, imgH);
+    if (config.showPrintAreaGuides && view?.printArea != null) {
+        drawPrintAreaGuide(doc, view.printArea, imgX, mockupY, imgW, imgH, canvasW, canvasH);
+    }
+}
+/**
+ * Generate and download a print-shop-ready PDF for a product.
+ *
+ * Page 1: Logo at full quality with metadata table.
+ * Page 2: High-resolution product mockup with print area guides.
+ *
+ * Requires jsPDF to be loaded globally via script tag before calling this function.
+ */
+export async function exportProductPdf(logo, article, viewIndex, productMockupDataUrl, canvasWidth, canvasHeight, config) {
+    const cfg = buildPdfConfig(config);
+    const JsPDF = getJsPDF();
+    // Rasterize SVG data URLs — jsPDF only accepts PNG/JPEG
+    const rasterLogoDataUrl = await rasterizeDataUrl(logo.dataUrl);
+    const doc = new JsPDF({
+        orientation: cfg.orientation,
+        unit: 'mm',
+        format: cfg.pageFormat,
+    });
+    // Page 1: Logo source
+    renderLogoPage(doc, logo, rasterLogoDataUrl, cfg);
+    // Page 2: Product mockup
+    doc.addPage();
+    renderProductPage(doc, article, viewIndex, productMockupDataUrl, canvasWidth, canvasHeight, cfg);
+    doc.save(`${article.id}.pdf`);
+}

package/dist/components/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+import{u as t,p as n}from"./p-5qCsRzlt.js";export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-5qCsRzlt.js";export{a as DEFAULT_BG_REMOVAL_CONFIG,D as DEFAULT_VALIDATION_CONFIG}from"./p-D8pVJRuX.js";const o={pageFormat:"a4",orientation:"portrait",marginMm:15,showPrintAreaGuides:!0,title:"Logo Print Specification"};function e(t){return t.startsWith("data:image/jpeg")||t.startsWith("data:image/jpg")?"JPEG":"PNG"}function i(t){return t<1024?t+" B":t<1048576?(t/1024).toFixed(1)+" KB":(t/1048576).toFixed(1)+" MB"}async function c(r,a,s,c,l,m,u){const d=function(t){return{...o,...t}}(u),f=function(){const t="undefined"!=typeof window?window:void 0,n=t?.jspdf;if(null!=n?.jsPDF)return n.jsPDF;throw Error('jsPDF is required for PDF export. Load it via: <script src="https://unpkg.com/jspdf@4.1.0/dist/jspdf.umd.min.js"><\/script>')}(),p=await function(n,o=4e3){if(!function(t){return t.startsWith("data:image/svg+xml")}(n))return Promise.resolve(n);const{dataUrl:e}=t(n,o);return new Promise(((t,n)=>{const r=new Image;r.onload=()=>{const e=r.naturalWidth||o,a=r.naturalHeight||o,i=document.createElement("canvas");i.width=e,i.height=a;const s=i.getContext("2d");null!=s?(s.drawImage(r,0,0,e,a),t(i.toDataURL("image/png"))):n(Error("Failed to get 2D context for SVG rasterization"))},r.onerror=()=>n(Error("Failed to load image for rasterization")),r.src=e}))}(r.dataUrl),g=new f({orientation:d.orientation,unit:"mm",format:d.pageFormat});!function(t,n,o,r){const a=t.internal.pageSize.getWidth(),s=t.internal.pageSize.getHeight(),c=r.marginMm,l=a-2*c;t.setFontSize(18),t.setFont("helvetica","bold"),t.text(r.title,a/2,c+8,{align:"center"});const m=e(o),u=c+16,d=.5*s,f=n.metadata.width/Math.max(n.metadata.height,1);let p=l,g=p/f;g>d&&(g=d,p=g*f),t.addImage(o,m,(a-p)/2,u,p,g);const P=u+g+10,h=n.metadata,F=[["Format",h.format.toUpperCase()],["Dimensions",`${h.width} x ${h.height} px`],["DPI",null!==h.dpiX?`${h.dpiX} x ${h.dpiY??h.dpiX}`:"Not available"],["File Size",i(h.fileSize)],["Transparency",h.hasTransparency?"Yes":"No"],["File Name",h.fileName]];t.setFontSize(10),F.forEach(((n,o)=>{const e=P+7*o;t.setFont("helvetica","bold"),t.text(n[0],c,e),t.setFont("helvetica","normal"),t.text(n[1],c+30,e)})),t.setDrawColor(200,200,200),t.setLineWidth(.3),t.line(c,P-4,c+l,P-4)}(g,r,p,d),g.addPage(),function(t,o,r,a,i,s,c){const l=t.internal.pageSize.getWidth(),m=t.internal.pageSize.getHeight(),u=c.marginMm,d=l-2*u;t.setFontSize(16),t.setFont("helvetica","bold"),t.text(o.name,l/2,u+8,{align:"center"});const f=o.views[r],p=[["Article ID",o.id]];f?.impMethod&&p.push(["Print Method",f.impMethod]),f?.impLocation&&p.push(["Print Location",f.impLocation]),f?.impDiameterMm&&f.impDiameterMm>0?p.push(["Print Area",`Ø ${f.impDiameterMm} mm`]):f?.impWidthMm&&f?.impHeightMm&&p.push(["Print Area",`${f.impWidthMm} × ${f.impHeightMm} mm`]),f?.maxColours&&p.push(["Max Colors",""+f.maxColours]);const g=u+16;t.setFontSize(9),p.forEach(((n,o)=>{const e=g+6*o;t.setFont("helvetica","bold"),t.text(n[0],u,e),t.setFont("helvetica","normal"),t.text(n[1],u+30,e)})),t.setDrawColor(200,200,200),t.setLineWidth(.3),t.line(u,g+6*p.length+2,u+d,g+6*p.length+2);const P=e(a),h=g+6*p.length+6,F=m-h-u,v=i/Math.max(s,1);let x=d,A=x/v;A>F&&(A=F,x=A*v);const D=(l-x)/2;t.addImage(a,P,D,h,x,A),c.showPrintAreaGuides&&null!=f?.printArea&&function(t,o,e,r,a,i,s,c){const l=n(o,s,c),m=a/s,u=i/c,d=l.map((t=>({x:e+t.x*m,y:r+t.y*u})));t.setDrawColor(37,99,235),t.setLineWidth(.4),t.setLineDashPattern([2,1.5],0);for(let n=0;n<4;n++){const o=d[n],e=d[(n+1)%4];t.line(o.x,o.y,e.x,e.y)}t.setLineDashPattern([],0)}(t,f.printArea,D,h,x,A,i,s)}(g,a,s,c,l,m,d),g.save(a.id+".pdf")}export{c as exportProductPdf}