@humanforest/slidev-theme 0.1.0

package/components/Bars.vue

@@ -0,0 +1,207 @@
+<script setup>
+/*
+  A bar chart sized for a room.
+
+  Deliberately not @humanforest/charts: that package peer-depends on @nuxt/ui and @unovis/vue,
+  which is the right trade for a product surface with tooltips, crosshairs and live data, and
+  the wrong one for a slide that shows five numbers once. What matters for brand consistency is
+  that the COLOURS and the ORDER match — so the fills come from --deck-series-1…5, which alias
+  the published categorical palette in the order the product uses it. A deck chart and a
+  product chart of the same data are the same chart.
+
+  Horizontal by default: category labels on a slide are words, and words read horizontally
+  without rotating anyone's head.
+
+  Bars start at zero. Not because a truncated axis is always a lie — it isn't, and the research
+  does not support the absolute rule — but because a slide is read in seconds from the back of
+  a room, with no axis to inspect, so length has to be the whole message.
+
+  ─────────────────────────────────────────────────────────────────────────────────────────────
+  ★ WHY THIS STILL EXISTS ALONGSIDE StackedBarChart.vue / GroupedBarChart.vue
+
+  Asked and answered, against the library rather than from memory, so the next reader does not
+  re-open it. FIRST, the half of the old answer that is WRONG: "the Unovis set cannot draw a
+  horizontal bar" is false. `@unovis/ts`'s StackedBar and GroupedBar both take
+  `orientation: Orientation.Horizontal` (components/{stacked-bar,grouped-bar}/config.d.ts). The
+  deck's two bar components simply do not expose it, which is a choice, not a limitation.
+
+  What is genuinely not expressible there is the rest of this component:
+
+    · A VALUE AT THE END OF EVERY BAR, IN A COLUMN. Neither bar mark carries a label accessor at
+      all — `VisXYLabels` is the only text mark in the library, and it positions in DATA space
+      with a background pill and clustering, so the figures would land at each bar's own end
+      rather than lining up. This component's `.bars-value` is a real grid column: right-aligned,
+      `--font-sans` (Mohr ships no tabular figures, so `tabular-nums` on the display face is a
+      silent no-op), digits aligned down the page. A slide that shows five numbers wants them
+      readable AS numbers, not inferred off a scale.
+    · NO AXIS AND NO GRID. The track IS the 100% reference — ONE track, shared by every row (see
+      `.bars`'s own subgrid note below; this is where a bar chart stops being a chart if it is got
+      wrong). An Unovis bar gets its category names from an axis, which is scale-positioned; here
+      the label column is `auto` — sized to the WIDEST label in the chart and ellipsised past 10em
+      — so four borough names do not reserve a fixed gutter.
+    · `highlight`, WITH A MEASURED NUMBER BEHIND IT. Stepping every other row back to 0.70 is not
+      a style value; see the long note on `.bars-row.is-muted` below for the 3:1 recomputation in
+      both registers that produced it. Rebuilding this on Unovis means re-deriving that through a
+      colour accessor and re-running the measurement for no brand gain.
+
+  So: a stack or a cluster of parts, with an axis, is StackedBarChart/GroupedBarChart. Five
+  directly-labelled rows with no chrome at all is this. They are different charts, and the fills
+  come from the same `seriesVar()` either way, so they can never drift into two palettes.
+*/
+import { computed } from 'vue'
+// The series colour comes from the same accessor the Unovis-backed charts use, so the deck has ONE
+// place that knows a series colour is --deck-series-N and ONE place that knows where the palette
+// stops. (SIX now, not five — chartData.ts carries the number and the reason.) Before this the mapping was a template string inlined here, which is exactly how two chart
+// systems drift into two palettes.
+import { SERIES_CEILING, seriesVar } from './chartData'
+
+const props = defineProps({
+  /** [{ label, value, series? }] — `series` (1–5) pins a colour; otherwise index order is used. */
+  data: { type: Array, required: true },
+  /** Force the axis top. Defaults to the largest value, so the longest bar fills the track. */
+  max: { type: Number, default: null },
+  /** Shown at the end of each bar. Pass a function for units, currency, whatever. */
+  format: { type: Function, default: (v) => new Intl.NumberFormat('en-GB').format(v) },
+  /** Single-hue: every bar takes the accent, and only `highlight` differs. Use when the bars are
+      one series and the comparison is between rows, not between categories. */
+  monochrome: { type: Boolean, default: false },
+  /** Index of the row that carries the point. Everything else steps back. */
+  highlight: { type: Number, default: null },
+})
+
+const top = computed(() => props.max ?? (Math.max(...props.data.map((d) => d.value), 0) || 1))
+
+const fillOf = (row, i) => {
+  if (props.monochrome) return 'var(--deck-accent)'
+  // `series` is 1-based at the call site (it names a --deck-series-N role); seriesVar is 0-based.
+  // The double modulo keeps a hand-written 0 or a negative out of seriesVar's RangeError — a slide
+  // with a typo in one row should still draw, in the wrong colour, rather than blanking.
+  const n = row.series ?? i + 1
+  return seriesVar((((n - 1) % SERIES_CEILING) + SERIES_CEILING) % SERIES_CEILING)
+}
+</script>
+
+<template>
+  <div class="bars">
+    <div
+      v-for="(row, i) in data"
+      :key="row.label"
+      class="bars-row"
+      :class="{ 'is-muted': highlight !== null && highlight !== i }"
+    >
+      <div class="bars-label">{{ row.label }}</div>
+      <div class="bars-track">
+        <div class="bars-fill" :style="{ width: `${(row.value / top) * 100}%`, background: fillOf(row, i) }" />
+      </div>
+      <div class="bars-value">{{ format(row.value) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/*
+  ★★ ONE GRID FOR THE WHOLE CHART, NOT ONE PER ROW — the difference between a bar chart and a
+  picture of one.
+
+  This was `display: flex` here with `grid-template-columns: auto minmax(0, 1fr) auto` on each ROW,
+  which reads as the same three columns but is not: `auto` sizes against the row's OWN content, so
+  every row got a different label width and therefore a different track — and the track is what
+  line ~200 calls "the 100% reference". Measured on apps/deck-template's borough slide, in canvas
+  units, before this fix:
+
+      Hackney    41,200   label 140.1   track 483.0   100.00%  →  483.0px
+      Islington  33,800   label 139.3   track 483.8    82.04%  →  396.9px
+      Camden     28,100   label 138.1   track 485.1    68.20%  →  330.8px
+      Southwark  19,400   label 173.5   track 449.6    47.09%  →  211.7px
+
+  `label + track + value` is 792.0 in every row: the label steals directly from the track. The
+  percentages were computed correctly and applied to a reference that moved, so Southwark's bar
+  measured against Hackney's scale READ AS 18,058 — 6.9% under the 19,400 printed beside it —
+  purely because "Southwark" is a wider word than "Hackney". A chart that draws a longer word as a
+  smaller number is not a chart; it is a lie with a legend.
+
+  The fix is a SUBGRID: `.bars` owns the three tracks, and each row adopts them (`grid-template-
+  columns: subgrid`) instead of resolving its own. The label column is now `auto` over the WHOLE
+  chart — the widest label in the set — so every track starts at the same x and has the same width,
+  and equal values draw equal lengths by construction rather than by every label happening to be
+  the same length.
+
+  A row is still a real box (not `display: contents`), because `.bars-row.is-muted` needs something
+  to carry its opacity and a box that can transition. Subgrid inherits the parent's column gap, so
+  the 24px between label, track and value is still declared once.
+*/
+.bars {
+  display: grid;
+  /* Label and value size to their CONTENT; the track takes everything left. A fixed label
+     column in `ch` (which is what this was) reserved ~390px of a 830px half-slide for four
+     borough names and left the bars as stubs — `ch` is 0.78em in these faces, so a 14ch column
+     is 11em wide. `auto` sidesteps the unit question entirely. */
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  row-gap: var(--deck-space-2);
+  column-gap: var(--deck-space-3);
+}
+.bars-row {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: center;
+  /* Rows fade rather than move when one is singled out — colour and opacity survive the
+     reduced-motion floor, travel does not. */
+  transition: opacity var(--motion-base) var(--motion-ease-out);
+}
+/* 0.70, not a rounder-looking 0.5 or 0.45 (the value this was before) — MEASURED, not guessed, and
+   MEASURED AGAIN against the FLOOR THAT ACTUALLY APPLIES (fix round 1, IMPORTANT 8 — the first
+   pass here cited "the stricter 4.5:1 body floor" for `.bars-label`, which is wrong: at
+   --type-deck-body-sm-size (2.25rem = 36px), `.bars-label` is unconditionally WCAG large text —
+   36px clears the 24px large-text threshold on its own, independent of font-weight — so 3:1 is the
+   floor that actually governs it, not 4.5:1. `.bars-value` (--type-deck-body-size, 3rem = 48px,
+   weight 700) is large text by the same rule with even more room. Citing the wrong (stricter)
+   floor made the shipped value LOOK more conservative than the real requirement demanded.
+
+   scripts/deckAudit.ts's rendered-contrast sweep (task-8-brief.md CONTROLLER ADDENDUM 2) found
+   0.45 live: a muted row's own `.bars-label` (--deck-fg-muted, i.e. neutral-400 in the dark
+   register) blended over --deck-bg (forest-950) at 0.45 measures 2.27:1 — under even the CORRECT
+   3:1 floor. Recomputed against 3:1 for the worst real pair in EACH register (dark: neutral-400 on
+   forest-950; light: neutral-600 on warm-50): 0.60 → dark 2.99 / light 2.85 (fails), 0.65 → dark
+   3.28 / light 3.19 (clears, thin margin), 0.70 → dark 3.59 / light 3.55 (clears, real margin).
+   0.70 is the lowest of the tried candidates that clears 3:1 in BOTH registers with a margin
+   deliberately larger than rounding noise — picked over 0.85 (which also clears, at 4.63/5.05)
+   because a muted row is supposed to read as receded, and 0.85 barely fades at all once the
+   correct, more permissive floor is the one actually being cleared. */
+.bars-row.is-muted {
+  opacity: 0.7;
+}
+.bars-label {
+  font-size: var(--type-deck-body-sm-size);
+  color: var(--deck-fg-muted);
+  text-align: right;
+  white-space: nowrap;
+  max-width: 10em; /* a category that needs more than this wants a different chart */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bars-track {
+  /* No gridlines and no axis: the track itself is the 100% reference. */
+  background: var(--deck-surface);
+  border-radius: var(--deck-radius-item);
+  overflow: hidden;
+}
+.bars-fill {
+  height: var(--deck-space-5);
+  border-radius: var(--deck-radius-item);
+  min-width: 2px;
+}
+/* Sans, not the display face. The values form a COLUMN, so their digits have to line up — and
+   Mohr ships no tabular figures, which makes `font-variant-numeric: tabular-nums` on it a silent
+   no-op. This is the same reason the system's .type-tabular role swaps the family rather than
+   just setting the feature. */
+.bars-value {
+  font-family: var(--font-sans);
+  font-weight: 700;
+  font-size: var(--type-deck-body-size);
+  line-height: 1;
+  color: var(--deck-fg);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+</style>

package/components/BoroughShape.vue

@@ -0,0 +1,127 @@
+<script setup>
+/*
+  A single London borough as a styleable graphic — a glyph, not a chart.
+
+  Where DottedMap.vue draws the whole city as a dot grid, this hands you one outline, framed to its own
+  bounds and filled with currentColor, so it behaves like an icon: it has a natural size, it steps
+  up and down a ladder (`size`), and its path takes the ink of whatever colour the <svg> carries.
+
+  ⚠ ONE HALF OF THAT IS STILL A PROMISE THIS FILE DOES NOT KEEP. The scoped rule below pins
+  `color: var(--deck-accent)` on the element itself, which OVERRIDES inheritance — so "it takes the
+  ink of whatever it sits in" is true of the path relative to the <svg>, and false of the <svg>
+  relative to the slide. A `text-*` utility on the tag is inert for exactly the reason a `h-*`
+  utility was before `size` existed. Left alone deliberately: unpinning it would repaint every
+  existing call site, which is a separate decision from adding a sizing API.
+
+  Deliberately does one thing. No data, no ramp, no labels, no wards, no selection — the moment a
+  slide wants any of those it wants a map, not a glyph. Keeping this presentational is the whole
+  point: it is the mark you put beside a number to say WHERE, at a size an audience can recognise
+  from the back of a room.
+
+  Geometry comes from the same generated file the product's own borough shapes read
+  (@humanforest/tokens/geo/london-boroughs.json), so a deck outline and a product outline are the
+  same outline. The lookup and framing live in boroughGeometry.ts, which names its source of truth.
+*/
+import { computed } from 'vue';
+import boroughs from '@humanforest/tokens/geo/london-boroughs.json';
+import { findBorough, frameViewBox } from './boroughGeometry';
+
+/*
+  The height ladder, in PIXELS. `md` is the NATURAL size — the same number the scoped rule below
+  falls back to when no size is asked for — so the ladder contains the default rather than sitting
+  beside it, and an author who writes size="md" gets exactly what an author who writes nothing gets.
+  The two spellings of that number are pinned to each other by
+  packages/slidev-theme/test/boroughShape.static.test.ts, which reads this file's own CSS.
+
+  ★★ PX, NOT GRID UNITS, and the change is deliberate rather than cosmetic. This was
+  `{ sm: 6, md: 10, lg: 16, xl: 22 }` multiplied by --deck-grid, which meant a map's height was a
+  function of the LAYOUT MODULE. Moving the grid from 40 to 24 would have shrunk every borough
+  shape by 40% — 400px to 240px at md — silently, with nothing in the component or its tests
+  objecting, because the arithmetic still worked.
+
+  A figure's height is not layout rhythm. It rode the grid because the grid was a handy number to
+  multiply, and that coupling is exactly what turns a spacing decision into a resize of the
+  artwork. The spacing ladder is the thing that should follow the grid; a map is not.
+*/
+const SIZES = { sm: 240, md: 400, lg: 640, xl: 880 };
+
+const props = defineProps({
+  /** Which borough: an ONS code (E09…) or a name ('Southwark'), matched case-insensitively. */
+  borough: { type: String, required: true },
+  /** Breathing room around the shape, as a fraction of its longer side. */
+  pad: { type: Number, default: 0.04 },
+  /** Assistive text. With it the graphic is announced as an image; without it it is decorative and hidden, the same call an icon makes. */
+  label: { type: String, default: null },
+  /** How tall the glyph draws: sm 240px · md 400px · lg 640px · xl 880px. md is the natural size, so a slide that says nothing draws exactly what it drew before this prop existed; xl needs a slide with no heading, since 880px plus an h1 clears the bottom of the canvas. */
+  size: {
+    type: String,
+    default: 'md',
+    // Repeats the ladder's own keys as a literal rather than reading Object.keys(SIZES): Vue hoists
+    // defineProps() out of setup() at build time, so a validator cannot close over a const declared
+    // in the same block — the same constraint Placeholder.vue's `ratio` validator documents.
+    validator: (s) => ['sm', 'md', 'lg', 'xl'].includes(s),
+  },
+});
+
+const area = computed(() => findBorough(boroughs.areas, props.borough));
+const viewBox = computed(() => frameViewBox(area.value, props.pad));
+
+/*
+  Sizing lands as an inline CUSTOM PROPERTY, never as a class or an inline `height`, and that is the
+  whole fix. A scoped rule is `.borough-shape[data-v-…]` — two selectors' worth of specificity — so
+  a UnoCSS `h-*` utility on the tag was silently inert and the only way past it was !important. A
+  custom property is not in the specificity contest at all: the scoped rule stays the one place the
+  height is declared, and this only supplies the number it reads.
+
+  An unknown `size` resolves to NO inline property at all rather than to `calc(… * undefined)` —
+  an invalid declaration a browser drops, which would leave the element with no height whatsoever.
+  The var() fallback catches that case and draws the natural size instead.
+
+  Why a closed ladder and not a free CSS length: the same call Grid.vue's `gap` makes. A deck that
+  can express any height expresses four slightly different ones across twelve slides.
+*/
+const sizeStyle = computed(() => {
+  const px = SIZES[props.size];
+  return px ? { '--borough-shape-height': `${px}px` } : undefined;
+});
+</script>
+
+<template>
+  <svg
+    v-if="area"
+    class="borough-shape"
+    :style="sizeStyle"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+    :role="label ? 'img' : undefined"
+    :aria-label="label || undefined"
+    :aria-hidden="label ? undefined : 'true'"
+  >
+    <!-- currentColor so the shape takes the ink of the text around it; non-scaling-stroke keeps any
+         border a slide adds one hairline whatever the rendered size. -->
+    <path :d="area.d" fill="currentColor" vector-effect="non-scaling-stroke" />
+  </svg>
+</template>
+
+<style scoped>
+.borough-shape {
+  /* Sized off its HEIGHT, unlike DottedMap.vue, and the difference is the aspect ratio. The dot map is
+     landscape, so filling the width it is given always fits; a borough is frequently PORTRAIT
+     (Southwark runs nearly 2:1 the other way), and an SVG told to fill a half-slide column's width
+     resolves to a shape taller than the 1080 canvas and runs off the bottom of the slide —
+     observed, not predicted. Height is the axis a slide actually constrains, so height is the axis
+     this sizes on.
+
+     Ten grid units is the NATURAL size, and it lives in the var() FALLBACK rather than as a bare
+     value so `size` can supply a different number without a specificity fight — see the sizeStyle
+     comment in the script block. In practice the prop always sets the property (its default, `md`,
+     IS this number), so the fallback is the safety net for an unrecognised size rather than the
+     common path: a slide that asks for nothing still draws 400px either way. Natural-by-default is
+     the deck's own convention for a mark — demos draw marks at natural size and pass no size. */
+  display: block;
+  height: var(--borough-shape-height, 400px);
+  width: auto;
+  max-width: 100%;
+  color: var(--deck-accent);
+}
+</style>