Present mode, the directory pattern, and stage media that fills the canvas

Presenting is the point of a slideshow, so it stops waiting for a phase:
`p` or the Present button runs the deck as a fullscreen 16:9 show — exactly
what a Zoom or Meet screen-share needs. The deck is promoted to the top
layer (popover API + native fullscreen on the wrapper), which is what
actually escapes the plan card's glass backdrop-filter: a merely-fixed
overlay would be trapped at the card's size and stacking level. Arrows,
space, page keys, Backspace, Home/End, and clicks navigate; Escape or
leaving fullscreen ends the show; #present-N in the URL resumes; a
collaborator's edit landing mid-show swaps the deck under the presenter
without ending it (the wrapper sits outside the live-update swap target,
and a childList observer re-applies the show to the fresh deck). The
toolbar lives outside the text-selection content target so its label never
enters the comment-anchor text model, and the show tears down on
turbo:before-cache so a cached snapshot can't restore a closed-popover
(display: none) deck.

The directory pattern: one list of at least fifteen short entries is an
inventory, not an argument — it flows into two balanced columns and bills
at half for the type scale, so forty projects land two columns at a
readable step instead of one column running off the canvas. Comment-only
blocks inside an entry don't break its shape (comments never influence
layout — an adversarial-review catch, pinned as a conformance fixture).

Stage slides give the visual the whole canvas: thinner padding, taller
media, and mermaid's inline natural-size max-width overridden so small
diagrams scale up instead of rendering as thumbnails.

RENDER_CACHE_VERSION 11 (new pattern class changes cached deck HTML).
Spec now carries 31 conformance fixtures; suite green; presenter flow
verified live against the real glass-card ancestor chain.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: HamptonMakes

docs/SLIDE_SPEC.md

@@ -78,7 +78,7 @@ blocks. Classify the same string the renderer renders — in CoPlan that
 includes the hoisted definition preamble, so reference-style images
 (`![chart][q3]`) resolve to image nodes here exactly as they do on screen.
 
-Four derived terms:
+Five derived terms:
 
 - **lead heading** — the first block of the content sequence, if it is a
   heading (any level). The **body** is the sequence minus the lead heading.
@@ -96,6 +96,12 @@ Four derived terms:
   whitespace and comments, or a code block whose info string's **first
   word** is `mermaid` (the rest of the info string is renderer options,
   which is also how the rendered `lang` attribute treats it).
+- **short entry** — a list item holding exactly one paragraph, with no
+  images and no hard line breaks, whose plain text is at most 60
+  characters: one rendered line, an inventory row. An item carrying more
+  structure than that — a nested list, a second paragraph, a long line —
+  is an argument, not an entry. Comment-only HTML blocks inside the item
+  don't count as structure (comments never influence layout).
 
 ## The pattern catalog
 
@@ -111,15 +117,16 @@ body (the sequence after the lead heading, which any pattern may carry).
 | 5 | one blockquote ± one adjacent short paragraph | `quote` |
 | 6 | one table ± one adjacent short paragraph | `table` |
 | 7 | exactly two lists | `columns` |
-| 8 | exactly one media block, first or last, plus anything else | `split` |
-| 9 | anything else (including an empty sequence) | `content` |
+| 8 | one list of at least 15 short entries | `directory` |
+| 9 | exactly one media block, first or last, plus anything else | `split` |
+| 10 | anything else (including an empty sequence) | `content` |
 
 "± one adjacent short paragraph" means the body is either the block alone,
 or the block plus one short paragraph immediately before or after it —
 a kicker line or a caption. Anything more is a `content` or `split` slide.
 
 Rule 3 sits above rule 4, so a `mermaid` fence is always media, never code.
-Rule 8 requires at least one non-media block, so a lone image lands on
+Rule 9 requires at least one non-media block, so a lone image lands on
 `stage`, and requires exactly one media block, so two images fall through to
 `content` rather than guessing which one gets the pane.
 
@@ -334,6 +341,122 @@ And a closing thought that keeps this a document section.
 pattern: content
 ```
 
+### `directory` — one long inventory flows into two columns
+
+One list of at least fifteen short entries and nothing else. That shape is
+an inventory — every project in flight, the full roster, an API surface —
+not an argument, and a single column of it runs off the canvas while half
+the slide sits empty. The list flows into two balanced columns; an ordered
+list keeps counting down the first column and into the second.
+
+Because the list renders in two columns it also bills at half for the
+type scale (see below) — the pattern doesn't just fit the inventory, it
+keeps the type readable while doing it:
+
+```conformance
+## Every project in flight
+
+- Atlas — payment routing
+- Beacon — status page
+- Cedar — ledger exports
+- Delta — dispute intake
+- Ember — fraud scoring
+- Flint — invoice search
+- Grove — seller onboarding
+- Harbor — webhook retries
+- Iris — receipt redesign
+- Juniper — tax engine
+- Keel — capacity planning
+- Lumen — audit trails
+- Maple — payout scheduling
+- Nectar — feedback tagging
+- Onyx — rate limiting
+- Pine — sandbox reset
+.
+pattern: directory
+step: 2
+```
+
+Fourteen entries is a long content slide, not a directory — below the
+threshold the list stays one column and bills in full:
+
+```conformance
+## Every project in flight
+
+- Atlas — payment routing
+- Beacon — status page
+- Cedar — ledger exports
+- Delta — dispute intake
+- Ember — fraud scoring
+- Flint — invoice search
+- Grove — seller onboarding
+- Harbor — webhook retries
+- Iris — receipt redesign
+- Juniper — tax engine
+- Keel — capacity planning
+- Lumen — audit trails
+- Maple — payout scheduling
+- Nectar — feedback tagging
+.
+pattern: content
+step: 4
+```
+
+A speaker note tucked inside an entry is still a comment — it neither
+breaks the entry's shape nor bills:
+
+```conformance
+## Every project in flight
+
+- Atlas — payment routing
+- Beacon — status page
+- Cedar — ledger exports
+- Delta — dispute intake
+
+  <!-- double-check the owner with Maya -->
+
+- Ember — fraud scoring
+- Flint — invoice search
+- Grove — seller onboarding
+- Harbor — webhook retries
+- Iris — receipt redesign
+- Juniper — tax engine
+- Keel — capacity planning
+- Lumen — audit trails
+- Maple — payout scheduling
+- Nectar — feedback tagging
+- Onyx — rate limiting
+.
+pattern: directory
+step: 2
+```
+
+Every item must be a short entry. One entry carrying real prose means the
+list is an argument, and arguments read top to bottom:
+
+```conformance
+## Every project in flight
+
+- Atlas — payment routing
+- Beacon — status page
+- Cedar — ledger exports
+- Delta — dispute intake
+- Ember — fraud scoring
+- Flint — invoice search
+- Grove — seller onboarding
+- Harbor — webhook retries
+- Iris — receipt redesign
+- Juniper — tax engine
+- Keel — capacity planning
+- Lumen — audit trails
+- Maple — payout scheduling
+- Nectar — feedback tagging
+- Meridian — the cross-region failover rehearsal program we keep deferring
+.
+pattern: content
+step: 4
+```
+
 ### `split` — media pane beside content
 
 Exactly one media block at the body's edge, with real content beside it.
@@ -419,7 +542,9 @@ code renders at 0.8 em with 1.55 line-height — about ⅚ of a body line per
 code line, not half of one. A mermaid fence renders as a fit-to-box
 diagram, so it bills like media, not like its source line count.
 
-The slide's units are the sum over its content sequence. The step:
+The slide's units are the sum over its content sequence, with one
+pattern-aware adjustment: a `directory` slide's list renders across two
+columns, so it bills at ⌈its units / 2⌉. The step:
 
 | Units | Step |
 |---|---|

engine/app/assets/stylesheets/coplan/application.css

@@ -2956,6 +2956,43 @@ img.avatar {
   display: block;
 }
 
+/* The Present control above a slideshow's deck. The show itself is
+   deck.css territory (.deck--presenting); this is host chrome. */
+.deck-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: var(--space-sm);
+}
+
+.deck-toolbar__present {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: var(--space-xs) var(--space-sm);
+  cursor: pointer;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  transition: color 0.15s, box-shadow 0.15s;
+}
+
+.deck-toolbar__present:hover {
+  color: var(--color-text);
+  box-shadow: var(--shadow-pop);
+}
+
+.deck-toolbar__present kbd {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  padding: 0 4px;
+  color: var(--color-text-muted);
+}
+
 /* Add scroll-margin to headings — and the plan's own masthead header — so
    they clear the sticky nav. The nav-title control scrolls to the very top
    in JS; this keeps a no-JS #plan-header jump landing below the bar too. */

engine/app/assets/stylesheets/coplan/deck.css

@@ -252,12 +252,18 @@
 
 /* ---- stage — one visual gets the whole canvas ------------------------ */
 
+.deck-slide--stage {
+  /* The visual is the slide; the frame is a thin margin, not a stage
+     apron. */
+  padding: 2.5cqi 3.5cqi;
+}
+
 .deck-slide--stage .deck-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: 0.9em;
+  gap: 0.7em;
 }
 
 .deck-slide--stage .deck-content > h1,
@@ -277,7 +283,21 @@
 }
 
 .deck-slide--stage .deck-content img {
-  max-height: 36cqi;
+  max-height: 44cqi;
+}
+
+/* Mermaid inlines a natural-size max-width on its SVGs, which pins a
+   small diagram at thumbnail size; the stage overrides it so the diagram
+   scales up to the canvas (preserveAspectRatio keeps it undistorted). */
+.deck-slide--stage .deck-content .mermaid-diagram {
+  width: 100%;
+}
+
+.deck-slide--stage .deck-content .mermaid-diagram svg {
+  width: 100%;
+  height: 44cqi;
+  max-width: none !important;
+  max-height: none;
 }
 
 .deck-slide--stage .deck-content > p:not(:has(img)) {
@@ -384,6 +404,23 @@
   margin: 0;
 }
 
+/* ---- directory — one long inventory flows into two columns ------------
+   The list is the slide's only body block, so CSS multi-column balances
+   it; an ordered list keeps continuous numbering down-then-across. */
+
+.deck-slide--directory .deck-content > ul,
+.deck-slide--directory .deck-content > ol {
+  columns: 2;
+  column-gap: 2.6em;
+  margin: 0;
+}
+
+.deck-slide--directory .deck-content li {
+  break-inside: avoid;
+  margin-bottom: 0.3em;
+  line-height: 1.4;
+}
+
 /* ---- split — media pane beside content --------------------------------
    DOM order is source order (media leading → left pane, trailing → right),
    so grid auto-placement does the layout with zero reordering. Guarded on
@@ -413,3 +450,60 @@
   max-height: 40cqi;
   object-fit: contain;
 }
+
+/* ---- presenting — the deck takes the screen ---------------------------
+   Present mode (coplan--deck-presenter) shows the deck as a top-layer
+   popover sized to the largest 16:9 canvas that fits the viewport — the
+   deck stays the size container, so every cqi measurement above scales to
+   the screen with no presentation-specific typography. Top layer matters:
+   fixed positioning alone resolves against any backdrop-filter ancestor
+   (the host's glass card), while top-layer elements always position
+   against the viewport. The spread shadow blacks out the letterbox bars
+   without extra DOM; ::backdrop does the same when the top layer is in
+   charge. The border/padding/overflow resets neutralize the UA's popover
+   styles. */
+
+.deck--presenting {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  /* For the no-popover-API fallback: above every piece of app chrome
+     (the host tops out around 300). Irrelevant in the top layer. */
+  z-index: 1000;
+  width: min(100vw, calc(100vh * 16 / 9));
+  height: min(100vh, calc(100vw * 9 / 16));
+  gap: 0;
+  border: none;
+  padding: 0;
+  overflow: hidden;
+  background: #000;
+  box-shadow: 0 0 0 100vmax #000;
+}
+
+.deck--presenting::backdrop {
+  background: #000;
+}
+
+/* Fullscreen is requested on the presenter wrapper (it survives
+   live-update swaps of the deck inside it); paint it black so nothing of
+   the page shows around the canvas. */
+.deck-presenter:fullscreen {
+  background: #000;
+}
+
+.deck--presenting .deck-slide {
+  display: none;
+}
+
+.deck--presenting .deck-slide--current {
+  display: flex;
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  overscroll-behavior: contain;
+}
+
+.deck--presenting .deck-slide--current::after {
+  content: attr(data-slide) " / " attr(data-slide-total);
+}

engine/app/helpers/coplan/markdown_helper.rb

@@ -34,7 +34,7 @@ module MarkdownHelper
     # version. Bump it whenever the rendering pipeline changes output for the
     # same input (new tags, attribute changes, checkbox wiring, etc.), or
     # stale HTML will be served from cache.
-    RENDER_CACHE_VERSION = 10
+    RENDER_CACHE_VERSION = 11
 
     # Matches `[@username](mention:username)` where the bracket text and link
     # target encode the same username. Username allows letters, digits, dots,