@marver-design/marver 0.13.0 → 0.14.0

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>

package/src/client/shell/hash.ts

@@ -20,7 +20,7 @@ export interface HashState {
   n?: string[]
   c?: string
   invite?: string
-  play?: { at?: string; device?: string; theme?: string }
+  play?: { at?: string; device?: string; theme?: string; slides?: boolean }
   /** A frame deep link: lands that visit in focus, over every other rule. */
   focus?: { at: string; device?: string; theme?: string }
 }
@@ -58,6 +58,7 @@ export function parseHash(hash: string = location.hash): HashState {
         at: params.get('at') ?? undefined,
         device: params.get('device') ?? undefined,
         theme: params.get('theme') ?? undefined,
+        ...(params.get('slides') === '1' ? { slides: true } : {}),
       },
     }
   } catch { return {} }   // a malformed hash (#/b/%) is a default view, never a crash
@@ -75,6 +76,7 @@ export function buildHash(s: HashState): string {
     const p = new URLSearchParams({ at: s.play.at })
     if (s.play.device) p.set('device', s.play.device)
     if (s.play.theme) p.set('theme', s.play.theme)
+    if (s.play.slides) p.set('slides', '1')
     return `#/p/${s.board}?${p}`
   }
   if (!s.board || (s.board === 'all-scenes' && !s.n?.length && !s.c)) return '#/'

package/src/client/shell/icons.tsx

@@ -71,6 +71,8 @@ export function IntentGlyph({ intent, size = 14, ...rest }: IconProps & { intent
     : ContentBlocksIcon
   return <I size={size} role="img" aria-hidden={false} aria-label={intent} {...({ title: intent } as object)} {...rest} />
 }
+/** The slide badge (v1.5): a 16:9 stage with the play wedge - a deck frame. */
+export const SlideFrameIcon = icon(<path d="M192,48H64A16,16,0,0,0,48,64V192a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64A16,16,0,0,0,192,48Zm0,144H64V64H192V192ZM240,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0ZM32,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0Z" />)
 export const PanelHollowIcon = icon(<><rect x="32" y="48" width="192" height="160" rx="32" fill="none" stroke="currentColor" strokeWidth="16" /><rect x="72" y="88" width="48" height="80" rx="24" fill="none" stroke="currentColor" strokeWidth="14" /></>)
 /** Board glyphs: CardsThree = the built-in `all-scenes` board; Cards = curated boards. */
 export const CardsThreeIcon = icon(<path d="M208,88H48a16,16,0,0,0-16,16v96a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V104A16,16,0,0,0,208,88Zm0,112H48V104H208v96ZM48,64a8,8,0,0,1,8-8H200a8,8,0,0,1,0,16H56A8,8,0,0,1,48,64ZM64,32a8,8,0,0,1,8-8H184a8,8,0,0,1,0,16H72A8,8,0,0,1,64,32Z" />)

package/src/client/shell/play-order.ts

@@ -0,0 +1,22 @@
+/** The deck order (v1.5), pure: slide tsx frames in the board's reading
+ *  order - (y, then x, then original index), deduped by frame id. Excluded
+ *  frames come back for a ONE-TIME warning at entry; this file stays
+ *  dependency-free so unit tests import it without React or virtual modules. */
+export interface OrderNode { frame: string; x: number; y: number; missing?: boolean }
+export interface OrderFrame { id: string; kind: 'tsx' | 'html'; slide?: boolean }
+
+export function deckOrder(
+  nodes: OrderNode[], frames: Map<string, OrderFrame>,
+): { deck: string[]; excluded: string[] } {
+  const rows = nodes
+    .map((n, i) => ({ n, i, f: frames.get(n.frame) }))
+    .filter(({ n, f }) => !n.missing && !!f)
+  const excluded = rows.filter(({ f }) => f!.kind !== 'tsx' || !f!.slide).map(({ f }) => f!.id)
+  const seen = new Set<string>()
+  const deck = rows
+    .filter(({ f }) => f!.kind === 'tsx' && !!f!.slide)
+    .sort((a, b) => a.n.y - b.n.y || a.n.x - b.n.x || a.i - b.i)
+    .filter(({ n }) => !seen.has(n.frame) && (seen.add(n.frame), true))
+    .map(({ n }) => n.frame)
+  return { deck, excluded: [...new Set(excluded)] }
+}

package/src/client/shell/store.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { ROUTE } from '../const.ts'
+import { ROUTE, slideSize } from '../const.ts'
 import { tidy, parseLayout, type BoardLayout } from './tidy.ts'
 import { stableNodeKey } from './keys.ts'
 // @ts-expect-error virtual module provided by the plugin
@@ -30,9 +30,18 @@ export const PUBLISHED = DATA !== null
 export const SOURCE_REVEALED = DATA ? DATA.policy?.reveal?.source === true : true
 
 /** The published per-board artifact metadata (type, open, lock). Empty in dev. */
-export const BOARD_POLICY: Record<string, { type?: string; open?: string; lock?: boolean }> = DATA?.policy?.boards ?? {}
+export const BOARD_POLICY: Record<string, { type?: string; open?: string; lock?: boolean; transition?: string; chrome?: string }> = DATA?.policy?.boards ?? {}
 
-export interface FrameEntry { id: string; file: string; kind: 'tsx' | 'html'; scene: string; title?: string; viewport?: string; theme?: string; variantGroup?: string; variant?: string; intent?: string; contentWidth?: number }
+export { SLIDE_INTRINSIC } from '../const.ts'
+
+/** Dev-only hydration: the shell loads the repo's publish.json boards so an
+ *  author previews slides mode exactly as viewers will get it. Published
+ *  builds carry the policy inline and never call this. */
+export function hydrateBoardPolicy(boards: Record<string, { type?: string; open?: string; lock?: boolean; transition?: string; chrome?: string }>) {
+  for (const [k, v] of Object.entries(boards)) if (!BOARD_POLICY[k]) BOARD_POLICY[k] = v
+}
+
+export interface FrameEntry { id: string; file: string; kind: 'tsx' | 'html'; scene: string; title?: string; viewport?: string; theme?: string; variantGroup?: string; variant?: string; intent?: string; contentWidth?: number; slide?: boolean }
 export interface Manifest { frames: FrameEntry[]; scenes: { name: string; frames: number }[] }
 export interface Node {
   key: string; frame: string; x: number; y: number; w: number; h: number
@@ -83,17 +92,24 @@ export function landingMode(board: string): 'canvas' | 'board' | 'present' | 'fo
   const p = BOARD_POLICY[board]
   if (!p) return 'canvas'
   if (p.open && ['canvas', 'board', 'present', 'focus', 'slides'].includes(p.open)) {
-    // slides is v1.5 - until the mode exists it lands in present, its nearest kin
-    return p.open === 'slides' ? 'present' : p.open as any
+    return p.open as any
   }
   switch (p.type) {
     case 'doc': return 'focus'
-    case 'slides': return 'present'          // slides mode is v1.5; present until then
+    case 'slides': return 'slides'
     case 'design': case 'sketch': case 'refs': return 'board'
     default: return 'canvas'
   }
 }
 
+/** Does this board PLAY as a deck? A `type: slides` board is a deck whatever
+ *  its landing (`open: canvas` only says where viewers arrive) - the P key and
+ *  the play button route here, never through landingMode. */
+export function playsAsSlides(board: string): boolean {
+  const p = BOARD_POLICY[board]
+  return p?.type === 'slides' || p?.open === 'slides'
+}
+
 /** Is this board frozen to its landing mode? The lock caps disclosure - no way
  *  out into other modes, and (published) no sidebar ever renders for it. */
 export const boardLocked = (board: string): boolean => BOARD_POLICY[board]?.lock === true
@@ -101,7 +117,7 @@ export const boardLocked = (board: string): boolean => BOARD_POLICY[board]?.lock
 /** May this board enter `mode`? A lock freezes what open pinned - a board
  *  locked to canvas must refuse present just as one locked to present refuses
  *  canvas. Unlocked boards enter anything. */
-export const modeAllowed = (board: string, mode: 'present' | 'focus'): boolean =>
+export const modeAllowed = (board: string, mode: 'present' | 'focus' | 'slides'): boolean =>
   !boardLocked(board) || landingMode(board) === mode
 
 export { cap, humanize } from './labels.ts'
@@ -173,6 +189,11 @@ const manifestKey = (m: Manifest) => JSON.stringify(m.frames)   // any change co
 const measuredHeights = new Map<string, number>()
 
 function defaultSize(frame: FrameEntry) {
+  // the precedence chain (spec 09 slice 1): slide intrinsic → authored
+  // viewport → content sizing → default (one helper, shared with shot) -
+  // the Slide root renders fixed 1280×720, so nothing may size it smaller
+  const sl = slideSize(frame)
+  if (sl) return { w: sl.width, h: sl.height }
   // content frames: own width from Doc layout; height from the latest
   // measurement at that width, or a placeholder until sh:measure lands.
   // meta.viewport, when declared, wins - the existing precedence.
@@ -206,7 +227,7 @@ interface State {
    *  fourth mode): no walking, doc reading preset when the board type is doc.
    *  `deep` = entered by a frame deep link - the chrome then carries no board
    *  name and no canvas door (presentation default of the link, 04 §2.35). */
-  play: { at: string; device: string; theme: string; focus?: boolean; deep?: boolean } | null
+  play: { at: string; device: string; theme: string; focus?: boolean; deep?: boolean; slides?: boolean } | null
   gesture: boolean                    // a frame drag/resize is in progress - canvas panning is disabled
   laser: boolean                      // laser/inspect mode: frames outline their structure
   board: string                       // active board name; 'all-scenes' is the auto board

package/src/client/shell/styles.css

@@ -736,22 +736,6 @@ body.sh-commenting .sh-lean { opacity: 0 }
 .sh-play-chip:hover { color: #f5f5f7 }
 .sh-play-chip.idle { opacity: 0; pointer-events: none; transform: scale(.6) }
 
-/* the H coach bubble: hairline, translucent, teaches the way back from immersive mode.
-   Same pill geometry and separators as the bar it stands in for. */
-.sh-play-hint { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; gap: 3px;
-  padding: 4px 4px 4px 14px; border-radius: 999px;
-  background: rgba(18, 18, 24, .6); border: 1px solid rgba(255, 255, 255, .14);
-  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
-  font: 500 12px -apple-system, system-ui, sans-serif; color: rgba(245, 245, 247, .85);
-  animation: sh-play-in .3s ease-out }
-.sh-play-hint .sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .14); margin: 0 8px }
-.sh-play-hint kbd { font: 600 11px -apple-system, system-ui, sans-serif; padding: 1px 6px; border-radius: 5px;
-  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16) }
-.sh-play-hint button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
-  font: 600 11px -apple-system, system-ui, sans-serif; background: rgba(255, 255, 255, .14); color: #f5f5f7 }
-.sh-play-hint button:hover { background: rgba(255, 255, 255, .22) }
-.sh-play-hint button.dim { background: transparent; color: rgba(245, 245, 247, .5); font-weight: 500 }
-.sh-play-hint button.dim:hover { color: rgba(245, 245, 247, .8); background: rgba(255, 255, 255, .08) }
 
 /* ---- Focus: silent for pointer + shortcut use; ONE branded inset ring, and only while
    the user is actually Tab-navigating (body.sh-kbd, armed by Tab, disarmed by pointer).
@@ -861,22 +845,19 @@ body.sh-hide-ui .sh-play-nav { display: none !important }
 
 /* ---- present/focus chrome (sharing v1): brand pill top-left, counter in the
    toolbar, doc reading preset. Same glass skin as the play pill. */
-.sh-play-brand.sh-pill { left: var(--edge); right: auto; transform-origin: 22px 22px; padding: 5px 14px 5px 10px }
-.sh-play-mark { display: inline-flex; align-items: center; gap: 7px; padding: 0 2px 0 6px; color: rgba(245, 245, 247, .88) }
+/* the brand pill matches the toolbar pill to the pixel: the SAME .sh-pill
+   padding (5px) and the SAME 34px inner height as .sh-pill-btn - its two
+   children are sized like buttons, so text metrics never set the height */
+.sh-play-brand.sh-pill { left: var(--edge); right: auto; transform-origin: 22px 22px; padding: 5px 9px 5px 5px }
+.sh-play-mark { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 10px; border-radius: 999px;
+  color: rgba(245, 245, 247, .88); text-decoration: none; cursor: pointer }
+.sh-play-mark:hover { background: rgba(255, 255, 255, .1); color: #f5f5f7 }
 .sh-play-mark svg { color: #6db3ff }
 .sh-play-mark .wd { font: 600 13px -apple-system, system-ui, sans-serif; letter-spacing: -.01em }
-.sh-play-title { font: 500 13px -apple-system, system-ui, sans-serif; color: rgba(245, 245, 247, .82);
+.sh-play-title { display: inline-block; height: 34px; line-height: 34px; font: 500 13px/34px -apple-system, system-ui, sans-serif; color: rgba(245, 245, 247, .82);
   max-width: 143px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px }
 .sh-play-pos { font: 500 12.5px -apple-system, system-ui, sans-serif; color: rgba(245, 245, 247, .64);
   font-variant-numeric: tabular-nums; padding: 0 8px; white-space: nowrap }
-/* the hint pill: bottom center, the design's quiet keyboard cue */
-.sh-play-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 31;
-  border-radius: 999px; padding: 7px 16px; white-space: nowrap;
-  background: rgba(18, 18, 24, .8); border: 1px solid rgba(255, 255, 255, .1);
-  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
-  font: 500 12px -apple-system, system-ui, sans-serif; color: rgba(245, 245, 247, .64) }
-.sh-play-hint kbd { font: 500 11.5px ui-monospace, monospace }
-body.sh-hide-ui .sh-play-hint { display: none !important }
 /* doc preset: the page IS the surface - reading column on a calm ground, no
    device shell, natural document scrolling inside the frame */
 .sh-play.doc { background: #f4f4f6 }
@@ -1249,3 +1230,12 @@ body.sh-hide-ui .sh-play-hint { display: none !important }
   color: rgba(255,255,255,.92); font: 700 13px/1 -apple-system, system-ui, sans-serif; letter-spacing: .02em }
 /* the title row is flex, which swallows the JSX whitespace - the verb carries its own gap */
 .sh-jam-frame .v { color: var(--glass-ink-2); font-weight: 500; margin-left: 4px; flex: none }
+
+/* v1.5 slides mode: the slim progress strip + the zero-chrome escape hatch */
+.sh-slides-strip { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 30;
+  display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px;
+  background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur) }
+.sh-slides-strip .n { font: 600 12px/1 -apple-system, system-ui, sans-serif; color: var(--glass-ink-2); white-space: nowrap }
+.sh-slides-strip .bar { width: 140px; height: 3px; border-radius: 999px; background: var(--glass-hover); overflow: hidden }
+.sh-slides-strip .bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease }
+@media (max-width: 480px) { .sh-slides-strip .bar { width: 80px } }