@phila/layerboard 3.0.0-beta.18 → 3.0.0-beta.19

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as $e, ref as k, watch as Re, computed as z, onMounted as Xe, onUnmounted as Pt, createElementBlock as h, 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 { 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({
@@ -26,14 +26,14 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
   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 = m(n.value));
+      o("zoom", e), n.value && (y.value = g(n.value));
     }
-    function m(e) {
+    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 s(e, d, r, w, _) {
+    async function r(e, d, s, w, _) {
       const T = encodeURIComponent(w || "1=1"), B = JSON.stringify({
         xmin: d.west,
         ymin: d.south,
@@ -63,12 +63,12 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       };
     }
     async function C(e, d) {
-      const r = d.map(async (w) => {
+      const s = d.map(async (w) => {
         const _ = a.layerList.find((T) => T.config.id === w)?.config;
         if (_) {
           o("layerLoading", w, !0);
           try {
-            const T = n.value?.getZoom(), B = await s(_.url, e, w, _.where, T);
+            const T = n.value?.getZoom(), B = await r(_.url, e, w, _.where, T);
             M.value = { ...M.value, [w]: B }, o("layerError", w, null);
           } catch (T) {
             const B = T instanceof Error ? T.message : "Failed to load";
@@ -78,16 +78,16 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
           }
         }
       });
-      await Promise.all(r);
+      await Promise.all(s);
     }
     async function p(e) {
       const d = [...a.visibleLayers];
       await C(e, d);
     }
-    function g(e) {
+    function h(e) {
       L.value = e.bounds, p(e.bounds);
     }
-    function c(e) {
+    function u(e) {
       n.value = e;
       const d = e.getBounds();
       L.value = {
@@ -96,34 +96,34 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
         east: d.getEast(),
         north: d.getNorth()
       };
-      const r = e.getZoom();
-      o("zoom", r), y.value = m(e), p(L.value);
+      const s = e.getZoom();
+      o("zoom", s), y.value = g(e), p(L.value);
     }
     Re(
       () => a.visibleLayers.size,
       async () => {
         if (le.value.length > 0 && Me(), L.value) {
-          const e = new Set(a.visibleLayers), d = [...e].filter((r) => !S.value.has(r));
+          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);
         }
       }
     );
-    function u(e) {
+    function c(e) {
       return a.visibleLayers.has(e);
     }
-    function b(e) {
+    function v(e) {
       return !!M.value[e.id];
     }
     const I = z(
-      () => a.layerList.filter((e) => e.config.type === "circle" && u(e.config.id) && b(e.config)).map((e) => e.config)
+      () => 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" && u(e.config.id) && b(e.config)).map((e) => e.config)
+      () => 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 && u(e.config.id) && b(e.config)
+        (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" && u(e.config.id) && b(e.config)).map((e) => e.config)
+      () => a.layerList.filter((e) => e.config.type === "line" && c(e.config.id) && v(e.config)).map((e) => e.config)
     );
     function pe(e) {
       return a.visibleTiledLayers?.has(e) ?? !1;
@@ -147,10 +147,10 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       if (!je.value.has(e.id)) {
         je.value.add(e.id);
         try {
-          const d = e.url.replace(/\/$/, ""), r = await fetch(`${d}?f=json`);
-          if (!r.ok)
+          const d = e.url.replace(/\/$/, ""), s = await fetch(`${d}?f=json`);
+          if (!s.ok)
             return;
-          const w = await r.json(), _ = w.minScale || 0;
+          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)
@@ -174,8 +174,8 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       const d = Be.value[e.id];
       if (!d)
         return "tiled";
-      const r = y.value;
-      return r === 0 || r > d.maxScale ? "tiled" : "dynamic";
+      const s = y.value;
+      return s === 0 || s > d.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) {
@@ -193,10 +193,10 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       return a.layerOpacities[e] ?? 1;
     }
     function _e(e) {
-      const d = Ee(e.id), r = e.type === "circle" ? "circle-opacity" : e.type === "fill" ? "fill-opacity" : "line-opacity";
+      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 = _[r] === 1, ee = typeof T == "string" && T.startsWith("rgba(");
+      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 _;
@@ -204,7 +204,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
           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})`, _[r] = 1;
+            _[w] = `rgba(${X}, ${A}, ${K}, ${de})`, _[s] = 1;
           }
           return _;
         }
@@ -216,7 +216,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
           _[w] = `rgb(${X}, ${A}, ${K})`;
         }
       }
-      return _[r] = d, _;
+      return _[s] = d, _;
     }
     function Oe(e) {
       const d = Ee(e.id);
@@ -228,7 +228,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       return a.layerList.find((w) => w.config.id === d)?.config;
     }
     function qe(e, d) {
-      return e.replace(/\{([^}]+)\}/g, (r, w) => {
+      return e.replace(/\{([^}]+)\}/g, (s, w) => {
         const _ = d[w];
         return _ == null ? "" : String(_);
       });
@@ -236,11 +236,11 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
     function Se(e) {
       return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
     }
-    function Ge(e, d, r) {
+    function Ge(e, d, s) {
       if (e == null) return "-";
       if (d?.dateFormat && typeof e == "number") {
         const w = new Date(e);
-        if (r && d.dateFormat === "shortDateShortTime")
+        if (s && d.dateFormat === "shortDateShortTime")
           return w.toLocaleString(void 0, { dateStyle: "short", timeStyle: "short" });
         switch (d.dateFormat) {
           case "shortDateShortTime":
@@ -275,17 +275,17 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
     }
     function Ae(e) {
       const d = /* @__PURE__ */ new Set();
-      return e.filter((r) => {
-        const _ = `${r.layer.id.replace(/-outline$/, "")}:${JSON.stringify(r.properties)}`;
+      return e.filter((s) => {
+        const _ = `${s.layer.id.replace(/-outline$/, "")}:${JSON.stringify(s.properties)}`;
         return d.has(_) ? !1 : (d.add(_), !0);
       });
     }
     function Ne(e, d) {
-      const r = M.value[e];
-      if (!r?.features) return null;
+      const s = M.value[e];
+      if (!s?.features) return null;
       const w = d.objectid ?? d.OBJECTID ?? d.FID;
       if (w != null) {
-        const _ = r.features.find(
+        const _ = s.features.find(
           (T) => (T.properties?.objectid ?? T.properties?.OBJECTID ?? T.properties?.FID) === w
         );
         if (_) return _.geometry;
@@ -293,24 +293,24 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       return null;
     }
     function He(e, d) {
-      const r = /* @__PURE__ */ new Map();
+      const s = /* @__PURE__ */ new Map();
       return d.forEach((w, _) => {
-        r.set(w.id, _);
+        s.set(w.id, _);
       }), e.sort((w, _) => {
-        const T = w.layer.id.replace(/-outline$/, ""), B = _.layer.id.replace(/-outline$/, ""), ee = r.get(T) ?? -1;
-        return (r.get(B) ?? -1) - ee;
+        const T = w.layer.id.replace(/-outline$/, ""), B = _.layer.id.replace(/-outline$/, ""), ee = s.get(T) ?? -1;
+        return (s.get(B) ?? -1) - ee;
       });
     }
     function re(e) {
       const d = n.value;
       if (!d) return;
-      const r = [];
+      const s = [];
       a.layerList.forEach((A) => {
         const K = A.config;
-        a.visibleLayers.has(K.id) && (r.push(K.id), K.outlinePaint && r.push(`${K.id}-outline`));
+        a.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, {
-        layers: r
+        layers: s
       });
       if (_.length === 0) return;
       const T = Ae(_), B = a.layerList.map((A) => A.config), U = He(T, B).map((A) => {
@@ -331,7 +331,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       if (X) {
         const A = Pe(X.layerId);
         if (A) {
-          const K = v(X.geometry), H = x(A.id, A.type);
+          const K = b(X.geometry), H = x(A.id, A.type);
           ue.value = {
             geometry: X.geometry,
             geometryType: K,
@@ -384,9 +384,9 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       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 r of e.popupConfig.fields) {
-          const w = Ge(e.properties[r.field], r.format, e.popupConfig.showTime), _ = r.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(r.label)}</th><td>${U}</td></tr>`;
+        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>`;
         }
         d += "</table>";
       }
@@ -414,13 +414,13 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       "fill-color": "#808080",
       "fill-opacity": 0.5
     }, ue = k(null);
-    function v(e) {
+    function b(e) {
       return e.type;
     }
     function x(e, d) {
-      const r = Pe(e);
-      if (!r) return { radius: 5, width: 2 };
-      const w = r.paint || {};
+      const s = Pe(e);
+      if (!s) return { radius: 5, width: 2 };
+      const w = s.paint || {};
       if (d === "circle") {
         const _ = w["circle-radius"];
         return typeof _ == "number" ? { radius: _ } : { radius: 5 };
@@ -429,8 +429,8 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
         const _ = w["line-width"];
         if (typeof _ == "number")
           return { width: _ };
-        if (r.outlinePaint && r.outlinePaint["line-width"]) {
-          const T = r.outlinePaint["line-width"];
+        if (s.outlinePaint && s.outlinePaint["line-width"]) {
+          const T = s.outlinePaint["line-width"];
           if (typeof T == "number")
             return { width: T };
         }
@@ -442,8 +442,8 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       return !e || e.length === 0 ? [] : e[0] ?? [];
     }
     function W(e) {
-      const { geometry: d, geometryType: r, originalStyle: w } = e;
-      if (r === "Point" || r === "MultiPoint") {
+      const { geometry: d, geometryType: s, originalStyle: w } = e;
+      if (s === "Point" || s === "MultiPoint") {
         const T = (w.radius || 5) + 3;
         return {
           type: "FeatureCollection",
@@ -458,7 +458,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
           ]
         };
       }
-      if (r === "LineString" || r === "MultiLineString") {
+      if (s === "LineString" || s === "MultiLineString") {
         const T = (w.width || 2) + 3;
         return {
           type: "FeatureCollection",
@@ -473,7 +473,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
           ]
         };
       }
-      if (r === "Polygon") {
+      if (s === "Polygon") {
         const _ = d.coordinates, T = q(_), ee = (w.width || 2) + 3;
         return {
           type: "FeatureCollection",
@@ -491,7 +491,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
           ]
         };
       }
-      if (r === "MultiPolygon") {
+      if (s === "MultiPolygon") {
         const _ = d.coordinates, B = (w.width || 2) + 3;
         return {
           type: "FeatureCollection",
@@ -513,8 +513,8 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       };
     }
     function G(e) {
-      const { geometry: d, geometryType: r } = e;
-      return r === "Polygon" || r === "MultiPolygon" ? {
+      const { geometry: d, geometryType: s } = e;
+      return s === "Polygon" || s === "MultiPolygon" ? {
         type: "FeatureCollection",
         features: [{ type: "Feature", geometry: d, properties: {} }]
       } : { type: "FeatureCollection", features: [] };
@@ -546,10 +546,10 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
       }
       const d = Pe(e.layerId);
       if (d) {
-        const r = v(e.geometry), w = x(d.id, d.type);
+        const s = b(e.geometry), w = x(d.id, d.type);
         ue.value = {
           geometry: e.geometry,
-          geometryType: r,
+          geometryType: s,
           layerId: d.id,
           properties: e.properties,
           originalStyle: w
@@ -558,10 +558,10 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
     });
     const ht = k(null);
     function Et(e) {
-      const [d, r] = e.geometry.coordinates;
-      ht.value = [d, r];
+      const [d, s] = e.geometry.coordinates;
+      ht.value = [d, s];
     }
-    return (e, d) => (f(), h("div", jt, [
+    return (e, d) => (f(), m("div", jt, [
       Q(O(At), {
         ref_key: "mapRef",
         ref: l,
@@ -581,8 +581,8 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
         "tool-panel-split-ratio": 50,
         onZoom: $,
         onClick: Me,
-        onMoveend: g,
-        onLoad: c,
+        onMoveend: h,
+        onLoad: u,
         onSearchResult: Et
       }, {
         default: Ue(() => [
@@ -590,59 +590,59 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
             key: 0,
             position: a.drawControlPosition
           }, null, 8, ["position"])) : E("", !0),
-          (f(!0), h(ie, null, se(at.value, (r) => (f(), te(O(wt), {
-            id: "tiled-" + r.id,
-            key: "tiled-" + r.id,
-            source: tt(r),
-            paint: { "raster-opacity": ye(r.id) },
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom
+          (f(!0), m(ie, null, se(at.value, (s) => (f(), te(O(wt), {
+            id: "tiled-" + s.id,
+            key: "tiled-" + s.id,
+            source: tt(s),
+            paint: { "raster-opacity": ye(s.id) },
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), h(ie, null, se(it.value, (r) => (f(), te(O(wt), {
-            id: "dynamic-" + r.id,
-            key: "dynamic-" + r.id,
-            source: nt(r),
-            paint: { "raster-opacity": ye(r.id) },
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom
+          (f(!0), m(ie, null, se(it.value, (s) => (f(), te(O(wt), {
+            id: "dynamic-" + s.id,
+            key: "dynamic-" + s.id,
+            source: nt(s),
+            paint: { "raster-opacity": ye(s.id) },
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), h(ie, null, se(I.value, (r) => (f(), te(O(Lt), {
-            id: r.id,
-            key: r.id,
-            source: ge(r),
-            paint: _e(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (f(!0), m(ie, null, se(I.value, (s) => (f(), te(O(Lt), {
+            id: s.id,
+            key: s.id,
+            source: ge(s),
+            paint: _e(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
             onClick: re
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), h(ie, null, se(F.value, (r) => (f(), te(O(St), {
-            id: r.id,
-            key: r.id,
-            source: ge(r),
-            paint: _e(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (f(!0), m(ie, null, se(F.value, (s) => (f(), te(O(St), {
+            id: s.id,
+            key: s.id,
+            source: ge(s),
+            paint: _e(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
             onClick: re
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), h(ie, null, se(R.value, (r) => (f(), te(O(ct), {
-            id: r.id + "-outline",
-            key: r.id + "-outline",
-            source: ge(r),
-            paint: Oe(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (f(!0), m(ie, null, se(R.value, (s) => (f(), te(O(ct), {
+            id: s.id + "-outline",
+            key: s.id + "-outline",
+            source: ge(s),
+            paint: Oe(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
             onClick: re
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (f(!0), h(ie, null, se(Z.value, (r) => (f(), te(O(ct), {
-            id: r.id,
-            key: r.id,
-            source: ge(r),
-            paint: _e(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (f(!0), m(ie, null, se(Z.value, (s) => (f(), te(O(ct), {
+            id: s.id,
+            key: s.id,
+            source: ge(s),
+            paint: _e(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
             onClick: re
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
@@ -754,7 +754,7 @@ const jt = { class: "map-panel" }, qt = /* @__PURE__ */ $e({
         }, 16)
       ]),
       _: 3
-    }, 16)) : (f(), h("button", dt({
+    }, 16)) : (f(), m("button", dt({
       key: 1,
       type: "button",
       disabled: i.disabled,
@@ -804,7 +804,7 @@ 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(""), m = z({
+    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;
@@ -814,17 +814,17 @@ const eo = ["for"], to = { class: "state-layer" }, oo = { class: "content" }, ao
       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 m.value !== "" && p.push("phila-text-field--filled"), o.className && p.push(o.className), ft(...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"]))
         return o.placeholder || void 0;
-    }), s = k(null), C = (p) => {
-      p.target.closest("button") || s.value?.focus();
+    }), r = k(null), C = (p) => {
+      p.target.closest("button") || r.value?.focus();
     };
-    return (p, g) => (f(), h("div", {
+    return (p, h) => (f(), m("div", {
       class: ne(["phila-input", M.value])
     }, [
-      o.label ? (f(), h("label", {
+      o.label ? (f(), m("label", {
         key: 0,
         for: n.value,
         class: "has-text-label-small phila-label"
@@ -845,23 +845,23 @@ const eo = ["for"], to = { class: "state-layer" }, oo = { class: "content" }, ao
               Mt(P("input", dt({
                 id: n.value,
                 ref_key: "inputRef",
-                ref: s,
-                "onUpdate:modelValue": g[0] || (g[0] = (c) => m.value = c),
+                ref: r,
+                "onUpdate:modelValue": h[0] || (h[0] = (u) => g.value = u),
                 class: "phila-text-field-input has-text-body-default",
                 placeholder: o.placeholder,
                 "aria-label": S.value
               }, O(a)), null, 16, io), [
-                [It, m.value]
+                [It, g.value]
               ])
             ])
           ]),
-          m.value != "" ? (f(), te(O(Jt), {
+          g.value != "" ? (f(), te(O(Jt), {
             key: 1,
             variant: "standard",
             size: "small",
             "icon-only": "",
             "icon-definition": O(Yt),
-            onClick: g[1] || (g[1] = (c) => m.value = "")
+            onClick: h[1] || (h[1] = (u) => g.value = "")
           }, null, 8, ["icon-definition"])) : E("", !0),
           o.trailingIcon ? (f(), te(O(be), {
             key: 2,
@@ -873,8 +873,8 @@ const eo = ["for"], to = { class: "state-layer" }, oo = { class: "content" }, ao
           fe(p.$slots, "trailing-action")
         ])
       ], 2),
-      o.supportingText ? (f(), h("div", no, N(o.supportingText), 1)) : E("", !0),
-      l.value ? (f(), h("div", lo, [
+      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),
           size: "small",
@@ -955,50 +955,50 @@ const yo = { class: "layer-panel" }, go = {
     const a = t, o = i, l = z(() => {
       if (!a.searchQuery.trim())
         return a.layerList;
-      const c = a.searchQuery.toLowerCase();
-      return a.layerList.filter((u) => u.config.title.toLowerCase().includes(c));
+      const u = a.searchQuery.toLowerCase();
+      return a.layerList.filter((c) => c.config.title.toLowerCase().includes(u));
     });
-    function n(c) {
-      let u = c.split("?")[0] || c;
-      return u = u.replace(/\/query$/, ""), u = u.replace(/\/$/, ""), u.toLowerCase();
+    function n(u) {
+      let c = u.split("?")[0] || u;
+      return c = c.replace(/\/query$/, ""), c = c.replace(/\/$/, ""), c.toLowerCase();
     }
-    function y(c) {
-      const u = n(c);
-      return a.layerMetadata[u] || null;
+    function y(u) {
+      const c = n(u);
+      return a.layerMetadata[c] || null;
     }
-    const $ = z(() => a.layerList.some((c) => y(c.config.url)));
-    function m(c) {
-      return a.visibleLayers.has(c);
+    const $ = z(() => a.layerList.some((u) => y(u.config.url)));
+    function g(u) {
+      return a.visibleLayers.has(u);
     }
-    function M(c) {
-      return a.layerOpacities[c] ?? 1;
+    function M(u) {
+      return a.layerOpacities[u] ?? 1;
     }
-    function L(c) {
-      return a.loadingLayers.has(c);
+    function L(u) {
+      return a.loadingLayers.has(u);
     }
-    function S(c) {
-      return a.layerErrors[c] || null;
+    function S(u) {
+      return a.layerErrors[u] || null;
     }
-    function s(c) {
-      const u = a.currentZoom, b = c.minZoom, I = c.maxZoom;
-      return !(b !== void 0 && u < b || I !== void 0 && u > I);
+    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: (c) => o("updateSearch", c)
+      set: (u) => o("updateSearch", u)
     });
-    function p(c) {
-      o("toggleLayer", c);
+    function p(u) {
+      o("toggleLayer", u);
     }
-    function g(c, u) {
-      const b = u.target, I = parseFloat(b.value);
-      o("setOpacity", c, I);
+    function h(u, c) {
+      const v = c.target, I = parseFloat(v.value);
+      o("setOpacity", u, I);
     }
-    return (c, u) => (f(), h("div", yo, [
-      t.showSearch ? (f(), h("div", go, [
+    return (u, c) => (f(), m("div", yo, [
+      t.showSearch ? (f(), m("div", go, [
         Q(O(ro), {
           modelValue: C.value,
-          "onUpdate:modelValue": u[0] || (u[0] = (b) => C.value = b),
+          "onUpdate:modelValue": c[0] || (c[0] = (v) => C.value = v),
           placeholder: t.searchPlaceholder,
           "class-name": "layer-search-field"
         }, {
@@ -1013,27 +1013,27 @@ const yo = { class: "layer-panel" }, go = {
           _: 1
         }, 8, ["modelValue", "placeholder"])
       ])) : E("", !0),
-      t.mode === "topics" ? (f(), h("div", ho, [
-        fe(c.$slots, "topics", {}, () => [
-          u[2] || (u[2] = P("div", { class: "no-topics" }, ' No topic components provided. Use the "topics" slot to add TopicAccordion components. ', -1))
+      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))
         ], !0)
-      ])) : (f(), h("div", {
+      ])) : (f(), m("div", {
         key: 2,
         class: ne(["layer-list", { "has-metadata": $.value }])
       }, [
-        (f(!0), h(ie, null, se(l.value, (b) => (f(), h("div", {
-          key: b.config.id,
+        (f(!0), m(ie, null, se(l.value, (v) => (f(), m("div", {
+          key: v.config.id,
           class: "layer-item"
         }, [
           P("div", mo, [
-            y(b.config.url) ? (f(), h("a", {
+            y(v.config.url) ? (f(), m("a", {
               key: 0,
-              href: y(b.config.url) || "",
+              href: y(v.config.url) || "",
               target: "_blank",
               rel: "noopener noreferrer",
               class: "metadata-link",
-              "aria-label": "View metadata for " + b.config.title,
-              onClick: u[1] || (u[1] = Rt(() => {
+              "aria-label": "View metadata for " + v.config.title,
+              onClick: c[1] || (c[1] = Rt(() => {
               }, ["stop"]))
             }, [
               Q(O(be), {
@@ -1042,64 +1042,64 @@ const yo = { class: "layer-panel" }, go = {
                 inline: "",
                 decorative: ""
               }, null, 8, ["icon-definition"])
-            ], 8, vo)) : $.value ? (f(), h("span", bo)) : E("", !0),
+            ], 8, vo)) : $.value ? (f(), m("span", bo)) : E("", !0),
             P("label", {
               class: ne(["layer-checkbox", {
-                "layer-unavailable": !s(b.config),
-                "layer-error": S(b.config.id)
+                "layer-unavailable": !r(v.config),
+                "layer-error": S(v.config.id)
               }])
             }, [
               P("input", {
                 type: "checkbox",
-                checked: m(b.config.id),
-                disabled: !s(b.config),
-                onChange: (I) => p(b.config.id)
+                checked: g(v.config.id),
+                disabled: !r(v.config),
+                onChange: (I) => p(v.config.id)
               }, null, 40, wo),
               P("span", Lo, [
-                Le(N(b.config.title) + " ", 1),
-                L(b.config.id) ? (f(), h("span", So, " Loading... ")) : E("", !0),
-                S(b.config.id) ? (f(), h("span", {
+                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(b.config.id) || "Error",
+                  "aria-label": S(v.config.id) || "Error",
                   role: "status"
                 }, " Error ", 8, Co)) : E("", !0),
-                s(b.config) ? E("", !0) : (f(), h("span", ko, " (zoom in) "))
+                r(v.config) ? E("", !0) : (f(), m("span", ko, " (zoom in) "))
               ])
             ], 2)
           ]),
-          t.showOpacity && m(b.config.id) ? (f(), h("div", xo, [
+          t.showOpacity && g(v.config.id) && r(v.config) ? (f(), m("div", xo, [
             P("label", {
               class: "opacity-label",
-              for: "opacity-" + b.config.id
-            }, " Opacity: " + N(Math.round(M(b.config.id) * 100)) + "% ", 9, $o),
+              for: "opacity-" + v.config.id
+            }, " Opacity: " + N(Math.round(M(v.config.id) * 100)) + "% ", 9, $o),
             P("input", {
-              id: "opacity-" + b.config.id,
+              id: "opacity-" + v.config.id,
               type: "range",
               min: "0",
               max: "1",
               step: "0.05",
-              value: M(b.config.id),
-              "aria-label": "Opacity for " + b.config.title,
+              value: M(v.config.id),
+              "aria-label": "Opacity for " + v.config.title,
               class: "opacity-slider",
-              onInput: (I) => g(b.config.id, I)
+              onInput: (I) => h(v.config.id, I)
             }, null, 40, _o)
           ])) : E("", !0),
-          t.showLegend && m(b.config.id) && b.config.legend?.length ? (f(), h("ul", {
+          t.showLegend && g(v.config.id) && r(v.config) && v.config.legend?.length ? (f(), m("ul", {
             key: 1,
             class: "layer-legend",
-            "aria-label": "Legend for " + b.config.title
+            "aria-label": "Legend for " + v.config.title
           }, [
-            (f(!0), h(ie, null, se(b.config.legend, (I, F) => (f(), h("li", {
+            (f(!0), m(ie, null, se(v.config.legend, (I, F) => (f(), m("li", {
               key: F,
               class: "legend-item"
             }, [
-              I.type === "circle" ? (f(), h("span", {
+              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(), h("span", {
+              }, null, 4)) : I.type === "line" ? (f(), m("span", {
                 key: 1,
                 class: "legend-symbol legend-line",
                 style: J({
@@ -1107,7 +1107,7 @@ const yo = { class: "layer-panel" }, go = {
                   height: `${I.width || 2}px`
                 }),
                 "aria-hidden": "true"
-              }, null, 4)) : I.type === "fill" ? (f(), h("span", {
+              }, null, 4)) : I.type === "fill" ? (f(), m("span", {
                 key: 2,
                 class: "legend-symbol legend-fill",
                 style: J({ backgroundColor: I.color }),
@@ -1117,11 +1117,11 @@ const yo = { class: "layer-panel" }, go = {
             ]))), 128))
           ], 8, Po)) : E("", !0)
         ]))), 128)),
-        l.value.length === 0 ? (f(), h("div", To, 'No layers match "' + N(t.searchQuery) + '"', 1)) : E("", !0)
+        l.value.length === 0 ? (f(), m("div", To, 'No layers match "' + N(t.searchQuery) + '"', 1)) : E("", !0)
       ], 2))
     ]));
   }
-}), Eo = /* @__PURE__ */ De(Fo, [["__scopeId", "data-v-0a3d0d7e"]]);
+}), 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;
@@ -1173,7 +1173,7 @@ function Tt(t, i, a) {
   const o = t.symbol, l = et(o);
   let n = {}, y = [], $ = null;
   if (l === "fill" && o) {
-    const m = o.color === null ? 0 : o.color?.[3] ?? 255, M = m === 0 ? "rgba(0, 0, 0, 0)" : D(o.color), L = m === 0 ? 0 : m < 255 ? 1 : we(i);
+    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);
     if (n = {
       "fill-color": M,
       "fill-opacity": L
@@ -1205,10 +1205,10 @@ function Tt(t, i, a) {
       }
     ];
   else if (l === "circle" && o) {
-    const m = Math.round((o.size || 6) * 0.71 * 100) / 100;
+    const g = Math.round((o.size || 6) * 0.71 * 100) / 100;
     n = {
       "circle-color": D(o.color),
-      "circle-radius": m,
+      "circle-radius": g,
       "circle-opacity": we(i)
     }, xe(o.outline) && (n["circle-stroke-color"] = D(o.outline.color), n["circle-stroke-width"] = o.outline.width || 1), y = [
       {
@@ -1225,43 +1225,43 @@ function Io(t, i, a) {
   if (l.length === 0)
     return Tt({ ...t, symbol: n }, i);
   const y = l[0]?.symbol || n, $ = et(y);
-  let m = {};
+  let g = {};
   const M = [];
   let L = null;
   if ($ === "fill") {
     const S = ["match", ["to-string", ["get", o]]];
-    for (const s of l) {
-      S.push(ut(s.value)), S.push(D(s.symbol?.color));
-      const C = String(s.value), g = a?.get(C) || s.label || C;
+    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({
         type: "fill",
-        color: D(s.symbol?.color),
-        label: g
+        color: D(r.symbol?.color),
+        label: h
       });
     }
-    if (S.push(n ? D(n.color) : "rgba(0, 0, 0, 0)"), m = {
+    if (S.push(n ? D(n.color) : "rgba(0, 0, 0, 0)"), g = {
       "fill-color": S,
       "fill-opacity": we(i)
     }, xe(y?.outline)) {
-      const s = Math.max(y.outline.width || 1, 1);
+      const r = Math.max(y.outline.width || 1, 1);
       L = {
         "line-color": D(y.outline.color),
-        "line-width": s
+        "line-width": r
       };
     }
   } else if ($ === "line") {
     const S = ["match", ["to-string", ["get", o]]];
-    for (const s of l) {
-      S.push(ut(s.value)), S.push(D(s.symbol?.color));
-      const C = String(s.value), g = a?.get(C) || s.label || C;
+    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({
         type: "line",
-        color: D(s.symbol?.color),
-        width: s.symbol?.width || 1,
-        label: g
+        color: D(r.symbol?.color),
+        width: r.symbol?.width || 1,
+        label: h
       });
     }
-    S.push(n ? D(n.color) : "rgba(0, 0, 0, 0)"), m = {
+    S.push(n ? D(n.color) : "rgba(0, 0, 0, 0)"), g = {
       "line-color": S,
       "line-width": y?.width || 2,
       "line-opacity": we(i)
@@ -1270,22 +1270,22 @@ function Io(t, i, a) {
     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), c = a?.get(p) || C.label || p;
+      const p = String(C.value), u = a?.get(p) || C.label || p;
       M.push({
         type: "circle",
         color: D(C.symbol?.color),
-        label: c
+        label: u
       });
     }
     S.push(n ? D(n.color) : "rgba(0, 0, 0, 0)");
-    const s = Math.round((y?.size || 6) * 0.71 * 100) / 100;
-    m = {
+    const r = Math.round((y?.size || 6) * 0.71 * 100) / 100;
+    g = {
       "circle-color": S,
-      "circle-radius": s,
+      "circle-radius": r,
       "circle-opacity": we(i)
-    }, xe(y?.outline) && (m["circle-stroke-color"] = D(y.outline.color), m["circle-stroke-width"] = y.outline.width || 1);
+    }, xe(y?.outline) && (g["circle-stroke-color"] = D(y.outline.color), g["circle-stroke-width"] = y.outline.width || 1);
   }
-  return { paint: m, legend: M, geomType: $, outlinePaint: L };
+  return { paint: g, legend: M, geomType: $, outlinePaint: L };
 }
 function Ro(t, i) {
   const a = t.field.toLowerCase(), o = t.classBreakInfos || [], l = t.visualVariables?.find((L) => L.type === "colorInfo");
@@ -1295,17 +1295,17 @@ function Ro(t, i) {
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
   const n = o[0]?.symbol, y = et(n);
   let $ = {};
-  const m = [];
+  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 s = o[S];
-      S > 0 && (L.push(o[S - 1].classMaxValue), L.push(D(s.symbol?.color))), m.push({
+      const r = o[S];
+      S > 0 && (L.push(o[S - 1].classMaxValue), L.push(D(r.symbol?.color))), g.push({
         type: "fill",
-        color: D(s.symbol?.color),
-        label: s.label || `${s.classMaxValue}`
+        color: D(r.symbol?.color),
+        label: r.label || `${r.classMaxValue}`
       });
     }
     if ($ = {
@@ -1324,21 +1324,21 @@ function Ro(t, i) {
     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))), m.push({
+      C > 0 && (L.push(o[C - 1].classMaxValue), L.push(D(p.symbol?.color))), g.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 s = n?.width || 2;
+    const r = n?.width || 2;
     $ = {
       "line-color": L,
-      "line-width": s,
+      "line-width": r,
       "line-opacity": we(i)
     };
   }
-  return { paint: $, legend: m, geomType: y, outlinePaint: M };
+  return { paint: $, legend: g, geomType: y, outlinePaint: M };
 }
 function Do(t, i, a, o) {
   const l = t.stops || [];
@@ -1346,15 +1346,15 @@ function Do(t, i, a, o) {
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
   const n = a.classBreakInfos?.[0]?.symbol || a.defaultSymbol, y = et(n);
   let $ = {};
-  const m = [];
+  const g = [];
   let M = null;
   if (y === "fill") {
     const L = ["interpolate", ["linear"], ["get", i]];
-    for (const s of l)
-      L.push(s.value), L.push(D(s.color)), m.push({
+    for (const r of l)
+      L.push(r.value), L.push(D(r.color)), g.push({
         type: "fill",
-        color: D(s.color),
-        label: s.label || `${s.value}`
+        color: D(r.color),
+        label: r.label || `${r.value}`
       });
     if ($ = {
       "fill-color": [
@@ -1367,14 +1367,14 @@ function Do(t, i, a, o) {
       ],
       "fill-opacity": we(o)
     }, xe(n?.outline)) {
-      const s = n.outline.width || 1;
+      const r = n.outline.width || 1;
       M = {
         "line-color": D(n.outline.color),
-        "line-width": s
+        "line-width": r
       };
     }
   }
-  return { paint: $, legend: m, geomType: y, outlinePaint: M };
+  return { paint: $, legend: g, geomType: y, outlinePaint: M };
 }
 function Zo(t, i, a, o) {
   if (!t?.renderer)
@@ -1449,8 +1449,8 @@ async function Ft(t) {
     if (l.url && !l.title?.toLowerCase().includes("(under construction)"))
       try {
         let n = l.layerDefinition?.drawingInfo, y;
-        const $ = !n || !n.renderer, m = o.includes(l.title), M = n?.renderer?.uniqueValueInfos?.[0]?.symbol?.outline || n?.renderer?.defaultSymbol?.outline;
-        if (($ || m) && l.url) {
+        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) {
@@ -1464,22 +1464,22 @@ async function Ft(t) {
             R.description && (y = Uo(R.description), y.size > 0);
           }
         }
-        const { paint: L, legend: S, geomType: s, outlinePaint: C } = Zo(
+        const { paint: L, legend: S, geomType: r, outlinePaint: C } = Zo(
           n,
           l.opacity,
           y,
           l.title
-        ), p = Bo(l.popupInfo), g = Ao(l.layerDefinition), c = zo(l.layerDefinition?.minScale, l.layerDefinition?.maxScale), u = No(l.title), b = Vo(l.title), I = l.opacity ?? 1, F = {
-          id: u,
-          title: b,
-          type: s,
+        ), 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
         };
-        g && (F.where = g), c.minZoom !== void 0 && (F.minZoom = c.minZoom), c.maxZoom !== void 0 && (F.maxZoom = c.maxZoom), C && (F.outlinePaint = C), a.push(F);
+        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);
       } catch {
       }
   return a.sort((l, n) => l.title.localeCompare(n.title)), a;
@@ -1561,15 +1561,15 @@ async function pt(t = yt) {
 }
 function Jo(t) {
   const i = k({}), a = /* @__PURE__ */ new Map();
-  for (const s of t)
-    i.value[s.id] = {
+  for (const r of t)
+    i.value[r.id] = {
       data: null,
       loading: !1,
       error: null,
       lastFetched: null
     };
-  async function o(s) {
-    const C = s.id;
+  async function o(r) {
+    const C = r.id;
     i.value = {
       ...i.value,
       [C]: {
@@ -1581,30 +1581,30 @@ function Jo(t) {
     };
     try {
       let p;
-      if (s.type === "http-get") {
-        const g = await fetch(s.url, {
+      if (r.type === "http-get") {
+        const h = await fetch(r.url, {
           method: "GET",
-          ...s.options
+          ...r.options
         });
-        if (!g.ok)
-          throw new Error(`HTTP ${g.status}: ${g.statusText}`);
-        p = await g.json();
-      } else if (s.type === "http-post") {
-        const g = await fetch(s.url, {
+        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, {
           method: "POST",
-          ...s.options
+          ...r.options
         });
-        if (!g.ok)
-          throw new Error(`HTTP ${g.status}: ${g.statusText}`);
-        p = await g.json();
-      } else if (s.type === "esri") {
-        const c = `${s.url.replace(/\/$/, "")}/query?where=1%3D1&outFields=*&returnGeometry=false&f=json`, u = await fetch(c, s.options);
-        if (!u.ok)
-          throw new Error(`HTTP ${u.status}: ${u.statusText}`);
-        p = (await u.json()).features?.map((I) => I.attributes) || [];
+        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) || [];
       } else
-        throw new Error(`Unknown data source type: ${s.type}`);
-      s.transform && (p = s.transform(p)), i.value = {
+        throw new Error(`Unknown data source type: ${r.type}`);
+      r.transform && (p = r.transform(p)), i.value = {
         ...i.value,
         [C]: {
           data: p,
@@ -1614,47 +1614,47 @@ function Jo(t) {
         }
       };
     } catch (p) {
-      const g = p instanceof Error ? p.message : "Unknown error";
+      const h = p instanceof Error ? p.message : "Unknown error";
       i.value = {
         ...i.value,
         [C]: {
           data: i.value[C]?.data ?? null,
           lastFetched: i.value[C]?.lastFetched ?? null,
           loading: !1,
-          error: g
+          error: h
         }
       };
     }
   }
   async function l() {
-    await Promise.all(t.map((s) => o(s)));
+    await Promise.all(t.map((r) => o(r)));
   }
-  async function n(s) {
-    const C = t.find((p) => p.id === s);
+  async function n(r) {
+    const C = t.find((p) => p.id === r);
     C && await o(C);
   }
-  function y(s) {
-    return i.value[s]?.data ?? null;
+  function y(r) {
+    return i.value[r]?.data ?? null;
   }
-  const $ = z(() => Object.values(i.value).some((s) => s.loading));
-  function m(s) {
-    return i.value[s]?.loading ?? !1;
+  const $ = z(() => Object.values(i.value).some((r) => r.loading));
+  function g(r) {
+    return i.value[r]?.loading ?? !1;
   }
-  function M(s) {
-    return i.value[s]?.error ?? null;
+  function M(r) {
+    return i.value[r]?.error ?? null;
   }
   function L() {
-    for (const s of t)
-      if (s.pollInterval && s.pollInterval > 0) {
+    for (const r of t)
+      if (r.pollInterval && r.pollInterval > 0) {
         const C = window.setInterval(() => {
-          o(s);
-        }, s.pollInterval);
-        a.set(s.id, C);
+          o(r);
+        }, r.pollInterval);
+        a.set(r.id, C);
       }
   }
   function S() {
-    for (const [, s] of a)
-      window.clearInterval(s);
+    for (const [, r] of a)
+      window.clearInterval(r);
     a.clear();
   }
   return Xe(() => {
@@ -1673,7 +1673,7 @@ function Jo(t) {
     /** Get data for a specific source */
     getData: y,
     /** Check if a specific source is loading */
-    isSourceLoading: m,
+    isSourceLoading: g,
     /** Get error for a specific source */
     getError: M,
     /** Stop all polling (useful for cleanup) */
@@ -1725,30 +1725,30 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
   },
   emits: ["configs-loaded", "load-error", "zoom"],
   setup(t, { expose: i, emit: a }) {
-    const o = t, l = a, n = k([]), y = k(!0), $ = k(null), m = k(12), M = k(""), L = k(/* @__PURE__ */ new Set()), S = k({}), s = k(/* @__PURE__ */ new Set()), C = k({}), p = k({}), g = k(/* @__PURE__ */ new Set()), c = k({});
-    function u() {
-      const v = {};
+    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)
-        v[x.id] = x.opacity ?? 1;
-      c.value = v;
+        b[x.id] = x.opacity ?? 1;
+      u.value = b;
     }
-    function b(v) {
-      g.value.has(v) ? g.value.delete(v) : g.value.add(v), g.value = new Set(g.value);
+    function v(b) {
+      h.value.has(b) ? h.value.delete(b) : h.value.add(b), h.value = new Set(h.value);
     }
-    function I(v, x) {
-      x ? g.value.add(v) : g.value.delete(v), g.value = new Set(g.value);
+    function I(b, x) {
+      x ? h.value.add(b) : h.value.delete(b), h.value = new Set(h.value);
     }
-    function F(v, x) {
-      c.value = { ...c.value, [v]: x };
+    function F(b, x) {
+      u.value = { ...u.value, [b]: x };
     }
     const R = o.dataSources.length > 0 ? Jo(o.dataSources) : null, Z = z(() => R?.state.value ?? {}), pe = z(() => R?.isLoading.value ?? !1);
-    function ye(v) {
-      return R?.getData(v) ?? null;
+    function ye(b) {
+      return R?.getData(b) ?? null;
     }
-    function Ze(v) {
-      return R?.refetch(v) ?? Promise.resolve();
+    function Ze(b) {
+      return R?.refetch(b) ?? Promise.resolve();
     }
-    V("layerboard-layers", j(n)), V("layerboard-visible", L), V("layerboard-opacities", S), V("layerboard-loading", j(s)), V("layerboard-errors", j(C)), V("layerboard-zoom", j(m)), 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", g), V("layerboard-tiled-opacities", c), V("layerboard-toggle-tiled", b), 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);
+    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(() => ({
       backgroundColor: o.themeColor
     })), Be = z(() => ({
@@ -1785,23 +1785,23 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
         x.forEach((W) => {
           q[W.id] = W.opacity ?? 1;
         }), S.value = q, l("configs-loaded", x);
-      } catch (v) {
-        const x = v instanceof Error ? v.message : "Failed to load layer configurations";
+      } catch (b) {
+        const x = b instanceof Error ? b.message : "Failed to load layer configurations";
         $.value = x, l("load-error", x);
       } finally {
         y.value = !1;
       }
     }
-    function at(v) {
-      let x = v.split("?")[0] || v;
+    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 v = "https://phl.carto.com/api/v2/sql?q=" + encodeURIComponent(
+          const b = "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(v);
+          ), x = await fetch(b);
           if (!x.ok) return;
           const q = await x.json(), W = {};
           for (const G of q.rows || [])
@@ -1813,36 +1813,36 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
         } catch {
         }
     }
-    function nt(v) {
-      m.value = v, l("zoom", v);
+    function nt(b) {
+      g.value = b, l("zoom", b);
     }
-    function ge(v) {
-      L.value.has(v) ? L.value.delete(v) : L.value.add(v), L.value = new Set(L.value);
+    function ge(b) {
+      L.value.has(b) ? L.value.delete(b) : L.value.add(b), L.value = new Set(L.value);
     }
-    function Ee(v, x) {
-      x ? L.value.add(v) : L.value.delete(v), L.value = new Set(L.value);
+    function Ee(b, x) {
+      x ? L.value.add(b) : L.value.delete(b), L.value = new Set(L.value);
     }
-    function _e(v, x) {
-      for (const q of v)
+    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 Oe(v, x) {
-      S.value = { ...S.value, [v]: x };
+    function Oe(b, x) {
+      S.value = { ...S.value, [b]: x };
     }
-    function le(v, x) {
-      x ? s.value.add(v) : s.value.delete(v), s.value = new Set(s.value);
+    function le(b, x) {
+      x ? r.value.add(b) : r.value.delete(b), r.value = new Set(r.value);
     }
-    function ze(v, x) {
+    function ze(b, x) {
       if (x)
-        C.value = { ...C.value, [v]: x };
+        C.value = { ...C.value, [b]: x };
       else {
         const q = { ...C.value };
-        delete q[v], C.value = q;
+        delete q[b], C.value = q;
       }
     }
-    function oe(v) {
-      M.value = v;
+    function oe(b) {
+      M.value = b;
     }
     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() {
@@ -1876,15 +1876,15 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
         Ce.value?.focus(), Ce.value = null;
       });
     }
-    function lt(v) {
-      v.target.classList.contains("layerboard-modal-backdrop") && ae();
+    function lt(b) {
+      b.target.classList.contains("layerboard-modal-backdrop") && ae();
     }
-    function rt(v) {
-      if (v.key === "Escape") {
+    function rt(b) {
+      if (b.key === "Escape") {
         Te();
         return;
       }
-      if (v.key === "Tab" && Ae.value) {
+      if (b.key === "Tab" && Ae.value) {
         const x = Array.from(
           Ae.value.querySelectorAll(
             'a[href], button:not([disabled]), textarea, input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
@@ -1892,15 +1892,15 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
         );
         if (x.length === 0) return;
         const q = x[0], W = x[x.length - 1];
-        v.shiftKey ? document.activeElement === q && (v.preventDefault(), W.focus()) : document.activeElement === W && (v.preventDefault(), q.focus());
+        b.shiftKey ? document.activeElement === q && (b.preventDefault(), W.focus()) : document.activeElement === W && (b.preventDefault(), q.focus());
       }
     }
-    function st(v) {
-      if (v.key === "Escape") {
+    function st(b) {
+      if (b.key === "Escape") {
         ae();
         return;
       }
-      if (v.key === "Tab" && Ne.value) {
+      if (b.key === "Tab" && Ne.value) {
         const x = Array.from(
           Ne.value.querySelectorAll(
             'a[href], button:not([disabled]), textarea, input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
@@ -1908,7 +1908,7 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
         );
         if (x.length === 0) return;
         const q = x[0], W = x[x.length - 1];
-        v.shiftKey ? document.activeElement === q && (v.preventDefault(), W.focus()) : document.activeElement === W && (v.preventDefault(), q.focus());
+        b.shiftKey ? document.activeElement === q && (b.preventDefault(), W.focus()) : document.activeElement === W && (b.preventDefault(), q.focus());
       }
     }
     V("layerboard-open-modal", me), V("layerboard-close-modal", ae), V("layerboard-is-modal-open", j(he)), i({
@@ -1919,11 +1919,11 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
       /** Layer opacity values */
       layerOpacities: S,
       /** Set of currently loading layer IDs */
-      loadingLayers: s,
+      loadingLayers: r,
       /** Map of layer errors by ID */
       layerErrors: C,
       /** Current map zoom level */
-      currentZoom: m,
+      currentZoom: g,
       /** Toggle a layer's visibility */
       toggleLayer: ge,
       /** Set a layer's visibility explicitly */
@@ -1938,11 +1938,11 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
       clearCache: () => jo(o.webMapId),
       // Tiled layer APIs
       /** Set of visible tiled layer IDs */
-      visibleTiledLayers: g,
+      visibleTiledLayers: h,
       /** Tiled layer opacity values */
-      tiledLayerOpacities: c,
+      tiledLayerOpacities: u,
       /** Toggle a tiled layer's visibility */
-      toggleTiledLayer: b,
+      toggleTiledLayer: v,
       /** Set a tiled layer's visibility explicitly */
       setTiledLayerVisible: I,
       /** Set a tiled layer's opacity */
@@ -1964,14 +1964,14 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
       /** Close the modal */
       closeModal: ae
     });
-    function ue(v) {
-      v.key === "Escape" && ce.value && Te();
+    function ue(b) {
+      b.key === "Escape" && ce.value && Te();
     }
     return Xe(() => {
-      Fe(), it(), u(), document.addEventListener("keydown", ue);
+      Fe(), it(), c(), document.addEventListener("keydown", ue);
     }), Dt(() => {
       document.removeEventListener("keydown", ue);
-    }), (v, x) => (f(), h("div", Ko, [
+    }), (b, x) => (f(), m("div", Ko, [
       x[5] || (x[5] = P("a", {
         href: "#main-content",
         class: "skip-to-main-content-link"
@@ -2008,11 +2008,11 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
             decorative: ""
           }, null, 8, ["icon-definition"])
         ], 8, Qo),
-        fe(v.$slots, "header", {}, () => [
+        fe(b.$slots, "header", {}, () => [
           P("h1", null, N(t.title), 1),
-          t.subtitle ? (f(), h("span", Xo, N(t.subtitle), 1)) : E("", !0)
+          t.subtitle ? (f(), m("span", Xo, N(t.subtitle), 1)) : E("", !0)
         ], !0),
-        ce.value ? (f(), h("div", {
+        ce.value ? (f(), m("div", {
           key: 0,
           ref_key: "mobileMenuRef",
           ref: Ae,
@@ -2024,7 +2024,7 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
           onKeydown: rt
         }, [
           P("div", Yo, [
-            fe(v.$slots, "footer", {
+            fe(b.$slots, "footer", {
               openModal: me,
               closeModal: ae,
               isModalOpen: he.value
@@ -2046,20 +2046,20 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
             }, null, 8, ["icon-definition"])
           ], 512)
         ], 36)) : E("", !0),
-        ce.value ? (f(), h("div", {
+        ce.value ? (f(), m("div", {
           key: 1,
           class: "layerboard-mobile-menu-backdrop",
           onClick: Te
         })) : E("", !0)
       ], 4),
       P("div", ea, [
-        y.value ? (f(), h("div", ta, [
+        y.value ? (f(), m("div", ta, [
           P("div", {
             class: "layerboard-spinner",
             style: J({ borderTopColor: t.themeColor })
           }, null, 4),
           P("p", null, "Loading " + N(t.title) + "...", 1)
-        ])) : $.value ? (f(), h("div", oa, [
+        ])) : $.value ? (f(), m("div", oa, [
           x[3] || (x[3] = P("h2", null, "Error Loading Layers", -1)),
           P("p", null, N($.value), 1),
           P("button", {
@@ -2067,7 +2067,7 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
             style: J({ backgroundColor: t.themeColor }),
             onClick: Fe
           }, " Retry ", 4)
-        ])) : (f(), h(ie, { key: 2 }, [
+        ])) : (f(), m(ie, { key: 2 }, [
           P("aside", {
             id: "main-content",
             ref_key: "sidebarRef",
@@ -2077,21 +2077,21 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
             "aria-label": "Map layers",
             tabindex: "-1"
           }, [
-            fe(v.$slots, "sidebar", {
+            fe(b.$slots, "sidebar", {
               layers: n.value,
               visibleLayers: L.value,
               layerOpacities: S.value,
-              loadingLayers: s.value,
+              loadingLayers: r.value,
               layerErrors: C.value,
-              currentZoom: m.value,
+              currentZoom: g.value,
               toggleLayer: ge,
               setLayerVisible: Ee,
               setLayersVisible: _e,
               setOpacity: Oe,
               tiledLayers: t.tiledLayers,
-              visibleTiledLayers: g.value,
-              tiledLayerOpacities: c.value,
-              toggleTiledLayer: b,
+              visibleTiledLayers: h.value,
+              tiledLayerOpacities: u.value,
+              toggleTiledLayer: v,
               setTiledLayerVisible: I,
               setTiledLayerOpacity: F,
               dataSourcesState: Z.value,
@@ -2104,9 +2104,9 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
                 "layer-list": n.value,
                 "visible-layers": L.value,
                 "layer-opacities": S.value,
-                "loading-layers": s.value,
+                "loading-layers": r.value,
                 "layer-errors": C.value,
-                "current-zoom": m.value,
+                "current-zoom": g.value,
                 "search-query": M.value,
                 "layer-metadata": p.value,
                 onToggleLayer: ge,
@@ -2125,8 +2125,8 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
               "layer-opacities": S.value,
               "layer-list": n.value,
               "tiled-layers": t.tiledLayers,
-              "visible-tiled-layers": g.value,
-              "tiled-layer-opacities": c.value,
+              "visible-tiled-layers": h.value,
+              "tiled-layer-opacities": u.value,
               "cyclomedia-config": t.cyclomediaConfig,
               "pictometry-credentials": t.pictometryCredentials,
               "basemap-control-position": t.basemapControlPosition,
@@ -2165,13 +2165,13 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
         style: J(je.value),
         onClick: Me
       }, [
-        re.value === "map" ? (f(), h("span", ia, N(t.sidebarLabel), 1)) : (f(), h("span", na, N(t.mapLabel), 1))
+        re.value === "map" ? (f(), m("span", ia, N(t.sidebarLabel), 1)) : (f(), m("span", na, N(t.mapLabel), 1))
       ], 4),
       P("footer", {
         class: "layerboard-footer",
         style: J(Be.value)
       }, [
-        fe(v.$slots, "footer", {
+        fe(b.$slots, "footer", {
           openModal: me,
           closeModal: ae,
           isModalOpen: he.value
@@ -2179,7 +2179,7 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
           x[4] || (x[4] = Le(" City of Philadelphia ", -1))
         ], !0)
       ], 4),
-      he.value ? (f(), h("div", {
+      he.value ? (f(), m("div", {
         key: 0,
         class: "layerboard-modal-backdrop",
         onClick: lt,
@@ -2206,7 +2206,7 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
               decorative: ""
             }, null, 8, ["icon-definition"])
           ], 512),
-          fe(v.$slots, "modal", { closeModal: ae }, void 0, !0)
+          fe(b.$slots, "modal", { closeModal: ae }, void 0, !0)
         ], 512)
       ], 32)) : E("", !0),
       P("span", la, N(re.value === "sidebar" ? "Showing layers panel" : "Showing map"), 1)
@@ -2229,16 +2229,16 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
     const a = t, o = i, l = k(a.expanded), n = `topic-panel-${bt()}`, y = `topic-header-${bt()}`;
     Re(
       () => a.expanded,
-      (m) => {
-        l.value = m;
+      (g) => {
+        l.value = g;
       }
     );
     function $() {
       l.value = !l.value, o("toggle", l.value);
     }
-    return (m, M) => {
+    return (g, M) => {
       const L = Zt("font-awesome-icon");
-      return f(), h("div", {
+      return f(), m("div", {
         class: ne(["topic-accordion", { "is-expanded": l.value }])
       }, [
         P("button", {
@@ -2249,8 +2249,8 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
           "aria-controls": n,
           onClick: $
         }, [
-          t.icon || m.$slots.icon ? (f(), h("span", ca, [
-            fe(m.$slots, "icon", {}, () => [
+          t.icon || g.$slots.icon ? (f(), m("span", ca, [
+            fe(g.$slots, "icon", {}, () => [
               t.icon ? (f(), te(L, {
                 key: 0,
                 icon: ["fas", t.icon],
@@ -2284,7 +2284,7 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
           "aria-labelledby": y,
           class: "topic-content"
         }, [
-          fe(m.$slots, "default", {}, () => [
+          fe(g.$slots, "default", {}, () => [
             M[1] || (M[1] = P("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
           ], !0)
         ], 512), [
@@ -2329,146 +2329,146 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
   emits: ["toggleLayer", "setOpacity"],
   setup(t, { emit: i }) {
     const a = t, o = i;
-    function l(g) {
-      return a.visibleLayerIds.has(g);
+    function l(h) {
+      return a.visibleLayerIds.has(h);
     }
-    function n(g) {
-      return a.layerOpacities[g] ?? 1;
+    function n(h) {
+      return a.layerOpacities[h] ?? 1;
     }
-    function y(g) {
-      return a.loadingLayerIds.has(g);
+    function y(h) {
+      return a.loadingLayerIds.has(h);
     }
-    function $(g) {
-      return a.layerErrors[g] || null;
+    function $(h) {
+      return a.layerErrors[h] || null;
     }
-    function m(g) {
-      const c = a.currentZoom, u = g.minZoom, b = g.maxZoom;
-      return !(u !== void 0 && c < u || b !== void 0 && c > b);
+    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(g) {
-      return g.displayOptions?.shouldShowCheckbox !== !1;
+    function M(h) {
+      return h.displayOptions?.shouldShowCheckbox !== !1;
     }
-    function L(g) {
-      return a.showOpacity ? g.displayOptions?.shouldShowSlider !== !1 : !1;
+    function L(h) {
+      return a.showOpacity ? h.displayOptions?.shouldShowSlider !== !1 : !1;
     }
-    function S(g) {
-      return a.showLegend ? g.displayOptions?.shouldShowLegendBox !== !1 : !1;
+    function S(h) {
+      return a.showLegend ? h.displayOptions?.shouldShowLegendBox !== !1 : !1;
     }
-    function s(g) {
-      return g.displayOptions?.layerNameChange || g.title;
+    function r(h) {
+      return h.displayOptions?.layerNameChange || h.title;
     }
-    function C(g) {
-      o("toggleLayer", g);
+    function C(h) {
+      o("toggleLayer", h);
     }
-    function p(g, c) {
-      const u = c.target;
-      o("setOpacity", g, parseFloat(u.value));
+    function p(h, u) {
+      const c = u.target;
+      o("setOpacity", h, parseFloat(c.value));
     }
-    return (g, c) => (f(), h("fieldset", {
+    return (h, u) => (f(), m("fieldset", {
       class: "layer-checkbox-set",
       role: "group",
       "aria-label": t.groupLabel
     }, [
-      (f(!0), h(ie, null, se(t.layers, (u) => (f(), h("div", {
-        key: u.id,
+      (f(!0), m(ie, null, se(t.layers, (c) => (f(), m("div", {
+        key: c.id,
         class: "layer-item"
       }, [
-        M(u) ? (f(), h("label", {
+        M(c) ? (f(), m("label", {
           key: 0,
           class: ne(["layer-checkbox", {
-            "layer-unavailable": !m(u),
-            "layer-error": $(u.id)
+            "layer-unavailable": !g(c),
+            "layer-error": $(c.id)
           }])
         }, [
           P("input", {
             type: "checkbox",
-            checked: l(u.id),
-            disabled: !m(u),
-            onChange: (b) => C(u.id)
+            checked: l(c.id),
+            disabled: !g(c),
+            onChange: (v) => C(c.id)
           }, null, 40, pa),
           P("span", ya, [
-            Le(N(s(u)) + " ", 1),
-            y(u.id) ? (f(), h("span", ga, " Loading... ")) : E("", !0),
-            $(u.id) ? (f(), h("span", {
+            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": $(u.id) || "Error",
+              "aria-label": $(c.id) || "Error",
               role: "status"
             }, " Error ", 8, ha)) : E("", !0),
-            m(u) ? E("", !0) : (f(), h("span", ma, " (zoom in) "))
+            g(c) ? E("", !0) : (f(), m("span", ma, " (zoom in) "))
           ])
-        ], 2)) : (f(), h("div", {
+        ], 2)) : (f(), m("div", {
           key: 1,
           class: ne(["layer-label-only", {
-            "layer-unavailable": !m(u),
-            "layer-error": $(u.id)
+            "layer-unavailable": !g(c),
+            "layer-error": $(c.id)
           }])
         }, [
           P("span", va, [
-            Le(N(s(u)) + " ", 1),
-            y(u.id) ? (f(), h("span", ba, " Loading... ")) : E("", !0),
-            $(u.id) ? (f(), h("span", {
+            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": $(u.id) || "Error",
+              "aria-label": $(c.id) || "Error",
               role: "status"
             }, " Error ", 8, wa)) : E("", !0),
-            m(u) ? E("", !0) : (f(), h("span", La, " (zoom in) "))
+            g(c) ? E("", !0) : (f(), m("span", La, " (zoom in) "))
           ])
         ], 2)),
-        L(u) && l(u.id) ? (f(), h("div", Sa, [
+        L(c) && l(c.id) && g(c) ? (f(), m("div", Sa, [
           P("label", {
             class: "opacity-label",
-            for: "opacity-" + u.id
-          }, " Opacity: " + N(Math.round(n(u.id) * 100)) + "% ", 9, Ca),
+            for: "opacity-" + c.id
+          }, " Opacity: " + N(Math.round(n(c.id) * 100)) + "% ", 9, Ca),
           P("input", {
-            id: "opacity-" + u.id,
+            id: "opacity-" + c.id,
             type: "range",
             min: "0",
             max: "1",
             step: "0.05",
-            value: n(u.id),
-            "aria-label": "Opacity for " + s(u),
+            value: n(c.id),
+            "aria-label": "Opacity for " + r(c),
             class: "opacity-slider",
-            onInput: (b) => p(u.id, b)
+            onInput: (v) => p(c.id, v)
           }, null, 40, ka)
         ])) : E("", !0),
-        S(u) && l(u.id) && u.legend?.length ? (f(), h("ul", {
+        S(c) && l(c.id) && g(c) && c.legend?.length ? (f(), m("ul", {
           key: 3,
           class: "layer-legend",
-          "aria-label": "Legend for " + s(u)
+          "aria-label": "Legend for " + r(c)
         }, [
-          (f(!0), h(ie, null, se(u.legend, (b, I) => (f(), h("li", {
+          (f(!0), m(ie, null, se(c.legend, (v, I) => (f(), m("li", {
             key: I,
             class: "legend-item"
           }, [
-            b.type === "circle" ? (f(), h("span", {
+            v.type === "circle" ? (f(), m("span", {
               key: 0,
               class: "legend-symbol legend-circle",
-              style: J({ backgroundColor: b.color }),
+              style: J({ backgroundColor: v.color }),
               "aria-hidden": "true"
-            }, null, 4)) : b.type === "line" ? (f(), h("span", {
+            }, null, 4)) : v.type === "line" ? (f(), m("span", {
               key: 1,
               class: "legend-symbol legend-line",
               style: J({
-                backgroundColor: b.color,
-                height: `${b.width || 2}px`
+                backgroundColor: v.color,
+                height: `${v.width || 2}px`
               }),
               "aria-hidden": "true"
-            }, null, 4)) : b.type === "fill" ? (f(), h("span", {
+            }, null, 4)) : v.type === "fill" ? (f(), m("span", {
               key: 2,
               class: "legend-symbol legend-fill",
-              style: J({ backgroundColor: b.color }),
+              style: J({ backgroundColor: v.color }),
               "aria-hidden": "true"
             }, null, 4)) : E("", !0),
-            P("span", $a, N(b.label), 1)
+            P("span", $a, N(v.label), 1)
           ]))), 128))
         ], 8, xa)) : E("", !0)
       ]))), 128)),
-      t.layers.length === 0 ? (f(), h("div", _a, "No layers available")) : E("", !0)
+      t.layers.length === 0 ? (f(), m("div", _a, "No layers available")) : E("", !0)
     ], 8, fa));
   }
-}), Ka = /* @__PURE__ */ De(Pa, [["__scopeId", "data-v-55505629"]]), Ma = ["aria-label"], Ta = ["name", "checked", "disabled", "onChange"], Fa = { class: "layer-title" }, Ea = {
+}), 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"
@@ -2510,9 +2510,9 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
     function $(p) {
       return a.layerErrors[p] || null;
     }
-    function m(p) {
-      const g = a.currentZoom, c = p.minZoom, u = p.maxZoom;
-      return !(c !== void 0 && g < c || u !== void 0 && g > u);
+    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;
@@ -2523,103 +2523,103 @@ const Ko = { class: "layerboard-layout" }, Qo = ["aria-expanded"], Xo = {
     function S(p) {
       return p.displayOptions?.layerNameChange || p.title;
     }
-    function s(p) {
-      const g = a.layers.filter((c) => a.visibleLayerIds.has(c.id) && c.id !== p).map((c) => c.id);
-      o("selectLayer", p, g);
+    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, g) {
-      const c = g.target;
-      o("setOpacity", p, parseFloat(c.value));
+    function C(p, h) {
+      const u = h.target;
+      o("setOpacity", p, parseFloat(u.value));
     }
-    return (p, g) => (f(), h("div", {
+    return (p, h) => (f(), m("div", {
       class: "layer-radio-set",
       role: "radiogroup",
       "aria-label": t.groupLabel
     }, [
-      (f(!0), h(ie, null, se(t.layers, (c) => (f(), h("div", {
-        key: c.id,
+      (f(!0), m(ie, null, se(t.layers, (u) => (f(), m("div", {
+        key: u.id,
         class: "layer-item"
       }, [
         P("label", {
           class: ne(["layer-radio", {
-            "layer-unavailable": !m(c),
-            "layer-error": $(c.id)
+            "layer-unavailable": !g(u),
+            "layer-error": $(u.id)
           }])
         }, [
           P("input", {
             type: "radio",
             name: t.groupName,
-            checked: l(c.id),
-            disabled: !m(c),
-            onChange: (u) => s(c.id)
+            checked: l(u.id),
+            disabled: !g(u),
+            onChange: (c) => r(u.id)
           }, null, 40, Ta),
           P("span", Fa, [
-            Le(N(S(c)) + " ", 1),
-            y(c.id) ? (f(), h("span", Ea, " Loading... ")) : E("", !0),
-            $(c.id) ? (f(), h("span", {
+            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": $(c.id) || "Error",
+              "aria-label": $(u.id) || "Error",
               role: "status"
             }, " Error ", 8, Oa)) : E("", !0),
-            m(c) ? E("", !0) : (f(), h("span", za, " (zoom in) "))
+            g(u) ? E("", !0) : (f(), m("span", za, " (zoom in) "))
           ])
         ], 2),
-        M(c) && l(c.id) ? (f(), h("div", Ia, [
+        M(u) && l(u.id) && g(u) ? (f(), m("div", Ia, [
           P("label", {
             class: "opacity-label",
-            for: "opacity-" + c.id
-          }, " Opacity: " + N(Math.round(n(c.id) * 100)) + "% ", 9, Ra),
+            for: "opacity-" + u.id
+          }, " Opacity: " + N(Math.round(n(u.id) * 100)) + "% ", 9, Ra),
           P("input", {
-            id: "opacity-" + c.id,
+            id: "opacity-" + u.id,
             type: "range",
             min: "0",
             max: "1",
             step: "0.05",
-            value: n(c.id),
-            "aria-label": "Opacity for " + S(c),
+            value: n(u.id),
+            "aria-label": "Opacity for " + S(u),
             class: "opacity-slider",
-            onInput: (u) => C(c.id, u)
+            onInput: (c) => C(u.id, c)
           }, null, 40, Da)
         ])) : E("", !0),
-        L(c) && l(c.id) && c.legend?.length ? (f(), h("ul", {
+        L(u) && l(u.id) && g(u) && u.legend?.length ? (f(), m("ul", {
           key: 1,
           class: "layer-legend",
-          "aria-label": "Legend for " + S(c)
+          "aria-label": "Legend for " + S(u)
         }, [
-          (f(!0), h(ie, null, se(c.legend, (u, b) => (f(), h("li", {
-            key: b,
+          (f(!0), m(ie, null, se(u.legend, (c, v) => (f(), m("li", {
+            key: v,
             class: "legend-item"
           }, [
-            u.type === "circle" ? (f(), h("span", {
+            c.type === "circle" ? (f(), m("span", {
               key: 0,
               class: "legend-symbol legend-circle",
-              style: J({ backgroundColor: u.color }),
+              style: J({ backgroundColor: c.color }),
               "aria-hidden": "true"
-            }, null, 4)) : u.type === "line" ? (f(), h("span", {
+            }, null, 4)) : c.type === "line" ? (f(), m("span", {
               key: 1,
               class: "legend-symbol legend-line",
               style: J({
-                backgroundColor: u.color,
-                height: `${u.width || 2}px`
+                backgroundColor: c.color,
+                height: `${c.width || 2}px`
               }),
               "aria-hidden": "true"
-            }, null, 4)) : u.type === "fill" ? (f(), h("span", {
+            }, null, 4)) : c.type === "fill" ? (f(), m("span", {
               key: 2,
               class: "legend-symbol legend-fill",
-              style: J({ backgroundColor: u.color }),
+              style: J({ backgroundColor: c.color }),
               "aria-hidden": "true"
             }, null, 4)) : E("", !0),
-            P("span", Ba, N(u.label), 1)
+            P("span", Ba, N(c.label), 1)
           ]))), 128))
         ], 8, Za)) : E("", !0)
       ]))), 128)),
-      t.layers.length === 0 ? (f(), h("div", Aa, "No layers available")) : E("", !0)
+      t.layers.length === 0 ? (f(), m("div", Aa, "No layers available")) : E("", !0)
     ], 8, Ma));
   }
-}), Qa = /* @__PURE__ */ De(Na, [["__scopeId", "data-v-5e01b240"]]);
+}), 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), m = k(!1), M = k(null), L = z(() => {
+  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())
       return i.value;
     const F = y.value.toLowerCase();
@@ -2629,8 +2629,8 @@ function Xa(t) {
     component: F.type
     // "circle", "fill", or "line"
   })));
-  async function s() {
-    if (!m.value) {
+  async function r() {
+    if (!g.value) {
       $.value = !0, M.value = null;
       try {
         let F;
@@ -2638,7 +2638,7 @@ function Xa(t) {
         const R = {};
         F.forEach((Z) => {
           R[Z.id] = Z.opacity ?? 1;
-        }), o.value = R, m.value = !0;
+        }), o.value = R, g.value = !0;
       } catch (F) {
         M.value = F instanceof Error ? F : new Error("Failed to initialize layerboard");
       } finally {
@@ -2657,20 +2657,20 @@ function Xa(t) {
     const R = new Set(a.value);
     R.has(F) ? R.delete(F) : R.add(F), a.value = R;
   }
-  function g(F, R) {
+  function h(F, R) {
     o.value = {
       ...o.value,
       [F]: Math.max(0, Math.min(1, R))
     };
   }
-  function c(F) {
+  function u(F) {
     y.value = F;
   }
-  function u(F, R) {
+  function c(F, R) {
     const Z = new Set(l.value);
     R ? Z.add(F) : Z.delete(F), l.value = Z;
   }
-  function b(F, R) {
+  function v(F, R) {
     if (R)
       n.value = { ...n.value, [F]: R };
     else {
@@ -2679,7 +2679,7 @@ function Xa(t) {
     }
   }
   function I() {
-    i.value = [], a.value = /* @__PURE__ */ new Set(), o.value = {}, l.value = /* @__PURE__ */ new Set(), n.value = {}, y.value = "", $.value = !1, m.value = !1, M.value = null;
+    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;
   }
   return {
     // State (readonly)
@@ -2690,7 +2690,7 @@ function Xa(t) {
     layerErrors: j(n),
     searchQuery: j(y),
     isLoading: j($),
-    isInitialized: j(m),
+    isInitialized: j(g),
     error: j(M),
     // Computed
     filteredLayerConfigs: L,
@@ -2698,12 +2698,12 @@ function Xa(t) {
     // Config
     config: t,
     // Methods
-    initialize: s,
+    initialize: r,
     toggleLayer: p,
-    setLayerOpacity: g,
-    filterLayers: c,
-    setLayerLoading: u,
-    setLayerError: b,
+    setLayerOpacity: h,
+    filterLayers: u,
+    setLayerLoading: c,
+    setLayerError: v,
     reset: I
   };
 }
@@ -2725,29 +2725,29 @@ function Ya() {
 }
 function Va(t) {
   const i = k(null), a = k(!1), o = k(null), l = k(0);
-  async function n(m = {}) {
+  async function n(g = {}) {
     a.value = !0, o.value = null;
     const M = t.pageSize || 2e3;
-    let L = 0, S = [], s = !0;
+    let L = 0, S = [], r = !0;
     try {
-      for (; s; ) {
-        const p = t.url.replace(/\/$/, ""), g = encodeURIComponent(m.where || t.where || "1=1");
-        let c = `${p}/query?where=${g}&outFields=*&returnGeometry=true&resultRecordCount=${M}&resultOffset=${L}&f=geojson`;
-        if (m.bounds) {
+      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: m.bounds.west,
-            ymin: m.bounds.south,
-            xmax: m.bounds.east,
-            ymax: m.bounds.north,
+            xmin: g.bounds.west,
+            ymin: g.bounds.south,
+            xmax: g.bounds.east,
+            ymax: g.bounds.north,
             spatialReference: { wkid: 4326 }
           });
-          c += `&geometry=${encodeURIComponent(I)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
+          u += `&geometry=${encodeURIComponent(I)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
         }
-        const u = await fetch(c);
-        if (!u.ok)
-          throw new Error(`HTTP ${u.status}: ${u.statusText}`);
-        const b = await u.json();
-        b.features && b.features.length > 0 ? (S = S.concat(b.features), L += b.features.length, s = b.features.length === M) : s = !1;
+        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 C = {
         type: "FeatureCollection",
@@ -2764,8 +2764,8 @@ function Va(t) {
   function y() {
     i.value = null, l.value = 0, o.value = null;
   }
-  async function $(m = {}) {
-    return n(m);
+  async function $(g = {}) {
+    return n(g);
   }
   return {
     // State (readonly)