/* Agentic PNW preview bridge: the client-portal canvas asks for the viewport (scroll + size) when the owner marks a spot to change. */ window.addEventListener("message", function (e) { if (e.data && e.data.apnw === "viewport-req" && e.source) { e.source.postMessage( { apnw: "viewport", scrollY: window.scrollY, w: window.innerWidth, h: window.innerHeight }, e.origin === "null" ? "*" : e.origin ); } }); /* Instant Mark-spot capture: rasterize the viewport in-page and hand it back — no server round trip, no headless browser. */ window.addEventListener("message", function (e) { if (!e.data || e.data.apnw !== "capture-req" || !e.source) return; var reply = function (msg) { e.source.postMessage(msg, e.origin === "null" ? "*" : e.origin); }; (async function () { try { var scrollY = window.scrollY; var w = window.innerWidth, h = window.innerHeight; var scale = Math.min(window.devicePixelRatio || 1, 1.25); var css = ""; for (var i = 0; i < document.styleSheets.length; i++) { try { var rules = document.styleSheets[i].cssRules; for (var j = 0; j < rules.length; j++) css += rules[j].cssText + "\n"; } catch (err) {} } var clone = document.documentElement.cloneNode(true); clone.querySelectorAll("script,noscript,iframe").forEach(function (n) { n.remove(); }); var liveImgs = document.querySelectorAll("img"); var cloneImgs = clone.querySelectorAll("img"); for (var k = 0; k < cloneImgs.length; k++) { var live = liveImgs[k]; if (!live) continue; var r = live.getBoundingClientRect(); if (r.bottom < 0 || r.top > h || !live.naturalWidth) { cloneImgs[k].removeAttribute("src"); continue; } try { var c = document.createElement("canvas"); c.width = live.naturalWidth; c.height = live.naturalHeight; c.getContext("2d").drawImage(live, 0, 0); cloneImgs[k].src = c.toDataURL("image/jpeg", 0.72); } catch (err) { cloneImgs[k].removeAttribute("src"); } } var style = document.createElement("style"); style.textContent = css; clone.insertBefore(style, clone.firstChild); var xhtml = new XMLSerializer().serializeToString(clone); var svg = '"; var url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml;charset=utf-8" })); var img = new Image(); img.src = url; await img.decode(); var canvas = document.createElement("canvas"); canvas.width = Math.round(w * scale); canvas.height = Math.round(h * scale); canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height); URL.revokeObjectURL(url); reply({ apnw: "capture", ok: true, dataUrl: canvas.toDataURL("image/webp", 0.78) }); } catch (err) { reply({ apnw: "capture", ok: false }); } })(); }); /* Inline edit mode: the portal arms this, editable [data-cms] nodes outline on hover, clicks report back, previews patch the DOM live. v5 adds: a layers tree (layers-req -> "layers"), drag-to-reorder of same-list array items (posts "edit-move", live-reorders the DOM and re-stamps keys so key index == visible position), inbound "edit-move" (portal-driven moves: undo/redo/guard) and "edit-highlight" (the layers tab selects an element on the page). All v4 messages are byte-compatible. v5.1 adds design overrides: section roots carry data-design=""; "design-preview {scope, overrides}" applies the site's preset classes live (originals cached per scope, reset first so every message is idempotent), "design-revert {scope}" restores them, edit-select/layers report the element's scope, and "design-vocab" describes the site's preset vocabulary (served on request via "design-vocab-req"). v5.2 adds the structural layer: sections are the roots stamped data-design=""; "structure-insert {page, sectionId, atIndex, seed?}" renders a wireframe placeholder with the seed copy (flagged as a preview) or, seed-less, re-attaches a removed section's cached live node; "structure-remove {page, scope}" detaches the section instantly (cached for undo); "structure-move {page, fromIndex, toIndex}" live-reorders via insertBefore; section drag handles arm with edit mode (page drags post "structure-move"); "structure-req" answers with the live "structure {page, sections}" list, re-posted after every op. */ (function () { var active = false, hoverEl = null, selEl = null, originals = {}, rectT = null; var drag = null, line = null, movesLog = [], replaying = false; /* design override preset tables: the ES5 mirror of src/lib/design-presets.ts (keep them in sync) */ var DESIGN_PAD = { compact: "apnw-pad-compact", spacious: "apnw-pad-spacious" }; var DESIGN_BG = { bg: "apnw-bg-bg", paper: "apnw-bg-paper", soft: "apnw-bg-soft", navy: "apnw-bg-navy", ink: "apnw-bg-ink" }; var DESIGN_BG_CLASSES = ["apnw-bg-bg", "apnw-bg-paper", "apnw-bg-soft", "apnw-bg-navy", "apnw-bg-ink"]; /* per-scope facets the portal inspector may offer (absent = true) */ var DESIGN_SCOPES = { header: { paddingY: false, background: false }, hero: { paddingY: false, background: false }, approach: {}, trades: {}, visualizers: {}, values: {}, gallery: {}, projects: {}, resources: {}, finalCta: {}, footer: {} }; var designOriginals = {}; /* ---------- structural layer (v5.2) ---------- Page structure is data (src/content/page-structure.json): sections are the roots stamped data-design="". The portal inserts, removes, and moves them live here, then commits the new array through the batch flow. STRUCTURE_LIB is the ES5 mirror of src/lib/section-registry.ts (labels, insert guards, seed fields) - keep the two in sync. A remove detaches the node and caches it so an undo (a seed-less insert) re-attaches it with its live edits intact; an insert carrying a seed renders a wireframe placeholder (flagged "Preview - not on your site yet") so the user sees their copy where the section will land. Ops log to structureLog and revert on disarm (the portal re-applies queued ops on re-arm, like text patches). */ var STRUCTURE_LIB = { header: { label: "Header", insertable: false, required: true, pinned: "start", seed: [] }, hero: { label: "Hero", insertable: false, required: false, pinned: null, seed: [] }, approach: { label: "Approach", insertable: true, required: false, pinned: null, seed: [ { key: "home.approach.eyebrow", label: "Eyebrow line", type: "text" }, { key: "home.approach.headingA", label: "Heading", type: "text" } ] }, trades: { label: "Trades", insertable: true, required: false, pinned: null, seed: [ { key: "home.trades.eyebrow", label: "Eyebrow line", type: "text" }, { key: "home.trades.support", label: "Support text", type: "textarea" } ] }, visualizers: { label: "Visualizers", insertable: true, required: false, pinned: null, seed: [ { key: "home.visualizers.eyebrow", label: "Eyebrow line", type: "text" }, { key: "home.visualizers.headingA", label: "Heading", type: "text" } ] }, values: { label: "Values", insertable: true, required: false, pinned: null, seed: [ { key: "home.values.eyebrow", label: "Eyebrow line", type: "text" }, { key: "home.values.headingA", label: "Heading", type: "text" } ] }, gallery: { label: "Selected work", insertable: true, required: false, pinned: null, seed: [ { key: "home.gallery.eyebrow", label: "Eyebrow line", type: "text" }, { key: "home.gallery.headingA", label: "Heading", type: "text" } ] }, projects: { label: "Recent projects", insertable: true, required: false, pinned: null, seed: [ { key: "home.projects.eyebrow", label: "Eyebrow line", type: "text" }, { key: "home.projects.headingA", label: "Heading", type: "text" } ] }, resources: { label: "Resource hub", insertable: true, required: false, pinned: null, seed: [ { key: "home.resources.eyebrow", label: "Eyebrow line", type: "text" }, { key: "home.resources.headingA", label: "Heading", type: "text" } ] }, finalCta: { label: "Final CTA", insertable: true, required: false, pinned: null, seed: [ { key: "home.finalCta.eyebrow", label: "Eyebrow line", type: "text" }, { key: "home.finalCta.body", label: "Body text", type: "textarea" }, { key: "home.finalCta.ctaLabel", label: "Button label", type: "text" } ] }, footer: { label: "Footer", insertable: false, required: true, pinned: "end", seed: [] } }; var removedSections = {}, structureLog = [], sdrag = null; function post(msg) { if (window.parent && window.parent !== window) window.parent.postMessage(msg, "*"); } function rectOf(el) { var r = el.getBoundingClientRect(); return { x: r.left, y: r.top, w: r.width, h: r.height }; } function reportRect() { if (rectT) return; rectT = setTimeout(function () { rectT = null; if (active && selEl && document.contains(selEl)) { post({ apnw: "edit-rect", key: selEl.getAttribute("data-cms"), rect: rectOf(selEl) }); } }, 80); } var style = document.createElement("style"); style.textContent = ".apnw-hover{outline:2px solid #2f5f8f !important;outline-offset:2px;cursor:pointer !important}.apnw-selected{outline:2px dashed #2f5f8f !important;outline-offset:2px}.apnw-draggable{cursor:grab !important}.apnw-dragging{opacity:.55;cursor:grabbing !important}.apnw-drop-line{position:fixed;z-index:99999;background:#2f5f8f;pointer-events:none;display:none;border-radius:2px}" + ".apnw-relative{position:relative !important}" + ".apnw-section-handle{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:4px;padding:4px 12px;border-radius:999px;background:#2f5f8f;color:#fff;font:600 11px/1.4 system-ui,sans-serif;cursor:grab;border:none;box-shadow:0 2px 10px rgba(0,0,0,.3);white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-user-drag:element}" + ".apnw-section-handle:active{cursor:grabbing}" + ".apnw-placeholder{position:relative;display:block;padding:64px 24px;background:#f4f4f5;background-image:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(0,0,0,.025) 12px,rgba(0,0,0,.025) 24px)}" + ".apnw-ph-box{max-width:640px;margin:0 auto;text-align:center;border:2px dashed #2f5f8f;border-radius:16px;padding:40px 28px;background:#fff}" + ".apnw-ph-flag{display:inline-block;margin-bottom:14px;padding:4px 12px;border-radius:999px;background:#2f5f8f;color:#fff;font:700 10px/1.5 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}" + ".apnw-ph-type{margin:0 0 10px;font:700 26px/1.2 system-ui,sans-serif;color:#18181b}" + ".apnw-ph-eyebrow{margin:0 0 6px;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#71717a}" + ".apnw-ph-text{margin:8px 0 0;font:400 15px/1.6 system-ui,sans-serif;color:#52525b}" + ".apnw-ph-cta{display:inline-block;margin-top:16px;padding:10px 22px;border-radius:999px;background:#18181b;color:#fff;font:600 13px/1 system-ui,sans-serif}"; document.head.appendChild(style); function revert(key) { var el = document.querySelector('[data-cms="' + key + '"]'); if (el && key in originals) { if (originals[key].img != null) el.src = originals[key].img; else el.textContent = originals[key].text; delete originals[key]; } } /* ---------- design overrides (v5.1) ---------- A scope is a section root stamped data-design="". A preview is the FULL desired override set: reset to the section's default classes (its data-design-default stamp; a facet absent from the set means "back to default"), then apply visibility (hidden), paddingY (strip pt/pb/py classes incl. sm: variants, add the preset) and background (strip the site's known surface classes, add the preset). Revert restores the cached original className (the persisted rendering) and drops the cache. */ function scopeOf(el) { var p = el; while (p && p !== document.body && p !== document.documentElement) { var s = p.getAttribute && p.getAttribute("data-design"); if (s) return s; p = p.parentElement; } return null; } function applyDesign(scope, overrides) { var el = document.querySelector('[data-design="' + scope + '"]'); if (!el) return; if (!(scope in designOriginals)) designOriginals[scope] = el.className; /* full-set semantics: the base is the section's OWN default classes (stamped at render), so a facet absent from the set means "back to default" even on a fresh frame whose className carries the persisted overrides; revert restores the persisted rendering */ var base = el.getAttribute("data-design-default"); el.className = base != null ? base : designOriginals[scope]; var o = overrides || {}; if (o.visible === false) el.classList.add("hidden"); if (o.paddingY && DESIGN_PAD[o.paddingY]) { var kept = []; var cur = el.className.split(/\s+/); for (var i = 0; i < cur.length; i++) { if (/^apnw-pad-/.test(cur[i])) continue; kept.push(cur[i]); } el.className = kept.join(" "); var pad = DESIGN_PAD[o.paddingY].split(" "); for (var p = 0; p < pad.length; p++) el.classList.add(pad[p]); } if (o.background && DESIGN_BG[o.background]) { for (var b = 0; b < DESIGN_BG_CLASSES.length; b++) el.classList.remove(DESIGN_BG_CLASSES[b]); el.classList.add(DESIGN_BG[o.background]); } } function revertDesign(scope) { var el = document.querySelector('[data-design="' + scope + '"]'); if (el && scope in designOriginals) { el.className = designOriginals[scope]; delete designOriginals[scope]; } } function postDesignVocab() { post({ apnw: "design-vocab", v: 5.1, paddingY: [{ id: "compact", label: "Compact" }, { id: "spacious", label: "Spacious" }], background: [ { id: "bg", label: "Bone", hex: "#faf8f3" }, { id: "paper", label: "Paper", hex: "#ffffff" }, { id: "soft", label: "Soft", hex: "#f0ece2" }, { id: "navy", label: "Navy", hex: "#0a1f44" }, { id: "ink", label: "Ink", hex: "#0d0d0d" } ], scopes: DESIGN_SCOPES }); } /* ---------- structure ops (v5.2) ---------- The live section list = the roots stamped data-design in document order (sections never nest; placeholders included). Every op re-posts the "structure" message so the portal's panel mirrors the page exactly. */ function sectionEls() { var out = []; var all = document.querySelectorAll("[data-design]"); for (var i = 0; i < all.length; i++) { var p = all[i].parentElement, nested = false; while (p) { if (p.getAttribute && p.getAttribute("data-design")) { nested = true; break; } p = p.parentElement; } if (!nested) out.push(all[i]); } return out; } function postStructure() { var els = sectionEls(), sections = []; for (var i = 0; i < els.length; i++) { sections.push({ id: els[i].getAttribute("data-design"), placeholder: els[i].getAttribute("data-apnw-placeholder") === "1" }); } post({ apnw: "structure", page: location.pathname, sections: sections }); } function escHtml(s) { var d = document.createElement("div"); d.textContent = s == null ? "" : String(s); return d.innerHTML; } /* The wireframe a seeded insert renders: the section's shell with the seed copy in place, flagged as a preview. It carries the scope's data-design stamp so design previews and structure ops treat it like any section, and data-apnw-placeholder so nothing mistakes it for committed content. */ function buildPlaceholder(id, seed) { var lib = STRUCTURE_LIB[id] || { label: id, seed: [] }; var fields = ""; var seeds = lib.seed || []; for (var i = 0; i < seeds.length; i++) { var k = seeds[i].key; var v = seed && typeof seed[k] === "string" ? seed[k] : ""; if (!v) continue; var role = k.split(".").pop(); if (/eyebrow/i.test(role)) fields += '

' + escHtml(v) + "

"; else if (/cta/i.test(role)) fields += '' + escHtml(v) + ""; else fields += '

' + escHtml(v) + "

"; } var el = document.createElement("section"); el.setAttribute("data-design", id); el.setAttribute("data-design-default", "apnw-placeholder"); el.setAttribute("data-apnw-placeholder", "1"); el.className = "apnw-placeholder"; el.innerHTML = '

' + 'Preview - not on your site yet' + '

' + escHtml(lib.label) + "

" + fields + "

"; return el; } /* Insert at atIndex (the index in the post-insert list). A seed-less insert re-attaches the cached removed node (undo keeps live edits); a seeded insert always renders a fresh wireframe so the user sees the copy they just typed. Singleton guard: one live instance per section id (data-design scopes and data-cms keys are page-unique). */ function insertSection(id, atIndex, seed) { var live = null; var els = sectionEls(); for (var i = 0; i < els.length; i++) if (els[i].getAttribute("data-design") === id) live = els[i]; if (live) return false; var node; if (!seed && removedSections[id]) { node = removedSections[id]; delete removedSections[id]; } else { node = buildPlaceholder(id, seed); } var ref = atIndex >= 0 && atIndex < els.length ? els[atIndex] : null; if (ref) ref.parentElement.insertBefore(node, ref); else if (els.length) { var last = els[els.length - 1]; last.parentElement.insertBefore(node, last.nextSibling); } else return false; if (active) armSectionHandles(); return true; } function removeSection(id) { var els = sectionEls(); for (var i = 0; i < els.length; i++) { if (els[i].getAttribute("data-design") !== id) continue; if (els[i].getAttribute("data-apnw-placeholder") !== "1") removedSections[id] = els[i]; els[i].parentElement.removeChild(els[i]); return true; } return false; } function moveSection(fromIndex, toIndex) { var els = sectionEls(); if (fromIndex < 0 || fromIndex >= els.length || toIndex < 0 || toIndex >= els.length || fromIndex === toIndex) return; var el = els[fromIndex]; var rest = els.filter(function (x) { return x !== el; }); var ref = toIndex < rest.length ? rest[toIndex] : null; if (ref) ref.parentElement.insertBefore(el, ref); else { var last = rest[rest.length - 1]; last.parentElement.insertBefore(el, last.nextSibling); } } /* Section drag handles while armed: one grip pill per movable section (pinned/required chrome never gets one). The handle is the only draggable bit, so list-item drags inside the section are untouched. */ function armSectionHandles() { var els = sectionEls(); for (var i = 0; i < els.length; i++) { var id = els[i].getAttribute("data-design"); var lib = STRUCTURE_LIB[id]; if (!lib || lib.pinned || lib.required) continue; var found = false; for (var c = els[i].firstElementChild; c; c = c.nextElementSibling) { if (c.classList && c.classList.contains("apnw-section-handle")) { found = true; break; } } if (found) continue; /* a span, not a button: Chromium never initiates a native HTML5 drag from a mousedown on a

Plain answers for PNW homes.