@lunora/studio 0.0.0 → 1.0.0-alpha.1

package/dist/packem_shared/table-list-sidebar-aZHLq70w.js

@@ -0,0 +1,832 @@
+import { c } from 'react/compiler-runtime';
+import { useT } from './createStudioI18n-CgvlmDkN.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+import { useState, useRef, useMemo } from 'react';
+import { f as fireAndForget, e as errorMessage } from './internal-BBZYexre.js';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { c as cn } from './utils-B05Dmz_H.js';
+import { f as flooredRectObserver } from './virtual-rect-CVMUskSm.js';
+
+const formatValue = (value) => {
+  if (value === null || value === void 0) {
+    return "∅";
+  }
+  if (value === "") {
+    return "(empty)";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+};
+const FacetSection = (t0) => {
+  const $ = c(32);
+  const {
+    column,
+    onFacetFilter,
+    state
+  } = t0;
+  const t = useT();
+  let t1;
+  if ($[0] !== column || $[1] !== onFacetFilter || $[2] !== state.result?.values) {
+    t1 = (event) => {
+      const index = Number(event.currentTarget.dataset.index);
+      const entry = state.result?.values[index];
+      if (entry !== void 0) {
+        onFacetFilter(column, entry.value);
+      }
+    };
+    $[0] = column;
+    $[1] = onFacetFilter;
+    $[2] = state.result?.values;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const onValueClick = t1;
+  const t2 = `db-facet-${column}`;
+  let t3;
+  if ($[4] !== column) {
+    t3 = /* @__PURE__ */ jsxDEV("span", {
+      className: "font-medium text-foreground",
+      children: column
+    }, void 0, false);
+    $[4] = column;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== state.loading || $[7] !== state.result || $[8] !== t) {
+    t4 = state.loading && state.result === null && /* @__PURE__ */ jsxDEV("span", {
+      className: "text-muted-foreground",
+      children: t("Loading…")
+    }, void 0, false);
+    $[6] = state.loading;
+    $[7] = state.result;
+    $[8] = t;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== state.error) {
+    t5 = state.error !== null && /* @__PURE__ */ jsxDEV("span", {
+      className: "text-destructive",
+      role: "alert",
+      children: state.error
+    }, void 0, false);
+    $[10] = state.error;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== state.result?.values) {
+    t6 = state.result?.values ?? [];
+    $[12] = state.result?.values;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== column || $[15] !== onValueClick || $[16] !== t6) {
+    let t82;
+    if ($[18] !== column || $[19] !== onValueClick) {
+      t82 = (entry_0, index_0) => /* @__PURE__ */ jsxDEV("button", {
+        className: "flex items-center justify-between gap-2 rounded px-1 py-0.5 text-left text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+        "data-index": index_0,
+        "data-testid": `db-facet-value-${column}`,
+        onClick: onValueClick,
+        type: "button",
+        children: [/* @__PURE__ */ jsxDEV("span", {
+          className: "truncate",
+          children: formatValue(entry_0.value)
+        }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+          className: "shrink-0 tabular-nums text-foreground/70",
+          children: entry_0.count
+        }, void 0, false)]
+      }, formatValue(entry_0.value), true);
+      $[18] = column;
+      $[19] = onValueClick;
+      $[20] = t82;
+    } else {
+      t82 = $[20];
+    }
+    t7 = t6.map(t82);
+    $[14] = column;
+    $[15] = onValueClick;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[21] !== column || $[22] !== state.result || $[23] !== t) {
+    t8 = state.result?.truncated === true && /* @__PURE__ */ jsxDEV("span", {
+      className: "text-muted-foreground",
+      "data-testid": `db-facet-truncated-${column}`,
+      children: t("Showing the {n} most common values.", {
+        n: state.result.values.length
+      })
+    }, void 0, false);
+    $[21] = column;
+    $[22] = state.result;
+    $[23] = t;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  let t9;
+  if ($[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t5 || $[29] !== t7 || $[30] !== t8) {
+    t9 = /* @__PURE__ */ jsxDEV("section", {
+      className: "flex flex-col gap-1",
+      "data-testid": t2,
+      children: [t3, t4, t5, t7, t8]
+    }, void 0, true);
+    $[25] = t2;
+    $[26] = t3;
+    $[27] = t4;
+    $[28] = t5;
+    $[29] = t7;
+    $[30] = t8;
+    $[31] = t9;
+  } else {
+    t9 = $[31];
+  }
+  return t9;
+};
+const DataFacets = (t0) => {
+  const $ = c(26);
+  const {
+    columns,
+    facets,
+    onFacetFilter,
+    onToggleFacet
+  } = t0;
+  const t = useT();
+  let t1;
+  if ($[0] !== onToggleFacet) {
+    t1 = (event) => {
+      const {
+        column
+      } = event.currentTarget.dataset;
+      if (column !== void 0) {
+        onToggleFacet(column);
+      }
+    };
+    $[0] = onToggleFacet;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const toggle = t1;
+  if (columns.length === 0) {
+    return null;
+  }
+  let t2;
+  if ($[2] !== t) {
+    t2 = t("Facets");
+    $[2] = t;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t2) {
+    t3 = /* @__PURE__ */ jsxDEV("span", {
+      className: "font-mono text-[11px] tracking-wide uppercase text-muted-foreground",
+      children: t2
+    }, void 0, false);
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== columns || $[7] !== facets || $[8] !== toggle) {
+    let t52;
+    if ($[10] !== facets || $[11] !== toggle) {
+      t52 = (column_0) => /* @__PURE__ */ jsxDEV("button", {
+        "aria-pressed": column_0 in facets,
+        className: "rounded border border-border px-1.5 py-0.5 text-muted-foreground transition-colors hover:bg-accent aria-pressed:bg-accent aria-pressed:text-accent-foreground",
+        "data-column": column_0,
+        "data-testid": `db-facet-toggle-${column_0}`,
+        onClick: toggle,
+        type: "button",
+        children: column_0
+      }, column_0, false);
+      $[10] = facets;
+      $[11] = toggle;
+      $[12] = t52;
+    } else {
+      t52 = $[12];
+    }
+    t4 = columns.map(t52);
+    $[6] = columns;
+    $[7] = facets;
+    $[8] = toggle;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[13] !== t4) {
+    t5 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-wrap gap-1",
+      children: t4
+    }, void 0, false);
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== t3 || $[16] !== t5) {
+    t6 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-1.5",
+      children: [t3, t5]
+    }, void 0, true);
+    $[15] = t3;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== facets) {
+    t7 = Object.entries(facets);
+    $[18] = facets;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== onFacetFilter || $[21] !== t7) {
+    t8 = t7.map((t92) => {
+      const [column_1, state] = t92;
+      return /* @__PURE__ */ jsxDEV(FacetSection, {
+        column: column_1,
+        onFacetFilter,
+        state
+      }, column_1, false);
+    });
+    $[20] = onFacetFilter;
+    $[21] = t7;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== t6 || $[24] !== t8) {
+    t9 = /* @__PURE__ */ jsxDEV("aside", {
+      className: "flex w-56 shrink-0 flex-col gap-3 overflow-auto border-l border-border p-3 text-xs",
+      "data-testid": "db-facets",
+      children: [t6, t8]
+    }, void 0, true);
+    $[23] = t6;
+    $[24] = t8;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+  return t9;
+};
+
+const PAGE_SIZE_OPTIONS = [25, 50, 100, 250];
+const PageSizeSelect = (t0) => {
+  const $ = c(18);
+  const {
+    onChange,
+    options,
+    prefix,
+    value
+  } = t0;
+  const t = useT();
+  let t1;
+  if ($[0] !== onChange) {
+    t1 = (event) => {
+      onChange(Number.parseInt(event.target.value, 10));
+    };
+    $[0] = onChange;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const onSelect = t1;
+  const t2 = `${prefix}-page-size`;
+  let t3;
+  if ($[2] !== t) {
+    t3 = t("Rows per page");
+    $[2] = t;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== t3) {
+    t4 = /* @__PURE__ */ jsxDEV("span", {
+      children: t3
+    }, void 0, false);
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = `${prefix}-page-size`;
+  const t6 = `${prefix}-page-size`;
+  let t7;
+  if ($[6] !== options) {
+    t7 = options.map(_temp);
+    $[6] = options;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  let t8;
+  if ($[8] !== onSelect || $[9] !== t5 || $[10] !== t6 || $[11] !== t7 || $[12] !== value) {
+    t8 = /* @__PURE__ */ jsxDEV("select", {
+      className: "h-6 rounded-md border border-border bg-background px-1 tabular-nums outline-none focus-visible:border-ring",
+      "data-testid": t5,
+      id: t6,
+      onChange: onSelect,
+      value,
+      children: t7
+    }, void 0, false);
+    $[8] = onSelect;
+    $[9] = t5;
+    $[10] = t6;
+    $[11] = t7;
+    $[12] = value;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] !== t2 || $[15] !== t4 || $[16] !== t8) {
+    t9 = /* @__PURE__ */ jsxDEV("label", {
+      className: "flex items-center gap-1.5",
+      htmlFor: t2,
+      children: [t4, t8]
+    }, void 0, true);
+    $[14] = t2;
+    $[15] = t4;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  return t9;
+};
+const PageJump = (t0) => {
+  const $ = c(25);
+  const {
+    onJump,
+    page,
+    pages,
+    prefix
+  } = t0;
+  const t = useT();
+  let t1;
+  if ($[0] !== onJump || $[1] !== pages) {
+    t1 = (raw) => {
+      const next = Number.parseInt(raw, 10);
+      if (!Number.isNaN(next)) {
+        onJump(Math.min(Math.max(1, next), Math.max(1, pages)));
+      }
+    };
+    $[0] = onJump;
+    $[1] = pages;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const commit = t1;
+  let t2;
+  if ($[3] !== commit) {
+    t2 = (event) => {
+      if (event.key === "Enter") {
+        commit(event.currentTarget.value);
+      }
+    };
+    $[3] = commit;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const onKeyDown = t2;
+  let t3;
+  if ($[5] !== commit) {
+    t3 = (event_0) => {
+      commit(event_0.currentTarget.value);
+    };
+    $[5] = commit;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const onBlur = t3;
+  let t4;
+  if ($[7] !== t) {
+    t4 = t("Page");
+    $[7] = t;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== t) {
+    t5 = t("Page");
+    $[9] = t;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const t6 = `${prefix}-page-jump`;
+  const t7 = Math.max(1, pages);
+  let t8;
+  if ($[11] !== onBlur || $[12] !== onKeyDown || $[13] !== page || $[14] !== t5 || $[15] !== t6 || $[16] !== t7) {
+    t8 = /* @__PURE__ */ jsxDEV("input", {
+      "aria-label": t5,
+      className: "h-6 w-12 rounded-md border border-border bg-background px-1 text-center tabular-nums outline-none focus-visible:border-ring",
+      "data-testid": t6,
+      defaultValue: page,
+      max: t7,
+      min: 1,
+      onBlur,
+      onKeyDown,
+      type: "number"
+    }, page, false);
+    $[11] = onBlur;
+    $[12] = onKeyDown;
+    $[13] = page;
+    $[14] = t5;
+    $[15] = t6;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== pages || $[19] !== t) {
+    t9 = t("of {pages}", {
+      pages
+    });
+    $[18] = pages;
+    $[19] = t;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  let t10;
+  if ($[21] !== t4 || $[22] !== t8 || $[23] !== t9) {
+    t10 = /* @__PURE__ */ jsxDEV("span", {
+      className: "flex items-center gap-1.5 tabular-nums",
+      children: [t4, t8, t9]
+    }, void 0, true);
+    $[21] = t4;
+    $[22] = t8;
+    $[23] = t9;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  return t10;
+};
+const GridPagination = ({
+  hasNext,
+  hasPrevious,
+  onJumpToPage,
+  onNext,
+  onPageSizeChange,
+  onPrevious,
+  pageSize,
+  pageSizeOptions = PAGE_SIZE_OPTIONS,
+  prefix,
+  rangeEnd,
+  rangeStart,
+  total
+}) => {
+  const t = useT();
+  const buttonClass = "rounded-md border border-border px-2.5 py-1 text-xs font-medium text-foreground outline-none transition-colors hover:bg-accent focus-visible:bg-accent disabled:pointer-events-none disabled:opacity-50";
+  const pages = pageSize !== void 0 && pageSize > 0 ? Math.max(1, Math.ceil(total / pageSize)) : 1;
+  const page = pageSize !== void 0 && pageSize > 0 ? Math.floor(Math.max(0, rangeStart - 1) / pageSize) + 1 : 1;
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex w-full items-center justify-between gap-3 text-xs text-muted-foreground",
+    children: [/* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-center gap-3",
+      children: [pageSize !== void 0 && onPageSizeChange !== void 0 && /* @__PURE__ */ jsxDEV(PageSizeSelect, {
+        onChange: onPageSizeChange,
+        options: pageSizeOptions,
+        prefix,
+        value: pageSize
+      }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+        className: "tabular-nums",
+        "data-testid": `${prefix}-page-info`,
+        children: t("{rangeStart}-{rangeEnd} of {total}", {
+          rangeEnd,
+          rangeStart,
+          total
+        })
+      }, void 0, false)]
+    }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+      className: "flex items-center gap-3",
+      children: [/* @__PURE__ */ jsxDEV("button", {
+        className: buttonClass,
+        "data-testid": `${prefix}-prev`,
+        disabled: !hasPrevious,
+        onClick: onPrevious,
+        type: "button",
+        children: t("Previous")
+      }, void 0, false), pageSize !== void 0 && onJumpToPage !== void 0 && /* @__PURE__ */ jsxDEV(PageJump, {
+        onJump: onJumpToPage,
+        page,
+        pages,
+        prefix
+      }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
+        className: buttonClass,
+        "data-testid": `${prefix}-next`,
+        disabled: !hasNext,
+        onClick: onNext,
+        type: "button",
+        children: t("Next")
+      }, void 0, false)]
+    }, void 0, true)]
+  }, void 0, true);
+};
+function _temp(option) {
+  return /* @__PURE__ */ jsxDEV("option", {
+    value: option,
+    children: option
+  }, option, false);
+}
+
+const useFacets = () => {
+  const [facets, setFacets] = useState({});
+  const facetsRef = useRef(facets);
+  facetsRef.current = facets;
+  const fetchFacet = async (column, fetcher) => {
+    setFacets((current) => column in current ? {
+      ...current,
+      [column]: {
+        error: null,
+        loading: true,
+        result: current[column]?.result ?? null
+      }
+    } : current);
+    try {
+      const result = await fetcher(column);
+      setFacets((current_1) => column in current_1 ? {
+        ...current_1,
+        [column]: {
+          error: null,
+          loading: false,
+          result
+        }
+      } : current_1);
+    } catch (error) {
+      setFacets((current_0) => column in current_0 ? {
+        ...current_0,
+        [column]: {
+          error: errorMessage(error),
+          loading: false,
+          result: null
+        }
+      } : current_0);
+    }
+  };
+  const toggleFacet = (column_0, fetcher_0) => {
+    setFacets((current_2) => {
+      if (column_0 in current_2) {
+        return Object.fromEntries(Object.entries(current_2).filter(([name]) => name !== column_0));
+      }
+      if (fetcher_0 !== null) {
+        fireAndForget(fetchFacet(column_0, fetcher_0));
+      }
+      return {
+        ...current_2,
+        [column_0]: {
+          error: null,
+          loading: true,
+          result: null
+        }
+      };
+    });
+  };
+  const refetchFacets = (fetcher_1) => {
+    for (const column_1 of Object.keys(facetsRef.current)) {
+      fireAndForget(fetchFacet(column_1, fetcher_1));
+    }
+  };
+  const clearFacets = () => {
+    setFacets({});
+    facetsRef.current = {};
+  };
+  return {
+    clearFacets,
+    facets,
+    facetsRef,
+    refetchFacets,
+    toggleFacet
+  };
+};
+
+const TABLE_ROW_HEIGHT = 34;
+const TABLE_LIST_VIEWPORT = 600;
+const TableListButton = (t0) => {
+  const $ = c(21);
+  const {
+    item,
+    onSelect,
+    prefix,
+    selected,
+    start
+  } = t0;
+  let t1;
+  if ($[0] !== item.name || $[1] !== onSelect) {
+    t1 = () => {
+      onSelect(item.name);
+    };
+    $[0] = item.name;
+    $[1] = onSelect;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onClick = t1;
+  const t2 = `translateY(${String(start)}px)`;
+  let t3;
+  if ($[3] !== t2) {
+    t3 = {
+      insetInline: 0,
+      position: "absolute",
+      top: 0,
+      transform: t2
+    };
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const style = t3;
+  const t4 = selected ? "bg-accent font-medium text-accent-foreground" : "text-foreground";
+  let t5;
+  if ($[5] !== t4) {
+    t5 = cn("flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-start text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent", t4);
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const t6 = `${prefix}-table-${item.name}`;
+  let t7;
+  if ($[7] !== item.name) {
+    t7 = /* @__PURE__ */ jsxDEV("span", {
+      className: "truncate",
+      children: item.name
+    }, void 0, false);
+    $[7] = item.name;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== item.rowCount) {
+    t8 = /* @__PURE__ */ jsxDEV("span", {
+      className: "shrink-0 rounded bg-muted px-1.5 text-xs tabular-nums text-muted-foreground",
+      children: item.rowCount
+    }, void 0, false);
+    $[9] = item.rowCount;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== onClick || $[12] !== selected || $[13] !== t5 || $[14] !== t6 || $[15] !== t7 || $[16] !== t8) {
+    t9 = /* @__PURE__ */ jsxDEV("button", {
+      "aria-pressed": selected,
+      className: t5,
+      "data-testid": t6,
+      onClick,
+      type: "button",
+      children: [t7, t8]
+    }, void 0, true);
+    $[11] = onClick;
+    $[12] = selected;
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] !== style || $[19] !== t9) {
+    t10 = /* @__PURE__ */ jsxDEV("li", {
+      style,
+      children: t9
+    }, void 0, false);
+    $[18] = style;
+    $[19] = t9;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  return t10;
+};
+const TableListSidebar = ({
+  header,
+  onReload,
+  onSelect,
+  prefix,
+  reloadLabel,
+  selected,
+  tables
+}) => {
+  const t = useT();
+  const [query, setQuery] = useState("");
+  const scrollRef = useRef(null);
+  const onQueryChange = (event) => {
+    setQuery(event.target.value);
+  };
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    return needle === "" ? tables : tables.filter((item) => item.name.toLowerCase().includes(needle));
+  }, [query, tables]);
+  const virtualizer = useVirtualizer({
+    count: filtered.length,
+    estimateSize: () => TABLE_ROW_HEIGHT,
+    getScrollElement: () => scrollRef.current,
+    initialRect: {
+      height: TABLE_LIST_VIEWPORT,
+      width: 240
+    },
+    observeElementRect: (instance, callback) => flooredRectObserver(instance, callback, TABLE_LIST_VIEWPORT),
+    overscan: 12
+  });
+  const virtualRows = virtualizer.getVirtualItems();
+  const trackStyle = {
+    height: filtered.length * TABLE_ROW_HEIGHT
+  };
+  return /* @__PURE__ */ jsxDEV("aside", {
+    className: "flex h-full w-60 shrink-0 flex-col border-e border-border bg-sidebar",
+    "data-testid": `${prefix}-table-list`,
+    children: [header, /* @__PURE__ */ jsxDEV("div", {
+      className: "flex h-9 shrink-0 items-center justify-between gap-2 border-b border-border px-3",
+      children: [/* @__PURE__ */ jsxDEV("span", {
+        className: "font-mono text-[11px] tracking-wide uppercase text-muted-foreground",
+        children: t("Tables")
+      }, void 0, false), onReload !== void 0 && /* @__PURE__ */ jsxDEV("button", {
+        "aria-label": reloadLabel ?? t("Refresh"),
+        className: "flex size-6 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent",
+        "data-testid": `${prefix}-load-tables`,
+        onClick: onReload,
+        title: reloadLabel ?? t("Refresh"),
+        type: "button",
+        children: /* @__PURE__ */ jsxDEV("svg", {
+          "aria-hidden": "true",
+          className: "size-3.5",
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.6,
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsxDEV("path", {
+            d: "M4 12a8 8 0 0 1 13.7-5.6L20 8M20 4v4h-4M20 12a8 8 0 0 1-13.7 5.6L4 16m0 4v-4h4"
+          }, void 0, false)
+        }, void 0, false)
+      }, void 0, false)]
+    }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+      className: "shrink-0 border-b border-border p-2",
+      children: /* @__PURE__ */ jsxDEV("input", {
+        className: "h-7 w-full rounded-md border border-border bg-background px-2 text-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring",
+        "data-testid": `${prefix}-table-search`,
+        onChange: onQueryChange,
+        placeholder: t("search table…"),
+        type: "search",
+        value: query
+      }, void 0, false)
+    }, void 0, false), /* @__PURE__ */ jsxDEV("ul", {
+      className: "relative flex-1 overflow-y-auto p-1.5",
+      "data-testid": `${prefix}-table-list-rows`,
+      ref: scrollRef,
+      children: [/* @__PURE__ */ jsxDEV("li", {
+        "aria-hidden": "true",
+        style: trackStyle
+      }, void 0, false), virtualRows.map((vrow) => {
+        const item_0 = filtered[vrow.index];
+        return item_0 === void 0 ? null : /* @__PURE__ */ jsxDEV(TableListButton, {
+          item: item_0,
+          onSelect,
+          prefix,
+          selected: selected === item_0.name,
+          start: vrow.start
+        }, item_0.name, false);
+      })]
+    }, void 0, true)]
+  }, void 0, true);
+};
+
+export { DataFacets as D, GridPagination as G, TableListSidebar as T, useFacets as u };