@isothrum/editor 0.0.0-stage → 0.1.0

package/src/components/tool/hooks/use-downloads.ts

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import type { Engine, Plan } from "@/lib/tool/engine";
+
+/** Saves `blob` as `filename`, through a link the browser follows. */
+function download(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+const zip = (bytes: Uint8Array) => new Blob([bytes as BlobPart], { type: "application/zip" });
+
+/** The Export window's downloads: the whole lab, one target, or isoloom.yml alone. */
+export function useDownloads(engine: Engine | null, plan: Plan | null, topology: string, labName: string) {
+  const [downloadError, setDownloadError] = useState<string | null>(null);
+  /** Builds a zip with the engine and saves it, or says why it couldn't. */
+  function save(build: (engine: Engine) => Uint8Array, filename: string) {
+    if (!engine) return;
+    setDownloadError(null);
+    try {
+      download(zip(build(engine)), filename);
+    } catch (e) {
+      setDownloadError(String(e));
+    }
+  }
+  return {
+    downloadError,
+    downloadAll: () => {
+      save((e) => e.bundle(topology), `${labName || "lab"}.zip`);
+    },
+    /** One target's zip: isoloom.yml and that target's folder. */
+    downloadTarget: (dir: string) => {
+      save((e) => e.bundle_target(topology, dir), `${labName || "lab"}-${dir.replace(/\//g, "-")}.zip`);
+    },
+    downloadSpec: () => {
+      if (plan?.isoloom_yml) download(new Blob([plan.isoloom_yml], { type: "text/yaml" }), "isoloom.yml");
+    },
+  };
+}

package/src/components/tool/hooks/use-editor.ts

@@ -0,0 +1,114 @@
+import { useMemo, useState, type RefObject } from "react";
+import { useReactFlow } from "@xyflow/react";
+import { useTheme } from "next-themes";
+import { toolLabel } from "@/lib/tool/blocks";
+import { runsOnVms } from "@/lib/tool/desktop";
+import { facingSides, shownCables } from "@/lib/tool/facing";
+import { liveViewOf } from "@/lib/tool/live";
+import { isMachine, type CableEdge, type LabNode } from "@/lib/tool/model";
+import { routerPortsOf, type Addresses } from "@/lib/tool/router-ports";
+import { labIssues, selectionOf } from "@/lib/tool/selection";
+import { toTopology } from "@/lib/tool/topology";
+import type { Plan } from "@/lib/tool/engine";
+import { useText } from "../text";
+import { useCabling, useLabIndex } from "./use-cabling";
+import { useCaptures } from "./use-captures";
+import { useClipboard } from "./use-clipboard";
+import { useContextMenus } from "./use-context-menus";
+import { useAutoStart, useDesktopStartup, useDesktopState, useLiveLab, useRunPanel } from "./use-desktop";
+import { useDesign } from "./use-design";
+import { useDevices } from "./use-devices";
+import { useDownloads } from "./use-downloads";
+import { useEngine, usePlan } from "./use-engine";
+import { useHistory } from "./use-history";
+import { useDraftSaving, useLab } from "./use-lab";
+import { useFitWhenDrawn, useLabActions } from "./use-lab-actions";
+import { useLabRun } from "./use-lab-run";
+import { useLanCarry } from "./use-lan-carry";
+import { useMachineActions } from "./use-machine-actions";
+import { usePlacement } from "./use-placement";
+import { useProjects } from "./use-projects";
+import { useSharedLink } from "./use-shared-link";
+import { useToast } from "./use-toast";
+import { useToolKeys, useTools } from "./use-tools";
+
+/** The desktop app's side: running the lab, its machines, captures (all inert in a browser). */
+function useDesktopSide(labName: string, initialName: string, setToast: (message: string) => void) {
+  const t = useText();
+  const state = useDesktopState();
+  const live = useLiveLab(state.invoke, labName, state.run);
+  const actions = useMachineActions({ invoke: state.invoke, labName, live, setToast, t });
+  const menus = useContextMenus();
+  const panel = useRunPanel();
+  const autoStart = useAutoStart(state.invoke, labName);
+  const captures = useCaptures(state.invoke, labName, (error) => {
+    panel.setRunLog(error);
+    panel.setRunOpen(true);
+  });
+  useDesktopStartup(state, initialName, autoStart.setAutoStartPending);
+  return { state, live, actions, menus, panel, autoStart, captures };
+}
+
+/** While the lab has an error the engine gives no addresses; the canvas keeps showing the last good ones, so the address in conflict can still be edited where it is. */
+function useAddresses(plan: Plan | null): Addresses {
+  const [last, setLast] = useState<Addresses>({});
+  const good = plan?.ok && Object.keys(plan.addresses).length ? plan.addresses : null;
+  if (good && good !== last) setLast(good);
+  return plan?.ok ? plan.addresses : last;
+}
+
+/** What the canvas draws from the lab: port sides, cables as attached now, router ports. */
+function useCanvasViews(nodes: LabNode[], edges: CableEdge[], lans: ReturnType<typeof useLabIndex>["lans"], addresses: Addresses) {
+  const sides = useMemo(() => facingSides(nodes, edges, lans), [nodes, edges, lans]);
+  const shownEdges = useMemo(() => shownCables(nodes, edges, lans), [nodes, edges, lans]);
+  const routerPorts = useMemo(() => routerPortsOf(nodes, edges, lans, addresses), [nodes, edges, lans, addresses]);
+  return { sides, shownEdges, routerPorts };
+}
+
+/** The lab editor's state and behaviour: what the canvas, the toolbar and the windows show and do. */
+export function useEditor(lang: string, accounts: boolean, canvasRef: RefObject<HTMLDivElement | null>) {
+  const t = useText();
+  const { engine, error: engineError } = useEngine();
+  const { resolvedTheme } = useTheme();
+  const flow = useReactFlow<LabNode, CableEdge>();
+  const lab = useLab();
+  const [exportOpen, setExportOpen] = useState(false);
+  const [statusOpen, setStatusOpen] = useState(false);
+  const tools = useTools();
+  const [toast, setToast] = useToast();
+  const desk = useDesktopSide(lab.labName, lab.initial.name, setToast);
+  const history = useHistory(lab);
+  const design = useDesign();
+  const fitWhenDrawn = useFitWhenDrawn(flow.fitView);
+  useSharedLink({ lab, setDesign: design.setDesign, setToast, fitWhenDrawn, t });
+  useClipboard(lab, flow.deleteElements);
+  useDraftSaving(lab);
+  const topology = useMemo(() => toTopology(lab.labName, lab.nodes, lab.edges), [lab.labName, lab.nodes, lab.edges]);
+  const plan = usePlan(engine, topology, t);
+  const projects = useProjects({ accounts, lab, design: design.design, setDesign: design.setDesign, plan, setToast, fitWhenDrawn, t });
+  const addresses = useAddresses(plan);
+  const index = useLabIndex(lab.nodes);
+  const views = useCanvasViews(lab.nodes, lab.edges, index.lans, addresses);
+  const carry = useLanCarry(lab);
+  const cabling = useCabling(lab, index);
+  const devices = useDevices(tools, setToast, t);
+  useToolKeys(tools);
+  const actions = useLabActions(lab, fitWhenDrawn, setToast, t);
+  const machines = lab.nodes.filter(isMachine);
+  const hasVms = runsOnVms(machines.some((n) => n.data.kind === "vm"), plan);
+  const run = useLabRun({ ...desk, state: desk.state, lab: { labName: lab.labName, topology, plan, engine, hasVms }, t });
+  const { invoke, run: runState } = desk.state;
+  const { live, links } = desk.live;
+  const liveView = useMemo(() => (runState === "running" && live ? liveViewOf(live, links, lab.nodes, lab.edges) : null), [runState, live, links, lab.nodes, lab.edges]);
+  const placement = usePlacement({ lab, lans: index.lans, tools, presets: devices.presets, canvasRef, screenToFlowPosition: flow.screenToFlowPosition, closeMenus: desk.menus.closeMenus, importGns3: (f) => void actions.importGns3(f) });
+  const downloads = useDownloads(engine, plan, topology, lab.labName);
+  const tool = toolLabel(tools.activeTool, devices.presets, t);
+  const issues = labIssues(lab.nodes, plan, t.issues);
+  const selection = selectionOf(lab.nodes, lab.edges);
+  return {
+    lang, accounts, t, engine, engineError, plan, resolvedTheme, flow, lab, tools, toast, setToast, desk, history, design, projects, addresses, index, views, carry, cabling, devices, actions, run, liveView, placement, downloads, tool, issues, selection, invoke,
+    exportOpen, setExportOpen, statusOpen, setStatusOpen, machines, hasVms, mixed: hasVms && machines.some((n) => n.data.kind === "container"), empty: lab.nodes.length === 0, fitWhenDrawn,
+  };
+}
+
+export type EditorModel = ReturnType<typeof useEditor>;

package/src/components/tool/hooks/use-engine.ts

@@ -0,0 +1,29 @@
+import { useEffect, useMemo, useState } from "react";
+import { loadEngine, planOf, type Engine, type Plan } from "@/lib/tool/engine";
+import type { EditorText } from "@/lib/tool/text";
+
+/** The engine, once loaded (or why it didn't load). */
+export function useEngine(): { engine: Engine | null; error: string | null } {
+  const [engine, setEngine] = useState<Engine | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    let alive = true;
+    loadEngine().then(
+      (m) => {
+        if (alive) setEngine(m);
+      },
+      (e: unknown) => {
+        if (alive) setError(String(e));
+      },
+    );
+    return () => {
+      alive = false;
+    };
+  }, []);
+  return { engine, error };
+}
+
+/** The engine's plan for the lab (null until the engine has loaded). An engine crash must not take the canvas down with it. */
+export function usePlan(engine: Engine | null, topology: string, t: EditorText): Plan | null {
+  return useMemo(() => (engine ? planOf(engine, topology, t.engineFailed) : null), [engine, topology, t]);
+}

package/src/components/tool/hooks/use-history.ts

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { CableEdge, LabNode } from "@/lib/tool/model";
+import type { Lab } from "./use-lab";
+
+/** A lab as the history keeps it: nothing selected or being dragged. */
+interface Snapshot {
+  nodes: LabNode[];
+  edges: CableEdge[];
+}
+
+function snapshot(nodes: LabNode[], edges: CableEdge[]): Snapshot {
+  return {
+    nodes: nodes.map((n) => ({ ...n, selected: false, dragging: false })),
+    edges: edges.map((e) => ({ ...e, selected: false })),
+  };
+}
+
+/** What a change to the lab is (not selection, not the sizes React Flow measures). */
+function signature(nodes: LabNode[], edges: CableEdge[]): string {
+  return JSON.stringify([
+    nodes.map((n) => [n.id, n.type, n.position.x, n.position.y, n.width, n.height, n.data]),
+    edges.map((e) => [e.id, e.source, e.sourceHandle, e.target, e.targetHandle, e.data?.aPort, e.data?.bPort]),
+  ]);
+}
+
+interface History {
+  past: Snapshot[];
+  future: Snapshot[];
+  current: Snapshot;
+  sig: string;
+  last: number;
+  applying: boolean;
+}
+
+/** Records a change: changes in quick succession (a drag, typing a name) count as one. */
+function record(h: History, nodes: LabNode[], edges: CableEdge[], sig: string): void {
+  const now = Date.now();
+  if (!h.applying) {
+    if (now - h.last > 700) {
+      h.past.push(h.current);
+      if (h.past.length > 200) h.past.shift();
+    }
+    h.future = [];
+    h.last = now;
+  }
+  h.applying = false;
+  h.current = snapshot(nodes, edges);
+  h.sig = sig;
+}
+
+/** Undo and redo. Every change to the lab goes into the history. */
+export function useHistory(lab: Lab) {
+  const { initial, nodes, edges, setNodes, setEdges } = lab;
+  const history = useRef<History>({ past: [], future: [], current: snapshot(initial.nodes, initial.edges), sig: signature(initial.nodes, initial.edges), last: 0, applying: false });
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  useEffect(() => {
+    const h = history.current;
+    const sig = signature(nodes, edges);
+    if (sig === h.sig) return;
+    record(h, nodes, edges, sig);
+    queueMicrotask(() => {
+      setCanUndo(h.past.length > 0);
+      setCanRedo(h.future.length > 0);
+    });
+  }, [nodes, edges]);
+  const step = useCallback(
+    (back: boolean) => {
+      const h = history.current;
+      const target = (back ? h.past : h.future).pop();
+      if (!target) return;
+      (back ? h.future : h.past).push(h.current);
+      h.applying = true;
+      h.last = 0;
+      setNodes(target.nodes);
+      setEdges(target.edges);
+    },
+    [setNodes, setEdges],
+  );
+  useUndoKeys(step);
+  return { step, canUndo, canRedo };
+}
+
+/** Whether a key event happens in a text field (where the keys edit the text, as everywhere else). */
+export function inTextField(e: KeyboardEvent): boolean {
+  return e.target instanceof Element && e.target.closest("input, textarea, select, [contenteditable]") !== null;
+}
+
+/** Ctrl/⌘ Z undoes, Ctrl/⌘ Shift Z or Y redoes. */
+function useUndoKeys(step: (back: boolean) => void): void {
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      // In a text field, the keys undo the typing, as everywhere else.
+      if (inTextField(e)) return;
+      if (!(e.metaKey || e.ctrlKey)) return;
+      const key = e.key.toLowerCase();
+      if (key === "z" && !e.shiftKey) step(true);
+      else if ((key === "z" && e.shiftKey) || key === "y") step(false);
+      else return;
+      e.preventDefault();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [step]);
+}

package/src/components/tool/hooks/use-lab-actions.ts

@@ -0,0 +1,57 @@
+import { useCallback } from "react";
+import { migrateEdges } from "@/lib/tool/cables";
+import { exampleLab } from "@/lib/tool/examples";
+import { fromGns3 } from "@/lib/tool/gns3-import";
+import { isLan, isMachine, type CableData, type Draft, type MachineData } from "@/lib/tool/model";
+import type { EditorText } from "@/lib/tool/text";
+import { replaceLab, type Lab } from "./use-lab";
+
+type FitView = (options: { padding: number; maxZoom: number }) => unknown;
+
+/** After replacing the whole lab: fits once React Flow has measured the new nodes. */
+export function useFitWhenDrawn(fitView: FitView) {
+  return useCallback(
+    (options = { padding: 0.4, maxZoom: 1 }) => {
+      setTimeout(() => void fitView(options), 120);
+    },
+    [fitView],
+  );
+}
+
+/** Editing the lab from its windows and menus: a machine's or a cable's fields, examples, a GNS3 project. */
+export function useLabActions(lab: Lab, fitWhenDrawn: (options?: { padding: number; maxZoom: number }) => void, setToast: (message: string) => void, t: EditorText) {
+  const { nodes, setNodes, setEdges } = lab;
+  return {
+    updateMachine: (id: string, patch: Partial<MachineData>) => {
+      const next = nodes.map((n) => (n.id === id && isMachine(n) ? { ...n, data: { ...n.data, ...patch } } : n));
+      setNodes(next);
+      // Turning a router into a real one (or back) changes its connection points: its cables move
+      // onto free ports, or back onto its single port.
+      if ("kind" in patch) setEdges((es) => migrateEdges(es, next));
+    },
+    updateCable: (id: string, patch: Partial<CableData>) => {
+      setEdges((es) => es.map((e) => (e.id === id && e.data ? { ...e, data: { ...e.data, ...patch } } : e)));
+    },
+    loadExample: (make: () => Draft = exampleLab) => {
+      replaceLab(lab, make());
+      fitWhenDrawn();
+    },
+    clearLab: () => {
+      setNodes([]);
+      setEdges([]);
+    },
+    /** A GNS3 project opens as a lab (Undo brings back the one that was there). */
+    importGns3: async (file: File) => {
+      try {
+        const { lab: opened, warnings } = fromGns3(await file.text(), t.gns3);
+        replaceLab(lab, opened);
+        fitWhenDrawn({ padding: 0.3, maxZoom: 1 });
+        const machines = opened.nodes.filter(isMachine).length;
+        const lans = opened.nodes.filter(isLan).length;
+        setToast(`${t.toasts.gns3Opened(opened.name, machines, lans)}${warnings.length ? ` ${warnings.join(" ")}` : ""} ${t.toasts.undoBringsBack}`);
+      } catch (err) {
+        setToast(err instanceof Error ? err.message : t.toasts.gns3Unreadable);
+      }
+    },
+  };
+}

package/src/components/tool/hooks/use-lab-run.ts

@@ -0,0 +1,61 @@
+import { useEffect, useEffectEvent } from "react";
+import { ownFiles, type Engine, type Plan } from "@/lib/tool/engine";
+import type { EditorText } from "@/lib/tool/text";
+import type { DesktopState, LiveLab, RunState, useAutoStart, useRunPanel } from "./use-desktop";
+import type { Captures } from "./use-captures";
+
+interface Deps {
+  state: DesktopState;
+  panel: ReturnType<typeof useRunPanel>;
+  autoStart: ReturnType<typeof useAutoStart>;
+  live: LiveLab;
+  captures: Captures;
+  lab: { labName: string; topology: string; plan: Plan | null; engine: Engine | null; hasVms: boolean };
+  t: EditorText;
+}
+
+/** Running the lab on this machine (desktop): `lab_up` from the engine's spec, and `lab_down`. */
+export function useLabRun({ state, panel, autoStart, live, captures, lab, t }: Deps) {
+  const { invoke, run, setRun } = state;
+  async function runLab() {
+    if (!invoke || !lab.plan?.isoloom_yml) return;
+    setRun("starting");
+    panel.setRunOpen(true);
+    panel.setRunLog(lab.hasVms ? t.run.startingVmsLog : t.run.startingLog);
+    try {
+      const files = lab.engine ? ownFiles(lab.engine, lab.topology) : [];
+      panel.setRunLog(await invoke<string>("lab_up", { name: lab.labName, yaml: lab.plan.isoloom_yml, files }));
+      setRun("running");
+    } catch (e) {
+      panel.setRunLog(String(e));
+      setRun("stopped");
+    }
+  }
+  async function stopLab() {
+    if (!invoke) return;
+    setRun("stopping");
+    try {
+      panel.setRunLog(await invoke<string>("lab_down", { name: lab.labName }));
+    } catch (e) {
+      panel.setRunLog(String(e));
+    }
+    captures.clearCaptures();
+    live.setLinks([]);
+    live.setLive(null);
+    setRun("stopped");
+  }
+  // The auto-start waits for the engine: the lab runs from the spec it makes.
+  const spec = lab.plan?.isoloom_yml;
+  const { autoStartPending, setAutoStartPending } = autoStart;
+  const startPending = useEffectEvent((current: RunState) => {
+    setAutoStartPending(false);
+    if (current === "stopped") void runLab();
+  });
+  useEffect(() => {
+    if (!autoStartPending || !spec) return;
+    queueMicrotask(() => {
+      startPending(run);
+    });
+  }, [autoStartPending, spec, run]);
+  return { runLab, stopLab };
+}

package/src/components/tool/hooks/use-lab.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { useEdgesState, useNodesState } from "@xyflow/react";
+import type { CableEdge, Draft, LabNode } from "@/lib/tool/model";
+import { loadDraft, saveDraft } from "@/lib/tool/storage";
+
+/** The lab on the canvas: its name, nodes and cables, kept in this browser as it changes. */
+export function useLab() {
+  // The last lab drawn in this browser, or a blank canvas (the example is one click away). The
+  // editor renders on the client only, so reading storage here can't mismatch the server's HTML.
+  const [initial] = useState<Draft>(() => loadDraft() ?? { name: "my-lab", nodes: [], edges: [] });
+  const [labName, setLabName] = useState(initial.name);
+  const [nodes, setNodes, onNodesChange] = useNodesState<LabNode>(initial.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<CableEdge>(initial.edges);
+  return { initial, labName, setLabName, nodes, setNodes, onNodesChange, edges, setEdges, onEdgesChange };
+}
+
+export type Lab = ReturnType<typeof useLab>;
+
+/** Saves the lab as it changes. */
+export function useDraftSaving(lab: Lab): void {
+  const { labName, nodes, edges } = lab;
+  useEffect(() => {
+    saveDraft({ name: labName, nodes, edges });
+  }, [labName, nodes, edges]);
+}
+
+/** Replaces the whole lab (an example, a shared link, a project, a GNS3 import). */
+export function replaceLab(lab: Lab, next: Draft): void {
+  lab.setLabName(next.name);
+  lab.setNodes(next.nodes);
+  lab.setEdges(next.edges);
+}

package/src/components/tool/hooks/use-lan-carry.ts

@@ -0,0 +1,43 @@
+import { useRef } from "react";
+import type { XYPosition } from "@xyflow/react";
+import { lansAround, within } from "@/lib/tool/geometry";
+import { SWITCH_H, SWITCH_W, isLan, isMachine, isNote, isSwitch, type LabNode, type LanNode } from "@/lib/tool/model";
+import type { Lab } from "./use-lab";
+
+/** What moves with a LAN: machines inside (or on the edge, routers), switches on its edge or inside it, notes in it. */
+function lanMembers(lan: LanNode, nodes: LabNode[]): Map<string, XYPosition> {
+  const r = { x: lan.position.x, y: lan.position.y, w: lan.width ?? 420, h: lan.height ?? 300 };
+  const inside = (cx: number, cy: number) => within(r, { x: cx, y: cy }, 0.5);
+  const carried = (n: LabNode) =>
+    (isMachine(n) && lansAround(n, nodes).some((l) => l.id === lan.id)) ||
+    (isSwitch(n) && inside(n.position.x + SWITCH_W / 2, n.position.y + SWITCH_H / 2)) ||
+    (isNote(n) && inside(n.position.x + (n.width ?? 200) / 2, n.position.y + (n.height ?? 90) / 2));
+  return new Map(nodes.filter(carried).map((m) => [m.id, { ...m.position }]));
+}
+
+/** Moving a LAN carries the machines inside it, as Excalidraw frames do. */
+export function useLanCarry(lab: Lab) {
+  const { nodes, setNodes } = lab;
+  const carried = useRef<{ lan: string; start: XYPosition; members: Map<string, XYPosition> } | null>(null);
+  return {
+    onNodeDragStart: (_: unknown, node: LabNode) => {
+      if (!isLan(node)) return;
+      carried.current = { lan: node.id, start: { ...node.position }, members: lanMembers(node, nodes) };
+    },
+    onNodeDrag: (_: unknown, node: LabNode) => {
+      const c = carried.current;
+      if (!c || c.lan !== node.id) return;
+      const dx = node.position.x - c.start.x;
+      const dy = node.position.y - c.start.y;
+      setNodes((ns) =>
+        ns.map((n) => {
+          const from = c.members.get(n.id);
+          return from ? { ...n, position: { x: from.x + dx, y: from.y + dy } } : n;
+        }),
+      );
+    },
+    onNodeDragStop: () => {
+      carried.current = null;
+    },
+  };
+}

package/src/components/tool/hooks/use-machine-actions.ts

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import type { Invoke, SuspendedLink } from "@/lib/tool/desktop";
+import type { EditorText } from "@/lib/tool/text";
+import type { LiveLab } from "./use-desktop";
+
+export type MachineAction = "start" | "stop" | "restart";
+export type LinkAction = "suspend" | "resume";
+
+interface Deps {
+  invoke: Invoke | null;
+  labName: string;
+  live: LiveLab;
+  setToast: (message: string) => void;
+  t: EditorText;
+}
+
+/**
+ * One machine of the running lab (desktop): a console, its screen, starting or stopping it, its
+ * snapshots, and cutting or reconnecting its links. A failure shows as a toast.
+ */
+export function useMachineActions({ invoke, labName, live, setToast, t }: Deps) {
+  const [busy, setBusy] = useState(false);
+  /** Runs a command for this lab while the machine controls wait, then reads the lab again. */
+  async function act(run: (invoke: Invoke) => Promise<unknown>) {
+    if (!invoke) return;
+    setBusy(true);
+    try {
+      await run(invoke);
+    } catch (e) {
+      setToast(String(e));
+    }
+    setBusy(false);
+    void live.refreshStates();
+  }
+  /** Opens a console on the machine, or its screen (GNS3's VNC console: its VNC server, or a VM's display). */
+  async function open(command: "machine_console" | "machine_display", machine: string) {
+    if (!invoke) return;
+    try {
+      const shown = await invoke<string>(command, { name: labName, machine });
+      if (command === "machine_display") setToast(t.machineRun.displayOpened(shown));
+    } catch (e) {
+      setToast(String(e));
+    }
+  }
+  return {
+    busy,
+    snapshotDo: (command: string, args: Record<string, unknown>) => act((run) => run(command, { name: labName, ...args })),
+    machineAct: (machine: string, action: MachineAction) => act((run) => run("machine_action", { name: labName, machine, action })),
+    /** Cuts or reconnects the ports of `machines` on `network` (every machine's, when not named). */
+    linkAct: (network: string, machines: string[] | undefined, action: LinkAction) =>
+      act(async (run) => {
+        live.setLinks(await run<SuspendedLink[]>("link_action", { name: labName, network, machines, action }));
+      }),
+    machineConsole: (machine: string) => open("machine_console", machine),
+    machineDisplay: (machine: string) => open("machine_display", machine),
+  };
+}

package/src/components/tool/hooks/use-placement.ts

@@ -0,0 +1,80 @@
+import type { DragEvent, MouseEvent, RefObject } from "react";
+import type { XYPosition } from "@xyflow/react";
+import { LAN_TOOL, NOTE_TOOL, SWITCH_TOOL } from "@/lib/tool/blocks";
+import { newLan, newNote } from "@/lib/tool/create";
+import { isLan, unselected, type LabNode, type LanNode } from "@/lib/tool/model";
+import { paletteSpot, placeAppliance, placeMachine, placeSwitch } from "@/lib/tool/placement";
+import type { Preset } from "@/lib/tool/presets";
+import type { Lab } from "./use-lab";
+import type { Tools } from "./use-tools";
+
+/** The drag-and-drop type of a device dragged from the toolbar. */
+export const PRESET_MIME = "application/x-isothrum-preset";
+
+interface Deps {
+  lab: Lab;
+  lans: LanNode[];
+  tools: Tools;
+  presets: Preset[];
+  canvasRef: RefObject<HTMLDivElement | null>;
+  screenToFlowPosition: (p: XYPosition) => XYPosition;
+  /** Closes the right-click menus (a click on the canvas does). */
+  closeMenus: () => void;
+  /** Opens a dropped GNS3 project. */
+  importGns3: (file: File) => void;
+}
+
+/** Placing devices, LANs, switches and notes: by a click on the canvas with a tool, or a drop. */
+export function usePlacement({ lab, lans, tools, presets, canvasRef, screenToFlowPosition, closeMenus, importGns3 }: Deps) {
+  const { setNodes } = lab;
+  function addPreset(presetId: string, at?: XYPosition) {
+    const preset = presets.find((p) => p.id === presetId);
+    if (!preset) return;
+    // A click in the palette drops the machine in the middle of the view.
+    const viewCenter = () => {
+      const r = canvasRef.current?.getBoundingClientRect();
+      return r ? screenToFlowPosition({ x: r.left + r.width / 2, y: r.top + r.height / 2 }) : { x: 0, y: 0 };
+    };
+    const position = at ?? paletteSpot(viewCenter(), lab.nodes);
+    if (preset.data.icon === "router" || preset.data.icon === "shield") setNodes((ns) => placeAppliance(preset, position, !!at, ns, lans));
+    else setNodes((ns) => placeMachine(preset, position, ns));
+  }
+  /** Places the active tool, centered on the pointer; then back to selecting, as Excalidraw does after a shape. */
+  function place(tool: string, e: MouseEvent) {
+    const at = () => screenToFlowPosition({ x: e.clientX, y: e.clientY });
+    // LANs go first in the list, so they are drawn under the machines; notes on top of everything, so they can sit over a LAN.
+    if (tool === LAN_TOOL) {
+      const center = at();
+      setNodes((ns) => [{ ...newLan(center, ns), selected: true }, ...unselected(ns)]);
+    } else if (tool === NOTE_TOOL) {
+      const { x, y } = at();
+      setNodes((ns) => [...unselected(ns), newNote({ x: x - 100, y: y - 45 })]);
+    } else if (tool === SWITCH_TOOL) {
+      const center = at();
+      setNodes((ns) => placeSwitch(center, ns, lans));
+    } else addPreset(tool, screenToFlowPosition({ x: e.clientX - 60, y: e.clientY - 58 }));
+  }
+  function onPaneClick(e: MouseEvent) {
+    closeMenus();
+    if (!tools.activeTool) return;
+    place(tools.activeTool, e);
+    tools.setActiveTool(null);
+  }
+  return {
+    onPaneClick,
+    // Inside a LAN the click lands on the area, not the canvas: placing there is the common case.
+    onNodeClick: (e: MouseEvent, node: LabNode) => {
+      if (tools.activeTool && isLan(node)) onPaneClick(e);
+    },
+    onDrop: (e: DragEvent) => {
+      e.preventDefault();
+      const file = [...e.dataTransfer.files].find((f) => f.name.endsWith(".gns3"));
+      if (file) {
+        importGns3(file);
+        return;
+      }
+      const id = e.dataTransfer.getData(PRESET_MIME);
+      if (id) addPreset(id, screenToFlowPosition({ x: e.clientX - 60, y: e.clientY - 58 }));
+    },
+  };
+}