@ktnpm_devops/react-component 0.2.0 → 0.3.0

package/dist/index24.js.map

@@ -1 +1 @@
-{"version":3,"file":"index24.js","sources":["../src/primitives/NavItem/NavItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { NavItemProps } from './NavItem.types';\nimport styles from './NavItem.module.css';\n\nexport const NavItem = forwardRef<HTMLElement, NavItemProps>(\n  ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {\n    const content = (\n      <>\n        {icon && <span className={styles.icon}>{icon}</span>}\n        {!collapsed && <span className={styles.label}>{label}</span>}\n        {!collapsed && badge !== undefined && (\n          <span className={styles.badge}>{badge}</span>\n        )}\n      </>\n    );\n\n    const sharedProps = {\n      className: clsx(styles.root, { [styles.active]: active, [styles.collapsed]: collapsed, [styles.disabled]: disabled }, className),\n      'aria-current': active ? ('page' as const) : undefined,\n      'aria-disabled': disabled || undefined,\n      title: collapsed ? label : undefined,\n    };\n\n    if (href && !disabled) {\n      return (\n        <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} {...sharedProps}>\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={disabled ? undefined : onClick}\n        disabled={disabled}\n        {...sharedProps}\n      >\n        {content}\n      </button>\n    );\n  },\n);\n\nNavItem.displayName = 'NavItem';\n"],"names":[],"mappings":";;;;AAKO,MAAM,UAAU;AAAA,EACrB,CAAC,EAAE,MAAM,OAAO,SAAS,OAAO,OAAO,YAAY,OAAO,WAAW,OAAO,MAAM,SAAS,UAAA,GAAa,QAAQ;AAC9G,UAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,QAAQ,oBAAC,QAAA,EAAK,WAAW,OAAO,MAAO,UAAA,MAAK;AAAA,MAC5C,CAAC,aAAa,oBAAC,UAAK,WAAW,OAAO,OAAQ,UAAA,OAAM;AAAA,MACpD,CAAC,aAAa,UAAU,8BACtB,QAAA,EAAK,WAAW,OAAO,OAAQ,UAAA,MAAA,CAAM;AAAA,IAAA,GAE1C;AAGF,UAAM,cAAc;AAAA,MAClB,WAAW,KAAK,OAAO,MAAM,EAAE,CAAC,OAAO,MAAM,GAAG,QAAQ,CAAC,OAAO,SAAS,GAAG,WAAW,CAAC,OAAO,QAAQ,GAAG,SAAA,GAAY,SAAS;AAAA,MAC/H,gBAAgB,SAAU,SAAmB;AAAA,MAC7C,iBAAiB,YAAY;AAAA,MAC7B,OAAO,YAAY,QAAQ;AAAA,IAAA;AAG7B,QAAI,QAAQ,CAAC,UAAU;AACrB,iCACG,KAAA,EAAE,KAA0C,MAAa,GAAG,aAC1D,UAAA,SACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,SAAS,WAAW,SAAY;AAAA,QAChC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,QAAQ,cAAc;"}
+{"version":3,"file":"index24.js","sources":["../src/composites/MultiSelectDropdown/MultiSelectDropdown.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport styles from './MultiSelectDropdown.module.css';\n\nexport interface MultiSelectOption {\n  value: string;\n  label?: string;\n  count?: number;\n}\n\nexport interface MultiSelectDropdownProps {\n  /** Label displayed on the trigger button. */\n  label: string;\n  /** Available options. */\n  options: MultiSelectOption[];\n  /** Currently selected values (controlled). */\n  selected: string[];\n  /** Called when the user applies a new selection. */\n  onApply: (values: string[], metadata: { selectionMode: 'all' | 'custom' }) => void;\n  /** Show loading indicator and disable controls. */\n  isLoading?: boolean;\n  /** Error message to display in the option list. */\n  error?: string | null;\n  /** Allow creating options from the search term. */\n  allowCustomValues?: boolean;\n  /** Override the trigger value label. */\n  customTriggerLabel?: string;\n  /** Explicit selection mode override. */\n  selectionMode?: 'all' | 'custom';\n}\n\nconst arraysMatch = (a: string[], b: string[]): boolean => {\n  if (a.length !== b.length) return false;\n  const set = new Set(b);\n  return a.every((v) => set.has(v));\n};\n\nexport const MultiSelectDropdown = ({\n  label,\n  options,\n  selected,\n  onApply,\n  isLoading = false,\n  error = null,\n  allowCustomValues = false,\n  customTriggerLabel,\n  selectionMode,\n}: MultiSelectDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchTerm, setSearchTerm] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const normalizedOptions = useMemo<MultiSelectOption[]>(() => {\n    const map = new Map<string, MultiSelectOption>();\n    options.forEach((opt) => map.set(opt.value, opt));\n    if (Array.isArray(selected)) {\n      selected.forEach((v) => {\n        if (v && !map.has(v)) map.set(v, { value: v });\n      });\n    }\n    return Array.from(map.values());\n  }, [options, selected]);\n\n  const filteredOptions = useMemo<MultiSelectOption[]>(() => {\n    if (!searchTerm.trim()) return normalizedOptions;\n    const term = searchTerm.trim().toLowerCase();\n    return normalizedOptions.filter((opt) => {\n      const lbl = opt.label ?? opt.value;\n      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);\n    });\n  }, [normalizedOptions, searchTerm]);\n\n  const allOptionValues = useMemo(() => normalizedOptions.map((o) => o.value), [normalizedOptions]);\n\n  const initialSelection = useMemo(\n    () => (Array.isArray(selected) && selected.length ? Array.from(new Set(selected)) : allOptionValues),\n    [selected, allOptionValues],\n  );\n\n  const [pendingSelection, setPendingSelection] = useState<string[]>(initialSelection);\n\n  const closeAndReset = useCallback(() => {\n    setIsOpen(false);\n    setPendingSelection(initialSelection);\n    setSearchTerm('');\n  }, [initialSelection]);\n\n  useClickOutside(containerRef, closeAndReset);\n\n  useEffect(() => {\n    if (isOpen) {\n      setPendingSelection(initialSelection);\n      setSearchTerm('');\n    }\n  }, [isOpen, initialSelection]);\n\n  useEffect(() => {\n    if (!isOpen) setPendingSelection(initialSelection);\n  }, [initialSelection, isOpen]);\n\n  const handleToggleOption = (value: string) => {\n    setPendingSelection((prev) => {\n      const unique = Array.from(new Set(prev));\n      return unique.includes(value) ? unique.filter((v) => v !== value) : [...unique, value];\n    });\n  };\n\n  const handleSelectAll = () => {\n    if (filteredOptions.length === 0) {\n      setPendingSelection([]);\n      return;\n    }\n    setPendingSelection(filteredOptions.map((o) => o.value));\n  };\n\n  const handleClearAll = () => setPendingSelection([]);\n\n  const handleApply = () => {\n    const unique = Array.from(new Set(pendingSelection));\n    const mode: 'all' | 'custom' =\n      unique.length === 0 || unique.length === normalizedOptions.length ? 'all' : 'custom';\n    onApply(unique, { selectionMode: mode });\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    setPendingSelection(Array.from(new Set(Array.isArray(selected) ? selected : [])));\n    setIsOpen(false);\n  };\n\n  const pendingSet = useMemo(() => new Set(pendingSelection), [pendingSelection]);\n  const selectedSet = useMemo(() => new Set(Array.isArray(selected) ? selected : []), [selected]);\n  const hasChanges = !arraysMatch(Array.from(pendingSet), Array.from(selectedSet));\n\n  const totalOptions = normalizedOptions.length;\n  const selectedSize = selectedSet.size;\n  const pendingSize = pendingSet.size;\n  const isSelectedAll = selectedSize === 0 || selectedSize === totalOptions;\n  const isPendingAll = pendingSize === 0 || pendingSize === totalOptions;\n  const selectedCountValue = isSelectedAll ? totalOptions : selectedSize;\n  const pendingCountValue = isPendingAll ? totalOptions : pendingSize;\n\n  const isActiveFilter = selectionMode !== undefined ? selectionMode === 'custom' : !isSelectedAll;\n\n  const getSelectedLabel = (): string => {\n    if (isSelectedAll) return 'All';\n    if (selectedSize === 1) {\n      const val = Array.from(selectedSet)[0];\n      const opt = normalizedOptions.find((o) => o.value === val);\n      return opt?.label || opt?.value || String(selectedCountValue);\n    }\n    return String(selectedCountValue);\n  };\n\n  const shouldDisableControls = isLoading || options.length === 0;\n\n  const normalizedSearch = searchTerm.trim();\n  const canCreateCustom =\n    allowCustomValues &&\n    normalizedSearch.length > 0 &&\n    !normalizedOptions.some((o) => o.value.toLowerCase() === normalizedSearch.toLowerCase());\n\n  const handleCreateCustom = () => {\n    if (!normalizedSearch) return;\n    setPendingSelection((prev) => Array.from(new Set([...prev, normalizedSearch])));\n    setSearchTerm('');\n  };\n\n  const handleClearFilter = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onApply([], { selectionMode: 'all' });\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <button\n        type=\"button\"\n        className={clsx(styles.trigger, { [styles.active]: isOpen })}\n        onClick={() => setIsOpen((prev) => !prev)}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n      >\n        <div className={styles.triggerContent}>\n          <svg className={styles.chevron} width={ICON_SIZE.MD} height={ICON_SIZE.MD} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n          <span className={styles.label}>{label}</span>\n          <div className={styles.valueGroup}>\n            <span className={styles.value}>{customTriggerLabel || getSelectedLabel()}</span>\n            {isActiveFilter && (\n              <span className={styles.badge}>{selectedCountValue}</span>\n            )}\n            {isActiveFilter && (\n              <div\n                role=\"button\"\n                tabIndex={0}\n                className={styles.clear}\n                onClick={handleClearFilter}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    handleClearFilter(e as unknown as React.MouseEvent);\n                  }\n                }}\n                aria-label={`Clear ${label} filter`}\n              >\n                <svg width={ICON_SIZE.SM} height={ICON_SIZE.SM} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n                </svg>\n              </div>\n            )}\n          </div>\n        </div>\n      </button>\n\n      {isOpen && (\n        <div className={styles.panel} role=\"dialog\" aria-label={`${label} filter`}>\n          <div className={styles.header}>\n            <input\n              type=\"search\"\n              className={styles.search}\n              placeholder={`Search ${label.toLowerCase()}`}\n              value={searchTerm}\n              onChange={(e) => setSearchTerm(e.target.value)}\n              disabled={shouldDisableControls}\n            />\n            <div className={styles.headerActions}>\n              <button type=\"button\" className={styles.chip} onClick={handleSelectAll} disabled={shouldDisableControls}>\n                Select all\n              </button>\n              <button type=\"button\" className={clsx(styles.chip, styles.chipGhost)} onClick={handleClearAll} disabled={pendingSize === 0}>\n                Deselect all\n              </button>\n            </div>\n          </div>\n\n          <div className={styles.list} role=\"listbox\">\n            {isLoading && <p className={styles.status}>Loading options...</p>}\n            {!isLoading && error && <p className={clsx(styles.status, styles.statusError)}>{error}</p>}\n            {!isLoading && !error && filteredOptions.length === 0 && (\n              <p className={styles.status}>No matches</p>\n            )}\n            {!isLoading &&\n              !error &&\n              filteredOptions.map((opt) => {\n                const checked = pendingSet.has(opt.value);\n                return (\n                  <label key={opt.value} className={styles.option}>\n                    <input\n                      type=\"checkbox\"\n                      checked={checked}\n                      onChange={() => handleToggleOption(opt.value)}\n                      aria-checked={checked}\n                    />\n                    <span className={styles.optionLabel}>\n                      {opt.label ?? opt.value}\n                      {opt.count !== undefined && (\n                        <span className={styles.optionCount}>{opt.count}</span>\n                      )}\n                    </span>\n                  </label>\n                );\n              })}\n            {!isLoading && !error && canCreateCustom && (\n              <button type=\"button\" className={styles.create} onClick={handleCreateCustom}>\n                Use &quot;{normalizedSearch}&quot;\n              </button>\n            )}\n          </div>\n\n          <div className={styles.footer}>\n            <span className={styles.selection}>\n              {isPendingAll ? 'All selected' : `${pendingCountValue} selected`}\n              {hasChanges && (\n                <span className={styles.selectionDelta}>\n                  ({pendingCountValue - selectedCountValue >= 0 ? '+' : ''}\n                  {pendingCountValue - selectedCountValue})\n                </span>\n              )}\n            </span>\n            <div className={styles.footerActions}>\n              <button type=\"button\" className={clsx(styles.chip, styles.chipGhost)} onClick={handleCancel}>\n                Cancel\n              </button>\n              <button type=\"button\" className={styles.chip} onClick={handleApply} disabled={!hasChanges}>\n                Apply\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index25.cjs

@@ -2,81 +2,37 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const constants = require("./index38.cjs");
-const ResizableSplitPanel_module = require("./index63.cjs");
-const FULL_PERCENT = 100;
-const ResizableSplitPanel = ({
-  leftPanel,
-  rightPanel,
-  defaultLeftWidth = 50,
-  minLeftWidth = 30,
-  minRightWidth = 30
-}) => {
-  const [leftWidth, setLeftWidth] = react.useState(defaultLeftWidth);
-  const [isDragging, setIsDragging] = react.useState(false);
-  const containerRef = react.useRef(null);
-  const clampWidth = react.useCallback(
-    (w) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),
-    [minLeftWidth, minRightWidth]
-  );
-  const handleMouseDown = react.useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-  const handleMouseMove = react.useCallback(
-    (e) => {
-      if (!isDragging || !containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const pct = (e.clientX - rect.left) / rect.width * FULL_PERCENT;
-      setLeftWidth(clampWidth(pct));
-    },
-    [isDragging, clampWidth]
-  );
-  const handleMouseUp = react.useCallback(() => setIsDragging(false), []);
-  react.useEffect(() => {
-    if (!isDragging) return;
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
+const clsx = require("./index36.cjs");
+const NavItem_module = require("./index60.cjs");
+const NavItem = react.forwardRef(
+  ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: NavItem_module.default.icon, children: icon }),
+      !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: NavItem_module.default.label, children: label }),
+      !collapsed && badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: NavItem_module.default.badge, children: badge })
+    ] });
+    const sharedProps = {
+      className: clsx.clsx(NavItem_module.default.root, { [NavItem_module.default.active]: active, [NavItem_module.default.collapsed]: collapsed, [NavItem_module.default.disabled]: disabled }, className),
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": disabled || void 0,
+      title: collapsed ? label : void 0
     };
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      setLeftWidth((w) => clampWidth(w + constants.KEYBOARD_STEP));
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      setLeftWidth((w) => clampWidth(w - constants.KEYBOARD_STEP));
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { ref, href, ...sharedProps, children: content });
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResizableSplitPanel_module.default.root, ref: containerRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.left, style: { width: `${leftWidth}%` }, children: leftPanel }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        className: ResizableSplitPanel_module.default.divider,
-        onMouseDown: handleMouseDown,
-        onKeyDown: handleKeyDown,
-        role: "separator",
-        "aria-orientation": "vertical",
-        "aria-valuenow": Math.round(leftWidth),
-        "aria-label": "Resize panels",
-        tabIndex: 0,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.dividerHandle, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 4, height: 24, viewBox: "0 0 4 24", fill: "none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 6, r: 1.5, fill: "currentColor" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 12, r: 1.5, fill: "currentColor" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 18, r: 1.5, fill: "currentColor" })
-        ] }) })
+        ref,
+        type: "button",
+        onClick: disabled ? void 0 : onClick,
+        disabled,
+        ...sharedProps,
+        children: content
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.right, style: { width: `${FULL_PERCENT - leftWidth}%` }, children: rightPanel })
-  ] });
-};
-exports.ResizableSplitPanel = ResizableSplitPanel;
+    );
+  }
+);
+NavItem.displayName = "NavItem";
+exports.NavItem = NavItem;
 //# sourceMappingURL=index25.cjs.map

package/dist/index25.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index25.cjs","sources":["../src/composites/ResizableSplitPanel/ResizableSplitPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';\nimport { KEYBOARD_STEP } from '../../constants';\nimport styles from './ResizableSplitPanel.module.css';\n\nexport interface ResizableSplitPanelProps {\n  /** Content for the left panel. */\n  leftPanel: ReactNode;\n  /** Content for the right panel. */\n  rightPanel: ReactNode;\n  /** Default left panel width as a percentage (0-100). */\n  defaultLeftWidth?: number;\n  /** Minimum left panel width as a percentage. */\n  minLeftWidth?: number;\n  /** Minimum right panel width as a percentage. */\n  minRightWidth?: number;\n}\n\nconst FULL_PERCENT = 100;\n\nexport const ResizableSplitPanel = ({\n  leftPanel,\n  rightPanel,\n  defaultLeftWidth = 50,\n  minLeftWidth = 30,\n  minRightWidth = 30,\n}: ResizableSplitPanelProps) => {\n  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);\n  const [isDragging, setIsDragging] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const clampWidth = useCallback(\n    (w: number) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),\n    [minLeftWidth, minRightWidth],\n  );\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    setIsDragging(true);\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging || !containerRef.current) return;\n      const rect = containerRef.current.getBoundingClientRect();\n      const pct = ((e.clientX - rect.left) / rect.width) * FULL_PERCENT;\n      setLeftWidth(clampWidth(pct));\n    },\n    [isDragging, clampWidth],\n  );\n\n  const handleMouseUp = useCallback(() => setIsDragging(false), []);\n\n  useEffect(() => {\n    if (!isDragging) return;\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n    };\n  }, [isDragging, handleMouseMove, handleMouseUp]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w + KEYBOARD_STEP));\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w - KEYBOARD_STEP));\n    }\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <div className={styles.left} style={{ width: `${leftWidth}%` }}>\n        {leftPanel}\n      </div>\n      <div\n        className={styles.divider}\n        onMouseDown={handleMouseDown}\n        onKeyDown={handleKeyDown}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-valuenow={Math.round(leftWidth)}\n        aria-label=\"Resize panels\"\n        tabIndex={0}\n      >\n        <div className={styles.dividerHandle}>\n          <svg width={4} height={24} viewBox=\"0 0 4 24\" fill=\"none\">\n            <circle cx={2} cy={6} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={12} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={18} r={1.5} fill=\"currentColor\" />\n          </svg>\n        </div>\n      </div>\n      <div className={styles.right} style={{ width: `${FULL_PERCENT - leftWidth}%` }}>\n        {rightPanel}\n      </div>\n    </div>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","KEYBOARD_STEP","styles","jsx","jsxs"],"mappings":"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"}
+{"version":3,"file":"index25.cjs","sources":["../src/primitives/NavItem/NavItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { NavItemProps } from './NavItem.types';\nimport styles from './NavItem.module.css';\n\nexport const NavItem = forwardRef<HTMLElement, NavItemProps>(\n  ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {\n    const content = (\n      <>\n        {icon && <span className={styles.icon}>{icon}</span>}\n        {!collapsed && <span className={styles.label}>{label}</span>}\n        {!collapsed && badge !== undefined && (\n          <span className={styles.badge}>{badge}</span>\n        )}\n      </>\n    );\n\n    const sharedProps = {\n      className: clsx(styles.root, { [styles.active]: active, [styles.collapsed]: collapsed, [styles.disabled]: disabled }, className),\n      'aria-current': active ? ('page' as const) : undefined,\n      'aria-disabled': disabled || undefined,\n      title: collapsed ? label : undefined,\n    };\n\n    if (href && !disabled) {\n      return (\n        <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} {...sharedProps}>\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={disabled ? undefined : onClick}\n        disabled={disabled}\n        {...sharedProps}\n      >\n        {content}\n      </button>\n    );\n  },\n);\n\nNavItem.displayName = 'NavItem';\n"],"names":["forwardRef","jsxs","Fragment","jsx","styles","clsx"],"mappings":";;;;;;AAKO,MAAM,UAAUA,MAAAA;AAAAA,EACrB,CAAC,EAAE,MAAM,OAAO,SAAS,OAAO,OAAO,YAAY,OAAO,WAAW,OAAO,MAAM,SAAS,UAAA,GAAa,QAAQ;AAC9G,UAAM,UACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA,QAAQC,2BAAAA,IAAC,QAAA,EAAK,WAAWC,eAAAA,QAAO,MAAO,UAAA,MAAK;AAAA,MAC5C,CAAC,aAAaD,+BAAC,UAAK,WAAWC,eAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,MACpD,CAAC,aAAa,UAAU,yCACtB,QAAA,EAAK,WAAWA,eAAAA,QAAO,OAAQ,UAAA,MAAA,CAAM;AAAA,IAAA,GAE1C;AAGF,UAAM,cAAc;AAAA,MAClB,WAAWC,KAAAA,KAAKD,uBAAO,MAAM,EAAE,CAACA,eAAAA,QAAO,MAAM,GAAG,QAAQ,CAACA,eAAAA,QAAO,SAAS,GAAG,WAAW,CAACA,eAAAA,QAAO,QAAQ,GAAG,SAAA,GAAY,SAAS;AAAA,MAC/H,gBAAgB,SAAU,SAAmB;AAAA,MAC7C,iBAAiB,YAAY;AAAA,MAC7B,OAAO,YAAY,QAAQ;AAAA,IAAA;AAG7B,QAAI,QAAQ,CAAC,UAAU;AACrB,4CACG,KAAA,EAAE,KAA0C,MAAa,GAAG,aAC1D,UAAA,SACH;AAAA,IAEJ;AAEA,WACED,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,SAAS,WAAW,SAAY;AAAA,QAChC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,QAAQ,cAAc;;"}

package/dist/index25.js

@@ -1,82 +1,38 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect } from "react";
-import { KEYBOARD_STEP } from "./index38.js";
-import styles from "./index63.js";
-const FULL_PERCENT = 100;
-const ResizableSplitPanel = ({
-  leftPanel,
-  rightPanel,
-  defaultLeftWidth = 50,
-  minLeftWidth = 30,
-  minRightWidth = 30
-}) => {
-  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);
-  const [isDragging, setIsDragging] = useState(false);
-  const containerRef = useRef(null);
-  const clampWidth = useCallback(
-    (w) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),
-    [minLeftWidth, minRightWidth]
-  );
-  const handleMouseDown = useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-  const handleMouseMove = useCallback(
-    (e) => {
-      if (!isDragging || !containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const pct = (e.clientX - rect.left) / rect.width * FULL_PERCENT;
-      setLeftWidth(clampWidth(pct));
-    },
-    [isDragging, clampWidth]
-  );
-  const handleMouseUp = useCallback(() => setIsDragging(false), []);
-  useEffect(() => {
-    if (!isDragging) return;
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "./index36.js";
+import styles from "./index60.js";
+const NavItem = forwardRef(
+  ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
+      !collapsed && /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+      !collapsed && badge !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.badge, children: badge })
+    ] });
+    const sharedProps = {
+      className: clsx(styles.root, { [styles.active]: active, [styles.collapsed]: collapsed, [styles.disabled]: disabled }, className),
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": disabled || void 0,
+      title: collapsed ? label : void 0
     };
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      setLeftWidth((w) => clampWidth(w + KEYBOARD_STEP));
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      setLeftWidth((w) => clampWidth(w - KEYBOARD_STEP));
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsx("a", { ref, href, ...sharedProps, children: content });
     }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: styles.root, ref: containerRef, children: [
-    /* @__PURE__ */ jsx("div", { className: styles.left, style: { width: `${leftWidth}%` }, children: leftPanel }),
-    /* @__PURE__ */ jsx(
-      "div",
+    return /* @__PURE__ */ jsx(
+      "button",
       {
-        className: styles.divider,
-        onMouseDown: handleMouseDown,
-        onKeyDown: handleKeyDown,
-        role: "separator",
-        "aria-orientation": "vertical",
-        "aria-valuenow": Math.round(leftWidth),
-        "aria-label": "Resize panels",
-        tabIndex: 0,
-        children: /* @__PURE__ */ jsx("div", { className: styles.dividerHandle, children: /* @__PURE__ */ jsxs("svg", { width: 4, height: 24, viewBox: "0 0 4 24", fill: "none", children: [
-          /* @__PURE__ */ jsx("circle", { cx: 2, cy: 6, r: 1.5, fill: "currentColor" }),
-          /* @__PURE__ */ jsx("circle", { cx: 2, cy: 12, r: 1.5, fill: "currentColor" }),
-          /* @__PURE__ */ jsx("circle", { cx: 2, cy: 18, r: 1.5, fill: "currentColor" })
-        ] }) })
+        ref,
+        type: "button",
+        onClick: disabled ? void 0 : onClick,
+        disabled,
+        ...sharedProps,
+        children: content
       }
-    ),
-    /* @__PURE__ */ jsx("div", { className: styles.right, style: { width: `${FULL_PERCENT - leftWidth}%` }, children: rightPanel })
-  ] });
-};
+    );
+  }
+);
+NavItem.displayName = "NavItem";
 export {
-  ResizableSplitPanel
+  NavItem
 };
 //# sourceMappingURL=index25.js.map

package/dist/index25.js.map

@@ -1 +1 @@
-{"version":3,"file":"index25.js","sources":["../src/composites/ResizableSplitPanel/ResizableSplitPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';\nimport { KEYBOARD_STEP } from '../../constants';\nimport styles from './ResizableSplitPanel.module.css';\n\nexport interface ResizableSplitPanelProps {\n  /** Content for the left panel. */\n  leftPanel: ReactNode;\n  /** Content for the right panel. */\n  rightPanel: ReactNode;\n  /** Default left panel width as a percentage (0-100). */\n  defaultLeftWidth?: number;\n  /** Minimum left panel width as a percentage. */\n  minLeftWidth?: number;\n  /** Minimum right panel width as a percentage. */\n  minRightWidth?: number;\n}\n\nconst FULL_PERCENT = 100;\n\nexport const ResizableSplitPanel = ({\n  leftPanel,\n  rightPanel,\n  defaultLeftWidth = 50,\n  minLeftWidth = 30,\n  minRightWidth = 30,\n}: ResizableSplitPanelProps) => {\n  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);\n  const [isDragging, setIsDragging] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const clampWidth = useCallback(\n    (w: number) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),\n    [minLeftWidth, minRightWidth],\n  );\n\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    setIsDragging(true);\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging || !containerRef.current) return;\n      const rect = containerRef.current.getBoundingClientRect();\n      const pct = ((e.clientX - rect.left) / rect.width) * FULL_PERCENT;\n      setLeftWidth(clampWidth(pct));\n    },\n    [isDragging, clampWidth],\n  );\n\n  const handleMouseUp = useCallback(() => setIsDragging(false), []);\n\n  useEffect(() => {\n    if (!isDragging) return;\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n    };\n  }, [isDragging, handleMouseMove, handleMouseUp]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w + KEYBOARD_STEP));\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      setLeftWidth((w) => clampWidth(w - KEYBOARD_STEP));\n    }\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <div className={styles.left} style={{ width: `${leftWidth}%` }}>\n        {leftPanel}\n      </div>\n      <div\n        className={styles.divider}\n        onMouseDown={handleMouseDown}\n        onKeyDown={handleKeyDown}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-valuenow={Math.round(leftWidth)}\n        aria-label=\"Resize panels\"\n        tabIndex={0}\n      >\n        <div className={styles.dividerHandle}>\n          <svg width={4} height={24} viewBox=\"0 0 4 24\" fill=\"none\">\n            <circle cx={2} cy={6} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={12} r={1.5} fill=\"currentColor\" />\n            <circle cx={2} cy={18} r={1.5} fill=\"currentColor\" />\n          </svg>\n        </div>\n      </div>\n      <div className={styles.right} style={{ width: `${FULL_PERCENT - leftWidth}%` }}>\n        {rightPanel}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index25.js","sources":["../src/primitives/NavItem/NavItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { NavItemProps } from './NavItem.types';\nimport styles from './NavItem.module.css';\n\nexport const NavItem = forwardRef<HTMLElement, NavItemProps>(\n  ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {\n    const content = (\n      <>\n        {icon && <span className={styles.icon}>{icon}</span>}\n        {!collapsed && <span className={styles.label}>{label}</span>}\n        {!collapsed && badge !== undefined && (\n          <span className={styles.badge}>{badge}</span>\n        )}\n      </>\n    );\n\n    const sharedProps = {\n      className: clsx(styles.root, { [styles.active]: active, [styles.collapsed]: collapsed, [styles.disabled]: disabled }, className),\n      'aria-current': active ? ('page' as const) : undefined,\n      'aria-disabled': disabled || undefined,\n      title: collapsed ? label : undefined,\n    };\n\n    if (href && !disabled) {\n      return (\n        <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} {...sharedProps}>\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={disabled ? undefined : onClick}\n        disabled={disabled}\n        {...sharedProps}\n      >\n        {content}\n      </button>\n    );\n  },\n);\n\nNavItem.displayName = 'NavItem';\n"],"names":[],"mappings":";;;;AAKO,MAAM,UAAU;AAAA,EACrB,CAAC,EAAE,MAAM,OAAO,SAAS,OAAO,OAAO,YAAY,OAAO,WAAW,OAAO,MAAM,SAAS,UAAA,GAAa,QAAQ;AAC9G,UAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,QAAQ,oBAAC,QAAA,EAAK,WAAW,OAAO,MAAO,UAAA,MAAK;AAAA,MAC5C,CAAC,aAAa,oBAAC,UAAK,WAAW,OAAO,OAAQ,UAAA,OAAM;AAAA,MACpD,CAAC,aAAa,UAAU,8BACtB,QAAA,EAAK,WAAW,OAAO,OAAQ,UAAA,MAAA,CAAM;AAAA,IAAA,GAE1C;AAGF,UAAM,cAAc;AAAA,MAClB,WAAW,KAAK,OAAO,MAAM,EAAE,CAAC,OAAO,MAAM,GAAG,QAAQ,CAAC,OAAO,SAAS,GAAG,WAAW,CAAC,OAAO,QAAQ,GAAG,SAAA,GAAY,SAAS;AAAA,MAC/H,gBAAgB,SAAU,SAAmB;AAAA,MAC7C,iBAAiB,YAAY;AAAA,MAC7B,OAAO,YAAY,QAAQ;AAAA,IAAA;AAG7B,QAAI,QAAQ,CAAC,UAAU;AACrB,iCACG,KAAA,EAAE,KAA0C,MAAa,GAAG,aAC1D,UAAA,SACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,SAAS,WAAW,SAAY;AAAA,QAChC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,QAAQ,cAAc;"}

package/dist/index26.cjs

@@ -2,156 +2,81 @@
 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("./index35.cjs");
-const constants = require("./index38.cjs");
-const SankeyChartCard_module = require("./index50.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 nodes;
-};
-const SankeyChartCard = ({
-  title,
-  rows,
-  isLoading = false,
-  error = null,
-  onRetry,
-  onChartReady,
-  actions,
-  className,
-  colorMetric = "deviation",
-  widthMetric = "slots",
-  onColorMetricChange,
-  onWidthMetricChange,
-  onNodeClick,
-  onNodeContextMenu,
-  maxNodes = constants.MAX_SANKEY_NODES
+const constants = require("./index39.cjs");
+const ResizableSplitPanel_module = require("./index43.cjs");
+const FULL_PERCENT = 100;
+const ResizableSplitPanel = ({
+  leftPanel,
+  rightPanel,
+  defaultLeftWidth = 50,
+  minLeftWidth = 30,
+  minRightWidth = 30
 }) => {
-  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 }
-        }
-      ]
+  const [leftWidth, setLeftWidth] = react.useState(defaultLeftWidth);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const containerRef = react.useRef(null);
+  const clampWidth = react.useCallback(
+    (w) => Math.max(minLeftWidth, Math.min(FULL_PERCENT - minRightWidth, w)),
+    [minLeftWidth, minRightWidth]
+  );
+  const handleMouseDown = react.useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  const handleMouseMove = react.useCallback(
+    (e) => {
+      if (!isDragging || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const pct = (e.clientX - rect.left) / rect.width * FULL_PERCENT;
+      setLeftWidth(clampWidth(pct));
+    },
+    [isDragging, clampWidth]
+  );
+  const handleMouseUp = react.useCallback(() => setIsDragging(false), []);
+  react.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
     };
-  }, [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 }
-          );
-        }
-      });
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      setLeftWidth((w) => clampWidth(w + constants.KEYBOARD_STEP));
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      setLeftWidth((w) => clampWidth(w - constants.KEYBOARD_STEP));
     }
-    onChartReady == null ? void 0 : onChartReady(instance);
   };
-  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",
-          {
-            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,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResizableSplitPanel_module.default.root, ref: containerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.left, style: { width: `${leftWidth}%` }, children: leftPanel }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        option,
-        style: { height: "100%", minHeight: "25rem" },
-        onChartReady: handleChartReady
+        className: ResizableSplitPanel_module.default.divider,
+        onMouseDown: handleMouseDown,
+        onKeyDown: handleKeyDown,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-valuenow": Math.round(leftWidth),
+        "aria-label": "Resize panels",
+        tabIndex: 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.dividerHandle, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 4, height: 24, viewBox: "0 0 4 24", fill: "none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 6, r: 1.5, fill: "currentColor" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 12, r: 1.5, fill: "currentColor" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 2, cy: 18, r: 1.5, fill: "currentColor" })
+        ] }) })
       }
-    ) })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResizableSplitPanel_module.default.right, style: { width: `${FULL_PERCENT - leftWidth}%` }, children: rightPanel })
   ] });
 };
-SankeyChartCard.displayName = "SankeyChartCard";
-exports.SankeyChartCard = SankeyChartCard;
+exports.ResizableSplitPanel = ResizableSplitPanel;
 //# sourceMappingURL=index26.cjs.map