@@ -121,11 +121,19 @@ external, x.render(…) ambiguous: A.render() | B.render()`). Choosing
   every file can be walked to. `repo` has one, `→ src/index.ts`; a
   single-file example has its file. R returns to the entrance; the source
   panel shows nothing there.
-- Milestone 17 (current): class lobbies. The methods of a top-level class
+- Milestone 17: class lobbies. The methods of a top-level class
   that hang off the hub open off a lobby of their own instead (`class
 UserService`), one door of the module hub; methods reached by a call door
   keep it. The HUD reads `service.ts · class UserService` and the source
   panel shows the whole class.
+- Milestone 18 (current): lazy areas. A code world generates its entrance
+  only; a module's area is generated when the player faces a portal into
+  it (or steps into one first), placed after the areas so far, so nothing
+  already there moves, and the player, the breadcrumb and the map carry on.
+  A portal into a file not generated yet is dark until it is; one whose
+  file could not be laid out stays dark and reads `closed · <file> could
+not be laid out`. The HUD reads `2/7 modules · last 14 ms` on the way;
+  `?eager=1` generates every module up front, as before.
 
 ---
 
 
@@ -1,13 +1,8 @@
 import { Canvas } from "@react-three/fiber";
-import type { CodeGraph } from "@repo/code-graph";
 import { PointerLook } from "@repo/renderer/controls";
 import { Player } from "@repo/renderer/player";
 import { World } from "@repo/renderer/world";
-import type { GeneratedWorld } from "@repo/types";
-import { generateWorld } from "@repo/world-generator";
-import { mergeAreas } from "@repo/world-generator/areas";
 import type { Target } from "@repo/world-generator/interaction";
-import { presets } from "@repo/world-generator/presets";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Hud } from "~/hud";
@@ -17,31 +12,31 @@ import { initialSeed, nextSeed, parseWorldParams, withSeed } from "~/params";
 import { createPoseFeed } from "~/pose-feed";
 import { SourcePanel } from "~/source-panel";
 import { sourceView } from "~/source-view";
+import { useAreaWorld } from "~/use-area-world";
+import type { WorldOptions } from "~/use-area-world";
 import { useNavigation } from "~/use-navigation";
 import {
-  areasFromCode,
   breadcrumbOf,
   codeGraphOf,
   describeRoom,
   promptOf,
   sourceSeedOf,
 } from "~/world-from-code";
 
-type Generated = {
-  readonly world: GeneratedWorld | null;
-  /** Modules of a code world, each its own area; one for other worlds. */
-  readonly modules: number;
-  readonly codeGraph: CodeGraph | null;
-  /** Graph connections and portals the layout could not realise, one line each. */
-  readonly warnings: readonly string[];
-  readonly error: string | null;
-};
-
 const initial = parseWorldParams(globalThis.location.search);
 
 // Parsed once: a syntax error in a bundled example does not depend on the
 // seed, and it is shown in the HUD rather than thrown through the renderer.
 const code = initial.code === null ? null : codeGraphOf(initial.code);
+const codeGraph = code?.codeGraph ?? null;
+
+const worldOptions: WorldOptions = {
+  codeGraph,
+  codeError: code?.error ?? null,
+  eager: initial.eager,
+  rooms: initial.rooms,
+  preset: initial.preset,
+};
 
 // A code world without `?seed` takes its source's own seed, so the same
 // program reloads into the same world; `?seed` and N override it.
@@ -53,62 +48,6 @@ const startSeed = initialSeed(
 // Fed from the render loop and read only by the open map, never by the app.
 const feed = createPoseFeed();
 
-const generate = (
-  seed: number
-): { readonly world: GeneratedWorld; readonly modules: number } => {
-  const codeGraph = code?.codeGraph ?? null;
-  if (codeGraph !== null) {
-    const areas = areasFromCode(codeGraph, seed);
-    // The entrance is an area but not a module.
-    return { world: mergeAreas(areas), modules: codeGraph.modules.length };
-  }
-  const world = generateWorld({
-    seed,
-    roomCount: initial.rooms,
-    graph: initial.preset === null ? undefined : presets[initial.preset],
-  });
-  return { world, modules: 1 };
-};
-
-/**
- * Builds the world once per seed: it never regenerates while the player moves.
- * Generation errors (an unplaceable graph) are shown, not thrown.
- */
-const useGeneratedWorld = (seed: number): Generated =>
-  useMemo(() => {
-    const codeGraph = code?.codeGraph ?? null;
-    if (code !== null && code.error !== null) {
-      return {
-        world: null,
-        modules: 0,
-        codeGraph,
-        warnings: [],
-        error: code.error,
-      };
-    }
-    try {
-      const { world, modules } = generate(seed);
-      // Shown in the HUD, so the console stays quiet.
-      const warnings = [
-        ...world.layout.unresolved.map(
-          ({ from, to }) => `${from} -> ${to} could not be laid out`
-        ),
-        ...world.layout.unplacedPortals.map(
-          ({ id }) => `${id} has no wall space`
-        ),
-      ];
-      return { world, modules, codeGraph, warnings, error: null };
-    } catch (error) {
-      return {
-        world: null,
-        modules: 0,
-        codeGraph,
-        warnings: [],
-        error: String(error),
-      };
-    }
-  }, [seed]);
-
 const App = () => {
   const [locked, setLocked] = useState(false);
   const [seed, setSeed] = useState(startSeed);
@@ -117,20 +56,42 @@ const App = () => {
   const [sourceOpen, setSourceOpen] = useState(false);
   const [mapOpen, setMapOpen] = useState(false);
   const [visits, setVisits] = useState(EMPTY_VISITS);
-  const generated = useGeneratedWorld(seed);
+  // Generated once per seed, then grown an area at a time: it never
+  // regenerates while the player moves.
+  const generated = useAreaWorld(seed, worldOptions);
+  const { ensurePortal } = generated;
   const built = generated.world?.built ?? null;
-  const navigation = useNavigation(generated.world);
-  const { onRoomChange, back, home } = navigation;
+  const navigation = useNavigation(seed, generated.current);
+  const { onRoomChange, back, home, onPortal: stepPortal } = navigation;
 
   const onRoom = useCallback(
     (id: string | null) => {
       setRoomId(id);
-      setVisits((previous) => visit(previous, built, id));
+      setVisits((previous) => visit(previous, seed, id));
       onRoomChange(id);
     },
-    [built, onRoomChange]
+    [seed, onRoomChange]
+  );
+
+  // A portal entered before its far side was generated: generate it first,
+  // so the step lands there.
+  const onPortal = useCallback(
+    (portalId: string) => {
+      ensurePortal(portalId);
+      stepPortal(portalId);
+    },
+    [ensurePortal, stepPortal]
   );
 
+  // The portal in front of the player leads into an area not generated yet:
+  // generate it now, before the player steps in. Also run when the world
+  // changes, as a target kept across a new seed reports no change.
+  useEffect(() => {
+    if (target?.kind === "portal") {
+      ensurePortal(target.portalId);
+    }
+  }, [target, ensurePortal, generated.world]);
+
   // N: next seed (the only thing that regenerates the world). Backspace and
   // R navigate, E shows the source and M or Tab the map, only while walking,
   // so a free pointer leaves them alone.
@@ -188,16 +149,14 @@ const App = () => {
     }
   }, [generated.error]);
 
-  const place =
-    roomId === null ? null : describeRoom(generated.codeGraph, roomId);
+  const place = roomId === null ? null : describeRoom(codeGraph, roomId);
   const sources = code?.error === null ? code.sources : null;
   const source = useMemo(
-    () =>
-      sources === null
-        ? null
-        : sourceView(generated.codeGraph, sources, roomId),
-    [generated.codeGraph, sources, roomId]
+    () => (sources === null ? null : sourceView(codeGraph, sources, roomId)),
+    [sources, roomId]
   );
+  const failed =
+    target?.kind === "portal" ? generated.failedArea(target.portalId) : null;
 
   return (
     <div className="relative h-dvh w-screen overflow-hidden bg-black">
@@ -220,7 +179,7 @@ const App = () => {
             enabled={locked}
             onRoomChange={onRoom}
             placement={navigation.placement}
-            onPortal={navigation.onPortal}
+            onPortal={onPortal}
             onNearTarget={setTarget}
             onMove={feed.publish}
           />
@@ -230,7 +189,7 @@ const App = () => {
       {locked && mapOpen && built !== null && (
         <OverviewMap
           world={built}
-          visited={visitedIn(visits, built)}
+          visited={visitedIn(visits, seed)}
           current={roomId}
           feed={feed}
         />
@@ -243,15 +202,20 @@ const App = () => {
         seed={seed}
         rooms={generated.world?.graph.rooms.length ?? 0}
         modules={generated.modules}
+        lastMs={generated.lastMs}
         preset={initial.preset}
         code={initial.code}
         place={place}
         breadcrumb={breadcrumbOf(
-          generated.codeGraph,
+          codeGraph,
           navigation.frames,
           navigation.roomId
         )}
-        prompt={promptOf(generated.codeGraph, navigation.frames, target)}
+        prompt={
+          failed === null
+            ? promptOf(codeGraph, navigation.frames, target)
+            : `closed · ${failed} could not be laid out`
+        }
         warnings={generated.warnings}
         error={generated.error}
       />
 
@@ -2,8 +2,10 @@ type HudProps = {
   readonly locked: boolean;
   readonly seed: number;
   readonly rooms: number;
-  /** Modules of a code world, each its own area. */
-  readonly modules: number;
+  /** Modules of a code world generated so far and in all, each its own area. */
+  readonly modules: { readonly built: number; readonly total: number };
+  /** Milliseconds the last module generated on the way took, or null. */
+  readonly lastMs: number | null;
   readonly preset: string | null;
   readonly code: string | null;
   /** Where the player is: `file · fn()` for code worlds, else the room id. */
@@ -33,20 +35,36 @@ const codeHints: readonly (readonly [string, string])[] = [
   ["Wheel", "scroll the source"],
 ];
 
+/** `6 modules` once all are generated, `2/6 modules · last 14 ms` on the way. */
+const modulesOf = ({
+  modules: { built, total },
+  lastMs,
+}: Pick<HudProps, "modules" | "lastMs">): string | null => {
+  if (total <= 1) {
+    return null;
+  }
+  const count = built < total ? `${built}/${total}` : `${total}`;
+  return lastMs === null
+    ? `${count} modules`
+    : `${count} modules · last ${Math.round(lastMs)} ms`;
+};
+
 const whereOf = ({
   seed,
   rooms,
   modules,
+  lastMs,
   preset,
   code,
 }: Pick<
   HudProps,
-  "seed" | "rooms" | "modules" | "preset" | "code"
+  "seed" | "rooms" | "modules" | "lastMs" | "preset" | "code"
 >): string => {
   if (code !== null) {
-    return modules > 1
-      ? `seed ${seed} · code ${code} · ${modules} modules`
-      : `seed ${seed} · code ${code}`;
+    const count = modulesOf({ modules, lastMs });
+    return count === null
+      ? `seed ${seed} · code ${code}`
+      : `seed ${seed} · code ${code} · ${count}`;
   }
   return `seed ${seed} · ${preset ?? `${rooms} rooms`}`;
 };
 
@@ -31,28 +31,36 @@ const hubRoom = () => {
 
 describe("visit", () => {
   it("records a room of the world", () => {
-    const visits = visit(EMPTY_VISITS, demo, "a");
-    expect([...visitedIn(visits, demo)]).toEqual(["a"]);
+    const visits = visit(EMPTY_VISITS, 1, "a");
+    expect([...visitedIn(visits, 1)]).toEqual(["a"]);
   });
 
   it("leaves the visits alone between rooms and on a repeat", () => {
-    const visits = visit(EMPTY_VISITS, demo, "a");
-    expect(visit(visits, demo, null)).toBe(visits);
-    expect(visit(visits, demo, "a")).toBe(visits);
+    const visits = visit(EMPTY_VISITS, 1, "a");
+    expect(visit(visits, 1, null)).toBe(visits);
+    expect(visit(visits, 1, "a")).toBe(visits);
   });
 
-  it("starts over for another world", () => {
-    const other = builtOf("demo", 2);
-    const visits = visit(visit(EMPTY_VISITS, demo, "a"), demo, "b");
-    const next = visit(visits, other, "c");
-    expect([...visitedIn(next, other)]).toEqual(["c"]);
-    expect(visitedIn(next, demo).size).toBe(0);
-    expect(visitedIn(visit(visits, other, null), other).size).toBe(0);
+  it("starts over for another seed", () => {
+    const visits = visit(visit(EMPTY_VISITS, 1, "a"), 1, "b");
+    const next = visit(visits, 2, "c");
+    expect([...visitedIn(next, 2)]).toEqual(["c"]);
+    expect(visitedIn(next, 1).size).toBe(0);
+    expect(visitedIn(visit(visits, 2, null), 2).size).toBe(0);
   });
 
   it("shows nothing of a world the visits do not belong to", () => {
-    const visits = visit(EMPTY_VISITS, demo, "a");
-    expect(visitedIn(visits, builtOf("demo", 2)).size).toBe(0);
+    const visits = visit(EMPTY_VISITS, 1, "a");
+    expect(visitedIn(visits, 2).size).toBe(0);
+  });
+
+  it("keeps the rooms while the world of the same seed grows", () => {
+    // A new world object for the same seed, as a world that grew is.
+    const before = builtOf("demo");
+    const visits = visit(EMPTY_VISITS, 1, "demo.ts");
+    const after = builtOf("demo");
+    expect(after).not.toBe(before);
+    expect([...visitedIn(visit(visits, 1, null), 1)]).toEqual(["demo.ts"]);
   });
 });