@isothrum/editor 0.0.0-stage → 0.1.0

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+"use client";
+
+/**
+ * The Isothrum lab editor as a reusable React component, plus the ports a host wires in (accounts,
+ * the product mark). The pure lab-model logic (no React) lives in the `./model` entry.
+ */
+export { LabCanvas, type LabCanvasProps } from "@/components/tool/lab-canvas";
+export {
+  AuthClientProvider,
+  useAuthClient,
+  type AuthClient,
+  type AuthSession,
+  type AuthSessionUser,
+} from "@/lib/auth";
+export {
+  BrandMarkProvider,
+  DefaultBrandMark,
+  useBrandMark,
+  type BrandMark,
+  type BrandMarkProps,
+} from "@/lib/brand";

package/src/lib/auth.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+
+/**
+ * The accounts surface the editor uses, injected by the host (the website wires Better Auth; the
+ * desktop app and the standalone editor leave it out and run with `accounts={false}`). Keeping it
+ * an injected port is what lets this package stay free of any auth implementation.
+ */
+export interface AuthSessionUser {
+  name?: string | null;
+  email: string;
+}
+
+export interface AuthSession {
+  user: AuthSessionUser;
+}
+
+export interface AuthClient {
+  /** React hook: the current session (or `null`), and whether it is still loading. */
+  useSession: () => { data: AuthSession | null; isPending: boolean };
+  signOut: () => Promise<unknown> | void;
+  signIn: {
+    oauth2: (options: { providerId: string; callbackURL: string; errorCallbackURL: string }) => Promise<unknown> | void;
+  };
+}
+
+const AuthClientContext = createContext<AuthClient | null>(null);
+
+/** Provides the host's auth client to the editor. Omit it (or pass `null`) to run without accounts. */
+export function AuthClientProvider({ client, children }: { client: AuthClient | null; children: ReactNode }) {
+  return <AuthClientContext.Provider value={client}>{children}</AuthClientContext.Provider>;
+}
+
+/**
+ * The injected auth client. It is present only where accounts are enabled; the editor reads it
+ * solely inside `accounts`-gated UI, so a missing client there is a wiring error, not a normal path.
+ */
+export function useAuthClient(): AuthClient {
+  const client = useContext(AuthClientContext);
+  if (!client) throw new Error("Accounts are enabled but no AuthClient was provided to the editor.");
+  return client;
+}

package/src/lib/brand.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The product mark the empty canvas shows. It is a port so a host can inject its own mark while the
+ * package stays brand-neutral; the default below is the Isothrum mark (the geometry is shared with
+ * the website's favicon and OG images), themed by the host's `--primary` tokens.
+ */
+export interface BrandMarkProps {
+  className?: string;
+}
+
+export type BrandMark = (props: BrandMarkProps) => ReactNode;
+
+const logoMark = {
+  viewBox: "0 0 32 32",
+  radius: 9,
+  fill: "M7.2 8.1 14.6 7.8 14.4 15.3 7 15.5Z M17.6 16.6 25.1 16.3 24.9 24 17.4 23.8Z",
+  stroke: "M14.6 11.6C16.8 11.3 19.4 11.9 21.2 11.7 21.5 13.2 21.1 14.8 21.3 16.4",
+  strokeWidth: 2.25,
+} as const;
+
+/** The default Isothrum mark, themed by `--primary`/`--primary-foreground`. */
+export function DefaultBrandMark({ className }: BrandMarkProps) {
+  return (
+    <svg viewBox={logoMark.viewBox} aria-hidden className={cn("size-7 shrink-0", className)}>
+      <rect width="32" height="32" rx={logoMark.radius} className="fill-primary" />
+      <path d={logoMark.fill} strokeWidth={1} strokeLinejoin="round" className="fill-primary-foreground stroke-primary-foreground" />
+      <path d={logoMark.stroke} fill="none" strokeWidth={logoMark.strokeWidth} strokeLinecap="round" strokeLinejoin="round" className="stroke-primary-foreground" />
+    </svg>
+  );
+}
+
+const BrandMarkContext = createContext<BrandMark>(DefaultBrandMark);
+
+/** Lets a host replace the editor's product mark. Omit it to keep the default Isothrum mark. */
+export function BrandMarkProvider({ mark, children }: { mark: BrandMark; children: ReactNode }) {
+  return <BrandMarkContext.Provider value={mark}>{children}</BrandMarkContext.Provider>;
+}
+
+/** The product mark in use (the injected one, or the default). */
+export function useBrandMark(): BrandMark {
+  return useContext(BrandMarkContext);
+}

package/src/lib/i18n.ts

@@ -0,0 +1,53 @@
+export const LOCALES = ["en", "fr", "es", "de"] as const;
+export const DEFAULT_LOCALE = "en" as const;
+
+export type Locale = (typeof LOCALES)[number];
+
+/** Whether `value` names one of the site's locales. */
+export function hasLocale(value: string): value is Locale {
+  return (LOCALES as readonly string[]).includes(value);
+}
+
+/** Every locale but `locale`. */
+export function otherLocales(locale: string): Locale[] {
+  return LOCALES.filter((l) => l !== locale);
+}
+
+export const localeNames: Record<Locale, string> = {
+  en: "English",
+  fr: "Français",
+  es: "Español",
+  de: "Deutsch",
+};
+
+/**
+ * Replace (or insert) the locale segment in a pathname.
+ * "/en/blog/foo" + "fr" → "/fr/blog/foo"
+ * "/blog/foo"    + "fr" → "/fr/blog/foo"
+ */
+export function withLocale(pathname: string, locale: Locale): string {
+  const segments = pathname.split("/").filter(Boolean);
+  if (segments.length && hasLocale(segments[0])) {
+    segments[0] = locale;
+  } else {
+    segments.unshift(locale);
+  }
+  return "/" + segments.join("/");
+}
+
+/**
+ * Build the absolute-URL hreflang map for a path that exists in every locale.
+ * Useful for static pages (homepage, /blog index, etc).
+ */
+export function hreflangFor(siteUrl: string, pathWithoutLocale: string) {
+  const base = siteUrl.replace(/\/$/, "");
+  const path = pathWithoutLocale.startsWith("/")
+    ? pathWithoutLocale
+    : "/" + pathWithoutLocale;
+  const map: Record<string, string> = {};
+  for (const l of LOCALES) {
+    map[l] = `${base}/${l}${path === "/" ? "" : path}`;
+  }
+  map["x-default"] = `${base}/${DEFAULT_LOCALE}${path === "/" ? "" : path}`;
+  return map;
+}

package/src/lib/tool/blocks.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, test } from "vitest";
+import { LAN_TOOL, NOTE_TOOL, SWITCH_TOOL, allPresets, deviceBlocks, hintFor, toolLabel } from "./blocks";
+import { PRESETS, type Preset } from "./presets";
+import { en } from "./text/en";
+
+const mine: Preset = { id: "my-1", group: "mine", label: "gateway", prefix: "gateway", data: { ...PRESETS[0].data } };
+const blocks = deviceBlocks(allPresets([mine]), [mine], en);
+const options = (id: string) => blocks.find((b) => b.id === id)?.options ?? [];
+
+describe("deviceBlocks", () => {
+  test("has the switch, router, firewall, container and VM blocks, then the saved devices", () => {
+    expect(blocks.map((b) => b.id)).toEqual(["switch", "router", "firewall", "container", "vm", "mine"]);
+    expect(deviceBlocks(PRESETS, [], en).map((b) => b.id)).not.toContain("mine");
+  });
+
+  test("starts the switch block with the switch tool, on key S", () => {
+    expect(options("switch").map((o) => [o.tool, o.key])).toEqual([
+      [SWITCH_TOOL, "S"],
+      ["cisco-iol-l2", null],
+    ]);
+  });
+
+  test("names a built-in device in the editor's words, its hint what it runs when the text gives none", () => {
+    expect(options("router")[0]).toMatchObject({ tool: "router", label: "Router", hint: en.devices.router.hint, key: "1" });
+    expect(options("container")[0]).toMatchObject({ label: "Linux container", hint: "alpine:3.20" });
+    expect(options("vm")[0]).toMatchObject({ label: "Linux VM", hint: "debian@12" });
+  });
+
+  test("names a saved device by its name, its hint what it runs", () => {
+    expect(options("mine")).toEqual([{ tool: "my-1", label: "gateway", hint: "your device: automatic router", preset: mine, key: null }]);
+  });
+});
+
+describe("toolLabel", () => {
+  test("names the LAN, switch and note tools", () => {
+    expect([LAN_TOOL, SWITCH_TOOL, NOTE_TOOL].map((t) => toolLabel(t, PRESETS, en)?.label)).toEqual(["LAN", "Switch", "Note"]);
+  });
+
+  test("names a device by its preset, and nothing when no tool or an unknown one is picked", () => {
+    expect(toolLabel("web", PRESETS, en)?.label).toBe("Web server");
+    expect([toolLabel(null, PRESETS, en), toolLabel("nope", PRESETS, en)]).toEqual([undefined, undefined]);
+  });
+
+  test("names a device the text doesn't know by its id", () => {
+    const odd: Preset = { ...PRESETS[0], id: "odd" };
+    expect(toolLabel("odd", [odd], en)).toEqual({ label: "odd", hint: "" });
+  });
+});
+
+describe("hintFor", () => {
+  const state = { hand: false, nodes: 0, edges: 0 };
+
+  test("says how to place the tool picked", () => {
+    expect(hintFor(LAN_TOOL, "LAN", state, en)).toBe(en.hints.lan);
+    expect(hintFor(NOTE_TOOL, "Note", state, en)).toBe(en.hints.note);
+    expect(hintFor("web", "Web server", state, en)).toBe(en.hints.place("Web server"));
+  });
+
+  test("with no tool: how to move the canvas, then how to cable two machines, then how to select", () => {
+    expect(hintFor(null, undefined, { ...state, hand: true }, en)).toBe(en.hints.hand);
+    expect(hintFor(null, undefined, { ...state, nodes: 2 }, en)).toBe(en.hints.cable);
+    expect(hintFor(null, undefined, { ...state, nodes: 2, edges: 1 }, en)).toBe(en.hints.select);
+  });
+});

package/src/lib/tool/blocks.ts

@@ -0,0 +1,78 @@
+import { PRESETS, shortcutOf, type Preset } from "./presets";
+import type { EditorText } from "./text";
+
+/** The toolbar's blocks: a switch, a router, a firewall, a container, a VM, and the saved devices. */
+
+/** The switch tool's id in the toolbar (devices use their preset ids). */
+export const SWITCH_TOOL = "switch";
+/** The LAN tool's id in the toolbar. */
+export const LAN_TOOL = "lan";
+export const NOTE_TOOL = "note";
+
+/** One kind a block places: a preset (a device), or the switch tool. */
+export interface BlockOption {
+  tool: string;
+  label: string;
+  hint: string;
+  preset?: Preset;
+  key?: string | null;
+}
+export interface Block {
+  id: string;
+  label: string;
+  options: BlockOption[];
+}
+
+/** What a device runs: its OS (a VM), or its image. */
+const runs = (p: Preset) => (p.data.kind === "vm" ? p.data.os : p.data.image);
+
+/** A device's name and hint in the toolbar: the built-in ones by id (the hint, unless the text gives one, is what it runs), a saved one by its name. */
+function presetText(p: Preset, t: EditorText): { label: string; hint: string } {
+  if (p.group !== "mine") {
+    const d = (t.devices as Partial<Record<string, { label: string; hint?: string }>>)[p.id];
+    return d ? { label: d.label, hint: d.hint ?? runs(p) } : { label: p.id, hint: "" };
+  }
+  const what = p.data.kind === "vm" ? p.data.os : p.data.kind === "router" ? t.myDeviceRouter : p.data.image;
+  return { label: p.label ?? p.prefix, hint: t.myDevice(what) };
+}
+
+/** The blocks of the toolbar, each listing the kinds it places (the switch block starts with the switch tool). */
+export function deviceBlocks(presets: Preset[], mine: Preset[], t: EditorText): Block[] {
+  const kinds = (ids: string[]) =>
+    ids.flatMap((id): BlockOption[] => {
+      const p = presets.find((x) => x.id === id);
+      return p ? [{ tool: p.id, ...presetText(p, t), preset: p, key: shortcutOf(p.id) }] : [];
+    });
+  const switchTool: BlockOption = { tool: SWITCH_TOOL, label: t.toolbar.switch, hint: t.toolbar.switchTitle, key: "S" };
+  const blocks: Block[] = [
+    { id: "switch", label: t.toolbar.blocks.switch, options: [switchTool, ...kinds(["cisco-iol-l2"])] },
+    { id: "router", label: t.toolbar.blocks.router, options: kinds(["router", "router-frr", "cisco-iol"]) },
+    { id: "firewall", label: t.toolbar.blocks.firewall, options: kinds(["firewall"]) },
+    { id: "container", label: t.toolbar.blocks.container, options: kinds(["container", "web", "database", "desktop"]) },
+    { id: "vm", label: t.toolbar.blocks.vm, options: kinds(["linux-vm", "ubuntu-vm", "kali-vm", "windows-vm", "workstation"]) },
+  ];
+  if (mine.length) blocks.push({ id: "mine", label: t.toolbar.blocks.mine, options: kinds(mine.map((d) => d.id)) });
+  return blocks;
+}
+
+/** What the tool being placed is called, if any (a LAN, a switch, a note, or a device). */
+export function toolLabel(tool: string | null, presets: Preset[], t: EditorText): { label: string } | undefined {
+  if (tool === LAN_TOOL) return { label: t.toolbar.lan };
+  if (tool === SWITCH_TOOL) return { label: t.toolbar.switch };
+  if (tool === NOTE_TOOL) return { label: t.toolbar.note };
+  const picked = presets.find((p) => p.id === tool);
+  return picked && presetText(picked, t);
+}
+
+/** Every device the toolbar can place: the built-in ones, then the saved ones. */
+export const allPresets = (mine: Preset[]): Preset[] => [...PRESETS, ...mine];
+
+/** The line under the toolbar: what a click does now. */
+export function hintFor(tool: string | null, label: string | undefined, state: { hand: boolean; nodes: number; edges: number }, t: EditorText): string {
+  if (label !== undefined) {
+    if (tool === LAN_TOOL) return t.hints.lan;
+    return tool === NOTE_TOOL ? t.hints.note : t.hints.place(label);
+  }
+  if (state.hand) return t.hints.hand;
+  return state.nodes >= 2 && state.edges === 0 ? t.hints.cable : t.hints.select;
+}

package/src/lib/tool/cable-wiring.test.ts

@@ -0,0 +1,74 @@
+import type { Connection } from "@xyflow/react";
+import { describe, expect, test } from "vitest";
+import { type LabIndex, canConnect, newCable, onLanEdge, reconnected } from "./cables";
+import { autoRouter, cable, lan, machine } from "@/test/lab";
+
+const index: LabIndex = { lanIds: new Set(["office", "dmz"]), switchIds: new Set(["sw1", "sw2"]), routerIds: new Set(["frr"]) };
+const link = (source: string, target: string, sourceHandle: string | null = null, targetHandle: string | null = null): Connection => ({ source, target, sourceHandle, targetHandle });
+/** Every machine's first port is eth0. */
+const fromZero = () => 0;
+
+describe("canConnect", () => {
+  test("joins a machine to a machine, a LAN or a port, and two switches", () => {
+    expect([canConnect(link("a", "b"), index, []), canConnect(link("a", "office"), index, []), canConnect(link("sw1", "sw2"), index, [])]).toEqual([true, true, true]);
+  });
+
+  test("never joins a node to itself, a LAN to a LAN or a switch to a LAN", () => {
+    expect([canConnect(link("a", "a"), index, []), canConnect(link("office", "dmz"), index, []), canConnect(link("sw1", "office"), index, [])]).toEqual([false, false, false]);
+  });
+
+  test("a switch or router port takes one cable, unless that cable is the one moving", () => {
+    const edges = [cable("c1", "a", "sw1", { targetHandle: "p1" }), cable("c2", "frr", "b", { sourceHandle: "eth0" })];
+    expect(canConnect(link("x", "sw1", null, "p1"), index, edges)).toBe(false);
+    expect(canConnect(link("frr", "y", "eth0"), index, edges)).toBe(false);
+    expect(canConnect(link("x", "sw1", null, "p1"), index, edges, "c1")).toBe(true);
+  });
+});
+
+test("onLanEdge is true of an appliance on a LAN's border only", () => {
+  const office = lan("office");
+  const nodes = [office, autoRouter("r", { x: 340, y: 50 }), machine("web", {}, { x: 340, y: 50 })];
+  expect([onLanEdge("r", nodes, [office]), onLanEdge("web", nodes, [office]), onLanEdge("nope", nodes, [office])]).toEqual([true, false, false]);
+});
+
+describe("newCable", () => {
+  const edges = [cable("c1", "a", "b", { aPort: "eth0", bPort: "eth0" })];
+
+  test("labels a machine's end with its next free port", () => {
+    expect(newCable(link("a", "b"), index, edges, fromZero).data).toEqual({ aPort: "eth1", bPort: "eth1" });
+  });
+
+  test("labels a LAN's end with nothing, a switch's with the port, a router's with its port", () => {
+    expect(newCable(link("office", "sw1", null, "p3"), index, [], fromZero).data).toEqual({ aPort: "", bPort: "3" });
+    expect(newCable(link("frr", "a", "eth2"), index, edges, fromZero).data).toEqual({ aPort: "eth2", bPort: "eth1" });
+  });
+
+  test("gives a machine's first port from where it is told to start", () => {
+    expect(newCable(link("r", "a"), index, [], (n) => (n === "r" ? 1 : 0)).data).toEqual({ aPort: "eth1", bPort: "eth0" });
+  });
+
+  test("plugs into the handles of the connection, under a new id", () => {
+    const c = newCable(link("a", "sw1", "bottom", "p2"), index, [], fromZero);
+    expect(c).toMatchObject({ type: "cable", source: "a", sourceHandle: "bottom", target: "sw1", targetHandle: "p2" });
+    expect(c.id).toMatch(/^c-/);
+  });
+});
+
+describe("reconnected", () => {
+  const old = cable("c1", "a", "b", { aPort: "eth3", bPort: "eth0" });
+  const edges = [old, cable("c2", "d", "x", { aPort: "eth0", bPort: "eth0" })];
+
+  test("an end that stays on its machine keeps its port", () => {
+    const moved = reconnected(edges, old, link("a", "d", "bottom"), index, fromZero);
+    expect(moved[0]).toMatchObject({ source: "a", sourceHandle: "bottom", target: "d", data: { aPort: "eth3", bPort: "eth1" } });
+  });
+
+  test("an end moved onto a switch or a LAN takes its label there", () => {
+    const moved = reconnected(edges, old, link("a", "sw1", null, "p4"), index, fromZero);
+    expect(moved[0].data).toEqual({ aPort: "eth3", bPort: "4" });
+  });
+
+  test("leaves the other cables as they are", () => {
+    expect(reconnected(edges, old, link("a", "office"), index, fromZero)[1]).toBe(edges[1]);
+  });
+});

package/src/lib/tool/cables.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, test } from "vitest";
+import { machineEnds, migrateEdges, networkOfCable, nextPort } from "./cables";
+import { autoRouter, cable, lan, machine, realRouter, switchNode } from "@/test/lab";
+
+describe("migrateEdges", () => {
+  const nodes = [machine("web"), autoRouter("r"), realRouter("frr"), lan("office"), switchNode("sw1")];
+
+  test("moves a machine's cable onto its top, or its bottom when it was there", () => {
+    const edges = migrateEdges([cable("c1", "web", "office", { sourceHandle: "left", targetHandle: "right" }), cable("c2", "office", "web", { targetHandle: "bottom" })], nodes);
+    expect(edges.map((e) => [e.sourceHandle, e.targetHandle])).toEqual([
+      ["top", "right"],
+      [null, "bottom"],
+    ]);
+  });
+
+  test("moves an appliance's cable onto its single port", () => {
+    expect(migrateEdges([cable("c", "r", "office", { sourceHandle: "right" })], nodes)[0].sourceHandle).toBe("port");
+  });
+
+  test("keeps a real router's port, and gives a cable on none the first free one", () => {
+    const edges = migrateEdges([cable("c1", "frr", "office", { sourceHandle: "eth0" }), cable("c2", "sw1", "frr", { sourceHandle: "p1", targetHandle: "top" })], nodes);
+    expect(edges.map((e) => [e.sourceHandle, e.targetHandle])).toEqual([
+      ["eth0", null],
+      ["p1", "eth1"],
+    ]);
+  });
+});
+
+describe("nextPort", () => {
+  const edges = [cable("c1", "web", "db", { aPort: "eth0", bPort: "eth0" }), cable("c2", "fw", "web", { aPort: "eth0", bPort: "eth1" })];
+
+  test("gives the first eth<n> no cable of the machine uses, at either end", () => {
+    expect(nextPort("web", edges)).toBe("eth2");
+    expect(nextPort("db", edges)).toBe("eth1");
+    expect(nextPort("new", edges)).toBe("eth0");
+  });
+
+  test("starts from the port it is given (eth0 taken on a LAN's edge)", () => {
+    expect(nextPort("new", edges, 1)).toBe("eth1");
+  });
+});
+
+describe("networkOfCable", () => {
+  const nodes = [lan("office"), switchNode("sw1"), machine("a"), machine("b"), machine("c"), machine("x", { name: "" })];
+  const edges = [
+    cable("toLan", "office", "a"),
+    cable("access", "a", "sw1", { targetHandle: "p3" }),
+    cable("trunk", "sw1", "b", { sourceHandle: "trunk" }),
+    cable("free", "c", "sw1", { targetHandle: "p6" }),
+    cable("ab", "a", "b"),
+    cable("toNameless", "a", "x"),
+    cable("bc", "b", "c"),
+  ];
+  const net = (id: string) => networkOfCable(id, nodes, edges);
+
+  test("a cable to a LAN is that LAN", () => {
+    expect(net("toLan")).toBe("office");
+  });
+
+  test("a cable on a switch's access port is its VLAN; on a trunk or a free port, no one network", () => {
+    expect([net("access"), net("trunk"), net("free")]).toEqual(["vlan20", null, null]);
+  });
+
+  test("cables between named machines are links numbered in order", () => {
+    expect([net("ab"), net("bc")]).toEqual(["link-0", "link-1"]);
+  });
+
+  test("a cable to a nameless machine, or an unknown cable, is no network", () => {
+    expect([net("toNameless"), net("nope")]).toEqual([null, null]);
+  });
+});
+
+test("machineEnds names the ends of a cable that are machines", () => {
+  expect(machineEnds(cable("c", "web", "office"), [machine("web"), lan("office")])).toEqual(["web"]);
+});