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

package/dist/server.js

@@ -5,7 +5,7 @@ import {
   parseTileflowLineBackgroundGlyphPath,
   tileflowArtifactSessionSchemaVersion,
   tileflowLineBackgroundGlyphRoute
-} from "./chunk-2QXKVQ6O.js";
+} from "./chunk-CM6ZTYDJ.js";
 import {
   getTileflowAssetBasePath,
   getTileflowAssetFileName,
@@ -13,7 +13,7 @@ import {
   normalizeTileflowBasePath,
   resolveTileflowArtifactPublicUrls
 } from "./chunk-UTRO4IBQ.js";
-import "./chunk-IR22ZTQW.js";
+import "./chunk-F4PLTZS4.js";
 import "./chunk-7C4F6GAX.js";
 import {
   TileflowStyleValidationError
@@ -34,12 +34,1247 @@ import {
   tileflowThemeNameSchema
 } from "@tileflow/core";
 
+// src/preview-controls.ts
+import { parseResolvedTileflowMap, tileflowStyleFontFacesMetadataKey } from "@tileflow/core";
+import { createStyleFromCatalogWithInspection } from "@tileflow/core/build";
+var moduleNames = [
+  "land",
+  "water",
+  "nautical",
+  "roads",
+  "boundaries",
+  "labels",
+  "poi",
+  "aeroways",
+  "transit",
+  "addresses",
+  "landforms",
+  "buildings",
+  "vegetation"
+];
+var fieldRules = {
+  "buildings.mode": ["flat", "3d"],
+  "buildings.threeDimensional.lighting": ["style", "sun"],
+  "buildings.threeDimensional.shadows": "boolean",
+  "buildings.threeDimensional.occlusion": "boolean",
+  "buildings.threeDimensional.windows": "boolean",
+  "buildings.threeDimensional.edges": [0, 1],
+  "buildings.threeDimensional.colorVariation": [0, 1],
+  "buildings.threeDimensional.nightLight": [0, 2],
+  "vegetation.mode": ["3d", "flat", "auto"],
+  "vegetation.fallback": ["flat", "none"],
+  "vegetation.visible": "boolean",
+  "vegetation.threeDimensional.finish": ["faceted", "smooth", "toon"],
+  "vegetation.threeDimensional.edges": [0, 1],
+  "vegetation.threeDimensional.heightScale": [0, 10],
+  "vegetation.threeDimensional.crownScale": [0, 10]
+};
+function record(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function parsePreviewControls(text) {
+  if (text.length > 8192) throw new Error("Map controls exceed 8 KiB.");
+  const input = JSON.parse(text);
+  if (!record(input)) throw new Error("Map controls must be an object.");
+  for (const [module, patch] of Object.entries(input)) {
+    if (!moduleNames.includes(module) || !record(patch))
+      throw new Error("Unknown map control module: " + module);
+    const validate = (path, value) => {
+      const rule = path === module + ".enabled" ? "boolean" : fieldRules[path];
+      const valid = rule === "boolean" ? typeof value === "boolean" : rule && (typeof rule[0] === "number" ? typeof value === "number" && Number.isFinite(value) && value >= rule[0] && value <= rule[1] : typeof value === "string" && rule.includes(value));
+      if (!valid) throw new Error("Invalid map control: " + path);
+    };
+    for (const [key, value] of Object.entries(patch)) {
+      if (key === "threeDimensional" && record(value) && ["buildings", "vegetation"].includes(module)) {
+        for (const [nested, entry] of Object.entries(value))
+          validate(module + "." + key + "." + nested, entry);
+      } else validate(module + "." + key, value);
+    }
+  }
+  return input;
+}
+function describePreviewControls(artifacts, map, theme) {
+  const definition = artifacts.project.maps[map];
+  const style = artifacts.styles[map]?.[theme];
+  if (!definition || !style) throw new Error("Unknown map theme.");
+  const modules = definition.modules ?? {};
+  const metadata = style.metadata ?? {};
+  return {
+    map,
+    theme,
+    modules: moduleNames.map((id) => {
+      const config = modules[id] ?? { type: id };
+      const fields = [];
+      const record2 = config;
+      const add = (path, label, value, choices, min, max, step, inherit = false) => fields.push({
+        path,
+        label,
+        value,
+        ...choices ? { choices } : {},
+        ...inherit ? { inherit: true } : {},
+        ...min !== void 0 ? { min, max, step } : {}
+      });
+      if (id === "buildings") {
+        const design = metadata["tileflow:buildings"];
+        const authored = record2.threeDimensional;
+        const value = (key, fallback) => {
+          const resolved = design?.[key] ?? authored?.[key];
+          return typeof resolved === typeof fallback ? resolved : fallback;
+        };
+        add("threeDimensional.lighting", "Building light", value("lighting", "style"), [
+          "style",
+          "sun"
+        ]);
+        for (const [key, label] of [
+          ["shadows", "Cast shadows"],
+          ["occlusion", "Contact shadows"],
+          ["windows", "Night windows"]
+        ])
+          add("threeDimensional." + key, label, value(key, false));
+        for (const [key, label] of [
+          ["edges", "Edge definition"],
+          ["colorVariation", "Color variation"],
+          ["nightLight", "Night glow"]
+        ])
+          add(
+            "threeDimensional." + key,
+            label,
+            value(key, 0),
+            void 0,
+            0,
+            key === "nightLight" ? 2 : 1,
+            0.05
+          );
+      }
+      if (id === "vegetation") {
+        add(
+          "mode",
+          "Tree representation",
+          String(record2.mode ?? "3d"),
+          ["3d", "auto", "flat"],
+          void 0,
+          void 0,
+          void 0,
+          true
+        );
+        add("fallback", "Without 3D support", String(record2.fallback ?? "flat"), ["flat", "none"]);
+        add("visible", "Visible by default", record2.visible !== false);
+        const authored = record2.threeDimensional;
+        const design = metadata["tileflow:vegetation"];
+        add("threeDimensional.finish", "Tree finish", String(authored?.finish ?? "faceted"), [
+          "faceted",
+          "smooth",
+          "toon"
+        ]);
+        for (const [key, label] of [
+          ["heightScale", "Tree height"],
+          ["crownScale", "Crown size"]
+        ]) {
+          const value = design?.[key] ?? authored?.[key];
+          add(
+            "threeDimensional." + key,
+            label,
+            typeof value === "number" ? value : 1,
+            void 0,
+            0,
+            10,
+            0.1
+          );
+        }
+      }
+      return { id, enabled: record2.enabled !== false, fields };
+    })
+  };
+}
+function compilePreviewControls(artifacts, map, theme, text, apiBaseUrl) {
+  if (artifacts.nativeBuild) throw new Error("Map controls require a web preview.");
+  const overrides = parsePreviewControls(text);
+  const definition = artifacts.project.maps[map];
+  const base = artifacts.styles[map]?.[theme];
+  if (!definition || !base) throw new Error("Unknown map theme.");
+  const modules = { ...definition.modules };
+  for (const [id, patch] of Object.entries(overrides)) {
+    const key = id;
+    const original = modules[key] ?? { type: id };
+    const merged = { ...original, ...patch };
+    if ("threeDimensional" in patch && patch.threeDimensional)
+      Object.assign(merged, {
+        threeDimensional: {
+          ..."threeDimensional" in original ? original.threeDimensional : {},
+          ...patch.threeDimensional
+        }
+      });
+    Object.assign(modules, { [id]: merged });
+  }
+  const resolved = parseResolvedTileflowMap({ ...definition, modules });
+  const result = createStyleFromCatalogWithInspection(
+    { ...artifacts.project, maps: { ...artifacts.project.maps, [map]: resolved } },
+    map,
+    {
+      theme,
+      apiBaseUrl,
+      preparedAssets: artifacts.mapAssets?.[map]
+    }
+  );
+  result.style.sources = Object.fromEntries(
+    Object.entries(result.style.sources).map(([id, source]) => [id, base.sources[id] ?? source])
+  );
+  if (base.glyphs) result.style.glyphs = base.glyphs;
+  if (base.sprite) result.style.sprite = base.sprite;
+  if (base.metadata?.[tileflowStyleFontFacesMetadataKey])
+    result.style.metadata = {
+      ...result.style.metadata,
+      [tileflowStyleFontFacesMetadataKey]: base.metadata[tileflowStyleFontFacesMetadataKey]
+    };
+  return result;
+}
+
 // src/comparison.ts
 import { randomBytes } from "crypto";
+import { readFile } from "fs/promises";
+
+// 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;
+}
+body.devtools-ready[data-inspector-theme=dark] {
+  --paper:#1D1816; --surface:#171311; --ink:#F5EDD9; --muted:#C3B7A9; --faint:#857869; --border:#40352F; --border-strong:#5A4B43;
+  --accent:#83ADD1; --dt-selected:#22303B; --hover:#2E2622; --accent-soft:#223039; --ok:#91B887; --ok-soft:#24301F; --warn:#E2B36F; --warn-soft:#3A2F20; --danger:#F1746B; color-scheme:dark;
+}
+@media(prefers-color-scheme:dark) { body.devtools-ready[data-inspector-theme=system] {
+  --paper:#1D1816; --surface:#171311; --ink:#F5EDD9; --muted:#C3B7A9; --faint:#857869; --border:#40352F; --border-strong:#5A4B43;
+  --accent:#83ADD1; --dt-selected:#22303B; --hover:#2E2622; --accent-soft:#223039; --ok:#91B887; --ok-soft:#24301F; --warn:#E2B36F; --warn-soft:#3A2F20; --danger:#F1746B; color-scheme:dark;
+}}
+.devtools-ready button,.devtools-ready input,.devtools-ready select { font:inherit; }
+.devtools-ready button { border:1px solid var(--border); border-radius:6px; min-height:28px; padding:4px 10px; cursor:pointer; }
+.devtools-ready button:disabled { cursor:default; opacity:.45; }
+.devtools-ready button:hover:not(:disabled) { background:var(--hover); }
+.devtools-ready input[type=range] { accent-color:var(--accent); }
+.devtools-ready code,.devtools-ready pre { font-family:var(--mono); }
+.devtools-ready .dt-head { height:40px; min-height:40px; flex-wrap:nowrap; gap:2px; padding:0 8px; background:var(--paper); }
+.devtools-ready .dt-head-main { display:flex; align-items:center; flex:1; min-width:0; }
+.devtools-ready .dt-tabs { flex:1; align-items:center; gap:2px; }
+.devtools-ready .dt-tabs button { border:0; border-radius:6px; min-height:28px; padding:5px 10px; color:var(--muted); background:transparent; }
+.devtools-ready .dt-tabs button[aria-selected=true] { color:var(--ink); background:var(--surface); }
+.devtools-ready .dt-head > .dt-icon { width:28px; height:28px; margin:0; }
+.devtools-ready .dt-icon[aria-pressed=true] { background:var(--accent-soft); color:var(--accent); }
+.devtools-ready .dt-camera { display:flex; align-items:center; flex:0 0 auto; flex-wrap:wrap; gap:6px; margin:0; padding:8px 12px; border:0; border-bottom:1px solid var(--border); background:var(--paper); overflow:visible; }
+.devtools-ready .dt-camera-field { display:flex; flex:0 0 auto; gap:0; height:30px; border:1px solid var(--border); border-radius:6px; background:var(--surface); overflow:hidden; }
+.devtools-ready .dt-camera-field > span:first-child { padding:0 4px 0 9px; color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
+.devtools-ready .dt-camera-field input[type=number] { width:58px; min-height:0; padding:0 5px; border:0; background:transparent; font:12px var(--mono); appearance:textfield; color:var(--ink); }
+.devtools-ready .dt-camera-field input::-webkit-inner-spin-button { appearance:none; }
+.devtools-ready .dt-camera-field input[type=range] { width:110px; padding:0; margin:0 10px 0 2px; min-height:0; }
+.devtools-ready .dt-unit { padding-right:9px; color:var(--faint); }
+.devtools-ready .dt-copy-agent { margin-left:auto; background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:500; }
+.devtools-ready .dt-copy-agent:hover { background:var(--ink); opacity:.88; }
+.devtools-ready .dt-menu { top:38px; right:8px; width:236px; padding:10px; border-radius:10px; box-shadow:0 8px 28px #0002; }
+.devtools-ready .dt-dock-options { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px; }
+.devtools-ready .dt-dock-options button { width:auto; height:34px; border:1px solid var(--border); justify-content:center; }
+.devtools-ready .dt-menu-label { font-size:11px; }
+.devtools-ready .dt-segments,.devtools-ready .dt-layer-modes,.devtools-ready .controls-segments { display:inline-flex; padding:2px; background:var(--surface); border:1px solid var(--border); border-radius:6px; gap:2px; }
+.devtools-ready .dt-segments button,.devtools-ready .dt-layer-modes button,.devtools-ready .controls-segments button { min-height:23px; border:0; border-radius:4px; padding:3px 9px; font-size:12px; background:transparent; color:var(--muted); }
+.devtools-ready .dt-segments button[aria-pressed=true],.devtools-ready .dt-layer-modes button[aria-pressed=true],.devtools-ready .controls-segments button[aria-checked=true] { color:var(--ink); background:var(--paper); box-shadow:0 1px 2px #0001; }
+.devtools-ready .dt-menu .dt-segments { display:flex; }.devtools-ready .dt-menu .dt-segments button { flex:1; }
+.devtools-ready .dt-tools { padding:10px 12px; gap:8px; background:var(--paper); }
+.devtools-ready .dt-tools input[type=search] { height:30px; padding:0 9px; background:var(--surface); border-radius:6px; width:auto; }
+.devtools-ready .dt-subtabs { padding:0 20px; gap:18px; }
+.devtools-ready .dt-subtabs button { background:transparent; border:0; border-radius:0; border-bottom:2px solid transparent; padding:8px 0 9px; color:var(--muted); min-height:36px; }
+.devtools-ready .dt-subtabs button[aria-selected=true] { color:var(--ink); border-bottom-color:var(--ink); }
+.devtools-ready input[role=switch] { appearance:none; width:26px!important; height:15px!important; min-height:0; flex:none; border:0; border-radius:8px; background:var(--faint); position:relative; padding:0; margin:0; cursor:pointer; }
+.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-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; }
+.devtools-ready .dt-layer-group-title strong { text-transform:uppercase; letter-spacing:.05em; }
+.devtools-ready .dt-layer-row { display:grid; grid-template-columns:20px 18px minmax(0,1fr) 64px; height:30px; padding:0 12px 0 6px; gap:8px; border-left:2px solid transparent; }
+.devtools-ready .dt-layer-row[aria-pressed=true] { background:var(--dt-selected); border-left-color:var(--accent); color:var(--ink); }
+.devtools-ready .dt-layer-glyph { color:var(--muted); font-size:15px; }.devtools-ready .dt-layer-label { font-size:12px; }
+.devtools-ready .dt-layer-prefix { color:var(--faint); }.devtools-ready .dt-layer-name { font-weight:500; }
+.devtools-ready .dt-eye { padding:0; border:0; width:20px; height:20px; min-height:20px; color:var(--faint); background:transparent; display:grid; place-items:center; opacity:0; }
+.devtools-ready .dt-eye svg { width:14px; height:14px; }
+.devtools-ready :is(.dt-layer-row,.dt-layer-group-title):hover .dt-eye,.devtools-ready .dt-eye:focus-visible,.devtools-ready .dt-eye[aria-pressed=true] { opacity:1; }
+.dt-zrange { position:relative; display:block; width:64px; height:14px; }.dt-zrange::before { content:''; position:absolute; inset:6px 0; height:2px; background:var(--border); }
+.dt-zrange i { position:absolute; top:5px; height:4px; border-radius:2px; background:var(--accent); opacity:.65; }.dt-zrange em { position:absolute; top:1px; height:12px; width:1px; background:var(--accent); }
+.devtools-ready .dt-layer-heading { padding:14px 20px 6px; align-items:flex-start; border:0; }
+.devtools-ready .dt-layer-title strong { font-size:16px; font-weight:600; }.devtools-ready .dt-layer-title > code { font-size:10px; color:var(--faint); }
+.dt-layer-status { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-top:6px; }.dt-layer-status[data-state=Enabled] { color:var(--ok); }.dt-layer-status[data-state="Outside zoom"] { color:var(--warn); }
+.devtools-ready .dt-layer-rules { font-size:12px; }.devtools-ready .dt-layer-rules th { padding:8px 20px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
+.devtools-ready .dt-layer-rules th:first-child { width:42%; }.devtools-ready .dt-layer-rules td { padding:8px 20px; vertical-align:middle; min-height:44px; }
+.devtools-ready .dt-layer-rules code { font:12px/1.5 var(--mono); }.devtools-ready .dt-layer-rule-name { color:var(--ink); }.devtools-ready .dt-layer-dependency { color:var(--accent); font:10px var(--mono); }
+.devtools-ready .dt-layer-rule-editor { gap:9px; flex-wrap:wrap; }.devtools-ready .dt-layer-rule-editor input:not([type=color]):not([type=checkbox]):not([type=range]),.devtools-ready .dt-layer-rule-editor select { min-height:26px; border:1px solid var(--border); font:12px var(--mono); border-radius:6px; }
+.devtools-ready .dt-layer-rule-editor input[type=color] { width:22px; height:22px; }
+.devtools-ready .dt-layer-rule-editor input[type=range] { width:110px; min-width:70px; padding:0; flex:0 1 110px; }
+.dt-rule-toggle { display:flex; align-items:center; gap:10px; }.dt-rule-toggle input { width:14px; height:14px; min-height:0; margin:0; accent-color:var(--accent); }
+.dt-rule-choices { display:inline-flex; flex-wrap:wrap; border:1px solid var(--border); border-radius:6px; overflow:hidden; }.devtools-ready .dt-rule-choices button { min-height:26px; border:0; border-radius:0; font:11px var(--mono); padding:3px 8px; }
+.dt-rule-spark { display:flex; align-items:center; gap:10px; color:var(--accent); font:11px var(--mono); margin-bottom:5px; }.dt-rule-spark svg { width:130px; height:26px; overflow:visible; }
+.dt-filter-chips { display:flex; flex-wrap:wrap; gap:6px; margin-block:10px; }.dt-filter-chip { padding:4px 9px; background:var(--surface); border:1px solid var(--border); border-radius:13px; font:11px var(--mono); }
+.devtools-ready .dt-layer-section,.devtools-ready .dt-layer-origin { padding:12px 20px; }.devtools-ready .dt-layer-section h4 { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
+.devtools-ready .dt-layer-evidence { padding:0; }.devtools-ready .dt-layer-evidence-row { padding:12px 20px; font-size:12px; grid-template-columns:20px 130px 1fr; }
+.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-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; }
+.dt-tile-chip-list { display:flex; gap:6px; flex-wrap:wrap; padding:10px 20px; border-bottom:1px solid var(--border); }.devtools-ready .dt-tile-chip { font:11px var(--mono); border-radius:13px; }
+.dt-asset-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; min-height:0; flex:1; }.dt-asset-main { min-width:0; overflow:auto; padding:12px; }.dt-asset-aside { overflow:auto; border-left:1px solid var(--border); }.dt-asset-aside h3 { font:500 15px var(--mono); margin:16px 20px; }.dt-asset-variants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--border); }.dt-asset-variant { padding:20px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; background:var(--surface); font:10px var(--mono); overflow-wrap:anywhere; }.dt-asset-variant[data-night=true] { background:#2e2622; color:#f5edd9; }
+.devtools-ready .dt-sprite-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:4px; }.devtools-ready .dt-sprite-card { border:1px solid transparent; border-radius:8px; background:transparent; padding:16px 6px 10px; cursor:pointer; }.dt-sprite-card[aria-pressed=true] { background:var(--dt-selected)!important; border-color:var(--accent)!important; }
+.dt-debug-overlay { display:grid; grid-template-columns:84px 1fr auto; align-items:center; gap:16px; padding:10px 20px; border-bottom:1px solid var(--border); cursor:pointer; }.dt-debug-overlay:hover { background:var(--hover); }.dt-debug-overlay small { display:block; color:var(--muted); font-size:12px; }.dt-debug-preview { width:84px; height:58px; border-radius:6px; overflow:hidden; }.dt-debug-preview svg { width:100%; height:100%; }
+.dt-section-heading { background:var(--surface); padding:8px 20px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--border); }
+.devtools-ready .dt-overdraw-help { margin:0; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:12px 20px 12px 120px; background:var(--surface); }.dt-debug-scale { display:flex; align-items:center; gap:12px; padding:16px 20px; flex-wrap:wrap; }.dt-debug-scale input[type=number] { width:64px; }
+.devtools-ready .map-controls { padding:0!important; background:var(--paper); }.devtools-ready .controls-heading { display:none; }.devtools-ready .controls-grid { display:block; }.devtools-ready .controls-selection,.devtools-ready .controls-runtime { border:0; padding:0; }
+.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); }
+ .devtools-ready .control-field { grid-template-columns:160px 1fr; }.devtools-ready .control-module .control-field { padding-left:30px; }
+}
+@media(prefers-reduced-motion:reduce) { .devtools-ready * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
+
+.dt-palettes{display:flex;gap:8px;flex-wrap:wrap}.devtools-ready .dt-palettes button{display:flex;flex-direction:column;gap:7px;padding:10px 14px;min-width:110px;background:var(--paper);text-align:left;text-transform:capitalize}.devtools-ready .dt-palettes button[aria-checked=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.dt-palette-swatches{display:flex;height:26px;width:100%;overflow:hidden;border-radius:4px}.dt-palette-swatches i{flex:1;min-width:20px}.devtools-ready .dt-palette-field{align-items:flex-start;flex-direction:column}.dt-model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.devtools-ready .dt-model-card{display:flex;flex-direction:column;align-items:center;padding:0;overflow:hidden;border-radius:10px}.dt-model-card canvas{background:linear-gradient(var(--surface),var(--paper));max-width:100%;height:auto!important}.dt-model-card strong{font:500 12px var(--mono);padding:9px 12px 2px;overflow-wrap:anywhere}.dt-model-card small{font-size:11px;color:var(--muted);padding:0 12px 9px}.dt-model-card[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.dt-asset-aside>canvas{display:block;margin:auto;max-width:100%;touch-action:none;cursor:grab}.dt-font-ranges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.dt-font-ranges small{color:var(--muted);font-size:11px}
+
+.dt-debug-specimen{display:flex;align-items:center;gap:18px;min-height:70px;padding:12px 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.dt-rule-font-preview{overflow:hidden;max-width:100%}.dt-rule-font-preview canvas{max-width:100%;height:auto!important}
+/* Keep the new shell independent of the legacy in-header camera and toolbar breakpoints. */
+.devtools-ready .dt-shell>.dt-camera{order:0;flex:0 0 auto;margin:0;border-top:0;background:var(--paper);padding:8px 12px}
+.devtools-ready .dt-shell>.dt-head{flex-wrap:nowrap}.devtools-ready .dt-shell .dt-head-main{display:flex;gap:2px}
+.devtools-ready .dt-shell .dt-layer-tools input[type=search]{order:0;flex:0 0 auto;width:100%;height:30px}
+.devtools-ready .dt-shell .dt-layer-tools{flex-wrap:nowrap}.devtools-ready .dt-shell .dt-layer-tools-row{flex:none;min-height:28px}
+.devtools-ready .dt-shell .dt-layer-row{display:grid;grid-template-columns:20px 18px minmax(0,1fr) 64px;height:30px;min-height:30px;padding:0 12px 0 6px;gap:8px}
+.devtools-ready .dt-shell .dt-layer-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.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}}
+`;
+
+// src/devtools/styles.ts
+var legacyStyles = `
+  body.devtools-ready { color-scheme:light dark; --paper:light-dark(#fff,#202124); --surface:light-dark(#f1f3f4,#292a2d); --ink:light-dark(#202124,#e8eaed); --muted:light-dark(#62676e,#9aa0a6); --border:light-dark(#dadce0,#3c4043); --accent:light-dark(#1a73e8,#8ab4f8); --dt-selected:light-dark(#e8f0fe,#394457); --dt-string:light-dark(#a31515,#e6b98b); --dt-number:light-dark(#1a1aa6,#a8c7fa); font:12px/1.45 Arial,system-ui,sans-serif; background:var(--paper); }
+  .devtools-ready button,.devtools-ready input,.devtools-ready select,.devtools-ready summary { min-height:24px; border-radius:2px; font:inherit; }
+  .devtools-ready button { padding:3px 8px; background:var(--paper); color:var(--ink); }
+  .devtools-ready button:hover { background:var(--surface); border-color:var(--border); }
+  .devtools-ready button:focus-visible,.devtools-ready input:focus-visible,.devtools-ready select:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
+  .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=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); }
+  .devtools-ready .workspace[data-collapsed=true] > .dt-shell { display:none; }
+  .devtools-ready .workspace > .inspector { display:none !important; }
+  .devtools-ready .inspect-hint { top:8px; font-size:11px; padding:4px 7px; background:var(--paper); color:var(--ink); border:1px solid var(--accent); }
+  #dt-reopen { display:none; position:absolute; top:8px; left:8px; z-index:10; box-shadow:0 1px 4px #0002; }
+  .workspace[data-collapsed=true] > #dt-reopen { display:block; }
+  .devtools-ready .workspace[data-collapsed=true] > .stage { grid-column:1; grid-row:1; }
+  .dt-shell { container-type:inline-size; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:visible; position:relative; background:var(--paper); border-top:1px solid var(--border); color:var(--ink); }
+  .dt-head { min-height:40px; display:flex; align-items:center; border-bottom:1px solid var(--border); background:var(--surface); padding:0 3px; position:relative; flex:none; }
+  .dt-head-main { display:flex; align-items:center; gap:12px; flex:1; min-width:0; align-self:stretch; }
+  .dt-tabs { display:flex; min-width:0; overflow-x:auto; scrollbar-width:none; flex:0 1 auto; align-self:stretch; }
+  .dt-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; border-radius:0; white-space:nowrap; padding:8px 10px; min-height:38px; }
+  .dt-tabs button[aria-selected=true] { color:var(--accent); border-bottom-color:var(--accent); background:var(--paper); }
+  .dt-head .dt-icon,.dt-tools .dt-icon { display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; padding:3px; width:26px; height:26px; flex:none; }
+  .dt-head .dt-icon:disabled { opacity:.35; cursor:default; }
+  .dt-icon svg { width:16px; height:16px; pointer-events:none; }
+  .dt-divider { height:16px; border-left:1px solid var(--border); margin:0 4px; }
+  .dt-camera { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; min-width:0; flex:none; border:0; border-left:1px solid var(--border); margin:5px 0; padding:0 0 0 12px; overflow-x:auto; scrollbar-width:thin; }
+  .dt-camera-field { display:flex; align-items:center; gap:4px; min-width:0; flex:none; }
+  .dt-camera-field > label { color:var(--muted); font-size:11px; line-height:1; }
+  .dt-stepper { display:flex; align-items:stretch; height:26px; border:1px solid var(--border); border-radius:4px; overflow:hidden; background:var(--paper); }
+  .dt-stepper input[type=number] { appearance:textfield; -moz-appearance:textfield; width:54px; min-width:0; min-height:0; padding:2px 0; border:0; border-radius:0; background:transparent; color:var(--ink); text-align:center; font-variant-numeric:tabular-nums; }
+  .dt-stepper input::-webkit-inner-spin-button,.dt-stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
+  .dt-stepper button { width:24px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; font-size:15px; line-height:1; }
+  .dt-stepper button:disabled { color:var(--muted); opacity:.4; cursor:default; }
+  .dt-camera:disabled { opacity:.5; }
+  .dt-camera-reset { flex:none; height:26px; }
+  .dt-menu { position:absolute; z-index:40; right:5px; top:40px; padding:8px; background:var(--paper); color:var(--ink); border:1px solid var(--border); box-shadow:0 4px 16px #0003; min-width:190px; border-radius:4px; }
+  :is([data-dock=left],[data-dock=right]) .dt-head { flex-wrap:wrap; }
+  :is([data-dock=left],[data-dock=right]) .dt-head > .dt-icon { margin-block:6px; }
+  :is([data-dock=left],[data-dock=right]) .dt-head-main { display:contents; }
+  :is([data-dock=left],[data-dock=right]) .dt-tabs { flex:1; }
+  :is([data-dock=left],[data-dock=right]) .dt-camera-field { flex:1 0 96px; }
+  :is([data-dock=left],[data-dock=right]) .dt-stepper { flex:1; min-width:0; }
+  :is([data-dock=left],[data-dock=right]) .dt-stepper input[type=number] { flex:1; width:0; }
+  :is([data-dock=left],[data-dock=right]) .dt-stepper button { flex:none; width:22px; }
+  :is([data-dock=left],[data-dock=right]) .dt-menu { top:38px; }
+  @container(max-width:1050px) {
+    .dt-head { flex-wrap:wrap; }
+    .dt-head > .dt-icon { margin-block:6px; }
+    .dt-head-main { display:contents; }
+    .dt-tabs { flex:1; }
+    .dt-camera-field { flex:1 0 96px; }
+    .dt-stepper { flex:1; min-width:0; }
+    .dt-stepper input[type=number] { flex:1; width:0; }
+    .dt-stepper button { flex:none; width:22px; }
+    .dt-menu { top:38px; }
+  }
+  .dt-menu-label { color:var(--muted); margin:2px 0 6px; }
+  .dt-dock-options { display:flex; gap:4px; }
+  .dt-dock-options button { padding:6px; display:flex; }
+  .dt-dock-options svg { width:24px; height:20px; }
+  .dt-resize { position:absolute; z-index:5; height:6px; left:0; right:0; top:-4px; cursor:ns-resize; touch-action:none; }
+  [data-dock=right] > .dt-shell > .dt-resize { top:0; bottom:0; left:-4px; width:6px; height:auto; right:auto; cursor:ew-resize; }
+  [data-dock=left] > .dt-shell > .dt-resize { top:0; bottom:0; right:-4px; width:6px; height:auto; left:auto; cursor:ew-resize; }
+  .dt-resize-shield { position:absolute; inset:0; z-index:30; background:transparent; }
+  .dt-body { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
+  .dt-panel { flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
+  .dt-tools { min-height:29px; display:flex; flex-wrap:wrap; align-items:center; gap:5px; border-bottom:1px solid var(--border); padding:3px 6px; flex:none; }
+  .dt-tools input[type=search] { width:160px; flex:1; min-width:75px; border:1px solid var(--border); background:var(--paper); color:var(--ink); padding:2px 6px; }
+  .dt-tools label { display:flex; align-items:center; gap:4px; white-space:nowrap; color:var(--muted); }
+  .dt-tools select { max-width:160px; padding:2px; }
+  .dt-tools input[type=checkbox] { min-height:0; margin:0; accent-color:var(--accent); }
+  .dt-tools button { border-color:transparent; background:transparent; }
+  .dt-footer { min-height:23px; padding:3px 8px; border-top:1px solid var(--border); color:var(--muted); font-size:11px; flex:none; display:flex; gap:12px; }
+  .dt-scroll { flex:1; overflow:auto; min-height:0; min-width:0; }
+  .dt-empty { color:var(--muted); padding:22px; text-align:center; margin:auto; max-width:420px; }
+  .dt-empty strong { color:var(--ink); display:block; margin-bottom:6px; font-weight:400; }
+  .dt-inspect-grid { display:grid; grid-template-columns:minmax(220px,1fr) minmax(300px,42%); flex:1; min-height:0; }
+  .dt-tree-column { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); }
+  .dt-tree { flex:1; min-height:0; overflow:auto; font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; padding:5px 0; }
+  .dt-tree-row { display:flex; width:100%; gap:6px; align-items:center; min-height:23px; padding:2px 8px; white-space:nowrap; border:0 !important; border-radius:0 !important; text-align:left; background:transparent !important; font:inherit !important; }
+  .dt-tree-row[aria-selected=true] { background:var(--dt-selected) !important; }
+  .dt-tree-row:hover { background:var(--surface) !important; }
+  .dt-tree-row .dt-token { color:var(--dt-number); }
+  .dt-tree-row .dt-attr { color:var(--dt-string); }
+  .dt-tree-row .dt-dim { color:var(--muted); }
+  .dt-tree-row .dt-truncate { overflow:hidden; text-overflow:ellipsis; }
+  .dt-details { min-width:0; min-height:0; display:flex; flex-direction:column; }
+  .dt-subtabs { display:flex; gap:2px; border-bottom:1px solid var(--border); flex:none; overflow-x:auto; }
+  .dt-subtabs button { border:0; border-bottom:2px solid transparent; border-radius:0; padding:4px 8px; white-space:nowrap; }
+  .dt-subtabs button[aria-selected=true] { border-bottom-color:var(--accent); color:var(--accent); }
+  .dt-rule { border-bottom:1px solid var(--border); padding:7px 9px; font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
+  .dt-rule-title { display:flex; justify-content:space-between; gap:8px; color:var(--ink); overflow-wrap:anywhere; margin-bottom:4px; }
+  .dt-rule-origin { color:var(--muted); font:11px/1.6 Arial,sans-serif; text-align:right; }
+  .dt-property { display:flex; align-items:center; gap:4px; padding:1px 0 1px 14px; min-height:24px; }
+  .dt-property-name { color:light-dark(#881391,#c58af9); flex:none; }
+  .dt-property input[type=text],.dt-property input[type=number],.dt-property select { border:1px solid transparent; background:transparent; min-width:30px; flex:1; width:100%; padding:0 2px; color:var(--dt-string); border-radius:0; font:inherit; min-height:22px; }
+  .dt-property input:focus,.dt-property input:hover { border-color:var(--border); }
+  .dt-property input[type=color] { width:14px; height:14px; padding:0; min-height:0; border:0; flex:none; background:transparent; cursor:pointer; }
+  .dt-property input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
+  .dt-property input[type=color]::-webkit-color-swatch { border:1px solid var(--border); }
+  .dt-property .dt-revert { border:0; padding:0 3px; min-height:18px; color:var(--muted); background:transparent; }
+  .dt-property[data-modified=true] { background:color-mix(in srgb,var(--accent) 8%,transparent); }
+  .dt-expression { display:block; padding-left:14px; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; }
+  .dt-table { border-collapse:collapse; width:100%; font-size:11px; text-align:left; }
+  .dt-table th { position:sticky; top:0; z-index:1; background:var(--surface); font-weight:400; border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:3px 7px; white-space:nowrap; }
+  .dt-table th button { font:inherit; border:0; padding:0; min-height:18px; background:transparent; }
+  .dt-table td { padding:3px 7px; border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent); max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; height:24px; }
+  .dt-table tbody tr:nth-child(even) { background:color-mix(in srgb,var(--surface) 55%,transparent); }
+  .dt-table tbody tr[aria-selected=true] { background:var(--dt-selected); }
+  .dt-table tbody tr:hover { background:var(--surface); }
+  .dt-table .dt-cell-button { text-align:left; border:0; background:transparent; min-height:18px; padding:0; color:inherit; max-width:100%; overflow:hidden; text-overflow:ellipsis; font:inherit; }
+  .dt-table .dt-number { font-variant-numeric:tabular-nums; text-align:right; }
+  .dt-table .dt-error { color:light-dark(#b3261e,#f2b8b5); }
+  .dt-network-body { display:flex; flex:1; min-height:0; min-width:0; }
+  .dt-network-body > .dt-scroll { flex:1; min-width:0; }
+  .dt-network-body[data-selected=true] > .dt-scroll { flex:1 1 55%; }
+  .dt-network-detail { display:flex; flex-direction:column; flex:1 1 45%; min-width:290px; min-height:0; border-left:1px solid var(--border); background:var(--paper); }
+  .dt-network-detail[hidden] { display:none; }
+  .dt-tile-row { cursor:pointer; }
+  .dt-tile-heading { flex:none; justify-content:space-between; }
+  .dt-tile-heading strong { font-size:12px; font-weight:500; }
+  .dt-tile-heading button { border:0; font-size:18px; }
+  .dt-tile-content { min-height:0; }
+  .dt-tile-content select { width:100%; min-width:0; background:var(--paper); color:var(--ink); border:1px solid var(--border); padding:4px; }
+  .dt-tile-paging { justify-content:space-between; }
+  .dt-tile-feature { border-bottom:1px solid var(--border); padding:5px 8px; }
+  .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; }
+  .dt-status-message { color:var(--accent); padding:4px 8px; border-top:1px solid var(--border); font-size:11px; }
+  .dt-shell .notice { position:static; padding:5px 9px; border:0; font:11px/1.5 ui-monospace,monospace; box-shadow:none; color:light-dark(#b3261e,#f2b8b5); }
+  .dt-scene-content { display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; width:100%; max-width:1000px; align-self:flex-start; }
+  .dt-shell .map-controls { flex:1; width:100%; max-width:none; padding:0 16px 16px; border:0; overflow:auto; background:var(--paper); }
+  .dt-shell .controls-grid,.dt-shell #controls-modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; align-items:start; }
+  .dt-shell .controls-grid { border-bottom:1px solid var(--border); padding-bottom:8px; }
+  .dt-shell .controls-selection,.dt-shell .controls-runtime { border:0; padding-bottom:0; }
+  .dt-shell .map-controls .control-field,.dt-shell .control-module-header label { display:grid; grid-template-columns:min(36%,160px) minmax(0,1fr); align-items:center; gap:12px; min-height:28px; }
+  .dt-shell .map-controls .control-field > select,.dt-shell .map-controls .control-field > input[type=number] { justify-self:start; width:min(200px,100%); max-width:100%; }
+  .dt-shell .map-controls input[type=checkbox] { appearance:none; -webkit-appearance:none; position:relative; justify-self:start; flex:none; width:34px; height:20px; min-height:20px; margin:0; padding:0; border:1px solid light-dark(#9aa0a6,#7c838d); border-radius:999px; background:light-dark(#e3e7ed,#444950); cursor:pointer; transition:background-color 120ms ease,border-color 120ms ease; }
+  .dt-shell .map-controls input[type=checkbox]::before { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:light-dark(#fff,#c4c8cf); box-shadow:0 1px 2px #0003; transition:transform 120ms ease,background-color 120ms ease; }
+  .dt-shell .map-controls input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); }
+  .dt-shell .map-controls input[type=checkbox]:checked::before { transform:translateX(14px); background:light-dark(#fff,#202124); }
+  .dt-shell .map-controls input[type=checkbox]:hover:not(:disabled) { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
+  .dt-shell .map-controls input[type=checkbox]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
+  .dt-shell .map-controls input[type=checkbox]:disabled { cursor:not-allowed; }
+  .dt-shell .map-controls .control-field:has(input[type=checkbox]:not(:disabled)) { cursor:pointer; }
+  .dt-shell .controls-heading button { min-width:60px; }
+  .dt-shell .controls-segments button { padding:4px 10px; border-radius:0; }
+  @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 .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; } }
+  .dt-shell .controls-code { background:var(--surface); }.dt-shell .controls-selection .control-field select { max-width:100%; }
+  .dt-shell .panel-heading h2 { font:12px Arial,sans-serif; }.dt-shell .review-tabs { margin:0; padding:0; }
+  .dt-assets-content { scrollbar-gutter:stable; }
+  .dt-font-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr)); max-width:1100px; }
+  .dt-font-card { min-width:0; margin:0; padding:14px 12px; border-bottom:1px solid var(--border); }
+  .dt-font-card figcaption { margin-bottom:8px; font:12px/1.5 ui-monospace,monospace; }
+  .dt-font-sample { min-height:94px; overflow-x:auto; border:1px solid var(--border); border-radius:3px; background:#fff; color:#303b4b; }
+  .dt-font-preview { display:block; }
+  .dt-font-loading { display:block; padding:15px 10px; font-size:11px; color:#62676e; }
+  .dt-sprite-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:1px; padding:1px; background:var(--border); }
+  .dt-sprite-card { margin:0; min-width:0; padding:10px 8px 8px; background:var(--paper); text-align:center; }
+  .dt-sprite-card:hover { background:var(--dt-selected); }
+  .dt-sprite-preview { height:60px; display:flex; align-items:center; justify-content:center; border:1px solid #dadce0; border-radius:3px; background:repeating-conic-gradient(#e8eaed 0% 25%,#fff 0% 50%) 0 0 / 12px 12px; color:#62676e; }
+  .dt-sprite-card figcaption { margin-top:7px; font:11px/1.4 ui-monospace,monospace; overflow-wrap:anywhere; }
+  .dt-sprite-size { display:block; min-height:15px; margin-top:3px; color:var(--muted); font-size:10px; }
+  .dt-geometry-json { width:100%; min-height:100px; resize:vertical; background:var(--paper); color:var(--ink); border:1px solid var(--border); font:11px/1.5 ui-monospace,monospace; padding:6px; }
+  .dt-vertex { position:absolute; width:10px; height:10px; border:2px solid #1a73e8; background:#fff; transform:translate(-50%,-50%); pointer-events:auto; padding:0; min-height:0; border-radius:1px; cursor:move; touch-action:none; }
+  .dt-geometry-handles { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
+  .dt-performance { padding:10px; }.dt-performance svg { width:100%; height:90px; display:block; }.dt-performance dl { max-width:600px; }
+  .dt-overdraw-help { max-width:640px; margin:10px 10px 0; padding:10px 12px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:4px; background:var(--surface); }
+  .dt-overdraw-help[hidden] { display:none; }
+  .dt-overdraw-help strong { font-size:12px; }.dt-overdraw-help p { margin:5px 0 0; line-height:1.5; }
+  .dt-overdraw-legend { display:flex; flex-wrap:wrap; gap:6px 20px; margin:10px 0 8px; }
+  .dt-overdraw-key { display:inline-flex; align-items:center; gap:6px; font:11px/1.4 ui-monospace,monospace; }
+  .dt-overdraw-swatch { width:24px; height:10px; border:1px solid #0002; border-radius:2px; }
+  .dt-overdraw-caption { color:var(--muted); font-size:11px; }
+  .dt-badge { background:var(--dt-selected); color:var(--accent); border-radius:7px; padding:0 5px; margin-left:3px; font:10px/1.5 Arial,sans-serif; }
+  [data-dock=left] .dt-inspect-grid,[data-dock=right] .dt-inspect-grid { display:flex; flex-direction:column; }
+  [data-dock=left] .dt-tree-column,[data-dock=right] .dt-tree-column { flex:0 0 32%; border-right:0; border-bottom:1px solid var(--border); }
+  [data-dock=left] .dt-details,[data-dock=right] .dt-details { flex:1; }
+  .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;
+
+// src/workbench-client.ts
+var workbenchClient = String.raw`
+      let wbCatalog;
+      let wbLastContext = "";
+      let wbInterval;
+      let wbRefreshing = false;
+      let wbError = "";
+      let wbLastPublished = 0;
+      let wbPickerKey = "";
+      let wbTimeOfDay = "";
+      const wbPaletteColors = new Map();
+      const wbClient = "view-" + Math.random().toString(36).slice(2);
+      const wb = (id) => document.getElementById("wb-" + id);
+      if (options.workbenchUrl) initializeWorkbench();
+
+      function initializeWorkbench() {
+        wb("theme").addEventListener("change", () => selectWorkbenchAppearance());
+        for (const [moment, label] of Object.entries({day:"Day", dawn:"Dawn", dusk:"Dusk", night:"Night"})) {
+          const segment = document.createElement("button");
+          segment.type = "button"; segment.value = moment; segment.textContent = label;
+          segment.setAttribute("role", "radio"); segment.setAttribute("aria-checked", "false");
+          segment.tabIndex = -1; segment.disabled = true;
+          segment.addEventListener("click", () => selectWorkbenchAppearance(moment));
+          segment.addEventListener("keydown", (event) => {
+            const direction = {ArrowRight:1, ArrowDown:1, ArrowLeft:-1, ArrowUp:-1}[event.key];
+            if (!direction && event.key !== "Home" && event.key !== "End") return;
+            event.preventDefault();
+            const enabled = [...wb("time-of-day").querySelectorAll("button")].filter((item) => !item.disabled);
+            if (!enabled.length) return;
+            const index = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : (enabled.indexOf(segment) + direction + enabled.length) % enabled.length;
+            const next = enabled[index];
+            selectWorkbenchAppearance(next.value); next.focus();
+          });
+          wb("time-of-day").append(segment);
+        }
+        void refreshWorkbench();
+        wbInterval = setInterval(refreshWorkbench, 2500);
+        addEventListener("beforeunload", () => clearInterval(wbInterval));
+        addEventListener("keydown", (event) => {
+          if (event.target.closest?.("input,select,textarea,[contenteditable]")) return;
+          if (event.key === "i" && !event.metaKey && !event.ctrlKey) setInspectionEnabled(!inspectionEnabled, true);
+        });
+      }
+
+      async function workbenchRequest(path, body) {
+        const response = await fetch(options.workbenchUrl + path, body === undefined
+          ? {cache:"no-store"}
+          : {method:"POST", headers:{"Content-Type":"application/json", "X-Tileflow-Workbench":"1"}, body:JSON.stringify(body)});
+        const result = await response.json();
+        if (!response.ok) throw new Error(result.message || "Map DevTools request failed.");
+        return result;
+      }
+
+      async function refreshWorkbench() {
+        if (wbRefreshing) return;
+        wbRefreshing = true;
+        try {
+          wbCatalog = await workbenchRequest("");
+          const side = states[activeSideId];
+          const owner = wbCatalog.sides[side.serviceId || side.id];
+          resolveWorkbenchAppearance(side, owner);
+          if (side.bridgeConnected && side.workbenchMap && side.workbenchTheme && !side.workbenchRestored) {
+            side.workbenchRestored = true;
+            if (side.id === "left") {
+              const query = new URL(location.href).searchParams;
+              const requested = owner?.selections.find((entry) => !entry.scene && entry.map === side.workbenchMap && entry.id === query.get("view"));
+              if (requested) {
+                side.requestedTimeOfDay = query.get("time-of-day");
+                applyWorkbenchAppearance(side, requested);
+              }
+            }
+          }
+          syncWorkbenchPickers();
+          const failure = side.runtimeFailed ? side.runtimeErrors.at(-1) : owner?.status === "invalid" ? owner.diagnostics.map((item) => item.message).join(" ") : wbError;
+          wb("notice").hidden = !failure;
+          wb("notice").textContent = failure ? (owner?.status === "invalid" ? "Showing the last available preview. " : "") + failure : "";
+          await publishWorkbenchContext();
+        } catch (error) { showWorkbenchError(error); }
+        finally { wbRefreshing = false; }
+      }
+
+      function resolveWorkbenchAppearance(side, owner) {
+        const source = new URL(side.definition.previewUrl, location.href);
+        const startup = owner?.selections.find((entry) => entry.scene && entry.scene === source.searchParams.get("scene"));
+        const metadata = side.bridgeConnected ? side.map?.getStyle?.()?.metadata : undefined;
+        // The command chooses the map. Never infer it from catalog order or a saved URL's view.
+        side.workbenchMap ||= source.searchParams.get("map") || startup?.map || metadata?.["tileflow:map"];
+        if (!side.pendingAppearance && metadata?.["tileflow:map"] === side.workbenchMap) side.workbenchTheme = metadata?.["tileflow:theme"] || side.workbenchTheme;
+        side.workbenchTheme ||= source.searchParams.get("theme") || startup?.theme;
+      }
+
+      function applyWorkbenchAppearance(side, selected) {
+        if (selected.map !== side.workbenchMap || selected.scene) return;
+        const changed = selected.theme !== side.workbenchTheme;
+        side.workbenchTheme = selected.theme;
+        if (changed || side.pendingAppearance) {
+          side.pendingAppearance = selected;
+          side.definition.label = selected.label;
+          scheduleMapControls();
+          void loadMapControls();
+        }
+        syncWorkbenchPickers();
+        writeUrlState();
+        if (side.id === "left") {
+          const url = new URL(location.href);
+          url.searchParams.set("view", selected.id);
+          const moment = wbTimeOfDay;
+          if (moment) url.searchParams.set("time-of-day", moment); else url.searchParams.delete("time-of-day");
+          history.replaceState(null, "", url);
+        }
+      }
+
+      function syncWorkbenchPickers() {
+        const side = states[activeSideId];
+        const owner = wbCatalog?.sides[side.serviceId || side.id];
+        const selections = owner?.selections.filter((entry) => entry.map === side.workbenchMap) || [];
+        const selectedTheme = side.workbenchTheme;
+        if (!side.camera || !selections.length || !selectedTheme) {
+          wbPickerKey = "";
+          wb("theme").replaceChildren(new Option("Waiting for map…", ""));
+          wb("theme").disabled = true;
+          wb("time-of-day-field").hidden = true;
+          wbTimeOfDay = "";
+          return;
+        }
+        const variants = owner?.timeOfDay?.[side.workbenchMap] || {};
+        const key = JSON.stringify([activeSideId, selectedTheme, selections, variants, side.requestedTimeOfDay]);
+        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));
+        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")) {
+          const selected = segment.value === wbTimeOfDay;
+          segment.setAttribute("aria-checked", String(selected));
+          segment.tabIndex = selected ? 0 : -1;
+          segment.disabled = !moments[segment.value];
+        }
+        wb("time-of-day-field").hidden = !family;
+        wb("theme").replaceChildren(...themes.map((theme) => new Option(theme, 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);
+          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=>{
+              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);
+            }).catch(()=>{swatches.textContent="—";});
+          }
+          return button;
+        }));
+      }
+
+      function selectWorkbenchAppearance(requested = wbTimeOfDay) {
+        const side = states[activeSideId];
+        const owner = wbCatalog?.sides[side.serviceId || side.id];
+        const moments = owner?.timeOfDay?.[side.workbenchMap]?.[wb("theme").value];
+        const moment = moments?.[requested] ? requested : moments ? Object.keys(moments)[0] : undefined;
+        const theme = moments?.[moment] || wb("theme").value;
+        const selected = owner?.selections.find((entry) => !entry.scene && entry.map === side.workbenchMap && entry.theme === theme);
+        if (!selected) { wbPickerKey = ""; syncWorkbenchPickers(); return; }
+        side.requestedTimeOfDay = moment;
+        applyWorkbenchAppearance(side, selected);
+      }
+
+      function currentWorkbenchDefinition() {
+        const side = states[activeSideId];
+        const camera = side.camera || canonicalCamera;
+        const metadata = side.map?.getStyle?.().metadata;
+        if (!camera || !validPortableName(metadata?.["tileflow:map"]) || !validConcreteThemeName(metadata?.["tileflow:theme"]))
+          throw new Error("Wait for the current map to finish loading.");
+        const container = side.map?.getContainer?.();
+        const width = boundedInteger(container?.clientWidth, 64, 4096, 1280);
+        const height = boundedInteger(container?.clientHeight, 64, 4096, 800);
+        return {map:metadata["tileflow:map"], theme:metadata["tileflow:theme"],
+          camera:{type:"center", center:[roundNumber(camera.center[0]),roundNumber(camera.center[1])], zoom:roundNumber(camera.zoom), bearing:roundNumber(camera.bearing), pitch:roundNumber(camera.pitch)},
+          viewport:{width,height,dpr:1}, target:{kind:"map"}};
+      }
+
+      function workbenchContext() {
+        const side = states[activeSideId];
+        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 provenance = feature && findSidecarLayer(side.sidecar, feature.layerId);
+        let definition;
+        try { definition = currentWorkbenchDefinition(); } catch { /* Loading previews have no camera yet. */ }
+        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) +
+          " --center=" + definition.camera.center.join(",") + " --zoom=" + definition.camera.zoom + " --bearing=" + definition.camera.bearing + " --pitch=" + definition.camera.pitch +
+          " --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,
+          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,
+            session:"tileflow inspect session --url " + quoteCliArgument(location.origin) + " --json"},
+          selection:layerObservation || (feature ? {coordinate:selected.coordinate,
+            provenance:provenance ? sidecarLayerWithSemanticAttribution(provenance).semanticAttribution : [],
+            provenanceScope:"Semantic ownership only; exact file, line and token are not inferred.",
+            feature, layer:layer ? {id:layer.id,type:layer.type,source:layer.source,sourceLayer:layer["source-layer"],minzoom:layer.minzoom,maxzoom:layer.maxzoom,filter:layer.filter,paint:layer.paint,layout:layer.layout} : undefined} : null)};
+      }
+
+      function boundedWorkbenchContext() {
+        const observed = workbenchContext();
+        const nodeLimit = observed.selection?.kind === "layer" ? 2400 : 200;
+        let entries = 0;
+        const omitted = [];
+        function visit(value, path, depth) {
+          if (++entries > nodeLimit || depth > 16) { omitted.push(path); return undefined; }
+          if (typeof value === "string") { if (value.length > 512) omitted.push(path); return value.slice(0,512); }
+          if (!value || typeof value !== "object") return value;
+          if (Array.isArray(value)) {
+            if (value.length > 32) omitted.push(path);
+            return value.slice(0,32).map((entry,index) => visit(entry,path + "/" + index,depth + 1));
+          }
+          return Object.fromEntries(Object.entries(value).flatMap(([key,entry]) => {
+            const result = visit(entry,path + "/" + key.replaceAll("~","~0").replaceAll("/","~1"),depth + 1);
+            return result === undefined ? [] : [[key,result]];
+          }));
+        }
+        const context = visit(observed,"",0);
+        context.projection = {truncated:omitted.length > 0, omitted:omitted.slice(0,32)};
+        return context;
+      }
+
+      async function publishWorkbenchContext() {
+        const side = states[activeSideId];
+        if (!side.bridgeReady) return;
+        const context = boundedWorkbenchContext();
+        const key = JSON.stringify(context);
+        if (key === wbLastContext && Date.now() - wbLastPublished < 60_000) return;
+        await workbenchRequest("/context", {client:wbClient, side:side.serviceId || side.id, generation:side.artifactGeneration, context});
+        wbLastContext = key;
+        wbLastPublished = Date.now();
+      }
+
+      function featureDisplayName(feature) {
+        return String(feature.properties?.name || feature.properties?.class || feature.layerId.replace(/^tileflow-/, "").replace(/-render-/, " · ") || "Map element")
+          .replace(/([a-z])([A-Z])/g, "$1 $2").replaceAll("_", " ").replaceAll("-", " ").replace(/^./, (letter) => letter.toUpperCase());
+      }
+
+      function renderFeatureSummary(side, feature, layer, picker, raw) {
+        const section = document.createElement("section"); section.className = "feature-summary";
+        const heading = document.createElement("h3");
+        heading.textContent = featureDisplayName(feature);
+        const kind = document.createElement("div"); kind.className = "compact-note";
+        const kinds = {fill:"Area", line:"Line", symbol:"Label or icon", "fill-extrusion":"3D building", circle:"Point", raster:"Imagery", hillshade:"Terrain shading", background:"Background"};
+        kind.textContent = (kinds[layer?.type] || layer?.type || feature.geometryType) + " · Zoom " + (side.camera?.zoom ?? 0).toFixed(2);
+        const headingStyle = document.createElement("h4"); headingStyle.textContent = "Appearance here";
+        section.append(heading, kind, headingStyle);
+        const values = document.createElement("dl"); values.className = "property-list";
+        const labels = {"fill-color":"Fill color", "fill-opacity":"Opacity", "fill-outline-color":"Outline", "line-color":"Line color", "line-width":"Width", "line-opacity":"Opacity", "line-gap-width":"Gap", "text-color":"Text color", "text-halo-color":"Text outline", "text-halo-width":"Outline width", "text-opacity":"Text opacity", "text-size":"Text size", "icon-color":"Icon color", "icon-opacity":"Icon opacity", "fill-extrusion-color":"Building color", "fill-extrusion-height":"Height", "fill-extrusion-opacity":"Opacity"};
+        for (const [name, rawValue] of Object.entries({...layer?.paint, ...(layer?.layout?.["text-size"] !== undefined ? {"text-size":layer.layout["text-size"]} : {})}).slice(0,8)) {
+          const value = evaluateBasicZoomValue(rawValue, side.camera?.zoom ?? 0);
+          const label = document.createElement("dt"); label.textContent = labels[name] || name.replaceAll("-", " "); label.title = name;
+          const detail = document.createElement("dd"); detail.textContent = value === unsupportedValue ? "Varies by feature" : formatCurveValue(value);
+          if (typeof value === "string" && /^(#[0-9a-f]{3,8}|rgba?\(|hsla?\()/i.test(value)) {
+            const swatch = document.createElement("span"); swatch.className = "color-swatch"; swatch.style.backgroundColor = value; swatch.setAttribute("aria-hidden", "true"); detail.append(swatch);
+          }
+          values.append(label,detail);
+        }
+        section.append(values);
+        const provenance = findSidecarLayer(side.sidecar, feature.layerId);
+        const owners = provenance ? sidecarLayerWithSemanticAttribution(provenance).semanticAttribution : [];
+        const label = document.createElement("h4"); label.textContent = "Where to edit";
+        section.append(label);
+        const paths = [...new Set(owners.flatMap((owner) => owner.authoringPaths))];
+        for (const path of paths.slice(0,8)) { const code = document.createElement("code"); code.className = "authoring-path"; code.textContent = path; section.append(code); }
+        const note = document.createElement("p"); note.className = "compact-note";
+        note.textContent = paths.length ? "Edit these configuration sections in your editor or ask your coding agent. The map updates here." : "No semantic configuration path is available for this layer.";
+        section.append(note);
+        const details = document.createElement("details"); const summary = document.createElement("summary"); summary.textContent = "Feature data";
+        const provenanceNote = document.createElement("p"); provenanceNote.className = "compact-note"; provenanceNote.textContent = "Configuration paths describe semantic ownership. Exact source lines and tokens are not reported.";
+        details.append(summary,provenanceNote,raw);
+        inspectionOutput.append(section,picker,details);
+      }
+
+      function showWorkbenchError(error) {
+        const message = safeErrorMessage(error);
+        wbError = message;
+        setFeedback(message);
+        wb("notice").textContent = message; wb("notice").hidden = false;
+      }
+`;
+
+// src/workbench-controls.ts
+var controlsStyles = `
+  .map-controls { flex:0 0 360px; width:360px; max-width:45vw; min-height:0; overflow:auto; border-left:1px solid var(--border); background:var(--paper); padding:0 18px 18px; }
+  .map-controls[hidden] { display:none; }
+  .controls-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); }
+  .controls-heading h2 { margin:0; font:inherit; }
+  .controls-segments { display:flex; min-width:0; width:max-content; max-width:100%; border:1px solid var(--border); border-radius:4px; overflow:hidden; }
+  .controls-segments button { flex:1; min-width:0; padding:4px 10px; border:0; border-radius:0; background:var(--paper); color:var(--muted); cursor:pointer; }
+  .controls-segments button + button { border-left:1px solid var(--border); }
+  .controls-segments button[aria-checked=true] { color:var(--accent); background:var(--dt-selected,var(--surface)); box-shadow:inset 0 -2px var(--accent); }
+  .controls-segments button:disabled { opacity:.4; cursor:not-allowed; }
+  .controls-selection { border-bottom:1px solid var(--border); padding-bottom:8px; }
+  .controls-selection .control-field select { width:190px; max-width:70%; }
+  .controls-selection [hidden] { display:none; }
+  .controls-section-title { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:20px 0 9px; }
+  .control-module { border:1px solid var(--border); border-radius:8px; margin:7px 0; background:#fffdf7; overflow:hidden; }
+  .control-module-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; gap:8px; }
+  .control-module-header label { display:flex; align-items:center; justify-content:space-between; flex:1; flex-direction:row; gap:10px; font-size:13px; font-weight:600; cursor:pointer; }
+  .control-module-header input { appearance:none; width:30px; height:18px; min-height:0; padding:0; border:0; border-radius:12px; background:#d5cec1; cursor:pointer; position:relative; flex:none; }
+  .control-module-header input::before { content:''; position:absolute; width:12px; height:12px; top:3px; left:3px; border-radius:50%; background:#fff; }
+  .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-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); }
+  .controls-runtime { border:0; border-bottom:1px solid var(--border); padding:0 0 12px; margin:0; min-width:0; }
+  #controls-modules { border:0; padding:0; margin:0; min-width:0; }
+  .controls-runtime:disabled,#controls-modules:disabled { opacity:.6; }
+  #controls-status { font-size:12px; line-height:1.5; color:var(--muted); margin:8px 0; overflow-wrap:anywhere; }
+  #controls-status[data-error=true] { color:#a32e36; }
+  @media(max-width:760px) { .workspace:has(.map-controls:not([hidden])) { display:flex; flex-direction:column; } .map-controls { flex:0 1 55vh; width:auto; max-width:none; border-left:0; border-top:1px solid var(--border); } .workspace:has(.map-controls:not([hidden])) .stage { flex:1 0 35vh; } }
+`;
+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-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>
+    <fieldset class="controls-runtime" 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>
+    <p id="controls-status" role="status" hidden></p>
+  </aside>
+`;
+var controlsClient = String.raw`
+      const ctl = (id) => document.getElementById("controls-" + id);
+      const controlsPanel = document.getElementById("map-controls");
+      const controlsButton = document.getElementById("controls-toggle");
+      let controlsKey = "", controlsSequence = 0, controlsModel, controlsDraft = {}, controlsBusy = false;
+      let controlsApplyTimer, controlsRevision = 0, controlsPending = false, controlsResetPending = false;
+      let controlsLoadingKey = "", controlsBindings = [], controlsLastError = "";
+      let controlsHistoryCurrent, controlsInitial, controlsHistoryQuiet = 0;
+      const controlsUndo = [], controlsRedo = [];
+      ctl("selection").hidden = !options.workbenchUrl;
+      controlsButton.addEventListener("click", () => toggleMapControls(controlsPanel.hidden, true));
+      ctl("reset").addEventListener("click", () => {
+        if (!controlsModel) return;
+        controlsDraft = {};
+        ctl("3d").checked = false; ctl("animation").value = "0";
+        renderMapControls();
+        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);
+      }
+      function syncAnimationSegments(){for(const button of ctl("animation-segments").children)button.setAttribute("aria-checked",String(button.value===ctl("animation").value));}
+      syncAnimationSegments();
+      addEventListener("keydown", (event) => { if (event.key === "Escape" && !controlsPanel.hidden) toggleMapControls(false, true); });
+      const controlsTimer = setInterval(() => { if (!controlsPanel.hidden) void loadMapControls(); }, 1000);
+      addEventListener("beforeunload", () => { clearInterval(controlsTimer); cancelMapControlsApply(); });
+
+      function cancelMapControlsApply() {
+        clearTimeout(controlsApplyTimer); controlsApplyTimer = undefined;
+        controlsPending = false; controlsResetPending = false; controlsRevision++;
+      }
+      function setMapControlsDisabled(disabled) {
+        for (const name of ["modules", "runtime", "reset"]) ctl(name).disabled = disabled;
+      }
+      function scheduleMapControls(reset = false) {
+        clearTimeout(controlsApplyTimer);
+        controlsRevision++; controlsPending = true; controlsResetPending = reset;
+        controlsNotice(reset ? "Restoring the original map…" : "Updating preview…");
+        controlsApplyTimer = setTimeout(() => {
+          controlsApplyTimer = undefined;
+          void applyMapControls();
+        }, reset ? 0 : 300);
+      }
+
+      function toggleMapControls(open, focus = false) {
+        if (globalThis.__tileflowDevtoolsUI) { globalThis.__tileflowDevtoolsUI.controls(open); return; }
+        if (open) {
+          setInspectionEnabled(false);
+        }
+        controlsPanel.hidden = !open;
+        controlsButton.setAttribute("aria-expanded", String(open));
+        for (const side of Object.values(states)) side.map?.resize?.();
+        if (open) void loadMapControls();
+        if (focus) (open ? controlsPanel : controlsButton).focus();
+      }
+      function controlsNotice(text, error = false) {
+        ctl("status").hidden = !error;
+        ctl("status").textContent = error ? text : "";
+        ctl("status").dataset.error = String(error);
+      }
+      function controlsIdentity(side) {
+        const meta = side.map?.getStyle?.()?.metadata;
+        return meta ? {map:meta["tileflow:map"], theme:meta["tileflow:theme"]} : undefined;
+      }
+      function livePreviewUrl(side) {
+        return new URL(side.frame.contentWindow.location.href, location.href);
+      }
+      async function loadMapControls() {
+        const side = states[activeSideId], identity = controlsIdentity(side);
+        if (!side.bridgeConnected || !identity?.map || !identity.theme) {
+          setMapControlsDisabled(!side.bridgeConnected || !controlsModel);
+          controlsNotice("Waiting for the map to finish loading…");
+          return;
+        }
+        identity.theme = side.workbenchTheme || identity.theme;
+        const key = JSON.stringify([side.id, side.definition.basePath, identity.map, side.loadEpoch]);
+        const epoch = side.loadEpoch;
+        const loadingKey = key + identity.theme;
+        if (key === controlsKey && controlsModel?.theme === identity.theme) {
+          setMapControlsDisabled(false);
+          return;
+        }
+        if (loadingKey === controlsLoadingKey) return;
+        const preserve = key === controlsKey && controlsModel;
+        if (!preserve) {
+          const pendingAppearance = side.pendingAppearance;
+          cancelMapControlsApply();
+          controlsPending = Boolean(pendingAppearance);
+          controlsKey = key;
+          controlsModel = undefined;
+          ctl("modules").replaceChildren(); setMapControlsDisabled(true);
+        }
+        controlsLoadingKey = loadingKey;
+        const sequence = ++controlsSequence;
+        controlsNotice("Reading this map’s modules…");
+        try {
+          const url = new URL(side.definition.basePath + "/__controls", location.href);
+          url.search = new URLSearchParams(identity).toString();
+          const response = await fetch(url, {cache:"no-store"});
+          const model = await response.json();
+          if (!response.ok) throw new Error(model.error || "Controls are unavailable for this preview.");
+          if (sequence !== controlsSequence || activeSideId !== side.id || key !== controlsKey || epoch !== side.loadEpoch || identity.theme !== (side.workbenchTheme || controlsIdentity(side)?.theme)) return;
+          if (preserve) {
+            // Keep the actual inputs and their handlers mounted, including focus/selection.
+            for (const module of controlsModel.modules) {
+              const updated = model.modules.find((item) => item.id === module.id);
+              if (!updated) continue;
+              module.enabled = updated.enabled;
+              for (const field of module.fields) Object.assign(field, updated.fields.find((item) => item.path === field.path));
+            }
+            controlsModel.theme = model.theme;
+            for (const sync of controlsBindings) sync();
+          } else {
+            controlsModel = {...model, side, key, epoch};
+            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("animation").value = query.get("animation") === "fade" ? "fade" : Number(query.get("animation")) > 0 ? "800" : "0"; syncAnimationSegments();
+            renderMapControls();
+            controlsUndo.length = controlsRedo.length = 0;
+            controlsHistoryCurrent = globalThis.__tileflowScene.snapshot();
+            controlsInitial = structuredClone(controlsHistoryCurrent);
+          }
+          setMapControlsDisabled(false);
+          controlsNotice(Object.keys(controlsDraft).length ? "Preview overrides applied." : "Using the map’s original settings.");
+        } catch (error) {
+          if (sequence === controlsSequence) { if (!preserve) controlsKey = ""; controlsNotice(safeErrorMessage(error), true); }
+        } finally {
+          if (sequence === controlsSequence) {
+            controlsLoadingKey = "";
+            if (controlsPending && controlsApplyTimer === undefined) void applyMapControls();
+          }
+        }
+      }
+      function controlValue(object, path) { return path.split(".").reduce((value, key) => value?.[key], object); }
+      function changeControl(module, path, value, original) {
+        const patch = controlsDraft[module] ||= {};
+        const parts = path.split("."); const leaf = parts.pop();
+        let parent = patch;
+        for (const part of parts) parent = parent[part] ||= {};
+        if (value === original) delete parent[leaf]; else parent[leaf] = value;
+        for (const [key, item] of Object.entries(patch)) if (item && typeof item === "object" && !Object.keys(item).length) delete patch[key];
+        if (!Object.keys(patch).length) delete controlsDraft[module];
+        scheduleMapControls();
+      }
+      function renderMapControls(expanded = [...ctl("modules").querySelectorAll("details[open]")].map((item) => item.dataset.module)) {
+        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"};
+        const modules = [...controlsModel.modules].sort((a,b) => {
+          const priority = {vegetation:0, buildings:1};
+          return (priority[a.id] ?? 2) - (priority[b.id] ?? 2);
+        });
+        for (const module of modules) {
+          const card = document.createElement("section"); card.className = "control-module";
+          const row = document.createElement("div"); row.className = "control-module-header";
+          const label = document.createElement("label"); label.textContent = names[module.id] || module.id;
+          const toggle = document.createElement("input"); toggle.type = "checkbox"; toggle.checked = controlsDraft[module.id]?.enabled ?? module.enabled;
+          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;
+          controlsBindings.push(() => {
+            if (document.activeElement !== toggle) toggle.checked = controlsDraft[module.id]?.enabled ?? module.enabled;
+            fieldset.disabled = !toggle.checked;
+          });
+          toggle.addEventListener("change", () => { changeControl(module.id, "enabled", toggle.checked, module.enabled); fieldset.disabled = !toggle.checked; });
+          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);
+            for (const field of module.fields) {
+              const line = document.createElement("label"); line.className = "control-field";
+              const title = document.createElement("span"); title.textContent = field.label;
+              const input = document.createElement(field.choices ? "select" : "input");
+              const override = controlValue(controlsDraft[module.id], field.path);
+              const value = field.inherit && override === undefined ? "inherit" : override ?? field.value;
+              const labels = {"3d":"Always 3D",auto:"Follow 2D / 3D view",flat:"Flat (2D)",none:"Hidden",style:"Map light",sun:"Scene sun",faceted:"Faceted",smooth:"Smooth",toon:"Toon"};
+              if (field.choices) {
+                const choices = field.choices.map((choice) => new Option(labels[choice] || choice, choice));
+                if (field.inherit) choices.unshift(new Option("Auto · " + (labels[field.value] || field.value), "inherit"));
+                input.replaceChildren(...choices); input.value = String(value);
+              } else if (typeof field.value === "boolean") { input.type = "checkbox"; input.setAttribute("role", "switch"); input.checked = value; }
+              else { input.type = "number"; input.required = true; input.min = String(field.min); input.max = String(field.max); input.step = "any"; input.value = String(value); }
+              controlsBindings.push(() => {
+                if (document.activeElement === input || !input.checkValidity()) return;
+                const override = controlValue(controlsDraft[module.id], field.path);
+                const value = field.inherit && override === undefined ? "inherit" : override ?? field.value;
+                if (input.type === "checkbox") input.checked = value;
+                else input.value = String(value);
+                if (field.inherit) input.options[0].textContent = "Auto · " + (labels[field.value] || field.value);
+              });
+              input.addEventListener(input.type === "number" ? "input" : "change", () => {
+                if (!input.checkValidity()) { cancelMapControlsApply(); controlsNotice("Enter a valid value to update the preview.", true); return; }
+                const value = field.inherit && input.value === "inherit" ? undefined : input.type === "checkbox" ? input.checked : input.type === "number" ? Number(input.value) : input.value;
+                changeControl(module.id, field.path, value, field.inherit ? undefined : field.value);
+              });
+              line.append(title, input); fieldset.append(line);
+            }
+          }
+          ctl("modules").append(card);
+        }
+      }
+      async function applyMapControls() {
+        if (!controlsModel || controlsBusy || !controlsPending) return;
+        const revision = controlsRevision, reset = controlsResetPending;
+        const {side, map, key} = controlsModel;
+        const theme = side.workbenchTheme || controlsModel.theme;
+        const epoch = side.loadEpoch, source = side.frame.src;
+        if (!side.bridgeConnected || side.id !== activeSideId || side.loadEpoch !== controlsModel.epoch) return;
+        if (!reset && [...ctl("modules").querySelectorAll("input")].some((input) => !input.checkValidity())) {
+          controlsPending = false;
+          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 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()};
+        controlsBusy = true; controlsPending = false; controlsLastError = "";
+        controlsNotice("Compiling preview…");
+        try {
+          if (styleKey !== side.appliedSceneStyle) {
+            const style = new URL(side.definition.basePath + "/styles/" + map + "/" + theme + ".json", location.href);
+            if (Object.keys(draft).length) style.searchParams.set("controls", JSON.stringify(draft));
+            const response = await fetch(style, {cache:"no-store"});
+            const document = await response.json();
+            if (!response.ok) throw new Error(document.error || "Unable to compile these settings.");
+            next.style = document;
+          }
+          if (!isCurrent()) return;
+          const apply = side.frame.contentWindow.__tileflowApplyScene;
+          if (!apply) throw new Error("Reload DevTools once to enable live scene updates.");
+          if (!await apply(JSON.stringify(next), isCurrent)) return;
+          side.appliedSceneStyle = styleKey;
+          const after = globalThis.__tileflowScene.snapshot();
+          if (!controlsHistoryQuiet && before && JSON.stringify([before.theme,before.controls,before.buildings3d,before.animation]) !== JSON.stringify([after.theme,after.controls,after.buildings3d,after.animation])) {
+            controlsUndo.push({before,after,time:performance.now()}); if(controlsUndo.length>100)controlsUndo.shift(); controlsRedo.length=0;
+          }
+          controlsHistoryCurrent=after;
+          side.pendingAppearance = undefined;
+          side.definition.previewUrl = livePreviewUrl(side).href;
+          side.sidecarAbort?.abort(); side.sidecar = undefined; side.sidecarPromise = undefined;
+          if (selectedInspection?.side === side) void loadSidecar(side);
+          if (isCurrent()) controlsNotice("");
+        } catch (error) {
+          if (revision === controlsRevision && controlsKey === key) { controlsLastError = safeErrorMessage(error); controlsNotice(controlsLastError + " The previous map is still shown.", true); }
+        } finally {
+          controlsBusy = false;
+          if (controlsPending && controlsApplyTimer === undefined) void applyMapControls();
+        }
+      }
+      globalThis.__tileflowScene = {
+        get history() {return {undo:controlsUndo.at(-1)?.time || 0,redo:controlsRedo.at(-1)?.redoTime || 0,changed:controlsUndo.length>0||controlsRedo.length>0};},
+        async undo() {const entry=controlsUndo.at(-1);if(!entry)return;await this.restore(entry.before);controlsUndo.pop();entry.redoTime=performance.now();controlsRedo.push(entry);},
+        async redo() {const entry=controlsRedo.at(-1);if(!entry)return;await this.restore(entry.after);controlsRedo.pop();entry.time=performance.now();controlsUndo.push(entry);},
+        async reset() {if(controlsInitial)await this.restore(controlsInitial);controlsUndo.length=controlsRedo.length=0;},
+        audit(active) {controlsHistoryQuiet=Math.max(0,controlsHistoryQuiet+(active?1:-1));},
+        variants() {
+          const side = states[activeSideId], owner = wbCatalog?.sides[side.serviceId || side.id];
+          const variants = owner?.timeOfDay?.[side.workbenchMap] || {};
+          return (owner?.selections || []).filter(entry => entry.map === side.workbenchMap && !entry.scene).map(entry => {
+            const family = Object.keys(variants).find(name => Object.values(variants[name]).includes(entry.theme));
+            return {theme:entry.theme, palette:family || entry.theme, timeOfDay:family ? Object.keys(variants[family]).find(moment => variants[family][moment] === entry.theme) : undefined};
+          });
+        },
+        snapshot() {
+          const side = states[activeSideId];
+          return {side:side.id, theme:side.workbenchTheme || controlsIdentity(side)?.theme, controls:structuredClone(controlsDraft), buildings3d:ctl("3d").checked, animation:ctl("animation").value, style:side.map?.getStyle()};
+        },
+        async style(theme, signal) {
+          const side = states[activeSideId], identity = controlsIdentity(side);
+          const url = new URL(side.definition.basePath + "/styles/" + identity.map + "/" + theme + ".json", location.href);
+          if (Object.keys(controlsDraft).length) url.searchParams.set("controls", JSON.stringify(controlsDraft));
+          const response = await fetch(url, {signal});
+          if (!response.ok) throw new Error("Could not read theme " + theme);
+          return response.json();
+        },
+        async apply(theme, signal) {
+          if (signal?.aborted) throw new Error("Audit cancelled.");
+          const side = states[activeSideId], owner = wbCatalog?.sides[side.serviceId || side.id];
+          const entry = owner?.selections.find(item => item.map === side.workbenchMap && item.theme === theme && !item.scene);
+          if (!entry) throw new Error("Theme is not available: " + theme);
+          applyWorkbenchAppearance(side, entry);
+          const started = performance.now();
+          do {
+            if (signal?.aborted) throw new Error("Audit cancelled.");
+            if (states[activeSideId] !== side) throw new Error("The active map changed.");
+            if (performance.now() - started > 30000) throw new Error("Theme update timed out.");
+            await new Promise(resolve => setTimeout(resolve,40));
+          } while (controlsBusy || controlsPending || controlsLoadingKey || controlsApplyTimer !== undefined);
+          if (controlsLastError) throw new Error(controlsLastError);
+          if (controlsIdentity(side)?.theme !== theme) throw new Error("Theme could not be applied.");
+        },
+        async restore(saved) {
+          if (states[activeSideId].id !== saved.side) return;
+          controlsHistoryQuiet++;
+          try {
+          controlsDraft = structuredClone(saved.controls);
+          ctl("3d").checked = saved.buildings3d; ctl("animation").value = saved.animation;
+          scheduleMapControls();
+          await this.apply(saved.theme);
+          const side = states[activeSideId];
+          if (saved.style) await side.frame.contentWindow.__tileflowApplyScene(JSON.stringify({map:controlsIdentity(side).map,theme:saved.theme,controls:saved.controls,buildings3d:saved.buildings3d,animation:saved.animation === "fade" ? "fade" : Number(saved.animation),style:saved.style}), () => states[activeSideId] === side);
+          renderMapControls();syncAnimationSegments();controlsHistoryCurrent=this.snapshot();
+          } finally {controlsHistoryQuiet--;}
+        }
+      };
+`;
+
+// src/workbench-ui.ts
+function workbenchIcon(name) {
+  const paths = {
+    inspect: '<path d="M9 3H4a1 1 0 0 0-1 1v5m12-6h5a1 1 0 0 1 1 1v5M3 15v5a1 1 0 0 0 1 1h5"/><path d="m11 11 10 4-5 1-1 5z"/>',
+    settings: '<path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="3"/><circle cx="15" cy="17" r="3"/>',
+    close: '<path d="m6 6 12 12M6 18 18 6"/>'
+  };
+  return `<svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${paths[name]}</svg>`;
+}
+var workbenchStyles = `
+  body { display:flex; flex-direction:column; }
+  .workspace { flex:1; min-height:0; }
+  input[type=range] { accent-color:var(--accent); }
+  button:disabled { opacity:.5; cursor:not-allowed; }
+  select,input[type=text],input[type=number] { background:var(--paper); color:var(--ink); border:1px solid var(--border); padding:5px 8px; }
+  summary { cursor:pointer; }
+  .tool-icon { width:17px; height:17px; flex:none; vertical-align:middle; }
+  button:has(.tool-icon) { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
+  .inspect-hint { position:absolute; z-index:4; top:8px; left:8px; pointer-events:none; }
+  .compact-note { font-size:12px; color:var(--muted); line-height:1.5; }
+  .property-list { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
+  .property-list dd { margin:0; }
+  .authoring-path { display:block; overflow-wrap:anywhere; }
+  .color-swatch { width:16px; height:16px; border:1px solid var(--border); border-radius:2px; display:inline-block; }
+`;
+var workbenchPanels = `<div id="wb-notice" role="status" hidden></div>`;
 
 // src/comparison-html.ts
 function renderTileflowComparisonHtml(options) {
   const documentOptions = serializeInlineJson(options);
+  const fontBasePath = options.basePath.split("/").map((segment) => encodeURIComponent(decodeURIComponent(segment)).replaceAll("'", "%27")).join("/");
   const nonceAttribute = options.cspNonce ? ` nonce="${escapeHtml(options.cspNonce)}"` : "";
   return `<!doctype html>
 <html lang="en" data-tileflow-state="loading">
@@ -48,6 +1283,10 @@ function renderTileflowComparisonHtml(options) {
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>${escapeHtml(options.title)}</title>
     <style${nonceAttribute}>
+      @font-face { font-family:'Inter'; font-weight:100 900; font-display:swap; src:url('${fontBasePath}/__workbench-fonts/inter.woff2') format('woff2'); }
+      @font-face { font-family:'JetBrains Mono'; font-weight:400; font-display:swap; src:url('${fontBasePath}/__workbench-fonts/jetbrains-mono.woff2') format('woff2'); }
+      @font-face { font-family:'Mona Sans'; font-weight:200 900; font-display:swap; src:url('${fontBasePath}/__workbench-fonts/mona-sans.woff2') format('woff2'); }
+      @font-face { font-family:'Hubot Sans'; font-weight:200 900; font-display:swap; src:url('${fontBasePath}/__workbench-fonts/hubot-sans.woff2') format('woff2'); }
       :root {
         color-scheme: light;
         --accent: #3157d5;
@@ -59,6 +1298,8 @@ function renderTileflowComparisonHtml(options) {
         --overlay-alpha: .5;
       }
       * { box-sizing: border-box; }
+      [hidden] { display: none !important; }
+      .stage[data-mode="single"] .pane-right { display: none; }
       html, body { height: 100%; margin: 0; }
       body {
         display: grid;
@@ -83,49 +1324,10 @@ function renderTileflowComparisonHtml(options) {
         outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
         outline-offset: 2px;
       }
-      .toolbar {
-        z-index: 10;
-        display: flex;
-        min-height: 48px;
-        align-items: center;
-        gap: 8px;
-        padding: 7px 10px;
-        border-bottom: 1px solid var(--border);
-        background: rgba(255, 255, 255, .97);
-        flex-wrap: wrap;
-      }
-      .toolbar-title { font-weight: 750; margin-right: 4px; }
-      .toolbar-group { display: inline-flex; min-width: 0; align-items: center; gap: 8px; flex-wrap: wrap; }
-      .toolbar-separator { width: 1px; height: 25px; flex: 0 0 auto; background: var(--border); }
-      .toolbar label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
-      .toolbar input[type="range"] { width: 96px; }
-      .toolbar input[type="text"] { width: 150px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; }
       .workspace { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
       .stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #d8dadd; }
       .pane { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: hidden; background: #d8dadd; }
       .pane iframe { width: 100%; height: 100%; display: block; border: 0; background: #d8dadd; }
-      .pane-label {
-        position: absolute;
-        z-index: 3;
-        top: 10px;
-        left: 10px;
-        display: flex;
-        max-width: calc(100% - 20px);
-        align-items: center;
-        gap: 7px;
-        border: 1px solid rgba(0, 0, 0, .12);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, .93);
-        box-shadow: 0 3px 14px rgba(0, 0, 0, .12);
-        padding: 5px 9px;
-        pointer-events: none;
-      }
-      .pane-label-text { overflow: hidden; text-overflow: ellipsis; }
-      .side-state-text { flex: 0 0 auto; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
-      .side-state { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #8d929b; }
-      .side-state[data-status="ready"] { background: #248a4a; }
-      .side-state[data-status="building"] { background: #cf8114; }
-      .side-state[data-status="invalid"], .side-state[data-status="error"] { background: #ba3838; }
       .stage[data-mode="side-by-side"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; }
       .stage[data-mode="side-by-side"] .pane { position: relative; inset: auto; }
       .stage[data-mode="side-by-side"] .pane-right { grid-column: 2; }
@@ -165,74 +1367,46 @@ function renderTileflowComparisonHtml(options) {
       .sprite-card { min-width: 0; border: 1px solid var(--border); border-radius: 7px; padding: 7px; background: var(--paper); text-align: center; }
       .sprite-card canvas { display: block; margin: auto; max-width: 64px; max-height: 64px; image-rendering: auto; }
       .sprite-name { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
-      .feedback { color: var(--muted); min-width: 64px; }
       .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
       @media (max-width: 760px) {
-        .toolbar { align-content: center; gap: 6px; padding: 6px; }
-        .toolbar-title { flex: 1 0 calc(100% - 12px); }
-        .toolbar-separator { display: none; }
-        .toolbar-group { flex: 1 1 100%; gap: 5px; }
-        .toolbar-group button { padding-inline: 7px; }
-        .toolbar input[type="range"] { width: min(24vw, 86px); }
-        .toolbar input[type="text"] { width: min(34vw, 130px); }
         .workspace { grid-template-columns: minmax(0, 1fr); }
         .inspector { position: absolute; z-index: 20; right: 0; inset-block: 0; width: min(92vw, 390px); box-shadow: -8px 0 28px rgba(0,0,0,.18); }
       }
       @media (prefers-reduced-motion: reduce) {
         *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
       }
+      ${workbenchStyles}
+      ${controlsStyles}
+      ${devtoolsStyles}
     </style>
   </head>
   <body>
-    <header class="toolbar" aria-label="Comparison controls">
-      <span class="toolbar-title" id="title"></span>
-      <div class="toolbar-group" role="group" aria-label="Comparison mode">
-        <button type="button" data-mode="side-by-side">Side by side</button>
-        <button type="button" data-mode="split">Split</button>
-        <button type="button" data-mode="overlay">Overlay</button>
-        <button type="button" data-mode="blink">Blink</button>
-      </div>
-      <span class="toolbar-separator"></span>
-      <div class="toolbar-group">
-        <label id="split-control">Split <input id="split" type="range" min="5" max="95" value="50" aria-label="Split position" /></label>
-        <label id="alpha-control">Opacity <input id="alpha" type="range" min="0" max="100" value="50" aria-label="Overlay opacity" /></label>
-        <button type="button" id="driver">Interact: left</button>
-        <button type="button" id="blink-pause">Pause blink</button>
-        <button type="button" id="inspect-toggle" aria-controls="inspector" aria-expanded="false" aria-pressed="false">Inspect</button>
-      </div>
-      <span class="toolbar-separator"></span>
-      <div class="toolbar-group">
-        <input id="scene-name" type="text" value="comparison-view" aria-label="Scene name" />
-        <label>DPR <select id="scene-dpr"><option value="1">1</option><option value="2">2</option></select></label>
-        <button type="button" id="copy-scene">Copy scene</button>
-        <button type="button" id="copy-command">Copy command</button>
-      </div>
-      <span class="feedback" id="feedback" role="status"></span>
-    </header>
     <div class="workspace">
       <main class="stage" id="stage" data-driver="left" data-tileflow-capture-id="tileflow-comparison" data-tileflow-state="loading">
         <section class="pane pane-left" data-side="left">
-          <div class="pane-label"><span class="side-state" id="left-state" role="status" aria-live="polite"></span><span class="pane-label-text" id="left-label"></span><span class="side-state-text" id="left-status-text">Building</span></div>
-          <iframe id="left-frame" title="Left Tileflow preview" referrerpolicy="no-referrer"></iframe>
+          <iframe id="left-frame" title="${options.right ? "Left Tileflow preview" : "Tileflow map preview"}" referrerpolicy="no-referrer"></iframe>
         </section>
         <section class="pane pane-right" data-side="right">
-          <div class="pane-label"><span class="side-state" id="right-state" role="status" aria-live="polite"></span><span class="pane-label-text" id="right-label"></span><span class="side-state-text" id="right-status-text">Building</span></div>
           <iframe id="right-frame" title="Right Tileflow preview" referrerpolicy="no-referrer"></iframe>
         </section>
         <div class="split-line" aria-hidden="true"></div>
+        <div class="inspect-hint" id="wb-inspect-hint" hidden>Click an element to inspect \xB7 Esc to exit</div>
       </main>
       <aside class="inspector" id="inspector" tabindex="-1" aria-labelledby="inspector-title" hidden>
-        <div class="inspector-heading"><h2 id="inspector-title">Cartographic inspector</h2><button type="button" id="inspector-close" aria-label="Close inspector">Close</button></div>
-        <div id="inspection" class="empty">Enable Inspect, then click either map.</div>
-        <h3>Zoom curve</h3>
+        <button type="button" id="inspect-toggle" aria-controls="inspector" aria-expanded="false" aria-pressed="false" aria-keyshortcuts="i" title="Select a map element (I). Escape to stop.">${workbenchIcon("inspect")}Inspect</button>
+        <button type="button" id="controls-toggle" aria-controls="map-controls" aria-expanded="false">Scene</button>
+        <div class="inspector-heading"><h2 id="inspector-title">${workbenchIcon("inspect")} Inspect the map</h2><button type="button" id="inspector-close" aria-label="Close inspector">${workbenchIcon("close")}</button></div>
+        <div id="inspection" class="empty">Click a feature to understand how it is drawn and find its configuration.</div>
+        <details class="zoom-details"><summary>Appearance at different zoom levels</summary>
         <select id="curve-property" disabled><option>Select a rendered layer first</option></select>
-        <div id="curve-output" class="empty">Paint and layout values appear here.</div>
-        <h3>Compiler sidecar</h3>
-        <pre id="sidecar-output">No layer selected.</pre>
-        <h3>Sprite atlas</h3>
+        <div id="curve-output" class="empty">Select an element to explore its appearance.</div></details>
+        <details><summary>Compiler details</summary><h3>Compiler sidecar</h3><pre id="sidecar-output">No layer selected.</pre></details>
+        <details><summary>Sprite atlas</summary>
         <button type="button" id="load-sprites">Load active side sprites</button>
-        <div id="sprite-output" class="sprite-grid"></div>
+        <div id="sprite-output" class="sprite-grid"></div></details>
       </aside>
+      ${workbenchPanels}
+      ${controlsPanel}
     </div>
     <script type="module"${nonceAttribute}>
       const options = ${documentOptions};
@@ -250,24 +1424,16 @@ function renderTileflowComparisonHtml(options) {
       const curveOutput = document.getElementById("curve-output");
       const sidecarOutput = document.getElementById("sidecar-output");
       const spriteOutput = document.getElementById("sprite-output");
-      const feedback = document.getElementById("feedback");
-      const splitInput = document.getElementById("split");
-      const alphaInput = document.getElementById("alpha");
-      const driverButton = document.getElementById("driver");
-      const blinkPauseButton = document.getElementById("blink-pause");
       const inspectButton = document.getElementById("inspect-toggle");
       const inspectorCloseButton = document.getElementById("inspector-close");
-      const sceneNameInput = document.getElementById("scene-name");
-      const sceneDprInput = document.getElementById("scene-dpr");
       const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
-      const states = Object.fromEntries(["left", "right"].map((id) => {
+      const sideIds = options.right ? ["left", "right"] : ["left"];
+      const states = Object.fromEntries(sideIds.map((id) => {
         const definition = options[id];
         return [id, {
           id,
           definition,
           frame: document.getElementById(id + "-frame"),
-          stateElement: document.getElementById(id + "-state"),
-          statusTextElement: document.getElementById(id + "-status-text"),
           map: undefined,
           camera: undefined,
           bridgeReady: false,
@@ -296,45 +1462,25 @@ function renderTileflowComparisonHtml(options) {
       let spriteLoadSequence = 0;
       let spriteOwnerId;
 
-      document.getElementById("title").textContent = options.title;
       const initialUi = readUiFromUrl();
-      splitInput.value = String(initialUi.split);
-      alphaInput.value = String(initialUi.alpha);
+
       applySliders();
       setMode(initialUi.mode || options.initialMode);
-      updateBlinkMotionPreference();
-      for (const id of ["left", "right"]) {
+      for (const id of sideIds) {
         const side = states[id];
-        document.getElementById(id + "-label").textContent = side.definition.label;
         side.frame.src = side.definition.previewUrl;
         side.frame.addEventListener("load", () => connectSide(side));
         side.frame.addEventListener("focus", () => selectSide(side.id));
         startStatus(side);
       }
 
-      for (const button of document.querySelectorAll("[data-mode]")) {
-        button.addEventListener("click", () => setMode(button.dataset.mode));
-      }
-      splitInput.addEventListener("input", () => { applySliders(); writeUrlState(); });
-      alphaInput.addEventListener("input", () => { applySliders(); writeUrlState(); });
-      driverButton.addEventListener("click", () => {
-        selectSide(stage.dataset.driver === "left" ? "right" : "left");
-      });
-      blinkPauseButton.addEventListener("click", () => {
-        blinkPaused = !blinkPaused;
-        updateBlinkMotionPreference();
-        restartBlink();
-      });
       inspectButton.addEventListener("click", () => setInspectionEnabled(!inspectionEnabled, true));
       inspectorCloseButton.addEventListener("click", () => setInspectionEnabled(false, true));
-      document.getElementById("copy-scene").addEventListener("click", () => copyScene(false));
-      document.getElementById("copy-command").addEventListener("click", () => copyScene(true));
       document.getElementById("load-sprites").addEventListener("click", () => loadSprites(states[activeSideId]));
       curveProperty.addEventListener("change", renderCurve);
       reducedMotion.addEventListener?.("change", () => {
         blinkPaused = reducedMotion.matches;
-        updateBlinkMotionPreference();
-        restartBlink();
+          restartBlink();
       });
       addEventListener("keydown", (event) => {
         if (event.key === "Escape" && inspectionEnabled) setInspectionEnabled(false, true);
@@ -346,18 +1492,16 @@ function renderTileflowComparisonHtml(options) {
           side.eventSource?.close();
           side.sidecarAbort?.abort();
           side.spriteAbort?.abort();
-          side.cleanupBridge?.();
+          cleanupSideBridge(side);
         }
       });
 
       function selectSide(id, writeState = true) {
-        if (id !== "left" && id !== "right") return;
+        if (!states[id]) return;
         const changed = activeSideId !== id || stage.dataset.driver !== id;
         const previousSpriteOwner = spriteOwnerId;
         activeSideId = id;
         stage.dataset.driver = id;
-        driverButton.textContent = "Interact: " + id;
-        driverButton.setAttribute("aria-label", "Interact with " + states[id].definition.label);
         if (changed && previousSpriteOwner && previousSpriteOwner !== id) {
           states[previousSpriteOwner].spriteAbort?.abort();
           spriteLoadSequence += 1;
@@ -370,33 +1514,31 @@ function renderTileflowComparisonHtml(options) {
 
       function setInspectionEnabled(enabled, manageFocus = false) {
         inspectionEnabled = enabled;
+        if (globalThis.__tileflowDevtoolsUI) {
+          inspectButton.setAttribute("aria-pressed", String(enabled));
+          document.getElementById("wb-inspect-hint").hidden = !enabled;
+          for (const side of Object.values(states)) sendInspectionState(side);
+          globalThis.__tileflowDevtoolsUI.inspectionChanged(enabled);
+          return;
+        }
+        if (enabled) toggleMapControls(false);
         inspectButton.setAttribute("aria-pressed", String(enabled));
         inspectButton.setAttribute("aria-expanded", String(enabled));
         inspector.hidden = !enabled;
-        for (const side of Object.values(states)) sendInspectionState(side);
+        document.getElementById("wb-inspect-hint").hidden = !enabled;
+        for (const side of Object.values(states)) { sendInspectionState(side); side.map?.resize?.(); }
         if (manageFocus) {
           if (enabled) inspector.focus();
           else inspectButton.focus();
         }
       }
 
-      function updateBlinkMotionPreference() {
-        const motionBlocked = reducedMotion.matches;
-        blinkPauseButton.disabled = motionBlocked;
-        blinkPauseButton.textContent = motionBlocked
-          ? "Blink paused (reduced motion)"
-          : blinkPaused ? "Resume blink" : "Pause blink";
-      }
 
       function setMode(mode) {
-        if (!["side-by-side", "split", "overlay", "blink"].includes(mode)) return;
+        if (!options.right) mode = "single";
+        if (!["single", "side-by-side", "split", "overlay", "blink"].includes(mode)) return;
+        if (mode === "single" && activeSideId !== "left") selectSide("left", false);
         stage.dataset.mode = mode;
-        for (const button of document.querySelectorAll("[data-mode]")) {
-          button.setAttribute("aria-pressed", String(button.dataset.mode === mode));
-        }
-        document.getElementById("split-control").hidden = mode !== "split";
-        document.getElementById("alpha-control").hidden = mode !== "overlay";
-        blinkPauseButton.hidden = mode !== "blink";
         restartBlink();
         writeUrlState();
         setTimeout(() => {
@@ -405,8 +1547,8 @@ function renderTileflowComparisonHtml(options) {
       }
 
       function applySliders() {
-        const split = boundedNumber(Number(splitInput.value), 5, 95, 50);
-        const alpha = boundedNumber(Number(alphaInput.value), 0, 100, 50);
+        const split = boundedNumber(initialUi.split, 5, 95, 50);
+        const alpha = boundedNumber(initialUi.alpha, 0, 100, 50);
         stage.style.setProperty("--split", split + "%");
         stage.style.setProperty("--overlay-alpha", String(alpha / 100));
       }
@@ -423,16 +1565,27 @@ function renderTileflowComparisonHtml(options) {
         }, 700);
       }
 
+      function cleanupSideBridge(side) {
+        try { side.cleanupBridge?.(); }
+        catch (error) {
+          // A stopped dev server can replace the iframe with a cross-origin browser error page.
+          if (error?.name !== "SecurityError") throw error;
+        } finally { side.cleanupBridge = undefined; }
+      }
+
       function connectSide(side) {
         side.loadEpoch += 1;
+        side.appliedSceneStyle = undefined;
+        side.pendingAppearance = undefined;
         const epoch = side.loadEpoch;
-        side.cleanupBridge?.();
+        cleanupSideBridge(side);
         side.cleanupBridge = undefined;
         side.sidecarAbort?.abort();
         side.spriteAbort?.abort();
         side.sidecarAbort = undefined;
         side.spriteAbort = undefined;
         side.map = undefined;
+        side.bridgeConnected = false;
         side.bridgeReady = false;
         side.camera = undefined;
         side.sidecar = undefined;
@@ -456,7 +1609,6 @@ function renderTileflowComparisonHtml(options) {
           curveOutput.textContent = "Paint and layout values appear here.";
           sidecarOutput.textContent = "No layer selected.";
         }
-        renderSideStatus(side);
         updateDocumentReadiness();
         const started = performance.now();
         const findMap = () => {
@@ -467,7 +1619,13 @@ function renderTileflowComparisonHtml(options) {
             const map = childWindow?.__tileflowPreviewMap;
             if (map) {
               side.map = map;
+              // DevTools can edit a connected map while its tiles are still loading.
+              // bridgeReady remains the separate renderer-readiness signal.
+              side.bridgeConnected = true;
+              side.camera = readMapCamera(map);
               side.cleanupBridge = installChildBridge(side, childWindow, map, epoch);
+              if (options.workbenchUrl) void refreshWorkbench();
+              if (!controlsPanel.hidden) void loadMapControls();
               return;
             }
           } catch (error) {
@@ -493,6 +1651,68 @@ function renderTileflowComparisonHtml(options) {
         let releaseFrameAfterPaint;
         let readyTimer;
         let readyAnnounced = false;
+        let inspectedFeatures = [];
+        let highlightedIndex = -1;
+        let hoveredFeature, hoveredCoordinate, hoverFrame, hoverHint;
+        let inspectedCoordinate;
+        let highlight;
+        const drawHighlight = () => {
+          const geometry = hoveredFeature?.geometry || inspectedFeatures[highlightedIndex]?.geometry;
+          if ((!inspectionActive && !globalThis.__tileflowDevtoolsUI) || !geometry || !map.getContainer || !map.project) { if (highlight) highlight.style.display = "none"; return; }
+          if (!highlight) {
+            highlight = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            highlight.setAttribute("aria-hidden", "true");
+            highlight.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:hidden";
+            map.getContainer().append(highlight);
+          }
+          highlight.style.display = "";
+          highlight.replaceChildren();
+          let remaining = 3000;
+          const project = (coordinate) => {
+            if (--remaining < 0 || !Array.isArray(coordinate) || !coordinate.slice(0,2).every(Number.isFinite)) return;
+            const point = map.project(coordinate);
+            return Number.isFinite(point.x) && Number.isFinite(point.y) ? point : undefined;
+          };
+          const draw = (coordinates, closed = false) => {
+            if (!Array.isArray(coordinates)) return;
+            const points = coordinates.slice(0, Math.max(0,remaining)).map(project).filter(Boolean);
+            if (!points.length) return;
+            const shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            shape.setAttribute("d", points.map((point,index) => (index ? "L" : "M") + point.x + " " + point.y).join(" ") + (closed ? "Z" : ""));
+            shape.setAttribute("fill", closed ? "#1a73e822" : "none");
+            shape.setAttribute("stroke", "#1a73e8"); shape.setAttribute("stroke-width", "3");
+            shape.setAttribute("stroke-linejoin", "round"); highlight.append(shape);
+          };
+          const coordinates = geometry.coordinates;
+          const containsPoint = (ring) => {
+            const coordinate = hoveredCoordinate || inspectedCoordinate;
+            if (!coordinate) return false;
+            const [x,y] = coordinate;
+            let inside = false;
+            for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+              const [xi,yi] = ring[i], [xj,yj] = ring[j];
+              if ((yi > y) !== (yj > y) && x < (xj-xi)*(y-yi)/(yj-yi)+xi) inside = !inside;
+            }
+            return inside;
+          };
+          if (geometry.type === "Polygon") coordinates.forEach((ring) => draw(ring,true));
+          else if (geometry.type === "MultiPolygon") coordinates.filter((polygon) => containsPoint(polygon[0]) && !polygon.slice(1).some(containsPoint)).forEach((polygon) => polygon.forEach((ring) => draw(ring,true)));
+          else if (geometry.type === "LineString") draw(coordinates);
+          else if (geometry.type === "MultiLineString") coordinates.forEach((line) => draw(line));
+          else for (const coordinate of geometry.type === "MultiPoint" ? coordinates : [coordinates]) {
+            const point = project(coordinate); if (!point) continue;
+            const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            circle.setAttribute("cx", point.x); circle.setAttribute("cy", point.y); circle.setAttribute("r", "10");
+            circle.setAttribute("fill", "#1a73e822"); circle.setAttribute("stroke", "#1a73e8"); circle.setAttribute("stroke-width", "3"); highlight.append(circle);
+          }
+        };
+        side.highlightFeature = (index) => { highlightedIndex = index; drawHighlight(); };
+        side.getInspectedFeature = () => inspectedFeatures[highlightedIndex];
+        const handleKey = (event) => {
+          if (event.target.closest?.("input,select,textarea,[contenteditable]")) return;
+          if (event.key === "Escape" && inspectionEnabled) { event.preventDefault(); setInspectionEnabled(false, true); }
+          if (event.key.toLowerCase() === "i" && !event.metaKey && !event.ctrlKey && !event.altKey) { event.preventDefault(); setInspectionEnabled(!inspectionEnabled, true); }
+        };
         const targetOrigin = childWindow.location.origin;
         // The bridge is installed by the same-origin parent, so callbacks created here
         // belong to the parent realm. Dispatch directly with an explicit child source;
@@ -515,11 +1735,11 @@ function renderTileflowComparisonHtml(options) {
           });
         };
         const handleMoveStart = (event) => {
-          if (applyingRequestId === undefined && event?.originalEvent) userMovementActive = true;
+          if (applyingRequestId === undefined && (event?.originalEvent || event?.tileflowDevtools === true)) userMovementActive = true;
         };
         const handleMove = (event) => {
           if (applyingRequestId !== undefined) return;
-          if (event?.originalEvent) userMovementActive = true;
+          if (event?.originalEvent || event?.tileflowDevtools === true) userMovementActive = true;
           queuedUserMovement = queuedUserMovement || userMovementActive;
           if (movementFrame !== undefined) return;
           movementFrame = childWindow.requestAnimationFrame(() => {
@@ -535,7 +1755,7 @@ function renderTileflowComparisonHtml(options) {
             scheduleApplyingRelease(applyingRequestId);
             return;
           }
-          if (event?.originalEvent) userMovementActive = true;
+          if (event?.originalEvent || event?.tileflowDevtools === true) userMovementActive = true;
           if (movementFrame !== undefined) {
             childWindow.cancelAnimationFrame(movementFrame);
             movementFrame = undefined;
@@ -544,9 +1764,45 @@ function renderTileflowComparisonHtml(options) {
           postCamera("end", undefined, userMovementActive);
           userMovementActive = false;
         };
+        const clearHover = () => {
+          if (hoverFrame !== undefined) childWindow.cancelAnimationFrame(hoverFrame);
+          hoverFrame = undefined; hoveredFeature = undefined; hoveredCoordinate = undefined;
+          if (hoverHint) hoverHint.hidden = true;
+          drawHighlight();
+        };
+        side.hoverFeature = (index) => {
+          clearHover();
+          if (!inspectedFeatures[index]) return;
+          hoveredFeature = inspectedFeatures[index];
+          hoveredCoordinate = inspectedCoordinate;
+          drawHighlight();
+        };
+        const handleHover = (event) => {
+          if (!inspectionActive || !globalThis.__tileflowDevtoolsUI || hoverFrame !== undefined) return;
+          hoverFrame = childWindow.requestAnimationFrame(() => {
+            hoverFrame = undefined;
+            hoveredFeature = map.queryRenderedFeatures(event.point).find((feature) => !feature.layer.id.startsWith("__tileflow-devtools-"));
+            hoveredCoordinate = [event.lngLat.lng, event.lngLat.lat];
+            if (!hoverHint) {
+              hoverHint = document.createElement("div");
+              hoverHint.style.cssText = "position:absolute;z-index:6;pointer-events:none;padding:4px 7px;background:#fff;color:#202124;border:1px solid #dadce0;border-radius:3px;box-shadow:0 2px 5px #0003;font:11px/1.5 monospace;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
+              map.getContainer().append(hoverHint);
+            }
+            hoverHint.hidden = !hoveredFeature;
+            if (hoveredFeature) {
+              hoverHint.textContent = hoveredFeature.layer.id + " \xB7 " + hoveredFeature.geometry.type + (hoveredFeature.id === undefined ? "" : " #" + hoveredFeature.id);
+              hoverHint.style.left = Math.max(4,Math.min(event.point.x + 14,map.getContainer().clientWidth - 310)) + "px";
+              hoverHint.style.top = Math.max(4,Math.min(event.point.y + 14,map.getContainer().clientHeight - 32)) + "px";
+            }
+            drawHighlight();
+          });
+        };
         const handleClick = (event) => {
           if (!inspectionActive) return;
-          const features = map.queryRenderedFeatures(event.point).slice(0, 16).map(projectFeature);
+          clearHover();
+          inspectedCoordinate = [event.lngLat.lng, event.lngLat.lat];
+          inspectedFeatures = map.queryRenderedFeatures(event.point).filter((feature) => !feature.layer.id.startsWith("__tileflow-devtools-")).slice(0, 16);
+          const features = inspectedFeatures.map(projectFeature);
           postToParent({
             type: bridgeInspectionType,
             schemaVersion: bridgeSchemaVersion,
@@ -555,6 +1811,13 @@ function renderTileflowComparisonHtml(options) {
             features
           });
         };
+        side.inspectRenderedFeature = (feature, coordinate) => {
+          clearHover();
+          inspectedCoordinate = coordinate;
+          inspectedFeatures = [feature];
+          postToParent({type: bridgeInspectionType, schemaVersion: bridgeSchemaVersion,
+            side: side.id, coordinate, features: [projectFeature(feature)]});
+        };
         const handleError = (event) => {
           postToParent({
             type: bridgeRuntimeErrorType,
@@ -569,7 +1832,9 @@ function renderTileflowComparisonHtml(options) {
           if (!message || message.schemaVersion !== bridgeSchemaVersion) return;
           if (message.type === bridgeSetInspectionType && typeof message.enabled === "boolean") {
             inspectionActive = message.enabled;
+            if (!inspectionActive) clearHover();
             map.getCanvas().style.cursor = inspectionActive ? "crosshair" : "";
+            drawHighlight();
             return;
           }
           if (message.type !== bridgeSetCameraType || !validCamera(message.camera)) return;
@@ -622,10 +1887,15 @@ function renderTileflowComparisonHtml(options) {
             });
           });
         };
+        map.on("move", drawHighlight);
+        map.on("resize", drawHighlight);
+        childWindow.addEventListener("keydown", handleKey);
         map.on("movestart", handleMoveStart);
         map.on("move", handleMove);
         map.on("moveend", handleMoveEnd);
         map.on("click", handleClick);
+        map.on("mousemove", handleHover);
+        map.on("mouseout", clearHover);
         map.on("error", handleError);
         childWindow.addEventListener("message", handleCommand);
         if (map.loaded?.()) announceReady();
@@ -638,10 +1908,17 @@ function renderTileflowComparisonHtml(options) {
           if (movementFrame !== undefined) childWindow.cancelAnimationFrame(movementFrame);
           cancelApplyingRelease();
           clearTimeout(readyTimer);
+          clearHover(); hoverHint?.remove();
+          highlight?.remove(); side.highlightFeature = undefined; side.hoverFeature = undefined;
+          side.getInspectedFeature = undefined; side.inspectRenderedFeature = undefined;
+          map.off("move", drawHighlight); map.off("resize", drawHighlight);
+          childWindow.removeEventListener("keydown", handleKey);
           map.off("movestart", handleMoveStart);
           map.off("move", handleMove);
           map.off("moveend", handleMoveEnd);
           map.off("click", handleClick);
+          map.off("mousemove", handleHover);
+          map.off("mouseout", clearHover);
           map.off("error", handleError);
           map.off("load", announceReady);
           map.off("idle", announceReady);
@@ -657,10 +1934,11 @@ function renderTileflowComparisonHtml(options) {
         if (message.type === bridgeReadyType && validCamera(message.camera)) {
           side.bridgeReady = true;
           side.camera = message.camera;
-          renderSideStatus(side);
           maybeEstablishInitialCamera();
           sendInspectionState(side);
           void loadSidecar(side);
+          if (options.workbenchUrl) void refreshWorkbench();
+          if (!controlsPanel.hidden) void loadMapControls();
           updateDocumentReadiness();
           return;
         }
@@ -709,7 +1987,7 @@ function renderTileflowComparisonHtml(options) {
       }
 
       function sendCamera(side, camera) {
-        if (!side.bridgeReady || !camera || !side.frame.contentWindow) return;
+        if (!side?.bridgeReady || !camera || !side.frame.contentWindow) return;
         if (side.camera && camerasEqual(side.camera, camera)) return;
         const requestId = ++requestSequence;
         side.lastCameraRequestId = requestId;
@@ -759,6 +2037,16 @@ function renderTileflowComparisonHtml(options) {
           .catch(() => undefined);
         const events = new EventSource(side.definition.eventsUrl);
         side.eventSource = events;
+        let connected = false, disconnected = false;
+        events.addEventListener("open", () => {
+          if (connected && disconnected) {
+            side.artifactGeneration = -1;
+            side.latestArtifactStatus = undefined;
+            side.frame.contentWindow?.location.reload();
+          }
+          connected = true; disconnected = false;
+        });
+        events.addEventListener("error", () => { if (connected) disconnected = true; });
         for (const name of ["building", "ready", "invalid"]) {
           events.addEventListener(name, (event) => {
             try { applyArtifactStatus(side, JSON.parse(event.data)); } catch {}
@@ -781,7 +2069,8 @@ function renderTileflowComparisonHtml(options) {
           ? status.lastGoodGeneration
           : undefined;
         side.artifactDiagnostic = status.diagnostics?.[0]?.message;
-        renderSideStatus(side);
+        side.latestArtifactStatus = status;
+        side.previewStatusReceiver?.(status);
         maybeEstablishInitialCamera();
         updateDocumentReadiness();
       }
@@ -800,31 +2089,26 @@ function renderTileflowComparisonHtml(options) {
         stage.dataset.tileflowState = value;
       }
 
-      function renderSideStatus(side) {
-        const diagnostic = side.artifactDiagnostic;
-        const message = side.runtimeFailed
-          ? "Runtime error: " + (side.runtimeErrors.at(-1) || "Preview runtime failed")
-          : side.artifactStatus === "invalid"
-            ? "Invalid generation; showing last valid preview" + (diagnostic ? ": " + diagnostic : "")
-            : "Generation " + String(Math.max(0, side.artifactGeneration)) + " \xB7 " + side.artifactStatus;
-        side.stateElement.dataset.status = side.runtimeFailed ? "error" : side.artifactStatus;
-        side.stateElement.title = message;
-        side.stateElement.setAttribute("aria-label", side.definition.label + ": " + message);
-        side.statusTextElement.textContent = side.runtimeFailed ? "Runtime error" : side.artifactStatus;
-      }
 
       async function loadSidecar(side) {
         if (!side.definition.sidecarUrl) return undefined;
+        const key = currentSidecarUrl(side);
+        if (side.sidecarKey !== key) {
+          side.sidecarAbort?.abort();
+          side.sidecar = undefined;
+          side.sidecarPromise = undefined;
+          side.sidecarKey = key;
+        }
         if (side.sidecar !== undefined) return side.sidecar;
         if (side.sidecarPromise) return side.sidecarPromise;
         const epoch = side.loadEpoch;
         const controller = new AbortController();
         side.sidecarAbort?.abort();
         side.sidecarAbort = controller;
-        const promise = fetch(currentSidecarUrl(side), {cache: "no-store", signal: controller.signal})
+        const promise = fetch(key, {cache: "no-store", signal: controller.signal})
           .then((response) => response.ok ? response.json() : Promise.reject(new Error("Compiler sidecar unavailable")))
           .then((document) => {
-            if (side.loadEpoch !== epoch || controller.signal.aborted) return undefined;
+            if (side.loadEpoch !== epoch || side.sidecarKey !== key || controller.signal.aborted) return undefined;
             side.sidecar = document;
             if (selectedInspection?.side === side) renderInspection();
             return document;
@@ -862,6 +2146,9 @@ function renderTileflowComparisonHtml(options) {
           return configured.href;
         }
         configured.pathname = configured.pathname.slice(0, markerIndex) + marker + map + "/" + theme + ".json";
+        const controls = livePreviewUrl(side).searchParams.get("controls");
+        if (controls) configured.searchParams.set("controls", controls);
+        else configured.searchParams.delete("controls");
         return configured.href;
       }
 
@@ -870,6 +2157,7 @@ function renderTileflowComparisonHtml(options) {
         const side = selectedInspection.side;
         const feature = selectedInspection.features[selectedInspection.featureIndex];
         inspectionOutput.replaceChildren();
+        for (const entry of Object.values(states)) entry.highlightFeature?.(entry === side ? selectedInspection.featureIndex : -1);
         if (!feature) {
           inspectionOutput.className = "empty";
           inspectionOutput.textContent = side.definition.label + ": no rendered feature at this point.";
@@ -877,6 +2165,7 @@ function renderTileflowComparisonHtml(options) {
           curveOutput.className = "empty";
           curveOutput.textContent = "Paint and layout values appear here.";
           sidecarOutput.textContent = "No layer selected.";
+          globalThis.__tileflowDevtoolsUI?.selectionChanged();
           return;
         }
         inspectionOutput.className = "";
@@ -885,14 +2174,14 @@ function renderTileflowComparisonHtml(options) {
         title.textContent = side.definition.label + " \xB7 " + feature.layerId;
         const pickerLabel = document.createElement("label");
         pickerLabel.className = "feature-picker";
-        pickerLabel.append(document.createTextNode("Rendered feature (" + selectedInspection.features.length + ")"));
+        pickerLabel.append(document.createTextNode("Elements at this point (" + selectedInspection.features.length + ")"));
         const picker = document.createElement("select");
         picker.setAttribute("aria-label", "Rendered feature at inspected point");
         selectedInspection.features.forEach((candidate, index) => {
           const option = document.createElement("option");
           option.value = String(index);
-          option.textContent = String(index + 1) + ". " + candidate.layerId + " \xB7 " + candidate.geometryType +
-            (candidate.id === null ? "" : " \xB7 " + String(candidate.id));
+          option.textContent = options.workbenchUrl ? featureDisplayName(candidate) + " \xB7 " + candidate.geometryType : String(index + 1) + ". " + candidate.layerId + " \xB7 " + candidate.geometryType + (candidate.id === null ? "" : " \xB7 " + String(candidate.id));
+          option.title = candidate.layerId;
           picker.append(option);
         });
         picker.value = String(selectedInspection.featureIndex);
@@ -915,13 +2204,15 @@ function renderTileflowComparisonHtml(options) {
             filter: layer.filter
           } : undefined
         });
-        inspectionOutput.append(title, pickerLabel, summary);
+        if (options.workbenchUrl) renderFeatureSummary(side, feature, layer, pickerLabel, summary);
+        else inspectionOutput.append(title, pickerLabel, summary);
         populateCurveProperties(layer);
         const sidecarLayer = findSidecarLayer(side.sidecar, feature.layerId);
         sidecarOutput.textContent = sidecarLayer
           ? boundedJson(sidecarLayerWithSemanticAttribution(sidecarLayer))
           : "No compiler sidecar entry for this layer.";
         if (side.sidecar === undefined && !side.sidecarPromise) void loadSidecar(side);
+        globalThis.__tileflowDevtoolsUI?.selectionChanged();
       }
 
       function populateCurveProperties(layer) {
@@ -1199,103 +2490,14 @@ function renderTileflowComparisonHtml(options) {
           value.x + value.width <= image.naturalWidth && value.y + value.height <= image.naturalHeight;
       }
 
-      async function copyScene(commandOnly) {
-        const name = sceneNameInput.value;
-        if (!validPortableName(name)) {
-          setFeedback("Use a portable kebab-case scene name.");
-          return;
-        }
-        const side = states[activeSideId];
-        const camera = side.camera || canonicalCamera;
-        if (!camera) {
-          setFeedback("Wait for the maps to become ready.");
-          return;
-        }
-        const style = side.map?.getStyle?.();
-        const map = style?.metadata?.["tileflow:map"];
-        const theme = style?.metadata?.["tileflow:theme"];
-        if (!validPortableName(map) || !validConcreteThemeName(theme)) {
-          setFeedback("The active preview does not expose a concrete map and theme.");
-          return;
-        }
-        const dpr = Number(sceneDprInput.value) === 2 ? 2 : 1;
-        const viewport = readMapViewport(side, dpr);
-        const {width, height} = viewport;
-        if (commandOnly) {
-          const command = [
-            "tileflow capture",
-            ...(side.definition.captureConfig
-              ? ["--config " + quoteCliArgument(side.definition.captureConfig)]
-              : []),
-            "--map " + quoteCliArgument(map),
-            "--theme " + quoteCliArgument(theme),
-            "--center=" + formatNumber(camera.center[0]) + "," + formatNumber(camera.center[1]),
-            "--zoom=" + formatNumber(camera.zoom),
-            "--bearing=" + formatNumber(camera.bearing),
-            "--pitch=" + formatNumber(camera.pitch),
-            "--width=" + width,
-            "--height=" + height,
-            "--dpr=" + dpr,
-            "--out=" + quoteCliArgument(name + ".png")
-          ].join(" ");
-          if (!await copyText(command)) {
-            setFeedback("Clipboard access is unavailable.");
-            return;
-          }
-          setFeedback("Exploratory capture command copied.");
-          return;
-        }
-        const definition = {
-          theme,
-          camera: {
-            type: "center",
-            center: [roundNumber(camera.center[0]), roundNumber(camera.center[1])],
-            zoom: roundNumber(camera.zoom),
-            bearing: roundNumber(camera.bearing),
-            pitch: roundNumber(camera.pitch)
-          },
-          viewport: {width, height, dpr},
-          target: {kind: "map"}
-        };
-        const serialized = JSON.stringify(definition, null, 2).replace(/^/gm, "  ");
-        if (!await copyText("'" + name + "': " + serialized.trimStart() + ",")) {
-          setFeedback("Clipboard access is unavailable.");
-          return;
-        }
-        setFeedback("Scene entry copied.");
-      }
 
-      function readMapViewport(side, dpr) {
-        const container = side.map?.getContainer?.();
-        const canvas = side.map?.getCanvas?.();
-        const maximum = dpr === 2 ? 2048 : 4096;
-        const width = boundedInteger(container?.clientWidth || canvas?.clientWidth, 64, maximum, 1280);
-        const height = boundedInteger(container?.clientHeight || canvas?.clientHeight, 64, maximum, 800);
-        return {width, height};
-      }
 
-      async function copyText(value) {
-        try {
-          await navigator.clipboard.writeText(value);
-          return true;
-        } catch {
-          const textarea = document.createElement("textarea");
-          textarea.value = value;
-          textarea.style.position = "fixed";
-          textarea.style.opacity = "0";
-          document.body.append(textarea);
-          textarea.select();
-          const copied = document.execCommand("copy");
-          textarea.remove();
-          return copied;
-        }
-      }
 
       function writeUrlState() {
         const url = new URL(location.href);
         url.searchParams.set("mode", stage.dataset.mode);
-        url.searchParams.set("split", String(Math.round(Number(splitInput.value))));
-        url.searchParams.set("alpha", String(Math.round(Number(alphaInput.value))));
+        url.searchParams.set("split", String(Math.round(initialUi.split)));
+        url.searchParams.set("alpha", String(Math.round(initialUi.alpha)));
         url.searchParams.set("driver", stage.dataset.driver);
         if (canonicalCamera) {
           const values = {
@@ -1310,9 +2512,9 @@ function renderTileflowComparisonHtml(options) {
       function readUiFromUrl() {
         const query = new URL(location.href).searchParams;
         const modeValue = singleQueryValue(query, "mode");
-        const mode = ["side-by-side", "split", "overlay", "blink"].includes(modeValue) ? modeValue : undefined;
+        const mode = ["single", "side-by-side", "split", "overlay", "blink"].includes(modeValue) ? modeValue : undefined;
         const driver = singleQueryValue(query, "driver");
-        selectSide(driver === "right" ? "right" : "left", false);
+        selectSide(driver === "right" && options.right ? "right" : "left", false);
         const split = singleQueryValue(query, "split");
         const alpha = singleQueryValue(query, "alpha");
         return {
@@ -1414,7 +2616,6 @@ function renderTileflowComparisonHtml(options) {
         if (!side.runtimeErrors.includes(message)) side.runtimeErrors.push(message);
         side.runtimeErrors = side.runtimeErrors.slice(-16);
         side.runtimeFailed = true;
-        renderSideStatus(side);
         updateDocumentReadiness();
       }
 
@@ -1482,8 +2683,32 @@ function renderTileflowComparisonHtml(options) {
       function roundNumber(value) { return Number(value.toFixed(6)); }
       function formatNumber(value) { return String(roundNumber(value)); }
       function wrapLongitude(value) { return ((value + 180) % 360 + 360) % 360 - 180; }
-      function setFeedback(value) { feedback.textContent = value; setTimeout(() => { if (feedback.textContent === value) feedback.textContent = ""; }, 2500); }
+      function setFeedback(value) { globalThis.__tileflowDevtoolsUI?.feedback(value); }
+      ${controlsClient}
+      ${workbenchClient}
+      globalThis.__tileflowDevtoolsHost = {
+        schemaVersion: 1,
+        subscribePreviewStatus: (child, receive) => {
+          const side = Object.values(states).find((entry) => entry.frame.contentWindow === child);
+          if (!side) return undefined;
+          side.previewStatusReceiver = receive;
+          if (side.latestArtifactStatus) receive(side.latestArtifactStatus);
+          return () => { if (side.previewStatusReceiver === receive) side.previewStatusReceiver = undefined; };
+        },
+        sides: () => Object.values(states), active: () => states[activeSideId],
+        selection: () => selectedInspection,
+        clearFeatureSelection: () => {
+          selectedInspection = undefined;
+          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(); } },
+        inspect: (enabled) => setInspectionEnabled(enabled), inspecting: () => inspectionEnabled,
+        controls: () => loadMapControls(),
+        sprites: () => loadSprites(states[activeSideId])
+      };
     </script>
+    <script type="module"${nonceAttribute} src="${fontBasePath}/__workbench-runtime/devtools.js"></script>
   </body>
 </html>`;
 }
@@ -1515,15 +2740,56 @@ var tileflowComparisonSchemaVersion = 1;
 function createTileflowComparisonRequestHandler(options) {
   const comparisonBasePath = normalizeTileflowBasePath(options.basePath);
   const left = normalizeSide(options.left, "left", comparisonBasePath);
-  const right = normalizeSide(options.right, "right", comparisonBasePath);
-  assertDisjointSideRoutes(left.basePath, right.basePath);
-  const title = normalizeLabel(options.title ?? "Tileflow comparison", "title");
-  const initialMode = options.initialMode ?? "side-by-side";
+  const right = options.right ? normalizeSide(options.right, "right", comparisonBasePath) : void 0;
+  if (right) assertDisjointSideRoutes(left.basePath, right.basePath);
+  const workbenchUrl = options.workbench ? normalizeTileflowBasePath(options.workbench.url) : void 0;
+  if (workbenchUrl !== void 0) {
+    if (!workbenchUrl || comparisonBasePath && !matchesBasePath(workbenchUrl, comparisonBasePath))
+      throw new TypeError(
+        "Map DevTools API must own a non-root route inside the comparison base path."
+      );
+    assertDisjointSideRoutes(workbenchUrl, left.basePath);
+    if (right) assertDisjointSideRoutes(workbenchUrl, right.basePath);
+    assertDisjointSideRoutes(workbenchUrl, `${comparisonBasePath}/__workbench-fonts`);
+    assertDisjointSideRoutes(workbenchUrl, `${comparisonBasePath}/__workbench-runtime`);
+  }
+  const title = normalizeLabel(options.title ?? "Tileflow Map DevTools", "title");
+  const initialMode = right ? options.initialMode ?? "side-by-side" : "single";
   return async function handleTileflowComparisonRequest(request) {
     const url = new URL(request.url);
     const pathname = url.pathname;
+    if (pathname === `${comparisonBasePath}/__workbench-runtime/devtools.js`) {
+      if (request.method !== "GET" && request.method !== "HEAD")
+        return jsonResponse({ error: "Method not allowed" }, 405);
+      const source = await readFile(
+        new URL("../dist/devtools-browser.js", import.meta.url),
+        "utf8"
+      );
+      return new Response(request.method === "HEAD" ? null : source, {
+        headers: {
+          "Content-Type": "text/javascript; charset=utf-8",
+          "Cache-Control": "no-store",
+          "X-Content-Type-Options": "nosniff"
+        }
+      });
+    }
+    const font = pathname.slice(`${comparisonBasePath}/__workbench-fonts/`.length);
+    if (pathname.startsWith(`${comparisonBasePath}/__workbench-fonts/`) && ["mona-sans.woff2", "hubot-sans.woff2", "inter.woff2", "jetbrains-mono.woff2"].includes(font)) {
+      if (request.method !== "GET" && request.method !== "HEAD")
+        return jsonResponse({ error: "Method not allowed" }, 405);
+      const bytes = await readFile(new URL(`../ui-fonts/${font}`, import.meta.url));
+      return new Response(request.method === "HEAD" ? null : bytes, {
+        headers: {
+          "Content-Type": "font/woff2",
+          "Cache-Control": "public, max-age=3600",
+          "X-Content-Type-Options": "nosniff"
+        }
+      });
+    }
+    if (options.workbench && workbenchUrl && matchesBasePath(pathname, workbenchUrl))
+      return await options.workbench.handle(request);
     if (matchesBasePath(pathname, left.basePath)) return await left.handler(request);
-    if (matchesBasePath(pathname, right.basePath)) return await right.handler(request);
+    if (right && matchesBasePath(pathname, right.basePath)) return await right.handler(request);
     if (isComparisonRoot(pathname, comparisonBasePath)) {
       if (request.method !== "GET" && request.method !== "HEAD") {
         return jsonResponse({ error: "Method not allowed" }, 405);
@@ -1534,9 +2800,10 @@ function createTileflowComparisonRequestHandler(options) {
         cspNonce,
         initialMode,
         left: publicSide(left),
-        right: publicSide(right),
+        ...right ? { right: publicSide(right) } : {},
         schemaVersion: tileflowComparisonSchemaVersion,
-        title
+        title,
+        ...workbenchUrl ? { workbenchUrl } : {}
       });
       return new Response(request.method === "HEAD" ? null : html, {
         headers: {
@@ -1572,6 +2839,7 @@ function normalizeSide(side, name, comparisonBasePath) {
   if (!basePath) {
     throw new TypeError(`Tileflow comparison ${name} basePath must not own the server root.`);
   }
+  assertDisjointSideRoutes(basePath, `${comparisonBasePath}/__workbench-runtime`);
   if (comparisonBasePath && !matchesBasePath(basePath, comparisonBasePath)) {
     throw new TypeError(
       `Tileflow comparison ${name} basePath must be inside ${comparisonBasePath}.`
@@ -1724,6 +2992,8 @@ function createTileflowDevRequestHandler(options = {}) {
   const lineBackgroundGlyphs = createTileflowLineBackgroundGlyphResponder({ cwd });
   let closed = false;
   let lastOrigin;
+  let controlsGeneration;
+  const controlsCache = /* @__PURE__ */ new Map();
   const loadOwnedSession = (origin) => {
     lastOrigin = origin;
     ownedSessionPromise ??= createTileflowArtifactSession({
@@ -1755,13 +3025,30 @@ function createTileflowDevRequestHandler(options = {}) {
         return options.session ? eventStreamResponse(options.session) : jsonResponse2({ error: "Live events require a development session." }, 404);
       }
       if (path.startsWith("/__runtime/")) {
-        const runtimeResponse = (await import("./preview-assets-MVUJJ5XR.js")).getTileflowPreviewRuntimeResponse(path);
+        const runtimeResponse = (await import("./preview-assets-KGUICQHG.js")).getTileflowPreviewRuntimeResponse(path);
         if (runtimeResponse) return runtimeResponse;
       }
       const session = options.session ?? await loadOwnedSession(url.origin);
       acquisition = session.acquireArtifacts();
       const artifacts = acquisition?.artifacts;
       const state = session.getState();
+      const controls = url.searchParams.get("controls");
+      if (controls !== null) parsePreviewControls(controls);
+      const controlled = (map, theme) => {
+        if (!artifacts || controls === null) return void 0;
+        if (controlsGeneration !== acquisition?.generation) {
+          controlsCache.clear();
+          controlsGeneration = acquisition?.generation;
+        }
+        const key = JSON.stringify([map, theme, controls]);
+        let value = controlsCache.get(key);
+        if (!value) {
+          value = compilePreviewControls(artifacts, map, theme, controls, apiBaseUrl);
+          if (controlsCache.size >= 8) controlsCache.delete(controlsCache.keys().next().value);
+          controlsCache.set(key, value);
+        }
+        return value;
+      };
       if (path === "/__status") {
         return jsonResponse2(createTileflowArtifactStatus(state));
       }
@@ -1769,20 +3056,24 @@ function createTileflowDevRequestHandler(options = {}) {
         const { renderTileflowPreviewHtml, resolveTileflowPreview } = await import("./preview.js");
         const requestedMaps = url.searchParams.getAll("map");
         const requestedThemes = url.searchParams.getAll("theme");
+        const requestedScenes = url.searchParams.getAll("scene");
+        if (requestedScenes.length > 1) {
+          return jsonResponse2({ error: "Tileflow scene query must appear at most once." }, 400);
+        }
         if (requestedMaps.length > 1) {
           return jsonResponse2({ error: "Tileflow map query must appear at most once." }, 400);
         }
         if (requestedThemes.length > 1) {
           return jsonResponse2({ error: "Tileflow theme query must appear at most once." }, 400);
         }
-        const requestedMap = requestedMaps.length === 1 ? requestedMaps[0] : options.map;
-        const requestedTheme = requestedThemes.length === 1 ? requestedThemes[0] : options.theme;
+        const requestedMap = requestedMaps[0] ?? (requestedScenes.length ? void 0 : options.map);
+        const requestedTheme = requestedThemes[0] ?? (requestedScenes.length ? void 0 : options.theme);
         const preview = artifacts ? resolveTileflowPreview(artifacts.project, {
           map: requestedMap,
-          scene: options.scene,
+          scene: requestedScenes[0] ?? (requestedMaps.length ? void 0 : options.scene),
           theme: requestedTheme
         }) : void 0;
-        const previewStyle = preview ? artifacts?.styles[preview.mapName]?.[preview.themeName] : void 0;
+        const previewStyle = preview ? controlled(preview.mapName, preview.themeName)?.style ?? artifacts?.styles[preview.mapName]?.[preview.themeName] : void 0;
         const isSemanticPreview = preview !== void 0 && previewStyle?.metadata?.["tileflow:compiler"] === "tileflow-semantic";
         const fontFaces = previewStyle ? getTileflowStyleFontFaces(previewStyle) : [];
         return htmlResponse(
@@ -1791,11 +3082,23 @@ function createTileflowDevRequestHandler(options = {}) {
             basePath,
             createTileflowArtifactStatus(state),
             isSemanticPreview,
-            fontFaces
+            fontFaces,
+            options.fitViewport,
+            controls ?? void 0
           )
         );
       }
       if (!artifacts) return unavailableArtifactsResponse(state);
+      if (path === "/__controls") {
+        return compactJsonResponse({
+          ...describePreviewControls(
+            artifacts,
+            url.searchParams.get("map") ?? "",
+            url.searchParams.get("theme") ?? ""
+          ),
+          generation: acquisition?.generation
+        });
+      }
       if (path.startsWith(`/${tileflowLineBackgroundGlyphRoute}/`)) {
         const glyphRequest = parseTileflowLineBackgroundGlyphPath(path);
         const upstream = glyphRequest ? artifacts.lineBackgroundGlyphs?.[glyphRequest.mapName] : void 0;
@@ -1824,7 +3127,7 @@ function createTileflowDevRequestHandler(options = {}) {
       }
       if (path.startsWith("/__inspection/")) {
         const selection = getTileflowStyleInspectionSelection(path);
-        const inspection = selection ? artifacts.styleInspections?.[selection.mapName]?.[selection.themeName] : void 0;
+        const inspection = selection ? controlled(selection.mapName, selection.themeName)?.inspection ?? artifacts.styleInspections?.[selection.mapName]?.[selection.themeName] : void 0;
         if (!selection || !inspection) {
           return jsonResponse2({ error: "Compiler inspection is unavailable." }, 404);
         }
@@ -1832,7 +3135,7 @@ function createTileflowDevRequestHandler(options = {}) {
       }
       if (path.startsWith("/styles/")) {
         const selection = getTileflowStyleSelection(path);
-        const style = selection ? artifacts.styles[selection.mapName]?.[selection.themeName] : void 0;
+        const style = selection ? controlled(selection.mapName, selection.themeName)?.style ?? artifacts.styles[selection.mapName]?.[selection.themeName] : void 0;
         if (!selection || !style) {
           return jsonResponse2({ error: "Unknown map theme style." }, 404);
         }
@@ -1854,9 +3157,23 @@ function createTileflowDevRequestHandler(options = {}) {
         }
         return assetResponse(asset);
       }
+      if (path.startsWith("/models/")) {
+        const assetName = path.replace(/^\/+/, "");
+        const asset = artifacts.assets.find((candidate) => candidate.fileName === assetName);
+        if (!asset) {
+          return jsonResponse2({ error: `Unknown model asset: ${assetName}` }, 404);
+        }
+        return assetResponse(asset);
+      }
       return jsonResponse2({ error: "Not found" }, 404);
     } catch (error) {
       options.onError?.(error);
+      if (url.searchParams.has("controls") || path === "/__controls") {
+        return jsonResponse2(
+          { error: error instanceof Error ? error.message : "Invalid map controls." },
+          400
+        );
+      }
       return tileflowErrorResponse(error);
     } finally {
       await acquisition?.release();
@@ -2004,7 +3321,7 @@ function getRequestPathname(url) {
   }
 }
 function isOwnedTileflowRequestPath(path) {
-  return path === "/" || path === "/build-manifest.json" || path === "/manifest.json" || path === "/__events" || path === "/__status" || getTileflowStyleInspectionSelection(path) !== void 0 || path.startsWith("/generations/") || path.startsWith("/icons/") || path.startsWith("/tilesets/") || getTileflowStyleSelection(path) !== void 0 || path.startsWith("/fonts/") || path.startsWith(`/${tileflowLineBackgroundGlyphRoute}/`) || path.startsWith("/__runtime/");
+  return path === "/" || path === "/build-manifest.json" || path === "/manifest.json" || path === "/__events" || path === "/__status" || path === "/__controls" || getTileflowStyleInspectionSelection(path) !== void 0 || path.startsWith("/generations/") || path.startsWith("/icons/") || path.startsWith("/tilesets/") || getTileflowStyleSelection(path) !== void 0 || path.startsWith("/fonts/") || path.startsWith("/models/") || path.startsWith(`/${tileflowLineBackgroundGlyphRoute}/`) || path.startsWith("/__runtime/");
 }
 function tileflowErrorResponse(error) {
   if (error instanceof Error && "code" in error && error.code === "PREVIEW_SELECTION_INVALID") {