@isothrum/editor 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Draft } from "@/lib/tool/model";
+import { saveProject as store } from "@/lib/tool/projects-api";
+import { loadProject, saveProject as remember, type ProjectRef } from "@/lib/tool/storage";
+
+/**
+ * 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";
+
+const AUTOSAVE_MS = 2500;
+
+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 lab as last saved (its JSON; empty before the first save), to tell when it changed. */
+function useLastSaved() {
+  const lastSaved = useRef("");
+  return useMemo(
+    () => ({
+      get: () => lastSaved.current,
+      set: (json: string) => {
+        lastSaved.current = json;
+      },
+    }),
+    [],
+  );
+}
+
+type LastSaved = ReturnType<typeof useLastSaved>;
+
+/** Autosave: a moment after the last change, when the lab is a project. */
+function useAutosave(enabled: boolean, draft: Draft, lastSaved: LastSaved, save: () => unknown): void {
+  useEffect(() => {
+    if (!enabled) return;
+    const now = JSON.stringify(draft);
+    if (now === lastSaved.get()) return;
+    if (!lastSaved.get()) {
+      // Just attached (a reload): what's here is what was saved, or newer; save it next change.
+      lastSaved.set(now);
+      return;
+    }
+    const timer = setTimeout(() => void save(), AUTOSAVE_MS);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [enabled, draft, lastSaved, save]);
+}
+
+/** The project the editor is attached to, and saving it. */
+export function useProject({ signedIn, draft, yml }: Deps) {
+  const [project, setProject] = useState<ProjectRef | null>(null);
+  const [state, setState] = useState<SaveState>("idle");
+  useEffect(() => {
+    if (signedIn) queueMicrotask(() => { setProject(loadProject()); });
+  }, [signedIn]);
+  const attach = useCallback((p: ProjectRef | null) => {
+    setProject(p);
+    remember(p);
+  }, []);
+  // What a save sends: the lab as it is after the last render.
+  const latest = useRef({ draft, yml });
+  useEffect(() => {
+    latest.current = { draft, yml };
+  }, [draft, yml]);
+  const lastSaved = useLastSaved();
+  const save = useCallback(
+    async (asNew = false, name?: string): Promise<ProjectRef | null> => {
+      const now = latest.current;
+      setState("saving");
+      try {
+        const saved =
+          project && !asNew
+            ? await store(project.id, { draft: now.draft, isoloomYml: now.yml, ...(name ? { name } : {}) })
+            : await store(null, { name: name ?? project?.name ?? now.draft.name, draft: now.draft, isoloomYml: now.yml });
+        lastSaved.set(JSON.stringify(now.draft));
+        attach({ id: saved.id, name: saved.name });
+        setState("saved");
+        return saved;
+      } catch {
+        setState("error");
+        return null;
+      }
+    },
+    [project, attach, lastSaved],
+  );
+  useAutosave(signedIn && !!project, draft, lastSaved, save);
+  return {
+    project,
+    state,
+    save,
+    detach: () => {
+      attach(null);
+      lastSaved.set("");
+      setState("idle");
+    },
+    /** After opening a project: attached to it, nothing to save yet. */
+    opened: (p: ProjectRef, d: Draft) => {
+      lastSaved.set(JSON.stringify(d));
+      attach(p);
+      setState("saved");
+    },
+  };
+}

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

@@ -0,0 +1,85 @@
+import { useEffect, useEffectEvent, useMemo, useState } from "react";
+import { normalizeDraft, plainDraft } from "@/lib/tool/draft";
+import type { Design, Draft } from "@/lib/tool/model";
+import type { Plan } from "@/lib/tool/engine";
+import { projectFromLink } from "@/lib/tool/projects-api";
+import type { ProjectRef } from "@/lib/tool/storage";
+import type { EditorText } from "@/lib/tool/text";
+import { useProject } from "./use-project";
+import { clearHash } from "./use-shared-link";
+import { replaceLab, 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 function useProjects({ accounts, lab, design, setDesign, plan, setToast, fitWhenDrawn, t }: Deps) {
+  const [signedInNow, setSignedInNow] = useState(false);
+  const signedIn = accounts && signedInNow;
+  const { labName, nodes, edges } = lab;
+  const savedDraft = useMemo(() => plainDraft({ name: labName, nodes, edges, design }), [labName, nodes, edges, design]);
+  const proj = useProject({ signedIn, draft: savedDraft, yml: plan?.ok ? plan.isoloom_yml : null });
+  const [projectsOpen, setProjectsOpen] = useState(false);
+  function openDraft(d: Draft) {
+    const opened = normalizeDraft(d);
+    if (!opened) return;
+    replaceLab(lab, opened);
+    if (opened.design) setDesign(opened.design);
+    fitWhenDrawn();
+  }
+  /** Opens a project, attached to it from now on. */
+  function openProject(p: ProjectRef, d: Draft) {
+    const opened = normalizeDraft(d);
+    if (!opened) return;
+    openDraft(opened);
+    proj.opened(p, plainDraft({ name: opened.name, nodes: opened.nodes, edges: opened.edges, design: opened.design ?? design }));
+    setToast(t.projects.opened(p.name));
+  }
+  useProjectLink(signedIn, openProject);
+  async function saveAs() {
+    const name = window.prompt(t.projects.saveAsPrompt, proj.project ? `${proj.project.name} (2)` : labName);
+    if (name?.trim()) await proj.save(true, name.trim());
+  }
+  useSaveKeys(signedIn, () => void proj.save(), () => void saveAs());
+  return { signedIn, setSignedInNow, proj, projectsOpen, setProjectsOpen, openDraft, openProject, saveAs };
+}
+
+/** A link to a project (#project=<id>, as the MCP server gives): opens it once signed in. */
+function useProjectLink(signedIn: boolean, openProject: (p: ProjectRef, d: Draft) => void): void {
+  const open = useEffectEvent((id: string) => {
+    void projectFromLink(id).then((p) => {
+      if (p) openProject({ id: p.id, name: p.name }, p.draft as Draft);
+    });
+  });
+  useEffect(() => {
+    const m = /^#project=([\w-]+)$/.exec(window.location.hash);
+    if (!m || !signedIn) return;
+    clearHash();
+    open(m[1]);
+  }, [signedIn]);
+}
+
+/** Ctrl/⌘ S saves the project, Ctrl/⌘ Shift S saves it as a new one (signed in only). */
+function useSaveKeys(signedIn: boolean, save: () => void, saveAs: () => void): void {
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (!signedIn || !(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "s") return;
+      e.preventDefault();
+      if (e.shiftKey) saveAs();
+      else save();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
+  });
+}

package/src/components/tool/hooks/use-shared-link.ts

@@ -0,0 +1,64 @@
+import { useEffect, useEffectEvent } from "react";
+import { decodeLab, encodeLab } from "@/lib/tool/draft";
+import type { Design } from "@/lib/tool/model";
+import type { EditorText } from "@/lib/tool/text";
+import { replaceLab, type Lab } from "./use-lab";
+
+/** Removes the `#…` part of the address once it has been read. */
+export function clearHash(): void {
+  window.history.replaceState(null, "", window.location.pathname + window.location.search);
+}
+
+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 function useSharedLink({ lab, setDesign, setToast, fitWhenDrawn, t }: Deps): void {
+  const open = useEffectEvent(() => {
+    const m = /^#lab=([A-Za-z0-9_-]+)$/.exec(window.location.hash);
+    if (!m) return;
+    void decodeLab(m[1]).then((shared) => {
+      clearHash();
+      if (!shared) {
+        setToast(t.toasts.brokenLink);
+        return;
+      }
+      replaceLab(lab, shared);
+      if (shared.design) setDesign(shared.design);
+      setToast(t.toasts.openedShared(shared.name));
+      fitWhenDrawn();
+    });
+  });
+  useEffect(() => {
+    const onHash = () => {
+      open();
+    };
+    onHash();
+    window.addEventListener("hashchange", onHash);
+    return () => {
+      window.removeEventListener("hashchange", onHash);
+    };
+  }, []);
+}
+
+/** Copies a link that opens this lab (its JSON, deflated, after `#lab=`). */
+export async function copyShareLink(draft: Parameters<typeof encodeLab>[0], lang: string, setToast: (message: string) => void, t: EditorText) {
+  const code = await encodeLab(draft);
+  const url = `${window.location.origin}/${lang}#lab=${code}`;
+  try {
+    await navigator.clipboard.writeText(url);
+    setToast(t.toasts.linkCopied);
+  } catch {
+    window.prompt(t.toasts.copyPrompt, url);
+  }
+}

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

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+/** A message at the bottom of the canvas, for a few seconds (longer when it is long). */
+export function useToast(): [string | null, (message: string | null) => void] {
+  const [toast, setToast] = useState<string | null>(null);
+  useEffect(() => {
+    if (!toast) return;
+    const timer = setTimeout(() => {
+      setToast(null);
+    }, Math.max(4000, toast.length * 60));
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [toast]);
+  return [toast, setToast];
+}

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

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { LAN_TOOL, NOTE_TOOL, SWITCH_TOOL } from "@/lib/tool/blocks";
+import { presetForKey } from "@/lib/tool/presets";
+import { inTextField } from "./use-history";
+
+/** 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 function useTools() {
+  const [activeTool, setActiveTool] = useState<string | null>(null);
+  const [mode, setMode] = useState<Mode>("select");
+  const pick = (tool: string) => {
+    setMode("select");
+    setActiveTool(activeTool === tool ? null : tool);
+  };
+  const setModeOnly = (m: Mode) => {
+    setMode(m);
+    setActiveTool(null);
+  };
+  return { activeTool, setActiveTool, mode, setMode, pick, setModeOnly };
+}
+
+export type Tools = ReturnType<typeof useTools>;
+
+/** The tool a key toggles: S a switch, L a LAN, T a note, 1–9 and 0 a device. */
+function toolForKey(key: string): string | undefined {
+  const lower = key.toLowerCase();
+  if (lower === "s" && key.length === 1) return SWITCH_TOOL;
+  if (lower === "l" && key.length === 1) return LAN_TOOL;
+  if (lower === "t" && key.length === 1) return NOTE_TOOL;
+  return presetForKey(key)?.id;
+}
+
+/** 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 function useToolKeys(tools: Tools): void {
+  const { setMode, setActiveTool } = tools;
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.metaKey || e.ctrlKey || e.altKey || inTextField(e)) return;
+      if (e.key === "Escape") setActiveTool(null);
+      if (e.key === "v" || e.key === "V" || e.key === "h" || e.key === "H") {
+        setMode(e.key === "h" || e.key === "H" ? "hand" : "select");
+        setActiveTool(null);
+      }
+      const tool = toolForKey(e.key);
+      if (tool) {
+        setMode("select");
+        setActiveTool((cur) => (cur === tool ? null : tool));
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [setMode, setActiveTool]);
+}

package/src/components/tool/lab-canvas.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useRef } from "react";
+import { ReactFlowProvider } from "@xyflow/react";
+import { editorText } from "@/lib/tool/text";
+import { AuthClientProvider, type AuthClient } from "@/lib/auth";
+import { BrandMarkProvider, type BrandMark } from "@/lib/brand";
+import { cn } from "@/lib/utils";
+import { RunningLabMenus } from "./context-menus";
+import { SessionWatch } from "./editor-menu";
+import { FlowCanvas } from "./flow-canvas";
+import { useEditor, type EditorModel } from "./hooks/use-editor";
+import { Overlays } from "./overlays";
+import { EditorTextContext } from "./text";
+import { Toolbar } from "./toolbar";
+import { TopLeft, TopRight } from "./top-bars";
+import { EditorWindows } from "./windows/editor-windows";
+
+/** The hidden file input a GNS3 project is picked with (the menu opens it). */
+function Gns3Input({ e, input }: { e: EditorModel; input: React.RefObject<HTMLInputElement | null> }) {
+  return (
+    <input
+      ref={input}
+      type="file"
+      accept=".gns3,application/json"
+      hidden
+      aria-label={e.t.menu.gns3File}
+      onChange={(ev) => {
+        const file = ev.target.files?.[0];
+        if (file) void e.actions.importGns3(file);
+        ev.target.value = "";
+      }}
+    />
+  );
+}
+
+function Editor({ lang, accounts }: { lang: string; accounts: boolean }) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const gns3Input = useRef<HTMLInputElement>(null);
+  const e = useEditor(lang, accounts, canvasRef);
+  const { tools } = e;
+  return (
+    <div
+      ref={canvasRef}
+      className={cn(
+        "fixed inset-0 bg-background",
+        e.tool && "[&_.react-flow__pane]:!cursor-crosshair",
+        tools.mode === "hand" && "[&_.react-flow__pane]:!cursor-grab [&_.react-flow__pane.dragging]:!cursor-grabbing",
+      )}
+      onDragOver={(ev) => {
+        ev.preventDefault();
+      }}
+      onDrop={e.placement.onDrop}
+      data-design={e.design.design}
+    >
+      <Gns3Input e={e} input={gns3Input} />
+      {accounts && <SessionWatch onChange={e.projects.setSignedInNow} />}
+      <FlowCanvas e={e} />
+      <TopLeft e={e} onImportGns3={() => gns3Input.current?.click()} />
+      <Toolbar e={e} />
+      <TopRight e={e} />
+      <Overlays e={e} />
+      <RunningLabMenus e={e} />
+      <EditorWindows e={e} />
+    </div>
+  );
+}
+
+/** 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 function LabCanvas({ lang, accounts = false, auth = null, brandMark }: LabCanvasProps) {
+  const text = editorText(lang);
+  const inner = (
+    <EditorTextContext.Provider value={text}>
+      <ReactFlowProvider>
+        <Editor lang={lang} accounts={accounts} />
+      </ReactFlowProvider>
+    </EditorTextContext.Provider>
+  );
+  const withAuth = <AuthClientProvider client={auth}>{inner}</AuthClientProvider>;
+  return brandMark ? <BrandMarkProvider mark={brandMark}>{withAuth}</BrandMarkProvider> : withAuth;
+}

package/src/components/tool/overlays.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { LayoutTemplate, X } from "lucide-react";
+import { useBrandMark } from "@/lib/brand";
+import { Button, buttonVariants } from "@/components/ui/button";
+import type { EditorModel } from "./hooks/use-editor";
+import { useText } from "./text";
+
+/** Handwritten hints, pointing at the menu and the toolbar. */
+function WelcomeHints() {
+  const t = useText().welcome;
+  return (
+    <>
+      <div aria-hidden className="pointer-events-none absolute top-14 left-6 z-0 hidden items-start gap-1 font-heading text-sm text-muted-foreground md:flex">
+        <svg viewBox="0 0 40 40" className="size-9 -scale-x-100" fill="none">
+          <path d="M34 36C30 22 22 12 8 6m0 0 2 8M8 6l8 0" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+        </svg>
+        <span className="mt-6">{t.menuHint}</span>
+      </div>
+      <div aria-hidden className="pointer-events-none absolute top-24 left-1/2 z-0 hidden -translate-x-[calc(100%+40px)] items-start gap-1 font-heading text-sm text-muted-foreground md:flex">
+        <span className="mt-6">{t.toolbarHint}</span>
+        <svg viewBox="0 0 40 40" className="size-9" fill="none">
+          <path d="M6 36C12 24 22 14 34 8m0 0-8 0m8 0-2 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+        </svg>
+      </div>
+    </>
+  );
+}
+
+/** The empty canvas: who we are, where to start, and handwritten pointers to the controls. */
+function Welcome({ onExample, lang }: { onExample: () => void; lang: string }) {
+  const t = useText().welcome;
+  const LogoMark = useBrandMark();
+  return (
+    <>
+      <WelcomeHints />
+      <div className="pointer-events-none absolute inset-0 z-0 grid place-items-center p-6">
+        {/* Only the buttons take clicks: a drop or a click elsewhere goes to the canvas below. */}
+        <div className="flex max-w-md flex-col items-center text-center">
+          <LogoMark className="size-14" />
+          <p className="mt-4 font-heading text-4xl font-semibold lowercase">isothrum</p>
+          <p className="mt-3 text-muted-foreground text-pretty">{t.pitch}</p>
+          <div className="pointer-events-auto mt-6 flex flex-wrap justify-center gap-2">
+            <Button onClick={onExample}>
+              <LayoutTemplate data-icon="inline-start" /> {t.example}
+            </Button>
+            <a href={`/${lang}/about`} className={buttonVariants({ variant: "outline" })}>
+              {t.how}
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+/** Desktop app: a newer release is out; restarting installs it. */
+function UpdateBanner({ e, version }: { e: EditorModel; version: string }) {
+  const t = e.t.update;
+  const { invoke, updating, setUpdating, setUpdate } = e.desk.state;
+  async function install() {
+    if (!invoke) return;
+    setUpdating(true);
+    try {
+      await invoke("update_install");
+    } catch (err) {
+      e.setToast(String(err));
+      setUpdating(false);
+    }
+  }
+  return (
+    <div role="status" className="absolute right-4 bottom-4 z-30 flex items-center gap-3 rounded-lg border bg-popover px-3 py-2 text-sm shadow-sm">
+      <span>{t.available(version)}</span>
+      <Button size="sm" disabled={updating} onClick={() => void install()}>
+        {updating ? t.installing : t.restart}
+      </Button>
+      <button type="button" className="text-muted-foreground hover:text-foreground" aria-label={t.later} title={t.later} onClick={() => { setUpdate(null); }}>
+        <X className="size-4" />
+      </button>
+    </div>
+  );
+}
+
+/** What floats over the canvas's bottom: the welcome, an update, a toast, an engine that didn't load. */
+export function Overlays({ e }: { e: EditorModel }) {
+  const { update } = e.desk.state;
+  return (
+    <>
+      {/* The empty canvas welcomes, as Excalidraw does. Hidden while a device is picked, so the whole canvas is free to click. */}
+      {e.empty && !e.tools.activeTool && <Welcome onExample={() => { e.actions.loadExample(); }} lang={e.lang} />}
+      {update && <UpdateBanner e={e} version={update} />}
+      {e.toast && (
+        <p role="status" className="absolute bottom-4 left-1/2 z-30 w-max max-w-[min(36rem,calc(100vw-2rem))] -translate-x-1/2 rounded-lg border bg-popover px-3 py-2 text-sm shadow-sm">
+          {e.toast}
+        </p>
+      )}
+      {e.engineError && (
+        <p role="alert" className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2 rounded-lg border bg-popover px-3 py-2 text-sm text-destructive shadow-sm">
+          {e.t.engineDidntLoad(e.engineError)}
+        </p>
+      )}
+    </>
+  );
+}

package/src/components/tool/projects-list.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { FolderOpen, History, Trash2 } from "lucide-react";
+import type { Draft } from "@/lib/tool/model";
+import { deleteProject, getProject, getVersion, listProjects, listVersions, type ProjectSummary, type ProjectVersion } from "@/lib/tool/projects-api";
+import type { ProjectRef } from "@/lib/tool/storage";
+import { Button } from "@/components/ui/button";
+import { useText } from "./text";
+
+const when = (iso: string) => new Date(iso).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+
+/** A project: its name (and whether it is the one open), when it was saved, opening and deleting it. */
+function ProjectRow({ p, current, onOpen, onDelete }: { p: ProjectSummary; current: ProjectRef | null; onOpen: () => void; onDelete: () => void }) {
+  const t = useText().projects;
+  return (
+    <li className="flex items-center gap-2 px-3 py-2">
+      <div className="min-w-0 flex-1">
+        <p className="truncate font-medium">
+          {p.name}
+          {current?.id === p.id && <span className="ml-1.5 text-xs font-normal text-signal">{t.open}</span>}
+        </p>
+        <p className="text-xs text-muted-foreground">{when(p.updatedAt)}</p>
+      </div>
+      <Button size="sm" variant="outline" onClick={onOpen}>
+        <FolderOpen data-icon="inline-start" /> {t.openButton}
+      </Button>
+      <Button size="icon-sm" variant="ghost" aria-label={t.delete(p.name)} title={t.delete(p.name)} onClick={onDelete}>
+        <Trash2 />
+      </Button>
+    </li>
+  );
+}
+
+/** The open project's earlier versions: listing them, and opening one. */
+function VersionHistory({ current, versions, setVersions, onOpenVersion }: { current: ProjectRef; versions: ProjectVersion[] | null; setVersions: (v: ProjectVersion[]) => void; onOpenVersion: (draft: Draft) => void }) {
+  const t = useText().projects;
+  return (
+    <div className="flex flex-col gap-2">
+      <Button size="sm" variant="ghost" className="self-start" onClick={() => void listVersions(current.id).then(setVersions)}>
+        <History data-icon="inline-start" /> {t.history(current.name)}
+      </Button>
+      {versions &&
+        (versions.length === 0 ? (
+          <p className="text-xs text-muted-foreground">{t.noVersions}</p>
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {versions.map((v) => (
+              <li key={v.id} className="flex items-center justify-between gap-2 text-xs">
+                <span className="text-muted-foreground">{when(v.savedAt)}</span>
+                <Button size="xs" variant="outline" onClick={() => void getVersion(current.id, v.id).then((r) => { onOpenVersion(r.draft); })}>
+                  {t.restore}
+                </Button>
+              </li>
+            ))}
+          </ul>
+        ))}
+      <p className="text-xs text-muted-foreground">{t.historyHint}</p>
+    </div>
+  );
+}
+
+/** The user's projects, to open or delete one; and the open project's earlier versions. */
+export function ProjectsList({ current, onOpen, onOpenVersion, onDeleted }: { current: ProjectRef | null; onOpen: (p: ProjectRef, draft: Draft) => void; onOpenVersion: (draft: Draft) => void; onDeleted: (id: string) => void }) {
+  const t = useText().projects;
+  const [list, setList] = useState<ProjectSummary[] | null>(null);
+  const [versions, setVersions] = useState<ProjectVersion[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    listProjects().then(setList, (e: unknown) => {
+      setError((e as Error).message);
+    });
+  }, []);
+  async function remove(p: ProjectSummary) {
+    if (!window.confirm(t.confirmDelete(p.name))) return;
+    await deleteProject(p.id);
+    setList((l) => l?.filter((x) => x.id !== p.id) ?? null);
+    onDeleted(p.id);
+  }
+  if (error) return <p className="text-sm text-destructive">{t.failed(error)}</p>;
+  if (!list) return <p className="text-sm text-muted-foreground">{t.loading}</p>;
+  return (
+    <div className="flex flex-col gap-4 text-sm">
+      {list.length === 0 ? (
+        <p className="text-muted-foreground">{t.none}</p>
+      ) : (
+        <ul className="flex flex-col divide-y rounded-lg border">
+          {list.map((p) => (
+            <ProjectRow key={p.id} p={p} current={current} onOpen={() => void getProject(p.id).then((full) => { onOpen({ id: full.id, name: full.name }, full.draft); })} onDelete={() => void remove(p)} />
+          ))}
+        </ul>
+      )}
+      {current && <VersionHistory current={current} versions={versions} setVersions={setVersions} onOpenVersion={onOpenVersion} />}
+    </div>
+  );
+}

package/src/components/tool/text.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+import { defaultText, type EditorText } from "@/lib/tool/text";
+
+/** The editor's words, set once by the editor from the page's language; English outside it. */
+export const EditorTextContext = createContext<EditorText>(defaultText);
+
+export function useText(): EditorText {
+  return useContext(EditorTextContext);
+}