style the GUI: quiet chrome, petrol accent, viewer hints

- style.css with colour, type and spacing tokens; light grey chrome around
  the 3D view, one petrol accent for the file button, checkboxes, focus and
  a progress line along the header (replaces the native progress bar)
- header with title; the file input is a button (native input visually
  hidden, keyboard focus ring only for keyboard use)
- sidebar panel "Level of detail" with hover rows; panel message tells
  missing file, loading and files without geometry apart
- viewer: invitation to open a file while nothing is shown, mouse controls
  hint once there is geometry; viewer background #EDF3F4 matches the palette
- narrow screens: panels above the view

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

public/index.html

@@ -24,8 +24,10 @@
 
 <body>
     <header class="app-header">
+        <h1 class="app-title">CityGML Viewer</h1>
         <div id="file"></div>
-        <div id="status"></div>
+        <div id="status" class="status"></div>
+        <div id="progress" class="progress-line" hidden></div>
     </header>
     <aside class="app-sidebar">
         <section id="lod-panel" class="panel"></section>

public/src/main.js

@@ -6,10 +6,14 @@ import { createViewer } from './viewer/viewer.js';
 import { mountFileInput } from './ui/fileInput.js';
 import { mountLodPanel } from './ui/lodPanel.js';
 import { mountStatus } from './ui/status.js';
+import { mountViewerHints } from './ui/viewerHints.js';
 
 const store = createStore(initialState());
 const viewer = createViewer(document.getElementById('viewer'), store);
-mountStatus(document.getElementById('status'), store);
+mountStatus(document.getElementById('status'), store, document.getElementById('progress'));
+if (viewer.available) {
+  mountViewerHints(document.getElementById('viewer'), store);
+}
 mountLodPanel(document.getElementById('lod-panel'), store);
 mountFileInput(document.getElementById('file'), { onFile: open, enabled: viewer.available });
 

public/src/style.css

-/* Layout only; no visual design yet. */
+/* Quiet, technical look: light chrome around the 3D view, one petrol accent
+   for actions, focus and progress. All colours and sizes are tokens here so
+   that new panels use the same values. */
+:root {
+  --ink: #1d2b2f;
+  --muted: #5f6f73;
+  --line: #d5dee0;
+  --chrome: #f4f7f7;
+  --surface: #ffffff;
+  --accent: #1e6e78;
+  --accent-strong: #165a62;
+  --accent-soft: #e3eff0;
+  --error: #b3261e;
+  --viewer: #edf3f4; /* same as the WebGL clear colour in viewer.js */
+
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --text-small: 13px;
+  --text: 14px;
+  --text-title: 16px;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --radius: 6px;
+  --sidebar-width: 15rem;
+}
+
+/* Classes below set display; the hidden attribute must still win. */
+[hidden] {
+  display: none !important;
+}
+
 html, body {
   height: 100%;
   margin: 0;
@@ -7,45 +39,156 @@ html, body {
 body {
   display: grid;
   grid-template-rows: auto 1fr;
-  grid-template-columns: 14rem 1fr;
+  grid-template-columns: var(--sidebar-width) 1fr;
   grid-template-areas:
     "header header"
     "sidebar viewer";
-  font-family: system-ui, sans-serif;
+  font: var(--text)/1.4 var(--font);
+  color: var(--ink);
+  background: var(--chrome);
 }
 
+/* Header ------------------------------------------------------------ */
+
 .app-header {
   grid-area: header;
+  position: relative;
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
   align-items: center;
-  padding: 0.5rem;
-  border-bottom: 1px solid #ccc;
+  gap: var(--space-2) var(--space-4);
+  padding: var(--space-2) var(--space-4);
+  border-bottom: 1px solid var(--line);
 }
 
-#status {
-  display: flex;
-  gap: 0.5rem;
+.app-title {
+  margin: 0;
+  font-size: var(--text-title);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.status {
+  margin-left: auto;
+  min-width: 0;
+}
+
+.status-text {
+  font-size: var(--text-small);
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+}
+
+.status-text[data-tone="error"] {
+  color: var(--error);
+}
+
+/* Grows along the bottom edge of the header while a file loads. */
+.progress-line {
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--accent);
+}
+
+/* Controls ---------------------------------------------------------- */
+
+.button {
+  display: inline-flex;
   align-items: center;
+  padding: 6px var(--space-3);
+  border-radius: var(--radius);
+  background: var(--accent);
+  color: #fff;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.button:hover {
+  background: var(--accent-strong);
+}
+
+.button:has(:focus-visible) {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.button.is-disabled {
+  background: var(--line);
+  color: var(--muted);
+  cursor: not-allowed;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+input[type="checkbox"] {
+  accent-color: var(--accent);
+  margin: 0;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+a {
+  color: var(--accent);
 }
 
+/* Sidebar ----------------------------------------------------------- */
+
 .app-sidebar {
   grid-area: sidebar;
   overflow: auto;
-  padding: 0.5rem;
-  border-right: 1px solid #ccc;
+  padding: var(--space-4) var(--space-3);
+  border-right: 1px solid var(--line);
+}
+
+.panel + .panel {
+  margin-top: var(--space-4);
 }
 
 .panel h2 {
-  font-size: 1rem;
-  margin: 0 0 0.5rem;
+  margin: 0 0 var(--space-2);
+  padding: 0 var(--space-2);
+  font-size: var(--text-small);
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.panel p {
+  margin: 0;
+  padding: var(--space-1) var(--space-2);
+  color: var(--muted);
 }
 
 .panel label {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius);
+  cursor: pointer;
+}
+
+.panel label:hover {
+  background: var(--accent-soft);
 }
 
+/* Viewer ------------------------------------------------------------ */
+
 /* The canvas is positioned absolutely, so its pixel size never feeds back
    into the layout. */
 .app-viewer {
@@ -53,6 +196,7 @@ body {
   position: relative;
   min-width: 0;
   min-height: 0;
+  background: var(--viewer);
 }
 
 .viewer-canvas {
@@ -64,6 +208,57 @@ body {
   touch-action: none;
 }
 
+.viewer-empty {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  margin: 0;
+  color: var(--muted);
+  font-size: var(--text-title);
+  pointer-events: none;
+}
+
+.viewer-controls {
+  position: absolute;
+  left: var(--space-3);
+  bottom: var(--space-3);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-3);
+  margin: 0;
+  padding: var(--space-1) var(--space-2);
+  list-style: none;
+  border-radius: var(--radius);
+  background: rgb(255 255 255 / 0.7);
+  color: var(--muted);
+  font-size: var(--text-small);
+  pointer-events: none;
+}
+
 .viewer-message {
-  padding: 1rem;
+  padding: var(--space-4);
+}
+
+/* Narrow screens: panels above the view instead of beside it. */
+@media (max-width: 640px) {
+  body {
+    grid-template-rows: auto auto 1fr;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "sidebar"
+      "viewer";
+  }
+
+  .app-sidebar {
+    max-height: 30vh;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .status {
+    margin-left: 0;
+    flex-basis: 100%;
+  }
 }

public/src/ui/fileInput.js

-// File selection. The input is reset after each selection so that choosing
-// the same file again reloads it (the browser fires no change event for an
-// unchanged selection).
+// File selection, shown as a button. The native input stays in the page
+// (visually hidden) so that keyboard and screen readers work as usual.
+// The input is reset after each selection so that choosing the same file
+// again reloads it (the browser fires no change event for an unchanged
+// selection).
 export function mountFileInput(container, { onFile, enabled = true }) {
   const label = document.createElement('label');
-  label.textContent = 'Open CityGML file ';
+  label.className = 'button';
   const input = document.createElement('input');
   input.type = 'file';
   input.id = 'file-input';
+  input.className = 'visually-hidden';
   input.disabled = !enabled;
+  if (!enabled) {
+    label.classList.add('is-disabled');
+  }
   input.addEventListener('change', () => {
     const file = input.files && input.files[0];
     try {
@@ -18,7 +24,7 @@ export function mountFileInput(container, { onFile, enabled = true }) {
       input.value = '';
     }
   });
-  label.append(input);
+  label.append(input, 'Open CityGML file');
   container.append(label);
   return input;
 }

public/src/ui/lodPanel.js

@@ -21,9 +21,20 @@ export function lodItems(state) {
   }));
 }
 
+// Text shown instead of the checkboxes, or null when there are LODs to list.
+export function lodPanelMessage(state) {
+  if (state.layers.length === 0) {
+    return 'No file loaded';
+  }
+  if (lodItems(state).length > 0) {
+    return null;
+  }
+  return state.layers.some(layer => layer.status === 'loading') ? 'No geometry yet' : 'No geometry in this file';
+}
+
 export function mountLodPanel(container, store) {
   const heading = document.createElement('h2');
-  heading.textContent = 'LOD';
+  heading.textContent = 'Level of detail';
   const list = document.createElement('div');
   container.append(heading, list);
 
@@ -33,15 +44,16 @@ export function mountLodPanel(container, store) {
   let boxes = new Map();
   function render(state) {
     const items = lodItems(state);
-    const key = JSON.stringify([state.layers.length === 0, items.map(item => item.lod)]);
+    const message = lodPanelMessage(state);
+    const key = JSON.stringify([message, items.map(item => item.lod)]);
     if (key !== renderedKey) {
       renderedKey = key;
       boxes = new Map();
       list.replaceChildren();
-      if (items.length === 0) {
-        const message = document.createElement('p');
-        message.textContent = state.layers.length === 0 ? 'No file loaded' : 'No geometry yet';
-        list.append(message);
+      if (message !== null) {
+        const paragraph = document.createElement('p');
+        paragraph.textContent = message;
+        list.append(paragraph);
         return;
       }
       for (const item of items) {

public/src/ui/status.js

-// Progress bar and status message of the loaded layers.
+// Status message and progress line of the loaded layers.
 
 function layerText(layer) {
   switch (layer.status) {
@@ -17,20 +17,34 @@ export function statusText(state) {
   return state.layers.map(layerText).join('; ');
 }
 
-export function mountStatus(container, store) {
-  const bar = document.createElement('progress');
-  bar.max = 1;
-  bar.hidden = true;
+// 'idle' (nothing loaded), 'loading', 'error' (load failed or nothing to
+// show) or 'ready'; used to style the status message.
+export function statusTone(state) {
+  if (state.layers.length === 0) {
+    return 'idle';
+  }
+  if (state.layers.some(layer => layer.status === 'loading')) {
+    return 'loading';
+  }
+  if (state.layers.some(layer => layer.status === 'error' || layer.vertexCount === 0)) {
+    return 'error';
+  }
+  return 'ready';
+}
+
+// progressLine: an element whose width shows the progress of a running load.
+export function mountStatus(container, store, progressLine) {
   const text = document.createElement('span');
-  container.append(bar, text);
+  text.className = 'status-text';
+  text.setAttribute('role', 'status');
+  container.append(text);
 
   function render(state) {
     const loading = state.layers.find(layer => layer.status === 'loading');
-    bar.hidden = loading === undefined;
-    if (loading !== undefined) {
-      bar.value = loading.progress;
-    }
+    progressLine.hidden = loading === undefined;
+    progressLine.style.width = loading === undefined ? '0' : `${loading.progress * 100}%`;
     text.textContent = statusText(state);
+    text.dataset.tone = statusTone(state);
   }
 
   render(store.get());

public/src/ui/viewerHints.js

+// Text on top of the 3D view: an invitation to open a file while nothing is
+// shown, and the mouse controls once there is geometry to look at.
+
+// { empty, controls }: which of the two hints to show.
+export function viewerHints(state) {
+  const hasGeometry = state.layers.some(layer => layer.lods.length > 0);
+  const loading = state.layers.some(layer => layer.status === 'loading');
+  return { empty: !hasGeometry && !loading, controls: hasGeometry };
+}
+
+export function mountViewerHints(container, store) {
+  const empty = document.createElement('p');
+  empty.className = 'viewer-empty';
+  empty.textContent = 'Open a CityGML file to start';
+
+  const controls = document.createElement('ul');
+  controls.className = 'viewer-controls';
+  for (const text of ['Left drag rotates', 'Right drag pans', 'Wheel zooms']) {
+    const item = document.createElement('li');
+    item.textContent = text;
+    controls.append(item);
+  }
+  container.append(empty, controls);
+
+  function render(state) {
+    const hints = viewerHints(state);
+    empty.hidden = !hints.empty;
+    controls.hidden = !hints.controls;
+  }
+
+  render(store.get());
+  return store.subscribe(render);
+}

public/src/viewer/viewer.js

@@ -7,7 +7,7 @@ import { Camera } from './camera.js';
 import { FRAGMENT_SHADER, VERTEX_SHADER } from './shaders.js';
 import { isVisible } from '../app/state.js';
 
-const CLEAR_COLOR = new Float32Array([0.9411765, 1.0, 1.0, 1.0]);
+const CLEAR_COLOR = new Float32Array([237 / 255, 243 / 255, 244 / 255, 1.0]); // #EDF3F4, see style.css
 const CLEAR_DEPTH = new Float32Array([1.0]);
 
 // Redraws while blocks arrive during loading. Each redraw draws everything

tests/lodPanel.test.js

 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { lodItems, lodLabel } from '../public/src/ui/lodPanel.js';
-import { initialState, addLayer, reportLod, setHidden } from '../public/src/app/state.js';
+import { lodItems, lodLabel, lodPanelMessage } from '../public/src/ui/lodPanel.js';
+import { initialState, addLayer, reportLod, setHidden, failLayer, finishLayer } from '../public/src/app/state.js';
 
 function stateWithLods(...lods) {
   let state = addLayer(initialState(), { id: 1, name: 'a.gml' });
@@ -41,3 +41,12 @@ test('LODs of several layers are combined without duplicates', () => {
   };
   assert.deepEqual(lodItems(state).map(i => i.lod), [1, 2, 3]);
 });
+
+test('the panel message says whether a file is missing, loading or empty', () => {
+  const loadingState = addLayer(initialState(), { id: 1, name: 'a.gml' });
+  assert.equal(lodPanelMessage(initialState()), 'No file loaded');
+  assert.equal(lodPanelMessage(loadingState), 'No geometry yet');
+  assert.equal(lodPanelMessage(failLayer(loadingState, 1, 'broken')), 'No geometry in this file');
+  assert.equal(lodPanelMessage(finishLayer(loadingState, 1, 0)), 'No geometry in this file');
+  assert.equal(lodPanelMessage(reportLod(loadingState, 1, 2)), null);
+});

tests/status.test.js

 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { statusText } from '../public/src/ui/status.js';
+import { statusText, statusTone } from '../public/src/ui/status.js';
 import { initialState, addLayer, reportProgress, finishLayer, failLayer } from '../public/src/app/state.js';
 
 const loading = () => addLayer(initialState(), { id: 1, name: 'city.gml' });
@@ -25,3 +25,14 @@ test('a failed layer shows the error message', () => {
   assert.equal(statusText(failLayer(loading(), 1, 'The file is a 7z archive.')),
     'Could not display city.gml: The file is a 7z archive.');
 });
+
+test('the tone is idle without layers, loading while loading, then ready', () => {
+  assert.equal(statusTone(initialState()), 'idle');
+  assert.equal(statusTone(reportProgress(loading(), 1, 0.5)), 'loading');
+  assert.equal(statusTone(finishLayer(loading(), 1, 600)), 'ready');
+});
+
+test('a failed load and a file without polygons have the error tone', () => {
+  assert.equal(statusTone(failLayer(loading(), 1, 'The file is a 7z archive.')), 'error');
+  assert.equal(statusTone(finishLayer(loading(), 1, 0)), 'error');
+});

tests/viewerHints.test.js

+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { viewerHints } from '../public/src/ui/viewerHints.js';
+import { initialState, addLayer, reportLod, finishLayer, failLayer } from '../public/src/app/state.js';
+
+const loading = () => addLayer(initialState(), { id: 1, name: 'city.gml' });
+
+test('without a file the invitation to open one is shown', () => {
+  assert.deepEqual(viewerHints(initialState()), { empty: true, controls: false });
+});
+
+test('while a file loads without geometry yet, nothing is shown', () => {
+  assert.deepEqual(viewerHints(loading()), { empty: false, controls: false });
+});
+
+test('as soon as geometry arrives the mouse controls are shown', () => {
+  assert.deepEqual(viewerHints(reportLod(loading(), 1, 2)), { empty: false, controls: true });
+});
+
+test('after a failed load or a file without polygons the invitation comes back', () => {
+  assert.deepEqual(viewerHints(failLayer(loading(), 1, 'The file is a 7z archive.')), { empty: true, controls: false });
+  assert.deepEqual(viewerHints(finishLayer(loading(), 1, 0)), { empty: true, controls: false });
+});