@isothrum/editor 0.0.0-stage → 0.1.0

package/src/components/tool/canvas/use-measured-ports.ts

@@ -0,0 +1,25 @@
+import { useContext, useEffect } from "react";
+import { useUpdateNodeInternals } from "@xyflow/react";
+import { SidesContext } from "./contexts";
+
+/**
+ * Which way each port of node `id` faces (`<id>:<port>` in the sides), as one key; React Flow
+ * caches where handles are, so they are measured again when it changes.
+ */
+export function usePortSides(id: string) {
+  const sides = useContext(SidesContext);
+  const facing = Object.keys(sides)
+    .filter((k) => k.startsWith(`${id}:`))
+    .sort()
+    .join(",");
+  useRemeasure(id, facing);
+  return sides;
+}
+
+/** Measures node `id`'s handles again whenever `key` changes. */
+export function useRemeasure(id: string, key: string | undefined): void {
+  const updateNodeInternals = useUpdateNodeInternals();
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [id, key, updateNodeInternals]);
+}

package/src/components/tool/context-menus.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+import { Monitor, Play, Plug, Radio, RotateCw, Square, SquareTerminal, Unplug, type LucideIcon } from "lucide-react";
+import type { EditorModel } from "./hooks/use-editor";
+import type { LinkMenuAt, MachineMenuAt } from "./hooks/use-context-menus";
+import type { LinkAction, MachineAction } from "./hooks/use-machine-actions";
+import { useText } from "./text";
+
+/** A menu at the pointer (a right-click): Escape or a click elsewhere closes it. */
+function ContextMenu({ at, title, onClose, children }: { at: { x: number; y: number }; title: string; onClose: () => void; children: ReactNode }) {
+  useEffect(() => {
+    const esc = (e: globalThis.KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", esc);
+    return () => {
+      window.removeEventListener("keydown", esc);
+    };
+  }, [onClose]);
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40"
+        onClick={onClose}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          onClose();
+        }}
+      />
+      <div
+        role="menu"
+        aria-label={title}
+        style={{ left: Math.min(at.x, window.innerWidth - 248), top: Math.min(at.y, window.innerHeight - 260) }}
+        className="fixed z-50 w-60 rounded-lg border bg-popover p-1 text-popover-foreground shadow-[0_8px_30px_-8px_rgb(0_0_0/0.25)]"
+        onClick={onClose}
+      >
+        <p className="truncate px-2 pt-1 pb-1.5 font-mono text-xs text-muted-foreground">{title}</p>
+        {children}
+      </div>
+    </>
+  );
+}
+
+function MenuItem({ icon: Icon, label, enabled = true, onClick }: { icon: LucideIcon; label: string; enabled?: boolean; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      disabled={!enabled}
+      onClick={onClick}
+      className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted disabled:pointer-events-none disabled:opacity-40"
+    >
+      <Icon className="size-4 text-muted-foreground" aria-hidden /> {label}
+    </button>
+  );
+}
+
+const Divider = () => <div className="my-1 h-px bg-border" />;
+
+/** Desktop only: a machine's menu, on a right-click, as in GNS3. */
+function MachineMenu({ at, running, state, onClose, onConsole, onDisplay, onAction }: { at: MachineMenuAt; running: boolean; state: string | undefined; onClose: () => void; onConsole: () => void; onDisplay: () => void; onAction: (action: MachineAction) => void }) {
+  const t = useText().machineRun;
+  const up = running && state === "running";
+  return (
+    <ContextMenu at={at} title={at.machine} onClose={onClose}>
+      <MenuItem icon={SquareTerminal} label={t.console} enabled={up} onClick={onConsole} />
+      <MenuItem icon={Monitor} label={t.display} enabled={up} onClick={onDisplay} />
+      <Divider />
+      {up ? (
+        <>
+          <MenuItem icon={RotateCw} label={t.restart} onClick={() => { onAction("restart"); }} />
+          <MenuItem icon={Square} label={t.stop} onClick={() => { onAction("stop"); }} />
+        </>
+      ) : (
+        <MenuItem icon={Play} label={t.start} enabled={running && !!state} onClick={() => { onAction("start"); }} />
+      )}
+      {!running && <p className="px-2 pt-1 pb-1 text-xs text-muted-foreground">{t.runFirst}</p>}
+    </ContextMenu>
+  );
+}
+
+/**
+ * Desktop only: a cable's or a LAN's menu, on a right-click, as in GNS3: capture its traffic,
+ * suspend or resume it (a cable's ends, or every link of a LAN).
+ */
+function LinkMenu({ at, running, capturing, suspended, onClose, onCapture, onLink }: { at: LinkMenuAt; running: boolean; capturing: boolean; suspended: boolean; onClose: () => void; onCapture: () => void; onLink: (action: LinkAction) => void }) {
+  const t = useText();
+  const ends = at.machines;
+  const all = !ends;
+  return (
+    <ContextMenu at={at} title={at.title} onClose={onClose}>
+      {capturing ? <MenuItem icon={Square} label={t.capture.stop} onClick={onCapture} /> : <MenuItem icon={Radio} label={t.capture.start} enabled={running} onClick={onCapture} />}
+      {(!ends || ends.length > 0) && (
+        <>
+          <Divider />
+          {suspended ? (
+            <MenuItem icon={Plug} label={all ? t.link.resumeAll : t.link.resume} enabled={running} onClick={() => { onLink("resume"); }} />
+          ) : (
+            <MenuItem icon={Unplug} label={all ? t.link.suspendAll : t.link.suspend} enabled={running} onClick={() => { onLink("suspend"); }} />
+          )}
+        </>
+      )}
+      {!running && <p className="px-2 pt-1 pb-1 text-xs text-muted-foreground">{t.capture.runFirst}</p>}
+    </ContextMenu>
+  );
+}
+
+/** The right-click menus of the running lab (desktop app only). */
+export function RunningLabMenus({ e }: { e: EditorModel }) {
+  const { invoke, desk } = e;
+  const { machineMenu, linkMenu, setMachineMenu, setLinkMenu } = desk.menus;
+  const running = desk.state.run === "running";
+  const { captures, capture, stopCapture } = desk.captures;
+  if (!invoke) return null;
+  return (
+    <>
+      {machineMenu && (
+        <MachineMenu
+          at={machineMenu}
+          running={running}
+          state={desk.live.machineStates[machineMenu.machine]}
+          onClose={() => { setMachineMenu(null); }}
+          onConsole={() => void desk.actions.machineConsole(machineMenu.machine)}
+          onDisplay={() => void desk.actions.machineDisplay(machineMenu.machine)}
+          onAction={(action) => void desk.actions.machineAct(machineMenu.machine, action)}
+        />
+      )}
+      {linkMenu && (
+        <LinkMenu
+          at={linkMenu}
+          running={running}
+          capturing={linkMenu.network in captures}
+          suspended={desk.live.links.some((l) => l.network === linkMenu.network && (!linkMenu.machines || linkMenu.machines.includes(l.machine)))}
+          onClose={() => { setLinkMenu(null); }}
+          onCapture={() => void (linkMenu.network in captures ? stopCapture(linkMenu.network) : capture(linkMenu.network))}
+          onLink={(action) => void desk.actions.linkAct(linkMenu.network, linkMenu.machines, action)}
+        />
+      )}
+    </>
+  );
+}

package/src/components/tool/device-block.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { Check, ChevronDown, X } from "lucide-react";
+import type { Block, BlockOption } from "@/lib/tool/blocks";
+import { cn } from "@/lib/utils";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuShortcut, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { DeviceIcon } from "./canvas/device-icon";
+import { PRESET_MIME } from "./hooks/use-placement";
+import { useText } from "./text";
+
+/** A kind's picture: the device's, or the switch's ports. */
+function BlockIcon({ option }: { option: BlockOption }) {
+  if (option.preset) return <DeviceIcon data={option.preset.data} size="sm" />;
+  return (
+    <span className="flex size-8 shrink-0 items-center justify-center gap-[2px] rounded-md bg-background ring-1 ring-foreground/10" aria-hidden>
+      {["#7048e8", "#7048e8", "#2f9e44", "#2f9e44"].map((c, i) => (
+        <span key={i} className="h-3 w-1 rounded-[1px]" style={{ background: c }} />
+      ))}
+    </span>
+  );
+}
+
+/** One kind in a block's list: what it is, its key, and (a saved device) a way to forget it. */
+function KindItem({ o, current, onPick, onForget }: { o: BlockOption; current: string; onPick: (tool: string) => void; onForget: (id: string) => void }) {
+  const t = useText().toolbar;
+  return (
+    <DropdownMenuItem onClick={() => { onPick(o.tool); }} className="gap-2.5">
+      <BlockIcon option={o} />
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate">{o.label}</span>
+        <span className="truncate text-xs text-muted-foreground">{o.hint}</span>
+      </span>
+      {o.tool === current && <Check className="size-4 text-muted-foreground" />}
+      {o.key && <DropdownMenuShortcut>{o.key}</DropdownMenuShortcut>}
+      {o.preset?.group === "mine" && (
+        <span
+          role="button"
+          tabIndex={-1}
+          aria-label={t.forgetLabel(o.label)}
+          title={t.forget(o.label)}
+          onClick={(e) => {
+            e.stopPropagation();
+            onForget(o.tool);
+          }}
+          className="grid size-5 place-items-center rounded text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <X className="size-3" />
+        </span>
+      )}
+    </DropdownMenuItem>
+  );
+}
+
+/** A block's arrow: every kind it places, with what it is and its key. */
+function KindsMenu({ block, current, onPick, onForget }: { block: Block; current: string; onPick: (tool: string) => void; onForget: (id: string) => void }) {
+  const t = useText().toolbar;
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label={t.kindsOf(block.label)}
+        title={t.kindsOf(block.label)}
+        className="absolute -right-0.5 -bottom-0.5 grid size-4 place-items-center rounded-full border bg-popover text-muted-foreground shadow-sm hover:text-foreground"
+      >
+        <ChevronDown className="size-2.5" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-72">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{block.label}</DropdownMenuLabel>
+        </DropdownMenuGroup>
+        {block.options.map((o) => (
+          <KindItem key={o.tool} o={o} current={current} onPick={onPick} onForget={onForget} />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * A toolbar block: one button that places the kind picked last (drag it, or click then click
+ * the canvas), and an arrow listing every kind with what it is and its key.
+ */
+export function DeviceBlock({ block, choice, active, onPick, onForget }: { block: Block; choice: string | undefined; active: string | null; onPick: (tool: string) => void; onForget: (id: string) => void }) {
+  const current = block.options.find((o) => o.tool === choice) ?? block.options.at(0);
+  if (!current) return null;
+  const on = block.options.some((o) => o.tool === active);
+  return (
+    <div className={cn("relative flex shrink-0 items-center rounded-lg", on && "bg-brand-100 ring-1 ring-signal dark:bg-brand-950")}>
+      <button
+        type="button"
+        draggable={!!current.preset}
+        onDragStart={(e) => {
+          if (!current.preset) return;
+          e.dataTransfer.setData(PRESET_MIME, current.preset.id);
+          e.dataTransfer.effectAllowed = "move";
+        }}
+        onClick={() => { onPick(current.tool); }}
+        aria-pressed={on}
+        aria-label={`${block.label}: ${current.label}`}
+        title={`${block.label}: ${current.label} (${current.hint})${current.key ? ` · ${current.key}` : ""}`}
+        className={cn("grid size-10 place-items-center rounded-lg transition-colors hover:bg-muted", on && "hover:bg-transparent")}
+      >
+        <BlockIcon option={current} />
+      </button>
+      {block.options.length > 1 && <KindsMenu block={block} current={current.tool} onPick={onPick} onForget={onForget} />}
+    </div>
+  );
+}

package/src/components/tool/editor-menu.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useEffect } from "react";
+import { useTheme } from "next-themes";
+import { Check, CopyPlus, FileUp, FolderOpen, Info, Languages, LayoutTemplate, Link2, LogIn, LogOut, Maximize, Menu, Moon, Newspaper, Palette, Save, Sun, Trash2 } from "lucide-react";
+import { useAuthClient } from "@/lib/auth";
+import { LOCALES, localeNames } from "@/lib/i18n";
+import { DESIGNS, type Design } from "@/lib/tool/model";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useText } from "./text";
+
+/** Signed in: saving to and opening from the user's projects. */
+interface ProjectActions {
+  onSave: () => void;
+  onSaveAs: () => void;
+  onOpen: () => void;
+}
+
+interface EditorMenuProps {
+  lang: string;
+  onExample: () => void;
+  onVlanExample: () => void;
+  onShare: () => void;
+  onImportGns3: () => void;
+  design: Design;
+  onDesign: (d: Design) => void;
+  accounts: boolean;
+  projects: ProjectActions | null;
+  onClear: () => void;
+  onFit: () => void;
+  canClear: boolean;
+}
+
+/** Reports whether someone is signed in (mounted only where accounts exist). */
+export function SessionWatch({ onChange }: { onChange: (signedIn: boolean) => void }) {
+  const authClient = useAuthClient();
+  const { data } = authClient.useSession();
+  useEffect(() => {
+    onChange(!!data);
+  }, [data, onChange]);
+  return null;
+}
+
+/** Signed in through Cyber Auth, or the way to sign in (the editor works without an account). */
+function AccountItems() {
+  const t = useText().account;
+  const authClient = useAuthClient();
+  const { data, isPending } = authClient.useSession();
+  if (isPending) return null;
+  const back = window.location.pathname;
+  return (
+    <>
+      <DropdownMenuSeparator />
+      {data ? (
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="font-normal text-muted-foreground">{t.signedInAs(data.user.name || data.user.email)}</DropdownMenuLabel>
+          <DropdownMenuItem onClick={() => void authClient.signOut()}>
+            <LogOut /> {t.signOut}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      ) : (
+        <DropdownMenuItem onClick={() => void authClient.signIn.oauth2({ providerId: "cyber-auth", callbackURL: back, errorCallbackURL: back })}>
+          <LogIn /> {t.signIn}
+        </DropdownMenuItem>
+      )}
+    </>
+  );
+}
+
+/** Saving to and opening from the user's projects. */
+function ProjectItems({ projects }: { projects: ProjectActions }) {
+  const tp = useText().projects;
+  return (
+    <>
+      <DropdownMenuItem onClick={projects.onSave}>
+        <Save /> {tp.save}
+        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuItem onClick={projects.onSaveAs}>
+        <CopyPlus /> {tp.saveAs}
+      </DropdownMenuItem>
+      <DropdownMenuItem onClick={projects.onOpen}>
+        <FolderOpen /> {tp.openList}
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+    </>
+  );
+}
+
+/** The light or dark theme, and the canvas's look. */
+function LookItems({ design, onDesign }: Pick<EditorMenuProps, "design" | "onDesign">) {
+  const t = useText().menu;
+  const { resolvedTheme, setTheme } = useTheme();
+  const dark = resolvedTheme === "dark";
+  return (
+    <>
+      <DropdownMenuItem onClick={() => { setTheme(dark ? "light" : "dark"); }}>
+        {dark ? <Sun /> : <Moon />} {dark ? t.light : t.dark}
+      </DropdownMenuItem>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <Palette /> {t.style}
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          {DESIGNS.map((d) => (
+            <DropdownMenuItem key={d} onClick={() => { onDesign(d); }}>
+              {d === design ? <Check /> : <span className="size-4" />} {t.styles[d]}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    </>
+  );
+}
+
+/** The editor in another language, and the site's pages about it. */
+function SiteItems({ lang, accounts }: Pick<EditorMenuProps, "lang" | "accounts">) {
+  const t = useText().menu;
+  return (
+    <>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <Languages /> {t.language}
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          {LOCALES.map((l) => (
+            <DropdownMenuItem key={l} disabled={l === lang} render={<a href={`/${l}`} />}>
+              {localeNames[l]}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+      {accounts && <AccountItems />}
+      <DropdownMenuSeparator />
+      <DropdownMenuItem render={<a href={`/${lang}/about`} />}>
+        <Info /> {t.about}
+      </DropdownMenuItem>
+      <DropdownMenuItem render={<a href={`/${lang}/blog`} />}>
+        <Newspaper /> {t.blog}
+      </DropdownMenuItem>
+    </>
+  );
+}
+
+/** The editor's menu (top left): examples, projects, files, the look, the language. */
+export function EditorMenu(p: EditorMenuProps) {
+  const t = useText().menu;
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger aria-label={t.menu} className="grid size-9 place-items-center rounded-lg border bg-popover shadow-sm hover:bg-muted">
+        <Menu className="size-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuItem onClick={p.onExample}>
+          <LayoutTemplate /> {t.example}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={p.onVlanExample}>
+          <LayoutTemplate /> {t.vlanExample}
+        </DropdownMenuItem>
+        {p.projects && <ProjectItems projects={p.projects} />}
+        <DropdownMenuItem onClick={p.onImportGns3}>
+          <FileUp /> {t.gns3}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={p.onShare} disabled={!p.canClear}>
+          <Link2 /> {t.share}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={p.onFit}>
+          <Maximize /> {t.fit}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={p.onClear} disabled={!p.canClear}>
+          <Trash2 /> {t.clear}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <LookItems design={p.design} onDesign={p.onDesign} />
+        <SiteItems lang={p.lang} accounts={p.accounts} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/tool/export/copy-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useText } from "../text";
+
+export function CopyButton({ text, label }: { text: string; label?: string }) {
+  const t = useText().exportPanel;
+  const [copied, setCopied] = useState(false);
+  return (
+    <Button
+      size="xs"
+      variant="ghost"
+      onClick={() => {
+        // There is no clipboard outside a secure context (plain http): then nothing happens.
+        const clipboard = navigator.clipboard as Clipboard | undefined;
+        void clipboard?.writeText(text).then(() => {
+          setCopied(true);
+          setTimeout(() => {
+            setCopied(false);
+          }, 1500);
+        });
+      }}
+    >
+      {copied ? <Check data-icon="inline-start" /> : <Copy data-icon="inline-start" />}
+      {copied ? t.copied : (label ?? t.copy)}
+    </Button>
+  );
+}
+
+/** A command to copy, under its label. */
+export function Command({ label, text }: { label: string; text: string }) {
+  return (
+    <div className="rounded-md border bg-surface">
+      <div className="flex items-center justify-between border-b px-3 py-1">
+        <span className="text-xs text-muted-foreground">{label}</span>
+        <CopyButton text={text} />
+      </div>
+      <pre className="overflow-x-auto p-3 font-mono text-xs">
+        <code>{text}</code>
+      </pre>
+    </div>
+  );
+}

package/src/components/tool/export/export-panel.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { useState } from "react";
+import { CircleAlert, Download, FileCode } from "lucide-react";
+import type { GeneratedFile } from "@/lib/tool/engine";
+import { groupByTarget } from "@/lib/tool/export-targets";
+import { Button } from "@/components/ui/button";
+import { useText } from "../text";
+import { CopyButton } from "./copy-button";
+import { TargetList, type Opened } from "./target-list";
+
+/** One line to install the Isoloom command line (macOS, Linux; Windows binaries are on its releases page). */
+const INSTALL = "curl -fsSL https://raw.githubusercontent.com/isoloom/isoloom/main/install.sh | sh";
+
+interface ExportPanelProps {
+  labName: string;
+  onLabNameChange: (name: string) => void;
+  /** Containers and VMs together: only Vagrant can run it. */
+  mixed: boolean;
+  spec: string | null;
+  files: GeneratedFile[];
+  issues: string[];
+  onDownloadAll: () => void;
+  onDownloadSpec: () => void;
+  /** One target's zip: isoloom.yml and that target's folder. */
+  onDownloadTarget: (dir: string) => void;
+}
+
+/** What to fix before the lab can be downloaded. */
+function FixFirst({ issues }: { issues: string[] }) {
+  const t = useText().exportPanel;
+  return (
+    <div className="rounded-lg border border-warning/40 bg-warning/5 p-4 text-sm">
+      <p className="flex items-center gap-2 font-medium">
+        <CircleAlert className="size-4 text-warning" aria-hidden /> {t.fixFirst}
+      </p>
+      <ul className="mt-2 list-disc space-y-1 pl-6 text-muted-foreground">
+        {issues.map((p, i) => (
+          <li key={i}>{p}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/** Where it runs: one folder per target in the zip, how to install Isoloom, each target's commands. */
+function WhereItRuns({ p, opened }: { p: ExportPanelProps; opened: Opened }) {
+  const t = useText().exportPanel;
+  return (
+    <section className="flex flex-col gap-3">
+      <div>
+        <h3 className="font-semibold">{t.where}</h3>
+        <p className="text-sm text-muted-foreground">{t.whereIntro}</p>
+        {p.mixed && <p className="mt-2 rounded-md bg-pastel-yellow p-2.5 text-sm">{t.mixed}</p>}
+      </div>
+      <div className="flex flex-col gap-1.5 rounded-md bg-pastel-violet p-3 text-xs">
+        <span>{t.install}</span>
+        <div className="flex items-center gap-2">
+          <code className="min-w-0 flex-1 truncate font-mono">{INSTALL}</code>
+          <CopyButton text={INSTALL} />
+        </div>
+      </div>
+      <TargetList targets={groupByTarget(p.files, t)} ready opened={opened} onDownloadTarget={p.onDownloadTarget} />
+    </section>
+  );
+}
+
+/** isoloom.yml: the lab as one readable file, to keep in Git or edit by hand. */
+function SpecSection({ spec, show, onToggle }: { spec: string; show: boolean; onToggle: () => void }) {
+  const t = useText().exportPanel;
+  return (
+    <section className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="font-semibold">isoloom.yml</h3>
+          <p className="text-sm text-muted-foreground">{t.specIntro}</p>
+        </div>
+      </div>
+      <div className="rounded-lg border bg-surface">
+        <div className="flex items-center justify-between border-b px-3 py-1">
+          <button type="button" className="text-xs text-muted-foreground hover:text-foreground" onClick={onToggle}>
+            {show ? t.hideSpec : t.showSpec}
+          </button>
+          <CopyButton text={spec} />
+        </div>
+        {show && (
+          <pre className="max-h-96 overflow-auto p-3 font-mono text-xs">
+            <code>{spec}</code>
+          </pre>
+        )}
+      </div>
+    </section>
+  );
+}
+
+/** What the Export window shows: the lab's name, the downloads, where it runs and how. */
+export function ExportPanel(p: ExportPanelProps) {
+  const t = useText().exportPanel;
+  const [openTarget, setOpenTarget] = useState<string | null>(null);
+  const [openFile, setOpenFile] = useState<string | null>(null);
+  const [showSpec, setShowSpec] = useState(false);
+  const ready = p.spec !== null && p.issues.length === 0;
+  const opened: Opened = { target: openTarget, setTarget: setOpenTarget, file: openFile, setFile: setOpenFile };
+  return (
+    <div className="flex flex-col gap-6 p-4">
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="text-muted-foreground">{t.labName}</span>
+        <input
+          className="h-9 w-full rounded-md border border-input bg-background px-2.5 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          value={p.labName}
+          onChange={(e) => { p.onLabNameChange(e.target.value); }}
+        />
+      </label>
+      {!ready && <FixFirst issues={p.issues} />}
+      <div className="flex flex-col gap-2">
+        <Button size="lg" onClick={p.onDownloadAll} disabled={!ready}>
+          <Download data-icon="inline-start" /> {t.download(p.labName || "lab")}
+        </Button>
+        <Button size="lg" variant="outline" onClick={p.onDownloadSpec} disabled={p.spec === null}>
+          <FileCode data-icon="inline-start" /> {t.onlySpec}
+        </Button>
+      </div>
+      {ready && <WhereItRuns p={p} opened={opened} />}
+      {p.spec && <SpecSection spec={p.spec} show={showSpec} onToggle={() => { setShowSpec((s) => !s); }} />}
+    </div>
+  );
+}