@ogc-maps/storybook-components 0.9.0 → 0.11.0

package/dist/main.js

@@ -1,21 +1,440 @@
-import { B as rt } from "./BasemapSwitcher-BW7lyZ2Y.js";
-import { C as nt } from "./CollapsibleControl-CGRNPpCw.js";
-import { C as pt, f as ut, a as mt } from "./CoordinateDisplay-PxPmVjpm.js";
-import { E as ct } from "./ExportButton-CLsWoW4m.js";
-import { F as ht } from "./FeatureDetailPanel-CkFpdEKW.js";
-import { F as bt } from "./FeatureTooltip-Db1LgLQV.js";
-import { L as ft } from "./LayerPanel-SCdJ8948.js";
-import { L as wt } from "./Legend-CwaZA84A.js";
-import { S as Nt } from "./SearchPanel-DtLXMoVs.js";
-import { jsxs as l, jsx as a, Fragment as q } from "react/jsx-runtime";
-import { useId as Ie, useState as A, useRef as ue, useMemo as Ee, useCallback as We, useEffect as X } from "react";
-import { LuInfo as ze } from "react-icons/lu";
-import { J as Fe, j as Pe, i as se, L as Ve, g as _e } from "./cql2-DOJnQwcv.js";
-import { a as Ct, b as St, M as Dt, e as Tt, N as Lt, f as At, c as It, d as Et, h as Ft, O as Pt, P as Mt, k as Ot, l as jt, m as $t, n as Rt, o as Bt, p as qt, q as Ut, r as Gt, s as Wt, t as zt, u as Vt, v as _t, w as Yt, x as Xt, y as Ht, z as Jt, A as Kt, Q as Qt, B as Zt, C as ei, D as ai, E as ti, F as ii, G as ri, H as li, I as ni, K as oi } from "./cql2-DOJnQwcv.js";
-import { s as Ye } from "./index-UmK2u6Yd.js";
-import { B as ui, C as mi, a as si, b as ci, D as di, F as hi, c as gi, d as bi, e as yi, G as fi, L as xi, f as wi, g as vi, h as Ni, i as ki, j as Ci, M as Si, N as Di, O as Ti, P as Li, k as Ai, S as Ii, l as Ei, m as Fi, n as Pi, o as Mi, p as Oi, q as ji, r as $i, T as Ri, U as Bi, V as qi, v as Ui } from "./index-UmK2u6Yd.js";
-import './style.css';function Xe({ text: e, id: t }) {
-  const i = Ie(), r = t ?? i;
+import { B as $t } from "./BasemapSwitcher-BW7lyZ2Y.js";
+import { C as Bt } from "./CollapsibleControl-qo9daiD8.js";
+import { C as Ut, f as qt, a as Gt } from "./CoordinateDisplay-PxPmVjpm.js";
+import { E as _t } from "./ExportButton-BsNrOvRE.js";
+import { jsx as a, jsxs as l, Fragment as z } from "react/jsx-runtime";
+import { useState as T, useEffect as G, useRef as V, useCallback as Be, useId as ze, useMemo as Ue } from "react";
+import { F as Ht } from "./FeatureDetailPanel-CkFpdEKW.js";
+import { F as Xt } from "./FeatureTooltip-DxzN-jnp.js";
+import { L as Kt } from "./LayerPanel-SCdJ8948.js";
+import { L as Zt } from "./Legend-BLWBzD7Y.js";
+import { LuRuler as Qe, LuPentagon as Ze, LuTrash2 as be, LuMousePointer2 as ea, LuSquareDashedMousePointer as aa, LuList as ta, LuGripHorizontal as ia, LuDownload as ra, LuX as la, LuInfo as pa } from "react-icons/lu";
+import { W as na, X as ua, Y as xe, S as qe, n as Ge, m as ye, U as oa, j as ma } from "./geo-CyDCsiW-.js";
+import { a as ai, b as ti, c as ii, Z as ri, _ as li, $ as pi, a0 as ni, a1 as ui, a2 as oi, d as mi, a3 as si, e as ci, f as di, g as hi, h as gi, i as bi, k as yi, l as fi, a4 as xi, a5 as wi, o as Ni, p as vi, q as ki, r as Ci, s as Si, t as Ti, u as Di, v as Li, w as Ai, x as Ei, y as Ii, z as Mi, A as Fi, B as Pi, C as ji, D as Oi, E as $i, a6 as Ri, F as Bi, G as zi, H as Ui, I as qi, J as Gi, a7 as Wi, K as _i, L as Vi, M as Hi, N as Yi, O as Xi, P as Ji, Q as Ki, R as Qi, T as Zi, V as er } from "./geo-CyDCsiW-.js";
+import { S as tr } from "./SearchPanel-4Y12jfuP.js";
+import { s as sa } from "./index-BrphSJJ2.js";
+import { B as rr, C as lr, a as pr, b as nr, D as ur, F as or, c as mr, d as sr, e as cr, G as dr, L as hr, f as gr, g as br, h as yr, i as fr, j as xr, M as wr, N as Nr, O as vr, P as kr, k as Cr, S as Sr, l as Tr, m as Dr, n as Lr, o as Ar, p as Er, q as Ir, r as Mr, T as Fr, U as Pr, V as jr, v as Or } from "./index-BrphSJJ2.js";
+import './style.css';function xt({
+  open: e,
+  layers: t,
+  availableFormats: i,
+  hasActiveFilter: r,
+  loading: p = !1,
+  progress: u,
+  error: n,
+  onExport: f,
+  onClose: s
+}) {
+  const [g, d] = T(""), [x, c] = T(""), [o, h] = T(!0);
+  if (G(() => {
+    e && (d(t.length === 1 ? t[0].id : ""), c(i.length > 0 ? i[0].id : ""), h(!0));
+  }, [e, t, i]), !e) return null;
+  const w = t.find((m) => m.id === g), v = i.find((m) => m.id === x), C = w != null && r(w.id), A = w != null && v != null && !p, j = () => {
+    !w || !v || f({
+      layer: w,
+      format: v,
+      filtered: C ? o : !1
+    });
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "mapui:fixed mapui:inset-0 mapui:z-50 mapui:flex mapui:items-center mapui:justify-center mapui:bg-black/50",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "export-modal-title",
+      children: /* @__PURE__ */ l("div", { className: "mapui:w-full mapui:max-w-md mapui:rounded-lg mapui:bg-white mapui:p-6 mapui:shadow-xl", children: [
+        /* @__PURE__ */ a(
+          "h2",
+          {
+            id: "export-modal-title",
+            className: "mapui:m-0 mapui:mb-4 mapui:text-base mapui:font-semibold mapui:text-gray-900",
+            children: "Export Data"
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "mapui:mb-4", children: [
+          /* @__PURE__ */ a(
+            "label",
+            {
+              htmlFor: "export-layer-select",
+              className: "mapui:mb-1 mapui:block mapui:text-sm mapui:font-medium mapui:text-gray-700",
+              children: "Layer"
+            }
+          ),
+          t.length === 1 ? /* @__PURE__ */ a("div", { className: "mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-gray-50 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-gray-700", children: t[0].label }) : /* @__PURE__ */ l(
+            "select",
+            {
+              id: "export-layer-select",
+              value: g,
+              onChange: (m) => d(m.target.value),
+              className: "mapui:w-full mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-gray-700",
+              children: [
+                /* @__PURE__ */ a("option", { value: "", disabled: !0, children: "Select a layer..." }),
+                t.map((m) => /* @__PURE__ */ a("option", { value: m.id, children: m.label }, m.id))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l("fieldset", { className: "mapui:mb-4", children: [
+          /* @__PURE__ */ a("legend", { className: "mapui:mb-1 mapui:text-sm mapui:font-medium mapui:text-gray-700", children: "Format" }),
+          /* @__PURE__ */ a("div", { className: "mapui:space-y-1", children: i.map((m) => /* @__PURE__ */ l(
+            "label",
+            {
+              className: "mapui:flex mapui:cursor-pointer mapui:items-center mapui:gap-2 mapui:rounded mapui:px-2 mapui:py-1.5 hover:mapui:bg-gray-50",
+              children: [
+                /* @__PURE__ */ a(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "export-format",
+                    value: m.id,
+                    checked: x === m.id,
+                    onChange: () => c(m.id),
+                    className: "mapui:accent-blue-600"
+                  }
+                ),
+                /* @__PURE__ */ l("span", { className: "mapui:text-sm mapui:text-gray-700", children: [
+                  m.label,
+                  m.description && /* @__PURE__ */ l("span", { className: "mapui:ml-1 mapui:text-gray-400", children: [
+                    "— ",
+                    m.description
+                  ] })
+                ] })
+              ]
+            },
+            m.id
+          )) })
+        ] }),
+        C && /* @__PURE__ */ l("label", { className: "mapui:mb-4 mapui:flex mapui:cursor-pointer mapui:items-center mapui:gap-2", children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              type: "checkbox",
+              checked: o,
+              onChange: (m) => h(m.target.checked),
+              className: "mapui:accent-blue-600"
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:text-gray-700", children: "Apply current filters" })
+        ] }),
+        p && u && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-sm mapui:text-blue-600", children: u }),
+        n && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-sm mapui:text-red-600", children: n }),
+        /* @__PURE__ */ l("div", { className: "mapui:flex mapui:justify-end mapui:gap-2", children: [
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: s,
+              disabled: p,
+              className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:text-gray-700 hover:mapui:bg-gray-50",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: j,
+              disabled: !A,
+              className: [
+                "mapui:rounded mapui:border mapui:border-transparent mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:text-white",
+                A ? "mapui:cursor-pointer mapui:bg-blue-600 hover:mapui:bg-blue-700" : "mapui:cursor-not-allowed mapui:bg-blue-400"
+              ].join(" "),
+              children: p ? "Exporting..." : "Export"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+const ca = [
+  { mode: "distance", icon: Qe, label: "Distance" },
+  { mode: "area", icon: Ze, label: "Area" }
+];
+function da(e, t) {
+  return e ? t === 0 ? "Click on the map to start measuring" : e === "distance" ? "Click to add points, double-click to finish" : t < 3 ? "Click to add points (min 3 for area)" : "Click to add points, double-click to close" : "Select a measurement mode";
+}
+function wt({
+  mode: e,
+  onModeChange: t,
+  points: i,
+  measurement: r,
+  unit: p,
+  onUnitChange: u,
+  onClear: n,
+  className: f
+}) {
+  const s = e ? na[e] : [];
+  return /* @__PURE__ */ l("div", { className: `mapui:flex mapui:flex-col mapui:gap-3 ${f ?? ""}`, children: [
+    /* @__PURE__ */ a("div", { className: "mapui:flex mapui:gap-1", children: ca.map(({ mode: g, icon: d, label: x }) => {
+      const c = e === g;
+      return /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          onClick: () => t(c ? null : g),
+          "aria-label": x,
+          "aria-pressed": c,
+          className: [
+            "mapui:flex mapui:flex-1 mapui:items-center mapui:justify-center mapui:gap-1.5 mapui:rounded mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:transition-colors",
+            c ? "mapui:bg-blue-600 mapui:text-white" : "mapui:bg-gray-100 mapui:text-gray-700 hover:mapui:bg-gray-200"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ a(d, { size: 16 }),
+            x
+          ]
+        },
+        g
+      );
+    }) }),
+    e && /* @__PURE__ */ l(z, { children: [
+      /* @__PURE__ */ a("div", { className: "mapui:text-center", children: /* @__PURE__ */ a("div", { className: "mapui:text-2xl mapui:font-semibold mapui:text-gray-900", children: r ? ua(r) : "—" }) }),
+      /* @__PURE__ */ a("div", { className: "mapui:flex mapui:gap-1", children: s.map((g) => {
+        const d = p === g;
+        return /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: () => u(g),
+            "aria-label": `Unit: ${xe[g]}`,
+            className: [
+              "mapui:flex-1 mapui:rounded mapui:px-2 mapui:py-1 mapui:text-xs mapui:font-medium mapui:transition-colors",
+              d ? "mapui:bg-blue-100 mapui:text-blue-700" : "mapui:bg-gray-50 mapui:text-gray-500 hover:mapui:bg-gray-100"
+            ].join(" "),
+            children: xe[g]
+          },
+          g
+        );
+      }) }),
+      /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-center mapui:text-xs mapui:text-gray-500", children: da(e, i.length) }),
+      i.length > 0 && /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          onClick: n,
+          className: "mapui:flex mapui:items-center mapui:justify-center mapui:gap-1.5 mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-3 mapui:py-1.5 mapui:text-xs mapui:text-gray-600 hover:mapui:bg-gray-50",
+          children: [
+            /* @__PURE__ */ a(be, { size: 14 }),
+            "Clear"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+const ha = [
+  { mode: "click", icon: ea, label: "Click" },
+  { mode: "box", icon: aa, label: "Box" }
+];
+function ga(e, t, i) {
+  return t ? e ? i === 0 ? e === "click" ? "Click on features to select them" : "Click and drag to draw a selection box" : `${i} feature${i !== 1 ? "s" : ""} selected` : "Choose a selection mode" : "Select a layer to begin";
+}
+function Nt({
+  mode: e,
+  onModeChange: t,
+  layers: i,
+  activeLayerId: r,
+  onActiveLayerChange: p,
+  selectedCount: u,
+  onClear: n,
+  onViewResults: f,
+  className: s
+}) {
+  const g = i.filter((d) => d.visible);
+  return /* @__PURE__ */ l("div", { className: `mapui:flex mapui:flex-col mapui:gap-3 ${s ?? ""}`, children: [
+    /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
+      /* @__PURE__ */ a("label", { className: "mapui:text-xs mapui:font-medium mapui:text-gray-600", children: "Layer" }),
+      /* @__PURE__ */ l(
+        "select",
+        {
+          value: r ?? "",
+          onChange: (d) => p(d.target.value || null),
+          className: "mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-2 mapui:py-1.5 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500",
+          children: [
+            /* @__PURE__ */ a("option", { value: "", children: "Select a layer…" }),
+            g.map((d) => /* @__PURE__ */ a("option", { value: d.id, children: d.label }, d.id))
+          ]
+        }
+      )
+    ] }),
+    r && /* @__PURE__ */ l(z, { children: [
+      /* @__PURE__ */ a("div", { className: "mapui:flex mapui:gap-1", children: ha.map(({ mode: d, icon: x, label: c }) => {
+        const o = e === d;
+        return /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: () => t(o ? null : d),
+            "aria-label": c,
+            "aria-pressed": o,
+            className: [
+              "mapui:flex mapui:flex-1 mapui:items-center mapui:justify-center mapui:gap-1.5 mapui:rounded mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:transition-colors",
+              o ? "mapui:bg-blue-600 mapui:text-white" : "mapui:bg-gray-100 mapui:text-gray-700 hover:mapui:bg-gray-200"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ a(x, { size: 16 }),
+              c
+            ]
+          },
+          d
+        );
+      }) }),
+      /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-center mapui:text-xs mapui:text-gray-500", children: ga(e, r, u) }),
+      u > 0 && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: f,
+            className: "mapui:flex mapui:flex-1 mapui:items-center mapui:justify-center mapui:gap-1.5 mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1.5 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700",
+            children: [
+              /* @__PURE__ */ a(ta, { size: 14 }),
+              "View Results"
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: n,
+            className: "mapui:flex mapui:items-center mapui:justify-center mapui:gap-1.5 mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-3 mapui:py-1.5 mapui:text-xs mapui:text-gray-600 hover:mapui:bg-gray-50",
+            children: [
+              /* @__PURE__ */ a(be, { size: 14 }),
+              "Clear"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ba(e) {
+  return e == null ? "--" : typeof e == "boolean" ? e ? "Yes" : "No" : typeof e == "object" ? JSON.stringify(e) : String(e);
+}
+const ya = 200, fa = 0.6, xa = 300;
+function vt({
+  open: e,
+  features: t,
+  columns: i,
+  title: r = "Results",
+  onClose: p,
+  onExport: u,
+  onFeatureClick: n,
+  onClearSelection: f
+}) {
+  const [s, g] = T(xa), d = V(!1), x = V(0), c = V(0), o = Be((w) => {
+    w.preventDefault(), d.current = !0, x.current = w.clientY, c.current = s;
+  }, [s]);
+  if (G(() => {
+    if (!e) return;
+    const w = (C) => {
+      if (!d.current) return;
+      const A = window.innerHeight * fa, j = x.current - C.clientY, m = Math.min(A, Math.max(ya, c.current + j));
+      g(m);
+    }, v = () => {
+      d.current = !1;
+    };
+    return window.addEventListener("mousemove", w), window.addEventListener("mouseup", v), () => {
+      window.removeEventListener("mousemove", w), window.removeEventListener("mouseup", v);
+    };
+  }, [e]), !e) return null;
+  const h = i ?? (t.length > 0 ? Object.keys(t[0].properties).filter((w) => w !== "geometry") : []);
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: "mapui:absolute mapui:bottom-0 mapui:left-0 mapui:right-0 mapui:z-20 mapui:bg-white mapui:shadow-[0_-4px_12px_rgba(0,0,0,0.15)] mapui:flex mapui:flex-col",
+      style: { height: s },
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "mapui:flex mapui:items-center mapui:justify-center mapui:h-3 mapui:cursor-ns-resize mapui:bg-gray-100 mapui:border-b mapui:border-gray-200 hover:mapui:bg-gray-200",
+            onMouseDown: o,
+            children: /* @__PURE__ */ a(ia, { size: 14, className: "mapui:text-gray-400" })
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:px-4 mapui:py-2 mapui:border-b mapui:border-gray-200 mapui:shrink-0", children: [
+          /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+            /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-semibold mapui:text-gray-800", children: r }),
+            /* @__PURE__ */ a("span", { className: "mapui:rounded-full mapui:bg-blue-100 mapui:px-2 mapui:py-0.5 mapui:text-xs mapui:font-medium mapui:text-blue-700", children: t.length })
+          ] }),
+          /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-1", children: [
+            u && /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                onClick: u,
+                title: "Export",
+                className: "mapui:flex mapui:items-center mapui:justify-center mapui:w-7 mapui:h-7 mapui:rounded hover:mapui:bg-gray-100 mapui:text-gray-500",
+                children: /* @__PURE__ */ a(ra, { size: 16 })
+              }
+            ),
+            f && /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                onClick: f,
+                title: "Clear selection",
+                className: "mapui:flex mapui:items-center mapui:justify-center mapui:w-7 mapui:h-7 mapui:rounded hover:mapui:bg-gray-100 mapui:text-gray-500",
+                children: /* @__PURE__ */ a(be, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                onClick: p,
+                title: "Close",
+                className: "mapui:flex mapui:items-center mapui:justify-center mapui:w-7 mapui:h-7 mapui:rounded hover:mapui:bg-gray-100 mapui:text-gray-500",
+                children: /* @__PURE__ */ a(la, { size: 16 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "mapui:overflow-auto mapui:flex-1", children: t.length === 0 ? /* @__PURE__ */ a("div", { className: "mapui:flex mapui:items-center mapui:justify-center mapui:h-full mapui:text-sm mapui:text-gray-400", children: "No features to display" }) : /* @__PURE__ */ l("table", { className: "mapui:w-full mapui:text-xs mapui:border-collapse", children: [
+          /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ l("tr", { className: "mapui:bg-gray-50 mapui:sticky mapui:top-0", children: [
+            /* @__PURE__ */ a("th", { className: "mapui:px-3 mapui:py-2 mapui:text-left mapui:font-medium mapui:text-gray-600 mapui:border-b mapui:border-gray-200", children: "#" }),
+            h.map((w) => /* @__PURE__ */ a(
+              "th",
+              {
+                className: "mapui:px-3 mapui:py-2 mapui:text-left mapui:font-medium mapui:text-gray-600 mapui:border-b mapui:border-gray-200 mapui:whitespace-nowrap",
+                children: w
+              },
+              w
+            ))
+          ] }) }),
+          /* @__PURE__ */ a("tbody", { children: t.map((w, v) => /* @__PURE__ */ l(
+            "tr",
+            {
+              onClick: () => n == null ? void 0 : n(v),
+              className: [
+                n ? "mapui:cursor-pointer" : "",
+                v % 2 === 0 ? "mapui:bg-white" : "mapui:bg-gray-50",
+                "hover:mapui:bg-blue-50"
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ a("td", { className: "mapui:px-3 mapui:py-1.5 mapui:text-gray-400 mapui:border-b mapui:border-gray-100", children: v + 1 }),
+                h.map((C) => /* @__PURE__ */ a(
+                  "td",
+                  {
+                    className: "mapui:px-3 mapui:py-1.5 mapui:text-gray-700 mapui:border-b mapui:border-gray-100 mapui:whitespace-nowrap",
+                    children: ba(w.properties[C])
+                  },
+                  C
+                ))
+              ]
+            },
+            v
+          )) })
+        ] }) })
+      ]
+    }
+  );
+}
+function wa({ text: e, id: t }) {
+  const i = ze(), r = t ?? i;
   return /* @__PURE__ */ l("span", { className: "mapui:relative mapui:inline-flex mapui:group", children: [
     /* @__PURE__ */ a(
       "span",
@@ -24,7 +443,7 @@ import './style.css';function Xe({ text: e, id: t }) {
         "aria-label": "Info",
         "aria-describedby": r,
         className: "mapui:inline-flex mapui:items-center mapui:text-gray-400 mapui:cursor-default hover:mapui:text-gray-600 focus:mapui:text-gray-600 focus:mapui:outline-none",
-        children: /* @__PURE__ */ a(ze, { className: "mapui:h-3.5 mapui:w-3.5" })
+        children: /* @__PURE__ */ a(pa, { className: "mapui:h-3.5 mapui:w-3.5" })
       }
     ),
     /* @__PURE__ */ l(
@@ -41,20 +460,20 @@ import './style.css';function Xe({ text: e, id: t }) {
     )
   ] });
 }
-function D({ label: e, error: t, required: i, description: r, htmlFor: n, children: p }) {
+function S({ label: e, error: t, required: i, description: r, htmlFor: p, children: u }) {
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-1", children: [
-      /* @__PURE__ */ l("label", { htmlFor: n, className: "mapui:flex mapui:items-center mapui:gap-1 mapui:text-xs mapui:font-medium mapui:text-gray-700", children: [
+      /* @__PURE__ */ l("label", { htmlFor: p, className: "mapui:flex mapui:items-center mapui:gap-1 mapui:text-xs mapui:font-medium mapui:text-gray-700", children: [
         e,
         i && /* @__PURE__ */ a("span", { className: "mapui:ml-0.5 mapui:text-red-500", "aria-hidden": "true", children: "*" })
       ] }),
-      r && /* @__PURE__ */ a(Xe, { text: r })
+      r && /* @__PURE__ */ a(wa, { text: r })
     ] }),
-    p,
+    u,
     t && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-xs mapui:text-red-600", role: "alert", children: t })
   ] });
 }
-function Y({ value: e, onChange: t, label: i }) {
+function J({ value: e, onChange: t, label: i }) {
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
     /* @__PURE__ */ a(
       "input",
@@ -69,12 +488,12 @@ function Y({ value: e, onChange: t, label: i }) {
     /* @__PURE__ */ a("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-600", children: e })
   ] });
 }
-function Z({
+function re({
   open: e,
   title: t,
   description: i,
   onConfirm: r,
-  onCancel: n
+  onCancel: p
 }) {
   return e ? /* @__PURE__ */ a(
     "div",
@@ -106,7 +525,7 @@ function Z({
             "button",
             {
               type: "button",
-              onClick: n,
+              onClick: p,
               className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:text-gray-700 hover:mapui:bg-gray-50",
               children: "Cancel"
             }
@@ -125,62 +544,62 @@ function Z({
     }
   ) : null;
 }
-function _({
+function X({
   title: e,
   children: t,
   defaultOpen: i = !1,
   badge: r
 }) {
-  const [n, p] = A(i);
+  const [p, u] = T(i);
   return /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-gray-200", children: [
     /* @__PURE__ */ l(
       "button",
       {
         type: "button",
-        onClick: () => p((o) => !o),
+        onClick: () => u((n) => !n),
         className: "mapui:flex mapui:w-full mapui:cursor-pointer mapui:items-center mapui:justify-between mapui:rounded mapui:border-none mapui:bg-gray-50 mapui:px-3 mapui:py-2 mapui:text-sm mapui:font-medium mapui:text-gray-700 hover:mapui:bg-gray-100",
         children: [
           /* @__PURE__ */ l("span", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
             e,
             r !== void 0 && r > 0 && /* @__PURE__ */ a("span", { className: "mapui:rounded-full mapui:bg-blue-100 mapui:px-1.5 mapui:py-0.5 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: r })
           ] }),
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", children: n ? "▲" : "▼" })
+          /* @__PURE__ */ a("span", { "aria-hidden": "true", children: p ? "▲" : "▼" })
         ]
       }
     ),
-    n && /* @__PURE__ */ a("div", { className: "mapui:p-3", children: t })
+    p && /* @__PURE__ */ a("div", { className: "mapui:p-3", children: t })
   ] });
 }
-const H = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function ce({
+const ee = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+function we({
   value: e,
   onChange: t,
   onTestConnection: i,
   testStatus: r = "idle",
-  testError: n
+  testError: p
 }) {
-  const p = (o) => t({ ...e, ...o });
+  const u = (n) => t({ ...e, ...n });
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ a(D, { label: "ID", required: !0, children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "ID", required: !0, children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.id,
-        onChange: (o) => p({ id: o.target.value }),
+        onChange: (n) => u({ id: n.target.value }),
         placeholder: "my-source",
-        className: H
+        className: ee
       }
     ) }),
-    /* @__PURE__ */ l(D, { label: "URL", required: !0, children: [
+    /* @__PURE__ */ l(S, { label: "URL", required: !0, children: [
       /* @__PURE__ */ l("div", { className: "mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "input",
           {
             type: "url",
             value: e.url,
-            onChange: (o) => p({ url: o.target.value }),
+            onChange: (n) => u({ url: n.target.value }),
             placeholder: "https://example.com/ogcapi",
-            className: `${H} mapui:flex-1`
+            className: `${ee} mapui:flex-1`
           }
         ),
         i && /* @__PURE__ */ a(
@@ -195,51 +614,51 @@ function ce({
         )
       ] }),
       r === "success" && /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-green-600", children: "Connection successful" }),
-      r === "error" && /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-red-600", children: n ?? "Connection failed" })
+      r === "error" && /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-red-600", children: p ?? "Connection failed" })
     ] }),
-    /* @__PURE__ */ a(D, { label: "Label", children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.label ?? "",
-        onChange: (o) => p({ label: o.target.value || void 0 }),
+        onChange: (n) => u({ label: n.target.value || void 0 }),
         placeholder: "My OGC API Source",
-        className: H
+        className: ee
       }
     ) }),
-    /* @__PURE__ */ a(D, { label: "Tile Matrix Set ID", children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "Tile Matrix Set ID", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.tileMatrixSetId ?? "WebMercatorQuad",
-        onChange: (o) => p({ tileMatrixSetId: o.target.value || void 0 }),
+        onChange: (n) => u({ tileMatrixSetId: n.target.value || void 0 }),
         placeholder: "WebMercatorQuad",
-        className: H
+        className: ee
       }
     ) })
   ] });
 }
-const ee = () => ({
+const le = () => ({
   id: "",
   url: "",
   label: void 0,
   tileMatrixSetId: "WebMercatorQuad"
 });
-function Va({ sources: e, onChange: t }) {
-  const [i, r] = A(null), [n, p] = A(null), [o, b] = A(!1), [m, w] = A(ee()), [d, f] = A({}), [c, u] = A({}), [s, v] = A(null), N = async (C, L) => {
-    f((E) => ({ ...E, [C]: "loading" }));
+function kt({ sources: e, onChange: t }) {
+  const [i, r] = T(null), [p, u] = T(null), [n, f] = T(!1), [s, g] = T(le()), [d, x] = T({}), [c, o] = T({}), [h, w] = T(null), v = async (m, I) => {
+    x((F) => ({ ...F, [m]: "loading" }));
     try {
-      const E = await fetch(`${L}/conformance`);
-      E.ok ? f((y) => ({ ...y, [C]: "success" })) : (f((y) => ({ ...y, [C]: "error" })), u((y) => ({ ...y, [C]: `HTTP ${E.status}` })));
-    } catch (E) {
-      f((y) => ({ ...y, [C]: "error" })), u((y) => ({ ...y, [C]: E instanceof Error ? E.message : "Network error" }));
+      const F = await fetch(`${I}/conformance`);
+      F.ok ? x((b) => ({ ...b, [m]: "success" })) : (x((b) => ({ ...b, [m]: "error" })), o((b) => ({ ...b, [m]: `HTTP ${F.status}` })));
+    } catch (F) {
+      x((b) => ({ ...b, [m]: "error" })), o((b) => ({ ...b, [m]: F instanceof Error ? F.message : "Network error" }));
     }
-  }, S = () => {
-    n && (t(e.map((C) => C.id === i ? n : C)), r(null), p(null));
-  }, x = () => {
-    t([...e, m]), b(!1), w(ee());
-  }, P = (C) => {
-    t(e.filter((L) => L.id !== C)), v(null);
+  }, C = () => {
+    p && (t(e.map((m) => m.id === i ? p : m)), r(null), u(null));
+  }, A = () => {
+    t([...e, s]), f(!1), g(le());
+  }, j = (m) => {
+    t(e.filter((I) => I.id !== m)), w(null);
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
@@ -249,27 +668,27 @@ function Va({ sources: e, onChange: t }) {
         {
           type: "button",
           onClick: () => {
-            b(!0), w(ee());
+            f(!0), g(le());
           },
           className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700",
           children: "+ Add Source"
         }
       )
     ] }),
-    e.length === 0 && !o && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No sources configured." }),
-    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((C) => /* @__PURE__ */ a(
+    e.length === 0 && !n && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No sources configured." }),
+    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((m) => /* @__PURE__ */ a(
       "li",
       {
         className: "mapui:rounded-lg mapui:border mapui:border-gray-200 mapui:bg-white mapui:p-3",
-        children: i === C.id ? /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
+        children: i === m.id ? /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
           /* @__PURE__ */ a(
-            ce,
+            we,
             {
-              value: n ?? C,
-              onChange: p,
-              onTestConnection: (L) => N(`edit-${C.id}`, L),
-              testStatus: d[`edit-${C.id}`],
-              testError: c[`edit-${C.id}`]
+              value: p ?? m,
+              onChange: u,
+              onTestConnection: (I) => v(`edit-${m.id}`, I),
+              testStatus: d[`edit-${m.id}`],
+              testError: c[`edit-${m.id}`]
             }
           ),
           /* @__PURE__ */ l("div", { className: "mapui:flex mapui:gap-2", children: [
@@ -277,8 +696,8 @@ function Va({ sources: e, onChange: t }) {
               "button",
               {
                 type: "button",
-                onClick: S,
-                disabled: !(n != null && n.id) || !(n != null && n.url),
+                onClick: C,
+                disabled: !(p != null && p.id) || !(p != null && p.url),
                 className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
                 children: "Save"
               }
@@ -288,7 +707,7 @@ function Va({ sources: e, onChange: t }) {
               {
                 type: "button",
                 onClick: () => {
-                  r(null), p(null);
+                  r(null), u(null);
                 },
                 className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
                 children: "Cancel"
@@ -297,11 +716,11 @@ function Va({ sources: e, onChange: t }) {
           ] })
         ] }) : /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-start mapui:justify-between mapui:gap-2", children: [
           /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
-            /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: C.label ?? C.id }),
-            /* @__PURE__ */ a("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: C.url }),
-            C.tileMatrixSetId && /* @__PURE__ */ l("span", { className: "mapui:text-xs mapui:text-gray-400", children: [
+            /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: m.label ?? m.id }),
+            /* @__PURE__ */ a("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: m.url }),
+            m.tileMatrixSetId && /* @__PURE__ */ l("span", { className: "mapui:text-xs mapui:text-gray-400", children: [
               "TMS: ",
-              C.tileMatrixSetId
+              m.tileMatrixSetId
             ] })
           ] }),
           /* @__PURE__ */ l("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
@@ -310,7 +729,7 @@ function Va({ sources: e, onChange: t }) {
               {
                 type: "button",
                 onClick: () => {
-                  r(C.id), p(C);
+                  r(m.id), u(m);
                 },
                 className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-600 hover:mapui:bg-gray-50",
                 children: "Edit"
@@ -320,7 +739,7 @@ function Va({ sources: e, onChange: t }) {
               "button",
               {
                 type: "button",
-                onClick: () => v(C.id),
+                onClick: () => w(m.id),
                 className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
                 children: "Remove"
               }
@@ -328,16 +747,16 @@ function Va({ sources: e, onChange: t }) {
           ] })
         ] })
       },
-      C.id
+      m.id
     )) }),
-    o && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+    n && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Source" }),
       /* @__PURE__ */ a(
-        ce,
+        we,
         {
-          value: m,
-          onChange: w,
-          onTestConnection: (C) => N("new", C),
+          value: s,
+          onChange: g,
+          onTestConnection: (m) => v("new", m),
           testStatus: d.new,
           testError: c.new
         }
@@ -347,8 +766,8 @@ function Va({ sources: e, onChange: t }) {
           "button",
           {
             type: "button",
-            onClick: x,
-            disabled: !m.id || !m.url,
+            onClick: A,
+            disabled: !s.id || !s.url,
             className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
             children: "Save"
           }
@@ -357,7 +776,7 @@ function Va({ sources: e, onChange: t }) {
           "button",
           {
             type: "button",
-            onClick: () => b(!1),
+            onClick: () => f(!1),
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
             children: "Cancel"
           }
@@ -365,32 +784,32 @@ function Va({ sources: e, onChange: t }) {
       ] })
     ] }),
     /* @__PURE__ */ a(
-      Z,
+      re,
       {
-        open: s !== null,
+        open: h !== null,
         title: "Remove Source",
         description: "Are you sure you want to remove this source? Any layers using it will be affected.",
-        onConfirm: () => s && P(s),
-        onCancel: () => v(null)
+        onConfirm: () => h && j(h),
+        onCancel: () => w(null)
       }
     )
   ] });
 }
-function _a({
+function Ct({
   sourceUrl: e,
   selectedCollectionIds: t,
   onSelect: i,
   onDeselect: r
 }) {
-  const { collections: n, loading: p, error: o } = Fe(e || null);
-  return p ? /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:py-4 mapui:text-sm mapui:text-gray-500", children: [
+  const { collections: p, loading: u, error: n } = qe(e || null);
+  return u ? /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:py-4 mapui:text-sm mapui:text-gray-500", children: [
     /* @__PURE__ */ a("span", { className: "mapui:inline-block mapui:h-4 mapui:w-4 mapui:animate-spin mapui:rounded-full mapui:border-2 mapui:border-gray-300 mapui:border-t-blue-600" }),
     "Loading collections…"
-  ] }) : o ? /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3 mapui:text-sm mapui:text-red-700", children: [
+  ] }) : n ? /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3 mapui:text-sm mapui:text-red-700", children: [
     "Failed to load collections: ",
-    o.message
-  ] }) : n.length === 0 ? /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No collections found at this source." }) : /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1 mapui:p-0", children: n.map((b) => {
-    const m = t.includes(b.id);
+    n.message
+  ] }) : p.length === 0 ? /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No collections found at this source." }) : /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1 mapui:p-0", children: p.map((f) => {
+    const s = t.includes(f.id);
     return /* @__PURE__ */ l(
       "li",
       {
@@ -400,63 +819,63 @@ function _a({
             "input",
             {
               type: "checkbox",
-              id: `collection-${b.id}`,
-              checked: m,
-              onChange: () => m ? r(b.id) : i(b.id),
+              id: `collection-${f.id}`,
+              checked: s,
+              onChange: () => s ? r(f.id) : i(f.id),
               className: "mapui:mt-0.5 mapui:h-4 mapui:w-4 mapui:cursor-pointer mapui:accent-blue-600"
             }
           ),
           /* @__PURE__ */ l(
             "label",
             {
-              htmlFor: `collection-${b.id}`,
+              htmlFor: `collection-${f.id}`,
               className: "mapui:flex mapui:cursor-pointer mapui:flex-col mapui:gap-0.5",
               children: [
-                /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: b.title ?? b.id }),
-                /* @__PURE__ */ a("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: b.id }),
-                b.description && /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-400 mapui:line-clamp-2", children: b.description })
+                /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: f.title ?? f.id }),
+                /* @__PURE__ */ a("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: f.id }),
+                f.description && /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-400 mapui:line-clamp-2", children: f.description })
               ]
             }
           )
         ]
       },
-      b.id
+      f.id
     );
   }) });
 }
-function He({ value: e, onChange: t, availableIcons: i }) {
-  const [r, n] = A(!1), [p, o] = A(-1), b = ue(null), m = Ie(), w = p >= 0 ? `${m}-option-${p}` : void 0, d = Ee(() => {
+function Na({ value: e, onChange: t, availableIcons: i }) {
+  const [r, p] = T(!1), [u, n] = T(-1), f = V(null), s = ze(), g = u >= 0 ? `${s}-option-${u}` : void 0, d = Ue(() => {
     if (!i || i.length === 0) return [];
     if (!e) return i;
-    const N = e.toLowerCase();
-    return i.filter((S) => S.toLowerCase().includes(N));
-  }, [i, e]), f = r && d.length > 0, c = We(
-    (N) => {
-      t(N), n(!1), o(-1);
+    const v = e.toLowerCase();
+    return i.filter((C) => C.toLowerCase().includes(v));
+  }, [i, e]), x = r && d.length > 0, c = Be(
+    (v) => {
+      t(v), p(!1), n(-1);
     },
     [t]
-  ), u = (N) => {
-    t(N.target.value), n(!0), o(-1);
-  }, s = (N) => {
-    f && (N.key === "ArrowDown" ? (N.preventDefault(), o((S) => Math.min(S + 1, d.length - 1))) : N.key === "ArrowUp" ? (N.preventDefault(), o((S) => Math.max(S - 1, 0))) : N.key === "Enter" && p >= 0 ? (N.preventDefault(), c(d[p])) : N.key === "Escape" && (n(!1), o(-1)));
+  ), o = (v) => {
+    t(v.target.value), p(!0), n(-1);
+  }, h = (v) => {
+    x && (v.key === "ArrowDown" ? (v.preventDefault(), n((C) => Math.min(C + 1, d.length - 1))) : v.key === "ArrowUp" ? (v.preventDefault(), n((C) => Math.max(C - 1, 0))) : v.key === "Enter" && u >= 0 ? (v.preventDefault(), c(d[u])) : v.key === "Escape" && (p(!1), n(-1)));
   };
-  X(() => {
-    const N = (S) => {
-      b.current && !b.current.contains(S.target) && (n(!1), o(-1));
+  G(() => {
+    const v = (C) => {
+      f.current && !f.current.contains(C.target) && (p(!1), n(-1));
     };
-    return document.addEventListener("mousedown", N), () => document.removeEventListener("mousedown", N);
+    return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
   }, []);
-  const v = "mapui:w-full mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+  const w = "mapui:w-full mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
   return !i || i.length === 0 ? /* @__PURE__ */ a(
     "input",
     {
       type: "text",
       value: e,
-      onChange: (N) => t(N.target.value || ""),
+      onChange: (v) => t(v.target.value || ""),
       placeholder: "icon-name",
-      className: v
+      className: w
     }
-  ) : /* @__PURE__ */ l("div", { ref: b, className: "mapui:relative", children: [
+  ) : /* @__PURE__ */ l("div", { ref: f, className: "mapui:relative", children: [
     /* @__PURE__ */ a(
       "input",
       {
@@ -464,41 +883,41 @@ function He({ value: e, onChange: t, availableIcons: i }) {
         value: e,
         placeholder: "Search icons…",
         role: "combobox",
-        "aria-expanded": f,
+        "aria-expanded": x,
         "aria-autocomplete": "list",
-        "aria-controls": m,
-        "aria-activedescendant": w,
-        onChange: u,
-        onFocus: () => n(!0),
-        onKeyDown: s,
-        className: v
+        "aria-controls": s,
+        "aria-activedescendant": g,
+        onChange: o,
+        onFocus: () => p(!0),
+        onKeyDown: h,
+        className: w
       }
     ),
-    f && /* @__PURE__ */ a(
+    x && /* @__PURE__ */ a(
       "ul",
       {
-        id: m,
+        id: s,
         role: "listbox",
         className: "mapui:absolute mapui:z-10 mapui:mt-1 mapui:w-full mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:shadow-lg mapui:max-h-48 mapui:overflow-y-auto mapui:p-0 mapui:m-0 mapui:list-none",
-        children: d.map((N, S) => /* @__PURE__ */ a(
+        children: d.map((v, C) => /* @__PURE__ */ a(
           "li",
           {
-            id: `${m}-option-${S}`,
+            id: `${s}-option-${C}`,
             role: "option",
-            "aria-selected": S === p,
-            onMouseDown: (x) => {
-              x.preventDefault(), c(N);
+            "aria-selected": C === u,
+            onMouseDown: (A) => {
+              A.preventDefault(), c(v);
             },
-            className: `mapui:cursor-pointer mapui:px-2 mapui:py-1 mapui:text-sm mapui:font-mono ${S === p ? "mapui:bg-blue-100" : "hover:mapui:bg-gray-50"}`,
-            children: N
+            className: `mapui:cursor-pointer mapui:px-2 mapui:py-1 mapui:text-sm mapui:font-mono ${C === u ? "mapui:bg-blue-100" : "hover:mapui:bg-gray-50"}`,
+            children: v
           },
-          `${S}-${N}`
+          `${C}-${v}`
         ))
       }
     )
   ] });
 }
-const de = [
+const Ne = [
   "#4e79a7",
   "#f28e2b",
   "#e15759",
@@ -510,205 +929,254 @@ const de = [
   "#9c755f",
   "#bab0ac"
 ];
-function ae(e) {
-  return de[e % de.length];
+function pe(e) {
+  return Ne[e % Ne.length];
 }
-function Je(e) {
+function va(e) {
   return e[0] === "interpolate" ? "interpolate" : "match";
 }
-function Ke(e) {
+function ka(e) {
   const t = Array.isArray(e[1]) ? e[1][1] ?? "" : "", i = e[e.length - 1] ?? "#000000", r = [];
-  for (let n = 2; n < e.length - 1; n += 2)
-    r.push({ value: String(e[n] ?? ""), color: e[n + 1] ?? "#000000" });
+  for (let p = 2; p < e.length - 1; p += 2)
+    r.push({ value: String(e[p] ?? ""), color: e[p + 1] ?? "#000000" });
   return { property: t, pairs: r, fallback: i };
 }
-function he(e, t, i) {
+function ve(e, t, i) {
   const r = ["match", ["get", e]];
-  for (const n of t)
-    r.push(n.value, n.color);
+  for (const p of t)
+    r.push(p.value, p.color);
   return r.push(i), r;
 }
-function Qe(e) {
-  const t = Array.isArray(e[2]) ? e[2][1] ?? "" : "", i = [];
-  for (let r = 3; r < e.length; r += 2)
-    i.push({ stop: Number(e[r] ?? 0), color: e[r + 1] ?? "#000000" });
-  return { property: t, stops: i };
-}
-function ge(e, t) {
-  const i = ["interpolate", ["linear"], ["get", e]];
+function ne(e) {
+  const t = e[2];
+  let i = "";
+  Array.isArray(t) && (t[0] === "to-number" && Array.isArray(t[1]) ? i = t[1][1] ?? "" : i = t[1] ?? "");
+  const r = [];
+  for (let p = 3; p < e.length; p += 2)
+    r.push({ stop: Number(e[p] ?? 0), color: e[p + 1] ?? "#000000" });
+  return { property: i, stops: r };
+}
+function ke(e, t) {
+  const i = ["interpolate", ["linear"], ["to-number", ["get", e]]];
   for (const r of t)
     i.push(r.stop, r.color);
   return i;
 }
-const J = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500", te = "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50", be = "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50";
-function Ze({
+function Ce(e) {
+  return e.map((t) => ({ stopText: String(t.stop), color: t.color }));
+}
+function Ca(e) {
+  return e.map((t, i) => {
+    if (t.stopText.trim() === "") return "Value required";
+    const r = parseFloat(t.stopText);
+    if (isNaN(r)) return "Must be a number";
+    if (i > 0) {
+      const p = parseFloat(e[i - 1].stopText);
+      if (!isNaN(p) && r <= p) return "Must be greater than previous stop";
+    }
+    return "";
+  });
+}
+function Sa(e) {
+  const t = [];
+  for (const i of e) {
+    const r = parseFloat(i.stopText);
+    if (isNaN(r)) return null;
+    t.push({ stop: r, color: i.color });
+  }
+  return t;
+}
+const ae = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500", ue = "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50", Se = "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50";
+function Ta({
   value: e,
   onChange: t,
   availableProperties: i = [],
   onFetchDistinctValues: r
 }) {
-  const [n, p] = A(() => Je(e)), [o, b] = A(!1), m = Ke(e), w = Qe(e), d = n === "match" ? m.property : "", f = n === "match" ? m.pairs : [], c = n === "match" ? m.fallback : "#000000", u = n === "interpolate" ? w.property : "", s = n === "interpolate" ? w.stops : [], v = i.filter(
-    (h) => !h.type || h.type === "string"
-  ), N = i.filter(
-    (h) => h.type === "number" || h.type === "integer"
-  ), S = (h, T, I) => {
-    t(he(h, T, I));
-  }, x = (h) => {
-    S(h, f, c);
-  }, P = (h) => {
-    S(d, f, h);
-  }, C = (h, T) => {
-    const I = f.map((F, j) => j === h ? { ...F, value: T } : F);
-    S(d, I, c);
-  }, L = (h, T) => {
-    const I = f.map((F, j) => j === h ? { ...F, color: T } : F);
-    S(d, I, c);
-  }, E = (h) => {
-    const T = f.filter((I, F) => F !== h);
-    S(d, T, c);
-  }, y = () => {
-    const h = [...f, { value: "", color: ae(f.length) }];
-    S(d, h, c);
-  }, $ = async () => {
-    if (!(!r || !d)) {
-      b(!0);
+  const [p, u] = T(() => va(e)), [n, f] = T(!1), s = ka(e), g = p === "match" ? s.property : "", d = p === "match" ? s.pairs : [], x = p === "match" ? s.fallback : "#000000", [c, o] = T(() => {
+    const y = ne(e);
+    return Ce(y.stops);
+  }), [h, w] = T(() => p === "interpolate" ? ne(e).property : ""), [v, C] = T([]), A = V(e);
+  G(() => {
+    if (A.current !== e && p === "interpolate") {
+      const y = ne(e);
+      o(Ce(y.stops)), w(y.property), C([]);
+    }
+    A.current = e;
+  }, [e, p]);
+  const j = i.filter(
+    (y) => !y.type || y.type === "string"
+  ), m = i.filter(
+    (y) => y.type === "number" || y.type === "integer"
+  ), I = (y, D, E) => {
+    t(ve(y, D, E));
+  }, F = (y) => {
+    I(y, d, x);
+  }, b = (y) => {
+    I(g, d, y);
+  }, M = (y, D) => {
+    const E = d.map((L, B) => B === y ? { ...L, value: D } : L);
+    I(g, E, x);
+  }, P = (y, D) => {
+    const E = d.map((L, B) => B === y ? { ...L, color: D } : L);
+    I(g, E, x);
+  }, N = (y) => {
+    const D = d.filter((E, L) => L !== y);
+    I(g, D, x);
+  }, k = () => {
+    const y = [...d, { value: "", color: pe(d.length) }];
+    I(g, y, x);
+  }, O = async () => {
+    if (!(!r || !g)) {
+      f(!0);
       try {
-        const T = (await r(d)).map((I, F) => ({
-          value: I,
-          color: ae(F)
+        const D = (await r(g)).map((E, L) => ({
+          value: E,
+          color: pe(L)
         }));
-        S(d, T, c);
+        I(g, D, x);
       } finally {
-        b(!1);
+        f(!1);
       }
     }
-  }, M = (h, T) => {
-    t(ge(h, T));
-  }, g = (h) => {
-    M(h, s);
-  }, k = (h, T) => {
-    const I = s.map((F, j) => j === h ? { ...F, stop: T } : F);
-    M(u, I);
-  }, O = (h, T) => {
-    const I = s.map((F, j) => j === h ? { ...F, color: T } : F);
-    M(u, I);
-  }, U = (h) => {
-    const T = s.filter((I, F) => F !== h);
-    M(u, T);
-  }, G = () => {
-    var I;
-    const h = ((I = s[s.length - 1]) == null ? void 0 : I.stop) ?? 0, T = [...s, { stop: h + 10, color: ae(s.length) }];
-    M(u, T);
-  }, B = (h) => {
-    p(h), t(h === "match" ? he("", [], "#000000") : ge("", []));
+  }, R = (y, D) => {
+    const E = Ca(D);
+    if (C(E), y && D.length >= 2 && E.every((L) => !L)) {
+      const L = Sa(D);
+      L && t(ke(y, L));
+    }
+  }, W = (y) => {
+    w(y), R(y, c);
+  }, U = (y, D) => {
+    const E = c.map((L, B) => B === y ? { ...L, stopText: D } : L);
+    o(E), R(h, E);
+  }, q = (y, D) => {
+    const E = c.map((L, B) => B === y ? { ...L, color: D } : L);
+    o(E), R(h, E);
+  }, K = (y) => {
+    const D = c.filter((E, L) => L !== y);
+    o(D), R(h, D);
+  }, Q = () => {
+    var B;
+    const y = ((B = c[c.length - 1]) == null ? void 0 : B.stopText) ?? "0", D = parseFloat(y), E = isNaN(D) ? 0 : D + 10, L = [...c, { stopText: String(E), color: pe(c.length) }];
+    o(L), R(h, L);
+  }, Z = (y) => {
+    u(y), y === "match" ? t(ve("", [], "#000000")) : (o([]), w(""), C([]), t(ke("", [])));
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-    /* @__PURE__ */ a("div", { className: "mapui:flex mapui:overflow-hidden mapui:rounded mapui:border mapui:border-gray-300", children: ["match", "interpolate"].map((h) => /* @__PURE__ */ a(
+    /* @__PURE__ */ a("div", { className: "mapui:flex mapui:overflow-hidden mapui:rounded mapui:border mapui:border-gray-300", children: ["match", "interpolate"].map((y) => /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        onClick: () => B(h),
+        onClick: () => Z(y),
         className: [
           "mapui:flex-1 mapui:cursor-pointer mapui:border-0 mapui:px-3 mapui:py-1 mapui:text-xs mapui:capitalize mapui:outline-none",
           "focus:mapui:ring-1 focus:mapui:ring-inset focus:mapui:ring-blue-400",
-          n === h ? "mapui:bg-blue-500 mapui:text-white" : "mapui:bg-white mapui:text-gray-700 hover:mapui:bg-gray-50"
+          p === y ? "mapui:bg-blue-500 mapui:text-white" : "mapui:bg-white mapui:text-gray-700 hover:mapui:bg-gray-50"
         ].join(" "),
-        children: h === "match" ? "Categorical" : "Gradient"
+        children: y === "match" ? "Categorical" : "Gradient"
       },
-      h
+      y
     )) }),
-    n === "match" && /* @__PURE__ */ l(q, { children: [
+    p === "match" && /* @__PURE__ */ l(z, { children: [
       /* @__PURE__ */ l(
         "select",
         {
-          value: d,
-          onChange: (h) => x(h.target.value),
-          className: J,
+          value: g,
+          onChange: (y) => F(y.target.value),
+          className: ae,
           children: [
             /* @__PURE__ */ a("option", { value: "", children: "Select a property…" }),
-            v.map((h) => /* @__PURE__ */ a("option", { value: h.name, children: h.title ?? h.name }, h.name))
+            j.map((y) => /* @__PURE__ */ a("option", { value: y.name, children: y.title ?? y.name }, y.name))
           ]
         }
       ),
-      f.length > 0 && /* @__PURE__ */ a("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: f.map((h, T) => /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      d.length > 0 && /* @__PURE__ */ a("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: d.map((y, D) => /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "input",
           {
             type: "text",
-            value: h.value,
-            onChange: (I) => C(T, I.target.value),
+            value: y.value,
+            onChange: (E) => M(D, E.target.value),
             placeholder: "value",
-            className: `${J} mapui:flex-1`
+            className: `${ae} mapui:flex-1`
           }
         ),
         /* @__PURE__ */ a(
-          Y,
+          J,
           {
-            value: h.color,
-            onChange: (I) => L(T, I),
-            label: `Color for "${h.value}"`
+            value: y.color,
+            onChange: (E) => P(D, E),
+            label: `Color for "${y.value}"`
           }
         ),
-        /* @__PURE__ */ a("button", { type: "button", onClick: () => E(T), className: be, children: "×" })
-      ] }, T)) }),
+        /* @__PURE__ */ a("button", { type: "button", onClick: () => N(D), className: Se, children: "×" })
+      ] }, D)) }),
       /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-500 mapui:shrink-0", children: "Fallback:" }),
-        /* @__PURE__ */ a(Y, { value: c, onChange: P, label: "Fallback color" })
+        /* @__PURE__ */ a(J, { value: x, onChange: b, label: "Fallback color" })
       ] }),
       /* @__PURE__ */ l("div", { className: "mapui:flex mapui:gap-2", children: [
-        /* @__PURE__ */ a("button", { type: "button", onClick: y, className: te, children: "+ Add value" }),
-        r && d && /* @__PURE__ */ a(
+        /* @__PURE__ */ a("button", { type: "button", onClick: k, className: ue, children: "+ Add value" }),
+        r && g && /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: $,
-            disabled: o,
-            className: te,
-            children: o ? "Loading…" : "Auto-populate"
+            onClick: O,
+            disabled: n,
+            className: ue,
+            children: n ? "Loading…" : "Auto-populate"
           }
         )
       ] })
     ] }),
-    n === "interpolate" && /* @__PURE__ */ l(q, { children: [
+    p === "interpolate" && /* @__PURE__ */ l(z, { children: [
       /* @__PURE__ */ l(
         "select",
         {
-          value: u,
-          onChange: (h) => g(h.target.value),
-          className: J,
+          value: h,
+          onChange: (y) => W(y.target.value),
+          className: ae,
           children: [
             /* @__PURE__ */ a("option", { value: "", children: "Select a numeric property…" }),
-            N.map((h) => /* @__PURE__ */ a("option", { value: h.name, children: h.title ?? h.name }, h.name))
+            m.map((y) => /* @__PURE__ */ a("option", { value: y.name, children: y.title ?? y.name }, y.name))
           ]
         }
       ),
-      s.length > 0 && /* @__PURE__ */ a("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: s.map((h, T) => /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ a(
-          "input",
-          {
-            type: "number",
-            value: h.stop,
-            onChange: (I) => k(T, parseFloat(I.target.value) || 0),
-            placeholder: "stop",
-            className: `${J} mapui:w-24`
-          }
-        ),
-        /* @__PURE__ */ a(
-          Y,
-          {
-            value: h.color,
-            onChange: (I) => O(T, I),
-            label: `Color at stop ${h.stop}`
-          }
-        ),
-        /* @__PURE__ */ a("button", { type: "button", onClick: () => U(T), className: be, children: "×" })
-      ] }, T)) }),
-      /* @__PURE__ */ a("button", { type: "button", onClick: G, className: te, children: "+ Add stop" })
+      c.length > 0 && /* @__PURE__ */ a("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: c.map((y, D) => {
+        const E = v[D];
+        return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
+          /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+            /* @__PURE__ */ a(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                value: y.stopText,
+                onChange: (L) => U(D, L.target.value),
+                placeholder: "stop",
+                className: `${ae} mapui:w-24`
+              }
+            ),
+            /* @__PURE__ */ a(
+              J,
+              {
+                value: y.color,
+                onChange: (L) => q(D, L),
+                label: `Color at stop ${y.stopText}`
+              }
+            ),
+            /* @__PURE__ */ a("button", { type: "button", onClick: () => K(D), className: Se, children: "×" })
+          ] }),
+          E && /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-red-500", children: E })
+        ] }, D);
+      }) }),
+      /* @__PURE__ */ a("button", { type: "button", onClick: Q, className: ue, children: "+ Add stop" })
     ] })
   ] });
 }
-const z = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function ea({
+const H = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+function Da({
   value: e,
   onChange: t
 }) {
@@ -720,8 +1188,8 @@ function ea({
         type: "number",
         step: 0.5,
         value: i,
-        onChange: (n) => t([parseFloat(n.target.value) || 0, r]),
-        className: `${z} mapui:w-20`,
+        onChange: (p) => t([parseFloat(p.target.value) || 0, r]),
+        className: `${H} mapui:w-20`,
         "aria-label": "X",
         placeholder: "X"
       }
@@ -732,15 +1200,15 @@ function ea({
         type: "number",
         step: 0.5,
         value: r,
-        onChange: (n) => t([i, parseFloat(n.target.value) || 0]),
-        className: `${z} mapui:w-20`,
+        onChange: (p) => t([i, parseFloat(p.target.value) || 0]),
+        className: `${H} mapui:w-20`,
         "aria-label": "Y",
         placeholder: "Y"
       }
     )
   ] });
 }
-function aa({
+function La({
   value: e,
   onChange: t
 }) {
@@ -761,45 +1229,45 @@ function aa({
     /* @__PURE__ */ a("span", { className: "mapui:w-8 mapui:text-right mapui:text-xs mapui:text-gray-600", children: i.toFixed(2) })
   ] });
 }
-function ye({
+function Te({
   def: e,
   value: t,
   onChange: i,
   availableIcons: r,
-  availableProperties: n,
-  onFetchDistinctValues: p
+  availableProperties: p,
+  onFetchDistinctValues: u
 }) {
-  var o, b;
+  var n, f;
   switch (e.widget) {
     case "color": {
-      const m = Array.isArray(t), w = m ? t[t.length - 1] ?? "#000000" : "#000000";
+      const s = Array.isArray(t), g = s ? t[t.length - 1] ?? "#000000" : "#000000";
       return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-1 mapui:w-full", children: [
         /* @__PURE__ */ a("div", { className: "mapui:flex mapui:items-center mapui:justify-end", children: /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            title: m ? "Switch to static color" : "Switch to data-driven color",
+            title: s ? "Switch to static color" : "Switch to data-driven color",
             onClick: () => {
-              i(m ? w : ["match", ["get", ""], w]);
+              i(s ? g : ["match", ["get", ""], g]);
             },
             className: [
               "mapui:cursor-pointer mapui:rounded mapui:border mapui:px-1.5 mapui:py-0.5 mapui:font-mono mapui:text-xs mapui:outline-none",
               "focus:mapui:ring-1 focus:mapui:ring-blue-400",
-              m ? "mapui:border-blue-400 mapui:bg-blue-50 mapui:text-blue-700" : "mapui:border-gray-300 mapui:bg-white mapui:text-gray-500 hover:mapui:border-blue-400 hover:mapui:text-blue-600"
+              s ? "mapui:border-blue-400 mapui:bg-blue-50 mapui:text-blue-700" : "mapui:border-gray-300 mapui:bg-white mapui:text-gray-500 hover:mapui:border-blue-400 hover:mapui:text-blue-600"
             ].join(" "),
             children: "fx"
           }
         ) }),
-        m ? /* @__PURE__ */ a(
-          Ze,
+        s ? /* @__PURE__ */ a(
+          Ta,
           {
             value: t,
             onChange: (d) => i(d),
-            availableProperties: n,
-            onFetchDistinctValues: p
+            availableProperties: p,
+            onFetchDistinctValues: u
           }
         ) : /* @__PURE__ */ a(
-          Y,
+          J,
           {
             value: t ?? "#000000",
             onChange: i,
@@ -810,7 +1278,7 @@ function ye({
     }
     case "opacity":
       return /* @__PURE__ */ a(
-        aa,
+        La,
         {
           value: t,
           onChange: i
@@ -825,8 +1293,8 @@ function ye({
           max: e.max,
           step: e.step ?? 1,
           value: t ?? e.min ?? 0,
-          onChange: (m) => i(parseFloat(m.target.value) || 0),
-          className: z
+          onChange: (s) => i(parseFloat(s.target.value) || 0),
+          className: H
         }
       );
     case "boolean":
@@ -835,7 +1303,7 @@ function ye({
         {
           type: "checkbox",
           checked: t ?? !1,
-          onChange: (m) => i(m.target.checked),
+          onChange: (s) => i(s.target.checked),
           className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
         }
       );
@@ -843,15 +1311,15 @@ function ye({
       return /* @__PURE__ */ a(
         "select",
         {
-          value: t ?? ((o = e.options) == null ? void 0 : o[0]) ?? "",
-          onChange: (m) => i(m.target.value),
-          className: z,
-          children: (b = e.options) == null ? void 0 : b.map((m) => /* @__PURE__ */ a("option", { value: m, children: m }, m))
+          value: t ?? ((n = e.options) == null ? void 0 : n[0]) ?? "",
+          onChange: (s) => i(s.target.value),
+          className: H,
+          children: (f = e.options) == null ? void 0 : f.map((s) => /* @__PURE__ */ a("option", { value: s, children: s }, s))
         }
       );
     case "translate":
       return /* @__PURE__ */ a(
-        ea,
+        Da,
         {
           value: t,
           onChange: i
@@ -859,28 +1327,28 @@ function ye({
       );
     case "dasharray":
     case "stringArray": {
-      const m = t, w = m ? m.join(", ") : "";
+      const s = t, g = s ? s.join(", ") : "";
       return /* @__PURE__ */ a(
         "input",
         {
           type: "text",
-          value: w,
+          value: g,
           onChange: (d) => {
-            const f = d.target.value.trim();
-            if (!f) {
+            const x = d.target.value.trim();
+            if (!x) {
               i(void 0);
               return;
             }
             if (e.widget === "dasharray") {
-              const c = f.split(",").map((u) => parseFloat(u.trim())).filter((u) => !isNaN(u));
+              const c = x.split(",").map((o) => parseFloat(o.trim())).filter((o) => !isNaN(o));
               i(c.length > 0 ? c : void 0);
             } else {
-              const c = f.split(",").map((u) => u.trim()).filter(Boolean);
+              const c = x.split(",").map((o) => o.trim()).filter(Boolean);
               i(c.length > 0 ? c : void 0);
             }
           },
           placeholder: e.widget === "dasharray" ? "e.g. 2, 4" : "comma-separated",
-          className: z
+          className: H
         }
       );
     }
@@ -890,16 +1358,16 @@ function ye({
         {
           type: "text",
           value: t ?? "",
-          onChange: (m) => i(m.target.value || void 0),
-          className: z
+          onChange: (s) => i(s.target.value || void 0),
+          className: H
         }
       );
     case "icon-image":
       return /* @__PURE__ */ a(
-        He,
+        Na,
         {
           value: t ?? "",
-          onChange: (m) => i(m ?? void 0),
+          onChange: (s) => i(s ?? void 0),
           availableIcons: r
         }
       );
@@ -907,90 +1375,90 @@ function ye({
       return null;
   }
 }
-function ta({ def: e, value: t, onChange: i, availableIcons: r, availableProperties: n, onFetchDistinctValues: p }) {
-  const o = e.enableDefault !== void 0, b = t !== void 0;
-  if (o && e.widget === "boolean") {
-    const m = !e.enableDefault;
-    return /* @__PURE__ */ a(D, { label: e.label, description: e.description, children: /* @__PURE__ */ a(
+function Aa({ def: e, value: t, onChange: i, availableIcons: r, availableProperties: p, onFetchDistinctValues: u }) {
+  const n = e.enableDefault !== void 0, f = t !== void 0;
+  if (n && e.widget === "boolean") {
+    const s = !e.enableDefault;
+    return /* @__PURE__ */ a(S, { label: e.label, description: e.description, children: /* @__PURE__ */ a(
       "input",
       {
         type: "checkbox",
-        checked: t === m,
-        onChange: (w) => {
-          i(e.key, w.target.checked ? m : void 0);
+        checked: t === s,
+        onChange: (g) => {
+          i(e.key, g.target.checked ? s : void 0);
         },
         className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
       }
     ) });
   }
-  return o ? /* @__PURE__ */ a(D, { label: e.label, description: e.description, children: /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+  return n ? /* @__PURE__ */ a(S, { label: e.label, description: e.description, children: /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
     /* @__PURE__ */ a(
       "input",
       {
         type: "checkbox",
-        checked: b,
-        onChange: (m) => {
-          i(e.key, m.target.checked ? e.enableDefault : void 0);
+        checked: f,
+        onChange: (s) => {
+          i(e.key, s.target.checked ? e.enableDefault : void 0);
         },
         className: "mapui:h-4 mapui:w-4 mapui:shrink-0 mapui:accent-blue-600"
       }
     ),
-    b && /* @__PURE__ */ a(
-      ye,
+    f && /* @__PURE__ */ a(
+      Te,
       {
         def: e,
         value: t,
-        onChange: (m) => i(e.key, m),
+        onChange: (s) => i(e.key, s),
         availableIcons: r,
-        availableProperties: n,
-        onFetchDistinctValues: p
+        availableProperties: p,
+        onFetchDistinctValues: u
       }
     )
-  ] }) }) : /* @__PURE__ */ a(D, { label: e.label, description: e.description, children: /* @__PURE__ */ a(
-    ye,
+  ] }) }) : /* @__PURE__ */ a(S, { label: e.label, description: e.description, children: /* @__PURE__ */ a(
+    Te,
     {
       def: e,
       value: t,
-      onChange: (m) => i(e.key, m),
+      onChange: (s) => i(e.key, s),
       availableIcons: r,
-      availableProperties: n,
-      onFetchDistinctValues: p
+      availableProperties: p,
+      onFetchDistinctValues: u
     }
   ) });
 }
-function fe({
+function De({
   title: e,
   properties: t,
   values: i,
   onChange: r,
-  defaultOpen: n = !1,
-  availableIcons: p,
-  availableProperties: o,
-  onFetchDistinctValues: b
+  defaultOpen: p = !1,
+  availableIcons: u,
+  availableProperties: n,
+  onFetchDistinctValues: f
 }) {
-  const m = t.filter(
-    (w) => w.enableDefault !== void 0 && i[w.key] !== void 0
+  const s = t.filter(
+    (g) => g.enableDefault !== void 0 && i[g.key] !== void 0
   ).length;
-  return /* @__PURE__ */ a(_, { title: e, defaultOpen: n, badge: m || void 0, children: /* @__PURE__ */ a("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: t.map((w) => /* @__PURE__ */ a(
-    ta,
+  return /* @__PURE__ */ a(X, { title: e, defaultOpen: p, badge: s || void 0, children: /* @__PURE__ */ a("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: t.map((g) => /* @__PURE__ */ a(
+    Aa,
     {
-      def: w,
-      value: i[w.key],
+      def: g,
+      value: i[g.key],
       onChange: r,
-      availableIcons: p,
-      availableProperties: o,
-      onFetchDistinctValues: b
+      availableIcons: u,
+      availableProperties: n,
+      onFetchDistinctValues: f
     },
-    w.key
+    g.key
   )) }) });
 }
-function W(e) {
+function _(e) {
   return Array.isArray(e);
 }
-function ia(e) {
+function Ea(e) {
   return e[0] === "match" ? "match" : e[0] === "interpolate" ? "interpolate" : null;
 }
-function Me(e) {
+function We(e) {
   if (e[0] === "match") {
     const t = [];
     for (let r = 3; r < e.length; r += 2)
@@ -1006,12 +1474,12 @@ function Me(e) {
   }
   return [];
 }
-function ra(e) {
+function Ia(e) {
   if (e[0] === "match") {
     const t = [];
     for (let r = 2; r < e.length - 1; r += 2) {
-      const n = String(e[r]), p = e[r + 1];
-      typeof p == "string" && t.push({ label: n, color: p });
+      const p = String(e[r]), u = e[r + 1];
+      typeof u == "string" && t.push({ label: p, color: u });
     }
     const i = e[e.length - 1];
     return typeof i == "string" && t.push({ label: "Other", color: i }), t;
@@ -1019,18 +1487,23 @@ function ra(e) {
   if (e[0] === "interpolate") {
     const t = [];
     for (let i = 3; i < e.length; i += 2) {
-      const r = String(e[i]), n = e[i + 1];
-      typeof n == "string" && t.push({ label: r, color: n });
+      const r = String(e[i]), p = e[i + 1];
+      typeof p == "string" && t.push({ label: r, color: p });
     }
     return t;
   }
   return [];
 }
-function la(e) {
+function Ma(e) {
   const t = e[0] === "match" ? e[1] : e[0] === "interpolate" ? e[2] : null;
-  return Array.isArray(t) && t[0] === "get" && typeof t[1] == "string" ? t[1] : null;
+  if (Array.isArray(t)) {
+    if (t[0] === "get" && typeof t[1] == "string") return t[1];
+    if (t[0] === "to-number" && Array.isArray(t[1]) && t[1][0] === "get")
+      return t[1][1] ?? null;
+  }
+  return null;
 }
-function na(e) {
+function Fa(e) {
   switch (e.type) {
     case "fill":
       return e.paint["fill-color"] ?? "#000000";
@@ -1042,7 +1515,7 @@ function na(e) {
       return e.paint["text-color"] ?? e.paint["icon-color"] ?? "#000000";
   }
 }
-function oa(e) {
+function Pa(e) {
   switch (e.type) {
     case "fill":
       return "square";
@@ -1053,8 +1526,8 @@ function oa(e) {
       return "circle";
   }
 }
-function ie({ expr: e, height: t }) {
-  const i = Me(e);
+function oe({ expr: e, height: t }) {
+  const i = We(e);
   if (i.length === 0)
     return /* @__PURE__ */ a(
       "div",
@@ -1063,24 +1536,24 @@ function ie({ expr: e, height: t }) {
         title: "Expression (no preview)"
       }
     );
-  const r = e[0] === "interpolate", n = r ? `linear-gradient(to right, ${i.join(", ")})` : i.map((p, o) => `${p} ${o / i.length * 100}% ${(o + 1) / i.length * 100}%`).join(", ");
+  const r = e[0] === "interpolate", p = r ? `linear-gradient(to right, ${i.join(", ")})` : i.map((u, n) => `${u} ${n / i.length * 100}% ${(n + 1) / i.length * 100}%`).join(", ");
   return /* @__PURE__ */ a(
     "div",
     {
       style: {
         width: "100%",
         height: t ?? 32,
-        background: r ? n : `linear-gradient(to right, ${n})`,
+        background: r ? p : `linear-gradient(to right, ${p})`,
         borderRadius: 4
       },
       title: "Data-driven color expression"
     }
   );
 }
-function xe(e, t) {
-  return typeof e == "string" ? e : W(e) ? Me(e)[0] ?? t : t;
+function Le(e, t) {
+  return typeof e == "string" ? e : _(e) ? We(e)[0] ?? t : t;
 }
-function pa({ style: e }) {
+function ja({ style: e }) {
   if (e.type === "fill") {
     const r = e.paint["fill-color"];
     return /* @__PURE__ */ a(
@@ -1088,7 +1561,7 @@ function pa({ style: e }) {
       {
         className: "mapui:h-8 mapui:w-full mapui:rounded mapui:border mapui:border-gray-200 mapui:overflow-hidden",
         "aria-label": "Style preview",
-        children: W(r) ? /* @__PURE__ */ a(ie, { expr: r, height: 32 }) : /* @__PURE__ */ a(
+        children: _(r) ? /* @__PURE__ */ a(oe, { expr: r, height: 32 }) : /* @__PURE__ */ a(
           "div",
           {
             style: {
@@ -1096,7 +1569,7 @@ function pa({ style: e }) {
               height: "100%",
               backgroundColor: r,
               opacity: e.paint["fill-opacity"],
-              outline: e.paint["fill-outline-color"] && !W(e.paint["fill-outline-color"]) ? `2px solid ${e.paint["fill-outline-color"]}` : void 0
+              outline: e.paint["fill-outline-color"] && !_(e.paint["fill-outline-color"]) ? `2px solid ${e.paint["fill-outline-color"]}` : void 0
             }
           }
         )
@@ -1110,7 +1583,7 @@ function pa({ style: e }) {
       {
         className: "mapui:flex mapui:h-8 mapui:w-full mapui:items-center mapui:rounded mapui:border mapui:border-gray-200 mapui:px-2",
         "aria-label": "Style preview",
-        children: W(r) ? /* @__PURE__ */ a(ie, { expr: r, height: e.paint["line-width"] }) : /* @__PURE__ */ a(
+        children: _(r) ? /* @__PURE__ */ a(oe, { expr: r, height: e.paint["line-width"] }) : /* @__PURE__ */ a(
           "div",
           {
             style: {
@@ -1125,29 +1598,29 @@ function pa({ style: e }) {
     );
   }
   if (e.type === "circle") {
-    const r = e.paint["circle-color"], n = e.paint["circle-radius"] * 2;
+    const r = e.paint["circle-color"], p = e.paint["circle-radius"] * 2;
     return /* @__PURE__ */ a(
       "div",
       {
         className: "mapui:flex mapui:h-8 mapui:w-full mapui:items-center mapui:justify-center mapui:rounded mapui:border mapui:border-gray-200",
         "aria-label": "Style preview",
-        children: W(r) ? /* @__PURE__ */ a("div", { style: { width: n, height: n, borderRadius: "50%", overflow: "hidden" }, children: /* @__PURE__ */ a(ie, { expr: r, height: n }) }) : /* @__PURE__ */ a(
+        children: _(r) ? /* @__PURE__ */ a("div", { style: { width: p, height: p, borderRadius: "50%", overflow: "hidden" }, children: /* @__PURE__ */ a(oe, { expr: r, height: p }) }) : /* @__PURE__ */ a(
           "div",
           {
             style: {
-              width: n,
-              height: n,
+              width: p,
+              height: p,
               backgroundColor: r,
               opacity: e.paint["circle-opacity"],
               borderRadius: "50%",
-              border: e.paint["circle-stroke-color"] && !W(e.paint["circle-stroke-color"]) ? `${e.paint["circle-stroke-width"] ?? 1}px solid ${e.paint["circle-stroke-color"]}` : void 0
+              border: e.paint["circle-stroke-color"] && !_(e.paint["circle-stroke-color"]) ? `${e.paint["circle-stroke-width"] ?? 1}px solid ${e.paint["circle-stroke-color"]}` : void 0
             }
           }
         )
       }
     );
   }
-  const t = xe(e.paint["text-color"], "#333333"), i = xe(e.paint["icon-color"], "#333333");
+  const t = Le(e.paint["text-color"], "#333333"), i = Le(e.paint["icon-color"], "#333333");
   return /* @__PURE__ */ a(
     "div",
     {
@@ -1167,7 +1640,7 @@ function pa({ style: e }) {
     }
   );
 }
-const ua = [
+const Oa = [
   // Appearance (paint)
   { key: "fill-color", label: "Fill Color", widget: "color", group: "Appearance", category: "paint" },
   { key: "fill-opacity", label: "Fill Opacity", widget: "opacity", group: "Appearance", category: "paint" },
@@ -1179,7 +1652,7 @@ const ua = [
   { key: "fill-translate-anchor", label: "Translate Anchor", widget: "enum", group: "Transform", category: "paint", options: ["map", "viewport"], enableDefault: "map", description: '"map" moves the fill with the map when panning; "viewport" keeps the offset fixed on screen.' },
   // Sorting (layout)
   { key: "fill-sort-key", label: "Sort Key", widget: "number", group: "Sorting", category: "layout", step: 1, enableDefault: 0, description: "Features with a higher sort key are drawn on top of features with a lower sort key within this layer." }
-], ma = [
+], $a = [
   // Appearance (paint)
   { key: "line-color", label: "Line Color", widget: "color", group: "Appearance", category: "paint" },
   { key: "line-width", label: "Line Width", widget: "number", group: "Appearance", category: "paint", min: 0, step: 0.5 },
@@ -1200,7 +1673,7 @@ const ua = [
   { key: "line-round-limit", label: "Round Limit", widget: "number", group: "Cap & Join", category: "layout", step: 0.1, enableDefault: 1.05, description: 'When line-join is "round", angles sharper than this threshold (in radians) are bevelled instead of rounded.' },
   // Sorting (layout)
   { key: "line-sort-key", label: "Sort Key", widget: "number", group: "Sorting", category: "layout", step: 1, enableDefault: 0, description: "Features with a higher sort key are drawn on top of features with a lower sort key within this layer." }
-], sa = [
+], Ra = [
   // Appearance (paint)
   { key: "circle-color", label: "Circle Color", widget: "color", group: "Appearance", category: "paint" },
   { key: "circle-radius", label: "Radius", widget: "number", group: "Appearance", category: "paint", min: 0, step: 1 },
@@ -1218,7 +1691,7 @@ const ua = [
   { key: "circle-pitch-alignment", label: "Pitch Alignment", widget: "enum", group: "Alignment", category: "paint", options: ["map", "viewport"], enableDefault: "viewport", description: '"map" orients circles flat on the map surface; "viewport" keeps circles facing the screen (default).' },
   // Sorting (layout)
   { key: "circle-sort-key", label: "Sort Key", widget: "number", group: "Sorting", category: "layout", step: 1, enableDefault: 0, description: "Features with a higher sort key are drawn on top of features with a lower sort key within this layer." }
-], ca = [
+], Ba = [
   // Icon Appearance (paint)
   { key: "icon-color", label: "Icon Color", widget: "color", group: "Icon Appearance", category: "paint", enableDefault: "#000000" },
   { key: "icon-opacity", label: "Icon Opacity", widget: "opacity", group: "Icon Appearance", category: "paint", enableDefault: 1 },
@@ -1267,194 +1740,194 @@ const ua = [
   { key: "symbol-avoid-edges", label: "Avoid Edges", widget: "boolean", group: "Placement", category: "layout", enableDefault: !1, description: "When enabled, symbols near tile edges are hidden to avoid being clipped or doubled at tile boundaries." },
   { key: "symbol-sort-key", label: "Sort Key", widget: "number", group: "Placement", category: "layout", step: 1, enableDefault: 0, description: "Features with a higher sort key are prioritised in collision detection and drawn on top within this layer." },
   { key: "symbol-z-order", label: "Z-Order", widget: "enum", group: "Placement", category: "layout", options: ["auto", "viewport-y", "source"], enableDefault: "auto", description: '"viewport-y" renders symbols in top-to-bottom screen order (closer = higher); "source" preserves data source order; "auto" uses "viewport-y" when sort-key is unset.' }
-], da = {
-  fill: ua,
-  line: ma,
-  circle: sa,
-  symbol: ca
+], za = {
+  fill: Oa,
+  line: $a,
+  circle: Ra,
+  symbol: Ba
 };
-function ha(e) {
-  return da[e] ?? [];
+function Ua(e) {
+  return za[e] ?? [];
 }
-function we(e) {
+function Ae(e) {
   const t = {};
   for (const i of e)
     t[i.group] || (t[i.group] = []), t[i.group].push(i);
   return t;
 }
-const me = {
+const ge = {
   type: "fill",
   paint: { "fill-color": "#4a90d9", "fill-opacity": 0.6, "fill-outline-color": "transparent", "fill-antialias": !0 }
-}, ga = {
+}, qa = {
   type: "line",
   paint: { "line-color": "#2980b9", "line-width": 2, "line-opacity": 1 }
-}, Oe = {
+}, _e = {
   type: "circle",
   paint: { "circle-color": "#e74c3c", "circle-radius": 5, "circle-opacity": 0.9 }
-}, ba = {
+}, Ga = {
   type: "symbol",
   paint: { "text-color": "#333333" },
   layout: { "text-field": "{name}", "text-size": 14 }
-}, ya = {
+}, Wa = {
   layout: { "icon-image": "" }
 };
-function ve(e) {
+function Ee(e) {
   if (e.type !== "symbol") return "text";
   const t = e.layout ?? {}, i = "icon-image" in t, r = "text-field" in t;
   return i && r ? "both" : i ? "icon" : "text";
 }
-const fa = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500", K = {
+const _a = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500", te = {
   fill: "Fill",
   line: "Line",
   circle: "Circle",
   symbol: "Symbol"
-}, xa = ["text", "icon", "both"];
-function wa({ value: e, onChange: t, suggestedType: i, suggestedTypes: r, availableIcons: n, availableProperties: p, onFetchDistinctValues: o }) {
-  const b = r ?? (i ? [i] : []), [m, w] = A(() => ve(e));
-  X(() => {
-    w(ve(e));
+}, Va = ["text", "icon", "both"];
+function Ha({ value: e, onChange: t, suggestedType: i, suggestedTypes: r, availableIcons: p, availableProperties: u, onFetchDistinctValues: n }) {
+  const f = r ?? (i ? [i] : []), [s, g] = T(() => Ee(e));
+  G(() => {
+    g(Ee(e));
   }, [e.type]);
-  const d = (y) => {
-    t(y === "fill" ? me : y === "line" ? ga : y === "circle" ? Oe : ba);
-  }, f = (y) => {
-    if (y === m) return;
-    const $ = e.paint ?? {}, M = e.layout ?? {};
-    let g = { ...$ }, k = { ...M };
-    y === "icon" ? (g = Object.fromEntries(Object.entries(g).filter(([O]) => !O.startsWith("text-"))), k = Object.fromEntries(Object.entries(k).filter(([O]) => !O.startsWith("text-"))), "icon-image" in k || (k["icon-image"] = ya.layout["icon-image"])) : y === "text" && (g = Object.fromEntries(Object.entries(g).filter(([O]) => !O.startsWith("icon-"))), k = Object.fromEntries(Object.entries(k).filter(([O]) => !O.startsWith("icon-"))), "text-field" in k || (k["text-field"] = "{name}"), "text-size" in k || (k["text-size"] = 14), "text-color" in g || (g["text-color"] = "#333333")), w(y), t({
+  const d = (b) => {
+    t(b === "fill" ? ge : b === "line" ? qa : b === "circle" ? _e : Ga);
+  }, x = (b) => {
+    if (b === s) return;
+    const M = e.paint ?? {}, P = e.layout ?? {};
+    let N = { ...M }, k = { ...P };
+    b === "icon" ? (N = Object.fromEntries(Object.entries(N).filter(([O]) => !O.startsWith("text-"))), k = Object.fromEntries(Object.entries(k).filter(([O]) => !O.startsWith("text-"))), "icon-image" in k || (k["icon-image"] = Wa.layout["icon-image"])) : b === "text" && (N = Object.fromEntries(Object.entries(N).filter(([O]) => !O.startsWith("icon-"))), k = Object.fromEntries(Object.entries(k).filter(([O]) => !O.startsWith("icon-"))), "text-field" in k || (k["text-field"] = "{name}"), "text-size" in k || (k["text-size"] = 14), "text-color" in N || (N["text-color"] = "#333333")), g(b), t({
       ...e,
-      paint: g,
+      paint: N,
       layout: Object.keys(k).length > 0 ? k : void 0
     });
-  }, c = (y, $) => {
-    const M = { ...e.paint, [y]: $ };
-    for (const g of Object.keys(M))
-      M[g] === void 0 && delete M[g];
-    t({ ...e, paint: M });
-  }, u = (y, $) => {
-    const g = { ...e.layout ?? {}, [y]: $ };
-    for (const k of Object.keys(g))
-      g[k] === void 0 && delete g[k];
+  }, c = (b, M) => {
+    const P = { ...e.paint, [b]: M };
+    for (const N of Object.keys(P))
+      P[N] === void 0 && delete P[N];
+    t({ ...e, paint: P });
+  }, o = (b, M) => {
+    const N = { ...e.layout ?? {}, [b]: M };
+    for (const k of Object.keys(N))
+      N[k] === void 0 && delete N[k];
     t({
       ...e,
-      layout: Object.keys(g).length > 0 ? g : void 0
+      layout: Object.keys(N).length > 0 ? N : void 0
     });
   };
-  let s = ha(e.type);
-  e.type === "symbol" && (m === "text" ? s = s.filter((y) => !y.key.startsWith("icon-")) : m === "icon" && (s = s.filter((y) => !y.key.startsWith("text-"))));
-  const v = s.filter((y) => y.category === "paint"), N = s.filter((y) => y.category === "layout"), S = we(v), x = we(N), P = e.paint, C = e.layout ?? {}, L = Object.keys(S), E = Object.keys(x);
+  let h = Ua(e.type);
+  e.type === "symbol" && (s === "text" ? h = h.filter((b) => !b.key.startsWith("icon-")) : s === "icon" && (h = h.filter((b) => !b.key.startsWith("text-"))));
+  const w = h.filter((b) => b.category === "paint"), v = h.filter((b) => b.category === "layout"), C = Ae(w), A = Ae(v), j = e.paint, m = e.layout ?? {}, I = Object.keys(C), F = Object.keys(A);
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    b.length > 0 && !b.includes(e.type) && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:rounded mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-blue-800", children: [
+    f.length > 0 && !f.includes(e.type) && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:rounded mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-blue-800", children: [
       /* @__PURE__ */ l("span", { children: [
         "Detected geometry is suitable for",
         " ",
-        b.map((y, $) => /* @__PURE__ */ l("span", { children: [
-          $ > 0 && ($ === b.length - 1 ? " or " : ", "),
-          /* @__PURE__ */ a("strong", { children: K[y] })
-        ] }, y)),
+        f.map((b, M) => /* @__PURE__ */ l("span", { children: [
+          M > 0 && (M === f.length - 1 ? " or " : ", "),
+          /* @__PURE__ */ a("strong", { children: te[b] })
+        ] }, b)),
         " ",
         "style."
       ] }),
-      /* @__PURE__ */ a("div", { className: "mapui:flex mapui:gap-1", children: b.map((y) => /* @__PURE__ */ a(
+      /* @__PURE__ */ a("div", { className: "mapui:flex mapui:gap-1", children: f.map((b) => /* @__PURE__ */ a(
         "button",
         {
           type: "button",
-          onClick: () => d(y),
+          onClick: () => d(b),
           className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-blue-400 mapui:bg-white mapui:px-2 mapui:py-0.5 mapui:text-xs mapui:text-blue-700 hover:mapui:bg-blue-100",
-          children: K[y]
+          children: te[b]
         },
-        y
+        b
       )) })
     ] }),
-    /* @__PURE__ */ a(D, { label: "Style Type", children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "Style Type", children: /* @__PURE__ */ a(
       "select",
       {
         value: e.type,
-        onChange: (y) => d(y.target.value),
-        className: fa,
-        children: Object.keys(K).map((y) => /* @__PURE__ */ a("option", { value: y, children: K[y] }, y))
+        onChange: (b) => d(b.target.value),
+        className: _a,
+        children: Object.keys(te).map((b) => /* @__PURE__ */ a("option", { value: b, children: te[b] }, b))
       }
     ) }),
-    e.type === "symbol" && /* @__PURE__ */ a(D, { label: "Symbol Mode", children: /* @__PURE__ */ a("div", { className: "mapui:flex mapui:overflow-hidden mapui:rounded mapui:border mapui:border-gray-300", children: xa.map((y) => /* @__PURE__ */ a(
+    e.type === "symbol" && /* @__PURE__ */ a(S, { label: "Symbol Mode", children: /* @__PURE__ */ a("div", { className: "mapui:flex mapui:overflow-hidden mapui:rounded mapui:border mapui:border-gray-300", children: Va.map((b) => /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        onClick: () => f(y),
+        onClick: () => x(b),
         className: [
           "mapui:flex-1 mapui:cursor-pointer mapui:border-0 mapui:px-3 mapui:py-1 mapui:text-sm mapui:capitalize mapui:outline-none",
           "focus:mapui:ring-1 focus:mapui:ring-inset focus:mapui:ring-blue-400",
-          m === y ? "mapui:bg-blue-500 mapui:text-white" : "mapui:bg-white mapui:text-gray-700 hover:mapui:bg-gray-50"
+          s === b ? "mapui:bg-blue-500 mapui:text-white" : "mapui:bg-white mapui:text-gray-700 hover:mapui:bg-gray-50"
         ].join(" "),
-        children: y === "both" ? "Both" : y.charAt(0).toUpperCase() + y.slice(1)
+        children: b === "both" ? "Both" : b.charAt(0).toUpperCase() + b.slice(1)
       },
-      y
+      b
     )) }) }),
     /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-gray-100 mapui:p-2", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-1 mapui:text-xs mapui:text-gray-500", children: "Preview" }),
-      /* @__PURE__ */ a(pa, { style: e })
+      /* @__PURE__ */ a(ja, { style: e })
     ] }),
-    E.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
+    F.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-xs mapui:font-medium mapui:uppercase mapui:tracking-wide mapui:text-gray-500", children: "Layout" }),
-      E.map((y, $) => /* @__PURE__ */ a(
-        fe,
+      F.map((b, M) => /* @__PURE__ */ a(
+        De,
         {
-          title: y,
-          properties: x[y],
-          values: C,
-          onChange: u,
-          defaultOpen: $ === 0,
-          availableIcons: n,
-          availableProperties: p,
-          onFetchDistinctValues: o
+          title: b,
+          properties: A[b],
+          values: m,
+          onChange: o,
+          defaultOpen: M === 0,
+          availableIcons: p,
+          availableProperties: u,
+          onFetchDistinctValues: n
         },
-        y
+        b
       ))
     ] }),
-    L.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
+    I.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-xs mapui:font-medium mapui:uppercase mapui:tracking-wide mapui:text-gray-500", children: "Paint" }),
-      L.map((y) => /* @__PURE__ */ a(
-        fe,
+      I.map((b) => /* @__PURE__ */ a(
+        De,
         {
-          title: y,
-          properties: S[y],
-          values: P,
+          title: b,
+          properties: C[b],
+          values: j,
           onChange: c,
           defaultOpen: !1,
-          availableIcons: n,
-          availableProperties: p,
-          onFetchDistinctValues: o
+          availableIcons: p,
+          availableProperties: u,
+          onFetchDistinctValues: n
         },
-        y
+        b
       ))
     ] })
   ] });
 }
-const Ne = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function va({ value: e, onChange: t }) {
+const Ie = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+function Ya({ value: e, onChange: t }) {
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-    /* @__PURE__ */ a(D, { label: "Label", children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.label,
         onChange: (i) => t({ ...e, label: i.target.value }),
         placeholder: "Legend entry label",
-        className: Ne
+        className: Ie
       }
     ) }),
-    /* @__PURE__ */ a(D, { label: "Color", children: /* @__PURE__ */ a(
-      Y,
+    /* @__PURE__ */ a(S, { label: "Color", children: /* @__PURE__ */ a(
+      J,
       {
         value: e.color,
         onChange: (i) => t({ ...e, color: i }),
         label: "Entry color"
       }
     ) }),
-    /* @__PURE__ */ a(D, { label: "Shape", children: /* @__PURE__ */ l(
+    /* @__PURE__ */ a(S, { label: "Shape", children: /* @__PURE__ */ l(
       "select",
       {
         value: e.shape ?? "square",
         onChange: (i) => t({ ...e, shape: i.target.value }),
-        className: Ne,
+        className: Ie,
         children: [
           /* @__PURE__ */ a("option", { value: "square", children: "Square" }),
           /* @__PURE__ */ a("option", { value: "circle", children: "Circle" }),
@@ -1464,43 +1937,43 @@ function va({ value: e, onChange: t }) {
     ) })
   ] });
 }
-const ke = () => ({ label: "", color: "#4a90d9", shape: "square" }), re = 8, Ce = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function Na({ value: e, onChange: t, styles: i }) {
-  const r = (e == null ? void 0 : e.entries) ?? [], n = (e == null ? void 0 : e.displayMode) ?? "simple", p = Ee(() => {
+const Me = () => ({ label: "", color: "#4a90d9", shape: "square" }), me = 8, Fe = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+function Xa({ value: e, onChange: t, styles: i }) {
+  const r = (e == null ? void 0 : e.entries) ?? [], p = (e == null ? void 0 : e.displayMode) ?? "simple", u = Ue(() => {
     if (!i || i.length === 0) return null;
     const c = [];
-    let u = "simple", s = null;
-    for (const v of i) {
-      const N = na(v), S = oa(v);
-      if (W(N)) {
-        const x = ia(N);
-        if (!x) continue;
-        const P = ra(N).map((C) => ({ label: C.label, color: C.color, shape: S }));
-        c.push(...P), x === "interpolate" ? (u = "gradient", s || (s = la(N))) : u === "simple" && (u = "categorical");
-      } else typeof N == "string" && c.push({ label: v.type, color: N, shape: S });
+    let o = "simple", h = null;
+    for (const w of i) {
+      const v = Fa(w), C = Pa(w);
+      if (_(v)) {
+        const A = Ea(v);
+        if (!A) continue;
+        const j = Ia(v).map((m) => ({ label: m.label, color: m.color, shape: C }));
+        c.push(...j), A === "interpolate" ? (o = "gradient", h || (h = Ma(v))) : o === "simple" && (o = "categorical");
+      } else typeof v == "string" && c.length === 0 && c.push({ label: w.type, color: v, shape: C });
     }
-    return c.length === 0 ? null : { entries: c, mode: u, property: s };
-  }, [i]), o = () => {
-    t({ ...e, entries: [...r, ke()] });
-  }, b = (c, u) => {
-    const s = r.map((v, N) => N === c ? u : v);
-    t({ ...e, entries: s });
-  }, m = (c) => {
-    const u = r.filter((s, v) => v !== c);
-    t(u.length > 0 ? { ...e, entries: u } : void 0);
-  }, w = (c) => {
-    t(c ? { entries: [ke()] } : void 0);
+    return c.length === 0 ? null : { entries: c, mode: o, property: h };
+  }, [i]), n = () => {
+    t({ ...e, entries: [...r, Me()] });
+  }, f = (c, o) => {
+    const h = r.map((w, v) => v === c ? o : w);
+    t({ ...e, entries: h });
+  }, s = (c) => {
+    const o = r.filter((h, w) => w !== c);
+    t(o.length > 0 ? { ...e, entries: o } : void 0);
+  }, g = (c) => {
+    t(c ? { entries: [Me()] } : void 0);
   }, d = () => {
-    p && t({
-      entries: p.entries,
-      displayMode: p.mode,
-      ...p.mode === "gradient" && p.property ? { gradientProperty: p.property } : {},
-      ...p.mode === "categorical" ? { showLabelsCollapsed: !1 } : {}
+    u && t({
+      entries: u.entries,
+      displayMode: u.mode,
+      ...u.mode === "gradient" && u.property ? { gradientProperty: u.property } : {},
+      ...u.mode === "categorical" ? { showLabelsCollapsed: !1 } : {}
     });
-  }, f = (c) => {
+  }, x = (c) => {
     if (!e) return;
-    const u = { ...e, displayMode: c };
-    c !== "categorical" && delete u.showLabelsCollapsed, c !== "categorical" && delete u.showColorBar, c !== "gradient" && delete u.gradientProperty, c === "simple" && delete u.showDisclosureArrow, t(u);
+    const o = { ...e, displayMode: c };
+    c !== "categorical" && delete o.showLabelsCollapsed, c !== "categorical" && c !== "gradient" && delete o.showColorBar, c !== "gradient" && delete o.gradientProperty, c === "simple" && delete o.showDisclosureArrow, t(o);
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
@@ -1510,16 +1983,16 @@ function Na({ value: e, onChange: t, styles: i }) {
           type: "checkbox",
           id: "legend-enabled",
           checked: e !== void 0,
-          onChange: (c) => w(c.target.checked),
+          onChange: (c) => g(c.target.checked),
           className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
         }
       ),
       /* @__PURE__ */ a("label", { htmlFor: "legend-enabled", className: "mapui:text-sm mapui:font-medium mapui:text-gray-700", children: "Enable Legend" })
     ] }),
-    e === void 0 && p && p.entries.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
-      /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-blue-800", children: p.mode !== "simple" ? `This layer uses data-driven colors (${p.entries.length} ${p.entries.length === 1 ? "category" : "categories"})` : `This layer has ${p.entries.length} style ${p.entries.length === 1 ? "color" : "colors"}` }),
+    e === void 0 && u && u.entries.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+      /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-blue-800", children: u.mode !== "simple" ? `This layer uses data-driven colors (${u.entries.length} ${u.entries.length === 1 ? "category" : "categories"})` : `This layer has ${u.entries.length} style ${u.entries.length === 1 ? "color" : "colors"}` }),
       /* @__PURE__ */ l("div", { className: "mapui:mt-2 mapui:flex mapui:flex-wrap mapui:items-center mapui:gap-1.5", children: [
-        p.entries.slice(0, re).map((c, u) => /* @__PURE__ */ l(
+        u.entries.slice(0, me).map((c, o) => /* @__PURE__ */ l(
           "div",
           {
             className: "mapui:flex mapui:items-center mapui:gap-1",
@@ -1535,11 +2008,11 @@ function Na({ value: e, onChange: t, styles: i }) {
               /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-blue-700 mapui:truncate mapui:max-w-16", children: c.label })
             ]
           },
-          `${c.label}-${u}`
+          `${c.label}-${o}`
         )),
-        p.entries.length > re && /* @__PURE__ */ l("span", { className: "mapui:text-xs mapui:text-blue-600", children: [
+        u.entries.length > me && /* @__PURE__ */ l("span", { className: "mapui:text-xs mapui:text-blue-600", children: [
           "+",
-          p.entries.length - re,
+          u.entries.length - me,
           " more"
         ] })
       ] }),
@@ -1553,16 +2026,16 @@ function Na({ value: e, onChange: t, styles: i }) {
         }
       )
     ] }),
-    e !== void 0 && /* @__PURE__ */ l(q, { children: [
+    e !== void 0 && /* @__PURE__ */ l(z, { children: [
       /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ a("label", { htmlFor: "legend-display-mode", className: "mapui:text-sm mapui:text-gray-700", children: "Display Mode" }),
         /* @__PURE__ */ l(
           "select",
           {
             id: "legend-display-mode",
-            value: n,
-            onChange: (c) => f(c.target.value),
-            className: Ce,
+            value: p,
+            onChange: (c) => x(c.target.value),
+            className: Fe,
             children: [
               /* @__PURE__ */ a("option", { value: "simple", children: "Simple" }),
               /* @__PURE__ */ a("option", { value: "categorical", children: "Categorical" }),
@@ -1571,7 +2044,7 @@ function Na({ value: e, onChange: t, styles: i }) {
           }
         )
       ] }),
-      n === "categorical" && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      p === "categorical" && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "input",
           {
@@ -1584,7 +2057,7 @@ function Na({ value: e, onChange: t, styles: i }) {
         ),
         /* @__PURE__ */ a("label", { htmlFor: "legend-show-labels-collapsed", className: "mapui:text-sm mapui:text-gray-700", children: "Show labels in collapsed view" })
       ] }),
-      n === "categorical" && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      (p === "categorical" || p === "gradient") && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "input",
           {
@@ -1597,7 +2070,7 @@ function Na({ value: e, onChange: t, styles: i }) {
         ),
         /* @__PURE__ */ a("label", { htmlFor: "legend-show-color-bar", className: "mapui:text-sm mapui:text-gray-700", children: "Show color bar" })
       ] }),
-      (n === "categorical" || n === "gradient") && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      (p === "categorical" || p === "gradient") && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "input",
           {
@@ -1610,8 +2083,8 @@ function Na({ value: e, onChange: t, styles: i }) {
         ),
         /* @__PURE__ */ a("label", { htmlFor: "legend-show-disclosure-arrow", className: "mapui:text-sm mapui:text-gray-700", children: "Show disclosure arrow" })
       ] }),
-      n === "gradient" && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ a("label", { htmlFor: "legend-gradient-property", className: "mapui:text-sm mapui:text-gray-700", children: "Gradient Property" }),
+      p === "gradient" && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a("label", { htmlFor: "legend-gradient-property", className: "mapui:text-sm mapui:text-gray-700", children: "Gradient Label" }),
         /* @__PURE__ */ a(
           "input",
           {
@@ -1619,12 +2092,12 @@ function Na({ value: e, onChange: t, styles: i }) {
             id: "legend-gradient-property",
             value: e.gradientProperty ?? "",
             onChange: (c) => t({ ...e, gradientProperty: c.target.value || void 0 }),
-            placeholder: "e.g. POP_EST",
-            className: Ce
+            placeholder: "e.g. Population",
+            className: Fe
           }
         )
       ] }),
-      /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: r.map((c, u) => /* @__PURE__ */ l(
+      /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: r.map((c, o) => /* @__PURE__ */ l(
         "li",
         {
           className: "mapui:rounded mapui:border mapui:border-gray-200 mapui:p-3",
@@ -1632,40 +2105,40 @@ function Na({ value: e, onChange: t, styles: i }) {
             /* @__PURE__ */ l("div", { className: "mapui:mb-2 mapui:flex mapui:items-center mapui:justify-between", children: [
               /* @__PURE__ */ l("span", { className: "mapui:text-xs mapui:font-medium mapui:text-gray-600", children: [
                 "Entry ",
-                u + 1
+                o + 1
               ] }),
               /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: () => m(u),
+                  onClick: () => s(o),
                   className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-0.5 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
                   children: "Remove"
                 }
               )
             ] }),
             /* @__PURE__ */ a(
-              va,
+              Ya,
               {
                 value: c,
-                onChange: (s) => b(u, s)
+                onChange: (h) => f(o, h)
               }
             )
           ]
         },
-        u
+        o
       )) }),
       /* @__PURE__ */ l("div", { className: "mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: o,
+            onClick: n,
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-dashed mapui:border-gray-300 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-gray-600 hover:mapui:border-blue-400 hover:mapui:text-blue-600",
             children: "+ Add Entry"
           }
         ),
-        p && p.entries.length > 0 && /* @__PURE__ */ l(
+        u && u.entries.length > 0 && /* @__PURE__ */ l(
           "button",
           {
             type: "button",
@@ -1673,7 +2146,7 @@ function Na({ value: e, onChange: t, styles: i }) {
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-blue-300 mapui:bg-white mapui:px-3 mapui:py-2 mapui:text-sm mapui:font-medium mapui:text-blue-700 hover:mapui:bg-blue-50",
             children: [
               "Populate from Style (",
-              p.entries.length,
+              u.entries.length,
               " entries)"
             ]
           }
@@ -1682,47 +2155,47 @@ function Na({ value: e, onChange: t, styles: i }) {
     ] })
   ] });
 }
-function Se({
+function Pe({
   options: e,
   onChange: t,
   placeholder: i,
   className: r
 }) {
-  const [n, p] = A(() => (e == null ? void 0 : e.join(", ")) ?? "");
-  return X(() => {
-    p((e == null ? void 0 : e.join(", ")) ?? "");
+  const [p, u] = T(() => (e == null ? void 0 : e.join(", ")) ?? "");
+  return G(() => {
+    u((e == null ? void 0 : e.join(", ")) ?? "");
   }, [e == null ? void 0 : e.join(",")]), /* @__PURE__ */ a(
     "input",
     {
       type: "text",
-      value: n,
-      onChange: (b) => p(b.target.value),
+      value: p,
+      onChange: (f) => u(f.target.value),
       onBlur: () => {
-        const b = n.trim(), m = b ? b.split(",").map((w) => w.trim()).filter(Boolean) : void 0;
-        t(m), p((m == null ? void 0 : m.join(", ")) ?? "");
+        const f = p.trim(), s = f ? f.split(",").map((g) => g.trim()).filter(Boolean) : void 0;
+        t(s), u((s == null ? void 0 : s.join(", ")) ?? "");
       },
       placeholder: i,
       className: r
     }
   );
 }
-const R = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500", ka = {
+const $ = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500", Ja = {
   text: { type: "text", property: "", label: "", autocomplete: !1 },
   number: { type: "number", property: "", label: "", inputMode: "input", operator: "eq" },
   datetime: { type: "datetime", property: "", label: "", range: !1 },
   select: { type: "select", property: "", label: "" }
 };
-function Ca({ value: e, onChange: t, availableProperties: i }) {
-  const r = (o) => {
-    t({ ...ka[o], property: e.property, label: e.label });
-  }, n = (o) => t({ ...e, ...o }), p = i && i.length > 0;
+function Ka({ value: e, onChange: t, availableProperties: i }) {
+  const r = (n) => {
+    t({ ...Ja[n], property: e.property, label: e.label });
+  }, p = (n) => t({ ...e, ...n }), u = i && i.length > 0;
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ a(D, { label: "Field Type", children: /* @__PURE__ */ l(
+    /* @__PURE__ */ a(S, { label: "Field Type", children: /* @__PURE__ */ l(
       "select",
       {
         value: e.type,
-        onChange: (o) => r(o.target.value),
-        className: R,
+        onChange: (n) => r(n.target.value),
+        className: $,
         children: [
           /* @__PURE__ */ a("option", { value: "text", children: "Text" }),
           /* @__PURE__ */ a("option", { value: "number", children: "Number" }),
@@ -1731,15 +2204,15 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ a(D, { label: "Property", required: !0, children: p ? /* @__PURE__ */ l(
+    /* @__PURE__ */ a(S, { label: "Property", required: !0, children: u ? /* @__PURE__ */ l(
       "select",
       {
         value: e.property,
-        onChange: (o) => n({ property: o.target.value }),
-        className: R,
+        onChange: (n) => p({ property: n.target.value }),
+        className: $,
         children: [
           /* @__PURE__ */ a("option", { value: "", children: "Select a property…" }),
-          i.map((o) => /* @__PURE__ */ a("option", { value: o.name, children: o.title ?? o.name }, o.name))
+          i.map((n) => /* @__PURE__ */ a("option", { value: n.name, children: n.title ?? n.name }, n.name))
         ]
       }
     ) : /* @__PURE__ */ a(
@@ -1747,32 +2220,32 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
       {
         type: "text",
         value: e.property,
-        onChange: (o) => n({ property: o.target.value }),
+        onChange: (n) => p({ property: n.target.value }),
         placeholder: "e.g. name",
-        className: R
+        className: $
       }
     ) }),
-    /* @__PURE__ */ a(D, { label: "Label", children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.label,
-        onChange: (o) => n({ label: o.target.value }),
+        onChange: (n) => p({ label: n.target.value }),
         placeholder: "Display label",
-        className: R
+        className: $
       }
     ) }),
-    /* @__PURE__ */ a(D, { label: "Placeholder", children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "Placeholder", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.placeholder ?? "",
-        onChange: (o) => n({ placeholder: o.target.value || void 0 }),
+        onChange: (n) => p({ placeholder: n.target.value || void 0 }),
         placeholder: "Input placeholder text",
-        className: R
+        className: $
       }
     ) }),
-    e.type === "text" && /* @__PURE__ */ l(q, { children: [
+    e.type === "text" && /* @__PURE__ */ l(z, { children: [
       /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "input",
@@ -1780,7 +2253,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
             type: "checkbox",
             id: "text-autocomplete",
             checked: e.autocomplete ?? !1,
-            onChange: (o) => t({ ...e, autocomplete: o.target.checked }),
+            onChange: (n) => t({ ...e, autocomplete: n.target.checked }),
             className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
           }
         ),
@@ -1793,47 +2266,60 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
             type: "checkbox",
             id: "text-prefetch",
             checked: e.prefetch ?? !1,
-            onChange: (o) => t({ ...e, prefetch: o.target.checked }),
+            onChange: (n) => t({ ...e, prefetch: n.target.checked }),
             className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
           }
         ),
         /* @__PURE__ */ a("label", { htmlFor: "text-prefetch", className: "mapui:text-sm mapui:text-gray-700", children: "Prefetch Options" })
       ] }),
-      /* @__PURE__ */ a(D, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ a(
-        Se,
+      /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "checkbox",
+            id: "text-zoomTo",
+            checked: e.zoomTo ?? !1,
+            onChange: (n) => t({ ...e, zoomTo: n.target.checked }),
+            className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
+          }
+        ),
+        /* @__PURE__ */ a("label", { htmlFor: "text-zoomTo", className: "mapui:text-sm mapui:text-gray-700", children: "Zoom to Result" })
+      ] }),
+      /* @__PURE__ */ a(S, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ a(
+        Pe,
         {
           options: e.options,
-          onChange: (o) => t({ ...e, options: o }),
+          onChange: (n) => t({ ...e, options: n }),
           placeholder: "option1, option2",
-          className: R
+          className: $
         }
       ) })
     ] }),
-    e.type === "number" && /* @__PURE__ */ l(q, { children: [
-      /* @__PURE__ */ a(D, { label: "Input Mode", children: /* @__PURE__ */ l(
+    e.type === "number" && /* @__PURE__ */ l(z, { children: [
+      /* @__PURE__ */ a(S, { label: "Input Mode", children: /* @__PURE__ */ l(
         "select",
         {
           value: e.inputMode ?? "input",
-          onChange: (o) => t({
+          onChange: (n) => t({
             ...e,
-            inputMode: o.target.value
+            inputMode: n.target.value
           }),
-          className: R,
+          className: $,
           children: [
             /* @__PURE__ */ a("option", { value: "input", children: "Input" }),
             /* @__PURE__ */ a("option", { value: "slider", children: "Slider" })
           ]
         }
       ) }),
-      /* @__PURE__ */ a(D, { label: "Operator", children: /* @__PURE__ */ l(
+      /* @__PURE__ */ a(S, { label: "Operator", children: /* @__PURE__ */ l(
         "select",
         {
           value: e.operator ?? "eq",
-          onChange: (o) => t({
+          onChange: (n) => t({
             ...e,
-            operator: o.target.value
+            operator: n.target.value
           }),
-          className: R,
+          className: $,
           children: [
             /* @__PURE__ */ a("option", { value: "eq", children: "Equal (=)" }),
             /* @__PURE__ */ a("option", { value: "gt", children: "Greater Than (>)" }),
@@ -1844,41 +2330,69 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
           ]
         }
       ) }),
+      /* @__PURE__ */ a(S, { label: "Operator Labels", children: /* @__PURE__ */ l(
+        "select",
+        {
+          value: e.operatorLabelStyle ?? "symbol",
+          onChange: (n) => t({
+            ...e,
+            operatorLabelStyle: n.target.value
+          }),
+          className: $,
+          children: [
+            /* @__PURE__ */ a("option", { value: "symbol", children: "Symbols (=, >, <)" }),
+            /* @__PURE__ */ a("option", { value: "word", children: "Words (equal to, greater than)" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "checkbox",
+            id: "number-show-range",
+            checked: e.showRange ?? !1,
+            onChange: (n) => t({ ...e, showRange: n.target.checked }),
+            className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
+          }
+        ),
+        /* @__PURE__ */ a("label", { htmlFor: "number-show-range", className: "mapui:text-sm mapui:text-gray-700", children: "Show Range on Slider" })
+      ] }),
       /* @__PURE__ */ l("div", { className: "mapui:grid mapui:grid-cols-3 mapui:gap-2", children: [
-        /* @__PURE__ */ a(D, { label: "Min", children: /* @__PURE__ */ a(
+        /* @__PURE__ */ a(S, { label: "Min", children: /* @__PURE__ */ a(
           "input",
           {
             type: "number",
             value: e.min ?? "",
-            onChange: (o) => t({
+            onChange: (n) => t({
               ...e,
-              min: o.target.value ? parseFloat(o.target.value) : void 0
+              min: n.target.value ? parseFloat(n.target.value) : void 0
             }),
-            className: R
+            className: $
           }
         ) }),
-        /* @__PURE__ */ a(D, { label: "Max", children: /* @__PURE__ */ a(
+        /* @__PURE__ */ a(S, { label: "Max", children: /* @__PURE__ */ a(
           "input",
           {
             type: "number",
             value: e.max ?? "",
-            onChange: (o) => t({
+            onChange: (n) => t({
               ...e,
-              max: o.target.value ? parseFloat(o.target.value) : void 0
+              max: n.target.value ? parseFloat(n.target.value) : void 0
             }),
-            className: R
+            className: $
           }
         ) }),
-        /* @__PURE__ */ a(D, { label: "Step", children: /* @__PURE__ */ a(
+        /* @__PURE__ */ a(S, { label: "Step", children: /* @__PURE__ */ a(
           "input",
           {
             type: "number",
             value: e.step ?? "",
-            onChange: (o) => t({
+            onChange: (n) => t({
               ...e,
-              step: o.target.value ? parseFloat(o.target.value) : void 0
+              step: n.target.value ? parseFloat(n.target.value) : void 0
             }),
-            className: R
+            className: $
           }
         ) })
       ] })
@@ -1890,13 +2404,13 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
           type: "checkbox",
           id: "datetime-range",
           checked: e.range ?? !1,
-          onChange: (o) => t({ ...e, range: o.target.checked }),
+          onChange: (n) => t({ ...e, range: n.target.checked }),
           className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
         }
       ),
       /* @__PURE__ */ a("label", { htmlFor: "datetime-range", className: "mapui:text-sm mapui:text-gray-700", children: "Date Range" })
     ] }),
-    e.type === "select" && /* @__PURE__ */ l(q, { children: [
+    e.type === "select" && /* @__PURE__ */ l(z, { children: [
       /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "input",
@@ -1904,58 +2418,71 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
             type: "checkbox",
             id: "select-prefetch",
             checked: e.prefetch ?? !1,
-            onChange: (o) => t({ ...e, prefetch: o.target.checked }),
+            onChange: (n) => t({ ...e, prefetch: n.target.checked }),
             className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
           }
         ),
         /* @__PURE__ */ a("label", { htmlFor: "select-prefetch", className: "mapui:text-sm mapui:text-gray-700", children: "Prefetch Options" })
       ] }),
-      /* @__PURE__ */ a(D, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ a(
-        Se,
+      /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "checkbox",
+            id: "select-zoomTo",
+            checked: e.zoomTo ?? !1,
+            onChange: (n) => t({ ...e, zoomTo: n.target.checked }),
+            className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
+          }
+        ),
+        /* @__PURE__ */ a("label", { htmlFor: "select-zoomTo", className: "mapui:text-sm mapui:text-gray-700", children: "Zoom to Result" })
+      ] }),
+      /* @__PURE__ */ a(S, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ a(
+        Pe,
         {
           options: e.options,
-          onChange: (o) => t({ ...e, options: o }),
+          onChange: (n) => t({ ...e, options: n }),
           placeholder: "option1, option2",
-          className: R
+          className: $
         }
       ) })
     ] })
   ] });
 }
-const Sa = () => ({
+const Qa = () => ({
   type: "text",
   property: "",
   label: "",
   autocomplete: !1
 });
-function Da({ fields: e, onChange: t, availableProperties: i }) {
-  const [r, n] = A(null), p = () => {
-    const d = [...e, Sa()];
-    t(d), n(d.length - 1);
-  }, o = (d, f) => {
-    t(e.map((c, u) => u === d ? f : c));
-  }, b = (d) => {
-    t(e.filter((f, c) => c !== d)), n(null);
-  }, m = (d) => {
+function Za({ fields: e, onChange: t, availableProperties: i }) {
+  const [r, p] = T(null), u = () => {
+    const d = [...e, Qa()];
+    t(d), p(d.length - 1);
+  }, n = (d, x) => {
+    t(e.map((c, o) => o === d ? x : c));
+  }, f = (d) => {
+    t(e.filter((x, c) => c !== d)), p(null);
+  }, s = (d) => {
     if (d === 0) return;
-    const f = [...e];
-    [f[d - 1], f[d]] = [f[d], f[d - 1]], t(f), n(d - 1);
-  }, w = (d) => {
+    const x = [...e];
+    [x[d - 1], x[d]] = [x[d], x[d - 1]], t(x), p(d - 1);
+  }, g = (d) => {
     if (d === e.length - 1) return;
-    const f = [...e];
-    [f[d], f[d + 1]] = [f[d + 1], f[d]], t(f), n(d + 1);
+    const x = [...e];
+    [x[d], x[d + 1]] = [x[d + 1], x[d]], t(x), p(d + 1);
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
     e.length === 0 && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No search fields configured." }),
-    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((d, f) => /* @__PURE__ */ l("li", { className: "mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white", children: [
+    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((d, x) => /* @__PURE__ */ l("li", { className: "mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white", children: [
       /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-1 mapui:px-3 mapui:py-2", children: [
         /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
           /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: () => m(f),
-              disabled: f === 0,
+              onClick: () => s(x),
+              disabled: x === 0,
               "aria-label": "Move up",
               className: "mapui:cursor-pointer mapui:rounded mapui:border-none mapui:bg-transparent mapui:px-1 mapui:text-xs mapui:text-gray-400 hover:mapui:text-gray-600 disabled:mapui:opacity-30",
               children: "▲"
@@ -1965,8 +2492,8 @@ function Da({ fields: e, onChange: t, availableProperties: i }) {
             "button",
             {
               type: "button",
-              onClick: () => w(f),
-              disabled: f === e.length - 1,
+              onClick: () => g(x),
+              disabled: x === e.length - 1,
               "aria-label": "Move down",
               className: "mapui:cursor-pointer mapui:rounded mapui:border-none mapui:bg-transparent mapui:px-1 mapui:text-xs mapui:text-gray-400 hover:mapui:text-gray-600 disabled:mapui:opacity-30",
               children: "▼"
@@ -1977,7 +2504,7 @@ function Da({ fields: e, onChange: t, availableProperties: i }) {
           "button",
           {
             type: "button",
-            onClick: () => n(r === f ? null : f),
+            onClick: () => p(r === x ? null : x),
             className: "mapui:flex-1 mapui:cursor-pointer mapui:border-none mapui:bg-transparent mapui:text-left mapui:text-sm mapui:font-medium mapui:text-gray-800",
             children: [
               /* @__PURE__ */ a("span", { className: "mapui:mr-1 mapui:rounded mapui:bg-gray-100 mapui:px-1 mapui:py-0.5 mapui:text-xs mapui:font-mono mapui:text-gray-500", children: d.type }),
@@ -1989,41 +2516,41 @@ function Da({ fields: e, onChange: t, availableProperties: i }) {
           "button",
           {
             type: "button",
-            onClick: () => b(f),
+            onClick: () => f(x),
             "aria-label": "Remove field",
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-0.5 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
             children: "Remove"
           }
         )
       ] }),
-      r === f && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(
-        Ca,
+      r === x && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(
+        Ka,
         {
           value: d,
-          onChange: (c) => o(f, c),
+          onChange: (c) => n(x, c),
           availableProperties: i
         }
       ) })
-    ] }, f)) }),
+    ] }, x)) }),
     /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        onClick: p,
+        onClick: u,
         className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-dashed mapui:border-gray-300 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-gray-600 hover:mapui:border-blue-400 hover:mapui:text-blue-600",
         children: "+ Add Search Field"
       }
     )
   ] });
 }
-function Ta(e) {
+function et(e) {
   return Object.entries(e).map(([t, i]) => ({
     key: t,
     label: i.label ?? "",
     visible: i.visible ?? !0
   }));
 }
-function La(e) {
+function at(e) {
   const t = {};
   for (const i of e)
     t[i.key] = {
@@ -2032,38 +2559,38 @@ function La(e) {
     };
   return t;
 }
-const le = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function Aa({ value: e, onChange: t, availableProperties: i }) {
-  const r = Ta(e), n = i && i.length > 0, p = (u) => t(La(u)), o = () => {
-    p([...r, { key: "", label: "", visible: !0 }]);
-  }, b = (u) => {
-    p(r.filter((s, v) => v !== u));
-  }, m = (u, s) => {
-    p(r.map((v, N) => N === u ? { ...v, ...s } : v));
-  }, w = (u, s) => {
-    const v = i == null ? void 0 : i.find((S) => S.name === s), N = (v == null ? void 0 : v.title) ?? r[u].label;
-    p(r.map((S, x) => x === u ? { ...S, key: s, label: N } : S));
-  }, d = (u) => {
-    if (u === 0) return;
-    const s = [...r];
-    [s[u - 1], s[u]] = [s[u], s[u - 1]], p(s);
-  }, f = (u) => {
-    if (u === r.length - 1) return;
-    const s = [...r];
-    [s[u], s[u + 1]] = [s[u + 1], s[u]], p(s);
+const se = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+function tt({ value: e, onChange: t, availableProperties: i }) {
+  const r = et(e), p = i && i.length > 0, u = (o) => t(at(o)), n = () => {
+    u([...r, { key: "", label: "", visible: !0 }]);
+  }, f = (o) => {
+    u(r.filter((h, w) => w !== o));
+  }, s = (o, h) => {
+    u(r.map((w, v) => v === o ? { ...w, ...h } : w));
+  }, g = (o, h) => {
+    const w = i == null ? void 0 : i.find((C) => C.name === h), v = (w == null ? void 0 : w.title) ?? r[o].label;
+    u(r.map((C, A) => A === o ? { ...C, key: h, label: v } : C));
+  }, d = (o) => {
+    if (o === 0) return;
+    const h = [...r];
+    [h[o - 1], h[o]] = [h[o], h[o - 1]], u(h);
+  }, x = (o) => {
+    if (o === r.length - 1) return;
+    const h = [...r];
+    [h[o], h[o + 1]] = [h[o + 1], h[o]], u(h);
   }, c = () => {
     if (!i) return;
-    const u = i.map((s) => ({
-      key: s.name,
-      label: s.title ?? "",
+    const o = i.map((h) => ({
+      key: h.name,
+      label: h.title ?? "",
       visible: !0
     }));
-    p(u);
+    u(o);
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-    r.length === 0 ? /* @__PURE__ */ l(q, { children: [
+    r.length === 0 ? /* @__PURE__ */ l(z, { children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No property display rules configured. All properties will be shown." }),
-      n && /* @__PURE__ */ a(
+      p && /* @__PURE__ */ a(
         "button",
         {
           type: "button",
@@ -2072,20 +2599,20 @@ function Aa({ value: e, onChange: t, availableProperties: i }) {
           children: "Populate from API metadata"
         }
       )
-    ] }) : /* @__PURE__ */ l(q, { children: [
+    ] }) : /* @__PURE__ */ l(z, { children: [
       /* @__PURE__ */ l("div", { className: "mapui:grid mapui:items-center mapui:gap-2 mapui:px-8", style: { gridTemplateColumns: "1fr 1fr auto" }, children: [
-        /* @__PURE__ */ a(D, { label: "Property Key", children: /* @__PURE__ */ a("span", {}) }),
-        /* @__PURE__ */ a(D, { label: "Display Label", children: /* @__PURE__ */ a("span", {}) }),
+        /* @__PURE__ */ a(S, { label: "Property Key", children: /* @__PURE__ */ a("span", {}) }),
+        /* @__PURE__ */ a(S, { label: "Display Label", children: /* @__PURE__ */ a("span", {}) }),
         /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:font-medium mapui:text-gray-600", children: "Visible" })
       ] }),
-      /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1.5 mapui:p-0", children: r.map((u, s) => /* @__PURE__ */ l("li", { className: "mapui:flex mapui:items-center mapui:gap-1 mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-2 mapui:py-1.5", children: [
+      /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1.5 mapui:p-0", children: r.map((o, h) => /* @__PURE__ */ l("li", { className: "mapui:flex mapui:items-center mapui:gap-1 mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-2 mapui:py-1.5", children: [
         /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
           /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: () => d(s),
-              disabled: s === 0,
+              onClick: () => d(h),
+              disabled: h === 0,
               "aria-label": "Move up",
               className: "mapui:cursor-pointer mapui:rounded mapui:border-none mapui:bg-transparent mapui:px-1 mapui:text-xs mapui:text-gray-400 hover:mapui:text-gray-600 disabled:mapui:opacity-30",
               children: "▲"
@@ -2095,8 +2622,8 @@ function Aa({ value: e, onChange: t, availableProperties: i }) {
             "button",
             {
               type: "button",
-              onClick: () => f(s),
-              disabled: s === r.length - 1,
+              onClick: () => x(h),
+              disabled: h === r.length - 1,
               "aria-label": "Move down",
               className: "mapui:cursor-pointer mapui:rounded mapui:border-none mapui:bg-transparent mapui:px-1 mapui:text-xs mapui:text-gray-400 hover:mapui:text-gray-600 disabled:mapui:opacity-30",
               children: "▼"
@@ -2104,46 +2631,46 @@ function Aa({ value: e, onChange: t, availableProperties: i }) {
           )
         ] }),
         /* @__PURE__ */ l("div", { className: "mapui:grid mapui:flex-1 mapui:items-center mapui:gap-2", style: { gridTemplateColumns: "1fr 1fr auto auto" }, children: [
-          n ? /* @__PURE__ */ l(
+          p ? /* @__PURE__ */ l(
             "select",
             {
-              value: u.key,
-              onChange: (v) => w(s, v.target.value),
+              value: o.key,
+              onChange: (w) => g(h, w.target.value),
               "aria-label": "Property key",
-              className: le,
+              className: se,
               children: [
                 /* @__PURE__ */ a("option", { value: "", children: "Select a property…" }),
-                i.map((v) => /* @__PURE__ */ a("option", { value: v.name, children: v.title ?? v.name }, v.name))
+                i.map((w) => /* @__PURE__ */ a("option", { value: w.name, children: w.title ?? w.name }, w.name))
               ]
             }
           ) : /* @__PURE__ */ a(
             "input",
             {
               type: "text",
-              value: u.key,
-              onChange: (v) => m(s, { key: v.target.value }),
+              value: o.key,
+              onChange: (w) => s(h, { key: w.target.value }),
               placeholder: "property_name",
               "aria-label": "Property key",
-              className: le
+              className: se
             }
           ),
           /* @__PURE__ */ a(
             "input",
             {
               type: "text",
-              value: u.label,
-              onChange: (v) => m(s, { label: v.target.value }),
+              value: o.label,
+              onChange: (w) => s(h, { label: w.target.value }),
               placeholder: "Friendly name",
               "aria-label": "Display label",
-              className: le
+              className: se
             }
           ),
           /* @__PURE__ */ a(
             "input",
             {
               type: "checkbox",
-              checked: u.visible,
-              onChange: (v) => m(s, { visible: v.target.checked }),
+              checked: o.visible,
+              onChange: (w) => s(h, { visible: w.target.checked }),
               "aria-label": "Visible",
               className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
             }
@@ -2152,60 +2679,60 @@ function Aa({ value: e, onChange: t, availableProperties: i }) {
             "button",
             {
               type: "button",
-              onClick: () => b(s),
+              onClick: () => f(h),
               "aria-label": "Remove property",
               className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-0.5 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
               children: "Remove"
             }
           )
         ] })
-      ] }, s)) })
+      ] }, h)) })
     ] }),
     /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        onClick: o,
+        onClick: n,
         className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-dashed mapui:border-gray-300 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-gray-600 hover:mapui:border-blue-400 hover:mapui:text-blue-600",
         children: "+ Add Property"
       }
     )
   ] });
 }
-const je = /geojson\.org\/schema\/(\w+)\.json/;
-function Ia(e) {
-  return !!e.$ref && je.test(e.$ref);
+const Ve = /geojson\.org\/schema\/(\w+)\.json/;
+function it(e) {
+  return !!e.$ref && Ve.test(e.$ref);
 }
-function $e(e) {
-  const t = je.exec(e);
+function He(e) {
+  const t = Ve.exec(e);
   return t ? t[1] : null;
 }
-function Re(e) {
+function Ye(e) {
   const t = e.toLowerCase();
   return t.includes("polygon") ? "fill" : t.includes("linestring") ? "line" : t.includes("point") ? "circle" : null;
 }
-function Be(e) {
+function fe(e) {
   const t = e.toLowerCase();
-  return t.includes("polygon") ? ["fill"] : t.includes("linestring") ? ["line"] : t.includes("point") ? ["circle", "symbol"] : [];
+  return t.includes("polygon") ? ["fill", "line"] : t.includes("linestring") ? ["line"] : t.includes("point") ? ["circle", "symbol"] : [];
 }
-function Ea(e) {
+function rt(e) {
   for (const t of Object.values(e.properties))
     if (t.$ref) {
-      const i = $e(t.$ref);
-      if (i) return Re(i);
+      const i = He(t.$ref);
+      if (i) return Ye(i);
     }
   return null;
 }
-function qe(e) {
+function Xe(e) {
   for (const t of Object.values(e.properties))
     if (t.$ref) {
-      const i = $e(t.$ref);
-      if (i) return Be(i);
+      const i = He(t.$ref);
+      if (i) return fe(i);
     }
   return [];
 }
-function Fa(e) {
-  return Object.entries(e.properties).filter(([, t]) => !Ia(t)).map(([t, i]) => ({
+function lt(e) {
+  return Object.entries(e.properties).filter(([, t]) => !it(t)).map(([t, i]) => ({
     name: t,
     title: i.title,
     type: i.type,
@@ -2215,18 +2742,18 @@ function Fa(e) {
     maximum: i.maximum
   }));
 }
-function Ue(e) {
+function Je(e) {
   var i;
   const t = /* @__PURE__ */ new Set();
   for (const r of e)
     (i = r.geometry) != null && i.type && t.add(r.geometry.type);
   return Array.from(t);
 }
-function Pa(e) {
+function pt(e) {
   const t = /* @__PURE__ */ new Set();
-  for (const n of e) {
-    const p = n.toLowerCase();
-    p.includes("polygon") ? t.add("polygon") : p.includes("linestring") ? t.add("line") : p.includes("point") && t.add("point");
+  for (const p of e) {
+    const u = p.toLowerCase();
+    u.includes("polygon") ? t.add("polygon") : u.includes("linestring") ? t.add("line") : u.includes("point") && t.add("point");
   }
   const i = t.size > 1, r = [];
   return t.has("polygon") && r.push({
@@ -2243,132 +2770,138 @@ function Pa(e) {
     ...i ? { geometryFilter: ["Point", "MultiPoint"] } : {}
   }), r;
 }
-async function Ya(e, t) {
+async function St(e, t) {
   var i, r;
   try {
-    const n = await Pe(e, t), p = Ea(n);
-    if (p) return p;
+    const p = await Ge(e, t), u = rt(p);
+    if (u) return u;
   } catch {
   }
   try {
-    const p = (r = (i = (await se(e, t, { limit: 1 })).features[0]) == null ? void 0 : i.geometry) == null ? void 0 : r.type;
-    if (typeof p == "string") return Re(p);
+    const u = (r = (i = (await ye(e, t, { limit: 1 })).features[0]) == null ? void 0 : i.geometry) == null ? void 0 : r.type;
+    if (typeof u == "string") return Ye(u);
   } catch {
   }
   return null;
 }
-async function Xa(e, t) {
+async function Tt(e, t) {
   try {
-    const i = await Pe(e, t), r = qe(i);
+    const i = await Ge(e, t), r = Xe(i);
     if (r.length > 0) return r;
   } catch {
   }
   try {
-    const i = await se(e, t, { limit: 20 }), r = Ue(i.features), n = /* @__PURE__ */ new Set();
-    for (const p of r)
-      for (const o of Be(p))
-        n.add(o);
-    return Array.from(n);
+    const i = await ye(e, t, { limit: 20 }), r = Je(i.features), p = /* @__PURE__ */ new Set();
+    for (const u of r)
+      for (const n of fe(u))
+        p.add(n);
+    return Array.from(p);
   } catch {
   }
   return [];
 }
-function Ha(e) {
+function Dt(e) {
   return e.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (t) => t.toUpperCase());
 }
-function Ma(e, t, i) {
+function nt(e, t, i) {
   const r = [...e ?? []];
   return r[t] = i, r;
 }
-function Oa(e, t) {
+function ut(e, t) {
   return (e ?? []).filter((i, r) => r !== t);
 }
-const V = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function De({ value: e, onChange: t, availableSources: i, availableIcons: r }) {
-  var S;
-  const n = (x) => t({ ...e, ...x }), p = ue(e);
-  p.current = e;
-  const o = ue(t);
-  o.current = t;
-  const b = i.find((x) => x.id === e.sourceId), m = (b == null ? void 0 : b.url) ?? null, w = e.collection || null, { collections: d, loading: f } = Fe(m), { queryables: c, loading: u } = Ve(m, w), s = c ? Fa(c) : [], [v, N] = A([]);
-  return X(() => {
+const Y = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+function je({ value: e, onChange: t, availableSources: i, availableIcons: r }) {
+  var j;
+  const p = (m) => t({ ...e, ...m }), u = V(e);
+  u.current = e;
+  const n = V(t);
+  n.current = t;
+  const f = i.find((m) => m.id === e.sourceId), s = (f == null ? void 0 : f.url) ?? null, g = e.collection || null, { collections: d, loading: x } = qe(s), { queryables: c, loading: o } = oa(s, g), h = c ? lt(c) : [], [w, v] = T([]), [C, A] = T([]);
+  return G(() => {
     if (!c) {
-      N([]);
+      v([]), A([]);
       return;
     }
-    const x = (L) => {
-      var y;
-      const E = Pa(L);
-      N(E), E.length > 0 && !((y = p.current.styles) != null && y.length) && o.current({ ...p.current, styles: E });
-    }, P = qe(c);
-    if (P.length > 0) {
-      const L = [];
-      for (const E of P)
-        E === "fill" ? L.push("Polygon") : E === "line" ? L.push("LineString") : (E === "circle" || E === "symbol") && L.push("Point");
-      x(L);
+    const m = (b, M) => {
+      var N;
+      const P = pt(b);
+      v(P), A(M), P.length > 0 && !((N = u.current.styles) != null && N.length) && n.current({ ...u.current, styles: P });
+    }, I = Xe(c);
+    if (I.length > 0) {
+      const b = [];
+      for (const M of I)
+        M === "fill" ? b.push("Polygon") : M === "line" ? b.push("LineString") : (M === "circle" || M === "symbol") && b.push("Point");
+      m(b, I);
       return;
     }
-    if (!m || !w) {
-      N([]);
+    if (!s || !g) {
+      v([]), A([]);
       return;
     }
-    let C = !1;
-    return se(m, w, { limit: 20 }).then((L) => {
-      if (C) return;
-      const E = Ue(L.features);
-      E.length > 0 ? x(E) : N([]);
+    let F = !1;
+    return ye(s, g, { limit: 20 }).then((b) => {
+      if (F) return;
+      const M = Je(b.features);
+      if (M.length > 0) {
+        const P = /* @__PURE__ */ new Set();
+        for (const N of M)
+          for (const k of fe(N)) P.add(k);
+        m(M, Array.from(P));
+      } else
+        v([]), A([]);
     }).catch(() => {
-      C || N([]);
+      F || (v([]), A([]));
     }), () => {
-      C = !0;
+      F = !0;
     };
-  }, [c, m, w]), X(() => {
-    N([]);
-  }, [m, w]), /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
+  }, [c, s, g]), G(() => {
+    v([]), A([]);
+  }, [s, g]), /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ l("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: [
-      /* @__PURE__ */ a(D, { label: "Layer ID", required: !0, children: /* @__PURE__ */ a(
+      /* @__PURE__ */ a(S, { label: "Layer ID", required: !0, children: /* @__PURE__ */ a(
         "input",
         {
           type: "text",
           value: e.id,
-          onChange: (x) => n({ id: x.target.value }),
+          onChange: (m) => p({ id: m.target.value }),
           placeholder: "my-layer",
-          className: V
+          className: Y
         }
       ) }),
-      /* @__PURE__ */ a(D, { label: "Label", children: /* @__PURE__ */ a(
+      /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
         "input",
         {
           type: "text",
           value: e.label,
-          onChange: (x) => n({ label: x.target.value }),
+          onChange: (m) => p({ label: m.target.value }),
           placeholder: "My Layer",
-          className: V
+          className: Y
         }
       ) })
     ] }),
-    /* @__PURE__ */ a(D, { label: "Source", required: !0, children: /* @__PURE__ */ l(
+    /* @__PURE__ */ a(S, { label: "Source", required: !0, children: /* @__PURE__ */ l(
       "select",
       {
         value: e.sourceId,
-        onChange: (x) => n({ sourceId: x.target.value }),
-        className: V,
+        onChange: (m) => p({ sourceId: m.target.value }),
+        className: Y,
         children: [
           /* @__PURE__ */ a("option", { value: "", children: "Select a source…" }),
-          i.map((x) => /* @__PURE__ */ a("option", { value: x.id, children: x.label ?? x.id }, x.id))
+          i.map((m) => /* @__PURE__ */ a("option", { value: m.id, children: m.label ?? m.id }, m.id))
         ]
       }
     ) }),
-    /* @__PURE__ */ l(D, { label: "Collection", required: !0, children: [
+    /* @__PURE__ */ l(S, { label: "Collection", required: !0, children: [
       d.length > 0 ? /* @__PURE__ */ l(
         "select",
         {
           value: e.collection,
-          onChange: (x) => n({ collection: x.target.value }),
-          className: V,
+          onChange: (m) => p({ collection: m.target.value }),
+          className: Y,
           children: [
             /* @__PURE__ */ a("option", { value: "", children: "Select a collection…" }),
-            d.map((x) => /* @__PURE__ */ a("option", { value: x.id, children: x.title ?? x.id }, x.id))
+            d.map((m) => /* @__PURE__ */ a("option", { value: m.id, children: m.title ?? m.id }, m.id))
           ]
         }
       ) : /* @__PURE__ */ a(
@@ -2376,27 +2909,27 @@ function De({ value: e, onChange: t, availableSources: i, availableIcons: r }) {
         {
           type: "text",
           value: e.collection,
-          onChange: (x) => n({ collection: x.target.value }),
-          placeholder: f ? "Loading collections…" : "collection-id",
-          className: V
+          onChange: (m) => p({ collection: m.target.value }),
+          placeholder: x ? "Loading collections…" : "collection-id",
+          className: Y
         }
       ),
-      u && /* @__PURE__ */ a("span", { className: "mapui:mt-0.5 mapui:block mapui:text-xs mapui:text-gray-400", children: "Loading properties…" })
+      o && /* @__PURE__ */ a("span", { className: "mapui:mt-0.5 mapui:block mapui:text-xs mapui:text-gray-400", children: "Loading properties…" })
     ] }),
-    /* @__PURE__ */ a(D, { label: "Data Mode", children: /* @__PURE__ */ a("div", { className: "mapui:flex mapui:gap-4", children: ["vector-tiles", "geojson"].map((x) => /* @__PURE__ */ l("label", { className: "mapui:flex mapui:cursor-pointer mapui:items-center mapui:gap-1.5", children: [
+    /* @__PURE__ */ a(S, { label: "Data Mode", children: /* @__PURE__ */ a("div", { className: "mapui:flex mapui:gap-4", children: ["vector-tiles", "geojson"].map((m) => /* @__PURE__ */ l("label", { className: "mapui:flex mapui:cursor-pointer mapui:items-center mapui:gap-1.5", children: [
       /* @__PURE__ */ a(
         "input",
         {
           type: "radio",
           name: `data-mode-${e.id}`,
-          value: x,
-          checked: e.dataMode === x,
-          onChange: () => n({ dataMode: x }),
+          value: m,
+          checked: e.dataMode === m,
+          onChange: () => p({ dataMode: m }),
           className: "mapui:accent-blue-600"
         }
       ),
-      /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:text-gray-700", children: x })
-    ] }, x)) }) }),
+      /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:text-gray-700", children: m })
+    ] }, m)) }) }),
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
       /* @__PURE__ */ a(
         "input",
@@ -2404,83 +2937,83 @@ function De({ value: e, onChange: t, availableSources: i, availableIcons: r }) {
           type: "checkbox",
           id: "layer-visible",
           checked: e.visible,
-          onChange: (x) => n({ visible: x.target.checked }),
+          onChange: (m) => p({ visible: m.target.checked }),
           className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
         }
       ),
       /* @__PURE__ */ a("label", { htmlFor: "layer-visible", className: "mapui:text-sm mapui:text-gray-700", children: "Visible by default" })
     ] }),
-    /* @__PURE__ */ a(_, { title: "Style", children: /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-4", children: [
-      (e.styles ?? [me]).map((x, P) => {
-        var C;
+    /* @__PURE__ */ a(X, { title: "Style", children: /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-4", children: [
+      (e.styles ?? [ge]).map((m, I) => {
+        var F;
         return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-          x.geometryFilter && x.geometryFilter.length > 0 && /* @__PURE__ */ a("div", { className: "mapui:flex mapui:flex-wrap mapui:gap-1", children: x.geometryFilter.map((L) => /* @__PURE__ */ a(
+          m.geometryFilter && m.geometryFilter.length > 0 && /* @__PURE__ */ a("div", { className: "mapui:flex mapui:flex-wrap mapui:gap-1", children: m.geometryFilter.map((b) => /* @__PURE__ */ a(
             "span",
             {
               className: "mapui:rounded mapui:bg-indigo-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-indigo-700",
-              children: L
+              children: b
             },
-            L
+            b
           )) }),
           /* @__PURE__ */ a(
-            wa,
+            Ha,
             {
-              value: x,
-              onChange: (L) => n({ styles: Ma(e.styles, P, L) }),
-              suggestedTypes: v.map((L) => L.type),
+              value: m,
+              onChange: (b) => p({ styles: nt(e.styles, I, b) }),
+              suggestedTypes: C,
               availableIcons: r,
-              availableProperties: s,
-              onFetchDistinctValues: m && w ? (L) => _e(m, w, L, { limit: 1e3 }) : void 0
+              availableProperties: h,
+              onFetchDistinctValues: s && g ? (b) => ma(s, g, b, { fetchAll: !0 }) : void 0
             }
           ),
-          (((C = e.styles) == null ? void 0 : C.length) ?? 0) > 1 && /* @__PURE__ */ a(
+          (((F = e.styles) == null ? void 0 : F.length) ?? 0) > 0 && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: () => n({ styles: Oa(e.styles, P) }),
+              onClick: () => p({ styles: ut(e.styles, I) }),
               className: "mapui:cursor-pointer mapui:self-start mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
               children: "Remove style"
             }
           )
-        ] }, P);
+        ] }, I);
       }),
       /* @__PURE__ */ a(
         "button",
         {
           type: "button",
-          onClick: () => n({ styles: [...e.styles ?? [me], Oe] }),
+          onClick: () => p({ styles: [...e.styles ?? [ge], _e] }),
           className: "mapui:cursor-pointer mapui:self-start mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
           children: "+ Add style"
         }
       )
     ] }) }),
-    /* @__PURE__ */ a(_, { title: "Legend", children: /* @__PURE__ */ a(
-      Na,
+    /* @__PURE__ */ a(X, { title: "Legend", children: /* @__PURE__ */ a(
+      Xa,
       {
         value: e.legend,
-        onChange: (x) => n({ legend: x }),
+        onChange: (m) => p({ legend: m }),
         styles: e.styles
       }
     ) }),
-    /* @__PURE__ */ a(_, { title: "Search Fields", children: /* @__PURE__ */ a(
-      Da,
+    /* @__PURE__ */ a(X, { title: "Search Fields", children: /* @__PURE__ */ a(
+      Za,
       {
-        fields: ((S = e.search) == null ? void 0 : S.fields) ?? [],
-        onChange: (x) => n({ search: x.length > 0 ? { fields: x } : void 0 }),
-        availableProperties: s
+        fields: ((j = e.search) == null ? void 0 : j.fields) ?? [],
+        onChange: (m) => p({ search: m.length > 0 ? { fields: m } : void 0 }),
+        availableProperties: h
       }
     ) }),
-    /* @__PURE__ */ a(_, { title: "Property Display", children: /* @__PURE__ */ a(
-      Aa,
+    /* @__PURE__ */ a(X, { title: "Property Display", children: /* @__PURE__ */ a(
+      tt,
       {
         value: e.propertyDisplay ?? {},
-        onChange: (x) => n({ propertyDisplay: Object.keys(x).length > 0 ? x : void 0 }),
-        availableProperties: s
+        onChange: (m) => p({ propertyDisplay: Object.keys(m).length > 0 ? m : void 0 }),
+        availableProperties: h
       }
     ) })
   ] });
 }
-const ne = () => ({
+const ce = () => ({
   id: "",
   sourceId: "",
   collection: "",
@@ -2488,37 +3021,37 @@ const ne = () => ({
   visible: !0,
   dataMode: "vector-tiles"
 });
-function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r }) {
-  const [n, p] = A(null), [o, b] = A(!1), [m, w] = A(ne()), [d, f] = A(null), [c, u] = A(null), [s, v] = A(null), N = () => {
-    t([...e, m]), b(!1), w(ne());
-  }, S = (g) => {
-    t(e.map((k) => k.id === n ? g : k));
-  }, x = (g) => {
-    t(e.filter((k) => k.id !== g)), f(null), n === g && p(null);
-  }, P = (g) => {
-    if (g === 0) return;
+function Lt({ layers: e, onChange: t, availableSources: i, availableIcons: r }) {
+  const [p, u] = T(null), [n, f] = T(!1), [s, g] = T(ce()), [d, x] = T(null), [c, o] = T(null), [h, w] = T(null), v = () => {
+    t([...e, s]), f(!1), g(ce());
+  }, C = (N) => {
+    t(e.map((k) => k.id === p ? N : k));
+  }, A = (N) => {
+    t(e.filter((k) => k.id !== N)), x(null), p === N && u(null);
+  }, j = (N) => {
+    if (N === 0) return;
     const k = [...e];
-    [k[g - 1], k[g]] = [k[g], k[g - 1]], t(k);
-  }, C = (g) => {
-    if (g === e.length - 1) return;
+    [k[N - 1], k[N]] = [k[N], k[N - 1]], t(k);
+  }, m = (N) => {
+    if (N === e.length - 1) return;
     const k = [...e];
-    [k[g], k[g + 1]] = [k[g + 1], k[g]], t(k);
-  }, L = (g, k) => {
-    u(k), g.dataTransfer.effectAllowed = "move", g.dataTransfer.setData("text/plain", k);
-  }, E = (g, k) => {
-    g.preventDefault(), g.dataTransfer.dropEffect = "move", v(k);
-  }, y = () => {
-    v(null);
-  }, $ = (g, k) => {
-    g.preventDefault(), v(null);
+    [k[N], k[N + 1]] = [k[N + 1], k[N]], t(k);
+  }, I = (N, k) => {
+    o(k), N.dataTransfer.effectAllowed = "move", N.dataTransfer.setData("text/plain", k);
+  }, F = (N, k) => {
+    N.preventDefault(), N.dataTransfer.dropEffect = "move", w(k);
+  }, b = () => {
+    w(null);
+  }, M = (N, k) => {
+    N.preventDefault(), w(null);
     const O = c;
-    if (u(null), !O || O === k) return;
-    const U = e.findIndex((h) => h.id === O), G = e.findIndex((h) => h.id === k);
-    if (U === -1 || G === -1) return;
-    const B = [...e];
-    B.splice(U, 1), B.splice(G, 0, e[U]), t(B);
-  }, M = () => {
-    u(null), v(null);
+    if (o(null), !O || O === k) return;
+    const R = e.findIndex((q) => q.id === O), W = e.findIndex((q) => q.id === k);
+    if (R === -1 || W === -1) return;
+    const U = [...e];
+    U.splice(R, 1), U.splice(W, 0, e[R]), t(U);
+  }, P = () => {
+    o(null), w(null);
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
@@ -2528,29 +3061,29 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
         {
           type: "button",
           onClick: () => {
-            b(!0), w(ne());
+            f(!0), g(ce());
           },
           className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700",
           children: "+ Add Layer"
         }
       )
     ] }),
-    e.length === 0 && !o && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No layers configured." }),
-    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((g, k) => {
-      var B, h, T, I, F;
-      const O = c === g.id, U = s === g.id, G = n === g.id;
+    e.length === 0 && !n && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No layers configured." }),
+    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((N, k) => {
+      var U, q, K, Q, Z;
+      const O = c === N.id, R = h === N.id, W = p === N.id;
       return /* @__PURE__ */ l(
         "li",
         {
-          draggable: !G,
-          onDragStart: G ? void 0 : (j) => L(j, g.id),
-          onDragOver: (j) => E(j, g.id),
-          onDragLeave: y,
-          onDrop: (j) => $(j, g.id),
-          onDragEnd: M,
+          draggable: !W,
+          onDragStart: W ? void 0 : (y) => I(y, N.id),
+          onDragOver: (y) => F(y, N.id),
+          onDragLeave: b,
+          onDrop: (y) => M(y, N.id),
+          onDragEnd: P,
           className: [
             "mapui:rounded-lg mapui:border mapui:bg-white mapui:transition-colors",
-            U ? "mapui:border-blue-400 mapui:bg-blue-50" : "mapui:border-gray-200",
+            R ? "mapui:border-blue-400 mapui:bg-blue-50" : "mapui:border-gray-200",
             O ? "mapui:opacity-50" : "mapui:opacity-100"
           ].join(" "),
           children: [
@@ -2561,7 +3094,7 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
                     "button",
                     {
                       type: "button",
-                      onClick: () => P(k),
+                      onClick: () => j(k),
                       disabled: k === 0,
                       "aria-label": "Move layer up",
                       className: "mapui:cursor-pointer mapui:rounded mapui:border-none mapui:bg-transparent mapui:px-1 mapui:text-xs mapui:text-gray-400 hover:mapui:text-gray-600 disabled:mapui:opacity-30",
@@ -2572,7 +3105,7 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
                     "button",
                     {
                       type: "button",
-                      onClick: () => C(k),
+                      onClick: () => m(k),
                       disabled: k === e.length - 1,
                       "aria-label": "Move layer down",
                       className: "mapui:cursor-pointer mapui:rounded mapui:border-none mapui:bg-transparent mapui:px-1 mapui:text-xs mapui:text-gray-400 hover:mapui:text-gray-600 disabled:mapui:opacity-30",
@@ -2589,18 +3122,18 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
                   }
                 ),
                 /* @__PURE__ */ l("div", { className: "mapui:flex mapui:min-w-0 mapui:flex-col mapui:gap-0.5", children: [
-                  /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: g.label || g.id }),
-                  /* @__PURE__ */ a("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: g.collection }),
+                  /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: N.label || N.id }),
+                  /* @__PURE__ */ a("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: N.collection }),
                   /* @__PURE__ */ l("div", { className: "mapui:mt-1 mapui:flex mapui:flex-wrap mapui:gap-1", children: [
-                    /* @__PURE__ */ a("span", { className: "mapui:rounded mapui:bg-slate-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-slate-700", children: g.dataMode }),
-                    (((B = g.styles) == null ? void 0 : B.length) ?? 0) > 0 && /* @__PURE__ */ a("span", { className: "mapui:rounded mapui:bg-purple-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-purple-700", children: g.styles.map((j) => j.type).join(" · ") }),
-                    g.visible === !1 && /* @__PURE__ */ a("span", { className: "mapui:rounded mapui:bg-amber-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-amber-700", children: "hidden" }),
-                    (((T = (h = g.search) == null ? void 0 : h.fields) == null ? void 0 : T.length) ?? 0) > 0 && /* @__PURE__ */ l("span", { className: "mapui:rounded mapui:bg-blue-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-blue-700", children: [
-                      g.search.fields.length,
+                    /* @__PURE__ */ a("span", { className: "mapui:rounded mapui:bg-slate-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-slate-700", children: N.dataMode }),
+                    (((U = N.styles) == null ? void 0 : U.length) ?? 0) > 0 && /* @__PURE__ */ a("span", { className: "mapui:rounded mapui:bg-purple-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-purple-700", children: N.styles.map((y) => y.type).join(" · ") }),
+                    N.visible === !1 && /* @__PURE__ */ a("span", { className: "mapui:rounded mapui:bg-amber-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-amber-700", children: "hidden" }),
+                    (((K = (q = N.search) == null ? void 0 : q.fields) == null ? void 0 : K.length) ?? 0) > 0 && /* @__PURE__ */ l("span", { className: "mapui:rounded mapui:bg-blue-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-blue-700", children: [
+                      N.search.fields.length,
                       " search fields"
                     ] }),
-                    (((F = (I = g.legend) == null ? void 0 : I.entries) == null ? void 0 : F.length) ?? 0) > 0 && /* @__PURE__ */ l("span", { className: "mapui:rounded mapui:bg-green-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-green-700", children: [
-                      g.legend.entries.length,
+                    (((Z = (Q = N.legend) == null ? void 0 : Q.entries) == null ? void 0 : Z.length) ?? 0) > 0 && /* @__PURE__ */ l("span", { className: "mapui:rounded mapui:bg-green-100 mapui:px-1.5 mapui:py-0.5 mapui:text-[10px] mapui:font-medium mapui:text-green-700", children: [
+                      N.legend.entries.length,
                       " legend entries"
                     ] })
                   ] })
@@ -2611,43 +3144,43 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
                   "button",
                   {
                     type: "button",
-                    onClick: () => p(n === g.id ? null : g.id),
+                    onClick: () => u(p === N.id ? null : N.id),
                     className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-600 hover:mapui:bg-gray-50",
-                    children: n === g.id ? "Close" : "Edit"
+                    children: p === N.id ? "Close" : "Edit"
                   }
                 ),
                 /* @__PURE__ */ a(
                   "button",
                   {
                     type: "button",
-                    onClick: () => f(g.id),
+                    onClick: () => x(N.id),
                     className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
                     children: "Remove"
                   }
                 )
               ] })
             ] }),
-            n === g.id && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(
-              De,
+            p === N.id && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(
+              je,
               {
-                value: g,
-                onChange: S,
+                value: N,
+                onChange: C,
                 availableSources: i,
                 availableIcons: r
               }
             ) })
           ]
         },
-        g.id
+        N.id
       );
     }) }),
-    o && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+    n && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Layer" }),
       /* @__PURE__ */ a(
-        De,
+        je,
         {
-          value: m,
-          onChange: w,
+          value: s,
+          onChange: g,
           availableSources: i,
           availableIcons: r
         }
@@ -2657,8 +3190,8 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
           "button",
           {
             type: "button",
-            onClick: N,
-            disabled: !m.id || !m.sourceId || !m.collection,
+            onClick: v,
+            disabled: !s.id || !s.sourceId || !s.collection,
             className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
             children: "Save"
           }
@@ -2667,7 +3200,7 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
           "button",
           {
             type: "button",
-            onClick: () => b(!1),
+            onClick: () => f(!1),
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
             children: "Cancel"
           }
@@ -2675,52 +3208,52 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
       ] })
     ] }),
     /* @__PURE__ */ a(
-      Z,
+      re,
       {
         open: d !== null,
         title: "Remove Layer",
         description: "Are you sure you want to remove this layer from the configuration?",
-        onConfirm: () => d && x(d),
-        onCancel: () => f(null)
+        onConfirm: () => d && A(d),
+        onCancel: () => x(null)
       }
     )
   ] });
 }
-const Q = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function Te({ value: e, onChange: t }) {
+const ie = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+function Oe({ value: e, onChange: t }) {
   const i = (r) => t({ ...e, ...r });
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ a(D, { label: "ID", required: !0, children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "ID", required: !0, children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.id,
         onChange: (r) => i({ id: r.target.value }),
         placeholder: "osm",
-        className: Q
+        className: ie
       }
     ) }),
-    /* @__PURE__ */ a(D, { label: "Label", children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.label,
         onChange: (r) => i({ label: r.target.value }),
         placeholder: "OpenStreetMap",
-        className: Q
+        className: ie
       }
     ) }),
-    /* @__PURE__ */ a(D, { label: "Style URL", required: !0, children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "Style URL", required: !0, children: /* @__PURE__ */ a(
       "input",
       {
         type: "url",
         value: e.url,
         onChange: (r) => i({ url: r.target.value }),
         placeholder: "https://example.com/style.json",
-        className: Q
+        className: ie
       }
     ) }),
-    /* @__PURE__ */ l(D, { label: "Thumbnail URL (optional)", children: [
+    /* @__PURE__ */ l(S, { label: "Thumbnail URL (optional)", children: [
       /* @__PURE__ */ a(
         "input",
         {
@@ -2728,7 +3261,7 @@ function Te({ value: e, onChange: t }) {
           value: e.thumbnail ?? "",
           onChange: (r) => i({ thumbnail: r.target.value || void 0 }),
           placeholder: "https://example.com/thumbnail.png",
-          className: Q
+          className: ie
         }
       ),
       e.thumbnail && /* @__PURE__ */ a(
@@ -2742,14 +3275,14 @@ function Te({ value: e, onChange: t }) {
     ] })
   ] });
 }
-const oe = () => ({ id: "", label: "", url: "" });
-function Ka({ basemaps: e, onChange: t }) {
-  const [i, r] = A(null), [n, p] = A(!1), [o, b] = A(oe()), [m, w] = A(null), d = (u) => {
-    t(e.map((s) => s.id === i ? u : s));
-  }, f = () => {
-    t([...e, o]), p(!1), b(oe());
-  }, c = (u) => {
-    t(e.filter((s) => s.id !== u)), w(null);
+const de = () => ({ id: "", label: "", url: "" });
+function At({ basemaps: e, onChange: t }) {
+  const [i, r] = T(null), [p, u] = T(!1), [n, f] = T(de()), [s, g] = T(null), d = (o) => {
+    t(e.map((h) => h.id === i ? o : h));
+  }, x = () => {
+    t([...e, n]), u(!1), f(de());
+  }, c = (o) => {
+    t(e.filter((h) => h.id !== o)), g(null);
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
@@ -2759,68 +3292,68 @@ function Ka({ basemaps: e, onChange: t }) {
         {
           type: "button",
           onClick: () => {
-            p(!0), b(oe());
+            u(!0), f(de());
           },
           className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700",
           children: "+ Add Basemap"
         }
       )
     ] }),
-    e.length === 0 && !n && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No basemaps configured." }),
-    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((u) => /* @__PURE__ */ l(
+    e.length === 0 && !p && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No basemaps configured." }),
+    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((o) => /* @__PURE__ */ l(
       "li",
       {
         className: "mapui:rounded-lg mapui:border mapui:border-gray-200 mapui:bg-white",
         children: [
           /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-3 mapui:px-3 mapui:py-2", children: [
-            u.thumbnail && /* @__PURE__ */ a(
+            o.thumbnail && /* @__PURE__ */ a(
               "img",
               {
-                src: u.thumbnail,
+                src: o.thumbnail,
                 alt: "",
                 className: "mapui:h-10 mapui:w-14 mapui:shrink-0 mapui:rounded mapui:object-cover"
               }
             ),
             /* @__PURE__ */ l("div", { className: "mapui:flex-1 mapui:overflow-hidden", children: [
-              /* @__PURE__ */ a("span", { className: "mapui:block mapui:text-sm mapui:font-medium mapui:text-gray-800", children: u.label || u.id }),
-              /* @__PURE__ */ a("span", { className: "mapui:block mapui:truncate mapui:font-mono mapui:text-xs mapui:text-gray-500", children: u.url })
+              /* @__PURE__ */ a("span", { className: "mapui:block mapui:text-sm mapui:font-medium mapui:text-gray-800", children: o.label || o.id }),
+              /* @__PURE__ */ a("span", { className: "mapui:block mapui:truncate mapui:font-mono mapui:text-xs mapui:text-gray-500", children: o.url })
             ] }),
             /* @__PURE__ */ l("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
               /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: () => r(i === u.id ? null : u.id),
+                  onClick: () => r(i === o.id ? null : o.id),
                   className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-600 hover:mapui:bg-gray-50",
-                  children: i === u.id ? "Close" : "Edit"
+                  children: i === o.id ? "Close" : "Edit"
                 }
               ),
               /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: () => w(u.id),
+                  onClick: () => g(o.id),
                   className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
                   children: "Remove"
                 }
               )
             ] })
           ] }),
-          i === u.id && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(Te, { value: u, onChange: d }) })
+          i === o.id && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(Oe, { value: o, onChange: d }) })
         ]
       },
-      u.id
+      o.id
     )) }),
-    n && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+    p && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Basemap" }),
-      /* @__PURE__ */ a(Te, { value: o, onChange: b }),
+      /* @__PURE__ */ a(Oe, { value: n, onChange: f }),
       /* @__PURE__ */ l("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: f,
-            disabled: !o.id || !o.url,
+            onClick: x,
+            disabled: !n.id || !n.url,
             className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
             children: "Save"
           }
@@ -2829,7 +3362,7 @@ function Ka({ basemaps: e, onChange: t }) {
           "button",
           {
             type: "button",
-            onClick: () => p(!1),
+            onClick: () => u(!1),
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
             children: "Cancel"
           }
@@ -2837,32 +3370,32 @@ function Ka({ basemaps: e, onChange: t }) {
       ] })
     ] }),
     /* @__PURE__ */ a(
-      Z,
+      re,
       {
-        open: m !== null,
+        open: s !== null,
         title: "Remove Basemap",
         description: "Are you sure you want to remove this basemap from the configuration?",
-        onConfirm: () => m && c(m),
-        onCancel: () => w(null)
+        onConfirm: () => s && c(s),
+        onCancel: () => g(null)
       }
     )
   ] });
 }
-const Le = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function Ae({ value: e, onChange: t }) {
+const $e = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+function Re({ value: e, onChange: t }) {
   const i = (r) => t({ ...e, ...r });
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ a(D, { label: "ID", required: !0, children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(S, { label: "ID", required: !0, children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.id,
         onChange: (r) => i({ id: r.target.value }),
         placeholder: "my-sprites",
-        className: Le
+        className: $e
       }
     ) }),
-    /* @__PURE__ */ l(D, { label: "Sprite URL", required: !0, children: [
+    /* @__PURE__ */ l(S, { label: "Sprite URL", required: !0, children: [
       /* @__PURE__ */ a(
         "input",
         {
@@ -2870,7 +3403,7 @@ function Ae({ value: e, onChange: t }) {
           value: e.url,
           onChange: (r) => i({ url: r.target.value }),
           placeholder: "https://example.com/sprites/sprite",
-          className: Le
+          className: $e
         }
       ),
       /* @__PURE__ */ l("p", { className: "mapui:mt-1 mapui:text-xs mapui:text-gray-400", children: [
@@ -2883,21 +3416,21 @@ function Ae({ value: e, onChange: t }) {
     ] })
   ] });
 }
-const pe = () => ({ id: "", url: "" }), ja = (e) => {
+const he = () => ({ id: "", url: "" }), ot = (e) => {
   try {
     return new URL(e), !0;
   } catch {
     return !1;
   }
 };
-function Qa({ sprites: e, onChange: t }) {
-  const [i, r] = A(null), [n, p] = A(!1), [o, b] = A(pe()), [m, w] = A(null), d = (u) => {
-    t(e.map((s, v) => v === i ? u : s));
-  }, f = () => {
-    t([...e, o]), p(!1), b(pe());
-  }, c = (u) => {
-    const s = e.findIndex((v) => v.id === u);
-    t(e.filter((v) => v.id !== u)), i !== null && (s === i ? r(null) : s < i && r(i - 1)), w(null);
+function Et({ sprites: e, onChange: t }) {
+  const [i, r] = T(null), [p, u] = T(!1), [n, f] = T(he()), [s, g] = T(null), d = (o) => {
+    t(e.map((h, w) => w === i ? o : h));
+  }, x = () => {
+    t([...e, n]), u(!1), f(he());
+  }, c = (o) => {
+    const h = e.findIndex((w) => w.id === o);
+    t(e.filter((w) => w.id !== o)), i !== null && (h === i ? r(null) : h < i && r(i - 1)), g(null);
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
@@ -2907,60 +3440,60 @@ function Qa({ sprites: e, onChange: t }) {
         {
           type: "button",
           onClick: () => {
-            p(!0), b(pe());
+            u(!0), f(he());
           },
           className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700",
           children: "+ Add Sprite Sheet"
         }
       )
     ] }),
-    e.length === 0 && !n && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No custom sprite sheets. Basemap icons are available automatically." }),
-    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((u, s) => /* @__PURE__ */ l(
+    e.length === 0 && !p && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No custom sprite sheets. Basemap icons are available automatically." }),
+    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((o, h) => /* @__PURE__ */ l(
       "li",
       {
         className: "mapui:rounded-lg mapui:border mapui:border-gray-200 mapui:bg-white",
         children: [
           /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-3 mapui:px-3 mapui:py-2", children: [
             /* @__PURE__ */ l("div", { className: "mapui:flex-1 mapui:overflow-hidden", children: [
-              /* @__PURE__ */ a("span", { className: "mapui:block mapui:text-sm mapui:font-medium mapui:text-gray-800", children: u.id }),
-              /* @__PURE__ */ a("span", { className: "mapui:block mapui:truncate mapui:font-mono mapui:text-xs mapui:text-gray-500", children: u.url })
+              /* @__PURE__ */ a("span", { className: "mapui:block mapui:text-sm mapui:font-medium mapui:text-gray-800", children: o.id }),
+              /* @__PURE__ */ a("span", { className: "mapui:block mapui:truncate mapui:font-mono mapui:text-xs mapui:text-gray-500", children: o.url })
             ] }),
             /* @__PURE__ */ l("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
               /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: () => r(i === s ? null : s),
+                  onClick: () => r(i === h ? null : h),
                   className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-600 hover:mapui:bg-gray-50",
-                  children: i === s ? "Close" : "Edit"
+                  children: i === h ? "Close" : "Edit"
                 }
               ),
               /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: () => w(u.id),
+                  onClick: () => g(o.id),
                   className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
                   children: "Remove"
                 }
               )
             ] })
           ] }),
-          i === s && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(Ae, { value: u, onChange: d }) })
+          i === h && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(Re, { value: o, onChange: d }) })
         ]
       },
-      s
+      h
     )) }),
-    n && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+    p && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Sprite Sheet" }),
-      /* @__PURE__ */ a(Ae, { value: o, onChange: b }),
+      /* @__PURE__ */ a(Re, { value: n, onChange: f }),
       /* @__PURE__ */ l("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: f,
-            disabled: !o.id || !o.url || !ja(o.url) || e.some((u) => u.id === o.id),
+            onClick: x,
+            disabled: !n.id || !n.url || !ot(n.url) || e.some((o) => o.id === n.id),
             className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
             children: "Save"
           }
@@ -2969,7 +3502,7 @@ function Qa({ sprites: e, onChange: t }) {
           "button",
           {
             type: "button",
-            onClick: () => p(!1),
+            onClick: () => u(!1),
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
             children: "Cancel"
           }
@@ -2977,18 +3510,18 @@ function Qa({ sprites: e, onChange: t }) {
       ] })
     ] }),
     /* @__PURE__ */ a(
-      Z,
+      re,
       {
-        open: m !== null,
+        open: s !== null,
         title: "Remove Sprite Sheet",
         description: "Are you sure you want to remove this sprite sheet from the configuration?",
-        onConfirm: () => m && c(m),
-        onCancel: () => w(null)
+        onConfirm: () => s && c(s),
+        onCancel: () => g(null)
       }
     )
   ] });
 }
-const $a = [
+const mt = [
   { key: "showLayerPanel", label: "Layer Panel", description: "Toggle layer visibility" },
   { key: "showLegend", label: "Legend", description: "Map legend" },
   { key: "showBasemapSwitcher", label: "Basemap Switcher", description: "Switch basemap styles" },
@@ -2997,34 +3530,36 @@ const $a = [
   { key: "showFeatureDetail", label: "Feature Detail Panel", description: "Inspect feature properties" },
   { key: "showFeatureTooltip", label: "Feature Tooltip", description: "Hover tooltip on features" },
   { key: "showExportButton", label: "Export Button", description: "Export data as CSV" },
-  { key: "showLegendOpacity", label: "Legend Opacity", description: "Expand legend with opacity sliders" }
+  { key: "showLegendOpacity", label: "Legend Opacity", description: "Expand legend with opacity sliders" },
+  { key: "showMeasureTool", label: "Measure Tool", description: "Measure distances and areas on the map" },
+  { key: "showSelectionTool", label: "Selection Tool", description: "Select features by click or box draw" }
 ];
-function Za({ value: e, onChange: t }) {
-  const i = (r, n) => {
-    t({ ...e, [r]: n });
+function It({ value: e, onChange: t }) {
+  const i = (r, p) => {
+    t({ ...e, [r]: p });
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
     /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-2 mapui:text-xs mapui:text-gray-500", children: "Enable or disable UI panels and controls." }),
-    /* @__PURE__ */ a("div", { className: "mapui:grid mapui:grid-cols-1 mapui:gap-2 sm:mapui:grid-cols-2", children: $a.map(({ key: r, label: n, description: p }) => {
-      const o = e[r];
+    /* @__PURE__ */ a("div", { className: "mapui:grid mapui:grid-cols-1 mapui:gap-2 sm:mapui:grid-cols-2", children: mt.map(({ key: r, label: p, description: u }) => {
+      const n = e[r];
       return /* @__PURE__ */ l(
         "label",
         {
           className: "mapui:flex mapui:cursor-pointer mapui:items-center mapui:justify-between mapui:gap-3 mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-3 mapui:py-2 hover:mapui:bg-gray-50",
           children: [
             /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
-              /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: n }),
-              /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-500", children: p })
+              /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: p }),
+              /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-500", children: u })
             ] }),
             /* @__PURE__ */ l("div", { className: "mapui:relative mapui:flex mapui:shrink-0 mapui:items-center", children: [
               /* @__PURE__ */ a(
                 "input",
                 {
                   type: "checkbox",
-                  checked: o,
-                  onChange: (b) => i(r, b.target.checked),
+                  checked: n,
+                  onChange: (f) => i(r, f.target.checked),
                   className: "mapui:sr-only",
-                  "aria-label": n
+                  "aria-label": p
                 }
               ),
               /* @__PURE__ */ a(
@@ -3032,14 +3567,14 @@ function Za({ value: e, onChange: t }) {
                 {
                   className: [
                     "mapui:relative mapui:h-5 mapui:w-9 mapui:rounded-full mapui:transition-colors",
-                    o ? "mapui:bg-blue-600" : "mapui:bg-gray-300"
+                    n ? "mapui:bg-blue-600" : "mapui:bg-gray-300"
                   ].join(" "),
                   children: /* @__PURE__ */ a(
                     "div",
                     {
                       className: [
                         "mapui:absolute mapui:top-0.5 mapui:h-4 mapui:w-4 mapui:rounded-full mapui:bg-white mapui:shadow mapui:transition-transform",
-                        o ? "mapui:translate-x-4" : "mapui:translate-x-0.5"
+                        n ? "mapui:translate-x-4" : "mapui:translate-x-0.5"
                       ].join(" ")
                     }
                   )
@@ -3053,46 +3588,46 @@ function Za({ value: e, onChange: t }) {
     }) })
   ] });
 }
-const Ge = [
+const Ke = [
   { key: "latitude", label: "Latitude", min: -90, max: 90, step: 1e-6, placeholder: "0" },
   { key: "longitude", label: "Longitude", min: -180, max: 180, step: 1e-6, placeholder: "0" },
   { key: "zoom", label: "Zoom", min: 0, max: 24, step: 0.1, placeholder: "2" },
   { key: "pitch", label: "Pitch (°)", min: 0, max: 85, step: 1, placeholder: "0" },
   { key: "bearing", label: "Bearing (°)", min: -180, max: 180, step: 1, placeholder: "0" }
 ];
-function Ra(e, t) {
-  const i = Ge.find((r) => r.key === e);
+function st(e, t) {
+  const i = Ke.find((r) => r.key === e);
   if (i) {
     if (isNaN(t)) return "Must be a number";
     if (t < i.min) return `Must be at least ${i.min}`;
     if (t > i.max) return `Must be at most ${i.max}`;
   }
 }
-const Ba = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function et({ value: e, onChange: t }) {
-  const i = (r, n) => {
-    const p = parseFloat(n);
-    t({ ...e, [r]: isNaN(p) ? 0 : p });
+const ct = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+function Mt({ value: e, onChange: t }) {
+  const i = (r, p) => {
+    const u = parseFloat(p);
+    t({ ...e, [r]: isNaN(u) ? 0 : u });
   };
-  return /* @__PURE__ */ a("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: Ge.map(({ key: r, label: n, min: p, max: o, step: b, placeholder: m }) => {
-    const w = Ra(r, e[r]);
-    return /* @__PURE__ */ a(D, { label: n, error: w, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: Ke.map(({ key: r, label: p, min: u, max: n, step: f, placeholder: s }) => {
+    const g = st(r, e[r]);
+    return /* @__PURE__ */ a(S, { label: p, error: g, children: /* @__PURE__ */ a(
       "input",
       {
         type: "number",
-        min: p,
-        max: o,
-        step: b,
+        min: u,
+        max: n,
+        step: f,
         value: e[r],
-        placeholder: m,
+        placeholder: s,
         onChange: (d) => i(r, d.target.value),
-        className: `${Ba} ${w ? "mapui:border-red-400" : ""}`
+        className: `${ct} ${g ? "mapui:border-red-400" : ""}`
       }
     ) }, r);
   }) });
 }
-function at({ config: e }) {
-  const t = Ye(e);
+function Ft({ config: e }) {
+  const t = sa(e);
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
       /* @__PURE__ */ a(
@@ -3117,138 +3652,184 @@ function at({ config: e }) {
     /* @__PURE__ */ a("div", { className: "mapui:overflow-auto mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-gray-50", children: /* @__PURE__ */ a("pre", { className: "mapui:m-0 mapui:p-3 mapui:text-xs mapui:text-gray-800 mapui:whitespace-pre", children: JSON.stringify(e, null, 2) }) })
   ] });
 }
+function dt(e, t) {
+  const [i, r] = e, [p, u] = t;
+  return {
+    type: "Polygon",
+    coordinates: [[
+      [i, r],
+      [p, r],
+      [p, u],
+      [i, u],
+      [i, r]
+    ]]
+  };
+}
+function Pt(e, t) {
+  return {
+    type: "Feature",
+    properties: {},
+    geometry: dt(e, t)
+  };
+}
 export {
-  ui as BasemapConfigSchema,
-  Te as BasemapEditor,
-  Ka as BasemapList,
-  rt as BasemapSwitcher,
-  mi as CircleLayoutSchema,
-  si as CirclePaintSchema,
-  ci as CircleStyleSchema,
-  nt as CollapsibleControl,
-  _a as CollectionBrowser,
-  Y as ColorPicker,
-  at as ConfigPreview,
-  Z as ConfirmDialog,
-  pt as CoordinateDisplay,
-  di as DatetimeSearchFieldSchema,
-  ct as ExportButton,
-  ht as FeatureDetailPanel,
-  bt as FeatureTooltip,
-  hi as FillLayoutSchema,
-  gi as FillPaintSchema,
-  bi as FillStyleSchema,
-  yi as FilterConfigSchema,
-  D as FormField,
-  fi as GeometryTypeSchema,
-  xi as LayerConfigSchema,
-  De as LayerEditor,
-  Ja as LayerList,
-  ft as LayerPanel,
-  wt as Legend,
-  wi as LegendConfigSchema,
-  Na as LegendEditor,
-  va as LegendEntryEditor,
-  vi as LegendEntrySchema,
-  Ni as LineLayoutSchema,
-  ki as LinePaintSchema,
-  Ci as LineStyleSchema,
-  Si as MapConfigSchema,
-  Di as NumberSearchFieldSchema,
-  Ti as OgcApiSourceSchema,
-  Li as PropertyDisplayConfigSchema,
-  Aa as PropertyDisplayEditor,
-  Ai as PropertyDisplaySchema,
-  Ii as SearchConfigSchema,
-  Ca as SearchFieldEditor,
-  Da as SearchFieldList,
-  Ei as SearchFieldSchema,
-  Nt as SearchPanel,
-  Fi as SelectSearchFieldSchema,
-  ce as SourceEditor,
-  Va as SourceList,
-  Ae as SpriteSourceEditor,
-  Qa as SpriteSourceList,
-  Pi as SpriteSourceSchema,
-  Mi as StyleConfigSchema,
-  wa as StyleEditor,
-  Oi as SymbolLayoutSchema,
-  ji as SymbolPaintSchema,
-  $i as SymbolStyleSchema,
-  Ri as TextSearchFieldSchema,
-  Za as UIConfigEditor,
-  Bi as UIConfigSchema,
-  qi as ViewConfigSchema,
-  et as ViewEditor,
-  Ct as and,
-  St as between,
-  Pa as buildDefaultStylesForGeometryTypes,
-  Oe as defaultCircle,
-  me as defaultFill,
-  ga as defaultLine,
-  ba as defaultSymbol,
-  qe as detectGeometryStyleTypesFromQueryables,
-  Ea as detectGeometryTypeFromQueryables,
-  Ue as detectGeometryTypesFromFeatures,
-  Ya as detectStyleTypeForCollection,
-  Xa as detectStyleTypesForCollection,
-  Dt as downloadCsv,
-  Tt as eq,
-  Me as expressionColors,
-  ra as expressionEntries,
-  la as expressionPropertyName,
-  ia as expressionType,
-  $e as extractGeometryType,
-  Lt as featuresToCsv,
-  At as fetchCollectionDetail,
-  It as fetchCollections,
-  Et as fetchConformance,
-  _e as fetchDistinctValues,
-  Ft as fetchFeatureCount,
-  se as fetchFeatures,
-  Pe as fetchQueryables,
-  Pt as fetchSpriteNames,
-  Mt as fetchSpriteUrlFromStyle,
-  Ot as fetchTileJson,
-  ut as formatDMS,
-  mt as formatDecimal,
-  jt as fromSimpleFilters,
-  $t as fromStructuredFilters,
-  Re as geometryTypeToStyleType,
-  Be as geometryTypeToStyleTypes,
-  ae as getColorFromPalette,
-  Rt as getCql2FilteredVectorTileUrl,
-  Bt as getFilteredVectorTileUrl,
-  na as getPrimaryColor,
-  oa as getShapeForStyleType,
-  qt as getTileJsonUrl,
-  Ut as getVectorTileUrl,
-  Gt as gt,
-  Wt as gte,
-  Ha as humanizePropertyName,
-  zt as inList,
-  W as isExpression,
-  Ia as isGeometryProperty,
-  Vt as isNull,
-  _t as like,
-  Yt as lt,
-  Xt as lte,
-  Ht as neq,
-  Jt as not,
-  Kt as or,
-  Qt as resolveAvailableIcons,
-  Zt as resolvePropertyDisplay,
-  ei as resolveStyleWithSprites,
-  Ye as safeValidateMapConfig,
-  ai as serializeCql2,
-  ti as tAfter,
-  ii as tBefore,
-  ri as tDuring,
-  Fa as toAvailableProperties,
-  li as useCsvExport,
-  ni as useOgcCollectionDetail,
-  Fe as useOgcCollections,
-  oi as useOgcFeatures,
-  Ve as useOgcQueryables,
-  Ui as validateMapConfig
+  rr as BasemapConfigSchema,
+  Oe as BasemapEditor,
+  At as BasemapList,
+  $t as BasemapSwitcher,
+  lr as CircleLayoutSchema,
+  pr as CirclePaintSchema,
+  nr as CircleStyleSchema,
+  Bt as CollapsibleControl,
+  X as CollapsibleSection,
+  Ct as CollectionBrowser,
+  J as ColorPicker,
+  Ft as ConfigPreview,
+  re as ConfirmDialog,
+  Ut as CoordinateDisplay,
+  ur as DatetimeSearchFieldSchema,
+  _t as ExportButton,
+  xt as ExportModal,
+  Ht as FeatureDetailPanel,
+  Xt as FeatureTooltip,
+  or as FillLayoutSchema,
+  mr as FillPaintSchema,
+  sr as FillStyleSchema,
+  cr as FilterConfigSchema,
+  S as FormField,
+  dr as GeometryTypeSchema,
+  hr as LayerConfigSchema,
+  je as LayerEditor,
+  Lt as LayerList,
+  Kt as LayerPanel,
+  Zt as Legend,
+  gr as LegendConfigSchema,
+  Xa as LegendEditor,
+  Ya as LegendEntryEditor,
+  br as LegendEntrySchema,
+  yr as LineLayoutSchema,
+  fr as LinePaintSchema,
+  xr as LineStyleSchema,
+  wr as MapConfigSchema,
+  wt as MeasurePanel,
+  Nr as NumberSearchFieldSchema,
+  vr as OgcApiSourceSchema,
+  kr as PropertyDisplayConfigSchema,
+  tt as PropertyDisplayEditor,
+  Cr as PropertyDisplaySchema,
+  vt as ResultsDrawer,
+  Sr as SearchConfigSchema,
+  Ka as SearchFieldEditor,
+  Za as SearchFieldList,
+  Tr as SearchFieldSchema,
+  tr as SearchPanel,
+  Dr as SelectSearchFieldSchema,
+  Nt as SelectionPanel,
+  we as SourceEditor,
+  kt as SourceList,
+  Re as SpriteSourceEditor,
+  Et as SpriteSourceList,
+  Lr as SpriteSourceSchema,
+  Ar as StyleConfigSchema,
+  Ha as StyleEditor,
+  Er as SymbolLayoutSchema,
+  Ir as SymbolPaintSchema,
+  Mr as SymbolStyleSchema,
+  Fr as TextSearchFieldSchema,
+  It as UIConfigEditor,
+  Pr as UIConfigSchema,
+  na as UNITS_FOR_MODE,
+  xe as UNIT_LABELS,
+  jr as ViewConfigSchema,
+  Mt as ViewEditor,
+  ai as and,
+  ti as bboxFromGeometry,
+  ii as between,
+  Pt as buildBoxDrawData,
+  dt as buildBoxPolygon,
+  pt as buildDefaultStylesForGeometryTypes,
+  ri as buildMeasureGeometryData,
+  li as buildMeasurePointsData,
+  pi as calculateArea,
+  ni as calculateDistance,
+  ui as calculateMeasurement,
+  _e as defaultCircle,
+  ge as defaultFill,
+  qa as defaultLine,
+  Ga as defaultSymbol,
+  oi as defaultUnitForMode,
+  Xe as detectGeometryStyleTypesFromQueryables,
+  rt as detectGeometryTypeFromQueryables,
+  Je as detectGeometryTypesFromFeatures,
+  St as detectStyleTypeForCollection,
+  Tt as detectStyleTypesForCollection,
+  mi as downloadBlob,
+  si as downloadCsv,
+  ci as eq,
+  We as expressionColors,
+  Ia as expressionEntries,
+  Ma as expressionPropertyName,
+  Ea as expressionType,
+  He as extractGeometryType,
+  di as featuresToCsv,
+  hi as fetchCollectionDetail,
+  gi as fetchCollections,
+  bi as fetchConformance,
+  ma as fetchDistinctValues,
+  yi as fetchFeatureById,
+  fi as fetchFeatureCount,
+  ye as fetchFeatures,
+  Ge as fetchQueryables,
+  xi as fetchSpriteNames,
+  wi as fetchSpriteUrlFromStyle,
+  Ni as fetchTileJson,
+  qt as formatDMS,
+  Gt as formatDecimal,
+  ua as formatMeasurement,
+  vi as fromSimpleFilters,
+  ki as fromStructuredFilters,
+  Ye as geometryTypeToStyleType,
+  fe as geometryTypeToStyleTypes,
+  pe as getColorFromPalette,
+  Ci as getCql2FilteredVectorTileUrl,
+  Si as getFilteredVectorTileUrl,
+  Fa as getPrimaryColor,
+  Pa as getShapeForStyleType,
+  Ti as getTileJsonUrl,
+  Di as getVectorTileUrl,
+  Li as gt,
+  Ai as gte,
+  Dt as humanizePropertyName,
+  Ei as inList,
+  _ as isExpression,
+  it as isGeometryProperty,
+  Ii as isNull,
+  Mi as like,
+  Fi as lt,
+  Pi as lte,
+  ji as neq,
+  Oi as not,
+  $i as or,
+  Ri as resolveAvailableIcons,
+  Bi as resolvePropertyDisplay,
+  zi as resolveStyleWithSprites,
+  Ui as sDwithin,
+  qi as sIntersects,
+  Gi as sWithin,
+  sa as safeValidateMapConfig,
+  Wi as selectedFeatureKey,
+  _i as serializeCql2,
+  Vi as tAfter,
+  Hi as tBefore,
+  Yi as tDuring,
+  lt as toAvailableProperties,
+  Xi as useCsvExport,
+  Ji as useExport,
+  Ki as useMeasure,
+  Qi as useOgcCollectionDetail,
+  qe as useOgcCollections,
+  Zi as useOgcFeatures,
+  oa as useOgcQueryables,
+  er as useSelection,
+  Or as validateMapConfig
 };