declarative-ui-core 1.0.6 → 1.0.8

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs as v, jsx as r } from "react/jsx-runtime";
-import { useRef as A, useState as G, useEffect as C, useMemo as S } from "react";
+import { useRef as T, useState as D, useEffect as C, useMemo as j } from "react";
 import P from "maplibre-gl";
 import J from "react-markdown";
 import F from "mermaid";
@@ -67,35 +67,35 @@ function X({ componentId: i, component: t }) {
     ] }) })
   ] });
 }
-function T(i, t) {
+function A(i, t) {
   if (!t) return;
   const e = t.startsWith("data.") ? t.slice(5) : t, n = i.data?.[e];
   if (!(!n || n.source !== "inline"))
     return n.rows;
 }
 function Y({ page: i, componentId: t, component: e }) {
-  const n = T(i, e.dataRef) ?? [], l = e.config?.mode, s = e.config?.displayFields, p = s && s.length > 0 ? s : n.length > 0 ? Object.keys(n[0]) : [];
+  const n = A(i, e.dataRef) ?? [], l = e.config?.mode, s = e.config?.displayFields, y = s && s.length > 0 ? s : n.length > 0 ? Object.keys(n[0]) : [];
   return /* @__PURE__ */ v("div", { style: o.panel, children: [
     /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: e.title ?? t }) }),
-    /* @__PURE__ */ r("div", { style: o.panelBody, children: l === "kv" && n.length === 1 ? /* @__PURE__ */ r("div", { style: o.kvList, children: Object.entries(n[0]).map(([y, m]) => /* @__PURE__ */ v("div", { style: o.kvRow, children: [
-      /* @__PURE__ */ r("div", { style: o.kvKey, children: y }),
-      /* @__PURE__ */ r("div", { style: o.kvValue, children: String(m) })
-    ] }, y)) }) : p.length > 0 ? /* @__PURE__ */ r("div", { style: o.listCards, children: n.map((y, m) => /* @__PURE__ */ r("div", { style: o.listCard, children: p.map((b) => /* @__PURE__ */ v("div", { style: o.listCardRow, children: [
+    /* @__PURE__ */ r("div", { style: o.panelBody, children: l === "kv" && n.length === 1 ? /* @__PURE__ */ r("div", { style: o.kvList, children: Object.entries(n[0]).map(([f, h]) => /* @__PURE__ */ v("div", { style: o.kvRow, children: [
+      /* @__PURE__ */ r("div", { style: o.kvKey, children: f }),
+      /* @__PURE__ */ r("div", { style: o.kvValue, children: String(h) })
+    ] }, f)) }) : y.length > 0 ? /* @__PURE__ */ r("div", { style: o.listCards, children: n.map((f, h) => /* @__PURE__ */ r("div", { style: o.listCard, children: y.map((b) => /* @__PURE__ */ v("div", { style: o.listCardRow, children: [
       /* @__PURE__ */ r("div", { style: o.listCardLabel, children: b }),
-      /* @__PURE__ */ r("div", { style: o.listCardValue, children: String(y[b] ?? "") })
-    ] }, b)) }, m)) }) : /* @__PURE__ */ r("pre", { style: o.pre, children: JSON.stringify(n, null, 2) }) })
+      /* @__PURE__ */ r("div", { style: o.listCardValue, children: String(f[b] ?? "") })
+    ] }, b)) }, h)) }) : /* @__PURE__ */ r("pre", { style: o.pre, children: JSON.stringify(n, null, 2) }) })
   ] });
 }
 function I() {
-  const i = A(null), [t, e] = G({ width: 0, height: 0 });
+  const i = T(null), [t, e] = D({ width: 0, height: 0 });
   return C(() => {
     const n = i.current;
     if (!n) return;
     const l = new ResizeObserver((s) => {
-      const p = s[0];
-      if (!p) return;
-      const y = p.contentRect, m = { width: Math.round(y.width), height: Math.round(y.height) };
-      e((b) => Math.abs(b.width - m.width) <= 1 && Math.abs(b.height - m.height) <= 1 ? b : m);
+      const y = s[0];
+      if (!y) return;
+      const f = y.contentRect, h = { width: Math.round(f.width), height: Math.round(f.height) };
+      e((b) => Math.abs(b.width - h.width) <= 1 && Math.abs(b.height - h.height) <= 1 ? b : h);
     });
     return l.observe(n), () => l.disconnect();
   }, []), { ref: i, size: t };
@@ -117,11 +117,11 @@ function _(i) {
   const t = i, e = Array.isArray(t.markers) ? t.markers : void 0, n = e ? e.map((l) => {
     if (!l) return null;
     if ("lngLat" in l) {
-      const s = l, p = s.lngLat;
-      if (Array.isArray(p) && p.length === 2)
+      const s = l, y = s.lngLat;
+      if (Array.isArray(y) && y.length === 2)
         return {
           name: typeof s.name == "string" ? s.name : void 0,
-          lngLat: [Number(p[0]), Number(p[1])],
+          lngLat: [Number(y[0]), Number(y[1])],
           popup: typeof s.popup == "string" ? s.popup : void 0,
           shape: typeof s.shape == "string" ? s.shape : void 0,
           color: typeof s.color == "string" ? s.color : void 0,
@@ -131,11 +131,11 @@ function _(i) {
     if ("longitude" in l && "latitude" in l) {
       const s = l;
       if (typeof s.longitude == "number" && typeof s.latitude == "number") {
-        const p = typeof s.title == "string" ? s.title : void 0, y = typeof s.description == "string" ? s.description : void 0;
+        const y = typeof s.title == "string" ? s.title : void 0, f = typeof s.description == "string" ? s.description : void 0;
         return {
-          name: p,
+          name: y,
           lngLat: [Number(s.longitude), Number(s.latitude)],
-          popup: y,
+          popup: f,
           shape: typeof s.shape == "string" ? s.shape : void 0,
           color: typeof s.color == "string" ? s.color : void 0,
           radius: typeof s.radius == "number" ? s.radius : void 0
@@ -175,8 +175,8 @@ function H(i, t) {
     type: "geojson",
     data: l
   };
-  const p = Array.isArray(i.layers) ? [...i.layers] : [], y = !V(i, e), m = p.filter((b) => b && typeof b == "object" && b.id !== n);
-  return y && m.push({
+  const y = Array.isArray(i.layers) ? [...i.layers] : [], f = !V(i, e), h = y.filter((b) => b && typeof b == "object" && b.id !== n);
+  return f && h.push({
     id: n,
     type: "circle",
     source: e,
@@ -190,7 +190,7 @@ function H(i, t) {
   }), {
     ...i,
     sources: s,
-    layers: m
+    layers: h
   };
 }
 function E(i, t) {
@@ -203,8 +203,8 @@ function E(i, t) {
     console.error("[MapLibreGL] Error adding/updating source:", s);
   }
   try {
-    const s = i.getStyle(), p = V(s, e);
-    console.log("[MapLibreGL] hasAnyLayerUsingSource:", p, "hasLayer:", !!i.getLayer(n)), !p && !i.getLayer(n) && (console.log("[MapLibreGL] Adding circle layer"), i.addLayer({
+    const s = i.getStyle(), y = V(s, e);
+    console.log("[MapLibreGL] hasAnyLayerUsingSource:", y, "hasLayer:", !!i.getLayer(n)), !y && !i.getLayer(n) && (console.log("[MapLibreGL] Adding circle layer"), i.addLayer({
       id: n,
       type: "circle",
       source: e,
@@ -221,22 +221,22 @@ function E(i, t) {
   }
 }
 function Q({ page: i, componentId: t, component: e }) {
-  const n = e.title ?? t, l = "circle-data", { ref: s, size: p } = I(), y = A(null), m = A([]), b = A(/* @__PURE__ */ new Map()), c = S(() => _(e.config), [e.config]), u = S(() => T(i, e.dataRef), [i, e.dataRef]), w = S(() => {
+  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(() => {
     if (!u || u.length === 0) return null;
-    let d = 1 / 0, a = 1 / 0, L = -1 / 0, f = -1 / 0;
-    for (const h of u) {
-      const k = typeof h.longitude == "number" ? h.longitude : typeof h.lng == "number" ? h.lng : typeof h.lon == "number" ? h.lon : void 0, j = typeof h.latitude == "number" ? h.latitude : typeof h.lat == "number" ? h.lat : void 0;
-      typeof k != "number" || typeof j != "number" || !Number.isFinite(k) || !Number.isFinite(j) || (d = Math.min(d, k), a = Math.min(a, j), L = Math.max(L, k), f = Math.max(f, j));
+    let d = 1 / 0, a = 1 / 0, L = -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));
     }
-    return !Number.isFinite(d) || !Number.isFinite(a) || !Number.isFinite(L) || !Number.isFinite(f) ? null : [
+    return !Number.isFinite(d) || !Number.isFinite(a) || !Number.isFinite(L) || !Number.isFinite(p) ? null : [
       [d, a],
-      [L, f]
+      [L, p]
     ];
-  }, [u]), g = S(() => {
+  }, [u]), g = j(() => {
     if (!c.options) return;
     const { projection: d, ...a } = c.options;
     return a;
-  }, [c.options]), x = S(() => {
+  }, [c.options]), x = 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 +245,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]), M = typeof c.style == "string" && typeof x == "string", R = typeof c.style == "string" && Array.isArray(u) && u.length > 0, U = S(
+  }, [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(
     () => ({
       version: 8,
       sources: {},
@@ -253,56 +253,56 @@ function Q({ page: i, componentId: t, component: e }) {
     }),
     []
   ), N = (d) => {
-    if (!M && !R) return;
+    if (!S && !R) return;
     const a = c.style, L = b.current.get(a);
     if (L) {
       try {
-        let f = L;
-        M && (f = { ...f ?? {}, projection: { type: x } }), R && e.dataRef && u && (f = H(f, u) ?? f), d.setStyle(f);
+        let p = L;
+        S && (p = { ...p ?? {}, projection: { type: x } }), R && e.dataRef && u && (p = H(p, u) ?? p), d.setStyle(p);
       } catch {
       }
       return;
     }
-    fetch(a).then((f) => f.json()).then((f) => {
-      b.current.set(a, f);
-      let h = f ?? {};
-      M && (h = { ...h, projection: { type: x } }), R && e.dataRef && u && (h = H(h, u) ?? h);
+    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);
       try {
-        d.setStyle(h);
+        d.setStyle(m);
       } catch {
       }
     }).catch(() => {
     });
-  }, z = S(() => {
+  }, z = 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 (!y.current) {
+    if (!f.current) {
       const L = {
         container: d,
-        style: typeof z == "string" && (M || R) ? U : z,
+        style: typeof z == "string" && (S || R) ? U : z,
         attributionControl: {},
         ...g ?? {}
-      }, f = new P.Map(L);
-      N(f);
-      const h = () => q(f, x);
-      f.once("load", h), f.once("style.load", h), f.addControl(new P.NavigationControl({ visualizePitch: !0 }), "top-right");
+      }, p = new P.Map(L);
+      N(p);
+      const m = () => q(p, x);
+      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(f, u), !c.options?.center && c.options?.zoom === void 0 && w))
+        if (u && u.length > 0 && (E(p, u), !c.options?.center && c.options?.zoom === void 0 && w))
           try {
-            f.fitBounds(w, { padding: 30, duration: 0, maxZoom: 12 });
+            p.fitBounds(w, { padding: 30, duration: 0, maxZoom: 12 });
           } catch {
           }
       };
-      return f.once("style.load", k), y.current = f, () => {
-        m.current.forEach((j) => j.remove()), m.current = [], y.current = null, f.remove();
+      return p.on("styledata", k), p.once("load", k), f.current = p, () => {
+        h.current.forEach((M) => M.remove()), h.current = [], f.current = null, p.remove();
       };
     }
-    const a = y.current;
-    if (M || R)
+    const a = f.current;
+    if (S || R)
       N(a);
     else
       try {
@@ -318,56 +318,71 @@ function Q({ page: i, componentId: t, component: e }) {
         a.jumpTo({ center: c.options.center, zoom: c.options.zoom });
       } catch {
       }
-  }, [z, g, s, x, R, M, u, w, c.options?.center, c.options?.zoom]), C(() => {
-    const d = y.current;
+  }, [z, g, s, x, R, S, u, w, c.options?.center, c.options?.zoom]), C(() => {
+    const d = f.current;
     if (!d || !u || u.length === 0) return;
     const a = () => {
-      if (E(d, u), !c.options?.center && c.options?.zoom === void 0 && w)
+      if (console.log("[MapLibreGL] apply() called, isStyleLoaded:", d.isStyleLoaded()), E(d, u), !c.options?.center && c.options?.zoom === void 0 && w)
         try {
           d.fitBounds(w, { padding: 30, duration: 0, maxZoom: 12 });
         } catch {
         }
     };
-    d.isStyleLoaded() ? a() : (d.once("style.load", a), d.once("load", a));
+    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());
+      }, 2e3);
+      return () => {
+        clearTimeout(m);
+      };
+    }
   }, [u, w, c.options?.center, c.options?.zoom]), C(() => {
-    const d = y.current;
-    d && (p.width <= 0 || p.height <= 0 || d.resize());
-  }, [p.width, p.height]), C(() => {
-    const d = y.current;
+    const d = f.current;
+    d && (y.width <= 0 || y.height <= 0 || d.resize());
+  }, [y.width, y.height]), C(() => {
+    const d = f.current;
     if (!d || !u || u.length === 0) return;
     const a = new P.Popup({
       closeButton: !1,
       closeOnClick: !1
     }), L = (k) => {
       if (!k.features || k.features.length === 0) return;
-      const j = k.features[0], $ = j.properties ?? {}, B = $.name ?? $.region ?? $.title ?? $.label ?? $.description;
+      const M = k.features[0], $ = M.properties ?? {}, B = $.name ?? $.region ?? $.title ?? $.label ?? $.description;
       if (B) {
         d.getCanvas().style.cursor = "pointer";
-        const Z = j.geometry.coordinates.slice();
+        const Z = M.geometry.coordinates.slice();
         a.setLngLat(Z).setHTML(`<div style="padding: 4px 8px; font-size: 13px;">${B}</div>`).addTo(d);
       }
-    }, f = () => {
+    }, p = () => {
       d.getCanvas().style.cursor = "", a.remove();
-    }, h = () => {
-      d.getLayer(l) ? (d.on("mouseenter", l, L), d.on("mouseleave", l, f)) : d.once("styledata", h);
+    }, m = () => {
+      d.getLayer(l) ? (d.on("mouseenter", l, L), d.on("mouseleave", l, p)) : d.once("styledata", m);
     };
-    return h(), () => {
-      a.remove(), d && !d._removed && d.getLayer(l) && (d.off("mouseenter", l, L), d.off("mouseleave", l, f));
+    return m(), () => {
+      a.remove(), d && !d._removed && d.getLayer(l) && (d.off("mouseenter", l, L), d.off("mouseleave", l, p));
     };
   }, [u, l]), C(() => {
-    const d = y.current;
-    d && (m.current.forEach((a) => a.remove()), m.current = [], (c.markers ?? []).forEach((a) => {
-      const f = a.shape === "circle" || typeof a.radius == "number" || typeof a.color == "string" ? document.createElement("div") : null;
-      if (f) {
+    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;
-        f.style.width = `${k * 2}px`, f.style.height = `${k * 2}px`, f.style.borderRadius = "999px", f.style.background = typeof a.color == "string" ? a.color : "#2563eb", f.style.border = "2px solid #ffffff", f.style.boxShadow = "0 2px 10px rgba(0,0,0,0.25)";
+        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 h = new P.Marker(f ? { element: f } : void 0).setLngLat(a.lngLat);
+      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>`;
-        h.setPopup(new P.Popup({ offset: 20 }).setHTML(k));
+        m.setPopup(new P.Popup({ offset: 20 }).setHTML(k));
       }
-      h.addTo(d), m.current.push(h);
+      m.addTo(d), h.current.push(m);
     }));
   }, [c.markers]), /* @__PURE__ */ v("div", { style: o.panel, children: [
     /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: n }) }),
@@ -397,7 +412,7 @@ 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 = A(null), [p, y] = G(1);
+  const n = e.title ?? t, l = typeof e.config?.mermaid == "string" ? e.config.mermaid : "", s = T(null), [y, f] = D(1);
   C(() => {
     if (!l || !s.current) return;
     (async () => {
@@ -413,7 +428,7 @@ function te({ page: i, componentId: t, component: e }) {
       }
     })();
   }, [l, t]);
-  const m = () => y((u) => Math.min(u + 0.2, 3)), b = () => y((u) => Math.max(u - 0.2, 0.5)), c = () => y(1);
+  const h = () => f((u) => Math.min(u + 0.2, 3)), b = () => f((u) => Math.max(u - 0.2, 0.5)), c = () => f(1);
   return l ? /* @__PURE__ */ v("div", { style: o.panel, children: [
     /* @__PURE__ */ v("div", { style: o.panelHeader, children: [
       /* @__PURE__ */ r("div", { style: o.panelTitle, children: n }),
@@ -448,7 +463,7 @@ function te({ page: i, componentId: t, component: e }) {
             },
             title: "Reset zoom",
             children: [
-              Math.round(p * 100),
+              Math.round(y * 100),
               "%"
             ]
           }
@@ -456,7 +471,7 @@ function te({ page: i, componentId: t, component: e }) {
         /* @__PURE__ */ r(
           "button",
           {
-            onClick: m,
+            onClick: h,
             style: {
               padding: "4px 8px",
               fontSize: "12px",
@@ -481,7 +496,7 @@ function te({ page: i, componentId: t, component: e }) {
       {
         ref: s,
         style: {
-          transform: `scale(${p})`,
+          transform: `scale(${y})`,
           transformOrigin: "center center",
           transition: "transform 0.2s ease"
         }
@@ -493,12 +508,12 @@ function te({ page: i, componentId: t, component: e }) {
   ] });
 }
 function re({ page: i, componentId: t, component: e }) {
-  const n = T(i, e.dataRef) ?? [], l = e.config?.columns, s = l && l.length ? l : Object.keys(n[0] ?? {}).map((p) => ({ key: p, label: p }));
+  const n = A(i, e.dataRef) ?? [], l = e.config?.columns, s = l && l.length ? l : Object.keys(n[0] ?? {}).map((y) => ({ key: y, label: y }));
   return /* @__PURE__ */ v("div", { style: o.panel, children: [
     /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: e.title ?? t }) }),
     /* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("div", { style: o.tableWrap, children: /* @__PURE__ */ v("table", { style: o.table, children: [
-      /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: s.map((p) => /* @__PURE__ */ r("th", { style: o.th, children: p.label }, p.key)) }) }),
-      /* @__PURE__ */ r("tbody", { children: n.map((p, y) => /* @__PURE__ */ r("tr", { children: s.map((m) => /* @__PURE__ */ r("td", { style: o.td, children: String(p[m.key] ?? "") }, m.key)) }, y)) })
+      /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: s.map((y) => /* @__PURE__ */ r("th", { style: o.th, children: y.label }, y.key)) }) }),
+      /* @__PURE__ */ r("tbody", { children: n.map((y, f) => /* @__PURE__ */ r("tr", { children: s.map((h) => /* @__PURE__ */ r("td", { style: o.td, children: String(y[h.key] ?? "") }, h.key)) }, f)) })
     ] }) }) })
   ] });
 }
@@ -518,13 +533,13 @@ function ne(i) {
   return t(i);
 }
 function oe({ page: i, componentId: t, component: e }) {
-  const n = T(i, e.dataRef), { ref: l, size: s } = I(), p = e.spec ?? {}, y = p.config ?? {}, m = {
-    ...y,
-    axis: { ...y.axis, grid: !1 },
-    axisX: { ...y.axisX, grid: !1 },
-    axisY: { ...y.axisY, grid: !1 },
-    view: { ...y.view, stroke: null }
-  }, b = { ...p, config: m }, c = s.width > 0 && s.height > 0 ? {
+  const n = A(i, e.dataRef), { ref: l, size: s } = I(), y = e.spec ?? {}, f = y.config ?? {}, h = {
+    ...f,
+    axis: { ...f.axis, grid: !1 },
+    axisX: { ...f.axisX, grid: !1 },
+    axisY: { ...f.axisY, grid: !1 },
+    view: { ...f.view, stroke: null }
+  }, b = { ...y, config: h }, c = s.width > 0 && s.height > 0 ? {
     ...b,
     autosize: { type: "fit", contains: "padding" },
     width: Math.floor(s.width),
@@ -535,7 +550,7 @@ function oe({ page: i, componentId: t, component: e }) {
     /* @__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 }) }) })
   ] });
 }
-function O({ page: i, componentId: t, component: e }) {
+function G({ page: i, componentId: t, component: e }) {
   switch (e.type) {
     case "vegalite5":
       return /* @__PURE__ */ r(oe, { page: i, componentId: t, component: e });
@@ -555,27 +570,27 @@ function O({ page: i, componentId: t, component: e }) {
       return /* @__PURE__ */ r(ie, { page: i, componentId: t, component: e });
   }
 }
-function D(i, t, e) {
+function O(i, t, e) {
   return Math.min(e, Math.max(t, i));
 }
 function se(i) {
   const t = i.reduce((n, l) => Math.max(n, l.y + l.h), 0), e = i.reduce((n, l) => Math.max(n, l.x + l.w), 0);
   return { maxBottom: t, maxRight: e };
 }
-function we({ page: i }) {
-  const { ref: t, size: e } = I(), n = i.layout.cols ?? 24, l = i.layout.rowHeight ?? 30, s = i.layout.margin?.[0] ?? 10, p = i.layout.margin?.[1] ?? 10, y = i.layout.containerPadding?.[0] ?? 0, m = i.layout.containerPadding?.[1] ?? 0, { maxBottom: b } = se(i.layout.items), c = b * l + Math.max(0, b - 1) * p + m * 2, u = e.width > 0 ? e.width < 768 : !1, w = [...i.layout.items].sort((g, x) => g.y - x.y || g.x - x.x);
+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);
   return /* @__PURE__ */ r("div", { ref: t, children: u ? /* @__PURE__ */ r(
     "div",
     {
       style: {
         display: "flex",
         flexDirection: "column",
-        gap: p,
-        padding: `${m}px ${y}px`
+        gap: y,
+        padding: `${h}px ${f}px`
       },
       children: w.map((g) => {
-        const x = i.components[g.i], M = g.h * l + Math.max(0, g.h - 1) * p;
-        return /* @__PURE__ */ r("div", { style: { width: "100%", height: M }, children: x ? /* @__PURE__ */ r(O, { page: i, componentId: g.i, component: x }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
+        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: [
           /* @__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: ",
@@ -589,10 +604,10 @@ function we({ page: i }) {
     {
       style: {
         ...o.canvas,
-        padding: `${m}px ${y}px`,
+        padding: `${h}px ${f}px`,
         gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))`,
         gridAutoRows: `${l}px`,
-        gap: `${p}px ${s}px`,
+        gap: `${y}px ${s}px`,
         minHeight: c
       },
       children: i.layout.items.map((g) => {
@@ -601,12 +616,12 @@ function we({ page: i }) {
           "div",
           {
             style: {
-              gridColumnStart: D(g.x + 1, 1, n + 1),
-              gridColumnEnd: `span ${D(g.w, 1, n)}`,
+              gridColumnStart: O(g.x + 1, 1, n + 1),
+              gridColumnEnd: `span ${O(g.w, 1, n)}`,
               gridRowStart: Math.max(1, g.y + 1),
               gridRowEnd: `span ${Math.max(1, g.h)}`
             },
-            children: x ? /* @__PURE__ */ r(O, { page: i, componentId: g.i, component: x }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
+            children: x ? /* @__PURE__ */ r(G, { page: i, componentId: g.i, component: x }) : /* @__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: ",
@@ -620,14 +635,14 @@ function we({ page: i }) {
     }
   ) });
 }
-const le = "https://json-schema.org/draft/2020-12/schema", ae = "https://example.com/ai-canvas/page.schema.json", de = "AI Canvas Page", ce = "object", pe = !1, fe = ["layout", "components", "data"], ye = { meta: { $ref: "#/$defs/Meta" }, layout: { $ref: "#/$defs/Layout" }, components: { $ref: "#/$defs/Components" }, data: { $ref: "#/$defs/Data" } }, ue = { Meta: { type: "object", additionalProperties: !1, properties: { title: { type: "string", minLength: 1 }, description: { type: "string" }, version: { type: "string" } } }, Layout: { type: "object", additionalProperties: !1, required: ["engine", "items"], properties: { engine: { type: "string", enum: ["rgl"] }, cols: { type: "integer", minimum: 1, default: 24 }, rowHeight: { type: "integer", minimum: 1, default: 30 }, margin: { type: "array", items: { type: "integer", minimum: 0 }, minItems: 2, maxItems: 2, default: [10, 10] }, containerPadding: { type: "array", items: { type: "integer", minimum: 0 }, minItems: 2, maxItems: 2, default: [0, 0] }, items: { type: "array", minItems: 1, items: { $ref: "#/$defs/RglItem" } } } }, RglItem: { type: "object", additionalProperties: !1, required: ["i", "x", "y", "w", "h"], properties: { i: { type: "string", minLength: 1 }, x: { type: "integer", minimum: 0 }, y: { type: "integer", minimum: 0 }, w: { type: "integer", minimum: 1 }, h: { type: "integer", minimum: 1 }, static: { type: "boolean", default: !1 } } }, Components: { type: "object", description: "Map of componentId -> component config. Keys should match layout.items[*].i.", additionalProperties: { $ref: "#/$defs/Component" } }, Component: { type: "object", additionalProperties: !1, required: ["type"], properties: { type: { type: "string", enum: ["vegalite5", "map", "list", "form", "table", "markdown", "mermaid"] }, title: { type: "string" }, dataRef: { type: "string", minLength: 1 }, config: { type: "object", description: "Component-specific configuration (non-Vega-Lite components). Keep flexible for now.", additionalProperties: !0, default: {} }, spec: { type: "object", description: "Vega-Lite spec (only for type=vegalite5).", additionalProperties: !0 } }, allOf: [{ if: { properties: { type: { const: "vegalite5" } }, required: ["type"] }, then: { required: ["spec"] }, else: { properties: { spec: !1 } } }, { if: { properties: { type: { const: "map" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, description: "MapLibre GL JS configuration. Provide either a MapLibre Style Specification object (Mapbox style spec v8) directly, or an object like { style: <style-spec-or-url>, options: <map options> }." } } } }, { if: { properties: { type: { const: "table" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["columns"], properties: { columns: { type: "array", minItems: 1, items: { $ref: "#/$defs/Column" } } } } } } }, { if: { properties: { type: { const: "form" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["columns"], properties: { columns: { type: "array", minItems: 1, items: { $ref: "#/$defs/Column" } } } } } } }, { if: { properties: { type: { const: "list" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0 } } } }, { if: { properties: { type: { const: "markdown" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["md"], properties: { md: { type: "string", minLength: 1, description: "Markdown content to render" } } } } } }, { if: { properties: { type: { const: "mermaid" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["mermaid"], properties: { mermaid: { type: "string", minLength: 1, description: "Mermaid diagram definition" } } } } } }] }, Column: { type: "object", additionalProperties: !1, required: ["key", "label"], properties: { key: { type: "string", minLength: 1 }, label: { type: "string", minLength: 1 } } }, Data: { type: "object", description: "Map of datasetName -> inline dataset.", additionalProperties: { $ref: "#/$defs/InlineDataset" } }, InlineDataset: { type: "object", additionalProperties: !1, required: ["source", "rows"], properties: { source: { type: "string", enum: ["inline"] }, rows: { type: "array", items: { type: "object", additionalProperties: !0 } } } } }, Le = {
+const le = "https://json-schema.org/draft/2020-12/schema", ae = "https://example.com/ai-canvas/page.schema.json", de = "AI Canvas Page", ce = "object", pe = !1, ye = ["layout", "components", "data"], fe = { meta: { $ref: "#/$defs/Meta" }, layout: { $ref: "#/$defs/Layout" }, components: { $ref: "#/$defs/Components" }, data: { $ref: "#/$defs/Data" } }, ue = { Meta: { type: "object", additionalProperties: !1, properties: { title: { type: "string", minLength: 1 }, description: { type: "string" }, version: { type: "string" } } }, Layout: { type: "object", additionalProperties: !1, required: ["engine", "items"], properties: { engine: { type: "string", enum: ["rgl"] }, cols: { type: "integer", minimum: 1, default: 24 }, rowHeight: { type: "integer", minimum: 1, default: 30 }, margin: { type: "array", items: { type: "integer", minimum: 0 }, minItems: 2, maxItems: 2, default: [10, 10] }, containerPadding: { type: "array", items: { type: "integer", minimum: 0 }, minItems: 2, maxItems: 2, default: [0, 0] }, items: { type: "array", minItems: 1, items: { $ref: "#/$defs/RglItem" } } } }, RglItem: { type: "object", additionalProperties: !1, required: ["i", "x", "y", "w", "h"], properties: { i: { type: "string", minLength: 1 }, x: { type: "integer", minimum: 0 }, y: { type: "integer", minimum: 0 }, w: { type: "integer", minimum: 1 }, h: { type: "integer", minimum: 1 }, static: { type: "boolean", default: !1 } } }, Components: { type: "object", description: "Map of componentId -> component config. Keys should match layout.items[*].i.", additionalProperties: { $ref: "#/$defs/Component" } }, Component: { type: "object", additionalProperties: !1, required: ["type"], properties: { type: { type: "string", enum: ["vegalite5", "map", "list", "form", "table", "markdown", "mermaid"] }, title: { type: "string" }, dataRef: { type: "string", minLength: 1 }, config: { type: "object", description: "Component-specific configuration (non-Vega-Lite components). Keep flexible for now.", additionalProperties: !0, default: {} }, spec: { type: "object", description: "Vega-Lite spec (only for type=vegalite5).", additionalProperties: !0 } }, allOf: [{ if: { properties: { type: { const: "vegalite5" } }, required: ["type"] }, then: { required: ["spec"] }, else: { properties: { spec: !1 } } }, { if: { properties: { type: { const: "map" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, description: "MapLibre GL JS configuration. Provide either a MapLibre Style Specification object (Mapbox style spec v8) directly, or an object like { style: <style-spec-or-url>, options: <map options> }." } } } }, { if: { properties: { type: { const: "table" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["columns"], properties: { columns: { type: "array", minItems: 1, items: { $ref: "#/$defs/Column" } } } } } } }, { if: { properties: { type: { const: "form" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["columns"], properties: { columns: { type: "array", minItems: 1, items: { $ref: "#/$defs/Column" } } } } } } }, { if: { properties: { type: { const: "list" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0 } } } }, { if: { properties: { type: { const: "markdown" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["md"], properties: { md: { type: "string", minLength: 1, description: "Markdown content to render" } } } } } }, { if: { properties: { type: { const: "mermaid" } }, required: ["type"] }, then: { properties: { config: { type: "object", additionalProperties: !0, required: ["mermaid"], properties: { mermaid: { type: "string", minLength: 1, description: "Mermaid diagram definition" } } } } } }] }, Column: { type: "object", additionalProperties: !1, required: ["key", "label"], properties: { key: { type: "string", minLength: 1 }, label: { type: "string", minLength: 1 } } }, Data: { type: "object", description: "Map of datasetName -> inline dataset.", additionalProperties: { $ref: "#/$defs/InlineDataset" } }, InlineDataset: { type: "object", additionalProperties: !1, required: ["source", "rows"], properties: { source: { type: "string", enum: ["inline"] }, rows: { type: "array", items: { type: "object", additionalProperties: !0 } } } } }, we = {
   $schema: le,
   $id: ae,
   title: de,
   type: ce,
   additionalProperties: pe,
-  required: fe,
-  properties: ye,
+  required: ye,
+  properties: fe,
   $defs: ue
 };
 function ke(i) {
@@ -651,8 +666,8 @@ function ke(i) {
   return e(t), t;
 }
 export {
-  we as CanvasRenderer,
-  Le as PAGE_SCHEMA,
+  Le as CanvasRenderer,
+  we as PAGE_SCHEMA,
   ke as schemaWithoutRemoteVegaLiteRef,
   o as styles
 };

package/package.json

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