@flytedan/flytebot-design-system 0.60.0 → 0.61.0

package/dist/index.cjs

@@ -216,6 +216,7 @@ __export(index_exports, {
   formatRelative: () => formatRelative,
   groupMessages: () => groupMessages,
   hasModifier: () => hasModifier,
+  historyUrlAdapter: () => historyUrlAdapter,
   iconForMime: () => iconForMime,
   importanceLevel: () => importanceLevel,
   importanceTokens: () => importanceTokens,
@@ -235,6 +236,7 @@ __export(index_exports, {
   preferenceScore: () => preferenceScore,
   preferenceSegments: () => preferenceSegments,
   rangeFilter: () => rangeFilter,
+  readQueryFromUrl: () => readQueryFromUrl,
   resolveTheme: () => resolveTheme,
   revokeAttachment: () => revokeAttachment,
   savePrefs: () => savePrefs,
@@ -258,7 +260,8 @@ __export(index_exports, {
   useToast: () => useToast,
   validateFilterValue: () => validateFilterValue,
   visibleMessages: () => visibleMessages,
-  watchAppearance: () => watchAppearance
+  watchAppearance: () => watchAppearance,
+  writeQueryToUrl: () => writeQueryToUrl
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -14467,6 +14470,75 @@ function BreadcrumbCrumb({
 
 // src/kits/query.ts
 var React74 = __toESM(require("react"), 1);
+
+// src/kits/queryUrl.ts
+var historyUrlAdapter = {
+  read: () => new URLSearchParams(window.location.search),
+  write(next) {
+    const search = next.toString();
+    const url = window.location.pathname + (search ? `?${search}` : "") + window.location.hash;
+    window.history.replaceState(window.history.state, "", url);
+  },
+  subscribe(onChange) {
+    const onPopState = () => onChange(new URLSearchParams(window.location.search));
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }
+};
+var names = (scope) => {
+  const prefix = scope ? `${scope}-` : "";
+  return {
+    q: `${prefix}q`,
+    sort: `${prefix}sort`,
+    dir: `${prefix}dir`,
+    page: `${prefix}page`,
+    pageSize: `${prefix}pageSize`,
+    filters: `${prefix}filters`
+  };
+};
+var positiveInt = (text) => {
+  const n = Number(text);
+  return text !== null && Number.isInteger(n) && n >= 1 ? n : null;
+};
+function parseFilters(text) {
+  if (text === null) return null;
+  try {
+    const parsed = JSON.parse(text);
+    return parsed !== null && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function readQueryFromUrl(params, scope, base, paging) {
+  const n = names(scope);
+  const dir = params.get(n.dir);
+  return {
+    page: paging === "page" ? positiveInt(params.get(n.page)) ?? base.page : base.page,
+    pageSize: positiveInt(params.get(n.pageSize)) ?? base.pageSize,
+    sort: params.get(n.sort) || base.sort,
+    dir: dir === "asc" || dir === "desc" ? dir : base.dir,
+    q: params.get(n.q) ?? base.q,
+    filters: parseFilters(params.get(n.filters)) ?? base.filters
+  };
+}
+function writeQueryToUrl(params, scope, query, base, paging) {
+  const n = names(scope);
+  const next = new URLSearchParams(params);
+  const set = (name, value, isDefault) => {
+    if (value === null || isDefault) next.delete(name);
+    else next.set(name, value);
+  };
+  set(n.q, query.q, query.q === base.q);
+  set(n.sort, query.sort, query.sort === base.sort);
+  set(n.dir, query.dir, query.dir === base.dir);
+  set(n.pageSize, String(query.pageSize), query.pageSize === base.pageSize);
+  set(n.page, String(query.page), paging === "keyset" || query.page === base.page);
+  const filters = JSON.stringify(query.filters);
+  set(n.filters, filters, filters === JSON.stringify(base.filters));
+  return next;
+}
+
+// src/kits/query.ts
 var isMultiSelectShaped = (v) => !!v && typeof v === "object" && Array.isArray(v.values);
 var isRangeShaped = (v) => !!v && typeof v === "object" && ("min" in v || "max" in v);
 var isDateShaped = (v) => !!v && typeof v === "object" && "kind" in v;
@@ -14520,50 +14592,129 @@ function compare(a, b, dir) {
 }
 var API = null;
 var PREFS = null;
-function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
-  const [query, setQuery] = React74.useState(() => {
+function loadedFrom(paging, answer) {
+  if (paging === "keyset") {
+    const r2 = answer;
+    return { rows: r2.rows, pager: null, next: r2.next, total: r2.total ?? null, facets: r2.filter?.facets ?? {}, aggregate: r2.aggregate ?? {} };
+  }
+  const r = answer;
+  return { rows: r.rows, pager: r.pager ?? null, next: null, total: null, facets: r.filter?.facets ?? {}, aggregate: r.aggregate ?? {} };
+}
+function requestFor(params, query, paging, after) {
+  if (paging === "page") return { ...params || {}, ...query };
+  const { sort, dir, q, filters, pageSize } = query;
+  return { ...params || {}, sort, dir, q, filters, limit: pageSize, ...after === void 0 ? {} : { after } };
+}
+var toError = (e) => e instanceof Error ? e : new Error(String(e));
+function useServerTable({ endpoint, params, defaults, deps, prefsKey, paging = "page", url }) {
+  const [base] = React74.useState(() => {
     const store = PREFS || window.PlannerPrefs;
     const saved = prefsKey && store ? store.getTable(prefsKey) : {};
     return { ...DEFAULTS, ...defaults || {}, ...saved.pageSize ? { pageSize: saved.pageSize } : {}, ...saved.sort ? { sort: saved.sort, dir: saved.dir || "desc" } : {} };
   });
+  const [mountParams] = React74.useState(() => url ? (url.adapter ?? historyUrlAdapter).read() : null);
+  const address = React74.useRef(mountParams);
+  const [query, setQuery] = React74.useState(() => url && mountParams ? readQueryFromUrl(mountParams, url.scope, base, paging) : base);
   const savePref = React74.useCallback((patch2) => {
     const store = PREFS || window.PlannerPrefs;
     if (prefsKey && store) store.setTable(prefsKey, patch2);
   }, [prefsKey]);
   const [res, setRes] = React74.useState(null);
   const [loading, setLoading] = React74.useState(true);
-  const seq2 = React74.useRef(0);
+  const [loadingMore, setLoadingMore] = React74.useState(false);
+  const [failure, setFailure] = React74.useState(null);
+  const [reloadToken, setReloadToken] = React74.useState(0);
+  const moreController = React74.useRef(null);
   const depKey = (deps || []).join("|");
   const paramKey = JSON.stringify(params || {});
   const queryKey = JSON.stringify(query);
+  const lifetime = React74.useRef(null);
+  React74.useEffect(() => {
+    const controller = new AbortController();
+    lifetime.current = controller;
+    return () => controller.abort();
+  }, []);
+  const latest = React74.useRef({ res, loading, query, params, endpoint, url, base });
+  React74.useEffect(() => {
+    latest.current = { res, loading, query, params, endpoint, url, base };
+  });
   React74.useEffect(() => {
-    const id = ++seq2.current;
+    const controller = new AbortController();
+    const { signal } = controller;
     setLoading(true);
+    setLoadingMore(false);
+    setFailure(null);
     const t = setTimeout(() => {
-      QueryKit.getApi().request(endpoint, { ...params || {}, ...query }).then((r) => {
-        if (id !== seq2.current) return;
-        setRes(r);
-        setLoading(false);
-      });
+      const { url: u, base: b } = latest.current;
+      if (u && address.current) {
+        const next = writeQueryToUrl(address.current, u.scope, query, b, paging);
+        if (next.toString() !== address.current.toString()) {
+          address.current = next;
+          (u.adapter ?? historyUrlAdapter).write(next);
+        }
+      }
+      QueryKit.getApi().request(endpoint, requestFor(params, query, paging), { signal }).then(
+        (r) => {
+          if (signal.aborted) return;
+          setRes(loadedFrom(paging, r));
+          setLoading(false);
+        },
+        (e) => {
+          if (signal.aborted) return;
+          setFailure({ error: toError(e), during: "query" });
+          setLoading(false);
+        }
+      );
     }, query.q ? 220 : 60);
-    return () => clearTimeout(t);
-  }, [endpoint, queryKey, paramKey, depKey]);
+    return () => {
+      clearTimeout(t);
+      controller.abort();
+      moreController.current?.abort();
+      moreController.current = null;
+    };
+  }, [endpoint, queryKey, paramKey, depKey, paging, reloadToken]);
+  const adapter = url ? url.adapter ?? historyUrlAdapter : null;
+  React74.useEffect(() => {
+    if (!adapter) return;
+    return adapter.subscribe((params2) => {
+      const { url: u, base: b } = latest.current;
+      if (!u) return;
+      address.current = params2;
+      const fromAddress = readQueryFromUrl(params2, u.scope, b, paging);
+      setQuery((s) => JSON.stringify(s) === JSON.stringify(fromAddress) ? s : fromAddress);
+    });
+  }, [adapter, paging]);
   const patch = (p, resetPage = true) => setQuery((s) => ({ ...s, ...p, page: resetPage ? 1 : p.page != null ? p.page : s.page }));
-  const defaultPager = { page: query.page, pageSize: query.pageSize, total: 0, totalPages: 1, from: 0, to: 0, hasPrev: false, hasNext: false };
-  const pager = res && res.pager || defaultPager;
-  const api = {
+  const loadMore = () => {
+    const { res: loaded, loading: querying, query: q, params: p, endpoint: e } = latest.current;
+    if (!loaded || loaded.next === null || querying || moreController.current !== null) return;
+    const controller = new AbortController();
+    const { signal } = controller;
+    moreController.current = controller;
+    setLoadingMore(true);
+    setFailure(null);
+    QueryKit.getApi().request(e, requestFor(p, q, "keyset", loaded.next), { signal }).then(
+      (r) => {
+        if (signal.aborted) return;
+        moreController.current = null;
+        const more = loadedFrom("keyset", r);
+        setRes((now) => now && { ...more, rows: [...now.rows, ...more.rows], total: more.total ?? now.total });
+        setLoadingMore(false);
+      },
+      (err) => {
+        if (signal.aborted) return;
+        moreController.current = null;
+        setFailure({ error: toError(err), during: "more" });
+        setLoadingMore(false);
+      }
+    );
+  };
+  const shared = {
     rows: res ? res.rows : [],
-    /** The response's pager block, verbatim. */
-    pager,
-    total: pager.total || 0,
-    page: pager.page || query.page,
     pageSize: query.pageSize,
-    totalPages: pager.totalPages || 1,
-    from: pager.from || 0,
-    to: pager.to || 0,
-    facets: res && res.filter && res.filter.facets || {},
+    facets: res ? res.facets : {},
     /** Server-computed totals over the whole match, never the current page. */
-    aggregate: res && res.aggregate || {},
+    aggregate: res ? res.aggregate : {},
     /** The live query object — pass to fetchAll-style calls that need the full match. */
     query,
     sort: query.sort ? { key: query.sort, dir: query.dir } : void 0,
@@ -14572,8 +14723,12 @@ function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
     loading,
     /** True only on the very first load — later loads keep showing stale rows. */
     initialLoading: loading && !res,
+    error: failure ? failure.error : null,
+    retry: () => {
+      if (failure?.during === "more") loadMore();
+      else setReloadToken((t) => t + 1);
+    },
     activeFilterCount: Object.values(query.filters).filter(isActiveFilterValue).length,
-    setPage: (page) => patch({ page }, false),
     setPageSize: (pageSize) => {
       savePref({ pageSize });
       patch({ pageSize });
@@ -14588,8 +14743,6 @@ function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
       savePref({ sort: key, dir: dir || "desc" });
       setQuery((s) => ({ ...s, page: 1, sort: key, dir: dir || "desc" }));
     },
-    /** Same query, unpaged — for CSV export and select-all-matching. */
-    fetchAll: () => QueryKit.getApi().request(endpoint, { ...params || {}, ...query, page: 1, pageSize: 1e5 }).then((r) => r.rows),
     /** value may be an updater fn — required for toggles, or two fast clicks
         both read the same stale array and the first one is lost. */
     setFilter: (id, value) => setQuery((s) => ({ ...s, page: 1, filters: { ...s.filters, [id]: typeof value === "function" ? value(s.filters[id]) : value } })),
@@ -14600,14 +14753,30 @@ function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
     }),
     setFilters: (filters) => patch({ filters }),
     clearFilters: () => patch({ filters: {}, q: "" }),
-    refresh: () => setQuery((s) => ({ ...s })),
+    refresh: () => setReloadToken((t) => t + 1),
+    patchRows: (change) => setRes((now) => now && { ...now, rows: change(now.rows) }),
     /* True on a re-query while the PREVIOUS rows are still rendered — sort, filter, page.
        Distinct from `loading` (first load, nothing on screen) because the two need different
        treatments: skeletons versus a stale overlay on real content. */
     refreshing: loading && !!res,
     queryString: QueryKit.toQueryString(query)
   };
-  return api;
+  if (paging === "keyset") {
+    return { ...shared, total: res ? res.total : null, hasMore: !!res && res.next !== null, loadingMore, loadMore };
+  }
+  const pager = res && res.pager || { page: query.page, pageSize: query.pageSize, total: 0, totalPages: 1, from: 0, to: 0, hasPrev: false, hasNext: false };
+  return {
+    ...shared,
+    pager,
+    total: pager.total || 0,
+    page: pager.page || query.page,
+    totalPages: pager.totalPages || 1,
+    from: pager.from || 0,
+    to: pager.to || 0,
+    setPage: (page) => patch({ page }, false),
+    /** Same query, unpaged — for CSV export and select-all-matching. */
+    fetchAll: () => QueryKit.getApi().request(endpoint, { ...params || {}, ...query, page: 1, pageSize: 1e5 }, { signal: lifetime.current.signal }).then((r) => r.rows)
+  };
 }
 var QueryKit = {
   DEFAULTS,
@@ -15053,6 +15222,7 @@ function useDocumentTitle(routeTitle, appName) {
   formatRelative,
   groupMessages,
   hasModifier,
+  historyUrlAdapter,
   iconForMime,
   importanceLevel,
   importanceTokens,
@@ -15072,6 +15242,7 @@ function useDocumentTitle(routeTitle, appName) {
   preferenceScore,
   preferenceSegments,
   rangeFilter,
+  readQueryFromUrl,
   resolveTheme,
   revokeAttachment,
   savePrefs,
@@ -15095,6 +15266,7 @@ function useDocumentTitle(routeTitle, appName) {
   useToast,
   validateFilterValue,
   visibleMessages,
-  watchAppearance
+  watchAppearance,
+  writeQueryToUrl
 });
 //# sourceMappingURL=index.cjs.map