@takodotid/circuit 0.20.0 → 0.22.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.22.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

@@ -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";
@@ -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`. */
@@ -90,10 +99,22 @@ 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);
 
+// 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;
 
@@ -141,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/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>