@humanforest/slidev-theme 0.1.2 → 0.2.0

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/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.2",
+  "version": "0.2.0",
   "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.2",
-    "@humanforest/frames": "^0.1.2",
-    "@humanforest/tokens": "^0.1.2",
-    "@humanforest/ui": "^0.1.2",
+    "@humanforest/fonts": "^0.2.0",
+    "@humanforest/frames": "^0.2.0",
+    "@humanforest/tokens": "^0.2.0",
+    "@humanforest/ui": "^0.2.0",
     "@iconify-json/lucide": "^1.2.0",
     "@iconify-json/vscode-icons": "^1.2.75",
     "@unovis/ts": "^1.6.7",