@tileflow/dev 0.1.0-alpha.36 → 0.1.0-alpha.37

package/dist/{devtools-browser.js → inspector-browser.js}

@@ -9013,7 +9013,7 @@ async function readBoundedTileflowResponse(response, maximumBytes) {
   return result;
 }
 
-// src/devtools/font-preview.ts
+// src/inspector/font-preview.ts
 var fontPreviewLines = ["Aa Bb Cc 0123456789", "Streets, parks and caf\xE9s."];
 function readPreviewGlyphs(bytes2) {
   const glyphs = /* @__PURE__ */ new Map();
@@ -9070,12 +9070,12 @@ var FontPreviews = class {
     canvas.height = 92 * ratio;
     canvas.style.width = "320px";
     canvas.style.height = "92px";
-    canvas.className = "dt-font-preview";
+    canvas.className = "inspector-font-preview";
     canvas.setAttribute("role", "img");
     canvas.setAttribute("aria-label", `${font}: ${lines.join(" / ")}`);
     const ctx = canvas.getContext("2d");
     ctx.scale(ratio, ratio);
-    const ink = getComputedStyle(document.body).getPropertyValue("--ink").trim() || "#30251F";
+    const ink = getComputedStyle(document.body).getPropertyValue("--ink").trim() || "#171717";
     const color = Color.parse(ink);
     const rgb = [color.r, color.g, color.b].map((n) => Math.round(n * 255));
     ctx.fillStyle = ink;
@@ -9168,7 +9168,7 @@ var FontPreviews = class {
   }
 };
 
-// src/devtools/sprite-catalog.ts
+// src/inspector/sprite-catalog.ts
 var SpriteCatalog = class {
   cache = /* @__PURE__ */ new Map();
   generation = "";
@@ -9244,7 +9244,7 @@ var SpriteCatalog = class {
   }
 };
 
-// src/devtools/theme-labels.ts
+// src/inspector/theme-labels.ts
 var themeLabels = {
   light: "Light",
   default: "Default",
@@ -9265,7 +9265,7 @@ function themeVariantLabel(variant, metadata) {
   return `${themeLabel(variant.palette, metadata)}${moment ? ` \xB7 ${moment[0].toUpperCase()}${moment.slice(1)}` : ""}`;
 }
 
-// src/devtools/assets.ts
+// src/inspector/assets.ts
 function el(tag, className = "", text = "") {
   const node = document.createElement(tag);
   node.className = className;
@@ -9323,7 +9323,7 @@ var AssetsPanel = class {
   }) {
     this.active = active2;
     this.revealLayer = revealLayer;
-    const tabs = el("div", "dt-subtabs");
+    const tabs = el("div", "inspector-subtabs");
     tabs.setAttribute("role", "tablist");
     tabs.setAttribute("aria-label", "Asset categories");
     for (const category of ["Sprites", "Models", "Fonts"]) {
@@ -9333,9 +9333,9 @@ var AssetsPanel = class {
         category === "Sprites" ? "Icons" : category === "Models" ? "3D models" : category
       );
       tab.type = "button";
-      tab.id = `dt-assets-${category.toLowerCase()}`;
+      tab.id = `inspector-assets-${category.toLowerCase()}`;
       tab.setAttribute("role", "tab");
-      tab.setAttribute("aria-controls", "dt-assets-content");
+      tab.setAttribute("aria-controls", "inspector-assets-content");
       tab.addEventListener("click", () => this.select(category));
       tab.addEventListener("keydown", (event) => {
         const names = [...this.tabs.keys()];
@@ -9375,7 +9375,7 @@ var AssetsPanel = class {
     this.palette.onchange = changeVariant;
     this.moment.onchange = changeVariant;
     this.toolbar.append(this.search, this.sampleInput, this.palette, this.moment);
-    this.content.id = "dt-assets-content";
+    this.content.id = "inspector-assets-content";
     this.content.setAttribute("role", "tabpanel");
     this.status.setAttribute("role", "status");
     root.append(tabs, this.toolbar, this.content, this.status);
@@ -9397,12 +9397,12 @@ var AssetsPanel = class {
   sample = "Streets, parks and caf\xE9s.";
   sampleInput = el("input");
   fontTimer;
-  assetAside = el("aside", "dt-asset-aside");
+  assetAside = el("aside", "inspector-asset-aside");
   revealLayer;
   search = el("input");
-  toolbar = el("div", "dt-tools");
-  content = el("div", "dt-scroll dt-assets-content");
-  status = el("div", "dt-footer");
+  toolbar = el("div", "inspector-tools");
+  content = el("div", "inspector-scroll inspector-assets-content");
+  status = el("div", "inspector-footer");
   map;
   style;
   dirty = true;
@@ -9467,7 +9467,7 @@ var AssetsPanel = class {
     this.status.textContent = "";
     this.status.title = "";
     if (!this.style || !this.map) {
-      this.content.append(el("p", "dt-empty", "Waiting for map assets\u2026"));
+      this.content.append(el("p", "inspector-empty", "Waiting for map assets\u2026"));
       return;
     }
     if (this.category === "Sprites") {
@@ -9478,7 +9478,7 @@ var AssetsPanel = class {
       this.renderModels();
       return;
     }
-    const values2 = el("dl", "dt-kv");
+    const values2 = el("dl", "inspector-kv");
     if (this.category === "Glyphs") {
       values2.append(
         el("dt", "", "Glyph URL"),
@@ -9498,17 +9498,17 @@ var AssetsPanel = class {
           })
         ])
       ].sort();
-      const list = el("div", "dt-font-list");
+      const list = el("div", "inspector-font-list");
       this.fontRun = new AbortController();
       const { signal } = this.fontRun;
       for (const font of fonts) {
-        const card = el("figure", "dt-font-card");
-        const preview = el("div", "dt-font-sample");
-        preview.append(el("span", "dt-font-loading", "Loading preview\u2026"));
+        const card = el("figure", "inspector-font-card");
+        const preview = el("div", "inspector-font-sample");
+        preview.append(el("span", "inspector-font-loading", "Loading preview\u2026"));
         card.append(el("figcaption", "", font), preview);
         const entries = this.map.style?.glyphManager?.entries;
         const entry = entries?.[font], ranges = Object.keys(entry?.ranges ?? {});
-        const resources = this.active().frame.contentWindow?.__tileflowDevtoolsObserver?.records.filter((record) => record.kind === "Font") ?? [];
+        const resources = this.active().frame.contentWindow?.__tileflowInspectorObserver?.records.filter((record) => record.kind === "Font") ?? [];
         const matching = resources.filter((record) => {
           try {
             return decodeURIComponent(record.url).includes(font);
@@ -9516,12 +9516,12 @@ var AssetsPanel = class {
             return false;
           }
         });
-        const stats = el("div", "dt-font-ranges");
+        const stats = el("div", "inspector-font-ranges");
         for (const range of ranges)
           stats.append(
             el(
               "code",
-              "dt-filter-chip",
+              "inspector-filter-chip",
               /^\d+$/u.test(range) ? `${Number(range) * 256}\u2013${Number(range) * 256 + 255}` : range
             )
           );
@@ -9533,10 +9533,10 @@ var AssetsPanel = class {
           )
         );
         card.append(stats);
-        const uses = el("div", "dt-tile-chip-list");
+        const uses = el("div", "inspector-tile-chip-list");
         for (const layer of this.style.layers)
           if (layer.type === "symbol" && JSON.stringify(layer.layout?.["text-font"] ?? "").includes(font.split(",")[0])) {
-            const link = el("button", "dt-tile-chip", layer.id);
+            const link = el("button", "inspector-tile-chip", layer.id);
             link.onclick = () => this.revealLayer(layer.id);
             uses.append(link);
           }
@@ -9546,13 +9546,13 @@ var AssetsPanel = class {
           if (!signal.aborted) preview.replaceChildren(canvas);
         }).catch((error2) => {
           if (signal.aborted) return;
-          preview.replaceChildren(el("span", "dt-font-loading", "Preview unavailable"));
+          preview.replaceChildren(el("span", "inspector-font-loading", "Preview unavailable"));
           preview.title = error2 instanceof Error ? error2.message : String(error2);
         });
       }
       this.content.append(list);
       if (!fonts.length)
-        this.content.append(el("p", "dt-empty", "No static font stacks in this style."));
+        this.content.append(el("p", "inspector-empty", "No static font stacks in this style."));
       this.status.textContent = `${fonts.length} font families`;
     }
     this.content.append(values2);
@@ -9568,14 +9568,14 @@ var AssetsPanel = class {
       this.content.append(
         el(
           "p",
-          "dt-empty",
+          "inspector-empty",
           this.names.length ? "No icons match this filter." : "No sprite images registered in this map."
         )
       );
       return;
     }
-    const grid = el("div", "dt-sprite-grid");
-    const layout = el("div", "dt-asset-layout"), main = el("div", "dt-asset-main");
+    const grid = el("div", "inspector-sprite-grid");
+    const layout = el("div", "inspector-asset-layout"), main = el("div", "inspector-asset-main");
     main.append(grid);
     layout.append(main, this.assetAside);
     this.content.append(layout);
@@ -9594,7 +9594,7 @@ var AssetsPanel = class {
     const append = () => {
       const fragment = document.createDocumentFragment();
       for (const end = Math.min(cursor + 80, names.length); cursor < end; cursor++) {
-        const name = names[cursor], card = el("figure", "dt-sprite-card");
+        const name = names[cursor], card = el("figure", "inspector-sprite-card");
         card.dataset.sprite = name;
         card.tabIndex = 0;
         card.setAttribute("role", "button");
@@ -9614,9 +9614,9 @@ var AssetsPanel = class {
         });
         card.title = name;
         card.append(
-          el("div", "dt-sprite-preview"),
+          el("div", "inspector-sprite-preview"),
           el("figcaption", "", name),
-          el("small", "dt-sprite-size")
+          el("small", "inspector-sprite-size")
         );
         fragment.append(card);
         this.previews.observe(card);
@@ -9633,23 +9633,23 @@ var AssetsPanel = class {
     this.variantRun?.abort();
     this.variantRun = new AbortController();
     const signal = this.variantRun.signal;
-    const matrix = el("div", "dt-asset-variants");
+    const matrix = el("div", "inspector-asset-variants");
     const variants = (window.__tileflowScene?.variants() ?? []).filter(
       (v) => !v.timeOfDay || ["day", "night"].includes(v.timeOfDay)
     );
     if (!variants.length) {
-      const cell = el("div", "dt-asset-variant");
+      const cell = el("div", "inspector-asset-variant");
       cell.dataset.sprite = name;
-      cell.append(el("div", "dt-sprite-preview"), el("code", "", name), el("small"));
+      cell.append(el("div", "inspector-sprite-preview"), el("code", "", name), el("small"));
       this.drawSprite(map, cell);
       matrix.append(cell);
     }
     for (const variant of variants) {
-      const cell = el("div", "dt-asset-variant");
+      const cell = el("div", "inspector-asset-variant");
       cell.dataset.sprite = name;
       cell.dataset.night = String(variant.timeOfDay === "night");
       cell.append(
-        el("div", "dt-sprite-preview", "\u2026"),
+        el("div", "inspector-sprite-preview", "\u2026"),
         el("code", "", themeVariantLabel(variant, this.style?.metadata)),
         el("small")
       );
@@ -9660,18 +9660,18 @@ var AssetsPanel = class {
         cell.dataset.sprite = id;
         cell.title = mapped ? id : `${id} \xB7 exact atlas ID; no corresponding expression output found`;
         if (!result.icons.getImage(id)) {
-          cell.querySelector(".dt-sprite-preview").textContent = "Missing";
+          cell.querySelector(".inspector-sprite-preview").textContent = "Missing";
           return;
         }
-        cell.querySelector(".dt-sprite-preview").textContent = "";
+        cell.querySelector(".inspector-sprite-preview").textContent = "";
         this.drawSprite(result.icons, cell);
       }).catch(() => {
         if (!signal.aborted)
-          cell.querySelector(".dt-sprite-preview").textContent = "Unavailable";
+          cell.querySelector(".inspector-sprite-preview").textContent = "Unavailable";
       });
     }
     this.assetAside.append(matrix);
-    const image = map.getImage(name), values2 = el("dl", "dt-kv");
+    const image = map.getImage(name), values2 = el("dl", "inspector-kv");
     for (const [key, value] of Object.entries({
       Width: image?.data?.width,
       Height: image?.data?.height,
@@ -9679,12 +9679,12 @@ var AssetsPanel = class {
       SDF: image?.sdf
     }))
       values2.append(el("dt", "", key), el("dd", "", String(value ?? "Unavailable")));
-    this.assetAside.append(values2, el("div", "dt-section-heading", "Used by"));
+    this.assetAside.append(values2, el("div", "inspector-section-heading", "Used by"));
     const matches = (this.iconStyle ?? this.style).layers.filter(
       (layer) => layer.type === "symbol" && JSON.stringify(layer.layout?.["icon-image"] ?? "").includes(name)
     );
     for (const layer of matches) {
-      const link = el("button", "dt-tile-chip", layer.id);
+      const link = el("button", "inspector-tile-chip", layer.id);
       link.onclick = () => this.revealLayer(layer.id);
       this.assetAside.append(link);
     }
@@ -9692,7 +9692,7 @@ var AssetsPanel = class {
       this.assetAside.append(
         el(
           "p",
-          "dt-note",
+          "inspector-note",
           "No literal reference. Data-driven icon expressions may select this image."
         )
       );
@@ -9743,19 +9743,19 @@ var AssetsPanel = class {
       this.content.append(
         el(
           "p",
-          "dt-empty",
+          "inspector-empty",
           "No 3D model assets are loaded. Enable a 3D module or navigate to its coverage."
         )
       );
       return;
     }
-    const layout = el("div", "dt-asset-layout"), main = el("div", "dt-asset-main"), grid = el("div", "dt-model-grid");
+    const layout = el("div", "inspector-asset-layout"), main = el("div", "inspector-asset-main"), grid = el("div", "inspector-model-grid");
     if (!models.some((m) => m.id === this.selectedModel)) this.selectedModel = models[0].id;
     const show = (model) => {
       this.selectedModel = model.id;
       this.assetAside.replaceChildren(el("h3", "", model.id));
       this.assetAside.append(this.modelCanvas(model, 280));
-      const values2 = el("dl", "dt-kv");
+      const values2 = el("dl", "inspector-kv");
       for (const [key, value] of Object.entries({
         Module: model.module,
         Format: model.format,
@@ -9771,7 +9771,7 @@ var AssetsPanel = class {
         cell.setAttribute("aria-pressed", String(cell.dataset.model === model.id));
     };
     for (const model of models) {
-      const card = el("button", "dt-model-card");
+      const card = el("button", "inspector-model-card");
       card.dataset.model = model.id;
       card.append(
         this.modelCanvas(model, 160),
@@ -9858,7 +9858,7 @@ var AssetsPanel = class {
     return canvas;
   }
   drawSprite(map, card) {
-    const preview = card.querySelector(".dt-sprite-preview");
+    const preview = card.querySelector(".inspector-sprite-preview");
     try {
       const image = map.getImage(card.dataset.sprite);
       if (!image?.data || image.isWebGLImage) throw new Error("Preview unavailable");
@@ -9908,14 +9908,14 @@ var AssetsPanel = class {
   }
 };
 
-// src/devtools/map-value.ts
+// src/inspector/map-value.ts
 function mapValue(map, value) {
   if (value === void 0) return value;
   const realm = map.getContainer?.()?.ownerDocument?.defaultView;
   return (realm?.JSON ?? JSON).parse(JSON.stringify(value));
 }
 
-// src/devtools/style-edits.ts
+// src/inspector/style-edits.ts
 function propertySpec(type, section, name) {
   if (type === "custom" && section === "layout" && name === "visibility")
     return propertySpec("background", "layout", "visibility");
@@ -10749,13 +10749,13 @@ var VectorTile = class {
   }
 };
 
-// src/devtools/tiles.ts
+// src/inspector/tiles.ts
 function visibleTiles(map) {
   const managers = map.style?.tileManagers;
   if (!managers) return { supported: false, tiles: [] };
   const tiles = [];
   for (const [source, manager] of Object.entries(managers)) {
-    if (source.startsWith("__tileflow-devtools-")) continue;
+    if (source.startsWith("__tileflow-inspector-")) continue;
     for (const tile of manager?._inViewTiles?.getAllTiles?.() || []) {
       const canonical = tile.tileID?.canonical;
       if (!canonical || ![canonical.z, canonical.x, canonical.y].every(Number.isInteger)) continue;
@@ -10847,7 +10847,7 @@ function inspectTile(map, record) {
   return { ...result, ...decoded };
 }
 
-// src/devtools/beacon/runner.ts
+// src/inspector/beacon/runner.ts
 function readCamera(map) {
   const center = map.getCenter();
   return {
@@ -10859,12 +10859,12 @@ function readCamera(map) {
 }
 function moveCamera(map, camera, duration = 0, userInput = false) {
   const options = mapValue(map, { ...camera, duration });
-  const event = { tileflowDevtools: true, ...userInput ? { tileflowUserCamera: true } : {} };
+  const event = { tileflowInspector: true, ...userInput ? { tileflowUserCamera: true } : {} };
   if (duration) map.easeTo(options, event);
   else map.jumpTo(options, event);
 }
 
-// src/devtools/overdraw.ts
+// src/inspector/overdraw.ts
 var overdrawColors = [
   "#151b27",
   "#2563eb",
@@ -10953,7 +10953,7 @@ var OverdrawHeatmap = class {
   }
 };
 
-// src/devtools/debug.ts
+// src/inspector/debug.ts
 var el2 = (tag, cls = "", text = "") => {
   const node = document.createElement(tag);
   node.className = cls;
@@ -10964,16 +10964,16 @@ var DebugPanel = class {
   constructor(root, active2, overdraw) {
     this.active = active2;
     this.overdraw = overdraw;
-    const content = el2("div", "dt-scroll dt-card-page");
-    const overlays = el2("section", "dt-card");
-    overlays.append(el2("div", "dt-section-heading", "Map overlays"));
+    const content = el2("div", "inspector-scroll inspector-card-page");
+    const overlays = el2("section", "inspector-card");
+    overlays.append(el2("div", "inspector-section-heading", "Map overlays"));
     const specs = [
       ["showOverdrawInspector", "Overdraw", "How many times each pixel is painted per frame"],
       ["showCollisionBoxes", "Collision boxes", "Which labels and icons are placed or dropped"],
       ["showTileBoundaries", "Tile boundaries", "Edges and z/x/y of every loaded tile"]
     ];
     for (const [key, title, description] of specs) {
-      const row = el2("label", "dt-debug-overlay"), preview2 = el2("span", "dt-debug-preview"), copy = el2("span"), toggle = el2("input");
+      const row = el2("label", "inspector-debug-overlay"), preview2 = el2("span", "inspector-debug-preview"), copy = el2("span"), toggle = el2("input");
       preview2.innerHTML = this.preview(key);
       copy.append(el2("strong", "", title), el2("small", "", description));
       toggle.type = "checkbox";
@@ -10986,9 +10986,9 @@ var DebugPanel = class {
       if (key === "showOverdrawInspector") overlays.append(this.help);
       if (key === "showCollisionBoxes") overlays.append(this.collisionHelp);
     }
-    const legend = el2("div", "dt-overdraw-legend");
+    const legend = el2("div", "inspector-overdraw-legend");
     for (const passes of [0, 1, 2, 4, 8]) {
-      const item = el2("span", "dt-overdraw-key"), swatch = el2("i", "dt-overdraw-swatch");
+      const item = el2("span", "inspector-overdraw-key"), swatch = el2("i", "inspector-overdraw-swatch");
       swatch.style.background = overdrawColors[passes];
       item.append(swatch, document.createTextNode(passes === 8 ? "8+" : String(passes)));
       legend.append(item);
@@ -11011,9 +11011,9 @@ var DebugPanel = class {
       )
     );
     this.help.hidden = this.collisionHelp.hidden = true;
-    const scale = el2("section", "dt-card");
-    scale.append(el2("div", "dt-section-heading", "Scale factor"));
-    const controls = el2("div", "dt-debug-scale");
+    const scale = el2("section", "inspector-card");
+    scale.append(el2("div", "inspector-section-heading", "Scale factor"));
+    const controls = el2("div", "inspector-debug-scale");
     controls.append(el2("span", "", "Pixel ratio"));
     for (const value of [1, 1.5, 2, 3]) {
       const b = el2("button", "", `${value}\xD7`);
@@ -11045,11 +11045,11 @@ var DebugPanel = class {
       controls,
       el2(
         "p",
-        "dt-note",
+        "inspector-note",
         "Changes the actual map canvas resolution. Camera and CSS layout stay unchanged."
       )
     );
-    const preview = el2("div", "dt-debug-scale");
+    const preview = el2("div", "inspector-debug-scale");
     preview.append(el2("span", "", "Preview"));
     this.specimen.append(this.sample);
     this.specimen.insertAdjacentHTML(
@@ -11067,10 +11067,10 @@ var DebugPanel = class {
   switches = /* @__PURE__ */ new Map();
   ratio = el2("input");
   slider = el2("input");
-  help = el2("div", "dt-overdraw-help");
-  collisionHelp = el2("div", "dt-overdraw-help");
-  ratios = el2("div", "dt-segments");
-  specimen = el2("div", "dt-debug-specimen");
+  help = el2("div", "inspector-overdraw-help");
+  collisionHelp = el2("div", "inspector-overdraw-help");
+  ratios = el2("div", "inspector-segments");
+  specimen = el2("div", "inspector-debug-specimen");
   sample = el2("span", "", "Main Street");
   timer;
   setOverlay(key, enabled) {
@@ -11126,7 +11126,7 @@ function sanitizeDiagnosticSecrets(value) {
   );
 }
 
-// src/devtools/observer.ts
+// src/inspector/observer.ts
 function resourceAddress(input, base = "http://localhost") {
   try {
     const url = new URL(input.replace(/^(?:tileflow-pmtiles|pmtiles):\/\//u, ""), base);
@@ -11137,9 +11137,9 @@ function resourceAddress(input, base = "http://localhost") {
   }
 }
 
-// src/devtools/layers/model.ts
+// src/inspector/layers/model.ts
 var sampleLimit = 80;
-var internalLayer = (id) => id.startsWith("__tileflow-devtools-");
+var internalLayer = (id) => id.startsWith("__tileflow-inspector-");
 function layerInventory(side) {
   const map = side.map;
   if (!map) return [];
@@ -11502,7 +11502,7 @@ ${fence}
 `;
 }
 
-// src/devtools/diagnostics/model.ts
+// src/inspector/diagnostics/model.ts
 function diagnosticSignature(value) {
   if (value === void 0) return "undefined";
   if (value === null || typeof value !== "object") return JSON.stringify(value);
@@ -11526,8 +11526,8 @@ function diagnosticFinding(key, finding, revision) {
   };
 }
 
-// src/devtools/diagnostics/checks.ts
-var internalLayer2 = (id) => id.startsWith("__tileflow-devtools-");
+// src/inspector/diagnostics/checks.ts
+var internalLayer2 = (id) => id.startsWith("__tileflow-inspector-");
 var diagnosticLimits = {
   detailedLayers: 2e3,
   renderedCandidates: 5e3,
@@ -11916,7 +11916,7 @@ function sampleDiagnosticLabels(map, limit = 40) {
   return samples;
 }
 
-// src/devtools/beacon/probes.ts
+// src/inspector/beacon/probes.ts
 function rendererProbe(map) {
   const internal = map, style = internal.style;
   const gl = map.getCanvas().getContext("webgl2");
@@ -11959,7 +11959,7 @@ function rendererProbe(map) {
   });
   for (const id of map.getLayersOrder()) {
     const layer = map.getLayer(id);
-    if (layer?.type !== "custom" || id.startsWith("__tileflow-devtools")) continue;
+    if (layer?.type !== "custom" || id.startsWith("__tileflow-inspector")) continue;
     const target = layer.implementation ?? layer;
     hook(target, "render", (fn, args) => {
       const start = performance.now();
@@ -12063,7 +12063,7 @@ function sampleOverdraw(map, signal) {
   });
 }
 
-// src/devtools/diagnostics/performance.ts
+// src/inspector/diagnostics/performance.ts
 var active = /* @__PURE__ */ new WeakSet();
 var drawMethods = [
   "drawArrays",
@@ -12138,7 +12138,7 @@ async function samplePerformance(map, signal, options = {}) {
       result.limitations.push("The current map style is unavailable.");
       return result;
     }
-    if (style.layers.some((layer) => layer.id.startsWith("__tileflow-devtools-"))) {
+    if (style.layers.some((layer) => layer.id.startsWith("__tileflow-inspector-"))) {
       result.limitations.push(
         "Clear map highlights or geometry editing overlays before observing drawing work."
       );
@@ -12351,57 +12351,57 @@ function performanceFindings(observation, camera) {
   return findings;
 }
 
-// src/devtools/diagnostics/styles.ts
+// src/inspector/diagnostics/styles.ts
 var diagnosticsStyles = `
-.dt-diagnostics{background:var(--paper);color:var(--ink);font:12px/1.45 var(--ui)}
-.dt-diagnostics-toolbar{justify-content:space-between;gap:8px;padding:7px 10px}
-.dt-diagnostics-actions,.dt-diagnostics-filters{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
-.dt-diagnostics-toolbar strong{font-size:12px;font-weight:600}
-.dt-diagnostics-toolbar .dt-diagnostics-check{border:1px solid var(--border);background:var(--surface)}
-.dt-diagnostics-filters{padding:6px 10px;border-bottom:1px solid var(--border);flex:none}
-.dt-diagnostics-filters button{border:1px solid transparent;background:transparent;padding:3px 8px;border-radius:4px;font-size:11px}
-.dt-diagnostics-filters button[aria-pressed=true]{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
-.dt-diagnostics-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 10px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;flex:none}
-.dt-diagnostics-summary .dt-diagnostics-scope{margin-left:auto;color:var(--faint)}
-.dt-diagnostics-summary button{margin-left:auto;background:transparent;border:0;font-size:11px;color:var(--muted);padding:0}
-.dt-diagnostics-list{flex:1;min-height:0;overflow:auto}
-.dt-diagnostic{border-bottom:1px solid var(--border)}
-.dt-diagnostic>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:17px minmax(0,1fr) auto;align-items:start;column-gap:8px;padding:10px 12px}
-.dt-diagnostic>summary::-webkit-details-marker{display:none}
-.dt-diagnostic>summary:hover{background:var(--hover)}
-.dt-diagnostic>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
-.dt-diagnostic-indicator{font-size:13px;line-height:18px;color:var(--warn)}
-.dt-diagnostic[data-kind=problem] .dt-diagnostic-indicator{color:var(--danger)}
-.dt-diagnostic-title{font-weight:500;font-size:12px;display:block;line-height:18px}
-.dt-diagnostic-subtitle{display:block;color:var(--muted);font-size:11px;margin-top:2px;overflow-wrap:anywhere}
-.dt-diagnostic-category{font-size:10px;line-height:18px;color:var(--muted);white-space:nowrap;text-align:right}
-.dt-diagnostic-context{display:block;color:var(--faint);font-size:10px;margin-top:3px}
-.dt-diagnostic[data-stale=true] .dt-diagnostic-context{color:var(--warn)}
-.dt-diagnostic-detail{padding:0 12px 12px 37px;max-width:1040px;display:flex;flex-direction:column;gap:10px}
-.dt-diagnostic-detail p{margin:0;color:var(--muted);font-size:12px;max-width:820px}
-.dt-diagnostic-detail .dt-diagnostic-state{border-left:2px solid var(--warn);padding:4px 9px;background:var(--warn-soft);font-size:11px}
-.dt-diagnostic-evidence{display:grid;grid-template-columns:minmax(100px,max-content) minmax(0,1fr);column-gap:18px;row-gap:5px;margin:0;padding:9px 11px;border:1px solid var(--border);border-radius:4px;background:var(--surface);font-size:11px}
-.dt-diagnostic-evidence dt{color:var(--muted)}
-.dt-diagnostic-evidence dd{margin:0;overflow-wrap:anywhere;font-family:var(--mono)}
-.dt-diagnostic-links,.dt-diagnostic-layers{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
-.dt-diagnostic-links button{font-size:11px;min-height:25px;padding:3px 8px}
-.dt-diagnostic-links .dt-diagnostic-dismiss{margin-left:auto;background:transparent;border-color:transparent;color:var(--muted)}
-.dt-diagnostic-layers button{font:10px/1.4 var(--mono);padding:3px 6px;background:var(--surface);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.dt-diagnostic-layers span{font-size:11px;color:var(--muted)}
-.dt-diagnostic-samples{display:flex;flex-direction:column;gap:5px}
-.dt-diagnostic-samples button{text-align:left;background:transparent;border:1px solid var(--border);font-size:11px;padding:5px 8px;overflow-wrap:anywhere}
-.dt-diagnostic-samples button::before{content:'\u2197';color:var(--muted);padding-right:6px}
-.dt-diagnostic-limitations{margin:0;padding-left:16px;color:var(--muted);font-size:11px}
-.dt-diagnostic-limitations li+li{margin-top:4px}
-.dt-diagnostics-empty{padding:28px 20px;max-width:620px;display:flex;flex-direction:column;gap:7px;color:var(--muted)}
-.dt-diagnostics-empty strong{font-size:13px;font-weight:500;color:var(--ink)}
-.dt-diagnostics-empty p{margin:0;font-size:12px}
-.dt-diagnostics-status{min-height:25px;align-items:center;font-size:11px}
-.dt-diagnostics-status:empty{display:none}
-@container(max-width:520px){.dt-diagnostic>summary{grid-template-columns:15px minmax(0,1fr);padding:9px}.dt-diagnostic-category{grid-column:2;text-align:left;font-size:10px}.dt-diagnostic-detail{padding-left:32px}.dt-diagnostic-evidence{grid-template-columns:minmax(0,1fr)}.dt-diagnostic-evidence dd+dt{margin-top:5px}.dt-diagnostics-filters{gap:2px}.dt-diagnostics-filters button{padding:3px 5px}}
+.inspector-diagnostics{background:var(--paper);color:var(--ink);font:12px/1.45 var(--ui)}
+.inspector-diagnostics-toolbar{justify-content:space-between;gap:8px;padding:7px 10px}
+.inspector-diagnostics-actions,.inspector-diagnostics-filters{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
+.inspector-diagnostics-toolbar strong{font-size:12px;font-weight:600}
+.inspector-diagnostics-toolbar .inspector-diagnostics-check{border:1px solid var(--border);background:var(--surface)}
+.inspector-diagnostics-filters{padding:6px 10px;border-bottom:1px solid var(--border);flex:none}
+.inspector-diagnostics-filters button{border:1px solid transparent;background:transparent;padding:3px 8px;border-radius:4px;font-size:11px}
+.inspector-diagnostics-filters button[aria-pressed=true]{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
+.inspector-diagnostics-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 10px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;flex:none}
+.inspector-diagnostics-summary .inspector-diagnostics-scope{margin-left:auto;color:var(--faint)}
+.inspector-diagnostics-summary button{margin-left:auto;background:transparent;border:0;font-size:11px;color:var(--muted);padding:0}
+.inspector-diagnostics-list{flex:1;min-height:0;overflow:auto}
+.inspector-diagnostic{border-bottom:1px solid var(--border)}
+.inspector-diagnostic>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:17px minmax(0,1fr) auto;align-items:start;column-gap:8px;padding:10px 12px}
+.inspector-diagnostic>summary::-webkit-details-marker{display:none}
+.inspector-diagnostic>summary:hover{background:var(--hover)}
+.inspector-diagnostic>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+.inspector-diagnostic-indicator{font-size:13px;line-height:18px;color:var(--warn)}
+.inspector-diagnostic[data-kind=problem] .inspector-diagnostic-indicator{color:var(--danger)}
+.inspector-diagnostic-title{font-weight:500;font-size:12px;display:block;line-height:18px}
+.inspector-diagnostic-subtitle{display:block;color:var(--muted);font-size:11px;margin-top:2px;overflow-wrap:anywhere}
+.inspector-diagnostic-category{font-size:10px;line-height:18px;color:var(--muted);white-space:nowrap;text-align:right}
+.inspector-diagnostic-context{display:block;color:var(--faint);font-size:10px;margin-top:3px}
+.inspector-diagnostic[data-stale=true] .inspector-diagnostic-context{color:var(--warn)}
+.inspector-diagnostic-detail{padding:0 12px 12px 37px;max-width:1040px;display:flex;flex-direction:column;gap:10px}
+.inspector-diagnostic-detail p{margin:0;color:var(--muted);font-size:12px;max-width:820px}
+.inspector-diagnostic-detail .inspector-diagnostic-state{border-left:2px solid var(--warn);padding:4px 9px;background:var(--warn-soft);font-size:11px}
+.inspector-diagnostic-evidence{display:grid;grid-template-columns:minmax(100px,max-content) minmax(0,1fr);column-gap:18px;row-gap:5px;margin:0;padding:9px 11px;border:1px solid var(--border);border-radius:4px;background:var(--surface);font-size:11px}
+.inspector-diagnostic-evidence dt{color:var(--muted)}
+.inspector-diagnostic-evidence dd{margin:0;overflow-wrap:anywhere;font-family:var(--mono)}
+.inspector-diagnostic-links,.inspector-diagnostic-layers{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
+.inspector-diagnostic-links button{font-size:11px;min-height:25px;padding:3px 8px}
+.inspector-diagnostic-links .inspector-diagnostic-dismiss{margin-left:auto;background:transparent;border-color:transparent;color:var(--muted)}
+.inspector-diagnostic-layers button{font:10px/1.4 var(--mono);padding:3px 6px;background:var(--surface);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.inspector-diagnostic-layers span{font-size:11px;color:var(--muted)}
+.inspector-diagnostic-samples{display:flex;flex-direction:column;gap:5px}
+.inspector-diagnostic-samples button{text-align:left;background:transparent;border:1px solid var(--border);font-size:11px;padding:5px 8px;overflow-wrap:anywhere}
+.inspector-diagnostic-samples button::before{content:'\u2197';color:var(--muted);padding-right:6px}
+.inspector-diagnostic-limitations{margin:0;padding-left:16px;color:var(--muted);font-size:11px}
+.inspector-diagnostic-limitations li+li{margin-top:4px}
+.inspector-diagnostics-empty{padding:28px 20px;max-width:620px;display:flex;flex-direction:column;gap:7px;color:var(--muted)}
+.inspector-diagnostics-empty strong{font-size:13px;font-weight:500;color:var(--ink)}
+.inspector-diagnostics-empty p{margin:0;font-size:12px}
+.inspector-diagnostics-status{min-height:25px;align-items:center;font-size:11px}
+.inspector-diagnostics-status:empty{display:none}
+@container(max-width:520px){.inspector-diagnostic>summary{grid-template-columns:15px minmax(0,1fr);padding:9px}.inspector-diagnostic-category{grid-column:2;text-align:left;font-size:10px}.inspector-diagnostic-detail{padding-left:32px}.inspector-diagnostic-evidence{grid-template-columns:minmax(0,1fr)}.inspector-diagnostic-evidence dd+dt{margin-top:5px}.inspector-diagnostics-filters{gap:2px}.inspector-diagnostics-filters button{padding:3px 5px}}
 `;
 
-// src/devtools/diagnostics/panel.ts
+// src/inspector/diagnostics/panel.ts
 var el3 = (tag, cls = "", text = "") => {
   const node = document.createElement(tag);
   node.className = cls;
@@ -12426,11 +12426,11 @@ var DiagnosticsPanel = class {
   constructor(root, options) {
     this.root = root;
     this.options = options;
-    root.classList.add("dt-diagnostics");
+    root.classList.add("inspector-diagnostics");
     const style = el3("style");
     style.nonce = document.querySelector("style[nonce]")?.nonce || "";
     style.textContent = diagnosticsStyles;
-    const actions = el3("div", "dt-diagnostics-actions");
+    const actions = el3("div", "inspector-diagnostics-actions");
     actions.append(this.check, this.cancelButton, this.copy);
     this.toolbar.append(el3("strong", "", "Diagnostics"), actions);
     this.cancelButton.hidden = true;
@@ -12479,12 +12479,12 @@ var DiagnosticsPanel = class {
   expanded = /* @__PURE__ */ new Set();
   missingImages = /* @__PURE__ */ new Map();
   renderKey = "";
-  toolbar = el3("div", "dt-tools dt-diagnostics-toolbar");
-  filters = el3("div", "dt-diagnostics-filters");
-  summary = el3("div", "dt-diagnostics-summary");
-  list = el3("div", "dt-scroll dt-diagnostics-list");
-  status = el3("div", "dt-footer dt-diagnostics-status");
-  check = button("Check view", () => void this.checkView(), "dt-diagnostics-check");
+  toolbar = el3("div", "inspector-tools inspector-diagnostics-toolbar");
+  filters = el3("div", "inspector-diagnostics-filters");
+  summary = el3("div", "inspector-diagnostics-summary");
+  list = el3("div", "inspector-scroll inspector-diagnostics-list");
+  status = el3("div", "inspector-footer inspector-diagnostics-status");
+  check = button("Check view", () => void this.checkView(), "inspector-diagnostics-check");
   copy = button("Copy findings", () => void this.copyReport());
   cancelButton = button("Cancel", () => this.cancel());
   filterButtons = /* @__PURE__ */ new Map();
@@ -12493,7 +12493,7 @@ var DiagnosticsPanel = class {
     this.schedule();
   };
   sourceChanged = (event) => {
-    if (event.sourceId?.startsWith("__tileflow-devtools-")) return;
+    if (event.sourceId?.startsWith("__tileflow-inspector-")) return;
     this.dataRevision++;
     this.invalidate();
   };
@@ -12564,7 +12564,7 @@ var DiagnosticsPanel = class {
   dispose() {
     this.disposed = true;
     this.detach();
-    this.root.classList.remove("dt-diagnostics");
+    this.root.classList.remove("inspector-diagnostics");
   }
   detach() {
     this.cancel();
@@ -12701,9 +12701,9 @@ var DiagnosticsPanel = class {
       const previousKey = this.styleKey;
       this.styleKey = diagnosticFingerprint({
         ...style,
-        layers: style.layers.filter((layer) => !layer.id.startsWith("__tileflow-devtools")),
+        layers: style.layers.filter((layer) => !layer.id.startsWith("__tileflow-inspector")),
         sources: Object.fromEntries(
-          Object.entries(style.sources).filter(([id]) => !id.startsWith("__tileflow-devtools")).map(([id, source]) => [
+          Object.entries(style.sources).filter(([id]) => !id.startsWith("__tileflow-inspector")).map(([id, source]) => [
             id,
             source.type === "geojson" && typeof source.data === "object" ? { ...source, data: "[inline data omitted from style identity]" } : source
           ])
@@ -12946,7 +12946,7 @@ var DiagnosticsPanel = class {
       el3("span", "", `${problems} problem${problems === 1 ? "" : "s"} \xB7 ${reviews} to review`)
     );
     const scope = !this.map ? "Waiting for map" : moving ? "Map moving" : !styleCurrent ? "Style checks pending" : viewCurrent ? this.viewComplete ? "Current view" : "Current view \xB7 partial coverage" : this.viewSnapshot ? "Previous view \xB7 check again" : "Style checked \xB7 view not checked";
-    this.summary.append(el3("span", "dt-diagnostics-scope", scope));
+    this.summary.append(el3("span", "inspector-diagnostics-scope", scope));
     const hidden = entries.length - visible.length;
     if (hidden)
       this.summary.append(
@@ -12960,7 +12960,7 @@ var DiagnosticsPanel = class {
     const scroll = this.list.scrollTop;
     if (filtered.length) this.list.replaceChildren(...filtered.map((entry) => this.row(entry)));
     else {
-      const empty = el3("div", "dt-diagnostics-empty");
+      const empty = el3("div", "inspector-diagnostics-empty");
       const title = !this.map ? "Waiting for the map" : !styleCurrent ? "Style checks are pending" : this.filter !== "all" ? `No ${categories[this.filter].toLowerCase()} findings in this list` : hidden ? "All current findings are dismissed" : viewCurrent ? "No issues found in completed checks" : "No style issues detected";
       const detail = !this.map ? "Diagnostics will be available when the preview connects." : !styleCurrent ? "Configuration and resource checks run automatically after the map settles." : viewCurrent ? "This result applies to the current view and variant." : "Check this view to examine sampled label contrast and rendering work. Other locations and variants are not inferred.";
       empty.append(el3("strong", "", title), el3("p", "", detail));
@@ -12974,7 +12974,7 @@ var DiagnosticsPanel = class {
     const { finding, snapshot } = entry;
     const current = this.entryCurrent(entry);
     const key = `${finding.id}:${finding.fingerprint}`;
-    const row = el3("details", "dt-diagnostic");
+    const row = el3("details", "inspector-diagnostic");
     row.dataset.kind = finding.kind;
     row.dataset.stale = String(!current);
     row.open = this.expanded.has(key);
@@ -12984,41 +12984,49 @@ var DiagnosticsPanel = class {
     );
     const summary = el3("summary");
     summary.dataset.diagnosticFocus = key;
-    const indicator = el3("span", "dt-diagnostic-indicator", finding.kind === "problem" ? "\u25CF" : "\u25D0");
+    const indicator = el3(
+      "span",
+      "inspector-diagnostic-indicator",
+      finding.kind === "problem" ? "\u25CF" : "\u25D0"
+    );
     indicator.setAttribute("aria-label", finding.kind === "problem" ? "Problem" : "Review");
     const title = el3("span");
     title.append(
-      el3("span", "dt-diagnostic-title", finding.title),
-      el3("span", "dt-diagnostic-subtitle", finding.summary)
+      el3("span", "inspector-diagnostic-title", finding.title),
+      el3("span", "inspector-diagnostic-subtitle", finding.summary)
     );
     const context = finding.scope === "view" ? `${snapshot.themeLabel ? `${snapshot.themeLabel} \xB7 ` : ""}z${snapshot.camera.zoom.toFixed(2)}` : "Style configuration";
     title.append(
-      el3("span", "dt-diagnostic-context", `${context}${current ? "" : " \xB7 earlier observation"}`)
+      el3(
+        "span",
+        "inspector-diagnostic-context",
+        `${context}${current ? "" : " \xB7 earlier observation"}`
+      )
     );
     summary.append(
       indicator,
       title,
-      el3("span", "dt-diagnostic-category", categories[finding.category])
+      el3("span", "inspector-diagnostic-category", categories[finding.category])
     );
-    const body = el3("div", "dt-diagnostic-detail");
+    const body = el3("div", "inspector-diagnostic-detail");
     body.append(el3("p", "", finding.detail));
     if (!current)
       body.append(
         el3(
           "p",
-          "dt-diagnostic-state",
+          "inspector-diagnostic-state",
           entry.pendingReason ?? "This finding belongs to an earlier view or style. Check again before treating it as resolved."
         )
       );
     if (finding.evidence.length) {
-      const evidence = el3("dl", "dt-diagnostic-evidence");
+      const evidence = el3("dl", "inspector-diagnostic-evidence");
       for (const item of finding.evidence)
         evidence.append(el3("dt", "", item.label), el3("dd", "", String(item.value)));
       body.append(evidence);
     }
     const canReveal = this.sameMap(snapshot);
     if (finding.layers.length > 1) {
-      const layers = el3("div", "dt-diagnostic-layers");
+      const layers = el3("div", "inspector-diagnostic-layers");
       for (const layer of finding.layers.slice(0, 8)) {
         const link = button(
           layer,
@@ -13041,7 +13049,7 @@ var DiagnosticsPanel = class {
       body.append(layers);
     }
     if (finding.samples?.length) {
-      const samples = el3("div", "dt-diagnostic-samples");
+      const samples = el3("div", "inspector-diagnostic-samples");
       for (const sample of finding.samples.slice(0, 4)) {
         const sampleFinding = {
           ...finding,
@@ -13058,11 +13066,11 @@ var DiagnosticsPanel = class {
       body.append(samples);
     }
     if (finding.limitations.length) {
-      const limitations = el3("ul", "dt-diagnostic-limitations");
+      const limitations = el3("ul", "inspector-diagnostic-limitations");
       for (const text of finding.limitations) limitations.append(el3("li", "", text));
       body.append(limitations);
     }
-    const actions = el3("div", "dt-diagnostic-links");
+    const actions = el3("div", "inspector-diagnostic-links");
     if (finding.layers.length) {
       const open = button(
         finding.target ? "Open rule" : "Open layer",
@@ -13098,7 +13106,7 @@ var DiagnosticsPanel = class {
           this.dismissed.set(this.dismissKey(entry), finding.fingerprint);
           this.render(true);
         },
-        "dt-diagnostic-dismiss"
+        "inspector-diagnostic-dismiss"
       )
     );
     body.append(actions);
@@ -13206,7 +13214,7 @@ var DiagnosticsPanel = class {
   }
 };
 
-// src/devtools/geometry.ts
+// src/inspector/geometry.ts
 function geometryVertices(geometry) {
   const result = [];
   function visit(value, path) {
@@ -13291,7 +13299,7 @@ var GeometryEditor = class {
       })
     );
     this.handles = map.getContainer().ownerDocument.createElement("div");
-    this.handles.className = "dt-geometry-handles";
+    this.handles.className = "inspector-geometry-handles";
     this.handles.style.cssText = "position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden";
     map.getContainer().append(this.handles);
     map.on("move", this.draw);
@@ -13305,7 +13313,7 @@ var GeometryEditor = class {
   undoStack = [];
   redoStack = [];
   handles;
-  source = `__tileflow-devtools-geometry-${Math.random().toString(36).slice(2)}`;
+  source = `__tileflow-inspector-geometry-${Math.random().toString(36).slice(2)}`;
   drag;
   get canUndo() {
     return this.undoStack.length > 0;
@@ -13420,7 +13428,7 @@ var GeometryEditor = class {
   }
 };
 
-// src/devtools/live-color.ts
+// src/inspector/live-color.ts
 var colorPreviewInterval = 120;
 function bindLiveColorInput(input, apply, isCurrent) {
   let timer;
@@ -13461,7 +13469,7 @@ function bindLiveColorInput(input, apply, isCurrent) {
   };
 }
 
-// src/devtools/layers/explain.ts
+// src/inspector/layers/explain.ts
 function explainFeatureVisibility(map, layer, feature) {
   if (layer.type === "custom") return [];
   const evidence = [];
@@ -13551,8 +13559,8 @@ function explainFeatureVisibility(map, layer, feature) {
   return evidence;
 }
 
-// src/devtools/layers/highlight.ts
-var sourceId = "__tileflow-devtools-layers-preview";
+// src/inspector/layers/highlight.ts
+var sourceId = "__tileflow-inspector-layers-preview";
 var layerIds = ["area", "line", "point"].map((part) => `${sourceId}-${part}`);
 var LayerHighlight = class {
   map;
@@ -13638,7 +13646,7 @@ var LayerHighlight = class {
   }
 };
 
-// src/devtools/layers/preview.ts
+// src/inspector/layers/preview.ts
 var LayerPreview = class {
   constructor(show, hide) {
     this.show = show;
@@ -13688,100 +13696,100 @@ var LayerPreview = class {
   }
 };
 
-// src/devtools/layers/styles.ts
+// src/inspector/layers/styles.ts
 var layersStyles = `
-.dt-layer-tools { gap:8px; padding:5px 8px; background:var(--surface); }
-.dt-layer-modes { display:flex; flex:none; border:1px solid var(--border); border-radius:3px; overflow:hidden; }
-.dt-layer-modes button { border:0; border-radius:0; padding:3px 9px; white-space:nowrap; }
-.dt-layer-modes button + button { border-left:1px solid var(--border); }
-.dt-layer-visible { flex:none; cursor:pointer; }
-.dt-layer-visible input { width:13px; height:13px; cursor:pointer; }
-.dt-layer-total { color:var(--muted); font:11px ui-monospace,monospace; white-space:nowrap; }
-.devtools-ready .dt-layer-copy { border:1px solid var(--accent); color:var(--accent); background:var(--paper); white-space:nowrap; }
-.dt-layer-split { display:grid; grid-template-columns:minmax(270px,34%) minmax(0,1fr); flex:1; min-height:0; }
-.dt-layer-list { min-height:0; overflow:auto; border-right:1px solid var(--border); padding-bottom:10px; }
-.dt-layer-group-title { display:flex; align-items:center; gap:7px; width:100%; border:0; border-bottom:1px solid var(--border); background:var(--surface) !important; border-radius:0 !important; padding:5px 9px !important; text-align:left; position:sticky; top:0; z-index:1; }
-.dt-layer-group-title strong { font-size:11px; text-transform:capitalize; font-weight:600; }
-.dt-layer-count { color:var(--muted); margin-left:auto; font-size:10px; }
-.devtools-ready .dt-layer-row { display:flex; align-items:center; gap:8px; width:100%; padding:5px 9px 5px 18px; text-align:left; border:0; border-left:2px solid transparent; border-radius:0; min-height:29px; }
-.dt-layer-row[aria-pressed=true] { border-left-color:var(--accent); }
-.dt-layer-glyph { width:17px; flex:none; font:16px ui-monospace,monospace; text-align:center; color:var(--muted); }
-.dt-layer-color { text-shadow:0 0 1px #777; }
-.dt-layer-label { display:flex; flex-direction:column; min-width:0; flex:1; }
-.dt-layer-label > * { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.dt-layer-state { color:var(--muted); font-size:10px; white-space:nowrap; }
-.dt-layer-state[data-state=Hidden],.dt-layer-state[data-state="Outside zoom"] { color:light-dark(#93620b,#e9bd67); }
-.dt-layer-state[data-state=Runtime] { color:light-dark(#7c3dc6,#c9a4f4); }
-.dt-layer-detail { display:flex; flex-direction:column; min-width:0; min-height:0; }
-.dt-layer-heading { padding:8px 12px 6px; border-bottom:1px solid var(--border); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
-.dt-layer-title { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 0 200px; }
-.dt-layer-title strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
-.dt-layer-title code { font:10px ui-monospace,monospace; overflow-wrap:anywhere; color:var(--muted); }
-.dt-layer-content { padding:0; }
-.dt-layer-evidence { padding:5px 12px; }
-.dt-layer-evidence-row { display:grid; grid-template-columns:16px 115px minmax(0,1fr); gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:11px; align-items:baseline; }
-.dt-layer-evidence-row strong { font-weight:500; }
-.dt-layer-evidence-row > :last-child { overflow-wrap:anywhere; }
-.dt-layer-indicator { font:13px ui-monospace,monospace; color:var(--muted); }
-.dt-layer-evidence-row[data-state=pass] .dt-layer-indicator { color:light-dark(#188038,#81c995); }
-.dt-layer-evidence-row[data-state=warn] .dt-layer-indicator { color:light-dark(#a15c00,#fdd663); }
-.dt-layer-muted,.dt-layer-dependency { color:var(--muted); font-size:11px; }
-.dt-layer-neighbors { margin:7px 12px 12px; }
-.dt-layer-neighbors > strong { font-weight:500; font-size:11px; }
-.dt-layer-neighbors > div { display:flex; align-items:baseline; gap:8px; padding-top:3px; }
-.dt-layer-neighbors > div > span:first-child { width:55px; flex:none; }
-.devtools-ready .dt-layer-link { border:0; padding:2px 0; background:transparent; color:var(--accent); font-size:11px; text-align:left; overflow-wrap:anywhere; }
-.dt-layer-rules { width:100%; border-collapse:collapse; table-layout:fixed; font-size:11px; }
-.dt-layer-rules th { text-align:left; background:var(--surface); color:var(--muted); font-weight:500; padding:5px 12px; border-bottom:1px solid var(--border); }
-.dt-layer-rules th:first-child { width:57%; }
-.dt-layer-rules td { padding:5px 12px; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:anywhere; }
-.dt-layer-rules code { font:11px/1.6 ui-monospace,monospace; }
-.dt-layer-rule-name { color:light-dark(#881391,#c58af9); }
-.dt-layer-dependency { display:block; font-size:10px; }
-.dt-layer-rule-editor { display:flex; align-items:center; gap:5px; min-width:0; }
-.dt-layer-rule-editor input:not([type=color]):not([type=checkbox]),.dt-layer-rule-editor select { width:100%; min-width:0; flex:1; padding:2px 4px; border:1px solid transparent; border-radius:2px; background:transparent; color:var(--ink); font:11px/1.6 ui-monospace,monospace; }
-.dt-layer-rule-editor input[type=checkbox] { flex:none; width:13px; height:13px; margin:0 2px 0 0; accent-color:var(--accent); cursor:pointer; }
-.dt-layer-rule-editor input[type=checkbox]:disabled { cursor:default; }
-.dt-layer-rule-editor input:hover,.dt-layer-rule-editor select:hover { border-color:var(--border); }
-.dt-layer-rule-editor input:focus,.dt-layer-rule-editor select:focus { border-color:var(--accent); outline:1px solid var(--accent); background:var(--paper); }
-.dt-layer-rule-editor input[type=color] { flex:none; width:16px; height:20px; padding:0; border:0; background:transparent; cursor:pointer; }
-.dt-layer-rule-editor input[type=color]::-webkit-color-swatch-wrapper { padding:3px 0; }
-.dt-layer-rule-editor input[type=color]::-webkit-color-swatch { border:1px solid #8888; border-radius:2px; }
-.dt-layer-rule-editor .dt-layer-rule-reset { flex:none; padding:1px 4px; border:0; color:var(--accent); background:transparent; }
-.dt-layer-rule-reset:disabled { visibility:hidden; }
-.dt-layer-rules tr[data-modified=true] > td:first-child { box-shadow:inset 2px 0 var(--accent); }
-.dt-layer-rules tr[data-disabled=true] .dt-layer-rule-name,.dt-layer-rules tr[data-disabled=true] input:not([type=checkbox]):not([type=color]),.dt-layer-rules tr[data-disabled=true] select { color:var(--muted); text-decoration:line-through; }
-.dt-layer-rules tr[data-disabled=true] input[type=color] { opacity:.45; cursor:default; }
-.dt-layer-rule-error { display:block; padding-top:4px; color:light-dark(#b3261e,#f28b82); font-size:10px; }
-.dt-layer-rule-error[hidden] { display:none; }
-.dt-layer-rules tr[data-selected=true] { background:var(--dt-selected); }
-.dt-layer-content [data-diagnostic-target=true] { background:var(--dt-selected); outline:1px solid var(--accent); outline-offset:-1px; }
-.dt-layer-swatch { display:inline-block; width:11px; height:11px; border:1px solid #8888; border-radius:2px; margin-right:5px; vertical-align:middle; }
-.dt-layer-json { margin:6px 0; font:11px/1.6 ui-monospace,SFMono-Regular,monospace; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--dt-string); max-height:300px; overflow:auto; }
-.dt-layer-curve { display:flex; flex-wrap:wrap; gap:5px 10px; margin-top:6px; padding:6px; background:var(--surface); }
-.dt-layer-curve span { flex-basis:100%; color:var(--muted); }
-.dt-layer-section,.dt-layer-origin { padding:9px 12px; border-bottom:1px solid var(--border); }
-.dt-layer-section h4 { margin:0 0 7px; font-size:11px; font-weight:500; }
-.dt-layer-origin > code { margin-left:10px; color:var(--accent); }
-.dt-layer-origin dl { display:grid; grid-template-columns:110px minmax(0,1fr); gap:6px 10px; font-size:11px; }
-.dt-layer-origin dt { color:var(--muted); }.dt-layer-origin dd { margin:0; overflow-wrap:anywhere; }
-.dt-layer-data-summary { margin:8px 12px; font-size:11px; }
-.dt-layer-samples { max-height:180px; overflow:auto; border-bottom:1px solid var(--border); }
-.dt-layer-notice { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
-.dt-layer-dialog { width:min(820px,90vw); height:min(680px,85vh); padding:16px; border:1px solid var(--border); border-radius:6px; color:var(--ink); background:var(--paper); box-shadow:0 15px 70px #0005; }
-.dt-layer-dialog[open] { display:flex; flex-direction:column; gap:12px; }.dt-layer-dialog::backdrop { background:#0005; }
-.dt-layer-dialog-head { display:flex; align-items:center; justify-content:space-between; }.dt-layer-dialog-head strong { font-size:14px; font-weight:500; }
-.dt-layer-dialog label { display:flex; flex-direction:column; gap:5px; }.dt-layer-dialog input { padding:7px; border:1px solid var(--border); background:var(--paper); color:var(--ink); }
-.dt-layer-dialog textarea { flex:1; min-height:100px; resize:none; background:var(--surface); color:var(--ink); padding:10px; border:1px solid var(--border); font:11px/1.6 ui-monospace,monospace; }
-.dt-layer-dialog .dt-layer-copy { margin-left:auto; }
+.inspector-layer-tools { gap:8px; padding:5px 8px; background:var(--surface); }
+.inspector-layer-modes { display:flex; flex:none; border:1px solid var(--border); border-radius:3px; overflow:hidden; }
+.inspector-layer-modes button { border:0; border-radius:0; padding:3px 9px; white-space:nowrap; }
+.inspector-layer-modes button + button { border-left:1px solid var(--border); }
+.inspector-layer-visible { flex:none; cursor:pointer; }
+.inspector-layer-visible input { width:13px; height:13px; cursor:pointer; }
+.inspector-layer-total { color:var(--muted); font:11px ui-monospace,monospace; white-space:nowrap; }
+.inspector-ready .inspector-layer-copy { border:1px solid var(--accent); color:var(--accent); background:var(--paper); white-space:nowrap; }
+.inspector-layer-split { display:grid; grid-template-columns:minmax(270px,34%) minmax(0,1fr); flex:1; min-height:0; }
+.inspector-layer-list { min-height:0; overflow:auto; border-right:1px solid var(--border); padding-bottom:10px; }
+.inspector-layer-group-title { display:flex; align-items:center; gap:7px; width:100%; border:0; border-bottom:1px solid var(--border); background:var(--surface) !important; border-radius:0 !important; padding:5px 9px !important; text-align:left; position:sticky; top:0; z-index:1; }
+.inspector-layer-group-title strong { font-size:11px; text-transform:capitalize; font-weight:600; }
+.inspector-layer-count { color:var(--muted); margin-left:auto; font-size:10px; }
+.inspector-ready .inspector-layer-row { display:flex; align-items:center; gap:8px; width:100%; padding:5px 9px 5px 18px; text-align:left; border:0; border-left:2px solid transparent; border-radius:0; min-height:29px; }
+.inspector-layer-row[aria-pressed=true] { border-left-color:var(--accent); }
+.inspector-layer-glyph { width:17px; flex:none; font:16px ui-monospace,monospace; text-align:center; color:var(--muted); }
+.inspector-layer-color { text-shadow:0 0 1px #777; }
+.inspector-layer-label { display:flex; flex-direction:column; min-width:0; flex:1; }
+.inspector-layer-label > * { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.inspector-layer-state { color:var(--muted); font-size:10px; white-space:nowrap; }
+.inspector-layer-state[data-state=Hidden],.inspector-layer-state[data-state="Outside zoom"] { color:light-dark(#93620b,#e9bd67); }
+.inspector-layer-state[data-state=Runtime] { color:light-dark(#7c3dc6,#c9a4f4); }
+.inspector-layer-detail { display:flex; flex-direction:column; min-width:0; min-height:0; }
+.inspector-layer-heading { padding:8px 12px 6px; border-bottom:1px solid var(--border); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
+.inspector-layer-title { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 0 200px; }
+.inspector-layer-title strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
+.inspector-layer-title code { font:10px ui-monospace,monospace; overflow-wrap:anywhere; color:var(--muted); }
+.inspector-layer-content { padding:0; }
+.inspector-layer-evidence { padding:5px 12px; }
+.inspector-layer-evidence-row { display:grid; grid-template-columns:16px 115px minmax(0,1fr); gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:11px; align-items:baseline; }
+.inspector-layer-evidence-row strong { font-weight:500; }
+.inspector-layer-evidence-row > :last-child { overflow-wrap:anywhere; }
+.inspector-layer-indicator { font:13px ui-monospace,monospace; color:var(--muted); }
+.inspector-layer-evidence-row[data-state=pass] .inspector-layer-indicator { color:light-dark(#188038,#81c995); }
+.inspector-layer-evidence-row[data-state=warn] .inspector-layer-indicator { color:light-dark(#a15c00,#fdd663); }
+.inspector-layer-muted,.inspector-layer-dependency { color:var(--muted); font-size:11px; }
+.inspector-layer-neighbors { margin:7px 12px 12px; }
+.inspector-layer-neighbors > strong { font-weight:500; font-size:11px; }
+.inspector-layer-neighbors > div { display:flex; align-items:baseline; gap:8px; padding-top:3px; }
+.inspector-layer-neighbors > div > span:first-child { width:55px; flex:none; }
+.inspector-ready .inspector-layer-link { border:0; padding:2px 0; background:transparent; color:var(--accent); font-size:11px; text-align:left; overflow-wrap:anywhere; }
+.inspector-layer-rules { width:100%; border-collapse:collapse; table-layout:fixed; font-size:11px; }
+.inspector-layer-rules th { text-align:left; background:var(--surface); color:var(--muted); font-weight:500; padding:5px 12px; border-bottom:1px solid var(--border); }
+.inspector-layer-rules th:first-child { width:57%; }
+.inspector-layer-rules td { padding:5px 12px; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:anywhere; }
+.inspector-layer-rules code { font:11px/1.6 ui-monospace,monospace; }
+.inspector-layer-rule-name { color:light-dark(#881391,#c58af9); }
+.inspector-layer-dependency { display:block; font-size:10px; }
+.inspector-layer-rule-editor { display:flex; align-items:center; gap:5px; min-width:0; }
+.inspector-layer-rule-editor input:not([type=color]):not([type=checkbox]),.inspector-layer-rule-editor select { width:100%; min-width:0; flex:1; padding:2px 4px; border:1px solid transparent; border-radius:2px; background:transparent; color:var(--ink); font:11px/1.6 ui-monospace,monospace; }
+.inspector-layer-rule-editor input[type=checkbox] { flex:none; width:13px; height:13px; margin:0 2px 0 0; accent-color:var(--accent); cursor:pointer; }
+.inspector-layer-rule-editor input[type=checkbox]:disabled { cursor:default; }
+.inspector-layer-rule-editor input:hover,.inspector-layer-rule-editor select:hover { border-color:var(--border); }
+.inspector-layer-rule-editor input:focus,.inspector-layer-rule-editor select:focus { border-color:var(--accent); outline:1px solid var(--accent); background:var(--paper); }
+.inspector-layer-rule-editor input[type=color] { flex:none; width:16px; height:20px; padding:0; border:0; background:transparent; cursor:pointer; }
+.inspector-layer-rule-editor input[type=color]::-webkit-color-swatch-wrapper { padding:3px 0; }
+.inspector-layer-rule-editor input[type=color]::-webkit-color-swatch { border:1px solid #8888; border-radius:2px; }
+.inspector-layer-rule-editor .inspector-layer-rule-reset { flex:none; padding:1px 4px; border:0; color:var(--accent); background:transparent; }
+.inspector-layer-rule-reset:disabled { visibility:hidden; }
+.inspector-layer-rules tr[data-modified=true] > td:first-child { box-shadow:inset 2px 0 var(--accent); }
+.inspector-layer-rules tr[data-disabled=true] .inspector-layer-rule-name,.inspector-layer-rules tr[data-disabled=true] input:not([type=checkbox]):not([type=color]),.inspector-layer-rules tr[data-disabled=true] select { color:var(--muted); text-decoration:line-through; }
+.inspector-layer-rules tr[data-disabled=true] input[type=color] { opacity:.45; cursor:default; }
+.inspector-layer-rule-error { display:block; padding-top:4px; color:light-dark(#b3261e,#f28b82); font-size:10px; }
+.inspector-layer-rule-error[hidden] { display:none; }
+.inspector-layer-rules tr[data-selected=true] { background:var(--inspector-selected); }
+.inspector-layer-content [data-diagnostic-target=true] { background:var(--inspector-selected); outline:1px solid var(--accent); outline-offset:-1px; }
+.inspector-layer-swatch { display:inline-block; width:11px; height:11px; border:1px solid #8888; border-radius:2px; margin-right:5px; vertical-align:middle; }
+.inspector-layer-json { margin:6px 0; font:11px/1.6 ui-monospace,SFMono-Regular,monospace; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--inspector-string); max-height:300px; overflow:auto; }
+.inspector-layer-curve { display:flex; flex-wrap:wrap; gap:5px 10px; margin-top:6px; padding:6px; background:var(--surface); }
+.inspector-layer-curve span { flex-basis:100%; color:var(--muted); }
+.inspector-layer-section,.inspector-layer-origin { padding:9px 12px; border-bottom:1px solid var(--border); }
+.inspector-layer-section h4 { margin:0 0 7px; font-size:11px; font-weight:500; }
+.inspector-layer-origin > code { margin-left:10px; color:var(--accent); }
+.inspector-layer-origin dl { display:grid; grid-template-columns:110px minmax(0,1fr); gap:6px 10px; font-size:11px; }
+.inspector-layer-origin dt { color:var(--muted); }.inspector-layer-origin dd { margin:0; overflow-wrap:anywhere; }
+.inspector-layer-data-summary { margin:8px 12px; font-size:11px; }
+.inspector-layer-samples { max-height:180px; overflow:auto; border-bottom:1px solid var(--border); }
+.inspector-layer-notice { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+.inspector-layer-dialog { width:min(820px,90vw); height:min(680px,85vh); padding:16px; border:1px solid var(--border); border-radius:6px; color:var(--ink); background:var(--paper); box-shadow:0 15px 70px #0005; }
+.inspector-layer-dialog[open] { display:flex; flex-direction:column; gap:12px; }.inspector-layer-dialog::backdrop { background:#0005; }
+.inspector-layer-dialog-head { display:flex; align-items:center; justify-content:space-between; }.inspector-layer-dialog-head strong { font-size:14px; font-weight:500; }
+.inspector-layer-dialog label { display:flex; flex-direction:column; gap:5px; }.inspector-layer-dialog input { padding:7px; border:1px solid var(--border); background:var(--paper); color:var(--ink); }
+.inspector-layer-dialog textarea { flex:1; min-height:100px; resize:none; background:var(--surface); color:var(--ink); padding:10px; border:1px solid var(--border); font:11px/1.6 ui-monospace,monospace; }
+.inspector-layer-dialog .inspector-layer-copy { margin-left:auto; }
 @container(max-width:700px) {
-  .dt-layer-heading { padding:6px 9px; }.dt-layer-title { flex-basis:100%; }
-  .dt-layer-tools input[type=search] { order:1; flex:1 0 100%; }.dt-layer-tools .dt-layer-copy { margin-left:auto; }
-  .dt-layer-evidence-row { grid-template-columns:12px 92px minmax(0,1fr); gap:5px; }
+  .inspector-layer-heading { padding:6px 9px; }.inspector-layer-title { flex-basis:100%; }
+  .inspector-layer-tools input[type=search] { order:1; flex:1 0 100%; }.inspector-layer-tools .inspector-layer-copy { margin-left:auto; }
+  .inspector-layer-evidence-row { grid-template-columns:12px 92px minmax(0,1fr); gap:5px; }
 }
 `;
 
-// src/devtools/layers/visibility.ts
+// src/inspector/layers/visibility.ts
 var featureTypes = /* @__PURE__ */ new Set(["fill", "line", "symbol", "circle", "fill-extrusion", "heatmap"]);
 function layersInView(map, layers) {
   const zoom = map.getZoom();
@@ -13804,7 +13812,7 @@ function layersInView(map, layers) {
   }
 }
 
-// src/devtools/layers/panel.ts
+// src/inspector/layers/panel.ts
 function el4(tag, className = "", text = "") {
   const node = document.createElement(tag);
   node.className = className;
@@ -13843,8 +13851,8 @@ var LayersPanel = class {
     style.nonce = document.querySelector("style[nonce]")?.nonce || "";
     style.textContent = layersStyles;
     root.append(style);
-    const tools = el4("div", "dt-tools dt-layer-tools");
-    const modes = el4("div", "dt-layer-modes");
+    const tools = el4("div", "inspector-tools inspector-layer-tools");
+    const modes = el4("div", "inspector-layer-modes");
     modes.setAttribute("aria-label", "Layer organization");
     for (const [mode, label] of [
       ["module", "By module"],
@@ -13861,7 +13869,7 @@ var LayersPanel = class {
     this.search.placeholder = "Filter layers, modules, sources\u2026";
     this.search.setAttribute("aria-label", "Filter layers");
     this.search.addEventListener("input", () => this.renderList(true));
-    const visible = el4("label", "dt-layer-visible");
+    const visible = el4("label", "inspector-layer-visible");
     this.visibleOnly.type = "checkbox";
     this.visibleOnly.setAttribute("aria-label", "Visible only");
     visible.title = "Hide hidden or out-of-zoom layers and layers without rendered features in this view. Custom and raster layers stay listed when visibility is unknown.";
@@ -13875,10 +13883,10 @@ var LayersPanel = class {
       this.renderList();
       this.scheduleMeasurement();
     });
-    const toolsRow = el4("div", "dt-layer-tools-row");
+    const toolsRow = el4("div", "inspector-layer-tools-row");
     toolsRow.append(modes, visible, this.total);
     tools.append(this.search, toolsRow);
-    const split = el4("div", "dt-layer-split");
+    const split = el4("div", "inspector-layer-split");
     this.list.setAttribute("aria-label", "Map layers");
     this.list.addEventListener("mouseleave", () => this.preview.hover());
     this.list.addEventListener("focusout", (event) => {
@@ -13886,14 +13894,14 @@ var LayersPanel = class {
         this.preview.hover();
     });
     this.list.addEventListener("keydown", (event) => this.navigate(event));
-    const tabs = el4("div", "dt-subtabs dt-layer-tabs");
+    const tabs = el4("div", "inspector-subtabs inspector-layer-tabs");
     tabs.setAttribute("role", "tablist");
     tabs.setAttribute("aria-label", "Layer details");
     for (const name of ["Rules", "Diagnosis", "Data", "Origin"]) {
       const button4 = action(name, () => this.selectTab(name));
-      button4.id = `dt-layer-tab-${name.toLowerCase()}`;
+      button4.id = `inspector-layer-tab-${name.toLowerCase()}`;
       button4.setAttribute("role", "tab");
-      button4.setAttribute("aria-controls", "dt-layer-details");
+      button4.setAttribute("aria-controls", "inspector-layer-details");
       button4.addEventListener("keydown", (event) => {
         const names = [...this.tabs.keys()];
         const delta = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
@@ -13906,11 +13914,11 @@ var LayersPanel = class {
       this.tabs.set(name, button4);
       tabs.append(button4);
     }
-    this.content.id = "dt-layer-details";
+    this.content.id = "inspector-layer-details";
     this.content.setAttribute("role", "tabpanel");
     this.content.tabIndex = 0;
     this.detail.append(this.heading, tabs, this.content);
-    const sidebar = el4("div", "dt-layer-sidebar");
+    const sidebar = el4("div", "inspector-layer-sidebar");
     sidebar.append(tools, this.list);
     split.append(sidebar, this.detail);
     this.notice.setAttribute("role", "status");
@@ -13922,15 +13930,15 @@ var LayersPanel = class {
   search = el4("input");
   visibleOnly = el4("input");
   visibleIds;
-  list = el4("div", "dt-layer-list");
-  detail = el4("div", "dt-layer-detail");
-  content = el4("div", "dt-scroll dt-layer-content");
-  heading = el4("div", "dt-layer-heading");
+  list = el4("div", "inspector-layer-list");
+  detail = el4("div", "inspector-layer-detail");
+  content = el4("div", "inspector-scroll inspector-layer-content");
+  heading = el4("div", "inspector-layer-heading");
   tabs = /* @__PURE__ */ new Map();
   modes = /* @__PURE__ */ new Map();
-  total = el4("span", "dt-layer-total");
-  notice = el4("span", "dt-layer-notice");
-  copy = action("Copy context", () => this.openContext(), "dt-layer-copy");
+  total = el4("span", "inspector-layer-total");
+  notice = el4("span", "inspector-layer-notice");
+  copy = action("Copy context", () => this.openContext(), "inspector-layer-copy");
   mode = "module";
   tab = "Rules";
   collapsed = /* @__PURE__ */ new Set();
@@ -13981,7 +13989,7 @@ var LayersPanel = class {
     if (this.measurementDirty) this.scheduleMeasurement();
   };
   sourceChanged = (event) => {
-    if (event.sourceId?.startsWith("__tileflow-devtools-")) return;
+    if (event.sourceId?.startsWith("__tileflow-inspector-")) return;
     this.cache.clear();
     this.measurementDirty = true;
     this.dirty = true;
@@ -14243,13 +14251,13 @@ var LayersPanel = class {
     const label = layerLabel(layer), index = Math.max(label.lastIndexOf("."), label.lastIndexOf("/"));
     const span = el4("span");
     span.append(
-      el4("span", "dt-layer-prefix", label.slice(0, index + 1)),
-      el4("span", "dt-layer-name", label.slice(index + 1))
+      el4("span", "inspector-layer-prefix", label.slice(0, index + 1)),
+      el4("span", "inspector-layer-name", label.slice(index + 1))
     );
     return span;
   }
   zoomRange(layer) {
-    const range = el4("span", "dt-zrange"), bar = el4("i"), marker = el4("em");
+    const range = el4("span", "inspector-zrange"), bar = el4("i"), marker = el4("em");
     const max = Math.max(22, this.map?.getMaxZoom() ?? 22), percent = (v) => Math.max(0, Math.min(100, v / max * 100));
     bar.style.left = `${percent(layer.minzoom)}%`;
     bar.style.width = `${Math.max(0, percent(layer.maxzoom) - percent(layer.minzoom))}%`;
@@ -14261,7 +14269,7 @@ var LayersPanel = class {
   }
   visibilityControl(layers, label) {
     const hidden = layers.every((layer) => layer.layout.visibility === "none");
-    const control = el4("span", "dt-eye");
+    const control = el4("span", "inspector-eye");
     control.tabIndex = 0;
     control.setAttribute("role", "button");
     control.setAttribute("aria-label", `${hidden ? "Show" : "Hide"} ${label}`);
@@ -14300,7 +14308,7 @@ var LayersPanel = class {
     }
   }
   renderFilter(layer) {
-    const section = el4("section", "dt-layer-section"), head = el4("div", "dt-rule-toggle");
+    const section = el4("section", "inspector-layer-section"), head = el4("div", "inspector-rule-toggle");
     section.dataset.ruleSection = "filter";
     section.dataset.ruleProperty = "filter";
     const edits = this.options.editor(this.side), target = { layer: layer.id, section: "filter", property: "filter" };
@@ -14320,7 +14328,7 @@ var LayersPanel = class {
       }
     });
     head.append(toggle, el4("h4", "", "Feature filter"));
-    const chips = el4("div", "dt-filter-chips");
+    const chips = el4("div", "inspector-filter-chips");
     const conditions = Array.isArray(raw) && raw[0] === "all" ? raw.slice(1) : raw ? [raw] : [];
     const describe = (value) => {
       if (!Array.isArray(value)) return String(value);
@@ -14333,9 +14341,9 @@ var LayersPanel = class {
       return JSON.stringify(value);
     };
     for (const condition of conditions)
-      chips.append(el4("span", "dt-filter-chip", describe(condition)));
-    if (!conditions.length) chips.append(el4("span", "dt-layer-muted", "No filter declared"));
-    const code = el4("pre", "dt-layer-json", json(raw));
+      chips.append(el4("span", "inspector-filter-chip", describe(condition)));
+    if (!conditions.length) chips.append(el4("span", "inspector-layer-muted", "No filter declared"));
+    const code = el4("pre", "inspector-layer-json", json(raw));
     code.hidden = true;
     head.append(
       action("Show JSON", () => {
@@ -14366,12 +14374,12 @@ var LayersPanel = class {
         section.append(
           el4(
             "p",
-            "dt-note",
+            "inspector-note",
             `${count} of ${features.length}${features.length === 2e3 ? "+" : ""} sampled resident source features match`
           )
         );
       } catch {
-        section.append(el4("p", "dt-note", "Source-feature match count unavailable."));
+        section.append(el4("p", "inspector-note", "Source-feature match count unavailable."));
       }
     }
     if (entry?.disabled) chips.style.opacity = ".4";
@@ -14403,7 +14411,7 @@ var LayersPanel = class {
     this.total.title = "Matching layers / renderer layers";
     const fragment = document.createDocumentFragment();
     for (const [group, layers] of layerGroups(filtered, this.mode)) {
-      const section = el4("section", "dt-layer-group");
+      const section = el4("section", "inspector-layer-group");
       const closed = this.collapsed.has(group) && !this.search.value;
       const header = action(
         "",
@@ -14412,31 +14420,35 @@ var LayersPanel = class {
           else this.collapsed.add(group);
           this.renderList(true);
         },
-        "dt-layer-group-title"
+        "inspector-layer-group-title"
       );
       header.setAttribute("aria-expanded", String(!closed));
       header.append(
         el4("span", "", closed ? "\u25B8" : "\u25BE"),
         el4("strong", "", group),
-        el4("span", "dt-layer-count", String(layers.length))
+        el4("span", "inspector-layer-count", String(layers.length))
       );
       const owners = this.layers.filter((layer) => layers.some((item) => item.id === layer.id));
       header.prepend(this.visibilityControl(owners, group));
       section.append(header);
       if (!closed)
         for (const layer of layers) {
-          const row = action("", () => this.select(layer.id), "dt-layer-row");
+          const row = action("", () => this.select(layer.id), "inspector-layer-row");
           row.dataset.layerId = layer.id;
           row.setAttribute("aria-pressed", String(layer.id === this.selectedId));
           row.setAttribute("aria-label", `${layer.id}, ${layer.type}, ${eligibility(layer, zoom)}`);
           row.title = `${layer.id}
 ${layer.type}${layer.source ? ` \xB7 ${layer.source} / ${layer.sourceLayer ?? "\u2014"}` : ""}
 Draw index ${layer.index}`;
-          const glyph = el4("span", "dt-layer-glyph", kinds[layer.type] ?? "\u25C7");
-          const label = el4("span", "dt-layer-label");
+          const glyph = el4("span", "inspector-layer-glyph", kinds[layer.type] ?? "\u25C7");
+          const label = el4("span", "inspector-layer-label");
           label.append(this.prettyName(layer));
           const state = eligibility(layer, zoom);
-          const badge = el4("span", "dt-layer-state", state === "Enabled" ? layer.type : state);
+          const badge = el4(
+            "span",
+            "inspector-layer-state",
+            state === "Enabled" ? layer.type : state
+          );
           badge.dataset.state = state;
           row.append(
             this.visibilityControl([layer], layerLabel(layer)),
@@ -14462,7 +14474,7 @@ Draw index ${layer.index}`;
       fragment.append(
         el4(
           "p",
-          "dt-empty",
+          "inspector-empty",
           this.map ? this.visibleOnly.checked ? "No layers match this view and filter." : "No layers match this filter." : "Waiting for map layers\u2026"
         )
       );
@@ -14514,7 +14526,7 @@ Draw index ${layer.index}`;
       this.picked?.at
     ]);
     if (!force && key === this.detailKey) return;
-    if (!force && this.tab === "Rules" && this.content.contains(document.activeElement) && document.activeElement?.closest(".dt-layer-rule-editor"))
+    if (!force && this.tab === "Rules" && this.content.contains(document.activeElement) && document.activeElement?.closest(".inspector-layer-rule-editor"))
       return;
     this.detailKey = key;
     this.copy.disabled = !this.map || !this.selectedId;
@@ -14526,17 +14538,21 @@ Draw index ${layer.index}`;
     this.content.replaceChildren();
     if (!this.selectedId || !this.map) {
       this.content.append(
-        el4("div", "dt-empty", "Select a layer to inspect its rules, data and runtime evidence.")
+        el4(
+          "div",
+          "inspector-empty",
+          "Select a layer to inspect its rules, data and runtime evidence."
+        )
       );
       return;
     }
-    const title = el4("div", "dt-layer-title");
+    const title = el4("div", "inspector-layer-title");
     title.append(
       el4("strong", "", layer ? layerLabel(layer) : "Layer no longer present"),
       el4("code", "", this.selectedId)
     );
     if (layer) {
-      const status = el4("div", "dt-layer-status");
+      const status = el4("div", "inspector-layer-status");
       status.dataset.state = eligibility(layer, this.map.getZoom());
       status.append(this.zoomRange(layer), el4("span", "", `z${layer.minzoom}\u2013${layer.maxzoom}`));
       if (status.dataset.state === "Outside zoom")
@@ -14559,7 +14575,7 @@ Draw index ${layer.index}`;
       this.content.append(
         el4(
           "p",
-          "dt-note",
+          "inspector-note",
           "The layer is absent from this renderer. Its ID will stay selected if it returns."
         )
       );
@@ -14567,18 +14583,18 @@ Draw index ${layer.index}`;
     if (this.tab === "Rules") this.focusRuleTarget();
   }
   renderDiagnosis(layer) {
-    const evidence = el4("div", "dt-layer-evidence");
+    const evidence = el4("div", "inspector-layer-evidence");
     const feature = this.picked?.feature ?? this.samples.features[this.sampleIndex];
     for (const item of [
       ...diagnoseLayer(this.map, layer, this.samples),
       ...layer ? explainFeatureVisibility(this.map, layer, feature) : []
     ]) {
-      const row = el4("div", "dt-layer-evidence-row");
+      const row = el4("div", "inspector-layer-evidence-row");
       row.dataset.state = item.state;
       row.append(
         el4(
           "span",
-          "dt-layer-indicator",
+          "inspector-layer-indicator",
           item.state === "pass" ? "\u2713" : item.state === "warn" ? "!" : "\xB7"
         ),
         el4("strong", "", item.label),
@@ -14589,7 +14605,7 @@ Draw index ${layer.index}`;
     this.content.append(evidence);
     if (!layer) return;
     if (layer.runtime) this.section("Runtime controller", layer.runtime);
-    const neighbors = el4("div", "dt-layer-neighbors");
+    const neighbors = el4("div", "inspector-layer-neighbors");
     neighbors.append(el4("strong", "", "Renderer sequence"));
     for (const [label, entry] of [
       ["Earlier", this.layers[layer.index - 1]],
@@ -14597,9 +14613,9 @@ Draw index ${layer.index}`;
       ["Later", this.layers[layer.index + 1]]
     ]) {
       const row = el4("div");
-      row.append(el4("span", "dt-layer-muted", label));
+      row.append(el4("span", "inspector-layer-muted", label));
       row.append(
-        entry ? action(entry.id, () => this.select(entry.id), "dt-layer-link") : el4("span", "", "End of stack")
+        entry ? action(entry.id, () => this.select(entry.id), "inspector-layer-link") : el4("span", "", "End of stack")
       );
       neighbors.append(row);
     }
@@ -14610,14 +14626,14 @@ Draw index ${layer.index}`;
       this.content.append(
         el4(
           "p",
-          "dt-note",
+          "inspector-note",
           "Custom rendering is controlled by its runtime. Style paint, layout and feature filters are unavailable. See Diagnosis and Origin."
         )
       );
       return;
     }
-    const tools = el4("div", "dt-tools");
-    const defaults = el4("label", "dt-rule-defaults"), toggle = el4("input");
+    const tools = el4("div", "inspector-tools");
+    const defaults = el4("label", "inspector-rule-defaults"), toggle = el4("input");
     toggle.type = "checkbox";
     toggle.setAttribute("role", "switch");
     toggle.checked = this.showDefaults;
@@ -14631,7 +14647,7 @@ Draw index ${layer.index}`;
     tools.append(
       el4(
         "span",
-        "dt-layer-muted",
+        "inspector-layer-muted",
         `At zoom ${this.map.getZoom().toFixed(2)}${this.picked ? " \xB7 picked feature" : sample ? ` \xB7 sample ${this.sampleIndex + 1}` : " \xB7 no feature sample"}`
       )
     );
@@ -14649,7 +14665,7 @@ Draw index ${layer.index}`;
           ...this.showDefaults ? Object.keys(specs) : []
         ])
       ];
-      const table = el4("table", "dt-layer-rules");
+      const table = el4("table", "inspector-layer-rules");
       const head = el4("thead"), header = el4("tr");
       for (const text of [
         section === "paint" ? `Paint \xB7 ${keys.length}` : `Layout \xB7 ${keys.length}`,
@@ -14666,10 +14682,10 @@ Draw index ${layer.index}`;
         row.dataset.ruleSection = section;
         row.dataset.ruleProperty = key;
         rule.append(
-          el4("code", "dt-layer-rule-name", key),
+          el4("code", "inspector-layer-rule-name", key),
           el4(
             "span",
-            "dt-layer-dependency",
+            "inspector-layer-dependency",
             `${disabled ? "disabled \xB7 " : key in declared ? "" : "default \xB7 "}${expressionDependencies(raw).join(" + ")}`
           )
         );
@@ -14683,7 +14699,7 @@ Draw index ${layer.index}`;
           disabled ? raw : void 0
         );
         if (key === "text-font" && Array.isArray(evaluated) && evaluated.every((v) => typeof v === "string")) {
-          const preview = el4("div", "dt-rule-font-preview"), controller = new AbortController();
+          const preview = el4("div", "inspector-rule-font-preview"), controller = new AbortController();
           rule.append(preview);
           this.ruleCleanups.push(() => controller.abort());
           void this.fontPreviews.render(evaluated.join(","), this.map.getStyle(), this.side, controller.signal).then((canvas) => {
@@ -14699,7 +14715,7 @@ Draw index ${layer.index}`;
           );
           if (points.every((point) => typeof point === "number" && Number.isFinite(point))) {
             const nums = points, lo = Math.min(...nums), hi = Math.max(...nums);
-            const spark = el4("div", "dt-rule-spark");
+            const spark = el4("div", "inspector-rule-spark");
             spark.innerHTML = `<svg viewBox="0 0 130 26"><polyline fill="none" stroke="currentColor" stroke-width="1.5" points="${nums.map((n, z) => `${z / 22 * 130},${25 - (n - lo) / (hi - lo || 1) * 24}`).join(" ")}"/><line stroke="currentColor" stroke-dasharray="2 2" x1="${this.map.getZoom() / 22 * 130}" x2="${this.map.getZoom() / 22 * 130}" y1="0" y2="26"/></svg>`;
             spark.append(
               el4(
@@ -14714,23 +14730,31 @@ Draw index ${layer.index}`;
         this.renderRuleInput(value, row, layer, section, key, evaluated);
         if (key === "icon-image" && typeof evaluated === "string")
           value.append(
-            action("Sprite \u2197", () => this.options.assets("Sprites", evaluated), "dt-layer-link")
+            action(
+              "Sprite \u2197",
+              () => this.options.assets("Sprites", evaluated),
+              "inspector-layer-link"
+            )
           );
         if (key === "text-font")
           value.append(
-            action("Font preview \u2197", () => this.options.assets("Fonts", ""), "dt-layer-link")
+            action(
+              "Font preview \u2197",
+              () => this.options.assets("Fonts", ""),
+              "inspector-layer-link"
+            )
           );
         row.append(rule, value);
         body.append(row);
       }
       if (!keys.length) {
-        const row = el4("tr"), cell = el4("td", "dt-layer-muted", "No explicit rules. Renderer defaults apply.");
+        const row = el4("tr"), cell = el4("td", "inspector-layer-muted", "No explicit rules. Renderer defaults apply.");
         cell.colSpan = 2;
         row.append(cell);
         body.append(row);
       }
       table.append(body);
-      const card = el4("div", "dt-card dt-card-table");
+      const card = el4("div", "inspector-card inspector-card-table");
       card.append(table);
       this.content.append(card);
     }
@@ -14758,7 +14782,7 @@ Draw index ${layer.index}`;
     const editKey = edits.key(target);
     const format2 = (value) => typeof value === "string" ? value : JSON.stringify(value) ?? "";
     let current = evaluated;
-    const controls = el4("div", "dt-layer-rule-editor");
+    const controls = el4("div", "inspector-layer-rule-editor");
     const enabled = el4("input");
     if (enabled) {
       enabled.type = "checkbox";
@@ -14766,7 +14790,7 @@ Draw index ${layer.index}`;
       queueMicrotask(() => {
         if (row.isConnected) {
           const rule = row.firstElementChild;
-          const wrap = el4("label", "dt-rule-toggle");
+          const wrap = el4("label", "inspector-rule-toggle");
           wrap.append(enabled, rule.firstChild);
           rule.prepend(wrap);
         }
@@ -14786,7 +14810,7 @@ Draw index ${layer.index}`;
     input.value = format2(current);
     input.setAttribute("aria-label", property);
     input.title = "Temporary override for the entire layer";
-    const error2 = el4("span", "dt-layer-rule-error");
+    const error2 = el4("span", "inspector-layer-rule-error");
     error2.setAttribute("role", "alert");
     error2.hidden = true;
     const isCurrent = () => this.active && controls.isConnected && side.map === map && this.side === side && this.selectedId === layer.id && side.loadEpoch === epoch && Boolean(map.getLayer(layer.id));
@@ -14910,7 +14934,7 @@ Draw index ${layer.index}`;
           showError(cause instanceof Error ? cause.message : "Unable to restore this rule.");
         }
       },
-      "dt-layer-rule-reset"
+      "inspector-layer-rule-reset"
     );
     reset.title = "Restore original rule";
     reset.setAttribute("aria-label", `Reset ${property}`);
@@ -14918,7 +14942,7 @@ Draw index ${layer.index}`;
     controls.append(input);
     if (spec.type === "enum") {
       input.hidden = true;
-      const choices = el4("div", "dt-rule-choices");
+      const choices = el4("div", "inspector-rule-choices");
       for (const value of Object.keys(spec.values)) {
         const choice = action(value, () => {
           apply(value);
@@ -14958,7 +14982,7 @@ Draw index ${layer.index}`;
     cell.append(controls, error2);
   }
   renderData(layer) {
-    const toolbar = el4("div", "dt-tools");
+    const toolbar = el4("div", "inspector-tools");
     toolbar.append(
       action("Refresh samples", () => {
         this.cache.clear();
@@ -14968,7 +14992,7 @@ Draw index ${layer.index}`;
         this.scheduleMeasurement();
       })
     );
-    this.content.append(toolbar, el4("p", "dt-note", this.samples.reason));
+    this.content.append(toolbar, el4("p", "inspector-note", this.samples.reason));
     if (this.picked)
       this.section("Picked feature", {
         coordinate: this.picked.coordinate,
@@ -14980,11 +15004,11 @@ Draw index ${layer.index}`;
       this.content.append(
         el4(
           "p",
-          "dt-layer-data-summary",
+          "inspector-layer-data-summary",
           `${this.samples.total} returned fragments \xB7 ${this.samples.features.length} retained`
         )
       );
-    const table = el4("table", "dt-layer-rules"), body = el4("tbody");
+    const table = el4("table", "inspector-layer-rules"), body = el4("tbody");
     this.samples.features.forEach((feature2, index) => {
       const row = el4("tr");
       row.dataset.selected = String(this.sampleIndex === index);
@@ -15000,19 +15024,19 @@ Draw index ${layer.index}`;
           this.renderDetail(true);
           this.highlight.show(this.map, [feature2]);
         },
-        "dt-layer-link"
+        "inspector-layer-link"
       );
       button4.title = `Sample ${index + 1} \xB7 ${feature2.geometry.type}`;
       cell.append(button4);
       const inspect = el4("td");
       inspect.append(
-        action("Use for rules \u2197", () => this.inspectFeature(feature2), "dt-layer-link")
+        action("Use for rules \u2197", () => this.inspectFeature(feature2), "inspector-layer-link")
       );
       row.append(cell, el4("td", "", feature2.geometry.type), inspect);
       body.append(row);
     });
     table.append(body);
-    const samples = el4("div", "dt-layer-samples");
+    const samples = el4("div", "inspector-layer-samples");
     samples.append(table);
     this.content.append(samples);
     const feature = this.samples.features[this.sampleIndex];
@@ -15043,12 +15067,12 @@ Draw index ${layer.index}`;
       this.content.append(
         el4(
           "p",
-          "dt-note",
+          "inspector-note",
           layer.type === "custom" ? "Runtime layer. No compiler contribution is attached to this layer." : "Unattributed. No matching compiler sidecar contribution is available."
         )
       );
     for (const contribution of layer.contributions) {
-      const card = el4("section", "dt-layer-origin");
+      const card = el4("section", "inspector-layer-origin");
       card.append(el4("strong", "", contribution.owner), el4("code", "", contribution.target));
       const dl = el4("dl");
       for (const [name, value] of [
@@ -15071,21 +15095,21 @@ Draw index ${layer.index}`;
         dl.append(el4("dt", "", name), el4("dd", "", value));
       card.append(dl);
       if (contribution.operations?.length)
-        card.append(el4("pre", "dt-layer-json", json(contribution.operations)));
+        card.append(el4("pre", "inspector-layer-json", json(contribution.operations)));
       this.content.append(card);
     }
     this.content.append(
       el4(
         "p",
-        "dt-note",
+        "inspector-note",
         "These are semantic owners and compiler operations, not exact file or line locations. Shared physical layers retain all contributions."
       )
     );
     if (layer.runtime) this.section("Runtime capability", layer.runtime);
   }
   section(title, value) {
-    const section = el4("section", "dt-layer-section");
-    section.append(el4("h4", "", title), el4("pre", "dt-layer-json", json(value)));
+    const section = el4("section", "inspector-layer-section");
+    section.append(el4("h4", "", title), el4("pre", "inspector-layer-json", json(value)));
     this.content.append(section);
   }
   context() {
@@ -15133,10 +15157,10 @@ Draw index ${layer.index}`;
       return;
     }
     this.dialog?.remove();
-    const dialog = el4("dialog", "dt-layer-dialog");
+    const dialog = el4("dialog", "inspector-layer-dialog");
     this.dialog = dialog;
     dialog.setAttribute("aria-label", "Layer context preview");
-    const head = el4("div", "dt-layer-dialog-head");
+    const head = el4("div", "inspector-layer-dialog-head");
     head.append(
       el4("strong", "", "Copy layer context"),
       action("Close", () => dialog.close())
@@ -15150,7 +15174,7 @@ Draw index ${layer.index}`;
     preview.readOnly = true;
     preview.setAttribute("aria-label", "Context preview");
     preview.spellcheck = false;
-    const tools = el4("div", "dt-tools");
+    const tools = el4("div", "inspector-tools");
     let format2 = "Markdown";
     const buttons = /* @__PURE__ */ new Map();
     const render = () => {
@@ -15167,7 +15191,11 @@ Draw index ${layer.index}`;
       tools.append(button4);
       buttons.set(name, button4);
     }
-    const status = el4("span", "dt-layer-muted", "Snapshot frozen while this preview is open.");
+    const status = el4(
+      "span",
+      "inspector-layer-muted",
+      "Snapshot frozen while this preview is open."
+    );
     status.setAttribute("role", "status");
     const copy = action(
       "Copy to clipboard",
@@ -15180,7 +15208,7 @@ Draw index ${layer.index}`;
           status.textContent = "Clipboard unavailable. Copy the selected text manually.";
         });
       },
-      "dt-layer-copy"
+      "inspector-layer-copy"
     );
     tools.append(copy);
     question.addEventListener("input", render);
@@ -15191,7 +15219,7 @@ Draw index ${layer.index}`;
   }
 };
 
-// src/devtools/tile-details.ts
+// src/inspector/tile-details.ts
 function el5(tag, className = "", text = "") {
   const node = document.createElement(tag);
   node.className = className;
@@ -15205,7 +15233,7 @@ function button2(text, action2) {
   return node;
 }
 function values(entries) {
-  const list = el5("dl", "dt-kv");
+  const list = el5("dl", "inspector-kv");
   for (const [key, value] of Object.entries(entries)) {
     if (value === void 0) continue;
     list.append(el5("dt", "", key), el5("dd", "", String(value)));
@@ -15238,7 +15266,7 @@ var TileDetailsPanel = class {
   tab = "Source layers";
   layer = "";
   page = 0;
-  body = el5("div", "dt-scroll dt-tile-content");
+  body = el5("div", "inspector-scroll inspector-tile-content");
   update(map, tile) {
     const contents = inspectTile(map, tile);
     const signature = JSON.stringify([
@@ -15272,12 +15300,12 @@ var TileDetailsPanel = class {
   }
   render() {
     const tile = this.tile;
-    const header = el5("div", "dt-tools dt-tile-heading");
+    const header = el5("div", "inspector-tools inspector-tile-heading");
     header.append(el5("strong", "", `Tile ${tile.z}/${tile.x}/${tile.y}`));
     const close = button2("\xD7", this.close);
     close.setAttribute("aria-label", "Close tile details");
     header.append(button2("Show on map", this.highlight), close);
-    const tabs = el5("div", "dt-subtabs");
+    const tabs = el5("div", "inspector-subtabs");
     tabs.setAttribute("role", "tablist");
     tabs.setAttribute("aria-label", "Tile detail views");
     for (const name of ["Source layers", "Features", "Info"]) {
@@ -15287,8 +15315,8 @@ var TileDetailsPanel = class {
       });
       tab.setAttribute("role", "tab");
       tab.setAttribute("aria-selected", String(this.tab === name));
-      tab.id = `dt-tile-tab-${name.toLowerCase().replaceAll(" ", "-")}`;
-      tab.setAttribute("aria-controls", "dt-tile-detail-content");
+      tab.id = `inspector-tile-tab-${name.toLowerCase().replaceAll(" ", "-")}`;
+      tab.setAttribute("aria-controls", "inspector-tile-detail-content");
       tab.tabIndex = this.tab === name ? 0 : -1;
       tab.addEventListener("keydown", (event) => {
         if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
@@ -15300,18 +15328,18 @@ var TileDetailsPanel = class {
       });
       tabs.append(tab);
     }
-    this.body = el5("div", "dt-scroll dt-tile-content");
+    this.body = el5("div", "inspector-scroll inspector-tile-content");
     this.body.setAttribute("role", "tabpanel");
-    this.body.id = "dt-tile-detail-content";
+    this.body.id = "inspector-tile-detail-content";
     this.body.setAttribute(
       "aria-labelledby",
-      `dt-tile-tab-${this.tab.toLowerCase().replaceAll(" ", "-")}`
+      `inspector-tile-tab-${this.tab.toLowerCase().replaceAll(" ", "-")}`
     );
     this.body.setAttribute("aria-label", `Tile ${this.tab.toLowerCase().replaceAll(" ", "-")}`);
     const count = Object.values(this.contents?.layers ?? {}).reduce((n, l) => n + l.length, 0);
     const status = el5(
       "div",
-      "dt-tile-status",
+      "inspector-tile-status",
       `${tile.state} \xB7 ${size(tile.bytes)} raw \xB7 ${Object.keys(this.contents?.layers ?? {}).length} source layers \xB7 ${count} features`
     );
     this.root.replaceChildren(header, status, tabs, this.body);
@@ -15352,11 +15380,11 @@ var TileDetailsPanel = class {
       this.body.append(
         el5(
           "p",
-          "dt-note",
+          "inspector-note",
           `${layers.length} source layers \xB7 ${layers.reduce((total, [, layer]) => total + layer.length, 0).toLocaleString()} features`
         )
       );
-      const table = el5("table", "dt-table");
+      const table = el5("table", "inspector-table");
       const head = el5("thead"), header = el5("tr");
       for (const title of ["Source layer", "Features", "Used by"])
         header.append(el5("th", "", title));
@@ -15370,7 +15398,7 @@ var TileDetailsPanel = class {
           this.tab = "Features";
           this.render();
         });
-        link.className = "dt-cell-button";
+        link.className = "inspector-cell-button";
         cell.append(link);
         const used = el5("td");
         const consumers = this.map.getStyle().layers.filter(
@@ -15378,19 +15406,19 @@ var TileDetailsPanel = class {
         );
         for (const l of consumers) {
           const link2 = button2(l.id, () => this.revealLayer(l.id));
-          link2.className = "dt-tile-chip";
+          link2.className = "inspector-tile-chip";
           used.append(link2);
         }
         if (!consumers.length) used.textContent = "Unused \xB7 no style layer references this data";
-        row.append(cell, el5("td", "dt-number", layer.length.toLocaleString()), used);
+        row.append(cell, el5("td", "inspector-number", layer.length.toLocaleString()), used);
         body.append(row);
       }
       table.append(head, body);
-      const card = el5("div", "dt-card dt-card-table");
+      const card = el5("div", "inspector-card inspector-card-table");
       card.append(table);
       this.body.append(card);
     }
-    if (contents.message) this.body.append(el5("p", "dt-note", contents.message));
+    if (contents.message) this.body.append(el5("p", "inspector-note", contents.message));
   }
   data() {
     const contents = this.contents;
@@ -15398,7 +15426,7 @@ var TileDetailsPanel = class {
       this.body.append(
         el5(
           "p",
-          "dt-note",
+          "inspector-note",
           contents.message ?? "This tile contains an elevation grid, not vector features. See Info for its terrain data."
         )
       );
@@ -15406,14 +15434,14 @@ var TileDetailsPanel = class {
     }
     const names = Object.keys(contents.layers);
     if (!names.length) {
-      this.body.append(el5("p", "dt-note", "This vector tile contains no source layers."));
+      this.body.append(el5("p", "inspector-note", "This vector tile contains no source layers."));
       return;
     }
     if (!names.includes(this.layer)) {
       this.layer = names[0];
       this.page = 0;
     }
-    const toolbar = el5("div", "dt-tools"), select = el5("select");
+    const toolbar = el5("div", "inspector-tools"), select = el5("select");
     select.setAttribute("aria-label", "Tile source layer");
     for (const name of names)
       select.append(new Option(`${name} (${contents.layers[name].length.toLocaleString()})`, name));
@@ -15425,14 +15453,14 @@ var TileDetailsPanel = class {
     });
     select.hidden = true;
     toolbar.append(select);
-    toolbar.className = "dt-tile-chip-list";
+    toolbar.className = "inspector-tile-chip-list";
     for (const name of names) {
       const chip = button2(`${name} \xB7 ${contents.layers[name].length}`, () => {
         this.layer = name;
         this.page = 0;
         this.render();
       });
-      chip.className = "dt-tile-chip";
+      chip.className = "inspector-tile-chip";
       chip.setAttribute("aria-pressed", String(this.layer === name));
       toolbar.append(chip);
     }
@@ -15449,7 +15477,7 @@ var TileDetailsPanel = class {
       this.render();
     });
     next.disabled = end >= layer.length;
-    const paging = el5("div", "dt-tools dt-tile-paging");
+    const paging = el5("div", "inspector-tools inspector-tile-paging");
     paging.append(
       previous,
       el5("span", "", `${layer.length ? start + 1 : 0}\u2013${end} of ${layer.length.toLocaleString()}`),
@@ -15457,7 +15485,7 @@ var TileDetailsPanel = class {
     );
     this.body.append(
       toolbar,
-      el5("p", "dt-note", `Whole tile \xB7 MVT v${layer.version} \xB7 extent ${layer.extent}`),
+      el5("p", "inspector-note", `Whole tile \xB7 MVT v${layer.version} \xB7 extent ${layer.extent}`),
       paging
     );
     for (let index = start; index < end; index++) {
@@ -15465,7 +15493,7 @@ var TileDetailsPanel = class {
         const feature = layer.feature(index);
         const name = feature.properties.name ?? feature.properties["name:en"] ?? feature.properties.class;
         const kind = ["Unknown", "Point", "LineString", "Polygon"][feature.type];
-        const row = el5("details", "dt-tile-feature");
+        const row = el5("details", "inspector-tile-feature");
         row.append(
           el5(
             "summary",
@@ -15500,20 +15528,22 @@ var TileDetailsPanel = class {
                 )
               );
             } catch {
-              geometry.append(el5("p", "dt-note", "This feature geometry could not be decoded."));
+              geometry.append(
+                el5("p", "inspector-note", "This feature geometry could not be decoded.")
+              );
             }
           });
           row.append(geometry);
         });
         this.body.append(row);
       } catch {
-        this.body.append(el5("p", "dt-note", `Feature #${index + 1} could not be decoded.`));
+        this.body.append(el5("p", "inspector-note", `Feature #${index + 1} could not be decoded.`));
       }
     }
   }
 };
 
-// src/devtools/browser.ts
+// src/inspector/browser.ts
 function element(tag, className = "", text = "") {
   const result = document.createElement(tag);
   result.className = className;
@@ -15542,7 +15572,7 @@ var paths = {
   inspect: '<path d="M8 3H3v5m13-5h5v5M3 16v5h5m4-10 8 4-5 1-1 5z"/>'
 };
 function icon(name, label, action2) {
-  const result = button3("", action2, "dt-icon");
+  const result = button3("", action2, "inspector-icon");
   result.title = label;
   result.setAttribute("aria-label", label);
   result.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name]}</svg>`;
@@ -15566,11 +15596,11 @@ function safe(action2, report) {
     report(error2 instanceof Error ? error2.message : String(error2));
   }
 }
-var Devtools = class {
+var Inspector = class {
   constructor(host) {
     this.host = host;
-    document.body.classList.add("devtools-ready");
-    this.shell.setAttribute("aria-label", "Map developer tools");
+    document.body.classList.add("inspector-ready");
+    this.shell.setAttribute("aria-label", "Inspector");
     this.restoreLayout();
     this.buildShell();
     this.buildInspect();
@@ -15651,7 +15681,7 @@ var Devtools = class {
     });
     this.workspace.append(this.shell);
     this.applyLayout();
-    window.__tileflowDevtoolsUI = {
+    window.__tileflowInspectorUI = {
       show: (panel2) => this.show(panel2),
       feedback: this.report,
       selectionChanged: () => this.selectionChanged(),
@@ -15681,17 +15711,17 @@ var Devtools = class {
   }
   host;
   workspace = document.querySelector(".workspace");
-  shell = element("section", "dt-shell");
-  body = element("div", "dt-body");
-  head = element("div", "dt-head");
-  tabs = element("div", "dt-tabs");
-  cameraControls = element("fieldset", "dt-camera");
+  shell = element("section", "inspector-shell");
+  body = element("div", "inspector-body");
+  head = element("div", "inspector-head");
+  tabs = element("div", "inspector-tabs");
+  cameraControls = element("fieldset", "inspector-camera");
   cameraFields = [];
   initialCamera;
   cameraFrame;
   historyPending = false;
   theme = "system";
-  menu = element("div", "dt-menu");
+  menu = element("div", "inspector-menu");
   panels = /* @__PURE__ */ new Map();
   tabButtons = /* @__PURE__ */ new Map();
   activePanel = "layers";
@@ -15705,22 +15735,22 @@ var Devtools = class {
   filter = "";
   edits = /* @__PURE__ */ new Map();
   geometries = /* @__PURE__ */ new Map();
-  tree = element("div", "dt-tree");
-  detail = element("div", "dt-scroll");
+  tree = element("div", "inspector-tree");
+  detail = element("div", "inspector-scroll");
   scopeSelect = element("select");
-  curve = element("div", "dt-zoom");
+  curve = element("div", "inspector-zoom");
   notice = document.getElementById("wb-notice");
   noticeStore = element("div");
   undoButton = icon("undo", "Undo", () => this.changeHistory("undo"));
   redoButton = icon("redo", "Redo", () => this.changeHistory("redo"));
   resetChangesButton = button3("Reset all changes", () => this.resetAll());
-  message = element("div", "dt-status-message");
+  message = element("div", "inspector-status-message");
   networkFilter = "";
-  networkSidebar = element("div", "dt-tiles-sidebar");
-  networkGrid = element("div", "dt-tiles-grid-wrap");
-  networkLog = element("div", "dt-scroll");
-  networkDetail = element("div", "dt-network-detail");
-  networkBody = element("div", "dt-network-body");
+  networkSidebar = element("div", "inspector-tiles-sidebar");
+  networkGrid = element("div", "inspector-tiles-grid-wrap");
+  networkLog = element("div", "inspector-scroll");
+  networkDetail = element("div", "inspector-network-detail");
+  networkBody = element("div", "inspector-network-body");
   tileDetails = new TileDetailsPanel(
     this.networkDetail,
     () => {
@@ -15735,7 +15765,7 @@ var Devtools = class {
       if (this.networkTile) this.showTile(this.host.active(), this.networkTile);
     }
   );
-  networkSummary = element("div", "dt-footer");
+  networkSummary = element("div", "inspector-footer");
   networkKey = "";
   sideMaps = /* @__PURE__ */ new Map();
   networkSelection;
@@ -15757,13 +15787,13 @@ var Devtools = class {
   guarded = (action2) => safe(action2, this.report);
   buildShell() {
     const inspect = document.getElementById("inspect-toggle");
-    inspect.className = "dt-icon";
+    inspect.className = "inspector-icon";
     inspect.innerHTML = icon("inspect", "", () => {
     }).innerHTML;
     inspect.setAttribute("aria-label", "Select a map element (I)");
-    const divider = element("span", "dt-divider");
+    const divider = element("span", "inspector-divider");
     this.tabs.setAttribute("role", "tablist");
-    this.tabs.setAttribute("aria-label", "Developer tools");
+    this.tabs.setAttribute("aria-label", "Inspector panels");
     for (const [id, label] of Object.entries({
       inspect: "Inspect",
       scene: "Map",
@@ -15773,15 +15803,15 @@ var Devtools = class {
       performance: "Debug",
       diagnostics: "Diagnostics"
     })) {
-      const panel = element("section", "dt-panel");
-      panel.id = `dt-panel-${id}`;
+      const panel = element("section", "inspector-panel");
+      panel.id = `inspector-panel-${id}`;
       panel.hidden = true;
       panel.setAttribute("role", "tabpanel");
-      panel.setAttribute("aria-labelledby", `dt-tab-${id}`);
+      panel.setAttribute("aria-labelledby", `inspector-tab-${id}`);
       const tab = button3(label, () => {
         this.show(id);
       });
-      tab.id = `dt-tab-${id}`;
+      tab.id = `inspector-tab-${id}`;
       tab.setAttribute("role", "tab");
       tab.setAttribute("aria-controls", panel.id);
       if (id !== "inspect") this.tabButtons.set(id, tab);
@@ -15798,16 +15828,16 @@ var Devtools = class {
       this.show(keys[next]);
       this.tabButtons.get(keys[next]).focus();
     });
-    const more = icon("more", "Customize and control DevTools", () => {
+    const more = icon("more", "Customize and control Inspector", () => {
       this.menu.hidden = !this.menu.hidden;
       more.setAttribute("aria-expanded", String(!this.menu.hidden));
     });
     more.setAttribute("aria-expanded", "false");
-    more.setAttribute("aria-controls", "dt-menu");
-    this.menu.id = "dt-menu";
+    more.setAttribute("aria-controls", "inspector-menu");
+    this.menu.id = "inspector-menu";
     this.menu.hidden = true;
-    this.menu.append(element("div", "dt-menu-label", "Dock side"));
-    const choices = element("div", "dt-dock-options");
+    this.menu.append(element("div", "inspector-menu-label", "Dock side"));
+    const choices = element("div", "inspector-dock-options");
     for (const placement of ["left", "bottom", "right"]) {
       const choice = icon(placement, `Dock to ${placement}`, () => {
         this.dock = placement;
@@ -15824,9 +15854,9 @@ var Devtools = class {
       more.setAttribute("aria-expanded", "false");
       more.focus();
     });
-    const themes = element("div", "dt-segments");
+    const themes = element("div", "inspector-segments");
     try {
-      const saved = localStorage.getItem("tileflow-devtools-theme");
+      const saved = localStorage.getItem("tileflow-inspector-theme") ?? localStorage.getItem("tileflow-devtools-theme");
       if (saved === "light" || saved === "dark") this.theme = saved;
     } catch {
     }
@@ -15835,7 +15865,7 @@ var Devtools = class {
       for (const b of themes.querySelectorAll("button"))
         b.setAttribute("aria-pressed", String(b.dataset.theme === this.theme));
       try {
-        localStorage.setItem("tileflow-devtools-theme", this.theme);
+        localStorage.setItem("tileflow-inspector-theme", this.theme);
       } catch {
       }
     };
@@ -15850,7 +15880,7 @@ var Devtools = class {
     applyTheme();
     this.menu.append(
       choices,
-      element("div", "dt-menu-label", "Theme"),
+      element("div", "inspector-menu-label", "Theme"),
       themes,
       element("hr"),
       button3("Restore default layout", () => {
@@ -15867,7 +15897,7 @@ var Devtools = class {
     this.undoButton.title = "Undo last preview change (Ctrl/\u2318Z)";
     this.redoButton.title = "Redo preview change (Ctrl/\u2318Shift+Z)";
     this.syncHistoryControls();
-    const navigation = element("div", "dt-head-main");
+    const navigation = element("div", "inspector-head-main");
     this.buildCameraControls();
     navigation.append(this.tabs);
     this.head.append(
@@ -15877,7 +15907,7 @@ var Devtools = class {
       this.undoButton,
       this.redoButton,
       more,
-      icon("close", "Close DevTools", () => {
+      icon("close", "Close Inspector", () => {
         this.clearInspectHover();
         this.cancelColorPreviews();
         this.diagnostics?.setActive(false);
@@ -15886,10 +15916,10 @@ var Devtools = class {
         this.host.inspect(false);
       })
     );
-    const resize = element("div", "dt-resize");
+    const resize = element("div", "inspector-resize");
     resize.tabIndex = 0;
     resize.setAttribute("role", "separator");
-    resize.setAttribute("aria-label", "Resize developer tools");
+    resize.setAttribute("aria-label", "Resize Inspector");
     this.installResize(resize);
     this.message.hidden = true;
     this.message.setAttribute("role", "status");
@@ -15904,9 +15934,9 @@ var Devtools = class {
       this.message,
       this.noticeStore
     );
-    const reopen = button3("DevTools", () => this.show(this.activePanel));
-    reopen.id = "dt-reopen";
-    reopen.setAttribute("aria-label", "Open developer tools");
+    const reopen = button3("Inspector", () => this.show(this.activePanel));
+    reopen.id = "inspector-reopen";
+    reopen.setAttribute("aria-label", "Open Inspector");
     this.workspace.append(reopen);
   }
   show(panel) {
@@ -15943,7 +15973,9 @@ var Devtools = class {
   }
   restoreLayout() {
     try {
-      const saved = JSON.parse(localStorage.getItem("tileflow-devtools-layout-v1") || "null");
+      const saved = JSON.parse(
+        localStorage.getItem("tileflow-inspector-layout-v1") ?? localStorage.getItem("tileflow-devtools-layout-v1") ?? "null"
+      );
       if (saved && ["bottom", "left", "right"].includes(saved.dock)) {
         this.dock = saved.dock;
         for (const key of Object.keys(this.layout))
@@ -15955,7 +15987,7 @@ var Devtools = class {
   saveLayout() {
     try {
       localStorage.setItem(
-        "tileflow-devtools-layout-v1",
+        "tileflow-inspector-layout-v1",
         JSON.stringify({ dock: this.dock, ...this.layout })
       );
     } catch {
@@ -15969,12 +16001,12 @@ var Devtools = class {
     this.workspace.dataset.dock = this.dock;
     for (const [key, value] of Object.entries(this.layout))
       this.workspace.style.setProperty(
-        "--dt-" + key.replace(/[A-Z]/gu, (c) => "-" + c.toLowerCase()),
+        "--inspector-" + key.replace(/[A-Z]/gu, (c) => "-" + c.toLowerCase()),
         value + "px"
       );
     for (const b of this.menu.querySelectorAll("[data-dock-option]"))
       b.setAttribute("aria-pressed", String(b.dataset.dockOption === this.dock));
-    const resize = this.shell.querySelector(".dt-resize");
+    const resize = this.shell.querySelector(".inspector-resize");
     resize?.setAttribute(
       "aria-orientation",
       this.dock === "left" || this.dock === "right" ? "vertical" : "horizontal"
@@ -16006,7 +16038,7 @@ var Devtools = class {
     });
   }
   pointerGesture(event, move, end) {
-    const shield = element("div", "dt-resize-shield");
+    const shield = element("div", "inspector-resize-shield");
     this.workspace.append(shield);
     const owner = event.currentTarget;
     owner.setPointerCapture(event.pointerId);
@@ -16025,7 +16057,7 @@ var Devtools = class {
     if (event.target?.closest("input,select,textarea,[contenteditable]")) return;
     if (event.key === "Escape") {
       this.menu.hidden = true;
-      this.head.querySelector('[aria-controls="dt-menu"]')?.setAttribute("aria-expanded", "false");
+      this.head.querySelector('[aria-controls="inspector-menu"]')?.setAttribute("aria-expanded", "false");
     }
     if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
       event.preventDefault();
@@ -16033,13 +16065,13 @@ var Devtools = class {
     }
   };
   buildInspect() {
-    const grid = element("div", "dt-inspect-grid"), treeColumn = element("div", "dt-tree-column"), details = element("div", "dt-details");
+    const grid = element("div", "inspector-inspect-grid"), treeColumn = element("div", "inspector-tree-column"), details = element("div", "inspector-details");
     this.curve.append(
       document.getElementById("curve-property"),
       document.getElementById("curve-output")
     );
     treeColumn.append(this.tree);
-    const sub = element("div", "dt-subtabs");
+    const sub = element("div", "inspector-subtabs");
     sub.setAttribute("role", "tablist");
     sub.setAttribute("aria-label", "Selected element details");
     for (const label of ["Styles", "Properties", "Geometry", "Origin", "Zoom"]) {
@@ -16052,7 +16084,7 @@ var Devtools = class {
       b.setAttribute("aria-selected", String(label === this.subtab));
       sub.append(b);
     }
-    const tools = element("div", "dt-tools");
+    const tools = element("div", "inspector-tools");
     const search = element("input");
     search.type = "search";
     search.placeholder = "Filter";
@@ -16112,15 +16144,15 @@ var Devtools = class {
     this.tree.replaceChildren();
     const selection = this.host.selection(), { side, layer } = this.target();
     if (selection?.features.length && !this.selectedLayer) {
-      const source = element("div", "dt-tree-row");
+      const source = element("div", "inspector-tree-row");
       source.append(
-        element("span", "dt-dim", "\u25BE"),
-        element("span", "dt-token", "rendered-features"),
-        element("span", "dt-dim", `(${selection.features.length})`)
+        element("span", "inspector-dim", "\u25BE"),
+        element("span", "inspector-token", "rendered-features"),
+        element("span", "inspector-dim", `(${selection.features.length})`)
       );
       this.tree.append(source);
       selection.features.forEach((feature, index) => {
-        const row = button3("", () => this.host.selectFeature(index), "dt-tree-row");
+        const row = button3("", () => this.host.selectFeature(index), "inspector-tree-row");
         const preview = () => {
           this.clearInspectHover();
           this.inspectHoverSide = side;
@@ -16134,23 +16166,26 @@ var Devtools = class {
         row.setAttribute("aria-selected", String(index === selection.featureIndex));
         row.title = `${feature.layerId} \xB7 ${feature.geometryType} \xB7 ${feature.id ?? "no feature ID"}`;
         row.append(
-          element("span", "dt-dim", "\u203A"),
-          element("span", "dt-token", feature.geometryType),
-          element("span", "dt-attr", `"${nameOf(feature)}"`),
-          element("span", "dt-dim dt-truncate", feature.layerId)
+          element("span", "inspector-dim", "\u203A"),
+          element("span", "inspector-token", feature.geometryType),
+          element("span", "inspector-attr", `"${nameOf(feature)}"`),
+          element("span", "inspector-dim inspector-truncate", feature.layerId)
         );
         this.tree.append(row);
       });
     } else if (layer) {
-      const row = element("div", "dt-tree-row");
+      const row = element("div", "inspector-tree-row");
       row.setAttribute("aria-selected", "true");
-      row.append(element("span", "dt-token", layer.type), element("span", "dt-attr", layer.id));
+      row.append(
+        element("span", "inspector-token", layer.type),
+        element("span", "inspector-attr", layer.id)
+      );
       this.tree.append(row);
     } else
       this.tree.append(
         element(
           "div",
-          "dt-empty",
+          "inspector-empty",
           "Select an element in the map to inspect its styles, data and geometry."
         )
       );
@@ -16170,12 +16205,14 @@ var Devtools = class {
     this.scopeSelect.value = this.scope;
     this.scopeSelect.hidden = this.subtab !== "Styles";
     if (!map || !layer) {
-      this.detail.append(element("div", "dt-empty", "Select a rendered element or a layer."));
+      this.detail.append(
+        element("div", "inspector-empty", "Select a rendered element or a layer.")
+      );
       return;
     }
     if (this.subtab === "Zoom") {
       this.detail.append(
-        this.selectedLayer ? element("p", "dt-note", "Pick a rendered feature to explore its zoom curves.") : this.curve
+        this.selectedLayer ? element("p", "inspector-note", "Pick a rendered feature to explore its zoom curves.") : this.curve
       );
       return;
     }
@@ -16211,7 +16248,7 @@ var Devtools = class {
       this.detail.append(
         element(
           "p",
-          "dt-note",
+          "inspector-note",
           "Compiler attribution identifies semantic owners; exact source lines are not available."
         )
       );
@@ -16252,12 +16289,12 @@ var Devtools = class {
           ...section === "layout" ? ["visibility"] : []
         ])
       ].filter((name) => name.toLowerCase().includes(this.filter.toLowerCase()));
-      const rule = element("div", "dt-rule"), title = element("div", "dt-rule-title");
+      const rule = element("div", "inspector-rule"), title = element("div", "inspector-rule-title");
       title.append(
         element("span", "", section + " {"),
         element(
           "span",
-          "dt-rule-origin",
+          "inspector-rule-origin",
           this.scope === "feature" ? `feature #${selected?.id}` : layer.id
         )
       );
@@ -16274,9 +16311,9 @@ var Devtools = class {
         const existing = edits.entries.get(edits.key(target));
         const evaluated = evaluatedValue(map, layer.id, section, property, raw);
         let current = existing?.value ?? (Array.isArray(authored[property]) ? evaluated : authored[property]) ?? spec.default;
-        const row = element("div", "dt-property");
+        const row = element("div", "inspector-property");
         row.dataset.modified = String(Boolean(existing));
-        row.append(element("span", "dt-property-name", property + ":"));
+        row.append(element("span", "inspector-property-name", property + ":"));
         const individualAllowed = this.scope !== "feature" || Boolean(spec.expression?.parameters.includes("feature"));
         const apply = (value) => this.guarded(() => {
           edits.set(target, value);
@@ -16356,7 +16393,7 @@ var Devtools = class {
             this.renderDetails();
             this.syncHistoryControls();
           }),
-          "dt-revert"
+          "inspector-revert"
         );
         revert.title = "Restore original property";
         revert.setAttribute("aria-label", `Reset ${property}`);
@@ -16364,7 +16401,7 @@ var Devtools = class {
         row.append(revert);
         rule.append(row);
         if (Array.isArray(authored[property])) {
-          const expression = element("details", "dt-expression");
+          const expression = element("details", "inspector-expression");
           expression.append(
             element("summary", "", "Expression"),
             element("code", "", format(existing ? edits.original(target) : authored[property]))
@@ -16378,13 +16415,13 @@ var Devtools = class {
     this.detail.append(
       element(
         "p",
-        "dt-note",
+        "inspector-note",
         this.scope === "feature" ? "Changes affect this feature ID within the selected layer." : "Changes affect every feature drawn by this layer."
       )
     );
   }
   keyValues(values2, filter = "") {
-    const dl = element("dl", "dt-kv");
+    const dl = element("dl", "inspector-kv");
     for (const [key, value] of Object.entries(values2))
       if (key.toLowerCase().includes(filter.toLowerCase()))
         dl.append(element("dt", "", key), element("dd", "", format(value)));
@@ -16467,11 +16504,11 @@ var Devtools = class {
     this.detail.append(
       element(
         "p",
-        "dt-note",
+        "inspector-note",
         "Tiled geometry may be clipped or simplified. Edit a temporary copy; the original source stays unchanged."
       )
     );
-    const tools = element("div", "dt-tools");
+    const tools = element("div", "inspector-tools");
     const start = button3(
       editor ? "Replace with selected geometry" : "Edit temporary copy",
       () => this.guarded(() => {
@@ -16515,11 +16552,11 @@ var Devtools = class {
     area.append(
       element(
         "p",
-        "dt-note",
+        "inspector-note",
         editor ? `${geometryVertices(editor.geometry).length} vertices \xB7 ${geometryVertices(editor.geometry).length > 256 ? "edit coordinates (handles limited to 256 vertices)" : "drag handles or edit coordinates"}` : `${geometry.type} \xB7 rendered geometry`
       )
     );
-    const text = element("textarea", "dt-geometry-json");
+    const text = element("textarea", "inspector-geometry-json");
     text.setAttribute("aria-label", "GeoJSON geometry");
     text.value = JSON.stringify(geometry, null, 2);
     text.readOnly = !editor;
@@ -16551,7 +16588,7 @@ var Devtools = class {
   }
   buildNetwork() {
     const panel = this.panels.get("network");
-    const tools = element("div", "dt-tools"), search = element("input");
+    const tools = element("div", "inspector-tools"), search = element("input");
     search.type = "search";
     search.placeholder = "Filter by source, tile or state";
     search.setAttribute("aria-label", "Filter tiles");
@@ -16571,9 +16608,9 @@ var Devtools = class {
     bounds.append(toggle, document.createTextNode("Show tile boundaries on map"));
     tools.append(search, bounds);
     this.networkDetail.hidden = true;
-    const list = element("div", "dt-scroll");
+    const list = element("div", "inspector-scroll");
     list.append(this.networkGrid, this.networkLog);
-    this.networkLog.classList.remove("dt-scroll");
+    this.networkLog.classList.remove("inspector-scroll");
     this.networkSidebar.append(tools, list, this.networkSummary);
     this.networkBody.append(this.networkSidebar, this.networkDetail);
     panel.append(this.networkBody);
@@ -16610,13 +16647,13 @@ var Devtools = class {
       this.networkLog.append(
         element(
           "div",
-          "dt-empty",
+          "inspector-empty",
           map ? "Tile inspection is unavailable for this renderer version." : "Connecting to the map\u2026"
         )
       );
       return;
     }
-    const table = element("table", "dt-table");
+    const table = element("table", "inspector-table");
     table.innerHTML = "<thead><tr><th>Tile z/x/y</th><th>Size</th></tr></thead>";
     const body = element("tbody"), filter = this.networkFilter.trim().toLowerCase();
     const filtered = tiles.tiles.filter(
@@ -16634,7 +16671,7 @@ var Devtools = class {
       const minX = Math.min(...group.map((t) => t.x)), minY = Math.min(...group.map((t) => t.y)), width = Math.max(...group.map((t) => t.x)) - minX + 1, height = Math.max(...group.map((t) => t.y)) - minY + 1;
       if (width * height > 256 || width > 16) continue;
       const xs = Array.from({ length: width }, (_, i) => minX + i), ys = Array.from({ length: height }, (_, i) => minY + i);
-      const grid = element("div", "dt-tile-grid");
+      const grid = element("div", "inspector-tile-grid");
       grid.style.gridTemplateColumns = `repeat(${xs.length},minmax(0,1fr))`;
       const max = Math.max(1, ...group.map((t) => t.bytes ?? 0));
       for (const y of ys)
@@ -16650,7 +16687,7 @@ var Devtools = class {
               this.showTile(side, tile);
               this.renderNetwork();
             },
-            "dt-tile-cell"
+            "inspector-tile-cell"
           );
           cell.style.setProperty(
             "--weight",
@@ -16661,11 +16698,14 @@ var Devtools = class {
           cell.setAttribute("aria-pressed", String(tile.key === this.networkSelection));
           grid.append(cell);
         }
-      this.networkGrid.append(element("div", "dt-tile-grid-title", `${name} \xB7 raw kB`), grid);
+      this.networkGrid.append(
+        element("div", "inspector-tile-grid-title", `${name} \xB7 raw kB`),
+        grid
+      );
     }
     for (const tile of filtered) {
       const row = element("tr");
-      row.className = "dt-tile-row";
+      row.className = "inspector-tile-row";
       row.setAttribute("aria-selected", String(this.networkSelection === tile.key));
       row.title = `${tile.source} \xB7 ${tile.state} \xB7 display z${tile.overscaledZ}`;
       const select = () => {
@@ -16676,10 +16716,10 @@ var Devtools = class {
         if (!event.target.closest("button")) select();
       });
       const cell = element("td");
-      cell.append(button3(`${tile.z}/${tile.x}/${tile.y}`, select, "dt-cell-button"));
+      cell.append(button3(`${tile.z}/${tile.x}/${tile.y}`, select, "inspector-cell-button"));
       row.append(
         cell,
-        element("td", "dt-number", bytes(tile.bytes))
+        element("td", "inspector-number", bytes(tile.bytes))
       );
       body.append(row);
     }
@@ -16689,7 +16729,7 @@ var Devtools = class {
       this.networkLog.append(
         element(
           "div",
-          "dt-empty",
+          "inspector-empty",
           tiles.tiles.length ? "No tiles match this filter." : "No tiles in view. Pan or zoom the map to load tiles."
         )
       );
@@ -16699,7 +16739,7 @@ var Devtools = class {
   showTile(side, tile) {
     this.guarded(() => {
       this.clearTileHighlight();
-      const map = side.map, id = "__tileflow-devtools-tile";
+      const map = side.map, id = "__tileflow-inspector-tile";
       map.addSource(
         id,
         mapValue(map, {
@@ -16752,12 +16792,12 @@ var Devtools = class {
       });
     };
     for (const key of ["zoom", "pitch", "bearing"]) {
-      const field = element("div", "dt-camera-field"), input = element("input");
+      const field = element("div", "inspector-camera-field"), input = element("input");
       const label = key[0].toUpperCase() + key.slice(1);
       field.title = label;
       field.setAttribute("role", "group");
       field.setAttribute("aria-label", label);
-      input.id = `dt-camera-${key}`;
+      input.id = `inspector-camera-${key}`;
       input.type = "number";
       input.step = key === "zoom" ? "0.1" : "1";
       input.setAttribute("aria-label", label);
@@ -16782,7 +16822,7 @@ var Devtools = class {
           const map = this.host.active().map;
           if (map) apply(key, key === "pitch" ? Math.max(0, map.getMinPitch()) : 0);
         });
-        reset.classList.add("dt-camera-reset");
+        reset.classList.add("inspector-camera-reset");
         reset.title = `Reset ${key} to 0\xB0`;
         field.append(reset);
       }
@@ -16814,7 +16854,7 @@ var Devtools = class {
           () => this.report("Clipboard unavailable")
         );
       },
-      "dt-copy-agent"
+      "inspector-copy-agent"
     );
     copy.title = "Copy map context for an AI agent";
     this.cameraControls.append(copy);
@@ -16841,7 +16881,7 @@ var Devtools = class {
   }
   buildScene() {
     const panel = this.panels.get("scene");
-    const content = element("div", "dt-scene-content");
+    const content = element("div", "inspector-scene-content");
     content.append(document.getElementById("map-controls"));
     panel.append(content);
   }
@@ -16908,7 +16948,8 @@ var Devtools = class {
       } catch {
       }
     this.clearTileHighlight();
-    delete window.__tileflowDevtoolsUI;
+    delete window.__tileflowInspectorUI;
   }
 };
-if (window.__tileflowDevtoolsHost?.schemaVersion === 1) new Devtools(window.__tileflowDevtoolsHost);
+if (window.__tileflowInspectorHost?.schemaVersion === 1)
+  new Inspector(window.__tileflowInspectorHost);