@humanforest/slidev-theme 0.1.0

package/components/LondonMap.vue

@@ -0,0 +1,348 @@
+<script setup>
+/*
+  All 33 London boroughs in one frame, in true relative position — the vector counterpart to
+  DottedMap.vue's grid.
+
+  ★ WHY THIS IS NOT BoroughShape THIRTY-THREE TIMES, which is the obvious thing to try and does not
+  work. BoroughShape re-frames every instance to its OWN bounding box (boroughGeometry.ts's
+  frameViewBox), which is exactly what makes it a glyph: Bromley's 288x295 and the City of London's
+  49x30 draw the same height, because `size` says how tall to draw the MARK and never how big the
+  place is. Thirty-three of those are thirty-three unrelated marks. A map is the opposite operation
+  — every borough kept in the ONE coordinate space the generated file already puts them in.
+
+  So there is no projection maths here, and deliberately none: london-boroughs.json declares
+  `viewBox: [0, 0, 1000, 771]` and the union of all 33 paths fills it exactly. Drawing the city is
+  a matter of NOT re-framing. The viewBox is read from the file rather than restated as a literal,
+  so a regenerated projection moves this component with it.
+
+  ★ THE HAIRLINE IS NOT DECORATION. Boroughs tile with no gaps, so 33 filled paths with no
+  separator fuse into a single London silhouette and the whole point of the picture is lost. The
+  stroke is the slide's own ground colour, drawn at a non-scaling width so it stays one hairline at
+  every rendered size rather than thickening as the map grows.
+
+  TWO TIERS, matching DottedMap's own reading at presenting distance:
+    land        every borough. Quiet, but not so quiet it dissolves on a projector.
+    highlight   the accent. What the slide is actually about.
+
+  A highlight can carry a SHADE instead, 1-5 off the deck's sequential ramp, which turns the same
+  picture into a choropleth: the accent says "this one", a shade says "this much". They are
+  different instruments and the prop lets a slide pick one per borough — `'Southwark'` for the
+  accent, `{ borough: 'Southwark', shade: 4 }` for a quantity.
+
+  There is no river: packages/tokens/geo carries no vector Thames, only the dot grids' sampled one.
+  A slide that needs the river to say "London" wants DottedMap; this one says it with the outlines.
+
+  Geometry is the same generated file BoroughShape and the product's own maps read, so a deck map
+  and a product map are the same outlines. Lookup comes from boroughGeometry.ts — indexBoroughs()
+  directly rather than findBorough(), because this is the one caller with more than a handful of
+  keys to resolve and findBorough rebuilds the whole index on every call.
+*/
+import { computed } from 'vue';
+import boroughs from '@humanforest/tokens/geo/london-boroughs.json';
+import { indexBoroughs } from './boroughGeometry';
+
+const props = defineProps({
+  /** Rendered width in canvas px. Height follows from the map's own 1000 x 771 aspect, so this is the only size lever. */
+  width: { type: Number, default: 900 },
+  /**
+   * Boroughs to lift out of the land tier — ONS codes or names, matched exactly as BoroughShape
+   * matches a single one. Three instruments, one per entry:
+   *
+   * · `'Southwark'`                     the accent. "This one."
+   * · `{ borough, shade: 1-5 }`         a step of the deck's SEQUENTIAL ramp. "This much."
+   * · `{ borough, series: 1-6 }`        a step of the deck's CATEGORICAL palette. "This kind."
+   *
+   * ★★ SHADE AND SERIES ARE NOT INTERCHANGEABLE, AND THE DIFFERENCE IS THE WHOLE REASON BOTH EXIST.
+   * Five steps of one hue mean MORE; six unrelated hues mean DIFFERENT. A map of where the fleet is
+   * live, where it is coming and where a tender is open is three categories — drawn on the ramp it
+   * reads as a quantity, and a room takes "coming soon" for "more of whatever this is".
+   *
+   * An entry may carry one or the other. Given both, `series` wins and `shade` is ignored, because a
+   * category is the stronger claim: it says the map is not a choropleth at all.
+   */
+  highlight: { type: Array, default: () => [] },
+  /**
+   * What the map holds: the whole city, or only the boroughs in `highlight`.
+   *
+   * · `city`      all 33, in the projection's own frame. The selection is coloured in place.
+   * · `selection` ONLY the selected boroughs, framed to the union of their own bounding boxes.
+   *
+   * ★★ IT DROPS THE REST AND RE-FRAMES, AND THE TWO GO TOGETHER. Drawn as one and not the other it
+   * is neither picture: re-framing while keeping the city is a zoom, and dropping the city while
+   * keeping the frame is a handful of shapes adrift in an empty London-sized box.
+   *
+   * ⚠ WHAT IT COSTS, so a slide chooses it rather than falls into it: without the other boroughs
+   * there is no coastline, no neighbour and no river to locate the selection against, so the picture
+   * only reads if the selection is itself a familiar shape. A contiguous service area survives it; a
+   * scattered set of three does not. The boroughs keep their true relative position either way —
+   * this is still the map's own coordinate space, which is the whole difference between it and
+   * `BoroughShape`, whose glyphs are each re-framed to themselves.
+   */
+  fit: { type: String, default: 'city', validator: (f) => ['city', 'selection'].includes(f) },
+  /** Assistive text for the whole map. With it the figure is announced as an image; without it it is decorative and hidden, the same call an icon makes. */
+  label: { type: String, default: null },
+  /**
+   * The key, and its SHAPE follows the instrument the highlights used.
+   *
+   * · with `shade`  — the two ends of the scale: `['fewer trips', 'more trips']`. A graded strip,
+   *   labelled at the ends only, because a ramp means "more" and its key has to show the order.
+   * · with `series` — one label per step, in series order: `['In service', 'Coming soon', 'In
+   *   tender']`. Bullets, the way ChartFrame keys a categorical series, because the colours mean
+   *   "different" and nothing is being compared along a scale.
+   *
+   * ★ THE STATUS WORDS ARE THE SLIDE'S, NOT THIS COMPONENT'S. "In service", "coming soon", "in
+   * tender" are commercial vocabulary that changes with the business; a component that baked them
+   * in would be a component that has to be edited when the business does. It owns colour ROLES; the
+   * slide says what they mean.
+   */
+  legend: { type: Array, default: () => [] },
+});
+
+const areas = boroughs.areas;
+
+/*
+  Resolved to CODES, not to the strings the caller passed. `highlight` takes a name or a code and
+  matches case-insensitively, so 'southwark', 'Southwark' and 'E09000028' are one borough — comparing
+  the raw strings against area.name would light none of them.
+
+  An unresolvable key is dropped rather than thrown on, matching findBorough's own contract. The
+  generator is where a typo is caught: its builder refuses a highlight the geometry does not carry,
+  because here it could only ever be a borough that quietly failed to light up.
+
+  ★ THE SHADE IS CLAMPED HERE, NOT ONLY IN THE GENERATOR. An out-of-range step would build
+  `var(--deck-shade-9)`, which is not declared — and an undefined custom property in a `fill` does
+  not fall back to nothing, it resolves to currentColor. The borough would paint the slide's INK
+  colour and read as a deliberate near-black, which is the worst kind of wrong: it looks chosen.
+*/
+const SHADE_STEPS = 5;
+/* Six, not five: deck.css declares --deck-series-1 through -6. Clamped for the same reason the
+   shade is — an undeclared step resolves to currentColor, which paints the slide's ink and reads as
+   a deliberate near-black. */
+const SERIES_STEPS = 6;
+const step = (value, ceiling) => Math.min(ceiling, Math.max(1, Math.round(value)));
+const selected = computed(() => {
+  const index = indexBoroughs(areas);
+  const out = new Map();
+  for (const item of props.highlight) {
+    const key = typeof item === 'string' ? item : item?.borough;
+    const area = index.get(String(key ?? '').trim().toLowerCase());
+    if (!area) continue;
+    const series = typeof item === 'string' ? null : item?.series;
+    const shade = typeof item === 'string' ? null : item?.shade;
+    // Series first: a category is the stronger claim, so an entry carrying both is not a choropleth.
+    const fill = series != null
+      ? `var(--deck-series-${step(series, SERIES_STEPS)})`
+      : shade != null
+        ? `var(--deck-shade-${step(shade, SHADE_STEPS)})`
+        : null;
+    out.set(area.code, { area, fill });
+  }
+  return out;
+});
+const fills = computed(() => new Map([...selected.value].map(([code, v]) => [code, v.fill])));
+
+/*
+  ★★ THE UNION OF THE SELECTED BOUNDING BOXES, WITH NO PATH PARSED. Every area in the generated file
+  carries `x, y, w, h`, which is what frameViewBox already reads to frame ONE borough — this is the
+  same operation over several. The pad is a fraction of the union's longer side, so a wide selection
+  and a tall one get the same visual margin rather than the same number of user units.
+
+  Falls back to the city's own viewBox when nothing is selected: a `fit: selection` map with an empty
+  `highlight` has no selection to frame, and an empty box would render nothing at all.
+*/
+const SELECTION_PAD = 0.06;
+const viewBox = computed(() => {
+  if (props.fit !== 'selection' || selected.value.size === 0) return boroughs.viewBox.join(' ');
+  const boxes = [...selected.value.values()].map((v) => v.area);
+  const x0 = Math.min(...boxes.map((a) => a.x));
+  const y0 = Math.min(...boxes.map((a) => a.y));
+  const x1 = Math.max(...boxes.map((a) => a.x + a.w));
+  const y1 = Math.max(...boxes.map((a) => a.y + a.h));
+  const pad = Math.max(x1 - x0, y1 - y0) * SELECTION_PAD;
+  return `${x0 - pad} ${y0 - pad} ${x1 - x0 + pad * 2} ${y1 - y0 + pad * 2}`;
+});
+
+/* `selection` is the whole of the difference: the same list, filtered to what was highlighted. The
+   fallback matches the viewBox's — with nothing selected there is nothing to draw, and an empty map
+   reads as a broken component rather than as an empty state. */
+const drawn = computed(() =>
+  (props.fit === 'selection' && selected.value.size > 0 ? areas.filter((a) => selected.value.has(a.code)) : areas));
+
+/*
+  ★ THE LEGEND IS A GRADED STRIP, NOT A ROW OF BULLETS. ChartFrame's legend keys a CATEGORICAL
+  series — one bullet per name, unordered, because the colours mean "different". A ramp means
+  "more", and its key has to show the order: five swatches in sequence, labelled at the ends only.
+  Bulleting the five steps with five numbers would ask a room to match hues to values one at a
+  time, which is the reading a ramp exists to avoid.
+
+  Drawn only when both ends are named. A one-ended scale is not a scale, and a legend under a map
+  with no shaded borough in it keys nothing.
+*/
+const legendSteps = Array.from({ length: SHADE_STEPS }, (_, i) => i + 1);
+/*
+  ★ WHICH KEY IS DRAWN IS READ OFF THE HIGHLIGHTS, NOT OFF A PROP. The map already knows which
+  instrument it was handed; asking the caller to say so a second time is a second place for the two
+  to disagree, and the failure is silent — a categorical map under a graded strip.
+*/
+const isCategorical = computed(() => props.highlight.some((h) => typeof h !== 'string' && h?.series != null));
+const showRamp = computed(() => !isCategorical.value && props.legend.length === 2);
+const showKeys = computed(() => isCategorical.value && props.legend.length > 0);
+/* Paired with the labels in order, so the third label keys --deck-series-3. */
+const keys = computed(() => props.legend.map((name, i) => ({ name, fill: `var(--deck-series-${step(i + 1, SERIES_STEPS)})` })));
+
+const style = computed(() => ({ '--london-map-width': `${props.width}px` }));
+</script>
+
+<template>
+  <div class="london-map-figure" :style="style">
+  <svg
+    class="london-map"
+    :viewBox="viewBox"
+    :role="label ? 'img' : undefined"
+    :aria-label="label || undefined"
+    :aria-hidden="label ? undefined : 'true'"
+  >
+    <path
+      v-for="area in drawn"
+      :key="area.code"
+      :d="area.d"
+      class="london-map-area"
+      :class="{ 'is-highlight': fills.has(area.code) }"
+      :style="fills.get(area.code) ? { fill: fills.get(area.code) } : undefined"
+      vector-effect="non-scaling-stroke"
+    />
+  </svg>
+    <!--
+      One label per colour, in ChartFrame's own markup rather than a list of its own: a map key and a
+      chart key are the same object on the same slide, and the two should be one shape.
+
+      ⚠ SPANS, NOT `ul`/`li`, AND THAT IS NOT A STYLE PREFERENCE. Drawn as a list it inherited the
+      deck's own slide bullet — base.css paints `.slidev-layout ul > li::before` with a background,
+      which `list-style: none` cannot touch — so every key rendered with two dots: the deck's, then
+      the one naming the colour. A key is a row of labels, not a list of prose.
+    -->
+    <div v-if="showKeys" class="london-map-keys">
+      <span v-for="key in keys" :key="key.name" class="london-map-key">
+        <span class="london-map-key-dot" :style="{ background: key.fill }" />
+        {{ key.name }}
+      </span>
+    </div>
+    <div v-else-if="showRamp" class="london-map-legend">
+      <span class="london-map-legend-end">{{ legend[0] }}</span>
+      <span class="london-map-ramp" aria-hidden="true">
+        <span
+          v-for="step in legendSteps"
+          :key="step"
+          class="london-map-swatch"
+          :style="{ background: `var(--deck-shade-${step})` }"
+        />
+      </span>
+      <span class="london-map-legend-end">{{ legend[1] }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/*
+  Sized on WIDTH, the DottedMap rule, not BoroughShape's height ladder: this is a landscape figure
+  whose aspect is fixed by the projection, and a slide budgets it across the column it sits in.
+  The width lands as an inline custom property for the reason BoroughShape's height does — a scoped
+  rule is 0-2-0 and outranks any utility class, so a class-based width would be silently inert.
+*/
+/*
+  ⚠ THE WIDTH SIZES THE MAP, NOT THE FIGURE, and the difference is what the key looks like. With it
+  on the wrapper the categorical key inherited the map's width — 480 on the status slides — and three
+  labels at the body-sm tier wrapped to three rows, so a legend rendered as a LIST. The figure takes
+  the column; the drawing takes `width`; the key gets the column's own measure and fits on one row.
+*/
+.london-map-figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--deck-space-3);
+  width: 100%;
+}
+/* ★ CENTRED IN WHATEVER BOX IT IS GIVEN, now that the figure takes the column rather than the map's
+   own width: a drawing narrower than its cell reads as misplaced against a key that spans the whole
+   of it. The ramp legend below centres with it, because a graded strip keys the map by sitting
+   directly under it. */
+.london-map {
+  display: block;
+  width: var(--london-map-width, 900px);
+  max-width: 100%;
+  height: auto;
+  margin-inline: auto;
+}
+/* ★ THE RAMP KEEPS THE MAP'S OWN WIDTH, unlike the categorical key above. A graded strip is read
+   AGAINST the thing it keys — its five steps are the five fills on the map — so it spans the drawing
+   rather than the column. A bulleted key names colours one at a time and needs no such alignment. */
+.london-map-legend {
+  width: var(--london-map-width, 900px);
+  max-width: 100%;
+  margin-inline: auto;
+}
+/* The label tier ChartFrame's legend uses, so a map key and a chart key read as the same furniture. */
+.london-map-legend {
+  display: flex;
+  align-items: center;
+  gap: var(--deck-space-3);
+  font-size: var(--type-deck-body-sm-size);
+  line-height: var(--type-deck-body-sm-line-height);
+  color: var(--deck-fg);
+}
+/* The strip takes the space the two end labels do not, so the key spans the map's own width and a
+   room reads the ramp at the same scale as the thing it keys. */
+.london-map-ramp {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  height: var(--deck-space-4);
+  border-radius: var(--deck-radius-item);
+  overflow: hidden;
+}
+.london-map-swatch { flex: 1; }
+/*
+  The categorical key: ChartFrame's `.deck-chart-legend` shape, redrawn here because scoped CSS
+  cannot be shared. Same tier, same bullet, same gaps — a map key and a chart key on one slide are
+  the same furniture, and the alternative (a legend component of its own) is five gate edits for
+  twelve lines of flexbox.
+*/
+.london-map-keys {
+  display: flex;
+  flex-wrap: wrap;
+  /*
+    ⚠ CENTRED ON THE DRAWING, WHICH IS NOT THE SAME AS SPANNING IT. The note above says a bulleted
+    key needs no width alignment with the map, and that stands — but this box is the figure's full
+    width while the `<svg>` inside it is centred by its own `margin-inline: auto`, so left-packed
+    items sat off the map's axis. Measured on the two-map status slide: the key's content ran
+    96-857 against a drawing centred on 513, a 37px offset — small enough to read as a mistake
+    rather than as a choice, which is the worst distance to be off by.
+  */
+  justify-content: center;
+  gap: var(--deck-space-3) var(--deck-space-5);
+  font-size: var(--type-deck-body-sm-size);
+  line-height: var(--type-deck-body-sm-line-height);
+  color: var(--deck-fg);
+}
+.london-map-key {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--deck-space-2);
+}
+/* 0.6em, ChartFrame's own number: a real disc at reading distance rather than the 9px speck the
+   chart libraries ship. In em so it tracks the label's tier rather than a space step. */
+.london-map-key-dot {
+  width: 0.6em;
+  height: 0.6em;
+  border-radius: var(--deck-radius-full);
+  flex: none;
+}
+.london-map-legend-end { white-space: nowrap; }
+.london-map-area {
+  fill: var(--deck-dot-land);
+  stroke: var(--deck-bg);
+  stroke-width: 2;
+}
+.london-map-area.is-highlight {
+  fill: var(--deck-accent);
+}
+</style>

package/components/MarkPair.vue

@@ -0,0 +1,109 @@
+<!--
+  Forest's mark, and a partner's beside it at the same height.
+
+  ★★ THIS EXISTS BECAUSE THE PAIR WAS DRAWN THREE TIMES AND THE THIRD ONE WAS WRONG. slide-top.vue
+  drew it for the running chrome, cover.vue drew it again in the inset's corner, and the poster drew
+  it a third time at 120px — where it inherited the chrome's FIXED numbers (`--deck-mark-radius`
+  15.75px, `--deck-mark-ring-width` 3px, both computed for a 72px mark) and came out with a corner
+  and a ring meant for a tile 40% smaller. Jose caught it on the slide: "why are you not using the
+  fucking width of the same as the mark!!! and rounded corners!!!"
+
+  So the geometry is a RATIO of the tile here, never a px token:
+
+    ring   19       / 434.82 = 4.3696%  of the tile
+    corner 95.0854  / 434.82 = 21.8678% of the tile
+    gap    the chrome's own pair gap, as a fraction of the chrome's own mark
+
+  At the chrome's 72 those give 3.15 / 15.75 / 16 — the tokens the chrome already ships, to within a
+  seventh of a pixel. At any other size they follow, which is the whole point: `<Logo variant="mark">`
+  scales its artwork, and a partner's tile beside it has to scale the same way or the two stop being
+  one object.
+
+  ⚠ `cover`, NOT `contain`. Whatever the source is — an app icon, an avatar, a photograph, a wide
+  wordmark — it is COVERED into a mark-sized square and clipped to the mark's own corner, so the pair
+  reads as two marks of one family. Contain letterboxes a non-square source and puts back the ragged
+  silhouette the clip exists to remove. Jose's own rule: "the other logo should be anything (an
+  avatar or whatever), but the second one should be a rounded square like the mark".
+
+  ★ THE RING IS `currentColor`, because Logo.vue fills the mark's own ring path with `currentColor`.
+  An image has no artwork to carry an edge, so this draws one — and drawn in the inherited ink it
+  turns over with the register exactly as the mark's does, on any ground, without this file knowing
+  which register it is in. Only the WIDTH is a number: the artwork's ring is a shape, not a stroke.
+-->
+<script setup>
+import { computed } from 'vue';
+import { MARK_SIZE, MARK_CORNER, MARK_RING } from '@humanforest/tokens/logo';
+import deckTokens from '@humanforest/tokens/deck/deck.json';
+import { assetUrl } from '../assetUrl.js';
+
+const props = defineProps({
+  /** The partner's artwork. With none, this is just the Forest mark — which is what the running chrome draws on a slide with no `companion:`. */
+  src: { type: String, default: '' },
+  /** Alt text for the partner's mark. Deliberately vague by default: naming the partner is the author's job, via `companionName`. */
+  label: { type: String, default: 'Companion mark' },
+  /** Height of BOTH tiles in px. Everything else — corner, ring, gap — is a ratio of it. */
+  size: { type: Number, default: deckTokens.chrome.markPx },
+});
+
+/* The chrome's gap expressed as a fraction of the chrome's mark, so the pair keeps its proportions
+   at the poster's scale instead of holding a 16px gap between two 120px tiles. */
+const GAP_RATIO = deckTokens.chrome.pairGapPx / deckTokens.chrome.markPx;
+
+const style = computed(() => ({
+  '--pair-tile': `${props.size}px`,
+  '--pair-radius': `${props.size * (MARK_CORNER / MARK_SIZE)}px`,
+  '--pair-ring': `${props.size * (MARK_RING / MARK_SIZE)}px`,
+  '--pair-gap': `${props.size * GAP_RATIO}px`,
+}));
+</script>
+
+<template>
+  <div class="mark-pair" :style="style">
+    <!-- Forest first, always — FSubLogo's rule for a pair, and the order the running chrome signs in. -->
+    <Logo variant="mark" :size="size" />
+    <img v-if="src" class="mark-pair-companion" :src="assetUrl(src)" :alt="label">
+  </div>
+</template>
+
+<style scoped>
+.mark-pair {
+  display: flex;
+  align-items: center;
+  gap: var(--pair-gap);
+}
+/*
+  `flex: none` on both halves for the reason Logo.vue records at length: a masked wordmark has no
+  intrinsic size and absorbs any shortfall on its own, and a partner's artwork is never ours to
+  squash. It overflows instead, which is loud and catchable.
+*/
+.mark-pair > :deep(*) { flex: none; }
+.mark-pair-companion {
+  flex: none;
+  width: var(--pair-tile);
+  height: var(--pair-tile);
+  object-fit: cover;
+  object-position: center;
+  border-radius: var(--pair-radius);
+  /*
+    ★★ AN OUTLINE PULLED INWARD, NOT A BORDER — and the difference is a hairline Jose could see.
+    A border shrinks the CONTENT box, so the artwork is clipped to the padding box while the tile's
+    own background paints underneath it. The ring is a ratio of the tile, so its width is fractional
+    (3.15px at 72, 5.24 at 120), the padding-box edge lands mid-pixel, and the surface shows through
+    that seam as a pale line all the way round — cream between a black ring and a navy mark.
+
+    `outline` with a negative offset paints the same ring OVER the image instead: the picture fills
+    the whole box, the ring covers its outer edge, and there is no seam left to leak through. The
+    radius follows the element's own, so the two curves stay concentric.
+
+    ⚠ The background stays: a partner's artwork is often a shape on transparency, and the clipped
+    corners would otherwise hold nothing. It is simply no longer between the ring and the picture.
+  */
+  outline: var(--pair-ring) solid currentColor;
+  outline-offset: calc(-1 * var(--pair-ring));
+  box-sizing: border-box;
+  /* A companion's artwork is often a shape on transparency, and the clipped corners would otherwise
+     hold nothing. The surface, not the ground: the tile is an object on the slide, not a hole in it. */
+  background: var(--deck-surface);
+  display: block;
+}
+</style>