@marver-design/marver 0.19.2 → 0.21.0

package/src/client/shell/BoardList.tsx

@@ -1,17 +1,18 @@
-import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
 import { useStore, HAS_ALL_SCENES, PUBLISHED, fetchBoardTree, rememberTitles, type TreeBase } from './store.ts'
 import { canvasCtl } from './canvas/Canvas.tsx'
 import { Tip } from './Tip.tsx'
 import { copyToClipboard, type MenuItem, type MenuOpener } from './ContextMenu.tsx'
 import { ArrowLineUpIcon, CardsIcon, CardsThreeIcon, FolderIcon, FolderMinusIcon, FolderOpenIcon, FolderPlusIcon, PencilSimpleIcon, SignpostIcon } from './icons.tsx'
 import {
-  applyDrop, boardsIn, createFolder, deleteFolder, folderIn, folderOf, foldersIn, humanize, isOwnSlot, labelOf, moveBoard, newFolderSlot, readTitle, resolveDrop, retitleFolder, rootIndex, slugFor,
+  applyDrop, boardsIn, createFolder, deleteFolder, depthOf, folderEntries, folderIn, folderOf, foldersIn, holdsFolders, humanize, INDENT, isOwnSlot, labelOf, listIn, moveBoard, moveFolderToRoot, newFolderSlot, parentOf, readTitle,
+  resolveDrop, retitleFolder, rootIndex, slugFor,
   type Drag, type Drop, type Folder, type Row, type TreeItem,
 } from '../../shared/board-tree.ts'
 
 /**
- * Boards live at the top of the sidebar - always visible, one click to switch - in ONE level
- * of folders. The tree (shared/board-tree.ts) comes from the board files' `order`/`folder`
+ * Boards live at the top of the sidebar - always visible, one click to switch - in up to TWO
+ * levels of folders (a folder holds boards and folders; a sub-folder holds boards). The tree (shared/board-tree.ts) comes from the board files' `order`/`folder`
  * fields plus the `_folders.json` registry; every mutation here (drag, new/rename/delete
  * folder, move) is one optimistic tree write through `arrangeBoards`, replayed once on a
  * 409 (someone else wrote first). The list refreshes on mount, window focus, a slow poll and
@@ -23,8 +24,9 @@ const CLOSED_KEY = 'mv-folders-closed'   // collapsed folders are a viewer prefe
 const readClosed = (): Record<string, true> => { try { return JSON.parse(localStorage.getItem(CLOSED_KEY) ?? '{}') } catch { return {} } }
 
 /** The inline input: renaming a board or a folder, or naming a NEW folder that does not exist
- *  yet - drawn at root `index`, optionally with `board` already inside it. */
-type Naming = { kind: 'board' | 'folder'; name: string } | { kind: 'new'; index: number; board?: string }
+ *  yet - drawn at `index` in `parent`'s items (null = the root), optionally with `board`
+ *  already inside it. */
+type Naming = { kind: 'board' | 'folder'; name: string } | { kind: 'new'; index: number; board?: string; parent: string | null }
 /** A mutation as intent: applied to whichever tree is current, so a 409 can replay it. */
 type Intent = (tree: TreeItem[]) => TreeItem[] | null
 
@@ -185,7 +187,7 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
         refresh()
         return
       }
-      const folderLabels = tree.filter((it): it is Folder => it.kind === 'folder' && (n.kind !== 'folder' || it.name !== n.name)).map((it) => labelOf(it.name, it.title))
+      const folderLabels = folderEntries(tree).map((e) => e.folder).filter((f) => n.kind !== 'folder' || f.name !== n.name).map((f) => labelOf(f.name, f.title))
       if (n.kind === 'folder') {
         const current = folderIn(tree, n.name)
         if (!current || title === labelOf(n.name, current.title)) { setNaming(null); return }
@@ -196,11 +198,11 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
       }
       if (n.kind !== 'new') return
       if (folderLabels.includes(title)) { taken('folder'); return }
-      const { index, board: withBoard } = n
+      const { index, board: withBoard, parent } = n
       const slug = slugFor(title, foldersIn(tree))                                // "Old stuff" → old-stuff (-2 past a namesake); "🚀" alone → folder
       setNaming(null)
       setOpen(slug, true)                                                       // a new folder opens, whatever an old namesake left behind
-      if (!mutate((t) => createFolder(t, slug, index, withBoard, stored(slug) || undefined))) useStore.getState().toast('that board is gone - nothing changed')
+      if (!mutate((t) => createFolder(t, slug, index, withBoard, stored(slug) || undefined, parent))) useStore.getState().toast(withBoard ? 'that board is gone - nothing changed' : 'that folder is gone - nothing changed')
     } finally { commitBusy.current = false }
   }
 
@@ -210,7 +212,10 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
   const measure = (): Row[] => Array.from(rootRef.current?.querySelectorAll<HTMLElement>('[data-board-row],[data-folder-row]') ?? []).map((el) => {
     const r = el.getBoundingClientRect()
     const folder = el.hasAttribute('data-folder-row')
-    return { kind: folder ? 'folder' : 'board', name: el.dataset.folderRow ?? el.dataset.board ?? '', parent: folder ? null : (el.dataset.folder ?? null), open: el.dataset.open === '1', top: r.top, bottom: r.bottom, left: r.left }
+    return {
+      kind: folder ? 'folder' : 'board', name: el.dataset.folderRow ?? el.dataset.board ?? '', parent: (folder ? el.dataset.parent : el.dataset.folder) ?? null,
+      depth: Number(el.dataset.depth ?? 0), open: el.dataset.open === '1', top: r.top, bottom: r.bottom, left: r.left,
+    }
   })
   /** The drop target for the pointer at (x, y), or null: outside the panel (a release there
    *  cancels), or a slot that would change nothing. Inside the panel there is always one - the
@@ -289,22 +294,36 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
   }, [])
 
   // ---- menus (flat lists, no submenus) ----
-  const newFolderAt = (index: number, withBoard?: string) => setNaming({ kind: 'new', index, board: withBoard })
+  const newFolderAt = (index: number, withBoard?: string, parent: string | null = null) => {
+    if (parent) setOpen(parent, true)                                // the new folder is drawn inside its parent: show it
+    setNaming({ kind: 'new', index, board: withBoard, parent })
+  }
   const boardMenu = (n: string, parent: string | null): MenuItem[] => {
     const items: MenuItem[] = [{ label: 'Copy path', icon: <SignpostIcon size={15} />, onClick: () => copyToClipboard(`board: ${n}`, 'path copied') }]
     if (PUBLISHED || n === 'all-scenes') return items
     items.push({ label: 'Rename', icon: <PencilSimpleIcon size={15} />, onClick: () => setNaming({ kind: 'board', name: n }) })
-    // the new folder takes the board's own slot (or the slot after its current folder)
-    items.push({ label: 'Move to new folder', icon: <FolderPlusIcon size={15} />, onClick: () => newFolderAt(newFolderSlot(treeRef.current, n), n) })
+    // the new folder takes the board's own slot at its own level (a sub-folder inside a top-level
+    // folder; right after its sub-folder when it sits in one - that level holds no folders)
+    items.push({ label: 'Move to new folder', icon: <FolderPlusIcon size={15} />, onClick: () => { const at = newFolderSlot(treeRef.current, n); newFolderAt(at.index, n, at.parent) } })
     // moving into an EXISTING folder is a drag, not a menu - the list stays short
-    if (parent) items.push({ label: 'Move to top level', icon: <ArrowLineUpIcon size={15} />, onClick: () => mutate((t) => { const p = folderOf(t, n); return moveBoard(t, n, null, p ? rootIndex(t, 'folder', p) + 1 : undefined) }) })
+    if (parent) items.push({ label: 'Move to top level', icon: <ArrowLineUpIcon size={15} />, onClick: () => mutate((t) => {
+      const p = folderOf(t, n)
+      const top = p ? parentOf(t, p) ?? p : null                     // lands right after the top-level folder it was in
+      return moveBoard(t, n, null, top ? rootIndex(t, 'folder', top) + 1 : undefined)
+    }) })
     return items
   }
-  const folderMenu = (f: string, boards: string[]): MenuItem[] => {
-    const items: MenuItem[] = [{ label: 'Copy path', icon: <SignpostIcon size={15} />, onClick: () => copyToClipboard(`folder: ${f}  (boards: ${boards.join(', ') || 'none'})`, 'path copied') }]
+  const folderMenu = (f: string, boards: string[], parent: string | null): MenuItem[] => {
+    const items: MenuItem[] = [{ label: 'Copy path', icon: <SignpostIcon size={15} />, onClick: () => copyToClipboard(`folder: ${f}${parent ? ` (in ${parent})` : ''}  (boards: ${boards.join(', ') || 'none'})`, 'path copied') }]
     if (PUBLISHED) return items
     items.push({ label: 'Rename', icon: <PencilSimpleIcon size={15} />, onClick: () => setNaming({ kind: 'folder', name: f }) })
-    // folders organise, never own: deleting one puts its boards back at the top level, in order
+    // two levels: a top-level folder can hold folders; a sub-folder can leave its parent
+    if (!parent) items.push({ label: 'New folder inside', icon: <FolderPlusIcon size={15} />, onClick: () => newFolderAt(listIn(treeRef.current, f)?.length ?? 0, undefined, f) })
+    else items.push({ label: 'Move to top level', icon: <ArrowLineUpIcon size={15} />, onClick: () => mutate((t) => {
+      const p = parentOf(t, f)
+      return moveFolderToRoot(t, f, p ? rootIndex(t, 'folder', p) + 1 : undefined)
+    }) })
+    // folders organise, never own: deleting one moves what it holds up one level, into its place, in order
     items.push({ label: 'Delete folder', icon: <FolderMinusIcon size={15} />, onClick: () => { setOpen(f, true); mutate((t) => deleteFolder(t, f)) } })
     return items
   }
@@ -327,6 +346,15 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // a draft new folder whose parent vanished or got nested mid-naming is cancelled, said once
+  const orphanDraft = naming?.kind === 'new' && !holdsFolders(tree, naming.parent)
+  useEffect(() => {
+    if (!orphanDraft) return
+    setNaming(null)
+    useStore.getState().toast('that folder changed - the new folder was not made')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [orphanDraft])
+
   // ---- rows ----
   const input = (defaultValue: string, placeholder?: string) => (
     <input autoFocus defaultValue={defaultValue} placeholder={placeholder} spellCheck={false}
@@ -337,26 +365,51 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
       }}
       onBlur={(e) => { if (namingRef.current) void commit(e.currentTarget.value) }} />
   )
-  // ONE seam per gap, from the insertion index: drop-before the row AT that index, or drop-after
-  // the last row of a folder's list. Overlay (::after), so no layout shift. Never on the row
-  // being dragged. The root end slot draws before the pinned all-scenes row, never after a
-  // folder header (that seam would read as "inside").
-  const seam = (list: string | null, index: number, last: boolean): string => {
-    if (!drag || !drop || 'into' in drop || drop.list !== list) return ''
-    return drop.index === index ? ' drop-before' : last && drop.index === index + 1 ? ' drop-after' : ''
+  // a new folder being named is drawn at its future slot, its board (if any) already inside;
+  // that board leaves its usual row for the duration. A draft whose parent vanished or can no
+  // longer hold folders (an agent deleted or nested it mid-naming) draws nothing and hides
+  // nothing - the effect below cancels it, so the board it held shows where it now is
+  const draftLive = naming?.kind === 'new' && holdsFolders(tree, naming.parent)
+  const draft = naming?.kind === 'new' && draftLive ? (naming.board && !boardsIn(tree).includes(naming.board) ? { ...naming, board: undefined } : naming) : null   // a board deleted mid-naming leaves the draft
+  const visible = (items: TreeItem[]) => (draft?.board ? items.filter((k) => !(k.kind === 'board' && k.name === draft.board)) : items)
+  const key = (it: TreeItem) => `${it.kind === 'board' ? 'b' : 'f'}:${it.name}`
+  /** The last row an item draws: a board's own, a closed or empty folder's header, else its last child's last row. */
+  const lastRow = (it: TreeItem): string => {
+    if (it.kind === 'board') return key(it)
+    const kids = visible(it.items)
+    return !closed[it.name] && kids.length ? lastRow(kids[kids.length - 1]!) : key(it)
   }
-  const boardRow = (n: string, parent: string | null, index: number, last: boolean) => {
+  // ONE seam per gap, overlaid (::after, no layout shift) on the row the gap touches: before the
+  // first row of the item AT the index, or after the last row of a list's last item at its end.
+  // Its left edge follows the indent of the list it lands in, so "inside" and "outside" never
+  // draw alike. The root end draws before the pinned all-scenes row. An open EMPTY folder has no
+  // row to draw on: its header draws the indented seam under itself (drop-in).
+  const seam = ((): { row: string; where: 'before' | 'after'; depth: number } | null => {
+    if (!drag || !drop || 'into' in drop) return null
+    const items = listIn(tree, drop.list)
+    if (!items) return null
+    const depth = depthOf(tree, drop.list)
+    if (drop.index < items.length) return { row: key(items[drop.index]!), where: 'before', depth }
+    if (drop.list === null && HAS_ALL_SCENES) return { row: 'b:all-scenes', where: 'before', depth: 0 }
+    return items.length ? { row: lastRow(items[items.length - 1]!), where: 'after', depth } : null
+  })()
+  const seamLeft = (depth: number): CSSProperties => ({ ['--seam-left' as string]: `${depth ? depth * INDENT : 6}px` })
+  const seamOf = (row: string): { cls: string; style?: CSSProperties } =>
+    seam && seam.row === row ? { cls: ` drop-${seam.where}`, style: seamLeft(seam.depth) } : { cls: '' }
+  const indent = (depth: number) => (depth >= 2 ? ' in-folder in-sub' : depth === 1 ? ' in-folder' : '')
+
+  const boardRow = (n: string, parent: string | null, depth: number) => {
     const dragging = drag?.kind === 'board' && drag.name === n
-    const dropCls = dragging ? '' : n === 'all-scenes' ? (drop && !('into' in drop) && drop.list === null && drop.index === tree.length ? ' drop-before' : '') : seam(parent, index, last)
+    const s = dragging ? { cls: '' } : seamOf(`b:${n}`)
     // the row being renamed is still a row: measured by a drag (its slot exists) and it draws its seam
     if (naming?.kind === 'board' && naming.name === n) return (
-      <div key={n} data-board-row data-board={n} data-folder={parent ?? undefined} className={`it board editing${parent ? ' in-folder' : ''}${dropCls}`}><CardsIcon size={14} />{input(label(n))}</div>
+      <div key={`b:${n}`} data-board-row data-board={n} data-folder={parent ?? undefined} data-depth={depth} className={`it board editing${indent(depth)}${s.cls}`} style={s.style}><CardsIcon size={14} />{input(label(n))}</div>
     )
     const canDrag = !PUBLISHED && n !== 'all-scenes'
     const item: Drag = { kind: 'board', name: n }
     return (
-      <button key={`${parent ?? ''}/${n}`} data-board-row data-board={n} data-folder={parent ?? undefined} data-reorderable={canDrag || undefined}
-        className={`it board${parent ? ' in-folder' : ''}${n === board ? ' cur' : ''}${dragging ? ' dragging' : ''}${dropCls}`}
+      <button key={`b:${n}`} data-board-row data-board={n} data-folder={parent ?? undefined} data-depth={depth} data-reorderable={canDrag || undefined}
+        className={`it board${indent(depth)}${n === board ? ' cur' : ''}${dragging ? ' dragging' : ''}${s.cls}`} style={s.style}
         // draggable rows switch on the pointer tap (onPointerUp), so their trailing mouse
         // click (detail >= 1) must be ignored to avoid a double switch; keyboard clicks
         // (detail === 0) and non-draggable rows (all-scenes, published) switch here as normal
@@ -372,23 +425,42 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
       </button>
     )
   }
-  const folderRow = (it: Folder, boards: string[], index: number): ReactNode[] => {
+  const draftRows = (depth: number): ReactNode[] => !draft ? [] : [
+    <div key="f:new" className={`it folder editing${indent(depth)}`}><FolderOpenIcon size={14} />{input('', 'Folder name')}</div>,
+    ...(draft.board ? [<div key="new/board" className={`it board draft${indent(depth + 1)}${draft.board === board ? ' cur' : ''}`}><CardsIcon size={14} /><span>{label(draft.board)}</span></div>] : []),
+  ]
+  /** A list's rows - the root's, a folder's, a sub-folder's - with a draft new folder at its slot. */
+  const listRows = (items: TreeItem[], parent: string | null, depth: number): ReactNode[] => {
+    const out: ReactNode[] = []
+    const here = draft && draft.parent === parent ? draft : null
+    items.forEach((it, i) => {
+      if (here && here.index === i) out.push(...draftRows(depth))
+      if (it.kind === 'board') { if (draft?.board !== it.name) out.push(boardRow(it.name, parent, depth)) }
+      else out.push(...folderRows(it, parent, depth))
+    })
+    if (here && here.index >= items.length) out.push(...draftRows(depth))
+    return out
+  }
+  const folderRows = (it: Folder, parent: string | null, depth: number): ReactNode[] => {
     const f = it.name
     const open = !closed[f]
+    const kids = visible(it.items)
+    const boards = boardsIn(kids)
+    const s = seamOf(`f:${f}`)
     const rows: ReactNode[] = []
     if (naming?.kind === 'folder' && naming.name === f) {
-      rows.push(<div key={`f:${f}`} data-folder-row={f} data-open={open ? '1' : '0'} className={`it folder editing${seam(null, index, false)}`}>{open ? <FolderOpenIcon size={14} /> : <FolderIcon size={14} />}{input(labelOf(f, it.title))}</div>)
+      rows.push(<div key={`f:${f}`} data-folder-row={f} data-parent={parent ?? undefined} data-depth={depth} data-open={open ? '1' : '0'} className={`it folder editing${indent(depth)}${s.cls}`} style={s.style}>{open ? <FolderOpenIcon size={14} /> : <FolderIcon size={14} />}{input(labelOf(f, it.title))}</div>)
     } else {
       const item: Drag = { kind: 'folder', name: f }
       const dragging = drag?.kind === 'folder' && drag.name === f
       const into = !!drag && !!drop && 'into' in drop && drop.into === f
-      // a slot inside an open EMPTY folder has no board row to draw on: the indented seam sits under the header
-      const inSeam = !!drag && !!drop && !('into' in drop) && drop.list === f && open && boards.length === 0
+      const inSeam = !!drag && !!drop && !('into' in drop) && drop.list === f && open && kids.length === 0
+      const sc = dragging ? { cls: '' } : inSeam ? { cls: ' drop-in', style: seamLeft(depth + 1) } : s
       rows.push(
-        <button key={`f:${f}`} data-folder-row={f} data-open={open ? '1' : '0'} data-reorderable={!PUBLISHED || undefined}
-          className={`it folder${boards.includes(board) ? ' held' : ''}${dragging ? ' dragging' : ''}${into ? ' drop-into' : ''}${inSeam ? ' drop-in' : ''}${dragging ? '' : seam(null, index, false)}`}
+        <button key={`f:${f}`} data-folder-row={f} data-parent={parent ?? undefined} data-depth={depth} data-open={open ? '1' : '0'} data-reorderable={!PUBLISHED || undefined}
+          className={`it folder${indent(depth)}${boards.includes(board) ? ' held' : ''}${dragging ? ' dragging' : ''}${into ? ' drop-into' : ''}${sc.cls}`} style={sc.style}
           onClick={(e) => { if (PUBLISHED || e.detail === 0) setOpen(f, !open) }}
-          onContextMenu={(e) => onMenu(e, folderMenu(f, boards))}
+          onContextMenu={(e) => onMenu(e, folderMenu(f, boards, parent))}
           onPointerDown={!PUBLISHED ? (e) => onPointerDown(e, item) : undefined}
           onPointerMove={!PUBLISHED ? onPointerMove : undefined}
           onPointerUp={!PUBLISHED ? onPointerUp : undefined}
@@ -400,25 +472,12 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
         </button>,
       )
     }
-    if (open) boards.forEach((b, i) => rows.push(boardRow(b, f, i, i === boards.length - 1)))
+    if (open) rows.push(...listRows(it.items, f, depth + 1))
     return rows
   }
 
-  // a new folder being named is drawn at its future slot, its board (if any) already inside;
-  // that board leaves its usual row for the duration
-  const draft = naming?.kind === 'new' ? (naming.board && !boardsIn(tree).includes(naming.board) ? { ...naming, board: undefined } : naming) : null   // a board deleted mid-naming leaves the draft
-  const rows: ReactNode[] = []
-  const draftRows = draft ? [
-    <div key="f:new" className="it folder editing"><FolderOpenIcon size={14} />{input('', 'Folder name')}</div>,
-    ...(draft.board ? [<div key="new/board" className={`it board in-folder draft${draft.board === board ? ' cur' : ''}`}><CardsIcon size={14} /><span>{label(draft.board)}</span></div>] : []),
-  ] : []
-  tree.forEach((it, i) => {
-    if (draft && draft.index === i) rows.push(...draftRows)
-    if (it.kind === 'board') { if (draft?.board !== it.name) rows.push(boardRow(it.name, null, i, false)) }
-    else rows.push(...folderRow(it, draft?.board ? it.boards.filter((b) => b !== draft.board) : it.boards, i))
-  })
-  if (draft && draft.index >= tree.length) rows.push(...draftRows)
-  if (HAS_ALL_SCENES) rows.push(boardRow('all-scenes', null, -1, false))   // a published bundle without it shows none
+  const rows: ReactNode[] = listRows(tree, null, 0)
+  if (HAS_ALL_SCENES) rows.push(boardRow('all-scenes', null, 0))   // a published bundle without it shows none
   return (
     <div className="sh-boards" ref={rootRef} onContextMenu={(e: ReactMouseEvent) => blankMenu(e)}>
       <div className="hd">

package/src/client/shell/Comments.tsx

@@ -7,7 +7,7 @@
 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'
+import { CONFIG, useStore, type Node } from './store.ts'
 import { threadHostKey } from './keys.ts'
 import { isNoteAnchor, resolveNoteAnchor, useNotes } from './notes.ts'
 import { canvasCtl } from './canvas/ctl.ts'
@@ -15,7 +15,7 @@ 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 { mentionAlerts, mentionPeople, mentionQueryAt, parseBody, type MentionPerson } from './mentions.ts'
-import { ROUTE } from '../const.ts'
+import { ROUTE, slideSize, stageFit } from '../const.ts'
 import type { AgentMeta, Thread } from '../../shared/events.ts'
 
 /** Tint the pin / composer / thread card EDGES (border, outline, focus ring) in the anchored
@@ -132,6 +132,13 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
   const selected = useStore((s) => s.selection.includes(node.key))
   const { setActive } = useComments.getState()
   const [rects, setRects] = useState<Record<string, { x: number; y: number; w: number; h: number } | null>>({})
+  // a slide renders at its stage and the node scales it (FrameNode): rects the frame reports are
+  // in stage px, so they map through the same fit into the node's coordinates
+  const frameEntry = useStore((s) => s.frameFor(node))
+  const stage = frameEntry ? slideSize(frameEntry, CONFIG.viewports) : null
+  const fit = stage ? stageFit(stage, { w: node.w, h: node.h }) : null
+  const inNode = <R extends { x: number; y: number; w: number; h: number }>(r: R): R =>
+    fit ? { ...r, x: fit.ox + r.x * fit.k, y: fit.oy + r.y * fit.k, w: r.w * fit.k, h: r.h * fit.k } : r
 
   const open = threads.filter((t) => !t.resolved)
   const anchored = open.filter((t) => (t.anchor as any)?.el)
@@ -249,7 +256,8 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
 
   const pinPos = (t: Thread) => {
     const a = t.anchor as any
-    const r = isNoteAnchor(a) ? noteRects[t.id] : rects[t.id]
+    const fr = rects[t.id]
+    const r = isNoteAnchor(a) ? noteRects[t.id] : fr && inNode(fr)
     if (a?.el && r) return { x: r.x + (a.pos?.fx ?? 0.5) * r.w, y: r.y + (a.pos?.fy ?? 0.5) * r.h, orphan: false }
     if (a?.el && r === null) return { x: node.w - 16, y: 16, orphan: true }         // orphan parks top-right
     const p = a?.pos                                                                // frame-level: stored fraction of the frame
@@ -310,7 +318,7 @@ export function CommentLayer({ node, frameId, iframe }: { node: Node; frameId: s
       )}
       {draft?.nodeKey === node.key && (() => {
         const a = draft.anchor as any
-        const r = (draftOnNote && noteRects.draft) || a?.rect
+        const r = (draftOnNote && noteRects.draft) || (a?.rect && inNode(a.rect))
         return <DraftComposer at={{ x: (r?.x ?? 0) + (a?.pos?.fx ?? 0.5) * (r?.w ?? 0), y: (r?.y ?? 0) + (a?.pos?.fy ?? 0.5) * (r?.h ?? 0) }} bounds={{ w: node.w, h: node.h }} hue={anchorHue(draft.anchor)} />
       })()}
     </>

package/src/client/shell/Play.tsx

@@ -15,7 +15,7 @@ import { useStore, BOARD_POLICY, BRANDING, CONFIG, PUBLISHED, SOURCE_REVEALED, b
 import { deckOrder } from './play-order.ts'
 import { useComments } from './comments-store.ts'
 import { isNoteAnchor } from './notes.ts'
-import { ROUTE } from '../const.ts'
+import { ROUTE, slideSize } from '../const.ts'
 import { poweredByUrl } from '../../shared/utm.ts'
 import { canvasCtl } from './canvas/ctl.ts'
 import { Tip } from './Tip.tsx'
@@ -70,9 +70,9 @@ export function enterSlides(over?: { at?: string; device?: string; theme?: strin
   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'
+  // a slide is a fixed stage: the deck shows it fit to the window ('slide') or edge to edge
+  // ('fill'); a viewport a restored link carries is not a slide view, so it lands on the stage
+  const device = over?.device === 'fill' ? 'fill' : 'slide'
   s.setPlay({ at, device, theme, slides: true })
 }
 
@@ -358,7 +358,11 @@ function PlayInner() {
 
   const setDevice = (name: string) => {
     const p = useStore.getState().play
-    if (p && (CONFIG.viewports[name] || name === 'fill' || (name === 'slide' && p.slides))) useStore.getState().setPlay({ ...p, device: name })
+    if (!p) return
+    // slides: the stage fit to the window or edge to edge - a viewport preset has no meaning
+    // for a fixed stage, so it lands on the slide view
+    if (p.slides) { useStore.getState().setPlay({ ...p, device: name === 'fill' ? 'fill' : 'slide' }); return }
+    if (CONFIG.viewports[name] || name === 'fill') useStore.getState().setPlay({ ...p, device: name })
   }
   const setTheme = (t: string) => {
     const p = useStore.getState().play
@@ -556,26 +560,34 @@ 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 }
+  const frameEntry = useStore.getState().manifest?.frames.find((f) => f.id === play.at)
+  // a slide - in slides mode, or a slide frame met in present or focus - is a fixed stage:
+  // the iframe is always its own stage (its declared viewport, else 1280×720), scaled to the
+  // window UP as well as down, so a projector shows it at full size and the frame never scales
+  // itself. 'fill' fits it edge to edge; otherwise it leaves room for the chrome. A slide never
+  // reflows - a device preset has nothing to change on a fixed stage.
+  const stage = (frameEntry && slideSize(frameEntry, CONFIG.viewports)) ?? (slides ? SLIDE_INTRINSIC : null)
+  const vp = stage ? { width: stage.width, height: stage.height }
+    : docPreset ? { width: Math.min(win.w, 860), height: win.h }
     : fill ? { width: win.w, height: win.h }
-    : 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)
+    : CONFIG.viewports[play.device] ?? Object.values(CONFIG.viewports)[0]
+  const scale = stage ? Math.max(0.05, fill ? Math.min(win.w / vp.width, win.h / vp.height)
+      : slides ? Math.min((win.w - 48) / vp.width, (win.h - (deckChrome === 'none' ? 48 : 88)) / vp.height)
+      : Math.min((win.w - 96) / vp.width, (win.h - 128) / vp.height))
+    : docPreset || fill ? 1
     : Math.min(1, (win.w - 96) / vp.width, (win.h - 128) / vp.height)
   const names = Object.keys(CONFIG.viewports)
   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)
   const title = focus ? (frameEntry?.title ?? (play.at.split('/').pop() ?? play.at).replace(/-/g, ' ')) : boardLabel(board)
 
   // whole-pixel wrapper + per-axis scale so the iframe lands exactly on its edges -
   // fractional sizes left subpixel seams glowing at the corners on dark frames
   const dw = Math.round(vp.width * scale)
   const dh = Math.round(vp.height * scale)
-  const deviceHint = fill ? 'Fill window' : `${vp.width} × ${vp.height} · keys 1-${names.length + 1}`
+  const deviceHint = stage ? `${vp.width} × ${vp.height} stage · ${fill ? 'edge to edge' : 'fit to the window'}`
+    : fill ? 'Fill window' : `${vp.width} × ${vp.height} · keys 1-${names.length + 1}`
 
   return (
     <div className={`sh-play${fill || docPreset ? ' fill' : ''}${docPreset ? ` doc t-${play.theme}` : ''}`}>
@@ -650,7 +662,7 @@ function PlayInner() {
         {!trimmed && <>
           <LaserButton />
           <i className="sep" />
-          {!docPreset && <DevicePicker value={fill ? 'fill' : play.device} onSelect={(n) => n && setDevice(n)} includeFill includeSlide={slides} hint={deviceHint} dark />}
+          {!docPreset && <DevicePicker value={fill ? 'fill' : play.device} onSelect={(n) => n && setDevice(n)} includeFill includeSlide={slides} stageOnly={slides} hint={deviceHint} dark />}
           <ThemePicker value={play.theme} onSelect={setTheme} hint="D" dark />
         </>}
         {playUpdateRevision && <>

package/src/client/shell/Toolbar.tsx

@@ -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, includeSlide, hint, dark }: {
+export function DevicePicker({ value, onSelect, includeDefault, includeFill, includeSlide, stageOnly, 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 */
+  /** slides mode: the slide's own stage, fit to the window, as a first-class device */
   includeSlide?: boolean
+  /** slides mode: a slide is a fixed stage - only the stage views (slide, fill), no viewports */
+  stageOnly?: boolean
   hint?: ReactNode
   dark?: boolean
 }) {
   const pop = usePopover()
-  const entries = Object.entries(CONFIG.viewports)
+  const entries = stageOnly ? [] : Object.entries(CONFIG.viewports)
   const pick = (name: string | null) => { onSelect(name); pop.setOpen(false) }
   const triggerIcon = value === 'fill' ? <FrameCornersIcon size={16} /> : value === 'slide' ? <SlideFrameIcon size={16} /> : deviceIcon(value, 16)
   return (
@@ -177,7 +179,7 @@ export function DevicePicker({ value, onSelect, includeDefault, includeFill, inc
       </Tip>
       <Popover pop={pop} dark={dark}>
         {includeSlide && <>
-          <button onClick={() => pick('slide')} title="1280 × 720">
+          <button onClick={() => pick('slide')} title="the slide's own size, fit to the window">
             <SlideFrameIcon size={15} /><span>Slide</span>
             {value === 'slide' && <CheckIcon size={13} className="chk" />}
           </button>
@@ -197,7 +199,7 @@ export function DevicePicker({ value, onSelect, includeDefault, includeFill, inc
           </button>
         ))}
         {includeFill && <button onClick={() => pick('fill')}>
-          <FrameCornersIcon size={15} /><span>Fill window</span><kbd>{entries.length + 1}</kbd>
+          <FrameCornersIcon size={15} /><span>Fill window</span><kbd>{Object.keys(CONFIG.viewports).length + 1}</kbd>
           {value === 'fill' && <CheckIcon size={13} className="chk" />}
         </button>}
       </Popover>

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

@@ -11,10 +11,21 @@ import { sleep, wake } from './sleep.ts'
 import { canAutoReload, shouldArmReadyWatch } from './ready-watch.ts'
 import { Stickies, type NoteSpec } from './Sticky.tsx'
 import { noteId, sceneNoteHost } from '../notes.ts'
+import { slideSize, stageFit } from '../../const.ts'
 
 export const HEADER = 28
 const SNAP = 12
 
+/** The iframe's box in its node: a frame fills the node; a slide renders at its stage and is
+ *  scaled uniformly into the node and centred - resizing a slide node never reflows it. The
+ *  identity case carries no transform (no layer, no containing block). */
+function iframeBox(stage: { width: number; height: number } | null, node: { w: number; h: number }) {
+  if (!stage) return { width: node.w, height: node.h }
+  const { k, ox, oy } = stageFit(stage, node)
+  const identity = Math.abs(k - 1) < 1e-6 && Math.abs(ox) < 0.5 && Math.abs(oy) < 0.5
+  return { width: stage.width, height: stage.height, ...(identity ? {} : { transform: `translate(${ox}px, ${oy}px) scale(${k})`, transformOrigin: '0 0' }) }
+}
+
 /** Live Jam working shimmer: a slim 2x6 strip of tiny marver marks on the frame's left
  *  flank, top-aligned - each mark twinkles on its own scattered beat, phased per frame by
  *  --mv-w0 (set on the node) so parallel frames never pulse in sync. */
@@ -172,7 +183,10 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
   const resizing = useRef(false)
   const [resizeTick, setResizeTick] = useState(0)
   useEffect(() => { dirty.current = false }, [node.nav])   // a fresh document is pristine again
-  const w = Math.round(node.w), h = Math.round(node.h)
+  // a slide's document is its stage, whatever the node's size (the node only scales it): the
+  // sleep key - the size the compiler renders to certify textures - is the document's size
+  const stage = frame ? slideSize(frame, CONFIG.viewports) : null
+  const w = Math.round(stage?.width ?? node.w), h = Math.round(stage?.height ?? node.h)
   // a layout effect: the wake lands BEFORE the first paint of the new state (a stretched texture
   // must never be painted at a new size)
   useLayoutEffect(() => {
@@ -418,7 +432,7 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
           src={src}
           title={frame.id}
           onLoad={registerWin}
-          style={{ width: node.w, height: node.h, display: node.missing || node.status === 'error' ? 'none' : 'block' }}
+          style={{ ...iframeBox(stage, node), display: node.missing || node.status === 'error' ? 'none' : 'block' }}
         />
         {/* the overlay eats mouse events for drag-by-body; laser and comment mode both
             need the mouse INSIDE the frame for hover highlights, so it steps aside

package/src/client/shell/store.ts

@@ -138,15 +138,15 @@ export const modeAllowed = (board: string, mode: 'present' | 'focus' | 'slides')
 export { cap, humanize } from './labels.ts'
 import { cap, humanize } from './labels.ts'
 import { canAutoReload } from './canvas/ready-watch.ts'
-import { buildTree, flatten, labelOf, toWire, type TreeItem } from '../../shared/board-tree.ts'
+import { buildTree, flatten, labelOf, toWire, TREE_PROTOCOL, type TreeItem } from '../../shared/board-tree.ts'
 
 /** The CAS tokens a tree write echoes: the sha256 of every board file as last seen, and of
  *  the folder registry (null = there was no file). */
 export interface TreeBase { boards: Record<string, string>; folders: string | null }
 export interface TreeSnapshot { tree: TreeItem[]; base: TreeBase; titles: Record<string, string> }
 
-/** The sidebar tree: root boards and folders in rank order, each folder's boards inside
- *  (shared/board-tree.ts), plus the hashes it was built from. `all-scenes` is not in it - it
+/** The sidebar tree: root boards and folders in rank order, each folder's boards and
+ *  sub-folders inside (shared/board-tree.ts), plus the hashes it was built from. `all-scenes` is not in it - it
  *  is pinned last by the callers. Throws on transport failure and on a malformed registry
  *  (the server's 422 message) - callers keep their last known tree. */
 export async function fetchBoardTree(): Promise<TreeSnapshot> {
@@ -154,7 +154,7 @@ export async function fetchBoardTree(): Promise<TreeSnapshot> {
   const [boards, reg] = await Promise.all([
     fetch(`${ROUTE}/api/boards`).then((r) => r.json()) as Promise<{ name: string; sha256: string; order?: number; folder?: string; title?: string }[]>,
     fetch(`${ROUTE}/api/folders`).then(async (r) => {
-      const j = await r.json() as { folders?: { name: string; order?: number; title?: string }[]; sha256?: string | null; error?: string }
+      const j = await r.json() as { folders?: { name: string; order?: number; parent?: string; title?: string }[]; sha256?: string | null; error?: string }
       if (!r.ok) throw new Error(j?.error ?? `folders ${r.status}`)
       return j
     }),
@@ -257,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.
@@ -795,7 +795,7 @@ export const useStore = create<State>((set, get) => {
           const active = get().board
           const boards = { ...base.boards, ...(get().boardHash && base.boards[active] !== undefined ? { [active]: get().boardHash } : {}) }
           let res: Response
-          try { res = await postOwner('boards/reorder', { tree: toWire(tree), base: { boards, folders: base.folders } }) }
+          try { res = await postOwner('boards/reorder', { tree: toWire(tree), base: { boards, folders: base.folders }, protocol: TREE_PROTOCOL }) }
           catch { return { ok: false as const, stale: false, error: 'could not reach the dev server' } }
           const body = await res.json().catch(() => ({} as { error?: string; sha256?: { boards?: Record<string, string> } }))
           if (!res.ok) return { ok: false as const, stale: res.status === 409, error: body?.error }

package/src/client/shell/styles.css

@@ -484,7 +484,7 @@ body.sh-space .sh-node { pointer-events: none }                   /* space-drag
    #0088ff - never the interact-mode purple that --glass-accent shifts to. */
 .sh-panel .it.board.drop-before, .sh-panel .it.board.drop-after { position: relative }
 .sh-panel .it.board.drop-before::after, .sh-panel .it.board.drop-after::after {
-  content: ''; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 3px;
+  content: ''; position: absolute; left: var(--seam-left, 6px); right: 6px; height: 3px; border-radius: 3px;
   background: #0088ff; pointer-events: none }
 .sh-panel .it.board.drop-before::after { top: -1px }
 .sh-panel .it.board.drop-after::after { bottom: -1px }
@@ -493,28 +493,29 @@ body.sh-space .sh-node { pointer-events: none }                   /* space-drag
 .sh-panel .it.editing input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none;
   color: var(--glass-ink); font: inherit }
 .sh-panel .it.editing input::placeholder { color: var(--glass-ink-3) }
-/* folders: one level, same row grammar as boards (idle icon tertiary, count tertiary). A folder
+/* folders: two levels, same row grammar as boards (idle icon tertiary, count tertiary). A folder
    holding the current board wears the ancestor wash so the active board's home survives a
-   collapse; its boards indent one step. Folder rows share the board seam rules; dropping INTO a
+   collapse; what it holds indents one step - a sub-folder's header one step, its boards two. Folder rows share the board seam rules; dropping INTO a
    folder lights the whole row (wash + brand-blue ring) instead of a seam. */
 .sh-panel .it.folder svg { color: var(--glass-ink-3); flex: none; margin: 0 1px; transition: color .2s ease }
 .sh-panel .it.folder[data-reorderable]:active { cursor: grabbing }
 .sh-panel .it.folder.dragging { opacity: .4 }
 .sh-panel .it.folder.drop-before, .sh-panel .it.folder.drop-after { position: relative }
 .sh-panel .it.folder.drop-before::after, .sh-panel .it.folder.drop-after::after {
-  content: ''; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 3px;
+  content: ''; position: absolute; left: var(--seam-left, 6px); right: 6px; height: 3px; border-radius: 3px;
   background: #0088ff; pointer-events: none }
 .sh-panel .it.folder.drop-before::after { top: -1px }
 .sh-panel .it.folder.drop-after::after { bottom: -1px }
 .sh-panel .it.folder.drop-into { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px #0088ff }
 .sh-panel .it.folder.drop-into svg { color: #0088ff }
-.sh-panel .it.board.in-folder { padding-left: 28px }
+.sh-panel .it.board.in-folder, .sh-panel .it.folder.in-folder { padding-left: 28px }
+.sh-panel .it.board.in-sub { padding-left: 56px }
 .sh-panel .it.board.draft { cursor: default; opacity: .6 }
-/* seams inside a folder are indented with its rows, so "inside" and "at the root" never draw alike;
-   an open EMPTY folder draws that indented seam under its own header (drop-in) */
-.sh-panel .it.board.in-folder.drop-before::after, .sh-panel .it.board.in-folder.drop-after::after { left: 28px }
+/* seams are indented with the list they land in (--seam-left, set on the row that draws them),
+   so "inside", "inside the sub-folder" and "at the root" never draw alike; an open EMPTY folder
+   draws that indented seam under its own header (drop-in) */
 .sh-panel .it.folder.drop-in { position: relative }
-.sh-panel .it.folder.drop-in::after { content: ''; position: absolute; left: 28px; right: 6px; bottom: -1px; height: 3px; border-radius: 3px;
+.sh-panel .it.folder.drop-in::after { content: ''; position: absolute; left: var(--seam-left, 28px); right: 6px; bottom: -1px; height: 3px; border-radius: 3px;
   background: #0088ff; pointer-events: none }
 /* the Boards header carries a quiet folder-plus: tertiary, shows on hover of the header row */
 .sh-panel .sh-boards .hd { display: flex; align-items: center; margin-right: 6px }