@ogc-maps/storybook-components 0.4.1 → 0.5.1

package/dist/main.js

@@ -1,55 +1,2091 @@
-import { B as o } from "./BasemapSwitcher-BW7lyZ2Y.js";
-import { C as t } from "./CollapsibleControl-VFUTWb_5.js";
-import { C as s, f as l, a as c } from "./CoordinateDisplay-PxPmVjpm.js";
-import { E as f } from "./ExportButton-CLsWoW4m.js";
-import { F as S } from "./FeatureDetailPanel-DpcaTS9I.js";
-import { F as C } from "./FeatureTooltip-CM0ZTudi.js";
-import { L as g } from "./LayerPanel-BHpb8dbm.js";
-import { L as u } from "./Legend-D4cc1JzQ.js";
-import { S as F } from "./SearchPanel-B5GPX1gF.js";
-import { i as L, j as P, f as T, a as v, b as B, g as D, c as E, d as M, u as U, e as V, h as b } from "./useCsvExport-C4WAm7kG.js";
-import { BasemapConfigSchema as O, CirclePaintSchema as j, CircleStyleSchema as A, FillPaintSchema as I, FillStyleSchema as J, FilterConfigSchema as Q, LayerConfigSchema as k, LegendConfigSchema as q, LegendEntrySchema as z, LinePaintSchema as G, LineStyleSchema as H, MapConfigSchema as K, OgcApiSourceSchema as N, SearchConfigSchema as R, SearchFieldSchema as W, StyleConfigSchema as X, UIConfigSchema as Y, ViewConfigSchema as Z, safeValidateMapConfig as _, validateMapConfig as $ } from "./schemas/index.js";
-import './style.css';export {
-  O as BasemapConfigSchema,
-  o as BasemapSwitcher,
-  j as CirclePaintSchema,
-  A as CircleStyleSchema,
-  t as CollapsibleControl,
-  s as CoordinateDisplay,
-  f as ExportButton,
-  S as FeatureDetailPanel,
-  C as FeatureTooltip,
-  I as FillPaintSchema,
-  J as FillStyleSchema,
-  Q as FilterConfigSchema,
-  k as LayerConfigSchema,
-  g as LayerPanel,
-  u as Legend,
-  q as LegendConfigSchema,
-  z as LegendEntrySchema,
-  G as LinePaintSchema,
-  H as LineStyleSchema,
-  K as MapConfigSchema,
-  N as OgcApiSourceSchema,
-  R as SearchConfigSchema,
-  W as SearchFieldSchema,
-  F as SearchPanel,
-  X as StyleConfigSchema,
-  Y as UIConfigSchema,
-  Z as ViewConfigSchema,
-  L as downloadCsv,
-  P as featuresToCsv,
-  T as fetchCollections,
-  v as fetchFeatures,
-  B as fetchQueryables,
-  l as formatDMS,
-  c as formatDecimal,
-  D as getFilteredVectorTileUrl,
-  E as getTileJsonUrl,
-  M as getVectorTileUrl,
-  _ as safeValidateMapConfig,
-  U as useCsvExport,
-  V as useOgcCollections,
-  b as useOgcFeatures,
-  $ as validateMapConfig
+import { B as He } from "./BasemapSwitcher-BW7lyZ2Y.js";
+import { C as Ze } from "./CollapsibleControl-VFUTWb_5.js";
+import { C as Xe, f as ea, a as aa } from "./CoordinateDisplay-PxPmVjpm.js";
+import { E as ta } from "./ExportButton-CLsWoW4m.js";
+import { F as ra } from "./FeatureDetailPanel-CkFpdEKW.js";
+import { F as ua } from "./FeatureTooltip-Db1LgLQV.js";
+import { L as na } from "./LayerPanel-SCdJ8948.js";
+import { L as sa } from "./Legend-BMrkY-rw.js";
+import { S as da } from "./SearchPanel-DCY01Wa-.js";
+import { jsxs as t, jsx as e, Fragment as E } from "react/jsx-runtime";
+import { useState as w, useRef as X, useEffect as ee } from "react";
+import { I as le, j as he, i as ue, K as be } from "./cql2-Dhe6Ny6v.js";
+import { a as ba, b as ga, L as xa, e as fa, M as ya, f as Na, c as va, d as wa, g as Ca, h as ka, k as Sa, l as La, m as Fa, n as Da, o as Ea, p as Ta, q as Ma, r as Ia, s as ja, t as Aa, u as Oa, v as Pa, w as $a, x as Ba, y as qa, z as Ra, A as Ua, B as Va, C as Ga, D as _a, E as Qa, F as za, G as Wa, H as Ja, J as Ha } from "./cql2-Dhe6Ny6v.js";
+import { s as ge } from "./index-Bw9lUiuL.js";
+import { B as Za, C as Ya, a as Xa, D as ei, F as ai, b as ii, c as ti, L as pi, d as ri, e as li, f as ui, g as mi, M as ni, N as oi, O as si, P as ci, h as di, S as hi, i as bi, j as gi, k as xi, T as fi, U as yi, V as Ni, v as vi } 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: [
+      a,
+      p && /* @__PURE__ */ e("span", { className: "mapui:ml-0.5 mapui:text-red-500", "aria-hidden": "true", children: "*" })
+    ] }),
+    m,
+    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: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "color",
+        value: a,
+        onChange: (r) => i(r.target.value),
+        "aria-label": p ?? "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 H({
+  open: a,
+  title: i,
+  description: p,
+  onConfirm: r,
+  onCancel: m
+}) {
+  return a ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: "mapui:fixed mapui:inset-0 mapui:z-50 mapui:flex mapui:items-center mapui:justify-center mapui:bg-black/50",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "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: [
+        /* @__PURE__ */ e(
+          "h2",
+          {
+            id: "confirm-dialog-title",
+            className: "mapui:m-0 mapui:mb-2 mapui:text-base mapui:font-semibold mapui:text-gray-900",
+            children: i
+          }
+        ),
+        /* @__PURE__ */ e(
+          "p",
+          {
+            id: "confirm-dialog-description",
+            className: "mapui:m-0 mapui:mb-6 mapui:text-sm mapui:text-gray-600",
+            children: p
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "mapui:flex mapui:justify-end mapui:gap-2", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: m,
+              className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:text-gray-700 hover:mapui:bg-gray-50",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: r,
+              className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-transparent mapui:bg-red-600 mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:font-medium mapui:text-white hover:mapui:bg-red-700",
+              children: "Confirm"
+            }
+          )
+        ] })
+      ] })
+    }
+  ) : null;
+}
+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({
+  value: a,
+  onChange: i,
+  onTestConnection: p,
+  testStatus: r = "idle",
+  testError: m
+}) {
+  const u = (g) => i({ ...a, ...g });
+  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
+    /* @__PURE__ */ e(x, { label: "ID", required: !0, children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        value: a.id,
+        onChange: (g) => u({ id: g.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__ */ e(
+          "input",
+          {
+            type: "url",
+            value: a.url,
+            onChange: (g) => u({ url: g.target.value }),
+            placeholder: "https://example.com/ogcapi",
+            className: `${U} mapui:flex-1`
+          }
+        ),
+        p && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => p(a.url),
+            disabled: r === "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"
+          }
+        )
+      ] }),
+      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" })
+    ] }),
+    /* @__PURE__ */ e(x, { label: "Label", children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        value: a.label ?? "",
+        onChange: (g) => u({ label: g.target.value || void 0 }),
+        placeholder: "My OGC API Source",
+        className: U
+      }
+    ) }),
+    /* @__PURE__ */ e(x, { label: "Tile Matrix Set ID", children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        value: a.tileMatrixSetId ?? "WebMercatorQuad",
+        onChange: (g) => u({ tileMatrixSetId: g.target.value || void 0 }),
+        placeholder: "WebMercatorQuad",
+        className: U
+      }
+    ) })
+  ] });
+}
+const _ = () => ({
+  id: "",
+  url: "",
+  label: void 0,
+  tileMatrixSetId: "WebMercatorQuad"
+});
+function Be({ sources: a, onChange: i }) {
+  const [p, r] = w(null), [m, u] = w(null), [g, n] = w(!1), [l, N] = w(_()), [h, c] = w({}), [C, o] = w({}), [b, y] = w(null), D = async (f, S) => {
+    c((L) => ({ ...L, [f]: "loading" }));
+    try {
+      const L = await fetch(`${S}/conformance`);
+      L.ok ? c((k) => ({ ...k, [f]: "success" })) : (c((k) => ({ ...k, [f]: "error" })), o((k) => ({ ...k, [f]: `HTTP ${L.status}` })));
+    } catch (L) {
+      c((k) => ({ ...k, [f]: "error" })), o((k) => ({ ...k, [f]: L instanceof Error ? L.message : "Network error" }));
+    }
+  }, s = () => {
+    m && (i(a.map((f) => f.id === p ? m : f)), r(null), u(null));
+  }, T = () => {
+    i([...a, l]), n(!1), N(_());
+  }, M = (f) => {
+    i(a.filter((S) => S.id !== f)), y(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: [
+      /* @__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), N(_());
+          },
+          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 && !g && /* @__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: [
+          /* @__PURE__ */ e(
+            ae,
+            {
+              value: m ?? f,
+              onChange: u,
+              onTestConnection: (S) => D(`edit-${f.id}`, S),
+              testStatus: h[`edit-${f.id}`],
+              testError: C[`edit-${f.id}`]
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: "mapui:flex mapui:gap-2", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: s,
+                disabled: !(m != null && m.id) || !(m != null && m.url),
+                className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
+                children: "Save"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  r(null), u(null);
+                },
+                className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }) : /* @__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__ */ 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: [
+              "TMS: ",
+              f.tileMatrixSetId
+            ] })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  r(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"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => y(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"
+              }
+            )
+          ] })
+        ] })
+      },
+      f.id
+    )) }),
+    g && /* @__PURE__ */ t("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,
+        {
+          value: l,
+          onChange: N,
+          onTestConnection: (f) => D("new", f),
+          testStatus: h.new,
+          testError: C.new
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: T,
+            disabled: !l.id || !l.url,
+            className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => n(!1),
+            className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      H,
+      {
+        open: b !== null,
+        title: "Remove Source",
+        description: "Are you sure you want to remove this source? Any layers using it will be affected.",
+        onConfirm: () => b && M(b),
+        onCancel: () => y(null)
+      }
+    )
+  ] });
+}
+function qe({
+  sourceUrl: a,
+  selectedCollectionIds: i,
+  onSelect: p,
+  onDeselect: r
+}) {
+  const { collections: m, loading: u, error: g } = le(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: [
+    /* @__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…"
+  ] }) : g ? /* @__PURE__ */ t("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3 mapui:text-sm mapui:text-red-700", children: [
+    "Failed to load collections: ",
+    g.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 l = i.includes(n.id);
+    return /* @__PURE__ */ t(
+      "li",
+      {
+        className: "mapui:flex mapui:items-start mapui:gap-3 mapui:rounded mapui:border mapui:border-gray-200 mapui:p-2 hover:mapui:bg-gray-50",
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              id: `collection-${n.id}`,
+              checked: l,
+              onChange: () => l ? r(n.id) : p(n.id),
+              className: "mapui:mt-0.5 mapui:h-4 mapui:w-4 mapui:cursor-pointer mapui:accent-blue-600"
+            }
+          ),
+          /* @__PURE__ */ t(
+            "label",
+            {
+              htmlFor: `collection-${n.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 })
+              ]
+            }
+          )
+        ]
+      },
+      n.id
+    );
+  }) });
+}
+const J = {
+  type: "fill",
+  paint: { "fill-color": "#4a90d9", "fill-opacity": 0.6, "fill-outline-color": "transparent" }
+}, me = {
+  type: "line",
+  paint: { "line-color": "#2980b9", "line-width": 2, "line-opacity": 1 }
+}, ne = {
+  type: "circle",
+  paint: { "circle-color": "#e74c3c", "circle-radius": 5, "circle-opacity": 0.9 }
+}, 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 xe({ style: a }) {
+  return a.type === "fill" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: "mapui:h-8 mapui:w-full mapui:rounded mapui:border mapui:border-gray-200",
+      style: {
+        backgroundColor: a.paint["fill-color"],
+        opacity: a.paint["fill-opacity"],
+        outline: a.paint["fill-outline-color"] ? `2px solid ${a.paint["fill-outline-color"]}` : void 0
+      },
+      "aria-label": "Style preview"
+    }
+  ) : a.type === "line" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: "mapui:flex mapui:h-8 mapui:w-full mapui:items-center mapui:rounded mapui:border mapui:border-gray-200 mapui:px-2",
+      "aria-label": "Style preview",
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: a.paint["line-width"],
+            backgroundColor: a.paint["line-color"],
+            opacity: a.paint["line-opacity"]
+          }
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: "mapui:flex mapui:h-8 mapui:w-full mapui:items-center mapui:justify-center mapui:rounded mapui:border mapui:border-gray-200",
+      "aria-label": "Style preview",
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            width: a.paint["circle-radius"] * 2,
+            height: a.paint["circle-radius"] * 2,
+            backgroundColor: a.paint["circle-color"],
+            opacity: a.paint["circle-opacity"],
+            borderRadius: "50%",
+            border: a.paint["circle-stroke-color"] ? `${a.paint["circle-stroke-width"] ?? 1}px solid ${a.paint["circle-stroke-color"]}` : void 0
+          }
+        }
+      )
+    }
+  );
+}
+function fe({ value: a, onChange: i, suggestedType: p }) {
+  var m;
+  const r = (u) => {
+    i(u === "fill" ? J : u === "line" ? me : ne);
+  };
+  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: [
+        "Detected geometry suggests ",
+        /* @__PURE__ */ e("strong", { children: p }),
+        " style."
+      ] }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => r(p),
+          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(
+      "select",
+      {
+        value: a.type,
+        onChange: (u) => r(u.target.value),
+        className: q,
+        children: [
+          /* @__PURE__ */ e("option", { value: "fill", children: "Fill" }),
+          /* @__PURE__ */ e("option", { value: "line", children: "Line" }),
+          /* @__PURE__ */ e("option", { value: "circle", children: "Circle" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t("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(xe, { style: a })
+    ] }),
+    a.type === "fill" && /* @__PURE__ */ t(E, { children: [
+      /* @__PURE__ */ e(x, { label: "Fill Color", children: /* @__PURE__ */ e(
+        A,
+        {
+          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: q
+        }
+      ) }),
+      /* @__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 g = u.target.value.trim(), n = g ? g.split(",").map((l) => parseFloat(l.trim())).filter((l) => !isNaN(l)) : void 0;
+            i({
+              ...a,
+              paint: { ...a.paint, "line-dasharray": n }
+            });
+          },
+          placeholder: "e.g. 2, 4",
+          className: q
+        }
+      ) })
+    ] }),
+    a.type === "circle" && /* @__PURE__ */ t(E, { children: [
+      /* @__PURE__ */ e(x, { label: "Circle Color", children: /* @__PURE__ */ e(
+        A,
+        {
+          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: q
+        }
+      ) }),
+      /* @__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: q
+        }
+      ) })
+    ] })
+  ] });
+}
+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 ye({ 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(
+      "input",
+      {
+        type: "text",
+        value: a.label,
+        onChange: (p) => i({ ...a, label: p.target.value }),
+        placeholder: "Legend entry label",
+        className: ie
+      }
+    ) }),
+    /* @__PURE__ */ e(x, { label: "Color", children: /* @__PURE__ */ e(
+      A,
+      {
+        value: a.color,
+        onChange: (p) => i({ ...a, color: p }),
+        label: "Entry color"
+      }
+    ) }),
+    /* @__PURE__ */ e(x, { label: "Shape", children: /* @__PURE__ */ t(
+      "select",
+      {
+        value: a.shape ?? "square",
+        onChange: (p) => i({ ...a, shape: p.target.value }),
+        className: ie,
+        children: [
+          /* @__PURE__ */ e("option", { value: "square", children: "Square" }),
+          /* @__PURE__ */ e("option", { value: "circle", children: "Circle" }),
+          /* @__PURE__ */ e("option", { value: "line", children: "Line" })
+        ]
+      }
+    ) })
+  ] });
+}
+const te = () => ({ label: "", color: "#4a90d9", shape: "square" });
+function Ne({ value: a, onChange: i }) {
+  const p = (a == null ? void 0 : a.entries) ?? [], r = () => {
+    i({ entries: [...p, te()] });
+  }, m = (n, l) => {
+    const N = p.map((h, c) => c === n ? l : h);
+    i({ entries: N });
+  }, u = (n) => {
+    const l = p.filter((N, h) => h !== n);
+    i(l.length > 0 ? { entries: l } : void 0);
+  }, g = (n) => {
+    i(n ? { entries: [te()] } : 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: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "checkbox",
+          id: "legend-enabled",
+          checked: a !== void 0,
+          onChange: (n) => g(n.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, l) => /* @__PURE__ */ t(
+        "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: [
+                "Entry ",
+                l + 1
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => u(l),
+                  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(
+              ye,
+              {
+                value: n,
+                onChange: (N) => m(l, N)
+              }
+            )
+          ]
+        },
+        l
+      )) }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: r,
+          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"
+        }
+      )
+    ] })
+  ] });
+}
+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", ve = {
+  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 we({ value: a, onChange: i, availableProperties: p }) {
+  var g, n;
+  const r = (l) => {
+    i({ ...ve[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(
+      "select",
+      {
+        value: a.type,
+        onChange: (l) => r(l.target.value),
+        className: F,
+        children: [
+          /* @__PURE__ */ e("option", { value: "text", children: "Text" }),
+          /* @__PURE__ */ e("option", { value: "number", children: "Number" }),
+          /* @__PURE__ */ e("option", { value: "datetime", children: "Date/Time" }),
+          /* @__PURE__ */ e("option", { value: "select", children: "Select" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(x, { label: "Property", required: !0, children: u ? /* @__PURE__ */ t(
+      "select",
+      {
+        value: a.property,
+        onChange: (l) => m({ property: l.target.value }),
+        className: F,
+        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))
+        ]
+      }
+    ) : /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        value: a.property,
+        onChange: (l) => m({ property: l.target.value }),
+        placeholder: "e.g. name",
+        className: F
+      }
+    ) }),
+    /* @__PURE__ */ e(x, { label: "Label", children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        value: a.label,
+        onChange: (l) => m({ label: l.target.value }),
+        placeholder: "Display label",
+        className: F
+      }
+    ) }),
+    /* @__PURE__ */ e(x, { label: "Placeholder", children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        value: a.placeholder ?? "",
+        onChange: (l) => m({ placeholder: l.target.value || void 0 }),
+        placeholder: "Input placeholder text",
+        className: F
+      }
+    ) }),
+    a.type === "text" && /* @__PURE__ */ t(E, { children: [
+      /* @__PURE__ */ t("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 }),
+            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__ */ e(
+          "input",
+          {
+            type: "checkbox",
+            id: "text-prefetch",
+            checked: a.prefetch ?? !1,
+            onChange: (l) => i({ ...a, prefetch: l.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(
+        "input",
+        {
+          type: "text",
+          value: ((g = a.options) == null ? void 0 : g.join(", ")) ?? "",
+          onChange: (l) => {
+            const N = l.target.value.trim(), h = N ? N.split(",").map((c) => c.trim()).filter(Boolean) : void 0;
+            i({ ...a, options: h });
+          },
+          placeholder: "option1, option2",
+          className: F
+        }
+      ) })
+    ] }),
+    a.type === "number" && /* @__PURE__ */ t(E, { children: [
+      /* @__PURE__ */ e(x, { label: "Input Mode", children: /* @__PURE__ */ t(
+        "select",
+        {
+          value: a.inputMode ?? "input",
+          onChange: (l) => i({
+            ...a,
+            inputMode: l.target.value
+          }),
+          className: F,
+          children: [
+            /* @__PURE__ */ e("option", { value: "input", children: "Input" }),
+            /* @__PURE__ */ e("option", { value: "slider", children: "Slider" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(x, { label: "Operator", children: /* @__PURE__ */ t(
+        "select",
+        {
+          value: a.operator ?? "eq",
+          onChange: (l) => i({
+            ...a,
+            operator: l.target.value
+          }),
+          className: F,
+          children: [
+            /* @__PURE__ */ e("option", { value: "eq", children: "Equal (=)" }),
+            /* @__PURE__ */ e("option", { value: "gt", children: "Greater Than (>)" }),
+            /* @__PURE__ */ e("option", { value: "gte", children: "Greater or Equal (>=)" }),
+            /* @__PURE__ */ e("option", { value: "lt", children: "Less Than (<)" }),
+            /* @__PURE__ */ e("option", { value: "lte", children: "Less or Equal (<=)" }),
+            /* @__PURE__ */ e("option", { value: "between", children: "Between" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t("div", { className: "mapui:grid mapui:grid-cols-3 mapui:gap-2", children: [
+        /* @__PURE__ */ e(x, { label: "Min", children: /* @__PURE__ */ e(
+          "input",
+          {
+            type: "number",
+            value: a.min ?? "",
+            onChange: (l) => i({
+              ...a,
+              min: l.target.value ? parseFloat(l.target.value) : void 0
+            }),
+            className: F
+          }
+        ) }),
+        /* @__PURE__ */ e(x, { label: "Max", children: /* @__PURE__ */ e(
+          "input",
+          {
+            type: "number",
+            value: a.max ?? "",
+            onChange: (l) => i({
+              ...a,
+              max: l.target.value ? parseFloat(l.target.value) : void 0
+            }),
+            className: F
+          }
+        ) }),
+        /* @__PURE__ */ e(x, { label: "Step", children: /* @__PURE__ */ e(
+          "input",
+          {
+            type: "number",
+            value: a.step ?? "",
+            onChange: (l) => i({
+              ...a,
+              step: l.target.value ? parseFloat(l.target.value) : void 0
+            }),
+            className: F
+          }
+        ) })
+      ] })
+    ] }),
+    a.type === "datetime" && /* @__PURE__ */ t("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 }),
+          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: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            type: "checkbox",
+            id: "select-prefetch",
+            checked: a.prefetch ?? !1,
+            onChange: (l) => i({ ...a, prefetch: l.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(
+        "input",
+        {
+          type: "text",
+          value: ((n = a.options) == null ? void 0 : n.join(", ")) ?? "",
+          onChange: (l) => {
+            const N = l.target.value.trim(), h = N ? N.split(",").map((c) => c.trim()).filter(Boolean) : void 0;
+            i({ ...a, options: h });
+          },
+          placeholder: "option1, option2",
+          className: F
+        }
+      ) })
+    ] })
+  ] });
+}
+const Ce = () => ({
+  type: "text",
+  property: "",
+  label: "",
+  autocomplete: !1
+});
+function ke({ fields: a, onChange: i, availableProperties: p }) {
+  const [r, m] = w(null), u = () => {
+    const h = [...a, Ce()];
+    i(h), m(h.length - 1);
+  }, g = (h, c) => {
+    i(a.map((C, o) => o === h ? c : C));
+  }, n = (h) => {
+    i(a.filter((c, C) => C !== h)), m(null);
+  }, l = (h) => {
+    if (h === 0) return;
+    const c = [...a];
+    [c[h - 1], c[h]] = [c[h], c[h - 1]], i(c), m(h - 1);
+  }, N = (h) => {
+    if (h === a.length - 1) return;
+    const c = [...a];
+    [c[h], c[h + 1]] = [c[h + 1], c[h]], i(c), m(h + 1);
+  };
+  return /* @__PURE__ */ t("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((h, c) => /* @__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(
+            "button",
+            {
+              type: "button",
+              onClick: () => l(c),
+              disabled: c === 0,
+              "aria-label": "Move up",
+              className: "mapui:cursor-pointer mapui:rounded mapui:border-none mapui:bg-transparent mapui:px-1 mapui:text-xs mapui:text-gray-400 hover:mapui:text-gray-600 disabled:mapui:opacity-30",
+              children: "▲"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => N(c),
+              disabled: c === 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(
+          "button",
+          {
+            type: "button",
+            onClick: () => m(r === c ? null : c),
+            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: h.type }),
+              h.label || h.property || "Untitled field"
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => n(c),
+            "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 === c && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(
+        we,
+        {
+          value: h,
+          onChange: (C) => g(c, C),
+          availableProperties: p
+        }
+      ) })
+    ] }, c)) }),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: u,
+        className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-dashed mapui:border-gray-300 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-gray-600 hover:mapui:border-blue-400 hover:mapui:text-blue-600",
+        children: "+ Add Search Field"
+      }
+    )
+  ] });
+}
+function Se(a) {
+  return Object.entries(a).map(([i, p]) => ({
+    key: i,
+    label: p.label ?? "",
+    visible: p.visible ?? !0
+  }));
+}
+function Le(a) {
+  const i = {};
+  for (const p of a)
+    i[p.key] = {
+      visible: p.visible,
+      ...p.label ? { label: p.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 Fe({ value: a, onChange: i, availableProperties: p }) {
+  const r = Se(a), m = p && p.length > 0, u = (o) => i(Le(o)), g = () => {
+    u([...r, { key: "", label: "", visible: !0 }]);
+  }, n = (o) => {
+    u(r.filter((b, y) => y !== o));
+  }, l = (o, b) => {
+    u(r.map((y, D) => D === o ? { ...y, ...b } : y));
+  }, N = (o, b) => {
+    const y = p == null ? void 0 : p.find((s) => s.name === b), D = (y == null ? void 0 : y.title) ?? r[o].label;
+    u(r.map((s, T) => T === o ? { ...s, key: b, label: D } : s));
+  }, h = (o) => {
+    if (o === 0) return;
+    const b = [...r];
+    [b[o - 1], b[o]] = [b[o], b[o - 1]], u(b);
+  }, c = (o) => {
+    if (o === r.length - 1) return;
+    const b = [...r];
+    [b[o], b[o + 1]] = [b[o + 1], b[o]], u(b);
+  }, C = () => {
+    if (!p) return;
+    const o = p.map((b) => ({
+      key: b.name,
+      label: b.title ?? "",
+      visible: !0
+    }));
+    u(o);
+  };
+  return /* @__PURE__ */ t("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
+    r.length === 0 ? /* @__PURE__ */ t(E, { 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(
+        "button",
+        {
+          type: "button",
+          onClick: C,
+          className: "mapui:cursor-pointer mapui:self-start mapui:rounded mapui:border mapui:border-blue-300 mapui:bg-blue-50 mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:text-blue-700 hover:mapui:bg-blue-100",
+          children: "Populate from API metadata"
+        }
+      )
+    ] }) : /* @__PURE__ */ 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__ */ 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, b) => /* @__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(
+            "button",
+            {
+              type: "button",
+              onClick: () => h(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: "▲"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => c(b),
+              disabled: b === r.length - 1,
+              "aria-label": "Move down",
+              className: "mapui:cursor-pointer mapui:rounded mapui:border-none mapui:bg-transparent mapui:px-1 mapui:text-xs mapui:text-gray-400 hover:mapui:text-gray-600 disabled:mapui:opacity-30",
+              children: "▼"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { className: "mapui:grid mapui:flex-1 mapui:items-center mapui:gap-2", style: { gridTemplateColumns: "1fr 1fr auto auto" }, children: [
+          m ? /* @__PURE__ */ t(
+            "select",
+            {
+              value: o.key,
+              onChange: (y) => N(b, y.target.value),
+              "aria-label": "Property key",
+              className: Q,
+              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))
+              ]
+            }
+          ) : /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              value: o.key,
+              onChange: (y) => l(b, { key: y.target.value }),
+              placeholder: "property_name",
+              "aria-label": "Property key",
+              className: Q
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              value: o.label,
+              onChange: (y) => l(b, { label: y.target.value }),
+              placeholder: "Friendly name",
+              "aria-label": "Display label",
+              className: Q
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              checked: o.visible,
+              onChange: (y) => l(b, { visible: y.target.checked }),
+              "aria-label": "Visible",
+              className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => n(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"
+            }
+          )
+        ] })
+      ] }, b)) })
+    ] }),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: g,
+        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 oe = /geojson\.org\/schema\/(\w+)\.json/;
+function De(a) {
+  return !!a.$ref && oe.test(a.$ref);
+}
+function Ee(a) {
+  const i = oe.exec(a);
+  return i ? i[1] : null;
+}
+function K(a) {
+  const i = a.toLowerCase();
+  return i.includes("polygon") ? "fill" : i.includes("linestring") ? "line" : i.includes("point") ? "circle" : null;
+}
+function se(a) {
+  for (const i of Object.values(a.properties))
+    if (i.$ref) {
+      const p = Ee(i.$ref);
+      if (p) return K(p);
+    }
+  return null;
+}
+function Te(a) {
+  return Object.entries(a.properties).filter(([, i]) => !De(i)).map(([i, p]) => ({
+    name: i,
+    title: p.title,
+    type: p.type,
+    format: p.format,
+    enum: p.enum,
+    minimum: p.minimum,
+    maximum: p.maximum
+  }));
+}
+async function Re(a, i) {
+  var p, r;
+  try {
+    const m = await he(a, i), u = se(m);
+    if (u) return u;
+  } catch {
+  }
+  try {
+    const u = (r = (p = (await ue(a, i, { limit: 1 })).features[0]) == null ? void 0 : p.geometry) == null ? void 0 : r.type;
+    if (typeof u == "string") return K(u);
+  } catch {
+  }
+  return null;
+}
+function Ue(a) {
+  return a.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (i) => i.toUpperCase());
+}
+const R = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
+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 pe({ value: a, onChange: i, availableSources: p }) {
+  var D;
+  const r = (s) => i({ ...a, ...s }), m = X(a);
+  m.current = a;
+  const u = X(i);
+  u.current = i;
+  const g = p.find((s) => s.id === a.sourceId), n = (g == null ? void 0 : g.url) ?? null, l = a.collection || null, { collections: N, loading: h } = le(n), { queryables: c, loading: C } = be(n, l), o = c ? Te(c) : [], [b, y] = w(
+    null
+  );
+  return ee(() => {
+    if (!c) {
+      y(null);
+      return;
+    }
+    const s = (f) => {
+      if (y(f), f && !m.current.style) {
+        const S = f === "fill" ? J : f === "line" ? me : ne;
+        u.current({ ...m.current, style: S });
+      }
+    }, T = se(c);
+    if (T) {
+      s(T);
+      return;
+    }
+    if (!n || !l) {
+      y(null);
+      return;
+    }
+    let M = !1;
+    return ue(n, l, { 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;
+      s(typeof S == "string" ? K(S) : null);
+    }).catch(() => {
+      M || y(null);
+    }), () => {
+      M = !0;
+    };
+  }, [c, n, l]), ee(() => {
+    y(null);
+  }, [n, l]), /* @__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(
+        "input",
+        {
+          type: "text",
+          value: a.id,
+          onChange: (s) => r({ id: s.target.value }),
+          placeholder: "my-layer",
+          className: R
+        }
+      ) }),
+      /* @__PURE__ */ e(x, { label: "Label", children: /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: a.label,
+          onChange: (s) => r({ label: s.target.value }),
+          placeholder: "My Layer",
+          className: R
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(x, { label: "Source", required: !0, children: /* @__PURE__ */ t(
+      "select",
+      {
+        value: a.sourceId,
+        onChange: (s) => r({ sourceId: s.target.value }),
+        className: R,
+        children: [
+          /* @__PURE__ */ e("option", { value: "", children: "Select a source…" }),
+          p.map((s) => /* @__PURE__ */ e("option", { value: s.id, children: s.label ?? s.id }, s.id))
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(x, { label: "Collection", required: !0, children: [
+      N.length > 0 ? /* @__PURE__ */ t(
+        "select",
+        {
+          value: a.collection,
+          onChange: (s) => r({ collection: s.target.value }),
+          className: R,
+          children: [
+            /* @__PURE__ */ e("option", { value: "", children: "Select a collection…" }),
+            N.map((s) => /* @__PURE__ */ e("option", { value: s.id, children: s.title ?? s.id }, s.id))
+          ]
+        }
+      ) : /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: a.collection,
+          onChange: (s) => r({ collection: s.target.value }),
+          placeholder: h ? "Loading collections…" : "collection-id",
+          className: R
+        }
+      ),
+      C && /* @__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((s) => /* @__PURE__ */ t("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: s,
+          checked: a.dataMode === s,
+          onChange: () => r({ dataMode: s }),
+          className: "mapui:accent-blue-600"
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: "mapui:text-sm mapui:text-gray-700", children: s })
+    ] }, s)) }) }),
+    /* @__PURE__ */ t("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "checkbox",
+          id: "layer-visible",
+          checked: a.visible,
+          onChange: (s) => r({ 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(
+      fe,
+      {
+        value: a.style ?? J,
+        onChange: (s) => r({ style: s }),
+        suggestedType: b
+      }
+    ) }),
+    /* @__PURE__ */ e(V, { title: "Legend", children: /* @__PURE__ */ e(
+      Ne,
+      {
+        value: a.legend,
+        onChange: (s) => r({ legend: s })
+      }
+    ) }),
+    /* @__PURE__ */ e(V, { title: "Search Fields", children: /* @__PURE__ */ e(
+      ke,
+      {
+        fields: ((D = a.search) == null ? void 0 : D.fields) ?? [],
+        onChange: (s) => r({ search: s.length > 0 ? { fields: s } : void 0 }),
+        availableProperties: o
+      }
+    ) }),
+    /* @__PURE__ */ e(V, { title: "Property Display", children: /* @__PURE__ */ e(
+      Fe,
+      {
+        value: a.propertyDisplay ?? {},
+        onChange: (s) => r({ propertyDisplay: Object.keys(s).length > 0 ? s : void 0 }),
+        availableProperties: o
+      }
+    ) })
+  ] });
+}
+const z = () => ({
+  id: "",
+  sourceId: "",
+  collection: "",
+  label: "New Layer",
+  visible: !0,
+  dataMode: "vector-tiles"
+});
+function Ve({ layers: a, onChange: i, availableSources: p }) {
+  const [r, m] = w(null), [u, g] = w(!1), [n, l] = w(z()), [N, h] = w(null), [c, C] = w(null), [o, b] = w(null), y = () => {
+    i([...a, n]), g(!1), l(z());
+  }, D = (d) => {
+    i(a.map((v) => v.id === r ? d : v));
+  }, s = (d) => {
+    i(a.filter((v) => v.id !== d)), h(null), r === d && m(null);
+  }, T = (d) => {
+    if (d === 0) return;
+    const v = [...a];
+    [v[d - 1], v[d]] = [v[d], v[d - 1]], i(v);
+  }, M = (d) => {
+    if (d === a.length - 1) return;
+    const v = [...a];
+    [v[d], v[d + 1]] = [v[d + 1], v[d]], i(v);
+  }, f = (d, v) => {
+    C(v), d.dataTransfer.effectAllowed = "move", d.dataTransfer.setData("text/plain", v);
+  }, S = (d, v) => {
+    d.preventDefault(), d.dataTransfer.dropEffect = "move", b(v);
+  }, L = () => {
+    b(null);
+  }, k = (d, v) => {
+    d.preventDefault(), b(null);
+    const O = c;
+    if (C(null), !O || O === v) return;
+    const P = a.findIndex((j) => j.id === O), $ = a.findIndex((j) => j.id === v);
+    if (P === -1 || $ === -1) return;
+    const I = [...a];
+    I.splice(P, 1), I.splice($, 0, a[P]), i(I);
+  }, de = () => {
+    C(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: [
+      /* @__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: () => {
+            g(!0), l(z());
+          },
+          className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700",
+          children: "+ Add Layer"
+        }
+      )
+    ] }),
+    a.length === 0 && !u && /* @__PURE__ */ e("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No layers configured." }),
+    /* @__PURE__ */ e("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: a.map((d, v) => {
+      var I, j, Z, Y;
+      const O = c === d.id, P = o === d.id, $ = r === d.id;
+      return /* @__PURE__ */ t(
+        "li",
+        {
+          draggable: !$,
+          onDragStart: $ ? void 0 : (B) => f(B, d.id),
+          onDragOver: (B) => S(B, d.id),
+          onDragLeave: L,
+          onDrop: (B) => k(B, d.id),
+          onDragEnd: de,
+          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"
+          ].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__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => T(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: "▲"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => M(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: "▼"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "mapui:shrink-0 mapui:cursor-grab mapui:text-gray-400 active:mapui:cursor-grabbing",
+                    "aria-hidden": "true",
+                    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: d.label || d.id }),
+                  /* @__PURE__ */ e("span", { className: "mapui:font-mono mapui:text-xs mapui:text-gray-500", children: d.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: d.dataMode }),
+                    d.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: d.style.type }),
+                    d.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 = d.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: [
+                      d.search.fields.length,
+                      " search fields"
+                    ] }),
+                    (((Y = (Z = d.legend) == null ? void 0 : Z.entries) == null ? void 0 : Y.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: [
+                      d.legend.entries.length,
+                      " legend entries"
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => m(r === d.id ? null : d.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 === d.id ? "Close" : "Edit"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => h(d.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 === d.id && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(
+              pe,
+              {
+                value: d,
+                onChange: D,
+                availableSources: p
+              }
+            ) })
+          ]
+        },
+        d.id
+      );
+    }) }),
+    u && /* @__PURE__ */ t("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(
+        pe,
+        {
+          value: n,
+          onChange: l,
+          availableSources: p
+        }
+      ),
+      /* @__PURE__ */ t("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,
+            className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => g(!1),
+            className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      H,
+      {
+        open: N !== null,
+        title: "Remove Layer",
+        description: "Are you sure you want to remove this layer from the configuration?",
+        onConfirm: () => N && s(N),
+        onCancel: () => h(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 re({ 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(
+      "input",
+      {
+        type: "text",
+        value: a.id,
+        onChange: (r) => p({ id: r.target.value }),
+        placeholder: "osm",
+        className: G
+      }
+    ) }),
+    /* @__PURE__ */ e(x, { label: "Label", children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        value: a.label,
+        onChange: (r) => p({ label: r.target.value }),
+        placeholder: "OpenStreetMap",
+        className: G
+      }
+    ) }),
+    /* @__PURE__ */ e(x, { label: "Style URL", required: !0, children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "url",
+        value: a.url,
+        onChange: (r) => p({ url: r.target.value }),
+        placeholder: "https://example.com/style.json",
+        className: G
+      }
+    ) }),
+    /* @__PURE__ */ t(x, { label: "Thumbnail URL (optional)", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "url",
+          value: a.thumbnail ?? "",
+          onChange: (r) => p({ thumbnail: r.target.value || void 0 }),
+          placeholder: "https://example.com/thumbnail.png",
+          className: G
+        }
+      ),
+      a.thumbnail && /* @__PURE__ */ e(
+        "img",
+        {
+          src: a.thumbnail,
+          alt: "Thumbnail preview",
+          className: "mapui:mt-1 mapui:h-16 mapui:w-24 mapui:rounded mapui:border mapui:border-gray-200 mapui:object-cover"
+        }
+      )
+    ] })
+  ] });
+}
+const W = () => ({ id: "", label: "", url: "" });
+function Ge({ basemaps: a, onChange: i }) {
+  const [p, r] = w(null), [m, u] = w(!1), [g, n] = w(W()), [l, N] = w(null), h = (o) => {
+    i(a.map((b) => b.id === p ? o : b));
+  }, c = () => {
+    i([...a, g]), u(!1), n(W());
+  }, C = (o) => {
+    i(a.filter((b) => b.id !== o)), N(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: [
+      /* @__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());
+          },
+          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(
+      "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(
+              "img",
+              {
+                src: o.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__ */ t("div", { className: "mapui:flex mapui:shrink-0 mapui:gap-1", children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => r(p === o.id ? null : o.id),
+                  className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-600 hover:mapui:bg-gray-50",
+                  children: p === o.id ? "Close" : "Edit"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => N(o.id),
+                  className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-red-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-red-600 hover:mapui:bg-red-50",
+                  children: "Remove"
+                }
+              )
+            ] })
+          ] }),
+          p === o.id && /* @__PURE__ */ e("div", { className: "mapui:border-t mapui:border-gray-100 mapui:p-3", children: /* @__PURE__ */ e(re, { value: o, onChange: h }) })
+        ]
+      },
+      o.id
+    )) }),
+    m && /* @__PURE__ */ t("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(re, { value: g, onChange: n }),
+      /* @__PURE__ */ t("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: c,
+            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"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => u(!1),
+            className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      H,
+      {
+        open: l !== null,
+        title: "Remove Basemap",
+        description: "Are you sure you want to remove this basemap from the configuration?",
+        onConfirm: () => l && C(l),
+        onCancel: () => N(null)
+      }
+    )
+  ] });
+}
+const Me = [
+  { 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" },
+  { key: "showSearchPanel", label: "Search Panel", description: "Search and filter features" },
+  { key: "showCoordinateDisplay", label: "Coordinate Display", description: "Show cursor coordinates" },
+  { key: "showFeatureDetail", label: "Feature Detail Panel", description: "Inspect feature properties" },
+  { key: "showFeatureTooltip", label: "Feature Tooltip", description: "Hover tooltip on features" },
+  { key: "showExportButton", label: "Export Button", description: "Export data as CSV" }
+];
+function _e({ value: a, onChange: i }) {
+  const p = (r, m) => {
+    i({ ...a, [r]: m });
+  };
+  return /* @__PURE__ */ t("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: Me.map(({ key: r, label: m, description: u }) => {
+      const g = a[r];
+      return /* @__PURE__ */ t(
+        "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__ */ 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__ */ e(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: g,
+                  onChange: (n) => p(r, n.target.checked),
+                  className: "mapui:sr-only",
+                  "aria-label": m
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: [
+                    "mapui:relative mapui:h-5 mapui:w-9 mapui:rounded-full mapui:transition-colors",
+                    g ? "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",
+                        g ? "mapui:translate-x-4" : "mapui:translate-x-0.5"
+                      ].join(" ")
+                    }
+                  )
+                }
+              )
+            ] })
+          ]
+        },
+        r
+      );
+    }) })
+  ] });
+}
+const ce = [
+  { 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 Ie(a, i) {
+  const p = ce.find((r) => r.key === a);
+  if (p) {
+    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}`;
+  }
+}
+const je = "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 Qe({ value: a, onChange: i }) {
+  const p = (r, m) => {
+    const u = parseFloat(m);
+    i({ ...a, [r]: isNaN(u) ? 0 : u });
+  };
+  return /* @__PURE__ */ e("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: ce.map(({ key: r, label: m, min: u, max: g, step: n, placeholder: l }) => {
+    const N = Ie(r, a[r]);
+    return /* @__PURE__ */ e(x, { label: m, error: N, children: /* @__PURE__ */ e(
+      "input",
+      {
+        type: "number",
+        min: u,
+        max: g,
+        step: n,
+        value: a[r],
+        placeholder: l,
+        onChange: (h) => p(r, h.target.value),
+        className: `${je} ${N ? "mapui:border-red-400" : ""}`
+      }
+    ) }, r);
+  }) });
+}
+function ze({ config: a }) {
+  const i = ge(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: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: [
+            "mapui:inline-flex mapui:items-center mapui:rounded-full mapui:px-2.5 mapui:py-0.5 mapui:text-xs mapui:font-semibold",
+            i.success ? "mapui:bg-green-100 mapui:text-green-800" : "mapui:bg-red-100 mapui:text-red-800"
+          ].join(" "),
+          children: i.success ? "Valid" : "Invalid"
+        }
+      ),
+      /* @__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: [
+      /* @__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("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 {
+  Za as BasemapConfigSchema,
+  re as BasemapEditor,
+  Ge as BasemapList,
+  He as BasemapSwitcher,
+  Ya as CirclePaintSchema,
+  Xa as CircleStyleSchema,
+  Ze as CollapsibleControl,
+  qe as CollectionBrowser,
+  A as ColorPicker,
+  ze as ConfigPreview,
+  H as ConfirmDialog,
+  Xe as CoordinateDisplay,
+  ei as DatetimeSearchFieldSchema,
+  ta as ExportButton,
+  ra as FeatureDetailPanel,
+  ua as FeatureTooltip,
+  ai as FillPaintSchema,
+  ii as FillStyleSchema,
+  ti as FilterConfigSchema,
+  x as FormField,
+  pi as LayerConfigSchema,
+  pe as LayerEditor,
+  Ve as LayerList,
+  na as LayerPanel,
+  sa as Legend,
+  ri as LegendConfigSchema,
+  Ne as LegendEditor,
+  ye as LegendEntryEditor,
+  li as LegendEntrySchema,
+  ui as LinePaintSchema,
+  mi as LineStyleSchema,
+  ni as MapConfigSchema,
+  oi as NumberSearchFieldSchema,
+  si as OgcApiSourceSchema,
+  ci as PropertyDisplayConfigSchema,
+  Fe as PropertyDisplayEditor,
+  di as PropertyDisplaySchema,
+  hi as SearchConfigSchema,
+  we as SearchFieldEditor,
+  ke as SearchFieldList,
+  bi as SearchFieldSchema,
+  da as SearchPanel,
+  gi as SelectSearchFieldSchema,
+  ae as SourceEditor,
+  Be as SourceList,
+  xi as StyleConfigSchema,
+  fe as StyleEditor,
+  fi as TextSearchFieldSchema,
+  _e as UIConfigEditor,
+  yi as UIConfigSchema,
+  Ni as ViewConfigSchema,
+  Qe as ViewEditor,
+  ba as and,
+  ga as between,
+  ne as defaultCircle,
+  J as defaultFill,
+  me as defaultLine,
+  se as detectGeometryTypeFromQueryables,
+  Re as detectStyleTypeForCollection,
+  xa as downloadCsv,
+  fa as eq,
+  Ee as extractGeometryType,
+  ya as featuresToCsv,
+  Na as fetchCollectionDetail,
+  va as fetchCollections,
+  wa as fetchConformance,
+  Ca as fetchDistinctValues,
+  ka as fetchFeatureCount,
+  ue as fetchFeatures,
+  he as fetchQueryables,
+  Sa as fetchTileJson,
+  ea as formatDMS,
+  aa as formatDecimal,
+  La as fromSimpleFilters,
+  Fa as fromStructuredFilters,
+  K as geometryTypeToStyleType,
+  Da as getCql2FilteredVectorTileUrl,
+  Ea as getFilteredVectorTileUrl,
+  Ta as getTileJsonUrl,
+  Ma as getVectorTileUrl,
+  Ia as gt,
+  ja as gte,
+  Ue as humanizePropertyName,
+  Aa as inList,
+  De as isGeometryProperty,
+  Oa as isNull,
+  Pa as like,
+  $a as lt,
+  Ba as lte,
+  qa as neq,
+  Ra as not,
+  Ua as or,
+  Va as resolvePropertyDisplay,
+  ge as safeValidateMapConfig,
+  Ga as serializeCql2,
+  _a as tAfter,
+  Qa as tBefore,
+  za as tDuring,
+  Te as toAvailableProperties,
+  Wa as useCsvExport,
+  Ja as useOgcCollectionDetail,
+  le as useOgcCollections,
+  Ha as useOgcFeatures,
+  be as useOgcQueryables,
+  vi as validateMapConfig
 };