@phila/layerboard 3.0.0-beta.1 → 3.0.0-beta.10

package/dist/index.mjs

@@ -1,115 +1,115 @@
-import { defineComponent as we, ref as $, watch as xe, computed as R, onMounted as Ze, onUnmounted as Lt, createElementBlock as L, openBlock as f, createVNode as ee, unref as _, withCtx as Ne, createBlock as X, createCommentVNode as I, Fragment as ie, renderList as re, useAttrs as Ft, toRef as Mt, normalizeClass as ne, createElementVNode as F, toDisplayString as j, withDirectives as St, mergeProps as ot, vModelDynamic as Et, createTextVNode as he, normalizeProps as dt, guardReactiveProps as ft, renderSlot as se, withModifiers as zt, normalizeStyle as Y, readonly as V, provide as U, resolveComponent as _t, vShow as It } from "vue";
-import { Map as Ot, DrawTool as Rt, RasterLayer as pt, CircleLayer as yt, FillLayer as Dt, LineLayer as et, MapMarker as At, MapPopup as Nt } from "@phila/phila-ui-map-core";
-import { cn as nt, Icon as me, BaseLink as Zt, ActionContent as gt } from "@phila/phila-ui-core";
-function Ue(e, n, o = {}) {
-  const t = { type: "Feature" };
-  return (o.id === 0 || o.id) && (t.id = o.id), o.bbox && (t.bbox = o.bbox), t.properties = n || {}, t.geometry = e, t;
+import { defineComponent as Se, ref as C, watch as Me, computed as I, onMounted as He, onUnmounted as Pt, createElementBlock as m, openBlock as d, createVNode as K, unref as O, withCtx as Be, createBlock as X, createCommentVNode as z, Fragment as ee, renderList as le, useAttrs as Tt, toRef as zt, normalizeClass as te, createElementVNode as x, toDisplayString as W, renderSlot as ce, withDirectives as _t, mergeProps as ut, vModelDynamic as Ft, createTextVNode as me, normalizeProps as ht, guardReactiveProps as mt, withModifiers as Ot, normalizeStyle as H, readonly as j, provide as U, onBeforeUnmount as It, nextTick as Ze, useId as vt, resolveComponent as Rt, vShow as Dt } from "vue";
+import { Map as Zt, DrawTool as Bt, RasterLayer as bt, CircleLayer as wt, FillLayer as Nt, LineLayer as st, MapMarker as At, MapPopup as Vt } from "@phila/phila-ui-map-core";
+import { cn as dt, Icon as ge, BaseLink as Ut, ActionContent as Lt } from "@phila/phila-ui-core";
+function Ke(e, n, t = {}) {
+  const o = { type: "Feature" };
+  return (t.id === 0 || t.id) && (o.id = t.id), t.bbox && (o.bbox = t.bbox), o.properties = n || {}, o.geometry = e, o;
 }
-function Bt(e, n, o = {}) {
-  for (const l of e) {
-    if (l.length < 4)
+function Wt(e, n, t = {}) {
+  for (const a of e) {
+    if (a.length < 4)
       throw new Error(
         "Each LinearRing of a Polygon must have 4 or more Positions."
       );
-    if (l[l.length - 1].length !== l[0].length)
+    if (a[a.length - 1].length !== a[0].length)
       throw new Error("First and last Position are not equivalent.");
-    for (let a = 0; a < l[l.length - 1].length; a++)
-      if (l[l.length - 1][a] !== l[0][a])
+    for (let l = 0; l < a[a.length - 1].length; l++)
+      if (a[a.length - 1][l] !== a[0][l])
         throw new Error("First and last Position are not equivalent.");
   }
-  return Ue({
+  return Ke({
     type: "Polygon",
     coordinates: e
-  }, n, o);
+  }, n, t);
 }
-function Wt(e, n, o = {}) {
+function jt(e, n, t = {}) {
   if (e.length < 2)
     throw new Error("coordinates must be an array of two or more positions");
-  return Ue({
+  return Ke({
     type: "LineString",
     coordinates: e
-  }, n, o);
+  }, n, t);
 }
-function Ut(e, n, o = {}) {
-  return Ue({
+function qt(e, n, t = {}) {
+  return Ke({
     type: "MultiLineString",
     coordinates: e
-  }, n, o);
+  }, n, t);
 }
-function Vt(e, n, o = {}) {
-  return Ue({
+function Gt(e, n, t = {}) {
+  return Ke({
     type: "MultiPolygon",
     coordinates: e
-  }, n, o);
+  }, n, t);
 }
-function jt(e) {
+function Ht(e) {
   return e.type === "Feature" ? e.geometry : e;
 }
-function qt(e, n, o) {
-  var t = e.length, l = Te(e[0], n), a = [], c, p, d;
-  let S, y;
-  for (o || (o = []), c = 1; c < t; c++) {
-    for (S = e[c - 1], y = e[c], p = d = Te(y, n); ; )
-      if (l | p) {
-        if (l & p)
+function Jt(e, n, t) {
+  var o = e.length, a = Te(e[0], n), l = [], u, b, y;
+  let P, v;
+  for (t || (t = []), u = 1; u < o; u++) {
+    for (P = e[u - 1], v = e[u], b = y = Te(v, n); ; )
+      if (a | b) {
+        if (a & b)
           break;
-        l ? (S = it(S, y, l, n), l = Te(S, n)) : (y = it(S, y, p, n), p = Te(y, n));
+        a ? (P = ft(P, v, a, n), a = Te(P, n)) : (v = ft(P, v, b, n), b = Te(v, n));
       } else {
-        a.push(S), p !== d ? (a.push(y), c < t - 1 && (o.push(a), a = [])) : c === t - 1 && a.push(y);
+        l.push(P), b !== y ? (l.push(v), u < o - 1 && (t.push(l), l = [])) : u === o - 1 && l.push(v);
         break;
       }
-    l = d;
+    a = y;
   }
-  return a.length && o.push(a), o;
+  return l.length && t.push(l), t;
 }
-function Gt(e, n) {
-  var o, t, l, a, c, p, d;
-  for (t = 1; t <= 8; t *= 2) {
-    for (o = [], l = e[e.length - 1], a = !(Te(l, n) & t), c = 0; c < e.length; c++)
-      p = e[c], d = !(Te(p, n) & t), d !== a && o.push(it(l, p, t, n)), d && o.push(p), l = p, a = d;
-    if (e = o, !e.length) break;
+function Kt(e, n) {
+  var t, o, a, l, u, b, y;
+  for (o = 1; o <= 8; o *= 2) {
+    for (t = [], a = e[e.length - 1], l = !(Te(a, n) & o), u = 0; u < e.length; u++)
+      b = e[u], y = !(Te(b, n) & o), y !== l && t.push(ft(a, b, o, n)), y && t.push(b), a = b, l = y;
+    if (e = t, !e.length) break;
   }
-  return o;
+  return t;
 }
-function it(e, n, o, t) {
-  return o & 8 ? [e[0] + (n[0] - e[0]) * (t[3] - e[1]) / (n[1] - e[1]), t[3]] : o & 4 ? [e[0] + (n[0] - e[0]) * (t[1] - e[1]) / (n[1] - e[1]), t[1]] : o & 2 ? [t[2], e[1] + (n[1] - e[1]) * (t[2] - e[0]) / (n[0] - e[0])] : o & 1 ? [t[0], e[1] + (n[1] - e[1]) * (t[0] - e[0]) / (n[0] - e[0])] : null;
+function ft(e, n, t, o) {
+  return t & 8 ? [e[0] + (n[0] - e[0]) * (o[3] - e[1]) / (n[1] - e[1]), o[3]] : t & 4 ? [e[0] + (n[0] - e[0]) * (o[1] - e[1]) / (n[1] - e[1]), o[1]] : t & 2 ? [o[2], e[1] + (n[1] - e[1]) * (o[2] - e[0]) / (n[0] - e[0])] : t & 1 ? [o[0], e[1] + (n[1] - e[1]) * (o[0] - e[0]) / (n[0] - e[0])] : null;
 }
 function Te(e, n) {
-  var o = 0;
-  return e[0] < n[0] ? o |= 1 : e[0] > n[2] && (o |= 2), e[1] < n[1] ? o |= 4 : e[1] > n[3] && (o |= 8), o;
+  var t = 0;
+  return e[0] < n[0] ? t |= 1 : e[0] > n[2] && (t |= 2), e[1] < n[1] ? t |= 4 : e[1] > n[3] && (t |= 8), t;
 }
-function Ht(e, n) {
-  const o = jt(e), t = o.type, l = e.type === "Feature" ? e.properties : {};
-  let a = o.coordinates;
-  switch (t) {
+function Qt(e, n) {
+  const t = Ht(e), o = t.type, a = e.type === "Feature" ? e.properties : {};
+  let l = t.coordinates;
+  switch (o) {
     case "LineString":
     case "MultiLineString": {
-      const c = [];
-      return t === "LineString" && (a = [a]), a.forEach((p) => {
-        qt(p, n, c);
-      }), c.length === 1 ? Wt(c[0], l) : Ut(c, l);
+      const u = [];
+      return o === "LineString" && (l = [l]), l.forEach((b) => {
+        Jt(b, n, u);
+      }), u.length === 1 ? jt(u[0], a) : qt(u, a);
     }
     case "Polygon":
-      return Bt(mt(a, n), l);
+      return Wt(St(l, n), a);
     case "MultiPolygon":
-      return Vt(
-        a.map((c) => mt(c, n)),
-        l
+      return Gt(
+        l.map((u) => St(u, n)),
+        a
       );
     default:
-      throw new Error("geometry " + t + " not supported");
+      throw new Error("geometry " + o + " not supported");
   }
 }
-function mt(e, n) {
-  const o = [];
-  for (const t of e) {
-    const l = Gt(t, n);
-    l.length > 0 && ((l[0][0] !== l[l.length - 1][0] || l[0][1] !== l[l.length - 1][1]) && l.push(l[0]), l.length >= 4 && o.push(l));
+function St(e, n) {
+  const t = [];
+  for (const o of e) {
+    const a = Kt(o, n);
+    a.length > 0 && ((a[0][0] !== a[a.length - 1][0] || a[0][1] !== a[a.length - 1][1]) && a.push(a[0]), a.length >= 4 && t.push(a));
   }
-  return o;
+  return t;
 }
-var Jt = Ht;
-const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
+var Xt = Qt;
+const Yt = { class: "map-panel" }, eo = /* @__PURE__ */ Se({
   __name: "MapPanel",
   props: {
     visibleLayers: {},
@@ -132,168 +132,165 @@ const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
   },
   emits: ["zoom", "layerLoading", "layerError"],
   setup(e, { emit: n }) {
-    const o = e, t = n, l = $(null), a = $(null), c = $(0);
-    function p(i) {
-      t("zoom", i), a.value && (c.value = d(a.value));
-    }
-    function d(i) {
-      const u = i.getZoom(), x = i.getCenter().lat, k = 559082264028e-3, T = x * Math.PI / 180;
-      return k * Math.cos(T) / Math.pow(2, u);
-    }
-    const S = $({}), y = $(null), h = $(/* @__PURE__ */ new Set()), s = ["fema-100-year-floodplain", "fema-500-year-floodplain"];
-    async function v(i, u, r, x) {
-      const k = encodeURIComponent(x || "1=1"), T = JSON.stringify({
-        xmin: u.west,
-        ymin: u.south,
-        xmax: u.east,
-        ymax: u.north,
+    const t = e, o = n, a = C(null), l = C(null), u = C(0);
+    function b(i) {
+      o("zoom", i), l.value && (u.value = y(l.value));
+    }
+    function y(i) {
+      const p = i.getZoom(), E = i.getCenter().lat, _ = 559082264028e-3, M = E * Math.PI / 180;
+      return _ * Math.cos(M) / Math.pow(2, p);
+    }
+    const P = C({}), v = C(null), S = C(/* @__PURE__ */ new Set()), r = ["fema-100-year-floodplain", "fema-500-year-floodplain"];
+    async function h(i, p, s, E) {
+      const _ = encodeURIComponent(E || "1=1"), M = JSON.stringify({
+        xmin: p.west,
+        ymin: p.south,
+        xmax: p.east,
+        ymax: p.north,
         spatialReference: { wkid: 4326 }
-      }), O = 2e3;
-      let B = 0, W = [], K = !0;
-      for (; K; ) {
-        const G = `${i}/query?where=${k}&geometry=${encodeURIComponent(T)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&resultRecordCount=${O}&resultOffset=${B}&f=geojson`, A = await fetch(G);
-        if (!A.ok)
-          throw new Error(`HTTP ${A.status}: ${A.statusText}`);
-        const H = await A.json();
-        H.features && H.features.length > 0 ? (W = W.concat(H.features), B += H.features.length, K = H.features.length === O) : K = !1;
+      }), R = 2e3;
+      let N = 0, V = [], Q = !0;
+      for (; Q; ) {
+        const G = `${i}/query?where=${_}&geometry=${encodeURIComponent(M)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&resultRecordCount=${R}&resultOffset=${N}&f=geojson`, Z = await fetch(G);
+        if (!Z.ok)
+          throw new Error(`HTTP ${Z.status}: ${Z.statusText}`);
+        const J = await Z.json();
+        J.features && J.features.length > 0 ? (V = V.concat(J.features), N += J.features.length, Q = J.features.length === R) : Q = !1;
       }
-      if (s.includes(r)) {
-        const G = [u.west, u.south, u.east, u.north];
-        W = W.map((A) => {
-          if (A.geometry && (A.geometry.type === "Polygon" || A.geometry.type === "MultiPolygon"))
+      if (r.includes(s)) {
+        const G = [p.west, p.south, p.east, p.north];
+        V = V.map((Z) => {
+          if (Z.geometry && (Z.geometry.type === "Polygon" || Z.geometry.type === "MultiPolygon"))
             try {
-              return Jt(A, G);
-            } catch (H) {
-              return console.warn(`Failed to clip feature in ${r}:`, H), A;
+              return Xt(Z, G);
+            } catch {
+              return Z;
             }
-          return A;
+          return Z;
         });
       }
       return {
         type: "FeatureCollection",
-        features: W
+        features: V
       };
     }
-    async function E(i, u) {
-      const r = u.map(async (x) => {
-        const k = o.layerList.find((T) => T.config.id === x)?.config;
-        if (k) {
-          t("layerLoading", x, !0);
+    async function w(i, p) {
+      const s = p.map(async (E) => {
+        const _ = t.layerList.find((M) => M.config.id === E)?.config;
+        if (_) {
+          o("layerLoading", E, !0);
           try {
-            const T = await v(k.url, i, x, k.where);
-            S.value = { ...S.value, [x]: T }, t("layerError", x, null);
-          } catch (T) {
-            const O = T instanceof Error ? T.message : "Failed to load";
-            t("layerError", x, O), console.error(`Error loading ${x}:`, T);
+            const M = await h(_.url, i, E, _.where);
+            P.value = { ...P.value, [E]: M }, o("layerError", E, null);
+          } catch (M) {
+            const R = M instanceof Error ? M.message : "Failed to load";
+            o("layerError", E, R);
           } finally {
-            t("layerLoading", x, !1);
+            o("layerLoading", E, !1);
           }
         }
       });
-      await Promise.all(r);
-    }
-    async function m(i) {
-      const u = [...o.visibleLayers];
-      await E(i, u);
-    }
-    function C(i) {
-      y.value = i.bounds, m(i.bounds);
-    }
-    function g(i) {
-      a.value = i;
-      const u = i.getBounds();
-      y.value = {
-        west: u.getWest(),
-        south: u.getSouth(),
-        east: u.getEast(),
-        north: u.getNorth()
+      await Promise.all(s);
+    }
+    async function g(i) {
+      const p = [...t.visibleLayers];
+      await w(i, p);
+    }
+    function f(i) {
+      v.value = i.bounds, g(i.bounds);
+    }
+    function c(i) {
+      l.value = i;
+      const p = i.getBounds();
+      v.value = {
+        west: p.getWest(),
+        south: p.getSouth(),
+        east: p.getEast(),
+        north: p.getNorth()
       };
-      const r = i.getZoom();
-      t("zoom", r), c.value = d(i), m(y.value);
+      const s = i.getZoom();
+      o("zoom", s), u.value = y(i), g(v.value);
     }
-    xe(
-      () => o.visibleLayers.size,
+    Me(
+      () => t.visibleLayers.size,
       async () => {
-        if (oe.value.length > 0 && te(), y.value) {
-          const i = new Set(o.visibleLayers), u = [...i].filter(
-            (r) => !h.value.has(r)
+        if (oe.value.length > 0 && Ce(), v.value) {
+          const i = new Set(t.visibleLayers), p = [...i].filter(
+            (s) => !S.value.has(s)
           );
-          h.value = new Set(i), u.length > 0 && await E(y.value, u);
+          S.value = new Set(i), p.length > 0 && await w(v.value, p);
         }
       }
     );
-    function w(i) {
-      return o.visibleLayers.has(i);
-    }
-    function z(i) {
-      return !!S.value[i.id];
-    }
-    const M = R(
-      () => o.layerList.filter((i) => i.config.type === "circle" && w(i.config.id) && z(i.config)).map((i) => i.config)
-    ), N = R(
-      () => o.layerList.filter((i) => i.config.type === "fill" && w(i.config.id) && z(i.config)).map((i) => i.config)
-    ), q = R(
-      () => o.layerList.filter((i) => i.config.type === "fill" && i.config.outlinePaint && w(i.config.id) && z(i.config)).map((i) => i.config)
-    ), ce = R(
-      () => o.layerList.filter((i) => i.config.type === "line" && w(i.config.id) && z(i.config)).map((i) => i.config)
+    function L(i) {
+      return t.visibleLayers.has(i);
+    }
+    function F(i) {
+      return !!P.value[i.id];
+    }
+    const T = I(
+      () => t.layerList.filter((i) => i.config.type === "circle" && L(i.config.id) && F(i.config)).map((i) => i.config)
+    ), B = I(
+      () => t.layerList.filter((i) => i.config.type === "fill" && L(i.config.id) && F(i.config)).map((i) => i.config)
+    ), q = I(
+      () => t.layerList.filter((i) => i.config.type === "fill" && i.config.outlinePaint && L(i.config.id) && F(i.config)).map((i) => i.config)
+    ), fe = I(
+      () => t.layerList.filter((i) => i.config.type === "line" && L(i.config.id) && F(i.config)).map((i) => i.config)
     );
-    function Le(i) {
-      return o.visibleTiledLayers?.has(i) ?? !1;
+    function $e(i) {
+      return t.visibleTiledLayers?.has(i) ?? !1;
     }
-    function Se(i) {
-      return o.tiledLayerOpacities?.[i] ?? 1;
+    function xe(i) {
+      return t.tiledLayerOpacities?.[i] ?? 1;
     }
-    function je(i) {
+    function Xe(i) {
       return `${i.replace(/\/$/, "")}/tile/{z}/{y}/{x}`;
     }
-    function qe(i) {
+    function Ye(i) {
       return {
         type: "raster",
-        tiles: [je(i.url)],
+        tiles: [Xe(i.url)],
         tileSize: 256,
         attribution: i.attribution || ""
       };
     }
-    const Me = $({}), Ie = $(/* @__PURE__ */ new Set());
-    async function Ee(i) {
-      if (!Ie.value.has(i.id)) {
-        Ie.value.add(i.id);
+    const Oe = C({}), Ae = C(/* @__PURE__ */ new Set());
+    async function Ie(i) {
+      if (!Ae.value.has(i.id)) {
+        Ae.value.add(i.id);
         try {
-          const u = i.url.replace(/\/$/, ""), r = await fetch(`${u}?f=json`);
-          if (!r.ok) {
-            console.warn(`[MapPanel] Failed to fetch metadata for ${i.id}: ${r.status}`);
+          const p = i.url.replace(/\/$/, ""), s = await fetch(`${p}?f=json`);
+          if (!s.ok)
             return;
-          }
-          const x = await r.json();
-          let k = x.minScale || 0, T = x.maxScale || 0;
-          if (x.layers && x.layers.length > 0)
-            for (const O of x.layers)
-              O.maxScale && O.maxScale > 0 && (T === 0 || O.maxScale < T) && (T = O.maxScale);
-          T === 0 && (T = 72e3), Me.value = {
-            ...Me.value,
-            [i.id]: { minScale: k, maxScale: T }
-          }, console.log(`[MapPanel] Fetched scale metadata for ${i.id}: minScale=${k}, maxScale=${T}`);
-        } catch (u) {
-          console.warn(`[MapPanel] Error fetching metadata for ${i.id}:`, u);
+          const E = await s.json();
+          let _ = E.minScale || 0, M = E.maxScale || 0;
+          if (E.layers && E.layers.length > 0)
+            for (const R of E.layers)
+              R.maxScale && R.maxScale > 0 && (M === 0 || R.maxScale < M) && (M = R.maxScale);
+          M === 0 && (M = 72e3), Oe.value = {
+            ...Oe.value,
+            [i.id]: { minScale: _, maxScale: M }
+          };
+        } catch {
         }
       }
     }
-    Ze(() => {
-      if (o.tiledLayers)
-        for (const i of o.tiledLayers)
-          i.scaleBasedRendering && Ee(i);
+    He(() => {
+      if (t.tiledLayers)
+        for (const i of t.tiledLayers)
+          i.scaleBasedRendering && Ie(i);
     });
-    function Oe(i) {
+    function Ve(i) {
       if (!i.scaleBasedRendering)
         return "tiled";
-      const u = Me.value[i.id];
-      if (!u)
+      const p = Oe.value[i.id];
+      if (!p)
         return "tiled";
-      const r = c.value;
-      return r === 0 || r > u.maxScale ? "tiled" : "dynamic";
+      const s = u.value;
+      return s === 0 || s > p.maxScale ? "tiled" : "dynamic";
     }
-    const Ge = R(() => o.tiledLayers ? o.tiledLayers.filter((i) => Le(i.id) ? i.scaleBasedRendering ? Oe(i) === "tiled" : !0 : !1) : []), He = R(() => o.tiledLayers ? o.tiledLayers.filter((i) => Le(i.id) && i.scaleBasedRendering ? Oe(i) === "dynamic" : !1) : []);
-    function Ce(i) {
+    const et = I(() => t.tiledLayers ? t.tiledLayers.filter((i) => $e(i.id) ? i.scaleBasedRendering ? Ve(i) === "tiled" : !0 : !1) : []), tt = I(() => t.tiledLayers ? t.tiledLayers.filter((i) => $e(i.id) && i.scaleBasedRendering ? Ve(i) === "dynamic" : !1) : []);
+    function Pe(i) {
       return {
         type: "raster",
         tiles: [`${i.url.replace(/\/$/, "")}/export?bbox={bbox-epsg-3857}&bboxSR=3857&imageSR=3857&size=256,256&format=png32&transparent=true&f=image`],
@@ -301,291 +298,291 @@ const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
         attribution: i.attribution || ""
       };
     }
-    function de(i) {
-      return { type: "geojson", data: S.value[i.id] };
+    function ve(i) {
+      return { type: "geojson", data: P.value[i.id] };
     }
-    function ke(i) {
-      return o.layerOpacities[i] ?? 1;
+    function _e(i) {
+      return t.layerOpacities[i] ?? 1;
     }
-    function fe(i) {
-      const u = ke(i.id), r = i.type === "circle" ? "circle-opacity" : i.type === "fill" ? "fill-opacity" : "line-opacity";
+    function be(i) {
+      const p = _e(i.id), s = i.type === "circle" ? "circle-opacity" : i.type === "fill" ? "fill-opacity" : "line-opacity";
       if (i.type === "fill" && i.paint["fill-opacity"] === 0)
         return { ...i.paint, "fill-opacity": 0 };
-      const x = i.type === "circle" ? "circle-color" : i.type === "fill" ? "fill-color" : "line-color", k = { ...i.paint }, T = k[x], O = k[r] === 1, B = typeof T == "string" && T.startsWith("rgba(");
-      if (O && B) {
-        if (u === 1)
-          return k;
+      const E = i.type === "circle" ? "circle-color" : i.type === "fill" ? "fill-color" : "line-color", _ = { ...i.paint }, M = _[E], R = _[s] === 1, N = typeof M == "string" && M.startsWith("rgba(");
+      if (R && N) {
+        if (p === 1)
+          return _;
         {
-          const W = T.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-          if (W && W[4]) {
-            const [, K, G, A, H] = W, Ye = parseFloat(H) * u;
-            k[x] = `rgba(${K}, ${G}, ${A}, ${Ye})`, k[r] = 1;
+          const V = M.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+          if (V && V[4]) {
+            const [, Q, G, Z, J] = V, rt = parseFloat(J) * p;
+            _[E] = `rgba(${Q}, ${G}, ${Z}, ${rt})`, _[s] = 1;
           }
-          return k;
+          return _;
         }
       }
-      if (B) {
-        const W = T.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-        if (W) {
-          const [, K, G, A] = W;
-          k[x] = `rgb(${K}, ${G}, ${A})`;
+      if (N) {
+        const V = M.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+        if (V) {
+          const [, Q, G, Z] = V;
+          _[E] = `rgb(${Q}, ${G}, ${Z})`;
         }
       }
-      return k[r] = u, k;
+      return _[s] = p, _;
     }
-    function Je(i) {
-      const u = ke(i.id);
-      return { ...i.outlinePaint, "line-opacity": u };
+    function ot(i) {
+      const p = _e(i.id);
+      return { ...i.outlinePaint, "line-opacity": p };
     }
-    const oe = $([]), pe = $(null), J = $(0);
-    function $e(i) {
-      const u = i.replace(/-outline$/, "");
-      return o.layerList.find((x) => x.config.id === u)?.config;
+    const oe = C([]), we = C(null), ne = C(0);
+    function ke(i) {
+      const p = i.replace(/-outline$/, "");
+      return t.layerList.find((E) => E.config.id === p)?.config;
     }
-    function ve(i, u) {
-      return i.replace(/\{([^}]+)\}/g, (r, x) => {
-        const k = u[x];
-        return k == null ? "" : String(k);
+    function nt(i, p) {
+      return i.replace(/\{([^}]+)\}/g, (s, E) => {
+        const _ = p[E];
+        return _ == null ? "" : String(_);
       });
     }
-    function Qe(i, u) {
+    function Ue(i, p) {
       if (i == null) return "-";
-      if (u?.dateFormat && typeof i == "number") {
-        const r = new Date(i);
-        switch (u.dateFormat) {
+      if (p?.dateFormat && typeof i == "number") {
+        const s = new Date(i);
+        switch (p.dateFormat) {
           case "shortDateShortTime":
-            return r.toLocaleString();
+            return s.toLocaleString();
           case "longMonthDayYear":
-            return r.toLocaleDateString(void 0, { month: "long", day: "numeric", year: "numeric" });
+            return s.toLocaleDateString(void 0, { month: "long", day: "numeric", year: "numeric" });
           case "shortDate":
-            return r.toLocaleDateString();
+            return s.toLocaleDateString();
           case "longDate":
-            return r.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
+            return s.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
           default:
-            return r.toLocaleDateString();
+            return s.toLocaleDateString();
         }
       }
       if (typeof i == "number") {
-        if (i > 1e12 && !u)
+        if (i > 1e12 && !p)
           return new Date(i).toLocaleDateString();
-        const r = u?.places, x = u?.digitSeparator ?? !0;
-        if (r !== void 0) {
-          const k = i.toFixed(r);
-          if (x) {
-            const T = k.split("."), O = T[0] || "0", B = T[1], W = O.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            return B ? `${W}.${B}` : W;
+        const s = p?.places, E = p?.digitSeparator ?? !0;
+        if (s !== void 0) {
+          const _ = i.toFixed(s);
+          if (E) {
+            const M = _.split("."), R = M[0] || "0", N = M[1], V = R.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            return N ? `${V}.${N}` : V;
           }
-          return k;
+          return _;
         }
-        return x ? i.toLocaleString() : String(i);
+        return E ? i.toLocaleString() : String(i);
       }
       return String(i);
     }
     function Re(i) {
-      const u = /* @__PURE__ */ new Set();
-      return i.filter((r) => {
-        const k = `${r.layer.id.replace(/-outline$/, "")}:${JSON.stringify(r.properties)}`;
-        return u.has(k) ? !1 : (u.add(k), !0);
+      const p = /* @__PURE__ */ new Set();
+      return i.filter((s) => {
+        const _ = `${s.layer.id.replace(/-outline$/, "")}:${JSON.stringify(s.properties)}`;
+        return p.has(_) ? !1 : (p.add(_), !0);
       });
     }
-    function ye(i, u) {
-      const r = /* @__PURE__ */ new Map();
-      return u.forEach((x, k) => {
-        r.set(x.id, k);
-      }), i.sort((x, k) => {
-        const T = x.layer.id.replace(/-outline$/, ""), O = k.layer.id.replace(/-outline$/, ""), B = r.get(T) ?? -1;
-        return (r.get(O) ?? -1) - B;
+    function We(i, p) {
+      const s = /* @__PURE__ */ new Map();
+      return p.forEach((E, _) => {
+        s.set(E.id, _);
+      }), i.sort((E, _) => {
+        const M = E.layer.id.replace(/-outline$/, ""), R = _.layer.id.replace(/-outline$/, ""), N = s.get(M) ?? -1;
+        return (s.get(R) ?? -1) - N;
       });
     }
-    function Pe(i) {
-      const u = a.value;
-      if (!u) return;
-      const r = [];
-      o.layerList.forEach((G) => {
-        const A = G.config;
-        o.visibleLayers.has(A.id) && (r.push(A.id), A.outlinePaint && r.push(`${A.id}-outline`));
+    function re(i) {
+      const p = l.value;
+      if (!p) return;
+      const s = [];
+      t.layerList.forEach((G) => {
+        const Z = G.config;
+        t.visibleLayers.has(Z.id) && (s.push(Z.id), Z.outlinePaint && s.push(`${Z.id}-outline`));
       });
-      const x = u.project([i.lngLat.lng, i.lngLat.lat]), k = u.queryRenderedFeatures(x, {
-        layers: r
+      const E = p.project([i.lngLat.lng, i.lngLat.lat]), _ = p.queryRenderedFeatures(E, {
+        layers: s
       });
-      if (k.length === 0) return;
-      const T = Re(k), O = o.layerList.map((G) => G.config), B = ye(T, O), W = B.map((G) => {
-        const A = G.layer.id.replace(/-outline$/, ""), H = $e(A);
-        return H ? {
-          layerId: H.id,
-          layerTitle: H.title,
+      if (_.length === 0) return;
+      const M = Re(_), R = t.layerList.map((G) => G.config), N = We(M, R), V = N.map((G) => {
+        const Z = G.layer.id.replace(/-outline$/, ""), J = ke(Z);
+        return J ? {
+          layerId: J.id,
+          layerTitle: J.title,
           properties: G.properties || {},
-          popupConfig: H.popup
+          popupConfig: J.popup
         } : null;
       }).filter((G) => G !== null);
-      if (W.length === 0) return;
-      oe.value = W, J.value = 0, pe.value = [i.lngLat.lng, i.lngLat.lat];
-      const K = B[0];
-      if (K && K.geometry) {
-        const G = K.layer.id.replace(/-outline$/, ""), A = $e(G);
-        if (A) {
-          const H = rt(K.geometry), Ye = st(A.id, A.type);
-          ge.value = {
-            geometry: K.geometry,
-            geometryType: H,
-            layerId: A.id,
-            properties: K.properties || {},
-            originalStyle: Ye
+      if (V.length === 0) return;
+      oe.value = V, ne.value = 0, we.value = [i.lngLat.lng, i.lngLat.lat];
+      const Q = N[0];
+      if (Q && Q.geometry) {
+        const G = Q.layer.id.replace(/-outline$/, ""), Z = ke(G);
+        if (Z) {
+          const J = De(Q.geometry), rt = k(Z.id, Z.type);
+          de.value = {
+            geometry: Q.geometry,
+            geometryType: J,
+            layerId: Z.id,
+            properties: Q.properties || {},
+            originalStyle: rt
           };
         }
       }
     }
-    function te() {
-      oe.value = [], pe.value = null, J.value = 0, ge.value = null;
+    function Ce() {
+      oe.value = [], we.value = null, ne.value = 0, de.value = null;
     }
-    function be(i) {
+    function se(i) {
       if (oe.value.length === 0) return;
-      const u = i.target;
-      if (!(u.tagName === "INPUT" || u.tagName === "TEXTAREA" || u.isContentEditable))
+      const p = i.target;
+      if (!(p.tagName === "INPUT" || p.tagName === "TEXTAREA" || p.isContentEditable))
         switch (i.key) {
           case "ArrowLeft":
           case "ArrowUp":
-            i.preventDefault(), De();
+            i.preventDefault(), Ee();
             break;
           case "ArrowRight":
           case "ArrowDown":
-            i.preventDefault(), le();
+            i.preventDefault(), je();
             break;
           case "Escape":
-            i.preventDefault(), te();
+            i.preventDefault(), Ce();
             break;
         }
     }
-    Ze(() => {
-      window.addEventListener("keydown", be);
-    }), Lt(() => {
-      window.removeEventListener("keydown", be);
+    He(() => {
+      window.addEventListener("keydown", se);
+    }), Pt(() => {
+      window.removeEventListener("keydown", se);
     });
-    function le() {
+    function je() {
       const i = oe.value.length;
-      i <= 1 || (J.value = (J.value + 1) % i);
+      i <= 1 || (ne.value = (ne.value + 1) % i);
     }
-    function De() {
+    function Ee() {
       const i = oe.value.length;
-      i <= 1 || (J.value = (J.value - 1 + i) % i);
+      i <= 1 || (ne.value = (ne.value - 1 + i) % i);
     }
-    const b = R(() => oe.value.length === 0 ? null : oe.value[J.value]), P = R(() => {
-      const i = b.value;
-      return !i || !i.popupConfig ? i?.layerTitle || "" : ve(i.popupConfig.title, i.properties);
-    }), ae = R(() => {
-      const i = b.value;
+    const ie = I(() => oe.value.length === 0 ? null : oe.value[ne.value]), it = I(() => {
+      const i = ie.value;
+      return !i || !i.popupConfig ? i?.layerTitle || "" : nt(i.popupConfig.title, i.properties);
+    }), pe = I(() => {
+      const i = ie.value;
       if (!i) return "";
-      let u = '<div class="popup-content">';
-      if (u += `<h3 class="popup-title">${P.value}</h3>`, i.popupConfig?.fields?.length) {
-        u += '<table class="popup-table">';
-        for (const r of i.popupConfig.fields) {
-          const x = Qe(i.properties[r.field], r.format);
-          u += `<tr><th>${r.label}</th><td>${x}</td></tr>`;
+      let p = '<div class="popup-content">';
+      if (p += `<h3 class="popup-title">${it.value}</h3>`, i.popupConfig?.fields?.length) {
+        p += '<table class="popup-table">';
+        for (const s of i.popupConfig.fields) {
+          const E = Ue(i.properties[s.field], s.format);
+          p += `<tr><th>${s.label}</th><td>${E}</td></tr>`;
         }
-        u += "</table>";
+        p += "</table>";
       } else
-        u += '<p class="popup-no-fields">No additional information available.</p>';
-      return u += "</div>", u;
-    }), Z = $({
+        p += '<p class="popup-no-fields">No additional information available.</p>';
+      return p += "</div>", p;
+    }), Le = C({
       type: "FeatureCollection",
       features: []
-    }), Q = $({
+    }), ye = C({
       type: "FeatureCollection",
       features: []
-    }), Ke = {
+    }), ue = {
       "circle-radius": ["get", "highlightRadius"],
       "circle-color": "#00FFFF",
       "circle-opacity": 0.8,
       "circle-stroke-width": 2,
       "circle-stroke-color": "#FFFFFF"
-    }, Xe = {
+    }, at = {
       "line-width": ["get", "highlightWidth"],
       "line-color": "#00FFFF",
       "line-opacity": 0.9
-    }, ge = $(null);
-    function rt(i) {
+    }, de = C(null);
+    function De(i) {
       return i.type;
     }
-    function st(i, u) {
-      const r = $e(i);
-      if (!r) return { radius: 5, width: 2 };
-      const x = r.paint || {};
-      if (u === "circle") {
-        const k = x["circle-radius"];
-        return typeof k == "number" ? { radius: k } : { radius: 5 };
+    function k(i, p) {
+      const s = ke(i);
+      if (!s) return { radius: 5, width: 2 };
+      const E = s.paint || {};
+      if (p === "circle") {
+        const _ = E["circle-radius"];
+        return typeof _ == "number" ? { radius: _ } : { radius: 5 };
       }
-      if (u === "line" || u === "fill") {
-        const k = x["line-width"];
-        if (typeof k == "number")
-          return { width: k };
-        if (r.outlinePaint && r.outlinePaint["line-width"]) {
-          const T = r.outlinePaint["line-width"];
-          if (typeof T == "number")
-            return { width: T };
+      if (p === "line" || p === "fill") {
+        const _ = E["line-width"];
+        if (typeof _ == "number")
+          return { width: _ };
+        if (s.outlinePaint && s.outlinePaint["line-width"]) {
+          const M = s.outlinePaint["line-width"];
+          if (typeof M == "number")
+            return { width: M };
         }
         return { width: 2 };
       }
       return { radius: 5, width: 2 };
     }
-    function ct(i) {
+    function $(i) {
       return !i || i.length === 0 ? [] : i[0] ?? [];
     }
-    function $t(i) {
-      const { geometry: u, geometryType: r, originalStyle: x } = i;
-      if (r === "Point" || r === "MultiPoint") {
-        const T = (x.radius || 5) + 3;
+    function Y(i) {
+      const { geometry: p, geometryType: s, originalStyle: E } = i;
+      if (s === "Point" || s === "MultiPoint") {
+        const M = (E.radius || 5) + 3;
         return {
           type: "FeatureCollection",
           features: [{
             type: "Feature",
-            geometry: u,
+            geometry: p,
             properties: {
-              highlightRadius: T
+              highlightRadius: M
             }
           }]
         };
       }
-      if (r === "LineString" || r === "MultiLineString") {
-        const T = (x.width || 2) + 3;
+      if (s === "LineString" || s === "MultiLineString") {
+        const M = (E.width || 2) + 3;
         return {
           type: "FeatureCollection",
           features: [{
             type: "Feature",
-            geometry: u,
+            geometry: p,
             properties: {
-              highlightWidth: T
+              highlightWidth: M
             }
           }]
         };
       }
-      if (r === "Polygon") {
-        const k = u.coordinates, T = ct(k), B = (x.width || 2) + 3;
+      if (s === "Polygon") {
+        const _ = p.coordinates, M = $(_), N = (E.width || 2) + 3;
         return {
           type: "FeatureCollection",
           features: [{
             type: "Feature",
             geometry: {
               type: "LineString",
-              coordinates: T
+              coordinates: M
             },
             properties: {
-              highlightWidth: B
+              highlightWidth: N
             }
           }]
         };
       }
-      if (r === "MultiPolygon") {
-        const k = u.coordinates, O = (x.width || 2) + 3;
+      if (s === "MultiPolygon") {
+        const _ = p.coordinates, R = (E.width || 2) + 3;
         return {
           type: "FeatureCollection",
-          features: k.map((W) => ({
+          features: _.map((V) => ({
             type: "Feature",
             geometry: {
               type: "LineString",
-              coordinates: ct(W)
+              coordinates: $(V)
             },
             properties: {
-              highlightWidth: O
+              highlightWidth: R
             }
           }))
         };
@@ -595,185 +592,185 @@ const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
         features: []
       };
     }
-    function Pt(i) {
+    function A(i) {
       if (!i) {
-        xt();
+        ae();
         return;
       }
-      const u = $t(i);
-      i.geometryType === "Point" || i.geometryType === "MultiPoint" ? (Z.value = u, Q.value = { type: "FeatureCollection", features: [] }) : (Q.value = u, Z.value = { type: "FeatureCollection", features: [] });
+      const p = Y(i);
+      i.geometryType === "Point" || i.geometryType === "MultiPoint" ? (Le.value = p, ye.value = { type: "FeatureCollection", features: [] }) : (ye.value = p, Le.value = { type: "FeatureCollection", features: [] });
     }
-    function xt() {
-      Z.value = { type: "FeatureCollection", features: [] }, Q.value = { type: "FeatureCollection", features: [] };
+    function ae() {
+      Le.value = { type: "FeatureCollection", features: [] }, ye.value = { type: "FeatureCollection", features: [] };
     }
-    xe(ge, (i) => {
-      Pt(i);
-    }), xe(
-      () => o.visibleLayers,
+    Me(de, (i) => {
+      A(i);
+    }), Me(
+      () => t.visibleLayers,
       (i) => {
-        ge.value && !i.has(ge.value.layerId) && (ge.value = null, te());
+        de.value && !i.has(de.value.layerId) && (de.value = null, Ce());
       },
       { deep: !0 }
-    ), xe(J, () => {
-      const i = b.value;
+    ), Me(ne, () => {
+      const i = ie.value;
       if (!i) {
-        ge.value = null;
+        de.value = null;
         return;
       }
-      const u = a.value;
-      if (!u || !pe.value) return;
-      const r = [];
-      o.layerList.forEach((O) => {
-        const B = O.config;
-        o.visibleLayers.has(B.id) && (r.push(B.id), B.outlinePaint && r.push(`${B.id}-outline`));
+      const p = l.value;
+      if (!p || !we.value) return;
+      const s = [];
+      t.layerList.forEach((R) => {
+        const N = R.config;
+        t.visibleLayers.has(N.id) && (s.push(N.id), N.outlinePaint && s.push(`${N.id}-outline`));
       });
-      const x = u.project(pe.value), T = u.queryRenderedFeatures(x, {
-        layers: r
-      }).find((O) => O.layer.id.replace(/-outline$/, "") === i.layerId && JSON.stringify(O.properties) === JSON.stringify(i.properties));
-      if (T && T.geometry) {
-        const O = $e(i.layerId);
-        if (O) {
-          const B = rt(T.geometry), W = st(O.id, O.type);
-          ge.value = {
-            geometry: T.geometry,
-            geometryType: B,
-            layerId: O.id,
-            properties: T.properties || {},
-            originalStyle: W
+      const E = p.project(we.value), M = p.queryRenderedFeatures(E, {
+        layers: s
+      }).find((R) => R.layer.id.replace(/-outline$/, "") === i.layerId && JSON.stringify(R.properties) === JSON.stringify(i.properties));
+      if (M && M.geometry) {
+        const R = ke(i.layerId);
+        if (R) {
+          const N = De(M.geometry), V = k(R.id, R.type);
+          de.value = {
+            geometry: M.geometry,
+            geometryType: N,
+            layerId: R.id,
+            properties: M.properties || {},
+            originalStyle: V
           };
         }
       }
     });
-    const ut = $(null);
-    function Tt(i) {
-      const [u, r] = i.geometry.coordinates;
-      ut.value = [u, r];
+    const qe = C(null);
+    function lt(i) {
+      const [p, s] = i.geometry.coordinates;
+      qe.value = [p, s];
     }
-    return (i, u) => (f(), L("div", Qt, [
-      ee(_(Ot), {
+    return (i, p) => (d(), m("div", Yt, [
+      K(O(Zt), {
         ref_key: "mapRef",
-        ref: l,
-        zoom: o.initialZoom,
-        center: o.initialCenter,
-        "navigation-controls": { position: o.navigationControlPosition },
-        "geolocation-control": { position: o.geolocationControlPosition },
-        "basemap-change-controls": { toggle: !0, dropdown: !0, position: o.basemapControlPosition },
-        "map-search-control": { position: o.searchControlPosition },
+        ref: a,
+        zoom: t.initialZoom,
+        center: t.initialCenter,
+        "navigation-controls": { position: t.navigationControlPosition },
+        "geolocation-control": { position: t.geolocationControlPosition },
+        "basemap-change-controls": { toggle: !0, dropdown: !0, position: t.basemapControlPosition },
+        "map-search-control": { position: t.searchControlPosition },
         "enable-cyclomedia": !0,
-        "cyclomedia-config": o.cyclomediaConfig,
-        "cyclomedia-button-position": o.cyclomediaButtonPosition,
+        "cyclomedia-config": t.cyclomediaConfig,
+        "cyclomedia-button-position": t.cyclomediaButtonPosition,
         "enable-pictometry": !0,
-        "pictometry-credentials": o.pictometryCredentials,
-        "pictometry-button-position": o.pictometryButtonPosition,
+        "pictometry-credentials": t.pictometryCredentials,
+        "pictometry-button-position": t.pictometryButtonPosition,
         "tool-panel-layout": "vertical",
         "tool-panel-split-ratio": 50,
-        onZoom: p,
-        onClick: te,
-        onMoveend: C,
-        onLoad: g,
-        onSearchResult: Tt
+        onZoom: b,
+        onClick: Ce,
+        onMoveend: f,
+        onLoad: c,
+        onSearchResult: lt
       }, {
-        default: Ne(() => [
-          o.drawControlPosition !== null ? (f(), X(_(Rt), {
+        default: Be(() => [
+          t.drawControlPosition !== null ? (d(), X(O(Bt), {
             key: 0,
-            position: o.drawControlPosition
-          }, null, 8, ["position"])) : I("", !0),
-          (f(!0), L(ie, null, re(Ge.value, (r) => (f(), X(_(pt), {
-            key: "tiled-" + r.id,
-            id: "tiled-" + r.id,
-            source: qe(r),
-            paint: { "raster-opacity": Se(r.id) },
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom
+            position: t.drawControlPosition
+          }, null, 8, ["position"])) : z("", !0),
+          (d(!0), m(ee, null, le(et.value, (s) => (d(), X(O(bt), {
+            key: "tiled-" + s.id,
+            id: "tiled-" + s.id,
+            source: Ye(s),
+            paint: { "raster-opacity": xe(s.id) },
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), L(ie, null, re(He.value, (r) => (f(), X(_(pt), {
-            key: "dynamic-" + r.id,
-            id: "dynamic-" + r.id,
-            source: Ce(r),
-            paint: { "raster-opacity": Se(r.id) },
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom
+          (d(!0), m(ee, null, le(tt.value, (s) => (d(), X(O(bt), {
+            key: "dynamic-" + s.id,
+            id: "dynamic-" + s.id,
+            source: Pe(s),
+            paint: { "raster-opacity": xe(s.id) },
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), L(ie, null, re(M.value, (r) => (f(), X(_(yt), {
-            key: r.id,
-            id: r.id,
-            source: de(r),
-            paint: fe(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (d(!0), m(ee, null, le(T.value, (s) => (d(), X(O(wt), {
+            key: s.id,
+            id: s.id,
+            source: ve(s),
+            paint: be(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
-            onClick: Pe
+            onClick: re
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), L(ie, null, re(N.value, (r) => (f(), X(_(Dt), {
-            key: r.id,
-            id: r.id,
-            source: de(r),
-            paint: fe(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (d(!0), m(ee, null, le(B.value, (s) => (d(), X(O(Nt), {
+            key: s.id,
+            id: s.id,
+            source: ve(s),
+            paint: be(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
-            onClick: Pe
+            onClick: re
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), L(ie, null, re(q.value, (r) => (f(), X(_(et), {
-            key: r.id + "-outline",
-            id: r.id + "-outline",
-            source: de(r),
-            paint: Je(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (d(!0), m(ee, null, le(q.value, (s) => (d(), X(O(st), {
+            key: s.id + "-outline",
+            id: s.id + "-outline",
+            source: ve(s),
+            paint: ot(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
-            onClick: Pe
+            onClick: re
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), L(ie, null, re(ce.value, (r) => (f(), X(_(et), {
-            key: r.id,
-            id: r.id,
-            source: de(r),
-            paint: fe(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (d(!0), m(ee, null, le(fe.value, (s) => (d(), X(O(st), {
+            key: s.id,
+            id: s.id,
+            source: ve(s),
+            paint: be(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
-            onClick: Pe
+            onClick: re
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          ee(_(yt), {
+          K(O(wt), {
             key: "highlight-circles-layer",
             id: "highlight-circles",
-            source: { type: "geojson", data: Z.value },
-            paint: Ke
+            source: { type: "geojson", data: Le.value },
+            paint: ue
           }, null, 8, ["source"]),
-          ee(_(et), {
+          K(O(st), {
             key: "highlight-lines-layer",
             id: "highlight-lines",
-            source: { type: "geojson", data: Q.value },
-            paint: Xe
+            source: { type: "geojson", data: ye.value },
+            paint: at
           }, null, 8, ["source"]),
-          ee(_(At), {
-            "lng-lat": ut.value,
+          K(O(At), {
+            "lng-lat": qe.value,
             color: "#2176d2"
           }, null, 8, ["lng-lat"]),
-          b.value && pe.value ? (f(), X(_(Nt), {
+          ie.value && we.value ? (d(), X(O(Vt), {
             key: 1,
-            "lng-lat": pe.value,
-            html: ae.value,
+            "lng-lat": we.value,
+            html: pe.value,
             "close-on-click": !1,
             "show-navigation": oe.value.length > 1,
-            "current-feature-index": J.value,
+            "current-feature-index": ne.value,
             "total-features": oe.value.length,
-            "layer-name": b.value.layerTitle,
-            onClose: te,
-            onNext: le,
-            onPrevious: De
-          }, null, 8, ["lng-lat", "html", "show-navigation", "current-feature-index", "total-features", "layer-name"])) : I("", !0)
+            "layer-name": ie.value.layerTitle,
+            onClose: Ce,
+            onNext: je,
+            onPrevious: Ee
+          }, null, 8, ["lng-lat", "html", "show-navigation", "current-feature-index", "total-features", "layer-name"])) : z("", !0)
         ]),
         _: 1
       }, 8, ["zoom", "center", "navigation-controls", "geolocation-control", "basemap-change-controls", "map-search-control", "cyclomedia-config", "cyclomedia-button-position", "pictometry-credentials", "pictometry-button-position"])
     ]));
   }
-}), _e = (e, n) => {
-  const o = e.__vccOpts || e;
-  for (const [t, l] of n)
-    o[t] = l;
-  return o;
-}, Xt = /* @__PURE__ */ _e(Kt, [["__scopeId", "data-v-38b78874"]]), Yt = ["disabled"], eo = /* @__PURE__ */ we({
+}), Fe = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [o, a] of n)
+    t[o] = a;
+  return t;
+}, to = /* @__PURE__ */ Fe(eo, [["__scopeId", "data-v-98ba7f8b"]]), oo = ["disabled"], no = /* @__PURE__ */ Se({
   inheritAttrs: !1,
   __name: "PhlButton",
   props: {
@@ -795,24 +792,24 @@ const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
     svgRaw: {}
   },
   setup(e) {
-    const n = e, o = (c) => "href" in c && c.href !== void 0 || "to" in c && c.to !== void 0, t = R(() => nt(
+    const n = e, t = (u) => "href" in u && u.href !== void 0 || "to" in u && u.to !== void 0, o = I(() => dt(
       "phila-button",
       `phila-button--${n.variant}`,
       n.size && `is-${n.size}`,
       n.iconOnly && "icon-button",
       n.iconOnly && n.variant === "standard" && "icon-button--standard",
       n.className
-    )), l = R(() => o(n) ? "to" in n && n.to !== void 0 ? {
+    )), a = I(() => t(n) ? "to" in n && n.to !== void 0 ? {
       to: n.to,
       disabled: n.disabled,
-      className: t.value
+      className: o.value
     } : {
       href: n.href,
       target: n.target,
       rel: n.rel,
       disabled: n.disabled,
-      className: t.value
-    } : {}), a = R(
+      className: o.value
+    } : {}), l = I(
       () => ({
         iconDefinition: n.iconDefinition,
         iconClass: n.iconClass,
@@ -823,54 +820,55 @@ const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
         size: n.size
       })
     );
-    return (c, p) => o(n) ? (f(), X(_(Zt), ot({ key: 0 }, { ...l.value, ...c.$attrs }, { role: "button" }), {
-      default: Ne(() => [
-        ee(_(gt), dt(ft(a.value)), {
-          default: Ne(() => [
-            se(c.$slots, "default", {}, () => [
-              he(j(n.text), 1)
+    return (u, b) => t(n) ? (d(), X(O(Ut), ut({ key: 0 }, { ...a.value, ...u.$attrs }, { role: "button" }), {
+      default: Be(() => [
+        K(O(Lt), ht(mt(l.value)), {
+          default: Be(() => [
+            ce(u.$slots, "default", {}, () => [
+              me(W(n.text), 1)
             ])
           ]),
           _: 3
         }, 16)
       ]),
       _: 3
-    }, 16)) : (f(), L("button", ot({
+    }, 16)) : (d(), m("button", ut({
       key: 1,
       type: "button",
       disabled: n.disabled,
-      class: t.value
-    }, c.$attrs), [
-      ee(_(gt), dt(ft(a.value)), {
-        default: Ne(() => [
-          se(c.$slots, "default", {}, () => [
-            he(j(n.text), 1)
+      class: o.value
+    }, u.$attrs), [
+      K(O(Lt), ht(mt(l.value)), {
+        default: Be(() => [
+          ce(u.$slots, "default", {}, () => [
+            me(W(n.text), 1)
           ])
         ]),
         _: 3
       }, 16)
-    ], 16, Yt));
+    ], 16, oo));
   }
 });
-var to = {
+var io = {
   prefix: "fas",
   iconName: "circle-exclamation",
   icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
-}, oo = to, no = {
+}, ao = io, lo = {
   prefix: "fas",
   iconName: "xmark",
   icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
-}, io = no;
-const lo = ["for"], ao = { class: "state-layer" }, ro = { class: "content" }, so = { class: "input-text-container" }, co = ["id", "placeholder"], uo = {
+}, ro = lo;
+const so = ["for"], co = { class: "state-layer" }, uo = { class: "content" }, fo = { class: "input-text-container" }, po = ["id", "placeholder"], yo = {
   key: 1,
   class: "has-text-body-small phila-supporting-text"
-}, fo = {
+}, go = {
   key: 2,
   class: "has-text-body-small phila-error-text"
-}, po = /* @__PURE__ */ we({
+}, ho = /* @__PURE__ */ Se({
   inheritAttrs: !1,
   __name: "TextField",
   props: {
+    modelValue: { default: void 0 },
     className: { default: "" },
     label: { default: "" },
     id: { default: `phila-text-field-${Math.random().toString(36).substring(2, 9)}` },
@@ -882,116 +880,136 @@ const lo = ["for"], ao = { class: "state-layer" }, ro = { class: "content" }, so
       return [];
     } }
   },
+  emits: ["update:modelValue"],
   setup(e, { emit: n }) {
-    const o = Ft(), t = e, l = R(() => typeof t.error == "string" ? t.error : t.error[0]), a = Mt(t, "id"), c = R(() => {
-      const S = ["default-class"];
-      return o.disabled != null && S.push("phila-input--disabled"), l.value && S.push("phila-input--error"), o.required != null && S.push("phila-input--required"), nt(...S);
-    }), p = $(""), d = R(() => {
-      const S = [];
-      return p.value !== "" && S.push("phila-text-field--filled"), t.className && S.push(t.className), nt(...S);
-    });
-    return (S, y) => (f(), L("div", {
-      class: ne(["phila-input", c.value])
+    const t = Tt(), o = e, a = I(() => typeof o.error == "string" ? o.error : o.error[0]), l = zt(o, "id"), u = n, b = C(""), y = I({
+      get: () => o.modelValue !== void 0 ? o.modelValue : b.value,
+      set: (h) => {
+        u("update:modelValue", h), b.value = h;
+      }
+    }), P = I(() => {
+      const h = ["default-class"];
+      return t.disabled != null && h.push("phila-input--disabled"), a.value && h.push("phila-input--error"), t.required != null && h.push("phila-input--required"), dt(...h);
+    }), v = I(() => {
+      const h = [];
+      return y.value !== "" && h.push("phila-text-field--filled"), o.className && h.push(o.className), dt(...h);
+    }), S = C(null), r = (h) => {
+      h.target.closest("button") || S.value?.focus();
+    };
+    return (h, w) => (d(), m("div", {
+      class: te(["phila-input", P.value])
     }, [
-      t.label ? (f(), L("label", {
+      o.label ? (d(), m("label", {
         key: 0,
-        for: a.value,
+        for: l.value,
         class: "has-text-label-small phila-label"
-      }, j(t.label), 9, lo)) : I("", !0),
-      F("div", {
-        class: ne(["phila-text-field", d.value])
+      }, W(o.label), 9, so)) : z("", !0),
+      x("div", {
+        class: te(["phila-text-field", v.value]),
+        onClick: r
       }, [
-        F("div", ao, [
-          t.leadingIcon ? (f(), X(_(me), {
+        x("div", co, [
+          o.leadingIcon ? (d(), X(O(ge), {
             key: 0,
-            "icon-class": t.leadingIcon,
-            inline: ""
-          }, null, 8, ["icon-class"])) : I("", !0),
-          F("div", ro, [
-            F("div", so, [
-              St(F("input", ot({
-                id: a.value,
-                "onUpdate:modelValue": y[0] || (y[0] = (h) => p.value = h),
+            "icon-class": o.leadingIcon,
+            inline: "",
+            decorative: ""
+          }, null, 8, ["icon-class"])) : z("", !0),
+          x("div", uo, [
+            x("div", fo, [
+              _t(x("input", ut({
+                id: l.value,
+                ref_key: "inputRef",
+                ref: S,
+                "onUpdate:modelValue": w[0] || (w[0] = (g) => y.value = g),
                 class: "phila-text-field-input has-text-body-default",
-                placeholder: t.placeholder
-              }, _(o)), null, 16, co), [
-                [Et, p.value]
+                placeholder: o.placeholder
+              }, O(t)), null, 16, po), [
+                [Ft, y.value]
               ])
             ])
           ]),
-          p.value != "" ? (f(), X(_(eo), {
+          y.value != "" ? (d(), X(O(no), {
             key: 1,
             variant: "standard",
-            size: "extra-small",
+            size: "small",
             "icon-only": "",
-            icon: _(io),
-            onClick: y[1] || (y[1] = (h) => p.value = "")
-          }, null, 8, ["icon"])) : I("", !0),
-          t.trailingIcon ? (f(), X(_(me), {
+            "icon-definition": O(ro),
+            onClick: w[1] || (w[1] = (g) => y.value = "")
+          }, null, 8, ["icon-definition"])) : z("", !0),
+          o.trailingIcon ? (d(), X(O(ge), {
             key: 2,
-            "icon-class": t.trailingIcon,
-            inline: ""
-          }, null, 8, ["icon-class"])) : I("", !0)
+            size: "small",
+            "icon-class": o.trailingIcon,
+            inline: "",
+            decorative: ""
+          }, null, 8, ["icon-class"])) : z("", !0),
+          ce(h.$slots, "trailing-action")
         ])
       ], 2),
-      t.supportingText ? (f(), L("div", uo, j(t.supportingText), 1)) : I("", !0),
-      l.value ? (f(), L("div", fo, [
-        ee(_(me), {
-          "icon-definition": _(oo),
+      o.supportingText ? (d(), m("div", yo, W(o.supportingText), 1)) : z("", !0),
+      a.value ? (d(), m("div", go, [
+        K(O(ge), {
+          "icon-definition": O(ao),
           size: "small",
-          inline: ""
+          inline: "",
+          decorative: ""
         }, null, 8, ["icon-definition"]),
-        he(" " + j(l.value), 1)
-      ])) : I("", !0)
+        me(" " + W(a.value), 1)
+      ])) : z("", !0)
     ], 2));
   }
 });
-var yo = {
+var mo = {
+  prefix: "fas",
+  iconName: "filter",
+  icon: [512, 512, [], "f0b0", "M32 64C19.1 64 7.4 71.8 2.4 83.8S.2 109.5 9.4 118.6L192 301.3 192 416c0 8.5 3.4 16.6 9.4 22.6l64 64c9.2 9.2 22.9 11.9 34.9 6.9S320 492.9 320 480l0-178.7 182.6-182.6c9.2-9.2 11.9-22.9 6.9-34.9S492.9 64 480 64L32 64z"]
+}, vo = {
   prefix: "fas",
   iconName: "caret-right",
   icon: [256, 512, [], "f0da", "M249.3 235.8c10.2 12.6 9.5 31.1-2.2 42.8l-128 128c-9.2 9.2-22.9 11.9-34.9 6.9S64.5 396.9 64.5 384l0-256c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l128 128 2.2 2.4z"]
-}, go = {
+}, bo = {
   prefix: "fas",
   iconName: "caret-left",
   icon: [256, 512, [], "f0d9", "M7.7 235.8c-10.3 12.6-9.5 31.1 2.2 42.8l128 128c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-256c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-128 128-2.2 2.4z"]
-}, ht = {
+}, kt = {
   prefix: "fas",
   iconName: "xmark",
   icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
-}, mo = {
+}, wo = {
   prefix: "fas",
   iconName: "bars",
   icon: [448, 512, ["navicon"], "f0c9", "M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]
-}, ho = {
+}, Lo = {
   prefix: "fas",
   iconName: "circle-info",
   icon: [512, 512, ["info-circle"], "f05a", "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"]
 };
-const vo = { class: "layer-panel" }, bo = {
+const So = { class: "layer-panel" }, ko = {
   key: 0,
   class: "search-box"
-}, wo = {
+}, Co = {
   key: 1,
   class: "topics-container"
-}, Lo = { class: "layer-row" }, So = ["href"], Co = {
+}, $o = { class: "layer-row" }, xo = ["href"], Po = {
   key: 1,
   class: "metadata-placeholder"
-}, ko = ["checked", "disabled", "onChange"], $o = { class: "layer-title" }, Po = {
+}, _o = ["checked", "disabled", "onChange"], Eo = { class: "layer-title" }, Mo = {
   key: 0,
   class: "loading-indicator"
-}, xo = ["title"], To = {
+}, To = ["aria-label"], zo = {
   key: 2,
   class: "zoom-indicator"
 }, Fo = {
   key: 0,
   class: "opacity-control"
-}, Mo = { class: "opacity-label" }, Eo = ["value", "onInput"], zo = {
+}, Oo = ["for"], Io = ["id", "value", "aria-label", "onInput"], Ro = {
   key: 1,
   class: "layer-legend"
-}, _o = { class: "legend-label" }, Io = {
+}, Do = { class: "legend-label" }, Zo = {
   key: 0,
   class: "no-results"
-}, Oo = /* @__PURE__ */ we({
+}, Bo = /* @__PURE__ */ Se({
   __name: "LayerPanel",
   props: {
     layerList: {},
@@ -1006,184 +1024,202 @@ const vo = { class: "layer-panel" }, bo = {
     showSearch: { type: Boolean, default: !0 },
     showOpacity: { type: Boolean, default: !0 },
     showLegend: { type: Boolean, default: !0 },
-    searchPlaceholder: { default: "Search layers..." }
+    searchPlaceholder: { default: "Filter layers..." }
   },
   emits: ["toggleLayer", "setOpacity", "updateSearch"],
   setup(e, { emit: n }) {
-    const o = e, t = n, l = R(() => {
-      if (!o.searchQuery.trim())
-        return o.layerList;
-      const C = o.searchQuery.toLowerCase();
-      return o.layerList.filter(
-        (g) => g.config.title.toLowerCase().includes(C)
+    const t = e, o = n, a = I(() => {
+      if (!t.searchQuery.trim())
+        return t.layerList;
+      const f = t.searchQuery.toLowerCase();
+      return t.layerList.filter(
+        (c) => c.config.title.toLowerCase().includes(f)
       );
     });
-    function a(C) {
-      let g = C.split("?")[0] || C;
-      return g = g.replace(/\/query$/, ""), g = g.replace(/\/$/, ""), g.toLowerCase();
+    function l(f) {
+      let c = f.split("?")[0] || f;
+      return c = c.replace(/\/query$/, ""), c = c.replace(/\/$/, ""), c.toLowerCase();
     }
-    function c(C) {
-      const g = a(C);
-      return o.layerMetadata[g] || null;
+    function u(f) {
+      const c = l(f);
+      return t.layerMetadata[c] || null;
     }
-    const p = R(() => o.layerList.some((C) => c(C.config.url)));
-    function d(C) {
-      return o.visibleLayers.has(C);
+    const b = I(() => t.layerList.some((f) => u(f.config.url)));
+    function y(f) {
+      return t.visibleLayers.has(f);
     }
-    function S(C) {
-      return o.layerOpacities[C] ?? 1;
+    function P(f) {
+      return t.layerOpacities[f] ?? 1;
     }
-    function y(C) {
-      return o.loadingLayers.has(C);
+    function v(f) {
+      return t.loadingLayers.has(f);
     }
-    function h(C) {
-      return o.layerErrors[C] || null;
+    function S(f) {
+      return t.layerErrors[f] || null;
     }
-    function s(C) {
-      const g = o.currentZoom, w = C.minZoom, z = C.maxZoom;
-      return !(w !== void 0 && g < w || z !== void 0 && g > z);
+    function r(f) {
+      const c = t.currentZoom, L = f.minZoom, F = f.maxZoom;
+      return !(L !== void 0 && c < L || F !== void 0 && c > F);
     }
-    const v = R({
-      get: () => o.searchQuery,
-      set: (C) => t("updateSearch", C)
+    const h = I({
+      get: () => t.searchQuery,
+      set: (f) => o("updateSearch", f)
     });
-    function E(C) {
-      t("toggleLayer", C);
-    }
-    function m(C, g) {
-      const w = g.target, z = parseFloat(w.value);
-      t("setOpacity", C, z);
-    }
-    return (C, g) => (f(), L("aside", vo, [
-      e.showSearch ? (f(), L("div", bo, [
-        ee(_(po), {
-          modelValue: v.value,
-          "onUpdate:modelValue": g[0] || (g[0] = (w) => v.value = w),
+    function w(f) {
+      o("toggleLayer", f);
+    }
+    function g(f, c) {
+      const L = c.target, F = parseFloat(L.value);
+      o("setOpacity", f, F);
+    }
+    return (f, c) => (d(), m("aside", So, [
+      e.showSearch ? (d(), m("div", ko, [
+        K(O(ho), {
+          modelValue: h.value,
+          "onUpdate:modelValue": c[0] || (c[0] = (L) => h.value = L),
           placeholder: e.searchPlaceholder,
           "class-name": "layer-search-field"
-        }, null, 8, ["modelValue", "placeholder"])
-      ])) : I("", !0),
-      e.mode === "topics" ? (f(), L("div", wo, [
-        se(C.$slots, "topics", {}, () => [
-          g[2] || (g[2] = F("div", { class: "no-topics" }, ' No topic components provided. Use the "topics" slot to add TopicAccordion components. ', -1))
+        }, {
+          "trailing-action": Be(() => [
+            K(O(ge), {
+              "icon-definition": O(mo),
+              size: "small",
+              inline: "",
+              decorative: ""
+            }, null, 8, ["icon-definition"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "placeholder"])
+      ])) : z("", !0),
+      e.mode === "topics" ? (d(), m("div", Co, [
+        ce(f.$slots, "topics", {}, () => [
+          c[2] || (c[2] = x("div", { class: "no-topics" }, ' No topic components provided. Use the "topics" slot to add TopicAccordion components. ', -1))
         ], !0)
-      ])) : (f(), L("div", {
+      ])) : (d(), m("div", {
         key: 2,
-        class: ne(["layer-list", { "has-metadata": p.value }])
+        class: te(["layer-list", { "has-metadata": b.value }])
       }, [
-        (f(!0), L(ie, null, re(l.value, (w) => (f(), L("div", {
-          key: w.config.id,
+        (d(!0), m(ee, null, le(a.value, (L) => (d(), m("div", {
+          key: L.config.id,
           class: "layer-item"
         }, [
-          F("div", Lo, [
-            c(w.config.url) ? (f(), L("a", {
+          x("div", $o, [
+            u(L.config.url) ? (d(), m("a", {
               key: 0,
-              href: c(w.config.url) || "",
+              href: u(L.config.url) || "",
               target: "_blank",
               rel: "noopener noreferrer",
               class: "metadata-link",
               title: "View metadata",
-              onClick: g[1] || (g[1] = zt(() => {
+              onClick: c[1] || (c[1] = Ot(() => {
               }, ["stop"]))
             }, [
-              ee(_(me), {
-                "icon-definition": _(ho),
+              K(O(ge), {
+                "icon-definition": O(Lo),
                 size: "small",
                 inline: "",
                 decorative: ""
               }, null, 8, ["icon-definition"])
-            ], 8, So)) : p.value ? (f(), L("span", Co)) : I("", !0),
-            F("label", {
-              class: ne(["layer-checkbox", {
-                "layer-unavailable": !s(w.config),
-                "layer-error": h(w.config.id)
+            ], 8, xo)) : b.value ? (d(), m("span", Po)) : z("", !0),
+            x("label", {
+              class: te(["layer-checkbox", {
+                "layer-unavailable": !r(L.config),
+                "layer-error": S(L.config.id)
               }])
             }, [
-              F("input", {
+              x("input", {
                 type: "checkbox",
-                checked: d(w.config.id),
-                disabled: !s(w.config),
-                onChange: (z) => E(w.config.id)
-              }, null, 40, ko),
-              F("span", $o, [
-                he(j(w.config.title) + " ", 1),
-                y(w.config.id) ? (f(), L("span", Po, " Loading... ")) : I("", !0),
-                h(w.config.id) ? (f(), L("span", {
+                checked: y(L.config.id),
+                disabled: !r(L.config),
+                onChange: (F) => w(L.config.id)
+              }, null, 40, _o),
+              x("span", Eo, [
+                me(W(L.config.title) + " ", 1),
+                v(L.config.id) ? (d(), m("span", Mo, " Loading... ")) : z("", !0),
+                S(L.config.id) ? (d(), m("span", {
                   key: 1,
                   class: "error-indicator",
-                  title: h(w.config.id) || ""
-                }, " Error ", 8, xo)) : I("", !0),
-                s(w.config) ? I("", !0) : (f(), L("span", To, " (zoom in) "))
+                  "aria-label": S(L.config.id) || "Error"
+                }, " Error ", 8, To)) : z("", !0),
+                r(L.config) ? z("", !0) : (d(), m("span", zo, " (zoom in) "))
               ])
             ], 2)
           ]),
-          e.showOpacity && d(w.config.id) ? (f(), L("div", Fo, [
-            F("label", Mo, " Opacity: " + j(Math.round(S(w.config.id) * 100)) + "% ", 1),
-            F("input", {
+          e.showOpacity && y(L.config.id) ? (d(), m("div", Fo, [
+            x("label", {
+              class: "opacity-label",
+              for: "opacity-" + L.config.id
+            }, " Opacity: " + W(Math.round(P(L.config.id) * 100)) + "% ", 9, Oo),
+            x("input", {
+              id: "opacity-" + L.config.id,
               type: "range",
               min: "0",
               max: "1",
               step: "0.05",
-              value: S(w.config.id),
+              value: P(L.config.id),
+              "aria-label": "Opacity for " + L.config.title,
               class: "opacity-slider",
-              onInput: (z) => m(w.config.id, z)
-            }, null, 40, Eo)
-          ])) : I("", !0),
-          e.showLegend && d(w.config.id) && w.config.legend?.length ? (f(), L("ul", zo, [
-            (f(!0), L(ie, null, re(w.config.legend, (z, M) => (f(), L("li", {
-              key: M,
+              onInput: (F) => g(L.config.id, F)
+            }, null, 40, Io)
+          ])) : z("", !0),
+          e.showLegend && y(L.config.id) && L.config.legend?.length ? (d(), m("ul", Ro, [
+            (d(!0), m(ee, null, le(L.config.legend, (F, T) => (d(), m("li", {
+              key: T,
               class: "legend-item"
             }, [
-              z.type === "circle" ? (f(), L("span", {
+              F.type === "circle" ? (d(), m("span", {
                 key: 0,
                 class: "legend-symbol legend-circle",
-                style: Y({ backgroundColor: z.color })
-              }, null, 4)) : z.type === "line" ? (f(), L("span", {
+                style: H({ backgroundColor: F.color }),
+                "aria-hidden": "true"
+              }, null, 4)) : F.type === "line" ? (d(), m("span", {
                 key: 1,
                 class: "legend-symbol legend-line",
-                style: Y({
-                  backgroundColor: z.color,
-                  height: `${z.width || 2}px`
-                })
-              }, null, 4)) : z.type === "fill" ? (f(), L("span", {
+                style: H({
+                  backgroundColor: F.color,
+                  height: `${F.width || 2}px`
+                }),
+                "aria-hidden": "true"
+              }, null, 4)) : F.type === "fill" ? (d(), m("span", {
                 key: 2,
                 class: "legend-symbol legend-fill",
-                style: Y({ backgroundColor: z.color })
-              }, null, 4)) : I("", !0),
-              F("span", _o, j(z.label), 1)
+                style: H({ backgroundColor: F.color }),
+                "aria-hidden": "true"
+              }, null, 4)) : z("", !0),
+              x("span", Do, W(F.label), 1)
             ]))), 128))
-          ])) : I("", !0)
+          ])) : z("", !0)
         ]))), 128)),
-        l.value.length === 0 ? (f(), L("div", Io, ' No layers match "' + j(e.searchQuery) + '" ', 1)) : I("", !0)
+        a.value.length === 0 ? (d(), m("div", Zo, ' No layers match "' + W(e.searchQuery) + '" ', 1)) : z("", !0)
       ], 2))
     ]));
   }
-}), Ro = /* @__PURE__ */ _e(Oo, [["__scopeId", "data-v-82d84fbe"]]);
+}), No = /* @__PURE__ */ Fe(Bo, [["__scopeId", "data-v-d8c0326b"]]);
 function D(e) {
   if (!e || !Array.isArray(e) || e.length < 3) return "#888888";
-  const n = e[0], o = e[1], t = e[2], a = (e[3] ?? 255) / 255;
-  return a === 1 ? `#${n.toString(16).padStart(2, "0")}${o.toString(16).padStart(2, "0")}${t.toString(16).padStart(2, "0")}` : `rgba(${n}, ${o}, ${t}, ${a.toFixed(2)})`;
+  const n = e[0], t = e[1], o = e[2], l = (e[3] ?? 255) / 255;
+  return l === 1 ? `#${n.toString(16).padStart(2, "0")}${t.toString(16).padStart(2, "0")}${o.toString(16).padStart(2, "0")}` : `rgba(${n}, ${t}, ${o}, ${l.toFixed(2)})`;
 }
-function ue(e) {
+function he(e) {
   return e !== void 0 ? e : 1;
 }
-const Do = 559082264;
-function vt(e) {
-  return !e || e <= 0 ? null : Math.round(Math.log2(Do / e) * 100) / 100;
+const Ao = 559082264;
+function Ct(e) {
+  return !e || e <= 0 ? null : Math.round(Math.log2(Ao / e) * 100) / 100;
 }
-function Ao(e, n) {
-  const o = {};
+function Vo(e, n) {
+  const t = {};
   if (e && e > 0) {
-    const t = vt(e);
-    t !== null && (o.minZoom = t);
+    const o = Ct(e);
+    o !== null && (t.minZoom = o);
   }
   if (n && n > 0) {
-    const t = vt(n);
-    t !== null && (o.maxZoom = t);
+    const o = Ct(n);
+    o !== null && (t.maxZoom = o);
   }
-  return o;
+  return t;
 }
-function Ve(e) {
+function Qe(e) {
   if (!e) return "fill";
   switch (e.type) {
     case "esriSFS":
@@ -1200,359 +1236,330 @@ function Ve(e) {
       return "fill";
   }
 }
-function Fe(e) {
+function ze(e) {
   return !(!e || e.style === "esriSLSNull" || e.color === null || e.width === 0 || e.color && e.color[3] === 0);
 }
-function tt(e) {
+function ct(e) {
   return String(e);
 }
-function Ct(e, n, o) {
-  const t = e.symbol, l = Ve(t);
-  console.log("[Transformer] convertSimpleRenderer - geomType:", l, "symbol:", t);
-  let a = {}, c = [], p = null;
-  if (l === "fill" && t) {
-    const d = t.color === null ? 0 : t.color?.[3] ?? 255, S = d === 0 ? "rgba(0, 0, 0, 0)" : D(t.color), y = d === 0 ? 0 : d < 255 ? 1 : ue(n);
-    if (console.log(`[Transformer] Fill layer opacity calculation for "${o}":`, {
-      symbolColor: t.color,
-      fillAlpha: d,
-      layerOpacity: n,
-      fillOpacity: y,
-      fillColor: S
-    }), a = {
-      "fill-color": S,
-      "fill-opacity": y
-    }, Fe(t.outline)) {
-      const h = t.outline.width || 1, s = D(t.outline.color);
-      console.log("[Transformer] Fill layer with outline:", {
-        fillAlpha: d,
-        outlineWidth: h,
-        outlineColor: s,
-        willCreateOutlinePaint: h > 1 || d === 0
-      }), d !== 0 && (a["fill-outline-color"] = s), (h > 1 || d === 0) && (p = {
-        "line-color": s,
-        "line-width": h
-      }, console.log("[Transformer] Created outlinePaint:", p));
-    } else
-      console.log("[Transformer] No visible outline for fill layer, hasVisibleOutline returned false");
-    c = [{
+function Et(e, n, t) {
+  const o = e.symbol, a = Qe(o);
+  let l = {}, u = [], b = null;
+  if (a === "fill" && o) {
+    const y = o.color === null ? 0 : o.color?.[3] ?? 255, P = y === 0 ? "rgba(0, 0, 0, 0)" : D(o.color), v = y === 0 ? 0 : y < 255 ? 1 : he(n);
+    if (l = {
+      "fill-color": P,
+      "fill-opacity": v
+    }, ze(o.outline)) {
+      const S = o.outline.width || 1, r = D(o.outline.color);
+      y !== 0 && (l["fill-outline-color"] = r), (S > 1 || y === 0) && (b = {
+        "line-color": r,
+        "line-width": S
+      });
+    }
+    u = [{
       type: "fill",
-      color: D(t.color),
+      color: D(o.color),
       label: e.label || "Feature"
     }];
-  } else if (l === "line" && t)
-    a = {
-      "line-color": D(t.color),
-      "line-width": t.width || 1,
-      "line-opacity": ue(n)
-    }, c = [{
+  } else if (a === "line" && o)
+    l = {
+      "line-color": D(o.color),
+      "line-width": o.width || 1,
+      "line-opacity": he(n)
+    }, u = [{
       type: "line",
-      color: D(t.color),
-      width: t.width || 1,
+      color: D(o.color),
+      width: o.width || 1,
       label: e.label || "Feature"
     }];
-  else if (l === "circle" && t) {
-    const d = Math.round((t.size || 6) * 0.71 * 100) / 100;
-    a = {
-      "circle-color": D(t.color),
-      "circle-radius": d,
-      "circle-opacity": ue(n)
-    }, Fe(t.outline) && (a["circle-stroke-color"] = D(t.outline.color), a["circle-stroke-width"] = t.outline.width || 1), c = [{
+  else if (a === "circle" && o) {
+    const y = Math.round((o.size || 6) * 0.71 * 100) / 100;
+    l = {
+      "circle-color": D(o.color),
+      "circle-radius": y,
+      "circle-opacity": he(n)
+    }, ze(o.outline) && (l["circle-stroke-color"] = D(o.outline.color), l["circle-stroke-width"] = o.outline.width || 1), u = [{
       type: "circle",
-      color: D(t.color),
+      color: D(o.color),
       label: e.label || "Feature"
     }];
   }
-  return { paint: a, legend: c, geomType: l, outlinePaint: p };
+  return { paint: l, legend: u, geomType: a, outlinePaint: b };
 }
-function No(e, n, o) {
-  const t = e.field1, l = e.uniqueValueInfos || [], a = e.defaultSymbol;
-  if (l.length === 0)
-    return Ct({ ...e, symbol: a }, n);
-  const c = l[0]?.symbol || a, p = Ve(c);
-  let d = {}, S = [], y = null;
-  if (p === "fill") {
-    const h = ["match", ["to-string", ["get", t]]];
-    for (const s of l) {
-      h.push(tt(s.value)), h.push(D(s.symbol?.color));
-      const v = String(s.value), m = o?.get(v) || s.label || v;
-      S.push({
+function Uo(e, n, t) {
+  const o = e.field1, a = e.uniqueValueInfos || [], l = e.defaultSymbol;
+  if (a.length === 0)
+    return Et({ ...e, symbol: l }, n);
+  const u = a[0]?.symbol || l, b = Qe(u);
+  let y = {}, P = [], v = null;
+  if (b === "fill") {
+    const S = ["match", ["to-string", ["get", o]]];
+    for (const r of a) {
+      S.push(ct(r.value)), S.push(D(r.symbol?.color));
+      const h = String(r.value), g = t?.get(h) || r.label || h;
+      P.push({
         type: "fill",
-        color: D(s.symbol?.color),
-        label: m
+        color: D(r.symbol?.color),
+        label: g
       });
     }
-    if (h.push(a ? D(a.color) : "#888888"), d = {
-      "fill-color": h,
-      "fill-opacity": ue(n)
-    }, Fe(c?.outline)) {
-      const s = c.outline.width || 1, v = D(c.outline.color);
-      d["fill-outline-color"] = v, s > 1 && (y = {
-        "line-color": v,
-        "line-width": s
+    if (S.push(l ? D(l.color) : "rgba(0, 0, 0, 0)"), y = {
+      "fill-color": S,
+      "fill-opacity": he(n)
+    }, ze(u?.outline)) {
+      const r = u.outline.width || 1, h = D(u.outline.color);
+      y["fill-outline-color"] = h, r > 1 && (v = {
+        "line-color": h,
+        "line-width": r
       });
     }
-  } else if (p === "line") {
-    const h = ["match", ["to-string", ["get", t]]];
-    for (const s of l) {
-      h.push(tt(s.value)), h.push(D(s.symbol?.color));
-      const v = String(s.value), m = o?.get(v) || s.label || v;
-      S.push({
+  } else if (b === "line") {
+    const S = ["match", ["to-string", ["get", o]]];
+    for (const r of a) {
+      S.push(ct(r.value)), S.push(D(r.symbol?.color));
+      const h = String(r.value), g = t?.get(h) || r.label || h;
+      P.push({
         type: "line",
-        color: D(s.symbol?.color),
-        width: s.symbol?.width || 1,
-        label: m
+        color: D(r.symbol?.color),
+        width: r.symbol?.width || 1,
+        label: g
       });
     }
-    h.push(a ? D(a.color) : "#888888"), d = {
-      "line-color": h,
-      "line-width": c?.width || 2,
-      "line-opacity": ue(n)
+    S.push(l ? D(l.color) : "rgba(0, 0, 0, 0)"), y = {
+      "line-color": S,
+      "line-width": u?.width || 2,
+      "line-opacity": he(n)
     };
-  } else if (p === "circle") {
-    const h = ["match", ["to-string", ["get", t]]];
-    for (const v of l) {
-      h.push(tt(v.value)), h.push(D(v.symbol?.color));
-      const E = String(v.value), C = o?.get(E) || v.label || E;
-      S.push({
+  } else if (b === "circle") {
+    const S = ["match", ["to-string", ["get", o]]];
+    for (const h of a) {
+      S.push(ct(h.value)), S.push(D(h.symbol?.color));
+      const w = String(h.value), f = t?.get(w) || h.label || w;
+      P.push({
         type: "circle",
-        color: D(v.symbol?.color),
-        label: C
+        color: D(h.symbol?.color),
+        label: f
       });
     }
-    h.push(a ? D(a.color) : "#888888");
-    const s = Math.round((c?.size || 6) * 0.71 * 100) / 100;
-    d = {
-      "circle-color": h,
-      "circle-radius": s,
-      "circle-opacity": ue(n)
-    }, Fe(c?.outline) && (d["circle-stroke-color"] = D(c.outline.color), d["circle-stroke-width"] = c.outline.width || 1);
+    S.push(l ? D(l.color) : "rgba(0, 0, 0, 0)");
+    const r = Math.round((u?.size || 6) * 0.71 * 100) / 100;
+    y = {
+      "circle-color": S,
+      "circle-radius": r,
+      "circle-opacity": he(n)
+    }, ze(u?.outline) && (y["circle-stroke-color"] = D(u.outline.color), y["circle-stroke-width"] = u.outline.width || 1);
   }
-  return { paint: d, legend: S, geomType: p, outlinePaint: y };
+  return { paint: y, legend: P, geomType: b, outlinePaint: v };
 }
-function Zo(e, n) {
-  const o = e.field, t = e.classBreakInfos || [], l = e.visualVariables?.find((y) => y.type === "colorInfo");
-  if (l?.stops && l.stops.length > 0)
-    return Bo(l, o, e, n);
-  if (t.length === 0)
+function Wo(e, n) {
+  const t = e.field, o = e.classBreakInfos || [], a = e.visualVariables?.find((v) => v.type === "colorInfo");
+  if (a?.stops && a.stops.length > 0)
+    return jo(a, t, e, n);
+  if (o.length === 0)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const a = t[0]?.symbol, c = Ve(a);
-  let p = {}, d = [], S = null;
-  if (c === "fill") {
-    const y = ["step", ["get", o]];
-    y.push(D(t[0]?.symbol?.color));
-    for (let h = 0; h < t.length; h++) {
-      const s = t[h];
-      h > 0 && (y.push(t[h - 1].classMaxValue), y.push(D(s.symbol?.color))), d.push({
+  const l = o[0]?.symbol, u = Qe(l);
+  let b = {}, y = [], P = null;
+  if (u === "fill") {
+    const v = ["step", ["get", t]];
+    v.push(D(o[0]?.symbol?.color));
+    for (let S = 0; S < o.length; S++) {
+      const r = o[S];
+      S > 0 && (v.push(o[S - 1].classMaxValue), v.push(D(r.symbol?.color))), y.push({
         type: "fill",
-        color: D(s.symbol?.color),
-        label: s.label || `${s.classMaxValue}`
+        color: D(r.symbol?.color),
+        label: r.label || `${r.classMaxValue}`
       });
     }
-    if (p = {
-      "fill-color": y,
-      "fill-opacity": ue(n)
-    }, Fe(a?.outline)) {
-      const h = a.outline.width || 1, s = D(a.outline.color);
-      p["fill-outline-color"] = s, h > 1 && (S = {
-        "line-color": s,
-        "line-width": h
+    if (b = {
+      "fill-color": v,
+      "fill-opacity": he(n)
+    }, ze(l?.outline)) {
+      const S = l.outline.width || 1, r = D(l.outline.color);
+      b["fill-outline-color"] = r, S > 1 && (P = {
+        "line-color": r,
+        "line-width": S
       });
     }
-  } else if (c === "line") {
-    const y = ["step", ["get", o]];
-    y.push(D(t[0]?.symbol?.color));
-    let h = e.minValue ?? 0;
-    for (let v = 0; v < t.length; v++) {
-      const E = t[v];
-      v > 0 && (y.push(t[v - 1].classMaxValue), y.push(D(E.symbol?.color))), d.push({
+  } else if (u === "line") {
+    const v = ["step", ["get", t]];
+    v.push(D(o[0]?.symbol?.color));
+    let S = e.minValue ?? 0;
+    for (let h = 0; h < o.length; h++) {
+      const w = o[h];
+      h > 0 && (v.push(o[h - 1].classMaxValue), v.push(D(w.symbol?.color))), y.push({
         type: "line",
-        color: D(E.symbol?.color),
-        width: E.symbol?.width || a?.width || 2,
-        label: E.label || `${h} - ${E.classMaxValue}`
-      }), h = E.classMaxValue + 1;
-    }
-    const s = a?.width || 2;
-    p = {
-      "line-color": y,
-      "line-width": s,
-      "line-opacity": ue(n)
+        color: D(w.symbol?.color),
+        width: w.symbol?.width || l?.width || 2,
+        label: w.label || `${S} - ${w.classMaxValue}`
+      }), S = w.classMaxValue + 1;
+    }
+    const r = l?.width || 2;
+    b = {
+      "line-color": v,
+      "line-width": r,
+      "line-opacity": he(n)
     };
   }
-  return { paint: p, legend: d, geomType: c, outlinePaint: S };
+  return { paint: b, legend: y, geomType: u, outlinePaint: P };
 }
-function Bo(e, n, o, t) {
-  const l = e.stops || [];
-  if (l.length === 0)
+function jo(e, n, t, o) {
+  const a = e.stops || [];
+  if (a.length === 0)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const a = o.classBreakInfos?.[0]?.symbol || o.defaultSymbol, c = Ve(a);
-  let p = {}, d = [], S = null;
-  if (c === "fill") {
-    const y = ["interpolate", ["linear"], ["get", n]];
-    for (const s of l)
-      y.push(s.value), y.push(D(s.color)), d.push({
+  const l = t.classBreakInfos?.[0]?.symbol || t.defaultSymbol, u = Qe(l);
+  let b = {}, y = [], P = null;
+  if (u === "fill") {
+    const v = ["interpolate", ["linear"], ["get", n]];
+    for (const r of a)
+      v.push(r.value), v.push(D(r.color)), y.push({
         type: "fill",
-        color: D(s.color),
-        label: s.label || `${s.value}`
+        color: D(r.color),
+        label: r.label || `${r.value}`
       });
-    if (p = {
+    if (b = {
       "fill-color": [
         "case",
         ["==", ["get", n], null],
         "rgba(0, 0, 0, 0)",
         // Transparent for null/no-data values
-        y
+        v
         // Otherwise use the interpolated color
       ],
-      "fill-opacity": ue(t)
-    }, Fe(a?.outline)) {
-      const s = a.outline.width || 1, v = D(a.outline.color);
-      p["fill-outline-color"] = v, s > 1 && (S = {
-        "line-color": v,
-        "line-width": s
+      "fill-opacity": he(o)
+    }, ze(l?.outline)) {
+      const r = l.outline.width || 1, h = D(l.outline.color);
+      b["fill-outline-color"] = h, r > 1 && (P = {
+        "line-color": h,
+        "line-width": r
       });
     }
   }
-  return { paint: p, legend: d, geomType: c, outlinePaint: S };
+  return { paint: b, legend: y, geomType: u, outlinePaint: P };
 }
-function Wo(e, n, o, t) {
+function qo(e, n, t, o) {
   if (!e?.renderer)
-    return console.warn("[Transformer] No renderer found in drawingInfo - layer will use service default (not available in WebMap)"), { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const l = e.renderer;
-  switch (l.type) {
+    return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
+  const a = e.renderer;
+  switch (a.type) {
     case "simple":
-      return Ct(l, n, t);
+      return Et(a, n);
     case "uniqueValue":
-      return No(l, n, o);
+      return Uo(a, n, t);
     case "classBreaks":
-      return Zo(l, n);
+      return Wo(a, n);
     default:
-      return console.warn(`Unknown renderer type: ${l.type}`), { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
+      return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
   }
 }
-function Uo(e) {
+function Go(e) {
   if (!e) return null;
-  const n = e.title || "", t = (e.fieldInfos || []).filter((l) => l.visible === !0).map((l) => {
-    const a = {
-      field: l.fieldName,
-      label: l.label || l.fieldName
+  const n = e.title || "", o = (e.fieldInfos || []).filter((a) => a.visible === !0).map((a) => {
+    const l = {
+      field: a.fieldName,
+      label: a.label || a.fieldName
     };
-    return l.format && (a.format = {}, l.format.dateFormat && (a.format.dateFormat = l.format.dateFormat), l.format.digitSeparator !== void 0 && (a.format.digitSeparator = l.format.digitSeparator), l.format.places !== void 0 && (a.format.places = l.format.places), Object.keys(a.format).length === 0 && delete a.format), a;
+    return a.format && (l.format = {}, a.format.dateFormat && (l.format.dateFormat = a.format.dateFormat), a.format.digitSeparator !== void 0 && (l.format.digitSeparator = a.format.digitSeparator), a.format.places !== void 0 && (l.format.places = a.format.places), Object.keys(l.format).length === 0 && delete l.format), l;
   });
   return {
     title: n,
-    fields: t
+    fields: o
   };
 }
-function Vo(e) {
+function Ho(e) {
   return e?.definitionExpression;
 }
-function jo(e) {
+function Jo(e) {
   return (e.includes("_") ? e.split("_").slice(1).join(" ") : e).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 }
-function qo(e) {
+function Ko(e) {
   return e.includes("_") ? e.split("_").slice(1).join(" ") : e;
 }
-function Go(e) {
+function Qo(e) {
   const n = /* @__PURE__ */ new Map();
   if (!e)
     return n;
-  const o = e.split(`
-`), t = /^(\d{1,3})\s+(.+)$/;
-  for (const l of o) {
-    const a = l.trim().match(t);
-    if (a) {
-      const [, c, p] = a;
-      c && p && n.set(c, p.trim());
+  const t = e.split(`
+`), o = /^(\d{1,3})\s+(.+)$/;
+  for (const a of t) {
+    const l = a.trim().match(o);
+    if (l) {
+      const [, u, b] = l;
+      u && b && n.set(u, b.trim());
     }
   }
   return n;
 }
-async function Ho(e) {
+async function Xo(e) {
   try {
-    console.log(`[Transformer] Fetching service metadata from: ${e}`);
     const n = await fetch(`${e}?f=json`);
     if (!n.ok)
-      return console.warn(`[Transformer] Failed to fetch service metadata: ${n.status}`), null;
-    const o = await n.json();
-    return o.drawingInfo ? {
-      drawingInfo: o.drawingInfo,
-      description: o.description
+      return null;
+    const t = await n.json();
+    return t.drawingInfo ? {
+      drawingInfo: t.drawingInfo,
+      description: t.description
     } : null;
-  } catch (n) {
-    return console.error("[Transformer] Error fetching service metadata:", n), null;
+  } catch {
+    return null;
   }
 }
-async function kt(e) {
-  const n = e.operationalLayers || [], o = [], t = ["Zoning and Planning_Land Use"];
-  console.log("🔄 [Transformer] ===== STARTING FRESH TRANSFORMATION ====="), console.log("[Transformer] Starting transformation of", n.length, "layers");
-  for (const l of n) {
-    if (!l.url) {
-      console.log(`Skipping layer without URL: ${l.title}`);
-      continue;
-    }
-    if (l.itemId === "4f39b829b96d437da9231727d9c91fab") {
-      console.log(`Skipping layer with under-construction itemId: ${l.title}`);
-      continue;
-    }
-    console.log("[Transformer] Processing layer:", l.title), console.log(`[Transformer] Layer "${l.title}" - Renderer type:`, l.layerDefinition?.drawingInfo?.renderer?.type);
-    try {
-      let a = l.layerDefinition?.drawingInfo, c;
-      const p = !a || !a.renderer, d = t.includes(l.title);
-      if ((p || d) && l.url) {
-        console.log(d ? `[Transformer] Layer "${l.title}" configured to use service renderer instead of WebMap renderer` : `[Transformer] Layer "${l.title}" has no renderer in WebMap, fetching from service...`);
-        const M = await Ho(l.url);
-        M ? (a = M.drawingInfo, console.log(`[Transformer] Fetched renderer from service for "${l.title}":`, M.drawingInfo?.renderer?.type), M.description && (c = Go(M.description), c.size > 0 && console.log(`[Transformer] Parsed ${c.size} custom labels from service description`))) : console.warn(`[Transformer] Failed to fetch renderer from service for "${l.title}"`);
+async function Mt(e) {
+  const n = e.operationalLayers || [], t = [], o = ["Zoning and Planning_Land Use"];
+  for (const a of n)
+    if (a.url && a.itemId !== "4f39b829b96d437da9231727d9c91fab")
+      try {
+        let l = a.layerDefinition?.drawingInfo, u;
+        const b = !l || !l.renderer, y = o.includes(a.title);
+        if ((b || y) && a.url) {
+          const T = await Xo(a.url);
+          T && (l = T.drawingInfo, T.description && (u = Qo(T.description), u.size > 0));
+        }
+        const { paint: P, legend: v, geomType: S, outlinePaint: r } = qo(
+          l,
+          a.opacity,
+          u,
+          a.title
+        ), h = Go(a.popupInfo), w = Ho(a.layerDefinition), g = Vo(
+          a.layerDefinition?.minScale,
+          a.layerDefinition?.maxScale
+        ), f = Jo(a.title), c = Ko(a.title);
+        let L = a.opacity ?? 1;
+        const F = {
+          id: f,
+          title: c,
+          type: S,
+          url: a.url,
+          opacity: L,
+          paint: P,
+          legend: v,
+          popup: h
+        };
+        w && (F.where = w), g.minZoom !== void 0 && (F.minZoom = g.minZoom), g.maxZoom !== void 0 && (F.maxZoom = g.maxZoom), r && (F.outlinePaint = r), t.push(F);
+      } catch {
       }
-      const { paint: S, legend: y, geomType: h, outlinePaint: s } = Wo(
-        a,
-        l.opacity,
-        c,
-        l.title
-      );
-      console.log(`[Transformer] Layer "${l.title}" - Result: geomType=${h}, hasOutlinePaint=${!!s}`);
-      const v = Uo(l.popupInfo), E = Vo(l.layerDefinition), m = Ao(
-        l.layerDefinition?.minScale,
-        l.layerDefinition?.maxScale
-      ), C = jo(l.title), g = qo(l.title);
-      let w = l.opacity ?? 1;
-      const z = {
-        id: C,
-        title: g,
-        type: h,
-        url: l.url,
-        opacity: w,
-        paint: S,
-        legend: y,
-        popup: v
-      };
-      E && (z.where = E), m.minZoom !== void 0 && (z.minZoom = m.minZoom), m.maxZoom !== void 0 && (z.maxZoom = m.maxZoom), s && (z.outlinePaint = s), o.push(z);
-    } catch (a) {
-      console.error(`Error transforming layer ${l.title}:`, a);
-    }
-  }
-  return o.sort((l, a) => l.title.localeCompare(a.title)), o;
+  return t.sort((a, l) => a.title.localeCompare(l.title)), t;
 }
-const bt = {}, at = "376af635c84643cd816a8c5d017a53aa", Dn = at;
-function Be(e, n) {
-  let o = `https://www.arcgis.com/sharing/rest/content/items/${e}/data?f=json`;
-  return n && (o += `&token=${n}`), o;
+const $t = {}, yt = "376af635c84643cd816a8c5d017a53aa", Yn = yt;
+function gt(e, n) {
+  let t = `https://www.arcgis.com/sharing/rest/content/items/${e}/data?f=json`;
+  return n && (t += `&token=${n}`), t;
 }
-function An() {
-  return Be(at);
+function ei() {
+  return gt(yt);
 }
-const We = /* @__PURE__ */ new Map(), ze = /* @__PURE__ */ new Map();
-function Jo(e) {
-  e ? (We.delete(e), ze.delete(e)) : (We.clear(), ze.clear());
+const Je = /* @__PURE__ */ new Map(), Ne = /* @__PURE__ */ new Map();
+function Yo(e) {
+  e ? (Je.delete(e), Ne.delete(e)) : (Je.clear(), Ne.clear());
 }
-let Ae, wt = 0;
-async function Qo() {
-  const e = typeof import.meta < "u" && bt?.VITE_AGO_USERNAME, n = typeof import.meta < "u" && bt?.VITE_AGO_PASSWORD;
+let Ge, xt = 0;
+async function en() {
+  const e = typeof import.meta < "u" && $t?.VITE_AGO_USERNAME, n = typeof import.meta < "u" && $t?.VITE_AGO_PASSWORD;
   if (!(!e || !n)) {
-    if (Ae && Date.now() < wt - 3e5)
-      return console.log("[LayerConfigService] Using cached ArcGIS token"), Ae;
-    console.log("[LayerConfigService] Generating new ArcGIS token...");
+    if (Ge && Date.now() < xt - 3e5)
+      return Ge;
     try {
-      const t = await (await fetch("https://www.arcgis.com/sharing/rest/generateToken", {
+      const o = await (await fetch("https://www.arcgis.com/sharing/rest/generateToken", {
         method: "POST",
         headers: {
           "Content-Type": "application/x-www-form-urlencoded"
@@ -1566,188 +1573,177 @@ async function Qo() {
           // 2 hours
         })
       })).json();
-      if (t.error) {
-        console.error("[LayerConfigService] Failed to generate token:", t.error);
-        return;
-      }
-      return Ae = t.token, wt = t.expires, console.log("[LayerConfigService] ArcGIS token generated successfully"), Ae;
-    } catch (o) {
-      console.error("[LayerConfigService] Error generating ArcGIS token:", o);
+      return o.error ? void 0 : (Ge = o.token, xt = o.expires, Ge);
+    } catch {
       return;
     }
   }
 }
-async function Ko(e, n) {
-  const o = Be(e, n);
-  console.log(`[LayerConfigService] Fetching WebMap from: ${Be(e)}${n ? " (with token)" : ""}`);
-  const t = await fetch(o);
-  if (!t.ok)
-    throw new Error(`Failed to fetch WebMap: ${t.status} ${t.statusText}`);
-  const l = await t.json();
-  if (l.error)
-    throw new Error(`ArcGIS error: ${l.error.message || l.error.code || "Unknown error"}`);
-  return l;
+async function tn(e, n) {
+  const t = gt(e, n), o = await fetch(t);
+  if (!o.ok)
+    throw new Error(`Failed to fetch WebMap: ${o.status} ${o.statusText}`);
+  const a = await o.json();
+  if (a.error)
+    throw new Error(`ArcGIS error: ${a.error.message || a.error.code || "Unknown error"}`);
+  return a;
 }
-async function Xo(e) {
+async function on(e) {
   try {
-    console.log(`[LayerConfigService] Loading configs in DYNAMIC mode for WebMap: ${e}`);
-    const n = await Qo(), o = await Ko(e, n);
-    console.log("[LayerConfigService] Transforming WebMap to layer configs");
-    const t = await kt(o);
-    return console.log(`[LayerConfigService] Successfully loaded ${t.length} layer configs`), t;
+    const n = await en(), t = await tn(e, n);
+    return await Mt(t);
   } catch (n) {
-    throw console.error("[LayerConfigService] Error loading dynamic configs:", n), new Error(`Failed to load dynamic layer configs: ${n instanceof Error ? n.message : "Unknown error"}`);
+    throw new Error(`Failed to load dynamic layer configs: ${n instanceof Error ? n.message : "Unknown error"}`);
   }
 }
-async function lt(e = at) {
-  const n = We.get(e);
+async function pt(e = yt) {
+  const n = Je.get(e);
   if (n)
-    return console.log(`[LayerConfigService] ⚠️ Returning CACHED configs for ${e} (transformer will NOT run)`), console.log("[LayerConfigService] To force refresh, call clearCache() or reload with Ctrl+Shift+R"), n;
-  const o = ze.get(e);
-  if (o)
-    return console.log(`[LayerConfigService] Load already in progress for ${e}, waiting...`), o;
-  console.log(`[LayerConfigService] Mode: dynamic, WebMap: ${e}`);
-  const t = (async () => {
+    return n;
+  const t = Ne.get(e);
+  if (t)
+    return t;
+  const o = (async () => {
     try {
-      const l = await Xo(e);
-      return We.set(e, l), l;
+      const a = await on(e);
+      return Je.set(e, a), a;
     } finally {
-      ze.delete(e);
+      Ne.delete(e);
     }
   })();
-  return ze.set(e, t), t;
+  return Ne.set(e, o), o;
 }
-function Yo(e) {
-  const n = $({}), o = /* @__PURE__ */ new Map();
-  for (const s of e)
-    n.value[s.id] = {
+function nn(e) {
+  const n = C({}), t = /* @__PURE__ */ new Map();
+  for (const r of e)
+    n.value[r.id] = {
       data: null,
       loading: !1,
       error: null,
       lastFetched: null
     };
-  async function t(s) {
-    const v = s.id;
+  async function o(r) {
+    const h = r.id;
     n.value = {
       ...n.value,
-      [v]: {
-        data: n.value[v]?.data ?? null,
-        lastFetched: n.value[v]?.lastFetched ?? null,
+      [h]: {
+        data: n.value[h]?.data ?? null,
+        lastFetched: n.value[h]?.lastFetched ?? null,
         loading: !0,
         error: null
       }
     };
     try {
-      let E;
-      if (s.type === "http-get") {
-        const m = await fetch(s.url, {
+      let w;
+      if (r.type === "http-get") {
+        const g = await fetch(r.url, {
           method: "GET",
-          ...s.options
+          ...r.options
         });
-        if (!m.ok)
-          throw new Error(`HTTP ${m.status}: ${m.statusText}`);
-        E = await m.json();
-      } else if (s.type === "http-post") {
-        const m = await fetch(s.url, {
+        if (!g.ok)
+          throw new Error(`HTTP ${g.status}: ${g.statusText}`);
+        w = await g.json();
+      } else if (r.type === "http-post") {
+        const g = await fetch(r.url, {
           method: "POST",
-          ...s.options
+          ...r.options
         });
-        if (!m.ok)
-          throw new Error(`HTTP ${m.status}: ${m.statusText}`);
-        E = await m.json();
-      } else if (s.type === "esri") {
-        const C = `${s.url.replace(/\/$/, "")}/query?where=1%3D1&outFields=*&returnGeometry=false&f=json`, g = await fetch(C, s.options);
         if (!g.ok)
           throw new Error(`HTTP ${g.status}: ${g.statusText}`);
-        E = (await g.json()).features?.map((z) => z.attributes) || [];
+        w = await g.json();
+      } else if (r.type === "esri") {
+        const f = `${r.url.replace(/\/$/, "")}/query?where=1%3D1&outFields=*&returnGeometry=false&f=json`, c = await fetch(f, r.options);
+        if (!c.ok)
+          throw new Error(`HTTP ${c.status}: ${c.statusText}`);
+        w = (await c.json()).features?.map((F) => F.attributes) || [];
       } else
-        throw new Error(`Unknown data source type: ${s.type}`);
-      s.transform && (E = s.transform(E)), n.value = {
+        throw new Error(`Unknown data source type: ${r.type}`);
+      r.transform && (w = r.transform(w)), n.value = {
         ...n.value,
-        [v]: {
-          data: E,
+        [h]: {
+          data: w,
           loading: !1,
           error: null,
           lastFetched: Date.now()
         }
       };
-    } catch (E) {
-      const m = E instanceof Error ? E.message : "Unknown error";
-      console.error(`Failed to fetch data source "${v}":`, m), n.value = {
+    } catch (w) {
+      const g = w instanceof Error ? w.message : "Unknown error";
+      n.value = {
         ...n.value,
-        [v]: {
-          data: n.value[v]?.data ?? null,
-          lastFetched: n.value[v]?.lastFetched ?? null,
+        [h]: {
+          data: n.value[h]?.data ?? null,
+          lastFetched: n.value[h]?.lastFetched ?? null,
           loading: !1,
-          error: m
+          error: g
         }
       };
     }
   }
-  async function l() {
-    await Promise.all(e.map((s) => t(s)));
+  async function a() {
+    await Promise.all(e.map((r) => o(r)));
   }
-  async function a(s) {
-    const v = e.find((E) => E.id === s);
-    v ? await t(v) : console.warn(`Data source "${s}" not found`);
+  async function l(r) {
+    const h = e.find((w) => w.id === r);
+    h && await o(h);
   }
-  function c(s) {
-    return n.value[s]?.data ?? null;
+  function u(r) {
+    return n.value[r]?.data ?? null;
   }
-  const p = R(() => Object.values(n.value).some((s) => s.loading));
-  function d(s) {
-    return n.value[s]?.loading ?? !1;
+  const b = I(() => Object.values(n.value).some((r) => r.loading));
+  function y(r) {
+    return n.value[r]?.loading ?? !1;
   }
-  function S(s) {
-    return n.value[s]?.error ?? null;
+  function P(r) {
+    return n.value[r]?.error ?? null;
   }
-  function y() {
-    for (const s of e)
-      if (s.pollInterval && s.pollInterval > 0) {
-        const v = window.setInterval(() => {
-          t(s);
-        }, s.pollInterval);
-        o.set(s.id, v);
+  function v() {
+    for (const r of e)
+      if (r.pollInterval && r.pollInterval > 0) {
+        const h = window.setInterval(() => {
+          o(r);
+        }, r.pollInterval);
+        t.set(r.id, h);
       }
   }
-  function h() {
-    for (const [, s] of o)
-      window.clearInterval(s);
-    o.clear();
+  function S() {
+    for (const [, r] of t)
+      window.clearInterval(r);
+    t.clear();
   }
-  return Ze(() => {
-    l(), y();
-  }), Lt(() => {
-    h();
+  return He(() => {
+    a(), v();
+  }), Pt(() => {
+    S();
   }), {
     /** Reactive state for all data sources */
-    state: V(n),
+    state: j(n),
     /** Whether any data source is currently loading */
-    isLoading: p,
+    isLoading: b,
     /** Fetch all data sources */
-    fetchAll: l,
+    fetchAll: a,
     /** Refetch a specific data source by id */
-    refetch: a,
+    refetch: l,
     /** Get data for a specific source */
-    getData: c,
+    getData: u,
     /** Check if a specific source is loading */
-    isSourceLoading: d,
+    isSourceLoading: y,
     /** Get error for a specific source */
-    getError: S,
+    getError: P,
     /** Stop all polling (useful for cleanup) */
-    stopPolling: h
+    stopPolling: S
   };
 }
-const en = { class: "layerboard-layout" }, tn = {
+const an = { class: "layerboard-layout" }, ln = ["aria-expanded"], rn = {
   key: 0,
   class: "layerboard-subtitle"
-}, on = { class: "layerboard-mobile-menu-content" }, nn = { class: "layerboard-main" }, ln = {
+}, sn = { class: "layerboard-mobile-menu-content" }, cn = { class: "layerboard-main" }, un = {
   key: 0,
   class: "layerboard-loading"
-}, an = {
+}, dn = {
   key: 1,
   class: "layerboard-error"
-}, rn = { key: 0 }, sn = { key: 1 }, cn = { class: "layerboard-modal" }, un = /* @__PURE__ */ we({
+}, fn = { key: 0 }, pn = { key: 1 }, yn = /* @__PURE__ */ Se({
   __name: "Layerboard",
   props: {
     title: {},
@@ -1775,331 +1771,375 @@ const en = { class: "layerboard-layout" }, tn = {
     initialCenter: {}
   },
   emits: ["configs-loaded", "load-error", "zoom"],
-  setup(e, { expose: n, emit: o }) {
-    const t = e, l = o, a = $([]), c = $(!0), p = $(null), d = $(12), S = $(""), y = $(/* @__PURE__ */ new Set()), h = $({}), s = $(/* @__PURE__ */ new Set()), v = $({}), E = $({}), m = $(/* @__PURE__ */ new Set()), C = $({});
-    function g() {
-      const b = {};
-      for (const P of t.tiledLayers)
-        b[P.id] = P.opacity ?? 1;
-      C.value = b;
-    }
-    function w(b) {
-      m.value.has(b) ? m.value.delete(b) : m.value.add(b), m.value = new Set(m.value);
-    }
-    function z(b, P) {
-      P ? m.value.add(b) : m.value.delete(b), m.value = new Set(m.value);
-    }
-    function M(b, P) {
-      C.value = { ...C.value, [b]: P };
-    }
-    const N = t.dataSources.length > 0 ? Yo(t.dataSources) : null, q = R(() => N?.state.value ?? {}), ce = R(() => N?.isLoading.value ?? !1);
-    function Le(b) {
-      return N?.getData(b) ?? null;
-    }
-    function Se(b) {
-      return N?.refetch(b) ?? Promise.resolve();
-    }
-    U("layerboard-layers", V(a)), U("layerboard-visible", y), U("layerboard-opacities", h), U("layerboard-loading", V(s)), U("layerboard-errors", V(v)), U("layerboard-zoom", V(d)), U("layerboard-toggle-layer", Ce), U("layerboard-set-layer-visible", de), U("layerboard-set-layers-visible", ke), U("layerboard-set-opacity", fe), U("layerboard-tiled-layers", V(R(() => t.tiledLayers))), U("layerboard-visible-tiled", m), U("layerboard-tiled-opacities", C), U("layerboard-toggle-tiled", w), U("layerboard-set-tiled-opacity", M), U("layerboard-set-tiled-visible", z), U("layerboard-data-sources-state", q), U("layerboard-data-sources-loading", ce), U("layerboard-get-data-source", Le), U("layerboard-refetch-data-source", Se);
-    const je = R(() => ({
-      backgroundColor: t.themeColor
-    })), qe = R(() => ({
-      backgroundColor: t.themeColor
-    })), Me = R(() => ({
-      backgroundColor: t.themeColor
-    })), Ie = R(() => ({
-      width: ye.value ? "0" : t.sidebarWidth
+  setup(e, { expose: n, emit: t }) {
+    const o = e, a = t, l = C([]), u = C(!0), b = C(null), y = C(12), P = C(""), v = C(/* @__PURE__ */ new Set()), S = C({}), r = C(/* @__PURE__ */ new Set()), h = C({}), w = C({}), g = C(/* @__PURE__ */ new Set()), f = C({});
+    function c() {
+      const k = {};
+      for (const $ of o.tiledLayers)
+        k[$.id] = $.opacity ?? 1;
+      f.value = k;
+    }
+    function L(k) {
+      g.value.has(k) ? g.value.delete(k) : g.value.add(k), g.value = new Set(g.value);
+    }
+    function F(k, $) {
+      $ ? g.value.add(k) : g.value.delete(k), g.value = new Set(g.value);
+    }
+    function T(k, $) {
+      f.value = { ...f.value, [k]: $ };
+    }
+    const B = o.dataSources.length > 0 ? nn(o.dataSources) : null, q = I(() => B?.state.value ?? {}), fe = I(() => B?.isLoading.value ?? !1);
+    function $e(k) {
+      return B?.getData(k) ?? null;
+    }
+    function xe(k) {
+      return B?.refetch(k) ?? Promise.resolve();
+    }
+    U("layerboard-layers", j(l)), U("layerboard-visible", v), U("layerboard-opacities", S), U("layerboard-loading", j(r)), U("layerboard-errors", j(h)), U("layerboard-zoom", j(y)), U("layerboard-toggle-layer", Pe), U("layerboard-set-layer-visible", ve), U("layerboard-set-layers-visible", _e), U("layerboard-set-opacity", be), U("layerboard-tiled-layers", j(I(() => o.tiledLayers))), U("layerboard-visible-tiled", g), U("layerboard-tiled-opacities", f), U("layerboard-toggle-tiled", L), U("layerboard-set-tiled-opacity", T), U("layerboard-set-tiled-visible", F), U("layerboard-data-sources-state", q), U("layerboard-data-sources-loading", fe), U("layerboard-get-data-source", $e), U("layerboard-refetch-data-source", xe);
+    const Xe = I(() => ({
+      backgroundColor: o.themeColor
+    })), Ye = I(() => ({
+      backgroundColor: o.themeColor
+    })), Oe = I(() => ({
+      backgroundColor: o.themeColor
+    })), Ae = I(() => ({
+      width: ie.value ? "0" : o.sidebarWidth
     }));
-    async function Ee() {
+    async function Ie() {
       try {
-        c.value = !0, p.value = null;
-        const P = (await lt(t.webMapId)).map((Z) => {
-          const Q = t.layerStyleOverrides[Z.id];
-          return Q ? (console.log(`[Layerboard] Applying style override for layer: ${Z.id}`), {
-            ...Z,
-            paint: Q.paint ?? Z.paint,
-            outlinePaint: Q.outlinePaint ?? Z.outlinePaint,
-            legend: Q.legend ?? Z.legend,
-            type: Q.type ?? Z.type
-          }) : Z;
+        u.value = !0, b.value = null;
+        const $ = (await pt(o.webMapId)).map((A) => {
+          const ae = o.layerStyleOverrides[A.id];
+          return ae ? {
+            ...A,
+            paint: ae.paint ?? A.paint,
+            outlinePaint: ae.outlinePaint ?? A.outlinePaint,
+            legend: ae.legend ?? A.legend,
+            type: ae.type ?? A.type
+          } : A;
         });
-        a.value = P.map((Z) => ({
-          config: Z,
-          component: Z.type
+        l.value = $.map((A) => ({
+          config: A,
+          component: A.type
         }));
-        const ae = {};
-        P.forEach((Z) => {
-          ae[Z.id] = Z.opacity ?? 1;
-        }), h.value = ae, console.log(`[Layerboard] Loaded ${P.length} layer configs from WebMap ${t.webMapId}`), console.log("[Layerboard] Layer IDs:", P.map((Z) => Z.id)), l("configs-loaded", P);
-      } catch (b) {
-        console.error("[Layerboard] Failed to load layer configs:", b);
-        const P = b instanceof Error ? b.message : "Failed to load layer configurations";
-        p.value = P, l("load-error", P);
+        const Y = {};
+        $.forEach((A) => {
+          Y[A.id] = A.opacity ?? 1;
+        }), S.value = Y, a("configs-loaded", $);
+      } catch (k) {
+        const $ = k instanceof Error ? k.message : "Failed to load layer configurations";
+        b.value = $, a("load-error", $);
       } finally {
-        c.value = !1;
+        u.value = !1;
       }
     }
-    function Oe(b) {
-      let P = b.split("?")[0] || b;
-      return P = P.replace(/\/query$/, ""), P = P.replace(/\/$/, ""), P.toLowerCase();
+    function Ve(k) {
+      let $ = k.split("?")[0] || k;
+      return $ = $.replace(/\/query$/, ""), $ = $.replace(/\/$/, ""), $.toLowerCase();
     }
-    async function Ge() {
-      if (t.fetchMetadata)
+    async function et() {
+      if (o.fetchMetadata)
         try {
-          const b = "https://phl.carto.com/api/v2/sql?q=" + encodeURIComponent(
+          const k = "https://phl.carto.com/api/v2/sql?q=" + encodeURIComponent(
             "select url_text, COALESCE(representation, '') as representation from phl.knack_metadata_reps_endpoints_join WHERE ( format = 'API' OR format = 'GeoService' ) AND url_text IS NOT null"
-          ), P = await fetch(b);
-          if (!P.ok) return;
-          const ae = await P.json(), Z = {};
-          for (const Q of ae.rows || [])
-            if (Q.url_text && Q.representation) {
-              const Ke = Oe(Q.url_text), Xe = `https://metadata.phila.gov/#home/representationdetails/${Q.representation}/`;
-              Z[Ke] = Xe;
+          ), $ = await fetch(k);
+          if (!$.ok) return;
+          const Y = await $.json(), A = {};
+          for (const ae of Y.rows || [])
+            if (ae.url_text && ae.representation) {
+              const qe = Ve(ae.url_text), lt = `https://metadata.phila.gov/#home/representationdetails/${ae.representation}/`;
+              A[qe] = lt;
             }
-          E.value = Z;
-        } catch (b) {
-          console.error("[Layerboard] Error fetching metadata:", b);
+          w.value = A;
+        } catch {
         }
     }
-    function He(b) {
-      d.value = b, l("zoom", b);
+    function tt(k) {
+      y.value = k, a("zoom", k);
     }
-    function Ce(b) {
-      y.value.has(b) ? y.value.delete(b) : y.value.add(b), y.value = new Set(y.value);
+    function Pe(k) {
+      v.value.has(k) ? v.value.delete(k) : v.value.add(k), v.value = new Set(v.value);
     }
-    function de(b, P) {
-      P ? y.value.add(b) : y.value.delete(b), y.value = new Set(y.value);
+    function ve(k, $) {
+      $ ? v.value.add(k) : v.value.delete(k), v.value = new Set(v.value);
     }
-    function ke(b, P) {
-      for (const ae of b)
-        P ? y.value.add(ae) : y.value.delete(ae);
-      y.value = new Set(y.value);
+    function _e(k, $) {
+      for (const Y of k)
+        $ ? v.value.add(Y) : v.value.delete(Y);
+      v.value = new Set(v.value);
     }
-    function fe(b, P) {
-      h.value = { ...h.value, [b]: P };
+    function be(k, $) {
+      S.value = { ...S.value, [k]: $ };
     }
-    function Je(b, P) {
-      P ? s.value.add(b) : s.value.delete(b), s.value = new Set(s.value);
+    function ot(k, $) {
+      $ ? r.value.add(k) : r.value.delete(k), r.value = new Set(r.value);
     }
-    function oe(b, P) {
-      if (P)
-        v.value = { ...v.value, [b]: P };
+    function oe(k, $) {
+      if ($)
+        h.value = { ...h.value, [k]: $ };
       else {
-        const { [b]: ae, ...Z } = v.value;
-        v.value = Z;
+        const { [k]: Y, ...A } = h.value;
+        h.value = A;
       }
     }
-    function pe(b) {
-      S.value = b;
+    function we(k) {
+      P.value = k;
+    }
+    const ne = C(null), ke = C(null), nt = C(null), Ue = C(null), Re = C(null), We = C(null), re = C("map");
+    function Ce() {
+      re.value = re.value === "sidebar" ? "map" : "sidebar", Ze(() => {
+        re.value === "sidebar" && ne.value?.focus();
+      });
     }
-    const J = $("map");
-    function $e() {
-      J.value = J.value === "sidebar" ? "map" : "sidebar";
+    const se = C(!1);
+    function je() {
+      se.value = !se.value, se.value && Ze(() => {
+        Ue.value?.focus();
+      });
     }
-    const ve = $(!1);
-    function Qe() {
-      ve.value = !ve.value;
+    function Ee() {
+      se.value = !1, Ze(() => {
+        ke.value?.focus();
+      });
     }
-    function Re() {
-      ve.value = !1;
+    const ie = C(!1);
+    function it() {
+      ie.value = !ie.value;
     }
-    const ye = $(!1);
-    function Pe() {
-      ye.value = !ye.value;
+    const pe = C(!1), Le = C(null);
+    function ye() {
+      Le.value = document.activeElement, pe.value = !0, Ze(() => {
+        We.value?.focus();
+      });
     }
-    const te = $(!1);
-    function be() {
-      te.value = !0;
+    function ue() {
+      pe.value = !1, Ze(() => {
+        Le.value?.focus(), Le.value = null;
+      });
     }
-    function le() {
-      te.value = !1;
+    function at(k) {
+      k.target.classList.contains("layerboard-modal-backdrop") && ue();
     }
-    function De(b) {
-      b.target.classList.contains("layerboard-modal-backdrop") && le();
+    function de(k) {
+      if (k.key === "Escape") {
+        ue();
+        return;
+      }
+      if (k.key === "Tab" && Re.value) {
+        const $ = Array.from(Re.value.querySelectorAll(
+          'a[href], button:not([disabled]), textarea, input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        ));
+        if ($.length === 0) return;
+        const Y = $[0], A = $[$.length - 1];
+        k.shiftKey ? document.activeElement === Y && (k.preventDefault(), A.focus()) : document.activeElement === A && (k.preventDefault(), Y.focus());
+      }
     }
-    return U("layerboard-open-modal", be), U("layerboard-close-modal", le), U("layerboard-is-modal-open", V(te)), n({
+    U("layerboard-open-modal", ye), U("layerboard-close-modal", ue), U("layerboard-is-modal-open", j(pe)), n({
       /** Layer configurations */
-      layerList: a,
+      layerList: l,
       /** Set of visible layer IDs */
-      visibleLayers: y,
+      visibleLayers: v,
       /** Layer opacity values */
-      layerOpacities: h,
+      layerOpacities: S,
       /** Set of currently loading layer IDs */
-      loadingLayers: s,
+      loadingLayers: r,
       /** Map of layer errors by ID */
-      layerErrors: v,
+      layerErrors: h,
       /** Current map zoom level */
-      currentZoom: d,
+      currentZoom: y,
       /** Toggle a layer's visibility */
-      toggleLayer: Ce,
+      toggleLayer: Pe,
       /** Set a layer's visibility explicitly */
-      setLayerVisible: de,
+      setLayerVisible: ve,
       /** Set multiple layers' visibility at once */
-      setLayersVisible: ke,
+      setLayersVisible: _e,
       /** Set a layer's opacity */
-      setLayerOpacity: fe,
+      setLayerOpacity: be,
       /** Reload layer configurations */
-      reloadConfigs: Ee,
+      reloadConfigs: Ie,
       /** Clear configuration cache */
-      clearCache: () => Jo(t.webMapId),
+      clearCache: () => Yo(o.webMapId),
       // Tiled layer APIs
       /** Set of visible tiled layer IDs */
-      visibleTiledLayers: m,
+      visibleTiledLayers: g,
       /** Tiled layer opacity values */
-      tiledLayerOpacities: C,
+      tiledLayerOpacities: f,
       /** Toggle a tiled layer's visibility */
-      toggleTiledLayer: w,
+      toggleTiledLayer: L,
       /** Set a tiled layer's visibility explicitly */
-      setTiledLayerVisible: z,
+      setTiledLayerVisible: F,
       /** Set a tiled layer's opacity */
-      setTiledLayerOpacity: M,
+      setTiledLayerOpacity: T,
       // Data source APIs
       /** State of all data sources */
       dataSourcesState: q,
       /** Whether any data source is loading */
-      dataSourcesLoading: ce,
+      dataSourcesLoading: fe,
       /** Get data from a specific data source */
-      getDataSourceData: Le,
+      getDataSourceData: $e,
       /** Refetch a specific data source */
-      refetchDataSource: Se,
+      refetchDataSource: xe,
       // Modal APIs
       /** Whether the modal is currently open */
-      isModalOpen: te,
+      isModalOpen: pe,
       /** Open the modal */
-      openModal: be,
+      openModal: ye,
       /** Close the modal */
-      closeModal: le
-    }), Ze(() => {
-      Ee(), Ge(), g();
-    }), (b, P) => (f(), L("div", en, [
-      F("header", {
+      closeModal: ue
+    });
+    function De(k) {
+      k.key === "Escape" && se.value && Ee();
+    }
+    return He(() => {
+      Ie(), et(), c(), document.addEventListener("keydown", De);
+    }), It(() => {
+      document.removeEventListener("keydown", De);
+    }), (k, $) => (d(), m("div", an, [
+      $[5] || ($[5] = x("a", {
+        href: "#main-content",
+        class: "skip-to-main-content-link"
+      }, "Skip to main content", -1)),
+      x("header", {
         class: "layerboard-header",
-        style: Y(je.value)
+        style: H(Xe.value)
       }, [
-        P[1] || (P[1] = F("a", {
+        $[1] || ($[1] = x("a", {
           href: "https://www.phila.gov/",
           class: "layerboard-logo layerboard-desktop-only"
         }, [
-          F("img", {
+          x("img", {
             src: "https://standards.phila.gov/img/logo/city-of-philadelphia-yellow-white.png",
             alt: "City of Philadelphia"
           })
         ], -1)),
-        P[2] || (P[2] = F("span", { class: "layerboard-header-divider layerboard-desktop-only" }, null, -1)),
-        F("button", {
+        $[2] || ($[2] = x("span", { class: "layerboard-header-divider layerboard-desktop-only" }, null, -1)),
+        x("button", {
+          ref_key: "hamburgerRef",
+          ref: ke,
           class: "layerboard-hamburger layerboard-mobile-only",
-          onClick: Qe,
+          "aria-expanded": se.value,
+          onClick: je,
           "aria-label": "Toggle menu"
         }, [
-          ee(_(me), {
-            "icon-definition": _(mo),
+          K(O(ge), {
+            "icon-definition": O(wo),
             size: "medium",
             decorative: ""
           }, null, 8, ["icon-definition"])
-        ]),
-        se(b.$slots, "header", {}, () => [
-          F("h1", null, j(e.title), 1),
-          e.subtitle ? (f(), L("span", tn, j(e.subtitle), 1)) : I("", !0)
+        ], 8, ln),
+        ce(k.$slots, "header", {}, () => [
+          x("h1", null, W(e.title), 1),
+          e.subtitle ? (d(), m("span", rn, W(e.subtitle), 1)) : z("", !0)
         ], !0),
-        ve.value ? (f(), L("div", {
+        se.value ? (d(), m("div", {
           key: 0,
           class: "layerboard-mobile-menu",
-          style: Y({ backgroundColor: e.themeColor })
+          style: H({ backgroundColor: e.themeColor })
         }, [
-          F("div", on, [
-            se(b.$slots, "footer", {
-              openModal: be,
-              closeModal: le,
-              isModalOpen: te.value
+          x("div", sn, [
+            ce(k.$slots, "footer", {
+              openModal: ye,
+              closeModal: ue,
+              isModalOpen: pe.value
             }, () => [
-              P[0] || (P[0] = he(" City of Philadelphia ", -1))
+              $[0] || ($[0] = me(" City of Philadelphia ", -1))
             ], !0)
           ]),
-          F("button", {
+          x("button", {
+            ref_key: "mobileMenuCloseRef",
+            ref: Ue,
             class: "layerboard-mobile-menu-close",
-            onClick: Re,
+            onClick: Ee,
             "aria-label": "Close menu"
           }, [
-            ee(_(me), {
-              "icon-definition": _(ht),
+            K(O(ge), {
+              "icon-definition": O(kt),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
-          ])
-        ], 4)) : I("", !0),
-        ve.value ? (f(), L("div", {
+          ], 512)
+        ], 4)) : z("", !0),
+        se.value ? (d(), m("div", {
           key: 1,
           class: "layerboard-mobile-menu-backdrop",
-          onClick: Re
-        })) : I("", !0)
+          onClick: Ee
+        })) : z("", !0)
       ], 4),
-      F("div", nn, [
-        c.value ? (f(), L("div", ln, [
-          F("div", {
+      x("div", cn, [
+        u.value ? (d(), m("div", un, [
+          x("div", {
             class: "layerboard-spinner",
-            style: Y({ borderTopColor: e.themeColor })
+            style: H({ borderTopColor: e.themeColor })
           }, null, 4),
-          F("p", null, "Loading " + j(e.title) + "...", 1)
-        ])) : p.value ? (f(), L("div", an, [
-          P[3] || (P[3] = F("h2", null, "Error Loading Layers", -1)),
-          F("p", null, j(p.value), 1),
-          F("button", {
+          x("p", null, "Loading " + W(e.title) + "...", 1)
+        ])) : b.value ? (d(), m("div", dn, [
+          $[3] || ($[3] = x("h2", null, "Error Loading Layers", -1)),
+          x("p", null, W(b.value), 1),
+          x("button", {
             class: "layerboard-retry-button",
-            style: Y({ backgroundColor: e.themeColor }),
-            onClick: Ee
+            style: H({ backgroundColor: e.themeColor }),
+            onClick: Ie
           }, " Retry ", 4)
-        ])) : (f(), L(ie, { key: 2 }, [
-          F("aside", {
-            class: ne(["layerboard-sidebar", { "is-active": J.value === "sidebar" }]),
-            style: Y(Ie.value)
+        ])) : (d(), m(ee, { key: 2 }, [
+          x("aside", {
+            ref_key: "sidebarRef",
+            ref: ne,
+            id: "main-content",
+            class: te(["layerboard-sidebar", { "is-active": re.value === "sidebar" }]),
+            style: H(Ae.value),
+            "aria-label": "Map layers",
+            tabindex: "-1"
           }, [
-            se(b.$slots, "sidebar", {
-              layers: a.value,
-              visibleLayers: y.value,
-              layerOpacities: h.value,
-              loadingLayers: s.value,
-              layerErrors: v.value,
-              currentZoom: d.value,
-              toggleLayer: Ce,
-              setLayerVisible: de,
-              setLayersVisible: ke,
-              setOpacity: fe,
+            ce(k.$slots, "sidebar", {
+              layers: l.value,
+              visibleLayers: v.value,
+              layerOpacities: S.value,
+              loadingLayers: r.value,
+              layerErrors: h.value,
+              currentZoom: y.value,
+              toggleLayer: Pe,
+              setLayerVisible: ve,
+              setLayersVisible: _e,
+              setOpacity: be,
               tiledLayers: e.tiledLayers,
-              visibleTiledLayers: m.value,
-              tiledLayerOpacities: C.value,
-              toggleTiledLayer: w,
-              setTiledLayerVisible: z,
-              setTiledLayerOpacity: M,
+              visibleTiledLayers: g.value,
+              tiledLayerOpacities: f.value,
+              toggleTiledLayer: L,
+              setTiledLayerVisible: F,
+              setTiledLayerOpacity: T,
               dataSourcesState: q.value,
-              dataSourcesLoading: ce.value,
-              getDataSource: Le,
-              refetchDataSource: Se
+              dataSourcesLoading: fe.value,
+              getDataSource: $e,
+              refetchDataSource: xe
             }, () => [
-              e.showDefaultSidebar ? (f(), X(Ro, {
+              e.showDefaultSidebar ? (d(), X(No, {
                 key: 0,
-                "layer-list": a.value,
-                "visible-layers": y.value,
-                "layer-opacities": h.value,
-                "loading-layers": s.value,
-                "layer-errors": v.value,
-                "current-zoom": d.value,
-                "search-query": S.value,
-                "layer-metadata": E.value,
-                onToggleLayer: Ce,
-                onSetOpacity: fe,
-                onUpdateSearch: pe
-              }, null, 8, ["layer-list", "visible-layers", "layer-opacities", "loading-layers", "layer-errors", "current-zoom", "search-query", "layer-metadata"])) : I("", !0)
+                "layer-list": l.value,
+                "visible-layers": v.value,
+                "layer-opacities": S.value,
+                "loading-layers": r.value,
+                "layer-errors": h.value,
+                "current-zoom": y.value,
+                "search-query": P.value,
+                "layer-metadata": w.value,
+                onToggleLayer: Pe,
+                onSetOpacity: be,
+                onUpdateSearch: we
+              }, null, 8, ["layer-list", "visible-layers", "layer-opacities", "loading-layers", "layer-errors", "current-zoom", "search-query", "layer-metadata"])) : z("", !0)
             ], !0)
           ], 6),
-          F("div", {
-            class: ne(["layerboard-map", { "is-active": J.value === "map" }])
+          x("div", {
+            role: "main",
+            "aria-label": "Map",
+            class: te(["layerboard-map", { "is-active": re.value === "map" }])
           }, [
-            ee(Xt, {
-              "visible-layers": y.value,
-              "layer-opacities": h.value,
-              "layer-list": a.value,
+            K(to, {
+              "visible-layers": v.value,
+              "layer-opacities": S.value,
+              "layer-list": l.value,
               "tiled-layers": e.tiledLayers,
-              "visible-tiled-layers": m.value,
-              "tiled-layer-opacities": C.value,
+              "visible-tiled-layers": g.value,
+              "tiled-layer-opacities": f.value,
               "cyclomedia-config": e.cyclomediaConfig,
               "pictometry-credentials": e.pictometryCredentials,
               "basemap-control-position": e.basemapControlPosition,
@@ -2111,70 +2151,81 @@ const en = { class: "layerboard-layout" }, tn = {
               "pictometry-button-position": e.pictometryButtonPosition,
               "initial-zoom": e.initialZoom,
               "initial-center": e.initialCenter,
-              onZoom: He,
-              onLayerLoading: Je,
+              onZoom: tt,
+              onLayerLoading: ot,
               onLayerError: oe
             }, null, 8, ["visible-layers", "layer-opacities", "layer-list", "tiled-layers", "visible-tiled-layers", "tiled-layer-opacities", "cyclomedia-config", "pictometry-credentials", "basemap-control-position", "navigation-control-position", "geolocation-control-position", "search-control-position", "draw-control-position", "cyclomedia-button-position", "pictometry-button-position", "initial-zoom", "initial-center"])
           ], 2),
-          F("button", {
-            class: ne(["layerboard-sidebar-toggle", { "is-collapsed": ye.value }]),
-            style: Y({ left: ye.value ? "0" : t.sidebarWidth }),
-            onClick: Pe,
+          x("button", {
+            class: te(["layerboard-sidebar-toggle", { "is-collapsed": ie.value }]),
+            style: H({ left: ie.value ? "0" : o.sidebarWidth }),
+            onClick: it,
             "aria-label": "Toggle sidebar"
           }, [
-            ee(_(me), {
-              "icon-definition": ye.value ? _(yo) : _(go),
+            K(O(ge), {
+              "icon-definition": ie.value ? O(vo) : O(bo),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
           ], 6)
         ], 64))
       ]),
-      F("button", {
+      x("button", {
+        ref_key: "mobileToggleRef",
+        ref: nt,
         class: "layerboard-mobile-toggle",
-        style: Y(Me.value),
-        onClick: $e
+        style: H(Oe.value),
+        onClick: Ce
       }, [
-        J.value === "map" ? (f(), L("span", rn, j(e.sidebarLabel), 1)) : (f(), L("span", sn, j(e.mapLabel), 1))
+        re.value === "map" ? (d(), m("span", fn, W(e.sidebarLabel), 1)) : (d(), m("span", pn, W(e.mapLabel), 1))
       ], 4),
-      F("footer", {
+      x("footer", {
         class: "layerboard-footer",
-        style: Y(qe.value)
+        style: H(Ye.value)
       }, [
-        se(b.$slots, "footer", {
-          openModal: be,
-          closeModal: le,
-          isModalOpen: te.value
+        ce(k.$slots, "footer", {
+          openModal: ye,
+          closeModal: ue,
+          isModalOpen: pe.value
         }, () => [
-          P[4] || (P[4] = he(" City of Philadelphia ", -1))
+          $[4] || ($[4] = me(" City of Philadelphia ", -1))
         ], !0)
       ], 4),
-      te.value ? (f(), L("div", {
+      pe.value ? (d(), m("div", {
         key: 0,
         class: "layerboard-modal-backdrop",
-        onClick: De
+        onClick: at,
+        onKeydown: de
       }, [
-        F("div", cn, [
-          F("button", {
+        x("div", {
+          ref_key: "modalRef",
+          ref: Re,
+          class: "layerboard-modal",
+          role: "dialog",
+          "aria-modal": "true"
+        }, [
+          x("button", {
+            ref_key: "modalCloseRef",
+            ref: We,
             class: "layerboard-modal-close",
-            onClick: le,
+            onClick: ue,
             "aria-label": "Close modal"
           }, [
-            ee(_(me), {
-              "icon-definition": _(ht),
+            K(O(ge), {
+              "icon-definition": O(kt),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
-          ]),
-          se(b.$slots, "modal", { closeModal: le }, void 0, !0)
-        ])
-      ])) : I("", !0)
+          ], 512),
+          ce(k.$slots, "modal", { closeModal: ue }, void 0, !0)
+        ], 512)
+      ], 32)) : z("", !0)
     ]));
   }
-}), Nn = /* @__PURE__ */ _e(un, [["__scopeId", "data-v-54d854f8"]]), dn = ["aria-expanded"], fn = {
+}), ti = /* @__PURE__ */ Fe(yn, [["__scopeId", "data-v-b6286f9f"]]), gn = ["aria-expanded"], hn = {
   key: 0,
   class: "topic-icon"
-}, pn = { class: "topic-title" }, yn = { class: "topic-content" }, gn = /* @__PURE__ */ we({
+}, mn = { class: "topic-title" }, vn = /* @__PURE__ */ Se({
   __name: "TopicAccordion",
   props: {
     title: {},
@@ -2185,40 +2236,42 @@ const en = { class: "layerboard-layout" }, tn = {
   },
   emits: ["toggle", "layerChange"],
   setup(e, { emit: n }) {
-    const o = e, t = n, l = $(o.expanded);
-    xe(
-      () => o.expanded,
-      (c) => {
-        l.value = c;
+    const t = e, o = n, a = C(t.expanded), l = `topic-panel-${vt()}`, u = `topic-header-${vt()}`;
+    Me(
+      () => t.expanded,
+      (y) => {
+        a.value = y;
       }
     );
-    function a() {
-      l.value = !l.value, t("toggle", l.value);
+    function b() {
+      a.value = !a.value, o("toggle", a.value);
     }
-    return (c, p) => {
-      const d = _t("font-awesome-icon");
-      return f(), L("div", {
-        class: ne(["topic-accordion", { "is-expanded": l.value }])
+    return (y, P) => {
+      const v = Rt("font-awesome-icon");
+      return d(), m("div", {
+        class: te(["topic-accordion", { "is-expanded": a.value }])
       }, [
-        F("button", {
-          class: ne(["topic-header", e.headerClass]),
+        x("button", {
+          id: u,
+          class: te(["topic-header", e.headerClass]),
           type: "button",
-          "aria-expanded": l.value,
-          onClick: a
+          "aria-expanded": a.value,
+          "aria-controls": l,
+          onClick: b
         }, [
-          e.icon || c.$slots.icon ? (f(), L("span", fn, [
-            se(c.$slots, "icon", {}, () => [
-              e.icon ? (f(), X(d, {
+          e.icon || y.$slots.icon ? (d(), m("span", hn, [
+            ce(y.$slots, "icon", {}, () => [
+              e.icon ? (d(), X(v, {
                 key: 0,
                 icon: ["fas", e.icon]
-              }, null, 8, ["icon"])) : I("", !0)
+              }, null, 8, ["icon"])) : z("", !0)
             ], !0)
-          ])) : I("", !0),
-          F("span", pn, j(e.title), 1),
-          F("span", {
-            class: ne(["topic-chevron", { "is-rotated": l.value }])
-          }, [...p[0] || (p[0] = [
-            F("svg", {
+          ])) : z("", !0),
+          x("span", mn, W(e.title), 1),
+          x("span", {
+            class: te(["topic-chevron", { "is-rotated": a.value }])
+          }, [...P[0] || (P[0] = [
+            x("svg", {
               xmlns: "http://www.w3.org/2000/svg",
               width: "20",
               height: "20",
@@ -2227,44 +2280,50 @@ const en = { class: "layerboard-layout" }, tn = {
               stroke: "currentColor",
               "stroke-width": "2",
               "stroke-linecap": "round",
-              "stroke-linejoin": "round"
+              "stroke-linejoin": "round",
+              "aria-hidden": "true"
             }, [
-              F("polyline", { points: "6 9 12 15 18 9" })
+              x("polyline", { points: "6 9 12 15 18 9" })
             ], -1)
           ])], 2)
-        ], 10, dn),
-        St(F("div", yn, [
-          se(c.$slots, "default", {}, () => [
-            p[1] || (p[1] = F("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
+        ], 10, gn),
+        _t(x("div", {
+          id: l,
+          role: "region",
+          "aria-labelledby": u,
+          class: "topic-content"
+        }, [
+          ce(y.$slots, "default", {}, () => [
+            P[1] || (P[1] = x("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
           ], !0)
         ], 512), [
-          [It, l.value]
+          [Dt, a.value]
         ])
       ], 2);
     };
   }
-}), Zn = /* @__PURE__ */ _e(gn, [["__scopeId", "data-v-fb48c75b"]]), mn = { class: "layer-checkbox-set" }, hn = ["checked", "disabled", "onChange"], vn = { class: "layer-title" }, bn = {
+}), oi = /* @__PURE__ */ Fe(vn, [["__scopeId", "data-v-d477f7ce"]]), bn = { class: "layer-checkbox-set" }, wn = ["checked", "disabled", "onChange"], Ln = { class: "layer-title" }, Sn = {
   key: 0,
   class: "loading-indicator"
-}, wn = ["title"], Ln = {
+}, kn = ["aria-label"], Cn = {
   key: 2,
   class: "zoom-indicator"
-}, Sn = { class: "layer-title" }, Cn = {
+}, $n = { class: "layer-title" }, xn = {
   key: 0,
   class: "loading-indicator"
-}, kn = ["title"], $n = {
+}, Pn = ["aria-label"], _n = {
   key: 2,
   class: "zoom-indicator"
-}, Pn = {
+}, En = {
   key: 2,
   class: "opacity-control"
-}, xn = { class: "opacity-label" }, Tn = ["value", "onInput"], Fn = {
+}, Mn = ["for"], Tn = ["id", "value", "aria-label", "onInput"], zn = {
   key: 3,
   class: "layer-legend"
-}, Mn = { class: "legend-label" }, En = {
+}, Fn = { class: "legend-label" }, On = {
   key: 0,
   class: "empty-state"
-}, zn = /* @__PURE__ */ we({
+}, In = /* @__PURE__ */ Se({
   __name: "LayerCheckboxSet",
   props: {
     layers: {},
@@ -2278,326 +2337,472 @@ const en = { class: "layerboard-layout" }, tn = {
   },
   emits: ["toggleLayer", "setOpacity"],
   setup(e, { emit: n }) {
-    const o = e, t = n;
-    function l(m) {
-      return o.visibleLayerIds.has(m);
+    const t = e, o = n;
+    function a(g) {
+      return t.visibleLayerIds.has(g);
     }
-    function a(m) {
-      return o.layerOpacities[m] ?? 1;
+    function l(g) {
+      return t.layerOpacities[g] ?? 1;
     }
-    function c(m) {
-      return o.loadingLayerIds.has(m);
+    function u(g) {
+      return t.loadingLayerIds.has(g);
     }
-    function p(m) {
-      return o.layerErrors[m] || null;
+    function b(g) {
+      return t.layerErrors[g] || null;
     }
-    function d(m) {
-      const C = o.currentZoom, g = m.minZoom, w = m.maxZoom;
-      return !(g !== void 0 && C < g || w !== void 0 && C > w);
+    function y(g) {
+      const f = t.currentZoom, c = g.minZoom, L = g.maxZoom;
+      return !(c !== void 0 && f < c || L !== void 0 && f > L);
     }
-    function S(m) {
-      return m.displayOptions?.shouldShowCheckbox !== !1;
+    function P(g) {
+      return g.displayOptions?.shouldShowCheckbox !== !1;
     }
-    function y(m) {
-      return o.showOpacity ? m.displayOptions?.shouldShowSlider !== !1 : !1;
+    function v(g) {
+      return t.showOpacity ? g.displayOptions?.shouldShowSlider !== !1 : !1;
     }
-    function h(m) {
-      return o.showLegend ? m.displayOptions?.shouldShowLegendBox !== !1 : !1;
+    function S(g) {
+      return t.showLegend ? g.displayOptions?.shouldShowLegendBox !== !1 : !1;
     }
-    function s(m) {
-      return m.displayOptions?.layerNameChange || m.title;
+    function r(g) {
+      return g.displayOptions?.layerNameChange || g.title;
     }
-    function v(m) {
-      t("toggleLayer", m);
+    function h(g) {
+      o("toggleLayer", g);
     }
-    function E(m, C) {
-      const g = C.target;
-      t("setOpacity", m, parseFloat(g.value));
+    function w(g, f) {
+      const c = f.target;
+      o("setOpacity", g, parseFloat(c.value));
     }
-    return (m, C) => (f(), L("div", mn, [
-      (f(!0), L(ie, null, re(e.layers, (g) => (f(), L("div", {
-        key: g.id,
+    return (g, f) => (d(), m("div", bn, [
+      (d(!0), m(ee, null, le(e.layers, (c) => (d(), m("div", {
+        key: c.id,
         class: "layer-item"
       }, [
-        S(g) ? (f(), L("label", {
+        P(c) ? (d(), m("label", {
           key: 0,
-          class: ne(["layer-checkbox", {
-            "layer-unavailable": !d(g),
-            "layer-error": p(g.id)
+          class: te(["layer-checkbox", {
+            "layer-unavailable": !y(c),
+            "layer-error": b(c.id)
           }])
         }, [
-          F("input", {
+          x("input", {
             type: "checkbox",
-            checked: l(g.id),
-            disabled: !d(g),
-            onChange: (w) => v(g.id)
-          }, null, 40, hn),
-          F("span", vn, [
-            he(j(s(g)) + " ", 1),
-            c(g.id) ? (f(), L("span", bn, " Loading... ")) : I("", !0),
-            p(g.id) ? (f(), L("span", {
+            checked: a(c.id),
+            disabled: !y(c),
+            onChange: (L) => h(c.id)
+          }, null, 40, wn),
+          x("span", Ln, [
+            me(W(r(c)) + " ", 1),
+            u(c.id) ? (d(), m("span", Sn, " Loading... ")) : z("", !0),
+            b(c.id) ? (d(), m("span", {
               key: 1,
               class: "error-indicator",
-              title: p(g.id) || ""
-            }, " Error ", 8, wn)) : I("", !0),
-            d(g) ? I("", !0) : (f(), L("span", Ln, " (zoom in) "))
+              "aria-label": b(c.id) || "Error"
+            }, " Error ", 8, kn)) : z("", !0),
+            y(c) ? z("", !0) : (d(), m("span", Cn, " (zoom in) "))
           ])
-        ], 2)) : (f(), L("div", {
+        ], 2)) : (d(), m("div", {
           key: 1,
-          class: ne(["layer-label-only", {
-            "layer-unavailable": !d(g),
-            "layer-error": p(g.id)
+          class: te(["layer-label-only", {
+            "layer-unavailable": !y(c),
+            "layer-error": b(c.id)
           }])
         }, [
-          F("span", Sn, [
-            he(j(s(g)) + " ", 1),
-            c(g.id) ? (f(), L("span", Cn, " Loading... ")) : I("", !0),
-            p(g.id) ? (f(), L("span", {
+          x("span", $n, [
+            me(W(r(c)) + " ", 1),
+            u(c.id) ? (d(), m("span", xn, " Loading... ")) : z("", !0),
+            b(c.id) ? (d(), m("span", {
               key: 1,
               class: "error-indicator",
-              title: p(g.id) || ""
-            }, " Error ", 8, kn)) : I("", !0),
-            d(g) ? I("", !0) : (f(), L("span", $n, " (zoom in) "))
+              "aria-label": b(c.id) || "Error"
+            }, " Error ", 8, Pn)) : z("", !0),
+            y(c) ? z("", !0) : (d(), m("span", _n, " (zoom in) "))
           ])
         ], 2)),
-        y(g) && l(g.id) ? (f(), L("div", Pn, [
-          F("label", xn, " Opacity: " + j(Math.round(a(g.id) * 100)) + "% ", 1),
-          F("input", {
+        v(c) && a(c.id) ? (d(), m("div", En, [
+          x("label", {
+            class: "opacity-label",
+            for: "opacity-" + c.id
+          }, " Opacity: " + W(Math.round(l(c.id) * 100)) + "% ", 9, Mn),
+          x("input", {
+            id: "opacity-" + c.id,
             type: "range",
             min: "0",
             max: "1",
             step: "0.05",
-            value: a(g.id),
+            value: l(c.id),
+            "aria-label": "Opacity for " + r(c),
             class: "opacity-slider",
-            onInput: (w) => E(g.id, w)
+            onInput: (L) => w(c.id, L)
           }, null, 40, Tn)
-        ])) : I("", !0),
-        h(g) && l(g.id) && g.legend?.length ? (f(), L("ul", Fn, [
-          (f(!0), L(ie, null, re(g.legend, (w, z) => (f(), L("li", {
-            key: z,
+        ])) : z("", !0),
+        S(c) && a(c.id) && c.legend?.length ? (d(), m("ul", zn, [
+          (d(!0), m(ee, null, le(c.legend, (L, F) => (d(), m("li", {
+            key: F,
             class: "legend-item"
           }, [
-            w.type === "circle" ? (f(), L("span", {
+            L.type === "circle" ? (d(), m("span", {
               key: 0,
               class: "legend-symbol legend-circle",
-              style: Y({ backgroundColor: w.color })
-            }, null, 4)) : w.type === "line" ? (f(), L("span", {
+              style: H({ backgroundColor: L.color }),
+              "aria-hidden": "true"
+            }, null, 4)) : L.type === "line" ? (d(), m("span", {
               key: 1,
               class: "legend-symbol legend-line",
-              style: Y({
-                backgroundColor: w.color,
-                height: `${w.width || 2}px`
-              })
-            }, null, 4)) : w.type === "fill" ? (f(), L("span", {
+              style: H({
+                backgroundColor: L.color,
+                height: `${L.width || 2}px`
+              }),
+              "aria-hidden": "true"
+            }, null, 4)) : L.type === "fill" ? (d(), m("span", {
               key: 2,
               class: "legend-symbol legend-fill",
-              style: Y({ backgroundColor: w.color })
-            }, null, 4)) : I("", !0),
-            F("span", Mn, j(w.label), 1)
+              style: H({ backgroundColor: L.color }),
+              "aria-hidden": "true"
+            }, null, 4)) : z("", !0),
+            x("span", Fn, W(L.label), 1)
           ]))), 128))
-        ])) : I("", !0)
+        ])) : z("", !0)
       ]))), 128)),
-      e.layers.length === 0 ? (f(), L("div", En, " No layers available ")) : I("", !0)
+      e.layers.length === 0 ? (d(), m("div", On, " No layers available ")) : z("", !0)
     ]));
   }
-}), Bn = /* @__PURE__ */ _e(zn, [["__scopeId", "data-v-cc5e50fd"]]);
-function Wn(e) {
-  const n = $([]), o = $(/* @__PURE__ */ new Set()), t = $({}), l = $(/* @__PURE__ */ new Set()), a = $({}), c = $(""), p = $(!1), d = $(!1), S = $(null), y = R(() => {
-    if (!c.value.trim())
+}), ni = /* @__PURE__ */ Fe(In, [["__scopeId", "data-v-e07d84cd"]]), Rn = { class: "layer-radio-set" }, Dn = ["name", "checked", "disabled", "onChange"], Zn = { class: "layer-title" }, Bn = {
+  key: 0,
+  class: "loading-indicator"
+}, Nn = ["aria-label"], An = {
+  key: 2,
+  class: "zoom-indicator"
+}, Vn = {
+  key: 0,
+  class: "opacity-control"
+}, Un = ["for"], Wn = ["id", "value", "aria-label", "onInput"], jn = {
+  key: 1,
+  class: "layer-legend"
+}, qn = { class: "legend-label" }, Gn = {
+  key: 0,
+  class: "empty-state"
+}, Hn = /* @__PURE__ */ Se({
+  __name: "LayerRadioButtonSet",
+  props: {
+    layers: {},
+    visibleLayerIds: {},
+    layerOpacities: { default: () => ({}) },
+    loadingLayerIds: { default: () => /* @__PURE__ */ new Set() },
+    layerErrors: { default: () => ({}) },
+    currentZoom: { default: 12 },
+    showOpacity: { type: Boolean, default: !0 },
+    showLegend: { type: Boolean, default: !0 },
+    groupName: { default: "layer-radio-group" }
+  },
+  emits: ["selectLayer", "setOpacity"],
+  setup(e, { emit: n }) {
+    const t = e, o = n;
+    function a(w) {
+      return t.visibleLayerIds.has(w);
+    }
+    function l(w) {
+      return t.layerOpacities[w] ?? 1;
+    }
+    function u(w) {
+      return t.loadingLayerIds.has(w);
+    }
+    function b(w) {
+      return t.layerErrors[w] || null;
+    }
+    function y(w) {
+      const g = t.currentZoom, f = w.minZoom, c = w.maxZoom;
+      return !(f !== void 0 && g < f || c !== void 0 && g > c);
+    }
+    function P(w) {
+      return t.showOpacity ? w.displayOptions?.shouldShowSlider !== !1 : !1;
+    }
+    function v(w) {
+      return t.showLegend ? w.displayOptions?.shouldShowLegendBox !== !1 : !1;
+    }
+    function S(w) {
+      return w.displayOptions?.layerNameChange || w.title;
+    }
+    function r(w) {
+      const g = t.layers.filter((f) => t.visibleLayerIds.has(f.id) && f.id !== w).map((f) => f.id);
+      o("selectLayer", w, g);
+    }
+    function h(w, g) {
+      const f = g.target;
+      o("setOpacity", w, parseFloat(f.value));
+    }
+    return (w, g) => (d(), m("div", Rn, [
+      (d(!0), m(ee, null, le(e.layers, (f) => (d(), m("div", {
+        key: f.id,
+        class: "layer-item"
+      }, [
+        x("label", {
+          class: te(["layer-radio", {
+            "layer-unavailable": !y(f),
+            "layer-error": b(f.id)
+          }])
+        }, [
+          x("input", {
+            type: "radio",
+            name: e.groupName,
+            checked: a(f.id),
+            disabled: !y(f),
+            onChange: (c) => r(f.id)
+          }, null, 40, Dn),
+          x("span", Zn, [
+            me(W(S(f)) + " ", 1),
+            u(f.id) ? (d(), m("span", Bn, " Loading... ")) : z("", !0),
+            b(f.id) ? (d(), m("span", {
+              key: 1,
+              class: "error-indicator",
+              "aria-label": b(f.id) || "Error"
+            }, " Error ", 8, Nn)) : z("", !0),
+            y(f) ? z("", !0) : (d(), m("span", An, " (zoom in) "))
+          ])
+        ], 2),
+        P(f) && a(f.id) ? (d(), m("div", Vn, [
+          x("label", {
+            class: "opacity-label",
+            for: "opacity-" + f.id
+          }, " Opacity: " + W(Math.round(l(f.id) * 100)) + "% ", 9, Un),
+          x("input", {
+            id: "opacity-" + f.id,
+            type: "range",
+            min: "0",
+            max: "1",
+            step: "0.05",
+            value: l(f.id),
+            "aria-label": "Opacity for " + S(f),
+            class: "opacity-slider",
+            onInput: (c) => h(f.id, c)
+          }, null, 40, Wn)
+        ])) : z("", !0),
+        v(f) && a(f.id) && f.legend?.length ? (d(), m("ul", jn, [
+          (d(!0), m(ee, null, le(f.legend, (c, L) => (d(), m("li", {
+            key: L,
+            class: "legend-item"
+          }, [
+            c.type === "circle" ? (d(), m("span", {
+              key: 0,
+              class: "legend-symbol legend-circle",
+              style: H({ backgroundColor: c.color }),
+              "aria-hidden": "true"
+            }, null, 4)) : c.type === "line" ? (d(), m("span", {
+              key: 1,
+              class: "legend-symbol legend-line",
+              style: H({
+                backgroundColor: c.color,
+                height: `${c.width || 2}px`
+              }),
+              "aria-hidden": "true"
+            }, null, 4)) : c.type === "fill" ? (d(), m("span", {
+              key: 2,
+              class: "legend-symbol legend-fill",
+              style: H({ backgroundColor: c.color }),
+              "aria-hidden": "true"
+            }, null, 4)) : z("", !0),
+            x("span", qn, W(c.label), 1)
+          ]))), 128))
+        ])) : z("", !0)
+      ]))), 128)),
+      e.layers.length === 0 ? (d(), m("div", Gn, " No layers available ")) : z("", !0)
+    ]));
+  }
+}), ii = /* @__PURE__ */ Fe(Hn, [["__scopeId", "data-v-f6d42644"]]);
+function ai(e) {
+  const n = C([]), t = C(/* @__PURE__ */ new Set()), o = C({}), a = C(/* @__PURE__ */ new Set()), l = C({}), u = C(""), b = C(!1), y = C(!1), P = C(null), v = I(() => {
+    if (!u.value.trim())
       return n.value;
-    const M = c.value.toLowerCase();
+    const T = u.value.toLowerCase();
     return n.value.filter(
-      (N) => N.title.toLowerCase().includes(M)
+      (B) => B.title.toLowerCase().includes(T)
     );
-  }), h = R(() => n.value.map((M) => ({
-    config: M,
-    component: M.type
+  }), S = I(() => n.value.map((T) => ({
+    config: T,
+    component: T.type
     // "circle", "fill", or "line"
   })));
-  async function s() {
-    if (d.value) {
-      console.warn("[useLayerboard] Already initialized");
-      return;
-    }
-    p.value = !0, S.value = null;
-    try {
-      let M;
-      e.mode === "dynamic" || !e.mode ? e.webMapId ? M = await v(e.webMapId) : M = await lt() : M = await lt(), n.value = M;
-      const N = {};
-      M.forEach((q) => {
-        N[q.id] = q.opacity ?? 1;
-      }), t.value = N, d.value = !0, console.log(`[useLayerboard] Initialized with ${M.length} layers`);
-    } catch (M) {
-      S.value = M instanceof Error ? M : new Error("Failed to initialize layerboard"), console.error("[useLayerboard] Initialization error:", M);
-    } finally {
-      p.value = !1;
+  async function r() {
+    if (!y.value) {
+      b.value = !0, P.value = null;
+      try {
+        let T;
+        e.mode === "dynamic" || !e.mode ? e.webMapId ? T = await h(e.webMapId) : T = await pt() : T = await pt(), n.value = T;
+        const B = {};
+        T.forEach((q) => {
+          B[q.id] = q.opacity ?? 1;
+        }), o.value = B, y.value = !0;
+      } catch (T) {
+        P.value = T instanceof Error ? T : new Error("Failed to initialize layerboard");
+      } finally {
+        b.value = !1;
+      }
     }
   }
-  async function v(M) {
-    const N = Be(M);
-    console.log(`[useLayerboard] Fetching WebMap from: ${N}`);
-    const q = await fetch(N);
+  async function h(T) {
+    const B = gt(T), q = await fetch(B);
     if (!q.ok)
       throw new Error(`Failed to fetch WebMap: ${q.status} ${q.statusText}`);
-    const ce = await q.json();
-    return kt(ce);
+    const fe = await q.json();
+    return Mt(fe);
   }
-  function E(M) {
-    const N = new Set(o.value);
-    N.has(M) ? N.delete(M) : N.add(M), o.value = N;
+  function w(T) {
+    const B = new Set(t.value);
+    B.has(T) ? B.delete(T) : B.add(T), t.value = B;
   }
-  function m(M, N) {
-    t.value = {
-      ...t.value,
-      [M]: Math.max(0, Math.min(1, N))
+  function g(T, B) {
+    o.value = {
+      ...o.value,
+      [T]: Math.max(0, Math.min(1, B))
     };
   }
-  function C(M) {
-    c.value = M;
+  function f(T) {
+    u.value = T;
   }
-  function g(M, N) {
-    const q = new Set(l.value);
-    N ? q.add(M) : q.delete(M), l.value = q;
+  function c(T, B) {
+    const q = new Set(a.value);
+    B ? q.add(T) : q.delete(T), a.value = q;
   }
-  function w(M, N) {
-    if (N)
-      a.value = { ...a.value, [M]: N };
+  function L(T, B) {
+    if (B)
+      l.value = { ...l.value, [T]: B };
     else {
-      const { [M]: q, ...ce } = a.value;
-      a.value = ce;
+      const { [T]: q, ...fe } = l.value;
+      l.value = fe;
     }
   }
-  function z() {
-    n.value = [], o.value = /* @__PURE__ */ new Set(), t.value = {}, l.value = /* @__PURE__ */ new Set(), a.value = {}, c.value = "", p.value = !1, d.value = !1, S.value = null;
+  function F() {
+    n.value = [], t.value = /* @__PURE__ */ new Set(), o.value = {}, a.value = /* @__PURE__ */ new Set(), l.value = {}, u.value = "", b.value = !1, y.value = !1, P.value = null;
   }
   return {
     // State (readonly)
-    layerConfigs: V(n),
-    visibleLayers: V(o),
-    layerOpacities: V(t),
-    loadingLayers: V(l),
-    layerErrors: V(a),
-    searchQuery: V(c),
-    isLoading: V(p),
-    isInitialized: V(d),
-    error: V(S),
+    layerConfigs: j(n),
+    visibleLayers: j(t),
+    layerOpacities: j(o),
+    loadingLayers: j(a),
+    layerErrors: j(l),
+    searchQuery: j(u),
+    isLoading: j(b),
+    isInitialized: j(y),
+    error: j(P),
     // Computed
-    filteredLayerConfigs: y,
-    layerList: h,
+    filteredLayerConfigs: v,
+    layerList: S,
     // Config
     config: e,
     // Methods
-    initialize: s,
-    toggleLayer: E,
-    setLayerOpacity: m,
-    filterLayers: C,
-    setLayerLoading: g,
-    setLayerError: w,
-    reset: z
+    initialize: r,
+    toggleLayer: w,
+    setLayerOpacity: g,
+    filterLayers: f,
+    setLayerLoading: c,
+    setLayerError: L,
+    reset: F
   };
 }
-function Un() {
-  const e = $([]), n = $(/* @__PURE__ */ new Set()), o = $(/* @__PURE__ */ new Set());
-  function t(a) {
-    n.value.has(a) ? n.value.delete(a) : n.value.add(a);
+function li() {
+  const e = C([]), n = C(/* @__PURE__ */ new Set()), t = C(/* @__PURE__ */ new Set());
+  function o(l) {
+    n.value.has(l) ? n.value.delete(l) : n.value.add(l);
   }
-  function l(a) {
-    e.value = a;
+  function a(l) {
+    e.value = l;
   }
   return {
-    layers: R(() => e.value),
-    visibleLayerIds: R(() => n.value),
-    loadingLayerIds: R(() => o.value),
-    toggleLayer: t,
-    setLayers: l
+    layers: I(() => e.value),
+    visibleLayerIds: I(() => n.value),
+    loadingLayerIds: I(() => t.value),
+    toggleLayer: o,
+    setLayers: a
   };
 }
-function _n(e) {
-  const n = $(null), o = $(!1), t = $(null), l = $(0);
-  async function a(d = {}) {
-    o.value = !0, t.value = null;
-    const S = e.pageSize || 2e3;
-    let y = 0, h = [], s = !0;
+function Jn(e) {
+  const n = C(null), t = C(!1), o = C(null), a = C(0);
+  async function l(y = {}) {
+    t.value = !0, o.value = null;
+    const P = e.pageSize || 2e3;
+    let v = 0, S = [], r = !0;
     try {
-      for (; s; ) {
-        const E = e.url.replace(/\/$/, ""), m = encodeURIComponent(d.where || e.where || "1=1");
-        let C = `${E}/query?where=${m}&outFields=*&returnGeometry=true&resultRecordCount=${S}&resultOffset=${y}&f=geojson`;
-        if (d.bounds) {
-          const z = JSON.stringify({
-            xmin: d.bounds.west,
-            ymin: d.bounds.south,
-            xmax: d.bounds.east,
-            ymax: d.bounds.north,
+      for (; r; ) {
+        const w = e.url.replace(/\/$/, ""), g = encodeURIComponent(y.where || e.where || "1=1");
+        let f = `${w}/query?where=${g}&outFields=*&returnGeometry=true&resultRecordCount=${P}&resultOffset=${v}&f=geojson`;
+        if (y.bounds) {
+          const F = JSON.stringify({
+            xmin: y.bounds.west,
+            ymin: y.bounds.south,
+            xmax: y.bounds.east,
+            ymax: y.bounds.north,
             spatialReference: { wkid: 4326 }
           });
-          C += `&geometry=${encodeURIComponent(z)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
+          f += `&geometry=${encodeURIComponent(F)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
         }
-        const g = await fetch(C);
-        if (!g.ok)
-          throw new Error(`HTTP ${g.status}: ${g.statusText}`);
-        const w = await g.json();
-        w.features && w.features.length > 0 ? (h = h.concat(w.features), y += w.features.length, s = w.features.length === S) : s = !1;
+        const c = await fetch(f);
+        if (!c.ok)
+          throw new Error(`HTTP ${c.status}: ${c.statusText}`);
+        const L = await c.json();
+        L.features && L.features.length > 0 ? (S = S.concat(L.features), v += L.features.length, r = L.features.length === P) : r = !1;
       }
-      const v = {
+      const h = {
         type: "FeatureCollection",
-        features: h
+        features: S
       };
-      return n.value = v, l.value = h.length, v;
-    } catch (v) {
-      const E = v instanceof Error ? v : new Error("Failed to fetch features");
-      throw t.value = E, E;
+      return n.value = h, a.value = S.length, h;
+    } catch (h) {
+      const w = h instanceof Error ? h : new Error("Failed to fetch features");
+      throw o.value = w, w;
     } finally {
-      o.value = !1;
+      t.value = !1;
     }
   }
-  function c() {
-    n.value = null, l.value = 0, t.value = null;
+  function u() {
+    n.value = null, a.value = 0, o.value = null;
   }
-  async function p(d = {}) {
-    return a(d);
+  async function b(y = {}) {
+    return l(y);
   }
   return {
     // State (readonly)
-    data: V(n),
-    isLoading: V(o),
-    error: V(t),
-    totalFeatures: V(l),
+    data: j(n),
+    isLoading: j(t),
+    error: j(o),
+    totalFeatures: j(a),
     // Config
     config: e,
     // Methods
-    fetch: a,
-    refetch: p,
-    clear: c
+    fetch: l,
+    refetch: b,
+    clear: u
   };
 }
-function Vn(e, n, o) {
-  const t = _n(e);
-  return xe(
+function ri(e, n, t) {
+  const o = Jn(e);
+  return Me(
     n,
-    async (l) => {
-      if (l) {
-        const a = o(l);
-        await t.fetch(a);
+    async (a) => {
+      if (a) {
+        const l = t(a);
+        await o.fetch(l);
       }
     },
     { immediate: !0 }
-  ), t;
+  ), o;
 }
 export {
-  Bn as LayerCheckboxSet,
-  Ro as LayerPanel,
-  Nn as Layerboard,
-  Xt as MapPanel,
-  Zn as TopicAccordion,
-  Dn as WEBMAP_ID,
-  Be as buildWebMapUrl,
-  Jo as clearCache,
-  lt as getLayerConfigs,
-  An as getWebMapUrl,
-  kt as transformWebMapToLayerConfigs,
-  Yo as useApiDataSources,
-  _n as useDataSource,
-  Un as useLayerConfig,
-  Wn as useLayerboard,
-  Vn as useReactiveDataSource
+  ni as LayerCheckboxSet,
+  No as LayerPanel,
+  ii as LayerRadioButtonSet,
+  ti as Layerboard,
+  to as MapPanel,
+  oi as TopicAccordion,
+  Yn as WEBMAP_ID,
+  gt as buildWebMapUrl,
+  Yo as clearCache,
+  pt as getLayerConfigs,
+  ei as getWebMapUrl,
+  Mt as transformWebMapToLayerConfigs,
+  nn as useApiDataSources,
+  Jn as useDataSource,
+  li as useLayerConfig,
+  ai as useLayerboard,
+  ri as useReactiveDataSource
 };