{
"version": 3,
"sources": ["/cdn/shop/t/268/assets/locket-engraving.js?cb=20260624o"],
"sourcesContent": ["/*\r\n * locket-engraving.js \u2014 3-style engraving selector + live preview for the\r\n * personalized locket PDP (ornament-type LOCKET_ENGRAVED, tag `engravable-locket`).\r\n *\r\n * Styles (mirror the backend DXF generators in automations/generate_locket_dxf.py):\r\n * single -> generate_locket_single_line_dxf (one centered line)\r\n * stacked -> generate_locket_stacked_dxf (1-6 names stacked)\r\n * monogram -> generate_locket_dxf (center initial + names curved on the edge)\r\n *\r\n * Integration: renders its own inputs as `.symbol-input-container[data-name]` fields inside\r\n * the existing engraving panel. The theme's add-to-cart calls generateTextValues(), which\r\n * harvests every such field into a cart line-item property keyed by data-name (UPPER-CASED)\r\n * \u2014 so no edit to the minified add-to-cart is needed. Font is read live from `.font-button.active`.\r\n *\r\n * Positioning: geometry is a tunable object per shape (GEO) with an optional per-variant\r\n * override (GEO_OVERRIDES, keyed by variant color/title so Gold vs Silver can differ).\r\n * The dev-only drag panel (snippets/locket-engraving-debug.liquid, ?lke-debug) edits these\r\n * live and exports the numbers. window.__lke exposes the hook it uses.\r\n */\r\n(function () {\r\n 'use strict';\r\n\r\n var ORNAMENT_TYPE = 'LOCKET_ENGRAVED';\r\n\r\n /* ---- Per-style limits (see docs/locket-engraving-contract.md) ---- */\r\n var SINGLE_MAXLEN = 12;\r\n var NAME_MAXLEN = 10;\r\n var INITIAL_MAXLEN = 1;\r\n var MAX_NAMES = 6;\r\n\r\n var STYLES = [\r\n { key: 'single', label: 'Single Line', hint: 'One line of text, centered on the locket.' },\r\n { key: 'stacked', label: 'Stacked Names', hint: 'Up to six names, centered and stacked.' },\r\n { key: 'monogram', label: 'Monogram', hint: 'A center initial with names curved around the edge.' }\r\n ];\r\n\r\n /* ---- FAITHFUL layout constants, lifted from automations/generate_locket_dxf.py ----\r\n The preview reproduces the DXF math: locket-face dims (PRODUCT_DIMS, mm), the\r\n single 11x11 / stacked 11x17 fill-boxes, the 0.79 edge-name ellipse, per-name-count\r\n center-initial size ratios, edge cap-heights, and the 1.35 stacked line spacing.\r\n LINE_SPACING_MULT and the ratios below are verbatim from the Python. ---- */\r\n var LINE_SPACING_MULT = 1.35;\r\n var LOCKET = {\r\n // W,H = artboard mm (PRODUCT_DIMS). single/stack = fill-box mm. initRatio = [n<=2,n<=4,else].\r\n // ellA/ellB = edge-ellipse semi-axes as fraction of half-W/half-H. ecy/initYoff = mm offsets.\r\n // edgeCap = cap height as fraction of H [n<5, n>=5].\r\n oval_necklace: { W: 18.9, H: 25.0, single: [11, 11], stack: [11, 17], initRatio: [0.38, 0.34, 0.32], ellA: 0.79, ellB: 0.79, ecy: 0, initYoff: 0, edgeCap: [0.057, 0.048] },\r\n oval_bracelet: { W: 25.0, H: 18.9, single: [11, 11], stack: [13, 12], initRatio: [0.49, 0.44, 0.41], ellA: 0.843, ellB: 0.80, ecy: 0, initYoff: 0, edgeCap: [0.085, 0.072] },\r\n heart: { W: 25.0, H: 23.6, single: [11, 11], stack: [12, 15], initRatio: [0.40, 0.36, 0.34], ellA: 0.73, ellB: 0.77, ecy: 1.04, initYoff: 1.7, edgeCap: [0.065, 0.055] }\r\n };\r\n /* ---- Tunable FACE placement on the stage (the only hand-set numbers). longPct = the\r\n locket's long dimension as % of the square preview; cx/cy = face center %; scale =\r\n global engraving size nudge; edgeY/initY = small %-nudges. Drag panel edits these. ---- */\r\n var TUNE_DEFAULTS = {\r\n oval_necklace: { longPct: 78, cx: 50, cy: 53, scale: 1, edgeY: 0, initY: 0 },\r\n oval_bracelet: { longPct: 84, cx: 50, cy: 52, scale: 1, edgeY: 0, initY: 0 },\r\n heart: { longPct: 80, cx: 50, cy: 52, scale: 1, edgeY: 0, initY: 0 }\r\n };\r\n // Per-variant TUNE overrides, keyed by variant title/color (e.g. \"Gold/Aurora\"). Filled from tuning.\r\n var GEO_OVERRIDES = {};\r\n\r\n var state = { layout: 'single', single: '', stacked: [''], initial: '', names: [''] };\r\n\r\n var root, inputMount, hiddenMount, previewImg, previewStage, previewCanvas, shapeMount;\r\n var variantMap = {}; // variantId -> { img, key }\r\n var runtimeGeo = {}; // variantKey -> live geo object (default+override, mutated by panel)\r\n\r\n /* ===================== variant / geometry ===================== */\r\n function currentVariantId() {\r\n var sel = document.querySelector('[name=\"id\"]');\r\n return sel ? String(sel.value) : null;\r\n }\r\n function currentVariantKey() {\r\n var vid = currentVariantId();\r\n return (vid && variantMap[vid] && variantMap[vid].key) || '_default';\r\n }\r\n function productType() {\r\n return (root && root.getAttribute('data-locket-product-type')) || 'oval_necklace';\r\n }\r\n // geo() = the (tunable) FACE placement for the current variant (default + per-variant override)\r\n function geo() {\r\n var k = currentVariantKey();\r\n if (!runtimeGeo[k]) {\r\n var base = TUNE_DEFAULTS[productType()] || TUNE_DEFAULTS.oval_necklace;\r\n var ov = GEO_OVERRIDES[k] || {};\r\n var merged = {};\r\n for (var p in base) { if (base.hasOwnProperty(p)) merged[p] = base[p]; }\r\n for (var q in ov) { if (ov.hasOwnProperty(q)) merged[q] = ov[q]; }\r\n runtimeGeo[k] = merged;\r\n }\r\n return runtimeGeo[k];\r\n }\r\n\r\n /* ---- text measurement (canvas) \u2014 used to fit/scale text exactly like FreeType does ---- */\r\n var _mctx;\r\n function measure(text, family, px) {\r\n if (!_mctx) _mctx = document.createElement('canvas').getContext('2d');\r\n _mctx.font = px + 'px ' + family;\r\n var m = _mctx.measureText(text || 'H');\r\n var asc = m.actualBoundingBoxAscent, desc = m.actualBoundingBoxDescent;\r\n if (typeof asc !== 'number') asc = px * 0.7;\r\n if (typeof desc !== 'number') desc = px * 0.2;\r\n return { w: m.width, asc: asc, desc: desc };\r\n }\r\n function capRatio(family) { return Math.max(0.4, measure('H', family, 100).asc / 100); }\r\n\r\n /* ---- map the Python's mm artboard (origin = locket center, y-up) onto the stage ---- */\r\n function face() {\r\n var pt = productType();\r\n var L = LOCKET[pt] || LOCKET.oval_necklace;\r\n var T = geo();\r\n var S = T.longPct / Math.max(L.W, L.H); // % of stage per mm (uniform; stage is square)\r\n var sw = (previewStage && previewStage.clientWidth) || 360;\r\n return {\r\n L: L, T: T, S: S, sw: sw,\r\n faceW: L.W * S, faceH: L.H * S, // % of stage\r\n cx: T.cx, cy: T.cy,\r\n mmToPx: function (mm) { return mm * S * sw / 100; },\r\n // (mx,my) in mm -> stage % { left, top }\r\n pt2: function (mx, my) { return { left: T.cx + mx * S, top: T.cy - my * S }; }\r\n };\r\n }\r\n\r\n /* ===================== font ===================== */\r\n function activeFont() {\r\n var btn = document.querySelector('.font-button.active');\r\n return (btn && btn.getAttribute('data-font')) || 'Alga';\r\n }\r\n\r\n /* ===================== backdrop (drawn shape vs photo) ===================== */\r\n function variantTint() {\r\n var k = (currentVariantKey() || '').toLowerCase();\r\n if (k.indexOf('rose') > -1) return 'rose';\r\n if (k.indexOf('silver') > -1 || k.indexOf('white gold') > -1 || k.indexOf('platinum') > -1 || k.indexOf('steel') > -1) return 'silver';\r\n return 'gold';\r\n }\r\n var TINTS = {\r\n gold: { a: '#f4e3b0', b: '#d6ab63', c: '#9c7330', stroke: '#856326', hi: '#fff7e0' },\r\n silver: { a: '#e6e9ec', b: '#969da6', c: '#646b73', stroke: '#52575d', hi: '#ffffff' },\r\n rose: { a: '#f7d9cb', b: '#e2a98f', c: '#b87959', stroke: '#9c6347', hi: '#fff1ea' }\r\n };\r\n function shapeSvg() {\r\n var t = TINTS[variantTint()] || TINTS.gold;\r\n var pt = productType();\r\n var F = face();\r\n var cx = F.cx, cy = F.cy, hw = F.faceW / 2, hh = F.faceH / 2;\r\n var body, hiEl = '';\r\n if (pt === 'heart') {\r\n // plump heart path (getBBox x13..87, y11..80 => W74 H69, centre 50,45.5) scaled to the face box\r\n var sx = F.faceW / 74, sy = F.faceH / 69, tx = cx - 50 * sx, ty = cy - 45.5 * sy;\r\n var sw = (1.2 / ((sx + sy) / 2)).toFixed(2);\r\n body = ''\r\n + '';\r\n } else {\r\n body = '';\r\n hiEl = '';\r\n }\r\n return '';\r\n }\r\n // Choose photo (only if a real close-up metafield image exists) else the drawn shape.\r\n function applyBackdrop() {\r\n var vid = currentVariantId();\r\n var entry = vid && variantMap[vid];\r\n var url = entry && entry.img;\r\n if (url) {\r\n root.classList.add('lke-mode-photo'); root.classList.remove('lke-mode-shape');\r\n if (previewImg && previewImg.getAttribute('src') !== url) {\r\n previewImg.addEventListener('load', renderPreview, { once: true });\r\n previewImg.setAttribute('src', url);\r\n }\r\n } else {\r\n root.classList.add('lke-mode-shape'); root.classList.remove('lke-mode-photo');\r\n if (shapeMount) shapeMount.innerHTML = shapeSvg();\r\n }\r\n }\r\n\r\n /* ===================== helpers ===================== */\r\n function el(tag, cls, attrs) {\r\n var n = document.createElement(tag);\r\n if (cls) n.className = cls;\r\n if (attrs) { for (var k in attrs) { if (attrs.hasOwnProperty(k)) n.setAttribute(k, attrs[k]); } }\r\n return n;\r\n }\r\n function sanitize(v) { return (v || '').replace(/[^\\p{L}\\p{N}\\p{P}\\p{Z}]/gu, ''); }\r\n\r\n function makeInput(backend, label, maxLen, value, onInput, onRemove) {\r\n var c = el('div', 'symbol-input-container no-override locket-engrave-field', { 'data-char-limit': maxLen, 'data-name': backend });\r\n var lab = el('label', 'symbol-dropdown-label'); lab.textContent = label;\r\n var inner = el('div', 'symbol-input-inner');\r\n var input = el('input', 'symbol-input', { type: 'text', maxlength: maxLen, value: value || '' });\r\n input.style.setProperty('font-family', activeFont(), 'important');\r\n var count = el('span', 'symbol-input-count');\r\n function upd() { count.textContent = (input.value || '').length + '/' + maxLen; }\r\n input.addEventListener('input', function () { input.value = sanitize(input.value); upd(); onInput(input.value); });\r\n upd();\r\n inner.appendChild(input); inner.appendChild(count);\r\n if (onRemove) {\r\n var rm = el('button', 'locket-engrave-remove-x', { type: 'button', 'aria-label': 'Remove ' + label, title: 'Remove' });\r\n rm.innerHTML = '×';\r\n rm.addEventListener('click', onRemove);\r\n inner.appendChild(rm);\r\n }\r\n c.appendChild(lab); c.appendChild(inner);\r\n return c;\r\n }\r\n\r\n function setHidden(backend, value) {\r\n var id = 'lke-hidden-' + backend.replace(/[^a-z0-9]/gi, '');\r\n var c = document.getElementById(id);\r\n if (!c) {\r\n c = el('div', 'symbol-input-container locket-engrave-hidden', { 'data-name': backend, id: id });\r\n c.style.display = 'none';\r\n c.appendChild(el('input', 'symbol-input', { type: 'hidden' }));\r\n hiddenMount.appendChild(c);\r\n }\r\n c.querySelector('.symbol-input').value = value;\r\n }\r\n function styleLabel(key) { for (var i = 0; i < STYLES.length; i++) { if (STYLES[i].key === key) return STYLES[i].label; } return key; }\r\n function syncHidden() {\r\n setHidden('_engraving_layout', state.layout);\r\n setHidden('Engraving Style', styleLabel(state.layout));\r\n setHidden('_locket_product_type', productType());\r\n }\r\n\r\n /* ===================== inputs ===================== */\r\n function renderInputs() {\r\n inputMount.innerHTML = '';\r\n if (state.layout === 'single') {\r\n inputMount.appendChild(makeInput('Line 1', 'Your text', SINGLE_MAXLEN, state.single, function (v) { state.single = v; renderPreview(); }));\r\n } else if (state.layout === 'stacked') {\r\n appendNameCount(state.stacked.length);\r\n state.stacked.forEach(function (val, i) {\r\n inputMount.appendChild(makeInput('Line ' + (i + 1), 'Name ' + (i + 1), NAME_MAXLEN, val,\r\n function (v) { state.stacked[i] = v; renderPreview(); },\r\n state.stacked.length > 1 ? function () { state.stacked.splice(i, 1); renderInputs(); renderPreview(); } : null));\r\n });\r\n appendNameAdder(state.stacked.length >= MAX_NAMES, function () { state.stacked.push(''); renderInputs(); renderPreview(); });\r\n } else {\r\n inputMount.appendChild(makeInput('Initial', 'Center Initial', INITIAL_MAXLEN, state.initial, function (v) { state.initial = v; renderPreview(); }));\r\n appendNameCount(state.names.length);\r\n state.names.forEach(function (val, i) {\r\n inputMount.appendChild(makeInput('Name ' + (i + 1), 'Name ' + (i + 1), NAME_MAXLEN, val,\r\n function (v) { state.names[i] = v; renderPreview(); },\r\n state.names.length > 1 ? function () { state.names.splice(i, 1); renderInputs(); renderPreview(); } : null));\r\n });\r\n appendNameAdder(state.names.length >= MAX_NAMES, function () { state.names.push(''); renderInputs(); renderPreview(); });\r\n }\r\n var f = activeFont();\r\n inputMount.querySelectorAll('.symbol-input').forEach(function (i) { i.style.setProperty('font-family', f, 'important'); });\r\n }\r\n\r\n function appendNameCount(n) {\r\n var c = el('div', 'locket-engrave-name-count');\r\n c.textContent = 'Add up to ' + MAX_NAMES + ' names \u00B7 ' + n + ' of ' + MAX_NAMES;\r\n inputMount.appendChild(c);\r\n }\r\n function appendNameAdder(disabled, onAdd) {\r\n var add = el('button', 'locket-engrave-add', { type: 'button' });\r\n add.textContent = '+ Add a name';\r\n add.disabled = !!disabled;\r\n add.addEventListener('click', onAdd);\r\n inputMount.appendChild(add);\r\n }\r\n\r\n /* ===================== style selector ===================== */\r\n // Icon outline follows the actual locket shape (oval for necklace/bracelet, heart for heart),\r\n // with the style depicted inside: single line / stacked lines / centre initial + edge \"names\".\r\n function styleIcon(key) {\r\n var pt = productType();\r\n var L = LOCKET[pt] || LOCKET.oval_necklace;\r\n var cx = 20, gcy = 20, rx, ry, gw, shape;\r\n\r\n if (pt === 'heart') {\r\n shape = '';\r\n rx = 8.5; ry = 8.5; gw = 6.4; gcy = 21; // heart's visual centre sits below the cleft (~y21), not 18\r\n } else {\r\n var lr = 14.3, sr = lr * Math.min(L.W, L.H) / Math.max(L.W, L.H);\r\n if (L.H >= L.W) { rx = sr; ry = lr; } else { rx = lr; ry = sr; }\r\n shape = '';\r\n gw = rx * 0.74;\r\n }\r\n\r\n var g = '';\r\n if (key === 'single') {\r\n g = '';\r\n } else if (key === 'stacked') {\r\n // three centered lines of varied length \u2014 reads as stacked names and follows the tapering shape.\r\n // On the heart, drop the group down off the cleft (and tighten a touch) so it sits centred.\r\n var scy = gcy + (pt === 'heart' ? 2.2 : 0), sp = (pt === 'heart' ? 4.0 : 4.4);\r\n [[-sp, 0.78], [0, 1.0], [sp, 0.6]].forEach(function (row) {\r\n var y = scy + row[0], hw = gw * row[1];\r\n g += '';\r\n });\r\n } else { // monogram: just the centre initial inside the locket outline\r\n // (curved names are illegible at icon size, so we keep it to the letter)\r\n var msize = (pt === 'heart' ? 11 : 13);\r\n g = 'M';\r\n }\r\n return shape + g;\r\n }\r\n function renderSelector(mount) {\r\n var wrap = el('div', 'locket-engrave-styles', { role: 'radiogroup', 'aria-label': 'Engraving style' });\r\n STYLES.forEach(function (s) {\r\n var b = el('button', 'locket-engrave-style' + (s.key === state.layout ? ' is-active' : ''), { type: 'button', role: 'radio', 'data-style': s.key, 'aria-checked': s.key === state.layout ? 'true' : 'false' });\r\n b.innerHTML = ''\r\n + '' + s.label + '';\r\n b.addEventListener('click', function () { selectStyle(s.key); });\r\n wrap.appendChild(b);\r\n });\r\n mount.appendChild(wrap);\r\n mount.appendChild(el('div', 'locket-engrave-help'));\r\n updateHelp();\r\n }\r\n function updateHelp() {\r\n var help = root.querySelector('.locket-engrave-help');\r\n if (!help) return;\r\n for (var i = 0; i < STYLES.length; i++) { if (STYLES[i].key === state.layout) { help.textContent = STYLES[i].hint; return; } }\r\n }\r\n function selectStyle(key) {\r\n if (state.layout === key) return;\r\n state.layout = key;\r\n root.querySelectorAll('.locket-engrave-style').forEach(function (b) {\r\n var on = b.getAttribute('data-style') === key;\r\n b.classList.toggle('is-active', on); b.setAttribute('aria-checked', on ? 'true' : 'false');\r\n });\r\n updateHelp();\r\n syncHidden(); renderInputs(); renderPreview();\r\n if (window.__lke && window.__lke._onChange) window.__lke._onChange();\r\n }\r\n\r\n /* ===================== curved text on a TRUE ELLIPSE (matches _add_edge_names) =====================\r\n Places each glyph along the ellipse (semi-axes aPx,bPx) centered at the bottom, rotated to the\r\n tangent, spaced by arc length. No global scale, so glyphs are NOT distorted. y-down canvas coords. */\r\n function ellipseText(canvas, text, aPx, bPx, fontPx, fName, color, kerning) {\r\n var dpr = window.devicePixelRatio || 1;\r\n var a = aPx * dpr, b = bPx * dpr, F = fontPx * dpr;\r\n kerning = (kerning || 0) * dpr;\r\n var pad = F * 1.8;\r\n var W = Math.ceil(2 * a + pad), H = Math.ceil(2 * b + pad);\r\n canvas.width = W; canvas.height = H;\r\n var ctx = canvas.getContext('2d');\r\n ctx.fillStyle = color || '#f8f5ef';\r\n ctx.font = F + 'px ' + fName;\r\n ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\r\n var cx = W / 2, cy = H / 2;\r\n\r\n // arc-length table over t in [0,2pi)\r\n var N = 2000, dt = 2 * Math.PI / N;\r\n var cum = new Float64Array(N + 1); cum[0] = 0;\r\n for (var i = 1; i <= N; i++) {\r\n var tt = (i - 1) * dt, dx = -a * Math.sin(tt), dy = b * Math.cos(tt);\r\n cum[i] = cum[i - 1] + Math.sqrt(dx * dx + dy * dy) * dt;\r\n }\r\n var total = cum[N];\r\n function arcToT(s) {\r\n s = ((s % total) + total) % total;\r\n var lo = 0, hi = N;\r\n while (lo < hi) { var mid = (lo + hi) >> 1; if (cum[mid] < s) lo = mid + 1; else hi = mid; }\r\n var idx = Math.max(1, lo);\r\n var f = (s - cum[idx - 1]) / ((cum[idx] - cum[idx - 1]) || 1);\r\n return (idx - 1) * dt + f * dt;\r\n }\r\n var bottomArc = cum[Math.round((Math.PI / 2) / dt)]; // t=PI/2 -> bottom (y = cy + b)\r\n\r\n var chars = text.split('');\r\n var widths = chars.map(function (c) { return ctx.measureText(c).width; });\r\n var totalW = widths.reduce(function (s, w) { return s + w; }, 0) + kerning * Math.max(0, chars.length - 1);\r\n\r\n // read left->right along the bottom: leftmost char at the largest arc (t>PI/2), stepping down\r\n var acc = bottomArc + totalW / 2;\r\n for (var k = 0; k < chars.length; k++) {\r\n var centerArc = acc - widths[k] / 2;\r\n var t = arcToT(centerArc);\r\n var px = cx + a * Math.cos(t), py = cy + b * Math.sin(t);\r\n var ang = Math.atan2(b * Math.cos(t), -a * Math.sin(t)); // tangent direction (increasing t)\r\n ctx.save();\r\n ctx.translate(px, py);\r\n ctx.rotate(ang - Math.PI); // upright at the bottom (t=PI/2 -> rotation 0)\r\n ctx.fillText(chars[k], 0, 0);\r\n ctx.restore();\r\n acc -= widths[k] + kerning;\r\n }\r\n }\r\n\r\n /* ===================== preview ===================== */\r\n function clearStage() {\r\n previewStage.querySelectorAll('.lke-line, .lke-initial').forEach(function (n) { n.remove(); });\r\n var c = previewCanvas.getContext('2d');\r\n c.clearRect(0, 0, previewCanvas.width, previewCanvas.height);\r\n previewCanvas.style.display = 'none';\r\n }\r\n function addLine(text, leftPct, topPct, fontPx, cls) {\r\n var d = el('div', cls || 'lke-line');\r\n d.textContent = text;\r\n d.style.fontFamily = activeFont();\r\n d.style.left = leftPct + '%';\r\n d.style.top = topPct + '%';\r\n d.style.fontSize = fontPx + 'px';\r\n previewStage.appendChild(d);\r\n return d;\r\n }\r\n // Draw one glyph/word on its own canvas, centred by its *ink* bounding box (not the layout box) so\r\n // fonts with big/asymmetric side-bearings or swashes (e.g. Magnum) still read centred on the locket.\r\n function addCanvasText(text, leftPct, topPct, fontPx, weight) {\r\n var dpr = window.devicePixelRatio || 1;\r\n var fontStr = (weight ? weight + ' ' : '') + (fontPx * dpr) + 'px ' + activeFont();\r\n var c = el('canvas', 'lke-line');\r\n var ctx = c.getContext('2d');\r\n ctx.font = fontStr; ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic';\r\n var m = ctx.measureText(text);\r\n var lft = m.actualBoundingBoxLeft, rgt = m.actualBoundingBoxRight;\r\n var asc = m.actualBoundingBoxAscent, dsc = m.actualBoundingBoxDescent;\r\n var pad = Math.ceil(fontPx * dpr * 0.14);\r\n var W = Math.max(1, Math.ceil(lft + rgt + pad * 2)), H = Math.max(1, Math.ceil(asc + dsc + pad * 2));\r\n c.width = W; c.height = H;\r\n ctx.font = fontStr; ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic';\r\n ctx.fillStyle = '#f8f5ef';\r\n ctx.fillText(text, pad + lft, pad + asc); // ink top-left at (pad,pad) => ink centred in the canvas\r\n c.style.cssText = 'position:absolute;left:' + leftPct + '%;top:' + topPct + '%;width:' + (W / dpr) +\r\n 'px;height:' + (H / dpr) + 'px;transform:translate(-50%,-50%);pointer-events:none;z-index:6;';\r\n previewStage.appendChild(c);\r\n return c;\r\n }\r\n\r\n function renderPreview() {\r\n if (!previewStage) return;\r\n clearStage();\r\n var F = face(), L = F.L, T = F.T, f = activeFont();\r\n var nn = (state.names || []).filter(function (n) { return n && n.trim(); }).length;\r\n\r\n if (state.layout === 'single') {\r\n // generate_locket_single_line_dxf: scale text to fill the 11x11 box (fit larger dim), centered.\r\n var txt = state.single;\r\n if (txt) {\r\n var boxW = F.mmToPx(L.single[0]), boxH = F.mmToPx(L.single[1]);\r\n var m = measure(txt, f, 100), th = m.asc + m.desc;\r\n var s = Math.min(boxW / Math.max(1, m.w), boxH / Math.max(1, th));\r\n addCanvasText(txt, T.cx, T.cy, 100 * s * T.scale);\r\n }\r\n\r\n } else if (state.layout === 'stacked') {\r\n // stacked names: line pitch is the DXF-faithful 1.35*cap, but never tighter than the actual\r\n // glyph height (asc+desc, incl. script flourishes) + a small gap, so lines never overlap.\r\n var names = state.stacked.filter(function (n) { return n && n.trim(); });\r\n if (names.length) {\r\n var bw = F.mmToPx(L.stack[0]), bh = F.mmToPx(L.stack[1]);\r\n var capHRatio = measure('H', f, 100).asc / 100; // NB: don't shadow the module-level capRatio() fn\r\n var fullRatio = capHRatio, maxW = 1;\r\n names.forEach(function (n) {\r\n var m = measure(n, f, 100);\r\n fullRatio = Math.max(fullRatio, (m.asc + m.desc) / 100);\r\n maxW = Math.max(maxW, m.w);\r\n });\r\n var effN = Math.max(2, names.length);\r\n var pitchRatio = Math.max(capHRatio * LINE_SPACING_MULT, fullRatio * 1.06); // 6% gap floor\r\n var fontH = bh / ((effN - 1) * pitchRatio + fullRatio); // fit the stack in the box\r\n var fontW = 100 * (bw / maxW);\r\n var fontPx = Math.min(fontH, fontW) * T.scale;\r\n var lineH = fontPx * pitchRatio;\r\n var cyPx = T.cy * F.sw / 100;\r\n if (productType() === 'heart' && names.length > 2) {\r\n // the heart tapers to a point, so a tall stack centred on the geometric centre reads\r\n // top-heavy (the empty lower taper looks bigger than the equal gap in the wide lobes).\r\n // Bias it down, scaling with the name count so short stacks stay centred.\r\n cyPx += (names.length - 2) * 0.009 * F.sw;\r\n }\r\n names.forEach(function (n, i) {\r\n var centerPx = cyPx + (i - (names.length - 1) / 2) * lineH;\r\n addLine(n, T.cx, centerPx / F.sw * 100, fontPx); // DOM: keep stacked baselines aligned across names\r\n });\r\n }\r\n\r\n } else { // monogram \u2014 generate_locket_dxf: center initial + edge names on the 0.79 ellipse bottom\r\n if (state.initial) {\r\n var idx = nn <= 2 ? 0 : (nn <= 4 ? 1 : 2);\r\n var targetPx = F.mmToPx(Math.min(L.W, L.H) * L.initRatio[idx]); // desired glyph height\r\n var gm = measure(state.initial, f, 100), ghRatio = (gm.asc + gm.desc) / 100;\r\n var iFontPx = targetPx / Math.max(0.4, ghRatio) * T.scale;\r\n var ip = F.pt2(0, L.initYoff);\r\n addCanvasText(state.initial, ip.left, ip.top + T.initY, iFontPx, '500');\r\n }\r\n var edge = state.names.filter(function (n) { return n && n.trim(); }).join(' ');\r\n if (edge) {\r\n previewCanvas.style.display = 'block';\r\n var aPx = F.mmToPx((L.W / 2) * L.ellA); // edge ellipse semi-axis x (mm->px)\r\n var bPx = F.mmToPx((L.H / 2) * L.ellB); // semi-axis y\r\n var capPx = F.mmToPx(L.H * L.edgeCap[nn >= 5 ? 1 : 0]);\r\n var eFontPx = capPx / capRatio(f) * T.scale;\r\n // true-ellipse text \u2014 undistorted glyphs along the actual edge ellipse, centered at the bottom\r\n ellipseText(previewCanvas, edge, aPx, bPx, eFontPx, f, '#f8f5ef', 0);\r\n var dpr = window.devicePixelRatio || 1;\r\n var ec = F.pt2(0, L.ecy);\r\n previewCanvas.style.width = (previewCanvas.width / dpr) + 'px';\r\n previewCanvas.style.height = (previewCanvas.height / dpr) + 'px';\r\n previewCanvas.style.left = ec.left + '%';\r\n previewCanvas.style.top = (ec.top + T.edgeY) + '%';\r\n previewCanvas.style.transform = 'translate(-50%, -50%)';\r\n }\r\n }\r\n if (window.__lke && window.__lke._afterRender) window.__lke._afterRender();\r\n }\r\n\r\n /* ===================== full 3-step configurator =====================\r\n The redesign wraps the metal picker, engraving controls and photo upload into three\r\n numbered step cards with a sticky Add-to-Cart bar. The metal/colour selector, font\r\n selector and photo upload are theme-managed elements rendered elsewhere in the form;\r\n we RELOCATE the live DOM nodes (keeping their event handlers + the ATC inside