@protobase/ui 0.19.4 → 0.19.6

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

@@ -78,7 +78,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 				},
 				children: [
 					/* @__PURE__ */ jsxs("label", {
-						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						className: "flex flex-col gap-1.5 font-medium",
 						children: ["Email", /* @__PURE__ */ jsx(Input, {
 							ref: emailInput,
 							type: "email",
@@ -93,7 +93,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						})]
 					}),
 					withPassword && /* @__PURE__ */ jsxs("label", {
-						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						className: "flex flex-col gap-1.5 font-medium",
 						children: ["Password", /* @__PURE__ */ jsx(Input, {
 							type: "password",
 							name: "password",
@@ -128,13 +128,13 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 					}),
 					withPassword && forgotPassword && /* @__PURE__ */ jsx(RouteLink, {
 						to: forgotPassword,
-						className: "self-center text-[13px] font-medium text-primary-text hover:underline",
+						className: "self-center font-medium text-primary-text hover:underline",
 						children: "Forgot password?"
 					})
 				]
 			}),
 			signUp && /* @__PURE__ */ jsxs("p", {
-				className: "mt-4 text-center text-[13px] text-muted-foreground",
+				className: "mt-4 text-center text-muted-foreground",
 				children: [
 					"New here?",
 					" ",
@@ -148,7 +148,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 			onBrowse && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: onBrowse,
-				className: "mt-4 w-full text-center text-[13px] font-medium text-muted-foreground hover:text-foreground hover:underline",
+				className: "mt-4 w-full text-center font-medium text-muted-foreground hover:text-foreground hover:underline",
 				children: "Continue without signing in"
 			})
 		]

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

@@ -2,14 +2,14 @@ import { RouteLink } from "../primitives/route-link.js";
 import { useAuth } from "./auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { useSignInAddress } from "./use-sign-in-address.js";
-import { namedIcon } from "../app/named-icon.js";
 import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
+import { namedIcon } from "../app/named-icon.js";
 import { useId } from "react";
 import { Check, LogIn } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/sign-in-prompt.tsx
 const Benefits = ({ benefits }) => benefits && benefits.length > 0 ? /* @__PURE__ */ jsx("ul", {
-	className: "flex flex-col gap-2 text-left text-[13px]",
+	className: "flex flex-col gap-2 text-left",
 	children: benefits.map((benefit) => /* @__PURE__ */ jsxs("li", {
 		className: "flex items-start gap-2",
 		children: [/* @__PURE__ */ jsx(Check, {
@@ -78,7 +78,7 @@ const SignInPrompt = (props) => {
 					className: "text-lg font-semibold",
 					children: prompt.title
 				}), /* @__PURE__ */ jsx("p", {
-					className: "text-[13px] text-muted-foreground",
+					className: "text-muted-foreground",
 					children: prompt.description
 				})]
 			}),

package/dist/auth/sign-up-details-form.js

@@ -15,7 +15,7 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 		title: "Your details",
 		description: "One last step to create your account.",
 		children: [/* @__PURE__ */ jsxs("p", {
-			className: "mb-4 text-[13px] text-muted-foreground",
+			className: "mb-4 text-muted-foreground",
 			children: [
 				"The code was right: the account is for ",
 				/* @__PURE__ */ jsx("span", {
@@ -35,7 +35,7 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 			},
 			children: [
 				/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					className: "flex flex-col gap-1.5 font-medium",
 					children: ["Your name", /* @__PURE__ */ jsx(Input, {
 						name: "name",
 						autoComplete: "name",
@@ -50,7 +50,7 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 				withPassword && /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-1.5",
 					children: [/* @__PURE__ */ jsxs("label", {
-						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						className: "flex flex-col gap-1.5 font-medium",
 						children: [passwordOptional ? "Password (optional)" : "Password", /* @__PURE__ */ jsx(Input, {
 							type: "password",
 							name: "password",

package/dist/auth/sign-up-email-form.js

@@ -19,7 +19,7 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 			},
 			children: [
 				/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					className: "flex flex-col gap-1.5 font-medium",
 					children: ["Email", /* @__PURE__ */ jsx(Input, {
 						type: "email",
 						name: "email",
@@ -33,7 +33,7 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 					})]
 				}),
 				/* @__PURE__ */ jsx("p", {
-					className: "text-[13px] text-muted-foreground",
+					className: "text-muted-foreground",
 					children: "We email you a code to make sure the address is yours."
 				}),
 				error && /* @__PURE__ */ jsx("p", {
@@ -49,7 +49,7 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 					children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), "Email me a code"]
 				}),
 				/* @__PURE__ */ jsxs("p", {
-					className: "text-center text-[13px] text-muted-foreground",
+					className: "text-center text-muted-foreground",
 					children: [
 						"Have an account?",
 						" ",
@@ -65,7 +65,7 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 		}), onBrowse && /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: onBrowse,
-			className: "mt-4 w-full text-center text-[13px] font-medium text-muted-foreground hover:text-foreground hover:underline",
+			className: "mt-4 w-full text-center font-medium text-muted-foreground hover:text-foreground hover:underline",
 			children: "Continue without an account"
 		})]
 	});

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

@@ -35,7 +35,7 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 			},
 			children: [
 				/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					className: "flex flex-col gap-1.5 font-medium",
 					children: ["Their email", /* @__PURE__ */ jsx(Input, {
 						type: "email",
 						name: "email",
@@ -47,7 +47,7 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 					})]
 				}),
 				/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					className: "flex flex-col gap-1.5 font-medium",
 					children: ["Reason", /* @__PURE__ */ jsx("textarea", {
 						name: "reason",
 						required: true,
@@ -56,7 +56,7 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 						value: reason,
 						placeholder: "Ticket 4211: the invoice totals look wrong",
 						onChange: (event) => setReason(event.target.value),
-						className: cn("resize-y rounded-md border bg-background px-2.5 py-1.5 text-[13px] font-normal shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", error ? "border-danger" : "border-border-strong")
+						className: cn("resize-y rounded-md border bg-background px-2.5 py-1.5 font-normal shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", error ? "border-danger" : "border-border-strong")
 					})]
 				}),
 				/* @__PURE__ */ jsxs("p", {

package/dist/auth/two-factor-form.js

@@ -29,7 +29,7 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 			className: "flex flex-col gap-4",
 			children: [
 				/* @__PURE__ */ jsx("p", {
-					className: "text-[13px] text-muted-foreground",
+					className: "text-muted-foreground",
 					children: "We email you a code to finish signing in."
 				}),
 				error && /* @__PURE__ */ jsx("p", {
@@ -57,11 +57,11 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 			},
 			children: [
 				/* @__PURE__ */ jsx("p", {
-					className: "text-[13px] text-muted-foreground",
+					className: "text-muted-foreground",
 					children: instructions[step]
 				}),
 				/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					className: "flex flex-col gap-1.5 font-medium",
 					children: [step === "backup" ? "Backup code" : "Code", step === "backup" ? /* @__PURE__ */ jsx(Input, {
 						name: "code",
 						autoComplete: "off",
@@ -82,7 +82,7 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 					})]
 				}),
 				/* @__PURE__ */ jsxs("label", {
-					className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+					className: "flex items-center gap-2 text-muted-foreground",
 					children: [/* @__PURE__ */ jsx(Checkbox, {
 						checked: trustDevice,
 						onChange: setTrustDevice,
@@ -103,7 +103,7 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-4 flex flex-col items-center gap-2 border-t pt-4 text-[13px]",
+			className: "mt-4 flex flex-col items-center gap-2 border-t pt-4",
 			children: [
 				step !== "totp" && methods.includes("totp") && /* @__PURE__ */ jsx("button", {
 					type: "button",

package/dist/chat/chat-message.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 /** One message of a chat: the user's as a bubble on the right, the other side's as plain content, cards included. */
 const ChatMessage = ({ from, children }) => /* @__PURE__ */ jsx("div", {
 	"data-from": from,
-	className: cn("flex min-w-0 flex-col gap-2 whitespace-pre-wrap break-words text-[13px]", from === "user" ? "ml-8 self-end rounded-lg rounded-br-sm bg-primary px-3 py-2 text-primary-foreground shadow-sm" : "mr-4 text-foreground"),
+	className: cn("flex min-w-0 flex-col gap-2 whitespace-pre-wrap break-words", from === "user" ? "ml-8 self-end rounded-lg rounded-br-sm bg-primary px-3 py-2 text-primary-foreground shadow-sm" : "mr-4 text-foreground"),
 	children
 });
 //#endregion

package/dist/chat/chat-thread.js

@@ -14,7 +14,7 @@ const ChatThread = ({ children, empty, length }) => {
 		"aria-live": "polite",
 		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4",
 		children: length === 0 && empty ? /* @__PURE__ */ jsx("div", {
-			className: "m-auto max-w-60 text-center text-[13px] text-muted-foreground",
+			className: "m-auto max-w-60 text-center text-muted-foreground",
 			children: empty
 		}) : children
 	});

package/dist/data/api-provider.js

@@ -1,5 +1,5 @@
 import { keys } from "./query-keys.js";
-import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { createClient } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -21,6 +21,12 @@ const useResourceClient = (resource) => {
 	const own = useClient();
 	return useContext(ResourceClientContext)?.(resource) ?? own;
 };
+/** `useResourceClient` for any resource: the client of the API that serves each, for code that reaches several. */
+const useResourceClients = () => {
+	const own = useClient();
+	const resourceClient = useContext(ResourceClientContext);
+	return useCallback((resource) => resourceClient?.(resource) ?? own, [own, resourceClient]);
+};
 /** The client of a source's API, one per URL, with the signed-in user's token; for `MetaGate`. */
 const useSourceClients = () => {
 	const clientOf = useContext(SourceClientsContext);
@@ -104,4 +110,4 @@ const ApiProvider = ({ baseUrl, client: given, sources, fetch, queryClient: give
 	});
 };
 //#endregion
-export { ApiProvider, ClientProvider, useClient, useResourceClient, useSourceClients };
+export { ApiProvider, ClientProvider, useClient, useResourceClient, useResourceClients, useSourceClients };

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

@@ -33,7 +33,7 @@ const Gutter = ({ width, index, selectable, selected, onToggle, edge }) => /* @_
 const DataRow = ({ cells, selected, onToggle, onOpen, menu, ...frame }) => /* @__PURE__ */ jsxs("div", {
 	role: "row",
 	onClick: onOpen,
-	className: cn("absolute inset-x-0 top-0 grid items-center border-b text-[13px]", selected ? "bg-primary-soft" : "bg-background hover:bg-surface", onOpen && "cursor-pointer"),
+	className: cn("absolute inset-x-0 top-0 grid items-center border-b", selected ? "bg-primary-soft" : "bg-background hover:bg-surface", onOpen && "cursor-pointer"),
 	style: frameStyle(frame),
 	children: [
 		/* @__PURE__ */ jsx(Gutter, {

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

@@ -31,7 +31,7 @@ const HeaderMenu = ({ header, pinned, onTogglePin }) => {
 			children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" })
 		}), open && /* @__PURE__ */ jsx("ul", {
 			role: "menu",
-			className: "absolute right-0 top-full z-30 mt-1 min-w-32 rounded-md border bg-background py-1 text-[13px] font-normal text-foreground shadow-pop",
+			className: "absolute right-0 top-full z-30 mt-1 min-w-32 rounded-md border bg-background py-1 text-body font-normal text-foreground shadow-pop",
 			children: /* @__PURE__ */ jsx("li", {
 				role: "none",
 				children: /* @__PURE__ */ jsx("button", {

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

@@ -67,7 +67,7 @@ const RowMenu = ({ row, actions }) => {
 			role: "menu",
 			onClick: (event) => event.stopPropagation(),
 			style: place ?? { visibility: "hidden" },
-			className: "fixed z-50 min-w-36 rounded-md border bg-background py-1 text-[13px] shadow-pop",
+			className: "fixed z-50 min-w-36 rounded-md border bg-background py-1 shadow-pop",
 			children: actions.map((action) => /* @__PURE__ */ jsx("li", {
 				role: "none",
 				children: /* @__PURE__ */ jsx("button", {

package/dist/filter-panel/facet-combobox.js

@@ -74,7 +74,7 @@ const FacetCombobox = ({ config, selected, onToggle, inline = false }) => {
 					"aria-autocomplete": "list",
 					"aria-activedescendant": options[active] ? `${id}-${active}` : void 0,
 					placeholder: selected.length > 0 ? "" : `Search ${config.label.toLowerCase()}`,
-					className: "h-6 min-w-16 flex-1 bg-transparent text-[13px] text-foreground outline-none placeholder:text-faint-foreground",
+					className: "h-6 min-w-16 flex-1 bg-transparent text-foreground outline-none placeholder:text-faint-foreground",
 					value: query,
 					onChange: (event) => search(event.target.value),
 					onKeyDown,

package/dist/filter-panel/filter-menu.js

@@ -26,7 +26,7 @@ const FilterMenu = ({ label, activeCount, width = 240, defaultOpen = false, chil
 			type: "button",
 			"aria-expanded": open,
 			onClick: () => setOpen(!open),
-			className: cn("inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-2.5 text-[13px] font-medium shadow-sm transition-colors hover:bg-muted", activeCount > 0 ? "border-primary-border text-primary-text" : "border-border-strong text-foreground"),
+			className: cn("inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-2.5 font-medium shadow-sm transition-colors hover:bg-muted", activeCount > 0 ? "border-primary-border text-primary-text" : "border-border-strong text-foreground"),
 			children: [
 				label,
 				activeCount > 0 && /* @__PURE__ */ jsx("span", {

package/dist/filter-panel/filter-panel.js

@@ -60,7 +60,7 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 			/* @__PURE__ */ jsx("div", {
 				className: "flex items-center justify-between pb-1",
 				children: /* @__PURE__ */ jsx("h2", {
-					className: "text-[13px] font-semibold",
+					className: "font-semibold",
 					children: "Filters"
 				})
 			}),
@@ -105,7 +105,7 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 		...dateView ? [/* @__PURE__ */ jsx(Fragment, { children: dateView }, "date")] : []
 	];
 	const toggles = (config.toggles ?? []).map((toggle) => /* @__PURE__ */ jsx("div", {
-		className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+		className: "flex items-center gap-2 text-muted-foreground",
 		children: /* @__PURE__ */ jsx(ToggleRow, {
 			label: toggle.label,
 			checked: state.toggles.includes(toggle.id),

package/dist/inline-child-table/line-menu.js

@@ -32,7 +32,7 @@ const LineMenu = ({ items, label }) => {
 			children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
 		}), open && /* @__PURE__ */ jsx("ul", {
 			role: "menu",
-			className: "absolute right-0 top-full z-30 mt-1 min-w-36 rounded-md border bg-background py-1 text-[13px] shadow-pop",
+			className: "absolute right-0 top-full z-30 mt-1 min-w-36 rounded-md border bg-background py-1 shadow-pop",
 			children: items.map((item) => /* @__PURE__ */ jsx("li", {
 				role: "none",
 				children: /* @__PURE__ */ jsx("button", {

package/dist/inline-child-table/line-row.js

@@ -49,7 +49,7 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 			/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0",
 				children: [/* @__PURE__ */ jsx("p", {
-					className: "truncate text-[13px] text-foreground",
+					className: "truncate text-foreground",
 					children: line.description
 				}), /* @__PURE__ */ jsx("p", {
 					className: "font-mono text-[11px] text-faint-foreground",
@@ -63,7 +63,7 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 				parse: (text) => Math.round(Number(text)),
 				onCommit: (quantity) => onChange({ quantity })
 			}) : /* @__PURE__ */ jsx("span", {
-				className: "px-2 text-right text-[13px] tabular-nums",
+				className: "px-2 text-right tabular-nums",
 				children: line.quantity
 			}),
 			editable ? /* @__PURE__ */ jsx(NumberCell, {
@@ -73,11 +73,11 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 				parse: parseEuros,
 				onCommit: (unitPriceCents) => onChange({ unitPriceCents })
 			}) : /* @__PURE__ */ jsx("span", {
-				className: "px-2 text-right text-[13px] tabular-nums",
+				className: "px-2 text-right tabular-nums",
 				children: (line.unitPriceCents / 100).toFixed(2)
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "px-2 text-right text-[13px] font-medium tabular-nums text-foreground",
+				className: "px-2 text-right font-medium tabular-nums text-foreground",
 				children: formatMoney(lineTotalCents(line))
 			}),
 			menu.length > 0 ? /* @__PURE__ */ jsx(LineMenu, {

package/dist/inline-child-table/number-cell.js

@@ -18,7 +18,7 @@ const NumberCell = ({ value, onCommit, format, parse, label, width = "w-full" })
 		onChange: (event) => setDraft(event.target.value),
 		onBlur: commit,
 		onKeyDown: (event) => event.key === "Enter" && event.currentTarget.blur(),
-		className: cn("h-7 rounded-md border border-transparent bg-transparent px-2 text-right text-[13px] tabular-nums text-foreground outline-none hover:border-border-strong focus:border-primary focus:bg-background focus:ring-2 focus:ring-primary/20", width)
+		className: cn("h-7 rounded-md border border-transparent bg-transparent px-2 text-right tabular-nums text-foreground outline-none hover:border-border-strong focus:border-primary focus:bg-background focus:ring-2 focus:ring-primary/20", width)
 	});
 };
 //#endregion

package/dist/inline-child-table/totals-footer.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const TotalsFooter = ({ lines, vatRate }) => {
 	const totals = invoiceTotals(lines, vatRate);
 	return /* @__PURE__ */ jsxs("dl", {
-		className: "ml-auto grid w-64 grid-cols-[1fr_auto] gap-x-6 gap-y-1 px-2 pt-3 text-[13px] tabular-nums",
+		className: "ml-auto grid w-64 grid-cols-[1fr_auto] gap-x-6 gap-y-1 px-2 pt-3 tabular-nums",
 		children: [
 			/* @__PURE__ */ jsx("dt", {
 				className: "text-muted-foreground",
@@ -32,7 +32,7 @@ const TotalsFooter = ({ lines, vatRate }) => {
 				children: "Total"
 			}),
 			/* @__PURE__ */ jsx("dd", {
-				className: "mt-1 border-t border-border pt-2 text-right text-[15px] font-semibold text-foreground",
+				className: "mt-1 border-t border-border pt-2 text-right text-[16px] font-semibold text-foreground",
 				children: formatMoney(totals.totalCents)
 			})
 		]

package/dist/lib/save-file.js

@@ -0,0 +1,12 @@
+//#region src/lib/save-file.ts
+/** Hands the browser a file to save under `name`, made from `text`. */
+const saveFile = (text, name, type = "text/plain") => {
+	const url = URL.createObjectURL(new Blob([text], { type }));
+	Object.assign(document.createElement("a"), {
+		href: url,
+		download: name
+	}).click();
+	URL.revokeObjectURL(url);
+};
+//#endregion
+export { saveFile };

package/dist/lib/use-focus-trap.js

@@ -2,9 +2,11 @@ import { lockPageScroll } from "./page-scroll-lock.js";
 import { useEffect, useRef } from "react";
 //#region src/lib/use-focus-trap.ts
 const focusable = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+const stack = [];
 /**
 * While `active`: moves focus into `container`, keeps Tab inside it, locks page scrolling (see `lockPageScroll`),
-* calls `onEscape` on Escape, and returns focus to the previously focused element afterwards.
+* calls `onEscape` on Escape, and returns focus to the previously focused element afterwards. A trap opened while
+* another is active takes Tab and Escape until it ends.
 */
 const useFocusTrap = (container, active, onEscape) => {
 	const escape = useRef(onEscape);
@@ -14,9 +16,12 @@ const useFocusTrap = (container, active, onEscape) => {
 		const root = container.current;
 		const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		const unlock = lockPageScroll();
+		const token = {};
+		stack.push(token);
 		const items = () => [...root.querySelectorAll(focusable)];
 		(items()[0] ?? root).focus();
 		const onKey = (event) => {
+			if (stack.at(-1) !== token) return;
 			if (event.key === "Escape") return escape.current();
 			if (event.key !== "Tab") return;
 			const list = items();
@@ -37,6 +42,7 @@ const useFocusTrap = (container, active, onEscape) => {
 		document.addEventListener("keydown", onKey);
 		return () => {
 			document.removeEventListener("keydown", onKey);
+			stack.splice(stack.indexOf(token), 1);
 			unlock();
 			previous?.focus();
 		};

package/dist/organizations/app-roles-picker.js

@@ -10,7 +10,7 @@ const AppRolesPicker = ({ roles, selected, grantable, disabled, onChange }) => /
 		const locked = disabled || !grantable.has(role.name);
 		return /* @__PURE__ */ jsxs("label", {
 			title: locked && !disabled ? "You cannot give or take away this role" : void 0,
-			className: cn("inline-flex items-center gap-1.5 text-[13px]", locked && "text-muted-foreground"),
+			className: cn("inline-flex items-center gap-1.5", locked && "text-muted-foreground"),
 			children: [/* @__PURE__ */ jsx(Checkbox, {
 				checked: held,
 				label: role.label,

package/dist/organizations/invitation-page.js

@@ -35,7 +35,7 @@ const SignUp = ({ token, preview, onDone }) => {
 		},
 		children: [
 			/* @__PURE__ */ jsxs("p", {
-				className: "text-[13px] text-muted-foreground",
+				className: "text-muted-foreground",
 				children: [
 					"Make your account for ",
 					preview.email,
@@ -96,7 +96,7 @@ const InvitationPage = ({ token, onDone, signIn }) => {
 	if (!preview) return /* @__PURE__ */ jsx(AuthLayout, {
 		title: "Invitation",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-center gap-2 text-[13px] text-muted-foreground",
+			className: "flex items-center justify-center gap-2 text-muted-foreground",
 			children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
 		})
 	});
@@ -107,7 +107,7 @@ const InvitationPage = ({ token, onDone, signIn }) => {
 		title: `Join ${preview.organization.name}`,
 		description,
 		children: [/* @__PURE__ */ jsxs("p", {
-			className: "mb-3 text-[13px] text-muted-foreground",
+			className: "mb-3 text-muted-foreground",
 			children: [
 				"This invitation is for ",
 				preview.email,

package/dist/organizations/invitations-page.js

@@ -62,7 +62,7 @@ const InviteForm = ({ current, onSent }) => {
 							"aria-label": "Organization role",
 							value: role,
 							onChange: (event) => setRole(event.target.value),
-							className: "h-8 rounded-md border border-border-strong bg-background px-2 text-[13px]",
+							className: "h-8 rounded-md border border-border-strong bg-background px-2",
 							children: assignableOrganizationRoles(current).map((option) => /* @__PURE__ */ jsx("option", {
 								value: option,
 								children: organizationRoleLabels[option]
@@ -101,7 +101,7 @@ const PendingRow = ({ invitation, organizationId, onChanged }) => {
 					/* @__PURE__ */ jsxs("span", {
 						className: "min-w-0 flex-1",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "block truncate text-[13px] font-medium",
+							className: "block truncate font-medium",
 							children: invitation.email
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "block text-xs text-muted-foreground",

package/dist/organizations/members-page.js

@@ -34,7 +34,7 @@ const MemberRow = ({ member, current, onChanged }) => {
 					/* @__PURE__ */ jsxs("span", {
 						className: "min-w-0 flex-1",
 						children: [/* @__PURE__ */ jsxs("span", {
-							className: "block truncate text-[13px] font-medium",
+							className: "block truncate font-medium",
 							children: [member.name, self && " (you)"]
 						}), /* @__PURE__ */ jsx("span", {
 							className: "block truncate text-xs text-muted-foreground",
@@ -112,7 +112,7 @@ const MembersPage = ({ current }) => {
 					onChanged: load
 				}, `${member.id}/${member.role}/${member.appRoles.join()}`))
 			}) : !error && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+				className: "flex items-center gap-2 text-muted-foreground",
 				children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
 			})]
 		})]

package/dist/organizations/organization-page.js

@@ -78,7 +78,7 @@ const HandOver = ({ organization, memberId }) => {
 				"aria-label": "New owner",
 				value: target,
 				onChange: (event) => setTarget(event.target.value),
-				className: "h-8 flex-1 rounded-md border border-border-strong bg-background px-2 text-[13px]",
+				className: "h-8 flex-1 rounded-md border border-border-strong bg-background px-2",
 				children: [/* @__PURE__ */ jsx("option", {
 					value: "",
 					children: "Choose a member"

package/dist/organizations/organizations-page.js

@@ -19,7 +19,7 @@ const OrganizationRow = ({ organization, current, busy, onOpen }) => /* @__PURE_
 	children: [/* @__PURE__ */ jsxs("span", {
 		className: "min-w-0 flex-1",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "block truncate text-[13px] font-medium",
+			className: "block truncate font-medium",
 			children: organization.name
 		}), /* @__PURE__ */ jsx("span", {
 			className: "block text-xs text-muted-foreground",
@@ -133,7 +133,7 @@ const YourInvitations = () => {
 		children: /* @__PURE__ */ jsx("ul", {
 			className: "divide-y rounded-md border",
 			children: invitations.map((invitation) => /* @__PURE__ */ jsxs("li", {
-				className: "px-3 py-2.5 text-[13px]",
+				className: "px-3 py-2.5",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "font-medium",

package/dist/package.js

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

package/dist/plugins/before-sign-in.js

@@ -30,7 +30,7 @@ const BeforeSignIn = ({ children }) => {
 	]);
 	if (state.kind !== "signed-out" && state.kind !== "visitor") return children;
 	if (!settled) return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-muted-foreground",
 		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
 	});
 	if (!Around) return children;

package/dist/plugins/plugin-gate.js

@@ -20,7 +20,7 @@ const PluginGate = ({ ui, children }) => {
 	const { loads, settled } = usePluginLoads(plugins, usePluginSource());
 	const merged = useMemo(() => mergePlugins(ui, loads), [ui, loads]);
 	if (!settled) return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-muted-foreground",
 		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
 	});
 	return /* @__PURE__ */ jsx(ProjectUiContext.Provider, {

package/dist/plugins/plugin-notice.js

@@ -9,7 +9,7 @@ const PluginNotice = ({ off }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		role: "region",
 		"aria-label": "Plugins off",
-		className: "flex items-start gap-3 border-b border-warning/40 bg-warning-soft px-4 py-2 text-[13px] text-warning-text",
+		className: "flex items-start gap-3 border-b border-warning/40 bg-warning-soft px-4 py-2 text-warning-text",
 		children: [
 			/* @__PURE__ */ jsx(Puzzle, {
 				"aria-hidden": true,

package/dist/primitives/button.js

@@ -10,7 +10,7 @@ const variants = {
 };
 const sizes = {
 	sm: "h-7 px-2.5 text-xs gap-1.5",
-	md: "h-8 px-3 text-[13px] gap-2"
+	md: "h-8 px-3 text-body gap-2"
 };
 /** A button's classes, for a link that looks like one. */
 const buttonClass = ({ variant = "secondary", size = "md" } = {}) => cn("inline-flex shrink-0 items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-60 disabled:cursor-default", variants[variant], sizes[size]);

package/dist/primitives/dialog.js

@@ -19,11 +19,11 @@ const Dialog = ({ title, description, onClose, actions, children, wide = false }
 			className: cn("outline-none max-h-[90vh] w-full overflow-y-auto rounded-lg border bg-background p-4 shadow-pop sm:p-5", wide ? "max-w-3xl" : "max-w-md"),
 			children: [
 				/* @__PURE__ */ jsx("h2", {
-					className: "text-[15px] font-semibold",
+					className: "text-[16px] font-semibold",
 					children: title
 				}),
 				description && /* @__PURE__ */ jsx("p", {
-					className: "mt-1.5 text-[13px] text-muted-foreground",
+					className: "mt-1.5 text-muted-foreground",
 					children: description
 				}),
 				children && /* @__PURE__ */ jsx("div", {

package/dist/primitives/input.js

@@ -6,7 +6,7 @@ const Input = ({ leading, trailing, invalid, className, wrapperClassName, ...res
 	children: [
 		leading,
 		/* @__PURE__ */ jsx("input", {
-			className: cn("min-w-0 flex-1 bg-transparent text-[13px] text-foreground outline-none placeholder:text-faint-foreground", className),
+			className: cn("min-w-0 flex-1 bg-transparent text-body text-foreground outline-none placeholder:text-faint-foreground", className),
 			...rest
 		}),
 		trailing