@tileflow/dev 0.1.0-alpha.32 → 0.1.0-alpha.33

package/dist/server.js

@@ -5,7 +5,7 @@ import {
   parseTileflowLineBackgroundGlyphPath,
   tileflowArtifactSessionSchemaVersion,
   tileflowLineBackgroundGlyphRoute
-} from "./chunk-CM6ZTYDJ.js";
+} from "./chunk-WJOF6USY.js";
 import {
   getTileflowAssetBasePath,
   getTileflowAssetFileName,
@@ -13,7 +13,7 @@ import {
   normalizeTileflowBasePath,
   resolveTileflowArtifactPublicUrls
 } from "./chunk-UTRO4IBQ.js";
-import "./chunk-F4PLTZS4.js";
+import "./chunk-QYU4OW5A.js";
 import "./chunk-7C4F6GAX.js";
 import {
   TileflowStyleValidationError
@@ -233,14 +233,145 @@ function compilePreviewControls(artifacts, map, theme, text, apiBaseUrl) {
 import { randomBytes } from "crypto";
 import { readFile } from "fs/promises";
 
+// src/devtools/card-styles.ts
+var cardStyles = `
+.devtools-ready .dt-shell {
+  --dt-page:color-mix(in srgb,var(--surface) 80%,var(--border));
+  --dt-card-heading:color-mix(in srgb,var(--paper) 55%,var(--surface));
+  --dt-content-gap:12px;
+}
+.devtools-ready .dt-shell :is(.dt-card-page,.dt-layer-content,.dt-tile-content,.dt-diagnostics-list) {
+  padding:14px; background:var(--dt-page);
+}
+.devtools-ready .dt-shell :is(.dt-card,.dt-layer-evidence,.dt-layer-neighbors,.dt-layer-section,.dt-layer-origin,.dt-layer-samples,.dt-tile-content > .dt-kv,.dt-tile-feature,.dt-diagnostic,.dt-diagnostics-empty) {
+  min-width:0; margin:0 0 var(--dt-content-gap); border:1px solid var(--border); border-radius:10px; background:var(--paper);
+}
+.devtools-ready .dt-shell .dt-card { padding:0; overflow:hidden; }
+.devtools-ready .dt-shell :is(.dt-card-page,.dt-layer-content,.dt-tile-content,.dt-diagnostics-list) > :last-child { margin-bottom:0; }
+.devtools-ready .dt-shell :is(.dt-card > .dt-section-heading,.dt-card > .controls-section-title,.dt-layer-neighbors > strong) {
+  display:block; margin:0; padding:10px 14px; border:0; border-bottom:1px solid var(--border); background:var(--dt-card-heading);
+  color:var(--ink); font:600 12px/1.4 var(--ui); letter-spacing:0; text-transform:none;
+}
+.devtools-ready .dt-shell .dt-card-table { overflow:auto; }
+.devtools-ready .dt-shell .dt-card-table :is(.dt-table,.dt-layer-rules) { margin:0; }
+.devtools-ready .dt-shell .dt-card-table th { background:var(--dt-card-heading); padding:9px 14px; text-transform:none; letter-spacing:0; }
+.devtools-ready .dt-shell .dt-card-table td { padding:9px 14px; height:36px; border-bottom-color:var(--border); }
+.devtools-ready .dt-shell :is(.dt-card-table,.dt-layer-samples) tr:last-child td { border-bottom:0; }
+.devtools-ready .dt-shell .dt-subtabs { padding-inline:14px; background:var(--paper); }
+
+/* Map: each existing section is one card, with the enabled module fields kept inline. */
+.devtools-ready .dt-shell .dt-scene-content { max-width:none; background:var(--dt-page); }
+.devtools-ready .dt-shell .map-controls { padding:14px!important; background:var(--dt-page); }
+.devtools-ready .dt-shell .controls-grid { display:block; border:0; padding:0; }
+.devtools-ready .dt-shell :is(.controls-selection,.controls-runtime) { border:1px solid var(--border); padding:0; }
+.devtools-ready .dt-shell .controls-selection[hidden] { display:none; }
+.devtools-ready .dt-shell .controls-section-title { margin:0; }
+.devtools-ready .dt-shell .map-controls .control-field {
+  grid-template-columns:minmax(120px,180px) minmax(0,1fr); min-height:44px; padding:9px 18px; gap:16px;
+}
+.devtools-ready .dt-shell .map-controls .control-field.dt-palette-field { grid-template-columns:minmax(120px,180px) minmax(0,1fr); }
+.devtools-ready .dt-shell :is(.controls-selection,.controls-runtime) > .control-field:last-child { border-bottom:0; }
+.devtools-ready .dt-shell .control-module { background:transparent; }
+.devtools-ready .dt-shell .control-module:last-child { border-bottom:0; }
+.devtools-ready .dt-shell .control-module-header { min-height:44px; padding:10px 18px; }
+.devtools-ready .dt-shell .control-module-header label { gap:10px; }
+.devtools-ready .dt-shell .control-module-header input { margin-right:0; }
+.devtools-ready .dt-shell .control-module fieldset { padding:0; border-top:1px solid var(--border); background:color-mix(in srgb,var(--paper) 65%,var(--surface)); }
+.devtools-ready .dt-shell .control-module .control-field { padding-left:54px; border-bottom:1px solid var(--border); }
+.devtools-ready .dt-shell .control-module .control-field:last-child { border-bottom:0; }
+.devtools-ready .dt-shell .map-controls :is(select,input[type=number]) { border-radius:5px; }
+.devtools-ready .dt-shell :is(.controls-segments,.dt-palettes button) { border-radius:5px; }
+.devtools-ready .dt-shell .dt-palettes { gap:6px; flex-wrap:wrap; }
+.devtools-ready .dt-shell .dt-palettes button { height:auto; min-height:30px; padding:4px 8px; }
+
+/* Layers: preserve the list and tabs, frame each detail block as a card. */
+.devtools-ready .dt-shell .dt-layer-content { container-type:inline-size; }
+.devtools-ready .dt-shell :is(.dt-layer-evidence,.dt-layer-neighbors) { padding:0; overflow:hidden; }
+.devtools-ready .dt-shell .dt-layer-evidence-row { padding:10px 14px; grid-template-columns:16px 110px minmax(0,1fr); }
+.devtools-ready .dt-shell .dt-layer-evidence-row:last-child { border-bottom:0; }
+.devtools-ready .dt-shell .dt-layer-neighbors > div { margin:0; padding:9px 14px; border-bottom:1px solid var(--border); }
+.devtools-ready .dt-shell .dt-layer-neighbors > div:last-child { border-bottom:0; }
+.devtools-ready .dt-shell :is(.dt-layer-section,.dt-layer-origin) { padding:12px 14px; }
+.devtools-ready .dt-shell .dt-layer-section h4 { color:var(--ink); font:600 12px/1.4 var(--ui); text-transform:none; letter-spacing:0; }
+.devtools-ready .dt-shell .dt-layer-content > .dt-tools { margin-bottom:12px; padding:0 0 8px; border:0; background:transparent; }
+.devtools-ready .dt-shell .dt-layer-content > .dt-note { padding:0 2px 12px; }
+.devtools-ready .dt-shell .dt-layer-samples { max-height:240px; }
+.devtools-ready .dt-shell .dt-layer-samples td { padding:8px 12px; }
+.devtools-ready .dt-shell .dt-layer-group-title { height:30px; min-height:30px; background:var(--dt-card-heading)!important; }
+.devtools-ready .dt-shell .dt-layer-group-title strong { text-transform:capitalize; letter-spacing:0; }
+.devtools-ready .dt-shell .dt-layer-row { grid-template-columns:18px 26px minmax(0,1fr) 52px; height:36px; min-height:36px; gap:6px; }
+.devtools-ready .dt-shell .dt-layer-glyph { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
+@container(max-width:400px) {
+  .devtools-ready .dt-shell .dt-layer-evidence-row { grid-template-columns:16px minmax(0,1fr); gap:4px 8px; }
+  .devtools-ready .dt-shell .dt-layer-evidence-row > :last-child { grid-column:2; }
+}
+
+/* Tiles: keep whole tables together and allow long layer names to wrap. */
+.devtools-ready .dt-shell .dt-tile-content > .dt-note { padding:0 2px 10px; }
+.devtools-ready .dt-shell .dt-tile-content .dt-table td { vertical-align:top; white-space:normal; overflow-wrap:anywhere; }
+.devtools-ready .dt-shell .dt-tile-content .dt-tile-chip { display:inline-block; margin:2px 4px 2px 0; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; border-radius:4px; font-size:10px; }
+.devtools-ready .dt-shell .dt-tile-content > .dt-kv { padding:0; gap:0; overflow:hidden; grid-template-columns:minmax(100px,35%) minmax(0,1fr); }
+.devtools-ready .dt-shell .dt-tile-content > .dt-kv > * { padding:10px 14px; border-bottom:1px solid var(--border); }
+.devtools-ready .dt-shell .dt-tile-content > .dt-kv > :nth-last-child(-n+2) { border-bottom:0; }
+.devtools-ready .dt-shell .dt-tile-feature { padding:10px 14px; }
+.devtools-ready .dt-shell .dt-tile-content > :is(.dt-tile-chip-list,.dt-tile-paging) { padding:0 0 10px; margin-bottom:10px; background:transparent; }
+
+/* Debug: overlay controls and resolution controls retain their existing actions. */
+.devtools-ready .dt-shell .dt-card > .dt-debug-overlay { grid-template-columns:76px minmax(0,1fr) auto; padding:10px 18px; gap:14px; }
+.devtools-ready .dt-shell .dt-debug-overlay:last-child { border-bottom:0; }
+.devtools-ready .dt-shell .dt-debug-preview { width:76px; height:50px; border-radius:6px; }
+.devtools-ready .dt-shell .dt-debug-overlay strong { font-weight:500; }
+.devtools-ready .dt-shell .dt-debug-overlay small { margin-top:3px; font-size:11px; }
+.devtools-ready .dt-shell .dt-overdraw-help { max-width:none; padding:10px 18px 12px 108px; }
+.devtools-ready .dt-shell .dt-debug-scale { padding:12px 18px; gap:12px; }
+.devtools-ready .dt-shell .dt-debug-scale > span:first-child { flex:0 0 180px; }
+.devtools-ready .dt-shell .dt-debug-scale > input[type=range] { width:108px; min-width:60px; }
+.devtools-ready .dt-shell .dt-debug-scale > .dt-debug-specimen { flex:1; min-width:160px; }
+.devtools-ready .dt-shell .dt-card > .dt-note { padding:0 18px 12px; }
+.devtools-ready .dt-shell .dt-debug-scale:last-child { border-top:1px solid var(--border); }
+
+/* Assets and findings use the same spacing and surfaces as the other pages. */
+.devtools-ready .dt-shell .dt-assets-content { background:var(--dt-page); }
+.devtools-ready .dt-shell .dt-asset-main { padding:14px; }
+.devtools-ready .dt-shell :is(.dt-sprite-grid,.dt-model-grid,.dt-font-list) { gap:10px; background:transparent; }
+.devtools-ready .dt-shell :is(.dt-sprite-card,.dt-model-card,.dt-font-card) { border:1px solid var(--border); border-radius:8px; background:var(--paper); overflow:hidden; }
+.devtools-ready .dt-shell .dt-sprite-card { padding:10px 8px; }
+.devtools-ready .dt-shell .dt-font-list { padding:14px; max-width:none; }
+.devtools-ready .dt-shell .dt-font-card { padding:12px; }
+.devtools-ready .dt-shell .dt-asset-aside { margin:14px 14px 14px 0; border:1px solid var(--border); border-radius:10px; background:var(--paper); }
+.devtools-ready .dt-shell .dt-asset-aside h3 { margin:0; padding:12px 14px; background:var(--dt-card-heading); border-bottom:1px solid var(--border); }
+.devtools-ready .dt-shell .dt-diagnostic { overflow:hidden; }
+.devtools-ready .dt-shell .dt-diagnostic > summary { padding:12px 14px; }
+.devtools-ready .dt-shell .dt-diagnostic[open] > summary { background:var(--dt-card-heading); border-bottom:1px solid var(--border); }
+.devtools-ready .dt-shell .dt-diagnostic-detail { padding:12px 14px 14px 39px; }
+.devtools-ready .dt-shell .dt-diagnostics-empty { padding:20px; max-width:none; }
+
+@container(max-width:760px) {
+  .devtools-ready .dt-shell .dt-asset-aside { margin:0 14px 14px; }
+}
+@container(max-width:480px) {
+  .devtools-ready .dt-shell :is(.dt-card-page,.dt-layer-content,.dt-tile-content,.dt-diagnostics-list,.dt-asset-main,.dt-font-list) { padding:10px; }
+  .devtools-ready .dt-shell .map-controls { padding:10px!important; }
+  .devtools-ready .dt-shell .map-controls :is(.control-field,.control-field.dt-palette-field) { grid-template-columns:110px minmax(0,1fr); gap:10px; padding-inline:12px; }
+  .devtools-ready .dt-shell .control-module .control-field { padding-left:24px; }
+  .devtools-ready .dt-shell .dt-debug-scale > span:first-child { flex-basis:100%; }
+  .devtools-ready .dt-shell .dt-card > .dt-debug-overlay { grid-template-columns:60px minmax(0,1fr) auto; padding:10px 12px; gap:10px; }
+  .devtools-ready .dt-shell .dt-debug-preview { width:60px; height:40px; }
+  .devtools-ready .dt-shell .dt-overdraw-help { padding-left:12px; }
+}
+`;
+
 // src/devtools/inspector-styles.ts
 var inspectorStyles = `
 body.devtools-ready {
   --paper:#F8F6F2; --surface:#F0EDE7; --ink:#30251F; --muted:#635449; --faint:#A0907F;
   --border:#E1DCD3; --border-strong:#C7BFB3; --accent:#38668B; --dt-selected:#E6ECF2;
   --hover:#E9E5DE; --accent-soft:#DFE8F0; --ok:#2F704B; --ok-soft:#E3EBDB; --warn:#815D21; --warn-soft:#F3E6CF;
-  --danger:#B13C34; --dt-string:var(--ink); --dt-number:var(--accent); --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
-  color-scheme:light; font:13px/1.4 Inter,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;
+  --danger:#B13C34; --dt-string:var(--ink); --dt-number:var(--accent); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
+  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
+  --dt-control-height:22px; --dt-row-height:22px; --dt-nav-height:27px;
+  --dt-header-height:44px; --dt-camera-control-height:30px;
+  color-scheme:light; font:12px/1.35 var(--ui); -webkit-font-smoothing:antialiased;
 }
 body.devtools-ready[data-inspector-theme=dark] {
   --paper:#1D1816; --surface:#171311; --ink:#F5EDD9; --muted:#C3B7A9; --faint:#857869; --border:#40352F; --border-strong:#5A4B43;
@@ -289,8 +420,8 @@ body.devtools-ready[data-inspector-theme=dark] {
 .devtools-ready input[role=switch]::before { content:''; position:absolute; width:11px; height:11px; left:2px; top:2px; border-radius:50%; background:#fff; transition:transform .15s; }
 .devtools-ready input[role=switch]:checked { background:var(--accent); }
 .devtools-ready input[role=switch]:checked::before { transform:translateX(11px); }
-.devtools-ready .dt-layer-split { display:grid; grid-template-columns:minmax(300px,360px) minmax(0,1fr); }
-.devtools-ready .dt-layer-sidebar { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); }
+.devtools-ready .dt-layer-split { display:grid; grid-template-columns:minmax(0,min(38%,360px)) minmax(0,1fr); }
+.devtools-ready .dt-layer-sidebar { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border-right:1px solid var(--border); }
 .devtools-ready .dt-layer-list { flex:1; border:0; }.devtools-ready .dt-layer-tools { flex-direction:column; align-items:stretch; }
 .devtools-ready .dt-layer-tools-row { display:flex; align-items:center; gap:8px; }.devtools-ready .dt-layer-total { margin-left:auto; font:11px var(--mono); }
 .devtools-ready .dt-layer-visible { font-size:12px; }.devtools-ready .dt-layer-group-title { height:32px; font-size:11px; padding:0 12px 0 8px!important; }
@@ -322,7 +453,7 @@ body.devtools-ready[data-inspector-theme=dark] {
 .devtools-ready .dt-layer-evidence-row[data-state=pass] .dt-layer-indicator { color:var(--ok); }.devtools-ready .dt-layer-evidence-row[data-state=warn] .dt-layer-indicator { color:var(--warn); }
 .devtools-ready .dt-layer-json { font:11px/1.6 var(--mono); color:var(--ink); }
 .devtools-ready .dt-table { font:12px var(--mono); }.devtools-ready .dt-table th { padding:8px 12px; font:11px Inter,system-ui,sans-serif; text-transform:uppercase; border-right:0; }.devtools-ready .dt-table td { height:32px; padding:6px 12px; }.devtools-ready .dt-table tbody tr:nth-child(even) { background:transparent; }
-.devtools-ready .dt-network-body { display:grid; grid-template-columns:minmax(300px,360px) minmax(0,1fr); }.dt-tiles-sidebar { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); }.devtools-ready .dt-network-detail { border:0; min-width:0; }
+.devtools-ready .dt-network-body { display:grid; grid-template-columns:minmax(0,min(38%,360px)) minmax(0,1fr); }.dt-tiles-sidebar { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border-right:1px solid var(--border); }.devtools-ready .dt-network-detail { border:0; min-width:0; }
 .devtools-ready .dt-tile-heading { padding:14px 20px 8px; }.dt-tile-heading strong { font:15px var(--mono); }.dt-tile-status { padding:0 20px 10px; color:var(--muted); font-size:12px; }
 .dt-tile-grid { display:grid; gap:3px; padding:12px; }.devtools-ready .dt-tile-cell { aspect-ratio:1; padding:0; font:10px var(--mono); min-width:0; min-height:20px; border-radius:4px; background:color-mix(in srgb,var(--accent) var(--weight,10%),var(--paper)); }
 .devtools-ready .dt-tile-cell[aria-pressed=true] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }.dt-tile-grid-title { margin:10px 12px 0; color:var(--muted); font-size:11px; }
@@ -336,9 +467,6 @@ body.devtools-ready[data-inspector-theme=dark] {
 .devtools-ready .controls-section-title { margin:0; padding:8px 20px; background:var(--surface); border-bottom:1px solid var(--border); font-size:11px; letter-spacing:.05em; }.devtools-ready .control-field { display:grid; grid-template-columns:200px 1fr; align-items:center; margin:0; padding:10px 20px; border-bottom:1px solid var(--border); gap:16px; font-size:13px; }.devtools-ready .control-field select { max-width:100%; width:max-content; min-width:132px; }
 .devtools-ready #controls-modules { display:block; }.devtools-ready .control-module { border:0; border-bottom:1px solid var(--border); border-radius:0; margin:0; background:var(--paper); }.devtools-ready .control-module-header { padding:10px 20px; }.devtools-ready .control-module-header label { justify-content:flex-start; font-size:13px; font-weight:500; }.devtools-ready .control-module-header input { order:-1; margin-right:12px; }.devtools-ready .control-module fieldset { padding:0; background:var(--surface); }.devtools-ready .control-module .control-field { padding-left:58px; border:0; }.devtools-ready .dt-scene-content { max-width:1000px; width:100%; }.dt-palettes { display:flex; gap:8px; flex-wrap:wrap; }.devtools-ready .dt-palette { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; }.dt-palette-swatches { display:grid; grid-template-columns:repeat(2,11px); grid-template-rows:repeat(2,11px); overflow:hidden; border-radius:4px; }
 @container(max-width:760px) {
- .devtools-ready .dt-layer-split,.devtools-ready .dt-network-body { display:flex; flex-direction:column; }
- .devtools-ready .dt-layer-sidebar,.devtools-ready .dt-tiles-sidebar { flex:0 0 36%; min-height:150px; border:0; border-bottom:1px solid var(--border); }
- .devtools-ready .dt-layer-detail,.devtools-ready .dt-network-detail { flex:1; min-height:0; border:0; }
  .devtools-ready .dt-layer-title { flex-basis:180px; }.devtools-ready .dt-camera-field input[type=range] { width:80px; }
  .devtools-ready .dt-layer-rules th:first-child { width:45%; }.devtools-ready .dt-layer-rules td { padding:8px 12px; }
  .dt-asset-layout { grid-template-columns:1fr; }.dt-asset-aside { border:0; border-top:1px solid var(--border); }
@@ -359,7 +487,109 @@ body.devtools-ready[data-inspector-theme=dark] {
 .devtools-ready .dt-shell .dt-layer-heading{flex:none}.devtools-ready .dt-shell .dt-layer-title{flex:1 1 180px}
 .devtools-ready .dt-shell .dt-layer-sidebar .dt-layer-list{flex:1;min-height:0}.devtools-ready .dt-shell .map-controls .control-field{display:grid;grid-template-columns:160px minmax(0,1fr);padding:12px 20px;margin:0}
 .devtools-ready .dt-shell .control-module-header label{display:flex;gap:12px}.devtools-ready .dt-shell .map-controls input[role=switch]{width:26px!important;height:15px!important;min-height:0;border:0;background:var(--faint)}.devtools-ready .dt-shell .map-controls input[role=switch]:checked{background:var(--accent)}.devtools-ready .dt-shell .map-controls input[role=switch]::before{width:11px;height:11px;top:2px;left:2px;background:white}.devtools-ready .dt-shell .map-controls input[role=switch]:checked::before{transform:translateX(11px)}
-@container(max-width:760px){.devtools-ready .dt-shell .dt-layer-sidebar,.devtools-ready .dt-shell .dt-tiles-sidebar{min-height:110px;flex:0 0 38%}.devtools-ready .dt-shell .dt-layer-tools{padding:8px 12px}.devtools-ready .dt-shell .dt-tabs button{padding-inline:7px}.devtools-ready .dt-shell .dt-head{padding-inline:4px}.devtools-ready .dt-shell .dt-camera-field{flex:0 0 auto}}
+@container(max-width:760px){.devtools-ready .dt-shell .dt-layer-tools{padding:8px 12px}.devtools-ready .dt-shell .dt-tabs button{padding-inline:7px}.devtools-ready .dt-shell .dt-head{padding-inline:4px}.devtools-ready .dt-shell .dt-camera-field{flex:0 0 auto}}
+
+/* Shared density also wins over panel styles injected after the shell stylesheet. */
+.devtools-ready .dt-shell { font:12px/1.35 var(--ui); }
+.devtools-ready .dt-shell :is(button,input,select,summary) { min-height:var(--dt-control-height); }
+.devtools-ready .dt-shell button { padding:2px 6px; border-radius:3px; }
+.devtools-ready .dt-shell :is(input[type=checkbox],input[type=radio],input[type=range],input[type=color]) { min-height:0; }
+.devtools-ready .dt-shell .dt-head { height:var(--dt-header-height); min-height:var(--dt-header-height); padding:0 4px; }
+.devtools-ready .dt-shell .dt-tabs { gap:0; }
+.devtools-ready .dt-shell .dt-tabs button { height:34px; min-height:34px; padding:0 8px; border-radius:4px; }
+.devtools-ready .dt-shell .dt-head .dt-icon { width:30px; height:30px; min-height:30px; padding:5px; margin-block:0; }
+.devtools-ready .dt-shell > .dt-camera { min-height:48px; padding:8px; gap:6px; }
+.devtools-ready .dt-shell .dt-camera-field { height:var(--dt-camera-control-height); border-radius:5px; }
+.devtools-ready .dt-shell .dt-camera-field > span:first-child { padding-left:6px; }
+.devtools-ready .dt-shell .dt-camera-field input[type=number] { width:48px; min-height:0; padding:0 3px; font-size:12px; }
+.devtools-ready .dt-shell .dt-camera-field input[type=range] { width:88px; margin:0 6px 0 2px; }
+.devtools-ready .dt-shell .dt-unit { padding-right:6px; }
+.devtools-ready .dt-shell .dt-camera-reset { display:inline-flex; align-items:center; justify-content:center; flex:none; width:26px; height:100%; min-height:0; padding:4px; border:0; border-left:1px solid var(--border); border-radius:0; background:transparent; }
+.devtools-ready .dt-shell .dt-camera-reset:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
+.devtools-ready .dt-shell .dt-copy-agent { min-height:var(--dt-camera-control-height); padding:4px 10px; font-size:12px; white-space:nowrap; }
+.devtools-ready .dt-shell .dt-menu { top:var(--dt-header-height); right:4px; width:216px; padding:6px; border-radius:4px; }
+.devtools-ready .dt-shell .dt-dock-options { gap:4px; margin-bottom:6px; }
+.devtools-ready .dt-shell .dt-dock-options button { height:26px; padding:2px; }
+.devtools-ready .dt-shell :is(.dt-segments,.dt-layer-modes,.controls-segments) { padding:1px; gap:1px; border-radius:3px; }
+.devtools-ready .dt-shell :is(.dt-segments,.dt-layer-modes,.controls-segments) button { min-height:20px; padding:1px 6px; border-radius:2px; }
+.devtools-ready .dt-shell .dt-tools { min-height:28px; padding:3px 8px; gap:4px; }
+.devtools-ready .dt-shell .dt-tools input[type=search] { height:var(--dt-control-height); padding:0 6px; border-radius:3px; }
+.devtools-ready .dt-shell .dt-layer-tools-row { min-width:0; min-height:var(--dt-control-height); gap:6px; flex-wrap:wrap; }
+.devtools-ready .dt-shell .dt-layer-modes { max-width:100%; overflow-x:auto; }
+.devtools-ready .dt-shell .dt-subtabs { padding:0 8px; gap:12px; }
+.devtools-ready .dt-shell .dt-subtabs button { min-height:var(--dt-nav-height); padding:3px 0; border-radius:0; }
+.devtools-ready .dt-shell .dt-footer { min-height:20px; padding:2px 8px; gap:8px; }
+.devtools-ready .dt-shell .dt-section-heading { padding:4px 10px; }
+.devtools-ready .dt-shell .dt-kv { gap:3px 8px; padding:6px 8px; font:11px/1.4 var(--mono); }
+.devtools-ready .dt-shell .dt-layer-group-title { height:var(--dt-row-height); min-height:var(--dt-row-height); padding:0 8px 0 6px!important; }
+.devtools-ready .dt-shell .dt-layer-row { grid-template-columns:18px 16px minmax(0,1fr) 52px; height:var(--dt-row-height); min-height:var(--dt-row-height); padding:0 8px 0 4px; gap:4px; border-radius:0; }
+.devtools-ready .dt-shell .dt-layer-glyph { font-size:13px; }
+.devtools-ready .dt-shell .dt-eye { min-height:18px; width:18px; height:18px; padding:0; }
+.devtools-ready .dt-shell .dt-zrange { width:52px; }
+.devtools-ready .dt-shell .dt-layer-heading { padding:8px 10px 4px; }
+.devtools-ready .dt-shell .dt-layer-title strong { font-size:13px; }
+.devtools-ready .dt-shell .dt-layer-status { margin-top:3px; gap:6px; font-size:11px; }
+.devtools-ready .dt-shell .dt-layer-rules th { padding:4px 10px; }
+.devtools-ready .dt-shell .dt-layer-rules td { padding:3px 10px; min-height:24px; }
+.devtools-ready .dt-shell .dt-layer-rules code { font:11px/1.4 var(--mono); }
+.devtools-ready .dt-shell .dt-layer-rule-editor { gap:5px; }
+.devtools-ready .dt-shell .dt-layer-rule-editor :is(input:not([type=color]):not([type=checkbox]):not([type=range]),select) { min-height:20px; font:11px/1.4 var(--mono); border-radius:3px; }
+.devtools-ready .dt-shell .dt-layer-rule-editor input[type=color] { width:18px; height:20px; }
+.devtools-ready .dt-shell .dt-layer-rule-editor input[type=range] { width:88px; min-width:60px; flex-basis:88px; }
+.devtools-ready .dt-shell .dt-rule-toggle { gap:6px; }
+.devtools-ready .dt-shell .dt-rule-choices { border-radius:3px; }
+.devtools-ready .dt-shell .dt-rule-choices button { min-height:20px; padding:1px 5px; border-radius:0; }
+.devtools-ready .dt-shell .dt-rule-spark { gap:6px; margin-bottom:3px; }
+.devtools-ready .dt-shell .dt-rule-spark svg { width:100px; height:22px; }
+.devtools-ready .dt-shell .dt-filter-chips { gap:4px; margin-block:6px; }
+.devtools-ready .dt-shell .dt-filter-chip { padding:2px 6px; }
+.devtools-ready .dt-shell :is(.dt-layer-section,.dt-layer-origin) { padding:6px 10px; }
+.devtools-ready .dt-shell .dt-layer-evidence-row { padding:6px 10px; grid-template-columns:16px 110px minmax(0,1fr); }
+.devtools-ready .dt-shell .dt-table { font:11px/1.4 var(--mono); }
+.devtools-ready .dt-shell .dt-table th { padding:4px 8px; font:11px var(--ui); }
+.devtools-ready .dt-shell .dt-table td { height:var(--dt-row-height); padding:2px 8px; }
+.devtools-ready .dt-shell .dt-tile-heading { padding:8px 10px 4px; }
+.devtools-ready .dt-shell .dt-tile-heading strong { font-size:13px; }
+.devtools-ready .dt-shell .dt-tile-status { padding:0 10px 6px; }
+.devtools-ready .dt-shell .dt-tile-grid { padding:8px; gap:2px; }
+.devtools-ready .dt-shell .dt-tile-cell { padding:0; min-height:20px; }
+.devtools-ready .dt-shell .dt-tile-grid-title { margin:6px 8px 0; }
+.devtools-ready .dt-shell .dt-tile-chip-list { padding:5px 10px; gap:4px; }
+.devtools-ready .dt-shell .dt-asset-main { padding:8px; }
+.devtools-ready .dt-shell .dt-asset-aside h3 { font-size:13px; margin:8px 10px; }
+.devtools-ready .dt-shell .dt-asset-variant { padding:10px 6px; gap:6px; }
+.devtools-ready .dt-shell .dt-sprite-grid { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
+.devtools-ready .dt-shell .dt-sprite-card { padding:6px 4px; border-radius:4px; }
+.devtools-ready .dt-shell .dt-sprite-preview { height:44px; }
+.devtools-ready .dt-shell .dt-sprite-card figcaption { margin-top:4px; }
+.devtools-ready .dt-shell .dt-font-card { padding:8px; }
+.devtools-ready .dt-shell .dt-font-card figcaption { margin-bottom:5px; font:11px/1.4 var(--mono); }
+.devtools-ready .dt-shell .dt-font-loading { padding:8px; }
+.devtools-ready .dt-shell .dt-model-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; }
+.devtools-ready .dt-shell .dt-model-card { padding:0; border-radius:4px; }
+.devtools-ready .dt-shell .dt-model-card strong { padding:5px 8px 2px; }
+.devtools-ready .dt-shell .dt-model-card small { padding:0 8px 5px; }
+.devtools-ready .dt-shell .dt-debug-overlay { grid-template-columns:60px 1fr auto; gap:8px; padding:6px 10px; }
+.devtools-ready .dt-shell .dt-debug-preview { width:60px; height:40px; border-radius:3px; }
+.devtools-ready .dt-shell .dt-overdraw-help { padding:6px 10px 6px 78px; }
+.devtools-ready .dt-shell .dt-debug-scale { gap:8px; padding:8px 10px; }
+.devtools-ready .dt-shell .dt-debug-specimen { gap:10px; min-height:52px; padding:6px 10px; border-radius:4px; }
+.devtools-ready .dt-shell .controls-section-title { padding:4px 10px; }
+.devtools-ready .dt-shell .map-controls .control-field { grid-template-columns:140px minmax(0,1fr); padding:6px 10px; gap:8px; font-size:12px; }
+.devtools-ready .dt-shell .control-module-header { padding:6px 10px; }
+.devtools-ready .dt-shell .control-module-header label { font-size:12px; gap:6px; }
+.devtools-ready .dt-shell .control-module-header input { margin-right:6px; }
+.devtools-ready .dt-shell .control-module .control-field { padding-left:38px; }
+.devtools-ready .dt-shell .map-controls .control-field.dt-palette-field { grid-template-columns:70px minmax(0,1fr); align-items:center; }
+.devtools-ready .dt-shell .dt-palettes { gap:4px; align-items:center; }
+.devtools-ready .dt-shell .dt-palettes button { flex-direction:row; align-items:center; gap:5px; padding:2px 6px; min-width:0; height:var(--dt-control-height); font-size:11px; white-space:nowrap; }
+.devtools-ready .dt-shell .dt-palette-swatches { width:24px; height:10px; flex:none; border-radius:2px; }
+.devtools-ready .dt-shell .dt-palette-swatches i { min-width:0; }
+@container(max-width:480px) {
+ .devtools-ready .dt-shell .map-controls .control-field { grid-template-columns:110px minmax(0,1fr); }
+ .devtools-ready .dt-shell .control-module .control-field { padding-left:24px; }
+ .devtools-ready .dt-shell .dt-camera-field input[type=range] { width:48px; }
+}
 `;
 
 // src/devtools/styles.ts
@@ -372,8 +602,8 @@ var legacyStyles = `
   .devtools-ready button[aria-pressed=true] { color:var(--accent); background:var(--dt-selected); }
   .devtools-ready .tool-icon { width:14px; height:14px; }
   .devtools-ready .workspace { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(180px,1fr) var(--dt-height,340px); flex:1; min-height:0; }
-  .devtools-ready .workspace[data-dock=right] { grid-template-columns:minmax(200px,1fr) var(--dt-width,460px); grid-template-rows:minmax(0,1fr); }
-  .devtools-ready .workspace[data-dock=left] { grid-template-columns:var(--dt-width,460px) minmax(200px,1fr); grid-template-rows:minmax(0,1fr); }
+  .devtools-ready .workspace[data-dock=right] { grid-template-columns:minmax(200px,1fr) max(640px,var(--dt-width,760px)); grid-template-rows:minmax(0,1fr); }
+  .devtools-ready .workspace[data-dock=left] { grid-template-columns:max(640px,var(--dt-width,760px)) minmax(200px,1fr); grid-template-rows:minmax(0,1fr); }
   .devtools-ready .workspace[data-dock=left] > .stage { grid-column:2; grid-row:1; }
   .devtools-ready .workspace[data-dock=left] > .dt-shell { grid-column:1; grid-row:1; border-right:1px solid var(--border); }
   .devtools-ready .workspace[data-collapsed=true] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
@@ -497,14 +727,6 @@ var legacyStyles = `
   .dt-tile-feature summary { cursor:pointer; overflow-wrap:anywhere; font-size:11px; }
   .dt-tile-feature details { padding-left:12px; }
   .dt-tile-feature pre { white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.6 ui-monospace,monospace; color:var(--dt-string); margin:6px 0; }
-  :is([data-dock=left],[data-dock=right]) .dt-network-body { flex-direction:column; }
-  :is([data-dock=left],[data-dock=right]) .dt-network-body[data-selected=true] > .dt-scroll { flex:0 0 35%; }
-  :is([data-dock=left],[data-dock=right]) .dt-network-detail { flex:1; min-width:0; border-left:0; border-top:1px solid var(--border); }
-  @container(max-width:680px) {
-    .dt-network-body { flex-direction:column; }
-    .dt-network-body[data-selected=true] > .dt-scroll { flex:0 0 35%; }
-    .dt-network-detail { flex:1; min-width:0; border-left:0; border-top:1px solid var(--border); }
-  }
   .dt-kv { display:grid; grid-template-columns:minmax(100px,auto) minmax(0,1fr); gap:5px 12px; font:12px/1.5 ui-monospace,monospace; padding:8px; margin:0; }
   .dt-kv dt { color:var(--muted); overflow-wrap:anywhere; }.dt-kv dd { margin:0; overflow-wrap:anywhere; }
   .dt-note { color:var(--muted); font-size:11px; padding:6px 8px; margin:0; }
@@ -530,7 +752,7 @@ var legacyStyles = `
   @media (prefers-reduced-motion:reduce) { .dt-shell .map-controls input[type=checkbox],.dt-shell .map-controls input[type=checkbox]::before { transition:none; } }
   .dt-shell .control-module { border:0; border-bottom:1px solid var(--border); border-radius:0; background:var(--paper); margin:0; }
   .dt-shell .control-module-header { padding:5px 0; }.dt-shell .control-module-header label { font-size:12px; font-weight:400; }
-  .dt-shell .control-module fieldset { min-width:0; padding:0 0 8px 16px; }.dt-shell .control-module summary { padding:2px 0 5px; }
+  .dt-shell .control-module fieldset { min-width:0; padding:0 0 8px 16px; }
   .dt-shell .controls-section-title { margin:10px 0 4px; font-size:11px; letter-spacing:0; text-transform:none; }
   .dt-shell .control-field { margin:5px 0; }
   @container(max-width:680px) { .dt-shell .controls-grid,.dt-shell #controls-modules { grid-template-columns:minmax(0,1fr); }.dt-shell .map-controls .control-field,.dt-shell .control-module-header label { grid-template-columns:min(36%,160px) minmax(0,1fr); }.dt-shell .controls-segments button { padding-inline:8px; } }
@@ -567,7 +789,16 @@ var legacyStyles = `
   .dt-zoom { padding:8px; }.dt-zoom > select { width:100%; margin-bottom:8px; }
   @container(max-width:680px) { .dt-inspect-grid { display:flex;flex-direction:column; }.dt-tree-column { flex:0 0 32%;border-right:0;border-bottom:1px solid var(--border); }.dt-details { flex:1; } }
 `;
-var devtoolsStyles = legacyStyles + inspectorStyles;
+var devtoolsStyles = legacyStyles + inspectorStyles + cardStyles;
+
+// src/devtools/theme-labels.ts
+var themeLabels = {
+  light: "Light",
+  default: "Default",
+  faded: "Faded",
+  monochrome: "Monochrome"
+};
+var defaultPaletteMapIds = ["streets", "map-1777"];
 
 // src/workbench-client.ts
 var workbenchClient = String.raw`
@@ -580,6 +811,9 @@ var workbenchClient = String.raw`
       let wbPickerKey = "";
       let wbTimeOfDay = "";
       const wbPaletteColors = new Map();
+      const wbThemeLabels = ${JSON.stringify(themeLabels)};
+      const wbDefaultPaletteMaps = ${JSON.stringify(defaultPaletteMapIds)};
+      const wbThemeLabel = (theme, metadata) => theme === "light" && wbDefaultPaletteMaps.some(id => metadata?.["tileflow:map"] === id || (Array.isArray(metadata?.["tileflow:extends"]) && metadata["tileflow:extends"].includes(id))) ? "Default" : Object.hasOwn(wbThemeLabels,theme) ? wbThemeLabels[theme] : theme.replace(/[-_]/g," ");
       const wbClient = "view-" + Math.random().toString(36).slice(2);
       const wb = (id) => document.getElementById("wb-" + id);
       if (options.workbenchUrl) initializeWorkbench();
@@ -695,13 +929,18 @@ var workbenchClient = String.raw`
           return;
         }
         const variants = owner?.timeOfDay?.[side.workbenchMap] || {};
-        const key = JSON.stringify([activeSideId, selectedTheme, selections, variants, side.requestedTimeOfDay]);
+        const themeMetadata = side.map?.getStyle?.()?.metadata;
+        const key = JSON.stringify([activeSideId, selectedTheme, selections, variants, side.requestedTimeOfDay, themeMetadata?.["tileflow:map"], themeMetadata?.["tileflow:extends"]]);
         if (key === wbPickerKey) return;
         wbPickerKey = key;
         const allThemes = [...new Set(selections.map((entry) => entry.theme))];
         const family = Object.keys(variants).find((name) => Object.values(variants[name]).includes(selectedTheme));
         const members = new Set(Object.values(variants).flatMap((moments) => Object.values(moments)));
         const themes = allThemes.filter((name) => !members.has(name) || Object.hasOwn(variants, name));
+        if (themeMetadata?.["tileflow:map"] === "streets" || (Array.isArray(themeMetadata?.["tileflow:extends"]) && themeMetadata["tileflow:extends"].includes("streets"))) {
+          const streetsOrder = new Map([["light", 0], ["faded", 1], ["monochrome", 2]]);
+          themes.sort((left, right) => (streetsOrder.get(left) ?? 3) - (streetsOrder.get(right) ?? 3));
+        }
         const moments = family ? variants[family] : {};
         wbTimeOfDay = moments[side.requestedTimeOfDay] === selectedTheme ? side.requestedTimeOfDay : Object.keys(moments).find((moment) => moments[moment] === selectedTheme) || "";
         for (const segment of wb("time-of-day").querySelectorAll("button")) {
@@ -711,20 +950,20 @@ var workbenchClient = String.raw`
           segment.disabled = !moments[segment.value];
         }
         wb("time-of-day-field").hidden = !family;
-        wb("theme").replaceChildren(...themes.map((theme) => new Option(theme, theme)));
+        wb("theme").replaceChildren(...themes.map((theme) => new Option(wbThemeLabel(theme,themeMetadata), theme)));
         wb("theme").value = family || selectedTheme;
         wb("theme").disabled = themes.length < 2;
         wb("palettes").replaceChildren(...themes.map(theme => {
           const button=document.createElement("button");button.type="button";button.setAttribute("role","radio");button.setAttribute("aria-checked",String(theme===(family||selectedTheme)));
           const swatches=document.createElement("span");swatches.className="dt-palette-swatches";
-          const label=document.createElement("span");label.textContent=theme.replace(/[-_]/g," ");button.append(swatches,label);
+          const label=document.createElement("span");label.textContent=wbThemeLabel(theme,themeMetadata);button.append(swatches,label);
           button.onclick=()=>{wb("theme").value=theme;selectWorkbenchAppearance();};
           const concrete=variants[theme]?.[wbTimeOfDay] || variants[theme]?.day || theme;
           const fill=colors=>{if(!button.isConnected)return;swatches.replaceChildren(...colors.map(color=>{const swatch=document.createElement("i");swatch.style.background=color;return swatch;}));};
           if(wbPaletteColors.has(concrete))queueMicrotask(()=>fill(wbPaletteColors.get(concrete)));
           else {
             const url=new URL(side.definition.basePath+"/styles/"+side.workbenchMap+"/"+concrete+".json",location.href);
-            fetch(url).then(response=>{if(!response.ok)throw new Error("Palette unavailable");return response.json();}).then(style=>{
+            fetch(url).then(response=>{if(!response.ok)throw new Error("Theme unavailable");return response.json();}).then(style=>{
               const choices=[/background/,/water/,/land.*(?:park|vegetation)|vegetation/,/building/];
               const colors=choices.map(pattern=>style.layers.flatMap(layer=>pattern.test(layer.id)||pattern.test(layer.type)?Object.entries(layer.paint||{}).filter(([key,value])=>key.endsWith("-color")&&typeof value==="string").map(([,value])=>value):[])[0]).filter(Boolean);
               wbPaletteColors.set(concrete,colors);fill(colors);
@@ -765,10 +1004,17 @@ var workbenchClient = String.raw`
         const layerObservation = globalThis.__tileflowDevtoolsUI?.layerContext?.();
         const selected = !layerObservation && selectedInspection?.side === side ? selectedInspection : undefined;
         const feature = selected?.features[selected.featureIndex];
-        const layer = feature && side.map?.getStyle?.().layers?.find((entry) => entry.id === feature.layerId);
+        const style = side.map?.getStyle?.();
+        const metadata = style?.metadata;
+        const layer = feature && style?.layers?.find((entry) => entry.id === feature.layerId);
         const provenance = feature && findSidecarLayer(side.sidecar, feature.layerId);
         let definition;
         try { definition = currentWorkbenchDefinition(); } catch { /* Loading previews have no camera yet. */ }
+        const themeVariants = wbCatalog?.sides[side.serviceId || side.id]?.timeOfDay?.[definition?.map] || {};
+        const themeFamily = definition && Object.keys(themeVariants).find(name => Object.values(themeVariants[name]).includes(definition.theme));
+        const appearance = definition ? {theme:wbThemeLabel(themeFamily || definition.theme,metadata), themeId:themeFamily || definition.theme,
+          timeOfDay:themeFamily ? (themeVariants[themeFamily][wbTimeOfDay] === definition.theme ? wbTimeOfDay : Object.keys(themeVariants[themeFamily]).find(moment => themeVariants[themeFamily][moment] === definition.theme)) : undefined,
+          concreteThemeId:definition.theme} : undefined;
         const configuration = side.definition.captureConfig ? " --config " + quoteCliArgument(side.definition.captureConfig) : "";
         const semanticOwner = provenance && sidecarLayerWithSemanticAttribution(provenance).semanticAttribution[0]?.semanticOwner;
         const captureCommand = definition ? "tileflow capture" + configuration + " --map " + quoteCliArgument(definition.map) + " --theme " + quoteCliArgument(definition.theme) +
@@ -776,7 +1022,7 @@ var workbenchClient = String.raw`
           " --width=" + definition.viewport.width + " --height=" + definition.viewport.height + " --dpr=" + definition.viewport.dpr + " --json" : undefined;
         return {schemaVersion:1, source:"browser-observation", config:side.definition.captureConfig || "tileflow.config.ts",
           status:side.artifactStatus, generation:side.artifactGeneration, inspectionEnabled,
-          displayedGeneration:Number(side.frame.contentDocument?.documentElement.dataset.tileflowArtifactGeneration), definition,
+          displayedGeneration:Number(side.frame.contentDocument?.documentElement.dataset.tileflowArtifactGeneration), definition, appearance,
           captureSemantics:"Compiled map at the observed camera and viewport; temporary preview edits are excluded.",
           review:{referenceId:null, before:null, after:null, liveMode:stage.dataset.mode, source:"map"},
           commands:{inspect:"tileflow inspect" + configuration + (semanticOwner ? " --domain " + quoteCliArgument(semanticOwner) : " --limit 80") + " --json", capture:captureCommand,
@@ -893,9 +1139,8 @@ var controlsStyles = `
   .control-module-header input:checked { background:var(--accent); }
   .control-module-header input:checked::before { transform:translateX(12px); }
   .control-module-header input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
-  .control-module summary { cursor:pointer; padding:0 12px 10px; font-size:11px; color:var(--muted); }
   .control-module fieldset { border:0; padding:0 12px 12px; margin:0; }
-  .control-module fieldset:disabled { opacity:.45; }
+  .control-module fieldset[hidden] { display:none; }
   .control-field { display:flex; align-items:center; justify-content:space-between; flex-direction:row; gap:12px; font-size:12px; margin:9px 0; }
   .control-field select,.control-field input[type=number] { width:132px; min-width:0; padding:5px 7px; font:inherit; }
   .control-field input[type=checkbox] { accent-color:var(--accent); }
@@ -910,19 +1155,21 @@ var controlsPanel = `
   <aside class="map-controls" id="map-controls" aria-label="Scene settings" tabindex="-1" hidden>
     <div class="controls-heading"><h2>Styles</h2><button id="controls-reset">Reset</button></div>
     <div class="controls-grid">
-    <div class="controls-selection workbench-only" id="controls-selection" hidden>
+    <div class="controls-selection workbench-only dt-card" id="controls-selection" hidden>
       <div class="controls-section-title">Appearance</div>
       <div class="control-field" id="wb-time-of-day-field" hidden><span>Time of day</span><div class="controls-segments" id="wb-time-of-day" role="radiogroup" aria-label="Time of day"></div></div>
-      <div class="control-field dt-palette-field" id="wb-theme-field"><span>Theme</span><select id="wb-theme" aria-label="Palette" disabled hidden><option value="">Waiting for map\u2026</option></select><div id="wb-palettes" class="dt-palettes" role="radiogroup" aria-label="Theme palette"></div></div>
+      <div class="control-field dt-palette-field" id="wb-theme-field"><span>Theme</span><select id="wb-theme" aria-label="Theme" disabled hidden><option value="">Waiting for map\u2026</option></select><div id="wb-palettes" class="dt-palettes" role="radiogroup" aria-label="Theme"></div></div>
     </div>
-    <fieldset class="controls-runtime" id="controls-runtime">
+    <fieldset class="controls-runtime dt-card" id="controls-runtime">
       <div class="controls-section-title">Preview rendering</div>
       <label class="control-field">3D view<input id="controls-3d" type="checkbox" role="switch"></label>
       <label class="control-field">Building animation<select id="controls-animation" hidden><option value="0">Off</option><option value="800">Grow</option><option value="fade">Fade</option></select><span class="controls-segments" id="controls-animation-segments" role="radiogroup" aria-label="Building animation"></span></label>
     </fieldset>
     </div>
-    <div class="controls-section-title">Map modules</div>
-    <fieldset id="controls-modules"></fieldset>
+    <section class="dt-card controls-module-card">
+      <div class="controls-section-title">Map modules</div>
+      <fieldset id="controls-modules"></fieldset>
+    </section>
     <p id="controls-status" role="status" hidden></p>
   </aside>
 `;
@@ -945,10 +1192,6 @@ var controlsClient = String.raw`
         scheduleMapControls(true);
       });
       for (const name of ["3d", "animation"]) ctl(name).addEventListener("change", () => { syncAnimationSegments(); scheduleMapControls(); });
-      ctl("3d").addEventListener("change", () => {
-        const map = states[activeSideId].map;
-        if (map) map.easeTo({pitch:ctl("3d").checked ? Math.min(60,map.getMaxPitch()) : 0, duration:matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 350}, {tileflowDevtools:true});
-      });
       for (const [value,label] of [["0","Off"],["800","Grow"],["fade","Fade"]]) {
         const button=document.createElement("button"); button.type="button";button.value=value;button.textContent=label;button.setAttribute("role","radio");
         button.addEventListener("click",()=>{ctl("animation").value=value;ctl("animation").dispatchEvent(new Event("change"));});ctl("animation-segments").append(button);
@@ -1049,7 +1292,7 @@ var controlsClient = String.raw`
             const query = livePreviewUrl(side).searchParams;
             controlsDraft = JSON.parse(query.get("controls") || "{}");
             side.appliedSceneStyle ||= JSON.stringify([identity.map, controlsIdentity(side).theme, controlsDraft]);
-            ctl("3d").checked = query.get("buildings3d") === "on";
+            ctl("3d").checked = query.get("buildings3d") !== "off";
             ctl("animation").value = query.get("animation") === "fade" ? "fade" : Number(query.get("animation")) > 0 ? "800" : "0"; syncAnimationSegments();
             renderMapControls();
             controlsUndo.length = controlsRedo.length = 0;
@@ -1078,7 +1321,7 @@ var controlsClient = String.raw`
         if (!Object.keys(patch).length) delete controlsDraft[module];
         scheduleMapControls();
       }
-      function renderMapControls(expanded = [...ctl("modules").querySelectorAll("details[open]")].map((item) => item.dataset.module)) {
+      function renderMapControls() {
         ctl("modules").replaceChildren();
         controlsBindings = [];
         const names = {poi:"Points of interest", land:"Land", water:"Water", nautical:"Nautical", roads:"Roads", buildings:"Buildings", boundaries:"Boundaries", labels:"Labels", aeroways:"Airports", transit:"Transit", vegetation:"Vegetation", addresses:"Addresses", landforms:"Landforms"};
@@ -1094,17 +1337,19 @@ var controlsClient = String.raw`
           toggle.setAttribute("role", "switch");
           toggle.setAttribute("aria-label", "Enable " + (names[module.id] || module.id));
           label.append(toggle); row.append(label); card.append(row);
-          const fieldset = document.createElement("fieldset"); fieldset.disabled = !toggle.checked;
+          const fieldset = document.createElement("fieldset");
+          const syncModuleEnabled = () => {
+            fieldset.disabled = !toggle.checked;
+            fieldset.hidden = !toggle.checked;
+          };
+          syncModuleEnabled();
           controlsBindings.push(() => {
             if (document.activeElement !== toggle) toggle.checked = controlsDraft[module.id]?.enabled ?? module.enabled;
-            fieldset.disabled = !toggle.checked;
+            syncModuleEnabled();
           });
-          toggle.addEventListener("change", () => { changeControl(module.id, "enabled", toggle.checked, module.enabled); fieldset.disabled = !toggle.checked; });
+          toggle.addEventListener("change", () => { changeControl(module.id, "enabled", toggle.checked, module.enabled); syncModuleEnabled(); });
           if (module.fields.length) {
-            const details = document.createElement("details");
-            details.dataset.module = module.id; details.open = expanded.includes(module.id);
-            const summary = document.createElement("summary"); summary.textContent = "Appearance & behavior";
-            details.append(summary, fieldset); card.append(details);
+            card.append(fieldset);
             for (const field of module.fields) {
               const line = document.createElement("label"); line.className = "control-field";
               const title = document.createElement("span"); title.textContent = field.label;
@@ -1149,7 +1394,7 @@ var controlsClient = String.raw`
           controlsNotice("Enter valid field values to update the preview.", true); return;
         }
         const draft = reset ? {} : structuredClone(controlsDraft);
-        const next = {map, theme, controls:draft, buildings3d:!reset && ctl("3d").checked, animation:reset ? 0 : ctl("animation").value === "fade" ? "fade" : Number(ctl("animation").value)};
+        const next = {map, theme, controls:draft, buildings3d:reset || ctl("3d").checked, animation:reset ? 0 : ctl("animation").value === "fade" ? "fade" : Number(ctl("animation").value)};
         const styleKey = JSON.stringify([map, theme, draft]);
         const isCurrent = () => revision === controlsRevision && controlsKey === key && side.id === activeSideId && side.bridgeConnected && epoch === side.loadEpoch && source === side.frame.src;
         const before = controlsHistoryCurrent && {...controlsHistoryCurrent, style:side.map.getStyle()};
@@ -1978,7 +2223,7 @@ function renderTileflowComparisonHtml(options) {
         if (message.type === bridgeInspectionType && Array.isArray(message.features)) {
           selectSide(side.id);
           selectedInspection = {side, coordinate: message.coordinate, features: message.features.slice(0, 16), featureIndex: 0};
-          renderInspection();
+          renderInspection(true);
           return;
         }
         if (message.type === bridgeRuntimeErrorType) {
@@ -2152,7 +2397,8 @@ function renderTileflowComparisonHtml(options) {
         return configured.href;
       }
 
-      function renderInspection() {
+      // Metadata refreshes update the inspection without navigating away from the active tab.
+      function renderInspection(reveal = false) {
         if (!selectedInspection) return;
         const side = selectedInspection.side;
         const feature = selectedInspection.features[selectedInspection.featureIndex];
@@ -2165,7 +2411,7 @@ function renderTileflowComparisonHtml(options) {
           curveOutput.className = "empty";
           curveOutput.textContent = "Paint and layout values appear here.";
           sidecarOutput.textContent = "No layer selected.";
-          globalThis.__tileflowDevtoolsUI?.selectionChanged();
+          if (reveal) globalThis.__tileflowDevtoolsUI?.selectionChanged();
           return;
         }
         inspectionOutput.className = "";
@@ -2187,7 +2433,7 @@ function renderTileflowComparisonHtml(options) {
         picker.value = String(selectedInspection.featureIndex);
         picker.addEventListener("change", () => {
           selectedInspection.featureIndex = boundedInteger(Number(picker.value), 0, selectedInspection.features.length - 1, 0);
-          renderInspection();
+          renderInspection(true);
         });
         pickerLabel.append(picker);
         const summary = document.createElement("pre");
@@ -2212,7 +2458,7 @@ function renderTileflowComparisonHtml(options) {
           ? boundedJson(sidecarLayerWithSemanticAttribution(sidecarLayer))
           : "No compiler sidecar entry for this layer.";
         if (side.sidecar === undefined && !side.sidecarPromise) void loadSidecar(side);
-        globalThis.__tileflowDevtoolsUI?.selectionChanged();
+        if (reveal) globalThis.__tileflowDevtoolsUI?.selectionChanged();
       }
 
       function populateCurveProperties(layer) {
@@ -2702,7 +2948,7 @@ function renderTileflowComparisonHtml(options) {
           for (const side of Object.values(states)) { side.highlightFeature?.(-1); side.hoverFeature?.(-1); }
         },
         loadSidecar: (side) => loadSidecar(side),
-        selectFeature: (index) => { if (selectedInspection && selectedInspection.features[index]) { selectedInspection.featureIndex = index; renderInspection(); } },
+        selectFeature: (index) => { if (selectedInspection && selectedInspection.features[index]) { selectedInspection.featureIndex = index; renderInspection(true); } },
         inspect: (enabled) => setInspectionEnabled(enabled), inspecting: () => inspectionEnabled,
         controls: () => loadMapControls(),
         sprites: () => loadSprites(states[activeSideId])