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

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 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 { 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 J, unref as p, withCtx as He, createBlock as G, createCommentVNode as A, Fragment as ue, renderList as Le, useAttrs as Kt, toRef as Qt, normalizeClass as ne, createElementVNode as P, toDisplayString as H, renderSlot as he, withDirectives as Zt, mergeProps as vt, vModelDynamic as Xt, createTextVNode as $e, normalizeProps as Pt, guardReactiveProps as Ft, normalizeStyle as ye, withModifiers as Yt, readonly as q, 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({
@@ -24,21 +24,21 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
   },
   emits: ["zoom", "layerLoading", "layerError"],
   setup(e, { emit: a }) {
-    const l = e, o = a, r = x(null), n = x(null), u = x(0);
+    const l = e, o = a, r = x(null), n = x(null), c = x(0);
     function w(t) {
-      o("zoom", t), n.value && (u.value = p(n.value));
+      o("zoom", t), n.value && (c.value = f(n.value));
     }
-    function p(t) {
-      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);
+    function f(t) {
+      const u = t.getZoom(), b = t.getCenter().lat, k = 559082264028e-3, I = b * Math.PI / 180;
+      return k * Math.cos(I) / Math.pow(2, u);
     }
     const S = x({}), y = x(null), m = x(/* @__PURE__ */ new Set());
-    async function i(t, c, s, b, k) {
+    async function i(t, u, s, b, k) {
       const I = encodeURIComponent(b || "1=1"), B = JSON.stringify({
-        xmin: c.west,
-        ymin: c.south,
-        xmax: c.east,
-        ymax: c.north,
+        xmin: u.west,
+        ymin: u.south,
+        xmax: u.east,
+        ymax: u.north,
         spatialReference: { wkid: 4326 }
       }), Y = k !== void 0 && k < 14 ? `&maxAllowableOffset=${360 / (Math.pow(2, k) * 512)}` : "", X = 2e3;
       let pe = 0, we = [], se = !0;
@@ -46,14 +46,14 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         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 === X) : se = !1;
+        const j = await R.json();
+        j.features && j.features.length > 0 ? (we = we.concat(j.features), pe += j.features.length, se = j.features.length === X) : se = !1;
       }
       return we = we.map((te) => {
         if (te.properties) {
           const R = {};
-          for (const W of Object.keys(te.properties))
-            R[W.toLowerCase()] = te.properties[W];
+          for (const j of Object.keys(te.properties))
+            R[j.toLowerCase()] = te.properties[j];
           return { ...te, properties: R };
         }
         return te;
@@ -62,8 +62,8 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         features: we
       };
     }
-    async function g(t, c, s) {
-      const b = c.map(async (k) => {
+    async function g(t, u, s) {
+      const b = u.map(async (k) => {
         const I = l.layerList.find((B) => B.config.id === k)?.config;
         if (I) {
           o("layerLoading", k, !0);
@@ -81,37 +81,37 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       await Promise.all(b);
     }
     function d(t) {
-      const c = new Set(t);
+      const u = new Set(t);
       for (const s of l.layerList)
-        s.config.parentId && c.has(s.config.parentId) && c.add(s.config.id);
-      return [...c];
+        s.config.parentId && u.has(s.config.parentId) && u.add(s.config.id);
+      return [...u];
     }
-    async function L(t, c) {
+    async function L(t, u) {
       const s = d([...l.visibleLayers]);
-      await g(t, s, c);
+      await g(t, s, u);
     }
     function C(t) {
       y.value = t.bounds, L(t.bounds, t.zoom);
     }
     function E(t) {
       n.value = t;
-      const c = t.getBounds();
+      const u = t.getBounds();
       y.value = {
-        west: c.getWest(),
-        south: c.getSouth(),
-        east: c.getEast(),
-        north: c.getNorth()
+        west: u.getWest(),
+        south: u.getSouth(),
+        east: u.getEast(),
+        north: u.getNorth()
       };
       const s = t.getZoom();
-      o("zoom", s), u.value = p(t), L(y.value, s);
+      o("zoom", s), c.value = f(t), L(y.value, s);
     }
     Oe(
       () => l.visibleLayers,
       async () => {
         if (re.value.length > 0 && Ie(), y.value) {
-          const t = new Set(l.visibleLayers), c = [...t].filter((b) => !m.value.has(b));
+          const t = new Set(l.visibleLayers), u = [...t].filter((b) => !m.value.has(b));
           m.value = new Set(t);
-          const s = d(c);
+          const s = d(u);
           if (s.length > 0) {
             const b = n.value?.getZoom();
             await g(y.value, s, b);
@@ -121,8 +121,8 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
     );
     function F(t) {
       if (l.visibleLayers.has(t)) return !0;
-      const c = l.layerList.find((s) => s.config.id === t)?.config;
-      return !!c?.parentId && l.visibleLayers.has(c.parentId);
+      const u = l.layerList.find((s) => s.config.id === t)?.config;
+      return !!u?.parentId && l.visibleLayers.has(u.parentId);
     }
     function V(t) {
       return !!S.value[t.id];
@@ -141,12 +141,12 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
     Oe(ee, async (t) => {
       if (t.length < 2) return;
       await Ne();
-      const c = n.value;
-      if (c)
+      const u = n.value;
+      if (u)
         for (let s = t.length - 1; s >= 0; s--) {
           const b = s < t.length - 1 ? t[s + 1].id : "highlight-lines";
           try {
-            c.getLayer(t[s].id) && c.moveLayer(t[s].id, b);
+            u.getLayer(t[s].id) && u.moveLayer(t[s].id, b);
           } catch {
           }
         }
@@ -173,7 +173,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       if (!Qe.value.has(t.id)) {
         Qe.value.add(t.id);
         try {
-          const c = t.url.replace(/\/$/, ""), s = await fetch(`${c}?f=json`);
+          const u = t.url.replace(/\/$/, ""), s = await fetch(`${u}?f=json`);
           if (!s.ok)
             return;
           const b = await s.json(), k = b.minScale || 0;
@@ -197,11 +197,11 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
     function Xe(t) {
       if (!t.scaleBasedRendering)
         return "tiled";
-      const c = Ue.value[t.id];
-      if (!c)
+      const u = Ue.value[t.id];
+      if (!u)
         return "tiled";
-      const s = u.value;
-      return s === 0 || s > c.maxScale ? "tiled" : "dynamic";
+      const s = c.value;
+      return s === 0 || s > u.maxScale ? "tiled" : "dynamic";
     }
     const ut = _(() => l.tiledLayers ? l.tiledLayers.filter((t) => U(t.id) ? t.scaleBasedRendering ? Xe(t) === "tiled" : !0 : !1) : []), De = _(() => l.tiledLayers ? l.tiledLayers.filter((t) => U(t.id) && t.scaleBasedRendering ? Xe(t) === "dynamic" : !1) : []);
     function je(t) {
@@ -212,24 +212,24 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         attribution: t.attribution || ""
       };
     }
-    function Me(t) {
+    function Pe(t) {
       return { type: "geojson", data: S.value[t.id], tolerance: 0 };
     }
     function Fe(t) {
       return l.layerOpacities[t] ?? 1;
     }
     function qe(t) {
-      const c = Fe(t.id), s = t.type === "circle" ? "circle-opacity" : t.type === "fill" ? "fill-opacity" : "line-opacity";
+      const u = Fe(t.id), s = t.type === "circle" ? "circle-opacity" : t.type === "fill" ? "fill-opacity" : "line-opacity";
       if (t.type === "fill" && t.paint["fill-opacity"] === 0)
         return { ...t.paint, "fill-opacity": 0 };
       const b = t.type === "circle" ? "circle-color" : t.type === "fill" ? "fill-color" : "line-color", k = { ...t.paint }, I = k[b], B = k[s] === 1, Y = typeof I == "string" && I.startsWith("rgba(");
       if (B && Y) {
-        if (c === 1)
+        if (u === 1)
           return k;
         {
           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;
+            const [, pe, we, se, te] = X, R = parseFloat(te) * u;
             k[b] = `rgba(${pe}, ${we}, ${se}, ${R})`, k[s] = 1;
           }
           return k;
@@ -242,33 +242,33 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
           k[b] = `rgb(${pe}, ${we}, ${se})`;
         }
       }
-      return k[s] = c, k;
+      return k[s] = u, k;
     }
     function dt(t) {
-      const c = Fe(t.id);
-      return { ...t.outlinePaint, "line-opacity": c };
+      const u = Fe(t.id);
+      return { ...t.outlinePaint, "line-opacity": u };
     }
     const re = x([]), Te = x(null), oe = x(0);
     function _e(t) {
-      const c = t.replace(/-outline$/, "");
-      return l.layerList.find((b) => b.config.id === c)?.config;
+      const u = t.replace(/-outline$/, "");
+      return l.layerList.find((b) => b.config.id === u)?.config;
     }
-    function Ye(t, c) {
+    function Ye(t, u) {
       return t.replace(/\{([^}]+)\}/g, (s, b) => {
-        const k = c[b];
+        const k = u[b];
         return k == null ? "" : String(k);
       });
     }
     function be(t) {
       return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
     }
-    function Ge(t, c, s) {
+    function Ge(t, u, s) {
       if (t == null) return "-";
-      if (c?.dateFormat && typeof t == "number") {
+      if (u?.dateFormat && typeof t == "number") {
         const b = new Date(t);
-        if (s && c.dateFormat === "shortDateShortTime")
+        if (s && u.dateFormat === "shortDateShortTime")
           return b.toLocaleString(void 0, { dateStyle: "short", timeStyle: "short" });
-        switch (c.dateFormat) {
+        switch (u.dateFormat) {
           case "shortDateShortTime":
             return b.toLocaleDateString();
           case "longMonthDayYear":
@@ -282,9 +282,9 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         }
       }
       if (typeof t == "number") {
-        if (t > 1e12 && !c)
+        if (t > 1e12 && !u)
           return new Date(t).toLocaleDateString();
-        const b = c?.places, k = c?.digitSeparator ?? !0;
+        const b = u?.places, k = u?.digitSeparator ?? !0;
         if (b !== void 0) {
           if (Number.isInteger(t) && b >= 0)
             return String(t);
@@ -300,16 +300,16 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       return String(t);
     }
     function et(t) {
-      const c = /* @__PURE__ */ new Set();
+      const u = /* @__PURE__ */ new Set();
       return t.filter((s) => {
         const k = `${s.layer.id.replace(/-outline$/, "")}:${JSON.stringify(s.properties)}`;
-        return c.has(k) ? !1 : (c.add(k), !0);
+        return u.has(k) ? !1 : (u.add(k), !0);
       });
     }
-    function Se(t, c) {
+    function Se(t, u) {
       const s = S.value[t];
       if (!s?.features) return null;
-      const b = c.objectid ?? c.OBJECTID ?? c.FID;
+      const b = u.objectid ?? u.OBJECTID ?? u.FID;
       if (b != null) {
         const k = s.features.find(
           (I) => (I.properties?.objectid ?? I.properties?.OBJECTID ?? I.properties?.FID) === b
@@ -318,9 +318,9 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       }
       return null;
     }
-    function ft(t, c) {
+    function ft(t, u) {
       const s = /* @__PURE__ */ new Map();
-      return c.forEach((b, k) => {
+      return u.forEach((b, k) => {
         s.set(b.id, k);
       }), t.sort((b, k) => {
         const I = b.layer.id.replace(/-outline$/, ""), B = k.layer.id.replace(/-outline$/, ""), Y = s.get(I) ?? -1;
@@ -328,24 +328,24 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       });
     }
     function ae(t) {
-      const c = n.value;
-      if (!c) return;
+      const u = n.value;
+      if (!u) return;
       const s = [];
       l.layerList.forEach((R) => {
-        const W = R.config;
-        F(W.id) && (s.push(W.id), W.outlinePaint && s.push(`${W.id}-outline`));
+        const j = R.config;
+        F(j.id) && (s.push(j.id), j.outlinePaint && s.push(`${j.id}-outline`));
       });
-      const b = s.filter((R) => c.getLayer(R));
+      const b = s.filter((R) => u.getLayer(R));
       if (b.length === 0) return;
-      const k = c.project([t.lngLat.lng, t.lngLat.lat]), I = 10, B = [
+      const k = u.project([t.lngLat.lng, t.lngLat.lat]), I = 10, B = [
         [k.x - I, k.y - I],
         [k.x + I, k.y + I]
-      ], Y = c.queryRenderedFeatures(B, {
+      ], Y = u.queryRenderedFeatures(B, {
         layers: b
       });
       if (Y.length === 0) return;
       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);
+        const j = R.layer.id.replace(/-outline$/, ""), ce = _e(j);
         if (!ce) return null;
         const yt = Se(ce.id, R.properties || {});
         return {
@@ -357,10 +357,10 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         };
       }).filter((R) => R !== null);
       if (se.length === 0) return;
-      se.sort((R, W) => {
-        const ce = R.popupConfig?.popupSortField, yt = W.popupConfig?.popupSortField;
+      se.sort((R, j) => {
+        const ce = R.popupConfig?.popupSortField, yt = j.popupConfig?.popupSortField;
         if (!ce || ce !== yt) return 0;
-        const ht = R.properties[ce], mt = W.properties[ce];
+        const ht = R.properties[ce], mt = j.properties[ce];
         if (ht == null || mt == null) return 0;
         const Mt = R.popupConfig?.popupSortOrder !== "asc";
         return ht < mt ? Mt ? 1 : -1 : ht > mt ? Mt ? -1 : 1 : 0;
@@ -369,10 +369,10 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       if (te) {
         const R = _e(te.layerId);
         if (R) {
-          const W = K(te.geometry), ce = Z(R.id, R.type);
+          const j = K(te.geometry), ce = Z(R.id, R.type);
           $.value = {
             geometry: te.geometry,
-            geometryType: W,
+            geometryType: j,
             layerId: R.id,
             properties: te.properties,
             originalStyle: ce
@@ -385,8 +385,8 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
     }
     function Ee(t) {
       if (re.value.length === 0) return;
-      const c = t.target;
-      if (!(c.tagName === "INPUT" || c.tagName === "TEXTAREA" || c.isContentEditable))
+      const u = t.target;
+      if (!(u.tagName === "INPUT" || u.tagName === "TEXTAREA" || u.isContentEditable))
         switch (t.key) {
           case "ArrowLeft":
           case "ArrowUp":
@@ -419,16 +419,16 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
     }), Ae = _(() => {
       const t = ie.value;
       if (!t) return "";
-      let c = '<div class="popup-content">';
-      if (c += `<h3 class="popup-title">${be(Re.value)}</h3>`, t.popupConfig?.fields?.length) {
-        c += `<table class="popup-table" aria-label="${be(Re.value)}">`;
+      let u = '<div class="popup-content">';
+      if (u += `<h3 class="popup-title">${be(Re.value)}</h3>`, t.popupConfig?.fields?.length) {
+        u += `<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}`, 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>`;
+          u += `<tr><th scope="row">${be(s.label)}</th><td>${X}</td></tr>`;
         }
-        c += "</table>";
+        u += "</table>";
       }
-      return c += "</div>", c;
+      return u += "</div>", u;
     }), le = x({
       type: "FeatureCollection",
       features: []
@@ -455,15 +455,15 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
     function K(t) {
       return t.type;
     }
-    function Z(t, c) {
+    function Z(t, u) {
       const s = _e(t);
       if (!s) return { radius: 5, width: 2 };
       const b = s.paint || {};
-      if (c === "circle") {
+      if (u === "circle") {
         const k = b["circle-radius"];
         return typeof k == "number" ? { radius: k } : { radius: 5 };
       }
-      if (c === "line" || c === "fill") {
+      if (u === "line" || u === "fill") {
         const k = b["line-width"];
         if (typeof k == "number")
           return { width: k };
@@ -480,7 +480,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       return !t || t.length === 0 ? [] : t[0] ?? [];
     }
     function Ce(t) {
-      const { geometry: c, geometryType: s, originalStyle: b } = t;
+      const { geometry: u, geometryType: s, originalStyle: b } = t;
       if (s === "Point" || s === "MultiPoint") {
         const I = (b.radius || 5) + 3;
         return {
@@ -488,7 +488,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
           features: [
             {
               type: "Feature",
-              geometry: c,
+              geometry: u,
               properties: {
                 highlightRadius: I
               }
@@ -503,7 +503,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
           features: [
             {
               type: "Feature",
-              geometry: c,
+              geometry: u,
               properties: {
                 highlightWidth: I
               }
@@ -512,7 +512,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         };
       }
       if (s === "Polygon") {
-        const k = c.coordinates, I = Q(k), Y = (b.width || 2) + 3;
+        const k = u.coordinates, I = Q(k), Y = (b.width || 2) + 3;
         return {
           type: "FeatureCollection",
           features: [
@@ -530,7 +530,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         };
       }
       if (s === "MultiPolygon") {
-        const k = c.coordinates, B = (b.width || 2) + 3;
+        const k = u.coordinates, B = (b.width || 2) + 3;
         return {
           type: "FeatureCollection",
           features: k.map((X) => ({
@@ -551,10 +551,10 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       };
     }
     function Ze(t) {
-      const { geometry: c, geometryType: s } = t;
+      const { geometry: u, geometryType: s } = t;
       return s === "Polygon" || s === "MultiPolygon" ? {
         type: "FeatureCollection",
-        features: [{ type: "Feature", geometry: c, properties: {} }]
+        features: [{ type: "Feature", geometry: u, properties: {} }]
       } : { type: "FeatureCollection", features: [] };
     }
     function Gt(t) {
@@ -562,8 +562,8 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         Ht();
         return;
       }
-      const c = Ce(t);
-      t.geometryType === "Point" || t.geometryType === "MultiPoint" ? (le.value = c, Be.value = { type: "FeatureCollection", features: [] }, Ve.value = { type: "FeatureCollection", features: [] }) : (Be.value = c, le.value = { type: "FeatureCollection", features: [] }, Ve.value = Ze(t));
+      const u = Ce(t);
+      t.geometryType === "Point" || t.geometryType === "MultiPoint" ? (le.value = u, Be.value = { type: "FeatureCollection", features: [] }, Ve.value = { type: "FeatureCollection", features: [] }) : (Be.value = u, le.value = { type: "FeatureCollection", features: [] }, Ve.value = Ze(t));
     }
     function Ht() {
       le.value = { type: "FeatureCollection", features: [] }, Be.value = { type: "FeatureCollection", features: [] }, Ve.value = { type: "FeatureCollection", features: [] };
@@ -582,13 +582,13 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         $.value = null;
         return;
       }
-      const c = _e(t.layerId);
-      if (c) {
-        const s = K(t.geometry), b = Z(c.id, c.type);
+      const u = _e(t.layerId);
+      if (u) {
+        const s = K(t.geometry), b = Z(u.id, u.type);
         $.value = {
           geometry: t.geometry,
           geometryType: s,
-          layerId: c.id,
+          layerId: u.id,
           properties: t.properties,
           originalStyle: b
         };
@@ -596,11 +596,11 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
     });
     const $t = x(null);
     function Jt(t) {
-      const [c, s] = t.geometry.coordinates;
-      $t.value = [c, s];
+      const [u, s] = t.geometry.coordinates;
+      $t.value = [u, s];
     }
-    return (t, c) => (h(), M("div", so, [
-      H(f(ao), {
+    return (t, u) => (h(), M("div", so, [
+      J(p(ao), {
         ref_key: "mapRef",
         ref: r,
         zoom: l.initialZoom,
@@ -624,11 +624,11 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
         onSearchResult: Jt
       }, {
         default: He(() => [
-          l.drawControlPosition !== null ? (h(), q(f(io), {
+          l.drawControlPosition !== null ? (h(), G(p(io), {
             key: 0,
             position: l.drawControlPosition
           }, null, 8, ["position"])) : A("", !0),
-          (h(!0), M(ue, null, Le(ut.value, (s) => (h(), q(f(It), {
+          (h(!0), M(ue, null, Le(ut.value, (s) => (h(), G(p(It), {
             id: "tiled-" + s.id,
             key: "tiled-" + s.id,
             source: ct(s),
@@ -637,7 +637,7 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
             maxzoom: s.maxZoom,
             "before-id": "highlight-circles"
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (h(!0), M(ue, null, Le(De.value, (s) => (h(), q(f(It), {
+          (h(!0), M(ue, null, Le(De.value, (s) => (h(), G(p(It), {
             id: "dynamic-" + s.id,
             key: "dynamic-" + s.id,
             source: je(s),
@@ -646,69 +646,69 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
             maxzoom: s.maxZoom,
             "before-id": "highlight-circles"
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (h(!0), M(ue, null, Le(T.value, (s) => (h(), q(f(Et), {
+          (h(!0), M(ue, null, Le(T.value, (s) => (h(), G(p(Et), {
             id: s.id,
             key: s.id,
-            source: Me(s),
+            source: Pe(s),
             paint: qe(s),
             minzoom: s.minZoom,
             maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
             onClick: ae
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (h(!0), M(ue, null, Le(O.value, (s) => (h(), q(f(Ot), {
+          (h(!0), M(ue, null, Le(O.value, (s) => (h(), G(p(Ot), {
             id: s.id,
             key: s.id,
-            source: Me(s),
+            source: Pe(s),
             paint: qe(s),
             minzoom: s.minZoom,
             maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
             onClick: ae
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (h(!0), M(ue, null, Le(D.value, (s) => (h(), q(f(gt), {
+          (h(!0), M(ue, null, Le(D.value, (s) => (h(), G(p(gt), {
             id: s.id + "-outline",
             key: s.id + "-outline",
-            source: Me(s),
+            source: Pe(s),
             paint: dt(s),
             minzoom: s.minZoom,
             maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
             onClick: ae
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (h(!0), M(ue, null, Le(ee.value, (s) => (h(), q(f(gt), {
+          (h(!0), M(ue, null, Le(ee.value, (s) => (h(), G(p(gt), {
             id: s.id,
             key: s.id,
-            source: Me(s),
+            source: Pe(s),
             paint: qe(s),
             minzoom: s.minZoom,
             maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
             onClick: ae
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          H(f(Et), {
+          J(p(Et), {
             id: "highlight-circles",
             key: "highlight-circles-layer",
             source: { type: "geojson", data: le.value },
             paint: pt
           }, null, 8, ["source"]),
-          H(f(Ot), {
+          J(p(Ot), {
             id: "highlight-fill",
             key: "highlight-fill-layer",
             source: { type: "geojson", data: Ve.value },
             paint: v
           }, null, 8, ["source"]),
-          H(f(gt), {
+          J(p(gt), {
             id: "highlight-lines",
             key: "highlight-lines-layer",
             source: { type: "geojson", data: Be.value },
             paint: ot
           }, null, 8, ["source"]),
-          H(f(lo), {
+          J(p(lo), {
             "lng-lat": $t.value,
             color: "#2176d2"
           }, null, 8, ["lng-lat"]),
-          ie.value && Te.value ? (h(), q(f(no), {
+          ie.value && Te.value ? (h(), G(p(no), {
             key: 1,
             "lng-lat": Te.value,
             html: Ae.value,
@@ -727,12 +727,12 @@ const so = { class: "map-panel" }, co = /* @__PURE__ */ ge({
       }, 8, ["zoom", "center", "navigation-controls", "geolocation-control", "basemap-change-controls", "map-search-control", "cyclomedia-config", "cyclomedia-button-position", "pictometry-credentials", "pictometry-button-position"])
     ]));
   }
-}), $e = (e, a) => {
+}), Me = (e, a) => {
   const l = e.__vccOpts || e;
   for (const [o, r] of a)
     l[o] = r;
   return l;
-}, uo = /* @__PURE__ */ $e(co, [["__scopeId", "data-v-1f8b1f59"]]);
+}, uo = /* @__PURE__ */ Me(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();
@@ -759,7 +759,7 @@ const fo = ["disabled"], po = /* @__PURE__ */ ge({
     svgRaw: {}
   },
   setup(e) {
-    const a = e, l = (u) => "href" in u && u.href !== void 0 || "to" in u && u.to !== void 0, o = _(() => bt(
+    const a = e, l = (c) => "href" in c && c.href !== void 0 || "to" in c && c.to !== void 0, o = _(() => bt(
       "phila-button",
       `phila-button--${a.variant}`,
       a.size && `is-${a.size}`,
@@ -787,12 +787,12 @@ const fo = ["disabled"], po = /* @__PURE__ */ ge({
         size: a.size
       })
     );
-    return (u, w) => l(a) ? (h(), q(f(ro), vt({ key: 0 }, { ...r.value, ...u.$attrs }, { role: "button" }), {
+    return (c, w) => l(a) ? (h(), G(p(ro), vt({ key: 0 }, { ...r.value, ...c.$attrs }, { role: "button" }), {
       default: He(() => [
-        H(f(zt), Pt(Ft(n.value)), {
+        J(p(zt), Pt(Ft(n.value)), {
           default: He(() => [
-            he(u.$slots, "default", {}, () => [
-              xe(G(a.text), 1)
+            he(c.$slots, "default", {}, () => [
+              $e(H(a.text), 1)
             ])
           ]),
           _: 3
@@ -804,11 +804,11 @@ const fo = ["disabled"], po = /* @__PURE__ */ ge({
       type: "button",
       disabled: a.disabled,
       class: o.value
-    }, u.$attrs), [
-      H(f(zt), Pt(Ft(n.value)), {
+    }, c.$attrs), [
+      J(p(zt), Pt(Ft(n.value)), {
         default: He(() => [
-          he(u.$slots, "default", {}, () => [
-            xe(G(a.text), 1)
+          he(c.$slots, "default", {}, () => [
+            $e(H(a.text), 1)
           ])
         ]),
         _: 3
@@ -849,17 +849,17 @@ const vo = ["for"], bo = { class: "state-layer" }, wo = { class: "content" }, Lo
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const l = Kt(), o = e, r = _(() => typeof o.error == "string" ? o.error : o.error[0]), n = Qt(o, "id"), u = a, w = x(""), p = _({
+    const l = Kt(), o = e, r = _(() => typeof o.error == "string" ? o.error : o.error[0]), n = Qt(o, "id"), c = a, w = x(""), f = _({
       get: () => o.modelValue !== void 0 ? o.modelValue : w.value,
       set: (d) => {
-        u("update:modelValue", d), w.value = d;
+        c("update:modelValue", d), w.value = d;
       }
     }), 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);
+      return f.value !== "" && d.push("phila-text-field--filled"), o.className && d.push(o.className), bt(...d);
     }), m = _(() => {
       if (!(o.label || l["aria-label"]))
         return o.placeholder || void 0;
@@ -873,13 +873,13 @@ const vo = ["for"], bo = { class: "state-layer" }, wo = { class: "content" }, Lo
         key: 0,
         for: n.value,
         class: "has-text-label-small phila-label"
-      }, G(o.label), 9, vo)) : A("", !0),
+      }, H(o.label), 9, vo)) : A("", !0),
       P("div", {
         class: ne(["phila-text-field", y.value]),
         onClick: g
       }, [
         P("div", bo, [
-          o.leadingIcon ? (h(), q(f(ke), {
+          o.leadingIcon ? (h(), G(p(ke), {
             key: 0,
             "icon-class": o.leadingIcon,
             inline: "",
@@ -891,24 +891,24 @@ 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] = (C) => p.value = C),
+                "onUpdate:modelValue": L[0] || (L[0] = (C) => f.value = C),
                 class: "phila-text-field-input has-text-body-default",
                 placeholder: o.placeholder,
                 "aria-label": m.value
-              }, f(l)), null, 16, So), [
-                [Xt, p.value]
+              }, p(l)), null, 16, So), [
+                [Xt, f.value]
               ])
             ])
           ]),
-          p.value != "" ? (h(), q(f(po), {
+          f.value != "" ? (h(), G(p(po), {
             key: 1,
             variant: "standard",
             size: "small",
             "icon-only": "",
-            "icon-definition": f(go),
-            onClick: L[1] || (L[1] = (C) => p.value = "")
+            "icon-definition": p(go),
+            onClick: L[1] || (L[1] = (C) => f.value = "")
           }, null, 8, ["icon-definition"])) : A("", !0),
-          o.trailingIcon ? (h(), q(f(ke), {
+          o.trailingIcon ? (h(), G(p(ke), {
             key: 2,
             size: "small",
             "icon-class": o.trailingIcon,
@@ -918,15 +918,15 @@ const vo = ["for"], bo = { class: "state-layer" }, wo = { class: "content" }, Lo
           he(d.$slots, "trailing-action")
         ])
       ], 2),
-      o.supportingText ? (h(), M("div", Co, G(o.supportingText), 1)) : A("", !0),
+      o.supportingText ? (h(), M("div", Co, H(o.supportingText), 1)) : A("", !0),
       r.value ? (h(), M("div", ko, [
-        H(f(ke), {
-          "icon-definition": f(ho),
+        J(p(ke), {
+          "icon-definition": p(ho),
           size: "small",
           inline: "",
           decorative: ""
         }, null, 8, ["icon-definition"]),
-        xe(" " + G(r.value), 1)
+        $e(" " + H(r.value), 1)
       ])) : A("", !0)
     ], 2));
   }
@@ -982,7 +982,7 @@ const Io = {
       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({
+}), nt = /* @__PURE__ */ Me(zo, [["__scopeId", "data-v-19b1b402"]]), Do = { class: "opacity-control" }, _o = ["for"], Ro = ["id", "value", "aria-label"], Ao = /* @__PURE__ */ ge({
   __name: "LayerOpacitySlider",
   props: {
     layerId: {},
@@ -1000,7 +1000,7 @@ const Io = {
       P("label", {
         class: "opacity-label",
         for: "opacity-" + e.layerId
-      }, " Opacity: " + G(Math.round(e.opacity * 100)) + "% ", 9, _o),
+      }, " Opacity: " + H(Math.round(e.opacity * 100)) + "% ", 9, _o),
       P("input", {
         id: "opacity-" + e.layerId,
         type: "range",
@@ -1014,7 +1014,7 @@ const Io = {
       }, null, 40, Ro)
     ]));
   }
-}), Lt = /* @__PURE__ */ $e(Ao, [["__scopeId", "data-v-1a025f6a"]]), Bo = ["aria-label"], Vo = {
+}), Lt = /* @__PURE__ */ Me(Ao, [["__scopeId", "data-v-1a025f6a"]]), Bo = ["aria-label"], Vo = {
   key: 3,
   class: "legend-label"
 }, Zo = /* @__PURE__ */ ge({
@@ -1048,30 +1048,34 @@ const Io = {
         }, null, 4)) : o.type === "fill" ? (h(), M("span", {
           key: 2,
           class: "legend-symbol legend-fill",
-          style: ye({ backgroundColor: o.color }),
+          style: ye({
+            backgroundColor: o.color,
+            borderColor: o.outlineColor || "#666",
+            borderWidth: o.outlineColor ? `${Math.max(o.outlineWidth || 2, 2)}px` : void 0
+          }),
           "aria-hidden": "true"
         }, null, 4)) : A("", !0),
-        e.items.length > 1 ? (h(), M("span", Vo, G(o.label), 1)) : A("", !0)
+        e.items.length > 1 ? (h(), M("span", Vo, H(o.label), 1)) : A("", !0)
       ]))), 128))
     ], 8, Bo));
   }
-}), St = /* @__PURE__ */ $e(Zo, [["__scopeId", "data-v-bbb1a784"]]);
+}), St = /* @__PURE__ */ Me(Zo, [["__scopeId", "data-v-3a9206ab"]]);
 function Ct(e) {
-  function a(u) {
-    return e().visibleLayerIds.has(u);
+  function a(c) {
+    return e().visibleLayerIds.has(c);
   }
-  function l(u) {
-    return e().layerOpacities[u] ?? 1;
+  function l(c) {
+    return e().layerOpacities[c] ?? 1;
   }
-  function o(u) {
-    return e().loadingLayerIds.has(u);
+  function o(c) {
+    return e().loadingLayerIds.has(c);
   }
-  function r(u) {
-    return e().layerErrors[u] || null;
+  function r(c) {
+    return e().layerErrors[c] || null;
   }
-  function n(u) {
-    const w = e().currentZoom, p = u.minZoom, S = u.maxZoom;
-    return !(p !== void 0 && w < p || S !== void 0 && w > S);
+  function n(c) {
+    const w = e().currentZoom, f = c.minZoom, S = c.maxZoom;
+    return !(f !== void 0 && w < f || S !== void 0 && w > S);
   }
   return { isVisible: a, getLayerOpacity: l, isLayerLoading: o, getLayerError: r, isLayerAvailableAtZoom: n };
 }
@@ -1116,7 +1120,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: S, getLayerError: y, isLayerAvailableAtZoom: m } = Ct(() => ({
+    const c = _(() => l.layerList.some((d) => n(d.config.url))), { isVisible: w, getLayerOpacity: f, isLayerLoading: S, getLayerError: y, isLayerAvailableAtZoom: m } = Ct(() => ({
       visibleLayerIds: l.visibleLayers,
       layerOpacities: l.layerOpacities,
       loadingLayerIds: l.loadingLayers,
@@ -1131,15 +1135,15 @@ const No = { class: "layer-panel" }, Uo = {
     }
     return (d, L) => (h(), M("div", No, [
       e.showSearch ? (h(), M("div", Uo, [
-        H(f(xo), {
+        J(p(xo), {
           modelValue: i.value,
           "onUpdate:modelValue": L[0] || (L[0] = (C) => i.value = C),
           placeholder: e.searchPlaceholder,
           "class-name": "layer-search-field"
         }, {
           "trailing-action": He(() => [
-            H(f(ke), {
-              "icon-definition": f($o),
+            J(p(ke), {
+              "icon-definition": p($o),
               size: "small",
               inline: "",
               decorative: ""
@@ -1154,7 +1158,7 @@ const No = { class: "layer-panel" }, Uo = {
         ], !0)
       ])) : (h(), M("div", {
         key: 2,
-        class: ne(["layer-list", { "has-metadata": u.value }])
+        class: ne(["layer-list", { "has-metadata": c.value }])
       }, [
         (h(!0), M(ue, null, Le(r.value, (C) => (h(), M("div", {
           key: C.config.id,
@@ -1171,53 +1175,53 @@ const No = { class: "layer-panel" }, Uo = {
               onClick: L[1] || (L[1] = Yt(() => {
               }, ["stop"]))
             }, [
-              H(f(ke), {
-                "icon-definition": f(To),
+              J(p(ke), {
+                "icon-definition": p(To),
                 size: "small",
                 inline: "",
                 decorative: ""
               }, null, 8, ["icon-definition"])
-            ], 8, qo)) : u.value ? (h(), M("span", Go)) : A("", !0),
+            ], 8, qo)) : c.value ? (h(), M("span", Go)) : A("", !0),
             P("label", {
               class: ne(["layer-checkbox", {
-                "layer-unavailable": !f(m)(C.config),
-                "layer-error": f(y)(C.config.id)
+                "layer-unavailable": !p(m)(C.config),
+                "layer-error": p(y)(C.config.id)
               }])
             }, [
               P("input", {
                 type: "checkbox",
-                checked: f(w)(C.config.id),
-                disabled: !f(m)(C.config),
+                checked: p(w)(C.config.id),
+                disabled: !p(m)(C.config),
                 onChange: (E) => g(C.config.id)
               }, null, 40, Ho),
               P("span", Jo, [
-                xe(G(C.config.title) + " ", 1),
-                H(nt, {
-                  loading: f(S)(C.config.id),
-                  error: f(y)(C.config.id),
-                  unavailable: !f(m)(C.config)
+                $e(H(C.config.title) + " ", 1),
+                J(nt, {
+                  loading: p(S)(C.config.id),
+                  error: p(y)(C.config.id),
+                  unavailable: !p(m)(C.config)
                 }, null, 8, ["loading", "error", "unavailable"])
               ])
             ], 2)
           ]),
-          e.showOpacity && f(w)(C.config.id) && f(m)(C.config) ? (h(), q(Lt, {
+          e.showOpacity && p(w)(C.config.id) && p(m)(C.config) ? (h(), G(Lt, {
             key: 0,
             "layer-id": C.config.id,
             "layer-name": C.config.title,
-            opacity: f(p)(C.config.id),
+            opacity: p(f)(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)(C.config.id) && f(m)(C.config) && C.config.legend?.length ? (h(), q(St, {
+          e.showLegend && p(w)(C.config.id) && p(m)(C.config) && C.config.legend?.length ? (h(), G(St, {
             key: 1,
             items: C.config.legend,
             label: "Legend for " + C.config.title
           }, null, 8, ["items", "label"])) : A("", !0)
         ]))), 128)),
-        r.value.length === 0 ? (h(), M("div", Ko, 'No layers match "' + G(e.searchQuery) + '"', 1)) : A("", !0)
+        r.value.length === 0 ? (h(), M("div", Ko, 'No layers match "' + H(e.searchQuery) + '"', 1)) : A("", !0)
       ], 2))
     ]));
   }
-}), Xo = /* @__PURE__ */ $e(Qo, [["__scopeId", "data-v-e48bb978"]]), Yo = {
+}), Xo = /* @__PURE__ */ Me(Qo, [["__scopeId", "data-v-e48bb978"]]), Yo = {
   esriSLSSolid: null,
   esriSLSDash: [6, 1.5],
   esriSLSDot: [1, 1.5],
@@ -1231,10 +1235,10 @@ function Ke(e) {
 }
 function ea(e, a, l, o, r) {
   const n = [];
-  let u = a[0], w = [e[0]], p = 0;
+  let c = a[0], w = [e[0]], f = 0;
   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 });
+    a[i] === c ? w.push(e[i]) : (n.push({ style: c, breaks: w, startIndex: f }), c = a[i], w = [e[i]], f = i);
+  n.push({ style: c, breaks: w, startIndex: f });
   const S = [], y = /* @__PURE__ */ new Set();
   let m = o.minValue ?? 0;
   for (let i = 0; i < n.length; i++) {
@@ -1246,12 +1250,12 @@ function ea(e, a, l, o, 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"] = J(d[0].symbol?.width || 2);
+      T["line-color"] = z(d[0].symbol?.color), T["line-width"] = W(d[0].symbol?.width || 2);
     else {
       const U = ["step", ["get", l]], de = ["step", ["get", l]];
-      U.push(z(d[0].symbol?.color)), de.push(J(d[0].symbol?.width || 2));
+      U.push(z(d[0].symbol?.color)), de.push(W(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(J(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(W(d[ve].symbol?.width || 2));
       T["line-color"] = U, T["line-width"] = de;
     }
     const O = [];
@@ -1259,7 +1263,7 @@ function ea(e, a, l, o, r) {
       O.push({
         type: "line",
         color: z(U.symbol?.color),
-        width: J(U.symbol?.width || 2),
+        width: W(U.symbol?.width || 2),
         label: U.label || `${m} - ${U.classMaxValue}`
       }), m = U.classMaxValue + 1;
     const D = g.style.replace("esriSLS", "").toLowerCase();
@@ -1274,19 +1278,19 @@ function ta(e, a, l, o, r) {
     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;
+  const c = [], w = /* @__PURE__ */ new Set();
+  let f = !0;
   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 (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);
+      d["line-color"] = z(y[0].symbol?.color), d["line-width"] = W(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"] = J(y[0].symbol?.width || 2);
+      F.push(l ? z(l.color) : "rgba(0, 0, 0, 0)"), d["line-color"] = F, d["line-width"] = W(y[0].symbol?.width || 2);
     }
     const L = [];
     for (const F of y) {
@@ -1294,15 +1298,15 @@ function ta(e, a, l, o, r) {
       L.push({
         type: "line",
         color: z(F.symbol?.color),
-        width: J(F.symbol?.width || 1),
+        width: W(F.symbol?.width || 1),
         label: O
       });
     }
     const C = S.replace("esriSLS", "").toLowerCase();
     let E;
-    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 });
+    f ? E = "" : w.has(C) ? E = `-${C}-${c.length}` : E = `-${C}`, w.add(C), f = !1, c.push({ suffix: E, where: g, paint: d, legend: L });
   }
-  return u;
+  return c;
 }
 function z(e) {
   if (!e || !Array.isArray(e) || e.length < 3) return "#888888";
@@ -1312,7 +1316,7 @@ function z(e) {
 function me(e) {
   return e !== void 0 ? e : 1;
 }
-function J(e) {
+function W(e) {
   return Math.round(e * (96 / 72) * 10) / 10;
 }
 const oa = 559082264;
@@ -1348,7 +1352,7 @@ function st(e) {
       return "fill";
   }
 }
-function Pe(e) {
+function xe(e) {
   return !(!e || e.style === "esriSLSNull" || e.color === null || e.width === 0 || e.color && e.color[3] === 0);
 }
 function it(e) {
@@ -1356,20 +1360,28 @@ function it(e) {
 }
 function Ut(e, a, l) {
   const o = e.symbol, r = st(o);
-  let n = {}, u = [], w = null;
+  let n = {}, c = [], w = null;
   if (r === "fill" && o) {
-    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);
+    const f = o.color === null ? 0 : o.color?.[3] ?? 255, S = f === 0 ? "rgba(0, 0, 0, 0)" : z(o.color), y = f === 0 ? 0 : f < 255 ? 1 : me(a);
     if (n = {
       "fill-color": S,
       "fill-opacity": y
-    }, Pe(o.outline)) {
-      const m = J(o.outline.width || 1);
+    }, xe(o.outline)) {
+      const m = W(o.outline.width || 1);
       w = {
         "line-color": z(o.outline.color),
         "line-width": m
       };
     }
-    u = [
+    f === 0 && xe(o.outline) ? c = [
+      {
+        type: "fill",
+        color: "transparent",
+        outlineColor: z(o.outline.color),
+        outlineWidth: W(o.outline.width || 1),
+        label: e.label || "Feature"
+      }
+    ] : c = [
       {
         type: "fill",
         color: z(o.color),
@@ -1379,25 +1391,25 @@ function Ut(e, a, l) {
   } else if (r === "line" && o) {
     n = {
       "line-color": z(o.color),
-      "line-width": J(o.width || 1),
+      "line-width": W(o.width || 1),
       "line-opacity": me(a)
     };
-    const p = Ke(o.style);
-    p && (n["line-dasharray"] = p), u = [
+    const f = Ke(o.style);
+    f && (n["line-dasharray"] = f), c = [
       {
         type: "line",
         color: z(o.color),
-        width: J(o.width || 1),
+        width: W(o.width || 1),
         label: e.label || "Feature"
       }
     ];
   } else if (r === "circle" && o) {
-    const p = Math.round((o.size || 6) * 0.71 * 100) / 100;
+    const f = Math.round((o.size || 6) * 0.71 * 100) / 100;
     n = {
       "circle-color": z(o.color),
-      "circle-radius": p,
+      "circle-radius": f,
       "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 = [
+    }, xe(o.outline) && (n["circle-stroke-color"] = z(o.outline.color), n["circle-stroke-width"] = W(o.outline.width || 1)), c = [
       {
         type: "circle",
         color: z(o.color),
@@ -1405,14 +1417,14 @@ function Ut(e, a, l) {
       }
     ];
   }
-  return { paint: n, legend: u, geomType: r, outlinePaint: w };
+  return { paint: n, legend: c, geomType: r, outlinePaint: w };
 }
 function ia(e, a, l) {
   const o = e.field1.toLowerCase(), r = e.uniqueValueInfos || [], n = e.defaultSymbol;
   if (r.length === 0)
     return Ut({ ...e, symbol: n }, a);
-  const u = r[0]?.symbol || n, w = st(u);
-  let p = {};
+  const c = r[0]?.symbol || n, w = st(c);
+  let f = {};
   const S = [];
   let y = null;
   if (w === "fill") {
@@ -1430,13 +1442,13 @@ function ia(e, a, l) {
       type: "fill",
       color: z(n.color),
       label: e.defaultLabel || "Other"
-    }), p = {
+    }), f = {
       "fill-color": m,
       "fill-opacity": me(a)
-    }, Pe(u?.outline)) {
-      const i = J(Math.max(u.outline.width || 1, 1));
+    }, xe(c?.outline)) {
+      const i = W(Math.max(c.outline.width || 1, 1));
       y = {
-        "line-color": z(u.outline.color),
+        "line-color": z(c.outline.color),
         "line-width": i
       };
     }
@@ -1448,18 +1460,18 @@ function ia(e, a, l) {
       S.push({
         type: "line",
         color: z(d.symbol?.color),
-        width: J(d.symbol?.width || 1),
+        width: W(d.symbol?.width || 1),
         label: E
       });
     }
     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),
+      width: W(n.width || 1),
       label: e.defaultLabel || "Other"
-    }), p = {
+    }), f = {
       "line-color": m,
-      "line-width": J(u?.width || 2),
+      "line-width": W(c?.width || 2),
       "line-opacity": me(a)
     };
     const i = r.map((d) => d.symbol?.style || "esriSLSSolid"), g = [...new Set(i)];
@@ -1469,7 +1481,7 @@ function ia(e, a, l) {
     }
     if (g.length === 1) {
       const d = Ke(g[0]);
-      d && (p["line-dasharray"] = d);
+      d && (f["line-dasharray"] = d);
     }
   } else if (w === "circle") {
     const m = ["match", ["to-string", ["get", o]]];
@@ -1487,14 +1499,14 @@ function ia(e, a, l) {
       color: z(n.color),
       label: e.defaultLabel || "Other"
     });
-    const i = Math.round((u?.size || 6) * 0.71 * 100) / 100;
-    p = {
+    const i = Math.round((c?.size || 6) * 0.71 * 100) / 100;
+    f = {
       "circle-color": m,
       "circle-radius": i,
       "circle-opacity": me(a)
-    }, Pe(u?.outline) && (p["circle-stroke-color"] = z(u.outline.color), p["circle-stroke-width"] = J(u.outline.width || 1));
+    }, xe(c?.outline) && (f["circle-stroke-color"] = z(c.outline.color), f["circle-stroke-width"] = W(c.outline.width || 1));
   }
-  return { paint: p, legend: S, geomType: w, outlinePaint: y };
+  return { paint: f, 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");
@@ -1502,16 +1514,16 @@ function la(e, a) {
     return na(r, l, e, a);
   if (o.length === 0)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const n = o[0]?.symbol, u = st(n);
+  const n = o[0]?.symbol, c = st(n);
   let w = {};
-  const p = [];
+  const f = [];
   let S = null;
-  if (u === "fill") {
+  if (c === "fill") {
     const y = ["step", ["get", l]];
     y.push(z(o[0]?.symbol?.color));
     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({
+      m > 0 && (y.push(o[m - 1].classMaxValue), y.push(z(i.symbol?.color))), f.push({
         type: "fill",
         color: z(i.symbol?.color),
         label: i.label || `${i.classMaxValue}`
@@ -1520,32 +1532,32 @@ function la(e, a) {
     if (w = {
       "fill-color": y,
       "fill-opacity": me(a)
-    }, Pe(n?.outline)) {
-      const m = J(n.outline.width || 1);
+    }, xe(n?.outline)) {
+      const m = W(n.outline.width || 1);
       S = {
         "line-color": z(n.outline.color),
         "line-width": m
       };
     }
-  } else if (u === "line") {
+  } else if (c === "line") {
     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: S, splitLayers: E };
+      return { paint: {}, legend: [], geomType: c, outlinePaint: S, splitLayers: E };
     }
     const g = ["step", ["get", l]];
     g.push(z(o[0]?.symbol?.color));
     let d = e.minValue ?? 0;
     for (let E = 0; E < o.length; E++) {
       const F = o[E];
-      E > 0 && (g.push(o[E - 1].classMaxValue), g.push(z(F.symbol?.color))), p.push({
+      E > 0 && (g.push(o[E - 1].classMaxValue), g.push(z(F.symbol?.color))), f.push({
         type: "line",
         color: z(F.symbol?.color),
-        width: J(F.symbol?.width || n?.width || 2),
+        width: W(F.symbol?.width || n?.width || 2),
         label: F.label || `${d} - ${F.classMaxValue}`
       }), d = F.classMaxValue + 1;
     }
-    const L = J(n?.width || 2);
+    const L = W(n?.width || 2);
     w = {
       "line-color": g,
       "line-width": L,
@@ -1554,20 +1566,20 @@ function la(e, a) {
     const C = Ke(m[0]);
     C && (w["line-dasharray"] = C);
   }
-  return { paint: w, legend: p, geomType: u, outlinePaint: S };
+  return { paint: w, legend: f, geomType: c, outlinePaint: S };
 }
 function na(e, a, l, o) {
   const r = e.stops || [];
   if (r.length === 0)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const n = l.classBreakInfos?.[0]?.symbol || l.defaultSymbol, u = st(n);
+  const n = l.classBreakInfos?.[0]?.symbol || l.defaultSymbol, c = st(n);
   let w = {};
-  const p = [];
+  const f = [];
   let S = null;
-  if (u === "fill") {
+  if (c === "fill") {
     const y = ["interpolate", ["linear"], ["get", a]];
     for (const i of r)
-      y.push(i.value), y.push(z(i.color)), p.push({
+      y.push(i.value), y.push(z(i.color)), f.push({
         type: "fill",
         color: z(i.color),
         label: i.label || `${i.value}`
@@ -1582,15 +1594,15 @@ function na(e, a, l, o) {
         // Otherwise use the interpolated color
       ],
       "fill-opacity": me(o)
-    }, Pe(n?.outline)) {
-      const i = J(n.outline.width || 1);
+    }, xe(n?.outline)) {
+      const i = W(n.outline.width || 1);
       S = {
         "line-color": z(n.outline.color),
         "line-width": i
       };
     }
   }
-  return { paint: w, legend: p, geomType: u, outlinePaint: S };
+  return { paint: w, legend: f, geomType: c, outlinePaint: S };
 }
 function ra(e, a, l, o) {
   if (!e?.renderer)
@@ -1609,12 +1621,12 @@ function ra(e, a, l, o) {
 }
 function sa(e) {
   if (!e) return null;
-  const a = (e.title || "").replace(/\{([^}]+)\}/g, (n, u) => `{${u.toLowerCase()}}`), o = (e.fieldInfos || []).filter((n) => n.visible === !0).map((n) => {
-    const u = {
+  const a = (e.title || "").replace(/\{([^}]+)\}/g, (n, c) => `{${c.toLowerCase()}}`), o = (e.fieldInfos || []).filter((n) => n.visible === !0).map((n) => {
+    const c = {
       field: n.fieldName.toLowerCase(),
       label: n.label || n.fieldName
     };
-    return n.format && (u.format = {}, n.format.dateFormat && (u.format.dateFormat = n.format.dateFormat), n.format.digitSeparator !== void 0 && (u.format.digitSeparator = n.format.digitSeparator), n.format.places !== void 0 && (u.format.places = n.format.places), Object.keys(u.format).length === 0 && delete u.format), u;
+    return n.format && (c.format = {}, n.format.dateFormat && (c.format.dateFormat = n.format.dateFormat), n.format.digitSeparator !== void 0 && (c.format.digitSeparator = n.format.digitSeparator), n.format.places !== void 0 && (c.format.places = n.format.places), Object.keys(c.format).length === 0 && delete c.format), c;
   }), r = {
     title: a,
     fields: o
@@ -1639,8 +1651,8 @@ function fa(e) {
   for (const r of l) {
     const n = r.trim().match(o);
     if (n) {
-      const [, u, w] = n;
-      u && w && a.set(u, w.trim());
+      const [, c, w] = n;
+      c && w && a.set(c, w.trim());
     }
   }
   return a;
@@ -1677,26 +1689,26 @@ async function Wt(e) {
   for (const r of a)
     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), S = n?.renderer?.uniqueValueInfos?.[0]?.symbol?.outline || n?.renderer?.defaultSymbol?.outline;
-        if ((w || p) && r.url) {
+        let n = r.layerDefinition?.drawingInfo, c;
+        const w = !n || !n.renderer, f = o.includes(r.title), S = n?.renderer?.uniqueValueInfos?.[0]?.symbol?.outline || n?.renderer?.defaultSymbol?.outline;
+        if ((w || f) && r.url) {
           const O = await pa(r.url);
           if (O) {
-            if (n = O.drawingInfo, S && Pe(S) && n?.renderer) {
+            if (n = O.drawingInfo, S && xe(S) && n?.renderer) {
               const D = n.renderer, ee = D.uniqueValueInfos?.[0]?.symbol?.outline || D.defaultSymbol?.outline;
-              if (!Pe(ee)) {
+              if (!xe(ee)) {
                 for (const U of D.uniqueValueInfos || [])
                   U.symbol && (U.symbol.outline = S);
                 D.defaultSymbol && (D.defaultSymbol.outline = S);
               }
             }
-            O.description && (u = fa(O.description), u.size > 0);
+            O.description && (c = fa(O.description), c.size > 0);
           }
         }
         const { paint: y, legend: m, geomType: i, outlinePaint: g, splitLayers: d } = ra(
           n,
           r.opacity,
-          u,
+          c,
           r.title
         ), 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)
@@ -1885,11 +1897,11 @@ function va(e) {
     const g = e.find((d) => d.id === i);
     g && await o(g);
   }
-  function u(i) {
+  function c(i) {
     return a.value[i]?.data ?? null;
   }
   const w = _(() => Object.values(a.value).some((i) => i.loading));
-  function p(i) {
+  function f(i) {
     return a.value[i]?.loading ?? !1;
   }
   function S(i) {
@@ -1915,7 +1927,7 @@ function va(e) {
     m();
   }), {
     /** Reactive state for all data sources */
-    state: j(a),
+    state: q(a),
     /** Whether any data source is currently loading */
     isLoading: w,
     /** Fetch all data sources */
@@ -1923,9 +1935,9 @@ function va(e) {
     /** Refetch a specific data source by id */
     refetch: n,
     /** Get data for a specific source */
-    getData: u,
+    getData: c,
     /** Check if a specific source is loading */
-    isSourceLoading: p,
+    isSourceLoading: f,
     /** Get error for a specific source */
     getError: S,
     /** Stop all polling (useful for cleanup) */
@@ -1977,7 +1989,7 @@ 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), 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({});
+    const o = e, r = l, n = x([]), c = x(!0), w = x(null), f = 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)
@@ -2000,7 +2012,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", 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);
+    N("layerboard-layers", q(n)), N("layerboard-visible", y), N("layerboard-opacities", m), N("layerboard-loading", q(i)), N("layerboard-errors", q(g)), N("layerboard-zoom", q(f)), N("layerboard-toggle-layer", De), N("layerboard-set-layer-visible", je), N("layerboard-set-layers-visible", Pe), N("layerboard-set-opacity", Fe), N("layerboard-tiled-layers", q(_(() => 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 = _(() => ({
@@ -2012,7 +2024,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
     }));
     async function We() {
       try {
-        u.value = !0, w.value = null;
+        c.value = !0, w.value = null;
         const $ = (await wt(o.webMapId)).map((Z) => {
           let Q = Z;
           const Ce = o.layerStyleOverrides[Z.id];
@@ -2041,7 +2053,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
         const $ = v instanceof Error ? v.message : "Failed to load layer configurations";
         w.value = $, r("load-error", $);
       } finally {
-        u.value = !1;
+        c.value = !1;
       }
     }
     async function Xe() {
@@ -2062,7 +2074,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
         }
     }
     function ut(v) {
-      p.value = v, r("zoom", v);
+      f.value = v, r("zoom", v);
     }
     function De(v) {
       y.value.has(v) ? y.value.delete(v) : y.value.add(v), y.value = new Set(y.value);
@@ -2070,7 +2082,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
     function je(v, $) {
       $ ? y.value.add(v) : y.value.delete(v), y.value = new Set(y.value);
     }
-    function Me(v, $) {
+    function Pe(v, $) {
       for (const K of v)
         $ ? y.value.add(K) : y.value.delete(K);
       y.value = new Set(y.value);
@@ -2159,7 +2171,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
         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({
+    N("layerboard-open-modal", Ae), N("layerboard-close-modal", le), N("layerboard-is-modal-open", q(ie)), a({
       /** Layer configurations */
       layerList: n,
       /** Set of visible layer IDs */
@@ -2171,13 +2183,13 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
       /** Map of layer errors by ID */
       layerErrors: g,
       /** Current map zoom level */
-      currentZoom: p,
+      currentZoom: f,
       /** Toggle a layer's visibility */
       toggleLayer: De,
       /** Set a layer's visibility explicitly */
       setLayerVisible: je,
       /** Set multiple layers' visibility at once */
-      setLayersVisible: Me,
+      setLayersVisible: Pe,
       /** Set a layer's opacity */
       setLayerOpacity: Fe,
       /** Reload layer configurations */
@@ -2249,16 +2261,16 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           "aria-label": "Toggle menu",
           onClick: Ie
         }, [
-          H(f(ke), {
-            "icon-definition": f(Fo),
+          J(p(ke), {
+            "icon-definition": p(Fo),
             size: "medium",
             inline: "",
             decorative: ""
           }, null, 8, ["icon-definition"])
         ], 8, wa),
         he(v.$slots, "header", {}, () => [
-          P("h1", null, G(e.title), 1),
-          e.subtitle ? (h(), M("span", La, G(e.subtitle), 1)) : A("", !0)
+          P("h1", null, H(e.title), 1),
+          e.subtitle ? (h(), M("span", La, H(e.subtitle), 1)) : A("", !0)
         ], !0),
         ae.value ? (h(), M("div", {
           key: 0,
@@ -2277,7 +2289,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
               closeModal: le,
               isModalOpen: ie.value
             }, () => [
-              $[0] || ($[0] = xe(" City of Philadelphia ", -1))
+              $[0] || ($[0] = $e(" City of Philadelphia ", -1))
             ], !0)
           ]),
           P("button", {
@@ -2287,8 +2299,8 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
             "aria-label": "Close menu",
             onClick: Ee
           }, [
-            H(f(ke), {
-              "icon-definition": f(Dt),
+            J(p(ke), {
+              "icon-definition": p(Dt),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
@@ -2301,15 +2313,15 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
         })) : A("", !0)
       ], 4),
       P("div", Ca, [
-        u.value ? (h(), M("div", ka, [
+        c.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)
+          P("p", null, "Loading " + H(e.title) + "...", 1)
         ])) : w.value ? (h(), M("div", xa, [
           $[3] || ($[3] = P("h2", null, "Error Loading Layers", -1)),
-          P("p", null, G(w.value), 1),
+          P("p", null, H(w.value), 1),
           P("button", {
             class: "layerboard-retry-button",
             style: ye({ backgroundColor: e.themeColor }),
@@ -2331,10 +2343,10 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
               layerOpacities: m.value,
               loadingLayers: i.value,
               layerErrors: g.value,
-              currentZoom: p.value,
+              currentZoom: f.value,
               toggleLayer: De,
               setLayerVisible: je,
-              setLayersVisible: Me,
+              setLayersVisible: Pe,
               setOpacity: Fe,
               tiledLayers: e.tiledLayers,
               visibleTiledLayers: L.value,
@@ -2347,14 +2359,14 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
               getDataSource: U,
               refetchDataSource: de
             }, () => [
-              e.showDefaultSidebar ? (h(), q(Xo, {
+              e.showDefaultSidebar ? (h(), G(Xo, {
                 key: 0,
                 "layer-list": n.value,
                 "visible-layers": y.value,
                 "layer-opacities": m.value,
                 "loading-layers": i.value,
                 "layer-errors": g.value,
-                "current-zoom": p.value,
+                "current-zoom": f.value,
                 "search-query": S.value,
                 "layer-metadata": d.value,
                 onToggleLayer: De,
@@ -2368,7 +2380,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
             "aria-label": "Map",
             class: ne(["layerboard-map", { "is-active": Se.value === "map" }])
           }, [
-            H(uo, {
+            J(uo, {
               "visible-layers": y.value,
               "layer-opacities": m.value,
               "layer-list": n.value,
@@ -2398,8 +2410,8 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
             "aria-label": fe.value ? "Expand sidebar" : "Collapse sidebar",
             onClick: tt
           }, [
-            H(f(ke), {
-              "icon-definition": fe.value ? f(Mo) : f(Po),
+            J(p(ke), {
+              "icon-definition": fe.value ? p(Mo) : p(Po),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
@@ -2413,7 +2425,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
         style: ye(Ue.value),
         onClick: ft
       }, [
-        Se.value === "map" ? (h(), M("span", Ma, G(e.sidebarLabel), 1)) : (h(), M("span", Pa, G(e.mapLabel), 1))
+        Se.value === "map" ? (h(), M("span", Ma, H(e.sidebarLabel), 1)) : (h(), M("span", Pa, H(e.mapLabel), 1))
       ], 4),
       P("footer", {
         class: "layerboard-footer",
@@ -2424,7 +2436,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           closeModal: le,
           isModalOpen: ie.value
         }, () => [
-          $[4] || ($[4] = xe(" City of Philadelphia ", -1))
+          $[4] || ($[4] = $e(" City of Philadelphia ", -1))
         ], !0)
       ], 4),
       ie.value ? (h(), M("div", {
@@ -2448,8 +2460,8 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
             "aria-label": "Close modal",
             onClick: le
           }, [
-            H(f(ke), {
-              "icon-definition": f(Dt),
+            J(p(ke), {
+              "icon-definition": p(Dt),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
@@ -2457,10 +2469,10 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
           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)
+      P("span", Fa, H(Se.value === "sidebar" ? "Showing layers panel" : "Showing map"), 1)
     ]));
   }
-}), Ya = /* @__PURE__ */ $e(Ta, [["__scopeId", "data-v-b6c04107"]]), Ia = ["aria-expanded"], Ea = {
+}), Ya = /* @__PURE__ */ Me(Ta, [["__scopeId", "data-v-1c88d9ba"]]), Ia = ["aria-expanded"], Ea = {
   key: 0,
   class: "topic-icon"
 }, Oa = { class: "topic-title" }, za = /* @__PURE__ */ ge({
@@ -2474,39 +2486,39 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
   },
   emits: ["toggle", "layerChange"],
   setup(e, { emit: a }) {
-    const l = e, o = a, r = x(l.expanded), n = `topic-panel-${Tt()}`, u = `topic-header-${Tt()}`;
+    const l = e, o = a, r = x(l.expanded), n = `topic-panel-${Tt()}`, c = `topic-header-${Tt()}`;
     Oe(
       () => l.expanded,
-      (p) => {
-        r.value = p;
+      (f) => {
+        r.value = f;
       }
     );
     function w() {
       r.value = !r.value, o("toggle", r.value);
     }
-    return (p, S) => {
+    return (f, S) => {
       const y = to("font-awesome-icon");
       return h(), M("div", {
         class: ne(["topic-accordion", { "is-expanded": r.value }])
       }, [
         P("button", {
-          id: u,
+          id: c,
           class: ne(["topic-header", e.headerClass]),
           type: "button",
           "aria-expanded": r.value,
           "aria-controls": n,
           onClick: w
         }, [
-          e.icon || p.$slots.icon ? (h(), M("span", Ea, [
-            he(p.$slots, "icon", {}, () => [
-              e.icon ? (h(), q(y, {
+          e.icon || f.$slots.icon ? (h(), M("span", Ea, [
+            he(f.$slots, "icon", {}, () => [
+              e.icon ? (h(), G(y, {
                 key: 0,
                 icon: ["fas", e.icon],
                 "aria-hidden": "true"
               }, null, 8, ["icon"])) : A("", !0)
             ], !0)
           ])) : A("", !0),
-          P("span", Oa, G(e.title), 1),
+          P("span", Oa, H(e.title), 1),
           P("span", {
             class: ne(["topic-chevron", { "is-rotated": r.value }])
           }, [...S[0] || (S[0] = [
@@ -2529,10 +2541,10 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
         Zt(P("div", {
           id: n,
           role: "region",
-          "aria-labelledby": u,
+          "aria-labelledby": c,
           class: "topic-content"
         }, [
-          he(p.$slots, "default", {}, () => [
+          he(f.$slots, "default", {}, () => [
             S[1] || (S[1] = P("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
           ], !0)
         ], 512), [
@@ -2541,7 +2553,7 @@ const ba = { class: "layerboard-layout" }, wa = ["aria-expanded"], La = {
       ], 2);
     };
   }
-}), ei = /* @__PURE__ */ $e(za, [["__scopeId", "data-v-a2023afa"]]);
+}), ei = /* @__PURE__ */ Me(za, [["__scopeId", "data-v-a2023afa"]]);
 function Da(e) {
   return e.displayOptions?.shouldShowCheckbox !== !1;
 }
@@ -2572,7 +2584,7 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
   },
   emits: ["toggleLayer", "setOpacity"],
   setup(e, { emit: a }) {
-    const l = e, o = a, { isVisible: r, getLayerOpacity: n, isLayerLoading: u, getLayerError: w, isLayerAvailableAtZoom: p } = Ct(
+    const l = e, o = a, { isVisible: r, getLayerOpacity: n, isLayerLoading: c, getLayerError: w, isLayerAvailableAtZoom: f } = Ct(
       () => l
     );
     function S(y) {
@@ -2587,60 +2599,60 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
         key: i.id,
         class: "layer-item"
       }, [
-        f(Da)(i) ? (h(), M("label", {
+        p(Da)(i) ? (h(), M("label", {
           key: 0,
           class: ne(["layer-checkbox", {
-            "layer-unavailable": !f(p)(i),
-            "layer-error": f(w)(i.id)
+            "layer-unavailable": !p(f)(i),
+            "layer-error": p(w)(i.id)
           }])
         }, [
           P("input", {
             type: "checkbox",
-            checked: f(r)(i.id),
-            disabled: !f(p)(i),
+            checked: p(r)(i.id),
+            disabled: !p(f)(i),
             onChange: (g) => S(i.id)
           }, null, 40, Ra),
           P("span", Aa, [
-            xe(G(f(ze)(i)) + " ", 1),
-            H(nt, {
-              loading: f(u)(i.id),
-              error: f(w)(i.id),
-              unavailable: !f(p)(i)
+            $e(H(p(ze)(i)) + " ", 1),
+            J(nt, {
+              loading: p(c)(i.id),
+              error: p(w)(i.id),
+              unavailable: !p(f)(i)
             }, null, 8, ["loading", "error", "unavailable"])
           ])
         ], 2)) : (h(), M("div", {
           key: 1,
           class: ne(["layer-label-only", {
-            "layer-unavailable": !f(p)(i),
-            "layer-error": f(w)(i.id)
+            "layer-unavailable": !p(f)(i),
+            "layer-error": p(w)(i.id)
           }])
         }, [
           P("span", Ba, [
-            xe(G(f(ze)(i)) + " ", 1),
-            H(nt, {
-              loading: f(u)(i.id),
-              error: f(w)(i.id),
-              unavailable: !f(p)(i)
+            $e(H(p(ze)(i)) + " ", 1),
+            J(nt, {
+              loading: p(c)(i.id),
+              error: p(w)(i.id),
+              unavailable: !p(f)(i)
             }, null, 8, ["loading", "error", "unavailable"])
           ])
         ], 2)),
-        f(jt)(i, e.showOpacity) && f(r)(i.id) && f(p)(i) ? (h(), q(Lt, {
+        p(jt)(i, e.showOpacity) && p(r)(i.id) && p(f)(i) ? (h(), G(Lt, {
           key: 2,
           "layer-id": i.id,
-          "layer-name": f(ze)(i),
-          opacity: f(n)(i.id),
+          "layer-name": p(ze)(i),
+          opacity: p(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 ? (h(), q(St, {
+        p(qt)(i, e.showLegend) && p(r)(i.id) && p(f)(i) && i.legend?.length ? (h(), G(St, {
           key: 3,
           items: i.legend,
-          label: "Legend for " + f(ze)(i)
+          label: "Legend for " + p(ze)(i)
         }, null, 8, ["items", "label"])) : A("", !0)
       ]))), 128)),
       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 = {
+}), ti = /* @__PURE__ */ Me(Za, [["__scopeId", "data-v-bfcd7855"]]), Na = ["aria-label"], Ua = ["name", "checked", "disabled", "onChange"], Wa = { class: "layer-title" }, ja = {
   key: 0,
   class: "empty-state"
 }, qa = /* @__PURE__ */ ge({
@@ -2659,7 +2671,7 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
   },
   emits: ["selectLayer", "setOpacity"],
   setup(e, { emit: a }) {
-    const l = e, o = a, { isVisible: r, getLayerOpacity: n, isLayerLoading: u, getLayerError: w, isLayerAvailableAtZoom: p } = Ct(
+    const l = e, o = a, { isVisible: r, getLayerOpacity: n, isLayerLoading: c, getLayerError: w, isLayerAvailableAtZoom: f } = Ct(
       () => l
     );
     function S(y) {
@@ -2677,48 +2689,48 @@ const _a = ["aria-label"], Ra = ["checked", "disabled", "onChange"], Aa = { clas
       }, [
         P("label", {
           class: ne(["layer-radio", {
-            "layer-unavailable": !f(p)(i),
-            "layer-error": f(w)(i.id)
+            "layer-unavailable": !p(f)(i),
+            "layer-error": p(w)(i.id)
           }])
         }, [
           P("input", {
             type: "radio",
             name: e.groupName,
-            checked: f(r)(i.id),
-            disabled: !f(p)(i),
+            checked: p(r)(i.id),
+            disabled: !p(f)(i),
             onChange: (g) => S(i.id)
           }, null, 40, Ua),
           P("span", Wa, [
-            xe(G(f(ze)(i)) + " ", 1),
-            H(nt, {
-              loading: f(u)(i.id),
-              error: f(w)(i.id),
-              unavailable: !f(p)(i)
+            $e(H(p(ze)(i)) + " ", 1),
+            J(nt, {
+              loading: p(c)(i.id),
+              error: p(w)(i.id),
+              unavailable: !p(f)(i)
             }, null, 8, ["loading", "error", "unavailable"])
           ])
         ], 2),
-        f(jt)(i, e.showOpacity) && f(r)(i.id) && f(p)(i) ? (h(), q(Lt, {
+        p(jt)(i, e.showOpacity) && p(r)(i.id) && p(f)(i) ? (h(), G(Lt, {
           key: 0,
           "layer-id": i.id,
-          "layer-name": f(ze)(i),
-          opacity: f(n)(i.id),
+          "layer-name": p(ze)(i),
+          opacity: p(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 ? (h(), q(St, {
+        p(qt)(i, e.showLegend) && p(r)(i.id) && p(f)(i) && i.legend?.length ? (h(), G(St, {
           key: 1,
           items: i.legend,
-          label: "Legend for " + f(ze)(i)
+          label: "Legend for " + p(ze)(i)
         }, null, 8, ["items", "label"])) : A("", !0)
       ]))), 128)),
       e.layers.length === 0 ? (h(), M("div", ja, "No layers available")) : A("", !0)
     ], 8, Na));
   }
-}), oi = /* @__PURE__ */ $e(qa, [["__scopeId", "data-v-c368d815"]]);
+}), oi = /* @__PURE__ */ Me(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), S = x(null), y = _(() => {
-    if (!u.value.trim())
+  const a = x([]), l = x(/* @__PURE__ */ new Set()), o = x({}), r = x(/* @__PURE__ */ new Set()), n = x({}), c = x(""), w = x(!1), f = x(!1), S = x(null), y = _(() => {
+    if (!c.value.trim())
       return a.value;
-    const T = u.value.toLowerCase();
+    const T = c.value.toLowerCase();
     return a.value.filter((O) => O.title.toLowerCase().includes(T));
   }), m = _(() => a.value.map((T) => ({
     config: T,
@@ -2726,7 +2738,7 @@ function ai(e) {
     // "circle", "fill", or "line"
   })));
   async function i() {
-    if (!p.value) {
+    if (!f.value) {
       w.value = !0, S.value = null;
       try {
         let T;
@@ -2734,7 +2746,7 @@ function ai(e) {
         const O = {};
         T.forEach((D) => {
           O[D.id] = D.opacity ?? 1;
-        }), o.value = O, p.value = !0;
+        }), o.value = O, f.value = !0;
       } catch (T) {
         S.value = T instanceof Error ? T : new Error("Failed to initialize layerboard");
       } finally {
@@ -2760,7 +2772,7 @@ function ai(e) {
     };
   }
   function C(T) {
-    u.value = T;
+    c.value = T;
   }
   function E(T, O) {
     const D = new Set(r.value);
@@ -2775,19 +2787,19 @@ 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, S.value = null;
+    a.value = [], l.value = /* @__PURE__ */ new Set(), o.value = {}, r.value = /* @__PURE__ */ new Set(), n.value = {}, c.value = "", w.value = !1, f.value = !1, S.value = null;
   }
   return {
     // State (readonly)
-    layerConfigs: j(a),
-    visibleLayers: j(l),
-    layerOpacities: j(o),
-    loadingLayers: j(r),
-    layerErrors: j(n),
-    searchQuery: j(u),
-    isLoading: j(w),
-    isInitialized: j(p),
-    error: j(S),
+    layerConfigs: q(a),
+    visibleLayers: q(l),
+    layerOpacities: q(o),
+    loadingLayers: q(r),
+    layerErrors: q(n),
+    searchQuery: q(c),
+    isLoading: q(w),
+    isInitialized: q(f),
+    error: q(S),
     // Computed
     filteredLayerConfigs: y,
     layerList: m,
@@ -2821,20 +2833,20 @@ function ii() {
 }
 function Ga(e) {
   const a = x(null), l = x(!1), o = x(null), r = x(0);
-  async function n(p = {}) {
+  async function n(f = {}) {
     l.value = !0, o.value = null;
     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");
+        const d = e.url.replace(/\/$/, ""), L = encodeURIComponent(f.where || e.where || "1=1");
         let C = `${d}/query?where=${L}&outFields=*&returnGeometry=true&resultRecordCount=${S}&resultOffset=${y}&f=geojson`;
-        if (p.bounds) {
+        if (f.bounds) {
           const V = JSON.stringify({
-            xmin: p.bounds.west,
-            ymin: p.bounds.south,
-            xmax: p.bounds.east,
-            ymax: p.bounds.north,
+            xmin: f.bounds.west,
+            ymin: f.bounds.south,
+            xmax: f.bounds.east,
+            ymax: f.bounds.north,
             spatialReference: { wkid: 4326 }
           });
           C += `&geometry=${encodeURIComponent(V)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
@@ -2857,24 +2869,24 @@ function Ga(e) {
       l.value = !1;
     }
   }
-  function u() {
+  function c() {
     a.value = null, r.value = 0, o.value = null;
   }
-  async function w(p = {}) {
-    return n(p);
+  async function w(f = {}) {
+    return n(f);
   }
   return {
     // State (readonly)
-    data: j(a),
-    isLoading: j(l),
-    error: j(o),
-    totalFeatures: j(r),
+    data: q(a),
+    isLoading: q(l),
+    error: q(o),
+    totalFeatures: q(r),
     // Config
     config: e,
     // Methods
     fetch: n,
     refetch: w,
-    clear: u
+    clear: c
   };
 }
 function li(e, a, l) {