@isothrum/editor 0.0.0-stage → 0.1.0

package/dist/types/components/tool/hooks/use-editor.d.ts

@@ -0,0 +1,609 @@
+import { type RefObject } from "react";
+import { type CableEdge, type LabNode } from "../../../lib/tool/model.js";
+import type { Plan } from "../../../lib/tool/engine.js";
+/** The lab editor's state and behaviour: what the canvas, the toolbar and the windows show and do. */
+export declare function useEditor(lang: string, accounts: boolean, canvasRef: RefObject<HTMLDivElement | null>): {
+    lang: string;
+    accounts: boolean;
+    t: {
+        toolbar: {
+            blocks: {
+                switch: string;
+                router: string;
+                firewall: string;
+                container: string;
+                vm: string;
+                mine: string;
+            };
+            kindsOf: (block: string) => string;
+            devices: string;
+            hand: string;
+            select: string;
+            lan: string;
+            lanTitle: string;
+            switch: string;
+            switchTitle: string;
+            note: string;
+            noteTitle: string;
+            forget: (device: string) => string;
+            forgetLabel: (device: string) => string;
+            undo: string;
+            undoTitle: string;
+            redo: string;
+            redoTitle: string;
+        };
+        hints: {
+            lan: string;
+            note: string;
+            place: (device: string) => string;
+            hand: string;
+            cable: string;
+            select: string;
+        };
+        devices: {
+            router: {
+                label: string;
+                hint: string;
+            };
+            "router-frr": {
+                label: string;
+                hint: string;
+            };
+            firewall: {
+                label: string;
+                hint: string;
+            };
+            container: {
+                label: string;
+            };
+            web: {
+                label: string;
+                hint: string;
+            };
+            database: {
+                label: string;
+                hint: string;
+            };
+            desktop: {
+                label: string;
+                hint: string;
+            };
+            "linux-vm": {
+                label: string;
+            };
+            "ubuntu-vm": {
+                label: string;
+            };
+            "kali-vm": {
+                label: string;
+            };
+            "windows-vm": {
+                label: string;
+            };
+            workstation: {
+                label: string;
+                hint: string;
+            };
+            "cisco-iol": {
+                label: string;
+                hint: string;
+            };
+            "cisco-iol-l2": {
+                label: string;
+                hint: string;
+            };
+        };
+        myDevice: (what: string) => string;
+        myDeviceRouter: string;
+        status: {
+            loading: string;
+            toFix: (count: number) => string;
+            valid: string;
+        };
+        run: {
+            autoStart: string;
+            autoStartNote: string;
+            statusTitle: (up: number, total: number) => string;
+            probed: string;
+            inferred: string;
+            run: string;
+            starting: string;
+            stop: string;
+            stopping: string;
+            vmsTitle: string;
+            runVmsTitle: string;
+            startingVmsLog: string;
+            runTitle: string;
+            startingLog: string;
+            window: string;
+            running: string;
+            stopped: string;
+            noDocker: string;
+            noLiveCapture: (wireshark: boolean, dir: string) => string;
+        };
+        capture: {
+            capturing: (network: string) => string;
+            writingTo: string;
+            live: string;
+            stop: string;
+            start: string;
+            runFirst: string;
+        };
+        link: {
+            suspend: string;
+            resume: string;
+            suspendAll: string;
+            resumeAll: string;
+            cableSuspended: string;
+            lanSuspended: (ports: number) => string;
+            runFirst: string;
+        };
+        export: string;
+        engineDidntLoad: (error: string) => string;
+        engineFailed: (error: string) => string;
+        toasts: {
+            brokenLink: string;
+            openedShared: (lab: string) => string;
+            linkCopied: string;
+            copyPrompt: string;
+            savedDevice: (device: string) => string;
+            gns3Opened: (lab: string, machines: number, lans: number) => string;
+            undoBringsBack: string;
+            gns3Unreadable: string;
+        };
+        windows: {
+            machine: string;
+            lan: (lan: string) => string;
+            cable: (a: string, b: string) => string;
+            portOn: (machine: string) => string;
+            cableNote: string;
+            removeCable: string;
+            conditions: {
+                title: string;
+                delay: string;
+                jitter: string;
+                loss: string;
+                rate: string;
+                hint: string;
+                onLan: string;
+                onVlan: string;
+            };
+            selected: (count: number) => string;
+            selection: (items: number, cables: number) => string;
+            deleteSelection: (count: number) => string;
+            close: string;
+        };
+        lab: {
+            title: string;
+            containers: string;
+            vms: string;
+            lans: string;
+            cables: string;
+            toFix: string;
+            valid: string;
+            routing: string;
+        };
+        menu: {
+            menu: string;
+            example: string;
+            vlanExample: string;
+            gns3: string;
+            gns3File: string;
+            share: string;
+            fit: string;
+            clear: string;
+            light: string;
+            dark: string;
+            style: string;
+            styles: {
+                sketch: string;
+                business: string;
+            };
+            language: string;
+            about: string;
+            blog: string;
+        };
+        welcome: {
+            menuHint: string;
+            toolbarHint: string;
+            pitch: string;
+            example: string;
+            how: string;
+        };
+        inspector: {
+            name: string;
+            runsAs: string;
+            automaticRouter: string;
+            container: string;
+            vm: string;
+            routerNote: string;
+            image: string;
+            keepRunning: string;
+            applianceNote: string;
+            ciscoOs: string;
+            needsKvm: string;
+            dynamipsFirmware: (name: string) => string;
+            iosConfig: string;
+            iosConfigHint: string;
+            keepRunningHint: string;
+            os: string;
+            provision: string;
+            ports: string;
+            access: string;
+            cables: string;
+            noCables: string;
+            saveTitle: string;
+            save: string;
+            remove: string;
+        };
+        canvas: {
+            imageShort: string;
+            hosts: (n: number) => string;
+            roles: {
+                router: string;
+                firewall: string;
+                workstation: string;
+                server: string;
+                desktop: string;
+                host: string;
+            };
+            switchModel: (ports: number) => string;
+            live: {
+                up: string;
+                starting: string;
+                unhealthy: string;
+                down: string;
+                portUp: string;
+                portDown: string;
+                portUnknown: string;
+                lanPorts: (up: number, total: number) => string;
+                cable: {
+                    up: string;
+                    cut: string;
+                    down: string;
+                };
+                cableShort: {
+                    cut: string;
+                    down: string;
+                };
+            };
+            editTitle: (what: string) => string;
+            unnamed: string;
+            machineName: string;
+            vm: string;
+            automatic: string;
+            container: string;
+            access: string;
+            addressTitle: (network: string, fixed: boolean) => string;
+            fixed: string;
+            addressOn: (network: string) => string;
+            lanName: string;
+            addressBlock: string;
+            internetOnTitle: string;
+            internetOffTitle: string;
+            internetOn: string;
+            internetOff: string;
+            showAreaTitle: string;
+            hideAreaTitle: string;
+            showArea: string;
+            hideArea: string;
+            switchName: string;
+            port: (n: number) => string;
+            trunkPort: string;
+            trunkCarries: (vlans: string) => string;
+            noVlan: string;
+            clickToChange: string;
+            vlanNumber: string;
+            vlanBlock: string;
+            remove: (what: string) => string;
+            routerName: string;
+            portFree: (port: string) => string;
+            textOnly: string;
+            box: string;
+            ellipse: string;
+            colors: {
+                yellow: string;
+                red: string;
+                blue: string;
+                green: string;
+                violet: string;
+            };
+            color: (color: string) => string;
+            write: string;
+            note: string;
+            noteName: string;
+        };
+        exportPanel: {
+            copy: string;
+            copied: string;
+            labName: string;
+            fixFirst: string;
+            download: (lab: string) => string;
+            onlySpec: string;
+            where: string;
+            whereIntro: string;
+            mixed: string;
+            install: string;
+            files: (count: number) => string;
+            downloadOnly: (target: string) => string;
+            downloadTarget: (target: string) => string;
+            withIsoloom: string;
+            withTool: string;
+            run: string;
+            specIntro: string;
+            showSpec: string;
+            hideSpec: string;
+            containersAndVms: string;
+            dockerOnOneVm: string;
+            oneVmPerMachine: string;
+        };
+        issues: {
+            vlanBlocks: (vlan: string, block: string, other: string, sw: string) => string;
+            areaBlock: (lan: string, block: string, switches: string) => string;
+            noName: {
+                machine: string;
+                lan: string;
+                switch: string;
+            };
+            sameName: {
+                machine: (name: string) => string;
+                lan: (name: string) => string;
+                switch: (name: string) => string;
+            };
+            badPort: (machine: string, entry: string) => string;
+        };
+        gns3: {
+            notGns3: string;
+            noTopology: string;
+            cisco: (node: string, kind: string) => string;
+            firewall: (node: string) => string;
+            noEquivalent: (node: string, type: string) => string;
+            noNodes: string;
+        };
+        account: {
+            signIn: string;
+            signOut: string;
+            signedInAs: (name: string) => string;
+        };
+        projects: {
+            save: string;
+            saveAs: string;
+            openList: string;
+            saveAsPrompt: string;
+            windowTitle: string;
+            loading: string;
+            none: string;
+            open: string;
+            openButton: string;
+            delete: (name: string) => string;
+            confirmDelete: (name: string) => string;
+            failed: (error: string) => string;
+            history: (name: string) => string;
+            noVersions: string;
+            restore: string;
+            historyHint: string;
+            opened: (name: string) => string;
+            status: {
+                idle: (name: string) => string;
+                saving: (name: string) => string;
+                saved: (name: string) => string;
+                error: (name: string) => string;
+            };
+        };
+        machineRun: {
+            display: string;
+            displayTitle: string;
+            displayOpened: (what: string) => string;
+            consoleHint: string;
+            runFirst: string;
+            running: string;
+            stopped: string;
+            unknown: string;
+            console: string;
+            restart: string;
+            stop: string;
+            start: string;
+            snapshots: string;
+            takeSnapshot: string;
+            snapshotHint: string;
+            snapshotPrompt: string;
+            noSnapshots: string;
+            restore: string;
+            inUse: string;
+            ownImage: string;
+            deleteSnapshot: (label: string) => string;
+        };
+        update: {
+            available: (version: string) => string;
+            restart: string;
+            installing: string;
+            later: string;
+        };
+    };
+    engine: import("../../../lib/tool/engine.js").Engine | null;
+    engineError: string | null;
+    plan: Plan | null;
+    resolvedTheme: string | undefined;
+    flow: import("@xyflow/react").ReactFlowInstance<LabNode, CableEdge>;
+    lab: {
+        initial: import("../../../lib/tool/model.js").Draft;
+        labName: string;
+        setLabName: import("react").Dispatch<import("react").SetStateAction<string>>;
+        nodes: LabNode[];
+        setNodes: import("react").Dispatch<import("react").SetStateAction<LabNode[]>>;
+        onNodesChange: import("@xyflow/react").OnNodesChange<LabNode>;
+        edges: CableEdge[];
+        setEdges: import("react").Dispatch<import("react").SetStateAction<CableEdge[]>>;
+        onEdgesChange: import("@xyflow/react").OnEdgesChange<CableEdge>;
+    };
+    tools: {
+        activeTool: string | null;
+        setActiveTool: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+        mode: import("./use-tools").Mode;
+        setMode: import("react").Dispatch<import("react").SetStateAction<import("./use-tools").Mode>>;
+        pick: (tool: string) => void;
+        setModeOnly: (m: import("./use-tools").Mode) => void;
+    };
+    toast: string | null;
+    setToast: (message: string | null) => void;
+    desk: {
+        state: {
+            invoke: import("../../../lib/tool/desktop.js").Invoke | null;
+            info: import("../../../lib/tool/desktop.js").DesktopInfo | null;
+            setInfo: import("react").Dispatch<import("react").SetStateAction<import("../../../lib/tool/desktop.js").DesktopInfo | null>>;
+            run: import("./use-desktop").RunState;
+            setRun: import("react").Dispatch<import("react").SetStateAction<import("./use-desktop").RunState>>;
+            update: string | null;
+            setUpdate: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+            updating: boolean;
+            setUpdating: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        };
+        live: {
+            machineStates: Record<string, string>;
+            snapshots: import("../../../lib/tool/desktop.js").Snapshot[];
+            links: import("../../../lib/tool/desktop.js").SuspendedLink[];
+            setLinks: import("react").Dispatch<import("react").SetStateAction<import("../../../lib/tool/desktop.js").SuspendedLink[]>>;
+            live: import("../../../lib/tool/desktop.js").LabLive | null;
+            setLive: import("react").Dispatch<import("react").SetStateAction<import("../../../lib/tool/desktop.js").LabLive | null>>;
+            refreshStates: () => Promise<void>;
+        };
+        actions: {
+            busy: boolean;
+            snapshotDo: (command: string, args: Record<string, unknown>) => Promise<void>;
+            machineAct: (machine: string, action: import("./use-machine-actions").MachineAction) => Promise<void>;
+            linkAct: (network: string, machines: string[] | undefined, action: import("./use-machine-actions").LinkAction) => Promise<void>;
+            machineConsole: (machine: string) => Promise<void>;
+            machineDisplay: (machine: string) => Promise<void>;
+        };
+        menus: {
+            machineMenu: import("./use-context-menus").MachineMenuAt | null;
+            setMachineMenu: import("react").Dispatch<import("react").SetStateAction<import("./use-context-menus").MachineMenuAt | null>>;
+            linkMenu: import("./use-context-menus").LinkMenuAt | null;
+            setLinkMenu: import("react").Dispatch<import("react").SetStateAction<import("./use-context-menus").LinkMenuAt | null>>;
+            closeMenus: () => void;
+        };
+        panel: {
+            runOpen: boolean;
+            setRunOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+            runLog: string;
+            setRunLog: import("react").Dispatch<import("react").SetStateAction<string>>;
+        };
+        autoStart: {
+            autoStart: boolean;
+            setAutoStart: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+            autoStartPending: boolean;
+            setAutoStartPending: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        };
+        captures: {
+            captures: Record<string, string | null>;
+            capture: (network: string) => Promise<void>;
+            stopCapture: (network: string) => Promise<void>;
+            clearCaptures: () => void;
+        };
+    };
+    history: {
+        step: (back: boolean) => void;
+        canUndo: boolean;
+        canRedo: boolean;
+    };
+    design: {
+        design: import("../../../lib/tool/model.js").Design;
+        setDesign: import("react").Dispatch<import("react").SetStateAction<import("../../../lib/tool/model.js").Design>>;
+        chooseDesign: (d: import("../../../lib/tool/model.js").Design) => void;
+    };
+    projects: {
+        signedIn: boolean;
+        setSignedInNow: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        proj: {
+            project: import("../../../lib/tool/storage").ProjectRef | null;
+            state: import("./use-project").SaveState;
+            save: (asNew?: boolean, name?: string) => Promise<import("../../../lib/tool/storage").ProjectRef | null>;
+            detach: () => void;
+            opened: (p: import("../../../lib/tool/storage").ProjectRef, d: import("../../../lib/tool/model.js").Draft) => void;
+        };
+        projectsOpen: boolean;
+        setProjectsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        openDraft: (d: import("../../../lib/tool/model.js").Draft) => void;
+        openProject: (p: import("../../../lib/tool/storage").ProjectRef, d: import("../../../lib/tool/model.js").Draft) => void;
+        saveAs: () => Promise<void>;
+    };
+    addresses: Partial<Record<string, [string, string][]>>;
+    index: import("../../../lib/tool/cables").LabIndex & {
+        lans: import("../../../lib/tool/model.js").LanNode[];
+    };
+    views: {
+        sides: Record<string, import("../../../lib/tool/model.js").Side>;
+        shownEdges: CableEdge[];
+        routerPorts: Record<string, import("../../../lib/tool/router-ports.js").RouterPorts>;
+    };
+    carry: {
+        onNodeDragStart: (_: unknown, node: LabNode) => void;
+        onNodeDrag: (_: unknown, node: LabNode) => void;
+        onNodeDragStop: () => void;
+    };
+    cabling: {
+        onNodesChange: (changes: import("@xyflow/system").NodeChange<LabNode>[]) => void;
+        isValid: (c: Parameters<typeof import("../../../lib/tool/cables").canConnect>[0]) => boolean;
+        onConnect: (c: import("@xyflow/system").Connection) => void;
+        onReconnect: (old: CableEdge, c: import("@xyflow/system").Connection) => void;
+        onReconnectStart: (_: unknown, edge: CableEdge) => void;
+        onReconnectEnd: () => void;
+    };
+    devices: {
+        presets: import("../../../lib/tool/presets").Preset[];
+        blocks: import("../../../lib/tool/blocks.js").Block[];
+        blockChoice: Record<string, string>;
+        pickFromBlock: (block: string, tool: string) => void;
+        saveDevice: (m: import("../../../lib/tool/model.js").MachineData) => void;
+        forgetDevice: (id: string) => void;
+    };
+    actions: {
+        updateMachine: (id: string, patch: Partial<import("../../../lib/tool/model.js").MachineData>) => void;
+        updateCable: (id: string, patch: Partial<import("../../../lib/tool/model.js").CableData>) => void;
+        loadExample: (make?: () => import("../../../lib/tool/model.js").Draft) => void;
+        clearLab: () => void;
+        importGns3: (file: File) => Promise<void>;
+    };
+    run: {
+        runLab: () => Promise<void>;
+        stopLab: () => Promise<void>;
+    };
+    liveView: import("../../../lib/tool/live.js").LiveView | null;
+    placement: {
+        onPaneClick: (e: import("react").MouseEvent) => void;
+        onNodeClick: (e: import("react").MouseEvent, node: LabNode) => void;
+        onDrop: (e: import("react").DragEvent) => void;
+    };
+    downloads: {
+        downloadError: string | null;
+        downloadAll: () => void;
+        downloadTarget: (dir: string) => void;
+        downloadSpec: () => void;
+    };
+    tool: {
+        label: string;
+    } | undefined;
+    issues: string[];
+    selection: {
+        selectedNodes: LabNode[];
+        selectedEdges: CableEdge[];
+        count: number;
+        machine: import("../../../lib/tool/model.js").MachineNode | undefined;
+        lan: import("../../../lib/tool/model.js").LanNode | undefined;
+        edge: CableEdge | undefined;
+    };
+    invoke: import("../../../lib/tool/desktop.js").Invoke | null;
+    exportOpen: boolean;
+    setExportOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    statusOpen: boolean;
+    setStatusOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    machines: import("../../../lib/tool/model.js").MachineNode[];
+    hasVms: boolean;
+    mixed: boolean;
+    empty: boolean;
+    fitWhenDrawn: (options?: {
+        padding: number;
+        maxZoom: number;
+    }) => void;
+};
+export type EditorModel = ReturnType<typeof useEditor>;

package/dist/types/components/tool/hooks/use-engine.d.ts

@@ -0,0 +1,9 @@
+import { type Engine, type Plan } from "../../../lib/tool/engine.js";
+import type { EditorText } from "../../../lib/tool/text/index.js";
+/** The engine, once loaded (or why it didn't load). */
+export declare function useEngine(): {
+    engine: Engine | null;
+    error: string | null;
+};
+/** 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 declare function usePlan(engine: Engine | null, topology: string, t: EditorText): Plan | null;

package/dist/types/components/tool/hooks/use-history.d.ts

@@ -0,0 +1,9 @@
+import type { Lab } from "./use-lab";
+/** Undo and redo. Every change to the lab goes into the history. */
+export declare function useHistory(lab: Lab): {
+    step: (back: boolean) => void;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+/** Whether a key event happens in a text field (where the keys edit the text, as everywhere else). */
+export declare function inTextField(e: KeyboardEvent): boolean;

package/dist/types/components/tool/hooks/use-lab-actions.d.ts

@@ -0,0 +1,25 @@
+import { type CableData, type Draft, type MachineData } from "../../../lib/tool/model.js";
+import type { EditorText } from "../../../lib/tool/text/index.js";
+import { 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 declare function useFitWhenDrawn(fitView: FitView): (options?: {
+    padding: number;
+    maxZoom: number;
+}) => void;
+/** Editing the lab from its windows and menus: a machine's or a cable's fields, examples, a GNS3 project. */
+export declare function useLabActions(lab: Lab, fitWhenDrawn: (options?: {
+    padding: number;
+    maxZoom: number;
+}) => void, setToast: (message: string) => void, t: EditorText): {
+    updateMachine: (id: string, patch: Partial<MachineData>) => void;
+    updateCable: (id: string, patch: Partial<CableData>) => void;
+    loadExample: (make?: () => Draft) => void;
+    clearLab: () => void;
+    /** A GNS3 project opens as a lab (Undo brings back the one that was there). */
+    importGns3: (file: File) => Promise<void>;
+};
+export {};

package/dist/types/components/tool/hooks/use-lab-run.d.ts

@@ -0,0 +1,25 @@
+import { type Engine, type Plan } from "../../../lib/tool/engine.js";
+import type { EditorText } from "../../../lib/tool/text/index.js";
+import type { DesktopState, LiveLab, 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 declare function useLabRun({ state, panel, autoStart, live, captures, lab, t }: Deps): {
+    runLab: () => Promise<void>;
+    stopLab: () => Promise<void>;
+};
+export {};