chore: bump version to 5.0.0 [skip ci]

refactor(files): the provider marks and the map that keys them live apart
The marks module exports components only, so fast refresh keeps it whole and react-refresh no longer counts it; the map by provider id moves to documentProviderIconMap.ts, which every caller now imports.
2026-11-05 04:04:07 +00:00 · 2026-10-25 11:07:55 +00:00 · 2026-10-25 11:24:36 +01:00 · 2026-10-25 11:09:41 +01:00 · 2026-10-25 11:03:03 +01:00 · 2026-10-25 10:51:57 +01:00
523 changed files with 10206 additions and 2606 deletions
@@ -22,7 +22,6 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 COPY shared/package.json ./shared/
 COPY client/package.json ./client/
-COPY client/scripts/patch-maplibre.mjs ./client/scripts/
 RUN npm ci --workspace=client
 COPY --from=shared-builder /app/shared/dist ./shared/dist
 COPY client/ ./client/
@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 4.3.4
+version: 5.0.0
 description: Minimal Helm chart for TREK app
-appVersion: "4.3.4"
+appVersion: "5.0.0"
@@ -1,6 +1,6 @@
 {
  "name": "@trek/client",
-  "version": "4.3.4",
+  "version": "5.0.0",
  "engines": {
    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
  },
@@ -8,7 +8,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "prebuild": "node scripts/patch-maplibre.mjs && node scripts/generate-icons.mjs",
+    "prebuild": "node scripts/generate-icons.mjs",
    "build": "vite build",
    "build:analyze": "vite build --mode analyze",
    "preview": "vite preview",
@@ -41,9 +41,7 @@
    "shots:promote": "node e2e/screenshots/promote.mjs",
    "e2e:report": "playwright show-report",
    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
-    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\"",
-    "postinstall": "node scripts/patch-maplibre.mjs",
-    "predev": "node scripts/patch-maplibre.mjs"
+    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
  },
  "dependencies": {
    "@assistant-ui/react": "0.15.25",
@@ -94,7 +92,7 @@
    "leaflet": "^1.9.4",
    "lucide-react": "^0.577.0",
    "mapbox-gl": "^3.31.0",
-    "maplibre-gl": "5.24.0",
+    "maplibre-gl": "6.15.0",
    "modern-screenshot": "4.7.0",
    "plyr": "^3.8.4",
    "react": "^19.3.0",
@@ -1,6 +1,6 @@
 {
  "src": {
-    "@typescript-eslint/no-non-null-assertion": 384,
+    "@typescript-eslint/no-non-null-assertion": 382,
    "@typescript-eslint/no-misused-promises": 849,
    "no-console": 88,
    "complexity": 221,
@@ -10,7 +10,7 @@
    "trek/store-without-selector": 67,
    "react-hooks/refs": 555,
    "react-hooks/set-state-in-effect": 194,
-    "@typescript-eslint/no-floating-promises": 165,
+    "@typescript-eslint/no-floating-promises": 164,
    "react-hooks/exhaustive-deps": 116,
    "@typescript-eslint/no-unused-vars": 124,
    "react-hooks/immutability": 28,
@@ -20,7 +20,7 @@
    "no-useless-assignment": 7,
    "no-empty": 19,
    "trek/no-window-globals": 41,
-    "react-refresh/only-export-components": 45,
+    "react-refresh/only-export-components": 44,
    "unused-disable-directive": 6,
    "max-depth": 21,
    "react-hooks/void-use-memo": 1,
@@ -35,7 +35,7 @@
  },
  "tests": {
    "@typescript-eslint/no-explicit-any": 490,
-    "@typescript-eslint/no-non-null-assertion": 1929,
+    "@typescript-eslint/no-non-null-assertion": 1927,
    "@typescript-eslint/no-misused-promises": 22,
    "@typescript-eslint/no-unused-vars": 51,
    "@typescript-eslint/no-floating-promises": 33,
@@ -65,7 +65,7 @@
    },
    {
      "feature": "AI assistant chat",
-      "hooks": ["src/components/Assistant/useAssistantThread.ts"],
+      "hooks": ["src/components/Assistant/useAssistantThread.ts", "src/components/Assistant/useAssistantStatus.ts"],
      "desktop": ["src/components/Assistant/AssistantWindow.tsx"],
      "mobile": ["src/mobile/screens/trip/assistant/MAssistantScreen.tsx"]
    },
@@ -661,9 +661,24 @@
      "desktop": ["src/components/Roadtrip/RoadtripStayModal.tsx"],
      "mobile": ["src/mobile/screens/trip/roadtrip/MRtStaySheet.tsx"]
    },
+    {
+      "feature": "Settings / Demo account locks",
+      "hooks": ["src/components/Demo/useDemoLock.ts"],
+      "desktop": [
+        "src/components/Settings/AccountDemoLock.tsx",
+        "src/components/Settings/DisplaySettingsTab.tsx",
+        "src/components/Settings/IntegrationsTab.tsx",
+        "src/components/Settings/ai/AiConnectionSection.tsx"
+      ],
+      "mobile": [
+        "src/mobile/screens/settings/MAiConnectionSection.tsx",
+        "src/mobile/screens/settings/MSettingsGeneral.tsx",
+        "src/mobile/screens/settings/MSettingsMcp.tsx"
+      ]
+    },
    {
      "feature": "Settings / Account",
-      "hooks": ["src/components/Settings/useAccountSettings.ts"],
+      "hooks": ["src/components/Settings/AccountDemoLock.tsx", "src/components/Settings/useAccountSettings.ts"],
      "desktop": ["src/components/Settings/AccountTab.tsx"],
      "mobile": ["src/mobile/screens/settings/MSettingsAccount.tsx"]
    },
@@ -55,7 +55,6 @@
  "scripts/check-gl-split.mjs",
  "scripts/check-page-pattern.mjs",
  "scripts/generate-icons.mjs",
-  "scripts/patch-maplibre.mjs",
  "src/App.test.tsx",
  "src/App.tsx",
  "src/App.versionHandover.test.tsx",
@@ -409,7 +408,6 @@
  "src/components/Journey/usePhotoZoom.ts",
  "src/components/Layout/BottomNav.test.tsx",
  "src/components/Layout/BottomNav.tsx",
-  "src/components/Layout/DemoBanner.tsx",
  "src/components/Layout/InAppNotificationBell.test.tsx",
  "src/components/Layout/InAppNotificationBell.tsx",
  "src/components/Layout/MobileTopBar.test.tsx",
@@ -1,34 +0,0 @@
-import { readFileSync, writeFileSync } from 'node:fs'
-import { createRequire } from 'node:module'
-import { dirname, join } from 'node:path'
-
-const require = createRequire(import.meta.url)
-const packagePath = require.resolve('maplibre-gl/package.json')
-const { version } = JSON.parse(readFileSync(packagePath, 'utf8'))
-
-if (version !== '5.24.0') throw new Error('Recheck the MapLibre sanitizer backport before changing its version')
-
-// Backport maplibre-gl-js#8189 without removing WebGL1 support in version 6.
-const loops = [
-  ['of elem.attributes)', 'of Array.from(elem.attributes))'],
-  ['of e.attributes)', 'of Array.from(e.attributes))'],
-]
-
-for (const filename of [
-  'src/util/dom.ts',
-  'dist/maplibre-gl.js',
-  'dist/maplibre-gl-dev.js',
-  'dist/maplibre-gl-csp.js',
-  'dist/maplibre-gl-csp-dev.js',
-]) {
-  const target = join(dirname(packagePath), filename)
-  const code = readFileSync(target, 'utf8')
-  const loop = loops.find(([before, after]) => code.includes(before) || code.includes(after))
-  if (!loop) throw new Error(`MapLibre sanitizer loop not found in ${filename}`)
-  const [before, after] = loop
-  if (code.split(before).length === 1 && code.split(after).length === 2) continue
-  if (code.split(before).length !== 2 || code.includes(after)) {
-    throw new Error(`Unexpected MapLibre sanitizer in ${filename}`)
-  }
-  writeFileSync(target, code.replace(before, after))
-}
@@ -59,8 +59,6 @@
  "components/Studio/StudioSavedLayouts.tsx": 1,
  "components/Studio/TravelElements.tsx": 4,
  "components/Studio/TravelPreview.tsx": 1,
-  "components/SystemNotices/ReleaseNoticeVisuals.tsx": 3,
-  "components/SystemNotices/releaseNotice.css": 2,
  "components/Vacay/VacayCalendar.tsx": 3,
  "components/Vacay/VacayMonthCard.tsx": 7,
  "components/Vacay/VacaySettings.tsx": 1,
@@ -1,4 +1,5 @@
 {
+  "components/Collections/CollectionMap.tsx": 1,
  "components/Studio/LineHandles.tsx": 1,
  "components/Studio/StudioSelectionChrome.tsx": 2,
  "components/Studio/inspector/FocalPad.tsx": 1,
@@ -5,8 +5,8 @@
  "src/components/Admin/AdminPluginsPanel.tsx": 1667,
  "src/components/Budget/CostsPanel.test.tsx": 2736,
  "src/components/Budget/CostsPanel.tsx": 1798,
-  "src/components/Map/MapView.tsx": 1399,
-  "src/components/Map/MapViewGL.test.tsx": 2920,
+  "src/components/Map/MapView.tsx": 1385,
+  "src/components/Map/MapViewGL.test.tsx": 2919,
  "src/components/Map/MapViewGL.tsx": 2290,
  "src/components/Map/RouteCalculator.ts": 1076,
  "src/components/PDF/TripPDF.tsx": 1082,
@@ -51,7 +51,6 @@
  "components/Journey/journeyMapPopup.ts": 17,
  "components/Journey/moodConfig.ts": 5,
  "components/Layout/BottomNav.tsx": 3,
-  "components/Layout/DemoBanner.tsx": 25,
  "components/Layout/InAppNotificationBell.tsx": 3,
  "components/Layout/MobileTopBar.tsx": 51,
  "components/Layout/Navbar.tsx": 21,
@@ -106,7 +105,6 @@
  "components/Studio/TravelElements.tsx": 5,
  "components/Studio/printSheets.ts": 5,
  "components/Studio/sidebar/contentDrops.ts": 2,
-  "components/SystemNotices/ReleaseNoticeVisuals.tsx": 4,
  "components/SystemNotices/SystemNoticeBanner.tsx": 28,
  "components/SystemNotices/SystemNoticeModal.tsx": 107,
  "components/Todo/TodoListPanel.tsx": 6,
@@ -207,7 +205,7 @@
  "mobile/screens/settings/MSetPickerSheet.tsx": 2,
  "mobile/screens/settings/MSettings.tsx": 2,
  "mobile/screens/settings/MSettingsAbout.tsx": 5,
-  "mobile/screens/settings/MSettingsAccount.tsx": 21,
+  "mobile/screens/settings/MSettingsAccount.tsx": 20,
  "mobile/screens/settings/MSettingsAppearance.tsx": 12,
  "mobile/screens/settings/MSettingsMap.tsx": 5,
  "mobile/screens/settings/MSettingsMcp.tsx": 30,
@@ -5,7 +5,7 @@ import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, I
 import EmptyState from '../shared/EmptyState'
 import DawarichIcon from '../shared/DawarichIcon'
 import AirTrailIcon from '../shared/AirTrailIcon'
-import { DOCUMENT_PROVIDER_ICONS } from '../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../shared/documentProviderIconMap'
 import AddonTile from './AddonTile'
 import AddonSubRow from './AddonSubRow'
 import { Tooltip } from '../shared/Tooltip'
@@ -19,6 +19,7 @@ export default function AddonSubRow({
  icon,
  title,
  description,
+  badge,
  enabled,
  onToggle,
 }: {
@@ -26,6 +27,8 @@ export default function AddonSubRow({
  icon?: ReactNode
  title: string
  description?: string
+  /** A small pill after the title, e.g. the beta mark on the assistant. */
+  badge?: ReactNode
  enabled: boolean
  onToggle: () => void
 }) {
@@ -34,8 +37,11 @@ export default function AddonSubRow({
      {icon
        ? <span className={`grid h-6 w-6 flex-none place-items-center ${enabled ? 'text-content-muted' : 'text-content-faint'}`}>{icon}</span>
        : <span className="w-6 flex-none" aria-hidden />}
-      <span className={`min-w-0 flex-1 truncate font-medium ${enabled ? 'text-content' : 'text-content-muted'}`} style={fs(12.5, 'body')} title={description}>
-        {title}
+      <span className="flex min-w-0 flex-1 items-center gap-2">
+        <span className={`min-w-0 truncate font-medium ${enabled ? 'text-content' : 'text-content-muted'}`} style={fs(12.5, 'body')} title={description}>
+          {title}
+        </span>
+        {badge}
      </span>
      <ToggleSwitch on={enabled} onToggle={onToggle} label={title} />
    </li>
@@ -66,6 +66,7 @@ export default function AiAddonTile({
                icon={<Icon size={14} />}
                title={label.name}
                description={label.description}
+                badge={addon.id === 'ai_assistant' ? <BetaBadge label={t('assistant.setup.beta')} /> : undefined}
                enabled={addon.enabled}
                onToggle={() => onToggle(addon)}
              />
@@ -93,3 +94,16 @@ export default function AiAddonTile({
    </article>
  );
 }
+
+/** The assistant is still young; its switch says so with a small accent pill. */
+function BetaBadge({ label }: { label: string }): React.ReactElement {
+  return (
+    <span
+      className="inline-flex flex-none items-center gap-1 rounded-full bg-accent px-[7px] py-[2px] font-geist font-bold uppercase leading-none tracking-[.08em] text-accent-text shadow-sm"
+      style={fs(9)}
+    >
+      <Sparkles size={9} strokeWidth={2.6} aria-hidden />
+      {label}
+    </span>
+  );
+}
@@ -5,7 +5,9 @@ import { MASKED_SETTING_VALUE } from '@trek/shared';
 import { createElement, type ReactNode } from 'react';
 import { MemoryRouter } from 'react-router';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { seedStore } from '../../../../tests/helpers/store';
 import { TranslationProvider } from '../../../i18n/TranslationContext';
+import { useAddonStore } from '../../../store/addonStore';
 import { useAssistantStore } from '../../../store/assistantStore';

 const repo = vi.hoisted(() => ({
@@ -59,6 +61,8 @@ async function renderLoaded() {
 beforeEach(() => {
  vi.clearAllMocks();
  useAssistantStore.setState({ status: null });
+  // The settings show while the assistant is on, and only then is its status asked for.
+  seedStore(useAddonStore, { loaded: true, addons: [{ id: 'ai_assistant', enabled: true }] });
  repo.status.mockRejectedValue(new Error('not needed'));
  repo.adminSettings.mockResolvedValue(SETTINGS);
  repo.saveAdminSettings.mockImplementation(async (next: AiAdminSettings) => next);
@@ -17,6 +17,7 @@ import type { AssistantChatTrip } from './assistantViewContext';
 import type { EntityTarget } from './cards/cardTypes';
 import { chatPagePath, useAssistantHome, useRouteJournalChat } from './useAssistantHome';
 import { useAssistantHotkey } from './useAssistantHotkey';
+import { useAssistantStatus } from './useAssistantStatus';
 import { useAssistantThread } from './useAssistantThread';

 /**
@@ -202,15 +203,12 @@ export default function AssistantWindow({ trip, onOpen, onFocusDay, onRevealMap
  const available = useAssistantStore((s) => s.status?.available === true);
  const open = useAssistantStore((s) => s.window.open);
  const minimized = useAssistantStore((s) => s.window.minimized);
-  const loadStatus = useAssistantStore((s) => s.loadStatus);
  const toggle = useAssistantStore((s) => s.toggle);
  const [picked, setPicked] = useState<WindowTrip | null>(null);
  const [wasOpen, setWasOpen] = useState(open);
  const home = useAssistantHome(setPicked);

-  useEffect(() => {
-    void loadStatus();
-  }, [loadStatus]);
+  useAssistantStatus();
  useAssistantHotkey(available, toggle);

  // A trip picked outside the planner is only for this opening; the next one opens on the home chat again.
@@ -0,0 +1,77 @@
+/**
+ * FE-AI-STATUS-001 to FE-AI-STATUS-003
+ *
+ * The views of the assistant ask for its status through this hook: not while
+ * both addons that open /api/ai are off, where the server answers 404, and
+ * as soon as one comes on, which the addon list can say after the view
+ * mounted (the first load, an admin's switch). The assistant's own addon
+ * switching asks again while AI parsing keeps /api/ai open.
+ */
+import { act, renderHook, waitFor } from '@testing-library/react';
+import type { AiStatusResponse } from '@trek/shared';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { aiConnectionsRepo } from '../../repo/aiConnectionsRepo';
+import { useAddonStore } from '../../store/addonStore';
+import { useAssistantStore } from '../../store/assistantStore';
+import { useAssistantStatus } from './useAssistantStatus';
+
+const INITIAL = useAssistantStore.getState();
+const STATUS = { available: true, retention: { mode: 'days', days: 90 } } as AiStatusResponse;
+
+/** The addon list as it lands from the server, with these addons on. */
+const addonsOn = (...ids: string[]) =>
+  seedStore(useAddonStore, { loaded: true, addons: ids.map((id) => ({ id, enabled: true })) });
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+afterEach(() => {
+  useAssistantStore.setState(INITIAL, true);
+  vi.restoreAllMocks();
+});
+
+describe('useAssistantStatus', () => {
+  it('FE-AI-STATUS-001: asks nothing before the addon list or with both addons off, and asks once one comes on', async () => {
+    const status = vi.spyOn(aiConnectionsRepo, 'status').mockResolvedValue(STATUS);
+    renderHook(() => useAssistantStatus());
+    act(() => addonsOn('mcp'));
+    expect(status).not.toHaveBeenCalled();
+    expect(useAssistantStore.getState().status).toBeNull();
+
+    act(() => addonsOn('ai_assistant'));
+    await waitFor(() => expect(useAssistantStore.getState().status).toEqual(STATUS));
+    expect(status).toHaveBeenCalledTimes(1);
+
+    // The list read again with the assistant still on asks nothing more.
+    act(() => addonsOn('ai_assistant', 'mcp'));
+    expect(status).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-AI-STATUS-002: with AI parsing on it asks at once, and the last addon going off hides the assistant', async () => {
+    const status = vi.spyOn(aiConnectionsRepo, 'status').mockResolvedValue(STATUS);
+    addonsOn('llm_parsing');
+    renderHook(() => useAssistantStatus());
+    await waitFor(() => expect(useAssistantStore.getState().status).toEqual(STATUS));
+    expect(status).toHaveBeenCalledTimes(1);
+
+    act(() => addonsOn());
+    expect(useAssistantStore.getState().status).toBeNull();
+    expect(status).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-AI-STATUS-003: with AI parsing on, the assistant switched on or off asks again', async () => {
+    const status = vi.spyOn(aiConnectionsRepo, 'status').mockResolvedValue(STATUS);
+    addonsOn('llm_parsing');
+    renderHook(() => useAssistantStatus());
+    await waitFor(() => expect(status).toHaveBeenCalledTimes(1));
+
+    act(() => addonsOn('llm_parsing', 'ai_assistant'));
+    await waitFor(() => expect(status).toHaveBeenCalledTimes(2));
+
+    act(() => addonsOn('llm_parsing'));
+    await waitFor(() => expect(status).toHaveBeenCalledTimes(3));
+  });
+});
@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { useAddonStore } from '../../store/addonStore';
+import { aiRoutesOpen, useAssistantStore } from '../../store/assistantStore';
+
+/**
+ * Asks for the assistant's status when a view of it mounts, and again when
+ * either addon that opens /api/ai is switched: the addon list can land after
+ * the view, and an admin can switch either addon while it is open. The
+ * assistant's own addon counts on its own, since the status says it runs only
+ * while that one is on, even with AI parsing keeping /api/ai open. The store
+ * asks the server only while one is on (aiRoutesOpen).
+ */
+export function useAssistantStatus(): void {
+  const loadStatus = useAssistantStore((s) => s.loadStatus);
+  const routesOpen = useAddonStore(aiRoutesOpen);
+  const assistantOn = useAddonStore((s) => s.isEnabled('ai_assistant'));
+
+  useEffect(() => {
+    void loadStatus();
+  }, [routesOpen, assistantOn, loadStatus]);
+}
@@ -140,7 +140,17 @@ export function ChatBubble({
          >
            {reply.name}
          </div>
-          <div style={{ opacity: 0.8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {/* Wrapped and cut after two lines: a quote kept on one line set the bubble's width and pushed it out of the chat. */}
+          <div
+            style={{
+              opacity: 0.8,
+              overflow: 'hidden',
+              whiteSpace: 'normal',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+            }}
+          >
            {reply.text}
          </div>
        </div>
@@ -25,13 +25,25 @@ interface CollabLink {
  pinned: boolean | number
 }

+// The glyph holds the place until a favicon has really arrived: a host that never
+// answers, or answers with a blank pixel, left the chip with an empty square.
 function LinkIcon({ url }: { url: string }) {
-  const [failed, setFailed] = useState(false)
+  const [state, setState] = useState<'loading' | 'loaded' | 'failed'>('loading')
  let favicon = ''
  try { favicon = new URL('/favicon.ico', url).href } catch { /* not a parseable url, fall through to the glyph */ }
+  const loaded = state === 'loaded'
  return (
    <span className="collab-link-chip__icon" aria-hidden="true">
-      {!favicon || failed ? <Link2 size={13} /> : <img src={favicon} alt="" onError={() => setFailed(true)} />}
+      {!loaded && <Link2 size={13} />}
+      {favicon && state !== 'failed' && (
+        <img
+          src={favicon}
+          alt=""
+          hidden={!loaded}
+          onLoad={(e) => setState(e.currentTarget.naturalWidth > 2 ? 'loaded' : 'failed')}
+          onError={() => setState('failed')}
+        />
+      )}
      <span className="collab-link-chip__go"><ExternalLink size={13} /></span>
    </span>
  )
@@ -26,6 +26,8 @@ describe('the Collab pieces', () => {
    expect(quoted.parentElement?.getAttribute('style')).toContain('background: var(--bg-card)');
    expect(screen.getByText('Anna')).toBeInTheDocument();
    expect(screen.getByText('Train?')).toBeInTheDocument();
+    // A long quote wraps instead of setting the bubble's width (it pushed the bubble out of the chat).
+    expect(screen.getByText('Train?').getAttribute('style')).toContain('white-space: normal');
  });

  it('FE-COLLAB-PARTS-002: a face is the picture, else the first letter; day, reactions and time draw their children', () => {
@@ -38,6 +38,20 @@ function VoterChip({ name, src, offset }: { name: string; src: string | null; of
  );
 }

+/** The voters past the third, as a count on the end of the stack; their names on hover. */
+function MoreVoters({ names }: { names: string[] }) {
+  return (
+    <Tooltip label={names.map((name) => name || '?').join(', ')}>
+      <span
+        className="grid h-[18px] min-w-[18px] flex-none place-items-center rounded-full border-[1.5px] border-surface-card bg-surface-tertiary px-[3px] font-bold tabular-nums text-content-muted"
+        style={{ ...fs(7), marginInlineStart: -5 }}
+      >
+        +{names.length}
+      </span>
+    </Tooltip>
+  );
+}
+
 /** A fact about the poll on its head band, set like the type chip on a booking card. */
 export function PollChip({
  icon,
@@ -138,6 +152,7 @@ export function PollOptionRow({
          {voters.slice(0, 3).map((voter, index) => (
            <VoterChip key={voter.key} name={voter.name} src={voter.src} offset={index > 0} />
          ))}
+          {voters.length > 3 && <MoreVoters names={voters.slice(3).map((voter) => voter.name)} />}
        </span>
      )}
      {pending && <span className="sr-only">{pending.label}</span>}
@@ -191,6 +191,18 @@ describe('CollabPolls', () => {
    expect(await screen.findByText(/closed/i)).toBeInTheDocument();
  });

+  it('FE-COMP-POLLS-025: past three voters the stack ends in a count of the rest', async () => {
+    const voters = ['anna', 'ben', 'cleo', 'dana', 'emil'].map((username, i) => ({ user_id: 10 + i, username, avatar_url: null }));
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ is_closed: true, options: [{ id: 1, text: 'Paris', label: 'Paris', voters }, { id: 2, text: 'Rome', label: 'Rome', voters: [] }] })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    expect(await screen.findByText('+2')).toBeInTheDocument();
+    expect(screen.queryByText('D')).not.toBeInTheDocument();
+  });
+
  it('FE-COMP-POLLS-011: closed poll options are disabled (cannot vote)', async () => {
    server.use(
      http.get('/api/trips/1/collab/polls', () =>
@@ -1,4 +1,7 @@
 import { render, screen } from '../../../tests/helpers/render'
+import { http, HttpResponse } from 'msw'
+import { server } from '../../../tests/helpers/msw/server'
+import { buildTrip } from '../../../tests/helpers/factories'
 import { resetAllStores, seedStore } from '../../../tests/helpers/store'
 import { useTripStore } from '../../store/tripStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -171,6 +174,20 @@ describe('WhatsNextWidget', () => {
    expect(screen.getByText('TBD')).toBeInTheDocument()
  })

+  it('FE-COMP-WHATSNEXT-018: a hotel without a time of its own shows the check-in of the stay it begins', async () => {
+    server.use(http.get('/api/trips/1/accommodations', () => HttpResponse.json({
+      accommodations: [{ id: 7, trip_id: 1, place_id: 40, start_day_id: 1, end_day_id: 2, check_in: '15:00', check_out: '11:00' }],
+    })))
+    seedStore(useTripStore, {
+      trip: buildTrip({ id: 1 }),
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, day_number: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: { '1': [makeAssignment(40, { name: 'Hotel Kea', place_time: null })] },
+    })
+    render(<WhatsNextWidget />)
+    expect(await screen.findByText('15:00')).toBeInTheDocument()
+    expect(screen.queryByText('TBD')).not.toBeInTheDocument()
+  })
+
  it('FE-COMP-WHATSNEXT-009: renders address when provided', () => {
    seedStore(useTripStore, {
      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, day_number: 0, assignments: [], notes_items: [], notes: null }],
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { avatarSrc } from '../../utils/avatarSrc'
 import { useTripStore } from '../../store/tripStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -8,6 +8,8 @@ import { fs } from '../shared/DialogShell'
 import CollabPanelHead from './CollabPanelHead'
 import EmptyState from '../shared/EmptyState'
 import { localToday } from '../Planner/today'
+import { useTripStays } from '../Planner/useTripStays'
+import { stayStartingOn } from '../../utils/dayMerge'

 function formatTime(timeStr, is12h) {
  if (!timeStr) return ''
@@ -48,6 +50,10 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
  const { days, assignments } = useTripStore()
  const { t, locale } = useTranslation()
  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+  // A hotel on the day its stay begins is timed by the check-in when the stop has no time of its own.
+  const tripId = useTripStore(s => s.trip?.id ?? 0)
+  const { tripAccommodations, loadAccommodations } = useTripStays(tripId)
+  useEffect(() => { loadAccommodations() }, [loadAccommodations])

  const upcoming = useMemo(() => {
    const now = new Date()
@@ -60,14 +66,15 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
      const dayAssignments = assignments[String(day.id)] || []
      for (const a of dayAssignments) {
        if (!a.place) continue
+        const time = a.place.place_time || stayStartingOn(tripAccommodations, a.place.id, day.id)?.check_in || null
        // Include: today (not started yet, or still running) + all future days
        const isFutureDay = day.date > nowDate
-        const isTodayFuture = day.date === nowDate && (!a.place.place_time || a.place.place_time >= nowTime || (!!a.place.end_time && a.place.end_time >= nowTime))
+        const isTodayFuture = day.date === nowDate && (!time || time >= nowTime || (!!a.place.end_time && a.place.end_time >= nowTime))
        if (isFutureDay || isTodayFuture) {
          items.push({
            id: a.id,
            name: a.place.name,
-            time: a.place.place_time,
+            time,
            endTime: a.place.end_time,
            date: day.date,
            dayTitle: day.title,
@@ -88,7 +95,7 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
    })

    return items.slice(0, 8)
-  }, [days, assignments, tripMembers])
+  }, [days, assignments, tripMembers, tripAccommodations])

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
@@ -0,0 +1,260 @@
+/**
+ * The collection map frames every place of the list in the box it is given (FE-COMP-COLMAP-*).
+ *
+ * Real Leaflet on purpose, as in MapView.leaflet.test.tsx. The places went missing between
+ * two sizes: the renderer opened on a camera framed for the browser window, while this map
+ * is a box a fraction of that, and a mocked map has neither. The window here is a desktop
+ * of 1600 x 1000 and the map the 567 x 724 split it gets beside the list, where the demo's
+ * cafes opened on northern France with one pin in sight.
+ */
+import type { CollectionPlace } from '@trek/shared';
+import L from 'leaflet';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, render, waitFor } from '../../../tests/helpers/render';
+import { resetAllStores } from '../../../tests/helpers/store';
+import CollectionMap from './CollectionMap';
+
+vi.mock('../../hooks/useGeolocation', () => ({
+  useGeolocation: () => ({
+    position: null,
+    mode: 'off',
+    error: null,
+    errorCode: null,
+    cycleMode: vi.fn(),
+    setMode: vi.fn(),
+  }),
+}));
+
+vi.mock('../Ferratas/FerrataLayerLeaflet', () => ({ FerrataMapLayerLeaflet: () => null }));
+
+// A raster template keeps the basemap a plain TileLayer: the vector default needs WebGL.
+vi.mock('../../hooks/useTileUrl', () => ({ useTileUrl: () => 'https://tiles.example.test/{z}/{x}/{y}.png' }));
+
+vi.mock('../../services/photoService', () => ({
+  getCached: vi.fn(() => null),
+  isLoading: vi.fn(() => false),
+  fetchPhoto: vi.fn(),
+  onThumbReady: vi.fn(() => () => {}),
+  getAllThumbs: vi.fn(() => ({})),
+}));
+
+// Every map this file builds, newest last.
+const maps: L.Map[] = [];
+L.Map.addInitHook(function (this: L.Map) {
+  maps.push(this);
+});
+
+/** Half a selected pin (44 px): a point this far inside an edge keeps its whole pin on the map. */
+const PIN = 22;
+/** The desktop panel's control bar ends 52 px below the map's top edge. */
+const BAR = 52;
+/** The satellite and locate buttons fill the bottom 54 px of the map's corners. */
+const CONTROLS = 54;
+
+// Leaflet sizes the map from its container, which jsdom lays out at 0 x 0.
+const box = { width: 567, height: 724 };
+const sized = ['clientWidth', 'clientHeight'] as const;
+const originals = new Map<string, PropertyDescriptor | undefined>();
+const startWindow = { width: window.innerWidth, height: window.innerHeight };
+
+function setWindow(width: number, height: number) {
+  Object.defineProperty(window, 'innerWidth', { configurable: true, writable: true, value: width });
+  Object.defineProperty(window, 'innerHeight', { configurable: true, writable: true, value: height });
+}
+
+beforeAll(() => {
+  for (const key of sized) {
+    originals.set(key, Object.getOwnPropertyDescriptor(HTMLElement.prototype, key));
+    Object.defineProperty(HTMLElement.prototype, key, {
+      configurable: true,
+      get: () => (key === 'clientWidth' ? box.width : box.height),
+    });
+  }
+});
+afterAll(() => {
+  for (const key of sized) {
+    const original = originals.get(key);
+    if (original) Object.defineProperty(HTMLElement.prototype, key, original);
+    else delete (HTMLElement.prototype as unknown as Record<string, unknown>)[key];
+  }
+});
+
+beforeEach(() => {
+  // The desktop split beside the list, unless a test says otherwise.
+  setWindow(1600, 1000);
+  Object.assign(box, { width: 567, height: 724 });
+});
+afterEach(() => {
+  setWindow(startWindow.width, startWindow.height);
+  resetAllStores();
+});
+
+function place(id: number, name: string, lat: number, lng: number): CollectionPlace {
+  return { id, collection_id: 1, name, lat, lng, status: 'idea' };
+}
+
+// The demo's cafes: Vienna twice, Trieste, Rome, Paris, Lisbon, Porto and Copenhagen.
+const CAFES = [
+  place(1, 'Cafe Central', 48.2105, 16.366),
+  place(2, 'Cafe Sperl', 48.1999, 16.3634),
+  place(3, 'Caffe San Marco', 45.6513, 13.777),
+  place(4, "Sant'Eustachio il Caffe", 41.8984, 12.4753),
+  place(5, 'Cafe de Flore', 48.8542, 2.3331),
+  place(6, 'A Brasileira', 38.7102, -9.1417),
+  place(7, 'Cafe Majestic', 41.1472, -8.6064),
+  place(8, 'The Coffee Collective', 55.696, 12.5509),
+];
+
+// The demo's viewpoints, from the Norwegian fjords to the Cinque Terre.
+const VIEWPOINTS = [
+  place(11, 'Seceda', 46.6046, 11.722),
+  place(12, 'Preikestolen', 58.9863, 6.1904),
+  place(13, 'Trolltunga', 60.1241, 6.74),
+  place(14, 'Rigi Kulm', 47.056, 8.485),
+  place(15, 'Zugspitze', 47.4211, 10.9852),
+  place(16, 'Eibsee loop', 47.4575, 10.9918),
+  place(17, 'Hallstatt overlook', 47.5622, 13.6493),
+  place(18, 'Monterosso al Mare', 44.1456, 9.654),
+];
+
+// Temples and shrines across Japan: eight as well, and far outside the cafes' frame.
+const TEMPLES = [
+  place(31, 'Fushimi Inari', 34.9671, 135.7727),
+  place(32, 'Kiyomizu-dera', 34.9949, 135.785),
+  place(33, 'Senso-ji', 35.7148, 139.7967),
+  place(34, 'Chureito Pagoda', 35.5014, 138.8016),
+  place(35, 'Itsukushima', 34.2959, 132.3199),
+  place(36, 'Himeji Castle', 34.8394, 134.6939),
+  place(37, 'Shirakawa-go', 36.2578, 136.9066),
+  place(38, 'Todai-ji', 34.689, 135.8398),
+];
+
+// "All saved" across the globe, from Patagonia to Taiwan.
+const WORLD = [
+  place(21, 'Torres del Paine', -50.942, -73.4068),
+  place(22, 'Pico do Arieiro', 32.7356, -16.9281),
+  place(23, 'Landmannalaugar', 63.9926, -19.0607),
+  place(24, 'Taroko Gorge', 24.1594, 121.6211),
+  place(25, 'Lycian Way', 36.5497, 29.1153),
+  ...VIEWPOINTS.slice(0, 3),
+];
+
+function mapOf(places: CollectionPlace[], underBar: boolean) {
+  return (
+    <CollectionMap places={places} selectedPlaceId={null} onOpenPlace={vi.fn()} dark={false} underBar={underBar} />
+  );
+}
+
+async function renderMap(places: CollectionPlace[], underBar = true) {
+  const view = render(mapOf(places, underBar));
+  await waitFor(() => expect(view.container.querySelector('.leaflet-container')).not.toBeNull());
+  return { view, map: maps[maps.length - 1] };
+}
+
+/** Where each place sits on the map, in pixels from its top left corner. */
+function pointsOf(map: L.Map, places: CollectionPlace[]): L.Point[] {
+  return places.map((p) => map.latLngToContainerPoint([p.lat ?? 0, p.lng ?? 0]));
+}
+
+/** Every pin whole on the map, below the bar when there is one, and above the bottom controls. */
+function expectEveryPinClear(map: L.Map, places: CollectionPlace[], top: number) {
+  for (const { x, y } of pointsOf(map, places)) {
+    expect(x).toBeGreaterThanOrEqual(PIN);
+    expect(x).toBeLessThanOrEqual(box.width - PIN);
+    expect(y).toBeGreaterThanOrEqual(top + PIN);
+    expect(y).toBeLessThanOrEqual(box.height - CONTROLS - PIN);
+  }
+}
+
+/** Whether an element around the map carries the class. */
+function wrappedIn(map: L.Map, className: string): boolean {
+  for (let el = map.getContainer().parentElement; el; el = el.parentElement) {
+    if (el.classList.contains(className)) return true;
+  }
+  return false;
+}
+
+/** The places fill a good part of the free box along one axis: framed, not shown from orbit. */
+function expectFramedClosely(map: L.Map, places: CollectionPlace[], top: number) {
+  const points = pointsOf(map, places);
+  const spanX = Math.max(...points.map((p) => p.x)) - Math.min(...points.map((p) => p.x));
+  const spanY = Math.max(...points.map((p) => p.y)) - Math.min(...points.map((p) => p.y));
+  const freeX = box.width - 2 * PIN;
+  const freeY = box.height - top - CONTROLS - 2 * PIN;
+  expect(Math.max(spanX / freeX, spanY / freeY)).toBeGreaterThan(0.4);
+}
+
+describe('CollectionMap framing', () => {
+  it('FE-COMP-COLMAP-001: the desktop split opens with every cafe on screen, clear of the edges and the bar', async () => {
+    const { map } = await renderMap(CAFES);
+
+    expectEveryPinClear(map, CAFES, BAR);
+    expectFramedClosely(map, CAFES, BAR);
+  });
+
+  it('FE-COMP-COLMAP-002: another list of the same length frames again', async () => {
+    const { view, map } = await renderMap(CAFES);
+
+    // Both lists hold eight places, so a fit keyed on the count never noticed the switch.
+    // The temples lie far east of the cafes' frame, so their pins come clear only by a new fit.
+    expect(pointsOf(map, TEMPLES).every((p) => p.x > box.width)).toBe(true);
+    view.rerender(mapOf(TEMPLES, true));
+
+    await waitFor(() => expectEveryPinClear(map, TEMPLES, BAR));
+    expectFramedClosely(map, TEMPLES, BAR);
+  });
+
+  it('FE-COMP-COLMAP-003: a map the user moved stays put through a reload, a new order or an edited place', async () => {
+    const { view, map } = await renderMap(CAFES);
+    act(() => {
+      map.setView([50, 10], 7, { animate: false });
+    });
+
+    const reloaded = [...CAFES].reverse().map((p) => ({ ...p, status: 'visited' as const }));
+    view.rerender(mapOf(reloaded, true));
+
+    expect(map.getZoom()).toBe(7);
+    expect(map.getCenter().lat).toBeCloseTo(50, 5);
+    expect(map.getCenter().lng).toBeCloseTo(10, 5);
+  });
+
+  it('FE-COMP-COLMAP-004: a filter that hides every place leaves the map where it was', async () => {
+    const { view, map } = await renderMap(CAFES);
+    const zoom = map.getZoom();
+    const center = map.getCenter();
+
+    view.rerender(mapOf([], true));
+
+    expect(map.getZoom()).toBe(zoom);
+    expect(map.getCenter().lat).toBeCloseTo(center.lat, 5);
+    expect(map.getCenter().lng).toBeCloseTo(center.lng, 5);
+  });
+
+  it('FE-COMP-COLMAP-005: a list of one opens on its town, not on its street', async () => {
+    const { map } = await renderMap([CAFES[0]]);
+
+    expectEveryPinClear(map, [CAFES[0]], BAR);
+    expect(map.getZoom()).toBeGreaterThanOrEqual(10);
+    expect(map.getZoom()).toBeLessThanOrEqual(13);
+  });
+
+  it('FE-COMP-COLMAP-006: "All saved" across the globe keeps Patagonia and Taiwan on screen', async () => {
+    const { map } = await renderMap(WORLD);
+
+    expectEveryPinClear(map, WORLD, BAR);
+  });
+
+  it("FE-COMP-COLMAP-007: the phone's card frames every cafe clear of its edges and its bottom controls", async () => {
+    setWindow(390, 844);
+    Object.assign(box, { width: 356, height: 414 });
+
+    const { map } = await renderMap(CAFES, false);
+
+    expectEveryPinClear(map, CAFES, 0);
+    expectFramedClosely(map, CAFES, 0);
+    // The locate and satellite buttons stand on --bottom-nav-h, which lifts them over the tab
+    // bar under a full-screen map. The card ends above the tab bar, so its wrapper zeroes it
+    // and the buttons sit in the bottom 54 px the frame keeps free.
+    expect(wrappedIn(map, '[--bottom-nav-h:0px]')).toBe(true);
+  });
+});
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { MapViewAuto } from '../Map/MapViewAuto'
 import type { CollectionPlace } from '@trek/shared'
 import { mappablePlaces } from '../../pages/collections/collectionsModel'
 import { useTileUrl } from '../../hooks/useTileUrl'
 import { OFM_DARK, OFM_POSITRON } from '../../constants/mapDefaults'
+import type { ViewportPadding } from '../../utils/mapViewport'

 interface CollectionMapProps {
  places: CollectionPlace[]
@@ -12,20 +13,75 @@ interface CollectionMapProps {
  /** Clicking the map background clears the selection. */
  onDeselect?: () => void
  dark: boolean
+  /** A control bar floats over the top of the map (the desktop panel's), so the frame starts below it. */
+  underBar?: boolean
+}
+
+/** How far a pin reaches from its point: half a selected pin (44 px) and the rating badge on its corner. */
+const PIN_REACH = 26
+/** What every edge keeps clear: a pin's reach and a little air, so no pin touches the frame. */
+const EDGE = PIN_REACH + 14
+/** The desktop panel's control bar: 12 px off the top edge and at most 40 px tall. */
+const TOP_BAR = 52
+/** The round controls in the bottom corners (satellite, locate): 12 px off the edge and 42 px tall. */
+const BOTTOM_CONTROLS = 54
+/**
+ * Half the side of the square framed around a lone place, in degrees: about 11 km
+ * from north to south, so a list of one opens on its town rather than on the street
+ * the closest fit would zoom to.
+ */
+const LONE_PLACE_SPAN = 0.05
+
+/** What the frame keeps clear of pins, in map pixels per edge. */
+function framePadding(underBar: boolean): ViewportPadding {
+  const top = (underBar ? TOP_BAR : 0) + EDGE
+  return { top, right: EDGE, bottom: BOTTOM_CONTROLS + PIN_REACH, left: EDGE } // rtl-lint-disable: pixels of the map, not sides of the text
 }

 /**
- * Map view — reuses the trip map stack (MapViewAuto → Leaflet / GL with marker
+ * The coordinates the map frames. A lone place, or several on one spot, has no extent
+ * to fit, so a small square around it stands in.
+ */
+function framePoints(places: CollectionPlace[]): [number, number][] {
+  const points = places.flatMap(p => (
+    typeof p.lat === 'number' && typeof p.lng === 'number' ? [[p.lat, p.lng] as [number, number]] : []
+  ))
+  if (points.length === 0) return points
+  const [lat, lng] = points[0]
+  if (points.some(([a, b]) => a !== lat || b !== lng)) return points
+  return [
+    [Math.max(-90, lat - LONE_PLACE_SPAN), lng - LONE_PLACE_SPAN],
+    [Math.min(90, lat + LONE_PLACE_SPAN), lng + LONE_PLACE_SPAN],
+  ]
+}
+
+/**
+ * Map view: reuses the trip map stack (MapViewAuto → Leaflet / GL with marker
 * clustering). One of the three list views; clicking a marker selects the place.
 * The parent `.col-mapwrap` supplies the rounded, bordered box + height, so this
 * just fills it.
+ *
+ * The map frames every place itself, through the renderers' focus props. Their
+ * opening camera is framed for the browser window, and this map is a box a fraction
+ * of that size (the desktop split, the phone's card), so it opened zoomed in on the
+ * middle of the list with most places outside; and the count it used to key the fit
+ * on never changed between two lists of eight. The frame is fitted in the map's own
+ * box instead, clear of the edges and of the controls floating over it, and lands
+ * while the map is built rather than flying in.
 */
-export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, onDeselect, dark }: CollectionMapProps): React.ReactElement {
-  const pts = mappablePlaces(places)
+export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, onDeselect, dark, underBar = false }: CollectionMapProps): React.ReactElement {
+  const pts = useMemo(() => mappablePlaces(places), [places])
  const tileUrl = useTileUrl(dark ? OFM_DARK : OFM_POSITRON)
+  const focusPoints = useMemo(() => framePoints(pts), [pts])
+  // The places as a set: another list, a filter or a new place frames again, while a
+  // reload, another sort order or an edited note leaves a map the user moved alone.
+  const focusKey = useMemo(() => pts.map(p => p.id).sort((a, b) => a - b).join(','), [pts])

  return (
-    <div style={{ width: '100%', height: '100%' }}>
+    // The map's own controls stand on --bottom-nav-h to clear the phone's tab bar on a
+    // full-screen map. This one ends above the tab bar, so they belong on its bottom edge,
+    // where the frame's bottom padding keeps the pins out from under them.
+    <div className="[--bottom-nav-h:0px]" style={{ width: '100%', height: '100%' }}>
      <MapViewAuto
        places={pts}
        selectedPlaceId={selectedPlaceId}
@@ -35,10 +91,10 @@ export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, on
        // question a small picture cannot answer.
        onMarkerClick={onOpenPlace}
        onMapClick={onDeselect ? () => onDeselect() : undefined}
-        // No center/zoom: the map frames itself on the collection's places at mount, and
-        // falls back to the world view for a collection with none.
        tileUrl={tileUrl}
-        fitKey={pts.length}
+        focusPoints={focusPoints}
+        focusKey={focusKey}
+        fitPadding={framePadding(underBar)}
      />
    </div>
  )
@@ -0,0 +1,51 @@
+/**
+ * The collections page's map panel tells the map whether its bar floats over it (FE-COMP-COLMAPPANEL-*).
+ *
+ * The frame itself is CollectionMap.test.tsx's. The page tests stand the panel in with a double,
+ * so this is where the bar's height reaches the frame: without it the top pins land under the bar.
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { render } from '../../../tests/helpers/render';
+import CollectionMapPanel from './CollectionMapPanel';
+
+const handedToMap = vi.hoisted(() => ({ underBar: undefined as boolean | undefined }));
+vi.mock('./CollectionMap', () => ({
+  default: (props: { underBar?: boolean }) => {
+    handedToMap.underBar = props.underBar;
+    return null;
+  },
+}));
+
+function panel(overlay: boolean) {
+  return (
+    <CollectionMapPanel
+      places={[]}
+      selectedPlaceId={null}
+      onSelect={vi.fn()}
+      onDeselect={vi.fn()}
+      dark={false}
+      overlay={overlay}
+      view="list"
+      onToggleView={vi.fn()}
+      search=""
+      onSearch={vi.fn()}
+      t={(key) => key}
+    />
+  );
+}
+
+describe('CollectionMapPanel', () => {
+  it('FE-COMP-COLMAPPANEL-001: the desktop split floats its bar over the map, which frames its places below it', () => {
+    const { container } = render(panel(true));
+
+    expect(container.querySelector('.col-map-topbar')).not.toBeNull();
+    expect(handedToMap.underBar).toBe(true);
+  });
+
+  it('FE-COMP-COLMAPPANEL-002: a map without the bar frames its places from its own top edge', () => {
+    const { container } = render(panel(false));
+
+    expect(container.querySelector('.col-map-topbar')).toBeNull();
+    expect(handedToMap.underBar).toBe(false);
+  });
+});
@@ -50,6 +50,7 @@ export default function CollectionMapPanel({
        onOpenPlace={onSelect}
        onDeselect={onDeselect}
        dark={dark}
+        underBar={overlay}
      />
      {overlay && (
        <div className="col-map-topbar">
@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react';
+import { useTranslation } from '../../i18n';
+import { fs } from '../shared/DialogShell';
+import {
+  PHOTO_CREDITS,
+  PUBLIC_DOMAIN,
+  commonsPage,
+  creditTitle,
+  licenseDeed,
+  type PhotoCredit,
+} from './demoCreditsModel';
+
+type Translate = ReturnType<typeof useTranslation>['t'];
+
+const LINK = 'underline decoration-edge underline-offset-2 hover:text-content';
+
+/** One photo: its title linking to its page on Commons, who took it, and its license linking to the deed. */
+function CreditRow({ credit, t }: { credit: PhotoCredit; t: Translate }) {
+  const deed = licenseDeed(credit.license);
+  const license = credit.license === PUBLIC_DOMAIN ? t('demo.credits.publicDomain') : credit.license;
+  return (
+    <li className="flex flex-col gap-0.5 py-2.5">
+      <a
+        href={commonsPage(credit.file)}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={`${LINK} self-start break-words font-medium text-content`}
+        style={fs(12.5, 'body')}
+      >
+        {creditTitle(credit.file)}
+      </a>
+      <span className="flex flex-wrap gap-x-3 gap-y-0.5 text-content-muted" style={fs(12, 'body')}>
+        <span>{t('demo.credits.by', { author: credit.author })}</span>
+        {deed ? (
+          <a href={deed} target="_blank" rel="noopener noreferrer" className={LINK}>
+            {license}
+          </a>
+        ) : (
+          <span>{license}</span>
+        )}
+      </span>
+    </li>
+  );
+}
+
+/**
+ * The credits for the demo's photos, the welcome dialog's second view. Its own
+ * chunk, loaded when a visitor opens it: only a demo instance shows the
+ * welcome, and few visitors open its credits.
+ */
+export default function DemoCredits() {
+  const { t } = useTranslation();
+  const intro = useRef<HTMLParagraphElement>(null);
+
+  // The dialog's body keeps the welcome's scroll position when the credits
+  // take its place; they start at their top.
+  useEffect(() => {
+    intro.current?.scrollIntoView({ block: 'nearest' });
+  }, []);
+
+  return (
+    <>
+      <p ref={intro} className="m-0 scroll-mt-5 leading-snug text-content-secondary" style={fs(12.5, 'body')}>
+        {t('demo.credits.intro')}
+      </p>
+      <ul
+        aria-label={t('demo.credits.title')}
+        className="m-0 list-none divide-y divide-edge-faint rounded-[16px] border border-edge-faint bg-surface-card px-3.5"
+      >
+        {PHOTO_CREDITS.map((credit) => (
+          <CreditRow key={credit.file} credit={credit} t={t} />
+        ))}
+      </ul>
+    </>
+  );
+}
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '../../../tests/helpers/render';
+import DemoLock from './DemoLock';
+
+describe('DemoLock', () => {
+  it('FE-COMP-DEMOLOCK-001: unlocked, the section is the section and nothing more', () => {
+    const { container } = render(
+      <DemoLock locked={false} reason="Not here.">
+        <button type="button">Create key</button>
+      </DemoLock>
+    );
+    expect(screen.getByRole('button', { name: 'Create key' })).toBeEnabled();
+    expect(screen.queryByRole('note')).not.toBeInTheDocument();
+    expect(container.querySelector('[data-demo-lock]')).toBeNull();
+  });
+
+  it('FE-COMP-DEMOLOCK-002: locked, the section stays visible but out of reach, under the badge and the reason', () => {
+    const { container } = render(
+      <DemoLock locked reason="API keys cannot be created in the demo.">
+        <button type="button">Create key</button>
+      </DemoLock>
+    );
+    const note = screen.getByRole('note');
+    expect(note).toHaveTextContent('Demo mode');
+    expect(note).toHaveTextContent('API keys cannot be created in the demo.');
+    expect(screen.queryByRole('button', { name: 'Create key' })).not.toBeInTheDocument();
+    const veiled = container.querySelector('[data-demo-lock] > [inert]');
+    expect(veiled).toHaveAttribute('aria-hidden', 'true');
+    expect(veiled).toContainElement(screen.getByRole('button', { hidden: true, name: 'Create key' }));
+    expect(note.getAttribute('style')).toContain('repeating-linear-gradient');
+    expect(note.getAttribute('style')).toContain('var(--text-primary)');
+  });
+
+  it('FE-COMP-DEMOLOCK-003: a single row puts the note in its middle, a section at its top', () => {
+    const { rerender } = render(
+      <DemoLock locked reason="r" size="row">
+        <span>row</span>
+      </DemoLock>
+    );
+    expect(screen.getByRole('note').className).toContain('items-center');
+    rerender(
+      <DemoLock locked reason="r">
+        <span>section</span>
+      </DemoLock>
+    );
+    expect(screen.getByRole('note').className).toContain('items-start');
+  });
+});
@@ -0,0 +1,57 @@
+import { Lock } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { useTranslation } from '../../i18n';
+import { fs } from '../shared/DialogShell';
+
+interface DemoLockProps {
+  /** From useDemoAccountLock: false renders the children untouched. */
+  locked: boolean;
+  /** One line saying what the demo does not allow here. */
+  reason: string;
+  children: ReactNode;
+  /** `row` for a single settings row: the note sits in the middle instead of at the top. */
+  size?: 'section' | 'row';
+  className?: string;
+}
+
+/** Thin diagonal stripes in the theme's own ink, so they read in light and dark alike. */
+const STRIPES =
+  'repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-primary) 8%, transparent) 0 9px, transparent 9px 18px)';
+
+/**
+ * A section the shared demo account may look at but not change: dimmed,
+ * out of reach for pointer and keyboard, under a striped veil that carries a
+ * small "Demo mode" badge and the reason. Used on the desktop settings and on
+ * the phone screens alike.
+ */
+export default function DemoLock({ locked, reason, children, size = 'section', className = '' }: DemoLockProps) {
+  const { t } = useTranslation();
+  if (!locked) return <>{children}</>;
+  return (
+    <div className={`relative ${className}`} data-demo-lock="">
+      <div inert aria-hidden="true" className="pointer-events-none select-none opacity-40 saturate-50">
+        {children}
+      </div>
+      <div
+        role="note"
+        className={`absolute inset-0 flex justify-center rounded-2xl border border-dashed border-edge-secondary ${
+          size === 'row' ? 'items-center p-1' : 'items-start p-3'
+        }`}
+        style={{ background: STRIPES }}
+      >
+        <div className="sticky top-3 flex max-w-full flex-wrap items-center justify-center gap-x-2.5 gap-y-1 rounded-2xl bg-surface-card px-3 py-2 text-center shadow-md ring-1 ring-edge-faint">
+          <span
+            className="inline-flex flex-none items-center gap-1 rounded-full bg-accent px-2 py-0.5 font-semibold uppercase tracking-[.06em] text-accent-text"
+            style={fs(10)}
+          >
+            <Lock size={11} strokeWidth={2.4} aria-hidden />
+            {t('demo.lock.badge')}
+          </span>
+          <span className="min-w-0 text-content-secondary" style={fs(12.5, 'body')}>
+            {reason}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,149 @@
+import { act, fireEvent, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useAuthStore } from '../../store/authStore';
+import DemoWelcome from './DemoWelcome';
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useAuthStore, { serverTimezone: 'UTC' });
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('DemoWelcome', () => {
+  it('FE-COMP-DEMOWELCOME-001: opens as a dialog saying what TREK is', () => {
+    render(<DemoWelcome />);
+    const dialog = screen.getByRole('dialog', { name: 'Live demo' });
+    expect(dialog).toHaveTextContent('Welcome to TREK');
+    expect(dialog).toHaveTextContent('The travel planner you share');
+  });
+
+  it('FE-COMP-DEMOWELCOME-002: says the demo resets every hour and what it cannot do', () => {
+    render(<DemoWelcome />);
+    expect(screen.getByText('Everything resets every hour')).toBeInTheDocument();
+    for (const line of [
+      'Uploading photos, documents and covers',
+      'Changing the account, its password or 2FA',
+      'Creating API keys',
+      'Connecting MCP clients',
+      'Connecting your own AI model',
+    ])
+      expect(screen.getByText(line)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-DEMOWELCOME-003: shows the highlights to try and what the full version adds', () => {
+    render(<DemoWelcome />);
+    for (const title of [
+      'Trip planner',
+      'Tours and hikes',
+      'Photo books in TREK Studio',
+      'Plan together live',
+      'Journey travel journal',
+      'Atlas world map',
+      'Vacay holiday planner',
+      'Collections',
+      'Works offline',
+    ])
+      expect(screen.getByText(title)).toBeInTheDocument();
+    for (const line of ['Sign in with OIDC and SSO', 'Automatic backups', 'Plugins for new features'])
+      expect(screen.getByText(line)).toBeInTheDocument();
+    expect(screen.getByText('The AI assistant on your own model')).toBeInTheDocument();
+    expect(screen.getByText('An admin panel for users, addons and permissions')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-DEMOWELCOME-004: links to the repository in a new tab', () => {
+    render(<DemoWelcome />);
+    const link = screen.getByRole('link', { name: 'Source code on GitHub' });
+    expect(link).toHaveAttribute('href', 'https://github.com/liketrek/TREK');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('FE-COMP-DEMOWELCOME-005: the countdown runs live in the server zone', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: false });
+    // On a whole second, so every tick of the interval lands on one too.
+    vi.setSystemTime(new Date(Date.UTC(2026, 9, 24, 12, 17, 53)));
+    render(<DemoWelcome />);
+    expect(screen.getByTestId('demo-countdown')).toHaveTextContent('42:07');
+
+    // Advancing the fake timers moves the fake clock with them: the fifth tick reads 12:17:58.
+    await act(async () => {
+      vi.advanceTimersByTime(5000);
+    });
+    expect(screen.getByTestId('demo-countdown')).toHaveTextContent('42:02');
+  });
+
+  it('FE-COMP-DEMOWELCOME-006: the button closes it', async () => {
+    const user = userEvent.setup();
+    render(<DemoWelcome />);
+    await user.click(screen.getByRole('button', { name: 'Start exploring' }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-DEMOWELCOME-007: Escape closes it too', () => {
+    render(<DemoWelcome />);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-DEMOWELCOME-008: the photo credits open in its place and the back button returns', async () => {
+    const user = userEvent.setup();
+    render(<DemoWelcome />);
+    await user.click(screen.getByRole('button', { name: 'Photo credits' }));
+
+    const list = await screen.findByRole('list', { name: 'Photo credits' }, { timeout: 5000 });
+    expect(within(list).getAllByRole('listitem')).toHaveLength(228);
+    expect(screen.getByText(/come from Wikimedia Commons/)).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Photo credits' })).toBeInTheDocument();
+    expect(screen.queryByText('Everything resets every hour')).not.toBeInTheDocument();
+    expect(screen.getByRole('dialog', { name: 'Live demo' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Back' })).toHaveFocus();
+
+    await user.click(screen.getByRole('button', { name: 'Back' }));
+    expect(screen.getByText('Everything resets every hour')).toBeInTheDocument();
+    expect(screen.queryByRole('list', { name: 'Photo credits' })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Photo credits' })).toHaveFocus();
+  });
+
+  it('FE-COMP-DEMOWELCOME-009: a photo names its title, author and license, each linking to its source', async () => {
+    const user = userEvent.setup();
+    render(<DemoWelcome />);
+    await user.click(screen.getByRole('button', { name: 'Photo credits' }));
+
+    const title = await screen.findByRole('link', { name: 'Lagoa Rasa (Sete Cidades) 2' }, { timeout: 5000 });
+    expect(title).toHaveAttribute('href', 'https://commons.wikimedia.org/wiki/File:Lagoa_Rasa_(Sete_Cidades)_2.jpg');
+    expect(title).toHaveAttribute('target', '_blank');
+    expect(title).toHaveAttribute('rel', 'noopener noreferrer');
+    const row = within(title.closest('li') as HTMLElement);
+    expect(row.getByText('by Walmaul')).toBeInTheDocument();
+    const license = row.getByRole('link', { name: 'CC BY-SA 4.0' });
+    expect(license).toHaveAttribute('href', 'https://creativecommons.org/licenses/by-sa/4.0/');
+    expect(license).toHaveAttribute('target', '_blank');
+    expect(license).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('FE-COMP-DEMOWELCOME-010: a public domain photo names it without a deed, and a cleaned author reads as a name', async () => {
+    const user = userEvent.setup();
+    render(<DemoWelcome />);
+    await user.click(screen.getByRole('button', { name: 'Photo credits' }));
+
+    const abiskoTitle = await screen.findByRole('link', { name: 'AbiskoNationalpark01' }, { timeout: 5000 });
+    const abisko = within(abiskoTitle.closest('li') as HTMLElement);
+    expect(abisko.getByText('Public domain')).toBeInTheDocument();
+    expect(abisko.getAllByRole('link')).toHaveLength(1);
+
+    const zinnen = within(
+      screen.getByRole('link', { name: 'Drei Zinnen Tre Cime di Lavaredo Dolomites' }).closest('li') as HTMLElement
+    );
+    expect(zinnen.getByText('by Wolfgang Moroder')).toBeInTheDocument();
+    expect(zinnen.getByRole('link', { name: 'CC BY-SA 3.0' })).toHaveAttribute(
+      'href',
+      'https://creativecommons.org/licenses/by-sa/3.0/'
+    );
+  });
+});
@@ -0,0 +1,205 @@
+import { ArrowLeft, ArrowRight, Clock, ExternalLink, Images, RotateCcw } from 'lucide-react';
+import { lazy, Suspense, useId } from 'react';
+import { useTranslation } from '../../i18n';
+import {
+  DialogButton,
+  DialogFooter,
+  DialogHeader,
+  DialogSection,
+  DialogShell,
+  DialogTile,
+  FooterSpacer,
+  fs,
+  NEUTRAL_TINT,
+  PILL,
+} from '../shared/DialogShell';
+import ErrorBoundary from '../shared/ErrorBoundary';
+import TrekIcon from '../shared/TrekIcon';
+import { DEMO_FEATURES, DEMO_FULL_VERSION, DEMO_LIMITS, TREK_REPO_URL, type DemoLine } from './demoWelcomeModel';
+import { useDemoWelcome } from './useDemoWelcome';
+
+// The credits and their photo list load when a visitor opens them, not with the dashboard.
+const DemoCredits = lazy(() => import('./DemoCredits'));
+
+type Translate = ReturnType<typeof useTranslation>['t'];
+
+const FOOTER_LINK = 'inline-flex items-center gap-1.5 font-medium text-content-muted no-underline hover:text-content';
+
+/** The tiles: what a visitor can open right now, one card each. */
+function FeatureGrid({ t }: { t: Translate }) {
+  return (
+    <div className="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
+      {DEMO_FEATURES.map(({ id, icon: Icon, titleKey, bodyKey }) => (
+        <div key={id} className="flex gap-3 rounded-[16px] border border-edge-faint bg-surface-secondary p-3.5">
+          <span className="grid h-9 w-9 flex-none place-items-center rounded-[12px] bg-surface-card text-content shadow-sm">
+            <Icon size={17} strokeWidth={2} aria-hidden />
+          </span>
+          <div className="min-w-0">
+            <div className="font-semibold text-content" style={fs(13.5, 'body')}>
+              {t(titleKey)}
+            </div>
+            <p className="m-0 mt-0.5 leading-snug text-content-muted" style={fs(12, 'body')}>
+              {t(bodyKey)}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** A short list with an icon per line, for what the demo leaves out and what the full version adds. */
+function LineList({ lines, tone, t }: { lines: readonly DemoLine[]; tone: 'muted' | 'accent'; t: Translate }) {
+  const iconClass = tone === 'accent' ? 'text-success' : 'text-content-faint';
+  return (
+    <ul className="m-0 flex list-none flex-col gap-2 rounded-[16px] border border-edge-faint bg-surface-card p-3.5">
+      {lines.map(({ icon: Icon, labelKey }) => (
+        <li key={labelKey} className="flex items-center gap-2.5 text-content-secondary" style={fs(12.5, 'body')}>
+          <Icon size={15} strokeWidth={2} className={`flex-none ${iconClass}`} aria-hidden />
+          <span>{t(labelKey)}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/** The welcome itself: the hourly reset, the tiles, and the two lists under them. */
+function WelcomeBody({ t }: { t: Translate }) {
+  return (
+    <>
+      <div className="flex items-start gap-3 rounded-[16px] bg-warning-soft px-4 py-3">
+        <RotateCcw size={17} strokeWidth={2.2} className="mt-0.5 flex-none text-warning" aria-hidden />
+        <div className="min-w-0">
+          <div className="font-semibold text-content" style={fs(13.5, 'body')}>
+            {t('demo.welcome.resetTitle')}
+          </div>
+          <p className="m-0 mt-0.5 leading-snug text-content-secondary" style={fs(12.5, 'body')}>
+            {t('demo.welcome.resetBody')}
+          </p>
+        </div>
+      </div>
+
+      <DialogSection label={t('demo.welcome.tryTitle')}>
+        <FeatureGrid t={t} />
+      </DialogSection>
+
+      <div className="grid gap-5 md:grid-cols-2">
+        <DialogSection label={t('demo.welcome.limitsTitle')}>
+          <LineList lines={DEMO_LIMITS} tone="muted" t={t} />
+        </DialogSection>
+        <DialogSection label={t('demo.welcome.fullTitle')}>
+          <LineList lines={DEMO_FULL_VERSION} tone="accent" t={t} />
+        </DialogSection>
+      </div>
+    </>
+  );
+}
+
+/**
+ * The footer's links: the source code, and the credits for the demo's photos.
+ * One above the other on a phone, where the footer has no room for both
+ * beside the button.
+ */
+function FooterLinks({ t, onCredits, focusCredits }: { t: Translate; onCredits: () => void; focusCredits: boolean }) {
+  return (
+    <div className="flex min-w-0 flex-col items-start gap-1.5 sm:flex-row sm:items-center sm:gap-4">
+      <a
+        href={TREK_REPO_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={FOOTER_LINK}
+        style={fs(12.5, 'body')}
+      >
+        <ExternalLink size={15} strokeWidth={2} aria-hidden />
+        {t('demo.welcome.repo')}
+      </a>
+      <button
+        type="button"
+        onClick={onCredits}
+        autoFocus={focusCredits}
+        className={FOOTER_LINK}
+        style={fs(12.5, 'body')}
+      >
+        <Images size={15} strokeWidth={2} aria-hidden />
+        {t('demo.welcome.credits')}
+      </button>
+    </div>
+  );
+}
+
+/**
+ * The welcome a demo instance opens with: what TREK is, that the demo resets
+ * on the hour (with the live countdown), what to try right away, what the
+ * demo leaves out and what the full version adds. The photo credits open in
+ * its place and back. Closed by the button, Escape or a click on the
+ * backdrop, and shown again on the next visit.
+ */
+export default function DemoWelcome() {
+  const { t } = useTranslation();
+  const labelId = useId();
+  const { open, close, countdown, creditsOpen, backFromCredits, openCredits, closeCredits } = useDemoWelcome();
+
+  return (
+    <DialogShell
+      open={open}
+      onClose={close}
+      labelledBy={labelId}
+      width="wide"
+      header={
+        <DialogHeader
+          tile={
+            <DialogTile>
+              <TrekIcon className="h-7 w-7 text-content" />
+            </DialogTile>
+          }
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={close}
+          eyebrow={t('demo.welcome.eyebrow')}
+          title={t(creditsOpen ? 'demo.credits.title' : 'demo.welcome.title')}
+          sub={creditsOpen ? undefined : t('demo.welcome.tagline')}
+          subWraps
+          pills={
+            <span className={PILL}>
+              <Clock size={13} strokeWidth={2.2} aria-hidden />
+              {t('demo.welcome.resetIn')}
+              <span className="font-geist tabular-nums" data-testid="demo-countdown">
+                {countdown}
+              </span>
+            </span>
+          }
+        />
+      }
+      footer={
+        <DialogFooter>
+          {/* The start button keeps its place in both views, so switching does not move the focus onto it again. */}
+          {creditsOpen ? (
+            <DialogButton
+              onClick={closeCredits}
+              autoFocus
+              icon={<ArrowLeft size={15} strokeWidth={2.2} className="rtl:-scale-x-100" />}
+            >
+              {t('demo.credits.back')}
+            </DialogButton>
+          ) : (
+            <FooterLinks t={t} onCredits={openCredits} focusCredits={backFromCredits} />
+          )}
+          <FooterSpacer />
+          <DialogButton variant="primary" onClick={close} autoFocus icon={<ArrowRight size={15} strokeWidth={2.2} />}>
+            {t('demo.welcome.start')}
+          </DialogButton>
+        </DialogFooter>
+      }
+    >
+      {creditsOpen ? (
+        <ErrorBoundary boundaryId="demo-credits">
+          <Suspense fallback={null}>
+            <DemoCredits />
+          </Suspense>
+        </ErrorBoundary>
+      ) : (
+        <WelcomeBody t={t} />
+      )}
+    </DialogShell>
+  );
+}
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { PHOTO_CREDITS, PUBLIC_DOMAIN, commonsPage, creditTitle, licenseDeed } from './demoCreditsModel';
+
+describe('demo photo credits', () => {
+  it('FE-DEMO-CREDITS-001: credits every photo of the demo content, each file once', () => {
+    expect(PHOTO_CREDITS).toHaveLength(228);
+    expect(new Set(PHOTO_CREDITS.map((c) => c.file)).size).toBe(228);
+    for (const { file } of PHOTO_CREDITS) expect(file, file).toMatch(/\.jpe?g$/i);
+  });
+
+  it('FE-DEMO-CREDITS-002: every author is a plain name, with no Commons notice or link label left', () => {
+    for (const { file, author } of PHOTO_CREDITS) {
+      expect(author.trim(), file).not.toBe('');
+      expect(author, file).toBe(author.trim());
+      expect(author.length, `${file}: ${author}`).toBeLessThanOrEqual(60);
+      expect(author, file).not.toMatch(/\s{2,}|\n/);
+      expect(author, file).not.toMatch(
+        /Photo was taken|machine-readable|assumed|Feel free|copyright|https?:|User:|\((?:Website|Flickr)\)/i
+      );
+    }
+    const authorOf = (file: string) => PHOTO_CREDITS.find((c) => c.file === file)?.author;
+    expect(authorOf('Drei Zinnen Tre Cime di Lavaredo Dolomites.jpg')).toBe('Wolfgang Moroder');
+    expect(authorOf('Iceland Godafoss 1972.jpg')).toBe('Roger McLassus');
+    expect(authorOf('Arashiyama Bamboo Grove (Unsplash).jpg')).toBe('Erol Ahmed');
+  });
+
+  it('FE-DEMO-CREDITS-003: every license has its deed, except the public domain', () => {
+    for (const { file, license } of PHOTO_CREDITS) {
+      if (license === PUBLIC_DOMAIN) expect(licenseDeed(license), file).toBeUndefined();
+      else expect(licenseDeed(license), `${file}: ${license}`).toMatch(/^https:\/\/creativecommons\.org\/.+\/$/);
+    }
+  });
+
+  it('FE-DEMO-CREDITS-004: derives the deed from the license name', () => {
+    expect(licenseDeed('CC BY-SA 4.0')).toBe('https://creativecommons.org/licenses/by-sa/4.0/');
+    expect(licenseDeed('CC BY 2.5')).toBe('https://creativecommons.org/licenses/by/2.5/');
+    expect(licenseDeed('CC BY-SA 2.0 de')).toBe('https://creativecommons.org/licenses/by-sa/2.0/de/');
+    expect(licenseDeed('CC0')).toBe('https://creativecommons.org/publicdomain/zero/1.0/');
+    expect(licenseDeed(PUBLIC_DOMAIN)).toBeUndefined();
+    expect(licenseDeed('GFDL')).toBeUndefined();
+  });
+
+  it('FE-DEMO-CREDITS-005: shows the title without its extension and links the page on Commons', () => {
+    expect(creditTitle('Café A Brasileira. Sculpture.jpg')).toBe('Café A Brasileira. Sculpture');
+    expect(creditTitle('Svínafellsjökull.JPG')).toBe('Svínafellsjökull');
+    expect(creditTitle('No extension')).toBe('No extension');
+    expect(commonsPage('Lagoa Rasa (Sete Cidades) 2.jpg')).toBe(
+      'https://commons.wikimedia.org/wiki/File:Lagoa_Rasa_(Sete_Cidades)_2.jpg'
+    );
+    expect(commonsPage('Glacier du Géant & Mont Blanc.jpg')).toBe(
+      'https://commons.wikimedia.org/wiki/File:Glacier_du_G%C3%A9ant_%26_Mont_Blanc.jpg'
+    );
+  });
+});
@@ -0,0 +1,50 @@
+import credits from './photoCredits.json';
+
+/**
+ * One photo of the demo content as Wikimedia Commons credits it: the file's
+ * name there, its author and the short name of its license. The page on
+ * Commons, the title to show and the license's deed all follow from these, so
+ * photoCredits.json holds nothing else.
+ */
+export interface PhotoCredit {
+  file: string;
+  author: string;
+  license: string;
+}
+
+/**
+ * Every photo in the demo content, sorted by file name. The authors are the
+ * plain names: where Commons fills the field with a notice or a link label
+ * ("This Photo was taken by ...", "(Flickr)"), the list holds the name it
+ * gives, and where the author asks to be credited in a set form, that form.
+ */
+export const PHOTO_CREDITS: readonly PhotoCredit[] = credits;
+
+/** The license name Commons gives a photo nobody holds a copyright in; it has no deed to link. */
+export const PUBLIC_DOMAIN = 'Public domain';
+
+const COMMONS_FILE_PAGE = 'https://commons.wikimedia.org/wiki/File:';
+
+/** The file's name without its extension, the title Commons shows above the photo. */
+export function creditTitle(file: string): string {
+  const dot = file.lastIndexOf('.');
+  return dot > 0 ? file.slice(0, dot) : file;
+}
+
+/** The file's page on Commons, with its full description and license. */
+export function commonsPage(file: string): string {
+  return COMMONS_FILE_PAGE + encodeURIComponent(file.replace(/ /g, '_'));
+}
+
+/**
+ * The deed of a Creative Commons license by the short name Commons gives it:
+ * "CC BY-SA 4.0", a ported one such as "CC BY-SA 2.0 de", or "CC0". Nothing
+ * for the public domain, which is no license.
+ */
+export function licenseDeed(license: string): string | undefined {
+  if (license === 'CC0') return 'https://creativecommons.org/publicdomain/zero/1.0/';
+  const match = /^CC (BY(?:-SA)?) (\d\.\d)(?: ([a-z]{2}))?$/.exec(license);
+  if (!match) return undefined;
+  const [, terms, version, port] = match;
+  return `https://creativecommons.org/licenses/${terms.toLowerCase()}/${version}/${port ? `${port}/` : ''}`;
+}
@@ -0,0 +1,59 @@
+import en from '@trek/shared/i18n/en';
+import { describe, expect, it } from 'vitest';
+import { DEMO_FEATURES, DEMO_FULL_VERSION, DEMO_LIMITS, formatCountdown, secondsUntilReset } from './demoWelcomeModel';
+
+describe('demo welcome model', () => {
+  it('FE-DEMO-MODEL-001: every tile and line names a key the English catalogue holds', () => {
+    const keys = [
+      ...DEMO_FEATURES.flatMap((f) => [f.titleKey, f.bodyKey]),
+      ...DEMO_LIMITS.map((l) => l.labelKey),
+      ...DEMO_FULL_VERSION.map((l) => l.labelKey),
+    ];
+    for (const key of keys) expect(Object.keys(en), key).toContain(key);
+  });
+
+  it('FE-DEMO-MODEL-002: shows the highlights a visitor can open, each once', () => {
+    expect(DEMO_FEATURES.map((f) => f.id)).toEqual([
+      'planner',
+      'tours',
+      'studio',
+      'collab',
+      'journey',
+      'atlas',
+      'vacay',
+      'collections',
+      'offline',
+    ]);
+  });
+
+  it('FE-DEMO-MODEL-003: names everything the demo account cannot do', () => {
+    expect(DEMO_LIMITS.map((l) => l.labelKey)).toEqual([
+      'demo.limit.uploads',
+      'demo.limit.account',
+      'demo.limit.apiKeys',
+      'demo.limit.mcp',
+      'demo.limit.ai',
+    ]);
+  });
+
+  it('FE-DEMO-MODEL-004: counts down to the next full hour in the server zone', () => {
+    const at = new Date(Date.UTC(2026, 9, 24, 12, 17, 53));
+    expect(secondsUntilReset(at, 'UTC')).toBe(42 * 60 + 7);
+    // A zone half an hour off UTC has its hour mark at half past, UTC time.
+    expect(secondsUntilReset(at, 'Asia/Kolkata')).toBe(12 * 60 + 7);
+  });
+
+  it('FE-DEMO-MODEL-005: falls back to the browser clock for a zone it does not know, or none', () => {
+    const at = new Date(2026, 9, 24, 12, 59, 30);
+    expect(secondsUntilReset(at, 'Not/AZone')).toBe(30);
+    expect(secondsUntilReset(at)).toBe(30);
+    expect(secondsUntilReset(new Date(2026, 9, 24, 13, 0, 0))).toBe(3600);
+  });
+
+  it('FE-DEMO-MODEL-006: formats the countdown as minutes and seconds', () => {
+    expect(formatCountdown(42 * 60 + 7)).toBe('42:07');
+    expect(formatCountdown(5)).toBe('00:05');
+    expect(formatCountdown(3600)).toBe('60:00');
+    expect(formatCountdown(-3)).toBe('00:00');
+  });
+});
@@ -0,0 +1,111 @@
+import type { LucideIcon } from 'lucide-react';
+import {
+  BookImage,
+  Bookmark,
+  Bot,
+  CalendarDays,
+  DatabaseBackup,
+  Globe,
+  KeyRound,
+  LayoutDashboard,
+  Map as MapIcon,
+  Mountain,
+  NotebookPen,
+  Puzzle,
+  ShieldCheck,
+  Sparkles,
+  Terminal,
+  Upload,
+  UserLock,
+  Users,
+  WifiOff,
+} from 'lucide-react';
+
+/** One thing a visitor can try in the demo right away: a tile of the welcome dialog. */
+interface DemoFeature {
+  id: string;
+  icon: LucideIcon;
+  titleKey: string;
+  bodyKey: string;
+}
+
+/** A line of the two lists under the tiles: what the demo leaves out, and what the full version adds. */
+export interface DemoLine {
+  icon: LucideIcon;
+  labelKey: string;
+}
+
+export const DEMO_FEATURES: readonly DemoFeature[] = [
+  { id: 'planner', icon: MapIcon, titleKey: 'demo.feature.planner.title', bodyKey: 'demo.feature.planner.body' },
+  { id: 'tours', icon: Mountain, titleKey: 'demo.feature.tours.title', bodyKey: 'demo.feature.tours.body' },
+  { id: 'studio', icon: BookImage, titleKey: 'demo.feature.studio.title', bodyKey: 'demo.feature.studio.body' },
+  { id: 'collab', icon: Users, titleKey: 'demo.feature.collab.title', bodyKey: 'demo.feature.collab.body' },
+  { id: 'journey', icon: NotebookPen, titleKey: 'demo.feature.journey.title', bodyKey: 'demo.feature.journey.body' },
+  { id: 'atlas', icon: Globe, titleKey: 'demo.feature.atlas.title', bodyKey: 'demo.feature.atlas.body' },
+  { id: 'vacay', icon: CalendarDays, titleKey: 'demo.feature.vacay.title', bodyKey: 'demo.feature.vacay.body' },
+  {
+    id: 'collections',
+    icon: Bookmark,
+    titleKey: 'demo.feature.collections.title',
+    bodyKey: 'demo.feature.collections.body',
+  },
+  { id: 'offline', icon: WifiOff, titleKey: 'demo.feature.offline.title', bodyKey: 'demo.feature.offline.body' },
+];
+
+/** What the shared demo account cannot do; the server refuses each of them too. */
+export const DEMO_LIMITS: readonly DemoLine[] = [
+  { icon: Upload, labelKey: 'demo.limit.uploads' },
+  { icon: UserLock, labelKey: 'demo.limit.account' },
+  { icon: KeyRound, labelKey: 'demo.limit.apiKeys' },
+  { icon: Terminal, labelKey: 'demo.limit.mcp' },
+  { icon: Sparkles, labelKey: 'demo.limit.ai' },
+];
+
+export const DEMO_FULL_VERSION: readonly DemoLine[] = [
+  { icon: ShieldCheck, labelKey: 'demo.full.sso' },
+  { icon: DatabaseBackup, labelKey: 'demo.full.backups' },
+  { icon: Puzzle, labelKey: 'demo.full.plugins' },
+  { icon: Bot, labelKey: 'demo.full.assistant' },
+  { icon: LayoutDashboard, labelKey: 'demo.full.admin' },
+];
+
+export const TREK_REPO_URL = 'https://github.com/liketrek/TREK';
+
+/** The demo resets on the hour (the server's `0 * * * *` cron). */
+const HOUR_SECONDS = 3600;
+
+/**
+ * Minute and second of the hour at `now` in the server's time zone, where the
+ * reset cron runs. A zone whose offset is not whole hours (India, Nepal) moves
+ * the hour mark; an unknown zone falls back to the browser's clock.
+ */
+function minuteAndSecond(now: Date, timeZone: string | undefined): [number, number] {
+  if (timeZone) {
+    try {
+      const parts = new Intl.DateTimeFormat('en-US', { timeZone, minute: 'numeric', second: 'numeric' }).formatToParts(
+        now
+      );
+      const read = (type: 'minute' | 'second') => Number(parts.find((p) => p.type === type)?.value);
+      const minute = read('minute');
+      const second = read('second');
+      if (Number.isFinite(minute) && Number.isFinite(second)) return [minute, second];
+    } catch {
+      // A zone this browser does not know: the local clock below.
+    }
+  }
+  return [now.getMinutes(), now.getSeconds()];
+}
+
+/** Seconds until the next hourly reset, from 1 up to 3600. */
+export function secondsUntilReset(now: Date, timeZone?: string): number {
+  const [minute, second] = minuteAndSecond(now, timeZone);
+  return HOUR_SECONDS - (minute * 60 + second);
+}
+
+/** The countdown as minutes and seconds, `42:07`. */
+export function formatCountdown(seconds: number): string {
+  const safe = Math.max(0, Math.floor(seconds));
+  const minutes = Math.floor(safe / 60);
+  const rest = safe % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(rest).padStart(2, '0')}`;
+}
@@ -0,0 +1,498 @@
+[
+  {
+    "file": "(Venice) - Fondamente zattere - Casa Scarpa.jpg",
+    "author": "Didier Descouens",
+    "license": "CC BY-SA 4.0"
+  },
+  {
+    "file": "+Die Hallgrimskirkja ist das markanteste Bauwerk Reykjaviks. 03.jpg",
+    "author": "Holger Uwe Schmitt",
+    "license": "CC BY-SA 4.0"
+  },
+  {
+    "file": "+Die Hallgrimskirkja ist das markanteste Bauwerk Reykjaviks. 05.jpg",
+    "author": "Holger Uwe Schmitt",
+    "license": "CC BY-SA 4.0"
+  },
+  {
+    "file": "021 Wild smiling harbor seal at Jökulsárlón (Iceland) Photo by Giles Laurent.jpg",
+    "author": "Giles Laurent",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "03613 ISL Akureyri cruise vessel vapors V P.jpg", "author": "Virtual-Pano", "license": "CC BY-SA 4.0" },
+  { "file": "20181110 Fushimi Inari shrine 3.jpg", "author": "Balon Greyjoy", "license": "CC0" },
+  { "file": "20181110 Fushimi Inari shrine 4.jpg", "author": "Balon Greyjoy", "license": "CC0" },
+  { "file": "20181110 Fushimi Inari shrine 6.jpg", "author": "Balon Greyjoy", "license": "CC0" },
+  { "file": "2019-08-01 Zugspitze 7.jpg", "author": "Maksym Kozlenko", "license": "CC BY-SA 4.0" },
+  {
+    "file": "2022-05-28 13-21-39 Heinabergslón and Heinabergsjökull.jpg",
+    "author": "Hansueli Krapf",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "2022-05-28 13-26-26 Island - Hoffell 118.0.jpg", "author": "Hansueli Krapf", "license": "CC BY-SA 4.0" },
+  {
+    "file": "2022-05-28 13-50-35 Panorama of Heinabergsjökull.jpg",
+    "author": "Hansueli Krapf",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "2023-11-04 Lycian Way near Kaş.jpg", "author": "Alexkom000", "license": "CC BY 4.0" },
+  { "file": "AbiskoNationalpark01.jpg", "author": "Unterrichter at English Wikipedia", "license": "Public domain" },
+  { "file": "Almannagjá gorge at Þingvellir National Park.jpg", "author": "Olga Ernst", "license": "CC BY-SA 4.0" },
+  { "file": "Almannagjá rift at Þingvellir National Park.jpg", "author": "Olga Ernst", "license": "CC BY-SA 4.0" },
+  { "file": "Arashiyama Bamboo Grove (Unsplash).jpg", "author": "Erol Ahmed", "license": "CC0" },
+  { "file": "Arashiyama Bamboo Grove.jpg", "author": "Mitchwandrew", "license": "CC BY 4.0" },
+  { "file": "Arashiyama-Bamboo-Grove-Sunset.jpg", "author": "Bjørn Christian Tørrissen", "license": "CC BY-SA 4.0" },
+  { "file": "ArashiyamaTogetsukyo Kyoto.jpg", "author": "Kentagon", "license": "CC BY-SA 4.0" },
+  { "file": "Arnarstapi (port).jpg", "author": "Chmee2/Valtameri", "license": "CC BY 3.0" },
+  { "file": "Arnarstapi 2.jpg", "author": "Christian Bickel", "license": "CC BY-SA 2.0 de" },
+  { "file": "Arnarstapi 4.jpg", "author": "Christian Bickel", "license": "CC BY-SA 2.0 de" },
+  {
+    "file": "Averau from Fedare at Passo Giau, Belluno, Veneto, Italy, 2025 October.jpg",
+    "author": "Simo Räsänen",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Bamboo Forest, Arashiyama, Kyoto, Japan.jpg", "author": "Basile Morin", "license": "CC BY-SA 4.0" },
+  { "file": "Bamboo Grove, Arashiyama, Kyoto, Japan.jpg", "author": "Basile Morin", "license": "CC BY-SA 4.0" },
+  { "file": "Basalt Arch near Arnarstapi.jpg", "author": "Remarksman", "license": "CC BY 2.0" },
+  {
+    "file": "Basilica di Santa Maria della Salute, Venice (37770336971).jpg",
+    "author": "Dimitris Kamaras from Athens, Greece",
+    "license": "CC BY 2.0"
+  },
+  { "file": "Black Sand Beach Iceland, Reynisfjara Beach.jpg", "author": "miketnorton", "license": "CC BY 2.0" },
+  { "file": "Bubbly Diamond on the Beach - Iceland.jpg", "author": "Eric Kilby", "license": "CC BY-SA 2.0" },
+  {
+    "file": "Burano Hausfassade Wäsche-20090315-RM-113017.jpg",
+    "author": "Reinhold Möller",
+    "license": "CC BY-SA 4.0"
+  },
+  {
+    "file": "Burano Hausfassade Wäsche-20090315-RM-113043.jpg",
+    "author": "Reinhold Möller",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Burano Vendig Aug 2021 4.jpg", "author": "Kasa Fue", "license": "CC BY-SA 4.0" },
+  { "file": "Café A Brasileira. Sculpture.jpg", "author": "MFREYNAUD51", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Café de Flore, 172 boulevard Saint-Germain, Paris 6e.jpg",
+    "author": "Celette",
+    "license": "CC BY-SA 4.0"
+  },
+  {
+    "file": "Café Majestic - Porto - Portugal (53283088293).jpg",
+    "author": "Vitor Oliveira from Torres Vedras, PORTUGAL",
+    "license": "CC BY-SA 2.0"
+  },
+  { "file": "Café Sperl, Wien.jpg", "author": "Jeremy Thompson", "license": "CC BY 2.0" },
+  { "file": "Caffè San Marco-Trieste.jpg", "author": "Tiesse", "license": "Public domain" },
+  { "file": "Caffè Sant'Eustachio.JPG", "author": "LPLT", "license": "CC BY-SA 3.0" },
+  { "file": "Canale Grande in the morning light - panoramio.jpg", "author": "Schölla Schwarz", "license": "CC BY 3.0" },
+  { "file": "Cinque Torri 01.jpg", "author": "Clemens Stockner", "license": "CC BY-SA 4.0" },
+  { "file": "Cinque Torri 02.jpg", "author": "Clemens Stockner", "license": "CC BY-SA 4.0" },
+  { "file": "Cinque Torri 1.jpg", "author": "kallerna", "license": "CC BY-SA 4.0" },
+  { "file": "Cinque Torri, Dolomites - panoramio (1).jpg", "author": "Petr Kraumann", "license": "CC BY 3.0" },
+  { "file": "Cinque Torri, Dolomites - panoramio (2).jpg", "author": "Petr Kraumann", "license": "CC BY 3.0" },
+  {
+    "file": "Colourful houses in Corte della Comare, Burano (detail).jpg",
+    "author": "Marco Ober",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Croda del Becco and Rifugio Biella 202008.jpg", "author": "Marie-Lan Taÿ Pamart", "license": "CC BY 4.0" },
+  {
+    "file": "Cuernos del Paine in Torres del Paine National Park.jpg",
+    "author": "Pedro Szekely from Los Angeles, USA",
+    "license": "CC BY-SA 2.0"
+  },
+  { "file": "Dettifoss 2026 02.jpg", "author": "Syrio", "license": "CC BY-SA 4.0" },
+  { "file": "Dettifoss Panorama 01.jpg", "author": "Spike", "license": "CC BY-SA 4.0" },
+  { "file": "Dettifoss Panorama 02.jpg", "author": "Spike", "license": "CC BY-SA 4.0" },
+  { "file": "Dettifoss Panorama 03.jpg", "author": "Spike", "license": "CC BY-SA 4.0" },
+  { "file": "Dorsoduro Rio dei Carmini in Venice.jpg", "author": "Wolfgang Moroder", "license": "CC BY-SA 3.0" },
+  { "file": "Dotonbori Osaka Japan01-r.jpg", "author": "Oilstreet", "license": "CC BY 2.5" },
+  { "file": "Dotonbori, Osaka, at night, November 2016.jpg", "author": "Martin Falbisoner", "license": "CC BY-SA 4.0" },
+  { "file": "Drei Zinnen Tre Cime di Lavaredo Dolomites.jpg", "author": "Wolfgang Moroder", "license": "CC BY-SA 3.0" },
+  { "file": "Dyrholaey Arch.jpg", "author": "Eric Kilby", "license": "CC BY-SA 2.0" },
+  {
+    "file": "Dyrhólaey, seen from Reynisfjara, Iceland, 20240720 0831 2824.jpg",
+    "author": "Jakub Hałun",
+    "license": "CC BY 4.0"
+  },
+  { "file": "Eibsee und Ammergauer Alpen.jpg", "author": "Octagon", "license": "CC BY 3.0" },
+  {
+    "file": "Ëur de Bredles Secëda Odles y Sas Rigais da Resciesa.jpg",
+    "author": "Wolfgang Moroder",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Faloria Cortina d'Ampezzo 10.jpg", "author": "kallerna", "license": "CC BY-SA 4.0" },
+  { "file": "Falzarego-N.jpg", "author": "Supakon Mohr", "license": "CC BY-SA 3.0 de" },
+  { "file": "Fimmvörðuháls (1).jpg", "author": "Chmee2/Valtameri", "license": "CC BY 3.0" },
+  { "file": "Fimmvörðuháls (9).jpg", "author": "Chmee2/Valtameri", "license": "CC BY 3.0" },
+  {
+    "file": "Fimmvorduhals-emergency-hut.jpg",
+    "author": "Reen Eversdijk from Groningen, The Netherlands",
+    "license": "CC BY 2.0"
+  },
+  { "file": "Fjaðrárgljúfur 04.jpg", "author": "Syrio", "license": "CC BY-SA 4.0" },
+  { "file": "Forcella Nuvolau–Nuvolau lodge trail.jpg", "author": "Marco Ober", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Four ladies wearing a yukata in front of the North Gate of Kiyomizu-dera temple Kyoto Japan.jpg",
+    "author": "Basile Morin",
+    "license": "CC BY-SA 4.0"
+  },
+  {
+    "file": "Frea pass Sella group Pisciadu Dolomites South Tyrol.jpg",
+    "author": "Wolfgang Moroder",
+    "license": "CC BY-SA 3.0"
+  },
+  { "file": "Funivia del Lagazuoi (passo Falzarego).jpg", "author": "Ale041VE", "license": "CC BY-SA 4.0" },
+  { "file": "Gion Hanamikôji-dôri.jpg", "author": "Yanajin33", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Glacier du Mont Mallet (Glacier du Géant) & Mont Blanc, 2010 July.jpg",
+    "author": "Ximonic, Simo Räsänen",
+    "license": "CC BY-SA 3.0"
+  },
+  { "file": "Godafoss 2.jpg", "author": "Tord Dellsen", "license": "CC0" },
+  { "file": "Godafoss 3.jpg", "author": "Tord Dellsen", "license": "CC0" },
+  { "file": "Godafoss 4.jpg", "author": "Tord Dellsen", "license": "CC0" },
+  { "file": "Goðafoss Island.jpg", "author": "Superbass", "license": "CC BY-SA 3.0" },
+  {
+    "file": "Gondola Guido Lorenzi - Son Forca Cristallo Italy - panoramio.jpg",
+    "author": "Hiroki Ogawa",
+    "license": "CC BY 3.0"
+  },
+  { "file": "GR20 Corsica Montains-2.jpg", "author": "Hermes from mars", "license": "CC BY-SA 3.0" },
+  {
+    "file": "Grand Canal Santa Maria della Salute Vaporetto Gondola Venice 01.jpg",
+    "author": "Julian Herzog",
+    "license": "CC BY 4.0"
+  },
+  {
+    "file": "Gullfoss, Suðurland, Islandia, 2014-08-16, DD 119.JPG",
+    "author": "Diego Delso",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Hallgrímskirkja 1.jpg", "author": "Dmitry Brant", "license": "CC BY-SA 4.0" },
+  { "file": "Heinabergsjökull (38322450122).jpg", "author": "Markus Trienke", "license": "CC BY-SA 2.0" },
+  { "file": "Hverfjall July 2014.JPG", "author": "Martin Falbisoner", "license": "CC BY-SA 4.0" },
+  { "file": "Hverir Námaskarð.jpg", "author": "JavierOlivares", "license": "CC BY-SA 4.0" },
+  { "file": "Iceland Dettifoss 1972-4.jpg", "author": "Roger McLassus", "license": "CC BY-SA 3.0" },
+  { "file": "Iceland Godafoss 1972.jpg", "author": "Roger McLassus", "license": "CC BY-SA 3.0" },
+  { "file": "Il Sentiero degli dei.jpg", "author": "Stiflele", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Illusion, Burano Island. (39893205060).jpg",
+    "author": "Mihai Lucîț from Baia Mare, Romania",
+    "license": "CC BY 2.0"
+  },
+  { "file": "Islanda- Þórsmörk.jpg", "author": "Mario Falcetti", "license": "CC BY 4.0" },
+  {
+    "file": "Jökulsárlón glacier lagoon, Iceland, 20240719 0935 2448.jpg",
+    "author": "Jakub Hałun",
+    "license": "CC BY 4.0"
+  },
+  {
+    "file": "Jökulsárlón glacier lagoon, Iceland, 20240719 0936 2452.jpg",
+    "author": "Jakub Hałun",
+    "license": "CC BY 4.0"
+  },
+  {
+    "file": "Jökulsárlón glacier lagoon, Iceland, 20240719 0937 2454.jpg",
+    "author": "Jakub Hałun",
+    "license": "CC BY 4.0"
+  },
+  {
+    "file": "Jökulsárlón glacier lagoon, Iceland, 20240719 0947 2477.jpg",
+    "author": "Jakub Hałun",
+    "license": "CC BY 4.0"
+  },
+  {
+    "file": "Kansai Airport (2660200665).jpg",
+    "author": "Kentaro Iemoto from Tokyo, Japan",
+    "license": "CC BY-SA 2.0"
+  },
+  { "file": "Kinkaku-ji in November 2016 -02.jpg", "author": "Martin Falbisoner", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Kinkaku-ji the Golden Temple in Kyoto overlooking the lake - high rez.JPG",
+    "author": "Jaycangel",
+    "license": "CC BY-SA 3.0"
+  },
+  { "file": "Kirkjufell in Fog (Unsplash).jpg", "author": "Nicholas Kampouris", "license": "CC0" },
+  { "file": "Kirkjufell with its reflection.jpg", "author": "_大面", "license": "CC BY 2.5" },
+  { "file": "Kirkjufell, Iceland (Unsplash LoKG7kKx7Zc).jpg", "author": "Steven Diaz", "license": "CC0" },
+  {
+    "file": "Kirkjufell, Vesturland, Islandia, 2014-08-14, DD 091.JPG",
+    "author": "Diego Delso",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Kiyomizu-dera, Kyoto, November 2016 -01.jpg", "author": "Martin Falbisoner", "license": "CC BY-SA 4.0" },
+  { "file": "Kiyomizu-dera, Kyoto, November 2016 -02.jpg", "author": "Martin Falbisoner", "license": "CC BY-SA 4.0" },
+  { "file": "Kiyomizu-dera, Kyoto, November 2016 -03.jpg", "author": "Martin Falbisoner", "license": "CC BY-SA 4.0" },
+  { "file": "Kiyomizu-dera, Kyoto, November 2016 -06.jpg", "author": "Martin Falbisoner", "license": "CC BY-SA 4.0" },
+  { "file": "Kiyomizu-dera, Kyoto, November 2016 -07.jpg", "author": "Martin Falbisoner", "license": "CC BY-SA 4.0" },
+  { "file": "KyotoFushimiInariLarge.jpg", "author": "Paul Vlaar", "license": "CC BY-SA 3.0" },
+  { "file": "Lagazuoi 05.jpg", "author": "Clemens Stockner", "license": "CC BY-SA 4.0" },
+  { "file": "Lago alla base di Svínafellsjökull 01.jpg", "author": "Syrio", "license": "CC BY-SA 4.0" },
+  { "file": "Lago alla base di Svínafellsjökull 02.jpg", "author": "Syrio", "license": "CC BY-SA 4.0" },
+  { "file": "Lago di Braies South Tyrol 3.jpg", "author": "kallerna", "license": "CC BY-SA 4.0" },
+  { "file": "Lago di Braies South Tyrol 5.jpg", "author": "kallerna", "license": "CC BY-SA 4.0" },
+  { "file": "Lago di Braies South Tyrol 6.jpg", "author": "kallerna", "license": "CC BY-SA 4.0" },
+  { "file": "Lago di Braies South Tyrol 7.jpg", "author": "kallerna", "license": "CC BY-SA 4.0" },
+  { "file": "Lago di Braies South Tyrol 9.jpg", "author": "kallerna", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Lago di Limo, Parco Naturale Fanes - Sennes - Braies (BZ).jpg",
+    "author": "53cri021",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Lagoa Rasa (Sete Cidades) 2.jpg", "author": "Walmaul", "license": "CC BY-SA 4.0" },
+  { "file": "Lake Ashi & Mt Fuji & Hakone Shrine.jpg", "author": "Charlie fong", "license": "CC BY-SA 4.0" },
+  { "file": "Landmannalaugar in summer 2009 (13).jpg", "author": "Chmee2/Valtameri", "license": "CC BY 3.0" },
+  {
+    "file": "Manarola NW Cemetery Corniglia Monterosso Cinque Terre Sep23 A7C 06872.jpg",
+    "author": "Timothy A. Gonsalves",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Meiji Jingu Shrine Tokyo Japan.jpg", "author": "MediaByPanda", "license": "CC BY-SA 4.0" },
+  { "file": "Meiji shrine in August 2007 5.jpg", "author": "Syced", "license": "CC0" },
+  { "file": "Meiji Shrine, Tokyo; April 2009 (02).jpg", "author": "MIKI Yoshihito", "license": "CC BY 2.0" },
+  {
+    "file": "Meiji-jingū main hall vue centrale.jpg",
+    "author": "Hyppolyte de Saint-Rambert",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Meiji-jingu-pathway.jpg", "author": "Nightcrafter", "license": "CC BY-SA 4.0" },
+  { "file": "Monte Kirkjufell (Luglio 2024).jpg", "author": "Paolova97", "license": "CC BY-SA 4.0" },
+  { "file": "Morning light in Venice (33726527456).jpg", "author": "Hervé Simon", "license": "CC BY-SA 2.0" },
+  { "file": "Mount Fuji and Shinkansen N700.jpg", "author": "Alpsdake", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Mount Myojingatake and Owakudani Station from Owakudani Valley.JPG",
+    "author": "そらみみ",
+    "license": "CC BY-SA 3.0"
+  },
+  { "file": "Mount-Fuji from Tokaido Shinkansen window view.jpg", "author": "Indiana jo", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Mountain and grotto at Reynisfjara Beach in July, 2019.jpg",
+    "author": "Alexander Grebenkov",
+    "license": "CC BY 3.0"
+  },
+  { "file": "Múlafossur2.jpg", "author": "Ekrem Canli", "license": "CC BY-SA 4.0" },
+  { "file": "Neon Signs in Dotonbori, Osaka 20190415 1.jpg", "author": "DXR", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Neunerspitze, 2968 m und Zehnerspitze 3016 m.jpg",
+    "author": "2015 Michael 2015",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "NeunerZehnerFanes.JPG", "author": "Alex1011", "license": "CC BY 2.5" },
+  { "file": "Nishiki ichiba kyoto.jpg", "author": "Pitan", "license": "CC BY-SA 3.0" },
+  { "file": "Old Tokaido - Hakone.jpg", "author": "Quercus acuta", "license": "CC BY-SA 4.0" },
+  { "file": "Old Tokaido -01.jpg", "author": "Aimaimyi", "license": "CC BY-SA 3.0" },
+  { "file": "On the hillside above Ginkaku-ji (2099332601).jpg", "author": "KimonBerlin", "license": "CC BY-SA 2.0" },
+  { "file": "Osaka Dotonbori Canal.jpg", "author": "32linesky", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Owakudani Valley and Mount Kammurigatake near Owakudani Station 1.JPG",
+    "author": "そらみみ",
+    "license": "CC BY-SA 3.0"
+  },
+  {
+    "file": "Owakudani Valley and Mount Kammurigatake near Owakudani Station 2.JPG",
+    "author": "そらみみ",
+    "license": "CC BY-SA 3.0"
+  },
+  { "file": "Owakudani Valley near Owakudani Station 2.JPG", "author": "そらみみ", "license": "CC BY-SA 3.0" },
+  { "file": "Owakudani Valley near Owakudani Station.JPG", "author": "そらみみ", "license": "CC BY-SA 3.0" },
+  { "file": "Palazzo Balbi (Venice).jpg", "author": "Didier Descouens", "license": "CC BY-SA 3.0" },
+  {
+    "file": "Palazzo dei Camerlenghi e Ponte Rialto a Venezia.jpg",
+    "author": "Wolfgang Moroder",
+    "license": "CC BY-SA 3.0"
+  },
+  {
+    "file": "Panorama of Canal Grande and Ponte di Rialto, Venice - September 2017.jpg",
+    "author": "Martin Falbisoner",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Passo di Giau.jpg", "author": "Frisia Orientalis", "license": "CC BY-SA 3.0" },
+  { "file": "Passo Giau SP638.jpg", "author": "kallerna", "license": "CC BY-SA 4.0" },
+  { "file": "Photos at teamlab planets tokyo.jpg", "author": "Sasa0403", "license": "CC BY-SA 4.0" },
+  { "file": "Ponte di Rialto facciata ovest di sera.jpg", "author": "Wolfgang Moroder", "license": "CC BY-SA 3.0" },
+  { "file": "Ponte di Rialto Venice 1.jpg", "author": "kallerna", "license": "CC BY-SA 4.0" },
+  { "file": "Pontile Zattere (Venezia).jpg", "author": "Didier Descouens", "license": "CC BY-SA 4.0" },
+  { "file": "Preikestolen Norge.jpg", "author": "Stefan Krause, Germany", "license": "CC BY-SA 3.0" },
+  { "file": "Ra Gusela, view from Passo Giau.jpg", "author": "Marco Ober", "license": "CC BY-SA 4.0" },
+  { "file": "Reine i Lofoten LC0148.jpg", "author": "Jörg Hempel", "license": "CC BY-SA 2.0 de" },
+  {
+    "file": "Reynisfjara Black Sand Beach Iceland Travel Photography (210387065).jpeg",
+    "author": "Giuseppe Milo",
+    "license": "CC BY 3.0"
+  },
+  {
+    "file": "Reynisfjara, Suðurland, Islandia, 2014-08-17, DD 164.JPG",
+    "author": "Diego Delso",
+    "license": "CC BY-SA 4.0"
+  },
+  {
+    "file": "Reyniskirkja Church,Vík í Mýrdal, Suðurland,Ísland.jpg",
+    "author": "JavierOlivares",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Rifugio Fanes 01.JPG", "author": "Bbruno", "license": "CC BY-SA 3.0" },
+  { "file": "Rifugio Fanes.jpg", "author": "Llorenzi", "license": "CC BY-SA 3.0" },
+  { "file": "Rigi Kulm cross 20210905.jpg", "author": "Daniel Kraft", "license": "CC BY-SA 3.0" },
+  {
+    "file": "Roca de la Ley, Parque Nacional de Þingvellir, Suðurland, Islandia, 2014-08-16, DD 022.JPG",
+    "author": "Diego Delso",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Salzwelten vantage point.jpg", "author": "Grandmaster Huon", "license": "CC0" },
+  { "file": "San Marco cathedral in Venice.JPG", "author": "Petar Milosevic", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Santa Maria della Salute from Hotel Monaco nightview.jpg",
+    "author": "Wolfgang Moroder",
+    "license": "CC BY-SA 3.0"
+  },
+  { "file": "Santa Maria della Salute from Hotel Monaco.jpg", "author": "Wolfgang Moroder", "license": "CC BY-SA 3.0" },
+  { "file": "Seljalandsfoss - panoramio (7).jpg", "author": "Zoran Kurelić Rabko", "license": "CC BY-SA 3.0" },
+  { "file": "Seljalandsfoss and Gljúfrabúi, July 2019.jpg", "author": "Alexander Grebenkov", "license": "CC BY 3.0" },
+  { "file": "Seljalandsfoss July 2014 -1.JPG", "author": "Martin Falbisoner", "license": "CC BY-SA 4.0" },
+  { "file": "Seljalandsfoss view from side, July 2019.jpg", "author": "Alexander Grebenkov", "license": "CC BY 3.0" },
+  {
+    "file": "Seljalandsfoss, Suðurland, Islandia, 2014-08-16, DD 189-191 HDR.JPG",
+    "author": "Diego Delso",
+    "license": "CC BY-SA 4.0"
+  },
+  {
+    "file": "Senso-ji Temple @ Asakusa (13824517393).jpg",
+    "author": "Guilhem Vellut from Annecy, France",
+    "license": "CC BY 2.0"
+  },
+  {
+    "file": "Senso-ji Temple @ Asakusa (13824525803).jpg",
+    "author": "Guilhem Vellut from Annecy, France",
+    "license": "CC BY 2.0"
+  },
+  {
+    "file": "Senso-ji Temple @ Asakusa (13824839284).jpg",
+    "author": "Guilhem Vellut from Annecy, France",
+    "license": "CC BY 2.0"
+  },
+  {
+    "file": "Senso-ji Temple @ Asakusa (14019477806).jpg",
+    "author": "Guilhem Vellut from Annecy, France",
+    "license": "CC BY 2.0"
+  },
+  { "file": "Seyðisfjörður church 1.jpg", "author": "Saifunny", "license": "CC BY-SA 4.0" },
+  { "file": "Seyðisfjörður Sept 2019 1.jpg", "author": "Kasa Fue", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Seydisfjordur, East Iceland (51440969579).jpg",
+    "author": "Fabio Achilli from Milano, Italy",
+    "license": "CC BY 2.0"
+  },
+  {
+    "file": "Seydisfjordur, East Iceland (51441184230).jpg",
+    "author": "Fabio Achilli from Milano, Italy",
+    "license": "CC BY 2.0"
+  },
+  { "file": "Seyðisfjörður, Iceland (28328269217).jpg", "author": "Joe deSousa", "license": "CC0" },
+  {
+    "file": "Shadows and windows at Hallgrimskirkja Reykjavik Iceland 2026-02-07 21-21-01 1.jpg",
+    "author": "G. Edward Johnson",
+    "license": "CC BY 4.0"
+  },
+  {
+    "file": "Shariden, Kinkaku-ji, Kyoto, East View 20130811 1.jpg",
+    "author": "DXR / Daniel Vorndran",
+    "license": "CC BY-SA 3.0"
+  },
+  { "file": "Shinjuku-West Omoide-Yokocho.jpg", "author": "MaedaAkihiko", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Shinkansen N700S series photographed at Higashi-Tagonoura with Mount Fuji in the background, 10 April 2023.jpg",
+    "author": "Takeshi Aida",
+    "license": "CC BY-SA 2.0"
+  },
+  { "file": "Skogafoss-02-2018-gje.jpg", "author": "Gerd Eichmann", "license": "CC BY-SA 4.0" },
+  { "file": "Sky Lagoon Cold Plunge.jpg", "author": "Laurenmcl", "license": "CC BY-SA 4.0" },
+  { "file": "Soca River Valley, Slovenia.jpg", "author": "Barry", "license": "CC BY 2.0" },
+  {
+    "file": "Start of the Old Hakone Highway (9412055176).jpg",
+    "author": "Maarten Heerlien from Voorschoten, The Netherlands",
+    "license": "CC BY 2.0"
+  },
+  {
+    "file": "Strokkur, Área geotérmica de Geysir, Suðurland, Islandia, 2014-08-16, DD 086.JPG",
+    "author": "Diego Delso",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Svínafellsjökull 01.jpg", "author": "Syrio", "license": "CC BY-SA 4.0" },
+  { "file": "Svínafellsjökull glacier at sunset.jpg", "author": "Mikołaj Bańka", "license": "CC BY 4.0" },
+  { "file": "Svínafellsjökull.JPG", "author": "Bromr at Dutch Wikipedia", "license": "CC BY-SA 3.0" },
+  {
+    "file": "Taroko-Gorge Hualien Taiwan Pudu-Bridge-at-Taroko-National-Park-01.jpg",
+    "author": "CEphoto, Uwe Aranas",
+    "license": "CC BY-SA 3.0"
+  },
+  {
+    "file": "The Lava Fields Of Þórsmörk Iceland (175491845).jpeg",
+    "author": "Ilya Grigorik",
+    "license": "CC BY-SA 3.0"
+  },
+  { "file": "The park bench (2669222928).jpg", "author": "Rosino", "license": "CC BY-SA 2.0" },
+  {
+    "file": "The West Highland Way approaching the Heads of Glen Etive and Glen Coe - geograph.org.uk - 5014659.jpg",
+    "author": "Tim Heaton",
+    "license": "CC BY-SA 2.0"
+  },
+  { "file": "Tokyo Shibuya Scramble Crossing 2018-10-09.jpg", "author": "Benh LIEU SONG", "license": "CC BY-SA 2.0" },
+  {
+    "file": "Torii on Lake Ashi @ Hakone Shrine (13776878594).jpg",
+    "author": "Guilhem Vellut from Annecy, France",
+    "license": "CC BY 2.0"
+  },
+  {
+    "file": "Torii on Lake Ashi @ Hakone Shrine (13776879364).jpg",
+    "author": "Guilhem Vellut from Annecy, France",
+    "license": "CC BY 2.0"
+  },
+  {
+    "file": "Torii path with lantern at Fushimi Inari Taisha Shrine, Kyoto, Japan.jpg",
+    "author": "Basile Morin",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Trolltunga 2.jpg", "author": "Steinar Talmoen", "license": "CC BY-SA 3.0" },
+  { "file": "Tsukiji Outer Market -04.jpg", "author": "Aimaimyi", "license": "CC BY-SA 3.0" },
+  { "file": "Tsukiji Outer Market -05.jpg", "author": "Aimaimyi", "license": "CC BY-SA 3.0" },
+  { "file": "Tsukiji Outer Market -06.jpg", "author": "Aimaimyi", "license": "CC BY-SA 3.0" },
+  { "file": "Tsukiji Outer Market 2.jpg", "author": "Aw1805", "license": "CC BY-SA 3.0" },
+  { "file": "Ushguli Svaneti Georgia.JPG", "author": "Florian Pinel", "license": "CC BY-SA 3.0" },
+  { "file": "Vaporetto grand canal venice.jpg", "author": "John Salatas", "license": "CC BY-SA 4.0" },
+  { "file": "Vaporetto, Grand Canal, Venice.jpg", "author": "Peter K Burian", "license": "CC BY-SA 4.0" },
+  { "file": "Venice, Canal Grande, Dorsoduro, Plzo Balbi.jpg", "author": "Armin Kleiner", "license": "CC BY-SA 4.0" },
+  { "file": "Venice, Italy. Morning light.jpg", "author": "Dupont66", "license": "CC BY 4.0" },
+  { "file": "Via ferrata Ivano Dibona - panoramio (1).jpg", "author": "Pavel Špindler", "license": "CC BY 3.0" },
+  { "file": "Via ferrata Ivano Dibona - panoramio (2).jpg", "author": "Pavel Špindler", "license": "CC BY 3.0" },
+  { "file": "Via Ferrato Ivano Dibona 3.jpg", "author": "Schi11", "license": "CC BY-SA 4.0" },
+  { "file": "View from Miradouro do Pico do Arieiro - Madeira 05.jpg", "author": "H. Zell", "license": "CC BY-SA 3.0" },
+  { "file": "Vire via ferrata Ivano Dibona.jpg", "author": "Evelyne Chassagneux-Bonini", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Water reflection of Kinkaku-ji Temple a sunny day, Kyoto, Japan.jpg",
+    "author": "Basile Morin",
+    "license": "CC BY-SA 4.0"
+  },
+  {
+    "file": "Water reflection of Kinkaku-ji Temple with blue sky and white clouds, Kyoto, Japan.jpg",
+    "author": "Basile Morin",
+    "license": "CC BY-SA 4.0"
+  },
+  { "file": "Water transport in Venice at Rialto bridge.jpg", "author": "Wolfgang Moroder", "license": "CC BY-SA 3.0" },
+  { "file": "Waterfalls of Iceland 23 02.jpg", "author": "Hornstrandir1", "license": "CC BY-SA 4.0" },
+  { "file": "Wengental 2019-10-18.jpg", "author": "2015 Michael 2015", "license": "CC BY-SA 4.0" },
+  { "file": "Wien, Café Central -- 2018 -- 3135.jpg", "author": "Dietmar Rabich", "license": "CC BY-SA 4.0" },
+  { "file": "Yanaka Ginza 2.jpg", "author": "Christophe95", "license": "CC BY-SA 4.0" },
+  {
+    "file": "Yanaka Ginza shopping street (4041690725).jpg",
+    "author": "Yoshikazu TAKADA from Tokyo, Japan",
+    "license": "CC BY 2.0"
+  },
+  { "file": "Yanaka ginza street.jpg", "author": "Kentin", "license": "CC BY-SA 3.0" },
+  { "file": "Yanaka Ginza, Tokyo, Japan (6790100548).jpg", "author": "yeowatzup", "license": "CC BY 2.0" },
+  { "file": "Þingvellir, Almannagjá 01.jpg", "author": "Syrio", "license": "CC BY-SA 4.0" },
+  { "file": "Þingvellir, Almannagjá 07.jpg", "author": "Syrio", "license": "CC BY-SA 4.0" },
+  { "file": "関西国際空港全体写真20220811.jpg", "author": "Ankou1192", "license": "CC BY-SA 4.0" }
+]
@@ -0,0 +1,35 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { buildUser } from '../../../tests/helpers/factories';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useAuthStore } from '../../store/authStore';
+import { useDemoAccountLock } from './useDemoLock';
+
+beforeEach(() => resetAllStores());
+
+describe('useDemoAccountLock', () => {
+  it('FE-HOOK-DEMOLOCK-001: locks the demo account on a demo instance', () => {
+    seedStore(useAuthStore, { demoMode: true, user: buildUser({ email: 'demo@trek.app' }) });
+    expect(renderHook(() => useDemoAccountLock()).result.current).toBe(true);
+  });
+
+  it('FE-HOOK-DEMOLOCK-002: knows the address the demo account had before the rename', () => {
+    seedStore(useAuthStore, { demoMode: true, user: buildUser({ email: 'demo@nomad.app' }) });
+    expect(renderHook(() => useDemoAccountLock()).result.current).toBe(true);
+  });
+
+  it('FE-HOOK-DEMOLOCK-003: leaves the admin of a demo instance alone', () => {
+    seedStore(useAuthStore, { demoMode: true, user: buildUser({ email: 'admin@trek.app', role: 'admin' }) });
+    expect(renderHook(() => useDemoAccountLock()).result.current).toBe(false);
+  });
+
+  it('FE-HOOK-DEMOLOCK-004: leaves the demo address alone on an instance that is not a demo', () => {
+    seedStore(useAuthStore, { demoMode: false, user: buildUser({ email: 'demo@trek.app' }) });
+    expect(renderHook(() => useDemoAccountLock()).result.current).toBe(false);
+  });
+
+  it('FE-HOOK-DEMOLOCK-005: is off while nobody is signed in', () => {
+    seedStore(useAuthStore, { demoMode: true, user: null });
+    expect(renderHook(() => useDemoAccountLock()).result.current).toBe(false);
+  });
+});
@@ -0,0 +1,16 @@
+import { isDemoAccountEmail } from '@trek/shared';
+import { useAuthStore } from '../../store/authStore';
+
+/**
+ * Whether the account signed in here is the shared demo account of a demo
+ * instance. Every visitor signs in as that one account, so its Account tab,
+ * API keys, MCP configuration, own AI connection and language sit under a
+ * DemoLock; the server refuses the same writes (`demo-write.ts`). The admin
+ * of a demo instance, and every account of a real one, see the sections as
+ * they are.
+ */
+export function useDemoAccountLock(): boolean {
+  const demoMode = useAuthStore((s) => s.demoMode);
+  const email = useAuthStore((s) => s.user?.email);
+  return demoMode && isDemoAccountEmail(email);
+}
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { useAuthStore } from '../../store/authStore';
+import { formatCountdown, secondsUntilReset } from './demoWelcomeModel';
+
+/**
+ * Whether the photo credits have the dialog: not yet, now, or no longer
+ * (the visitor came back from them, and the focus returns to their link).
+ */
+type CreditsView = 'unseen' | 'open' | 'left';
+
+/**
+ * The welcome dialog's state: whether it is still open, whether it shows the
+ * photo credits in place of the welcome, and the live countdown to the next
+ * hourly reset, ticking once a second in the server's time zone.
+ */
+export function useDemoWelcome() {
+  const timeZone = useAuthStore((s) => s.serverTimezone);
+  const [open, setOpen] = useState(true);
+  const [credits, setCredits] = useState<CreditsView>('unseen');
+  const [secondsLeft, setSecondsLeft] = useState(() => secondsUntilReset(new Date(), timeZone));
+
+  useEffect(() => {
+    if (!open) return;
+    const timer = setInterval(() => setSecondsLeft(secondsUntilReset(new Date(), timeZone)), 1000);
+    return () => clearInterval(timer);
+  }, [open, timeZone]);
+
+  return {
+    open,
+    close: () => setOpen(false),
+    countdown: formatCountdown(secondsLeft),
+    creditsOpen: credits === 'open',
+    backFromCredits: credits === 'left',
+    openCredits: () => setCredits('open'),
+    closeCredits: () => setCredits('left'),
+  };
+}
@@ -7,7 +7,7 @@ import CustomSelect from '../../shared/CustomSelect'
 import ToggleSwitch from '../../Settings/ToggleSwitch'
 import Tooltip from '../../shared/Tooltip'
 import { useTranslation } from '../../../i18n/TranslationContext'
-import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/documentProviderIconMap'
 import DocSyncFlow, { type SyncDirection } from './DocSyncFlow'
 import { Badge, CONFLICT_POLICIES, conflictPolicyKey, LastRun, StateBadge } from './DocSyncBits'
 import { bindingNotice, needsReauth, type DocSyncLink, type useDocSync } from './useDocSync'
@@ -6,7 +6,7 @@ import ToggleSwitch from '../../Settings/ToggleSwitch'
 import { useTranslation } from '../../../i18n/TranslationContext'
 import { useConnectForm } from './useConnectForm'
 import { Badge } from './DocSyncBits'
-import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/documentProviderIconMap'
 import type { DocSyncProvider, DocSyncVerdict, useDocSync } from './useDocSync'

 /**
@@ -1,6 +1,6 @@
 import { ArrowLeft, ArrowRight } from 'lucide-react'
 import { useTranslation } from '../../../i18n/TranslationContext'
-import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/documentProviderIconMap'
 import TrekIcon from '../../shared/TrekIcon'
 import { Badge } from './DocSyncBits'
 import { toggledDirection, type SyncDirection } from './docSyncModel'
@@ -2,7 +2,7 @@ import { useEffect, useId, useMemo, useState } from 'react'
 import { AlertCircle, ArrowRight, Check, FolderSync, Loader2, Plus } from 'lucide-react'
 import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT } from '../../shared/DialogShell'
 import { useTranslation } from '../../../i18n/TranslationContext'
-import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/documentProviderIconMap'
 import { StateBadge } from './DocSyncBits'
 import { slugFor } from './docSyncModel'
 import { useConflicts } from './useConflicts'
@@ -5,6 +5,7 @@ import ErrorBoundary from '../shared/ErrorBoundary'
 import type { JourneyMapGLHandle } from './JourneyMapGL'

 import { JourneyMapGLMapbox, JourneyMapGLMaplibre } from '../Map/glLazy'
+import { useGlRenderer } from '../Map/glSupport'
 import type { JourneyTrack } from '@trek/shared'
 import type { MapPhoto } from './journeyPhotoLayer'
 import type { JourneyMapLayerVisibility } from './journeyMapLayers'
@@ -56,10 +57,11 @@ function JourneyMapAuto({ ref, ...props }: Props) {
  const leafletRef = useRef<JourneyMapHandle>(null)
  const glRef = useRef<JourneyMapGLHandle>(null)

-  // Fall back to Leaflet when the user selected Mapbox GL but hasn't
-  // supplied a token yet. MapLibre/OpenFreeMap is tokenless.
-  const useGL = provider === 'maplibre-gl' || (provider === 'mapbox-gl' && !!token)
-  const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl' : 'mapbox-gl'
+  // Fall back to Leaflet when the user selected Mapbox GL but hasn't supplied a
+  // token yet (MapLibre/OpenFreeMap is tokenless), or when the browser has no WebGL2.
+  const glRenderer = useGlRenderer(provider, token)
+  const useGL = glRenderer !== null
+  const glProvider = glRenderer ?? 'mapbox-gl'

  useImperativeHandle(ref, () => ({
    highlightMarker: (id) => (useGL ? glRef.current : leafletRef.current)?.highlightMarker(id),
@@ -107,7 +107,8 @@ const glModule = vi.hoisted(() => () => ({
 }))

 vi.mock('mapbox-gl', glModule)
-vi.mock('maplibre-gl', glModule)
+// maplibre-gl 6 has no default export: the same fakes, as named exports.
+vi.mock('maplibre-gl', () => glModule().default)
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}))
 vi.mock('maplibre-gl/dist/maplibre-gl.css', () => ({}))

@@ -121,7 +122,7 @@ vi.mock('../Map/mapboxSetup', () => ({

 import React from 'react'
 import mapboxgl from 'mapbox-gl'
-import maplibregl from 'maplibre-gl'
+import * as maplibregl from 'maplibre-gl'
 import { render, screen, act } from '../../../tests/helpers/render'
 import { resetAllStores, seedStore } from '../../../tests/helpers/store'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -3,6 +3,7 @@ import type mapboxgl from 'mapbox-gl'
 import { useSettingsStore } from '../../store/settingsStore'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
 import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from '../Map/glProviders'
+import { buildGlMap } from '../Map/glSupport'
 import type { JourneyTrack } from '@trek/shared'
 import { SHOT_INDEX_ATTR, ensureJourneyPopupStyle, formatMarkerDate, journeyPopupHtml } from './journeyMapPopup'
 import { clusterPhotos, photoMarkerHtml, type MapPhoto } from './journeyPhotoLayer'
@@ -360,11 +361,13 @@ function JourneyMapGL(
      antialias: mapboxQuality,
    }
    if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
-    // MapLibre 5's around-center mouse rotate ping-pongs near mid-screen (#1545)
+    // MapLibre's around-center mouse rotate ping-pongs near mid-screen (#1545)
    // — see MapViewGL. Keep the plain dx-based rotate everywhere.
    if (isMapLibre) mapOptions.aroundCenter = false

-    const map = new gl.Map(mapOptions as any)
+    // Null when the GPU refused WebGL2: JourneyMapAuto has switched to Leaflet by then.
+    const map = buildGlMap(() => new gl.Map(mapOptions as any))
+    if (!map) return
    mapRef.current = map
    marksFramedRef.current = false
    entryPointsRef.current = [...items.map(i => [i.lng, i.lat] as [number, number]), ...stableTrail.map(p => [p.lng, p.lat] as [number, number])]
@@ -1,116 +0,0 @@
-import { act, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen } from '../../../tests/helpers/render';
-import DemoBanner from './DemoBanner';
-
-describe('DemoBanner', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  // FE-COMP-DEMOBANNER-001
-  it('renders without crashing', () => {
-    render(<DemoBanner />);
-    expect(document.body).toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-002
-  it('overlay is visible on initial render with dismiss button', () => {
-    render(<DemoBanner />);
-    expect(screen.getByText('Got it')).toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-003
-  it('shows English welcome title by default', () => {
-    render(<DemoBanner />);
-    expect(screen.getByText(/Welcome to/i)).toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-004
-  it('clicking "Got it" dismisses the banner', async () => {
-    const user = userEvent.setup();
-    render(<DemoBanner />);
-    const button = screen.getByText('Got it');
-    await user.click(button);
-    expect(screen.queryByText('Got it')).not.toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-005
-  it('clicking the overlay backdrop dismisses the banner', () => {
-    const { container } = render(<DemoBanner />);
-    // The outermost fixed div is the overlay backdrop
-    const overlay = container.firstChild as HTMLElement;
-    fireEvent.click(overlay);
-    expect(screen.queryByText('Got it')).not.toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-006
-  it('clicking the inner card does NOT dismiss', async () => {
-    const user = userEvent.setup();
-    render(<DemoBanner />);
-    // The inner card is the direct parent of the "Got it" button's container
-    const card = screen.getByText('Got it').closest('div[style*="background: white"]')!;
-    await user.click(card);
-    expect(screen.getByText('Got it')).toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-007
-  it('shows reset timer', () => {
-    render(<DemoBanner />);
-    expect(screen.getByText(/Next reset in/i)).toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-008
-  it('shows upload-disabled notice', () => {
-    render(<DemoBanner />);
-    expect(screen.getByText(/File uploads.*disabled in demo/i)).toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-009
-  it('shows "What is TREK?" section', () => {
-    render(<DemoBanner />);
-    expect(screen.getByText('What is TREK?')).toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-010
-  it('shows addon cards', () => {
-    render(<DemoBanner />);
-    expect(screen.getByText('Vacay')).toBeInTheDocument();
-    expect(screen.getByText('Atlas')).toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-011
-  it('shows full version features section', () => {
-    render(<DemoBanner />);
-    expect(screen.getByText(/Additionally in the full version/i)).toBeInTheDocument();
-  });
-
-  // FE-COMP-DEMOBANNER-012
-  it('self-host link points to GitHub', () => {
-    render(<DemoBanner />);
-    const link = screen.getByText('self-host it').closest('a')!;
-    expect(link).toHaveAttribute('href', 'https://github.com/liketrek/TREK');
-    expect(link).toHaveAttribute('target', '_blank');
-  });
-
-  // Timer update test
-  it('updates countdown timer after interval tick', async () => {
-    vi.useFakeTimers({ shouldAdvanceTime: false });
-    // Set time to XX:30 so minutesLeft = 59 - 30 = 29
-    vi.setSystemTime(new Date(2026, 3, 7, 12, 30, 0));
-    render(<DemoBanner />);
-    expect(screen.getByText(/29 minutes/)).toBeInTheDocument();
-
-    // Advance to XX:31 and tick the interval; wrap in act so React flushes state update
-    await act(async () => {
-      vi.setSystemTime(new Date(2026, 3, 7, 12, 31, 0));
-      vi.advanceTimersByTime(10000);
-    });
-    expect(screen.getByText(/28 minutes/)).toBeInTheDocument();
-  });
-});
@@ -1,613 +0,0 @@
-import {
-  ArrowRightLeft,
-  CalendarDays,
-  Clock,
-  Database,
-  FileText,
-  Github,
-  Globe,
-  Key,
-  ListChecks,
-  Map,
-  Puzzle,
-  Shield,
-  Upload,
-  Users,
-  Wallet,
-} from 'lucide-react';
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from '../../i18n';
-
-interface DemoTexts {
-  titleBefore: string;
-  titleAfter: string;
-  title: string;
-  description: string;
-  resetIn: string;
-  minutes: string;
-  uploadNote: string;
-  fullVersionTitle: string;
-  features: string[];
-  addonsTitle: string;
-  addons: [string, string][];
-  whatIs: string;
-  whatIsDesc: string;
-  selfHost: string;
-  selfHostLink: string;
-  close: string;
-}
-
-const texts: Record<string, DemoTexts> = {
-  de: {
-    titleBefore: 'Willkommen bei ',
-    titleAfter: '',
-    title: 'Willkommen zur TREK Demo',
-    description:
-      'Du kannst Reisen ansehen, bearbeiten und eigene erstellen. Alle Aenderungen werden jede Stunde automatisch zurueckgesetzt.',
-    resetIn: 'Naechster Reset in',
-    minutes: 'Minuten',
-    uploadNote: 'Datei-Uploads (Fotos, Dokumente, Cover) sind in der Demo deaktiviert.',
-    fullVersionTitle: 'In der Vollversion zusaetzlich:',
-    features: [
-      'Datei-Uploads (Fotos, Dokumente, Cover)',
-      'API-Schluessel (Google Maps, Wetter)',
-      'Benutzer- & Rechteverwaltung',
-      'Automatische Backups',
-      'Addon-Verwaltung (aktivieren/deaktivieren)',
-      'OIDC / SSO Single Sign-On',
-    ],
-    addonsTitle: 'Modulare Addons (in der Vollversion deaktivierbar)',
-    addons: [
-      ['Vacay', 'Urlaubsplaner mit Kalender, Feiertagen & Fusion'],
-      ['Atlas', 'Weltkarte mit besuchten Laendern & Reisestatistiken'],
-      ['Packliste', 'Checklisten pro Reise'],
-      ['Budget', 'Kostenplanung mit Splitting'],
-      ['Dokumente', 'Dateien an Reisen anhaengen'],
-      ['Widgets', 'Waehrungsrechner & Zeitzonen'],
-    ],
-    whatIs: 'Was ist TREK?',
-    whatIsDesc:
-      'Ein selbst-gehosteter Reiseplaner mit Echtzeit-Kollaboration, interaktiver Karte, OIDC Login und Dark Mode.',
-    selfHost: 'Open Source — ',
-    selfHostLink: 'selbst hosten',
-    close: 'Verstanden',
-  },
-  en: {
-    titleBefore: 'Welcome to ',
-    titleAfter: '',
-    title: 'Welcome to the TREK Demo',
-    description: 'You can view, edit and create trips. All changes are automatically reset every hour.',
-    resetIn: 'Next reset in',
-    minutes: 'minutes',
-    uploadNote: 'File uploads (photos, documents, covers) are disabled in demo mode.',
-    fullVersionTitle: 'Additionally in the full version:',
-    features: [
-      'File uploads (photos, documents, covers)',
-      'API key management (Google Maps, Weather)',
-      'User & permission management',
-      'Automatic backups',
-      'Addon management (enable/disable)',
-      'OIDC / SSO single sign-on',
-    ],
-    addonsTitle: 'Modular Addons (can be deactivated in full version)',
-    addons: [
-      ['Vacay', 'Vacation planner with calendar, holidays & user fusion'],
-      ['Atlas', 'World map with visited countries & travel stats'],
-      ['Packing', 'Checklists per trip'],
-      ['Budget', 'Expense tracking with splitting'],
-      ['Documents', 'Attach files to trips'],
-      ['Widgets', 'Currency converter & timezones'],
-    ],
-    whatIs: 'What is TREK?',
-    whatIsDesc:
-      'A self-hosted travel planner with real-time collaboration, interactive maps, OIDC login and dark mode.',
-    selfHost: 'Open source — ',
-    selfHostLink: 'self-host it',
-    close: 'Got it',
-  },
-  et: {
-    titleBefore: 'Tere tulemast ',
-    titleAfter: 'i',
-    title: 'Tere tulemast TREKi demosse',
-    description: 'Saad reise vaadata, muuta ja luua. Kõik muudatused lähtestatakse automaatselt iga tunni järel.',
-    resetIn: 'Järgmise lähtestamiseni',
-    minutes: 'minutit',
-    uploadNote: 'Failide (fotode, dokumentide ja kaanepiltide) üleslaadimine on demorežiimis keelatud.',
-    fullVersionTitle: 'Täisversioonis lisaks:',
-    features: [
-      'Failide üleslaadimine (fotod, dokumendid, kaanepildid)',
-      'API-võtmete haldus (Google Maps, ilm)',
-      'Kasutajate ja õiguste haldus',
-      'Automaatsed varukoopiad',
-      'Lisamoodulite haldus (lubamine/keelamine)',
-      'OIDC / SSO ühekordne sisselogimine',
-    ],
-    addonsTitle: 'Lisamoodulid (täisversioonis saab välja lülitada)',
-    addons: [
-      ['Vacay', 'Puhkuseplaneerija kalendri, pühade ja kasutajate plaanide ühendamisega'],
-      ['Atlas', 'Maailmakaart külastatud riikide ja reisistatistikaga'],
-      ['Pakkimine', 'Iga reisi kontrollnimekirjad'],
-      ['Eelarve', 'Kulude jälgimine ja jagamine'],
-      ['Dokumendid', 'Lisa reisidele faile'],
-      ['Vidinad', 'Valuutakalkulaator ja ajavööndid'],
-    ],
-    whatIs: 'Mis on TREK?',
-    whatIsDesc:
-      'Ise majutatav reisiplaneerija reaalajas koostöö, interaktiivsete kaartide, OIDC sisselogimise ja tumeda režiimiga.',
-    selfHost: 'Avatud lähtekood — ',
-    selfHostLink: 'majuta ise',
-    close: 'Selge',
-  },
-  es: {
-    titleBefore: 'Bienvenido a ',
-    titleAfter: '',
-    title: 'Bienvenido a la demo de TREK',
-    description: 'Puedes ver, editar y crear viajes. Todos los cambios se restablecen automáticamente cada hora.',
-    resetIn: 'Próximo reinicio en',
-    minutes: 'minutos',
-    uploadNote: 'Las subidas de archivos (fotos, documentos, portadas) están desactivadas en el modo demo.',
-    fullVersionTitle: 'Además, en la versión completa:',
-    features: [
-      'Subida de archivos (fotos, documentos, portadas)',
-      'Gestión de claves API (Google Maps, tiempo)',
-      'Gestión de usuarios y permisos',
-      'Copias de seguridad automáticas',
-      'Gestión de addons (activar/desactivar)',
-      'Inicio de sesión único OIDC / SSO',
-    ],
-    addonsTitle: 'Complementos modulares (se pueden desactivar en la versión completa)',
-    addons: [
-      ['Vacaciones', 'Planificador de vacaciones con calendario, festivos y fusión de usuarios'],
-      ['Atlas', 'Mapa del mundo con países visitados y estadísticas de viaje'],
-      ['Equipaje', 'Listas de comprobación para cada viaje'],
-      ['Presupuesto', 'Control de gastos con reparto'],
-      ['Documentos', 'Adjunta archivos a los viajes'],
-      ['Widgets', 'Conversor de divisas y zonas horarias'],
-    ],
-    whatIs: '¿Qué es TREK?',
-    whatIsDesc:
-      'Un planificador de viajes autohospedado con colaboración en tiempo real, mapas interactivos, inicio de sesión OIDC y modo oscuro.',
-    selfHost: 'Código abierto — ',
-    selfHostLink: 'alójalo tú mismo',
-    close: 'Entendido',
-  },
-  zh: {
-    titleBefore: '欢迎来到 ',
-    titleAfter: '',
-    title: '欢迎来到 TREK 演示版',
-    description: '你可以查看、编辑和创建旅行。所有更改都会在每小时自动重置。',
-    resetIn: '下次重置将在',
-    minutes: '分钟后',
-    uploadNote: '演示模式下已禁用文件上传（照片、文档、封面）。',
-    fullVersionTitle: '完整版本还包括：',
-    features: [
-      '文件上传（照片、文档、封面）',
-      'API 密钥管理（Google Maps、天气）',
-      '用户和权限管理',
-      '自动备份',
-      '附加组件管理（启用/禁用）',
-      'OIDC / SSO 单点登录',
-    ],
-    addonsTitle: '模块化附加组件（完整版本可禁用）',
-    addons: [
-      ['Vacay', '带日历、节假日和用户融合的假期规划器'],
-      ['Atlas', '带已访问国家和旅行统计的世界地图'],
-      ['Packing', '按旅行管理清单'],
-      ['Budget', '支持分摊的费用追踪'],
-      ['Documents', '将文件附加到旅行'],
-      ['Widgets', '货币换算和时区工具'],
-    ],
-    whatIs: '什么是 TREK？',
-    whatIsDesc: '一个支持实时协作、交互式地图、OIDC 登录和深色模式的自托管旅行规划器。',
-    selfHost: '开源项目 - ',
-    selfHostLink: '自行部署',
-    close: '知道了',
-  },
-  'zh-TW': {
-    titleBefore: '歡迎來到 ',
-    titleAfter: '',
-    title: '歡迎來到 TREK 展示版',
-    description: '你可以檢視、編輯和建立行程。所有變更都會在每小時自動重設。',
-    resetIn: '下次重設將在',
-    minutes: '分鐘後',
-    uploadNote: '展示模式下已停用檔案上傳（照片、文件、封面）。',
-    fullVersionTitle: '完整版本還包含：',
-    features: [
-      '檔案上傳（照片、文件、封面）',
-      'API 金鑰管理（Google Maps、天氣）',
-      '使用者與權限管理',
-      '自動備份',
-      '附加元件管理（啟用/停用）',
-      'OIDC / SSO 單一登入',
-    ],
-    addonsTitle: '模組化附加元件（完整版本可停用）',
-    addons: [
-      ['Vacay', '具備日曆、假日與使用者融合的假期規劃器'],
-      ['Atlas', '顯示已造訪國家與旅行統計的世界地圖'],
-      ['Packing', '依行程管理的檢查清單'],
-      ['Budget', '支援分攤的費用追蹤'],
-      ['Documents', '將檔案附加到行程'],
-      ['Widgets', '貨幣換算與時區工具'],
-    ],
-    whatIs: 'TREK 是什麼？',
-    whatIsDesc: '一個支援即時協作、互動式地圖、OIDC 登入和深色模式的自架旅行規劃器。',
-    selfHost: '開源專案 - ',
-    selfHostLink: '自行架設',
-    close: '知道了',
-  },
-  ar: {
-    titleBefore: 'مرحبًا بك في ',
-    titleAfter: '',
-    title: 'مرحبًا بك في النسخة التجريبية من TREK',
-    description: 'يمكنك عرض الرحلات وتعديلها وإنشاء رحلات جديدة. تتم إعادة ضبط جميع التغييرات تلقائيًا كل ساعة.',
-    resetIn: 'إعادة الضبط التالية خلال',
-    minutes: 'دقيقة',
-    uploadNote: 'رفع الملفات (الصور والمستندات وصور الغلاف) معطّل في وضع العرض التجريبي.',
-    fullVersionTitle: 'وفي النسخة الكاملة أيضًا:',
-    features: [
-      'رفع الملفات (الصور والمستندات وصور الغلاف)',
-      'إدارة مفاتيح API (خرائط Google والطقس)',
-      'إدارة المستخدمين والصلاحيات',
-      'نسخ احتياطية تلقائية',
-      'إدارة الإضافات (تفعيل/تعطيل)',
-      'تسجيل دخول موحد OIDC / SSO',
-    ],
-    addonsTitle: 'إضافات مرنة (يمكن تعطيلها في النسخة الكاملة)',
-    addons: [
-      ['Vacay', 'مخطط إجازات مع تقويم وعطل ودمج مستخدمين'],
-      ['Atlas', 'خريطة عالمية مع الدول التي تمت زيارتها وإحصاءات السفر'],
-      ['Packing', 'قوائم تجهيز لكل رحلة'],
-      ['Budget', 'تتبع المصروفات مع التقسيم'],
-      ['Documents', 'إرفاق الملفات بالرحلات'],
-      ['Widgets', 'محول عملات ومناطق زمنية'],
-    ],
-    whatIs: 'ما هو TREK؟',
-    whatIsDesc: 'مخطط رحلات مستضاف ذاتيًا مع تعاون لحظي وخرائط تفاعلية وتسجيل دخول OIDC ووضع داكن.',
-    selfHost: 'مفتوح المصدر — ',
-    selfHostLink: 'استضفه بنفسك',
-    close: 'فهمت',
-  },
-  id: {
-    titleBefore: 'Selamat datang di ',
-    titleAfter: '',
-    title: 'Selamat datang di Demo TREK',
-    description:
-      'Anda dapat melihat, mengedit, dan membuat perjalanan. Semua perubahan akan diatur ulang secara otomatis setiap jam.',
-    resetIn: 'Atur ulang berikutnya dalam',
-    minutes: 'menit',
-    uploadNote: 'Unggah file (foto, dokumen, sampul) dinonaktifkan dalam mode demo.',
-    fullVersionTitle: 'Selain itu dalam versi lengkap:',
-    features: [
-      'Unggah file (foto, dokumen, sampul)',
-      'Manajemen kunci API (Google Maps, Cuaca)',
-      'Manajemen pengguna & izin',
-      'Pencadangan otomatis',
-      'Manajemen Addon (aktifkan/nonaktifkan)',
-      'OIDC / SSO single sign-on',
-    ],
-    addonsTitle: 'Addon Modular (dapat dinonaktifkan di versi lengkap)',
-    addons: [
-      ['Vacay', 'Perencana liburan dengan kalender, hari libur & penggabungan pengguna'],
-      ['Atlas', 'Peta dunia dengan negara yang dikunjungi & statistik perjalanan'],
-      ['Pengepakan', 'Daftar periksa per perjalanan'],
-      ['Anggaran', 'Pelacakan pengeluaran dengan pemisahan tagihan'],
-      ['Dokumen', 'Lampirkan file ke perjalanan'],
-      ['Widget', 'Konverter mata uang & zona waktu'],
-    ],
-    whatIs: 'Apa itu TREK?',
-    whatIsDesc:
-      'Perencana perjalanan yang di-host sendiri dengan kolaborasi real-time, peta interaktif, login OIDC, dan mode gelap.',
-    selfHost: 'Buka sumber — ',
-    selfHostLink: 'host mandiri',
-    close: 'Mengerti',
-  },
-};
-
-const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield];
-const addonIcons = [CalendarDays, Globe, ListChecks, Wallet, FileText, ArrowRightLeft];
-
-export default function DemoBanner(): React.ReactElement | null {
-  const [dismissed, setDismissed] = useState<boolean>(false);
-  const [minutesLeft, setMinutesLeft] = useState<number>(59 - new Date().getMinutes());
-  const { language } = useTranslation();
-  const t = texts[language] || texts.en;
-
-  useEffect(() => {
-    const interval = setInterval(() => setMinutesLeft(59 - new Date().getMinutes()), 10000);
-    return () => clearInterval(interval);
-  }, []);
-
-  if (dismissed) return null;
-
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 99999,
-        background: 'rgba(0,0,0,0.6)',
-        backdropFilter: 'blur(8px)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingTop: 'max(16px, env(safe-area-inset-top))',
-        paddingBottom: 'max(16px, calc(env(safe-area-inset-bottom) + 80px))',
-        paddingInline: 16,
-        overflow: 'auto',
-        fontFamily: 'var(--font-system)',
-      }}
-      role="button"
-      tabIndex={0}
-      aria-label={t.close}
-      onClick={() => setDismissed(true)}
-      onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
-        if (e.target !== e.currentTarget) return;
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          setDismissed(true);
-        }
-      }}
-    >
-      <div
-        role="presentation"
-        style={{
-          background: 'white',
-          borderRadius: 20,
-          padding: '28px 24px 0',
-          maxWidth: 480,
-          width: '100%',
-          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-          maxHeight: 'min(90vh, calc(100dvh - 96px))',
-          overflow: 'auto',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-        onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
-          <img src="/icons/icon-dark.svg" alt="" style={{ width: 36, height: 36, borderRadius: 10 }} />
-          <h2
-            style={{
-              margin: 0,
-              fontSize: 'calc(17px * var(--fs-scale-subtitle, 1))',
-              fontWeight: 700,
-              color: '#111827',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 5,
-            }}
-          >
-            {t.titleBefore}
-            <img src="/text-dark.svg" alt="TREK" style={{ height: 18 }} />
-            {t.titleAfter}
-          </h2>
-        </div>
-
-        <p
-          style={{
-            fontSize: 'calc(13px * var(--fs-scale-body, 1))',
-            color: '#6b7280',
-            lineHeight: 1.6,
-            margin: '0 0 12px',
-          }}
-        >
-          {t.description}
-        </p>
-
-        {/* Timer + Upload note */}
-        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
-          <div
-            style={{
-              flex: 1,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6,
-              background: '#f0f9ff',
-              border: '1px solid #bae6fd',
-              borderRadius: 10,
-              padding: '8px 10px',
-            }}
-          >
-            <Clock size={13} style={{ flexShrink: 0, color: '#0284c7' }} />
-            <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#0369a1', fontWeight: 600 }}>
-              {t.resetIn} {minutesLeft} {t.minutes}
-            </span>
-          </div>
-          <div
-            style={{
-              flex: 1,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6,
-              background: '#fffbeb',
-              border: '1px solid #fde68a',
-              borderRadius: 10,
-              padding: '8px 10px',
-            }}
-          >
-            <Upload size={13} style={{ flexShrink: 0, color: '#b45309' }} />
-            <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#b45309' }}>
-              {t.uploadNote}
-            </span>
-          </div>
-        </div>
-
-        {/* What is TREK */}
-        <div
-          style={{
-            background: '#f8fafc',
-            borderRadius: 12,
-            padding: '12px 14px',
-            marginBottom: 16,
-            border: '1px solid #e2e8f0',
-          }}
-        >
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
-            <Map size={14} style={{ color: '#111827' }} />
-            <span
-              style={{
-                fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-                fontWeight: 700,
-                color: '#111827',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 4,
-              }}
-            >
-              {t.whatIs}
-            </span>
-          </div>
-          <p style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: '#64748b', lineHeight: 1.5, margin: 0 }}>
-            {t.whatIsDesc}
-          </p>
-        </div>
-
-        {/* Addons */}
-        <p
-          style={{
-            fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
-            fontWeight: 700,
-            color: '#374151',
-            margin: '0 0 8px',
-            textTransform: 'uppercase',
-            letterSpacing: '0.08em',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
-          }}
-        >
-          <Puzzle size={12} />
-          {t.addonsTitle}
-        </p>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
-          {t.addons.map(([name, desc], i) => {
-            const Icon = addonIcons[i];
-            return (
-              <div
-                key={name}
-                style={{
-                  background: '#f8fafc',
-                  borderRadius: 10,
-                  padding: '8px 10px',
-                  border: '1px solid #f1f5f9',
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
-                  <Icon size={12} style={{ flexShrink: 0, color: '#111827' }} />
-                  <span
-                    style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#111827' }}
-                  >
-                    {name}
-                  </span>
-                </div>
-                <p
-                  style={{
-                    fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
-                    color: '#94a3b8',
-                    margin: 0,
-                    lineHeight: 1.3,
-                    paddingInlineStart: 18,
-                  }}
-                >
-                  {desc}
-                </p>
-              </div>
-            );
-          })}
-        </div>
-
-        {/* Full version features */}
-        <p
-          style={{
-            fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
-            fontWeight: 700,
-            color: '#374151',
-            margin: '0 0 8px',
-            textTransform: 'uppercase',
-            letterSpacing: '0.08em',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
-          }}
-        >
-          <Shield size={12} />
-          {t.fullVersionTitle}
-        </p>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
-          {t.features.map((text, i) => {
-            const Icon = featureIcons[i];
-            return (
-              <div
-                key={text}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 8,
-                  fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
-                  color: '#4b5563',
-                  padding: '4px 0',
-                }}
-              >
-                <Icon size={13} style={{ flexShrink: 0, color: '#9ca3af' }} />
-                <span>{text}</span>
-              </div>
-            );
-          })}
-        </div>
-
-        {/* Footer */}
-        <div
-          style={{
-            padding: '14px 0 20px',
-            borderTop: '1px solid #e5e7eb',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            position: 'sticky',
-            bottom: 0,
-            background: 'white',
-            marginTop: 'auto',
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6,
-              fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
-              color: '#9ca3af',
-            }}
-          >
-            <Github size={13} />
-            <span>{t.selfHost}</span>
-            <a
-              href="https://github.com/liketrek/TREK"
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{ color: '#111827', fontWeight: 600, textDecoration: 'none' }}
-            >
-              {t.selfHostLink}
-            </a>
-          </div>
-          <button type="button"
-            onClick={() => setDismissed(true)}
-            style={{
-              background: '#111827',
-              color: 'white',
-              border: 'none',
-              borderRadius: 10,
-              padding: '8px 20px',
-              fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-              fontWeight: 600,
-              cursor: 'pointer',
-              fontFamily: 'inherit',
-            }}
-          >
-            {t.close}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
@@ -534,6 +534,21 @@ describe('MapView', () => {
    expect(mapMock.fitBounds).toHaveBeenCalledOnce()
  })

+  it('FE-COMP-MAPVIEW-089: a frame handed over while the map is built lands at once, a later one flies', () => {
+    // The map opens on a guess framed for the browser window. A map in a smaller box, the
+    // collection's beside its list, hands its own frame over at once, and must open there
+    // rather than show the guess and then fly to the frame.
+    const cafes: [number, number][] = [[48.21, 16.37], [38.71, -9.14], [55.7, 12.55]]
+    const { rerender } = render(<MapView places={[]} focusKey="list:17" focusPoints={cafes} />)
+    expect(mapMock.fitBounds.mock.calls).toEqual([[expect.anything(), expect.objectContaining({ animate: false, maxZoom: 16 })]])
+    mapMock.fitBounds.mockClear()
+
+    // Another list on the same map is a change the user asked for, and it flies as before.
+    const viewpoints: [number, number][] = [[60.12, 6.74], [44.15, 9.65], [47.56, 13.65]]
+    rerender(<MapView places={[]} focusKey="list:20" focusPoints={viewpoints} />)
+    expect(mapMock.fitBounds.mock.calls).toEqual([[expect.anything(), expect.objectContaining({ animate: true, maxZoom: 16 })]])
+  })
+
  it('keeps selection fit and the pending route-arrival refit for semantic changes', () => {
    const selectedPlace = buildMapPlace({ id: 901, lat: 48, lng: 11 })
    const route: [number, number][][] = [[[48, 11], [48.2, 11.3]]]
@@ -427,35 +427,16 @@ function MapController({ center, zoom }: MapControllerProps) {
 // fit to that day's destinations immediately, then — once the day's route has
 // finished computing asynchronously — re-fit once more to include the full route
 // polyline, so a route that bulges past its stops stays in view (#1128).
-interface BoundsControllerProps {
+// The focus props are the contract's, documented there once rather than copied here.
+interface BoundsControllerProps extends Pick<MapViewProps, 'focusPoints' | 'focusKey' | 'fitPadding'> {
  places: Place[]
  routeCoords: [number, number][]
  fitKey: number
  paddingOpts: L.FitBoundsOptions
  /** The map was built already framed on these places, so the opening fit has nothing to do. */
  framedOnMount?: boolean
-  /**
-   * An explicit stretch of map to frame, independent of the day being shown.
-   *
-   * `fitKey` cannot express this: it carries no coordinates, and each renderer decides
-   * for itself that it means "the selected day". Weighing the ways of driving one leg
-   * needs that leg on screen, which is neither the day nor the trip.
-   */
-  focusPoints?: [number, number][]
-  /** Changes only when the caller intentionally wants a new initial frame. */
-  focusKey?: number | string
  /** False while the map is locked (#2010): an arriving route no longer re-fits it. */
  follow?: boolean
-  /**
-   * What the caller's own chrome covers while `focusPoints` is framed, in pixels per edge.
-   *
-   * `paddingOpts` knows the planner's panels and nothing else, and on a phone it is a flat
-   * margin. A shell that lays its own bars over the map passes what they cover, so the
-   * frame lands in the part still visible. Only the fit on `focusPoints` reads it.
-   * Compared by value: the same numbers in a new object do not refit, while new numbers
-   * refit the points already handed over, because the chrome they must clear has moved.
-   */
-  fitPadding?: ViewportPadding
 }

 /** A padding box as Leaflet's fit options spell it, corner pairs rather than edges. */
@@ -473,6 +454,7 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMo
  const fitRan = useRef(false)
  const didInitialFocus = useRef(false)
  const prevFocusKey = useRef(focusKey)
+  const built = useRef(false)

  const fitTo = useCallback((coords: [number, number][], padding: L.FitBoundsOptions = paddingOpts) => {
    if (coords.length === 0) return
@@ -493,7 +475,7 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMo
         * (#1982). MapViewGL never had the nudge, so this also brings the two
         * renderers back into agreement.
         */
-        map.fitBounds(bounds, { ...padding, maxZoom: 16, animate: true })
+        map.fitBounds(bounds, { maxZoom: 16, animate: true, ...padding })
      }
    } catch {}
  }, [map, paddingOpts])
@@ -534,6 +516,10 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMo
  // Frame whatever was handed over. Nothing happens when it empties, so closing the
  // picker leaves the map where the user left it rather than snapping back.
  useEffect(() => {
+    // The first run is the map being built. A frame handed over by then is where the map
+    // opens, so it lands at once instead of flying in from the window-sized opening guess.
+    const opening = !built.current
+    built.current = true
    if (!focusPoints?.length) return
    if (focusKey !== undefined) {
      const shouldFit = !didInitialFocus.current || focusKey !== prevFocusKey.current
@@ -543,7 +529,7 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMo
    }
    // A day fit that has not run yet must not overwrite this a moment later.
    awaitingRoute.current = false
-    fitTo(focusPoints, fitPadding ? leafletPadding(fitPadding) : paddingOpts)
+    fitTo(focusPoints, { ...(fitPadding ? leafletPadding(fitPadding) : paddingOpts), animate: !opening })
  }, [focusPoints, focusKey, fitPaddingKey]) // eslint-disable-line react-hooks/exhaustive-deps

  return null
@@ -5,6 +5,7 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { MapView } from './MapView'
 import ErrorBoundary from '../shared/ErrorBoundary'
 import { MapViewGLMapbox, MapViewGLMaplibre } from './glLazy'
+import { useGlRenderer } from './glSupport'
 import { useRoadtripHazards } from './useRoadtripHazards'
 import { useTranslation } from '../../i18n/TranslationContext'
 import type { MapViewAutoProps, MapViewProps } from './mapViewContract'
@@ -28,11 +29,10 @@ export function MapViewAuto(props: MapViewAutoProps) {
  const mapProps = { ...props, hazards: hazards.feed?.hazards } as MapViewProps
  const provider = useSettingsStore(s => s.settings.map_provider)
  const token = useSettingsStore(s => s.settings.mapbox_access_token)
-  // Fall back to Leaflet when Mapbox is selected but no token is set,
-  // so trip planner never shows an empty map due to a missing token.
-  const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl'
-    : provider === 'mapbox-gl' && token ? 'mapbox-gl'
-    : null
+  // Fall back to Leaflet when Mapbox is selected but no token is set, or when the
+  // browser has no WebGL2 (both GL engines need it), so the trip planner never
+  // shows an empty map or one that fails to start.
+  const glProvider = useGlRenderer(provider, token)
  // One chunk per engine: picking the binding here is what keeps mapbox-gl and
  // maplibre-gl out of each other's downloads.
  const MapViewGL = glProvider === 'maplibre-gl' ? MapViewGLMaplibre : MapViewGLMapbox
@@ -0,0 +1,88 @@
+/**
+ * The trip map without WebGL2 (FE-COMP-MAPAUTO-WEBGL-*).
+ *
+ * A browser that cannot give a GL engine its WebGL2 context sees the Leaflet map
+ * with the user's tiles, never a map that fails to start: up front when the probe
+ * says no, and the moment the GL map's own constructor is refused when it said yes.
+ */
+import { useEffect } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useSettingsStore } from '../../store/settingsStore';
+import { resetWebGLProbe } from '../../utils/webgl';
+import { buildGlMap } from './glSupport';
+import { MapViewAuto } from './MapViewAuto';
+
+const gl = vi.hoisted(() => ({ refuse: false }));
+
+vi.mock('./MapView', () => ({
+  MapView: () => <div data-testid="leaflet-map" />,
+}));
+
+/** Stands in for MapViewGL: builds its map the way the real one does, through buildGlMap. */
+function FakeGlMap() {
+  useEffect(() => {
+    buildGlMap(() => {
+      if (!gl.refuse) return {};
+      const err = new Error('WebGL2 is required to display this map.');
+      err.name = 'GPUInitializationError';
+      throw err;
+    });
+  }, []);
+  return <div data-testid="gl-map" />;
+}
+
+vi.mock('./glLazy', () => ({ MapViewGLMaplibre: FakeGlMap, MapViewGLMapbox: FakeGlMap }));
+vi.mock('./useRoadtripHazards', () => ({ useRoadtripHazards: () => ({ feed: null }) }));
+
+const realGetContext = HTMLCanvasElement.prototype.getContext;
+
+function browserWithWebGL2(available: boolean) {
+  const ctx = { getExtension: () => ({ loseContext: () => {} }) };
+  HTMLCanvasElement.prototype.getContext = vi.fn((type: string) =>
+    available && type === 'webgl2' ? ctx : null
+  ) as unknown as typeof realGetContext;
+}
+
+beforeEach(() => {
+  resetAllStores();
+  resetWebGLProbe();
+  gl.refuse = false;
+  seedStore(useSettingsStore, { settings: { map_provider: 'maplibre-gl', mapbox_access_token: '' } });
+});
+
+afterEach(() => {
+  HTMLCanvasElement.prototype.getContext = realGetContext;
+  resetWebGLProbe();
+});
+
+describe('MapViewAuto without WebGL2', () => {
+  it('FE-COMP-MAPAUTO-WEBGL-001: draws the MapLibre map where WebGL2 is there', async () => {
+    browserWithWebGL2(true);
+
+    render(<MapViewAuto places={[]} />);
+
+    expect(await screen.findByTestId('gl-map')).toBeInTheDocument();
+    expect(screen.queryByTestId('leaflet-map')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-MAPAUTO-WEBGL-002: draws the Leaflet map when the browser has no WebGL2', () => {
+    browserWithWebGL2(false);
+
+    render(<MapViewAuto places={[]} />);
+
+    expect(screen.getByTestId('leaflet-map')).toBeInTheDocument();
+    expect(screen.queryByTestId('gl-map')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-MAPAUTO-WEBGL-003: falls back to Leaflet when the GPU refuses the context the probe promised', async () => {
+    browserWithWebGL2(true);
+    gl.refuse = true;
+
+    render(<MapViewAuto places={[]} />);
+
+    expect(await screen.findByTestId('leaflet-map')).toBeInTheDocument();
+    expect(screen.queryByTestId('gl-map')).not.toBeInTheDocument();
+  });
+});
@@ -1,5 +1,5 @@
 import { act } from '@testing-library/react';
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
 import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '../../../tests/helpers/render';
@@ -7,8 +7,8 @@ import { resetAllStores } from '../../../tests/helpers/store';
 import type { GeoPosition, TrackingMode } from '../../hooks/useGeolocation';
 import { useSettingsStore } from '../../store/settingsStore';

-// The planner-waypoint and location-search camera cases of MapViewGL, and the tour
-// map's via ferrata layer (RC-10), with the same map doubles as MapViewGL.test.tsx.
+// The planner-waypoint, location-search and antimeridian camera cases of MapViewGL, and
+// the tour map's via ferrata layer (RC-10), with the same map doubles as MapViewGL.test.tsx.

 // Stable fake map so fitBounds call counts survive re-renders. The canvas
 // container is a single element so listeners registered by the component are
@@ -164,22 +164,21 @@ vi.mock('mapbox-gl', () => ({
 }));
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}));

+// maplibre-gl 6 has no default export, so the fakes are named exports.
 vi.mock('maplibre-gl', () => ({
-  default: {
-    Map: vi.fn(function () {
-      return glMap;
-    }),
-    Marker: vi.fn(function (opts?: { element?: HTMLElement }) {
-      return glMarkers.make(opts);
-    }),
-    LngLatBounds: vi.fn(function () {
-      return glBounds.create();
-    }),
-    NavigationControl: vi.fn(),
-    Popup: vi.fn(function () {
-      return glPopup;
-    }),
-  },
+  Map: vi.fn(function () {
+    return glMap;
+  }),
+  Marker: vi.fn(function (opts?: { element?: HTMLElement }) {
+    return glMarkers.make(opts);
+  }),
+  LngLatBounds: vi.fn(function () {
+    return glBounds.create();
+  }),
+  NavigationControl: vi.fn(),
+  Popup: vi.fn(function () {
+    return glPopup;
+  }),
 }));
 vi.mock('maplibre-gl/dist/maplibre-gl.css', () => ({}));

@@ -357,6 +356,31 @@ describe('MapViewGL', () => {
    expect(glMap.fitBounds).toHaveBeenCalledOnce();
  });

+  it('frames handed-over points across the antimeridian the short way, as the opening camera does', async () => {
+    loadOnAttach();
+    // Fiji, Tonga and Samoa, a collection's list: a box from plain min and max would run
+    // from -175 to 178, round the far side of the world, with each pin on an edge.
+    render(
+      <MapViewGL
+        places={[]}
+        followSelection={false}
+        focusKey="1,2,3"
+        focusPoints={[
+          [-18.14, 178.44],
+          [-21.14, -175.2],
+          [-13.83, -171.76],
+        ]}
+        glProvider="maplibre-gl"
+      />
+    );
+    await act(async () => {});
+
+    expect(glMap.fitBounds).toHaveBeenCalledOnce();
+    const framed = glBounds.instances.find((bounds) => bounds === glMap.fitBounds.mock.calls[0][0]);
+    const lngs = framed?.extend.mock.calls.map(([lngLat]) => Math.round(lngLat[0] * 100) / 100);
+    expect(lngs).toEqual([178.44, 184.8, 188.24]);
+  });
+
  it.each(['maplibre-gl', 'mapbox-gl'] as const)(
    'RC-08: %s previews waypoint drags locally and commits only on pointer up without changing the camera',
    async (provider) => {
@@ -8,7 +8,7 @@ import { buildPlace } from '../../../tests/helpers/factories'
 import { server } from '../../../tests/helpers/msw/server'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAuthStore } from '../../store/authStore'
-import maplibregl from 'maplibre-gl'
+import * as maplibregl from 'maplibre-gl'
 import { DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
 import { MAP_LAYER_SWITCHER_INSET } from './MapLayerSwitcher'
 import type { GeoPosition, TrackingMode } from '../../hooks/useGeolocation'
@@ -156,22 +156,21 @@ vi.mock('mapbox-gl', () => ({
 }))
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}))

+// maplibre-gl 6 has no default export, so the fakes are named exports.
 vi.mock('maplibre-gl', () => ({
-  default: {
-    Map: vi.fn(function () {
-      return glMap
-    }),
-    Marker: vi.fn(function (opts?: { element?: HTMLElement }) {
-      return glMarkers.make(opts)
-    }),
-    LngLatBounds: vi.fn(function () {
-      return glBounds.create()
-    }),
-    NavigationControl: vi.fn(),
-    Popup: vi.fn(function () {
-      return glPopup
-    }),
-  },
+  Map: vi.fn(function () {
+    return glMap
+  }),
+  Marker: vi.fn(function (opts?: { element?: HTMLElement }) {
+    return glMarkers.make(opts)
+  }),
+  LngLatBounds: vi.fn(function () {
+    return glBounds.create()
+  }),
+  NavigationControl: vi.fn(),
+  Popup: vi.fn(function () {
+    return glPopup
+  }),
 }))
 vi.mock('maplibre-gl/dist/maplibre-gl.css', () => ({}))

@@ -352,7 +351,7 @@ describe('MapViewGL', () => {

  it('FE-COMP-MAPVIEWGL-004: renders with the MapLibre provider and no token', async () => {
    const mapboxgl = (await import('mapbox-gl')).default
-    const maplibregl = (await import('maplibre-gl')).default
+    const maplibregl = await import('maplibre-gl')
    useSettingsStore.setState({
      settings: {
        ...useSettingsStore.getState().settings,
@@ -373,7 +372,7 @@ describe('MapViewGL', () => {

  it('FE-COMP-MAPVIEWGL-014: MapLibre maps disable the around-center mouse rotate (#1545)', async () => {
    const mapboxgl = (await import('mapbox-gl')).default
-    const maplibregl = (await import('maplibre-gl')).default
+    const maplibregl = await import('maplibre-gl')
    useSettingsStore.setState({
      settings: {
        ...useSettingsStore.getState().settings,
@@ -945,7 +944,7 @@ describe('MapViewGL', () => {
      />,
    )
    await act(async () => {})
-    expect(glMap.fitBounds).toHaveBeenCalledOnce()
+    expect(glMap.fitBounds.mock.calls).toEqual([[expect.anything(), expect.objectContaining({ duration: 0 })]])
    glMap.fitBounds.mockClear()
    const mapConstructions = (maplibregl.Map as any).mock.calls.length
    const retainedCenter = { lng: 135.8, lat: 35.2 }
@@ -980,7 +979,7 @@ describe('MapViewGL', () => {
      />,
    )
    await act(async () => {})
-    expect(glMap.fitBounds).toHaveBeenCalledOnce()
+    expect(glMap.fitBounds.mock.calls).toEqual([[expect.anything(), expect.objectContaining({ duration: 400 })]])
  })

  it('keeps selection fit and the pending route-arrival refit for semantic changes', async () => {
@@ -24,6 +24,7 @@ import { useTransportRoutes } from '../../hooks/useTransportRoutes'
 import { visibleRouteReservations } from '../../utils/reservationRoutes'
 import { safeHexColor } from '../../utils/safeColor'
 import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from './glProviders'
+import { buildGlMap } from './glSupport'
 import LocationButton from './LocationButton'
 import { useIsPhone } from '../../mobile/useIsPhone'
 import { useGeolocation } from '../../hooks/useGeolocation'
@@ -47,7 +48,7 @@ import { addGpxTrackLayers, GPX_HIT_LAYER_ID, hasGpxTrackLayers, selectGpxTrack,
 import { buildPoiPopupHtml } from './placePopup'
 import { pluginsApi, type PluginMapMarker, type PluginMapLayer } from '../../api/client'
 import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
-import { computeMapViewport, TILE_SIZE_GL } from '../../utils/mapViewport'
+import { alongShortestArc, computeMapViewport, TILE_SIZE_GL } from '../../utils/mapViewport'
 import { selectedPlaceTarget } from './selectedPlaceTarget'
 import { PLACE_CLUSTER_CIRCLE_LAYER_ID, PLACE_CLUSTER_COUNT_LAYER_ID } from './placeClusterLayers'

@@ -1104,13 +1105,12 @@ export function MapViewGL({
      antialias: mapboxQuality,
    }
    if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
-    // MapLibre 5's mouse-rotate inverts its sign at a mid-screen line it gets by
-    // re-projecting the map center — a line that drifts with the bearing, so a
-    // right-button drag near mid-screen ping-pongs instead of rotating (#1545).
-    // aroundCenter: false restores the plain dx-based rotate mapbox-gl uses.
+    // MapLibre's around-center rotate ping-pongs near mid-screen (#1545); false is mapbox-gl's dx rotate.
    if (isMapLibre) mapOptions.aroundCenter = false

-    const map = new gl.Map(mapOptions as any)
+    // Null when the GPU refused WebGL2: MapViewAuto has switched to Leaflet by then.
+    const map = buildGlMap(() => new gl.Map(mapOptions as any))
+    if (!map) return
    mapRef.current = map
    popupRef.current = new gl.Popup({
      closeButton: false,
@@ -2091,7 +2091,7 @@ export function MapViewGL({
      didInitialFocusRef.current = true
    }
    const bounds = new gl.LngLatBounds()
-    focusPoints.forEach(([lat, lng]) => bounds.extend([lng, lat]))
+    alongShortestArc(focusPoints).forEach(([lat, lng]) => bounds.extend([lng, lat]))
    // A day fit still waiting on its route must not overwrite this a moment later.
    pendingRouteFitRef.current = null
    try {
@@ -2099,7 +2099,7 @@ export function MapViewGL({
        padding: fitPadding ?? paddingOpts,
        maxZoom: 15,
        pitch: enableMapbox3d ? 45 : 0,
-        duration: 400,
+        duration: mapReady ? 400 : 0, // handed over while the map is built: it opens there, no flight in
      })
    } catch { /* noop */ }
  }, [focusPoints, focusKey, fitPaddingKey]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -7,7 +7,8 @@ import {
  RASTER_FALLBACK_TILE_URL,
  attributionForTile,
 } from '../../constants/mapDefaults'
-import { hasWebGL } from '../../utils/webgl'
+import { hasWebGL, reportWebGLFailure } from '../../utils/webgl'
+import { isGpuInitFailure } from './glSupport'
 import { isChunkLoadError, reloadOnceForChunk } from '../../utils/chunkReload'

 /** The Leaflet layer maplibre-gl-leaflet hands back. */
@@ -96,6 +97,8 @@ function attachGlLayer(map: L.Map, layer: GlLeafletLayer, style: string): boolea
    layer.addTo(map)
  } catch (err) {
    console.warn('[basemap] no WebGL context for the vector basemap, drawing raster tiles', err)
+    // The GPU, not a context budget: the GL maps elsewhere in the app switch to Leaflet too.
+    if (isGpuInitFailure(err)) reportWebGLFailure()
    detachBasemapLayer(layer)
    return false
  }
@@ -1,7 +1,6 @@
-import maplibregl from 'maplibre-gl'
+import * as maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
-import rtlTextPluginUrl from '@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js?url'
-import { registerRtlTextPlugin } from '../rtlText'
+import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'

 /**
 * The only module in the client that pulls maplibre-gl in at runtime. Same rule as
@@ -11,9 +10,22 @@ import { registerRtlTextPlugin } from '../rtlText'
 * Popup, LngLatBounds — which is why the components take the engine as a prop and
 * stay engine-agnostic. Where the two genuinely differ, the caller already guards
 * on the provider (projection, accessToken, aroundCenter).
+ *
+ * MapLibre 6 ships as ES modules only and has no default export any more, so the
+ * namespace is what goes out as this module's default. It is a frozen module
+ * namespace: nothing may assign to it, which is why the accessToken writes stay
+ * behind their mapbox-only guard.
 */
-// Arabic/Hebrew/Persian labels come out unjoined and reversed without this.
-// MapLibre's signature is (url, lazy) and it resolves a promise — see rtlText.ts.
-registerRtlTextPlugin(() => maplibregl.setRTLTextPlugin(rtlTextPluginUrl, true))
+
+// MapLibre 6 finds its worker next to its own module, which inside a bundle is a
+// chunk in /assets/ with no worker beside it. Vite builds the worker into its own
+// file and hands back the URL; set before any Map is constructed, the
+// maplibre-gl-leaflet bridge included, since it only ever reaches the engine
+// together with this module.
+maplibregl.setWorkerUrl(workerUrl)
+
+// No RTL text plugin here, unlike mapbox. MapLibre 6.9 shapes Arabic and orders
+// bidirectional text itself; the old plugin would replace that implementation, and
+// a v6 worker can only load the plugin's UMD build through eval.

 export default maplibregl
@@ -1,29 +1,33 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';

 /**
- * The two lines this fix actually adds. Everything else is a helper: the guard in
- * rtlText.ts has its own tests, but a guard nobody calls looks exactly like a
- * working fix from the outside. Deleting either registration, swapping an
- * argument or dropping the deferred flag left the whole suite green.
+ * What each engine module does on import. Everything else is a helper: the guard
+ * in rtlText.ts has its own tests, but a guard nobody calls looks exactly like a
+ * working fix from the outside. Deleting the mapbox registration, swapping an
+ * argument or dropping the deferred flag left the whole suite green, and so would
+ * a maplibre engine that forgot its worker URL.
 *
 * The engines are mocked because importing them for real builds a worker pool
 * under jsdom, and the plugin URL is mocked so the 133 KB payload never loads.
 */
-const { mapboxSet, maplibreSet } = vi.hoisted(() => ({
+const { mapboxSet, maplibreSet, maplibreWorker } = vi.hoisted(() => ({
  mapboxSet: vi.fn(),
  maplibreSet: vi.fn(),
+  maplibreWorker: vi.fn(),
 }));

 vi.mock('mapbox-gl', () => ({ default: { setRTLTextPlugin: mapboxSet } }));
-vi.mock('maplibre-gl', () => ({ default: { setRTLTextPlugin: maplibreSet } }));
+vi.mock('maplibre-gl', () => ({ setRTLTextPlugin: maplibreSet, setWorkerUrl: maplibreWorker }));
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}));
 vi.mock('maplibre-gl/dist/maplibre-gl.css', () => ({}));
+vi.mock('maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url', () => ({ default: '/assets/maplibre-worker.js' }));
 vi.mock('@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js?url', () => ({ default: '/assets/rtl-plugin.js' }));

 beforeEach(() => {
  vi.resetModules();
  mapboxSet.mockReset();
  maplibreSet.mockReset();
+  maplibreWorker.mockReset();
 });

 describe('the GL engines register the RTL text plugin (#2235)', () => {
@@ -37,13 +41,12 @@ describe('the GL engines register the RTL text plugin (#2235)', () => {
    expect(mapboxSet).toHaveBeenCalledWith(expect.stringContaining('rtl'), null, true);
  });

-  it('FE-MAP-RTL-002: importing the maplibre engine registers it lazily', async () => {
+  it('FE-MAP-RTL-002: importing the maplibre engine registers no plugin', async () => {
    await import('./maplibre');

-    expect(maplibreSet).toHaveBeenCalledTimes(1);
-    // MapLibre 5 takes (url, lazy) and returns a promise, which is the reason
-    // the call stays with each engine instead of going through one wrapper.
-    expect(maplibreSet).toHaveBeenCalledWith(expect.stringContaining('rtl'), true);
+    // MapLibre 6.9 shapes right-to-left text itself. The plugin would replace
+    // that, and a v6 worker could only run its UMD build through eval.
+    expect(maplibreSet).not.toHaveBeenCalled();
  });

  it('FE-MAP-RTL-003: an engine still loads when its registration throws', async () => {
@@ -54,13 +57,13 @@ describe('the GL engines register the RTL text plugin (#2235)', () => {
    expect(engine.default).toBeDefined();
  });

-  it('FE-MAP-RTL-004: a rejected registration promise does not surface as an unhandled rejection', async () => {
-    maplibreSet.mockReturnValue(Promise.reject(new Error('already registered')));
-
+  it('FE-MAP-RTL-004: importing the maplibre engine points it at the bundled worker', async () => {
    const engine = await import('./maplibre');

-    expect(engine.default).toBeDefined();
-    // Give the rejection a tick to go unhandled if nothing caught it.
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    // MapLibre 6 looks for its worker next to its own module, which in a bundle
+    // is a chunk with no worker beside it. Without this no map draws a tile.
+    expect(maplibreWorker).toHaveBeenCalledTimes(1);
+    expect(maplibreWorker).toHaveBeenCalledWith('/assets/maplibre-worker.js');
+    expect(engine.default.setWorkerUrl).toBe(maplibreWorker);
  });
 });
@@ -0,0 +1,134 @@
+/**
+ * Whether a map may be drawn with a GL engine (FE-MAP-GLSUP-*).
+ *
+ * MapLibre 6 and Mapbox GL 3 throw out of their Map constructor without WebGL2.
+ * What is under test is the one decision every GL map goes through: the user's
+ * provider when it can run here, Leaflet otherwise, and Leaflet from the moment a
+ * GPU that claimed WebGL2 refuses the context after all.
+ */
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { hasWebGL, resetWebGLProbe } from '../../utils/webgl';
+import { buildGlMap, isGpuInitFailure, pickGlRenderer, useGlRenderer, useWebGL2 } from './glSupport';
+
+const realGetContext = HTMLCanvasElement.prototype.getContext;
+
+/** A browser whose canvas hands out a webgl2 context, or none. */
+function browserWithWebGL2(available: boolean) {
+  const ctx = { getExtension: vi.fn(() => ({ loseContext: vi.fn() })) };
+  const getContext = vi.fn((type: string) => (available && type === 'webgl2' ? ctx : null));
+  HTMLCanvasElement.prototype.getContext = getContext as unknown as typeof realGetContext;
+  return getContext;
+}
+
+function gpuError(): Error {
+  const err = new Error('WebGL2 is required to display this map.');
+  err.name = 'GPUInitializationError';
+  return err;
+}
+
+beforeEach(() => {
+  resetWebGLProbe();
+});
+
+afterEach(() => {
+  HTMLCanvasElement.prototype.getContext = realGetContext;
+  resetWebGLProbe();
+});
+
+describe('pickGlRenderer', () => {
+  it('FE-MAP-GLSUP-001: keeps the GL provider the user picked when WebGL2 is there', () => {
+    expect(pickGlRenderer('maplibre-gl', '', () => true)).toBe('maplibre-gl');
+    expect(pickGlRenderer('mapbox-gl', 'pk.token', () => true)).toBe('mapbox-gl');
+  });
+
+  it('FE-MAP-GLSUP-002: draws with Leaflet when the browser has no WebGL2', () => {
+    expect(pickGlRenderer('maplibre-gl', '', () => false)).toBeNull();
+    expect(pickGlRenderer('mapbox-gl', 'pk.token', () => false)).toBeNull();
+  });
+
+  it('FE-MAP-GLSUP-003: Mapbox without a token stays on Leaflet, MapLibre needs none', () => {
+    expect(pickGlRenderer('mapbox-gl', '', () => true)).toBeNull();
+    expect(pickGlRenderer('maplibre-gl', null, () => true)).toBe('maplibre-gl');
+  });
+
+  it('FE-MAP-GLSUP-004: a Leaflet user never pays for the probe', () => {
+    const webgl2 = vi.fn(() => true);
+
+    expect(pickGlRenderer('leaflet', 'pk.token', webgl2)).toBeNull();
+    expect(pickGlRenderer(undefined, undefined, webgl2)).toBeNull();
+    expect(webgl2).not.toHaveBeenCalled();
+  });
+});
+
+describe('isGpuInitFailure', () => {
+  it('FE-MAP-GLSUP-005: knows both engines’ way of saying the GPU refused', () => {
+    expect(isGpuInitFailure(gpuError())).toBe(true);
+    expect(isGpuInitFailure(new Error('Failed to initialize WebGL.'))).toBe(true);
+  });
+
+  it('FE-MAP-GLSUP-006: anything else is not a GPU failure', () => {
+    expect(isGpuInitFailure(new TypeError('container is null'))).toBe(false);
+    expect(isGpuInitFailure('Failed to initialize WebGL')).toBe(false);
+    expect(isGpuInitFailure(null)).toBe(false);
+  });
+});
+
+describe('buildGlMap', () => {
+  it('FE-MAP-GLSUP-007: hands back the map the engine built', () => {
+    const map = { remove: vi.fn() };
+
+    expect(buildGlMap(() => map)).toBe(map);
+  });
+
+  it('FE-MAP-GLSUP-008: a GPU that claimed WebGL2 and refused it gives null and turns the answer to no', () => {
+    browserWithWebGL2(true);
+    expect(hasWebGL()).toBe(true);
+
+    expect(
+      buildGlMap(() => {
+        throw gpuError();
+      })
+    ).toBeNull();
+    expect(hasWebGL()).toBe(false);
+  });
+
+  it('FE-MAP-GLSUP-009: any other error is a bug and is thrown on', () => {
+    browserWithWebGL2(true);
+
+    expect(() =>
+      buildGlMap(() => {
+        throw new TypeError('style is undefined');
+      })
+    ).toThrow('style is undefined');
+    expect(hasWebGL()).toBe(true);
+  });
+});
+
+describe('useGlRenderer', () => {
+  it('FE-MAP-GLSUP-010: asks the canvas for webgl2 only', () => {
+    const getContext = browserWithWebGL2(false);
+
+    const { result } = renderHook(() => useGlRenderer('maplibre-gl', ''));
+
+    expect(result.current).toBeNull();
+    expect(getContext.mock.calls.map((call) => call[0])).toEqual(['webgl2']);
+  });
+
+  it('FE-MAP-GLSUP-011: switches every mounted map to Leaflet once a GL map fails to build', () => {
+    browserWithWebGL2(true);
+    const trip = renderHook(() => useGlRenderer('maplibre-gl', ''));
+    const terrain = renderHook(() => useWebGL2());
+    expect(trip.result.current).toBe('maplibre-gl');
+    expect(terrain.result.current).toBe(true);
+
+    act(() => {
+      buildGlMap(() => {
+        throw gpuError();
+      });
+    });
+
+    expect(trip.result.current).toBeNull();
+    expect(terrain.result.current).toBe(false);
+  });
+});
@@ -0,0 +1,74 @@
+import { useSyncExternalStore } from 'react';
+import { hasWebGL, reportWebGLFailure, subscribeWebGL, webGLFailures } from '../../utils/webgl';
+import type { GlMapProvider } from './glProviders';
+
+/*
+ * Whether a map may be drawn with a GL engine at all, for every place that would
+ * build one: the trip map, the journey maps, the settings preview and the 3D tour.
+ *
+ * MapLibre 6 and Mapbox GL 3 both need WebGL2 and throw out of their Map
+ * constructor without it. A browser that cannot give it gets the Leaflet map with
+ * the user's tiles instead, never a map that fails to start. Like the GL
+ * renderers it guards, this module stays free of both SDKs (`check:gl-split`).
+ */
+
+/**
+ * The GL engine to draw with, or null for Leaflet: the user's provider, as long
+ * as it can run here. Mapbox also needs a token, MapLibre does not.
+ */
+export function pickGlRenderer(
+  provider: string | null | undefined,
+  mapboxToken: string | null | undefined,
+  webgl2: () => boolean = hasWebGL
+): GlMapProvider | null {
+  const wanted: GlMapProvider | null =
+    provider === 'maplibre-gl' ? 'maplibre-gl' : provider === 'mapbox-gl' && mapboxToken ? 'mapbox-gl' : null;
+  // Asked only for a GL provider: a Leaflet user never pays for the probe's context.
+  return wanted && webgl2() ? wanted : null;
+}
+
+/** Re-renders the caller when a GL map found out that WebGL2 does not work after all. */
+function useWebGLFailures(): number {
+  return useSyncExternalStore(subscribeWebGL, webGLFailures, webGLFailures);
+}
+
+/** pickGlRenderer for a component, switching to Leaflet the moment a GL map fails to build. */
+export function useGlRenderer(
+  provider: string | null | undefined,
+  mapboxToken: string | null | undefined
+): GlMapProvider | null {
+  useWebGLFailures();
+  return pickGlRenderer(provider, mapboxToken);
+}
+
+/** Whether 3D (the GL terrain map) can run here, kept current the same way. */
+export function useWebGL2(): boolean {
+  useWebGLFailures();
+  return hasWebGL();
+}
+
+/**
+ * The GPU refusing a context, as either engine reports it from its Map
+ * constructor. Matched on the name and message because the class itself lives in
+ * the maplibre chunk, and Mapbox throws a plain Error.
+ */
+export function isGpuInitFailure(err: unknown): boolean {
+  if (!(err instanceof Error)) return false;
+  return err.name === 'GPUInitializationError' || /failed to initialize webgl/i.test(err.message);
+}
+
+/**
+ * Builds a GL map, the second line of defence behind the probe: a GPU that
+ * claims WebGL2 and still fails is reported, so every map switches to Leaflet,
+ * and the caller gets null instead of a throw. Anything else is a bug and is
+ * thrown on.
+ */
+export function buildGlMap<T>(construct: () => T): T | null {
+  try {
+    return construct();
+  } catch (err) {
+    if (!isGpuInitFailure(err)) throw err;
+    reportWebGLFailure();
+    return null;
+  }
+}
@@ -7,16 +7,18 @@
 * this because their labels are drawn server-side, which is why it only surfaced
 * once the default basemap became a vector style.
 *
- * Both engines expose the fix as an optional plugin and neither loads it by
- * default. Registering is global to the engine, so it happens once per engine
- * module rather than at each map's construction site.
+ * Mapbox GL exposes the fix as an optional plugin and does not load it by
+ * default. Registering is global to the engine, so it happens once in the engine
+ * module rather than at each map's construction site. MapLibre needed the same
+ * plugin up to version 5; since 6.9 it shapes and reorders the text itself, and
+ * its engine module registers nothing.
 *
- * The call itself stays with the caller: this is one of the places the two engines
- * genuinely differ. MapLibre 5 takes `(url, lazy)` and returns a promise, Mapbox
- * GL 3 takes `(url, callback, deferred)` and returns nothing — so each engine
- * module passes its own invocation rather than a shared wrapper guessing an arity.
+ * The call itself stays with the caller: Mapbox GL 3 takes
+ * `(url, callback, deferred)` and returns nothing, while MapLibre took
+ * `(url, lazy)` and returned a promise, so the guard below accepts either rather
+ * than guessing an arity.
 *
- * Deliberately no getRTLTextPluginStatus() pre-check: reading it makes MapLibre
+ * Deliberately no getRTLTextPluginStatus() pre-check: reading it made MapLibre
 * build its worker pool, which is an eager side effect for a module that is
 * imported for its default export, and throws outright under jsdom. Registering
 * twice is reported — by a throw or a rejected promise depending on the engine —
@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import type { TripOverviewDay } from '../Map/tripRouteGeometry'

-vi.mock('../../utils/webgl', () => ({ hasWebGL: vi.fn(() => true), resetWebGLProbe: vi.fn() }))
+vi.mock('../../utils/webgl', () => ({ hasWebGL: vi.fn(() => true), resetWebGLProbe: vi.fn(), reportWebGLFailure: vi.fn() }))

 const { hasWebGL } = await import('../../utils/webgl')
 const { renderTripMapImage } = await import('./tripMapImage')
@@ -1,6 +1,7 @@
 import { buildRouteOverlay, wrapSvg } from './tripMapSvg'
 import { hasWebGL } from '../../utils/webgl'
 import { normalizeStyleForProvider } from '../Map/glProviders'
+import { buildGlMap } from '../Map/glSupport'
 import type { TripOverviewDay } from '../Map/tripRouteGeometry'
 import { importChunk } from '../../utils/chunkReload'

@@ -49,18 +50,20 @@ export async function renderTripMapImage(
  try {
    const gl = (await importChunk(() => import('../Map/engines/maplibre'))).default

-    container = document.createElement('div')
+    // A const of its own: the map is built inside a closure, where the let's narrowing is gone.
+    const box = document.createElement('div')
+    container = box
    // Off-screen rather than hidden: MapLibre needs a laid-out box with real
    // dimensions, and `display:none` gives it a zero-sized canvas.
-    container.style.cssText =
+    box.style.cssText =
      `position:fixed;left:-10000px;top:0;width:${width}px;height:${height}px;pointer-events:none;`
-    document.body.appendChild(container)
+    document.body.appendChild(box)

    const bounds = new gl.LngLatBounds()
    for (const [lat, lng] of points) bounds.extend([lng, lat])

-    const instance = new gl.Map({
-      container,
+    const instance = buildGlMap(() => new gl.Map({
+      container: box,
      style: normalizeStyleForProvider('maplibre-gl', opts.style),
      bounds,
      fitBoundsOptions: { padding: 42, animate: false },
@@ -70,7 +73,9 @@ export async function renderTripMapImage(
      // MapLibre 5 moved the WebGL flags off the top level into this bag.
      canvasContextAttributes: { preserveDrawingBuffer: true, antialias: true },
      fadeDuration: 0,
-    })
+    }))
+    // A GPU that offered WebGL2 and then refused it: reported, so the app's maps follow.
+    if (!instance) return null
    map = instance

    const ready = await new Promise<boolean>(resolve => {
@@ -118,9 +118,10 @@ export function DayPlanPlaceSubline({
  const description = place.description || place.address || cat?.name;
  if (!(dayRowTour || place.place_time || hasPlannedTimes(tourTimes) || description)) return null;
  return (
-    // One line like the row's name: when the hover controls come out, the description
-    // gives way and the pills keep their place instead of wrapping onto a second line.
-    <div className="trek-fade-end mt-0.5 flex min-w-0 flex-nowrap items-center gap-1.5 overflow-hidden">
+    // The description stays on one line and gives way first. The pills wrap rather
+    // than run out of the row: a tour carries a time, its duration and its distance,
+    // and in the narrow day column the last of them used to be cut off unseen.
+    <div className="trek-fade-end mt-0.5 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 overflow-hidden">
      {place.place_time && dayRowTour && (
        // TIME-02: a tour's end, typed or worked out from its start and its time.
        <TimePill quiet>
@@ -201,9 +201,9 @@ describe('DayPlanSidebar', () => {
    const view = render(<DayPlanSidebar {...props} />);
    const tourPreview = view.container.querySelector('[data-testid="trip-plan-tour-description"]') as HTMLElement;
    expect(tourPreview).toHaveTextContent(description);
-    // One line like the row's name, so hover controls make the description give way instead of wrapping.
+    // The description keeps to one line; the pills beside it wrap rather than run out of the row.
    expect(tourPreview).toHaveStyle({ whiteSpace: 'nowrap', maxHeight: '1.3em' });
-    expect(tourPreview.parentElement).toHaveClass('flex-nowrap', 'overflow-hidden');
+    expect(tourPreview.parentElement).toHaveClass('flex-wrap', 'overflow-hidden');
    expect(screen.getByTestId('trip-plan-tour-walking-time')).toHaveTextContent('Walk: 1 h');
    expect(screen.getByTestId('trip-plan-tour-breaks')).toHaveTextContent('Breaks: 35 min');
    expect(screen.getByTestId('trip-plan-tour-planned-duration')).toHaveTextContent('Planned: 1 h 35 min');
@@ -0,0 +1,43 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { buildUser } from '../../../tests/helpers/factories';
+import { render, screen } from '../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useAuthStore } from '../../store/authStore';
+import AccountDemoLock from './AccountDemoLock';
+
+beforeEach(() => resetAllStores());
+
+function renderCards() {
+  return render(
+    <AccountDemoLock>
+      <button type="button">Save profile</button>
+    </AccountDemoLock>
+  );
+}
+
+describe('AccountDemoLock', () => {
+  it('FE-COMP-ACCOUNTDEMOLOCK-001: the shared demo account sees its cards under the lock, with the reason', () => {
+    seedStore(useAuthStore, { demoMode: true, user: buildUser({ email: 'demo@trek.app' }) });
+    const { container } = renderCards();
+    expect(screen.getByRole('note')).toHaveTextContent('The shared demo account cannot be changed.');
+    expect(screen.queryByRole('button', { name: 'Save profile' })).not.toBeInTheDocument();
+    expect(container.querySelector('[data-demo-lock] [inert]')).toContainElement(
+      screen.getByRole('button', { hidden: true, name: 'Save profile' })
+    );
+  });
+
+  it('FE-COMP-ACCOUNTDEMOLOCK-002: the admin of a demo instance gets the cards as they are', () => {
+    seedStore(useAuthStore, { demoMode: true, user: buildUser({ email: 'admin@trek.app', role: 'admin' }) });
+    const { container } = renderCards();
+    expect(screen.queryByRole('note')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save profile' })).toBeEnabled();
+    expect(container.querySelector('[data-demo-lock]')).toBeNull();
+  });
+
+  it('FE-COMP-ACCOUNTDEMOLOCK-003: the demo address on an instance that is not a demo is left alone', () => {
+    seedStore(useAuthStore, { demoMode: false, user: buildUser({ email: 'demo@trek.app' }) });
+    renderCards();
+    expect(screen.queryByRole('note')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save profile' })).toBeEnabled();
+  });
+});
@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { useTranslation } from '../../i18n';
+import DemoLock from '../Demo/DemoLock';
+import { useDemoAccountLock } from '../Demo/useDemoLock';
+
+/**
+ * The account cards under the demo lock, on the desktop tab and the phone
+ * screen alike. Every visitor of a demo instance signs in as the one shared
+ * demo account, so its profile, password, two factor setup and passkeys stay
+ * on view but out of reach, while the admin of a demo instance and every
+ * account of a real one get the cards as they are. Both views wrap their
+ * cards in this, so whom the lock holds and the reason it gives are written
+ * once.
+ */
+export default function AccountDemoLock({ children }: { children: ReactNode }) {
+  const { t } = useTranslation();
+  const locked = useDemoAccountLock();
+  return (
+    <DemoLock locked={locked} reason={t('demo.lock.account')}>
+      {children}
+    </DemoLock>
+  );
+}
@@ -395,10 +395,20 @@ describe('AccountTab – MFA', () => {
    expect(screen.getByText(/requires two-factor authentication/i)).toBeInTheDocument();
  });

-  it('FE-COMP-ACCOUNT-036: MFA section shows demoBlocked message in demo mode', () => {
-    seedStore(useAuthStore, { demoMode: true });
+  it('FE-COMP-ACCOUNT-036: the shared demo account sees the whole tab under the demo lock', () => {
+    seedStore(useAuthStore, { demoMode: true, user: buildUser({ email: 'demo@trek.app', mfa_enabled: false }) });
+    const { container } = render(<AccountTab />);
+    expect(screen.getByRole('note')).toHaveTextContent('The shared demo account cannot be changed.');
+    expect(container.querySelector('[data-demo-lock] [inert]')).toContainElement(
+      screen.getByRole('button', { hidden: true, name: /Set up authenticator/ }),
+    );
+  });
+
+  it('FE-COMP-ACCOUNT-036b: the admin of a demo instance keeps the tab unlocked, 2FA included', () => {
+    seedStore(useAuthStore, { demoMode: true, user: buildUser({ email: 'admin@trek.app', role: 'admin', mfa_enabled: false }) });
    render(<AccountTab />);
-    expect(screen.getByText('Not available in demo mode')).toBeInTheDocument();
+    expect(screen.queryByRole('note')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Set up authenticator/ })).toBeInTheDocument();
  });
 });

@@ -12,6 +12,7 @@ import {
  SETTINGS_BUTTON, SETTINGS_BUTTON_DANGER, SETTINGS_BUTTON_PRIMARY, SettingRow, SettingRows, SettingsHint, StatusPill,
 } from './settingsKit'
 import { stripTrailingSlashes, useAccountSettings } from './useAccountSettings'
+import AccountDemoLock from './AccountDemoLock'

 /** The small turning ring a button shows while its request is on the way. */
 const SPINNER = 'h-3.5 w-3.5 flex-none animate-spin rounded-full border-2 border-current border-t-transparent'
@@ -71,6 +72,8 @@ export default function AccountTab(): React.ReactElement {

  return (
    <>
+      {/* The shared demo account: everything here is shown, nothing can be changed. */}
+      <AccountDemoLock>
      <Section title={t('settings.account')} icon={User}>
        {/* Who is signed in: the picture with its two actions, the role and the SSO link. */}
        <div className="flex items-center gap-4 rounded-[14px] border border-edge-faint bg-surface-card px-4 py-3.5">
@@ -221,10 +224,7 @@ export default function AccountTab(): React.ReactElement {
          </div>
        )}
        <SettingsHint>{t('settings.mfa.description')}</SettingsHint>
-        {demoMode ? (
-          <p className="m-0 font-medium text-warning" style={fs(12.5, 'body')}>{t('settings.mfa.demoBlocked')}</p>
-        ) : (
-          <>
+        <>
            <SettingRows>
              <SettingRow
                label={user?.mfa_enabled ? t('settings.mfa.enabled') : t('settings.mfa.disabled')}
@@ -357,12 +357,12 @@ export default function AccountTab(): React.ReactElement {
                </div>
              </div>
            )}
-          </>
-        )}
+        </>
      </Section>

      {/* Passkeys */}
      <PasskeysSection demoMode={demoMode} />
+      </AccountDemoLock>

      {/* Delete Account Blocked */}
      <DialogShell
@@ -483,3 +483,18 @@ describe('DisplaySettingsTab week start (#2029)', () => {
    expect(await screen.findByText('Save failed')).toBeInTheDocument();
  });
 });
+
+describe('DisplaySettingsTab – the demo account', () => {
+  it('FE-COMP-DISPLAY-DEMO-001: the shared demo account sees English under the demo lock', () => {
+    seedStore(useAuthStore, { user: buildUser({ email: 'demo@trek.app' }), isAuthenticated: true, demoMode: true });
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'en' }), isLoaded: true });
+    render(<DisplaySettingsTab />);
+    expect(screen.getByRole('note')).toHaveTextContent('The demo always runs in English.');
+  });
+
+  it('FE-COMP-DISPLAY-DEMO-002: any other account of a demo instance picks its language freely', () => {
+    seedStore(useAuthStore, { user: buildUser({ email: 'admin@trek.app' }), isAuthenticated: true, demoMode: true });
+    render(<DisplaySettingsTab />);
+    expect(screen.queryByRole('note')).not.toBeInTheDocument();
+  });
+});
@@ -18,6 +18,8 @@ import { DEFAULT_START_PAGE, DEFAULT_START_TRIP_TAB } from '../../utils/startDes
 import type { DistanceUnit } from '../../types'
 import { DEFAULT_WEEK_START } from '@trek/shared'
 import { weekStartOptions } from '../../utils/calendarWeek'
+import DemoLock from '../Demo/DemoLock'
+import { useDemoAccountLock } from '../Demo/useDemoLock'

 /** A select on the right of a row: wide enough for a currency or a weekday, never wider than the row. */
 const SELECT_BOX = 'w-[260px] max-w-full'
@@ -25,6 +27,7 @@ const SELECT_BOX = 'w-[260px] max-w-full'
 export default function DisplaySettingsTab(): React.ReactElement {
  const { settings, save } = useSettingSaver()
  const { t, locale } = useTranslation()
+  const demoLocked = useDemoAccountLock()
  const [tempUnit, setTempUnit] = useState<string>(settings.temperature_unit || DEFAULT_SETTINGS.temperature_unit)
  const [distanceUnit, setDistanceUnit] = useState<DistanceUnit>(settings.distance_unit || DEFAULT_SETTINGS.distance_unit)
  const [langOpen, setLangOpen] = useState(false)
@@ -123,7 +126,9 @@ export default function DisplaySettingsTab(): React.ReactElement {
            }
          />

-          {/* Language: every option at a glance on a wide window, a compact list on a narrow one */}
+          {/* Language: every option at a glance on a wide window, a compact list on a narrow one.
+              The shared demo account always runs in English. */}
+          <DemoLock locked={demoLocked} reason={t('demo.lock.language')} size="row">
          <SettingRow label={t('settings.language')} stacked>
            <div className="hidden sm:block">
              <ChoiceChips
@@ -162,6 +167,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
              )}
            </div>
          </SettingRow>
+          </DemoLock>

          {/* Place names (#1799): searches can answer in another language than the app. */}
          <SettingRow
@@ -18,10 +18,13 @@ import { SETTINGS_BUTTON, SETTINGS_BUTTON_PRIMARY, SETTINGS_ICON_BUTTON, Setting
 import { OAUTH_PRESETS, useMcpIntegration, type OAuthClient } from './useMcpIntegration'
 import { useIntegrationGates } from './useIntegrationGates'
 import WandererConnectionSection from './WandererConnectionSection'
+import DemoLock from '../Demo/DemoLock'
+import { useDemoAccountLock } from '../Demo/useDemoLock'

 export default function IntegrationsTab(): React.ReactElement {
  const S = useIntegrations()
  const managed = S.managed
+  const demoLocked = useDemoAccountLock()
  return (
    <>
      {/* Immich, Synology Photos and AirTrail all connect to a server the reader
@@ -42,9 +45,15 @@ export default function IntegrationsTab(): React.ReactElement {
      {S.llmEnabled && S.ownParsing && !managed && <LlmConnectionSection />}
      {/* Above MCP on purpose: an API key needs no addon, and someone looking for
          one should not have to read past a section about AI assistants. */}
-      <ApiKeysSection />
+      <DemoLock locked={demoLocked} reason={S.t('demo.lock.apiKeys')}>
+        <ApiKeysSection />
+      </DemoLock>
      {/* TREK inside Claude rides on the MCP server, so it follows that addon. */}
-      {S.mcpEnabled && <IntegrationsMcpSection S={S} />}
+      {S.mcpEnabled && (
+        <DemoLock locked={demoLocked} reason={S.t('demo.lock.mcp')}>
+          <IntegrationsMcpSection S={S} />
+        </DemoLock>
+      )}
      <McpTokenModals S={S} />
      <OAuthClientModals S={S} />
    </>
@@ -33,6 +33,12 @@ vi.mock('./MapboxPreview', () => ({
  ),
 }));

+// jsdom has no WebGL2; these cases are about a browser that has it.
+vi.mock('../../utils/webgl', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('../../utils/webgl')>()),
+  hasWebGL: () => true,
+}));
+
 beforeEach(() => {
  resetAllStores();
  vi.clearAllMocks();
@@ -132,7 +132,7 @@ export default function MapSettingsTab(): React.ReactElement {
  const {
    managed, saving, provider, changeProvider, mapTileUrl, setMapTileUrl, mapboxToken, setMapboxToken,
    cartoKey, setCartoKey, cartoNeedsKey, mapboxStyle, setMapboxStyle, mapbox3d, setMapbox3d,
-    mapboxQuality, setMapboxQuality, previewPlaces, save: saveMapSettings,
+    mapboxQuality, setMapboxQuality, previewPlaces, glPreview, webgl2Missing, save: saveMapSettings,
  } = useMapSettingsForm()
  // One chunk per engine — see components/Map/glLazy.tsx.
  const GlMapPreview = provider === 'maplibre-gl' ? GlMapPreviewMaplibre : GlMapPreviewMapbox
@@ -318,7 +318,7 @@ export default function MapSettingsTab(): React.ReactElement {
      )}

      <div className="relative h-[200px] w-full overflow-hidden rounded-[14px] border border-edge-faint bg-surface-tertiary">
-        {provider !== 'leaflet' ? (
+        {glPreview ? (
          /* A net of its own: the preview is the one place a user flips providers
             live, so it is the likeliest chunk to fail — and a broken preview must
             not take the rest of the settings tab with it. */
@@ -363,6 +363,7 @@ export default function MapSettingsTab(): React.ReactElement {
          })
        )}
      </div>
+      {webgl2Missing && <SettingsHint>{t('map.webgl2.fallback')}</SettingsHint>}

      <div className="flex justify-end">
        <button type="button"
@@ -32,7 +32,7 @@ const mapboxModule = vi.hoisted(() => ({ accessToken: '', Map: mapboxCtor }));

 vi.mock('mapbox-gl', () => ({ default: mapboxModule }));
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}));
-vi.mock('maplibre-gl', () => ({ default: { Map: maplibreCtor } }));
+vi.mock('maplibre-gl', () => ({ Map: maplibreCtor }));
 vi.mock('maplibre-gl/dist/maplibre-gl.css', () => ({}));

 vi.mock('../Map/mapboxSetup', () => ({
@@ -45,7 +45,7 @@ vi.mock('../Map/mapboxSetup', () => ({
 import { isStandardFamily, supportsCustom3d, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup';
 import { MAPBOX_DEFAULT_STYLE, OPENFREEMAP_DEFAULT_STYLE } from '../Map/glProviders';
 import mapboxgl from 'mapbox-gl';
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
 import GlMapPreviewWithEngine from './MapboxPreview';

 // The engine is a prop now, not a module import — that is what keeps mapbox-gl and
@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { isStandardFamily, supportsCustom3d, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
 import { MAPBOX_DEFAULT_STYLE, normalizeStyleForProvider, type GlMapProvider } from '../Map/glProviders'
+import { buildGlMap } from '../Map/glSupport'
 import { fs } from '../shared/DialogShell'

 interface Props {
@@ -46,11 +47,13 @@ export default function GlMapPreview({ provider = 'mapbox-gl', token = '', style
      antialias: quality,
    }
    if (!isMapLibre) mapOptions.projection = quality ? 'globe' : 'mercator'
-    // MapLibre 5's around-center mouse rotate ping-pongs near mid-screen (#1545)
+    // MapLibre's around-center mouse rotate ping-pongs near mid-screen (#1545)
    // — see MapViewGL. Keep the plain dx-based rotate everywhere.
    if (isMapLibre) mapOptions.aroundCenter = false

-    const map = new gl.Map(mapOptions as any)
+    // Null when the GPU refused WebGL2: the settings form has switched the preview to Leaflet by then.
+    const map = buildGlMap(() => new gl.Map(mapOptions as any))
+    if (!map) return
    mapRef.current = map

    map.on('load', () => {
@@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { buildUser } from '../../../../tests/helpers/factories';
 import { render, screen } from '../../../../tests/helpers/render';
 import { resetAllStores, seedStore } from '../../../../tests/helpers/store';
+import { useAddonStore } from '../../../store/addonStore';
 import { useAssistantStore } from '../../../store/assistantStore';
 import { useAuthStore } from '../../../store/authStore';
 import { useSettingsStore } from '../../../store/settingsStore';
@@ -33,6 +34,8 @@ beforeEach(() => {
  vi.clearAllMocks();
  useAssistantStore.setState({ status: null });
  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+  // The card shows while the assistant is on, and only then is its status asked for.
+  seedStore(useAddonStore, { loaded: true, addons: [{ id: 'ai_assistant', enabled: true }] });
  repo.models.mockResolvedValue([]);
 });

@@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { buildAdmin, buildUser } from '../../../../tests/helpers/factories';
 import { render, screen, waitFor } from '../../../../tests/helpers/render';
 import { resetAllStores, seedStore } from '../../../../tests/helpers/store';
+import { useAddonStore } from '../../../store/addonStore';
 import { useAssistantStore } from '../../../store/assistantStore';
 import { useAuthStore } from '../../../store/authStore';

@@ -51,6 +52,8 @@ beforeEach(() => {
  vi.clearAllMocks();
  useAssistantStore.setState({ status: null });
  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+  // The card shows while the assistant is on, and only then is its status asked for.
+  seedStore(useAddonStore, { loaded: true, addons: [{ id: 'ai_assistant', enabled: true }] });
  repo.models.mockResolvedValue([{ id: 'claude-sonnet', label: 'Claude Sonnet', supportsTools: true }]);
  repo.disconnect.mockResolvedValue(undefined);
  repo.chatgptStart.mockResolvedValue({
@@ -140,4 +143,13 @@ describe('AiConnectionSection', () => {
    const { container } = render(<AiConnectionSection />);
    await waitFor(() => expect(container).toBeEmptyDOMElement());
  });
+
+  it('FE-COMP-AI-CONNECTION-008: the shared demo account sees its own connection locked, and no admin hint', async () => {
+    seedStore(useAuthStore, { user: buildUser({ email: 'demo@trek.app' }), isAuthenticated: true, demoMode: true });
+    repo.status.mockResolvedValue(status({ canConnectOwn: false }));
+    render(<AiConnectionSection />);
+    expect(await screen.findByRole('note')).toHaveTextContent('Your own AI connection cannot be added in the demo.');
+    expect(screen.queryByText('Your admin sets this up.')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { hidden: true, name: 'Connect your own provider' })).toBeDisabled();
+  });
 });
@@ -3,6 +3,8 @@ import { Loader2, LogOut, MessageCircle, Sparkles, Unplug } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from '../../../i18n';
 import { useAssistantCostEstimates, useAssistantMapFollow } from '../../Assistant/useAssistantMapFollow';
+import DemoLock from '../../Demo/DemoLock';
+import { useDemoAccountLock } from '../../Demo/useDemoLock';
 import ConfirmDialog from '../../shared/ConfirmDialog';
 import CustomSelect from '../../shared/CustomSelect';
 import { fs } from '../../shared/DialogShell';
@@ -202,6 +204,25 @@ function AssistantBehaviour() {
  );
 }

+/** Where the shared demo account would connect a provider of its own: shown, and locked. */
+function LockedOwnConnection() {
+  const { t } = useTranslation();
+  return (
+    <DemoLock locked reason={t('demo.lock.ai')} size="row">
+      <SettingRows>
+        <SettingRow
+          label={t('demo.lock.aiTitle')}
+          control={
+            <button type="button" disabled className={SETTINGS_BUTTON} style={fs(13, 'body')}>
+              {t('assistant.errorAction.connectOwn')}
+            </button>
+          }
+        />
+      </SettingRows>
+    </DemoLock>
+  );
+}
+
 /** The connect panel, opened on purpose or because nothing is connected yet. */
 function ConnectPanel({ S }: { S: AiConnections }) {
  const { t } = useTranslation();
@@ -254,6 +275,7 @@ export default function AiConnectionSection({
 }): React.ReactElement | null {
  const { t } = useTranslation();
  const S = useAiConnections();
+  const demoLocked = useDemoAccountLock();
  const text = aiSectionText(assistant, parsing);
  if (S.view === 'hidden') return null;
  const own = S.own;
@@ -277,7 +299,8 @@ export default function AiConnectionSection({
      {S.view === 'own' && own && <OwnConnection S={S} own={own} />}
      {S.view === 'instance' && <InstanceConnection S={S} />}
      {assistant && (S.view === 'own' || S.view === 'instance') && <AssistantBehaviour />}
-      {S.view === 'adminOnly' && <SettingsHint>{t('assistant.setup.adminOnly')}</SettingsHint>}
+      {S.view === 'adminOnly' && !demoLocked && <SettingsHint>{t('assistant.setup.adminOnly')}</SettingsHint>}
+      {demoLocked && S.view !== 'loading' && <LockedOwnConnection />}

      {S.panel && <ConnectPanel S={S} />}
      <SectionFooter S={S} />
@@ -4,7 +4,9 @@ import type { AiConnectionView, AiStatusResponse } from '@trek/shared';
 import { createElement, type ReactNode } from 'react';
 import { MemoryRouter, useLocation } from 'react-router';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { seedStore } from '../../../../tests/helpers/store';
 import { TranslationProvider } from '../../../i18n/TranslationContext';
+import { useAddonStore } from '../../../store/addonStore';
 import { useAssistantStore } from '../../../store/assistantStore';

 const repo = vi.hoisted(() => ({
@@ -61,6 +63,8 @@ function renderConnections(phone = false) {
 beforeEach(() => {
  vi.clearAllMocks();
  useAssistantStore.setState({ status: null, window: { open: false, minimized: false } });
+  // The card shows while the assistant is on, and only then is its status asked for.
+  seedStore(useAddonStore, { loaded: true, addons: [{ id: 'ai_assistant', enabled: true }] });
  repo.status.mockResolvedValue(status());
  repo.models.mockResolvedValue([
    { id: 'claude-sonnet', label: 'Claude Sonnet', supportsTools: true },
@@ -5,6 +5,7 @@ import { useAuthStore } from '../../store/authStore';
 import { useSettingsStore } from '../../store/settingsStore';
 import type { Place } from '../../types';
 import { normalizeStyleForProvider } from '../Map/glProviders';
+import { useWebGL2 } from '../Map/glSupport';
 import { useToast } from '../shared/Toast';
 import { type MapProvider, normalizeProvider, previewPlace, slotStyle, styleForProvider } from './mapSettingsModel';

@@ -51,6 +52,11 @@ export function useMapSettingsForm({ mirrorStyleBeforeSave = false }: MapSetting
  }, [settings]);

  const previewPlaces = useMemo((): Place[] => [previewPlace()], []);
+  // Both GL engines need WebGL2. Without it the preview shows the Leaflet map the
+  // trip planner falls back to, and both shells say why.
+  const webgl2 = useWebGL2();
+  const glPreview = provider !== 'leaflet' && webgl2;
+  const webgl2Missing = provider !== 'leaflet' && !webgl2;

  const save = async (): Promise<void> => {
    setSaving(true);
@@ -105,6 +111,8 @@ export function useMapSettingsForm({ mirrorStyleBeforeSave = false }: MapSetting
    mapboxQuality,
    setMapboxQuality,
    previewPlaces,
+    glPreview,
+    webgl2Missing,
    save,
  };
 }
@@ -19,7 +19,8 @@ import type { StudioUploader } from './studioUpload'
 * has a handful of completely different kinds of thing you reach for (which
 * page, what from the journey, what arrangement, what to draw), and putting
 * them behind tabs in a single 200px column would make each of them cramped.
- * An icon rail costs 64px and gives the panel the room a photo browser needs.
+ * An icon rail costs 64px, a little more where a section's name holds a longer
+ * word, and gives the panel the room a photo browser needs.
 *
 * Which section is open is the shell's when it says so (`section` and
 * `onSection`), so the inspector on the other side can open the Theme or the
@@ -1,5 +1,7 @@
 import type { BookDocument } from '@trek/shared';
 import { normalizeBookDocument } from '@trek/shared';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { beforeEach, describe, expect, it, vi } from 'vitest';

 import { fireEvent, render, screen, within } from '../../../../tests/helpers/render';
@@ -9,11 +11,11 @@ import type { StudioUploader } from '../studioUpload';
 import { RAIL_SECTIONS, type RailSection } from './railSections';

 /**
- * FE-STUDIO-RAIL-001 to FE-STUDIO-RAIL-006: the rail down the side of Studio
+ * FE-STUDIO-RAIL-001 to FE-STUDIO-RAIL-007: the rail down the side of Studio
 * and the panel it opens. Every section is a tab that opens its own panel
 * under one head, the keyboard reaches every tab, a long name wraps inside
- * the rail, and the shell can hold the open section so the inspector can open
- * one from the other side.
+ * the rail and only between words, and the shell can hold the open section so
+ * the inspector can open one from the other side.
 */

 const SOURCE: JourneySource = { entries: [], photos: [], photoEntries: {} };
@@ -54,6 +56,16 @@ function draw(over: { section?: RailSection; onSection?: (s: RailSection) => voi
  );
 }

+/** Studio's stylesheet, which jsdom does not apply: its rules are the assertion. */
+const STUDIO_CSS = readFileSync(resolve(process.cwd(), 'src/styles/studio.css'), 'utf8');
+
+/** The rule written for exactly this selector, searched in `source` (one media query, say). */
+function rule(selector: string, source = STUDIO_CSS): string {
+  const at = source.indexOf(`${selector} {`);
+  expect(at, `${selector} missing from studio.css`).toBeGreaterThan(-1);
+  return source.slice(at, source.indexOf('}', at) + 1);
+}
+
 /** The head of the panel that is open: the name every panel opens on. */
 const panelTitle = () => must(document.querySelector('.st-side .st-panel-head .st-what-label')).textContent;

@@ -168,4 +180,42 @@ describe('the rail', () => {
    fireEvent.click(screen.getByRole('tab', { name: 'journey.studio.stickers' }));
    expect(screen.getByRole('textbox', { name: 'journey.studio.searchStickers' })).toBeTruthy();
  });
+
+  it('FE-STUDIO-RAIL-007: wraps a name only between words, the rail growing to its longest word instead', () => {
+    // "Elements" in the label's 9.5px Poppins is 50.4px wide and a 52px tab left
+    // it 48px, so overflow-wrap: anywhere cut it into "Element" and "s" wherever
+    // no hyphenation dictionary was at hand. Catalan's "Maquetacions" is 77px and
+    // a larger text size widens every word, so no fixed width holds them all.
+    draw();
+    const selector = '.trek-dash .st-rail-btn .st-rail-label';
+    const names = [...document.querySelectorAll('.st-rail-label')];
+    expect(names).toHaveLength(RAIL_SECTIONS.length);
+    // Every name the rail renders is one the rule reaches; .trek-dash is the shell's root.
+    for (const name of names) expect(name.matches(selector.replace('.trek-dash ', ''))).toBe(true);
+    const label = rule(selector);
+    expect(label).toMatch(/overflow-wrap:\s*normal;/);
+    expect(label).toMatch(/word-break:\s*keep-all;/);
+    expect(label).toMatch(/hyphens:\s*manual;/);
+    expect(label).not.toMatch(/anywhere|break-all|break-word|hyphens:\s*auto/);
+    // The type stays on the caption step the user's text size scales.
+    expect(label).toMatch(/font-size:\s*calc\([\d.]+px \* var\(--fs-scale-caption, 1\)\)/);
+
+    // A tab takes the rail's width, and the rail's column is 64px or its
+    // min-content, which is the longest word, in each of the three layouts.
+    expect(rule('.trek-dash .st-rail-btn')).not.toMatch(/[\s;{]width:/);
+    const columns = [...STUDIO_CSS.matchAll(/\.st-body \{[^}]*?grid-template-columns:\s*([^;]+);/g)].map((m) => m[1]);
+    expect(columns).toEqual([
+      'minmax(64px, min-content) 236px minmax(0, 1fr) 300px',
+      'minmax(64px, min-content) 236px minmax(0, 1fr)',
+      'minmax(64px, min-content) minmax(0, 1fr)',
+    ]);
+
+    // Below 1080 the panel floats over the workbench's own cell, so it starts
+    // where the rail ends, not at a fixed 64px from the edge.
+    const at = STUDIO_CSS.indexOf('@media (max-width: 1079px) {');
+    expect(at, 'the narrow layout missing from studio.css').toBeGreaterThan(-1);
+    const narrow = STUDIO_CSS.slice(at, STUDIO_CSS.indexOf('\n}', at));
+    expect(narrow).toContain('.trek-dash .st-side, .trek-dash .st-work-wrap { grid-area: 1 / 2; }');
+    expect(rule('.trek-dash .st-side', narrow)).not.toMatch(/position:\s*absolute|inset-inline-start/);
+  });
 });
@@ -11,9 +11,9 @@ import { RAIL_IDS, RAIL_SECTIONS, type RailSection } from './railSections';
 * A list of tabs to a screen reader and to the keyboard, as it is to the eye:
 * Tab reaches the open section, the arrows move up and down the rail, Home and
 * End jump to its ends, and Enter or Space opens a section (studioRoving.ts).
- * A name longer than the rail is wide wraps onto a second line and breaks
- * inside a word only when the word alone is wider than the rail; the title
- * carries it whole either way.
+ * A name longer than the rail is wide wraps onto a second line, only ever
+ * between words: where one word alone is wider, the rail grows to fit it
+ * (studio.css) instead of cutting it. The title carries the name whole.
 */
 export function StudioRail({
  section,
@@ -24,9 +24,9 @@ function releaseNotice(overrides: Partial<SystemNoticeDTO> = {}): SystemNoticeDT
      introKey: 'rel.intro',
      featuresLabelKey: 'rel.features.label',
      features: [
-        { iconName: 'Database', visual: 'places-api', titleKey: 'rel.f1.title', bodyKey: 'rel.f1.body' },
-        { iconName: 'Route', visual: 'roadtrip', titleKey: 'rel.f2.title', bodyKey: 'rel.f2.body' },
-        { iconName: 'MapPin', visual: 'dawarich', titleKey: 'rel.f3.title', bodyKey: 'rel.f3.body' },
+        { iconName: 'Mountain', visual: 'tours', titleKey: 'rel.f1.title', bodyKey: 'rel.f1.body' },
+        { iconName: 'BookOpen', visual: 'studio', titleKey: 'rel.f2.title', bodyKey: 'rel.f2.body' },
+        { iconName: 'Sparkles', visual: 'assistant', titleKey: 'rel.f3.title', bodyKey: 'rel.f3.body' },
      ],
      note: {
        eyebrowKey: 'rel.note.eyebrow',
@@ -78,9 +78,9 @@ describe('ReleaseNoticeModal', () => {
    renderModal()
    expect(screen.getByText('rel.f1.title')).toBeInTheDocument()
    expect(document.querySelectorAll('.rn-feature')).toHaveLength(3)
-    expect(document.querySelector('.rn-vis-places')).not.toBeNull()
-    expect(document.querySelector('.rn-vis-road')).not.toBeNull()
-    expect(document.querySelector('.rn-vis-trail')).not.toBeNull()
+    expect(document.querySelector('.rn-vis-tours')).not.toBeNull()
+    expect(document.querySelector('.rn-vis-studio')).not.toBeNull()
+    expect(document.querySelector('.rn-vis-assist')).not.toBeNull()
  })

  it('FE-RN-004: splits the note body on the blank line into separate paragraphs', () => {
@@ -194,20 +194,20 @@ describe('ReleaseNoticeModal', () => {
    const n = releaseNotice()
    n.release!.features = [
      ...n.release!.features,
-      { iconName: 'FolderSync', visual: 'docsync', layout: 'wide', titleKey: 'rel.f4.title', bodyKey: 'rel.f4.body' },
+      { iconName: 'LifeBuoy', visual: 'help', layout: 'wide', titleKey: 'rel.f4.title', bodyKey: 'rel.f4.body' },
    ]
    renderModal(n)
    const cards = document.querySelectorAll('.rn-feature')
    expect(cards).toHaveLength(4)
    expect(cards[3].classList.contains('rn-feature-wide')).toBe(true)
    expect([...cards].slice(0, 3).some(c => c.classList.contains('rn-feature-wide'))).toBe(false)
-    // The document sync drawing: the wordmark without its API pill, and the five stores.
+    // The help drawing: the help button and two rows of greetings, each written twice to loop.
    const wide = cards[3]
-    expect(wide.querySelector('.rn-vis-docs')).not.toBeNull()
-    expect(wide.querySelectorAll('.rn-vis-docs-store')).toHaveLength(5)
-    expect(wide.querySelector('.trek-mark .pill-bg')).toBeNull()
-    // The places card keeps the pill: that one is about the index.
-    expect(cards[0].querySelector('.trek-mark .pill-bg')).not.toBeNull()
+    expect(wide.querySelector('.rn-vis-help-q')).not.toBeNull()
+    expect(wide.querySelectorAll('.rn-vis-hello-row')).toHaveLength(2)
+    expect(wide.querySelectorAll('.rn-vis-hello').length % 2).toBe(0)
+    // The tours card lists the kinds of tour along its foot.
+    expect(cards[0].querySelectorAll('.rn-vis-tours-kind')).toHaveLength(5)
  })

  it('FE-RN-016: the close button belongs to the panel, not the note', () => {
@@ -1,94 +1,166 @@
 import React from 'react';
 import * as LucideIcons from 'lucide-react';
-import { ArrowLeftRight, Car, Landmark, Search, Sparkles } from 'lucide-react';
-import DawarichIcon from '../shared/DawarichIcon';
-import { NextcloudIcon, OpenCloudIcon, PaperlessIcon, PapraIcon, SynologyDriveIcon } from '../shared/DocumentProviderIcons';
-import TrekMark from '../shared/TrekMark';
+import { Bike, Check, Footprints, Landmark, Plane, Sailboat, Snowflake, Sparkles, Star, TrendingUp } from 'lucide-react';
+import './releaseNoticeVisuals.css';

 /*
 * The small pictures on the release cards: pieces of TREK itself, drawn at card
 * size rather than screenshotted, because a screenshot this small is a blur. They
- * carry no words, only place names and figures that read the same in every
- * language, so nothing here needs translating.
+ * carry no words, only place names, greetings and figures that read the same in
+ * every language, so nothing here needs translating. Every colour lives in
+ * releaseNoticeVisuals.css, and every motion stops under reduced motion.
 */

-function PlacesApiVisual() {
-  return (
-    <div className="rn-vis rn-vis-places">
-      <span className="rn-vis-trekbadge"><TrekMark className="rn-vis-trekmark" /></span>
-      <div className="rn-vis-search">
-        <Search size={11} strokeWidth={2.4} />
-        <span className="rn-vis-typed">Fushimi Inari</span>
-        <span className="rn-vis-caret" />
-      </div>
-      <div className="rn-vis-result">
-        <span className="rn-vis-cat" style={{ background: '#ef4444' }}><Landmark size={10} strokeWidth={2.2} /></span>
-        <span className="rn-vis-place">
-          <span>Fushimi Inari Taisha</span>
-          <small>Kyoto</small>
-        </span>
-      </div>
-    </div>
-  );
-}
+// ── Tours: a trail climbing to the summit at dusk, and the kinds of tour under it ──

-// The route and its stops, in the planner's own route blue and marker style.
-const ROUTE = 'M26 84 C 58 82, 60 44, 96 46 S 136 74, 160 52 S 176 30, 182 28';
+const FAR_RIDGE = 'M0 66 L20 50 L38 60 L60 38 L84 56 L104 44 L128 58 L152 40 L176 54 L200 46 V112 H0 Z';
+const MOUNTAIN = 'M0 112 V86 L44 62 L84 28 L98 38 L112 32 L152 68 L200 80 V112 Z';
+const SNOW = 'M84 28 L73 38 L79 37 L84 42 L89 37.5 L95 37 Z';
+const MEADOW = 'M0 112 V96 C 30 88, 60 90, 92 94 S 160 82, 200 90 V112 Z';
+// From the valley up the mountain's flank to the summit, in switchbacks.
+const TRAIL = 'M24 100 C 40 96, 50 90, 54 84 S 66 78, 70 72 S 64 62, 72 56 S 82 48, 78 42 S 82 34, 84 29';
+const KINDS = [Footprints, Bike, Sailboat, Snowflake, Landmark];

-function RoadtripVisual() {
+function ToursVisual() {
  return (
-    <div className="rn-vis rn-vis-road">
-      <svg viewBox="0 0 200 112" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
-        <path className="rn-vis-road-casing" d={ROUTE} />
-        <path className="rn-vis-road-line" d={ROUTE} />
+    <div className="rn-vis rn-vis-tours">
+      <svg className="rn-vis-tours-scene" viewBox="0 0 200 112" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <circle className="rn-vis-tours-sun" cx="160" cy="24" r="9" />
+        <path className="rn-vis-tours-far" d={FAR_RIDGE} />
+        <path className="rn-vis-tours-mountain" d={MOUNTAIN} />
+        <path className="rn-vis-tours-snow" d={SNOW} />
+        <path className="rn-vis-tours-meadow" d={MEADOW} />
+        <path className="rn-vis-tours-trail" d={TRAIL} pathLength={1} />
+        <circle className="rn-vis-tours-walker" r="2.6">
+          <animateMotion dur="5s" begin="1.6s" repeatCount="indefinite" path={TRAIL} />
+        </circle>
+        <g className="rn-vis-tours-flag">
+          <line x1="84" y1="29" x2="84" y2="17" />
+          <path d="M84 17 L93 20 L84 23 Z" />
+        </g>
      </svg>
-      <span className="rn-vis-marker" style={{ left: '13%', top: '75%', background: '#6366f1' }}>1</span>
-      <span className="rn-vis-marker" style={{ left: '48%', top: '41%', background: '#f59e0b' }}>2</span>
-      <span className="rn-vis-marker" style={{ left: '91%', top: '25%', background: '#ec4899' }}>3</span>
-      <span className="rn-vis-distance"><Car size={10} strokeWidth={2.2} />386 km</span>
-    </div>
-  );
-}
-
-// A recorded day, with the two places the traveller stayed.
-const TRAIL = '84,94 96,88 106,80 118,76 130,74 142,66 152,58 162,62 172,66 180,56 186,46';
-const STAYS: Array<[number, number]> = [[130, 74], [186, 46]];
-
-function DawarichVisual() {
-  return (
-    <div className="rn-vis rn-vis-trail">
-      <svg viewBox="0 0 200 112" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
-        <polyline className="rn-vis-trail-line" points={TRAIL} />
-        {STAYS.map(([x, y]) => <circle key={x} className="rn-vis-trail-stay" cx={x} cy={y} r="3.4" />)}
-      </svg>
-      <span className="rn-vis-brand"><DawarichIcon size={58} /></span>
-    </div>
-  );
-}
-
-// A trip's documents travelling both ways between TREK and the five stores. The
-// wordmark without the API pill: this is TREK itself, not its index.
-const STORES = [PaperlessIcon, PapraIcon, NextcloudIcon, OpenCloudIcon, SynologyDriveIcon];
-
-function DocSyncVisual() {
-  return (
-    <div className="rn-vis rn-vis-docs">
-      <span className="rn-vis-trekbadge"><TrekMark pill={false} className="rn-vis-trekmark" /></span>
-      <span className="rn-vis-docs-flow"><ArrowLeftRight size={14} strokeWidth={2.4} /></span>
-      <div className="rn-vis-docs-stores">
-        {STORES.map((Store, i) => (
-          <span key={i} className="rn-vis-docs-store"><Store size={22} /></span>
+      <span className="rn-vis-tours-climb">
+        <TrendingUp size={9} strokeWidth={2.6} />
+        860 m
+      </span>
+      <div className="rn-vis-tours-kinds">
+        {KINDS.map((Kind, i) => (
+          <span key={i} className="rn-vis-tours-kind" style={{ animationDelay: `${1.2 + i * 0.08}s` }}>
+            <Kind size={10} strokeWidth={2.2} />
+          </span>
        ))}
      </div>
    </div>
  );
 }

+// ── TREK Studio: an open photo book with a polaroid, a stamp and a sticker ──
+
+function StudioVisual() {
+  return (
+    <div className="rn-vis rn-vis-studio">
+      <div className="rn-vis-book">
+        <div className="rn-vis-page rn-vis-page-start">
+          <div className="rn-vis-polaroid">
+            <svg viewBox="0 0 60 44" aria-hidden="true">
+              <rect className="rn-vis-sky" width="60" height="44" />
+              <circle className="rn-vis-sun" cx="42" cy="15" r="6" />
+              <path className="rn-vis-peak-far" d="M0 32 L12 20 L20 26 L32 12 L44 24 L52 18 L60 26 V44 H0 Z" />
+              <path className="rn-vis-peak-near" d="M0 38 L14 28 L26 34 L38 26 L60 36 V44 H0 Z" />
+            </svg>
+          </div>
+          <span className="rn-vis-tape" />
+        </div>
+        <div className="rn-vis-page rn-vis-page-end">
+          <span className="rn-vis-book-title">Dolomiti</span>
+          <span className="rn-vis-book-line" />
+          <span className="rn-vis-book-line rn-vis-book-line-short" />
+          <span className="rn-vis-stamp">
+            <Plane size={10} strokeWidth={2.2} />
+          </span>
+        </div>
+        <span className="rn-vis-gutter" />
+      </div>
+      <span className="rn-vis-sticker">
+        <Star size={15} strokeWidth={1.8} />
+      </span>
+    </div>
+  );
+}
+
+// ── The assistant: a day in Porto proposed stop by stop, ready to apply ──
+
+const PORTO: Array<{ time: string; name: string; tone: string }> = [
+  { time: '09:30', name: 'Ribeira', tone: 'sight' },
+  { time: '12:30', name: 'Livraria Lello', tone: 'culture' },
+  { time: '16:00', name: 'Torre dos Clérigos', tone: 'view' },
+];
+
+function AssistantVisual() {
+  return (
+    <div className="rn-vis rn-vis-assist">
+      <div className="rn-vis-assist-head">
+        <span className="rn-vis-assist-avatar">
+          <Sparkles size={10} strokeWidth={2.4} />
+        </span>
+        <span className="rn-vis-assist-typing">
+          <i />
+          <i />
+          <i />
+        </span>
+      </div>
+      <div className="rn-vis-assist-card">
+        {PORTO.map((stop, i) => (
+          <div key={stop.name} className="rn-vis-assist-row" style={{ animationDelay: `${0.5 + i * 0.35}s` }}>
+            <span className="rn-vis-assist-time">{stop.time}</span>
+            <span className={`rn-vis-assist-dot rn-vis-assist-dot-${stop.tone}`} />
+            <span className="rn-vis-assist-name">{stop.name}</span>
+          </div>
+        ))}
+      </div>
+      <span className="rn-vis-assist-apply">
+        <Check size={11} strokeWidth={3} />
+      </span>
+    </div>
+  );
+}
+
+// ── Help on every screen, in 27 languages: hello in each of them, drifting by ──
+
+const HELLO_A = ['Hallo', 'Bonjour', 'Hola', 'Ciao', 'Olá', 'Hej', 'Ahoj', 'Cześć', 'Szia', 'Tere', 'Salam', 'Bon dia', 'Halo'];
+const HELLO_B = ['Привіт', 'Привет', 'Γεια σου', 'مرحبا', 'こんにちは', '안녕하세요', '你好', '哈囉', 'สวัสดี', 'Xin chào', 'Merhaba', 'Dobrý deň'];
+
+function HelloRow({ words, reverse }: { words: string[]; reverse?: boolean }) {
+  // Written twice, so the row can slide by half its width and start over without a seam.
+  return (
+    <div className={reverse ? 'rn-vis-hello-row rn-vis-hello-row-reverse' : 'rn-vis-hello-row'}>
+      {[...words, ...words].map((word, i) => (
+        <span key={i} className="rn-vis-hello" lang="und">
+          {word}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function HelpVisual() {
+  return (
+    <div className="rn-vis rn-vis-help">
+      <span className="rn-vis-help-q">?</span>
+      <div className="rn-vis-help-langs">
+        <HelloRow words={HELLO_A} />
+        <HelloRow words={HELLO_B} reverse />
+      </div>
+      <span className="rn-vis-help-count">27</span>
+    </div>
+  );
+}
+
 const VISUALS: Record<string, () => React.ReactElement> = {
-  'places-api': PlacesApiVisual,
-  roadtrip: RoadtripVisual,
-  dawarich: DawarichVisual,
-  docsync: DocSyncVisual,
+  tours: ToursVisual,
+  studio: StudioVisual,
+  assistant: AssistantVisual,
+  help: HelpVisual,
 };

 /** The card's picture, or its icon when the release names no drawing this client knows. */
@@ -380,223 +380,6 @@
  flex: none;
 }

-/* ── The card pictures ─────────────────────────────────────────────────── */
-
-.rn-vis {
-  position: absolute;
-  inset: 0;
-  color: #f5f5f7;
-  font-family: var(--font-system);
-}
-
-.rn-vis-road > svg,
-.rn-vis-trail > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
-
-.rn-vis-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: oklch(1 0 0 / 0.55);
-}
-
-/* Places API: the index answering a search while it is typed. */
-.rn-vis-places {
-  padding: 9px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-/* The same wordmark the API keys card leads with, centred; its pill text inverts against the tile. */
-.rn-vis-trekbadge { align-self: center; display: flex; align-items: center; height: 24px; }
-
-.rn-vis-trekmark { display: block; height: 20px; width: auto; color: #f5f5f7; }
-
-.rn-vis-places .trek-mark .pill-fg { fill: #101013; }
-
-.rn-vis-search {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 22px;
-  padding: 0 9px;
-  border-radius: 8px;
-  background: oklch(1 0 0 / 0.08);
-  border: 1px solid oklch(1 0 0 / 0.16);
-  font-size: 10px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.rn-vis-search svg { width: 11px; height: 11px; flex: none; color: oklch(1 0 0 / 0.55); }
-
-/* The query types itself out once, then the answer arrives under it. */
-.rn-vis-typed {
-  display: inline-block;
-  max-width: 90px;
-  overflow: hidden;
-  white-space: nowrap;
-  animation: rn-type 1.3s steps(13, end) 0.7s both;
-}
-
-@keyframes rn-type { from { max-width: 0; } to { max-width: 90px; } }
-
-.rn-vis-caret {
-  width: 1px;
-  height: 12px;
-  margin-inline-start: -4px;
-  background: #f5f5f7;
-  animation: rn-caret 1s steps(1) infinite;
-}
-
-@keyframes rn-caret { 50% { opacity: 0; } }
-
-.rn-vis-result {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 5px 8px;
-  border-radius: 8px;
-  background: oklch(1 0 0 / 0.07);
-  animation: rn-answer 0.3s ease 2.1s both;
-}
-
-@keyframes rn-answer { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
-
-.rn-vis-cat {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: 1.5px solid #ffffff;
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  box-sizing: border-box;
-}
-
-.rn-vis-place { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
-
-.rn-vis-place span {
-  font-size: 10px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.rn-vis-place small { font-size: 8.5px; color: oklch(1 0 0 / 0.5); }
-
-@media (prefers-reduced-motion: reduce) {
-  .rn-vis-typed, .rn-vis-caret, .rn-vis-result { animation: none; }
-}
-
-[data-reduce-motion='true'] .rn-vis-typed,
-[data-reduce-motion='true'] .rn-vis-caret,
-[data-reduce-motion='true'] .rn-vis-result { animation: none; }
-
-/* Road trip: the drive on the map, in the planner's route blue and marker style. */
-.rn-vis-road-casing { fill: none; stroke: #0a5cc2; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
-
-.rn-vis-road-line { fill: none; stroke: #0a84ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
-
-.rn-vis-marker {
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  margin: -9px 0 0 -9px;
-  border-radius: 50%;
-  border: 2px solid #ffffff;
-  box-sizing: border-box;
-  box-shadow: 0 1px 4px oklch(0 0 0 / 0.35);
-  color: #ffffff;
-  font-size: 8.5px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-variant-numeric: tabular-nums;
-}
-
-.rn-vis-distance {
-  position: absolute;
-  right: 9px;
-  bottom: 8px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 7px;
-  border-radius: 99px;
-  background: #f5f5f7;
-  color: #101013;
-  font-size: 9px;
-  font-weight: 600;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-/* Dawarich: a recorded day, in the trail colour the map draws it with. */
-.rn-vis-trail-line { fill: none; stroke: #2563eb; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
-
-.rn-vis-trail-stay { fill: #ffffff; stroke: #2563eb; stroke-width: 2; }
-
-/* Document sync: the wordmark, the two-way arrow under it, and the five stores in a row. */
-.rn-vis-docs {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 8px 12px;
-}
-
-.rn-vis-docs .rn-vis-trekbadge { height: 22px; }
-.rn-vis-docs .rn-vis-trekmark { height: 19px; }
-
-.rn-vis-docs-flow { display: flex; color: oklch(1 0 0 / 0.55); transform: rotate(90deg); }
-
-.rn-vis-docs-stores {
-  display: flex;
-  gap: 8px;
-}
-
-.rn-vis-docs-store {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-  background: oklch(1 0 0 / 0.1);
-  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), inset 0 0 0 1px oklch(1 0 0 / 0.1);
-}
-
-/* The mark itself, unframed, with its corners rounded like an app icon. */
-.rn-vis-brand {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  width: 58px;
-  height: 58px;
-  border-radius: 15px;
-  overflow: hidden;
-  box-shadow: 0 4px 14px oklch(0 0 0 / 0.45), 0 0 0 1px oklch(1 0 0 / 0.14);
-}
-
-/* A glass sheen over the mark: a soft light from the top and a bright inner edge. */
-.rn-vis-brand::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: linear-gradient(160deg, oklch(1 0 0 / 0.42) 0%, oklch(1 0 0 / 0.08) 38%, transparent 55%, oklch(0 0 0 / 0.12) 100%);
-  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.55), inset 0 0 0 1px oklch(1 0 0 / 0.22);
-  pointer-events: none;
-}
-
-.rn-vis-brand img { display: block; width: 100%; height: 100%; }
-
 /* ── Right: the note ───────────────────────────────────────────────────── */

 .rn-note {
@@ -0,0 +1,582 @@
+/*
+ * The pictures on the release cards (ReleaseNoticeVisuals.tsx). They sit on the
+ * release half, which is dark in both themes, so they draw in their own colours
+ * rather than the surface tokens, like the panel around them.
+ */
+
+/* ── The card pictures ─────────────────────────────────────────────────── */
+
+.rn-vis {
+  position: absolute;
+  inset: 0;
+  color: #f5f5f7;
+  font-family: var(--font-system);
+  overflow: hidden;
+}
+
+.rn-vis-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: oklch(1 0 0 / 0.55);
+}
+
+@keyframes rn-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes rn-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes rn-rise {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes rn-typing {
+  0%,
+  60%,
+  100% {
+    opacity: 0.35;
+    transform: none;
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+@keyframes rn-ring {
+  0% {
+    box-shadow: 0 0 0 0 oklch(0.72 0.19 150 / 0.55);
+  }
+  70%,
+  100% {
+    box-shadow: 0 0 0 9px oklch(0.72 0.19 150 / 0);
+  }
+}
+@keyframes rn-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+@keyframes rn-sticker {
+  from {
+    opacity: 0;
+    transform: scale(0.2) rotate(-50deg);
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1.12) rotate(12deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(8deg);
+  }
+}
+
+/* Tours: a trail climbing to the summit at dusk, and the kinds of tour along the foot. */
+.rn-vis-tours {
+  background: linear-gradient(180deg, #24304f 0%, #3c4a6b 46%, #c9876a 100%);
+}
+
+.rn-vis-tours-scene {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.rn-vis-tours-sun {
+  fill: #fde68a;
+  filter: drop-shadow(0 0 6px oklch(0.92 0.12 90 / 0.7));
+}
+
+.rn-vis-tours-far {
+  fill: #56668a;
+  opacity: 0.75;
+}
+
+.rn-vis-tours-mountain {
+  fill: #23344a;
+}
+
+.rn-vis-tours-snow {
+  fill: #e8f0f8;
+}
+
+.rn-vis-tours-meadow {
+  fill: #14202d;
+}
+
+.rn-vis-tours-trail {
+  fill: none;
+  stroke: #fbbf24;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  filter: drop-shadow(0 0 2px oklch(0.85 0.16 80 / 0.6));
+  animation: rn-draw 1.3s ease-in-out 0.3s both;
+}
+
+.rn-vis-tours-walker {
+  fill: #ffffff;
+  filter: drop-shadow(0 0 3px #ffffff);
+  opacity: 0;
+  animation: rn-show 0.2s linear 1.6s both;
+}
+
+@keyframes rn-show {
+  to {
+    opacity: 1;
+  }
+}
+
+.rn-vis-tours-flag {
+  transform-box: fill-box;
+  transform-origin: 0% 100%;
+  animation: rn-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
+}
+
+.rn-vis-tours-flag line {
+  stroke: #f5f5f7;
+  stroke-width: 1.2;
+}
+
+.rn-vis-tours-flag path {
+  fill: #ef4444;
+}
+
+.rn-vis-tours-climb {
+  position: absolute;
+  top: 8px;
+  inset-inline-start: 9px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 7px;
+  border-radius: 99px;
+  background: oklch(1 0 0 / 0.14);
+  border: 1px solid oklch(1 0 0 / 0.18);
+  backdrop-filter: blur(6px);
+  font-size: 9px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.rn-vis-tours-kinds {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 7px;
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+}
+
+.rn-vis-tours-kind {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: oklch(1 0 0 / 0.12);
+  border: 1px solid oklch(1 0 0 / 0.2);
+  backdrop-filter: blur(6px);
+  animation: rn-rise 0.3s ease both;
+}
+
+/* TREK Studio: an open book, a polaroid taped in, a title, a stamp and a sticker. */
+.rn-vis-studio {
+  background:
+    radial-gradient(120% 90% at 50% 115%, oklch(0.62 0.14 45 / 0.38) 0%, transparent 60%),
+    linear-gradient(165deg, #23201c 0%, #171513 100%);
+}
+
+.rn-vis-book {
+  position: absolute;
+  inset: 13px 20px 13px;
+  display: flex;
+  border-radius: 3px;
+  overflow: hidden;
+  transform: perspective(520px) rotateX(16deg);
+  box-shadow:
+    0 16px 22px -10px oklch(0 0 0 / 0.75),
+    0 0 0 1px oklch(1 0 0 / 0.08);
+}
+
+.rn-vis-page {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+.rn-vis-page-start {
+  background: #ede2c9;
+}
+
+.rn-vis-page-end {
+  background: #f6eedc;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 11px 9px 0;
+}
+
+.rn-vis-gutter {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  width: 16px;
+  margin-inline-start: -8px;
+  background: linear-gradient(90deg, transparent, oklch(0 0 0 / 0.2), transparent);
+}
+
+.rn-vis-polaroid {
+  position: absolute;
+  top: 11px;
+  inset-inline-start: 10px;
+  width: 58%;
+  padding: 3px 3px 9px;
+  background: #ffffff;
+  transform: rotate(-6deg);
+  box-shadow: 0 3px 6px oklch(0 0 0 / 0.25);
+}
+
+.rn-vis-polaroid svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.rn-vis-sky {
+  fill: #fcd5b0;
+}
+.rn-vis-sun {
+  fill: #fb923c;
+}
+.rn-vis-peak-far {
+  fill: #7c8aa0;
+}
+.rn-vis-peak-near {
+  fill: #334155;
+}
+
+.rn-vis-tape {
+  position: absolute;
+  top: 7px;
+  inset-inline-start: 30%;
+  width: 24px;
+  height: 7px;
+  transform: rotate(-24deg);
+  background: repeating-linear-gradient(45deg, #f43f5e 0 3px, #fecdd3 3px 6px);
+  opacity: 0.88;
+}
+
+.rn-vis-book-title {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-style: italic;
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 1;
+  color: #1f3d2b;
+  white-space: nowrap;
+}
+
+.rn-vis-book-line {
+  height: 3px;
+  width: 88%;
+  border-radius: 2px;
+  background: oklch(0.4 0.03 60 / 0.3);
+}
+.rn-vis-book-line-short {
+  width: 58%;
+}
+
+.rn-vis-stamp {
+  position: absolute;
+  bottom: 9px;
+  inset-inline-end: 9px;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1.5px dashed #b45309;
+  color: #b45309;
+  transform: rotate(-14deg);
+  opacity: 0.85;
+}
+
+.rn-vis-sticker {
+  position: absolute;
+  bottom: 7px;
+  inset-inline-start: 14px;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: #facc15;
+  color: #fff8db;
+  box-shadow:
+    0 0 0 2px #ffffff,
+    0 4px 10px oklch(0 0 0 / 0.4);
+  animation: rn-sticker 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
+}
+
+.rn-vis-sticker svg {
+  fill: currentColor;
+}
+
+/* The assistant: a day in Porto proposed stop by stop, and the button that applies it. */
+.rn-vis-assist {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 9px 10px;
+  background:
+    radial-gradient(110% 80% at 0% 0%, oklch(0.55 0.2 290 / 0.36) 0%, transparent 62%),
+    linear-gradient(165deg, #1d1b29 0%, #141320 100%);
+}
+
+.rn-vis-assist-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rn-vis-assist-avatar {
+  display: grid;
+  place-items: center;
+  width: 19px;
+  height: 19px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #a78bfa 0%, #3b82f6 100%);
+  color: #ffffff;
+  box-shadow: 0 2px 8px oklch(0.55 0.2 290 / 0.6);
+}
+
+.rn-vis-assist-typing {
+  display: flex;
+  gap: 3px;
+  padding: 5px 7px;
+  border-radius: 99px;
+  background: oklch(1 0 0 / 0.1);
+}
+
+.rn-vis-assist-typing i {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #f5f5f7;
+  animation: rn-typing 1.2s ease-in-out infinite;
+}
+
+.rn-vis-assist-typing i:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.rn-vis-assist-typing i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.rn-vis-assist-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 5px 8px;
+  border-radius: 9px;
+  background: oklch(1 0 0 / 0.08);
+  border: 1px solid oklch(1 0 0 / 0.14);
+  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12);
+}
+
+.rn-vis-assist-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 9.5px;
+  line-height: 1.35;
+  animation: rn-rise 0.34s ease both;
+}
+
+.rn-vis-assist-time {
+  flex: none;
+  width: 27px;
+  color: oklch(1 0 0 / 0.5);
+  font-variant-numeric: tabular-nums;
+}
+.rn-vis-assist-dot {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+.rn-vis-assist-dot-sight {
+  background: #f59e0b;
+}
+.rn-vis-assist-dot-culture {
+  background: #a78bfa;
+}
+.rn-vis-assist-dot-view {
+  background: #34d399;
+}
+.rn-vis-assist-name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rn-vis-assist-apply {
+  position: absolute;
+  top: 8px;
+  inset-inline-end: 9px;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #22c55e;
+  color: #ffffff;
+  animation:
+    rn-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s both,
+    rn-ring 2.2s ease-out 2s infinite;
+}
+
+/* Help on every screen: the help button, and hello in TREK's languages drifting past it. */
+.rn-vis-help {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 12px;
+  background:
+    radial-gradient(70% 120% at 10% 50%, oklch(0.6 0.16 250 / 0.34) 0%, transparent 70%),
+    linear-gradient(165deg, #1a1f2b 0%, #12151d 100%);
+}
+
+.rn-vis-help-q {
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: #f5f5f7;
+  color: #101013;
+  font-size: 24px;
+  font-weight: 800;
+  box-shadow:
+    0 0 0 5px oklch(1 0 0 / 0.08),
+    0 6px 16px oklch(0 0 0 / 0.5);
+}
+
+.rn-vis-help-count {
+  position: absolute;
+  top: 12px;
+  inset-inline-start: 42px;
+  padding: 1px 6px;
+  border-radius: 99px;
+  background: #3b82f6;
+  color: #ffffff;
+  font-size: 9.5px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  box-shadow: 0 0 0 2px #12151d;
+}
+
+/* The rows slide the same way in every language: they are a picture, not text. */
+.rn-vis-help-langs {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow: hidden;
+  direction: ltr;
+  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
+  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
+}
+
+.rn-vis-hello-row {
+  display: flex;
+  width: max-content;
+  animation: rn-marquee 34s linear infinite;
+}
+.rn-vis-hello-row-reverse {
+  animation-direction: reverse;
+  animation-duration: 40s;
+}
+
+.rn-vis-hello {
+  flex: none;
+  margin-inline-end: 5px;
+  padding: 3px 8px;
+  border-radius: 99px;
+  background: oklch(1 0 0 / 0.09);
+  border: 1px solid oklch(1 0 0 / 0.13);
+  font-size: 10px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rn-vis-tours-trail,
+  .rn-vis-tours-flag,
+  .rn-vis-tours-kind,
+  .rn-vis-sticker,
+  .rn-vis-assist-typing i,
+  .rn-vis-assist-row,
+  .rn-vis-assist-apply,
+  .rn-vis-hello-row {
+    animation: none;
+  }
+  .rn-vis-tours-trail {
+    stroke-dashoffset: 0;
+  }
+  .rn-vis-tours-walker {
+    display: none;
+  }
+  .rn-vis-sticker {
+    transform: rotate(8deg);
+  }
+}
+
+[data-reduce-motion='true'] .rn-vis-tours-trail,
+[data-reduce-motion='true'] .rn-vis-tours-flag,
+[data-reduce-motion='true'] .rn-vis-tours-kind,
+[data-reduce-motion='true'] .rn-vis-sticker,
+[data-reduce-motion='true'] .rn-vis-assist-typing i,
+[data-reduce-motion='true'] .rn-vis-assist-row,
+[data-reduce-motion='true'] .rn-vis-assist-apply,
+[data-reduce-motion='true'] .rn-vis-hello-row {
+  animation: none;
+}
+
+[data-reduce-motion='true'] .rn-vis-tours-trail {
+  stroke-dashoffset: 0;
+}
+
+[data-reduce-motion='true'] .rn-vis-tours-walker {
+  display: none;
+}
+
+[data-reduce-motion='true'] .rn-vis-sticker {
+  transform: rotate(8deg);
+}
@@ -1,6 +1,7 @@
 import type { GeoJSONSource, Map as MapLibreMap } from 'maplibre-gl';
 import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
 import type { TourBaseLayer } from '../../Map/MapLayerSwitcher';
+import { buildGlMap } from '../../Map/glSupport';
 import { isTourLayerHit } from '../../Map/mapRasterOverlay';
 import {
  addTerrainLayers,
@@ -110,8 +111,11 @@ export function useTerrainMap({ scene, baseLayer, data, exaggeration }: Options)
    let map: MapLibreMap | null = null;
    void import('../../Map/engines/maplibre').then(({ default: engine }) => {
      if (cancelled) return;
-      map = createTerrainMap(engine, container, scene, { onReady: markReady, onStyleIdle: countStyle });
-      setGl({ map, engine });
+      // Null when the GPU refused WebGL2. The report switches the planner back to the 2D map.
+      map = buildGlMap(() =>
+        createTerrainMap(engine, container, scene, { onReady: markReady, onStyleIdle: countStyle })
+      );
+      if (map) setGl({ map, engine });
    });
    return () => {
      cancelled = true;
@@ -13,7 +13,7 @@
 import { describe, it, expect } from 'vitest'
 import { DOCUMENT_PROVIDER_IDS } from '@trek/shared'
 import { render } from '../../../tests/helpers/render'
-import { DOCUMENT_PROVIDER_ICONS } from './DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from './documentProviderIconMap'
 import TrekIcon from './TrekIcon'

 const marks = Object.entries(DOCUMENT_PROVIDER_ICONS)
@@ -15,7 +15,7 @@ import React from 'react'
 * for legibility in a monochrome row.
 */

-interface GlyphProps {
+export interface GlyphProps {
  size?: number
  className?: string
 }
@@ -126,12 +126,3 @@ export function SynologyDriveIcon({ size = 20, className }: GlyphProps): React.R
    </svg>
  )
 }
-
-/** Keyed by the provider ids in `document_providers`. */
-export const DOCUMENT_PROVIDER_ICONS: Record<string, React.ComponentType<GlyphProps>> = {
-  paperless: PaperlessIcon,
-  papra: PapraIcon,
-  nextcloud: NextcloudIcon,
-  opencloud: OpenCloudIcon,
-  synologydrive: SynologyDriveIcon,
-}
@@ -0,0 +1,21 @@
+import type React from 'react';
+import {
+  type GlyphProps,
+  NextcloudIcon,
+  OpenCloudIcon,
+  PaperlessIcon,
+  PapraIcon,
+  SynologyDriveIcon,
+} from './DocumentProviderIcons';
+
+/**
+ * The document providers' marks keyed by the provider ids in `document_providers`.
+ * Kept apart from the drawings so that module exports components only.
+ */
+export const DOCUMENT_PROVIDER_ICONS: Record<string, React.ComponentType<GlyphProps>> = {
+  paperless: PaperlessIcon,
+  papra: PapraIcon,
+  nextcloud: NextcloudIcon,
+  opencloud: OpenCloudIcon,
+  synologydrive: SynologyDriveIcon,
+};
@@ -7,7 +7,7 @@ import {
 } from 'lucide-react'
 import DawarichIcon from '../../../components/shared/DawarichIcon'
 import AirTrailIcon from '../../../components/shared/AirTrailIcon'
-import { DOCUMENT_PROVIDER_ICONS } from '../../../components/shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../../components/shared/documentProviderIconMap'
 import MToggle from '../../components/MToggle'
 import {
  type Addon,
@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useMatch, useNavigate } from 'react-router';

 import type { AssistantChatTrip } from '../../../components/Assistant/assistantViewContext';
 import type { EntityTarget } from '../../../components/Assistant/cards/cardTypes';
 import { chatPagePath, useAssistantHome, useRouteJournalChat } from '../../../components/Assistant/useAssistantHome';
+import { useAssistantStatus } from '../../../components/Assistant/useAssistantStatus';
 import { useAssistantStore } from '../../../store/assistantStore';
 import { AssistantScreen, type MapHops } from '../trip/assistant/MAssistantScreen';

@@ -26,7 +27,6 @@ export default function MAssistantHomeScreen() {
  const available = useAssistantStore((s) => s.status?.available === true);
  const open = useAssistantStore((s) => s.window.open);
  const minimized = useAssistantStore((s) => s.window.minimized);
-  const loadStatus = useAssistantStore((s) => s.loadStatus);
  const close = useAssistantStore((s) => s.close);

  // The trip's screen (or the journal's) takes over with the window still open, so its chat comes up there.
@@ -46,10 +46,8 @@ export default function MAssistantHomeScreen() {
    [close, navigate]
  );

-  // The desktop window loads this itself; on the phone the pages outside a trip ask once.
-  useEffect(() => {
-    void loadStatus();
-  }, [loadStatus]);
+  // The desktop window loads this itself; on the phone the pages outside a trip ask here.
+  useAssistantStatus();

  if (inTrip || !available || !open || minimized) return null;
  return (
@@ -14,7 +14,7 @@ import { useInAppNotificationStore } from '../../../store/inAppNotificationStore
 import { useDashboardPlugins } from '../../../components/Dashboard/useDashboardPlugins'
 import { useAssistantHomeLauncher } from '../../../components/Assistant/useAssistantHome'
 import type { TripCardBadge } from '../../../api/client'
-import DemoBanner from '../../../components/Layout/DemoBanner'
+import DemoWelcome from '../../../components/Demo/DemoWelcome'
 import { IcsSubscribeModal } from '../../../components/Planner/IcsSubscribeModal'
 import PluginWidgets from '../../../components/Plugins/PluginWidgets'
 import { entityGradient } from '../../../utils/gradients'
@@ -247,7 +247,7 @@ export default function MDashboard(): React.ReactElement {

      <MUserMenu open={menuOpen} onClose={() => setMenuOpen(false)} />

-      {demoMode && <DemoBanner />}
+      {demoMode && <DemoWelcome />}

      <div className="px-4 pb-[calc(var(--bottom-nav-h,84px)+32px)] pt-[calc(var(--m-safe-top,12px)+82px)]">
        {loadError && (
@@ -2,8 +2,12 @@
 import userEvent from '@testing-library/user-event';
 import type { AiConnectionView, AiStatusResponse } from '@trek/shared';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildUser } from '../../../../tests/helpers/factories';
 import { render, screen, waitFor } from '../../../../tests/helpers/render';
+import { seedStore } from '../../../../tests/helpers/store';
+import { useAddonStore } from '../../../store/addonStore';
 import { useAssistantStore } from '../../../store/assistantStore';
+import { useAuthStore } from '../../../store/authStore';

 const repo = vi.hoisted(() => ({
  status: vi.fn(),
@@ -44,6 +48,8 @@ function status(over: Partial<AiStatusResponse> = {}): AiStatusResponse {
 beforeEach(() => {
  vi.clearAllMocks();
  useAssistantStore.setState({ status: null });
+  // The card shows while the assistant is on, and only then is its status asked for.
+  seedStore(useAddonStore, { loaded: true, addons: [{ id: 'ai_assistant', enabled: true }] });
  repo.models.mockResolvedValue([
    { id: 'gemini-flash', label: 'Gemini Flash', supportsTools: true, free: true },
    { id: 'gemini-pro', label: 'Gemini Pro', supportsTools: true },
@@ -83,4 +89,20 @@ describe('MAiConnectionSection', () => {
    expect(await screen.findByText('What would you like to chat with?')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /Paste an API key/ })).toBeInTheDocument();
  });
+
+  it('FE-MOB-AI-DEMO-001: the shared demo account sees the place for its own connection locked', async () => {
+    seedStore(useAuthStore, { user: buildUser({ email: 'demo@trek.app' }), isAuthenticated: true, demoMode: true });
+    repo.status.mockResolvedValue(status({ canConnectOwn: false }));
+    render(<MAiConnectionSection />);
+    expect(await screen.findByRole('note')).toHaveTextContent('Your own AI connection cannot be added in the demo.');
+    expect(screen.queryByText('Your admin sets this up.')).not.toBeInTheDocument();
+  });
+
+  it('FE-MOB-AI-DEMO-002: any other account keeps the admin hint', async () => {
+    seedStore(useAuthStore, { user: buildUser({ email: 'admin@trek.app' }), isAuthenticated: true, demoMode: true });
+    repo.status.mockResolvedValue(status({ canConnectOwn: false }));
+    render(<MAiConnectionSection />);
+    expect(await screen.findByText('Your admin sets this up.')).toBeInTheDocument();
+    expect(screen.queryByRole('note')).not.toBeInTheDocument();
+  });
 });
@@ -2,6 +2,8 @@ import type { AiConnectionView } from '@trek/shared';
 import { ChevronDown, Loader2, LogOut, MessageCircle, Sparkles, Unplug } from 'lucide-react';
 import React, { useState } from 'react';
 import { useAssistantCostEstimates, useAssistantMapFollow } from '../../../components/Assistant/useAssistantMapFollow';
+import DemoLock from '../../../components/Demo/DemoLock';
+import { useDemoAccountLock } from '../../../components/Demo/useDemoLock';
 import AiConnectPanel from '../../../components/Settings/ai/AiConnectPanel';
 import { aiSectionText, CONNECTION_STATUS } from '../../../components/Settings/ai/aiConnectModel';
 import { useAiConnections } from '../../../components/Settings/ai/useAiConnections';
@@ -117,6 +119,30 @@ function MInstanceConnection({ S }: { S: AiConnections }) {
  );
 }

+/**
+ * Under the connection: the hint that only the admin connects one, or, for the
+ * shared demo account, the locked place where its own would go.
+ */
+function MOwnConnectionNote({ view }: { view: AiConnections['view'] }) {
+  const { t } = useTranslation();
+  const demoLocked = useDemoAccountLock();
+  if (view === 'loading') return null;
+  if (!demoLocked) return view === 'adminOnly' ? <MSetHint>{t('assistant.setup.adminOnly')}</MSetHint> : null;
+  return (
+    <DemoLock locked reason={t('demo.lock.ai')} size="row" className="mt-3">
+      <MSetRow
+        first
+        label={t('demo.lock.aiTitle')}
+        trailing={
+          <MSetButton variant="ghost" disabled>
+            {t('assistant.errorAction.connectOwn')}
+          </MSetButton>
+        }
+      />
+    </DemoLock>
+  );
+}
+
 /** Whether the trip map follows the assistant, the phone's row for the shared switch. */
 function MAssistantBehaviour() {
  const { t } = useTranslation();
@@ -180,7 +206,7 @@ export default function MAiConnectionSection({
      {S.view === 'own' && S.own && <MOwnConnection S={S} own={S.own} />}
      {S.view === 'instance' && <MInstanceConnection S={S} />}
      {assistant && (S.view === 'own' || S.view === 'instance') && <MAssistantBehaviour />}
-      {S.view === 'adminOnly' && <MSetHint>{t('assistant.setup.adminOnly')}</MSetHint>}
+      <MOwnConnectionNote view={S.view} />

      {S.panel && (
        <div
--- a/Show More
+++ b/Show More