@ogc-maps/storybook-components 0.5.3 → 0.6.1

package/dist/main.js

@@ -1,51 +1,82 @@
-import { B as ca } from "./BasemapSwitcher-BW7lyZ2Y.js";
-import { C as da } from "./CollapsibleControl-VFUTWb_5.js";
-import { C as ba, f as ha, a as ya } from "./CoordinateDisplay-PxPmVjpm.js";
-import { E as xa } from "./ExportButton-CLsWoW4m.js";
-import { F as va } from "./FeatureDetailPanel-CkFpdEKW.js";
-import { F as ka } from "./FeatureTooltip-Db1LgLQV.js";
-import { L as Sa } from "./LayerPanel-SCdJ8948.js";
-import { L as Ta } from "./Legend-TTWWpWDT.js";
-import { S as Ia } from "./SearchPanel-DCY01Wa-.js";
-import { jsxs as r, jsx as e, Fragment as O } from "react/jsx-runtime";
-import { useState as w, useEffect as J, useRef as Z } from "react";
-import { I as me, j as Ne, i as ce, K as ve } from "./cql2-Dhe6Ny6v.js";
-import { a as Ea, b as Fa, L as Pa, e as Oa, M as Ma, f as ja, c as Ba, d as Ra, g as $a, h as qa, k as Ua, l as Va, m as Ga, n as za, o as Wa, p as Ya, q as Ja, r as _a, s as Ha, t as Xa, u as Ka, v as Qa, w as Za, x as ei, y as ai, z as ii, A as ti, B as li, C as ri, D as pi, E as ui, F as ni, G as oi, H as mi, J as ci } from "./cql2-Dhe6Ny6v.js";
-import { s as we } from "./index-DoToolWp.js";
-import { B as di, C as gi, a as bi, b as hi, D as yi, F as fi, c as xi, d as Ni, e as vi, L as wi, f as ki, g as Ci, h as Si, i as Di, j as Ti, M as Li, N as Ii, O as Ai, P as Ei, k as Fi, S as Pi, l as Oi, m as Mi, n as ji, o as Bi, p as Ri, q as $i, T as qi, U as Ui, V as Vi, v as Gi } from "./index-DoToolWp.js";
-import './style.css';function N({ label: a, error: i, required: t, htmlFor: l, children: n }) {
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
-    /* @__PURE__ */ r("label", { htmlFor: l, className: "mapui:text-xs mapui:font-medium mapui:text-gray-700", children: [
-      a,
-      t && /* @__PURE__ */ e("span", { className: "mapui:ml-0.5 mapui:text-red-500", "aria-hidden": "true", children: "*" })
+import { B as et } from "./BasemapSwitcher-BW7lyZ2Y.js";
+import { C as tt } from "./CollapsibleControl-VFUTWb_5.js";
+import { C as rt, f as lt, a as nt } from "./CoordinateDisplay-PxPmVjpm.js";
+import { E as ot } from "./ExportButton-CLsWoW4m.js";
+import { F as mt } from "./FeatureDetailPanel-CkFpdEKW.js";
+import { F as ct } from "./FeatureTooltip-Db1LgLQV.js";
+import { L as ht } from "./LayerPanel-SCdJ8948.js";
+import { L as bt } from "./Legend-B6uIqOSw.js";
+import { S as ft } from "./SearchPanel-DCY01Wa-.js";
+import { jsxs as l, jsx as a, Fragment as B } from "react/jsx-runtime";
+import { useId as Ee, useState as L, useRef as ue, useMemo as Pe, useCallback as ze, useEffect as X } from "react";
+import { LuInfo as Ve } from "react-icons/lu";
+import { J as Fe, j as Me, i as se, L as _e, g as Ye } from "./cql2-onoyCbps.js";
+import { a as wt, b as vt, M as Nt, e as kt, N as Ct, f as St, c as Dt, d as Tt, h as Lt, O as It, P as At, k as Et, l as Pt, m as Ft, n as Mt, o as Ot, p as jt, q as $t, r as Rt, s as Bt, t as qt, u as Ut, v as Wt, w as Gt, x as zt, y as Vt, z as _t, A as Yt, Q as Xt, B as Ht, C as Jt, D as Kt, E as Qt, F as Zt, G as ei, H as ai, I as ti, K as ii } from "./cql2-onoyCbps.js";
+import { s as Xe } from "./index-B4i0zJXf.js";
+import { B as li, C as ni, a as pi, b as oi, D as ui, F as mi, c as si, d as ci, e as di, L as hi, f as gi, g as bi, h as yi, i as fi, j as xi, M as wi, N as vi, O as Ni, P as ki, k as Ci, S as Si, l as Di, m as Ti, n as Li, o as Ii, p as Ai, q as Ei, r as Pi, T as Fi, U as Mi, V as Oi, v as ji } from "./index-B4i0zJXf.js";
+import './style.css';function He({ text: e, id: t }) {
+  const i = Ee(), r = t ?? i;
+  return /* @__PURE__ */ l("span", { className: "mapui:relative mapui:inline-flex mapui:group", children: [
+    /* @__PURE__ */ a(
+      "span",
+      {
+        tabIndex: 0,
+        "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(Ve, { className: "mapui:h-3.5 mapui:w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ l(
+      "span",
+      {
+        id: r,
+        role: "tooltip",
+        className: "mapui:pointer-events-none mapui:absolute mapui:bottom-full mapui:left-1/2 mapui:-translate-x-1/2 mapui:mb-1.5 mapui:w-48 mapui:rounded mapui:bg-gray-900 mapui:px-2 mapui:py-1.5 mapui:text-xs mapui:text-white mapui:shadow-lg mapui:opacity-0 mapui:group-hover:opacity-100 mapui:group-focus-within:opacity-100 mapui:transition-opacity mapui:z-50",
+        children: [
+          e,
+          /* @__PURE__ */ a("span", { className: "mapui:absolute mapui:top-full mapui:left-1/2 mapui:-translate-x-1/2 mapui:border-4 mapui:border-transparent mapui:border-t-gray-900" })
+        ]
+      }
+    )
+  ] });
+}
+function S({ label: e, error: t, required: i, description: r, htmlFor: n, children: o }) {
+  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: [
+        e,
+        i && /* @__PURE__ */ a("span", { className: "mapui:ml-0.5 mapui:text-red-500", "aria-hidden": "true", children: "*" })
+      ] }),
+      r && /* @__PURE__ */ a(He, { text: r })
     ] }),
-    n,
-    i && /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-xs mapui:text-red-600", role: "alert", children: i })
+    o,
+    t && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-xs mapui:text-red-600", role: "alert", children: t })
   ] });
 }
-function se({ value: a, onChange: i, label: t }) {
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-    /* @__PURE__ */ e(
+function Y({ value: e, onChange: t, label: i }) {
+  return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+    /* @__PURE__ */ a(
       "input",
       {
         type: "color",
-        value: a,
-        onChange: (l) => i(l.target.value),
-        "aria-label": t ?? "Color",
+        value: e,
+        onChange: (r) => t(r.target.value),
+        "aria-label": i ?? "Color",
         className: "mapui:h-8 mapui:w-10 mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:p-0.5"
       }
     ),
-    /* @__PURE__ */ e("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-600", children: a })
+    /* @__PURE__ */ a("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-600", children: e })
   ] });
 }
-function H({
-  open: a,
-  title: i,
-  description: t,
-  onConfirm: l,
+function Z({
+  open: e,
+  title: t,
+  description: i,
+  onConfirm: r,
   onCancel: n
 }) {
-  return a ? /* @__PURE__ */ e(
+  return e ? /* @__PURE__ */ a(
     "div",
     {
       className: "mapui:fixed mapui:inset-0 mapui:z-50 mapui:flex mapui:items-center mapui:justify-center mapui:bg-black/50",
@@ -53,25 +84,25 @@ function H({
       "aria-modal": "true",
       "aria-labelledby": "confirm-dialog-title",
       "aria-describedby": "confirm-dialog-description",
-      children: /* @__PURE__ */ r("div", { className: "mapui:w-full mapui:max-w-sm mapui:rounded-lg mapui:bg-white mapui:p-6 mapui:shadow-xl", children: [
-        /* @__PURE__ */ e(
+      children: /* @__PURE__ */ l("div", { className: "mapui:w-full mapui:max-w-sm mapui:rounded-lg mapui:bg-white mapui:p-6 mapui:shadow-xl", children: [
+        /* @__PURE__ */ a(
           "h2",
           {
             id: "confirm-dialog-title",
             className: "mapui:m-0 mapui:mb-2 mapui:text-base mapui:font-semibold mapui:text-gray-900",
-            children: i
+            children: t
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ a(
           "p",
           {
             id: "confirm-dialog-description",
             className: "mapui:m-0 mapui:mb-6 mapui:text-sm mapui:text-gray-600",
-            children: t
+            children: i
           }
         ),
-        /* @__PURE__ */ r("div", { className: "mapui:flex mapui:justify-end mapui:gap-2", children: [
-          /* @__PURE__ */ e(
+        /* @__PURE__ */ l("div", { className: "mapui:flex mapui:justify-end mapui:gap-2", children: [
+          /* @__PURE__ */ a(
             "button",
             {
               type: "button",
@@ -80,11 +111,11 @@ function H({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: l,
+              onClick: r,
               className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-transparent mapui:bg-red-600 mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:text-white hover:mapui:bg-red-700",
               children: "Confirm"
             }
@@ -94,202 +125,202 @@ function H({
     }
   ) : null;
 }
-function q({
-  title: a,
-  children: i,
-  defaultOpen: t = !1,
-  badge: l
+function _({
+  title: e,
+  children: t,
+  defaultOpen: i = !1,
+  badge: r
 }) {
-  const [n, u] = w(t);
-  return /* @__PURE__ */ r("div", { className: "mapui:rounded mapui:border mapui:border-gray-200", children: [
-    /* @__PURE__ */ r(
+  const [n, o] = L(i);
+  return /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-gray-200", children: [
+    /* @__PURE__ */ l(
       "button",
       {
         type: "button",
-        onClick: () => u((p) => !p),
+        onClick: () => o((p) => !p),
         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__ */ r("span", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-            a,
-            l !== void 0 && l > 0 && /* @__PURE__ */ e("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: l })
+          /* @__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__ */ e("span", { "aria-hidden": "true", children: n ? "▲" : "▼" })
+          /* @__PURE__ */ a("span", { "aria-hidden": "true", children: n ? "▲" : "▼" })
         ]
       }
     ),
-    n && /* @__PURE__ */ e("div", { className: "mapui:p-3", children: i })
+    n && /* @__PURE__ */ a("div", { className: "mapui:p-3", children: t })
   ] });
 }
-const U = "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 ee({
-  value: a,
-  onChange: i,
-  onTestConnection: t,
-  testStatus: l = "idle",
+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 de({
+  value: e,
+  onChange: t,
+  onTestConnection: i,
+  testStatus: r = "idle",
   testError: n
 }) {
-  const u = (p) => i({ ...a, ...p });
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ e(N, { label: "ID", required: !0, children: /* @__PURE__ */ e(
+  const o = (p) => t({ ...e, ...p });
+  return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
+    /* @__PURE__ */ a(S, { label: "ID", required: !0, children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: a.id,
-        onChange: (p) => u({ id: p.target.value }),
+        value: e.id,
+        onChange: (p) => o({ id: p.target.value }),
         placeholder: "my-source",
-        className: U
+        className: H
       }
     ) }),
-    /* @__PURE__ */ r(N, { label: "URL", required: !0, children: [
-      /* @__PURE__ */ r("div", { className: "mapui:flex mapui:gap-2", children: [
-        /* @__PURE__ */ e(
+    /* @__PURE__ */ l(S, { label: "URL", required: !0, children: [
+      /* @__PURE__ */ l("div", { className: "mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ a(
           "input",
           {
             type: "url",
-            value: a.url,
-            onChange: (p) => u({ url: p.target.value }),
+            value: e.url,
+            onChange: (p) => o({ url: p.target.value }),
             placeholder: "https://example.com/ogcapi",
-            className: `${U} mapui:flex-1`
+            className: `${H} mapui:flex-1`
           }
         ),
-        t && /* @__PURE__ */ e(
+        i && /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: () => t(a.url),
-            disabled: l === "loading" || !a.url,
+            onClick: () => i(e.url),
+            disabled: r === "loading" || !e.url,
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-blue-500 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-sm mapui:text-blue-600 hover:mapui:bg-blue-50 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
-            children: l === "loading" ? "Testing…" : "Test Connection"
+            children: r === "loading" ? "Testing…" : "Test Connection"
           }
         )
       ] }),
-      l === "success" && /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-green-600", children: "Connection successful" }),
-      l === "error" && /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-red-600", children: n ?? "Connection failed" })
+      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" })
     ] }),
-    /* @__PURE__ */ e(N, { label: "Label", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: a.label ?? "",
-        onChange: (p) => u({ label: p.target.value || void 0 }),
+        value: e.label ?? "",
+        onChange: (p) => o({ label: p.target.value || void 0 }),
         placeholder: "My OGC API Source",
-        className: U
+        className: H
       }
     ) }),
-    /* @__PURE__ */ e(N, { label: "Tile Matrix Set ID", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ a(S, { label: "Tile Matrix Set ID", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: a.tileMatrixSetId ?? "WebMercatorQuad",
-        onChange: (p) => u({ tileMatrixSetId: p.target.value || void 0 }),
+        value: e.tileMatrixSetId ?? "WebMercatorQuad",
+        onChange: (p) => o({ tileMatrixSetId: p.target.value || void 0 }),
         placeholder: "WebMercatorQuad",
-        className: U
+        className: H
       }
     ) })
   ] });
 }
-const G = () => ({
+const ee = () => ({
   id: "",
   url: "",
   label: void 0,
   tileMatrixSetId: "WebMercatorQuad"
 });
-function ea({ sources: a, onChange: i }) {
-  const [t, l] = w(null), [n, u] = w(null), [p, o] = w(!1), [g, x] = w(G()), [d, y] = w({}), [k, c] = w({}), [b, m] = w(null), C = async (f, T) => {
-    y((L) => ({ ...L, [f]: "loading" }));
+function Ua({ sources: e, onChange: t }) {
+  const [i, r] = L(null), [n, o] = L(null), [p, b] = L(!1), [m, w] = L(ee()), [d, f] = L({}), [c, u] = L({}), [s, v] = L(null), k = async (C, P) => {
+    f((E) => ({ ...E, [C]: "loading" }));
     try {
-      const L = await fetch(`${T}/conformance`);
-      L.ok ? y((D) => ({ ...D, [f]: "success" })) : (y((D) => ({ ...D, [f]: "error" })), c((D) => ({ ...D, [f]: `HTTP ${L.status}` })));
-    } catch (L) {
-      y((D) => ({ ...D, [f]: "error" })), c((D) => ({ ...D, [f]: L instanceof Error ? L.message : "Network error" }));
+      const E = await fetch(`${P}/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" }));
     }
-  }, s = () => {
-    n && (i(a.map((f) => f.id === t ? n : f)), l(null), u(null));
-  }, S = () => {
-    i([...a, g]), o(!1), x(G());
-  }, A = (f) => {
-    i(a.filter((T) => T.id !== f)), m(null);
+  }, D = () => {
+    n && (t(e.map((C) => C.id === i ? n : C)), r(null), o(null));
+  }, x = () => {
+    t([...e, m]), b(!1), w(ee());
+  }, $ = (C) => {
+    t(e.filter((P) => P.id !== C)), v(null);
   };
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
-      /* @__PURE__ */ e("h3", { className: "mapui:m-0 mapui:text-sm mapui:font-semibold mapui:text-gray-700", children: "Sources" }),
-      /* @__PURE__ */ 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:justify-between", children: [
+      /* @__PURE__ */ a("h3", { className: "mapui:m-0 mapui:text-sm mapui:font-semibold mapui:text-gray-700", children: "Sources" }),
+      /* @__PURE__ */ a(
         "button",
         {
           type: "button",
           onClick: () => {
-            o(!0), x(G());
+            b(!0), w(ee());
           },
           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"
         }
       )
     ] }),
-    a.length === 0 && !p && /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No sources configured." }),
-    /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: a.map((f) => /* @__PURE__ */ e(
+    e.length === 0 && !p && /* @__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(
       "li",
       {
         className: "mapui:rounded-lg mapui:border mapui:border-gray-200 mapui:bg-white mapui:p-3",
-        children: t === f.id ? /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-          /* @__PURE__ */ e(
-            ee,
+        children: i === C.id ? /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
+          /* @__PURE__ */ a(
+            de,
             {
-              value: n ?? f,
-              onChange: u,
-              onTestConnection: (T) => C(`edit-${f.id}`, T),
-              testStatus: d[`edit-${f.id}`],
-              testError: k[`edit-${f.id}`]
+              value: n ?? C,
+              onChange: o,
+              onTestConnection: (P) => k(`edit-${C.id}`, P),
+              testStatus: d[`edit-${C.id}`],
+              testError: c[`edit-${C.id}`]
             }
           ),
-          /* @__PURE__ */ r("div", { className: "mapui:flex mapui:gap-2", children: [
-            /* @__PURE__ */ e(
+          /* @__PURE__ */ l("div", { className: "mapui:flex mapui:gap-2", children: [
+            /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
-                onClick: s,
+                onClick: D,
                 disabled: !(n != null && n.id) || !(n != null && 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"
               }
             ),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  l(null), u(null);
+                  r(null), o(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"
               }
             )
           ] })
-        ] }) : /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-start mapui:justify-between mapui:gap-2", children: [
-          /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
-            /* @__PURE__ */ e("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: f.label ?? f.id }),
-            /* @__PURE__ */ e("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: f.url }),
-            f.tileMatrixSetId && /* @__PURE__ */ r("span", { className: "mapui:text-xs mapui:text-gray-400", children: [
+        ] }) : /* @__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: [
               "TMS: ",
-              f.tileMatrixSetId
+              C.tileMatrixSetId
             ] })
           ] }),
-          /* @__PURE__ */ r("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
-            /* @__PURE__ */ e(
+          /* @__PURE__ */ l("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+            /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  l(f.id), u(f);
+                  r(C.id), o(C);
                 },
                 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"
               }
             ),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
-                onClick: () => m(f.id),
+                onClick: () => v(C.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"
               }
@@ -297,356 +328,836 @@ function ea({ sources: a, onChange: i }) {
           ] })
         ] })
       },
-      f.id
+      C.id
     )) }),
-    p && /* @__PURE__ */ r("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
-      /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Source" }),
-      /* @__PURE__ */ e(
-        ee,
+    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 Source" }),
+      /* @__PURE__ */ a(
+        de,
         {
-          value: g,
-          onChange: x,
-          onTestConnection: (f) => C("new", f),
+          value: m,
+          onChange: w,
+          onTestConnection: (C) => k("new", C),
           testStatus: d.new,
-          testError: k.new
+          testError: c.new
         }
       ),
-      /* @__PURE__ */ r("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
-        /* @__PURE__ */ e(
+      /* @__PURE__ */ l("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: S,
-            disabled: !g.id || !g.url,
+            onClick: x,
+            disabled: !m.id || !m.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"
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: () => o(!1),
+            onClick: () => b(!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"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ e(
-      H,
+    /* @__PURE__ */ a(
+      Z,
       {
-        open: b !== null,
+        open: s !== null,
         title: "Remove Source",
         description: "Are you sure you want to remove this source? Any layers using it will be affected.",
-        onConfirm: () => b && A(b),
-        onCancel: () => m(null)
+        onConfirm: () => s && $(s),
+        onCancel: () => v(null)
       }
     )
   ] });
 }
-function aa({
-  sourceUrl: a,
-  selectedCollectionIds: i,
-  onSelect: t,
-  onDeselect: l
+function Wa({
+  sourceUrl: e,
+  selectedCollectionIds: t,
+  onSelect: i,
+  onDeselect: r
 }) {
-  const { collections: n, loading: u, error: p } = me(a || null);
-  return u ? /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:py-4 mapui:text-sm mapui:text-gray-500", children: [
-    /* @__PURE__ */ e("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" }),
+  const { collections: n, loading: o, error: p } = Fe(e || null);
+  return o ? /* @__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…"
-  ] }) : p ? /* @__PURE__ */ r("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3 mapui:text-sm mapui:text-red-700", children: [
+  ] }) : p ? /* @__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: ",
     p.message
-  ] }) : n.length === 0 ? /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No collections found at this source." }) : /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1 mapui:p-0", children: n.map((o) => {
-    const g = i.includes(o.id);
-    return /* @__PURE__ */ r(
+  ] }) : 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);
+    return /* @__PURE__ */ l(
       "li",
       {
         className: "mapui:flex mapui:items-start mapui:gap-3 mapui:rounded mapui:border mapui:border-gray-200 mapui:p-2 hover:mapui:bg-gray-50",
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ a(
             "input",
             {
               type: "checkbox",
-              id: `collection-${o.id}`,
-              checked: g,
-              onChange: () => g ? l(o.id) : t(o.id),
+              id: `collection-${b.id}`,
+              checked: m,
+              onChange: () => m ? r(b.id) : i(b.id),
               className: "mapui:mt-0.5 mapui:h-4 mapui:w-4 mapui:cursor-pointer mapui:accent-blue-600"
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ l(
             "label",
             {
-              htmlFor: `collection-${o.id}`,
+              htmlFor: `collection-${b.id}`,
               className: "mapui:flex mapui:cursor-pointer mapui:flex-col mapui:gap-0.5",
               children: [
-                /* @__PURE__ */ e("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: o.title ?? o.id }),
-                /* @__PURE__ */ e("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: o.id }),
-                o.description && /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-gray-400 mapui:line-clamp-2", children: o.description })
+                /* @__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 })
               ]
             }
           )
         ]
       },
-      o.id
+      b.id
     );
   }) });
 }
-const P = "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 ke({
-  value: a,
-  onChange: i
+function Je({ value: e, onChange: t, availableIcons: i }) {
+  const [r, n] = L(!1), [o, p] = L(-1), b = ue(null), m = Ee(), w = o >= 0 ? `${m}-option-${o}` : void 0, d = Pe(() => {
+    if (!i || i.length === 0) return [];
+    if (!e) return i;
+    const k = e.toLowerCase();
+    return i.filter((D) => D.toLowerCase().includes(k));
+  }, [i, e]), f = r && d.length > 0, c = ze(
+    (k) => {
+      t(k), n(!1), p(-1);
+    },
+    [t]
+  ), u = (k) => {
+    t(k.target.value), n(!0), p(-1);
+  }, s = (k) => {
+    f && (k.key === "ArrowDown" ? (k.preventDefault(), p((D) => Math.min(D + 1, d.length - 1))) : k.key === "ArrowUp" ? (k.preventDefault(), p((D) => Math.max(D - 1, 0))) : k.key === "Enter" && o >= 0 ? (k.preventDefault(), c(d[o])) : k.key === "Escape" && (n(!1), p(-1)));
+  };
+  X(() => {
+    const k = (D) => {
+      b.current && !b.current.contains(D.target) && (n(!1), p(-1));
+    };
+    return document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
+  }, []);
+  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";
+  return !i || i.length === 0 ? /* @__PURE__ */ a(
+    "input",
+    {
+      type: "text",
+      value: e,
+      onChange: (k) => t(k.target.value || ""),
+      placeholder: "icon-name",
+      className: v
+    }
+  ) : /* @__PURE__ */ l("div", { ref: b, className: "mapui:relative", children: [
+    /* @__PURE__ */ a(
+      "input",
+      {
+        type: "text",
+        value: e,
+        placeholder: "Search icons…",
+        role: "combobox",
+        "aria-expanded": f,
+        "aria-autocomplete": "list",
+        "aria-controls": m,
+        "aria-activedescendant": w,
+        onChange: u,
+        onFocus: () => n(!0),
+        onKeyDown: s,
+        className: v
+      }
+    ),
+    f && /* @__PURE__ */ a(
+      "ul",
+      {
+        id: m,
+        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((k, D) => /* @__PURE__ */ a(
+          "li",
+          {
+            id: `${m}-option-${D}`,
+            role: "option",
+            "aria-selected": D === o,
+            onMouseDown: (x) => {
+              x.preventDefault(), c(k);
+            },
+            className: `mapui:cursor-pointer mapui:px-2 mapui:py-1 mapui:text-sm mapui:font-mono ${D === o ? "mapui:bg-blue-100" : "hover:mapui:bg-gray-50"}`,
+            children: k
+          },
+          `${D}-${k}`
+        ))
+      }
+    )
+  ] });
+}
+const he = [
+  "#4e79a7",
+  "#f28e2b",
+  "#e15759",
+  "#76b7b2",
+  "#59a14f",
+  "#edc948",
+  "#b07aa1",
+  "#ff9da7",
+  "#9c755f",
+  "#bab0ac"
+];
+function ae(e) {
+  return he[e % he.length];
+}
+function Ke(e) {
+  return e[0] === "interpolate" ? "interpolate" : "match";
+}
+function Qe(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" });
+  return { property: t, pairs: r, fallback: i };
+}
+function ge(e, t, i) {
+  const r = ["match", ["get", e]];
+  for (const n of t)
+    r.push(n.value, n.color);
+  return r.push(i), r;
+}
+function Ze(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 be(e, t) {
+  const i = ["interpolate", ["linear"], ["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", ye = "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 ea({
+  value: e,
+  onChange: t,
+  availableProperties: i = [],
+  onFetchDistinctValues: r
+}) {
+  const [n, o] = L(() => Ke(e)), [p, b] = L(!1), m = Qe(e), w = Ze(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"
+  ), k = i.filter(
+    (h) => h.type === "number" || h.type === "integer"
+  ), D = (h, T, I) => {
+    t(ge(h, T, I));
+  }, x = (h) => {
+    D(h, f, c);
+  }, $ = (h) => {
+    D(d, f, h);
+  }, C = (h, T) => {
+    const I = f.map((A, W) => W === h ? { ...A, value: T } : A);
+    D(d, I, c);
+  }, P = (h, T) => {
+    const I = f.map((A, W) => W === h ? { ...A, color: T } : A);
+    D(d, I, c);
+  }, E = (h) => {
+    const T = f.filter((I, A) => A !== h);
+    D(d, T, c);
+  }, y = () => {
+    const h = [...f, { value: "", color: ae(f.length) }];
+    D(d, h, c);
+  }, F = async () => {
+    if (!(!r || !d)) {
+      b(!0);
+      try {
+        const T = (await r(d)).map((I, A) => ({
+          value: I,
+          color: ae(A)
+        }));
+        D(d, T, c);
+      } finally {
+        b(!1);
+      }
+    }
+  }, M = (h, T) => {
+    t(be(h, T));
+  }, g = (h) => {
+    M(h, s);
+  }, N = (h, T) => {
+    const I = s.map((A, W) => W === h ? { ...A, stop: T } : A);
+    M(u, I);
+  }, O = (h, T) => {
+    const I = s.map((A, W) => W === h ? { ...A, color: T } : A);
+    M(u, I);
+  }, q = (h) => {
+    const T = s.filter((I, A) => A !== h);
+    M(u, T);
+  }, U = () => {
+    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);
+  }, R = (h) => {
+    o(h), t(h === "match" ? ge("", [], "#000000") : be("", []));
+  };
+  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(
+      "button",
+      {
+        type: "button",
+        onClick: () => R(h),
+        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"
+        ].join(" "),
+        children: h === "match" ? "Categorical" : "Gradient"
+      },
+      h
+    )) }),
+    n === "match" && /* @__PURE__ */ l(B, { children: [
+      /* @__PURE__ */ l(
+        "select",
+        {
+          value: d,
+          onChange: (h) => x(h.target.value),
+          className: J,
+          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))
+          ]
+        }
+      ),
+      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: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "text",
+            value: h.value,
+            onChange: (I) => C(T, I.target.value),
+            placeholder: "value",
+            className: `${J} mapui:flex-1`
+          }
+        ),
+        /* @__PURE__ */ a(
+          Y,
+          {
+            value: h.color,
+            onChange: (I) => P(T, I),
+            label: `Color for "${h.value}"`
+          }
+        ),
+        /* @__PURE__ */ a("button", { type: "button", onClick: () => E(T), className: ye, children: "×" })
+      ] }, T)) }),
+      /* @__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: $, 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(
+          "button",
+          {
+            type: "button",
+            onClick: F,
+            disabled: p,
+            className: te,
+            children: p ? "Loading…" : "Auto-populate"
+          }
+        )
+      ] })
+    ] }),
+    n === "interpolate" && /* @__PURE__ */ l(B, { children: [
+      /* @__PURE__ */ l(
+        "select",
+        {
+          value: u,
+          onChange: (h) => g(h.target.value),
+          className: J,
+          children: [
+            /* @__PURE__ */ a("option", { value: "", children: "Select a numeric property…" }),
+            k.map((h) => /* @__PURE__ */ a("option", { value: h.name, children: h.title ?? h.name }, h.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) => N(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: () => q(T), className: ye, children: "×" })
+      ] }, T)) }),
+      /* @__PURE__ */ a("button", { type: "button", onClick: U, className: te, 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 aa({
+  value: e,
+  onChange: t
 }) {
-  const t = (a == null ? void 0 : a[0]) ?? 0, l = (a == null ? void 0 : a[1]) ?? 0;
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-    /* @__PURE__ */ e(
+  const i = (e == null ? void 0 : e[0]) ?? 0, r = (e == null ? void 0 : e[1]) ?? 0;
+  return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+    /* @__PURE__ */ a(
       "input",
       {
         type: "number",
         step: 0.5,
-        value: t,
-        onChange: (n) => i([parseFloat(n.target.value) || 0, l]),
-        className: `${P} mapui:w-20`,
+        value: i,
+        onChange: (n) => t([parseFloat(n.target.value) || 0, r]),
+        className: `${z} mapui:w-20`,
         "aria-label": "X",
         placeholder: "X"
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ a(
       "input",
       {
         type: "number",
         step: 0.5,
-        value: l,
-        onChange: (n) => i([t, parseFloat(n.target.value) || 0]),
-        className: `${P} mapui:w-20`,
+        value: r,
+        onChange: (n) => t([i, parseFloat(n.target.value) || 0]),
+        className: `${z} mapui:w-20`,
         "aria-label": "Y",
         placeholder: "Y"
       }
     )
   ] });
 }
-function Ce({
-  value: a,
-  onChange: i
+function ta({
+  value: e,
+  onChange: t
 }) {
-  const t = a ?? 1;
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-    /* @__PURE__ */ e(
+  const i = e ?? 1;
+  return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+    /* @__PURE__ */ a(
       "input",
       {
         type: "range",
         min: 0,
         max: 1,
         step: 0.01,
-        value: t,
-        onChange: (l) => i(parseFloat(l.target.value)),
+        value: i,
+        onChange: (r) => t(parseFloat(r.target.value)),
         className: "mapui:flex-1"
       }
     ),
-    /* @__PURE__ */ e("span", { className: "mapui:w-8 mapui:text-right mapui:text-xs mapui:text-gray-600", children: t.toFixed(2) })
+    /* @__PURE__ */ a("span", { className: "mapui:w-8 mapui:text-right mapui:text-xs mapui:text-gray-600", children: i.toFixed(2) })
   ] });
 }
-function ae({
-  def: a,
-  value: i,
-  onChange: t
+function fe({
+  def: e,
+  value: t,
+  onChange: i,
+  availableIcons: r,
+  availableProperties: n,
+  onFetchDistinctValues: o
 }) {
-  var l, n;
-  switch (a.widget) {
-    case "color":
-      return /* @__PURE__ */ e(
-        se,
-        {
-          value: i ?? "#000000",
-          onChange: t,
-          label: a.label
-        }
-      );
+  var p, b;
+  switch (e.widget) {
+    case "color": {
+      const m = Array.isArray(t), w = m ? 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",
+            onClick: () => {
+              i(m ? w : ["match", ["get", ""], w]);
+            },
+            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"
+            ].join(" "),
+            children: "fx"
+          }
+        ) }),
+        m ? /* @__PURE__ */ a(
+          ea,
+          {
+            value: t,
+            onChange: (d) => i(d),
+            availableProperties: n,
+            onFetchDistinctValues: o
+          }
+        ) : /* @__PURE__ */ a(
+          Y,
+          {
+            value: t ?? "#000000",
+            onChange: i,
+            label: e.label
+          }
+        )
+      ] });
+    }
     case "opacity":
-      return /* @__PURE__ */ e(
-        Ce,
+      return /* @__PURE__ */ a(
+        ta,
         {
-          value: i,
-          onChange: t
+          value: t,
+          onChange: i
         }
       );
     case "number":
-      return /* @__PURE__ */ e(
+      return /* @__PURE__ */ a(
         "input",
         {
           type: "number",
-          min: a.min,
-          max: a.max,
-          step: a.step ?? 1,
-          value: i ?? a.min ?? 0,
-          onChange: (u) => t(parseFloat(u.target.value) || 0),
-          className: P
+          min: e.min,
+          max: e.max,
+          step: e.step ?? 1,
+          value: t ?? e.min ?? 0,
+          onChange: (m) => i(parseFloat(m.target.value) || 0),
+          className: z
         }
       );
     case "boolean":
-      return /* @__PURE__ */ e(
+      return /* @__PURE__ */ a(
         "input",
         {
           type: "checkbox",
-          checked: i ?? !1,
-          onChange: (u) => t(u.target.checked),
+          checked: t ?? !1,
+          onChange: (m) => i(m.target.checked),
           className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
         }
       );
     case "enum":
-      return /* @__PURE__ */ e(
+      return /* @__PURE__ */ a(
         "select",
         {
-          value: i ?? ((l = a.options) == null ? void 0 : l[0]) ?? "",
-          onChange: (u) => t(u.target.value),
-          className: P,
-          children: (n = a.options) == null ? void 0 : n.map((u) => /* @__PURE__ */ e("option", { value: u, children: u }, u))
+          value: t ?? ((p = e.options) == null ? void 0 : p[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))
         }
       );
     case "translate":
-      return /* @__PURE__ */ e(
-        ke,
+      return /* @__PURE__ */ a(
+        aa,
         {
-          value: i,
-          onChange: t
+          value: t,
+          onChange: i
         }
       );
     case "dasharray":
     case "stringArray": {
-      const u = i, p = u ? u.join(", ") : "";
-      return /* @__PURE__ */ e(
+      const m = t, w = m ? m.join(", ") : "";
+      return /* @__PURE__ */ a(
         "input",
         {
           type: "text",
-          value: p,
-          onChange: (o) => {
-            const g = o.target.value.trim();
-            if (!g) {
-              t(void 0);
+          value: w,
+          onChange: (d) => {
+            const f = d.target.value.trim();
+            if (!f) {
+              i(void 0);
               return;
             }
-            if (a.widget === "dasharray") {
-              const x = g.split(",").map((d) => parseFloat(d.trim())).filter((d) => !isNaN(d));
-              t(x.length > 0 ? x : void 0);
+            if (e.widget === "dasharray") {
+              const c = f.split(",").map((u) => parseFloat(u.trim())).filter((u) => !isNaN(u));
+              i(c.length > 0 ? c : void 0);
             } else {
-              const x = g.split(",").map((d) => d.trim()).filter(Boolean);
-              t(x.length > 0 ? x : void 0);
+              const c = f.split(",").map((u) => u.trim()).filter(Boolean);
+              i(c.length > 0 ? c : void 0);
             }
           },
-          placeholder: a.widget === "dasharray" ? "e.g. 2, 4" : "comma-separated",
-          className: P
+          placeholder: e.widget === "dasharray" ? "e.g. 2, 4" : "comma-separated",
+          className: z
         }
       );
     }
     case "text":
-      return /* @__PURE__ */ e(
+      return /* @__PURE__ */ a(
         "input",
         {
           type: "text",
-          value: i ?? "",
-          onChange: (u) => t(u.target.value || void 0),
-          className: P
+          value: t ?? "",
+          onChange: (m) => i(m.target.value || void 0),
+          className: z
+        }
+      );
+    case "icon-image":
+      return /* @__PURE__ */ a(
+        Je,
+        {
+          value: t ?? "",
+          onChange: (m) => i(m ?? void 0),
+          availableIcons: r
         }
       );
     default:
       return null;
   }
 }
-function Se({ def: a, value: i, onChange: t }) {
-  const l = a.enableDefault !== void 0, n = i !== void 0;
-  return l ? /* @__PURE__ */ e(N, { label: a.label, children: /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-    /* @__PURE__ */ e(
+function ia({ def: e, value: t, onChange: i, availableIcons: r, availableProperties: n, onFetchDistinctValues: o }) {
+  const p = e.enableDefault !== void 0, b = t !== void 0;
+  if (p && e.widget === "boolean") {
+    const m = !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);
+        },
+        className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
+      }
+    ) });
+  }
+  return p ? /* @__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: n,
-        onChange: (u) => {
-          t(a.key, u.target.checked ? a.enableDefault : void 0);
+        checked: b,
+        onChange: (m) => {
+          i(e.key, m.target.checked ? e.enableDefault : void 0);
         },
         className: "mapui:h-4 mapui:w-4 mapui:shrink-0 mapui:accent-blue-600"
       }
     ),
-    n && /* @__PURE__ */ e(
-      ae,
+    b && /* @__PURE__ */ a(
+      fe,
       {
-        def: a,
-        value: i,
-        onChange: (u) => t(a.key, u)
+        def: e,
+        value: t,
+        onChange: (m) => i(e.key, m),
+        availableIcons: r,
+        availableProperties: n,
+        onFetchDistinctValues: o
       }
     )
-  ] }) }) : /* @__PURE__ */ e(N, { label: a.label, children: /* @__PURE__ */ e(ae, { def: a, value: i, onChange: (u) => t(a.key, u) }) });
+  ] }) }) : /* @__PURE__ */ a(S, { label: e.label, description: e.description, children: /* @__PURE__ */ a(
+    fe,
+    {
+      def: e,
+      value: t,
+      onChange: (m) => i(e.key, m),
+      availableIcons: r,
+      availableProperties: n,
+      onFetchDistinctValues: o
+    }
+  ) });
 }
-function ie({
-  title: a,
-  properties: i,
-  values: t,
-  onChange: l,
-  defaultOpen: n = !1
+function xe({
+  title: e,
+  properties: t,
+  values: i,
+  onChange: r,
+  defaultOpen: n = !1,
+  availableIcons: o,
+  availableProperties: p,
+  onFetchDistinctValues: b
 }) {
-  const u = i.filter(
-    (p) => p.enableDefault !== void 0 && t[p.key] !== void 0
+  const m = t.filter(
+    (w) => w.enableDefault !== void 0 && i[w.key] !== void 0
   ).length;
-  return /* @__PURE__ */ e(q, { title: a, defaultOpen: n, badge: u || void 0, children: /* @__PURE__ */ e("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: i.map((p) => /* @__PURE__ */ e(Se, { def: p, value: t[p.key], onChange: l }, p.key)) }) });
+  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(
+    ia,
+    {
+      def: w,
+      value: i[w.key],
+      onChange: r,
+      availableIcons: o,
+      availableProperties: p,
+      onFetchDistinctValues: b
+    },
+    w.key
+  )) }) });
+}
+function G(e) {
+  return Array.isArray(e);
 }
-function De({ style: a }) {
-  return a.type === "fill" ? /* @__PURE__ */ e(
+function ra(e) {
+  return e[0] === "match" ? "match" : e[0] === "interpolate" ? "interpolate" : null;
+}
+function Oe(e) {
+  if (e[0] === "match") {
+    const t = [];
+    for (let r = 3; r < e.length; r += 2)
+      typeof e[r] == "string" && t.push(e[r]);
+    const i = e[e.length - 1];
+    return typeof i == "string" && t.push(i), t;
+  }
+  if (e[0] === "interpolate") {
+    const t = [];
+    for (let i = 4; i < e.length; i += 2)
+      typeof e[i] == "string" && t.push(e[i]);
+    return t;
+  }
+  return [];
+}
+function la(e) {
+  if (e[0] === "match") {
+    const t = [];
+    for (let r = 2; r < e.length - 1; r += 2) {
+      const n = String(e[r]), o = e[r + 1];
+      typeof o == "string" && t.push({ label: n, color: o });
+    }
+    const i = e[e.length - 1];
+    return typeof i == "string" && t.push({ label: "Other", color: i }), t;
+  }
+  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 });
+    }
+    return t;
+  }
+  return [];
+}
+function na(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;
+}
+function pa(e) {
+  switch (e.type) {
+    case "fill":
+      return e.paint["fill-color"] ?? "#000000";
+    case "line":
+      return e.paint["line-color"] ?? "#000000";
+    case "circle":
+      return e.paint["circle-color"] ?? "#000000";
+    case "symbol":
+      return e.paint["text-color"] ?? e.paint["icon-color"] ?? "#000000";
+  }
+}
+function oa(e) {
+  switch (e.type) {
+    case "fill":
+      return "square";
+    case "line":
+      return "line";
+    case "circle":
+    case "symbol":
+      return "circle";
+  }
+}
+function ie({ expr: e, height: t }) {
+  const i = Oe(e);
+  if (i.length === 0)
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        style: { width: "100%", height: t ?? 32, background: "#e5e7eb", borderRadius: 4 },
+        title: "Expression (no preview)"
+      }
+    );
+  const r = e[0] === "interpolate", n = r ? `linear-gradient(to right, ${i.join(", ")})` : i.map((o, p) => `${o} ${p / i.length * 100}% ${(p + 1) / i.length * 100}%`).join(", ");
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: "mapui:h-8 mapui:w-full mapui:rounded mapui:border mapui:border-gray-200",
       style: {
-        backgroundColor: a.paint["fill-color"],
-        opacity: a.paint["fill-opacity"],
-        outline: a.paint["fill-outline-color"] ? `2px solid ${a.paint["fill-outline-color"]}` : void 0
+        width: "100%",
+        height: t ?? 32,
+        background: r ? n : `linear-gradient(to right, ${n})`,
+        borderRadius: 4
       },
-      "aria-label": "Style preview"
+      title: "Data-driven color expression"
     }
-  ) : a.type === "line" ? /* @__PURE__ */ e(
-    "div",
-    {
-      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: /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            width: "100%",
-            height: a.paint["line-width"],
-            backgroundColor: a.paint["line-color"],
-            opacity: a.paint["line-opacity"]
+  );
+}
+function we(e, t) {
+  return typeof e == "string" ? e : G(e) ? Oe(e)[0] ?? t : t;
+}
+function ua({ style: e }) {
+  if (e.type === "fill") {
+    const r = e.paint["fill-color"];
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: "mapui:h-8 mapui:w-full mapui:rounded mapui:border mapui:border-gray-200 mapui:overflow-hidden",
+        "aria-label": "Style preview",
+        children: G(r) ? /* @__PURE__ */ a(ie, { expr: r, height: 32 }) : /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "100%",
+              backgroundColor: r,
+              opacity: e.paint["fill-opacity"],
+              outline: e.paint["fill-outline-color"] && !G(e.paint["fill-outline-color"]) ? `2px solid ${e.paint["fill-outline-color"]}` : void 0
+            }
           }
-        }
-      )
-    }
-  ) : a.type === "circle" ? /* @__PURE__ */ e(
-    "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: /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            width: a.paint["circle-radius"] * 2,
-            height: a.paint["circle-radius"] * 2,
-            backgroundColor: a.paint["circle-color"],
-            opacity: a.paint["circle-opacity"],
-            borderRadius: "50%",
-            border: a.paint["circle-stroke-color"] ? `${a.paint["circle-stroke-width"] ?? 1}px solid ${a.paint["circle-stroke-color"]}` : void 0
+        )
+      }
+    );
+  }
+  if (e.type === "line") {
+    const r = e.paint["line-color"];
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        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: G(r) ? /* @__PURE__ */ a(ie, { expr: r, height: e.paint["line-width"] }) : /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: e.paint["line-width"],
+              backgroundColor: r,
+              opacity: e.paint["line-opacity"]
+            }
           }
-        }
-      )
-    }
-  ) : /* @__PURE__ */ e(
+        )
+      }
+    );
+  }
+  if (e.type === "circle") {
+    const r = e.paint["circle-color"], n = 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: G(r) ? /* @__PURE__ */ a("div", { style: { width: n, height: n, borderRadius: "50%", overflow: "hidden" }, children: /* @__PURE__ */ a(ie, { expr: r, height: n }) }) : /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              width: n,
+              height: n,
+              backgroundColor: r,
+              opacity: e.paint["circle-opacity"],
+              borderRadius: "50%",
+              border: e.paint["circle-stroke-color"] && !G(e.paint["circle-stroke-color"]) ? `${e.paint["circle-stroke-width"] ?? 1}px solid ${e.paint["circle-stroke-color"]}` : void 0
+            }
+          }
+        )
+      }
+    );
+  }
+  const t = we(e.paint["text-color"], "#333333"), i = we(e.paint["icon-color"], "#333333");
+  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: /* @__PURE__ */ e(
+      children: /* @__PURE__ */ a(
         "span",
         {
           style: {
-            color: a.paint["text-color"] ?? a.paint["icon-color"] ?? "#333333",
+            color: t ?? i ?? "#333333",
             fontSize: "1.1rem",
             fontWeight: 600
           },
@@ -656,40 +1167,40 @@ function De({ style: a }) {
     }
   );
 }
-const Te = [
+const ma = [
   // 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" },
   { key: "fill-outline-color", label: "Outline Color", widget: "color", group: "Appearance", category: "paint", enableDefault: "#000000" },
-  { key: "fill-antialias", label: "Antialias", widget: "boolean", group: "Appearance", category: "paint", enableDefault: !0 },
-  { key: "fill-pattern", label: "Pattern", widget: "text", group: "Appearance", category: "paint", enableDefault: "" },
+  { key: "fill-antialias", label: "Antialias", widget: "boolean", group: "Appearance", category: "paint", description: "Smooths polygon edges using anti-aliasing. Disable for crisp pixel-aligned fills or when stacking transparent layers." },
+  { key: "fill-pattern", label: "Pattern", widget: "icon-image", group: "Appearance", category: "paint", enableDefault: "", description: "Name of an image in the style sprite to use as a repeating fill pattern." },
   // Transform (paint)
-  { key: "fill-translate", label: "Translate (X, Y)", widget: "translate", group: "Transform", category: "paint", enableDefault: [0, 0] },
-  { key: "fill-translate-anchor", label: "Translate Anchor", widget: "enum", group: "Transform", category: "paint", options: ["map", "viewport"], enableDefault: "map" },
+  { key: "fill-translate", label: "Translate (X, Y)", widget: "translate", group: "Transform", category: "paint", enableDefault: [0, 0], description: "Offset the fill in pixels along X (right) and Y (down) axes." },
+  { 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 }
-], Le = [
+  { 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." }
+], sa = [
   // 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 },
   { key: "line-opacity", label: "Line Opacity", widget: "opacity", group: "Appearance", category: "paint" },
   { key: "line-blur", label: "Blur", widget: "number", group: "Appearance", category: "paint", min: 0, step: 0.5, enableDefault: 0 },
-  { key: "line-dasharray", label: "Dash Array", widget: "dasharray", group: "Appearance", category: "paint", enableDefault: [2, 4] },
-  { key: "line-pattern", label: "Pattern", widget: "text", group: "Appearance", category: "paint", enableDefault: "" },
+  { key: "line-dasharray", label: "Dash Array", widget: "dasharray", group: "Appearance", category: "paint", enableDefault: [2, 4], description: 'Lengths of alternating dashes and gaps in pixels (e.g. "2, 4" gives 2px dash, 4px gap).' },
+  { key: "line-pattern", label: "Pattern", widget: "icon-image", group: "Appearance", category: "paint", enableDefault: "", description: "Name of an image in the style sprite to use as a repeating line pattern." },
   // Stroke (paint)
-  { key: "line-gap-width", label: "Gap Width", widget: "number", group: "Stroke", category: "paint", min: 0, step: 0.5, enableDefault: 0 },
-  { key: "line-offset", label: "Offset", widget: "number", group: "Stroke", category: "paint", step: 0.5, enableDefault: 0 },
+  { key: "line-gap-width", label: "Gap Width", widget: "number", group: "Stroke", category: "paint", min: 0, step: 0.5, enableDefault: 0, description: "Renders two parallel lines with a gap between them. Set to the desired inner gap width; the outer stroke uses line-width." },
+  { key: "line-offset", label: "Offset", widget: "number", group: "Stroke", category: "paint", step: 0.5, enableDefault: 0, description: "Offset the line from its original position in pixels. Positive values shift left (relative to direction of travel), negative shift right." },
   // Transform (paint)
-  { key: "line-translate", label: "Translate (X, Y)", widget: "translate", group: "Transform", category: "paint", enableDefault: [0, 0] },
-  { key: "line-translate-anchor", label: "Translate Anchor", widget: "enum", group: "Transform", category: "paint", options: ["map", "viewport"], enableDefault: "map" },
+  { key: "line-translate", label: "Translate (X, Y)", widget: "translate", group: "Transform", category: "paint", enableDefault: [0, 0], description: "Offset the line in pixels along X (right) and Y (down) axes." },
+  { key: "line-translate-anchor", label: "Translate Anchor", widget: "enum", group: "Transform", category: "paint", options: ["map", "viewport"], enableDefault: "map", description: '"map" moves the line with the map when panning; "viewport" keeps the offset fixed on screen.' },
   // Cap & Join (layout)
   { key: "line-cap", label: "Line Cap", widget: "enum", group: "Cap & Join", category: "layout", options: ["butt", "round", "square"], enableDefault: "butt" },
   { key: "line-join", label: "Line Join", widget: "enum", group: "Cap & Join", category: "layout", options: ["bevel", "round", "miter"], enableDefault: "miter" },
-  { key: "line-miter-limit", label: "Miter Limit", widget: "number", group: "Cap & Join", category: "layout", step: 0.5, enableDefault: 2 },
-  { key: "line-round-limit", label: "Round Limit", widget: "number", group: "Cap & Join", category: "layout", step: 0.1, enableDefault: 1.05 },
+  { key: "line-miter-limit", label: "Miter Limit", widget: "number", group: "Cap & Join", category: "layout", step: 0.5, enableDefault: 2, description: 'When line-join is "miter", sharp corners are clipped to a bevel once the miter length exceeds this multiple of line-width.' },
+  { 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 }
-], Ie = [
+  { 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." }
+], ca = [
   // 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 },
@@ -700,14 +1211,14 @@ const Te = [
   { key: "circle-stroke-width", label: "Stroke Width", widget: "number", group: "Stroke", category: "paint", min: 0, step: 1, enableDefault: 1 },
   { key: "circle-stroke-opacity", label: "Stroke Opacity", widget: "opacity", group: "Stroke", category: "paint", enableDefault: 1 },
   // Transform (paint)
-  { key: "circle-translate", label: "Translate (X, Y)", widget: "translate", group: "Transform", category: "paint", enableDefault: [0, 0] },
-  { key: "circle-translate-anchor", label: "Translate Anchor", widget: "enum", group: "Transform", category: "paint", options: ["map", "viewport"], enableDefault: "map" },
+  { key: "circle-translate", label: "Translate (X, Y)", widget: "translate", group: "Transform", category: "paint", enableDefault: [0, 0], description: "Offset the circle in pixels along X (right) and Y (down) axes." },
+  { key: "circle-translate-anchor", label: "Translate Anchor", widget: "enum", group: "Transform", category: "paint", options: ["map", "viewport"], enableDefault: "map", description: '"map" moves the circle with the map when panning; "viewport" keeps the offset fixed on screen.' },
   // Alignment (paint)
-  { key: "circle-pitch-scale", label: "Pitch Scale", widget: "enum", group: "Alignment", category: "paint", options: ["map", "viewport"], enableDefault: "map" },
-  { key: "circle-pitch-alignment", label: "Pitch Alignment", widget: "enum", group: "Alignment", category: "paint", options: ["map", "viewport"], enableDefault: "viewport" },
+  { key: "circle-pitch-scale", label: "Pitch Scale", widget: "enum", group: "Alignment", category: "paint", options: ["map", "viewport"], enableDefault: "map", description: '"map" scales circles with map perspective (smaller when far away); "viewport" keeps circles the same size regardless of pitch.' },
+  { 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 }
-], Ae = [
+  { 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." }
+], da = [
   // 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 },
@@ -718,7 +1229,7 @@ const Te = [
   { key: "icon-translate", label: "Icon Translate (X, Y)", widget: "translate", group: "Icon Transform", category: "paint", enableDefault: [0, 0] },
   { key: "icon-translate-anchor", label: "Icon Translate Anchor", widget: "enum", group: "Icon Transform", category: "paint", options: ["map", "viewport"], enableDefault: "map" },
   // Text Appearance (paint)
-  { key: "text-color", label: "Text Color", widget: "color", group: "Text Appearance", category: "paint", enableDefault: "#000000" },
+  { key: "text-color", label: "Text Color", widget: "color", group: "Text Appearance", category: "paint", enableDefault: "#333333" },
   { key: "text-opacity", label: "Text Opacity", widget: "opacity", group: "Text Appearance", category: "paint", enableDefault: 1 },
   { key: "text-halo-color", label: "Text Halo Color", widget: "color", group: "Text Appearance", category: "paint", enableDefault: "transparent" },
   { key: "text-halo-width", label: "Text Halo Width", widget: "number", group: "Text Appearance", category: "paint", min: 0, step: 0.5, enableDefault: 0 },
@@ -727,730 +1238,912 @@ const Te = [
   { key: "text-translate", label: "Text Translate (X, Y)", widget: "translate", group: "Text Transform", category: "paint", enableDefault: [0, 0] },
   { key: "text-translate-anchor", label: "Text Translate Anchor", widget: "enum", group: "Text Transform", category: "paint", options: ["map", "viewport"], enableDefault: "map" },
   // Icon Layout (layout)
-  { key: "icon-image", label: "Icon Image", widget: "text", group: "Icon Layout", category: "layout", enableDefault: "" },
+  { key: "icon-image", label: "Icon Image", widget: "icon-image", group: "Icon Layout", category: "layout", enableDefault: "", description: 'Name of an image in the style sprite to use as an icon. Use {property} tokens to reference feature data (e.g. "{icon}").' },
   { key: "icon-size", label: "Icon Size", widget: "number", group: "Icon Layout", category: "layout", min: 0, step: 0.1, enableDefault: 1 },
   { key: "icon-rotate", label: "Icon Rotate", widget: "number", group: "Icon Layout", category: "layout", step: 1, enableDefault: 0 },
   { key: "icon-padding", label: "Icon Padding", widget: "number", group: "Icon Layout", category: "layout", min: 0, step: 1, enableDefault: 2 },
-  { key: "icon-anchor", label: "Icon Anchor", widget: "enum", group: "Icon Layout", category: "layout", options: ["center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"], enableDefault: "center" },
-  { key: "icon-allow-overlap", label: "Icon Allow Overlap", widget: "boolean", group: "Icon Layout", category: "layout", enableDefault: !1 },
-  { key: "icon-optional", label: "Icon Optional", widget: "boolean", group: "Icon Layout", category: "layout", enableDefault: !1 },
-  { key: "icon-rotation-alignment", label: "Icon Rotation Alignment", widget: "enum", group: "Icon Layout", category: "layout", options: ["map", "viewport", "auto"], enableDefault: "auto" },
-  { key: "icon-text-fit", label: "Icon Text Fit", widget: "enum", group: "Icon Layout", category: "layout", options: ["none", "width", "height", "both"], enableDefault: "none" },
-  { key: "icon-offset", label: "Icon Offset (X, Y)", widget: "translate", group: "Icon Layout", category: "layout", enableDefault: [0, 0] },
+  { key: "icon-anchor", label: "Icon Anchor", widget: "enum", group: "Icon Layout", category: "layout", options: ["center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"], enableDefault: "center", description: 'The part of the icon that is placed at the feature geometry. E.g. "bottom" is used for map pins so the point touches the location.' },
+  { key: "icon-allow-overlap", label: "Icon Allow Overlap", widget: "boolean", group: "Icon Layout", category: "layout", enableDefault: !1, description: "When enabled, the icon is visible even if it overlaps other symbols. Useful for always-visible markers." },
+  { key: "icon-optional", label: "Icon Optional", widget: "boolean", group: "Icon Layout", category: "layout", enableDefault: !1, description: "When enabled, the icon is hidden (but text still shows) if the icon would cause a collision." },
+  { key: "icon-rotation-alignment", label: "Icon Rotation Alignment", widget: "enum", group: "Icon Layout", category: "layout", options: ["map", "viewport", "auto"], enableDefault: "auto", description: '"map" rotates with the map bearing; "viewport" stays upright on screen; "auto" follows symbol-placement.' },
+  { key: "icon-text-fit", label: "Icon Text Fit", widget: "enum", group: "Icon Layout", category: "layout", options: ["none", "width", "height", "both"], enableDefault: "none", description: "Scales the icon to fit the text bounding box. Useful for background label boxes." },
+  { key: "icon-offset", label: "Icon Offset (X, Y)", widget: "translate", group: "Icon Layout", category: "layout", enableDefault: [0, 0], description: "Offset the icon from the symbol anchor in pixels." },
   // Text Layout (layout)
-  { key: "text-field", label: "Text Field", widget: "text", group: "Text Layout", category: "layout", enableDefault: "{name}" },
+  { key: "text-field", label: "Text Field", widget: "text", group: "Text Layout", category: "layout", enableDefault: "{name}", description: 'The text to display. Use {property} tokens to reference feature properties (e.g. "{name}" shows the name attribute).' },
   { key: "text-size", label: "Text Size", widget: "number", group: "Text Layout", category: "layout", min: 0, step: 1, enableDefault: 16 },
-  { key: "text-font", label: "Text Font (comma-separated)", widget: "stringArray", group: "Text Layout", category: "layout", enableDefault: ["Open Sans Regular"] },
-  { key: "text-max-width", label: "Text Max Width", widget: "number", group: "Text Layout", category: "layout", min: 0, step: 1, enableDefault: 10 },
-  { key: "text-letter-spacing", label: "Letter Spacing", widget: "number", group: "Text Layout", category: "layout", step: 0.05, enableDefault: 0 },
+  { key: "text-font", label: "Text Font (comma-separated)", widget: "stringArray", group: "Text Layout", category: "layout", enableDefault: ["Open Sans Regular"], description: "Ordered list of font stack names. The first font found in the style glyphs is used." },
+  { key: "text-max-width", label: "Text Max Width", widget: "number", group: "Text Layout", category: "layout", min: 0, step: 1, enableDefault: 10, description: "Maximum width of a text label in ems before it wraps to a new line." },
+  { key: "text-letter-spacing", label: "Letter Spacing", widget: "number", group: "Text Layout", category: "layout", step: 0.05, enableDefault: 0, description: "Additional spacing between characters in ems. Positive values spread text out; negative values tighten it." },
   { key: "text-justify", label: "Text Justify", widget: "enum", group: "Text Layout", category: "layout", options: ["auto", "left", "center", "right"], enableDefault: "center" },
-  { key: "text-anchor", label: "Text Anchor", widget: "enum", group: "Text Layout", category: "layout", options: ["center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"], enableDefault: "center" },
+  { key: "text-anchor", label: "Text Anchor", widget: "enum", group: "Text Layout", category: "layout", options: ["center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"], enableDefault: "center", description: "The part of the text bounding box that is placed at the symbol anchor point." },
   { key: "text-transform", label: "Text Transform", widget: "enum", group: "Text Layout", category: "layout", options: ["none", "uppercase", "lowercase"], enableDefault: "none" },
-  { key: "text-offset", label: "Text Offset (X, Y)", widget: "translate", group: "Text Layout", category: "layout", enableDefault: [0, 0] },
-  { key: "text-allow-overlap", label: "Text Allow Overlap", widget: "boolean", group: "Text Layout", category: "layout", enableDefault: !1 },
-  { key: "text-optional", label: "Text Optional", widget: "boolean", group: "Text Layout", category: "layout", enableDefault: !1 },
-  { key: "text-rotation-alignment", label: "Text Rotation Alignment", widget: "enum", group: "Text Layout", category: "layout", options: ["map", "viewport", "viewport-glyph", "auto"], enableDefault: "auto" },
+  { key: "text-offset", label: "Text Offset (X, Y)", widget: "translate", group: "Text Layout", category: "layout", enableDefault: [0, 0], description: "Offset the text from the symbol anchor in ems." },
+  { key: "text-allow-overlap", label: "Text Allow Overlap", widget: "boolean", group: "Text Layout", category: "layout", enableDefault: !1, description: "When enabled, text is visible even if it overlaps other symbols." },
+  { key: "text-optional", label: "Text Optional", widget: "boolean", group: "Text Layout", category: "layout", enableDefault: !1, description: "When enabled, text is hidden (but icon still shows) if the text would cause a collision." },
+  { key: "text-rotation-alignment", label: "Text Rotation Alignment", widget: "enum", group: "Text Layout", category: "layout", options: ["map", "viewport", "viewport-glyph", "auto"], enableDefault: "auto", description: '"map" rotates text with the map; "viewport" keeps text upright; "viewport-glyph" keeps each glyph upright individually.' },
   // Placement (layout)
-  { key: "symbol-placement", label: "Symbol Placement", widget: "enum", group: "Placement", category: "layout", options: ["point", "line", "line-center"], enableDefault: "point" },
-  { key: "symbol-spacing", label: "Symbol Spacing", widget: "number", group: "Placement", category: "layout", min: 1, step: 1, enableDefault: 250 },
-  { key: "symbol-avoid-edges", label: "Avoid Edges", widget: "boolean", group: "Placement", category: "layout", enableDefault: !1 },
-  { key: "symbol-sort-key", label: "Sort Key", widget: "number", group: "Placement", category: "layout", step: 1, enableDefault: 0 },
-  { key: "symbol-z-order", label: "Z-Order", widget: "enum", group: "Placement", category: "layout", options: ["auto", "viewport-y", "source"], enableDefault: "auto" }
-], Ee = {
-  fill: Te,
-  line: Le,
-  circle: Ie,
-  symbol: Ae
+  { key: "symbol-placement", label: "Symbol Placement", widget: "enum", group: "Placement", category: "layout", options: ["point", "line", "line-center"], enableDefault: "point", description: '"point" places one symbol per feature; "line" places symbols along the full line; "line-center" places one at the midpoint.' },
+  { key: "symbol-spacing", label: "Symbol Spacing", widget: "number", group: "Placement", category: "layout", min: 1, step: 1, enableDefault: 250, description: 'Minimum distance in pixels between symbols along a line (used when symbol-placement is "line").' },
+  { 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.' }
+], ha = {
+  fill: ma,
+  line: sa,
+  circle: ca,
+  symbol: da
 };
-function Fe(a) {
-  return Ee[a] ?? [];
+function ga(e) {
+  return ha[e] ?? [];
 }
-function te(a) {
-  const i = {};
-  for (const t of a)
-    i[t.group] || (i[t.group] = []), i[t.group].push(t);
-  return i;
+function ve(e) {
+  const t = {};
+  for (const i of e)
+    t[i.group] || (t[i.group] = []), t[i.group].push(i);
+  return t;
 }
-const _ = {
+const me = {
   type: "fill",
-  paint: { "fill-color": "#4a90d9", "fill-opacity": 0.6, "fill-outline-color": "transparent" }
-}, de = {
+  paint: { "fill-color": "#4a90d9", "fill-opacity": 0.6, "fill-outline-color": "transparent", "fill-antialias": !0 }
+}, je = {
   type: "line",
   paint: { "line-color": "#2980b9", "line-width": 2, "line-opacity": 1 }
-}, ge = {
+}, $e = {
   type: "circle",
   paint: { "circle-color": "#e74c3c", "circle-radius": 5, "circle-opacity": 0.9 }
-}, be = {
+}, Re = {
   type: "symbol",
   paint: { "text-color": "#333333" },
   layout: { "text-field": "{name}", "text-size": 14 }
-}, Pe = "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", le = {
+}, ba = {
+  layout: { "icon-image": "" }
+};
+function Ne(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 ya = "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 = {
   fill: "Fill",
   line: "Line",
   circle: "Circle",
   symbol: "Symbol"
-};
-function Oe({ value: a, onChange: i, suggestedType: t }) {
-  const l = (m) => {
-    i(m === "fill" ? _ : m === "line" ? de : m === "circle" ? ge : be);
-  }, n = (m, C) => {
-    i({ ...a, paint: { ...a.paint, [m]: C } });
-  }, u = (m, C) => {
-    const S = { ...a.layout ?? {}, [m]: C };
-    for (const A of Object.keys(S))
-      S[A] === void 0 && delete S[A];
-    i({
-      ...a,
-      layout: Object.keys(S).length > 0 ? S : void 0
+}, fa = ["text", "icon", "both"];
+function xa({ value: e, onChange: t, suggestedType: i, suggestedTypes: r, availableIcons: n, availableProperties: o, onFetchDistinctValues: p }) {
+  const b = r ?? (i ? [i] : []), [m, w] = L(() => Ne(e));
+  X(() => {
+    w(Ne(e));
+  }, [e.type]);
+  const d = (y) => {
+    t(y === "fill" ? me : y === "line" ? je : y === "circle" ? $e : Re);
+  }, f = (y) => {
+    if (y === m) return;
+    const F = e.paint ?? {}, M = e.layout ?? {};
+    let g = { ...F }, N = { ...M };
+    y === "icon" ? (g = Object.fromEntries(Object.entries(g).filter(([O]) => !O.startsWith("text-"))), N = Object.fromEntries(Object.entries(N).filter(([O]) => !O.startsWith("text-"))), "icon-image" in N || (N["icon-image"] = ba.layout["icon-image"])) : y === "text" && (g = Object.fromEntries(Object.entries(g).filter(([O]) => !O.startsWith("icon-"))), N = Object.fromEntries(Object.entries(N).filter(([O]) => !O.startsWith("icon-"))), "text-field" in N || (N["text-field"] = "{name}"), "text-size" in N || (N["text-size"] = 14), "text-color" in g || (g["text-color"] = "#333333")), w(y), t({
+      ...e,
+      paint: g,
+      layout: Object.keys(N).length > 0 ? N : void 0
+    });
+  }, c = (y, F) => {
+    const M = { ...e.paint, [y]: F };
+    for (const g of Object.keys(M))
+      M[g] === void 0 && delete M[g];
+    t({ ...e, paint: M });
+  }, u = (y, F) => {
+    const g = { ...e.layout ?? {}, [y]: F };
+    for (const N of Object.keys(g))
+      g[N] === void 0 && delete g[N];
+    t({
+      ...e,
+      layout: Object.keys(g).length > 0 ? g : void 0
     });
-  }, p = Fe(a.type), o = p.filter((m) => m.category === "paint"), g = p.filter((m) => m.category === "layout"), x = te(o), d = te(g), y = a.paint, k = a.layout ?? {}, c = Object.keys(x), b = Object.keys(d);
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    t && t !== a.type && /* @__PURE__ */ r("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__ */ r("span", { children: [
-        "Detected geometry suggests ",
-        /* @__PURE__ */ e("strong", { children: t }),
-        " style."
+  };
+  let s = ga(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"), k = s.filter((y) => y.category === "layout"), D = ve(v), x = ve(k), $ = e.paint, C = e.layout ?? {}, P = Object.keys(D), E = Object.keys(x);
+  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: [
+      /* @__PURE__ */ l("span", { children: [
+        "Detected geometry is suitable for",
+        " ",
+        b.map((y, F) => /* @__PURE__ */ l("span", { children: [
+          F > 0 && (F === b.length - 1 ? " or " : ", "),
+          /* @__PURE__ */ a("strong", { children: K[y] })
+        ] }, y)),
+        " ",
+        "style."
       ] }),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ a("div", { className: "mapui:flex mapui:gap-1", children: b.map((y) => /* @__PURE__ */ a(
         "button",
         {
           type: "button",
-          onClick: () => l(t),
+          onClick: () => d(y),
           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: "Apply"
-        }
-      )
+          children: K[y]
+        },
+        y
+      )) })
     ] }),
-    /* @__PURE__ */ e(N, { label: "Style Type", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ a(S, { label: "Style Type", children: /* @__PURE__ */ a(
       "select",
       {
-        value: a.type,
-        onChange: (m) => l(m.target.value),
-        className: Pe,
-        children: Object.keys(le).map((m) => /* @__PURE__ */ e("option", { value: m, children: le[m] }, m))
+        value: e.type,
+        onChange: (y) => d(y.target.value),
+        className: ya,
+        children: Object.keys(K).map((y) => /* @__PURE__ */ a("option", { value: y, children: K[y] }, y))
       }
     ) }),
-    /* @__PURE__ */ r("div", { className: "mapui:rounded mapui:border mapui:border-gray-100 mapui:p-2", children: [
-      /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:mb-1 mapui:text-xs mapui:text-gray-500", children: "Preview" }),
-      /* @__PURE__ */ e(De, { style: 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: fa.map((y) => /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        onClick: () => f(y),
+        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"
+        ].join(" "),
+        children: y === "both" ? "Both" : y.charAt(0).toUpperCase() + y.slice(1)
+      },
+      y
+    )) }) }),
+    /* @__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(ua, { style: e })
     ] }),
-    c.length > 0 && /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-      /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-xs mapui:font-medium mapui:uppercase mapui:tracking-wide mapui:text-gray-500", children: "Paint" }),
-      c.map((m, C) => /* @__PURE__ */ e(
-        ie,
+    E.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, F) => /* @__PURE__ */ a(
+        xe,
         {
-          title: m,
-          properties: x[m],
-          values: y,
-          onChange: n,
-          defaultOpen: C === 0
+          title: y,
+          properties: x[y],
+          values: C,
+          onChange: u,
+          defaultOpen: F === 0,
+          availableIcons: n,
+          availableProperties: o,
+          onFetchDistinctValues: p
         },
-        m
+        y
       ))
     ] }),
-    b.length > 0 && /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-      /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-xs mapui:font-medium mapui:uppercase mapui:tracking-wide mapui:text-gray-500", children: "Layout" }),
-      b.map((m) => /* @__PURE__ */ e(
-        ie,
+    P.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" }),
+      P.map((y) => /* @__PURE__ */ a(
+        xe,
         {
-          title: m,
-          properties: d[m],
-          values: k,
-          onChange: u,
-          defaultOpen: !1
+          title: y,
+          properties: D[y],
+          values: $,
+          onChange: c,
+          defaultOpen: !1,
+          availableIcons: n,
+          availableProperties: o,
+          onFetchDistinctValues: p
         },
-        m
+        y
       ))
     ] })
   ] });
 }
-const re = "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 Me({ value: a, onChange: i }) {
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-    /* @__PURE__ */ e(N, { label: "Label", children: /* @__PURE__ */ e(
+const ke = "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 wa({ value: e, onChange: t }) {
+  return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
+    /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: a.label,
-        onChange: (t) => i({ ...a, label: t.target.value }),
+        value: e.label,
+        onChange: (i) => t({ ...e, label: i.target.value }),
         placeholder: "Legend entry label",
-        className: re
+        className: ke
       }
     ) }),
-    /* @__PURE__ */ e(N, { label: "Color", children: /* @__PURE__ */ e(
-      se,
+    /* @__PURE__ */ a(S, { label: "Color", children: /* @__PURE__ */ a(
+      Y,
       {
-        value: a.color,
-        onChange: (t) => i({ ...a, color: t }),
+        value: e.color,
+        onChange: (i) => t({ ...e, color: i }),
         label: "Entry color"
       }
     ) }),
-    /* @__PURE__ */ e(N, { label: "Shape", children: /* @__PURE__ */ r(
+    /* @__PURE__ */ a(S, { label: "Shape", children: /* @__PURE__ */ l(
       "select",
       {
-        value: a.shape ?? "square",
-        onChange: (t) => i({ ...a, shape: t.target.value }),
-        className: re,
+        value: e.shape ?? "square",
+        onChange: (i) => t({ ...e, shape: i.target.value }),
+        className: ke,
         children: [
-          /* @__PURE__ */ e("option", { value: "square", children: "Square" }),
-          /* @__PURE__ */ e("option", { value: "circle", children: "Circle" }),
-          /* @__PURE__ */ e("option", { value: "line", children: "Line" })
+          /* @__PURE__ */ a("option", { value: "square", children: "Square" }),
+          /* @__PURE__ */ a("option", { value: "circle", children: "Circle" }),
+          /* @__PURE__ */ a("option", { value: "line", children: "Line" })
         ]
       }
     ) })
   ] });
 }
-const pe = () => ({ label: "", color: "#4a90d9", shape: "square" });
-function je({ value: a, onChange: i }) {
-  const t = (a == null ? void 0 : a.entries) ?? [], l = () => {
-    i({ entries: [...t, pe()] });
-  }, n = (o, g) => {
-    const x = t.map((d, y) => y === o ? g : d);
-    i({ entries: x });
-  }, u = (o) => {
-    const g = t.filter((x, d) => d !== o);
-    i(g.length > 0 ? { entries: g } : void 0);
-  }, p = (o) => {
-    i(o ? { entries: [pe()] } : void 0);
+const Ce = () => ({ label: "", color: "#4a90d9", shape: "square" }), re = 8, 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 va({ value: e, onChange: t, style: i }) {
+  const r = (e == null ? void 0 : e.entries) ?? [], n = (e == null ? void 0 : e.displayMode) ?? "simple", o = Pe(() => {
+    if (!i) return null;
+    const c = pa(i);
+    if (!G(c)) return null;
+    const u = ra(c);
+    if (!u) return null;
+    const s = oa(i);
+    return {
+      entries: la(c).map((k) => ({
+        label: k.label,
+        color: k.color,
+        shape: s
+      })),
+      mode: u === "interpolate" ? "gradient" : "categorical",
+      property: na(c)
+    };
+  }, [i]), p = () => {
+    t({ ...e, entries: [...r, Ce()] });
+  }, b = (c, u) => {
+    const s = r.map((v, k) => k === 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: [Ce()] } : void 0);
+  }, d = () => {
+    o && t({
+      entries: o.entries,
+      displayMode: o.mode,
+      ...o.mode === "gradient" && o.property ? { gradientProperty: o.property } : {},
+      ...o.mode === "categorical" ? { showLabelsCollapsed: !1 } : {}
+    });
+  }, f = (c) => {
+    if (!e) return;
+    const u = { ...e, displayMode: c };
+    c !== "categorical" && delete u.showLabelsCollapsed, c !== "gradient" && delete u.gradientProperty, t(u);
   };
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-      /* @__PURE__ */ 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(
         "input",
         {
           type: "checkbox",
           id: "legend-enabled",
-          checked: a !== void 0,
-          onChange: (o) => p(o.target.checked),
+          checked: e !== void 0,
+          onChange: (c) => w(c.target.checked),
           className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
         }
       ),
-      /* @__PURE__ */ e("label", { htmlFor: "legend-enabled", className: "mapui:text-sm mapui:font-medium mapui:text-gray-700", children: "Enable Legend" })
+      /* @__PURE__ */ a("label", { htmlFor: "legend-enabled", className: "mapui:text-sm mapui:font-medium mapui:text-gray-700", children: "Enable Legend" })
     ] }),
-    a !== void 0 && /* @__PURE__ */ r(O, { children: [
-      /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: t.map((o, g) => /* @__PURE__ */ r(
+    e === void 0 && o && o.entries.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+      /* @__PURE__ */ l("p", { className: "mapui:m-0 mapui:text-sm mapui:text-blue-800", children: [
+        "This layer uses data-driven colors (",
+        o.entries.length,
+        " ",
+        o.entries.length === 1 ? "category" : "categories",
+        ")"
+      ] }),
+      /* @__PURE__ */ l("div", { className: "mapui:mt-2 mapui:flex mapui:flex-wrap mapui:items-center mapui:gap-1.5", children: [
+        o.entries.slice(0, re).map((c, u) => /* @__PURE__ */ l(
+          "div",
+          {
+            className: "mapui:flex mapui:items-center mapui:gap-1",
+            title: c.label,
+            children: [
+              /* @__PURE__ */ a(
+                "span",
+                {
+                  className: "mapui:inline-block mapui:h-3 mapui:w-3 mapui:rounded-sm mapui:shrink-0",
+                  style: { backgroundColor: c.color }
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-blue-700 mapui:truncate mapui:max-w-16", children: c.label })
+            ]
+          },
+          `${c.label}-${u}`
+        )),
+        o.entries.length > re && /* @__PURE__ */ l("span", { className: "mapui:text-xs mapui:text-blue-600", children: [
+          "+",
+          o.entries.length - re,
+          " more"
+        ] })
+      ] }),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: d,
+          className: "mapui:mt-2 mapui:cursor-pointer mapui:rounded mapui:border mapui:border-blue-300 mapui:bg-white mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:text-blue-700 hover:mapui:bg-blue-100",
+          children: "Generate from Style"
+        }
+      )
+    ] }),
+    e !== void 0 && /* @__PURE__ */ l(B, { 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: Se,
+            children: [
+              /* @__PURE__ */ a("option", { value: "simple", children: "Simple" }),
+              /* @__PURE__ */ a("option", { value: "categorical", children: "Categorical" }),
+              /* @__PURE__ */ a("option", { value: "gradient", children: "Gradient" })
+            ]
+          }
+        )
+      ] }),
+      n === "categorical" && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "checkbox",
+            id: "legend-show-labels-collapsed",
+            checked: e.showLabelsCollapsed ?? !1,
+            onChange: (c) => t({ ...e, showLabelsCollapsed: c.target.checked }),
+            className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
+          }
+        ),
+        /* @__PURE__ */ a("label", { htmlFor: "legend-show-labels-collapsed", className: "mapui:text-sm mapui:text-gray-700", children: "Show labels in collapsed view" })
+      ] }),
+      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" }),
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "text",
+            id: "legend-gradient-property",
+            value: e.gradientProperty ?? "",
+            onChange: (c) => t({ ...e, gradientProperty: c.target.value || void 0 }),
+            placeholder: "e.g. POP_EST",
+            className: Se
+          }
+        )
+      ] }),
+      /* @__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(
         "li",
         {
           className: "mapui:rounded mapui:border mapui:border-gray-200 mapui:p-3",
           children: [
-            /* @__PURE__ */ r("div", { className: "mapui:mb-2 mapui:flex mapui:items-center mapui:justify-between", children: [
-              /* @__PURE__ */ r("span", { className: "mapui:text-xs mapui:font-medium mapui:text-gray-600", children: [
+            /* @__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 ",
-                g + 1
+                u + 1
               ] }),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(g),
+                  onClick: () => m(u),
                   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__ */ e(
-              Me,
+            /* @__PURE__ */ a(
+              wa,
               {
-                value: o,
-                onChange: (x) => n(g, x)
+                value: c,
+                onChange: (s) => b(u, s)
               }
             )
           ]
         },
-        g
+        u
       )) }),
-      /* @__PURE__ */ e(
-        "button",
-        {
-          type: "button",
-          onClick: l,
-          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"
-        }
-      )
+      /* @__PURE__ */ l("div", { className: "mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: p,
+            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"
+          }
+        ),
+        o && o.entries.length > 0 && /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: d,
+            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 (",
+              o.entries.length,
+              " entries)"
+            ]
+          }
+        )
+      ] })
     ] })
   ] });
 }
-function ue({
-  options: a,
-  onChange: i,
-  placeholder: t,
-  className: l
+function De({
+  options: e,
+  onChange: t,
+  placeholder: i,
+  className: r
 }) {
-  const [n, u] = w(() => (a == null ? void 0 : a.join(", ")) ?? "");
-  return J(() => {
-    u((a == null ? void 0 : a.join(", ")) ?? "");
-  }, [a == null ? void 0 : a.join(",")]), /* @__PURE__ */ e(
+  const [n, o] = L(() => (e == null ? void 0 : e.join(", ")) ?? "");
+  return X(() => {
+    o((e == null ? void 0 : e.join(", ")) ?? "");
+  }, [e == null ? void 0 : e.join(",")]), /* @__PURE__ */ a(
     "input",
     {
       type: "text",
       value: n,
-      onChange: (o) => u(o.target.value),
+      onChange: (b) => o(b.target.value),
       onBlur: () => {
-        const o = n.trim(), g = o ? o.split(",").map((x) => x.trim()).filter(Boolean) : void 0;
-        i(g), u((g == null ? void 0 : g.join(", ")) ?? "");
+        const b = n.trim(), m = b ? b.split(",").map((w) => w.trim()).filter(Boolean) : void 0;
+        t(m), o((m == null ? void 0 : m.join(", ")) ?? "");
       },
-      placeholder: t,
-      className: l
+      placeholder: i,
+      className: r
     }
   );
 }
-const I = "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", Be = {
+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", Na = {
   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 Re({ value: a, onChange: i, availableProperties: t }) {
-  const l = (p) => {
-    i({ ...Be[p], property: a.property, label: a.label });
-  }, n = (p) => i({ ...a, ...p }), u = t && t.length > 0;
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ e(N, { label: "Field Type", children: /* @__PURE__ */ r(
+function ka({ value: e, onChange: t, availableProperties: i }) {
+  const r = (p) => {
+    t({ ...Na[p], property: e.property, label: e.label });
+  }, n = (p) => t({ ...e, ...p }), o = i && i.length > 0;
+  return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
+    /* @__PURE__ */ a(S, { label: "Field Type", children: /* @__PURE__ */ l(
       "select",
       {
-        value: a.type,
-        onChange: (p) => l(p.target.value),
-        className: I,
+        value: e.type,
+        onChange: (p) => r(p.target.value),
+        className: j,
         children: [
-          /* @__PURE__ */ e("option", { value: "text", children: "Text" }),
-          /* @__PURE__ */ e("option", { value: "number", children: "Number" }),
-          /* @__PURE__ */ e("option", { value: "datetime", children: "Date/Time" }),
-          /* @__PURE__ */ e("option", { value: "select", children: "Select" })
+          /* @__PURE__ */ a("option", { value: "text", children: "Text" }),
+          /* @__PURE__ */ a("option", { value: "number", children: "Number" }),
+          /* @__PURE__ */ a("option", { value: "datetime", children: "Date/Time" }),
+          /* @__PURE__ */ a("option", { value: "select", children: "Select" })
         ]
       }
     ) }),
-    /* @__PURE__ */ e(N, { label: "Property", required: !0, children: u ? /* @__PURE__ */ r(
+    /* @__PURE__ */ a(S, { label: "Property", required: !0, children: o ? /* @__PURE__ */ l(
       "select",
       {
-        value: a.property,
+        value: e.property,
         onChange: (p) => n({ property: p.target.value }),
-        className: I,
+        className: j,
         children: [
-          /* @__PURE__ */ e("option", { value: "", children: "Select a property…" }),
-          t.map((p) => /* @__PURE__ */ e("option", { value: p.name, children: p.title ?? p.name }, p.name))
+          /* @__PURE__ */ a("option", { value: "", children: "Select a property…" }),
+          i.map((p) => /* @__PURE__ */ a("option", { value: p.name, children: p.title ?? p.name }, p.name))
         ]
       }
-    ) : /* @__PURE__ */ e(
+    ) : /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: a.property,
+        value: e.property,
         onChange: (p) => n({ property: p.target.value }),
         placeholder: "e.g. name",
-        className: I
+        className: j
       }
     ) }),
-    /* @__PURE__ */ e(N, { label: "Label", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: a.label,
+        value: e.label,
         onChange: (p) => n({ label: p.target.value }),
         placeholder: "Display label",
-        className: I
+        className: j
       }
     ) }),
-    /* @__PURE__ */ e(N, { label: "Placeholder", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ a(S, { label: "Placeholder", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: a.placeholder ?? "",
+        value: e.placeholder ?? "",
         onChange: (p) => n({ placeholder: p.target.value || void 0 }),
         placeholder: "Input placeholder text",
-        className: I
+        className: j
       }
     ) }),
-    a.type === "text" && /* @__PURE__ */ r(O, { children: [
-      /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ e(
+    e.type === "text" && /* @__PURE__ */ l(B, { children: [
+      /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a(
           "input",
           {
             type: "checkbox",
             id: "text-autocomplete",
-            checked: a.autocomplete ?? !1,
-            onChange: (p) => i({ ...a, autocomplete: p.target.checked }),
+            checked: e.autocomplete ?? !1,
+            onChange: (p) => t({ ...e, autocomplete: p.target.checked }),
             className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
           }
         ),
-        /* @__PURE__ */ e("label", { htmlFor: "text-autocomplete", className: "mapui:text-sm mapui:text-gray-700", children: "Enable Autocomplete" })
+        /* @__PURE__ */ a("label", { htmlFor: "text-autocomplete", className: "mapui:text-sm mapui:text-gray-700", children: "Enable Autocomplete" })
       ] }),
-      /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ e(
+      /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a(
           "input",
           {
             type: "checkbox",
             id: "text-prefetch",
-            checked: a.prefetch ?? !1,
-            onChange: (p) => i({ ...a, prefetch: p.target.checked }),
+            checked: e.prefetch ?? !1,
+            onChange: (p) => t({ ...e, prefetch: p.target.checked }),
             className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
           }
         ),
-        /* @__PURE__ */ e("label", { htmlFor: "text-prefetch", className: "mapui:text-sm mapui:text-gray-700", children: "Prefetch Options" })
+        /* @__PURE__ */ a("label", { htmlFor: "text-prefetch", className: "mapui:text-sm mapui:text-gray-700", children: "Prefetch Options" })
       ] }),
-      /* @__PURE__ */ e(N, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ e(
-        ue,
+      /* @__PURE__ */ a(S, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ a(
+        De,
         {
-          options: a.options,
-          onChange: (p) => i({ ...a, options: p }),
+          options: e.options,
+          onChange: (p) => t({ ...e, options: p }),
           placeholder: "option1, option2",
-          className: I
+          className: j
         }
       ) })
     ] }),
-    a.type === "number" && /* @__PURE__ */ r(O, { children: [
-      /* @__PURE__ */ e(N, { label: "Input Mode", children: /* @__PURE__ */ r(
+    e.type === "number" && /* @__PURE__ */ l(B, { children: [
+      /* @__PURE__ */ a(S, { label: "Input Mode", children: /* @__PURE__ */ l(
         "select",
         {
-          value: a.inputMode ?? "input",
-          onChange: (p) => i({
-            ...a,
+          value: e.inputMode ?? "input",
+          onChange: (p) => t({
+            ...e,
             inputMode: p.target.value
           }),
-          className: I,
+          className: j,
           children: [
-            /* @__PURE__ */ e("option", { value: "input", children: "Input" }),
-            /* @__PURE__ */ e("option", { value: "slider", children: "Slider" })
+            /* @__PURE__ */ a("option", { value: "input", children: "Input" }),
+            /* @__PURE__ */ a("option", { value: "slider", children: "Slider" })
           ]
         }
       ) }),
-      /* @__PURE__ */ e(N, { label: "Operator", children: /* @__PURE__ */ r(
+      /* @__PURE__ */ a(S, { label: "Operator", children: /* @__PURE__ */ l(
         "select",
         {
-          value: a.operator ?? "eq",
-          onChange: (p) => i({
-            ...a,
+          value: e.operator ?? "eq",
+          onChange: (p) => t({
+            ...e,
             operator: p.target.value
           }),
-          className: I,
+          className: j,
           children: [
-            /* @__PURE__ */ e("option", { value: "eq", children: "Equal (=)" }),
-            /* @__PURE__ */ e("option", { value: "gt", children: "Greater Than (>)" }),
-            /* @__PURE__ */ e("option", { value: "gte", children: "Greater or Equal (>=)" }),
-            /* @__PURE__ */ e("option", { value: "lt", children: "Less Than (<)" }),
-            /* @__PURE__ */ e("option", { value: "lte", children: "Less or Equal (<=)" }),
-            /* @__PURE__ */ e("option", { value: "between", children: "Between" })
+            /* @__PURE__ */ a("option", { value: "eq", children: "Equal (=)" }),
+            /* @__PURE__ */ a("option", { value: "gt", children: "Greater Than (>)" }),
+            /* @__PURE__ */ a("option", { value: "gte", children: "Greater or Equal (>=)" }),
+            /* @__PURE__ */ a("option", { value: "lt", children: "Less Than (<)" }),
+            /* @__PURE__ */ a("option", { value: "lte", children: "Less or Equal (<=)" }),
+            /* @__PURE__ */ a("option", { value: "between", children: "Between" })
           ]
         }
       ) }),
-      /* @__PURE__ */ r("div", { className: "mapui:grid mapui:grid-cols-3 mapui:gap-2", children: [
-        /* @__PURE__ */ e(N, { label: "Min", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ l("div", { className: "mapui:grid mapui:grid-cols-3 mapui:gap-2", children: [
+        /* @__PURE__ */ a(S, { label: "Min", children: /* @__PURE__ */ a(
           "input",
           {
             type: "number",
-            value: a.min ?? "",
-            onChange: (p) => i({
-              ...a,
+            value: e.min ?? "",
+            onChange: (p) => t({
+              ...e,
               min: p.target.value ? parseFloat(p.target.value) : void 0
             }),
-            className: I
+            className: j
           }
         ) }),
-        /* @__PURE__ */ e(N, { label: "Max", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ a(S, { label: "Max", children: /* @__PURE__ */ a(
           "input",
           {
             type: "number",
-            value: a.max ?? "",
-            onChange: (p) => i({
-              ...a,
+            value: e.max ?? "",
+            onChange: (p) => t({
+              ...e,
               max: p.target.value ? parseFloat(p.target.value) : void 0
             }),
-            className: I
+            className: j
           }
         ) }),
-        /* @__PURE__ */ e(N, { label: "Step", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ a(S, { label: "Step", children: /* @__PURE__ */ a(
           "input",
           {
             type: "number",
-            value: a.step ?? "",
-            onChange: (p) => i({
-              ...a,
+            value: e.step ?? "",
+            onChange: (p) => t({
+              ...e,
               step: p.target.value ? parseFloat(p.target.value) : void 0
             }),
-            className: I
+            className: j
           }
         ) })
       ] })
     ] }),
-    a.type === "datetime" && /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-      /* @__PURE__ */ e(
+    e.type === "datetime" && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      /* @__PURE__ */ a(
         "input",
         {
           type: "checkbox",
           id: "datetime-range",
-          checked: a.range ?? !1,
-          onChange: (p) => i({ ...a, range: p.target.checked }),
+          checked: e.range ?? !1,
+          onChange: (p) => t({ ...e, range: p.target.checked }),
           className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
         }
       ),
-      /* @__PURE__ */ e("label", { htmlFor: "datetime-range", className: "mapui:text-sm mapui:text-gray-700", children: "Date Range" })
+      /* @__PURE__ */ a("label", { htmlFor: "datetime-range", className: "mapui:text-sm mapui:text-gray-700", children: "Date Range" })
     ] }),
-    a.type === "select" && /* @__PURE__ */ r(O, { children: [
-      /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ e(
+    e.type === "select" && /* @__PURE__ */ l(B, { children: [
+      /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a(
           "input",
           {
             type: "checkbox",
             id: "select-prefetch",
-            checked: a.prefetch ?? !1,
-            onChange: (p) => i({ ...a, prefetch: p.target.checked }),
+            checked: e.prefetch ?? !1,
+            onChange: (p) => t({ ...e, prefetch: p.target.checked }),
             className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
           }
         ),
-        /* @__PURE__ */ e("label", { htmlFor: "select-prefetch", className: "mapui:text-sm mapui:text-gray-700", children: "Prefetch Options" })
+        /* @__PURE__ */ a("label", { htmlFor: "select-prefetch", className: "mapui:text-sm mapui:text-gray-700", children: "Prefetch Options" })
       ] }),
-      /* @__PURE__ */ e(N, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ e(
-        ue,
+      /* @__PURE__ */ a(S, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ a(
+        De,
         {
-          options: a.options,
-          onChange: (p) => i({ ...a, options: p }),
+          options: e.options,
+          onChange: (p) => t({ ...e, options: p }),
           placeholder: "option1, option2",
-          className: I
+          className: j
         }
       ) })
     ] })
   ] });
 }
-const $e = () => ({
+const Ca = () => ({
   type: "text",
   property: "",
   label: "",
   autocomplete: !1
 });
-function qe({ fields: a, onChange: i, availableProperties: t }) {
-  const [l, n] = w(null), u = () => {
-    const d = [...a, $e()];
-    i(d), n(d.length - 1);
-  }, p = (d, y) => {
-    i(a.map((k, c) => c === d ? y : k));
-  }, o = (d) => {
-    i(a.filter((y, k) => k !== d)), n(null);
-  }, g = (d) => {
+function Sa({ fields: e, onChange: t, availableProperties: i }) {
+  const [r, n] = L(null), o = () => {
+    const d = [...e, Ca()];
+    t(d), n(d.length - 1);
+  }, p = (d, f) => {
+    t(e.map((c, u) => u === d ? f : c));
+  }, b = (d) => {
+    t(e.filter((f, c) => c !== d)), n(null);
+  }, m = (d) => {
     if (d === 0) return;
-    const y = [...a];
-    [y[d - 1], y[d]] = [y[d], y[d - 1]], i(y), n(d - 1);
-  }, x = (d) => {
-    if (d === a.length - 1) return;
-    const y = [...a];
-    [y[d], y[d + 1]] = [y[d + 1], y[d]], i(y), n(d + 1);
+    const f = [...e];
+    [f[d - 1], f[d]] = [f[d], f[d - 1]], t(f), n(d - 1);
+  }, w = (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);
   };
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-    a.length === 0 && /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No search fields configured." }),
-    /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: a.map((d, y) => /* @__PURE__ */ r("li", { className: "mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white", children: [
-      /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-1 mapui:px-3 mapui:py-2", children: [
-        /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
-          /* @__PURE__ */ e(
+  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__ */ 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: () => g(y),
-              disabled: y === 0,
+              onClick: () => m(f),
+              disabled: f === 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: "▲"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: () => x(y),
-              disabled: y === a.length - 1,
+              onClick: () => w(f),
+              disabled: f === 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: "▼"
             }
           )
         ] }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ l(
           "button",
           {
             type: "button",
-            onClick: () => n(l === y ? null : y),
+            onClick: () => n(r === f ? null : f),
             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__ */ e("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 }),
+              /* @__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 }),
               d.label || d.property || "Untitled field"
             ]
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: () => o(y),
+            onClick: () => b(f),
             "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"
           }
         )
       ] }),
-      l === y && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(
-        Re,
+      r === f && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(
+        ka,
         {
           value: d,
-          onChange: (k) => p(y, k),
-          availableProperties: t
+          onChange: (c) => p(f, c),
+          availableProperties: i
         }
       ) })
-    ] }, y)) }),
-    /* @__PURE__ */ e(
+    ] }, f)) }),
+    /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        onClick: u,
+        onClick: o,
         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 Ue(a) {
-  return Object.entries(a).map(([i, t]) => ({
-    key: i,
-    label: t.label ?? "",
-    visible: t.visible ?? !0
+function Da(e) {
+  return Object.entries(e).map(([t, i]) => ({
+    key: t,
+    label: i.label ?? "",
+    visible: i.visible ?? !0
   }));
 }
-function Ve(a) {
-  const i = {};
-  for (const t of a)
-    i[t.key] = {
-      visible: t.visible,
-      ...t.label ? { label: t.label } : {}
+function Ta(e) {
+  const t = {};
+  for (const i of e)
+    t[i.key] = {
+      visible: i.visible,
+      ...i.label ? { label: i.label } : {}
     };
-  return i;
+  return t;
 }
-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 Ge({ value: a, onChange: i, availableProperties: t }) {
-  const l = Ue(a), n = t && t.length > 0, u = (c) => i(Ve(c)), p = () => {
-    u([...l, { key: "", label: "", visible: !0 }]);
-  }, o = (c) => {
-    u(l.filter((b, m) => m !== c));
-  }, g = (c, b) => {
-    u(l.map((m, C) => C === c ? { ...m, ...b } : m));
-  }, x = (c, b) => {
-    const m = t == null ? void 0 : t.find((s) => s.name === b), C = (m == null ? void 0 : m.title) ?? l[c].label;
-    u(l.map((s, S) => S === c ? { ...s, key: b, label: C } : s));
-  }, d = (c) => {
-    if (c === 0) return;
-    const b = [...l];
-    [b[c - 1], b[c]] = [b[c], b[c - 1]], u(b);
-  }, y = (c) => {
-    if (c === l.length - 1) return;
-    const b = [...l];
-    [b[c], b[c + 1]] = [b[c + 1], b[c]], u(b);
-  }, k = () => {
-    if (!t) return;
-    const c = t.map((b) => ({
-      key: b.name,
-      label: b.title ?? "",
+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 La({ value: e, onChange: t, availableProperties: i }) {
+  const r = Da(e), n = i && i.length > 0, o = (u) => t(Ta(u)), p = () => {
+    o([...r, { key: "", label: "", visible: !0 }]);
+  }, b = (u) => {
+    o(r.filter((s, v) => v !== u));
+  }, m = (u, s) => {
+    o(r.map((v, k) => k === u ? { ...v, ...s } : v));
+  }, w = (u, s) => {
+    const v = i == null ? void 0 : i.find((D) => D.name === s), k = (v == null ? void 0 : v.title) ?? r[u].label;
+    o(r.map((D, x) => x === u ? { ...D, key: s, label: k } : D));
+  }, d = (u) => {
+    if (u === 0) return;
+    const s = [...r];
+    [s[u - 1], s[u]] = [s[u], s[u - 1]], o(s);
+  }, f = (u) => {
+    if (u === r.length - 1) return;
+    const s = [...r];
+    [s[u], s[u + 1]] = [s[u + 1], s[u]], o(s);
+  }, c = () => {
+    if (!i) return;
+    const u = i.map((s) => ({
+      key: s.name,
+      label: s.title ?? "",
       visible: !0
     }));
-    u(c);
+    o(u);
   };
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-    l.length === 0 ? /* @__PURE__ */ r(O, { children: [
-      /* @__PURE__ */ e("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__ */ e(
+  return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
+    r.length === 0 ? /* @__PURE__ */ l(B, { 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(
         "button",
         {
           type: "button",
-          onClick: k,
+          onClick: c,
           className: "mapui:cursor-pointer mapui:self-start mapui:rounded mapui:border mapui:border-blue-300 mapui:bg-blue-50 mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:text-blue-700 hover:mapui:bg-blue-100",
           children: "Populate from API metadata"
         }
       )
-    ] }) : /* @__PURE__ */ r(O, { children: [
-      /* @__PURE__ */ r("div", { className: "mapui:grid mapui:items-center mapui:gap-2 mapui:px-8", style: { gridTemplateColumns: "1fr 1fr auto" }, children: [
-        /* @__PURE__ */ e(N, { label: "Property Key", children: /* @__PURE__ */ e("span", {}) }),
-        /* @__PURE__ */ e(N, { label: "Display Label", children: /* @__PURE__ */ e("span", {}) }),
-        /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:font-medium mapui:text-gray-600", children: "Visible" })
+    ] }) : /* @__PURE__ */ l(B, { children: [
+      /* @__PURE__ */ l("div", { className: "mapui:grid mapui:items-center mapui:gap-2 mapui:px-8", style: { gridTemplateColumns: "1fr 1fr auto" }, children: [
+        /* @__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__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1.5 mapui:p-0", children: l.map((c, b) => /* @__PURE__ */ r("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__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
-          /* @__PURE__ */ e(
+      /* @__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__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
+          /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: () => d(b),
-              disabled: b === 0,
+              onClick: () => d(s),
+              disabled: s === 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: "▲"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: () => y(b),
-              disabled: b === l.length - 1,
+              onClick: () => f(s),
+              disabled: s === 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: "▼"
             }
           )
         ] }),
-        /* @__PURE__ */ r("div", { className: "mapui:grid mapui:flex-1 mapui:items-center mapui:gap-2", style: { gridTemplateColumns: "1fr 1fr auto auto" }, children: [
-          n ? /* @__PURE__ */ r(
+        /* @__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(
             "select",
             {
-              value: c.key,
-              onChange: (m) => x(b, m.target.value),
+              value: u.key,
+              onChange: (v) => w(s, v.target.value),
               "aria-label": "Property key",
-              className: z,
+              className: le,
               children: [
-                /* @__PURE__ */ e("option", { value: "", children: "Select a property…" }),
-                t.map((m) => /* @__PURE__ */ e("option", { value: m.name, children: m.title ?? m.name }, m.name))
+                /* @__PURE__ */ a("option", { value: "", children: "Select a property…" }),
+                i.map((v) => /* @__PURE__ */ a("option", { value: v.name, children: v.title ?? v.name }, v.name))
               ]
             }
-          ) : /* @__PURE__ */ e(
+          ) : /* @__PURE__ */ a(
             "input",
             {
               type: "text",
-              value: c.key,
-              onChange: (m) => g(b, { key: m.target.value }),
+              value: u.key,
+              onChange: (v) => m(s, { key: v.target.value }),
               placeholder: "property_name",
               "aria-label": "Property key",
-              className: z
+              className: le
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ a(
             "input",
             {
               type: "text",
-              value: c.label,
-              onChange: (m) => g(b, { label: m.target.value }),
+              value: u.label,
+              onChange: (v) => m(s, { label: v.target.value }),
               placeholder: "Friendly name",
               "aria-label": "Display label",
-              className: z
+              className: le
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ a(
             "input",
             {
               type: "checkbox",
-              checked: c.visible,
-              onChange: (m) => g(b, { visible: m.target.checked }),
+              checked: u.visible,
+              onChange: (v) => m(s, { visible: v.target.checked }),
               "aria-label": "Visible",
               className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: () => o(b),
+              onClick: () => b(s),
               "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"
             }
           )
         ] })
-      ] }, b)) })
+      ] }, s)) })
     ] }),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -1461,216 +2154,246 @@ function Ge({ value: a, onChange: i, availableProperties: t }) {
     )
   ] });
 }
-const he = /geojson\.org\/schema\/(\w+)\.json/;
-function ze(a) {
-  return !!a.$ref && he.test(a.$ref);
+const Be = /geojson\.org\/schema\/(\w+)\.json/;
+function Ia(e) {
+  return !!e.$ref && Be.test(e.$ref);
+}
+function qe(e) {
+  const t = Be.exec(e);
+  return t ? t[1] : null;
 }
-function We(a) {
-  const i = he.exec(a);
-  return i ? i[1] : null;
+function Ue(e) {
+  const t = e.toLowerCase();
+  return t.includes("polygon") ? "fill" : t.includes("linestring") ? "line" : t.includes("point") ? "circle" : null;
 }
-function X(a) {
-  const i = a.toLowerCase();
-  return i.includes("polygon") ? "fill" : i.includes("linestring") ? "line" : i.includes("point") ? "circle" : null;
+function ce(e) {
+  const t = e.toLowerCase();
+  return t.includes("polygon") ? ["fill"] : t.includes("linestring") ? ["line"] : t.includes("point") ? ["circle", "symbol"] : [];
 }
-function ye(a) {
-  for (const i of Object.values(a.properties))
-    if (i.$ref) {
-      const t = We(i.$ref);
-      if (t) return X(t);
+function Aa(e) {
+  for (const t of Object.values(e.properties))
+    if (t.$ref) {
+      const i = qe(t.$ref);
+      if (i) return Ue(i);
     }
   return null;
 }
-function Ye(a) {
-  return Object.entries(a.properties).filter(([, i]) => !ze(i)).map(([i, t]) => ({
-    name: i,
-    title: t.title,
-    type: t.type,
-    format: t.format,
-    enum: t.enum,
-    minimum: t.minimum,
-    maximum: t.maximum
+function We(e) {
+  for (const t of Object.values(e.properties))
+    if (t.$ref) {
+      const i = qe(t.$ref);
+      if (i) return ce(i);
+    }
+  return [];
+}
+function Ea(e) {
+  return Object.entries(e.properties).filter(([, t]) => !Ia(t)).map(([t, i]) => ({
+    name: t,
+    title: i.title,
+    type: i.type,
+    format: i.format,
+    enum: i.enum,
+    minimum: i.minimum,
+    maximum: i.maximum
   }));
 }
-async function ia(a, i) {
-  var t, l;
+async function Ga(e, t) {
+  var i, r;
   try {
-    const n = await Ne(a, i), u = ye(n);
-    if (u) return u;
+    const n = await Me(e, t), o = Aa(n);
+    if (o) return o;
   } catch {
   }
   try {
-    const u = (l = (t = (await ce(a, i, { limit: 1 })).features[0]) == null ? void 0 : t.geometry) == null ? void 0 : l.type;
-    if (typeof u == "string") return X(u);
+    const o = (r = (i = (await se(e, t, { limit: 1 })).features[0]) == null ? void 0 : i.geometry) == null ? void 0 : r.type;
+    if (typeof o == "string") return Ue(o);
   } catch {
   }
   return null;
 }
-function ta(a) {
-  return a.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (i) => i.toUpperCase());
+async function za(e, t) {
+  var i, r;
+  try {
+    const n = await Me(e, t), o = We(n);
+    if (o.length > 0) return o;
+  } catch {
+  }
+  try {
+    const o = (r = (i = (await se(e, t, { limit: 1 })).features[0]) == null ? void 0 : i.geometry) == null ? void 0 : r.type;
+    if (typeof o == "string") return ce(o);
+  } catch {
+  }
+  return [];
+}
+function Va(e) {
+  return e.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (t) => t.toUpperCase());
 }
-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";
-function ne({ value: a, onChange: i, availableSources: t }) {
-  var C;
-  const l = (s) => i({ ...a, ...s }), n = Z(a);
-  n.current = a;
-  const u = Z(i);
-  u.current = i;
-  const p = t.find((s) => s.id === a.sourceId), o = (p == null ? void 0 : p.url) ?? null, g = a.collection || null, { collections: x, loading: d } = me(o), { queryables: y, loading: k } = ve(o, g), c = y ? Ye(y) : [], [b, m] = w(
-    null
-  );
-  return J(() => {
-    if (!y) {
-      m(null);
+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 Te({ value: e, onChange: t, availableSources: i, availableIcons: r }) {
+  var D;
+  const n = (x) => t({ ...e, ...x }), o = ue(e);
+  o.current = e;
+  const p = ue(t);
+  p.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 } = _e(m, w), s = c ? Ea(c) : [], [v, k] = L([]);
+  return X(() => {
+    if (!c) {
+      k([]);
       return;
     }
-    const s = (f) => {
-      if (m(f), f && !n.current.style) {
-        const T = f === "fill" ? _ : f === "line" ? de : f === "symbol" ? be : ge;
-        u.current({ ...n.current, style: T });
+    const x = (P) => {
+      k(P);
+      const E = P[0];
+      if (E && !o.current.style) {
+        const y = E === "fill" ? me : E === "line" ? je : E === "symbol" ? Re : $e;
+        p.current({ ...o.current, style: y });
       }
-    }, S = ye(y);
-    if (S) {
-      s(S);
+    }, $ = We(c);
+    if ($.length > 0) {
+      x($);
       return;
     }
-    if (!o || !g) {
-      m(null);
+    if (!m || !w) {
+      k([]);
       return;
     }
-    let A = !1;
-    return ce(o, g, { limit: 1 }).then((f) => {
-      var L, D;
-      if (A) return;
-      const T = (D = (L = f.features[0]) == null ? void 0 : L.geometry) == null ? void 0 : D.type;
-      s(typeof T == "string" ? X(T) : null);
+    let C = !1;
+    return se(m, w, { limit: 1 }).then((P) => {
+      var y, F;
+      if (C) return;
+      const E = (F = (y = P.features[0]) == null ? void 0 : y.geometry) == null ? void 0 : F.type;
+      x(typeof E == "string" ? ce(E) : []);
     }).catch(() => {
-      A || m(null);
+      C || k([]);
     }), () => {
-      A = !0;
+      C = !0;
     };
-  }, [y, o, g]), J(() => {
-    m(null);
-  }, [o, g]), /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ r("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: [
-      /* @__PURE__ */ e(N, { label: "Layer ID", required: !0, children: /* @__PURE__ */ e(
+  }, [c, m, w]), X(() => {
+    k([]);
+  }, [m, w]), /* @__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(S, { label: "Layer ID", required: !0, children: /* @__PURE__ */ a(
         "input",
         {
           type: "text",
-          value: a.id,
-          onChange: (s) => l({ id: s.target.value }),
+          value: e.id,
+          onChange: (x) => n({ id: x.target.value }),
           placeholder: "my-layer",
-          className: $
+          className: V
         }
       ) }),
-      /* @__PURE__ */ e(N, { label: "Label", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
         "input",
         {
           type: "text",
-          value: a.label,
-          onChange: (s) => l({ label: s.target.value }),
+          value: e.label,
+          onChange: (x) => n({ label: x.target.value }),
           placeholder: "My Layer",
-          className: $
+          className: V
         }
       ) })
     ] }),
-    /* @__PURE__ */ e(N, { label: "Source", required: !0, children: /* @__PURE__ */ r(
+    /* @__PURE__ */ a(S, { label: "Source", required: !0, children: /* @__PURE__ */ l(
       "select",
       {
-        value: a.sourceId,
-        onChange: (s) => l({ sourceId: s.target.value }),
-        className: $,
+        value: e.sourceId,
+        onChange: (x) => n({ sourceId: x.target.value }),
+        className: V,
         children: [
-          /* @__PURE__ */ e("option", { value: "", children: "Select a source…" }),
-          t.map((s) => /* @__PURE__ */ e("option", { value: s.id, children: s.label ?? s.id }, s.id))
+          /* @__PURE__ */ a("option", { value: "", children: "Select a source…" }),
+          i.map((x) => /* @__PURE__ */ a("option", { value: x.id, children: x.label ?? x.id }, x.id))
         ]
       }
     ) }),
-    /* @__PURE__ */ r(N, { label: "Collection", required: !0, children: [
-      x.length > 0 ? /* @__PURE__ */ r(
+    /* @__PURE__ */ l(S, { label: "Collection", required: !0, children: [
+      d.length > 0 ? /* @__PURE__ */ l(
         "select",
         {
-          value: a.collection,
-          onChange: (s) => l({ collection: s.target.value }),
-          className: $,
+          value: e.collection,
+          onChange: (x) => n({ collection: x.target.value }),
+          className: V,
           children: [
-            /* @__PURE__ */ e("option", { value: "", children: "Select a collection…" }),
-            x.map((s) => /* @__PURE__ */ e("option", { value: s.id, children: s.title ?? s.id }, s.id))
+            /* @__PURE__ */ a("option", { value: "", children: "Select a collection…" }),
+            d.map((x) => /* @__PURE__ */ a("option", { value: x.id, children: x.title ?? x.id }, x.id))
           ]
         }
-      ) : /* @__PURE__ */ e(
+      ) : /* @__PURE__ */ a(
         "input",
         {
           type: "text",
-          value: a.collection,
-          onChange: (s) => l({ collection: s.target.value }),
-          placeholder: d ? "Loading collections…" : "collection-id",
-          className: $
+          value: e.collection,
+          onChange: (x) => n({ collection: x.target.value }),
+          placeholder: f ? "Loading collections…" : "collection-id",
+          className: V
         }
       ),
-      k && /* @__PURE__ */ e("span", { className: "mapui:mt-0.5 mapui:block mapui:text-xs mapui:text-gray-400", children: "Loading properties…" })
+      u && /* @__PURE__ */ a("span", { className: "mapui:mt-0.5 mapui:block mapui:text-xs mapui:text-gray-400", children: "Loading properties…" })
     ] }),
-    /* @__PURE__ */ e(N, { label: "Data Mode", children: /* @__PURE__ */ e("div", { className: "mapui:flex mapui:gap-4", children: ["vector-tiles", "geojson"].map((s) => /* @__PURE__ */ r("label", { className: "mapui:flex mapui:cursor-pointer mapui:items-center mapui:gap-1.5", children: [
-      /* @__PURE__ */ e(
+    /* @__PURE__ */ a(S, { 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(
         "input",
         {
           type: "radio",
-          name: `data-mode-${a.id}`,
-          value: s,
-          checked: a.dataMode === s,
-          onChange: () => l({ dataMode: s }),
+          name: `data-mode-${e.id}`,
+          value: x,
+          checked: e.dataMode === x,
+          onChange: () => n({ dataMode: x }),
           className: "mapui:accent-blue-600"
         }
       ),
-      /* @__PURE__ */ e("span", { className: "mapui:text-sm mapui:text-gray-700", children: s })
-    ] }, s)) }) }),
-    /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:text-gray-700", children: x })
+    ] }, x)) }) }),
+    /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      /* @__PURE__ */ a(
         "input",
         {
           type: "checkbox",
           id: "layer-visible",
-          checked: a.visible,
-          onChange: (s) => l({ visible: s.target.checked }),
+          checked: e.visible,
+          onChange: (x) => n({ visible: x.target.checked }),
           className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
         }
       ),
-      /* @__PURE__ */ e("label", { htmlFor: "layer-visible", className: "mapui:text-sm mapui:text-gray-700", children: "Visible by default" })
+      /* @__PURE__ */ a("label", { htmlFor: "layer-visible", className: "mapui:text-sm mapui:text-gray-700", children: "Visible by default" })
     ] }),
-    /* @__PURE__ */ e(q, { title: "Style", children: /* @__PURE__ */ e(
-      Oe,
+    /* @__PURE__ */ a(_, { title: "Style", children: /* @__PURE__ */ a(
+      xa,
       {
-        value: a.style ?? _,
-        onChange: (s) => l({ style: s }),
-        suggestedType: b
+        value: e.style ?? me,
+        onChange: (x) => n({ style: x }),
+        suggestedTypes: v,
+        availableIcons: r,
+        availableProperties: s,
+        onFetchDistinctValues: m && w ? (x) => Ye(m, w, x, { limit: 1e3 }) : void 0
       }
     ) }),
-    /* @__PURE__ */ e(q, { title: "Legend", children: /* @__PURE__ */ e(
-      je,
+    /* @__PURE__ */ a(_, { title: "Legend", children: /* @__PURE__ */ a(
+      va,
       {
-        value: a.legend,
-        onChange: (s) => l({ legend: s })
+        value: e.legend,
+        onChange: (x) => n({ legend: x }),
+        style: e.style
       }
     ) }),
-    /* @__PURE__ */ e(q, { title: "Search Fields", children: /* @__PURE__ */ e(
-      qe,
+    /* @__PURE__ */ a(_, { title: "Search Fields", children: /* @__PURE__ */ a(
+      Sa,
       {
-        fields: ((C = a.search) == null ? void 0 : C.fields) ?? [],
-        onChange: (s) => l({ search: s.length > 0 ? { fields: s } : void 0 }),
-        availableProperties: c
+        fields: ((D = e.search) == null ? void 0 : D.fields) ?? [],
+        onChange: (x) => n({ search: x.length > 0 ? { fields: x } : void 0 }),
+        availableProperties: s
       }
     ) }),
-    /* @__PURE__ */ e(q, { title: "Property Display", children: /* @__PURE__ */ e(
-      Ge,
+    /* @__PURE__ */ a(_, { title: "Property Display", children: /* @__PURE__ */ a(
+      La,
       {
-        value: a.propertyDisplay ?? {},
-        onChange: (s) => l({ propertyDisplay: Object.keys(s).length > 0 ? s : void 0 }),
-        availableProperties: c
+        value: e.propertyDisplay ?? {},
+        onChange: (x) => n({ propertyDisplay: Object.keys(x).length > 0 ? x : void 0 }),
+        availableProperties: s
       }
     ) })
   ] });
 }
-const W = () => ({
+const ne = () => ({
   id: "",
   sourceId: "",
   collection: "",
@@ -1678,99 +2401,99 @@ const W = () => ({
   visible: !0,
   dataMode: "vector-tiles"
 });
-function la({ layers: a, onChange: i, availableSources: t }) {
-  const [l, n] = w(null), [u, p] = w(!1), [o, g] = w(W()), [x, d] = w(null), [y, k] = w(null), [c, b] = w(null), m = () => {
-    i([...a, o]), p(!1), g(W());
-  }, C = (h) => {
-    i(a.map((v) => v.id === l ? h : v));
-  }, s = (h) => {
-    i(a.filter((v) => v.id !== h)), d(null), l === h && n(null);
-  }, S = (h) => {
-    if (h === 0) return;
-    const v = [...a];
-    [v[h - 1], v[h]] = [v[h], v[h - 1]], i(v);
-  }, A = (h) => {
-    if (h === a.length - 1) return;
-    const v = [...a];
-    [v[h], v[h + 1]] = [v[h + 1], v[h]], i(v);
-  }, f = (h, v) => {
-    k(v), h.dataTransfer.effectAllowed = "move", h.dataTransfer.setData("text/plain", v);
-  }, T = (h, v) => {
-    h.preventDefault(), h.dataTransfer.dropEffect = "move", b(v);
-  }, L = () => {
-    b(null);
-  }, D = (h, v) => {
-    h.preventDefault(), b(null);
-    const M = y;
-    if (k(null), !M || M === v) return;
-    const j = a.findIndex((F) => F.id === M), B = a.findIndex((F) => F.id === v);
-    if (j === -1 || B === -1) return;
-    const E = [...a];
-    E.splice(j, 1), E.splice(B, 0, a[j]), i(E);
-  }, xe = () => {
-    k(null), b(null);
+function _a({ layers: e, onChange: t, availableSources: i, availableIcons: r }) {
+  const [n, o] = L(null), [p, b] = L(!1), [m, w] = L(ne()), [d, f] = L(null), [c, u] = L(null), [s, v] = L(null), k = () => {
+    t([...e, m]), b(!1), w(ne());
+  }, D = (g) => {
+    t(e.map((N) => N.id === n ? g : N));
+  }, x = (g) => {
+    t(e.filter((N) => N.id !== g)), f(null), n === g && o(null);
+  }, $ = (g) => {
+    if (g === 0) return;
+    const N = [...e];
+    [N[g - 1], N[g]] = [N[g], N[g - 1]], t(N);
+  }, C = (g) => {
+    if (g === e.length - 1) return;
+    const N = [...e];
+    [N[g], N[g + 1]] = [N[g + 1], N[g]], t(N);
+  }, P = (g, N) => {
+    u(N), g.dataTransfer.effectAllowed = "move", g.dataTransfer.setData("text/plain", N);
+  }, E = (g, N) => {
+    g.preventDefault(), g.dataTransfer.dropEffect = "move", v(N);
+  }, y = () => {
+    v(null);
+  }, F = (g, N) => {
+    g.preventDefault(), v(null);
+    const O = c;
+    if (u(null), !O || O === N) return;
+    const q = e.findIndex((h) => h.id === O), U = e.findIndex((h) => h.id === N);
+    if (q === -1 || U === -1) return;
+    const R = [...e];
+    R.splice(q, 1), R.splice(U, 0, e[q]), t(R);
+  }, M = () => {
+    u(null), v(null);
   };
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
-      /* @__PURE__ */ e("h3", { className: "mapui:m-0 mapui:text-sm mapui:font-semibold mapui:text-gray-700", children: "Layers" }),
-      /* @__PURE__ */ 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:justify-between", children: [
+      /* @__PURE__ */ a("h3", { className: "mapui:m-0 mapui:text-sm mapui:font-semibold mapui:text-gray-700", children: "Layers" }),
+      /* @__PURE__ */ a(
         "button",
         {
           type: "button",
           onClick: () => {
-            p(!0), g(W());
+            b(!0), w(ne());
           },
           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"
         }
       )
     ] }),
-    a.length === 0 && !u && /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No layers configured." }),
-    /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: a.map((h, v) => {
-      var E, F, K, Q;
-      const M = y === h.id, j = c === h.id, B = l === h.id;
-      return /* @__PURE__ */ r(
+    e.length === 0 && !p && /* @__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, N) => {
+      var R, h, T, I;
+      const O = c === g.id, q = s === g.id, U = n === g.id;
+      return /* @__PURE__ */ l(
         "li",
         {
-          draggable: !B,
-          onDragStart: B ? void 0 : (R) => f(R, h.id),
-          onDragOver: (R) => T(R, h.id),
-          onDragLeave: L,
-          onDrop: (R) => D(R, h.id),
-          onDragEnd: xe,
+          draggable: !U,
+          onDragStart: U ? void 0 : (A) => P(A, g.id),
+          onDragOver: (A) => E(A, g.id),
+          onDragLeave: y,
+          onDrop: (A) => F(A, g.id),
+          onDragEnd: M,
           className: [
             "mapui:rounded-lg mapui:border mapui:bg-white mapui:transition-colors",
-            j ? "mapui:border-blue-400 mapui:bg-blue-50" : "mapui:border-gray-200",
-            M ? "mapui:opacity-50" : "mapui:opacity-100"
+            q ? "mapui:border-blue-400 mapui:bg-blue-50" : "mapui:border-gray-200",
+            O ? "mapui:opacity-50" : "mapui:opacity-100"
           ].join(" "),
           children: [
-            /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:gap-2 mapui:px-3 mapui:py-2", children: [
-              /* @__PURE__ */ r("div", { className: "mapui:flex mapui:min-w-0 mapui:items-center mapui:gap-2", children: [
-                /* @__PURE__ */ r("div", { className: "mapui:flex mapui:shrink-0 mapui:flex-col mapui:gap-0.5", children: [
-                  /* @__PURE__ */ e(
+            /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:gap-2 mapui:px-3 mapui:py-2", children: [
+              /* @__PURE__ */ l("div", { className: "mapui:flex mapui:min-w-0 mapui:items-center mapui:gap-2", children: [
+                /* @__PURE__ */ l("div", { className: "mapui:flex mapui:shrink-0 mapui:flex-col mapui:gap-0.5", children: [
+                  /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
-                      onClick: () => S(v),
-                      disabled: v === 0,
+                      onClick: () => $(N),
+                      disabled: N === 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",
                       children: "▲"
                     }
                   ),
-                  /* @__PURE__ */ e(
+                  /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
-                      onClick: () => A(v),
-                      disabled: v === a.length - 1,
+                      onClick: () => C(N),
+                      disabled: N === 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",
                       children: "▼"
                     }
                   )
                 ] }),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ a(
                   "span",
                   {
                     className: "mapui:shrink-0 mapui:cursor-grab mapui:text-gray-400 active:mapui:cursor-grabbing",
@@ -1778,151 +2501,153 @@ function la({ layers: a, onChange: i, availableSources: t }) {
                     children: "⠿"
                   }
                 ),
-                /* @__PURE__ */ r("div", { className: "mapui:flex mapui:min-w-0 mapui:flex-col mapui:gap-0.5", children: [
-                  /* @__PURE__ */ e("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: h.label || h.id }),
-                  /* @__PURE__ */ e("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: h.collection }),
-                  /* @__PURE__ */ r("div", { className: "mapui:mt-1 mapui:flex mapui:flex-wrap mapui:gap-1", children: [
-                    /* @__PURE__ */ e("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: h.dataMode }),
-                    h.style && /* @__PURE__ */ e("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: h.style.type }),
-                    h.visible === !1 && /* @__PURE__ */ e("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" }),
-                    (((F = (E = h.search) == null ? void 0 : E.fields) == null ? void 0 : F.length) ?? 0) > 0 && /* @__PURE__ */ r("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: [
-                      h.search.fields.length,
+                /* @__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__ */ 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 }),
+                    g.style && /* @__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.style.type }),
+                    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" }),
+                    (((h = (R = g.search) == null ? void 0 : R.fields) == null ? void 0 : h.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,
                       " search fields"
                     ] }),
-                    (((Q = (K = h.legend) == null ? void 0 : K.entries) == null ? void 0 : Q.length) ?? 0) > 0 && /* @__PURE__ */ r("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: [
-                      h.legend.entries.length,
+                    (((I = (T = g.legend) == null ? void 0 : T.entries) == null ? void 0 : I.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,
                       " legend entries"
                     ] })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ r("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
-                /* @__PURE__ */ e(
+              /* @__PURE__ */ l("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+                /* @__PURE__ */ a(
                   "button",
                   {
                     type: "button",
-                    onClick: () => n(l === h.id ? null : h.id),
+                    onClick: () => o(n === g.id ? null : g.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: l === h.id ? "Close" : "Edit"
+                    children: n === g.id ? "Close" : "Edit"
                   }
                 ),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ a(
                   "button",
                   {
                     type: "button",
-                    onClick: () => d(h.id),
+                    onClick: () => f(g.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"
                   }
                 )
               ] })
             ] }),
-            l === h.id && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(
-              ne,
+            n === g.id && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(
+              Te,
               {
-                value: h,
-                onChange: C,
-                availableSources: t
+                value: g,
+                onChange: D,
+                availableSources: i,
+                availableIcons: r
               }
             ) })
           ]
         },
-        h.id
+        g.id
       );
     }) }),
-    u && /* @__PURE__ */ r("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
-      /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Layer" }),
-      /* @__PURE__ */ e(
-        ne,
+    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 Layer" }),
+      /* @__PURE__ */ a(
+        Te,
         {
-          value: o,
-          onChange: g,
-          availableSources: t
+          value: m,
+          onChange: w,
+          availableSources: i,
+          availableIcons: r
         }
       ),
-      /* @__PURE__ */ r("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
-        /* @__PURE__ */ e(
+      /* @__PURE__ */ l("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: m,
-            disabled: !o.id || !o.sourceId || !o.collection,
+            onClick: k,
+            disabled: !m.id || !m.sourceId || !m.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"
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: () => p(!1),
+            onClick: () => b(!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"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ e(
-      H,
+    /* @__PURE__ */ a(
+      Z,
       {
-        open: x !== null,
+        open: d !== null,
         title: "Remove Layer",
         description: "Are you sure you want to remove this layer from the configuration?",
-        onConfirm: () => x && s(x),
-        onCancel: () => d(null)
+        onConfirm: () => d && x(d),
+        onCancel: () => f(null)
       }
     )
   ] });
 }
-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 oe({ value: a, onChange: i }) {
-  const t = (l) => i({ ...a, ...l });
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ e(N, { label: "ID", required: !0, children: /* @__PURE__ */ e(
+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 Le({ 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(S, { label: "ID", required: !0, children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: a.id,
-        onChange: (l) => t({ id: l.target.value }),
+        value: e.id,
+        onChange: (r) => i({ id: r.target.value }),
         placeholder: "osm",
-        className: V
+        className: Q
       }
     ) }),
-    /* @__PURE__ */ e(N, { label: "Label", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ a(S, { label: "Label", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: a.label,
-        onChange: (l) => t({ label: l.target.value }),
+        value: e.label,
+        onChange: (r) => i({ label: r.target.value }),
         placeholder: "OpenStreetMap",
-        className: V
+        className: Q
       }
     ) }),
-    /* @__PURE__ */ e(N, { label: "Style URL", required: !0, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ a(S, { label: "Style URL", required: !0, children: /* @__PURE__ */ a(
       "input",
       {
         type: "url",
-        value: a.url,
-        onChange: (l) => t({ url: l.target.value }),
+        value: e.url,
+        onChange: (r) => i({ url: r.target.value }),
         placeholder: "https://example.com/style.json",
-        className: V
+        className: Q
       }
     ) }),
-    /* @__PURE__ */ r(N, { label: "Thumbnail URL (optional)", children: [
-      /* @__PURE__ */ e(
+    /* @__PURE__ */ l(S, { label: "Thumbnail URL (optional)", children: [
+      /* @__PURE__ */ a(
         "input",
         {
           type: "url",
-          value: a.thumbnail ?? "",
-          onChange: (l) => t({ thumbnail: l.target.value || void 0 }),
+          value: e.thumbnail ?? "",
+          onChange: (r) => i({ thumbnail: r.target.value || void 0 }),
           placeholder: "https://example.com/thumbnail.png",
-          className: V
+          className: Q
         }
       ),
-      a.thumbnail && /* @__PURE__ */ e(
+      e.thumbnail && /* @__PURE__ */ a(
         "img",
         {
-          src: a.thumbnail,
+          src: e.thumbnail,
           alt: "Thumbnail preview",
           className: "mapui:mt-1 mapui:h-16 mapui:w-24 mapui:rounded mapui:border mapui:border-gray-200 mapui:object-cover"
         }
@@ -1930,113 +2655,253 @@ function oe({ value: a, onChange: i }) {
     ] })
   ] });
 }
-const Y = () => ({ id: "", label: "", url: "" });
-function ra({ basemaps: a, onChange: i }) {
-  const [t, l] = w(null), [n, u] = w(!1), [p, o] = w(Y()), [g, x] = w(null), d = (c) => {
-    i(a.map((b) => b.id === t ? c : b));
-  }, y = () => {
-    i([...a, p]), u(!1), o(Y());
-  }, k = (c) => {
-    i(a.filter((b) => b.id !== c)), x(null);
+const pe = () => ({ id: "", label: "", url: "" });
+function Ya({ basemaps: e, onChange: t }) {
+  const [i, r] = L(null), [n, o] = L(!1), [p, b] = L(pe()), [m, w] = L(null), d = (u) => {
+    t(e.map((s) => s.id === i ? u : s));
+  }, f = () => {
+    t([...e, p]), o(!1), b(pe());
+  }, c = (u) => {
+    t(e.filter((s) => s.id !== u)), w(null);
   };
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
-      /* @__PURE__ */ e("h3", { className: "mapui:m-0 mapui:text-sm mapui:font-semibold mapui:text-gray-700", children: "Basemaps" }),
-      /* @__PURE__ */ 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:justify-between", children: [
+      /* @__PURE__ */ a("h3", { className: "mapui:m-0 mapui:text-sm mapui:font-semibold mapui:text-gray-700", children: "Basemaps" }),
+      /* @__PURE__ */ a(
         "button",
         {
           type: "button",
           onClick: () => {
-            u(!0), o(Y());
+            o(!0), b(pe());
           },
           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"
         }
       )
     ] }),
-    a.length === 0 && !n && /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No basemaps configured." }),
-    /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: a.map((c) => /* @__PURE__ */ r(
+    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(
       "li",
       {
         className: "mapui:rounded-lg mapui:border mapui:border-gray-200 mapui:bg-white",
         children: [
-          /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-3 mapui:px-3 mapui:py-2", children: [
-            c.thumbnail && /* @__PURE__ */ e(
+          /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-3 mapui:px-3 mapui:py-2", children: [
+            u.thumbnail && /* @__PURE__ */ a(
               "img",
               {
-                src: c.thumbnail,
+                src: u.thumbnail,
                 alt: "",
                 className: "mapui:h-10 mapui:w-14 mapui:shrink-0 mapui:rounded mapui:object-cover"
               }
             ),
-            /* @__PURE__ */ r("div", { className: "mapui:flex-1 mapui:overflow-hidden", children: [
-              /* @__PURE__ */ e("span", { className: "mapui:block mapui:text-sm mapui:font-medium mapui:text-gray-800", children: c.label || c.id }),
-              /* @__PURE__ */ e("span", { className: "mapui:block mapui:truncate mapui:font-mono mapui:text-xs mapui:text-gray-500", children: c.url })
+            /* @__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__ */ r("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
-              /* @__PURE__ */ e(
+            /* @__PURE__ */ l("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+              /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: () => l(t === c.id ? null : c.id),
+                  onClick: () => r(i === u.id ? null : u.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: t === c.id ? "Close" : "Edit"
+                  children: i === u.id ? "Close" : "Edit"
                 }
               ),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: () => x(c.id),
+                  onClick: () => w(u.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"
                 }
               )
             ] })
           ] }),
-          t === c.id && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(oe, { value: c, onChange: d }) })
+          i === u.id && /* @__PURE__ */ a("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ a(Le, { value: u, onChange: d }) })
         ]
       },
-      c.id
+      u.id
     )) }),
-    n && /* @__PURE__ */ r("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
-      /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Basemap" }),
-      /* @__PURE__ */ e(oe, { value: p, onChange: o }),
-      /* @__PURE__ */ r("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
-        /* @__PURE__ */ e(
+    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 Basemap" }),
+      /* @__PURE__ */ a(Le, { value: p, onChange: b }),
+      /* @__PURE__ */ l("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: y,
+            onClick: f,
             disabled: !p.id || !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"
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: () => u(!1),
+            onClick: () => o(!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"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ e(
-      H,
+    /* @__PURE__ */ a(
+      Z,
       {
-        open: g !== null,
+        open: m !== null,
         title: "Remove Basemap",
         description: "Are you sure you want to remove this basemap from the configuration?",
-        onConfirm: () => g && k(g),
-        onCancel: () => x(null)
+        onConfirm: () => m && c(m),
+        onCancel: () => w(null)
+      }
+    )
+  ] });
+}
+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 Ae({ 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(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: Ie
+      }
+    ) }),
+    /* @__PURE__ */ l(S, { label: "Sprite URL", required: !0, children: [
+      /* @__PURE__ */ a(
+        "input",
+        {
+          type: "url",
+          value: e.url,
+          onChange: (r) => i({ url: r.target.value }),
+          placeholder: "https://example.com/sprites/sprite",
+          className: Ie
+        }
+      ),
+      /* @__PURE__ */ l("p", { className: "mapui:mt-1 mapui:text-xs mapui:text-gray-400", children: [
+        "Base URL without extension. MapLibre will append ",
+        /* @__PURE__ */ a("code", { children: ".json" }),
+        " and ",
+        /* @__PURE__ */ a("code", { children: ".png" }),
+        "."
+      ] })
+    ] })
+  ] });
+}
+const oe = () => ({ id: "", url: "" }), Pa = (e) => {
+  try {
+    return new URL(e), !0;
+  } catch {
+    return !1;
+  }
+};
+function Xa({ sprites: e, onChange: t }) {
+  const [i, r] = L(null), [n, o] = L(!1), [p, b] = L(oe()), [m, w] = L(null), d = (u) => {
+    t(e.map((s, v) => v === i ? u : s));
+  }, f = () => {
+    t([...e, p]), o(!1), b(oe());
+  }, 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);
+  };
+  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: [
+      /* @__PURE__ */ a("h3", { className: "mapui:m-0 mapui:text-sm mapui:font-semibold mapui:text-gray-700", children: "Custom Sprite Sheets" }),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            o(!0), b(oe());
+          },
+          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(
+      "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__ */ l("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => r(i === s ? null : s),
+                  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"
+                }
+              ),
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => w(u.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 }) })
+        ]
+      },
+      s
+    )) }),
+    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 Sprite Sheet" }),
+      /* @__PURE__ */ a(Ae, { value: p, onChange: b }),
+      /* @__PURE__ */ l("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: f,
+            disabled: !p.id || !p.url || !Pa(p.url) || e.some((u) => u.id === p.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"
+          }
+        ),
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: () => o(!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"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ a(
+      Z,
+      {
+        open: m !== 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)
       }
     )
   ] });
 }
-const Je = [
+const Fa = [
   { 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" },
@@ -2044,44 +2909,45 @@ const Je = [
   { key: "showCoordinateDisplay", label: "Coordinate Display", description: "Show cursor coordinates" },
   { 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: "showExportButton", label: "Export Button", description: "Export data as CSV" },
+  { key: "showLegendOpacity", label: "Legend Opacity", description: "Expand legend with opacity sliders" }
 ];
-function pa({ value: a, onChange: i }) {
-  const t = (l, n) => {
-    i({ ...a, [l]: n });
+function Ha({ value: e, onChange: t }) {
+  const i = (r, n) => {
+    t({ ...e, [r]: n });
   };
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
-    /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:mb-2 mapui:text-xs mapui:text-gray-500", children: "Enable or disable UI panels and controls." }),
-    /* @__PURE__ */ e("div", { className: "mapui:grid mapui:grid-cols-1 mapui:gap-2 sm:mapui:grid-cols-2", children: Je.map(({ key: l, label: n, description: u }) => {
-      const p = a[l];
-      return /* @__PURE__ */ r(
+  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: Fa.map(({ key: r, label: n, description: o }) => {
+      const p = 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__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
-              /* @__PURE__ */ e("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: n }),
-              /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-gray-500", children: u })
+            /* @__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: o })
             ] }),
-            /* @__PURE__ */ r("div", { className: "mapui:relative mapui:flex mapui:shrink-0 mapui:items-center", children: [
-              /* @__PURE__ */ e(
+            /* @__PURE__ */ l("div", { className: "mapui:relative mapui:flex mapui:shrink-0 mapui:items-center", children: [
+              /* @__PURE__ */ a(
                 "input",
                 {
                   type: "checkbox",
                   checked: p,
-                  onChange: (o) => t(l, o.target.checked),
+                  onChange: (b) => i(r, b.target.checked),
                   className: "mapui:sr-only",
                   "aria-label": n
                 }
               ),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ a(
                 "div",
                 {
                   className: [
                     "mapui:relative mapui:h-5 mapui:w-9 mapui:rounded-full mapui:transition-colors",
                     p ? "mapui:bg-blue-600" : "mapui:bg-gray-300"
                   ].join(" "),
-                  children: /* @__PURE__ */ e(
+                  children: /* @__PURE__ */ a(
                     "div",
                     {
                       className: [
@@ -2095,185 +2961,204 @@ function pa({ value: a, onChange: i }) {
             ] })
           ]
         },
-        l
+        r
       );
     }) })
   ] });
 }
-const fe = [
+const Ge = [
   { 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 _e(a, i) {
-  const t = fe.find((l) => l.key === a);
-  if (t) {
-    if (isNaN(i)) return "Must be a number";
-    if (i < t.min) return `Must be at least ${t.min}`;
-    if (i > t.max) return `Must be at most ${t.max}`;
+function Ma(e, t) {
+  const i = Ge.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 He = "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 ua({ value: a, onChange: i }) {
-  const t = (l, n) => {
-    const u = parseFloat(n);
-    i({ ...a, [l]: isNaN(u) ? 0 : u });
+const Oa = "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 Ja({ value: e, onChange: t }) {
+  const i = (r, n) => {
+    const o = parseFloat(n);
+    t({ ...e, [r]: isNaN(o) ? 0 : o });
   };
-  return /* @__PURE__ */ e("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: fe.map(({ key: l, label: n, min: u, max: p, step: o, placeholder: g }) => {
-    const x = _e(l, a[l]);
-    return /* @__PURE__ */ e(N, { label: n, error: x, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ a("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: Ge.map(({ key: r, label: n, min: o, max: p, step: b, placeholder: m }) => {
+    const w = Ma(r, e[r]);
+    return /* @__PURE__ */ a(S, { label: n, error: w, children: /* @__PURE__ */ a(
       "input",
       {
         type: "number",
-        min: u,
+        min: o,
         max: p,
-        step: o,
-        value: a[l],
-        placeholder: g,
-        onChange: (d) => t(l, d.target.value),
-        className: `${He} ${x ? "mapui:border-red-400" : ""}`
+        step: b,
+        value: e[r],
+        placeholder: m,
+        onChange: (d) => i(r, d.target.value),
+        className: `${Oa} ${w ? "mapui:border-red-400" : ""}`
       }
-    ) }, l);
+    ) }, r);
   }) });
 }
-function na({ config: a }) {
-  const i = we(a);
-  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-      /* @__PURE__ */ e(
+function Ka({ config: e }) {
+  const t = Xe(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(
         "span",
         {
           className: [
             "mapui:inline-flex mapui:items-center mapui:rounded-full mapui:px-2.5 mapui:py-0.5 mapui:text-xs mapui:font-semibold",
-            i.success ? "mapui:bg-green-100 mapui:text-green-800" : "mapui:bg-red-100 mapui:text-red-800"
+            t.success ? "mapui:bg-green-100 mapui:text-green-800" : "mapui:bg-red-100 mapui:text-red-800"
           ].join(" "),
-          children: i.success ? "Valid" : "Invalid"
+          children: t.success ? "Valid" : "Invalid"
         }
       ),
-      /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-gray-500", children: "MapConfig validation" })
+      /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-500", children: "MapConfig validation" })
     ] }),
-    !i.success && /* @__PURE__ */ r("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3", children: [
-      /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:mb-1 mapui:text-xs mapui:font-semibold mapui:text-red-700", children: "Validation Errors" }),
-      /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1 mapui:p-0", children: i.error.errors.map((t, l) => /* @__PURE__ */ r("li", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
-        /* @__PURE__ */ e("span", { className: "mapui:font-mono mapui:text-xs mapui:text-red-600", children: t.path.join(" > ") || "root" }),
-        /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-red-800", children: t.message })
-      ] }, l)) })
+    !t.success && /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3", children: [
+      /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-1 mapui:text-xs mapui:font-semibold mapui:text-red-700", children: "Validation Errors" }),
+      /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1 mapui:p-0", children: t.error.errors.map((i, r) => /* @__PURE__ */ l("li", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
+        /* @__PURE__ */ a("span", { className: "mapui:font-mono mapui:text-xs mapui:text-red-600", children: i.path.join(" > ") || "root" }),
+        /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-red-800", children: i.message })
+      ] }, r)) })
     ] }),
-    /* @__PURE__ */ e("div", { className: "mapui:overflow-auto mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-gray-50", children: /* @__PURE__ */ e("pre", { className: "mapui:m-0 mapui:p-3 mapui:text-xs mapui:text-gray-800 mapui:whitespace-pre", children: JSON.stringify(a, null, 2) }) })
+    /* @__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) }) })
   ] });
 }
 export {
-  di as BasemapConfigSchema,
-  oe as BasemapEditor,
-  ra as BasemapList,
-  ca as BasemapSwitcher,
-  gi as CircleLayoutSchema,
-  bi as CirclePaintSchema,
-  hi as CircleStyleSchema,
-  da as CollapsibleControl,
-  aa as CollectionBrowser,
-  se as ColorPicker,
-  na as ConfigPreview,
-  H as ConfirmDialog,
-  ba as CoordinateDisplay,
-  yi as DatetimeSearchFieldSchema,
-  xa as ExportButton,
-  va as FeatureDetailPanel,
-  ka as FeatureTooltip,
-  fi as FillLayoutSchema,
-  xi as FillPaintSchema,
-  Ni as FillStyleSchema,
-  vi as FilterConfigSchema,
-  N as FormField,
-  wi as LayerConfigSchema,
-  ne as LayerEditor,
-  la as LayerList,
-  Sa as LayerPanel,
-  Ta as Legend,
-  ki as LegendConfigSchema,
-  je as LegendEditor,
-  Me as LegendEntryEditor,
-  Ci as LegendEntrySchema,
-  Si as LineLayoutSchema,
-  Di as LinePaintSchema,
-  Ti as LineStyleSchema,
-  Li as MapConfigSchema,
-  Ii as NumberSearchFieldSchema,
-  Ai as OgcApiSourceSchema,
-  Ei as PropertyDisplayConfigSchema,
-  Ge as PropertyDisplayEditor,
-  Fi as PropertyDisplaySchema,
-  Pi as SearchConfigSchema,
-  Re as SearchFieldEditor,
-  qe as SearchFieldList,
-  Oi as SearchFieldSchema,
-  Ia as SearchPanel,
-  Mi as SelectSearchFieldSchema,
-  ee as SourceEditor,
-  ea as SourceList,
-  ji as StyleConfigSchema,
-  Oe as StyleEditor,
-  Bi as SymbolLayoutSchema,
-  Ri as SymbolPaintSchema,
-  $i as SymbolStyleSchema,
-  qi as TextSearchFieldSchema,
-  pa as UIConfigEditor,
-  Ui as UIConfigSchema,
-  Vi as ViewConfigSchema,
-  ua as ViewEditor,
-  Ea as and,
-  Fa as between,
-  ge as defaultCircle,
-  _ as defaultFill,
-  de as defaultLine,
-  ye as detectGeometryTypeFromQueryables,
-  ia as detectStyleTypeForCollection,
-  Pa as downloadCsv,
-  Oa as eq,
-  We as extractGeometryType,
-  Ma as featuresToCsv,
-  ja as fetchCollectionDetail,
-  Ba as fetchCollections,
-  Ra as fetchConformance,
-  $a as fetchDistinctValues,
-  qa as fetchFeatureCount,
-  ce as fetchFeatures,
-  Ne as fetchQueryables,
-  Ua as fetchTileJson,
-  ha as formatDMS,
-  ya as formatDecimal,
-  Va as fromSimpleFilters,
-  Ga as fromStructuredFilters,
-  X as geometryTypeToStyleType,
-  za as getCql2FilteredVectorTileUrl,
-  Wa as getFilteredVectorTileUrl,
-  Ya as getTileJsonUrl,
-  Ja as getVectorTileUrl,
-  _a as gt,
-  Ha as gte,
-  ta as humanizePropertyName,
-  Xa as inList,
-  ze as isGeometryProperty,
-  Ka as isNull,
-  Qa as like,
-  Za as lt,
-  ei as lte,
-  ai as neq,
-  ii as not,
-  ti as or,
-  li as resolvePropertyDisplay,
-  we as safeValidateMapConfig,
-  ri as serializeCql2,
-  pi as tAfter,
-  ui as tBefore,
-  ni as tDuring,
-  Ye as toAvailableProperties,
-  oi as useCsvExport,
-  mi as useOgcCollectionDetail,
-  me as useOgcCollections,
-  ci as useOgcFeatures,
-  ve as useOgcQueryables,
-  Gi as validateMapConfig
+  li as BasemapConfigSchema,
+  Le as BasemapEditor,
+  Ya as BasemapList,
+  et as BasemapSwitcher,
+  ni as CircleLayoutSchema,
+  pi as CirclePaintSchema,
+  oi as CircleStyleSchema,
+  tt as CollapsibleControl,
+  Wa as CollectionBrowser,
+  Y as ColorPicker,
+  Ka as ConfigPreview,
+  Z as ConfirmDialog,
+  rt as CoordinateDisplay,
+  ui as DatetimeSearchFieldSchema,
+  ot as ExportButton,
+  mt as FeatureDetailPanel,
+  ct as FeatureTooltip,
+  mi as FillLayoutSchema,
+  si as FillPaintSchema,
+  ci as FillStyleSchema,
+  di as FilterConfigSchema,
+  S as FormField,
+  hi as LayerConfigSchema,
+  Te as LayerEditor,
+  _a as LayerList,
+  ht as LayerPanel,
+  bt as Legend,
+  gi as LegendConfigSchema,
+  va as LegendEditor,
+  wa as LegendEntryEditor,
+  bi as LegendEntrySchema,
+  yi as LineLayoutSchema,
+  fi as LinePaintSchema,
+  xi as LineStyleSchema,
+  wi as MapConfigSchema,
+  vi as NumberSearchFieldSchema,
+  Ni as OgcApiSourceSchema,
+  ki as PropertyDisplayConfigSchema,
+  La as PropertyDisplayEditor,
+  Ci as PropertyDisplaySchema,
+  Si as SearchConfigSchema,
+  ka as SearchFieldEditor,
+  Sa as SearchFieldList,
+  Di as SearchFieldSchema,
+  ft as SearchPanel,
+  Ti as SelectSearchFieldSchema,
+  de as SourceEditor,
+  Ua as SourceList,
+  Ae as SpriteSourceEditor,
+  Xa as SpriteSourceList,
+  Li as SpriteSourceSchema,
+  Ii as StyleConfigSchema,
+  xa as StyleEditor,
+  Ai as SymbolLayoutSchema,
+  Ei as SymbolPaintSchema,
+  Pi as SymbolStyleSchema,
+  Fi as TextSearchFieldSchema,
+  Ha as UIConfigEditor,
+  Mi as UIConfigSchema,
+  Oi as ViewConfigSchema,
+  Ja as ViewEditor,
+  wt as and,
+  vt as between,
+  $e as defaultCircle,
+  me as defaultFill,
+  je as defaultLine,
+  Re as defaultSymbol,
+  We as detectGeometryStyleTypesFromQueryables,
+  Aa as detectGeometryTypeFromQueryables,
+  Ga as detectStyleTypeForCollection,
+  za as detectStyleTypesForCollection,
+  Nt as downloadCsv,
+  kt as eq,
+  Oe as expressionColors,
+  la as expressionEntries,
+  na as expressionPropertyName,
+  ra as expressionType,
+  qe as extractGeometryType,
+  Ct as featuresToCsv,
+  St as fetchCollectionDetail,
+  Dt as fetchCollections,
+  Tt as fetchConformance,
+  Ye as fetchDistinctValues,
+  Lt as fetchFeatureCount,
+  se as fetchFeatures,
+  Me as fetchQueryables,
+  It as fetchSpriteNames,
+  At as fetchSpriteUrlFromStyle,
+  Et as fetchTileJson,
+  lt as formatDMS,
+  nt as formatDecimal,
+  Pt as fromSimpleFilters,
+  Ft as fromStructuredFilters,
+  Ue as geometryTypeToStyleType,
+  ce as geometryTypeToStyleTypes,
+  ae as getColorFromPalette,
+  Mt as getCql2FilteredVectorTileUrl,
+  Ot as getFilteredVectorTileUrl,
+  pa as getPrimaryColor,
+  oa as getShapeForStyleType,
+  jt as getTileJsonUrl,
+  $t as getVectorTileUrl,
+  Rt as gt,
+  Bt as gte,
+  Va as humanizePropertyName,
+  qt as inList,
+  G as isExpression,
+  Ia as isGeometryProperty,
+  Ut as isNull,
+  Wt as like,
+  Gt as lt,
+  zt as lte,
+  Vt as neq,
+  _t as not,
+  Yt as or,
+  Xt as resolveAvailableIcons,
+  Ht as resolvePropertyDisplay,
+  Jt as resolveStyleWithSprites,
+  Xe as safeValidateMapConfig,
+  Kt as serializeCql2,
+  Qt as tAfter,
+  Zt as tBefore,
+  ei as tDuring,
+  Ea as toAvailableProperties,
+  ai as useCsvExport,
+  ti as useOgcCollectionDetail,
+  Fe as useOgcCollections,
+  ii as useOgcFeatures,
+  _e as useOgcQueryables,
+  ji as validateMapConfig
 };