fb-slides 0.5.0 → 0.6.2

package/runtime/theme.base.css

@@ -309,6 +309,18 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
   height: 100%;
   /* Full-bleed: this one is the demo, not a slide about the demo. */
   margin: 0;
+  box-sizing: border-box;
+  /* The arrows and signature live in fixed viewport space along the bottom,
+     where a full-height slide runs under them. Reserve that strip:
+     66px of viewport clears them (bottom 14px + 44px of chrome + air), minus
+     the letterbox gap the slide already has, converted to slide space through
+     reveal's own scale. On tall windows the gap alone is enough and this
+     resolves to zero. */
+  padding-bottom: max(0px, calc(
+    (66px
+      - (var(--viewport-height, 100vh) - var(--slide-height, 720px) * var(--slide-scale, 1)) / 2)
+    / var(--slide-scale, 1)
+  ));
 }
 .reveal .slides section.demo-slide header {
   display: flex;
@@ -342,6 +354,170 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
   box-shadow: 0 18px 45px rgb(0 0 0 / 0.45);
 }
 
+/* --- the slide vocabulary ------------------------------------------------ */
+/* The classes a slide's Markdown can reach for, so the common layouts are a
+   word rather than a paragraph of inline styles. Every one of them is layout
+   only — no content, no colours of its own — and every number it fixes is a
+   token, so a project retunes it from its own theme.css instead of copying
+   this CSS. The edit drawer's `+` inserts the markup for each (snippets.js). */
+
+/* Images and clips are centred, and lose the white card reveal's core CSS
+   gives every image: a screenshot on a dark slide wants no frame around it. */
+.reveal .slides section img {
+  display: block;
+  max-width: 100%;
+  margin: 0.4em auto;
+  background: none;
+  border: 0;
+  border-radius: 10px;
+}
+.reveal .slides section video {
+  display: block;
+  max-width: 100%;
+  margin: 0.4em auto;
+  border-radius: 10px;
+}
+
+/* Two columns. `min-width: 0` on the children is the whole point: a flex item
+   is min-content wide by default, and a <pre> refuses to shrink — one code
+   block and the pair walks off the slide. */
+.reveal .slides .cols {
+  display: flex;
+  gap: var(--cols-gap, 2rem);
+  align-items: var(--cols-align, flex-start);
+}
+/* Any direct child is a column; `style="flex: 1.4"` on one still tips the
+   balance, because the shorthand here sets the same property it does. */
+.reveal .slides .cols > * { flex: 1 1 0; min-width: 0; }
+
+/* An embedded page that is not the whole slide. The height is in px, not vh:
+   the slide is a fixed 1280x720 box reveal scales as a whole, so a viewport
+   unit here would size against the window instead of against the slide. */
+.reveal .slides .frame { display: flex; justify-content: center; }
+.reveal .slides .frame iframe {
+  width: var(--frame-w, min(860px, 100%));
+  height: var(--frame-h, 500px);
+  border: 0;
+  border-radius: 10px;
+  /* Most embeds assume a white page under them and draw nothing of their own. */
+  background: var(--frame-bg, #fff);
+  box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
+}
+
+/* A line under a figure, or an aside that should not carry the same weight as
+   the sentence above it. */
+.reveal .slides .caption {
+  margin: 0.4em 0 0;
+  font-size: 0.8em;
+  line-height: 1.5;
+  color: var(--muted);
+}
+
+/* A bordered block: the point a slide keeps coming back to. */
+.reveal .slides .box {
+  padding: 0.7em 1.05em;
+  border: 1px solid var(--box-line, var(--line));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--card) 55%, transparent);
+}
+.reveal .slides .box > :last-child { margin-bottom: 0; }
+
+/* --- the author slide ---------------------------------------------------- */
+/* `<!-- .slide: class="author-slide" -->` turns a slide into the speaker page:
+   photos filling the left edge to edge, the bio centred on the right. Who you
+   are stays in the Markdown — this only lays it out. */
+
+.reveal .slides section.author-slide {
+  /* Reveal keeps a safe band around the 1280x720 slide box (`margin: 0.055`).
+     The photo bleeds through it with negative margins — `.reveal` is
+     `overflow: hidden`, so whatever spills past the viewport is clipped.
+     Sized with slack for 16:9 up to ~2:1 screens; overshooting only costs a
+     slightly tighter crop, never a visible seam. */
+  --author-bleed-y: 130px;
+  --author-bleed-x: 150px;
+  --author-photo: 40%;
+  --author-gap: 3rem;
+  /* Carousel timing: how long a photo holds, and how long the cross-fade is.
+     deck.js reads both to write the keyframes for this many photos. */
+  --author-hold: 3.5s;
+  --author-fade: 1.2s;
+  --author-slot: calc(var(--author-hold) + var(--author-fade));
+  /* One knob for the whole slide: every size below is in `em`, so bumping this
+     scales the title, the bullets and the muted lines together. */
+  font-size: 1.25em;
+
+  display: flex !important;
+  flex-direction: row;
+  align-items: stretch;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  gap: var(--author-gap);
+}
+
+.reveal .slides section.author-slide .author-photo {
+  flex: 0 0 calc(var(--author-photo) + var(--author-bleed-x));
+  margin: calc(var(--author-bleed-y) * -1) 0 calc(var(--author-bleed-y) * -1)
+    calc(var(--author-bleed-x) * -1);
+  position: relative;
+  overflow: hidden;
+}
+
+/* The photos stack on top of each other and cross-fade in DOM order: each one
+   starts a slot after the one before, and its fade-in lands exactly on that
+   one's fade-out. `--i` and the keyframes come from deck.js, which knows how
+   many there are; the first photo is visible from the start, so a single one —
+   or a deck where that script never ran — still shows a face.
+
+   `.present` is reveal's class for the slide on screen: the animation is only
+   attached while the slide is being shown, so every visit starts the sequence
+   from the first photo instead of dropping in mid-rotation. */
+.reveal .slides section.author-slide .author-photo img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: var(--author-crop, 50% 35%);
+  display: block;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  opacity: 0;
+}
+.reveal .slides section.author-slide .author-photo img:first-child { opacity: 1; }
+.reveal .slides section.present.author-slide .author-photo img {
+  animation-name: var(--author-anim, none);
+  animation-duration: calc(var(--author-n, 1) * var(--author-slot));
+  animation-delay: calc(var(--i, 0) * var(--author-slot));
+  animation-iteration-count: infinite;
+}
+
+.reveal .slides section.author-slide .author-bio {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-right: 2rem;
+  min-width: 0;
+}
+.reveal .slides section.author-slide .author-bio > :last-child { margin-bottom: 0; }
+.reveal .slides section.author-slide h1 { margin: 0 0 1.4rem; }
+.reveal .slides section.author-slide ul { margin: 0; font-size: 0.8em; line-height: 1.75; }
+/* The quiet lines under the bio — what you work with, where to find you. */
+.reveal .slides section.author-slide .author-meta {
+  margin: 1.4rem 0 0;
+  color: var(--muted);
+  font-size: 0.58em;
+  line-height: 1.7;
+}
+.reveal .slides section.author-slide .author-meta + .author-meta { margin-top: 0.7rem; }
+
+/* The corner badge names the deck a slide belongs to. The speaker page is
+   full-bleed and belongs to itself — the badge would sit on the photo. */
+.reveal:has(section.present.author-slide) + #deck-badge { display: none; }
+
 /* --- chrome -------------------------------------------------------------- */
 
 .reveal .progress { color: var(--accent); height: 3px; }
@@ -350,11 +526,10 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
 .reveal-viewport { --r-controls-spacing: 30px; }
 
 .reveal .slide-number {
-  background: color-mix(in srgb, var(--card) 80%, transparent);
-  color: var(--muted);
+  background: none;
+  color: color-mix(in srgb, var(--muted) 40%, transparent);
   font-family: var(--mono);
-  font-size: 15px;
-  border-radius: 6px;
+  font-size: 13px;
   padding: 3px 8px;
   /* Centred under the arrows: the pair spans 100px inwards from the spacing
      edge, so its middle is spacing + 50px in from the left. */
@@ -451,14 +626,17 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
   cursor: crosshair;
 }
 
-/* Faded back until it is wanted: on stage the slide is the point, and the
-   toolbar keeps to the quiet strip along the bottom, between the arrows and
-   the signature. */
+/* Hidden until it is wanted: on stage the slide is the point, so the toolbar
+   sleeps just above the top edge of the screen. Parking the mouse along that
+   edge — or arming a tool, or tabbing into it — slides it back down. */
 #deck-tools {
   position: fixed;
-  bottom: 14px;
+  top: 14px;
   left: 50%;
-  transform: translateX(-50%);
+  /* Fully clear of the viewport, with a couple of pixels to spare for the
+     border. NOT hidden with opacity: that would take the ::before arrow —
+     the only piece meant to stay visible — down with it. */
+  transform: translateX(-50%) translateY(calc(-100% - 18px));
   z-index: 40;
   display: flex;
   gap: 4px;
@@ -467,12 +645,58 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
   border: 1px solid var(--line);
   border-radius: 999px;
   backdrop-filter: blur(6px);
-  opacity: 0.4;
+  transition: transform 0.22s ease;
+}
+/* The wake strip: one invisible hover surface reaching from the very top of
+   the screen, across the chip, to a short stretch below it. While the toolbar
+   is away, its lower reach pokes into the viewport as the thing to hover; on
+   the way down it keeps the reveal alive over every pixel the mouse crosses,
+   the 14px gap above the chip included, so the bar never bounces. */
+#deck-tools::before {
+  content: '';
+  position: absolute;
+  top: -14px;
+  bottom: -26px;
+  left: -60px;
+  right: -60px;
+  cursor: pointer;
+}
+/* The hint: a chevron breathing just under the top edge while the toolbar is
+   away — the one clue that a menu lives up here. Drawn through a mask so it
+   stays crisp at any size and wears whatever the theme's muted colour is. */
+#deck-tools::after {
+  content: '';
+  position: absolute;
+  top: calc(100% + 7px);
+  left: 50%;
+  width: 20px;
+  height: 11px;
+  transform: translateX(-50%);
+  background: var(--muted);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'%3E%3Cpath d='M2 2l8 7 8-7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'%3E%3Cpath d='M2 2l8 7 8-7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  opacity: 0.8;
+  pointer-events: none;
+  animation: deck-tools-hint 2.6s ease-in-out infinite;
   transition: opacity 0.18s ease;
 }
+@keyframes deck-tools-hint {
+  0%, 100% { transform: translateX(-50%) translateY(0); }
+  50% { transform: translateX(-50%) translateY(3px); }
+}
 #deck-tools:hover,
 #deck-tools:focus-within,
-#deck-tools.is-armed { opacity: 1; }
+#deck-tools.is-armed {
+  transform: translateX(-50%) translateY(0);
+}
+/* Once the toolbar is out, the chevron has done its job — the strip stays as
+   a silent hover target. */
+#deck-tools:hover::before,
+#deck-tools:focus-within::before,
+#deck-tools.is-armed::before { cursor: default; }
+#deck-tools:hover::after,
+#deck-tools:focus-within::after,
+#deck-tools.is-armed::after { opacity: 0; }
 
 .deck-tool {
   position: relative;
@@ -526,11 +750,11 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
     0 0 16px color-mix(in srgb, var(--pen, #ff8c1a) 55%, transparent);
 }
 
-/* The colours, floating above the toolbar while a tool is armed — the
-   toolbar sits on the bottom edge, so up is where the room is. */
+/* The colours, floating below the toolbar while a tool is armed — the
+   toolbar hangs from the top edge, so down is where the room is. */
 #deck-swatches {
   position: absolute;
-  bottom: calc(100% + 9px);
+  top: calc(100% + 9px);
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -848,6 +1072,10 @@ body.outline-open #deck-outline { transform: none; }
 /* The outline's mirror image: it takes room from the deck's right edge, so the
    slide stays whole — and is the live preview — while its markdown is typed.
    Only the dev server ever shows it; a built deck never builds this chrome. */
+/* The header's chevron trades the drawer's width for the deck's: half the page
+   for a slide that is mostly markup. Everything that steps aside for the
+   drawer reads the same token, so saying it once here moves all of it. */
+body.edit-wide { --editor-w: 50vw; }
 body.edit-open > .reveal { width: calc(100% - var(--editor-w)); }
 /* Both panels out at once: the deck keeps to the strip between them. */
 body.outline-open.edit-open > .reveal { width: calc(100% - var(--outline-w) - var(--editor-w)); }
@@ -868,7 +1096,7 @@ body.edit-open #deck-sig { right: calc(var(--editor-w) + 14px); }
   border-left: 1px solid var(--line);
   backdrop-filter: blur(10px);
   transform: translateX(100%);
-  transition: transform 0.26s ease;
+  transition: transform 0.26s ease, width 0.26s ease;
 }
 body.edit-open #deck-edit { transform: none; }
 
@@ -879,12 +1107,6 @@ body.edit-open #deck-edit { transform: none; }
   padding: 14px 10px 12px 16px;
   border-bottom: 1px solid var(--line);
 }
-#deck-edit > header span {
-  font: 600 12px/1 var(--sans);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
 .deck-edit-file {
   flex: 1;
   font: 500 12px/1 var(--mono);
@@ -894,7 +1116,8 @@ body.edit-open #deck-edit { transform: none; }
   white-space: nowrap;
 }
 .deck-edit-close,
-.deck-edit-nav {
+.deck-edit-nav,
+.deck-edit-wide {
   display: grid;
   place-items: center;
   width: 28px;
@@ -907,16 +1130,23 @@ body.edit-open #deck-edit { transform: none; }
   cursor: pointer;
 }
 .deck-edit-close:hover,
-.deck-edit-nav:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
+.deck-edit-nav:hover,
+.deck-edit-wide:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
 .deck-edit-close svg,
-.deck-edit-nav svg { display: block; width: 16px; height: 16px; }
+.deck-edit-nav svg,
+.deck-edit-wide svg { display: block; width: 16px; height: 16px; }
+/* Widened, the chevron says so on its own — it is the one control in the
+   header that is holding a state. */
+.deck-edit-wide[aria-pressed='true'] { color: var(--accent); }
 
+/* The labels are also the handles that swap which box has the room. */
 .deck-edit-label {
   padding: 12px 16px 6px;
   font: 600 10px/1 var(--sans);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--muted);
+  cursor: pointer;
 }
 
 #deck-edit textarea {
@@ -968,16 +1198,24 @@ body.edit-open #deck-edit { transform: none; }
     scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
   }
 }
-/* Whichever box holds the cursor gets the room, the other keeps a readable
-   strip — edit.js writes [data-focus] as the focus moves, and the swap
-   animates through flex. The slide box starts big: notes are the side dish. */
+/* Whichever box holds the cursor gets the room — edit.js writes [data-focus]
+   as the focus moves, and the swap animates through flex. The slide box starts
+   big and leaves the notes a readable strip; the notes, focused, take the
+   whole drawer and the slide box folds away entirely — its label stays as the
+   handle that brings it back. */
 #deck-edit textarea {
   min-height: 0;
-  transition: flex-grow 0.25s ease, flex-basis 0.25s ease;
+  transition: flex-grow 0.25s ease, flex-basis 0.25s ease,
+    padding 0.25s ease, border-width 0.25s ease;
 }
 #deck-edit-source { flex: 1 1 0; }
 #deck-edit-notes { flex: 0 0 120px; }
-#deck-edit[data-focus='notes'] #deck-edit-source { flex: 0 0 120px; }
+#deck-edit[data-focus='notes'] #deck-edit-source {
+  flex: 0 0 0px;
+  padding-block: 0;
+  border-width: 0;
+  overflow: hidden;
+}
 #deck-edit[data-focus='notes'] #deck-edit-notes { flex: 1 1 0; }
 
 #deck-edit > footer {
@@ -1012,6 +1250,7 @@ body.edit-open #deck-edit { transform: none; }
   border: 1px solid var(--line);
   border-radius: 999px;
   font: 600 12px/1 var(--sans);
+  white-space: nowrap;
   color: var(--muted);
   background: transparent;
   cursor: pointer;
@@ -1060,6 +1299,97 @@ body.edit-open #deck-edit { transform: none; }
 }
 .deck-edit-confirm-delete:hover { background: #f2555a; }
 
+/* The label line over the slide box carries the block picker's `+`. */
+.deck-edit-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+.deck-edit-snip {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.deck-edit-snip:hover {
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  color: var(--text);
+}
+.deck-edit-snip svg { display: block; width: 14px; height: 14px; }
+
+/* The block picker (snippets.js) — over the drawer, like the delete question,
+   so the deck keeps the stage while a block is chosen. */
+.deck-snip {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 12px;
+  background: color-mix(in srgb, var(--bg) 80%, transparent);
+  backdrop-filter: blur(6px);
+}
+.deck-snip[hidden] { display: none; }
+
+.deck-snip-filter {
+  flex: 0 0 auto;
+  padding: 9px 12px;
+  font: 400 13px/1.4 var(--sans);
+  color: var(--text);
+  background: color-mix(in srgb, var(--card) 80%, transparent);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+.deck-snip-filter:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+.deck-snip-list {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow-y: auto;
+}
+.deck-snip-list li {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 7px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.deck-snip-list li[hidden] { display: none; }
+.deck-snip-list li span { font: 600 13px/1.3 var(--sans); color: var(--text); }
+.deck-snip-list li small { font: 400 11.5px/1.45 var(--sans); color: var(--muted); }
+/* Keyboard and pointer land on the same row: the arrows move this class, and
+   the pointer moving over an entry takes it. */
+.deck-snip-list li.is-current { background: color-mix(in srgb, var(--accent) 18%, transparent); }
+
+/* The hairline the outline list and the drawer's boxes wear. */
+.deck-snip-list::-webkit-scrollbar { width: 5px; }
+.deck-snip-list::-webkit-scrollbar-track { background: transparent; }
+.deck-snip-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--outline-bar);
+}
+.deck-snip-list::-webkit-scrollbar-thumb:hover { background: var(--outline-bar-hover); }
+@supports not selector(::-webkit-scrollbar) {
+  .deck-snip-list {
+    scrollbar-width: thin;
+    scrollbar-color: var(--outline-bar) transparent;
+  }
+}
+
 /* The open drawer's button wears the accent — it draws in nothing, like the
    pointer's; the id outweighs the generic armed-tool rule. */
 #tool-edit[aria-pressed='true'] {
@@ -1163,10 +1493,10 @@ html.deck-pointer-on * { cursor: none !important; }
     0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
 }
 
-/* The kind picker, floating above the toolbar like the pen's swatches. */
+/* The kind picker, floating below the toolbar like the pen's swatches. */
 #deck-pointer-kinds {
   position: absolute;
-  bottom: calc(100% + 9px);
+  top: calc(100% + 9px);
   left: 50%;
   transform: translateX(-50%);
   display: flex;

package/templates/starter/assets/author/photo-1.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 800" width="600" height="800">
+  <defs>
+    <linearGradient id="g1" x1="0" y1="0" x2="0.6" y2="1">
+      <stop offset="0" stop-color="#1f2937" />
+      <stop offset="1" stop-color="#4b5563" />
+    </linearGradient>
+  </defs>
+  <rect width="600" height="800" fill="url(#g1)" />
+  <text x="300" y="400" text-anchor="middle" font-family="ui-sans-serif, system-ui, sans-serif"
+    font-size="34" fill="#e8ebf0" fill-opacity="0.55">your photo 1</text>
+</svg>

package/templates/starter/assets/author/photo-2.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 800" width="600" height="800">
+  <defs>
+    <linearGradient id="g2" x1="0" y1="0" x2="0.6" y2="1">
+      <stop offset="0" stop-color="#1e3a5f" />
+      <stop offset="1" stop-color="#2f6f8f" />
+    </linearGradient>
+  </defs>
+  <rect width="600" height="800" fill="url(#g2)" />
+  <text x="300" y="400" text-anchor="middle" font-family="ui-sans-serif, system-ui, sans-serif"
+    font-size="34" fill="#e8ebf0" fill-opacity="0.55">your photo 2</text>
+</svg>

package/templates/starter/decks/01-intro.md

@@ -10,6 +10,28 @@ The subtitle goes here.
 
 ---
 
+<!-- .slide: class="author-slide" -->
+
+<div class="author-photo">
+  <img src="assets/author/photo-1.svg" alt="" />
+  <img src="assets/author/photo-2.svg" alt="" />
+</div>
+
+<div class="author-bio">
+  <h1>Your name</h1>
+  <ul>
+    <li>What you do</li>
+    <li>What you are <strong>known for</strong></li>
+    <li>Where people can find you</li>
+  </ul>
+  <p class="author-meta">The stack · you · work · with</p>
+  <p class="author-meta">❤️ Life outside work — <strong>yoursite.dev</strong></p>
+</div>
+
+Note: thirty seconds, no more. Swap the two placeholders in assets/author/ for your own photos — add as many as you like, they cross-fade in the order they are written.
+
+---
+
 ## A slide
 
 A slide is whatever sits between two `---` lines.

package/templates/starter/decks/02-demos.md

@@ -20,15 +20,52 @@ section: Demos
 
 ---
 
-## How those two slides work
+## An embed that shares the slide
+
+<div class="frame">
+  <iframe src="demo/counter/"></iframe>
+</div>
+
+Not every demo wants the whole slide. `.frame` sizes one so the heading stays.
+
+---
+
+## The mechanism, in one picture
+
+```mermaid
+sequenceDiagram
+    autonumber
+    participant U as User
+    participant A as Your App
+    participant M as Model
+    participant S as Your Services
+
+    U->>A: "how are the running shoes doing?"
+    A->>M: prompt + tool list + component catalog
+    M->>A: tool call: getSales('running shoes')
+    A->>S: getSales('running shoes')
+    S-->>A: data
+    A->>M: tool result
+    M-->>A: UI description (JSON)
+    A->>A: render with YOUR components
+    A-->>U: a chart, product cards, a form
+```
+
+Note what never happens: the model never touches the DOM, the network, or your state.
+
+---
+
+## How those slides work
 
 ```markdown
 <!-- demo: counter -->        a folder in demo/
 <!-- demo: http://…:4200/ -->  anything else
+<div class="frame">…</div>    an embed that shares the slide
 ```
 
 - the marker must be the first thing in the slide
 - what follows it is the fallback for GitHub and Marp
 - `demo/angular-hello` is started by `servers:` in `slides.config.js`
+- the `+` in the edit drawer writes all three, and `/` opens the same list
 
 Note: the iframe is reloaded every time you arrive on the slide, so a demo is always in its initial state.