retail-print-kit 0.2.3 → 0.3.1

package/dist/label-designer/designer.js

@@ -0,0 +1,1349 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineLabelDesigner = defineLabelDesigner;
+const label_design_1 = require("../label-design");
+const preview_1 = require("./preview");
+const styles_1 = require("./styles");
+const BASIC_PALETTE = [
+    { kind: 'text', label: 'Text', icon: 'type' }, { kind: 'line', label: 'Line', icon: 'line' }, { kind: 'box', label: 'Box', icon: 'square' },
+    { kind: 'fill', label: 'Filled box', icon: 'fill' }, { kind: 'qr', label: 'QR code', icon: 'qr' }, { kind: 'image', label: 'Logo', icon: 'image' }
+];
+const ICON_PATHS = {
+    search: '<circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/>',
+    info: '<circle cx="12" cy="12" r="8.5"/><path d="M12 11v5M12 8h.01"/>',
+    text: '<path d="M4 6.5h16M4 12h16M4 17.5h10"/>',
+    type: '<path d="M5 6h14M12 6v13M9.5 19h5"/>',
+    dollar: '<path d="M12 3.5v17M16 7.5c-.6-1.4-2.1-2.2-4-2.2-2.3 0-4 1.2-4 3 0 4.4 8.2 2.3 8.2 6.6 0 1.9-1.8 3.1-4.2 3.1-2 0-3.7-.9-4.3-2.5"/>',
+    box: '<path d="M3.5 7.5L12 3.5l8.5 4v9L12 20.5l-8.5-4z"/><path d="M3.5 7.5L12 11.5l8.5-4M12 11.5v9"/>',
+    store: '<path d="M4.5 10.5v9h15v-9"/><path d="M3.5 10.5l1.8-6h13.4l1.8 6c0 1.4-1.2 2.3-2.6 2.3s-2.6-.9-2.6-2.3c0 1.4-1.2 2.3-2.6 2.3s-2.7-.9-2.7-2.3c0 1.4-1.2 2.3-2.6 2.3s-2.5-.9-2.5-2.3z"/><path d="M10 19.5v-4.5h4v4.5"/>',
+    layers: '<path d="M12 3.5l8.5 4.5-8.5 4.5L3.5 8z"/><path d="M3.5 12.5l8.5 4.5 8.5-4.5M3.5 16.5l8.5 4.5 8.5-4.5"/>',
+    truck: '<path d="M3 6.5h11v9H3zM14 9.5h3.5l3 3.2v2.8H14"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/>',
+    hash: '<path d="M5 9h14M5 15h14M10.5 4l-2 16M15.5 4l-2 16"/>',
+    barcode: '<path d="M4 5v14M7 5v14M10.5 5v14M13 5v14M16.5 5v14M20 5v14"/>',
+    calendar: '<rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/>',
+    line: '<path d="M4 12h16"/>',
+    square: '<rect x="4.5" y="4.5" width="15" height="15" rx="2"/>',
+    fill: '<rect x="4.5" y="4.5" width="15" height="15" rx="2" fill="currentColor"/>',
+    qr: '<rect x="3.5" y="3.5" width="7" height="7" rx="1"/><rect x="13.5" y="3.5" width="7" height="7" rx="1"/><rect x="3.5" y="13.5" width="7" height="7" rx="1"/><path d="M14 14h2.5v2.5H14zM18 18h2.5v2.5H18zM18 14h2.5M14 18v2.5"/>',
+    image: '<rect x="3.5" y="5" width="17" height="14" rx="2.5"/><circle cx="9" cy="10" r="1.6"/><path d="M20.5 15.5l-4.8-4.8-8.2 8.3"/>'
+};
+const ELEMENT_ICONS = { text: 'type', price: 'dollar', barcode: 'barcode', qr: 'qr', box: 'square', fill: 'fill', line: 'line', image: 'image' };
+function icon(name) {
+    return `<svg class="ld-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICON_PATHS[name] || ICON_PATHS.text}</svg>`;
+}
+const HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+const ZOOMS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
+const CSS_PX_PER_MM = 96 / label_design_1.MM_PER_INCH;
+const CHECK_PAGE = 200;
+const CHECK_MAX_ITEMS = 6000;
+const QR_HINT = 'Link or text. Add a field with {{itemName}}, {{barcode}} and so on.';
+const TRASH = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/></svg>';
+function esc(value) {
+    return String(value === undefined || value === null ? '' : value).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+}
+function on(flag) {
+    return flag ? ' on' : '';
+}
+function formatMoney(value) {
+    const n = Number(value);
+    return Number.isFinite(n) ? `$${n.toFixed(2)}` : '';
+}
+function defineLabelDesigner(tag = 'rpk-label-designer') {
+    if (typeof customElements === 'undefined' || customElements.get(tag))
+        return;
+    (0, preview_1.defineLabelPreview)();
+    class LabelDesigner extends HTMLElement {
+        constructor() {
+            super();
+            this.refs = {};
+            this.d = null;
+            this.label = '';
+            this.ro = false;
+            this.fonts = 'assets/label-fonts/';
+            this.source = null;
+            this.store = '';
+            this.errorText = '';
+            this.savedState = '';
+            this.savedAt = null;
+            this.undoStack = [];
+            this.redoStack = [];
+            this.drag = null;
+            this.mode = 'design';
+            this.zoom = 1;
+            this.unit = 'in';
+            this.snap = true;
+            this.showGrid = true;
+            this.selectedId = null;
+            this.guides = [];
+            this.warnings = [];
+            this.paletteFilter = '';
+            this.data = (0, label_design_1.sampleData)();
+            this.sampleName = 'Sample item';
+            this.sampleResults = [];
+            this.samplePickerOpen = false;
+            this.sampleLoading = false;
+            this.sampleTimer = null;
+            this.imageMode = 'dither';
+            this.imageError = '';
+            this.checkRunning = false;
+            this.checkDone = 0;
+            this.checkTotal = 0;
+            this.checkResults = [];
+            this.checkFilter = 'all';
+            this.checkSelected = null;
+            this.checkError = '';
+            this.checkToken = 0;
+            this.frame = 0;
+            this.pending = new Set();
+            this.listening = false;
+            this.onPointerMove = (event) => {
+                const drag = this.drag;
+                if (!drag || !this.d)
+                    return;
+                const dx = (event.clientX - drag.startX) / this.pxPerMm;
+                const dy = (event.clientY - drag.startY) / this.pxPerMm;
+                if (!drag.moved && Math.abs(dx) + Math.abs(dy) < 0.3)
+                    return;
+                if (!drag.moved) {
+                    this.remember();
+                    drag.moved = true;
+                }
+                const el = this.d.elements.find((e) => e.id === drag.id);
+                if (!el)
+                    return;
+                const o = drag.orig;
+                if (drag.kind === 'move') {
+                    const pos = this.withGuides(el, o.x + dx, o.y + dy);
+                    el.x = pos.x;
+                    el.y = pos.y;
+                }
+                else {
+                    const h = drag.handle;
+                    let x = o.x;
+                    let y = o.y;
+                    let w = o.w;
+                    let hgt = o.h;
+                    if (h.includes('e'))
+                        w = o.w + dx;
+                    if (h.includes('s'))
+                        hgt = o.h + dy;
+                    if (h.includes('w')) {
+                        x = o.x + dx;
+                        w = o.w - dx;
+                    }
+                    if (h.includes('n')) {
+                        y = o.y + dy;
+                        hgt = o.h - dy;
+                    }
+                    const min = (0, label_design_1.dotsToMm)(2, this.dpi);
+                    if (w < min) {
+                        if (h.includes('w'))
+                            x -= min - w;
+                        w = min;
+                    }
+                    if (hgt < min) {
+                        if (h.includes('n'))
+                            y -= min - hgt;
+                        hgt = min;
+                    }
+                    el.x = this.snapMm(x);
+                    el.y = this.snapMm(y);
+                    el.w = Math.max(min, this.snapMm(w));
+                    el.h = Math.max(min, this.snapMm(hgt));
+                    if (el.type === 'qr')
+                        el.h = el.w;
+                }
+                this.update('stage');
+                this.update('status');
+            };
+            this.onPointerUp = () => {
+                const drag = this.drag;
+                this.drag = null;
+                this.guides = [];
+                if (drag && drag.moved)
+                    this.changed();
+                else
+                    this.update('stage');
+            };
+            this.onKey = (event) => {
+                if (this.mode !== 'design' || !this.d || !this.isConnected)
+                    return;
+                const origin = (event.composedPath()[0] || event.target);
+                const tag = origin && origin.tagName;
+                const typing = tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA' || (origin && origin.isContentEditable);
+                const mod = event.metaKey || event.ctrlKey;
+                const key = event.key.toLowerCase();
+                if (mod && key === 's') {
+                    event.preventDefault();
+                    this.requestSave();
+                    return;
+                }
+                if (typing)
+                    return;
+                if (mod && key === 'z') {
+                    event.preventDefault();
+                    if (event.shiftKey)
+                        this.redo();
+                    else
+                        this.undo();
+                    return;
+                }
+                if (mod && key === 'y') {
+                    event.preventDefault();
+                    this.redo();
+                    return;
+                }
+                const el = this.selected;
+                if (!el || !this.canWrite) {
+                    if (event.key === 'Escape' && this.selectedId) {
+                        this.selectedId = null;
+                        this.update('all');
+                    }
+                    return;
+                }
+                if (mod && key === 'd') {
+                    event.preventDefault();
+                    this.duplicateSelected();
+                    return;
+                }
+                if (event.key === 'Delete' || event.key === 'Backspace') {
+                    event.preventDefault();
+                    this.removeSelected();
+                    return;
+                }
+                if (event.key === 'Escape') {
+                    this.selectedId = null;
+                    this.update('all');
+                    return;
+                }
+                const step = (0, label_design_1.dotsToMm)(event.shiftKey ? 10 : 1, this.dpi);
+                const moves = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+                const mv = moves[event.key];
+                if (mv) {
+                    event.preventDefault();
+                    this.remember();
+                    el.x = (0, label_design_1.snapToDot)(el.x + mv[0], this.dpi);
+                    el.y = (0, label_design_1.snapToDot)(el.y + mv[1], this.dpi);
+                    this.d.elements = [...this.d.elements];
+                    this.changed();
+                }
+            };
+            this.root = this.attachShadow({ mode: 'open' });
+            this.root.innerHTML = `<style>${styles_1.DESIGNER_CSS}</style>${this.skeleton()}`;
+            this.root.querySelectorAll('[data-ref]').forEach((el) => { this.refs[el.dataset.ref] = el; });
+            this.root.addEventListener('click', (e) => this.onClick(e));
+            this.root.addEventListener('change', (e) => this.onChange(e));
+            this.root.addEventListener('input', (e) => this.onInput(e));
+            this.root.addEventListener('pointerdown', (e) => this.onPointerDown(e));
+            this.root.addEventListener('dragstart', (e) => this.onDragStart(e));
+            this.refs.stage.addEventListener('dragover', (e) => { e.preventDefault(); if (e.dataTransfer)
+                e.dataTransfer.dropEffect = 'copy'; });
+            this.refs.stage.addEventListener('drop', (e) => this.onDrop(e));
+        }
+        connectedCallback() {
+            if (!this.listening) {
+                window.addEventListener('pointermove', this.onPointerMove);
+                window.addEventListener('pointerup', this.onPointerUp);
+                window.addEventListener('keydown', this.onKey);
+                this.listening = true;
+            }
+            (0, label_design_1.ensureLabelFonts)(this.fonts).then(() => this.update('stage'));
+            this.update('all');
+        }
+        disconnectedCallback() {
+            window.removeEventListener('pointermove', this.onPointerMove);
+            window.removeEventListener('pointerup', this.onPointerUp);
+            window.removeEventListener('keydown', this.onKey);
+            this.listening = false;
+            this.checkToken++;
+        }
+        get design() { return this.d; }
+        set design(v) {
+            this.d = v ? this.normalizeDesign(JSON.parse(JSON.stringify(v))) : null;
+            this.undoStack = [];
+            this.redoStack = [];
+            this.selectedId = null;
+            this.checkResults = [];
+            this.checkSelected = null;
+            this.savedState = this.saveState();
+            this.zoom = this.fitZoom();
+            this.update('all');
+        }
+        get name() { return this.label; }
+        set name(v) {
+            this.label = String(v || '');
+            this.refs.name.value = this.label;
+            this.savedState = this.saveState();
+            this.update('top');
+        }
+        get readOnly() { return this.ro; }
+        set readOnly(v) { this.ro = !!v; this.refs.name.readOnly = this.ro; this.update('all'); }
+        get fontsUrl() { return this.fonts; }
+        set fontsUrl(v) { this.fonts = v || 'assets/label-fonts/'; (0, label_design_1.ensureLabelFonts)(this.fonts).then(() => this.update('stage')); }
+        get itemSource() { return this.source; }
+        set itemSource(v) { this.source = v; this.update('top'); }
+        get storeName() { return this.store; }
+        set storeName(v) { this.store = String(v || ''); this.update('check'); }
+        get error() { return this.errorText; }
+        set error(v) { this.errorText = String(v || ''); this.update('top'); }
+        get dirty() { return !!this.d && this.saveState() !== this.savedState; }
+        getDesign() { return this.d ? JSON.parse(JSON.stringify(this.d)) : null; }
+        markSaved() {
+            this.savedState = this.saveState();
+            this.savedAt = new Date();
+            this.errorText = '';
+            this.update('top');
+        }
+        requestSave() {
+            if (!this.d || this.ro)
+                return;
+            const name = this.label.trim();
+            if (!name) {
+                this.errorText = 'Give the template a name.';
+                this.update('top');
+                return;
+            }
+            this.errorText = '';
+            this.update('top');
+            this.emit('designsave', { design: this.getDesign(), name });
+        }
+        undo() {
+            const prev = this.undoStack.pop();
+            if (!prev)
+                return;
+            this.redoStack.push(this.snapshot());
+            this.restore(prev);
+        }
+        redo() {
+            const next = this.redoStack.pop();
+            if (!next)
+                return;
+            this.undoStack.push(this.snapshot());
+            this.restore(next);
+        }
+        useSample(item) {
+            this.data = (0, label_design_1.labelDataFromItem)(item, { limits: this.d ? this.d.limits : undefined, storeName: this.store });
+            this.sampleName = item.posdecs || item.item_name || 'Item';
+            this.samplePickerOpen = false;
+            this.emit('samplepick', { item });
+            this.update('all');
+        }
+        skeleton() {
+            return `<div class="ld">
+  <div class="ld-top">
+    <input class="ld-name" type="text" data-ref="name" data-input="name" maxlength="100" aria-label="Template name">
+    <span class="lt-chip" data-ref="size"></span>
+    <span class="lt-chip" data-ref="printer"></span>
+    <span class="ld-saved" data-ref="saved"></span>
+    <span class="lt-error" data-ref="error"></span>
+    <span class="lt-sp"></span>
+    <div class="lt-seg" data-ref="modes"></div>
+    <span class="lt-sp"></span>
+    <span class="ld-actions" data-ref="tools"></span>
+    <div class="ld-sample">
+      <button type="button" class="lt-btn lt-btn-sm" data-act="picker" data-ref="sampleBtn" title="Item shown on the label"></button>
+      <div class="ld-picker" data-ref="picker" hidden>
+        <input class="lt-input" type="text" placeholder="Search items or scan a UPC" data-input="sampleSearch">
+        <div data-ref="pickList"></div>
+      </div>
+    </div>
+    <span class="ld-actions"><slot name="actions"></slot></span>
+  </div>
+  <div class="ld-body" data-ref="body">
+    <aside class="ld-left">
+      <label class="ld-search">${icon('search')}<input class="lt-input" type="text" placeholder="Search fields…" aria-label="Search fields" data-input="palette"></label>
+      <div class="ld-group">
+        <div class="ld-group-head"><span class="lt-eyebrow">Item fields</span><span class="ld-count" data-ref="fieldCount"></span></div>
+        <div class="ld-tiles" data-ref="fields"></div>
+      </div>
+      <div class="ld-group">
+        <div class="ld-group-head"><span class="lt-eyebrow">Basic</span></div>
+        <div class="ld-tiles ld-tiles-basic" data-ref="basic"></div>
+      </div>
+      <p class="ld-tip">${icon('info')}<span>Drag a field onto the label, or click it to add it at the top left.</span></p>
+      <div class="ld-group">
+        <div class="ld-group-head"><span class="lt-eyebrow">Layers</span><span class="ld-count" data-ref="layerCount"></span></div>
+        <div class="ld-layers" data-ref="layers"></div>
+      </div>
+    </aside>
+    <section class="ld-center" data-ref="center">
+      <div class="ld-board">
+        <div class="ld-ruler-x" data-ref="rulerX"></div>
+        <div class="ld-ruler-y" data-ref="rulerY"></div>
+        <div class="ld-stage" data-ref="stage">
+          <canvas class="lt-canvas" data-ref="canvas"></canvas>
+          <div class="ld-grid" data-ref="grid"></div>
+          <div data-ref="elements"></div>
+          <div data-ref="guides"></div>
+        </div>
+        <div class="ld-stocktag" data-ref="stocktag" hidden>Pre-printed color is a guide and is not printed</div>
+      </div>
+      <div class="ld-status" data-ref="status"></div>
+    </section>
+    <aside class="ld-right" data-ref="props"></aside>
+  </div>
+  <div class="ld-check" data-ref="check" hidden></div>
+  <div class="ld-empty" data-ref="empty">No label to design yet.</div>
+</div>`;
+        }
+        emit(type, detail) {
+            this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+        }
+        update(part) {
+            this.pending.add(part);
+            if (this.frame)
+                return;
+            this.frame = requestAnimationFrame(() => {
+                this.frame = 0;
+                const parts = this.pending;
+                this.pending = new Set();
+                const all = parts.has('all');
+                if (all || parts.has('top'))
+                    this.renderTop();
+                if (all || parts.has('palette'))
+                    this.renderPalette();
+                if (all || parts.has('layers'))
+                    this.renderLayers();
+                if (all || parts.has('stage'))
+                    this.renderStage();
+                if (all || parts.has('props'))
+                    this.renderProps();
+                if (all || parts.has('status'))
+                    this.renderStatus();
+                if (all || parts.has('check'))
+                    this.renderCheck();
+            });
+        }
+        changed() {
+            this.emit('designchange', { design: this.getDesign(), name: this.label, dirty: this.dirty });
+            this.update('top');
+            this.update('layers');
+            this.update('stage');
+            this.update('props');
+            this.update('status');
+        }
+        normalizeDesign(design) {
+            design.elements = (design.elements || []).map((e) => ({ ...e, id: e.id || (0, label_design_1.newId)() }));
+            return design;
+        }
+        get pxPerMm() { return CSS_PX_PER_MM * this.zoom; }
+        get selected() { return this.d && this.selectedId ? this.d.elements.find((e) => e.id === this.selectedId) || null : null; }
+        get dpi() { return this.d ? this.d.dpi : 203; }
+        get gridMm() { return this.unit === 'in' ? label_design_1.MM_PER_INCH / 16 : 1; }
+        get canWrite() { return !this.ro && !!this.d; }
+        fitZoom() {
+            if (!this.d)
+                return 1;
+            const width = this.getBoundingClientRect().width || window.innerWidth;
+            const avail = Math.max(320, Math.min(width - 640, 900));
+            const z = Math.min(avail / (this.d.widthMm * CSS_PX_PER_MM), 260 / (this.d.heightMm * CSS_PX_PER_MM));
+            return ZOOMS.reduce((best, v) => (v <= z && v > best ? v : best), ZOOMS[0]);
+        }
+        fmt(mm) { return this.unit === 'in' ? (mm / label_design_1.MM_PER_INCH).toFixed(2) : mm.toFixed(1); }
+        parseLen(value) {
+            if (value === null || String(value).trim() === '')
+                return null;
+            const n = Number(value);
+            if (!Number.isFinite(n))
+                return null;
+            return this.unit === 'in' ? n * label_design_1.MM_PER_INCH : n;
+        }
+        fieldLabel(key) {
+            const f = label_design_1.FIELDS.find((x) => x.key === key);
+            return f ? f.label : key || '';
+        }
+        boundField(el) {
+            const m = String(el.value || '').match(/^\{\{(\w+)\}\}$/);
+            return m ? m[1] : '';
+        }
+        isNative(el) { return !!el && el.font === 'printer' && !!el.native; }
+        elementTitle(el) {
+            const f = this.boundField(el);
+            if (el.type === 'barcode')
+                return 'Barcode';
+            if (el.type === 'price')
+                return this.fieldLabel(f) || 'Price';
+            if (el.type === 'text')
+                return f ? this.fieldLabel(f) : 'Text';
+            return { qr: 'QR code', box: 'Box', fill: 'Filled box', line: 'Line', image: 'Image' }[el.type] || el.type;
+        }
+        snapshot() { return JSON.stringify({ design: this.d }); }
+        saveState() { return JSON.stringify({ name: this.label.trim(), design: this.d }); }
+        remember() {
+            this.undoStack.push(this.snapshot());
+            if (this.undoStack.length > 100)
+                this.undoStack.shift();
+            this.redoStack = [];
+        }
+        restore(state) {
+            this.d = JSON.parse(state).design;
+            if (this.selectedId && !this.selected)
+                this.selectedId = null;
+            this.changed();
+        }
+        snapMm(mm) {
+            const step = this.snap ? this.gridMm : 0;
+            return (0, label_design_1.snapToDot)(step ? Math.round(mm / step) * step : mm, this.dpi);
+        }
+        defaultElement(kind, field) {
+            const d = this.d;
+            const base = { id: (0, label_design_1.newId)(), type: kind, x: 2, y: 2, w: Math.min(30, d.widthMm - 4), h: 5 };
+            if (kind === 'text')
+                return { ...base, value: field ? `{{${field}}}` : 'Text', font: 'sans', size: 10, weight: field === 'itemName' ? 700 : 400, align: 'left', fit: 'cut', w: Math.min(40, d.widthMm - 4), h: 5 };
+            if (kind === 'price')
+                return { ...base, value: `{{${field || 'price'}}}`, font: 'sans', size: 28, weight: 700, align: 'center', format: 'super', w: Math.min(35, d.widthMm - 4), h: 12 };
+            if (kind === 'barcode')
+                return { ...base, value: '{{barcode}}', symbology: 'UPC_A', module: 2, hri: true, w: Math.min((0, label_design_1.dotsToMm)(115 * 2, this.dpi), d.widthMm - 2), h: 9 };
+            if (kind === 'qr')
+                return { ...base, value: 'https://', w: 12, h: 12 };
+            if (kind === 'line')
+                return { ...base, w: Math.min(30, d.widthMm - 4), h: (0, label_design_1.dotsToMm)(3, this.dpi) };
+            if (kind === 'box')
+                return { ...base, w: 20, h: 10, stroke: 0.3 };
+            if (kind === 'image')
+                return { ...base, w: 15, h: 15 };
+            return { ...base, w: 20, h: 6 };
+        }
+        kindFor(field) {
+            if (field === 'barcode')
+                return 'barcode';
+            if (field === 'price' || field === 'cashPrice' || field === 'creditPrice')
+                return 'price';
+            return 'text';
+        }
+        addElement(kind, field, at) {
+            if (!this.d || !this.canWrite)
+                return;
+            this.remember();
+            const el = this.defaultElement(kind, field);
+            if (at) {
+                el.x = this.snapMm(Math.max(0, Math.min(at.x, this.d.widthMm - el.w)));
+                el.y = this.snapMm(Math.max(0, Math.min(at.y, this.d.heightMm - el.h)));
+            }
+            else {
+                const n = this.d.elements.length % 6;
+                el.x = this.snapMm(2 + n * 2);
+                el.y = this.snapMm(2 + n * 2);
+            }
+            this.d.elements = [...this.d.elements, el];
+            this.selectedId = el.id;
+            this.changed();
+        }
+        change(mutator, keepNative = true) {
+            const el = this.selected;
+            if (!el || !this.d || !this.canWrite)
+                return;
+            this.remember();
+            mutator(el);
+            if (!keepNative && el.native) {
+                delete el.native;
+                delete el.nativeFit;
+                if (el.font === 'printer')
+                    el.font = 'sans';
+            }
+            this.d.elements = [...this.d.elements];
+            this.changed();
+        }
+        setStyle(key, value) {
+            const keepNative = key === 'when' || key === 'value';
+            this.change((el) => { el[key] = value; }, keepNative);
+        }
+        setPos(key, value) {
+            const mm = this.parseLen(value);
+            if (mm === null) {
+                this.update('props');
+                return;
+            }
+            this.change((el) => {
+                el[key] = Math.max(key === 'w' || key === 'h' ? (0, label_design_1.dotsToMm)(2, this.dpi) : -1000, (0, label_design_1.snapToDot)(mm, this.dpi));
+                if (el.type === 'qr' && (key === 'w' || key === 'h'))
+                    el.w = el.h = el[key];
+            }, key === 'x' || key === 'y');
+        }
+        setAtLeast(key, value) {
+            const n = Number(value);
+            if (value === null || String(value).trim() === '' || !Number.isFinite(n)) {
+                this.update('props');
+                return;
+            }
+            this.setStyle(key, Math.max(1, key === 'lines' ? Math.round(n) : n));
+        }
+        setDesign(key, value) {
+            if (!this.d || !this.canWrite)
+                return;
+            const mm = this.parseLen(value);
+            if (mm === null || mm < (key === 'gapMm' ? 0 : 5) || mm > (key === 'gapMm' ? 20 : 300)) {
+                this.update('props');
+                return;
+            }
+            this.remember();
+            this.d[key] = Math.round(mm * 100) / 100;
+            this.changed();
+        }
+        duplicateSelected() {
+            const el = this.selected;
+            if (!el || !this.d || !this.canWrite)
+                return;
+            this.remember();
+            const copy = { ...JSON.parse(JSON.stringify(el)), id: (0, label_design_1.newId)(), x: (0, label_design_1.snapToDot)(el.x + 2, this.dpi), y: (0, label_design_1.snapToDot)(el.y + 2, this.dpi) };
+            this.d.elements = [...this.d.elements, copy];
+            this.selectedId = copy.id;
+            this.changed();
+        }
+        removeSelected() {
+            if (!this.d || !this.selectedId || !this.canWrite)
+                return;
+            this.remember();
+            this.d.elements = this.d.elements.filter((e) => e.id !== this.selectedId);
+            this.selectedId = null;
+            this.changed();
+        }
+        moveLayer(step) {
+            const d = this.d;
+            if (!d || !this.selectedId || !this.canWrite)
+                return;
+            const i = d.elements.findIndex((e) => e.id === this.selectedId);
+            const j = i + step;
+            if (i < 0 || j < 0 || j >= d.elements.length)
+                return;
+            this.remember();
+            const list = [...d.elements];
+            [list[i], list[j]] = [list[j], list[i]];
+            d.elements = list;
+            this.changed();
+        }
+        onClick(event) {
+            const target = event.target.closest('[data-act]');
+            if (!target || target.disabled)
+                return;
+            const act = target.dataset.act;
+            const v = target.dataset.v;
+            const el = this.selected;
+            switch (act) {
+                case 'mode':
+                    this.setMode(v);
+                    break;
+                case 'undo':
+                    this.undo();
+                    break;
+                case 'redo':
+                    this.redo();
+                    break;
+                case 'zoom':
+                    this.zoomBy(Number(v));
+                    break;
+                case 'grid':
+                    this.showGrid = !this.showGrid;
+                    this.update('stage');
+                    this.update('top');
+                    break;
+                case 'snap':
+                    this.snap = !this.snap;
+                    this.update('top');
+                    this.update('status');
+                    break;
+                case 'unit':
+                    this.unit = v;
+                    this.update('all');
+                    break;
+                case 'picker':
+                    this.togglePicker();
+                    break;
+                case 'sample':
+                    this.useSample(this.sampleResults[Number(v)]);
+                    break;
+                case 'add':
+                    this.addElement(target.dataset.kind, target.dataset.field || undefined);
+                    break;
+                case 'layer':
+                    this.selectedId = v;
+                    this.update('layers');
+                    this.update('stage');
+                    this.update('props');
+                    this.update('status');
+                    break;
+                case 'forward':
+                    this.moveLayer(1);
+                    break;
+                case 'backward':
+                    this.moveLayer(-1);
+                    break;
+                case 'duplicate':
+                    this.duplicateSelected();
+                    break;
+                case 'remove':
+                    this.removeSelected();
+                    break;
+                case 'style':
+                    this.setStyle(target.dataset.key, v);
+                    break;
+                case 'toggle':
+                    if (el)
+                        this.setStyle(v, v === 'hri' ? el.hri === false : !el[v]);
+                    break;
+                case 'bold':
+                    if (el)
+                        this.setStyle('weight', (el.weight || 400) >= 700 ? 400 : 700);
+                    break;
+                case 'imageMode':
+                    this.imageMode = v;
+                    this.update('props');
+                    break;
+                case 'printer':
+                    if (this.d && this.canWrite && this.d.printer !== v) {
+                        this.remember();
+                        this.d = { ...this.d, printer: v };
+                        this.changed();
+                    }
+                    break;
+                case 'dpi':
+                    if (this.d && this.canWrite && this.d.dpi !== Number(v)) {
+                        this.remember();
+                        this.d = { ...this.d, dpi: Number(v) };
+                        this.changed();
+                    }
+                    break;
+                case 'checkFilter':
+                    this.checkFilter = v;
+                    this.update('check');
+                    break;
+                case 'checkPick':
+                    this.checkSelected = this.filteredProblems()[Number(v)] || null;
+                    this.update('check');
+                    break;
+                case 'checkRun':
+                    this.runCheck();
+                    break;
+                case 'letWrap':
+                    this.letWrap(v);
+                    break;
+            }
+        }
+        onChange(event) {
+            const target = event.target;
+            const key = target.dataset && target.dataset.change;
+            if (!key)
+                return;
+            const value = target.type === 'checkbox' ? target.checked : target.value;
+            switch (key) {
+                case 'pos':
+                    this.setPos(target.dataset.key, value);
+                    break;
+                case 'field':
+                    this.change((el) => { el.value = value ? `{{${value}}}` : (el.type === 'text' ? 'Text' : el.value); });
+                    break;
+                case 'text':
+                    this.change((el) => { el.value = String(value); });
+                    break;
+                case 'symbology':
+                    this.setStyle('symbology', value);
+                    break;
+                case 'module':
+                    this.setStyle('module', Number(value));
+                    break;
+                case 'hri': {
+                    const el = this.selected;
+                    if (el)
+                        this.setStyle('hri', el.hri === false);
+                    break;
+                }
+                case 'font':
+                    this.setStyle('font', value);
+                    break;
+                case 'size':
+                    this.setAtLeast('size', value);
+                    break;
+                case 'lines':
+                    this.setAtLeast('lines', value);
+                    break;
+                case 'fit':
+                    this.setStyle('fit', value);
+                    break;
+                case 'stroke': {
+                    const mm = this.parseLen(value);
+                    if (mm === null)
+                        this.update('props');
+                    else
+                        this.setStyle('stroke', Math.max(0.1, mm));
+                    break;
+                }
+                case 'when':
+                    this.setStyle('when', value || undefined);
+                    break;
+                case 'image':
+                    this.onImageFile(target);
+                    break;
+                case 'design':
+                    this.setDesign(target.dataset.key, value);
+                    break;
+                case 'stock':
+                    this.toggleStock();
+                    break;
+                case 'stockColor':
+                    this.setStock('color', value);
+                    break;
+                case 'stockFrom':
+                    this.setStock('from', value);
+                    break;
+            }
+        }
+        onInput(event) {
+            const target = event.target;
+            const key = target.dataset && target.dataset.input;
+            if (key === 'name') {
+                this.label = target.value;
+                if (this.label.trim())
+                    this.errorText = '';
+                this.emit('designchange', { design: this.getDesign(), name: this.label, dirty: this.dirty });
+                this.update('top');
+            }
+            else if (key === 'palette') {
+                this.paletteFilter = target.value;
+                this.update('palette');
+            }
+            else if (key === 'sampleSearch') {
+                clearTimeout(this.sampleTimer);
+                const q = target.value;
+                this.sampleTimer = setTimeout(() => this.findSamples(q), 300);
+            }
+        }
+        onDragStart(event) {
+            const tile = event.target.closest('[data-act="add"]');
+            if (!tile || !event.dataTransfer)
+                return;
+            event.dataTransfer.setData('text/plain', JSON.stringify({ kind: tile.dataset.kind, field: tile.dataset.field || null }));
+            event.dataTransfer.effectAllowed = 'copy';
+        }
+        onDrop(event) {
+            event.preventDefault();
+            let spec = null;
+            try {
+                spec = JSON.parse(event.dataTransfer ? event.dataTransfer.getData('text/plain') : '');
+            }
+            catch (e) {
+                spec = null;
+            }
+            if (!spec || !spec.kind)
+                return;
+            const rect = this.refs.stage.getBoundingClientRect();
+            this.addElement(spec.kind, spec.field || undefined, { x: (event.clientX - rect.left) / this.pxPerMm, y: (event.clientY - rect.top) / this.pxPerMm });
+        }
+        onPointerDown(event) {
+            const target = event.target;
+            const handle = target.closest('[data-handle]');
+            const box = target.closest('[data-el]');
+            if (!target.closest('.ld-center'))
+                return;
+            if (!box) {
+                if (this.selectedId) {
+                    this.selectedId = null;
+                    this.update('layers');
+                    this.update('stage');
+                    this.update('props');
+                    this.update('status');
+                }
+                return;
+            }
+            event.stopPropagation();
+            const el = this.d && this.d.elements.find((e) => e.id === box.dataset.el);
+            if (!el)
+                return;
+            if (this.selectedId !== el.id) {
+                this.selectedId = el.id;
+                this.update('layers');
+                this.update('stage');
+                this.update('props');
+                this.update('status');
+            }
+            if (!this.canWrite || event.button !== 0)
+                return;
+            this.drag = { kind: handle ? 'resize' : 'move', id: el.id, handle: handle ? handle.dataset.handle : undefined, startX: event.clientX, startY: event.clientY, orig: { ...el }, moved: false };
+        }
+        withGuides(el, x, y) {
+            const d = this.d;
+            const tol = 0.8;
+            const guides = [];
+            const xs = [d.widthMm / 2];
+            const ys = [d.heightMm / 2];
+            for (const o of d.elements) {
+                if (o.id === el.id)
+                    continue;
+                xs.push(o.x, o.x + o.w, o.x + o.w / 2);
+                ys.push(o.y, o.y + o.h, o.y + o.h / 2);
+            }
+            const tryAxis = (start, size, lines, axis) => {
+                for (const line of lines) {
+                    for (const [offset, edge] of [[0, start], [size / 2, start + size / 2], [size, start + size]]) {
+                        if (Math.abs(edge - line) <= tol) {
+                            guides.push({ axis, mm: line });
+                            return (0, label_design_1.snapToDot)(line - offset, this.dpi);
+                        }
+                    }
+                }
+                return start;
+            };
+            const nx = tryAxis(this.snapMm(x), el.w, xs, 'x');
+            const ny = tryAxis(this.snapMm(y), el.h, ys, 'y');
+            this.guides = guides;
+            return { x: nx, y: ny };
+        }
+        zoomBy(step) {
+            const i = ZOOMS.indexOf(this.zoom);
+            this.zoom = ZOOMS[Math.max(0, Math.min(ZOOMS.length - 1, (i < 0 ? 2 : i) + step))];
+            this.update('top');
+            this.update('stage');
+        }
+        setMode(mode) {
+            this.mode = mode;
+            if (mode === 'check' && !this.checkRunning && !this.checkResults.length)
+                this.runCheck();
+            this.update('all');
+        }
+        togglePicker() {
+            this.samplePickerOpen = !this.samplePickerOpen;
+            if (this.samplePickerOpen && !this.sampleResults.length)
+                this.findSamples('');
+            this.update('top');
+        }
+        findSamples(query) {
+            if (!this.source || !this.source.search) {
+                this.update('top');
+                return;
+            }
+            this.sampleLoading = true;
+            this.update('top');
+            this.source.search(query).then((items) => {
+                this.sampleLoading = false;
+                this.sampleResults = items || [];
+                this.update('top');
+            }, () => { this.sampleLoading = false; this.sampleResults = []; this.update('top'); });
+        }
+        onImageFile(input) {
+            const file = input.files && input.files[0];
+            input.value = '';
+            const el = this.selected;
+            if (!file || !el || el.type !== 'image')
+                return;
+            if (!/^image\/(png|jpe?g|gif|webp|bmp|svg\+xml)$/.test(file.type)) {
+                this.imageError = 'Use a PNG, JPG, GIF, WebP, BMP or SVG image.';
+                this.update('props');
+                return;
+            }
+            if (file.size > 5 * 1024 * 1024) {
+                this.imageError = 'The image is larger than 5 MB.';
+                this.update('props');
+                return;
+            }
+            this.imageError = '';
+            const url = URL.createObjectURL(file);
+            const img = new Image();
+            img.onload = () => {
+                const w = Math.max(8, (0, label_design_1.mmToDots)(el.w, this.dpi));
+                const h = Math.max(8, (0, label_design_1.mmToDots)(el.h, this.dpi));
+                URL.revokeObjectURL(url);
+                if (w * h > 900 * 900) {
+                    this.imageError = 'Make the image box smaller (it is too many printer dots).';
+                    this.update('props');
+                    return;
+                }
+                const bits = (0, label_design_1.imageFromSource)(img, img.naturalWidth || img.width, img.naturalHeight || img.height, w, h, this.imageMode);
+                const target = this.d && this.d.elements.find((e) => e.id === el.id);
+                if (!target || !this.d)
+                    return;
+                this.remember();
+                target.image = bits;
+                this.d.elements = [...this.d.elements];
+                this.changed();
+            };
+            img.onerror = () => { this.imageError = 'That image could not be read.'; URL.revokeObjectURL(url); this.update('props'); };
+            img.src = url;
+        }
+        toggleStock() {
+            if (!this.d || !this.canWrite)
+                return;
+            this.remember();
+            const d = this.d;
+            d.stock = d.stock ? null : { color: '#f3e436', x: d.widthMm * 0.52, y: 0, w: d.widthMm * 0.48, h: d.heightMm };
+            this.changed();
+        }
+        setStock(key, value) {
+            const d = this.d;
+            if (!d || !d.stock || !this.canWrite)
+                return;
+            this.remember();
+            if (key === 'color')
+                d.stock.color = String(value);
+            else {
+                const pct = Math.max(0, Math.min(100, Number(value))) / 100;
+                d.stock.x = d.widthMm * pct;
+                d.stock.w = d.widthMm - d.stock.x;
+            }
+            this.changed();
+        }
+        runCheck() {
+            const source = this.source;
+            if (!this.d || !source || !source.page) {
+                this.checkError = 'Pick a store to check against its items.';
+                this.update('check');
+                return;
+            }
+            const token = ++this.checkToken;
+            const design = JSON.parse(JSON.stringify(this.d));
+            this.checkRunning = true;
+            this.checkError = '';
+            this.checkResults = [];
+            this.checkDone = 0;
+            this.checkTotal = 0;
+            this.checkSelected = null;
+            this.update('check');
+            const canvas = document.createElement('canvas');
+            const page = (offset) => {
+                source.page(offset, CHECK_PAGE).then((res) => {
+                    if (token !== this.checkToken)
+                        return;
+                    if (!res) {
+                        this.checkRunning = false;
+                        this.checkError = 'Could not load the store items.';
+                        this.update('check');
+                        return;
+                    }
+                    if (res.storeName)
+                        this.store = res.storeName;
+                    this.checkTotal = Math.min(res.total, CHECK_MAX_ITEMS);
+                    for (const item of res.items) {
+                        const data = (0, label_design_1.labelDataFromItem)(item, { limits: design.limits, storeName: this.store });
+                        this.checkResults.push({ item, data, warnings: (0, label_design_1.drawLabel)(canvas, design, data, { ppm: 3 }) });
+                    }
+                    this.checkDone = this.checkResults.length;
+                    const next = offset + res.items.length;
+                    if (res.items.length && next < this.checkTotal) {
+                        this.update('check');
+                        setTimeout(() => page(next), 0);
+                    }
+                    else {
+                        this.checkRunning = false;
+                        this.checkSelected = this.problems()[0] || this.checkResults[0] || null;
+                        this.update('check');
+                    }
+                }, () => {
+                    if (token !== this.checkToken)
+                        return;
+                    this.checkRunning = false;
+                    this.checkError = 'Could not load the store items.';
+                    this.update('check');
+                });
+            };
+            (0, label_design_1.ensureLabelFonts)(this.fonts).then(() => page(0));
+        }
+        problems() { return this.checkResults.filter((r) => r.warnings.length); }
+        filteredProblems() {
+            const f = this.checkFilter;
+            return this.problems().filter((r) => f === 'all' || r.warnings.some((w) => w.kind === f)).slice(0, 120);
+        }
+        letWrap(id) {
+            if (!this.d || !this.canWrite)
+                return;
+            this.remember();
+            const target = this.d.elements.find((e) => e.id === id);
+            if (target) {
+                target.fit = 'wrap';
+                target.lines = 2;
+                if (target.native) {
+                    delete target.native;
+                    delete target.nativeFit;
+                    if (target.font === 'printer')
+                        target.font = 'sans';
+                }
+            }
+            this.d = { ...this.d, elements: [...this.d.elements] };
+            this.changed();
+            this.runCheck();
+        }
+        itemTitle(item) { return item.posdecs || item.item_name || `Item ${item.item_id}`; }
+        printerDots() { return this.d ? `${(0, label_design_1.mmToDots)(this.d.widthMm, this.dpi)} × ${(0, label_design_1.mmToDots)(this.d.heightMm, this.dpi)} dots` : ''; }
+        renderTop() {
+            const d = this.d;
+            const r = this.refs;
+            r.empty.hidden = !!d;
+            r.body.hidden = !d || this.mode !== 'design';
+            r.check.hidden = !d || this.mode !== 'check';
+            if (!d)
+                return;
+            const name = r.name;
+            if (name.value !== this.label && this.root.activeElement !== name)
+                name.value = this.label;
+            r.size.textContent = this.unit === 'in'
+                ? `${+(d.widthMm / label_design_1.MM_PER_INCH).toFixed(2)} × ${+(d.heightMm / label_design_1.MM_PER_INCH).toFixed(2)} in`
+                : `${+d.widthMm.toFixed(1)} × ${+d.heightMm.toFixed(1)} mm`;
+            r.printer.textContent = `${d.printer === 'zpl' ? 'Zebra' : 'Godex'} · ${this.dpi} dpi`;
+            const dirty = this.dirty;
+            r.saved.className = `ld-saved${dirty ? ' ld-unsaved' : ''}`;
+            r.saved.textContent = dirty ? 'Unsaved changes' : this.savedAt ? `Saved ${this.savedAt.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}` : '';
+            r.error.textContent = this.errorText;
+            r.modes.innerHTML = `<button type="button" class="${on(this.mode === 'design').trim()}" data-act="mode" data-v="design">Design</button><button type="button" class="${on(this.mode === 'check').trim()}" data-act="mode" data-v="check">Check items</button>`;
+            r.tools.innerHTML = this.mode !== 'design' ? '' : `
+        <button type="button" class="lt-icon-btn" data-act="undo" title="Undo (Ctrl+Z)" ${this.undoStack.length ? '' : 'disabled'}>↶</button>
+        <button type="button" class="lt-icon-btn" data-act="redo" title="Redo (Ctrl+Shift+Z)" ${this.redoStack.length ? '' : 'disabled'}>↷</button>
+        <span class="ld-div"></span>
+        <button type="button" class="lt-icon-btn" data-act="zoom" data-v="-1" title="Zoom out">−</button>
+        <span class="ld-zoom">${Math.round(this.zoom * 100)}%</span>
+        <button type="button" class="lt-icon-btn" data-act="zoom" data-v="1" title="Zoom in">+</button>
+        <span class="ld-div"></span>
+        <button type="button" class="lt-icon-btn${on(this.showGrid)}" data-act="grid" title="Grid">#</button>
+        <button type="button" class="lt-icon-btn${on(this.snap)}" data-act="snap" title="Snap to grid">⌖</button>
+        <div class="lt-seg lt-seg-sm"><button type="button" class="${on(this.unit === 'in').trim()}" data-act="unit" data-v="in">in</button><button type="button" class="${on(this.unit === 'mm').trim()}" data-act="unit" data-v="mm">mm</button></div>`;
+            r.sampleBtn.textContent = `Sample: ${this.sampleName} ▾`;
+            r.picker.hidden = !this.samplePickerOpen;
+            if (this.samplePickerOpen) {
+                const hasSource = !!(this.source && this.source.search);
+                r.pickList.innerHTML = !hasSource ? '<div class="ld-pick-empty">Pick a store to use its items.</div>'
+                    : this.sampleLoading ? '<div class="ld-pick-empty">Searching…</div>'
+                        : this.sampleResults.map((it, i) => `<button type="button" class="ld-pick" data-act="sample" data-v="${i}"><span>${esc(this.itemTitle(it))}</span><small>${esc(formatMoney(it.price))}</small></button>`).join('')
+                            || '<div class="ld-pick-empty">No items found.</div>';
+            }
+        }
+        renderPalette() {
+            const q = this.paletteFilter.trim().toLowerCase();
+            const fields = label_design_1.FIELDS.filter((f) => !q || f.label.toLowerCase().includes(q));
+            const dis = this.canWrite ? '' : ' disabled';
+            this.refs.fields.innerHTML = fields.length
+                ? fields.map((f) => `<button type="button" class="ld-tile" draggable="true" data-act="add" data-kind="${this.kindFor(f.key)}" data-field="${esc(f.key)}"${dis}><span class="ld-tile-ico">${icon(f.icon)}</span><span class="ld-tile-label">${esc(f.label)}</span></button>`).join('')
+                : '<span class="lt-note ld-none">No fields match.</span>';
+            this.refs.fieldCount.textContent = String(fields.length);
+            this.refs.basic.innerHTML = BASIC_PALETTE.map((b) => `<button type="button" class="ld-tile" draggable="true" data-act="add" data-kind="${b.kind}"${dis}><span class="ld-tile-ico">${icon(b.icon)}</span><span class="ld-tile-label">${esc(b.label)}</span></button>`).join('');
+        }
+        layerIcon(el) {
+            const f = this.boundField(el);
+            const field = el.type === 'text' && f ? label_design_1.FIELDS.find((x) => x.key === f) : undefined;
+            return field ? field.icon : ELEMENT_ICONS[el.type] || 'square';
+        }
+        renderLayers() {
+            const d = this.d;
+            if (!d)
+                return;
+            this.refs.layerCount.textContent = String(d.elements.length);
+            this.refs.layers.innerHTML = d.elements.length
+                ? d.elements.slice().reverse().map((el) => `<button type="button" class="ld-layer${on(el.id === this.selectedId)}" data-act="layer" data-v="${esc(el.id)}">${icon(this.layerIcon(el))}<span class="ld-layer-name">${esc(this.elementTitle(el))}</span>${this.isNative(el) ? '<small>printer font</small>' : ''}</button>`).join('')
+                : '<span class="lt-note">Nothing on the label yet.</span>';
+        }
+        ticks(axis) {
+            const d = this.d;
+            const lenMm = axis === 'x' ? d.widthMm : d.heightMm;
+            const ppm = this.pxPerMm;
+            const out = [];
+            const tick = (px, len, label) => {
+                const pos = axis === 'x' ? `left:${px}px;height:${len}px` : `top:${px}px;width:${len}px`;
+                out.push(`<i style="${pos}">${label !== null ? `<b>${label}</b>` : ''}</i>`);
+            };
+            if (this.unit === 'in') {
+                const steps = Math.floor((lenMm / label_design_1.MM_PER_INCH) * 8 + 1e-6);
+                for (let i = 0; i <= steps; i++)
+                    tick((i / 8) * label_design_1.MM_PER_INCH * ppm, i % 8 === 0 ? 18 : i % 4 === 0 ? 10 : i % 2 === 0 ? 6 : 4, i % 8 === 0 ? String(i / 8) : null);
+            }
+            else {
+                for (let i = 0; i <= Math.floor(lenMm); i++)
+                    tick(i * ppm, i % 10 === 0 ? 18 : i % 5 === 0 ? 10 : 5, i % 10 === 0 ? String(i) : null);
+            }
+            return out.join('');
+        }
+        renderStage() {
+            const d = this.d;
+            if (!d || this.mode !== 'design')
+                return;
+            const r = this.refs;
+            const ppm = this.pxPerMm;
+            const w = d.widthMm * ppm;
+            const h = d.heightMm * ppm;
+            r.stage.style.width = `${w}px`;
+            r.stage.style.height = `${h}px`;
+            r.rulerX.style.width = `${w}px`;
+            r.rulerY.style.height = `${h}px`;
+            r.rulerX.innerHTML = this.ticks('x');
+            r.rulerY.innerHTML = this.ticks('y');
+            const canvas = r.canvas;
+            const dpr = Math.min(3, Math.max(1, window.devicePixelRatio || 1));
+            this.warnings = (0, label_design_1.drawLabel)(canvas, d, this.data, { ppm: ppm * dpr, stock: true });
+            canvas.style.width = `${w}px`;
+            canvas.style.height = `${h}px`;
+            r.grid.hidden = !this.showGrid;
+            r.grid.style.backgroundSize = `${this.gridMm * ppm}px ${this.gridMm * ppm}px`;
+            const warned = new Set(this.warnings.map((x) => x.elementId));
+            r.elements.innerHTML = d.elements.map((el) => {
+                const handles = el.id === this.selectedId && this.canWrite ? HANDLES.map((hd) => `<span class="ld-h ld-h-${hd}" data-handle="${hd}"></span>`).join('') : '';
+                return `<div class="ld-el${on(el.id === this.selectedId)}${warned.has(el.id) ? ' warn' : ''}" data-el="${esc(el.id)}" title="${esc(this.elementTitle(el))}" style="left:${el.x * ppm}px;top:${el.y * ppm}px;width:${el.w * ppm}px;height:${el.h * ppm}px">${handles}</div>`;
+            }).join('');
+            r.guides.innerHTML = this.guides.map((g) => `<div class="ld-guide ld-guide-${g.axis}" style="${g.axis === 'x' ? 'left' : 'top'}:${g.mm * ppm}px"></div>`).join('');
+            r.stocktag.hidden = !d.stock;
+        }
+        renderStatus() {
+            const d = this.d;
+            if (!d)
+                return;
+            const s = this.selected;
+            const warning = s ? this.warnings.find((w) => w.elementId === s.id) : undefined;
+            const left = s
+                ? `<b>${esc(this.elementTitle(s))}</b><span>X ${this.fmt(s.x)} · Y ${this.fmt(s.y)} · W ${this.fmt(s.w)} · H ${this.fmt(s.h)} ${this.unit}</span>${warning ? `<span class="lt-chip lt-chip-warn">${esc(warning.message)}</span>` : ''}`
+                : `<span>${d.elements.length} element${d.elements.length === 1 ? '' : 's'} · grid ${this.unit === 'in' ? '1/16 in' : '1 mm'}${this.snap ? ' · snap on' : ''}</span>`;
+            this.refs.status.innerHTML = `${left}<span class="lt-sp"></span><span>Arrow keys move 1 dot, Shift moves 10</span>`;
+        }
+        renderProps() {
+            const d = this.d;
+            if (!d || this.mode !== 'design')
+                return;
+            const el = this.selected;
+            const ro = this.canWrite ? '' : ' disabled';
+            const rd = this.canWrite ? '' : ' readonly';
+            const sec = (body) => `<div class="ld-sec">${body}</div>`;
+            if (!el) {
+                this.refs.props.innerHTML = [
+                    '<div class="ld-sec ld-head"><div><div class="ld-title">Label</div><div class="lt-note">Select an element to change it.</div></div></div>',
+                    sec(`<span class="lt-eyebrow">Size (${this.unit})</span><div class="ld-two">
+            <label class="lt-field"><span class="ld-label">Width</span><input class="lt-input" type="number" step="0.01" value="${this.fmt(d.widthMm)}" data-change="design" data-key="widthMm"${rd}></label>
+            <label class="lt-field"><span class="ld-label">Height</span><input class="lt-input" type="number" step="0.01" value="${this.fmt(d.heightMm)}" data-change="design" data-key="heightMm"${rd}></label>
+            <label class="lt-field"><span class="ld-label">Gap</span><input class="lt-input" type="number" step="0.01" value="${this.fmt(d.gapMm || 0)}" data-change="design" data-key="gapMm"${rd}></label></div>`),
+                    sec(`<span class="lt-eyebrow">Printer</span>
+            <div class="lt-seg"><button type="button" class="${on(d.printer !== 'zpl').trim()}" data-act="printer" data-v="ezpl"${ro}>Godex</button><button type="button" class="${on(d.printer === 'zpl').trim()}" data-act="printer" data-v="zpl"${ro}>Zebra</button></div>
+            <div class="lt-seg"><button type="button" class="${on(d.dpi === 203).trim()}" data-act="dpi" data-v="203"${ro}>203 dpi</button><button type="button" class="${on(d.dpi === 300).trim()}" data-act="dpi" data-v="300"${ro}>300 dpi</button></div>
+            ${d.elements.some((e) => e.native && !e.native[d.printer || 'ezpl']) ? '<p class="lt-note lt-warn-text">Some elements use the other printer\'s font. They will print with a designer font on this printer.</p>' : ''}`),
+                    sec(`<span class="lt-eyebrow">Pre-printed stock</span>
+            <label class="lt-check"><input type="checkbox" data-change="stock" ${d.stock ? 'checked' : ''}${ro}> Show a pre-printed color as a guide</label>
+            ${d.stock ? `<div class="ld-two"><label class="lt-field"><span class="ld-label">Color</span><input class="lt-input" type="color" value="${esc(d.stock.color)}" data-change="stockColor"${ro}></label>
+            <label class="lt-field"><span class="ld-label">Starts at (% of width)</span><input class="lt-input" type="number" min="0" max="100" value="${Math.round((d.stock.x / d.widthMm) * 100)}" data-change="stockFrom"${rd}></label></div>` : ''}`),
+                    sec(`<span class="lt-eyebrow">Printer area</span><p class="lt-note">${this.printerDots()} at ${d.dpi} dpi.</p>`)
+                ].join('');
+                return;
+            }
+            const typeName = el.type === 'price' ? 'Price' : el.type.charAt(0).toUpperCase() + el.type.slice(1);
+            const parts = [];
+            parts.push(`<div class="ld-sec ld-head"><div><div class="ld-title">${esc(this.elementTitle(el))}</div><div class="lt-note">${typeName} element</div></div><span class="lt-sp"></span>
+        <button type="button" class="lt-icon-btn" data-act="forward" title="Bring forward"${ro}>▲</button>
+        <button type="button" class="lt-icon-btn" data-act="backward" title="Send backward"${ro}>▼</button>
+        <button type="button" class="lt-icon-btn" data-act="duplicate" title="Duplicate (Ctrl+D)"${ro}>⧉</button>
+        <button type="button" class="lt-icon-btn" data-act="remove" title="Delete (Del)"${ro}>${TRASH}</button></div>`);
+            if (this.isNative(el))
+                parts.push(sec('<p class="lt-note">Printer font: this prints with the printer\'s own font, exactly like today\'s labels. You can move it. Changing its size or style switches it to a designer font.</p>'));
+            if (el.type === 'text' || el.type === 'price' || el.type === 'barcode' || el.type === 'qr') {
+                const bound = this.boundField(el);
+                let data = '<span class="lt-eyebrow">Data</span>';
+                if (el.type !== 'qr') {
+                    data += `<label class="lt-field"><span class="ld-label">Field</span><select class="lt-input" data-change="field"${ro}>
+            ${el.type === 'text' ? `<option value=""${bound ? '' : ' selected'}>Fixed text</option>` : ''}
+            ${label_design_1.FIELDS.map((f) => `<option value="${esc(f.key)}"${bound === f.key ? ' selected' : ''}>${esc(f.label)}</option>`).join('')}</select></label>`;
+                }
+                if (el.type === 'qr' || (el.type === 'text' && !bound)) {
+                    data += `<label class="lt-field"><span class="ld-label">${el.type === 'qr' ? esc(QR_HINT) : 'Text'}</span><input class="lt-input" type="text" value="${esc(el.value)}" data-change="text"${rd}></label>`;
+                }
+                if (el.type === 'price') {
+                    data += `<div class="lt-field"><span class="ld-label">Format</span><div class="lt-seg lt-seg-sm">
+            <button type="button" class="${on(el.format === 'super').trim()}" data-act="style" data-key="format" data-v="super"${ro}>$7<sup>59</sup></button>
+            <button type="button" class="${on(!el.format || el.format === 'plain').trim()}" data-act="style" data-key="format" data-v="plain"${ro}>$7.59</button>
+            <button type="button" class="${on(el.format === 'nosign').trim()}" data-act="style" data-key="format" data-v="nosign"${ro}>7.59</button></div></div>`;
+                }
+                if (el.type === 'barcode') {
+                    const sym = el.symbology || 'UPC_A';
+                    const mod = el.module || 2;
+                    data += `<label class="lt-field"><span class="ld-label">Type</span><select class="lt-input" data-change="symbology"${ro}>
+              ${[['UPC_A', 'UPC-A'], ['EAN13', 'EAN-13'], ['CODE128', 'Code 128']].map(([v, l]) => `<option value="${v}"${sym === v ? ' selected' : ''}>${l}</option>`).join('')}</select></label>
+            <label class="lt-field"><span class="ld-label">Bar width (printer dots)</span><select class="lt-input" data-change="module"${ro}>
+              ${[1, 2, 3, 4].map((n) => `<option value="${n}"${mod === n ? ' selected' : ''}>${n}</option>`).join('')}</select></label>
+            <label class="lt-check"><input type="checkbox" data-change="hri" ${el.hri !== false ? 'checked' : ''}${ro}> Show the digits</label>`;
+                }
+                parts.push(sec(data));
+            }
+            if (el.type === 'text' || el.type === 'price') {
+                const font = el.font || 'sans';
+                const fit = el.fit || (el.type === 'price' ? 'shrink' : 'cut');
+                parts.push(sec(`<span class="lt-eyebrow">Text</span><div class="ld-two">
+          <label class="lt-field"><span class="ld-label">Font</span><select class="lt-input" data-change="font"${ro}>
+            ${label_design_1.FONTS.filter((f) => f.key !== 'printer' || el.font === 'printer').map((f) => `<option value="${f.key}"${font === f.key ? ' selected' : ''}>${esc(f.label)}</option>`).join('')}</select></label>
+          <label class="lt-field"><span class="ld-label">Size (pt)</span><input class="lt-input" type="number" min="4" max="200" step="0.5" value="${el.size ? Math.round(el.size * 10) / 10 : ''}" data-change="size"${rd}></label></div>
+          <p class="lt-note">The size stays the same on every label. A long value never makes the font smaller unless you choose Shrink.</p>
+          <label class="lt-field"><span class="ld-label">If it does not fit</span><select class="lt-input" data-change="fit"${this.canWrite && el.type !== 'price' ? '' : ' disabled'}>
+            ${[['cut', 'Cut at the edge'], ['wrap', 'Wrap onto more lines'], ['shrink', 'Shrink that label only']].map(([v, l]) => `<option value="${v}"${fit === v ? ' selected' : ''}>${l}</option>`).join('')}</select></label>
+          ${el.fit === 'wrap' ? `<label class="lt-field"><span class="ld-label">Lines</span><input class="lt-input lt-num" type="number" min="1" max="6" value="${el.lines || 2}" data-change="lines"${rd}></label>` : ''}
+          <div class="ld-row"><div class="lt-seg lt-seg-sm">
+            <button type="button" class="${on(!el.align || el.align === 'left').trim()}" data-act="style" data-key="align" data-v="left"${ro}>Left</button>
+            <button type="button" class="${on(el.align === 'center').trim()}" data-act="style" data-key="align" data-v="center"${ro}>Center</button>
+            <button type="button" class="${on(el.align === 'right').trim()}" data-act="style" data-key="align" data-v="right"${ro}>Right</button></div></div>
+          <div class="ld-row">
+            <button type="button" class="lt-icon-btn${on((el.weight || 400) >= 700)}" data-act="bold" title="Bold"${ro}><b>B</b></button>
+            <button type="button" class="lt-icon-btn${on(el.italic)}" data-act="toggle" data-v="italic" title="Italic"${ro}><i>I</i></button>
+            <button type="button" class="lt-icon-btn${on(el.upper)}" data-act="toggle" data-v="upper" title="Capitals"${ro}>AA</button>
+            ${el.type === 'text' ? `<button type="button" class="lt-icon-btn${on(el.inverse)}" data-act="toggle" data-v="inverse" title="White on black"${ro}>◩</button>` : ''}
+            ${el.type === 'price' ? `<button type="button" class="lt-icon-btn${on(el.strike)}" data-act="toggle" data-v="strike" title="Strike through (was price)"${ro}><s>S</s></button>` : ''}
+          </div>`));
+            }
+            if (el.type === 'image') {
+                parts.push(sec(`<span class="lt-eyebrow">Image</span><div class="lt-seg lt-seg-sm">
+          <button type="button" class="${on(this.imageMode === 'dither').trim()}" data-act="imageMode" data-v="dither">Photo (dots)</button>
+          <button type="button" class="${on(this.imageMode === 'threshold').trim()}" data-act="imageMode" data-v="threshold">Logo (solid)</button></div>
+          <label class="lt-btn lt-btn-sm ld-upload${this.canWrite ? '' : ' disabled'}">Upload image<input type="file" accept="image/*" data-change="image" hidden${ro}></label>
+          <p class="lt-note">The image is turned into black and white printer dots at the box size. Resize the box first, then upload, for the sharpest print.</p>
+          ${this.imageError ? `<span class="lt-error">${esc(this.imageError)}</span>` : ''}`));
+            }
+            if (el.type === 'box') {
+                parts.push(sec(`<span class="lt-eyebrow">Box</span><label class="lt-field"><span class="ld-label">Line thickness (${this.unit})</span><input class="lt-input lt-num" type="number" min="0" step="0.01" value="${this.fmt(el.stroke || 0.3)}" data-change="stroke"${rd}></label>`));
+            }
+            parts.push(sec(`<span class="lt-eyebrow">Position and size (${this.unit})</span><div class="ld-two">
+        ${['x', 'y', 'w', 'h'].map((k) => `<label class="lt-field"><span class="ld-label">${k.toUpperCase()}</span><input class="lt-input" type="number" step="0.01" value="${this.fmt(el[k])}" data-change="pos" data-key="${k}"${rd}></label>`).join('')}</div>`));
+            parts.push(sec(`<span class="lt-eyebrow">Show</span><select class="lt-input" data-change="when"${ro}>
+        <option value=""${el.when ? '' : ' selected'}>On every label</option>
+        ${label_design_1.FIELDS.map((f) => `<option value="${esc(f.key)}"${el.when === f.key ? ' selected' : ''}>Only when ${esc(f.label)} has a value</option>`).join('')}</select>`));
+            this.refs.props.innerHTML = parts.join('');
+        }
+        renderCheck() {
+            const d = this.d;
+            if (!d || this.mode !== 'check')
+                return;
+            const problems = this.problems();
+            const count = (kind) => problems.filter((r) => r.warnings.some((w) => w.kind === kind)).length;
+            const pct = (n) => (this.checkResults.length ? (n / this.checkResults.length) * 100 : 0);
+            const fits = this.checkResults.length - problems.length;
+            const cut = new Set();
+            problems.forEach((r) => r.warnings.filter((w) => w.kind === 'cut').forEach((w) => cut.add(w.elementId)));
+            const cutEls = d.elements.filter((e) => cut.has(e.id) && e.type === 'text');
+            const filters = [['all', 'All'], ['cut', 'Cut'], ['wrap', 'Too many lines'], ['shrink', 'Shrunk'], ['missing', 'Missing data'], ['barcode', 'Bad barcode']];
+            const shown = this.filteredProblems();
+            const scale = d.dpi > 250 ? 0.6 : 0.9;
+            this.refs.check.innerHTML = `<div class="ld-check-main">
+        <div class="lt-card ld-printer"><div class="ld-card-head"><b>Printer view</b><span class="lt-chip">${this.printerDots()}</span><span class="lt-sp"></span>
+          ${this.checkSelected ? `<span class="lt-note">${esc(this.itemTitle(this.checkSelected.item))}</span>` : ''}</div>
+          <div class="ld-printer-body"><rpk-label-preview data-ref-check="printer"></rpk-label-preview><p class="lt-note">What the printer puts on the label, dot for dot. A pre-printed color is not printed.</p></div></div>
+        <div class="lt-card"><div class="ld-card-head"><b>Items that need a look</b><span class="lt-chip lt-chip-warn">${problems.length}</span><span class="lt-sp"></span>
+          <div class="lt-seg lt-seg-sm">${filters.map(([k, l]) => `<button type="button" class="${on(this.checkFilter === k).trim()}" data-act="checkFilter" data-v="${k}">${l}${k === 'all' ? '' : ` <b>${count(k)}</b>`}</button>`).join('')}</div></div>
+          ${this.checkRunning ? `<div class="lt-empty">Checking ${this.checkDone} of ${this.checkTotal || '…'} items…</div>` : ''}
+          ${!this.checkRunning && this.checkError ? `<div class="lt-empty">${esc(this.checkError)}</div>` : ''}
+          ${!this.checkRunning && !this.checkError && !problems.length && this.checkResults.length ? '<div class="lt-empty">Every item fits.</div>' : ''}
+          ${this.checkRunning ? '' : `<div class="ld-problems">${shown.map((r, i) => `<button type="button" class="ld-problem${on(r === this.checkSelected)}" data-act="checkPick" data-v="${i}">
+            <rpk-label-preview data-problem="${i}"></rpk-label-preview><span class="ld-pmsg">${esc(r.warnings[r.warnings.length - 1].message)}</span><span class="lt-note">${esc(this.itemTitle(r.item))}</span></button>`).join('')}</div>`}
+        </div></div>
+        <aside class="lt-card ld-summary"><span class="lt-eyebrow">Checked against</span>
+          <div class="ld-metric">${this.checkResults.length.toLocaleString()} items</div>
+          <div class="lt-note">${esc(this.store || 'This store')}${this.checkTotal > this.checkResults.length && !this.checkRunning ? ` · first ${this.checkResults.length}` : ''}</div>
+          <div class="ld-bar"><span class="ok" style="width:${pct(fits)}%"></span><span class="bad" style="width:${pct(problems.length)}%"></span></div>
+          <div class="ld-li"><i class="ok"></i>Fits as designed<b>${fits.toLocaleString()}</b></div>
+          <div class="ld-li"><i class="bad"></i>Need a look<b>${problems.length.toLocaleString()}</b></div>
+          ${cutEls.length && this.canWrite ? `<span class="lt-eyebrow">Quick fixes</span>${cutEls.map((e) => `<div class="ld-fix"><div><b>Let ${esc(this.elementTitle(e))} use 2 lines</b><p class="lt-note">The font size stays the same on every label.</p></div><button type="button" class="lt-btn lt-btn-sm" data-act="letWrap" data-v="${esc(e.id)}">Apply</button></div>`).join('')}` : ''}
+          <button type="button" class="lt-btn" data-act="checkRun"${this.checkRunning ? ' disabled' : ''}>Check again</button>
+          <p class="lt-note">Fixes change the template, never the items. Save to keep them.</p></aside>`;
+            const printer = this.refs.check.querySelector('[data-ref-check="printer"]');
+            if (printer) {
+                printer.fontsUrl = this.fonts;
+                printer.printerView = true;
+                printer.printerScale = scale;
+                printer.data = this.checkSelected ? this.checkSelected.data : this.data;
+                printer.design = d;
+            }
+            this.refs.check.querySelectorAll('[data-problem]').forEach((node) => {
+                const preview = node;
+                const r = shown[Number(node.dataset.problem)];
+                preview.fontsUrl = this.fonts;
+                preview.maxWidth = 230;
+                preview.maxHeight = 90;
+                preview.data = r.data;
+                preview.design = d;
+            });
+        }
+    }
+    customElements.define(tag, LabelDesigner);
+}