react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/chunks/WaterfallChart-C6NFbfO0.js

@@ -0,0 +1,1337 @@
+"use client";
+import { jsx as a, Fragment as I, jsxs as v } from "react/jsx-runtime";
+import { d as H, C as O, c as J, n as q, q as Y, s as T, h as X, i as ta, P as K, N as Z, f as E, j as oa, l as la, e as G, K as da, p as j, g as ra, b as ia, k as ha } from "./StackedAreaChart-DF1-3rDG.js";
+function ma($) {
+  const y = {};
+  for (const r of String($ ?? "").split(";")) {
+    const d = r.indexOf(":");
+    if (d < 0) continue;
+    const s = r.slice(0, d).trim();
+    s && (y[s.startsWith("--") ? s : s.replace(/-([a-z])/g, (g, M) => M.toUpperCase())] = r.slice(d + 1).trim());
+  }
+  return y;
+}
+function Na({
+  title: $ = "System Capabilities",
+  data: y = [
+    { axis: "Speed", value: 95 },
+    { axis: "A11y", value: 98 },
+    { axis: "SEO", value: 100 },
+    { axis: "Design", value: 92 },
+    { axis: "Zero-JS", value: 96 },
+    { axis: "Security", value: 90 }
+  ],
+  color: r = "#d4a017",
+  size: d = 320
+}) {
+  const s = d / 2, g = (d - 70) / 2, M = y.length, _ = Math.PI * 2 / M, C = [0.2, 0.4, 0.6, 0.8, 1].map((x) => y.map((p, i) => {
+    const l = g * x, o = s + l * Math.cos(_ * i - Math.PI / 2), h = s + l * Math.sin(_ * i - Math.PI / 2);
+    return `${o},${h}`;
+  }).join(" ")), S = y.map((x, p) => {
+    const i = g * (Math.min(100, Math.max(0, x.value)) / 100), l = s + i * Math.cos(_ * p - Math.PI / 2), o = s + i * Math.sin(_ * p - Math.PI / 2);
+    return `${l},${o}`;
+  }).join(" ");
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ v("div", { className: "radar-card", style: ma(`--radar-size: ${d}px; --radar-color: ${r};`), "data-rk-5aa1c8": "", children: [
+    $ && /* @__PURE__ */ a("h5", { className: "radar-card__title", "data-rk-5aa1c8": "", children: $ }),
+    /* @__PURE__ */ a("div", { className: "radar-card__wrap", "data-rk-5aa1c8": "", children: /* @__PURE__ */ v("svg", { width: d, height: d, className: "radar-card__svg", "data-rk-5aa1c8": "", children: [
+      C.map((x, p) => /* @__PURE__ */ a("polygon", { points: x, className: "radar-web", "data-rk-5aa1c8": "" }, p)),
+      y.map((x, p) => {
+        const i = s + g * Math.cos(_ * p - Math.PI / 2), l = s + g * Math.sin(_ * p - Math.PI / 2);
+        return /* @__PURE__ */ a("line", { x1: s, y1: s, x2: i, y2: l, className: "radar-spoke", "data-rk-5aa1c8": "" }, p);
+      }),
+      /* @__PURE__ */ a("polygon", { points: S, className: "radar-data", "data-rk-5aa1c8": "" }),
+      y.map((x, p) => {
+        const i = g * (x.value / 100), l = s + i * Math.cos(_ * p - Math.PI / 2), o = s + i * Math.sin(_ * p - Math.PI / 2);
+        return /* @__PURE__ */ a("circle", { cx: l, cy: o, r: "4", className: "radar-node", "data-rk-5aa1c8": "" }, p);
+      }),
+      y.map((x, p) => {
+        const i = g + 22, l = s + i * Math.cos(_ * p - Math.PI / 2), o = s + i * Math.sin(_ * p - Math.PI / 2);
+        return /* @__PURE__ */ v("text", { x: l, y: o, className: "radar-label", textAnchor: "middle", dominantBaseline: "central", "data-rk-5aa1c8": "", children: [
+          x.axis,
+          " (",
+          x.value,
+          ")"
+        ] }, p);
+      })
+    ] }) })
+  ] }) });
+}
+function ca($) {
+  const y = {};
+  for (const r of String($ ?? "").split(";")) {
+    const d = r.indexOf(":");
+    if (d < 0) continue;
+    const s = r.slice(0, d).trim();
+    s && (y[s.startsWith("--") ? s : s.replace(/-([a-z])/g, (g, M) => M.toUpperCase())] = r.slice(d + 1).trim());
+  }
+  return y;
+}
+function wa({
+  title: $ = "System Resource Allocation",
+  segments: y = [
+    { label: "SSR Execution", value: 45, color: "#d4a017" },
+    { label: "Asset Caching", value: 25, color: "#38bdf8" },
+    { label: "Edge Worker", value: 15, color: "#a855f7" },
+    { label: "Free Headroom", value: 15, color: "rgb(var(--ink-rgb, 255 255 255) / 0.1)" }
+  ],
+  total: r = "100%"
+}) {
+  const d = y.reduce((s, g) => s + g.value, 0) || 100;
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ v("div", { className: "linear-gauge", "data-rk-4f95ee": "", children: [
+    /* @__PURE__ */ v("div", { className: "linear-gauge__header", "data-rk-4f95ee": "", children: [
+      /* @__PURE__ */ a("span", { className: "linear-gauge__title", "data-rk-4f95ee": "", children: $ }),
+      /* @__PURE__ */ a("span", { className: "linear-gauge__total", "data-rk-4f95ee": "", children: r })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "linear-gauge__bar", role: "progressbar", "aria-valuemax": 100, "aria-valuemin": 0, "data-rk-4f95ee": "", children: y.map((s, g) => {
+      const M = s.value / d * 100;
+      return /* @__PURE__ */ a("div", { className: "linear-gauge__chunk", style: ca(`width: ${M}%; background-color: ${s.color};`), title: `${s.label}: ${s.value}%`, "data-rk-4f95ee": "" }, g);
+    }) }),
+    /* @__PURE__ */ a("div", { className: "linear-gauge__legend", "data-rk-4f95ee": "", children: y.map((s, g) => /* @__PURE__ */ v("div", { className: "legend-item", "data-rk-4f95ee": "", children: [
+      /* @__PURE__ */ a("span", { className: "legend-item__dot", style: ca(`background-color: ${s.color};`), "data-rk-4f95ee": "" }),
+      /* @__PURE__ */ a("span", { className: "legend-item__name", "data-rk-4f95ee": "", children: s.label }),
+      /* @__PURE__ */ v("span", { className: "legend-item__val", "data-rk-4f95ee": "", children: [
+        s.value,
+        "%"
+      ] })
+    ] }, g)) })
+  ] }) });
+}
+function ba($) {
+  const y = {};
+  for (const r of String($ ?? "").split(";")) {
+    const d = r.indexOf(":");
+    if (d < 0) continue;
+    const s = r.slice(0, d).trim();
+    s && (y[s.startsWith("--") ? s : s.replace(/-([a-z])/g, (g, M) => M.toUpperCase())] = r.slice(d + 1).trim());
+  }
+  return y;
+}
+function Wa({
+  title: $ = "Today",
+  subtitle: y = "Daily goals",
+  rings: r = [
+    { label: "Focus time", value: 5.2, goal: 6, unit: "h" },
+    { label: "Tasks done", value: 11, goal: 8 },
+    { label: "Reviews", value: 3, goal: 5 }
+  ],
+  colors: d = ["var(--chart-5, #d55181)", "var(--chart-3, #199e70)", "var(--chart-1, #3987e5)"],
+  variant: s = "glass",
+  size: g = "md",
+  className: M = ""
+}) {
+  const S = r.slice(0, 4).map((x, p) => {
+    const i = 96 - p * 24, l = x.value / (x.goal || 1);
+    return { ...x, radius: i, pct: l, color: H(p, d) };
+  });
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: s, size: g, className: M, table: { headers: ["Goal", "Value", "Target", "Progress"], rows: S.map((x) => [x.label, `${x.value}${x.unit ?? ""}`, `${x.goal}${x.unit ?? ""}`, `${Math.round(x.pct * 100)}%`]) }, children: /* @__PURE__ */ v("div", { className: "ar", "data-rk-2006ec": "", children: [
+    /* @__PURE__ */ a("svg", { viewBox: "0 0 220 220", role: "img", "aria-label": `${$}: ${S.map((x) => `${x.label} ${Math.round(x.pct * 100)}%`).join(", ")}`, "data-rk-2006ec": "", children: S.map((x, p) => {
+      const i = Math.min(x.pct, 0.9999), l = x.pct > 1 ? Math.min(x.pct - 1, 0.9999) : 0;
+      return /* @__PURE__ */ v("g", { "data-rk-2006ec": "", children: [
+        /* @__PURE__ */ a("circle", { cx: 110, cy: 110, r: x.radius, fill: "none", stroke: x.color, strokeOpacity: "0.16", strokeWidth: 20, "data-rk-2006ec": "" }),
+        i > 0 && /* @__PURE__ */ a("path", { className: "ar__arc", d: J(110, 110, x.radius, 0, Math.PI * 2 * i), fill: "none", stroke: x.color, strokeWidth: 20, strokeLinecap: "round", "data-rk-2006ec": "" }),
+        l > 0 && /* @__PURE__ */ a("path", { d: J(110, 110, x.radius, 0, Math.PI * 2 * l), fill: "none", stroke: x.color, strokeWidth: 20, strokeLinecap: "round", style: { filter: "drop-shadow(0 0 3px rgba(0,0,0,0.6)) brightness(1.15)" }, "data-rk-2006ec": "" })
+      ] }, p);
+    }) }),
+    /* @__PURE__ */ a("ul", { className: "ar__list", "data-rk-2006ec": "", children: S.map((x, p) => /* @__PURE__ */ v("li", { "data-rk-2006ec": "", children: [
+      /* @__PURE__ */ v("span", { className: "ar__label", "data-rk-2006ec": "", children: [
+        /* @__PURE__ */ a("i", { style: ba(`background:${x.color}`), "aria-hidden": "true", "data-rk-2006ec": "" }),
+        x.label
+      ] }),
+      /* @__PURE__ */ v("span", { className: "ar__value", "data-rk-2006ec": "", children: [
+        x.value,
+        x.unit ?? "",
+        /* @__PURE__ */ v("small", { "data-rk-2006ec": "", children: [
+          "/",
+          x.goal,
+          x.unit ?? ""
+        ] })
+      ] }),
+      /* @__PURE__ */ v("span", { className: "ar__pct", "data-rk-2006ec": "", children: [
+        Math.round(x.pct * 100),
+        "%",
+        x.pct >= 1 && /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", "aria-label": "goal met", "data-rk-2006ec": "", children: /* @__PURE__ */ a("path", { d: "M20 6 9 17l-5-5", "data-rk-2006ec": "" }) })
+      ] })
+    ] }, p)) })
+  ] }) }) });
+}
+const V = ($, y, r, d) => Array.from({ length: y }, (s, g) => {
+  const M = Math.sin((g + 1) * $) * 9999, _ = Math.sin((g + 3) * $ * 1.7) * 9999;
+  return Math.round(r + (M - Math.floor(M) + (_ - Math.floor(_)) - 1) * d);
+});
+function _a({
+  title: $ = "Response time by region",
+  subtitle: y = "Distribution of p50 latency, ms",
+  groups: r = [
+    { label: "us-east", values: [...V(1.3, 40, 82, 40), 190] },
+    { label: "us-west", values: V(2.7, 40, 95, 45) },
+    { label: "eu-central", values: [...V(4.1, 40, 70, 30), 160, 172] },
+    { label: "ap-south", values: V(5.9, 40, 140, 70) },
+    { label: "sa-east", values: V(8.3, 40, 160, 55) }
+  ],
+  suffix: d = "ms",
+  height: s = 290,
+  color: g = "var(--chart-1, #3987e5)",
+  variant: M = "glass",
+  size: _ = "md",
+  className: w = ""
+}) {
+  const C = r.map((c) => {
+    const e = [...c.values].sort((k, P) => k - P), u = Y(e, 0.25), f = Y(e, 0.5), A = Y(e, 0.75), N = A - u, W = e.find((k) => k >= u - 1.5 * N) ?? e[0], b = [...e].reverse().find((k) => k <= A + 1.5 * N) ?? e[e.length - 1], m = e.filter((k) => k < W || k > b);
+    return { label: c.label, q1: u, med: f, q3: A, lo: W, hi: b, outliers: m, n: e.length };
+  }), S = 640, x = s, p = { t: 14, r: 12, b: 30, l: 48 }, i = r.flatMap((c) => c.values), l = q(Math.min(...i), Math.max(...i), 4), o = T(l[0], l[l.length - 1], x - p.b, p.t), h = (S - p.l - p.r) / r.length, t = Math.min(56, h * 0.45), n = (c) => `${Math.round(c)}${d}`;
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: M, size: _, className: w, table: { headers: ["Group", "Min", "Q1", "Median", "Q3", "Max", "Outliers"], rows: C.map((c) => [c.label, n(c.lo), n(c.q1), n(c.med), n(c.q3), n(c.hi), c.outliers.length]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 ${S} ${x}`, role: "img", "aria-label": `${$}: box plot of ${r.length} groups`, children: [
+    l.map((c, e) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: p.l, x2: S - p.r, y1: o(c), y2: o(c) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: p.l - 8, y: o(c) + 4, textAnchor: "end", children: n(c) })
+    ] }, e)),
+    C.map((c, e) => {
+      const u = p.l + e * h + h / 2;
+      return /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", "aria-label": `${c.label}: median ${n(c.med)}, IQR ${n(c.q1)}–${n(c.q3)}, range ${n(c.lo)}–${n(c.hi)}, ${c.outliers.length} outliers`, "data-tip-title": c.label, "data-tip": `Max: ${n(c.hi)}|Q3: ${n(c.q3)}|${g}::Median: ${n(c.med)}|Q1: ${n(c.q1)}|Min: ${n(c.lo)}${c.outliers.length ? `|Outliers: ${c.outliers.length}` : ""}`, children: [
+        /* @__PURE__ */ a("rect", { x: u - h / 2, y: p.t, width: h, height: x - p.t - p.b, fill: "transparent" }),
+        /* @__PURE__ */ a("line", { x1: u, x2: u, y1: o(c.hi), y2: o(c.q3), stroke: "var(--c-text-2, #a3a3a3)", strokeWidth: "1.5" }),
+        /* @__PURE__ */ a("line", { x1: u, x2: u, y1: o(c.q1), y2: o(c.lo), stroke: "var(--c-text-2, #a3a3a3)", strokeWidth: "1.5" }),
+        /* @__PURE__ */ a("line", { x1: u - t / 4, x2: u + t / 4, y1: o(c.hi), y2: o(c.hi), stroke: "var(--c-text-2, #a3a3a3)", strokeWidth: "1.5" }),
+        /* @__PURE__ */ a("line", { x1: u - t / 4, x2: u + t / 4, y1: o(c.lo), y2: o(c.lo), stroke: "var(--c-text-2, #a3a3a3)", strokeWidth: "1.5" }),
+        /* @__PURE__ */ a("rect", { x: u - t / 2, y: o(c.q3), width: t, height: Math.max(1, o(c.q1) - o(c.q3)), rx: "4", fill: g, fillOpacity: "0.3", stroke: g, strokeWidth: "1.5" }),
+        /* @__PURE__ */ a("line", { x1: u - t / 2, x2: u + t / 2, y1: o(c.med), y2: o(c.med), stroke: "var(--c-text-1, #fff)", strokeWidth: "2.5" }),
+        c.outliers.map((f, A) => /* @__PURE__ */ a("circle", { cx: u, cy: o(f), r: "3.5", fill: "none", stroke: g, strokeWidth: "1.5" }, A)),
+        /* @__PURE__ */ a("text", { className: "cf-label", x: u, y: x - 10, textAnchor: "middle", children: c.label })
+      ] }, e);
+    })
+  ] }) }) });
+}
+function Sa({
+  title: $ = "Market opportunity",
+  subtitle: y = "Growth vs margin, bubble = revenue",
+  items: r = [
+    { label: "Analytics", x: 34, y: 62, z: 120, group: 0 },
+    { label: "Payments", x: 18, y: 41, z: 260, group: 0 },
+    { label: "CRM", x: 9, y: 55, z: 180, group: 1 },
+    { label: "Hosting", x: 22, y: 28, z: 90, group: 1 },
+    { label: "AI tools", x: 71, y: 48, z: 70, group: 2 },
+    { label: "Security", x: 27, y: 72, z: 140, group: 2 },
+    { label: "Email", x: 6, y: 66, z: 60, group: 1 },
+    { label: "Design", x: 41, y: 58, z: 85, group: 0 }
+  ],
+  groups: d = ["Core", "Mature", "Emerging"],
+  xLabel: s = "YoY growth (%)",
+  yLabel: g = "Gross margin (%)",
+  zLabel: M = "Revenue ($M)",
+  height: _ = 320,
+  colors: w,
+  variant: C = "glass",
+  size: S = "md",
+  className: x = ""
+}) {
+  const i = _, l = { t: 20, r: 24, b: 40, l: 48 }, o = q(0, Math.max(...r.map((f) => f.x)), 5), h = q(0, Math.max(...r.map((f) => f.y)), 4), t = T(o[0], o[o.length - 1], l.l, 640 - l.r), n = T(h[0], h[h.length - 1], i - l.b, l.t), c = Math.max(...r.map((f) => f.z)) || 1, e = (f) => 6 + Math.sqrt(f / c) * 30, u = [...r].sort((f, A) => A.z - f.z);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: C, size: S, className: x, legend: d.slice(0, 3).map((f, A) => ({ label: f, color: H(A, w) })), table: { headers: ["Item", "Group", s, g, M], rows: r.map((f) => [f.label, d[f.group ?? 0] ?? "—", f.x, f.y, f.z]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${i}`, role: "img", "aria-label": `${$}: bubble chart of ${r.length} items`, children: [
+    h.map((f, A) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: l.l, x2: 640 - l.r, y1: n(f), y2: n(f) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: l.l - 8, y: n(f) + 4, textAnchor: "end", children: X(f) })
+    ] }, A)),
+    o.map((f, A) => /* @__PURE__ */ a("text", { className: "cf-label", x: t(f), y: i - l.b + 16, textAnchor: "middle", children: X(f) }, A)),
+    /* @__PURE__ */ a("text", { className: "cf-label", x: (l.l + 640 - l.r) / 2, y: i - 4, textAnchor: "middle", children: s }),
+    /* @__PURE__ */ a("text", { className: "cf-label", transform: `translate(12 ${(l.t + i - l.b) / 2}) rotate(-90)`, textAnchor: "middle", children: g }),
+    u.map((f, A) => {
+      const N = H(f.group ?? 0, w), W = e(f.z);
+      return /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", "aria-label": `${f.label}: ${s} ${f.x}, ${g} ${f.y}, ${M} ${f.z}`, "data-tip-title": f.label, "data-tip": `${N}::${d[f.group ?? 0] ?? ""}|${s}: ${f.x}|${g}: ${f.y}|${M}: ${f.z}`, children: [
+        /* @__PURE__ */ a("circle", { cx: t(f.x), cy: n(f.y), r: W, fill: N, fillOpacity: "0.55", stroke: N, strokeWidth: "1.5" }),
+        W > 18 && /* @__PURE__ */ a("text", { x: t(f.x), y: n(f.y) + 4, textAnchor: "middle", fill: "#fff", fontSize: "11", fontWeight: "600", children: f.label })
+      ] }, A);
+    })
+  ] }) }) });
+}
+function Q($) {
+  const y = {};
+  for (const r of String($ ?? "").split(";")) {
+    const d = r.indexOf(":");
+    if (d < 0) continue;
+    const s = r.slice(0, d).trim();
+    s && (y[s.startsWith("--") ? s : s.replace(/-([a-z])/g, (g, M) => M.toUpperCase())] = r.slice(d + 1).trim());
+  }
+  return y;
+}
+function Aa({
+  title: $ = "Quarterly targets",
+  subtitle: y = "Measure vs target with performance bands",
+  metrics: r = [
+    { label: "Revenue ($k)", value: 270, target: 250, ranges: [150, 225, 300] },
+    { label: "Profit", value: 23, target: 26, ranges: [20, 25, 30], unit: "%" },
+    { label: "New customers", value: 1650, target: 2100, ranges: [1400, 2e3, 2500] },
+    { label: "NPS", value: 54, target: 50, ranges: [30, 50, 70] }
+  ],
+  color: d = "var(--c-text-1, #fff)",
+  variant: s = "glass",
+  size: g = "md",
+  className: M = ""
+}) {
+  const _ = (w, C) => `${Math.min(100, w / C * 100)}%`;
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: s, size: g, className: M, table: { headers: ["Metric", "Value", "Target", "Status"], rows: r.map((w) => [w.label, `${w.value}${w.unit ?? ""}`, `${w.target}${w.unit ?? ""}`, w.value >= w.target ? "On target" : "Below target"]) }, children: /* @__PURE__ */ a("div", { className: "bc", "data-rk-d2b72d": "", children: r.map((w, C) => {
+    const S = w.ranges[2], x = w.value >= w.target;
+    return /* @__PURE__ */ v("div", { className: "bc__row cf-mark", tabIndex: 0, role: "meter", "aria-valuemin": 0, "aria-valuemax": S, "aria-valuenow": w.value, "aria-label": `${w.label}: ${w.value}${w.unit ?? ""} of target ${w.target}${w.unit ?? ""}`, "data-tip-title": w.label, "data-tip": `Value: ${w.value}${w.unit ?? ""}|Target: ${w.target}${w.unit ?? ""}|${x ? "var(--chart-pos)::On target" : "var(--chart-neg)::Below target"}`, "data-rk-d2b72d": "", children: [
+      /* @__PURE__ */ v("div", { className: "bc__meta", "data-rk-d2b72d": "", children: [
+        /* @__PURE__ */ a("span", { className: "bc__label", "data-rk-d2b72d": "", children: w.label }),
+        /* @__PURE__ */ v("span", { className: "bc__value", "data-rk-d2b72d": "", children: [
+          w.value,
+          w.unit ?? "",
+          /* @__PURE__ */ v("span", { className: `bc__status ${x ? "bc__status--ok" : "bc__status--bad"}`, "data-rk-d2b72d": "", children: [
+            /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", "aria-hidden": "true", "data-rk-d2b72d": "", children: x ? /* @__PURE__ */ a("path", { d: "M20 6 9 17l-5-5", "data-rk-d2b72d": "" }) : /* @__PURE__ */ v(I, { children: [
+              /* @__PURE__ */ a("circle", { cx: "12", cy: "12", r: "9", "data-rk-d2b72d": "" }),
+              /* @__PURE__ */ a("path", { d: "M12 8v4M12 16h.01", "data-rk-d2b72d": "" })
+            ] }) }),
+            x ? "On target" : "Below"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ v("div", { className: "bc__track", "aria-hidden": "true", "data-rk-d2b72d": "", children: [
+        /* @__PURE__ */ a("span", { className: "bc__band", style: Q(`width:${_(w.ranges[2], S)}; opacity:0.07`), "data-rk-d2b72d": "" }),
+        /* @__PURE__ */ a("span", { className: "bc__band", style: Q(`width:${_(w.ranges[1], S)}; opacity:0.11`), "data-rk-d2b72d": "" }),
+        /* @__PURE__ */ a("span", { className: "bc__band", style: Q(`width:${_(w.ranges[0], S)}; opacity:0.16`), "data-rk-d2b72d": "" }),
+        /* @__PURE__ */ a("span", { className: "bc__measure", style: Q(`width:${_(w.value, S)}; background:${d}`), "data-rk-d2b72d": "" }),
+        /* @__PURE__ */ a("span", { className: "bc__target", style: Q(`left:${_(w.target, S)}`), "data-rk-d2b72d": "" })
+      ] })
+    ] }, C);
+  }) }) }) });
+}
+function Ca({
+  title: $ = "Framework popularity rank",
+  subtitle: y = "Developer survey position by year",
+  periods: r = ["2021", "2022", "2023", "2024", "2025", "2026"],
+  series: d = [
+    { name: "React", ranks: [5, 4, 3, 2, 1, 1] },
+    { name: "Next", ranks: [1, 1, 1, 1, 2, 2] },
+    { name: "Svelte", ranks: [3, 2, 2, 3, 3, 4] },
+    { name: "Nuxt", ranks: [2, 3, 4, 4, 5, 3] },
+    { name: "Remix", ranks: [4, 5, 5, 5, 4, 5] }
+  ],
+  colors: s,
+  variant: g = "glass",
+  size: M = "md",
+  className: _ = ""
+}) {
+  const C = Math.max(...d.flatMap((t) => t.ranks)), S = 44, x = C * S + 36, p = { t: 30, l: 80, r: 80 }, i = r.length, l = (t) => p.l + t / Math.max(1, i - 1) * (640 - p.l - p.r), o = (t) => p.t + (t - 1) * S + 8, h = d.slice(0, 8).map((t, n) => ({
+    ...t,
+    color: H(n, s),
+    pts: t.ranks.map((c, e) => [l(e), o(c)])
+  }));
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: g, size: M, className: _, legend: h.map((t) => ({ label: t.name, color: t.color })), table: { headers: ["Name", ...r], rows: d.map((t) => [t.name, ...t.ranks.map((n) => `#${n}`)]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${x}`, role: "img", "aria-label": `${$}: bump chart of ranks over ${i} periods`, children: [
+    r.map((t, n) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: l(n), x2: l(n), y1: p.t - 6, y2: x - 10 }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: l(n), y: 14, textAnchor: "middle", children: t })
+    ] }, n)),
+    h.map((t, n) => /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", "aria-label": `${t.name}: ${t.ranks.map((c, e) => `${r[e]} #${c}`).join(", ")}`, "data-tip-title": t.name, "data-tip": t.ranks.map((c, e) => `${r[e]}: #${c}`).join("|"), children: [
+      /* @__PURE__ */ a("path", { d: ta(t.pts), fill: "none", stroke: t.color, strokeWidth: "3", strokeLinecap: "round" }),
+      /* @__PURE__ */ a("path", { d: ta(t.pts), fill: "none", stroke: "transparent", strokeWidth: "16" }),
+      t.pts.map(([c, e], u) => /* @__PURE__ */ v("g", { children: [
+        /* @__PURE__ */ a("circle", { cx: c, cy: e, r: "11", fill: t.color, stroke: "var(--chart-surface, #0d0d0f)", strokeWidth: "2" }),
+        /* @__PURE__ */ a("text", { x: c, y: e + 4, textAnchor: "middle", fontSize: "10", fontWeight: "700", fill: "#fff", children: t.ranks[u] })
+      ] }, u)),
+      /* @__PURE__ */ a("text", { className: "cf-label cf-label--strong", x: p.l - 18, y: t.pts[0][1] + 4, textAnchor: "end", children: t.name }),
+      /* @__PURE__ */ a("text", { className: "cf-label cf-label--strong", x: 640 - p.r + 18, y: t.pts[i - 1][1] + 4, children: t.name })
+    ] }, n))
+  ] }) }) });
+}
+const ua = (() => {
+  let $ = 182;
+  return Array.from({ length: 22 }, (y, r) => {
+    const d = Math.sin(r * 4.7) * 0.5 + Math.sin(r * 1.3) * 0.5, s = Math.abs(Math.sin(r * 9.1)), g = $, M = Math.round(($ + d * 6 + 0.6) * 100) / 100, _ = Math.round((Math.max(g, M) + s * 3 + 0.4) * 100) / 100, w = Math.round((Math.min(g, M) - (1 - s) * 3 - 0.4) * 100) / 100;
+    return $ = M, { label: `Oct ${r + 6}`, open: g, high: _, low: w, close: M };
+  });
+})();
+function Pa({
+  title: $ = "ACME / USD",
+  subtitle: y = "Daily candles",
+  candles: r = ua,
+  prefix: d = "$",
+  height: s = 300,
+  variant: g = "glass",
+  size: M = "md",
+  className: _ = ""
+}) {
+  const C = s, S = { t: 12, r: 52, b: 28, l: 12 }, x = q(Math.min(...r.map((e) => e.low)), Math.max(...r.map((e) => e.high)), 5), p = T(x[0], x[x.length - 1], C - S.b, S.t), i = (640 - S.l - S.r) / r.length, l = Math.max(3, i * 0.6), o = (e) => `${d}${e.toFixed(2)}`, h = r[r.length - 1], t = r[0], n = (h.close - t.open) / t.open * 100, c = Math.ceil(r.length / 6);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, value: o(h.close), delta: `${n >= 0 ? "+" : ""}${n.toFixed(2)}%`, deltaPositive: n >= 0, variant: g, size: M, className: _, legend: [{ label: "Up (hollow)", color: K }, { label: "Down (filled)", color: Z }], table: { headers: ["Date", "Open", "High", "Low", "Close"], rows: r.map((e) => [e.label, o(e.open), o(e.high), o(e.low), o(e.close)]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${C}`, role: "img", "aria-label": `${$}: candlestick chart, ${r.length} periods, ${n.toFixed(1)}% change`, children: [
+    x.map((e, u) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: S.l, x2: 640 - S.r, y1: p(e), y2: p(e) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: 640 - S.r + 8, y: p(e) + 4, children: o(e) })
+    ] }, u)),
+    r.map((e, u) => {
+      const f = S.l + u * i + i / 2, A = e.close >= e.open, N = A ? K : Z, W = p(Math.max(e.open, e.close)), b = Math.max(1.5, Math.abs(p(e.open) - p(e.close)));
+      return /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", "aria-label": `${e.label}: open ${o(e.open)}, high ${o(e.high)}, low ${o(e.low)}, close ${o(e.close)}`, "data-tip-title": e.label, "data-tip": `${N}::${A ? "Up" : "Down"} ${((e.close - e.open) / e.open * 100).toFixed(2)}%|O ${o(e.open)} · H ${o(e.high)}|L ${o(e.low)} · C ${o(e.close)}`, children: [
+        /* @__PURE__ */ a("rect", { x: f - i / 2, y: S.t, width: i, height: C - S.t - S.b, fill: "transparent" }),
+        /* @__PURE__ */ a("line", { x1: f, x2: f, y1: p(e.high), y2: p(e.low), stroke: N, strokeWidth: "1.5" }),
+        /* @__PURE__ */ a("rect", { x: f - l / 2, y: W, width: l, height: b, rx: "1.5", fill: A ? "var(--chart-surface, #0d0d0f)" : N, stroke: N, strokeWidth: "1.5" }),
+        u % c === 0 && /* @__PURE__ */ a("text", { className: "cf-label", x: f, y: C - 8, textAnchor: "middle", children: e.label })
+      ] }, u);
+    }),
+    /* @__PURE__ */ a("line", { x1: S.l, x2: 640 - S.r, y1: p(h.close), y2: p(h.close), stroke: "var(--c-text-1, #fff)", strokeOpacity: "0.3", strokeDasharray: "3 4", "aria-hidden": "true" })
+  ] }) }) });
+}
+function Ia({
+  title: $ = "Budget variance by team",
+  subtitle: y = "Actual minus plan, Q3",
+  items: r = [
+    { label: "Engineering", value: -42 },
+    { label: "Marketing", value: 28 },
+    { label: "Sales", value: 64 },
+    { label: "Support", value: -12 },
+    { label: "Design", value: 9 },
+    { label: "Ops", value: -31 }
+  ],
+  positiveLabel: d = "Under budget",
+  negativeLabel: s = "Over budget",
+  prefix: g = "$",
+  suffix: M = "k",
+  positiveColor: _ = "var(--chart-1, #3987e5)",
+  negativeColor: w = "var(--chart-2, #d95926)",
+  variant: C = "glass",
+  size: S = "md",
+  className: x = ""
+}) {
+  const l = { t: 8, r: 56, b: 26, l: 110 }, o = r.length * 34 + l.t + l.b, h = Math.max(...r.map((e) => Math.abs(e.value))), t = q(-h, h, 4), n = T(t[0], t[t.length - 1], l.l, 640 - l.r), c = (e) => `${e > 0 ? "+" : e < 0 ? "−" : ""}${E(Math.abs(e), g, M)}`;
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: C, size: S, className: x, legend: [{ label: d, color: _ }, { label: s, color: w }], table: { headers: ["Item", "Value"], rows: r.map((e) => [e.label, c(e.value)]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${o}`, role: "img", "aria-label": `${$}: diverging bar chart`, children: [
+    t.map((e, u) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: e === 0 ? "cf-axis" : "cf-grid", x1: n(e), x2: n(e), y1: l.t, y2: o - l.b }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: n(e), y: o - 8, textAnchor: "middle", children: e === 0 ? "0" : c(e) })
+    ] }, u)),
+    r.map((e, u) => {
+      const f = l.t + u * 34 + 17, A = e.value >= 0, N = n(0), W = n(e.value), b = A ? _ : w, m = Math.abs(W - N);
+      return /* @__PURE__ */ v("g", { children: [
+        /* @__PURE__ */ a("text", { className: "cf-label", x: l.l - 10, y: f + 4, textAnchor: "end", children: e.label }),
+        /* @__PURE__ */ a("rect", { className: "cf-mark cf-dim", x: Math.min(N, W), y: f - 9, width: Math.max(1, m), height: "18", rx: "4", fill: b, tabIndex: 0, role: "img", "aria-label": `${e.label}: ${c(e.value)}`, "data-tip-title": e.label, "data-tip": `${b}::${A ? d : s}: ${c(e.value)}` }),
+        /* @__PURE__ */ a("text", { className: "cf-label cf-label--strong", x: A ? W + 6 : W - 6, y: f + 4, textAnchor: A ? "start" : "end", children: c(e.value) })
+      ] }, u);
+    })
+  ] }) }) });
+}
+function Ba({
+  title: $ = "Time to first value",
+  subtitle: y = "Minutes, before vs after onboarding redesign",
+  items: r = [
+    { label: "Solo devs", a: 34, b: 12 },
+    { label: "Startups", a: 41, b: 18 },
+    { label: "Agencies", a: 52, b: 26 },
+    { label: "Mid-market", a: 63, b: 37 },
+    { label: "Enterprise", a: 88, b: 54 }
+  ],
+  aLabel: d = "Before",
+  bLabel: s = "After",
+  prefix: g = "",
+  suffix: M = "m",
+  colors: _,
+  variant: w = "glass",
+  size: C = "md",
+  className: S = ""
+}) {
+  const i = { t: 8, r: 24, b: 26, l: 110 }, l = r.length * 40 + i.t + i.b, o = q(0, Math.max(...r.flatMap((e) => [e.a, e.b])), 5), h = T(0, o[o.length - 1], i.l, 640 - i.r), t = H(0, _), n = H(1, _), c = (e) => E(e, g, M);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: w, size: C, className: S, legend: [{ label: d, color: t }, { label: s, color: n }], table: { headers: ["Item", d, s, "Difference"], rows: r.map((e) => [e.label, c(e.a), c(e.b), c(e.b - e.a)]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${l}`, role: "img", "aria-label": `${$}: dumbbell chart comparing ${d} and ${s}`, children: [
+    o.map((e, u) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: h(e), x2: h(e), y1: i.t, y2: l - i.b }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: h(e), y: l - 8, textAnchor: "middle", children: c(e) })
+    ] }, u)),
+    r.map((e, u) => {
+      const f = i.t + u * 40 + 20;
+      return /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", "aria-label": `${e.label}: ${d} ${c(e.a)}, ${s} ${c(e.b)}`, "data-tip-title": e.label, "data-tip": `${t}::${d}: ${c(e.a)}|${n}::${s}: ${c(e.b)}|Δ ${c(e.b - e.a)}`, children: [
+        /* @__PURE__ */ a("rect", { x: i.l, y: f - 40 / 2, width: 640 - i.l - i.r, height: 40, fill: "transparent" }),
+        /* @__PURE__ */ a("text", { className: "cf-label", x: i.l - 10, y: f + 4, textAnchor: "end", children: e.label }),
+        /* @__PURE__ */ a("line", { x1: h(e.a), x2: h(e.b), y1: f, y2: f, stroke: "rgb(var(--ink-rgb, 255 255 255) / 0.22)", strokeWidth: "4", strokeLinecap: "round" }),
+        /* @__PURE__ */ a("circle", { cx: h(e.a), cy: f, r: "7", fill: t, stroke: "var(--chart-surface, #0d0d0f)", strokeWidth: "2" }),
+        /* @__PURE__ */ a("circle", { cx: h(e.b), cy: f, r: "7", fill: n, stroke: "var(--chart-surface, #0d0d0f)", strokeWidth: "2" })
+      ] }, u);
+    })
+  ] }) }) });
+}
+function Ra({
+  title: $ = "Q4 bookings goal",
+  subtitle: y = "Cumulative vs. linear pace",
+  periods: r = ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9", "W10", "W11", "W12", "W13"],
+  values: d = [22, 31, 28, 40, 36, 44, 51, 39],
+  goal: s = 520,
+  prefix: g = "$",
+  suffix: M = "k",
+  height: _ = 270,
+  color: w = "var(--chart-1, #3987e5)",
+  variant: C = "glass",
+  size: S = "md",
+  className: x = ""
+}) {
+  const i = _, l = { t: 14, r: 16, b: 28, l: 48 }, o = r.length, h = [];
+  d.forEach((m, k) => h.push((h[k - 1] ?? 0) + m));
+  const t = h[h.length - 1] ?? 0, n = s / o * d.length, c = t >= n, e = q(0, Math.max(s, t), 4), u = T(0, e[e.length - 1], i - l.b, l.t), f = (m) => l.l + (m + 1) / o * (640 - l.l - l.r), A = l.l, N = [[A, u(0)], ...h.map((m, k) => [f(k), u(m)])], W = (m) => E(m, g, M), b = t / s * 100;
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, value: `${W(t)} / ${W(s)}`, delta: `${c ? "Ahead of" : "Behind"} pace by ${W(Math.abs(t - n))}`, deltaPositive: c, variant: C, size: S, className: x, legend: [{ label: "Achieved", color: w }, { label: "Linear pace", color: "var(--c-text-3, #8a8a8a)" }], table: { headers: ["Period", "Amount", "Cumulative", "Pace"], rows: r.map((m, k) => [m, d[k] !== void 0 ? W(d[k]) : "—", h[k] !== void 0 ? W(h[k]) : "—", W(s / o * (k + 1))]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${i}`, role: "img", "aria-label": `${$}: ${W(t)} of ${W(s)} (${b.toFixed(0)}%), ${c ? "ahead of" : "behind"} pace`, children: [
+    e.map((m, k) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: l.l, x2: 640 - l.r, y1: u(m), y2: u(m) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: l.l - 8, y: u(m) + 4, textAnchor: "end", children: W(m) })
+    ] }, k)),
+    r.map((m, k) => k % 2 === 0 && /* @__PURE__ */ a("text", { className: "cf-label", x: f(k), y: i - 8, textAnchor: "middle", children: m })),
+    /* @__PURE__ */ a("line", { x1: l.l, x2: 640 - l.r, y1: u(s), y2: u(s), stroke: "var(--chart-4, #c98500)", strokeWidth: "1.5", "aria-hidden": "true" }),
+    /* @__PURE__ */ v("text", { className: "cf-label cf-label--strong", x: 640 - l.r, y: u(s) - 6, textAnchor: "end", children: [
+      "Goal ",
+      W(s)
+    ] }),
+    /* @__PURE__ */ a("line", { x1: A, y1: u(0), x2: f(o - 1), y2: u(s), stroke: "var(--c-text-3, #8a8a8a)", strokeWidth: "1.5", strokeDasharray: "5 5", "aria-hidden": "true" }),
+    /* @__PURE__ */ a("path", { d: oa(N, u(0), "linear"), fill: w, fillOpacity: "0.15", "aria-hidden": "true" }),
+    /* @__PURE__ */ a("path", { d: la(N), fill: "none", stroke: w, strokeWidth: "2.5", strokeLinejoin: "round", "aria-hidden": "true" }),
+    h.map((m, k) => /* @__PURE__ */ a("circle", { className: "cf-mark", cx: f(k), cy: u(m), r: k === h.length - 1 ? 6 : 3.5, fill: w, stroke: "var(--chart-surface, #0d0d0f)", strokeWidth: "2", tabIndex: 0, role: "img", "aria-label": `${r[k]}: cumulative ${W(m)}`, "data-tip-title": r[k], "data-tip": `${w}::Cumulative: ${W(m)}|This period: ${W(d[k])}|Pace: ${W(s / o * (k + 1))}` }, k))
+  ] }) }) });
+}
+const fa = Array.from({ length: 240 }, ($, y) => {
+  const r = Math.sin(y * 12.9898) * 43758.5453, d = Math.sin(y * 78.233) * 12345.678, s = r - Math.floor(r), g = d - Math.floor(d);
+  return Math.round((0.6 + Math.abs(Math.sqrt(-2 * Math.log(s + 1e-9)) * Math.cos(2 * Math.PI * g)) * 0.9) * 100) / 100;
+});
+function Oa({
+  title: $ = "Page load time",
+  subtitle: y = "240 sessions, seconds",
+  values: r = fa,
+  bins: d = 14,
+  showStats: s = !0,
+  unit: g = "s",
+  height: M = 260,
+  color: _ = "var(--chart-1, #3987e5)",
+  variant: w = "glass",
+  size: C = "md",
+  className: S = ""
+}) {
+  const p = M, i = { t: 22, r: 12, b: 30, l: 40 }, l = [...r].sort((W, b) => W - b), o = l[0], h = l[l.length - 1], t = (h - o) / d || 1, n = Array.from({ length: d }, () => 0);
+  r.forEach((W) => {
+    n[Math.min(d - 1, Math.floor((W - o) / t))] += 1;
+  });
+  const c = q(0, Math.max(...n), 4), e = T(0, c[c.length - 1], p - i.b, i.t), u = T(o, h, i.l, 640 - i.r), f = G(r) / r.length, A = Y(l, 0.5), N = (W) => (o + W * t).toFixed(1);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, value: `${A.toFixed(2)}${g}`, delta: "median", variant: w, size: C, className: S, table: { headers: ["Bucket", "Count"], rows: n.map((W, b) => [`${N(b)}–${N(b + 1)}${g}`, W]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${p}`, role: "img", "aria-label": `${$}: histogram of ${r.length} values, median ${A.toFixed(2)}${g}`, children: [
+    c.map((W, b) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: W === 0 ? "cf-axis" : "cf-grid", x1: i.l, x2: 640 - i.r, y1: e(W), y2: e(W) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: i.l - 8, y: e(W) + 4, textAnchor: "end", children: W })
+    ] }, b)),
+    n.map((W, b) => {
+      const m = u(o + b * t) + 1, k = u(o + (b + 1) * t) - u(o + b * t) - 2;
+      return /* @__PURE__ */ a("rect", { className: "cf-mark cf-dim", x: m, y: e(W), width: Math.max(1, k), height: Math.max(0, e(0) - e(W)), rx: "2", fill: _, tabIndex: 0, role: "img", "aria-label": `${N(b)} to ${N(b + 1)}${g}: ${W} values`, "data-tip-title": `${N(b)}–${N(b + 1)}${g}`, "data-tip": `${_}::${W} values · ${(W / r.length * 100).toFixed(1)}%` }, b);
+    }),
+    Array.from({ length: d + 1 }, (W, b) => b).filter((W) => W % 2 === 0).map((W, b) => /* @__PURE__ */ a("text", { className: "cf-label", x: u(o + W * t), y: p - 10, textAnchor: "middle", children: N(W) }, b)),
+    s && /* @__PURE__ */ v("g", { "aria-hidden": "true", children: [
+      /* @__PURE__ */ a("line", { x1: u(A), x2: u(A), y1: i.t - 6, y2: p - i.b, stroke: "var(--c-text-1, #fff)", strokeWidth: "1.5" }),
+      /* @__PURE__ */ a("text", { className: "cf-label cf-label--strong", x: u(A) + 5, y: i.t, children: "Median" }),
+      /* @__PURE__ */ a("line", { x1: u(f), x2: u(f), y1: i.t + 10, y2: p - i.b, stroke: "var(--chart-2, #d95926)", strokeWidth: "1.5" }),
+      /* @__PURE__ */ v("text", { className: "cf-label", x: u(f) + 5, y: i.t + 16, children: [
+        "Mean ",
+        f.toFixed(2),
+        g
+      ] })
+    ] })
+  ] }) }) });
+}
+function Fa({
+  title: $ = "Overview",
+  metrics: y = [
+    { label: "Revenue", value: "$128.4k", change: 9.2, trend: [80, 84, 90, 88, 96, 102, 110, 118, 128] },
+    { label: "Active users", value: "24,812", change: 4.1, trend: [20, 21, 21.5, 22, 22.8, 23.1, 23.9, 24.2, 24.8] },
+    { label: "Churn", value: "2.3%", change: -0.6, invert: !0, trend: [3.1, 3, 2.9, 2.8, 2.7, 2.6, 2.5, 2.4, 2.3] },
+    { label: "Avg. response", value: "182ms", change: 7.8, invert: !0, trend: [150, 160, 158, 170, 165, 175, 172, 180, 182] }
+  ],
+  period: r = "vs previous 30 days",
+  variant: d = "glass",
+  size: s = "md",
+  className: g = ""
+}) {
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ v("section", { className: `kg ${g}`, "aria-label": $, "data-rk-1cf6fc": "", children: [
+    $ && /* @__PURE__ */ a("h2", { className: "kg__title", "data-rk-1cf6fc": "", children: $ }),
+    /* @__PURE__ */ a("div", { className: "kg__grid", "data-rk-1cf6fc": "", children: y.map((M, _) => /* @__PURE__ */ a(da, { label: M.label, value: M.value, change: M.change, trend: M.trend, invert: M.invert, period: r, variant: d, size: s }, _)) })
+  ] }) });
+}
+function Ha({
+  title: $ = "Lighthouse performance",
+  subtitle: y = "Score per page template",
+  items: r = [
+    { label: "Home", value: 98 },
+    { label: "Docs", value: 96 },
+    { label: "Blog", value: 91 },
+    { label: "Pricing", value: 88 },
+    { label: "Dashboard", value: 74 },
+    { label: "Checkout", value: 81 },
+    { label: "Search", value: 69 }
+  ],
+  target: d = 90,
+  targetLabel: s = "Goal",
+  prefix: g = "",
+  suffix: M = "",
+  height: _ = 270,
+  color: w = "var(--chart-1, #3987e5)",
+  variant: C = "glass",
+  size: S = "md",
+  className: x = ""
+}) {
+  const i = _, l = { t: 16, r: 12, b: 30, l: 40 }, o = q(0, Math.max(...r.map((c) => c.value), d ?? 0), 4), h = T(0, o[o.length - 1], i - l.b, l.t), t = (640 - l.l - l.r) / r.length, n = (c) => E(c, g, M);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: C, size: S, className: x, table: { headers: ["Item", "Value", s], rows: r.map((c) => [c.label, n(c.value), d !== void 0 ? c.value >= d ? "Met" : "Below" : "—"]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${i}`, role: "img", "aria-label": `${$}: lollipop chart`, children: [
+    o.map((c, e) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: c === 0 ? "cf-axis" : "cf-grid", x1: l.l, x2: 640 - l.r, y1: h(c), y2: h(c) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: l.l - 8, y: h(c) + 4, textAnchor: "end", children: n(c) })
+    ] }, e)),
+    d !== void 0 && /* @__PURE__ */ v("g", { "aria-hidden": "true", children: [
+      /* @__PURE__ */ a("line", { x1: l.l, x2: 640 - l.r, y1: h(d), y2: h(d), stroke: "var(--c-text-1, #fff)", strokeOpacity: "0.55", strokeWidth: "1", strokeDasharray: "4 4" }),
+      /* @__PURE__ */ v("text", { className: "cf-label", x: 640 - l.r, y: h(d) - 6, textAnchor: "end", children: [
+        s,
+        " ",
+        n(d)
+      ] })
+    ] }),
+    r.map((c, e) => {
+      const u = l.l + e * t + t / 2, f = d !== void 0 && d > c.value;
+      return /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", "aria-label": `${c.label}: ${n(c.value)}${f ? ", below goal" : ""}`, "data-tip-title": c.label, "data-tip": `${w}::${n(c.value)}${d !== void 0 ? `|${f ? "Below" : "Meets"} ${s.toLowerCase()}` : ""}`, children: [
+        /* @__PURE__ */ a("line", { x1: u, x2: u, y1: h(0), y2: h(c.value), stroke: w, strokeWidth: "2", strokeOpacity: f ? 0.5 : 1 }),
+        /* @__PURE__ */ a("circle", { cx: u, cy: h(c.value), r: "7", fill: f ? "var(--chart-surface, #0d0d0f)" : w, stroke: w, strokeWidth: "2.5" }),
+        /* @__PURE__ */ a("rect", { x: u - t / 2, y: l.t, width: t, height: i - l.t - l.b, fill: "transparent" }),
+        /* @__PURE__ */ a("text", { className: "cf-label", x: u, y: i - 10, textAnchor: "middle", children: c.label })
+      ] }, e);
+    })
+  ] }) }) });
+}
+function pa($) {
+  const y = {};
+  for (const r of String($ ?? "").split(";")) {
+    const d = r.indexOf(":");
+    if (d < 0) continue;
+    const s = r.slice(0, d).trim();
+    s && (y[s.startsWith("--") ? s : s.replace(/-([a-z])/g, (g, M) => M.toUpperCase())] = r.slice(d + 1).trim());
+  }
+  return y;
+}
+function Ta({
+  title: $ = "CPU load",
+  subtitle: y = "Cluster average, live",
+  value: r = 68,
+  min: d = 0,
+  max: s = 100,
+  zones: g = [
+    { to: 60, label: "Healthy", tone: "good" },
+    { to: 85, label: "Elevated", tone: "warn" },
+    { to: 100, label: "Critical", tone: "bad" }
+  ],
+  unit: M = "%",
+  variant: _ = "glass",
+  size: w = "md",
+  className: C = ""
+}) {
+  const S = { good: "var(--chart-pos, #34c38f)", warn: "var(--chart-4, #c98500)", bad: "var(--chart-neg, #f06a6a)" }, x = 280, p = 170, i = x / 2, l = 150, o = 112, h = Math.PI * 4 / 3, t = -h / 2, n = (W) => t + (Math.min(s, Math.max(d, W)) - d) / (s - d || 1) * h;
+  let c = d;
+  const e = g.map((W) => {
+    const b = J(i, l - 20, o, n(c) + 0.015, n(W.to) - 0.015);
+    return c = W.to, { ...W, d: b };
+  }), u = g.find((W) => r <= W.to) ?? g[g.length - 1], [f, A] = j(i, l - 20, o - 24, n(r)), N = [d, d + (s - d) / 2, s];
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: _, size: w, className: C, table: { headers: ["Zone", "Up to"], rows: g.map((W) => [W.label, `${W.to}${M}`]) }, children: /* @__PURE__ */ v("div", { className: "mg", role: "meter", "aria-valuemin": d, "aria-valuemax": s, "aria-valuenow": r, "aria-valuetext": `${r}${M}, ${u.label}`, "aria-label": $, "data-rk-fff4b2": "", children: [
+    /* @__PURE__ */ v("svg", { viewBox: `0 0 ${x} ${p}`, "aria-hidden": "true", "data-rk-fff4b2": "", children: [
+      e.map((W, b) => /* @__PURE__ */ a("path", { d: W.d, fill: "none", stroke: S[W.tone], strokeWidth: "14", strokeLinecap: "butt", opacity: W.label === u.label ? 1 : 0.3, "data-rk-fff4b2": "" }, b)),
+      N.map((W, b) => {
+        const [m, k] = j(i, l - 20, o + 18, n(W));
+        return /* @__PURE__ */ a("text", { className: "cf-label", x: m, y: k + 4, textAnchor: "middle", "data-rk-fff4b2": "", children: W }, b);
+      }),
+      /* @__PURE__ */ a("line", { className: "mg__needle", x1: i, y1: l - 20, x2: f, y2: A, stroke: "var(--c-text-1, #fff)", strokeWidth: "3", strokeLinecap: "round", "data-rk-fff4b2": "" }),
+      /* @__PURE__ */ a("circle", { cx: i, cy: l - 20, r: "7", fill: "var(--c-text-1, #fff)", "data-rk-fff4b2": "" }),
+      /* @__PURE__ */ a("circle", { cx: i, cy: l - 20, r: "3", fill: "var(--chart-surface, #0d0d0f)", "data-rk-fff4b2": "" })
+    ] }),
+    /* @__PURE__ */ v("div", { className: "mg__readout", "data-rk-fff4b2": "", children: [
+      /* @__PURE__ */ v("span", { className: "mg__value", "data-rk-fff4b2": "", children: [
+        r,
+        /* @__PURE__ */ a("small", { "data-rk-fff4b2": "", children: M })
+      ] }),
+      /* @__PURE__ */ v("span", { className: "mg__zone", style: pa(`--mg-c:${S[u.tone]}`), "data-rk-fff4b2": "", children: [
+        /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", "aria-hidden": "true", "data-rk-fff4b2": "", children: u.tone === "good" ? /* @__PURE__ */ a("path", { d: "M20 6 9 17l-5-5", "data-rk-fff4b2": "" }) : /* @__PURE__ */ v(I, { children: [
+          /* @__PURE__ */ a("circle", { cx: "12", cy: "12", r: "9", "data-rk-fff4b2": "" }),
+          /* @__PURE__ */ a("path", { d: "M12 8v4M12 16h.01", "data-rk-fff4b2": "" })
+        ] }) }),
+        u.label
+      ] })
+    ] })
+  ] }) }) });
+}
+function Da({
+  title: $ = "Orders by month",
+  subtitle: y = "Seasonality at a glance",
+  items: r = [
+    { label: "Jan", value: 320 },
+    { label: "Feb", value: 280 },
+    { label: "Mar", value: 360 },
+    { label: "Apr", value: 410 },
+    { label: "May", value: 470 },
+    { label: "Jun", value: 520 },
+    { label: "Jul", value: 490 },
+    { label: "Aug", value: 450 },
+    { label: "Sep", value: 430 },
+    { label: "Oct", value: 510 },
+    { label: "Nov", value: 690 },
+    { label: "Dec", value: 820 }
+  ],
+  color: d = "var(--chart-7, #9085e9)",
+  prefix: s = "",
+  suffix: g = "",
+  variant: M = "glass",
+  size: _ = "md",
+  className: w = ""
+}) {
+  const p = Math.max(...r.map((t) => t.value)) || 1, i = Math.min(r.length, 12), l = Math.PI * 2 / i, o = [0.25, 0.5, 0.75, 1], h = (t) => E(t, s, g);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: M, size: _, className: w, table: { headers: ["Item", "Value"], rows: r.map((t) => [t.label, h(t.value)]) }, children: /* @__PURE__ */ a("div", { className: "pa", "data-rk-5b5eb9": "", children: /* @__PURE__ */ v("svg", { viewBox: "0 0 320 320", role: "img", "aria-label": `${$}: polar area chart of ${i} categories`, "data-rk-5b5eb9": "", children: [
+    o.map((t, n) => /* @__PURE__ */ a("circle", { className: "cf-grid", cx: 160, cy: 160, r: 134 * Math.sqrt(t), fill: "none", "data-rk-5b5eb9": "" }, n)),
+    r.slice(0, i).map((t, n) => {
+      const c = 134 * Math.sqrt(t.value / p), e = n * l + 0.012, u = (n + 1) * l - 0.012, [f, A] = j(160, 160, 148, n * l + l / 2), N = t.value === p;
+      return /* @__PURE__ */ v("g", { "data-rk-5b5eb9": "", children: [
+        /* @__PURE__ */ a("path", { className: "cf-mark cf-dim", d: ra(160, 160, c, 0, e, u), fill: d, fillOpacity: 0.35 + 0.6 * (t.value / p), tabIndex: 0, role: "img", "aria-label": `${t.label}: ${h(t.value)}`, "data-tip-title": t.label, "data-tip": `${d}::${h(t.value)}`, "data-rk-5b5eb9": "" }),
+        /* @__PURE__ */ a("text", { className: N ? "cf-label cf-label--strong" : "cf-label", x: f, y: A + 4, textAnchor: "middle", "data-rk-5b5eb9": "", children: t.label })
+      ] }, n);
+    })
+  ] }) }) }) });
+}
+function na($) {
+  const y = {};
+  for (const r of String($ ?? "").split(";")) {
+    const d = r.indexOf(":");
+    if (d < 0) continue;
+    const s = r.slice(0, d).trim();
+    s && (y[s.startsWith("--") ? s : s.replace(/-([a-z])/g, (g, M) => M.toUpperCase())] = r.slice(d + 1).trim());
+  }
+  return y;
+}
+function qa({
+  title: $ = "Audience by age",
+  subtitle: y = "Share of users per age band",
+  bands: r = ["65+", "55–64", "45–54", "35–44", "25–34", "18–24"],
+  left: d = [2.1, 4.8, 8.2, 12.6, 15.4, 7.9],
+  right: s = [1.7, 4.1, 7.4, 11.8, 16.2, 8.8],
+  leftLabel: g = "Women",
+  rightLabel: M = "Men",
+  prefix: _ = "",
+  suffix: w = "%",
+  colors: C,
+  variant: S = "glass",
+  size: x = "md",
+  className: p = ""
+}) {
+  const i = Math.max(...d, ...s) || 1, l = H(0, C), o = H(1, C), h = (t) => E(t, _, w);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: S, size: x, className: p, legend: [{ label: g, color: l }, { label: M, color: o }], table: { headers: ["Band", g, M], rows: r.map((t, n) => [t, h(d[n]), h(s[n])]) }, children: /* @__PURE__ */ a("div", { className: "pp", role: "list", "data-rk-b22a54": "", children: r.map((t, n) => /* @__PURE__ */ v("div", { className: "pp__row", role: "listitem", "data-rk-b22a54": "", children: [
+    /* @__PURE__ */ v("div", { className: "pp__side pp__side--l", "data-rk-b22a54": "", children: [
+      /* @__PURE__ */ a("span", { className: "pp__val", "data-rk-b22a54": "", children: h(d[n]) }),
+      /* @__PURE__ */ a("span", { className: "pp__bar cf-mark", tabIndex: 0, style: na(`width:${d[n] / i * 100}%; background:${l}`), "aria-label": `${t}, ${g}: ${h(d[n])}`, "data-tip-title": `${t} · ${g}`, "data-tip": `${l}::${h(d[n])}`, "data-rk-b22a54": "" })
+    ] }),
+    /* @__PURE__ */ a("span", { className: "pp__band", "data-rk-b22a54": "", children: t }),
+    /* @__PURE__ */ v("div", { className: "pp__side pp__side--r", "data-rk-b22a54": "", children: [
+      /* @__PURE__ */ a("span", { className: "pp__bar cf-mark", tabIndex: 0, style: na(`width:${s[n] / i * 100}%; background:${o}`), "aria-label": `${t}, ${M}: ${h(s[n])}`, "data-tip-title": `${t} · ${M}`, "data-tip": `${o}::${h(s[n])}`, "data-rk-b22a54": "" }),
+      /* @__PURE__ */ a("span", { className: "pp__val", "data-rk-b22a54": "", children: h(s[n]) })
+    ] })
+  ] }, n)) }) }) });
+}
+const xa = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22], ga = [0.1, 0.05, 0.02, 0.1, 0.6, 0.95, 0.8, 1, 0.9, 0.55, 0.35, 0.2], $a = [0.9, 1, 1, 0.95, 0.75, 0.25, 0.2];
+function Ea({
+  title: $ = "Deploy activity",
+  subtitle: y = "Deploys by weekday and hour (UTC)",
+  days: r = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  hours: d = xa,
+  values: s = $a.map((S, x) => ga.map((p, i) => Math.round(S * p * 42 + (x * 7 + i * 3) % 5))),
+  unit: g = "deploys",
+  color: M = "var(--chart-3, #199e70)",
+  variant: _ = "glass",
+  size: w = "md",
+  className: C = ""
+}) {
+  const x = { t: 10, r: 10, b: 26, l: 46 }, p = d.length, i = (640 - x.l - x.r) / p, l = 34, o = x.t + r.length * l + x.b, h = Math.max(...s.flat()) || 1, t = Math.min(i, l) / 2 - 2, n = (e) => `${String(e).padStart(2, "0")}:00`, c = s.flat().reduce((e, u) => e + u, 0);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, value: c.toLocaleString("en-US"), delta: `total ${g}`, variant: _, size: w, className: C, table: { headers: ["Day", ...d.map(n)], rows: r.map((e, u) => [e, ...s[u]]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${o}`, role: "img", "aria-label": `${$}: punch card of ${g} by day and hour`, children: [
+    r.map((e, u) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: x.l, x2: 640 - x.r, y1: x.t + u * l + l / 2, y2: x.t + u * l + l / 2 }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: x.l - 10, y: x.t + u * l + l / 2 + 4, textAnchor: "end", children: e })
+    ] }, u)),
+    d.map((e, u) => /* @__PURE__ */ a("text", { className: "cf-label", x: x.l + u * i + i / 2, y: o - 8, textAnchor: "middle", children: n(e) }, u)),
+    r.map((e, u) => d.map((f, A) => {
+      var k;
+      const N = ((k = s[u]) == null ? void 0 : k[A]) ?? 0, W = N ? 2 + Math.sqrt(N / h) * (t - 2) : 0, b = x.l + A * i + i / 2, m = x.t + u * l + l / 2;
+      return /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", "aria-label": `${e} ${n(f)}: ${N} ${g}`, "data-tip-title": `${e} · ${n(f)}`, "data-tip": `${M}::${N} ${g}`, children: [
+        /* @__PURE__ */ a("rect", { x: b - i / 2, y: m - l / 2, width: i, height: l, fill: "transparent" }),
+        W > 0 && /* @__PURE__ */ a("circle", { cx: b, cy: m, r: W, fill: M, fillOpacity: 0.35 + N / h * 0.65 })
+      ] }, A);
+    }))
+  ] }) }) });
+}
+function Ua({
+  title: $ = "Framework comparison",
+  subtitle: y = "Scored 0–10 by the team",
+  axes: r = ["Performance", "DX", "Ecosystem", "SEO", "Learning curve", "Flexibility"],
+  series: d = [
+    { name: "React", data: [9.5, 8.5, 7, 9.5, 8.5, 8] },
+    { name: "Next", data: [7.5, 8, 9.5, 8, 6.5, 8.5] }
+  ],
+  max: s = 10,
+  colors: g,
+  variant: M = "glass",
+  size: _ = "md",
+  className: w = ""
+}) {
+  const p = r.length, i = (h) => h / p * Math.PI * 2, l = [0.25, 0.5, 0.75, 1], o = d.slice(0, 3).map((h, t) => {
+    const n = h.data.map((c, e) => j(170, 170, 116 * Math.max(0, Math.min(1, c / s)), i(e)));
+    return { ...h, pts: n, d: `${la(n)} Z`, color: H(t, g) };
+  });
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: M, size: _, className: w, legend: o.map((h) => ({ label: h.name, color: h.color })), table: { headers: ["Axis", ...d.map((h) => h.name)], rows: r.map((h, t) => [h, ...d.map((n) => n.data[t])]) }, children: /* @__PURE__ */ a("div", { className: "rd", "data-rk-b100db": "", children: /* @__PURE__ */ v("svg", { viewBox: "0 0 340 340", role: "img", "aria-label": `${$}: radar chart across ${p} axes`, "data-rk-b100db": "", children: [
+    l.map((h, t) => /* @__PURE__ */ a("path", { className: "cf-grid", fill: "none", d: `${la(r.map((n, c) => j(170, 170, 116 * h, i(c))))} Z`, "data-rk-b100db": "" }, t)),
+    r.map((h, t) => {
+      const [n, c] = j(170, 170, 116, i(t)), [e, u] = j(170, 170, 134, i(t)), f = 4 > Math.abs(e - 170) ? "middle" : e > 170 ? "start" : "end";
+      return /* @__PURE__ */ v("g", { "data-rk-b100db": "", children: [
+        /* @__PURE__ */ a("line", { className: "cf-grid", x1: 170, y1: 170, x2: n, y2: c, "data-rk-b100db": "" }),
+        /* @__PURE__ */ a("text", { className: "cf-label", x: e, y: u + 4, textAnchor: f, "data-rk-b100db": "", children: h })
+      ] }, t);
+    }),
+    o.map((h, t) => /* @__PURE__ */ a("path", { d: h.d, fill: h.color, fillOpacity: "0.18", stroke: h.color, strokeWidth: "2", strokeLinejoin: "round", "aria-hidden": "true", "data-rk-b100db": "" }, t)),
+    o.map((h) => h.pts.map(([t, n], c) => /* @__PURE__ */ a("circle", { className: "cf-mark", cx: t, cy: n, r: "4.5", fill: h.color, stroke: "var(--chart-surface, #0d0d0f)", strokeWidth: "2", tabIndex: 0, role: "img", "aria-label": `${h.name}, ${r[c]}: ${h.data[c]} of ${s}`, "data-tip-title": r[c], "data-tip": o.map((e) => `${e.color}::${e.name}: ${e.data[c]}`).join("|"), "data-rk-b100db": "" }, c)))
+  ] }) }) }) });
+}
+function va($) {
+  const y = {};
+  for (const r of String($ ?? "").split(";")) {
+    const d = r.indexOf(":");
+    if (d < 0) continue;
+    const s = r.slice(0, d).trim();
+    s && (y[s.startsWith("--") ? s : s.replace(/-([a-z])/g, (g, M) => M.toUpperCase())] = r.slice(d + 1).trim());
+  }
+  return y;
+}
+function Ga({
+  title: $ = "Feature adoption",
+  subtitle: y = "Share of active workspaces",
+  items: r = [
+    { label: "Dashboards", value: 86 },
+    { label: "Alerts", value: 64 },
+    { label: "API", value: 47 },
+    { label: "SSO", value: 29 }
+  ],
+  sweep: d = 270,
+  colors: s,
+  variant: g = "glass",
+  size: M = "md",
+  className: _ = ""
+}) {
+  const l = Math.min(360, Math.max(180, d)) * Math.PI / 180, o = -l / 2 - 0, h = r.slice(0, 8).map((t, n) => {
+    const c = 136 - n * 24, e = Math.max(0, Math.min(1, t.value / (t.max ?? 100)));
+    return { ...t, r: c, pct: e, color: H(n, s) };
+  });
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: g, size: M, className: _, table: { headers: ["Item", "Value"], rows: r.map((t) => [t.label, `${t.value}${t.max ? ` / ${t.max}` : "%"}`]) }, children: /* @__PURE__ */ v("div", { className: "rb", "data-rk-fa001b": "", children: [
+    /* @__PURE__ */ a("svg", { viewBox: "0 0 300 300", role: "img", "aria-label": `${$}: radial bar chart`, "data-rk-fa001b": "", children: h.map((t, n) => /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", "aria-label": `${t.label}: ${Math.round(t.pct * 100)}%`, "data-tip-title": t.label, "data-tip": `${t.color}::${t.value}${t.max ? ` / ${t.max}` : "%"}`, "data-rk-fa001b": "", children: [
+      /* @__PURE__ */ a("path", { d: J(150, 150, t.r, o, o + l), fill: "none", stroke: "rgb(var(--ink-rgb, 255 255 255) / 0.06)", strokeWidth: 16, strokeLinecap: "round", "data-rk-fa001b": "" }),
+      t.pct > 0 && /* @__PURE__ */ a("path", { className: "rb__arc", d: J(150, 150, t.r, o, o + l * t.pct), fill: "none", stroke: t.color, strokeWidth: 16, strokeLinecap: "round", "data-rk-fa001b": "" })
+    ] }, n)) }),
+    /* @__PURE__ */ a("ul", { className: "rb__labels", "aria-hidden": "true", "data-rk-fa001b": "", children: h.map((t, n) => /* @__PURE__ */ v("li", { "data-rk-fa001b": "", children: [
+      /* @__PURE__ */ a("span", { style: va(`background:${t.color}`), "data-rk-fa001b": "" }),
+      t.label,
+      /* @__PURE__ */ v("b", { "data-rk-fa001b": "", children: [
+        Math.round(t.pct * 100),
+        "%"
+      ] })
+    ] }, n)) })
+  ] }) }) });
+}
+function ja({
+  title: $ = "API latency",
+  subtitle: y = "p10–p90 band with median, last 10 days",
+  categories: r = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"],
+  min: d = [42, 45, 40, 48, 52, 38, 36, 44, 47, 41],
+  max: s = [120, 135, 118, 160, 172, 98, 90, 126, 140, 115],
+  avg: g = [74, 80, 70, 92, 101, 62, 58, 78, 86, 72],
+  bandLabel: M = "p10–p90",
+  lineLabel: _ = "Median",
+  prefix: w = "",
+  suffix: C = "ms",
+  height: S = 260,
+  color: x = "var(--chart-1, #3987e5)",
+  variant: p = "glass",
+  size: i = "md",
+  className: l = ""
+}) {
+  const h = S, t = { t: 12, r: 16, b: 28, l: 48 }, n = r.length, c = q(Math.min(...d), Math.max(...s), 4), e = T(c[0], c[c.length - 1], h - t.b, t.t), u = (m) => t.l + (n <= 1 ? 0 : m / (n - 1) * (640 - t.l - t.r)), f = n > 1 ? (640 - t.l - t.r) / (n - 1) : 640, A = s.map((m, k) => [u(k), e(m)]), N = d.map((m, k) => [u(k), e(m)]), W = g.map((m, k) => [u(k), e(m)]), b = (m) => E(m, w, C);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: p, size: i, className: l, legend: [{ label: M, color: `color-mix(in srgb, ${x} 35%, transparent)` }, { label: _, color: x }], table: {
+    headers: ["Period", "Min", _, "Max"],
+    rows: r.map((m, k) => [m, b(d[k]), b(g[k]), b(s[k])])
+  }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${h}`, role: "img", "aria-label": `${$}: range band chart`, children: [
+    c.map((m, k) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: t.l, x2: 640 - t.r, y1: e(m), y2: e(m) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: t.l - 8, y: e(m) + 4, textAnchor: "end", children: b(m) })
+    ] }, k)),
+    r.map((m, k) => /* @__PURE__ */ a("text", { className: "cf-label", x: u(k), y: h - 8, textAnchor: "middle", children: m }, k)),
+    /* @__PURE__ */ a("path", { d: ia(A, N), fill: x, fillOpacity: "0.18", "aria-hidden": "true" }),
+    /* @__PURE__ */ a("path", { d: ta(W), fill: "none", stroke: x, strokeWidth: "2", "aria-hidden": "true" }),
+    r.map((m, k) => /* @__PURE__ */ v("g", { className: "cf-hit-group", children: [
+      /* @__PURE__ */ a("line", { className: "cf-cross", x1: u(k), x2: u(k), y1: e(s[k]), y2: e(d[k]) }),
+      /* @__PURE__ */ a("circle", { className: "cf-cross", cx: u(k), cy: e(g[k]), r: "4.5", fill: x, stroke: "#fff", strokeWidth: "1.5" }),
+      /* @__PURE__ */ a("rect", { className: "cf-hit", x: u(k) - f / 2, y: t.t, width: f, height: h - t.t - t.b, tabIndex: 0, role: "img", "aria-label": `${m}: min ${b(d[k])}, ${_} ${b(g[k])}, max ${b(s[k])}`, "data-tip-title": m, "data-tip": `Max: ${b(s[k])}|${x}::${_}: ${b(g[k])}|Min: ${b(d[k])}` })
+    ] }, k))
+  ] }) }) });
+}
+function ka($) {
+  const y = {};
+  for (const r of String($ ?? "").split(";")) {
+    const d = r.indexOf(":");
+    if (d < 0) continue;
+    const s = r.slice(0, d).trim();
+    s && (y[s.startsWith("--") ? s : s.replace(/-([a-z])/g, (g, M) => M.toUpperCase())] = r.slice(d + 1).trim());
+  }
+  return y;
+}
+function za({
+  title: $ = "User retention",
+  subtitle: y = "Monthly cohorts, % still active",
+  cohorts: r = [
+    { cohort: "May", size: 1240, retention: [100, 62, 48, 41, 37, 35] },
+    { cohort: "Jun", size: 1410, retention: [100, 65, 51, 44, 40] },
+    { cohort: "Jul", size: 1580, retention: [100, 68, 55, 47] },
+    { cohort: "Aug", size: 1720, retention: [100, 71, 57] },
+    { cohort: "Sep", size: 1890, retention: [100, 73] },
+    { cohort: "Oct", size: 2050, retention: [100] }
+  ],
+  periodLabel: d = "M",
+  color: s = "var(--chart-3, #199e70)",
+  variant: g = "glass",
+  size: M = "md",
+  className: _ = ""
+}) {
+  const w = Math.max(...r.map((p) => p.retention.length)), C = Array.from({ length: w }, (p, i) => `${d}${i}`), S = (p) => `color-mix(in srgb, ${s} ${Math.round(10 + p / 100 * 85)}%, #141416)`, x = C.map((p, i) => {
+    const l = r.map((o) => o.retention[i]).filter((o) => o !== void 0);
+    return l.length ? l.reduce((o, h) => o + h, 0) / l.length : 0;
+  });
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: g, size: M, className: _, children: /* @__PURE__ */ a("div", { className: "rc", "data-rk-14b914": "", children: /* @__PURE__ */ v("table", { className: "rc__table", "data-rk-14b914": "", children: [
+    /* @__PURE__ */ v("caption", { className: "sr-only", "data-rk-14b914": "", children: [
+      $,
+      ": retention percentage by cohort and period"
+    ] }),
+    /* @__PURE__ */ a("thead", { "data-rk-14b914": "", children: /* @__PURE__ */ v("tr", { "data-rk-14b914": "", children: [
+      /* @__PURE__ */ a("th", { scope: "col", "data-rk-14b914": "", children: "Cohort" }),
+      /* @__PURE__ */ a("th", { scope: "col", "data-rk-14b914": "", children: "Users" }),
+      C.map((p, i) => /* @__PURE__ */ a("th", { scope: "col", "data-rk-14b914": "", children: p }, i))
+    ] }) }),
+    /* @__PURE__ */ a("tbody", { "data-rk-14b914": "", children: r.map((p, i) => /* @__PURE__ */ v("tr", { "data-rk-14b914": "", children: [
+      /* @__PURE__ */ a("th", { scope: "row", "data-rk-14b914": "", children: p.cohort }),
+      /* @__PURE__ */ a("td", { className: "rc__size", "data-rk-14b914": "", children: p.size.toLocaleString("en-US") }),
+      C.map((l, o) => {
+        const h = p.retention[o];
+        return h === void 0 ? /* @__PURE__ */ a("td", { className: "rc__empty", "aria-label": "no data yet", "data-rk-14b914": "" }) : /* @__PURE__ */ v("td", { className: "rc__cell", style: ka(`background:${S(h)}`), "data-strong": h > 55 ? "" : void 0, "data-rk-14b914": "", children: [
+          h,
+          "%"
+        ] });
+      })
+    ] }, i)) }),
+    /* @__PURE__ */ a("tfoot", { "data-rk-14b914": "", children: /* @__PURE__ */ v("tr", { "data-rk-14b914": "", children: [
+      /* @__PURE__ */ a("th", { scope: "row", "data-rk-14b914": "", children: "Average" }),
+      /* @__PURE__ */ a("td", { "data-rk-14b914": "" }),
+      x.map((p, i) => /* @__PURE__ */ v("td", { className: "rc__avg", "data-rk-14b914": "", children: [
+        p.toFixed(0),
+        "%"
+      ] }, i))
+    ] }) })
+  ] }) }) }) });
+}
+function Va({
+  title: $ = "Where signups come from",
+  subtitle: y = "Acquisition channel → plan chosen",
+  flows: r = [
+    { source: "Organic", target: "Free", value: 820 },
+    { source: "Organic", target: "Pro", value: 310 },
+    { source: "Organic", target: "Team", value: 90 },
+    { source: "Paid ads", target: "Free", value: 410 },
+    { source: "Paid ads", target: "Pro", value: 160 },
+    { source: "Referral", target: "Pro", value: 220 },
+    { source: "Referral", target: "Team", value: 140 },
+    { source: "Partners", target: "Team", value: 120 },
+    { source: "Partners", target: "Enterprise", value: 60 }
+  ],
+  prefix: d = "",
+  suffix: s = "",
+  height: g = 320,
+  colors: M,
+  variant: _ = "glass",
+  size: w = "md",
+  className: C = ""
+}) {
+  const x = g, p = 12, i = 14, l = 110, o = 530 - p, h = [...new Set(r.map((m) => m.source))], t = [...new Set(r.map((m) => m.target))], n = G(r.map((m) => m.value)) || 1, c = (m) => (x - i * (m - 1)) / n, e = Math.min(c(h.length), c(t.length)), u = (m, k) => {
+    const P = m.reduce((R, F) => R + G(r.filter((D) => D[k] === F).map((D) => D.value)) * e, 0) + i * (m.length - 1);
+    let B = (x - P) / 2;
+    return Object.fromEntries(m.map((R) => {
+      const F = G(r.filter((U) => U[k] === R).map((U) => U.value)), D = { y: B, h: F * e, v: F, offset: 0 };
+      return B += F * e + i, [R, D];
+    }));
+  }, f = u(h, "source"), A = u(t, "target"), N = Object.fromEntries(h.map((m, k) => [m, H(k, M)])), W = r.map((m) => {
+    const k = f[m.source], P = A[m.target], B = m.value * e, R = k.y + k.offset + B / 2, F = P.y + P.offset + B / 2;
+    k.offset += B, P.offset += B;
+    const D = l + p, U = o, z = (D + U) / 2;
+    return { ...m, h: B, d: `M${D},${R} C${z},${R} ${z},${F} ${U},${F}`, color: N[m.source] };
+  }), b = (m) => E(m, d, s);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: _, size: w, className: C, table: { headers: ["From", "To", "Value", "Share"], rows: r.map((m) => [m.source, m.target, b(m.value), `${(m.value / n * 100).toFixed(1)}%`]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${x}`, role: "img", "aria-label": `${$}: flow from ${h.length} sources to ${t.length} targets`, "data-rk-efc23b": "", children: [
+    W.map((m, k) => /* @__PURE__ */ a("path", { className: "cf-mark cf-dim sk__link", d: m.d, fill: "none", stroke: m.color, strokeOpacity: "0.38", strokeWidth: Math.max(1, m.h), tabIndex: 0, role: "img", "aria-label": `${m.source} to ${m.target}: ${b(m.value)}`, "data-tip-title": `${m.source} → ${m.target}`, "data-tip": `${m.color}::${b(m.value)} · ${(m.value / n * 100).toFixed(1)}%`, "data-rk-efc23b": "" }, k)),
+    h.map((m, k) => /* @__PURE__ */ v("g", { "data-rk-efc23b": "", children: [
+      /* @__PURE__ */ a("rect", { x: l, y: f[m].y, width: p, height: f[m].h, rx: "3", fill: N[m], "data-rk-efc23b": "" }),
+      /* @__PURE__ */ a("text", { className: "cf-label cf-label--strong", x: l - 8, y: f[m].y + f[m].h / 2, textAnchor: "end", "data-rk-efc23b": "", children: m }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: l - 8, y: f[m].y + f[m].h / 2 + 14, textAnchor: "end", "data-rk-efc23b": "", children: b(f[m].v) })
+    ] }, k)),
+    t.map((m, k) => /* @__PURE__ */ v("g", { "data-rk-efc23b": "", children: [
+      /* @__PURE__ */ a("rect", { x: o, y: A[m].y, width: p, height: A[m].h, rx: "3", fill: "var(--c-text-2, #a3a3a3)", "data-rk-efc23b": "" }),
+      /* @__PURE__ */ a("text", { className: "cf-label cf-label--strong", x: o + p + 8, y: A[m].y + A[m].h / 2, "data-rk-efc23b": "", children: m }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: o + p + 8, y: A[m].y + A[m].h / 2 + 14, "data-rk-efc23b": "", children: b(A[m].v) })
+    ] }, k))
+  ] }) }) });
+}
+const aa = ($, y, r, d, s) => Array.from({ length: y }, (g, M) => {
+  const _ = Math.sin((M + 1) * $) * 1e4, w = _ - Math.floor(_), C = 5 + M * 37 % 95;
+  return { x: C, y: Math.round(d + r * C + (w - 0.5) * s) };
+});
+function Qa({
+  title: $ = "Ad spend vs signups",
+  subtitle: y = "Per campaign",
+  groups: r = [
+    { name: "Search", points: aa(3.1, 16, 2.1, 20, 60) },
+    { name: "Social", points: aa(7.7, 14, 1.3, 10, 70) },
+    { name: "Video", points: aa(5.3, 10, 0.8, 30, 50) }
+  ],
+  xLabel: d = "Spend ($k)",
+  yLabel: s = "Signups",
+  trend: g = !0,
+  height: M = 300,
+  colors: _,
+  variant: w = "glass",
+  size: C = "md",
+  className: S = ""
+}) {
+  const p = M, i = { t: 12, r: 16, b: 40, l: 52 }, l = r.flatMap((b) => b.points), o = q(Math.min(0, ...l.map((b) => b.x)), Math.max(...l.map((b) => b.x)), 5), h = q(Math.min(0, ...l.map((b) => b.y)), Math.max(...l.map((b) => b.y)), 4), t = T(o[0], o[o.length - 1], i.l, 640 - i.r), n = T(h[0], h[h.length - 1], p - i.b, i.t), c = l.length, e = l.reduce((b, m) => b + m.x, 0) / c, u = l.reduce((b, m) => b + m.y, 0) / c, f = l.reduce((b, m) => b + (m.x - e) * (m.y - u), 0) / (l.reduce((b, m) => b + (m.x - e) ** 2, 0) || 1), A = u - f * e, N = (() => {
+    const b = l.reduce((k, P) => k + (P.y - u) ** 2, 0) || 1;
+    return 1 - l.reduce((k, P) => k + (P.y - (A + f * P.x)) ** 2, 0) / b;
+  })(), W = ["circle", "square", "diamond"];
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: w, size: C, className: S, legend: r.slice(0, 3).map((b, m) => ({ label: b.name, color: H(m, _) })), table: { headers: ["Group", d, s], rows: r.flatMap((b) => b.points.map((m) => [m.label ? `${b.name} · ${m.label}` : b.name, m.x, m.y])) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${p}`, role: "img", "aria-label": `${$}: scatter plot of ${c} points${g ? `, trend R² ${N.toFixed(2)}` : ""}`, children: [
+    h.map((b, m) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: i.l, x2: 640 - i.r, y1: n(b), y2: n(b) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: i.l - 8, y: n(b) + 4, textAnchor: "end", children: X(b) })
+    ] }, m)),
+    o.map((b, m) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: t(b), x2: t(b), y1: i.t, y2: p - i.b }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: t(b), y: p - i.b + 16, textAnchor: "middle", children: X(b) })
+    ] }, m)),
+    /* @__PURE__ */ a("text", { className: "cf-label", x: (i.l + 640 - i.r) / 2, y: p - 4, textAnchor: "middle", children: d }),
+    /* @__PURE__ */ a("text", { className: "cf-label", transform: `translate(12 ${(i.t + p - i.b) / 2}) rotate(-90)`, textAnchor: "middle", children: s }),
+    g && /* @__PURE__ */ v("g", { "aria-hidden": "true", children: [
+      /* @__PURE__ */ a("line", { x1: t(o[0]), y1: n(A + f * o[0]), x2: t(o[o.length - 1]), y2: n(A + f * o[o.length - 1]), stroke: "var(--c-text-1, #fff)", strokeOpacity: "0.45", strokeWidth: "1.5" }),
+      /* @__PURE__ */ v("text", { className: "cf-label", x: 640 - i.r, y: n(A + f * o[o.length - 1]) - 8, textAnchor: "end", children: [
+        "R² ",
+        N.toFixed(2)
+      ] })
+    ] }),
+    r.slice(0, 3).map((b, m) => {
+      const k = H(m, _);
+      return b.points.map((P) => {
+        const B = t(P.x), R = n(P.y), F = {
+          class: "cf-mark cf-dim",
+          fill: k,
+          "fill-opacity": 0.85,
+          stroke: "var(--chart-surface, #0d0d0f)",
+          "stroke-width": 1.5,
+          tabindex: 0,
+          role: "img",
+          "aria-label": `${b.name}${P.label ? ` ${P.label}` : ""}: ${d} ${P.x}, ${s} ${P.y}`,
+          "data-tip-title": P.label ?? b.name,
+          "data-tip": `${k}::${b.name}|${d}: ${P.x}|${s}: ${P.y}`
+        };
+        return W[m] === "square" ? /* @__PURE__ */ a("rect", { ...F, x: B - 5, y: R - 5, width: "10", height: "10", rx: "2" }) : W[m] === "diamond" ? /* @__PURE__ */ a("path", { ...F, d: `M${B},${R - 6.5} L${B + 6.5},${R} L${B},${R + 6.5} L${B - 6.5},${R} Z` }) : /* @__PURE__ */ a("circle", { ...F, cx: B, cy: R, r: "5.5" });
+      });
+    })
+  ] }) }) });
+}
+function Ja({
+  title: $ = "Conversion rate by plan",
+  subtitle: y = "Q1 vs Q2",
+  fromLabel: r = "Q1",
+  toLabel: d = "Q2",
+  items: s = [
+    { label: "Enterprise", from: 7.8, to: 9.6 },
+    { label: "Team", from: 6.1, to: 6.9 },
+    { label: "Pro", from: 5.4, to: 4.6 },
+    { label: "Starter", from: 3.2, to: 4.1 },
+    { label: "Free trial", from: 2.4, to: 1.9 }
+  ],
+  highlight: g,
+  prefix: M = "",
+  suffix: _ = "%",
+  height: w = 300,
+  variant: C = "glass",
+  size: S = "md",
+  className: x = ""
+}) {
+  const i = w, l = { t: 34, b: 20 }, o = 190, h = 450, t = s.flatMap((e) => [e.from, e.to]), n = T(Math.min(...t), Math.max(...t), i - l.b, l.t), c = (e) => E(e, M, _);
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: C, size: S, className: x, table: {
+    headers: ["Item", r, d, "Change"],
+    rows: s.map((e) => [e.label, c(e.from), c(e.to), `${e.to >= e.from ? "+" : ""}${(e.to - e.from).toFixed(1)}`])
+  }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${i}`, role: "img", "aria-label": `${$}: slope chart from ${r} to ${d}`, children: [
+    /* @__PURE__ */ a("line", { className: "cf-axis", x1: o, x2: o, y1: l.t - 8, y2: i - l.b + 8 }),
+    /* @__PURE__ */ a("line", { className: "cf-axis", x1: h, x2: h, y1: l.t - 8, y2: i - l.b + 8 }),
+    /* @__PURE__ */ a("text", { className: "cf-label cf-label--strong", x: o, y: 14, textAnchor: "middle", children: r }),
+    /* @__PURE__ */ a("text", { className: "cf-label cf-label--strong", x: h, y: 14, textAnchor: "middle", children: d }),
+    s.map((e, u) => {
+      const f = e.to >= e.from, A = f ? K : Z, N = g && g !== e.label;
+      return /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", opacity: N ? 0.35 : 1, "aria-label": `${e.label}: ${c(e.from)} to ${c(e.to)} (${f ? "up" : "down"})`, "data-tip-title": e.label, "data-tip": `${r}: ${c(e.from)}|${d}: ${c(e.to)}|${A}::${f ? "Up" : "Down"} ${Math.abs(e.to - e.from).toFixed(1)}`, children: [
+        /* @__PURE__ */ a("line", { x1: o, y1: n(e.from), x2: h, y2: n(e.to), stroke: A, strokeWidth: "2" }),
+        /* @__PURE__ */ a("line", { x1: o, y1: n(e.from), x2: h, y2: n(e.to), stroke: "transparent", strokeWidth: "14" }),
+        /* @__PURE__ */ a("circle", { cx: o, cy: n(e.from), r: "4.5", fill: A, stroke: "var(--chart-surface, #0d0d0f)", strokeWidth: "2" }),
+        /* @__PURE__ */ a("circle", { cx: h, cy: n(e.to), r: "4.5", fill: A, stroke: "var(--chart-surface, #0d0d0f)", strokeWidth: "2" }),
+        /* @__PURE__ */ v("text", { className: "cf-label", x: o - 12, y: n(e.from) + 4, textAnchor: "end", children: [
+          e.label,
+          " ",
+          /* @__PURE__ */ a("tspan", { className: "cf-label--strong", children: c(e.from) })
+        ] }),
+        /* @__PURE__ */ v("text", { className: "cf-label", x: h + 12, y: n(e.to) + 4, children: [
+          /* @__PURE__ */ a("tspan", { className: "cf-label--strong", children: c(e.to) }),
+          " ",
+          e.label
+        ] })
+      ] }, u);
+    })
+  ] }) }) });
+}
+function Ka({
+  title: $ = "Tickets by status",
+  subtitle: y = "Per sprint",
+  categories: r = ["S18", "S19", "S20", "S21", "S22", "S23"],
+  series: d = [
+    { name: "Done", data: [42, 48, 51, 46, 58, 63] },
+    { name: "In review", data: [12, 9, 14, 11, 10, 8] },
+    { name: "Blocked", data: [5, 7, 3, 6, 4, 2] }
+  ],
+  horizontal: s = !1,
+  normalized: g = !1,
+  prefix: M = "",
+  suffix: _ = "",
+  height: w = 280,
+  colors: C,
+  variant: S = "glass",
+  size: x = "md",
+  className: p = ""
+}) {
+  const l = s ? Math.max(w, r.length * 40 + 40) : w, o = s ? { t: 8, r: 16, b: 24, l: 72 } : { t: 12, r: 12, b: 28, l: 44 }, h = r.map((b, m) => d.reduce((k, P) => k + (P.data[m] ?? 0), 0)), t = g ? [0, 25, 50, 75, 100] : q(0, Math.max(...h), 4), n = t[t.length - 1], c = s ? T(0, n, o.l, 640 - o.r) : T(0, n, l - o.b, o.t), e = s ? (l - o.t - o.b) / r.length : (640 - o.l - o.r) / r.length, u = e * 0.6, f = 2, A = (b) => E(b, M, _), N = (b) => g ? `${b}%` : A(b), W = r.map((b, m) => {
+    let k = 0;
+    const P = d.slice(0, 8).map((B, R) => {
+      const F = B.data[m] ?? 0, D = g ? F / (h[m] || 1) * 100 : F, U = k;
+      return k += D, { name: B.name, raw: F, val: D, start: U, end: k, color: H(R, C) };
+    });
+    return { c: b, ci: m, segs: P };
+  });
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: S, size: x, className: p, legend: d.map((b, m) => ({ label: b.name, color: H(m, C) })), table: { headers: ["Category", ...d.map((b) => b.name), "Total"], rows: r.map((b, m) => [b, ...d.map((k) => A(k.data[m])), A(h[m])]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${l}`, role: "img", "aria-label": `${$}: ${g ? "100% " : ""}stacked bar chart`, children: [
+    t.map((b) => s ? /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: b === 0 ? "cf-axis" : "cf-grid", x1: c(b), x2: c(b), y1: o.t, y2: l - o.b }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: c(b), y: l - 6, textAnchor: "middle", children: N(b) })
+    ] }) : /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: b === 0 ? "cf-axis" : "cf-grid", x1: o.l, x2: 640 - o.r, y1: c(b), y2: c(b) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: o.l - 8, y: c(b) + 4, textAnchor: "end", children: N(b) })
+    ] })),
+    W.map(({ c: b, ci: m, segs: k }, P) => {
+      const B = (s ? o.t : o.l) + m * e + (e - u) / 2;
+      return /* @__PURE__ */ v("g", { children: [
+        s ? /* @__PURE__ */ a("text", { className: "cf-label", x: o.l - 8, y: B + u / 2 + 4, textAnchor: "end", children: b }) : /* @__PURE__ */ a("text", { className: "cf-label", x: B + u / 2, y: l - 8, textAnchor: "middle", children: b }),
+        k.map((R, F) => {
+          const D = c(R.start), U = c(R.end), z = F === k.length - 1, L = Math.abs(U - D) - (z ? 0 : f);
+          if (!(L > 0)) return null;
+          const sa = s ? { x: D, y: B, width: L, height: u } : { x: B, y: U + (z ? 0 : f), width: u, height: L };
+          return /* @__PURE__ */ a("rect", { className: "cf-mark cf-dim", ...sa, rx: z ? 3 : 0, fill: R.color, tabIndex: 0, role: "img", "aria-label": `${b}, ${R.name}: ${A(R.raw)}${g ? ` (${R.val.toFixed(0)}%)` : ""}`, "data-tip-title": b, "data-tip": `${R.color}::${R.name}: ${A(R.raw)}${g ? ` · ${R.val.toFixed(0)}%` : ""}` }, F);
+        })
+      ] }, P);
+    })
+  ] }) }) });
+}
+function Za({
+  title: $ = "Cloud spend breakdown",
+  subtitle: y = "Service → resource",
+  data: r = [
+    { label: "Compute", children: [{ label: "VMs", value: 4200 }, { label: "Functions", value: 1800 }, { label: "Containers", value: 2600 }] },
+    { label: "Storage", children: [{ label: "Object", value: 1900 }, { label: "Block", value: 1100 }] },
+    { label: "Network", children: [{ label: "CDN", value: 1400 }, { label: "Egress", value: 900 }] },
+    { label: "Data", children: [{ label: "Postgres", value: 1600 }, { label: "Redis", value: 500 }] }
+  ],
+  centerLabel: d = "Monthly spend",
+  prefix: s = "$",
+  suffix: g = "",
+  colors: M,
+  variant: _ = "glass",
+  size: w = "md",
+  className: C = ""
+}) {
+  const p = G(r.flatMap((n) => n.children.map((c) => c.value))) || 1, i = 0.01;
+  let l = 0;
+  const o = r.slice(0, 8).map((n, c) => {
+    const e = G(n.children.map((b) => b.value)), u = l, f = e / p * Math.PI * 2;
+    l += f;
+    const A = H(c, M);
+    let N = u;
+    const W = n.children.map((b, m) => {
+      const k = b.value / p * Math.PI * 2, P = N;
+      N += k;
+      const B = 100 - m * (40 / Math.max(1, n.children.length - 1));
+      return { ...b, d: ra(150, 150, 146, 104, P + i / 2, P + k - i / 2), color: `color-mix(in srgb, ${A} ${B}%, #0d0d0f)` };
+    });
+    return { label: n.label, value: e, color: A, d: ra(150, 150, 100, 62, u + i / 2, u + f - i / 2), kids: W };
+  }), h = (n) => E(n, s, g), t = (n) => `${(n / p * 100).toFixed(1)}%`;
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: _, size: w, className: C, legend: o.map((n) => ({ label: n.label, color: n.color })), table: { headers: ["Group", "Item", "Value", "Share"], rows: o.flatMap((n) => n.kids.map((c) => [n.label, c.label, h(c.value), t(c.value)])) }, children: /* @__PURE__ */ a("div", { className: "sbt", "data-rk-355acb": "", children: /* @__PURE__ */ v("svg", { viewBox: "0 0 300 300", role: "img", "aria-label": `${$}: sunburst chart, total ${h(p)}`, "data-rk-355acb": "", children: [
+    o.map((n, c) => /* @__PURE__ */ v("g", { "data-rk-355acb": "", children: [
+      /* @__PURE__ */ a("path", { className: "cf-mark cf-dim", d: n.d, fill: n.color, tabIndex: 0, role: "img", "aria-label": `${n.label}: ${h(n.value)} (${t(n.value)})`, "data-tip-title": n.label, "data-tip": `${n.color}::${h(n.value)} · ${t(n.value)}`, "data-rk-355acb": "" }),
+      n.kids.map((e, u) => /* @__PURE__ */ a("path", { className: "cf-mark cf-dim", d: e.d, fill: e.color, tabIndex: 0, role: "img", "aria-label": `${n.label} / ${e.label}: ${h(e.value)}`, "data-tip-title": `${n.label} › ${e.label}`, "data-tip": `${e.color}::${h(e.value)} · ${t(e.value)}`, "data-rk-355acb": "" }, u))
+    ] }, c)),
+    /* @__PURE__ */ a("text", { x: 150, y: 152, textAnchor: "middle", className: "sbt__total", "data-rk-355acb": "", children: h(p) }),
+    /* @__PURE__ */ a("text", { x: 150, y: 170, textAnchor: "middle", className: "cf-label", "data-rk-355acb": "", children: d })
+  ] }) }) }) });
+}
+function Ya({
+  title: $ = "Bundle size by module",
+  subtitle: y = "Gzipped KB",
+  items: r = [
+    { label: "react-dom", value: 42, group: 0 },
+    { label: "react runtime", value: 18, group: 1 },
+    { label: "charts", value: 24, group: 2 },
+    { label: "date-fns", value: 12, group: 0 },
+    { label: "router", value: 9, group: 1 },
+    { label: "icons", value: 15, group: 2 },
+    { label: "i18n", value: 7, group: 1 },
+    { label: "utils", value: 5, group: 2 },
+    { label: "zod", value: 11, group: 0 },
+    { label: "analytics", value: 6, group: 0 }
+  ],
+  groups: d = ["Vendor", "Framework", "App"],
+  prefix: s = "",
+  suffix: g = " KB",
+  height: M = 320,
+  colors: _,
+  variant: w = "glass",
+  size: C = "md",
+  className: S = ""
+}) {
+  const p = M, i = ha(r.map((t) => t.value), { x: 0, y: 0, w: 640, h: p }), l = G(r.map((t) => t.value)) || 1, o = (t) => E(t, s, g, !1), h = 2;
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: w, size: C, className: S, legend: d.map((t, n) => ({ label: t, color: H(n, _) })), table: { headers: ["Item", "Group", "Value", "Share"], rows: r.map((t) => [t.label, d[t.group ?? 0] ?? "—", o(t.value), `${(t.value / l * 100).toFixed(1)}%`]) }, children: /* @__PURE__ */ a("svg", { viewBox: `0 0 640 ${p}`, role: "img", "aria-label": `${$}: treemap of ${r.length} items`, children: r.map((t, n) => {
+    const c = i[n], e = H(t.group ?? 0, _), u = Math.max(0, c.w - h), f = Math.max(0, c.h - h), A = u > 64 && f > 34;
+    return /* @__PURE__ */ v("g", { className: "cf-mark cf-dim", tabIndex: 0, role: "img", "aria-label": `${t.label}: ${o(t.value)}`, "data-tip-title": t.label, "data-tip": `${e}::${o(t.value)} · ${(t.value / l * 100).toFixed(1)}%`, children: [
+      /* @__PURE__ */ a("rect", { x: c.x + h / 2, y: c.y + h / 2, width: u, height: f, rx: "6", fill: e, fillOpacity: "0.85" }),
+      A && /* @__PURE__ */ v(I, { children: [
+        /* @__PURE__ */ a("text", { x: c.x + 10, y: c.y + 20, fill: "#fff", fontSize: "12", fontWeight: "650", children: t.label }),
+        /* @__PURE__ */ a("text", { x: c.x + 10, y: c.y + 36, fill: "rgb(var(--ink-rgb, 255 255 255) / 0.8)", fontSize: "11", children: o(t.value) })
+      ] })
+    ] }, n);
+  }) }) }) });
+}
+function ea($) {
+  const y = {};
+  for (const r of String($ ?? "").split(";")) {
+    const d = r.indexOf(":");
+    if (d < 0) continue;
+    const s = r.slice(0, d).trim();
+    s && (y[s.startsWith("--") ? s : s.replace(/-([a-z])/g, (g, M) => M.toUpperCase())] = r.slice(d + 1).trim());
+  }
+  return y;
+}
+function Xa({
+  title: $ = "Device share",
+  subtitle: y = "Each square = 1% of sessions",
+  parts: r = [
+    { label: "Desktop", value: 54 },
+    { label: "Mobile", value: 38 },
+    { label: "Tablet", value: 8 }
+  ],
+  columns: d = 10,
+  colors: s,
+  variant: g = "glass",
+  size: M = "md",
+  className: _ = ""
+}) {
+  const w = G(r.map((l) => l.value)) || 1, C = r.map((l) => l.value / w * 100), S = C.map(Math.floor);
+  let x = 100 - G(S);
+  C.map((l, o) => ({ i: o, r: l - Math.floor(l) })).sort((l, o) => o.r - l.r).forEach(({ i: l }) => {
+    x > 0 && (S[l] += 1, x -= 1);
+  });
+  const p = S.flatMap((l, o) => Array.from({ length: l }, () => o)), i = r.slice(0, 8).map((l, o) => ({ ...l, pct: S[o], color: H(o, s) }));
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: g, size: M, className: _, table: { headers: ["Part", "Share"], rows: i.map((l) => [l.label, `${l.pct}%`]) }, children: /* @__PURE__ */ v("div", { className: "wf", "data-rk-87979e": "", children: [
+    /* @__PURE__ */ a("div", { className: "wf__grid", style: ea(`--wf-cols:${d}`), role: "img", "aria-label": `${$}: ${i.map((l) => `${l.label} ${l.pct}%`).join(", ")}`, "data-rk-87979e": "", children: p.map((l, o) => {
+      var h, t, n, c;
+      return /* @__PURE__ */ a("span", { className: "wf__cell", style: ea(`background:${(h = i[l]) == null ? void 0 : h.color}; --wf-i:${o}`), "data-tip-title": (t = i[l]) == null ? void 0 : t.label, "data-tip": `${(n = i[l]) == null ? void 0 : n.color}::${(c = i[l]) == null ? void 0 : c.pct}%`, "data-rk-87979e": "" }, o);
+    }) }),
+    /* @__PURE__ */ a("ul", { className: "wf__legend", "data-rk-87979e": "", children: i.map((l, o) => /* @__PURE__ */ v("li", { "data-rk-87979e": "", children: [
+      /* @__PURE__ */ v("span", { className: "wf__big", "data-rk-87979e": "", children: [
+        l.pct,
+        /* @__PURE__ */ a("small", { "data-rk-87979e": "", children: "%" })
+      ] }),
+      /* @__PURE__ */ v("span", { className: "wf__name", "data-rk-87979e": "", children: [
+        /* @__PURE__ */ a("i", { style: ea(`background:${l.color}`), "aria-hidden": "true", "data-rk-87979e": "" }),
+        l.label
+      ] })
+    ] }, o)) })
+  ] }) }) });
+}
+function La({
+  title: $ = "ARR bridge",
+  subtitle: y = "From January to June",
+  startLabel: r = "Jan ARR",
+  start: d = 12e5,
+  steps: s = [
+    { label: "New", value: 38e4 },
+    { label: "Expansion", value: 21e4 },
+    { label: "Contraction", value: -9e4 },
+    { label: "Churn", value: -16e4 },
+    { label: "Reactivation", value: 45e3 }
+  ],
+  endLabel: g = "Jun ARR",
+  prefix: M = "$",
+  suffix: _ = "",
+  height: w = 290,
+  variant: C = "glass",
+  size: S = "md",
+  className: x = ""
+}) {
+  const i = w, l = { t: 22, r: 12, b: 30, l: 52 };
+  let o = d;
+  const h = [
+    { label: r, from: 0, to: d, kind: "total", value: d },
+    ...s.map((N) => {
+      const W = o;
+      return o += N.value, { label: N.label, from: W, to: o, kind: N.value >= 0 ? "up" : "down", value: N.value };
+    }),
+    { label: g, from: 0, to: o, kind: "total", value: o }
+  ], t = q(0, Math.max(...h.map((N) => Math.max(N.from, N.to))), 4), n = T(0, t[t.length - 1], i - l.b, l.t), c = (640 - l.l - l.r) / h.length, e = c * 0.62, u = (N) => N === "up" ? K : N === "down" ? Z : "var(--chart-1, #3987e5)", f = (N) => E(N, M, _), A = (N) => `${N >= 0 ? "+" : "−"}${E(Math.abs(N), M, _)}`;
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(O, { title: $, subtitle: y, variant: C, size: S, className: x, legend: [
+    { label: "Total", color: "var(--chart-1, #3987e5)" },
+    { label: "Increase", color: K },
+    { label: "Decrease", color: Z }
+  ], table: { headers: ["Step", "Change", "Running total"], rows: h.map((N) => [N.label, N.kind === "total" ? "—" : A(N.value), f(N.to)]) }, children: /* @__PURE__ */ v("svg", { viewBox: `0 0 640 ${i}`, role: "img", "aria-label": `${$}: waterfall chart from ${f(d)} to ${f(o)}`, children: [
+    t.map((N, W) => /* @__PURE__ */ v("g", { children: [
+      /* @__PURE__ */ a("line", { className: N === 0 ? "cf-axis" : "cf-grid", x1: l.l, x2: 640 - l.r, y1: n(N), y2: n(N) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: l.l - 8, y: n(N) + 4, textAnchor: "end", children: f(N) })
+    ] }, W)),
+    h.map((N, W) => {
+      const b = l.l + W * c + (c - e) / 2, m = n(Math.max(N.from, N.to)), k = Math.max(1, Math.abs(n(N.from) - n(N.to))), P = u(N.kind), B = h[W + 1];
+      return /* @__PURE__ */ v("g", { children: [
+        B && /* @__PURE__ */ a("line", { className: "cf-axis", x1: b + e, x2: b + c, y1: n(N.to), y2: n(N.to), opacity: "0.7" }),
+        /* @__PURE__ */ a("rect", { className: "cf-mark cf-dim", x: b, y: m, width: e, height: k, rx: "3", fill: P, tabIndex: 0, role: "img", "aria-label": `${N.label}: ${N.kind === "total" ? f(N.value) : A(N.value)}, total ${f(N.to)}`, "data-tip-title": N.label, "data-tip": N.kind === "total" ? `${P}::Total: ${f(N.value)}` : `${P}::Change: ${A(N.value)}|Running: ${f(N.to)}` }),
+        /* @__PURE__ */ a("text", { className: "cf-label cf-label--strong", x: b + e / 2, y: m - 6, textAnchor: "middle", children: N.kind === "total" ? f(N.value) : A(N.value) }),
+        /* @__PURE__ */ a("text", { className: "cf-label", x: b + e / 2, y: i - 10, textAnchor: "middle", children: N.label })
+      ] }, W);
+    })
+  ] }) }) });
+}
+export {
+  Wa as A,
+  _a as B,
+  Pa as C,
+  Ia as D,
+  Ra as G,
+  Oa as H,
+  Fa as K,
+  wa as L,
+  Ta as M,
+  Da as P,
+  Ua as R,
+  Va as S,
+  Ya as T,
+  Xa as W,
+  Sa as a,
+  Aa as b,
+  Ca as c,
+  Ba as d,
+  Ha as e,
+  qa as f,
+  Ea as g,
+  Na as h,
+  Ga as i,
+  ja as j,
+  za as k,
+  Qa as l,
+  Ja as m,
+  Ka as n,
+  Za as o,
+  La as p
+};