@phila/layerboard 3.0.0-beta.21 → 3.0.0-beta.23

package/dist/index.mjs

@@ -1,17 +1,17 @@
-import { defineComponent as $e, ref as k, watch as Re, computed as z, onMounted as Xe, onUnmounted as Pt, createElementBlock as m, openBlock as f, createVNode as Q, unref as O, withCtx as Ue, createBlock as te, createCommentVNode as E, Fragment as ie, renderList as se, useAttrs as Ot, toRef as zt, normalizeClass as ne, createElementVNode as P, toDisplayString as N, renderSlot as fe, withDirectives as Mt, mergeProps as dt, vModelDynamic as It, createTextVNode as Le, normalizeProps as mt, guardReactiveProps as vt, withModifiers as Rt, normalizeStyle as J, readonly as j, provide as V, onBeforeUnmount as Dt, nextTick as Ve, useId as bt, resolveComponent as Zt, vShow as Bt } from "vue";
-import { Map as At, DrawTool as Nt, RasterLayer as wt, CircleLayer as Lt, FillLayer as St, LineLayer as ct, MapMarker as Vt, MapPopup as Ut } from "@phila/phila-ui-map-core";
-import { cn as ft, Icon as be, BaseLink as Wt, ActionContent as Ct } from "@phila/phila-ui-core";
-const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
+import { defineComponent as ue, ref as w, watch as Be, computed as E, onMounted as Xe, onUnmounted as Ot, createElementBlock as k, openBlock as y, createVNode as j, unref as d, withCtx as je, createBlock as U, createCommentVNode as I, Fragment as le, renderList as pe, useAttrs as Vt, toRef as Nt, normalizeClass as ae, createElementVNode as M, toDisplayString as W, renderSlot as ce, withDirectives as It, mergeProps as ft, vModelDynamic as Ut, createTextVNode as Le, normalizeProps as Lt, guardReactiveProps as St, normalizeStyle as se, withModifiers as Wt, readonly as N, provide as A, onBeforeUnmount as jt, nextTick as We, useId as Ct, resolveComponent as qt, vShow as Gt } from "vue";
+import { Map as Ht, DrawTool as Jt, RasterLayer as kt, CircleLayer as xt, FillLayer as $t, LineLayer as ut, MapMarker as Kt, MapPopup as Qt } from "@phila/phila-ui-map-core";
+import { cn as pt, Icon as be, BaseLink as Xt, ActionContent as Pt } from "@phila/phila-ui-core";
+const Yt = { class: "map-panel" }, eo = /* @__PURE__ */ ue({
   __name: "MapPanel",
   props: {
     visibleLayers: {},
     layerOpacities: {},
     layerList: {},
-    tiledLayers: {},
-    visibleTiledLayers: {},
-    tiledLayerOpacities: {},
-    cyclomediaConfig: {},
-    pictometryCredentials: {},
+    tiledLayers: { default: void 0 },
+    visibleTiledLayers: { default: void 0 },
+    tiledLayerOpacities: { default: void 0 },
+    cyclomediaConfig: { default: void 0 },
+    pictometryCredentials: { default: void 0 },
     basemapControlPosition: { default: "top-right" },
     navigationControlPosition: { default: "bottom-right" },
     geolocationControlPosition: { default: "bottom-right" },
@@ -19,416 +19,416 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
     drawControlPosition: { default: "bottom-left" },
     cyclomediaButtonPosition: { default: "top-right" },
     pictometryButtonPosition: { default: "top-right" },
-    initialZoom: {},
-    initialCenter: {}
+    initialZoom: { default: void 0 },
+    initialCenter: { default: void 0 }
   },
   emits: ["zoom", "layerLoading", "layerError"],
-  setup(t, { emit: i }) {
-    const a = t, o = i, l = k(null), n = k(null), y = k(0);
-    function $(e) {
-      o("zoom", e), n.value && (y.value = g(n.value));
-    }
-    function g(e) {
-      const d = e.getZoom(), w = e.getCenter().lat, _ = 559082264028e-3, T = w * Math.PI / 180;
-      return _ * Math.cos(T) / Math.pow(2, d);
-    }
-    const M = k({}), L = k(null), S = k(/* @__PURE__ */ new Set());
-    async function r(e, d, s, w, _) {
-      const T = encodeURIComponent(w || "1=1"), B = JSON.stringify({
-        xmin: d.west,
-        ymin: d.south,
-        xmax: d.east,
-        ymax: d.north,
+  setup(e, { emit: i }) {
+    const l = e, o = i, r = w(null), n = w(null), c = w(0);
+    function L(t) {
+      o("zoom", t), n.value && (c.value = f(n.value));
+    }
+    function f(t) {
+      const u = t.getZoom(), g = t.getCenter().lat, C = 559082264028e-3, T = g * Math.PI / 180;
+      return C * Math.cos(T) / Math.pow(2, u);
+    }
+    const P = w({}), m = w(null), b = w(/* @__PURE__ */ new Set());
+    async function a(t, u, s, g, C) {
+      const T = encodeURIComponent(g || "1=1"), R = JSON.stringify({
+        xmin: u.west,
+        ymin: u.south,
+        xmax: u.east,
+        ymax: u.north,
         spatialReference: { wkid: 4326 }
-      }), ee = _ !== void 0 ? `&maxAllowableOffset=${360 / (Math.pow(2, _) * 512)}` : "", U = 2e3;
-      let X = 0, A = [], K = !0;
+      }), ee = C !== void 0 ? `&maxAllowableOffset=${360 / (Math.pow(2, C) * 512)}` : "", V = 2e3;
+      let Q = 0, D = [], K = !0;
       for (; K; ) {
-        const H = `${e}/query?where=${T}&geometry=${encodeURIComponent(B)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&resultRecordCount=${U}&resultOffset=${X}${ee}&f=geojson`, de = await fetch(H);
-        if (!de.ok)
-          throw new Error(`HTTP ${de.status}: ${de.statusText}`);
-        const ke = await de.json();
-        ke.features && ke.features.length > 0 ? (A = A.concat(ke.features), X += ke.features.length, K = ke.features.length === U) : K = !1;
+        const J = `${t}/query?where=${T}&geometry=${encodeURIComponent(R)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&resultRecordCount=${V}&resultOffset=${Q}${ee}&f=geojson`, re = await fetch(J);
+        if (!re.ok)
+          throw new Error(`HTTP ${re.status}: ${re.statusText}`);
+        const xe = await re.json();
+        xe.features && xe.features.length > 0 ? (D = D.concat(xe.features), Q += xe.features.length, K = xe.features.length === V) : K = !1;
       }
-      return A = A.map((H) => {
-        if (H.properties) {
-          const de = {};
-          for (const ke of Object.keys(H.properties))
-            de[ke.toLowerCase()] = H.properties[ke];
-          return { ...H, properties: de };
+      return D = D.map((J) => {
+        if (J.properties) {
+          const re = {};
+          for (const xe of Object.keys(J.properties))
+            re[xe.toLowerCase()] = J.properties[xe];
+          return { ...J, properties: re };
         }
-        return H;
+        return J;
       }), {
         type: "FeatureCollection",
-        features: A
+        features: D
       };
     }
-    async function C(e, d) {
-      const s = d.map(async (w) => {
-        const _ = a.layerList.find((T) => T.config.id === w)?.config;
-        if (_) {
-          o("layerLoading", w, !0);
+    async function v(t, u) {
+      const s = u.map(async (g) => {
+        const C = l.layerList.find((T) => T.config.id === g)?.config;
+        if (C) {
+          o("layerLoading", g, !0);
           try {
-            const T = n.value?.getZoom(), B = await r(_.url, e, w, _.where, T);
-            M.value = { ...M.value, [w]: B }, o("layerError", w, null);
+            const T = n.value?.getZoom(), R = await a(C.url, t, g, C.where, T);
+            P.value = { ...P.value, [g]: R }, o("layerError", g, null);
           } catch (T) {
-            const B = T instanceof Error ? T.message : "Failed to load";
-            o("layerError", w, B);
+            const R = T instanceof Error ? T.message : "Failed to load";
+            o("layerError", g, R);
           } finally {
-            o("layerLoading", w, !1);
+            o("layerLoading", g, !1);
           }
         }
       });
       await Promise.all(s);
     }
-    async function p(e) {
-      const d = [...a.visibleLayers];
-      await C(e, d);
-    }
-    function h(e) {
-      L.value = e.bounds, p(e.bounds);
-    }
-    function u(e) {
-      n.value = e;
-      const d = e.getBounds();
-      L.value = {
-        west: d.getWest(),
-        south: d.getSouth(),
-        east: d.getEast(),
-        north: d.getNorth()
+    async function h(t) {
+      const u = [...l.visibleLayers];
+      await v(t, u);
+    }
+    function S(t) {
+      m.value = t.bounds, h(t.bounds);
+    }
+    function x(t) {
+      n.value = t;
+      const u = t.getBounds();
+      m.value = {
+        west: u.getWest(),
+        south: u.getSouth(),
+        east: u.getEast(),
+        north: u.getNorth()
       };
-      const s = e.getZoom();
-      o("zoom", s), y.value = g(e), p(L.value);
+      const s = t.getZoom();
+      o("zoom", s), c.value = f(t), h(m.value);
     }
-    Re(
-      () => a.visibleLayers,
+    Be(
+      () => l.visibleLayers,
       async () => {
-        if (le.value.length > 0 && Me(), L.value) {
-          const e = new Set(a.visibleLayers), d = [...e].filter((s) => !S.value.has(s));
-          S.value = new Set(e), d.length > 0 && await C(L.value, d);
+        if (ie.value.length > 0 && Y(), m.value) {
+          const t = new Set(l.visibleLayers), u = [...t].filter((s) => !b.value.has(s));
+          b.value = new Set(t), u.length > 0 && await v(m.value, u);
         }
       }
     );
-    function c(e) {
-      return a.visibleLayers.has(e);
-    }
-    function v(e) {
-      return !!M.value[e.id];
-    }
-    const I = z(
-      () => a.layerList.filter((e) => e.config.type === "circle" && c(e.config.id) && v(e.config)).map((e) => e.config)
-    ), F = z(
-      () => a.layerList.filter((e) => e.config.type === "fill" && c(e.config.id) && v(e.config)).map((e) => e.config)
-    ), R = z(
-      () => a.layerList.filter(
-        (e) => e.config.type === "fill" && e.config.outlinePaint && c(e.config.id) && v(e.config)
-      ).map((e) => e.config)
-    ), Z = z(
-      () => a.layerList.filter((e) => e.config.type === "line" && c(e.config.id) && v(e.config)).map((e) => e.config)
+    function B(t) {
+      return l.visibleLayers.has(t);
+    }
+    function q(t) {
+      return !!P.value[t.id];
+    }
+    const te = E(
+      () => l.layerList.filter((t) => t.config.type === "circle" && B(t.config.id) && q(t.config)).map((t) => t.config)
+    ), F = E(
+      () => l.layerList.filter((t) => t.config.type === "fill" && B(t.config.id) && q(t.config)).map((t) => t.config)
+    ), O = E(
+      () => l.layerList.filter(
+        (t) => t.config.type === "fill" && t.config.outlinePaint && B(t.config.id) && q(t.config)
+      ).map((t) => t.config)
+    ), _ = E(
+      () => l.layerList.filter((t) => t.config.type === "line" && B(t.config.id) && q(t.config)).map((t) => t.config)
     );
-    function pe(e) {
-      return a.visibleTiledLayers?.has(e) ?? !1;
+    function de(t) {
+      return l.visibleTiledLayers?.has(t) ?? !1;
     }
-    function ye(e) {
-      return a.tiledLayerOpacities?.[e] ?? 1;
+    function ye(t) {
+      return l.tiledLayerOpacities?.[t] ?? 1;
     }
-    function Ze(e) {
-      return `${e.replace(/\/$/, "")}/tile/{z}/{y}/{x}`;
+    function Ae(t) {
+      return `${t.replace(/\/$/, "")}/tile/{z}/{y}/{x}`;
     }
-    function tt(e) {
+    function ot(t) {
       return {
         type: "raster",
-        tiles: [Ze(e.url)],
+        tiles: [Ae(t.url)],
         tileSize: 256,
-        attribution: e.attribution || ""
+        attribution: t.attribution || ""
       };
     }
-    const Be = k({}), je = k(/* @__PURE__ */ new Set());
-    async function ot(e) {
-      if (!je.value.has(e.id)) {
-        je.value.add(e.id);
+    const Ze = w({}), Ge = w(/* @__PURE__ */ new Set());
+    async function at(t) {
+      if (!Ge.value.has(t.id)) {
+        Ge.value.add(t.id);
         try {
-          const d = e.url.replace(/\/$/, ""), s = await fetch(`${d}?f=json`);
+          const u = t.url.replace(/\/$/, ""), s = await fetch(`${u}?f=json`);
           if (!s.ok)
             return;
-          const w = await s.json(), _ = w.minScale || 0;
-          let T = w.maxScale || 0;
-          if (w.layers && w.layers.length > 0)
-            for (const B of w.layers)
-              B.maxScale && B.maxScale > 0 && (T === 0 || B.maxScale < T) && (T = B.maxScale);
-          T === 0 && (T = 72e3), Be.value = {
-            ...Be.value,
-            [e.id]: { minScale: _, maxScale: T }
+          const g = await s.json(), C = g.minScale || 0;
+          let T = g.maxScale || 0;
+          if (g.layers && g.layers.length > 0)
+            for (const R of g.layers)
+              R.maxScale && R.maxScale > 0 && (T === 0 || R.maxScale < T) && (T = R.maxScale);
+          T === 0 && (T = 72e3), Ze.value = {
+            ...Ze.value,
+            [t.id]: { minScale: C, maxScale: T }
           };
         } catch {
         }
       }
     }
     Xe(() => {
-      if (a.tiledLayers)
-        for (const e of a.tiledLayers)
-          e.scaleBasedRendering && ot(e);
+      if (l.tiledLayers)
+        for (const t of l.tiledLayers)
+          t.scaleBasedRendering && at(t);
     });
-    function Fe(e) {
-      if (!e.scaleBasedRendering)
+    function Ee(t) {
+      if (!t.scaleBasedRendering)
         return "tiled";
-      const d = Be.value[e.id];
-      if (!d)
+      const u = Ze.value[t.id];
+      if (!u)
         return "tiled";
-      const s = y.value;
-      return s === 0 || s > d.maxScale ? "tiled" : "dynamic";
+      const s = c.value;
+      return s === 0 || s > u.maxScale ? "tiled" : "dynamic";
     }
-    const at = z(() => a.tiledLayers ? a.tiledLayers.filter((e) => pe(e.id) ? e.scaleBasedRendering ? Fe(e) === "tiled" : !0 : !1) : []), it = z(() => a.tiledLayers ? a.tiledLayers.filter((e) => pe(e.id) && e.scaleBasedRendering ? Fe(e) === "dynamic" : !1) : []);
-    function nt(e) {
+    const it = E(() => l.tiledLayers ? l.tiledLayers.filter((t) => de(t.id) ? t.scaleBasedRendering ? Ee(t) === "tiled" : !0 : !1) : []), lt = E(() => l.tiledLayers ? l.tiledLayers.filter((t) => de(t.id) && t.scaleBasedRendering ? Ee(t) === "dynamic" : !1) : []);
+    function Oe(t) {
       return {
         type: "raster",
-        tiles: [`${e.url.replace(/\/$/, "")}/export?bbox={bbox-epsg-3857}&bboxSR=3857&imageSR=3857&size=256,256&format=png32&transparent=true&f=image`],
+        tiles: [`${t.url.replace(/\/$/, "")}/export?bbox={bbox-epsg-3857}&bboxSR=3857&imageSR=3857&size=256,256&format=png32&transparent=true&f=image`],
         tileSize: 256,
-        attribution: e.attribution || ""
+        attribution: t.attribution || ""
       };
     }
-    function ge(e) {
-      return { type: "geojson", data: M.value[e.id] };
+    function Ce(t) {
+      return { type: "geojson", data: P.value[t.id] };
     }
-    function Ee(e) {
-      return a.layerOpacities[e] ?? 1;
+    function Ie(t) {
+      return l.layerOpacities[t] ?? 1;
     }
-    function _e(e) {
-      const d = Ee(e.id), s = e.type === "circle" ? "circle-opacity" : e.type === "fill" ? "fill-opacity" : "line-opacity";
-      if (e.type === "fill" && e.paint["fill-opacity"] === 0)
-        return { ...e.paint, "fill-opacity": 0 };
-      const w = e.type === "circle" ? "circle-color" : e.type === "fill" ? "fill-color" : "line-color", _ = { ...e.paint }, T = _[w], B = _[s] === 1, ee = typeof T == "string" && T.startsWith("rgba(");
-      if (B && ee) {
-        if (d === 1)
-          return _;
+    function ke(t) {
+      const u = Ie(t.id), s = t.type === "circle" ? "circle-opacity" : t.type === "fill" ? "fill-opacity" : "line-opacity";
+      if (t.type === "fill" && t.paint["fill-opacity"] === 0)
+        return { ...t.paint, "fill-opacity": 0 };
+      const g = t.type === "circle" ? "circle-color" : t.type === "fill" ? "fill-color" : "line-color", C = { ...t.paint }, T = C[g], R = C[s] === 1, ee = typeof T == "string" && T.startsWith("rgba(");
+      if (R && ee) {
+        if (u === 1)
+          return C;
         {
-          const U = T.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-          if (U && U[4]) {
-            const [, X, A, K, H] = U, de = parseFloat(H) * d;
-            _[w] = `rgba(${X}, ${A}, ${K}, ${de})`, _[s] = 1;
+          const V = T.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+          if (V && V[4]) {
+            const [, Q, D, K, J] = V, re = parseFloat(J) * u;
+            C[g] = `rgba(${Q}, ${D}, ${K}, ${re})`, C[s] = 1;
           }
-          return _;
+          return C;
         }
       }
       if (ee) {
-        const U = T.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-        if (U) {
-          const [, X, A, K] = U;
-          _[w] = `rgb(${X}, ${A}, ${K})`;
+        const V = T.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+        if (V) {
+          const [, Q, D, K] = V;
+          C[g] = `rgb(${Q}, ${D}, ${K})`;
         }
       }
-      return _[s] = d, _;
+      return C[s] = u, C;
     }
-    function Oe(e) {
-      const d = Ee(e.id);
-      return { ...e.outlinePaint, "line-opacity": d };
+    function nt(t) {
+      const u = Ie(t.id);
+      return { ...t.outlinePaint, "line-opacity": u };
     }
-    const le = k([]), ze = k(null), oe = k(0);
-    function Pe(e) {
-      const d = e.replace(/-outline$/, "");
-      return a.layerList.find((w) => w.config.id === d)?.config;
+    const ie = w([]), ze = w(null), X = w(0);
+    function Pe(t) {
+      const u = t.replace(/-outline$/, "");
+      return l.layerList.find((g) => g.config.id === u)?.config;
     }
-    function qe(e, d) {
-      return e.replace(/\{([^}]+)\}/g, (s, w) => {
-        const _ = d[w];
-        return _ == null ? "" : String(_);
+    function rt(t, u) {
+      return t.replace(/\{([^}]+)\}/g, (s, g) => {
+        const C = u[g];
+        return C == null ? "" : String(C);
       });
     }
-    function Se(e) {
-      return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    function me(t) {
+      return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
     }
-    function Ge(e, d, s) {
-      if (e == null) return "-";
-      if (d?.dateFormat && typeof e == "number") {
-        const w = new Date(e);
-        if (s && d.dateFormat === "shortDateShortTime")
-          return w.toLocaleString(void 0, { dateStyle: "short", timeStyle: "short" });
-        switch (d.dateFormat) {
+    function Ve(t, u, s) {
+      if (t == null) return "-";
+      if (u?.dateFormat && typeof t == "number") {
+        const g = new Date(t);
+        if (s && u.dateFormat === "shortDateShortTime")
+          return g.toLocaleString(void 0, { dateStyle: "short", timeStyle: "short" });
+        switch (u.dateFormat) {
           case "shortDateShortTime":
-            return w.toLocaleDateString();
+            return g.toLocaleDateString();
           case "longMonthDayYear":
-            return w.toLocaleDateString(void 0, { month: "long", day: "numeric", year: "numeric" });
+            return g.toLocaleDateString(void 0, { month: "long", day: "numeric", year: "numeric" });
           case "shortDate":
-            return w.toLocaleDateString();
+            return g.toLocaleDateString();
           case "longDate":
-            return w.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
+            return g.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
           default:
-            return w.toLocaleDateString();
+            return g.toLocaleDateString();
         }
       }
-      if (typeof e == "number") {
-        if (e > 1e12 && !d)
-          return new Date(e).toLocaleDateString();
-        const w = d?.places, _ = d?.digitSeparator ?? !0;
-        if (w !== void 0) {
-          if (Number.isInteger(e) && w >= 0)
-            return String(e);
-          const T = e.toFixed(w);
-          if (_) {
-            const B = T.split("."), ee = B[0] || "0", U = B[1], X = ee.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            return U ? `${X}.${U}` : X;
+      if (typeof t == "number") {
+        if (t > 1e12 && !u)
+          return new Date(t).toLocaleDateString();
+        const g = u?.places, C = u?.digitSeparator ?? !0;
+        if (g !== void 0) {
+          if (Number.isInteger(t) && g >= 0)
+            return String(t);
+          const T = t.toFixed(g);
+          if (C) {
+            const R = T.split("."), ee = R[0] || "0", V = R[1], Q = ee.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            return V ? `${Q}.${V}` : Q;
           }
           return T;
         }
-        return Number.isInteger(e) ? String(e) : _ ? e.toLocaleString() : String(e);
+        return Number.isInteger(t) ? String(t) : C ? t.toLocaleString() : String(t);
       }
-      return String(e);
+      return String(t);
     }
-    function Ae(e) {
-      const d = /* @__PURE__ */ new Set();
-      return e.filter((s) => {
-        const _ = `${s.layer.id.replace(/-outline$/, "")}:${JSON.stringify(s.properties)}`;
-        return d.has(_) ? !1 : (d.add(_), !0);
+    function Ne(t) {
+      const u = /* @__PURE__ */ new Set();
+      return t.filter((s) => {
+        const C = `${s.layer.id.replace(/-outline$/, "")}:${JSON.stringify(s.properties)}`;
+        return u.has(C) ? !1 : (u.add(C), !0);
       });
     }
-    function Ne(e, d) {
-      const s = M.value[e];
+    function He(t, u) {
+      const s = P.value[t];
       if (!s?.features) return null;
-      const w = d.objectid ?? d.OBJECTID ?? d.FID;
-      if (w != null) {
-        const _ = s.features.find(
-          (T) => (T.properties?.objectid ?? T.properties?.OBJECTID ?? T.properties?.FID) === w
+      const g = u.objectid ?? u.OBJECTID ?? u.FID;
+      if (g != null) {
+        const C = s.features.find(
+          (T) => (T.properties?.objectid ?? T.properties?.OBJECTID ?? T.properties?.FID) === g
         );
-        if (_) return _.geometry;
+        if (C) return C.geometry;
       }
       return null;
     }
-    function He(e, d) {
+    function ge(t, u) {
       const s = /* @__PURE__ */ new Map();
-      return d.forEach((w, _) => {
-        s.set(w.id, _);
-      }), e.sort((w, _) => {
-        const T = w.layer.id.replace(/-outline$/, ""), B = _.layer.id.replace(/-outline$/, ""), ee = s.get(T) ?? -1;
-        return (s.get(B) ?? -1) - ee;
+      return u.forEach((g, C) => {
+        s.set(g.id, C);
+      }), t.sort((g, C) => {
+        const T = g.layer.id.replace(/-outline$/, ""), R = C.layer.id.replace(/-outline$/, ""), ee = s.get(T) ?? -1;
+        return (s.get(R) ?? -1) - ee;
       });
     }
-    function re(e) {
-      const d = n.value;
-      if (!d) return;
+    function _e(t) {
+      const u = n.value;
+      if (!u) return;
       const s = [];
-      a.layerList.forEach((A) => {
-        const K = A.config;
-        a.visibleLayers.has(K.id) && (s.push(K.id), K.outlinePaint && s.push(`${K.id}-outline`));
+      l.layerList.forEach((D) => {
+        const K = D.config;
+        l.visibleLayers.has(K.id) && (s.push(K.id), K.outlinePaint && s.push(`${K.id}-outline`));
       });
-      const w = d.project([e.lngLat.lng, e.lngLat.lat]), _ = d.queryRenderedFeatures(w, {
+      const g = u.project([t.lngLat.lng, t.lngLat.lat]), C = u.queryRenderedFeatures(g, {
         layers: s
       });
-      if (_.length === 0) return;
-      const T = Ae(_), B = a.layerList.map((A) => A.config), U = He(T, B).map((A) => {
-        const K = A.layer.id.replace(/-outline$/, ""), H = Pe(K);
-        if (!H) return null;
-        const de = Ne(H.id, A.properties || {});
+      if (C.length === 0) return;
+      const T = Ne(C), R = l.layerList.map((D) => D.config), V = ge(T, R).map((D) => {
+        const K = D.layer.id.replace(/-outline$/, ""), J = Pe(K);
+        if (!J) return null;
+        const re = He(J.id, D.properties || {});
         return {
-          layerId: H.id,
-          layerTitle: H.title,
-          properties: A.properties || {},
-          geometry: de || A.geometry,
-          popupConfig: H.popup
+          layerId: J.id,
+          layerTitle: J.title,
+          properties: D.properties || {},
+          geometry: re || D.geometry,
+          popupConfig: J.popup
         };
-      }).filter((A) => A !== null);
-      if (U.length === 0) return;
-      le.value = U, oe.value = 0, ze.value = [e.lngLat.lng, e.lngLat.lat];
-      const X = U[0];
-      if (X) {
-        const A = Pe(X.layerId);
-        if (A) {
-          const K = b(X.geometry), H = x(A.id, A.type);
-          ue.value = {
-            geometry: X.geometry,
+      }).filter((D) => D !== null);
+      if (V.length === 0) return;
+      ie.value = V, X.value = 0, ze.value = [t.lngLat.lng, t.lngLat.lat];
+      const Q = V[0];
+      if (Q) {
+        const D = Pe(Q.layerId);
+        if (D) {
+          const K = $(Q.geometry), J = G(D.id, D.type);
+          p.value = {
+            geometry: Q.geometry,
             geometryType: K,
-            layerId: A.id,
-            properties: X.properties,
-            originalStyle: H
+            layerId: D.id,
+            properties: Q.properties,
+            originalStyle: J
           };
         }
       }
     }
-    function Me() {
-      le.value = [], ze.value = null, oe.value = 0, ue.value = null;
+    function Y() {
+      ie.value = [], ze.value = null, X.value = 0, p.value = null;
     }
-    function ce(e) {
-      if (le.value.length === 0) return;
-      const d = e.target;
-      if (!(d.tagName === "INPUT" || d.tagName === "TEXTAREA" || d.isContentEditable))
-        switch (e.key) {
+    function Je(t) {
+      if (ie.value.length === 0) return;
+      const u = t.target;
+      if (!(u.tagName === "INPUT" || u.tagName === "TEXTAREA" || u.isContentEditable))
+        switch (t.key) {
           case "ArrowLeft":
           case "ArrowUp":
-            e.preventDefault(), Te();
+            t.preventDefault(), ne();
             break;
           case "ArrowRight":
           case "ArrowDown":
-            e.preventDefault(), Je();
+            t.preventDefault(), Me();
             break;
           case "Escape":
-            e.preventDefault(), Me();
+            t.preventDefault(), Y();
             break;
         }
     }
     Xe(() => {
-      window.addEventListener("keydown", ce);
-    }), Pt(() => {
-      window.removeEventListener("keydown", ce);
+      window.addEventListener("keydown", Je);
+    }), Ot(() => {
+      window.removeEventListener("keydown", Je);
     });
-    function Je() {
-      const e = le.value.length;
-      e <= 1 || oe.value >= e - 1 || (oe.value = oe.value + 1);
-    }
-    function Te() {
-      le.value.length <= 1 || oe.value <= 0 || (oe.value = oe.value - 1);
-    }
-    const Y = z(() => le.value.length === 0 ? null : le.value[oe.value]), Ke = z(() => {
-      const e = Y.value;
-      return !e || !e.popupConfig ? e?.layerTitle || "" : qe(e.popupConfig.title, e.properties);
-    }), he = z(() => {
-      const e = Y.value;
-      if (!e) return "";
-      let d = '<div class="popup-content">';
-      if (d += `<h3 class="popup-title">${Se(Ke.value)}</h3>`, e.popupConfig?.fields?.length) {
-        d += `<table class="popup-table" aria-label="${Se(Ke.value)}">`;
-        for (const s of e.popupConfig.fields) {
-          const w = Ge(e.properties[s.field], s.format, e.popupConfig.showTime), _ = s.label.toLowerCase(), T = _.includes("url") || _.includes("website"), B = w.startsWith("http://") || w.startsWith("https://") || w.startsWith("www.") || T && w.includes("."), ee = w.startsWith("http://") || w.startsWith("https://") ? w : `https://${w}`, U = B ? `<a href="${Se(ee)}" target="_blank" rel="noopener noreferrer">${Se(w)}</a>` : Se(w);
-          d += `<tr><th scope="row">${Se(s.label)}</th><td>${U}</td></tr>`;
+    function Me() {
+      const t = ie.value.length;
+      t <= 1 || X.value >= t - 1 || (X.value = X.value + 1);
+    }
+    function ne() {
+      ie.value.length <= 1 || X.value <= 0 || (X.value = X.value - 1);
+    }
+    const Te = E(() => ie.value.length === 0 ? null : ie.value[X.value]), fe = E(() => {
+      const t = Te.value;
+      return !t || !t.popupConfig ? t?.layerTitle || "" : rt(t.popupConfig.title, t.properties);
+    }), Ue = E(() => {
+      const t = Te.value;
+      if (!t) return "";
+      let u = '<div class="popup-content">';
+      if (u += `<h3 class="popup-title">${me(fe.value)}</h3>`, t.popupConfig?.fields?.length) {
+        u += `<table class="popup-table" aria-label="${me(fe.value)}">`;
+        for (const s of t.popupConfig.fields) {
+          const g = Ve(t.properties[s.field], s.format, t.popupConfig.showTime), C = s.label.toLowerCase(), T = C.includes("url") || C.includes("website"), R = g.startsWith("http://") || g.startsWith("https://") || g.startsWith("www.") || T && g.includes("."), ee = g.startsWith("http://") || g.startsWith("https://") ? g : `https://${g}`, V = R ? `<a href="${me(ee)}" target="_blank" rel="noopener noreferrer">${me(g)}</a>` : me(g);
+          u += `<tr><th scope="row">${me(s.label)}</th><td>${V}</td></tr>`;
         }
-        d += "</table>";
+        u += "</table>";
       }
-      return d += "</div>", d;
-    }), Ce = k({
+      return u += "</div>", u;
+    }), he = w({
       type: "FeatureCollection",
       features: []
-    }), me = k({
+    }), oe = w({
       type: "FeatureCollection",
       features: []
-    }), ae = k({
+    }), Re = w({
       type: "FeatureCollection",
       features: []
-    }), lt = {
+    }), st = {
       "circle-radius": ["get", "highlightRadius"],
       "circle-color": "#00FFFF",
       "circle-opacity": 0.8,
       "circle-stroke-width": 2,
       "circle-stroke-color": "#FFFFFF"
-    }, rt = {
+    }, ct = {
       "line-width": ["get", "highlightWidth"],
       "line-color": "#00FFFF",
       "line-opacity": 0.9
-    }, st = {
+    }, Ke = {
       "fill-color": "#808080",
       "fill-opacity": 0.5
-    }, ue = k(null);
-    function b(e) {
-      return e.type;
+    }, p = w(null);
+    function $(t) {
+      return t.type;
     }
-    function x(e, d) {
-      const s = Pe(e);
+    function G(t, u) {
+      const s = Pe(t);
       if (!s) return { radius: 5, width: 2 };
-      const w = s.paint || {};
-      if (d === "circle") {
-        const _ = w["circle-radius"];
-        return typeof _ == "number" ? { radius: _ } : { radius: 5 };
+      const g = s.paint || {};
+      if (u === "circle") {
+        const C = g["circle-radius"];
+        return typeof C == "number" ? { radius: C } : { radius: 5 };
       }
-      if (d === "line" || d === "fill") {
-        const _ = w["line-width"];
-        if (typeof _ == "number")
-          return { width: _ };
+      if (u === "line" || u === "fill") {
+        const C = g["line-width"];
+        if (typeof C == "number")
+          return { width: C };
         if (s.outlinePaint && s.outlinePaint["line-width"]) {
           const T = s.outlinePaint["line-width"];
           if (typeof T == "number")
@@ -438,19 +438,19 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       }
       return { radius: 5, width: 2 };
     }
-    function q(e) {
-      return !e || e.length === 0 ? [] : e[0] ?? [];
+    function Z(t) {
+      return !t || t.length === 0 ? [] : t[0] ?? [];
     }
-    function W(e) {
-      const { geometry: d, geometryType: s, originalStyle: w } = e;
+    function H(t) {
+      const { geometry: u, geometryType: s, originalStyle: g } = t;
       if (s === "Point" || s === "MultiPoint") {
-        const T = (w.radius || 5) + 3;
+        const T = (g.radius || 5) + 3;
         return {
           type: "FeatureCollection",
           features: [
             {
               type: "Feature",
-              geometry: d,
+              geometry: u,
               properties: {
                 highlightRadius: T
               }
@@ -459,13 +459,13 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
         };
       }
       if (s === "LineString" || s === "MultiLineString") {
-        const T = (w.width || 2) + 3;
+        const T = (g.width || 2) + 3;
         return {
           type: "FeatureCollection",
           features: [
             {
               type: "Feature",
-              geometry: d,
+              geometry: u,
               properties: {
                 highlightWidth: T
               }
@@ -474,7 +474,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
         };
       }
       if (s === "Polygon") {
-        const _ = d.coordinates, T = q(_), ee = (w.width || 2) + 3;
+        const C = u.coordinates, T = Z(C), ee = (g.width || 2) + 3;
         return {
           type: "FeatureCollection",
           features: [
@@ -492,17 +492,17 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
         };
       }
       if (s === "MultiPolygon") {
-        const _ = d.coordinates, B = (w.width || 2) + 3;
+        const C = u.coordinates, R = (g.width || 2) + 3;
         return {
           type: "FeatureCollection",
-          features: _.map((U) => ({
+          features: C.map((V) => ({
             type: "Feature",
             geometry: {
               type: "LineString",
-              coordinates: q(U)
+              coordinates: Z(V)
             },
             properties: {
-              highlightWidth: B
+              highlightWidth: R
             }
           }))
         };
@@ -512,187 +512,192 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
         features: []
       };
     }
-    function G(e) {
-      const { geometry: d, geometryType: s } = e;
+    function ve(t) {
+      const { geometry: u, geometryType: s } = t;
       return s === "Polygon" || s === "MultiPolygon" ? {
         type: "FeatureCollection",
-        features: [{ type: "Feature", geometry: d, properties: {} }]
+        features: [{ type: "Feature", geometry: u, properties: {} }]
       } : { type: "FeatureCollection", features: [] };
     }
-    function ve(e) {
-      if (!e) {
-        Ie();
+    function De(t) {
+      if (!t) {
+        At();
         return;
       }
-      const d = W(e);
-      e.geometryType === "Point" || e.geometryType === "MultiPoint" ? (Ce.value = d, me.value = { type: "FeatureCollection", features: [] }, ae.value = { type: "FeatureCollection", features: [] }) : (me.value = d, Ce.value = { type: "FeatureCollection", features: [] }, ae.value = G(e));
-    }
-    function Ie() {
-      Ce.value = { type: "FeatureCollection", features: [] }, me.value = { type: "FeatureCollection", features: [] }, ae.value = { type: "FeatureCollection", features: [] };
-    }
-    Re(ue, (e) => {
-      ve(e);
-    }), Re(
-      () => a.visibleLayers,
-      (e) => {
-        ue.value && !e.has(ue.value.layerId) && (ue.value = null, Me());
+      const u = H(t);
+      t.geometryType === "Point" || t.geometryType === "MultiPoint" ? (he.value = u, oe.value = { type: "FeatureCollection", features: [] }, Re.value = { type: "FeatureCollection", features: [] }) : (oe.value = u, he.value = { type: "FeatureCollection", features: [] }, Re.value = ve(t));
+    }
+    function At() {
+      he.value = { type: "FeatureCollection", features: [] }, oe.value = { type: "FeatureCollection", features: [] }, Re.value = { type: "FeatureCollection", features: [] };
+    }
+    Be(p, (t) => {
+      De(t);
+    }), Be(
+      () => l.visibleLayers,
+      (t) => {
+        p.value && !t.has(p.value.layerId) && (p.value = null, Y());
       },
       { deep: !0 }
-    ), Re(oe, () => {
-      const e = Y.value;
-      if (!e) {
-        ue.value = null;
+    ), Be(X, () => {
+      const t = Te.value;
+      if (!t) {
+        p.value = null;
         return;
       }
-      const d = Pe(e.layerId);
-      if (d) {
-        const s = b(e.geometry), w = x(d.id, d.type);
-        ue.value = {
-          geometry: e.geometry,
+      const u = Pe(t.layerId);
+      if (u) {
+        const s = $(t.geometry), g = G(u.id, u.type);
+        p.value = {
+          geometry: t.geometry,
           geometryType: s,
-          layerId: d.id,
-          properties: e.properties,
-          originalStyle: w
+          layerId: u.id,
+          properties: t.properties,
+          originalStyle: g
         };
       }
     });
-    const ht = k(null);
-    function Et(e) {
-      const [d, s] = e.geometry.coordinates;
-      ht.value = [d, s];
+    const wt = w(null);
+    function Zt(t) {
+      const [u, s] = t.geometry.coordinates;
+      wt.value = [u, s];
     }
-    return (e, d) => (f(), m("div", jt, [
-      Q(O(At), {
+    return (t, u) => (y(), k("div", Yt, [
+      j(d(Ht), {
         ref_key: "mapRef",
-        ref: l,
-        zoom: a.initialZoom,
-        center: a.initialCenter,
-        "navigation-controls": { position: a.navigationControlPosition },
-        "geolocation-control": { position: a.geolocationControlPosition },
-        "basemap-change-controls": { toggle: !0, dropdown: !0, position: a.basemapControlPosition },
-        "map-search-control": { position: a.searchControlPosition },
+        ref: r,
+        zoom: l.initialZoom,
+        center: l.initialCenter,
+        "navigation-controls": { position: l.navigationControlPosition },
+        "geolocation-control": { position: l.geolocationControlPosition },
+        "basemap-change-controls": { toggle: !0, dropdown: !0, position: l.basemapControlPosition },
+        "map-search-control": { position: l.searchControlPosition },
         "enable-cyclomedia": !0,
-        "cyclomedia-config": a.cyclomediaConfig,
-        "cyclomedia-button-position": a.cyclomediaButtonPosition,
+        "cyclomedia-config": l.cyclomediaConfig,
+        "cyclomedia-button-position": l.cyclomediaButtonPosition,
         "enable-pictometry": !0,
-        "pictometry-credentials": a.pictometryCredentials,
-        "pictometry-button-position": a.pictometryButtonPosition,
+        "pictometry-credentials": l.pictometryCredentials,
+        "pictometry-button-position": l.pictometryButtonPosition,
         "tool-panel-layout": "vertical",
         "tool-panel-split-ratio": 50,
-        onZoom: $,
-        onClick: Me,
-        onMoveend: h,
-        onLoad: u,
-        onSearchResult: Et
+        onZoom: L,
+        onClick: Y,
+        onMoveend: S,
+        onLoad: x,
+        onSearchResult: Zt
       }, {
-        default: Ue(() => [
-          a.drawControlPosition !== null ? (f(), te(O(Nt), {
+        default: je(() => [
+          l.drawControlPosition !== null ? (y(), U(d(Jt), {
             key: 0,
-            position: a.drawControlPosition
-          }, null, 8, ["position"])) : E("", !0),
-          (f(!0), m(ie, null, se(at.value, (s) => (f(), te(O(wt), {
+            position: l.drawControlPosition
+          }, null, 8, ["position"])) : I("", !0),
+          (y(!0), k(le, null, pe(it.value, (s) => (y(), U(d(kt), {
             id: "tiled-" + s.id,
             key: "tiled-" + s.id,
-            source: tt(s),
+            source: ot(s),
             paint: { "raster-opacity": ye(s.id) },
             minzoom: s.minZoom,
             maxzoom: s.maxZoom
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), m(ie, null, se(it.value, (s) => (f(), te(O(wt), {
+          (y(!0), k(le, null, pe(lt.value, (s) => (y(), U(d(kt), {
             id: "dynamic-" + s.id,
             key: "dynamic-" + s.id,
-            source: nt(s),
+            source: Oe(s),
             paint: { "raster-opacity": ye(s.id) },
             minzoom: s.minZoom,
             maxzoom: s.maxZoom
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), m(ie, null, se(I.value, (s) => (f(), te(O(Lt), {
+          (y(!0), k(le, null, pe(te.value, (s) => (y(), U(d(xt), {
             id: s.id,
             key: s.id,
-            source: ge(s),
-            paint: _e(s),
+            source: Ce(s),
+            paint: ke(s),
             minzoom: s.minZoom,
             maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
-            onClick: re
+            onClick: _e
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), m(ie, null, se(F.value, (s) => (f(), te(O(St), {
+          (y(!0), k(le, null, pe(F.value, (s) => (y(), U(d($t), {
             id: s.id,
             key: s.id,
-            source: ge(s),
-            paint: _e(s),
+            source: Ce(s),
+            paint: ke(s),
             minzoom: s.minZoom,
             maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
-            onClick: re
+            onClick: _e
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), m(ie, null, se(R.value, (s) => (f(), te(O(ct), {
+          (y(!0), k(le, null, pe(O.value, (s) => (y(), U(d(ut), {
             id: s.id + "-outline",
             key: s.id + "-outline",
-            source: ge(s),
-            paint: Oe(s),
+            source: Ce(s),
+            paint: nt(s),
             minzoom: s.minZoom,
             maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
-            onClick: re
+            onClick: _e
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), m(ie, null, se(Z.value, (s) => (f(), te(O(ct), {
+          (y(!0), k(le, null, pe(_.value, (s) => (y(), U(d(ut), {
             id: s.id,
             key: s.id,
-            source: ge(s),
-            paint: _e(s),
+            source: Ce(s),
+            paint: ke(s),
             minzoom: s.minZoom,
             maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
-            onClick: re
+            onClick: _e
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          Q(O(Lt), {
+          j(d(xt), {
             id: "highlight-circles",
             key: "highlight-circles-layer",
-            source: { type: "geojson", data: Ce.value },
-            paint: lt
+            source: { type: "geojson", data: he.value },
+            paint: st
           }, null, 8, ["source"]),
-          Q(O(St), {
+          j(d($t), {
             id: "highlight-fill",
             key: "highlight-fill-layer",
-            source: { type: "geojson", data: ae.value },
-            paint: st
+            source: { type: "geojson", data: Re.value },
+            paint: Ke
           }, null, 8, ["source"]),
-          Q(O(ct), {
+          j(d(ut), {
             id: "highlight-lines",
             key: "highlight-lines-layer",
-            source: { type: "geojson", data: me.value },
-            paint: rt
+            source: { type: "geojson", data: oe.value },
+            paint: ct
           }, null, 8, ["source"]),
-          Q(O(Vt), {
-            "lng-lat": ht.value,
+          j(d(Kt), {
+            "lng-lat": wt.value,
             color: "#2176d2"
           }, null, 8, ["lng-lat"]),
-          Y.value && ze.value ? (f(), te(O(Ut), {
+          Te.value && ze.value ? (y(), U(d(Qt), {
             key: 1,
             "lng-lat": ze.value,
-            html: he.value,
+            html: Ue.value,
             "close-on-click": !1,
             offset: [0, -15],
-            "show-navigation": le.value.length > 1,
-            "current-feature-index": oe.value,
-            "total-features": le.value.length,
-            "layer-name": Y.value.layerTitle,
-            onClose: Me,
-            onNext: Je,
-            onPrevious: Te
-          }, null, 8, ["lng-lat", "html", "show-navigation", "current-feature-index", "total-features", "layer-name"])) : E("", !0)
+            "show-navigation": ie.value.length > 1,
+            "current-feature-index": X.value,
+            "total-features": ie.value.length,
+            "layer-name": Te.value.layerTitle,
+            onClose: Y,
+            onNext: Me,
+            onPrevious: ne
+          }, null, 8, ["lng-lat", "html", "show-navigation", "current-feature-index", "total-features", "layer-name"])) : I("", !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"])
     ]));
   }
-}), De = (t, i) => {
-  const a = t.__vccOpts || t;
-  for (const [o, l] of i)
-    a[o] = l;
-  return a;
-}, Gt = /* @__PURE__ */ De(qt, [["__scopeId", "data-v-5ed4d332"]]), Ht = ["disabled"], Jt = /* @__PURE__ */ $e({
+}), Se = (e, i) => {
+  const l = e.__vccOpts || e;
+  for (const [o, r] of i)
+    l[o] = r;
+  return l;
+}, to = /* @__PURE__ */ Se(eo, [["__scopeId", "data-v-1dc30b31"]]);
+function zt(e) {
+  let i = e.split("?")[0] || e;
+  return i = i.replace(/\/query$/, ""), i = i.replace(/\/$/, ""), i.toLowerCase();
+}
+const oo = ["disabled"], ao = /* @__PURE__ */ ue({
   inheritAttrs: !1,
   __name: "PhlButton",
   props: {
@@ -713,15 +718,15 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
     src: {},
     svgRaw: {}
   },
-  setup(t) {
-    const i = t, a = (y) => "href" in y && y.href !== void 0 || "to" in y && y.to !== void 0, o = z(() => ft(
+  setup(e) {
+    const i = e, l = (c) => "href" in c && c.href !== void 0 || "to" in c && c.to !== void 0, o = E(() => pt(
       "phila-button",
       `phila-button--${i.variant}`,
       i.size && `is-${i.size}`,
       i.iconOnly && "icon-button",
       i.iconOnly && i.variant === "standard" && "icon-button--standard",
       i.className
-    )), l = z(() => a(i) ? "to" in i && i.to !== void 0 ? {
+    )), r = E(() => l(i) ? "to" in i && i.to !== void 0 ? {
       to: i.to,
       disabled: i.disabled,
       className: o.value
@@ -731,7 +736,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       rel: i.rel,
       disabled: i.disabled,
       className: o.value
-    } : {}), n = z(
+    } : {}), n = E(
       () => ({
         iconDefinition: i.iconDefinition,
         iconClass: i.iconClass,
@@ -742,51 +747,51 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
         size: i.size
       })
     );
-    return (y, $) => a(i) ? (f(), te(O(Wt), dt({ key: 0 }, { ...l.value, ...y.$attrs }, { role: "button" }), {
-      default: Ue(() => [
-        Q(O(Ct), mt(vt(n.value)), {
-          default: Ue(() => [
-            fe(y.$slots, "default", {}, () => [
-              Le(N(i.text), 1)
+    return (c, L) => l(i) ? (y(), U(d(Xt), ft({ key: 0 }, { ...r.value, ...c.$attrs }, { role: "button" }), {
+      default: je(() => [
+        j(d(Pt), Lt(St(n.value)), {
+          default: je(() => [
+            ce(c.$slots, "default", {}, () => [
+              Le(W(i.text), 1)
             ])
           ]),
           _: 3
         }, 16)
       ]),
       _: 3
-    }, 16)) : (f(), m("button", dt({
+    }, 16)) : (y(), k("button", ft({
       key: 1,
       type: "button",
       disabled: i.disabled,
       class: o.value
-    }, y.$attrs), [
-      Q(O(Ct), mt(vt(n.value)), {
-        default: Ue(() => [
-          fe(y.$slots, "default", {}, () => [
-            Le(N(i.text), 1)
+    }, c.$attrs), [
+      j(d(Pt), Lt(St(n.value)), {
+        default: je(() => [
+          ce(c.$slots, "default", {}, () => [
+            Le(W(i.text), 1)
           ])
         ]),
         _: 3
       }, 16)
-    ], 16, Ht));
+    ], 16, oo));
   }
 });
-var Kt = {
+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"]
-}, Qt = Kt, Xt = {
+}, lo = io, no = {
   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"]
-}, Yt = Xt;
-const eo = ["for"], to = { class: "state-layer" }, oo = { class: "content" }, ao = { class: "input-text-container" }, io = ["id", "placeholder", "aria-label"], no = {
+}, ro = no;
+const so = ["for"], co = { class: "state-layer" }, uo = { class: "content" }, fo = { class: "input-text-container" }, po = ["id", "placeholder", "aria-label"], yo = {
   key: 1,
   class: "has-text-body-small phila-supporting-text"
-}, lo = {
+}, mo = {
   key: 2,
   class: "has-text-body-small phila-error-text"
-}, ro = /* @__PURE__ */ $e({
+}, go = /* @__PURE__ */ ue({
   inheritAttrs: !1,
   __name: "TextField",
   props: {
@@ -803,137 +808,243 @@ const eo = ["for"], to = { class: "state-layer" }, oo = { class: "content" }, ao
     } }
   },
   emits: ["update:modelValue"],
-  setup(t, { emit: i }) {
-    const a = Ot(), o = t, l = z(() => typeof o.error == "string" ? o.error : o.error[0]), n = zt(o, "id"), y = i, $ = k(""), g = z({
-      get: () => o.modelValue !== void 0 ? o.modelValue : $.value,
-      set: (p) => {
-        y("update:modelValue", p), $.value = p;
+  setup(e, { emit: i }) {
+    const l = Vt(), o = e, r = E(() => typeof o.error == "string" ? o.error : o.error[0]), n = Nt(o, "id"), c = i, L = w(""), f = E({
+      get: () => o.modelValue !== void 0 ? o.modelValue : L.value,
+      set: (h) => {
+        c("update:modelValue", h), L.value = h;
       }
-    }), M = z(() => {
-      const p = ["default-class"];
-      return a.disabled != null && p.push("phila-input--disabled"), l.value && p.push("phila-input--error"), a.required != null && p.push("phila-input--required"), ft(...p);
-    }), L = z(() => {
-      const p = [];
-      return g.value !== "" && p.push("phila-text-field--filled"), o.className && p.push(o.className), ft(...p);
-    }), S = z(() => {
-      if (!(o.label || a["aria-label"]))
+    }), P = E(() => {
+      const h = ["default-class"];
+      return l.disabled != null && h.push("phila-input--disabled"), r.value && h.push("phila-input--error"), l.required != null && h.push("phila-input--required"), pt(...h);
+    }), m = E(() => {
+      const h = [];
+      return f.value !== "" && h.push("phila-text-field--filled"), o.className && h.push(o.className), pt(...h);
+    }), b = E(() => {
+      if (!(o.label || l["aria-label"]))
         return o.placeholder || void 0;
-    }), r = k(null), C = (p) => {
-      p.target.closest("button") || r.value?.focus();
+    }), a = w(null), v = (h) => {
+      h.target.closest("button") || a.value?.focus();
     };
-    return (p, h) => (f(), m("div", {
-      class: ne(["phila-input", M.value])
+    return (h, S) => (y(), k("div", {
+      class: ae(["phila-input", P.value])
     }, [
-      o.label ? (f(), m("label", {
+      o.label ? (y(), k("label", {
         key: 0,
         for: n.value,
         class: "has-text-label-small phila-label"
-      }, N(o.label), 9, eo)) : E("", !0),
-      P("div", {
-        class: ne(["phila-text-field", L.value]),
-        onClick: C
+      }, W(o.label), 9, so)) : I("", !0),
+      M("div", {
+        class: ae(["phila-text-field", m.value]),
+        onClick: v
       }, [
-        P("div", to, [
-          o.leadingIcon ? (f(), te(O(be), {
+        M("div", co, [
+          o.leadingIcon ? (y(), U(d(be), {
             key: 0,
             "icon-class": o.leadingIcon,
             inline: "",
             decorative: ""
-          }, null, 8, ["icon-class"])) : E("", !0),
-          P("div", oo, [
-            P("div", ao, [
-              Mt(P("input", dt({
+          }, null, 8, ["icon-class"])) : I("", !0),
+          M("div", uo, [
+            M("div", fo, [
+              It(M("input", ft({
                 id: n.value,
                 ref_key: "inputRef",
-                ref: r,
-                "onUpdate:modelValue": h[0] || (h[0] = (u) => g.value = u),
+                ref: a,
+                "onUpdate:modelValue": S[0] || (S[0] = (x) => f.value = x),
                 class: "phila-text-field-input has-text-body-default",
                 placeholder: o.placeholder,
-                "aria-label": S.value
-              }, O(a)), null, 16, io), [
-                [It, g.value]
+                "aria-label": b.value
+              }, d(l)), null, 16, po), [
+                [Ut, f.value]
               ])
             ])
           ]),
-          g.value != "" ? (f(), te(O(Jt), {
+          f.value != "" ? (y(), U(d(ao), {
             key: 1,
             variant: "standard",
             size: "small",
             "icon-only": "",
-            "icon-definition": O(Yt),
-            onClick: h[1] || (h[1] = (u) => g.value = "")
-          }, null, 8, ["icon-definition"])) : E("", !0),
-          o.trailingIcon ? (f(), te(O(be), {
+            "icon-definition": d(ro),
+            onClick: S[1] || (S[1] = (x) => f.value = "")
+          }, null, 8, ["icon-definition"])) : I("", !0),
+          o.trailingIcon ? (y(), U(d(be), {
             key: 2,
             size: "small",
             "icon-class": o.trailingIcon,
             inline: "",
             decorative: ""
-          }, null, 8, ["icon-class"])) : E("", !0),
-          fe(p.$slots, "trailing-action")
+          }, null, 8, ["icon-class"])) : I("", !0),
+          ce(h.$slots, "trailing-action")
         ])
       ], 2),
-      o.supportingText ? (f(), m("div", no, N(o.supportingText), 1)) : E("", !0),
-      l.value ? (f(), m("div", lo, [
-        Q(O(be), {
-          "icon-definition": O(Qt),
+      o.supportingText ? (y(), k("div", yo, W(o.supportingText), 1)) : I("", !0),
+      r.value ? (y(), k("div", mo, [
+        j(d(be), {
+          "icon-definition": d(lo),
           size: "small",
           inline: "",
           decorative: ""
         }, null, 8, ["icon-definition"]),
-        Le(" " + N(l.value), 1)
-      ])) : E("", !0)
+        Le(" " + W(r.value), 1)
+      ])) : I("", !0)
     ], 2));
   }
 });
-var so = {
+var ho = {
   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"]
-}, co = {
+}, 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"]
-}, uo = {
+}, 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"]
-}, kt = {
+}, Mt = {
   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"]
-}, fo = {
+}, 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"]
-}, po = {
+}, 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 yo = { class: "layer-panel" }, go = {
-  key: 0,
-  class: "search-box"
-}, ho = {
-  key: 1,
-  class: "topics-container"
-}, mo = { class: "layer-row" }, vo = ["href", "aria-label"], bo = {
-  key: 1,
-  class: "metadata-placeholder"
-}, wo = ["checked", "disabled", "onChange"], Lo = { class: "layer-title" }, So = {
+const So = {
   key: 0,
   class: "loading-indicator",
   role: "status"
 }, Co = ["aria-label"], ko = {
   key: 2,
   class: "zoom-indicator"
-}, xo = {
+}, xo = /* @__PURE__ */ ue({
+  __name: "LayerStatusIndicators",
+  props: {
+    loading: { type: Boolean },
+    error: {},
+    unavailable: { type: Boolean }
+  },
+  setup(e) {
+    return (i, l) => (y(), k(le, null, [
+      e.loading && !e.unavailable ? (y(), k("span", So, " Loading... ")) : I("", !0),
+      e.error ? (y(), k("span", {
+        key: 1,
+        class: "error-indicator",
+        "aria-label": e.error,
+        role: "status"
+      }, " Error ", 8, Co)) : I("", !0),
+      e.unavailable ? (y(), k("span", ko, " (zoom in) ")) : I("", !0)
+    ], 64));
+  }
+}), Ye = /* @__PURE__ */ Se(xo, [["__scopeId", "data-v-19b1b402"]]), $o = { class: "opacity-control" }, Po = ["for"], Mo = ["id", "value", "aria-label"], To = /* @__PURE__ */ ue({
+  __name: "LayerOpacitySlider",
+  props: {
+    layerId: {},
+    layerName: {},
+    opacity: {}
+  },
+  emits: ["update:opacity"],
+  setup(e, { emit: i }) {
+    const l = i;
+    function o(r) {
+      const n = r.target;
+      l("update:opacity", parseFloat(n.value));
+    }
+    return (r, n) => (y(), k("div", $o, [
+      M("label", {
+        class: "opacity-label",
+        for: "opacity-" + e.layerId
+      }, " Opacity: " + W(Math.round(e.opacity * 100)) + "% ", 9, Po),
+      M("input", {
+        id: "opacity-" + e.layerId,
+        type: "range",
+        min: "0",
+        max: "1",
+        step: "0.05",
+        value: e.opacity,
+        "aria-label": "Opacity for " + e.layerName,
+        class: "opacity-slider",
+        onInput: o
+      }, null, 40, Mo)
+    ]));
+  }
+}), mt = /* @__PURE__ */ Se(To, [["__scopeId", "data-v-1a025f6a"]]), Fo = ["aria-label"], Eo = { class: "legend-label" }, Oo = /* @__PURE__ */ ue({
+  __name: "LayerLegend",
+  props: {
+    items: {},
+    label: {}
+  },
+  setup(e) {
+    return (i, l) => (y(), k("ul", {
+      class: "layer-legend",
+      "aria-label": e.label
+    }, [
+      (y(!0), k(le, null, pe(e.items, (o, r) => (y(), k("li", {
+        key: r,
+        class: "legend-item"
+      }, [
+        o.type === "circle" ? (y(), k("span", {
+          key: 0,
+          class: "legend-symbol legend-circle",
+          style: se({ backgroundColor: o.color }),
+          "aria-hidden": "true"
+        }, null, 4)) : o.type === "line" ? (y(), k("span", {
+          key: 1,
+          class: "legend-symbol legend-line",
+          style: se({
+            backgroundColor: o.color,
+            height: `${o.width || 2}px`
+          }),
+          "aria-hidden": "true"
+        }, null, 4)) : o.type === "fill" ? (y(), k("span", {
+          key: 2,
+          class: "legend-symbol legend-fill",
+          style: se({ backgroundColor: o.color }),
+          "aria-hidden": "true"
+        }, null, 4)) : I("", !0),
+        M("span", Eo, W(o.label), 1)
+      ]))), 128))
+    ], 8, Fo));
+  }
+}), gt = /* @__PURE__ */ Se(Oo, [["__scopeId", "data-v-62e210e3"]]);
+function ht(e) {
+  function i(c) {
+    return e().visibleLayerIds.has(c);
+  }
+  function l(c) {
+    return e().layerOpacities[c] ?? 1;
+  }
+  function o(c) {
+    return e().loadingLayerIds.has(c);
+  }
+  function r(c) {
+    return e().layerErrors[c] || null;
+  }
+  function n(c) {
+    const L = e().currentZoom, f = c.minZoom, P = c.maxZoom;
+    return !(f !== void 0 && L < f || P !== void 0 && L > P);
+  }
+  return { isVisible: i, getLayerOpacity: l, isLayerLoading: o, getLayerError: r, isLayerAvailableAtZoom: n };
+}
+const Io = { class: "layer-panel" }, zo = {
   key: 0,
-  class: "opacity-control"
-}, $o = ["for"], _o = ["id", "value", "aria-label", "onInput"], Po = ["aria-label"], Mo = { class: "legend-label" }, To = {
+  class: "search-box"
+}, _o = {
+  key: 1,
+  class: "topics-container"
+}, Ro = { class: "layer-row" }, Do = ["href", "aria-label"], Bo = {
+  key: 1,
+  class: "metadata-placeholder"
+}, Ao = ["checked", "disabled", "onChange"], Zo = { class: "layer-title" }, Vo = {
   key: 0,
   class: "no-results"
-}, Fo = /* @__PURE__ */ $e({
+}, No = /* @__PURE__ */ ue({
   __name: "LayerPanel",
   props: {
     layerList: {},
@@ -951,60 +1062,41 @@ const yo = { class: "layer-panel" }, go = {
     searchPlaceholder: { default: "Filter layers..." }
   },
   emits: ["toggleLayer", "setOpacity", "updateSearch"],
-  setup(t, { emit: i }) {
-    const a = t, o = i, l = z(() => {
-      if (!a.searchQuery.trim())
-        return a.layerList;
-      const u = a.searchQuery.toLowerCase();
-      return a.layerList.filter((c) => c.config.title.toLowerCase().includes(u));
+  setup(e, { emit: i }) {
+    const l = e, o = i, r = E(() => {
+      if (!l.searchQuery.trim())
+        return l.layerList;
+      const h = l.searchQuery.toLowerCase();
+      return l.layerList.filter((S) => S.config.title.toLowerCase().includes(h));
     });
-    function n(u) {
-      let c = u.split("?")[0] || u;
-      return c = c.replace(/\/query$/, ""), c = c.replace(/\/$/, ""), c.toLowerCase();
-    }
-    function y(u) {
-      const c = n(u);
-      return a.layerMetadata[c] || null;
-    }
-    const $ = z(() => a.layerList.some((u) => y(u.config.url)));
-    function g(u) {
-      return a.visibleLayers.has(u);
-    }
-    function M(u) {
-      return a.layerOpacities[u] ?? 1;
-    }
-    function L(u) {
-      return a.loadingLayers.has(u);
-    }
-    function S(u) {
-      return a.layerErrors[u] || null;
-    }
-    function r(u) {
-      const c = a.currentZoom, v = u.minZoom, I = u.maxZoom;
-      return !(v !== void 0 && c < v || I !== void 0 && c > I);
-    }
-    const C = z({
-      get: () => a.searchQuery,
-      set: (u) => o("updateSearch", u)
+    function n(h) {
+      const S = zt(h);
+      return l.layerMetadata[S] || null;
+    }
+    const c = E(() => l.layerList.some((h) => n(h.config.url))), { isVisible: L, getLayerOpacity: f, isLayerLoading: P, getLayerError: m, isLayerAvailableAtZoom: b } = ht(() => ({
+      visibleLayerIds: l.visibleLayers,
+      layerOpacities: l.layerOpacities,
+      loadingLayerIds: l.loadingLayers,
+      layerErrors: l.layerErrors,
+      currentZoom: l.currentZoom
+    })), a = E({
+      get: () => l.searchQuery,
+      set: (h) => o("updateSearch", h)
     });
-    function p(u) {
-      o("toggleLayer", u);
-    }
-    function h(u, c) {
-      const v = c.target, I = parseFloat(v.value);
-      o("setOpacity", u, I);
-    }
-    return (u, c) => (f(), m("div", yo, [
-      t.showSearch ? (f(), m("div", go, [
-        Q(O(ro), {
-          modelValue: C.value,
-          "onUpdate:modelValue": c[0] || (c[0] = (v) => C.value = v),
-          placeholder: t.searchPlaceholder,
+    function v(h) {
+      o("toggleLayer", h);
+    }
+    return (h, S) => (y(), k("div", Io, [
+      e.showSearch ? (y(), k("div", zo, [
+        j(d(go), {
+          modelValue: a.value,
+          "onUpdate:modelValue": S[0] || (S[0] = (x) => a.value = x),
+          placeholder: e.searchPlaceholder,
           "class-name": "layer-search-field"
         }, {
-          "trailing-action": Ue(() => [
-            Q(O(be), {
-              "icon-definition": O(so),
+          "trailing-action": je(() => [
+            j(d(be), {
+              "icon-definition": d(ho),
               size: "small",
               inline: "",
               decorative: ""
@@ -1012,143 +1104,104 @@ const yo = { class: "layer-panel" }, go = {
           ]),
           _: 1
         }, 8, ["modelValue", "placeholder"])
-      ])) : E("", !0),
-      t.mode === "topics" ? (f(), m("div", ho, [
-        fe(u.$slots, "topics", {}, () => [
-          c[2] || (c[2] = P("div", { class: "no-topics" }, ' No topic components provided. Use the "topics" slot to add TopicAccordion components. ', -1))
+      ])) : I("", !0),
+      e.mode === "topics" ? (y(), k("div", _o, [
+        ce(h.$slots, "topics", {}, () => [
+          S[2] || (S[2] = M("div", { class: "no-topics" }, ' No topic components provided. Use the "topics" slot to add TopicAccordion components. ', -1))
         ], !0)
-      ])) : (f(), m("div", {
+      ])) : (y(), k("div", {
         key: 2,
-        class: ne(["layer-list", { "has-metadata": $.value }])
+        class: ae(["layer-list", { "has-metadata": c.value }])
       }, [
-        (f(!0), m(ie, null, se(l.value, (v) => (f(), m("div", {
-          key: v.config.id,
+        (y(!0), k(le, null, pe(r.value, (x) => (y(), k("div", {
+          key: x.config.id,
           class: "layer-item"
         }, [
-          P("div", mo, [
-            y(v.config.url) ? (f(), m("a", {
+          M("div", Ro, [
+            n(x.config.url) ? (y(), k("a", {
               key: 0,
-              href: y(v.config.url) || "",
+              href: n(x.config.url) || "",
               target: "_blank",
               rel: "noopener noreferrer",
               class: "metadata-link",
-              "aria-label": "View metadata for " + v.config.title,
-              onClick: c[1] || (c[1] = Rt(() => {
+              "aria-label": "View metadata for " + x.config.title,
+              onClick: S[1] || (S[1] = Wt(() => {
               }, ["stop"]))
             }, [
-              Q(O(be), {
-                "icon-definition": O(po),
+              j(d(be), {
+                "icon-definition": d(Lo),
                 size: "small",
                 inline: "",
                 decorative: ""
               }, null, 8, ["icon-definition"])
-            ], 8, vo)) : $.value ? (f(), m("span", bo)) : E("", !0),
-            P("label", {
-              class: ne(["layer-checkbox", {
-                "layer-unavailable": !r(v.config),
-                "layer-error": S(v.config.id)
+            ], 8, Do)) : c.value ? (y(), k("span", Bo)) : I("", !0),
+            M("label", {
+              class: ae(["layer-checkbox", {
+                "layer-unavailable": !d(b)(x.config),
+                "layer-error": d(m)(x.config.id)
               }])
             }, [
-              P("input", {
+              M("input", {
                 type: "checkbox",
-                checked: g(v.config.id),
-                disabled: !r(v.config),
-                onChange: (I) => p(v.config.id)
-              }, null, 40, wo),
-              P("span", Lo, [
-                Le(N(v.config.title) + " ", 1),
-                L(v.config.id) && r(v.config) ? (f(), m("span", So, " Loading... ")) : E("", !0),
-                S(v.config.id) ? (f(), m("span", {
-                  key: 1,
-                  class: "error-indicator",
-                  "aria-label": S(v.config.id) || "Error",
-                  role: "status"
-                }, " Error ", 8, Co)) : E("", !0),
-                r(v.config) ? E("", !0) : (f(), m("span", ko, " (zoom in) "))
+                checked: d(L)(x.config.id),
+                disabled: !d(b)(x.config),
+                onChange: (B) => v(x.config.id)
+              }, null, 40, Ao),
+              M("span", Zo, [
+                Le(W(x.config.title) + " ", 1),
+                j(Ye, {
+                  loading: d(P)(x.config.id),
+                  error: d(m)(x.config.id),
+                  unavailable: !d(b)(x.config)
+                }, null, 8, ["loading", "error", "unavailable"])
               ])
             ], 2)
           ]),
-          t.showOpacity && g(v.config.id) && r(v.config) ? (f(), m("div", xo, [
-            P("label", {
-              class: "opacity-label",
-              for: "opacity-" + v.config.id
-            }, " Opacity: " + N(Math.round(M(v.config.id) * 100)) + "% ", 9, $o),
-            P("input", {
-              id: "opacity-" + v.config.id,
-              type: "range",
-              min: "0",
-              max: "1",
-              step: "0.05",
-              value: M(v.config.id),
-              "aria-label": "Opacity for " + v.config.title,
-              class: "opacity-slider",
-              onInput: (I) => h(v.config.id, I)
-            }, null, 40, _o)
-          ])) : E("", !0),
-          t.showLegend && g(v.config.id) && r(v.config) && v.config.legend?.length ? (f(), m("ul", {
+          e.showOpacity && d(L)(x.config.id) && d(b)(x.config) ? (y(), U(mt, {
+            key: 0,
+            "layer-id": x.config.id,
+            "layer-name": x.config.title,
+            opacity: d(f)(x.config.id),
+            "onUpdate:opacity": (B) => o("setOpacity", x.config.id, B)
+          }, null, 8, ["layer-id", "layer-name", "opacity", "onUpdate:opacity"])) : I("", !0),
+          e.showLegend && d(L)(x.config.id) && d(b)(x.config) && x.config.legend?.length ? (y(), U(gt, {
             key: 1,
-            class: "layer-legend",
-            "aria-label": "Legend for " + v.config.title
-          }, [
-            (f(!0), m(ie, null, se(v.config.legend, (I, F) => (f(), m("li", {
-              key: F,
-              class: "legend-item"
-            }, [
-              I.type === "circle" ? (f(), m("span", {
-                key: 0,
-                class: "legend-symbol legend-circle",
-                style: J({ backgroundColor: I.color }),
-                "aria-hidden": "true"
-              }, null, 4)) : I.type === "line" ? (f(), m("span", {
-                key: 1,
-                class: "legend-symbol legend-line",
-                style: J({
-                  backgroundColor: I.color,
-                  height: `${I.width || 2}px`
-                }),
-                "aria-hidden": "true"
-              }, null, 4)) : I.type === "fill" ? (f(), m("span", {
-                key: 2,
-                class: "legend-symbol legend-fill",
-                style: J({ backgroundColor: I.color }),
-                "aria-hidden": "true"
-              }, null, 4)) : E("", !0),
-              P("span", Mo, N(I.label), 1)
-            ]))), 128))
-          ], 8, Po)) : E("", !0)
+            items: x.config.legend,
+            label: "Legend for " + x.config.title
+          }, null, 8, ["items", "label"])) : I("", !0)
         ]))), 128)),
-        l.value.length === 0 ? (f(), m("div", To, 'No layers match "' + N(t.searchQuery) + '"', 1)) : E("", !0)
+        r.value.length === 0 ? (y(), k("div", Vo, 'No layers match "' + W(e.searchQuery) + '"', 1)) : I("", !0)
       ], 2))
     ]));
   }
-}), Eo = /* @__PURE__ */ De(Fo, [["__scopeId", "data-v-79d2401f"]]);
-function D(t) {
-  if (!t || !Array.isArray(t) || t.length < 3) return "#888888";
-  const i = t[0], a = t[1], o = t[2], n = (t[3] ?? 255) / 255;
-  return n === 1 ? `#${i.toString(16).padStart(2, "0")}${a.toString(16).padStart(2, "0")}${o.toString(16).padStart(2, "0")}` : `rgba(${i}, ${a}, ${o}, ${n.toFixed(2)})`;
+}), Uo = /* @__PURE__ */ Se(No, [["__scopeId", "data-v-e48bb978"]]);
+function z(e) {
+  if (!e || !Array.isArray(e) || e.length < 3) return "#888888";
+  const i = e[0], l = e[1], o = e[2], n = (e[3] ?? 255) / 255;
+  return n === 1 ? `#${i.toString(16).padStart(2, "0")}${l.toString(16).padStart(2, "0")}${o.toString(16).padStart(2, "0")}` : `rgba(${i}, ${l}, ${o}, ${n.toFixed(2)})`;
 }
-function we(t) {
-  return t !== void 0 ? t : 1;
+function we(e) {
+  return e !== void 0 ? e : 1;
 }
-const Oo = 559082264;
-function xt(t) {
-  return !t || t <= 0 ? null : Math.round(Math.log2(Oo / t) * 100) / 100;
+const Wo = 559082264;
+function Tt(e) {
+  return !e || e <= 0 ? null : Math.round(Math.log2(Wo / e) * 100) / 100;
 }
-function zo(t, i) {
-  const a = {};
-  if (t && t > 0) {
-    const o = xt(t);
-    o !== null && (a.minZoom = o);
+function jo(e, i) {
+  const l = {};
+  if (e && e > 0) {
+    const o = Tt(e);
+    o !== null && (l.minZoom = o);
   }
   if (i && i > 0) {
-    const o = xt(i);
-    o !== null && (a.maxZoom = o);
+    const o = Tt(i);
+    o !== null && (l.maxZoom = o);
   }
-  return a;
+  return l;
 }
-function et(t) {
-  if (!t) return "fill";
-  switch (t.type) {
+function tt(e) {
+  if (!e) return "fill";
+  switch (e.type) {
     case "esriSFS":
       return "fill";
     case "esriSLS":
@@ -1163,344 +1216,344 @@ function et(t) {
       return "fill";
   }
 }
-function xe(t) {
-  return !(!t || t.style === "esriSLSNull" || t.color === null || t.width === 0 || t.color && t.color[3] === 0);
+function $e(e) {
+  return !(!e || e.style === "esriSLSNull" || e.color === null || e.width === 0 || e.color && e.color[3] === 0);
 }
-function ut(t) {
-  return String(t);
+function dt(e) {
+  return String(e);
 }
-function Tt(t, i, a) {
-  const o = t.symbol, l = et(o);
-  let n = {}, y = [], $ = null;
-  if (l === "fill" && o) {
-    const g = o.color === null ? 0 : o.color?.[3] ?? 255, M = g === 0 ? "rgba(0, 0, 0, 0)" : D(o.color), L = g === 0 ? 0 : g < 255 ? 1 : we(i);
+function _t(e, i, l) {
+  const o = e.symbol, r = tt(o);
+  let n = {}, c = [], L = null;
+  if (r === "fill" && o) {
+    const f = o.color === null ? 0 : o.color?.[3] ?? 255, P = f === 0 ? "rgba(0, 0, 0, 0)" : z(o.color), m = f === 0 ? 0 : f < 255 ? 1 : we(i);
     if (n = {
-      "fill-color": M,
-      "fill-opacity": L
-    }, xe(o.outline)) {
-      const S = o.outline.width || 1;
-      $ = {
-        "line-color": D(o.outline.color),
-        "line-width": S
+      "fill-color": P,
+      "fill-opacity": m
+    }, $e(o.outline)) {
+      const b = o.outline.width || 1;
+      L = {
+        "line-color": z(o.outline.color),
+        "line-width": b
       };
     }
-    y = [
+    c = [
       {
         type: "fill",
-        color: D(o.color),
-        label: t.label || "Feature"
+        color: z(o.color),
+        label: e.label || "Feature"
       }
     ];
-  } else if (l === "line" && o)
+  } else if (r === "line" && o)
     n = {
-      "line-color": D(o.color),
+      "line-color": z(o.color),
       "line-width": o.width || 1,
       "line-opacity": we(i)
-    }, y = [
+    }, c = [
       {
         type: "line",
-        color: D(o.color),
+        color: z(o.color),
         width: o.width || 1,
-        label: t.label || "Feature"
+        label: e.label || "Feature"
       }
     ];
-  else if (l === "circle" && o) {
-    const g = Math.round((o.size || 6) * 0.71 * 100) / 100;
+  else if (r === "circle" && o) {
+    const f = Math.round((o.size || 6) * 0.71 * 100) / 100;
     n = {
-      "circle-color": D(o.color),
-      "circle-radius": g,
+      "circle-color": z(o.color),
+      "circle-radius": f,
       "circle-opacity": we(i)
-    }, xe(o.outline) && (n["circle-stroke-color"] = D(o.outline.color), n["circle-stroke-width"] = o.outline.width || 1), y = [
+    }, $e(o.outline) && (n["circle-stroke-color"] = z(o.outline.color), n["circle-stroke-width"] = o.outline.width || 1), c = [
       {
         type: "circle",
-        color: D(o.color),
-        label: t.label || "Feature"
+        color: z(o.color),
+        label: e.label || "Feature"
       }
     ];
   }
-  return { paint: n, legend: y, geomType: l, outlinePaint: $ };
+  return { paint: n, legend: c, geomType: r, outlinePaint: L };
 }
-function Io(t, i, a) {
-  const o = t.field1.toLowerCase(), l = t.uniqueValueInfos || [], n = t.defaultSymbol;
-  if (l.length === 0)
-    return Tt({ ...t, symbol: n }, i);
-  const y = l[0]?.symbol || n, $ = et(y);
-  let g = {};
-  const M = [];
-  let L = null;
-  if ($ === "fill") {
-    const S = ["match", ["to-string", ["get", o]]];
-    for (const r of l) {
-      S.push(ut(r.value)), S.push(D(r.symbol?.color));
-      const C = String(r.value), h = a?.get(C) || r.label || C;
-      M.push({
+function qo(e, i, l) {
+  const o = e.field1.toLowerCase(), r = e.uniqueValueInfos || [], n = e.defaultSymbol;
+  if (r.length === 0)
+    return _t({ ...e, symbol: n }, i);
+  const c = r[0]?.symbol || n, L = tt(c);
+  let f = {};
+  const P = [];
+  let m = null;
+  if (L === "fill") {
+    const b = ["match", ["to-string", ["get", o]]];
+    for (const a of r) {
+      b.push(dt(a.value)), b.push(z(a.symbol?.color));
+      const v = String(a.value), S = l?.get(v) || a.label || v;
+      P.push({
         type: "fill",
-        color: D(r.symbol?.color),
-        label: h
+        color: z(a.symbol?.color),
+        label: S
       });
     }
-    if (S.push(n ? D(n.color) : "rgba(0, 0, 0, 0)"), g = {
-      "fill-color": S,
+    if (b.push(n ? z(n.color) : "rgba(0, 0, 0, 0)"), f = {
+      "fill-color": b,
       "fill-opacity": we(i)
-    }, xe(y?.outline)) {
-      const r = Math.max(y.outline.width || 1, 1);
-      L = {
-        "line-color": D(y.outline.color),
-        "line-width": r
+    }, $e(c?.outline)) {
+      const a = Math.max(c.outline.width || 1, 1);
+      m = {
+        "line-color": z(c.outline.color),
+        "line-width": a
       };
     }
-  } else if ($ === "line") {
-    const S = ["match", ["to-string", ["get", o]]];
-    for (const r of l) {
-      S.push(ut(r.value)), S.push(D(r.symbol?.color));
-      const C = String(r.value), h = a?.get(C) || r.label || C;
-      M.push({
+  } else if (L === "line") {
+    const b = ["match", ["to-string", ["get", o]]];
+    for (const a of r) {
+      b.push(dt(a.value)), b.push(z(a.symbol?.color));
+      const v = String(a.value), S = l?.get(v) || a.label || v;
+      P.push({
         type: "line",
-        color: D(r.symbol?.color),
-        width: r.symbol?.width || 1,
-        label: h
+        color: z(a.symbol?.color),
+        width: a.symbol?.width || 1,
+        label: S
       });
     }
-    S.push(n ? D(n.color) : "rgba(0, 0, 0, 0)"), g = {
-      "line-color": S,
-      "line-width": y?.width || 2,
+    b.push(n ? z(n.color) : "rgba(0, 0, 0, 0)"), f = {
+      "line-color": b,
+      "line-width": c?.width || 2,
       "line-opacity": we(i)
     };
-  } else if ($ === "circle") {
-    const S = ["match", ["to-string", ["get", o]]];
-    for (const C of l) {
-      S.push(ut(C.value)), S.push(D(C.symbol?.color));
-      const p = String(C.value), u = a?.get(p) || C.label || p;
-      M.push({
+  } else if (L === "circle") {
+    const b = ["match", ["to-string", ["get", o]]];
+    for (const v of r) {
+      b.push(dt(v.value)), b.push(z(v.symbol?.color));
+      const h = String(v.value), x = l?.get(h) || v.label || h;
+      P.push({
         type: "circle",
-        color: D(C.symbol?.color),
-        label: u
+        color: z(v.symbol?.color),
+        label: x
       });
     }
-    S.push(n ? D(n.color) : "rgba(0, 0, 0, 0)");
-    const r = Math.round((y?.size || 6) * 0.71 * 100) / 100;
-    g = {
-      "circle-color": S,
-      "circle-radius": r,
+    b.push(n ? z(n.color) : "rgba(0, 0, 0, 0)");
+    const a = Math.round((c?.size || 6) * 0.71 * 100) / 100;
+    f = {
+      "circle-color": b,
+      "circle-radius": a,
       "circle-opacity": we(i)
-    }, xe(y?.outline) && (g["circle-stroke-color"] = D(y.outline.color), g["circle-stroke-width"] = y.outline.width || 1);
+    }, $e(c?.outline) && (f["circle-stroke-color"] = z(c.outline.color), f["circle-stroke-width"] = c.outline.width || 1);
   }
-  return { paint: g, legend: M, geomType: $, outlinePaint: L };
+  return { paint: f, legend: P, geomType: L, outlinePaint: m };
 }
-function Ro(t, i) {
-  const a = t.field.toLowerCase(), o = t.classBreakInfos || [], l = t.visualVariables?.find((L) => L.type === "colorInfo");
-  if (l?.stops && l.stops.length > 0)
-    return Do(l, a, t, i);
+function Go(e, i) {
+  const l = e.field.toLowerCase(), o = e.classBreakInfos || [], r = e.visualVariables?.find((m) => m.type === "colorInfo");
+  if (r?.stops && r.stops.length > 0)
+    return Ho(r, l, e, i);
   if (o.length === 0)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const n = o[0]?.symbol, y = et(n);
-  let $ = {};
-  const g = [];
-  let M = null;
-  if (y === "fill") {
-    const L = ["step", ["get", a]];
-    L.push(D(o[0]?.symbol?.color));
-    for (let S = 0; S < o.length; S++) {
-      const r = o[S];
-      S > 0 && (L.push(o[S - 1].classMaxValue), L.push(D(r.symbol?.color))), g.push({
+  const n = o[0]?.symbol, c = tt(n);
+  let L = {};
+  const f = [];
+  let P = null;
+  if (c === "fill") {
+    const m = ["step", ["get", l]];
+    m.push(z(o[0]?.symbol?.color));
+    for (let b = 0; b < o.length; b++) {
+      const a = o[b];
+      b > 0 && (m.push(o[b - 1].classMaxValue), m.push(z(a.symbol?.color))), f.push({
         type: "fill",
-        color: D(r.symbol?.color),
-        label: r.label || `${r.classMaxValue}`
+        color: z(a.symbol?.color),
+        label: a.label || `${a.classMaxValue}`
       });
     }
-    if ($ = {
-      "fill-color": L,
+    if (L = {
+      "fill-color": m,
       "fill-opacity": we(i)
-    }, xe(n?.outline)) {
-      const S = n.outline.width || 1;
-      M = {
-        "line-color": D(n.outline.color),
-        "line-width": S
+    }, $e(n?.outline)) {
+      const b = n.outline.width || 1;
+      P = {
+        "line-color": z(n.outline.color),
+        "line-width": b
       };
     }
-  } else if (y === "line") {
-    const L = ["step", ["get", a]];
-    L.push(D(o[0]?.symbol?.color));
-    let S = t.minValue ?? 0;
-    for (let C = 0; C < o.length; C++) {
-      const p = o[C];
-      C > 0 && (L.push(o[C - 1].classMaxValue), L.push(D(p.symbol?.color))), g.push({
+  } else if (c === "line") {
+    const m = ["step", ["get", l]];
+    m.push(z(o[0]?.symbol?.color));
+    let b = e.minValue ?? 0;
+    for (let v = 0; v < o.length; v++) {
+      const h = o[v];
+      v > 0 && (m.push(o[v - 1].classMaxValue), m.push(z(h.symbol?.color))), f.push({
         type: "line",
-        color: D(p.symbol?.color),
-        width: p.symbol?.width || n?.width || 2,
-        label: p.label || `${S} - ${p.classMaxValue}`
-      }), S = p.classMaxValue + 1;
-    }
-    const r = n?.width || 2;
-    $ = {
-      "line-color": L,
-      "line-width": r,
+        color: z(h.symbol?.color),
+        width: h.symbol?.width || n?.width || 2,
+        label: h.label || `${b} - ${h.classMaxValue}`
+      }), b = h.classMaxValue + 1;
+    }
+    const a = n?.width || 2;
+    L = {
+      "line-color": m,
+      "line-width": a,
       "line-opacity": we(i)
     };
   }
-  return { paint: $, legend: g, geomType: y, outlinePaint: M };
+  return { paint: L, legend: f, geomType: c, outlinePaint: P };
 }
-function Do(t, i, a, o) {
-  const l = t.stops || [];
-  if (l.length === 0)
+function Ho(e, i, l, o) {
+  const r = e.stops || [];
+  if (r.length === 0)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const n = a.classBreakInfos?.[0]?.symbol || a.defaultSymbol, y = et(n);
-  let $ = {};
-  const g = [];
-  let M = null;
-  if (y === "fill") {
-    const L = ["interpolate", ["linear"], ["get", i]];
-    for (const r of l)
-      L.push(r.value), L.push(D(r.color)), g.push({
+  const n = l.classBreakInfos?.[0]?.symbol || l.defaultSymbol, c = tt(n);
+  let L = {};
+  const f = [];
+  let P = null;
+  if (c === "fill") {
+    const m = ["interpolate", ["linear"], ["get", i]];
+    for (const a of r)
+      m.push(a.value), m.push(z(a.color)), f.push({
         type: "fill",
-        color: D(r.color),
-        label: r.label || `${r.value}`
+        color: z(a.color),
+        label: a.label || `${a.value}`
       });
-    if ($ = {
+    if (L = {
       "fill-color": [
         "case",
         ["==", ["get", i], null],
         "rgba(0, 0, 0, 0)",
         // Transparent for null/no-data values
-        L
+        m
         // Otherwise use the interpolated color
       ],
       "fill-opacity": we(o)
-    }, xe(n?.outline)) {
-      const r = n.outline.width || 1;
-      M = {
-        "line-color": D(n.outline.color),
-        "line-width": r
+    }, $e(n?.outline)) {
+      const a = n.outline.width || 1;
+      P = {
+        "line-color": z(n.outline.color),
+        "line-width": a
       };
     }
   }
-  return { paint: $, legend: g, geomType: y, outlinePaint: M };
+  return { paint: L, legend: f, geomType: c, outlinePaint: P };
 }
-function Zo(t, i, a, o) {
-  if (!t?.renderer)
+function Jo(e, i, l, o) {
+  if (!e?.renderer)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const l = t.renderer;
-  switch (l.type) {
+  const r = e.renderer;
+  switch (r.type) {
     case "simple":
-      return Tt(l, i);
+      return _t(r, i);
     case "uniqueValue":
-      return Io(l, i, a);
+      return qo(r, i, l);
     case "classBreaks":
-      return Ro(l, i);
+      return Go(r, i);
     default:
       return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
   }
 }
-function Bo(t) {
-  if (!t) return null;
-  const i = (t.title || "").replace(/\{([^}]+)\}/g, (n, y) => `{${y.toLowerCase()}}`), o = (t.fieldInfos || []).filter((n) => n.visible === !0).map((n) => {
-    const y = {
+function Ko(e) {
+  if (!e) return null;
+  const i = (e.title || "").replace(/\{([^}]+)\}/g, (n, c) => `{${c.toLowerCase()}}`), o = (e.fieldInfos || []).filter((n) => n.visible === !0).map((n) => {
+    const c = {
       field: n.fieldName.toLowerCase(),
       label: n.label || n.fieldName
     };
-    return n.format && (y.format = {}, n.format.dateFormat && (y.format.dateFormat = n.format.dateFormat), n.format.digitSeparator !== void 0 && (y.format.digitSeparator = n.format.digitSeparator), n.format.places !== void 0 && (y.format.places = n.format.places), Object.keys(y.format).length === 0 && delete y.format), y;
-  }), l = {
+    return n.format && (c.format = {}, n.format.dateFormat && (c.format.dateFormat = n.format.dateFormat), n.format.digitSeparator !== void 0 && (c.format.digitSeparator = n.format.digitSeparator), n.format.places !== void 0 && (c.format.places = n.format.places), Object.keys(c.format).length === 0 && delete c.format), c;
+  }), r = {
     title: i,
     fields: o
   };
-  return t.showTime && (l.showTime = !0), l;
+  return e.showTime && (r.showTime = !0), r;
 }
-function Ao(t) {
-  return t?.definitionExpression;
+function Qo(e) {
+  return e?.definitionExpression;
 }
-function No(t) {
-  return (t.includes("_") ? t.split("_").slice(1).join(" ") : t).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+function Xo(e) {
+  return (e.includes("_") ? e.split("_").slice(1).join(" ") : e).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 }
-function Vo(t) {
-  return t.includes("_") ? t.split("_").slice(1).join(" ") : t;
+function Yo(e) {
+  return e.includes("_") ? e.split("_").slice(1).join(" ") : e;
 }
-function Uo(t) {
+function ea(e) {
   const i = /* @__PURE__ */ new Map();
-  if (!t)
+  if (!e)
     return i;
-  const a = t.split(`
+  const l = e.split(`
 `), o = /^(\d{1,3})\s+(.+)$/;
-  for (const l of a) {
-    const n = l.trim().match(o);
+  for (const r of l) {
+    const n = r.trim().match(o);
     if (n) {
-      const [, y, $] = n;
-      y && $ && i.set(y, $.trim());
+      const [, c, L] = n;
+      c && L && i.set(c, L.trim());
     }
   }
   return i;
 }
-async function Wo(t) {
+async function ta(e) {
   try {
-    const i = await fetch(`${t}?f=json`);
+    const i = await fetch(`${e}?f=json`);
     if (!i.ok)
       return null;
-    const a = await i.json();
-    return a.drawingInfo ? {
-      drawingInfo: a.drawingInfo,
-      description: a.description
+    const l = await i.json();
+    return l.drawingInfo ? {
+      drawingInfo: l.drawingInfo,
+      description: l.description
     } : null;
   } catch {
     return null;
   }
 }
-async function Ft(t) {
-  const i = t.operationalLayers || [], a = [], o = ["Zoning and Planning_Land Use"];
-  for (const l of i)
-    if (l.url && !l.title?.toLowerCase().includes("(under construction)"))
+async function Rt(e) {
+  const i = e.operationalLayers || [], l = [], o = ["Zoning and Planning_Land Use"];
+  for (const r of i)
+    if (r.url && !r.title?.toLowerCase().includes("(under construction)"))
       try {
-        let n = l.layerDefinition?.drawingInfo, y;
-        const $ = !n || !n.renderer, g = o.includes(l.title), M = n?.renderer?.uniqueValueInfos?.[0]?.symbol?.outline || n?.renderer?.defaultSymbol?.outline;
-        if (($ || g) && l.url) {
-          const R = await Wo(l.url);
-          if (R) {
-            if (n = R.drawingInfo, M && xe(M) && n?.renderer) {
-              const Z = n.renderer, pe = Z.uniqueValueInfos?.[0]?.symbol?.outline || Z.defaultSymbol?.outline;
-              if (!xe(pe)) {
-                for (const ye of Z.uniqueValueInfos || [])
-                  ye.symbol && (ye.symbol.outline = M);
-                Z.defaultSymbol && (Z.defaultSymbol.outline = M);
+        let n = r.layerDefinition?.drawingInfo, c;
+        const L = !n || !n.renderer, f = o.includes(r.title), P = n?.renderer?.uniqueValueInfos?.[0]?.symbol?.outline || n?.renderer?.defaultSymbol?.outline;
+        if ((L || f) && r.url) {
+          const O = await ta(r.url);
+          if (O) {
+            if (n = O.drawingInfo, P && $e(P) && n?.renderer) {
+              const _ = n.renderer, de = _.uniqueValueInfos?.[0]?.symbol?.outline || _.defaultSymbol?.outline;
+              if (!$e(de)) {
+                for (const ye of _.uniqueValueInfos || [])
+                  ye.symbol && (ye.symbol.outline = P);
+                _.defaultSymbol && (_.defaultSymbol.outline = P);
               }
             }
-            R.description && (y = Uo(R.description), y.size > 0);
+            O.description && (c = ea(O.description), c.size > 0);
           }
         }
-        const { paint: L, legend: S, geomType: r, outlinePaint: C } = Zo(
+        const { paint: m, legend: b, geomType: a, outlinePaint: v } = Jo(
           n,
-          l.opacity,
-          y,
-          l.title
-        ), p = Bo(l.popupInfo), h = Ao(l.layerDefinition), u = zo(l.layerDefinition?.minScale, l.layerDefinition?.maxScale), c = No(l.title), v = Vo(l.title), I = l.opacity ?? 1, F = {
-          id: c,
-          title: v,
-          type: r,
-          url: l.url,
-          opacity: I,
-          paint: L,
-          legend: S,
-          popup: p
+          r.opacity,
+          c,
+          r.title
+        ), h = Ko(r.popupInfo), S = Qo(r.layerDefinition), x = jo(r.layerDefinition?.minScale, r.layerDefinition?.maxScale), B = Xo(r.title), q = Yo(r.title), te = r.opacity ?? 1, F = {
+          id: B,
+          title: q,
+          type: a,
+          url: r.url,
+          opacity: te,
+          paint: m,
+          legend: b,
+          popup: h
         };
-        h && (F.where = h), u.minZoom !== void 0 && (F.minZoom = u.minZoom), u.maxZoom !== void 0 && (F.maxZoom = u.maxZoom), C && (F.outlinePaint = C), a.push(F);
+        S && (F.where = S), x.minZoom !== void 0 && (F.minZoom = x.minZoom), x.maxZoom !== void 0 && (F.maxZoom = x.maxZoom), v && (F.outlinePaint = v), l.push(F);
       } catch {
       }
-  return a.sort((l, n) => l.title.localeCompare(n.title)), a;
+  return l.sort((r, n) => r.title.localeCompare(n.title)), l;
 }
-const $t = {}, yt = "376af635c84643cd816a8c5d017a53aa", qa = yt;
-function gt(t, i) {
-  let a = `https://www.arcgis.com/sharing/rest/content/items/${t}/data?f=json`;
-  return i && (a += `&token=${i}`), a;
+const Ft = {}, vt = "376af635c84643cd816a8c5d017a53aa", Aa = vt;
+function bt(e, i) {
+  let l = `https://www.arcgis.com/sharing/rest/content/items/${e}/data?f=json`;
+  return i && (l += `&token=${i}`), l;
 }
-function Ga() {
-  return gt(yt);
+function Za() {
+  return bt(vt);
 }
-const Ye = /* @__PURE__ */ new Map(), We = /* @__PURE__ */ new Map();
-function jo(t) {
-  t ? (Ye.delete(t), We.delete(t)) : (Ye.clear(), We.clear());
+const et = /* @__PURE__ */ new Map(), qe = /* @__PURE__ */ new Map();
+function oa(e) {
+  e ? (et.delete(e), qe.delete(e)) : (et.clear(), qe.clear());
 }
-let Qe, _t = 0;
-async function qo() {
-  const t = typeof import.meta < "u" && $t?.VITE_AGO_USERNAME, i = typeof import.meta < "u" && $t?.VITE_AGO_PASSWORD;
-  if (!(!t || !i)) {
-    if (Qe && Date.now() < _t - 3e5)
+let Qe, Et = 0;
+async function aa() {
+  const e = typeof import.meta < "u" && Ft?.VITE_AGO_USERNAME, i = typeof import.meta < "u" && Ft?.VITE_AGO_PASSWORD;
+  if (!(!e || !i)) {
+    if (Qe && Date.now() < Et - 3e5)
       return Qe;
     try {
       const o = await (await fetch("https://www.arcgis.com/sharing/rest/generateToken", {
@@ -1510,200 +1563,200 @@ async function qo() {
         },
         body: new URLSearchParams({
           f: "json",
-          username: t,
+          username: e,
           password: i,
           referer: window.location.origin || "https://localhost",
           expiration: "120"
           // 2 hours
         })
       })).json();
-      return o.error ? void 0 : (Qe = o.token, _t = o.expires, Qe);
+      return o.error ? void 0 : (Qe = o.token, Et = o.expires, Qe);
     } catch {
       return;
     }
   }
 }
-async function Go(t, i) {
-  const a = gt(t, i), o = await fetch(a, { cache: "no-store" });
+async function ia(e, i) {
+  const l = bt(e, i), o = await fetch(l, { cache: "no-store" });
   if (!o.ok)
     throw new Error(`Failed to fetch WebMap: ${o.status} ${o.statusText}`);
-  const l = await o.json();
-  if (l.error)
-    throw new Error(`ArcGIS error: ${l.error.message || l.error.code || "Unknown error"}`);
-  return l;
+  const r = await o.json();
+  if (r.error)
+    throw new Error(`ArcGIS error: ${r.error.message || r.error.code || "Unknown error"}`);
+  return r;
 }
-async function Ho(t) {
+async function la(e) {
   try {
-    const i = await qo(), a = await Go(t, i);
-    return await Ft(a);
+    const i = await aa(), l = await ia(e, i);
+    return await Rt(l);
   } catch (i) {
     throw new Error(
       `Failed to load dynamic layer configs: ${i instanceof Error ? i.message : "Unknown error"}`
     );
   }
 }
-async function pt(t = yt) {
-  const i = Ye.get(t);
+async function yt(e = vt) {
+  const i = et.get(e);
   if (i)
     return i;
-  const a = We.get(t);
-  if (a)
-    return a;
+  const l = qe.get(e);
+  if (l)
+    return l;
   const o = (async () => {
     try {
-      const l = await Ho(t);
-      return Ye.set(t, l), l;
+      const r = await la(e);
+      return et.set(e, r), r;
     } finally {
-      We.delete(t);
+      qe.delete(e);
     }
   })();
-  return We.set(t, o), o;
+  return qe.set(e, o), o;
 }
-function Jo(t) {
-  const i = k({}), a = /* @__PURE__ */ new Map();
-  for (const r of t)
-    i.value[r.id] = {
+function na(e) {
+  const i = w({}), l = /* @__PURE__ */ new Map();
+  for (const a of e)
+    i.value[a.id] = {
       data: null,
       loading: !1,
       error: null,
       lastFetched: null
     };
-  async function o(r) {
-    const C = r.id;
+  async function o(a) {
+    const v = a.id;
     i.value = {
       ...i.value,
-      [C]: {
-        data: i.value[C]?.data ?? null,
-        lastFetched: i.value[C]?.lastFetched ?? null,
+      [v]: {
+        data: i.value[v]?.data ?? null,
+        lastFetched: i.value[v]?.lastFetched ?? null,
         loading: !0,
         error: null
       }
     };
     try {
-      let p;
-      if (r.type === "http-get") {
-        const h = await fetch(r.url, {
+      let h;
+      if (a.type === "http-get") {
+        const S = await fetch(a.url, {
           method: "GET",
-          ...r.options
+          ...a.options
         });
-        if (!h.ok)
-          throw new Error(`HTTP ${h.status}: ${h.statusText}`);
-        p = await h.json();
-      } else if (r.type === "http-post") {
-        const h = await fetch(r.url, {
+        if (!S.ok)
+          throw new Error(`HTTP ${S.status}: ${S.statusText}`);
+        h = await S.json();
+      } else if (a.type === "http-post") {
+        const S = await fetch(a.url, {
           method: "POST",
-          ...r.options
+          ...a.options
         });
-        if (!h.ok)
-          throw new Error(`HTTP ${h.status}: ${h.statusText}`);
-        p = await h.json();
-      } else if (r.type === "esri") {
-        const u = `${r.url.replace(/\/$/, "")}/query?where=1%3D1&outFields=*&returnGeometry=false&f=json`, c = await fetch(u, r.options);
-        if (!c.ok)
-          throw new Error(`HTTP ${c.status}: ${c.statusText}`);
-        p = (await c.json()).features?.map((I) => I.attributes) || [];
+        if (!S.ok)
+          throw new Error(`HTTP ${S.status}: ${S.statusText}`);
+        h = await S.json();
+      } else if (a.type === "esri") {
+        const x = `${a.url.replace(/\/$/, "")}/query?where=1%3D1&outFields=*&returnGeometry=false&f=json`, B = await fetch(x, a.options);
+        if (!B.ok)
+          throw new Error(`HTTP ${B.status}: ${B.statusText}`);
+        h = (await B.json()).features?.map((te) => te.attributes) || [];
       } else
-        throw new Error(`Unknown data source type: ${r.type}`);
-      r.transform && (p = r.transform(p)), i.value = {
+        throw new Error(`Unknown data source type: ${a.type}`);
+      a.transform && (h = a.transform(h)), i.value = {
         ...i.value,
-        [C]: {
-          data: p,
+        [v]: {
+          data: h,
           loading: !1,
           error: null,
           lastFetched: Date.now()
         }
       };
-    } catch (p) {
-      const h = p instanceof Error ? p.message : "Unknown error";
+    } catch (h) {
+      const S = h instanceof Error ? h.message : "Unknown error";
       i.value = {
         ...i.value,
-        [C]: {
-          data: i.value[C]?.data ?? null,
-          lastFetched: i.value[C]?.lastFetched ?? null,
+        [v]: {
+          data: i.value[v]?.data ?? null,
+          lastFetched: i.value[v]?.lastFetched ?? null,
           loading: !1,
-          error: h
+          error: S
         }
       };
     }
   }
-  async function l() {
-    await Promise.all(t.map((r) => o(r)));
+  async function r() {
+    await Promise.all(e.map((a) => o(a)));
   }
-  async function n(r) {
-    const C = t.find((p) => p.id === r);
-    C && await o(C);
+  async function n(a) {
+    const v = e.find((h) => h.id === a);
+    v && await o(v);
   }
-  function y(r) {
-    return i.value[r]?.data ?? null;
+  function c(a) {
+    return i.value[a]?.data ?? null;
   }
-  const $ = z(() => Object.values(i.value).some((r) => r.loading));
-  function g(r) {
-    return i.value[r]?.loading ?? !1;
+  const L = E(() => Object.values(i.value).some((a) => a.loading));
+  function f(a) {
+    return i.value[a]?.loading ?? !1;
   }
-  function M(r) {
-    return i.value[r]?.error ?? null;
+  function P(a) {
+    return i.value[a]?.error ?? null;
   }
-  function L() {
-    for (const r of t)
-      if (r.pollInterval && r.pollInterval > 0) {
-        const C = window.setInterval(() => {
-          o(r);
-        }, r.pollInterval);
-        a.set(r.id, C);
+  function m() {
+    for (const a of e)
+      if (a.pollInterval && a.pollInterval > 0) {
+        const v = window.setInterval(() => {
+          o(a);
+        }, a.pollInterval);
+        l.set(a.id, v);
       }
   }
-  function S() {
-    for (const [, r] of a)
-      window.clearInterval(r);
-    a.clear();
+  function b() {
+    for (const [, a] of l)
+      window.clearInterval(a);
+    l.clear();
   }
   return Xe(() => {
-    l(), L();
-  }), Pt(() => {
-    S();
+    r(), m();
+  }), Ot(() => {
+    b();
   }), {
     /** Reactive state for all data sources */
-    state: j(i),
+    state: N(i),
     /** Whether any data source is currently loading */
-    isLoading: $,
+    isLoading: L,
     /** Fetch all data sources */
-    fetchAll: l,
+    fetchAll: r,
     /** Refetch a specific data source by id */
     refetch: n,
     /** Get data for a specific source */
-    getData: y,
+    getData: c,
     /** Check if a specific source is loading */
-    isSourceLoading: g,
+    isSourceLoading: f,
     /** Get error for a specific source */
-    getError: M,
+    getError: P,
     /** Stop all polling (useful for cleanup) */
-    stopPolling: S
+    stopPolling: b
   };
 }
-const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
+const ra = { class: "layerboard-layout" }, sa = ["aria-expanded"], ca = {
   key: 0,
   class: "layerboard-subtitle"
-}, Yo = { class: "layerboard-mobile-menu-content" }, ea = { class: "layerboard-main" }, ta = {
+}, ua = { class: "layerboard-mobile-menu-content" }, da = { class: "layerboard-main" }, fa = {
   key: 0,
   class: "layerboard-loading",
   role: "status",
   "aria-live": "polite"
-}, oa = {
+}, pa = {
   key: 1,
   class: "layerboard-error",
   role: "alert"
-}, aa = ["aria-expanded", "aria-label"], ia = { key: 0 }, na = { key: 1 }, la = {
+}, ya = ["aria-expanded", "aria-label"], ma = { key: 0 }, ga = { key: 1 }, ha = {
   class: "sr-only",
   "aria-live": "polite"
-}, ra = /* @__PURE__ */ $e({
+}, va = /* @__PURE__ */ ue({
   __name: "Layerboard",
   props: {
     title: {},
-    subtitle: {},
+    subtitle: { default: void 0 },
     webMapId: {},
     themeColor: { default: "#0f4d90" },
-    cyclomediaConfig: {},
-    pictometryCredentials: {},
+    cyclomediaConfig: { default: void 0 },
+    pictometryCredentials: { default: void 0 },
     showDefaultSidebar: { type: Boolean, default: !0 },
     sidebarWidth: { default: "30%" },
     sidebarLabel: { default: "Layers" },
@@ -1720,472 +1773,468 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
     drawControlPosition: { default: "bottom-left" },
     cyclomediaButtonPosition: { default: "top-right" },
     pictometryButtonPosition: { default: "top-right" },
-    initialZoom: {},
-    initialCenter: {}
+    initialZoom: { default: void 0 },
+    initialCenter: { default: void 0 }
   },
   emits: ["configs-loaded", "load-error", "zoom"],
-  setup(t, { expose: i, emit: a }) {
-    const o = t, l = a, n = k([]), y = k(!0), $ = k(null), g = k(12), M = k(""), L = k(/* @__PURE__ */ new Set()), S = k({}), r = k(/* @__PURE__ */ new Set()), C = k({}), p = k({}), h = k(/* @__PURE__ */ new Set()), u = k({});
-    function c() {
-      const b = {};
-      for (const x of o.tiledLayers)
-        b[x.id] = x.opacity ?? 1;
-      u.value = b;
+  setup(e, { expose: i, emit: l }) {
+    const o = e, r = l, n = w([]), c = w(!0), L = w(null), f = w(12), P = w(""), m = w(/* @__PURE__ */ new Set()), b = w({}), a = w(/* @__PURE__ */ new Set()), v = w({}), h = w({}), S = w(/* @__PURE__ */ new Set()), x = w({});
+    function B() {
+      const p = {};
+      for (const $ of o.tiledLayers)
+        p[$.id] = $.opacity ?? 1;
+      x.value = p;
     }
-    function v(b) {
-      h.value.has(b) ? h.value.delete(b) : h.value.add(b), h.value = new Set(h.value);
+    function q(p) {
+      S.value.has(p) ? S.value.delete(p) : S.value.add(p), S.value = new Set(S.value);
     }
-    function I(b, x) {
-      x ? h.value.add(b) : h.value.delete(b), h.value = new Set(h.value);
+    function te(p, $) {
+      $ ? S.value.add(p) : S.value.delete(p), S.value = new Set(S.value);
     }
-    function F(b, x) {
-      u.value = { ...u.value, [b]: x };
+    function F(p, $) {
+      x.value = { ...x.value, [p]: $ };
     }
-    const R = o.dataSources.length > 0 ? Jo(o.dataSources) : null, Z = z(() => R?.state.value ?? {}), pe = z(() => R?.isLoading.value ?? !1);
-    function ye(b) {
-      return R?.getData(b) ?? null;
+    const O = o.dataSources.length > 0 ? na(o.dataSources) : null, _ = E(() => O?.state.value ?? {}), de = E(() => O?.isLoading.value ?? !1);
+    function ye(p) {
+      return O?.getData(p) ?? null;
     }
-    function Ze(b) {
-      return R?.refetch(b) ?? Promise.resolve();
+    function Ae(p) {
+      return O?.refetch(p) ?? Promise.resolve();
     }
-    V("layerboard-layers", j(n)), V("layerboard-visible", L), V("layerboard-opacities", S), V("layerboard-loading", j(r)), V("layerboard-errors", j(C)), V("layerboard-zoom", j(g)), V("layerboard-toggle-layer", ge), V("layerboard-set-layer-visible", Ee), V("layerboard-set-layers-visible", _e), V("layerboard-set-opacity", Oe), V("layerboard-tiled-layers", j(z(() => o.tiledLayers))), V("layerboard-visible-tiled", h), V("layerboard-tiled-opacities", u), V("layerboard-toggle-tiled", v), V("layerboard-set-tiled-opacity", F), V("layerboard-set-tiled-visible", I), V("layerboard-data-sources-state", Z), V("layerboard-data-sources-loading", pe), V("layerboard-get-data-source", ye), V("layerboard-refetch-data-source", Ze);
-    const tt = z(() => ({
+    A("layerboard-layers", N(n)), A("layerboard-visible", m), A("layerboard-opacities", b), A("layerboard-loading", N(a)), A("layerboard-errors", N(v)), A("layerboard-zoom", N(f)), A("layerboard-toggle-layer", Oe), A("layerboard-set-layer-visible", Ce), A("layerboard-set-layers-visible", Ie), A("layerboard-set-opacity", ke), A("layerboard-tiled-layers", N(E(() => o.tiledLayers))), A("layerboard-visible-tiled", S), A("layerboard-tiled-opacities", x), A("layerboard-toggle-tiled", q), A("layerboard-set-tiled-opacity", F), A("layerboard-set-tiled-visible", te), A("layerboard-data-sources-state", _), A("layerboard-data-sources-loading", de), A("layerboard-get-data-source", ye), A("layerboard-refetch-data-source", Ae);
+    const ot = E(() => ({
       backgroundColor: o.themeColor
-    })), Be = z(() => ({
+    })), Ze = E(() => ({
       backgroundColor: o.themeColor
-    })), je = z(() => ({
+    })), Ge = E(() => ({
       backgroundColor: o.themeColor
-    })), ot = z(() => ({
-      width: Y.value ? "0" : o.sidebarWidth
+    })), at = E(() => ({
+      width: ne.value ? "0" : o.sidebarWidth
     }));
-    async function Fe() {
+    async function Ee() {
       try {
-        y.value = !0, $.value = null;
-        const x = (await pt(o.webMapId)).map((W) => {
-          let G = W;
-          const ve = o.layerStyleOverrides[W.id];
-          ve && (G = {
-            ...G,
-            paint: ve.paint ?? G.paint,
-            outlinePaint: ve.outlinePaint ?? G.outlinePaint,
-            legend: ve.legend ?? G.legend,
-            type: ve.type ?? G.type
+        c.value = !0, L.value = null;
+        const $ = (await yt(o.webMapId)).map((Z) => {
+          let H = Z;
+          const ve = o.layerStyleOverrides[Z.id];
+          ve && (H = {
+            ...H,
+            paint: ve.paint ?? H.paint,
+            outlinePaint: ve.outlinePaint ?? H.outlinePaint,
+            legend: ve.legend ?? H.legend,
+            type: ve.type ?? H.type
           });
-          const Ie = o.popupOverrides[W.id];
-          return Ie && G.popup && (G = {
-            ...G,
-            popup: { ...G.popup, ...Ie }
-          }), G;
+          const De = o.popupOverrides[Z.id];
+          return De && H.popup && (H = {
+            ...H,
+            popup: { ...H.popup, ...De }
+          }), H;
         });
-        n.value = x.map((W) => ({
-          config: W,
-          component: W.type
+        n.value = $.map((Z) => ({
+          config: Z,
+          component: Z.type
         }));
-        const q = {};
-        x.forEach((W) => {
-          q[W.id] = W.opacity ?? 1;
-        }), S.value = q, l("configs-loaded", x);
-      } catch (b) {
-        const x = b instanceof Error ? b.message : "Failed to load layer configurations";
-        $.value = x, l("load-error", x);
+        const G = {};
+        $.forEach((Z) => {
+          G[Z.id] = Z.opacity ?? 1;
+        }), b.value = G, r("configs-loaded", $);
+      } catch (p) {
+        const $ = p instanceof Error ? p.message : "Failed to load layer configurations";
+        L.value = $, r("load-error", $);
       } finally {
-        y.value = !1;
+        c.value = !1;
       }
     }
-    function at(b) {
-      let x = b.split("?")[0] || b;
-      return x = x.replace(/\/query$/, ""), x = x.replace(/\/$/, ""), x.toLowerCase();
-    }
     async function it() {
       if (o.fetchMetadata)
         try {
-          const b = "https://phl.carto.com/api/v2/sql?q=" + encodeURIComponent(
+          const p = "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"
-          ), x = await fetch(b);
-          if (!x.ok) return;
-          const q = await x.json(), W = {};
-          for (const G of q.rows || [])
-            if (G.url_text && G.representation) {
-              const ve = at(G.url_text), Ie = `https://metadata.phila.gov/#home/representationdetails/${G.representation}/`;
-              W[ve] = Ie;
+          ), $ = await fetch(p);
+          if (!$.ok) return;
+          const G = await $.json(), Z = {};
+          for (const H of G.rows || [])
+            if (H.url_text && H.representation) {
+              const ve = zt(H.url_text), De = `https://metadata.phila.gov/#home/representationdetails/${H.representation}/`;
+              Z[ve] = De;
             }
-          p.value = W;
+          h.value = Z;
         } catch {
         }
     }
-    function nt(b) {
-      g.value = b, l("zoom", b);
+    function lt(p) {
+      f.value = p, r("zoom", p);
     }
-    function ge(b) {
-      L.value.has(b) ? L.value.delete(b) : L.value.add(b), L.value = new Set(L.value);
+    function Oe(p) {
+      m.value.has(p) ? m.value.delete(p) : m.value.add(p), m.value = new Set(m.value);
     }
-    function Ee(b, x) {
-      x ? L.value.add(b) : L.value.delete(b), L.value = new Set(L.value);
+    function Ce(p, $) {
+      $ ? m.value.add(p) : m.value.delete(p), m.value = new Set(m.value);
     }
-    function _e(b, x) {
-      for (const q of b)
-        x ? L.value.add(q) : L.value.delete(q);
-      L.value = new Set(L.value);
+    function Ie(p, $) {
+      for (const G of p)
+        $ ? m.value.add(G) : m.value.delete(G);
+      m.value = new Set(m.value);
     }
-    function Oe(b, x) {
-      S.value = { ...S.value, [b]: x };
+    function ke(p, $) {
+      b.value = { ...b.value, [p]: $ };
     }
-    function le(b, x) {
-      x ? r.value.add(b) : r.value.delete(b), r.value = new Set(r.value);
+    function nt(p, $) {
+      $ ? a.value.add(p) : a.value.delete(p), a.value = new Set(a.value);
     }
-    function ze(b, x) {
-      if (x)
-        C.value = { ...C.value, [b]: x };
+    function ie(p, $) {
+      if ($)
+        v.value = { ...v.value, [p]: $ };
       else {
-        const q = { ...C.value };
-        delete q[b], C.value = q;
+        const G = { ...v.value };
+        delete G[p], v.value = G;
       }
     }
-    function oe(b) {
-      M.value = b;
+    function ze(p) {
+      P.value = p;
     }
-    const Pe = k(null), qe = k(null), Se = k(null), Ge = k(null), Ae = k(null), Ne = k(null), He = k(null), re = k("map");
-    function Me() {
-      re.value = re.value === "sidebar" ? "map" : "sidebar", Ve(() => {
-        re.value === "sidebar" && Pe.value?.focus();
+    const X = w(null), Pe = w(null), rt = w(null), me = w(null), Ve = w(null), Ne = w(null), He = w(null), ge = w("map");
+    function _e() {
+      ge.value = ge.value === "sidebar" ? "map" : "sidebar", We(() => {
+        ge.value === "sidebar" && X.value?.focus();
       });
     }
-    const ce = k(!1);
+    const Y = w(!1);
     function Je() {
-      ce.value = !ce.value, ce.value && Ve(() => {
-        Ge.value?.focus();
+      Y.value = !Y.value, Y.value && We(() => {
+        me.value?.focus();
       });
     }
-    function Te() {
-      ce.value = !1, Ve(() => {
-        qe.value?.focus();
+    function Me() {
+      Y.value = !1, We(() => {
+        Pe.value?.focus();
       });
     }
-    const Y = k(!1);
-    function Ke() {
-      Y.value = !Y.value;
+    const ne = w(!1);
+    function Te() {
+      ne.value = !ne.value;
     }
-    const he = k(!1), Ce = k(null);
-    function me() {
-      Ce.value = document.activeElement, he.value = !0, Ve(() => {
+    const fe = w(!1), Ue = w(null);
+    function he() {
+      Ue.value = document.activeElement, fe.value = !0, We(() => {
         He.value?.focus();
       });
     }
-    function ae() {
-      he.value = !1, Ve(() => {
-        Ce.value?.focus(), Ce.value = null;
+    function oe() {
+      fe.value = !1, We(() => {
+        Ue.value?.focus(), Ue.value = null;
       });
     }
-    function lt(b) {
-      b.target.classList.contains("layerboard-modal-backdrop") && ae();
+    function Re(p) {
+      p.target.classList.contains("layerboard-modal-backdrop") && oe();
     }
-    function rt(b) {
-      if (b.key === "Escape") {
-        Te();
+    function st(p) {
+      if (p.key === "Escape") {
+        Me();
         return;
       }
-      if (b.key === "Tab" && Ae.value) {
-        const x = Array.from(
-          Ae.value.querySelectorAll(
+      if (p.key === "Tab" && Ve.value) {
+        const $ = Array.from(
+          Ve.value.querySelectorAll(
             'a[href], button:not([disabled]), textarea, input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
           )
         );
-        if (x.length === 0) return;
-        const q = x[0], W = x[x.length - 1];
-        b.shiftKey ? document.activeElement === q && (b.preventDefault(), W.focus()) : document.activeElement === W && (b.preventDefault(), q.focus());
+        if ($.length === 0) return;
+        const G = $[0], Z = $[$.length - 1];
+        p.shiftKey ? document.activeElement === G && (p.preventDefault(), Z.focus()) : document.activeElement === Z && (p.preventDefault(), G.focus());
       }
     }
-    function st(b) {
-      if (b.key === "Escape") {
-        ae();
+    function ct(p) {
+      if (p.key === "Escape") {
+        oe();
         return;
       }
-      if (b.key === "Tab" && Ne.value) {
-        const x = Array.from(
+      if (p.key === "Tab" && Ne.value) {
+        const $ = Array.from(
           Ne.value.querySelectorAll(
             'a[href], button:not([disabled]), textarea, input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
           )
         );
-        if (x.length === 0) return;
-        const q = x[0], W = x[x.length - 1];
-        b.shiftKey ? document.activeElement === q && (b.preventDefault(), W.focus()) : document.activeElement === W && (b.preventDefault(), q.focus());
+        if ($.length === 0) return;
+        const G = $[0], Z = $[$.length - 1];
+        p.shiftKey ? document.activeElement === G && (p.preventDefault(), Z.focus()) : document.activeElement === Z && (p.preventDefault(), G.focus());
       }
     }
-    V("layerboard-open-modal", me), V("layerboard-close-modal", ae), V("layerboard-is-modal-open", j(he)), i({
+    A("layerboard-open-modal", he), A("layerboard-close-modal", oe), A("layerboard-is-modal-open", N(fe)), i({
       /** Layer configurations */
       layerList: n,
       /** Set of visible layer IDs */
-      visibleLayers: L,
+      visibleLayers: m,
       /** Layer opacity values */
-      layerOpacities: S,
+      layerOpacities: b,
       /** Set of currently loading layer IDs */
-      loadingLayers: r,
+      loadingLayers: a,
       /** Map of layer errors by ID */
-      layerErrors: C,
+      layerErrors: v,
       /** Current map zoom level */
-      currentZoom: g,
+      currentZoom: f,
       /** Toggle a layer's visibility */
-      toggleLayer: ge,
+      toggleLayer: Oe,
       /** Set a layer's visibility explicitly */
-      setLayerVisible: Ee,
+      setLayerVisible: Ce,
       /** Set multiple layers' visibility at once */
-      setLayersVisible: _e,
+      setLayersVisible: Ie,
       /** Set a layer's opacity */
-      setLayerOpacity: Oe,
+      setLayerOpacity: ke,
       /** Reload layer configurations */
-      reloadConfigs: Fe,
+      reloadConfigs: Ee,
       /** Clear configuration cache */
-      clearCache: () => jo(o.webMapId),
+      clearCache: () => oa(o.webMapId),
       // Tiled layer APIs
       /** Set of visible tiled layer IDs */
-      visibleTiledLayers: h,
+      visibleTiledLayers: S,
       /** Tiled layer opacity values */
-      tiledLayerOpacities: u,
+      tiledLayerOpacities: x,
       /** Toggle a tiled layer's visibility */
-      toggleTiledLayer: v,
+      toggleTiledLayer: q,
       /** Set a tiled layer's visibility explicitly */
-      setTiledLayerVisible: I,
+      setTiledLayerVisible: te,
       /** Set a tiled layer's opacity */
       setTiledLayerOpacity: F,
       // Data source APIs
       /** State of all data sources */
-      dataSourcesState: Z,
+      dataSourcesState: _,
       /** Whether any data source is loading */
-      dataSourcesLoading: pe,
+      dataSourcesLoading: de,
       /** Get data from a specific data source */
       getDataSourceData: ye,
       /** Refetch a specific data source */
-      refetchDataSource: Ze,
+      refetchDataSource: Ae,
       // Modal APIs
       /** Whether the modal is currently open */
-      isModalOpen: he,
+      isModalOpen: fe,
       /** Open the modal */
-      openModal: me,
+      openModal: he,
       /** Close the modal */
-      closeModal: ae
+      closeModal: oe
     });
-    function ue(b) {
-      b.key === "Escape" && ce.value && Te();
+    function Ke(p) {
+      p.key === "Escape" && Y.value && Me();
     }
     return Xe(() => {
-      Fe(), it(), c(), document.addEventListener("keydown", ue);
-    }), Dt(() => {
-      document.removeEventListener("keydown", ue);
-    }), (b, x) => (f(), m("div", Ko, [
-      x[5] || (x[5] = P("a", {
+      Ee(), it(), B(), document.addEventListener("keydown", Ke);
+    }), jt(() => {
+      document.removeEventListener("keydown", Ke);
+    }), (p, $) => (y(), k("div", ra, [
+      $[5] || ($[5] = M("a", {
         href: "#main-content",
         class: "skip-to-main-content-link"
       }, "Skip to main content", -1)),
-      P("header", {
+      M("header", {
         class: "layerboard-header",
-        style: J(tt.value)
+        style: se(ot.value)
       }, [
-        x[1] || (x[1] = P("a", {
+        $[1] || ($[1] = M("a", {
           href: "https://www.phila.gov/",
           class: "layerboard-logo layerboard-desktop-only"
         }, [
-          P("img", {
+          M("img", {
             src: "https://standards.phila.gov/img/logo/city-of-philadelphia-yellow-white.png",
             alt: "City of Philadelphia"
           })
         ], -1)),
-        x[2] || (x[2] = P("span", {
+        $[2] || ($[2] = M("span", {
           class: "layerboard-header-divider layerboard-desktop-only",
           "aria-hidden": "true"
         }, null, -1)),
-        P("button", {
+        M("button", {
           ref_key: "hamburgerRef",
-          ref: qe,
+          ref: Pe,
           class: "layerboard-hamburger layerboard-mobile-only",
-          "aria-expanded": ce.value,
+          "aria-expanded": Y.value,
           "aria-label": "Toggle menu",
           onClick: Je
         }, [
-          Q(O(be), {
-            "icon-definition": O(fo),
+          j(d(be), {
+            "icon-definition": d(wo),
             size: "medium",
             inline: "",
             decorative: ""
           }, null, 8, ["icon-definition"])
-        ], 8, Qo),
-        fe(b.$slots, "header", {}, () => [
-          P("h1", null, N(t.title), 1),
-          t.subtitle ? (f(), m("span", Xo, N(t.subtitle), 1)) : E("", !0)
+        ], 8, sa),
+        ce(p.$slots, "header", {}, () => [
+          M("h1", null, W(e.title), 1),
+          e.subtitle ? (y(), k("span", ca, W(e.subtitle), 1)) : I("", !0)
         ], !0),
-        ce.value ? (f(), m("div", {
+        Y.value ? (y(), k("div", {
           key: 0,
           ref_key: "mobileMenuRef",
-          ref: Ae,
+          ref: Ve,
           class: "layerboard-mobile-menu",
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Site menu",
-          style: J({ backgroundColor: t.themeColor }),
-          onKeydown: rt
+          style: se({ backgroundColor: e.themeColor }),
+          onKeydown: st
         }, [
-          P("div", Yo, [
-            fe(b.$slots, "footer", {
-              openModal: me,
-              closeModal: ae,
-              isModalOpen: he.value
+          M("div", ua, [
+            ce(p.$slots, "footer", {
+              openModal: he,
+              closeModal: oe,
+              isModalOpen: fe.value
             }, () => [
-              x[0] || (x[0] = Le(" City of Philadelphia ", -1))
+              $[0] || ($[0] = Le(" City of Philadelphia ", -1))
             ], !0)
           ]),
-          P("button", {
+          M("button", {
             ref_key: "mobileMenuCloseRef",
-            ref: Ge,
+            ref: me,
             class: "layerboard-mobile-menu-close",
             "aria-label": "Close menu",
-            onClick: Te
+            onClick: Me
           }, [
-            Q(O(be), {
-              "icon-definition": O(kt),
+            j(d(be), {
+              "icon-definition": d(Mt),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
           ], 512)
-        ], 36)) : E("", !0),
-        ce.value ? (f(), m("div", {
+        ], 36)) : I("", !0),
+        Y.value ? (y(), k("div", {
           key: 1,
           class: "layerboard-mobile-menu-backdrop",
-          onClick: Te
-        })) : E("", !0)
+          onClick: Me
+        })) : I("", !0)
       ], 4),
-      P("div", ea, [
-        y.value ? (f(), m("div", ta, [
-          P("div", {
+      M("div", da, [
+        c.value ? (y(), k("div", fa, [
+          M("div", {
             class: "layerboard-spinner",
-            style: J({ borderTopColor: t.themeColor })
+            style: se({ borderTopColor: e.themeColor })
           }, null, 4),
-          P("p", null, "Loading " + N(t.title) + "...", 1)
-        ])) : $.value ? (f(), m("div", oa, [
-          x[3] || (x[3] = P("h2", null, "Error Loading Layers", -1)),
-          P("p", null, N($.value), 1),
-          P("button", {
+          M("p", null, "Loading " + W(e.title) + "...", 1)
+        ])) : L.value ? (y(), k("div", pa, [
+          $[3] || ($[3] = M("h2", null, "Error Loading Layers", -1)),
+          M("p", null, W(L.value), 1),
+          M("button", {
             class: "layerboard-retry-button",
-            style: J({ backgroundColor: t.themeColor }),
-            onClick: Fe
+            style: se({ backgroundColor: e.themeColor }),
+            onClick: Ee
           }, " Retry ", 4)
-        ])) : (f(), m(ie, { key: 2 }, [
-          P("aside", {
+        ])) : (y(), k(le, { key: 2 }, [
+          M("aside", {
             id: "main-content",
             ref_key: "sidebarRef",
-            ref: Pe,
-            class: ne(["layerboard-sidebar", { "is-active": re.value === "sidebar" }]),
-            style: J(ot.value),
+            ref: X,
+            class: ae(["layerboard-sidebar", { "is-active": ge.value === "sidebar" }]),
+            style: se(at.value),
             "aria-label": "Map layers",
             tabindex: "-1"
           }, [
-            fe(b.$slots, "sidebar", {
+            ce(p.$slots, "sidebar", {
               layers: n.value,
-              visibleLayers: L.value,
-              layerOpacities: S.value,
-              loadingLayers: r.value,
-              layerErrors: C.value,
-              currentZoom: g.value,
-              toggleLayer: ge,
-              setLayerVisible: Ee,
-              setLayersVisible: _e,
-              setOpacity: Oe,
-              tiledLayers: t.tiledLayers,
-              visibleTiledLayers: h.value,
-              tiledLayerOpacities: u.value,
-              toggleTiledLayer: v,
-              setTiledLayerVisible: I,
+              visibleLayers: m.value,
+              layerOpacities: b.value,
+              loadingLayers: a.value,
+              layerErrors: v.value,
+              currentZoom: f.value,
+              toggleLayer: Oe,
+              setLayerVisible: Ce,
+              setLayersVisible: Ie,
+              setOpacity: ke,
+              tiledLayers: e.tiledLayers,
+              visibleTiledLayers: S.value,
+              tiledLayerOpacities: x.value,
+              toggleTiledLayer: q,
+              setTiledLayerVisible: te,
               setTiledLayerOpacity: F,
-              dataSourcesState: Z.value,
-              dataSourcesLoading: pe.value,
+              dataSourcesState: _.value,
+              dataSourcesLoading: de.value,
               getDataSource: ye,
-              refetchDataSource: Ze
+              refetchDataSource: Ae
             }, () => [
-              t.showDefaultSidebar ? (f(), te(Eo, {
+              e.showDefaultSidebar ? (y(), U(Uo, {
                 key: 0,
                 "layer-list": n.value,
-                "visible-layers": L.value,
-                "layer-opacities": S.value,
-                "loading-layers": r.value,
-                "layer-errors": C.value,
-                "current-zoom": g.value,
-                "search-query": M.value,
-                "layer-metadata": p.value,
-                onToggleLayer: ge,
-                onSetOpacity: Oe,
-                onUpdateSearch: oe
-              }, null, 8, ["layer-list", "visible-layers", "layer-opacities", "loading-layers", "layer-errors", "current-zoom", "search-query", "layer-metadata"])) : E("", !0)
+                "visible-layers": m.value,
+                "layer-opacities": b.value,
+                "loading-layers": a.value,
+                "layer-errors": v.value,
+                "current-zoom": f.value,
+                "search-query": P.value,
+                "layer-metadata": h.value,
+                onToggleLayer: Oe,
+                onSetOpacity: ke,
+                onUpdateSearch: ze
+              }, null, 8, ["layer-list", "visible-layers", "layer-opacities", "loading-layers", "layer-errors", "current-zoom", "search-query", "layer-metadata"])) : I("", !0)
             ], !0)
           ], 6),
-          P("div", {
+          M("div", {
             role: "main",
             "aria-label": "Map",
-            class: ne(["layerboard-map", { "is-active": re.value === "map" }])
+            class: ae(["layerboard-map", { "is-active": ge.value === "map" }])
           }, [
-            Q(Gt, {
-              "visible-layers": L.value,
-              "layer-opacities": S.value,
+            j(to, {
+              "visible-layers": m.value,
+              "layer-opacities": b.value,
               "layer-list": n.value,
-              "tiled-layers": t.tiledLayers,
-              "visible-tiled-layers": h.value,
-              "tiled-layer-opacities": u.value,
-              "cyclomedia-config": t.cyclomediaConfig,
-              "pictometry-credentials": t.pictometryCredentials,
-              "basemap-control-position": t.basemapControlPosition,
-              "navigation-control-position": t.navigationControlPosition,
-              "geolocation-control-position": t.geolocationControlPosition,
-              "search-control-position": t.searchControlPosition,
-              "draw-control-position": t.drawControlPosition,
-              "cyclomedia-button-position": t.cyclomediaButtonPosition,
-              "pictometry-button-position": t.pictometryButtonPosition,
-              "initial-zoom": t.initialZoom,
-              "initial-center": t.initialCenter,
-              onZoom: nt,
-              onLayerLoading: le,
-              onLayerError: ze
+              "tiled-layers": e.tiledLayers,
+              "visible-tiled-layers": S.value,
+              "tiled-layer-opacities": x.value,
+              "cyclomedia-config": e.cyclomediaConfig,
+              "pictometry-credentials": e.pictometryCredentials,
+              "basemap-control-position": e.basemapControlPosition,
+              "navigation-control-position": e.navigationControlPosition,
+              "geolocation-control-position": e.geolocationControlPosition,
+              "search-control-position": e.searchControlPosition,
+              "draw-control-position": e.drawControlPosition,
+              "cyclomedia-button-position": e.cyclomediaButtonPosition,
+              "pictometry-button-position": e.pictometryButtonPosition,
+              "initial-zoom": e.initialZoom,
+              "initial-center": e.initialCenter,
+              onZoom: lt,
+              onLayerLoading: nt,
+              onLayerError: ie
             }, 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),
-          P("button", {
-            class: ne(["layerboard-sidebar-toggle", { "is-collapsed": Y.value }]),
-            style: J({ left: Y.value ? "0" : o.sidebarWidth }),
-            "aria-expanded": !Y.value,
-            "aria-label": Y.value ? "Expand sidebar" : "Collapse sidebar",
-            onClick: Ke
+          M("button", {
+            class: ae(["layerboard-sidebar-toggle", { "is-collapsed": ne.value }]),
+            style: se({ left: ne.value ? "0" : o.sidebarWidth }),
+            "aria-expanded": !ne.value,
+            "aria-label": ne.value ? "Expand sidebar" : "Collapse sidebar",
+            onClick: Te
           }, [
-            Q(O(be), {
-              "icon-definition": Y.value ? O(co) : O(uo),
+            j(d(be), {
+              "icon-definition": ne.value ? d(vo) : d(bo),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
-          ], 14, aa)
+          ], 14, ya)
         ], 64))
       ]),
-      P("button", {
+      M("button", {
         ref_key: "mobileToggleRef",
-        ref: Se,
+        ref: rt,
         class: "layerboard-mobile-toggle",
-        style: J(je.value),
-        onClick: Me
+        style: se(Ge.value),
+        onClick: _e
       }, [
-        re.value === "map" ? (f(), m("span", ia, N(t.sidebarLabel), 1)) : (f(), m("span", na, N(t.mapLabel), 1))
+        ge.value === "map" ? (y(), k("span", ma, W(e.sidebarLabel), 1)) : (y(), k("span", ga, W(e.mapLabel), 1))
       ], 4),
-      P("footer", {
+      M("footer", {
         class: "layerboard-footer",
-        style: J(Be.value)
+        style: se(Ze.value)
       }, [
-        fe(b.$slots, "footer", {
-          openModal: me,
-          closeModal: ae,
-          isModalOpen: he.value
+        ce(p.$slots, "footer", {
+          openModal: he,
+          closeModal: oe,
+          isModalOpen: fe.value
         }, () => [
-          x[4] || (x[4] = Le(" City of Philadelphia ", -1))
+          $[4] || ($[4] = Le(" City of Philadelphia ", -1))
         ], !0)
       ], 4),
-      he.value ? (f(), m("div", {
+      fe.value ? (y(), k("div", {
         key: 0,
         class: "layerboard-modal-backdrop",
-        onClick: lt,
-        onKeydown: st
+        onClick: Re,
+        onKeydown: ct
       }, [
-        P("div", {
+        M("div", {
           ref_key: "modalRef",
           ref: Ne,
           class: "layerboard-modal",
@@ -2193,76 +2242,76 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
           "aria-modal": "true",
           "aria-label": "Application information"
         }, [
-          P("button", {
+          M("button", {
             ref_key: "modalCloseRef",
             ref: He,
             class: "layerboard-modal-close",
             "aria-label": "Close modal",
-            onClick: ae
+            onClick: oe
           }, [
-            Q(O(be), {
-              "icon-definition": O(kt),
+            j(d(be), {
+              "icon-definition": d(Mt),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
           ], 512),
-          fe(b.$slots, "modal", { closeModal: ae }, void 0, !0)
+          ce(p.$slots, "modal", { closeModal: oe }, void 0, !0)
         ], 512)
-      ], 32)) : E("", !0),
-      P("span", la, N(re.value === "sidebar" ? "Showing layers panel" : "Showing map"), 1)
+      ], 32)) : I("", !0),
+      M("span", ha, W(ge.value === "sidebar" ? "Showing layers panel" : "Showing map"), 1)
     ]));
   }
-}), Ha = /* @__PURE__ */ De(ra, [["__scopeId", "data-v-863275b0"]]), sa = ["aria-expanded"], ca = {
+}), Va = /* @__PURE__ */ Se(va, [["__scopeId", "data-v-67021805"]]), ba = ["aria-expanded"], wa = {
   key: 0,
   class: "topic-icon"
-}, ua = { class: "topic-title" }, da = /* @__PURE__ */ $e({
+}, La = { class: "topic-title" }, Sa = /* @__PURE__ */ ue({
   __name: "TopicAccordion",
   props: {
     title: {},
-    icon: {},
+    icon: { default: void 0 },
     expanded: { type: Boolean, default: !1 },
     layerIds: { default: () => [] },
-    headerClass: {}
+    headerClass: { default: void 0 }
   },
   emits: ["toggle", "layerChange"],
-  setup(t, { emit: i }) {
-    const a = t, o = i, l = k(a.expanded), n = `topic-panel-${bt()}`, y = `topic-header-${bt()}`;
-    Re(
-      () => a.expanded,
-      (g) => {
-        l.value = g;
+  setup(e, { emit: i }) {
+    const l = e, o = i, r = w(l.expanded), n = `topic-panel-${Ct()}`, c = `topic-header-${Ct()}`;
+    Be(
+      () => l.expanded,
+      (f) => {
+        r.value = f;
       }
     );
-    function $() {
-      l.value = !l.value, o("toggle", l.value);
+    function L() {
+      r.value = !r.value, o("toggle", r.value);
     }
-    return (g, M) => {
-      const L = Zt("font-awesome-icon");
-      return f(), m("div", {
-        class: ne(["topic-accordion", { "is-expanded": l.value }])
+    return (f, P) => {
+      const m = qt("font-awesome-icon");
+      return y(), k("div", {
+        class: ae(["topic-accordion", { "is-expanded": r.value }])
       }, [
-        P("button", {
-          id: y,
-          class: ne(["topic-header", t.headerClass]),
+        M("button", {
+          id: c,
+          class: ae(["topic-header", e.headerClass]),
           type: "button",
-          "aria-expanded": l.value,
+          "aria-expanded": r.value,
           "aria-controls": n,
-          onClick: $
+          onClick: L
         }, [
-          t.icon || g.$slots.icon ? (f(), m("span", ca, [
-            fe(g.$slots, "icon", {}, () => [
-              t.icon ? (f(), te(L, {
+          e.icon || f.$slots.icon ? (y(), k("span", wa, [
+            ce(f.$slots, "icon", {}, () => [
+              e.icon ? (y(), U(m, {
                 key: 0,
-                icon: ["fas", t.icon],
+                icon: ["fas", e.icon],
                 "aria-hidden": "true"
-              }, null, 8, ["icon"])) : E("", !0)
+              }, null, 8, ["icon"])) : I("", !0)
             ], !0)
-          ])) : E("", !0),
-          P("span", ua, N(t.title), 1),
-          P("span", {
-            class: ne(["topic-chevron", { "is-rotated": l.value }])
-          }, [...M[0] || (M[0] = [
-            P("svg", {
+          ])) : I("", !0),
+          M("span", La, W(e.title), 1),
+          M("span", {
+            class: ae(["topic-chevron", { "is-rotated": r.value }])
+          }, [...P[0] || (P[0] = [
+            M("svg", {
               xmlns: "http://www.w3.org/2000/svg",
               width: "20",
               height: "20",
@@ -2274,46 +2323,42 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
               "stroke-linejoin": "round",
               "aria-hidden": "true"
             }, [
-              P("polyline", { points: "6 9 12 15 18 9" })
+              M("polyline", { points: "6 9 12 15 18 9" })
             ], -1)
           ])], 2)
-        ], 10, sa),
-        Mt(P("div", {
+        ], 10, ba),
+        It(M("div", {
           id: n,
           role: "region",
-          "aria-labelledby": y,
+          "aria-labelledby": c,
           class: "topic-content"
         }, [
-          fe(g.$slots, "default", {}, () => [
-            M[1] || (M[1] = P("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
+          ce(f.$slots, "default", {}, () => [
+            P[1] || (P[1] = M("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
           ], !0)
         ], 512), [
-          [Bt, l.value]
+          [Gt, r.value]
         ])
       ], 2);
     };
   }
-}), Ja = /* @__PURE__ */ De(da, [["__scopeId", "data-v-9af09394"]]), fa = ["aria-label"], pa = ["checked", "disabled", "onChange"], ya = { class: "layer-title" }, ga = {
-  key: 0,
-  class: "loading-indicator",
-  role: "status"
-}, ha = ["aria-label"], ma = {
-  key: 2,
-  class: "zoom-indicator"
-}, va = { class: "layer-title" }, ba = {
-  key: 0,
-  class: "loading-indicator",
-  role: "status"
-}, wa = ["aria-label"], La = {
-  key: 2,
-  class: "zoom-indicator"
-}, Sa = {
-  key: 2,
-  class: "opacity-control"
-}, Ca = ["for"], ka = ["id", "value", "aria-label", "onInput"], xa = ["aria-label"], $a = { class: "legend-label" }, _a = {
+}), Na = /* @__PURE__ */ Se(Sa, [["__scopeId", "data-v-a2023afa"]]);
+function Ca(e) {
+  return e.displayOptions?.shouldShowCheckbox !== !1;
+}
+function Dt(e, i) {
+  return i ? e.displayOptions?.shouldShowSlider !== !1 : !1;
+}
+function Bt(e, i) {
+  return i ? e.displayOptions?.shouldShowLegendBox !== !1 : !1;
+}
+function Fe(e) {
+  return e.displayOptions?.layerNameChange || e.title;
+}
+const ka = ["aria-label"], xa = ["checked", "disabled", "onChange"], $a = { class: "layer-title" }, Pa = { class: "layer-title" }, Ma = {
   key: 0,
   class: "empty-state"
-}, Pa = /* @__PURE__ */ $e({
+}, Ta = /* @__PURE__ */ ue({
   __name: "LayerCheckboxSet",
   props: {
     layers: {},
@@ -2324,164 +2369,82 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
     currentZoom: { default: 12 },
     showOpacity: { type: Boolean, default: !0 },
     showLegend: { type: Boolean, default: !0 },
-    groupLabel: {}
+    groupLabel: { default: void 0 }
   },
   emits: ["toggleLayer", "setOpacity"],
-  setup(t, { emit: i }) {
-    const a = t, o = i;
-    function l(h) {
-      return a.visibleLayerIds.has(h);
-    }
-    function n(h) {
-      return a.layerOpacities[h] ?? 1;
-    }
-    function y(h) {
-      return a.loadingLayerIds.has(h);
-    }
-    function $(h) {
-      return a.layerErrors[h] || null;
-    }
-    function g(h) {
-      const u = a.currentZoom, c = h.minZoom, v = h.maxZoom;
-      return !(c !== void 0 && u < c || v !== void 0 && u > v);
-    }
-    function M(h) {
-      return h.displayOptions?.shouldShowCheckbox !== !1;
-    }
-    function L(h) {
-      return a.showOpacity ? h.displayOptions?.shouldShowSlider !== !1 : !1;
-    }
-    function S(h) {
-      return a.showLegend ? h.displayOptions?.shouldShowLegendBox !== !1 : !1;
-    }
-    function r(h) {
-      return h.displayOptions?.layerNameChange || h.title;
-    }
-    function C(h) {
-      o("toggleLayer", h);
-    }
-    function p(h, u) {
-      const c = u.target;
-      o("setOpacity", h, parseFloat(c.value));
+  setup(e, { emit: i }) {
+    const l = e, o = i, { isVisible: r, getLayerOpacity: n, isLayerLoading: c, getLayerError: L, isLayerAvailableAtZoom: f } = ht(
+      () => l
+    );
+    function P(m) {
+      o("toggleLayer", m);
     }
-    return (h, u) => (f(), m("fieldset", {
+    return (m, b) => (y(), k("fieldset", {
       class: "layer-checkbox-set",
       role: "group",
-      "aria-label": t.groupLabel
+      "aria-label": e.groupLabel
     }, [
-      (f(!0), m(ie, null, se(t.layers, (c) => (f(), m("div", {
-        key: c.id,
+      (y(!0), k(le, null, pe(e.layers, (a) => (y(), k("div", {
+        key: a.id,
         class: "layer-item"
       }, [
-        M(c) ? (f(), m("label", {
+        d(Ca)(a) ? (y(), k("label", {
           key: 0,
-          class: ne(["layer-checkbox", {
-            "layer-unavailable": !g(c),
-            "layer-error": $(c.id)
+          class: ae(["layer-checkbox", {
+            "layer-unavailable": !d(f)(a),
+            "layer-error": d(L)(a.id)
           }])
         }, [
-          P("input", {
+          M("input", {
             type: "checkbox",
-            checked: l(c.id),
-            disabled: !g(c),
-            onChange: (v) => C(c.id)
-          }, null, 40, pa),
-          P("span", ya, [
-            Le(N(r(c)) + " ", 1),
-            y(c.id) && g(c) ? (f(), m("span", ga, " Loading... ")) : E("", !0),
-            $(c.id) ? (f(), m("span", {
-              key: 1,
-              class: "error-indicator",
-              "aria-label": $(c.id) || "Error",
-              role: "status"
-            }, " Error ", 8, ha)) : E("", !0),
-            g(c) ? E("", !0) : (f(), m("span", ma, " (zoom in) "))
+            checked: d(r)(a.id),
+            disabled: !d(f)(a),
+            onChange: (v) => P(a.id)
+          }, null, 40, xa),
+          M("span", $a, [
+            Le(W(d(Fe)(a)) + " ", 1),
+            j(Ye, {
+              loading: d(c)(a.id),
+              error: d(L)(a.id),
+              unavailable: !d(f)(a)
+            }, null, 8, ["loading", "error", "unavailable"])
           ])
-        ], 2)) : (f(), m("div", {
+        ], 2)) : (y(), k("div", {
           key: 1,
-          class: ne(["layer-label-only", {
-            "layer-unavailable": !g(c),
-            "layer-error": $(c.id)
+          class: ae(["layer-label-only", {
+            "layer-unavailable": !d(f)(a),
+            "layer-error": d(L)(a.id)
           }])
         }, [
-          P("span", va, [
-            Le(N(r(c)) + " ", 1),
-            y(c.id) && g(c) ? (f(), m("span", ba, " Loading... ")) : E("", !0),
-            $(c.id) ? (f(), m("span", {
-              key: 1,
-              class: "error-indicator",
-              "aria-label": $(c.id) || "Error",
-              role: "status"
-            }, " Error ", 8, wa)) : E("", !0),
-            g(c) ? E("", !0) : (f(), m("span", La, " (zoom in) "))
+          M("span", Pa, [
+            Le(W(d(Fe)(a)) + " ", 1),
+            j(Ye, {
+              loading: d(c)(a.id),
+              error: d(L)(a.id),
+              unavailable: !d(f)(a)
+            }, null, 8, ["loading", "error", "unavailable"])
           ])
         ], 2)),
-        L(c) && l(c.id) && g(c) ? (f(), m("div", Sa, [
-          P("label", {
-            class: "opacity-label",
-            for: "opacity-" + c.id
-          }, " Opacity: " + N(Math.round(n(c.id) * 100)) + "% ", 9, Ca),
-          P("input", {
-            id: "opacity-" + c.id,
-            type: "range",
-            min: "0",
-            max: "1",
-            step: "0.05",
-            value: n(c.id),
-            "aria-label": "Opacity for " + r(c),
-            class: "opacity-slider",
-            onInput: (v) => p(c.id, v)
-          }, null, 40, ka)
-        ])) : E("", !0),
-        S(c) && l(c.id) && g(c) && c.legend?.length ? (f(), m("ul", {
+        d(Dt)(a, e.showOpacity) && d(r)(a.id) && d(f)(a) ? (y(), U(mt, {
+          key: 2,
+          "layer-id": a.id,
+          "layer-name": d(Fe)(a),
+          opacity: d(n)(a.id),
+          "onUpdate:opacity": (v) => o("setOpacity", a.id, v)
+        }, null, 8, ["layer-id", "layer-name", "opacity", "onUpdate:opacity"])) : I("", !0),
+        d(Bt)(a, e.showLegend) && d(r)(a.id) && d(f)(a) && a.legend?.length ? (y(), U(gt, {
           key: 3,
-          class: "layer-legend",
-          "aria-label": "Legend for " + r(c)
-        }, [
-          (f(!0), m(ie, null, se(c.legend, (v, I) => (f(), m("li", {
-            key: I,
-            class: "legend-item"
-          }, [
-            v.type === "circle" ? (f(), m("span", {
-              key: 0,
-              class: "legend-symbol legend-circle",
-              style: J({ backgroundColor: v.color }),
-              "aria-hidden": "true"
-            }, null, 4)) : v.type === "line" ? (f(), m("span", {
-              key: 1,
-              class: "legend-symbol legend-line",
-              style: J({
-                backgroundColor: v.color,
-                height: `${v.width || 2}px`
-              }),
-              "aria-hidden": "true"
-            }, null, 4)) : v.type === "fill" ? (f(), m("span", {
-              key: 2,
-              class: "legend-symbol legend-fill",
-              style: J({ backgroundColor: v.color }),
-              "aria-hidden": "true"
-            }, null, 4)) : E("", !0),
-            P("span", $a, N(v.label), 1)
-          ]))), 128))
-        ], 8, xa)) : E("", !0)
+          items: a.legend,
+          label: "Legend for " + d(Fe)(a)
+        }, null, 8, ["items", "label"])) : I("", !0)
       ]))), 128)),
-      t.layers.length === 0 ? (f(), m("div", _a, "No layers available")) : E("", !0)
-    ], 8, fa));
+      e.layers.length === 0 ? (y(), k("div", Ma, "No layers available")) : I("", !0)
+    ], 8, ka));
   }
-}), Ka = /* @__PURE__ */ De(Pa, [["__scopeId", "data-v-08508c44"]]), Ma = ["aria-label"], Ta = ["name", "checked", "disabled", "onChange"], Fa = { class: "layer-title" }, Ea = {
-  key: 0,
-  class: "loading-indicator",
-  role: "status"
-}, Oa = ["aria-label"], za = {
-  key: 2,
-  class: "zoom-indicator"
-}, Ia = {
-  key: 0,
-  class: "opacity-control"
-}, Ra = ["for"], Da = ["id", "value", "aria-label", "onInput"], Za = ["aria-label"], Ba = { class: "legend-label" }, Aa = {
+}), Ua = /* @__PURE__ */ Se(Ta, [["__scopeId", "data-v-bfcd7855"]]), Fa = ["aria-label"], Ea = ["name", "checked", "disabled", "onChange"], Oa = { class: "layer-title" }, Ia = {
   key: 0,
   class: "empty-state"
-}, Na = /* @__PURE__ */ $e({
+}, za = /* @__PURE__ */ ue({
   __name: "LayerRadioButtonSet",
   props: {
     layers: {},
@@ -2493,301 +2456,235 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
     showOpacity: { type: Boolean, default: !0 },
     showLegend: { type: Boolean, default: !0 },
     groupName: { default: "layer-radio-group" },
-    groupLabel: {}
+    groupLabel: { default: void 0 }
   },
   emits: ["selectLayer", "setOpacity"],
-  setup(t, { emit: i }) {
-    const a = t, o = i;
-    function l(p) {
-      return a.visibleLayerIds.has(p);
-    }
-    function n(p) {
-      return a.layerOpacities[p] ?? 1;
-    }
-    function y(p) {
-      return a.loadingLayerIds.has(p);
-    }
-    function $(p) {
-      return a.layerErrors[p] || null;
-    }
-    function g(p) {
-      const h = a.currentZoom, u = p.minZoom, c = p.maxZoom;
-      return !(u !== void 0 && h < u || c !== void 0 && h > c);
-    }
-    function M(p) {
-      return a.showOpacity ? p.displayOptions?.shouldShowSlider !== !1 : !1;
-    }
-    function L(p) {
-      return a.showLegend ? p.displayOptions?.shouldShowLegendBox !== !1 : !1;
-    }
-    function S(p) {
-      return p.displayOptions?.layerNameChange || p.title;
-    }
-    function r(p) {
-      const h = a.layers.filter((u) => a.visibleLayerIds.has(u.id) && u.id !== p).map((u) => u.id);
-      o("selectLayer", p, h);
-    }
-    function C(p, h) {
-      const u = h.target;
-      o("setOpacity", p, parseFloat(u.value));
+  setup(e, { emit: i }) {
+    const l = e, o = i, { isVisible: r, getLayerOpacity: n, isLayerLoading: c, getLayerError: L, isLayerAvailableAtZoom: f } = ht(
+      () => l
+    );
+    function P(m) {
+      const b = l.layers.filter((a) => l.visibleLayerIds.has(a.id) && a.id !== m).map((a) => a.id);
+      o("selectLayer", m, b);
     }
-    return (p, h) => (f(), m("div", {
+    return (m, b) => (y(), k("div", {
       class: "layer-radio-set",
       role: "radiogroup",
-      "aria-label": t.groupLabel
+      "aria-label": e.groupLabel
     }, [
-      (f(!0), m(ie, null, se(t.layers, (u) => (f(), m("div", {
-        key: u.id,
+      (y(!0), k(le, null, pe(e.layers, (a) => (y(), k("div", {
+        key: a.id,
         class: "layer-item"
       }, [
-        P("label", {
-          class: ne(["layer-radio", {
-            "layer-unavailable": !g(u),
-            "layer-error": $(u.id)
+        M("label", {
+          class: ae(["layer-radio", {
+            "layer-unavailable": !d(f)(a),
+            "layer-error": d(L)(a.id)
           }])
         }, [
-          P("input", {
+          M("input", {
             type: "radio",
-            name: t.groupName,
-            checked: l(u.id),
-            disabled: !g(u),
-            onChange: (c) => r(u.id)
-          }, null, 40, Ta),
-          P("span", Fa, [
-            Le(N(S(u)) + " ", 1),
-            y(u.id) && g(u) ? (f(), m("span", Ea, " Loading... ")) : E("", !0),
-            $(u.id) ? (f(), m("span", {
-              key: 1,
-              class: "error-indicator",
-              "aria-label": $(u.id) || "Error",
-              role: "status"
-            }, " Error ", 8, Oa)) : E("", !0),
-            g(u) ? E("", !0) : (f(), m("span", za, " (zoom in) "))
+            name: e.groupName,
+            checked: d(r)(a.id),
+            disabled: !d(f)(a),
+            onChange: (v) => P(a.id)
+          }, null, 40, Ea),
+          M("span", Oa, [
+            Le(W(d(Fe)(a)) + " ", 1),
+            j(Ye, {
+              loading: d(c)(a.id),
+              error: d(L)(a.id),
+              unavailable: !d(f)(a)
+            }, null, 8, ["loading", "error", "unavailable"])
           ])
         ], 2),
-        M(u) && l(u.id) && g(u) ? (f(), m("div", Ia, [
-          P("label", {
-            class: "opacity-label",
-            for: "opacity-" + u.id
-          }, " Opacity: " + N(Math.round(n(u.id) * 100)) + "% ", 9, Ra),
-          P("input", {
-            id: "opacity-" + u.id,
-            type: "range",
-            min: "0",
-            max: "1",
-            step: "0.05",
-            value: n(u.id),
-            "aria-label": "Opacity for " + S(u),
-            class: "opacity-slider",
-            onInput: (c) => C(u.id, c)
-          }, null, 40, Da)
-        ])) : E("", !0),
-        L(u) && l(u.id) && g(u) && u.legend?.length ? (f(), m("ul", {
+        d(Dt)(a, e.showOpacity) && d(r)(a.id) && d(f)(a) ? (y(), U(mt, {
+          key: 0,
+          "layer-id": a.id,
+          "layer-name": d(Fe)(a),
+          opacity: d(n)(a.id),
+          "onUpdate:opacity": (v) => o("setOpacity", a.id, v)
+        }, null, 8, ["layer-id", "layer-name", "opacity", "onUpdate:opacity"])) : I("", !0),
+        d(Bt)(a, e.showLegend) && d(r)(a.id) && d(f)(a) && a.legend?.length ? (y(), U(gt, {
           key: 1,
-          class: "layer-legend",
-          "aria-label": "Legend for " + S(u)
-        }, [
-          (f(!0), m(ie, null, se(u.legend, (c, v) => (f(), m("li", {
-            key: v,
-            class: "legend-item"
-          }, [
-            c.type === "circle" ? (f(), m("span", {
-              key: 0,
-              class: "legend-symbol legend-circle",
-              style: J({ backgroundColor: c.color }),
-              "aria-hidden": "true"
-            }, null, 4)) : c.type === "line" ? (f(), m("span", {
-              key: 1,
-              class: "legend-symbol legend-line",
-              style: J({
-                backgroundColor: c.color,
-                height: `${c.width || 2}px`
-              }),
-              "aria-hidden": "true"
-            }, null, 4)) : c.type === "fill" ? (f(), m("span", {
-              key: 2,
-              class: "legend-symbol legend-fill",
-              style: J({ backgroundColor: c.color }),
-              "aria-hidden": "true"
-            }, null, 4)) : E("", !0),
-            P("span", Ba, N(c.label), 1)
-          ]))), 128))
-        ], 8, Za)) : E("", !0)
+          items: a.legend,
+          label: "Legend for " + d(Fe)(a)
+        }, null, 8, ["items", "label"])) : I("", !0)
       ]))), 128)),
-      t.layers.length === 0 ? (f(), m("div", Aa, "No layers available")) : E("", !0)
-    ], 8, Ma));
+      e.layers.length === 0 ? (y(), k("div", Ia, "No layers available")) : I("", !0)
+    ], 8, Fa));
   }
-}), Qa = /* @__PURE__ */ De(Na, [["__scopeId", "data-v-f28c6628"]]);
-function Xa(t) {
-  const i = k([]), a = k(/* @__PURE__ */ new Set()), o = k({}), l = k(/* @__PURE__ */ new Set()), n = k({}), y = k(""), $ = k(!1), g = k(!1), M = k(null), L = z(() => {
-    if (!y.value.trim())
+}), Wa = /* @__PURE__ */ Se(za, [["__scopeId", "data-v-c368d815"]]);
+function ja(e) {
+  const i = w([]), l = w(/* @__PURE__ */ new Set()), o = w({}), r = w(/* @__PURE__ */ new Set()), n = w({}), c = w(""), L = w(!1), f = w(!1), P = w(null), m = E(() => {
+    if (!c.value.trim())
       return i.value;
-    const F = y.value.toLowerCase();
-    return i.value.filter((R) => R.title.toLowerCase().includes(F));
-  }), S = z(() => i.value.map((F) => ({
+    const F = c.value.toLowerCase();
+    return i.value.filter((O) => O.title.toLowerCase().includes(F));
+  }), b = E(() => i.value.map((F) => ({
     config: F,
     component: F.type
     // "circle", "fill", or "line"
   })));
-  async function r() {
-    if (!g.value) {
-      $.value = !0, M.value = null;
+  async function a() {
+    if (!f.value) {
+      L.value = !0, P.value = null;
       try {
         let F;
-        t.mode === "dynamic" || !t.mode ? t.webMapId ? F = await C(t.webMapId) : F = await pt() : F = await pt(), i.value = F;
-        const R = {};
-        F.forEach((Z) => {
-          R[Z.id] = Z.opacity ?? 1;
-        }), o.value = R, g.value = !0;
+        e.mode === "dynamic" || !e.mode ? e.webMapId ? F = await v(e.webMapId) : F = await yt() : F = await yt(), i.value = F;
+        const O = {};
+        F.forEach((_) => {
+          O[_.id] = _.opacity ?? 1;
+        }), o.value = O, f.value = !0;
       } catch (F) {
-        M.value = F instanceof Error ? F : new Error("Failed to initialize layerboard");
+        P.value = F instanceof Error ? F : new Error("Failed to initialize layerboard");
       } finally {
-        $.value = !1;
+        L.value = !1;
       }
     }
   }
-  async function C(F) {
-    const R = gt(F), Z = await fetch(R, { cache: "no-store" });
-    if (!Z.ok)
-      throw new Error(`Failed to fetch WebMap: ${Z.status} ${Z.statusText}`);
-    const pe = await Z.json();
-    return Ft(pe);
+  async function v(F) {
+    const O = bt(F), _ = await fetch(O, { cache: "no-store" });
+    if (!_.ok)
+      throw new Error(`Failed to fetch WebMap: ${_.status} ${_.statusText}`);
+    const de = await _.json();
+    return Rt(de);
   }
-  function p(F) {
-    const R = new Set(a.value);
-    R.has(F) ? R.delete(F) : R.add(F), a.value = R;
+  function h(F) {
+    const O = new Set(l.value);
+    O.has(F) ? O.delete(F) : O.add(F), l.value = O;
   }
-  function h(F, R) {
+  function S(F, O) {
     o.value = {
       ...o.value,
-      [F]: Math.max(0, Math.min(1, R))
+      [F]: Math.max(0, Math.min(1, O))
     };
   }
-  function u(F) {
-    y.value = F;
+  function x(F) {
+    c.value = F;
   }
-  function c(F, R) {
-    const Z = new Set(l.value);
-    R ? Z.add(F) : Z.delete(F), l.value = Z;
+  function B(F, O) {
+    const _ = new Set(r.value);
+    O ? _.add(F) : _.delete(F), r.value = _;
   }
-  function v(F, R) {
-    if (R)
-      n.value = { ...n.value, [F]: R };
+  function q(F, O) {
+    if (O)
+      n.value = { ...n.value, [F]: O };
     else {
-      const Z = { ...n.value };
-      delete Z[F], n.value = Z;
+      const _ = { ...n.value };
+      delete _[F], n.value = _;
     }
   }
-  function I() {
-    i.value = [], a.value = /* @__PURE__ */ new Set(), o.value = {}, l.value = /* @__PURE__ */ new Set(), n.value = {}, y.value = "", $.value = !1, g.value = !1, M.value = null;
+  function te() {
+    i.value = [], l.value = /* @__PURE__ */ new Set(), o.value = {}, r.value = /* @__PURE__ */ new Set(), n.value = {}, c.value = "", L.value = !1, f.value = !1, P.value = null;
   }
   return {
     // State (readonly)
-    layerConfigs: j(i),
-    visibleLayers: j(a),
-    layerOpacities: j(o),
-    loadingLayers: j(l),
-    layerErrors: j(n),
-    searchQuery: j(y),
-    isLoading: j($),
-    isInitialized: j(g),
-    error: j(M),
+    layerConfigs: N(i),
+    visibleLayers: N(l),
+    layerOpacities: N(o),
+    loadingLayers: N(r),
+    layerErrors: N(n),
+    searchQuery: N(c),
+    isLoading: N(L),
+    isInitialized: N(f),
+    error: N(P),
     // Computed
-    filteredLayerConfigs: L,
-    layerList: S,
+    filteredLayerConfigs: m,
+    layerList: b,
     // Config
-    config: t,
+    config: e,
     // Methods
-    initialize: r,
-    toggleLayer: p,
-    setLayerOpacity: h,
-    filterLayers: u,
-    setLayerLoading: c,
-    setLayerError: v,
-    reset: I
+    initialize: a,
+    toggleLayer: h,
+    setLayerOpacity: S,
+    filterLayers: x,
+    setLayerLoading: B,
+    setLayerError: q,
+    reset: te
   };
 }
-function Ya() {
-  const t = k([]), i = k(/* @__PURE__ */ new Set()), a = k(/* @__PURE__ */ new Set());
+function qa() {
+  const e = w([]), i = w(/* @__PURE__ */ new Set()), l = w(/* @__PURE__ */ new Set());
   function o(n) {
     i.value.has(n) ? i.value.delete(n) : i.value.add(n);
   }
-  function l(n) {
-    t.value = n;
+  function r(n) {
+    e.value = n;
   }
   return {
-    layers: z(() => t.value),
-    visibleLayerIds: z(() => i.value),
-    loadingLayerIds: z(() => a.value),
+    layers: E(() => e.value),
+    visibleLayerIds: E(() => i.value),
+    loadingLayerIds: E(() => l.value),
     toggleLayer: o,
-    setLayers: l
+    setLayers: r
   };
 }
-function Va(t) {
-  const i = k(null), a = k(!1), o = k(null), l = k(0);
-  async function n(g = {}) {
-    a.value = !0, o.value = null;
-    const M = t.pageSize || 2e3;
-    let L = 0, S = [], r = !0;
+function _a(e) {
+  const i = w(null), l = w(!1), o = w(null), r = w(0);
+  async function n(f = {}) {
+    l.value = !0, o.value = null;
+    const P = e.pageSize || 2e3;
+    let m = 0, b = [], a = !0;
     try {
-      for (; r; ) {
-        const p = t.url.replace(/\/$/, ""), h = encodeURIComponent(g.where || t.where || "1=1");
-        let u = `${p}/query?where=${h}&outFields=*&returnGeometry=true&resultRecordCount=${M}&resultOffset=${L}&f=geojson`;
-        if (g.bounds) {
-          const I = JSON.stringify({
-            xmin: g.bounds.west,
-            ymin: g.bounds.south,
-            xmax: g.bounds.east,
-            ymax: g.bounds.north,
+      for (; a; ) {
+        const h = e.url.replace(/\/$/, ""), S = encodeURIComponent(f.where || e.where || "1=1");
+        let x = `${h}/query?where=${S}&outFields=*&returnGeometry=true&resultRecordCount=${P}&resultOffset=${m}&f=geojson`;
+        if (f.bounds) {
+          const te = JSON.stringify({
+            xmin: f.bounds.west,
+            ymin: f.bounds.south,
+            xmax: f.bounds.east,
+            ymax: f.bounds.north,
             spatialReference: { wkid: 4326 }
           });
-          u += `&geometry=${encodeURIComponent(I)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
+          x += `&geometry=${encodeURIComponent(te)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
         }
-        const c = await fetch(u);
-        if (!c.ok)
-          throw new Error(`HTTP ${c.status}: ${c.statusText}`);
-        const v = await c.json();
-        v.features && v.features.length > 0 ? (S = S.concat(v.features), L += v.features.length, r = v.features.length === M) : r = !1;
+        const B = await fetch(x);
+        if (!B.ok)
+          throw new Error(`HTTP ${B.status}: ${B.statusText}`);
+        const q = await B.json();
+        q.features && q.features.length > 0 ? (b = b.concat(q.features), m += q.features.length, a = q.features.length === P) : a = !1;
       }
-      const C = {
+      const v = {
         type: "FeatureCollection",
-        features: S
+        features: b
       };
-      return i.value = C, l.value = S.length, C;
-    } catch (C) {
-      const p = C instanceof Error ? C : new Error("Failed to fetch features");
-      throw o.value = p, p;
+      return i.value = v, r.value = b.length, v;
+    } catch (v) {
+      const h = v instanceof Error ? v : new Error("Failed to fetch features");
+      throw o.value = h, h;
     } finally {
-      a.value = !1;
+      l.value = !1;
     }
   }
-  function y() {
-    i.value = null, l.value = 0, o.value = null;
+  function c() {
+    i.value = null, r.value = 0, o.value = null;
   }
-  async function $(g = {}) {
-    return n(g);
+  async function L(f = {}) {
+    return n(f);
   }
   return {
     // State (readonly)
-    data: j(i),
-    isLoading: j(a),
-    error: j(o),
-    totalFeatures: j(l),
+    data: N(i),
+    isLoading: N(l),
+    error: N(o),
+    totalFeatures: N(r),
     // Config
-    config: t,
+    config: e,
     // Methods
     fetch: n,
-    refetch: $,
-    clear: y
+    refetch: L,
+    clear: c
   };
 }
-function ei(t, i, a) {
-  const o = Va(t);
-  return Re(
+function Ga(e, i, l) {
+  const o = _a(e);
+  return Be(
     i,
-    async (l) => {
-      if (l) {
-        const n = a(l);
+    async (r) => {
+      if (r) {
+        const n = l(r);
         await o.fetch(n);
       }
     },
@@ -2795,21 +2692,26 @@ function ei(t, i, a) {
   ), o;
 }
 export {
-  Ka as LayerCheckboxSet,
-  Eo as LayerPanel,
-  Qa as LayerRadioButtonSet,
-  Ha as Layerboard,
-  Gt as MapPanel,
-  Ja as TopicAccordion,
-  qa as WEBMAP_ID,
-  gt as buildWebMapUrl,
-  jo as clearCache,
-  pt as getLayerConfigs,
-  Ga as getWebMapUrl,
-  Ft as transformWebMapToLayerConfigs,
-  Jo as useApiDataSources,
-  Va as useDataSource,
-  Ya as useLayerConfig,
-  Xa as useLayerboard,
-  ei as useReactiveDataSource
+  Ua as LayerCheckboxSet,
+  Uo as LayerPanel,
+  Wa as LayerRadioButtonSet,
+  Va as Layerboard,
+  to as MapPanel,
+  Na as TopicAccordion,
+  Aa as WEBMAP_ID,
+  bt as buildWebMapUrl,
+  oa as clearCache,
+  yt as getLayerConfigs,
+  Fe as getLayerDisplayName,
+  Za as getWebMapUrl,
+  zt as normalizeUrl,
+  Ca as shouldShowCheckbox,
+  Bt as shouldShowLegendBox,
+  Dt as shouldShowSlider,
+  Rt as transformWebMapToLayerConfigs,
+  na as useApiDataSources,
+  _a as useDataSource,
+  qa as useLayerConfig,
+  ja as useLayerboard,
+  Ga as useReactiveDataSource
 };