@protobase/ui 0.0.0-stage → 0.1.1

package/dist/auth/forgot-password-page.js

@@ -0,0 +1,35 @@
+import { useAuth } from "./auth-provider.js";
+import { ForgotPasswordForm } from "./forgot-password-form.js";
+import { resetLinkTarget } from "./reset-link.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AuthError } from "@protobase/client";
+//#region src/auth/forgot-password-page.tsx
+/** Asks the server to email a reset link that leads back to this page. */
+const ForgotPasswordPage = ({ onBack }) => {
+	const { session } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [sentTo, setSentTo] = useState();
+	const submit = async (email) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await session.requestPasswordReset(email, resetLinkTarget(window.location.href));
+			setSentTo(email);
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(failure.status === 429 ? "Too many requests. Wait a minute and try again." : failure.message);
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsx(ForgotPasswordForm, {
+		busy,
+		error,
+		sentTo,
+		onBack,
+		onSubmit: (email) => void submit(email)
+	});
+};
+//#endregion
+export { ForgotPasswordPage };

package/dist/auth/reset-link.js

@@ -0,0 +1,29 @@
+//#region src/auth/reset-link.ts
+/** Marks the address an emailed reset link leads back to, so the app opens the set-password page there. */
+const resetMarker = "password-reset";
+/** Where the emailed link leads back to: this page, marked. */
+const resetLinkTarget = (href) => {
+	const url = new URL(href);
+	return `${url.origin}${url.pathname}?${resetMarker}`;
+};
+/**
+* The reset link this page was opened from, or `undefined`. Better Auth adds the `token`, or `error=INVALID_TOKEN`
+* instead for a used or expired link; then `token` is `undefined`.
+*/
+const readResetLink = (href) => {
+	const params = new URL(href).searchParams;
+	if (!params.has("password-reset")) return void 0;
+	return { token: params.get("token") || void 0 };
+};
+/** The address without the reset link's parameters, for the address bar once the link is used. */
+const withoutResetLink = (href) => {
+	const url = new URL(href);
+	for (const name of [
+		resetMarker,
+		"token",
+		"error"
+	]) url.searchParams.delete(name);
+	return `${url.pathname}${url.search}${url.hash}`;
+};
+//#endregion
+export { readResetLink, resetLinkTarget, resetMarker, withoutResetLink };

package/dist/auth/reset-password-form.js

@@ -0,0 +1,88 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ResetPasswordForm = ({ onSubmit, invalidLink, onRequestNewLink, onBack, busy, error }) => {
+	const [password, setPassword] = useState("");
+	const [repeat, setRepeat] = useState("");
+	const [mismatch, setMismatch] = useState(false);
+	if (invalidLink) return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "This link no longer works",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-[13px] text-muted-foreground",
+			children: "A reset link works once, for a limited time. Ask for a new one to choose your password."
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 flex flex-col gap-2",
+			children: [onRequestNewLink && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				className: "min-h-10",
+				onClick: onRequestNewLink,
+				children: "Send a new link"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: onRequestNewLink ? "ghost" : "primary",
+				className: "min-h-10",
+				onClick: onBack,
+				children: "Back to sign in"
+			})]
+		})]
+	});
+	const shown = mismatch ? "The passwords are not the same." : error;
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title: "Choose a new password",
+		description: `At least 12 characters.`,
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				setMismatch(password !== repeat);
+				if (password === repeat) onSubmit(password);
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["New password", /* @__PURE__ */ jsx(Input, {
+						type: "password",
+						name: "new-password",
+						autoComplete: "new-password",
+						required: true,
+						minLength: 12,
+						autoFocus: true,
+						value: password,
+						invalid: Boolean(shown),
+						onChange: (event) => setPassword(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Repeat new password", /* @__PURE__ */ jsx(Input, {
+						type: "password",
+						name: "repeat-password",
+						autoComplete: "new-password",
+						required: true,
+						minLength: 12,
+						value: repeat,
+						invalid: Boolean(shown),
+						onChange: (event) => setRepeat(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				shown && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: shown
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: "Set new password"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ResetPasswordForm };

package/dist/auth/reset-password-page.js

@@ -0,0 +1,43 @@
+import { useAuth } from "./auth-provider.js";
+import { ResetPasswordForm } from "./reset-password-form.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AuthError } from "@protobase/client";
+//#region src/auth/reset-password-page.tsx
+/** Better Auth's answers to a new password, in words for the person at the keyboard. */
+const resetPasswordMessage = (error) => {
+	if (error.status === 429) return "Too many attempts. Wait a minute and try again.";
+	if (error.code === "PASSWORD_TOO_SHORT") return `Use at least 12 characters.`;
+	if (error.code === "PASSWORD_TOO_LONG") return "That password is too long.";
+	return error.message;
+};
+/** Sets a new password with the token of an emailed reset link. */
+const ResetPasswordPage = ({ token, onDone, onRequestNewLink, onBack }) => {
+	const { session } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [invalid, setInvalid] = useState(!token);
+	const submit = async (password) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await session.resetPassword(token, password);
+			onDone();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			if (failure.code === "INVALID_TOKEN") setInvalid(true);
+			else setError(resetPasswordMessage(failure));
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(ResetPasswordForm, {
+		busy,
+		error,
+		invalidLink: invalid,
+		onRequestNewLink,
+		onBack,
+		onSubmit: (password) => void submit(password)
+	});
+};
+//#endregion
+export { ResetPasswordPage, resetPasswordMessage };

package/dist/auth/sign-in-form.js

@@ -0,0 +1,90 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/sign-in-form.tsx
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword, onContinueWithGitHub }) => {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Sign in to Protobase",
+		description: workspace,
+		children: [
+			notice && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+				children: notice
+			}),
+			onContinueWithGitHub && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				onClick: onContinueWithGitHub,
+				disabled: busy,
+				className: "min-h-10 w-full",
+				children: "Continue with GitHub"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+					"or",
+					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+				]
+			})] }),
+			/* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-4",
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit(email.trim(), password);
+				},
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						children: ["Email", /* @__PURE__ */ jsx(Input, {
+							type: "email",
+							name: "email",
+							autoComplete: "username",
+							required: true,
+							autoFocus: true,
+							value: email,
+							invalid: Boolean(error),
+							onChange: (event) => setEmail(event.target.value),
+							className: "min-h-6"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						children: ["Password", /* @__PURE__ */ jsx(Input, {
+							type: "password",
+							name: "password",
+							autoComplete: "current-password",
+							required: true,
+							value: password,
+							invalid: Boolean(error),
+							onChange: (event) => setPassword(event.target.value),
+							className: "min-h-6"
+						})]
+					}),
+					error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-xs font-medium text-danger-text",
+						children: error
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						type: "submit",
+						loading: busy,
+						className: "min-h-10",
+						children: "Sign in"
+					}),
+					onForgotPassword && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onForgotPassword,
+						className: "self-center text-[13px] font-medium text-primary-text hover:underline",
+						children: "Forgot password?"
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { SignInForm };

package/dist/auth/sign-in-page.js

@@ -0,0 +1,39 @@
+import { useAuth } from "./auth-provider.js";
+import { SignInForm } from "./sign-in-form.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AuthError } from "@protobase/client";
+//#region src/auth/sign-in-page.tsx
+/** Better Auth's messages, in words for the person at the keyboard. */
+const signInMessage = (error) => {
+	if (error.status === 429) return "Too many attempts. Wait a minute and try again.";
+	if (error.status === 401 || error.code === "INVALID_EMAIL_OR_PASSWORD") return "The email or password is not right.";
+	return error.message;
+};
+const SignInPage = ({ workspace, notice, onForgotPassword }) => {
+	const { signIn, signInSocial, socialProviders } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const attempt = async (start) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await start();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(signInMessage(failure));
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(SignInForm, {
+		busy,
+		error,
+		workspace,
+		notice,
+		onForgotPassword,
+		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github")) : void 0,
+		onSubmit: (email, password) => void attempt(() => signIn(email, password))
+	});
+};
+//#endregion
+export { SignInPage, signInMessage };

package/dist/auth/user-to-shell.js

@@ -0,0 +1,18 @@
+//#region src/auth/user-to-shell.ts
+const hueOf = (text) => [...text].reduce((sum, char) => (sum * 31 + char.charCodeAt(0)) % 360, 7);
+const initialsOf = (name) => name.split(/[\s@.]+/).filter(Boolean).slice(0, 2).map((part) => part[0].toUpperCase()).join("");
+/** What the sidebar's profile menu shows for a signed-in user. */
+const userToShell = (user) => {
+	const roles = (user.role ?? "user").split(",").map((role) => role.trim());
+	const admin = roles.includes("admin");
+	return {
+		name: user.name || user.email,
+		email: user.email,
+		initials: initialsOf(user.name || user.email) || "?",
+		hue: hueOf(user.id || user.email),
+		role: admin ? "Admin" : (roles[0] ?? "user").replace(/^./, (char) => char.toUpperCase()),
+		roleTone: admin ? "violet" : "blue"
+	};
+};
+//#endregion
+export { userToShell };

package/dist/data/api-provider.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+import { QueryClient } from "@tanstack/react-query";
+import { Client, ClientOptions } from "@protobase/client";
+//#region src/data/api-provider.d.ts
+export declare const useClient: () => {
+  list: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
+  search: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
+  get: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  create: <R extends import("@protobase/client").ResourceRef>(resource: R, body: Partial<import("@protobase/client").RecordOf<R>>) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>> & {
+    location: string;
+  }>;
+  update: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], patch: Partial<import("@protobase/client").RecordOf<R>>, etag: string) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  remove: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { etag }?: {
+    etag?: string;
+  }) => Promise<void>;
+  undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
+  batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
+  facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
+    filter?: import("@protobase/client").FilterInput;
+    limit?: number;
+  }) => Promise<import("@protobase/client").Facet[]>;
+  series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
+    filter?: import("@protobase/client").FilterInput;
+  }) => Promise<import("@protobase/client").Series>;
+  histogram: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
+    filter?: import("@protobase/client").FilterInput;
+    buckets?: number;
+  }) => Promise<import("@protobase/client").Histogram>;
+  seek: <R extends import("@protobase/client").ResourceRef>(resource: R, params: import("@protobase/client").ListParams & {
+    position: number;
+  }) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
+  meta: (etag?: string) => Promise<import("@protobase/client").MetaResult>;
+};
+export type ApiProviderProps = {
+  /** Defaults to `/api/v1` on the current origin. */
+  baseUrl?: string;
+  /** A ready-made client, for tests; skips the meta-version watcher. */
+  client?: Client;
+  /** The `fetch` the built client uses, for tests that keep the meta-version watcher. */
+  fetch?: ClientOptions['fetch'];
+  queryClient?: QueryClient;
+  /** The bearer token source, and what to do when the session is over; see `createAuthSession`. */
+  token?: ClientOptions['token'];
+  onUnauthenticated?: () => void;
+  children: ReactNode;
+};
+/**
+ * Owns the query cache and the API client; refetches `/meta` whenever `X-Meta-Version` changes. The version is
+ * compared only with the last one seen: it hashes the models and roles, while the `/meta` ETag hashes the whole
+ * per-caller body, so the two never match.
+ */
+export declare const ApiProvider: ({ baseUrl, client: given, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }: ApiProviderProps) => import("react").JSX.Element;
+//#endregion

package/dist/data/api-provider.js

@@ -0,0 +1,53 @@
+import { keys } from "./query-keys.js";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createClient } from "@protobase/client";
+//#region src/data/api-provider.tsx
+const ApiContext = createContext(null);
+const useClient = () => {
+	const client = useContext(ApiContext);
+	if (!client) throw new Error("useClient must be used inside ApiProvider");
+	return client;
+};
+/**
+* Owns the query cache and the API client; refetches `/meta` whenever `X-Meta-Version` changes. The version is
+* compared only with the last one seen: it hashes the models and roles, while the `/meta` ETag hashes the whole
+* per-caller body, so the two never match.
+*/
+const ApiProvider = ({ baseUrl, client: given, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }) => {
+	const [queryClient] = useState(() => givenQueryClient ?? new QueryClient({ defaultOptions: { queries: {
+		staleTime: 3e4,
+		retry: false,
+		refetchOnWindowFocus: false
+	} } }));
+	const metaVersion = useRef(void 0);
+	const client = useMemo(() => given ?? createClient({
+		baseUrl,
+		fetch,
+		token,
+		onUnauthenticated,
+		onMetaVersion: (version) => {
+			const previous = metaVersion.current;
+			metaVersion.current = version;
+			if (previous === void 0 || previous === version) return;
+			queryClient.invalidateQueries({ queryKey: keys.meta }, { cancelRefetch: false });
+		}
+	}), [
+		given,
+		baseUrl,
+		fetch,
+		queryClient,
+		token,
+		onUnauthenticated
+	]);
+	return /* @__PURE__ */ jsx(QueryClientProvider, {
+		client: queryClient,
+		children: /* @__PURE__ */ jsx(ApiContext.Provider, {
+			value: client,
+			children
+		})
+	});
+};
+//#endregion
+export { ApiProvider, useClient };

package/dist/data/meta-data.d.ts

@@ -0,0 +1,14 @@
+import { ResourcePermissions } from "@protobase/client";
+import { ResourceModel, UserMenuModel, ViewModel } from "@protobase/schema";
+import { PageModel } from "@protobase/layout";
+//#region src/data/meta-data.d.ts
+export type MetaData = {
+  etag: string;
+  resources: Record<string, ResourceModel>;
+  views: Record<string, ViewModel>;
+  /** Composed pages by name. */
+  pages: Record<string, PageModel>;
+  permissions: Record<string, ResourcePermissions>;
+  userMenu?: UserMenuModel;
+};
+//#endregion

package/dist/data/meta-data.js

@@ -0,0 +1,9 @@
+//#region src/data/meta-data.ts
+const allowEverything = {
+	create: true,
+	update: true,
+	delete: true,
+	conditional: []
+};
+//#endregion
+export { allowEverything };

package/dist/data/query-keys.js

@@ -0,0 +1,95 @@
+//#region src/data/query-keys.ts
+const keys = {
+	meta: ["meta"],
+	list: (resource, filter, orderBy, pageSize, startToken) => [
+		"list",
+		resource,
+		filter,
+		orderBy,
+		pageSize,
+		startToken
+	],
+	page: (resource, filter, orderBy, pageSize, page) => [
+		"page",
+		resource,
+		filter,
+		orderBy,
+		pageSize,
+		page
+	],
+	/** A sidebar group's records; starts with `list`, so invalidating a resource's lists refreshes it too. */
+	navRecent: (resource, filter, orderBy, pageSize) => [
+		"list",
+		resource,
+		filter,
+		orderBy,
+		pageSize,
+		"nav-recent"
+	],
+	first: (resource, filter, orderBy) => [
+		"first-page",
+		resource,
+		filter,
+		orderBy
+	],
+	record: (resource, key) => [
+		"record",
+		resource,
+		key
+	],
+	facets: (resource, field, filter) => [
+		"facets",
+		resource,
+		field,
+		filter
+	],
+	series: (resource, field, range, granularity, filter) => [
+		"series",
+		resource,
+		field,
+		range,
+		granularity,
+		filter
+	],
+	histogram: (resource, field, buckets, filter) => [
+		"histogram",
+		resource,
+		field,
+		buckets,
+		filter
+	],
+	relatedLabel: (resource, id) => [
+		"related-label",
+		resource,
+		id
+	],
+	labels: (resource, ids) => [
+		"labels",
+		resource,
+		ids
+	],
+	count: (resource, filter) => [
+		"count",
+		resource,
+		filter
+	],
+	firstRecord: (resource, filter, orderBy) => [
+		"first-record",
+		resource,
+		filter,
+		orderBy
+	],
+	pathValue: (resource, key, path) => [
+		"path-value",
+		resource,
+		key,
+		path
+	],
+	labelMap: (resource, ids) => [
+		"label-map",
+		resource,
+		ids
+	]
+};
+//#endregion
+export { keys };

package/dist/data/use-aggregates.d.ts

@@ -0,0 +1,8 @@
+import { FilterInput, SeriesParams } from "@protobase/client";
+//#region src/data/use-aggregates.d.ts
+export declare const useFacets: (resource: string, field: string, filter?: FilterInput, enabled?: boolean) => import("@tanstack/react-query").UseQueryResult<import("@protobase/client").Facet[], Error>;
+export declare const useSeries: (resource: string, params: SeriesParams & {
+  filter?: FilterInput;
+}, enabled?: boolean) => import("@tanstack/react-query").UseQueryResult<import("@protobase/client").Series, Error>;
+export declare const useHistogram: (resource: string, field: string, filter?: FilterInput, buckets?: number, enabled?: boolean) => import("@tanstack/react-query").UseQueryResult<import("@protobase/client").Histogram, Error>;
+//#endregion

package/dist/data/use-aggregates.js

@@ -0,0 +1,43 @@
+import { keys } from "./query-keys.js";
+import { useClient } from "./api-provider.js";
+import { useQuery } from "@tanstack/react-query";
+import { filterText } from "@protobase/client";
+//#region src/data/use-aggregates.ts
+const useFacets = (resource, field, filter, enabled = true) => {
+	const client = useClient();
+	const text = filterText(filter) ?? "";
+	return useQuery({
+		queryKey: keys.facets(resource, field, text),
+		enabled,
+		queryFn: () => client.facets(resource, field, {
+			filter: text,
+			limit: 50
+		})
+	});
+};
+const useSeries = (resource, params, enabled = true) => {
+	const client = useClient();
+	const text = filterText(params.filter) ?? "";
+	return useQuery({
+		queryKey: keys.series(resource, params.field, `${params.range ?? ""}${params.from ?? ""}${params.to ?? ""}`, params.granularity ?? "", text),
+		enabled,
+		queryFn: () => client.series(resource, {
+			...params,
+			filter: text
+		})
+	});
+};
+const useHistogram = (resource, field, filter, buckets = 20, enabled = true) => {
+	const client = useClient();
+	const text = filterText(filter) ?? "";
+	return useQuery({
+		queryKey: keys.histogram(resource, field, buckets, text),
+		enabled,
+		queryFn: () => client.histogram(resource, field, {
+			filter: text,
+			buckets
+		})
+	});
+};
+//#endregion
+export { useFacets, useHistogram, useSeries };