@marver-design/marver 0.6.0 → 0.7.0

package/src/client/frame-host/inspect.js

@@ -0,0 +1,346 @@
+// Shared frame-inspect controller (SPEC-M3 §5/§7 + prototype-review #4/#5).
+//
+// Laser outlines, comment-pick, anchor capture/resolve, and a persistent element
+// lock ("highlight") - the review machinery shared by the canvas frame bridge
+// (bridge.js, one iframe per frame) AND the prototype stage (stage/main.tsx, one
+// persistent tree that swaps frames in place). Keeping ONE source means the two
+// surfaces never drift.
+//
+// The HOST owns wheel + navigation ownership, theme, and error wiring; inspect only
+// touches laser/pick/anchor/highlight. It self-installs the pointer + message
+// listeners and returns { modeActive } so the host can guard its own nav clicks.
+//
+//   createInspect({ post, getId, onModeChange? })
+//     post(msg)        send a message up to the shell (parent)
+//     getId()          the frame id to stamp on posts (static on canvas, the
+//                      current stage frame in play - it swaps without reload)
+//     onModeChange?()  called after any laser/pick flip (the canvas bridge uses it
+//                      to report its interaction lease; the stage ignores it)
+//
+//   shell -> frame : sh:laser · sh:pick · sh:copy-ok · sh:resolve-anchors · sh:highlight-anchor
+//   frame -> shell : sh:frame-down · sh:picked · sh:laser-copy · sh:anchor-rects
+
+// comment-mode cursor: the pin's teardrop in the comment green, duotone (dark rim,
+// lighter inner) with a white halo ring so it pops on any content; hotspot at the tail
+const PICK_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 256 256'%3E%3Cpath d='M132,24A100.11,100.11,0,0,0,32,124v84a16,16,0,0,0,16,16h84a100,100,0,0,0,0-200Z' fill='none' stroke='%23fff' stroke-width='40'/%3E%3Cpath d='M132,24A100.11,100.11,0,0,0,32,124v84a16,16,0,0,0,16,16h84a100,100,0,0,0,0-200Z' fill='%2334c759' stroke='%231f8a3d' stroke-width='12'/%3E%3Ccircle cx='138' cy='118' r='46' fill='%23fff' opacity='.32'/%3E%3C/svg%3E") 4 21, crosshair`
+// laser-mode cursor: the crosshair reticle in accent blue with a white halo ring,
+// hotspot dead center
+const LASER_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 256 256'%3E%3Cg stroke='%23fff' stroke-width='46' fill='none'%3E%3Ccircle cx='128' cy='128' r='56'/%3E%3Cpath d='M128 24 V56 M128 200 V232 M24 128 H56 M200 128 H232' stroke-linecap='round'/%3E%3C/g%3E%3Cg stroke='%230088ff' stroke-width='20' fill='none'%3E%3Ccircle cx='128' cy='128' r='56'/%3E%3Cpath d='M128 24 V56 M128 200 V232 M24 128 H56 M200 128 H232' stroke-linecap='round'/%3E%3C/g%3E%3Ccircle cx='128' cy='128' r='16' fill='%230088ff' stroke='%23fff' stroke-width='8'/%3E%3C/svg%3E") 12 12, crosshair`
+
+// filled clipboard with a check inside (Phosphor clipboard-fill + check): the label
+// wears this while confirming a copy
+const COPIED_HTML = `<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor"><path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Z"/><path d="M92 150l26 26 48-54" fill="none" stroke="rgba(20,20,24,.92)" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Element path copied</span>`
+
+const LASER_ID = 'mv-laser-style'
+const BASE_ID = 'mv-inspect-base'
+
+// hue-tinted highlight (an element's OWN depth hue - the same rainbow laser uses):
+// 2px outline + soft fill + ring, driven by whatever hue CSS var the caller names. The
+// comment-mode hover reads the LIVE depth hue (--mv-hue, mode-only); the persistent lock
+// reads a STORED hue (--mv-lock-hue, set inline per element) so the frame outline never
+// diverges from the pin/card colour if the DOM reparents.
+const HUE_HL = (sel, hueVar, imp = '') => `
+body ${sel} { outline: 2px solid hsl(var(${hueVar}) 95% 45%)${imp}; outline-offset: -2px;
+  background-image: linear-gradient(hsl(var(${hueVar}) 95% 50% / .10), hsl(var(${hueVar}) 95% 50% / .10));
+  box-shadow: 0 0 0 3px hsl(var(${hueVar}) 95% 50% / .32) }`
+// depth hue for every element (role/nesting colour) - only injected while a mode is active
+const DEPTH_HUE = (() => {
+  let r = 'body { --mv-hue: 0 }\n'
+  for (let d = 1; d <= 12; d++) r += `body ${'> * '.repeat(d)}{ --mv-hue: ${(d % 6) * 60} }\n`
+  return r
+})()
+
+export function createInspect({ post, getId, onModeChange }) {
+  let laserOn = false, pickOn = false
+  let hoverEl = null, labelEl = null
+  let lockedEl = null, highlightAnchor = null   // the persistent outline (#4 lock / #5 open)
+  let copiedTimer = null, copySeq = 0, copyEl = null
+
+  // every listener goes through `on` so dispose() can remove them all - a stage remount
+  // (Fast Refresh) would otherwise stack duplicate controllers posting duplicate picks
+  const removers = []
+  const on = (target, type, fn, opts) => { target.addEventListener(type, fn, opts); removers.push(() => target.removeEventListener(type, fn, opts)) }
+
+  const modeActive = () => laserOn || pickOn
+
+  // the mode stylesheet: laser's full-board rainbow, or comment's single-element hover.
+  // Both colour by the element's depth hue (--mv-hue lives in the always-on base sheet).
+  const laserCss = () => {
+    let rules = DEPTH_HUE               // depth hues live only while a mode is active
+    if (laserOn)
+      rules += 'body *:not(script):not(style):not(#mv-laser-label):not(#mv-laser-label *) { outline: 1px solid hsl(var(--mv-hue) 85% 55% / .75); outline-offset: -1px }\n'
+    if (pickOn || laserOn)
+      rules += `body, body * { cursor: ${pickOn ? PICK_CURSOR : LASER_CURSOR} !important }\n`
+    // comment mode: the hovered element pops in its OWN hue (outline + fill + ring), so it
+    // reads as "the thing you'll comment on" in the same colour it wears in laser. Laser
+    // keeps its lighter single outline so the whole board stays legible.
+    const hover = pickOn ? HUE_HL('[data-mv-hover]', '--mv-hue') : `
+body [data-mv-hover] { outline: 2px solid hsl(var(--mv-hue) 95% 45%); outline-offset: -2px;
+  background-image: linear-gradient(hsl(var(--mv-hue) 95% 50% / .08), hsl(var(--mv-hue) 95% 50% / .08)) }`
+    return rules + hover + `
+#mv-laser-label { position: fixed; z-index: 2147483647; pointer-events: none; outline: none !important;
+  display: flex; align-items: center; gap: 5px; width: max-content;
+  font: 600 10px -apple-system, system-ui, sans-serif; color: #fff; background: rgba(20, 20, 24, .92);
+  padding: 3px 7px; border-radius: 5px; max-width: 340px; white-space: nowrap; overflow: hidden;
+  text-overflow: ellipsis; letter-spacing: .01em }
+#mv-laser-label svg { flex: none; display: block; outline: none !important }
+#mv-laser-label.mv-copied { animation: mv-pop .22s cubic-bezier(.32, .72, .35, 1) }
+@keyframes mv-pop { from { transform: scale(.85); opacity: .5 } }
+`
+  }
+
+  // the lock outline is always available (a thread can be opened while NOT in a mode),
+  // so its rule lives in a tiny base sheet injected once - comment green, distinct from
+  // the mode hover, and it wins by being 2px with an offset.
+  const injectBase = () => {
+    if (document.getElementById(BASE_ID)) return
+    const s = document.createElement('style')
+    s.id = BASE_ID
+    // the persistent lock, tinted in the anchored element's stored hue (set inline as
+    // --mv-lock-hue by applyLock; fallback to a calm blue for any pre-hue anchor)
+    s.textContent = HUE_HL('[data-mv-locked]', '--mv-lock-hue, 210', ' !important')
+    document.head.appendChild(s)
+  }
+
+  const applyModes = () => {
+    const cur = document.getElementById(LASER_ID)
+    if (!modeActive()) { if (cur) cur.remove(); clearHover(); return }
+    const s = cur ?? document.createElement('style')
+    s.id = LASER_ID
+    s.textContent = laserCss()
+    if (!cur) document.head.appendChild(s)
+  }
+
+  const describe = (el) => {
+    const tag = el.tagName.toLowerCase()
+    const loc = el.dataset.mvLoc
+    const text = (el.textContent ?? '').trim().replace(/\s+/g, ' ').slice(0, 40)
+    return loc ? `${tag} · ${loc}` : text ? `${tag} · “${text}”` : tag
+  }
+
+  const clearHover = () => {
+    if (hoverEl) { delete hoverEl.dataset.mvHover; hoverEl = null }
+    if (labelEl) { labelEl.remove(); labelEl = null }
+    clearTimeout(copiedTimer)
+  }
+
+  // the persistent lock (#4/#5): one element at a time, its own attribute so a
+  // hover clear never touches it and the mode-off teardown leaves it alone.
+  const applyLock = (el, hue) => {
+    // stamp the stored hue first, so re-confirming the SAME element still refreshes its
+    // colour; a missing/invalid hue REMOVES the var so the CSS fallback (210) applies
+    if (el) {
+      if (Number.isFinite(hue)) el.style.setProperty('--mv-lock-hue', String(hue))
+      else el.style.removeProperty('--mv-lock-hue')
+    }
+    if (lockedEl === el) return
+    if (lockedEl) { delete lockedEl.dataset.mvLocked; lockedEl.style.removeProperty('--mv-lock-hue') }
+    lockedEl = el
+    if (el) el.dataset.mvLocked = '1'
+  }
+  const clearLock = () => {
+    if (lockedEl) { delete lockedEl.dataset.mvLocked; lockedEl.style.removeProperty('--mv-lock-hue') }
+    lockedEl = null; highlightAnchor = null
+  }
+
+  const showCopied = (seq) => {
+    if (seq !== copySeq || hoverEl !== copyEl || !labelEl) return
+    labelEl.classList.add('mv-copied')
+    labelEl.innerHTML = COPIED_HTML
+    clearTimeout(copiedTimer)
+    copiedTimer = setTimeout(() => {
+      if (!labelEl) return
+      labelEl.classList.remove('mv-copied')
+      if (hoverEl) labelEl.textContent = describe(hoverEl)
+      else { labelEl.remove(); labelEl = null }
+    }, 2000)
+  }
+
+  // the label hangs BELOW the cursor with a gap, left-aligned under it - never over the
+  // element you are trying to click. It only shifts left when it would run off the right
+  // edge (so the text is never clipped), and flips ABOVE the cursor near the bottom edge.
+  const place = (label, e) => {
+    const gap = 18
+    const w = label.offsetWidth, h = label.offsetHeight
+    let x = e.clientX                                    // left edge under the cursor
+    if (x + w > innerWidth - 4) x = innerWidth - 4 - w   // keep fully in view instead of clipping
+    x = Math.max(4, x)
+    let y = e.clientY + gap                              // below, clear of the cursor
+    if (y + h > innerHeight - 4) y = e.clientY - gap - h // no room below -> flip above
+    y = Math.max(4, y)
+    label.style.left = x + 'px'
+    label.style.top = y + 'px'
+  }
+
+  // hover-follow: the label chases the cursor while a mode is on - BUT a locked
+  // element (#4 composing / #5 thread open) freezes it: the lit element is the one
+  // being discussed, not whatever the pointer grazes.
+  on(document, 'mousemove', (e) => {
+    if (!modeActive() || lockedEl) return
+    const el = e.target instanceof Element && e.target.closest('body *:not(#mv-laser-label)')
+    if (!el || el === hoverEl) { if (labelEl && hoverEl) place(labelEl, e); return }
+    clearHover()
+    hoverEl = el
+    el.dataset.mvHover = '1'
+    labelEl = document.createElement('div')
+    labelEl.id = 'mv-laser-label'
+    labelEl.textContent = describe(el)
+    document.body.appendChild(labelEl)
+    place(labelEl, e)
+  }, true)
+
+  const cssPath = (el) => {
+    const seg = []
+    for (let cur = el; cur && cur !== document.body; cur = cur.parentElement) {
+      if (cur.id) { seg.unshift(`#${CSS.escape(cur.id)}`); break }
+      const tag = cur.tagName.toLowerCase()
+      let n = 1
+      for (let sib = cur.previousElementSibling; sib; sib = sib.previousElementSibling)
+        if (sib.tagName === cur.tagName) n++
+      seg.unshift(n > 1 ? `${tag}:nth-of-type(${n})` : tag)
+    }
+    return seg.join(' > ')
+  }
+  // the element's live depth hue (0..300) - so the shell can tint the pin / composer /
+  // thread card in the same colour the element wears in laser, and keep it after a reload
+  const hueOf = (el) => {
+    const raw = getComputedStyle(el).getPropertyValue('--mv-hue').trim()   // set by the mode sheet
+    const n = raw === '' ? NaN : Number(raw)
+    return Number.isFinite(n) ? ((n % 360) + 360) % 360 : 210              // fallback: a calm blue
+  }
+  const anchorBundle = (el, e) => {
+    const r = el.getBoundingClientRect()
+    const text = (el.textContent ?? '').trim().replace(/\s+/g, ' ')
+    return {
+      el: {
+        semantics: {
+          tag: el.tagName.toLowerCase(),
+          role: el.getAttribute('role') ?? undefined,
+          ariaLabel: el.getAttribute('aria-label') ?? undefined,
+          testId: el.getAttribute('data-testid') ?? undefined,
+          quote: text.slice(0, 200) || undefined,
+        },
+        cssPath: cssPath(el),
+        source: el.dataset.mvLoc ?? undefined,
+        hue: hueOf(el),
+      },
+      pos: {
+        fx: r.width ? Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) : .5,
+        fy: r.height ? Math.min(1, Math.max(0, (e.clientY - r.top) / r.height)) : .5,
+      },
+      rect: { x: r.left, y: r.top, w: r.width, h: r.height },
+    }
+  }
+
+  // every press is reported so the shell can close an open thread card when the click
+  // lands INSIDE a frame (shell-document listeners never see those)
+  on(document, 'pointerdown', () => post({ type: 'sh:frame-down', id: getId() }), true)
+
+  on(document, 'click', (e) => {
+    if (!modeActive()) return
+    e.preventDefault()
+    e.stopPropagation()
+    const el = e.target instanceof Element && e.target.closest('body *:not(#mv-laser-label)')
+    if (!el) return
+    if (pickOn) {
+      // #4: lock the chosen element the instant it is picked - no round-trip flicker.
+      // The shell re-confirms via sh:highlight-anchor once the draft is staged.
+      applyLock(el, hueOf(el))
+      clearHover()
+      post({ type: 'sh:picked', id: getId(), anchor: anchorBundle(el, e) })
+    } else {
+      copyEl = el
+      post({ type: 'sh:laser-copy', id: getId(), seq: ++copySeq, path: cssPath(el), source: el.dataset.mvLoc ?? null })
+    }
+  }, true)
+
+  const resolveAnchor = (anchor) => {
+    const want = anchor?.el?.semantics ?? {}
+    const match = (el) => {
+      if (want.tag && el.tagName.toLowerCase() !== want.tag) return false
+      if (want.role && el.getAttribute('role') !== want.role) return false
+      if (want.ariaLabel && el.getAttribute('aria-label') !== want.ariaLabel) return false
+      if (want.testId && el.getAttribute('data-testid') !== want.testId) return false
+      const text = (el.textContent ?? '').trim().replace(/\s+/g, ' ')
+      if (want.quote && !(text.startsWith(want.quote.slice(0, 60)) || text.includes(want.quote.slice(0, 40)))) return false
+      return true
+    }
+    try {
+      const byPath = anchor?.el?.cssPath && document.querySelector(anchor.el.cssPath)
+      if (byPath && match(byPath)) return byPath
+    } catch { /* stale selector */ }
+    try {
+      if (want.testId) {
+        const el = document.querySelector(`[data-testid="${CSS.escape(want.testId)}"]`)
+        if (el && match(el)) return el
+      }
+      if (want.quote && typeof want.tag === 'string' && /^[a-z][a-z0-9-]*$/.test(want.tag)) {
+        for (const el of document.querySelectorAll(want.tag))
+          if (match(el)) return el
+      }
+    } catch { /* malformed semantics must not sink the whole batch */ }
+    return null
+  }
+
+  // re-resolve + re-apply the shell-driven highlight. Called on set and on every
+  // resolve-anchors pass, so a stage frame swapped in AFTER the highlight arrived
+  // (the DOM had not committed yet) still lights up on the next cycle - and, just as
+  // important, a target that has SINCE detached clears the lock (applyLock(null))
+  // instead of stranding a stale outline / a stuck hover-suppression.
+  const reapplyHighlight = () => {
+    if (!highlightAnchor) return
+    applyLock(resolveAnchor(highlightAnchor), highlightAnchor?.el?.hue)
+  }
+
+  const onMessage = (e) => {
+    if (e.source !== window.parent || window.parent === window) return
+    if (e.origin && e.origin !== location.origin) return   // a navigated frame must not spoof shell commands
+    const m = e?.data
+    if (!m || typeof m !== 'object') return
+    if (m.type === 'sh:laser') { laserOn = !!m.on; applyModes(); onModeChange?.(laserOn, pickOn) }
+    else if (m.type === 'sh:pick') {
+      pickOn = !!m.on; applyModes()
+      // leaving comment mode drops a provisional self-lock the shell never confirmed;
+      // a shell-owned highlight (highlightAnchor set, e.g. #5) survives
+      if (!pickOn && !highlightAnchor) clearLock()
+      onModeChange?.(laserOn, pickOn)
+    }
+    else if (m.type === 'sh:copy-ok') showCopied(m.seq)
+    else if (m.type === 'sh:highlight-anchor') {
+      // null clears; an anchor locks its element (the pick draft #4, or the opened thread
+      // #5). No frame-id guard: a canvas frame only ever receives its OWN highlights (the
+      // shell posts to that one iframe), and an HTML frame reports id=pathname != frame.id
+      // so a guard would wrongly drop every one. Stage-swap staleness is handled instead by
+      // resolveAnchor failing on the wrong DOM (-> clear) and reapplyHighlight relighting on
+      // the next resolve tick once the new frame has committed.
+      if (!m.anchor) { clearLock(); return }
+      highlightAnchor = m.anchor
+      applyLock(resolveAnchor(m.anchor), m.anchor?.el?.hue)
+    }
+    else if (m.type === 'sh:resolve-anchors' && Array.isArray(m.anchors)) {
+      const rects = m.anchors.slice(0, 200).map((a) => {
+        let el = null
+        try { el = resolveAnchor(a.anchor) } catch { /* one bad anchor, not the batch */ }
+        if (!el) return { key: a.key, orphan: true }
+        const r = el.getBoundingClientRect()
+        return { key: a.key, rect: { x: r.left, y: r.top, w: r.width, h: r.height } }
+      })
+      reapplyHighlight()
+      post({ type: 'sh:anchor-rects', id: getId(), rects })
+    }
+  }
+  on(window, 'message', onMessage)
+
+  injectBase()
+  return {
+    modeActive, isLaser: () => laserOn, isPick: () => pickOn,
+    // remove every listener + injected style + clear timers/locks (stage remount safety)
+    dispose() {
+      removers.forEach((f) => f())
+      clearTimeout(copiedTimer)
+      clearHover(); clearLock()
+      document.getElementById(LASER_ID)?.remove()
+      document.getElementById(BASE_ID)?.remove()
+    },
+  }
+}

package/src/client/shell/App.tsx

@@ -1,5 +1,4 @@
 import { Component, useEffect, useRef, useState, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
 import { useStore, CONFIG, PUBLISHED, boardLabel, cap, humanize, fetchBoardNames, type FrameEntry } from './store.ts'
 import { Tip } from './Tip.tsx'
 import { PKG, ROUTE } from '../const.ts'
@@ -7,9 +6,10 @@ import { animateLayout, Canvas, canvasCtl } from './canvas/Canvas.tsx'
 import { frameByWindow } from './canvas/frame-registry.ts'
 import { enterPlay, playCtl, PlayOverlay } from './Play.tsx'
 import { bootHash, parseHash, writeHash } from './hash.ts'
-import { CardsIcon, CardsThreeIcon, CaretIcon, CheckIcon, ColumnsIcon, CommentIcon, DevicesIcon, FrameRectIcon, IntentGlyph, LaserIcon, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, PlayIcon, PlusIcon, SignpostIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
+import { CardsIcon, CardsThreeIcon, CaretIcon, CheckIcon, ColumnsIcon, FrameRectIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, PlayIcon, PlusIcon, SignpostIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
 import { CommentsController } from './Comments.tsx'
 import { useComments } from './comments-store.ts'
+import { CommentButton, DevicePicker, HideUIButton, LaserButton, Popover, ThemePicker, toggleHideUI, usePopover } from './Toolbar.tsx'
 
 const commentsStore = () => useComments.getState()
 
@@ -48,41 +48,6 @@ export class ShellBoundary extends Component<{ children: ReactNode }, { err: Err
   }
 }
 
-/** Shared popover machinery: trigger position, outside-click close, portal to the app
- *  root (glass never nests - a nested backdrop-filter cannot sample the page). */
-function usePopover() {
-  const [open, setOpen] = useState(false)
-  const [pos, setPos] = useState({ left: 0, top: 0 })
-  const boxRef = useRef<HTMLDivElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
-  const toggle = () => {
-    if (!open && boxRef.current) {
-      const r = boxRef.current.getBoundingClientRect()
-      setPos({ left: r.left, top: r.bottom + 10 })
-    }
-    setOpen(!open)
-  }
-  useEffect(() => {
-    if (!open) return
-    const close = (e: PointerEvent) => {
-      const t = e.target as globalThis.Node
-      if (!boxRef.current?.contains(t) && !menuRef.current?.contains(t)) setOpen(false)
-    }
-    window.addEventListener('pointerdown', close)
-    return () => window.removeEventListener('pointerdown', close)
-  }, [open])
-  return { open, setOpen, pos, boxRef, menuRef, toggle }
-}
-
-function Popover({ pop, children }: { pop: ReturnType<typeof usePopover>; children: ReactNode }) {
-  const app = document.querySelector('.sh-app')
-  if (!pop.open || !app) return null
-  return createPortal(
-    <div className="sh-menu" ref={pop.menuRef} style={{ left: pop.pos.left, top: pop.pos.top }}>{children}</div>,
-    app,
-  )
-}
-
 /** Boards live flat in the sidebar - always visible, one click to switch. The list
  *  refreshes on mount, window focus, and a slow poll so agent-created board files
  *  appear without a reload. Active board = accent icon + wash, same language as scenes. */
@@ -213,12 +178,12 @@ function SelectionBar() {
 }
 
 /** Devices view: one click sizes frames to a device width, tidies, and fits. Scoped
- *  like the digit keys: the selection when one exists, the whole board otherwise. */
+ *  like the digit keys: the selection when one exists, the whole board otherwise. The
+ *  dropdown chrome is the shared DevicePicker; this adapter owns the canvas wiring. */
 function DeviceMenu() {
   const deviceView = useStore((s) => s.deviceView)
   const selection = useStore((s) => s.selection)
   const nodes = useStore((s) => s.nodes)
-  const pop = usePopover()
   const scoped = selection.length > 0
   const pick = (name: string | null) => {
     animateLayout()
@@ -230,7 +195,6 @@ function DeviceMenu() {
       st.setDeviceView(name)
       setTimeout(() => canvasCtl.fitAll(), 30)
     }
-    pop.setOpen(false)
   }
   const entries = Object.entries(CONFIG.viewports)
   // active check: board-wide it is the device view; scoped, the device every selected frame wears
@@ -238,31 +202,8 @@ function DeviceMenu() {
   const active = scoped
     ? entries.find(([, vp]) => selNodes.length > 0 && selNodes.every((n) => n.w === vp.width))?.[0] ?? null
     : deviceView
-  return (
-    <div className="sh-theme" ref={pop.boxRef}>
-      <Tip side="bottom" label={<><b>Device view</b><span>{scoped ? `${selection.length} selected` : deviceView ? `${cap(deviceView)} · 0 resets` : `keys 1-${entries.length}`}</span></>}>
-        <button className="sh-pill-btn" onClick={pop.toggle}>
-          {deviceIcon(active, 16)}
-          <CaretIcon size={11} style={{ transform: pop.open ? 'rotate(180deg)' : undefined }} />
-        </button>
-      </Tip>
-      <Popover pop={pop}>
-        <Tip side="bottom" label={scoped ? 'Selected frames at their default sizes' : 'Every frame at its own default size'}>
-          <button onClick={() => pick(null)}>
-            <DevicesIcon size={15} /><span>Default</span><kbd>0</kbd>
-            {!scoped && deviceView === null && <CheckIcon size={13} className="chk" />}
-          </button>
-        </Tip>
-        <i className="div" />
-        {entries.map(([name, vp], i) => (
-          <button key={name} onClick={() => pick(name)} title={`${vp.width} × ${vp.height}`}>
-            {deviceIcon(name)}<span>{cap(name)}</span><kbd>{i < 9 ? i + 1 : ''}</kbd>
-            {active === name && <CheckIcon size={13} className="chk" />}
-          </button>
-        ))}
-      </Popover>
-    </div>
-  )
+  const hint = scoped ? `${selection.length} selected` : deviceView ? cap(deviceView) : `keys 1-${entries.length}`
+  return <DevicePicker value={active} onSelect={pick} includeDefault hint={hint} />
 }
 
 /** Update pill (dev only): the daily registry check surfaces here - same glass, same
@@ -337,46 +278,25 @@ function ZoomMenu() {
 /** Theme dropdown, scoped like the device digits: the selection when one exists, every
  *  frame otherwise. The trigger reflects the scope's MAJORITY (per-frame overrides never
  *  flip a board-level trigger - it reports the level it acts on, same rule as the shell).
- *  The menu is PORTALED out of the pill: an element with backdrop-filter is a backdrop root,
- *  so a nested backdrop-filter samples the pill's surface instead of the page - flat grey. */
+ *  The dropdown chrome is the shared ThemePicker; this adapter owns the canvas wiring. */
 function ThemeMenu() {
   const nodes = useStore((s) => s.nodes)
   const selection = useStore((s) => s.selection)
   const viewTheme = useStore((s) => s.viewTheme)
-  const pop = usePopover()
   const scoped = selection.length > 0
-  // scoped: the trigger + check reflect the selection; global: the VIEW preference
   const scope = scoped ? nodes.filter((n) => selection.includes(n.key)) : []
-  const uniform = scoped
-    ? (scope.length && scope.every((n) => n.theme === scope[0].theme) ? scope[0].theme : null)
-    : viewTheme
   const majority = scoped
     ? (scope.length ? [...scope.reduce((m, n) => m.set(n.theme, (m.get(n.theme) ?? 0) + 1), new Map<string, number>()).entries()].sort((a, b) => b[1] - a[1])[0][0] : viewTheme)
     : viewTheme
+  // the tick shows only a UNIFORM scope (mixed selection = no theme is "the" one), while
+  // the trigger reports the majority - the level the control acts on
+  const uniform = scoped ? (scope.length && scope.every((n) => n.theme === scope[0].theme) ? scope[0].theme : null) : viewTheme
   const pick = (t: string) => {
     const st = useStore.getState()
     scoped ? st.setSelectedTheme(t) : st.setTheme(t)
-    pop.setOpen(false)
   }
-  return (
-    <div className="sh-theme" ref={pop.boxRef}>
-      <Tip side="bottom" label={<><b>Theme</b><span>{scoped ? `${selection.length} selected · D` : 'all frames · D'}</span></>}>
-        <button className="sh-pill-btn" onClick={pop.toggle}>
-          {majority === 'dark' ? <MoonIcon size={16} /> : <SunIcon size={16} />}
-          <CaretIcon size={11} style={{ transform: pop.open ? 'rotate(180deg)' : undefined }} />
-        </button>
-      </Tip>
-      <Popover pop={pop}>
-        {CONFIG.themes.map((t) => (
-          <button key={t} onClick={() => pick(t)}>
-            {t === 'dark' ? <MoonIcon size={15} /> : <SunIcon size={15} />}
-            <span>{t}</span>
-            {uniform === t && <CheckIcon size={13} className="chk" />}
-          </button>
-        ))}
-      </Popover>
-    </div>
-  )
+  const hint = scoped ? `${selection.length} selected · D` : 'all frames · D'
+  return <ThemePicker value={majority} checked={uniform} onSelect={pick} hint={hint} />
 }
 
 export function App() {
@@ -549,6 +469,7 @@ export function App() {
     const onMsg = (e: MessageEvent) => {
       const data = e.data
       if (!data || typeof data.type !== 'string' || !data.type.startsWith('sh:')) return
+      if (e.origin && e.origin !== location.origin) return   // a cross-origin-navigated frame keeps its WindowProxy; reject it
       // B0.3: O(1) registry lookup - also the security gate (unknown source = not a
       // registered frame = dropped), replacing a per-message iframe scan + DOM walk.
       const reg = frameByWindow(e.source)
@@ -649,9 +570,13 @@ export function App() {
       if (e.key === 'Escape') {
         const c = commentsStore()
         if (c.commentMode || c.active || c.draft) { c.setMode(false); c.setActive(null); c.setDraft(null) }
+        else if (s.laser) s.setLaser(false)          // Escape also exits laser mode (parity with comment)
         else s.interact ? setInteract(null) : select(null)
       }
       if (e.key === 'p') enterPlay()
+      // H hides all chrome (shared binary Hide-UI); press again to reveal. Not persisted,
+      // so a refresh always restores it (the safety net for a forgotten toggle).
+      if (e.key === 'h') { toggleHideUI(); return }
       if (e.key === 't') { animateLayout(); runTidy() }
       // laser and comment mode are one-at-a-time: comment mode already highlights
       // what you'd click, so stacking the full rainbow on top only adds noise
@@ -869,33 +794,23 @@ export function App() {
 
       {/* floating pill nav, top right; collapses to a chip (same ladder as panel/fab) */}
       <nav className={`sh-pill${pillOpen ? '' : ' closed'}`} aria-hidden={!pillOpen}>
-        {/* far-left section: single actions - comment mode, laser, tidy */}
-        <Tip side="bottom" label={<><b>Comment</b><span>C · ⇧C hides pins</span></>}>
-          <button className={`sh-pill-btn${commentMode ? ' on' : ''}`} onClick={() => {
-            const c = commentsStore()
-            if (!c.commentMode) useStore.getState().setLaser(false)
-            c.setMode(!c.commentMode)
-            toast(c.commentMode ? 'comment mode off' : 'comment mode - click an element in a frame')
-          }}><CommentIcon size={16} /></button>
-        </Tip>
-        <Tip side="bottom" label={<><b>Laser mode</b><span>L</span></>}>
-          <button className={`sh-pill-btn${laser ? ' on' : ''}`} onClick={() => {
-            if (!laser) commentsStore().setMode(false)
-            useStore.getState().setLaser(!laser)
-          }}><LaserIcon size={16} /></button>
-        </Tip>
+        {/* far-left section: actions - comment mode, laser, tidy, prototype */}
+        <CommentButton />
+        <LaserButton />
         <Tip side="bottom" label={<><b>Tidy layout</b><span>T</span></>}>
           <button className="sh-pill-btn" onClick={() => { animateLayout(); runTidy() }}><ColumnsIcon size={16} /></button>
         </Tip>
+        <Tip side="bottom" label={<><b>Prototype view</b><span>P</span></>}>
+          <button className="sh-pill-btn" onClick={() => enterPlay()}><PlayIcon size={15} /></button>
+        </Tip>
         <i className="sep" />
         <DeviceMenu />
         <ThemeMenu />
         <i className="sep" />
         <ZoomMenu />
         <i className="sep" />
-        <Tip side="bottom" label={<><b>Prototype view</b><span>P</span></>}>
-          <button className="sh-pill-btn" onClick={() => enterPlay()}><PlayIcon size={15} /></button>
-        </Tip>
+        {/* far right: UI management only - hide, collapse */}
+        <HideUIButton />
         <Tip side="bottom" label={<><b>Collapse toolbar</b><span>⌘/</span></>}>
           <button className="sh-pill-btn" onClick={() => setPillOpen(false)} tabIndex={pillOpen ? 0 : -1}>
             <PanelFilledIcon size={17} style={{ transform: 'rotate(90deg)' }} />