@takodotid/circuit 0.20.0 → 0.21.0

package/dist/index.js

@@ -1,13 +1,12 @@
 import {
-  contains,
-  familyOf,
-  host,
-  isAddress,
-  isCidr,
-  isGlobal,
-  network
-} from "./chunks/index-xm9nma2t.js";
-import"./chunks/index-fq57hya4.js";
+  familyOf2,
+  isAddress2,
+  isCidr2,
+  network,
+  contains2,
+  host2,
+  isGlobal2
+} from "./chunks/index-v8zgr7wm.js";
 
 // src/core/define.ts
 var secret = (name) => ({ secret: name });
@@ -19,7 +18,7 @@ var secretFile = (path) => {
 function defineDevice(device) {
   return device;
 }
-var defineNetwork = (network2) => network2;
+var defineNetwork = (network) => network;
 // src/core/merge.ts
 function merge(...records) {
   const result = {};
@@ -33,16 +32,16 @@ function merge(...records) {
   return result;
 }
 export {
-  secretFile,
-  secret,
-  network as prefixOf,
-  merge,
-  isGlobal,
-  isCidr,
-  isAddress,
-  host,
-  familyOf,
-  defineNetwork,
+  contains2 as contains,
   defineDevice,
-  contains
+  defineNetwork,
+  familyOf2 as familyOf,
+  host2 as host,
+  isAddress2 as isAddress,
+  isCidr2 as isCidr,
+  isGlobal2 as isGlobal,
+  merge,
+  network as prefixOf,
+  secret,
+  secretFile
 };

package/dist/presets/index.js

@@ -1,7 +1,6 @@
 import {
-  contains
-} from "../chunks/index-xm9nma2t.js";
-import"../chunks/index-fq57hya4.js";
+  contains2
+} from "../chunks/index-v8zgr7wm.js";
 
 // src/presets/index.ts
 var MARTIANS = ["127.0.0.0/8", "169.254.0.0/16", "0.0.0.0/8"];
@@ -39,7 +38,7 @@ function antiAmplification(destinations, options = {}) {
     { min: port + 1, max: 1023 }
   ];
   return destinations.flatMap((dst) => [
-    ...(options.keep_fragments ?? []).filter((prefix) => contains(dst, prefix)).map((prefix) => ({
+    ...(options.keep_fragments ?? []).filter((prefix) => contains2(dst, prefix)).map((prefix) => ({
       description: `UDP fragments to ${prefix} kept`,
       match: { protocol: "udp", dst: prefix, src_port: 0 },
       action: "accept"
@@ -174,10 +173,10 @@ var tunnelsOutsideOffered = (devices) => {
         continue;
       const subnets = (iface.addresses ?? []).map((entry) => typeof entry === "string" ? entry : entry.address);
       for (const neighbor of neighborPolicies(device)) {
-        if (!subnets.some((subnet) => contains(subnet, neighbor.address)))
+        if (!subnets.some((subnet) => contains2(subnet, neighbor.address)))
           continue;
         for (const prefix of offered(device, neighbor.export)) {
-          if (contains(prefix, iface.local)) {
+          if (contains2(prefix, iface.local)) {
             findings.push({
               level: "error",
               device: device.name,
@@ -346,7 +345,7 @@ function internetExchange(exchange, members) {
       ]) {
         if (!address)
           continue;
-        if (!lan || !contains(lan, address))
+        if (!lan || !contains2(lan, address))
           error(`${address} of ${member.name} is outside the peering LAN`);
         const holder = taken.get(address);
         if (holder)
@@ -367,19 +366,19 @@ function internetExchange(exchange, members) {
   return { ports, check };
 }
 export {
-  vlansOf,
-  tunnelsOutsideOffered,
-  trustBoundary,
-  offered,
-  neighborPolicies,
-  internetExchange,
-  exportsEndInReject,
-  communityScheme,
-  bgpSanity,
-  badTcpFlags,
-  antiSpoofing,
-  antiAmplification,
-  PRIVATE_RANGES,
+  AMPLIFIERS,
   MARTIANS,
-  AMPLIFIERS
+  PRIVATE_RANGES,
+  antiAmplification,
+  antiSpoofing,
+  badTcpFlags,
+  bgpSanity,
+  communityScheme,
+  exportsEndInReject,
+  internetExchange,
+  neighborPolicies,
+  offered,
+  trustBoundary,
+  tunnelsOutsideOffered,
+  vlansOf
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@takodotid/circuit",
-    "version": "0.20.0",
+    "version": "0.21.0",
     "description": "Declarative, vendor-neutral network configuration: describe each device in TypeScript, and Circuit makes the device match. Alpha.",
     "keywords": [
         "network",
@@ -86,14 +86,14 @@
         "ssh2": "^1.17.0"
     },
     "devDependencies": {
-        "@commitlint/cli": "^19.5.0",
-        "@commitlint/config-conventional": "^19.5.0",
+        "@commitlint/cli": "^19.8.1",
+        "@commitlint/config-conventional": "^19.8.1",
         "@types/bun": "^1.4.2",
-        "@types/node": "^24",
-        "husky": "^9.1.6",
-        "prettier": "^3.9.9",
+        "@types/node": "^24.19.2",
+        "husky": "^9.1.7",
+        "prettier": "^3.9.10",
         "typescript": "^7.0.2",
         "vitepress": "^1.6.4"
     },
-    "packageManager": "bun@1.3.5"
+    "packageManager": "bun@1.4.3"
 }

package/src/core/files.ts

@@ -16,12 +16,14 @@ export function projectSources(root: string, directory = root): string[] {
     });
 }
 
-const escape = (text: string) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+/** The first name written out after a call to defineDevice: the device's own, not that of another device a link, a peer or a tunnel names further on. */
+const FIRST_NAME = /^[\s\S]*?\bname\s*:\s*(["'`])(.*?)\1/;
 
 /** Whether a file's text declares the device: it calls defineDevice and gives it the name, written out whole. */
 export function declaresDevice(text: string, name: string): boolean {
-    const declares = new RegExp(`\\bname\\s*:\\s*(["'\`])${escape(name)}\\1`);
-    return text.includes("defineDevice") && declares.test(text);
+    return [...text.matchAll(/\bdefineDevice\s*\(/g)].some(
+        (call) => FIRST_NAME.exec(text.slice(call.index + call[0].length))?.[2] === name
+    );
 }
 
 /** The project files that declare the device, relative to the root. */

package/src/studio/public/app.js

@@ -42,12 +42,21 @@ function showSummary() {
     const count = problemCount(studio);
     problems.textContent = count ? String(count) : "";
 
-    summary.textContent = [
-        `${devices} ${devices === 1 ? "device" : "devices"}`,
-        `${errors} ${errors === 1 ? "error" : "errors"}`,
-        `${warnings} ${warnings === 1 ? "warning" : "warnings"}`,
-        `${drifted} unlike the snapshot`,
-    ].join(" · ");
+    const items = [
+        { value: devices, label: devices === 1 ? "device" : "devices", state: "neutral" },
+        { value: errors, label: errors === 1 ? "error" : "errors", state: errors ? "error" : "quiet" },
+        { value: warnings, label: warnings === 1 ? "warning" : "warnings", state: warnings ? "warning" : "quiet" },
+        { value: drifted, label: "unlike the snapshot", state: drifted ? "changed" : "quiet" },
+    ];
+
+    summary.replaceChildren(
+        ...items.map(({ value, label, state }) => {
+            const item = document.createElement("span");
+            item.className = `summary-item ${state}`;
+            item.append(String(value), ` ${label}`);
+            return item;
+        })
+    );
 }
 
 /** Show the place the address names, such as `#graph/bgp` or `#devices/edge-01/ports`. */
@@ -94,6 +103,15 @@ function route() {
 
 window.addEventListener("hashchange", route);
 
+// A menu closes once one of its items is chosen, or when the reader clicks anywhere else.
+document.addEventListener("click", (event) => {
+    const target = event.target instanceof Element ? event.target : undefined;
+
+    for (const menu of document.querySelectorAll("details.menu[open]")) {
+        if (!target || !menu.contains(target) || target.closest(".menu-items button")) menu.removeAttribute("open");
+    }
+});
+
 /** @type {ReturnType<typeof setTimeout> | undefined} */
 let searching;
 

package/src/studio/public/favicon.svg

@@ -1,6 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-    <rect width="32" height="32" rx="7" fill="#b4492f" />
-    <path d="M22 9 H13 L9 13 V19 L13 23 H22" fill="none" stroke="#fdf8f4" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" />
-    <circle cx="22" cy="9" r="2.6" fill="#b4492f" stroke="#fdf8f4" stroke-width="2.2" />
-    <circle cx="22" cy="23" r="2.6" fill="#b4492f" stroke="#fdf8f4" stroke-width="2.2" />
+    <rect width="32" height="32" rx="6" fill="#f8e347" />
+    <rect x="4" y="8" width="24" height="16" rx="3" fill="#0a47b8" />
+    <g fill="#ffffff">
+        <rect x="7.5" y="11.5" width="4" height="3.5" rx="0.6" />
+        <rect x="14" y="11.5" width="4" height="3.5" rx="0.6" />
+        <rect x="20.5" y="11.5" width="4" height="3.5" rx="0.6" />
+        <rect x="7.5" y="17" width="4" height="3.5" rx="0.6" />
+        <rect x="14" y="17" width="4" height="3.5" rx="0.6" />
+    </g>
+    <rect x="20.5" y="17" width="4" height="3.5" rx="0.6" fill="#f8e347" />
 </svg>

package/src/studio/public/graph.js

@@ -143,7 +143,7 @@ function layout(nodes, edges, fresh) {
     if (!moving.length) return;
 
     const pairs = [...neighbors].flatMap(([from, tos]) => [...tos].filter((to) => from < to).map((to) => [from, to]));
-    const ideal = 230;
+    const ideal = 170;
     const rounds = fixed.size ? 200 : 500;
 
     /** @param {string} id */
@@ -206,6 +206,40 @@ 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;
+
+        for (const [index, a] of nodes.entries()) {
+            for (const b of nodes.slice(index + 1)) {
+                const aMoves = !fixed.has(a.id);
+                const bMoves = !fixed.has(b.id);
+                if (!aMoves && !bMoves) continue;
+
+                const pa = at(a.id);
+                const pb = at(b.id);
+                const overlapX = halfWidth(a) + halfWidth(b) + 24 - Math.abs(pa.x - pb.x);
+                const overlapY = 96 - Math.abs(pa.y - pb.y);
+                if (overlapX <= 0 || overlapY <= 0) continue;
+
+                overlapping = true;
+                const share = aMoves && bMoves ? 0.5 : 1;
+                const alongX = overlapX < overlapY * 2;
+                const sign = alongX ? Math.sign(pa.x - pb.x) || 1 : Math.sign(pa.y - pb.y) || 1;
+                const distance = (alongX ? overlapX : overlapY) * share;
+
+                if (aMoves) alongX ? (pa.x += sign * distance) : (pa.y += sign * distance);
+                if (bMoves) alongX ? (pb.x -= sign * distance) : (pb.y -= sign * distance);
+            }
+        }
+
+        if (!overlapping) break;
+    }
+
     savePositions();
 }
 
@@ -380,9 +414,11 @@ function draw() {
         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 device = node.kind === "device";
+        const lines = 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 });
+            const y = device ? (index === 0 ? -9 : 13) : 0;
+            const text = s("text", { class: index === 0 ? "name" : "sub", y });
             text.textContent = line;
             group.append(text);
             return text;
@@ -390,14 +426,30 @@ function draw() {
 
         nodeLayer.append(group);
 
-        // Each box fits its text, so it is measured once drawn.
-        const width = Math.max(...texts.map((text) => text.getComputedTextLength())) + 24;
-        const height = lines.length === 1 ? 28 : 44;
+        // Each box fits its text, so it is measured once drawn. A device's text starts after its chassis mark.
+        const mark = device ? 46 : 0;
+        const width = Math.max(...texts.map((text) => text.getComputedTextLength()), device ? 110 : 0) + 32 + mark;
+        const height = device ? 62 : 34;
         rect.setAttribute("x", String(-width / 2));
         rect.setAttribute("y", String(-height / 2));
         rect.setAttribute("width", String(width));
         rect.setAttribute("height", String(height));
 
+        if (device) {
+            for (const text of texts) text.setAttribute("x", String(-width / 2 + 16 + mark));
+
+            // A small front panel: a chassis with two rows of ports, drawn rather than pictured.
+            const left = -width / 2 + 16;
+            const chassis = s("g", { class: "chassis", "aria-hidden": "true" });
+            chassis.append(s("rect", { x: left, y: -15, width: 34, height: 30, rx: 4 }));
+            for (const row of [0, 1]) {
+                for (const column of [0, 1, 2]) {
+                    chassis.append(s("rect", { class: "socket", x: left + 6 + column * 8, y: -8 + row * 9, width: 6, height: 6, rx: 1 }));
+                }
+            }
+            group.insertBefore(chassis, texts[0] ?? null);
+        }
+
         group.addEventListener("pointerdown", (event) => startDrag(event, node.id));
         group.addEventListener("pointerenter", () => {
             hovered = node.id;
@@ -527,7 +579,15 @@ svg.addEventListener(
     { passive: false }
 );
 
-function fit() {
+/** 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;
+
+/**
+ * Show the whole drawing, or, when that would make it unreadable and `readable` is asked, as much of it as stays readable.
+ *
+ * @param {boolean} [readable]
+ */
+function fit(readable = false) {
     const points = visibleNodes().flatMap((node) => {
         const point = positions.get(node.id);
         return point ? [point] : [];
@@ -537,16 +597,25 @@ function fit() {
     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 width = Math.max(...xs) - Math.min(...xs) + 190;
+    const height = Math.max(...ys) - Math.min(...ys) + 130;
+    const whole = Math.min(Math.max(Math.min(box.width / width, box.height / height), 0.15), 1.8);
+    const k = readable ? Math.max(whole, READABLE) : whole;
+
+    // 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 centre =
+        k > whole && hub && positions.has(hub.id)
+            ? /** @type {Point} */ (positions.get(hub.id))
+            : { x: (Math.max(...xs) + Math.min(...xs)) / 2, y: (Math.max(...ys) + Math.min(...ys)) / 2 };
 
-    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();
 }
 
-byId("fit").addEventListener("click", fit);
+byId("fit").addEventListener("click", () => fit());
 
 byId("lay-out").addEventListener("click", () => {
     if (!data) return;
@@ -870,7 +939,7 @@ export function showLayer(next) {
     draw();
     showPanel();
 
-    if (!drawn && data) fit();
+    if (!drawn && data) fit(true);
     drawn = data !== undefined;
 }
 

package/src/studio/public/index.html

@@ -6,19 +6,16 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Circuit Studio</title>
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <!-- The documentation site's fonts. Offline, the page falls back to the system's. -->
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&display=swap"
-        />
+        <!-- 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 />
         <link rel="stylesheet" href="style.css" />
         <script type="module" src="app.js"></script>
     </head>
     <body>
         <header>
-            <span class="brand" aria-label="Circuit Studio"><span class="wordmark">Circuit</span><span class="product">Studio</span></span>
+            <a class="brand" href="#graph" aria-label="Circuit Studio, back to the graph"
+                ><span class="wordmark">Circuit</span><span class="product">Studio</span></a
+            >
             <nav id="views" aria-label="Views">
                 <button data-view="graph">Graph</button>
                 <button data-view="devices">Devices</button>
@@ -31,8 +28,10 @@
                 <button data-view="problems">Problems<span id="problem-count" class="count"></span></button>
             </nav>
             <input id="search" type="search" placeholder="Search the config" aria-label="Search the config" />
-            <span id="summary" class="summary"></span>
-            <span id="live" class="live">connecting</span>
+            <div class="status-rail" aria-label="Network status">
+                <span id="summary" class="summary"></span>
+                <span id="live" class="live">connecting</span>
+            </div>
         </header>
 
         <pre id="banner" class="banner" hidden></pre>
@@ -44,8 +43,13 @@
                     <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="save-svg" title="Save this layer as an SVG image">Save SVG</button>
-                        <button id="save-png" title="Save this layer as a PNG image">Save PNG</button>
+                        <details class="menu">
+                            <summary>Save image</summary>
+                            <div class="menu-items">
+                                <button id="save-svg" title="Save this layer as an SVG image">SVG</button>
+                                <button id="save-png" title="Save this layer as a PNG image">PNG</button>
+                            </div>
+                        </details>
                     </div>
                 </div>
                 <div class="stage">

package/src/studio/public/special-gothic-license.txt

@@ -0,0 +1,93 @@
+Copyright 2023 The Special Gothic Project Authors (https://github.com/AlistairMcCready/Special-Gothic/)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.