From a11c8bfaa716f9872c2d433d103b94f189aa81ab Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Fri, 23 Oct 2026 01:45:16 +0000
Subject: [PATCH] fix(studio): the travel panel builds its tiles with the book
 engine's factories

Figures, countries, maps and marks placed from the panel are the elements the
assistant adds, built by the shared factories; the panel keeps only their
placement. A trip map no longer carries the whole journey's trail, switching a
map's scope re-cuts it the way the engine does and clears the roads of the old
legs, and switching back to the whole journey restores the trail.
---
 client/scripts/eslint-baseline.json           |   4 +-
 client/scripts/theme-baseline.json            |   1 -
 .../src/components/Studio/StudioInspector.tsx |   5 +-
 client/src/components/Studio/StudioShell.tsx  |  25 +-
 .../Studio/StudioTravelInspector.tsx          |  39 ++-
 .../components/Studio/StudioTravelPanel.tsx   | 256 ++++++------------
 client/tests/unit/studio/inspector.test.tsx   |   1 +
 .../unit/studio/inspectorTravel.test.tsx      |  57 +++-
 .../unit/studio/travelPanelEngine.test.tsx    | 240 ++++++++++++++++
 9 files changed, 418 insertions(+), 210 deletions(-)
 create mode 100644 client/tests/unit/studio/travelPanelEngine.test.tsx

diff --git a/client/scripts/eslint-baseline.json b/client/scripts/eslint-baseline.json
index 03c927b19..d1308f2c7 100644
--- a/client/scripts/eslint-baseline.json
+++ b/client/scripts/eslint-baseline.json
@@ -6,7 +6,7 @@
     "complexity": 226,
     "@typescript-eslint/no-explicit-any": 146,
     "trek/no-swallowed-catch": 131,
-    "max-params": 34,
+    "max-params": 33,
     "trek/store-without-selector": 67,
     "react-hooks/refs": 557,
     "react-hooks/set-state-in-effect": 195,
@@ -14,7 +14,7 @@
     "react-hooks/exhaustive-deps": 116,
     "@typescript-eslint/no-unused-vars": 126,
     "react-hooks/immutability": 28,
-    "max-lines-per-function": 133,
+    "max-lines-per-function": 132,
     "react-hooks/static-components": 78,
     "react-hooks/preserve-manual-memoization": 12,
     "no-useless-assignment": 7,
diff --git a/client/scripts/theme-baseline.json b/client/scripts/theme-baseline.json
index 2ab2bac1c..74cf5cc22 100644
--- a/client/scripts/theme-baseline.json
+++ b/client/scripts/theme-baseline.json
@@ -105,7 +105,6 @@
   "components/Studio/StudioInspector.tsx": 2,
   "components/Studio/StudioShell.tsx": 2,
   "components/Studio/StudioSidebar.tsx": 2,
-  "components/Studio/StudioTravelPanel.tsx": 1,
   "components/Studio/TravelElements.tsx": 5,
   "components/Studio/printSheets.ts": 5,
   "components/SystemNotices/ReleaseNoticeVisuals.tsx": 4,
diff --git a/client/src/components/Studio/StudioInspector.tsx b/client/src/components/Studio/StudioInspector.tsx
index 570ba7b24..e88e52093 100644
--- a/client/src/components/Studio/StudioInspector.tsx
+++ b/client/src/components/Studio/StudioInspector.tsx
@@ -52,6 +52,7 @@ export function StudioInspector({
   spreadIndex,
   page,
   stats,
+  path,
   source,
   setPageNumbers,
   t,
@@ -62,6 +63,8 @@ export function StudioInspector({
   setPageNumbers: (patch: Partial<BookPageNumbers>) => void
   /** Live journey figures, so a travel element can be brought up to date. */
   stats: JourneyStats | null
+  /** The journey's recorded way, thinned, so a map of the whole journey can be given it again. */
+  path: [number, number][][]
   /** The journal itself, so a bound mark can be re-set from it. */
   source: JourneySource
   t: (k: string) => string
@@ -647,7 +650,7 @@ export function StudioInspector({
           </>
         )}
 
-        <TravelInspector el={el} stats={stats} set={set} t={t} locale={locale} />
+        <TravelInspector el={el} stats={stats} path={path} set={set} t={t} locale={locale} />
 
         {/*
           Where it sits, folded away.
diff --git a/client/src/components/Studio/StudioShell.tsx b/client/src/components/Studio/StudioShell.tsx
index 5b7a0633b..2fab721b7 100644
--- a/client/src/components/Studio/StudioShell.tsx
+++ b/client/src/components/Studio/StudioShell.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useNavigate } from 'react-router'
 import {
-  ArrowLeft, BookOpen, Check, ChevronDown, ClipboardPaste, Download, Maximize2, MessageSquare, Minus, Plus,
+  ArrowLeft, BookOpen, Check, ChevronDown, ClipboardPaste, Download, Maximize2, Minus, Plus,
   Redo2, Sparkles, Undo2,
 } from 'lucide-react'
 import { useJourneyStudio } from '../../pages/journeyStudio/useJourneyStudio'
@@ -21,7 +21,7 @@ import { PeerBadges } from './PeerBadges'
 import { TrimField } from './TrimField'
 import { Tooltip } from '../shared/Tooltip'
 import { useStudioStore } from '../../store/studioStore'
-import StudioAssistantPanel, { StudioPageStage } from './StudioAssistantPanel'
+import { StudioAssistantColumn, StudioAssistantToggle, StudioPageStage } from './StudioAssistantPanel'
 import { useStudioAssistant, type StudioAssistant } from './useStudioAssistant'
 import '../../styles/dashboard.css'
 import '../../styles/studio.css'
@@ -128,12 +128,13 @@ export default function StudioShell() {
             spreadIndex={s.activeSpread}
             page={s.page}
             stats={s.stats}
+            path={s.path}
             source={s.source}
             setPageNumbers={s.setPageNumbers}
             t={s.t}
             locale={s.locale}
           />
-          <AssistantColumn s={s} assistant={assistant} />
+          <StudioAssistantColumn assistant={assistant} title={s.journey?.title} />
         </div>
         <StudioPageStage assistant={assistant} />
 
@@ -153,12 +154,6 @@ export default function StudioShell() {
 
 type Studio = ReturnType<typeof useJourneyStudio>
 
-/** The chat column at the end of the body, while it is open. */
-function AssistantColumn({ s, assistant }: { s: Studio; assistant: StudioAssistant }) {
-  if (!assistant.open) return null
-  return <StudioAssistantPanel assistant={assistant} title={s.journey?.title || s.t('journey.title')} />
-}
-
 function StudioBar({
   s, bookView, setBookView, onExport, assistant,
 }: {
@@ -238,17 +233,7 @@ function StudioBar({
 
         <AutoLayoutButton s={s} />
         {/* The book's assistant, as a column beside the page; only where it can run for this user. */}
-        {assistant.available && (
-          <button type="button"
-            className={`st-tool ${assistant.open ? 'is-on' : ''}`}
-            onClick={assistant.toggle}
-            aria-pressed={assistant.open}
-            title={s.t('journey.studio.assistant.toggleHint')}
-          >
-            <MessageSquare size={14} />
-            <span className="st-tool-label">{s.t('journey.studio.assistant.toggle')}</span>
-          </button>
-        )}
+        <StudioAssistantToggle assistant={assistant} />
         <button type="button"
           className="st-tool is-primary"
           onClick={onExport}
diff --git a/client/src/components/Studio/StudioTravelInspector.tsx b/client/src/components/Studio/StudioTravelInspector.tsx
index 453e897a9..1e4d7d421 100644
--- a/client/src/components/Studio/StudioTravelInspector.tsx
+++ b/client/src/components/Studio/StudioTravelInspector.tsx
@@ -3,7 +3,7 @@ import type {
   BookBadgeElement, BookCountriesElement, BookElement, BookListElement, BookMapElement,
   BookMetric, BookStatsElement, JourneyStats,
 } from '@trek/shared'
-import { BOOK_METRICS, isStale, refreshPatch, routeFor } from '@trek/shared'
+import { BOOK_METRICS, MAX_PATH_POINTS, MAX_PATH_SEGMENTS, isStale, refreshPatch } from '@trek/shared'
 import { Swatches } from './StudioSwatches'
 import { FontButtons, WeightLine } from './StudioTypeControls'
 import { sourceIdOf, useMapSources } from './mapSources'
@@ -25,6 +25,8 @@ export interface TravelInspectorProps {
   el: BookElement
   /** Live figures, for the refresh button. Null while loading or on failure. */
   stats: JourneyStats | null
+  /** The journey's recorded way, thinned, which a map switched back to the whole journey draws again. */
+  path: [number, number][][]
   set: (patch: Partial<BookElement>) => void
   t: (k: string) => string
   locale: string
@@ -36,7 +38,7 @@ interface Props<T> {
   t: (k: string) => string
 }
 
-export function TravelInspector({ el, stats, set, t }: TravelInspectorProps) {
+export function TravelInspector({ el, stats, path, set, t }: TravelInspectorProps) {
   if (
     el.kind !== 'map' && el.kind !== 'stats' && el.kind !== 'countries'
     && el.kind !== 'badge' && el.kind !== 'list'
@@ -64,7 +66,7 @@ export function TravelInspector({ el, stats, set, t }: TravelInspectorProps) {
         </div>
       )}
 
-      {el.kind === 'map' && <MapProps el={el} set={set} t={t} stats={stats} />}
+      {el.kind === 'map' && <MapProps el={el} set={set} t={t} stats={stats} journeyPath={path} />}
       {el.kind === 'stats' && <StatsProps el={el} set={set} t={t} />}
       {el.kind === 'countries' && <CountriesProps el={el} set={set} t={t} />}
       {el.kind === 'badge' && <BadgeProps el={el} set={set} t={t} />}
@@ -188,7 +190,13 @@ function ListProps({ el, set, t }: Props<BookListElement>) {
   )
 }
 
-function MapProps({ el, set, t, stats }: Props<BookMapElement> & { stats: JourneyStats | null }) {
+/** A map's panel reads the journey too: its live figures, and its recorded way for a map of all of it. */
+type MapPropsInput = Props<BookMapElement> & {
+  stats: JourneyStats | null
+  journeyPath: [number, number][][]
+}
+
+function MapProps({ el, set, t, stats, journeyPath }: MapPropsInput) {
   const cartoKey = useCartoApiKey()
   const [roadState, setRoadState] = useState<'idle' | 'busy'>('idle')
   const [roadDone, setRoadDone] = useState(0)
@@ -248,15 +256,26 @@ function MapProps({ el, set, t, stats }: Props<BookMapElement> & { stats: Journe
               })),
             ]}
             onPick={id => {
-              if (!stats) return
               const tripId = id === 0 ? null : id
-              const route = routeFor(stats, tripId)
+              // The scope it already has: a re-cut would only drop the roads loaded for these legs.
+              if (!stats || tripId === (el.tripId ?? null)) return
+              /*
+               * Re-cut by the engine's own refresh at the new scope, so the
+               * stops and countries are what refresh_travel and a newly placed
+               * map of that scope hold. The recorded way is the whole
+               * journey's: a trip map draws none, as the engine places none,
+               * and a map of the whole journey gets it back from the journey
+               * at the engine's caps, so a switch there and back loses
+               * nothing. The roads go with the old legs, since entry i is the
+               * way from stop i to stop i + 1 of the route that is gone.
+               */
               set({
+                ...refreshPatch({ ...el, tripId }, stats),
                 tripId,
-                countries: tripId == null
-                  ? stats.countries.map(c => c.code)
-                  : [...new Set(route.map(p => p.country).filter((c): c is string => !!c))],
-                points: route.map(p => ({ lat: p.lat, lng: p.lng, label: p.label, photoId: p.photoId ?? null })),
+                path: tripId == null
+                  ? journeyPath.slice(0, MAX_PATH_SEGMENTS).map(seg => seg.slice(0, MAX_PATH_POINTS))
+                  : [],
+                roads: [],
               } as Partial<BookElement>)
             }}
           />
diff --git a/client/src/components/Studio/StudioTravelPanel.tsx b/client/src/components/Studio/StudioTravelPanel.tsx
index 449b6549d..f17f745c3 100644
--- a/client/src/components/Studio/StudioTravelPanel.tsx
+++ b/client/src/components/Studio/StudioTravelPanel.tsx
@@ -1,13 +1,16 @@
 import { useEffect, useRef, useState } from 'react'
 import { Check, RouteOff } from 'lucide-react'
-import type { BookElement, BookMetric, BookPageSetup, JourneyStats } from '@trek/shared'
-import { BOOK_METRICS, bookElementId as uid } from '@trek/shared'
+import type {
+  BookBadgeVariant, BookElement, BookMapScope, BookMetric, BookPageSetup, BookTravelContext, JourneyStats,
+} from '@trek/shared'
+import {
+  BOOK_METRICS, bookBadgeValue, bookCountryName, bookElementId as uid, bookTravelBadge, bookTravelCountries,
+  bookTravelMap, bookTravelSize, bookTravelStats,
+} from '@trek/shared'
 import { useStudioStore } from '../../store/studioStore'
 import { PanelHead } from './StudioPanelHead'
 import { Section } from './StudioControls'
 import { TravelPreview } from './TravelPreview'
-import { formatBookCoords, routeFor } from '@trek/shared'
-import { useMapSources } from './mapSources'
 import { fetchRoads } from './roadRoute'
 
 /**
@@ -61,10 +64,19 @@ type StopRow = {
  * the section scannable. The tile measures its own width — see TravelPreview.
  */
 
-/** Kilometres, grouped for the reader's locale. */
-function formatDistance(metres: number, locale: string): string {
-  return `${new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(metres / 1000)} km`
-}
+/** The words a mark carries, as the book engine resolves them. */
+type BadgeValue = NonNullable<ReturnType<typeof bookBadgeValue>>
+
+/*
+ * The two imagery maps, satellite first: the recommendation should not be the
+ * second thing read. Their tiles and credit are the book engine's own
+ * (BOOK_MAP_SOURCES), so a satellite map placed here is the one the assistant
+ * places.
+ */
+const IMAGERY = [
+  { id: 'satellite', labelKey: 'journey.studio.mapSourceSatellite' },
+  { id: 'relief', labelKey: 'journey.studio.mapSourceRelief' },
+] as const
 
 function Card({ label, onClick, children, recommended = false, title }: {
   label: string
@@ -143,23 +155,6 @@ export function StudioTravelPanel({
     return { x: (W - w) / 2, y: (page.pageHeight - h) / 2, w, h }
   }
 
-  const mapSide = Math.min(page.pageWidth, page.pageHeight) * 0.72
-
-  /*
-   * The imagery this instance can reach, so the relief card below places a map
-   * that already has its template and its credit rather than an empty one the
-   * user then has to point at a source.
-   *
-   * Asked for above the empty-state return, and not beside the card that reads
-   * it: a journey whose figures are still loading renders this panel once with
-   * no stats at all, and a hook that only runs on the second render is a hook
-   * count that changes between them.
-   */
-  const sources = useMapSources(
-    { x: 0, y: 0, w: mapSide, h: mapSide * 0.78 },
-    (stats?.points ?? []).map(p => ({ lat: p.lat, lng: p.lng })),
-  )
-
   if (!stats) {
     return (
       <>
@@ -171,11 +166,25 @@ export function StudioTravelPanel({
     )
   }
 
-  const base = {
-    rotation: 0, opacity: 1, locked: false,
-    font: 'sans' as const, color: '#1a1a1a', accent: '#111111', textScale: 1, weight: 700 as const,
-    stale: false,
+  /*
+   * What the book engine's factories read: the journey, its recorded way and
+   * the words in the reader's language. Every tile below is built by the
+   * factory the engine's `add` calls. Where it lands is the panel's own:
+   * centred across the spread, where `add` takes the right page. Two words are
+   * still the panel's too, so a mark placed here and one the assistant adds
+   * can read differently: the country mark carries the name in `text`, where
+   * the engine's value has it in `sub`, and the day mark says `dayWord`, where
+   * the engine says `day` (the two differ in ja, ko, zh and zh-TW).
+   */
+  const travel: BookTravelContext = {
+    locale, stats, path, entries: [],
+    labels: {
+      day: t('journey.studio.dayWord'), stations: t('journey.studio.stations'), summary: t('journey.studio.summary'),
+      countries: t('journey.studio.countries'), distance: t('journey.studio.metric.distance'),
+      pros: t('journey.editor.pros'), cons: t('journey.editor.cons'),
+    },
   }
+  const at = (size: { w: number; h: number }) => centre(size.w, size.h)
 
   /**
    * Country names in the reader's language, not the server's.
@@ -185,29 +194,13 @@ export function StudioTravelPanel({
    * a German book says "Island" and an English one says "Iceland" — from one set
    * of codes, with no translation table to keep in step.
    */
-  const countryName = (code: string): string => {
-    try {
-      const display = new Intl.DisplayNames([locale], { type: 'region' })
-      return display.of(code.toUpperCase()) || code.toUpperCase()
-    } catch {
-      return stats.countries.find(c => c.code === code)?.name || code.toUpperCase()
-    }
-  }
-
-  const values: Record<string, number> = {
-    distance: stats.distance,
-    days: stats.days,
-    steps: stats.steps,
-    photos: stats.photos,
-    countries: stats.countries.length,
-    places: stats.places,
-    furthest: stats.furthest,
-  }
+  const countryName = (code: string): string => bookCountryName(code, locale, stats)
 
   /*
    * Each builder returns the finished element. The tile renders it and the
-   * click places it, so the preview and the result are the same object — there
-   * is no second description of what a card means.
+   * click places it, so the preview and the result are the same object, and
+   * the object is the engine's, so there is no second description of what a
+   * card means.
    */
   /** The linked trips that actually put stops on the route. */
   const tripsWithRoute = (stats.trips ?? []).filter(t => t.points > 0)
@@ -262,11 +255,6 @@ export function StudioTravelPanel({
     })
   }
 
-  /* Satellite first: the recommendation should not be the second thing read. */
-  const imagery = sources
-    .filter(s => s.id === 'relief' || s.id === 'satellite')
-    .sort((a, b) => (a.id === 'satellite' ? -1 : b.id === 'satellite' ? 1 : 0))
-
   /**
    * One country, as the entry a list would have made of it.
    *
@@ -280,90 +268,28 @@ export function StudioTravelPanel({
    * The name is editable afterwards, so numbering them "1. Germany",
    * "2. Netherlands" is typing rather than a feature.
    */
-  const countryEl = (code: string): BookElement => ({
-    ...base, id: uid('co'), kind: 'countries',
-    frame: centre(page.pageWidth * 0.34, 34),
-    codes: [code], names: [countryName(code)],
-    layout: 'list', showOutline: true, showFlag: false, showName: true, align: 'center',
-  } as BookElement)
+  const countryEl = (code: string): BookElement =>
+    bookTravelCountries(travel, { id: uid('co'), frame: at(bookTravelSize('countries', page)), codes: [code] })
 
+  /**
+   * A map as the engine's `add` places it, in the style the card offers.
+   *
+   * The scope is the journey or one trip. A trip map carries no recorded way:
+   * the trail is the journey's, and a map fitted to it would frame the whole
+   * journey around one trip and lose the bow its legs are drawn with.
+   */
   const mapEl = (
     style: 'minimal' | 'outline' | 'dark' | 'paper',
-    source: 'vector' | 'tiles' | 'static' = 'vector',
-    url = '',
-    attribution = '',
-    clip: 'rect' | 'country' = 'rect',
-    /** Null is the whole journey; a trip id is a map of that trip alone. */
-    tripId: number | null = null,
-  ): BookElement => {
-    const route = routeFor(stats, tripId)
-    return {
-    ...base, id: uid('mp'), kind: 'map',
-    frame: centre(mapSide, mapSide * 0.78),
-    style, source, tileUrl: url, attribution, zoom: null, clip, tripId,
-    /*
-     * White over a photograph, ink on paper. The accent IS the line, so this is
-     * how a satellite map arrives drawn the way the reference draws it, while
-     * the colour stays something the user can change afterwards.
-     */
-    accent: source === 'tiles' || source === 'static' ? '#ffffff' : base.accent,
-    showLand: true, showRoute: true, showPins: true, showLabels: false,
-    /*
-     * A map placed today gets the drawn treatment; the contract defaults to the
-     * plain line so that every book made before this existed opens unchanged.
-     * Set explicitly rather than inherited because this object is cast, not
-     * parsed.
-     */
-    routeStyle: 'drawn', routeArc: 'bow', routeDash: 'arcs', pinStyle: 'photo',
-    countries: tripId == null
-      ? stats.countries.map(c => c.code)
-      : [...new Set(route.map(p => p.country).filter((c): c is string => !!c))],
-    points: route.map(p => ({ lat: p.lat, lng: p.lng, label: p.label, photoId: p.photoId ?? null })),
-    /*
-     * Frozen into the element, like every other travel figure: a page that
-     * fetches its own route at print time is a page that changes when someone
-     * edits the trip, and prints empty when the export runs signed out.
-     */
-    path,
-    // Empty until somebody asks for the roads; see roadRoute.ts.
-    roads: [],
-    fitPadding: 0.5,
-    fitToCountries: true,
-    } as BookElement
-  }
+    scope: BookMapScope = 'journey',
+    source: 'vector' | 'relief' | 'satellite' = 'vector',
+  ): BookElement => ({
+    ...bookTravelMap(travel, stats, { id: uid('mp'), frame: at(bookTravelSize('map', page)), scope, source }),
+    style,
+  })
 
-  /*
-   * A mark is placed at the size that suits what it holds.
-   *
-   * One size for all six put a flag and a country name into a box built for a
-   * line of coordinates, which is how a small mark ends up floating inside a
-   * large selection rectangle. Fractions of the page, so the proportions hold
-   * on any format.
-   */
-  const MARK_SIZE: Record<string, [number, number]> = {
-    flag: [0.25, 0.062],
-    date: [0.16, 0.14],
-    day: [0.17, 0.062],
-    coords: [0.36, 0.05],
-    country: [0.22, 0.078],
-    distance: [0.26, 0.066],
-  }
-
-  const badgeEl = (
-    variant: 'flag' | 'date' | 'day' | 'coords' | 'country' | 'distance',
-    text: string,
-    sub: string,
-    code: string | null,
-    style: 'plain' | 'chip' | 'outline' | 'stacked' = 'plain',
-  ): BookElement => {
-    const [fw, fh] = MARK_SIZE[variant] ?? [0.24, 0.08]
-    return {
-      ...base, id: uid('bd'), kind: 'badge', autoColor: true,
-      showIcon: true, showLabel: true, autoIconColor: true, iconColor: '#111111',
-      frame: centre(page.pageWidth * fw, page.pageHeight * fh),
-      variant, text, sub, code, style,
-    } as BookElement
-  }
+  /** A mark at the size that suits what it holds, which is the engine's size for its variant. */
+  const badgeEl = (variant: BookBadgeVariant, value: BadgeValue): BookElement =>
+    bookTravelBadge({ id: uid('bd'), frame: at(bookTravelSize('badge', page, { variant })), variant, value })
 
   /**
    * One figure on its own.
@@ -373,11 +299,8 @@ export function StudioTravelPanel({
    * and offering only the composition meant anyone wanting "14 DAYS" beside a
    * picture had to place all four and delete three.
    */
-  const singleEl = (metric: BookMetric): BookElement => ({
-    ...base, id: uid('st'), kind: 'stats',
-    frame: centre(page.pageWidth * 0.22, page.pageHeight * 0.13),
-    metrics: [metric], layout: 'grid', showIcons: true, units: 'metric', values,
-  } as BookElement)
+  const singleEl = (metric: BookMetric): BookElement =>
+    bookTravelStats(stats, { id: uid('st'), frame: at(bookTravelSize('stats', page)), metrics: [metric] })
 
   /** Place a copy — the previewed element keeps its own id for React. */
   const place = (el: BookElement) => {
@@ -411,37 +334,20 @@ export function StudioTravelPanel({
     }
   }
 
-  const first = stats.points[0] ?? null
-  const firstCountry = stats.countries[0] ?? null
-  const startDay = stats.start ? new Date(`${stats.start}T00:00:00`) : null
-
-  const marks: { el: BookElement; label: string }[] = []
-  if (startDay) {
-    marks.push({
-      el: badgeEl('date', String(startDay.getDate()),
-        startDay.toLocaleDateString(locale, { month: 'long' }).toUpperCase(), null, 'stacked'),
-      label: t('journey.studio.dateMark'),
-    })
-  }
-  marks.push({
-    el: badgeEl('day', `${t('journey.studio.dayWord')} 1`, '', null, 'chip'),
-    label: t('journey.studio.dayMark'),
-  })
-  if (first) {
-    marks.push({
-      el: badgeEl('coords', formatBookCoords(first.lat, first.lng), first.label, null),
-      label: t('journey.studio.coordsMark'),
-    })
-  }
-  if (firstCountry) {
-    marks.push({
-      el: badgeEl('flag', '', countryName(firstCountry.code), firstCountry.code),
-      label: t('journey.studio.flagMark'),
-    })
-  }
-  marks.push({
-    el: badgeEl('distance', formatDistance(stats.distance, locale), t('journey.studio.metric.distance'), null, 'outline'),
-    label: t('journey.studio.distanceMark'),
+  /*
+   * The marks of the journey, with the words the engine resolves for each. A
+   * mark the journey cannot fill (no start date, no stop, no country) is not
+   * offered.
+   */
+  const marks: { el: BookElement; label: string }[] = ([
+    ['date', t('journey.studio.dateMark')],
+    ['day', t('journey.studio.dayMark')],
+    ['coords', t('journey.studio.coordsMark')],
+    ['flag', t('journey.studio.flagMark')],
+    ['distance', t('journey.studio.distanceMark')],
+  ] as const).flatMap(([variant, label]) => {
+    const value = bookBadgeValue(travel, variant, null)
+    return value ? [{ el: badgeEl(variant, value), label }] : []
   })
 
   return (
@@ -562,7 +468,7 @@ export function StudioTravelPanel({
                   a scale that suits a continent, and satellite is the ground
                   itself, which is what a page about one country wants.
                 */}
-                {imagery.map(src => (
+                {IMAGERY.map(src => (
                   <Card
                     key={src.id}
                     /*
@@ -578,10 +484,10 @@ export function StudioTravelPanel({
                     label={t(src.labelKey)}
                     recommended={src.id === 'satellite'}
                     title={src.id === 'satellite' ? t('journey.studio.recommended') : undefined}
-                    onClick={() => place(mapEl('minimal', 'tiles', src.url, src.attribution))}
+                    onClick={() => place(mapEl('minimal', 'journey', src.id))}
                   >
                     <TravelPreview
-                      el={mapEl('minimal', 'tiles', src.url, src.attribution)}
+                      el={mapEl('minimal', 'journey', src.id)}
                       minHeight={62}
                       maxHeight={80}
                     />
@@ -606,7 +512,7 @@ export function StudioTravelPanel({
                   <div className="st-section-label">{t('journey.studio.mapPerTrip')}</div>
                   <div className="st-travel-grid">
                     {tripsWithRoute.map(trip => {
-                      const el = mapEl('minimal', 'vector', '', '', 'rect', trip.id)
+                      const el = mapEl('minimal', { tripId: trip.id })
                       return (
                         <Card
                           key={trip.id}
@@ -658,7 +564,7 @@ export function StudioTravelPanel({
               */}
               <div className="st-travel-grid" style={{ marginTop: 6 }}>
                 {stats.countries.slice(0, 12).map(c => {
-                  const el = badgeEl('country', countryName(c.code), '', c.code)
+                  const el = badgeEl('country', { text: countryName(c.code), sub: '', code: c.code })
                   return (
                     <Card key={`mark-${c.code}`} label={countryName(c.code)} onClick={() => place(el)}>
                       <TravelPreview el={el} minHeight={30} maxHeight={44} />
diff --git a/client/tests/unit/studio/inspector.test.tsx b/client/tests/unit/studio/inspector.test.tsx
index f56f0ac1f..4c943d66d 100644
--- a/client/tests/unit/studio/inspector.test.tsx
+++ b/client/tests/unit/studio/inspector.test.tsx
@@ -69,6 +69,7 @@ function draw(over: { page?: BookPageSetup; setPageNumbers?: (p: Partial<BookPag
       spreadIndex={0}
       page={over.page ?? setup()}
       stats={null}
+      path={[]}
       source={source}
       setPageNumbers={over.setPageNumbers ?? (() => {})}
       t={(k: string) => k}
diff --git a/client/tests/unit/studio/inspectorTravel.test.tsx b/client/tests/unit/studio/inspectorTravel.test.tsx
index 9fc860863..ac5232291 100644
--- a/client/tests/unit/studio/inspectorTravel.test.tsx
+++ b/client/tests/unit/studio/inspectorTravel.test.tsx
@@ -69,7 +69,7 @@ const listEl = (over: Record<string, unknown> = {}): BookElement => bookListElem
   ...over,
 }) as BookElement
 
-function show(el: BookElement, live: JourneyStats | null = null) {
+function show(el: BookElement, live: JourneyStats | null = null, trail: [number, number][][] = []) {
   useStudioStore.getState().load({
     version: 1, title: 'T', page,
     spreads: [{ id: 'sp1', role: 'inner', background: null, elements: [el], parked: [], entryId: null }],
@@ -80,6 +80,7 @@ function show(el: BookElement, live: JourneyStats | null = null) {
       spreadIndex={0}
       page={page}
       stats={live}
+      path={trail}
       source={{ entries: [], photos: [], photoEntries: {} }}
       setPageNumbers={() => {}}
       t={k => k}
@@ -238,6 +239,60 @@ describe('the route map', () => {
     press('journey.studio.showLabels')
     expect(saved().showLabels).toBe(true)
   })
+
+  /** A journey of two trips, so the map offers its scope at all. */
+  const twoTrips: JourneyStats = journeyStatsSchema.parse({
+    ...stats,
+    countries: [
+      { code: 'IS', name: 'Iceland', places: 2, firstVisit: '2026-01-01' },
+      { code: 'PT', name: 'Portugal', places: 1, firstVisit: '2026-03-01' },
+    ],
+    points: [
+      { lat: 64.14, lng: -21.94, label: 'Reykjavik', date: '2026-01-01', country: 'IS', tripId: 11 },
+      { lat: 65.68, lng: -18.09, label: 'Akureyri', date: '2026-01-04', country: 'IS', tripId: 11 },
+      { lat: 38.72, lng: -9.14, label: 'Lisboa', date: '2026-03-01', country: 'PT', tripId: 22 },
+    ],
+    trips: [
+      { id: 11, title: 'North', start: '2026-01-01', end: '2026-01-05', points: 2 },
+      { id: 22, title: 'South', start: '2026-03-01', end: '2026-03-02', points: 1 },
+    ],
+  })
+  /** The journey's recorded way, as the Studio hands it to the inspector. */
+  const trail: [number, number][][] = [[[64.14, -21.94], [38.72, -9.14]]]
+  /** Roads loaded for the whole journey's legs: entry i runs from stop i to stop i + 1. */
+  const roads = [[[64.14, -21.94], [64.0, -21.5], [65.68, -18.09]], null]
+
+  /*
+   * The scope switch re-cuts the map as the book engine refreshes one, so a
+   * map turned into a trip map here holds what the panel or the assistant
+   * would have placed for that trip: its own stops, its own countries, no
+   * recorded way, since the trail is the whole journey's, and no roads, since
+   * those belonged to the old legs. Switched back, the map takes the trail
+   * from the journey again, so the round trip loses nothing.
+   */
+  it('STTRV-007: re-cuts a map to one trip as the engine does, and back to the journey with its trail', () => {
+    show(mapEl({ countries: ['IS', 'PT'], path: trail, roads }), twoTrips, trail)
+
+    pick('North')
+    expect(saved()).toMatchObject({
+      tripId: 11, countries: ['IS'], path: [], roads: [], stale: false,
+      points: [{ label: 'Reykjavik' }, { label: 'Akureyri' }],
+    })
+
+    pick('journey.studio.mapWholeJourney')
+    expect(saved()).toMatchObject({ tripId: null, countries: ['IS', 'PT'], roads: [], stale: false })
+    expect(saved().path).toEqual(trail)
+    expect(saved().points).toHaveLength(3)
+  })
+
+  it('STTRV-008: picking the scope a map already has writes nothing, so its loaded roads stay', () => {
+    show(mapEl({ countries: ['IS', 'PT'], path: trail, roads }), twoTrips, trail)
+
+    pick('journey.studio.mapWholeJourney')
+    expect(saved()).toMatchObject({ tripId: null, path: trail, roads })
+    // Still the one stop it was made with: a re-cut would have brought all three.
+    expect(saved().points).toHaveLength(1)
+  })
 })
 
 describe('the figures', () => {
diff --git a/client/tests/unit/studio/travelPanelEngine.test.tsx b/client/tests/unit/studio/travelPanelEngine.test.tsx
new file mode 100644
index 000000000..aabd293ed
--- /dev/null
+++ b/client/tests/unit/studio/travelPanelEngine.test.tsx
@@ -0,0 +1,240 @@
+// STTRV-001 to STTRV-006: the Travel panel places what the book engine's factories build, so a figure, a map, a
+// country or a mark added by hand is the element the assistant's `add` adds. Only the frame is the panel's own:
+// centred across the spread rather than on the right-hand page.
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { BookDocument, BookElement, BookFrame, BookTravelContext, JourneyStats } from '@trek/shared';
+import {
+  BOOK_SATELLITE_TILES,
+  bookBadgeValue,
+  bookPageSetupSchema,
+  bookTravelBadge,
+  bookTravelCountries,
+  bookTravelMap,
+  bookTravelSize,
+  bookTravelStats,
+} from '@trek/shared';
+
+import { StudioTravelPanel } from '../../../src/components/Studio/StudioTravelPanel';
+import { useStudioStore } from '../../../src/store/studioStore';
+import { fireEvent, render, screen } from '../../helpers/render';
+
+// A placed map asks for its roads. The answer never comes, so every map stays as it was placed.
+vi.mock('../../../src/components/Map/RouteCalculator', () => ({
+  calculateRouteWithLegs: vi.fn(() => new Promise(() => {})),
+}));
+
+const ICELAND = 11;
+const PORTUGAL = 22;
+
+const page = bookPageSetupSchema.parse({ preset: 'square-210' });
+
+/** A stop on the route, read from a trip's place rather than from an entry. */
+const stop = (
+  label: string,
+  [lat, lng]: [number, number],
+  country: string,
+  tripId: number,
+  date: string
+): JourneyStats['points'][number] => ({
+  lat,
+  lng,
+  label,
+  date,
+  country,
+  tripId,
+  photoId: null,
+  entryId: null,
+});
+
+const stats: JourneyStats = {
+  journeyId: 5,
+  distance: 4_000_000,
+  days: 21,
+  steps: 6,
+  photos: 40,
+  places: 12,
+  furthest: 3_000_000,
+  countries: [
+    { code: 'IS', name: 'Iceland', places: 2, firstVisit: '2026-06-02' },
+    { code: 'PT', name: 'Portugal', places: 2, firstVisit: '2026-09-04' },
+  ],
+  points: [
+    { ...stop('Reykjavík', [64.14, -21.94], 'IS', ICELAND, '2026-06-02'), photoId: 3 },
+    stop('Akureyri', [65.68, -18.12], 'IS', ICELAND, '2026-06-06'),
+    stop('Lisboa', [38.72, -9.14], 'PT', PORTUGAL, '2026-09-04'),
+    stop('Porto', [41.15, -8.61], 'PT', PORTUGAL, '2026-09-08'),
+  ],
+  // Named apart from the countries, so a trip card and a country card never share a name.
+  trips: [
+    { id: ICELAND, title: 'June', start: '2026-06-02', end: '2026-06-14', points: 2 },
+    { id: PORTUGAL, title: 'September', start: '2026-09-04', end: '2026-09-12', points: 2 },
+  ],
+  excluded: [],
+  start: '2026-06-02',
+  end: '2026-09-12',
+};
+
+/** The recorded way, as the hook hands it to the panel. */
+const PATH: [number, number][][] = [
+  [
+    [64.14, -21.94],
+    [65.68, -18.12],
+  ],
+  [
+    [38.72, -9.14],
+    [41.15, -8.61],
+  ],
+];
+
+/** What the panel hands the factories: `t` answers with the key in this suite. */
+const travel: BookTravelContext = {
+  locale: 'en',
+  stats,
+  path: PATH,
+  entries: [],
+  labels: {
+    day: 'journey.studio.dayWord',
+    stations: 'journey.studio.stations',
+    summary: 'journey.studio.summary',
+    countries: 'journey.studio.countries',
+    distance: 'journey.studio.metric.distance',
+    pros: 'journey.editor.pros',
+    cons: 'journey.editor.cons',
+  },
+};
+
+/** A size centred across the open spread, the panel's own placement. */
+const spreadCentre = (size: { w: number; h: number }): BookFrame => ({
+  x: (page.pageWidth * 2 - size.w) / 2,
+  y: (page.pageHeight - size.h) / 2,
+  w: size.w,
+  h: size.h,
+});
+
+const ANY_FRAME: BookFrame = { x: 0, y: 0, w: 1, h: 1 };
+
+/** An element apart from what the panel decides itself: the id it mints and where the frame goes. */
+const content = (el: BookElement) => ({ ...el, id: '', frame: ANY_FRAME });
+
+function open(journey: JourneyStats = stats) {
+  return render(
+    <StudioTravelPanel
+      page={page}
+      stats={journey}
+      path={PATH}
+      t={(k) => k}
+      locale="en"
+      canEdit={false}
+      onToggleStop={async () => true}
+    />
+  );
+}
+
+const card = (name: string) => screen.getByRole('button', { name });
+
+/** The element the last click put on the page. */
+function placed(): BookElement {
+  const elements = useStudioStore.getState().doc?.spreads[0]?.elements ?? [];
+  const last = elements[elements.length - 1];
+  if (!last) throw new Error('nothing was placed');
+  return last;
+}
+
+beforeEach(() => {
+  useStudioStore.getState().load({
+    version: 1,
+    title: 'T',
+    page,
+    spreads: [{ id: 's1', role: 'inner', background: null, elements: [], parked: [], entryId: null }],
+  } as unknown as BookDocument);
+});
+
+describe('the Travel panel builds through the book engine', () => {
+  it('STTRV-001: places a single figure as the engine builds it, centred across the spread', () => {
+    open();
+
+    fireEvent.click(card('journey.studio.metric.days'));
+
+    const size = bookTravelSize('stats', page);
+    expect(content(placed())).toEqual(
+      content(bookTravelStats(stats, { id: 'st', frame: ANY_FRAME, metrics: ['days'] }))
+    );
+    expect(placed().frame).toEqual(spreadCentre(size));
+  });
+
+  it('STTRV-002: places a journey map with the recorded way, in the style of its card', () => {
+    open();
+
+    fireEvent.click(card('journey.studio.mapStyle.dark'));
+
+    const engine = bookTravelMap(travel, stats, { id: 'mp', frame: ANY_FRAME, scope: 'journey' });
+    expect(content(placed())).toEqual(content({ ...engine, style: 'dark' as const }));
+    expect(placed()).toMatchObject({ kind: 'map', style: 'dark', source: 'vector', tripId: null, path: PATH });
+    expect(placed().frame).toEqual(spreadCentre(bookTravelSize('map', page)));
+  });
+
+  it('STTRV-003: places a map per trip of that trip alone, with its own countries and no journey trail', () => {
+    open();
+
+    fireEvent.click(card('June'));
+
+    const engine = bookTravelMap(travel, stats, { id: 'mp', frame: ANY_FRAME, scope: { tripId: ICELAND } });
+    expect(content(placed())).toEqual(content(engine));
+    expect(placed()).toMatchObject({
+      tripId: ICELAND,
+      countries: ['IS'],
+      path: [],
+      points: [{ label: 'Reykjavík', photoId: 3 }, { label: 'Akureyri' }],
+    });
+  });
+
+  it('STTRV-004: places the satellite map the engine places, with its tiles, its credit and a white line', () => {
+    open();
+
+    fireEvent.click(card('journey.studio.mapSourceSatellite'));
+
+    const engine = bookTravelMap(travel, stats, { id: 'mp', frame: ANY_FRAME, scope: 'journey', source: 'satellite' });
+    expect(content(placed())).toEqual(content(engine));
+    expect(placed()).toMatchObject({ source: 'tiles', tileUrl: BOOK_SATELLITE_TILES, accent: '#ffffff' });
+  });
+
+  it('STTRV-005: places each mark with the words, size and style the engine gives it', () => {
+    open();
+
+    const marks = [
+      ['journey.studio.dateMark', 'date'],
+      ['journey.studio.dayMark', 'day'],
+      ['journey.studio.coordsMark', 'coords'],
+      ['journey.studio.flagMark', 'flag'],
+      ['journey.studio.distanceMark', 'distance'],
+    ] as const;
+    for (const [name, variant] of marks) {
+      fireEvent.click(card(name));
+      const value = bookBadgeValue(travel, variant, null);
+      if (!value) throw new Error(`the engine has no ${variant} mark for this journey`);
+      expect(content(placed())).toEqual(content(bookTravelBadge({ id: 'bd', frame: ANY_FRAME, variant, value })));
+      expect(placed().frame).toEqual(spreadCentre(bookTravelSize('badge', page, { variant })));
+    }
+    // The last one, read back as words: the distance in an outline.
+    expect(placed()).toMatchObject({ variant: 'distance', text: '4,000 km', style: 'outline' });
+  });
+
+  it('STTRV-006: offers no date mark without a start, and places a country and its mark by the name', () => {
+    open({ ...stats, start: null });
+
+    expect(screen.queryByRole('button', { name: 'journey.studio.dateMark' })).toBeNull();
+    fireEvent.click(card('journey.studio.dayMark'));
+    expect(placed()).toMatchObject({ variant: 'day', text: 'journey.studio.dayWord 1', style: 'chip' });
+
+    const [outline, mark] = screen.getAllByRole('button', { name: 'Iceland' });
+    fireEvent.click(outline);
+    expect(content(placed())).toEqual(
+      content(bookTravelCountries(travel, { id: 'co', frame: ANY_FRAME, codes: ['IS'] }))
+    );
+    expect(placed()).toMatchObject({ codes: ['IS'], names: ['Iceland'] });
+
+    fireEvent.click(mark);
+    expect(placed()).toMatchObject({ kind: 'badge', variant: 'country', text: 'Iceland', sub: '', code: 'IS' });
+  });
+});