@marver-design/marver 0.3.1 → 0.5.0

package/src/client/shell/App.tsx

@@ -1,12 +1,17 @@
 import { Component, useEffect, useRef, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { useStore, CONFIG, PUBLISHED, boardLabel, cap, fetchBoardNames, type FrameEntry } from './store.ts'
+import { useStore, CONFIG, PUBLISHED, boardLabel, cap, humanize, fetchBoardNames, type FrameEntry } from './store.ts'
 import { Tip } from './Tip.tsx'
 import { PKG, ROUTE } from '../const.ts'
 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, DevicesIcon, FrameRectIcon, GridIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, PlayIcon, PlusIcon, SignpostIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
+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 { CommentsController } from './Comments.tsx'
+import { useComments } from './comments-store.ts'
+
+const commentsStore = () => useComments.getState()
 
 let booted = false                             // survives Fast Refresh; see the boot effect
 
@@ -19,7 +24,7 @@ function SceneGroup({ name, count, held, onPick, children }: { name: string; cou
       <button className={`it${held ? ' held' : ''}`} onClick={() => setOpen(!open)}>
         <CaretIcon size={11} className="tw" style={{ transform: open ? undefined : 'rotate(-90deg)' }} />
         {/* the NAME selects every frame in the scene; the caret/row still collapses */}
-        <span onClick={(e) => { if (!onPick) return; e.stopPropagation(); onPick() }}>{cap(name) || '(root)'}</span>
+        <span onClick={(e) => { if (!onPick) return; e.stopPropagation(); onPick() }}>{humanize(name) || '(root)'}</span>
         <small>{count}</small>
       </button>
       {open && children}
@@ -196,7 +201,7 @@ function SelectionBar() {
         </Tip>
       ))}
       <i className="sep" />
-      <Tip label={<><b>{multi ? `Copy ${selection.length} file paths` : 'Copy file path'}</b><span className="k">C</span></>}>
+      <Tip label={<><b>{multi ? `Copy ${selection.length} file paths` : 'Copy file path'}</b><span className="k">⇧P</span></>}>
         <button className="icon"
           onClick={() => { navigator.clipboard.writeText(selectedFrames().map((f) => f.file).join('\n')); toast(multi ? `${selection.length} file paths copied` : 'file path copied') }}><SignpostIcon size={15} /></button>
       </Tip>
@@ -375,7 +380,19 @@ function ThemeMenu() {
 }
 
 export function App() {
-  const { manifest, nodes, panelOpen, toasts, selection } = useStore()
+  // B0.1: per-field selectors, NOT `useStore()` (which subscribes to the whole store and
+  // re-rendered the entire shell on every setScale tick during a pan/zoom).
+  const manifest = useStore((s) => s.manifest)
+  const nodes = useStore((s) => s.nodes)
+  const panelOpen = useStore((s) => s.panelOpen)
+  const toasts = useStore((s) => s.toasts)
+  const selection = useStore((s) => s.selection)
+  const laser = useStore((s) => s.laser)
+  const commentMode = useComments((s) => s.commentMode)
+  // SPEC-M5: laser/comment paint live outlines + do element-picking INSIDE the live frame; a scriptless
+  // lean cover would hide them, so a body class suppresses the cover while either mode is active.
+  useEffect(() => { document.body.classList.toggle('sh-laser', laser) }, [laser])
+  useEffect(() => { document.body.classList.toggle('sh-commenting', commentMode) }, [commentMode])
   const { boot, applyManifest, togglePanel, select, setInteract, runTidy, toast, spawn } = useStore.getState()
   const [pillOpen, setPillOpen] = useState(true)
 
@@ -496,6 +513,13 @@ export function App() {
   useEffect(() => {
     if (!import.meta.hot) return
     import.meta.hot.on('sh:manifest', (m: any) => applyManifest(m))
+    // A7 controlled HMR: a frame file changed. Reload exactly the affected frames through the
+    // lease-aware path (idle frames now, leased ones deferred to a safe point) - never a shell
+    // reload, never a React Fast Refresh yanking a frame the user is in.
+    import.meta.hot.on('sh:frame-invalidated', (m: any) => {
+      const frameIds = Array.isArray(m?.frameIds) ? m.frameIds.filter((x: unknown) => typeof x === 'string') : []
+      if (frameIds.length && typeof m?.revision === 'string') useStore.getState().invalidateFrames(frameIds, m.revision)
+    })
     // multi-viewer sync: another viewer (or an agent) saved this board. A clean canvas
     // re-boots silently, keeping whatever selection survives; a dirty one keeps its
     // edits and converges through the 409 path on its next save (disk wins, spec §8).
@@ -516,11 +540,11 @@ export function App() {
     const onMsg = (e: MessageEvent) => {
       const data = e.data
       if (!data || typeof data.type !== 'string' || !data.type.startsWith('sh:')) return
-      const iframes = [...document.querySelectorAll('iframe')]
-      const el = iframes.find((f) => f.contentWindow === e.source) as HTMLIFrameElement | undefined
-      if (!el) return
-      const nodeKey = el.closest('[data-node]')?.getAttribute('data-node')
-      if (!nodeKey) return
+      // 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)
+      if (!reg) return
+      const { key: nodeKey, iframe: el } = reg
       const s = useStore.getState()
 
       if (data.type === 'sh:ready') {
@@ -539,6 +563,31 @@ export function App() {
         // measureNode does the rest of the admission (content frames only,
         // frame-id match, finite positive, clamped)
         s.measureNode(nodeKey, String(data.frame ?? ''), Number(data.ownWidth), Number(data.measuredWidth), Number(data.height))
+      } else if (data.type === 'sh:laser-copy') {
+        // laser click = copy the element's full address for the agent:
+        // frame source file + css path inside it (+ jsx source loc when stamped)
+        const n = s.nodes.find((x) => x.key === nodeKey)
+        const f = n && s.frameFor(n)
+        if (f) {
+          const addr = `${f.file} · ${String(data.path ?? '')}${data.source ? ` (${String(data.source)})` : ''}`
+          // success confirms IN the frame's hover label (right where the eyes are);
+          // only failure needs the toast
+          navigator.clipboard.writeText(addr).then(
+            () => el.contentWindow?.postMessage({ type: 'sh:copy-ok', seq: data.seq }, location.origin),
+            () => toast('copy blocked - click the canvas first'))
+        }
+      } else if (data.type === 'sh:frame-down') {
+        // clicks INSIDE a frame never reach the shell document - the frame reports
+        // them so an open thread card dismisses modal-style from anywhere
+        const c = commentsStore()
+        if (c.active) c.setActive(null)
+      } else if (data.type === 'sh:picked') {
+        // comment mode: the frame reports the picked element - stage the draft on
+        // that node (picking while a thread is open replaces it, modal-style);
+        // the CommentLayer opens the composer at the pin
+        const c = commentsStore()
+        if (c.active) c.setActive(null)
+        if (c.commentMode) c.setDraft({ nodeKey, frame: String(data.id ?? ''), anchor: data.anchor })
       } else if (data.type === 'sh:go') {
         const target = String(data.target ?? '')
         const existing = s.nodes.find((n) => n.frame === target && !n.missing)
@@ -549,6 +598,29 @@ export function App() {
         // walking a flow must not eject you to design mode at every hop
         if (s.interact === nodeKey) setInteract(node.key)
         setTimeout(() => canvasCtl.fitNode(node.key), 50)
+      } else if (data.type === 'sh:wheel') {
+        // B0.2: a passive frame forwarded a wheel event; the canvas owns it. Never for the
+        // interact target or play (the app scrolls itself - the parent stays authoritative).
+        if (s.play || s.interact === nodeKey) return
+        const nums = [data.deltaX, data.deltaY, data.clientX, data.clientY].map(Number)
+        if (!nums.every(Number.isFinite)) return
+        const [deltaX, deltaY, localX, localY] = nums
+        const rect = el.getBoundingClientRect()
+        // iframe-local (untransformed CSS px) -> shell-screen px: rect is the frame's
+        // transformed size, so rect.width/clientWidth is its effective on-screen scale.
+        // Plain rect.left+localX would put the zoom origin in the wrong place when zoomed.
+        const sx = el.clientWidth ? rect.width / el.clientWidth : 1
+        const sy = el.clientHeight ? rect.height / el.clientHeight : 1
+        canvasCtl.wheel({
+          deltaX, deltaY, deltaMode: Number(data.deltaMode) || 0,
+          ctrlKey: !!data.ctrlKey, metaKey: !!data.metaKey,
+          clientX: rect.left + localX * sx, clientY: rect.top + localY * sy,
+        })
+      } else if (data.type === 'sh:interaction') {
+        // A6: the frame reports transient laser/comment engagement (pointer inside + mode on).
+        // While engaged the frame is leased, so a hot update to it defers until disengage.
+        s.setExternalLease(nodeKey, 'laser', !!data.laser)
+        s.setExternalLease(nodeKey, 'comment', !!data.comment)
       }
     }
     window.addEventListener('message', onMsg)
@@ -565,10 +637,29 @@ export function App() {
       if ((e.metaKey || e.ctrlKey) && e.key === '/') { e.preventDefault(); setPillOpen((o) => !o); return }
       if ((e.metaKey || e.ctrlKey) && e.key === 'a') { e.preventDefault(); s.selectAll(); return }
       if (e.metaKey || e.ctrlKey) return
-      if (e.key === 'Escape') s.interact ? setInteract(null) : select(null)
+      if (e.key === 'Escape') {
+        const c = commentsStore()
+        if (c.commentMode || c.active || c.draft) { c.setMode(false); c.setActive(null); c.setDraft(null) }
+        else s.interact ? setInteract(null) : select(null)
+      }
       if (e.key === 'p') enterPlay()
       if (e.key === 't') { animateLayout(); runTidy() }
-      if (e.key === 'c' && s.selection.length) {
+      // 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
+      if (e.key === 'l') {
+        if (!s.laser) commentsStore().setMode(false)
+        s.setLaser(!s.laser)
+      }
+      // C = comment mode (SPEC-M3 §6, the Figma/Miro convention) · Shift+C = hide/show
+      // pins · Shift+P = copy file path(s) (P alone is play; D6, changelog 0.4.0)
+      if (e.key === 'c' && !e.shiftKey) {
+        const c = commentsStore()
+        if (!c.commentMode) s.setLaser(false)
+        c.setMode(!c.commentMode)
+        toast(c.commentMode ? 'comment mode off' : 'comment mode - click an element in a frame')
+      }
+      if (e.key === 'C' && e.shiftKey) { const c = commentsStore(); c.setShow(!c.show) }
+      if (e.key === 'P' && e.shiftKey && s.selection.length) {
         const files = s.selection
           .map((k) => { const n = s.nodes.find((x) => x.key === k); return n ? s.frameFor(n)?.file : undefined })
           .filter((f): f is string => !!f)
@@ -653,8 +744,14 @@ export function App() {
           mounted so collapse/expand can crossfade-morph between them */}
       <aside className={`sh-panel${panelOpen ? '' : ' closed'}`} aria-hidden={!panelOpen}>
           <div className="sh-panel-top">
-            <ParallelogramDuoIcon size={21} className="mark" />
-            <span className="name">Marver</span>
+            {/* the mark links to the marver site; the title is the humanized repo name (C2: names
+                the project so two concurrent canvases are never confused), ellipsed if long */}
+            <Tip side="bottom" label="marver.design">
+              <a className="mark-link" href="https://marver.design" target="_blank" rel="noreferrer" aria-label="marver.design" tabIndex={panelOpen ? 0 : -1}>
+                <ParallelogramDuoIcon size={21} className="mark" />
+              </a>
+            </Tip>
+            <span className="name" title={CONFIG.projectName || 'Marver'}>{CONFIG.projectName ? humanize(CONFIG.projectName) : 'Marver'}</span>
             <Tip side="bottom" label={<><b>Collapse panel</b><span>⌘\</span></>}><button className="sh-ibtn" onClick={togglePanel} tabIndex={panelOpen ? 0 : -1}><PanelFilledIcon size={17} /></button></Tip>
           </div>
           <div className="sh-panel-scroll">
@@ -763,13 +860,29 @@ 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>
+        <Tip side="bottom" label={<><b>Tidy layout</b><span>T</span></>}>
+          <button className="sh-pill-btn" onClick={() => { animateLayout(); runTidy() }}><ColumnsIcon size={16} /></button>
+        </Tip>
+        <i className="sep" />
         <DeviceMenu />
         <ThemeMenu />
         <i className="sep" />
         <ZoomMenu />
-        <Tip side="bottom" label={<><b>Tidy layout</b><span>T</span></>}>
-          <button className="sh-pill-btn" onClick={() => { animateLayout(); runTidy() }}><GridIcon size={16} /></button>
-        </Tip>
         <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>
@@ -786,6 +899,7 @@ export function App() {
       </Tip>
 
       <PlayOverlay />
+      <CommentsController />
 
       {CONFIG.setup
         ? <div className="sh-banner">no app detected - designs would be built from nothing. See design/instructions/setup.md, then restart</div>