@phila/layerboard 3.0.0-beta.35 → 3.0.0-beta.37

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as ge, ref as x, watch as Oe, computed as _, nextTick as Ne, onMounted as lt, onUnmounted as Vt, createElementBlock as M, openBlock as m, createVNode as H, unref as f, withCtx as He, createBlock as q, createCommentVNode as A, Fragment as ue, renderList as Le, useAttrs as Kt, toRef as Qt, normalizeClass as ne, createElementVNode as P, toDisplayString as G, renderSlot as me, withDirectives as Zt, mergeProps as vt, vModelDynamic as Xt, createTextVNode as xe, normalizeProps as Pt, guardReactiveProps as Ft, normalizeStyle as ye, withModifiers as Yt, readonly as j, provide as N, onBeforeUnmount as eo, useId as Tt, resolveComponent as to, vShow as oo } from "vue";
+import { defineComponent as ge, ref as x, watch as Oe, computed as _, nextTick as Ne, onMounted as lt, onUnmounted as Vt, createElementBlock as M, openBlock as h, createVNode as H, unref as f, withCtx as He, createBlock as q, createCommentVNode as A, Fragment as ue, renderList as Le, useAttrs as Kt, toRef as Qt, normalizeClass as ne, createElementVNode as P, toDisplayString as G, renderSlot as he, withDirectives as Zt, mergeProps as vt, vModelDynamic as Xt, createTextVNode as xe, normalizeProps as Pt, guardReactiveProps as Ft, normalizeStyle as ye, withModifiers as Yt, readonly as j, provide as N, onBeforeUnmount as eo, useId as Tt, resolveComponent as to, vShow as oo } from "vue";
 import { Map as ao, DrawTool as io, RasterLayer as It, CircleLayer as Et, FillLayer as Ot, LineLayer as gt, MapMarker as lo, MapPopup as no } from "@phila/phila-ui-map-core";
 import { cn as bt, Icon as ke, BaseLink as ro, ActionContent as zt } from "@phila/phila-ui-core";
 const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
@@ -32,7 +32,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       const c = t.getZoom(), b = t.getCenter().lat, k = 559082264028e-3, I = b * Math.PI / 180;
       return k * Math.cos(I) / Math.pow(2, c);
     }
-    const C = x({}), y = x(null), h = x(/* @__PURE__ */ new Set());
+    const S = x({}), y = x(null), m = x(/* @__PURE__ */ new Set());
     async function i(t, c, s, b, k) {
       const I = encodeURIComponent(b || "1=1"), B = JSON.stringify({
         xmin: c.west,
@@ -40,14 +40,14 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         xmax: c.east,
         ymax: c.north,
         spatialReference: { wkid: 4326 }
-      }), Y = k !== void 0 && k < 14 ? `&maxAllowableOffset=${360 / (Math.pow(2, k) * 512)}` : "", Q = 2e3;
+      }), Y = k !== void 0 && k < 14 ? `&maxAllowableOffset=${360 / (Math.pow(2, k) * 512)}` : "", X = 2e3;
       let pe = 0, we = [], se = !0;
       for (; se; ) {
-        const te = `${t}/query?where=${I}&geometry=${encodeURIComponent(B)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&resultRecordCount=${Q}&resultOffset=${pe}${Y}&f=geojson`, R = await fetch(te);
+        const te = `${t}/query?where=${I}&geometry=${encodeURIComponent(B)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&resultRecordCount=${X}&resultOffset=${pe}${Y}&f=geojson`, R = await fetch(te);
         if (!R.ok)
           throw new Error(`HTTP ${R.status}: ${R.statusText}`);
         const W = await R.json();
-        W.features && W.features.length > 0 ? (we = we.concat(W.features), pe += W.features.length, se = W.features.length === Q) : se = !1;
+        W.features && W.features.length > 0 ? (we = we.concat(W.features), pe += W.features.length, se = W.features.length === X) : se = !1;
       }
       return we = we.map((te) => {
         if (te.properties) {
@@ -69,7 +69,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
           o("layerLoading", k, !0);
           try {
             const B = await i(I.url, t, k, I.where, s);
-            C.value = { ...C.value, [k]: B }, o("layerError", k, null);
+            S.value = { ...S.value, [k]: B }, o("layerError", k, null);
           } catch (B) {
             const Y = B instanceof Error ? B.message : "Failed to load";
             o("layerError", k, Y);
@@ -90,7 +90,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       const s = d([...l.visibleLayers]);
       await g(t, s, c);
     }
-    function S(t) {
+    function C(t) {
       y.value = t.bounds, L(t.bounds, t.zoom);
     }
     function E(t) {
@@ -109,8 +109,8 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       () => l.visibleLayers,
       async () => {
         if (re.value.length > 0 && Ie(), y.value) {
-          const t = new Set(l.visibleLayers), c = [...t].filter((b) => !h.value.has(b));
-          h.value = new Set(t);
+          const t = new Set(l.visibleLayers), c = [...t].filter((b) => !m.value.has(b));
+          m.value = new Set(t);
           const s = d(c);
           if (s.length > 0) {
             const b = n.value?.getZoom();
@@ -125,7 +125,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       return !!c?.parentId && l.visibleLayers.has(c.parentId);
     }
     function V(t) {
-      return !!C.value[t.id];
+      return !!S.value[t.id];
     }
     const T = _(
       () => l.layerList.filter((t) => t.config.type === "circle" && F(t.config.id) && V(t.config)).map((t) => t.config)
@@ -213,7 +213,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       };
     }
     function Me(t) {
-      return { type: "geojson", data: C.value[t.id], tolerance: 0 };
+      return { type: "geojson", data: S.value[t.id], tolerance: 0 };
     }
     function Fe(t) {
       return l.layerOpacities[t] ?? 1;
@@ -227,18 +227,18 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         if (c === 1)
           return k;
         {
-          const Q = I.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-          if (Q && Q[4]) {
-            const [, pe, we, se, te] = Q, R = parseFloat(te) * c;
+          const X = I.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+          if (X && X[4]) {
+            const [, pe, we, se, te] = X, R = parseFloat(te) * c;
             k[b] = `rgba(${pe}, ${we}, ${se}, ${R})`, k[s] = 1;
           }
           return k;
         }
       }
       if (Y) {
-        const Q = I.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-        if (Q) {
-          const [, pe, we, se] = Q;
+        const X = I.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+        if (X) {
+          const [, pe, we, se] = X;
           k[b] = `rgb(${pe}, ${we}, ${se})`;
         }
       }
@@ -290,8 +290,8 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
             return String(t);
           const I = t.toFixed(b);
           if (k) {
-            const B = I.split("."), Y = B[0] || "0", Q = B[1], pe = Y.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            return Q ? `${pe}.${Q}` : pe;
+            const B = I.split("."), Y = B[0] || "0", X = B[1], pe = Y.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            return X ? `${pe}.${X}` : pe;
           }
           return I;
         }
@@ -307,7 +307,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       });
     }
     function Se(t, c) {
-      const s = C.value[t];
+      const s = S.value[t];
       if (!s?.features) return null;
       const b = c.objectid ?? c.OBJECTID ?? c.FID;
       if (b != null) {
@@ -344,7 +344,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         layers: b
       });
       if (Y.length === 0) return;
-      const Q = et(Y), pe = l.layerList.map((R) => R.config), se = ft(Q, pe).map((R) => {
+      const X = et(Y), pe = l.layerList.map((R) => R.config), se = ft(X, pe).map((R) => {
         const W = R.layer.id.replace(/-outline$/, ""), ce = _e(W);
         if (!ce) return null;
         const yt = Se(ce.id, R.properties || {});
@@ -360,16 +360,16 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       se.sort((R, W) => {
         const ce = R.popupConfig?.popupSortField, yt = W.popupConfig?.popupSortField;
         if (!ce || ce !== yt) return 0;
-        const mt = R.properties[ce], ht = W.properties[ce];
-        if (mt == null || ht == null) return 0;
+        const ht = R.properties[ce], mt = W.properties[ce];
+        if (ht == null || mt == null) return 0;
         const Mt = R.popupConfig?.popupSortOrder !== "asc";
-        return mt < ht ? Mt ? 1 : -1 : mt > ht ? Mt ? -1 : 1 : 0;
+        return ht < mt ? Mt ? 1 : -1 : ht > mt ? Mt ? -1 : 1 : 0;
       }), re.value = se, oe.value = 0, Te.value = [t.lngLat.lng, t.lngLat.lat];
       const te = se[0];
       if (te) {
         const R = _e(te.layerId);
         if (R) {
-          const W = J(te.geometry), ce = Z(R.id, R.type);
+          const W = K(te.geometry), ce = Z(R.id, R.type);
           $.value = {
             geometry: te.geometry,
             geometryType: W,
@@ -423,8 +423,8 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       if (c += `<h3 class="popup-title">${be(Re.value)}</h3>`, t.popupConfig?.fields?.length) {
         c += `<table class="popup-table" aria-label="${be(Re.value)}">`;
         for (const s of t.popupConfig.fields) {
-          const b = Ge(t.properties[s.field], s.format, t.popupConfig.showTime), k = s.label.toLowerCase(), I = k.includes("url") || k.includes("website"), B = b.startsWith("http://") || b.startsWith("https://") || b.startsWith("www.") || I && b.includes("."), Y = b.startsWith("http://") || b.startsWith("https://") ? b : `https://${b}`, Q = B ? `<a href="${be(Y)}" target="_blank" rel="noopener noreferrer">${be(b)}</a>` : be(b);
-          c += `<tr><th scope="row">${be(s.label)}</th><td>${Q}</td></tr>`;
+          const b = Ge(t.properties[s.field], s.format, t.popupConfig.showTime), k = s.label.toLowerCase(), I = k.includes("url") || k.includes("website"), B = b.startsWith("http://") || b.startsWith("https://") || b.startsWith("www.") || I && b.includes("."), Y = b.startsWith("http://") || b.startsWith("https://") ? b : `https://${b}`, X = B ? `<a href="${be(Y)}" target="_blank" rel="noopener noreferrer">${be(b)}</a>` : be(b);
+          c += `<tr><th scope="row">${be(s.label)}</th><td>${X}</td></tr>`;
         }
         c += "</table>";
       }
@@ -452,7 +452,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       "fill-color": "#808080",
       "fill-opacity": 0.5
     }, $ = x(null);
-    function J(t) {
+    function K(t) {
       return t.type;
     }
     function Z(t, c) {
@@ -476,7 +476,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       }
       return { radius: 5, width: 2 };
     }
-    function K(t) {
+    function Q(t) {
       return !t || t.length === 0 ? [] : t[0] ?? [];
     }
     function Ce(t) {
@@ -512,7 +512,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         };
       }
       if (s === "Polygon") {
-        const k = c.coordinates, I = K(k), Y = (b.width || 2) + 3;
+        const k = c.coordinates, I = Q(k), Y = (b.width || 2) + 3;
         return {
           type: "FeatureCollection",
           features: [
@@ -533,11 +533,11 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         const k = c.coordinates, B = (b.width || 2) + 3;
         return {
           type: "FeatureCollection",
-          features: k.map((Q) => ({
+          features: k.map((X) => ({
             type: "Feature",
             geometry: {
               type: "LineString",
-              coordinates: K(Q)
+              coordinates: Q(X)
             },
             properties: {
               highlightWidth: B
@@ -584,7 +584,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       }
       const c = _e(t.layerId);
       if (c) {
-        const s = J(t.geometry), b = Z(c.id, c.type);
+        const s = K(t.geometry), b = Z(c.id, c.type);
         $.value = {
           geometry: t.geometry,
           geometryType: s,
@@ -599,7 +599,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       const [c, s] = t.geometry.coordinates;
       $t.value = [c, s];
     }
-    return (t, c) => (m(), M("div", so, [
+    return (t, c) => (h(), M("div", so, [
       H(f(ao), {
         ref_key: "mapRef",
         ref: r,
@@ -619,32 +619,34 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         "tool-panel-split-ratio": 50,
         onZoom: w,
         onClick: Ie,
-        onMoveend: S,
+        onMoveend: C,
         onLoad: E,
         onSearchResult: Jt
       }, {
         default: He(() => [
-          l.drawControlPosition !== null ? (m(), q(f(io), {
+          l.drawControlPosition !== null ? (h(), q(f(io), {
             key: 0,
             position: l.drawControlPosition
           }, null, 8, ["position"])) : A("", !0),
-          (m(!0), M(ue, null, Le(ut.value, (s) => (m(), q(f(It), {
+          (h(!0), M(ue, null, Le(ut.value, (s) => (h(), q(f(It), {
             id: "tiled-" + s.id,
             key: "tiled-" + s.id,
             source: ct(s),
             paint: { "raster-opacity": de(s.id) },
             minzoom: s.minZoom,
-            maxzoom: s.maxZoom
+            maxzoom: s.maxZoom,
+            "before-id": "highlight-circles"
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (m(!0), M(ue, null, Le(De.value, (s) => (m(), q(f(It), {
+          (h(!0), M(ue, null, Le(De.value, (s) => (h(), q(f(It), {
             id: "dynamic-" + s.id,
             key: "dynamic-" + s.id,
             source: je(s),
             paint: { "raster-opacity": de(s.id) },
             minzoom: s.minZoom,
-            maxzoom: s.maxZoom
+            maxzoom: s.maxZoom,
+            "before-id": "highlight-circles"
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (m(!0), M(ue, null, Le(T.value, (s) => (m(), q(f(Et), {
+          (h(!0), M(ue, null, Le(T.value, (s) => (h(), q(f(Et), {
             id: s.id,
             key: s.id,
             source: Me(s),
@@ -654,7 +656,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
             "before-id": "highlight-circles",
             onClick: ae
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (m(!0), M(ue, null, Le(O.value, (s) => (m(), q(f(Ot), {
+          (h(!0), M(ue, null, Le(O.value, (s) => (h(), q(f(Ot), {
             id: s.id,
             key: s.id,
             source: Me(s),
@@ -664,7 +666,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
             "before-id": "highlight-circles",
             onClick: ae
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (m(!0), M(ue, null, Le(D.value, (s) => (m(), q(f(gt), {
+          (h(!0), M(ue, null, Le(D.value, (s) => (h(), q(f(gt), {
             id: s.id + "-outline",
             key: s.id + "-outline",
             source: Me(s),
@@ -674,7 +676,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
             "before-id": "highlight-lines",
             onClick: ae
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (m(!0), M(ue, null, Le(ee.value, (s) => (m(), q(f(gt), {
+          (h(!0), M(ue, null, Le(ee.value, (s) => (h(), q(f(gt), {
             id: s.id,
             key: s.id,
             source: Me(s),
@@ -706,7 +708,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
             "lng-lat": $t.value,
             color: "#2176d2"
           }, null, 8, ["lng-lat"]),
-          ie.value && Te.value ? (m(), q(f(no), {
+          ie.value && Te.value ? (h(), q(f(no), {
             key: 1,
             "lng-lat": Te.value,
             html: Ae.value,
@@ -730,7 +732,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
   for (const [o, r] of a)
     l[o] = r;
   return l;
-}, uo = /* @__PURE__ */ $e(co, [["__scopeId", "data-v-c704fcd9"]]);
+}, uo = /* @__PURE__ */ $e(co, [["__scopeId", "data-v-1f8b1f59"]]);
 function Nt(e) {
   let a = e.split("?")[0] || e;
   return a = a.replace(/\/query$/, ""), a = a.replace(/\/$/, ""), a = a.replace(/^https?:\/\//, ""), a.toLowerCase();
@@ -785,11 +787,11 @@ const fo = ["disabled"], po = /* @__PURE__ */ ge({
         size: a.size
       })
     );
-    return (u, w) => l(a) ? (m(), q(f(ro), vt({ key: 0 }, { ...r.value, ...u.$attrs }, { role: "button" }), {
+    return (u, w) => l(a) ? (h(), q(f(ro), vt({ key: 0 }, { ...r.value, ...u.$attrs }, { role: "button" }), {
       default: He(() => [
         H(f(zt), Pt(Ft(n.value)), {
           default: He(() => [
-            me(u.$slots, "default", {}, () => [
+            he(u.$slots, "default", {}, () => [
               xe(G(a.text), 1)
             ])
           ]),
@@ -797,7 +799,7 @@ const fo = ["disabled"], po = /* @__PURE__ */ ge({
         }, 16)
       ]),
       _: 3
-    }, 16)) : (m(), M("button", vt({
+    }, 16)) : (h(), M("button", vt({
       key: 1,
       type: "button",
       disabled: a.disabled,
@@ -805,7 +807,7 @@ const fo = ["disabled"], po = /* @__PURE__ */ ge({
     }, u.$attrs), [
       H(f(zt), Pt(Ft(n.value)), {
         default: He(() => [
-          me(u.$slots, "default", {}, () => [
+          he(u.$slots, "default", {}, () => [
             xe(G(a.text), 1)
           ])
         ]),
@@ -818,11 +820,11 @@ var yo = {
   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"]
-}, mo = yo, ho = {
+}, ho = yo, mo = {
   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"]
-}, go = ho;
+}, go = mo;
 const vo = ["for"], bo = { class: "state-layer" }, wo = { class: "content" }, Lo = { class: "input-text-container" }, So = ["id", "placeholder", "aria-label"], Co = {
   key: 1,
   class: "has-text-body-small phila-supporting-text"
@@ -852,22 +854,22 @@ const vo = ["for"], bo = { class: "state-layer" }, wo = { class: "content" }, Lo
       set: (d) => {
         u("update:modelValue", d), w.value = d;
       }
-    }), C = _(() => {
+    }), S = _(() => {
       const d = ["default-class"];
       return l.disabled != null && d.push("phila-input--disabled"), r.value && d.push("phila-input--error"), l.required != null && d.push("phila-input--required"), bt(...d);
     }), y = _(() => {
       const d = [];
       return p.value !== "" && d.push("phila-text-field--filled"), o.className && d.push(o.className), bt(...d);
-    }), h = _(() => {
+    }), m = _(() => {
       if (!(o.label || l["aria-label"]))
         return o.placeholder || void 0;
     }), i = x(null), g = (d) => {
       d.target.closest("button") || i.value?.focus();
     };
-    return (d, L) => (m(), M("div", {
-      class: ne(["phila-input", C.value])
+    return (d, L) => (h(), M("div", {
+      class: ne(["phila-input", S.value])
     }, [
-      o.label ? (m(), M("label", {
+      o.label ? (h(), M("label", {
         key: 0,
         for: n.value,
         class: "has-text-label-small phila-label"
@@ -877,7 +879,7 @@ const vo = ["for"], bo = { class: "state-layer" }, wo = { class: "content" }, Lo
         onClick: g
       }, [
         P("div", bo, [
-          o.leadingIcon ? (m(), q(f(ke), {
+          o.leadingIcon ? (h(), q(f(ke), {
             key: 0,
             "icon-class": o.leadingIcon,
             inline: "",
@@ -889,37 +891,37 @@ const vo = ["for"], bo = { class: "state-layer" }, wo = { class: "content" }, Lo
                 id: n.value,
                 ref_key: "inputRef",
                 ref: i,
-                "onUpdate:modelValue": L[0] || (L[0] = (S) => p.value = S),
+                "onUpdate:modelValue": L[0] || (L[0] = (C) => p.value = C),
                 class: "phila-text-field-input has-text-body-default",
                 placeholder: o.placeholder,
-                "aria-label": h.value
+                "aria-label": m.value
               }, f(l)), null, 16, So), [
                 [Xt, p.value]
               ])
             ])
           ]),
-          p.value != "" ? (m(), q(f(po), {
+          p.value != "" ? (h(), q(f(po), {
             key: 1,
             variant: "standard",
             size: "small",
             "icon-only": "",
             "icon-definition": f(go),
-            onClick: L[1] || (L[1] = (S) => p.value = "")
+            onClick: L[1] || (L[1] = (C) => p.value = "")
           }, null, 8, ["icon-definition"])) : A("", !0),
-          o.trailingIcon ? (m(), q(f(ke), {
+          o.trailingIcon ? (h(), q(f(ke), {
             key: 2,
             size: "small",
             "icon-class": o.trailingIcon,
             inline: "",
             decorative: ""
           }, null, 8, ["icon-class"])) : A("", !0),
-          me(d.$slots, "trailing-action")
+          he(d.$slots, "trailing-action")
         ])
       ], 2),
-      o.supportingText ? (m(), M("div", Co, G(o.supportingText), 1)) : A("", !0),
-      r.value ? (m(), M("div", ko, [
+      o.supportingText ? (h(), M("div", Co, G(o.supportingText), 1)) : A("", !0),
+      r.value ? (h(), M("div", ko, [
         H(f(ke), {
-          "icon-definition": f(mo),
+          "icon-definition": f(ho),
           size: "small",
           inline: "",
           decorative: ""
@@ -969,15 +971,15 @@ const Io = {
     unavailable: { type: Boolean }
   },
   setup(e) {
-    return (a, l) => (m(), M(ue, null, [
-      e.loading && !e.unavailable ? (m(), M("span", Io, " Loading... ")) : A("", !0),
-      e.error ? (m(), M("span", {
+    return (a, l) => (h(), M(ue, null, [
+      e.loading && !e.unavailable ? (h(), M("span", Io, " Loading... ")) : A("", !0),
+      e.error ? (h(), M("span", {
         key: 1,
         class: "error-indicator",
         "aria-label": e.error,
         role: "status"
       }, " Error ", 8, Eo)) : A("", !0),
-      e.unavailable ? (m(), M("span", Oo, " (zoom in) ")) : A("", !0)
+      e.unavailable ? (h(), M("span", Oo, " (zoom in) ")) : A("", !0)
     ], 64));
   }
 }), nt = /* @__PURE__ */ $e(zo, [["__scopeId", "data-v-19b1b402"]]), Do = { class: "opacity-control" }, _o = ["for"], Ro = ["id", "value", "aria-label"], Ao = /* @__PURE__ */ ge({
@@ -994,7 +996,7 @@ const Io = {
       const n = r.target;
       l("update:opacity", parseFloat(n.value));
     }
-    return (r, n) => (m(), M("div", Do, [
+    return (r, n) => (h(), M("div", Do, [
       P("label", {
         class: "opacity-label",
         for: "opacity-" + e.layerId
@@ -1012,27 +1014,30 @@ const Io = {
       }, null, 40, Ro)
     ]));
   }
-}), Lt = /* @__PURE__ */ $e(Ao, [["__scopeId", "data-v-1a025f6a"]]), Bo = ["aria-label"], Vo = { class: "legend-label" }, Zo = /* @__PURE__ */ ge({
+}), Lt = /* @__PURE__ */ $e(Ao, [["__scopeId", "data-v-1a025f6a"]]), Bo = ["aria-label"], Vo = {
+  key: 3,
+  class: "legend-label"
+}, Zo = /* @__PURE__ */ ge({
   __name: "LayerLegend",
   props: {
     items: {},
     label: {}
   },
   setup(e) {
-    return (a, l) => (m(), M("ul", {
+    return (a, l) => (h(), M("ul", {
       class: "layer-legend",
       "aria-label": e.label
     }, [
-      (m(!0), M(ue, null, Le(e.items, (o, r) => (m(), M("li", {
+      (h(!0), M(ue, null, Le(e.items, (o, r) => (h(), M("li", {
         key: r,
         class: "legend-item"
       }, [
-        o.type === "circle" ? (m(), M("span", {
+        o.type === "circle" ? (h(), M("span", {
           key: 0,
           class: "legend-symbol legend-circle",
           style: ye({ backgroundColor: o.color }),
           "aria-hidden": "true"
-        }, null, 4)) : o.type === "line" ? (m(), M("span", {
+        }, null, 4)) : o.type === "line" ? (h(), M("span", {
           key: 1,
           class: "legend-symbol legend-line",
           style: ye({
@@ -1040,17 +1045,17 @@ const Io = {
             height: `${o.width || 2}px`
           }),
           "aria-hidden": "true"
-        }, null, 4)) : o.type === "fill" ? (m(), M("span", {
+        }, null, 4)) : o.type === "fill" ? (h(), M("span", {
           key: 2,
           class: "legend-symbol legend-fill",
           style: ye({ backgroundColor: o.color }),
           "aria-hidden": "true"
         }, null, 4)) : A("", !0),
-        P("span", Vo, G(o.label), 1)
+        e.items.length > 1 ? (h(), M("span", Vo, G(o.label), 1)) : A("", !0)
       ]))), 128))
     ], 8, Bo));
   }
-}), St = /* @__PURE__ */ $e(Zo, [["__scopeId", "data-v-62e210e3"]]);
+}), St = /* @__PURE__ */ $e(Zo, [["__scopeId", "data-v-bbb1a784"]]);
 function Ct(e) {
   function a(u) {
     return e().visibleLayerIds.has(u);
@@ -1065,8 +1070,8 @@ function Ct(e) {
     return e().layerErrors[u] || null;
   }
   function n(u) {
-    const w = e().currentZoom, p = u.minZoom, C = u.maxZoom;
-    return !(p !== void 0 && w < p || C !== void 0 && w > C);
+    const w = e().currentZoom, p = u.minZoom, S = u.maxZoom;
+    return !(p !== void 0 && w < p || S !== void 0 && w > S);
   }
   return { isVisible: a, getLayerOpacity: l, isLayerLoading: o, getLayerError: r, isLayerAvailableAtZoom: n };
 }
@@ -1111,7 +1116,7 @@ const No = { class: "layer-panel" }, Uo = {
       const L = Nt(d);
       return l.layerMetadata[L] || null;
     }
-    const u = _(() => l.layerList.some((d) => n(d.config.url))), { isVisible: w, getLayerOpacity: p, isLayerLoading: C, getLayerError: y, isLayerAvailableAtZoom: h } = Ct(() => ({
+    const u = _(() => l.layerList.some((d) => n(d.config.url))), { isVisible: w, getLayerOpacity: p, isLayerLoading: S, getLayerError: y, isLayerAvailableAtZoom: m } = Ct(() => ({
       visibleLayerIds: l.visibleLayers,
       layerOpacities: l.layerOpacities,
       loadingLayerIds: l.loadingLayers,
@@ -1124,11 +1129,11 @@ const No = { class: "layer-panel" }, Uo = {
     function g(d) {
       o("toggleLayer", d);
     }
-    return (d, L) => (m(), M("div", No, [
-      e.showSearch ? (m(), M("div", Uo, [
+    return (d, L) => (h(), M("div", No, [
+      e.showSearch ? (h(), M("div", Uo, [
         H(f(xo), {
           modelValue: i.value,
-          "onUpdate:modelValue": L[0] || (L[0] = (S) => i.value = S),
+          "onUpdate:modelValue": L[0] || (L[0] = (C) => i.value = C),
           placeholder: e.searchPlaceholder,
           "class-name": "layer-search-field"
         }, {
@@ -1143,26 +1148,26 @@ const No = { class: "layer-panel" }, Uo = {
           _: 1
         }, 8, ["modelValue", "placeholder"])
       ])) : A("", !0),
-      e.mode === "topics" ? (m(), M("div", Wo, [
-        me(d.$slots, "topics", {}, () => [
+      e.mode === "topics" ? (h(), M("div", Wo, [
+        he(d.$slots, "topics", {}, () => [
           L[2] || (L[2] = P("div", { class: "no-topics" }, ' No topic components provided. Use the "topics" slot to add TopicAccordion components. ', -1))
         ], !0)
-      ])) : (m(), M("div", {
+      ])) : (h(), M("div", {
         key: 2,
         class: ne(["layer-list", { "has-metadata": u.value }])
       }, [
-        (m(!0), M(ue, null, Le(r.value, (S) => (m(), M("div", {
-          key: S.config.id,
+        (h(!0), M(ue, null, Le(r.value, (C) => (h(), M("div", {
+          key: C.config.id,
           class: "layer-item"
         }, [
           P("div", jo, [
-            n(S.config.url) ? (m(), M("a", {
+            n(C.config.url) ? (h(), M("a", {
               key: 0,
-              href: n(S.config.url) || "",
+              href: n(C.config.url) || "",
               target: "_blank",
               rel: "noopener noreferrer",
               class: "metadata-link",
-              "aria-label": "View metadata for " + S.config.title,
+              "aria-label": "View metadata for " + C.config.title,
               onClick: L[1] || (L[1] = Yt(() => {
               }, ["stop"]))
             }, [
@@ -1172,43 +1177,43 @@ const No = { class: "layer-panel" }, Uo = {
                 inline: "",
                 decorative: ""
               }, null, 8, ["icon-definition"])
-            ], 8, qo)) : u.value ? (m(), M("span", Go)) : A("", !0),
+            ], 8, qo)) : u.value ? (h(), M("span", Go)) : A("", !0),
             P("label", {
               class: ne(["layer-checkbox", {
-                "layer-unavailable": !f(h)(S.config),
-                "layer-error": f(y)(S.config.id)
+                "layer-unavailable": !f(m)(C.config),
+                "layer-error": f(y)(C.config.id)
               }])
             }, [
               P("input", {
                 type: "checkbox",
-                checked: f(w)(S.config.id),
-                disabled: !f(h)(S.config),
-                onChange: (E) => g(S.config.id)
+                checked: f(w)(C.config.id),
+                disabled: !f(m)(C.config),
+                onChange: (E) => g(C.config.id)
               }, null, 40, Ho),
               P("span", Jo, [
-                xe(G(S.config.title) + " ", 1),
+                xe(G(C.config.title) + " ", 1),
                 H(nt, {
-                  loading: f(C)(S.config.id),
-                  error: f(y)(S.config.id),
-                  unavailable: !f(h)(S.config)
+                  loading: f(S)(C.config.id),
+                  error: f(y)(C.config.id),
+                  unavailable: !f(m)(C.config)
                 }, null, 8, ["loading", "error", "unavailable"])
               ])
             ], 2)
           ]),
-          e.showOpacity && f(w)(S.config.id) && f(h)(S.config) ? (m(), q(Lt, {
+          e.showOpacity && f(w)(C.config.id) && f(m)(C.config) ? (h(), q(Lt, {
             key: 0,
-            "layer-id": S.config.id,
-            "layer-name": S.config.title,
-            opacity: f(p)(S.config.id),
-            "onUpdate:opacity": (E) => o("setOpacity", S.config.id, E)
+            "layer-id": C.config.id,
+            "layer-name": C.config.title,
+            opacity: f(p)(C.config.id),
+            "onUpdate:opacity": (E) => o("setOpacity", C.config.id, E)
           }, null, 8, ["layer-id", "layer-name", "opacity", "onUpdate:opacity"])) : A("", !0),
-          e.showLegend && f(w)(S.config.id) && f(h)(S.config) && S.config.legend?.length ? (m(), q(St, {
+          e.showLegend && f(w)(C.config.id) && f(m)(C.config) && C.config.legend?.length ? (h(), q(St, {
             key: 1,
-            items: S.config.legend,
-            label: "Legend for " + S.config.title
+            items: C.config.legend,
+            label: "Legend for " + C.config.title
           }, null, 8, ["items", "label"])) : A("", !0)
         ]))), 128)),
-        r.value.length === 0 ? (m(), M("div", Ko, 'No layers match "' + G(e.searchQuery) + '"', 1)) : A("", !0)
+        r.value.length === 0 ? (h(), M("div", Ko, 'No layers match "' + G(e.searchQuery) + '"', 1)) : A("", !0)
       ], 2))
     ]));
   }
@@ -1230,23 +1235,23 @@ function ea(e, a, l, o, r) {
   for (let i = 1; i < e.length; i++)
     a[i] === u ? w.push(e[i]) : (n.push({ style: u, breaks: w, startIndex: p }), u = a[i], w = [e[i]], p = i);
   n.push({ style: u, breaks: w, startIndex: p });
-  const C = [], y = /* @__PURE__ */ new Set();
-  let h = o.minValue ?? 0;
+  const S = [], y = /* @__PURE__ */ new Set();
+  let m = o.minValue ?? 0;
   for (let i = 0; i < n.length; i++) {
-    const g = n[i], d = g.breaks, L = Ke(g.style), S = i === 0 ? null : n[i - 1].breaks[n[i - 1].breaks.length - 1].classMaxValue, E = d[d.length - 1].classMaxValue;
+    const g = n[i], d = g.breaks, L = Ke(g.style), C = i === 0 ? null : n[i - 1].breaks[n[i - 1].breaks.length - 1].classMaxValue, E = d[d.length - 1].classMaxValue;
     let F;
     const V = !!o.defaultSymbol;
-    S === null ? F = `${!V && o.minValue != null ? `${l} >= ${o.minValue} AND ` : ""}${l} <= ${E}` : i === n.length - 1 && V ? F = `${l} > ${S}` : F = `${l} > ${S} AND ${l} <= ${E}`;
+    C === null ? F = `${!V && o.minValue != null ? `${l} >= ${o.minValue} AND ` : ""}${l} <= ${E}` : i === n.length - 1 && V ? F = `${l} > ${C}` : F = `${l} > ${C} AND ${l} <= ${E}`;
     const T = {
-      "line-opacity": he(r)
+      "line-opacity": me(r)
     };
     if (L && (T["line-dasharray"] = L), d.length === 1)
-      T["line-color"] = z(d[0].symbol?.color), T["line-width"] = X(d[0].symbol?.width || 2);
+      T["line-color"] = z(d[0].symbol?.color), T["line-width"] = J(d[0].symbol?.width || 2);
     else {
       const U = ["step", ["get", l]], de = ["step", ["get", l]];
-      U.push(z(d[0].symbol?.color)), de.push(X(d[0].symbol?.width || 2));
+      U.push(z(d[0].symbol?.color)), de.push(J(d[0].symbol?.width || 2));
       for (let ve = 1; ve < d.length; ve++)
-        U.push(d[ve - 1].classMaxValue), U.push(z(d[ve].symbol?.color)), de.push(d[ve - 1].classMaxValue), de.push(X(d[ve].symbol?.width || 2));
+        U.push(d[ve - 1].classMaxValue), U.push(z(d[ve].symbol?.color)), de.push(d[ve - 1].classMaxValue), de.push(J(d[ve].symbol?.width || 2));
       T["line-color"] = U, T["line-width"] = de;
     }
     const O = [];
@@ -1254,34 +1259,34 @@ function ea(e, a, l, o, r) {
       O.push({
         type: "line",
         color: z(U.symbol?.color),
-        width: X(U.symbol?.width || 2),
-        label: U.label || `${h} - ${U.classMaxValue}`
-      }), h = U.classMaxValue + 1;
+        width: J(U.symbol?.width || 2),
+        label: U.label || `${m} - ${U.classMaxValue}`
+      }), m = U.classMaxValue + 1;
     const D = g.style.replace("esriSLS", "").toLowerCase();
     let ee;
-    i === 0 ? ee = "" : y.has(D) ? ee = `-${D}-${i}` : ee = `-${D}`, y.add(D), C.push({ suffix: ee, where: F, paint: T, legend: O });
+    i === 0 ? ee = "" : y.has(D) ? ee = `-${D}-${i}` : ee = `-${D}`, y.add(D), S.push({ suffix: ee, where: F, paint: T, legend: O });
   }
-  return C;
+  return S;
 }
 function ta(e, a, l, o, r) {
   const n = /* @__PURE__ */ new Map();
-  for (const C of e) {
-    const y = C.symbol?.style || "esriSLSSolid";
-    n.has(y) || n.set(y, []), n.get(y).push(C);
+  for (const S of e) {
+    const y = S.symbol?.style || "esriSLSSolid";
+    n.has(y) || n.set(y, []), n.get(y).push(S);
   }
   const u = [], w = /* @__PURE__ */ new Set();
   let p = !0;
-  for (const [C, y] of n) {
-    const h = Ke(C), g = y.map((F) => `${a} = '${String(F.value).replace(/'/g, "''")}'`).join(" OR "), d = {
-      "line-opacity": he(o)
+  for (const [S, y] of n) {
+    const m = Ke(S), g = y.map((F) => `${a} = '${String(F.value).replace(/'/g, "''")}'`).join(" OR "), d = {
+      "line-opacity": me(o)
     };
-    if (h && (d["line-dasharray"] = h), y.length === 1)
-      d["line-color"] = z(y[0].symbol?.color), d["line-width"] = X(y[0].symbol?.width || 2);
+    if (m && (d["line-dasharray"] = m), y.length === 1)
+      d["line-color"] = z(y[0].symbol?.color), d["line-width"] = J(y[0].symbol?.width || 2);
     else {
       const F = ["match", ["to-string", ["get", a]]];
       for (const V of y)
         F.push(it(V.value)), F.push(z(V.symbol?.color));
-      F.push(l ? z(l.color) : "rgba(0, 0, 0, 0)"), d["line-color"] = F, d["line-width"] = X(y[0].symbol?.width || 2);
+      F.push(l ? z(l.color) : "rgba(0, 0, 0, 0)"), d["line-color"] = F, d["line-width"] = J(y[0].symbol?.width || 2);
     }
     const L = [];
     for (const F of y) {
@@ -1289,13 +1294,13 @@ function ta(e, a, l, o, r) {
       L.push({
         type: "line",
         color: z(F.symbol?.color),
-        width: X(F.symbol?.width || 1),
+        width: J(F.symbol?.width || 1),
         label: O
       });
     }
-    const S = C.replace("esriSLS", "").toLowerCase();
+    const C = S.replace("esriSLS", "").toLowerCase();
     let E;
-    p ? E = "" : w.has(S) ? E = `-${S}-${u.length}` : E = `-${S}`, w.add(S), p = !1, u.push({ suffix: E, where: g, paint: d, legend: L });
+    p ? E = "" : w.has(C) ? E = `-${C}-${u.length}` : E = `-${C}`, w.add(C), p = !1, u.push({ suffix: E, where: g, paint: d, legend: L });
   }
   return u;
 }
@@ -1304,10 +1309,10 @@ function z(e) {
   const a = e[0], l = e[1], o = e[2], n = (e[3] ?? 255) / 255;
   return n === 1 ? `#${a.toString(16).padStart(2, "0")}${l.toString(16).padStart(2, "0")}${o.toString(16).padStart(2, "0")}` : `rgba(${a}, ${l}, ${o}, ${n.toFixed(2)})`;
 }
-function he(e) {
+function me(e) {
   return e !== void 0 ? e : 1;
 }
-function X(e) {
+function J(e) {
   return Math.round(e * (96 / 72) * 10) / 10;
 }
 const oa = 559082264;
@@ -1353,15 +1358,15 @@ function Ut(e, a, l) {
   const o = e.symbol, r = st(o);
   let n = {}, u = [], w = null;
   if (r === "fill" && o) {
-    const p = o.color === null ? 0 : o.color?.[3] ?? 255, C = p === 0 ? "rgba(0, 0, 0, 0)" : z(o.color), y = p === 0 ? 0 : p < 255 ? 1 : he(a);
+    const p = o.color === null ? 0 : o.color?.[3] ?? 255, S = p === 0 ? "rgba(0, 0, 0, 0)" : z(o.color), y = p === 0 ? 0 : p < 255 ? 1 : me(a);
     if (n = {
-      "fill-color": C,
+      "fill-color": S,
       "fill-opacity": y
     }, Pe(o.outline)) {
-      const h = X(o.outline.width || 1);
+      const m = J(o.outline.width || 1);
       w = {
         "line-color": z(o.outline.color),
-        "line-width": h
+        "line-width": m
       };
     }
     u = [
@@ -1374,15 +1379,15 @@ function Ut(e, a, l) {
   } else if (r === "line" && o) {
     n = {
       "line-color": z(o.color),
-      "line-width": X(o.width || 1),
-      "line-opacity": he(a)
+      "line-width": J(o.width || 1),
+      "line-opacity": me(a)
     };
     const p = Ke(o.style);
     p && (n["line-dasharray"] = p), u = [
       {
         type: "line",
         color: z(o.color),
-        width: X(o.width || 1),
+        width: J(o.width || 1),
         label: e.label || "Feature"
       }
     ];
@@ -1391,8 +1396,8 @@ function Ut(e, a, l) {
     n = {
       "circle-color": z(o.color),
       "circle-radius": p,
-      "circle-opacity": he(a)
-    }, Pe(o.outline) && (n["circle-stroke-color"] = z(o.outline.color), n["circle-stroke-width"] = X(o.outline.width || 1)), u = [
+      "circle-opacity": me(a)
+    }, Pe(o.outline) && (n["circle-stroke-color"] = z(o.outline.color), n["circle-stroke-width"] = J(o.outline.width || 1)), u = [
       {
         type: "circle",
         color: z(o.color),
@@ -1408,45 +1413,54 @@ function ia(e, a, l) {
     return Ut({ ...e, symbol: n }, a);
   const u = r[0]?.symbol || n, w = st(u);
   let p = {};
-  const C = [];
+  const S = [];
   let y = null;
   if (w === "fill") {
-    const h = ["match", ["to-string", ["get", o]]];
+    const m = ["match", ["to-string", ["get", o]]];
     for (const i of r) {
-      h.push(it(i.value)), h.push(z(i.symbol?.color));
+      m.push(it(i.value)), m.push(z(i.symbol?.color));
       const g = String(i.value), L = l?.get(g) || i.label || g;
-      C.push({
+      S.push({
         type: "fill",
         color: z(i.symbol?.color),
         label: L
       });
     }
-    if (h.push(n ? z(n.color) : "rgba(0, 0, 0, 0)"), p = {
-      "fill-color": h,
-      "fill-opacity": he(a)
+    if (m.push(n ? z(n.color) : "rgba(0, 0, 0, 0)"), n && S.push({
+      type: "fill",
+      color: z(n.color),
+      label: e.defaultLabel || "Other"
+    }), p = {
+      "fill-color": m,
+      "fill-opacity": me(a)
     }, Pe(u?.outline)) {
-      const i = X(Math.max(u.outline.width || 1, 1));
+      const i = J(Math.max(u.outline.width || 1, 1));
       y = {
         "line-color": z(u.outline.color),
         "line-width": i
       };
     }
   } else if (w === "line") {
-    const h = ["match", ["to-string", ["get", o]]];
+    const m = ["match", ["to-string", ["get", o]]];
     for (const d of r) {
-      h.push(it(d.value)), h.push(z(d.symbol?.color));
+      m.push(it(d.value)), m.push(z(d.symbol?.color));
       const L = String(d.value), E = l?.get(L) || d.label || L;
-      C.push({
+      S.push({
         type: "line",
         color: z(d.symbol?.color),
-        width: X(d.symbol?.width || 1),
+        width: J(d.symbol?.width || 1),
         label: E
       });
     }
-    h.push(n ? z(n.color) : "rgba(0, 0, 0, 0)"), p = {
-      "line-color": h,
-      "line-width": X(u?.width || 2),
-      "line-opacity": he(a)
+    m.push(n ? z(n.color) : "rgba(0, 0, 0, 0)"), n && S.push({
+      type: "line",
+      color: z(n.color),
+      width: J(n.width || 1),
+      label: e.defaultLabel || "Other"
+    }), p = {
+      "line-color": m,
+      "line-width": J(u?.width || 2),
+      "line-opacity": me(a)
     };
     const i = r.map((d) => d.symbol?.style || "esriSLSSolid"), g = [...new Set(i)];
     if (g.length > 1) {
@@ -1458,25 +1472,29 @@ function ia(e, a, l) {
       d && (p["line-dasharray"] = d);
     }
   } else if (w === "circle") {
-    const h = ["match", ["to-string", ["get", o]]];
+    const m = ["match", ["to-string", ["get", o]]];
     for (const g of r) {
-      h.push(it(g.value)), h.push(z(g.symbol?.color));
-      const d = String(g.value), S = l?.get(d) || g.label || d;
-      C.push({
+      m.push(it(g.value)), m.push(z(g.symbol?.color));
+      const d = String(g.value), C = l?.get(d) || g.label || d;
+      S.push({
         type: "circle",
         color: z(g.symbol?.color),
-        label: S
+        label: C
       });
     }
-    h.push(n ? z(n.color) : "rgba(0, 0, 0, 0)");
+    m.push(n ? z(n.color) : "rgba(0, 0, 0, 0)"), n && S.push({
+      type: "circle",
+      color: z(n.color),
+      label: e.defaultLabel || "Other"
+    });
     const i = Math.round((u?.size || 6) * 0.71 * 100) / 100;
     p = {
-      "circle-color": h,
+      "circle-color": m,
       "circle-radius": i,
-      "circle-opacity": he(a)
-    }, Pe(u?.outline) && (p["circle-stroke-color"] = z(u.outline.color), p["circle-stroke-width"] = X(u.outline.width || 1));
+      "circle-opacity": me(a)
+    }, Pe(u?.outline) && (p["circle-stroke-color"] = z(u.outline.color), p["circle-stroke-width"] = J(u.outline.width || 1));
   }
-  return { paint: p, legend: C, geomType: w, outlinePaint: y };
+  return { paint: p, legend: S, geomType: w, outlinePaint: y };
 }
 function la(e, a) {
   const l = e.field.toLowerCase(), o = e.classBreakInfos || [], r = e.visualVariables?.find((y) => y.type === "colorInfo");
@@ -1487,13 +1505,13 @@ function la(e, a) {
   const n = o[0]?.symbol, u = st(n);
   let w = {};
   const p = [];
-  let C = null;
+  let S = null;
   if (u === "fill") {
     const y = ["step", ["get", l]];
     y.push(z(o[0]?.symbol?.color));
-    for (let h = 0; h < o.length; h++) {
-      const i = o[h];
-      h > 0 && (y.push(o[h - 1].classMaxValue), y.push(z(i.symbol?.color))), p.push({
+    for (let m = 0; m < o.length; m++) {
+      const i = o[m];
+      m > 0 && (y.push(o[m - 1].classMaxValue), y.push(z(i.symbol?.color))), p.push({
         type: "fill",
         color: z(i.symbol?.color),
         label: i.label || `${i.classMaxValue}`
@@ -1501,19 +1519,19 @@ function la(e, a) {
     }
     if (w = {
       "fill-color": y,
-      "fill-opacity": he(a)
+      "fill-opacity": me(a)
     }, Pe(n?.outline)) {
-      const h = X(n.outline.width || 1);
-      C = {
+      const m = J(n.outline.width || 1);
+      S = {
         "line-color": z(n.outline.color),
-        "line-width": h
+        "line-width": m
       };
     }
   } else if (u === "line") {
-    const y = o.map((E) => E.symbol?.style || "esriSLSSolid"), h = [...new Set(y)];
-    if (h.length > 1) {
+    const y = o.map((E) => E.symbol?.style || "esriSLSSolid"), m = [...new Set(y)];
+    if (m.length > 1) {
       const E = ea(o, y, l, e, a);
-      return { paint: {}, legend: [], geomType: u, outlinePaint: C, splitLayers: E };
+      return { paint: {}, legend: [], geomType: u, outlinePaint: S, splitLayers: E };
     }
     const g = ["step", ["get", l]];
     g.push(z(o[0]?.symbol?.color));
@@ -1523,20 +1541,20 @@ function la(e, a) {
       E > 0 && (g.push(o[E - 1].classMaxValue), g.push(z(F.symbol?.color))), p.push({
         type: "line",
         color: z(F.symbol?.color),
-        width: X(F.symbol?.width || n?.width || 2),
+        width: J(F.symbol?.width || n?.width || 2),
         label: F.label || `${d} - ${F.classMaxValue}`
       }), d = F.classMaxValue + 1;
     }
-    const L = X(n?.width || 2);
+    const L = J(n?.width || 2);
     w = {
       "line-color": g,
       "line-width": L,
-      "line-opacity": he(a)
+      "line-opacity": me(a)
     };
-    const S = Ke(h[0]);
-    S && (w["line-dasharray"] = S);
+    const C = Ke(m[0]);
+    C && (w["line-dasharray"] = C);
   }
-  return { paint: w, legend: p, geomType: u, outlinePaint: C };
+  return { paint: w, legend: p, geomType: u, outlinePaint: S };
 }
 function na(e, a, l, o) {
   const r = e.stops || [];
@@ -1545,7 +1563,7 @@ function na(e, a, l, o) {
   const n = l.classBreakInfos?.[0]?.symbol || l.defaultSymbol, u = st(n);
   let w = {};
   const p = [];
-  let C = null;
+  let S = null;
   if (u === "fill") {
     const y = ["interpolate", ["linear"], ["get", a]];
     for (const i of r)
@@ -1563,16 +1581,16 @@ function na(e, a, l, o) {
         y
         // Otherwise use the interpolated color
       ],
-      "fill-opacity": he(o)
+      "fill-opacity": me(o)
     }, Pe(n?.outline)) {
-      const i = X(n.outline.width || 1);
-      C = {
+      const i = J(n.outline.width || 1);
+      S = {
         "line-color": z(n.outline.color),
         "line-width": i
       };
     }
   }
-  return { paint: w, legend: p, geomType: u, outlinePaint: C };
+  return { paint: w, legend: p, geomType: u, outlinePaint: S };
 }
 function ra(e, a, l, o) {
   if (!e?.renderer)
@@ -1660,27 +1678,27 @@ async function Wt(e) {
     if (r.url && !r.title?.toLowerCase().includes("(under construction)") && !(r.url && /\/MapServer(\/\d+)?$/i.test(r.url)))
       try {
         let n = r.layerDefinition?.drawingInfo, u;
-        const w = !n || !n.renderer, p = o.includes(r.title), C = n?.renderer?.uniqueValueInfos?.[0]?.symbol?.outline || n?.renderer?.defaultSymbol?.outline;
+        const w = !n || !n.renderer, p = o.includes(r.title), S = n?.renderer?.uniqueValueInfos?.[0]?.symbol?.outline || n?.renderer?.defaultSymbol?.outline;
         if ((w || p) && r.url) {
           const O = await pa(r.url);
           if (O) {
-            if (n = O.drawingInfo, C && Pe(C) && n?.renderer) {
+            if (n = O.drawingInfo, S && Pe(S) && n?.renderer) {
               const D = n.renderer, ee = D.uniqueValueInfos?.[0]?.symbol?.outline || D.defaultSymbol?.outline;
               if (!Pe(ee)) {
                 for (const U of D.uniqueValueInfos || [])
-                  U.symbol && (U.symbol.outline = C);
-                D.defaultSymbol && (D.defaultSymbol.outline = C);
+                  U.symbol && (U.symbol.outline = S);
+                D.defaultSymbol && (D.defaultSymbol.outline = S);
               }
             }
             O.description && (u = fa(O.description), u.size > 0);
           }
         }
-        const { paint: y, legend: h, geomType: i, outlinePaint: g, splitLayers: d } = ra(
+        const { paint: y, legend: m, geomType: i, outlinePaint: g, splitLayers: d } = ra(
           n,
           r.opacity,
           u,
           r.title
-        ), L = sa(r.popupInfo), S = ca(r.layerDefinition), E = aa(r.layerDefinition?.minScale, r.layerDefinition?.maxScale), F = ua(r.title), V = da(r.title), T = r.opacity ?? 1;
+        ), L = sa(r.popupInfo), C = ca(r.layerDefinition), E = aa(r.layerDefinition?.minScale, r.layerDefinition?.maxScale), F = ua(r.title), V = da(r.title), T = r.opacity ?? 1;
         if (d && d.length > 0)
           for (const O of d) {
             const D = `${F}${O.suffix}`;
@@ -1693,7 +1711,7 @@ async function Wt(e) {
               paint: O.paint,
               legend: O.legend,
               popup: L,
-              where: S ? `(${S}) AND (${O.where})` : O.where,
+              where: C ? `(${C}) AND (${O.where})` : O.where,
               minZoom: E.minZoom,
               maxZoom: E.maxZoom,
               parentId: O.suffix ? F : void 0
@@ -1707,9 +1725,9 @@ async function Wt(e) {
             url: r.url,
             opacity: T,
             paint: y,
-            legend: h,
+            legend: m,
             popup: L,
-            where: S,
+            where: C,
             minZoom: E.minZoom,
             maxZoom: E.maxZoom,
             outlinePaint: g
@@ -1731,7 +1749,7 @@ function ya(e) {
   e ? (rt.delete(e), Je.delete(e)) : (rt.clear(), Je.clear());
 }
 let at, Bt = 0;
-async function ma() {
+async function ha() {
   const e = typeof import.meta < "u" && At?.VITE_AGO_USERNAME, a = typeof import.meta < "u" && At?.VITE_AGO_PASSWORD;
   if (!(!e || !a)) {
     if (at && Date.now() < Bt - 3e5)
@@ -1757,7 +1775,7 @@ async function ma() {
     }
   }
 }
-async function ha(e, a) {
+async function ma(e, a) {
   const l = xt(e, a), o = await fetch(l, { cache: "no-store" });
   if (!o.ok)
     throw new Error(`Failed to fetch WebMap: ${o.status} ${o.statusText}`);
@@ -1768,7 +1786,7 @@ async function ha(e, a) {
 }
 async function ga(e) {
   try {
-    const a = await ma(), l = await ha(e, a);
+    const a = await ha(), l = await ma(e, a);
     return await Wt(l);
   } catch (a) {
     throw new Error(
@@ -1832,7 +1850,7 @@ function va(e) {
           throw new Error(`HTTP ${L.status}: ${L.statusText}`);
         d = await L.json();
       } else if (i.type === "esri") {
-        const S = `${i.url.replace(/\/$/, "")}/query?where=1%3D1&outFields=*&returnGeometry=false&f=json`, E = await fetch(S, i.options);
+        const C = `${i.url.replace(/\/$/, "")}/query?where=1%3D1&outFields=*&returnGeometry=false&f=json`, E = await fetch(C, i.options);
         if (!E.ok)
           throw new Error(`HTTP ${E.status}: ${E.statusText}`);
         d = (await E.json()).features?.map((V) => V.attributes) || [];
@@ -1874,7 +1892,7 @@ function va(e) {
   function p(i) {
     return a.value[i]?.loading ?? !1;
   }
-  function C(i) {
+  function S(i) {
     return a.value[i]?.error ?? null;
   }
   function y() {
@@ -1886,7 +1904,7 @@ function va(e) {
         l.set(i.id, g);
       }
   }
-  function h() {
+  function m() {
     for (const [, i] of l)
       window.clearInterval(i);
     l.clear();
@@ -1894,7 +1912,7 @@ function va(e) {
   return lt(() => {
     r(), y();
   }), Vt(() => {
-    h();
+    m();
   }), {
     /** Reactive state for all data sources */
     state: j(a),
@@ -1909,9 +1927,9 @@ function va(e) {
     /** Check if a specific source is loading */
     isSourceLoading: p,
     /** Get error for a specific source */
-    getError: C,
+    getError: S,
     /** Stop all polling (useful for cleanup) */
-    stopPolling: h
+    stopPolling: m
   };
 }
 const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
@@ -1959,12 +1977,12 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
   },
   emits: ["configs-loaded", "load-error", "zoom"],
   setup(e, { expose: a, emit: l }) {
-    const o = e, r = l, n = x([]), u = x(!0), w = x(null), p = x(12), C = x(""), y = x(/* @__PURE__ */ new Set()), h = x({}), i = x(/* @__PURE__ */ new Set()), g = x({}), d = x({}), L = x(/* @__PURE__ */ new Set()), S = x({});
+    const o = e, r = l, n = x([]), u = x(!0), w = x(null), p = x(12), S = x(""), y = x(/* @__PURE__ */ new Set()), m = x({}), i = x(/* @__PURE__ */ new Set()), g = x({}), d = x({}), L = x(/* @__PURE__ */ new Set()), C = x({});
     function E() {
       const v = {};
       for (const $ of o.tiledLayers)
         v[$.id] = $.opacity ?? 1;
-      S.value = v;
+      C.value = v;
     }
     function F(v) {
       L.value.has(v) ? L.value.delete(v) : L.value.add(v), L.value = new Set(L.value);
@@ -1973,7 +1991,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
       $ ? L.value.add(v) : L.value.delete(v), L.value = new Set(L.value);
     }
     function T(v, $) {
-      S.value = { ...S.value, [v]: $ };
+      C.value = { ...C.value, [v]: $ };
     }
     const O = o.dataSources.length > 0 ? va(o.dataSources) : null, D = _(() => O?.state.value ?? {}), ee = _(() => O?.isLoading.value ?? !1);
     function U(v) {
@@ -1982,7 +2000,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
     function de(v) {
       return O?.refetch(v) ?? Promise.resolve();
     }
-    N("layerboard-layers", j(n)), N("layerboard-visible", y), N("layerboard-opacities", h), N("layerboard-loading", j(i)), N("layerboard-errors", j(g)), N("layerboard-zoom", j(p)), N("layerboard-toggle-layer", De), N("layerboard-set-layer-visible", je), N("layerboard-set-layers-visible", Me), N("layerboard-set-opacity", Fe), N("layerboard-tiled-layers", j(_(() => o.tiledLayers))), N("layerboard-visible-tiled", L), N("layerboard-tiled-opacities", S), N("layerboard-toggle-tiled", F), N("layerboard-set-tiled-opacity", T), N("layerboard-set-tiled-visible", V), N("layerboard-data-sources-state", D), N("layerboard-data-sources-loading", ee), N("layerboard-get-data-source", U), N("layerboard-refetch-data-source", de);
+    N("layerboard-layers", j(n)), N("layerboard-visible", y), N("layerboard-opacities", m), N("layerboard-loading", j(i)), N("layerboard-errors", j(g)), N("layerboard-zoom", j(p)), N("layerboard-toggle-layer", De), N("layerboard-set-layer-visible", je), N("layerboard-set-layers-visible", Me), N("layerboard-set-opacity", Fe), N("layerboard-tiled-layers", j(_(() => o.tiledLayers))), N("layerboard-visible-tiled", L), N("layerboard-tiled-opacities", C), N("layerboard-toggle-tiled", F), N("layerboard-set-tiled-opacity", T), N("layerboard-set-tiled-visible", V), N("layerboard-data-sources-state", D), N("layerboard-data-sources-loading", ee), N("layerboard-get-data-source", U), N("layerboard-refetch-data-source", de);
     const ve = _(() => ({
       backgroundColor: o.themeColor
     })), ct = _(() => ({
@@ -1996,29 +2014,29 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
       try {
         u.value = !0, w.value = null;
         const $ = (await wt(o.webMapId)).map((Z) => {
-          let K = Z;
+          let Q = Z;
           const Ce = o.layerStyleOverrides[Z.id];
-          Ce && (K = {
-            ...K,
-            paint: Ce.paint ?? K.paint,
-            outlinePaint: Ce.outlinePaint ?? K.outlinePaint,
-            legend: Ce.legend ?? K.legend,
-            type: Ce.type ?? K.type
+          Ce && (Q = {
+            ...Q,
+            paint: Ce.paint ?? Q.paint,
+            outlinePaint: Ce.outlinePaint ?? Q.outlinePaint,
+            legend: Ce.legend ?? Q.legend,
+            type: Ce.type ?? Q.type
           });
           const Ze = o.popupOverrides[Z.id] || (Z.parentId ? o.popupOverrides[Z.parentId] : void 0);
-          return Ze && K.popup && (K = {
-            ...K,
-            popup: { ...K.popup, ...Ze }
-          }), K;
+          return Ze && Q.popup && (Q = {
+            ...Q,
+            popup: { ...Q.popup, ...Ze }
+          }), Q;
         });
         n.value = $.map((Z) => ({
           config: Z,
           component: Z.type
         }));
-        const J = {};
+        const K = {};
         $.forEach((Z) => {
-          J[Z.id] = Z.opacity ?? 1;
-        }), h.value = J, r("configs-loaded", $);
+          K[Z.id] = Z.opacity ?? 1;
+        }), m.value = K, r("configs-loaded", $);
       } catch (v) {
         const $ = v instanceof Error ? v.message : "Failed to load layer configurations";
         w.value = $, r("load-error", $);
@@ -2033,10 +2051,10 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
             "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"
           ), $ = await fetch(v);
           if (!$.ok) return;
-          const J = await $.json(), Z = {};
-          for (const K of J.rows || [])
-            if (K.url_text && K.representation) {
-              const Ce = Nt(K.url_text), Ze = `https://metadata.phila.gov/#home/representationdetails/${K.representation}/`;
+          const K = await $.json(), Z = {};
+          for (const Q of K.rows || [])
+            if (Q.url_text && Q.representation) {
+              const Ce = Nt(Q.url_text), Ze = `https://metadata.phila.gov/#home/representationdetails/${Q.representation}/`;
               Z[Ce] = Ze;
             }
           d.value = Z;
@@ -2053,12 +2071,12 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
       $ ? y.value.add(v) : y.value.delete(v), y.value = new Set(y.value);
     }
     function Me(v, $) {
-      for (const J of v)
-        $ ? y.value.add(J) : y.value.delete(J);
+      for (const K of v)
+        $ ? y.value.add(K) : y.value.delete(K);
       y.value = new Set(y.value);
     }
     function Fe(v, $) {
-      h.value = { ...h.value, [v]: $ };
+      m.value = { ...m.value, [v]: $ };
     }
     function qe(v, $) {
       $ ? i.value.add(v) : i.value.delete(v), i.value = new Set(i.value);
@@ -2067,12 +2085,12 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
       if ($)
         g.value = { ...g.value, [v]: $ };
       else {
-        const J = { ...g.value };
-        delete J[v], g.value = J;
+        const K = { ...g.value };
+        delete K[v], g.value = K;
       }
     }
     function re(v) {
-      C.value = v;
+      S.value = v;
     }
     const Te = x(null), oe = x(null), _e = x(null), Ye = x(null), be = x(null), Ge = x(null), et = x(null), Se = x("sidebar");
     function ft() {
@@ -2121,8 +2139,8 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           )
         );
         if ($.length === 0) return;
-        const J = $[0], Z = $[$.length - 1];
-        v.shiftKey ? document.activeElement === J && (v.preventDefault(), Z.focus()) : document.activeElement === Z && (v.preventDefault(), J.focus());
+        const K = $[0], Z = $[$.length - 1];
+        v.shiftKey ? document.activeElement === K && (v.preventDefault(), Z.focus()) : document.activeElement === Z && (v.preventDefault(), K.focus());
       }
     }
     function pt(v) {
@@ -2137,8 +2155,8 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           )
         );
         if ($.length === 0) return;
-        const J = $[0], Z = $[$.length - 1];
-        v.shiftKey ? document.activeElement === J && (v.preventDefault(), Z.focus()) : document.activeElement === Z && (v.preventDefault(), J.focus());
+        const K = $[0], Z = $[$.length - 1];
+        v.shiftKey ? document.activeElement === K && (v.preventDefault(), Z.focus()) : document.activeElement === Z && (v.preventDefault(), K.focus());
       }
     }
     N("layerboard-open-modal", Ae), N("layerboard-close-modal", le), N("layerboard-is-modal-open", j(ie)), a({
@@ -2147,7 +2165,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
       /** Set of visible layer IDs */
       visibleLayers: y,
       /** Layer opacity values */
-      layerOpacities: h,
+      layerOpacities: m,
       /** Set of currently loading layer IDs */
       loadingLayers: i,
       /** Map of layer errors by ID */
@@ -2170,7 +2188,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
       /** Set of visible tiled layer IDs */
       visibleTiledLayers: L,
       /** Tiled layer opacity values */
-      tiledLayerOpacities: S,
+      tiledLayerOpacities: C,
       /** Toggle a tiled layer's visibility */
       toggleTiledLayer: F,
       /** Set a tiled layer's visibility explicitly */
@@ -2201,7 +2219,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
       We(), Xe(), E(), document.addEventListener("keydown", ot);
     }), eo(() => {
       document.removeEventListener("keydown", ot);
-    }), (v, $) => (m(), M("div", ba, [
+    }), (v, $) => (h(), M("div", ba, [
       $[5] || ($[5] = P("a", {
         href: "#main-content",
         class: "skip-to-main-content-link"
@@ -2238,11 +2256,11 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
             decorative: ""
           }, null, 8, ["icon-definition"])
         ], 8, wa),
-        me(v.$slots, "header", {}, () => [
+        he(v.$slots, "header", {}, () => [
           P("h1", null, G(e.title), 1),
-          e.subtitle ? (m(), M("span", La, G(e.subtitle), 1)) : A("", !0)
+          e.subtitle ? (h(), M("span", La, G(e.subtitle), 1)) : A("", !0)
         ], !0),
-        ae.value ? (m(), M("div", {
+        ae.value ? (h(), M("div", {
           key: 0,
           ref_key: "mobileMenuRef",
           ref: be,
@@ -2254,7 +2272,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           onKeydown: Ve
         }, [
           P("div", Sa, [
-            me(v.$slots, "footer", {
+            he(v.$slots, "footer", {
               openModal: Ae,
               closeModal: le,
               isModalOpen: ie.value
@@ -2276,20 +2294,20 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
             }, null, 8, ["icon-definition"])
           ], 512)
         ], 36)) : A("", !0),
-        ae.value ? (m(), M("div", {
+        ae.value ? (h(), M("div", {
           key: 1,
           class: "layerboard-mobile-menu-backdrop",
           onClick: Ee
         })) : A("", !0)
       ], 4),
       P("div", Ca, [
-        u.value ? (m(), M("div", ka, [
+        u.value ? (h(), M("div", ka, [
           P("div", {
             class: "layerboard-spinner",
             style: ye({ borderTopColor: e.themeColor })
           }, null, 4),
           P("p", null, "Loading " + G(e.title) + "...", 1)
-        ])) : w.value ? (m(), M("div", xa, [
+        ])) : w.value ? (h(), M("div", xa, [
           $[3] || ($[3] = P("h2", null, "Error Loading Layers", -1)),
           P("p", null, G(w.value), 1),
           P("button", {
@@ -2297,7 +2315,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
             style: ye({ backgroundColor: e.themeColor }),
             onClick: We
           }, " Retry ", 4)
-        ])) : (m(), M(ue, { key: 2 }, [
+        ])) : (h(), M(ue, { key: 2 }, [
           P("aside", {
             id: "main-content",
             ref_key: "sidebarRef",
@@ -2307,10 +2325,10 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
             "aria-label": "Map layers",
             tabindex: "-1"
           }, [
-            me(v.$slots, "sidebar", {
+            he(v.$slots, "sidebar", {
               layers: n.value,
               visibleLayers: y.value,
-              layerOpacities: h.value,
+              layerOpacities: m.value,
               loadingLayers: i.value,
               layerErrors: g.value,
               currentZoom: p.value,
@@ -2320,7 +2338,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
               setOpacity: Fe,
               tiledLayers: e.tiledLayers,
               visibleTiledLayers: L.value,
-              tiledLayerOpacities: S.value,
+              tiledLayerOpacities: C.value,
               toggleTiledLayer: F,
               setTiledLayerVisible: V,
               setTiledLayerOpacity: T,
@@ -2329,15 +2347,15 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
               getDataSource: U,
               refetchDataSource: de
             }, () => [
-              e.showDefaultSidebar ? (m(), q(Xo, {
+              e.showDefaultSidebar ? (h(), q(Xo, {
                 key: 0,
                 "layer-list": n.value,
                 "visible-layers": y.value,
-                "layer-opacities": h.value,
+                "layer-opacities": m.value,
                 "loading-layers": i.value,
                 "layer-errors": g.value,
                 "current-zoom": p.value,
-                "search-query": C.value,
+                "search-query": S.value,
                 "layer-metadata": d.value,
                 onToggleLayer: De,
                 onSetOpacity: Fe,
@@ -2352,11 +2370,11 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           }, [
             H(uo, {
               "visible-layers": y.value,
-              "layer-opacities": h.value,
+              "layer-opacities": m.value,
               "layer-list": n.value,
               "tiled-layers": e.tiledLayers,
               "visible-tiled-layers": L.value,
-              "tiled-layer-opacities": S.value,
+              "tiled-layer-opacities": C.value,
               "cyclomedia-config": e.cyclomediaConfig,
               "pictometry-credentials": e.pictometryCredentials,
               "basemap-control-position": e.basemapControlPosition,
@@ -2395,13 +2413,13 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
         style: ye(Ue.value),
         onClick: ft
       }, [
-        Se.value === "map" ? (m(), M("span", Ma, G(e.sidebarLabel), 1)) : (m(), M("span", Pa, G(e.mapLabel), 1))
+        Se.value === "map" ? (h(), M("span", Ma, G(e.sidebarLabel), 1)) : (h(), M("span", Pa, G(e.mapLabel), 1))
       ], 4),
       P("footer", {
         class: "layerboard-footer",
         style: ye(ct.value)
       }, [
-        me(v.$slots, "footer", {
+        he(v.$slots, "footer", {
           openModal: Ae,
           closeModal: le,
           isModalOpen: ie.value
@@ -2409,7 +2427,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           $[4] || ($[4] = xe(" City of Philadelphia ", -1))
         ], !0)
       ], 4),
-      ie.value ? (m(), M("div", {
+      ie.value ? (h(), M("div", {
         key: 0,
         class: "layerboard-modal-backdrop",
         onClick: Be,
@@ -2436,7 +2454,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
               decorative: ""
             }, null, 8, ["icon-definition"])
           ], 512),
-          me(v.$slots, "modal", { closeModal: le }, void 0, !0)
+          he(v.$slots, "modal", { closeModal: le }, void 0, !0)
         ], 512)
       ], 32)) : A("", !0),
       P("span", Fa, G(Se.value === "sidebar" ? "Showing layers panel" : "Showing map"), 1)
@@ -2466,9 +2484,9 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
     function w() {
       r.value = !r.value, o("toggle", r.value);
     }
-    return (p, C) => {
+    return (p, S) => {
       const y = to("font-awesome-icon");
-      return m(), M("div", {
+      return h(), M("div", {
         class: ne(["topic-accordion", { "is-expanded": r.value }])
       }, [
         P("button", {
@@ -2479,9 +2497,9 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           "aria-controls": n,
           onClick: w
         }, [
-          e.icon || p.$slots.icon ? (m(), M("span", Ea, [
-            me(p.$slots, "icon", {}, () => [
-              e.icon ? (m(), q(y, {
+          e.icon || p.$slots.icon ? (h(), M("span", Ea, [
+            he(p.$slots, "icon", {}, () => [
+              e.icon ? (h(), q(y, {
                 key: 0,
                 icon: ["fas", e.icon],
                 "aria-hidden": "true"
@@ -2491,7 +2509,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           P("span", Oa, G(e.title), 1),
           P("span", {
             class: ne(["topic-chevron", { "is-rotated": r.value }])
-          }, [...C[0] || (C[0] = [
+          }, [...S[0] || (S[0] = [
             P("svg", {
               xmlns: "http://www.w3.org/2000/svg",
               width: "20",
@@ -2514,8 +2532,8 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           "aria-labelledby": u,
           class: "topic-content"
         }, [
-          me(p.$slots, "default", {}, () => [
-            C[1] || (C[1] = P("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
+          he(p.$slots, "default", {}, () => [
+            S[1] || (S[1] = P("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
           ], !0)
         ], 512), [
           [oo, r.value]
@@ -2557,19 +2575,19 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
     const l = e, o = a, { isVisible: r, getLayerOpacity: n, isLayerLoading: u, getLayerError: w, isLayerAvailableAtZoom: p } = Ct(
       () => l
     );
-    function C(y) {
+    function S(y) {
       o("toggleLayer", y);
     }
-    return (y, h) => (m(), M("fieldset", {
+    return (y, m) => (h(), M("fieldset", {
       class: "layer-checkbox-set",
       role: "group",
       "aria-label": e.groupLabel
     }, [
-      (m(!0), M(ue, null, Le(e.layers, (i) => (m(), M("div", {
+      (h(!0), M(ue, null, Le(e.layers, (i) => (h(), M("div", {
         key: i.id,
         class: "layer-item"
       }, [
-        f(Da)(i) ? (m(), M("label", {
+        f(Da)(i) ? (h(), M("label", {
           key: 0,
           class: ne(["layer-checkbox", {
             "layer-unavailable": !f(p)(i),
@@ -2580,7 +2598,7 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
             type: "checkbox",
             checked: f(r)(i.id),
             disabled: !f(p)(i),
-            onChange: (g) => C(i.id)
+            onChange: (g) => S(i.id)
           }, null, 40, Ra),
           P("span", Aa, [
             xe(G(f(ze)(i)) + " ", 1),
@@ -2590,7 +2608,7 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
               unavailable: !f(p)(i)
             }, null, 8, ["loading", "error", "unavailable"])
           ])
-        ], 2)) : (m(), M("div", {
+        ], 2)) : (h(), M("div", {
           key: 1,
           class: ne(["layer-label-only", {
             "layer-unavailable": !f(p)(i),
@@ -2606,20 +2624,20 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
             }, null, 8, ["loading", "error", "unavailable"])
           ])
         ], 2)),
-        f(jt)(i, e.showOpacity) && f(r)(i.id) && f(p)(i) ? (m(), q(Lt, {
+        f(jt)(i, e.showOpacity) && f(r)(i.id) && f(p)(i) ? (h(), q(Lt, {
           key: 2,
           "layer-id": i.id,
           "layer-name": f(ze)(i),
           opacity: f(n)(i.id),
           "onUpdate:opacity": (g) => o("setOpacity", i.id, g)
         }, null, 8, ["layer-id", "layer-name", "opacity", "onUpdate:opacity"])) : A("", !0),
-        f(qt)(i, e.showLegend) && f(r)(i.id) && f(p)(i) && i.legend?.length ? (m(), q(St, {
+        f(qt)(i, e.showLegend) && f(r)(i.id) && f(p)(i) && i.legend?.length ? (h(), q(St, {
           key: 3,
           items: i.legend,
           label: "Legend for " + f(ze)(i)
         }, null, 8, ["items", "label"])) : A("", !0)
       ]))), 128)),
-      e.layers.length === 0 ? (m(), M("div", Va, "No layers available")) : A("", !0)
+      e.layers.length === 0 ? (h(), M("div", Va, "No layers available")) : A("", !0)
     ], 8, _a));
   }
 }), ti = /* @__PURE__ */ $e(Za, [["__scopeId", "data-v-bfcd7855"]]), Na = ["aria-label"], Ua = ["name", "checked", "disabled", "onChange"], Wa = { class: "layer-title" }, ja = {
@@ -2644,16 +2662,16 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
     const l = e, o = a, { isVisible: r, getLayerOpacity: n, isLayerLoading: u, getLayerError: w, isLayerAvailableAtZoom: p } = Ct(
       () => l
     );
-    function C(y) {
-      const h = l.layers.filter((i) => l.visibleLayerIds.has(i.id) && i.id !== y).map((i) => i.id);
-      o("selectLayer", y, h);
+    function S(y) {
+      const m = l.layers.filter((i) => l.visibleLayerIds.has(i.id) && i.id !== y).map((i) => i.id);
+      o("selectLayer", y, m);
     }
-    return (y, h) => (m(), M("div", {
+    return (y, m) => (h(), M("div", {
       class: "layer-radio-set",
       role: "radiogroup",
       "aria-label": e.groupLabel
     }, [
-      (m(!0), M(ue, null, Le(e.layers, (i) => (m(), M("div", {
+      (h(!0), M(ue, null, Le(e.layers, (i) => (h(), M("div", {
         key: i.id,
         class: "layer-item"
       }, [
@@ -2668,7 +2686,7 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
             name: e.groupName,
             checked: f(r)(i.id),
             disabled: !f(p)(i),
-            onChange: (g) => C(i.id)
+            onChange: (g) => S(i.id)
           }, null, 40, Ua),
           P("span", Wa, [
             xe(G(f(ze)(i)) + " ", 1),
@@ -2679,37 +2697,37 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
             }, null, 8, ["loading", "error", "unavailable"])
           ])
         ], 2),
-        f(jt)(i, e.showOpacity) && f(r)(i.id) && f(p)(i) ? (m(), q(Lt, {
+        f(jt)(i, e.showOpacity) && f(r)(i.id) && f(p)(i) ? (h(), q(Lt, {
           key: 0,
           "layer-id": i.id,
           "layer-name": f(ze)(i),
           opacity: f(n)(i.id),
           "onUpdate:opacity": (g) => o("setOpacity", i.id, g)
         }, null, 8, ["layer-id", "layer-name", "opacity", "onUpdate:opacity"])) : A("", !0),
-        f(qt)(i, e.showLegend) && f(r)(i.id) && f(p)(i) && i.legend?.length ? (m(), q(St, {
+        f(qt)(i, e.showLegend) && f(r)(i.id) && f(p)(i) && i.legend?.length ? (h(), q(St, {
           key: 1,
           items: i.legend,
           label: "Legend for " + f(ze)(i)
         }, null, 8, ["items", "label"])) : A("", !0)
       ]))), 128)),
-      e.layers.length === 0 ? (m(), M("div", ja, "No layers available")) : A("", !0)
+      e.layers.length === 0 ? (h(), M("div", ja, "No layers available")) : A("", !0)
     ], 8, Na));
   }
 }), oi = /* @__PURE__ */ $e(qa, [["__scopeId", "data-v-c368d815"]]);
 function ai(e) {
-  const a = x([]), l = x(/* @__PURE__ */ new Set()), o = x({}), r = x(/* @__PURE__ */ new Set()), n = x({}), u = x(""), w = x(!1), p = x(!1), C = x(null), y = _(() => {
+  const a = x([]), l = x(/* @__PURE__ */ new Set()), o = x({}), r = x(/* @__PURE__ */ new Set()), n = x({}), u = x(""), w = x(!1), p = x(!1), S = x(null), y = _(() => {
     if (!u.value.trim())
       return a.value;
     const T = u.value.toLowerCase();
     return a.value.filter((O) => O.title.toLowerCase().includes(T));
-  }), h = _(() => a.value.map((T) => ({
+  }), m = _(() => a.value.map((T) => ({
     config: T,
     component: T.type
     // "circle", "fill", or "line"
   })));
   async function i() {
     if (!p.value) {
-      w.value = !0, C.value = null;
+      w.value = !0, S.value = null;
       try {
         let T;
         e.mode === "dynamic" || !e.mode ? e.webMapId ? T = await g(e.webMapId) : T = await wt() : T = await wt(), a.value = T;
@@ -2718,7 +2736,7 @@ function ai(e) {
           O[D.id] = D.opacity ?? 1;
         }), o.value = O, p.value = !0;
       } catch (T) {
-        C.value = T instanceof Error ? T : new Error("Failed to initialize layerboard");
+        S.value = T instanceof Error ? T : new Error("Failed to initialize layerboard");
       } finally {
         w.value = !1;
       }
@@ -2741,7 +2759,7 @@ function ai(e) {
       [T]: Math.max(0, Math.min(1, O))
     };
   }
-  function S(T) {
+  function C(T) {
     u.value = T;
   }
   function E(T, O) {
@@ -2757,7 +2775,7 @@ function ai(e) {
     }
   }
   function V() {
-    a.value = [], l.value = /* @__PURE__ */ new Set(), o.value = {}, r.value = /* @__PURE__ */ new Set(), n.value = {}, u.value = "", w.value = !1, p.value = !1, C.value = null;
+    a.value = [], l.value = /* @__PURE__ */ new Set(), o.value = {}, r.value = /* @__PURE__ */ new Set(), n.value = {}, u.value = "", w.value = !1, p.value = !1, S.value = null;
   }
   return {
     // State (readonly)
@@ -2769,17 +2787,17 @@ function ai(e) {
     searchQuery: j(u),
     isLoading: j(w),
     isInitialized: j(p),
-    error: j(C),
+    error: j(S),
     // Computed
     filteredLayerConfigs: y,
-    layerList: h,
+    layerList: m,
     // Config
     config: e,
     // Methods
     initialize: i,
     toggleLayer: d,
     setLayerOpacity: L,
-    filterLayers: S,
+    filterLayers: C,
     setLayerLoading: E,
     setLayerError: F,
     reset: V
@@ -2805,12 +2823,12 @@ function Ga(e) {
   const a = x(null), l = x(!1), o = x(null), r = x(0);
   async function n(p = {}) {
     l.value = !0, o.value = null;
-    const C = e.pageSize || 2e3;
-    let y = 0, h = [], i = !0;
+    const S = e.pageSize || 2e3;
+    let y = 0, m = [], i = !0;
     try {
       for (; i; ) {
         const d = e.url.replace(/\/$/, ""), L = encodeURIComponent(p.where || e.where || "1=1");
-        let S = `${d}/query?where=${L}&outFields=*&returnGeometry=true&resultRecordCount=${C}&resultOffset=${y}&f=geojson`;
+        let C = `${d}/query?where=${L}&outFields=*&returnGeometry=true&resultRecordCount=${S}&resultOffset=${y}&f=geojson`;
         if (p.bounds) {
           const V = JSON.stringify({
             xmin: p.bounds.west,
@@ -2819,19 +2837,19 @@ function Ga(e) {
             ymax: p.bounds.north,
             spatialReference: { wkid: 4326 }
           });
-          S += `&geometry=${encodeURIComponent(V)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
+          C += `&geometry=${encodeURIComponent(V)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
         }
-        const E = await fetch(S);
+        const E = await fetch(C);
         if (!E.ok)
           throw new Error(`HTTP ${E.status}: ${E.statusText}`);
         const F = await E.json();
-        F.features && F.features.length > 0 ? (h = h.concat(F.features), y += F.features.length, i = F.features.length === C) : i = !1;
+        F.features && F.features.length > 0 ? (m = m.concat(F.features), y += F.features.length, i = F.features.length === S) : i = !1;
       }
       const g = {
         type: "FeatureCollection",
-        features: h
+        features: m
       };
-      return a.value = g, r.value = h.length, g;
+      return a.value = g, r.value = m.length, g;
     } catch (g) {
       const d = g instanceof Error ? g : new Error("Failed to fetch features");
       throw o.value = d, d;