@marver-design/marver 0.19.1 → 0.20.0

package/src/client/shell/store.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import { ROUTE, slideSize } from '../const.ts'
 import { tidy, parseLayout, type BoardLayout, type TidyNode } from './tidy.ts'
-import { noteReserve, notesCramped } from './notes.ts'
+import { clearNoteHeights, noteHeight, noteReserve, notesCramped, setNoteHeight } from './notes.ts'
 import { stableNodeKey } from './keys.ts'
 // @ts-expect-error virtual module provided by the plugin
 import shConfig from 'virtual:sh-config'
@@ -208,9 +208,10 @@ export async function boardFrames(name: string): Promise<string[]> {
 }
 
 const HEADER = 28
-/** What tidy sees: nodes with their scene, variant run, header-inclusive height, and the sticky
+/** What tidy sees: nodes with their scene, variant run, header-inclusive height, the sticky
  *  note width to reserve in front (spec 18: the frame's note, and the scene's on every member -
- *  tidy keeps the scene reserve on the first node it places). */
+ *  tidy keeps the scene reserve on the first node it places), and the measured height of the
+ *  column standing there, so a note longer than its frame gets its room below as well. */
 export function tidyInput(nodes: readonly Node[], manifest: Manifest | null): TidyNode[] {
   const entryOf = (id: string) => manifest?.frames.find((f) => f.id === id)
   const sceneNote = (scene: string) => !!manifest?.scenes.find((s) => s.name === scene)?.note
@@ -219,7 +220,7 @@ export function tidyInput(nodes: readonly Node[], manifest: Manifest | null): Ti
     const scene = f?.scene ?? ''
     return {
       key: n.key, frame: n.frame, scene, group: f?.variantGroup, variant: f?.variant, w: n.w, h: n.h + HEADER,
-      noteW: noteReserve(!!f?.note, false), sceneNoteW: noteReserve(false, sceneNote(scene)),
+      noteW: noteReserve(!!f?.note, false), sceneNoteW: noteReserve(false, sceneNote(scene)), noteH: noteHeight(n.key),
     }
   })
 }
@@ -256,10 +257,10 @@ let liveScenes: Manifest['scenes'] | null = null                 // the last sh:
 const measuredHeights = new Map<string, number>()
 
 function defaultSize(frame: FrameEntry) {
-  // the precedence chain (spec 09 slice 1): slide intrinsic → authored
+  // the precedence chain (spec 09 slice 1): slide stage → 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)
+  // a slide's stage is its declared viewport, else 1280×720
+  const sl = slideSize(frame, CONFIG.viewports)
   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.
@@ -327,6 +328,8 @@ interface State {
   moveNode(key: string, x: number, y: number): void
   resizeNode(key: string, w: number, h: number): void
   measureNode(key: string, frameId: string, ownWidth: number, measuredWidth: number, height: number): void
+  /** A node's sticky column was drawn (or grew, or went): its extent from the node's top, world px. */
+  noteMeasured(key: string, height: number): void
   setStatus(key: string, status: Node['status'], error?: string): void
   bumpRev(key: string): void
   setThemeOn(key: string, theme: string): void
@@ -483,6 +486,7 @@ export const useStore = create<State>((set, get) => {
    *  null = failure (transport, malformed manifest, non-404 board error) - the caller
    *  keeps whatever board is currently mounted. */
   const loadBoardState = async (boardName: string): Promise<Partial<State> | null> => {
+    clearNoteHeights()                     // heights are per column drawn; a key shared by two board files carries none across
     try {
       let raw: any
       if (DATA) raw = DATA.manifest
@@ -996,6 +1000,11 @@ export const useStore = create<State>((set, get) => {
       set((st) => ({ nodes: st.nodes.map((n) => (n.key === key ? { ...n, h: H } : n)) }))
       scheduleReflow()
     },
+    noteMeasured(key, height) {
+      // the column's height is its content's - the layout learns it here, and a composed board
+      // whose next row now stands under a long note re-applies its recipe (0.19.2)
+      if (setNoteHeight(key, height)) roomForNotes()
+    },
     setDeviceView(name) {
       const vp = name ? CONFIG.viewports[name] : null
       if (name && !vp) return
@@ -1026,7 +1035,7 @@ export const useStore = create<State>((set, get) => {
         return { deviceView: name, dirty: true, baseLayout, nodes }
       })
       if (name) get().runTidy()                      // restore must NOT tidy - it would destroy positions
-      else scheduleSave()
+      else { scheduleSave(); roomForNotes() }         // ...unless a note grew meanwhile and the restored rows stand under it
     },
     bumpRev(key) { set((s) => ({ nodes: s.nodes.map((n) => (n.key === key ? { ...n, rev: (n.rev ?? 0) + 1 } : n)) })) },
     setThemeOn(key, theme) { set((s) => ({ nodes: s.nodes.map((n) => (n.key === key ? { ...n, themeOn: theme } : n)) })) },

package/src/client/shell/tidy.ts

@@ -4,6 +4,10 @@ export interface TidyNode {
    *  (its own note), and in front of the scene's first placed node (the scene note - carried on
    *  every member, applied once). A column holds both, so the wider wins, never the sum. */
   noteW?: number; sceneNoteW?: number
+  /** The note column's measured extent (world px from the node's top), when it is known. A column
+   *  taller than its card runs below it: the node takes that height in its lane, so the next
+   *  lane starts under the note - the gutter itself is still sized from the card. */
+  noteH?: number
 }
 export interface Placed { key: string; x: number; y: number }
 
@@ -36,20 +40,23 @@ interface Box {
   charW: number; charH: number
 }
 
-const box = (id: string, parts: Array<{ key: string; dx: number; dy: number; w: number; h: number }>): Box => ({
+/** `h` is the part's extent (card, or its note column when that runs further); `ch` the card's own
+ *  height, the characteristic size gutters are measured from - a long note never inflates them. */
+const box = (id: string, parts: Array<{ key: string; dx: number; dy: number; w: number; h: number; ch?: number }>): Box => ({
   id,
   parts: parts.map(({ key, dx, dy }) => ({ key, dx, dy })),
   w: Math.max(0, ...parts.map((p) => p.dx + p.w)),
   h: Math.max(0, ...parts.map((p) => p.dy + p.h)),
   charW: Math.max(0, ...parts.map((p) => p.w)),
-  charH: Math.max(0, ...parts.map((p) => p.h)),
+  charH: Math.max(0, ...parts.map((p) => p.ch ?? p.h)),
 })
+const extent = (n: TidyNode) => Math.max(n.h, n.noteH ?? 0)
 
 /** A run of nodes laid side by side (a frame's instances, or a variant run). */
 const runBox = (id: string, run: TidyNode[]): Box => {
-  const parts: Array<{ key: string; dx: number; dy: number; w: number; h: number }> = []
+  const parts: Array<{ key: string; dx: number; dy: number; w: number; h: number; ch?: number }> = []
   let dx = 0
-  for (const n of run) { dx += n.noteW ?? 0; parts.push({ key: n.key, dx, dy: 0, w: n.w, h: n.h }); dx += n.w + frameGapX(n.w) }
+  for (const n of run) { dx += n.noteW ?? 0; parts.push({ key: n.key, dx, dy: 0, w: n.w, h: extent(n), ch: n.h }); dx += n.w + frameGapX(n.w) }
   return box(id, parts)
 }
 
@@ -285,7 +292,7 @@ export function tidy(nodes: TidyNode[], layout?: BoardLayout, warn: Warn = () =>
     sceneMaps.set(scene, m)
     const parts = members
       .filter((n) => m.has(n.key))
-      .map((n) => ({ key: n.key, dx: m.get(n.key)!.x, dy: m.get(n.key)!.y, w: n.w, h: n.h }))
+      .map((n) => ({ key: n.key, dx: m.get(n.key)!.x, dy: m.get(n.key)!.y, w: n.w, h: extent(n), ch: n.h }))
     sceneBoxes.set(scene, box(scene, parts))
   }
 

package/src/client/stage/main.tsx

@@ -14,6 +14,7 @@ import { Component, createElement, useEffect, useRef, useState, type ComponentTy
 import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import { frameFile, frames, layoutChain, layouts, providers } from '../frame-host/registry.ts'
+import { SLIDE_DOC_CSS } from '../const.ts'
 import { createInspect } from '../frame-host/inspect.js'
 
 const params = new URLSearchParams(location.search)
@@ -21,13 +22,54 @@ const params = new URLSearchParams(location.search)
 // token systems, .dark for class-keyed ones (Tailwind/shadcn). Missing the class made
 // play render class-keyed apps light while the canvas showed them dark.
 const bootTheme = params.get('theme') ?? 'light'
-// slides mode (v1.5): the shell says so in the URL; the stage stamps the ONE
-// attribute the content primitives observe (data-sl-play lifts the rest-state
-// motion reset; data-sl-entered arms the entrance presets after each swap
-// settles). `tr=none` and prefers-reduced-motion both skip view transitions.
+// slides mode: the shell says so in the URL; the stage stamps the attributes every slide
+// can key its own motion off - data-sl-play (the deck is playing) on <html> for the whole
+// show, data-sl-entered once each swap settles, data-mv-slide while the mounted frame is a
+// `slide: true` frame. `tr=none` and prefers-reduced-motion both skip view transitions.
 const slidesMode = params.get('slides') === '1'
 const deckTransition = params.get('tr') ?? 'fade'
 if (slidesMode) document.documentElement.setAttribute('data-sl-play', '')
+
+/** The deck's playback CSS - player behaviour, so it lives with the player and serves every
+ *  slide, whatever its markup: one tempo (--marver-slide-tempo) for the morphs between slides
+ *  and the optional entrance presets (data-animate + data-animate-delay), which stay inert
+ *  until the slide has arrived. Anything beyond these is the author's own CSS or JS. */
+const DECK_CSS = `
+::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) {
+  animation-duration: var(--marver-slide-tempo, 350ms);
+}
+[data-sl-play] [data-animate] { opacity: 0 }
+[data-sl-play][data-sl-entered] [data-animate] {
+  opacity: 1; animation-duration: var(--marver-slide-tempo, 350ms); animation-timing-function: cubic-bezier(.2, .7, .2, 1);
+  animation-fill-mode: both;
+}
+[data-sl-play][data-sl-entered] [data-animate="fade-up"] { animation-name: sl-fade-up }
+[data-sl-play][data-sl-entered] [data-animate="fade"] { animation-name: sl-fade }
+[data-sl-play][data-sl-entered] [data-animate="scale-in"] { animation-name: sl-scale-in }
+[data-sl-play][data-sl-entered] [data-animate-delay="1"] { animation-delay: 80ms }
+[data-sl-play][data-sl-entered] [data-animate-delay="2"] { animation-delay: 160ms }
+[data-sl-play][data-sl-entered] [data-animate-delay="3"] { animation-delay: 240ms }
+@keyframes sl-fade-up { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
+@keyframes sl-fade { from { opacity: 0 } to { opacity: 1 } }
+@keyframes sl-scale-in { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
+@media (prefers-reduced-motion: reduce) {
+  [data-sl-play] [data-animate] { opacity: 1; animation: none !important }
+}
+`
+if (slidesMode) {
+  const el = document.createElement('style')
+  el.setAttribute('data-mv-deck', '')
+  el.textContent = DECK_CSS
+  document.head.appendChild(el)
+}
+// the slide document baseline, keyed on data-mv-slide (set per mounted frame): any mode can
+// show a slide, and its geometry must not depend on what the stage showed before
+{
+  const base = document.createElement('style')
+  base.setAttribute('data-mv-slide-doc', '')
+  base.textContent = SLIDE_DOC_CSS
+  document.head.appendChild(base)
+}
 const reducedMotion = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches
 document.documentElement.dataset.theme = bootTheme
 document.documentElement.classList.toggle('dark', bootTheme === 'dark')
@@ -45,7 +87,7 @@ document.addEventListener('gesturestart', (e) => e.preventDefault())
 // B0.2: a nested scroll container hitting its boundary must not chain into the shell page
 document.documentElement.style.overscrollBehavior = 'contain'
 
-interface Mounted { id: string; Frame: ComponentType; wrappers: ComponentType[] }
+interface Mounted { id: string; Frame: ComponentType; wrappers: ComponentType[]; slide: boolean }
 
 /** Resolve a frame id to its component + wrapper chain. Modules are import()-cached by
  *  Vite, so re-resolving a chain yields the SAME component references - React keeps
@@ -59,7 +101,7 @@ async function resolve(id: string): Promise<Mounted> {
   const providerKey = Object.keys(providers)[0]
   if (providerKey) wrappers.push((await providers[providerKey]() as any).default)
   for (const lk of layoutChain(fileKey)) wrappers.push((await layouts[lk]() as any).default)
-  return { id, Frame: mod.default, wrappers: wrappers.filter((w) => w != null) }
+  return { id, Frame: mod.default, wrappers: wrappers.filter((w) => w != null), slide: mod.meta?.slide === true }
 }
 
 class Boundary extends Component<{ resetKey: string; children?: ReactNode }, { err: Error | null }> {
@@ -119,7 +161,14 @@ function Stage() {
         for (const el of document.querySelectorAll('[data-animate]'))
           if (getComputedStyle(el).viewTransitionName !== 'none') el.removeAttribute('data-animate')
       }
-      const apply = () => { if (seq === swapSeq.current) { flushSync(() => { setErr(null); setMounted(next) }); current.current = id; disarm() } }
+      const apply = () => {
+        if (seq !== swapSeq.current) return
+        // the slide mark first: content primitives read it while they render
+        document.documentElement.toggleAttribute('data-mv-slide', next.slide)
+        flushSync(() => { setErr(null); setMounted(next) })
+        current.current = id
+        disarm()
+      }
       const entered = () => {
         if (!slidesMode || seq !== swapSeq.current) return
         document.documentElement.setAttribute('data-sl-entered', '')

package/templates/AGENTS-embedded.md

@@ -132,8 +132,9 @@ Report where the request came from: chat requests get chat replies; only comment
   raw HTML is inert. Readers comment on a note's text like on a frame element,
   fold it to its corner, hide all with N. An edit lands live without reloading the frame.
   Placement is not your job: every composed layout (recipe, auto board, tidy, device views)
-  reserves the note's room in front of its frame and re-applies when a note lands - never
-  move frames or pad a lane for a note, just write the file.
+  reserves the note's room in front of its frame and below it (a long note pushes the next
+  row down) and re-applies when a note lands or grows - never move frames or pad a lane for
+  a note, sideways or down, just write the file.
   Keep it an aside, a screen's worth at most: specs, flows and mood boards stay content frames.
   Full guide: instructions/shape.md.
 

package/templates/AGENTS-studio.md

@@ -132,8 +132,9 @@ Report where the request came from: chat requests get chat replies; only comment
   raw HTML is inert. Readers comment on a note's text like on a frame element,
   fold it to its corner, hide all with N. An edit lands live without reloading the frame.
   Placement is not your job: every composed layout (recipe, auto board, tidy, device views)
-  reserves the note's room in front of its frame and re-applies when a note lands - never
-  move frames or pad a lane for a note, just write the file.
+  reserves the note's room in front of its frame and below it (a long note pushes the next
+  row down) and re-applies when a note lands or grows - never move frames or pad a lane for
+  a note, sideways or down, just write the file.
   Keep it an aside, a screen's worth at most: specs, flows and mood boards stay content frames.
   Full guide: instructions/shape.md.