@ktnpm_devops/react-component 0.3.0 → 0.4.0

package/dist/index16.js.map

@@ -1 +1 @@
-{"version":3,"file":"index16.js","sources":["../src/composites/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useCallback, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { CONTEXT_MENU_MARGIN } from '../../constants';\nimport clsx from 'clsx';\nimport styles from './ContextMenu.module.css';\n\nexport interface ContextMenuItem {\n  label: string;\n  icon?: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface ContextMenuProps {\n  /** Horizontal position (px from left). */\n  x: number;\n  /** Vertical position (px from top). */\n  y: number;\n  /** Menu items to render. */\n  items: ContextMenuItem[];\n  /** Called when the menu should close. */\n  onClose: () => void;\n}\n\nexport const ContextMenu = ({ x, y, items, onClose }: ContextMenuProps) => {\n  const menuRef = useRef<HTMLDivElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n\n  useEscapeKey(onClose);\n\n  const adjustPosition = useCallback(() => {\n    if (!menuRef.current) return;\n    const rect = menuRef.current.getBoundingClientRect();\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    let ax = x;\n    let ay = y;\n    if (x + rect.width > vw - CONTEXT_MENU_MARGIN) ax = vw - rect.width - CONTEXT_MENU_MARGIN;\n    if (y + rect.height > vh - CONTEXT_MENU_MARGIN) ay = vh - rect.height - CONTEXT_MENU_MARGIN;\n    menuRef.current.style.left = `${ax}px`;\n    menuRef.current.style.top = `${ay}px`;\n  }, [x, y]);\n\n  useEffect(() => { adjustPosition(); }, [adjustPosition]);\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();\n    };\n    const handleScroll = () => onClose();\n    document.addEventListener('mousedown', handleClick);\n    window.addEventListener('scroll', handleScroll, true);\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      window.removeEventListener('scroll', handleScroll, true);\n    };\n  }, [onClose]);\n\n  const handleItemClick = (item: ContextMenuItem) => {\n    if (item.disabled) return;\n    item.onClick();\n    onClose();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.max(prev - 1, 0));\n    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < items.length) {\n      e.preventDefault();\n      handleItemClick(items[focusedIndex]);\n    }\n  };\n\n  if (typeof document === 'undefined') return null;\n\n  return createPortal(\n    <div\n      ref={menuRef}\n      className={styles.root}\n      style={{ left: x, top: y }}\n      role=\"menu\"\n      aria-label=\"Context menu\"\n      onKeyDown={handleKeyDown}\n    >\n      {items.map((item, i) => (\n        <button\n          key={item.label}\n          type=\"button\"\n          className={clsx(styles.item, {\n            [styles.disabled]: item.disabled,\n            [styles.focused]: i === focusedIndex,\n          })}\n          onClick={() => handleItemClick(item)}\n          role=\"menuitem\"\n          aria-disabled={item.disabled || undefined}\n          tabIndex={i === focusedIndex ? 0 : -1}\n        >\n          {item.icon && <span className={styles.icon}>{item.icon}</span>}\n          <span>{item.label}</span>\n        </button>\n      ))}\n    </div>,\n    document.body,\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index16.js","sources":["../src/primitives/Col/Col.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ColProps } from './Col.types';\nimport styles from './Col.module.css';\n\nconst GRID_COLUMNS = 12;\n\nfunction toFlexValue(value: boolean | number | undefined): number | undefined {\n  if (value === true) return 1;\n  if (typeof value === 'number') return value;\n  return undefined;\n}\n\nexport const Col = forwardRef<HTMLDivElement, ColProps>(\n  ({ span, offset, grow, shrink, basis, className, style, children, ...props }, ref) => {\n    const inlineStyle: React.CSSProperties = { ...style };\n\n    if (span !== undefined) {\n      inlineStyle.width = `${(span / GRID_COLUMNS) * 100}%`;\n    }\n\n    if (offset !== undefined) {\n      inlineStyle.marginLeft = `${(offset / GRID_COLUMNS) * 100}%`;\n    }\n\n    const growValue = toFlexValue(grow);\n    if (growValue !== undefined) {\n      inlineStyle.flexGrow = growValue;\n    }\n\n    const shrinkValue = toFlexValue(shrink);\n    if (shrinkValue !== undefined) {\n      inlineStyle.flexShrink = shrinkValue;\n    }\n\n    if (basis !== undefined) {\n      inlineStyle.flexBasis = basis;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.root, className)}\n        style={inlineStyle}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nCol.displayName = 'Col';\n"],"names":[],"mappings":";;;;AAKA,MAAM,eAAe;AAErB,SAAS,YAAY,OAAyD;AAC5E,MAAI,UAAU,KAAM,QAAO;AAC3B,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,SAAO;AACT;AAEO,MAAM,MAAM;AAAA,EACjB,CAAC,EAAE,MAAM,QAAQ,MAAM,QAAQ,OAAO,WAAW,OAAO,UAAU,GAAG,MAAA,GAAS,QAAQ;AACpF,UAAM,cAAmC,EAAE,GAAG,MAAA;AAE9C,QAAI,SAAS,QAAW;AACtB,kBAAY,QAAQ,GAAI,OAAO,eAAgB,GAAG;AAAA,IACpD;AAEA,QAAI,WAAW,QAAW;AACxB,kBAAY,aAAa,GAAI,SAAS,eAAgB,GAAG;AAAA,IAC3D;AAEA,UAAM,YAAY,YAAY,IAAI;AAClC,QAAI,cAAc,QAAW;AAC3B,kBAAY,WAAW;AAAA,IACzB;AAEA,UAAM,cAAc,YAAY,MAAM;AACtC,QAAI,gBAAgB,QAAW;AAC7B,kBAAY,aAAa;AAAA,IAC3B;AAEA,QAAI,UAAU,QAAW;AACvB,kBAAY,YAAY;AAAA,IAC1B;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,IAAI,cAAc;"}

package/dist/index17.cjs

@@ -2,161 +2,93 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const ReactECharts = require("echarts-for-react");
-const clsx = require("./index36.cjs");
-const constants = require("./index39.cjs");
-const CounterTimeseriesChart_module = require("./index57.cjs");
-const DEFAULT_TIME_RANGE_OPTIONS = ["auto", "1h", "6h", "24h", "7d", "30d"];
-const buildMarkAreas = (annotations) => annotations.filter((a) => a.end).map((a) => [
-  { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? "rgba(255,107,90,0.12)" } },
-  { xAxis: a.end }
-]);
-const buildMarkLines = (annotations) => annotations.filter((a) => !a.end).map((a) => ({
-  name: a.label,
-  xAxis: a.start,
-  label: { formatter: a.label, position: "insideEndTop" },
-  lineStyle: { color: a.color ?? constants.CHART_COLORS[0], type: "dashed" }
-}));
-const extractSeries = (data, field) => {
-  const values = data.map((d) => d[field]);
-  return values.every((v) => v == null) ? void 0 : values;
-};
-const buildOption = (data, annotations, showConfidenceBands, showP50, showLegend) => {
-  const timestamps = data.map((d) => d.ts);
-  const values = data.map((d) => d.value);
-  const p05 = showConfidenceBands ? extractSeries(data, "p05") : void 0;
-  const p95 = showConfidenceBands ? extractSeries(data, "p95") : void 0;
-  const p50 = showP50 ? extractSeries(data, "p50") : void 0;
-  const upperThreshold = extractSeries(data, "upperThreshold");
-  const lowerThreshold = extractSeries(data, "lowerThreshold");
-  const markArea = annotations.length > 0 ? { silent: true, data: buildMarkAreas(annotations) } : void 0;
-  const markLine = annotations.length > 0 ? { silent: true, symbol: "none", data: buildMarkLines(annotations) } : void 0;
-  const series = [];
-  series.push({
-    name: "Value",
-    type: "line",
-    data: values,
-    symbol: "none",
-    lineStyle: { width: 2, color: constants.CHART_COLORS[0] },
-    itemStyle: { color: constants.CHART_COLORS[0] },
-    markArea,
-    markLine
-  });
-  if (p50) {
-    series.push({
-      name: "p50",
-      type: "line",
-      data: p50,
-      symbol: "none",
-      lineStyle: { width: 1.5, type: "dashed", color: constants.CHART_COLORS[1] },
-      itemStyle: { color: constants.CHART_COLORS[1] }
-    });
-  }
-  if (p05 && p95) {
-    series.push({
-      name: "p05",
-      type: "line",
-      data: p05,
-      symbol: "none",
-      lineStyle: { width: 0 },
-      stack: "confidence",
-      areaStyle: { opacity: 0 }
-    });
-    series.push({
-      name: "p95",
-      type: "line",
-      data: p95.map((v, i) => {
-        const low = p05[i];
-        if (v == null || low == null) return null;
-        return v - low;
-      }),
-      symbol: "none",
-      lineStyle: { width: 0 },
-      stack: "confidence",
-      areaStyle: { opacity: 0.15, color: constants.CHART_COLORS[1] }
-    });
-  }
-  if (upperThreshold) {
-    series.push({
-      name: "Upper threshold",
-      type: "line",
-      data: upperThreshold,
-      symbol: "none",
-      lineStyle: { width: 1, type: "dashed", color: constants.CHART_COLORS[4] },
-      itemStyle: { color: constants.CHART_COLORS[4] }
-    });
-  }
-  if (lowerThreshold) {
-    series.push({
-      name: "Lower threshold",
-      type: "line",
-      data: lowerThreshold,
-      symbol: "none",
-      lineStyle: { width: 1, type: "dashed", color: constants.CHART_COLORS[5] },
-      itemStyle: { color: constants.CHART_COLORS[5] }
-    });
-  }
-  return {
-    tooltip: { trigger: "axis" },
-    legend: showLegend ? { bottom: 0 } : void 0,
-    grid: { left: "3%", right: "4%", bottom: showLegend ? "12%" : "3%", containLabel: true },
-    xAxis: { type: "category", data: timestamps, boundaryGap: false },
-    yAxis: { type: "value" },
-    series
+const reactDom = require("react-dom");
+const useEscapeKey = require("./index5.cjs");
+const constants = require("./index48.cjs");
+const clsx = require("./index38.cjs");
+const ContextMenu_module = require("./index52.cjs");
+const ContextMenu = ({ x, y, items, onClose }) => {
+  const menuRef = react.useRef(null);
+  const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  useEscapeKey.useEscapeKey(onClose);
+  const adjustPosition = react.useCallback(() => {
+    if (!menuRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let ax = x;
+    let ay = y;
+    if (x + rect.width > vw - constants.CONTEXT_MENU_MARGIN) ax = vw - rect.width - constants.CONTEXT_MENU_MARGIN;
+    if (y + rect.height > vh - constants.CONTEXT_MENU_MARGIN) ay = vh - rect.height - constants.CONTEXT_MENU_MARGIN;
+    menuRef.current.style.left = `${ax}px`;
+    menuRef.current.style.top = `${ay}px`;
+  }, [x, y]);
+  react.useEffect(() => {
+    adjustPosition();
+  }, [adjustPosition]);
+  react.useEffect(() => {
+    const handleClick = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
+    };
+    const handleScroll = () => onClose();
+    document.addEventListener("mousedown", handleClick);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [onClose]);
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    item.onClick();
+    onClose();
   };
-};
-const CounterTimeseriesChart = ({
-  data,
-  title,
-  isLoading = false,
-  error = null,
-  timeRange = "auto",
-  timeRangeOptions,
-  onTimeRangeChange,
-  annotations = [],
-  showConfidenceBands = true,
-  showP50 = true,
-  showLegend = false,
-  onChartReady,
-  className
-}) => {
-  const rangeOptions = timeRangeOptions ?? [...DEFAULT_TIME_RANGE_OPTIONS];
-  const option = react.useMemo(
-    () => buildOption(data, annotations, showConfidenceBands, showP50, showLegend),
-    [data, annotations, showConfidenceBands, showP50, showLegend]
-  );
-  const showHeader = title || onTimeRangeChange;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(CounterTimeseriesChart_module.default.root, className), children: [
-    showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CounterTimeseriesChart_module.default.header, children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: CounterTimeseriesChart_module.default.title, children: title }),
-      onTimeRangeChange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.timeRangeGroup, role: "group", "aria-label": "Time range presets", children: rangeOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: clsx.clsx(CounterTimeseriesChart_module.default.timeRangeButton, {
-            [CounterTimeseriesChart_module.default.timeRangeButtonActive]: opt === timeRange
-          }),
-          onClick: () => onTimeRangeChange(opt),
-          "aria-pressed": opt === timeRange,
-          children: opt
-        },
-        opt
-      )) })
-    ] }),
-    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.loading, children: "Loading chart data..." }),
-    !isLoading && error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.error, children: error }),
-    !isLoading && !error && data.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.empty, children: "No data available" }),
-    !isLoading && !error && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ReactECharts,
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < items.length) {
+      e.preventDefault();
+      handleItemClick(items[focusedIndex]);
+    }
+  };
+  if (typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        option,
-        style: { height: "100%", width: "100%" },
-        onChartReady,
-        notMerge: true
+        ref: menuRef,
+        className: ContextMenu_module.default.root,
+        style: { left: x, top: y },
+        role: "menu",
+        "aria-label": "Context menu",
+        onKeyDown: handleKeyDown,
+        children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: clsx.clsx(ContextMenu_module.default.item, {
+              [ContextMenu_module.default.disabled]: item.disabled,
+              [ContextMenu_module.default.focused]: i === focusedIndex
+            }),
+            onClick: () => handleItemClick(item),
+            role: "menuitem",
+            "aria-disabled": item.disabled || void 0,
+            tabIndex: i === focusedIndex ? 0 : -1,
+            children: [
+              item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ContextMenu_module.default.icon, children: item.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+            ]
+          },
+          item.label
+        ))
       }
-    ) })
-  ] });
+    ),
+    document.body
+  );
 };
-CounterTimeseriesChart.displayName = "CounterTimeseriesChart";
-exports.CounterTimeseriesChart = CounterTimeseriesChart;
+exports.ContextMenu = ContextMenu;
 //# sourceMappingURL=index17.cjs.map

package/dist/index17.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index17.cjs","sources":["../src/charts/CounterTimeseriesChart/CounterTimeseriesChart.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { CounterTimeseriesChartProps } from './CounterTimeseriesChart.types';\nimport type { CounterTimeseriesPoint, ChartAnnotation } from '../../types/chart.types';\nimport { CHART_COLORS } from '../../constants';\nimport styles from './CounterTimeseriesChart.module.css';\n\nconst DEFAULT_TIME_RANGE_OPTIONS = ['auto', '1h', '6h', '24h', '7d', '30d'] as const;\n\n/** Build markArea data from range annotations (those with an end timestamp). */\nconst buildMarkAreas = (annotations: ChartAnnotation[]) =>\n  annotations\n    .filter((a) => a.end)\n    .map((a) => [\n      { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? 'rgba(255,107,90,0.12)' } },\n      { xAxis: a.end },\n    ]);\n\n/** Build markLine data from point annotations (those without an end timestamp). */\nconst buildMarkLines = (annotations: ChartAnnotation[]) =>\n  annotations\n    .filter((a) => !a.end)\n    .map((a) => ({\n      name: a.label,\n      xAxis: a.start,\n      label: { formatter: a.label, position: 'insideEndTop' as const },\n      lineStyle: { color: a.color ?? CHART_COLORS[0], type: 'dashed' as const },\n    }));\n\n/** Extract a numeric array for a given field, returning undefined when all values are null. */\nconst extractSeries = (data: CounterTimeseriesPoint[], field: keyof CounterTimeseriesPoint) => {\n  const values = data.map((d) => d[field] as number | null | undefined);\n  return values.every((v) => v == null) ? undefined : values;\n};\n\nconst buildOption = (\n  data: CounterTimeseriesPoint[],\n  annotations: ChartAnnotation[],\n  showConfidenceBands: boolean,\n  showP50: boolean,\n  showLegend: boolean,\n) => {\n  const timestamps = data.map((d) => d.ts);\n  const values = data.map((d) => d.value);\n\n  const p05 = showConfidenceBands ? extractSeries(data, 'p05') : undefined;\n  const p95 = showConfidenceBands ? extractSeries(data, 'p95') : undefined;\n  const p50 = showP50 ? extractSeries(data, 'p50') : undefined;\n\n  const upperThreshold = extractSeries(data, 'upperThreshold');\n  const lowerThreshold = extractSeries(data, 'lowerThreshold');\n\n  const markArea = annotations.length > 0 ? { silent: true, data: buildMarkAreas(annotations) } : undefined;\n  const markLine = annotations.length > 0 ? { silent: true, symbol: 'none', data: buildMarkLines(annotations) } : undefined;\n\n  const series: unknown[] = [];\n\n  // Main value line\n  series.push({\n    name: 'Value',\n    type: 'line',\n    data: values,\n    symbol: 'none',\n    lineStyle: { width: 2, color: CHART_COLORS[0] },\n    itemStyle: { color: CHART_COLORS[0] },\n    markArea,\n    markLine,\n  });\n\n  // p50 dashed line\n  if (p50) {\n    series.push({\n      name: 'p50',\n      type: 'line',\n      data: p50,\n      symbol: 'none',\n      lineStyle: { width: 1.5, type: 'dashed', color: CHART_COLORS[1] },\n      itemStyle: { color: CHART_COLORS[1] },\n    });\n  }\n\n  // Confidence band (p05–p95 area between)\n  if (p05 && p95) {\n    // Lower bound (invisible line)\n    series.push({\n      name: 'p05',\n      type: 'line',\n      data: p05,\n      symbol: 'none',\n      lineStyle: { width: 0 },\n      stack: 'confidence',\n      areaStyle: { opacity: 0 },\n    });\n    // Upper bound fills from p05 to p95\n    series.push({\n      name: 'p95',\n      type: 'line',\n      data: p95.map((v, i) => {\n        const low = p05[i];\n        if (v == null || low == null) return null;\n        return v - low;\n      }),\n      symbol: 'none',\n      lineStyle: { width: 0 },\n      stack: 'confidence',\n      areaStyle: { opacity: 0.15, color: CHART_COLORS[1] },\n    });\n  }\n\n  // Threshold lines\n  if (upperThreshold) {\n    series.push({\n      name: 'Upper threshold',\n      type: 'line',\n      data: upperThreshold,\n      symbol: 'none',\n      lineStyle: { width: 1, type: 'dashed', color: CHART_COLORS[4] },\n      itemStyle: { color: CHART_COLORS[4] },\n    });\n  }\n\n  if (lowerThreshold) {\n    series.push({\n      name: 'Lower threshold',\n      type: 'line',\n      data: lowerThreshold,\n      symbol: 'none',\n      lineStyle: { width: 1, type: 'dashed', color: CHART_COLORS[5] },\n      itemStyle: { color: CHART_COLORS[5] },\n    });\n  }\n\n  return {\n    tooltip: { trigger: 'axis' },\n    legend: showLegend ? { bottom: 0 } : undefined,\n    grid: { left: '3%', right: '4%', bottom: showLegend ? '12%' : '3%', containLabel: true },\n    xAxis: { type: 'category', data: timestamps, boundaryGap: false },\n    yAxis: { type: 'value' },\n    series,\n  };\n};\n\nexport const CounterTimeseriesChart = ({\n  data,\n  title,\n  isLoading = false,\n  error = null,\n  timeRange = 'auto',\n  timeRangeOptions,\n  onTimeRangeChange,\n  annotations = [],\n  showConfidenceBands = true,\n  showP50 = true,\n  showLegend = false,\n  onChartReady,\n  className,\n}: CounterTimeseriesChartProps) => {\n  const rangeOptions = timeRangeOptions ?? [...DEFAULT_TIME_RANGE_OPTIONS];\n\n  const option = useMemo(\n    () => buildOption(data, annotations, showConfidenceBands, showP50, showLegend),\n    [data, annotations, showConfidenceBands, showP50, showLegend],\n  );\n\n  const showHeader = title || onTimeRangeChange;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      {showHeader && (\n        <div className={styles.header}>\n          {title && <h3 className={styles.title}>{title}</h3>}\n          {onTimeRangeChange && (\n            <div className={styles.timeRangeGroup} role=\"group\" aria-label=\"Time range presets\">\n              {rangeOptions.map((opt) => (\n                <button\n                  key={opt}\n                  type=\"button\"\n                  className={clsx(styles.timeRangeButton, {\n                    [styles.timeRangeButtonActive]: opt === timeRange,\n                  })}\n                  onClick={() => onTimeRangeChange(opt)}\n                  aria-pressed={opt === timeRange}\n                >\n                  {opt}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n      {!isLoading && error && <div className={styles.error}>{error}</div>}\n\n      {!isLoading && !error && data.length === 0 && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {!isLoading && !error && data.length > 0 && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', width: '100%' }}\n            onChartReady={onChartReady}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nCounterTimeseriesChart.displayName = 'CounterTimeseriesChart';\n"],"names":["CHART_COLORS","useMemo","clsx","styles","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"index17.cjs","sources":["../src/composites/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useCallback, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { CONTEXT_MENU_MARGIN } from '../../constants';\nimport clsx from 'clsx';\nimport styles from './ContextMenu.module.css';\n\nexport interface ContextMenuItem {\n  label: string;\n  icon?: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface ContextMenuProps {\n  /** Horizontal position (px from left). */\n  x: number;\n  /** Vertical position (px from top). */\n  y: number;\n  /** Menu items to render. */\n  items: ContextMenuItem[];\n  /** Called when the menu should close. */\n  onClose: () => void;\n}\n\nexport const ContextMenu = ({ x, y, items, onClose }: ContextMenuProps) => {\n  const menuRef = useRef<HTMLDivElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n\n  useEscapeKey(onClose);\n\n  const adjustPosition = useCallback(() => {\n    if (!menuRef.current) return;\n    const rect = menuRef.current.getBoundingClientRect();\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    let ax = x;\n    let ay = y;\n    if (x + rect.width > vw - CONTEXT_MENU_MARGIN) ax = vw - rect.width - CONTEXT_MENU_MARGIN;\n    if (y + rect.height > vh - CONTEXT_MENU_MARGIN) ay = vh - rect.height - CONTEXT_MENU_MARGIN;\n    menuRef.current.style.left = `${ax}px`;\n    menuRef.current.style.top = `${ay}px`;\n  }, [x, y]);\n\n  useEffect(() => { adjustPosition(); }, [adjustPosition]);\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();\n    };\n    const handleScroll = () => onClose();\n    document.addEventListener('mousedown', handleClick);\n    window.addEventListener('scroll', handleScroll, true);\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      window.removeEventListener('scroll', handleScroll, true);\n    };\n  }, [onClose]);\n\n  const handleItemClick = (item: ContextMenuItem) => {\n    if (item.disabled) return;\n    item.onClick();\n    onClose();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.max(prev - 1, 0));\n    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < items.length) {\n      e.preventDefault();\n      handleItemClick(items[focusedIndex]);\n    }\n  };\n\n  if (typeof document === 'undefined') return null;\n\n  return createPortal(\n    <div\n      ref={menuRef}\n      className={styles.root}\n      style={{ left: x, top: y }}\n      role=\"menu\"\n      aria-label=\"Context menu\"\n      onKeyDown={handleKeyDown}\n    >\n      {items.map((item, i) => (\n        <button\n          key={item.label}\n          type=\"button\"\n          className={clsx(styles.item, {\n            [styles.disabled]: item.disabled,\n            [styles.focused]: i === focusedIndex,\n          })}\n          onClick={() => handleItemClick(item)}\n          role=\"menuitem\"\n          aria-disabled={item.disabled || undefined}\n          tabIndex={i === focusedIndex ? 0 : -1}\n        >\n          {item.icon && <span className={styles.icon}>{item.icon}</span>}\n          <span>{item.label}</span>\n        </button>\n      ))}\n    </div>,\n    document.body,\n  );\n};\n"],"names":["useRef","useState","useEscapeKey","useCallback","CONTEXT_MENU_MARGIN","useEffect","createPortal","jsx","styles","jsxs","clsx"],"mappings":";;;;;;;;;AAyBO,MAAM,cAAc,CAAC,EAAE,GAAG,GAAG,OAAO,cAAgC;AACzE,QAAM,UAAUA,MAAAA,OAAuB,IAAI;AAC3C,QAAM,CAAC,cAAc,eAAe,IAAIC,MAAAA,SAAS,EAAE;AAEnDC,eAAAA,aAAa,OAAO;AAEpB,QAAM,iBAAiBC,MAAAA,YAAY,MAAM;AACvC,QAAI,CAAC,QAAQ,QAAS;AACtB,UAAM,OAAO,QAAQ,QAAQ,sBAAA;AAC7B,UAAM,KAAK,OAAO;AAClB,UAAM,KAAK,OAAO;AAClB,QAAI,KAAK;AACT,QAAI,KAAK;AACT,QAAI,IAAI,KAAK,QAAQ,KAAKC,8BAAqB,MAAK,KAAK,KAAK,QAAQA,UAAAA;AACtE,QAAI,IAAI,KAAK,SAAS,KAAKA,8BAAqB,MAAK,KAAK,KAAK,SAASA,UAAAA;AACxE,YAAQ,QAAQ,MAAM,OAAO,GAAG,EAAE;AAClC,YAAQ,QAAQ,MAAM,MAAM,GAAG,EAAE;AAAA,EACnC,GAAG,CAAC,GAAG,CAAC,CAAC;AAETC,QAAAA,UAAU,MAAM;AAAE,mBAAA;AAAA,EAAkB,GAAG,CAAC,cAAc,CAAC;AAEvDA,QAAAA,UAAU,MAAM;AACd,UAAM,cAAc,CAAC,MAAkB;AACrC,UAAI,QAAQ,WAAW,CAAC,QAAQ,QAAQ,SAAS,EAAE,MAAc,EAAG,SAAA;AAAA,IACtE;AACA,UAAM,eAAe,MAAM,QAAA;AAC3B,aAAS,iBAAiB,aAAa,WAAW;AAClD,WAAO,iBAAiB,UAAU,cAAc,IAAI;AACpD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,WAAW;AACrD,aAAO,oBAAoB,UAAU,cAAc,IAAI;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,kBAAkB,CAAC,SAA0B;AACjD,QAAI,KAAK,SAAU;AACnB,SAAK,QAAA;AACL,YAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAA2B;AAChD,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAA;AACF,sBAAgB,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,MAAM,SAAS,CAAC,CAAC;AAAA,IAChE,WAAW,EAAE,QAAQ,WAAW;AAC9B,QAAE,eAAA;AACF,sBAAgB,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,CAAC,CAAC;AAAA,IACjD,WAAW,EAAE,QAAQ,WAAW,gBAAgB,KAAK,eAAe,MAAM,QAAQ;AAChF,QAAE,eAAA;AACF,sBAAgB,MAAM,YAAY,CAAC;AAAA,IACrC;AAAA,EACF;AAEA,MAAI,OAAO,aAAa,YAAa,QAAO;AAE5C,SAAOC,SAAAA;AAAAA,IACLC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAWC,mBAAAA,QAAO;AAAA,QAClB,OAAO,EAAE,MAAM,GAAG,KAAK,EAAA;AAAA,QACvB,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAA,MAAM,IAAI,CAAC,MAAM,MAChBC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,WAAWC,KAAAA,KAAKF,mBAAAA,QAAO,MAAM;AAAA,cAC3B,CAACA,mBAAAA,QAAO,QAAQ,GAAG,KAAK;AAAA,cACxB,CAACA,mBAAAA,QAAO,OAAO,GAAG,MAAM;AAAA,YAAA,CACzB;AAAA,YACD,SAAS,MAAM,gBAAgB,IAAI;AAAA,YACnC,MAAK;AAAA,YACL,iBAAe,KAAK,YAAY;AAAA,YAChC,UAAU,MAAM,eAAe,IAAI;AAAA,YAElC,UAAA;AAAA,cAAA,KAAK,QAAQD,+BAAC,QAAA,EAAK,WAAWC,mBAAAA,QAAO,MAAO,eAAK,KAAA,CAAK;AAAA,cACvDD,2BAAAA,IAAC,QAAA,EAAM,UAAA,KAAK,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAZb,KAAK;AAAA,QAAA,CAcb;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,SAAS;AAAA,EAAA;AAEb;;"}

package/dist/index17.js

@@ -1,162 +1,94 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactECharts from "echarts-for-react";
-import { clsx } from "./index36.js";
-import { CHART_COLORS } from "./index39.js";
-import styles from "./index57.js";
-const DEFAULT_TIME_RANGE_OPTIONS = ["auto", "1h", "6h", "24h", "7d", "30d"];
-const buildMarkAreas = (annotations) => annotations.filter((a) => a.end).map((a) => [
-  { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? "rgba(255,107,90,0.12)" } },
-  { xAxis: a.end }
-]);
-const buildMarkLines = (annotations) => annotations.filter((a) => !a.end).map((a) => ({
-  name: a.label,
-  xAxis: a.start,
-  label: { formatter: a.label, position: "insideEndTop" },
-  lineStyle: { color: a.color ?? CHART_COLORS[0], type: "dashed" }
-}));
-const extractSeries = (data, field) => {
-  const values = data.map((d) => d[field]);
-  return values.every((v) => v == null) ? void 0 : values;
-};
-const buildOption = (data, annotations, showConfidenceBands, showP50, showLegend) => {
-  const timestamps = data.map((d) => d.ts);
-  const values = data.map((d) => d.value);
-  const p05 = showConfidenceBands ? extractSeries(data, "p05") : void 0;
-  const p95 = showConfidenceBands ? extractSeries(data, "p95") : void 0;
-  const p50 = showP50 ? extractSeries(data, "p50") : void 0;
-  const upperThreshold = extractSeries(data, "upperThreshold");
-  const lowerThreshold = extractSeries(data, "lowerThreshold");
-  const markArea = annotations.length > 0 ? { silent: true, data: buildMarkAreas(annotations) } : void 0;
-  const markLine = annotations.length > 0 ? { silent: true, symbol: "none", data: buildMarkLines(annotations) } : void 0;
-  const series = [];
-  series.push({
-    name: "Value",
-    type: "line",
-    data: values,
-    symbol: "none",
-    lineStyle: { width: 2, color: CHART_COLORS[0] },
-    itemStyle: { color: CHART_COLORS[0] },
-    markArea,
-    markLine
-  });
-  if (p50) {
-    series.push({
-      name: "p50",
-      type: "line",
-      data: p50,
-      symbol: "none",
-      lineStyle: { width: 1.5, type: "dashed", color: CHART_COLORS[1] },
-      itemStyle: { color: CHART_COLORS[1] }
-    });
-  }
-  if (p05 && p95) {
-    series.push({
-      name: "p05",
-      type: "line",
-      data: p05,
-      symbol: "none",
-      lineStyle: { width: 0 },
-      stack: "confidence",
-      areaStyle: { opacity: 0 }
-    });
-    series.push({
-      name: "p95",
-      type: "line",
-      data: p95.map((v, i) => {
-        const low = p05[i];
-        if (v == null || low == null) return null;
-        return v - low;
-      }),
-      symbol: "none",
-      lineStyle: { width: 0 },
-      stack: "confidence",
-      areaStyle: { opacity: 0.15, color: CHART_COLORS[1] }
-    });
-  }
-  if (upperThreshold) {
-    series.push({
-      name: "Upper threshold",
-      type: "line",
-      data: upperThreshold,
-      symbol: "none",
-      lineStyle: { width: 1, type: "dashed", color: CHART_COLORS[4] },
-      itemStyle: { color: CHART_COLORS[4] }
-    });
-  }
-  if (lowerThreshold) {
-    series.push({
-      name: "Lower threshold",
-      type: "line",
-      data: lowerThreshold,
-      symbol: "none",
-      lineStyle: { width: 1, type: "dashed", color: CHART_COLORS[5] },
-      itemStyle: { color: CHART_COLORS[5] }
-    });
-  }
-  return {
-    tooltip: { trigger: "axis" },
-    legend: showLegend ? { bottom: 0 } : void 0,
-    grid: { left: "3%", right: "4%", bottom: showLegend ? "12%" : "3%", containLabel: true },
-    xAxis: { type: "category", data: timestamps, boundaryGap: false },
-    yAxis: { type: "value" },
-    series
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { useEscapeKey } from "./index5.js";
+import { CONTEXT_MENU_MARGIN } from "./index48.js";
+import { clsx } from "./index38.js";
+import styles from "./index52.js";
+const ContextMenu = ({ x, y, items, onClose }) => {
+  const menuRef = useRef(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  useEscapeKey(onClose);
+  const adjustPosition = useCallback(() => {
+    if (!menuRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let ax = x;
+    let ay = y;
+    if (x + rect.width > vw - CONTEXT_MENU_MARGIN) ax = vw - rect.width - CONTEXT_MENU_MARGIN;
+    if (y + rect.height > vh - CONTEXT_MENU_MARGIN) ay = vh - rect.height - CONTEXT_MENU_MARGIN;
+    menuRef.current.style.left = `${ax}px`;
+    menuRef.current.style.top = `${ay}px`;
+  }, [x, y]);
+  useEffect(() => {
+    adjustPosition();
+  }, [adjustPosition]);
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
+    };
+    const handleScroll = () => onClose();
+    document.addEventListener("mousedown", handleClick);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [onClose]);
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    item.onClick();
+    onClose();
   };
-};
-const CounterTimeseriesChart = ({
-  data,
-  title,
-  isLoading = false,
-  error = null,
-  timeRange = "auto",
-  timeRangeOptions,
-  onTimeRangeChange,
-  annotations = [],
-  showConfidenceBands = true,
-  showP50 = true,
-  showLegend = false,
-  onChartReady,
-  className
-}) => {
-  const rangeOptions = timeRangeOptions ?? [...DEFAULT_TIME_RANGE_OPTIONS];
-  const option = useMemo(
-    () => buildOption(data, annotations, showConfidenceBands, showP50, showLegend),
-    [data, annotations, showConfidenceBands, showP50, showLegend]
-  );
-  const showHeader = title || onTimeRangeChange;
-  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-    showHeader && /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      title && /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
-      onTimeRangeChange && /* @__PURE__ */ jsx("div", { className: styles.timeRangeGroup, role: "group", "aria-label": "Time range presets", children: rangeOptions.map((opt) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: clsx(styles.timeRangeButton, {
-            [styles.timeRangeButtonActive]: opt === timeRange
-          }),
-          onClick: () => onTimeRangeChange(opt),
-          "aria-pressed": opt === timeRange,
-          children: opt
-        },
-        opt
-      )) })
-    ] }),
-    isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart data..." }),
-    !isLoading && error && /* @__PURE__ */ jsx("div", { className: styles.error, children: error }),
-    !isLoading && !error && data.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No data available" }),
-    !isLoading && !error && data.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.chartContainer, children: /* @__PURE__ */ jsx(
-      ReactECharts,
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < items.length) {
+      e.preventDefault();
+      handleItemClick(items[focusedIndex]);
+    }
+  };
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        option,
-        style: { height: "100%", width: "100%" },
-        onChartReady,
-        notMerge: true
+        ref: menuRef,
+        className: styles.root,
+        style: { left: x, top: y },
+        role: "menu",
+        "aria-label": "Context menu",
+        onKeyDown: handleKeyDown,
+        children: items.map((item, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: clsx(styles.item, {
+              [styles.disabled]: item.disabled,
+              [styles.focused]: i === focusedIndex
+            }),
+            onClick: () => handleItemClick(item),
+            role: "menuitem",
+            "aria-disabled": item.disabled || void 0,
+            tabIndex: i === focusedIndex ? 0 : -1,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: item.icon }),
+              /* @__PURE__ */ jsx("span", { children: item.label })
+            ]
+          },
+          item.label
+        ))
       }
-    ) })
-  ] });
+    ),
+    document.body
+  );
 };
-CounterTimeseriesChart.displayName = "CounterTimeseriesChart";
 export {
-  CounterTimeseriesChart
+  ContextMenu
 };
 //# sourceMappingURL=index17.js.map

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/charts/CounterTimeseriesChart/CounterTimeseriesChart.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { CounterTimeseriesChartProps } from './CounterTimeseriesChart.types';\nimport type { CounterTimeseriesPoint, ChartAnnotation } from '../../types/chart.types';\nimport { CHART_COLORS } from '../../constants';\nimport styles from './CounterTimeseriesChart.module.css';\n\nconst DEFAULT_TIME_RANGE_OPTIONS = ['auto', '1h', '6h', '24h', '7d', '30d'] as const;\n\n/** Build markArea data from range annotations (those with an end timestamp). */\nconst buildMarkAreas = (annotations: ChartAnnotation[]) =>\n  annotations\n    .filter((a) => a.end)\n    .map((a) => [\n      { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? 'rgba(255,107,90,0.12)' } },\n      { xAxis: a.end },\n    ]);\n\n/** Build markLine data from point annotations (those without an end timestamp). */\nconst buildMarkLines = (annotations: ChartAnnotation[]) =>\n  annotations\n    .filter((a) => !a.end)\n    .map((a) => ({\n      name: a.label,\n      xAxis: a.start,\n      label: { formatter: a.label, position: 'insideEndTop' as const },\n      lineStyle: { color: a.color ?? CHART_COLORS[0], type: 'dashed' as const },\n    }));\n\n/** Extract a numeric array for a given field, returning undefined when all values are null. */\nconst extractSeries = (data: CounterTimeseriesPoint[], field: keyof CounterTimeseriesPoint) => {\n  const values = data.map((d) => d[field] as number | null | undefined);\n  return values.every((v) => v == null) ? undefined : values;\n};\n\nconst buildOption = (\n  data: CounterTimeseriesPoint[],\n  annotations: ChartAnnotation[],\n  showConfidenceBands: boolean,\n  showP50: boolean,\n  showLegend: boolean,\n) => {\n  const timestamps = data.map((d) => d.ts);\n  const values = data.map((d) => d.value);\n\n  const p05 = showConfidenceBands ? extractSeries(data, 'p05') : undefined;\n  const p95 = showConfidenceBands ? extractSeries(data, 'p95') : undefined;\n  const p50 = showP50 ? extractSeries(data, 'p50') : undefined;\n\n  const upperThreshold = extractSeries(data, 'upperThreshold');\n  const lowerThreshold = extractSeries(data, 'lowerThreshold');\n\n  const markArea = annotations.length > 0 ? { silent: true, data: buildMarkAreas(annotations) } : undefined;\n  const markLine = annotations.length > 0 ? { silent: true, symbol: 'none', data: buildMarkLines(annotations) } : undefined;\n\n  const series: unknown[] = [];\n\n  // Main value line\n  series.push({\n    name: 'Value',\n    type: 'line',\n    data: values,\n    symbol: 'none',\n    lineStyle: { width: 2, color: CHART_COLORS[0] },\n    itemStyle: { color: CHART_COLORS[0] },\n    markArea,\n    markLine,\n  });\n\n  // p50 dashed line\n  if (p50) {\n    series.push({\n      name: 'p50',\n      type: 'line',\n      data: p50,\n      symbol: 'none',\n      lineStyle: { width: 1.5, type: 'dashed', color: CHART_COLORS[1] },\n      itemStyle: { color: CHART_COLORS[1] },\n    });\n  }\n\n  // Confidence band (p05–p95 area between)\n  if (p05 && p95) {\n    // Lower bound (invisible line)\n    series.push({\n      name: 'p05',\n      type: 'line',\n      data: p05,\n      symbol: 'none',\n      lineStyle: { width: 0 },\n      stack: 'confidence',\n      areaStyle: { opacity: 0 },\n    });\n    // Upper bound fills from p05 to p95\n    series.push({\n      name: 'p95',\n      type: 'line',\n      data: p95.map((v, i) => {\n        const low = p05[i];\n        if (v == null || low == null) return null;\n        return v - low;\n      }),\n      symbol: 'none',\n      lineStyle: { width: 0 },\n      stack: 'confidence',\n      areaStyle: { opacity: 0.15, color: CHART_COLORS[1] },\n    });\n  }\n\n  // Threshold lines\n  if (upperThreshold) {\n    series.push({\n      name: 'Upper threshold',\n      type: 'line',\n      data: upperThreshold,\n      symbol: 'none',\n      lineStyle: { width: 1, type: 'dashed', color: CHART_COLORS[4] },\n      itemStyle: { color: CHART_COLORS[4] },\n    });\n  }\n\n  if (lowerThreshold) {\n    series.push({\n      name: 'Lower threshold',\n      type: 'line',\n      data: lowerThreshold,\n      symbol: 'none',\n      lineStyle: { width: 1, type: 'dashed', color: CHART_COLORS[5] },\n      itemStyle: { color: CHART_COLORS[5] },\n    });\n  }\n\n  return {\n    tooltip: { trigger: 'axis' },\n    legend: showLegend ? { bottom: 0 } : undefined,\n    grid: { left: '3%', right: '4%', bottom: showLegend ? '12%' : '3%', containLabel: true },\n    xAxis: { type: 'category', data: timestamps, boundaryGap: false },\n    yAxis: { type: 'value' },\n    series,\n  };\n};\n\nexport const CounterTimeseriesChart = ({\n  data,\n  title,\n  isLoading = false,\n  error = null,\n  timeRange = 'auto',\n  timeRangeOptions,\n  onTimeRangeChange,\n  annotations = [],\n  showConfidenceBands = true,\n  showP50 = true,\n  showLegend = false,\n  onChartReady,\n  className,\n}: CounterTimeseriesChartProps) => {\n  const rangeOptions = timeRangeOptions ?? [...DEFAULT_TIME_RANGE_OPTIONS];\n\n  const option = useMemo(\n    () => buildOption(data, annotations, showConfidenceBands, showP50, showLegend),\n    [data, annotations, showConfidenceBands, showP50, showLegend],\n  );\n\n  const showHeader = title || onTimeRangeChange;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      {showHeader && (\n        <div className={styles.header}>\n          {title && <h3 className={styles.title}>{title}</h3>}\n          {onTimeRangeChange && (\n            <div className={styles.timeRangeGroup} role=\"group\" aria-label=\"Time range presets\">\n              {rangeOptions.map((opt) => (\n                <button\n                  key={opt}\n                  type=\"button\"\n                  className={clsx(styles.timeRangeButton, {\n                    [styles.timeRangeButtonActive]: opt === timeRange,\n                  })}\n                  onClick={() => onTimeRangeChange(opt)}\n                  aria-pressed={opt === timeRange}\n                >\n                  {opt}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n      {!isLoading && error && <div className={styles.error}>{error}</div>}\n\n      {!isLoading && !error && data.length === 0 && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {!isLoading && !error && data.length > 0 && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', width: '100%' }}\n            onChartReady={onChartReady}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nCounterTimeseriesChart.displayName = 'CounterTimeseriesChart';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index17.js","sources":["../src/composites/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useCallback, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { CONTEXT_MENU_MARGIN } from '../../constants';\nimport clsx from 'clsx';\nimport styles from './ContextMenu.module.css';\n\nexport interface ContextMenuItem {\n  label: string;\n  icon?: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface ContextMenuProps {\n  /** Horizontal position (px from left). */\n  x: number;\n  /** Vertical position (px from top). */\n  y: number;\n  /** Menu items to render. */\n  items: ContextMenuItem[];\n  /** Called when the menu should close. */\n  onClose: () => void;\n}\n\nexport const ContextMenu = ({ x, y, items, onClose }: ContextMenuProps) => {\n  const menuRef = useRef<HTMLDivElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n\n  useEscapeKey(onClose);\n\n  const adjustPosition = useCallback(() => {\n    if (!menuRef.current) return;\n    const rect = menuRef.current.getBoundingClientRect();\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    let ax = x;\n    let ay = y;\n    if (x + rect.width > vw - CONTEXT_MENU_MARGIN) ax = vw - rect.width - CONTEXT_MENU_MARGIN;\n    if (y + rect.height > vh - CONTEXT_MENU_MARGIN) ay = vh - rect.height - CONTEXT_MENU_MARGIN;\n    menuRef.current.style.left = `${ax}px`;\n    menuRef.current.style.top = `${ay}px`;\n  }, [x, y]);\n\n  useEffect(() => { adjustPosition(); }, [adjustPosition]);\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();\n    };\n    const handleScroll = () => onClose();\n    document.addEventListener('mousedown', handleClick);\n    window.addEventListener('scroll', handleScroll, true);\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      window.removeEventListener('scroll', handleScroll, true);\n    };\n  }, [onClose]);\n\n  const handleItemClick = (item: ContextMenuItem) => {\n    if (item.disabled) return;\n    item.onClick();\n    onClose();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.max(prev - 1, 0));\n    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < items.length) {\n      e.preventDefault();\n      handleItemClick(items[focusedIndex]);\n    }\n  };\n\n  if (typeof document === 'undefined') return null;\n\n  return createPortal(\n    <div\n      ref={menuRef}\n      className={styles.root}\n      style={{ left: x, top: y }}\n      role=\"menu\"\n      aria-label=\"Context menu\"\n      onKeyDown={handleKeyDown}\n    >\n      {items.map((item, i) => (\n        <button\n          key={item.label}\n          type=\"button\"\n          className={clsx(styles.item, {\n            [styles.disabled]: item.disabled,\n            [styles.focused]: i === focusedIndex,\n          })}\n          onClick={() => handleItemClick(item)}\n          role=\"menuitem\"\n          aria-disabled={item.disabled || undefined}\n          tabIndex={i === focusedIndex ? 0 : -1}\n        >\n          {item.icon && <span className={styles.icon}>{item.icon}</span>}\n          <span>{item.label}</span>\n        </button>\n      ))}\n    </div>,\n    document.body,\n  );\n};\n"],"names":[],"mappings":"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"}