@protobase/ui 0.14.4 → 0.14.5

package/dist/app/searches/saved-searches.js

@@ -0,0 +1,107 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { PageHeader } from "../../app-shell/page-header.js";
+import { recordKey, recordTitleField } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
+import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
+import { can } from "../permissions.js";
+import { useDeleteFlow } from "../delete/use-delete-flow.js";
+import { useSavedSearches } from "./use-saved-searches.js";
+import { SavedSearchSection } from "./saved-search-section.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/searches/saved-searches.tsx
+/**
+* The list page of a view with `searchesOf`: each of the user's saved searches, with what it finds (`SavedSearchSection`),
+* in the order of the view's list; until they have loaded, or when there are none, the page says so under its title.
+*/
+const SavedSearches = ({ model, view }) => {
+	const { resources, views } = useAdminMeta();
+	const of = view.searchesOf;
+	const target = resources[of.resource];
+	const targetView = views[of.resource];
+	const saved = useSavedSearches(model.name, true);
+	const permissions = usePermissions(model.name);
+	const remove = useDeleteFlow({
+		model,
+		view
+	});
+	const plural = view.names?.plural ?? humanize(model.name);
+	const titleField = recordTitleField(model, view);
+	const frame = (body) => /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
+		children: [
+			remove.dialogs,
+			/* @__PURE__ */ jsx(PageHeader, {
+				title: plural,
+				subtitle: view.help
+			}),
+			body
+		]
+	});
+	if (!target) return frame(/* @__PURE__ */ jsxs(Notice, {
+		title: "Not found",
+		children: [
+			"There is no resource called ",
+			of.resource,
+			"."
+		]
+	}));
+	if (saved.error) return frame(/* @__PURE__ */ jsx(ErrorBanner, {
+		title: `Could not load your ${plural.toLowerCase()}`,
+		error: saved.error
+	}));
+	if (!saved.data) return frame(/* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children: Array.from({ length: 2 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-56" }, index))
+	}));
+	if (saved.data.length === 0) {
+		const searched = (targetView?.names?.plural ?? humanize(target.name)).toLowerCase();
+		return frame(/* @__PURE__ */ jsxs("p", {
+			className: "py-8 text-center text-[13px] text-muted-foreground",
+			children: [
+				"No ",
+				plural.toLowerCase(),
+				" yet. Filter the",
+				" ",
+				/* @__PURE__ */ jsx(AppLink, {
+					to: {
+						kind: "list",
+						resource: target.name
+					},
+					className: "font-medium text-primary-text hover:underline",
+					children: searched
+				}),
+				" ",
+				"and save the search."
+			]
+		}));
+	}
+	return frame(/* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-4",
+		children: saved.data.map((row) => {
+			const key = encodeKey(recordKey(model, row));
+			const title = String(row[titleField] ?? key);
+			const onDelete = can(permissions, "delete") ? () => void remove.start({
+				key,
+				title,
+				etag: row.etag,
+				snapshot: row
+			}) : void 0;
+			return /* @__PURE__ */ jsx(SavedSearchSection, {
+				model,
+				view,
+				of,
+				target,
+				targetView,
+				row,
+				recordKey: key,
+				title,
+				onDelete
+			}, key);
+		})
+	}));
+};
+//#endregion
+export { SavedSearches };

package/dist/app/searches/search-controls.js

@@ -0,0 +1,64 @@
+import { useClient } from "../../data/api-provider.js";
+import { humanize } from "../../live/naming.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { Switch } from "../../primitives/switch.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { enumLabel } from "@protobase/schema";
+//#region src/app/searches/search-controls.tsx
+const message = (error) => error instanceof Error ? error.message : "Something went wrong";
+const Control = ({ model, view, name, value, onChange }) => {
+	const id = useId();
+	const field = model.fields[name];
+	const hints = view.fields[name];
+	const label = hints?.label ?? humanize(name);
+	if (field?.type === "boolean") return /* @__PURE__ */ jsx(Switch, {
+		checked: value === true,
+		onChange,
+		label
+	});
+	if (field?.type !== "enum") throw new Error(`Not implemented: "${name}" is ${field?.type ?? "unknown"}, and a saved search's controls are enums or booleans`);
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+		children: [label, /* @__PURE__ */ jsx("select", {
+			id,
+			value: String(value ?? ""),
+			onChange: (event) => onChange(event.target.value),
+			className: "h-8 rounded-md border border-border-strong bg-background px-2 text-[13px] text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
+			children: (field.enumValues ?? []).map((option) => /* @__PURE__ */ jsx("option", {
+				value: option,
+				children: enumLabel(option, hints?.valueLabels)
+			}, option))
+		})]
+	});
+};
+/** A saved search's controls, each saved as soon as it changes; a refused change says why and shows the search as stored. */
+const SearchControls = ({ model, view, recordKey, row, fields }) => {
+	const client = useClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const change = useMutation({
+		mutationFn: (patch) => client.update(model.name, recordKey, patch, row.etag ?? "*"),
+		onError: (error) => toast.show({
+			state: "error",
+			title: "Could not change the search",
+			description: message(error)
+		}),
+		onSettled: () => refresh(model.name)
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center gap-3",
+		children: fields.map((name) => /* @__PURE__ */ jsx(Control, {
+			model,
+			view,
+			name,
+			value: change.isPending && name in (change.variables ?? {}) ? change.variables[name] : row[name],
+			onChange: (value) => change.mutate({ [name]: value })
+		}, name))
+	});
+};
+//#endregion
+export { SearchControls };

package/dist/app/searches/use-filter-chips.js

@@ -0,0 +1,27 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { fetchLabels } from "../../live/relation-labels.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { chosenRelations, filterChips } from "./saved-search.js";
+import { useQueries, useQueryClient } from "@tanstack/react-query";
+//#region src/app/searches/use-filter-chips.ts
+/** A saved filter of `model`'s list as chips, with the records its relation facets choose named once they have loaded. */
+const useFilterChips = (model, text) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const { resources, views } = useAdminMeta();
+	const view = views[model.name];
+	const chosen = Object.entries(chosenRelations(model, view, text));
+	const named = useQueries({ queries: chosen.map(([field, ids]) => {
+		const target = resources[model.fields[field].relation.resource];
+		return {
+			queryKey: keys.labels(`chips:${model.name}.${field}`, ids.join(",")),
+			enabled: target !== void 0,
+			queryFn: async () => Object.fromEntries(await fetchLabels(queryClient, client, target, ids, views[target.name]))
+		};
+	}) });
+	const names = Object.fromEntries(chosen.flatMap(([field], index) => named[index]?.data ? [[field, named[index].data]] : []));
+	return filterChips(model, view, text, names);
+};
+//#endregion
+export { useFilterChips };

package/dist/app/searches/use-save-search.js

@@ -0,0 +1,70 @@
+import { useClient } from "../../data/api-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useAppAddress } from "../use-app-address.js";
+import { can } from "../permissions.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
+import { useSavedSearches } from "./use-saved-searches.js";
+import { useMutation } from "@tanstack/react-query";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/searches/use-save-search.ts
+const message = (error) => error instanceof Error ? error.message : "Something went wrong";
+/**
+* A list page's "Save search" button for its `filter`: `save` for someone who can list, create and delete the saved
+* searches, `sign-in` for a visitor their resource asks to sign in (`prompt`), nothing otherwise. A press saves the
+* filter as a search named `name`, or takes the saved one off again.
+*/
+const useSaveSearch = (search, filter, name) => {
+	const meta = useAdminMeta();
+	const client = useClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const { go } = useAppAddress();
+	const { resource } = search;
+	const model = meta.resources[resource];
+	const of = meta.views[resource]?.searchesOf;
+	const permissions = meta.permissions[resource];
+	const usable = model !== void 0 && of !== void 0 && permissions !== void 0 && can(permissions, "create") && can(permissions, "delete");
+	const prompt = meta.signIn?.[resource]?.signIn;
+	const saved = useSavedSearches(resource, usable);
+	const current = of && saved.data?.find((row) => row[of.filter] === filter);
+	const plural = meta.views[resource]?.names?.plural ?? "saved searches";
+	const toggle = useMutation({
+		mutationFn: async (existing) => {
+			if (existing) await client.remove(resource, encodeKey(recordKey(model, existing)));
+			else await client.create(resource, {
+				[of.filter]: filter,
+				...of.name && { [of.name]: name }
+			});
+		},
+		onSuccess: (_, existing) => {
+			if (!existing) toast.show({
+				state: "success",
+				title: "Search saved",
+				action: {
+					label: `Open ${plural.toLowerCase()}`,
+					onClick: () => go({
+						kind: "list",
+						resource
+					})
+				}
+			});
+		},
+		onError: (error, existing) => toast.show({
+			state: "error",
+			title: existing ? "Could not take the search off" : "Could not save the search",
+			description: message(error)
+		}),
+		onSettled: () => refresh(resource)
+	});
+	return {
+		mode: usable ? "save" : prompt ? "sign-in" : void 0,
+		prompt,
+		saved: current !== void 0,
+		ready: saved.data !== void 0 && !toggle.isPending,
+		toggle: () => toggle.mutate(current)
+	};
+};
+//#endregion
+export { useSaveSearch };

package/dist/app/searches/use-saved-searches.js

@@ -0,0 +1,37 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { defaultOrderBy } from "../list-order.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useQuery } from "@tanstack/react-query";
+//#region src/app/searches/use-saved-searches.ts
+/** Where the user's saved searches of `resource` are cached; a list key, so a write to the resource refreshes it. */
+const savedSearchesKey = (resource) => keys.list(resource, "", "", 500, "saved-searches");
+/**
+* The signed-in user's saved searches, in the order of their view's list: every one, page by page, as the API lists only
+* a user's own records of a resource with an owner. Loads only while `enabled`.
+*/
+const useSavedSearches = (resource, enabled) => {
+	const client = useClient();
+	const { resources, views } = useAdminMeta();
+	const model = resources[resource];
+	return useQuery({
+		queryKey: savedSearchesKey(resource),
+		enabled: enabled && model !== void 0,
+		queryFn: async () => {
+			const rows = [];
+			let pageToken;
+			do {
+				const page = await client.list(resource, {
+					pageSize: 500,
+					orderBy: defaultOrderBy(model, views[resource]),
+					...pageToken && { pageToken }
+				});
+				rows.push(...page.items);
+				pageToken = page.nextPageToken || void 0;
+			} while (pageToken);
+			return rows;
+		}
+	});
+};
+//#endregion
+export { savedSearchesKey, useSavedSearches };

package/dist/app-shell/app-shell.js

@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
-const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, onSignIn, organizations, roles, search, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, onSignIn, organizations, roles, theme, search, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
@@ -34,7 +34,8 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		onSignOut,
 		onSignIn,
 		organizations,
-		roles
+		roles,
+		theme
 	});
 	return /* @__PURE__ */ jsx(PageScrollContext.Provider, {
 		value: setPageScroll,

package/dist/app-shell/drawer.js

@@ -10,7 +10,7 @@ const Drawer = ({ id, open, onClose, children }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "fixed inset-0 z-50 md:hidden",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "absolute inset-0 bg-foreground/40",
+			className: "absolute inset-0 bg-backdrop/40",
 			onClick: onClose,
 			"aria-hidden": true
 		}), /* @__PURE__ */ jsx("div", {

package/dist/app-shell/logo.js

@@ -15,14 +15,14 @@ const LogoMark = ({ className }) => /* @__PURE__ */ jsxs("svg", {
 		/* @__PURE__ */ jsx("path", {
 			d: "M7 17V7h5.2a3 3 0 0 1 0 6H7",
 			fill: "none",
-			stroke: "white",
+			className: "stroke-primary-foreground",
 			strokeWidth: "2",
 			strokeLinecap: "round",
 			strokeLinejoin: "round"
 		}),
 		/* @__PURE__ */ jsx("path", {
 			d: "M12.5 17h4.5",
-			stroke: "white",
+			className: "stroke-primary-foreground",
 			strokeOpacity: "0.55",
 			strokeWidth: "2",
 			strokeLinecap: "round"

package/dist/app-shell/profile-menu.js

@@ -2,13 +2,14 @@ import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { SwitchGroup } from "./switch-group.js";
+import { ThemeSwitch } from "./theme-switch.js";
 import { useEffect, useRef, useState } from "react";
 import { ChevronsUpDown, LogOut } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/profile-menu.tsx
 const menuRow = "flex min-h-11 w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] text-muted-foreground hover:bg-muted md:min-h-0";
 /** The person at the bottom of the sidebar; the menu is fixed to the viewport so a narrow sidebar cannot clip it. */
-const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate, onSignOut, organizations, roles }) => {
+const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate, onSignOut, organizations, roles, theme }) => {
 	const activeRole = roles?.roles.find((role) => role.name === roles.active);
 	const [local, setLocal] = useState(false);
 	const open = controlled ?? local;
@@ -112,7 +113,7 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate,
 					}
 				}),
 				items.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: cn(onSignOut && "border-b"),
+					className: cn((theme || onSignOut) && "border-b"),
 					children: items.map((item) => {
 						const Icon = item.icon;
 						return /* @__PURE__ */ jsxs("a", {
@@ -134,6 +135,13 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate,
 						}, item.id);
 					})
 				}),
+				theme && /* @__PURE__ */ jsx("div", {
+					className: cn(onSignOut && "border-b"),
+					children: /* @__PURE__ */ jsx(ThemeSwitch, {
+						theme,
+						className: cn(menuRow, "hover:bg-transparent")
+					})
+				}),
 				onSignOut && /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					role: "menuitem",

package/dist/app-shell/sidebar.js

@@ -8,7 +8,7 @@ import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, onSignIn, organizations, roles, sticky }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, onSignIn, organizations, roles, theme, sticky }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -56,7 +56,8 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 						onNavigate,
 						onSignOut,
 						organizations,
-						roles
+						roles,
+						theme
 					}) : onSignIn && /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: onSignIn,

package/dist/app-shell/theme-switch.js

@@ -0,0 +1,41 @@
+import { Segmented } from "../primitives/segmented.js";
+import { Monitor, Moon, Sun, SunMoon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/theme-switch.tsx
+const options = [
+	{
+		value: "light",
+		label: "Light",
+		icon: Sun
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		icon: Moon
+	},
+	{
+		value: "system",
+		label: "System",
+		icon: Monitor
+	}
+];
+/** The profile menu's row that picks light, dark or the system's theme; the menu stays open to show the result. */
+const ThemeSwitch = ({ theme, className }) => /* @__PURE__ */ jsxs("div", {
+	className,
+	children: [
+		/* @__PURE__ */ jsx(SunMoon, { className: "size-4" }),
+		/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children: "Theme"
+		}),
+		/* @__PURE__ */ jsx(Segmented, {
+			label: "Theme",
+			iconOnly: true,
+			value: theme.preference,
+			options,
+			onChange: theme.onChange
+		})
+	]
+});
+//#endregion
+export { ThemeSwitch };

package/dist/auth/auth-gate.js

@@ -69,15 +69,6 @@ const AuthGate = ({ workspace, children }) => {
 	useEffect(() => {
 		if (state.kind === "signed-out" && page.kind === "sign-in" && page.providerError) forgetSignInLink();
 	}, [state.kind, page]);
-	useEffect(() => {
-		if (state.kind !== "signed-out" || !browse) return;
-		const leave = () => {
-			setPage({ kind: "sign-in" });
-			browse();
-		};
-		window.addEventListener("popstate", leave);
-		return () => window.removeEventListener("popstate", leave);
-	}, [state.kind, browse]);
 	const signInFailed = useCallback((error) => setPage({
 		kind: "sign-in",
 		error

package/dist/data-grid/data-grid.js

@@ -203,7 +203,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 				children: [header, body]
 			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [header, body] }), horizontal.more && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": true,
-				className: "pointer-events-none absolute inset-y-0 right-0 z-20 w-8 bg-gradient-to-l from-foreground/15 to-transparent"
+				className: "pointer-events-none absolute inset-y-0 right-0 z-20 w-8 bg-gradient-to-l from-backdrop/15 to-transparent"
 			})]
 		}), !fit && /* @__PURE__ */ jsx(GridFooter, {
 			total,

package/dist/live/use-filter-config.js

@@ -1,4 +1,3 @@
-import { formatMoney } from "../format/money.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { labelFieldOf } from "./model-helpers.js";
@@ -8,7 +7,7 @@ import { setRange } from "../filter-panel/filter-state.js";
 import { stateToText } from "./filter-string.js";
 import { labelKeys, matchOptions } from "./reference-options.js";
 import { useReferenceSearch } from "./use-reference-search.js";
-import { rangeHistogram, widgetFields } from "./view-fields.js";
+import { rangeFormat, rangeHistogram, widgetFields } from "./view-fields.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/use-filter-config.ts
@@ -107,9 +106,6 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 	const rangeConfig = (range, index) => {
 		const data = histogramQueries[index]?.data;
 		if (!data || data.min === null || data.max === null) return [];
-		const hints = view?.fields[range.id];
-		const prefix = hints?.prefix;
-		const suffix = hints?.suffix ?? "";
 		return [{
 			...range,
 			label: label(range.id),
@@ -117,7 +113,7 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 			max: Math.ceil(data.max),
 			step: Math.max(1, Math.round((data.max - data.min) / 100)),
 			histogram: rangeHistogram(view, range.id) ? data.buckets.map((bucket) => bucket.count) : [],
-			format: (value) => `${prefix === "€" ? formatMoney(value * 100).replace(".00", "") : String(value)}${suffix}`
+			format: rangeFormat(view, range.id)
 		}];
 	};
 	return {

package/dist/live/view-fields.js

@@ -1,3 +1,4 @@
+import { formatMoney } from "../format/money.js";
 //#region src/live/view-fields.ts
 const numberTypes = [
 	"integer",
@@ -61,5 +62,11 @@ const widgetFields = (view, model) => {
 };
 /** Whether a range draws its histogram: only a `range` widget that asks for one. */
 const rangeHistogram = (view, field) => (view?.filters ?? []).some((widget) => widget.kind === "range" && widget.field === field && widget.histogram);
+/** How a range's values read, by the view's prefix and suffix: "€450,000" for a euro amount, "85 m²". */
+const rangeFormat = (view, field) => {
+	const hints = view?.fields[field];
+	const suffix = hints?.suffix ?? "";
+	return (value) => `${hints?.prefix === "€" ? formatMoney(value * 100).replace(".00", "") : String(value)}${suffix}`;
+};
 //#endregion
-export { rangeHistogram, widgetFields };
+export { rangeFormat, rangeHistogram, widgetFields };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.14.4";
+var version = "0.14.5";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/dialog.js

@@ -7,7 +7,7 @@ const Dialog = ({ title, description, onClose, actions, children }) => {
 	const panel = useRef(null);
 	useFocusTrap(panel, true, onClose);
 	return /* @__PURE__ */ jsx("div", {
-		className: "fixed inset-0 z-[90] flex items-center justify-center bg-foreground/30 p-4",
+		className: "fixed inset-0 z-[90] flex items-center justify-center bg-backdrop/30 p-4",
 		onMouseDown: (event) => event.target === event.currentTarget && onClose(),
 		children: /* @__PURE__ */ jsxs("div", {
 			ref: panel,

package/dist/primitives/responsive-dialog.d.ts

@@ -11,8 +11,7 @@ export type ResponsiveDialogProps = {
 };
 /**
  * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
- * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open; the sheet also
- * closes when swiped down.
+ * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
  */
 export declare const ResponsiveDialog: ({ title, description, open, onClose, actions, children }: ResponsiveDialogProps) => import("react").JSX.Element | null;
 //#endregion

package/dist/primitives/responsive-dialog.js

@@ -5,23 +5,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/responsive-dialog.tsx
 /**
 * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
-* the viewport does. Both close on Escape and on a press outside, and keep focus inside while open; the sheet also
-* closes when swiped down.
+* the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
 */
 const ResponsiveDialog = ({ title, description, open, onClose, actions, children }) => {
-	if (useIsDesktop()) {
-		if (!open) return null;
-		return /* @__PURE__ */ jsx(Dialog, {
-			title,
-			description,
-			onClose,
-			actions,
-			children
-		});
-	}
+	const desktop = useIsDesktop();
+	if (!open) return null;
+	if (desktop) return /* @__PURE__ */ jsx(Dialog, {
+		title,
+		description,
+		onClose,
+		actions,
+		children
+	});
 	return /* @__PURE__ */ jsx(Sheet, {
 		title,
-		open,
+		open: true,
 		onClose,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "pt-3 text-[13px]",

package/dist/primitives/segmented.js

@@ -11,16 +11,20 @@ const sizes = {
 		option: "px-3 text-[13px]"
 	}
 };
-const Segmented = ({ value, options, onChange, label, size = "sm" }) => /* @__PURE__ */ jsx("span", {
+const Segmented = ({ value, options, onChange, label, size = "sm", iconOnly = false }) => /* @__PURE__ */ jsx("span", {
 	role: "group",
 	"aria-label": label,
 	className: cn("inline-flex", sizes[size].group, "rounded-md bg-muted p-0.5"),
 	children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"aria-pressed": option.value === value,
+		...iconOnly && {
+			"aria-label": option.label,
+			title: option.label
+		},
 		onClick: () => onChange(option.value),
 		className: cn("inline-flex items-center gap-1.5 rounded", sizes[size].option, "font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
-		children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-3.5" }), option.label]
+		children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-3.5" }), !iconOnly && option.label]
 	}, option.value))
 });
 //#endregion