@humanforest/slidev-theme 0.1.1 → 0.1.3

package/components/Endorsement.vue

@@ -54,6 +54,21 @@ const props = defineProps({
 const src = computed(() => (props.tone === 'reverse' ? reverseUrl : positiveUrl));
 </script>
 
+<!--
+  `alt` names the certification rather than the picture — a reader who cannot see it needs to know
+  the deck carries the certification, which is what the mark is there to say.
+
+  ★★ AND THE COMMENT LIVES OUT HERE, NOT INSIDE `<template>`. A comment beside the `<img>` is a
+  SECOND ROOT NODE: Vue compiles the template to `createElementBlock(Fragment, [img, comment])`,
+  and a fragment root has nowhere to put inherited attributes, so it drops them silently. That is
+  not a dev-only detail — Slidev builds with comments ON, so the shipped bundle carries the
+  fragment too. `cover.vue` passes `class="cover-endorsement"` to place the mark in the slide's
+  bottom-left corner; the class never arrived, so the mark stayed `position: static` and stretched
+  to 1728 x 136 — a band across the foot of every mosaic cover, on a 1920 canvas. With the class it
+  draws 82 x 136 at left 120px, bottom 96px, which is `--deck-inset-display` and `--deck-inset-text`
+  exactly. Both numbers measured in the built dist, not inferred. The same drop disabled
+  `.cover-endorsement-stacked` on the poster variant.
+-->
 <template>
   <img
     class="deck-endorsement"
@@ -61,10 +76,6 @@ const src = computed(() => (props.tone === 'reverse' ? reverseUrl : positiveUrl)
     :style="{ height: `${size}px` }"
     alt="Certified B Corporation"
   >
-    <!--
-    `alt` names the certification rather than the picture — a reader who cannot see it needs to know
-    the deck carries the certification, which is what the mark is there to say.
-    -->
 </template>
 
 <style scoped>

package/debug/layoutDebug.js

@@ -0,0 +1,70 @@
+// task-14-brief.md, requirement 6 — the shared toggle behind the layout-debug (red-line) overlay.
+// Split out from global-top.vue itself so setup/shortcuts.ts can flip it without importing a .vue
+// file into a plain Slidev setup module — the same reasoning backgrounds.js/iconSlugs.js are split
+// from the components that read them.
+//
+// OFF BY DEFAULT, ALWAYS — this is the one property every other guarantee in this module and in
+// global-top.vue is built on top of:
+//   - `ref(false)`, never read from anywhere at import time — no localStorage/sessionStorage
+//     restore, no query-string read, nothing that could start this ref at `true` on a page this
+//     module has never seen interacted with. A fresh page load — which is EXACTLY what `slidev
+//     export`'s Playwright run does; it never presses a key or replays a prior session — starts
+//     here, at `false`, unconditionally.
+//   - No persistence at all. Nothing in this module writes to storage, so there is nothing for a
+//     later, unrelated page load (an export tab reusing a browser profile a presenter had toggled
+//     debug on in, during a live review) to inherit. The cost is that the toggle does not survive
+//     a manual reload — accepted deliberately, because the alternative is a mechanism that could
+//     leak state into an export, which is the one outcome requirement 6 names as worse than not
+//     having this tool at all.
+//
+// This module does NOT decide whether the overlay is currently SAFE to show — it has no way to
+// know it's running inside an export. global-top.vue is what gates the actual render on
+// `useNav().isPrintMode` as well as this ref, so even a hypothetical future bug that flipped
+// `layoutDebugEnabled` true during an export still could not paint anything — see that file's own
+// comment for the two-guard shape and why neither guard alone is treated as sufficient.
+import { reactive, ref } from 'vue';
+
+/** @type {import('vue').Ref<boolean>} */
+export const layoutDebugEnabled = ref(false);
+
+/** Flips the overlay. The one write site this ref has — used by setup/shortcuts.ts's 'l' binding.
+ * Never called from a layout, a component, or a slide. */
+export function toggleLayoutDebug() {
+  layoutDebugEnabled.value = !layoutDebugEnabled.value;
+}
+
+/*
+  THE FIVE TIERS, individually switchable — one on/off for the whole overlay was not enough once it
+  started drawing element boxes and gaps as well as rules. A dense slide carries 40-120 element
+  hairlines, which is exactly the texture you want when checking whether a paragraph sits where you
+  think and exactly the noise you do not want when checking a split's columns.
+
+  SAME NO-PERSISTENCE DISCIPLINE as `layoutDebugEnabled`, and for the same reason: a plain object
+  with literal defaults, never read from storage or a query string, so an export starts here every
+  time. All five start ON: boxing the content is half of what makes this a schematic rather than a
+  set of rules, so it is there the first time you open it. `element` is the one to switch off when a
+  dense slide gets busy, which is exactly why the switches exist.
+
+  Not a second nav button and not five more shortcuts: the key already names every tier, so the
+  key's own rows are the switches. See global-top.vue.
+*/
+export const layoutDebugTiers = reactive({
+  /*
+    ★ THE GRID WASH IS A TIER LIKE THE REST, and it was the one thing the overlay drew that nothing
+    could switch off. It is also the densest thing on screen — a 40px lattice under every other
+    line — so the moment a reader wants to check one measurement it is the first thing in the way.
+    Jose, doing exactly that: "can you remove the grid for a moment? too many lines i want to see if
+    everything is correct".
+  */
+  grid: true,
+  frame: true,
+  region: true,
+  gap: true,
+  element: true,
+  hazard: true,
+});
+
+/** Flips one tier. Called only from the overlay's own key. */
+export function toggleTier(id) {
+  if (id in layoutDebugTiers) layoutDebugTiers[id] = !layoutDebugTiers[id];
+}

package/debug/reviewToggles.js

@@ -0,0 +1,34 @@
+// Preview-only overrides for the running chrome, driven from the nav bar.
+//
+// WHAT THIS IS FOR. Reviewing a deck means asking "what does this look like without the
+// confidentiality chip / with the inset frames drawn", and the honest answers were previously "edit
+// the frontmatter and reload" and "remember that the key is `l`". Slidev renders a theme's own
+// `custom-nav-controls.vue` inside its toolbar (@slidev/client/internals/NavControls.vue imports
+// `#slidev/custom-nav-controls`), which is the right home for both: a reviewer's control, sitting
+// with the other reviewer's controls, rather than a frontmatter edit that has to be undone.
+//
+// ★★ AN OVERRIDE, NEVER A SETTING — and specifically never one that can reach an export.
+//
+// These refs only ever SUBTRACT from what the frontmatter already asked for. A slide with no
+// `confidential:` cannot be made to show one here, because that would let a reviewer see a deck the
+// deck does not describe. And every consumer must gate on `isPrintMode` the way global-top.vue
+// already does for the debug overlay: `slidev export` drives a real Playwright browser through the
+// same client, so a toggle left on at export time would otherwise silently ship a PDF missing its
+// own confidentiality marking. That is a worse failure than the inconvenience it saves.
+//
+// The debug overlay's own flag stays in ./layoutDebug.js — it already had a home, a keyboard
+// shortcut and a test, and moving it here to make one tidy module would be churn. This file
+// re-exports it so the nav control has a single import.
+import { ref } from 'vue';
+
+export { layoutDebugEnabled, toggleLayoutDebug } from './layoutDebug.js';
+
+/**
+ * Hide the confidentiality chip in PREVIEW only. False by default, so a fresh load always shows
+ * exactly what the frontmatter says.
+ */
+export const confidentialHidden = ref(false);
+
+export function toggleConfidential() {
+  confidentialHidden.value = !confidentialHidden.value;
+}

package/global-top.vue

@@ -58,9 +58,53 @@ import { useNav } from '@slidev/client';
 import { layoutDebugEnabled, layoutDebugTiers, toggleTier } from './debug/layoutDebug.js';
 import deckTokens from '@humanforest/tokens/deck/deck.json';
 
-const { isPrintMode, slides, currentPage } = useNav();
+const { isPrintMode, slides, currentPage, prevRoute, nextRoute } = useNav();
 const show = computed(() => layoutDebugEnabled.value && !isPrintMode.value);
 
+/*
+  ── NEIGHBOUR CHUNK WARM-UP ────────────────────────────────────────────────────────────────────
+  ★★ NOT PART OF THE OVERLAY. It lives here because Slidev gives a theme exactly one seam that is
+  mounted once for the whole deck rather than re-mounted per slide, and this is it — the same
+  reason the overlay itself is here. It needs `useNav()`, which is a composable and so cannot run
+  from `setup/main.ts` where this would otherwise belong.
+
+  WHAT IT FIXES. The deck's headmatter sets `preload: false` (scripts/deckSpecimen.ts's
+  HEAD_DEFAULTS) because Slidev otherwise mounts every route three seconds after load — measured
+  at 245 slides: 33,435 nodes and 1.7s of blocking time. But `preloadRoute()` in
+  @slidev/client's internals/SlidesShow.vue gates TWO separate things on that one key:
+
+    watchEffect(() => { preloadRoute(current); preloadRoute(prev); preloadRoute(next) })   // ← A
+    watchEffect(() => setTimeout(() => routes.forEach(preloadRoute), 3000))                // ← B
+
+  B is the stampede. A is not, and turning off B took A with it. So nothing was fetched ahead any
+  more, and a slide's own chunk was pulled on arrival instead.
+
+  ★★ THAT SHOWED AS A WHITE FLASH ON EVERY FORWARD STEP OF THE DEPLOYED DECK, and it did not
+  reproduce locally, which is why the comment in HEAD_DEFAULTS priced the trade at "about 30ms" —
+  a warm dev server. MEASURED on the gh-pages build instead, stepping onto a cold slide: the
+  wrapper lands in the DOM with NO `.slidev-layout` inside it for 278ms while `md-*.js`,
+  `LondonMap-*.js` and `LondonMap-*.css` are in flight. An empty slide paints Slidev's own
+  `bg-main` on `#slide-content` (internals/SlideContainer.vue), which is white. `SlideLoading`
+  never appears either — the async component's `delay` is 300ms and the gap is shorter.
+
+  ⚠ NO COMPOSITING FIX CAN REACH THIS, which is worth stating because styles/base.css already
+  carries one for a DIFFERENT white leak on the same seam. `useViewTransition` starts the
+  transition 50ms after `beforeResolve` and ends it on `router.afterEach`, and neither waits for
+  the slide's async component. The API is asked to cross-fade into a frame that is genuinely
+  white, and does so correctly.
+
+  WHY `load()` AND NOT `preloadRoute()`. The DOM cost that made B unaffordable comes from
+  `meta.__preloaded`, which is what puts a route into SlidesShow's `loadedRoutes` and mounts it.
+  `route.load()` only runs the slide's dynamic import, filling the `componentsCache` entry that
+  `#slidev/slides` keys its `defineAsyncComponent` loader off. So this buys back A's warm chunk
+  without buying back any of B's mounted DOM: still one page in the document, and a re-measured
+  navigation onto an already-loaded slide reports a single mutation with the layout ALREADY
+  present — zero frames of empty slide, zero requests.
+
+  ±1 only, matching what A itself did. A jump from the goto dialog still lands cold.
+*/
+watch([prevRoute, nextRoute], routes => routes.forEach(route => route?.load()), { immediate: true });
+
 /*
   task-14b-brief.md — the overlay now also has to show split.vue's Y-ANCHOR and its CONDITIONAL
   gutter, and unlike the three edge insets, both depend on the CURRENT SLIDE's own frontmatter

package/layouts/cover.vue

@@ -75,13 +75,12 @@ const props = defineProps({
     validator: (b) => BEAT_GROUNDS.includes(b),
   },
   /**
-   * WHAT SHAPE the opener is, as opposed to what colour. Six compositions, and every one of them
+   * WHAT SHAPE the opener is, as opposed to what colour. Four compositions, and every one of them
    * takes every `background` and both registers — the two props are orthogonal by construction,
    * which is the whole reason the ground is not baked into the variant names.
    *
    * · `plain`  — type alone on the ground. The opener with nothing to look at but the words.
    * · `inset`  — the title in a panel floating on the ground, air all round it.
-   * · `mark`   — the Forest mark oversized as the composition, the title over it.
    * · `poster` — a photograph edge to edge, the identity stacked over a scrim at the right.
    * · `mosaic` — the title on a field, beside a staggered grid of pictures bleeding off the edge.
    *

package/layouts/divider.vue

@@ -88,7 +88,7 @@ const props = defineProps({
   rank: { type: String, default: 'section', validator: (v) => ['section', 'subsection', 'topic'].includes(v) },
   /**
    * The part's own mark, drawn above the rule — `<namespace>:<name>`, the same reference IconTile
-   * takes (`forest:bike`, `lucide:layers`). SECTION RANK ONLY: it is the identity of a part, and a
+   * takes (`forest:bike`, `lucide:map`). SECTION RANK ONLY: it is the identity of a part, and a
    * subsection is not a new part. Ignored at the other ranks rather than refused, so changing a
    * slide's rank never breaks it.
    */

package/manifest/manifest.json

@@ -163,7 +163,7 @@
           "hasDynamicDefault": false,
           "defaultSource": "'plain'",
           "required": false,
-          "description": "WHAT SHAPE the opener is, as opposed to what colour. Six compositions, and every one of them takes every `background` and both registers — the two props are orthogonal by construction, which is the whole reason the ground is not baked into the variant names. · `plain` — type alone on the ground. The opener with nothing to look at but the words. · `inset` — the title in a panel floating on the ground, air all round it. · `mark` — the Forest mark oversized as the composition, the title over it. · `poster` — a photograph edge to edge, the identity stacked over a scrim at the right. · `mosaic` — the title on a field, beside a staggered grid of pictures bleeding off the edge."
+          "description": "WHAT SHAPE the opener is, as opposed to what colour. Four compositions, and every one of them takes every `background` and both registers — the two props are orthogonal by construction, which is the whole reason the ground is not baked into the variant names. · `plain` — type alone on the ground. The opener with nothing to look at but the words. · `inset` — the title in a panel floating on the ground, air all round it. · `poster` — a photograph edge to edge, the identity stacked over a scrim at the right. · `mosaic` — the title on a field, beside a staggered grid of pictures bleeding off the edge."
         },
         {
           "name": "endorsements",
@@ -296,7 +296,7 @@
           "hasDynamicDefault": false,
           "defaultSource": "''",
           "required": false,
-          "description": "The part's own mark, drawn above the rule — `<namespace>:<name>`, the same reference IconTile takes (`forest:bike`, `lucide:layers`). SECTION RANK ONLY: it is the identity of a part, and a subsection is not a new part. Ignored at the other ranks rather than refused, so changing a slide's rank never breaks it."
+          "description": "The part's own mark, drawn above the rule — `<namespace>:<name>`, the same reference IconTile takes (`forest:bike`, `lucide:map`). SECTION RANK ONLY: it is the identity of a part, and a subsection is not a new part. Ignored at the other ranks rather than refused, so changing a slide's rank never breaks it."
         }
       ],
       "slots": [
@@ -6237,7 +6237,7 @@
       "role": "Several DIFFERENT kinds of reading at once — figures beside a figure with a shape, not one form repeated across a uniform row.",
       "layout": "default",
       "props": {},
-      "fill": "A `::grid` (`:cols: 2` or 3) mixing two or three `::stat-card` tiles with one figure tile — a status-board read, not a single chart type repeated. `::bars` labels every row and prints its own value, and `::dotted-map` draws no key at all, so neither needs anything around it; a tile whose figure carries several series does need a key, and every Unovis mark gets one from `::chart-frame`, which is where the `height`, `legend` and `legend-position` each mark forwards land (the empty state reaches it as the mark's own `empty`). Two of the frame's defaults are wrong inside a cell: the 480px plot is deeper than a grid cell is wide, and a bottom legend eats what is left of it — set `:height:` down and `legend-position: 'top'`, or `:legend: false` and label the marks. Reach for `::chart-frame` directly only when the tile's figure is not one of the shipped marks: it is the one thing in the deck that puts a room-scale series key, and the honest empty well, under a figure built by hand.",
+      "fill": "A `::grid` (`:cols: 2` or 3) mixing two or three `::stat-card` tiles with one figure tile — a status-board read, not a single chart type repeated. `::bars` labels every row and prints its own value, and `::dotted-map` draws no key at all, so neither needs anything around it; a tile whose figure carries several series does need a key, and every Unovis mark gets one from `::chart-frame`, which is where the `height`, `legend` and `legend-position` each mark forwards land (the empty state reaches it as the mark's own `empty`). Two of the frame's defaults are wrong inside a cell: the 480px plot is deeper than a grid cell is wide, and a bottom legend eats what is left of it — set `:height:` down and `legend-position: 'top-left'`, or `:legend: false` and label the marks. Reach for `::chart-frame` directly only when the tile's figure is not one of the shipped marks: it is the one thing in the deck that puts a room-scale series key, and the honest empty well, under a figure built by hand.",
       "use": "An operating-review slide that needs to show the state of several different things on one screen, the way a real dashboard does.",
       "avoid": "Several figures of the SAME kind that should read as one comparison — `metrics` keeps every tile the same shape on one baseline; mixing figure types into that row is exactly what `dashboard` is for, and exactly what breaks a `metrics` row's own promise."
     },
@@ -6382,7 +6382,7 @@
       "props": {
         "ratio": "2:3"
       },
-      "fill": "Heading and a single-sentence reading of the movement in the default slot content; the chart in the `aside` slot — `::line-chart` when the series are independent trajectories to be compared, `::area-chart` when they sum to one whole (its default stack makes exactly that claim; pass `:overlaid: true` when they do not). Every `label` in `data` is a point on a real sequence, in order. In the props block every NON-STRING value is colon-prefixed — `:data:`, `:series:`, `:overlaid:`, `:height:`, `:max-ticks:` — while string props go bare (`y-label: 'Trips'`, `legend-position: 'top'`); drop the colon and the value arrives as a string, so an array plots nothing and a `false` reads as truthy. Set `yLabel` unless the heading already carries the unit, and leave `height` at its 480 default: with the heading in the content column rather than a `::header::`, the `frame: content` figure column starts at the 360px vertical anchor and split.vue caps it at 630px, which 480 plus a legend row just fits. (A `::header::` would size row 1 to the 130 band instead and free the 592 a full-width chart gets — a different recipe, not this one.)",
+      "fill": "Heading and a single-sentence reading of the movement in the default slot content; the chart in the `aside` slot — `::line-chart` when the series are independent trajectories to be compared, `::area-chart` when they sum to one whole (its default stack makes exactly that claim; pass `:overlaid: true` when they do not). Every `label` in `data` is a point on a real sequence, in order. In the props block every NON-STRING value is colon-prefixed — `:data:`, `:series:`, `:overlaid:`, `:height:`, `:max-ticks:` — while string props go bare (`y-label: 'Trips'`, `legend-position: 'bottom-center'`); drop the colon and the value arrives as a string, so an array plots nothing and a `false` reads as truthy. Set `yLabel` unless the heading already carries the unit, and leave `height` at its 480 default: with the heading in the content column rather than a `::header::`, the `frame: content` figure column starts at the 360px vertical anchor and split.vue caps it at 630px, which 480 plus a legend row just fits. (A `::header::` would size row 1 to the 130 band instead and free the 592 a full-width chart gets — a different recipe, not this one.)",
       "use": "A slide whose claim is a direction — growth, a decline, a curve that flattened — where the audience needs to see the shape and read the takeaway in the same breath.",
       "avoid": "A comparison across categories: `chart`'s bars are the mark for that, and a line drawn across category labels claims a rate of change between things that have no 'between'. Also avoid it for two points and a delta — that is `stat-hero`, and a line through two dots dresses a single subtraction up as a trajectory."
     },
@@ -6391,7 +6391,7 @@
       "role": "Two measurements read against each other — the one chart slide whose answer is the shape of a cloud, not a figure anyone can read off an axis.",
       "layout": "default",
       "props": {},
-      "fill": "The takeaway as the slide's heading, and `::scatter-chart` under it filling the frame — `data` rows of `{ x, y }`, plus `size` (scaled by `sizeRange`) for a third measure and `group` when the dots split into named sets, which is the only case where the legend says anything. In the props block every NON-STRING value is colon-prefixed — `:data:`, `:height:`, `:labels:`, `:size-range:` — while string props go bare (`x-label: 'Parking bays'`, `legend-position: 'top'`); drop the colon and the value arrives as a string, so an array plots nothing and `labels: false` reads as truthy. Set both `xLabel` and `yLabel` — neither axis of a scatter is self-evident — turn `:labels: true` on only when there are few enough dots to name, about six before they collide, and set `:height: 592`, which is what every full-width chart under a heading in the specimen deck uses; the 480 default is sized for a split's figure column and leaves the foot of the slide empty here.",
+      "fill": "The takeaway as the slide's heading, and `::scatter-chart` under it filling the frame — `data` rows of `{ x, y }`, plus `size` (scaled by `sizeRange`) for a third measure and `group` when the dots split into named sets, which is the only case where the legend says anything. In the props block every NON-STRING value is colon-prefixed — `:data:`, `:height:`, `:labels:`, `:size-range:` — while string props go bare (`x-label: 'Parking bays'`, `legend-position: 'bottom-center'`); drop the colon and the value arrives as a string, so an array plots nothing and `labels: false` reads as truthy. Set both `xLabel` and `yLabel` — neither axis of a scatter is self-evident — turn `:labels: true` on only when there are few enough dots to name, about six before they collide, and set `:height: 592`, which is what every full-width chart under a heading in the specimen deck uses; the 480 default is sized for a split's figure column and leaves the foot of the slide empty here.",
       "use": "A relationship between two measures — parking bays against trips, price against usage — where the point is whether the dots line up at all, and how tightly.",
       "avoid": "Anything measured over time: `trend` is that, and plotting (date, value) pairs as dots throws away the ordering a line's own segments carry, leaving the audience to re-sequence the cloud by eye. And do not move this into `trend`'s `split` figure column — that column caps at 630px and narrows the x range, pressing the cloud into a blob, which is the one compression a correlation slide cannot survive."
     },

package/manifest/presets.ts

@@ -324,7 +324,7 @@ export const PRESETS: Preset[] = [
     role: 'Several DIFFERENT kinds of reading at once — figures beside a figure with a shape, not one form repeated across a uniform row.',
     layout: 'default',
     props: {},
-    fill: 'A `::grid` (`:cols: 2` or 3) mixing two or three `::stat-card` tiles with one figure tile — a status-board read, not a single chart type repeated. `::bars` labels every row and prints its own value, and `::dotted-map` draws no key at all, so neither needs anything around it; a tile whose figure carries several series does need a key, and every Unovis mark gets one from `::chart-frame`, which is where the `height`, `legend` and `legend-position` each mark forwards land (the empty state reaches it as the mark\'s own `empty`). Two of the frame\'s defaults are wrong inside a cell: the 480px plot is deeper than a grid cell is wide, and a bottom legend eats what is left of it — set `:height:` down and `legend-position: \'top\'`, or `:legend: false` and label the marks. Reach for `::chart-frame` directly only when the tile\'s figure is not one of the shipped marks: it is the one thing in the deck that puts a room-scale series key, and the honest empty well, under a figure built by hand.',
+    fill: 'A `::grid` (`:cols: 2` or 3) mixing two or three `::stat-card` tiles with one figure tile — a status-board read, not a single chart type repeated. `::bars` labels every row and prints its own value, and `::dotted-map` draws no key at all, so neither needs anything around it; a tile whose figure carries several series does need a key, and every Unovis mark gets one from `::chart-frame`, which is where the `height`, `legend` and `legend-position` each mark forwards land (the empty state reaches it as the mark\'s own `empty`). Two of the frame\'s defaults are wrong inside a cell: the 480px plot is deeper than a grid cell is wide, and a bottom legend eats what is left of it — set `:height:` down and `legend-position: \'top-left\'`, or `:legend: false` and label the marks. Reach for `::chart-frame` directly only when the tile\'s figure is not one of the shipped marks: it is the one thing in the deck that puts a room-scale series key, and the honest empty well, under a figure built by hand.',
     use: 'An operating-review slide that needs to show the state of several different things on one screen, the way a real dashboard does.',
     avoid: 'Several figures of the SAME kind that should read as one comparison — `metrics` keeps every tile the same shape on one baseline; mixing figure types into that row is exactly what `dashboard` is for, and exactly what breaks a `metrics` row\'s own promise.',
   },
@@ -459,7 +459,7 @@ export const PRESETS: Preset[] = [
     role: 'A quantity moving through time, with the one sentence that says what the movement means sitting beside it.',
     layout: 'split',
     props: { ratio: '2:3' },
-    fill: 'Heading and a single-sentence reading of the movement in the default slot content; the chart in the `aside` slot — `::line-chart` when the series are independent trajectories to be compared, `::area-chart` when they sum to one whole (its default stack makes exactly that claim; pass `:overlaid: true` when they do not). Every `label` in `data` is a point on a real sequence, in order. In the props block every NON-STRING value is colon-prefixed — `:data:`, `:series:`, `:overlaid:`, `:height:`, `:max-ticks:` — while string props go bare (`y-label: \'Trips\'`, `legend-position: \'top\'`); drop the colon and the value arrives as a string, so an array plots nothing and a `false` reads as truthy. Set `yLabel` unless the heading already carries the unit, and leave `height` at its 480 default: with the heading in the content column rather than a `::header::`, the `frame: content` figure column starts at the 360px vertical anchor and split.vue caps it at 630px, which 480 plus a legend row just fits. (A `::header::` would size row 1 to the 130 band instead and free the 592 a full-width chart gets — a different recipe, not this one.)',
+    fill: 'Heading and a single-sentence reading of the movement in the default slot content; the chart in the `aside` slot — `::line-chart` when the series are independent trajectories to be compared, `::area-chart` when they sum to one whole (its default stack makes exactly that claim; pass `:overlaid: true` when they do not). Every `label` in `data` is a point on a real sequence, in order. In the props block every NON-STRING value is colon-prefixed — `:data:`, `:series:`, `:overlaid:`, `:height:`, `:max-ticks:` — while string props go bare (`y-label: \'Trips\'`, `legend-position: \'bottom-center\'`); drop the colon and the value arrives as a string, so an array plots nothing and a `false` reads as truthy. Set `yLabel` unless the heading already carries the unit, and leave `height` at its 480 default: with the heading in the content column rather than a `::header::`, the `frame: content` figure column starts at the 360px vertical anchor and split.vue caps it at 630px, which 480 plus a legend row just fits. (A `::header::` would size row 1 to the 130 band instead and free the 592 a full-width chart gets — a different recipe, not this one.)',
     use: 'A slide whose claim is a direction — growth, a decline, a curve that flattened — where the audience needs to see the shape and read the takeaway in the same breath.',
     avoid: 'A comparison across categories: `chart`\'s bars are the mark for that, and a line drawn across category labels claims a rate of change between things that have no \'between\'. Also avoid it for two points and a delta — that is `stat-hero`, and a line through two dots dresses a single subtraction up as a trajectory.',
   },
@@ -468,7 +468,7 @@ export const PRESETS: Preset[] = [
     role: 'Two measurements read against each other — the one chart slide whose answer is the shape of a cloud, not a figure anyone can read off an axis.',
     layout: 'default',
     props: {},
-    fill: 'The takeaway as the slide\'s heading, and `::scatter-chart` under it filling the frame — `data` rows of `{ x, y }`, plus `size` (scaled by `sizeRange`) for a third measure and `group` when the dots split into named sets, which is the only case where the legend says anything. In the props block every NON-STRING value is colon-prefixed — `:data:`, `:height:`, `:labels:`, `:size-range:` — while string props go bare (`x-label: \'Parking bays\'`, `legend-position: \'top\'`); drop the colon and the value arrives as a string, so an array plots nothing and `labels: false` reads as truthy. Set both `xLabel` and `yLabel` — neither axis of a scatter is self-evident — turn `:labels: true` on only when there are few enough dots to name, about six before they collide, and set `:height: 592`, which is what every full-width chart under a heading in the specimen deck uses; the 480 default is sized for a split\'s figure column and leaves the foot of the slide empty here.',
+    fill: 'The takeaway as the slide\'s heading, and `::scatter-chart` under it filling the frame — `data` rows of `{ x, y }`, plus `size` (scaled by `sizeRange`) for a third measure and `group` when the dots split into named sets, which is the only case where the legend says anything. In the props block every NON-STRING value is colon-prefixed — `:data:`, `:height:`, `:labels:`, `:size-range:` — while string props go bare (`x-label: \'Parking bays\'`, `legend-position: \'bottom-center\'`); drop the colon and the value arrives as a string, so an array plots nothing and `labels: false` reads as truthy. Set both `xLabel` and `yLabel` — neither axis of a scatter is self-evident — turn `:labels: true` on only when there are few enough dots to name, about six before they collide, and set `:height: 592`, which is what every full-width chart under a heading in the specimen deck uses; the 480 default is sized for a split\'s figure column and leaves the foot of the slide empty here.',
     use: 'A relationship between two measures — parking bays against trips, price against usage — where the point is whether the dots line up at all, and how tightly.',
     avoid: 'Anything measured over time: `trend` is that, and plotting (date, value) pairs as dots throws away the ordering a line\'s own segments carry, leaving the audience to re-sequence the cloud by eye. And do not move this into `trend`\'s `split` figure column — that column caps at 630px and narrows the x range, pressing the cloud into a blob, which is the one compression a correlation slide cannot survive.',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/slidev-theme",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Forest brand theme for Slidev — the guardrail. Layouts + components wired to @humanforest/tokens, so any deck is on-brand by construction. Do not hand-pick colours/fonts here; everything aliases the engine tokens.",
   "keywords": [
     "slidev-theme",
@@ -19,6 +19,7 @@
   "slidev": {
     "colorSchema": "light",
     "defaults": {
+      "comark": true,
       "transition": "view-transition",
       "aspectRatio": "16/9",
       "canvasWidth": 1920,
@@ -31,10 +32,10 @@
     }
   },
   "dependencies": {
-    "@humanforest/fonts": "^0.1.1",
-    "@humanforest/frames": "^0.1.1",
-    "@humanforest/tokens": "^0.1.1",
-    "@humanforest/ui": "^0.1.1",
+    "@humanforest/fonts": "^0.1.3",
+    "@humanforest/frames": "^0.1.3",
+    "@humanforest/tokens": "^0.1.3",
+    "@humanforest/ui": "^0.1.3",
     "@iconify-json/lucide": "^1.2.0",
     "@iconify-json/vscode-icons": "^1.2.75",
     "@unovis/ts": "^1.6.7",
@@ -59,6 +60,7 @@
     "components",
     "styles",
     "setup",
+    "debug",
     "global-top.vue",
     "slide-top.vue",
     "slide-bottom.vue",