@takodotid/circuit 0.21.0 → 0.23.0

package/dist/chunks/{server-zapfzhv4.js → server-ckdy25w2.js}

@@ -151,6 +151,7 @@ async function studio(options) {
 `);
   };
   const server = createServer((request, response) => {
+    response.setHeader("x-robots-tag", "noindex, nofollow, noarchive");
     if (!hostAllowed(request.headers.host, port, options.allowHosts)) {
       response.writeHead(403).end();
       return;
@@ -186,6 +187,12 @@ async function studio(options) {
       });
       return;
     }
+    if (path === "/robots.txt") {
+      response.writeHead(200, { "content-type": "text/plain; charset=utf-8" }).end(`User-agent: *
+Disallow: /
+`);
+      return;
+    }
     if (path === "/data") {
       response.writeHead(200, { "content-type": "application/json", "cache-control": "no-store" }).end(data);
       return;

package/dist/cli/index.js

@@ -4801,7 +4801,7 @@ async function studioCommand() {
   const port = Number(flagValue("port") ?? 4600);
   if (!Number.isInteger(port) || port < 1 || port > 65535)
     fail("--port takes a number from 1 to 65535");
-  const { isLoopback, studio } = await import("../chunks/server-zapfzhv4.js");
+  const { isLoopback, studio } = await import("../chunks/server-ckdy25w2.js");
   const host = flagValue("host") ?? "127.0.0.1";
   const allowHosts = (flagValue("allow-host") ?? "").split(",").filter(Boolean);
   if (!isLoopback(host) && !allowHosts.length) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@takodotid/circuit",
-    "version": "0.21.0",
+    "version": "0.23.0",
     "description": "Declarative, vendor-neutral network configuration: describe each device in TypeScript, and Circuit makes the device match. Alpha.",
     "keywords": [
         "network",

package/src/studio/public/app.js

@@ -2,7 +2,7 @@
 /// <reference lib="dom" />
 // Studio's page: loads what the server gathered from the config, shows the place the address names, and loads again whenever the server says the config changed.
 
-import { byId, go } from "./dom.js";
+import { byId, enter, go } from "./dom.js";
 import { currentLayer, isLayer, setGraph, showLayer } from "./graph.js";
 import { problemCount, showTables } from "./tables.js";
 import { showTools } from "./tools.js";
@@ -99,6 +99,9 @@ function route() {
     else if (view === "compare") showCompare(parts, tables, studio);
     else showTables(parts, tables, studio);
     tables.scrollTop = moved ? 0 : scrolled;
+
+    // A new place comes in; the same place drawn again, because the config changed, stays still.
+    if (moved) enter(tables);
 }
 
 window.addEventListener("hashchange", route);
@@ -159,7 +162,14 @@ events.addEventListener("error", () => {
     live.classList.remove("on");
 });
 
-// The config changed: load it again. The page itself changed, while working on Circuit: load the page again.
-events.addEventListener("message", (event) => (event.data === "page" ? location.reload() : void load()));
+// The config changed: load it again, and the live mark beats once to say so. The page itself changed, while working on Circuit: load the page again.
+events.addEventListener("message", (event) => {
+    if (event.data === "page") return location.reload();
+
+    live.classList.remove("beat");
+    void live.offsetWidth;
+    live.classList.add("beat");
+    void load();
+});
 
 void load();

package/src/studio/public/dom.js

@@ -71,6 +71,26 @@ export function svgById(id) {
     return element;
 }
 
+/** The reader's system asks for less motion: nothing moves for show, and changes happen at once. */
+export const still = matchMedia("(prefers-reduced-motion: reduce)");
+
+/**
+ * Bring a part of the page in as it changes: it fades in and rises a little.
+ *
+ * @param {Element} element
+ */
+export function enter(element) {
+    if (still.matches) return;
+
+    element.animate(
+        [
+            { opacity: 0, transform: "translateY(6px)" },
+            { opacity: 1, transform: "none" },
+        ],
+        { duration: 240, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+    );
+}
+
 /** Browser storage can be missing or refuse, in a private window for example. The page works without it. */
 export const store = {
     /**

package/src/studio/public/export.js

@@ -64,15 +64,21 @@ export function svgOf(svg, viewport) {
     const originals = [svg, ...svg.querySelectorAll("*")];
     const copies = [copy, ...copy.querySelectorAll("*")];
 
+    // The dots travelling the cables are left out: a still image would show each one stopped at the drawing's corner.
+    const moving = [];
+
     for (const [index, original] of originals.entries()) {
         const target = copies[index];
         if (!(target instanceof SVGElement)) continue;
+        if (original.classList.contains("signal")) moving.push(target);
 
         const look = getComputedStyle(original);
         target.setAttribute("style", DRAWN.map((name) => `${name}:${look.getPropertyValue(name)}`).join(";"));
         target.removeAttribute("class");
     }
 
+    for (const dot of moving) dot.remove();
+
     // The drawing's own place on screen is left out: the file is framed around what is drawn.
     copy.querySelector("#viewport")?.removeAttribute("transform");
     copy.setAttribute("xmlns", "http://www.w3.org/2000/svg");

package/src/studio/public/graph.js

@@ -2,7 +2,7 @@
 /// <reference lib="dom" />
 // The graph view: a force layout of every node, drawn one layer at a time, with panning, zooming, dragging, and a side panel for what is selected.
 
-import { byId, go, h, link, s, store, svgById } from "./dom.js";
+import { byId, enter, go, h, link, s, still, store, svgById } from "./dom.js";
 import { changeKey } from "./evaluate.js";
 import { pngOf, save, svgOf } from "./export.js";
 
@@ -51,6 +51,8 @@ const viewport = svgById("viewport");
 const edgeLayer = svgById("edges");
 const nodeLayer = svgById("nodes");
 const panel = byId("panel");
+const presentButton = byId("present");
+const caption = byId("present-caption");
 
 // State.
 /** @type {Annotated | undefined} */
@@ -73,14 +75,38 @@ let pendingPath;
 let pathFocus;
 /** A comparison with another commit: its name, the edges it adds, and those gone. @type {{ name: string, added: Set<string>, removed: GraphEdge[] } | undefined} */
 let comparison;
+/** Presenting: the network on a big screen, going through every layer and lighting its busiest devices in turn. Kept, so a screen that reloads stays on it. */
+let presenting = store.get("present") === true;
+/** The device lit while presenting; none while the whole layer is shown. @type {string | undefined} */
+let touring;
+/** @type {ReturnType<typeof setInterval> | undefined} */
+let tour;
 
 /** @param {GraphEdge} edge */
 const edgeKey = (edge) => `${edge.layer} ${edge.from} ${edge.to} ${edge.label}`;
 let view = { x: 0, y: 0, k: 1 };
+/** Where the reader left each layer's view, as each layer is a drawing of its own. @type {Map<Layer, typeof view>} */
+const views = new Map();
 
-const saved = /** @type {Record<string, [number, number]>} */ (store.get("positions") ?? {});
-/** @type {Map<string, Point>} */
-const positions = new Map(Object.entries(saved).map(([id, [x, y]]) => [id, { x, y }]));
+/** @typedef {Record<string, [number, number]>} SavedPlaces */
+
+const saved = /** @type {Partial<Record<Layer, SavedPlaces>>} */ (store.get("layouts") ?? {});
+// The one layout an earlier Studio kept for every layer carries on as the cables layer's.
+const earlier = /** @type {SavedPlaces | undefined} */ (store.get("positions"));
+
+/** Where each node is on each layer: every layer is laid out for its own lines, and keeps where its devices were moved. @type {Map<Layer, Map<string, Point>>} */
+const layouts = new Map(
+    LAYERS.map((name) => {
+        const places = saved[name] ?? (name === "l1" ? earlier : undefined) ?? {};
+        return [name, new Map(Object.entries(places).map(([id, [x, y]]) => [id, { x, y }]))];
+    })
+);
+
+/** @param {Layer} name */
+const layoutOf = (name) => /** @type {Map<string, Point>} */ (layouts.get(name));
+
+/** Where nodes are drawn now: the layer's own places, or, while the layer changes, the places on the way there. */
+let positions = layoutOf(layer);
 
 /** @type {Map<string, SVGGElement>} */
 const nodeElements = new Map();
@@ -88,7 +114,9 @@ const nodeElements = new Map();
 const edgeElements = [];
 
 function savePositions() {
-    store.set("positions", Object.fromEntries([...positions].map(([id, point]) => [id, [Math.round(point.x), Math.round(point.y)]])));
+    /** @param {Map<string, Point>} places */
+    const rounded = (places) => Object.fromEntries([...places].map(([id, point]) => [id, [Math.round(point.x), Math.round(point.y)]]));
+    store.set("layouts", Object.fromEntries([...layouts].map(([name, places]) => [name, rounded(places)])));
 }
 
 /**
@@ -103,17 +131,23 @@ function hash(text) {
 }
 
 /**
- * Place nodes with a force layout: every node pushes every other away, and each edge pulls its ends together. A node placed before keeps its place unless `fresh`, so the drawing does not jump when the config changes.
- * Every layer is laid out together, so a device stays where it is when the layer changes.
+ * Place one layer's nodes with a force layout: every node pushes every other away, and each of the layer's edges pulls its ends together. A node placed before keeps its place unless `fresh`, so the drawing does not jump when the config changes.
+ * A node new to a layer starts where it is on the cables layer, so each layer is laid out for its own lines yet still looks like the same network.
  *
  * @param {GraphNode[]} nodes
  * @param {GraphEdge[]} edges
  * @param {boolean} fresh
+ * @param {Map<string, Point>} places the layer's places, filled in
+ * @param {Map<string, Point>} [seed] places to start new nodes from
  */
-function layout(nodes, edges, fresh) {
-    if (fresh) positions.clear();
+function layout(nodes, edges, fresh, places, seed) {
+    if (fresh) places.clear();
 
-    const fixed = new Set(nodes.filter((node) => positions.has(node.id)).map((node) => node.id));
+    /** @param {GraphNode} node */
+    const halfWidth = (node) =>
+        node.kind === "device" ? Math.max(node.label.length * 10, (node.detail[0] ?? "").length * 7) / 2 + 60 : node.label.length * 4 + 30;
+
+    const fixed = new Set(nodes.filter((node) => places.has(node.id)).map((node) => node.id));
     /** @type {Map<string, Set<string>>} */
     const neighbors = new Map();
 
@@ -125,29 +159,64 @@ function layout(nodes, edges, fresh) {
         neighbors.get(edge.to)?.add(edge.from);
     }
 
+    // A device with no line on this layer is set in a row under the drawing, rather than pushed out to its edges by the rest.
+    const loose = edges.length ? nodes.filter((node) => !neighbors.has(node.id) && !places.has(node.id)) : [];
+    const linked = nodes.filter((node) => !loose.includes(node));
+
+    function park() {
+        if (!loose.length) return;
+
+        const placed = linked.flatMap((node) => places.get(node.id) ?? []);
+        const left = placed.length ? Math.min(...placed.map((point) => point.x)) : 0;
+        const right = left + Math.max(placed.length ? Math.max(...placed.map((point) => point.x)) - left : 0, 900);
+        let x = left;
+        let y = (placed.length ? Math.max(...placed.map((point) => point.y)) : 0) + 130;
+
+        for (const node of [...loose].sort((a, b) => a.label.localeCompare(b.label))) {
+            const half = halfWidth(node);
+            if (x > left && x + half * 2 > right) {
+                x = left;
+                y += 96;
+            }
+
+            places.set(node.id, { x: x + half, y });
+            x += half * 2 + 24;
+        }
+
+        savePositions();
+    }
+
+    nodes = linked;
+
     // A new node starts beside a neighbor already placed, or on a circle.
     const radius = 60 * Math.sqrt(nodes.length + 1);
 
     for (const node of nodes) {
-        if (positions.has(node.id)) continue;
+        if (places.has(node.id)) continue;
+
+        const start = seed?.get(node.id);
+        if (start) {
+            places.set(node.id, { ...start });
+            continue;
+        }
 
         const angle = hash(node.id) * Math.PI * 2;
-        const placed = [...(neighbors.get(node.id) ?? [])].map((id) => positions.get(id)).find(Boolean);
+        const placed = [...(neighbors.get(node.id) ?? [])].map((id) => places.get(id)).find(Boolean);
         const distance = placed ? 90 : radius;
         const origin = placed ?? { x: 0, y: 0 };
 
-        positions.set(node.id, { x: origin.x + Math.cos(angle) * distance, y: origin.y + Math.sin(angle) * distance });
+        places.set(node.id, { x: origin.x + Math.cos(angle) * distance, y: origin.y + Math.sin(angle) * distance });
     }
 
     const moving = nodes.filter((node) => !fixed.has(node.id));
-    if (!moving.length) return;
+    if (!moving.length) return park();
 
     const pairs = [...neighbors].flatMap(([from, tos]) => [...tos].filter((to) => from < to).map((to) => [from, to]));
     const ideal = 170;
     const rounds = fixed.size ? 200 : 500;
 
     /** @param {string} id */
-    const at = (id) => /** @type {Point} */ (positions.get(id));
+    const at = (id) => /** @type {Point} */ (places.get(id));
 
     for (let round = 0; round < rounds; round++) {
         const heat = 40 * (1 - round / rounds) + 1;
@@ -179,7 +248,7 @@ function layout(nodes, edges, fresh) {
         }
 
         for (const [from, to] of pairs) {
-            if (!from || !to || !positions.has(from) || !positions.has(to)) continue;
+            if (!from || !to || !places.has(from) || !places.has(to)) continue;
 
             const dx = at(from).x - at(to).x;
             const dy = at(from).y - at(to).y;
@@ -207,9 +276,6 @@ function layout(nodes, edges, fresh) {
     }
 
     // No box may cover another: two that overlap are pushed apart the shorter way out, with room for the label of the line between them.
-    /** @param {GraphNode} node */
-    const halfWidth = (node) =>
-        node.kind === "device" ? Math.max(node.label.length * 10, (node.detail[0] ?? "").length * 7) / 2 + 60 : node.label.length * 4 + 30;
 
     for (let round = 0; round < 80; round++) {
         let overlapping = false;
@@ -240,27 +306,99 @@ function layout(nodes, edges, fresh) {
         if (!overlapping) break;
     }
 
+    park();
     savePositions();
 }
 
 // What is drawn.
-/** @returns {DrawnEdge[]} */
-const visibleEdges = () => {
-    const current = data?.edges.filter((edge) => edge.layer === layer) ?? [];
+
+/**
+ * A layer's edges, with those a comparison says are gone.
+ *
+ * @param {Layer} name
+ * @returns {DrawnEdge[]}
+ */
+const edgesOn = (name) => {
+    const current = data?.edges.filter((edge) => edge.layer === name) ?? [];
     if (!comparison) return current;
 
     // An edge the comparison says is gone is drawn when both its ends are still drawn.
     const nodes = new Set(data?.nodes.map((node) => node.id));
-    const gone = comparison.removed.filter((edge) => edge.layer === layer && nodes.has(edge.from) && nodes.has(edge.to));
+    const gone = comparison.removed.filter((edge) => edge.layer === name && nodes.has(edge.from) && nodes.has(edge.to));
     return [...current, ...gone.map((edge) => ({ ...edge, gone: /** @type {const} */ (true) }))];
 };
 
-/** @returns {GraphNode[]} */
-function visibleNodes() {
-    const ends = new Set(visibleEdges().flatMap((edge) => [edge.from, edge.to]));
+/**
+ * A layer's nodes: every device, and whatever else its edges end at.
+ *
+ * @param {Layer} name
+ * @returns {GraphNode[]}
+ */
+function nodesOn(name) {
+    const ends = new Set(edgesOn(name).flatMap((edge) => [edge.from, edge.to]));
     return data?.nodes.filter((node) => node.kind === "device" || ends.has(node.id)) ?? [];
 }
 
+const visibleEdges = () => edgesOn(layer);
+const visibleNodes = () => nodesOn(layer);
+
+/**
+ * Lay out a layer for its own lines. The cables layer comes first, as every other layer's new nodes start from it.
+ *
+ * @param {Layer} name
+ * @param {boolean} fresh forget where the layer's nodes were, and lay it out again
+ */
+function layOut(name, fresh) {
+    if (!data) return;
+    if (name !== "l1") layOut("l1", false);
+
+    layout(nodesOn(name), edgesOn(name), fresh, layoutOf(name), name === "l1" ? undefined : layoutOf("l1"));
+}
+
+/** The node glide between two layers' places, which a press stops. @type {number | undefined} */
+let regrouping;
+
+/** Put the nodes at their own layer's places now, ending a glide between layers. */
+function settle() {
+    if (regrouping !== undefined) cancelAnimationFrame(regrouping);
+    regrouping = undefined;
+    positions = layoutOf(layer);
+}
+
+/**
+ * Move the nodes from where they are drawn to their places on the layer shown, so the eye can follow each device to where it is on this layer.
+ *
+ * @param {Map<string, Point>} from
+ */
+function glideNodes(from) {
+    settle();
+
+    const to = layoutOf(layer);
+    if (still.matches || from === to) return;
+
+    /** @type {Map<string, Point>} */
+    const shown = new Map();
+    const began = performance.now();
+
+    /** @param {number} now */
+    const step = (now) => {
+        const t = Math.min((now - began) / 700, 1);
+        const eased = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+
+        for (const [id, end] of to) {
+            const start = from.get(id) ?? end;
+            shown.set(id, { x: start.x + (end.x - start.x) * eased, y: start.y + (end.y - start.y) * eased });
+        }
+
+        positions = t < 1 ? shown : to;
+        place();
+        regrouping = t < 1 ? requestAnimationFrame(step) : undefined;
+    };
+
+    positions = shown;
+    step(began);
+}
+
 /** @param {string} id */
 const nodeById = (id) => data?.nodes.find((node) => node.id === id);
 
@@ -325,6 +463,9 @@ const MOST_APART = 3;
 /** @type {Record<Layer, string>} */
 const MANY = { l1: "cables", l2: "cables", l3: "shared prefixes", bgp: "sessions", ospf: "adjacencies", tunnels: "tunnels" };
 
+/** @type {Record<Layer, string>} */
+const ONE = { l1: "cable", l2: "cable", l3: "shared prefix", bgp: "session", ospf: "adjacency", tunnels: "tunnel" };
+
 /**
  * The edges to draw: each on its own, or, past a few between the same two nodes, one for all of them.
  *
@@ -363,7 +504,104 @@ function bundled(edges) {
     });
 }
 
-function draw() {
+/**
+ * Dots that travel a cable both ends declare, so a link that works reads as one that carries traffic: one dot, or one each way while presenting. A cable only one end declares, or one a comparison shows is gone, carries none.
+ *
+ * @param {DrawnEdge} edge
+ * @param {string} id the id of the cable's drawn path, which the dots follow as it moves
+ */
+function signals(edge, id) {
+    if (still.matches || edge.oneSided || edge.gone) return [];
+
+    const a = positions.get(edge.from) ?? { x: 0, y: 0 };
+    const b = positions.get(edge.to) ?? { x: 0, y: 0 };
+    const seconds = Math.min(Math.max(Math.hypot(b.x - a.x, b.y - a.y) / (presenting ? 110 : 45), 1.6), 12);
+    const phase = hash(`${edge.from}${edge.to}${edge.label}`) * seconds;
+    const backwards = presenting ? [false, true] : [hash(edge.label) < 0.5];
+
+    return backwards.map((back, index) => {
+        const dot = s("circle", { class: "signal", r: 3.5 });
+        const motion = s("animateMotion", {
+            dur: `${seconds.toFixed(2)}s`,
+            begin: `-${(phase + (index * seconds) / 2).toFixed(2)}s`,
+            repeatCount: "indefinite",
+            ...(back ? { keyPoints: "1;0", keyTimes: "0;1", calcMode: "linear" } : {}),
+        });
+
+        motion.append(s("mpath", { href: `#${id}` }));
+        dot.append(motion);
+        return dot;
+    });
+}
+
+/** A confident arrival: fast at first, settling at the end. */
+const EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+
+/**
+ * Draw the network in from its busiest device outward, a ring of neighbours at a time, each cable drawn from its nearer end.
+ *
+ * @param {Set<string>} fresh the nodes this drawing adds, which fade in; the others are already on screen
+ */
+function arrive(fresh) {
+    if (still.matches || !edgeElements.length) return;
+
+    /** @param {string} id */
+    const degree = (id) => edgeElements.filter(({ edge }) => edge.from === id || edge.to === id).length;
+    const hub = [...nodeElements.keys()].sort((a, b) => degree(b) - degree(a))[0];
+
+    /** @type {Map<string, number>} */
+    const ring = new Map(hub ? [[hub, 0]] : []);
+    for (let queue = hub ? [hub] : []; queue.length;) {
+        const id = /** @type {string} */ (queue.shift());
+        for (const { edge } of edgeElements) {
+            const other = edge.from === id ? edge.to : edge.to === id ? edge.from : undefined;
+            if (other === undefined || ring.has(other)) continue;
+            ring.set(other, (ring.get(id) ?? 0) + 1);
+            queue.push(other);
+        }
+    }
+
+    // The whole drawing arrives within about a second, however many rings it has.
+    const farthest = Math.max(0, ...ring.values()) + 1;
+    const step = Math.min(110, 800 / farthest);
+    /** @param {string} id */
+    const ringOf = (id) => ring.get(id) ?? farthest;
+
+    for (const [id, group] of nodeElements) {
+        if (!fresh.has(id)) continue;
+        group.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 360, delay: ringOf(id) * step, easing: EASE, fill: "backwards" });
+    }
+
+    for (const { edge, group, path, label } of edgeElements) {
+        const forward = ringOf(edge.from) <= ringOf(edge.to);
+        const delay = (Math.min(ringOf(edge.from), ringOf(edge.to)) + 0.5) * step;
+
+        if (edge.oneSided || edge.gone) {
+            path.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 420, delay, easing: EASE, fill: "backwards" });
+        } else {
+            // Measured as one whole length, so the line draws in right even while its ends glide to a new layer's places.
+            path.setAttribute("pathLength", "1");
+            const start = { strokeDasharray: "1 1", strokeDashoffset: forward ? 1 : -1 };
+            const end = { strokeDasharray: "1 1", strokeDashoffset: 0 };
+            const drawing = path.animate([start, end], { duration: 560, delay, easing: EASE, fill: "backwards" });
+            drawing.addEventListener("finish", () => path.removeAttribute("pathLength"));
+            drawing.addEventListener("cancel", () => path.removeAttribute("pathLength"));
+        }
+
+        for (const part of [label, ...group.querySelectorAll(".signal")]) {
+            part.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, delay: delay + 420, fill: "backwards" });
+        }
+    }
+}
+
+/**
+ * Draw the layer. `arrival` says what is new to the eye: the whole network the first time it is shown, its cables when the layer changes, and nothing when the config is read again.
+ *
+ * @param {"network" | "cables"} [arrival]
+ */
+function draw(arrival) {
+    const before = new Set(nodeElements.keys());
+
     edgeLayer.replaceChildren();
     nodeLayer.replaceChildren();
     nodeElements.clear();
@@ -380,7 +618,7 @@ function draw() {
     /** @type {Map<string, number>} */
     const seen = new Map();
 
-    for (const edge of edges) {
+    for (const [number, edge] of edges.entries()) {
         const pair = pairOf(edge);
         const index = seen.get(pair) ?? 0;
         seen.set(pair, index + 1);
@@ -393,11 +631,11 @@ function draw() {
         const change = edge.gone ? " gone" : added ? " added" : "";
         const group = s("g", { class: `edge${edge.oneSided ? " one-sided" : ""}${change}` });
         const hit = s("path", { class: "hit" });
-        const path = s("path");
+        const path = s("path", { id: `cable-${number}` });
         const label = s("text", { "text-anchor": "middle", "dominant-baseline": "central" });
         label.textContent = edge.label;
 
-        group.append(path, hit, label);
+        group.append(path, hit, ...signals(edge, `cable-${number}`), label);
 
         // Selected on press: the canvas captures the pointer for panning, so no click would reach the edge.
         group.addEventListener("pointerdown", (event) => {
@@ -435,6 +673,11 @@ function draw() {
         rect.setAttribute("width", String(width));
         rect.setAttribute("height", String(height));
 
+        // The mark of the device presenting lights now: a ring around its frame, shown only then.
+        const beacon = s("g", { class: "beacon", "aria-hidden": "true" });
+        beacon.append(s("rect", { x: -width / 2 - 10, y: -height / 2 - 10, width: width + 20, height: height + 20, rx: 16 }));
+        group.insertBefore(beacon, rect);
+
         if (device) {
             for (const text of texts) text.setAttribute("x", String(-width / 2 + 16 + mark));
 
@@ -466,11 +709,13 @@ function draw() {
 
     place();
     emphasize();
+
+    if (arrival) arrive(new Set([...nodeElements.keys()].filter((id) => arrival === "network" || !before.has(id))));
 }
 
-/** Light up what the pointer is on, or what is selected, and dim the rest. */
+/** Light up what the pointer is on, the device lit while presenting, or what is selected, and dim the rest. */
 function emphasize() {
-    const focus = hovered ?? (selection && "node" in selection ? selection.node : undefined);
+    const focus = hovered ?? touring ?? (selection && "node" in selection ? selection.node : undefined);
     const selectedEdge = selection && "edge" in selection ? selection.edge : undefined;
 
     /** @param {GraphEdge} edge */
@@ -502,6 +747,7 @@ function emphasize() {
 
     for (const [id, group] of nodeElements) {
         group.classList.toggle("selected", Boolean(selection && "node" in selection && selection.node === id));
+        group.classList.toggle("touring", presenting && id === touring && !hovered);
         group.classList.toggle("dim", litNodes !== undefined && !litNodes.has(id));
     }
 }
@@ -525,6 +771,14 @@ const toWorld = (event) => {
  */
 function startDrag(event, id) {
     if (event.button !== 0) return;
+    if (gliding !== undefined) cancelAnimationFrame(gliding);
+    gliding = undefined;
+
+    // A press ends a glide between layers, so a device is moved from its own place on this layer.
+    if (regrouping !== undefined) {
+        settle();
+        place();
+    }
     event.stopPropagation();
 
     svg.setPointerCapture(event.pointerId);
@@ -568,6 +822,8 @@ svg.addEventListener(
     "wheel",
     (event) => {
         event.preventDefault();
+        if (gliding !== undefined) cancelAnimationFrame(gliding);
+        gliding = undefined;
 
         const point = toWorld(event);
         const k = Math.min(Math.max(view.k * Math.exp(-event.deltaY * 0.0015), 0.15), 4);
@@ -582,17 +838,77 @@ svg.addEventListener(
 /** The scale below which a device's name is too small to read: a first view stops there, and the reader pans for the rest. */
 const READABLE = 0.6;
 
+/** The view moving to a new place, which a press or a scroll stops. @type {number | undefined} */
+let gliding;
+
+/**
+ * Move the view to a new place over a second, zooming evenly and keeping the eye on the point between them. At once when the reader asked for less motion.
+ *
+ * @param {typeof view} target
+ */
+function glideTo(target) {
+    if (gliding !== undefined) cancelAnimationFrame(gliding);
+    gliding = undefined;
+
+    if (still.matches) {
+        view = target;
+        place();
+        return;
+    }
+
+    const box = svg.getBoundingClientRect();
+    const from = { ...view };
+    /** @param {typeof view} one */
+    const centreOf = (one) => ({ x: (box.width / 2 - one.x) / one.k, y: (box.height / 2 - one.y) / one.k });
+    const start = centreOf(from);
+    const end = centreOf(target);
+    const began = performance.now();
+
+    /** @param {number} now */
+    const step = (now) => {
+        const t = Math.min((now - began) / 1100, 1);
+        const eased = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+        const k = from.k * (target.k / from.k) ** eased;
+        const centre = { x: start.x + (end.x - start.x) * eased, y: start.y + (end.y - start.y) * eased };
+
+        view = { k, x: box.width / 2 - centre.x * k, y: box.height / 2 - centre.y * k };
+        place();
+        gliding = t < 1 ? requestAnimationFrame(step) : undefined;
+    };
+
+    gliding = requestAnimationFrame(step);
+}
+
 /**
- * Show the whole drawing, or, when that would make it unreadable and `readable` is asked, as much of it as stays readable.
+ * Show the whole drawing, or, when that would make it unreadable and `readable` is asked, as much of it as stays readable. `glide` moves there instead of jumping.
  *
  * @param {boolean} [readable]
+ * @param {boolean} [glide]
+ */
+function fit(readable = false, glide = false) {
+    const target = framing(visibleNodes(), readable);
+    if (!target) return;
+
+    if (glide) return glideTo(target);
+    view = target;
+    place();
+}
+
+/**
+ * The view that frames these nodes.
+ *
+ * @param {GraphNode[]} nodes
+ * @param {boolean} readable
+ * @returns {typeof view | undefined}
  */
-function fit(readable = false) {
-    const points = visibleNodes().flatMap((node) => {
-        const point = positions.get(node.id);
+function framing(nodes, readable) {
+    // Framed where the nodes are going, not where a glide between layers has them now.
+    const places = layoutOf(layer);
+    const points = nodes.flatMap((node) => {
+        const point = places.get(node.id);
         return point ? [point] : [];
     });
-    if (!points.length) return;
+    if (!points.length) return undefined;
 
     const box = svg.getBoundingClientRect();
     const xs = points.map((point) => point.x);
@@ -605,13 +921,32 @@ function fit(readable = false) {
     // When the whole drawing does not fit readably, the view starts on the device with the most lines, the heart of the network.
     const edges = visibleEdges();
     const degree = (/** @type {string} */ id) => edges.filter((edge) => edge.from === id || edge.to === id).length;
-    const hub = [...visibleNodes()].sort((a, b) => degree(b.id) - degree(a.id))[0];
+    const hub = [...nodes].sort((a, b) => degree(b.id) - degree(a.id))[0];
     const centre =
-        k > whole && hub && positions.has(hub.id)
-            ? /** @type {Point} */ (positions.get(hub.id))
+        k > whole && hub && places.has(hub.id)
+            ? /** @type {Point} */ (places.get(hub.id))
             : { x: (Math.max(...xs) + Math.min(...xs)) / 2, y: (Math.max(...ys) + Math.min(...ys)) / 2 };
 
-    view = { k, x: box.width / 2 - centre.x * k, y: box.height / 2 - centre.y * k };
+    // Presenting leaves room for the slow drift and the caption, so nothing framed is cut at the screen's edge.
+    const shown = presenting ? k * 0.86 : k;
+
+    return { k: shown, x: box.width / 2 - centre.x * shown, y: box.height / 2 - centre.y * shown };
+}
+
+/** While presenting, frame what is shown: the lit device with everything it has a line to, or the whole layer. */
+function frameTour(glide = true) {
+    const lit = touring;
+    if (!lit) return fit(false, glide);
+
+    const near = new Set([lit, ...visibleEdges().flatMap((edge) => (edge.from === lit ? [edge.to] : edge.to === lit ? [edge.from] : []))]);
+    const target = framing(
+        visibleNodes().filter((node) => near.has(node.id)),
+        false
+    );
+    if (!target) return;
+
+    if (glide) return glideTo(target);
+    view = target;
     place();
 }
 
@@ -619,12 +954,126 @@ byId("fit").addEventListener("click", () => fit());
 
 byId("lay-out").addEventListener("click", () => {
     if (!data) return;
-    layout(data.nodes, data.edges, true);
+    layOut(layer, true);
+    settle();
     draw();
     fit();
 });
 
-window.addEventListener("resize", () => place());
+// Presenting keeps the whole network in view as the screen changes size.
+window.addEventListener("resize", () => (presenting ? frameTour(false) : place()));
+
+// Presenting.
+
+/** Say what is shown while presenting: the device lit, or the whole layer. */
+function showCaption() {
+    caption.hidden = !presenting;
+    if (!presenting) return;
+
+    const node = touring ? nodeById(touring) : undefined;
+    const edges = visibleEdges().filter((edge) => !node || edge.from === node.id || edge.to === node.id);
+    const count = `${edges.length} ${edges.length === 1 ? ONE[layer] : MANY[layer]}`;
+
+    if (node) caption.replaceChildren(h("strong", {}, node.label), h("span", {}, [node.detail[0], count].filter(Boolean).join(", ")));
+    else
+        caption.replaceChildren(
+            h("strong", {}, LAYER_NAMES[layer]),
+            h("span", {}, `${visibleNodes().filter((one) => one.kind === "device").length} devices, ${count}`)
+        );
+
+    enter(caption);
+}
+
+/** How many devices are lit on each layer while presenting, busiest first, before it moves on to the next layer. */
+const LIT_PER_LAYER = 4;
+
+/** How far presenting has gone on this layer: 0 while the whole layer is shown, then each lit device in turn. */
+let tourStep = 0;
+
+/** The move to the next layer, waiting while the view zooms out to the whole of this one. @type {ReturnType<typeof setTimeout> | undefined} */
+let leaving;
+
+/** The next layer that has lines to show, after this one; this one when no other has any. */
+function nextLayer() {
+    const after = [...LAYERS.slice(LAYERS.indexOf(layer) + 1), ...LAYERS.slice(0, LAYERS.indexOf(layer) + 1)];
+    return after.find((name) => data?.edges.some((edge) => edge.layer === name)) ?? layer;
+}
+
+/** While presenting: show the whole layer, light its busiest devices one at a time, then move on to the next layer. */
+function tourNext() {
+    if (graphView.hidden || document.hidden || hovered || drag || leaving) return;
+
+    const edges = visibleEdges();
+    const degree = (/** @type {string} */ id) => edges.filter((edge) => edge.from === id || edge.to === id).length;
+    const devices = visibleNodes()
+        .filter((node) => node.kind === "device" && degree(node.id))
+        .sort((a, b) => degree(b.id) - degree(a.id) || a.label.localeCompare(b.label))
+        .slice(0, LIT_PER_LAYER);
+
+    tourStep += 1;
+    touring = devices[tourStep - 1]?.id;
+
+    if (touring || nextLayer() === layer) {
+        if (!touring) tourStep = 0;
+        emphasize();
+        showCaption();
+        frameTour();
+        return;
+    }
+
+    // Every lit device has had its turn: the view zooms out to the whole layer first, so the next layer is reached from the whole drawing.
+    tourStep = 0;
+    emphasize();
+    showCaption();
+    frameTour();
+
+    const next = nextLayer();
+    leaving = setTimeout(() => {
+        leaving = undefined;
+
+        // Moving on replaces the address rather than adding to the history, so Back still leaves Studio's last place.
+        if (presenting && !graphView.hidden) location.replace(`#graph/${next}`);
+    }, 2600);
+}
+
+/** Start the turns over, so the layer shown now has its full time. */
+function restartTour() {
+    clearInterval(tour);
+    clearTimeout(leaving);
+    leaving = undefined;
+    if (presenting) tour = setInterval(tourNext, 6000);
+}
+
+/** @param {boolean} on */
+function setPresenting(on) {
+    presenting = on;
+    store.set("present", on);
+
+    document.body.classList.toggle("presenting", on);
+    presentButton.setAttribute("aria-pressed", String(on));
+
+    touring = undefined;
+    if (on) selection = undefined;
+    restartTour();
+
+    if (graphView.hidden || !data) return;
+
+    // The panel hides or returns, so the drawing is fitted once the page has its new size.
+    draw();
+    showPanel();
+    showCaption();
+    requestAnimationFrame(() => (presenting ? frameTour(false) : fit()));
+}
+
+presentButton.addEventListener("click", () => setPresenting(!presenting));
+setPresenting(presenting);
+
+// A hidden page's dots stop moving.
+document.addEventListener("visibilitychange", () => {
+    if (!(svg instanceof SVGSVGElement)) return;
+    if (document.hidden) svg.pauseAnimations();
+    else svg.unpauseAnimations();
+});
 
 // Saving the layer shown, as it looks.
 byId("save-svg").addEventListener("click", () => {
@@ -640,10 +1089,16 @@ byId("save-png").addEventListener("click", async () => {
 // The side panel.
 /** @param {Selection} next */
 function select(next) {
+    /** @param {Selection} one */
+    const keyOf = (one) => (one && "node" in one ? one.node : one ? edgeKey(one.edge) : "");
+    const changed = keyOf(next) !== keyOf(selection);
+
     selection = next;
     pathFocus = undefined;
     emphasize();
     showPanel();
+
+    if (changed) enter(panel);
 }
 
 /**
@@ -882,7 +1337,12 @@ function showLayerButtons() {
 document.addEventListener("keydown", (event) => {
     if (event.target instanceof HTMLInputElement || graphView.hidden) return;
 
-    if (event.key === "Escape") select(undefined);
+    if (event.key === "Escape") {
+        if (presenting) setPresenting(false);
+        select(undefined);
+    }
+
+    if (event.key === "p" && !event.ctrlKey && !event.metaKey && !event.altKey) setPresenting(!presenting);
 
     // Keys 1 to 6 pick a layer.
     const chosen = LAYERS[Number(event.key) - 1];
@@ -907,7 +1367,7 @@ export function setGraph(next) {
         selection = same ? { edge: same } : undefined;
     }
 
-    layout(data.nodes, data.edges, false);
+    layOut(layer, false);
 }
 
 /**
@@ -920,6 +1380,9 @@ export function showLayer(next) {
         if (selection && "edge" in selection) selection = undefined;
         vlanFocus = undefined;
         pathFocus = undefined;
+        touring = undefined;
+        tourStep = 0;
+        restartTour();
     }
 
     if (pendingVlan !== undefined) {
@@ -932,14 +1395,32 @@ export function showLayer(next) {
         pendingPath = undefined;
     }
 
+    // The first view draws the whole network in; a new layer draws in its own lines while its devices glide to their places on it.
+    const arrival = !drawn && data ? "network" : next !== layer ? "cables" : undefined;
+    const from = positions;
+    if (drawn) views.set(layer, { ...view });
+
     layer = next;
     store.set("layer", layer);
+    layOut(layer, false);
+
+    if (arrival === "cables") glideNodes(from);
+    else settle();
 
     showLayerButtons();
-    draw();
+    draw(arrival);
     showPanel();
-
-    if (!drawn && data) fit(true);
+    showCaption();
+
+    // Presenting shows the whole layer as it comes in; a first view on a laptop starts where names can be read. A layer shown before
+    // comes back as the reader left it, and one shown for the first time glides into view.
+    if (presenting && arrival) fit();
+    else if (!drawn && data) fit(true);
+    else if (arrival === "cables") {
+        const left = views.get(layer);
+        if (left) glideTo(left);
+        else fit(true, true);
+    }
     drawn = data !== undefined;
 }
 

package/src/studio/public/index.html

@@ -5,6 +5,8 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Circuit Studio</title>
+        <!-- Studio shows one team's network, so search engines are asked to leave it out. -->
+        <meta name="robots" content="noindex, nofollow, noarchive" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <!-- Special Gothic is shared with the documentation site, and served from beside this page so Studio works offline. -->
         <link rel="preload" href="special-gothic-latin.woff2" as="font" type="font/woff2" crossorigin />
@@ -42,7 +44,16 @@
                     <nav id="layers" aria-label="Layers"></nav>
                     <div class="actions">
                         <button id="fit" title="Fit the drawing to the window">Fit</button>
-                        <button id="lay-out" title="Forget where nodes were moved, and lay them out again">Lay out again</button>
+                        <button id="lay-out" title="Forget where nodes were moved on this layer, and lay it out again">
+                            Lay out again
+                        </button>
+                        <button
+                            id="present"
+                            aria-pressed="false"
+                            title="Show the network on a big screen: the panel hides, and the drawing goes through every layer, lighting its busiest devices in turn. Key P."
+                        >
+                            Present
+                        </button>
                         <details class="menu">
                             <summary>Save image</summary>
                             <div class="menu-items">
@@ -59,6 +70,7 @@
                             <g id="nodes"></g>
                         </g>
                     </svg>
+                    <p id="present-caption" class="present-caption" aria-live="polite" hidden></p>
                     <aside id="panel"></aside>
                 </div>
             </section>

package/src/studio/public/style.css

@@ -39,6 +39,8 @@
     --surface: #ffffff;
     --surface-raised: #f4f6fb;
     --line: #d3d9e7;
+    --head: #e1e7f3;
+    --hover: rgba(10, 71, 184, 0.045);
     --text: #11141b;
     --muted: #49536a;
     --edge: #7b86a0;
@@ -67,6 +69,8 @@
         --surface: #121a30;
         --surface-raised: #182241;
         --line: #26314d;
+        --head: #26325a;
+        --hover: rgba(156, 185, 255, 0.05);
         --text: #f1f4fb;
         --muted: #a9b4cc;
         --edge: #7c89a8;
@@ -258,6 +262,14 @@ header > nav button[aria-pressed="true"]::after {
     left: 9px;
     height: 4px;
     background: var(--yellow);
+    animation: bar 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* The bar under the view or tab just chosen grows out from its middle. */
+@keyframes bar {
+    from {
+        transform: scaleX(0);
+    }
 }
 
 .count {
@@ -393,6 +405,18 @@ header input[type="search"]:focus {
     background: var(--ok);
 }
 
+/* When a changed config arrives, the live mark beats once in yellow. */
+.status-rail .live.beat::before {
+    animation: beat 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes beat {
+    30% {
+        background: var(--yellow);
+        transform: scale(1.9);
+    }
+}
+
 .banner {
     margin: 0;
     padding: 10px 18px;
@@ -537,9 +561,11 @@ main {
 /* The drawing board. */
 
 .stage {
+    position: relative;
     flex: 1;
     display: flex;
     min-height: 0;
+    overflow: hidden;
     background-color: var(--bg);
     background-image: radial-gradient(circle, var(--dots) 1.2px, transparent 1.6px);
     background-size: 24px 24px;
@@ -562,6 +588,33 @@ svg.canvas.panning {
     fill: none;
     stroke: var(--edge);
     stroke-width: 2;
+    transition:
+        stroke 0.2s,
+        stroke-width 0.2s;
+}
+
+/* Lighting one part dims the rest gently, so the eye follows what changed. */
+.edge,
+.node {
+    transition: opacity 0.25s ease-out;
+}
+
+/* Dots travelling a cable both ends declare: traffic where the link works. On a lit cable they turn to the highlighter. */
+.edge .signal {
+    fill: var(--accent);
+    pointer-events: none;
+}
+
+.edge.lit .signal,
+.edge.selected .signal {
+    r: 4.5px;
+    fill: var(--yellow);
+    stroke: var(--navy);
+    stroke-width: 1.5;
+}
+
+.edge.added .signal {
+    fill: var(--ok);
 }
 
 .edge text {
@@ -659,6 +712,66 @@ svg.canvas.panning {
     fill: var(--yellow);
 }
 
+/* The device presenting lights now: a highlighter fill, lit sockets, and a ring around it that keeps leaving it, the way the docs drawing marks the changed device. A warning or error keeps its own frame. */
+.node .beacon {
+    display: none;
+}
+
+.node.touring .beacon {
+    display: inline;
+}
+
+.node .beacon rect {
+    fill: none;
+    stroke: var(--yellow-deep);
+    stroke-width: 3;
+}
+
+.node.touring > rect {
+    fill: var(--yellow);
+}
+
+.node.touring:not(.error):not(.warning) > rect {
+    stroke: #0a1a36;
+    stroke-width: 4;
+}
+
+.node.touring text.name {
+    fill: #11141b;
+}
+
+.node.touring text.sub {
+    fill: #2a3550;
+}
+
+.node.touring .chassis > rect:first-child {
+    fill: #0a1a36;
+}
+
+.node.touring .chassis .socket {
+    fill: var(--yellow);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .node.touring .beacon rect {
+        transform-box: fill-box;
+        transform-origin: center;
+        animation: beacon 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+    }
+}
+
+@keyframes beacon {
+    from {
+        opacity: 1;
+        transform: scale(0.96);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(1.18);
+    }
+}
+
 .node text {
     fill: var(--text);
     font-size: 14px;
@@ -695,6 +808,78 @@ svg.far .edge text {
     display: none;
 }
 
+/* Presenting: the network for a big screen. The panel steps aside, lines and dots are heavier, and the drawing drifts slowly. */
+
+.presenting #panel {
+    display: none;
+}
+
+.presenting .edge path:not(.hit) {
+    stroke-width: 3;
+}
+
+.presenting .edge.lit path:not(.hit) {
+    stroke-width: 5;
+}
+
+.presenting .edge .signal {
+    r: 4.5px;
+}
+
+.presenting .edge.lit .signal {
+    r: 6px;
+}
+
+.present-caption {
+    position: absolute;
+    bottom: 22px;
+    left: 22px;
+    display: grid;
+    gap: 2px;
+    margin: 0;
+    padding: 12px 18px 14px;
+    border: 2px solid var(--text);
+    border-radius: 2px;
+    background: var(--surface);
+    pointer-events: none;
+}
+
+.present-caption[hidden] {
+    display: none;
+}
+
+.present-caption strong {
+    font-size: 26px;
+    letter-spacing: -0.015em;
+    line-height: 1.15;
+}
+
+.present-caption span {
+    color: var(--muted);
+    font-size: 14px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .presenting svg.canvas {
+        animation: drift 48s ease-in-out infinite alternate;
+    }
+
+    .presenting svg.canvas:hover,
+    .presenting svg.canvas.panning {
+        animation-play-state: paused;
+    }
+}
+
+@keyframes drift {
+    from {
+        transform: scale(1) translate(-1%, -0.6%);
+    }
+
+    to {
+        transform: scale(1.05) translate(1%, 0.6%);
+    }
+}
+
 /* The side panel: what is selected, or the layer's legend. */
 
 aside {
@@ -898,6 +1083,7 @@ aside pre {
     left: 8px;
     height: 4px;
     background: var(--cobalt);
+    animation: bar 0.28s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .table-block {
@@ -934,9 +1120,10 @@ table.data td {
     vertical-align: top;
 }
 
+/* The head is a tinted band rather than a rule, so it is never read as a divider between rows. */
 table.data thead th {
-    border-bottom: 2px solid var(--text);
-    background: var(--surface);
+    border-bottom: 0;
+    background: var(--head);
     color: var(--text);
     font-size: 11px;
     font-weight: 700;
@@ -952,9 +1139,10 @@ table.data th[title] {
     text-underline-offset: 3px;
 }
 
-table.data tbody tr:hover > td,
-table.data tbody tr:hover > th {
-    background: var(--surface-raised);
+/* Only the row under the pointer is washed, not every row that holds it, and the wash is a faint link tint well apart from the head's band. */
+table.data tbody tr:hover:not(:has(tr:hover)) > td,
+table.data tbody tr:hover:not(:has(tr:hover)) > th {
+    background: var(--hover);
 }
 
 table.data tr.muted td {

package/src/studio/server.ts

@@ -110,6 +110,9 @@ export async function studio(options: StudioOptions): Promise<void> {
     };
 
     const server = createServer((request, response) => {
+        // Studio shows one team's network: every answer asks search engines to leave it out, and robots.txt says so for the whole site.
+        response.setHeader("x-robots-tag", "noindex, nofollow, noarchive");
+
         if (!hostAllowed(request.headers.host, port, options.allowHosts)) {
             response.writeHead(403).end();
             return;
@@ -154,6 +157,11 @@ export async function studio(options: StudioOptions): Promise<void> {
             return;
         }
 
+        if (path === "/robots.txt") {
+            response.writeHead(200, { "content-type": "text/plain; charset=utf-8" }).end("User-agent: *\nDisallow: /\n");
+            return;
+        }
+
         if (path === "/data") {
             response.writeHead(200, { "content-type": "application/json", "cache-control": "no-store" }).end(data);
             return;