@marver-design/marver 0.7.0 → 0.8.1

package/src/client/shell/App.tsx

@@ -1,13 +1,14 @@
 import { Component, useEffect, useRef, useState, type ReactNode } from 'react'
-import { useStore, CONFIG, PUBLISHED, boardLabel, cap, humanize, fetchBoardNames, type FrameEntry } from './store.ts'
+import { useStore, CONFIG, PUBLISHED, boardLabel, boardFrames, 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, ColumnsIcon, FrameRectIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, PlayIcon, PlusIcon, SignpostIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
-import { CommentsController } from './Comments.tsx'
+import { CardsIcon, CardsThreeIcon, CaretIcon, CheckIcon, ColumnsIcon, FrameRectIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, ParallelogramFillIcon, PlayIcon, PlusIcon, SignpostIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
+import { CommentsController, revealThread } from './Comments.tsx'
+import { poweredByUrl } from '../../shared/utm.ts'
 import { useComments } from './comments-store.ts'
 import { CommentButton, DevicePicker, HideUIButton, LaserButton, Popover, ThemePicker, toggleHideUI, usePopover } from './Toolbar.tsx'
 
@@ -126,7 +127,7 @@ function SelectionBar() {
   // frame top - the caption offset (8px screen, world-capped) - the caption's height
   // (screen-clamped 12..18px font) - the bar. Gate on the TOP edge of the selection,
   // not the last-selected frame: a mixed selection whose topmost frames are variants
-  // still has a caption to clear (codex final review P2).
+  // still has a caption to clear.
   const capAtTop = selNodes.some((n) => n.y === by0 && useStore.getState().frameFor(n)?.variantGroup)
   const rawTop = capAtTop
     ? `calc(var(--sh-ty, 0px) + var(--sh-s, 1) * ${by0}px - clamp(4px * var(--sh-s, 1), 8px, 40px * var(--sh-s, 1)) - (clamp(12px, 17px * var(--sh-s, 1), 18px) * 1.4) - 44px)`
@@ -309,14 +310,14 @@ export function App() {
   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
+  // 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)
 
-  // boot honors the deep link (SPEC-M2 §3): board before load, play mode after it.
+  // boot honors the deep link: board before load, play mode after it.
   // Selection + camera intent are restored by the Canvas boot effect. The module-level
   // guard makes boot single-shot: Fast Refresh re-runs mount effects on every App edit,
   // and a re-boot would revert live state to the long-consumed deep link.
@@ -442,6 +443,12 @@ export function App() {
   useEffect(() => {
     if (!import.meta.hot) return
     import.meta.hot.on('sh:manifest', (m: any) => applyManifest(m))
+    // Live Jam presence: the daemon broadcasts the set of frames Marver is editing.
+    // Camera-safe by construction - this only toggles a glow class, never moves the view.
+    import.meta.hot.on('sh:jam-activity', (m: any) => useStore.getState().setWorking(Array.isArray(m?.frames) ? m.frames.filter((x: unknown) => typeof x === 'string') : []))
+    // Live Jam reply delivery: the daemon just wrote to a board's log - fetch it NOW instead of
+    // waiting out the 30s comment poll, so the reply + notification land within a second.
+    import.meta.hot.on('sh:jam-comment', (m: any) => { if (typeof m?.board === 'string') useComments.getState().poke(m.board) })
     // 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.
@@ -451,7 +458,7 @@ export function App() {
     })
     // 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).
+    // edits and converges through the 409 path on its next save (disk wins).
     import.meta.hot.on('sh:board', (m: any) => {
       const s = useStore.getState()
       if (m?.name !== s.board || m?.sha256 === s.boardHash || s.dirty) return
@@ -464,7 +471,7 @@ export function App() {
     })
   }, [])
 
-  // frame -> shell messages (spec §6 protocol); source validated against known iframes
+  // frame -> shell messages; source validated against known iframes
   useEffect(() => {
     const onMsg = (e: MessageEvent) => {
       const data = e.data
@@ -484,7 +491,7 @@ export function App() {
       } else if (data.type === 'sh:exit-interact') {
         if (s.interact === nodeKey) setInteract(null)
       } else if (data.type === 'sh:measure') {
-        // SPEC-026 generation guard: the sender echoes ITS document's URL rev; a
+        // Generation guard: the sender echoes ITS document's URL rev; a
         // WindowProxy survives navigation, so a stale pre-navigation message would
         // otherwise route as if it came from the current document. Compare against
         // the iframe's CURRENT src - mismatched generations are dropped.
@@ -520,14 +527,16 @@ export function App() {
         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 carry = s.interact === nodeKey   // a goto from inside an interacting frame
+        // CARRIES interact mode to the target - walking a flow must not eject you to
+        // design mode at every hop (and must survive a board switch)
         const existing = s.nodes.find((n) => n.frame === target && !n.missing)
-        const node = existing ?? spawn(target)
-        if (!node) return toast(`unknown goto target "${target}"`)
-        select(node.key)
-        // a goto from inside an interacting frame CARRIES interact mode to the target -
-        // 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)
+        if (existing) {
+          gotoSeq++                                  // a local goto supersedes any cross-board one in flight
+          select(existing.key)
+          if (carry) setInteract(existing.key)
+          setTimeout(() => canvasCtl.fitNode(existing.key), 50)
+        } else void gotoAcrossBoards(target, carry)
       } 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).
@@ -584,7 +593,7 @@ export function App() {
         if (!s.laser) commentsStore().setMode(false)
         s.setLaser(!s.laser)
       }
-      // C = comment mode (SPEC-M3 §6, the Figma/Miro convention) · Shift+C = hide/show
+      // C = comment mode (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()
@@ -593,6 +602,14 @@ export function App() {
         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) }
+      // Shift+L = laser comment: the laser-sharp lighting on the element a comment tags
+      // (pick hover, compose lock, open-thread highlight). Pins and cards stay - this
+      // only dims the lighting inside the artwork.
+      if (e.key === 'L' && e.shiftKey) {
+        const c = commentsStore()
+        c.setShowAnchor(!c.showAnchor)
+        toast(c.showAnchor ? 'laser comment off' : 'laser comment on')
+      }
       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 })
@@ -681,7 +698,7 @@ export function App() {
             {/* 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}>
+              <a className="mark-link" href={poweredByUrl(CONFIG.projectName, PUBLISHED ? 'published-canvas' : 'dev-canvas', 'shell')} target="_blank" rel="noreferrer" aria-label="marver.design" tabIndex={panelOpen ? 0 : -1}>
                 <ParallelogramDuoIcon size={21} className="mark" />
               </a>
             </Tip>
@@ -702,7 +719,7 @@ export function App() {
                   canvasCtl.fitNodes(keys)
                 }}>
                 {(() => {
-                  // variant groups render as ONE surface row with A/B/C chips (SPEC-023 §5)
+                  // variant groups render as ONE surface row with A/B/C chips
                   const nodeFor = (id: string) => nodes.find((x) => x.frame === id && !x.missing) ?? nodes.find((x) => x.frame === id)
                   // sidebar order follows the CANVAS (reading order: rows top-to-bottom,
                   // left-to-right) - a story board's list must tell the same story as its
@@ -794,22 +811,22 @@ 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: actions - comment mode, laser, tidy, prototype */}
+        {/* far-left section: actions - comment mode, laser, tidy */}
         <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" />
-        {/* far right: UI management only - hide, collapse */}
+        {/* far right: view management - prototype, hide, collapse */}
+        <Tip side="bottom" label={<><b>Prototype view</b><span>P</span></>}>
+          <button className="sh-pill-btn" onClick={() => enterPlay()}><PlayIcon size={15} /></button>
+        </Tip>
         <HideUIButton />
         <Tip side="bottom" label={<><b>Collapse toolbar</b><span>⌘/</span></>}>
           <button className="sh-pill-btn" onClick={() => setPillOpen(false)} tabIndex={pillOpen ? 0 : -1}>
@@ -830,9 +847,131 @@ export function App() {
         : CONFIG.noTheme && <div className="sh-banner">no theme configured - frames render unstyled. Create design/theme.css importing your app's stylesheet (or set theme in design/config.ts)</div>}
       <UpdatePill />
 
-      <div className="sh-toasts">
-        {toasts.map((t) => <div key={t.id} className="sh-toast"><CheckIcon size={12} /> {t.text}</div>)}
+      <JamToasts toasts={toasts} />
+    </div>
+  )
+}
+
+/** The bottom-right notification corner. Plain toasts render as before.
+ *  Jam pills are FRAME-FIRST (icon + frame title, then Marver · preview) and stack as a DECK:
+ *  1-2 show in full; 3+ collapse to the newest pill with two card edges peeking beneath and a
+ *  +N badge - click to expand the full list (newest first, timestamps, Clear all). */
+function JamToasts({ toasts }: { toasts: import('./store.ts').Toast[] }) {
+  const [expanded, setExpanded] = useState(false)
+  const plain = toasts.filter((t) => !t.jam)
+  const jams = toasts.filter((t) => t.jam)
+  useEffect(() => { if (jams.length <= 2) setExpanded(false) }, [jams.length])
+  const deck = jams.length > 2 && !expanded
+  const newest = jams[jams.length - 1]
+  return (
+    <div className="sh-toasts">
+      {plain.slice(-2).map((t) => <div key={t.id} className="sh-toast"><CheckIcon size={12} /> {t.text}</div>)}
+      {expanded && jams.length > 2 && (
+        <div className="sh-jam-list">
+          <div className="sh-jam-listhead">
+            <span>{jams.length} NOTIFICATIONS</span>
+            <button onClick={() => { useStore.getState().clearJamToasts(); setExpanded(false) }}>Clear all</button>
+            <button aria-label="Collapse" onClick={() => setExpanded(false)}><XIcon size={12} /></button>
+          </div>
+          {[...jams].reverse().map((t) => <JamToast key={t.id} id={t.id} note={t.jam!} />)}
+        </div>
+      )}
+      {!expanded && (deck
+        ? (
+          <div className="sh-jam-deck" onClick={() => setExpanded(true)} role="button" aria-label={`${jams.length} notifications - expand`}>
+            <div className="sh-jam-ghost g2" />
+            <div className="sh-jam-ghost g1" />
+            {newest?.jam && <JamToast id={newest.id} note={newest.jam} badge={jams.length - 1} inert />}
+          </div>
+        )
+        : jams.map((t) => <JamToast key={t.id} id={t.id} note={t.jam!} />))}
+    </div>
+  )
+}
+
+/** A data-goto whose target frame is not on the current board follows the frame HOME:
+ *  the first curated board (switcher rank) that pins it is switched to and the frame
+ *  focused there - a link is navigation, and navigation never edits a board. Only a
+ *  frame NO board pins spawns onto the current board (the original prototype behavior
+ *  for unpinned targets); an id the manifest doesn't know stays a toast. Every goto
+ *  bumps `gotoSeq` so a slow older resolution can never override newer navigation. */
+let gotoSeq = 0
+async function gotoAcrossBoards(target: string, carry: boolean) {
+  const s = useStore.getState()
+  // an id the manifest doesn't know resolves NOWHERE - a tombstone pin on some board
+  // must not send us on a trip that ends in a silent timeout
+  if (!s.manifest?.frames.some((f) => f.id === target)) return s.toast(`unknown goto target "${target}"`)
+  const seq = ++gotoSeq
+  let home: string | null = null
+  try {
+    const names = (await fetchBoardNames()).filter((n) => n !== s.board && n !== 'all-scenes')
+    for (const name of names) {
+      if ((await boardFrames(name)).includes(target)) { home = name; break }
+    }
+  } catch {
+    // a transport failure is NOT proof the frame is unpinned - spawning here would
+    // recreate the board mutation this function exists to prevent
+    return useStore.getState().toast(`goto: could not read the boards - try again`)
+  }
+  if (seq !== gotoSeq) return                        // superseded by newer navigation
+  if (!home) {
+    // no curated board pins it - the original prototype behavior: spawn beside you
+    const st = useStore.getState()
+    const node = st.spawn(target)
+    if (!node) return st.toast(`unknown goto target "${target}"`)
+    st.select(node.key)
+    if (carry) st.setInteract(node.key)
+    setTimeout(() => canvasCtl.fitNode(node.key), 50)
+    return
+  }
+  await s.switchBoard(home)
+  for (let i = 0; i < 12; i++) {                     // the board commits async - retry like viewNote
+    if (seq !== gotoSeq) return
+    const st = useStore.getState()
+    if (st.board === home) {                         // a cancelled/failed switch must not select here
+      const node = st.nodes.find((n) => n.frame === target && !n.missing)
+      if (node) {
+        st.select(node.key)
+        if (carry) st.setInteract(node.key)
+        setTimeout(() => canvasCtl.fitNode(node.key), 50)
+        return
+      }
+    }
+    await new Promise((r) => setTimeout(r, 250))
+  }
+}
+
+/** View from a notification: threads are frame-scoped, so first try to reveal RIGHT HERE
+ *  (the current board may show the thread's frame); only when it doesn't, switch to the
+ *  note's origin board and retry while its comments load. Dismiss only on success: a
+ *  cross-board note must never be a destructive no-op. */
+async function viewNote(note: import('./store.ts').JamNote, dismiss: () => void) {
+  if (revealThread(note.threadId)) { dismiss(); return }
+  const s = useStore.getState()
+  if (note.board && s.board !== note.board) await s.switchBoard(note.board)
+  for (let i = 0; i < 12; i++) {
+    if (revealThread(note.threadId)) { dismiss(); return }
+    await new Promise((r) => setTimeout(r, 250))
+  }
+}
+
+/** One jam pill, frame-first: row 1 = intent icon + FRAME TITLE (blue) · age; row 2 = Marver · preview.
+ *  `badge` shows the +N deck count (replacing View); `inert` disables inner clicks (the deck handles it). */
+function JamToast({ id, note, badge, inert }: { id: number; note: import('./store.ts').JamNote; badge?: number; inert?: boolean }) {
+  const dismiss = () => useStore.getState().dismissToast(id)
+  return (
+    <div className="sh-toast jam">
+      <span className="sh-jam-mark"><ParallelogramFillIcon size={17} /></span>
+      <div className="sh-jam-txt">
+        <b className="sh-jam-frame"><span className="t">{note.frameTitle ?? note.board}</span></b>
+        <span className="sh-jam-prev">{note.preview}</span>
       </div>
+      {badge != null
+        ? <span className="sh-jam-badge">+{badge}</span>
+        : !inert && <>
+            <button className="sh-jam-view" onClick={() => void viewNote(note, dismiss)}>View</button>
+            <button className="sh-jam-x" aria-label="Dismiss" onClick={dismiss}><XIcon size={13} /></button>
+          </>}
     </div>
   )
 }