@tileflow/dev 0.1.0-alpha.4 → 0.1.0-alpha.40

package/dist/server.js

@@ -0,0 +1,3657 @@
+import {
+  createTileflowArtifactDiagnostics,
+  createTileflowArtifactSession,
+  createTileflowLineBackgroundGlyphResponder,
+  parseTileflowLineBackgroundGlyphPath,
+  tileflowArtifactSessionSchemaVersion,
+  tileflowLineBackgroundGlyphRoute
+} from "./chunk-AVJMTXW5.js";
+import {
+  getTileflowAssetBasePath,
+  getTileflowAssetFileName,
+  joinTileflowPublicUrl,
+  normalizeTileflowBasePath,
+  resolveTileflowArtifactPublicUrls
+} from "./chunk-FOMTSCOP.js";
+import "./chunk-C4VPHZ3F.js";
+import "./chunk-RTU7TD4M.js";
+import {
+  TileflowStyleValidationError
+} from "./chunk-KDFTE4Q5.js";
+import {
+  TileflowValidationError,
+  defaultTileflowApiUrl,
+  defaultTileflowConfigPath
+} from "./chunk-AQUGMUZW.js";
+import "./chunk-D4OE4ITL.js";
+import "./chunk-ONYQNLNA.js";
+
+// src/server.ts
+import { open } from "fs/promises";
+import {
+  getTileflowStyleFontFaces,
+  tileflowMapIdSchema,
+  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/inspector/card-styles.ts
+var cardStyles = `
+.inspector-ready .inspector-shell {
+  --inspector-page:color-mix(in srgb,var(--surface) 80%,var(--border));
+  --inspector-card-heading:color-mix(in srgb,var(--paper) 55%,var(--surface));
+  --inspector-content-gap:12px;
+}
+.inspector-ready .inspector-shell :is(.inspector-card-page,.inspector-layer-content,.inspector-tile-content,.inspector-diagnostics-list) {
+  padding:14px; background:var(--inspector-page);
+}
+.inspector-ready .inspector-shell :is(.inspector-card,.inspector-layer-evidence,.inspector-layer-neighbors,.inspector-layer-section,.inspector-layer-origin,.inspector-layer-samples,.inspector-tile-content > .inspector-kv,.inspector-tile-feature,.inspector-diagnostic,.inspector-diagnostics-empty) {
+  min-width:0; margin:0 0 var(--inspector-content-gap); border:1px solid var(--border); border-radius:10px; background:var(--paper);
+}
+.inspector-ready .inspector-shell .inspector-card { padding:0; overflow:hidden; }
+.inspector-ready .inspector-shell :is(.inspector-card-page,.inspector-layer-content,.inspector-tile-content,.inspector-diagnostics-list) > :last-child { margin-bottom:0; }
+.inspector-ready .inspector-shell :is(.inspector-card > .inspector-section-heading,.inspector-card > .controls-section-title,.inspector-layer-neighbors > strong) {
+  display:block; margin:0; padding:10px 14px; border:0; border-bottom:1px solid var(--border); background:var(--inspector-card-heading);
+  color:var(--ink); font:600 12px/1.4 var(--ui); letter-spacing:0; text-transform:none;
+}
+.inspector-ready .inspector-shell .inspector-card-table { overflow:auto; }
+.inspector-ready .inspector-shell .inspector-card-table :is(.inspector-table,.inspector-layer-rules) { margin:0; }
+.inspector-ready .inspector-shell .inspector-card-table th { background:var(--inspector-card-heading); padding:9px 14px; text-transform:none; letter-spacing:0; }
+.inspector-ready .inspector-shell .inspector-card-table td { padding:9px 14px; height:36px; border-bottom-color:var(--border); }
+.inspector-ready .inspector-shell :is(.inspector-card-table,.inspector-layer-samples) tr:last-child td { border-bottom:0; }
+.inspector-ready .inspector-shell .inspector-subtabs { padding-inline:14px; background:var(--paper); }
+
+/* Map: each existing section is one card, with the enabled module fields kept inline. */
+.inspector-ready .inspector-shell .inspector-scene-content { max-width:none; background:var(--inspector-page); }
+.inspector-ready .inspector-shell .map-controls { padding:14px!important; background:var(--inspector-page); }
+.inspector-ready .inspector-shell .controls-grid { display:block; border:0; padding:0; }
+.inspector-ready .inspector-shell :is(.controls-selection,.controls-runtime) { border:1px solid var(--border); padding:0; }
+.inspector-ready .inspector-shell .controls-selection[hidden] { display:none; }
+.inspector-ready .inspector-shell .controls-section-title { margin:0; }
+.inspector-ready .inspector-shell .map-controls .control-field {
+  grid-template-columns:minmax(120px,180px) minmax(0,1fr); min-height:44px; padding:9px 18px; gap:16px;
+}
+.inspector-ready .inspector-shell .map-controls .control-field.inspector-palette-field { grid-template-columns:minmax(120px,180px) minmax(0,1fr); }
+.inspector-ready .inspector-shell :is(.controls-selection,.controls-runtime) > .control-field:last-child { border-bottom:0; }
+.inspector-ready .inspector-shell .control-module { background:transparent; }
+.inspector-ready .inspector-shell .control-module:last-child { border-bottom:0; }
+.inspector-ready .inspector-shell .control-module-header { min-height:44px; padding:10px 18px; }
+.inspector-ready .inspector-shell .control-module-header label { gap:10px; }
+.inspector-ready .inspector-shell .control-module-header input { margin-right:0; }
+.inspector-ready .inspector-shell .control-module fieldset { padding:0; border-top:1px solid var(--border); background:color-mix(in srgb,var(--paper) 65%,var(--surface)); }
+.inspector-ready .inspector-shell .control-module .control-field { padding-left:54px; border-bottom:1px solid var(--border); }
+.inspector-ready .inspector-shell .control-module .control-field:last-child { border-bottom:0; }
+.inspector-ready .inspector-shell .map-controls :is(select,input[type=number]) { border-radius:5px; }
+.inspector-ready .inspector-shell :is(.controls-segments,.inspector-palettes button) { border-radius:5px; }
+.inspector-ready .inspector-shell .inspector-palettes { gap:6px; flex-wrap:wrap; }
+.inspector-ready .inspector-shell .inspector-palettes button { height:auto; min-height:30px; padding:4px 8px; }
+
+/* Layers: preserve the list and tabs, frame each detail block as a card. */
+.inspector-ready .inspector-shell .inspector-layer-content { container-type:inline-size; }
+.inspector-ready .inspector-shell :is(.inspector-layer-evidence,.inspector-layer-neighbors) { padding:0; overflow:hidden; }
+.inspector-ready .inspector-shell .inspector-layer-evidence-row { padding:10px 14px; grid-template-columns:16px 110px minmax(0,1fr); }
+.inspector-ready .inspector-shell .inspector-layer-evidence-row:last-child { border-bottom:0; }
+.inspector-ready .inspector-shell .inspector-layer-neighbors > div { margin:0; padding:9px 14px; border-bottom:1px solid var(--border); }
+.inspector-ready .inspector-shell .inspector-layer-neighbors > div:last-child { border-bottom:0; }
+.inspector-ready .inspector-shell :is(.inspector-layer-section,.inspector-layer-origin) { padding:12px 14px; }
+.inspector-ready .inspector-shell .inspector-layer-section h4 { color:var(--ink); font:600 12px/1.4 var(--ui); text-transform:none; letter-spacing:0; }
+.inspector-ready .inspector-shell .inspector-layer-content > .inspector-tools { margin-bottom:12px; padding:0 0 8px; border:0; background:transparent; }
+.inspector-ready .inspector-shell .inspector-layer-content > .inspector-note { padding:0 2px 12px; }
+.inspector-ready .inspector-shell .inspector-layer-samples { max-height:240px; }
+.inspector-ready .inspector-shell .inspector-layer-samples td { padding:8px 12px; }
+.inspector-ready .inspector-shell .inspector-layer-group-title { height:30px; min-height:30px; background:var(--inspector-card-heading)!important; }
+.inspector-ready .inspector-shell .inspector-layer-group-title strong { text-transform:capitalize; letter-spacing:0; }
+.inspector-ready .inspector-shell .inspector-layer-row { grid-template-columns:18px 26px minmax(0,1fr) 52px; height:36px; min-height:36px; gap:6px; }
+.inspector-ready .inspector-shell .inspector-layer-glyph { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
+@container(max-width:400px) {
+  .inspector-ready .inspector-shell .inspector-layer-evidence-row { grid-template-columns:16px minmax(0,1fr); gap:4px 8px; }
+  .inspector-ready .inspector-shell .inspector-layer-evidence-row > :last-child { grid-column:2; }
+}
+
+/* Tiles: keep whole tables together and allow long layer names to wrap. */
+.inspector-ready .inspector-shell .inspector-tile-content > .inspector-note { padding:0 2px 10px; }
+.inspector-ready .inspector-shell .inspector-tile-content .inspector-table td { vertical-align:top; white-space:normal; overflow-wrap:anywhere; }
+.inspector-ready .inspector-shell .inspector-tile-content .inspector-tile-chip { display:inline-block; margin:2px 4px 2px 0; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; border-radius:4px; font-size:10px; }
+.inspector-ready .inspector-shell .inspector-tile-content > .inspector-kv { padding:0; gap:0; overflow:hidden; grid-template-columns:minmax(100px,35%) minmax(0,1fr); }
+.inspector-ready .inspector-shell .inspector-tile-content > .inspector-kv > * { padding:10px 14px; border-bottom:1px solid var(--border); }
+.inspector-ready .inspector-shell .inspector-tile-content > .inspector-kv > :nth-last-child(-n+2) { border-bottom:0; }
+.inspector-ready .inspector-shell .inspector-tile-feature { padding:10px 14px; }
+.inspector-ready .inspector-shell .inspector-tile-content > :is(.inspector-tile-chip-list,.inspector-tile-paging) { padding:0 0 10px; margin-bottom:10px; background:transparent; }
+
+/* Debug: overlay controls and resolution controls retain their existing actions. */
+.inspector-ready .inspector-shell .inspector-card > .inspector-debug-overlay { grid-template-columns:76px minmax(0,1fr) auto; padding:10px 18px; gap:14px; }
+.inspector-ready .inspector-shell .inspector-debug-overlay:last-child { border-bottom:0; }
+.inspector-ready .inspector-shell .inspector-debug-preview { width:76px; height:50px; border-radius:6px; }
+.inspector-ready .inspector-shell .inspector-debug-overlay strong { font-weight:500; }
+.inspector-ready .inspector-shell .inspector-debug-overlay small { margin-top:3px; font-size:11px; }
+.inspector-ready .inspector-shell .inspector-overdraw-help { max-width:none; padding:10px 18px 12px 108px; }
+.inspector-ready .inspector-shell .inspector-debug-scale { padding:12px 18px; gap:12px; }
+.inspector-ready .inspector-shell .inspector-debug-scale > span:first-child { flex:0 0 180px; }
+.inspector-ready .inspector-shell .inspector-debug-scale > input[type=range] { width:108px; min-width:60px; }
+.inspector-ready .inspector-shell .inspector-debug-scale > .inspector-debug-specimen { flex:1; min-width:160px; }
+.inspector-ready .inspector-shell .inspector-card > .inspector-note { padding:0 18px 12px; }
+.inspector-ready .inspector-shell .inspector-debug-scale:last-child { border-top:1px solid var(--border); }
+
+/* Assets and findings use the same spacing and surfaces as the other pages. */
+.inspector-ready .inspector-shell .inspector-assets-content { background:var(--inspector-page); }
+.inspector-ready .inspector-shell .inspector-asset-main { padding:14px; }
+.inspector-ready .inspector-shell :is(.inspector-sprite-grid,.inspector-model-grid,.inspector-font-list) { gap:10px; background:transparent; }
+.inspector-ready .inspector-shell :is(.inspector-sprite-card,.inspector-model-card,.inspector-font-card) { border:1px solid var(--border); border-radius:8px; background:var(--paper); overflow:hidden; }
+.inspector-ready .inspector-shell .inspector-sprite-card { padding:10px 8px; }
+.inspector-ready .inspector-shell .inspector-font-list { padding:14px; max-width:none; }
+.inspector-ready .inspector-shell .inspector-font-card { padding:12px; }
+.inspector-ready .inspector-shell .inspector-asset-aside { margin:14px 14px 14px 0; border:1px solid var(--border); border-radius:10px; background:var(--paper); }
+.inspector-ready .inspector-shell .inspector-asset-aside h3 { margin:0; padding:12px 14px; background:var(--inspector-card-heading); border-bottom:1px solid var(--border); }
+.inspector-ready .inspector-shell .inspector-diagnostic { overflow:hidden; }
+.inspector-ready .inspector-shell .inspector-diagnostic > summary { padding:12px 14px; }
+.inspector-ready .inspector-shell .inspector-diagnostic[open] > summary { background:var(--inspector-card-heading); border-bottom:1px solid var(--border); }
+.inspector-ready .inspector-shell .inspector-diagnostic-detail { padding:12px 14px 14px 39px; }
+.inspector-ready .inspector-shell .inspector-diagnostics-empty { padding:20px; max-width:none; }
+
+@container(max-width:760px) {
+  .inspector-ready .inspector-shell .inspector-asset-aside { margin:0 14px 14px; }
+}
+@container(max-width:480px) {
+  .inspector-ready .inspector-shell :is(.inspector-card-page,.inspector-layer-content,.inspector-tile-content,.inspector-diagnostics-list,.inspector-asset-main,.inspector-font-list) { padding:10px; }
+  .inspector-ready .inspector-shell .map-controls { padding:10px!important; }
+  .inspector-ready .inspector-shell .map-controls :is(.control-field,.control-field.inspector-palette-field) { grid-template-columns:110px minmax(0,1fr); gap:10px; padding-inline:12px; }
+  .inspector-ready .inspector-shell .control-module .control-field { padding-left:24px; }
+  .inspector-ready .inspector-shell .inspector-debug-scale > span:first-child { flex-basis:100%; }
+  .inspector-ready .inspector-shell .inspector-card > .inspector-debug-overlay { grid-template-columns:60px minmax(0,1fr) auto; padding:10px 12px; gap:10px; }
+  .inspector-ready .inspector-shell .inspector-debug-preview { width:60px; height:40px; }
+  .inspector-ready .inspector-shell .inspector-overdraw-help { padding-left:12px; }
+}
+`;
+
+// src/inspector/inspector-styles.ts
+var inspectorStyles = `
+body.inspector-ready {
+  --paper:#FFFFFF; --surface:#F5F5F5; --ink:#171717; --muted:#666666; --faint:#8C8C8C;
+  --border:#E5E5E5; --border-strong:#C8C8C8; --accent:#404040; --inspector-selected:#EBEBEB;
+  --hover:#EEEEEE; --accent-soft:#E8E8E8; --ok:#2F704B; --ok-soft:#E3EBDB; --warn:#815D21; --warn-soft:#F3E6CF;
+  --danger:#B13C34; --inspector-string:var(--ink); --inspector-number:var(--accent); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
+  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
+  --inspector-control-height:22px; --inspector-row-height:22px; --inspector-nav-height:27px;
+  --inspector-header-height:44px; --inspector-camera-control-height:30px;
+  color-scheme:light; font:12px/1.35 var(--ui); -webkit-font-smoothing:antialiased;
+}
+body.inspector-ready[data-inspector-theme=dark] {
+  --paper:#171717; --surface:#111111; --ink:#F5F5F5; --muted:#B3B3B3; --faint:#858585; --border:#333333; --border-strong:#525252;
+  --accent:#D4D4D4; --inspector-selected:#303030; --hover:#262626; --accent-soft:#303030; --ok:#91B887; --ok-soft:#24301F; --warn:#E2B36F; --warn-soft:#3A2F20; --danger:#F1746B; color-scheme:dark;
+}
+@media(prefers-color-scheme:dark) { body.inspector-ready[data-inspector-theme=system] {
+  --paper:#171717; --surface:#111111; --ink:#F5F5F5; --muted:#B3B3B3; --faint:#858585; --border:#333333; --border-strong:#525252;
+  --accent:#D4D4D4; --inspector-selected:#303030; --hover:#262626; --accent-soft:#303030; --ok:#91B887; --ok-soft:#24301F; --warn:#E2B36F; --warn-soft:#3A2F20; --danger:#F1746B; color-scheme:dark;
+}}
+.inspector-ready button,.inspector-ready input,.inspector-ready select { font:inherit; }
+.inspector-ready button { border:1px solid var(--border); border-radius:6px; min-height:28px; padding:4px 10px; cursor:pointer; }
+.inspector-ready button:disabled { cursor:default; opacity:.45; }
+.inspector-ready button:hover:not(:disabled) { background:var(--hover); }
+.inspector-ready input[type=range] { accent-color:var(--accent); }
+.inspector-ready code,.inspector-ready pre { font-family:var(--mono); }
+.inspector-ready .inspector-head { height:40px; min-height:40px; flex-wrap:nowrap; gap:2px; padding:0 8px; background:var(--paper); }
+.inspector-ready .inspector-head-main { display:flex; align-items:center; flex:1; min-width:0; }
+.inspector-ready .inspector-tabs { flex:1; align-items:center; gap:2px; }
+.inspector-ready .inspector-tabs button { border:0; border-radius:6px; min-height:28px; padding:5px 10px; color:var(--muted); background:transparent; }
+.inspector-ready .inspector-tabs button[aria-selected=true] { color:var(--ink); background:var(--surface); }
+.inspector-ready .inspector-head > .inspector-icon { width:28px; height:28px; margin:0; }
+.inspector-ready .inspector-icon[aria-pressed=true] { background:var(--accent-soft); color:var(--accent); }
+.inspector-ready .inspector-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; }
+.inspector-ready .inspector-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; }
+.inspector-ready .inspector-camera-field > span:first-child { padding:0 4px 0 9px; color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
+.inspector-ready .inspector-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); }
+.inspector-ready .inspector-camera-field input::-webkit-inner-spin-button { appearance:none; }
+.inspector-ready .inspector-camera-field input[type=range] { width:110px; padding:0; margin:0 10px 0 2px; min-height:0; }
+.inspector-ready .inspector-unit { padding-right:9px; color:var(--faint); }
+.inspector-ready .inspector-copy-agent { margin-left:auto; background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:500; }
+.inspector-ready .inspector-copy-agent:hover { background:var(--ink); opacity:.88; }
+.inspector-ready .inspector-menu { top:38px; right:8px; width:236px; padding:10px; border-radius:10px; box-shadow:0 8px 28px #0002; }
+.inspector-ready .inspector-dock-options { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px; }
+.inspector-ready .inspector-dock-options button { width:auto; height:34px; border:1px solid var(--border); justify-content:center; }
+.inspector-ready .inspector-menu-label { font-size:11px; }
+.inspector-ready .inspector-segments,.inspector-ready .inspector-layer-modes,.inspector-ready .controls-segments { display:inline-flex; padding:2px; background:var(--surface); border:1px solid var(--border); border-radius:6px; gap:2px; }
+.inspector-ready .inspector-segments button,.inspector-ready .inspector-layer-modes button,.inspector-ready .controls-segments button { min-height:23px; border:0; border-radius:4px; padding:3px 9px; font-size:12px; background:transparent; color:var(--muted); }
+.inspector-ready .inspector-segments button[aria-pressed=true],.inspector-ready .inspector-layer-modes button[aria-pressed=true],.inspector-ready .controls-segments button[aria-checked=true] { color:var(--ink); background:var(--paper); box-shadow:0 1px 2px #0001; }
+.inspector-ready .inspector-menu .inspector-segments { display:flex; }.inspector-ready .inspector-menu .inspector-segments button { flex:1; }
+.inspector-ready .inspector-tools { padding:10px 12px; gap:8px; background:var(--paper); }
+.inspector-ready .inspector-tools input[type=search] { height:30px; padding:0 9px; background:var(--surface); border-radius:6px; width:auto; }
+.inspector-ready .inspector-subtabs { padding:0 20px; gap:18px; }
+.inspector-ready .inspector-subtabs button { background:transparent; border:0; border-radius:0; border-bottom:2px solid transparent; padding:8px 0 9px; color:var(--muted); min-height:36px; }
+.inspector-ready .inspector-subtabs button[aria-selected=true] { color:var(--ink); border-bottom-color:var(--ink); }
+.inspector-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; }
+.inspector-ready input[role=switch]::before { content:''; position:absolute; width:11px; height:11px; left:2px; top:2px; border-radius:50%; background:#fff; transition:transform .15s; }
+.inspector-ready input[role=switch]:checked { background:var(--accent); }
+.inspector-ready input[role=switch]:checked::before { transform:translateX(11px); }
+.inspector-ready .inspector-layer-split { display:grid; grid-template-columns:minmax(0,min(38%,360px)) minmax(0,1fr); }
+.inspector-ready .inspector-layer-sidebar { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border-right:1px solid var(--border); }
+.inspector-ready .inspector-layer-list { flex:1; border:0; }.inspector-ready .inspector-layer-tools { flex-direction:column; align-items:stretch; }
+.inspector-ready .inspector-layer-tools-row { display:flex; align-items:center; gap:8px; }.inspector-ready .inspector-layer-total { margin-left:auto; font:11px var(--mono); }
+.inspector-ready .inspector-layer-visible { font-size:12px; }.inspector-ready .inspector-layer-group-title { height:32px; font-size:11px; padding:0 12px 0 8px!important; }
+.inspector-ready .inspector-layer-group-title strong { text-transform:uppercase; letter-spacing:.05em; }
+.inspector-ready .inspector-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; }
+.inspector-ready .inspector-layer-row[aria-pressed=true] { background:var(--inspector-selected); border-left-color:var(--accent); color:var(--ink); }
+.inspector-ready .inspector-layer-glyph { color:var(--muted); font-size:15px; }.inspector-ready .inspector-layer-label { font-size:12px; }
+.inspector-ready .inspector-layer-prefix { color:var(--faint); }.inspector-ready .inspector-layer-name { font-weight:500; }
+.inspector-ready .inspector-eye { padding:0; border:0; width:20px; height:20px; min-height:20px; color:var(--faint); background:transparent; display:grid; place-items:center; opacity:0; }
+.inspector-ready .inspector-eye svg { width:14px; height:14px; }
+.inspector-ready :is(.inspector-layer-row,.inspector-layer-group-title):hover .inspector-eye,.inspector-ready .inspector-eye:focus-visible,.inspector-ready .inspector-eye[aria-pressed=true] { opacity:1; }
+.inspector-zrange { position:relative; display:block; width:64px; height:14px; }.inspector-zrange::before { content:''; position:absolute; inset:6px 0; height:2px; background:var(--border); }
+.inspector-zrange i { position:absolute; top:5px; height:4px; border-radius:2px; background:var(--accent); opacity:.65; }.inspector-zrange em { position:absolute; top:1px; height:12px; width:1px; background:var(--accent); }
+.inspector-ready .inspector-layer-heading { padding:14px 20px 6px; align-items:flex-start; border:0; }
+.inspector-ready .inspector-layer-title strong { font-size:16px; font-weight:600; }.inspector-ready .inspector-layer-title > code { font-size:10px; color:var(--faint); }
+.inspector-layer-status { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-top:6px; }.inspector-layer-status[data-state=Enabled] { color:var(--ok); }.inspector-layer-status[data-state="Outside zoom"] { color:var(--warn); }
+.inspector-ready .inspector-layer-rules { font-size:12px; }.inspector-ready .inspector-layer-rules th { padding:8px 20px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
+.inspector-ready .inspector-layer-rules th:first-child { width:42%; }.inspector-ready .inspector-layer-rules td { padding:8px 20px; vertical-align:middle; min-height:44px; }
+.inspector-ready .inspector-layer-rules code { font:12px/1.5 var(--mono); }.inspector-ready .inspector-layer-rule-name { color:var(--ink); }.inspector-ready .inspector-layer-dependency { color:var(--accent); font:10px var(--mono); }
+.inspector-ready .inspector-layer-rule-editor { gap:9px; flex-wrap:wrap; }.inspector-ready .inspector-layer-rule-editor input:not([type=color]):not([type=checkbox]):not([type=range]),.inspector-ready .inspector-layer-rule-editor select { min-height:26px; border:1px solid var(--border); font:12px var(--mono); border-radius:6px; }
+.inspector-ready .inspector-layer-rule-editor input[type=color] { width:22px; height:22px; }
+.inspector-ready .inspector-layer-rule-editor input[type=range] { width:110px; min-width:70px; padding:0; flex:0 1 110px; }
+.inspector-rule-toggle { display:flex; align-items:center; gap:10px; }.inspector-rule-toggle input { width:14px; height:14px; min-height:0; margin:0; accent-color:var(--accent); }
+.inspector-rule-choices { display:inline-flex; flex-wrap:wrap; border:1px solid var(--border); border-radius:6px; overflow:hidden; }.inspector-ready .inspector-rule-choices button { min-height:26px; border:0; border-radius:0; font:11px var(--mono); padding:3px 8px; }
+.inspector-rule-spark { display:flex; align-items:center; gap:10px; color:var(--accent); font:11px var(--mono); margin-bottom:5px; }.inspector-rule-spark svg { width:130px; height:26px; overflow:visible; }
+.inspector-filter-chips { display:flex; flex-wrap:wrap; gap:6px; margin-block:10px; }.inspector-filter-chip { padding:4px 9px; background:var(--surface); border:1px solid var(--border); border-radius:13px; font:11px var(--mono); }
+.inspector-ready .inspector-layer-section,.inspector-ready .inspector-layer-origin { padding:12px 20px; }.inspector-ready .inspector-layer-section h4 { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
+.inspector-ready .inspector-layer-evidence { padding:0; }.inspector-ready .inspector-layer-evidence-row { padding:12px 20px; font-size:12px; grid-template-columns:20px 130px 1fr; }
+.inspector-ready .inspector-layer-evidence-row[data-state=pass] .inspector-layer-indicator { color:var(--ok); }.inspector-ready .inspector-layer-evidence-row[data-state=warn] .inspector-layer-indicator { color:var(--warn); }
+.inspector-ready .inspector-layer-json { font:11px/1.6 var(--mono); color:var(--ink); }
+.inspector-ready .inspector-table { font:12px var(--mono); }.inspector-ready .inspector-table th { padding:8px 12px; font:11px Inter,system-ui,sans-serif; text-transform:uppercase; border-right:0; }.inspector-ready .inspector-table td { height:32px; padding:6px 12px; }.inspector-ready .inspector-table tbody tr:nth-child(even) { background:transparent; }
+.inspector-ready .inspector-network-body { display:grid; grid-template-columns:minmax(0,min(38%,360px)) minmax(0,1fr); }.inspector-tiles-sidebar { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border-right:1px solid var(--border); }.inspector-ready .inspector-network-detail { border:0; min-width:0; }
+.inspector-ready .inspector-tile-heading { padding:14px 20px 8px; }.inspector-tile-heading strong { font:15px var(--mono); }.inspector-tile-status { padding:0 20px 10px; color:var(--muted); font-size:12px; }
+.inspector-tile-grid { display:grid; gap:3px; padding:12px; }.inspector-ready .inspector-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)); }
+.inspector-ready .inspector-tile-cell[aria-pressed=true] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }.inspector-tile-grid-title { margin:10px 12px 0; color:var(--muted); font-size:11px; }
+.inspector-tile-chip-list { display:flex; gap:6px; flex-wrap:wrap; padding:10px 20px; border-bottom:1px solid var(--border); }.inspector-ready .inspector-tile-chip { font:11px var(--mono); border-radius:13px; }
+.inspector-asset-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; min-height:0; flex:1; }.inspector-asset-main { min-width:0; overflow:auto; padding:12px; }.inspector-asset-aside { overflow:auto; border-left:1px solid var(--border); }.inspector-asset-aside h3 { font:500 15px var(--mono); margin:16px 20px; }.inspector-asset-variants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--border); }.inspector-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; }.inspector-asset-variant[data-night=true] { background:#262626; color:#f5f5f5; }
+.inspector-ready .inspector-sprite-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:4px; }.inspector-ready .inspector-sprite-card { border:1px solid transparent; border-radius:8px; background:transparent; padding:16px 6px 10px; cursor:pointer; }.inspector-sprite-card[aria-pressed=true] { background:var(--inspector-selected)!important; border-color:var(--accent)!important; }
+.inspector-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; }.inspector-debug-overlay:hover { background:var(--hover); }.inspector-debug-overlay small { display:block; color:var(--muted); font-size:12px; }.inspector-debug-preview { width:84px; height:58px; border-radius:6px; overflow:hidden; }.inspector-debug-preview svg { width:100%; height:100%; }
+.inspector-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); }
+.inspector-ready .inspector-overdraw-help { margin:0; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:12px 20px 12px 120px; background:var(--surface); }.inspector-debug-scale { display:flex; align-items:center; gap:12px; padding:16px 20px; flex-wrap:wrap; }.inspector-debug-scale input[type=number] { width:64px; }
+.inspector-ready .map-controls { padding:0!important; background:var(--paper); }.inspector-ready .controls-heading { display:none; }.inspector-ready .controls-grid { display:block; }.inspector-ready .controls-selection,.inspector-ready .controls-runtime { border:0; padding:0; }
+.inspector-ready .controls-section-title { margin:0; padding:8px 20px; background:var(--surface); border-bottom:1px solid var(--border); font-size:11px; letter-spacing:.05em; }.inspector-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; }.inspector-ready .control-field select { max-width:100%; width:max-content; min-width:132px; }
+.inspector-ready #controls-modules { display:block; }.inspector-ready .control-module { border:0; border-bottom:1px solid var(--border); border-radius:0; margin:0; background:var(--paper); }.inspector-ready .control-module-header { padding:10px 20px; }.inspector-ready .control-module-header label { justify-content:flex-start; font-size:13px; font-weight:500; }.inspector-ready .control-module-header input { order:-1; margin-right:12px; }.inspector-ready .control-module fieldset { padding:0; background:var(--surface); }.inspector-ready .control-module .control-field { padding-left:58px; border:0; }.inspector-ready .inspector-scene-content { max-width:1000px; width:100%; }.inspector-palettes { display:flex; gap:8px; flex-wrap:wrap; }.inspector-ready .inspector-palette { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; }.inspector-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) {
+ .inspector-ready .inspector-layer-title { flex-basis:180px; }.inspector-ready .inspector-camera-field input[type=range] { width:80px; }
+ .inspector-ready .inspector-layer-rules th:first-child { width:45%; }.inspector-ready .inspector-layer-rules td { padding:8px 12px; }
+ .inspector-asset-layout { grid-template-columns:1fr; }.inspector-asset-aside { border:0; border-top:1px solid var(--border); }
+ .inspector-ready .control-field { grid-template-columns:160px 1fr; }.inspector-ready .control-module .control-field { padding-left:30px; }
+}
+@media(prefers-reduced-motion:reduce) { .inspector-ready * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
+
+.inspector-palettes{display:flex;gap:8px;flex-wrap:wrap}.inspector-ready .inspector-palettes button{display:flex;flex-direction:column;gap:7px;padding:10px 14px;min-width:110px;background:var(--paper);text-align:left;text-transform:capitalize}.inspector-ready .inspector-palettes button[aria-checked=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.inspector-palette-swatches{display:flex;height:26px;width:100%;overflow:hidden;border-radius:4px}.inspector-palette-swatches i{flex:1;min-width:20px}.inspector-ready .inspector-palette-field{align-items:flex-start;flex-direction:column}.inspector-model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.inspector-ready .inspector-model-card{display:flex;flex-direction:column;align-items:center;padding:0;overflow:hidden;border-radius:10px}.inspector-model-card canvas{background:linear-gradient(var(--surface),var(--paper));max-width:100%;height:auto!important}.inspector-model-card strong{font:500 12px var(--mono);padding:9px 12px 2px;overflow-wrap:anywhere}.inspector-model-card small{font-size:11px;color:var(--muted);padding:0 12px 9px}.inspector-model-card[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.inspector-asset-aside>canvas{display:block;margin:auto;max-width:100%;touch-action:none;cursor:grab}.inspector-font-ranges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.inspector-font-ranges small{color:var(--muted);font-size:11px}
+
+.inspector-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)}.inspector-rule-font-preview{overflow:hidden;max-width:100%}.inspector-rule-font-preview canvas{max-width:100%;height:auto!important}
+/* Keep the new shell independent of the legacy in-header camera and toolbar breakpoints. */
+.inspector-ready .inspector-shell>.inspector-camera{order:0;flex:0 0 auto;margin:0;border-top:0;background:var(--paper);padding:8px 12px}
+.inspector-ready .inspector-shell>.inspector-head{flex-wrap:nowrap}.inspector-ready .inspector-shell .inspector-head-main{display:flex;gap:2px}
+.inspector-ready .inspector-shell .inspector-layer-tools input[type=search]{order:0;flex:0 0 auto;width:100%;height:30px}
+.inspector-ready .inspector-shell .inspector-layer-tools{flex-wrap:nowrap}.inspector-ready .inspector-shell .inspector-layer-tools-row{flex:none;min-height:28px}
+.inspector-ready .inspector-shell .inspector-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}
+.inspector-ready .inspector-shell .inspector-layer-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.inspector-ready .inspector-shell .inspector-layer-heading{flex:none}.inspector-ready .inspector-shell .inspector-layer-title{flex:1 1 180px}
+.inspector-ready .inspector-shell .inspector-layer-sidebar .inspector-layer-list{flex:1;min-height:0}.inspector-ready .inspector-shell .map-controls .control-field{display:grid;grid-template-columns:160px minmax(0,1fr);padding:12px 20px;margin:0}
+.inspector-ready .inspector-shell .control-module-header label{display:flex;gap:12px}.inspector-ready .inspector-shell .map-controls input[role=switch]{width:26px!important;height:15px!important;min-height:0;border:0;background:var(--faint)}.inspector-ready .inspector-shell .map-controls input[role=switch]:checked{background:var(--accent)}.inspector-ready .inspector-shell .map-controls input[role=switch]::before{width:11px;height:11px;top:2px;left:2px;background:white}.inspector-ready .inspector-shell .map-controls input[role=switch]:checked::before{transform:translateX(11px)}
+@container(max-width:760px){.inspector-ready .inspector-shell .inspector-layer-tools{padding:8px 12px}.inspector-ready .inspector-shell .inspector-tabs button{padding-inline:7px}.inspector-ready .inspector-shell .inspector-head{padding-inline:4px}.inspector-ready .inspector-shell .inspector-camera-field{flex:0 0 auto}}
+
+/* Shared density also wins over panel styles injected after the shell stylesheet. */
+.inspector-ready .inspector-shell { font:12px/1.35 var(--ui); }
+.inspector-ready .inspector-shell :is(button,input,select,summary) { min-height:var(--inspector-control-height); }
+.inspector-ready .inspector-shell button { padding:2px 6px; border-radius:3px; }
+.inspector-ready .inspector-shell :is(input[type=checkbox],input[type=radio],input[type=range],input[type=color]) { min-height:0; }
+.inspector-ready .inspector-shell .inspector-head { height:var(--inspector-header-height); min-height:var(--inspector-header-height); padding:0 4px; }
+.inspector-ready .inspector-shell .inspector-tabs { gap:0; }
+.inspector-ready .inspector-shell .inspector-tabs button { height:34px; min-height:34px; padding:0 8px; border-radius:4px; }
+.inspector-ready .inspector-shell .inspector-head .inspector-icon { width:30px; height:30px; min-height:30px; padding:5px; margin-block:0; }
+.inspector-ready .inspector-shell > .inspector-camera { min-height:48px; padding:8px; gap:6px; }
+.inspector-ready .inspector-shell .inspector-camera-field { height:var(--inspector-camera-control-height); border-radius:5px; }
+.inspector-ready .inspector-shell .inspector-camera-field > span:first-child { padding-left:6px; }
+.inspector-ready .inspector-shell .inspector-camera-field input[type=number] { width:48px; min-height:0; padding:0 3px; font-size:12px; }
+.inspector-ready .inspector-shell .inspector-camera-field input[type=range] { width:88px; margin:0 6px 0 2px; }
+.inspector-ready .inspector-shell .inspector-unit { padding-right:6px; }
+.inspector-ready .inspector-shell .inspector-camera-reset { display:inline-flex; align-items:center; justify-content:center; flex:none; width:26px; height:100%; min-height:0; padding:4px; border:0; border-left:1px solid var(--border); border-radius:0; background:transparent; }
+.inspector-ready .inspector-shell .inspector-camera-reset:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
+.inspector-ready .inspector-shell .inspector-copy-agent { min-height:var(--inspector-camera-control-height); padding:4px 10px; font-size:12px; white-space:nowrap; }
+.inspector-ready .inspector-shell .inspector-menu { top:var(--inspector-header-height); right:4px; width:216px; padding:6px; border-radius:4px; }
+.inspector-ready .inspector-shell .inspector-dock-options { gap:4px; margin-bottom:6px; }
+.inspector-ready .inspector-shell .inspector-dock-options button { height:26px; padding:2px; }
+.inspector-ready .inspector-shell :is(.inspector-segments,.inspector-layer-modes,.controls-segments) { padding:1px; gap:1px; border-radius:3px; }
+.inspector-ready .inspector-shell :is(.inspector-segments,.inspector-layer-modes,.controls-segments) button { min-height:20px; padding:1px 6px; border-radius:2px; }
+.inspector-ready .inspector-shell .inspector-tools { min-height:28px; padding:3px 8px; gap:4px; }
+.inspector-ready .inspector-shell .inspector-tools input[type=search] { height:var(--inspector-control-height); padding:0 6px; border-radius:3px; }
+.inspector-ready .inspector-shell .inspector-layer-tools-row { min-width:0; min-height:var(--inspector-control-height); gap:6px; flex-wrap:wrap; }
+.inspector-ready .inspector-shell .inspector-layer-modes { max-width:100%; overflow-x:auto; }
+.inspector-ready .inspector-shell .inspector-subtabs { padding:0 8px; gap:12px; }
+.inspector-ready .inspector-shell .inspector-subtabs button { min-height:var(--inspector-nav-height); padding:3px 0; border-radius:0; }
+.inspector-ready .inspector-shell .inspector-footer { min-height:20px; padding:2px 8px; gap:8px; }
+.inspector-ready .inspector-shell .inspector-section-heading { padding:4px 10px; }
+.inspector-ready .inspector-shell .inspector-kv { gap:3px 8px; padding:6px 8px; font:11px/1.4 var(--mono); }
+.inspector-ready .inspector-shell .inspector-layer-group-title { height:var(--inspector-row-height); min-height:var(--inspector-row-height); padding:0 8px 0 6px!important; }
+.inspector-ready .inspector-shell .inspector-layer-row { grid-template-columns:18px 16px minmax(0,1fr) 52px; height:var(--inspector-row-height); min-height:var(--inspector-row-height); padding:0 8px 0 4px; gap:4px; border-radius:0; }
+.inspector-ready .inspector-shell .inspector-layer-glyph { font-size:13px; }
+.inspector-ready .inspector-shell .inspector-eye { min-height:18px; width:18px; height:18px; padding:0; }
+.inspector-ready .inspector-shell .inspector-zrange { width:52px; }
+.inspector-ready .inspector-shell .inspector-layer-heading { padding:8px 10px 4px; }
+.inspector-ready .inspector-shell .inspector-layer-title strong { font-size:13px; }
+.inspector-ready .inspector-shell .inspector-layer-status { margin-top:3px; gap:6px; font-size:11px; }
+.inspector-ready .inspector-shell .inspector-layer-rules th { padding:4px 10px; }
+.inspector-ready .inspector-shell .inspector-layer-rules td { padding:3px 10px; min-height:24px; }
+.inspector-ready .inspector-shell .inspector-layer-rules code { font:11px/1.4 var(--mono); }
+.inspector-ready .inspector-shell .inspector-layer-rule-editor { gap:5px; }
+.inspector-ready .inspector-shell .inspector-layer-rule-editor :is(input:not([type=color]):not([type=checkbox]):not([type=range]),select) { min-height:20px; font:11px/1.4 var(--mono); border-radius:3px; }
+.inspector-ready .inspector-shell .inspector-layer-rule-editor input[type=color] { width:18px; height:20px; }
+.inspector-ready .inspector-shell .inspector-layer-rule-editor input[type=range] { width:88px; min-width:60px; flex-basis:88px; }
+.inspector-ready .inspector-shell .inspector-rule-toggle { gap:6px; }
+.inspector-ready .inspector-shell .inspector-rule-choices { border-radius:3px; }
+.inspector-ready .inspector-shell .inspector-rule-choices button { min-height:20px; padding:1px 5px; border-radius:0; }
+.inspector-ready .inspector-shell .inspector-rule-spark { gap:6px; margin-bottom:3px; }
+.inspector-ready .inspector-shell .inspector-rule-spark svg { width:100px; height:22px; }
+.inspector-ready .inspector-shell .inspector-filter-chips { gap:4px; margin-block:6px; }
+.inspector-ready .inspector-shell .inspector-filter-chip { padding:2px 6px; }
+.inspector-ready .inspector-shell :is(.inspector-layer-section,.inspector-layer-origin) { padding:6px 10px; }
+.inspector-ready .inspector-shell .inspector-layer-evidence-row { padding:6px 10px; grid-template-columns:16px 110px minmax(0,1fr); }
+.inspector-ready .inspector-shell .inspector-table { font:11px/1.4 var(--mono); }
+.inspector-ready .inspector-shell .inspector-table th { padding:4px 8px; font:11px var(--ui); }
+.inspector-ready .inspector-shell .inspector-table td { height:var(--inspector-row-height); padding:2px 8px; }
+.inspector-ready .inspector-shell .inspector-tile-heading { padding:8px 10px 4px; }
+.inspector-ready .inspector-shell .inspector-tile-heading strong { font-size:13px; }
+.inspector-ready .inspector-shell .inspector-tile-status { padding:0 10px 6px; }
+.inspector-ready .inspector-shell .inspector-tile-grid { padding:8px; gap:2px; }
+.inspector-ready .inspector-shell .inspector-tile-cell { padding:0; min-height:20px; }
+.inspector-ready .inspector-shell .inspector-tile-grid-title { margin:6px 8px 0; }
+.inspector-ready .inspector-shell .inspector-tile-chip-list { padding:5px 10px; gap:4px; }
+.inspector-ready .inspector-shell .inspector-asset-main { padding:8px; }
+.inspector-ready .inspector-shell .inspector-asset-aside h3 { font-size:13px; margin:8px 10px; }
+.inspector-ready .inspector-shell .inspector-asset-variant { padding:10px 6px; gap:6px; }
+.inspector-ready .inspector-shell .inspector-sprite-grid { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
+.inspector-ready .inspector-shell .inspector-sprite-card { padding:6px 4px; border-radius:4px; }
+.inspector-ready .inspector-shell .inspector-sprite-preview { height:44px; }
+.inspector-ready .inspector-shell .inspector-sprite-card figcaption { margin-top:4px; }
+.inspector-ready .inspector-shell .inspector-font-card { padding:8px; }
+.inspector-ready .inspector-shell .inspector-font-card figcaption { margin-bottom:5px; font:11px/1.4 var(--mono); }
+.inspector-ready .inspector-shell .inspector-font-loading { padding:8px; }
+.inspector-ready .inspector-shell .inspector-model-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; }
+.inspector-ready .inspector-shell .inspector-model-card { padding:0; border-radius:4px; }
+.inspector-ready .inspector-shell .inspector-model-card strong { padding:5px 8px 2px; }
+.inspector-ready .inspector-shell .inspector-model-card small { padding:0 8px 5px; }
+.inspector-ready .inspector-shell .inspector-debug-overlay { grid-template-columns:60px 1fr auto; gap:8px; padding:6px 10px; }
+.inspector-ready .inspector-shell .inspector-debug-preview { width:60px; height:40px; border-radius:3px; }
+.inspector-ready .inspector-shell .inspector-overdraw-help { padding:6px 10px 6px 78px; }
+.inspector-ready .inspector-shell .inspector-debug-scale { gap:8px; padding:8px 10px; }
+.inspector-ready .inspector-shell .inspector-debug-specimen { gap:10px; min-height:52px; padding:6px 10px; border-radius:4px; }
+.inspector-ready .inspector-shell .controls-section-title { padding:4px 10px; }
+.inspector-ready .inspector-shell .map-controls .control-field { grid-template-columns:140px minmax(0,1fr); padding:6px 10px; gap:8px; font-size:12px; }
+.inspector-ready .inspector-shell .control-module-header { padding:6px 10px; }
+.inspector-ready .inspector-shell .control-module-header label { font-size:12px; gap:6px; }
+.inspector-ready .inspector-shell .control-module-header input { margin-right:6px; }
+.inspector-ready .inspector-shell .control-module .control-field { padding-left:38px; }
+.inspector-ready .inspector-shell .map-controls .control-field.inspector-palette-field { grid-template-columns:70px minmax(0,1fr); align-items:center; }
+.inspector-ready .inspector-shell .inspector-palettes { gap:4px; align-items:center; }
+.inspector-ready .inspector-shell .inspector-palettes button { flex-direction:row; align-items:center; gap:5px; padding:2px 6px; min-width:0; height:var(--inspector-control-height); font-size:11px; white-space:nowrap; }
+.inspector-ready .inspector-shell .inspector-palette-swatches { width:24px; height:10px; flex:none; border-radius:2px; }
+.inspector-ready .inspector-shell .inspector-palette-swatches i { min-width:0; }
+@container(max-width:480px) {
+ .inspector-ready .inspector-shell .map-controls .control-field { grid-template-columns:110px minmax(0,1fr); }
+ .inspector-ready .inspector-shell .control-module .control-field { padding-left:24px; }
+ .inspector-ready .inspector-shell .inspector-camera-field input[type=range] { width:48px; }
+}
+`;
+
+// src/inspector/styles.ts
+var legacyStyles = `
+  body.inspector-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); --inspector-selected:light-dark(#e8f0fe,#394457); --inspector-string:light-dark(#a31515,#e6b98b); --inspector-number:light-dark(#1a1aa6,#a8c7fa); font:12px/1.45 Arial,system-ui,sans-serif; background:var(--paper); }
+  .inspector-ready button,.inspector-ready input,.inspector-ready select,.inspector-ready summary { min-height:24px; border-radius:2px; font:inherit; }
+  .inspector-ready button { padding:3px 8px; background:var(--paper); color:var(--ink); }
+  .inspector-ready button:hover { background:var(--surface); border-color:var(--border); }
+  .inspector-ready button:focus-visible,.inspector-ready input:focus-visible,.inspector-ready select:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
+  .inspector-ready button[aria-pressed=true] { color:var(--accent); background:var(--inspector-selected); }
+  .inspector-ready .tool-icon { width:14px; height:14px; }
+  .inspector-ready .workspace { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(180px,1fr) var(--inspector-height,340px); flex:1; min-height:0; }
+  .inspector-ready .workspace[data-dock=right] { grid-template-columns:minmax(200px,1fr) max(640px,var(--inspector-width,760px)); grid-template-rows:minmax(0,1fr); }
+  .inspector-ready .workspace[data-dock=left] { grid-template-columns:max(640px,var(--inspector-width,760px)) minmax(200px,1fr); grid-template-rows:minmax(0,1fr); }
+  .inspector-ready .workspace[data-dock=left] > .stage { grid-column:2; grid-row:1; }
+  .inspector-ready .workspace[data-dock=left] > .inspector-shell { grid-column:1; grid-row:1; border-right:1px solid var(--border); }
+  .inspector-ready .workspace[data-collapsed=true] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
+  .inspector-ready .workspace[data-collapsed=true] > .inspector-shell { display:none; }
+  .inspector-ready .workspace > .inspector { display:none !important; }
+  .inspector-ready .inspect-hint { top:8px; font-size:11px; padding:4px 7px; background:var(--paper); color:var(--ink); border:1px solid var(--accent); }
+  #inspector-reopen { display:none; position:absolute; top:8px; left:8px; z-index:10; box-shadow:0 1px 4px #0002; }
+  .workspace[data-collapsed=true] > #inspector-reopen { display:block; }
+  .inspector-ready .workspace[data-collapsed=true] > .stage { grid-column:1; grid-row:1; }
+  .inspector-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); }
+  .inspector-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; }
+  .inspector-head-main { display:flex; align-items:center; gap:12px; flex:1; min-width:0; align-self:stretch; }
+  .inspector-tabs { display:flex; min-width:0; overflow-x:auto; scrollbar-width:none; flex:0 1 auto; align-self:stretch; }
+  .inspector-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; border-radius:0; white-space:nowrap; padding:8px 10px; min-height:38px; }
+  .inspector-tabs button[aria-selected=true] { color:var(--accent); border-bottom-color:var(--accent); background:var(--paper); }
+  .inspector-head .inspector-icon,.inspector-tools .inspector-icon { display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; padding:3px; width:26px; height:26px; flex:none; }
+  .inspector-head .inspector-icon:disabled { opacity:.35; cursor:default; }
+  .inspector-icon svg { width:16px; height:16px; pointer-events:none; }
+  .inspector-divider { height:16px; border-left:1px solid var(--border); margin:0 4px; }
+  .inspector-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; }
+  .inspector-camera-field { display:flex; align-items:center; gap:4px; min-width:0; flex:none; }
+  .inspector-camera-field > label { color:var(--muted); font-size:11px; line-height:1; }
+  .inspector-stepper { display:flex; align-items:stretch; height:26px; border:1px solid var(--border); border-radius:4px; overflow:hidden; background:var(--paper); }
+  .inspector-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; }
+  .inspector-stepper input::-webkit-inner-spin-button,.inspector-stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
+  .inspector-stepper button { width:24px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; font-size:15px; line-height:1; }
+  .inspector-stepper button:disabled { color:var(--muted); opacity:.4; cursor:default; }
+  .inspector-camera:disabled { opacity:.5; }
+  .inspector-camera-reset { flex:none; height:26px; }
+  .inspector-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]) .inspector-head { flex-wrap:wrap; }
+  :is([data-dock=left],[data-dock=right]) .inspector-head > .inspector-icon { margin-block:6px; }
+  :is([data-dock=left],[data-dock=right]) .inspector-head-main { display:contents; }
+  :is([data-dock=left],[data-dock=right]) .inspector-tabs { flex:1; }
+  :is([data-dock=left],[data-dock=right]) .inspector-camera-field { flex:1 0 96px; }
+  :is([data-dock=left],[data-dock=right]) .inspector-stepper { flex:1; min-width:0; }
+  :is([data-dock=left],[data-dock=right]) .inspector-stepper input[type=number] { flex:1; width:0; }
+  :is([data-dock=left],[data-dock=right]) .inspector-stepper button { flex:none; width:22px; }
+  :is([data-dock=left],[data-dock=right]) .inspector-menu { top:38px; }
+  @container(max-width:1050px) {
+    .inspector-head { flex-wrap:wrap; }
+    .inspector-head > .inspector-icon { margin-block:6px; }
+    .inspector-head-main { display:contents; }
+    .inspector-tabs { flex:1; }
+    .inspector-camera-field { flex:1 0 96px; }
+    .inspector-stepper { flex:1; min-width:0; }
+    .inspector-stepper input[type=number] { flex:1; width:0; }
+    .inspector-stepper button { flex:none; width:22px; }
+    .inspector-menu { top:38px; }
+  }
+  .inspector-menu-label { color:var(--muted); margin:2px 0 6px; }
+  .inspector-dock-options { display:flex; gap:4px; }
+  .inspector-dock-options button { padding:6px; display:flex; }
+  .inspector-dock-options svg { width:24px; height:20px; }
+  .inspector-resize { position:absolute; z-index:5; height:6px; left:0; right:0; top:-4px; cursor:ns-resize; touch-action:none; }
+  [data-dock=right] > .inspector-shell > .inspector-resize { top:0; bottom:0; left:-4px; width:6px; height:auto; right:auto; cursor:ew-resize; }
+  [data-dock=left] > .inspector-shell > .inspector-resize { top:0; bottom:0; right:-4px; width:6px; height:auto; left:auto; cursor:ew-resize; }
+  .inspector-resize-shield { position:absolute; inset:0; z-index:30; background:transparent; }
+  .inspector-body { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
+  .inspector-panel { flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
+  .inspector-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; }
+  .inspector-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; }
+  .inspector-tools label { display:flex; align-items:center; gap:4px; white-space:nowrap; color:var(--muted); }
+  .inspector-tools select { max-width:160px; padding:2px; }
+  .inspector-tools input[type=checkbox] { min-height:0; margin:0; accent-color:var(--accent); }
+  .inspector-tools button { border-color:transparent; background:transparent; }
+  .inspector-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; }
+  .inspector-scroll { flex:1; overflow:auto; min-height:0; min-width:0; }
+  .inspector-empty { color:var(--muted); padding:22px; text-align:center; margin:auto; max-width:420px; }
+  .inspector-empty strong { color:var(--ink); display:block; margin-bottom:6px; font-weight:400; }
+  .inspector-inspect-grid { display:grid; grid-template-columns:minmax(220px,1fr) minmax(300px,42%); flex:1; min-height:0; }
+  .inspector-tree-column { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); }
+  .inspector-tree { flex:1; min-height:0; overflow:auto; font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; padding:5px 0; }
+  .inspector-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; }
+  .inspector-tree-row[aria-selected=true] { background:var(--inspector-selected) !important; }
+  .inspector-tree-row:hover { background:var(--surface) !important; }
+  .inspector-tree-row .inspector-token { color:var(--inspector-number); }
+  .inspector-tree-row .inspector-attr { color:var(--inspector-string); }
+  .inspector-tree-row .inspector-dim { color:var(--muted); }
+  .inspector-tree-row .inspector-truncate { overflow:hidden; text-overflow:ellipsis; }
+  .inspector-details { min-width:0; min-height:0; display:flex; flex-direction:column; }
+  .inspector-subtabs { display:flex; gap:2px; border-bottom:1px solid var(--border); flex:none; overflow-x:auto; }
+  .inspector-subtabs button { border:0; border-bottom:2px solid transparent; border-radius:0; padding:4px 8px; white-space:nowrap; }
+  .inspector-subtabs button[aria-selected=true] { border-bottom-color:var(--accent); color:var(--accent); }
+  .inspector-rule { border-bottom:1px solid var(--border); padding:7px 9px; font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
+  .inspector-rule-title { display:flex; justify-content:space-between; gap:8px; color:var(--ink); overflow-wrap:anywhere; margin-bottom:4px; }
+  .inspector-rule-origin { color:var(--muted); font:11px/1.6 Arial,sans-serif; text-align:right; }
+  .inspector-property { display:flex; align-items:center; gap:4px; padding:1px 0 1px 14px; min-height:24px; }
+  .inspector-property-name { color:light-dark(#881391,#c58af9); flex:none; }
+  .inspector-property input[type=text],.inspector-property input[type=number],.inspector-property select { border:1px solid transparent; background:transparent; min-width:30px; flex:1; width:100%; padding:0 2px; color:var(--inspector-string); border-radius:0; font:inherit; min-height:22px; }
+  .inspector-property input:focus,.inspector-property input:hover { border-color:var(--border); }
+  .inspector-property input[type=color] { width:14px; height:14px; padding:0; min-height:0; border:0; flex:none; background:transparent; cursor:pointer; }
+  .inspector-property input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
+  .inspector-property input[type=color]::-webkit-color-swatch { border:1px solid var(--border); }
+  .inspector-property .inspector-revert { border:0; padding:0 3px; min-height:18px; color:var(--muted); background:transparent; }
+  .inspector-property[data-modified=true] { background:color-mix(in srgb,var(--accent) 8%,transparent); }
+  .inspector-expression { display:block; padding-left:14px; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; }
+  .inspector-table { border-collapse:collapse; width:100%; font-size:11px; text-align:left; }
+  .inspector-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; }
+  .inspector-table th button { font:inherit; border:0; padding:0; min-height:18px; background:transparent; }
+  .inspector-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; }
+  .inspector-table tbody tr:nth-child(even) { background:color-mix(in srgb,var(--surface) 55%,transparent); }
+  .inspector-table tbody tr[aria-selected=true] { background:var(--inspector-selected); }
+  .inspector-table tbody tr:hover { background:var(--surface); }
+  .inspector-table .inspector-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; }
+  .inspector-table .inspector-number { font-variant-numeric:tabular-nums; text-align:right; }
+  .inspector-table .inspector-error { color:light-dark(#b3261e,#f2b8b5); }
+  .inspector-network-body { display:flex; flex:1; min-height:0; min-width:0; }
+  .inspector-network-body > .inspector-scroll { flex:1; min-width:0; }
+  .inspector-network-body[data-selected=true] > .inspector-scroll { flex:1 1 55%; }
+  .inspector-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); }
+  .inspector-network-detail[hidden] { display:none; }
+  .inspector-tile-row { cursor:pointer; }
+  .inspector-tile-heading { flex:none; justify-content:space-between; }
+  .inspector-tile-heading strong { font-size:12px; font-weight:500; }
+  .inspector-tile-heading button { border:0; font-size:18px; }
+  .inspector-tile-content { min-height:0; }
+  .inspector-tile-content select { width:100%; min-width:0; background:var(--paper); color:var(--ink); border:1px solid var(--border); padding:4px; }
+  .inspector-tile-paging { justify-content:space-between; }
+  .inspector-tile-feature { border-bottom:1px solid var(--border); padding:5px 8px; }
+  .inspector-tile-feature summary { cursor:pointer; overflow-wrap:anywhere; font-size:11px; }
+  .inspector-tile-feature details { padding-left:12px; }
+  .inspector-tile-feature pre { white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.6 ui-monospace,monospace; color:var(--inspector-string); margin:6px 0; }
+  .inspector-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; }
+  .inspector-kv dt { color:var(--muted); overflow-wrap:anywhere; }.inspector-kv dd { margin:0; overflow-wrap:anywhere; }
+  .inspector-note { color:var(--muted); font-size:11px; padding:6px 8px; margin:0; }
+  .inspector-status-message { color:var(--accent); padding:4px 8px; border-top:1px solid var(--border); font-size:11px; }
+  .inspector-shell .notice { position:static; padding:5px 9px; border:0; font:11px/1.5 ui-monospace,monospace; box-shadow:none; color:light-dark(#b3261e,#f2b8b5); }
+  .inspector-scene-content { display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; width:100%; max-width:1000px; align-self:flex-start; }
+  .inspector-shell .map-controls { flex:1; width:100%; max-width:none; padding:0 16px 16px; border:0; overflow:auto; background:var(--paper); }
+  .inspector-shell .controls-grid,.inspector-shell #controls-modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; align-items:start; }
+  .inspector-shell .controls-grid { border-bottom:1px solid var(--border); padding-bottom:8px; }
+  .inspector-shell .controls-selection,.inspector-shell .controls-runtime { border:0; padding-bottom:0; }
+  .inspector-shell .map-controls .control-field,.inspector-shell .control-module-header label { display:grid; grid-template-columns:min(36%,160px) minmax(0,1fr); align-items:center; gap:12px; min-height:28px; }
+  .inspector-shell .map-controls .control-field > select,.inspector-shell .map-controls .control-field > input[type=number] { justify-self:start; width:min(200px,100%); max-width:100%; }
+  .inspector-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; }
+  .inspector-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; }
+  .inspector-shell .map-controls input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); }
+  .inspector-shell .map-controls input[type=checkbox]:checked::before { transform:translateX(14px); background:light-dark(#fff,#202124); }
+  .inspector-shell .map-controls input[type=checkbox]:hover:not(:disabled) { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
+  .inspector-shell .map-controls input[type=checkbox]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
+  .inspector-shell .map-controls input[type=checkbox]:disabled { cursor:not-allowed; }
+  .inspector-shell .map-controls .control-field:has(input[type=checkbox]:not(:disabled)) { cursor:pointer; }
+  .inspector-shell .controls-heading button { min-width:60px; }
+  .inspector-shell .controls-segments button { padding:4px 10px; border-radius:0; }
+  @media (prefers-reduced-motion:reduce) { .inspector-shell .map-controls input[type=checkbox],.inspector-shell .map-controls input[type=checkbox]::before { transition:none; } }
+  .inspector-shell .control-module { border:0; border-bottom:1px solid var(--border); border-radius:0; background:var(--paper); margin:0; }
+  .inspector-shell .control-module-header { padding:5px 0; }.inspector-shell .control-module-header label { font-size:12px; font-weight:400; }
+  .inspector-shell .control-module fieldset { min-width:0; padding:0 0 8px 16px; }
+  .inspector-shell .controls-section-title { margin:10px 0 4px; font-size:11px; letter-spacing:0; text-transform:none; }
+  .inspector-shell .control-field { margin:5px 0; }
+  @container(max-width:680px) { .inspector-shell .controls-grid,.inspector-shell #controls-modules { grid-template-columns:minmax(0,1fr); }.inspector-shell .map-controls .control-field,.inspector-shell .control-module-header label { grid-template-columns:min(36%,160px) minmax(0,1fr); }.inspector-shell .controls-segments button { padding-inline:8px; } }
+  .inspector-shell .controls-code { background:var(--surface); }.inspector-shell .controls-selection .control-field select { max-width:100%; }
+  .inspector-shell .panel-heading h2 { font:12px Arial,sans-serif; }.inspector-shell .review-tabs { margin:0; padding:0; }
+  .inspector-assets-content { scrollbar-gutter:stable; }
+  .inspector-font-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr)); max-width:1100px; }
+  .inspector-font-card { min-width:0; margin:0; padding:14px 12px; border-bottom:1px solid var(--border); }
+  .inspector-font-card figcaption { margin-bottom:8px; font:12px/1.5 ui-monospace,monospace; }
+  .inspector-font-sample { min-height:94px; overflow-x:auto; border:1px solid var(--border); border-radius:3px; background:#fff; color:#303b4b; }
+  .inspector-font-preview { display:block; }
+  .inspector-font-loading { display:block; padding:15px 10px; font-size:11px; color:#62676e; }
+  .inspector-sprite-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:1px; padding:1px; background:var(--border); }
+  .inspector-sprite-card { margin:0; min-width:0; padding:10px 8px 8px; background:var(--paper); text-align:center; }
+  .inspector-sprite-card:hover { background:var(--inspector-selected); }
+  .inspector-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; }
+  .inspector-sprite-card figcaption { margin-top:7px; font:11px/1.4 ui-monospace,monospace; overflow-wrap:anywhere; }
+  .inspector-sprite-size { display:block; min-height:15px; margin-top:3px; color:var(--muted); font-size:10px; }
+  .inspector-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; }
+  .inspector-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; }
+  .inspector-geometry-handles { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
+  .inspector-performance { padding:10px; }.inspector-performance svg { width:100%; height:90px; display:block; }.inspector-performance dl { max-width:600px; }
+  .inspector-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); }
+  .inspector-overdraw-help[hidden] { display:none; }
+  .inspector-overdraw-help strong { font-size:12px; }.inspector-overdraw-help p { margin:5px 0 0; line-height:1.5; }
+  .inspector-overdraw-legend { display:flex; flex-wrap:wrap; gap:6px 20px; margin:10px 0 8px; }
+  .inspector-overdraw-key { display:inline-flex; align-items:center; gap:6px; font:11px/1.4 ui-monospace,monospace; }
+  .inspector-overdraw-swatch { width:24px; height:10px; border:1px solid #0002; border-radius:2px; }
+  .inspector-overdraw-caption { color:var(--muted); font-size:11px; }
+  .inspector-badge { background:var(--inspector-selected); color:var(--accent); border-radius:7px; padding:0 5px; margin-left:3px; font:10px/1.5 Arial,sans-serif; }
+  [data-dock=left] .inspector-inspect-grid,[data-dock=right] .inspector-inspect-grid { display:flex; flex-direction:column; }
+  [data-dock=left] .inspector-tree-column,[data-dock=right] .inspector-tree-column { flex:0 0 32%; border-right:0; border-bottom:1px solid var(--border); }
+  [data-dock=left] .inspector-details,[data-dock=right] .inspector-details { flex:1; }
+  .inspector-zoom { padding:8px; }.inspector-zoom > select { width:100%; margin-bottom:8px; }
+  @container(max-width:680px) { .inspector-inspect-grid { display:flex;flex-direction:column; }.inspector-tree-column { flex:0 0 32%;border-right:0;border-bottom:1px solid var(--border); }.inspector-details { flex:1; } }
+`;
+var inspectorStyles2 = legacyStyles + inspectorStyles + cardStyles;
+
+// src/inspector/theme-labels.ts
+var themeLabels = {
+  light: "Light",
+  default: "Default",
+  faded: "Faded",
+  monochrome: "Monochrome"
+};
+var defaultPaletteMapIds = ["streets", "map-1777"];
+
+// src/workbench-client.ts
+var workbenchClient = String.raw`
+      let wbCatalog;
+      let wbLastContext = "";
+      let wbInterval;
+      let wbRefreshing = false;
+      let wbError = "";
+      let wbLastPublished = 0;
+      let wbPickerKey = "";
+      let wbTimeOfDay = "";
+      const wbPaletteColors = new Map();
+      const wbThemeLabels = ${JSON.stringify(themeLabels)};
+      const wbDefaultPaletteMaps = ${JSON.stringify(defaultPaletteMapIds)};
+      const wbThemeLabel = (theme, metadata) => theme === "light" && wbDefaultPaletteMaps.some(id => metadata?.["tileflow:map"] === id || (Array.isArray(metadata?.["tileflow:extends"]) && metadata["tileflow:extends"].includes(id))) ? "Default" : Object.hasOwn(wbThemeLabels,theme) ? wbThemeLabels[theme] : theme.replace(/[-_]/g," ");
+      const wbClient = "view-" + Math.random().toString(36).slice(2);
+      const wb = (id) => document.getElementById("wb-" + id);
+      if (options.workbenchUrl) initializeWorkbench();
+
+      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 || "Inspector 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 themeMetadata = side.map?.getStyle?.()?.metadata;
+        const key = JSON.stringify([activeSideId, selectedTheme, selections, variants, side.requestedTimeOfDay, themeMetadata?.["tileflow:map"], themeMetadata?.["tileflow:extends"]]);
+        if (key === wbPickerKey) return;
+        wbPickerKey = key;
+        const allThemes = [...new Set(selections.map((entry) => entry.theme))];
+        const family = Object.keys(variants).find((name) => Object.values(variants[name]).includes(selectedTheme));
+        const members = new Set(Object.values(variants).flatMap((moments) => Object.values(moments)));
+        const themes = allThemes.filter((name) => !members.has(name) || Object.hasOwn(variants, name));
+        if (themeMetadata?.["tileflow:map"] === "streets" || (Array.isArray(themeMetadata?.["tileflow:extends"]) && themeMetadata["tileflow:extends"].includes("streets"))) {
+          const streetsOrder = new Map([["light", 0], ["faded", 1], ["monochrome", 2]]);
+          themes.sort((left, right) => (streetsOrder.get(left) ?? 3) - (streetsOrder.get(right) ?? 3));
+        }
+        const moments = family ? variants[family] : {};
+        wbTimeOfDay = moments[side.requestedTimeOfDay] === selectedTheme ? side.requestedTimeOfDay : Object.keys(moments).find((moment) => moments[moment] === selectedTheme) || "";
+        for (const segment of wb("time-of-day").querySelectorAll("button")) {
+          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(wbThemeLabel(theme,themeMetadata), theme)));
+        wb("theme").value = family || selectedTheme;
+        wb("theme").disabled = themes.length < 2;
+        wb("palettes").replaceChildren(...themes.map(theme => {
+          const button=document.createElement("button");button.type="button";button.setAttribute("role","radio");button.setAttribute("aria-checked",String(theme===(family||selectedTheme)));
+          const swatches=document.createElement("span");swatches.className="inspector-palette-swatches";
+          const label=document.createElement("span");label.textContent=wbThemeLabel(theme,themeMetadata);button.append(swatches,label);
+          button.onclick=()=>{wb("theme").value=theme;selectWorkbenchAppearance();};
+          const concrete=variants[theme]?.[wbTimeOfDay] || variants[theme]?.day || theme;
+          const fill=colors=>{if(!button.isConnected)return;swatches.replaceChildren(...colors.map(color=>{const swatch=document.createElement("i");swatch.style.background=color;return swatch;}));};
+          if(wbPaletteColors.has(concrete))queueMicrotask(()=>fill(wbPaletteColors.get(concrete)));
+          else {
+            const url=new URL(side.definition.basePath+"/styles/"+side.workbenchMap+"/"+concrete+".json",location.href);
+            fetch(url).then(response=>{if(!response.ok)throw new Error("Theme unavailable");return response.json();}).then(style=>{
+              const choices=[/background/,/water/,/land.*(?:park|vegetation)|vegetation/,/building/];
+              const colors=choices.map(pattern=>style.layers.flatMap(layer=>pattern.test(layer.id)||pattern.test(layer.type)?Object.entries(layer.paint||{}).filter(([key,value])=>key.endsWith("-color")&&typeof value==="string").map(([,value])=>value):[])[0]).filter(Boolean);
+              wbPaletteColors.set(concrete,colors);fill(colors);
+            }).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.__tileflowInspectorUI?.layerContext?.();
+        const selected = !layerObservation && selectedInspection?.side === side ? selectedInspection : undefined;
+        const feature = selected?.features[selected.featureIndex];
+        const style = side.map?.getStyle?.();
+        const metadata = style?.metadata;
+        const layer = feature && style?.layers?.find((entry) => entry.id === feature.layerId);
+        const provenance = feature && findSidecarLayer(side.sidecar, feature.layerId);
+        let definition;
+        try { definition = currentWorkbenchDefinition(); } catch { /* Loading previews have no camera yet. */ }
+        const themeVariants = wbCatalog?.sides[side.serviceId || side.id]?.timeOfDay?.[definition?.map] || {};
+        const themeFamily = definition && Object.keys(themeVariants).find(name => Object.values(themeVariants[name]).includes(definition.theme));
+        const appearance = definition ? {theme:wbThemeLabel(themeFamily || definition.theme,metadata), themeId:themeFamily || definition.theme,
+          timeOfDay:themeFamily ? (themeVariants[themeFamily][wbTimeOfDay] === definition.theme ? wbTimeOfDay : Object.keys(themeVariants[themeFamily]).find(moment => themeVariants[themeFamily][moment] === definition.theme)) : undefined,
+          concreteThemeId:definition.theme} : undefined;
+        const configuration = side.definition.captureConfig ? " --config " + quoteCliArgument(side.definition.captureConfig) : "";
+        const semanticOwner = provenance && sidecarLayerWithSemanticAttribution(provenance).semanticAttribution[0]?.semanticOwner;
+        const captureCommand = definition ? "tileflow capture" + configuration + " --map " + quoteCliArgument(definition.map) + " --theme " + quoteCliArgument(definition.theme) +
+          " --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, appearance,
+          captureSemantics:"Compiled map at the observed camera and viewport; temporary preview edits are excluded.",
+          review:{referenceId:null, before:null, after:null, liveMode:stage.dataset.mode, source:"map"},
+          commands:{inspect:"tileflow inspect" + configuration + (semanticOwner ? " --domain " + quoteCliArgument(semanticOwner) : " --limit 80") + " --json", capture:captureCommand,
+            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(--inspector-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 fieldset { border:0; padding:0 12px 12px; margin:0; }
+  .control-module fieldset[hidden] { display:none; }
+  .control-field { display:flex; align-items:center; justify-content:space-between; flex-direction:row; gap:12px; font-size:12px; margin:9px 0; }
+  .control-field select,.control-field input[type=number] { width:132px; min-width:0; padding:5px 7px; font:inherit; }
+  .control-field input[type=checkbox] { accent-color:var(--accent); }
+  .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 inspector-card" id="controls-selection" hidden>
+      <div class="controls-section-title">Appearance</div>
+      <div class="control-field" id="wb-time-of-day-field" hidden><span>Time of day</span><div class="controls-segments" id="wb-time-of-day" role="radiogroup" aria-label="Time of day"></div></div>
+      <div class="control-field inspector-palette-field" id="wb-theme-field"><span>Theme</span><select id="wb-theme" aria-label="Theme" disabled hidden><option value="">Waiting for map\u2026</option></select><div id="wb-palettes" class="inspector-palettes" role="radiogroup" aria-label="Theme"></div></div>
+    </div>
+    <fieldset class="controls-runtime inspector-card" id="controls-runtime">
+      <div class="controls-section-title">Preview rendering</div>
+      <label class="control-field">3D view<input id="controls-3d" type="checkbox" role="switch"></label>
+      <label class="control-field">Building animation<select id="controls-animation" hidden><option value="0">Off</option><option value="800">Grow</option><option value="fade">Fade</option></select><span class="controls-segments" id="controls-animation-segments" role="radiogroup" aria-label="Building animation"></span></label>
+    </fieldset>
+    </div>
+    <section class="inspector-card controls-module-card">
+      <div class="controls-section-title">Map modules</div>
+      <fieldset id="controls-modules"></fieldset>
+    </section>
+    <p id="controls-status" role="status" hidden></p>
+  </aside>
+`;
+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(); });
+      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.__tileflowInspectorUI) { globalThis.__tileflowInspectorUI.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") !== "off";
+            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() {
+        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");
+          const syncModuleEnabled = () => {
+            fieldset.disabled = !toggle.checked;
+            fieldset.hidden = !toggle.checked;
+          };
+          syncModuleEnabled();
+          controlsBindings.push(() => {
+            if (document.activeElement !== toggle) toggle.checked = controlsDraft[module.id]?.enabled ?? module.enabled;
+            syncModuleEnabled();
+          });
+          toggle.addEventListener("change", () => { changeControl(module.id, "enabled", toggle.checked, module.enabled); syncModuleEnabled(); });
+          if (module.fields.length) {
+            card.append(fieldset);
+            for (const field of module.fields) {
+              const line = document.createElement("label"); line.className = "control-field";
+              const title = document.createElement("span"); title.textContent = field.label;
+              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 Inspector 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">
+  <head>
+    <meta charset="utf-8" />
+    <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;
+        --border: #d8dbe2;
+        --ink: #202124;
+        --muted: #656b76;
+        --paper: #f6f7f9;
+        --split: 50%;
+        --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;
+        grid-template-rows: auto minmax(0, 1fr);
+        overflow: hidden;
+        background: var(--paper);
+        color: var(--ink);
+        font: 13px/1.4 ui-sans-serif, system-ui, sans-serif;
+      }
+      button, input, select { font: inherit; }
+      button {
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        background: white;
+        color: var(--ink);
+        cursor: pointer;
+        padding: 5px 9px;
+      }
+      button:hover { border-color: #a8afbd; }
+      button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
+      button:focus-visible, input:focus-visible, select:focus-visible, .inspector:focus-visible {
+        outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
+        outline-offset: 2px;
+      }
+      .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; }
+      .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; }
+      .stage:not([data-mode="side-by-side"]) .pane-right { z-index: 2; }
+      .stage[data-mode="split"] .pane-right { clip-path: inset(0 0 0 var(--split)); }
+      .stage[data-mode="overlay"] .pane-right { opacity: var(--overlay-alpha); }
+      .stage[data-mode="blink"] .pane-right { opacity: 0; }
+      .stage[data-mode="blink"][data-blink-side="right"] .pane-right { opacity: 1; }
+      .stage[data-mode="blink"][data-blink-side="right"] .pane-left { opacity: 0; }
+      .stage:not([data-mode="side-by-side"]) .pane-right { pointer-events: none; }
+      .stage[data-driver="right"]:not([data-mode="side-by-side"]) .pane-right { pointer-events: auto; }
+      .stage[data-driver="right"]:not([data-mode="side-by-side"]) .pane-left { pointer-events: none; }
+      .stage[data-driver="left"]:not([data-mode="side-by-side"]) .pane-left { pointer-events: auto; }
+      .split-line { display: none; position: absolute; z-index: 4; inset-block: 0; left: var(--split); width: 1px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
+      .stage[data-mode="split"] .split-line { display: block; }
+      .inspector {
+        width: min(390px, 42vw);
+        border-left: 1px solid var(--border);
+        background: white;
+        overflow: auto;
+        padding: 12px;
+      }
+      .inspector[hidden] { display: none; }
+      .inspector h2 { margin: 0 0 10px; font-size: 15px; }
+      .inspector-heading { position: sticky; z-index: 2; top: -12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -12px -12px 10px; padding: 12px; border-bottom: 1px solid var(--border); background: white; }
+      .inspector-heading h2 { margin: 0; }
+      .inspector h3 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+      .inspector pre { max-height: 240px; margin: 6px 0; overflow: auto; border-radius: 6px; background: var(--paper); padding: 8px; font: 11px/1.45 ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
+      .inspector select { max-width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; }
+      .feature-picker { display: grid; gap: 4px; margin: 8px 0; color: var(--muted); }
+      .feature-picker select { width: 100%; color: var(--ink); }
+      .curve-meta { margin: 5px 0; color: var(--muted); font-size: 11px; }
+      .empty { color: var(--muted); }
+      .curve { width: 100%; height: 116px; display: block; border: 1px solid var(--border); border-radius: 6px; background: #fbfbfc; }
+      .color-curve { display: grid; grid-template-columns: repeat(97, 1fr); height: 42px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
+      .sprite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; margin-top: 8px; }
+      .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; }
+      .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) {
+        .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}
+      ${inspectorStyles2}
+    </style>
+  </head>
+  <body>
+    <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">
+          <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">
+          <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>
+        <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">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></details>
+      </aside>
+      ${workbenchPanels}
+      ${controlsPanel}
+    </div>
+    <script type="module"${nonceAttribute}>
+      const options = ${documentOptions};
+      const bridgeSchemaVersion = 1;
+      const bridgeSetCameraType = "tileflow:comparison-set-camera";
+      const bridgeSetInspectionType = "tileflow:comparison-set-inspection";
+      const bridgeCameraType = "tileflow:comparison-camera";
+      const bridgeInspectionType = "tileflow:comparison-inspection";
+      const bridgeReadyType = "tileflow:comparison-ready";
+      const bridgeRuntimeErrorType = "tileflow:comparison-runtime-error";
+      const stage = document.getElementById("stage");
+      const inspector = document.getElementById("inspector");
+      const inspectionOutput = document.getElementById("inspection");
+      const curveProperty = document.getElementById("curve-property");
+      const curveOutput = document.getElementById("curve-output");
+      const sidecarOutput = document.getElementById("sidecar-output");
+      const spriteOutput = document.getElementById("sprite-output");
+      const inspectButton = document.getElementById("inspect-toggle");
+      const inspectorCloseButton = document.getElementById("inspector-close");
+      const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+      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"),
+          map: undefined,
+          camera: undefined,
+          bridgeReady: false,
+          artifactStatus: "building",
+          artifactGeneration: -1,
+          artifactLastGoodGeneration: undefined,
+          sidecar: undefined,
+          sidecarPromise: undefined,
+          sidecarAbort: undefined,
+          spriteAbort: undefined,
+          loadEpoch: 0,
+          lastCameraRequestId: undefined,
+          cleanupBridge: undefined,
+          runtimeErrors: [],
+          runtimeFailed: false
+        }];
+      }));
+      let canonicalCamera = cameraFromUrl();
+      let activeSideId = "left";
+      let inspectionEnabled = false;
+      let selectedInspection;
+      let requestSequence = 0;
+      let blinkTimer;
+      let blinkPaused = reducedMotion.matches;
+      let blinkSide = "left";
+      let spriteLoadSequence = 0;
+      let spriteOwnerId;
+
+      const initialUi = readUiFromUrl();
+
+      applySliders();
+      setMode(initialUi.mode || options.initialMode);
+      for (const id of sideIds) {
+        const side = states[id];
+        side.frame.src = side.definition.previewUrl;
+        side.frame.addEventListener("load", () => connectSide(side));
+        side.frame.addEventListener("focus", () => selectSide(side.id));
+        startStatus(side);
+      }
+
+      inspectButton.addEventListener("click", () => setInspectionEnabled(!inspectionEnabled, true));
+      inspectorCloseButton.addEventListener("click", () => setInspectionEnabled(false, true));
+      document.getElementById("load-sprites").addEventListener("click", () => loadSprites(states[activeSideId]));
+      curveProperty.addEventListener("change", renderCurve);
+      reducedMotion.addEventListener?.("change", () => {
+        blinkPaused = reducedMotion.matches;
+          restartBlink();
+      });
+      addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && inspectionEnabled) setInspectionEnabled(false, true);
+      });
+      addEventListener("message", receiveBridgeMessage);
+      addEventListener("beforeunload", () => {
+        clearInterval(blinkTimer);
+        for (const side of Object.values(states)) {
+          side.eventSource?.close();
+          side.sidecarAbort?.abort();
+          side.spriteAbort?.abort();
+          cleanupSideBridge(side);
+        }
+      });
+
+      function selectSide(id, writeState = true) {
+        if (!states[id]) return;
+        const changed = activeSideId !== id || stage.dataset.driver !== id;
+        const previousSpriteOwner = spriteOwnerId;
+        activeSideId = id;
+        stage.dataset.driver = id;
+        if (changed && previousSpriteOwner && previousSpriteOwner !== id) {
+          states[previousSpriteOwner].spriteAbort?.abort();
+          spriteLoadSequence += 1;
+          spriteOwnerId = undefined;
+          spriteOutput.replaceChildren();
+        }
+        if (writeState) writeUrlState();
+        if (!canonicalCamera) maybeEstablishInitialCamera();
+      }
+
+      function setInspectionEnabled(enabled, manageFocus = false) {
+        inspectionEnabled = enabled;
+        if (globalThis.__tileflowInspectorUI) {
+          inspectButton.setAttribute("aria-pressed", String(enabled));
+          document.getElementById("wb-inspect-hint").hidden = !enabled;
+          for (const side of Object.values(states)) sendInspectionState(side);
+          globalThis.__tileflowInspectorUI.inspectionChanged(enabled);
+          return;
+        }
+        if (enabled) toggleMapControls(false);
+        inspectButton.setAttribute("aria-pressed", String(enabled));
+        inspectButton.setAttribute("aria-expanded", String(enabled));
+        inspector.hidden = !enabled;
+        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 setMode(mode) {
+        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;
+        restartBlink();
+        writeUrlState();
+        setTimeout(() => {
+          for (const side of Object.values(states)) side.map?.resize?.();
+        }, 0);
+      }
+
+      function applySliders() {
+        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));
+      }
+
+      function restartBlink() {
+        clearInterval(blinkTimer);
+        blinkTimer = undefined;
+        blinkSide = "left";
+        stage.dataset.blinkSide = blinkSide;
+        if (stage.dataset.mode !== "blink" || blinkPaused) return;
+        blinkTimer = setInterval(() => {
+          blinkSide = blinkSide === "left" ? "right" : "left";
+          stage.dataset.blinkSide = blinkSide;
+        }, 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;
+        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;
+        side.sidecarPromise = undefined;
+        side.runtimeErrors = [];
+        side.runtimeFailed = false;
+        side.lastCameraRequestId = undefined;
+        if (spriteOwnerId === side.id) {
+          spriteLoadSequence += 1;
+          spriteOwnerId = undefined;
+          spriteOutput.replaceChildren();
+          spriteOutput.textContent = "The selected map reloaded; load its sprite atlas again.";
+        }
+        if (selectedInspection?.side === side) {
+          selectedInspection = undefined;
+          inspectionOutput.className = "empty";
+          inspectionOutput.textContent = "The selected map reloaded; click a rendered feature again.";
+          curveProperty.disabled = true;
+          curveProperty.replaceChildren(new Option("Select a rendered layer first"));
+          curveOutput.className = "empty";
+          curveOutput.textContent = "Paint and layout values appear here.";
+          sidecarOutput.textContent = "No layer selected.";
+        }
+        updateDocumentReadiness();
+        const started = performance.now();
+        const findMap = () => {
+          if (side.loadEpoch !== epoch) return;
+          let childWindow;
+          try {
+            childWindow = side.frame.contentWindow;
+            const map = childWindow?.__tileflowPreviewMap;
+            if (map) {
+              side.map = map;
+              // Inspector 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) {
+            markSideRuntimeError(side, error);
+            return;
+          }
+          if (performance.now() - started < 10_000) {
+            setTimeout(findMap, 50);
+          } else {
+            markSideRuntimeError(side, "Preview map did not initialize.");
+            maybeEstablishInitialCamera();
+          }
+        };
+        findMap();
+      }
+
+      function installChildBridge(side, childWindow, map, epoch) {
+        let applyingRequestId;
+        let inspectionActive = inspectionEnabled;
+        let movementFrame;
+        let queuedUserMovement = false;
+        let releaseFrame;
+        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.__tileflowInspectorUI) || !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;
+        // commands still cross the iframe boundary through validated postMessage events.
+        const postToParent = (message) => receiveBridgeMessage({
+          data: message,
+          origin: targetOrigin,
+          source: childWindow
+        });
+        let userMovementActive = false;
+        const postCamera = (phase, requestId, userInitiated = false) => {
+          postToParent({
+            type: bridgeCameraType,
+            schemaVersion: bridgeSchemaVersion,
+            side: side.id,
+            phase,
+            ...(requestId === undefined ? {} : {requestId}),
+            ...(userInitiated ? {userInitiated: true} : {}),
+            camera: readMapCamera(map)
+          });
+        };
+        const handleMoveStart = (event) => {
+          if (applyingRequestId === undefined && (event?.originalEvent || event?.tileflowInspector === true)) userMovementActive = true;
+        };
+        const handleMove = (event) => {
+          if (applyingRequestId !== undefined) return;
+          if (event?.originalEvent || event?.tileflowInspector === true) userMovementActive = true;
+          queuedUserMovement = queuedUserMovement || userMovementActive;
+          if (movementFrame !== undefined) return;
+          movementFrame = childWindow.requestAnimationFrame(() => {
+            movementFrame = undefined;
+            const userInitiated = queuedUserMovement;
+            queuedUserMovement = false;
+            postCamera("move", undefined, userInitiated);
+          });
+        };
+        const handleMoveEnd = (event) => {
+          if (applyingRequestId !== undefined) {
+            postCamera("end", applyingRequestId);
+            scheduleApplyingRelease(applyingRequestId);
+            return;
+          }
+          if (event?.originalEvent || event?.tileflowInspector === true) userMovementActive = true;
+          if (movementFrame !== undefined) {
+            childWindow.cancelAnimationFrame(movementFrame);
+            movementFrame = undefined;
+          }
+          queuedUserMovement = false;
+          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.__tileflowInspectorUI || hoverFrame !== undefined) return;
+          hoverFrame = childWindow.requestAnimationFrame(() => {
+            hoverFrame = undefined;
+            hoveredFeature = map.queryRenderedFeatures(event.point).find((feature) => !feature.layer.id.startsWith("__tileflow-inspector-"));
+            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;
+          clearHover();
+          inspectedCoordinate = [event.lngLat.lng, event.lngLat.lat];
+          inspectedFeatures = map.queryRenderedFeatures(event.point).filter((feature) => !feature.layer.id.startsWith("__tileflow-inspector-")).slice(0, 16);
+          const features = inspectedFeatures.map(projectFeature);
+          postToParent({
+            type: bridgeInspectionType,
+            schemaVersion: bridgeSchemaVersion,
+            side: side.id,
+            coordinate: [event.lngLat.lng, event.lngLat.lat],
+            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,
+            schemaVersion: bridgeSchemaVersion,
+            side: side.id,
+            message: sanitizeRuntimeMessage(event?.error?.message || event?.message || "Map runtime error")
+          });
+        };
+        const handleCommand = (event) => {
+          if (event.source !== childWindow.parent || event.origin !== targetOrigin) return;
+          const message = event.data;
+          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;
+          if (movementFrame !== undefined) {
+            childWindow.cancelAnimationFrame(movementFrame);
+            movementFrame = undefined;
+          }
+          queuedUserMovement = false;
+          userMovementActive = false;
+          cancelApplyingRelease();
+          applyingRequestId = typeof message.requestId === "number" ? message.requestId : 0;
+          try {
+            map.jumpTo(message.camera);
+            postCamera("end", applyingRequestId);
+            scheduleApplyingRelease(applyingRequestId);
+          } catch (error) {
+            applyingRequestId = undefined;
+            handleError({error});
+          }
+        };
+        const announceReady = () => {
+          if (readyAnnounced || side.loadEpoch !== epoch) return;
+          readyAnnounced = true;
+          clearTimeout(readyTimer);
+          postToParent({
+            type: bridgeReadyType,
+            schemaVersion: bridgeSchemaVersion,
+            side: side.id,
+            camera: readMapCamera(map)
+          });
+        };
+        const handleReadyTimeout = () => {
+          if (readyAnnounced || side.loadEpoch !== epoch) return;
+          markSideRuntimeError(side, "Preview map did not become ready within 10 seconds.");
+          maybeEstablishInitialCamera();
+        };
+        const cancelApplyingRelease = () => {
+          if (releaseFrame !== undefined) childWindow.cancelAnimationFrame(releaseFrame);
+          if (releaseFrameAfterPaint !== undefined) childWindow.cancelAnimationFrame(releaseFrameAfterPaint);
+          releaseFrame = undefined;
+          releaseFrameAfterPaint = undefined;
+        };
+        const scheduleApplyingRelease = (requestId) => {
+          cancelApplyingRelease();
+          releaseFrame = childWindow.requestAnimationFrame(() => {
+            releaseFrame = undefined;
+            releaseFrameAfterPaint = childWindow.requestAnimationFrame(() => {
+              releaseFrameAfterPaint = undefined;
+              if (applyingRequestId === requestId) applyingRequestId = undefined;
+            });
+          });
+        };
+        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();
+        else {
+          map.once("load", announceReady);
+          map.once("idle", announceReady);
+          readyTimer = setTimeout(handleReadyTimeout, 10_000);
+        }
+        return () => {
+          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);
+          childWindow.removeEventListener("message", handleCommand);
+        };
+      }
+
+      function receiveBridgeMessage(event) {
+        if (event.origin !== location.origin || !event.data || event.data.schemaVersion !== bridgeSchemaVersion) return;
+        const side = Object.values(states).find((candidate) => candidate.frame.contentWindow === event.source);
+        if (!side || event.data.side !== side.id) return;
+        const message = event.data;
+        if (message.type === bridgeReadyType && validCamera(message.camera)) {
+          side.bridgeReady = true;
+          side.camera = message.camera;
+          maybeEstablishInitialCamera();
+          sendInspectionState(side);
+          void loadSidecar(side);
+          if (options.workbenchUrl) void refreshWorkbench();
+          if (!controlsPanel.hidden) void loadMapControls();
+          updateDocumentReadiness();
+          return;
+        }
+        if (message.type === bridgeCameraType && validCamera(message.camera)) {
+          if (message.requestId !== undefined) {
+            if (message.requestId !== side.lastCameraRequestId) return;
+            side.camera = message.camera;
+            if (
+              side.id === stage.dataset.driver &&
+              canonicalCamera &&
+              !camerasEqual(message.camera, canonicalCamera)
+            ) {
+              canonicalCamera = message.camera;
+              sendCamera(states[side.id === "left" ? "right" : "left"], canonicalCamera);
+              writeUrlState();
+            }
+            if (message.phase === "end" && selectedInspection?.side === side) renderCurve();
+            return;
+          }
+          side.camera = message.camera;
+          if (message.userInitiated !== true) {
+            if (canonicalCamera && !camerasEqual(message.camera, canonicalCamera)) {
+              sendCamera(side, canonicalCamera);
+            }
+            return;
+          }
+          selectSide(side.id, false);
+          canonicalCamera = message.camera;
+          const other = states[side.id === "left" ? "right" : "left"];
+          sendCamera(other, canonicalCamera);
+          if (message.phase === "end") {
+            writeUrlState();
+            if (selectedInspection?.side === side) renderCurve();
+          }
+          return;
+        }
+        if (message.type === bridgeInspectionType && Array.isArray(message.features)) {
+          selectSide(side.id);
+          selectedInspection = {side, coordinate: message.coordinate, features: message.features.slice(0, 16), featureIndex: 0};
+          renderInspection(true);
+          return;
+        }
+        if (message.type === bridgeRuntimeErrorType) {
+          markSideRuntimeError(side, message.message);
+        }
+      }
+
+      function sendCamera(side, camera) {
+        if (!side?.bridgeReady || !camera || !side.frame.contentWindow) return;
+        if (side.camera && camerasEqual(side.camera, camera)) return;
+        const requestId = ++requestSequence;
+        side.lastCameraRequestId = requestId;
+        side.frame.contentWindow.postMessage({
+          type: bridgeSetCameraType,
+          schemaVersion: bridgeSchemaVersion,
+          requestId,
+          camera
+        }, location.origin);
+      }
+
+      function maybeEstablishInitialCamera() {
+        if (canonicalCamera) {
+          for (const side of Object.values(states)) sendCamera(side, canonicalCamera);
+          writeUrlState();
+          return;
+        }
+        const driver = states[stage.dataset.driver];
+        let source = driver.bridgeReady && driver.camera ? driver : undefined;
+        const driverUnavailable = driver.runtimeFailed || (
+          driver.artifactStatus === "invalid" && !Number.isInteger(driver.artifactLastGoodGeneration)
+        );
+        if (!source && driverUnavailable && states.left.bridgeReady && states.left.camera) {
+          source = states.left;
+        }
+        if (!source) return;
+        canonicalCamera = source.camera;
+        for (const side of Object.values(states)) {
+          if (side !== source) sendCamera(side, canonicalCamera);
+        }
+        writeUrlState();
+      }
+
+      function sendInspectionState(side) {
+        if (!side.bridgeReady || !side.frame.contentWindow) return;
+        side.frame.contentWindow.postMessage({
+          type: bridgeSetInspectionType,
+          schemaVersion: bridgeSchemaVersion,
+          enabled: inspectionEnabled
+        }, location.origin);
+      }
+
+      function startStatus(side) {
+        fetch(side.definition.statusUrl, {cache: "no-store"})
+          .then((response) => response.ok ? response.json() : Promise.reject(new Error("Status unavailable")))
+          .then((status) => applyArtifactStatus(side, status))
+          .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 {}
+          });
+        }
+      }
+
+      function applyArtifactStatus(side, status) {
+        if (!status || !["building", "ready", "invalid"].includes(status.status)) return;
+        const generation = Number.isInteger(status.generation) && status.generation >= 0 ? status.generation : 0;
+        if (generation < side.artifactGeneration) return;
+        if (
+          generation === side.artifactGeneration &&
+          status.status === "building" &&
+          side.artifactStatus !== "building"
+        ) return;
+        side.artifactGeneration = generation;
+        side.artifactStatus = status.status;
+        side.artifactLastGoodGeneration = Number.isInteger(status.lastGoodGeneration)
+          ? status.lastGoodGeneration
+          : undefined;
+        side.artifactDiagnostic = status.diagnostics?.[0]?.message;
+        side.latestArtifactStatus = status;
+        side.previewStatusReceiver?.(status);
+        maybeEstablishInitialCamera();
+        updateDocumentReadiness();
+      }
+
+      function updateDocumentReadiness() {
+        const sides = Object.values(states);
+        const failed = sides.some((side) => side.runtimeFailed || (
+          side.artifactStatus === "invalid" && !Number.isInteger(side.artifactLastGoodGeneration)
+        ));
+        const ready = sides.every((side) => side.bridgeReady && (
+          side.artifactStatus === "ready" ||
+          (side.artifactStatus === "invalid" && Number.isInteger(side.artifactLastGoodGeneration))
+        ));
+        const value = failed ? "error" : ready ? "idle" : "loading";
+        document.documentElement.dataset.tileflowState = value;
+        stage.dataset.tileflowState = value;
+      }
+
+
+      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(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 || side.sidecarKey !== key || controller.signal.aborted) return undefined;
+            side.sidecar = document;
+            if (selectedInspection?.side === side) renderInspection();
+            return document;
+          })
+          .catch((error) => {
+            if (error?.name !== "AbortError" && selectedInspection?.side === side) {
+              sidecarOutput.textContent = "Unable to load compiler sidecar; reload or select the feature to retry.";
+            }
+            return undefined;
+          })
+          .finally(() => {
+            if (side.sidecarPromise === promise) side.sidecarPromise = undefined;
+            if (side.sidecarAbort === controller) side.sidecarAbort = undefined;
+          });
+        side.sidecarPromise = promise;
+        return promise;
+      }
+
+      function currentSidecarUrl(side) {
+        const configured = new URL(side.definition.sidecarUrl, location.href);
+        const marker = "/__inspection/";
+        const markerIndex = configured.pathname.lastIndexOf(marker);
+        if (markerIndex < 0) return configured.href;
+        const suffixParts = configured.pathname.slice(markerIndex + marker.length).split("/");
+        const configuredMap = suffixParts[0];
+        const configuredThemeFile = suffixParts[1];
+        const configuredTheme = configuredThemeFile?.endsWith(".json") ? configuredThemeFile.slice(0, -5) : undefined;
+        if (suffixParts.length !== 2 || !validPortableName(configuredMap) || !validPortableName(configuredTheme)) {
+          return configured.href;
+        }
+        const metadata = side.map?.getStyle?.().metadata;
+        const map = metadata?.["tileflow:map"];
+        const theme = metadata?.["tileflow:theme"];
+        if (!validPortableName(map) || !validPortableName(theme)) {
+          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;
+      }
+
+      // Metadata refreshes update the inspection without navigating away from the active tab.
+      function renderInspection(reveal = false) {
+        if (!selectedInspection) return;
+        const side = selectedInspection.side;
+        const feature = selectedInspection.features[selectedInspection.featureIndex];
+        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.";
+          curveProperty.disabled = true;
+          curveOutput.className = "empty";
+          curveOutput.textContent = "Paint and layout values appear here.";
+          sidecarOutput.textContent = "No layer selected.";
+          if (reveal) globalThis.__tileflowInspectorUI?.selectionChanged();
+          return;
+        }
+        inspectionOutput.className = "";
+        const layer = side.map?.getStyle?.().layers?.find((candidate) => candidate.id === feature.layerId);
+        const title = document.createElement("strong");
+        title.textContent = side.definition.label + " \xB7 " + feature.layerId;
+        const pickerLabel = document.createElement("label");
+        pickerLabel.className = "feature-picker";
+        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 = 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);
+        picker.addEventListener("change", () => {
+          selectedInspection.featureIndex = boundedInteger(Number(picker.value), 0, selectedInspection.features.length - 1, 0);
+          renderInspection(true);
+        });
+        pickerLabel.append(picker);
+        const summary = document.createElement("pre");
+        summary.textContent = boundedJson({
+          coordinate: selectedInspection.coordinate,
+          feature: {id: feature.id, geometryType: feature.geometryType, properties: feature.properties},
+          layer: layer ? {
+            id: layer.id,
+            type: layer.type,
+            source: layer.source,
+            sourceLayer: layer["source-layer"],
+            minzoom: layer.minzoom,
+            maxzoom: layer.maxzoom,
+            filter: layer.filter
+          } : undefined
+        });
+        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);
+        if (reveal) globalThis.__tileflowInspectorUI?.selectionChanged();
+      }
+
+      function populateCurveProperties(layer) {
+        const previousValue = curveProperty.value;
+        curveProperty.replaceChildren();
+        if (!layer) {
+          curveProperty.disabled = true;
+          return;
+        }
+        const entries = [];
+        for (const section of ["paint", "layout"]) {
+          for (const name of Object.keys(layer[section] || {}).sort()) entries.push({section, name});
+        }
+        if (entries.length === 0) {
+          curveProperty.disabled = true;
+          curveOutput.textContent = "This layer has no paint or layout values.";
+          return;
+        }
+        for (const entry of entries) {
+          const option = document.createElement("option");
+          option.value = entry.section + ":" + entry.name;
+          option.textContent = entry.section + "." + entry.name;
+          curveProperty.append(option);
+        }
+        if (Array.from(curveProperty.options).some((option) => option.value === previousValue)) {
+          curveProperty.value = previousValue;
+        }
+        curveProperty.disabled = false;
+        renderCurve();
+      }
+
+      function renderCurve() {
+        if (!selectedInspection) return;
+        const side = selectedInspection.side;
+        const feature = selectedInspection.features[selectedInspection.featureIndex];
+        if (!feature) return;
+        const layer = side.map?.getStyle?.().layers?.find((candidate) => candidate.id === feature.layerId);
+        const [section, name] = curveProperty.value.split(":");
+        const raw = layer?.[section]?.[name];
+        curveOutput.replaceChildren();
+        if (raw === undefined) return;
+        const maximumZoom = 24;
+        const samples = Array.from({length: maximumZoom * 4 + 1}, (_, index) => {
+          const zoom = index / 4;
+          return {zoom, value: evaluateBasicZoomValue(raw, zoom)};
+        });
+        if (samples.some((sample) => sample.value === unsupportedValue)) {
+          const pre = document.createElement("pre");
+          pre.textContent = "Unsupported or data-driven expression; no approximate curve is shown.\\n" + boundedJson(raw);
+          curveOutput.append(pre);
+          return;
+        }
+        const currentZoom = boundedNumber(side.camera?.zoom ?? canonicalCamera?.zoom, 0, maximumZoom, 0);
+        const currentValue = evaluateBasicZoomValue(raw, currentZoom);
+        const meta = document.createElement("div");
+        meta.className = "curve-meta";
+        meta.textContent = "Current z" + formatNumber(currentZoom) + ": " + formatCurveValue(currentValue) + " \xB7 sampled every 0.25 zoom";
+        curveOutput.append(meta);
+        if (samples.every((sample) => typeof sample.value === "number" && Number.isFinite(sample.value))) {
+          curveOutput.append(renderNumericCurve(samples, currentZoom));
+          return;
+        }
+        if (samples.every((sample) => parseColor(sample.value))) {
+          const strip = document.createElement("div");
+          strip.className = "color-curve";
+          for (const sample of samples) {
+            const swatch = document.createElement("span");
+            swatch.style.background = colorToCss(parseColor(sample.value));
+            swatch.title = "z" + formatNumber(sample.zoom) + ": " + String(sample.value);
+            strip.append(swatch);
+          }
+          curveOutput.append(strip);
+          return;
+        }
+        const pre = document.createElement("pre");
+        pre.textContent = samples.map((sample) => "z" + sample.zoom + "  " + String(sample.value)).join("\\n");
+        curveOutput.append(pre);
+      }
+
+      const unsupportedValue = Symbol("unsupported");
+      function evaluateBasicZoomValue(value, zoom) {
+        if (!Array.isArray(value)) {
+          return value && typeof value === "object" && ("stops" in value || "property" in value)
+            ? unsupportedValue
+            : value;
+        }
+        if (value[0] === "literal") return value[1];
+        if (value[0] === "step" && isZoomInput(value[1])) {
+          let output = value[2];
+          for (let index = 3; index + 1 < value.length; index += 2) {
+            if (zoom < value[index]) break;
+            output = value[index + 1];
+          }
+          return evaluateBasicZoomValue(output, zoom);
+        }
+        if (value[0] === "interpolate" && isZoomInput(value[2])) {
+          const stops = [];
+          for (let index = 3; index + 1 < value.length; index += 2) stops.push([value[index], value[index + 1]]);
+          if (!stops.length) return unsupportedValue;
+          if (zoom <= stops[0][0]) return evaluateBasicZoomValue(stops[0][1], zoom);
+          if (zoom >= stops.at(-1)[0]) return evaluateBasicZoomValue(stops.at(-1)[1], zoom);
+          const upperIndex = stops.findIndex((stop) => zoom < stop[0]);
+          const lower = stops[upperIndex - 1];
+          const upper = stops[upperIndex];
+          const interpolation = value[1];
+          let base;
+          if (Array.isArray(interpolation) && interpolation.length === 1 && interpolation[0] === "linear") {
+            base = 1;
+          } else if (
+            Array.isArray(interpolation) && interpolation.length === 2 &&
+            interpolation[0] === "exponential" && Number.isFinite(Number(interpolation[1])) &&
+            Number(interpolation[1]) > 0
+          ) {
+            base = Number(interpolation[1]);
+          } else {
+            return unsupportedValue;
+          }
+          const progress = interpolationProgress(zoom, lower[0], upper[0], base);
+          const from = evaluateBasicZoomValue(lower[1], zoom);
+          const to = evaluateBasicZoomValue(upper[1], zoom);
+          if (typeof from === "number" && typeof to === "number") return from + (to - from) * progress;
+          const fromColor = parseColor(from);
+          const toColor = parseColor(to);
+          return fromColor && toColor ? colorToCss(fromColor.map((part, index) => part + (toColor[index] - part) * progress)) : unsupportedValue;
+        }
+        return unsupportedValue;
+      }
+
+      function isZoomInput(value) { return Array.isArray(value) && value.length === 1 && value[0] === "zoom"; }
+      function interpolationProgress(value, lower, upper, base) {
+        const distance = upper - lower;
+        if (!distance) return 0;
+        if (!Number.isFinite(base) || base === 1) return (value - lower) / distance;
+        return (Math.pow(base, value - lower) - 1) / (Math.pow(base, distance) - 1);
+      }
+
+      function renderNumericCurve(samples, currentZoom) {
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "curve");
+        svg.setAttribute("viewBox", "0 0 320 116");
+        const values = samples.map((sample) => sample.value);
+        const minimum = Math.min(...values);
+        const maximum = Math.max(...values);
+        const span = maximum - minimum || 1;
+        const points = samples.map((sample) => {
+          const x = 10 + sample.zoom / 24 * 300;
+          const y = 104 - (sample.value - minimum) / span * 92;
+          return x.toFixed(2) + "," + y.toFixed(2);
+        }).join(" ");
+        const polyline = document.createElementNS(svg.namespaceURI, "polyline");
+        polyline.setAttribute("points", points);
+        polyline.setAttribute("fill", "none");
+        polyline.setAttribute("stroke", "#3157d5");
+        polyline.setAttribute("stroke-width", "2");
+        svg.append(polyline);
+        const marker = document.createElementNS(svg.namespaceURI, "line");
+        const markerX = 10 + currentZoom / 24 * 300;
+        marker.setAttribute("x1", String(markerX));
+        marker.setAttribute("x2", String(markerX));
+        marker.setAttribute("y1", "8");
+        marker.setAttribute("y2", "108");
+        marker.setAttribute("stroke", "#ba3838");
+        marker.setAttribute("stroke-width", "1.5");
+        marker.setAttribute("stroke-dasharray", "3 3");
+        svg.append(marker);
+        const title = document.createElementNS(svg.namespaceURI, "title");
+        title.textContent = "minimum " + minimum + ", maximum " + maximum + ", current zoom " + formatNumber(currentZoom);
+        svg.append(title);
+        svg.setAttribute("role", "img");
+        svg.setAttribute("aria-label", title.textContent);
+        return svg;
+      }
+
+      async function loadSprites(side) {
+        const epoch = side.loadEpoch;
+        const sequence = ++spriteLoadSequence;
+        spriteOwnerId = side.id;
+        side.spriteAbort?.abort();
+        const controller = new AbortController();
+        side.spriteAbort = controller;
+        spriteOutput.replaceChildren();
+        const style = side.map?.getStyle?.();
+        if (typeof style?.sprite !== "string") {
+          spriteOutput.textContent = "The active style has no single served sprite atlas.";
+          if (side.spriteAbort === controller) side.spriteAbort = undefined;
+          return;
+        }
+        let base;
+        try {
+          base = new URL(style.sprite, side.frame.contentWindow.location.href);
+        } catch {
+          spriteOutput.textContent = "Invalid sprite URL.";
+          if (side.spriteAbort === controller) side.spriteAbort = undefined;
+          return;
+        }
+        if (!urlBelongsToSide(base, side)) {
+          spriteOutput.textContent = "Only sprite atlases served by the active comparison side can be opened.";
+          if (side.spriteAbort === controller) side.spriteAbort = undefined;
+          return;
+        }
+        try {
+          const atlasUrl = spriteAssetUrl(base, ".json");
+          const imageUrl = spriteAssetUrl(base, ".png");
+          const [atlasResponse, image] = await Promise.all([
+            fetch(atlasUrl, {cache: "no-store", signal: controller.signal}),
+            loadImage(imageUrl, controller.signal)
+          ]);
+          if (!atlasResponse.ok) throw new Error("Sprite metadata request failed");
+          const atlas = await atlasResponse.json();
+          if (
+            controller.signal.aborted ||
+            side.loadEpoch !== epoch ||
+            sequence !== spriteLoadSequence ||
+            activeSideId !== side.id
+          ) return;
+          const entries = Object.entries(atlas).sort(([left], [right]) => left.localeCompare(right)).slice(0, 256);
+          for (const [name, item] of entries) {
+            if (!validSpriteEntry(item, image)) continue;
+            const card = document.createElement("div");
+            card.className = "sprite-card";
+            const canvas = document.createElement("canvas");
+            const ratio = item.pixelRatio || 1;
+            canvas.width = Math.max(1, Math.ceil(item.width / ratio));
+            canvas.height = Math.max(1, Math.ceil(item.height / ratio));
+            canvas.getContext("2d").drawImage(image, item.x, item.y, item.width, item.height, 0, 0, canvas.width, canvas.height);
+            const label = document.createElement("span");
+            label.className = "sprite-name";
+            label.textContent = name;
+            label.title = name;
+            card.append(canvas, label);
+            spriteOutput.append(card);
+          }
+          if (!spriteOutput.childElementCount) spriteOutput.textContent = "The atlas is empty.";
+        } catch (error) {
+          if (error?.name !== "AbortError" && sequence === spriteLoadSequence) {
+            spriteOutput.textContent = "Unable to load the served sprite atlas: " + safeErrorMessage(error);
+          }
+        } finally {
+          if (side.spriteAbort === controller) side.spriteAbort = undefined;
+        }
+      }
+
+      function loadImage(url, signal) {
+        return new Promise((resolve, reject) => {
+          const image = new Image();
+          const cleanup = () => signal.removeEventListener("abort", handleAbort);
+          const handleAbort = () => {
+            image.src = "";
+            cleanup();
+            reject(new DOMException("Sprite image request aborted", "AbortError"));
+          };
+          image.onload = () => { cleanup(); resolve(image); };
+          image.onerror = () => { cleanup(); reject(new Error("Sprite image request failed")); };
+          if (signal.aborted) return handleAbort();
+          signal.addEventListener("abort", handleAbort, {once: true});
+          image.src = url;
+        });
+      }
+
+      function urlBelongsToSide(url, side) {
+        const basePath = side.definition.basePath;
+        return url.origin === location.origin &&
+          (url.pathname === basePath || url.pathname.startsWith(basePath + "/"));
+      }
+
+      function spriteAssetUrl(base, suffix) {
+        const asset = new URL(base.href);
+        asset.pathname += suffix;
+        return asset.href;
+      }
+
+      function validSpriteEntry(value, image) {
+        return value && [value.x, value.y, value.width, value.height].every(Number.isFinite) &&
+          value.x >= 0 && value.y >= 0 && value.width > 0 && value.height > 0 &&
+          value.x + value.width <= image.naturalWidth && value.y + value.height <= image.naturalHeight;
+      }
+
+
+
+
+      function writeUrlState() {
+        const url = new URL(location.href);
+        url.searchParams.set("mode", stage.dataset.mode);
+        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 = {
+            lng: canonicalCamera.center[0], lat: canonicalCamera.center[1], zoom: canonicalCamera.zoom,
+            bearing: canonicalCamera.bearing, pitch: canonicalCamera.pitch
+          };
+          for (const [name, value] of Object.entries(values)) url.searchParams.set(name, formatNumber(value));
+        }
+        history.replaceState(history.state, "", url.href);
+      }
+
+      function readUiFromUrl() {
+        const query = new URL(location.href).searchParams;
+        const modeValue = singleQueryValue(query, "mode");
+        const mode = ["single", "side-by-side", "split", "overlay", "blink"].includes(modeValue) ? modeValue : undefined;
+        const driver = singleQueryValue(query, "driver");
+        selectSide(driver === "right" && options.right ? "right" : "left", false);
+        const split = singleQueryValue(query, "split");
+        const alpha = singleQueryValue(query, "alpha");
+        return {
+          mode,
+          split: split === undefined ? 50 : boundedNumber(Number(split), 5, 95, 50),
+          alpha: alpha === undefined ? 50 : boundedNumber(Number(alpha), 0, 100, 50)
+        };
+      }
+
+      function cameraFromUrl() {
+        const query = new URL(location.href).searchParams;
+        if (!["lng", "lat", "zoom", "bearing", "pitch"].every((name) => query.getAll(name).length === 1)) return undefined;
+        const camera = {
+          center: [Number(query.get("lng")), Number(query.get("lat"))],
+          zoom: Number(query.get("zoom")), bearing: Number(query.get("bearing")), pitch: Number(query.get("pitch"))
+        };
+        return validCamera(camera) ? camera : undefined;
+      }
+
+      function readMapCamera(map) {
+        const center = map.getCenter();
+        return {
+          center: [wrapLongitude(center.lng), center.lat], zoom: map.getZoom(),
+          bearing: map.getBearing(), pitch: map.getPitch()
+        };
+      }
+
+      function validCamera(camera) {
+        return camera && Array.isArray(camera.center) && camera.center.length === 2 &&
+          camera.center.every(Number.isFinite) && camera.center[0] >= -180 && camera.center[0] <= 180 &&
+          camera.center[1] >= -90 && camera.center[1] <= 90 && Number.isFinite(camera.zoom) &&
+          camera.zoom >= 0 && camera.zoom <= 24 && Number.isFinite(camera.bearing) &&
+          camera.bearing >= -180 && camera.bearing <= 180 && Number.isFinite(camera.pitch) &&
+          camera.pitch >= 0 && camera.pitch <= 85;
+      }
+
+      function projectFeature(feature) {
+        return {
+          layerId: String(feature.layer?.id || "").slice(0, 256),
+          id: ["number", "string"].includes(typeof feature.id) ? feature.id : null,
+          geometryType: String(feature.geometry?.type || "Unknown").slice(0, 32),
+          properties: sanitizeProperties(feature.properties)
+        };
+      }
+
+      function sanitizeProperties(input) {
+        const result = {};
+        for (const key of Object.keys(input || {}).sort().slice(0, 64)) {
+          if (key.length > 128) continue;
+          const value = input[key];
+          if (typeof value === "boolean" || (typeof value === "number" && Number.isFinite(value))) result[key] = value;
+          else if (typeof value === "string") result[key] = value.slice(0, 512);
+        }
+        return result;
+      }
+
+      function findSidecarLayer(document, layerId) {
+        const layers = document?.layers;
+        if (Array.isArray(layers)) return layers.find((layer) => layer?.id === layerId || layer?.layerId === layerId);
+        if (layers && typeof layers === "object") return layers[layerId];
+        return undefined;
+      }
+
+      function sidecarLayerWithSemanticAttribution(layer) {
+        // Sidecar v1 proves semantic provenance, not token provenance. Keep explicit
+        // tokens when present, but never infer them by matching compiled values.
+        const contributions = Array.isArray(layer?.contributions) ? layer.contributions : [];
+        const semanticAttribution = contributions.flatMap((contribution) => {
+          const semanticOwner = typeof contribution?.owner === "string" ? contribution.owner : undefined;
+          const semanticTarget = typeof contribution?.target === "string" ? contribution.target : undefined;
+          if (!semanticOwner || !semanticTarget) return [];
+          const operations = Array.isArray(contribution.operations) ? contribution.operations : [];
+          const authoringPaths = [...new Set([
+            "modules." + semanticOwner,
+            ...causalStringArray(contribution.authoringPaths),
+            ...(operations.length > 0 ? ["modules." + semanticOwner + ".renderStack"] : [])
+          ])];
+          const themeTokens = causalArray(contribution.themeTokens);
+          return [{
+            semanticOwner,
+            semanticTarget,
+            authoringPaths,
+            ...(themeTokens.length > 0 ? {themeTokens} : {})
+          }];
+        });
+        return {...layer, semanticAttribution};
+      }
+
+      function causalStringArray(value) {
+        return causalArray(value).filter((entry) => typeof entry === "string");
+      }
+
+      function causalArray(value) {
+        return Array.isArray(value) ? value.slice(0, 64) : [];
+      }
+
+      function markSideRuntimeError(side, input) {
+        const message = sanitizeRuntimeMessage(safeErrorMessage(input));
+        if (!side.runtimeErrors.includes(message)) side.runtimeErrors.push(message);
+        side.runtimeErrors = side.runtimeErrors.slice(-16);
+        side.runtimeFailed = true;
+        updateDocumentReadiness();
+      }
+
+      function sanitizeRuntimeMessage(value) {
+        return String(value).replace(/https?:\\/\\/[^\\s)]+/gu, (url) => {
+          try { return new URL(url).origin; } catch { return "[url]"; }
+        }).slice(0, 512);
+      }
+
+      function parseColor(value) {
+        if (typeof value !== "string") return undefined;
+        const hex = /^#([a-f\\d]{3}|[a-f\\d]{6}|[a-f\\d]{8})$/iu.exec(value);
+        if (hex) {
+          let digits = hex[1];
+          if (digits.length === 3) digits = digits.split("").map((part) => part + part).join("");
+          const alpha = digits.length === 8 ? parseInt(digits.slice(6, 8), 16) / 255 : 1;
+          return [parseInt(digits.slice(0, 2), 16), parseInt(digits.slice(2, 4), 16), parseInt(digits.slice(4, 6), 16), alpha];
+        }
+        const rgb = /^rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)(?:\\s*,\\s*([\\d.]+))?\\s*\\)$/iu.exec(value);
+        return rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3]), rgb[4] === undefined ? 1 : Number(rgb[4])] : undefined;
+      }
+
+      function colorToCss(color) {
+        return "rgba(" + color.slice(0, 3).map((part) => Math.round(part)).join(",") + "," + Math.max(0, Math.min(1, color[3])) + ")";
+      }
+
+      function boundedJson(value) {
+        let result;
+        try { result = JSON.stringify(value, null, 2); } catch { result = "[unserializable]"; }
+        if (typeof result !== "string") result = String(value);
+        return result.length > 12_000 ? result.slice(0, 12_000) + "\\n\u2026" : result;
+      }
+      function camerasEqual(left, right) {
+        return Boolean(left && right) &&
+          Math.abs(left.center[0] - right.center[0]) < 1e-7 &&
+          Math.abs(left.center[1] - right.center[1]) < 1e-7 &&
+          Math.abs(left.zoom - right.zoom) < 1e-7 &&
+          Math.abs(left.bearing - right.bearing) < 1e-7 &&
+          Math.abs(left.pitch - right.pitch) < 1e-7;
+      }
+      function formatCurveValue(value) {
+        if (typeof value === "number" && Number.isFinite(value)) return formatNumber(value);
+        return typeof value === "string" ? value : boundedJson(value);
+      }
+      function singleQueryValue(query, name) {
+        const values = query.getAll(name);
+        return values.length === 1 ? values[0] : undefined;
+      }
+      function validPortableName(value) {
+        return typeof value === "string" &&
+          /^[a-z][a-z0-9-]{0,63}$/u.test(value) &&
+          value !== "constructor" && value !== "prototype" &&
+          !/^(?:aux|con|nul|prn|com[1-9]|lpt[1-9])$/u.test(value);
+      }
+      function validConcreteThemeName(value) { return validPortableName(value) && value !== "system"; }
+      function quoteCliArgument(value) {
+        if (/^[A-Za-z0-9_./:@%+=,-]+$/u.test(value)) return value;
+        const quote = String.fromCharCode(39);
+        const escapedQuote = quote + '"' + quote + '"' + quote;
+        return quote + value.replaceAll(quote, escapedQuote) + quote;
+      }
+      function safeErrorMessage(error) { return error instanceof Error ? error.message : String(error || "Unknown error"); }
+      function boundedNumber(value, minimum, maximum, fallback) { return Number.isFinite(value) ? Math.max(minimum, Math.min(maximum, value)) : fallback; }
+      function boundedInteger(value, minimum, maximum, fallback) { return Number.isInteger(value) && value >= minimum && value <= maximum ? value : fallback; }
+      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) { globalThis.__tileflowInspectorUI?.feedback(value); }
+      ${controlsClient}
+      ${workbenchClient}
+      globalThis.__tileflowInspectorHost = {
+        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(true); } },
+        inspect: (enabled) => setInspectionEnabled(enabled), inspecting: () => inspectionEnabled,
+        controls: () => loadMapControls(),
+        sprites: () => loadSprites(states[activeSideId])
+      };
+    </script>
+    <script type="module"${nonceAttribute} src="${fontBasePath}/__workbench-runtime/inspector.js"></script>
+  </body>
+</html>`;
+}
+function serializeInlineJson(value) {
+  return JSON.stringify(value).replace(
+    /[<>&\u2028\u2029]/gu,
+    (character) => `\\u${character.codePointAt(0).toString(16).padStart(4, "0")}`
+  );
+}
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/gu, (character) => {
+    switch (character) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      default:
+        return "&#39;";
+    }
+  });
+}
+
+// src/comparison.ts
+var tileflowComparisonSchemaVersion = 1;
+function createTileflowComparisonRequestHandler(options) {
+  const comparisonBasePath = normalizeTileflowBasePath(options.basePath);
+  const left = normalizeSide(options.left, "left", comparisonBasePath);
+  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(
+        "Inspector 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 Inspector", "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/inspector.js`) {
+      if (request.method !== "GET" && request.method !== "HEAD")
+        return jsonResponse({ error: "Method not allowed" }, 405);
+      const source = await readFile(
+        new URL("../dist/inspector-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 (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);
+      }
+      const cspNonce = randomBytes(18).toString("base64");
+      const html = renderTileflowComparisonHtml({
+        basePath: comparisonBasePath,
+        cspNonce,
+        initialMode,
+        left: publicSide(left),
+        ...right ? { right: publicSide(right) } : {},
+        schemaVersion: tileflowComparisonSchemaVersion,
+        title,
+        ...workbenchUrl ? { workbenchUrl } : {}
+      });
+      return new Response(request.method === "HEAD" ? null : html, {
+        headers: {
+          "Cache-Control": "no-store",
+          "Content-Security-Policy": comparisonContentSecurityPolicy(cspNonce),
+          "Content-Type": "text/html; charset=utf-8",
+          "Referrer-Policy": "no-referrer",
+          "X-Content-Type-Options": "nosniff"
+        }
+      });
+    }
+    return jsonResponse({ error: "Not found" }, 404);
+  };
+}
+function comparisonContentSecurityPolicy(nonce) {
+  return [
+    "default-src 'none'",
+    "base-uri 'none'",
+    "connect-src 'self'",
+    "font-src 'self'",
+    "form-action 'none'",
+    "frame-ancestors 'none'",
+    "frame-src 'self'",
+    "img-src 'self' blob: data:",
+    "object-src 'none'",
+    `script-src 'nonce-${nonce}'`,
+    `style-src-elem 'nonce-${nonce}'`,
+    "style-src-attr 'unsafe-inline'"
+  ].join("; ");
+}
+function normalizeSide(side, name, comparisonBasePath) {
+  const basePath = normalizeTileflowBasePath(side.basePath);
+  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}.`
+    );
+  }
+  if (typeof side.handler !== "function") {
+    throw new TypeError(`Tileflow comparison ${name} handler must be a function.`);
+  }
+  return {
+    ...side,
+    basePath,
+    ...side.captureConfig === void 0 ? {} : { captureConfig: normalizeCaptureConfig(side.captureConfig, `${name} captureConfig`) },
+    eventsUrl: `${basePath}/__events`,
+    label: normalizeLabel(side.label, `${name} label`),
+    previewUrl: normalizeOwnedUrl(side.previewUrl, basePath, `${name} previewUrl`),
+    ...side.sidecarUrl ? { sidecarUrl: normalizeOwnedUrl(side.sidecarUrl, basePath, `${name} sidecarUrl`) } : {},
+    statusUrl: `${basePath}/__status`
+  };
+}
+function publicSide(side) {
+  return {
+    basePath: side.basePath,
+    ...side.captureConfig ? { captureConfig: side.captureConfig } : {},
+    eventsUrl: side.eventsUrl,
+    label: side.label,
+    previewUrl: side.previewUrl,
+    ...side.sidecarUrl ? { sidecarUrl: side.sidecarUrl } : {},
+    statusUrl: side.statusUrl
+  };
+}
+function normalizeCaptureConfig(value, label) {
+  if (typeof value !== "string" || value.length === 0 || value.length > 4096 || value !== value.trim() || value.startsWith("/") || value.includes("\\") || /^[A-Za-z]:/u.test(value) || /[\p{Cc}]/u.test(value)) {
+    throw new TypeError(`Invalid Tileflow comparison ${label}.`);
+  }
+  const segments = value.split("/");
+  if (segments.some((segment) => segment === "" || segment === "." || segment === "..")) {
+    throw new TypeError(
+      `Tileflow comparison ${label} must be a normalized path inside the current working directory.`
+    );
+  }
+  return value;
+}
+function normalizeOwnedUrl(value, basePath, label) {
+  if (typeof value !== "string" || value.length === 0 || value.length > 4096 || value !== value.trim() || !value.startsWith("/") || value.includes("\\") || /[\p{Cc}]/u.test(value)) {
+    throw new TypeError(`Invalid Tileflow comparison ${label}.`);
+  }
+  let parsed;
+  try {
+    parsed = new URL(value, "http://tileflow.local");
+  } catch {
+    throw new TypeError(`Invalid Tileflow comparison ${label}.`);
+  }
+  if (parsed.origin !== "http://tileflow.local" || parsed.hash || !matchesBasePath(parsed.pathname, basePath)) {
+    throw new TypeError(`Tileflow comparison ${label} must remain below ${basePath}.`);
+  }
+  return `${parsed.pathname}${parsed.search}`;
+}
+function normalizeLabel(value, label) {
+  if (typeof value !== "string" || value.length === 0 || value.length > 160 || value !== value.trim() || /[\p{Cc}]/u.test(value)) {
+    throw new TypeError(`Invalid Tileflow comparison ${label}.`);
+  }
+  return value.split(" \xB7 ").map((part, index) => index > 0 && /[\\/]/u.test(part) ? part.split(/[\\/]/u).at(-1) : part).join(" \xB7 ");
+}
+function assertDisjointSideRoutes(left, right) {
+  if (matchesBasePath(left, right) || matchesBasePath(right, left)) {
+    throw new TypeError("Tileflow comparison side base paths must be disjoint.");
+  }
+}
+function isComparisonRoot(pathname, basePath) {
+  return basePath ? pathname === basePath || pathname === `${basePath}/` : pathname === "/";
+}
+function matchesBasePath(pathname, basePath) {
+  return pathname === basePath || pathname.startsWith(`${basePath}/`);
+}
+function jsonResponse(body, status) {
+  return new Response(`${JSON.stringify(body, null, 2)}
+`, {
+    status,
+    headers: {
+      "Cache-Control": "no-store",
+      "Content-Type": "application/json; charset=utf-8",
+      "X-Content-Type-Options": "nosniff"
+    }
+  });
+}
+
+// src/server.ts
+function getTileflowStyleSelection(path) {
+  const match = /^\/styles\/([a-z][a-z0-9-]{0,63})\/([a-z][a-z0-9-]{0,63})\.json$/u.exec(path);
+  return match?.[1] && match[2] && tileflowMapIdSchema.safeParse(match[1]).success && tileflowThemeNameSchema.safeParse(match[2]).success ? { mapName: match[1], themeName: match[2] } : void 0;
+}
+function getTileflowStyleInspectionSelection(path) {
+  const match = /^\/__inspection\/([a-z][a-z0-9-]{0,63})\/([a-z][a-z0-9-]{0,63})\.json$/u.exec(
+    path
+  );
+  return match?.[1] && match[2] && tileflowMapIdSchema.safeParse(match[1]).success && tileflowThemeNameSchema.safeParse(match[2]).success ? { mapName: match[1], themeName: match[2] } : void 0;
+}
+function isTileflowRequestUrl(url, basePath) {
+  return getTileflowRequestPath(url, basePath) !== null;
+}
+function getTileflowRequestPath(url, basePath) {
+  const pathname = getRequestPathname(url);
+  if (pathname === null) return null;
+  const path = stripTileflowBasePath(pathname, normalizeTileflowBasePath(basePath));
+  return path !== null && isOwnedTileflowRequestPath(path) ? path : null;
+}
+function createTileflowNodeRequest(request) {
+  const protocol = getNodeHeader(request, "x-forwarded-proto") ?? "http";
+  const host = getNodeHeader(request, "host") ?? "localhost";
+  return new Request(`${protocol}://${host}${request.url ?? "/"}`, {
+    headers: Object.fromEntries(
+      Object.entries(request.headers).flatMap(
+        ([name, value]) => value === void 0 ? [] : [[name, Array.isArray(value) ? value.join(", ") : value]]
+      )
+    ),
+    method: request.method
+  });
+}
+async function writeTileflowNodeResponse(response, tileflowResponse) {
+  response.statusCode = tileflowResponse.status;
+  tileflowResponse.headers.forEach((value, key) => {
+    response.setHeader(key, value);
+  });
+  if (!tileflowResponse.body) {
+    response.end();
+    return;
+  }
+  const reader = tileflowResponse.body.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      if (response.destroyed) {
+        await reader.cancel();
+        return;
+      }
+      response.write(Buffer.from(value));
+    }
+    response.end();
+  } finally {
+    reader.releaseLock();
+  }
+}
+function createTileflowDevRequestHandler(options = {}) {
+  const basePath = normalizeTileflowBasePath(options.basePath);
+  const configPath = options.config ?? defaultTileflowConfigPath;
+  const cwd = options.cwd ?? process.cwd();
+  const apiBaseUrl = options.apiBaseUrl ?? defaultTileflowApiUrl;
+  let ownedSessionPromise;
+  const lineBackgroundGlyphs = createTileflowLineBackgroundGlyphResponder({ cwd });
+  let closed = false;
+  let lastOrigin;
+  let controlsGeneration;
+  const controlsCache = /* @__PURE__ */ new Map();
+  const loadOwnedSession = (origin) => {
+    lastOrigin = origin;
+    ownedSessionPromise ??= createTileflowArtifactSession({
+      assetBaseUrl: `${origin}${basePath}`,
+      config: configPath,
+      cwd,
+      inspection: options.inspection,
+      styleBaseUrl: options.styleBaseUrl ?? `${origin}${basePath}`,
+      apiBaseUrl
+    }).catch((error) => {
+      ownedSessionPromise = void 0;
+      throw error;
+    });
+    return ownedSessionPromise;
+  };
+  const handleTileflowDevRequest = async (request) => {
+    if (closed) return jsonResponse2({ error: "Tileflow request handler is closed." }, 503);
+    if (request.method !== "GET" && request.method !== "HEAD") {
+      return jsonResponse2({ error: "Method not allowed" }, 405);
+    }
+    const url = new URL(request.url);
+    const path = getTileflowRequestPath(url.pathname, basePath);
+    if (path === null) {
+      return jsonResponse2({ error: "Not found" }, 404);
+    }
+    let acquisition;
+    try {
+      if (path === "/__events") {
+        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-ATLLYY72.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));
+      }
+      if (path === "/" || path === "") {
+        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[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: requestedScenes[0] ?? (requestedMaps.length ? void 0 : options.scene),
+          theme: requestedTheme
+        }) : 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(
+          renderTileflowPreviewHtml(
+            preview,
+            basePath,
+            createTileflowArtifactStatus(state),
+            isSemanticPreview,
+            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;
+        if (!glyphRequest || !upstream) return jsonResponse2({ error: "Unknown glyph range." }, 404);
+        return await lineBackgroundGlyphs(upstream, glyphRequest.fontStack, glyphRequest.range);
+      }
+      if (path.startsWith("/tilesets/")) {
+        const fileName = path.replace(/^\/+/, "");
+        const localTileset = artifacts.localTilesets?.find(
+          (candidate) => candidate.fileName === fileName
+        );
+        if (!localTileset) return jsonResponse2({ error: "Unknown local tileset." }, 404);
+        return localTilesetResponse(request, localTileset);
+      }
+      if (path.startsWith("/generations/") && "files" in artifacts) {
+        const fileName = path.replace(/^\/+/, "");
+        const asset = artifacts.files?.find((candidate) => candidate.fileName === fileName);
+        if (!asset) return jsonResponse2({ error: `Unknown generation asset: ${fileName}` }, 404);
+        return assetResponse(asset);
+      }
+      if (path === "/manifest.json") {
+        return jsonResponse2(artifacts.manifest);
+      }
+      if (path === "/build-manifest.json") {
+        return jsonResponse2(artifacts.buildManifest);
+      }
+      if (path.startsWith("/__inspection/")) {
+        const selection = getTileflowStyleInspectionSelection(path);
+        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);
+        }
+        return compactJsonResponse(inspection);
+      }
+      if (path.startsWith("/styles/")) {
+        const selection = getTileflowStyleSelection(path);
+        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);
+        }
+        return compactJsonResponse(style);
+      }
+      if (path.startsWith("/icons/")) {
+        const assetName = path.replace(/^\/+/, "");
+        const asset = artifacts.assets.find((candidate) => candidate.fileName === assetName);
+        if (!asset) {
+          return jsonResponse2({ error: `Unknown icon asset: ${assetName}` }, 404);
+        }
+        return assetResponse(asset);
+      }
+      if (path.startsWith("/fonts/")) {
+        const assetName = path.replace(/^\/+/, "");
+        const asset = artifacts.assets.find((candidate) => candidate.fileName === assetName);
+        if (!asset) {
+          return jsonResponse2({ error: `Unknown font asset: ${assetName}` }, 404);
+        }
+        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();
+    }
+  };
+  return Object.assign(handleTileflowDevRequest, {
+    async close() {
+      if (closed) return;
+      closed = true;
+      const ownedSession = await ownedSessionPromise?.catch(() => void 0);
+      await ownedSession?.close();
+    },
+    async refresh() {
+      if (closed) return;
+      if (options.session) {
+        await options.session.refresh("request-handler");
+        return;
+      }
+      if (!lastOrigin) return;
+      await (await loadOwnedSession(lastOrigin)).refresh("request-handler");
+    }
+  });
+}
+async function localTilesetResponse(request, file) {
+  const headers = new Headers({
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Expose-Headers": "ETag",
+    "Accept-Ranges": "bytes",
+    "Cache-Control": "no-store",
+    "Content-Type": "application/vnd.pmtiles",
+    ETag: file.etag
+  });
+  if (request.method === "HEAD") {
+    headers.set("Content-Length", String(file.byteLength));
+    return new Response(null, { headers, status: 200 });
+  }
+  const range = parseLocalTilesetRange(request.headers.get("range"), file.byteLength);
+  if (!range) {
+    headers.set("Content-Range", `bytes */${file.byteLength}`);
+    return new Response(null, { headers, status: 416 });
+  }
+  const length = range.end - range.start + 1;
+  if (length > 16 * 1024 * 1024) {
+    headers.set("Content-Range", `bytes */${file.byteLength}`);
+    return new Response(null, { headers, status: 416 });
+  }
+  const handle = await open(file.sourcePath, "r");
+  try {
+    const bytes = new Uint8Array(length);
+    let read = 0;
+    while (read < length) {
+      const result = await handle.read(bytes, read, length - read, range.start + read);
+      if (result.bytesRead === 0) throw new Error("Local PMTiles snapshot ended during read.");
+      read += result.bytesRead;
+    }
+    headers.set("Content-Length", String(length));
+    headers.set("Content-Range", `bytes ${range.start}-${range.end}/${file.byteLength}`);
+    return new Response(bytes, { headers, status: 206 });
+  } finally {
+    await handle.close();
+  }
+}
+function parseLocalTilesetRange(value, size) {
+  const match = value?.match(/^bytes=(\d+)-(\d*)$/u);
+  if (!match) return null;
+  const start = Number(match[1]);
+  const requestedEnd = match[2] ? Number(match[2]) : size - 1;
+  const end = Math.min(requestedEnd, size - 1);
+  if (!Number.isSafeInteger(start) || !Number.isSafeInteger(requestedEnd) || start < 0 || start >= size || requestedEnd < start) {
+    return null;
+  }
+  return { end, start };
+}
+function createTileflowArtifactStatus(state) {
+  return {
+    schemaVersion: tileflowArtifactSessionSchemaVersion,
+    generation: state.generation,
+    status: state.status,
+    ..."lastGoodGeneration" in state && state.lastGoodGeneration !== void 0 ? { lastGoodGeneration: state.lastGoodGeneration } : {},
+    ...state.status === "invalid" ? { diagnostics: state.diagnostics } : {}
+  };
+}
+function unavailableArtifactsResponse(state) {
+  return jsonResponse2(
+    {
+      error: "No valid Tileflow artifact generation is available.",
+      ...createTileflowArtifactStatus(state)
+    },
+    409
+  );
+}
+function eventStreamResponse(session) {
+  const encoder = new TextEncoder();
+  let unsubscribe = () => {
+  };
+  const stream = new ReadableStream({
+    start(controller) {
+      const enqueue = (state) => {
+        const status = createTileflowArtifactStatus(state);
+        controller.enqueue(
+          encoder.encode(`event: ${status.status}
+data: ${JSON.stringify(status)}
+
+`)
+        );
+      };
+      enqueue(session.getState());
+      unsubscribe = session.subscribe(enqueue);
+    },
+    cancel() {
+      unsubscribe();
+    }
+  });
+  return new Response(stream, {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+      "Content-Type": "text/event-stream; charset=utf-8",
+      "X-Accel-Buffering": "no"
+    }
+  });
+}
+function getNodeHeader(request, name) {
+  const value = request.headers[name];
+  return Array.isArray(value) ? value[0] : value;
+}
+function stripTileflowBasePath(pathname, basePath) {
+  if (!basePath) {
+    return pathname;
+  }
+  if (pathname === basePath) {
+    return "/";
+  }
+  if (pathname.startsWith(`${basePath}/`)) {
+    return pathname.slice(basePath.length);
+  }
+  return null;
+}
+function getRequestPathname(url) {
+  try {
+    return new URL(url ?? "/", "http://tileflow.local").pathname;
+  } catch {
+    return null;
+  }
+}
+function isOwnedTileflowRequestPath(path) {
+  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") {
+    return jsonResponse2({ error: error.message }, 400);
+  }
+  if (error instanceof TileflowStyleValidationError) {
+    return jsonResponse2(
+      {
+        error: error.message,
+        issues: error.issues
+      },
+      400
+    );
+  }
+  if (error instanceof TileflowValidationError) {
+    return jsonResponse2(
+      {
+        error: error.message,
+        messages: error.messages
+      },
+      400
+    );
+  }
+  const message = error instanceof Error ? error.message : "Unknown error";
+  return jsonResponse2({ error: message }, 500);
+}
+function jsonResponse2(body, status = 200) {
+  return new Response(`${JSON.stringify(body, null, 2)}
+`, {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Cache-Control": "no-store",
+      "Content-Type": "application/json; charset=utf-8"
+    },
+    status
+  });
+}
+function compactJsonResponse(body, status = 200) {
+  return new Response(`${JSON.stringify(body)}
+`, {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Cache-Control": "no-store",
+      "Content-Type": "application/json; charset=utf-8"
+    },
+    status
+  });
+}
+function htmlResponse(body, status = 200) {
+  return new Response(body, {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Cache-Control": "no-store",
+      "Content-Type": "text/html; charset=utf-8"
+    },
+    status
+  });
+}
+function assetResponse(asset) {
+  const body = typeof asset.source === "string" ? asset.source : Buffer.from(asset.source);
+  return new Response(body, {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Cache-Control": "no-store",
+      "Content-Type": asset.contentType
+    }
+  });
+}
+export {
+  createTileflowArtifactDiagnostics,
+  createTileflowArtifactStatus,
+  createTileflowComparisonRequestHandler,
+  createTileflowDevRequestHandler,
+  createTileflowNodeRequest,
+  getTileflowAssetBasePath,
+  getTileflowAssetFileName,
+  getTileflowRequestPath,
+  getTileflowStyleInspectionSelection,
+  getTileflowStyleSelection,
+  isTileflowRequestUrl,
+  joinTileflowPublicUrl,
+  normalizeTileflowBasePath,
+  resolveTileflowArtifactPublicUrls,
+  tileflowArtifactSessionSchemaVersion,
+  tileflowComparisonSchemaVersion,
+  writeTileflowNodeResponse
+};