@cloudflare/kumo 2.2.0 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @cloudflare/kumo
 
+## 2.2.1
+
+### Patch Changes
+
+- 57bbe62: fix(banner): remove variant selection background for legibility
+
+  Selected text inside `Banner` now uses the browser default selection color
+  instead of a same-hue variant-tinted background. The previous
+  `selection:bg-kumo-{info,warning,danger}` utilities produced low contrast
+  between the selection background and the variant text color (most notably
+  in light mode for the `error` and `alert` variants), making selected text
+  hard to read.
+
+- 3d80fe7: Add `left` and `right` props to SankeyChart for controlling series layout padding
+- 194aea8: Fix tooltip popup exit transitions by animating the Tailwind `scale` property alongside opacity.
+
 ## 2.2.0
 
 ### Minor Changes

package/ai/component-registry.json

@@ -331,9 +331,9 @@
             "error": "Error banner for critical issues"
           },
           "classes": {
-            "default": "bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info selection:bg-kumo-info",
-            "alert": "bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning selection:bg-kumo-warning",
-            "error": "bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger selection:bg-kumo-danger"
+            "default": "bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info",
+            "alert": "bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning",
+            "error": "bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger"
           },
           "default": "default"
         },
@@ -356,11 +356,8 @@
         "<Banner icon={<Info />}>This is a simple banner using children.</Banner>"
       ],
       "colors": [
-        "bg-kumo-danger",
         "bg-kumo-danger-tint",
-        "bg-kumo-info",
         "bg-kumo-info-tint",
-        "bg-kumo-warning",
         "bg-kumo-warning-tint",
         "border-kumo-danger",
         "border-kumo-info",

package/ai/component-registry.md

@@ -371,7 +371,7 @@ Full-width message bar for informational, warning, or error notices. Supports st
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-danger`, `bg-kumo-danger-tint`, `bg-kumo-info`, `bg-kumo-info-tint`, `bg-kumo-warning`, `bg-kumo-warning-tint`, `border-kumo-danger`, `border-kumo-info`, `border-kumo-warning`, `text-kumo-danger`, `text-kumo-info`, `text-kumo-warning`
+`bg-kumo-danger-tint`, `bg-kumo-info-tint`, `bg-kumo-warning-tint`, `border-kumo-danger`, `border-kumo-info`, `border-kumo-warning`, `text-kumo-danger`, `text-kumo-info`, `text-kumo-warning`
 
 **Examples:**
 

package/dist/.build-complete

@@ -1 +1 @@
-1778770740533
+1778851251288

package/dist/chunks/SankeyChart-dkq90770ad7hgzx3.js

@@ -0,0 +1,635 @@
+"use client";
+import { jsx as N, jsxs as z } from "react/jsx-runtime";
+import { forwardRef as re, useRef as H, useEffect as M, useMemo as P, useCallback as se } from "react";
+import { c as T } from "./cn-ct4n7r74mh8y0f48.js";
+var te = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#B9D6FF", e.Disabled = "#CBCBCB", e.Skeleton = "#DDDDDD", e))(te || {}), ne = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#8EC5FF", e.Disabled = "#878787", e.Skeleton = "#5C5C5C", e))(ne || {});
+const oe = {
+  blues: ["#E1EAF4", "#8EBCF6", "#4290F0", "#0E58B4", "#03254F"]
+}, ae = {
+  blues: ["#03254F", "#0E58B4", "#4290F0", "#A6BFDD", "#E1EAF4"]
+}, K = [
+  "#4290F0",
+  "#F5B647",
+  "#E8649D",
+  "#8D58EE",
+  "#50C3B6",
+  "#D37536"
+  /* Orange */
+], Y = [
+  "#4290F0",
+  "#EEB720",
+  "#E8649D",
+  "#8D58EE",
+  "#50C3B6",
+  "#D37536"
+  /* Orange */
+];
+var j;
+((e) => {
+  function t(s, d = !1) {
+    return d ? ne[s] : te[s];
+  }
+  e.semantic = t;
+  function a(s, d = !1) {
+    return d ? Y[s % Y.length] : K[s % K.length];
+  }
+  e.categorical = a;
+  function l(s, d = !1) {
+    return d ? [...ae[s]] : [...oe[s]];
+  }
+  e.sequential = l;
+  function r(s, d = !1) {
+    const b = {
+      light: { primary: "#6B7280", secondary: "#9CA3AF" },
+      dark: { primary: "#9CA3AF", secondary: "#6B7280" }
+    };
+    return d ? b.dark[s] : b.light[s];
+  }
+  e.text = r;
+})(j || (j = {}));
+const Q = (e) => {
+  const { dangerousHtmlFormatter: t, ...a } = e;
+  return {
+    ...a,
+    formatter: t
+  };
+}, ce = (e) => e.tooltip ? {
+  ...e,
+  tooltip: Array.isArray(e.tooltip) ? e.tooltip.map(Q) : Q(e.tooltip)
+} : e, J = re(function({
+  echarts: t,
+  options: a,
+  optionUpdateBehavior: l,
+  className: r,
+  isDarkMode: s,
+  height: d = 350,
+  onEvents: b
+}, g) {
+  const p = H(null), S = H(null), A = H({}), E = H({}), F = H(/* @__PURE__ */ new Set());
+  return M(() => {
+    if (!p.current) return;
+    const f = t.init(
+      p.current,
+      s ? "dark" : {
+        color: s ? Y : K
+      }
+    );
+    return S.current = f, typeof g == "function" ? g(f) : g && (g.current = f), () => {
+      for (const x of F.current) {
+        const o = E.current[x];
+        o && f.off(x, o);
+      }
+      F.current.clear(), typeof g == "function" ? g(null) : g && (g.current = null), S.current = null, f.dispose();
+    };
+  }, [p, s]), M(() => {
+    const f = S.current;
+    f && f.setOption(ce(a), {
+      notMerge: !1,
+      lazyUpdate: !0,
+      ...l
+    });
+  }, [s, l, a]), M(() => {
+    A.current = b ?? {};
+  }, [b]), M(() => {
+    const f = S.current;
+    if (!f) return;
+    const x = /* @__PURE__ */ new Set();
+    for (const [o, v] of Object.entries(b ?? {}))
+      typeof v == "function" && (x.add(o), E.current[o] || (E.current[o] = (L) => {
+        A.current[o]?.(L);
+      }), F.current.has(o) || f.on(o, E.current[o]));
+    for (const o of F.current) {
+      if (x.has(o)) continue;
+      const v = E.current[o];
+      v && f.off(o, v);
+    }
+    F.current = x;
+  }, [t, s, b]), M(() => {
+    const f = S.current, x = p.current;
+    if (!f || !x) return;
+    let o = !0;
+    const v = new ResizeObserver(() => {
+      if (o) {
+        o = !1;
+        return;
+      }
+      f.resize();
+    });
+    return v.observe(x), () => v.disconnect();
+  }, []), /* @__PURE__ */ N(
+    "div",
+    {
+      ref: p,
+      className: T("w-full", r),
+      style: { height: d },
+      tabIndex: a.aria?.enabled ? 0 : void 0,
+      role: a.aria?.enabled ? "img" : void 0
+    }
+  );
+});
+J.displayName = "Chart";
+function ye({
+  echarts: e,
+  type: t = "line",
+  data: a,
+  xAxisName: l,
+  xAxisTickCount: r,
+  xAxisTickFormat: s,
+  yAxisTickFormat: d,
+  yAxisTickLabelFormat: b,
+  yAxisName: g,
+  yAxisTickCount: p,
+  tooltipValueFormat: S,
+  onTimeRangeChange: A,
+  height: E = 350,
+  incomplete: F,
+  isDarkMode: f,
+  gradient: x,
+  loading: o,
+  ariaDescription: v,
+  optionUpdateBehavior: L
+}) {
+  const O = H(null), R = F?.before, C = F?.after, k = P(() => {
+    const i = [], B = t === "bar" ? { type: "bar", stack: "total" } : { type: "line", showSymbol: !1 };
+    for (const c of a) {
+      const $ = R && t === "line" ? c.data.filter((w) => w[0] <= R) : [], n = C && t === "line" ? c.data.filter((w) => w[0] >= C) : [], u = $.length > 0 || n.length > 0 ? c.data.slice(
+        Math.max(0, $.length - 1),
+        Math.max(0, c.data.length - n.length + 1)
+      ) : c.data, m = x && t === "line" ? {
+        color: new e.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: Z(c.color, 0.4) },
+          { offset: 1, color: Z(c.color, 0) }
+        ])
+      } : void 0;
+      i.push({
+        data: u,
+        color: c.color,
+        name: c.name,
+        emphasis: { focus: "series" },
+        ...m ? { areaStyle: m } : {},
+        ...B
+      });
+      const y = {
+        color: c.color,
+        name: c.name,
+        type: "line",
+        lineStyle: { type: "dashed" },
+        showSymbol: !1,
+        emphasis: { focus: "series" }
+      };
+      $.length > 0 && i.push({
+        ...y,
+        data: $
+      }), n.length > 0 && i.push({
+        ...y,
+        data: n
+      });
+    }
+    return {
+      aria: {
+        enabled: !0,
+        ...v && { label: { description: v } }
+      },
+      brush: {
+        xAxisIndex: "all",
+        brushType: "lineX",
+        brushMode: "single",
+        outOfBrush: {
+          colorAlpha: 0.3
+        },
+        brushStyle: {
+          borderWidth: 1,
+          color: "rgba(120,140,180,0.3)",
+          borderColor: "rgba(120,140,180,0.8)"
+        }
+      },
+      tooltip: {
+        trigger: "axis",
+        appendTo: "body",
+        axisPointer: { type: "shadow" },
+        dangerousHtmlFormatter: (c) => {
+          const $ = Array.isArray(c) ? c : [c], n = /* @__PURE__ */ new Set(), u = $.filter((I) => n.has(I.seriesName) ? !1 : (n.add(I.seriesName), !0)), m = u[0], y = m?.value?.[0] ?? m?.axisValue, w = y != null ? `<div style="font-weight:600;margin-bottom:4px;">${e.format.encodeHTML(ie(y))}</div>` : "", V = u.map((I) => {
+            const G = I?.value?.[1], W = S ?? b, U = W ? e.format.encodeHTML(String(W(G))) : e.format.encodeHTML(String(G));
+            return `${I.marker} ${e.format.encodeHTML(I.seriesName)}: <strong>${U}</strong>`;
+          }).join("<br/>");
+          return `${w}${V}`;
+        }
+      },
+      backgroundColor: "transparent",
+      toolbox: { show: !1 },
+      xAxis: {
+        name: l,
+        nameLocation: "middle",
+        nameGap: 30,
+        type: "time",
+        splitLine: {
+          show: !1
+        },
+        axisLine: { show: !1 },
+        splitNumber: r ?? 5,
+        ...s && {
+          axisLabel: {
+            formatter: (c) => s(c)
+          }
+        }
+      },
+      yAxis: {
+        name: g,
+        nameLocation: "middle",
+        nameGap: 40,
+        type: "value",
+        axisTick: { show: !0 },
+        axisLabel: {
+          margin: 15,
+          ...d && {
+            formatter: (c) => d(c)
+          }
+        },
+        splitLine: {
+          show: !0,
+          lineStyle: { type: "dashed", width: 1 }
+        },
+        splitNumber: p
+      },
+      grid: {
+        left: g ? 30 : 24,
+        right: 24,
+        top: 24,
+        bottom: l ? 30 : 24
+      },
+      series: i
+    };
+  }, [
+    a,
+    l,
+    r,
+    s,
+    d,
+    b,
+    g,
+    p,
+    S,
+    R,
+    C,
+    t,
+    x,
+    e,
+    v
+  ]), _ = P(() => A ? {
+    brushend: (i) => {
+      const B = i.areas[0].coordRange;
+      A(B[0], B[1]), O.current?.dispatchAction({ type: "brush", areas: [] });
+    }
+  } : {}, [A]), h = !!A;
+  return M(() => {
+    const i = O.current;
+    if (i && h)
+      return i.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "brush",
+        brushOption: {
+          brushType: "lineX",
+          brushMode: "single"
+        }
+      }), () => {
+        i.dispatchAction({
+          type: "takeGlobalCursor",
+          key: "brush",
+          brushOption: {
+            brushType: !1
+          }
+        });
+      };
+  }, [O, h, o]), /* @__PURE__ */ z("div", { className: "relative w-full", style: { height: E }, children: [
+    o && /* @__PURE__ */ N(le, { height: E, isDarkMode: f }),
+    !o && /* @__PURE__ */ N(
+      J,
+      {
+        echarts: e,
+        ref: O,
+        options: k,
+        height: E,
+        isDarkMode: f,
+        onEvents: _,
+        optionUpdateBehavior: L
+      }
+    )
+  ] });
+}
+function le({
+  height: e,
+  isDarkMode: t
+}) {
+  const a = e / 2, l = Math.min(e * 0.12, 28), r = 400, s = 120, d = [];
+  for (let p = 0; p <= s; p++) {
+    const S = -r + p / s * r * 3, A = a + Math.sin(p / s * 2 * Math.PI * 3) * l;
+    d.push(`${p === 0 ? "M" : "L"}${S.toFixed(2)},${A.toFixed(2)}`);
+  }
+  const b = d.join(" "), g = t ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "absolute inset-0 overflow-hidden",
+      style: { height: e },
+      children: /* @__PURE__ */ N(
+        "svg",
+        {
+          width: "100%",
+          height: e,
+          viewBox: `0 0 ${r} ${e}`,
+          preserveAspectRatio: "none",
+          className: "w-full animate-pulse",
+          children: /* @__PURE__ */ N(
+            "path",
+            {
+              d: b,
+              fill: "none",
+              stroke: g,
+              strokeWidth: "2",
+              style: {
+                animation: "kumo-chart-wave 2.4s linear infinite",
+                transformOrigin: "0 0"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Z(e, t) {
+  const a = Math.max(0, Math.min(1, t)), l = e.match(
+    /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
+  );
+  if (l)
+    return `rgba(${l[1]}, ${l[2]}, ${l[3]}, ${a})`;
+  let r = e.replace(/^#/, "");
+  r.length === 3 && (r = r[0] + r[0] + r[1] + r[1] + r[2] + r[2]), r.length === 8 && (r = r.slice(0, 6));
+  const s = parseInt(r.slice(0, 2), 16), d = parseInt(r.slice(2, 4), 16), b = parseInt(r.slice(4, 6), 16);
+  return `rgba(${s}, ${d}, ${b}, ${a})`;
+}
+function D(e) {
+  return e.toString().padStart(2, "0");
+}
+function ie(e) {
+  const t = new Date(e);
+  return `${t.getFullYear()}-${D(t.getMonth() + 1)}-${D(t.getDate())} ${D(t.getHours())}:${D(t.getMinutes())}:${D(t.getSeconds())}`;
+}
+function ue({ color: e, value: t, name: a, unit: l, inactive: r }) {
+  return /* @__PURE__ */ z("div", { className: "inline-flex flex-col gap-2 min-w-42 py-2", children: [
+    /* @__PURE__ */ z("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ N(
+        "span",
+        {
+          className: T("size-2 rounded-full inline-block", {
+            "opacity-50": r
+          }),
+          style: { backgroundColor: e }
+        }
+      ),
+      /* @__PURE__ */ N("span", { className: T("text-xs", { "opacity-50": r }), children: a })
+    ] }),
+    /* @__PURE__ */ z("div", { className: "flex items-baseline gap-0.5", children: [
+      /* @__PURE__ */ N(
+        "span",
+        {
+          className: T("text-lg font-medium leading-none", {
+            "opacity-50": r
+          }),
+          children: t
+        }
+      ),
+      l && /* @__PURE__ */ N(
+        "span",
+        {
+          className: T("text-xs text-kumo-subtle leading-none", {
+            "opacity-50": r
+          }),
+          children: l
+        }
+      )
+    ] })
+  ] });
+}
+function de({ color: e, value: t, name: a, inactive: l }) {
+  return /* @__PURE__ */ z("div", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ N(
+      "span",
+      {
+        className: T("size-2 rounded-full inline-block", {
+          "opacity-50": l
+        }),
+        style: { backgroundColor: e }
+      }
+    ),
+    /* @__PURE__ */ N("span", { className: T("text-xs", { "opacity-50": l }), children: a }),
+    /* @__PURE__ */ N("span", { className: T("text-xs font-medium", { "opacity-50": l }), children: t })
+  ] });
+}
+const ve = {
+  SmallItem: de,
+  LargeItem: ue
+}, fe = (e) => e.toLocaleString();
+function pe(e) {
+  return typeof e == "object" && e !== null;
+}
+const q = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), ee = (e) => e.replace(/[{}|]/g, (t) => `\\${t}`), X = (e) => {
+  const t = "#666";
+  return !e || typeof e != "string" ? t : /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e) || /^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(?:,\s*[\d.]+\s*)?\)$/i.test(
+    e
+  ) || /^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(?:,\s*[\d.]+\s*)?\)$/i.test(
+    e
+  ) || /^[a-z]{3,20}$/i.test(e) ? e : t;
+};
+function ge({
+  echarts: e,
+  nodes: t,
+  links: a,
+  height: l = 400,
+  nodeWidth: r = 8,
+  nodePadding: s = 10,
+  showTooltip: d = !0,
+  showNodeValues: b,
+  formatValue: g = fe,
+  tooltipFormatter: p,
+  defaultNodeColor: S,
+  left: A,
+  right: E,
+  linkColor: F = "gradient",
+  linkOpacity: f = 0.5,
+  className: x,
+  isDarkMode: o,
+  onNodeClick: v,
+  onLinkClick: L
+}) {
+  const O = t.some((h) => h.value !== void 0), R = b ?? O, C = P(() => {
+    const h = j.text("primary", o), i = j.text("secondary", o), B = new Map(t.map((n) => [n.name, n])), c = t.map((n, u) => ({
+      name: n.name,
+      value: n.value,
+      itemStyle: {
+        color: n.color ?? S ?? j.categorical(u, o)
+      }
+    })), $ = a.map((n) => ({
+      source: t[n.source]?.name ?? "",
+      target: t[n.target]?.name ?? "",
+      value: n.value
+    }));
+    return {
+      backgroundColor: "transparent",
+      animation: !0,
+      animationDuration: 500,
+      animationDurationUpdate: 300,
+      animationEasingUpdate: "cubicInOut",
+      tooltip: d ? {
+        trigger: "item",
+        triggerOn: "mousemove",
+        dangerousHtmlFormatter: (n) => {
+          if (!pe(n)) return "";
+          if (n.dataType === "node" && n.name) {
+            const u = B.get(n.name), m = X(
+              u?.color ?? n.color ?? "#666"
+            );
+            if (p)
+              return p({
+                type: "node",
+                name: n.name,
+                node: u,
+                color: m
+              });
+            const y = q(n.name);
+            return `<div style="display:flex;align-items:center;gap:6px;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${m}"></span><strong>${y}</strong></div>`;
+          }
+          if (n.dataType === "edge" && n.data) {
+            const { source: u, target: m, value: y } = n.data;
+            if (p)
+              return p({
+                type: "link",
+                name: `${u} → ${m}`,
+                link: {
+                  source: u ?? "",
+                  target: m ?? "",
+                  value: y ?? 0
+                }
+              });
+            const w = B.get(u ?? ""), V = B.get(m ?? ""), I = X(w?.color ?? "#666"), G = X(V?.color ?? "#666"), W = q(u ?? ""), U = q(m ?? "");
+            return `<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
+                  <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${I}"></span>
+                  <strong>${W}</strong>
+                  <span style="color:${i}">→</span>
+                  <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${G}"></span>
+                  <strong>${U}</strong>
+                </div>
+                <strong>${y !== void 0 ? q(g(y)) : ""}</strong>`;
+          }
+          return "";
+        }
+      } : void 0,
+      series: [
+        {
+          type: "sankey",
+          ...A !== void 0 && { left: A },
+          ...E !== void 0 && { right: E },
+          data: c,
+          links: $,
+          draggable: !1,
+          emphasis: {
+            focus: "adjacency"
+          },
+          nodeWidth: r,
+          nodeGap: s,
+          lineStyle: {
+            color: F === "gradient" ? "source" : "#d1d5db",
+            opacity: F === "gradient" ? f : 0.4,
+            curveness: 0.5
+          },
+          label: {
+            show: !0,
+            color: h,
+            fontSize: 12,
+            formatter: R ? (n) => {
+              const u = n.name ?? "", m = B.get(u), y = ee(u);
+              return m?.value !== void 0 ? `{value|${ee(g(m.value))}}
+{name|${y}}` : y;
+            } : void 0,
+            rich: R ? {
+              value: {
+                fontSize: 11,
+                color: h,
+                lineHeight: 16
+              },
+              name: {
+                fontSize: 12,
+                color: h,
+                fontWeight: 700
+              }
+            } : void 0
+          }
+        }
+      ]
+    };
+  }, [
+    t,
+    a,
+    d,
+    r,
+    s,
+    S,
+    A,
+    E,
+    o,
+    F,
+    f,
+    R,
+    g,
+    p
+  ]), k = se(
+    (h) => {
+      if (h.dataType === "node" && v && h.name) {
+        const i = t.findIndex(($) => $.name === h.name), c = {
+          ...i >= 0 ? t[i] : null,
+          name: h.name
+        };
+        v(c);
+      } else if (h.dataType === "edge" && L && h.data) {
+        const i = h.data, B = typeof i == "object" && i !== null && "source" in i ? String(i.source) : "", c = typeof i == "object" && i !== null && "target" in i ? String(i.target) : "", $ = t.findIndex((w) => w.name === B), n = t.findIndex((w) => w.name === c);
+        if ($ === -1 || n === -1) return;
+        const u = h.value, m = typeof u == "number" ? u : Array.isArray(u) && typeof u[0] == "number" ? u[0] : 0, y = a.find(
+          (w) => w.source === $ && w.target === n
+        );
+        L({
+          ...y,
+          source: $,
+          target: n,
+          value: m
+        });
+      }
+    },
+    [t, a, v, L]
+  ), _ = P(
+    () => ({
+      click: k
+    }),
+    [k]
+  );
+  return /* @__PURE__ */ N(
+    J,
+    {
+      echarts: e,
+      options: C,
+      className: x,
+      isDarkMode: o,
+      height: l,
+      onEvents: _
+    }
+  );
+}
+ge.displayName = "SankeyChart";
+export {
+  J as C,
+  ge as S,
+  ye as T,
+  ve as a,
+  j as b
+};
+//# sourceMappingURL=SankeyChart-dkq90770ad7hgzx3.js.map