@ktnpm_devops/react-component 0.12.0 → 0.13.0

package/dist/index32.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index32.cjs","sources":["../src/composites/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';\nimport { Check } from 'lucide-react';\nimport clsx from 'clsx';\nimport { Modal } from '../../primitives/Modal';\nimport { ICON_SIZE } from '../../constants';\nimport type { LoadingHandle, LoadingProps, LoadingStepStatus } from './Loading.types';\nimport styles from './Loading.module.css';\n\nconst noop = (): void => {};\n\nconst LoadingBase = forwardRef<LoadingHandle, LoadingProps>(\n  ({ open = true, onlyThrobber = false, title, labels = [], closable = false, onClose }, ref) => {\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    useEffect(() => {\n      if (open) setActiveIndex(0);\n    }, [open]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        activate: (labelOrIndex) => {\n          const index = typeof labelOrIndex === 'number' ? labelOrIndex : labels.indexOf(labelOrIndex);\n          if (index >= 0) setActiveIndex(index);\n        },\n        complete: () => setActiveIndex(labels.length),\n      }),\n      [labels],\n    );\n\n    if (!open) return null;\n\n    if (onlyThrobber) {\n      return (\n        <div className={styles.throbber} role=\"status\" aria-label={title}>\n          <span className={styles.spinner} aria-hidden=\"true\" />\n        </div>\n      );\n    }\n\n    return (\n      <Modal\n        open={open}\n        onClose={closable ? (onClose ?? noop) : noop}\n        className={closable ? undefined : styles.nonClosable}\n        title={\n          <span className={styles.titleRow}>\n            <span className={styles.titleSpinner} aria-hidden=\"true\" />\n            {title}\n          </span>\n        }\n      >\n        <ul className={styles.steps}>\n          {labels.map((label, index) => {\n            const status: LoadingStepStatus =\n              index < activeIndex ? 'done' : index === activeIndex ? 'active' : 'pending';\n            return (\n              <li key={label} className={clsx(styles.step, styles[status])}>\n                <span className={styles.iconSlot} aria-hidden=\"true\">\n                  {status === 'done' && <Check size={ICON_SIZE.MD} className={styles.checkIcon} />}\n                  {status === 'active' && <span className={styles.stepSpinner} />}\n                </span>\n                <span>{label}</span>\n              </li>\n            );\n          })}\n        </ul>\n      </Modal>\n    );\n  },\n);\n\nLoadingBase.displayName = 'Loading';\n\nexport const Loading = memo(LoadingBase);\n"],"names":["forwardRef","useState","useEffect","useImperativeHandle","styles","jsx","Modal","jsxs","clsx","Check","ICON_SIZE","memo"],"mappings":";;;;;;;;;AAQA,MAAM,OAAO,MAAY;AAAC;AAE1B,MAAM,cAAcA,MAAAA;AAAAA,EAClB,CAAC,EAAE,OAAO,MAAM,eAAe,OAAO,OAAO,SAAS,CAAA,GAAI,WAAW,OAAO,QAAA,GAAW,QAAQ;AAC7F,UAAM,CAAC,aAAa,cAAc,IAAIC,MAAAA,SAAS,CAAC;AAEhDC,UAAAA,UAAU,MAAM;AACd,UAAI,qBAAqB,CAAC;AAAA,IAC5B,GAAG,CAAC,IAAI,CAAC;AAETC,UAAAA;AAAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,UAAU,CAAC,iBAAiB;AAC1B,gBAAM,QAAQ,OAAO,iBAAiB,WAAW,eAAe,OAAO,QAAQ,YAAY;AAC3F,cAAI,SAAS,EAAG,gBAAe,KAAK;AAAA,QACtC;AAAA,QACA,UAAU,MAAM,eAAe,OAAO,MAAM;AAAA,MAAA;AAAA,MAE9C,CAAC,MAAM;AAAA,IAAA;AAGT,QAAI,CAAC,KAAM,QAAO;AAElB,QAAI,cAAc;AAChB,4CACG,OAAA,EAAI,WAAWC,eAAAA,QAAO,UAAU,MAAK,UAAS,cAAY,OACzD,UAAAC,2BAAAA,IAAC,UAAK,WAAWD,eAAAA,QAAO,SAAS,eAAY,QAAO,GACtD;AAAA,IAEJ;AAEA,WACEC,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS,WAAY,WAAW,OAAQ;AAAA,QACxC,WAAW,WAAW,SAAYF,eAAAA,QAAO;AAAA,QACzC,OACEG,2BAAAA,KAAC,QAAA,EAAK,WAAWH,eAAAA,QAAO,UACtB,UAAA;AAAA,UAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAWD,eAAAA,QAAO,cAAc,eAAY,QAAO;AAAA,UACxD;AAAA,QAAA,GACH;AAAA,QAGF,UAAAC,2BAAAA,IAAC,QAAG,WAAWD,eAAAA,QAAO,OACnB,UAAA,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,gBAAM,SACJ,QAAQ,cAAc,SAAS,UAAU,cAAc,WAAW;AACpE,iBACEG,gCAAC,QAAe,WAAWC,KAAAA,KAAKJ,uBAAO,MAAMA,eAAAA,QAAO,MAAM,CAAC,GACzD,UAAA;AAAA,YAAAG,gCAAC,QAAA,EAAK,WAAWH,eAAAA,QAAO,UAAU,eAAY,QAC3C,UAAA;AAAA,cAAA,WAAW,yCAAWK,YAAAA,OAAA,EAAM,MAAMC,UAAAA,UAAU,IAAI,WAAWN,eAAAA,QAAO,UAAA,CAAW;AAAA,cAC7E,WAAW,YAAYC,+BAAC,QAAA,EAAK,WAAWD,eAAAA,QAAO,YAAA,CAAa;AAAA,YAAA,GAC/D;AAAA,YACAC,2BAAAA,IAAC,UAAM,UAAA,MAAA,CAAM;AAAA,UAAA,EAAA,GALN,KAMT;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;AAEnB,MAAM,UAAUM,MAAAA,KAAK,WAAW;;"}
+{"version":3,"file":"index32.cjs","sources":["../src/primitives/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Input.module.css';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input ref={ref} type={type} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nInput.displayName = 'Input';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,QAAQA,MAAAA;AAAAA,EACnB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,SAAS,QACvCC,2BAAAA,IAAC,WAAM,KAAU,MAAY,WAAWC,UAAKC,aAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAErF;AAEA,MAAM,cAAc;;"}

package/dist/index32.js

@@ -1,60 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, forwardRef, useState, useEffect, useImperativeHandle } from "react";
-import { Check } from "lucide-react";
-import { clsx } from "./index55.js";
-import { ICON_SIZE } from "./index62.js";
-import styles from "./index67.js";
-import { Modal } from "./index33.js";
-const noop = () => {
-};
-const LoadingBase = forwardRef(
-  ({ open = true, onlyThrobber = false, title, labels = [], closable = false, onClose }, ref) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    useEffect(() => {
-      if (open) setActiveIndex(0);
-    }, [open]);
-    useImperativeHandle(
-      ref,
-      () => ({
-        activate: (labelOrIndex) => {
-          const index = typeof labelOrIndex === "number" ? labelOrIndex : labels.indexOf(labelOrIndex);
-          if (index >= 0) setActiveIndex(index);
-        },
-        complete: () => setActiveIndex(labels.length)
-      }),
-      [labels]
-    );
-    if (!open) return null;
-    if (onlyThrobber) {
-      return /* @__PURE__ */ jsx("div", { className: styles.throbber, role: "status", "aria-label": title, children: /* @__PURE__ */ jsx("span", { className: styles.spinner, "aria-hidden": "true" }) });
-    }
-    return /* @__PURE__ */ jsx(
-      Modal,
-      {
-        open,
-        onClose: closable ? onClose ?? noop : noop,
-        className: closable ? void 0 : styles.nonClosable,
-        title: /* @__PURE__ */ jsxs("span", { className: styles.titleRow, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.titleSpinner, "aria-hidden": "true" }),
-          title
-        ] }),
-        children: /* @__PURE__ */ jsx("ul", { className: styles.steps, children: labels.map((label, index) => {
-          const status = index < activeIndex ? "done" : index === activeIndex ? "active" : "pending";
-          return /* @__PURE__ */ jsxs("li", { className: clsx(styles.step, styles[status]), children: [
-            /* @__PURE__ */ jsxs("span", { className: styles.iconSlot, "aria-hidden": "true", children: [
-              status === "done" && /* @__PURE__ */ jsx(Check, { size: ICON_SIZE.MD, className: styles.checkIcon }),
-              status === "active" && /* @__PURE__ */ jsx("span", { className: styles.stepSpinner })
-            ] }),
-            /* @__PURE__ */ jsx("span", { children: label })
-          ] }, label);
-        }) })
-      }
-    );
-  }
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "./index57.js";
+import styles from "./index66.js";
+const Input = forwardRef(
+  ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx("input", { ref, type, className: clsx(styles.root, className), ...props })
 );
-LoadingBase.displayName = "Loading";
-const Loading = memo(LoadingBase);
+Input.displayName = "Input";
 export {
-  Loading
+  Input
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/composites/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';\nimport { Check } from 'lucide-react';\nimport clsx from 'clsx';\nimport { Modal } from '../../primitives/Modal';\nimport { ICON_SIZE } from '../../constants';\nimport type { LoadingHandle, LoadingProps, LoadingStepStatus } from './Loading.types';\nimport styles from './Loading.module.css';\n\nconst noop = (): void => {};\n\nconst LoadingBase = forwardRef<LoadingHandle, LoadingProps>(\n  ({ open = true, onlyThrobber = false, title, labels = [], closable = false, onClose }, ref) => {\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    useEffect(() => {\n      if (open) setActiveIndex(0);\n    }, [open]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        activate: (labelOrIndex) => {\n          const index = typeof labelOrIndex === 'number' ? labelOrIndex : labels.indexOf(labelOrIndex);\n          if (index >= 0) setActiveIndex(index);\n        },\n        complete: () => setActiveIndex(labels.length),\n      }),\n      [labels],\n    );\n\n    if (!open) return null;\n\n    if (onlyThrobber) {\n      return (\n        <div className={styles.throbber} role=\"status\" aria-label={title}>\n          <span className={styles.spinner} aria-hidden=\"true\" />\n        </div>\n      );\n    }\n\n    return (\n      <Modal\n        open={open}\n        onClose={closable ? (onClose ?? noop) : noop}\n        className={closable ? undefined : styles.nonClosable}\n        title={\n          <span className={styles.titleRow}>\n            <span className={styles.titleSpinner} aria-hidden=\"true\" />\n            {title}\n          </span>\n        }\n      >\n        <ul className={styles.steps}>\n          {labels.map((label, index) => {\n            const status: LoadingStepStatus =\n              index < activeIndex ? 'done' : index === activeIndex ? 'active' : 'pending';\n            return (\n              <li key={label} className={clsx(styles.step, styles[status])}>\n                <span className={styles.iconSlot} aria-hidden=\"true\">\n                  {status === 'done' && <Check size={ICON_SIZE.MD} className={styles.checkIcon} />}\n                  {status === 'active' && <span className={styles.stepSpinner} />}\n                </span>\n                <span>{label}</span>\n              </li>\n            );\n          })}\n        </ul>\n      </Modal>\n    );\n  },\n);\n\nLoadingBase.displayName = 'Loading';\n\nexport const Loading = memo(LoadingBase);\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,OAAO,MAAY;AAAC;AAE1B,MAAM,cAAc;AAAA,EAClB,CAAC,EAAE,OAAO,MAAM,eAAe,OAAO,OAAO,SAAS,CAAA,GAAI,WAAW,OAAO,QAAA,GAAW,QAAQ;AAC7F,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAEhD,cAAU,MAAM;AACd,UAAI,qBAAqB,CAAC;AAAA,IAC5B,GAAG,CAAC,IAAI,CAAC;AAET;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,UAAU,CAAC,iBAAiB;AAC1B,gBAAM,QAAQ,OAAO,iBAAiB,WAAW,eAAe,OAAO,QAAQ,YAAY;AAC3F,cAAI,SAAS,EAAG,gBAAe,KAAK;AAAA,QACtC;AAAA,QACA,UAAU,MAAM,eAAe,OAAO,MAAM;AAAA,MAAA;AAAA,MAE9C,CAAC,MAAM;AAAA,IAAA;AAGT,QAAI,CAAC,KAAM,QAAO;AAElB,QAAI,cAAc;AAChB,iCACG,OAAA,EAAI,WAAW,OAAO,UAAU,MAAK,UAAS,cAAY,OACzD,UAAA,oBAAC,UAAK,WAAW,OAAO,SAAS,eAAY,QAAO,GACtD;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS,WAAY,WAAW,OAAQ;AAAA,QACxC,WAAW,WAAW,SAAY,OAAO;AAAA,QACzC,OACE,qBAAC,QAAA,EAAK,WAAW,OAAO,UACtB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,cAAc,eAAY,QAAO;AAAA,UACxD;AAAA,QAAA,GACH;AAAA,QAGF,UAAA,oBAAC,QAAG,WAAW,OAAO,OACnB,UAAA,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,gBAAM,SACJ,QAAQ,cAAc,SAAS,UAAU,cAAc,WAAW;AACpE,iBACE,qBAAC,QAAe,WAAW,KAAK,OAAO,MAAM,OAAO,MAAM,CAAC,GACzD,UAAA;AAAA,YAAA,qBAAC,QAAA,EAAK,WAAW,OAAO,UAAU,eAAY,QAC3C,UAAA;AAAA,cAAA,WAAW,8BAAW,OAAA,EAAM,MAAM,UAAU,IAAI,WAAW,OAAO,UAAA,CAAW;AAAA,cAC7E,WAAW,YAAY,oBAAC,QAAA,EAAK,WAAW,OAAO,YAAA,CAAa;AAAA,YAAA,GAC/D;AAAA,YACA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,UAAA,EAAA,GALN,KAMT;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;AAEnB,MAAM,UAAU,KAAK,WAAW;"}
+{"version":3,"file":"index32.js","sources":["../src/primitives/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Input.module.css';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input ref={ref} type={type} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nInput.displayName = 'Input';\n"],"names":[],"mappings":";;;;AAMO,MAAM,QAAQ;AAAA,EACnB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,SAAS,QACvC,oBAAC,WAAM,KAAU,MAAY,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAErF;AAEA,MAAM,cAAc;"}

package/dist/index33.cjs

@@ -1,42 +1,135 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const reactDom = require("react-dom");
-const clsx = require("./index55.cjs");
-const useEscapeKey = require("./index5.cjs");
-const Modal_module = require("./index75.cjs");
-const Modal = ({
-  open,
-  title,
-  onClose,
-  children,
-  footer,
-  portalTarget,
-  className,
-  bodyClassName,
-  style,
-  closeLabel = "×"
+const react = require("react");
+const clsx = require("./index57.cjs");
+const constants = require("./index67.cjs");
+const LiveExplorerTable_module = require("./index105.cjs");
+const SKELETON_ROWS = 5;
+const FULL_PERCENT = 100;
+const LiveExplorerTable = ({
+  rows,
+  columns,
+  sortState = null,
+  onSortChange,
+  isLoading = false,
+  hasMore = false,
+  isFetchingNext = false,
+  onLoadMore,
+  onColumnResize,
+  onRowClick,
+  selectedRowKey = null,
+  scrollToSelectedRow = false,
+  maxHeight,
+  className
 }) => {
-  useEscapeKey.useEscapeKey(onClose, open);
-  if (!open) return null;
-  const modalContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(Modal_module.default.root, className), style, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_module.default.header, children: [
-      title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Modal_module.default.title, children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+  const selectedRef = react.useRef(null);
+  react.useEffect(() => {
+    if (scrollToSelectedRow && selectedRef.current) {
+      selectedRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [scrollToSelectedRow, selectedRowKey]);
+  const handleSort = react.useCallback(
+    (columnKey) => {
+      if (!onSortChange) return;
+      const newDirection = (sortState == null ? void 0 : sortState.column) === columnKey && sortState.direction === "asc" ? "desc" : "asc";
+      onSortChange({ column: columnKey, direction: newDirection });
+    },
+    [onSortChange, sortState]
+  );
+  const handleResizeStart = react.useCallback(
+    (columnKey, startX, startWidth) => {
+      if (!onColumnResize) return;
+      const col = columns.find((c) => c.key === columnKey);
+      const minW = (col == null ? void 0 : col.minWidth) ?? constants.MIN_COLUMN_WIDTH;
+      const onMouseMove = (e) => {
+        const newWidth = Math.max(minW, startWidth + e.clientX - startX);
+        onColumnResize(columnKey, newWidth);
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [onColumnResize, columns]
+  );
+  const getSortAria = (key) => {
+    if ((sortState == null ? void 0 : sortState.column) !== key) return "none";
+    return sortState.direction === "asc" ? "ascending" : "descending";
+  };
+  const renderCell = (col, row) => {
+    const value = row[col.key];
+    if (col.render) return col.render(value, row);
+    return String(value ?? "");
+  };
+  const containerStyle = maxHeight ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(LiveExplorerTable_module.default.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: LiveExplorerTable_module.default.tableContainer, style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: LiveExplorerTable_module.default.table, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "th",
         {
-          type: "button",
-          onClick: onClose,
-          className: Modal_module.default.closeBtn,
-          "aria-label": "Close modal",
-          children: closeLabel
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Modal_module.default.body, bodyClassName), children }),
-    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.footer, children: footer })
-  ] }) });
-  return reactDom.createPortal(modalContent, portalTarget ?? document.body);
+          scope: "col",
+          className: clsx.clsx(LiveExplorerTable_module.default.th, { [LiveExplorerTable_module.default.sortable]: col.sortable }),
+          style: col.width ? { width: `${col.width}px` } : void 0,
+          "aria-sort": col.sortable ? getSortAria(col.key) : void 0,
+          onClick: col.sortable ? () => handleSort(col.key) : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: LiveExplorerTable_module.default.thContent, children: [
+              col.label,
+              col.sortable && (sortState == null ? void 0 : sortState.column) === col.key && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LiveExplorerTable_module.default.sortIndicator, "aria-hidden": "true", children: sortState.direction === "asc" ? "▲" : "▼" })
+            ] }),
+            onColumnResize && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: LiveExplorerTable_module.default.resizeHandle,
+                role: "separator",
+                "aria-orientation": "vertical",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const th = e.target.closest("th");
+                  handleResizeStart(col.key, e.clientX, (th == null ? void 0 : th.offsetWidth) ?? FULL_PERCENT);
+                }
+              }
+            )
+          ]
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: isLoading && rows.length === 0 ? Array.from({ length: SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: LiveExplorerTable_module.default.skeletonRow, children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: LiveExplorerTable_module.default.skeleton }) }, col.key)) }, `skeleton-${i}`)) : rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+        "tr",
+        {
+          ref: row.id === selectedRowKey ? selectedRef : void 0,
+          className: clsx.clsx(LiveExplorerTable_module.default.row, {
+            [LiveExplorerTable_module.default.rowSelected]: row.id === selectedRowKey,
+            [LiveExplorerTable_module.default.rowClickable]: !!onRowClick
+          }),
+          "aria-selected": row.id === selectedRowKey || void 0,
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: LiveExplorerTable_module.default.td, children: renderCell(col, row) }, col.key))
+        },
+        row.id
+      )) })
+    ] }) }),
+    rows.length === 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: LiveExplorerTable_module.default.empty, children: "No data available" }),
+    hasMore && onLoadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: LiveExplorerTable_module.default.loadMore, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: LiveExplorerTable_module.default.loadMoreButton,
+        onClick: onLoadMore,
+        disabled: isFetchingNext,
+        children: isFetchingNext ? "Loading..." : "Load more"
+      }
+    ) })
+  ] });
 };
-exports.Modal = Modal;
+LiveExplorerTable.displayName = "LiveExplorerTable";
+exports.LiveExplorerTable = LiveExplorerTable;
 //# sourceMappingURL=index33.cjs.map

package/dist/index33.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index33.cjs","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":["useEscapeKey","jsx","styles","jsxs","clsx","createPortal"],"mappings":";;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChBA,eAAAA,aAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJC,+BAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAAC,gCAAC,SAAI,WAAWC,KAAAA,KAAKF,qBAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAWD,aAAAA,QAAO,QACpB,UAAA;AAAA,MAAA,QAAQD,2BAAAA,IAAC,QAAG,WAAWC,aAAAA,QAAO,OAAQ,UAAA,MAAA,CAAM,mCAAS,QAAA,CAAA,CAAK;AAAA,MAC3DD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAWC,aAAAA,QAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACAD,+BAAC,SAAI,WAAWG,KAAAA,KAAKF,aAAAA,QAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAUD,2BAAAA,IAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAOG,SAAAA,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;;"}
+{"version":3,"file":"index33.cjs","sources":["../src/data/LiveExplorerTable/LiveExplorerTable.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { MIN_COLUMN_WIDTH } from '../../constants';\nimport type {\n  LiveExplorerTableProps,\n  LiveExplorerRow,\n} from './LiveExplorerTable.types';\nimport styles from './LiveExplorerTable.module.css';\n\nconst SKELETON_ROWS = 5;\nconst FULL_PERCENT = 100;\n\nexport const LiveExplorerTable = ({\n  rows,\n  columns,\n  sortState = null,\n  onSortChange,\n  isLoading = false,\n  hasMore = false,\n  isFetchingNext = false,\n  onLoadMore,\n  onColumnResize,\n  onRowClick,\n  selectedRowKey = null,\n  scrollToSelectedRow = false,\n  maxHeight,\n  className,\n}: LiveExplorerTableProps) => {\n  const selectedRef = useRef<HTMLTableRowElement>(null);\n\n  useEffect(() => {\n    if (scrollToSelectedRow && selectedRef.current) {\n      selectedRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    }\n  }, [scrollToSelectedRow, selectedRowKey]);\n\n  const handleSort = useCallback(\n    (columnKey: string) => {\n      if (!onSortChange) return;\n      const newDirection: 'asc' | 'desc' =\n        sortState?.column === columnKey && sortState.direction === 'asc' ? 'desc' : 'asc';\n      onSortChange({ column: columnKey, direction: newDirection });\n    },\n    [onSortChange, sortState],\n  );\n\n  const handleResizeStart = useCallback(\n    (columnKey: string, startX: number, startWidth: number) => {\n      if (!onColumnResize) return;\n      const col = columns.find((c) => c.key === columnKey);\n      const minW = col?.minWidth ?? MIN_COLUMN_WIDTH;\n\n      const onMouseMove = (e: MouseEvent) => {\n        const newWidth = Math.max(minW, startWidth + e.clientX - startX);\n        onColumnResize(columnKey, newWidth);\n      };\n\n      const onMouseUp = () => {\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('mouseup', onMouseUp);\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n      };\n\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('mouseup', onMouseUp);\n      document.body.style.cursor = 'col-resize';\n      document.body.style.userSelect = 'none';\n    },\n    [onColumnResize, columns],\n  );\n\n  const getSortAria = (key: string): 'ascending' | 'descending' | 'none' => {\n    if (sortState?.column !== key) return 'none';\n    return sortState.direction === 'asc' ? 'ascending' : 'descending';\n  };\n\n  const renderCell = (col: (typeof columns)[number], row: LiveExplorerRow) => {\n    const value = row[col.key];\n    if (col.render) return col.render(value, row);\n    return String(value ?? '');\n  };\n\n  const containerStyle = maxHeight\n    ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }\n    : undefined;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.tableContainer} style={containerStyle}>\n        <table className={styles.table}>\n          <thead>\n            <tr>\n              {columns.map((col) => (\n                <th\n                  key={col.key}\n                  scope=\"col\"\n                  className={clsx(styles.th, { [styles.sortable]: col.sortable })}\n                  style={col.width ? { width: `${col.width}px` } : undefined}\n                  aria-sort={col.sortable ? getSortAria(col.key) : undefined}\n                  onClick={col.sortable ? () => handleSort(col.key) : undefined}\n                >\n                  <span className={styles.thContent}>\n                    {col.label}\n                    {col.sortable && sortState?.column === col.key && (\n                      <span className={styles.sortIndicator} aria-hidden=\"true\">\n                        {sortState.direction === 'asc' ? '▲' : '▼'}\n                      </span>\n                    )}\n                  </span>\n                  {onColumnResize && (\n                    <span\n                      className={styles.resizeHandle}\n                      role=\"separator\"\n                      aria-orientation=\"vertical\"\n                      onMouseDown={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        const th = (e.target as HTMLElement).closest('th');\n                        handleResizeStart(col.key, e.clientX, th?.offsetWidth ?? FULL_PERCENT);\n                      }}\n                    />\n                  )}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {isLoading && rows.length === 0\n              ? Array.from({ length: SKELETON_ROWS }, (_, i) => (\n                  <tr key={`skeleton-${i}`} className={styles.skeletonRow}>\n                    {columns.map((col) => (\n                      <td key={col.key}>\n                        <div className={styles.skeleton} />\n                      </td>\n                    ))}\n                  </tr>\n                ))\n              : rows.map((row) => (\n                  <tr\n                    key={row.id}\n                    ref={row.id === selectedRowKey ? selectedRef : undefined}\n                    className={clsx(styles.row, {\n                      [styles.rowSelected]: row.id === selectedRowKey,\n                      [styles.rowClickable]: !!onRowClick,\n                    })}\n                    aria-selected={row.id === selectedRowKey || undefined}\n                    onClick={onRowClick ? () => onRowClick(row) : undefined}\n                  >\n                    {columns.map((col) => (\n                      <td key={col.key} className={styles.td}>\n                        {renderCell(col, row)}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n          </tbody>\n        </table>\n      </div>\n\n      {rows.length === 0 && !isLoading && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {hasMore && onLoadMore && (\n        <div className={styles.loadMore}>\n          <button\n            type=\"button\"\n            className={styles.loadMoreButton}\n            onClick={onLoadMore}\n            disabled={isFetchingNext}\n          >\n            {isFetchingNext ? 'Loading...' : 'Load more'}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nLiveExplorerTable.displayName = 'LiveExplorerTable';\n"],"names":["useRef","useEffect","useCallback","MIN_COLUMN_WIDTH","clsx","styles","jsx","jsxs"],"mappings":"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"}

package/dist/index33.js

@@ -1,42 +1,135 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-import { clsx } from "./index55.js";
-import { useEscapeKey } from "./index5.js";
-import styles from "./index75.js";
-const Modal = ({
-  open,
-  title,
-  onClose,
-  children,
-  footer,
-  portalTarget,
-  className,
-  bodyClassName,
-  style,
-  closeLabel = "×"
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback } from "react";
+import { clsx } from "./index57.js";
+import { MIN_COLUMN_WIDTH } from "./index67.js";
+import styles from "./index105.js";
+const SKELETON_ROWS = 5;
+const FULL_PERCENT = 100;
+const LiveExplorerTable = ({
+  rows,
+  columns,
+  sortState = null,
+  onSortChange,
+  isLoading = false,
+  hasMore = false,
+  isFetchingNext = false,
+  onLoadMore,
+  onColumnResize,
+  onRowClick,
+  selectedRowKey = null,
+  scrollToSelectedRow = false,
+  maxHeight,
+  className
 }) => {
-  useEscapeKey(onClose, open);
-  if (!open) return null;
-  const modalContent = /* @__PURE__ */ jsx("div", { className: styles.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), style, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      title ? /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) : /* @__PURE__ */ jsx("span", {}),
-      /* @__PURE__ */ jsx(
-        "button",
+  const selectedRef = useRef(null);
+  useEffect(() => {
+    if (scrollToSelectedRow && selectedRef.current) {
+      selectedRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [scrollToSelectedRow, selectedRowKey]);
+  const handleSort = useCallback(
+    (columnKey) => {
+      if (!onSortChange) return;
+      const newDirection = (sortState == null ? void 0 : sortState.column) === columnKey && sortState.direction === "asc" ? "desc" : "asc";
+      onSortChange({ column: columnKey, direction: newDirection });
+    },
+    [onSortChange, sortState]
+  );
+  const handleResizeStart = useCallback(
+    (columnKey, startX, startWidth) => {
+      if (!onColumnResize) return;
+      const col = columns.find((c) => c.key === columnKey);
+      const minW = (col == null ? void 0 : col.minWidth) ?? MIN_COLUMN_WIDTH;
+      const onMouseMove = (e) => {
+        const newWidth = Math.max(minW, startWidth + e.clientX - startX);
+        onColumnResize(columnKey, newWidth);
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [onColumnResize, columns]
+  );
+  const getSortAria = (key) => {
+    if ((sortState == null ? void 0 : sortState.column) !== key) return "none";
+    return sortState.direction === "asc" ? "ascending" : "descending";
+  };
+  const renderCell = (col, row) => {
+    const value = row[col.key];
+    if (col.render) return col.render(value, row);
+    return String(value ?? "");
+  };
+  const containerStyle = maxHeight ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+    /* @__PURE__ */ jsx("div", { className: styles.tableContainer, style: containerStyle, children: /* @__PURE__ */ jsxs("table", { className: styles.table, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxs(
+        "th",
         {
-          type: "button",
-          onClick: onClose,
-          className: styles.closeBtn,
-          "aria-label": "Close modal",
-          children: closeLabel
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: clsx(styles.body, bodyClassName), children }),
-    footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer })
-  ] }) });
-  return createPortal(modalContent, portalTarget ?? document.body);
+          scope: "col",
+          className: clsx(styles.th, { [styles.sortable]: col.sortable }),
+          style: col.width ? { width: `${col.width}px` } : void 0,
+          "aria-sort": col.sortable ? getSortAria(col.key) : void 0,
+          onClick: col.sortable ? () => handleSort(col.key) : void 0,
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: styles.thContent, children: [
+              col.label,
+              col.sortable && (sortState == null ? void 0 : sortState.column) === col.key && /* @__PURE__ */ jsx("span", { className: styles.sortIndicator, "aria-hidden": "true", children: sortState.direction === "asc" ? "▲" : "▼" })
+            ] }),
+            onColumnResize && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: styles.resizeHandle,
+                role: "separator",
+                "aria-orientation": "vertical",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const th = e.target.closest("th");
+                  handleResizeStart(col.key, e.clientX, (th == null ? void 0 : th.offsetWidth) ?? FULL_PERCENT);
+                }
+              }
+            )
+          ]
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: isLoading && rows.length === 0 ? Array.from({ length: SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsx("tr", { className: styles.skeletonRow, children: columns.map((col) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("div", { className: styles.skeleton }) }, col.key)) }, `skeleton-${i}`)) : rows.map((row) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          ref: row.id === selectedRowKey ? selectedRef : void 0,
+          className: clsx(styles.row, {
+            [styles.rowSelected]: row.id === selectedRowKey,
+            [styles.rowClickable]: !!onRowClick
+          }),
+          "aria-selected": row.id === selectedRowKey || void 0,
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          children: columns.map((col) => /* @__PURE__ */ jsx("td", { className: styles.td, children: renderCell(col, row) }, col.key))
+        },
+        row.id
+      )) })
+    ] }) }),
+    rows.length === 0 && !isLoading && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No data available" }),
+    hasMore && onLoadMore && /* @__PURE__ */ jsx("div", { className: styles.loadMore, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.loadMoreButton,
+        onClick: onLoadMore,
+        disabled: isFetchingNext,
+        children: isFetchingNext ? "Loading..." : "Load more"
+      }
+    ) })
+  ] });
 };
+LiveExplorerTable.displayName = "LiveExplorerTable";
 export {
-  Modal
+  LiveExplorerTable
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.js","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChB,eAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJ,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAA,qBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,QACpB,UAAA;AAAA,MAAA,QAAQ,oBAAC,QAAG,WAAW,OAAO,OAAQ,UAAA,MAAA,CAAM,wBAAS,QAAA,CAAA,CAAK;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW,OAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACA,oBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAU,oBAAC,OAAA,EAAI,WAAW,OAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAO,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;"}
+{"version":3,"file":"index33.js","sources":["../src/data/LiveExplorerTable/LiveExplorerTable.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { MIN_COLUMN_WIDTH } from '../../constants';\nimport type {\n  LiveExplorerTableProps,\n  LiveExplorerRow,\n} from './LiveExplorerTable.types';\nimport styles from './LiveExplorerTable.module.css';\n\nconst SKELETON_ROWS = 5;\nconst FULL_PERCENT = 100;\n\nexport const LiveExplorerTable = ({\n  rows,\n  columns,\n  sortState = null,\n  onSortChange,\n  isLoading = false,\n  hasMore = false,\n  isFetchingNext = false,\n  onLoadMore,\n  onColumnResize,\n  onRowClick,\n  selectedRowKey = null,\n  scrollToSelectedRow = false,\n  maxHeight,\n  className,\n}: LiveExplorerTableProps) => {\n  const selectedRef = useRef<HTMLTableRowElement>(null);\n\n  useEffect(() => {\n    if (scrollToSelectedRow && selectedRef.current) {\n      selectedRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    }\n  }, [scrollToSelectedRow, selectedRowKey]);\n\n  const handleSort = useCallback(\n    (columnKey: string) => {\n      if (!onSortChange) return;\n      const newDirection: 'asc' | 'desc' =\n        sortState?.column === columnKey && sortState.direction === 'asc' ? 'desc' : 'asc';\n      onSortChange({ column: columnKey, direction: newDirection });\n    },\n    [onSortChange, sortState],\n  );\n\n  const handleResizeStart = useCallback(\n    (columnKey: string, startX: number, startWidth: number) => {\n      if (!onColumnResize) return;\n      const col = columns.find((c) => c.key === columnKey);\n      const minW = col?.minWidth ?? MIN_COLUMN_WIDTH;\n\n      const onMouseMove = (e: MouseEvent) => {\n        const newWidth = Math.max(minW, startWidth + e.clientX - startX);\n        onColumnResize(columnKey, newWidth);\n      };\n\n      const onMouseUp = () => {\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('mouseup', onMouseUp);\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n      };\n\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('mouseup', onMouseUp);\n      document.body.style.cursor = 'col-resize';\n      document.body.style.userSelect = 'none';\n    },\n    [onColumnResize, columns],\n  );\n\n  const getSortAria = (key: string): 'ascending' | 'descending' | 'none' => {\n    if (sortState?.column !== key) return 'none';\n    return sortState.direction === 'asc' ? 'ascending' : 'descending';\n  };\n\n  const renderCell = (col: (typeof columns)[number], row: LiveExplorerRow) => {\n    const value = row[col.key];\n    if (col.render) return col.render(value, row);\n    return String(value ?? '');\n  };\n\n  const containerStyle = maxHeight\n    ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }\n    : undefined;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.tableContainer} style={containerStyle}>\n        <table className={styles.table}>\n          <thead>\n            <tr>\n              {columns.map((col) => (\n                <th\n                  key={col.key}\n                  scope=\"col\"\n                  className={clsx(styles.th, { [styles.sortable]: col.sortable })}\n                  style={col.width ? { width: `${col.width}px` } : undefined}\n                  aria-sort={col.sortable ? getSortAria(col.key) : undefined}\n                  onClick={col.sortable ? () => handleSort(col.key) : undefined}\n                >\n                  <span className={styles.thContent}>\n                    {col.label}\n                    {col.sortable && sortState?.column === col.key && (\n                      <span className={styles.sortIndicator} aria-hidden=\"true\">\n                        {sortState.direction === 'asc' ? '▲' : '▼'}\n                      </span>\n                    )}\n                  </span>\n                  {onColumnResize && (\n                    <span\n                      className={styles.resizeHandle}\n                      role=\"separator\"\n                      aria-orientation=\"vertical\"\n                      onMouseDown={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        const th = (e.target as HTMLElement).closest('th');\n                        handleResizeStart(col.key, e.clientX, th?.offsetWidth ?? FULL_PERCENT);\n                      }}\n                    />\n                  )}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {isLoading && rows.length === 0\n              ? Array.from({ length: SKELETON_ROWS }, (_, i) => (\n                  <tr key={`skeleton-${i}`} className={styles.skeletonRow}>\n                    {columns.map((col) => (\n                      <td key={col.key}>\n                        <div className={styles.skeleton} />\n                      </td>\n                    ))}\n                  </tr>\n                ))\n              : rows.map((row) => (\n                  <tr\n                    key={row.id}\n                    ref={row.id === selectedRowKey ? selectedRef : undefined}\n                    className={clsx(styles.row, {\n                      [styles.rowSelected]: row.id === selectedRowKey,\n                      [styles.rowClickable]: !!onRowClick,\n                    })}\n                    aria-selected={row.id === selectedRowKey || undefined}\n                    onClick={onRowClick ? () => onRowClick(row) : undefined}\n                  >\n                    {columns.map((col) => (\n                      <td key={col.key} className={styles.td}>\n                        {renderCell(col, row)}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n          </tbody>\n        </table>\n      </div>\n\n      {rows.length === 0 && !isLoading && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {hasMore && onLoadMore && (\n        <div className={styles.loadMore}>\n          <button\n            type=\"button\"\n            className={styles.loadMoreButton}\n            onClick={onLoadMore}\n            disabled={isFetchingNext}\n          >\n            {isFetchingNext ? 'Loading...' : 'Load more'}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nLiveExplorerTable.displayName = 'LiveExplorerTable';\n"],"names":[],"mappings":"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"}