@marver-design/marver 0.7.0 → 0.8.0

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

@@ -52,6 +52,9 @@ const DEPTH_HUE = (() => {
 
 export function createInspect({ post, getId, onModeChange }) {
   let laserOn = false, pickOn = false
+  // quiet pick (⇧L laser comment off): clicks still anchor comments, but NO hover outline,
+  // label, or lock lighting inside the artwork - the shell decides, the frame obeys
+  let pickQuiet = 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
@@ -172,11 +175,19 @@ body [data-mv-hover] { outline: 2px solid hsl(var(--mv-hue) 95% 45%); outline-of
     label.style.top = y + 'px'
   }
 
+  // the pointer LEAVING this frame takes its hover lighting with it: each frame is its own
+  // document, so once the cursor is gone no mousemove ever fires here again - without this,
+  // the last hovered outline + label fossilize on every frame the cursor crossed.
+  // (relatedTarget null = left the window/iframe, not just moved between elements)
+  on(document, 'mouseout', (e) => { if (!e.relatedTarget) clearHover() })
+  on(window, 'blur', clearHover)
+
   // 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
+    if (pickOn && pickQuiet) return   // quiet pick: no hover visuals, clicks still land
     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()
@@ -245,7 +256,8 @@ body [data-mv-hover] { outline: 2px solid hsl(var(--mv-hue) 95% 45%); outline-of
     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))
+      // Quiet pick (⇧L off) anchors WITHOUT lighting the element.
+      if (!pickQuiet) applyLock(el, hueOf(el))
       clearHover()
       post({ type: 'sh:picked', id: getId(), anchor: anchorBundle(el, e) })
     } else {
@@ -299,7 +311,8 @@ body [data-mv-hover] { outline: 2px solid hsl(var(--mv-hue) 95% 45%); outline-of
     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()
+      pickOn = !!m.on; pickQuiet = !!m.quiet; applyModes()
+      if (pickQuiet) clearHover()   // a hover lit before the toggle landed must not linger
       // 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()

package/src/client/shell/App.tsx

@@ -6,8 +6,8 @@ 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 { useComments } from './comments-store.ts'
 import { CommentButton, DevicePicker, HideUIButton, LaserButton, Popover, ThemePicker, toggleHideUI, usePopover } from './Toolbar.tsx'
 
@@ -442,6 +442,12 @@ export function App() {
   useEffect(() => {
     if (!import.meta.hot) return
     import.meta.hot.on('sh:manifest', (m: any) => applyManifest(m))
+    // Live Jam presence (SPEC §10): 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.
@@ -593,6 +599,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 })
@@ -794,22 +808,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 +844,77 @@ 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 (SPEC-live-jam §9). 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>
+  )
+}
+
+/** View from a notification: switch to the note's board first when needed (the thread only exists
+ *  in that board's state), then reveal - retrying briefly while the board's 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) {
+  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>
   )
 }