@motion-proto/live-tokens 0.74.0 → 0.76.0

package/src/editor/skill-atlas/TreeCanvas.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+  import TreeNodeCard from './TreeNodeCard.svelte';
+  import { mergeParallelEdges, withoutChipAnswers } from './edges';
+  import { routeWires, type Box, type Label, type Wire } from './wireLayout';
+  import type { Edge, LineRange, SkillTree, TreeNode } from './types';
+
+  interface Props {
+    tree: SkillTree;
+    /** The selection key: a node id, or `node:chip`. */
+    selected: string | null;
+    onselect: (key: string, label: string, lines: LineRange) => void;
+    onopen: (doc: string) => void;
+  }
+
+  let { tree, selected, onselect, onopen }: Props = $props();
+
+  let edges = $derived(mergeParallelEdges(withoutChipAnswers(tree.edges, tree.nodes)));
+
+  /** The cards of each row, with the tallest stacked answer leaving it so the
+   *  row can reserve room for the label under its fan-out. */
+  let rows = $derived.by(() => {
+    const byRow = new Map<number, TreeNode[]>();
+    for (const node of tree.nodes) {
+      const group = byRow.get(node.row);
+      if (group) group.push(node);
+      else byRow.set(node.row, [node]);
+    }
+    return [...byRow.entries()]
+      .sort((a, b) => a[0] - b[0])
+      .map(([, nodes]) => ({
+        nodes,
+        answerLines: Math.max(
+          0,
+          ...edges
+            .filter((edge) => nodes.some((node) => node.id === edge.from))
+            .map((edge) => (edge.label?.split('\n').length ?? 1) - 1),
+        ),
+      }));
+  });
+
+  // Connectors are measured from the laid-out cards, so they survive wrapping,
+  // theme changes, and the geometry skill moving every radius and padding.
+  let canvas: HTMLElement | undefined = $state();
+  let wires: Wire[] = $state([]);
+  let labels: Label[] = $state([]);
+  let canvasSize = $state({ w: 0, h: 0 });
+
+  function drawWires() {
+    if (!canvas) return;
+    const base = canvas.getBoundingClientRect();
+    canvasSize = { w: base.width, h: base.height };
+    const [selectedNode = '', chipIndex] = selected?.split(':') ?? [];
+    const chip = chipIndex === undefined
+      ? undefined
+      : tree.nodes.find((node) => node.id === selectedNode)?.chips?.[Number(chipIndex)]?.label;
+    // A selected badge lights only the wire that carries its answer; a selected
+    // card lights every wire that touches it.
+    const lit = (edge: Edge) => {
+      if (chip === undefined) return edge.from === selectedNode || edge.to === selectedNode;
+      return edge.from === selectedNode && (edge.answers?.includes(chip) ?? true);
+    };
+
+    const boxes = new Map<string, Box>();
+    for (const node of tree.nodes) {
+      const el = canvas.querySelector(`[data-node="${node.id}"]`);
+      if (!el) continue;
+      const r = el.getBoundingClientRect();
+      boxes.set(node.id, {
+        left: r.left - base.left,
+        right: r.right - base.left,
+        top: r.top - base.top,
+        bottom: r.bottom - base.top,
+        midX: r.left + r.width / 2 - base.left,
+        midY: r.top + r.height / 2 - base.top,
+      });
+    }
+
+    const drawing = routeWires(boxes, edges, lit);
+    // Lit last, so the selected wire paints over the ones it crosses.
+    wires = [...drawing.wires].sort((a, b) => Number(a.lit) - Number(b.lit));
+    labels = [...drawing.labels].sort((a, b) => Number(a.lit) - Number(b.lit));
+  }
+
+  $effect(() => {
+    // Re-read on tab change and on selection (which only relights existing wires).
+    void tree;
+    void selected;
+    const frame = requestAnimationFrame(drawWires);
+    return () => cancelAnimationFrame(frame);
+  });
+
+  $effect(() => {
+    if (!canvas) return;
+    const observer = new ResizeObserver(() => drawWires());
+    observer.observe(canvas);
+    return () => observer.disconnect();
+  });
+</script>
+
+<div class="canvas" bind:this={canvas}>
+  <svg
+    class="wires"
+    viewBox="0 0 {canvasSize.w} {canvasSize.h}"
+    width={canvasSize.w}
+    height={canvasSize.h}
+    aria-hidden="true"
+  >
+    <defs>
+      <marker
+        id="atlas-arrow"
+        viewBox="0 0 10 10"
+        refX="9"
+        refY="5"
+        markerWidth="9"
+        markerHeight="9"
+        markerUnits="userSpaceOnUse"
+        orient="auto"
+      >
+        <path d="M 0 1 L 9 5 L 0 9 z" />
+      </marker>
+    </defs>
+
+    {#each wires as wire, i (i)}
+      <path
+        d={wire.d}
+        class:back={wire.back}
+        class:lit={wire.lit}
+        marker-end={wire.arrow ? 'url(#atlas-arrow)' : undefined}
+      />
+    {/each}
+
+    {#each labels as label, i (i)}
+      <text
+        class="wire-label"
+        class:lit={label.lit}
+        x={label.x}
+        y={label.y}
+        transform={label.rotate ? `rotate(-90 ${label.x} ${label.y})` : undefined}
+        text-anchor="middle"
+        dominant-baseline="central"
+      >
+        {#each label.lines as answer, j (j)}
+          <tspan x={label.x} dy={j === 0 ? `${-(label.lines.length - 1) * 0.6}em` : '1.2em'}>{answer}</tspan>
+        {/each}
+      </text>
+    {/each}
+  </svg>
+
+  <div class="flow">
+    {#each rows as { nodes, answerLines }, i (i)}
+      <div class="row" data-count={nodes.length} style="--n: {nodes.length}; --answer-lines: {answerLines}">
+        {#each nodes as node (node.id)}
+          <TreeNodeCard {node} {selected} {onselect} {onopen} />
+        {/each}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  /* The side padding is the lanes: re-run loops on the left, row-skipping
+     branches on the right. A branch row runs the full width of the flow, so
+     without reserved room a lane would have nowhere to go but over the cards
+     it is routing around. */
+  .canvas {
+    position: relative;
+    padding: var(--space-32) var(--space-64) var(--space-64);
+  }
+
+  .wires {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .wires > path {
+    fill: none;
+    stroke: var(--border-neutral-medium);
+    stroke-width: var(--border-width-2);
+    stroke-linecap: round;
+  }
+
+  .wires > path.lit {
+    stroke: var(--text-accent);
+    stroke-width: var(--border-width-3);
+  }
+
+  /* A re-run loop is a route, not a failure — danger red overstated it. */
+  .wires > path.back {
+    stroke: var(--border-accent-medium);
+    stroke-dasharray: 6 8;
+  }
+
+  .wires > path.back.lit {
+    stroke: var(--text-accent);
+  }
+
+  .wires marker path {
+    fill: context-stroke;
+  }
+
+  /* The halo breaks the wire so the answer reads on its own ground. */
+  .wire-label {
+    font-family: var(--code-font-family);
+    font-size: var(--font-size-sm);
+    fill: var(--text-tertiary);
+    stroke: var(--surface-neutral-lowest);
+    stroke-width: calc(var(--border-width-2) * 3);
+    stroke-linejoin: round;
+    paint-order: stroke;
+  }
+
+  .wire-label.lit {
+    fill: var(--text-accent);
+  }
+
+  .flow {
+    /* Nearly every row holds one node, so the pane's full width would only
+       stretch a card that has nothing to say at its right edge. Capping the
+       track turns the column into a spine and gives the wires somewhere to
+       travel. */
+    --node-w: 24rem;
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-24);
+  }
+
+  /* Sibling branch rows share a column count so a family and its follow-up
+     question stay in the same column when they wrap. */
+  .row {
+    /* A fan only earns a trunk-and-bus while it fits on one line, so branches
+       narrow enough to stay unwrapped are worth more than uniform columns. */
+    --track: 9rem;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--track)), 1fr));
+    gap: var(--space-16);
+    align-items: start;
+    /* The auto margins that centre the row also switch off the flex stretch,
+       so the width has to be asked for rather than inherited. */
+    width: 100%;
+    max-width: calc(var(--n) * var(--node-w) + (var(--n) - 1) * var(--space-16));
+    margin-inline: auto;
+    margin-bottom: calc(var(--answer-lines) * var(--space-20));
+  }
+
+  /* A flat step would spend the same gap on "next" as on "the tree splits
+     here". The extra margin lets a branch announce itself before it is read. */
+  .row:not([data-count='1']) {
+    margin-top: var(--space-32);
+    margin-bottom: calc(var(--space-32) + var(--answer-lines) * var(--space-20));
+  }
+
+  /* Past four, one line would shave the cards past reading; wrap them in pairs
+     and let the connectors fall back to curves. */
+  .row[data-count='5'],
+  .row[data-count='6'],
+  .row[data-count='7'] {
+    --track: 14rem;
+  }
+</style>

package/src/editor/skill-atlas/TreeNodeCard.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import Badge from '../../system/components/Badge.svelte';
   import Button from '../../system/components/Button.svelte';
   import Card from '../../system/components/Card.svelte';
-  import CodeSnippet from '../../system/components/CodeSnippet.svelte';
+  import Tooltip from '../../system/components/Tooltip.svelte';
   import type { LineRange, NodeKind, TreeNode } from './types';
 
   interface Props {
@@ -18,21 +19,36 @@
     step: 'step',
     decide: 'decision',
     cli: 'command',
-    hand: 'hands off',
+    hand: 'handoff',
     gate: 'failure',
     ok: 'pass',
     ref: 'reference',
-    ask: 'question',
-    chipset: 'reference set',
-    done: 'verify',
+    chipset: 'step',
+    done: 'complete',
+  };
+
+  /** The structural rule that puts a node in each kind, as the audit enforces it. */
+  const KIND_MEANING: Record<NodeKind, string> = {
+    trigger: 'The request that starts the skill. Each chart has one, and it summarises what the skill is for.',
+    step: 'One action the skill takes. It has a single continuation.',
+    decide: 'A branch on a fact the skill reads from the request, the report, or a file. Each wire carries the answer that selects it, and there are at least two.',
+    cli: 'A CLI command the skill runs. The wires carry its exit outcomes, or a single continuation when it cannot fail.',
+    hand: 'The chart ends by invoking the named skill.',
+    gate: 'A check that failed. Its one wire returns up the chart to the command that runs again.',
+    ok: 'A check that passed, so the chart continues.',
+    ref: 'A step that reads a references document. The link opens it beside the source.',
+    chipset: 'One action the skill takes. It has a single continuation.',
+    done: 'The chart ends.',
   };
 
   let kindLabel = $derived(node.tag ?? KIND_LABEL[node.kind]);
+  let kindMeaning = $derived(node.tag ? undefined : KIND_MEANING[node.kind]);
+  let meaningOpen = $state(false);
   let cardSelected = $derived(selected === node.id);
   let range = $derived(node.lines ? rangeLabel(node.lines) : '');
 
   function rangeLabel([a, b]: LineRange): string {
-    return a === b ? `line ${a}` : `lines ${a}–${b}`;
+    return a === b ? `Ln ${a}` : `Ln ${a}–${b}`;
   }
 
   function selectSelf() {
@@ -51,13 +67,25 @@
     ></button>
   {/if}
 
-  <Card title={node.title} prose={false}>
-    <div class="meta">
-      <h3 class="kind">
-        {#if node.n}<span class="step-n">{node.n}</span>{/if}{kindLabel}
-      </h3>
-      {#if range}<span class="range">{range}</span>{/if}
-    </div>
+  <Card title={node.title} size="compact" prose={false}>
+    {#snippet aside()}
+      <div class="meta">
+        <Tooltip text={kindMeaning} position="bottom" open={meaningOpen}>
+          <button
+            type="button"
+            class="kind"
+            aria-pressed={meaningOpen}
+            aria-label="{kindLabel}. What this kind of node means"
+            onclick={() => (meaningOpen = !meaningOpen)}
+          >
+            <Badge variant="neutral" size="small">
+              {kindLabel}
+            </Badge>
+          </button>
+        </Tooltip>
+        {#if range}<span class="range">{range}</span>{/if}
+      </div>
+    {/snippet}
 
     {#if node.desc}<p class="desc">{node.desc}</p>{/if}
 
@@ -67,17 +95,14 @@
       </button>
     {/if}
 
-    {#if node.command}
-      <div class="command"><CodeSnippet code={node.command} /></div>
-    {/if}
-
     {#if node.chips}
       <ul class="chips">
         {#each node.chips as chip, i (chip.label)}
           {@const key = `${node.id}:${i}`}
-          <li>
+          <li class:picked={selected === key}>
             <Button
-              variant={selected === key ? 'secondary' : 'outline'}
+              variant="outline"
+              size="small"
               onclick={() => onselect(key, chip.label, chip.lines)}
             >
               {chip.label}
@@ -93,6 +118,9 @@
   .shell {
     position: relative;
     border-radius: var(--card-default-radius);
+    /* Without the blur (below), the shipped 70% lets the wires read through
+       the body. */
+    --card-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 80%, transparent);
   }
 
   /* A transparent overlay makes the whole card the click target without
@@ -110,11 +138,27 @@
 
   /* The package Card clips its title to one line; a node title is the step
      itself, so it has to read whole. */
-  .shell :global(.card-title) {
+  .shell :global(.card.compact .card-title) {
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
     white-space: normal;
     overflow-wrap: anywhere;
   }
 
+  /* The package Card clips to its corners and its backdrop blur makes it a
+     stacking context, which would both clip the kind tooltip and keep the
+     chips under the hit overlay. The header takes the rounding instead. */
+  .shell :global(.card.compact) {
+    overflow: visible;
+    backdrop-filter: none;
+  }
+
+  .shell :global(.card.compact .card-header) {
+    align-items: flex-start;
+    border-radius: calc(var(--card-default-radius) - var(--card-default-border-width))
+      calc(var(--card-default-radius) - var(--card-default-border-width)) 0 0;
+  }
+
   .shell:has(.hit:hover) {
     outline: var(--border-width-1) solid var(--border-accent-medium);
     outline-offset: var(--space-2);
@@ -125,23 +169,30 @@
     outline-offset: var(--space-2);
   }
 
-  /* Chips, the copy button and the reference link sit above the overlay so they
-     stay clickable. */
+  /* Chips and the reference link sit above the overlay so they stay clickable. */
   .chips,
-  .command,
-  .doclink {
+  .doclink,
+  .meta :global(.tooltip-wrapper) {
     position: relative;
     z-index: 2;
   }
 
+  /* A shown tooltip hangs over the row below, whose chips also sit at
+     z-index 2 and come later in the DOM. Hover reveals it without the open
+     class. */
+  .meta :global(.tooltip-wrapper:hover),
+  .meta :global(.tooltip-wrapper.open) {
+    z-index: var(--z-tooltip);
+  }
+
   .doclink {
     max-width: 100%;
-    padding: var(--space-4) var(--space-8);
+    padding: var(--space-2) var(--space-6);
     border: var(--border-width-1) solid var(--border-accent-subtle);
     border-radius: var(--radius-sm);
     background: var(--surface-accent-lower);
     font-family: var(--code-font-family);
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-xs);
     color: var(--text-accent);
     overflow-wrap: break-word;
     text-align: left;
@@ -152,55 +203,87 @@
     background: var(--surface-accent-low);
   }
 
+  /* The title's half-leading pushes its glyphs below the header padding;
+     the badge gets the same offset so the two tops line up. */
   .meta {
     display: flex;
-    align-items: center;
-    gap: var(--space-12);
-    flex-wrap: wrap;
-    margin-bottom: var(--space-12);
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--space-2);
+    padding-top: calc(var(--font-size-md) * (var(--line-height-tight) - 1) / 2);
+    font-size: var(--font-size-xs);
   }
 
   .kind {
+    --badge-neutral-text-font-size: 1em;
+    --badge-neutral-padding: var(--space-2);
+    --badge-neutral-padding-right: var(--space-6);
+    --badge-neutral-padding-left: var(--space-6);
+    display: inline-flex;
     margin: 0;
-    font-family: var(--heading-sm-font-family);
-    font-size: var(--heading-sm-font-size);
-    font-weight: var(--heading-sm-font-weight);
-    line-height: var(--heading-sm-line-height);
-    letter-spacing: var(--heading-sm-letter-spacing);
-    color: var(--text-secondary);
-  }
-
-  .step-n {
-    margin-right: var(--space-8);
-    font-weight: var(--font-weight-bold);
+    padding: 0;
+    font-size: inherit;
+    border: none;
+    background: transparent;
+    cursor: pointer;
   }
 
   .range {
     font-family: var(--code-font-family);
-    font-size: var(--font-size-md);
+    font-size: inherit;
     color: var(--text-tertiary);
   }
 
+  /* The package Tooltip is a one-line hint; a kind's meaning is a sentence
+     or two, so it wraps and hangs from the badge's right edge, which sits at
+     the card's edge. */
+  .meta :global(.tooltip.bottom) {
+    right: 0;
+    left: auto;
+    width: max-content;
+    max-width: 36ch;
+    transform: none;
+    white-space: normal;
+    text-align: left;
+  }
+
+  .meta :global(.tooltip.bottom)::after {
+    right: var(--space-16);
+    left: auto;
+    transform: none;
+  }
+
   .desc {
     margin: 0;
-    font-family: var(--body-md-font-family);
-    font-size: var(--body-md-font-size);
-    font-weight: var(--body-md-font-weight);
-    line-height: var(--body-md-line-height);
-    letter-spacing: var(--body-md-letter-spacing);
+    font-family: var(--body-sm-font-family);
+    font-size: var(--body-sm-font-size);
+    font-weight: var(--body-sm-font-weight);
+    line-height: var(--body-sm-line-height);
+    letter-spacing: var(--body-sm-letter-spacing);
     color: var(--text-secondary);
-  }
-
-  .command {
-    margin-top: var(--space-16);
+    white-space: pre-line;
   }
 
   .chips {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-12);
-    margin: var(--space-20) 0 0;
+    gap: var(--space-8);
+    margin: var(--space-12) 0 0;
     padding: 0;
     list-style: none;
   }
+
+  /* The selected badge takes the lit wire's colour, and its focus ring does
+     too, so a click never shows the browser's blue ring over it. */
+  .chips li.picked {
+    --button-outline-border: var(--text-accent);
+    --button-outline-hover-border: var(--text-accent);
+    --button-outline-text: var(--text-accent);
+    --button-outline-surface: var(--surface-accent-lower);
+  }
+
+  .chips :global(button:focus-visible) {
+    outline: var(--border-width-2) solid var(--text-accent);
+    outline-offset: var(--space-2);
+  }
 </style>

package/src/editor/skill-atlas/edges.ts

@@ -0,0 +1,31 @@
+import type { Edge, TreeNode } from './types';
+
+/** An answer the card already shows as a chip says nothing more on the wire. It
+ *  moves to `answers`, so selecting the chip still lights its wire. */
+export function withoutChipAnswers(edges: Edge[], nodes: TreeNode[]): Edge[] {
+  const chips = new Map(nodes.map((node) => [node.id, new Set((node.chips ?? []).map((chip) => chip.label))]));
+  return edges.map((edge) => {
+    if (!edge.label || !chips.get(edge.from)?.has(edge.label)) return edge;
+    const { label, ...bare } = edge;
+    return { ...bare, answers: [label] };
+  });
+}
+
+/** Several answers can lead to the same next step. Draw their shared wire once. */
+export function mergeParallelEdges(edges: Edge[]): Edge[] {
+  const groups = new Map<string, Edge>();
+  for (const edge of edges) {
+    const key = JSON.stringify([edge.from, edge.to, Boolean(edge.back)]);
+    const existing = groups.get(key);
+    if (!existing) {
+      groups.set(key, { ...edge });
+    } else {
+      if (edge.label) {
+        const labels = new Set([...(existing.label?.split('\n') ?? []), edge.label]);
+        existing.label = [...labels].join('\n');
+      }
+      if (edge.answers) existing.answers = [...new Set([...(existing.answers ?? []), ...edge.answers])];
+    }
+  }
+  return [...groups.values()];
+}