@isothrum/editor 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,18 @@
+import type { CableEdge, Draft, LabNode } from "../../../lib/tool/model.js";
+/** The lab on the canvas: its name, nodes and cables, kept in this browser as it changes. */
+export declare function useLab(): {
+    initial: 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>;
+};
+export type Lab = ReturnType<typeof useLab>;
+/** Saves the lab as it changes. */
+export declare function useDraftSaving(lab: Lab): void;
+/** Replaces the whole lab (an example, a shared link, a project, a GNS3 import). */
+export declare function replaceLab(lab: Lab, next: Draft): void;

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

@@ -0,0 +1,8 @@
+import { type LabNode } from "../../../lib/tool/model.js";
+import type { Lab } from "./use-lab";
+/** Moving a LAN carries the machines inside it, as Excalidraw frames do. */
+export declare function useLanCarry(lab: Lab): {
+    onNodeDragStart: (_: unknown, node: LabNode) => void;
+    onNodeDrag: (_: unknown, node: LabNode) => void;
+    onNodeDragStop: () => void;
+};

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

@@ -0,0 +1,26 @@
+import type { Invoke } from "../../../lib/tool/desktop.js";
+import type { EditorText } from "../../../lib/tool/text/index.js";
+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 declare function useMachineActions({ invoke, labName, live, setToast, t }: Deps): {
+    busy: boolean;
+    snapshotDo: (command: string, args: Record<string, unknown>) => Promise<void>;
+    machineAct: (machine: string, action: MachineAction) => Promise<void>;
+    /** Cuts or reconnects the ports of `machines` on `network` (every machine's, when not named). */
+    linkAct: (network: string, machines: string[] | undefined, action: LinkAction) => Promise<void>;
+    machineConsole: (machine: string) => Promise<void>;
+    machineDisplay: (machine: string) => Promise<void>;
+};
+export {};

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

@@ -0,0 +1,27 @@
+import type { DragEvent, MouseEvent, RefObject } from "react";
+import type { XYPosition } from "@xyflow/react";
+import { type LabNode, type LanNode } from "../../../lib/tool/model.js";
+import type { Preset } from "../../../lib/tool/presets.js";
+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 declare 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 declare function usePlacement({ lab, lans, tools, presets, canvasRef, screenToFlowPosition, closeMenus, importGns3 }: Deps): {
+    onPaneClick: (e: MouseEvent) => void;
+    onNodeClick: (e: MouseEvent, node: LabNode) => void;
+    onDrop: (e: DragEvent) => void;
+};
+export {};

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

@@ -0,0 +1,25 @@
+import type { Draft } from "../../../lib/tool/model.js";
+import { type ProjectRef } from "../../../lib/tool/storage.js";
+/**
+ * Saved projects (isoloom/isothrum#31): the lab on the signed-in user's account. Once a lab is
+ * saved as a project, every change saves itself (a moment after the last one); each save keeps
+ * the previous version. The browser draft stays the working copy, signed in or not.
+ */
+export type SaveState = "idle" | "saving" | "saved" | "error";
+interface Deps {
+    signedIn: boolean;
+    /** The lab as it is now (its identity changes on every edit). */
+    draft: Draft;
+    /** The isoloom.yml the engine generated for it. */
+    yml: string | null;
+}
+/** The project the editor is attached to, and saving it. */
+export declare function useProject({ signedIn, draft, yml }: Deps): {
+    project: ProjectRef | null;
+    state: SaveState;
+    save: (asNew?: boolean, name?: string) => Promise<ProjectRef | null>;
+    detach: () => void;
+    /** After opening a project: attached to it, nothing to save yet. */
+    opened: (p: ProjectRef, d: Draft) => void;
+};
+export {};

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

@@ -0,0 +1,34 @@
+import type { Design, Draft } from "../../../lib/tool/model.js";
+import type { Plan } from "../../../lib/tool/engine.js";
+import type { ProjectRef } from "../../../lib/tool/storage.js";
+import type { EditorText } from "../../../lib/tool/text/index.js";
+import { type Lab } from "./use-lab";
+interface Deps {
+    /** Accounts are on (the desktop's bundled editor has no site to ask). */
+    accounts: boolean;
+    lab: Lab;
+    design: Design;
+    setDesign: (d: Design) => void;
+    plan: Plan | null;
+    setToast: (message: string) => void;
+    fitWhenDrawn: () => void;
+    t: EditorText;
+}
+/** Saved projects, for a signed-in user (see `useProject`): opening, saving, Ctrl/⌘ S. */
+export declare function useProjects({ accounts, lab, design, setDesign, plan, setToast, fitWhenDrawn, t }: Deps): {
+    signedIn: boolean;
+    setSignedInNow: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    proj: {
+        project: ProjectRef | null;
+        state: import("./use-project").SaveState;
+        save: (asNew?: boolean, name?: string) => Promise<ProjectRef | null>;
+        detach: () => void;
+        opened: (p: ProjectRef, d: Draft) => void;
+    };
+    projectsOpen: boolean;
+    setProjectsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    openDraft: (d: Draft) => void;
+    openProject: (p: ProjectRef, d: Draft) => void;
+    saveAs: () => Promise<void>;
+};
+export {};

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

@@ -0,0 +1,23 @@
+import { encodeLab } from "../../../lib/tool/draft.js";
+import type { Design } from "../../../lib/tool/model.js";
+import type { EditorText } from "../../../lib/tool/text/index.js";
+import { type Lab } from "./use-lab";
+/** Removes the `#…` part of the address once it has been read. */
+export declare function clearHash(): void;
+interface Deps {
+    lab: Lab;
+    setDesign: (d: Design) => void;
+    setToast: (message: string) => void;
+    /** Fits the view once React Flow has measured the new lab. */
+    fitWhenDrawn: () => void;
+    t: EditorText;
+}
+/**
+ * A shared lab (#lab=… in the address) opens on arrival, and when a link is pasted into a tab
+ * already on the editor (only the part after # changes then, and the browser doesn't reload).
+ * Undo brings back what was there.
+ */
+export declare function useSharedLink({ lab, setDesign, setToast, fitWhenDrawn, t }: Deps): void;
+/** Copies a link that opens this lab (its JSON, deflated, after `#lab=`). */
+export declare function copyShareLink(draft: Parameters<typeof encodeLab>[0], lang: string, setToast: (message: string) => void, t: EditorText): Promise<void>;
+export {};

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

@@ -0,0 +1,2 @@
+/** A message at the bottom of the canvas, for a few seconds (longer when it is long). */
+export declare function useToast(): [string | null, (message: string | null) => void];

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

@@ -0,0 +1,17 @@
+/** Excalidraw's two modes: select (drag a box, Shift-click, Delete) or hand (drag moves the canvas). */
+export type Mode = "select" | "hand";
+/**
+ * The device being placed (Excalidraw-style tool): the next click on the canvas drops it there.
+ * Picking a tool selects again; picking the same one twice puts it down.
+ */
+export declare function useTools(): {
+    activeTool: string | null;
+    setActiveTool: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    mode: Mode;
+    setMode: import("react").Dispatch<import("react").SetStateAction<Mode>>;
+    pick: (tool: string) => void;
+    setModeOnly: (m: Mode) => void;
+};
+export type Tools = ReturnType<typeof useTools>;
+/** Keyboard: 1–9 and 0 pick a device, S, L, T a switch, LAN or note, V selects, H the hand, Escape puts it down. Not while typing in a field. */
+export declare function useToolKeys(tools: Tools): void;

package/dist/types/components/tool/lab-canvas.d.ts

@@ -0,0 +1,18 @@
+import { type AuthClient } from "../../lib/auth.js";
+import { type BrandMark } from "../../lib/brand.js";
+/** The props of the lab editor. */
+export interface LabCanvasProps {
+    /** The editor's language (one of the editor's locales); anything else falls back to English. */
+    lang: string;
+    /**
+     * Whether the accounts UI (sign in, save to projects) is shown. When `true`, pass `auth`.
+     * Defaults to `false`, for hosts without accounts (the desktop app, a standalone embed).
+     */
+    accounts?: boolean;
+    /** The host's auth client, required when `accounts` is `true`; ignored otherwise. */
+    auth?: AuthClient | null;
+    /** A product mark for the empty canvas; defaults to the Isothrum mark. */
+    brandMark?: BrandMark;
+}
+/** The lab editor: the editor's words in the page's language, for every part of it (windows, canvas, export). */
+export declare function LabCanvas({ lang, accounts, auth, brandMark }: LabCanvasProps): import("react").JSX.Element;

package/dist/types/components/tool/overlays.d.ts

@@ -0,0 +1,5 @@
+import type { EditorModel } from "./hooks/use-editor";
+/** What floats over the canvas's bottom: the welcome, an update, a toast, an engine that didn't load. */
+export declare function Overlays({ e }: {
+    e: EditorModel;
+}): import("react").JSX.Element;

package/dist/types/components/tool/projects-list.d.ts

@@ -0,0 +1,9 @@
+import type { Draft } from "../../lib/tool/model.js";
+import type { ProjectRef } from "../../lib/tool/storage.js";
+/** The user's projects, to open or delete one; and the open project's earlier versions. */
+export declare function ProjectsList({ current, onOpen, onOpenVersion, onDeleted }: {
+    current: ProjectRef | null;
+    onOpen: (p: ProjectRef, draft: Draft) => void;
+    onOpenVersion: (draft: Draft) => void;
+    onDeleted: (id: string) => void;
+}): import("react").JSX.Element;

package/dist/types/components/tool/text.d.ts

@@ -0,0 +1,418 @@
+import { type EditorText } from "../../lib/tool/text/index.js";
+/** The editor's words, set once by the editor from the page's language; English outside it. */
+export declare const EditorTextContext: import("react").Context<{
+    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;
+    };
+}>;
+export declare function useText(): EditorText;

package/dist/types/components/tool/toolbar.d.ts

@@ -0,0 +1,5 @@
+import type { EditorModel } from "./hooks/use-editor";
+/** Top center: the devices, grouped as network, containers, VMs; the line under it says what a click does. */
+export declare function Toolbar({ e }: {
+    e: EditorModel;
+}): import("react").JSX.Element;

package/dist/types/components/tool/top-bars.d.ts

@@ -0,0 +1,10 @@
+import type { EditorModel } from "./hooks/use-editor";
+/** Top left: the menu, and where the lab is saved. */
+export declare function TopLeft({ e, onImportGns3 }: {
+    e: EditorModel;
+    onImportGns3: () => void;
+}): import("react").JSX.Element;
+/** Top right: the lab's status, Run (desktop app), and Export. */
+export declare function TopRight({ e }: {
+    e: EditorModel;
+}): import("react").JSX.Element;

package/dist/types/components/tool/windows/conditions-fields.d.ts

@@ -0,0 +1,6 @@
+import type { LinkConditions } from "../../../lib/tool/model.js";
+/** How a cable or a LAN behaves: four optional numbers (empty: none). */
+export declare function ConditionsFields({ value, onChange }: {
+    value: LinkConditions | undefined;
+    onChange: (tc: LinkConditions | undefined) => void;
+}): import("react").JSX.Element;

package/dist/types/components/tool/windows/editor-windows.d.ts

@@ -0,0 +1,5 @@
+import type { EditorModel } from "../hooks/use-editor";
+/** The windows floating over the canvas: what is selected, projects, the lab's status, Run, Export. */
+export declare function EditorWindows({ e }: {
+    e: EditorModel;
+}): import("react").JSX.Element;

package/dist/types/components/tool/windows/fields.d.ts

@@ -0,0 +1,4 @@
+/** A text field in the editor's windows. */
+export declare const field = "h-8 w-full rounded-md border border-input bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring";
+/** A multi-line field (provisioning steps, an appliance's configuration). */
+export declare const area = "w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring";