TKW: seed map view, fullscreen, King's Landing marker, editMode overlay

CLAUDE.md

@@ -4,8 +4,8 @@ Operating rules for this repo. The README covers stack, layout, and routes; this
 
 ## Workflow
 
-- Always create a branch for each feature or bug fix.
-- Auto-commit each logical change without asking. Subject must start with `TKW:` (see the `tkw-commit-format` skill).
+- Never commit directly to `main`; always create a branch for each feature or bug fix. Do not create a new branch unless I say so.
+- Do not commit anything without explicit instruction from me first. When I do, subject must start with `TKW:` (see the `tkw-commit-format` skill).
 
 ## Tooling
 

app/maps/page.tsx

@@ -1,8 +1,9 @@
+import { Suspense } from "react";
 import type { Metadata } from "next";
 import { ParchmentLayout } from "@/components/ParchmentLayout";
 import { PageHeading } from "@/components/PageHeading";
 import { sectionGlyphs } from "@/components/SectionGlyphs/SectionGlyphs";
-import { WorldMap } from "@/components/WorldMap";
+import { WorldMap, WorldMapSkeleton } from "@/components/WorldMap";
 
 export const metadata: Metadata = {
   title: "Maps · Atlas of the Known World",
@@ -17,11 +18,13 @@ export default function MapsPage() {
         icon={sectionGlyphs.maps}
         subtitle="The Known World, from the Sunset Sea to the Shadow Lands."
       />
-      <WorldMap
-        src="/map/map_natural_8K.jpg"
-        naturalWidth={7680}
-        naturalHeight={7680}
-      />
+      <Suspense fallback={<WorldMapSkeleton />}>
+        <WorldMap
+          src="/map/the-known-world-enhanced.jpg"
+          naturalWidth={10000}
+          naturalHeight={8300}
+        />
+      </Suspense>
     </ParchmentLayout>
   );
 }

components/MainMenu/MainMenu.test.tsx

@@ -35,13 +35,6 @@ describe("MainMenu", () => {
     expect(hrefs).not.toContain("/dragons/");
   });
 
-  it("shows a coming-soon pill only on the Maps tile", () => {
-    render(<MainMenu />);
-    const pills = screen.getAllByText(/coming soon/i);
-    expect(pills).toHaveLength(1);
-    expect(pills[0].closest("a")?.getAttribute("href")).toBe("/maps/");
-  });
-
   it('wraps tiles in a nav landmark labelled "Atlas sections"', () => {
     render(<MainMenu />);
     expect(

components/MainMenu/MainMenu.tsx

@@ -10,7 +10,6 @@ export function MainMenu() {
         subtitle="Survey the realm."
         glyph={sectionGlyphs.maps}
         href="/maps/"
-        status="coming-soon"
       />
       <MainMenuTile
         title="Timeline"

components/MainMenuTile/MainMenuTile.module.scss

@@ -55,14 +55,3 @@
   color: var(--ink-faded);
   font-size: 1rem;
 }
-
-.pill {
-  position: absolute;
-  right: 0.8rem;
-  bottom: 0.6rem;
-  font-family: var(--font-ui);
-  font-size: 0.7rem;
-  letter-spacing: 0.5px;
-  color: var(--ink-faded);
-  opacity: 0.85;
-}

components/MainMenuTile/MainMenuTile.test.tsx

@@ -19,27 +19,4 @@ describe("MainMenuTile", () => {
     expect(link.textContent).toContain("Survey the realm.");
     expect(screen.getByTestId("glyph")).toBeDefined();
   });
-
-  it('shows a "Coming soon" pill only when status is coming-soon', () => {
-    const { rerender } = render(
-      <MainMenuTile
-        title="Map"
-        subtitle="Survey the realm."
-        glyph={null}
-        href="/map/"
-      />,
-    );
-    expect(screen.queryByText(/coming soon/i)).toBeNull();
-
-    rerender(
-      <MainMenuTile
-        title="Map"
-        subtitle="Survey the realm."
-        glyph={null}
-        href="/map/"
-        status="coming-soon"
-      />,
-    );
-    expect(screen.getByText(/coming soon/i)).toBeDefined();
-  });
 });

components/MainMenuTile/MainMenuTile.tsx

@@ -7,7 +7,6 @@ export type MainMenuTileProps = {
   subtitle: string;
   glyph: ReactNode;
   href: string;
-  status?: "coming-soon";
   visible?: boolean;
 };
 
@@ -16,7 +15,6 @@ export function MainMenuTile({
   subtitle,
   glyph,
   href,
-  status,
   visible = true,
 }: MainMenuTileProps) {
   if (!visible) return null;
@@ -28,11 +26,6 @@ export function MainMenuTile({
       </span>
       <span className={styles.title}>{title}</span>
       <span className={styles.subtitle}>{subtitle}</span>
-      {status === "coming-soon" && (
-        <span className={styles.pill} aria-hidden="true">
-          ⊙ Coming soon
-        </span>
-      )}
     </Link>
   );
 }

components/WorldMap/WorldMap.module.scss

@@ -38,13 +38,81 @@
     font-style: italic;
     color: var(--ink-faded);
   }
+
+  &:fullscreen {
+    width: 100vw;
+    height: 100vh;
+    border: none;
+    border-radius: 0;
+  }
 }
 
 .canvas {
   grid-area: canvas;
   touch-action: none;
 }
 
+.marker {
+  cursor: pointer;
+
+  circle {
+    fill: rgba(212, 162, 89, 0);
+    stroke: rgba(212, 162, 89, 0);
+    stroke-width: 3;
+    transition:
+      fill 120ms ease,
+      stroke 120ms ease;
+  }
+
+  &:hover circle,
+  &:focus-visible circle {
+    fill: rgba(212, 162, 89, 0.18);
+    stroke: var(--gold-leaf);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    circle {
+      transition: none;
+    }
+  }
+}
+
+.debug {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-start: 0.75rem;
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 0.15rem 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid rgba(107, 68, 35, 0.35);
+  border-radius: 2px;
+  background: rgba(248, 236, 208, 0.85);
+  color: var(--ink-faded);
+  font-size: 0.85rem;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+
+  dt {
+    font-weight: 600;
+  }
+
+  dd {
+    margin: 0;
+    text-align: right;
+  }
+}
+
+.fullscreenControl {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+}
+
 .dpad {
   position: absolute;
   inset-block-end: 0.75rem;