@isothrum/editor 0.0.0-stage → 0.1.0

package/src/components/tool/canvas/cable-edge.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useContext, useMemo } from "react";
+import { BaseEdge, EdgeLabelRenderer, Position, getSmoothStepPath, getStraightPath, type EdgeProps } from "@xyflow/react";
+import { Unplug } from "lucide-react";
+import { conditionsLabel } from "@/lib/tool/conditions";
+import type { CableStatus } from "@/lib/tool/live";
+import type { CableEdge } from "@/lib/tool/model";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { LiveContext } from "./contexts";
+import { Sketch, gen, seedOf, useBusiness, useSketch } from "./sketch";
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+const translate = (p: Point) => `translate(-50%, -50%) translate(${String(p.x)}px, ${String(p.y)}px)`;
+
+function PortLabel({ at, text }: { at: Point; text?: string }) {
+  if (!text) return null;
+  return (
+    <div style={{ transform: translate(at) }} className="nodrag nopan pointer-events-none absolute rounded-sm border bg-card px-1 py-px font-mono text-[10px] leading-none text-muted-foreground">
+      {text}
+    </div>
+  );
+}
+
+/**
+ * Where a cable runs and where its labels sit. Business: right angles with rounded corners, as in
+ * a diagramming tool, a port's name just off its port in the direction the cable leaves; sketch:
+ * straight, the names along the line.
+ */
+function cableGeometry(p: EdgeProps<CableEdge>, business: boolean) {
+  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = p;
+  const [path, midX, midY] = business
+    ? getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius: 10, offset: 18 })
+    : getStraightPath({ sourceX, sourceY, targetX, targetY });
+  const along = (f: number) => ({ x: sourceX + (targetX - sourceX) * f, y: sourceY + (targetY - sourceY) * f });
+  const off = (x: number, y: number, side: Position) => ({
+    x: x + (side === Position.Left ? -18 : side === Position.Right ? 18 : 0),
+    y: y + (side === Position.Top ? -14 : side === Position.Bottom ? 14 : 0),
+  });
+  return {
+    path,
+    middle: business ? { x: midX, y: midY } : along(0.5),
+    a: business ? off(sourceX, sourceY, sourcePosition) : along(0.18),
+    b: business ? off(targetX, targetY, targetPosition) : along(0.82),
+  };
+}
+
+/** The running lab: a cable says whether it carries traffic. */
+function LiveBadge({ live, at }: { live: Exclude<CableStatus, "unknown">; at: Point }) {
+  const t = useText().canvas.live;
+  return (
+    <div title={t.cable[live]} style={{ transform: translate(at) }} className="nodrag nopan pointer-events-auto absolute">
+      {live === "up" ? (
+        <span className="block size-2 rounded-full bg-success ring-2 ring-background" aria-label={t.cable.up} />
+      ) : (
+        <span className={cn("flex items-center gap-1 rounded-sm border bg-card px-1 py-px text-[10px] leading-none whitespace-nowrap", live === "cut" ? "border-destructive/50 text-destructive" : "text-muted-foreground")}>
+          <Unplug className="size-2.5" aria-hidden /> {t.cableShort[live]}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/** The line itself, in the color of the VLAN or network on the port it's plugged into. */
+function CableLine({ p, path, live, stroke }: { p: EdgeProps<CableEdge>; path: string; live: CableStatus | undefined; stroke: string }) {
+  const business = useBusiness();
+  const sketch = useSketch();
+  const { id, sourceX, sourceY, targetX, targetY, selected } = p;
+  const line = useMemo(
+    () => gen.line(sourceX, sourceY, targetX, targetY, { ...sketch, seed: seedOf(id), stroke: "S", strokeWidth: selected ? 2.5 : 1.5 }),
+    [id, sourceX, sourceY, targetX, targetY, selected, sketch],
+  );
+  const broken = live === "cut" || live === "down";
+  if (business) {
+    return <path d={path} fill="none" style={{ stroke, strokeWidth: selected ? 2.25 : 1.5, strokeLinejoin: "round", strokeDasharray: broken ? "6 5" : undefined, opacity: live === "down" ? 0.4 : 1 }} />;
+  }
+  const opacity = live === "down" ? 0.35 : selected ? 1 : p.data?.color ? 0.95 : 0.7;
+  return <Sketch drawable={line} stroke={stroke} opacity={opacity} dash={broken ? "7 6" : undefined} />;
+}
+
+/** A cable: a hand-drawn line with the port name next to each end, as in GNS3. */
+export function CableEdgeView(p: EdgeProps<CableEdge>) {
+  const { id, data, selected } = p;
+  const business = useBusiness();
+  const { path, middle, a, b } = cableGeometry(p, business);
+  const live = useContext(LiveContext)?.cables[id];
+  const stroke = selected ? "var(--signal)" : live === "cut" ? "var(--destructive)" : (data?.color ?? (business ? "#64748b" : "var(--foreground)"));
+  const conditions = conditionsLabel(data?.tc);
+  return (
+    <>
+      {/* The straight path is invisible: it only gives the cable a wide, easy target to click. */}
+      <BaseEdge id={id} path={path} interactionWidth={18} style={{ stroke: "transparent" }} />
+      <CableLine p={p} path={path} live={live} stroke={stroke} />
+      <EdgeLabelRenderer>
+        {live && live !== "unknown" && <LiveBadge live={live} at={{ x: middle.x, y: middle.y + (conditions ? 14 : 0) }} />}
+        <PortLabel at={a} text={data?.aPort} />
+        <PortLabel at={b} text={data?.bPort} />
+        {/* A slow or lossy cable says so in its middle. */}
+        {conditions && (
+          <div style={{ transform: translate(middle) }} className="nodrag nopan pointer-events-none absolute rounded-sm border bg-pastel-yellow px-1 py-px font-mono text-[10px] leading-none whitespace-nowrap text-foreground">
+            {conditions}
+          </div>
+        )}
+      </EdgeLabelRenderer>
+    </>
+  );
+}

package/src/components/tool/canvas/contexts.ts

@@ -0,0 +1,18 @@
+import { createContext } from "react";
+import type { LiveView } from "@/lib/tool/live";
+import type { Side } from "@/lib/tool/model";
+import type { Addresses, RouterPorts } from "@/lib/tool/router-ports";
+
+/** What the canvas's nodes and cables read from the editor, without props through React Flow. */
+
+/** Each machine's addresses (from the engine), by machine name: [network, IPv4][]. */
+export const AddressesContext = createContext<Addresses>({});
+
+/** Each real router's interfaces, by node id. */
+export const PortsContext = createContext<Partial<Record<string, RouterPorts>>>({});
+
+/** The running lab as the desktop app reads it (null: not running, or in a browser). */
+export const LiveContext = createContext<LiveView | null>(null);
+
+/** The LAN border each appliance sits on, by node id (so its port can face out), and the side each switch or router port faces, by `<id>:<port>`. */
+export const SidesContext = createContext<Partial<Record<string, Side>>>({});

package/src/components/tool/canvas/device-icon.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import { Container, Laptop, Monitor, Router, Server, Shield, type LucideIcon } from "lucide-react";
+import type { SimpleIcon } from "simple-icons";
+import { dockerLogo, isDark, logoFor } from "@/lib/tool/logos";
+import type { IconId, MachineData } from "@/lib/tool/model";
+import { cn } from "@/lib/utils";
+
+/** By icon id; a node from a link or an old draft may name one we don't have: a container then. */
+const ICONS: Partial<Record<string, LucideIcon>> = {
+  container: Container,
+  server: Server,
+  router: Router,
+  shield: Shield,
+  monitor: Monitor,
+  laptop: Laptop,
+};
+
+/** What a machine is for, as people say it: its role in the lab. */
+export function roleOf(m: Pick<MachineData, "kind" | "icon" | "image">): "router" | "firewall" | "workstation" | "server" | "desktop" | "host" {
+  if (m.icon === "router") return "router";
+  if (m.icon === "shield") return "firewall";
+  if (m.icon === "laptop") return "workstation";
+  if (m.icon === "server") return "server";
+  if (m.icon === "monitor") return m.kind === "vm" ? "host" : "desktop";
+  return "host";
+}
+
+/** Business: a device's accent, by what it is (the pastels' strong counterparts). */
+export function accentFor(m: Pick<MachineData, "kind" | "icon">): string {
+  if (m.icon === "router") return "#d97706";
+  if (m.icon === "shield") return "#dc2626";
+  if (m.icon === "laptop") return "#7c3aed";
+  return m.kind === "vm" ? "#0d9488" : "#2563eb";
+}
+
+/** Each kind of device has its pastel, as on a whiteboard. */
+export function pastelFor(m: Pick<MachineData, "kind" | "icon">): string {
+  if (m.icon === "router") return "var(--pastel-yellow)";
+  if (m.icon === "shield") return "var(--pastel-red)";
+  if (m.icon === "laptop") return "var(--pastel-violet)";
+  return m.kind === "vm" ? "var(--pastel-green)" : "var(--pastel-blue)";
+}
+
+/** Roles whose icon says more than the OS logo would: the logo becomes a small badge. */
+const ROLE_ICONS: IconId[] = ["router", "laptop", "shield"];
+
+/**
+ * A brand logo in its own color. On the dark theme the color is lifted toward white, so deep
+ * brand colors (Alpine, Kali, PostgreSQL) stay readable while keeping their hue.
+ */
+function BrandLogo({ icon, className }: { icon: SimpleIcon; className?: string }) {
+  const dark = isDark(icon.hex);
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      role="img"
+      aria-label={icon.title}
+      className={cn(className, !dark && "fill-[var(--logo)] dark:fill-[color-mix(in_oklab,var(--logo)_60%,white)]")}
+      style={{ "--logo": `#${icon.hex}` } as CSSProperties}
+    >
+      <path d={icon.path} fill={dark ? "currentColor" : undefined} />
+    </svg>
+  );
+}
+
+/** The tile's look: tinted with the accent (business), the pastel (a small one), or plain. */
+function tileStyle(data: Pick<MachineData, "kind" | "icon">, size: "sm" | "md", accent: string | undefined): CSSProperties | undefined {
+  if (accent) return { backgroundColor: `color-mix(in oklab, ${accent} 11%, var(--card))`, boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${accent} 22%, transparent)` };
+  return size === "sm" ? { backgroundColor: pastelFor(data) } : undefined;
+}
+
+/**
+ * A device's picture: the logo of what it runs (its OS or image) when we know one, otherwise
+ * a generic icon. Routers and workstations keep their role icon, with the OS logo as a badge.
+ */
+export function DeviceIcon({
+  data,
+  size = "md",
+  accent,
+}: {
+  data: Pick<MachineData, "kind" | "image" | "os" | "icon">;
+  size?: "sm" | "md";
+  /** Business: the tile takes this tint, its glyph this color. */
+  accent?: string;
+}) {
+  const logo = logoFor(data) ?? (data.kind === "container" ? dockerLogo : null);
+  const role = ROLE_ICONS.includes(data.icon);
+  const Icon = ICONS[data.icon] ?? Container;
+  const glyph = size === "md" ? "size-6" : "size-4";
+  return (
+    <span
+      className={cn("relative grid shrink-0 place-items-center bg-background text-foreground ring-1 ring-foreground/10", size === "md" ? "size-11 rounded-lg" : "size-8 rounded-md")}
+      style={tileStyle(data, size, accent)}
+    >
+      {logo && !role ? <BrandLogo icon={logo} className={cn(glyph, "text-foreground")} /> : <Icon className={glyph} style={accent ? { color: accent } : undefined} aria-hidden />}
+      {logo && role && (
+        <span className="absolute -right-1.5 -bottom-1.5 grid size-5 place-items-center rounded-full border bg-card shadow-sm">
+          <BrandLogo icon={logo} className="size-3 text-foreground" />
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/tool/canvas/inline-text.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState, type KeyboardEvent } from "react";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+
+interface InlineTextProps {
+  value: string;
+  onCommit: (v: string) => void;
+  clean?: (v: string) => string;
+  className?: string;
+  label: string;
+  /** Clearing the field means something (e.g. "back to automatic"), so an empty value counts. */
+  allowEmpty?: boolean;
+}
+
+/** The field while editing: as wide as the text, not the box around it. */
+function InlineField({ draft, setDraft, done, clean, className, label }: { draft: string; setDraft: (v: string) => void; done: (keep: boolean) => void } & Pick<InlineTextProps, "clean" | "className" | "label">) {
+  return (
+    <input
+      autoFocus
+      aria-label={label}
+      value={draft}
+      // As wide as the text, not the box around it: the width follows what is typed.
+      size={1}
+      style={{ width: `${String(Math.max(3, draft.length) + 1.5)}ch`, fieldSizing: "content", minWidth: "3ch" }}
+      onChange={(e) => {
+        setDraft(clean ? clean(e.target.value) : e.target.value);
+      }}
+      onBlur={() => {
+        done(true);
+      }}
+      onKeyDown={(e: KeyboardEvent) => {
+        e.stopPropagation();
+        if (e.key === "Enter") done(true);
+        if (e.key === "Escape") done(false);
+      }}
+      className={cn("nodrag nopan w-auto max-w-[260px] rounded-sm bg-background px-0.5 outline-none ring-2 ring-signal", className)}
+    />
+  );
+}
+
+/**
+ * Text edited in place, as in Excalidraw: double-click to edit, Enter or a click elsewhere to
+ * keep, Escape to drop. `nodrag` so typing never moves the node.
+ */
+export function InlineText({ value, onCommit, clean, className, label, allowEmpty = false }: InlineTextProps) {
+  const t = useText().canvas;
+  const [draft, setDraft] = useState<string | null>(null);
+  if (draft === null) {
+    return (
+      <span
+        title={t.editTitle(label)}
+        onDoubleClick={(e) => {
+          e.stopPropagation();
+          setDraft(value);
+        }}
+        className={cn("cursor-text", className)}
+      >
+        {value || t.unnamed}
+      </span>
+    );
+  }
+  const done = (keep: boolean) => {
+    if (keep && (draft.trim() || allowEmpty)) onCommit(draft.trim());
+    setDraft(null);
+  };
+  return <InlineField draft={draft} setDraft={setDraft} done={done} clean={clean} className={className} label={label} />;
+}

package/src/components/tool/canvas/lan-node.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useContext, useMemo } from "react";
+import { Handle, NodeResizer, Position, useReactFlow, type NodeProps } from "@xyflow/react";
+import { Eye, EyeOff, Globe, GlobeLock } from "lucide-react";
+import { conditionsLabel } from "@/lib/tool/conditions";
+import { LAN_H, LAN_W, cleanName, type LanData, type LanNode } from "@/lib/tool/model";
+import { vlanColor, vlanOf } from "@/lib/tool/vlans";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { AddressesContext, LiveContext } from "./contexts";
+import { InlineText } from "./inline-text";
+import { SKETCH, Sketch, gen, seedOf, useSketch, type Drawable } from "./sketch";
+
+const SIDES = [
+  ["top", Position.Top],
+  ["right", Position.Right],
+  ["bottom", Position.Bottom],
+  ["left", Position.Left],
+] as const;
+
+/** Business: a panel, its header a band in the LAN's color. */
+function LanPanel({ tint, selected }: { tint: string | null; selected: boolean }) {
+  const color = tint ?? "#2563eb";
+  return (
+    <div
+      aria-hidden
+      className={cn("pointer-events-none absolute inset-0 rounded-xl border", selected && "ring-2 ring-signal/25")}
+      style={{ background: `color-mix(in oklab, ${color} 4%, var(--background))`, borderColor: selected ? "var(--signal)" : `color-mix(in oklab, ${color} 30%, var(--border))` }}
+    >
+      <div className="h-10 rounded-t-xl border-b" style={{ background: `color-mix(in oklab, ${color} 9%, var(--background))`, borderColor: `color-mix(in oklab, ${color} 18%, var(--border))` }} />
+    </div>
+  );
+}
+
+/** Sketch: a dashed area in the LAN's tint (a VLAN's color), or a pale blue. */
+function LanSketch({ frame, tint, selected, w, h }: { frame: Drawable; tint: string | null; selected: boolean; w: number; h: number }) {
+  return (
+    <svg aria-hidden className="pointer-events-none absolute inset-0 overflow-visible" width={w} height={h}>
+      <Sketch
+        drawable={frame}
+        fill={tint ? `color-mix(in oklab, ${tint} 9%, transparent)` : "color-mix(in oklab, var(--pastel-blue) 45%, transparent)"}
+        stroke={selected ? "var(--signal)" : (tint ?? "var(--muted-foreground)")}
+        dash="10 7"
+      />
+    </svg>
+  );
+}
+
+/** Where cables plug in (kept while the area is hidden, cables may hang on them), and the border: the LAN's grip, to move it and everything in it. */
+function LanGrips({ hidden }: { hidden: boolean }) {
+  const grips = ["top-0 inset-x-0 h-3 -translate-y-1/2", "bottom-0 inset-x-0 h-3 translate-y-1/2", "left-0 inset-y-0 w-3 -translate-x-1/2", "right-0 inset-y-0 w-3 translate-x-1/2"] as const;
+  return (
+    <>
+      {SIDES.map(([side, position]) => (
+        <Handle
+          key={side}
+          id={side}
+          type="source"
+          position={position}
+          style={hidden ? { opacity: 0 } : undefined}
+          className="pointer-events-auto !z-10 !size-3 !border-2 !border-background !bg-muted-foreground/40 transition-colors hover:!bg-signal"
+        />
+      ))}
+      {!hidden && grips.map((place) => <div key={place} aria-hidden className={cn("lan-handle pointer-events-auto absolute cursor-move", place)} />)}
+    </>
+  );
+}
+
+/** Business: how many machines a LAN has. */
+function LanHosts({ name }: { name: string }) {
+  const t = useText().canvas;
+  const n = Object.values(useContext(AddressesContext)).filter((ips) => ips?.some(([net]) => net === name)).length;
+  return <span className="rounded-sm px-1 text-[10px] whitespace-nowrap text-muted-foreground">{t.hosts(n)}</span>;
+}
+
+/** A running LAN's ports up, out of all: green when all are, amber when some aren't. */
+function LanLive({ name }: { name: string }) {
+  const t = useText().canvas.live;
+  const lan = useContext(LiveContext)?.lans[name];
+  if (!lan?.total) return null;
+  const all = lan.up === lan.total;
+  return (
+    <span title={t.lanPorts(lan.up, lan.total)} className={cn("flex items-center gap-1 rounded-sm px-1 font-mono text-[10px] whitespace-nowrap", all ? "bg-success/15 text-success" : "bg-warning/20 text-foreground")}>
+      <span className={cn("size-1.5 rounded-full", all ? "bg-success" : "bg-warning")} aria-hidden />
+      {lan.up}/{lan.total}
+    </span>
+  );
+}
+
+/** The label: also a grip; double-click the name or the block to edit them in place. */
+function LanLabel({ id, data, crisp }: { id: string; data: LanData; crisp: boolean }) {
+  const t = useText().canvas;
+  const { updateNodeData } = useReactFlow();
+  const hidden = !!data.hidden;
+  const conditions = conditionsLabel(data.tc);
+  const toggle = "nodrag grid size-5 place-items-center rounded text-muted-foreground hover:bg-muted hover:text-foreground";
+  return (
+    <div className="lan-handle pointer-events-auto absolute top-1.5 left-2 flex cursor-move items-center gap-2 rounded-md px-1.5 py-1 hover:bg-background/70">
+      <InlineText label={t.lanName} value={data.name} clean={cleanName} onCommit={(name) => { updateNodeData(id, { name }); }} className="font-heading text-base font-semibold" />
+      <InlineText
+        label={t.addressBlock}
+        value={data.cidr}
+        clean={(v) => v.replace(/[^0-9./]/g, "")}
+        onCommit={(cidr) => { updateNodeData(id, { cidr }); }}
+        className="font-mono text-[11px] text-muted-foreground in-data-[design=business]:rounded in-data-[design=business]:border in-data-[design=business]:bg-background in-data-[design=business]:px-1.5 in-data-[design=business]:py-px"
+      />
+      {conditions && <span className="rounded-sm bg-pastel-yellow/70 px-1 font-mono text-[10px] whitespace-nowrap text-foreground">{conditions}</span>}
+      {crisp && <LanHosts name={data.name} />}
+      <LanLive name={data.name} />
+      <button type="button" onClick={() => { updateNodeData(id, { internet: !data.internet }); }} title={data.internet ? t.internetOnTitle : t.internetOffTitle} aria-label={data.internet ? t.internetOn : t.internetOff} className={toggle}>
+        {data.internet ? <Globe className="size-3.5" /> : <GlobeLock className="size-3.5 text-warning" />}
+      </button>
+      <button type="button" onClick={() => { updateNodeData(id, { hidden: !hidden }); }} title={hidden ? t.showAreaTitle : t.hideAreaTitle} aria-label={hidden ? t.showArea : t.hideArea} className={toggle}>
+        {hidden ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+      </button>
+    </div>
+  );
+}
+
+/**
+ * A LAN on the canvas: a sketched, dashed area behind the machines, with its name and block.
+ * Machines inside it are on it; a cable from a machine to its edge puts that machine on it too
+ * (how a router joins several LANs). Resizable from its corners when selected.
+ */
+export function LanNodeView({ id, data, selected, width, height }: NodeProps<LanNode>) {
+  const hidden = !!data.hidden;
+  // A LAN named vlan<n> is that VLAN: it takes the VLAN's color, as on the switches.
+  const vlan = vlanOf(data.name);
+  const tint = vlan === null ? null : vlanColor(vlan);
+  const w = width ?? LAN_W;
+  const h = height ?? LAN_H;
+  const sketch = useSketch();
+  const frame = useMemo(
+    () => gen.rectangle(2, 2, w - 4, h - 4, { ...sketch, roughness: sketch.roughness && 0.8, seed: seedOf(id), fill: "F", fillStyle: "solid", stroke: "S", strokeWidth: selected ? 2 : 1.4 }),
+    [id, w, h, selected, sketch],
+  );
+  return (
+    <div style={{ width: w, height: h }} className="group relative">
+      <NodeResizer isVisible={selected} minWidth={200} minHeight={160} lineClassName="!border-transparent" handleClassName="pointer-events-auto !z-10 !size-2.5 !rounded-sm !border-signal !bg-background" />
+      {/* Hidden: no rectangle, no grips; the label stays, to edit the LAN or show it again. */}
+      {!hidden && sketch === SKETCH && <LanSketch frame={frame} tint={tint} selected={selected} w={w} h={h} />}
+      {!hidden && sketch !== SKETCH && <LanPanel tint={tint} selected={selected} />}
+      <LanGrips hidden={hidden} />
+      <LanLabel id={id} data={data} crisp={sketch !== SKETCH} />
+    </div>
+  );
+}

package/src/components/tool/canvas/machine-addresses.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useContext } from "react";
+import { useReactFlow } from "@xyflow/react";
+import { Disc3, Package, Pin } from "lucide-react";
+import type { MachineData } from "@/lib/tool/model";
+import { pinned } from "@/lib/tool/pins";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { AddressesContext, LiveContext } from "./contexts";
+import { InlineText } from "./inline-text";
+
+/** A machine's LAN addresses ([network, IPv4]; cables' /29 left out), whether each port is down, and fixing one by hand. */
+function useAddresses(id: string, data: MachineData) {
+  const { updateNodeData } = useReactFlow();
+  const ips = (useContext(AddressesContext)[data.name] ?? []).filter(([net]) => !net.startsWith("link-"));
+  const ports = useContext(LiveContext)?.ports;
+  // Double-click an address to fix it by hand (same block, a new last number); clear it to go
+  // back to the next free one.
+  const pin = (net: string, ip: string, typed: string) => {
+    const pins = pinned(data.pins, net, ip, typed);
+    if (pins) updateNodeData(id, { pins });
+  };
+  const down = (net: string) => ports?.[`${data.name}/${net}`] === false;
+  return { ips, pin, down };
+}
+
+/** An address's tooltip: the network, whether it is fixed, and whether its port is down. */
+function useAddressTitle(data: MachineData) {
+  const t = useText().canvas;
+  return (net: string, down: boolean) => {
+    const title = t.addressTitle(net, !!data.pins?.[net]);
+    return down ? `${t.live.portDown} · ${title}` : title;
+  };
+}
+
+const onlyAddressChars = (v: string) => v.replace(/[^0-9.]/g, "");
+
+/** An address, edited in place. */
+function Address({ id, data, net, ip, className }: { id: string; data: MachineData; net: string; ip: string; className?: string }) {
+  const t = useText().canvas;
+  const { pin } = useAddresses(id, data);
+  return <InlineText allowEmpty label={t.addressOn(net)} value={ip} clean={onlyAddressChars} onCommit={(v) => { pin(net, ip, v); }} className={className} />;
+}
+
+/** What a machine runs, in a short form: its OS, or its image's last part. */
+function runsOf(data: MachineData): string | undefined {
+  if (data.kind === "vm") return data.os;
+  return data.kind === "container" ? data.image.split("/").pop() : "";
+}
+
+/**
+ * Business: what an asset card says about a machine, in labelled rows: its addresses (two at
+ * most, then how many more), and what it runs (its image or OS).
+ */
+export function MachineFacts({ id, data }: { id: string; data: MachineData }) {
+  const t = useText().canvas;
+  const { ips, down } = useAddresses(id, data);
+  const title = useAddressTitle(data);
+  const runs = runsOf(data);
+  const shown = ips.slice(0, 2);
+  // The automatic router has no address of its own: nothing to list.
+  if (!shown.length && !runs) return null;
+  return (
+    <dl className="mt-2 grid w-full grid-cols-[12px_minmax(0,1fr)] items-center gap-x-1.5 gap-y-[3px] border-t pt-1.5 text-[10px] leading-tight">
+      {shown.map(([net, ip], i) => (
+        <div key={net} className="contents">
+          <dt className="text-[8.5px] font-semibold text-muted-foreground/80">{i === 0 ? "IP" : ""}</dt>
+          <dd title={title(net, down(net))} className={cn("nodrag flex min-w-0 items-center gap-0.5 font-mono", down(net) && "text-destructive line-through")}>
+            <Address id={id} data={data} net={net} ip={ip} className="truncate" />
+            {data.pins?.[net] !== undefined && <Pin className="size-2.5 shrink-0 text-signal" aria-label={t.fixed} />}
+            {i === 1 && ips.length > 2 && (
+              <span className="shrink-0 font-sans text-muted-foreground" title={ips.slice(2).map(([n, a]) => `${n}: ${a}`).join("\n")}>
+                +{ips.length - 2}
+              </span>
+            )}
+          </dd>
+        </div>
+      ))}
+      {runs && (
+        <>
+          <dt className="text-muted-foreground/80" title={data.kind === "vm" ? "OS" : t.imageShort}>
+            {data.kind === "vm" ? <Disc3 className="size-3" aria-label="OS" /> : <Package className="size-3" aria-label={t.imageShort} />}
+          </dt>
+          <dd className="truncate font-mono text-muted-foreground" title={data.kind === "vm" ? data.os : data.image}>
+            {runs}
+          </dd>
+        </>
+      )}
+    </dl>
+  );
+}
+
+/** The machine's IPs, under its box, as on a network diagram. */
+export function MachineAddresses({ id, data }: { id: string; data: MachineData }) {
+  const t = useText().canvas;
+  const { ips, down } = useAddresses(id, data);
+  const title = useAddressTitle(data);
+  if (!ips.length) return null;
+  return (
+    <div className="pointer-events-none absolute top-full left-1/2 mt-1.5 flex -translate-x-1/2 flex-col items-center gap-0.5">
+      {ips.map(([net, ip]) => (
+        <span
+          key={net}
+          title={title(net, down(net))}
+          className={cn(
+            "nodrag pointer-events-auto flex items-center gap-0.5 rounded-sm bg-background/90 px-1 font-mono text-[10px] leading-tight whitespace-nowrap text-foreground",
+            down(net) && "text-destructive line-through",
+          )}
+        >
+          {data.pins?.[net] !== undefined && <Pin className="size-2.5 text-signal" aria-label={t.fixed} />}
+          <Address id={id} data={data} net={net} ip={ip} />
+        </span>
+      ))}
+    </div>
+  );
+}