@takodotid/circuit 0.19.0 → 0.20.0

package/dist/chunks/studio-femhydvd.js

@@ -1,764 +0,0 @@
-import"./index-fq57hya4.js";
-
-// src/cli/studio.ts
-import { execFile, spawn } from "node:child_process";
-import { watch } from "node:fs";
-import { createServer } from "node:http";
-
-// src/cli/studio-page.ts
-var STYLE = `
-:root {
-    --bg: #f6f7f9;
-    --surface: #ffffff;
-    --line: #d7dbe0;
-    --text: #1d2228;
-    --muted: #5d6670;
-    --edge: #8a939c;
-    --accent: #2f6fdb;
-    --error: #d1242f;
-    --warning: #b07800;
-    --segment: #e9eef6;
-    --font: system-ui, -apple-system, "Segoe UI", sans-serif;
-    --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg: #14171b;
-        --surface: #1c2026;
-        --line: #333a42;
-        --text: #e4e8ec;
-        --muted: #98a2ad;
-        --edge: #6c7680;
-        --accent: #6aa0ff;
-        --error: #ff6b6b;
-        --warning: #e3b341;
-        --segment: #232a33;
-    }
-}
-* { box-sizing: border-box; }
-html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
-body { display: flex; flex-direction: column; }
-button { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
-button:hover { border-color: var(--accent); }
-button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
-header .brand { font-weight: 600; }
-header nav, header .actions { display: flex; flex-wrap: wrap; gap: 6px; }
-header .count { opacity: 0.7; margin-left: 4px; font-size: 12px; }
-header .summary { color: var(--muted); font-size: 13px; }
-header .live { margin-left: auto; color: var(--muted); font-size: 12px; }
-header .live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); margin-right: 6px; }
-header .live.on::before { background: #2da44e; }
-.banner { margin: 0; padding: 10px 16px; background: var(--error); color: #fff; white-space: pre-wrap; font: 12px/1.4 var(--mono); max-height: 30vh; overflow: auto; }
-main { flex: 1; display: flex; min-height: 0; }
-svg.canvas { flex: 1; min-width: 0; height: 100%; cursor: grab; touch-action: none; user-select: none; }
-svg.canvas.panning { cursor: grabbing; }
-aside { width: 340px; overflow: auto; padding: 14px 16px; background: var(--surface); border-left: 1px solid var(--line); }
-aside h2 { font-size: 15px; margin: 0 0 4px; overflow-wrap: anywhere; }
-aside h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 18px 0 6px; }
-aside ul { list-style: none; margin: 0; padding: 0; }
-aside li { padding: 3px 0; overflow-wrap: anywhere; }
-aside .kind { color: var(--muted); font-size: 12px; }
-aside pre { margin: 0; font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); padding: 8px; border-radius: 6px; }
-aside a { color: var(--accent); cursor: pointer; text-decoration: none; }
-aside a:hover { text-decoration: underline; }
-aside .muted { color: var(--muted); }
-.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 4px; margin-right: 6px; color: #fff; }
-.badge.error { background: var(--error); }
-.badge.warning { background: var(--warning); }
-.chips { display: flex; flex-wrap: wrap; gap: 6px; }
-.chips button { padding: 2px 8px; font-size: 12px; }
-.legend li { display: flex; align-items: center; gap: 8px; }
-.legend svg { flex: none; }
-.edge path { fill: none; stroke: var(--edge); stroke-width: 1.6; }
-.edge.one-sided path:not(.hit) { stroke: var(--warning); stroke-dasharray: 6 4; }
-.edge text { font-size: 11px; fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
-.edge .hit { stroke: transparent; stroke-width: 12; cursor: pointer; }
-.edge.selected path:not(.hit), .edge.lit path:not(.hit) { stroke: var(--accent); stroke-width: 2.6; }
-.edge.selected text, .edge.lit text { fill: var(--text); }
-.node { cursor: pointer; }
-.node rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
-.node.segment rect { fill: var(--segment); }
-.node.outside rect { stroke-dasharray: 5 3; }
-.node.error rect { stroke: var(--error); stroke-width: 3; }
-.node.warning rect { stroke: var(--warning); stroke-width: 3; }
-.node.selected rect { stroke: var(--accent); stroke-width: 3; }
-.node text { fill: var(--text); font-size: 12px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
-.node text.name { font-weight: 600; font-size: 13px; }
-.node text.sub { fill: var(--muted); font-size: 11px; }
-.node.segment text, .node.outside text { font-family: var(--mono); font-size: 11px; }
-.dim { opacity: 0.18; }
-svg.far .edge text { display: none; }
-@media (max-width: 760px) {
-    main { flex-direction: column; }
-    aside { width: auto; height: 40%; border-left: 0; border-top: 1px solid var(--line); }
-}
-`;
-function page() {
-  const LAYER_NAMES = {
-    l1: "Cables",
-    l2: "VLANs",
-    l3: "Addresses",
-    bgp: "BGP",
-    ospf: "OSPF",
-    tunnels: "Tunnels"
-  };
-  const LAYER_HELP = {
-    l1: "Each cable a port's link names. A LAG's cables are one line.",
-    l2: "The VLANs each cable carries. Pick a VLAN to light up every cable that carries it.",
-    l3: "Prefixes two or more devices hold an address in, and point-to-point addresses. Loopbacks and prefixes only one device holds are left out.",
-    bgp: "BGP sessions: between our devices, matched by the address each names, and to every AS outside.",
-    ospf: "OSPF adjacencies: devices with OSPF in one area on one prefix, neither side passive.",
-    tunnels: "GRE and VXLAN tunnels matched by their endpoints, and WireGuard peers."
-  };
-  const LAYERS = Object.keys(LAYER_NAMES);
-  const SVG = "http://www.w3.org/2000/svg";
-  const store = {
-    get(key) {
-      try {
-        const value = localStorage.getItem(`circuit-studio:${key}`);
-        return value === null ? undefined : JSON.parse(value);
-      } catch {
-        return;
-      }
-    },
-    set(key, value) {
-      try {
-        localStorage.setItem(`circuit-studio:${key}`, JSON.stringify(value));
-      } catch {}
-    }
-  };
-  function h(tag, attributes = {}, ...children) {
-    const element = document.createElement(tag);
-    for (const [name, value] of Object.entries(attributes))
-      element.setAttribute(name, value);
-    for (const child of children)
-      if (child !== undefined && child !== false)
-        element.append(child);
-    return element;
-  }
-  function s(tag, attributes = {}) {
-    const element = document.createElementNS(SVG, tag);
-    for (const [name, value] of Object.entries(attributes))
-      element.setAttribute(name, String(value));
-    return element;
-  }
-  function link(text, action) {
-    const anchor = h("a", { role: "button", tabindex: "0" }, text);
-    anchor.addEventListener("click", action);
-    anchor.addEventListener("keydown", (event) => event.key === "Enter" && action());
-    return anchor;
-  }
-  const layerButtons = new Map;
-  const nav = h("nav", { "aria-label": "Layers" });
-  const summary = h("span", { class: "summary" });
-  const live = h("span", { class: "live" }, "connecting");
-  const fitButton = h("button", { title: "Fit the drawing to the window" }, "Fit");
-  const layoutButton = h("button", { title: "Forget where nodes were moved, and lay them out again" }, "Lay out again");
-  const banner = h("pre", { class: "banner", hidden: "" });
-  const svg = s("svg", { class: "canvas", role: "img", "aria-label": "The network" });
-  const viewport = s("g");
-  const edgeLayer = s("g");
-  const nodeLayer = s("g");
-  viewport.append(edgeLayer, nodeLayer);
-  svg.append(viewport);
-  const panel = h("aside");
-  document.body.append(h("header", {}, h("span", { class: "brand" }, "Circuit studio"), nav, h("div", { class: "actions" }, fitButton, layoutButton), summary, live), banner, h("main", {}, svg, panel));
-  let data;
-  const requested = [location.hash.slice(1), store.get("layer")].find((name) => LAYERS.includes(name));
-  let layer = requested ?? "l1";
-  let selection;
-  let hovered;
-  let vlanFocus;
-  let view = { x: 0, y: 0, k: 1 };
-  const saved = store.get("positions") ?? {};
-  const positions = new Map(Object.entries(saved).map(([id, [x, y]]) => [id, { x, y }]));
-  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)]])));
-  }
-  function hash(text) {
-    let value = 2166136261;
-    for (const char of text)
-      value = Math.imul(value ^ char.charCodeAt(0), 16777619);
-    return (value >>> 0) / 4294967296;
-  }
-  function layout(nodes, edges, fresh) {
-    if (fresh)
-      positions.clear();
-    const fixed = new Set(nodes.filter((node) => positions.has(node.id)).map((node) => node.id));
-    const neighbors = new Map;
-    for (const edge of edges) {
-      if (edge.from === edge.to)
-        continue;
-      if (!neighbors.has(edge.from))
-        neighbors.set(edge.from, new Set);
-      if (!neighbors.has(edge.to))
-        neighbors.set(edge.to, new Set);
-      neighbors.get(edge.from).add(edge.to);
-      neighbors.get(edge.to).add(edge.from);
-    }
-    const radius = 60 * Math.sqrt(nodes.length + 1);
-    for (const node of nodes) {
-      if (positions.has(node.id))
-        continue;
-      const angle = hash(node.id) * Math.PI * 2;
-      const placed = [...neighbors.get(node.id) ?? []].map((id) => positions.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 });
-    }
-    const moving = nodes.filter((node) => !fixed.has(node.id));
-    if (!moving.length)
-      return;
-    const pairs = [...neighbors].flatMap(([from, tos]) => [...tos].filter((to) => from < to).map((to) => [from, to]));
-    const ideal = 230;
-    const rounds = fixed.size ? 200 : 500;
-    for (let round = 0;round < rounds; round++) {
-      const heat = 40 * (1 - round / rounds) + 1;
-      const push = new Map(nodes.map((node) => [node.id, { x: 0, y: 0 }]));
-      for (const [index, a] of nodes.entries()) {
-        for (const b of nodes.slice(index + 1)) {
-          const pa = positions.get(a.id);
-          const pb = positions.get(b.id);
-          let dx = pa.x - pb.x;
-          let dy = pa.y - pb.y;
-          if (dx === 0 && dy === 0) {
-            dx = hash(a.id + b.id) - 0.5;
-            dy = hash(b.id + a.id) - 0.5;
-          }
-          const distance = Math.max(Math.hypot(dx, dy), 1);
-          if (distance > ideal * 3)
-            continue;
-          const force = ideal * ideal / distance;
-          push.get(a.id).x += dx / distance * force;
-          push.get(a.id).y += dy / distance * force;
-          push.get(b.id).x -= dx / distance * force;
-          push.get(b.id).y -= dy / distance * force;
-        }
-      }
-      for (const [from, to] of pairs) {
-        const pa = positions.get(from);
-        const pb = positions.get(to);
-        if (!pa || !pb)
-          continue;
-        const dx = pa.x - pb.x;
-        const dy = pa.y - pb.y;
-        const distance = Math.max(Math.hypot(dx, dy), 1);
-        const force = distance * distance / ideal;
-        push.get(from).x -= dx / distance * force;
-        push.get(from).y -= dy / distance * force;
-        push.get(to).x += dx / distance * force;
-        push.get(to).y += dy / distance * force;
-      }
-      for (const node of moving) {
-        const point = positions.get(node.id);
-        const force = push.get(node.id);
-        force.x -= point.x * 0.15;
-        force.y -= point.y * 0.15;
-        const length = Math.max(Math.hypot(force.x, force.y), 1);
-        const step = Math.min(length, heat);
-        point.x += force.x / length * step;
-        point.y += force.y / length * step;
-      }
-    }
-    savePositions();
-  }
-  const visibleEdges = () => data?.edges.filter((edge) => edge.layer === layer) ?? [];
-  function visibleNodes() {
-    const ends = new Set(visibleEdges().flatMap((edge) => [edge.from, edge.to]));
-    return data?.nodes.filter((node) => node.kind === "device" || ends.has(node.id)) ?? [];
-  }
-  const nodeById = (id) => data?.nodes.find((node) => node.id === id);
-  function markOf(node) {
-    if (!data || node.kind !== "device")
-      return;
-    const findings = data.findings.filter((finding) => finding.device === node.label);
-    if (findings.some((finding) => finding.level === "error"))
-      return "error";
-    const drift = data.drift[node.label]?.status;
-    if (findings.length || drift === "differs" || drift === "cannot plan")
-      return "warning";
-    return;
-  }
-  function curve(edge, offset) {
-    const a = positions.get(edge.from) ?? { x: 0, y: 0 };
-    const b = positions.get(edge.to) ?? { x: 0, y: 0 };
-    const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-    const length = Math.max(Math.hypot(b.x - a.x, b.y - a.y), 1);
-    const normal = { x: -(b.y - a.y) / length, y: (b.x - a.x) / length };
-    const control = { x: mid.x + normal.x * offset * 2, y: mid.y + normal.y * offset * 2 };
-    return {
-      d: `M${a.x},${a.y} Q${control.x},${control.y} ${b.x},${b.y}`,
-      label: { x: mid.x + normal.x * offset, y: mid.y + normal.y * offset }
-    };
-  }
-  function place() {
-    viewport.setAttribute("transform", `translate(${view.x},${view.y}) scale(${view.k})`);
-    svg.classList.toggle("far", view.k < 0.4);
-    for (const [id, group] of nodeElements) {
-      const point = positions.get(id);
-      group.setAttribute("transform", `translate(${point.x},${point.y})`);
-    }
-    for (const { edge, path, hit, label, offset } of edgeElements) {
-      const { d, label: at } = curve(edge, offset);
-      path.setAttribute("d", d);
-      hit.setAttribute("d", d);
-      label.setAttribute("x", String(at.x));
-      label.setAttribute("y", String(at.y));
-    }
-  }
-  function draw() {
-    edgeLayer.replaceChildren();
-    nodeLayer.replaceChildren();
-    nodeElements.clear();
-    edgeElements.length = 0;
-    const edges = visibleEdges();
-    const between = new Map;
-    const pairOf = (edge) => [edge.from, edge.to].sort().join("|");
-    for (const edge of edges)
-      between.set(pairOf(edge), (between.get(pairOf(edge)) ?? 0) + 1);
-    const seen = new Map;
-    for (const edge of edges) {
-      const pair = pairOf(edge);
-      const index = seen.get(pair) ?? 0;
-      seen.set(pair, index + 1);
-      const sign = edge.from < edge.to ? 1 : -1;
-      const offset = (index - ((between.get(pair) ?? 1) - 1) / 2) * 34 * sign;
-      const group = s("g", { class: `edge${edge.oneSided ? " one-sided" : ""}` });
-      const hit = s("path", { class: "hit" });
-      const path = s("path");
-      const label = s("text", { "text-anchor": "middle", "dominant-baseline": "central" });
-      label.textContent = edge.label;
-      group.append(path, hit, label);
-      group.addEventListener("pointerdown", (event) => {
-        event.stopPropagation();
-        select({ edge });
-      });
-      edgeLayer.append(group);
-      edgeElements.push({ edge, group, path, hit, label, offset });
-    }
-    for (const node of visibleNodes()) {
-      const group = s("g", { class: `node ${node.kind} ${markOf(node) ?? ""}`, tabindex: 0 });
-      const rect = s("rect", { rx: node.kind === "segment" ? 14 : 8 });
-      group.append(rect);
-      const lines = node.kind === "device" ? [node.label, node.detail[0] ?? ""] : [node.label];
-      const texts = lines.map((line, index) => {
-        const text = s("text", { class: index === 0 ? "name" : "sub", y: lines.length === 1 ? 0 : index === 0 ? -8 : 9 });
-        text.textContent = line;
-        group.append(text);
-        return text;
-      });
-      nodeLayer.append(group);
-      const width = Math.max(...texts.map((text) => text.getComputedTextLength())) + 24;
-      const height = lines.length === 1 ? 28 : 44;
-      rect.setAttribute("x", String(-width / 2));
-      rect.setAttribute("y", String(-height / 2));
-      rect.setAttribute("width", String(width));
-      rect.setAttribute("height", String(height));
-      group.addEventListener("pointerdown", (event) => startDrag(event, node.id));
-      group.addEventListener("pointerenter", () => {
-        hovered = node.id;
-        emphasize();
-      });
-      group.addEventListener("pointerleave", () => {
-        hovered = undefined;
-        emphasize();
-      });
-      group.addEventListener("keydown", (event) => event.key === "Enter" && select({ node: node.id }));
-      nodeElements.set(node.id, group);
-    }
-    place();
-    emphasize();
-  }
-  function emphasize() {
-    const focus = hovered ?? (selection && "node" in selection ? selection.node : undefined);
-    const selectedEdge = selection && "edge" in selection ? selection.edge : undefined;
-    const touching = (edge) => edge.from === focus || edge.to === focus;
-    const carries = (edge) => edge.vlans?.some((vlan) => vlan.id === vlanFocus) ?? false;
-    let litEdges;
-    if (focus)
-      litEdges = new Set(edgeElements.filter(({ edge }) => touching(edge)).map(({ edge }) => edge));
-    else if (vlanFocus !== undefined && layer === "l2")
-      litEdges = new Set(edgeElements.filter(({ edge }) => carries(edge)).map(({ edge }) => edge));
-    else if (selectedEdge)
-      litEdges = new Set([selectedEdge]);
-    const litNodes = litEdges ? new Set([...litEdges].flatMap((edge) => [edge.from, edge.to])) : undefined;
-    if (focus)
-      litNodes?.add(focus);
-    for (const { edge, group } of edgeElements) {
-      group.classList.toggle("lit", Boolean(litEdges?.has(edge)) && !selectedEdge);
-      group.classList.toggle("selected", edge === selectedEdge);
-      group.classList.toggle("dim", Boolean(litEdges) && !litEdges.has(edge));
-    }
-    for (const [id, group] of nodeElements) {
-      group.classList.toggle("selected", Boolean(selection && "node" in selection && selection.node === id));
-      group.classList.toggle("dim", Boolean(litNodes) && !litNodes.has(id));
-    }
-  }
-  let drag;
-  const toWorld = (event) => {
-    const box = svg.getBoundingClientRect();
-    return { x: (event.clientX - box.left - view.x) / view.k, y: (event.clientY - box.top - view.y) / view.k };
-  };
-  function startDrag(event, id) {
-    if (event.button !== 0)
-      return;
-    event.stopPropagation();
-    svg.setPointerCapture(event.pointerId);
-    const origin = id ? { ...positions.get(id) } : { x: view.x, y: view.y };
-    drag = { id, start: { x: event.clientX, y: event.clientY }, origin, moved: false };
-    if (!id)
-      svg.classList.add("panning");
-  }
-  svg.addEventListener("pointerdown", (event) => startDrag(event));
-  svg.addEventListener("pointermove", (event) => {
-    if (!drag)
-      return;
-    const dx = event.clientX - drag.start.x;
-    const dy = event.clientY - drag.start.y;
-    if (Math.hypot(dx, dy) > 3)
-      drag.moved = true;
-    if (!drag.moved)
-      return;
-    if (drag.id)
-      positions.set(drag.id, { x: drag.origin.x + dx / view.k, y: drag.origin.y + dy / view.k });
-    else
-      view = { ...view, x: drag.origin.x + dx, y: drag.origin.y + dy };
-    place();
-  });
-  svg.addEventListener("pointerup", () => {
-    if (!drag)
-      return;
-    const ended = drag;
-    drag = undefined;
-    svg.classList.remove("panning");
-    if (ended.moved && ended.id)
-      savePositions();
-    if (ended.moved)
-      return;
-    select(ended.id ? { node: ended.id } : undefined);
-  });
-  svg.addEventListener("wheel", (event) => {
-    event.preventDefault();
-    const at = toWorld(event);
-    const k = Math.min(Math.max(view.k * Math.exp(-event.deltaY * 0.0015), 0.15), 4);
-    const box = svg.getBoundingClientRect();
-    view = { k, x: event.clientX - box.left - at.x * k, y: event.clientY - box.top - at.y * k };
-    place();
-  }, { passive: false });
-  function fit() {
-    const points = visibleNodes().map((node) => positions.get(node.id)).filter((point) => Boolean(point));
-    if (!points.length)
-      return;
-    const box = svg.getBoundingClientRect();
-    const xs = points.map((point) => point.x);
-    const ys = points.map((point) => point.y);
-    const width = Math.max(...xs) - Math.min(...xs) + 240;
-    const height = Math.max(...ys) - Math.min(...ys) + 160;
-    const k = Math.min(Math.max(Math.min(box.width / width, box.height / height), 0.15), 1.5);
-    const centre = { 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 };
-    place();
-  }
-  fitButton.addEventListener("click", fit);
-  layoutButton.addEventListener("click", () => {
-    if (!data)
-      return;
-    layout(data.nodes, data.edges, true);
-    draw();
-    fit();
-  });
-  function select(next) {
-    selection = next;
-    emphasize();
-    showPanel();
-  }
-  function findingList(findings, withDevice) {
-    return h("ul", {}, ...findings.map((finding) => h("li", {}, h("span", { class: `badge ${finding.level}` }, finding.level), withDevice && finding.device ? link(finding.device, () => select({ node: `device:${finding.device}` })) : undefined, withDevice && finding.device ? ": " : undefined, finding.message)));
-  }
-  function vlanChips(vlans) {
-    const chips = h("div", { class: "chips" });
-    for (const vlan of vlans) {
-      const button = h("button", { "aria-pressed": String(vlan.id === vlanFocus) }, `${vlan.name} ${vlan.id}`);
-      button.addEventListener("click", () => {
-        vlanFocus = vlanFocus === vlan.id ? undefined : vlan.id;
-        selection = undefined;
-        emphasize();
-        showPanel();
-      });
-      chips.append(button);
-    }
-    return chips;
-  }
-  function legend() {
-    const sample = (dashed, color) => {
-      const icon = s("svg", { width: 34, height: 10 });
-      icon.append(s("line", { x1: 2, y1: 5, x2: 32, y2: 5, stroke: color, "stroke-width": 2, "stroke-dasharray": dashed ? "6 4" : "" }));
-      return icon;
-    };
-    const box = (style) => {
-      const icon = s("svg", { width: 34, height: 16 });
-      icon.append(s("rect", { x: 2, y: 2, width: 30, height: 12, rx: 3, fill: "none", "stroke-width": 2, style }));
-      return icon;
-    };
-    return h("ul", { class: "legend" }, h("li", {}, sample(false, "var(--edge)"), "both ends declare it"), h("li", {}, sample(true, "var(--warning)"), "only one end declares it"), h("li", {}, box("stroke: var(--error)"), "a device with an error"), h("li", {}, box("stroke: var(--warning)"), "a warning, or unlike its snapshot"), h("li", {}, box("stroke: var(--line); stroke-dasharray: 5 3"), "outside the network"));
-  }
-  function showPanel() {
-    panel.replaceChildren();
-    if (!data)
-      return;
-    if (selection && "node" in selection) {
-      const node = nodeById(selection.node);
-      if (node)
-        return showNode(node);
-    }
-    if (selection && "edge" in selection)
-      return showEdge(selection.edge);
-    const devices = data.nodes.filter((node) => node.kind === "device");
-    const drifted = devices.filter((node) => data.drift[node.label]?.status === "differs");
-    const unsnapped = devices.filter((node) => data.drift[node.label]?.status === "no snapshot");
-    panel.append(h("h2", {}, LAYER_NAMES[layer]), h("p", { class: "muted" }, LAYER_HELP[layer]));
-    if (layer === "l2") {
-      const vlans = new Map;
-      for (const edge of visibleEdges())
-        for (const vlan of edge.vlans ?? [])
-          vlans.set(vlan.id, vlan);
-      const sorted = [...vlans.values()].sort((a, b) => a.id - b.id);
-      if (sorted.length)
-        panel.append(h("h3", {}, "VLANs"), vlanChips(sorted));
-    }
-    if (data.findings.length)
-      panel.append(h("h3", {}, "Found by validate"), findingList(data.findings, true));
-    if (drifted.length) {
-      panel.append(h("h3", {}, "Unlike their last snapshot"), h("ul", {}, ...drifted.map((node) => h("li", {}, link(node.label, () => select({ node: node.id }))))));
-    }
-    if (unsnapped.length) {
-      panel.append(h("h3", {}, "No snapshot yet"), h("p", { class: "muted" }, unsnapped.map((node) => node.label).join(", ")));
-    }
-    panel.append(h("h3", {}, "Legend"), legend());
-  }
-  function showNode(node) {
-    const kinds = { device: "device", segment: "shared segment", outside: "outside the network" };
-    panel.append(h("h2", {}, node.label), h("div", { class: "kind" }, kinds[node.kind]));
-    if (node.detail.length)
-      panel.append(h("h3", {}, "Details"), h("pre", {}, node.detail.join(`
-`)));
-    if (node.kind === "device" && data) {
-      const findings = data.findings.filter((finding) => finding.device === node.label);
-      if (findings.length)
-        panel.append(h("h3", {}, "Found by validate"), findingList(findings, false));
-      const drift = data.drift[node.label];
-      if (drift) {
-        const notes = {
-          matches: "Matches its last snapshot.",
-          differs: "Differs from its last snapshot. This is what diff would send:",
-          "no snapshot": "No snapshot yet: run circuit snapshot.",
-          "cannot plan": "Could not be planned against its snapshot:"
-        };
-        panel.append(h("h3", {}, "Against its snapshot"), h("p", {}, notes[drift.status]));
-        if (drift.lines.length)
-          panel.append(h("pre", {}, drift.lines.join(`
-`)));
-      }
-    }
-    const edges = visibleEdges().filter((edge) => edge.from === node.id || edge.to === node.id);
-    panel.append(h("h3", {}, `${LAYER_NAMES[layer]} here`));
-    if (!edges.length)
-      panel.append(h("p", { class: "muted" }, "None on this layer."));
-    panel.append(h("ul", {}, ...edges.map((edge) => {
-      const other = nodeById(edge.from === node.id ? edge.to : edge.from);
-      return h("li", {}, link(edge.label, () => select({ edge })), h("span", { class: "muted" }, ` with ${other?.label ?? "?"}`));
-    })));
-  }
-  function showEdge(edge) {
-    const from = nodeById(edge.from);
-    const to = nodeById(edge.to);
-    panel.append(h("h2", {}, edge.label), h("div", { class: "kind" }, `${LAYER_NAMES[edge.layer]}, between `, link(from?.label ?? edge.from, () => select({ node: edge.from })), " and ", link(to?.label ?? edge.to, () => select({ node: edge.to }))));
-    if (edge.oneSided)
-      panel.append(h("p", {}, h("span", { class: "badge warning" }, "one end"), "Only one end declares it."));
-    if (edge.detail.length)
-      panel.append(h("h3", {}, "Details"), h("pre", {}, edge.detail.join(`
-`)));
-    if (edge.vlans?.length)
-      panel.append(h("h3", {}, "VLANs"), vlanChips(edge.vlans));
-  }
-  function showHeader() {
-    nav.replaceChildren();
-    layerButtons.clear();
-    for (const [index, name] of LAYERS.entries()) {
-      const count = data?.edges.filter((edge) => edge.layer === name).length ?? 0;
-      const button = h("button", { "aria-pressed": String(name === layer), title: `${LAYER_HELP[name]} Key ${index + 1}.` }, LAYER_NAMES[name], h("span", { class: "count" }, String(count)));
-      button.addEventListener("click", () => chooseLayer(name));
-      nav.append(button);
-      layerButtons.set(name, button);
-    }
-    if (!data)
-      return;
-    const devices = data.nodes.filter((node) => node.kind === "device").length;
-    const errors = data.findings.filter((finding) => finding.level === "error").length;
-    const warnings = data.findings.length - errors;
-    const drifted = Object.values(data.drift).filter((drift) => drift.status === "differs").length;
-    summary.textContent = [
-      `${devices} ${devices === 1 ? "device" : "devices"}`,
-      `${errors} ${errors === 1 ? "error" : "errors"}`,
-      `${warnings} ${warnings === 1 ? "warning" : "warnings"}`,
-      `${drifted} unlike the snapshot`
-    ].join(" · ");
-  }
-  function chooseLayer(next) {
-    layer = next;
-    store.set("layer", layer);
-    history.replaceState(null, "", `#${layer}`);
-    if (selection && "edge" in selection)
-      selection = undefined;
-    vlanFocus = undefined;
-    showHeader();
-    draw();
-    showPanel();
-  }
-  document.addEventListener("keydown", (event) => {
-    if (event.target instanceof HTMLInputElement)
-      return;
-    if (event.key === "Escape")
-      select(undefined);
-    const chosen = LAYERS[Number(event.key) - 1];
-    if (chosen)
-      chooseLayer(chosen);
-  });
-  async function load() {
-    let next;
-    try {
-      next = await (await fetch("/graph", { cache: "no-store" })).json();
-    } catch (error) {
-      next = { error: `could not reach circuit studio: ${error.message}` };
-    }
-    if (next.error !== undefined) {
-      banner.textContent = `The config could not be read, so the drawing is the last one that could:
-${next.error}`;
-      banner.hidden = false;
-      return;
-    }
-    banner.hidden = true;
-    const first = !data;
-    data = next;
-    if (selection && "node" in selection && !nodeById(selection.node))
-      selection = undefined;
-    if (selection && "edge" in selection) {
-      const { layer: was, from, to, label } = selection.edge;
-      const same = data.edges.find((edge) => edge.layer === was && edge.from === from && edge.to === to && edge.label === label);
-      selection = same ? { edge: same } : undefined;
-    }
-    layout(data.nodes, data.edges, false);
-    showHeader();
-    draw();
-    showPanel();
-    if (first)
-      fit();
-  }
-  const events = new EventSource("/events");
-  events.addEventListener("open", () => {
-    live.textContent = "watching the config";
-    live.classList.add("on");
-  });
-  events.addEventListener("error", () => {
-    live.textContent = "not connected: is circuit studio still running?";
-    live.classList.remove("on");
-  });
-  events.addEventListener("message", () => void load());
-  window.addEventListener("resize", () => place());
-  load();
-}
-
-// src/cli/studio.ts
-var HTML = `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Circuit studio</title>
-<style>${STYLE}</style>
-</head>
-<body>
-<script>(${page.toString()})()</script>
-</body>
-</html>
-`;
-var IGNORED = /(^|[\\/])(node_modules|\.git)([\\/]|$)/;
-function makeGraph(configPath) {
-  const cli = process.argv[1];
-  const args = [...process.execArgv, cli, "graph", "--format=json", "--layer=all", `--config=${configPath}`];
-  return new Promise((done) => {
-    execFile(process.execPath, args, { maxBuffer: 256 * 1024 * 1024 }, (error, stdout, stderr) => {
-      if (!error)
-        return done(stdout);
-      const message = (stderr || error.message).trim();
-      done(JSON.stringify({ error: message }));
-    });
-  });
-}
-function openBrowser(url) {
-  const [command, args] = process.platform === "win32" ? ["cmd", ["/c", "start", "", url]] : process.platform === "darwin" ? ["open", [url]] : ["xdg-open", [url]];
-  const child = spawn(command, args, { stdio: "ignore", detached: true });
-  child.on("error", () => {});
-  child.unref();
-}
-async function studio(options) {
-  const { configPath, root, port } = options;
-  let graph = await makeGraph(configPath);
-  const listeners = new Set;
-  const allowedHosts = new Set([`127.0.0.1:${port}`, `localhost:${port}`]);
-  const server = createServer((request, response) => {
-    if (!allowedHosts.has(request.headers.host ?? "")) {
-      response.writeHead(403).end();
-      return;
-    }
-    if (request.url === "/") {
-      response.writeHead(200, { "content-type": "text/html; charset=utf-8" }).end(HTML);
-      return;
-    }
-    if (request.url === "/graph") {
-      response.writeHead(200, { "content-type": "application/json", "cache-control": "no-store" }).end(graph);
-      return;
-    }
-    if (request.url === "/events") {
-      response.writeHead(200, { "content-type": "text/event-stream", "cache-control": "no-store", connection: "keep-alive" });
-      response.write(`: connected
-
-`);
-      listeners.add(response);
-      request.on("close", () => listeners.delete(response));
-      return;
-    }
-    response.writeHead(404).end();
-  });
-  let timer;
-  watch(root, { recursive: true }, (_event, filename) => {
-    if (filename && IGNORED.test(filename))
-      return;
-    clearTimeout(timer);
-    timer = setTimeout(async () => {
-      graph = await makeGraph(configPath);
-      for (const listener of listeners)
-        listener.write(`data: changed
-
-`);
-      console.log(`${new Date().toLocaleTimeString()}  ${filename ?? "a file"} changed, graph made again`);
-    }, 300);
-  });
-  server.on("error", (error) => {
-    const message = error.code === "EADDRINUSE" ? `port ${port} is in use; choose another with --port=N` : error.message;
-    console.error(message);
-    process.exit(1);
-  });
-  server.listen(port, "127.0.0.1", () => {
-    const url = `http://127.0.0.1:${port}`;
-    console.log(`Circuit studio at ${url}, watching ${root}. Stop it with Ctrl+C.`);
-    if (options.open)
-      openBrowser(url);
-  });
-}
-export {
-  studio
-};