@ktnpm_devops/react-component 0.8.0 → 0.10.0

package/dist/index37.cjs

@@ -2,75 +2,156 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index50.cjs");
-const SegmentedControl_module = require("./index56.cjs");
-function nextEnabledIndex(options, from, step) {
-  const count = options.length;
-  for (let i = 1; i <= count; i += 1) {
-    const idx = (from + step * i + count * i) % count;
-    if (!options[idx].disabled) return idx;
+const ReactECharts = require("echarts-for-react");
+const clsx = require("./index52.cjs");
+const constants = require("./index59.cjs");
+const SankeyChartCard_module = require("./index61.cjs");
+const COLOR_METRIC_OPTIONS = [
+  { value: "deviation", label: "Deviation" },
+  { value: "severity", label: "Severity" },
+  { value: "origin", label: "Origin" },
+  { value: "persistence", label: "Persistence" }
+];
+const WIDTH_METRIC_OPTIONS = [
+  { value: "slots", label: "Slots" },
+  { value: "distinct_objects", label: "Distinct Objects" }
+];
+const buildNodes = (rows) => {
+  const seen = /* @__PURE__ */ new Set();
+  const nodes = [];
+  for (const row of rows) {
+    if (!seen.has(row.source)) {
+      seen.add(row.source);
+      nodes.push({ name: row.source });
+    }
+    if (!seen.has(row.target)) {
+      seen.add(row.target);
+      nodes.push({ name: row.target });
+    }
   }
-  return from;
-}
-function SegmentedControlInner({
-  options,
-  value,
-  onChange,
-  shape = "pill",
-  size = "md",
+  return nodes;
+};
+const SankeyChartCard = ({
+  title,
+  rows,
+  isLoading = false,
+  error = null,
+  onRetry,
+  onChartReady,
+  actions,
   className,
-  ...props
-}, ref) {
-  const buttonsRef = react.useRef([]);
-  const move = (currentIndex, step) => {
-    var _a;
-    const target = nextEnabledIndex(options, currentIndex, step);
-    if (target === currentIndex) return;
-    onChange(options[target].value);
-    (_a = buttonsRef.current[target]) == null ? void 0 : _a.focus();
-  };
-  const handleKeyDown = (event, index) => {
-    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-      event.preventDefault();
-      move(index, 1);
-    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-      event.preventDefault();
-      move(index, -1);
+  colorMetric = "deviation",
+  widthMetric = "slots",
+  onColorMetricChange,
+  onWidthMetricChange,
+  onNodeClick,
+  onNodeContextMenu,
+  maxNodes = constants.MAX_SANKEY_NODES
+}) => {
+  const isTruncated = rows.length > maxNodes;
+  const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;
+  const option = react.useMemo(() => {
+    const nodes = buildNodes(visibleRows);
+    const links = visibleRows.map((row) => ({
+      source: row.source,
+      target: row.target,
+      value: row.value,
+      lineStyle: row.color ? { color: row.color } : void 0
+    }));
+    return {
+      tooltip: { trigger: "item" },
+      series: [
+        {
+          type: "sankey",
+          data: nodes.map((node, i) => ({
+            ...node,
+            itemStyle: { color: constants.CHART_COLORS[i % constants.CHART_COLORS.length] }
+          })),
+          links,
+          emphasis: { focus: "adjacency" },
+          lineStyle: { color: "gradient", curveness: 0.5 }
+        }
+      ]
+    };
+  }, [visibleRows]);
+  const handleChartReady = (instance) => {
+    if (onNodeClick) {
+      instance.on("click", (params) => {
+        const p = params;
+        if (p.dataType === "node" && p.name) {
+          onNodeClick({ name: p.name, type: "node" });
+        }
+      });
     }
+    if (onNodeContextMenu) {
+      instance.on("contextmenu", (params) => {
+        var _a, _b;
+        const p = params;
+        if (p.dataType === "node" && p.name) {
+          onNodeContextMenu(
+            { name: p.name, type: "node" },
+            { x: ((_a = p.event) == null ? void 0 : _a.offsetX) ?? 0, y: ((_b = p.event) == null ? void 0 : _b.offsetY) ?? 0 }
+          );
+        }
+      });
+    }
+    onChartReady == null ? void 0 : onChartReady(instance);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      role: "radiogroup",
-      className: clsx.clsx(SegmentedControl_module.default.root, SegmentedControl_module.default[shape], SegmentedControl_module.default[size], className),
-      ...props,
-      children: options.map((option, index) => {
-        const selected = option.value === value;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+  const hasToolbar = onColorMetricChange || onWidthMetricChange;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(SankeyChartCard_module.default.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: SankeyChartCard_module.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SankeyChartCard_module.default.title, children: title }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.headerActions, children: actions })
+    ] }),
+    hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.toolbar, children: [
+      onColorMetricChange && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: SankeyChartCard_module.default.toolbarLabel, children: "Color: " }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
           {
-            ref: (node) => {
-              buttonsRef.current[index] = node;
-            },
-            type: "button",
-            role: "radio",
-            "aria-checked": selected,
-            tabIndex: selected ? 0 : -1,
-            disabled: option.disabled,
-            className: clsx.clsx(SegmentedControl_module.default.segment, selected && SegmentedControl_module.default.isOn),
-            onClick: () => onChange(option.value),
-            onKeyDown: (event) => handleKeyDown(event, index),
-            children: option.label
-          },
-          option.value
-        );
-      })
-    }
-  );
-}
-const SegmentedControlBase = react.forwardRef(SegmentedControlInner);
-SegmentedControlBase.displayName = "SegmentedControl";
-const SegmentedControl = SegmentedControlBase;
-exports.SegmentedControl = SegmentedControl;
+            className: SankeyChartCard_module.default.toolbarSelect,
+            value: colorMetric,
+            onChange: (e) => onColorMetricChange(e.target.value),
+            children: COLOR_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          }
+        )
+      ] }),
+      onWidthMetricChange && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: SankeyChartCard_module.default.toolbarLabel, children: "Width: " }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            className: SankeyChartCard_module.default.toolbarSelect,
+            value: widthMetric,
+            onChange: (e) => onWidthMetricChange(e.target.value),
+            children: WIDTH_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          }
+        )
+      ] })
+    ] }),
+    isTruncated && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.warning, children: [
+      "Showing ",
+      maxNodes,
+      " of ",
+      rows.length,
+      " flows. Some data has been truncated."
+    ] }),
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.loading, children: "Loading chart..." }),
+    !isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.error, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
+      onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: SankeyChartCard_module.default.retryButton, onClick: onRetry, children: "Retry" })
+    ] }),
+    !isLoading && !error && rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.empty, children: "No flow data available." }),
+    !isLoading && !error && rows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ReactECharts,
+      {
+        option,
+        style: { height: "100%", minHeight: "25rem" },
+        onChartReady: handleChartReady
+      }
+    ) })
+  ] });
+};
+SankeyChartCard.displayName = "SankeyChartCard";
+exports.SankeyChartCard = SankeyChartCard;
 //# sourceMappingURL=index37.cjs.map

package/dist/index37.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index37.cjs","sources":["../src/primitives/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport type {\n  SegmentedControlOption,\n  SegmentedControlProps,\n} from './SegmentedControl.types';\nimport styles from './SegmentedControl.module.css';\n\nfunction nextEnabledIndex<T extends string>(\n  options: SegmentedControlOption<T>[],\n  from: number,\n  step: 1 | -1,\n): number {\n  const count = options.length;\n  for (let i = 1; i <= count; i += 1) {\n    const idx = (from + step * i + count * i) % count;\n    if (!options[idx].disabled) return idx;\n  }\n  return from;\n}\n\nfunction SegmentedControlInner<T extends string>(\n  {\n    options,\n    value,\n    onChange,\n    shape = 'pill',\n    size = 'md',\n    className,\n    ...props\n  }: SegmentedControlProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const buttonsRef = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (currentIndex: number, step: 1 | -1) => {\n    const target = nextEnabledIndex(options, currentIndex, step);\n    if (target === currentIndex) return;\n    onChange(options[target].value);\n    buttonsRef.current[target]?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      move(index, 1);\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      move(index, -1);\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      role=\"radiogroup\"\n      className={clsx(styles.root, styles[shape], styles[size], className)}\n      {...props}\n    >\n      {options.map((option, index) => {\n        const selected = option.value === value;\n        return (\n          <button\n            key={option.value}\n            ref={(node) => {\n              buttonsRef.current[index] = node;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            tabIndex={selected ? 0 : -1}\n            disabled={option.disabled}\n            className={clsx(styles.segment, selected && styles.isOn)}\n            onClick={() => onChange(option.value)}\n            onKeyDown={(event) => handleKeyDown(event, index)}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nconst SegmentedControlBase = forwardRef(SegmentedControlInner);\n(SegmentedControlBase as { displayName?: string }).displayName = 'SegmentedControl';\n\n/**\n * Cast preserves the generic `T` for consumers (forwardRef otherwise collapses\n * it to `string`), while the runtime object keeps its `displayName`.\n */\nexport const SegmentedControl = SegmentedControlBase as <T extends string>(\n  props: SegmentedControlProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement | null;\n"],"names":["useRef","jsx","clsx","styles","forwardRef"],"mappings":";;;;;;AAQA,SAAS,iBACP,SACA,MACA,MACQ;AACR,QAAM,QAAQ,QAAQ;AACtB,WAAS,IAAI,GAAG,KAAK,OAAO,KAAK,GAAG;AAClC,UAAM,OAAO,OAAO,OAAO,IAAI,QAAQ,KAAK;AAC5C,QAAI,CAAC,QAAQ,GAAG,EAAE,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAEA,SAAS,sBACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,aAAaA,MAAAA,OAAqC,EAAE;AAE1D,QAAM,OAAO,CAAC,cAAsB,SAAiB;;AACnD,UAAM,SAAS,iBAAiB,SAAS,cAAc,IAAI;AAC3D,QAAI,WAAW,aAAc;AAC7B,aAAS,QAAQ,MAAM,EAAE,KAAK;AAC9B,qBAAW,QAAQ,MAAM,MAAzB,mBAA4B;AAAA,EAC9B;AAEA,QAAM,gBAAgB,CAAC,OAA4B,UAAkB;AACnE,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;AAC3D,YAAM,eAAA;AACN,WAAK,OAAO,CAAC;AAAA,IACf,WAAW,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AAC/D,YAAM,eAAA;AACN,WAAK,OAAO,EAAE;AAAA,IAChB;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAWC,KAAAA,KAAKC,wBAAAA,QAAO,MAAMA,wBAAAA,QAAO,KAAK,GAAGA,wBAAAA,QAAO,IAAI,GAAG,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,WAAW,OAAO,UAAU;AAClC,eACEF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,yBAAW,QAAQ,KAAK,IAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,WAAW,IAAI;AAAA,YACzB,UAAU,OAAO;AAAA,YACjB,WAAWC,KAAAA,KAAKC,wBAAAA,QAAO,SAAS,YAAYA,wBAAAA,QAAO,IAAI;AAAA,YACvD,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW,CAAC,UAAU,cAAc,OAAO,KAAK;AAAA,YAE/C,UAAA,OAAO;AAAA,UAAA;AAAA,UAbH,OAAO;AAAA,QAAA;AAAA,MAgBlB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,uBAAuBC,MAAAA,WAAW,qBAAqB;AAC5D,qBAAkD,cAAc;AAM1D,MAAM,mBAAmB;;"}
+{"version":3,"file":"index37.cjs","sources":["../src/charts/SankeyChartCard/SankeyChartCard.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { SankeyChartCardProps } from './SankeyChartCard.types';\nimport type { EChartsInstance, SankeyColorMetric, SankeyWidthMetric } from '../../types/chart.types';\nimport { MAX_SANKEY_NODES, CHART_COLORS } from '../../constants';\nimport styles from './SankeyChartCard.module.css';\n\n/** Colour metric labels for the toolbar selector. */\nconst COLOR_METRIC_OPTIONS: { value: SankeyColorMetric; label: string }[] = [\n  { value: 'deviation', label: 'Deviation' },\n  { value: 'severity', label: 'Severity' },\n  { value: 'origin', label: 'Origin' },\n  { value: 'persistence', label: 'Persistence' },\n];\n\n/** Width metric labels for the toolbar selector. */\nconst WIDTH_METRIC_OPTIONS: { value: SankeyWidthMetric; label: string }[] = [\n  { value: 'slots', label: 'Slots' },\n  { value: 'distinct_objects', label: 'Distinct Objects' },\n];\n\n/** Build a unique node list from source/target pairs. */\nconst buildNodes = (rows: SankeyChartCardProps['rows']) => {\n  const seen = new Set<string>();\n  const nodes: { name: string }[] = [];\n\n  for (const row of rows) {\n    if (!seen.has(row.source)) {\n      seen.add(row.source);\n      nodes.push({ name: row.source });\n    }\n    if (!seen.has(row.target)) {\n      seen.add(row.target);\n      nodes.push({ name: row.target });\n    }\n  }\n\n  return nodes;\n};\n\nexport const SankeyChartCard = ({\n  title,\n  rows,\n  isLoading = false,\n  error = null,\n  onRetry,\n  onChartReady,\n  actions,\n  className,\n  colorMetric = 'deviation',\n  widthMetric = 'slots',\n  onColorMetricChange,\n  onWidthMetricChange,\n  onNodeClick,\n  onNodeContextMenu,\n  maxNodes = MAX_SANKEY_NODES,\n}: SankeyChartCardProps) => {\n  const isTruncated = rows.length > maxNodes;\n  const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;\n\n  const option = useMemo(() => {\n    const nodes = buildNodes(visibleRows);\n    const links = visibleRows.map((row) => ({\n      source: row.source,\n      target: row.target,\n      value: row.value,\n      lineStyle: row.color ? { color: row.color } : undefined,\n    }));\n\n    return {\n      tooltip: { trigger: 'item' as const },\n      series: [\n        {\n          type: 'sankey' as const,\n          data: nodes.map((node, i) => ({\n            ...node,\n            itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n          })),\n          links,\n          emphasis: { focus: 'adjacency' as const },\n          lineStyle: { color: 'gradient' as const, curveness: 0.5 },\n        },\n      ],\n    };\n  }, [visibleRows]);\n\n  const handleChartReady = (instance: EChartsInstance) => {\n    if (onNodeClick) {\n      instance.on('click', (params: unknown) => {\n        const p = params as { dataType?: string; name?: string };\n        if (p.dataType === 'node' && p.name) {\n          onNodeClick({ name: p.name, type: 'node' });\n        }\n      });\n    }\n\n    if (onNodeContextMenu) {\n      instance.on('contextmenu', (params: unknown) => {\n        const p = params as { dataType?: string; name?: string; event?: { offsetX?: number; offsetY?: number } };\n        if (p.dataType === 'node' && p.name) {\n          onNodeContextMenu(\n            { name: p.name, type: 'node' },\n            { x: p.event?.offsetX ?? 0, y: p.event?.offsetY ?? 0 },\n          );\n        }\n      });\n    }\n\n    onChartReady?.(instance);\n  };\n\n  const hasToolbar = onColorMetricChange || onWidthMetricChange;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <header className={styles.header}>\n        <h3 className={styles.title}>{title}</h3>\n        {actions && <div className={styles.headerActions}>{actions}</div>}\n      </header>\n\n      {hasToolbar && (\n        <div className={styles.toolbar}>\n          {onColorMetricChange && (\n            <label>\n              <span className={styles.toolbarLabel}>Color: </span>\n              <select\n                className={styles.toolbarSelect}\n                value={colorMetric}\n                onChange={(e) => onColorMetricChange(e.target.value as SankeyColorMetric)}\n              >\n                {COLOR_METRIC_OPTIONS.map((opt) => (\n                  <option key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n          {onWidthMetricChange && (\n            <label>\n              <span className={styles.toolbarLabel}>Width: </span>\n              <select\n                className={styles.toolbarSelect}\n                value={widthMetric}\n                onChange={(e) => onWidthMetricChange(e.target.value as SankeyWidthMetric)}\n              >\n                {WIDTH_METRIC_OPTIONS.map((opt) => (\n                  <option key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n        </div>\n      )}\n\n      {isTruncated && (\n        <div className={styles.warning}>\n          Showing {maxNodes} of {rows.length} flows. Some data has been truncated.\n        </div>\n      )}\n\n      {isLoading && <div className={styles.loading}>Loading chart...</div>}\n\n      {!isLoading && error && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              Retry\n            </button>\n          )}\n        </div>\n      )}\n\n      {!isLoading && !error && rows.length === 0 && (\n        <div className={styles.empty}>No flow data available.</div>\n      )}\n\n      {!isLoading && !error && rows.length > 0 && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', minHeight: '25rem' }}\n            onChartReady={handleChartReady}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nSankeyChartCard.displayName = 'SankeyChartCard';\n"],"names":["MAX_SANKEY_NODES","useMemo","CHART_COLORS","clsx","styles","jsxs","jsx"],"mappings":"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"}

package/dist/index37.js

@@ -1,76 +1,157 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
-import { clsx } from "./index50.js";
-import styles from "./index56.js";
-function nextEnabledIndex(options, from, step) {
-  const count = options.length;
-  for (let i = 1; i <= count; i += 1) {
-    const idx = (from + step * i + count * i) % count;
-    if (!options[idx].disabled) return idx;
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactECharts from "echarts-for-react";
+import { clsx } from "./index52.js";
+import { MAX_SANKEY_NODES, CHART_COLORS } from "./index59.js";
+import styles from "./index61.js";
+const COLOR_METRIC_OPTIONS = [
+  { value: "deviation", label: "Deviation" },
+  { value: "severity", label: "Severity" },
+  { value: "origin", label: "Origin" },
+  { value: "persistence", label: "Persistence" }
+];
+const WIDTH_METRIC_OPTIONS = [
+  { value: "slots", label: "Slots" },
+  { value: "distinct_objects", label: "Distinct Objects" }
+];
+const buildNodes = (rows) => {
+  const seen = /* @__PURE__ */ new Set();
+  const nodes = [];
+  for (const row of rows) {
+    if (!seen.has(row.source)) {
+      seen.add(row.source);
+      nodes.push({ name: row.source });
+    }
+    if (!seen.has(row.target)) {
+      seen.add(row.target);
+      nodes.push({ name: row.target });
+    }
   }
-  return from;
-}
-function SegmentedControlInner({
-  options,
-  value,
-  onChange,
-  shape = "pill",
-  size = "md",
+  return nodes;
+};
+const SankeyChartCard = ({
+  title,
+  rows,
+  isLoading = false,
+  error = null,
+  onRetry,
+  onChartReady,
+  actions,
   className,
-  ...props
-}, ref) {
-  const buttonsRef = useRef([]);
-  const move = (currentIndex, step) => {
-    var _a;
-    const target = nextEnabledIndex(options, currentIndex, step);
-    if (target === currentIndex) return;
-    onChange(options[target].value);
-    (_a = buttonsRef.current[target]) == null ? void 0 : _a.focus();
-  };
-  const handleKeyDown = (event, index) => {
-    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-      event.preventDefault();
-      move(index, 1);
-    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-      event.preventDefault();
-      move(index, -1);
+  colorMetric = "deviation",
+  widthMetric = "slots",
+  onColorMetricChange,
+  onWidthMetricChange,
+  onNodeClick,
+  onNodeContextMenu,
+  maxNodes = MAX_SANKEY_NODES
+}) => {
+  const isTruncated = rows.length > maxNodes;
+  const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;
+  const option = useMemo(() => {
+    const nodes = buildNodes(visibleRows);
+    const links = visibleRows.map((row) => ({
+      source: row.source,
+      target: row.target,
+      value: row.value,
+      lineStyle: row.color ? { color: row.color } : void 0
+    }));
+    return {
+      tooltip: { trigger: "item" },
+      series: [
+        {
+          type: "sankey",
+          data: nodes.map((node, i) => ({
+            ...node,
+            itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] }
+          })),
+          links,
+          emphasis: { focus: "adjacency" },
+          lineStyle: { color: "gradient", curveness: 0.5 }
+        }
+      ]
+    };
+  }, [visibleRows]);
+  const handleChartReady = (instance) => {
+    if (onNodeClick) {
+      instance.on("click", (params) => {
+        const p = params;
+        if (p.dataType === "node" && p.name) {
+          onNodeClick({ name: p.name, type: "node" });
+        }
+      });
     }
+    if (onNodeContextMenu) {
+      instance.on("contextmenu", (params) => {
+        var _a, _b;
+        const p = params;
+        if (p.dataType === "node" && p.name) {
+          onNodeContextMenu(
+            { name: p.name, type: "node" },
+            { x: ((_a = p.event) == null ? void 0 : _a.offsetX) ?? 0, y: ((_b = p.event) == null ? void 0 : _b.offsetY) ?? 0 }
+          );
+        }
+      });
+    }
+    onChartReady == null ? void 0 : onChartReady(instance);
   };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      role: "radiogroup",
-      className: clsx(styles.root, styles[shape], styles[size], className),
-      ...props,
-      children: options.map((option, index) => {
-        const selected = option.value === value;
-        return /* @__PURE__ */ jsx(
-          "button",
+  const hasToolbar = onColorMetricChange || onWidthMetricChange;
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
+      actions && /* @__PURE__ */ jsx("div", { className: styles.headerActions, children: actions })
+    ] }),
+    hasToolbar && /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+      onColorMetricChange && /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("span", { className: styles.toolbarLabel, children: "Color: " }),
+        /* @__PURE__ */ jsx(
+          "select",
           {
-            ref: (node) => {
-              buttonsRef.current[index] = node;
-            },
-            type: "button",
-            role: "radio",
-            "aria-checked": selected,
-            tabIndex: selected ? 0 : -1,
-            disabled: option.disabled,
-            className: clsx(styles.segment, selected && styles.isOn),
-            onClick: () => onChange(option.value),
-            onKeyDown: (event) => handleKeyDown(event, index),
-            children: option.label
-          },
-          option.value
-        );
-      })
-    }
-  );
-}
-const SegmentedControlBase = forwardRef(SegmentedControlInner);
-SegmentedControlBase.displayName = "SegmentedControl";
-const SegmentedControl = SegmentedControlBase;
+            className: styles.toolbarSelect,
+            value: colorMetric,
+            onChange: (e) => onColorMetricChange(e.target.value),
+            children: COLOR_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          }
+        )
+      ] }),
+      onWidthMetricChange && /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("span", { className: styles.toolbarLabel, children: "Width: " }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: styles.toolbarSelect,
+            value: widthMetric,
+            onChange: (e) => onWidthMetricChange(e.target.value),
+            children: WIDTH_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          }
+        )
+      ] })
+    ] }),
+    isTruncated && /* @__PURE__ */ jsxs("div", { className: styles.warning, children: [
+      "Showing ",
+      maxNodes,
+      " of ",
+      rows.length,
+      " flows. Some data has been truncated."
+    ] }),
+    isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart..." }),
+    !isLoading && error && /* @__PURE__ */ jsxs("div", { className: styles.error, children: [
+      /* @__PURE__ */ jsx("span", { children: error }),
+      onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: onRetry, children: "Retry" })
+    ] }),
+    !isLoading && !error && rows.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No flow data available." }),
+    !isLoading && !error && rows.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.chartContainer, children: /* @__PURE__ */ jsx(
+      ReactECharts,
+      {
+        option,
+        style: { height: "100%", minHeight: "25rem" },
+        onChartReady: handleChartReady
+      }
+    ) })
+  ] });
+};
+SankeyChartCard.displayName = "SankeyChartCard";
 export {
-  SegmentedControl
+  SankeyChartCard
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/primitives/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport type {\n  SegmentedControlOption,\n  SegmentedControlProps,\n} from './SegmentedControl.types';\nimport styles from './SegmentedControl.module.css';\n\nfunction nextEnabledIndex<T extends string>(\n  options: SegmentedControlOption<T>[],\n  from: number,\n  step: 1 | -1,\n): number {\n  const count = options.length;\n  for (let i = 1; i <= count; i += 1) {\n    const idx = (from + step * i + count * i) % count;\n    if (!options[idx].disabled) return idx;\n  }\n  return from;\n}\n\nfunction SegmentedControlInner<T extends string>(\n  {\n    options,\n    value,\n    onChange,\n    shape = 'pill',\n    size = 'md',\n    className,\n    ...props\n  }: SegmentedControlProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const buttonsRef = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (currentIndex: number, step: 1 | -1) => {\n    const target = nextEnabledIndex(options, currentIndex, step);\n    if (target === currentIndex) return;\n    onChange(options[target].value);\n    buttonsRef.current[target]?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      move(index, 1);\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      move(index, -1);\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      role=\"radiogroup\"\n      className={clsx(styles.root, styles[shape], styles[size], className)}\n      {...props}\n    >\n      {options.map((option, index) => {\n        const selected = option.value === value;\n        return (\n          <button\n            key={option.value}\n            ref={(node) => {\n              buttonsRef.current[index] = node;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            tabIndex={selected ? 0 : -1}\n            disabled={option.disabled}\n            className={clsx(styles.segment, selected && styles.isOn)}\n            onClick={() => onChange(option.value)}\n            onKeyDown={(event) => handleKeyDown(event, index)}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nconst SegmentedControlBase = forwardRef(SegmentedControlInner);\n(SegmentedControlBase as { displayName?: string }).displayName = 'SegmentedControl';\n\n/**\n * Cast preserves the generic `T` for consumers (forwardRef otherwise collapses\n * it to `string`), while the runtime object keeps its `displayName`.\n */\nexport const SegmentedControl = SegmentedControlBase as <T extends string>(\n  props: SegmentedControlProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;;AAQA,SAAS,iBACP,SACA,MACA,MACQ;AACR,QAAM,QAAQ,QAAQ;AACtB,WAAS,IAAI,GAAG,KAAK,OAAO,KAAK,GAAG;AAClC,UAAM,OAAO,OAAO,OAAO,IAAI,QAAQ,KAAK;AAC5C,QAAI,CAAC,QAAQ,GAAG,EAAE,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAEA,SAAS,sBACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,aAAa,OAAqC,EAAE;AAE1D,QAAM,OAAO,CAAC,cAAsB,SAAiB;;AACnD,UAAM,SAAS,iBAAiB,SAAS,cAAc,IAAI;AAC3D,QAAI,WAAW,aAAc;AAC7B,aAAS,QAAQ,MAAM,EAAE,KAAK;AAC9B,qBAAW,QAAQ,MAAM,MAAzB,mBAA4B;AAAA,EAC9B;AAEA,QAAM,gBAAgB,CAAC,OAA4B,UAAkB;AACnE,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;AAC3D,YAAM,eAAA;AACN,WAAK,OAAO,CAAC;AAAA,IACf,WAAW,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AAC/D,YAAM,eAAA;AACN,WAAK,OAAO,EAAE;AAAA,IAChB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW,KAAK,OAAO,MAAM,OAAO,KAAK,GAAG,OAAO,IAAI,GAAG,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,WAAW,OAAO,UAAU;AAClC,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,yBAAW,QAAQ,KAAK,IAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,WAAW,IAAI;AAAA,YACzB,UAAU,OAAO;AAAA,YACjB,WAAW,KAAK,OAAO,SAAS,YAAY,OAAO,IAAI;AAAA,YACvD,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW,CAAC,UAAU,cAAc,OAAO,KAAK;AAAA,YAE/C,UAAA,OAAO;AAAA,UAAA;AAAA,UAbH,OAAO;AAAA,QAAA;AAAA,MAgBlB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,uBAAuB,WAAW,qBAAqB;AAC5D,qBAAkD,cAAc;AAM1D,MAAM,mBAAmB;"}
+{"version":3,"file":"index37.js","sources":["../src/charts/SankeyChartCard/SankeyChartCard.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { SankeyChartCardProps } from './SankeyChartCard.types';\nimport type { EChartsInstance, SankeyColorMetric, SankeyWidthMetric } from '../../types/chart.types';\nimport { MAX_SANKEY_NODES, CHART_COLORS } from '../../constants';\nimport styles from './SankeyChartCard.module.css';\n\n/** Colour metric labels for the toolbar selector. */\nconst COLOR_METRIC_OPTIONS: { value: SankeyColorMetric; label: string }[] = [\n  { value: 'deviation', label: 'Deviation' },\n  { value: 'severity', label: 'Severity' },\n  { value: 'origin', label: 'Origin' },\n  { value: 'persistence', label: 'Persistence' },\n];\n\n/** Width metric labels for the toolbar selector. */\nconst WIDTH_METRIC_OPTIONS: { value: SankeyWidthMetric; label: string }[] = [\n  { value: 'slots', label: 'Slots' },\n  { value: 'distinct_objects', label: 'Distinct Objects' },\n];\n\n/** Build a unique node list from source/target pairs. */\nconst buildNodes = (rows: SankeyChartCardProps['rows']) => {\n  const seen = new Set<string>();\n  const nodes: { name: string }[] = [];\n\n  for (const row of rows) {\n    if (!seen.has(row.source)) {\n      seen.add(row.source);\n      nodes.push({ name: row.source });\n    }\n    if (!seen.has(row.target)) {\n      seen.add(row.target);\n      nodes.push({ name: row.target });\n    }\n  }\n\n  return nodes;\n};\n\nexport const SankeyChartCard = ({\n  title,\n  rows,\n  isLoading = false,\n  error = null,\n  onRetry,\n  onChartReady,\n  actions,\n  className,\n  colorMetric = 'deviation',\n  widthMetric = 'slots',\n  onColorMetricChange,\n  onWidthMetricChange,\n  onNodeClick,\n  onNodeContextMenu,\n  maxNodes = MAX_SANKEY_NODES,\n}: SankeyChartCardProps) => {\n  const isTruncated = rows.length > maxNodes;\n  const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;\n\n  const option = useMemo(() => {\n    const nodes = buildNodes(visibleRows);\n    const links = visibleRows.map((row) => ({\n      source: row.source,\n      target: row.target,\n      value: row.value,\n      lineStyle: row.color ? { color: row.color } : undefined,\n    }));\n\n    return {\n      tooltip: { trigger: 'item' as const },\n      series: [\n        {\n          type: 'sankey' as const,\n          data: nodes.map((node, i) => ({\n            ...node,\n            itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n          })),\n          links,\n          emphasis: { focus: 'adjacency' as const },\n          lineStyle: { color: 'gradient' as const, curveness: 0.5 },\n        },\n      ],\n    };\n  }, [visibleRows]);\n\n  const handleChartReady = (instance: EChartsInstance) => {\n    if (onNodeClick) {\n      instance.on('click', (params: unknown) => {\n        const p = params as { dataType?: string; name?: string };\n        if (p.dataType === 'node' && p.name) {\n          onNodeClick({ name: p.name, type: 'node' });\n        }\n      });\n    }\n\n    if (onNodeContextMenu) {\n      instance.on('contextmenu', (params: unknown) => {\n        const p = params as { dataType?: string; name?: string; event?: { offsetX?: number; offsetY?: number } };\n        if (p.dataType === 'node' && p.name) {\n          onNodeContextMenu(\n            { name: p.name, type: 'node' },\n            { x: p.event?.offsetX ?? 0, y: p.event?.offsetY ?? 0 },\n          );\n        }\n      });\n    }\n\n    onChartReady?.(instance);\n  };\n\n  const hasToolbar = onColorMetricChange || onWidthMetricChange;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <header className={styles.header}>\n        <h3 className={styles.title}>{title}</h3>\n        {actions && <div className={styles.headerActions}>{actions}</div>}\n      </header>\n\n      {hasToolbar && (\n        <div className={styles.toolbar}>\n          {onColorMetricChange && (\n            <label>\n              <span className={styles.toolbarLabel}>Color: </span>\n              <select\n                className={styles.toolbarSelect}\n                value={colorMetric}\n                onChange={(e) => onColorMetricChange(e.target.value as SankeyColorMetric)}\n              >\n                {COLOR_METRIC_OPTIONS.map((opt) => (\n                  <option key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n          {onWidthMetricChange && (\n            <label>\n              <span className={styles.toolbarLabel}>Width: </span>\n              <select\n                className={styles.toolbarSelect}\n                value={widthMetric}\n                onChange={(e) => onWidthMetricChange(e.target.value as SankeyWidthMetric)}\n              >\n                {WIDTH_METRIC_OPTIONS.map((opt) => (\n                  <option key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n        </div>\n      )}\n\n      {isTruncated && (\n        <div className={styles.warning}>\n          Showing {maxNodes} of {rows.length} flows. Some data has been truncated.\n        </div>\n      )}\n\n      {isLoading && <div className={styles.loading}>Loading chart...</div>}\n\n      {!isLoading && error && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              Retry\n            </button>\n          )}\n        </div>\n      )}\n\n      {!isLoading && !error && rows.length === 0 && (\n        <div className={styles.empty}>No flow data available.</div>\n      )}\n\n      {!isLoading && !error && rows.length > 0 && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', minHeight: '25rem' }}\n            onChartReady={handleChartReady}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nSankeyChartCard.displayName = 'SankeyChartCard';\n"],"names":[],"mappings":";;;;;;AASA,MAAM,uBAAsE;AAAA,EAC1E,EAAE,OAAO,aAAa,OAAO,YAAA;AAAA,EAC7B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,EAC5B,EAAE,OAAO,UAAU,OAAO,SAAA;AAAA,EAC1B,EAAE,OAAO,eAAe,OAAO,cAAA;AACjC;AAGA,MAAM,uBAAsE;AAAA,EAC1E,EAAE,OAAO,SAAS,OAAO,QAAA;AAAA,EACzB,EAAE,OAAO,oBAAoB,OAAO,mBAAA;AACtC;AAGA,MAAM,aAAa,CAAC,SAAuC;AACzD,QAAM,2BAAW,IAAA;AACjB,QAAM,QAA4B,CAAA;AAElC,aAAW,OAAO,MAAM;AACtB,QAAI,CAAC,KAAK,IAAI,IAAI,MAAM,GAAG;AACzB,WAAK,IAAI,IAAI,MAAM;AACnB,YAAM,KAAK,EAAE,MAAM,IAAI,QAAQ;AAAA,IACjC;AACA,QAAI,CAAC,KAAK,IAAI,IAAI,MAAM,GAAG;AACzB,WAAK,IAAI,IAAI,MAAM;AACnB,YAAM,KAAK,EAAE,MAAM,IAAI,QAAQ;AAAA,IACjC;AAAA,EACF;AAEA,SAAO;AACT;AAEO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAA4B;AAC1B,QAAM,cAAc,KAAK,SAAS;AAClC,QAAM,cAAc,cAAc,KAAK,MAAM,GAAG,QAAQ,IAAI;AAE5D,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,QAAQ,WAAW,WAAW;AACpC,UAAM,QAAQ,YAAY,IAAI,CAAC,SAAS;AAAA,MACtC,QAAQ,IAAI;AAAA,MACZ,QAAQ,IAAI;AAAA,MACZ,OAAO,IAAI;AAAA,MACX,WAAW,IAAI,QAAQ,EAAE,OAAO,IAAI,UAAU;AAAA,IAAA,EAC9C;AAEF,WAAO;AAAA,MACL,SAAS,EAAE,SAAS,OAAA;AAAA,MACpB,QAAQ;AAAA,QACN;AAAA,UACE,MAAM;AAAA,UACN,MAAM,MAAM,IAAI,CAAC,MAAM,OAAO;AAAA,YAC5B,GAAG;AAAA,YACH,WAAW,EAAE,OAAO,aAAa,IAAI,aAAa,MAAM,EAAA;AAAA,UAAE,EAC1D;AAAA,UACF;AAAA,UACA,UAAU,EAAE,OAAO,YAAA;AAAA,UACnB,WAAW,EAAE,OAAO,YAAqB,WAAW,IAAA;AAAA,QAAI;AAAA,MAC1D;AAAA,IACF;AAAA,EAEJ,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,mBAAmB,CAAC,aAA8B;AACtD,QAAI,aAAa;AACf,eAAS,GAAG,SAAS,CAAC,WAAoB;AACxC,cAAM,IAAI;AACV,YAAI,EAAE,aAAa,UAAU,EAAE,MAAM;AACnC,sBAAY,EAAE,MAAM,EAAE,MAAM,MAAM,QAAQ;AAAA,QAC5C;AAAA,MACF,CAAC;AAAA,IACH;AAEA,QAAI,mBAAmB;AACrB,eAAS,GAAG,eAAe,CAAC,WAAoB;;AAC9C,cAAM,IAAI;AACV,YAAI,EAAE,aAAa,UAAU,EAAE,MAAM;AACnC;AAAA,YACE,EAAE,MAAM,EAAE,MAAM,MAAM,OAAA;AAAA,YACtB,EAAE,KAAG,OAAE,UAAF,mBAAS,YAAW,GAAG,KAAG,OAAE,UAAF,mBAAS,YAAW,EAAA;AAAA,UAAE;AAAA,QAEzD;AAAA,MACF,CAAC;AAAA,IACH;AAEA,iDAAe;AAAA,EACjB;AAEA,QAAM,aAAa,uBAAuB;AAE1C,8BACG,OAAA,EAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GACzC,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAW,OAAO,QACxB,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAW,OAAO,OAAQ,UAAA,OAAM;AAAA,MACnC,WAAW,oBAAC,OAAA,EAAI,WAAW,OAAO,eAAgB,UAAA,QAAA,CAAQ;AAAA,IAAA,GAC7D;AAAA,IAEC,cACC,qBAAC,OAAA,EAAI,WAAW,OAAO,SACpB,UAAA;AAAA,MAAA,4CACE,SAAA,EACC,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,cAAc,UAAA,WAAO;AAAA,QAC7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,YACP,UAAU,CAAC,MAAM,oBAAoB,EAAE,OAAO,KAA0B;AAAA,YAEvE,UAAA,qBAAqB,IAAI,CAAC,QACzB,oBAAC,UAAA,EAAuB,OAAO,IAAI,OAChC,UAAA,IAAI,MAAA,GADM,IAAI,KAEjB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,GACF;AAAA,MAED,4CACE,SAAA,EACC,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,cAAc,UAAA,WAAO;AAAA,QAC7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,YACP,UAAU,CAAC,MAAM,oBAAoB,EAAE,OAAO,KAA0B;AAAA,YAEvE,UAAA,qBAAqB,IAAI,CAAC,QACzB,oBAAC,UAAA,EAAuB,OAAO,IAAI,OAChC,UAAA,IAAI,MAAA,GADM,IAAI,KAEjB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IAGD,eACC,qBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,UAAA;AAAA,MAAA;AAAA,MACrB;AAAA,MAAS;AAAA,MAAK,KAAK;AAAA,MAAO;AAAA,IAAA,GACrC;AAAA,IAGD,aAAa,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,UAAA,oBAAgB;AAAA,IAE7D,CAAC,aAAa,8BACZ,OAAA,EAAI,WAAW,OAAO,OACrB,UAAA;AAAA,MAAA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,MACZ,WACC,oBAAC,UAAA,EAAO,MAAK,UAAS,WAAW,OAAO,aAAa,SAAS,SAAS,UAAA,QAAA,CAEvE;AAAA,IAAA,GAEJ;AAAA,IAGD,CAAC,aAAa,CAAC,SAAS,KAAK,WAAW,KACvC,oBAAC,OAAA,EAAI,WAAW,OAAO,OAAO,UAAA,0BAAA,CAAuB;AAAA,IAGtD,CAAC,aAAa,CAAC,SAAS,KAAK,SAAS,KACrC,oBAAC,OAAA,EAAI,WAAW,OAAO,gBACrB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,QAAQ,QAAQ,WAAW,QAAA;AAAA,QACpC,cAAc;AAAA,MAAA;AAAA,IAAA,EAChB,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,gBAAgB,cAAc;"}