declarative-ui-core 1.0.7 → 1.0.9

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs as v, jsx as r } from "react/jsx-runtime";
-import { useRef as T, useState as D, useEffect as C, useMemo as j } from "react";
+import { useRef as T, useState as O, useEffect as C, useMemo as j } from "react";
 import P from "maplibre-gl";
 import J from "react-markdown";
 import F from "mermaid";
@@ -87,7 +87,7 @@ function Y({ page: i, componentId: t, component: e }) {
   ] });
 }
 function I() {
-  const i = T(null), [t, e] = D({ width: 0, height: 0 });
+  const i = T(null), [t, e] = O({ width: 0, height: 0 });
   return C(() => {
     const n = i.current;
     if (!n) return;
@@ -100,7 +100,7 @@ function I() {
     return l.observe(n), () => l.disconnect();
   }, []), { ref: i, size: t };
 }
-function q(i, t) {
+function E(i, t) {
   if (!t) return;
   const e = i.setProjection;
   if (typeof e != "function") return;
@@ -193,12 +193,25 @@ function H(i, t) {
     layers: h
   };
 }
-function E(i, t) {
+function q(i, t) {
   const e = "data", n = "circle-data", l = W(t);
   console.log("[MapLibreGL] ensureDataSourceAndLayer called with", t.length, "rows"), console.log("[MapLibreGL] GeoJSON features:", l.features.length);
   try {
     const s = i.getSource(e) ?? null;
-    s && typeof s.setData == "function" ? (console.log("[MapLibreGL] Updating existing source"), s.setData(l)) : (console.log("[MapLibreGL] Adding new source"), i.addSource(e, { type: "geojson", data: l }));
+    if (s && typeof s.setData == "function") {
+      console.log("[MapLibreGL] Updating existing source");
+      try {
+        s.setData(l);
+      } catch (y) {
+        console.error("[MapLibreGL] Error in setData, trying to remove and re-add source:", y);
+        try {
+          i.removeSource(e);
+        } catch {
+        }
+        i.addSource(e, { type: "geojson", data: l });
+      }
+    } else
+      console.log("[MapLibreGL] Adding new source"), i.addSource(e, { type: "geojson", data: l });
   } catch (s) {
     console.error("[MapLibreGL] Error adding/updating source:", s);
   }
@@ -221,22 +234,22 @@ function E(i, t) {
   }
 }
 function Q({ page: i, componentId: t, component: e }) {
-  const n = e.title ?? t, l = "circle-data", { ref: s, size: y } = I(), f = T(null), h = T([]), b = T(/* @__PURE__ */ new Map()), c = j(() => _(e.config), [e.config]), u = j(() => A(i, e.dataRef), [i, e.dataRef]), w = j(() => {
+  const n = e.title ?? t, l = "circle-data", { ref: s, size: y } = I(), f = T(null), h = T([]), b = T(/* @__PURE__ */ new Map()), c = j(() => _(e.config), [e.config]), u = j(() => A(i, e.dataRef), [i, e.dataRef]), k = j(() => {
     if (!u || u.length === 0) return null;
-    let d = 1 / 0, a = 1 / 0, L = -1 / 0, p = -1 / 0;
+    let d = 1 / 0, a = 1 / 0, w = -1 / 0, p = -1 / 0;
     for (const m of u) {
-      const k = typeof m.longitude == "number" ? m.longitude : typeof m.lng == "number" ? m.lng : typeof m.lon == "number" ? m.lon : void 0, M = typeof m.latitude == "number" ? m.latitude : typeof m.lat == "number" ? m.lat : void 0;
-      typeof k != "number" || typeof M != "number" || !Number.isFinite(k) || !Number.isFinite(M) || (d = Math.min(d, k), a = Math.min(a, M), L = Math.max(L, k), p = Math.max(p, M));
+      const x = typeof m.longitude == "number" ? m.longitude : typeof m.lng == "number" ? m.lng : typeof m.lon == "number" ? m.lon : void 0, S = typeof m.latitude == "number" ? m.latitude : typeof m.lat == "number" ? m.lat : void 0;
+      typeof x != "number" || typeof S != "number" || !Number.isFinite(x) || !Number.isFinite(S) || (d = Math.min(d, x), a = Math.min(a, S), w = Math.max(w, x), p = Math.max(p, S));
     }
-    return !Number.isFinite(d) || !Number.isFinite(a) || !Number.isFinite(L) || !Number.isFinite(p) ? null : [
+    return !Number.isFinite(d) || !Number.isFinite(a) || !Number.isFinite(w) || !Number.isFinite(p) ? null : [
       [d, a],
-      [L, p]
+      [w, p]
     ];
   }, [u]), g = j(() => {
     if (!c.options) return;
     const { projection: d, ...a } = c.options;
     return a;
-  }, [c.options]), x = j(() => {
+  }, [c.options]), L = j(() => {
     const d = c.options?.projection;
     if (typeof d == "string") return d;
     if (d && typeof d == "object" && typeof d.name == "string") return d.name;
@@ -245,7 +258,7 @@ function Q({ page: i, componentId: t, component: e }) {
     if (typeof a == "string") return a;
     if (a && typeof a == "object" && typeof a.name == "string") return a.name;
     if (a && typeof a == "object" && typeof a.type == "string") return a.type;
-  }, [c.options, c.style]), S = typeof c.style == "string" && typeof x == "string", R = typeof c.style == "string" && Array.isArray(u) && u.length > 0, U = j(
+  }, [c.options, c.style]), M = typeof c.style == "string" && typeof L == "string", R = typeof c.style == "string" && Array.isArray(u) && u.length > 0, U = j(
     () => ({
       version: 8,
       sources: {},
@@ -253,12 +266,12 @@ function Q({ page: i, componentId: t, component: e }) {
     }),
     []
   ), N = (d) => {
-    if (!S && !R) return;
-    const a = c.style, L = b.current.get(a);
-    if (L) {
+    if (!M && !R) return;
+    const a = c.style, w = b.current.get(a);
+    if (w) {
       try {
-        let p = L;
-        S && (p = { ...p ?? {}, projection: { type: x } }), R && e.dataRef && u && (p = H(p, u) ?? p), d.setStyle(p);
+        let p = w;
+        M && (p = { ...p ?? {}, projection: { type: L } }), R && e.dataRef && u && (p = H(p, u) ?? p), d.setStyle(p);
       } catch {
       }
       return;
@@ -266,85 +279,84 @@ function Q({ page: i, componentId: t, component: e }) {
     fetch(a).then((p) => p.json()).then((p) => {
       b.current.set(a, p);
       let m = p ?? {};
-      S && (m = { ...m, projection: { type: x } }), R && e.dataRef && u && (m = H(m, u) ?? m);
+      M && (m = { ...m, projection: { type: L } }), R && e.dataRef && u && (m = H(m, u) ?? m);
       try {
         d.setStyle(m);
       } catch {
       }
     }).catch(() => {
     });
-  }, z = j(() => {
+  }, $ = j(() => {
     if (c.style)
       return typeof c.style == "object" && c.style && e.dataRef && Array.isArray(u) && u.length > 0 ? H(c.style, u) ?? c.style : c.style;
   }, [c.style, e.dataRef, u]);
   return C(() => {
     const d = s.current;
-    if (!d || !z) return;
+    if (!d || !$) return;
     if (!f.current) {
-      const L = {
+      const w = {
         container: d,
-        style: typeof z == "string" && (S || R) ? U : z,
+        style: typeof $ == "string" && (M || R) ? U : $,
         attributionControl: {},
         ...g ?? {}
-      }, p = new P.Map(L);
+      }, p = new P.Map(w);
       N(p);
-      const m = () => q(p, x);
+      const m = () => E(p, L);
       p.once("load", m), p.once("style.load", m), p.addControl(new P.NavigationControl({ visualizePitch: !0 }), "top-right");
-      const k = () => {
-        if (u && u.length > 0 && (E(p, u), !c.options?.center && c.options?.zoom === void 0 && w))
-          try {
-            p.fitBounds(w, { padding: 30, duration: 0, maxZoom: 12 });
-          } catch {
-          }
+      const x = () => {
+        u && u.length > 0 && setTimeout(() => {
+          if (p.isStyleLoaded() && (q(p, u), !c.options?.center && c.options?.zoom === void 0 && k))
+            try {
+              p.fitBounds(k, { padding: 30, duration: 0, maxZoom: 12 });
+            } catch {
+            }
+        }, 100);
       };
-      return p.once("style.load", k), f.current = p, () => {
-        h.current.forEach((M) => M.remove()), h.current = [], f.current = null, p.remove();
+      return p.on("style.load", x), p.once("load", x), f.current = p, () => {
+        h.current.forEach((S) => S.remove()), h.current = [], f.current = null, p.remove();
       };
     }
     const a = f.current;
-    if (S || R)
+    if (M || R)
       N(a);
     else
       try {
-        a.setStyle(z);
+        a.setStyle($);
       } catch {
       }
-    if (x) {
-      const L = () => q(a, x);
-      a.once("style.load", L), a.once("render", L);
+    if (L) {
+      const w = () => E(a, L);
+      a.once("style.load", w), a.once("render", w);
     }
     if (c.options?.center && c.options?.zoom !== void 0)
       try {
         a.jumpTo({ center: c.options.center, zoom: c.options.zoom });
       } catch {
       }
-  }, [z, g, s, x, R, S, u, w, c.options?.center, c.options?.zoom]), C(() => {
+  }, [$, g, s, L, R, M, u, k, c.options?.center, c.options?.zoom]), C(() => {
     const d = f.current;
     if (!d || !u || u.length === 0) return;
     const a = () => {
-      if (console.log("[MapLibreGL] apply() called, isStyleLoaded:", d.isStyleLoaded()), E(d, u), !c.options?.center && c.options?.zoom === void 0 && w)
+      if (console.log("[MapLibreGL] apply() called, isStyleLoaded:", d.isStyleLoaded()), q(d, u), !c.options?.center && c.options?.zoom === void 0 && k)
         try {
-          d.fitBounds(w, { padding: 30, duration: 0, maxZoom: 12 });
+          d.fitBounds(k, { padding: 30, duration: 0, maxZoom: 12 });
         } catch {
         }
+    }, w = [];
+    d.isStyleLoaded() && a();
+    const p = () => {
+      console.log("[MapLibreGL] style.load event fired"), setTimeout(a, 50);
+    }, m = () => {
+      console.log("[MapLibreGL] load event fired"), setTimeout(a, 50);
     };
-    if (d.isStyleLoaded())
-      a();
-    else {
-      const L = () => {
-        console.log("[MapLibreGL] style.load event fired"), a();
-      }, p = () => {
-        console.log("[MapLibreGL] load event fired"), a();
-      };
-      d.once("style.load", L), d.once("load", p);
-      const m = setTimeout(() => {
-        d.isStyleLoaded() && (console.log("[MapLibreGL] Fallback timer applying data layer"), a());
-      }, 1e3);
-      return () => {
-        clearTimeout(m);
-      };
-    }
-  }, [u, w, c.options?.center, c.options?.zoom]), C(() => {
+    return d.once("style.load", p), d.once("load", m), [500, 1e3, 2e3, 3e3].forEach((x) => {
+      w.push(setTimeout(() => {
+        d.isStyleLoaded() && (console.log(`[MapLibreGL] Fallback timer (${x}ms) applying data layer`), a());
+      }, x));
+    }), () => {
+      w.forEach((x) => clearTimeout(x));
+    };
+  }, [u, k, c.options?.center, c.options?.zoom]), C(() => {
     const d = f.current;
     d && (y.width <= 0 || y.height <= 0 || d.resize());
   }, [y.width, y.height]), C(() => {
@@ -353,34 +365,34 @@ function Q({ page: i, componentId: t, component: e }) {
     const a = new P.Popup({
       closeButton: !1,
       closeOnClick: !1
-    }), L = (k) => {
-      if (!k.features || k.features.length === 0) return;
-      const M = k.features[0], $ = M.properties ?? {}, B = $.name ?? $.region ?? $.title ?? $.label ?? $.description;
+    }), w = (x) => {
+      if (!x.features || x.features.length === 0) return;
+      const S = x.features[0], z = S.properties ?? {}, B = z.name ?? z.region ?? z.title ?? z.label ?? z.description;
       if (B) {
         d.getCanvas().style.cursor = "pointer";
-        const Z = M.geometry.coordinates.slice();
+        const Z = S.geometry.coordinates.slice();
         a.setLngLat(Z).setHTML(`<div style="padding: 4px 8px; font-size: 13px;">${B}</div>`).addTo(d);
       }
     }, p = () => {
       d.getCanvas().style.cursor = "", a.remove();
     }, m = () => {
-      d.getLayer(l) ? (d.on("mouseenter", l, L), d.on("mouseleave", l, p)) : d.once("styledata", m);
+      d.getLayer(l) ? (d.on("mouseenter", l, w), d.on("mouseleave", l, p)) : d.once("styledata", m);
     };
     return m(), () => {
-      a.remove(), d && !d._removed && d.getLayer(l) && (d.off("mouseenter", l, L), d.off("mouseleave", l, p));
+      a.remove(), d && !d._removed && d.getLayer(l) && (d.off("mouseenter", l, w), d.off("mouseleave", l, p));
     };
   }, [u, l]), C(() => {
     const d = f.current;
     d && (h.current.forEach((a) => a.remove()), h.current = [], (c.markers ?? []).forEach((a) => {
       const p = a.shape === "circle" || typeof a.radius == "number" || typeof a.color == "string" ? document.createElement("div") : null;
       if (p) {
-        const k = typeof a.radius == "number" && Number.isFinite(a.radius) ? Math.max(2, a.radius) : 8;
-        p.style.width = `${k * 2}px`, p.style.height = `${k * 2}px`, p.style.borderRadius = "999px", p.style.background = typeof a.color == "string" ? a.color : "#2563eb", p.style.border = "2px solid #ffffff", p.style.boxShadow = "0 2px 10px rgba(0,0,0,0.25)";
+        const x = typeof a.radius == "number" && Number.isFinite(a.radius) ? Math.max(2, a.radius) : 8;
+        p.style.width = `${x * 2}px`, p.style.height = `${x * 2}px`, p.style.borderRadius = "999px", p.style.background = typeof a.color == "string" ? a.color : "#2563eb", p.style.border = "2px solid #ffffff", p.style.boxShadow = "0 2px 10px rgba(0,0,0,0.25)";
       }
       const m = new P.Marker(p ? { element: p } : void 0).setLngLat(a.lngLat);
       if (a.popup || a.name) {
-        const k = a.popup ?? `<div style="font-size:12px"><strong>${a.name ?? ""}</strong></div>`;
-        m.setPopup(new P.Popup({ offset: 20 }).setHTML(k));
+        const x = a.popup ?? `<div style="font-size:12px"><strong>${a.name ?? ""}</strong></div>`;
+        m.setPopup(new P.Popup({ offset: 20 }).setHTML(x));
       }
       m.addTo(d), h.current.push(m);
     }));
@@ -412,19 +424,19 @@ F.initialize({
   securityLevel: "loose"
 });
 function te({ page: i, componentId: t, component: e }) {
-  const n = e.title ?? t, l = typeof e.config?.mermaid == "string" ? e.config.mermaid : "", s = T(null), [y, f] = D(1);
+  const n = e.title ?? t, l = typeof e.config?.mermaid == "string" ? e.config.mermaid : "", s = T(null), [y, f] = O(1);
   C(() => {
     if (!l || !s.current) return;
     (async () => {
       try {
-        const w = `mermaid-${t}-${Date.now()}`, { svg: g } = await F.render(w, l);
+        const k = `mermaid-${t}-${Date.now()}`, { svg: g } = await F.render(k, l);
         if (s.current) {
           s.current.innerHTML = g;
-          const x = s.current.querySelector("svg");
-          x && (x.style.maxWidth = "100%", x.style.height = "auto");
+          const L = s.current.querySelector("svg");
+          L && (L.style.maxWidth = "100%", L.style.height = "auto");
         }
-      } catch (w) {
-        s.current && (s.current.innerHTML = `<div style="color: #dc2626; padding: 8px;">Error rendering diagram: ${w instanceof Error ? w.message : String(w)}</div>`);
+      } catch (k) {
+        s.current && (s.current.innerHTML = `<div style="color: #dc2626; padding: 8px;">Error rendering diagram: ${k instanceof Error ? k.message : String(k)}</div>`);
       }
     })();
   }, [l, t]);
@@ -544,9 +556,9 @@ function oe({ page: i, componentId: t, component: e }) {
     autosize: { type: "fit", contains: "padding" },
     width: Math.floor(s.width),
     height: Math.floor(s.height)
-  } : b, u = n ? { ...c, data: { values: n } } : ne(c) ? { ...c, data: { values: [{}] } } : c, w = e.title === "" ? "" : e.title ?? t;
+  } : b, u = n ? { ...c, data: { values: n } } : ne(c) ? { ...c, data: { values: [{}] } } : c, k = e.title === "" ? "" : e.title ?? t;
   return /* @__PURE__ */ v("div", { style: o.panel, children: [
-    w ? /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: w }) }) : null,
+    k ? /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: k }) }) : null,
     /* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("div", { ref: l, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ r(K, { spec: u, actions: !1 }) }) })
   ] });
 }
@@ -570,7 +582,7 @@ function G({ page: i, componentId: t, component: e }) {
       return /* @__PURE__ */ r(ie, { page: i, componentId: t, component: e });
   }
 }
-function O(i, t, e) {
+function D(i, t, e) {
   return Math.min(e, Math.max(t, i));
 }
 function se(i) {
@@ -578,7 +590,7 @@ function se(i) {
   return { maxBottom: t, maxRight: e };
 }
 function Le({ page: i }) {
-  const { ref: t, size: e } = I(), n = i.layout.cols ?? 24, l = i.layout.rowHeight ?? 30, s = i.layout.margin?.[0] ?? 10, y = i.layout.margin?.[1] ?? 10, f = i.layout.containerPadding?.[0] ?? 0, h = i.layout.containerPadding?.[1] ?? 0, { maxBottom: b } = se(i.layout.items), c = b * l + Math.max(0, b - 1) * y + h * 2, u = e.width > 0 ? e.width < 768 : !1, w = [...i.layout.items].sort((g, x) => g.y - x.y || g.x - x.x);
+  const { ref: t, size: e } = I(), n = i.layout.cols ?? 24, l = i.layout.rowHeight ?? 30, s = i.layout.margin?.[0] ?? 10, y = i.layout.margin?.[1] ?? 10, f = i.layout.containerPadding?.[0] ?? 0, h = i.layout.containerPadding?.[1] ?? 0, { maxBottom: b } = se(i.layout.items), c = b * l + Math.max(0, b - 1) * y + h * 2, u = e.width > 0 ? e.width < 768 : !1, k = [...i.layout.items].sort((g, L) => g.y - L.y || g.x - L.x);
   return /* @__PURE__ */ r("div", { ref: t, children: u ? /* @__PURE__ */ r(
     "div",
     {
@@ -588,9 +600,9 @@ function Le({ page: i }) {
         gap: y,
         padding: `${h}px ${f}px`
       },
-      children: w.map((g) => {
-        const x = i.components[g.i], S = g.h * l + Math.max(0, g.h - 1) * y;
-        return /* @__PURE__ */ r("div", { style: { width: "100%", height: S }, children: x ? /* @__PURE__ */ r(G, { page: i, componentId: g.i, component: x }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
+      children: k.map((g) => {
+        const L = i.components[g.i], M = g.h * l + Math.max(0, g.h - 1) * y;
+        return /* @__PURE__ */ r("div", { style: { width: "100%", height: M }, children: L ? /* @__PURE__ */ r(G, { page: i, componentId: g.i, component: L }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
           /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: g.i }) }),
           /* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ v("div", { style: o.error, children: [
             "No entry in components for id: ",
@@ -611,17 +623,17 @@ function Le({ page: i }) {
         minHeight: c
       },
       children: i.layout.items.map((g) => {
-        const x = i.components[g.i];
+        const L = i.components[g.i];
         return /* @__PURE__ */ r(
           "div",
           {
             style: {
-              gridColumnStart: O(g.x + 1, 1, n + 1),
-              gridColumnEnd: `span ${O(g.w, 1, n)}`,
+              gridColumnStart: D(g.x + 1, 1, n + 1),
+              gridColumnEnd: `span ${D(g.w, 1, n)}`,
               gridRowStart: Math.max(1, g.y + 1),
               gridRowEnd: `span ${Math.max(1, g.h)}`
             },
-            children: x ? /* @__PURE__ */ r(G, { page: i, componentId: g.i, component: x }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
+            children: L ? /* @__PURE__ */ r(G, { page: i, componentId: g.i, component: L }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
               /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: g.i }) }),
               /* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ v("div", { style: o.error, children: [
                 "No entry in components for id: ",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "declarative-ui-core",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",