@picked/svelte 0.0.1-dev.1789541668638 → 0.0.1-dev.1793753513002

package/dist/plugins/devtools/review/journey/JourneyMap.svelte

@@ -0,0 +1,1076 @@
+<script lang="ts">
+  /**
+   * @file The journey drawn as a tree — the Developer group's experience tree, in plain English.
+   *
+   * `derive/journey-tree` does the thinking: the graph-to-tree walk and the tidy layout. This file
+   * owns nothing but pan, zoom and selection, which is why the layout is testable and this is not.
+   * The look follows the experience tree: left to right, a coloured dot per node (grey start, blue
+   * screen, amber decision, sky-blue for a branch that rejoins), curved links, a decision's arms
+   * green and red, and each label above its dot — below it at the end of a branch.
+   *
+   * NODES ARE HTML, LINKS ARE SVG. A node is a real `<button>` holding its dot and label,
+   * positioned so the dot's centre sits on the layout point. That buys focus rings, line clamping
+   * and the design tokens, and the shared CSS transform keeps the two layers locked together.
+   *
+   * ZOOM KEEPS THE POINT UNDER THE CURSOR STILL, and the wheel handler must `preventDefault` — the
+   * map lives inside a scrolling panel body, and without it a zoom gesture scrolls the panel away.
+   *
+   * A REJOIN keeps the tree a tree: the later branch ends on a `↩` leaf, and a DASHED line runs
+   * from that leaf to the node drawn in full, so the route still reads as one. Clicking any node
+   * opens a POP-OUT beside it — what it is, where its arms go, its rule, and the one action it
+   * offers — so the reviewer never scrolls away from the map to read about it.
+   *
+   * ACTIONS ARE NOT DRAWN. A route runs straight across them, and where a branch hands off to one
+   * and stops, the pop-out names it on the node before.
+   */
+  import type { TreeLayout, TreeNode, TreeNodeKind } from '../../derive'
+
+  interface JourneyMapProps {
+    layout: TreeLayout
+    /** Whether a screen may be jumped to at all — the posture, and whether this journey is open. */
+    canNavigate: boolean
+    onJump: (stepKey: string) => void
+  }
+
+  const { layout, canNavigate, onJump }: JourneyMapProps = $props()
+
+  const MIN_SCALE = 0.1
+  const MAX_SCALE = 3
+  const ZOOM_STEP = 1.2
+  /** Below this, a whole tree is too small to read, so the map opens on its start instead. */
+  const LEGIBLE_SCALE = 0.55
+  /** How far a press may travel and still count as a click rather than a drag. */
+  const DRAG_THRESHOLD = 4
+  /** How close to the viewport's edge a focused node may sit before the map re-centres on it. */
+  const FOCUS_MARGIN = 96
+
+  /** The pop-out's width, and its gap from the dot and from the viewport's edges. */
+  const POP_WIDTH = 320
+  const POP_GAP = 24
+  const POP_EDGE = 8
+
+  const KIND_LABELS: Record<TreeNodeKind, string> = {
+    start: 'Start',
+    screen: 'Screen',
+    decision: 'Decision',
+    system: 'Behind the scenes',
+    journey: 'Opens another journey',
+  }
+
+  let viewport: HTMLDivElement | undefined = $state()
+  let scale = $state(1)
+  let offsetX = $state(0)
+  let offsetY = $state(0)
+  let selected = $state<string | null>(null)
+  let panning = $state(false)
+  let viewWidth = $state(0)
+  let viewHeight = $state(0)
+  let popHeight = $state(0)
+
+  let origin = { x: 0, y: 0, offsetX: 0, offsetY: 0 }
+  /** A press on the background that never became a drag is a click, and closes the pop-out. */
+  let dragged = false
+
+  const selectedNode = $derived(layout.nodes.find((node) => node.id === selected) ?? null)
+  const nodeById = $derived(new Map(layout.nodes.map((node) => [node.id, node])))
+
+  /** Where a decision's arms lead — a sentence the reviewer would otherwise trace by eye. */
+  const arms = $derived(
+    selectedNode === null || selectedNode.kind !== 'decision'
+      ? []
+      : layout.links
+          .filter((link) => link.from === selectedNode.id && link.label !== null)
+          .map((link) => ({
+            id: link.id,
+            label: link.label,
+            arm: link.arm,
+            to: nodeById.get(link.to)?.label ?? '',
+          })),
+  )
+
+  /**
+   * Holds a value between two bounds.
+   *
+   * @param {number} value - The value to hold.
+   * @param {number} low - The lowest it may be.
+   * @param {number} high - The highest it may be.
+   * @returns {number} The value, moved inside the bounds.
+   * @example
+   * clamp(5, 0, 3) // 3
+   */
+  function clamp(value: number, low: number, high: number): number {
+    return Math.min(Math.max(value, low), high)
+  }
+
+  /**
+   * The pop-out sits beside its dot — to the right, or to the left when the right would run off the
+   * map — and is held inside the viewport top to bottom. It keeps clear of the node's own label: a
+   * label above its dot leaves the pop-out starting level with the dot, a label below it (the end of
+   * a branch) leaves the pop-out ending there. Recomputed from the live pan and zoom, so it travels
+   * with its node.
+   */
+  const popover = $derived.by(() => {
+    if (selectedNode === null) return null
+
+    const dotX = selectedNode.x * scale + offsetX
+    const dotY = selectedNode.y * scale + offsetY
+    const right = dotX + POP_GAP
+    const fitsRight = right + POP_WIDTH <= viewWidth - POP_EDGE
+    const left = fitsRight ? right : dotX - POP_GAP - POP_WIDTH
+    const top = selectedNode.leaf ? dotY + POP_EDGE - popHeight : dotY - POP_EDGE
+
+    return {
+      left: clamp(left, POP_EDGE, Math.max(POP_EDGE, viewWidth - POP_WIDTH - POP_EDGE)),
+      top: clamp(top, POP_EDGE, Math.max(POP_EDGE, viewHeight - popHeight - POP_EDGE)),
+    }
+  })
+
+  /**
+   * Whether a dashed jump lights up: either of its ends is the node the reviewer is looking at.
+   *
+   * @param {string} from - The jump's reference leaf.
+   * @param {string} to - The node drawn in full.
+   * @returns {boolean} True when either end is selected.
+   * @example
+   * jumpActive(jump.from, jump.to)
+   */
+  function jumpActive(from: string, to: string): boolean {
+    return selected !== null && (selected === from || selected === to)
+  }
+
+  /**
+   * Whether a node can take the visitor back to its screen.
+   *
+   * @param {TreeNode} node - The node to test.
+   * @returns {boolean} True for a visited screen in the open journey, when the posture allows it.
+   * @example
+   * canJump(node)
+   */
+  function canJump(node: TreeNode): boolean {
+    return (
+      node.kind === 'screen' && node.state === 'visited' && node.stepKey !== null && canNavigate
+    )
+  }
+
+  /**
+   * Brings a canvas point to the middle of the viewport at the current scale.
+   *
+   * @param {number} x - The point's canvas x.
+   * @param {number} y - The point's canvas y.
+   * @example
+   * centreOn(node.x, node.y)
+   */
+  function centreOn(x: number, y: number): void {
+    if (viewport === undefined) return
+    const box = viewport.getBoundingClientRect()
+    offsetX = box.width / 2 - x * scale
+    offsetY = box.height / 2 - y * scale
+  }
+
+  /**
+   * Frames the map. The visitor's own screen when this is the open journey — "where am I" is what
+   * the tab is for. Otherwise the whole tree when it fits legibly, and when it does not, the start,
+   * held at the left edge and centred top to bottom, so the tree reads left to right from its first
+   * node.
+   *
+   * @example
+   * fit()
+   */
+  function fit(): void {
+    const start = layout.nodes.at(0)
+    if (viewport === undefined || start === undefined) return
+
+    const box = viewport.getBoundingClientRect()
+    const here = layout.nodes.find((node) => node.state === 'current')
+    if (here !== undefined) {
+      scale = 1
+      centreOn(here.x, here.y)
+      return
+    }
+
+    const whole = Math.min(box.width / layout.width, box.height / layout.height)
+    if (whole >= LEGIBLE_SCALE) {
+      scale = Math.min(whole, 1)
+      offsetX = (box.width - layout.width * scale) / 2
+      offsetY = (box.height - layout.height * scale) / 2
+      return
+    }
+
+    // The layout already leaves half a label's width left of the start, so the canvas edge goes on
+    // the viewport edge.
+    scale = 0.85
+    offsetX = 0
+    offsetY = box.height / 2 - start.y * scale
+  }
+
+  /**
+   * Zooms about a point in VIEWPORT coordinates, holding whatever sits under it still.
+   *
+   * @param {number} pointX - The point's x within the viewport.
+   * @param {number} pointY - The point's y within the viewport.
+   * @param {number} factor - How much to scale by; above 1 zooms in.
+   * @example
+   * zoomAbout(120, 80, 1.2)
+   */
+  function zoomAbout(pointX: number, pointY: number, factor: number): void {
+    const next = clamp(scale * factor, MIN_SCALE, MAX_SCALE)
+    if (next === scale) return
+
+    const ratio = next / scale
+    offsetX = pointX - (pointX - offsetX) * ratio
+    offsetY = pointY - (pointY - offsetY) * ratio
+    scale = next
+  }
+
+  /**
+   * Zooms about the middle of the viewport, which is where the eye already is.
+   *
+   * @param {number} factor - How much to scale by; above 1 zooms in.
+   * @example
+   * zoomByButton(ZOOM_STEP)
+   */
+  function zoomByButton(factor: number): void {
+    if (viewport === undefined) return
+    const box = viewport.getBoundingClientRect()
+    zoomAbout(box.width / 2, box.height / 2, factor)
+  }
+
+  /**
+   * Whether an event happened inside the pop-out.
+   *
+   * @param {EventTarget | null} target - The event's target.
+   * @returns {boolean} True inside the pop-out.
+   * @example
+   * inPopover(event.target)
+   */
+  function inPopover(target: EventTarget | null): boolean {
+    return target instanceof Element && target.closest('.popover') !== null
+  }
+
+  /**
+   * Zooms on the wheel. Over the pop-out, the wheel scrolls its rule instead.
+   *
+   * @param {WheelEvent} event - The wheel event.
+   * @example
+   * onWheel(event)
+   */
+  function onWheel(event: WheelEvent): void {
+    if (viewport === undefined || inPopover(event.target)) return
+    event.preventDefault()
+
+    const box = viewport.getBoundingClientRect()
+    zoomAbout(
+      event.clientX - box.left,
+      event.clientY - box.top,
+      event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP,
+    )
+  }
+
+  /**
+   * Starts a pan from a press on the background.
+   *
+   * @param {PointerEvent} event - The pointer event.
+   * @example
+   * onPointerDown(event)
+   */
+  function onPointerDown(event: PointerEvent): void {
+    // A press that lands on a node is that node's to handle — panning from it would swallow the click.
+    if (event.target instanceof Element && event.target.closest('button') !== null) return
+    if (inPopover(event.target)) return
+
+    panning = true
+    dragged = false
+    origin = { x: event.clientX, y: event.clientY, offsetX, offsetY }
+
+    // Captured so a drag that leaves the panel still tracks, and still ends, on this element.
+    if (event.currentTarget instanceof Element) {
+      event.currentTarget.setPointerCapture(event.pointerId)
+    }
+  }
+
+  /**
+   * Moves the map with the pointer while panning.
+   *
+   * @param {PointerEvent} event - The pointer event.
+   * @example
+   * onPointerMove(event)
+   */
+  function onPointerMove(event: PointerEvent): void {
+    if (!panning) return
+    const travel = Math.abs(event.clientX - origin.x) + Math.abs(event.clientY - origin.y)
+    if (travel > DRAG_THRESHOLD) dragged = true
+    offsetX = origin.offsetX + (event.clientX - origin.x)
+    offsetY = origin.offsetY + (event.clientY - origin.y)
+  }
+
+  /**
+   * Ends a pan. A press that never moved was a click on the background, and closes the pop-out.
+   *
+   * @example
+   * endPan()
+   */
+  function endPan(): void {
+    if (panning && !dragged) selected = null
+    panning = false
+  }
+
+  /**
+   * Opens a node's pop-out; a second click on the same node closes it. A click never jumps.
+   *
+   * @param {TreeNode} node - The node clicked.
+   * @example
+   * activate(node)
+   */
+  function activate(node: TreeNode): void {
+    selected = selected === node.id ? null : node.id
+  }
+
+  /**
+   * Moves the open journey back to a node's screen.
+   *
+   * @param {TreeNode} node - A visited screen.
+   * @example
+   * goBack(node)
+   */
+  function goBack(node: TreeNode): void {
+    if (canJump(node) && node.stepKey !== null) onJump(node.stepKey)
+  }
+
+  /**
+   * Closes the pop-out on Escape, and only that — the panel itself stays open.
+   *
+   * @param {KeyboardEvent} event - The key event.
+   * @example
+   * onMapKeydown(event)
+   */
+  function onMapKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Escape' || selected === null) return
+    event.stopPropagation()
+    selected = null
+  }
+
+  /**
+   * Selects and centres the node a rejoin refers to. A rejoin is drawn in full on its first branch
+   * only.
+   *
+   * @param {TreeNode} node - The `↩` reference leaf.
+   * @example
+   * showDrawn(node)
+   */
+  function showDrawn(node: TreeNode): void {
+    const drawn = layout.nodes.find((entry) => entry.nodeId === node.nodeId && !entry.reference)
+    if (drawn === undefined) return
+    selected = drawn.id
+    centreOn(drawn.x, drawn.y)
+  }
+
+  /**
+   * Keeps a node reachable by keyboard. Tabbing moves focus in tree order, which walks straight off
+   * the visible area, so whatever gains focus is brought back into view.
+   *
+   * @param {TreeNode} node - The node that gained focus.
+   * @example
+   * onNodeFocus(node)
+   */
+  function onNodeFocus(node: TreeNode): void {
+    if (viewport === undefined) return
+
+    const box = viewport.getBoundingClientRect()
+    const left = node.x * scale + offsetX
+    const top = node.y * scale + offsetY
+    const outside =
+      left < FOCUS_MARGIN ||
+      left > box.width - FOCUS_MARGIN ||
+      top < FOCUS_MARGIN ||
+      top > box.height - FOCUS_MARGIN
+
+    if (outside) centreOn(node.x, node.y)
+  }
+
+  // Fit whenever a DIFFERENT tree arrives. Keyed on the layout's own shape rather than on object
+  // identity: the panel rebuilds the layout every time a batch of fields lands, and re-fitting on
+  // each one would yank the map out from under a reviewer who had just panned somewhere. The current
+  // step is part of the key on purpose: when the visitor moves on, the map follows them.
+  //
+  // The last-fitted shape is a plain variable, not `$state` — writing it here must not re-run the
+  // effect that writes it.
+  const shape = $derived(
+    [
+      layout.nodes.length,
+      layout.width,
+      layout.height,
+      layout.nodes.find((node) => node.state === 'current')?.id ?? '',
+    ].join(':'),
+  )
+  let fitted = ''
+
+  $effect(() => {
+    if (shape === fitted) return
+    fitted = shape
+    fit()
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="map" onkeydown={onMapKeydown}>
+  <div class="toolbar">
+    <button type="button" onclick={() => zoomByButton(ZOOM_STEP)}>Zoom in</button>
+    <button type="button" onclick={() => zoomByButton(1 / ZOOM_STEP)}>Zoom out</button>
+    <button type="button" onclick={fit}>Reset</button>
+    <span class="zoom" aria-live="polite">{Math.round(scale * 100)}%</span>
+  </div>
+
+  <!--
+    A pan surface, not a control: it has no role and no tab stop because everything it does is also
+    reachable another way — the zoom buttons, and focus-follows for the nodes. Adding a tab stop here
+    would put an announced-but-empty element in front of every node.
+  -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="viewport"
+    class:panning
+    bind:this={viewport}
+    bind:clientWidth={viewWidth}
+    bind:clientHeight={viewHeight}
+    data-testid="devtools-journey-map"
+    onwheel={onWheel}
+    onpointerdown={onPointerDown}
+    onpointermove={onPointerMove}
+    onpointerup={endPan}
+    onpointercancel={endPan}
+  >
+    <div
+      class="canvas"
+      style:--x="{offsetX}px"
+      style:--y="{offsetY}px"
+      style:--k={scale}
+      style:--w="{layout.width}px"
+      style:--h="{layout.height}px"
+    >
+      <svg class="links" width={layout.width} height={layout.height} aria-hidden="true">
+        <!-- Under the links, so a jump never paints over the tree it is threading through. -->
+        {#each layout.jumps as jump (jump.id)}
+          <path
+            class="jump"
+            class:back={jump.back}
+            class:active={jumpActive(jump.from, jump.to)}
+            d={jump.path}
+          />
+        {/each}
+        {#each layout.links as link (link.id)}
+          <path
+            class="link arm-{link.arm ?? 'none'}"
+            class:travelled={link.travelled}
+            d={link.path}
+          />
+        {/each}
+        {#each layout.links as link (link.id)}
+          {#if link.label !== null}
+            <text class="link-label arm-{link.arm ?? 'none'}" x={link.labelX} y={link.labelY}
+              >{link.label}</text
+            >
+          {/if}
+        {/each}
+      </svg>
+
+      {#each layout.nodes as node (node.id)}
+        <button
+          type="button"
+          class="node kind-{node.kind} state-{node.state}"
+          class:leaf={node.leaf}
+          class:reference={node.reference}
+          class:jumpable={canJump(node)}
+          class:selected={selected === node.id}
+          style:--nx="{node.x}px"
+          style:--ny="{node.y}px"
+          title={node.reference ? `Rejoins ${node.label}` : node.label}
+          data-testid={node.kind === 'screen' && !node.reference
+            ? 'devtools-journey-screen'
+            : undefined}
+          onclick={() => activate(node)}
+          onfocus={() => onNodeFocus(node)}
+        >
+          <span class="label">
+            {node.reference ? `↩ ${node.label}` : node.label}
+            {#if node.state === 'current' && !node.reference}
+              <span class="here">You are here</span>
+            {:else if canJump(node)}
+              <span class="go-back">Go back</span>
+            {/if}
+          </span>
+          <span class="dot" aria-hidden="true"></span>
+        </button>
+      {/each}
+    </div>
+
+    {#if selectedNode !== null && popover !== null}
+      <div
+        class="popover"
+        role="dialog"
+        aria-label={selectedNode.label}
+        style:--left="{popover.left}px"
+        style:--top="{popover.top}px"
+        style:--width="{POP_WIDTH}px"
+        bind:offsetHeight={popHeight}
+        data-testid="devtools-journey-popover"
+      >
+        <div class="pop-head">
+          <span class="key kind-{selectedNode.kind}" class:reference={selectedNode.reference}
+          ></span>
+          <span class="pop-kind">
+            {selectedNode.reference ? 'Rejoins an earlier branch' : KIND_LABELS[selectedNode.kind]}
+          </span>
+          <button
+            type="button"
+            class="pop-close"
+            aria-label="Close"
+            onclick={() => (selected = null)}>×</button
+          >
+        </div>
+
+        <p class="pop-title">{selectedNode.label}</p>
+
+        {#if selectedNode.state === 'current' && !selectedNode.reference}
+          <p class="pop-state">You are here</p>
+        {:else if selectedNode.state === 'visited'}
+          <p class="pop-state">On the route taken this session</p>
+        {/if}
+
+        {#if selectedNode.detail !== null}
+          <code class="pop-key">{selectedNode.detail}</code>
+        {/if}
+
+        {#if selectedNode.reference}
+          <p class="pop-text">
+            This route joins {selectedNode.label}, which is drawn in full on an earlier branch. The
+            dashed line shows the way.
+          </p>
+        {/if}
+
+        {#if selectedNode.ends.length > 0}
+          <ul class="pop-arms">
+            {#each selectedNode.ends as end (end.key)}
+              <li>
+                {#if end.armLabel !== null}
+                  <span class="arm-name arm-{end.arm ?? 'none'}">{end.armLabel}</span>
+                {/if}
+                <span>Ends: {end.label} (behind the scenes)</span>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+
+        {#if arms.length > 0}
+          <ul class="pop-arms">
+            {#each arms as arm (arm.id)}
+              <li>
+                <span class="arm-name arm-{arm.arm ?? 'none'}">{arm.label}</span>
+                <span>→ {arm.to}</span>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+
+        {#if selectedNode.rule !== null}
+          <!-- The sentence is lossy by design; the verbatim rule is what makes that safe. -->
+          <pre class="pop-rule">{selectedNode.rule}</pre>
+        {/if}
+
+        {#if selectedNode.reference}
+          <button type="button" class="pop-action" onclick={() => showDrawn(selectedNode)}>
+            Go to node
+          </button>
+        {:else if canJump(selectedNode)}
+          <button type="button" class="pop-action" onclick={() => goBack(selectedNode)}>
+            Go back to this screen
+          </button>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  <p class="legend">
+    <span class="key kind-start"></span> Start
+    <span class="key kind-screen"></span> Screen
+    <span class="key kind-decision"></span> Decision
+    <span class="key kind-journey"></span> Opens another journey
+    <span class="key reference"></span> Rejoins an earlier branch (dashed)
+    <span class="key seen"></span> Seen
+    <span class="key current"></span> You are here
+    {#if layout.truncated}
+      <span class="truncated">· the deepest branches are cut short</span>
+    {/if}
+  </p>
+</div>
+
+<style>
+  .map {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    align-self: flex-end;
+  }
+
+  .toolbar button {
+    padding: var(--space-0-5) var(--space-2);
+    font-family: inherit;
+    font-size: var(--text-xs);
+    color: var(--color-gray-700);
+    background-color: var(--color-white);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+  }
+
+  .toolbar button:hover {
+    background-color: var(--color-gray-50);
+  }
+
+  .toolbar button:focus-visible {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
+  }
+
+  .zoom {
+    min-width: 3.5em;
+    padding: var(--space-0-5) var(--space-2);
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    color: var(--color-gray-600);
+    background-color: var(--color-gray-100);
+    border-radius: var(--radius-full);
+  }
+
+  .viewport {
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+    /* Grows with a panel that is 90% of the viewport: what is left once the panel's header, the
+       view and journey row, the map's toolbar and its legend (about 223px together) have theirs. */
+    height: max(420px, calc(90vh - 223px));
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-white);
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .viewport.panning {
+    cursor: grabbing;
+  }
+
+  .canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--w);
+    height: var(--h);
+    transform: translate(var(--x), var(--y)) scale(var(--k));
+    transform-origin: 0 0;
+  }
+
+  .links {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: visible;
+  }
+
+  /* The experience tree's link colours: slate, and a decision's arms green for Yes and red for
+     Otherwise. */
+  .link {
+    fill: none;
+    stroke: #94a3b8;
+    stroke-width: 2;
+    /* Strokes stay readable at every zoom instead of thinning to nothing with the transform. */
+    vector-effect: non-scaling-stroke;
+  }
+
+  .link.arm-yes {
+    stroke: #10b981;
+  }
+
+  .link.arm-no {
+    stroke: var(--color-red-500);
+  }
+
+  /* The visitor's route, over the arm colour — "you came this way" outranks "this was a Yes". */
+  .link.travelled {
+    stroke: var(--color-blue-600);
+    stroke-width: 3.5;
+  }
+
+  .link-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-anchor: middle;
+    fill: #64748b;
+    paint-order: stroke;
+    stroke: var(--color-white);
+    stroke-width: 3px;
+  }
+
+  .link-label.arm-yes {
+    fill: #10b981;
+  }
+
+  .link-label.arm-no {
+    fill: var(--color-red-500);
+  }
+
+  /*
+   * A node is a column of label then dot, placed so the DOT's centre sits on the layout point: the
+   * box's bottom edge is the dot's bottom, so it is lifted by its full height less one dot radius.
+   * At the end of a branch the column flips — dot then label — and drops by one radius instead.
+   */
+  .node {
+    --r: 10px;
+    position: absolute;
+    left: var(--nx);
+    top: var(--ny);
+    width: 184px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    font-family: inherit;
+    background: none;
+    border: none;
+    cursor: default;
+    transform: translate(-50%, calc(-100% + var(--r)));
+  }
+
+  /* The "you are here" halo reaches 9px past the dot; keep the label clear of it. */
+  .node.state-current {
+    gap: 12px;
+  }
+
+  .node.leaf {
+    flex-direction: column-reverse;
+    transform: translate(-50%, calc(-1 * var(--r)));
+  }
+
+  .node.kind-start {
+    --r: 15px;
+  }
+
+  .node:focus-visible {
+    outline: none;
+  }
+
+  .node:focus-visible .dot {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: 2px;
+  }
+
+  .node.jumpable {
+    cursor: pointer;
+  }
+
+  .label {
+    max-width: 100%;
+    padding: 0 var(--space-1);
+    font-size: 11px;
+    line-height: 1.25;
+    color: #1e293b;
+    text-align: center;
+    border-radius: var(--radius-sm);
+    /* A white halo, so a link passing behind a label never strikes through the words. */
+    background-color: rgb(255 255 255 / 85%);
+    /* Two lines, then an ellipsis; the full name is in the title and in the pop-out. */
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+  }
+
+  .node.selected .label {
+    color: var(--color-blue-700);
+    font-weight: var(--font-semibold);
+  }
+
+  .node.jumpable:hover .label {
+    text-decoration: underline;
+  }
+
+  .reference .label {
+    color: #0369a1;
+    font-style: italic;
+  }
+
+  /* The experience tree's dot colours, with their white rim. */
+  .dot,
+  .key {
+    flex-shrink: 0;
+    border-radius: var(--radius-full);
+    background-color: var(--color-blue-500);
+    box-shadow: 0 0 0 2px var(--color-white);
+  }
+
+  .dot {
+    width: calc(var(--r) * 2);
+    height: calc(var(--r) * 2);
+  }
+
+  .kind-start .dot,
+  .key.kind-start {
+    background-color: var(--color-gray-500);
+  }
+
+  .kind-decision .dot,
+  .key.kind-decision {
+    background-color: #f59e0b;
+  }
+
+  .kind-journey .dot,
+  .key.kind-journey {
+    background-color: #8b5cf6;
+  }
+
+  .reference .dot,
+  .key.reference {
+    background-color: #38bdf8;
+  }
+
+  /* The trail, laid over the type colour: a dark rim for seen, a halo for where the visitor is. */
+  .state-visited .dot,
+  .key.seen {
+    box-shadow:
+      0 0 0 2px var(--color-white),
+      0 0 0 4px var(--color-blue-700);
+  }
+
+  .state-current .dot,
+  .key.current {
+    box-shadow:
+      0 0 0 2px var(--color-white),
+      0 0 0 4px var(--color-blue-700),
+      0 0 0 9px #bfdbfe;
+  }
+
+  .here,
+  .go-back {
+    display: block;
+    font-size: 9px;
+    font-weight: var(--font-medium);
+    color: var(--color-blue-600);
+  }
+
+  .go-back {
+    opacity: 0;
+  }
+
+  .node.jumpable:hover .go-back,
+  .node.jumpable:focus-visible .go-back {
+    opacity: 1;
+  }
+
+  /* The dashed way back from a rejoin, in the rejoin dot's own sky blue. */
+  .jump {
+    fill: none;
+    stroke: #38bdf8;
+    stroke-width: 1.5;
+    stroke-dasharray: 6 5;
+    opacity: 0.75;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .jump.active {
+    stroke: #0284c7;
+    stroke-width: 2.5;
+    opacity: 1;
+  }
+
+  /* `border-box`, so `--width` is the whole pop-out and the placement above holds. */
+  .popover {
+    position: absolute;
+    left: var(--left);
+    top: var(--top);
+    z-index: 2;
+    box-sizing: border-box;
+    width: var(--width);
+    max-height: calc(100% - 16px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    background-color: var(--color-white);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xl);
+    cursor: default;
+    scrollbar-width: thin;
+  }
+
+  .pop-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1-5);
+  }
+
+  .pop-head .key {
+    margin-left: 0;
+  }
+
+  .pop-kind {
+    flex: 1;
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    color: var(--color-gray-500);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .pop-close {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    font-family: inherit;
+    font-size: var(--text-base);
+    line-height: 1;
+    color: var(--color-gray-500);
+    background: none;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+  }
+
+  .pop-close:hover {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-900);
+  }
+
+  .pop-close:focus-visible,
+  .pop-action:focus-visible {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
+  }
+
+  .pop-title {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--font-semibold);
+    color: var(--color-gray-900);
+    overflow-wrap: anywhere;
+  }
+
+  .pop-state {
+    margin: 0;
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    color: var(--color-blue-600);
+  }
+
+  .pop-text {
+    margin: 0;
+    font-size: var(--text-xs);
+    color: var(--color-gray-600);
+  }
+
+  .pop-key,
+  .pop-rule {
+    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+    font-size: 10px;
+    color: var(--color-gray-500);
+  }
+
+  .pop-key {
+    align-self: flex-start;
+    padding: 1px var(--space-1);
+    background-color: var(--color-gray-100);
+    border-radius: var(--radius-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .pop-arms {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--text-xs);
+    color: var(--color-gray-700);
+  }
+
+  .pop-arms li {
+    display: flex;
+    gap: var(--space-1-5);
+  }
+
+  .arm-name {
+    flex-shrink: 0;
+    font-weight: 700;
+  }
+
+  .arm-name.arm-yes {
+    color: #10b981;
+  }
+
+  .arm-name.arm-no {
+    color: var(--color-red-500);
+  }
+
+  .pop-rule {
+    max-height: 180px;
+    margin: 0;
+    padding: var(--space-2);
+    overflow: auto;
+    background-color: var(--color-gray-50);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-md);
+    white-space: pre-wrap;
+  }
+
+  .pop-action {
+    align-self: flex-start;
+    padding: var(--space-1) var(--space-3);
+    font-family: inherit;
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    color: var(--color-white);
+    background-color: var(--color-blue-600);
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+  }
+
+  .pop-action:hover {
+    background-color: var(--color-blue-700);
+  }
+
+  .legend {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-1-5);
+    margin: 0;
+    font-size: var(--text-xs);
+    color: var(--color-gray-500);
+  }
+
+  .key {
+    width: 10px;
+    height: 10px;
+    margin-left: var(--space-1);
+  }
+
+  .key.seen,
+  .key.current {
+    background-color: var(--color-white);
+  }
+
+  .truncated {
+    margin-left: auto;
+  }
+</style>