@marver-design/marver 0.12.0 → 0.14.0

package/src/client/shell/Comments.tsx

@@ -4,7 +4,7 @@
  * top-right stack; the thread card opens beside its pin. Pins keep a screen-space
  * size via --sh-inv (the vbadge pattern) so zoom never shrinks them away.
  */
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { avatarFallback, useComments } from './comments-store.ts'
 import { useStore, type Node } from './store.ts'
@@ -13,7 +13,7 @@ import { canvasCtl } from './canvas/ctl.ts'
 import { bootHash, buildHash, parseHash, writeHash } from './hash.ts'
 import { ArrowUpIcon, CheckIcon, CheckSquareOffsetIcon, LinkIcon, ParallelogramFillIcon, PencilSimpleIcon, PlusIcon, XIcon } from './icons.tsx'
 import { Tip } from './Tip.tsx'
-import { parseMentions } from './mentions.ts'
+import { mentionAlerts, mentionPeople, mentionQueryAt, parseBody, type MentionPerson } from './mentions.ts'
 import { ROUTE } from '../const.ts'
 import type { AgentMeta, Thread } from '../../shared/events.ts'
 
@@ -182,13 +182,15 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
   const flankBadge = useStore((s) => !!s.frameFor(node)?.variantGroup)
   const flankShim = useStore((s) => s.working.includes(frameId))
   const drafting = draft?.nodeKey === node.key
+  const alertIds = useMentionAlerts()
   if (!show || (!open.length && !drafting)) return null
 
   // inactive frame: the stack - count + avatars, top-right
   const engaged = selected || open.some((t) => t.id === active) || drafting
   if (!engaged && open.length) {
     return (
-      <button className="cm-stack sh-no-pan" onClick={(e) => { e.stopPropagation(); useStore.getState().select(node.key); if (open[0]) setActive(open[0].id) }}>
+      <button className={`cm-stack sh-no-pan${open.some((t) => alertIds.has(t.id)) ? ' mention' : ''}`}
+        onClick={(e) => { e.stopPropagation(); useStore.getState().select(node.key); const hit = open.find((t) => alertIds.has(t.id)) ?? open[0]; if (hit) setActive(hit.id) }}>
         <MarkerFace threads={open} />
       </button>
     )
@@ -234,7 +236,7 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
         const { x, y, orphan } = pinPos(t)
         const isActive = t.id === active
         return (
-          <div key={t.id} className={`cm-pin sh-no-pan${isActive ? ' on' : ''}${isActive && cardSide === 'r' ? ' tail-r' : ''}${orphan ? ' orphan' : ''}`}
+          <div key={t.id} className={`cm-pin sh-no-pan${isActive ? ' on' : ''}${isActive && cardSide === 'r' ? ' tail-r' : ''}${orphan ? ' orphan' : ''}${alertIds.has(t.id) ? ' mention' : ''}`}
             style={{ left: x, top: y, ...hueVars(anchorHue(t.anchor)) }}
             onPointerDown={(e) => e.stopPropagation()}
             onClick={(e) => { e.stopPropagation(); setActive(t.id === active ? null : t.id) }}
@@ -258,17 +260,51 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
 
 const AT_TIP = "Read like any other comment. Marver won't act on this unless the owner promotes it."
 
-/** A comment body with @marver mentions styled: owner-authored → bold accent (a live trigger);
- *  anyone else's → plain + a teaching tooltip (context, not a command). */
+/** The mentionable set, derived from everything the client has seen (published:
+ *  projected ids + names; dev: canonical emails). The viewer themself is out -
+ *  this is the COMPOSER's set (you cannot mention yourself). */
+function usePeople(): MentionPerson[] {
+  const events = useComments((s) => s.events)
+  const me = useComments((s) => s.me)
+  return mentionPeople(events, me ?? undefined)
+}
+
+/** Everyone, self included - the RENDERING set: a mention of you must light up
+ *  hardest of all, not disappear (the bug that shipped: the excluded self made
+ *  your own mentions render as plain text exactly for the person they were for). */
+function useRenderPeople(): { people: MentionPerson[]; isMe: (p: MentionPerson) => boolean } {
+  const events = useComments((s) => s.events)
+  const me = useComments((s) => s.me)
+  const people = useMemo(() => mentionPeople(events), [events])
+  const isMe = (p: MentionPerson) =>
+    (!!p.id && p.id === me?.id) || (!!p.email && !!me?.email && p.email.toLowerCase() === me.email.toLowerCase())
+  return { people, isMe }
+}
+
+/** Threads holding an unseen mention of me - drives the pin/stack pulse. */
+function useMentionAlerts(): Set<string> {
+  const events = useComments((s) => s.events)
+  const me = useComments((s) => s.me)
+  const seen = useComments((s) => s.mentionSeen)
+  return useMemo(() => new Set(mentionAlerts(events, me, seen)), [events, me, seen])
+}
+
+/** A comment body with mentions styled. `@marver`: owner-authored → bold accent (a live
+ *  trigger); anyone else's → plain + a teaching tooltip (context, not a command).
+ *  `@Person` (v1.1) → the person chip; the same segmentation that derived the
+ *  event's mentions, so what lit up is what notified. */
 function CommentBody({ body, owner }: { body?: string; owner: boolean }) {
+  const { people, isMe } = useRenderPeople()
   if (!body) return null
   return (
     <p className="cm-body">
-      {parseMentions(body).map((s, i) => !s.mention
-        ? <span key={i}>{s.text}</span>
-        : owner
-          ? <span key={i} className="cm-at owner">{s.text}</span>
-          : <Tip key={i} side="top" label={<span className="cm-at-tip">{AT_TIP}</span>}><span className="cm-at">{s.text}</span></Tip>)}
+      {parseBody(body, people).map((s, i) => s.person
+        ? <span key={i} className={isMe(s.person) ? 'cm-at person me' : 'cm-at person'}>{s.text}</span>
+        : !s.marver
+          ? <span key={i}>{s.text}</span>
+          : owner
+            ? <span key={i} className="cm-at owner">{s.text}</span>
+            : <Tip key={i} side="top" label={<span className="cm-at-tip">{AT_TIP}</span>}><span className="cm-at">{s.text}</span></Tip>)}
     </p>
   )
 }
@@ -339,6 +375,27 @@ function CommentInput({ value, onChange, onSubmit, onCancel, placeholder, autoFo
   const ref = useRef<HTMLTextAreaElement>(null)
   const hlRef = useRef<HTMLDivElement>(null)
   const [busy, setBusy] = useState(false)
+  // ---- @-mention typeahead (v1.1): the token under the caret filters the people the
+  // client has seen; picking completes `@Label ` in place. Escape dismisses THIS token
+  // only (the composer keeps its own Escape = cancel semantics when no list is open).
+  const people = usePeople()
+  const [caret, setCaret] = useState(0)
+  const [pick, setPick] = useState(0)
+  const [dismissed, setDismissed] = useState<number | null>(null)
+  const q = mentionQueryAt(value, caret)
+  const matches = q && dismissed !== q.start
+    ? people.filter((p) => p.label.toLowerCase().startsWith(q.query.toLowerCase())).slice(0, 5)
+    : []
+  const listOpen = matches.length > 0
+  useEffect(() => { setPick(0) }, [q?.start, q?.query])
+  const track = () => setCaret(ref.current?.selectionStart ?? 0)
+  const choose = (p: MentionPerson) => {
+    if (!q) return
+    const pos = q.start + p.label.length + 2                        // '@' + label + ' '
+    onChange(value.slice(0, q.start) + '@' + p.label + ' ' + value.slice(caret))
+    setCaret(pos)
+    requestAnimationFrame(() => { const el = ref.current; if (el) { el.focus(); el.setSelectionRange(pos, pos) } })
+  }
   // +2: scrollHeight excludes the 1px borders, but border-box height includes them - without
   // it every line is squeezed 2px and the single-line pill renders off-center
   const grow = () => { const el = ref.current; if (el) { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight + 2, 132) + 'px' } }
@@ -352,18 +409,38 @@ function CommentInput({ value, onChange, onSubmit, onCancel, placeholder, autoFo
   }
   return (
     <div className="cm-inputwrap">
-      {/* Live mention highlight: a mirror layer behind the transparent-text textarea, so @marver shows
-          its trigger colour AS YOU TYPE (owner = accent-blue "this will run"; else muted). */}
+      {/* Live mention highlight: a mirror layer behind the transparent-text textarea, so @marver
+          shows its trigger colour AS YOU TYPE (owner = accent-blue "this will run"; else muted)
+          and a completed @Person wears the chip it will render with. */}
       <div className="cm-hl" ref={hlRef} aria-hidden>
-        {parseMentions(value).map((s, i) => s.mention
-          ? <span key={i} className={owner ? 'cm-at owner' : 'cm-at'}>{s.text}</span>
-          : <span key={i}>{s.text}</span>)}
+        {parseBody(value, people).map((s, i) => s.person
+          ? <span key={i} className="cm-at person">{s.text}</span>
+          : s.marver
+            ? <span key={i} className={owner ? 'cm-at owner' : 'cm-at'}>{s.text}</span>
+            : <span key={i}>{s.text}</span>)}
         {value.endsWith('\n') ? '​' : ''}
       </div>
+      {listOpen && (
+        <div className="cm-mentionlist" role="listbox">
+          {matches.map((p, i) => (
+            <button key={p.id ?? p.email} type="button" className={i === pick ? 'on' : ''} role="option" aria-selected={i === pick}
+              onMouseDown={(e) => { e.preventDefault(); choose(p) }} onMouseEnter={() => setPick(i)}>
+              <Avatar author={{ ...p, name: p.label }} size={18} /><span>{p.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
       <textarea ref={ref} rows={1} value={value} placeholder={placeholder} disabled={busy} spellCheck={false}
-        onChange={(e) => onChange(e.target.value)} onInput={grow} onScroll={syncScroll}
+        onChange={(e) => { onChange(e.target.value); setDismissed(null); setCaret(e.target.selectionStart ?? 0) }}
+        onInput={grow} onScroll={syncScroll} onClick={track} onKeyUp={track}
         onKeyDown={(e) => {
           e.stopPropagation()
+          if (listOpen) {
+            if (e.key === 'ArrowDown') { e.preventDefault(); setPick((v) => (v + 1) % matches.length); return }
+            if (e.key === 'ArrowUp') { e.preventDefault(); setPick((v) => (v + matches.length - 1) % matches.length); return }
+            if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); choose(matches[pick] ?? matches[0]); return }
+            if (e.key === 'Escape') { setDismissed(q!.start); return }
+          }
           if (e.key === 'Escape') { onCancel?.(); return }
           if (e.key === 'Enter') {
             if ((e.nativeEvent as unknown as { isComposing?: boolean }).isComposing) return   // IME: mid-composition Enter must not send

package/src/client/shell/LockedApp.tsx

@@ -11,7 +11,7 @@
  */
 import { Component, useEffect, useRef, type ReactNode } from 'react'
 import { useStore, boardLabel, landingMode } from './store.ts'
-import { enterFocus, enterPlay, PlayOverlay, playCtl } from './Play.tsx'
+import { enterFocus, enterPlay, enterSlides, PlayOverlay, playCtl } from './Play.tsx'
 import { bootHash, parseHash, writeHash } from './hash.ts'
 import { useComments } from './comments-store.ts'
 
@@ -43,6 +43,7 @@ export function App() {
     if (s.play) return
     const mode = landingMode(s.board)
     if (mode === 'focus') enterFocus()
+    else if (mode === 'slides') enterSlides()
     else enterPlay()
   }
 
@@ -56,6 +57,7 @@ export function App() {
       urlReady.current = true
       if (!ok) return
       if (bootHash.focus) enterFocus(bootHash.focus.at, { ...bootHash.focus, deep: true })
+      else if (bootHash.play?.slides) enterSlides(bootHash.play)
       else if (bootHash.play) enterPlay(bootHash.play)
       else land()
     }
@@ -86,7 +88,10 @@ export function App() {
         return
       }
       if (h.focus) enterFocus(h.focus.at, { ...h.focus, deep: true })
-      else if (h.play && s.play) playCtl.sync(h.play)
+      // sync only holds WITHIN a mode: same-mode restores drive the MOUNTED
+      // stage (sh:stage-set); crossing present↔slides re-enters and remounts
+      else if (h.play && s.play && !!h.play.slides === !!s.play.slides) playCtl.sync(h.play)
+      else if (h.play?.slides) enterSlides(h.play)
       else if (h.play) enterPlay(h.play)
     }
     window.addEventListener('popstate', onPop)

package/src/client/shell/Play.tsx

@@ -11,9 +11,11 @@
  * next) stays prototype-only.
  */
 import { useEffect, useRef, useState } from 'react'
-import { useStore, BOARD_POLICY, BRANDING, CONFIG, PUBLISHED, SOURCE_REVEALED, boardLabel, boardLocked, cap, fetchBoardNames, modeAllowed, type Node } from './store.ts'
+import { useStore, BOARD_POLICY, BRANDING, CONFIG, PUBLISHED, SOURCE_REVEALED, boardLabel, boardLocked, cap, fetchBoardNames, modeAllowed, playsAsSlides, SLIDE_INTRINSIC, type Node } from './store.ts'
+import { deckOrder } from './play-order.ts'
 import { useComments } from './comments-store.ts'
 import { ROUTE } from '../const.ts'
+import { poweredByUrl } from '../../shared/utm.ts'
 import { canvasCtl } from './canvas/ctl.ts'
 import { Tip } from './Tip.tsx'
 import { CommentButton, DevicePicker, HideUIButton, isHideUI, LaserButton, Popover, ThemePicker, toggleHideUI, usePopover } from './Toolbar.tsx'
@@ -38,14 +40,51 @@ function playList(): string[] {
   return out
 }
 
+/** Slides mode (v1.5): the deck's play order is the BOARD's reading order -
+ *  (y, then x) over slide frames - frozen at entry, so what you see arranged
+ *  is what plays, and a mid-show board edit never yanks the presenter. */
+let frozenDeck: string[] | null = null
+function currentDeck(): string[] {
+  if (frozenDeck) return frozenDeck
+  const s = useStore.getState()
+  const frames = new Map((s.manifest?.frames ?? []).map((f) => [f.id, f]))
+  frozenDeck = deckOrder(s.nodes, frames).deck
+  return frozenDeck
+}
+
+export function enterSlides(over?: { at?: string; device?: string; theme?: string }) {
+  const s = useStore.getState()
+  if (!modeAllowed(s.board, 'slides')) return
+  const frames = new Map((s.manifest?.frames ?? []).map((f) => [f.id, f]))
+  const { deck, excluded } = deckOrder(s.nodes, frames)
+  if (!deck.length) {
+    // 0.13.0 let a slides board play its ordinary frames as a prototype - keep
+    // that as the fallback so an upgraded (or locked) board never dead-ends
+    s.toast('no slide: true frames on this board - playing it as a prototype')
+    enterPlay(over, { legacyDeck: true })   // enterPlay never calls back into enterSlides: no recursion
+    return
+  }
+  if (excluded.length) s.toast(`${excluded.length} non-slide frame${excluded.length === 1 ? '' : 's'} on this board won't play in slides mode`)
+  frozenDeck = deck
+  const at = over?.at && deck.includes(over.at) ? over.at : deck[0]
+  const frame = s.manifest?.frames.find((f) => f.id === at)
+  const theme = (over?.theme && CONFIG.themes.includes(over.theme) ? over.theme : undefined) ?? frame?.theme ?? s.viewTheme
+  // the deck's own stage is the default device; a restored link may carry a
+  // picked viewport or fill - the standard prototype picker works in slides
+  const device = over?.device && (CONFIG.viewports[over.device] || over.device === 'fill' || over.device === 'slide') ? over.device : 'slide'
+  s.setPlay({ at, device, theme, slides: true })
+}
+
 /** Enter play on the current board: first selected node starts, else the first node.
  *  `over` (deep links) can pin the start frame, device, and theme - the start may be any
  *  playable manifest frame, not just a board node: the stage itself allows data-goto to
  *  off-board frames, so a link captured mid-flow must restore to the same screen. */
-export function enterPlay(over?: { at?: string; device?: string; theme?: string }) {
+export function enterPlay(over?: { at?: string; device?: string; theme?: string }, opts?: { legacyDeck?: boolean }) {
   const s = useStore.getState()
-  // the lock freezes what open pinned: a board locked to another mode never plays
-  if (!modeAllowed(s.board, 'present')) return
+  // the lock freezes what open pinned: a board locked to another mode never
+  // plays - except the legacy-deck fallback, where the lock pinned `slides`
+  // and the prototype IS what 0.13.0 showed for that board
+  if (!opts?.legacyDeck && !modeAllowed(s.board, 'present')) return
   const list = playList()
   if (!list.length) { s.toast('nothing to play on this board'); return }
   const overAt = over?.at && s.manifest?.frames.some((f) => f.id === over.at && f.kind === 'tsx') ? over.at : undefined
@@ -100,7 +139,10 @@ async function switchPlayBoard(name: string) {
   if (name === s.board) return
   const device = s.play?.device               // the device is the viewer's choice - it survives the switch
   await s.switchBoard(name)
-  if (useStore.getState().board === name) enterPlay(device ? { device } : undefined)
+  if (useStore.getState().board !== name) return
+  const dev = device && device !== 'slide' ? { device } : undefined   // the deck's own size does not follow to a prototype
+  if (playsAsSlides(name)) enterSlides(device ? { device } : undefined)
+  else enterPlay(dev)
 }
 
 /** Control channel for history restores: the popstate handler steers the mounted stage
@@ -115,7 +157,11 @@ export function PlayOverlay() {
   const play = useStore((s) => s.play)
   const board = useStore((s) => s.board)
   if (!play) return null
-  return <PlayInner key={board} />
+  // slides is part of the key: the stage src is frozen at mount (slides=1 rides
+  // it), so crossing present↔slides MUST remount - a synced present stage would
+  // otherwise keep playing while the URL and store say slides. Focus↔present
+  // share a src shape and deliberately keep the live mount.
+  return <PlayInner key={play.slides ? `${board}:slides` : board} />
 }
 
 /** Board switcher dropdown in the play pill - the shared glass popover. */
@@ -254,7 +300,10 @@ function PlayInner() {
   const iframeRef = useRef<HTMLIFrameElement>(null)
   // the src is frozen at mount - navigation happens INSIDE the stage; device and theme
   // changes must never reload it (a phone does not remount when you flip dark mode)
-  const src = useRef(play ? `${ROUTE}/stage/?at=${encodeURIComponent(play.at)}&theme=${encodeURIComponent(play.theme)}` : '')
+  const slParams = (p: { slides?: boolean }) => p.slides
+    ? `&slides=1${BOARD_POLICY[useStore.getState().board]?.transition === 'none' ? '&tr=none' : ''}`
+    : ''
+  const src = useRef(play ? `${ROUTE}/stage/?at=${encodeURIComponent(play.at)}&theme=${encodeURIComponent(play.theme)}${slParams(play)}` : '')
   const [win, setWin] = useState({ w: window.innerWidth, h: window.innerHeight })
   const [pillOpen, setPillOpen] = useState(true)          // collapse (pill -> re-open fab), like the canvas
   const [stageReady, setStageReady] = useState(0)         // bumps on each sh:stage-ready (reload) - re-drives the highlight
@@ -263,6 +312,10 @@ function PlayInner() {
   // page ground) applies when the board's declared type is doc; lock and deep
   // links both drop the canvas door (lock as policy, deep as the link's chrome)
   const focus = !!play?.focus
+  const slides = !!play?.slides
+  const rawChrome = BOARD_POLICY[board]?.chrome
+  const deckChrome = rawChrome === 'none' || rawChrome === 'minimal' ? rawChrome : 'full'
+  const trimmed = slides && deckChrome !== 'full'   // minimal|none: strip the present tools
   const docPreset = focus && BOARD_POLICY[board]?.type === 'doc'
   const locked = boardLocked(board)
   const noDoor = locked || !!play?.deep
@@ -277,7 +330,7 @@ function PlayInner() {
     if (!playNav || !iframeRef.current) return
     const p = useStore.getState().play
     if (!p) return
-    iframeRef.current.src = `${ROUTE}/stage/?at=${encodeURIComponent(p.at)}&theme=${encodeURIComponent(p.theme)}&r=${playNav}`
+    iframeRef.current.src = `${ROUTE}/stage/?at=${encodeURIComponent(p.at)}&theme=${encodeURIComponent(p.theme)}${slParams(p)}&r=${playNav}`
   }, [playNav])
   const applyUpdate = () => useStore.getState().applyPlayUpdate()
 
@@ -290,6 +343,7 @@ function PlayInner() {
     // the lock caps disclosure: a locked board has no way out into other modes,
     // and a deep-link visit carries no door on the surface (URL still works)
     if (noDoor) return
+    frozenDeck = null
     const { at } = useStore.getState().play ?? {}
     if (isHideUI()) toggleHideUI()             // never strand the canvas with its chrome hidden
     useStore.getState().setPlay(null)
@@ -300,7 +354,7 @@ function PlayInner() {
 
   const setDevice = (name: string) => {
     const p = useStore.getState().play
-    if (p && (CONFIG.viewports[name] || name === 'fill')) useStore.getState().setPlay({ ...p, device: name })
+    if (p && (CONFIG.viewports[name] || name === 'fill' || (name === 'slide' && p.slides))) useStore.getState().setPlay({ ...p, device: name })
   }
   const setTheme = (t: string) => {
     const p = useStore.getState().play
@@ -313,13 +367,33 @@ function PlayInner() {
   const step = (dir: 1 | -1) => {
     const p = useStore.getState().play
     if (!p || p.focus) return                  // focus is one frame - no walking
+    if (p.slides) {
+      // a deck never wraps: past the last slide is the end, before the first is
+      // the start. A variant swap can put `at` off the frozen deck - step from
+      // its group's deck position, not from the top
+      const deck = currentDeck()
+      let i = deck.indexOf(p.at)
+      if (i === -1) {
+        const frames = useStore.getState().manifest?.frames ?? []
+        const g = frames.find((f) => f.id === p.at)?.variantGroup
+        if (g) i = deck.findIndex((id) => frames.find((f) => f.id === id)?.variantGroup === g)
+      }
+      const next = i === -1 ? deck[0] : deck[Math.min(deck.length - 1, Math.max(0, i + dir))]
+      if (next && next !== p.at) goTo(next)
+      return
+    }
     const list = playList()
     if (!list.length) return
     const i = list.indexOf(p.at)
     // an off-board frame has no position: → restarts, ← goes to the last board frame
     goTo(i === -1 ? (dir === 1 ? list[0] : list[list.length - 1]) : list[(i + dir + list.length) % list.length])
   }
-  const restart = () => { if (useStore.getState().play?.focus) return; const list = playList(); if (list.length) goTo(list[0]) }
+  const restart = () => {
+    const p = useStore.getState().play
+    if (p?.focus) return
+    const list = p?.slides ? currentDeck() : playList()
+    if (list.length) goTo(list[0])
+  }
 
   /** Variant siblings of the CURRENT frame present on this board: the
    *  review question is "which direction is better on THIS screen" - switch in place,
@@ -434,6 +508,7 @@ function PlayInner() {
     }
     if (key === 'ArrowRight') { step(1); return }
     if (key === 'ArrowLeft') { step(-1); return }
+    if (key === ' ' && useStore.getState().play?.slides) { step(1); return }
     if (key === '[') { switchVariant(-1); return }
     if (key === ']') { switchVariant(1); return }
     if (key === 'r') { restart(); return }
@@ -477,12 +552,16 @@ function PlayInner() {
 
   // doc preset: reading width, natural document scrolling - the iframe takes the
   // window's height at min(width, 860) CSS pixels, unscaled, and scrolls itself
+  const slideDev = slides && play.device === 'slide'
   const vp = docPreset ? { width: Math.min(win.w, 860), height: win.h }
     : fill ? { width: win.w, height: win.h }
-    : CONFIG.viewports[play.device] ?? Object.values(CONFIG.viewports)[0]
-  const scale = fill || docPreset ? 1 : Math.min(1, (win.w - 96) / vp.width, (win.h - 128) / vp.height)
+    : slideDev ? { width: SLIDE_INTRINSIC.width, height: SLIDE_INTRINSIC.height }
+    : CONFIG.viewports[play.device] ?? (slides ? { width: SLIDE_INTRINSIC.width, height: SLIDE_INTRINSIC.height } : Object.values(CONFIG.viewports)[0])
+  const scale = fill || docPreset ? 1
+    : slideDev ? Math.min(1, (win.w - 48) / vp.width, (win.h - (deckChrome === 'none' ? 48 : 88)) / vp.height)
+    : Math.min(1, (win.w - 96) / vp.width, (win.h - 128) / vp.height)
   const names = Object.keys(CONFIG.viewports)
-  const list = focus ? [play.at] : playList()
+  const list = focus ? [play.at] : slides ? currentDeck() : playList()
   const pos = list.indexOf(play.at)
   const variants = variantList()
   const frameEntry = useStore.getState().manifest?.frames.find((f) => f.id === play.at)
@@ -498,7 +577,13 @@ function PlayInner() {
     <div className={`sh-play${fill || docPreset ? ' fill' : ''}${docPreset ? ` doc t-${play.theme}` : ''}`}>
       {/* device + comment overlay share ONE flex-centered box; the overlay is inset:0 over
           it (a sibling of the clipping .dev, so a thread card is never eaten by overflow) */}
-      <div className="sh-play-stage" style={{ width: dw, height: dh }}>
+      <div className="sh-play-stage" style={{ width: dw, height: dh }}
+        onClick={slides ? (e) => {
+          // background advance: never on controls, links, media, comments, or goto targets
+          const t = e.target as Element
+          if (t.closest('a, button, input, textarea, select, video, [contenteditable], [data-goto], .cm-card, .cm-pin, .cm-stack, .sh-pill')) return
+          step(1)
+        } : undefined}>
         <div className="dev" data-theme={play.theme} style={{ width: dw, height: dh }}>
           <iframe
             ref={iframeRef}
@@ -510,16 +595,32 @@ function PlayInner() {
         <PlayComments iframe={iframeRef} frameId={play.at} vp={vp} dw={dw} dh={dh} ready={stageReady} />
       </div>
 
-      {!focus && list.length > 1 && (
-        <div className="sh-play-hint">← → to step · <kbd>c</kbd> to comment</div>
+      {/* the slim progress strip: the MINIMAL trim's one affordance - full
+          chrome already carries progress in the walker, so no duplicate */}
+      {slides && deckChrome === 'minimal' && (
+        <div className="sh-slides-strip" aria-label={`slide ${pos + 1} of ${list.length}`}>
+          <span className="n">{pos === -1 ? '·' : pos + 1} / {list.length}</span>
+          <span className="bar"><i style={{ width: `${list.length > 1 ? Math.max(2, ((pos + 1) / list.length) * 100) : 100}%` }} /></span>
+        </div>
       )}
 
       {/* top-left: brand + place (the present chrome's identity pill). A deep-link
           focus visit names only the frame - single-frame chrome, no board (04 §2.35);
           branding: false strips the mark (invariant 21). */}
+      {/* the brand/place pill: in slides it belongs ONLY to a locked deck share
+          (the link people open just to view and comment - no canvas door, so
+          the pill is what names the deck). Everywhere else the toolbars are
+          enough - a prototype session knows what it is playing */}
+      {(!slides || (locked && deckChrome !== 'none')) && (
       <nav className={`sh-pill sh-play-pill sh-play-brand${pillOpen ? '' : ' closed'}`} aria-hidden={!pillOpen}>
         {BRANDING && <>
-          <span className="sh-play-mark"><ParallelogramDuoIcon size={19} /><span className="wd">Marver</span></span>
+          <a
+            className="sh-play-mark"
+            href={poweredByUrl(CONFIG.projectName, PUBLISHED ? 'published-canvas' : 'dev-canvas', 'play-brand')}
+            target="_blank" rel="noreferrer" aria-label="marver.design"
+          >
+            <ParallelogramDuoIcon size={19} /><span className="wd">Marver</span>
+          </a>
           <i className="sep" />
         </>}
         {focus && <SpecDocIcon size={15} style={{ flex: 'none', opacity: .7, marginRight: -2 }} />}
@@ -529,23 +630,32 @@ function PlayInner() {
           </Tip>
         )}
       </nav>
+      )}
 
+      {/* the toolbar. Slides trims it to the doctrine's chrome: comment
+          affordance + the canvas door (+ a pending update) - laser, theme,
+          device, position, and collapse are present-mode tools. chrome: none
+          renders NO pill at all (and no FAB below) - not hidden, absent. */}
+      {!(slides && deckChrome === 'none') && (
       <nav className={`sh-pill sh-play-pill${pillOpen ? '' : ' closed'}`} aria-hidden={!pillOpen}>
-        {!focus && list.length > 1 && <>
+        {!focus && !slides && list.length > 1 && <>
           <span className="sh-play-pos">{pos === -1 ? '·' : pos + 1} / {list.length}</span>
           <i className="sep" />
         </>}
         <CommentButton />
-        <LaserButton />
-        <i className="sep" />
-        {!docPreset && <DevicePicker value={fill ? 'fill' : play.device} onSelect={(n) => n && setDevice(n)} includeFill hint={deviceHint} dark />}
-        <ThemePicker value={play.theme} onSelect={setTheme} hint="D" dark />
+        {!trimmed && <>
+          <LaserButton />
+          <i className="sep" />
+          {!docPreset && <DevicePicker value={fill ? 'fill' : play.device} onSelect={(n) => n && setDevice(n)} includeFill includeSlide={slides} hint={deviceHint} dark />}
+          <ThemePicker value={play.theme} onSelect={setTheme} hint="D" dark />
+        </>}
         {playUpdateRevision && <>
           <i className="sep" />
           <Tip side="bottom" label={<><b>Update ready</b><span>an edit landed - reload this prototype</span></>}>
             <button className="sh-pill-btn sh-play-update" onClick={applyUpdate}><ReloadIcon size={13} /><span>Update</span></button>
           </Tip>
         </>}
+        {!trimmed && <>
         <i className="sep" />
         <HideUIButton />
         <Tip side="bottom" label={<><b>Collapse toolbar</b><span>H hides everything · ⌘/</span></>}>
@@ -553,6 +663,7 @@ function PlayInner() {
             <PanelFilledIcon size={17} style={{ transform: 'rotate(90deg)' }} />
           </button>
         </Tip>
+        </>}
         {/* the canvas door: absent on a locked board (policy) and on a frame
             deep link (the link's chrome) - not hidden, not rendered */}
         {!noDoor && (
@@ -560,7 +671,7 @@ function PlayInner() {
             <button className="sh-pill-btn" onClick={exit}><GridIcon size={16} /></button>
           </Tip>
         )}
-        {BRANDING && PUBLISHED && (
+        {BRANDING && PUBLISHED && !trimmed && (
           <Tip side="bottom" label={<b>Open in app</b>}>
             <a className="sh-pill-btn" href="https://app.marver.design" target="_blank" rel="noopener" aria-label="Open in app">
               <BrowsersIcon size={16} />
@@ -568,12 +679,15 @@ function PlayInner() {
           </Tip>
         )}
       </nav>
+      )}
+      {!(slides && deckChrome === 'none') && (
       <Tip side="bottom" label={<><b>Open toolbar</b><span>⌘/</span></>}>
         <button className={`sh-pill-fab${pillOpen ? ' hidden' : ''}`} onClick={() => setPillOpen(true)}
           aria-hidden={pillOpen} tabIndex={pillOpen ? -1 : 0}><PanelHollowIcon size={18} style={{ transform: 'rotate(90deg)' }} /></button>
       </Tip>
+      )}
 
-      {!focus && <div className="sh-play-nav">
+      {!focus && !trimmed && <div className="sh-play-nav">
         <Tip inv label={<><b>Restart</b><span className="k">R</span></>}>
           <button onClick={restart}><ReloadIcon size={14} /></button>
         </Tip>

package/src/client/shell/Toolbar.tsx

@@ -11,7 +11,7 @@ import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { useStore, CONFIG, SOURCE_REVEALED, cap } from './store.ts'
 import { useComments } from './comments-store.ts'
 import { Tip } from './Tip.tsx'
-import { CaretIcon, CheckIcon, CommentIcon, DevicesIcon, EyeSlashIcon, FrameCornersIcon, LaserIcon, MoonIcon, SunIcon, deviceIcon } from './icons.tsx'
+import { CaretIcon, CheckIcon, CommentIcon, DevicesIcon, EyeSlashIcon, FrameCornersIcon, LaserIcon, MoonIcon, SlideFrameIcon, SunIcon, deviceIcon } from './icons.tsx'
 
 const commentsStore = () => useComments.getState()
 
@@ -153,18 +153,20 @@ export function HideUIButton() {
 /** Controlled device dropdown. `value` is the active device name ('fill' allowed when
  *  includeFill), null = default/mixed. The trigger + menu chrome is shared; the adapter
  *  owns what select does. */
-export function DevicePicker({ value, onSelect, includeDefault, includeFill, hint, dark }: {
+export function DevicePicker({ value, onSelect, includeDefault, includeFill, includeSlide, hint, dark }: {
   value: string | null
   onSelect: (name: string | null) => void
   includeDefault?: boolean
   includeFill?: boolean
+  /** slides mode: the deck's own 1280×720 stage as a first-class device */
+  includeSlide?: boolean
   hint?: ReactNode
   dark?: boolean
 }) {
   const pop = usePopover()
   const entries = Object.entries(CONFIG.viewports)
   const pick = (name: string | null) => { onSelect(name); pop.setOpen(false) }
-  const triggerIcon = value === 'fill' ? <FrameCornersIcon size={16} /> : deviceIcon(value, 16)
+  const triggerIcon = value === 'fill' ? <FrameCornersIcon size={16} /> : value === 'slide' ? <SlideFrameIcon size={16} /> : deviceIcon(value, 16)
   return (
     <div className="sh-theme" ref={pop.boxRef}>
       <Tip side="bottom" label={<><b>Device view</b>{hint && <span>{hint}</span>}</>}>
@@ -174,6 +176,13 @@ export function DevicePicker({ value, onSelect, includeDefault, includeFill, hin
         </button>
       </Tip>
       <Popover pop={pop} dark={dark}>
+        {includeSlide && <>
+          <button onClick={() => pick('slide')} title="1280 × 720">
+            <SlideFrameIcon size={15} /><span>Slide</span>
+            {value === 'slide' && <CheckIcon size={13} className="chk" />}
+          </button>
+          <i className="div" />
+        </>}
         {includeDefault && <>
           <button onClick={() => pick(null)}>
             <DevicesIcon size={15} /><span>Default</span><kbd>0</kbd>

package/src/client/shell/canvas/FrameNode.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback, useEffect, useRef } from 'react'
 import { cap, frameUrl, useStore, CONFIG, type Node } from '../store.ts'
-import { CopyIcon, IntentGlyph, ParallelogramFillIcon, ReloadIcon, XIcon } from '../icons.tsx'
+import { CopyIcon, IntentGlyph, ParallelogramFillIcon, ReloadIcon, SlideFrameIcon, XIcon } from '../icons.tsx'
 import { CommentLayer } from '../Comments.tsx'
 import { useComments } from '../comments-store.ts'
 import { threadHostKey } from '../keys.ts'
@@ -361,8 +361,10 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
         </div>
       )}
       <div className="sh-node-head sh-no-pan" onPointerDown={(e) => drag(e, 'move')} title={frame.file}>
-        {/* content frames carry their intent glyph in the chrome */}
-        {frame.intent && <IntentGlyph intent={frame.intent} size={12} className="iicon sh-no-pan" aria-label={frame.intent} />}
+        {/* the chrome badge: slide first, else the content intent glyph */}
+        {frame.slide
+          ? <SlideFrameIcon size={12} className="iicon sh-no-pan" role="img" aria-hidden={false} aria-label="slide" />
+          : frame.intent && <IntentGlyph intent={frame.intent} size={12} className="iicon sh-no-pan" aria-label={frame.intent} />}
         <span className="id sh-no-pan">{frame.title ?? frame.id}</span>
         <span className="dim sh-no-pan">{Math.round(node.w)} · {node.theme}</span>
       </div>