@lunora/studio 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist/packem_shared/{FunctionStatsPanel-DboBl-XL.js → FunctionStatsPanel-CXynSuqT.js}

@@ -1,22 +1,20 @@
 import { c } from 'react/compiler-runtime';
-import { useLunora } from '@lunora/react';
-import { useState, useRef, useEffect } from 'react';
-import { L as LiveError } from './live-status-bPff1O7Y.js';
-import { ShardInput } from './ShardInput-DNCsT1KW.js';
+import { useState } from 'react';
+import { L as LiveError } from './live-status-FZ0psC1z.js';
+import { ShardInput } from './ShardInput-gx_DZXXn.js';
 import { B as Badge } from './badge-B2PKA1-5.js';
 import { B as Button } from './button-BhsN2uZH.js';
 import { C as Card, a as CardContent } from './card-DURq3ElK.js';
 import { E as EmptyState } from './empty-state-DY_oe0k6.js';
 import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from './table-_RzNvy3R.js';
-import { u as useLiveAdmin } from './use-live-admin-D1h1Fzsd.js';
-import { useT } from './createStudioI18n-CgvlmDkN.js';
-import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTION_PREFIX-DmBqMZ-z.js';
-import { d as formatTimestamp, c as callOptions, e as errorMessage, a as adminRef } from './internal-BBZYexre.js';
+import { u as useAdminQuery } from './use-admin-query-4JQW2rr1.js';
+import useDebounced from './useDebounced-Dxncpg6z.js';
+import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-DjXgvJb6.js';
+import { b as formatTimestamp } from './internal-rXJEAhXS.js';
 import { c as cn } from './utils-B05Dmz_H.js';
-import { u as useLiveShardSeed } from './use-live-shard-seed-B74RYcOy.js';
 import { jsxDEV } from 'react/jsx-dev-runtime';
 
-const GET_FUNCTION_STATS = adminRef(ADMIN_FUNCTIONS.getFunctionStats);
 const KIND_VARIANT = {
   action: "outline",
   mutation: "default",
@@ -53,218 +51,163 @@ const SORTERS = {
   slowest: (a, b) => b.maxDurationMs - a.maxDurationMs
 };
 const FunctionStatsPanel = (t0) => {
-  const $ = c(48);
+  const $ = c(45);
   const {
     functions,
     initialShardKey
   } = t0;
-  const client = useLunora();
   const t = useT();
   const [shardKey, setShardKey] = useState(initialShardKey ?? "");
-  const [stats, setStats] = useState(null);
-  const [error, setError] = useState(null);
   const [sortKey, setSortKey] = useState("recent");
-  const [liveError, setLiveError] = useState(void 0);
-  const mountedRef = useRef(true);
   let t1;
+  if ($[0] !== shardKey) {
+    t1 = shardKey.trim();
+    $[0] = shardKey;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const debouncedShard = useDebounced(t1, 400);
   let t2;
-  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      mountedRef.current = true;
-      return () => {
-        mountedRef.current = false;
-      };
-    };
-    t2 = [];
-    $[0] = t1;
-    $[1] = t2;
+  if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {};
+    $[2] = t2;
   } else {
-    t1 = $[0];
-    t2 = $[1];
+    t2 = $[2];
   }
-  useEffect(t1, t2);
   let t3;
-  if ($[2] !== functions) {
-    t3 = new Map((functions ?? []).map(_temp));
-    $[2] = functions;
-    $[3] = t3;
+  if ($[3] !== debouncedShard) {
+    t3 = {
+      live: true,
+      shardKey: debouncedShard
+    };
+    $[3] = debouncedShard;
+    $[4] = t3;
   } else {
-    t3 = $[3];
+    t3 = $[4];
   }
-  const kindByPath = t3;
+  const {
+    data,
+    error,
+    liveError
+  } = useAdminQuery(ADMIN_FUNCTIONS.getFunctionStats, t2, t3);
+  const stats = data?.functions ?? null;
   let t4;
-  if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t4 = (result) => {
-      setError(null);
-      setLiveError(void 0);
-      setStats(result.functions);
-    };
-    $[4] = t4;
+  if ($[5] !== functions) {
+    t4 = new Map((functions ?? []).map(_temp));
+    $[5] = functions;
+    $[6] = t4;
   } else {
-    t4 = $[4];
+    t4 = $[6];
   }
-  const applyResult = t4;
+  const kindByPath = t4;
   let t5;
-  if ($[5] !== client) {
-    t5 = async (shard) => {
-      try {
-        const next = await client.query(GET_FUNCTION_STATS, {}, callOptions(shard));
-        if (mountedRef.current) {
-          applyResult(next);
-        }
-      } catch (t62) {
-        const error_ = t62;
-        if (mountedRef.current) {
-          setStats(null);
-          setError(errorMessage(error_));
-        }
-        throw error_;
-      }
-    };
-    $[5] = client;
-    $[6] = t5;
-  } else {
-    t5 = $[6];
-  }
-  const refresh = t5;
-  const committedShard = useLiveShardSeed(shardKey, refresh);
-  let t6;
   if ($[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t6 = {};
-    $[7] = t6;
-  } else {
-    t6 = $[7];
-  }
-  let t7;
-  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t7 = (next_0) => {
-      if (mountedRef.current) {
-        applyResult(next_0);
-      }
-    };
-    $[8] = t7;
-  } else {
-    t7 = $[8];
-  }
-  let t8;
-  if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t8 = (message) => {
-      if (mountedRef.current) {
-        setLiveError(message);
-      }
-    };
-    $[9] = t8;
-  } else {
-    t8 = $[9];
-  }
-  useLiveAdmin(ADMIN_FUNCTIONS.getFunctionStats, t6, committedShard ?? "", t7, committedShard !== void 0, t8);
-  let t9;
-  if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t9 = (event) => {
+    t5 = (event) => {
       setSortKey(event.currentTarget.dataset.sort);
     };
-    $[10] = t9;
+    $[7] = t5;
   } else {
-    t9 = $[10];
+    t5 = $[7];
   }
-  const selectSort = t9;
-  let t10;
-  if ($[11] !== error || $[12] !== kindByPath || $[13] !== liveError || $[14] !== shardKey || $[15] !== sortKey || $[16] !== stats || $[17] !== t) {
+  const selectSort = t5;
+  let t6;
+  if ($[8] !== error || $[9] !== kindByPath || $[10] !== liveError || $[11] !== shardKey || $[12] !== sortKey || $[13] !== stats || $[14] !== t) {
     const sorted = stats === null ? [] : stats.toSorted(SORTERS[sortKey]);
-    let t11;
-    if ($[19] !== t) {
-      t11 = t("Recent");
-      $[19] = t;
-      $[20] = t11;
+    let t7;
+    if ($[16] !== t) {
+      t7 = t("Recent");
+      $[16] = t;
+      $[17] = t7;
     } else {
-      t11 = $[20];
+      t7 = $[17];
     }
-    let t12;
-    if ($[21] !== t11) {
-      t12 = {
+    let t8;
+    if ($[18] !== t7) {
+      t8 = {
         key: "recent",
-        label: t11
+        label: t7
       };
-      $[21] = t11;
-      $[22] = t12;
+      $[18] = t7;
+      $[19] = t8;
     } else {
-      t12 = $[22];
+      t8 = $[19];
     }
-    let t13;
-    if ($[23] !== t) {
-      t13 = t("Most called");
-      $[23] = t;
-      $[24] = t13;
+    let t9;
+    if ($[20] !== t) {
+      t9 = t("Most called");
+      $[20] = t;
+      $[21] = t9;
     } else {
-      t13 = $[24];
+      t9 = $[21];
     }
-    let t14;
-    if ($[25] !== t13) {
-      t14 = {
+    let t10;
+    if ($[22] !== t9) {
+      t10 = {
         key: "calls",
-        label: t13
+        label: t9
       };
-      $[25] = t13;
-      $[26] = t14;
+      $[22] = t9;
+      $[23] = t10;
     } else {
-      t14 = $[26];
+      t10 = $[23];
     }
-    let t15;
-    if ($[27] !== t) {
-      t15 = t("Slowest");
-      $[27] = t;
-      $[28] = t15;
+    let t11;
+    if ($[24] !== t) {
+      t11 = t("Slowest");
+      $[24] = t;
+      $[25] = t11;
     } else {
-      t15 = $[28];
+      t11 = $[25];
     }
-    let t16;
-    if ($[29] !== t15) {
-      t16 = {
+    let t12;
+    if ($[26] !== t11) {
+      t12 = {
         key: "slowest",
-        label: t15
+        label: t11
       };
-      $[29] = t15;
-      $[30] = t16;
+      $[26] = t11;
+      $[27] = t12;
     } else {
-      t16 = $[30];
+      t12 = $[27];
     }
-    let t17;
-    if ($[31] !== t12 || $[32] !== t14 || $[33] !== t16) {
-      t17 = [t12, t14, t16];
-      $[31] = t12;
-      $[32] = t14;
-      $[33] = t16;
-      $[34] = t17;
+    let t13;
+    if ($[28] !== t10 || $[29] !== t12 || $[30] !== t8) {
+      t13 = [t8, t10, t12];
+      $[28] = t10;
+      $[29] = t12;
+      $[30] = t8;
+      $[31] = t13;
     } else {
-      t17 = $[34];
+      t13 = $[31];
     }
-    const sortButtons = t17;
-    let t18;
-    if ($[35] !== shardKey) {
-      t18 = /* @__PURE__ */ jsxDEV(ShardInput, {
+    const sortButtons = t13;
+    let t14;
+    if ($[32] !== shardKey) {
+      t14 = /* @__PURE__ */ jsxDEV(ShardInput, {
         onChange: setShardKey,
         testId: "fs-shard-input",
         value: shardKey
       }, void 0, false);
-      $[35] = shardKey;
-      $[36] = t18;
+      $[32] = shardKey;
+      $[33] = t14;
     } else {
-      t18 = $[36];
+      t14 = $[33];
     }
-    let t19;
-    if ($[37] !== liveError) {
-      t19 = /* @__PURE__ */ jsxDEV(LiveError, {
+    let t15;
+    if ($[34] !== liveError) {
+      t15 = /* @__PURE__ */ jsxDEV(LiveError, {
         message: liveError,
         prefix: "fs"
       }, void 0, false);
-      $[37] = liveError;
-      $[38] = t19;
+      $[34] = liveError;
+      $[35] = t15;
     } else {
-      t19 = $[38];
+      t15 = $[35];
     }
-    let t20;
-    if ($[39] !== sortButtons || $[40] !== sortKey) {
-      t20 = /* @__PURE__ */ jsxDEV("div", {
+    let t16;
+    if ($[36] !== sortButtons || $[37] !== sortKey) {
+      t16 = /* @__PURE__ */ jsxDEV("div", {
         className: "ml-auto flex items-center gap-1",
         role: "group",
         children: sortButtons.map((option) => /* @__PURE__ */ jsxDEV(Button, {
@@ -277,42 +220,42 @@ const FunctionStatsPanel = (t0) => {
           children: option.label
         }, option.key, false))
       }, void 0, false);
-      $[39] = sortButtons;
-      $[40] = sortKey;
-      $[41] = t20;
+      $[36] = sortButtons;
+      $[37] = sortKey;
+      $[38] = t16;
     } else {
-      t20 = $[41];
+      t16 = $[38];
     }
-    let t21;
-    if ($[42] !== t18 || $[43] !== t19 || $[44] !== t20) {
-      t21 = /* @__PURE__ */ jsxDEV("div", {
+    let t17;
+    if ($[39] !== t14 || $[40] !== t15 || $[41] !== t16) {
+      t17 = /* @__PURE__ */ jsxDEV("div", {
         className: "flex flex-wrap items-center gap-2",
-        children: [t18, t19, t20]
+        children: [t14, t15, t16]
       }, void 0, true);
-      $[42] = t18;
-      $[43] = t19;
-      $[44] = t20;
-      $[45] = t21;
+      $[39] = t14;
+      $[40] = t15;
+      $[41] = t16;
+      $[42] = t17;
     } else {
-      t21 = $[45];
+      t17 = $[42];
     }
-    let t22;
-    if ($[46] !== error) {
-      t22 = error !== null && /* @__PURE__ */ jsxDEV("p", {
+    let t18;
+    if ($[43] !== error) {
+      t18 = error !== null && /* @__PURE__ */ jsxDEV("p", {
         className: "text-sm text-destructive",
         "data-testid": "fs-error",
         role: "alert",
         children: error
       }, void 0, false);
-      $[46] = error;
-      $[47] = t22;
+      $[43] = error;
+      $[44] = t18;
     } else {
-      t22 = $[47];
+      t18 = $[44];
     }
-    t10 = /* @__PURE__ */ jsxDEV("div", {
+    t6 = /* @__PURE__ */ jsxDEV("div", {
       className: "flex flex-col gap-4",
       "data-testid": "lunora-function-stats",
-      children: [t21, t22, stats !== null && sorted.length === 0 && error === null && /* @__PURE__ */ jsxDEV(EmptyState, {
+      children: [t17, t18, stats !== null && sorted.length === 0 && error === null && /* @__PURE__ */ jsxDEV(EmptyState, {
         description: t("Per-function call counts, error rates, and latency land here after your first request."),
         icon: /* @__PURE__ */ jsxDEV("svg", {
           "aria-hidden": "true",
@@ -412,18 +355,18 @@ const FunctionStatsPanel = (t0) => {
         }, void 0, false)
       }, void 0, false)]
     }, void 0, true);
-    $[11] = error;
-    $[12] = kindByPath;
-    $[13] = liveError;
-    $[14] = shardKey;
-    $[15] = sortKey;
-    $[16] = stats;
-    $[17] = t;
-    $[18] = t10;
+    $[8] = error;
+    $[9] = kindByPath;
+    $[10] = liveError;
+    $[11] = shardKey;
+    $[12] = sortKey;
+    $[13] = stats;
+    $[14] = t;
+    $[15] = t6;
   } else {
-    t10 = $[18];
+    t6 = $[15];
   }
-  return t10;
+  return t6;
 };
 function _temp(descriptor) {
   return [descriptor.path, descriptor.kind];

package/dist/packem_shared/{GlobalDataBrowser-9MhPEfgN.js → GlobalDataBrowser-DAxzB-Br.js}

@@ -2,12 +2,12 @@ import { useLunora } from '@lunora/react';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { E as EmptyState } from './empty-state-DY_oe0k6.js';
 import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from './table-_RzNvy3R.js';
+import { b as useClientQuery } from './use-admin-query-4JQW2rr1.js';
 import { useAutoRefresh } from './DEFAULT_AUTO_REFRESH_MS-Vxwaxx51.js';
-import { useT } from './createStudioI18n-CgvlmDkN.js';
-import { C as CLOUDFLARE_D1_URL } from './cf-links-BZfRdxSE.js';
-import { e as errorMessage, f as fireAndForget } from './internal-BBZYexre.js';
-import { u as useFacets, T as TableListSidebar, G as GridPagination, D as DataFacets } from './table-list-sidebar-aZHLq70w.js';
-import { G as GridContainer, C as CellValue } from './data-grid-CCh2Couo.js';
+import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
+import { b as CLOUDFLARE_D1_URL } from './cf-links-2cktDedA.js';
+import { u as useFacets, T as TableListSidebar, G as GridPagination, D as DataFacets } from './table-list-sidebar-Bg7uzbvC.js';
+import { G as GridContainer, C as CellValue } from './data-grid-B5CaV3wS.js';
 import { jsxDEV } from 'react/jsx-dev-runtime';
 
 const DEFAULT_PAGE_SIZE = 50;
@@ -37,13 +37,9 @@ const GlobalDataBrowser = ({
 } = {}) => {
   const client = useLunora();
   const t = useT();
-  const [tables, setTables] = useState(null);
-  const [tablesError, setTablesError] = useState(null);
   const [selectedTable, setSelectedTable] = useState(initialTable ?? null);
   const [offset, setOffset] = useState(0);
   const [pageSize, setPageSize] = useState(initialPageSize);
-  const [page, setPage] = useState(null);
-  const [pageError, setPageError] = useState(null);
   const [filters, setFilters] = useState([]);
   const filtersRef = useRef(filters);
   filtersRef.current = filters;
@@ -53,76 +49,53 @@ const GlobalDataBrowser = ({
     refetchFacets: refetchFacetsViaHook,
     toggleFacet
   } = useFacets();
-  const fetchTables = useCallback(async () => {
-    setTablesError(null);
-    try {
-      setTables(await client.listGlobalTables());
-    } catch (error) {
-      setTables(null);
-      setTablesError(errorMessage(error));
-    }
-  }, [client]);
-  const fetchSeqRef = useRef(0);
-  const fetchPage = useCallback(async (table, nextOffset, limit = pageSize, activeFilters = filtersRef.current) => {
-    fetchSeqRef.current += 1;
-    const seq = fetchSeqRef.current;
-    setPageError(null);
-    try {
-      const result = await client.readGlobalTablePage({
-        filters: activeFilters,
-        limit,
-        offset: nextOffset,
-        table
-      });
-      if (fetchSeqRef.current !== seq) {
-        return;
-      }
-      setPage(result);
-      setOffset(nextOffset);
-    } catch (error_0) {
-      if (fetchSeqRef.current !== seq) {
-        return;
-      }
-      setPage(null);
-      setPageError(errorMessage(error_0));
-    }
-  }, [client, pageSize]);
-  const facetFetcher = (table_0, activeFilters_0) => (column) => client.facetGlobalColumn({
+  const tablesQuery = useClientQuery(["lunora-global-tables"], () => client.listGlobalTables());
+  const tables = tablesQuery.data ?? null;
+  const tablesError = tablesQuery.error;
+  const pageQuery = useClientQuery(["lunora-global-page", selectedTable ?? "", offset, pageSize, JSON.stringify(filters)], () => client.readGlobalTablePage({
+    filters,
+    limit: pageSize,
+    offset,
+    table: selectedTable ?? ""
+  }), {
+    enabled: selectedTable !== null,
+    keepPreviousData: false
+  });
+  const page = pageQuery.data ?? null;
+  const pageError = pageQuery.error;
+  const facetFetcher = (table, activeFilters) => (column) => client.facetGlobalColumn({
     column,
-    filters: activeFilters_0,
-    table: table_0
+    filters: activeFilters,
+    table
   });
-  const refetchFacets = (table_1, activeFilters_1) => {
-    refetchFacetsViaHook(facetFetcher(table_1, activeFilters_1));
+  const refetchFacets = (table_0, activeFilters_0) => {
+    refetchFacetsViaHook(facetFetcher(table_0, activeFilters_0));
   };
-  useEffect(() => {
-    fireAndForget(fetchTables());
-  }, [fetchTables]);
   useAutoRefresh(() => {
-    fireAndForget(fetchTables());
+    tablesQuery.refetch();
     if (selectedTable !== null) {
-      fireAndForget(fetchPage(selectedTable, offset));
+      pageQuery.refetch();
       refetchFacets(selectedTable, filtersRef.current);
     }
   }, true);
   const appliedInitialTable = useRef(void 0);
-  const selectTable = useCallback((table_2) => {
-    setSelectedTable(table_2);
-    appliedInitialTable.current = table_2;
+  const selectTable = useCallback((table_1) => {
+    setSelectedTable(table_1);
+    appliedInitialTable.current = table_1;
     setFilters([]);
     filtersRef.current = [];
     clearFacets();
-    fireAndForget(fetchPage(table_2, 0, pageSize, []));
-    onSelectTable?.(table_2);
-  }, [clearFacets, fetchPage, onSelectTable, pageSize]);
+    setOffset(0);
+    onSelectTable?.(table_1);
+  }, [clearFacets, onSelectTable]);
   const onToggleFacet = (column_0) => {
     toggleFacet(column_0, selectedTable === null ? null : facetFetcher(selectedTable, filtersRef.current));
   };
   const applyFilters = (next) => {
     setFilters(next);
     filtersRef.current = next;
+    setOffset(0);
     if (selectedTable !== null) {
-      fireAndForget(fetchPage(selectedTable, 0, pageSize, next));
       refetchFacets(selectedTable, next);
     }
   };
@@ -146,11 +119,11 @@ const GlobalDataBrowser = ({
       selectTable(target);
     });
   }, [initialTable, selectTable]);
-  const goToPage = (nextOffset_0) => {
+  const goToPage = (nextOffset) => {
     if (selectedTable === null) {
       return;
     }
-    fireAndForget(fetchPage(selectedTable, Math.max(0, nextOffset_0)));
+    setOffset(Math.max(0, nextOffset));
   };
   const total = page?.total ?? 0;
   const hasPrevious = offset > 0;
@@ -158,7 +131,7 @@ const GlobalDataBrowser = ({
   const rangeStart = page === null || page.rows.length === 0 ? 0 : offset + 1;
   const rangeEnd = page === null ? 0 : offset + page.rows.length;
   const reloadTables = () => {
-    fireAndForget(fetchTables());
+    tablesQuery.refetch();
   };
   const goPrevious = () => {
     goToPage(offset - pageSize);
@@ -171,9 +144,7 @@ const GlobalDataBrowser = ({
   };
   const changePageSize = (size) => {
     setPageSize(size);
-    if (selectedTable !== null) {
-      fireAndForget(fetchPage(selectedTable, 0, size));
-    }
+    setOffset(0);
   };
   return /* @__PURE__ */ jsxDEV("div", {
     className: "flex h-full min-w-0",