elements inside the container and\n // reuse them across frames to avoid DOM churn (max ~8 visible at once).\n\n const _SNAP_T = 4; // snap threshold in px (snap when within 4px, jump exactly onto the line)\n const _GUIDE_HIDE_MS = 500; // guides stay visible 500 ms after drag stops\n\n // Where a snap overlay must LIVE to be able to draw over both pages.\n //\n // Raising the z-index was not enough, and the reason is worth writing down. A new\n // item's z is floored at Date.now(), which CSS clamps to the 32-bit maximum, so the\n // overlays and the items end up on the SAME z-index and the winner is decided by DOM\n // order. Parented inside the left page, a guide comes before every item in the right\n // page, so it always lost there - which is exactly what it looked like: fine over the\n // page being dragged on, behind the item it was measuring against.\n //\n // Hosting the overlay on the spread row fixes it structurally: a child appended to the\n // row comes after BOTH page divs, so it wins the tie over either page, and it beats a\n // lifted item (z 9000, also a child of the row) on z-index outright. It also means a\n // horizontal guide simply spans the row - no negative-inset trickery.\n //\n // Returns the host plus the page's offset inside it, which every caller adds to its\n // page-space coordinates. Falls back to the container (cover, page 0, previews) where\n // there is no spread row, and the offsets are then zero and nothing changes. (2026-09-18)\n function _dmbOverlayHost(container) {\n try {\n const pageEl = container && container.parentElement;\n const row = pageEl && pageEl.parentElement;\n if (row && row.dataset && row.dataset.spreadRow) {\n return { host: row, ox: pageEl.offsetLeft || 0, oy: pageEl.offsetTop || 0 };\n }\n } catch (e) {}\n return { host: container, ox: 0, oy: 0 };\n }\n\n function _dmbGetGuidePool(container) {\n const host = _dmbOverlayHost(container).host;\n if (!host._snapPool) host._snapPool = [];\n return host._snapPool;\n }\n\n // axis: \"h\" (horizontal = constant Y) or \"v\" (vertical = constant X)\n // isCenter: true \u2192 dashed line (centre-to-centre snap), false \u2192 solid (edge snap)\n function _dmbAcquireGuide(container, axis, isCenter) {\n const pool = _dmbGetGuidePool(container);\n let el = pool.find(g => g._axis === axis && g._inUse === false);\n if (!el) {\n el = document.createElement(\"div\");\n el._axis = axis;\n el.style.pointerEvents = \"none\";\n el.style.position = \"absolute\";\n el.style.zIndex = \"2147483647\"; // 32-bit max: items clamp here too, DOM order wins (see note)\n el.style.opacity = \"0\";\n el.style.transition = \"opacity 0.08s ease\";\n if (axis === \"h\") {\n el.style.left = \"0\"; el.style.right = \"0\"; el.style.height = \"2px\";\n } else {\n el.style.top = \"0\"; el.style.bottom = \"0\"; el.style.width = \"2px\";\n }\n // On the spread row, left:0/right:0 already spans BOTH pages, and top:0/bottom:0\n // spans the full sheet height - the row is exactly the spread.\n _dmbOverlayHost(container).host.appendChild(el);\n pool.push(el);\n }\n el._inUse = true;\n // Re-apply class every acquisition so dashed/solid toggles correctly on reuse\n const base = axis === \"h\" ? \"dmb-snap-guide-h dmb-snap-guide-dynamic\" : \"dmb-snap-guide-v dmb-snap-guide-dynamic\";\n el.className = isCenter ? base + \" dmb-snap-guide-center\" : base;\n // Re-assert the spans on every acquisition: the pool hands the same element back to\n // different drags, and an earlier attempt at this problem used to write negative\n // insets here.\n if (axis === \"h\") { el.style.left = \"0\"; el.style.right = \"0\"; }\n else { el.style.top = \"0\"; el.style.bottom = \"0\"; }\n return el;\n }\n\n function _dmbReleaseAllGuides(container) {\n const pool = _dmbGetGuidePool(container);\n pool.forEach(g => {\n g._inUse = false;\n g.style.opacity = \"0\";\n });\n }\n\n // Show alignment guides + snap during a \"lifted\" drag (page item moved to spread-row).\n // During lift the item is positioned in spread-row coords; snap needs page-body coords.\n // Returns { dx, dy } \u2014 the snap delta to add to the lifted position.\n function _dmbLiftSnap(spreadLeft, spreadTop, objW, objH, objId, liftState, gH, gV, targetType, pageNumber) {\n if (!liftState || !liftState.origParent || !liftState.pagesRow) return { dx: 0, dy: 0 };\n // Cache the page\u2194spread-row offset once per drag \u2014 the rects don't move while\n // dragging, so re-reading them every move forced two needless reflows.\n if (!liftState._snapOff) {\n // Divide the screen-px offset by the canvas zoom so it's in the SAME model\n // units as the dragged coords (sSox etc. are already /_Z). Without this the\n // snapped position drifts by a constant amount whenever zoom \u2260 100%.\n const _Z = (typeof _nodeOnScreenScale === \"function\" ? (_nodeOnScreenScale(liftState.origParent) || 1) : 1);\n const _pR = liftState.pagesRow.getBoundingClientRect();\n const _pb = liftState.origParent.getBoundingClientRect();\n liftState._snapOff = { x: (_pb.left - _pR.left) / _Z, y: (_pb.top - _pR.top) / _Z };\n }\n const _offX = liftState._snapOff.x;\n const _offY = liftState._snapOff.y;\n const _so = { id: objId, x: spreadLeft - _offX, y: spreadTop - _offY, w: objW, h: objH };\n dmbCheckSnap(_so, liftState.origParent, gH, gV, { targetType, pageNumber });\n return { dx: _so.x - (spreadLeft - _offX), dy: _so.y - (spreadTop - _offY) };\n }\n\n // Cache of the snap siblings for the CURRENT drag. dmbCheckSnap runs on every\n // pointermove and measuring each text sibling's DOM box (scrollWidth/offsetWidth/\n // offsetHeight via getElementById) forces a layout reflow per sibling per move \u2014\n // a major touch-lag source. Siblings don't change during a drag, so we cache the\n // computed list and reuse it; it's invalidated whenever a change is committed\n // (pushUndoState) so the next drag re-measures fresh.\n let _dmbSibCache = null; // { key, list }\n let _dmbSnapGen = 0; // bumped on every committed change; used to cache container size per drag\n function _dmbInvalidateSibCache() { _dmbSibCache = null; _dmbSnapGen++; }\n function _dmbGetSiblingObjects(obj, targetType, pageNumber) {\n const _ck = targetType + \":\" + (pageNumber == null ? \"_\" : pageNumber) + \":\" + (obj && obj.id);\n if (_dmbSibCache && _dmbSibCache.key === _ck) return _dmbSibCache.list;\n\n let arr;\n if (targetType === \"cover\") {\n arr = editor.coverObjects || [];\n } else if (pageNumber != null) {\n arr = ensurePageObjects(pageNumber);\n // The two pages of a spread are ONE sheet of paper to the customer, so an item on\n // the FACING page has to behave like a sibling: same top edge, same centre line,\n // same equal-spacing run. Snapping only ever saw the owner page, so two frames a\n // few pixels apart across the fold could not be lined up at all.\n //\n // Bring the partner's objects into THIS page's coordinate space by shifting them\n // one page width; everything downstream - the five reference edges, the centre\n // lines, the equal-spacing bars, the mm labels - then works unchanged. (2026-09-18)\n try {\n const _pn = Number(pageNumber);\n if (_pn >= 1) {\n const _isLeftPg = (_pn % 2 === 1); // spreads are (2k+1, 2k+2)\n const _sib = _isLeftPg ? _pn + 1 : _pn - 1;\n if (_sib >= 1 && _sib <= (editor.totalPages || 0)) {\n const _dx = _isLeftPg ? getPageDims().w : -getPageDims().w;\n const _sibArr = ensurePageObjects(_sib) || [];\n arr = arr.concat(_sibArr.map(function (o) {\n if (!o) return o;\n // A shifted COPY: the real object must not move just because something on\n // the other page is being dragged near it.\n const c = Object.assign({}, o);\n if (c.type === \"text\") c.left = (parseFloat(c.left || \"0\") + _dx) + \"px\";\n else c.x = (c.x || 0) + _dx;\n return c;\n }));\n }\n }\n } catch (e) {}\n } else {\n _dmbSibCache = { key: _ck, list: [] };\n return _dmbSibCache.list;\n }\n // Normalise text objects (they use left/top strings instead of x/y numbers)\n // so the snap engine can treat every sibling uniformly. Text is inset by its\n // padding (2px 6px) so its snap edges are the GLYPH edges (first/last letter),\n // matching the dragged-text behaviour \u2014 text-to-text aligns letter-to-letter.\n const _TX_PL = 6, _TX_PT = 2;\n const list = arr\n .filter(o => o && o.id !== obj.id)\n .map(o => {\n if (o.type !== \"text\") return o;\n const el = document.getElementById(o.id);\n const boxW = el ? Math.max(el.scrollWidth, el.offsetWidth) : 132;\n const boxH = el ? (el.offsetHeight || 34) : 34;\n return {\n ...o,\n x: parseFloat(o.left || \"0\") + _TX_PL,\n y: parseFloat(o.top || \"0\") + _TX_PT,\n w: Math.max(0, boxW - _TX_PL * 2),\n h: Math.max(0, boxH - _TX_PT * 2),\n };\n })\n .filter(o => (o.w || 0) > 4 && (o.h || 0) > 4);\n _dmbSibCache = { key: _ck, list };\n return list;\n }\n\n // \u2500\u2500 Smart-guide extras: mm conversion + pooled labels & spacing bars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // Model-px \u2192 millimetres for the surface being edited, so guide labels show the\n // REAL printed distance (this is a print product; mm is the meaningful unit).\n function _dmbMmPerPx(container, targetType) {\n try {\n const ls = dmbIsLandscape();\n if (targetType === \"cover\") {\n const wmm = window.DMB_CARD_MODE ? (ls ? 178 : 127) : (ls ? 297 : 210);\n return wmm / 300; // 300 model-px == one cover face\n }\n let wmm;\n if (window.DMB_CARD_MODE) wmm = ls ? 178 : 127;\n else if (editor && editor.bookSize === \"A5\") wmm = ls ? 210 : 148;\n else wmm = ls ? 297 : 210;\n const px = (container && container.offsetWidth) || 270;\n return wmm / px;\n } catch (e) { return 210 / 270; }\n }\n // Format a model-px-derived millimetre distance as CENTIMETRES with NO unit suffix\n // (e.g. 10 mm \u2192 \"1\", 4 mm \u2192 \"0.4\", 15 mm \u2192 \"1.5\").\n function _dmbFmtCm(mm) {\n const v = Math.round((mm / 10) * 10) / 10;\n return v === Math.round(v) ? String(Math.round(v)) : v.toFixed(1);\n }\n\n // mm-distance chips \u2014 pooled per container, reused across frames (like the guide lines).\n function _dmbAcquireLabel(container) {\n const host = _dmbOverlayHost(container).host;\n if (!host._snapLabels) host._snapLabels = [];\n let el = host._snapLabels.find(l => l._inUse === false);\n if (!el) {\n el = document.createElement(\"div\");\n el.className = \"dmb-snap-label\";\n el.style.position = \"absolute\";\n el.style.zIndex = \"2147483647\"; // 32-bit max; acquired last, so the chips stay on top\n el.style.pointerEvents = \"none\";\n el.style.opacity = \"0\";\n host.appendChild(el);\n host._snapLabels.push(el);\n }\n el._inUse = true;\n el.className = \"dmb-snap-label\";\n return el;\n }\n // Spacing bars \u2014 the coloured line drawn along a gap. axis \"x\" = horizontal gap.\n function _dmbAcquireSpace(container, axis) {\n const host = _dmbOverlayHost(container).host;\n if (!host._snapSpaces) host._snapSpaces = [];\n let el = host._snapSpaces.find(s => s._inUse === false && s._axis === axis);\n if (!el) {\n el = document.createElement(\"div\");\n el._axis = axis;\n el.style.position = \"absolute\";\n el.style.zIndex = \"2147483647\"; // 32-bit max; acquired after the guides, so it sits above them\n el.style.pointerEvents = \"none\";\n el.style.opacity = \"0\";\n host.appendChild(el);\n host._snapSpaces.push(el);\n }\n el._inUse = true;\n el.className = \"dmb-snap-space dmb-snap-space-\" + axis;\n return el;\n }\n function _dmbReleaseExtras(container) {\n const host = _dmbOverlayHost(container).host;\n (host._snapLabels || []).forEach(l => { l._inUse = false; l.style.opacity = \"0\"; });\n (host._snapSpaces || []).forEach(s => { s._inUse = false; s.style.opacity = \"0\"; });\n }\n // Draw one spacing bar + mm chip along `axis` from a\u2192b at perpendicular offset `perp`.\n // `equal` renders it in the \"matched spacing\" highlight colour.\n function _dmbDrawSpace(container, axis, a, b, perp, mmpp, equal) {\n const len = b - a;\n if (len < 1) return;\n const bar = _dmbAcquireSpace(container, axis);\n if (equal) bar.className += \" dmb-snap-space-eq\";\n // a/b/perp arrive in PAGE space; the bar now lives on the spread row, so shift by the\n // page's offset inside it. Zero everywhere there is no row (cover, page 0, preview).\n const { ox: _sox, oy: _soy } = _dmbOverlayHost(container);\n if (axis === \"x\") {\n bar.style.left = (a + _sox) + \"px\"; bar.style.width = len + \"px\";\n bar.style.top = (perp + _soy) + \"px\"; bar.style.height = \"\";\n } else {\n bar.style.top = (a + _soy) + \"px\"; bar.style.height = len + \"px\";\n bar.style.left = (perp + _sox) + \"px\"; bar.style.width = \"\";\n }\n bar.style.opacity = \"1\";\n const lab = _dmbAcquireLabel(container);\n if (equal) lab.className += \" dmb-snap-label-eq\";\n lab.textContent = _dmbFmtCm(len * mmpp);\n const mid = (a + b) / 2;\n if (axis === \"x\") { lab.style.left = (mid + _sox) + \"px\"; lab.style.top = (perp + _soy) + \"px\"; lab.style.transform = \"translate(-50%,-135%)\"; }\n else { lab.style.left = (perp + _sox) + \"px\"; lab.style.top = (mid + _soy) + \"px\"; lab.style.transform = \"translate(-50%,-50%)\"; }\n lab.style.opacity = \"1\";\n }\n\n // _noSnap = true \u2192 render the guides/labels for the object's CURRENT position but\n // do NOT move it (used by arrow-key nudging, which must stay pixel-exact). In that\n // mode a guide only shows when the object is already essentially on it (\u22640.75px).\n function dmbCheckSnap(obj, container, gH, gV, _meta, _noSnap) {\n // _meta = { targetType, pageNumber } \u2014 optional; when absent falls back to container-centre only\n // Cache the container size per drag (it doesn't change mid-drag) to avoid an\n // offsetWidth/Height reflow every move. Invalidated via _dmbSnapGen on commits.\n let cW, cH;\n if (container._dmbSizeGen === _dmbSnapGen && container._dmbCW) {\n cW = container._dmbCW; cH = container._dmbCH;\n } else {\n cW = container.offsetWidth || 270;\n cH = container.offsetHeight || 338;\n container._dmbCW = cW; container._dmbCH = cH; container._dmbSizeGen = _dmbSnapGen;\n }\n\n // Dragged object edges\n const dL = obj.x, dR = obj.x + obj.w, dCx = obj.x + obj.w / 2;\n const dT = obj.y, dB = obj.y + obj.h, dCy = obj.y + obj.h / 2;\n\n // Collect snap candidates: { axis:\"x\"|\"y\", objEdge, refEdge }\n const snapsX = [];\n const snapsY = [];\n\n // Container vertical centre (Y mid-point \u2014 same for all targets)\n snapsY.push({ ref: cH / 2, edges: [dCy], label: \"cc\" });\n\n // Container edges (top=0, bottom=cH)\n snapsY.push({ ref: 0, edges: [dT], label: \"ce\" });\n snapsY.push({ ref: cH, edges: [dB], label: \"ce\" });\n\n // Horizontal snap targets depend on target type\n const targetType = _meta?.targetType;\n const pageNumber = _meta?.pageNumber;\n\n if (targetType === \"cover\") {\n // Cover: snap to each zone's centre and edges\n const _magFX = window.DMB_MAGAZINE_MODE ? COVER_BACK_W : COVER_FRONT_X;\n // Back zone: 0 \u2192 COVER_BACK_W\n snapsX.push({ ref: COVER_BACK_W / 2, edges: [dCx], label: \"cc\" });\n snapsX.push({ ref: 0, edges: [dL], label: \"ce\" });\n snapsX.push({ ref: COVER_BACK_W, edges: [dR], label: \"ce\" });\n // Front zone: _magFX \u2192 _magFX + 300\n snapsX.push({ ref: _magFX + 150, edges: [dCx], label: \"cc\" });\n snapsX.push({ ref: _magFX, edges: [dL], label: \"ce\" });\n snapsX.push({ ref: _magFX + 300, edges: [dR], label: \"ce\" });\n // Spine zone (books only)\n if (!window.DMB_MAGAZINE_MODE && COVER_SPINE_W > 0) {\n snapsX.push({ ref: COVER_BACK_W + COVER_SPINE_W / 2, edges: [dCx], label: \"cc\" });\n snapsX.push({ ref: COVER_BACK_W, edges: [dL], label: \"ce\" });\n snapsX.push({ ref: COVER_BACK_W + COVER_SPINE_W, edges: [dR], label: \"ce\" });\n }\n } else {\n // Page objects: snap to container centre and edges\n snapsX.push({ ref: cW / 2, edges: [dCx], label: \"cc\" });\n snapsX.push({ ref: 0, edges: [dL], label: \"ce\" });\n snapsX.push({ ref: cW, edges: [dR], label: \"ce\" });\n }\n\n // Sibling object edges (alignment candidates)\n const siblings = (targetType != null) ? _dmbGetSiblingObjects(obj, targetType, pageNumber) : [];\n\n for (const sib of siblings) {\n const sL = sib.x, sR = sib.x + sib.w, sCx = sib.x + sib.w / 2;\n const sT = sib.y, sB = sib.y + sib.h, sCy = sib.y + sib.h / 2;\n snapsX.push({ ref: sL, edges: [dL, dR], label: \"obj\" });\n snapsX.push({ ref: sR, edges: [dL, dR], label: \"obj\" });\n snapsX.push({ ref: sCx, edges: [dCx], label: \"cc\" }); // centre\u2192dashed\n snapsY.push({ ref: sT, edges: [dT, dB], label: \"obj\" });\n snapsY.push({ ref: sB, edges: [dT, dB], label: \"obj\" });\n snapsY.push({ ref: sCy, edges: [dCy], label: \"cc\" }); // centre\u2192dashed\n }\n\n // Best ALIGNMENT snap per axis\n let bestX = null, bestXDist = _SNAP_T + 1;\n for (const s of snapsX) for (const e of s.edges) {\n const d = Math.abs(e - s.ref);\n if (d < bestXDist) { bestXDist = d; bestX = { ref: s.ref, edge: e, delta: s.ref - e, kind: s.label }; }\n }\n let bestY = null, bestYDist = _SNAP_T + 1;\n for (const s of snapsY) for (const e of s.edges) {\n const d = Math.abs(e - s.ref);\n if (d < bestYDist) { bestYDist = d; bestY = { ref: s.ref, edge: e, delta: s.ref - e, kind: s.label }; }\n }\n\n // \u2500\u2500 Distribution / equal-spacing snap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // Look for a target position that makes the gap to a neighbour EQUAL to an\n // already-existing gap (centre equally between two items, or continue a chain\n // with the same spacing). Chosen only when it's closer than the alignment snap.\n const _ov = (a1, a2, b1, b2) => Math.min(a2, b2) - Math.max(a1, b1);\n // Every adjacent pair of perpendicularly-overlapping siblings \u2192 a reference gap\n // {G, a, b, perp, axis}. Collected for BOTH axes so the dragged item can match a\n // spacing that exists ANYWHERE on the spread, horizontal OR vertical.\n function _collectRefGaps(sibs, axis) {\n const out = [];\n for (const s of sibs) {\n let nr = null;\n for (const t of sibs) {\n if (t === s) continue;\n if (t.e1 >= s.e2 - 0.5 && _ov(s.p1, s.p2, t.p1, t.p2) > 0) { if (!nr || t.e1 < nr.e1) nr = t; }\n }\n if (nr) { const G = nr.e1 - s.e2; if (G > 0.5) { const pa = Math.max(s.p1, nr.p1), pb = Math.min(s.p2, nr.p2); out.push({ G, a: s.e2, b: nr.e1, perp: (pa + pb) / 2, axis }); } }\n }\n return out;\n }\n // Solve one axis. `mainAxis` = \"x\" or \"y\". `sibs` are on that axis; `refGaps` is the\n // COMBINED gap list from both axes (so an X move can match a Y spacing and vice versa).\n function _distCand(mainAxis, aStart, aEnd, aW, dPerp, sibs, refGaps) {\n let L = null, R = null;\n for (const s of sibs) {\n if (_ov(dPerp.p1, dPerp.p2, s.p1, s.p2) <= 0) continue;\n if (s.e2 <= aStart + 0.5) { if (!L || s.e2 > L.e2) L = s; }\n else if (s.e1 >= aEnd - 0.5) { if (!R || s.e1 < R.e1) R = s; }\n }\n const dMid = (dPerp.p1 + dPerp.p2) / 2;\n const cands = [];\n // (a) centre EQUALLY between the left & right neighbour on this axis\n if (L && R && (R.e1 - L.e2 - aW) >= 0) {\n const target = (L.e2 + R.e1 - aW) / 2;\n cands.push({ target, gaps: [{ axis: mainAxis, a: L.e2, b: target, perp: dMid }, { axis: mainAxis, a: target + aW, b: R.e1, perp: dMid }] });\n }\n // (b) match ANY reference gap (either axis): place the item that same distance\n // from its nearest neighbour, and highlight BOTH the item's gap and the\n // original reference gap wherever it lives.\n for (const rg of refGaps) {\n if (L) { const target = L.e2 + rg.G; cands.push({ target, gaps: [{ axis: mainAxis, a: L.e2, b: target, perp: dMid }, { axis: rg.axis, a: rg.a, b: rg.b, perp: rg.perp }] }); }\n if (R) { const target = R.e1 - aW - rg.G; cands.push({ target, gaps: [{ axis: mainAxis, a: target + aW, b: R.e1, perp: dMid }, { axis: rg.axis, a: rg.a, b: rg.b, perp: rg.perp }] }); }\n }\n let best = null, bestD = _SNAP_T + 1;\n for (const c of cands) { const d = Math.abs(c.target - aStart); if (d < bestD) { bestD = d; best = c; } }\n return best ? { target: best.target, gaps: best.gaps, dist: bestD } : null;\n }\n\n let distX = null, distY = null;\n if (targetType != null && siblings.length) {\n const sibX = siblings.map(s => ({ e1: s.x, e2: s.x + s.w, p1: s.y, p2: s.y + s.h }));\n const sibY = siblings.map(s => ({ e1: s.y, e2: s.y + s.h, p1: s.x, p2: s.x + s.w }));\n const refGaps = _collectRefGaps(sibX, \"x\").concat(_collectRefGaps(sibY, \"y\"));\n distX = _distCand(\"x\", dL, dR, obj.w, { p1: dT, p2: dB }, sibX, refGaps);\n distY = _distCand(\"y\", dT, dB, obj.h, { p1: dL, p2: dR }, sibY, refGaps);\n }\n\n // Apply the closest of {alignment, distribution} per axis. In _noSnap (arrow-key)\n // mode nothing moves and a guide only reflects an alignment the object is ALREADY\n // essentially on (\u22640.75px), so the lines/labels appear exactly when it lines up.\n const T = _noSnap ? 0.75 : _SNAP_T;\n const alignXok = bestX && bestXDist <= T;\n let appliedX = null;\n if (distX && distX.dist <= T && (!alignXok || distX.dist < bestXDist)) { if (!_noSnap) obj.x = distX.target; appliedX = \"dist\"; }\n else if (alignXok) { if (!_noSnap) obj.x += bestX.delta; appliedX = \"align\"; }\n\n const alignYok = bestY && bestYDist <= T;\n let appliedY = null;\n if (distY && distY.dist <= T && (!alignYok || distY.dist < bestYDist)) { if (!_noSnap) obj.y = distY.target; appliedY = \"dist\"; }\n else if (alignYok) { if (!_noSnap) obj.y += bestY.delta; appliedY = \"align\"; }\n\n // \u2500\u2500 Render guides + mm labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // Rendering is wrapped so any DOM hiccup can never break the drag itself\n // (the position snap above has already been applied).\n try {\n _dmbReleaseAllGuides(container);\n _dmbReleaseExtras(container);\n const mmpp = _dmbMmPerPx(container, targetType);\n const fL = obj.x, fR = obj.x + obj.w, fCx = obj.x + obj.w / 2;\n const fT = obj.y, fB = obj.y + obj.h, fCy = obj.y + obj.h / 2;\n\n // Alignment lines (blue solid = edge, dashed = centre)\n const { ox: _gox, oy: _goy } = _dmbOverlayHost(container);\n if (appliedX === \"align\") { const ln = _dmbAcquireGuide(container, \"v\", bestX.kind === \"cc\"); ln.style.left = (bestX.ref + _gox) + \"px\"; ln.style.transform = \"\"; ln.style.opacity = \"1\"; }\n if (appliedY === \"align\") { const ln = _dmbAcquireGuide(container, \"h\", bestY.kind === \"cc\"); ln.style.top = (bestY.ref + _goy) + \"px\"; ln.style.transform = \"\"; ln.style.opacity = \"1\"; }\n\n // Distribution: highlight the equal gaps (pink) with labels. Each gap draws on its\n // OWN axis (g.axis) at its own row/column, so a matched horizontal spacing lights up\n // horizontally and a matched vertical spacing lights up vertically \u2014 even together.\n if (appliedX === \"dist\" && distX) distX.gaps.forEach(g => _dmbDrawSpace(container, g.axis, g.a, g.b, g.perp, mmpp, true));\n if (appliedY === \"dist\" && distY) distY.gaps.forEach(g => _dmbDrawSpace(container, g.axis, g.a, g.b, g.perp, mmpp, true));\n\n // Live spacing labels: distance from the item to its nearest neighbour on each\n // side \u2014 or to the page/zone edge when there's no neighbour \u2014 so the customer\n // always sees the real space. Shown per axis only when distribution isn't already\n // drawing equal bars there (avoids double lines).\n function _liveSides(sibs, e1, e2, lo, hi, axis, perp) {\n let L = null, R = null;\n for (const s of sibs) {\n if (s.e2 <= e1 + 0.5) { if (!L || s.e2 > L.e2) L = s; }\n else if (s.e1 >= e2 - 0.5) { if (!R || s.e1 < R.e1) R = s; }\n }\n const gL = { a: L ? L.e2 : lo, b: e1 };\n const gR = { a: e2, b: R ? R.e1 : hi };\n if (gL.b - gL.a >= 1) _dmbDrawSpace(container, axis, gL.a, gL.b, perp, mmpp, false);\n if (gR.b - gR.a >= 1) _dmbDrawSpace(container, axis, gR.a, gR.b, perp, mmpp, false);\n }\n // Rebuild the in-line sibling sets from the FINAL position for accurate live gaps.\n if (targetType != null && siblings.length) {\n if (appliedX !== \"dist\") {\n const rs = siblings.filter(s => _ov(fT, fB, s.y, s.y + s.h) > Math.min(obj.h, s.h) * 0.2).map(s => ({ e1: s.x, e2: s.x + s.w }));\n _liveSides(rs, fL, fR, 0, cW, \"x\", fCy);\n }\n if (appliedY !== \"dist\") {\n const cs = siblings.filter(s => _ov(fL, fR, s.x, s.x + s.w) > Math.min(obj.w, s.w) * 0.2).map(s => ({ e1: s.y, e2: s.y + s.h }));\n _liveSides(cs, fT, fB, 0, cH, \"y\", fCx);\n }\n }\n\n // Auto-hide everything shortly after the drag stops moving\n clearTimeout(container._snapHideT);\n container._snapHideT = setTimeout(() => { _dmbReleaseAllGuides(container); _dmbReleaseExtras(container); }, _GUIDE_HIDE_MS);\n } catch (_snapErr) { try { _dmbReleaseAllGuides(container); _dmbReleaseExtras(container); } catch (_e2) {} }\n }\n\n // \u2500\u2500 Resize-time snapping \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // Snaps the MOVING edge(s) of `obj` (which edges move is decided by the handle\n // `mode`: tl/tr/bl/br/ml/mr/tm/bm) onto alignment references (page/zone edges +\n // sibling edges & centres), keeping the anchored opposite edge fixed. Draws the\n // guide line(s) and a live W\u00D7H mm size chip. Skipped for rotated items (their\n // edges aren't axis-aligned). Mutates obj.{x,y,w,h}; caller re-applies styles.\n function _dmbResizeSnap(obj, container, meta, mode) {\n try {\n if (!obj || !mode) return;\n const rot = (((obj.rotation || 0) % 360) + 360) % 360;\n if (rot > 0.5 && rot < 359.5) return; // rotated \u2192 skip\n const targetType = meta && meta.targetType;\n const pageNumber = meta && meta.pageNumber;\n let cW, cH;\n if (container._dmbSizeGen === _dmbSnapGen && container._dmbCW) { cW = container._dmbCW; cH = container._dmbCH; }\n else { cW = container.offsetWidth || 270; cH = container.offsetHeight || 338; container._dmbCW = cW; container._dmbCH = cH; container._dmbSizeGen = _dmbSnapGen; }\n const mmpp = _dmbMmPerPx(container, targetType);\n const sibs = (targetType != null) ? _dmbGetSiblingObjects(obj, targetType, pageNumber) : [];\n const refX = [], refY = [];\n if (targetType === \"cover\") {\n const _magFX = window.DMB_MAGAZINE_MODE ? COVER_BACK_W : COVER_FRONT_X;\n const zones = [[0, COVER_BACK_W], [_magFX, _magFX + 300]];\n if (!window.DMB_MAGAZINE_MODE && COVER_SPINE_W > 0) zones.push([COVER_BACK_W, COVER_BACK_W + COVER_SPINE_W]);\n zones.forEach(([x1, x2]) => { refX.push(x1, x2, (x1 + x2) / 2); });\n } else { refX.push(0, cW, cW / 2); }\n refY.push(0, cH, cH / 2);\n for (const s of sibs) { refX.push(s.x, s.x + s.w, s.x + s.w / 2); refY.push(s.y, s.y + s.h, s.y + s.h / 2); }\n const nearest = (refs, val) => { let best = null, bd = _SNAP_T + 1; for (const r of refs) { const d = Math.abs(r - val); if (d < bd) { bd = d; best = r; } } return (best != null && bd <= _SNAP_T) ? { ref: best, dist: bd } : null; };\n const MIND = 24;\n const movingLeft = mode === \"tl\" || mode === \"ml\" || mode === \"bl\";\n const movingRight = mode === \"tr\" || mode === \"mr\" || mode === \"br\";\n const movingTop = mode === \"tl\" || mode === \"tm\" || mode === \"tr\";\n const movingBottom = mode === \"bl\" || mode === \"bm\" || mode === \"br\";\n const _ov = (a1, a2, b1, b2) => Math.min(a2, b2) - Math.max(a1, b1);\n\n // Sibling edges projected onto each axis, with the perpendicular span kept so\n // we only consider neighbours the frame actually lines up against.\n const arrX = sibs.map(s => ({ lo: s.x, hi: s.x + s.w, pp1: s.y, pp2: s.y + s.h }));\n const arrY = sibs.map(s => ({ lo: s.y, hi: s.y + s.h, pp1: s.x, pp2: s.x + s.w }));\n // Nearest sibling boundary strictly on the `dir` side of `pos` that overlaps the\n // perpendicular span [pp1,pp2]; falls back to the page/zone edge `fb`.\n const _neighEdge = (arr, pos, dir, pp1, pp2, fb) => {\n let best = null;\n for (const s of arr) {\n if (_ov(pp1, pp2, s.pp1, s.pp2) <= 0) continue;\n if (dir > 0) { if (s.lo >= pos - 0.5 && (best == null || s.lo < best)) best = s.lo; }\n else { if (s.hi <= pos + 0.5 && (best == null || s.hi > best)) best = s.hi; }\n }\n return best != null ? best : fb;\n };\n\n _dmbReleaseAllGuides(container); _dmbReleaseExtras(container);\n let snapV = null, snapH = null, xEqual = false, yEqual = false;\n\n // \u2500\u2500 X axis (left/right handle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // Prefer an EQUAL-SPACING snap (moving-side gap == the fixed anchored-side gap)\n // over plain edge alignment when it's at least as close, so resizing a frame\n // until its two side gaps match lights both up in pink \u2014 same as the move path.\n if (movingLeft || movingRight) {\n const pT = obj.y, pB = obj.y + obj.h;\n const movEdge = movingRight ? (obj.x + obj.w) : obj.x;\n const anchEdge = movingRight ? obj.x : (obj.x + obj.w);\n const dir = movingRight ? 1 : -1;\n const movNeighbor = _neighEdge(arrX, movEdge, dir, pT, pB, movingRight ? cW : 0);\n const anchNeighbor = _neighEdge(arrX, anchEdge, -dir, pT, pB, movingRight ? 0 : cW);\n const anchGap = movingRight ? (anchEdge - anchNeighbor) : (anchNeighbor - anchEdge);\n let eq = null;\n if (anchGap > 0.5) {\n const target = movingRight ? (movNeighbor - anchGap) : (movNeighbor + anchGap);\n const okW = movingRight ? (target - obj.x >= MIND) : ((obj.x + obj.w) - target >= MIND);\n const movGap = movingRight ? (movNeighbor - target) : (target - movNeighbor);\n if (okW && movGap > 0.5) { const d = Math.abs(target - movEdge); if (d <= _SNAP_T) eq = { target, dist: d, movNeighbor, anchNeighbor }; }\n }\n const al = nearest(refX, movEdge);\n if (eq && (!al || eq.dist <= al.dist)) {\n if (movingRight) { obj.w = Math.max(MIND, eq.target - obj.x); }\n else { const right = obj.x + obj.w; obj.x = Math.min(eq.target, right - MIND); obj.w = right - obj.x; }\n xEqual = true;\n const perp = obj.y + obj.h / 2;\n const nMov = movingRight ? (obj.x + obj.w) : obj.x;\n if (movingRight) { _dmbDrawSpace(container, \"x\", nMov, eq.movNeighbor, perp, mmpp, true); _dmbDrawSpace(container, \"x\", eq.anchNeighbor, obj.x, perp, mmpp, true); }\n else { _dmbDrawSpace(container, \"x\", eq.movNeighbor, nMov, perp, mmpp, true); _dmbDrawSpace(container, \"x\", obj.x + obj.w, eq.anchNeighbor, perp, mmpp, true); }\n } else if (al) {\n if (movingRight) { obj.w = Math.max(MIND, al.ref - obj.x); snapV = obj.x + obj.w; }\n else { const right = obj.x + obj.w; obj.x = Math.min(al.ref, right - MIND); obj.w = right - obj.x; snapV = obj.x; }\n }\n }\n\n // \u2500\u2500 Y axis (top/bottom handle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n if (movingTop || movingBottom) {\n const pL = obj.x, pR = obj.x + obj.w;\n const movEdge = movingBottom ? (obj.y + obj.h) : obj.y;\n const anchEdge = movingBottom ? obj.y : (obj.y + obj.h);\n const dir = movingBottom ? 1 : -1;\n const movNeighbor = _neighEdge(arrY, movEdge, dir, pL, pR, movingBottom ? cH : 0);\n const anchNeighbor = _neighEdge(arrY, anchEdge, -dir, pL, pR, movingBottom ? 0 : cH);\n const anchGap = movingBottom ? (anchEdge - anchNeighbor) : (anchNeighbor - anchEdge);\n let eq = null;\n if (anchGap > 0.5) {\n const target = movingBottom ? (movNeighbor - anchGap) : (movNeighbor + anchGap);\n const okH = movingBottom ? (target - obj.y >= MIND) : ((obj.y + obj.h) - target >= MIND);\n const movGap = movingBottom ? (movNeighbor - target) : (target - movNeighbor);\n if (okH && movGap > 0.5) { const d = Math.abs(target - movEdge); if (d <= _SNAP_T) eq = { target, dist: d, movNeighbor, anchNeighbor }; }\n }\n const al = nearest(refY, movEdge);\n if (eq && (!al || eq.dist <= al.dist)) {\n if (movingBottom) { obj.h = Math.max(MIND, eq.target - obj.y); }\n else { const bottom = obj.y + obj.h; obj.y = Math.min(eq.target, bottom - MIND); obj.h = bottom - obj.y; }\n yEqual = true;\n const perp = obj.x + obj.w / 2;\n const nMov = movingBottom ? (obj.y + obj.h) : obj.y;\n if (movingBottom) { _dmbDrawSpace(container, \"y\", nMov, eq.movNeighbor, perp, mmpp, true); _dmbDrawSpace(container, \"y\", eq.anchNeighbor, obj.y, perp, mmpp, true); }\n else { _dmbDrawSpace(container, \"y\", eq.movNeighbor, nMov, perp, mmpp, true); _dmbDrawSpace(container, \"y\", obj.y + obj.h, eq.anchNeighbor, perp, mmpp, true); }\n } else if (al) {\n if (movingBottom) { obj.h = Math.max(MIND, al.ref - obj.y); snapH = obj.y + obj.h; }\n else { const bottom = obj.y + obj.h; obj.y = Math.min(al.ref, bottom - MIND); obj.h = bottom - obj.y; snapH = obj.y; }\n }\n }\n\n const { ox: _rox, oy: _roy } = _dmbOverlayHost(container);\n if (snapV != null) { const ln = _dmbAcquireGuide(container, \"v\", false); ln.style.left = (snapV + _rox) + \"px\"; ln.style.transform = \"\"; ln.style.opacity = \"1\"; }\n if (snapH != null) { const ln = _dmbAcquireGuide(container, \"h\", false); ln.style.top = (snapH + _roy) + \"px\"; ln.style.transform = \"\"; ln.style.opacity = \"1\"; }\n const lab = _dmbAcquireLabel(container);\n lab.textContent = _dmbFmtCm(obj.w * mmpp) + \" \u00D7 \" + _dmbFmtCm(obj.h * mmpp);\n lab.style.left = (obj.x + obj.w / 2 + _rox) + \"px\"; lab.style.top = (obj.y + _roy) + \"px\"; lab.style.transform = \"translate(-50%,-135%)\"; lab.style.opacity = \"1\";\n\n // Live spacing labels \u2014 mirror the whole-frame move path (dmbCheckSnap \u2192\n // _liveSides): show the gap from each edge of the (now-resized) frame to its\n // nearest neighbour, or to the page/zone edge when there's none. Skipped on an\n // axis where the equal-spacing bars above already drew the gaps (avoids double).\n try {\n const fL = obj.x, fR = obj.x + obj.w, fT = obj.y, fB = obj.y + obj.h;\n const fCx = fL + obj.w / 2, fCy = fT + obj.h / 2;\n const _liveSides = (arr, e1, e2, lo, hi, axis, perp) => {\n let L = null, R = null;\n for (const s of arr) {\n if (s.e2 <= e1 + 0.5) { if (!L || s.e2 > L.e2) L = s; }\n else if (s.e1 >= e2 - 0.5) { if (!R || s.e1 < R.e1) R = s; }\n }\n const gL = { a: L ? L.e2 : lo, b: e1 };\n const gR = { a: e2, b: R ? R.e1 : hi };\n if (gL.b - gL.a >= 1) _dmbDrawSpace(container, axis, gL.a, gL.b, perp, mmpp, false);\n if (gR.b - gR.a >= 1) _dmbDrawSpace(container, axis, gR.a, gR.b, perp, mmpp, false);\n };\n if (sibs.length) {\n if (!xEqual) { const rs = sibs.filter(s => _ov(fT, fB, s.y, s.y + s.h) > Math.min(obj.h, s.h) * 0.2).map(s => ({ e1: s.x, e2: s.x + s.w })); _liveSides(rs, fL, fR, 0, cW, \"x\", fCy); }\n if (!yEqual) { const cs = sibs.filter(s => _ov(fL, fR, s.x, s.x + s.w) > Math.min(obj.w, s.w) * 0.2).map(s => ({ e1: s.y, e2: s.y + s.h })); _liveSides(cs, fT, fB, 0, cH, \"y\", fCx); }\n }\n } catch (e) {}\n\n clearTimeout(container._snapHideT);\n container._snapHideT = setTimeout(() => { _dmbReleaseAllGuides(container); _dmbReleaseExtras(container); }, _GUIDE_HIDE_MS);\n } catch (e) {}\n }\n\n function dmbApplyZoneClip(el, obj) {\n if (!obj.coverZone) { el.style.clipPath = \"\"; return; }\n const FACE_W = 300;\n let zoneX1, zoneX2;\n if (obj.coverZone === \"back\") {\n zoneX1 = 0; zoneX2 = COVER_BACK_W;\n } else if (obj.coverZone === \"spine\") {\n zoneX1 = COVER_BACK_W; zoneX2 = COVER_FRONT_X;\n } else {\n zoneX1 = window.DMB_MAGAZINE_MODE ? COVER_BACK_W : COVER_FRONT_X;\n zoneX2 = zoneX1 + FACE_W;\n }\n const leftClip = Math.max(0, zoneX1 - (obj.x || 0));\n const rightClip = Math.max(0, (obj.x || 0) + (obj.w || 0) - zoneX2);\n el.style.clipPath = (leftClip === 0 && rightClip === 0) ? \"\" : `inset(0 ${rightClip}px 0 ${leftClip}px)`;\n }\n\n function dmbAlignObjectInZone(el, obj, align, targetType) {\n let zoneX = 0, zoneW;\n if (targetType === \"cover\") {\n const _magFX = window.DMB_MAGAZINE_MODE ? COVER_BACK_W : COVER_FRONT_X;\n if (obj.coverZone === \"back\") { zoneX = 0; zoneW = COVER_BACK_W; }\n else if (obj.coverZone === \"spine\") { zoneX = COVER_BACK_W; zoneW = COVER_SPINE_W; }\n else { zoneX = _magFX; zoneW = 300; }\n } else {\n const container = el.closest('[data-page-body=\"true\"]') || el.parentElement;\n zoneW = container ? container.offsetWidth : 270;\n // A spanning shape or map belongs to the SPREAD, so align it across the spread.\n // Aligning it to one page was the only control that silently destroyed a span:\n // one tap on the align buttons and the object jumped wholly onto its own sheet.\n const _apn = (container && container.dataset) ? Number(container.dataset.pageNumber) : NaN;\n if (Number.isFinite(_apn) && _dmbObjOverhangs(obj, _apn)) {\n const _ar = _dmbPointRangeX(_apn, zoneW);\n zoneX = _ar.lo; zoneW = _ar.hi - _ar.lo;\n }\n }\n const elementW = obj.w || el.offsetWidth || 100;\n let newX;\n if (align === \"left\") newX = zoneX;\n else if (align === \"center\") newX = Math.round(zoneX + (zoneW - elementW) / 2);\n else newX = zoneX + zoneW - elementW;\n // A line's box is DERIVED from its endpoints, so writing obj.x alone achieved\n // nothing - the next _dmbLineRecomputeBox rebuilt the box from x1/x2/bx and put the\n // line straight back. Align has therefore always been a silent no-op on lines. Carry\n // the endpoints by the same delta so the button does what it says. (2026-09-14)\n const _adx = newX - (obj.x || 0);\n obj.x = newX;\n if (_adx && obj.type === \"shape\" && obj.shapeType === \"line\") {\n if (obj.x1 != null) obj.x1 += _adx;\n if (obj.x2 != null) obj.x2 += _adx;\n if (obj.bx != null) obj.bx += _adx;\n }\n el.style.left = newX + \"px\";\n if (obj.coverZone) dmbApplyZoneClip(el, obj);\n pushUndoState(\"Align \" + align.charAt(0).toUpperCase() + align.slice(1));\n }\n\n function dmbAlignTextNode(node, align) {\n const parent = node.parentElement;\n if (!parent) return;\n let zoneX = 0, zoneW;\n const coverWrap = parent.closest(\".dmb-cover-preview\");\n if (coverWrap) {\n const utEntry = (editor.coverUserTexts || []).find(function(e) { return e.id === node.id; });\n const zone = utEntry?.zone || activeCoverZone;\n const _magFX = window.DMB_MAGAZINE_MODE ? COVER_BACK_W : COVER_FRONT_X;\n if (zone === \"back\") { zoneX = 0; zoneW = COVER_BACK_W; }\n else if (zone === \"spine\") { zoneX = COVER_BACK_W; zoneW = COVER_SPINE_W; }\n else { zoneX = _magFX; zoneW = 300; }\n } else {\n zoneW = parent.offsetWidth;\n }\n // scrollWidth captures actual text content width even when it overflows an\n // explicit CSS width (e.g. width:220px set by the textAlign dropdown).\n // offsetWidth alone returns the box size, not the visual text extent.\n const nodeW = Math.max(node.offsetWidth, node.scrollWidth) || 120;\n let newX;\n if (align === \"left\") newX = zoneX;\n else if (align === \"center\") newX = Math.round(zoneX + (zoneW - nodeW) / 2);\n else newX = zoneX + zoneW - nodeW;\n node.style.left = newX + \"px\";\n // Save to BOTH cover state AND page objects so the new position is\n // reflected in the PDF for both cover text and page text.\n // WARNING: do NOT remove savePageTextState \u2014 without it, position alignment\n // buttons (\u2190 \u2194 \u2192) leave editor.pageObjects.left stale and the PDF shows\n // the text at the old position instead of the new one.\n saveCoverTextNodeState(node);\n savePageTextState(node);\n pushUndoState(\"Align Text \" + align.charAt(0).toUpperCase() + align.slice(1));\n showTextToolbarFor(node);\n }\n\n function getObjectListForTarget(targetType, pageNumber) {\n if (targetType === \"cover\") {\n if (!Array.isArray(editor.coverObjects)) migrateCoverObjectsToFlat();\n return editor.coverObjects;\n }\n if (!editor.pageObjects || typeof editor.pageObjects !== \"object\") {\n editor.pageObjects = {};\n }\n const p = Number(pageNumber);\n if (p == null || isNaN(p) || p < 0) return [];\n if (!Array.isArray(editor.pageObjects[p])) editor.pageObjects[p] = [];\n return editor.pageObjects[p];\n }\n\n // \u2500\u2500 Cross-page move helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n async function dmbHandleCrossPageMove(obj, sourcePageNumber) {\n const si = editor.currentSpread;\n if (si < 0 || si == null) return;\n const leftPage = si * 2 + 1;\n const rightPage = si * 2 + 2;\n if (sourcePageNumber !== leftPage && sourcePageNumber !== rightPage) return;\n if (rightPage > (editor.totalPages || 0)) return;\n\n const PAGE_W = getPageDims().w;\n const isOnLeft = (sourcePageNumber === leftPage);\n const cx = obj.x + (obj.w || 0) / 2;\n const objRight = obj.x + (obj.w || 0);\n\n let targetPage = sourcePageNumber;\n let straddling = false;\n if (isOnLeft) {\n if (cx > PAGE_W) targetPage = rightPage;\n else if (objRight > PAGE_W) straddling = true;\n } else {\n if (cx < 0) targetPage = leftPage;\n else if (obj.x < 0) straddling = true;\n }\n\n // No longer across the fold - drop the \"deliberate\" marker so a later accidental\n // overhang asks again rather than inheriting this object's history.\n if (!straddling && obj.straddle) { try { delete obj.straddle; } catch (e) {} }\n\n if (straddling && (obj.type === \"shape\" || obj.type === \"map\" || obj.type === \"photo-frame\")) {\n // THE FEATURE: shapes and maps are allowed to span both pages of a spread. The\n // render path already prints cross-fold overhang (getSpreadOverflowObjs), and the\n // per-page fingerprint already hashes the facing page's objects (pageFp's\n // partnerObjs), so what is on screen is what prints and editing it re-renders both\n // sheets. Nothing here needs to move the object at all - it stays filed on the page\n // its CENTRE is on, which is what the two branches above already decided.\n //\n // Every other type still has to pick a page: a photo frame or a text box split down\n // the gutter is almost always a slip, not a design. (2026-09-14)\n obj.straddle = true;\n return;\n }\n\n if (straddling) {\n const choice = await showChoiceDialog(\n \"Object spans both pages\",\n // Reached only by text and stickers now: photo frames, shapes and maps are all\n // allowed across the fold, and the PDF prints the overhang on both sheets.\n \"This item crosses the divider between two pages. Where should it go?\",\n [\n { id: \"stay\", label: `Keep on Page ${sourcePageNumber}` },\n { id: \"move\", label: `Move to Page ${isOnLeft ? rightPage : leftPage}` }\n ]\n );\n if (choice !== \"move\") return;\n targetPage = isOnLeft ? rightPage : leftPage;\n }\n\n if (targetPage === sourcePageNumber) return;\n\n const src = editor.pageObjects[sourcePageNumber];\n if (!Array.isArray(src)) return;\n const idx = src.findIndex(o => o.id === obj.id);\n if (idx === -1) return;\n src.splice(idx, 1);\n\n const _dxPage = isOnLeft ? -PAGE_W : PAGE_W;\n obj.x += _dxPage;\n // A line stores endpoints, not a box \u2014 the box is recomputed from them, so the\n // endpoints must move too or the next recompute puts the line back.\n if (obj.type === \"shape\" && obj.shapeType === \"line\") {\n if (obj.x1 != null) obj.x1 += _dxPage;\n if (obj.x2 != null) obj.x2 += _dxPage;\n if (obj.bx != null) obj.bx += _dxPage;\n }\n\n if (!Array.isArray(editor.pageObjects[targetPage])) editor.pageObjects[targetPage] = [];\n editor.pageObjects[targetPage].push(obj);\n\n if (typeof renderBuilderCanvas === \"function\") renderBuilderCanvas();\n if (typeof renderThumbsRail === \"function\") renderThumbsRail();\n }\n\n function renderFreeFrameObjects(container, meta) {\n const targetType = meta?.targetType || \"page\";\n const pageNumber = meta?.pageNumber ?? null;\n const zone = meta?.zone || null;\n // Pages: z >= 60 keeps frames above the spread overlay (z:50).\n // Cover: use own z-value \u2014 drops handled by peek-under method, not z-index.\n const minFrameZ = targetType === \"cover\" ? 0 : 60;\n\n const rawObjs = getObjectListForTarget(targetType, pageNumber, zone);\n const objs = Array.isArray(rawObjs)\n ? rawObjs.slice().sort((a, b) => Number(a.z || 0) - Number(b.z || 0))\n : [];\n\n objs.forEach((obj) => {\n if (obj.type === \"map\") {\n const wrap = document.createElement(\"div\");\n wrap.className = \"dmb-map-object\";\n wrap.dataset.objectId = obj.id;\n wrap.style.position = \"absolute\";\n wrap.style.left = obj.x + \"px\";\n wrap.style.top = obj.y + \"px\";\n wrap.style.width = obj.w + \"px\";\n wrap.style.height = obj.h + \"px\";\n var _zMap = Number(_dmbZOf(obj, 20)) || 0;\n if (_dmbObjOverhangs(obj, pageNumber)) _zMap = Math.max(1, _zMap);\n wrap.style.zIndex = String(_zMap);\n wrap.dataset.z = String(obj.z || 20);\n wrap.style.cursor = \"move\";\n wrap.style.overflow = \"visible\";\n wrap.style.transform = `rotate(${obj.rotation || 0}deg)`;\n wrap.style.transformOrigin = \"center center\";\n if (obj.coverZone) dmbApplyZoneClip(wrap, obj);\n if (obj.contained) _dmbApplyContain(wrap, obj, targetType === \"cover\");\n\n const mapParser = new DOMParser();\n const svgDoc = mapParser.parseFromString(obj.svg || \"\", \"image/svg+xml\");\n const svgEl = svgDoc.querySelector(\"svg\");\n if (svgEl) {\n if (!svgEl.getAttribute(\"viewBox\")) {\n const origW = svgEl.getAttribute(\"width\");\n const origH = svgEl.getAttribute(\"height\");\n if (origW && origH) {\n svgEl.setAttribute(\"viewBox\", `0 0 ${parseFloat(origW)} ${parseFloat(origH)}`);\n }\n }\n svgEl.removeAttribute(\"width\");\n svgEl.removeAttribute(\"height\");\n svgEl.style.width = \"100%\";\n svgEl.style.height = \"100%\";\n svgEl.style.display = \"block\";\n dmbApplyStylesToSvg(svgEl, obj);\n wrap.appendChild(svgEl);\n }\n\n if (Array.isArray(obj.markers)) {\n obj.markers.forEach((markerData) => {\n const marker = createMarkerElement(markerData.type || \"pin\", markerData.color || \"#e74c3c\");\n marker.style.left = (markerData.x || 50) + \"%\";\n marker.style.top = (markerData.y || 50) + \"%\";\n wrap.appendChild(marker);\n attachMarkerInteractions(marker, markerData, wrap);\n });\n }\n\n const mapHandles = [\n [\"tl\",\"0\",\"0\"],[\"tm\",\"50%\",\"0\"],[\"tr\",\"100%\",\"0\"],\n [\"ml\",\"0\",\"50%\"],[\"mr\",\"100%\",\"50%\"],\n [\"bl\",\"0\",\"100%\"],[\"bm\",\"50%\",\"100%\"],[\"br\",\"100%\",\"100%\"]\n ];\n mapHandles.forEach(([pos, l, t]) => {\n const h = document.createElement(\"div\");\n h.className = `dmb-frame-handle dmb-frame-handle-${pos}`;\n h.dataset.handle = pos;\n h.style.left = l;\n h.style.top = t;\n wrap.appendChild(h);\n });\n\n /* \u2500\u2500 rotation handle (fixed-position, appended to body to escape overflow:hidden) \u2500\u2500 */\n const rotHandle = document.createElement(\"div\");\n rotHandle.className = \"dmb-map-rotate-handle dmb-map-rot-float\";\n rotHandle.innerHTML = \"↻\";\n rotHandle.title = \"Rotate\";\n\n const degDisplay = document.createElement(\"div\");\n degDisplay.className = \"dmb-map-rotate-deg dmb-map-rot-float\";\n degDisplay.textContent = Math.round(obj.rotation || 0) + \"\\u00b0\";\n degDisplay.style.display = \"none\";\n\n rotHandle.style.display = \"none\"; // hidden until map is selected\n document.body.appendChild(rotHandle);\n document.body.appendChild(degDisplay);\n wrap._dmbRotHandle = rotHandle; // store reference for show/hide\n\n function updateRotPos() {\n if (!wrap.isConnected) { rotHandle.remove(); degDisplay.remove(); return; }\n const r = wrap.getBoundingClientRect();\n // Place handle at the actual BR corner of the bounding box, offset outward\n rotHandle.style.left = (r.right + 14) + \"px\";\n rotHandle.style.top = (r.bottom + 14) + \"px\";\n degDisplay.style.left = (r.right + 14) + \"px\";\n degDisplay.style.top = (r.bottom + 40) + \"px\";\n }\n\n requestAnimationFrame(updateRotPos);\n\n rotHandle.addEventListener(\"pointerdown\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n const startRot = obj.rotation || 0;\n const r = wrap.getBoundingClientRect();\n const cx = r.left + r.width / 2;\n const cy = r.top + r.height / 2;\n const startAng = Math.atan2(e.clientY - cy, e.clientX - cx) * 180 / Math.PI;\n degDisplay.style.display = \"block\";\n const onMove = (ev) => {\n const ang = Math.atan2(ev.clientY - cy, ev.clientX - cx) * 180 / Math.PI;\n obj.rotation = _dmbSnapAngle(startRot + (ang - startAng));\n wrap.style.transform = `rotate(${obj.rotation}deg)`;\n degDisplay.textContent = Math.round(obj.rotation) + \"\\u00b0\";\n updateRotPos();\n showRotDegTooltip(obj.rotation, ev.clientX, ev.clientY);\n };\n const onUp = () => {\n degDisplay.style.display = \"none\";\n hideRotDegTooltip();\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onUp);\n };\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", onUp);\n });\n\n /* \u2500\u2500 snap guides \u2500\u2500 */\n const { gH, gV } = dmbGetSnapGuides(container);\n\n let mDragMode = null;\n let mSx = 0, mSy = 0, mOx = 0, mOy = 0, mOw = 0, mOh = 0, mAspect = 1;\n const MIND = 40;\n\n wrap.addEventListener(\"pointerdown\", (e) => {\n if (e.target.closest(\".dmb-frame-handle\")) return;\n if (e.target.closest(\".dmb-map-marker\")) return;\n e.preventDefault();\n e.stopPropagation();\n if (obj.contained) wrap.style.clipPath = \"\"; // show full during drag\n // e.preventDefault() suppresses the click event, so select here directly\n dmbOpenEditBar(obj, wrap);\n mDragMode = \"move\";\n mSx = e.clientX; mSy = e.clientY;\n mOx = obj.x; mOy = obj.y;\n // On-screen scale of the canvas (transform:scale(currentZoom)). Used to\n // turn screen-pixel finger deltas into model pixels so touch dragging at\n // <100% zoom tracks the finger exactly instead of lagging.\n const _Z = _nodeOnScreenScale(wrap) || 1;\n let _liftMap = null;\n if (targetType === \"page\") {\n const _pr = wrap.closest(\"[data-spread-row]\");\n if (_pr) {\n const _wr = wrap.getBoundingClientRect(), _rr = _pr.getBoundingClientRect();\n _liftMap = { pagesRow: _pr, origParent: wrap.parentElement, origZ: wrap.style.zIndex };\n mOx = (_wr.left - _rr.left) / _Z; mOy = (_wr.top - _rr.top) / _Z;\n wrap.style.left = mOx + \"px\"; wrap.style.top = mOy + \"px\"; wrap.style.zIndex = \"9000\"; // below guides (9999)\n _pr.appendChild(wrap);\n }\n }\n const onMove = (ev) => {\n if (mDragMode !== \"move\") return;\n const dx = (ev.clientX - mSx) / _Z, dy = (ev.clientY - mSy) / _Z;\n if (_liftMap) {\n const _rawL = mOx + dx, _rawT = mOy + dy;\n const { dx: _sdx, dy: _sdy } = _dmbLiftSnap(_rawL, _rawT, obj.w, obj.h, obj.id, _liftMap, gH, gV, targetType, pageNumber);\n wrap.style.left = (_rawL + _sdx) + \"px\"; wrap.style.top = (_rawT + _sdy) + \"px\";\n } else {\n // Clamp to keep at least half the object inside the page\n const _cW = container.offsetWidth || 270;\n const _cH = container.offsetHeight || 382;\n // Fallback branch (no spread row to lift into: cover, page 0). Aligned with\n // the release clamp so a map can never be yanked onto one sheet if the lift\n // ever fails - _dmbObjDragRangeX returns the single-page range anyway\n // wherever there is no spread partner, so this changes nothing today.\n const _rangeXf = _dmbObjDragRangeX(obj, pageNumber, _cW);\n obj.x = Math.max(_rangeXf.lo, Math.min(_rangeXf.hi, mOx + dx));\n obj.y = Math.max(-obj.h / 2, Math.min(_cH - obj.h / 2, mOy + dy));\n wrap.style.left = obj.x + \"px\"; wrap.style.top = obj.y + \"px\";\n if (obj.coverZone) dmbApplyZoneClip(wrap, obj);\n dmbCheckSnap(obj, container, gH, gV, { targetType, pageNumber });\n wrap.style.left = obj.x + \"px\"; wrap.style.top = obj.y + \"px\";\n }\n updateRotPos();\n };\n const onUp = async () => {\n mDragMode = null;\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onUp);\n if (_liftMap) {\n const _rx = parseFloat(wrap.style.left), _ry = parseFloat(wrap.style.top);\n const _pgR = _liftMap.origParent?.parentElement?.getBoundingClientRect();\n const _rR = _liftMap.pagesRow.getBoundingClientRect();\n obj.x = _rx - (_pgR ? (_pgR.left - _rR.left) / _Z : 0); obj.y = _ry;\n // Clamp so object can't land fully outside its destination page\n const _cW = _liftMap.origParent.offsetWidth || 270;\n const _cH = _liftMap.origParent.offsetHeight || 382;\n const _rangeXm = _dmbObjDragRangeX(obj, pageNumber, _cW);\n obj.x = Math.max(_rangeXm.lo, Math.min(_rangeXm.hi, obj.x));\n obj.y = Math.max(-obj.h / 2, Math.min(_cH - obj.h / 2, obj.y));\n wrap.style.left = obj.x + \"px\"; wrap.style.top = obj.y + \"px\";\n wrap.style.zIndex = _liftMap.origZ; _liftMap.origParent.appendChild(wrap); _liftMap = null;\n }\n pushUndoState(\"Move Map\");\n if (targetType === \"cover\") {\n _dmbAutoAssignCoverZone(obj, wrap);\n } else if (targetType === \"page\" && typeof pageNumber === \"number\") {\n await dmbHandleCrossPageMove(obj, pageNumber);\n }\n };\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", onUp);\n });\n\n wrap.querySelectorAll(\".dmb-frame-handle\").forEach((handle) => {\n handle.addEventListener(\"pointerdown\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n mDragMode = handle.dataset.handle;\n mSx = e.clientX; mSy = e.clientY;\n mOx = obj.x; mOy = obj.y; mOw = obj.w; mOh = obj.h;\n mAspect = mOh > 0 ? mOw / mOh : 1;\n const _Z = _nodeOnScreenScale(wrap) || 1;\n const onMove = (ev) => {\n const dx = (ev.clientX - mSx) / _Z;\n const dy = (ev.clientY - mSy) / _Z;\n let newW, newH;\n\n // Width-driven handles (all except top/bottom middle)\n if ([\"tl\",\"ml\",\"bl\"].includes(mDragMode)) newW = Math.max(MIND, mOw - dx);\n else if ([\"tr\",\"mr\",\"br\"].includes(mDragMode)) newW = Math.max(MIND, mOw + dx);\n\n // Height-driven handles (top/bottom middle only)\n if (mDragMode === \"tm\") newH = Math.max(MIND, mOh - dy);\n else if (mDragMode === \"bm\") newH = Math.max(MIND, mOh + dy);\n\n // Compute the other dimension proportionally\n if (newW !== undefined) newH = Math.max(MIND, Math.round(newW / mAspect));\n else if (newH !== undefined) newW = Math.max(MIND, Math.round(newH * mAspect));\n\n obj.w = newW; obj.h = newH;\n\n // Position adjustments to keep the correct anchor\n if ([\"tl\",\"ml\",\"bl\"].includes(mDragMode)) obj.x = mOx + (mOw - newW);\n else if (mDragMode === \"tm\" || mDragMode === \"bm\") obj.x = mOx + (mOw - newW) / 2;\n if ([\"tl\",\"tm\",\"tr\"].includes(mDragMode)) obj.y = mOy + (mOh - newH);\n else if (mDragMode === \"ml\" || mDragMode === \"mr\") obj.y = mOy + (mOh - newH) / 2;\n\n _dmbResizeSnap(obj, container, { targetType, pageNumber }, mDragMode);\n wrap.style.left = obj.x + \"px\";\n wrap.style.top = obj.y + \"px\";\n wrap.style.width = obj.w + \"px\";\n wrap.style.height = obj.h + \"px\";\n if (obj.coverZone) dmbApplyZoneClip(wrap, obj);\n updateRotPos();\n };\n const onUp = () => {\n mDragMode = null;\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onUp);\n pushUndoState(\"Resize Map\");\n if (targetType === \"cover\") {\n _dmbAutoAssignCoverZone(obj, wrap);\n }\n };\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", onUp);\n });\n });\n\n currentInsertedMap = obj;\n container.appendChild(wrap);\n requestAnimationFrame(updateRotPos);\n return;\n }\n\n if (obj.type === \"sticker\") {\n // Ensure minimum valid dimensions (preserve user-set sizes \u2014 never overwrite on re-render)\n if ((obj.w || 0) < 1 || (obj.h || 0) < 1) {\n obj.w = 100; obj.h = 100;\n }\n\n const sWrap = document.createElement(\"div\");\n sWrap.className = \"dmb-sticker-object\";\n sWrap.dataset.objectId = obj.id;\n sWrap.style.position = \"absolute\";\n sWrap.style.left = (obj.x || 20) + \"px\";\n sWrap.style.top = (obj.y || 20) + \"px\";\n sWrap.style.width = obj.w + \"px\";\n sWrap.style.height = obj.h + \"px\";\n sWrap.style.zIndex = String(_dmbZOf(obj, 30));\n sWrap.dataset.z = String(_dmbZOf(obj, 30));\n sWrap.style.cursor = \"move\";\n sWrap.style.transform = `rotate(${obj.rotation || 0}deg)`;\n sWrap.style.transformOrigin = \"center center\";\n if (obj.coverZone) dmbApplyZoneClip(sWrap, obj);\n if (obj.contained) _dmbApplyContain(sWrap, obj, targetType === \"cover\");\n\n const sImg = document.createElement(\"img\");\n // CORS so the crop resolver can read this image's alpha (cdn.shopify.com and\n // theme assets send ACAO:*; the PDF path already depends on it). If a host\n // refuses, reload once without it - the sticker must never vanish on screen.\n try {\n if (/^https?:/i.test(String(obj.tightUrl || obj.url || \"\"))) {\n sImg.crossOrigin = \"anonymous\";\n let _sTry = 0;\n const _sRetry = function () {\n const _b = obj.tightUrl || obj.url || \"\";\n if (!_b) return;\n _sTry++;\n if (_sTry === 1) {\n // Usual cause: the image is already in the HTTP cache from a NON-CORS\n // load, so the CORS request is refused from cache. Force one fresh\n // fetch before giving up on readable pixels (readable = measurable\n // crop = the sticker is not deformed).\n sImg.addEventListener(\"error\", _sRetry, { once: true });\n sImg.src = _b + (_b.indexOf(\"?\") >= 0 ? \"&\" : \"?\") + \"dmbcors=1\";\n } else {\n sImg.crossOrigin = null;\n sImg.src = _b;\n }\n };\n sImg.addEventListener(\"error\", _sRetry, { once: true });\n }\n } catch (e) {}\n // Use the pre-cropped data URL if available; fall back to original CDN URL\n sImg.src = obj.tightUrl || obj.url || \"\";\n sImg.alt = obj.name || \"\";\n sImg.draggable = false;\n sImg.style.display = \"block\";\n sImg.style.pointerEvents = \"none\";\n // Crop parity with the PDF. Without tightUrl both renderers load the FULL\n // PNG, but only the PDF re-crops it - so show the same window here.\n const _sCrop = (!obj.tightUrl && obj.cropW > 0 && obj.cropH > 0);\n let _sClip = null;\n const _sApplySize = () => {\n if (!_sCrop) {\n sImg.style.width = obj.w + \"px\";\n sImg.style.height = obj.h + \"px\";\n return;\n }\n const _nw = sImg.naturalWidth || obj.cropW, _nh = sImg.naturalHeight || obj.cropH;\n // Same resolver as the PDF, so screen and print show the same window.\n const _c = (sImg.naturalWidth ? _dmbStickerCropFor(obj, sImg) : null) ||\n { cropX: obj.cropX || 0, cropY: obj.cropY || 0, cropW: obj.cropW, cropH: obj.cropH };\n sImg.style.position = \"absolute\";\n sImg.style.width = (_nw / _c.cropW * obj.w) + \"px\";\n sImg.style.height = (_nh / _c.cropH * obj.h) + \"px\";\n sImg.style.left = (-(_c.cropX || 0) / _c.cropW * obj.w) + \"px\";\n sImg.style.top = (-(_c.cropY || 0) / _c.cropH * obj.h) + \"px\";\n };\n if (_sCrop) {\n // Its own clipping layer: overflow:hidden on sWrap would also swallow\n // the resize handles, which are children of the wrapper.\n _sClip = document.createElement(\"div\");\n _sClip.style.cssText = \"position:absolute;inset:0;overflow:hidden;pointer-events:none;\";\n _sClip.appendChild(sImg);\n sWrap.appendChild(_sClip);\n if (sImg.complete && sImg.naturalWidth) _sApplySize();\n else sImg.addEventListener(\"load\", _sApplySize, { once: true });\n } else {\n sWrap.appendChild(sImg);\n }\n _sApplySize();\n\n // Place handles at exact pixel positions on the sticker wrapper corners/edges\n function sStickerHandlePts(w, h) {\n return { tl:[0,0], tm:[w/2,0], tr:[w,0], ml:[0,h/2], mr:[w,h/2], bl:[0,h], bm:[w/2,h], br:[w,h] };\n }\n function updateStickerHandles(w, h) {\n const pts = sStickerHandlePts(w, h);\n sWrap.querySelectorAll(\".dmb-frame-handle\").forEach((el) => {\n const [lx, ty] = pts[el.dataset.handle] || [0, 0];\n el.style.left = lx + \"px\";\n el.style.top = ty + \"px\";\n });\n }\n const sInitW = obj.w || 100, sInitH = obj.h || 100;\n const sInitPts = sStickerHandlePts(sInitW, sInitH);\n [[\"tl\",\"tl\"],[\"tm\",\"tm\"],[\"tr\",\"tr\"],[\"ml\",\"ml\"],[\"mr\",\"mr\"],[\"bl\",\"bl\"],[\"bm\",\"bm\"],[\"br\",\"br\"]].forEach(([pos]) => {\n const h = document.createElement(\"div\");\n h.className = `dmb-frame-handle dmb-frame-handle-${pos}`;\n h.dataset.handle = pos;\n const [lx, ty] = sInitPts[pos];\n h.style.left = lx + \"px\";\n h.style.top = ty + \"px\";\n sWrap.appendChild(h);\n });\n\n const { gH: sGH, gV: sGV } = dmbGetSnapGuides(container);\n\n sWrap.addEventListener(\"click\", (e) => {\n if (e.target.closest(\".dmb-frame-handle\")) return;\n e.stopPropagation();\n showFrameToolbarFor(sWrap, obj, { targetType, pageNumber, zone });\n });\n\n let sDMode = null, sSx = 0, sSy = 0, sSox = 0, sSoy = 0, sSow = 0, sSoh = 0;\n const S_MIN = 30;\n\n sWrap.addEventListener(\"pointerdown\", (e) => {\n if (e.target.closest(\".dmb-frame-handle\")) return;\n e.preventDefault();\n e.stopPropagation();\n if (obj.contained) sWrap.style.clipPath = \"\"; // show full during drag\n showFrameToolbarFor(sWrap, obj, { targetType, pageNumber, zone });\n sDMode = \"move\";\n sSx = e.clientX; sSy = e.clientY;\n sSox = obj.x; sSoy = obj.y;\n const _Z = _nodeOnScreenScale(sWrap) || 1;\n const _cW = container.offsetWidth || 270; // cache once \u2014 avoids a per-move reflow\n const _cH = container.offsetHeight || 382;\n let _liftS = null;\n if (targetType === \"page\") {\n const _pr = sWrap.closest(\"[data-spread-row]\");\n if (_pr) {\n const _wr = sWrap.getBoundingClientRect(), _rr = _pr.getBoundingClientRect();\n _liftS = { pagesRow: _pr, origParent: sWrap.parentElement, origZ: sWrap.style.zIndex };\n sSox = (_wr.left - _rr.left) / _Z; sSoy = (_wr.top - _rr.top) / _Z;\n sWrap.style.left = sSox + \"px\"; sWrap.style.top = sSoy + \"px\"; sWrap.style.zIndex = \"9000\"; // below guides (9999)\n _pr.appendChild(sWrap);\n }\n }\n const onMove = (ev) => {\n if (sDMode !== \"move\") return;\n const dx = (ev.clientX - sSx) / _Z, dy = (ev.clientY - sSy) / _Z;\n if (_liftS) {\n const _rawL = sSox + dx, _rawT = sSoy + dy;\n const { dx: _sdx, dy: _sdy } = _dmbLiftSnap(_rawL, _rawT, obj.w, obj.h, obj.id, _liftS, sGH, sGV, targetType, pageNumber);\n sWrap.style.left = (_rawL + _sdx) + \"px\"; sWrap.style.top = (_rawT + _sdy) + \"px\";\n } else {\n obj.x = Math.max(-obj.w / 2, Math.min(_cW - obj.w / 2, sSox + dx));\n obj.y = Math.max(-obj.h / 2, Math.min(_cH - obj.h / 2, sSoy + dy));\n sWrap.style.left = obj.x + \"px\"; sWrap.style.top = obj.y + \"px\";\n if (obj.coverZone) dmbApplyZoneClip(sWrap, obj);\n dmbCheckSnap(obj, container, sGH, sGV, { targetType, pageNumber });\n sWrap.style.left = obj.x + \"px\"; sWrap.style.top = obj.y + \"px\";\n showFrameToolbarFor(sWrap, obj, { targetType, pageNumber, zone });\n }\n };\n const onUp = async () => {\n sDMode = null;\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onUp);\n if (_liftS) {\n const _rx = parseFloat(sWrap.style.left), _ry = parseFloat(sWrap.style.top);\n const _pgR = _liftS.origParent?.parentElement?.getBoundingClientRect();\n const _rR = _liftS.pagesRow.getBoundingClientRect();\n obj.x = _rx - (_pgR ? (_pgR.left - _rR.left) / _Z : 0); obj.y = _ry;\n const _cW = _liftS.origParent.offsetWidth || 270;\n const _cH = _liftS.origParent.offsetHeight || 382;\n obj.x = Math.max(-obj.w / 2, Math.min(_cW - obj.w / 2, obj.x));\n obj.y = Math.max(-obj.h / 2, Math.min(_cH - obj.h / 2, obj.y));\n sWrap.style.left = obj.x + \"px\"; sWrap.style.top = obj.y + \"px\";\n sWrap.style.zIndex = _liftS.origZ; _liftS.origParent.appendChild(sWrap); _liftS = null;\n }\n pushUndoState(\"Move Sticker\");\n if (targetType === \"cover\") {\n _dmbAutoAssignCoverZone(obj, sWrap);\n } else if (targetType === \"page\" && typeof pageNumber === \"number\") {\n await dmbHandleCrossPageMove(obj, pageNumber);\n }\n };\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", onUp);\n });\n\n sWrap.querySelectorAll(\".dmb-frame-handle\").forEach((handle) => {\n handle.addEventListener(\"pointerdown\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n showFrameToolbarFor(sWrap, obj, { targetType, pageNumber, zone });\n sDMode = handle.dataset.handle;\n sSx = e.clientX; sSy = e.clientY;\n sSox = obj.x; sSoy = obj.y;\n sSow = obj.w || 100; sSoh = obj.h || 100;\n const sAspect = sSow / (sSoh || 1);\n const _Z = _nodeOnScreenScale(sWrap) || 1;\n const onMove = (ev) => {\n const dx = (ev.clientX - sSx) / _Z;\n const dy = (ev.clientY - sSy) / _Z;\n let nx = sSox, ny = sSoy, nw = sSow, nh = sSoh;\n if (sDMode === \"tm\" || sDMode === \"bm\") {\n nh = Math.max(S_MIN, sDMode === \"tm\" ? sSoh - dy : sSoh + dy);\n if (sDMode === \"tm\") ny = sSoy + sSoh - nh;\n nw = Math.max(S_MIN, Math.round(nh * sAspect));\n nx = sSox + (sSow - nw) / 2;\n } else if (sDMode === \"ml\" || sDMode === \"mr\") {\n nw = Math.max(S_MIN, sDMode === \"ml\" ? sSow - dx : sSow + dx);\n if (sDMode === \"ml\") nx = sSox + sSow - nw;\n nh = Math.max(S_MIN, Math.round(nw / sAspect));\n ny = sSoy + (sSoh - nh) / 2;\n } else {\n if (sDMode.includes(\"r\")) nw = Math.max(S_MIN, sSow + dx);\n if (sDMode.includes(\"l\")) { nw = Math.max(S_MIN, sSow - dx); nx = sSox + sSow - nw; }\n nh = Math.max(S_MIN, Math.round(nw / sAspect));\n if (sDMode.includes(\"t\")) ny = sSoy + sSoh - nh;\n }\n obj.x = nx; obj.y = ny; obj.w = nw; obj.h = nh;\n _dmbResizeSnap(obj, container, { targetType, pageNumber }, sDMode);\n sWrap.style.left = obj.x + \"px\"; sWrap.style.top = obj.y + \"px\";\n sWrap.style.width = obj.w + \"px\"; sWrap.style.height = obj.h + \"px\";\n _sApplySize();\n updateStickerHandles(obj.w, obj.h);\n if (obj.coverZone) dmbApplyZoneClip(sWrap, obj);\n showFrameToolbarFor(sWrap, obj, { targetType, pageNumber, zone });\n };\n const onUp = () => {\n sDMode = null;\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onUp);\n pushUndoState(\"Resize Sticker\");\n if (targetType === \"cover\") {\n _dmbAutoAssignCoverZone(obj, sWrap);\n }\n };\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", onUp);\n });\n });\n\n /* \u2500\u2500 rotation handle (fixed-position, appended to body to escape overflow:hidden) \u2500\u2500 */\n const sRotHandle = document.createElement(\"div\");\n sRotHandle.className = \"dmb-map-rotate-handle dmb-map-rot-float\";\n sRotHandle.innerHTML = \"↻\";\n sRotHandle.title = \"Rotate\";\n sRotHandle.style.display = \"none\";\n document.body.appendChild(sRotHandle);\n sWrap._dmbRotHandle = sRotHandle;\n\n function updateStickerRotPos() {\n if (!sWrap.isConnected) { sRotHandle.remove(); return; }\n const r = sWrap.getBoundingClientRect();\n sRotHandle.style.left = (r.right + 14) + \"px\";\n sRotHandle.style.top = (r.bottom + 14) + \"px\";\n }\n\n requestAnimationFrame(updateStickerRotPos);\n\n sRotHandle.addEventListener(\"pointerdown\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n const startRot = obj.rotation || 0;\n const r = sWrap.getBoundingClientRect();\n const cx = r.left + r.width / 2;\n const cy = r.top + r.height / 2;\n const startAng = Math.atan2(e.clientY - cy, e.clientX - cx) * 180 / Math.PI;\n const onMove = (ev) => {\n const ang = Math.atan2(ev.clientY - cy, ev.clientX - cx) * 180 / Math.PI;\n obj.rotation = _dmbSnapAngle(startRot + (ang - startAng));\n sWrap.style.transform = `rotate(${obj.rotation}deg)`;\n updateStickerRotPos();\n showRotDegTooltip(obj.rotation, ev.clientX, ev.clientY);\n };\n const onUp = () => {\n hideRotDegTooltip();\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onUp);\n pushUndoState(\"Rotate Sticker\");\n };\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", onUp);\n });\n\n container.appendChild(sWrap);\n return;\n }\n\n /* \u2500\u2500 SHAPE OBJECTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Shapes follow the same drag/resize/rotate pattern as stickers, but\n * use an inline SVG instead of an
![]()
. The shape type (rect, circle, etc.)\n * is stored in obj.shapeType. Editing is via dmbShapeEditBar.\n *\n * WARNING: Do NOT merge this block with the sticker block above \u2014 shapes\n * use dmbOpenShapeEditBar, not showFrameToolbarFor.\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (obj.type === \"shape\" && obj.shapeType === \"line\") {\n // Lines have their own endpoint-based renderer (2 draggable ends, no box).\n _dmbRenderLineObject(obj, container, targetType, pageNumber, zone);\n return;\n }\n\n if (obj.type === \"shape\") {\n if ((obj.w || 0) < 1 || (obj.h || 0) < 1) { obj.w = 120; obj.h = 120; }\n\n const shWrap = document.createElement(\"div\");\n shWrap.className = \"dmb-shape-object\";\n shWrap.dataset.objectId = obj.id;\n shWrap.style.position = \"absolute\";\n shWrap.style.left = (obj.x || 60) + \"px\";\n shWrap.style.top = (obj.y || 60) + \"px\";\n shWrap.style.width = obj.w + \"px\";\n shWrap.style.height = obj.h + \"px\";\n var _zShape = Number(_dmbZOf(obj, 30)) || 0;\n if (_dmbObjOverhangs(obj, pageNumber)) _zShape = Math.max(1, _zShape);\n shWrap.style.zIndex = String(_zShape);\n shWrap.style.transform = `rotate(${obj.rotation || 0}deg)`;\n shWrap.style.transformOrigin = \"center center\";\n shWrap.style.overflow = \"visible\";\n shWrap.dataset.z = String(_dmbZOf(obj, 30));\n if (obj.coverZone) dmbApplyZoneClip(shWrap, obj);\n if (obj.contained) _dmbApplyContain(shWrap, obj, targetType === \"cover\");\n\n // The SVG fills the wrapper completely\n shWrap.innerHTML = buildShapeSvg(obj.shapeType, obj.fill, obj.stroke, obj.strokeWidth, obj.opacity, obj.cornerRadius, obj.w, obj.h, obj.strokeStyle);\n\n // 8 resize handles (same positions as maps/stickers)\n const shHandles = [\n [\"tl\",\"0\",\"0\"],[\"tm\",\"50%\",\"0\"],[\"tr\",\"100%\",\"0\"],\n [\"ml\",\"0\",\"50%\"],[\"mr\",\"100%\",\"50%\"],\n [\"bl\",\"0\",\"100%\"],[\"bm\",\"50%\",\"100%\"],[\"br\",\"100%\",\"100%\"]\n ];\n shHandles.forEach(([pos, l, t]) => {\n const hEl = document.createElement(\"div\");\n hEl.className = `dmb-frame-handle dmb-frame-handle-${pos}`;\n hEl.dataset.handle = pos;\n hEl.style.left = l;\n hEl.style.top = t;\n shWrap.appendChild(hEl);\n });\n\n // Rotation handle (body-level, escapes overflow:hidden)\n const shRotHandle = document.createElement(\"div\");\n shRotHandle.className = \"dmb-map-rotate-handle dmb-map-rot-float\";\n shRotHandle.innerHTML = \"↻\";\n shRotHandle.title = \"Rotate\";\n shRotHandle.style.display = \"none\";\n document.body.appendChild(shRotHandle);\n shWrap._dmbRotHandle = shRotHandle;\n\n function updateShRotPos() {\n if (!shWrap.isConnected) { shRotHandle.remove(); return; }\n const r = shWrap.getBoundingClientRect();\n shRotHandle.style.left = (r.right + 14) + \"px\";\n shRotHandle.style.top = (r.bottom + 14) + \"px\";\n }\n requestAnimationFrame(updateShRotPos);\n\n shRotHandle.addEventListener(\"pointerdown\", (e) => {\n e.preventDefault(); e.stopPropagation();\n const startRot = obj.rotation || 0;\n const r = shWrap.getBoundingClientRect();\n const cx = r.left + r.width / 2;\n const cy = r.top + r.height / 2;\n const startAng = Math.atan2(e.clientY - cy, e.clientX - cx) * 180 / Math.PI;\n const onMove = (ev) => {\n const ang = Math.atan2(ev.clientY - cy, ev.clientX - cx) * 180 / Math.PI;\n obj.rotation = _dmbSnapAngle(startRot + (ang - startAng));\n shWrap.style.transform = `rotate(${obj.rotation}deg)`;\n // Sync rotation input in edit bar if this shape is selected\n const rotInput = document.getElementById(\"dmbShapeRotation\");\n if (rotInput && dmbEditingShapeObj === obj) rotInput.value = Math.round(obj.rotation);\n updateShRotPos();\n showRotDegTooltip(obj.rotation, ev.clientX, ev.clientY);\n };\n const onUp = () => {\n hideRotDegTooltip();\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onUp);\n pushUndoState(\"Rotate Shape\");\n };\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", onUp);\n });\n\n // Snap guides\n const { gH: shGH, gV: shGV } = dmbGetSnapGuides(container);\n\n let shDMode = null, shSx = 0, shSy = 0, shOx = 0, shOy = 0, shOw = 0, shOh = 0;\n const SH_MIN = 10;\n\n // Click \u2192 open shape edit bar\n shWrap.addEventListener(\"click\", (e) => {\n if (e.target.closest(\".dmb-frame-handle\")) return;\n e.stopPropagation();\n dmbOpenShapeEditBar(obj, shWrap);\n });\n\n // Pointer move/drag\n shWrap.addEventListener(\"pointerdown\", (e) => {\n if (e.target.closest(\".dmb-frame-handle\")) return;\n e.preventDefault(); e.stopPropagation();\n if (obj.contained) shWrap.style.clipPath = \"\"; // show full during drag\n dmbOpenShapeEditBar(obj, shWrap);\n shDMode = \"move\";\n shSx = e.clientX; shSy = e.clientY;\n shOx = obj.x; shOy = obj.y;\n const _Z = _nodeOnScreenScale(shWrap) || 1;\n const _cW = container.offsetWidth || 270; // cache once \u2014 container size can't\n const _cH = container.offsetHeight || 382; // change mid-drag; reading it each\n // move forced a reflow every frame\n const _rangeX = _dmbObjDragRangeX(obj, pageNumber, _cW); // spread-wide for shape/map\n const onMove = (ev) => {\n if (shDMode !== \"move\") return;\n const dx = (ev.clientX - shSx) / _Z, dy = (ev.clientY - shSy) / _Z;\n obj.x = Math.max(_rangeX.lo, Math.min(_rangeX.hi, shOx + dx));\n obj.y = Math.max(-obj.h / 2, Math.min(_cH - obj.h / 2, shOy + dy));\n shWrap.style.left = obj.x + \"px\";\n shWrap.style.top = obj.y + \"px\";\n if (obj.coverZone) dmbApplyZoneClip(shWrap, obj);\n dmbCheckSnap(obj, container, shGH, shGV, { targetType, pageNumber });\n shWrap.style.left = obj.x + \"px\"; shWrap.style.top = obj.y + \"px\";\n // Bar is docked at the top \u2014 no need to move it while dragging the shape.\n };\n const onUp = async () => {\n shDMode = null;\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onUp);\n pushUndoState(\"Move Shape\");\n if (targetType === \"cover\") {\n _dmbAutoAssignCoverZone(obj, shWrap);\n } else if (targetType === \"page\" && typeof pageNumber === \"number\") {\n await dmbHandleCrossPageMove(obj, pageNumber);\n }\n };\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", onUp);\n });\n\n // Resize handles\n shWrap.querySelectorAll(\".dmb-frame-handle\").forEach((handle) => {\n handle.addEventListener(\"pointerdown\", (e) => {\n e.preventDefault(); e.stopPropagation();\n shDMode = handle.dataset.handle;\n shSx = e.clientX; shSy = e.clientY;\n shOx = obj.x; shOy = obj.y;\n shOw = obj.w || 120; shOh = obj.h || 120;\n const _Z = _nodeOnScreenScale(shWrap) || 1;\n const onMove = (ev) => {\n const dx = (ev.clientX - shSx) / _Z, dy = (ev.clientY - shSy) / _Z;\n let nx = shOx, ny = shOy, nw = shOw, nh = shOh;\n if (shDMode.includes(\"r\")) nw = Math.max(SH_MIN, shOw + dx);\n if (shDMode.includes(\"l\")) { nw = Math.max(SH_MIN, shOw - dx); nx = shOx + shOw - nw; }\n if (shDMode.includes(\"b\")) nh = Math.max(SH_MIN, shOh + dy);\n if (shDMode.includes(\"t\")) { nh = Math.max(SH_MIN, shOh - dy); ny = shOy + shOh - nh; }\n // For tm/bm (top/bottom middle) \u2192 height only\n if (shDMode === \"tm\") { nh = Math.max(SH_MIN, shOh - dy); ny = shOy + shOh - nh; nw = shOw; }\n if (shDMode === \"bm\") { nh = Math.max(SH_MIN, shOh + dy); nw = shOw; }\n if (shDMode === \"ml\") { nw = Math.max(SH_MIN, shOw - dx); nx = shOx + shOw - nw; nh = shOh; }\n if (shDMode === \"mr\") { nw = Math.max(SH_MIN, shOw + dx); nh = shOh; }\n obj.x = nx; obj.y = ny; obj.w = nw; obj.h = nh;\n _dmbResizeSnap(obj, container, { targetType, pageNumber }, shDMode);\n shWrap.style.left = obj.x + \"px\";\n shWrap.style.top = obj.y + \"px\";\n shWrap.style.width = obj.w + \"px\";\n shWrap.style.height = obj.h + \"px\";\n if (obj.coverZone) dmbApplyZoneClip(shWrap, obj);\n };\n const onUp = () => {\n shDMode = null;\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", onUp);\n // Rebuild the SVG at the new size: rect/rounded-rect borders inset by\n // sw/2 px, which is size-dependent, and a live resize only rescales the\n // existing SVG (doesn't rebuild it). Replace just the
';\n } catch(e) { return obj.svg || \"\"; }\n }\n\n async function drawSvgObj(ctx, obj, dx, dy, dw, dh) {\n var markup = styledSvg(obj);\n // styledSvg sets vector-effect=\"non-scaling-stroke\" \u2014 correct for the\n // builder (always 1.2px on screen) but UNRELIABLE when SVG is loaded as\n // an external image (browsers silently ignore vector-effect in that context).\n // Result: stroke scales by viewBoxWidth/renderWidth. Geographic SVGs have\n // large viewBox coordinates \u2192 stroke \u2192 0px \u2192 map completely invisible.\n //\n // FIX: parse the SVG viewBox, remove vector-effect from all paths, and\n // recompute stroke-width in SVG user-units so the stroke renders as exactly\n // TARGET_STROKE_PX pixels in the intermediate bitmap \u2014 regardless of viewBox.\n // ctx.drawImage then upscales to the PDF canvas size, giving a clearly\n // visible ~5\u20138px border line at print resolution.\n\n var builderW = Math.max(1, obj.w || 200);\n var builderH = Math.max(1, obj.h || 200);\n // ONE factor for both axes, so the bitmap's aspect always equals the\n // destination's. Rasterise at the real print scale (dw / builderW) rather\n // than a fixed x2, capped so a full-page map cannot blow past the browser's\n // maximum bitmap dimension.\n var _mapK = Math.max(2, Math.min(dw / builderW, 4096 / Math.max(builderW, builderH)));\n var renderW = Math.round(builderW * _mapK); // intermediate bitmap width\n var renderH = Math.round(builderH * _mapK); // intermediate bitmap height\n\n try {\n var tmpDoc = new DOMParser().parseFromString(markup, \"image/svg+xml\");\n var tmpSvg = tmpDoc.querySelector(\"svg\");\n if (tmpSvg) {\n // \u2500\u2500 Set explicit bitmap dimensions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n tmpSvg.setAttribute(\"width\", String(renderW));\n tmpSvg.setAttribute(\"height\", String(renderH));\n\n // \u2500\u2500 Compute viewBox-aware stroke width \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // In the builder, vector-effect:non-scaling-stroke makes the stroke\n // always appear as exactly obj.strokeWidth CSS pixels regardless of\n // zoom. For the PDF we must convert that pixel value to SVG user\n // units at the intermediate bitmap resolution.\n //\n // Formula:\n // builderW pixels wide \u2194 vbW SVG user units\n // \u2192 1 SVG unit = builderW/vbW px in the builder\n // \u2192 user wants userSW px \u2192 in SVG units = userSW * (vbW / builderW)\n //\n // renderW = builderW * 2, so the render is 2\u00D7 the builder size and\n // the stroke appears 2\u00D7 larger in the bitmap \u2014 ctx.drawImage then\n // scales it down proportionally when drawing onto the PDF canvas.\n var vbStr = tmpSvg.getAttribute(\"viewBox\") || \"\";\n var vbParts = vbStr.trim().split(/[\\s,]+/);\n // viewBox = \"minX minY width height\" \u2192 width is index 2\n var vbW = (vbParts.length >= 3) ? (parseFloat(vbParts[2]) || renderW) : renderW;\n var svgPxScale = renderW / vbW; // how many px per SVG user unit\n // User's intended stroke width in builder CSS pixels\n var userSW = Math.max(0.5, parseFloat(obj.strokeWidth || 1.2));\n // Convert to SVG user units so it renders proportionally in the PDF\n var scaledSW = userSW * vbW / Math.max(1, builderW);\n\n tmpSvg.querySelectorAll(\"path\").forEach(function(p) {\n // Remove vector-effect \u2014 it's ignored in external-image context\n // and causes unpredictable stroke scaling\n p.removeAttribute(\"vector-effect\");\n // Apply viewBox-calibrated stroke width (skip if stroke already none)\n if (p.getAttribute(\"stroke\") !== \"none\") {\n p.setAttribute(\"stroke-width\", String(scaledSW.toFixed(4)));\n }\n });\n // \u2500\u2500 Outline ring: USER UNITS here, unlike the builder \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // styledSvg wraps the paths in an inner `
` (see the return\n // statement above), so this filter runs in the SVG's USER space and the\n // radius is in viewBox units - same space as a path's stroke-width.\n // scaledSW is therefore correct:\n // ring_canvas = R * (renderW/vbW) * (dw/renderW) = R * dw/vbW\n // = userSW * dw/builderW = userSW * PAGE_SCALE \u2713\n // The BUILDER is the odd one out: the stored map markup has no , so\n // dmbEnsureOutlineFilter's filter lands on the ROOT