@cloudflare/kumo 2.0.4 → 2.1.0

package/dist/chunks/Legend-ibjxhfm9pn2vrb6f.js

@@ -1,430 +0,0 @@
-"use client";
-import { jsx as f, jsxs as S } from "react/jsx-runtime";
-import { forwardRef as Z, useRef as A, useEffect as B, useMemo as z } from "react";
-import { c as v } from "./cn-ct4n7r74mh8y0f48.js";
-var X = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#B9D6FF", e.Disabled = "#CBCBCB", e.Skeleton = "#DDDDDD", e))(X || {}), K = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#8EC5FF", e.Disabled = "#878787", e.Skeleton = "#5C5C5C", e))(K || {});
-const ee = {
-  blues: ["#E1EAF4", "#8EBCF6", "#4290F0", "#0E58B4", "#03254F"]
-}, te = {
-  blues: ["#03254F", "#0E58B4", "#4290F0", "#A6BFDD", "#E1EAF4"]
-}, C = [
-  "#4290F0",
-  "#F5B647",
-  "#E8649D",
-  "#8D58EE",
-  "#50C3B6",
-  "#D37536"
-  /* Orange */
-], G = [
-  "#4290F0",
-  "#EEB720",
-  "#E8649D",
-  "#8D58EE",
-  "#50C3B6",
-  "#D37536"
-  /* Orange */
-];
-var P;
-((e) => {
-  function n(t, s = !1) {
-    return s ? K[t] : X[t];
-  }
-  e.semantic = n;
-  function a(t, s = !1) {
-    return s ? G[t % G.length] : C[t % C.length];
-  }
-  e.categorical = a;
-  function r(t, s = !1) {
-    return s ? [...te[t]] : [...ee[t]];
-  }
-  e.sequential = r;
-})(P || (P = {}));
-const q = (e) => {
-  const { dangerousHtmlFormatter: n, ...a } = e;
-  return {
-    ...a,
-    formatter: n
-  };
-}, ne = (e) => e.tooltip ? {
-  ...e,
-  tooltip: Array.isArray(e.tooltip) ? e.tooltip.map(q) : q(e.tooltip)
-} : e, V = Z(function({
-  echarts: n,
-  options: a,
-  optionUpdateBehavior: r,
-  className: t,
-  isDarkMode: s,
-  height: h = 350,
-  onEvents: p
-}, i) {
-  const u = A(null), b = A(null), y = A({}), w = A({}), x = A(/* @__PURE__ */ new Set());
-  return B(() => {
-    if (!u.current) return;
-    const c = n.init(
-      u.current,
-      s ? "dark" : {
-        color: s ? G : C
-      }
-    );
-    return b.current = c, typeof i == "function" ? i(c) : i && (i.current = c), () => {
-      for (const d of x.current) {
-        const o = w.current[d];
-        o && c.off(d, o);
-      }
-      x.current.clear(), typeof i == "function" ? i(null) : i && (i.current = null), b.current = null, c.dispose();
-    };
-  }, [u, s]), B(() => {
-    const c = b.current;
-    c && c.setOption(ne(a), {
-      notMerge: !1,
-      lazyUpdate: !0,
-      ...r
-    });
-  }, [s, r, a]), B(() => {
-    y.current = p ?? {};
-  }, [p]), B(() => {
-    const c = b.current;
-    if (!c) return;
-    const d = /* @__PURE__ */ new Set();
-    for (const [o, m] of Object.entries(p ?? {}))
-      typeof m == "function" && (d.add(o), w.current[o] || (w.current[o] = (N) => {
-        y.current[o]?.(N);
-      }), x.current.has(o) || c.on(o, w.current[o]));
-    for (const o of x.current) {
-      if (d.has(o)) continue;
-      const m = w.current[o];
-      m && c.off(o, m);
-    }
-    x.current = d;
-  }, [n, s, p]), B(() => {
-    const c = b.current, d = u.current;
-    if (!c || !d) return;
-    let o = !0;
-    const m = new ResizeObserver(() => {
-      if (o) {
-        o = !1;
-        return;
-      }
-      c.resize();
-    });
-    return m.observe(d), () => m.disconnect();
-  }, []), /* @__PURE__ */ f(
-    "div",
-    {
-      ref: u,
-      className: v("w-full", t),
-      style: { height: h },
-      tabIndex: a.aria?.enabled ? 0 : void 0,
-      role: a.aria?.enabled ? "img" : void 0
-    }
-  );
-});
-V.displayName = "Chart";
-function ue({
-  echarts: e,
-  type: n = "line",
-  data: a,
-  xAxisName: r,
-  xAxisTickCount: t,
-  xAxisTickFormat: s,
-  yAxisTickFormat: h,
-  yAxisTickLabelFormat: p,
-  yAxisName: i,
-  yAxisTickCount: u,
-  tooltipValueFormat: b,
-  onTimeRangeChange: y,
-  height: w = 350,
-  incomplete: x,
-  isDarkMode: c,
-  gradient: d,
-  loading: o,
-  ariaDescription: m
-}) {
-  const N = A(null), H = x?.before, T = x?.after, Y = z(() => {
-    const g = [], I = n === "bar" ? { type: "bar", stack: "total" } : { type: "line", showSymbol: !1 };
-    for (const l of a) {
-      const F = H && n === "line" ? l.data.filter((O) => O[0] <= H) : [], $ = T && n === "line" ? l.data.filter((O) => O[0] >= T) : [], D = F.length > 0 || $.length > 0 ? l.data.slice(
-        Math.max(0, F.length - 1),
-        Math.max(0, l.data.length - $.length + 1)
-      ) : l.data, L = d && n === "line" ? {
-        color: new e.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: _(l.color, 0.4) },
-          { offset: 1, color: _(l.color, 0) }
-        ])
-      } : void 0;
-      g.push({
-        data: D,
-        color: l.color,
-        name: l.name,
-        emphasis: { focus: "series" },
-        ...L ? { areaStyle: L } : {},
-        ...I
-      });
-      const M = {
-        color: l.color,
-        name: l.name,
-        type: "line",
-        lineStyle: { type: "dashed" },
-        showSymbol: !1,
-        emphasis: { focus: "series" }
-      };
-      F.length > 0 && g.push({
-        ...M,
-        data: F
-      }), $.length > 0 && g.push({
-        ...M,
-        data: $
-      });
-    }
-    return {
-      aria: {
-        enabled: !0,
-        ...m && { label: { description: m } }
-      },
-      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: (l) => {
-          const F = Array.isArray(l) ? l : [l], $ = /* @__PURE__ */ new Set(), D = F.filter((E) => $.has(E.seriesName) ? !1 : ($.add(E.seriesName), !0)), L = D[0], M = L?.value?.[0] ?? L?.axisValue, O = M != null ? `<div style="font-weight:600;margin-bottom:4px;">${e.format.encodeHTML(se(M))}</div>` : "", Q = D.map((E) => {
-            const j = E?.value?.[1], k = b ?? p, U = k ? e.format.encodeHTML(String(k(j))) : e.format.encodeHTML(String(j));
-            return `${E.marker} ${e.format.encodeHTML(E.seriesName)}: <strong>${U}</strong>`;
-          }).join("<br/>");
-          return `${O}${Q}`;
-        }
-      },
-      backgroundColor: "transparent",
-      toolbox: { show: !1 },
-      xAxis: {
-        name: r,
-        nameLocation: "middle",
-        nameGap: 30,
-        type: "time",
-        splitLine: {
-          show: !1
-        },
-        axisLine: { show: !1 },
-        splitNumber: t ?? 5,
-        ...s && {
-          axisLabel: {
-            formatter: (l) => s(l)
-          }
-        }
-      },
-      yAxis: {
-        name: i,
-        nameLocation: "middle",
-        nameGap: 40,
-        type: "value",
-        axisTick: { show: !0 },
-        axisLabel: {
-          margin: 15,
-          ...h && {
-            formatter: (l) => h(l)
-          }
-        },
-        splitLine: {
-          show: !0,
-          lineStyle: { type: "dashed", width: 1 }
-        },
-        splitNumber: u
-      },
-      grid: {
-        left: i ? 30 : 24,
-        right: 24,
-        top: 24,
-        bottom: r ? 30 : 24
-      },
-      series: g
-    };
-  }, [
-    a,
-    r,
-    t,
-    s,
-    h,
-    p,
-    i,
-    u,
-    b,
-    H,
-    T,
-    n,
-    d,
-    e,
-    m
-  ]), J = z(() => y ? {
-    brushend: (g) => {
-      const I = g.areas[0].coordRange;
-      y(I[0], I[1]), N.current?.dispatchAction({ type: "brush", areas: [] });
-    }
-  } : {}, [y]), W = !!y;
-  return B(() => {
-    const g = N.current;
-    if (g && W)
-      return g.dispatchAction({
-        type: "takeGlobalCursor",
-        key: "brush",
-        brushOption: {
-          brushType: "lineX",
-          brushMode: "single"
-        }
-      }), () => {
-        g.dispatchAction({
-          type: "takeGlobalCursor",
-          key: "brush",
-          brushOption: {
-            brushType: !1
-          }
-        });
-      };
-  }, [N, W, o]), /* @__PURE__ */ S("div", { className: "relative w-full", style: { height: w }, children: [
-    o && /* @__PURE__ */ f(re, { height: w, isDarkMode: c }),
-    !o && /* @__PURE__ */ f(
-      V,
-      {
-        echarts: e,
-        ref: N,
-        options: Y,
-        height: w,
-        isDarkMode: c,
-        onEvents: J
-      }
-    )
-  ] });
-}
-function re({
-  height: e,
-  isDarkMode: n
-}) {
-  const a = e / 2, r = Math.min(e * 0.12, 28), t = 400, s = 120, h = [];
-  for (let u = 0; u <= s; u++) {
-    const b = -t + u / s * t * 3, y = a + Math.sin(u / s * 2 * Math.PI * 3) * r;
-    h.push(`${u === 0 ? "M" : "L"}${b.toFixed(2)},${y.toFixed(2)}`);
-  }
-  const p = h.join(" "), i = n ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      "aria-hidden": "true",
-      className: "absolute inset-0 overflow-hidden",
-      style: { height: e },
-      children: /* @__PURE__ */ f(
-        "svg",
-        {
-          width: "100%",
-          height: e,
-          viewBox: `0 0 ${t} ${e}`,
-          preserveAspectRatio: "none",
-          className: "w-full animate-pulse",
-          children: /* @__PURE__ */ f(
-            "path",
-            {
-              d: p,
-              fill: "none",
-              stroke: i,
-              strokeWidth: "2",
-              style: {
-                animation: "kumo-chart-wave 2.4s linear infinite",
-                transformOrigin: "0 0"
-              }
-            }
-          )
-        }
-      )
-    }
-  );
-}
-function _(e, n) {
-  const a = Math.max(0, Math.min(1, n)), r = e.match(
-    /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
-  );
-  if (r)
-    return `rgba(${r[1]}, ${r[2]}, ${r[3]}, ${a})`;
-  let t = e.replace(/^#/, "");
-  t.length === 3 && (t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2]), t.length === 8 && (t = t.slice(0, 6));
-  const s = parseInt(t.slice(0, 2), 16), h = parseInt(t.slice(2, 4), 16), p = parseInt(t.slice(4, 6), 16);
-  return `rgba(${s}, ${h}, ${p}, ${a})`;
-}
-function R(e) {
-  return e.toString().padStart(2, "0");
-}
-function se(e) {
-  const n = new Date(e);
-  return `${n.getFullYear()}-${R(n.getMonth() + 1)}-${R(n.getDate())} ${R(n.getHours())}:${R(n.getMinutes())}:${R(n.getSeconds())}`;
-}
-function oe({ color: e, value: n, name: a, unit: r, inactive: t }) {
-  return /* @__PURE__ */ S("div", { className: "inline-flex flex-col gap-2 min-w-42 py-2", children: [
-    /* @__PURE__ */ S("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ f(
-        "span",
-        {
-          className: v("size-2 rounded-full inline-block", {
-            "opacity-50": t
-          }),
-          style: { backgroundColor: e }
-        }
-      ),
-      /* @__PURE__ */ f("span", { className: v("text-xs", { "opacity-50": t }), children: a })
-    ] }),
-    /* @__PURE__ */ S("div", { className: "flex items-baseline gap-0.5", children: [
-      /* @__PURE__ */ f(
-        "span",
-        {
-          className: v("text-lg font-medium leading-none", {
-            "opacity-50": t
-          }),
-          children: n
-        }
-      ),
-      r && /* @__PURE__ */ f(
-        "span",
-        {
-          className: v("text-xs text-kumo-subtle leading-none", {
-            "opacity-50": t
-          }),
-          children: r
-        }
-      )
-    ] })
-  ] });
-}
-function ae({ color: e, value: n, name: a, inactive: r }) {
-  return /* @__PURE__ */ S("div", { className: "inline-flex items-center gap-2", children: [
-    /* @__PURE__ */ f(
-      "span",
-      {
-        className: v("size-2 rounded-full inline-block", {
-          "opacity-50": r
-        }),
-        style: { backgroundColor: e }
-      }
-    ),
-    /* @__PURE__ */ f("span", { className: v("text-xs", { "opacity-50": r }), children: a }),
-    /* @__PURE__ */ f("span", { className: v("text-xs font-medium", { "opacity-50": r }), children: n })
-  ] });
-}
-const fe = {
-  SmallItem: ae,
-  LargeItem: oe
-};
-export {
-  V as C,
-  ue as T,
-  fe as a,
-  P as b
-};
-//# sourceMappingURL=Legend-ibjxhfm9pn2vrb6f.js.map

package/dist/chunks/Legend-ibjxhfm9pn2vrb6f.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Legend-ibjxhfm9pn2vrb6f.js","sources":["../../src/components/chart/Color.ts","../../src/components/chart/EChart.tsx","../../src/components/chart/TimeseriesChart.tsx","../../src/components/chart/Legend.tsx"],"sourcesContent":["/**\n * Categorical colors for light mode — used when assigning colors to data series\n * by index (e.g. the first series gets Blue, the second gets Violet, etc.).\n */\nenum ChartCategoricalLightColors {\n  Blue = \"#4290F0\",\n  Yellow = \"#F5B647\",\n  Pink = \"#E8649D\",\n  Purple = \"#8D58EE\",\n  Teal = \"#50C3B6\",\n  Orange = \"#D37536\",\n}\n\n/**\n * Categorical colors for dark mode\n */\nenum ChartCategoricalDarkColors {\n  Blue = \"#4290F0\",\n  Yellow = \"#EEB720\",\n  Pink = \"#E8649D\",\n  Purple = \"#8D58EE\",\n  Teal = \"#50C3B6\",\n  Orange = \"#D37536\",\n}\n\n/**\n * Semantic colors for light mode — used to convey meaning (status, severity)\n * rather than just distinguishing series. Use via `ChartPalette.semantic()`.\n */\nenum ChartSemanticLightColors {\n  Attention = \"#FC574A\",\n  Warning = \"#F8A054\",\n  Success = \"#00A63E\",\n  Neutral = \"#B9D6FF\",\n  Disabled = \"#CBCBCB\",\n  Skeleton = \"#DDDDDD\",\n}\n\n/**\n * Semantic colors for dark mode\n */\nenum ChartSemanticDarkColors {\n  Attention = \"#FC574A\",\n  Warning = \"#F8A054\",\n  Success = \"#00A63E\",\n  Neutral = \"#8EC5FF\",\n  Disabled = \"#878787\",\n  Skeleton = \"#5C5C5C\",\n}\n\nexport type ChartSemanticColorName =\n  | \"Attention\"\n  | \"Warning\"\n  | \"Success\"\n  | \"Neutral\"\n  | \"Disabled\"\n  | \"Skeleton\";\n\n/**\n * Sequential color palettes for light mode with the colour in position #2 of the array as the base.\n */\nconst sequentialLight = {\n  blues: [\"#E1EAF4\", \"#8EBCF6\", \"#4290F0\", \"#0E58B4\", \"#03254F\"],\n};\n\n/**\n * Sequential color palettes for dark mode. These are the reverse of the light mode palettes using the same base color (position 2).\n */\nconst sequentialDark = {\n  blues: [\"#03254F\", \"#0E58B4\", \"#4290F0\", \"#A6BFDD\", \"#E1EAF4\"],\n};\n\n/**\n * Ordered list of categorical colors for light mode, indexed by series position.\n * Used as the default ECharts color palette when `isDarkMode` is `false`.\n */\nexport const CHART_LIGHT_COLORS = [\n  ChartCategoricalLightColors.Blue,\n  ChartCategoricalLightColors.Yellow,\n  ChartCategoricalLightColors.Pink,\n  ChartCategoricalLightColors.Purple,\n  ChartCategoricalLightColors.Teal,\n  ChartCategoricalLightColors.Orange,\n];\n\n/**\n * Ordered list of categorical colors for dark mode, indexed by series position.\n * Used as the default ECharts color palette when `isDarkMode` is `true`.\n */\nexport const CHART_DARK_COLORS = [\n  ChartCategoricalDarkColors.Blue,\n  ChartCategoricalDarkColors.Yellow,\n  ChartCategoricalDarkColors.Pink,\n  ChartCategoricalDarkColors.Purple,\n  ChartCategoricalDarkColors.Teal,\n  ChartCategoricalDarkColors.Orange,\n];\n\n/**\n * Utilities for resolving Kumo chart colors by semantic name or series index.\n * All functions accept an `isDarkMode` flag and return the appropriate color string.\n */\nexport namespace ChartPalette {\n  /**\n   * Returns the hex color for a named semantic value (status, severity, etc.).\n   *\n   * @example\n   * ```ts\n   * ChartPalette.semantic(\"Attention\")           // \"#FC574A\" (light)\n   * ChartPalette.semantic(\"Warning\", true)       // \"#F8A054\" (dark)\n   * ```\n   */\n  export function semantic(\n    name: ChartSemanticColorName,\n    isDarkMode = false,\n  ): string {\n    return isDarkMode\n      ? ChartSemanticDarkColors[name]\n      : ChartSemanticLightColors[name];\n  }\n\n  /**\n   * Returns the categorical color for a given series index.\n   * Wraps around via modulo when `index` exceeds the palette length (6 colors).\n   *\n   * @example\n   * ```ts\n   * ChartPalette.categorical(0)        // Blue (light)\n   * ChartPalette.categorical(0, true)  // Blue (dark)\n   * ChartPalette.categorical(6)        // wraps back to Blue\n   * ```\n   */\n  export function categorical(index: number, isDarkMode = false): string {\n    return isDarkMode\n      ? CHART_DARK_COLORS[index % CHART_DARK_COLORS.length]\n      : CHART_LIGHT_COLORS[index % CHART_LIGHT_COLORS.length];\n  }\n\n  /**\n   * Returns all steps of a named sequential palette as an array.\n   *\n   * @example\n   * ```ts\n   * ChartPalette.sequential(\"blues\")        // 5-step array (light)\n   * ChartPalette.sequential(\"blues\", true)  // 5-step array (dark)\n   * ```\n   */\n  export function sequential(\n    palette: keyof typeof sequentialLight,\n    isDarkMode = false,\n  ): string[] {\n    return isDarkMode\n      ? [...sequentialDark[palette]]\n      : [...sequentialLight[palette]];\n  }\n}\n","import type * as echarts from \"echarts/core\";\nimport type {\n  EChartsOption,\n  SetOptionOpts,\n  TooltipComponentOption,\n} from \"echarts\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { CHART_DARK_COLORS, CHART_LIGHT_COLORS } from \"./Color\";\n\n/** Parameters passed to mouse event handlers on chart elements */\ntype EChartsMouseEventParams = {\n  /** The type of component that triggered the event (e.g. \"series\", \"markPoint\") */\n  componentType: string;\n  /** Series type (e.g. \"line\", \"bar\") — present when componentType is \"series\" */\n  seriesType?: string;\n  /** Zero-based index of the series in the option.series array */\n  seriesIndex?: number;\n  /** Name of the series */\n  seriesName?: string;\n  /** Name of the data item */\n  name?: string;\n  /** Zero-based index of the data item within its series */\n  dataIndex?: number;\n  /** Raw data item value */\n  data?: any;\n  /** Sub-type of data (e.g. \"node\", \"edge\" for graph series) */\n  dataType?: string;\n  /** Numeric or array value of the data item */\n  value?: number | any[];\n  /** Resolved color of the series or data item */\n  color?: string;\n};\n\n/**\n * Tooltip options with the `formatter` property removed and replaced with\n * `dangerousHtmlFormatter` to make the security implications more explicit.\n */\nexport type SafeTooltipOption = Omit<TooltipComponentOption, \"formatter\"> & {\n  /**\n   * USE WITH CAUTION: Use this only for trusted HTML content.\n   * When building tooltip HTML with user-provided data, always sanitize\n   * the input to prevent XSS vulnerabilities. Recommended: use\n   * `encodeHTML` from `echarts/format` to escape HTML special characters.\n   */\n  dangerousHtmlFormatter?: TooltipComponentOption[\"formatter\"];\n};\n\nexport type KumoChartOption = {\n  [K in keyof EChartsOption]: K extends \"tooltip\"\n    ? SafeTooltipOption | SafeTooltipOption[] | undefined\n    : EChartsOption[K];\n};\n\n/**\n * ECharts event handlers that can be attached to a `Chart`.\n * Pass a subset via the `onEvents` prop; handlers are registered lazily and\n * cleaned up automatically when removed or when the chart is unmounted.\n */\nexport interface ChartEvents {\n  // Mouse events — fired on chart elements (series, marks, etc.)\n  click: (params: EChartsMouseEventParams) => void;\n  dblclick: (params: EChartsMouseEventParams) => void;\n  mousedown: (params: EChartsMouseEventParams) => void;\n  mousemove: (params: EChartsMouseEventParams) => void;\n  mouseup: (params: EChartsMouseEventParams) => void;\n  mouseover: (params: EChartsMouseEventParams) => void;\n  mouseout: (params: EChartsMouseEventParams) => void;\n  /** Fired when the pointer leaves the chart canvas entirely */\n  globalout: (params: any) => void;\n  contextmenu: (params: any) => void;\n\n  // Legend events\n  /** Fired when any legend item's selected state changes */\n  legendselectchanged: (params: {\n    name: string;\n    /** Map of series name → selected state for all legend items */\n    selected: Record<string, boolean>;\n  }) => void;\n  legendselected: (params: any) => void;\n  legendunselected: (params: any) => void;\n  legendscroll: (params: any) => void;\n\n  // Data zoom / timeline events\n  datazoom: (params: any) => void;\n  datarangeselected: (params: any) => void;\n  timelinechanged: (params: any) => void;\n  timelineplaychanged: (params: any) => void;\n\n  // Toolbox events\n  restore: (params: any) => void;\n  dataviewchanged: (params: any) => void;\n  magictypechanged: (params: any) => void;\n\n  // Pie chart selection events\n  pieselectchanged: (params: any) => void;\n  pieselected: (params: any) => void;\n  pieunselected: (params: any) => void;\n\n  // Map / geo selection events\n  mapselectchanged: (params: any) => void;\n  mapselected: (params: any) => void;\n  mapunselected: (params: any) => void;\n  geoselectchanged: (params: any) => void;\n  geoselected: (params: any) => void;\n  geounselected: (params: any) => void;\n\n  axisareaselected: (params: any) => void;\n\n  // Brush / selection events\n  brush: (params: any) => void;\n  brushselected: (params: any) => void;\n  /** Fired when the user finishes drawing a brush selection */\n  brushend: (params: {\n    areas: Array<{\n      /** Coordinate range covered by the brush — interpretation depends on axis type */\n      coordRange: any;\n      brushType?: string;\n      panelId?: string;\n      range?: any;\n    }>;\n  }) => void;\n}\n\n/** Props for the low-level `Chart` wrapper around Apache ECharts */\nexport interface ChartProps {\n  /**\n   * The ECharts core instance imported by the consumer.\n   * Passed in rather than imported directly so the consumer controls which\n   * ECharts modules are bundled (tree-shaking).\n   */\n  echarts: typeof echarts;\n  /** ECharts option object — passed through to `chart.setOption()` */\n  options: KumoChartOption;\n  /**\n   * Additional options passed as the second argument to `chart.setOption()`.\n   * Defaults to `{ notMerge: false, lazyUpdate: true }`.\n   */\n  optionUpdateBehavior?: SetOptionOpts;\n  /** Additional CSS classes applied to the chart container `<div>` */\n  className?: string;\n  /**\n   * When `true`, initialises ECharts with its built-in dark theme.\n   * Changing this value after mount destroys and re-creates the chart instance.\n   */\n  isDarkMode?: boolean;\n  /** Height of the chart container in pixels. Defaults to `350`. */\n  height?: number;\n  /** Subset of ECharts events to listen for. Handlers are bound/unbound reactively. */\n  onEvents?: Partial<ChartEvents>;\n}\n\nconst transformTooltip = (tooltipObj: SafeTooltipOption) => {\n  const { dangerousHtmlFormatter, ...restOfTooltip } = tooltipObj;\n  return {\n    ...restOfTooltip,\n    formatter: dangerousHtmlFormatter,\n  };\n};\n\nconst prepareChartOptions = (options: KumoChartOption): EChartsOption => {\n  if (!options.tooltip) return options;\n\n  return {\n    ...options,\n    tooltip: Array.isArray(options.tooltip)\n      ? options.tooltip.map(transformTooltip)\n      : transformTooltip(options.tooltip),\n  };\n};\n\n/**\n * Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).\n *\n * Manages the ECharts instance lifecycle (init, option updates, event binding,\n * resize observation, and disposal). Exposes the raw `echarts.ECharts` instance\n * via `ref` for imperative access when needed.\n *\n * Prefer `TimeseriesChart` for time-series data; use this component when you\n * need full control over the ECharts option object.\n *\n * @example\n * ```tsx\n * import * as echarts from \"echarts/core\";\n * import { BarChart } from \"echarts/charts\";\n * import { GridComponent } from \"echarts/components\";\n * import { CanvasRenderer } from \"echarts/renderers\";\n *\n * echarts.use([BarChart, GridComponent, CanvasRenderer]);\n *\n * <Chart\n *   echarts={echarts}\n *   options={{ xAxis: { data: [\"A\", \"B\"] }, yAxis: {}, series: [{ type: \"bar\", data: [1, 2] }] }}\n * />\n * ```\n */\nexport const Chart = forwardRef<echarts.ECharts, ChartProps>(function Chart(\n  {\n    echarts,\n    options,\n    optionUpdateBehavior,\n    className,\n    isDarkMode,\n    height = 350,\n    onEvents,\n  }: ChartProps,\n  ref,\n) {\n  // Ref to the container DOM node that ECharts renders into\n  const elRef = useRef<HTMLDivElement | null>(null);\n  // Ref to the active ECharts instance\n  const chartRef = useRef<echarts.ECharts | null>(null);\n  // Keeps the latest onEvents object without triggering re-binding on every render\n  const handlersRef = useRef<Partial<ChartEvents>>({});\n  // Stable wrapper functions per event name — avoids creating new closures on re-render\n  const wrappersRef = useRef<Record<string, (params: any) => void>>({});\n  // Tracks which event names are currently bound to the chart instance\n  const boundEventsRef = useRef<Set<string>>(new Set());\n\n  // Init and cleanup\n  useEffect(() => {\n    if (!elRef.current) return;\n\n    const chart = echarts.init(\n      elRef.current,\n      isDarkMode\n        ? \"dark\"\n        : {\n            color: isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS,\n          },\n    );\n    chartRef.current = chart;\n\n    if (typeof ref === \"function\") ref(chart);\n    else if (ref) ref.current = chart;\n\n    return () => {\n      for (const event of boundEventsRef.current) {\n        const wrapper = wrappersRef.current[event];\n        if (wrapper) chart.off(event, wrapper);\n      }\n      boundEventsRef.current.clear();\n      if (typeof ref === \"function\") ref(null);\n      else if (ref) ref.current = null;\n      chartRef.current = null;\n      chart.dispose();\n    };\n  }, [elRef, isDarkMode]);\n\n  // Update options\n  useEffect(() => {\n    const chart = chartRef.current;\n    if (!chart) return;\n\n    chart.setOption(prepareChartOptions(options), {\n      notMerge: false,\n      lazyUpdate: true,\n      ...optionUpdateBehavior,\n    });\n  }, [isDarkMode, optionUpdateBehavior, options]);\n\n  // Keep handlersRef in sync so wrapper closures always call the latest handler\n  // without needing to re-bind listeners on every render\n  useEffect(() => {\n    handlersRef.current = onEvents ?? {};\n  }, [onEvents]);\n\n  // Reactively bind and unbind event listeners when onEvents changes.\n  // Uses stable wrapper functions (wrappersRef) so the same function reference\n  // is passed to both chart.on() and chart.off(), which ECharts requires.\n  useEffect(() => {\n    const chart = chartRef.current;\n    if (!chart) return;\n\n    const nextBound = new Set<string>();\n\n    for (const [event, handler] of Object.entries(onEvents ?? {})) {\n      if (typeof handler !== \"function\") continue;\n      nextBound.add(event);\n\n      if (!wrappersRef.current[event]) {\n        wrappersRef.current[event] = (params: any) => {\n          const current = handlersRef.current as Record<\n            string,\n            ((p: any) => void) | undefined\n          >;\n          current[event]?.(params);\n        };\n      }\n\n      if (!boundEventsRef.current.has(event)) {\n        chart.on(event, wrappersRef.current[event]);\n      }\n    }\n\n    for (const event of boundEventsRef.current) {\n      if (nextBound.has(event)) continue;\n      const wrapper = wrappersRef.current[event];\n      if (wrapper) {\n        chart.off(event, wrapper);\n      }\n    }\n\n    boundEventsRef.current = nextBound;\n  }, [echarts, isDarkMode, onEvents]);\n\n  // Resize handling\n  useEffect(() => {\n    const chart = chartRef.current;\n    const el = elRef.current;\n    if (!chart || !el) return;\n\n    // Flag to skip the very first trigger\n    let isInitial = true;\n\n    const ro = new ResizeObserver(() => {\n      if (isInitial) {\n        isInitial = false;\n        return; // Skip the first resize to let the animation play\n      }\n      chart.resize();\n    });\n\n    ro.observe(el);\n\n    return () => ro.disconnect();\n  }, []);\n\n  return (\n    <div\n      ref={elRef}\n      className={cn(\"w-full\", className)}\n      style={{ height }}\n      tabIndex={options.aria?.enabled ? 0 : undefined}\n      role={options.aria?.enabled ? \"img\" : undefined}\n    />\n  );\n});\n\nChart.displayName = \"Chart\";\n","import type * as echarts from \"echarts/core\";\nimport type { LineSeriesOption, BarSeriesOption } from \"echarts/charts\";\nimport type { EChartsOption, SeriesOption } from \"echarts\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { Chart, ChartEvents, KumoChartOption } from \"./EChart\";\n\n/** A single data series rendered on a `TimeseriesChart` */\nexport interface TimeseriesData {\n  /** Display name shown in tooltips and legends */\n  name: string;\n  /** Array of `[timestamp_ms, value]` tuples ordered by time */\n  data: [number, number][];\n  /** Hex color string used for this series' line, bars, and legend dot */\n  color: string;\n}\n\n/** Props for `TimeseriesChart` */\nexport interface TimeseriesChartProps {\n  /**\n   * The ECharts core instance imported by the consumer.\n   * Passed in rather than imported directly so the consumer controls which\n   * ECharts modules are bundled (tree-shaking).\n   */\n  echarts: typeof echarts;\n  /** Visual style of each series. Defaults to `\"line\"`. */\n  type?: \"line\" | \"bar\";\n  /** Array of time series data to display on the chart */\n  data: TimeseriesData[];\n  /** Label for the x-axis (time axis) */\n  xAxisName?: string;\n  /** Number of ticks to display on the x-axis */\n  xAxisTickCount?: number;\n  /**\n   * Custom formatter for x-axis tick labels.\n   * Receives the raw timestamp in milliseconds and returns a display string,\n   * overriding ECharts' built-in time formatting.\n   */\n  xAxisTickFormat?: (value: number) => string;\n  /**\n   * Custom formatter for y-axis tick labels.\n   * Receives the raw value and returns a display string.\n   * When omitted, ECharts' built-in formatter is used.\n   */\n  yAxisTickFormat?: (value: number) => string;\n  /**\n   * @deprecated Use `tooltipValueFormat` instead. This prop formats tooltip\n   * values, not y-axis tick labels. It will be removed in a future major version.\n   */\n  yAxisTickLabelFormat?: (value: number) => string;\n  /** Label for the y-axis (value axis) */\n  yAxisName?: string;\n  /** Number of ticks to display on the y-axis */\n  yAxisTickCount?: number;\n  /**\n   * Custom formatter for tooltip values.\n   * Receives the raw y-value and returns a display string.\n   * When omitted, the raw value is shown. Takes precedence over the\n   * deprecated `yAxisTickLabelFormat` prop.\n   */\n  tooltipValueFormat?: (value: number) => string;\n  /** Indicates incomplete data periods with optional before/after timestamps in ms */\n  incomplete?: { before?: number; after?: number };\n  /** Height of the chart in pixels. Defaults to `350`. */\n  height?: number;\n  /** Callback fired when user selects a time range via brush selection */\n  onTimeRangeChange?: (from: number, to: number) => void;\n  /** When `true`, switches the chart to ECharts' built-in dark theme */\n  isDarkMode?: boolean;\n  /**\n   * When `true`, renders a vertical gradient fill beneath each line series.\n   * The gradient fades from the series' color at the top to transparent at the bottom.\n   * Has no effect when `type` is `\"bar\"`.\n   */\n  gradient?: boolean;\n  /**\n   * When `true`, hides the chart and displays an animated sine-wave skeleton\n   * that oscillates back and forth to indicate that data is being fetched.\n   */\n  loading?: boolean;\n  /**\n   * Accessible description for screen readers. When provided, it is passed to\n   * ECharts' `aria.label.description` and announced when the chart receives\n   * focus. Consumers are responsible for writing a meaningful description —\n   * see the W3C guidance on complex images for recommendations.\n   *\n   * @see https://www.w3.org/WAI/tutorials/images/complex/\n   * @see https://echarts.apache.org/handbook/en/best-practices/aria/\n   */\n  ariaDescription?: string;\n}\n\n/**\n * TimeseriesChart — a time-series line or bar chart.\n *\n * Built on `Chart` (Apache ECharts) with opinionated defaults for time-series data:\n * a time-typed x-axis, dashed lines for incomplete data periods, brush-based\n * time range selection, and automatic tooltip deduplication.\n *\n * @example\n * ```tsx\n * import * as echarts from \"echarts/core\";\n * import { LineChart } from \"echarts/charts\";\n * import { GridComponent, TooltipComponent, BrushComponent, ToolboxComponent } from \"echarts/components\";\n * import { CanvasRenderer } from \"echarts/renderers\";\n *\n * echarts.use([LineChart, GridComponent, TooltipComponent, BrushComponent, ToolboxComponent, CanvasRenderer]);\n *\n * const [range, setRange] = useState<[number, number]>();\n *\n * <TimeseriesChart\n *   echarts={echarts}\n *   data={[{ name: \"Requests\", data: [[Date.now(), 42]], color: \"#086FFF\" }]}\n *   xAxisName=\"Time\"\n *   xAxisTickFormat={(ts) => new Date(ts).toLocaleTimeString()}\n *   yAxisName=\"Count\"\n *   yAxisTickFormat={(value) => `${value / 1000}k`}\n *   tooltipValueFormat={(value) => `${value.toFixed(2)} req/s`}\n *   onTimeRangeChange={(from, to) => setRange([from, to])}\n * />\n * ```\n */\nexport function TimeseriesChart({\n  echarts,\n  type = \"line\",\n  data,\n  xAxisName,\n  xAxisTickCount,\n  xAxisTickFormat,\n  yAxisTickFormat,\n  yAxisTickLabelFormat,\n  yAxisName,\n  yAxisTickCount,\n  tooltipValueFormat,\n  onTimeRangeChange,\n  height = 350,\n  incomplete,\n  isDarkMode,\n  gradient,\n  loading,\n  ariaDescription,\n}: TimeseriesChartProps) {\n  const chartRef = useRef<echarts.ECharts | null>(null);\n  const incompleteBefore = incomplete?.before;\n  const incompleteAfter = incomplete?.after;\n\n  const options = useMemo(() => {\n    const transformSeries: Array<LineSeriesOption | BarSeriesOption> = [];\n\n    const seriesType =\n      type === \"bar\"\n        ? ({ type: \"bar\", stack: \"total\" } as const)\n        : ({ type: \"line\", showSymbol: false } as const);\n\n    for (const s of data) {\n      const incompleteBeforePoints =\n        incompleteBefore && type === \"line\"\n          ? s.data.filter((point) => point[0] <= incompleteBefore)\n          : [];\n\n      const incompleteAfterPoints =\n        incompleteAfter && type === \"line\"\n          ? s.data.filter((point) => point[0] >= incompleteAfter)\n          : [];\n\n      const completePoints =\n        incompleteBeforePoints.length > 0 || incompleteAfterPoints.length > 0\n          ? s.data.slice(\n              Math.max(0, incompleteBeforePoints.length - 1),\n              Math.max(0, s.data.length - incompleteAfterPoints.length + 1),\n            )\n          : s.data;\n\n      // Main complete data series\n      const areaStyle =\n        gradient && type === \"line\"\n          ? {\n              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n                { offset: 0, color: colorWithOpacity(s.color, 0.4) },\n                { offset: 1, color: colorWithOpacity(s.color, 0) },\n              ]),\n            }\n          : undefined;\n\n      transformSeries.push({\n        data: completePoints,\n        color: s.color,\n        name: s.name,\n        emphasis: { focus: \"series\" },\n        ...(areaStyle ? { areaStyle } : {}),\n        ...seriesType,\n      });\n\n      // Incomplete data series with dashed lines\n      const incompleteSeriesConfig = {\n        color: s.color,\n        name: s.name,\n        type: \"line\" as const,\n        lineStyle: { type: \"dashed\" as const },\n        showSymbol: false,\n        emphasis: { focus: \"series\" as const },\n      };\n\n      if (incompleteBeforePoints.length > 0) {\n        transformSeries.push({\n          ...incompleteSeriesConfig,\n          data: incompleteBeforePoints,\n        });\n      }\n\n      if (incompleteAfterPoints.length > 0) {\n        transformSeries.push({\n          ...incompleteSeriesConfig,\n          data: incompleteAfterPoints,\n        });\n      }\n    }\n\n    return {\n      aria: {\n        enabled: true,\n        ...(ariaDescription && { label: { description: ariaDescription } }),\n      },\n      brush: {\n        xAxisIndex: \"all\" as const,\n        brushType: \"lineX\" as const,\n        brushMode: \"single\" as const,\n        outOfBrush: {\n          colorAlpha: 0.3,\n        },\n        brushStyle: {\n          borderWidth: 1,\n          color: \"rgba(120,140,180,0.3)\",\n          borderColor: \"rgba(120,140,180,0.8)\",\n        },\n      },\n      tooltip: {\n        trigger: \"axis\" as const,\n        appendTo: \"body\",\n        axisPointer: { type: \"shadow\" as const },\n        dangerousHtmlFormatter: (params) => {\n          const items = Array.isArray(params) ? params : [params];\n\n          // Track seen series names to avoid duplicates in tooltip\n          // This is needed because incomplete data series (dashed lines) and complete data series\n          // can overlap at the same timestamp, causing duplicate entries in the tooltip\n          const seenNames = new Set<string>();\n          const filteredParams = items.filter((param: any) => {\n            if (seenNames.has(param.seriesName)) return false;\n            seenNames.add(param.seriesName);\n            return true;\n          });\n\n          const first = filteredParams[0] as {\n            value?: [number, number];\n            axisValue?: number;\n          };\n\n          const ts = first?.value?.[0] ?? first?.axisValue;\n\n          const header =\n            ts != null\n              ? `<div style=\"font-weight:600;margin-bottom:4px;\">${echarts.format.encodeHTML(formatTimestamp(ts))}</div>`\n              : \"\";\n\n          const rows = filteredParams\n            .map((param: any) => {\n              const value = param?.value?.[1];\n              const formatFn = tooltipValueFormat ?? yAxisTickLabelFormat;\n              const formattedValue = formatFn\n                ? echarts.format.encodeHTML(String(formatFn(value)))\n                : echarts.format.encodeHTML(String(value));\n\n              return `${param.marker} ${echarts.format.encodeHTML(param.seriesName)}: <strong>${formattedValue}</strong>`;\n            })\n            .join(\"<br/>\");\n\n          return `${header}${rows}`;\n        },\n      },\n      backgroundColor: \"transparent\",\n      toolbox: { show: false },\n      xAxis: {\n        name: xAxisName,\n        nameLocation: \"middle\" as const,\n        nameGap: 30,\n        type: \"time\" as const,\n        splitLine: {\n          show: false,\n        },\n        axisLine: { show: false },\n        splitNumber: xAxisTickCount ?? 5,\n        ...(xAxisTickFormat && {\n          axisLabel: {\n            formatter: (value: number) => xAxisTickFormat(value),\n          },\n        }),\n      },\n      yAxis: {\n        name: yAxisName,\n        nameLocation: \"middle\" as const,\n        nameGap: 40,\n        type: \"value\" as const,\n        axisTick: { show: true },\n        axisLabel: {\n          margin: 15,\n          ...(yAxisTickFormat && {\n            formatter: (value: number) => yAxisTickFormat(value),\n          }),\n        },\n        splitLine: {\n          show: true,\n          lineStyle: { type: \"dashed\" as const, width: 1 },\n        },\n        splitNumber: yAxisTickCount,\n      },\n      grid: {\n        left: yAxisName ? 30 : 24,\n        right: 24,\n        top: 24,\n        bottom: xAxisName ? 30 : 24,\n      },\n      series: transformSeries as SeriesOption[],\n    } satisfies KumoChartOption;\n  }, [\n    data,\n    xAxisName,\n    xAxisTickCount,\n    xAxisTickFormat,\n    yAxisTickFormat,\n    yAxisTickLabelFormat,\n    yAxisName,\n    yAxisTickCount,\n    tooltipValueFormat,\n    incompleteBefore,\n    incompleteAfter,\n    type,\n    gradient,\n    echarts,\n    ariaDescription,\n  ]);\n\n  const events = useMemo<Partial<ChartEvents>>(() => {\n    if (!onTimeRangeChange) return {};\n\n    return {\n      brushend: (params) => {\n        const range = params.areas[0].coordRange;\n        onTimeRangeChange(range[0], range[1]);\n        chartRef.current?.dispatchAction({ type: \"brush\", areas: [] });\n      },\n    };\n  }, [onTimeRangeChange]);\n\n  // Activate the lineX brush cursor when a time-range callback is provided,\n  // and deactivate it on cleanup so the cursor resets when the prop is removed.\n  const hasTimeRangeCallback = !!onTimeRangeChange;\n  useEffect(() => {\n    const chart = chartRef.current;\n    if (chart && hasTimeRangeCallback) {\n      chart.dispatchAction({\n        type: \"takeGlobalCursor\",\n        key: \"brush\",\n        brushOption: {\n          brushType: \"lineX\" as const,\n          brushMode: \"single\" as const,\n        },\n      });\n\n      return () => {\n        chart.dispatchAction({\n          type: \"takeGlobalCursor\",\n          key: \"brush\",\n          brushOption: {\n            brushType: false,\n          },\n        });\n      };\n    }\n    // `loading` controls whether <Chart> is mounted. When it flips to false,\n    // chartRef.current becomes available and the brush cursor must be activated.\n    // Without this dep, the effect won't re-run after Chart mounts.\n  }, [chartRef, hasTimeRangeCallback, loading]);\n\n  return (\n    <div className=\"relative w-full\" style={{ height }}>\n      {loading && <ChartWaveLoader height={height} isDarkMode={isDarkMode} />}\n      {!loading && (\n        <Chart\n          echarts={echarts}\n          ref={chartRef}\n          options={options as EChartsOption}\n          height={height}\n          isDarkMode={isDarkMode}\n          onEvents={events}\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * Animated sine-wave skeleton shown while `TimeseriesChart` is in `loading` state.\n * Renders multiple staggered wave paths that sweep continuously left-to-right,\n * mimicking the motion of live time-series data being drawn.\n */\nfunction ChartWaveLoader({\n  height,\n  isDarkMode,\n}: {\n  height: number;\n  isDarkMode?: boolean;\n}) {\n  const mid = height / 2;\n  const amp = Math.min(height * 0.12, 28);\n  const period = 400;\n  const steps = 120;\n\n  const points: string[] = [];\n  for (let i = 0; i <= steps; i++) {\n    const x = -period + (i / steps) * period * 3;\n    const y = mid + Math.sin((i / steps) * 2 * Math.PI * 3) * amp;\n    points.push(`${i === 0 ? \"M\" : \"L\"}${x.toFixed(2)},${y.toFixed(2)}`);\n  }\n  const d = points.join(\" \");\n\n  const strokeColor = isDarkMode ? \"rgba(255,255,255,0.5)\" : \"rgba(0,0,0,0.2)\";\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"absolute inset-0 overflow-hidden\"\n      style={{ height }}\n    >\n      <svg\n        width=\"100%\"\n        height={height}\n        viewBox={`0 0 ${period} ${height}`}\n        preserveAspectRatio=\"none\"\n        className=\"w-full animate-pulse\"\n      >\n        <path\n          d={d}\n          fill=\"none\"\n          stroke={strokeColor}\n          strokeWidth=\"2\"\n          style={{\n            animation: `kumo-chart-wave 2.4s linear infinite`,\n            transformOrigin: \"0 0\",\n          }}\n        />\n      </svg>\n    </div>\n  );\n}\n\n/**\n * Returns an `rgba(r, g, b, alpha)` string for any hex or rgb(a) color input,\n * replacing whatever opacity was already present with the given `alpha` (0–1).\n *\n * Handles:\n * - 6-digit hex:  `#RRGGBB`\n * - 8-digit hex:  `#RRGGBBAA`  ← strips existing alpha\n * - 3-digit hex:  `#RGB`\n * - `rgb(r, g, b)`\n * - `rgba(r, g, b, a)`  ← replaces existing alpha\n */\nfunction colorWithOpacity(color: string, alpha: number): string {\n  const a = Math.max(0, Math.min(1, alpha));\n\n  // rgb / rgba\n  const rgbMatch = color.match(\n    /rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i,\n  );\n  if (rgbMatch) {\n    return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${a})`;\n  }\n\n  // hex — strip leading #\n  let hex = color.replace(/^#/, \"\");\n\n  // expand 3-digit → 6-digit\n  if (hex.length === 3) {\n    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n  }\n\n  // strip 8-digit alpha → keep only 6\n  if (hex.length === 8) {\n    hex = hex.slice(0, 6);\n  }\n\n  const r = parseInt(hex.slice(0, 2), 16);\n  const g = parseInt(hex.slice(2, 4), 16);\n  const b = parseInt(hex.slice(4, 6), 16);\n\n  return `rgba(${r}, ${g}, ${b}, ${a})`;\n}\n\n/** Zero-pads a number to two digits (e.g. `5` → `\"05\"`) */\nfunction pad(n: number) {\n  return n.toString().padStart(2, \"0\");\n}\n\n/**\n * Formats a timestamp as `\"YYYY-MM-DD HH:mm:ss\"` for use in chart tooltips.\n * Accepts a Unix timestamp in milliseconds, an ISO date string, or a `Date` object.\n */\nfunction formatTimestamp(ts: number | string | Date): string {\n  const d = new Date(ts);\n  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;\n}\n","import { cn } from \"../../utils\";\n\n/** Shared props for both legend item variants */\ninterface LegendItemProps {\n  /** Series name shown as a label */\n  name: string;\n  /** Hex color string for the series indicator dot */\n  color: string;\n  /** Formatted value string to display */\n  value: string;\n  /** Optional unit label shown after the value (e.g. `\"ms\"`, `\"%\"`) */\n  unit?: string;\n  /** When `true`, renders the item at 50% opacity to indicate a deselected state */\n  inactive?: boolean;\n}\n\n/**\n * Large legend item — stacked layout with a colored dot + series name on top\n * and a large value with an optional small unit below. Use for prominent\n * single-metric displays such as dashboard cards.\n */\nfunction LargeItem({ color, value, name, unit, inactive }: LegendItemProps) {\n  return (\n    <div className=\"inline-flex flex-col gap-2 min-w-42 py-2\">\n      <div className=\"flex items-center gap-2\">\n        <span\n          className={cn(\"size-2 rounded-full inline-block\", {\n            \"opacity-50\": inactive,\n          })}\n          style={{ backgroundColor: color }}\n        />\n        <span className={cn(\"text-xs\", { \"opacity-50\": inactive })}>\n          {name}\n        </span>\n      </div>\n      <div className=\"flex items-baseline gap-0.5\">\n        <span\n          className={cn(\"text-lg font-medium leading-none\", {\n            \"opacity-50\": inactive,\n          })}\n        >\n          {value}\n        </span>\n        {unit && (\n          <span\n            className={cn(\"text-xs text-kumo-subtle leading-none\", {\n              \"opacity-50\": inactive,\n            })}\n          >\n            {unit}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Small legend item — inline layout with a colored dot, series name, and value\n * on a single row. Use for compact legends below or beside a chart.\n */\nfunction SmallItem({ color, value, name, inactive }: LegendItemProps) {\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <span\n        className={cn(\"size-2 rounded-full inline-block\", {\n          \"opacity-50\": inactive,\n        })}\n        style={{ backgroundColor: color }}\n      />\n      <span className={cn(\"text-xs\", { \"opacity-50\": inactive })}>{name}</span>\n      <span className={cn(\"text-xs font-medium\", { \"opacity-50\": inactive })}>\n        {value}\n      </span>\n    </div>\n  );\n}\n\n/**\n * ChartLegend — pre-built legend item components for use alongside a chart.\n *\n * - `ChartLegend.SmallItem` — compact inline layout; suited for multi-series legends\n * - `ChartLegend.LargeItem` — stacked layout with a large value; suited for single-metric cards\n *\n * @example\n * ```tsx\n * <ChartLegend.SmallItem name=\"Requests\" color=\"#086FFF\" value=\"1,234\" />\n * <ChartLegend.LargeItem name=\"Latency\" color=\"#CF7EE9\" value=\"42\" unit=\"ms\" inactive />\n * ```\n */\nexport const ChartLegend = {\n  SmallItem,\n  LargeItem,\n};\n"],"names":["ChartSemanticLightColors","ChartSemanticDarkColors","sequentialLight","sequentialDark","CHART_LIGHT_COLORS","CHART_DARK_COLORS","ChartPalette","semantic","name","isDarkMode","categorical","index","sequential","palette","transformTooltip","tooltipObj","dangerousHtmlFormatter","restOfTooltip","prepareChartOptions","options","Chart","forwardRef","echarts","optionUpdateBehavior","className","height","onEvents","ref","elRef","useRef","chartRef","handlersRef","wrappersRef","boundEventsRef","useEffect","chart","event","wrapper","nextBound","handler","params","el","isInitial","ro","jsx","cn","TimeseriesChart","type","data","xAxisName","xAxisTickCount","xAxisTickFormat","yAxisTickFormat","yAxisTickLabelFormat","yAxisName","yAxisTickCount","tooltipValueFormat","onTimeRangeChange","incomplete","gradient","loading","ariaDescription","incompleteBefore","incompleteAfter","useMemo","transformSeries","seriesType","s","incompleteBeforePoints","point","incompleteAfterPoints","completePoints","areaStyle","colorWithOpacity","incompleteSeriesConfig","items","seenNames","filteredParams","param","first","ts","header","formatTimestamp","rows","value","formatFn","formattedValue","events","range","hasTimeRangeCallback","ChartWaveLoader","mid","amp","period","steps","points","i","x","d","strokeColor","color","alpha","rgbMatch","hex","r","g","b","pad","n","LargeItem","unit","inactive","jsxs","SmallItem","ChartLegend"],"mappings":"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"}

package/dist/chunks/command-palette-kgiso245exdons4r.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"command-palette-kgiso245exdons4r.js","sources":["../../src/components/command-palette/command-palette.tsx"],"sourcesContent":["import {\n  useRef,\n  useCallback,\n  createContext,\n  useContext,\n  forwardRef,\n  type CSSProperties,\n} from \"react\";\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport {\n  MagnifyingGlassIcon,\n  ArrowRightIcon,\n  ArrowSquareOutIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\n\nimport { LayerCard } from \"../layer-card\";\nimport { Loader } from \"../loader\";\nimport { cn } from \"../../utils\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\nimport type {\n  HighlightRange,\n  CommandPaletteRootProps,\n  CommandPaletteInputProps,\n  CommandPaletteListProps,\n  CommandPaletteGroupProps,\n  CommandPaletteGroupLabelProps,\n  CommandPaletteItemProps,\n  CommandPaletteEmptyProps,\n  CommandPaletteLoadingProps,\n  CommandPaletteFooterProps,\n  CommandPaletteResultItemProps,\n} from \"./types\";\n\n/**\n * CommandPalette - A composable command palette component for Kumo\n *\n * Uses @base-ui/react/autocomplete primitives for accessible command palette functionality.\n *\n * Keyboard navigation is built-in:\n * - Arrow keys (up/down) move highlight between items\n * - Enter selects the highlighted item (calls onSelect with newTab: false)\n * - Cmd+Enter (Mac) / Ctrl+Enter (Windows/Linux) selects with newTab: true\n * - First item is auto-highlighted when results change\n * - Escape closes the dialog\n *\n * Usage:\n * ```tsx\n * <CommandPalette.Root\n *   open={open}\n *   onOpenChange={setOpen}\n *   items={results}\n *   value={searchTerm}\n *   onValueChange={setSearchTerm}\n *   itemToStringValue={(group) => group.label}\n *   onSelect={(item, { newTab }) => handleSelect(item, newTab)}\n *   getSelectableItems={(groups) => groups.flatMap(g => g.items)}\n * >\n *   <CommandPalette.Input placeholder=\"Search...\" />\n *   <CommandPalette.List>\n *     <Autocomplete.List>\n *       {(group) => (\n *         <CommandPalette.Group items={group.items}>\n *           <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n *           <Autocomplete.Collection>\n *             {(item) => (\n *               <CommandPalette.Item value={item} onClick={(e) => handleSelect(item, e.metaKey || e.ctrlKey)}>\n *                 {item.title}\n *               </CommandPalette.Item>\n *             )}\n *           </Autocomplete.Collection>\n *         </CommandPalette.Group>\n *       )}\n *     </Autocomplete.List>\n *     <CommandPalette.Empty>No results found</CommandPalette.Empty>\n *   </CommandPalette.List>\n *   <CommandPalette.Footer />\n * </CommandPalette.Root>\n * ```\n */\n\n/**\n * Dialog context for passing close handler to children\n */\ninterface DialogContextValue {\n  onClose?: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({});\n\n/**\n * Props for the Dialog component\n */\ninterface DialogProps {\n  /** Whether the dialog is open */\n  open: boolean;\n  /** Callback when the open state changes */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * Optional callback when backdrop is clicked.\n   * Receives the mouse event for position tracking (e.g., for ripple effects).\n   * If not provided, backdrop click calls onOpenChange(false).\n   */\n  onBackdropClick?: (e: React.MouseEvent) => void;\n  /** Child content - typically one or more Panel components */\n  children: React.ReactNode;\n  /**\n   * Container element for the portal. Use this to render the command palette inside\n   * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n   * @default document.body (or KumoPortalProvider container if set)\n   */\n  container?: PortalContainer;\n}\n\n/**\n * Dialog component - Modal wrapper for command palette content.\n *\n * Use this when you need a dialog that can swap between different Panel contents\n * without re-mounting (e.g., drill-down navigation).\n *\n * @example\n * ```tsx\n * <CommandPalette.Dialog open={open} onOpenChange={setOpen}>\n *   {showDrillDown ? (\n *     <ZonePicker />\n *   ) : (\n *     <CommandPalette.Panel items={results} ...>\n *       ...\n *     </CommandPalette.Panel>\n *   )}\n * </CommandPalette.Dialog>\n * ```\n */\nfunction Dialog({\n  open,\n  onOpenChange,\n  onBackdropClick,\n  children,\n  container: containerProp,\n}: DialogProps) {\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\n\n  const handleBackdropClick = (e: React.MouseEvent) => {\n    if (onBackdropClick) {\n      onBackdropClick(e);\n    } else {\n      onOpenChange(false);\n    }\n  };\n\n  const handleClose = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  return (\n    <DialogBase.Root open={open} onOpenChange={onOpenChange} modal>\n      <DialogBase.Portal container={container}>\n        <DialogBase.Backdrop\n          className=\"fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\"\n          onClick={handleBackdropClick}\n        />\n        <LayerCard\n          render={<DialogBase.Popup />}\n          className={cn(\n            \"fixed top-[10vh] left-1/2 w-full max-w-2xl -translate-x-1/2\",\n            \"overflow-hidden rounded-lg\",\n            \"duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n          )}\n          style={\n            {\n              transitionProperty: \"scale, opacity\",\n              transitionTimingFunction:\n                \"var(--default-transition-timing-function)\",\n            } as CSSProperties\n          }\n        >\n          <DialogContext.Provider value={{ onClose: handleClose }}>\n            {children}\n          </DialogContext.Provider>\n        </LayerCard>\n      </DialogBase.Portal>\n    </DialogBase.Root>\n  );\n}\n\n/**\n * Root component - Dialog + Panel combined for simple use cases.\n *\n * For cases where you need to swap content inside the dialog without\n * re-mounting (e.g., drill-down navigation), use Dialog + Panel separately.\n *\n * Keyboard navigation is always enabled:\n * - Arrow keys (up/down) move highlight\n * - Enter selects highlighted item\n * - Cmd/Ctrl+Enter selects with newTab: true\n * - First item is auto-highlighted when results change\n */\nfunction Root<TGroup, TItem = TGroup>({\n  open,\n  onOpenChange,\n  onBackdropClick,\n  children,\n  items,\n  value,\n  onValueChange,\n  onItemHighlighted,\n  itemToStringValue,\n  filter,\n  onSelect,\n  getSelectableItems,\n  container,\n}: CommandPaletteRootProps<TGroup, TItem>) {\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={onOpenChange}\n      onBackdropClick={onBackdropClick}\n      container={container}\n    >\n      <Panel\n        items={items}\n        value={value}\n        onValueChange={onValueChange}\n        onItemHighlighted={onItemHighlighted}\n        itemToStringValue={itemToStringValue}\n        filter={filter}\n        open={open}\n        onSelect={onSelect}\n        getSelectableItems={getSelectableItems}\n      >\n        {children}\n      </Panel>\n    </Dialog>\n  );\n}\n\n/**\n * InputHeader component - Internal styled container for search input.\n */\nfunction InputHeader({\n  children,\n  leading,\n  trailing,\n}: {\n  children: React.ReactNode;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-center gap-3 bg-kumo-base px-4 py-3 focus-within:ring-2 focus-within:ring-kumo-brand\">\n      {leading ?? (\n        <MagnifyingGlassIcon\n          className=\"h-4 w-4 text-kumo-subtle\"\n          weight=\"bold\"\n        />\n      )}\n      {children}\n      {trailing}\n    </div>\n  );\n}\n\n/**\n * List component - Scrollable results container\n *\n * Wrapper div with proper styling, contains Autocomplete.List internally.\n * Supports ref forwarding for scroll control.\n */\nconst List = forwardRef<\n  HTMLDivElement,\n  CommandPaletteListProps & { className?: string }\n>(function List({ children, className }, ref) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 ring-1 ring-kumo-hairline\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n});\n\nList.displayName = \"CommandPalette.List\";\n\n/**\n * Group component - Category grouping\n *\n * Re-export of Autocomplete.Group with default styling.\n */\nfunction Group({\n  children,\n  className,\n  ...props\n}: CommandPaletteGroupProps & {\n  className?: string;\n  items?: unknown[];\n}) {\n  return (\n    <Autocomplete.Group className={cn(\"space-y-0.5\", className)} {...props}>\n      {children}\n    </Autocomplete.Group>\n  );\n}\n\n/**\n * GroupLabel component - Section header text\n *\n * Re-export of Autocomplete.GroupLabel with styling matching SectionHeader.\n */\nfunction GroupLabel({\n  children,\n  className,\n}: CommandPaletteGroupLabelProps & { className?: string }) {\n  return (\n    <Autocomplete.GroupLabel\n      className={cn(\n        \"mb-2 px-2 pt-1 text-xs font-semibold text-kumo-subtle\",\n        className,\n      )}\n    >\n      {children}\n    </Autocomplete.GroupLabel>\n  );\n}\n\n/**\n * Item component - Individual result item\n *\n * Re-export of Autocomplete.Item with styling matching SearchResultItem.\n * Note: Use onClick for selection handling, matching the existing CommandPalette pattern.\n */\nfunction Item<T>({\n  value,\n  disabled,\n  children,\n  className,\n  onClick,\n}: CommandPaletteItemProps<T> & {\n  className?: string;\n}) {\n  return (\n    <Autocomplete.Item\n      value={value}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(\n        \"group flex w-full items-center gap-3 px-2 py-1.5 text-left text-base transition-colors\",\n        \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n        \"rounded-lg\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n    </Autocomplete.Item>\n  );\n}\n\n/**\n * Empty component - Empty state when no results\n *\n * Re-export of Autocomplete.Empty with default styling.\n */\nfunction Empty({ children }: CommandPaletteEmptyProps) {\n  return (\n    <Autocomplete.Empty>\n      <div className=\"p-8 text-center\">\n        <p className=\"text-kumo-subtle\">{children ?? \"No results found\"}</p>\n      </div>\n    </Autocomplete.Empty>\n  );\n}\n\n/**\n * Loading component - Loading spinner state\n *\n * Centered loading spinner using Kumo Loader.\n */\nfunction Loading({ children }: CommandPaletteLoadingProps) {\n  return (\n    <div className=\"flex items-center justify-center p-8\">\n      {children ?? <Loader size={24} />}\n    </div>\n  );\n}\n\n/**\n * Footer component - Styled container for keyboard hints or other footer content.\n *\n * Children are required - this is just a styled container.\n * Consumers should provide their own keyboard hints with proper i18n.\n */\nfunction Footer({ children }: CommandPaletteFooterProps) {\n  return (\n    <div className=\"flex items-center justify-between rounded-b-lg bg-kumo-elevated px-4 py-3 text-xs text-kumo-subtle\">\n      {children}\n    </div>\n  );\n}\n\n/**\n * HighlightedText - Renders text with highlighted portions based on match indices.\n * Highlighted text is shown with a background color to indicate matches.\n */\nfunction HighlightedText({\n  text,\n  highlights,\n  className,\n}: {\n  text: string;\n  highlights?: HighlightRange[];\n  className?: string;\n}) {\n  if (!highlights || highlights.length === 0) {\n    return <span className={className}>{text}</span>;\n  }\n\n  // Sort highlights by start index and merge overlapping ranges\n  const sortedHighlights = [...highlights].sort((a, b) => a[0] - b[0]);\n  const mergedHighlights: HighlightRange[] = [];\n\n  for (const range of sortedHighlights) {\n    const last = mergedHighlights[mergedHighlights.length - 1];\n    if (last && range[0] <= last[1] + 1) {\n      // Merge overlapping or adjacent ranges\n      last[1] = Math.max(last[1], range[1]);\n    } else {\n      mergedHighlights.push([...range]);\n    }\n  }\n\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n\n  mergedHighlights.forEach((range, i) => {\n    const [start, end] = range;\n\n    // Add non-highlighted text before this match\n    if (start > lastIndex) {\n      parts.push(<span key={`text-${i}`}>{text.slice(lastIndex, start)}</span>);\n    }\n\n    // Add highlighted text (end index is inclusive)\n    parts.push(\n      <mark\n        key={`highlight-${i}`}\n        className=\"rounded-sm bg-kumo-warning/50 text-kumo-default\"\n      >\n        {text.slice(start, end + 1)}\n      </mark>,\n    );\n\n    lastIndex = end + 1;\n  });\n\n  // Add remaining non-highlighted text\n  if (lastIndex < text.length) {\n    parts.push(<span key=\"text-end\">{text.slice(lastIndex)}</span>);\n  }\n\n  return <span className={className}>{parts}</span>;\n}\n\n/**\n * ResultItem - Rich item component with breadcrumbs, highlights, icons, and external indicators.\n *\n * Use this for search result items that need breadcrumb navigation, text highlighting,\n * or external link indicators. For simple items, use Item instead.\n */\nfunction ResultItem<T>({\n  title,\n  breadcrumbs,\n  titleHighlights,\n  breadcrumbHighlights,\n  description,\n  icon,\n  value,\n  onClick,\n  showArrow = true,\n  external = false,\n  nonInteractive = false,\n}: CommandPaletteResultItemProps<T>) {\n  return (\n    <Autocomplete.Item\n      value={value}\n      onClick={nonInteractive ? undefined : (e: React.MouseEvent) => onClick(e)}\n      className={cn(\n        \"group flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left transition-colors\",\n        nonInteractive\n          ? \"cursor-default\"\n          : \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n      )}\n    >\n      {icon && (\n        <div className=\"flex flex-shrink-0 items-center text-kumo-subtle\">\n          {icon}\n        </div>\n      )}\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center gap-2 truncate\">\n          {breadcrumbs?.map((crumb, index) => (\n            <span key={index} className=\"flex items-center gap-2\">\n              <HighlightedText\n                text={crumb}\n                highlights={breadcrumbHighlights?.[index]}\n                className=\"text-base text-kumo-default\"\n              />\n              <CaretRightIcon\n                className=\"h-3 w-3 flex-shrink-0 text-kumo-subtle\"\n                weight=\"bold\"\n              />\n            </span>\n          ))}\n          <HighlightedText\n            text={title}\n            highlights={titleHighlights}\n            className=\"text-base text-kumo-default\"\n          />\n          {external && (\n            <ArrowSquareOutIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-kumo-subtle\" />\n          )}\n          {description && (\n            <>\n              <span className=\"text-kumo-subtle\">—</span>\n              <span className=\"truncate text-sm text-kumo-subtle\">\n                {description}\n              </span>\n            </>\n          )}\n        </div>\n      </div>\n      {showArrow && !external && !nonInteractive && (\n        <ArrowRightIcon className=\"h-4 w-4 flex-shrink-0 text-kumo-subtle opacity-0 transition-opacity group-data-[highlighted]:opacity-100\" />\n      )}\n    </Autocomplete.Item>\n  );\n}\n\n/**\n * Container component - Internal styled wrapper.\n */\nfunction Container({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex max-h-[60vh] flex-col overflow-hidden rounded-lg bg-kumo-elevated\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * Panel context for passing handlers from Panel to children\n */\ninterface PanelContextValue {\n  onInputKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nconst PanelContext = createContext<PanelContextValue>({});\n\n/**\n * Props for the Panel component\n */\ninterface PanelProps<TGroup, TItem = TGroup> {\n  /** Child components (Input, List, Footer, etc.) */\n  children: React.ReactNode;\n  /** Items for the autocomplete */\n  items: TGroup[];\n  /** Controlled input value */\n  value?: string;\n  /** Callback when input value changes */\n  onValueChange?: (value: string) => void;\n  /** Callback when an item is highlighted */\n  onItemHighlighted?: (\n    item: TGroup | undefined,\n    details: { reason: string; event: Event; index: number },\n  ) => void;\n  /** Convert item to string for accessibility */\n  itemToStringValue?: (item: TGroup) => string;\n  /** Custom filter function */\n  filter?: (item: TGroup, query: string) => boolean;\n  /** Whether the panel is active/open (for autocomplete state) */\n  open?: boolean;\n  /** Optional className for the container */\n  className?: string;\n  /**\n   * Callback when an item is selected via Cmd/Ctrl+Enter.\n   * Requires getSelectableItems to be provided.\n   */\n  onSelect?: (item: TItem, options: { newTab: boolean }) => void;\n  /**\n   * Function to get flat list of selectable items from groups.\n   * Required when items are grouped and onSelect is used.\n   */\n  getSelectableItems?: (items: TGroup[]) => TItem[];\n}\n\n/**\n * Panel component - Command palette without dialog wrapper.\n *\n * Use this when you need to render command palette content inside an existing dialog\n * (e.g., for drill-down navigation where the dialog stays open but content changes).\n *\n * Combines Container + Autocomplete functionality with a clean API.\n *\n * @example\n * ```tsx\n * <DialogRoot open={open} onOpenChange={setOpen}>\n *   <Dialog>\n *     <CommandPalette.Panel\n *       items={results}\n *       value={searchTerm}\n *       onValueChange={setSearchTerm}\n *       itemToStringValue={(group) => group.label}\n *     >\n *       <CommandPalette.Input placeholder=\"Search...\" />\n *       <CommandPalette.List>\n *         <CommandPalette.Results>\n *           {(group) => (\n *             <CommandPalette.Group items={group.items}>\n *               <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n *               <CommandPalette.Items>\n *                 {(item) => <CommandPalette.ResultItem ... />}\n *               </CommandPalette.Items>\n *             </CommandPalette.Group>\n *           )}\n *         </CommandPalette.Results>\n *         <CommandPalette.Empty>No results</CommandPalette.Empty>\n *       </CommandPalette.List>\n *       <CommandPalette.Footer>...</CommandPalette.Footer>\n *     </CommandPalette.Panel>\n *   </Dialog>\n * </DialogRoot>\n * ```\n */\nconst defaultFilter = () => true;\n\nfunction Panel<TGroup, TItem = TGroup>({\n  children,\n  items,\n  value,\n  onValueChange,\n  onItemHighlighted,\n  itemToStringValue,\n  filter = defaultFilter,\n  open = true,\n  className,\n  onSelect,\n  getSelectableItems,\n}: PanelProps<TGroup, TItem>) {\n  const highlightedIndexRef = useRef<number>(-1);\n\n  const handleItemHighlighted = useCallback(\n    (\n      item: TGroup | undefined,\n      details: { reason: string; event: Event; index: number },\n    ) => {\n      highlightedIndexRef.current = details.index;\n      onItemHighlighted?.(item, details);\n    },\n    [onItemHighlighted],\n  );\n\n  // Handle Cmd/Ctrl+Enter for new tab selection\n  const handleInputKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const isEnter = e.key === \"Enter\";\n      const withModifier = e.metaKey || e.ctrlKey;\n\n      if (isEnter && withModifier && onSelect && getSelectableItems) {\n        const selectableItems = getSelectableItems(items);\n        const highlightedItem = selectableItems[highlightedIndexRef.current];\n\n        if (highlightedItem !== undefined) {\n          e.preventDefault();\n          onSelect(highlightedItem, { newTab: true });\n        }\n      }\n    },\n    [items, onSelect, getSelectableItems],\n  );\n\n  return (\n    <Container className={className}>\n      <Autocomplete.Root\n        items={items}\n        value={value}\n        onValueChange={onValueChange}\n        onItemHighlighted={handleItemHighlighted}\n        itemToStringValue={itemToStringValue}\n        filter={filter}\n        autoHighlight=\"always\"\n        keepHighlight\n        open={open}\n      >\n        <PanelContext.Provider value={{ onInputKeyDown: handleInputKeyDown }}>\n          {children}\n        </PanelContext.Provider>\n      </Autocomplete.Root>\n    </Container>\n  );\n}\n\n/**\n * PanelInput component - Input that works inside Panel.\n *\n * Similar to Input but designed for use with Panel instead of Root.\n * Automatically wires up Cmd/Ctrl+Enter handling from Panel.\n */\nfunction PanelInput({\n  autoFocus = true,\n  placeholder,\n  className,\n  onKeyDown: onKeyDownProp,\n  leading,\n  trailing,\n  ...props\n}: CommandPaletteInputProps) {\n  const { onInputKeyDown } = useContext(PanelContext);\n  const { onClose } = useContext(DialogContext);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      // Let consumer handle first (e.g., for custom Escape/Backspace behavior)\n      onKeyDownProp?.(e);\n      if (e.defaultPrevented) return;\n\n      // Handle Escape to close the dialog\n      if (e.key === \"Escape\" && onClose) {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n      onInputKeyDown?.(e);\n    },\n    [onInputKeyDown, onKeyDownProp, onClose],\n  );\n\n  return (\n    <InputHeader leading={leading} trailing={trailing}>\n      <Autocomplete.Input\n        placeholder={placeholder}\n        className={cn(\n          \"flex-1 border-none bg-transparent text-base kumo-input-placeholder\",\n          \"outline-none\",\n          className,\n        )}\n        onKeyDown={handleKeyDown}\n        // oxlint-disable-next-line no-autofocus -- Command palette input should autofocus for keyboard-driven UX\n        autoFocus={autoFocus}\n        {...props}\n      />\n    </InputHeader>\n  );\n}\n\n/**\n * Render prop iterators - wrap base-ui primitives with cleaner names.\n */\n\n/**\n * Results component - Render prop iterator for groups.\n *\n * Wraps Autocomplete.List with default spacing between groups.\n */\nfunction Results({\n  children,\n  className,\n}: React.ComponentProps<typeof Autocomplete.List> & { className?: string }) {\n  return (\n    <Autocomplete.List className={cn(\"space-y-3\", className)}>\n      {children}\n    </Autocomplete.List>\n  );\n}\n\nconst Items = Autocomplete.Collection;\n\n/** CommandPalette variant definitions (no user-facing variants; structure reserved for future use). */\nexport const KUMO_COMMAND_PALETTE_VARIANTS = {} as const;\n\nexport const KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS = {} as const;\n\n/**\n * CommandPalette — accessible command palette / spotlight search overlay.\n *\n * Compound component: `CommandPalette.Root` (or `.Dialog` + `.Panel`),\n * `.Input`, `.List`, `.Results`, `.Items`, `.Group`, `.GroupLabel`,\n * `.Item`, `.ResultItem`, `.HighlightedText`, `.Empty`, `.Loading`, `.Footer`.\n *\n * Built on `@base-ui/react/autocomplete` + `@base-ui/react/dialog`.\n *\n * @example\n * ```tsx\n * <CommandPalette.Root\n *   open={open}\n *   onOpenChange={setOpen}\n *   items={results}\n *   value={query}\n *   onValueChange={setQuery}\n *   itemToStringValue={(g) => g.label}\n *   onSelect={(item, { newTab }) => navigate(item, newTab)}\n *   getSelectableItems={(groups) => groups.flatMap((g) => g.items)}\n * >\n *   <CommandPalette.Input placeholder=\"Search…\" />\n *   <CommandPalette.List>\n *     <CommandPalette.Results>\n *       {(group) => (\n *         <CommandPalette.Group items={group.items}>\n *           <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n *           <CommandPalette.Items>\n *             {(item) => (\n *               <CommandPalette.ResultItem title={item.title} value={item} onClick={…} />\n *             )}\n *           </CommandPalette.Items>\n *         </CommandPalette.Group>\n *       )}\n *     </CommandPalette.Results>\n *     <CommandPalette.Empty>No results found</CommandPalette.Empty>\n *   </CommandPalette.List>\n *   <CommandPalette.Footer>…keyboard hints…</CommandPalette.Footer>\n * </CommandPalette.Root>\n * ```\n */\nexport const CommandPalette = {\n  /** Modal dialog wrapper - use with Panel for content that can swap */\n  Dialog,\n  /** Dialog + Panel combined - for simple single-view command palettes */\n  Root,\n  /** Autocomplete panel without dialog - use inside Dialog for swappable content */\n  Panel,\n  /** Input for use inside Panel */\n  Input: PanelInput,\n  /** Scrollable results container */\n  List,\n  /** Category grouping */\n  Group,\n  /** Section header text */\n  GroupLabel,\n  /** Basic item */\n  Item,\n  /** Rich item with breadcrumbs, highlights, icons */\n  ResultItem,\n  /** Text with highlighted portions */\n  HighlightedText,\n  /** Empty state */\n  Empty,\n  /** Loading state */\n  Loading,\n  /** Footer for keyboard hints */\n  Footer,\n  /** Render prop iterator for groups */\n  Results,\n  /** Render prop iterator for items within a group */\n  Items,\n};\n"],"names":["DialogContext","createContext","Dialog","open","onOpenChange","onBackdropClick","children","containerProp","contextContainer","usePortalContainer","container","handleBackdropClick","e","handleClose","useCallback","jsx","DialogBase.Root","jsxs","DialogBase.Portal","DialogBase.Backdrop","LayerCard","DialogBase.Popup","cn","Root","items","value","onValueChange","onItemHighlighted","itemToStringValue","filter","onSelect","getSelectableItems","Panel","InputHeader","leading","trailing","MagnifyingGlassIcon","List","forwardRef","className","ref","Group","props","Autocomplete.Group","GroupLabel","Autocomplete.GroupLabel","Item","disabled","onClick","Autocomplete.Item","Empty","Autocomplete.Empty","Loading","Loader","Footer","HighlightedText","text","highlights","sortedHighlights","a","b","mergedHighlights","range","last","parts","lastIndex","i","start","end","ResultItem","title","breadcrumbs","titleHighlights","breadcrumbHighlights","description","icon","showArrow","external","nonInteractive","crumb","index","CaretRightIcon","ArrowSquareOutIcon","Fragment","ArrowRightIcon","Container","PanelContext","defaultFilter","highlightedIndexRef","useRef","handleItemHighlighted","item","details","handleInputKeyDown","isEnter","withModifier","highlightedItem","Autocomplete.Root","PanelInput","autoFocus","placeholder","onKeyDownProp","onInputKeyDown","useContext","onClose","handleKeyDown","Autocomplete.Input","Results","Autocomplete.List","Items","Autocomplete.Collection","KUMO_COMMAND_PALETTE_VARIANTS","KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS","CommandPalette"],"mappings":"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"}

package/dist/chunks/layer-card-ikm31xemd70w3lru.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"layer-card-ikm31xemd70w3lru.js","sources":["../../src/components/layer-card/layer-card.tsx"],"sourcesContent":["import {\n  Children,\n  Fragment,\n  forwardRef,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"../../utils/cn\";\n\nconst LAYER_CARD_SURFACE_CLASSES =\n  \"overflow-hidden rounded-lg bg-kumo-base shadow-xs ring ring-kumo-line\";\nconst LAYER_CARD_LAYERED_ROOT_CLASSES =\n  \"flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-hairline\";\nconst LAYER_CARD_SECONDARY_CLASSES =\n  \"-my-2 flex items-center gap-2 bg-kumo-elevated p-4 text-base font-medium text-kumo-subtle\";\nconst LAYER_CARD_PRIMARY_CLASSES =\n  \"relative flex flex-col gap-2 overflow-hidden rounded-lg bg-kumo-base p-4 pr-3 text-inherit no-underline ring ring-kumo-fill\";\n\n/** LayerCard variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LAYER_CARD_VARIANTS = {\n  // LayerCard currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LAYER_CARD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LAYER_CARD_VARIANTS\nexport interface KumoLayerCardVariantsProps {}\n\nexport function layerCardVariants(_props: KumoLayerCardVariantsProps = {}) {\n  return cn(LAYER_CARD_SURFACE_CLASSES);\n}\n\nfunction hasLayerCardSections(children: ReactNode): boolean {\n  return Children.toArray(children).some((child): boolean => {\n    if (!isValidElement(child)) {\n      return false;\n    }\n\n    if (child.type === LayerCardPrimary || child.type === LayerCardSecondary) {\n      return true;\n    }\n\n    if (child.type === Fragment) {\n      const fragmentChild = child as ReactElement<{ children?: ReactNode }>;\n      return hasLayerCardSections(fragmentChild.props.children);\n    }\n\n    return false;\n  });\n}\n\n/**\n * LayerCard component props.\n *\n * @example\n * ```tsx\n * <LayerCard className=\"p-4\">\n *   Get started with Kumo\n * </LayerCard>\n *\n * <LayerCard>\n *   <LayerCard.Secondary>Next Steps</LayerCard.Secondary>\n *   <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n * </LayerCard>\n * ```\n */\nexport type LayerCardProps = useRender.ComponentProps<\"div\"> &\n  KumoLayerCardVariantsProps;\n\nexport type LayerCardSectionProps = PropsWithChildren<{\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}>;\n\n/**\n * Card container for both simple surfaces and layered layouts.\n *\n * Render children directly for a single-surface card, or use\n * `LayerCard.Secondary` and `LayerCard.Primary` for the layered card treatment.\n *\n * @example\n * ```tsx\n * <LayerCard className=\"rounded-lg p-4\">Card content</LayerCard>\n * ```\n *\n * @example\n * ```tsx\n * <LayerCard>\n *   <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n *   <LayerCard.Primary>Quick start guide</LayerCard.Primary>\n * </LayerCard>\n * ```\n */\nconst LayerCardRoot = forwardRef<HTMLDivElement, LayerCardProps>(function LayerCard(\n  { children, className, render, ...props },\n  ref,\n) {\n  const hasStructuredLayers = hasLayerCardSections(children);\n\n  const defaultProps: useRender.ElementProps<\"div\"> = {\n    className: cn(\n      hasStructuredLayers ? LAYER_CARD_LAYERED_ROOT_CLASSES : layerCardVariants(),\n      className,\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    ref,\n    props: mergeProps<\"div\">(defaultProps, props, { children }),\n  });\n});\n\nfunction LayerCardSecondary({\n  children,\n  className,\n}: LayerCardSectionProps) {\n  return <div className={cn(LAYER_CARD_SECONDARY_CLASSES, className)}>{children}</div>;\n}\n\nfunction LayerCardPrimary({ children, className }: LayerCardSectionProps) {\n  return <div className={cn(LAYER_CARD_PRIMARY_CLASSES, className)}>{children}</div>;\n}\n\nLayerCardRoot.displayName = \"LayerCard\";\nLayerCardSecondary.displayName = \"LayerCard.Secondary\";\nLayerCardPrimary.displayName = \"LayerCard.Primary\";\n\ntype LayerCardComponent = typeof LayerCardRoot & {\n  Primary: typeof LayerCardPrimary;\n  Secondary: typeof LayerCardSecondary;\n};\n\nconst LayerCard = Object.assign(LayerCardRoot, {\n  Primary: LayerCardPrimary,\n  Secondary: LayerCardSecondary,\n}) as LayerCardComponent;\n\nexport { LayerCard };\n"],"names":["LAYER_CARD_SURFACE_CLASSES","LAYER_CARD_LAYERED_ROOT_CLASSES","LAYER_CARD_SECONDARY_CLASSES","LAYER_CARD_PRIMARY_CLASSES","layerCardVariants","_props","cn","hasLayerCardSections","children","Children","child","isValidElement","LayerCardPrimary","LayerCardSecondary","Fragment","LayerCardRoot","forwardRef","className","render","props","ref","hasStructuredLayers","defaultProps","useRender","mergeProps","LayerCard"],"mappings":";;;;;AAaA,MAAMA,IACJ,yEACIC,IACJ,sGACIC,IACJ,6FACIC,IACJ;AAYK,SAASC,EAAkBC,IAAqC,IAAI;AACzE,SAAOC,EAAGN,CAA0B;AACtC;AAEA,SAASO,EAAqBC,GAA8B;AAC1D,SAAOC,EAAS,QAAQD,CAAQ,EAAE,KAAK,CAACE,MACjCC,EAAeD,CAAK,IAIrBA,EAAM,SAASE,KAAoBF,EAAM,SAASG,IAC7C,KAGLH,EAAM,SAASI,IAEVP,EADeG,EACoB,MAAM,QAAQ,IAGnD,KAZE,EAaV;AACH;AA4CA,MAAMK,IAAgBC,EAA2C,SAC/D,EAAE,UAAAR,GAAU,WAAAS,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAClCC,GACA;AACA,QAAMC,IAAsBd,EAAqBC,CAAQ,GAEnDc,IAA8C;AAAA,IAClD,WAAWhB;AAAA,MACTe,IAAsBpB,IAAkCG,EAAA;AAAA,MACxDa;AAAA,IAAA;AAAA,EACF;AAGF,SAAOM,EAAU;AAAA,IACf,gBAAgB;AAAA,IAChB,QAAAL;AAAA,IACA,KAAAE;AAAA,IACA,OAAOI,EAAkBF,GAAcH,GAAO,EAAE,UAAAX,GAAU;AAAA,EAAA,CAC3D;AACH,CAAC;AAED,SAASK,EAAmB;AAAA,EAC1B,UAAAL;AAAA,EACA,WAAAS;AACF,GAA0B;AACxB,2BAAQ,OAAA,EAAI,WAAWX,EAAGJ,GAA8Be,CAAS,GAAI,UAAAT,GAAS;AAChF;AAEA,SAASI,EAAiB,EAAE,UAAAJ,GAAU,WAAAS,KAAoC;AACxE,2BAAQ,OAAA,EAAI,WAAWX,EAAGH,GAA4Bc,CAAS,GAAI,UAAAT,GAAS;AAC9E;AAEAO,EAAc,cAAc;AAC5BF,EAAmB,cAAc;AACjCD,EAAiB,cAAc;AAO/B,MAAMa,IAAY,OAAO,OAAOV,GAAe;AAAA,EAC7C,SAASH;AAAA,EACT,WAAWC;AACb,CAAC;"}