declarative-ui-core 1.0.0 → 1.0.2

package/dist/index.js

@@ -1,7 +1,655 @@
-import { bD as s, bE as t, bF as b, bG as o } from "./index-CqZ75MN0.js";
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import { useRef as P, useState as D, useEffect as M, useMemo as C } from "react";
+import $ from "maplibre-gl";
+import J from "react-markdown";
+import F from "mermaid";
+import { VegaLite as G } from "react-vega";
+const o = {
+  canvas: {
+    display: "grid",
+    width: "100%",
+    borderRadius: 16,
+    border: "1px solid #eee",
+    background: "white",
+    minWidth: 0
+  },
+  panel: {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    border: "1px solid #eaeaea",
+    borderRadius: 16,
+    boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
+    overflow: "hidden",
+    background: "#fff"
+  },
+  panelHeader: { padding: "10px 12px", borderBottom: "1px solid #f0f0f0", display: "flex", gap: 10, alignItems: "baseline" },
+  panelTitle: { fontSize: 13, fontWeight: 800, flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  panelBody: { padding: 12, minHeight: 0, overflow: "auto", flex: 1 },
+  tableWrap: { overflow: "auto" },
+  table: { width: "100%", borderCollapse: "collapse", fontSize: 12 },
+  th: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid #eee", position: "sticky", top: 0, background: "#fff" },
+  td: { padding: "6px 8px", borderBottom: "1px solid #f2f2f2" },
+  kvList: { display: "flex", flexDirection: "column", gap: 8 },
+  kvRow: { display: "flex", gap: 10, alignItems: "baseline" },
+  kvKey: { width: 140, fontSize: 12, fontWeight: 700, color: "#444" },
+  kvValue: { fontSize: 12, color: "#111" },
+  listCards: { display: "flex", flexDirection: "column", gap: 10 },
+  listCard: { padding: 10, border: "1px solid #eee", borderRadius: 10, background: "#fafafa" },
+  listCardRow: { display: "flex", gap: 10, alignItems: "baseline", padding: "4px 0" },
+  listCardLabel: { fontSize: 11, fontWeight: 700, color: "#666", textTransform: "capitalize", minWidth: 80 },
+  listCardValue: { fontSize: 12, color: "#111", flex: 1 },
+  formRow: { display: "grid", gridTemplateColumns: "140px 1fr", gap: 10, alignItems: "center" },
+  formLabel: { fontSize: 12, fontWeight: 700, color: "#444" },
+  input: { padding: "8px 10px", borderRadius: 10, border: "1px solid #e6e6e6", fontSize: 12 },
+  pre: {
+    background: "#fafafa",
+    border: "1px solid #eee",
+    borderRadius: 12,
+    padding: 10,
+    overflow: "auto",
+    fontSize: 12,
+    lineHeight: 1.4
+  },
+  muted: { fontSize: 13, color: "#666" },
+  error: { padding: 10, border: "1px solid #f2c", borderRadius: 12, background: "#fff7fb", fontSize: 12 }
+};
+function K({ componentId: i, component: t }) {
+  const e = t.config?.columns;
+  return /* @__PURE__ */ v("div", { style: o.panel, children: [
+    /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: t.title ?? i }) }),
+    /* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ v("div", { style: o.kvList, children: [
+      (e ?? []).map((n) => /* @__PURE__ */ v("label", { style: o.formRow, children: [
+        /* @__PURE__ */ r("div", { style: o.formLabel, children: n.label }),
+        /* @__PURE__ */ r("input", { style: o.input, placeholder: n.key })
+      ] }, n.key)),
+      e?.length ? null : /* @__PURE__ */ r("div", { style: o.muted, children: "No columns provided." })
+    ] }) })
+  ] });
+}
+function T(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 X({ page: i, componentId: t, component: e }) {
+  const n = T(i, e.dataRef) ?? [], l = e.config?.mode, s = e.config?.displayFields, f = 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)) }) : f.length > 0 ? /* @__PURE__ */ r("div", { style: o.listCards, children: n.map((y, m) => /* @__PURE__ */ r("div", { style: o.listCard, children: f.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) }) })
+  ] });
+}
+function H() {
+  const i = P(null), [t, e] = D({ width: 0, height: 0 });
+  return M(() => {
+    const n = i.current;
+    if (!n) return;
+    const l = new ResizeObserver((s) => {
+      const f = s[0];
+      if (!f) return;
+      const y = f.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);
+    });
+    return l.observe(n), () => l.disconnect();
+  }, []), { ref: i, size: t };
+}
+function B(i, t) {
+  if (!t) return;
+  const e = i.setProjection;
+  if (typeof e != "function") return;
+  const n = typeof t == "string" ? t : t && typeof t == "object" && typeof t.name == "string" ? t.name : t && typeof t == "object" && typeof t.type == "string" ? t.type : void 0;
+  if (n)
+    try {
+      e.call(i, n);
+      return;
+    } catch {
+    }
+}
+function Y(i) {
+  if (!i || typeof i != "object") return {};
+  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, f = s.lngLat;
+      if (Array.isArray(f) && f.length === 2)
+        return {
+          name: typeof s.name == "string" ? s.name : void 0,
+          lngLat: [Number(f[0]), Number(f[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,
+          radius: typeof s.radius == "number" ? s.radius : void 0
+        };
+    }
+    if ("longitude" in l && "latitude" in l) {
+      const s = l;
+      if (typeof s.longitude == "number" && typeof s.latitude == "number") {
+        const f = typeof s.title == "string" ? s.title : void 0, y = typeof s.description == "string" ? s.description : void 0;
+        return {
+          name: f,
+          lngLat: [Number(s.longitude), Number(s.latitude)],
+          popup: y,
+          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
+        };
+      }
+    }
+    return null;
+  }).filter((l) => l !== null) : void 0;
+  if (typeof t.style == "string" || t.style && typeof t.style == "object")
+    return { style: t.style, options: t.options, markers: n };
+  if (t.version && t.sources && t.layers)
+    return { style: t, options: {}, markers: n };
+  if (t.style) {
+    const { style: l, ...s } = t;
+    return { style: l, options: s, markers: n };
+  }
+  return {};
+}
+function W(i) {
+  return { type: "FeatureCollection", features: i.map((e) => {
+    const n = typeof e.longitude == "number" ? e.longitude : typeof e.lng == "number" ? e.lng : typeof e.lon == "number" ? e.lon : void 0, l = typeof e.latitude == "number" ? e.latitude : typeof e.lat == "number" ? e.lat : void 0;
+    if (typeof n != "number" || typeof l != "number" || !Number.isFinite(n) || !Number.isFinite(l)) return null;
+    const s = { ...e };
+    return {
+      type: "Feature",
+      geometry: { type: "Point", coordinates: [n, l] },
+      properties: s
+    };
+  }).filter((e) => e !== null) };
+}
+function V(i, t) {
+  return (Array.isArray(i?.layers) ? i.layers : []).some((n) => n && typeof n == "object" && n.source === t);
+}
+function A(i, t) {
+  const e = "data", n = "circle-data", l = W(t), s = { ...i.sources ?? {} };
+  s[e] = {
+    type: "geojson",
+    data: l
+  };
+  const f = Array.isArray(i.layers) ? [...i.layers] : [], y = !V(i, e), m = f.filter((b) => b && typeof b == "object" && b.id !== n);
+  return y && m.push({
+    id: n,
+    type: "circle",
+    source: e,
+    paint: {
+      "circle-radius": ["coalesce", ["get", "radius"], 8],
+      "circle-color": ["coalesce", ["get", "color"], "#2563eb"],
+      "circle-stroke-color": "#ffffff",
+      "circle-stroke-width": 2,
+      "circle-opacity": 1
+    }
+  }), {
+    ...i,
+    sources: s,
+    layers: m
+  };
+}
+function q(i, t) {
+  const e = "data", n = "circle-data", l = W(t);
+  try {
+    const s = i.getSource(e) ?? null;
+    s && typeof s.setData == "function" ? s.setData(l) : i.addSource(e, { type: "geojson", data: l });
+  } catch {
+  }
+  try {
+    const s = i.getStyle();
+    !V(s, e) && !i.getLayer(n) && i.addLayer({
+      id: n,
+      type: "circle",
+      source: e,
+      paint: {
+        "circle-radius": ["coalesce", ["get", "radius"], 8],
+        "circle-color": ["coalesce", ["get", "color"], "#2563eb"],
+        "circle-stroke-color": "#ffffff",
+        "circle-stroke-width": 2,
+        "circle-opacity": 1
+      }
+    });
+  } catch {
+  }
+}
+function _({ page: i, componentId: t, component: e }) {
+  const n = e.title ?? t, l = "circle-data", { ref: s, size: f } = H(), y = P(null), m = P([]), b = P(/* @__PURE__ */ new Map()), c = C(() => Y(e.config), [e.config]), u = C(() => T(i, e.dataRef), [i, e.dataRef]), w = C(() => {
+    if (!u || u.length === 0) return null;
+    let d = 1 / 0, a = 1 / 0, k = -1 / 0, p = -1 / 0;
+    for (const h of u) {
+      const L = 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 L != "number" || typeof j != "number" || !Number.isFinite(L) || !Number.isFinite(j) || (d = Math.min(d, L), a = Math.min(a, j), k = Math.max(k, L), p = Math.max(p, j));
+    }
+    return !Number.isFinite(d) || !Number.isFinite(a) || !Number.isFinite(k) || !Number.isFinite(p) ? null : [
+      [d, a],
+      [k, p]
+    ];
+  }, [u]), g = C(() => {
+    if (!c.options) return;
+    const { projection: d, ...a } = c.options;
+    return a;
+  }, [c.options]), x = C(() => {
+    const d = c.options?.projection;
+    if (typeof d == "string") return d;
+    if (d && typeof d == "object" && typeof d.name == "string") return d.name;
+    if (d && typeof d == "object" && typeof d.type == "string") return d.type;
+    const a = typeof c.style == "object" && c.style ? c.style.projection : void 0;
+    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, Z = C(
+    () => ({
+      version: 8,
+      sources: {},
+      layers: []
+    }),
+    []
+  ), I = (d) => {
+    if (!S && !R) return;
+    const a = c.style, k = b.current.get(a);
+    if (k) {
+      try {
+        let p = k;
+        S && (p = { ...p ?? {}, projection: { type: x } }), R && e.dataRef && u && (p = A(p, u) ?? p), d.setStyle(p);
+      } catch {
+      }
+      return;
+    }
+    fetch(a).then((p) => p.json()).then((p) => {
+      b.current.set(a, p);
+      let h = p ?? {};
+      S && (h = { ...h, projection: { type: x } }), R && e.dataRef && u && (h = A(h, u) ?? h);
+      try {
+        d.setStyle(h);
+      } catch {
+      }
+    }).catch(() => {
+    });
+  }, z = C(() => {
+    if (c.style)
+      return typeof c.style == "object" && c.style && e.dataRef && Array.isArray(u) && u.length > 0 ? A(c.style, u) ?? c.style : c.style;
+  }, [c.style, e.dataRef, u]);
+  return M(() => {
+    const d = s.current;
+    if (!d || !z) return;
+    if (!y.current) {
+      const k = {
+        container: d,
+        style: typeof z == "string" && (S || R) ? Z : z,
+        attributionControl: {},
+        ...g ?? {}
+      }, p = new $.Map(k);
+      I(p);
+      const h = () => B(p, x);
+      p.once("load", h), p.once("style.load", h), p.addControl(new $.NavigationControl({ visualizePitch: !0 }), "top-right");
+      const L = () => {
+        if (u && u.length > 0 && (q(p, u), !c.options?.center && c.options?.zoom === void 0 && w))
+          try {
+            p.fitBounds(w, { padding: 30, duration: 0, maxZoom: 12 });
+          } catch {
+          }
+      };
+      return p.once("style.load", L), y.current = p, () => {
+        m.current.forEach((j) => j.remove()), m.current = [], y.current = null, p.remove();
+      };
+    }
+    const a = y.current;
+    if (S || R)
+      I(a);
+    else
+      try {
+        a.setStyle(z);
+      } catch {
+      }
+    if (x) {
+      const k = () => B(a, x);
+      a.once("style.load", k), a.once("render", k);
+    }
+    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]), M(() => {
+    const d = y.current;
+    if (!d || !u || u.length === 0) return;
+    const a = () => {
+      if (q(d, u), !c.options?.center && c.options?.zoom === void 0 && w)
+        try {
+          d.fitBounds(w, { padding: 30, duration: 0, maxZoom: 12 });
+        } catch {
+        }
+    };
+    d.once("style.load", a), d.once("load", a);
+  }, [u, w, c.options?.center, c.options?.zoom]), M(() => {
+    const d = y.current;
+    d && (f.width <= 0 || f.height <= 0 || d.resize());
+  }, [f.width, f.height]), M(() => {
+    const d = y.current;
+    if (!d || !u || u.length === 0) return;
+    const a = new $.Popup({
+      closeButton: !1,
+      closeOnClick: !1
+    }), k = (L) => {
+      if (!L.features || L.features.length === 0) return;
+      const j = L.features[0], N = j.properties?.name;
+      if (N) {
+        d.getCanvas().style.cursor = "pointer";
+        const U = j.geometry.coordinates.slice();
+        a.setLngLat(U).setHTML(`<div style="padding: 4px 8px; font-size: 13px;">${N}</div>`).addTo(d);
+      }
+    }, p = () => {
+      d.getCanvas().style.cursor = "", a.remove();
+    }, h = () => {
+      d.getLayer(l) ? (d.on("mouseenter", l, k), d.on("mouseleave", l, p)) : d.once("styledata", h);
+    };
+    return h(), () => {
+      a.remove(), d && !d._removed && d.getLayer(l) && (d.off("mouseenter", l, k), d.off("mouseleave", l, p));
+    };
+  }, [u, l]), M(() => {
+    const d = y.current;
+    d && (m.current.forEach((a) => a.remove()), m.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 L = typeof a.radius == "number" && Number.isFinite(a.radius) ? Math.max(2, a.radius) : 8;
+        p.style.width = `${L * 2}px`, p.style.height = `${L * 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 $.Marker(p ? { element: p } : void 0).setLngLat(a.lngLat);
+      if (a.popup || a.name) {
+        const L = a.popup ?? `<div style="font-size:12px"><strong>${a.name ?? ""}</strong></div>`;
+        h.setPopup(new $.Popup({ offset: 20 }).setHTML(L));
+      }
+      h.addTo(d), m.current.push(h);
+    }));
+  }, [c.markers]), /* @__PURE__ */ v("div", { style: o.panel, children: [
+    /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: n }) }),
+    /* @__PURE__ */ r("div", { style: o.panelBody, children: c.style ? /* @__PURE__ */ r("div", { ref: s, style: { width: "100%", height: "100%", minHeight: 420 } }) : /* @__PURE__ */ v("div", { style: o.muted, children: [
+      "MapLibre requires a style in component.config. Provide either:",
+      /* @__PURE__ */ r("pre", { style: o.pre, children: JSON.stringify({ style: "https://.../style.json", options: { center: [12.5, 41.9], zoom: 4 } }, null, 2) })
+    ] }) })
+  ] });
+}
+function Q({ page: i, componentId: t, component: e }) {
+  const n = e.title ?? t, l = typeof e.config?.md == "string" ? e.config.md : "";
+  return l ? /* @__PURE__ */ v("div", { style: o.panel, children: [
+    /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: n }) }),
+    /* @__PURE__ */ r("div", { style: { ...o.panelBody, overflow: "auto" }, children: /* @__PURE__ */ r("div", { style: {
+      padding: "8px",
+      lineHeight: "1.6",
+      fontSize: "14px"
+    }, children: /* @__PURE__ */ r(J, { children: l }) }) })
+  ] }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
+    /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: n }) }),
+    /* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("div", { style: o.muted, children: 'No markdown content provided. Add an "md" field to config.' }) })
+  ] });
+}
+F.initialize({
+  startOnLoad: !1,
+  theme: "default",
+  securityLevel: "loose"
+});
+function ee({ page: i, componentId: t, component: e }) {
+  const n = e.title ?? t, l = typeof e.config?.mermaid == "string" ? e.config.mermaid : "", s = P(null), [f, y] = D(1);
+  M(() => {
+    if (!l || !s.current) return;
+    (async () => {
+      try {
+        const w = `mermaid-${t}-${Date.now()}`, { svg: g } = await F.render(w, l);
+        if (s.current) {
+          s.current.innerHTML = g;
+          const x = s.current.querySelector("svg");
+          x && (x.style.maxWidth = "100%", x.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>`);
+      }
+    })();
+  }, [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);
+  return l ? /* @__PURE__ */ v("div", { style: o.panel, children: [
+    /* @__PURE__ */ v("div", { style: o.panelHeader, children: [
+      /* @__PURE__ */ r("div", { style: o.panelTitle, children: n }),
+      /* @__PURE__ */ v("div", { style: { display: "flex", gap: "4px", marginLeft: "auto" }, children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            onClick: b,
+            style: {
+              padding: "4px 8px",
+              fontSize: "12px",
+              border: "1px solid #ddd",
+              borderRadius: "4px",
+              background: "#fff",
+              cursor: "pointer"
+            },
+            title: "Zoom out",
+            children: "−"
+          }
+        ),
+        /* @__PURE__ */ v(
+          "button",
+          {
+            onClick: c,
+            style: {
+              padding: "4px 8px",
+              fontSize: "12px",
+              border: "1px solid #ddd",
+              borderRadius: "4px",
+              background: "#fff",
+              cursor: "pointer"
+            },
+            title: "Reset zoom",
+            children: [
+              Math.round(f * 100),
+              "%"
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            onClick: m,
+            style: {
+              padding: "4px 8px",
+              fontSize: "12px",
+              border: "1px solid #ddd",
+              borderRadius: "4px",
+              background: "#fff",
+              cursor: "pointer"
+            },
+            title: "Zoom in",
+            children: "+"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ r("div", { style: { ...o.panelBody, overflow: "auto", position: "relative" }, children: /* @__PURE__ */ r("div", { style: {
+      padding: "50px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }, children: /* @__PURE__ */ r(
+      "div",
+      {
+        ref: s,
+        style: {
+          transform: `scale(${f})`,
+          transformOrigin: "center center",
+          transition: "transform 0.2s ease"
+        }
+      }
+    ) }) })
+  ] }) : /* @__PURE__ */ v("div", { style: o.panel, children: [
+    /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: n }) }),
+    /* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("div", { style: o.muted, children: 'No mermaid diagram provided. Add a "mermaid" field to config.' }) })
+  ] });
+}
+function te({ 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((f) => ({ key: f, label: f }));
+  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((f) => /* @__PURE__ */ r("th", { style: o.th, children: f.label }, f.key)) }) }),
+      /* @__PURE__ */ r("tbody", { children: n.map((f, y) => /* @__PURE__ */ r("tr", { children: s.map((m) => /* @__PURE__ */ r("td", { style: o.td, children: String(f[m.key] ?? "") }, m.key)) }, y)) })
+    ] }) }) })
+  ] });
+}
+function re({ componentId: i, component: t }) {
+  return /* @__PURE__ */ v("div", { style: o.panel, children: [
+    /* @__PURE__ */ r("div", { style: o.panelHeader, children: /* @__PURE__ */ r("div", { style: o.panelTitle, children: t.title ?? i }) }),
+    /* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("pre", { style: o.pre, children: JSON.stringify(t, null, 2) }) })
+  ] });
+}
+function ie(i) {
+  if (!i || typeof i != "object") return !1;
+  const t = (e) => {
+    if (!e || typeof e != "object") return !1;
+    const n = e.mark, l = n === "text" || n && typeof n == "object" && n.type === "text", s = !!(e.encoding?.text && typeof e.encoding.text == "object" && "value" in e.encoding.text);
+    return l && s ? !0 : Array.isArray(e.layer) ? e.layer.some(t) : e.spec ? t(e.spec) : !1;
+  };
+  return t(i);
+}
+function ne({ page: i, componentId: t, component: e }) {
+  const n = T(i, e.dataRef), { ref: l, size: s } = H(), f = e.spec ?? {}, y = f.config ?? {}, m = {
+    ...y,
+    axis: { ...y.axis, grid: !1 },
+    axisX: { ...y.axisX, grid: !1 },
+    axisY: { ...y.axisY, grid: !1 },
+    view: { ...y.view, stroke: null }
+  }, b = { ...f, config: m }, c = s.width > 0 && s.height > 0 ? {
+    ...b,
+    autosize: { type: "fit", contains: "padding" },
+    width: Math.floor(s.width),
+    height: Math.floor(s.height)
+  } : b, u = n ? { ...c, data: { values: n } } : ie(c) ? { ...c, data: { values: [{}] } } : c, w = 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,
+    /* @__PURE__ */ r("div", { style: o.panelBody, children: /* @__PURE__ */ r("div", { ref: l, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ r(G, { spec: u, actions: !1 }) }) })
+  ] });
+}
+function E({ page: i, componentId: t, component: e }) {
+  switch (e.type) {
+    case "vegalite5":
+      return /* @__PURE__ */ r(ne, { page: i, componentId: t, component: e });
+    case "table":
+      return /* @__PURE__ */ r(te, { page: i, componentId: t, component: e });
+    case "form":
+      return /* @__PURE__ */ r(K, { page: i, componentId: t, component: e });
+    case "list":
+      return /* @__PURE__ */ r(X, { page: i, componentId: t, component: e });
+    case "map":
+      return /* @__PURE__ */ r(_, { page: i, componentId: t, component: e });
+    case "markdown":
+      return /* @__PURE__ */ r(Q, { page: i, componentId: t, component: e });
+    case "mermaid":
+      return /* @__PURE__ */ r(ee, { page: i, componentId: t, component: e });
+    default:
+      return /* @__PURE__ */ r(re, { page: i, componentId: t, component: e });
+  }
+}
+function O(i, t, e) {
+  return Math.min(e, Math.max(t, i));
+}
+function oe(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 xe({ page: i }) {
+  const { ref: t, size: e } = H(), n = i.layout.cols ?? 24, l = i.layout.rowHeight ?? 30, s = i.layout.margin?.[0] ?? 10, f = i.layout.margin?.[1] ?? 10, y = i.layout.containerPadding?.[0] ?? 0, m = i.layout.containerPadding?.[1] ?? 0, { maxBottom: b } = oe(i.layout.items), c = b * l + Math.max(0, b - 1) * f + 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);
+  return /* @__PURE__ */ r("div", { ref: t, children: u ? /* @__PURE__ */ r(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: f,
+        padding: `${m}px ${y}px`
+      },
+      children: w.map((g) => {
+        const x = i.components[g.i], S = g.h * l + Math.max(0, g.h - 1) * f;
+        return /* @__PURE__ */ r("div", { style: { width: "100%", height: S }, children: x ? /* @__PURE__ */ r(E, { 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: ",
+            g.i
+          ] }) })
+        ] }) }, g.i);
+      })
+    }
+  ) : /* @__PURE__ */ r(
+    "div",
+    {
+      style: {
+        ...o.canvas,
+        padding: `${m}px ${y}px`,
+        gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))`,
+        gridAutoRows: `${l}px`,
+        gap: `${f}px ${s}px`,
+        minHeight: c
+      },
+      children: i.layout.items.map((g) => {
+        const x = i.components[g.i];
+        return /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              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(E, { 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: ",
+                g.i
+              ] }) })
+            ] })
+          },
+          g.i
+        );
+      })
+    }
+  ) });
+}
+const se = "https://json-schema.org/draft/2020-12/schema", le = "https://example.com/ai-canvas/page.schema.json", ae = "AI Canvas Page", de = "object", ce = !1, pe = ["layout", "components", "data"], fe = { meta: { $ref: "#/$defs/Meta" }, layout: { $ref: "#/$defs/Layout" }, components: { $ref: "#/$defs/Components" }, data: { $ref: "#/$defs/Data" } }, ye = { 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: se,
+  $id: le,
+  title: ae,
+  type: de,
+  additionalProperties: ce,
+  required: pe,
+  properties: fe,
+  $defs: ye
+};
+function ke(i) {
+  const t = JSON.parse(JSON.stringify(i));
+  t && typeof t == "object" && delete t.$id;
+  try {
+    const n = t?.$defs?.Layout?.properties?.items;
+    n && typeof n == "object" && (n.minItems = 0);
+  } catch {
+  }
+  const e = (n) => {
+    if (!(!n || typeof n != "object")) {
+      if (n.$ref === "https://vega.github.io/schema/vega-lite/v5.json") {
+        delete n.$ref, n.type = "object", n.additionalProperties = !0;
+        return;
+      }
+      for (const l of Object.values(n))
+        Array.isArray(l) ? l.forEach(e) : e(l);
+    }
+  };
+  return e(t), t;
+}
 export {
-  s as CanvasRenderer,
-  t as PAGE_SCHEMA,
-  b as schemaWithoutRemoteVegaLiteRef,
+  xe 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.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",