@iyulab/u-widgets 0.5.0 → 0.6.1

package/README.md

@@ -88,6 +88,46 @@ AI assistants can use u-widgets via [MCP server](docs/mcp-server.md):
 npx @iyulab/u-widgets-mcp
 ```
 
+## Framework Integration
+
+u-widgets is a browser-only Web Component library — it requires DOM APIs (`customElements`, `HTMLElement`) and cannot run in Node.js or server-side environments.
+
+### Next.js (App Router)
+
+Create a client-side wrapper component:
+
+```tsx
+// components/widget.tsx
+"use client";
+import "@iyulab/u-widgets";
+
+export function Widget({ spec }: { spec: object }) {
+  return <u-widget spec={JSON.stringify(spec)} />;
+}
+```
+
+Use the wrapper from Server Components:
+
+```tsx
+// app/dashboard/page.tsx
+import { Widget } from "@/components/widget";
+
+export default async function Page() {
+  const data = await fetchData();
+  return <Widget spec={{ widget: "stat-group", data }} />;
+}
+```
+
+For pages where SSR hydration mismatch is a concern, use dynamic import:
+
+```tsx
+import dynamic from "next/dynamic";
+const Widget = dynamic(
+  () => import("@/components/widget").then((m) => m.Widget),
+  { ssr: false }
+);
+```
+
 ## Documentation
 
 - [Widget Reference](docs/widgets.md) — Schema, mapping, options, theming

package/dist/u-widgets-charts.js

@@ -1,7 +1,7 @@
 import { css as V, LitElement as I, nothing as P, html as E } from "lit";
 import { property as R, customElement as T } from "lit/decorators.js";
 import { a as D, t as $ } from "./tokens-x1kDxgG8.js";
-import * as z from "echarts/core";
+import * as N from "echarts/core";
 import { BarChart as B, LineChart as q, PieChart as G, ScatterChart as H, RadarChart as K, HeatmapChart as U, BoxplotChart as W, FunnelChart as J, TreemapChart as Q } from "echarts/charts";
 import { GridComponent as X, TooltipComponent as Y, LegendComponent as Z, RadarComponent as ee, MarkLineComponent as te, VisualMapComponent as re } from "echarts/components";
 import { CanvasRenderer as se } from "echarts/renderers";
@@ -54,103 +54,109 @@ function F(e, t, i, r) {
   if (!Array.isArray(e)) return {};
   const n = t?.x ?? C(e), s = t?.y ?? [k(e)].filter(Boolean);
   if (!n || s.length === 0) return {};
-  const c = e.map((a) => String(a[n] ?? "")), u = !!r.horizontal, l = s.map((a) => {
-    const d = {
-      name: a,
+  const c = e.map((l) => String(l[n] ?? "")), u = !!r.horizontal, f = Array.isArray(r.series) ? r.series : [], y = s.map((l, x) => {
+    const o = {
+      name: l,
       type: i,
-      data: e.map((v) => v[a] ?? null)
+      data: e.map((h) => h[l] ?? null)
     };
-    return r._area && (d.areaStyle = {}), r.smooth && (d.smooth = !0), r.step && (d.step = r.step === !0 ? "end" : r.step), d;
-  }), m = { type: "category", data: c }, g = { type: "value" };
-  r.histogram && (m.axisTick = { alignWithLabel: !0 }, l.forEach((a) => {
-    a.barCategoryGap = "0%";
+    r._area && (o.areaStyle = {}), r.smooth && (o.smooth = !0), r.step && (o.step = r.step === !0 ? "end" : r.step);
+    const a = f[x];
+    return a && (a.color && (o.itemStyle = { color: a.color }, o.lineStyle = { ...o.lineStyle ?? {}, color: a.color }), a.lineStyle && (o.lineStyle = { ...o.lineStyle ?? {}, ...a.lineStyle }), a.symbol !== void 0 && (o.symbol = a.symbol), a.label && (o.name = a.label)), o;
+  }), b = { type: "category", data: c }, p = { type: "value" };
+  r.histogram && (b.axisTick = { alignWithLabel: !0 }, y.forEach((l) => {
+    l.barCategoryGap = "0%";
   }));
-  const y = {
-    xAxis: u ? g : m,
-    yAxis: u ? m : g,
-    series: l,
+  const g = {
+    xAxis: u ? p : b,
+    yAxis: u ? b : p,
+    series: y,
     tooltip: { trigger: "axis" }
   };
-  s.length > 1 && (y.legend = { data: s }), r.stack && y.series.forEach((a) => {
-    a.stack = "total";
+  if (s.length > 1) {
+    const l = y.map((x) => x.name);
+    g.legend = { data: l };
+  }
+  r.stack && g.series.forEach((l) => {
+    l.stack = "total";
   });
-  const b = r.referenceLines;
-  return Array.isArray(b) && b.length > 0 && l.length > 0 && (l[0].markLine = {
+  const m = r.referenceLines;
+  return Array.isArray(m) && m.length > 0 && y.length > 0 && (y[0].markLine = {
     silent: !0,
     symbol: "none",
-    data: b.map((a) => {
-      const d = {};
-      a.axis === "x" ? d.xAxis = a.value : d.yAxis = a.value, a.label && (d.name = a.label);
-      const v = {};
-      return a.color && (v.color = a.color), a.style && (v.type = a.style), Object.keys(v).length > 0 && (d.lineStyle = v), a.label && (d.label = { formatter: a.label, position: "end" }), d;
+    data: m.map((l) => {
+      const x = {};
+      l.axis === "x" ? x.xAxis = l.value : x.yAxis = l.value, l.label && (x.name = l.label);
+      const o = {};
+      return l.color && (o.color = l.color), l.style && (o.type = l.style), Object.keys(o).length > 0 && (x.lineStyle = o), l.label && (x.label = { formatter: l.label, position: "end" }), x;
     })
-  }), y;
+  }), g;
 }
 function ne(e, t, i) {
   if (!Array.isArray(e)) return {};
-  const r = j(e), n = t?.x ?? r[0], s = (t?.y ?? [r[1]])[0], c = t?.color, u = t?.size, l = t?.opacity;
+  const r = j(e), n = t?.x ?? r[0], s = (t?.y ?? [r[1]])[0], c = t?.color, u = t?.size, f = t?.opacity;
   if (!n || !s) return {};
-  const m = {
+  const y = {
     xAxis: { type: "value" },
     yAxis: { type: "value" },
     tooltip: { trigger: "item" }
   };
-  let g = 1 / 0, y = -1 / 0;
-  if (l)
-    for (const f of e) {
-      const o = Number(f[l] ?? 0);
-      o < g && (g = o), o > y && (y = o);
+  let b = 1 / 0, p = -1 / 0;
+  if (f)
+    for (const o of e) {
+      const a = Number(o[f] ?? 0);
+      a < b && (b = a), a > p && (p = a);
     }
-  const b = y - g || 1, a = (f) => {
-    const o = [Number(f[n] ?? 0), Number(f[s] ?? 0)];
-    if (u && o.push(Number(f[u] ?? 0)), l) {
-      const A = 0.1 + 0.9 * ((Number(f[l] ?? 0) - g) / b);
-      return { value: o, itemStyle: { opacity: Math.round(A * 100) / 100 } };
+  const g = p - b || 1, m = (o) => {
+    const a = [Number(o[n] ?? 0), Number(o[s] ?? 0)];
+    if (u && a.push(Number(o[u] ?? 0)), f) {
+      const S = 0.1 + 0.9 * ((Number(o[f] ?? 0) - b) / g);
+      return { value: a, itemStyle: { opacity: Math.round(S * 100) / 100 } };
     }
-    return o;
-  }, d = u ? (f) => {
-    const p = (Array.isArray(f) ? f : f.value)[2] ?? 0;
-    return Math.max(4, Math.min(60, Math.sqrt(p) * 4));
+    return a;
+  }, l = u ? (o) => {
+    const h = (Array.isArray(o) ? o : o.value)[2] ?? 0;
+    return Math.max(4, Math.min(60, Math.sqrt(h) * 4));
   } : void 0;
   if (c) {
-    const f = /* @__PURE__ */ new Map();
-    for (const p of e) {
-      const A = String(p[c] ?? "unknown");
-      f.has(A) || f.set(A, []), f.get(A).push(a(p));
+    const o = /* @__PURE__ */ new Map();
+    for (const h of e) {
+      const S = String(h[c] ?? "unknown");
+      o.has(S) || o.set(S, []), o.get(S).push(m(h));
     }
-    const o = [];
-    for (const [p, A] of f) {
-      const h = { name: p, type: "scatter", data: A };
-      d && (h.symbolSize = d), o.push(h);
+    const a = [];
+    for (const [h, S] of o) {
+      const d = { name: h, type: "scatter", data: S };
+      l && (d.symbolSize = l), a.push(d);
     }
-    m.series = o, m.legend = { data: Array.from(f.keys()) };
+    y.series = a, y.legend = { data: Array.from(o.keys()) };
   } else {
-    const o = { type: "scatter", data: e.map((p) => a(p)) };
-    d && (o.symbolSize = d), m.series = [o];
+    const a = { type: "scatter", data: e.map((h) => m(h)) };
+    l && (a.symbolSize = l), y.series = [a];
   }
-  const v = i.referenceLines;
-  if (Array.isArray(v) && v.length > 0) {
-    const f = m.series[0];
-    f.markLine = {
+  const x = i.referenceLines;
+  if (Array.isArray(x) && x.length > 0) {
+    const o = y.series[0];
+    o.markLine = {
       silent: !0,
       symbol: "none",
-      data: v.map((o) => {
-        const p = {};
-        o.axis === "x" ? p.xAxis = o.value : p.yAxis = o.value, o.label && (p.name = o.label);
-        const A = {};
-        return o.color && (A.color = o.color), o.style && (A.type = o.style), Object.keys(A).length > 0 && (p.lineStyle = A), o.label && (p.label = { formatter: o.label, position: "end" }), p;
+      data: x.map((a) => {
+        const h = {};
+        a.axis === "x" ? h.xAxis = a.value : h.yAxis = a.value, a.label && (h.name = a.label);
+        const S = {};
+        return a.color && (S.color = a.color), a.style && (S.type = a.style), Object.keys(S).length > 0 && (h.lineStyle = S), a.label && (h.label = { formatter: a.label, position: "end" }), h;
       })
     };
   }
-  return m;
+  return y;
 }
 function ae(e, t, i) {
   if (!Array.isArray(e)) return {};
   const r = t?.label ?? C(e), n = t?.value ?? k(e);
   if (!r || !n) return {};
-  const s = e.map((l) => ({
-    name: String(l[r] ?? ""),
-    value: Number(l[n] ?? 0)
+  const s = e.map((f) => ({
+    name: String(f[r] ?? ""),
+    value: Number(f[n] ?? 0)
   })), u = {
     type: "pie",
     radius: i.donut ? ["40%", "70%"] : "50%",
@@ -171,7 +177,7 @@ function oe(e, t, i) {
     name: String(u[r] ?? "")
   })), c = n.map((u) => ({
     name: u,
-    value: e.map((l) => Number(l[u] ?? 0))
+    value: e.map((f) => Number(f[u] ?? 0))
   }));
   return {
     tooltip: {},
@@ -187,73 +193,73 @@ function oe(e, t, i) {
 }
 function le(e, t, i) {
   if (!Array.isArray(e)) return {};
-  const r = e[0] ?? {}, n = Object.keys(r), s = n.filter((h) => typeof r[h] == "string"), c = n.filter((h) => typeof r[h] == "number"), u = t?.x ?? s[0], l = t?.y?.[0] ?? s.find((h) => h !== u), m = t?.value ?? c[0];
-  if (!u || !l || !m) return {};
-  const g = [], y = [], b = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
-  for (const h of e) {
-    const x = String(h[u] ?? ""), w = String(h[l] ?? "");
-    b.has(x) || (b.add(x), g.push(x)), a.has(w) || (a.add(w), y.push(w));
+  const r = e[0] ?? {}, n = Object.keys(r), s = n.filter((d) => typeof r[d] == "string"), c = n.filter((d) => typeof r[d] == "number"), u = t?.x ?? s[0], f = t?.y?.[0] ?? s.find((d) => d !== u), y = t?.value ?? c[0];
+  if (!u || !f || !y) return {};
+  const b = [], p = [], g = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Set();
+  for (const d of e) {
+    const A = String(d[u] ?? ""), w = String(d[f] ?? "");
+    g.has(A) || (g.add(A), b.push(A)), m.has(w) || (m.add(w), p.push(w));
   }
-  const d = /* @__PURE__ */ new Map();
-  g.forEach((h, x) => d.set(h, x));
-  const v = /* @__PURE__ */ new Map();
-  y.forEach((h, x) => v.set(h, x));
-  const f = [];
-  let o = 1 / 0, p = -1 / 0;
-  for (const h of e) {
-    const x = d.get(String(h[u] ?? "")) ?? 0, w = v.get(String(h[l] ?? "")) ?? 0, S = h[m] != null ? Number(h[m]) : null;
-    f.push([x, w, S]), S != null && (S < o && (o = S), S > p && (p = S));
+  const l = /* @__PURE__ */ new Map();
+  b.forEach((d, A) => l.set(d, A));
+  const x = /* @__PURE__ */ new Map();
+  p.forEach((d, A) => x.set(d, A));
+  const o = [];
+  let a = 1 / 0, h = -1 / 0;
+  for (const d of e) {
+    const A = l.get(String(d[u] ?? "")) ?? 0, w = x.get(String(d[f] ?? "")) ?? 0, v = d[y] != null ? Number(d[y]) : null;
+    o.push([A, w, v]), v != null && (v < a && (a = v), v > h && (h = v));
   }
-  isFinite(o) || (o = 0, p = 1);
-  const A = i.colorRange ?? ["#313695", "#4575b4", "#74add1", "#abd9e9", "#fee090", "#fdae61", "#f46d43", "#d73027"];
+  isFinite(a) || (a = 0, h = 1);
+  const S = i.colorRange ?? ["#313695", "#4575b4", "#74add1", "#abd9e9", "#fee090", "#fdae61", "#f46d43", "#d73027"];
   return {
-    xAxis: { type: "category", data: g, splitArea: { show: !0 } },
-    yAxis: { type: "category", data: y, splitArea: { show: !0 } },
+    xAxis: { type: "category", data: b, splitArea: { show: !0 } },
+    yAxis: { type: "category", data: p, splitArea: { show: !0 } },
     visualMap: {
-      min: i.min != null ? Number(i.min) : o,
-      max: i.max != null ? Number(i.max) : p,
+      min: i.min != null ? Number(i.min) : a,
+      max: i.max != null ? Number(i.max) : h,
       calculable: !0,
       orient: "horizontal",
       left: "center",
       bottom: 0,
-      inRange: { color: A }
+      inRange: { color: S }
     },
     tooltip: {
       trigger: "item",
-      formatter: (h) => {
-        const x = h.data;
-        return x ? `${g[x[0]]} × ${y[x[1]]}: ${x[2] != null ? x[2] : "-"}` : "";
+      formatter: (d) => {
+        const A = d.data;
+        return A ? `${b[A[0]]} × ${p[A[1]]}: ${A[2] != null ? A[2] : "-"}` : "";
       }
     },
     grid: { bottom: 60 },
     series: [{
       type: "heatmap",
-      data: f,
+      data: o,
       label: { show: i.showLabel !== !1 }
     }]
   };
 }
 function ce(e, t, i) {
   if (!Array.isArray(e) || e.length === 0) return {};
-  const r = e[0] ?? {}, n = Object.keys(r), s = n.filter((b) => typeof r[b] == "string"), c = n.filter((b) => typeof r[b] == "number"), u = t?.x ?? s[0];
-  let l;
+  const r = e[0] ?? {}, n = Object.keys(r), s = n.filter((g) => typeof r[g] == "string"), c = n.filter((g) => typeof r[g] == "number"), u = t?.x ?? s[0];
+  let f;
   if (t?.y && t.y.length >= 5)
-    l = t.y.slice(0, 5);
+    f = t.y.slice(0, 5);
   else {
-    const a = ["min", "q1", "median", "q3", "max"].filter((d) => c.includes(d));
-    l = a.length === 5 ? a : c.slice(0, 5);
+    const m = ["min", "q1", "median", "q3", "max"].filter((l) => c.includes(l));
+    f = m.length === 5 ? m : c.slice(0, 5);
   }
-  if (l.length < 5) return {};
-  const m = u ? e.map((b) => String(b[u] ?? "")) : void 0, g = e.map(
-    (b) => l.map((a) => Number(b[a] ?? 0))
-  ), y = {
+  if (f.length < 5) return {};
+  const y = u ? e.map((g) => String(g[u] ?? "")) : void 0, b = e.map(
+    (g) => f.map((m) => Number(g[m] ?? 0))
+  ), p = {
     tooltip: { trigger: "item" },
     series: [{
       type: "boxplot",
-      data: g
+      data: b
     }]
   };
-  return m ? (y.xAxis = { type: "category", data: m }, y.yAxis = { type: "value" }) : (y.xAxis = { type: "category" }, y.yAxis = { type: "value" }), y;
+  return y ? (p.xAxis = { type: "category", data: y }, p.yAxis = { type: "value" }) : (p.xAxis = { type: "category" }, p.yAxis = { type: "value" }), p;
 }
 function C(e) {
   if (e.length === 0) return;
@@ -289,11 +295,11 @@ function fe(e, t, i) {
   if (!Array.isArray(e)) return {};
   const r = e, n = t?.x ?? C(r), s = (t?.y ?? [k(r)])[0];
   if (!n || !s) return {};
-  const c = [], u = [], l = [], m = [];
-  let g = 0;
-  for (const y of r) {
-    const b = String(y[n] ?? ""), a = Number(y[s] ?? 0);
-    c.push(b), a >= 0 ? (u.push(g), l.push(a), m.push(null)) : (u.push(g + a), l.push(null), m.push(Math.abs(a))), g += a;
+  const c = [], u = [], f = [], y = [];
+  let b = 0;
+  for (const p of r) {
+    const g = String(p[n] ?? ""), m = Number(p[s] ?? 0);
+    c.push(g), m >= 0 ? (u.push(b), f.push(m), y.push(null)) : (u.push(b + m), f.push(null), y.push(Math.abs(m))), b += m;
   }
   return {
     tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
@@ -312,20 +318,20 @@ function fe(e, t, i) {
         name: "Positive",
         type: "bar",
         stack: "waterfall",
-        data: l
+        data: f
       },
       {
         name: "Negative",
         type: "bar",
         stack: "waterfall",
-        data: m
+        data: y
       }
     ]
   };
 }
 function he(e, t) {
   if (!Array.isArray(e)) return {};
-  const i = e.map((r) => N(r));
+  const i = e.map((r) => z(r));
   return {
     tooltip: { trigger: "item" },
     series: [{
@@ -337,12 +343,12 @@ function he(e, t) {
     }]
   };
 }
-function N(e) {
+function z(e) {
   const t = {
     name: String(e.name ?? ""),
     value: Number(e.value ?? 0)
   };
-  return Array.isArray(e.children) && (t.children = e.children.map((i) => N(i))), t;
+  return Array.isArray(e.children) && (t.children = e.children.map((i) => z(i))), t;
 }
 function j(e) {
   if (e.length === 0) return [];
@@ -365,7 +371,7 @@ var ye = Object.defineProperty, de = Object.getOwnPropertyDescriptor, M = (e, t,
     (c = e[s]) && (n = (r ? c(t, i, n) : c(n)) || n);
   return r && n && ye(t, i, n), n;
 };
-z.use([
+N.use([
   B,
   q,
   G,
@@ -401,7 +407,7 @@ let _ = class extends I {
   _initChart() {
     if (!(!this._container || !this.spec))
       try {
-        this._chart = z.init(this._container), this._chart.on("click", (e) => {
+        this._chart = N.init(this._container), this._chart.on("click", (e) => {
           this._onChartClick(e);
         }), this._updateChart();
       } catch (e) {