@ogc-maps/storybook-components 0.5.2 → 0.5.3

package/dist/main.js

@@ -1,49 +1,49 @@
-import { B as Ke } from "./BasemapSwitcher-BW7lyZ2Y.js";
-import { C as Ye } from "./CollapsibleControl-VFUTWb_5.js";
-import { C as ea, f as aa, a as ia } from "./CoordinateDisplay-PxPmVjpm.js";
-import { E as pa } from "./ExportButton-CLsWoW4m.js";
-import { F as la } from "./FeatureDetailPanel-CkFpdEKW.js";
-import { F as ma } from "./FeatureTooltip-Db1LgLQV.js";
-import { L as oa } from "./LayerPanel-SCdJ8948.js";
-import { L as sa } from "./Legend-BMrkY-rw.js";
-import { S as ha } from "./SearchPanel-DCY01Wa-.js";
-import { jsxs as t, jsx as e, Fragment as E } from "react/jsx-runtime";
-import { useState as w, useEffect as J, useRef as ee } from "react";
-import { I as ue, j as be, i as me, K as ge } from "./cql2-Dhe6Ny6v.js";
-import { a as ga, b as xa, L as fa, e as ya, M as Na, f as va, c as wa, d as Ca, g as ka, h as Sa, k as La, l as Fa, m as Da, n as Ea, o as Ta, p as Ma, q as Ia, r as ja, s as Aa, t as Oa, u as Pa, v as $a, w as Ba, x as Ra, y as qa, z as Ua, A as Va, B as Ga, C as _a, D as Qa, E as za, F as Wa, G as Ja, H as Ha, J as Ka } from "./cql2-Dhe6Ny6v.js";
-import { s as xe } from "./index-Bw9lUiuL.js";
-import { B as Ya, C as Xa, a as ei, D as ai, F as ii, b as ti, c as pi, L as ri, d as li, e as ui, f as mi, g as ni, M as oi, N as ci, O as si, P as di, h as hi, S as bi, i as gi, j as xi, k as fi, T as yi, U as Ni, V as vi, v as wi } from "./index-Bw9lUiuL.js";
-import './style.css';function x({ label: a, error: i, required: p, htmlFor: r, children: m }) {
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
-    /* @__PURE__ */ t("label", { htmlFor: r, className: "mapui:text-xs mapui:font-medium mapui:text-gray-700", children: [
+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,
-      p && /* @__PURE__ */ e("span", { className: "mapui:ml-0.5 mapui:text-red-500", "aria-hidden": "true", children: "*" })
+      t && /* @__PURE__ */ e("span", { className: "mapui:ml-0.5 mapui:text-red-500", "aria-hidden": "true", children: "*" })
     ] }),
-    m,
+    n,
     i && /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-xs mapui:text-red-600", role: "alert", children: i })
   ] });
 }
-function A({ value: a, onChange: i, label: p }) {
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+function se({ value: a, onChange: i, label: t }) {
+  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
     /* @__PURE__ */ e(
       "input",
       {
         type: "color",
         value: a,
-        onChange: (r) => i(r.target.value),
-        "aria-label": p ?? "Color",
+        onChange: (l) => i(l.target.value),
+        "aria-label": t ?? "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 })
   ] });
 }
-function K({
+function H({
   open: a,
   title: i,
-  description: p,
-  onConfirm: r,
-  onCancel: m
+  description: t,
+  onConfirm: l,
+  onCancel: n
 }) {
   return a ? /* @__PURE__ */ e(
     "div",
@@ -53,7 +53,7 @@ function K({
       "aria-modal": "true",
       "aria-labelledby": "confirm-dialog-title",
       "aria-describedby": "confirm-dialog-description",
-      children: /* @__PURE__ */ t("div", { className: "mapui:w-full mapui:max-w-sm mapui:rounded-lg mapui:bg-white mapui:p-6 mapui:shadow-xl", children: [
+      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(
           "h2",
           {
@@ -67,15 +67,15 @@ function K({
           {
             id: "confirm-dialog-description",
             className: "mapui:m-0 mapui:mb-6 mapui:text-sm mapui:text-gray-600",
-            children: p
+            children: t
           }
         ),
-        /* @__PURE__ */ t("div", { className: "mapui:flex mapui:justify-end mapui:gap-2", children: [
+        /* @__PURE__ */ r("div", { className: "mapui:flex mapui:justify-end mapui:gap-2", children: [
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              onClick: m,
+              onClick: n,
               className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:text-gray-700 hover:mapui:bg-gray-50",
               children: "Cancel"
             }
@@ -84,7 +84,7 @@ function K({
             "button",
             {
               type: "button",
-              onClick: r,
+              onClick: l,
               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,134 +94,160 @@ function K({
     }
   ) : null;
 }
+function q({
+  title: a,
+  children: i,
+  defaultOpen: t = !1,
+  badge: l
+}) {
+  const [n, u] = w(t);
+  return /* @__PURE__ */ r("div", { className: "mapui:rounded mapui:border mapui:border-gray-200", children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: () => u((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__ */ e("span", { "aria-hidden": "true", children: n ? "▲" : "▼" })
+        ]
+      }
+    ),
+    n && /* @__PURE__ */ e("div", { className: "mapui:p-3", children: i })
+  ] });
+}
 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 ae({
+function ee({
   value: a,
   onChange: i,
-  onTestConnection: p,
-  testStatus: r = "idle",
-  testError: m
+  onTestConnection: t,
+  testStatus: l = "idle",
+  testError: n
 }) {
-  const u = (l) => i({ ...a, ...l });
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ e(x, { label: "ID", required: !0, children: /* @__PURE__ */ e(
+  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(
       "input",
       {
         type: "text",
         value: a.id,
-        onChange: (l) => u({ id: l.target.value }),
+        onChange: (p) => u({ id: p.target.value }),
         placeholder: "my-source",
         className: U
       }
     ) }),
-    /* @__PURE__ */ t(x, { label: "URL", required: !0, children: [
-      /* @__PURE__ */ t("div", { className: "mapui:flex mapui:gap-2", children: [
+    /* @__PURE__ */ r(N, { label: "URL", required: !0, children: [
+      /* @__PURE__ */ r("div", { className: "mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "url",
             value: a.url,
-            onChange: (l) => u({ url: l.target.value }),
+            onChange: (p) => u({ url: p.target.value }),
             placeholder: "https://example.com/ogcapi",
             className: `${U} mapui:flex-1`
           }
         ),
-        p && /* @__PURE__ */ e(
+        t && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: () => p(a.url),
-            disabled: r === "loading" || !a.url,
+            onClick: () => t(a.url),
+            disabled: l === "loading" || !a.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: r === "loading" ? "Testing…" : "Test Connection"
+            children: l === "loading" ? "Testing…" : "Test Connection"
           }
         )
       ] }),
-      r === "success" && /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-green-600", children: "Connection successful" }),
-      r === "error" && /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-red-600", children: m ?? "Connection failed" })
+      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" })
     ] }),
-    /* @__PURE__ */ e(x, { label: "Label", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(N, { label: "Label", children: /* @__PURE__ */ e(
       "input",
       {
         type: "text",
         value: a.label ?? "",
-        onChange: (l) => u({ label: l.target.value || void 0 }),
+        onChange: (p) => u({ label: p.target.value || void 0 }),
         placeholder: "My OGC API Source",
         className: U
       }
     ) }),
-    /* @__PURE__ */ e(x, { label: "Tile Matrix Set ID", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(N, { label: "Tile Matrix Set ID", children: /* @__PURE__ */ e(
       "input",
       {
         type: "text",
         value: a.tileMatrixSetId ?? "WebMercatorQuad",
-        onChange: (l) => u({ tileMatrixSetId: l.target.value || void 0 }),
+        onChange: (p) => u({ tileMatrixSetId: p.target.value || void 0 }),
         placeholder: "WebMercatorQuad",
         className: U
       }
     ) })
   ] });
 }
-const _ = () => ({
+const G = () => ({
   id: "",
   url: "",
   label: void 0,
   tileMatrixSetId: "WebMercatorQuad"
 });
-function Re({ sources: a, onChange: i }) {
-  const [p, r] = w(null), [m, u] = w(null), [l, n] = w(!1), [d, v] = w(_()), [g, b] = w({}), [C, o] = w({}), [h, y] = w(null), D = async (f, S) => {
-    b((L) => ({ ...L, [f]: "loading" }));
+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" }));
     try {
-      const L = await fetch(`${S}/conformance`);
-      L.ok ? b((k) => ({ ...k, [f]: "success" })) : (b((k) => ({ ...k, [f]: "error" })), o((k) => ({ ...k, [f]: `HTTP ${L.status}` })));
+      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) {
-      b((k) => ({ ...k, [f]: "error" })), o((k) => ({ ...k, [f]: L instanceof Error ? L.message : "Network error" }));
+      y((D) => ({ ...D, [f]: "error" })), c((D) => ({ ...D, [f]: L instanceof Error ? L.message : "Network error" }));
     }
-  }, c = () => {
-    m && (i(a.map((f) => f.id === p ? m : f)), r(null), u(null));
-  }, T = () => {
-    i([...a, d]), n(!1), v(_());
-  }, M = (f) => {
-    i(a.filter((S) => S.id !== f)), y(null);
+  }, 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);
   };
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
+  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(
         "button",
         {
           type: "button",
           onClick: () => {
-            n(!0), v(_());
+            o(!0), x(G());
           },
           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 && !l && /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No sources configured." }),
+    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(
       "li",
       {
         className: "mapui:rounded-lg mapui:border mapui:border-gray-200 mapui:bg-white mapui:p-3",
-        children: p === f.id ? /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
+        children: t === f.id ? /* @__PURE__ */ r("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
           /* @__PURE__ */ e(
-            ae,
+            ee,
             {
-              value: m ?? f,
+              value: n ?? f,
               onChange: u,
-              onTestConnection: (S) => D(`edit-${f.id}`, S),
-              testStatus: g[`edit-${f.id}`],
-              testError: C[`edit-${f.id}`]
+              onTestConnection: (T) => C(`edit-${f.id}`, T),
+              testStatus: d[`edit-${f.id}`],
+              testError: k[`edit-${f.id}`]
             }
           ),
-          /* @__PURE__ */ t("div", { className: "mapui:flex mapui:gap-2", children: [
+          /* @__PURE__ */ r("div", { className: "mapui:flex mapui:gap-2", children: [
             /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: c,
-                disabled: !(m != null && m.id) || !(m != null && m.url),
+                onClick: s,
+                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"
               }
@@ -231,29 +257,29 @@ function Re({ sources: a, onChange: i }) {
               {
                 type: "button",
                 onClick: () => {
-                  r(null), u(null);
+                  l(null), u(null);
                 },
                 className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
                 children: "Cancel"
               }
             )
           ] })
-        ] }) : /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-start mapui:justify-between mapui:gap-2", children: [
-          /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
+        ] }) : /* @__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__ */ t("span", { className: "mapui:text-xs mapui:text-gray-400", children: [
+            f.tileMatrixSetId && /* @__PURE__ */ r("span", { className: "mapui:text-xs mapui:text-gray-400", children: [
               "TMS: ",
               f.tileMatrixSetId
             ] })
           ] }),
-          /* @__PURE__ */ t("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+          /* @__PURE__ */ r("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
             /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  r(f.id), u(f);
+                  l(f.id), u(f);
                 },
                 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"
@@ -263,7 +289,7 @@ function Re({ sources: a, onChange: i }) {
               "button",
               {
                 type: "button",
-                onClick: () => y(f.id),
+                onClick: () => m(f.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"
               }
@@ -273,25 +299,25 @@ function Re({ sources: a, onChange: i }) {
       },
       f.id
     )) }),
-    l && /* @__PURE__ */ t("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+    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(
-        ae,
+        ee,
         {
-          value: d,
-          onChange: v,
-          onTestConnection: (f) => D("new", f),
-          testStatus: g.new,
-          testError: C.new
+          value: g,
+          onChange: x,
+          onTestConnection: (f) => C("new", f),
+          testStatus: d.new,
+          testError: k.new
         }
       ),
-      /* @__PURE__ */ t("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
+      /* @__PURE__ */ r("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: T,
-            disabled: !d.id || !d.url,
+            onClick: S,
+            disabled: !g.id || !g.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"
           }
@@ -300,7 +326,7 @@ function Re({ sources: a, onChange: i }) {
           "button",
           {
             type: "button",
-            onClick: () => n(!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"
           }
@@ -308,33 +334,33 @@ function Re({ sources: a, onChange: i }) {
       ] })
     ] }),
     /* @__PURE__ */ e(
-      K,
+      H,
       {
-        open: h !== null,
+        open: b !== null,
         title: "Remove Source",
         description: "Are you sure you want to remove this source? Any layers using it will be affected.",
-        onConfirm: () => h && M(h),
-        onCancel: () => y(null)
+        onConfirm: () => b && A(b),
+        onCancel: () => m(null)
       }
     )
   ] });
 }
-function qe({
+function aa({
   sourceUrl: a,
   selectedCollectionIds: i,
-  onSelect: p,
-  onDeselect: r
+  onSelect: t,
+  onDeselect: l
 }) {
-  const { collections: m, loading: u, error: l } = ue(a || null);
-  return u ? /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:py-4 mapui:text-sm mapui:text-gray-500", children: [
+  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" }),
     "Loading collections…"
-  ] }) : l ? /* @__PURE__ */ t("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3 mapui:text-sm mapui:text-red-700", children: [
+  ] }) : p ? /* @__PURE__ */ r("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3 mapui:text-sm mapui:text-red-700", children: [
     "Failed to load collections: ",
-    l.message
-  ] }) : m.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: m.map((n) => {
-    const d = i.includes(n.id);
-    return /* @__PURE__ */ t(
+    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(
       "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",
@@ -343,41 +369,227 @@ function qe({
             "input",
             {
               type: "checkbox",
-              id: `collection-${n.id}`,
-              checked: d,
-              onChange: () => d ? r(n.id) : p(n.id),
+              id: `collection-${o.id}`,
+              checked: g,
+              onChange: () => g ? l(o.id) : t(o.id),
               className: "mapui:mt-0.5 mapui:h-4 mapui:w-4 mapui:cursor-pointer mapui:accent-blue-600"
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             "label",
             {
-              htmlFor: `collection-${n.id}`,
+              htmlFor: `collection-${o.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: n.title ?? n.id }),
-                /* @__PURE__ */ e("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: n.id }),
-                n.description && /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-gray-400 mapui:line-clamp-2", children: n.description })
+                /* @__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 })
               ]
             }
           )
         ]
       },
-      n.id
+      o.id
     );
   }) });
 }
-const H = {
-  type: "fill",
-  paint: { "fill-color": "#4a90d9", "fill-opacity": 0.6, "fill-outline-color": "transparent" }
-}, ne = {
-  type: "line",
-  paint: { "line-color": "#2980b9", "line-width": 2, "line-opacity": 1 }
-}, oe = {
-  type: "circle",
-  paint: { "circle-color": "#e74c3c", "circle-radius": 5, "circle-opacity": 0.9 }
-}, R = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function fe({ style: a }) {
+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
+}) {
+  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(
+      "input",
+      {
+        type: "number",
+        step: 0.5,
+        value: t,
+        onChange: (n) => i([parseFloat(n.target.value) || 0, l]),
+        className: `${P} mapui:w-20`,
+        "aria-label": "X",
+        placeholder: "X"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "number",
+        step: 0.5,
+        value: l,
+        onChange: (n) => i([t, parseFloat(n.target.value) || 0]),
+        className: `${P} mapui:w-20`,
+        "aria-label": "Y",
+        placeholder: "Y"
+      }
+    )
+  ] });
+}
+function Ce({
+  value: a,
+  onChange: i
+}) {
+  const t = a ?? 1;
+  return /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        value: t,
+        onChange: (l) => i(parseFloat(l.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) })
+  ] });
+}
+function ae({
+  def: a,
+  value: i,
+  onChange: t
+}) {
+  var l, n;
+  switch (a.widget) {
+    case "color":
+      return /* @__PURE__ */ e(
+        se,
+        {
+          value: i ?? "#000000",
+          onChange: t,
+          label: a.label
+        }
+      );
+    case "opacity":
+      return /* @__PURE__ */ e(
+        Ce,
+        {
+          value: i,
+          onChange: t
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ e(
+        "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
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ e(
+        "input",
+        {
+          type: "checkbox",
+          checked: i ?? !1,
+          onChange: (u) => t(u.target.checked),
+          className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
+        }
+      );
+    case "enum":
+      return /* @__PURE__ */ e(
+        "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))
+        }
+      );
+    case "translate":
+      return /* @__PURE__ */ e(
+        ke,
+        {
+          value: i,
+          onChange: t
+        }
+      );
+    case "dasharray":
+    case "stringArray": {
+      const u = i, p = u ? u.join(", ") : "";
+      return /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: p,
+          onChange: (o) => {
+            const g = o.target.value.trim();
+            if (!g) {
+              t(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);
+            } else {
+              const x = g.split(",").map((d) => d.trim()).filter(Boolean);
+              t(x.length > 0 ? x : void 0);
+            }
+          },
+          placeholder: a.widget === "dasharray" ? "e.g. 2, 4" : "comma-separated",
+          className: P
+        }
+      );
+    }
+    case "text":
+      return /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: i ?? "",
+          onChange: (u) => t(u.target.value || void 0),
+          className: P
+        }
+      );
+    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(
+      "input",
+      {
+        type: "checkbox",
+        checked: n,
+        onChange: (u) => {
+          t(a.key, u.target.checked ? a.enableDefault : void 0);
+        },
+        className: "mapui:h-4 mapui:w-4 mapui:shrink-0 mapui:accent-blue-600"
+      }
+    ),
+    n && /* @__PURE__ */ e(
+      ae,
+      {
+        def: a,
+        value: i,
+        onChange: (u) => t(a.key, u)
+      }
+    )
+  ] }) }) : /* @__PURE__ */ e(N, { label: a.label, children: /* @__PURE__ */ e(ae, { def: a, value: i, onChange: (u) => t(a.key, u) }) });
+}
+function ie({
+  title: a,
+  properties: i,
+  values: t,
+  onChange: l,
+  defaultOpen: n = !1
+}) {
+  const u = i.filter(
+    (p) => p.enableDefault !== void 0 && t[p.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)) }) });
+}
+function De({ style: a }) {
   return a.type === "fill" ? /* @__PURE__ */ e(
     "div",
     {
@@ -406,7 +618,7 @@ function fe({ style: a }) {
         }
       )
     }
-  ) : /* @__PURE__ */ e(
+  ) : 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",
@@ -425,284 +637,260 @@ function fe({ style: a }) {
         }
       )
     }
+  ) : /* @__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(
+        "span",
+        {
+          style: {
+            color: a.paint["text-color"] ?? a.paint["icon-color"] ?? "#333333",
+            fontSize: "1.1rem",
+            fontWeight: 600
+          },
+          children: "A"
+        }
+      )
+    }
   );
 }
-function ye({ value: a, onChange: i, suggestedType: p }) {
-  var m;
-  const r = (u) => {
-    i(u === "fill" ? H : u === "line" ? ne : oe);
-  };
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    p && p !== a.type && /* @__PURE__ */ t("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__ */ t("span", { children: [
+const Te = [
+  // 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: "" },
+  // 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" },
+  // Sorting (layout)
+  { key: "fill-sort-key", label: "Sort Key", widget: "number", group: "Sorting", category: "layout", step: 1, enableDefault: 0 }
+], Le = [
+  // 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: "" },
+  // 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 },
+  // 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" },
+  // 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 },
+  // Sorting (layout)
+  { key: "line-sort-key", label: "Sort Key", widget: "number", group: "Sorting", category: "layout", step: 1, enableDefault: 0 }
+], Ie = [
+  // 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 },
+  { key: "circle-opacity", label: "Circle Opacity", widget: "opacity", group: "Appearance", category: "paint" },
+  { key: "circle-blur", label: "Blur", widget: "number", group: "Appearance", category: "paint", min: 0, step: 0.1, enableDefault: 0 },
+  // Stroke (paint)
+  { key: "circle-stroke-color", label: "Stroke Color", widget: "color", group: "Stroke", category: "paint", enableDefault: "#000000" },
+  { 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" },
+  // 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" },
+  // Sorting (layout)
+  { key: "circle-sort-key", label: "Sort Key", widget: "number", group: "Sorting", category: "layout", step: 1, enableDefault: 0 }
+], Ae = [
+  // 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 },
+  { key: "icon-halo-color", label: "Icon Halo Color", widget: "color", group: "Icon Appearance", category: "paint", enableDefault: "transparent" },
+  { key: "icon-halo-width", label: "Icon Halo Width", widget: "number", group: "Icon Appearance", category: "paint", min: 0, step: 0.5, enableDefault: 0 },
+  { key: "icon-halo-blur", label: "Icon Halo Blur", widget: "number", group: "Icon Appearance", category: "paint", min: 0, step: 0.5, enableDefault: 0 },
+  // Icon Transform (paint)
+  { 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-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 },
+  { key: "text-halo-blur", label: "Text Halo Blur", widget: "number", group: "Text Appearance", category: "paint", min: 0, step: 0.5, enableDefault: 0 },
+  // Text Transform (paint)
+  { 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-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] },
+  // Text Layout (layout)
+  { key: "text-field", label: "Text Field", widget: "text", group: "Text Layout", category: "layout", enableDefault: "{name}" },
+  { 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-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-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" },
+  // 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
+};
+function Fe(a) {
+  return Ee[a] ?? [];
+}
+function te(a) {
+  const i = {};
+  for (const t of a)
+    i[t.group] || (i[t.group] = []), i[t.group].push(t);
+  return i;
+}
+const _ = {
+  type: "fill",
+  paint: { "fill-color": "#4a90d9", "fill-opacity": 0.6, "fill-outline-color": "transparent" }
+}, de = {
+  type: "line",
+  paint: { "line-color": "#2980b9", "line-width": 2, "line-opacity": 1 }
+}, ge = {
+  type: "circle",
+  paint: { "circle-color": "#e74c3c", "circle-radius": 5, "circle-opacity": 0.9 }
+}, be = {
+  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 = {
+  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
+    });
+  }, 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: p }),
+        /* @__PURE__ */ e("strong", { children: t }),
         " style."
       ] }),
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: () => r(p),
+          onClick: () => l(t),
           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"
         }
       )
     ] }),
-    /* @__PURE__ */ e(x, { label: "Style Type", children: /* @__PURE__ */ t(
+    /* @__PURE__ */ e(N, { label: "Style Type", children: /* @__PURE__ */ e(
       "select",
       {
         value: a.type,
-        onChange: (u) => r(u.target.value),
-        className: R,
-        children: [
-          /* @__PURE__ */ e("option", { value: "fill", children: "Fill" }),
-          /* @__PURE__ */ e("option", { value: "line", children: "Line" }),
-          /* @__PURE__ */ e("option", { value: "circle", children: "Circle" })
-        ]
+        onChange: (m) => l(m.target.value),
+        className: Pe,
+        children: Object.keys(le).map((m) => /* @__PURE__ */ e("option", { value: m, children: le[m] }, m))
       }
     ) }),
-    /* @__PURE__ */ t("div", { className: "mapui:rounded mapui:border mapui:border-gray-100 mapui:p-2", children: [
+    /* @__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(fe, { style: a })
+      /* @__PURE__ */ e(De, { style: a })
     ] }),
-    a.type === "fill" && /* @__PURE__ */ t(E, { children: [
-      /* @__PURE__ */ e(x, { label: "Fill Color", children: /* @__PURE__ */ e(
-        A,
+    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,
         {
-          value: a.paint["fill-color"],
-          onChange: (u) => i({ ...a, paint: { ...a.paint, "fill-color": u } }),
-          label: "Fill color"
-        }
-      ) }),
-      /* @__PURE__ */ e(x, { label: "Fill Opacity", children: /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "range",
-            min: 0,
-            max: 1,
-            step: 0.01,
-            value: a.paint["fill-opacity"],
-            onChange: (u) => i({
-              ...a,
-              paint: { ...a.paint, "fill-opacity": parseFloat(u.target.value) }
-            }),
-            className: "mapui:flex-1"
-          }
-        ),
-        /* @__PURE__ */ e("span", { className: "mapui:w-8 mapui:text-right mapui:text-xs mapui:text-gray-600", children: a.paint["fill-opacity"].toFixed(2) })
-      ] }) }),
-      /* @__PURE__ */ e(x, { label: "Fill Outline Color (optional)", children: /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "checkbox",
-            checked: a.paint["fill-outline-color"] !== void 0,
-            onChange: (u) => i({
-              ...a,
-              paint: {
-                ...a.paint,
-                "fill-outline-color": u.target.checked ? "#000000" : void 0
-              }
-            }),
-            className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
-          }
-        ),
-        a.paint["fill-outline-color"] !== void 0 && /* @__PURE__ */ e(
-          A,
-          {
-            value: a.paint["fill-outline-color"],
-            onChange: (u) => i({
-              ...a,
-              paint: { ...a.paint, "fill-outline-color": u }
-            }),
-            label: "Outline color"
-          }
-        )
-      ] }) })
-    ] }),
-    a.type === "line" && /* @__PURE__ */ t(E, { children: [
-      /* @__PURE__ */ e(x, { label: "Line Color", children: /* @__PURE__ */ e(
-        A,
-        {
-          value: a.paint["line-color"],
-          onChange: (u) => i({ ...a, paint: { ...a.paint, "line-color": u } }),
-          label: "Line color"
-        }
-      ) }),
-      /* @__PURE__ */ e(x, { label: "Line Width", children: /* @__PURE__ */ e(
-        "input",
-        {
-          type: "number",
-          min: 0,
-          step: 0.5,
-          value: a.paint["line-width"],
-          onChange: (u) => i({
-            ...a,
-            paint: { ...a.paint, "line-width": parseFloat(u.target.value) || 0 }
-          }),
-          className: R
-        }
-      ) }),
-      /* @__PURE__ */ e(x, { label: "Line Opacity", children: /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "range",
-            min: 0,
-            max: 1,
-            step: 0.01,
-            value: a.paint["line-opacity"],
-            onChange: (u) => i({
-              ...a,
-              paint: { ...a.paint, "line-opacity": parseFloat(u.target.value) }
-            }),
-            className: "mapui:flex-1"
-          }
-        ),
-        /* @__PURE__ */ e("span", { className: "mapui:w-8 mapui:text-right mapui:text-xs mapui:text-gray-600", children: a.paint["line-opacity"].toFixed(2) })
-      ] }) }),
-      /* @__PURE__ */ e(x, { label: "Dash Array (optional, comma-separated)", children: /* @__PURE__ */ e(
-        "input",
-        {
-          type: "text",
-          value: ((m = a.paint["line-dasharray"]) == null ? void 0 : m.join(", ")) ?? "",
-          onChange: (u) => {
-            const l = u.target.value.trim(), n = l ? l.split(",").map((d) => parseFloat(d.trim())).filter((d) => !isNaN(d)) : void 0;
-            i({
-              ...a,
-              paint: { ...a.paint, "line-dasharray": n }
-            });
-          },
-          placeholder: "e.g. 2, 4",
-          className: R
-        }
-      ) })
+          title: m,
+          properties: x[m],
+          values: y,
+          onChange: n,
+          defaultOpen: C === 0
+        },
+        m
+      ))
     ] }),
-    a.type === "circle" && /* @__PURE__ */ t(E, { children: [
-      /* @__PURE__ */ e(x, { label: "Circle Color", children: /* @__PURE__ */ e(
-        A,
+    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,
         {
-          value: a.paint["circle-color"],
-          onChange: (u) => i({ ...a, paint: { ...a.paint, "circle-color": u } }),
-          label: "Circle color"
-        }
-      ) }),
-      /* @__PURE__ */ e(x, { label: "Circle Radius", children: /* @__PURE__ */ e(
-        "input",
-        {
-          type: "number",
-          min: 0,
-          step: 1,
-          value: a.paint["circle-radius"],
-          onChange: (u) => i({
-            ...a,
-            paint: {
-              ...a.paint,
-              "circle-radius": parseFloat(u.target.value) || 0
-            }
-          }),
-          className: R
-        }
-      ) }),
-      /* @__PURE__ */ e(x, { label: "Circle Opacity", children: /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "range",
-            min: 0,
-            max: 1,
-            step: 0.01,
-            value: a.paint["circle-opacity"],
-            onChange: (u) => i({
-              ...a,
-              paint: {
-                ...a.paint,
-                "circle-opacity": parseFloat(u.target.value)
-              }
-            }),
-            className: "mapui:flex-1"
-          }
-        ),
-        /* @__PURE__ */ e("span", { className: "mapui:w-8 mapui:text-right mapui:text-xs mapui:text-gray-600", children: a.paint["circle-opacity"].toFixed(2) })
-      ] }) }),
-      /* @__PURE__ */ e(x, { label: "Stroke Color (optional)", children: /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "checkbox",
-            checked: a.paint["circle-stroke-color"] !== void 0,
-            onChange: (u) => i({
-              ...a,
-              paint: {
-                ...a.paint,
-                "circle-stroke-color": u.target.checked ? "#000000" : void 0,
-                "circle-stroke-width": u.target.checked ? 1 : void 0
-              }
-            }),
-            className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
-          }
-        ),
-        a.paint["circle-stroke-color"] !== void 0 && /* @__PURE__ */ e(
-          A,
-          {
-            value: a.paint["circle-stroke-color"],
-            onChange: (u) => i({
-              ...a,
-              paint: { ...a.paint, "circle-stroke-color": u }
-            }),
-            label: "Stroke color"
-          }
-        )
-      ] }) }),
-      a.paint["circle-stroke-color"] !== void 0 && /* @__PURE__ */ e(x, { label: "Stroke Width", children: /* @__PURE__ */ e(
-        "input",
-        {
-          type: "number",
-          min: 0,
-          step: 1,
-          value: a.paint["circle-stroke-width"] ?? 1,
-          onChange: (u) => i({
-            ...a,
-            paint: {
-              ...a.paint,
-              "circle-stroke-width": parseFloat(u.target.value) || 0
-            }
-          }),
-          className: R
-        }
-      ) })
+          title: m,
+          properties: d[m],
+          values: k,
+          onChange: u,
+          defaultOpen: !1
+        },
+        m
+      ))
     ] })
   ] });
 }
-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 Ne({ value: a, onChange: i }) {
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-    /* @__PURE__ */ e(x, { label: "Label", children: /* @__PURE__ */ e(
+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(
       "input",
       {
         type: "text",
         value: a.label,
-        onChange: (p) => i({ ...a, label: p.target.value }),
+        onChange: (t) => i({ ...a, label: t.target.value }),
         placeholder: "Legend entry label",
-        className: ie
+        className: re
       }
     ) }),
-    /* @__PURE__ */ e(x, { label: "Color", children: /* @__PURE__ */ e(
-      A,
+    /* @__PURE__ */ e(N, { label: "Color", children: /* @__PURE__ */ e(
+      se,
       {
         value: a.color,
-        onChange: (p) => i({ ...a, color: p }),
+        onChange: (t) => i({ ...a, color: t }),
         label: "Entry color"
       }
     ) }),
-    /* @__PURE__ */ e(x, { label: "Shape", children: /* @__PURE__ */ t(
+    /* @__PURE__ */ e(N, { label: "Shape", children: /* @__PURE__ */ r(
       "select",
       {
         value: a.shape ?? "square",
-        onChange: (p) => i({ ...a, shape: p.target.value }),
-        className: ie,
+        onChange: (t) => i({ ...a, shape: t.target.value }),
+        className: re,
         children: [
           /* @__PURE__ */ e("option", { value: "square", children: "Square" }),
           /* @__PURE__ */ e("option", { value: "circle", children: "Circle" }),
@@ -712,70 +900,70 @@ function Ne({ value: a, onChange: i }) {
     ) })
   ] });
 }
-const te = () => ({ label: "", color: "#4a90d9", shape: "square" });
-function ve({ value: a, onChange: i }) {
-  const p = (a == null ? void 0 : a.entries) ?? [], r = () => {
-    i({ entries: [...p, te()] });
-  }, m = (n, d) => {
-    const v = p.map((g, b) => b === n ? d : g);
-    i({ entries: v });
-  }, u = (n) => {
-    const d = p.filter((v, g) => g !== n);
-    i(d.length > 0 ? { entries: d } : void 0);
-  }, l = (n) => {
-    i(n ? { entries: [te()] } : void 0);
+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);
   };
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+  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(
         "input",
         {
           type: "checkbox",
           id: "legend-enabled",
           checked: a !== void 0,
-          onChange: (n) => l(n.target.checked),
+          onChange: (o) => p(o.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" })
     ] }),
-    a !== void 0 && /* @__PURE__ */ t(E, { children: [
-      /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: p.map((n, d) => /* @__PURE__ */ t(
+    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(
         "li",
         {
           className: "mapui:rounded mapui:border mapui:border-gray-200 mapui:p-3",
           children: [
-            /* @__PURE__ */ t("div", { className: "mapui:mb-2 mapui:flex mapui:items-center mapui:justify-between", children: [
-              /* @__PURE__ */ t("span", { className: "mapui:text-xs mapui:font-medium mapui:text-gray-600", 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: [
                 "Entry ",
-                d + 1
+                g + 1
               ] }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(d),
+                  onClick: () => u(g),
                   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(
-              Ne,
+              Me,
               {
-                value: n,
-                onChange: (v) => m(d, v)
+                value: o,
+                onChange: (x) => n(g, x)
               }
             )
           ]
         },
-        d
+        g
       )) }),
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: r,
+          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"
         }
@@ -783,47 +971,47 @@ function ve({ value: a, onChange: i }) {
     ] })
   ] });
 }
-function pe({
+function ue({
   options: a,
   onChange: i,
-  placeholder: p,
-  className: r
+  placeholder: t,
+  className: l
 }) {
-  const [m, u] = w(() => (a == null ? void 0 : a.join(", ")) ?? "");
+  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(
     "input",
     {
       type: "text",
-      value: m,
-      onChange: (n) => u(n.target.value),
+      value: n,
+      onChange: (o) => u(o.target.value),
       onBlur: () => {
-        const n = m.trim(), d = n ? n.split(",").map((v) => v.trim()).filter(Boolean) : void 0;
-        i(d), u((d == null ? void 0 : d.join(", ")) ?? "");
+        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(", ")) ?? "");
       },
-      placeholder: p,
-      className: r
+      placeholder: t,
+      className: l
     }
   );
 }
-const F = "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", we = {
+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 = {
   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 Ce({ value: a, onChange: i, availableProperties: p }) {
-  const r = (l) => {
-    i({ ...we[l], property: a.property, label: a.label });
-  }, m = (l) => i({ ...a, ...l }), u = p && p.length > 0;
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ e(x, { label: "Field Type", children: /* @__PURE__ */ t(
+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(
       "select",
       {
         value: a.type,
-        onChange: (l) => r(l.target.value),
-        className: F,
+        onChange: (p) => l(p.target.value),
+        className: I,
         children: [
           /* @__PURE__ */ e("option", { value: "text", children: "Text" }),
           /* @__PURE__ */ e("option", { value: "number", children: "Number" }),
@@ -832,15 +1020,15 @@ function Ce({ value: a, onChange: i, availableProperties: p }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ e(x, { label: "Property", required: !0, children: u ? /* @__PURE__ */ t(
+    /* @__PURE__ */ e(N, { label: "Property", required: !0, children: u ? /* @__PURE__ */ r(
       "select",
       {
         value: a.property,
-        onChange: (l) => m({ property: l.target.value }),
-        className: F,
+        onChange: (p) => n({ property: p.target.value }),
+        className: I,
         children: [
           /* @__PURE__ */ e("option", { value: "", children: "Select a property…" }),
-          p.map((l) => /* @__PURE__ */ e("option", { value: l.name, children: l.title ?? l.name }, l.name))
+          t.map((p) => /* @__PURE__ */ e("option", { value: p.name, children: p.title ?? p.name }, p.name))
         ]
       }
     ) : /* @__PURE__ */ e(
@@ -848,93 +1036,93 @@ function Ce({ value: a, onChange: i, availableProperties: p }) {
       {
         type: "text",
         value: a.property,
-        onChange: (l) => m({ property: l.target.value }),
+        onChange: (p) => n({ property: p.target.value }),
         placeholder: "e.g. name",
-        className: F
+        className: I
       }
     ) }),
-    /* @__PURE__ */ e(x, { label: "Label", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(N, { label: "Label", children: /* @__PURE__ */ e(
       "input",
       {
         type: "text",
         value: a.label,
-        onChange: (l) => m({ label: l.target.value }),
+        onChange: (p) => n({ label: p.target.value }),
         placeholder: "Display label",
-        className: F
+        className: I
       }
     ) }),
-    /* @__PURE__ */ e(x, { label: "Placeholder", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(N, { label: "Placeholder", children: /* @__PURE__ */ e(
       "input",
       {
         type: "text",
         value: a.placeholder ?? "",
-        onChange: (l) => m({ placeholder: l.target.value || void 0 }),
+        onChange: (p) => n({ placeholder: p.target.value || void 0 }),
         placeholder: "Input placeholder text",
-        className: F
+        className: I
       }
     ) }),
-    a.type === "text" && /* @__PURE__ */ t(E, { children: [
-      /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+    a.type === "text" && /* @__PURE__ */ r(O, { children: [
+      /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "checkbox",
             id: "text-autocomplete",
             checked: a.autocomplete ?? !1,
-            onChange: (l) => i({ ...a, autocomplete: l.target.checked }),
+            onChange: (p) => i({ ...a, 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__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "checkbox",
             id: "text-prefetch",
             checked: a.prefetch ?? !1,
-            onChange: (l) => i({ ...a, prefetch: l.target.checked }),
+            onChange: (p) => i({ ...a, 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__ */ e(x, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ e(
-        pe,
+      /* @__PURE__ */ e(N, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ e(
+        ue,
         {
           options: a.options,
-          onChange: (l) => i({ ...a, options: l }),
+          onChange: (p) => i({ ...a, options: p }),
           placeholder: "option1, option2",
-          className: F
+          className: I
         }
       ) })
     ] }),
-    a.type === "number" && /* @__PURE__ */ t(E, { children: [
-      /* @__PURE__ */ e(x, { label: "Input Mode", children: /* @__PURE__ */ t(
+    a.type === "number" && /* @__PURE__ */ r(O, { children: [
+      /* @__PURE__ */ e(N, { label: "Input Mode", children: /* @__PURE__ */ r(
         "select",
         {
           value: a.inputMode ?? "input",
-          onChange: (l) => i({
+          onChange: (p) => i({
             ...a,
-            inputMode: l.target.value
+            inputMode: p.target.value
           }),
-          className: F,
+          className: I,
           children: [
             /* @__PURE__ */ e("option", { value: "input", children: "Input" }),
             /* @__PURE__ */ e("option", { value: "slider", children: "Slider" })
           ]
         }
       ) }),
-      /* @__PURE__ */ e(x, { label: "Operator", children: /* @__PURE__ */ t(
+      /* @__PURE__ */ e(N, { label: "Operator", children: /* @__PURE__ */ r(
         "select",
         {
           value: a.operator ?? "eq",
-          onChange: (l) => i({
+          onChange: (p) => i({
             ...a,
-            operator: l.target.value
+            operator: p.target.value
           }),
-          className: F,
+          className: I,
           children: [
             /* @__PURE__ */ e("option", { value: "eq", children: "Equal (=)" }),
             /* @__PURE__ */ e("option", { value: "gt", children: "Greater Than (>)" }),
@@ -945,118 +1133,118 @@ function Ce({ value: a, onChange: i, availableProperties: p }) {
           ]
         }
       ) }),
-      /* @__PURE__ */ t("div", { className: "mapui:grid mapui:grid-cols-3 mapui:gap-2", children: [
-        /* @__PURE__ */ e(x, { label: "Min", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ r("div", { className: "mapui:grid mapui:grid-cols-3 mapui:gap-2", children: [
+        /* @__PURE__ */ e(N, { label: "Min", children: /* @__PURE__ */ e(
           "input",
           {
             type: "number",
             value: a.min ?? "",
-            onChange: (l) => i({
+            onChange: (p) => i({
               ...a,
-              min: l.target.value ? parseFloat(l.target.value) : void 0
+              min: p.target.value ? parseFloat(p.target.value) : void 0
             }),
-            className: F
+            className: I
           }
         ) }),
-        /* @__PURE__ */ e(x, { label: "Max", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(N, { label: "Max", children: /* @__PURE__ */ e(
           "input",
           {
             type: "number",
             value: a.max ?? "",
-            onChange: (l) => i({
+            onChange: (p) => i({
               ...a,
-              max: l.target.value ? parseFloat(l.target.value) : void 0
+              max: p.target.value ? parseFloat(p.target.value) : void 0
             }),
-            className: F
+            className: I
           }
         ) }),
-        /* @__PURE__ */ e(x, { label: "Step", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(N, { label: "Step", children: /* @__PURE__ */ e(
           "input",
           {
             type: "number",
             value: a.step ?? "",
-            onChange: (l) => i({
+            onChange: (p) => i({
               ...a,
-              step: l.target.value ? parseFloat(l.target.value) : void 0
+              step: p.target.value ? parseFloat(p.target.value) : void 0
             }),
-            className: F
+            className: I
           }
         ) })
       ] })
     ] }),
-    a.type === "datetime" && /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+    a.type === "datetime" && /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "checkbox",
           id: "datetime-range",
           checked: a.range ?? !1,
-          onChange: (l) => i({ ...a, range: l.target.checked }),
+          onChange: (p) => i({ ...a, 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" })
     ] }),
-    a.type === "select" && /* @__PURE__ */ t(E, { children: [
-      /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+    a.type === "select" && /* @__PURE__ */ r(O, { children: [
+      /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "checkbox",
             id: "select-prefetch",
             checked: a.prefetch ?? !1,
-            onChange: (l) => i({ ...a, prefetch: l.target.checked }),
+            onChange: (p) => i({ ...a, 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__ */ e(x, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ e(
-        pe,
+      /* @__PURE__ */ e(N, { label: "Static Options (comma-separated)", children: /* @__PURE__ */ e(
+        ue,
         {
           options: a.options,
-          onChange: (l) => i({ ...a, options: l }),
+          onChange: (p) => i({ ...a, options: p }),
           placeholder: "option1, option2",
-          className: F
+          className: I
         }
       ) })
     ] })
   ] });
 }
-const ke = () => ({
+const $e = () => ({
   type: "text",
   property: "",
   label: "",
   autocomplete: !1
 });
-function Se({ fields: a, onChange: i, availableProperties: p }) {
-  const [r, m] = w(null), u = () => {
-    const g = [...a, ke()];
-    i(g), m(g.length - 1);
-  }, l = (g, b) => {
-    i(a.map((C, o) => o === g ? b : C));
-  }, n = (g) => {
-    i(a.filter((b, C) => C !== g)), m(null);
-  }, d = (g) => {
-    if (g === 0) return;
-    const b = [...a];
-    [b[g - 1], b[g]] = [b[g], b[g - 1]], i(b), m(g - 1);
-  }, v = (g) => {
-    if (g === a.length - 1) return;
-    const b = [...a];
-    [b[g], b[g + 1]] = [b[g + 1], b[g]], i(b), m(g + 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) => {
+    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);
   };
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
+  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((g, b) => /* @__PURE__ */ t("li", { className: "mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white", children: [
-      /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-1 mapui:px-3 mapui:py-2", children: [
-        /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
+    /* @__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(
             "button",
             {
               type: "button",
-              onClick: () => d(b),
-              disabled: b === 0,
+              onClick: () => g(y),
+              disabled: y === 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: "▲"
@@ -1066,23 +1254,23 @@ function Se({ fields: a, onChange: i, availableProperties: p }) {
             "button",
             {
               type: "button",
-              onClick: () => v(b),
-              disabled: b === a.length - 1,
+              onClick: () => x(y),
+              disabled: y === a.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__ */ t(
+        /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            onClick: () => m(r === b ? null : b),
+            onClick: () => n(l === y ? null : y),
             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: g.type }),
-              g.label || g.property || "Untitled field"
+              /* @__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 }),
+              d.label || d.property || "Untitled field"
             ]
           }
         ),
@@ -1090,22 +1278,22 @@ function Se({ fields: a, onChange: i, availableProperties: p }) {
           "button",
           {
             type: "button",
-            onClick: () => n(b),
+            onClick: () => o(y),
             "aria-label": "Remove field",
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-0.5 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
             children: "Remove"
           }
         )
       ] }),
-      r === b && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(
-        Ce,
+      l === y && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(
+        Re,
         {
-          value: g,
-          onChange: (C) => l(b, C),
-          availableProperties: p
+          value: d,
+          onChange: (k) => p(y, k),
+          availableProperties: t
         }
       ) })
-    ] }, b)) }),
+    ] }, y)) }),
     /* @__PURE__ */ e(
       "button",
       {
@@ -1117,76 +1305,76 @@ function Se({ fields: a, onChange: i, availableProperties: p }) {
     )
   ] });
 }
-function Le(a) {
-  return Object.entries(a).map(([i, p]) => ({
+function Ue(a) {
+  return Object.entries(a).map(([i, t]) => ({
     key: i,
-    label: p.label ?? "",
-    visible: p.visible ?? !0
+    label: t.label ?? "",
+    visible: t.visible ?? !0
   }));
 }
-function Fe(a) {
+function Ve(a) {
   const i = {};
-  for (const p of a)
-    i[p.key] = {
-      visible: p.visible,
-      ...p.label ? { label: p.label } : {}
+  for (const t of a)
+    i[t.key] = {
+      visible: t.visible,
+      ...t.label ? { label: t.label } : {}
     };
   return i;
 }
-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 De({ value: a, onChange: i, availableProperties: p }) {
-  const r = Le(a), m = p && p.length > 0, u = (o) => i(Fe(o)), l = () => {
-    u([...r, { key: "", label: "", visible: !0 }]);
-  }, n = (o) => {
-    u(r.filter((h, y) => y !== o));
-  }, d = (o, h) => {
-    u(r.map((y, D) => D === o ? { ...y, ...h } : y));
-  }, v = (o, h) => {
-    const y = p == null ? void 0 : p.find((c) => c.name === h), D = (y == null ? void 0 : y.title) ?? r[o].label;
-    u(r.map((c, T) => T === o ? { ...c, key: h, label: D } : c));
-  }, g = (o) => {
-    if (o === 0) return;
-    const h = [...r];
-    [h[o - 1], h[o]] = [h[o], h[o - 1]], u(h);
-  }, b = (o) => {
-    if (o === r.length - 1) return;
-    const h = [...r];
-    [h[o], h[o + 1]] = [h[o + 1], h[o]], u(h);
-  }, C = () => {
-    if (!p) return;
-    const o = p.map((h) => ({
-      key: h.name,
-      label: h.title ?? "",
+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 ?? "",
       visible: !0
     }));
-    u(o);
+    u(c);
   };
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
-    r.length === 0 ? /* @__PURE__ */ t(E, { children: [
+  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." }),
-      m && /* @__PURE__ */ e(
+      n && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: C,
+          onClick: k,
           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__ */ t(E, { children: [
-      /* @__PURE__ */ t("div", { className: "mapui:grid mapui:items-center mapui:gap-2 mapui:px-8", style: { gridTemplateColumns: "1fr 1fr auto" }, children: [
-        /* @__PURE__ */ e(x, { label: "Property Key", children: /* @__PURE__ */ e("span", {}) }),
-        /* @__PURE__ */ e(x, { label: "Display Label", children: /* @__PURE__ */ e("span", {}) }),
+    ] }) : /* @__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__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1.5 mapui:p-0", children: r.map((o, h) => /* @__PURE__ */ t("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__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
+      /* @__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(
             "button",
             {
               type: "button",
-              onClick: () => g(h),
-              disabled: h === 0,
+              onClick: () => d(b),
+              disabled: b === 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: "▲"
@@ -1196,55 +1384,55 @@ function De({ value: a, onChange: i, availableProperties: p }) {
             "button",
             {
               type: "button",
-              onClick: () => b(h),
-              disabled: h === r.length - 1,
+              onClick: () => y(b),
+              disabled: b === l.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__ */ t("div", { className: "mapui:grid mapui:flex-1 mapui:items-center mapui:gap-2", style: { gridTemplateColumns: "1fr 1fr auto auto" }, children: [
-          m ? /* @__PURE__ */ t(
+        /* @__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(
             "select",
             {
-              value: o.key,
-              onChange: (y) => v(h, y.target.value),
+              value: c.key,
+              onChange: (m) => x(b, m.target.value),
               "aria-label": "Property key",
-              className: Q,
+              className: z,
               children: [
                 /* @__PURE__ */ e("option", { value: "", children: "Select a property…" }),
-                p.map((y) => /* @__PURE__ */ e("option", { value: y.name, children: y.title ?? y.name }, y.name))
+                t.map((m) => /* @__PURE__ */ e("option", { value: m.name, children: m.title ?? m.name }, m.name))
               ]
             }
           ) : /* @__PURE__ */ e(
             "input",
             {
               type: "text",
-              value: o.key,
-              onChange: (y) => d(h, { key: y.target.value }),
+              value: c.key,
+              onChange: (m) => g(b, { key: m.target.value }),
               placeholder: "property_name",
               "aria-label": "Property key",
-              className: Q
+              className: z
             }
           ),
           /* @__PURE__ */ e(
             "input",
             {
               type: "text",
-              value: o.label,
-              onChange: (y) => d(h, { label: y.target.value }),
+              value: c.label,
+              onChange: (m) => g(b, { label: m.target.value }),
               placeholder: "Friendly name",
               "aria-label": "Display label",
-              className: Q
+              className: z
             }
           ),
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              checked: o.visible,
-              onChange: (y) => d(h, { visible: y.target.checked }),
+              checked: c.visible,
+              onChange: (m) => g(b, { visible: m.target.checked }),
               "aria-label": "Visible",
               className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
             }
@@ -1253,182 +1441,161 @@ function De({ value: a, onChange: i, availableProperties: p }) {
             "button",
             {
               type: "button",
-              onClick: () => n(h),
+              onClick: () => o(b),
               "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"
             }
           )
         ] })
-      ] }, h)) })
+      ] }, b)) })
     ] }),
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        onClick: l,
+        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 Property"
       }
     )
   ] });
 }
-const ce = /geojson\.org\/schema\/(\w+)\.json/;
-function Ee(a) {
-  return !!a.$ref && ce.test(a.$ref);
+const he = /geojson\.org\/schema\/(\w+)\.json/;
+function ze(a) {
+  return !!a.$ref && he.test(a.$ref);
 }
-function Te(a) {
-  const i = ce.exec(a);
+function We(a) {
+  const i = he.exec(a);
   return i ? i[1] : null;
 }
-function Z(a) {
+function X(a) {
   const i = a.toLowerCase();
   return i.includes("polygon") ? "fill" : i.includes("linestring") ? "line" : i.includes("point") ? "circle" : null;
 }
-function se(a) {
+function ye(a) {
   for (const i of Object.values(a.properties))
     if (i.$ref) {
-      const p = Te(i.$ref);
-      if (p) return Z(p);
+      const t = We(i.$ref);
+      if (t) return X(t);
     }
   return null;
 }
-function Me(a) {
-  return Object.entries(a.properties).filter(([, i]) => !Ee(i)).map(([i, p]) => ({
+function Ye(a) {
+  return Object.entries(a.properties).filter(([, i]) => !ze(i)).map(([i, t]) => ({
     name: i,
-    title: p.title,
-    type: p.type,
-    format: p.format,
-    enum: p.enum,
-    minimum: p.minimum,
-    maximum: p.maximum
+    title: t.title,
+    type: t.type,
+    format: t.format,
+    enum: t.enum,
+    minimum: t.minimum,
+    maximum: t.maximum
   }));
 }
-async function Ue(a, i) {
-  var p, r;
+async function ia(a, i) {
+  var t, l;
   try {
-    const m = await be(a, i), u = se(m);
+    const n = await Ne(a, i), u = ye(n);
     if (u) return u;
   } catch {
   }
   try {
-    const u = (r = (p = (await me(a, i, { limit: 1 })).features[0]) == null ? void 0 : p.geometry) == null ? void 0 : r.type;
-    if (typeof u == "string") return Z(u);
+    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);
   } catch {
   }
   return null;
 }
-function Ve(a) {
+function ta(a) {
   return a.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (i) => i.toUpperCase());
 }
-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 V({
-  title: a,
-  children: i
-}) {
-  const [p, r] = w(!1);
-  return /* @__PURE__ */ t("div", { className: "mapui:rounded mapui:border mapui:border-gray-200", children: [
-    /* @__PURE__ */ t(
-      "button",
-      {
-        type: "button",
-        onClick: () => r((m) => !m),
-        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__ */ e("span", { children: a }),
-          /* @__PURE__ */ e("span", { "aria-hidden": "true", children: p ? "▲" : "▼" })
-        ]
-      }
-    ),
-    p && /* @__PURE__ */ e("div", { className: "mapui:p-3", children: i })
-  ] });
-}
-function re({ value: a, onChange: i, availableSources: p }) {
-  var D;
-  const r = (c) => i({ ...a, ...c }), m = ee(a);
-  m.current = a;
-  const u = ee(i);
+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 l = p.find((c) => c.id === a.sourceId), n = (l == null ? void 0 : l.url) ?? null, d = a.collection || null, { collections: v, loading: g } = ue(n), { queryables: b, loading: C } = ge(n, d), o = b ? Me(b) : [], [h, y] = w(
+  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 (!b) {
-      y(null);
+    if (!y) {
+      m(null);
       return;
     }
-    const c = (f) => {
-      if (y(f), f && !m.current.style) {
-        const S = f === "fill" ? H : f === "line" ? ne : oe;
-        u.current({ ...m.current, style: S });
+    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 });
       }
-    }, T = se(b);
-    if (T) {
-      c(T);
+    }, S = ye(y);
+    if (S) {
+      s(S);
       return;
     }
-    if (!n || !d) {
-      y(null);
+    if (!o || !g) {
+      m(null);
       return;
     }
-    let M = !1;
-    return me(n, d, { limit: 1 }).then((f) => {
-      var L, k;
-      if (M) return;
-      const S = (k = (L = f.features[0]) == null ? void 0 : L.geometry) == null ? void 0 : k.type;
-      c(typeof S == "string" ? Z(S) : null);
+    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);
     }).catch(() => {
-      M || y(null);
+      A || m(null);
     }), () => {
-      M = !0;
+      A = !0;
     };
-  }, [b, n, d]), J(() => {
-    y(null);
-  }, [n, d]), /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ t("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: [
-      /* @__PURE__ */ e(x, { label: "Layer ID", required: !0, children: /* @__PURE__ */ e(
+  }, [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(
         "input",
         {
           type: "text",
           value: a.id,
-          onChange: (c) => r({ id: c.target.value }),
+          onChange: (s) => l({ id: s.target.value }),
           placeholder: "my-layer",
-          className: q
+          className: $
         }
       ) }),
-      /* @__PURE__ */ e(x, { label: "Label", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(N, { label: "Label", children: /* @__PURE__ */ e(
         "input",
         {
           type: "text",
           value: a.label,
-          onChange: (c) => r({ label: c.target.value }),
+          onChange: (s) => l({ label: s.target.value }),
           placeholder: "My Layer",
-          className: q
+          className: $
         }
       ) })
     ] }),
-    /* @__PURE__ */ e(x, { label: "Source", required: !0, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ e(N, { label: "Source", required: !0, children: /* @__PURE__ */ r(
       "select",
       {
         value: a.sourceId,
-        onChange: (c) => r({ sourceId: c.target.value }),
-        className: q,
+        onChange: (s) => l({ sourceId: s.target.value }),
+        className: $,
         children: [
           /* @__PURE__ */ e("option", { value: "", children: "Select a source…" }),
-          p.map((c) => /* @__PURE__ */ e("option", { value: c.id, children: c.label ?? c.id }, c.id))
+          t.map((s) => /* @__PURE__ */ e("option", { value: s.id, children: s.label ?? s.id }, s.id))
         ]
       }
     ) }),
-    /* @__PURE__ */ t(x, { label: "Collection", required: !0, children: [
-      v.length > 0 ? /* @__PURE__ */ t(
+    /* @__PURE__ */ r(N, { label: "Collection", required: !0, children: [
+      x.length > 0 ? /* @__PURE__ */ r(
         "select",
         {
           value: a.collection,
-          onChange: (c) => r({ collection: c.target.value }),
-          className: q,
+          onChange: (s) => l({ collection: s.target.value }),
+          className: $,
           children: [
             /* @__PURE__ */ e("option", { value: "", children: "Select a collection…" }),
-            v.map((c) => /* @__PURE__ */ e("option", { value: c.id, children: c.title ?? c.id }, c.id))
+            x.map((s) => /* @__PURE__ */ e("option", { value: s.id, children: s.title ?? s.id }, s.id))
           ]
         }
       ) : /* @__PURE__ */ e(
@@ -1436,74 +1603,74 @@ function re({ value: a, onChange: i, availableSources: p }) {
         {
           type: "text",
           value: a.collection,
-          onChange: (c) => r({ collection: c.target.value }),
-          placeholder: g ? "Loading collections…" : "collection-id",
-          className: q
+          onChange: (s) => l({ collection: s.target.value }),
+          placeholder: d ? "Loading collections…" : "collection-id",
+          className: $
         }
       ),
-      C && /* @__PURE__ */ e("span", { className: "mapui:mt-0.5 mapui:block mapui:text-xs mapui:text-gray-400", children: "Loading properties…" })
+      k && /* @__PURE__ */ e("span", { className: "mapui:mt-0.5 mapui:block mapui:text-xs mapui:text-gray-400", children: "Loading properties…" })
     ] }),
-    /* @__PURE__ */ e(x, { label: "Data Mode", children: /* @__PURE__ */ e("div", { className: "mapui:flex mapui:gap-4", children: ["vector-tiles", "geojson"].map((c) => /* @__PURE__ */ t("label", { className: "mapui:flex mapui:cursor-pointer mapui:items-center mapui:gap-1.5", children: [
+    /* @__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(
         "input",
         {
           type: "radio",
           name: `data-mode-${a.id}`,
-          value: c,
-          checked: a.dataMode === c,
-          onChange: () => r({ dataMode: c }),
+          value: s,
+          checked: a.dataMode === s,
+          onChange: () => l({ dataMode: s }),
           className: "mapui:accent-blue-600"
         }
       ),
-      /* @__PURE__ */ e("span", { className: "mapui:text-sm mapui:text-gray-700", children: c })
-    ] }, c)) }) }),
-    /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      /* @__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(
         "input",
         {
           type: "checkbox",
           id: "layer-visible",
           checked: a.visible,
-          onChange: (c) => r({ visible: c.target.checked }),
+          onChange: (s) => l({ visible: s.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__ */ e(V, { title: "Style", children: /* @__PURE__ */ e(
-      ye,
+    /* @__PURE__ */ e(q, { title: "Style", children: /* @__PURE__ */ e(
+      Oe,
       {
-        value: a.style ?? H,
-        onChange: (c) => r({ style: c }),
-        suggestedType: h
+        value: a.style ?? _,
+        onChange: (s) => l({ style: s }),
+        suggestedType: b
       }
     ) }),
-    /* @__PURE__ */ e(V, { title: "Legend", children: /* @__PURE__ */ e(
-      ve,
+    /* @__PURE__ */ e(q, { title: "Legend", children: /* @__PURE__ */ e(
+      je,
       {
         value: a.legend,
-        onChange: (c) => r({ legend: c })
+        onChange: (s) => l({ legend: s })
       }
     ) }),
-    /* @__PURE__ */ e(V, { title: "Search Fields", children: /* @__PURE__ */ e(
-      Se,
+    /* @__PURE__ */ e(q, { title: "Search Fields", children: /* @__PURE__ */ e(
+      qe,
       {
-        fields: ((D = a.search) == null ? void 0 : D.fields) ?? [],
-        onChange: (c) => r({ search: c.length > 0 ? { fields: c } : void 0 }),
-        availableProperties: o
+        fields: ((C = a.search) == null ? void 0 : C.fields) ?? [],
+        onChange: (s) => l({ search: s.length > 0 ? { fields: s } : void 0 }),
+        availableProperties: c
       }
     ) }),
-    /* @__PURE__ */ e(V, { title: "Property Display", children: /* @__PURE__ */ e(
-      De,
+    /* @__PURE__ */ e(q, { title: "Property Display", children: /* @__PURE__ */ e(
+      Ge,
       {
         value: a.propertyDisplay ?? {},
-        onChange: (c) => r({ propertyDisplay: Object.keys(c).length > 0 ? c : void 0 }),
-        availableProperties: o
+        onChange: (s) => l({ propertyDisplay: Object.keys(s).length > 0 ? s : void 0 }),
+        availableProperties: c
       }
     ) })
   ] });
 }
-const z = () => ({
+const W = () => ({
   id: "",
   sourceId: "",
   collection: "",
@@ -1511,47 +1678,47 @@ const z = () => ({
   visible: !0,
   dataMode: "vector-tiles"
 });
-function Ge({ layers: a, onChange: i, availableSources: p }) {
-  const [r, m] = w(null), [u, l] = w(!1), [n, d] = w(z()), [v, g] = w(null), [b, C] = w(null), [o, h] = w(null), y = () => {
-    i([...a, n]), l(!1), d(z());
-  }, D = (s) => {
-    i(a.map((N) => N.id === r ? s : N));
-  }, c = (s) => {
-    i(a.filter((N) => N.id !== s)), g(null), r === s && m(null);
-  }, T = (s) => {
-    if (s === 0) return;
-    const N = [...a];
-    [N[s - 1], N[s]] = [N[s], N[s - 1]], i(N);
-  }, M = (s) => {
-    if (s === a.length - 1) return;
-    const N = [...a];
-    [N[s], N[s + 1]] = [N[s + 1], N[s]], i(N);
-  }, f = (s, N) => {
-    C(N), s.dataTransfer.effectAllowed = "move", s.dataTransfer.setData("text/plain", N);
-  }, S = (s, N) => {
-    s.preventDefault(), s.dataTransfer.dropEffect = "move", h(N);
+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 = () => {
-    h(null);
-  }, k = (s, N) => {
-    s.preventDefault(), h(null);
-    const O = b;
-    if (C(null), !O || O === N) return;
-    const P = a.findIndex((j) => j.id === O), $ = a.findIndex((j) => j.id === N);
-    if (P === -1 || $ === -1) return;
-    const I = [...a];
-    I.splice(P, 1), I.splice($, 0, a[P]), i(I);
-  }, he = () => {
-    C(null), h(null);
+    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);
   };
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
+  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(
         "button",
         {
           type: "button",
           onClick: () => {
-            l(!0), d(z());
+            p(!0), g(W());
           },
           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"
@@ -1559,33 +1726,33 @@ function Ge({ layers: a, onChange: i, availableSources: p }) {
       )
     ] }),
     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((s, N) => {
-      var I, j, Y, X;
-      const O = b === s.id, P = o === s.id, $ = r === s.id;
-      return /* @__PURE__ */ t(
+    /* @__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(
         "li",
         {
-          draggable: !$,
-          onDragStart: $ ? void 0 : (B) => f(B, s.id),
-          onDragOver: (B) => S(B, s.id),
+          draggable: !B,
+          onDragStart: B ? void 0 : (R) => f(R, h.id),
+          onDragOver: (R) => T(R, h.id),
           onDragLeave: L,
-          onDrop: (B) => k(B, s.id),
-          onDragEnd: he,
+          onDrop: (R) => D(R, h.id),
+          onDragEnd: xe,
           className: [
             "mapui:rounded-lg mapui:border mapui:bg-white mapui:transition-colors",
-            P ? "mapui:border-blue-400 mapui:bg-blue-50" : "mapui:border-gray-200",
-            O ? "mapui:opacity-50" : "mapui:opacity-100"
+            j ? "mapui:border-blue-400 mapui:bg-blue-50" : "mapui:border-gray-200",
+            M ? "mapui:opacity-50" : "mapui:opacity-100"
           ].join(" "),
           children: [
-            /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:gap-2 mapui:px-3 mapui:py-2", children: [
-              /* @__PURE__ */ t("div", { className: "mapui:flex mapui:min-w-0 mapui:items-center mapui:gap-2", children: [
-                /* @__PURE__ */ t("div", { className: "mapui:flex mapui:shrink-0 mapui:flex-col mapui:gap-0.5", 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(
                     "button",
                     {
                       type: "button",
-                      onClick: () => T(N),
-                      disabled: N === 0,
+                      onClick: () => S(v),
+                      disabled: v === 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: "▲"
@@ -1595,8 +1762,8 @@ function Ge({ layers: a, onChange: i, availableSources: p }) {
                     "button",
                     {
                       type: "button",
-                      onClick: () => M(N),
-                      disabled: N === a.length - 1,
+                      onClick: () => A(v),
+                      disabled: v === a.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: "▼"
@@ -1611,75 +1778,75 @@ function Ge({ layers: a, onChange: i, availableSources: p }) {
                     children: "⠿"
                   }
                 ),
-                /* @__PURE__ */ t("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: s.label || s.id }),
-                  /* @__PURE__ */ e("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: s.collection }),
-                  /* @__PURE__ */ t("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: s.dataMode }),
-                    s.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: s.style.type }),
-                    s.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" }),
-                    (((j = (I = s.search) == null ? void 0 : I.fields) == null ? void 0 : j.length) ?? 0) > 0 && /* @__PURE__ */ t("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: [
-                      s.search.fields.length,
+                /* @__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,
                       " search fields"
                     ] }),
-                    (((X = (Y = s.legend) == null ? void 0 : Y.entries) == null ? void 0 : X.length) ?? 0) > 0 && /* @__PURE__ */ t("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: [
-                      s.legend.entries.length,
+                    (((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,
                       " legend entries"
                     ] })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ t("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+              /* @__PURE__ */ r("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
                 /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    onClick: () => m(r === s.id ? null : s.id),
+                    onClick: () => n(l === h.id ? null : h.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: r === s.id ? "Close" : "Edit"
+                    children: l === h.id ? "Close" : "Edit"
                   }
                 ),
                 /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    onClick: () => g(s.id),
+                    onClick: () => d(h.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"
                   }
                 )
               ] })
             ] }),
-            r === s.id && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(
-              re,
+            l === h.id && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(
+              ne,
               {
-                value: s,
-                onChange: D,
-                availableSources: p
+                value: h,
+                onChange: C,
+                availableSources: t
               }
             ) })
           ]
         },
-        s.id
+        h.id
       );
     }) }),
-    u && /* @__PURE__ */ t("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+    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(
-        re,
+        ne,
         {
-          value: n,
-          onChange: d,
-          availableSources: p
+          value: o,
+          onChange: g,
+          availableSources: t
         }
       ),
-      /* @__PURE__ */ t("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
+      /* @__PURE__ */ r("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: y,
-            disabled: !n.id || !n.sourceId || !n.collection,
+            onClick: m,
+            disabled: !o.id || !o.sourceId || !o.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"
           }
@@ -1688,7 +1855,7 @@ function Ge({ layers: a, onChange: i, availableSources: p }) {
           "button",
           {
             type: "button",
-            onClick: () => l(!1),
+            onClick: () => p(!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"
           }
@@ -1696,60 +1863,60 @@ function Ge({ layers: a, onChange: i, availableSources: p }) {
       ] })
     ] }),
     /* @__PURE__ */ e(
-      K,
+      H,
       {
-        open: v !== null,
+        open: x !== null,
         title: "Remove Layer",
         description: "Are you sure you want to remove this layer from the configuration?",
-        onConfirm: () => v && c(v),
-        onCancel: () => g(null)
+        onConfirm: () => x && s(x),
+        onCancel: () => d(null)
       }
     )
   ] });
 }
-const G = "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: a, onChange: i }) {
-  const p = (r) => i({ ...a, ...r });
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ e(x, { label: "ID", required: !0, children: /* @__PURE__ */ e(
+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(
       "input",
       {
         type: "text",
         value: a.id,
-        onChange: (r) => p({ id: r.target.value }),
+        onChange: (l) => t({ id: l.target.value }),
         placeholder: "osm",
-        className: G
+        className: V
       }
     ) }),
-    /* @__PURE__ */ e(x, { label: "Label", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(N, { label: "Label", children: /* @__PURE__ */ e(
       "input",
       {
         type: "text",
         value: a.label,
-        onChange: (r) => p({ label: r.target.value }),
+        onChange: (l) => t({ label: l.target.value }),
         placeholder: "OpenStreetMap",
-        className: G
+        className: V
       }
     ) }),
-    /* @__PURE__ */ e(x, { label: "Style URL", required: !0, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(N, { label: "Style URL", required: !0, children: /* @__PURE__ */ e(
       "input",
       {
         type: "url",
         value: a.url,
-        onChange: (r) => p({ url: r.target.value }),
+        onChange: (l) => t({ url: l.target.value }),
         placeholder: "https://example.com/style.json",
-        className: G
+        className: V
       }
     ) }),
-    /* @__PURE__ */ t(x, { label: "Thumbnail URL (optional)", children: [
+    /* @__PURE__ */ r(N, { label: "Thumbnail URL (optional)", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "url",
           value: a.thumbnail ?? "",
-          onChange: (r) => p({ thumbnail: r.target.value || void 0 }),
+          onChange: (l) => t({ thumbnail: l.target.value || void 0 }),
           placeholder: "https://example.com/thumbnail.png",
-          className: G
+          className: V
         }
       ),
       a.thumbnail && /* @__PURE__ */ e(
@@ -1763,85 +1930,85 @@ function le({ value: a, onChange: i }) {
     ] })
   ] });
 }
-const W = () => ({ id: "", label: "", url: "" });
-function _e({ basemaps: a, onChange: i }) {
-  const [p, r] = w(null), [m, u] = w(!1), [l, n] = w(W()), [d, v] = w(null), g = (o) => {
-    i(a.map((h) => h.id === p ? o : h));
-  }, b = () => {
-    i([...a, l]), u(!1), n(W());
-  }, C = (o) => {
-    i(a.filter((h) => h.id !== o)), v(null);
+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);
   };
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
+  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(
         "button",
         {
           type: "button",
           onClick: () => {
-            u(!0), n(W());
+            u(!0), o(Y());
           },
           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 && !m && /* @__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((o) => /* @__PURE__ */ t(
+    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(
       "li",
       {
         className: "mapui:rounded-lg mapui:border mapui:border-gray-200 mapui:bg-white",
         children: [
-          /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-3 mapui:px-3 mapui:py-2", children: [
-            o.thumbnail && /* @__PURE__ */ e(
+          /* @__PURE__ */ r("div", { className: "mapui:flex mapui:items-center mapui:gap-3 mapui:px-3 mapui:py-2", children: [
+            c.thumbnail && /* @__PURE__ */ e(
               "img",
               {
-                src: o.thumbnail,
+                src: c.thumbnail,
                 alt: "",
                 className: "mapui:h-10 mapui:w-14 mapui:shrink-0 mapui:rounded mapui:object-cover"
               }
             ),
-            /* @__PURE__ */ t("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: o.label || o.id }),
-              /* @__PURE__ */ e("span", { className: "mapui:block mapui:truncate mapui:font-mono mapui:text-xs mapui:text-gray-500", children: o.url })
+            /* @__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__ */ t("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+            /* @__PURE__ */ r("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
               /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: () => r(p === o.id ? null : o.id),
+                  onClick: () => l(t === c.id ? null : c.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: p === o.id ? "Close" : "Edit"
+                  children: t === c.id ? "Close" : "Edit"
                 }
               ),
               /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: () => v(o.id),
+                  onClick: () => x(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"
                 }
               )
             ] })
           ] }),
-          p === o.id && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(le, { value: o, onChange: g }) })
+          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 }) })
         ]
       },
-      o.id
+      c.id
     )) }),
-    m && /* @__PURE__ */ t("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+    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(le, { value: l, onChange: n }),
-      /* @__PURE__ */ t("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
+      /* @__PURE__ */ e(oe, { value: p, onChange: o }),
+      /* @__PURE__ */ r("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: b,
-            disabled: !l.id || !l.url,
+            onClick: y,
+            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"
           }
@@ -1858,18 +2025,18 @@ function _e({ basemaps: a, onChange: i }) {
       ] })
     ] }),
     /* @__PURE__ */ e(
-      K,
+      H,
       {
-        open: d !== null,
+        open: g !== null,
         title: "Remove Basemap",
         description: "Are you sure you want to remove this basemap from the configuration?",
-        onConfirm: () => d && C(d),
-        onCancel: () => v(null)
+        onConfirm: () => g && k(g),
+        onCancel: () => x(null)
       }
     )
   ] });
 }
-const Ie = [
+const Je = [
   { 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" },
@@ -1879,32 +2046,32 @@ const Ie = [
   { key: "showFeatureTooltip", label: "Feature Tooltip", description: "Hover tooltip on features" },
   { key: "showExportButton", label: "Export Button", description: "Export data as CSV" }
 ];
-function Qe({ value: a, onChange: i }) {
-  const p = (r, m) => {
-    i({ ...a, [r]: m });
+function pa({ value: a, onChange: i }) {
+  const t = (l, n) => {
+    i({ ...a, [l]: n });
   };
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
+  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: Ie.map(({ key: r, label: m, description: u }) => {
-      const l = a[r];
-      return /* @__PURE__ */ t(
+    /* @__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(
         "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__ */ t("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: m }),
+            /* @__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__ */ t("div", { className: "mapui:relative mapui:flex mapui:shrink-0 mapui:items-center", children: [
+            /* @__PURE__ */ r("div", { className: "mapui:relative mapui:flex mapui:shrink-0 mapui:items-center", children: [
               /* @__PURE__ */ e(
                 "input",
                 {
                   type: "checkbox",
-                  checked: l,
-                  onChange: (n) => p(r, n.target.checked),
+                  checked: p,
+                  onChange: (o) => t(l, o.target.checked),
                   className: "mapui:sr-only",
-                  "aria-label": m
+                  "aria-label": n
                 }
               ),
               /* @__PURE__ */ e(
@@ -1912,14 +2079,14 @@ function Qe({ value: a, onChange: i }) {
                 {
                   className: [
                     "mapui:relative mapui:h-5 mapui:w-9 mapui:rounded-full mapui:transition-colors",
-                    l ? "mapui:bg-blue-600" : "mapui:bg-gray-300"
+                    p ? "mapui:bg-blue-600" : "mapui:bg-gray-300"
                   ].join(" "),
                   children: /* @__PURE__ */ e(
                     "div",
                     {
                       className: [
                         "mapui:absolute mapui:top-0.5 mapui:h-4 mapui:w-4 mapui:rounded-full mapui:bg-white mapui:shadow mapui:transition-transform",
-                        l ? "mapui:translate-x-4" : "mapui:translate-x-0.5"
+                        p ? "mapui:translate-x-4" : "mapui:translate-x-0.5"
                       ].join(" ")
                     }
                   )
@@ -1928,53 +2095,53 @@ function Qe({ value: a, onChange: i }) {
             ] })
           ]
         },
-        r
+        l
       );
     }) })
   ] });
 }
-const de = [
+const fe = [
   { 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 je(a, i) {
-  const p = de.find((r) => r.key === a);
-  if (p) {
+function _e(a, i) {
+  const t = fe.find((l) => l.key === a);
+  if (t) {
     if (isNaN(i)) return "Must be a number";
-    if (i < p.min) return `Must be at least ${p.min}`;
-    if (i > p.max) return `Must be at most ${p.max}`;
+    if (i < t.min) return `Must be at least ${t.min}`;
+    if (i > t.max) return `Must be at most ${t.max}`;
   }
 }
-const Ae = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-function ze({ value: a, onChange: i }) {
-  const p = (r, m) => {
-    const u = parseFloat(m);
-    i({ ...a, [r]: isNaN(u) ? 0 : u });
+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 });
   };
-  return /* @__PURE__ */ e("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: de.map(({ key: r, label: m, min: u, max: l, step: n, placeholder: d }) => {
-    const v = je(r, a[r]);
-    return /* @__PURE__ */ e(x, { label: m, error: v, children: /* @__PURE__ */ e(
+  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(
       "input",
       {
         type: "number",
         min: u,
-        max: l,
-        step: n,
-        value: a[r],
-        placeholder: d,
-        onChange: (g) => p(r, g.target.value),
-        className: `${Ae} ${v ? "mapui:border-red-400" : ""}`
+        max: p,
+        step: o,
+        value: a[l],
+        placeholder: g,
+        onChange: (d) => t(l, d.target.value),
+        className: `${He} ${x ? "mapui:border-red-400" : ""}`
       }
-    ) }, r);
+    ) }, l);
   }) });
 }
-function We({ config: a }) {
-  const i = xe(a);
-  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
-    /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+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(
         "span",
         {
@@ -1987,120 +2154,126 @@ function We({ config: a }) {
       ),
       /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-gray-500", children: "MapConfig validation" })
     ] }),
-    !i.success && /* @__PURE__ */ t("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3", children: [
+    !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((p, r) => /* @__PURE__ */ t("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: p.path.join(" > ") || "root" }),
-        /* @__PURE__ */ e("span", { className: "mapui:text-xs mapui:text-red-800", children: p.message })
-      ] }, r)) })
+      /* @__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)) })
     ] }),
     /* @__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) }) })
   ] });
 }
 export {
-  Ya as BasemapConfigSchema,
-  le as BasemapEditor,
-  _e as BasemapList,
-  Ke as BasemapSwitcher,
-  Xa as CirclePaintSchema,
-  ei as CircleStyleSchema,
-  Ye as CollapsibleControl,
-  qe as CollectionBrowser,
-  A as ColorPicker,
-  We as ConfigPreview,
-  K as ConfirmDialog,
-  ea as CoordinateDisplay,
-  ai as DatetimeSearchFieldSchema,
-  pa as ExportButton,
-  la as FeatureDetailPanel,
-  ma as FeatureTooltip,
-  ii as FillPaintSchema,
-  ti as FillStyleSchema,
-  pi as FilterConfigSchema,
-  x as FormField,
-  ri as LayerConfigSchema,
-  re as LayerEditor,
-  Ge as LayerList,
-  oa as LayerPanel,
-  sa as Legend,
-  li as LegendConfigSchema,
-  ve as LegendEditor,
-  Ne as LegendEntryEditor,
-  ui as LegendEntrySchema,
-  mi as LinePaintSchema,
-  ni as LineStyleSchema,
-  oi as MapConfigSchema,
-  ci as NumberSearchFieldSchema,
-  si as OgcApiSourceSchema,
-  di as PropertyDisplayConfigSchema,
-  De as PropertyDisplayEditor,
-  hi as PropertyDisplaySchema,
-  bi as SearchConfigSchema,
-  Ce as SearchFieldEditor,
-  Se as SearchFieldList,
-  gi as SearchFieldSchema,
-  ha as SearchPanel,
-  xi as SelectSearchFieldSchema,
-  ae as SourceEditor,
-  Re as SourceList,
-  fi as StyleConfigSchema,
-  ye as StyleEditor,
-  yi as TextSearchFieldSchema,
-  Qe as UIConfigEditor,
-  Ni as UIConfigSchema,
-  vi as ViewConfigSchema,
-  ze as ViewEditor,
-  ga as and,
-  xa as between,
-  oe as defaultCircle,
-  H as defaultFill,
-  ne as defaultLine,
-  se as detectGeometryTypeFromQueryables,
-  Ue as detectStyleTypeForCollection,
-  fa as downloadCsv,
-  ya as eq,
-  Te as extractGeometryType,
-  Na as featuresToCsv,
-  va as fetchCollectionDetail,
-  wa as fetchCollections,
-  Ca as fetchConformance,
-  ka as fetchDistinctValues,
-  Sa as fetchFeatureCount,
-  me as fetchFeatures,
-  be as fetchQueryables,
-  La as fetchTileJson,
-  aa as formatDMS,
-  ia as formatDecimal,
-  Fa as fromSimpleFilters,
-  Da as fromStructuredFilters,
-  Z as geometryTypeToStyleType,
-  Ea as getCql2FilteredVectorTileUrl,
-  Ta as getFilteredVectorTileUrl,
-  Ma as getTileJsonUrl,
-  Ia as getVectorTileUrl,
-  ja as gt,
-  Aa as gte,
-  Ve as humanizePropertyName,
-  Oa as inList,
-  Ee as isGeometryProperty,
-  Pa as isNull,
-  $a as like,
-  Ba as lt,
-  Ra as lte,
-  qa as neq,
-  Ua as not,
-  Va as or,
-  Ga as resolvePropertyDisplay,
-  xe as safeValidateMapConfig,
-  _a as serializeCql2,
-  Qa as tAfter,
-  za as tBefore,
-  Wa as tDuring,
-  Me as toAvailableProperties,
-  Ja as useCsvExport,
-  Ha as useOgcCollectionDetail,
-  ue as useOgcCollections,
-  Ka as useOgcFeatures,
-  ge as useOgcQueryables,
-  wi as validateMapConfig
+  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
 };