@protobase/ui 0.40.6 → 0.40.8

package/dist/app/app.js

@@ -1,5 +1,6 @@
 import { setFallbackLocale } from "../locale/active-locale.js";
 import { accountMenuItems } from "../account/account-pages.js";
+import { useSidebarNoticeShown } from "../app-shell/sidebar-notice.js";
 import { AppShell } from "../app-shell/app-shell.js";
 import { AuthProvider, useAuth } from "../auth/auth-provider.js";
 import { AccountSecurityPage } from "../account/account-security-page.js";
@@ -52,6 +53,9 @@ import { PluginNotice } from "../plugins/plugin-notice.js";
 import { RecordPage } from "./record-page.js";
 import { SourceNotice } from "./source-notice.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
+import { NewVersionBanner } from "./new-version/new-version-banner.js";
+import { NewVersionButton } from "./new-version/new-version-button.js";
+import { NewVersionToast } from "./new-version/new-version-toast.js";
 import { RuntimeUpdateButton } from "./runtime/runtime-update.js";
 import { StaffBanner } from "./staff-banner.js";
 import { useNavRecent } from "./use-nav-recent.js";
@@ -140,6 +144,8 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		url: runtimeUrl,
 		client: runtime
 	});
+	const sidebarBanner = useSidebarNoticeShown(sidebarMode ?? "text-small");
+	const reloadButton = meta.versionChange && !sidebarBanner && /* @__PURE__ */ jsx(NewVersionButton, {});
 	const role = useActiveRole(useCallback(() => reopenIn(basePath), [basePath]), Boolean(user));
 	const acting = user && actingUser(user, role.current);
 	const admin = acting ? isAdmin(acting) : false;
@@ -241,6 +247,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			onSwitch: role.switchTo
 		} : void 0,
 		onNavigate: open,
+		sidebarNotice: /* @__PURE__ */ jsx(NewVersionBanner, {}),
 		search: search.available ? {
 			placeholder: search.placeholder,
 			text: search.text,
@@ -250,12 +257,13 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			groups: search.groups,
 			onSelect: open
 		} : void 0,
-		actions: (Actions || runtimeButton || assistantButton) && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		actions: (Actions || reloadButton || runtimeButton || assistantButton) && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			Actions && /* @__PURE__ */ jsx(CustomBoundary, {
 				name: "shell.actions",
 				fallback: null,
 				children: /* @__PURE__ */ jsx(Actions, {})
 			}),
+			reloadButton,
 			runtimeButton,
 			assistantButton
 		] }),
@@ -285,13 +293,14 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 };
 const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime }) => {
 	const { state, session, markSignedOut } = useAuth();
+	const sidebarBanner = useSidebarNoticeShown(sidebarMode ?? "text-small");
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
 		client,
 		sources,
 		token: state.kind === "visitor" ? void 0 : session.token,
 		onUnauthenticated: markSignedOut,
-		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(PluginGate, {
+		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsxs(ToastProvider, { children: [!sidebarBanner && /* @__PURE__ */ jsx(NewVersionToast, {}), /* @__PURE__ */ jsx(PluginGate, {
 			ui,
 			children: /* @__PURE__ */ jsx(Routes, {
 				workspace,
@@ -299,7 +308,7 @@ const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, a
 				assistant,
 				runtime
 			})
-		}) }) })
+		})] }) })
 	});
 };
 const PublicFormGate = ({ baseUrl, client, ui, children }) => {

package/dist/app/comments/comment-composer.js

@@ -1,5 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { Button } from "../../primitives/button.js";
+import { useNavigationGuard } from "../router.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { refusalReason } from "../displays/board-columns.js";
 import { Textarea } from "../../primitives/textarea.js";
@@ -29,6 +30,7 @@ const CommentComposer = ({ resource, recordKey }) => {
 	const listId = useId();
 	const toast = useToast();
 	const post = usePostComment(resource, recordKey);
+	useNavigationGuard(draft.trim() !== "" || post.isPending, "input-lost");
 	const mention = activeMention(draft, caret);
 	const open = focused && mention !== void 0 && mention.start !== closed;
 	const people = useMentionable(resource, recordKey, open ? mention.query : void 0);

package/dist/app/create/create-page.js

@@ -1,4 +1,5 @@
 import { text } from "../messages.js";
+import { useNavigationGuard } from "../router.js";
 import { useClient } from "../../data/api-provider.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { humanize } from "../../live/naming.js";
@@ -50,6 +51,12 @@ const LoadedCreate = ({ resource, values }) => {
 	const [errors, setErrors] = useState({});
 	const [rejections, setRejections] = useState(0);
 	const formRef = useFocusFirstInvalid(rejections);
+	const [newRecord, setNewRecord] = useState();
+	const [touched, setTouched] = useState(false);
+	useNavigationGuard(!newRecord && (touched || feedback.phase === "saving"), "input-lost");
+	useEffect(() => {
+		if (newRecord) go(newRecord, { replace: true });
+	}, [newRecord, go]);
 	useEffect(() => {
 		for (const [name, key] of Object.entries(values ?? {})) {
 			const target = meta.resources[model.fields[name]?.relation?.resource ?? ""];
@@ -74,6 +81,7 @@ const LoadedCreate = ({ resource, values }) => {
 	]);
 	const change = (name, value) => {
 		setErrors((current) => without(current, name));
+		setTouched(true);
 		setDraft((current) => ({
 			...current,
 			[name]: value
@@ -97,11 +105,11 @@ const LoadedCreate = ({ resource, values }) => {
 			"facets",
 			"series"
 		]) queryClient.invalidateQueries({ queryKey: [prefix, resource] });
-		go({
+		setNewRecord({
 			kind: "record",
 			resource,
 			key: recordKey(model, created.record)
-		}, { replace: true });
+		});
 	});
 	const formSections = sections.map((section) => ({
 		title: section.title,

package/dist/app/messages.js

@@ -47,8 +47,14 @@ const text = defineMessages({
 		loading: "Loading",
 		leaveTitle: "Leave without saving?",
 		leaveDescription: "You have unsaved changes on this page. They stay in this browser, and come back when you open the record again.",
+		leaveInputLost: "You have unsaved changes on this page. They are lost when you leave.",
 		stay: "Stay",
 		leave: "Leave",
+		reloadTitle: "Reload without saving?",
+		reloadDraftKept: "You have unsaved changes on this page. They stay in this browser, and come back after the page reloads.",
+		reloadInputLost: "You have unsaved changes on this page. They are lost when the page reloads.",
+		keepEditing: "Keep editing",
+		reload: "Reload",
 		show: (label) => `Show ${label}`,
 		hide: (label) => `Hide ${label}`,
 		couldNotShow: (label) => `Could not show the ${label}`,
@@ -110,8 +116,14 @@ const text = defineMessages({
 		loading: "Laden",
 		leaveTitle: "Weggaan zonder te bewaren?",
 		leaveDescription: "Je hebt niet-bewaarde wijzigingen op deze pagina. Ze blijven in deze browser, en komen terug als je het record weer opent.",
+		leaveInputLost: "Je hebt niet-bewaarde wijzigingen op deze pagina. Ze gaan verloren als je weggaat.",
 		stay: "Blijven",
 		leave: "Weggaan",
+		reloadTitle: "Opnieuw laden zonder op te slaan?",
+		reloadDraftKept: "Er zijn niet-opgeslagen wijzigingen op deze pagina. Ze blijven bewaard in deze browser en komen terug zodra de pagina opnieuw is geladen.",
+		reloadInputLost: "Er zijn niet-opgeslagen wijzigingen op deze pagina. Ze gaan verloren als de pagina opnieuw wordt geladen.",
+		keepEditing: "Verder bewerken",
+		reload: "Opnieuw laden",
 		show: (label) => `${label} tonen`,
 		hide: (label) => `${label} verbergen`,
 		couldNotShow: (label) => `Kon ${label} niet tonen`,

package/dist/app/new-version/messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/new-version/messages.ts
+const text = defineMessages({
+	en: {
+		title: "This app has been updated",
+		description: "Reload the page to use the new version, when it suits you.",
+		reload: "Reload",
+		reloadPage: "Reload page",
+		reloadPageHint: "Reload page to use the new version",
+		bannerTitle: "{} updated",
+		bannerLine: "Save your work, then click here to reload. You may see errors until you do."
+	},
+	nl: {
+		title: "Deze app is bijgewerkt",
+		description: "Laad de pagina opnieuw voor de nieuwe versie, wanneer het uitkomt.",
+		reload: "Opnieuw laden",
+		reloadPage: "Opnieuw laden",
+		reloadPageHint: "Opnieuw laden om de nieuwe versie te gebruiken",
+		bannerTitle: "{} bijgewerkt",
+		bannerLine: "Sla je werk op en klik hier om te herladen. Tot dan kunnen er fouten optreden."
+	}
+});
+//#endregion
+export { text };

package/dist/app/new-version/new-version-banner.js

@@ -0,0 +1,37 @@
+import { useRouter } from "../router.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { slotted } from "../../locale/slotted.js";
+import { text } from "./messages.js";
+import { RotateCw } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/new-version/new-version-banner.tsx
+/**
+* Across the bottom of a full-width sidebar, from the moment the page keeps its `/meta` for a new version until it
+* reloads: the app's name, that it was updated, and a click that reloads, asking first while a guard holds unsaved
+* changes. It stands in for `NewVersionToast` and `NewVersionButton`, which float over the page.
+*/
+const NewVersionBanner = () => {
+	const { versionChange, appName } = useAdminMeta();
+	const { reload } = useRouter();
+	if (!versionChange) return null;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: reload,
+		className: "flex w-full shrink-0 items-start gap-2 border-t border-warning/40 bg-warning-soft px-3.5 py-2 text-left text-warning-text transition-colors hover:bg-warning/15 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary",
+		children: [/* @__PURE__ */ jsx(RotateCw, {
+			"aria-hidden": true,
+			className: "mt-0.5 size-3.5 shrink-0"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "break-words font-semibold",
+				children: appName ? slotted(text("bannerTitle"), appName) : text("title")
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-xs",
+				children: text("bannerLine")
+			})]
+		})]
+	});
+};
+//#endregion
+export { NewVersionBanner };

package/dist/app/new-version/new-version-button.js

@@ -0,0 +1,27 @@
+import { Button } from "../../primitives/button.js";
+import { useRouter } from "../router.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { text } from "./messages.js";
+import { RotateCw } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/new-version/new-version-button.tsx
+/** The top bar's Reload page button, from the moment the page keeps its `/meta` for a new version until it reloads. */
+const NewVersionButton = () => {
+	const changed = Boolean(useAdminMeta().versionChange);
+	const { reload } = useRouter();
+	if (!changed) return null;
+	return /* @__PURE__ */ jsxs(Button, {
+		size: "sm",
+		variant: "ghost",
+		"aria-label": text("reloadPageHint"),
+		title: text("reloadPageHint"),
+		onClick: reload,
+		className: "max-md:size-9 max-md:p-0",
+		children: [/* @__PURE__ */ jsx(RotateCw, { className: "size-3.5 text-primary" }), /* @__PURE__ */ jsx("span", {
+			className: "max-md:sr-only",
+			children: text("reloadPage")
+		})]
+	});
+};
+//#endregion
+export { NewVersionButton };

package/dist/app/new-version/new-version-toast.js

@@ -0,0 +1,43 @@
+import { useRouter } from "../router.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { text } from "./messages.js";
+import { useModalOpen } from "./use-modal-open.js";
+import { useEffect, useState } from "react";
+//#region src/app/new-version/new-version-toast.tsx
+/**
+* Once the server runs another Protobase version than the page started with, a toast that says so and reloads the
+* page, asking first while a guard holds unsaved changes. It stays until Reload or ×, and after × it does not come
+* back; the top bar's `NewVersionButton` stays. It steps aside while a modal is open, whose buttons it could cover on a
+* phone. The page keeps the `/meta` it has meanwhile (see `keepOnVersionChange`).
+*/
+const NewVersionToast = () => {
+	const changed = Boolean(useAdminMeta().versionChange);
+	const modalOpen = useModalOpen();
+	const [closed, setClosed] = useState(false);
+	const toast = useToast();
+	const { reload } = useRouter();
+	const shown = changed && !closed && !modalOpen;
+	useEffect(() => {
+		if (!shown) return;
+		const id = toast.show({
+			state: "info",
+			sticky: true,
+			title: text("title"),
+			description: text("description"),
+			action: {
+				label: text("reload"),
+				onClick: reload
+			},
+			onClose: () => setClosed(true)
+		});
+		return () => toast.dismiss(id);
+	}, [
+		shown,
+		toast,
+		reload
+	]);
+	return null;
+};
+//#endregion
+export { NewVersionToast };

package/dist/app/new-version/use-modal-open.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+//#region src/app/new-version/use-modal-open.ts
+const modalOpen = () => document.querySelector("[aria-modal=\"true\"]") !== null;
+/** Whether a modal, a dialog or a sheet, is open anywhere on the page, following them as they open and close. */
+const useModalOpen = () => {
+	const [open, setOpen] = useState(modalOpen);
+	useEffect(() => {
+		const observer = new MutationObserver(() => setOpen(modalOpen()));
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
+		setOpen(modalOpen());
+		return () => observer.disconnect();
+	}, []);
+	return open;
+};
+//#endregion
+export { useModalOpen };

package/dist/app/pages/blocks/modal-form.js

@@ -1,5 +1,6 @@
 import { Button } from "../../../primitives/button.js";
 import { Dialog } from "../../../primitives/dialog.js";
+import { useNavigationGuard } from "../../router.js";
 import { useClient } from "../../../data/api-provider.js";
 import { useAdminMeta, usePermissions } from "../../meta-gate.js";
 import { text } from "../messages.js";
@@ -45,6 +46,8 @@ const ModalFormDialog = ({ model, record, mode, label, title, fields, values, on
 	const formRef = useFocusFirstInvalid(rejections);
 	const [failure, setFailure] = useState();
 	const [saving, setSaving] = useState(false);
+	const [touched, setTouched] = useState(false);
+	useNavigationGuard(touched || saving, "input-lost");
 	const submit = async () => {
 		setSaving(true);
 		setFailure(void 0);
@@ -113,6 +116,7 @@ const ModalFormDialog = ({ model, record, mode, label, title, fields, values, on
 						resource: model.name,
 						onChange: (next) => {
 							setErrors(({ [name]: _, ...rest }) => rest);
+							setTouched(true);
 							setDraft((current) => ({
 								...current,
 								[name]: next

package/dist/app/pages/blocks/record-cards.js

@@ -4,13 +4,22 @@ import { listColumnNames } from "../../../live/columns-from-model.js";
 import { propsOf } from "./block-props.js";
 import { RelatedCards } from "../../related-cards/related-cards.js";
 import { jsx } from "react/jsx-runtime";
+import { cardsLayoutOf } from "@protobase/layout";
 //#region src/app/pages/blocks/record-cards.tsx
+const shares = {
+	"1/4": 1 / 4,
+	"1/3": 1 / 3,
+	"1/2": 1 / 2,
+	"2/3": 2 / 3
+};
 /**
-* What a filter finds as the record page's related cards, stacked full width under a heading like a record page
-* section's, with no card frame around them, so no card sits in another.
+* What a filter finds as the record page's related cards, stacked full width or in a row that scrolls sideways, under
+* a heading like a record page section's, with no card frame around them, so no card sits in another.
 */
 const RecordCardsBlock = ({ node, slots }) => {
-	const { resource, filter = "", sort = "", fields, cardActions = [], limit = 10, display, title, description, empty } = propsOf(node);
+	const props = propsOf(node);
+	const { resource, filter = "", sort = "", fields, cardActions = [], limit = 10, display, title, description, empty } = props;
+	const { layout, cardWidth } = cardsLayoutOf(props);
 	const { resources, views } = useAdminMeta();
 	const model = resources[resource];
 	if (!model) return null;
@@ -31,7 +40,8 @@ const RecordCardsBlock = ({ node, slots }) => {
 				actions: cardActions,
 				limit,
 				display,
-				empty
+				empty,
+				carousel: layout === "carousel" ? shares[cardWidth] : void 0
 			})
 		})
 	});

package/dist/app/record-page.js

@@ -153,7 +153,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const restore = useRestore(model);
 	const canUpdate = can(permissions, "update") && stored.permissions?.update !== false;
 	const { shown, offersEdit, editing } = recordShown(view?.recordMode, canUpdate, address?.kind === "record" && address.edit === true);
-	useNavigationGuard(editor.dirty && shown === "form");
+	useNavigationGuard(editor.dirty && shown === "form" || editor.saving);
 	usePauseFocusRefresh(editor.dirty);
 	const openGroups = address?.kind === "record" ? address.open : void 0;
 	const atEdit = address?.kind === "record" && address.edit === true;

package/dist/app/related-cards/related-cards.js

@@ -5,6 +5,7 @@ import { defaultOrderBy } from "../list-order.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { scopeOf, useCount, useListPage } from "../pages/use-layout-data.js";
+import { SnapRow } from "../../primitives/snap-row.js";
 import { text } from "../embedded-list/messages.js";
 import { cutOffNote } from "../embedded-list/cut-off-note.js";
 import { embeddedDisplay, viewAllAddress } from "../embedded-list/embedded-display.js";
@@ -14,10 +15,10 @@ import { ArrowRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/related-cards/related-cards.tsx
 /**
-* The first `limit` records of a list as cards stacked full width, each with its fields and its actions' buttons, and a
-* link to the whole list beside a note such as "The first 10 of 37." when there are more.
+* The first `limit` records of a list as cards stacked full width or in a `carousel`, each with its fields and its
+* actions' buttons, and a link to the whole list beside a note such as "The first 10 of 37." when there are more.
 */
-const RelatedCards = ({ model, view, filter, sort, fields, actions, limit, display, empty }) => {
+const RelatedCards = ({ model, view, filter, sort, fields, actions, limit, display, empty, carousel }) => {
 	const xs = useIsXs();
 	const orderBy = sort || defaultOrderBy(model, view);
 	const page = useListPage(model, {
@@ -39,20 +40,24 @@ const RelatedCards = ({ model, view, filter, sort, fields, actions, limit, displ
 		className: "text-muted-foreground",
 		children: empty ?? text$1("nothingYet")
 	});
+	const cards = rows.map((row) => {
+		const scope = scopeOf(model, row);
+		return /* @__PURE__ */ jsx(RelatedCard, {
+			scope,
+			view,
+			fields,
+			actions
+		}, scope.key);
+	});
 	const note = count.data === void 0 ? void 0 : cutOffNote(rows.length, count.data, false);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-3",
-		children: [/* @__PURE__ */ jsx("ul", {
+		children: [carousel === void 0 ? /* @__PURE__ */ jsx("ul", {
 			className: "flex flex-col gap-3",
-			children: rows.map((row) => {
-				const scope = scopeOf(model, row);
-				return /* @__PURE__ */ jsx(RelatedCard, {
-					scope,
-					view,
-					fields,
-					actions
-				}, scope.key);
-			})
+			children: cards
+		}) : /* @__PURE__ */ jsx(SnapRow, {
+			share: carousel,
+			children: cards
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-center justify-between gap-2",
 			children: [/* @__PURE__ */ jsx("p", {

package/dist/app/router.js

@@ -34,13 +34,15 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 		url: initialUrl ?? browserUrl(),
 		entry: memory ? newEntry() : historyEntry()
 	}));
-	const guards = useRef(/* @__PURE__ */ new Set());
+	const guards = useRef(/* @__PURE__ */ new Map());
+	const losesInput = () => [...guards.current.values()].includes("input-lost");
 	const current = useRef(page);
 	current.current = page;
 	const position = useRef(memory ? 0 : historyIndex());
 	const undoing = useRef(false);
 	const proceeding = useRef(false);
 	const leaveAfterUndo = useRef(void 0);
+	const reloading = useRef(false);
 	const [pending, setPending] = useState();
 	useEffect(() => {
 		if (memory) return;
@@ -64,7 +66,8 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 				window.history.go(-delta);
 				setPending({
 					kind: "history",
-					delta
+					delta,
+					inputLost: losesInput()
 				});
 				return;
 			}
@@ -97,19 +100,32 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 		if (pathOf(full) !== pathOf(current.current.url) && guards.current.size > 0) return setPending({
 			kind: "link",
 			full,
-			replace
+			replace,
+			inputLost: losesInput()
 		});
 		go(full, replace);
 	}, [basePath, go]);
-	const registerGuard = useCallback(() => {
+	const registerGuard = useCallback((kind = "draft-kept") => {
 		const token = Symbol("guard");
-		guards.current.add(token);
+		guards.current.set(token, kind);
 		return () => void guards.current.delete(token);
 	}, []);
+	const reload = useCallback(() => {
+		if (guards.current.size > 0) return setPending({
+			kind: "reload",
+			inputLost: losesInput()
+		});
+		window.location.reload();
+	}, []);
+	const reloadConfirmed = useCallback(() => reloading.current, []);
 	const leave = () => {
 		if (!pending) return;
 		setPending(void 0);
 		if (pending.kind === "link") return go(pending.full, pending.replace);
+		if (pending.kind === "reload") {
+			reloading.current = true;
+			return window.location.reload();
+		}
 		proceeding.current = true;
 		if (undoing.current) leaveAfterUndo.current = pending.delta;
 		else window.history.go(pending.delta);
@@ -122,29 +138,49 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 			basePath,
 			entry: page.entry,
 			navigate,
-			registerGuard
+			registerGuard,
+			reload,
+			reloadConfirmed
 		};
 	}, [
 		page,
 		basePath,
 		navigate,
-		registerGuard
+		registerGuard,
+		reload,
+		reloadConfirmed
 	]);
 	return /* @__PURE__ */ jsxs(RouterContext.Provider, {
 		value,
-		children: [children, pending && /* @__PURE__ */ jsx(Dialog, {
-			title: text("leaveTitle"),
-			description: text("leaveDescription"),
-			onClose: () => setPending(void 0),
-			actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-				onClick: () => setPending(void 0),
-				children: text("stay")
-			}), /* @__PURE__ */ jsx(Button, {
-				variant: "primary",
-				onClick: leave,
-				children: text("leave")
-			})] })
-		})]
+		children: [
+			children,
+			pending?.kind === "reload" && /* @__PURE__ */ jsx(Dialog, {
+				title: text("reloadTitle"),
+				description: text(pending.inputLost ? "reloadInputLost" : "reloadDraftKept"),
+				onClose: () => setPending(void 0),
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => setPending(void 0),
+					children: text("keepEditing")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: leave,
+					children: text("reload")
+				})] })
+			}),
+			pending && pending.kind !== "reload" && /* @__PURE__ */ jsx(Dialog, {
+				title: text("leaveTitle"),
+				description: text(pending.inputLost ? "leaveInputLost" : "leaveDescription"),
+				onClose: () => setPending(void 0),
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => setPending(void 0),
+					children: text("stay")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: leave,
+					children: text("leave")
+				})] })
+			})
+		]
 	});
 };
 /** A link to a path below the base path, as `appPath` writes it, that the router follows without reloading the page. */
@@ -158,16 +194,22 @@ const Link = ({ to, replace, ...rest }) => {
 		...rest
 	});
 };
-/** While `active`, leaving the page asks first (in-app links and closing the tab). */
-const useNavigationGuard = (active) => {
-	const { registerGuard } = useRouter();
-	useEffect(() => active ? registerGuard() : void 0, [active, registerGuard]);
+/** While `active`, leaving the page asks first (in-app links, a reload and closing the tab). */
+const useNavigationGuard = (active, kind = "draft-kept") => {
+	const { registerGuard, reloadConfirmed } = useRouter();
+	useEffect(() => active ? registerGuard(kind) : void 0, [
+		active,
+		kind,
+		registerGuard
+	]);
 	useEffect(() => {
 		if (!active) return;
-		const warn = (event) => event.preventDefault();
+		const warn = (event) => {
+			if (!reloadConfirmed()) event.preventDefault();
+		};
 		window.addEventListener("beforeunload", warn);
 		return () => window.removeEventListener("beforeunload", warn);
-	}, [active]);
+	}, [active, reloadConfirmed]);
 };
 //#endregion
 export { Link, Router, useNavigationGuard, useRouter };

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

@@ -4,14 +4,16 @@ import { BottomBar } from "./bottom-bar.js";
 import { Drawer } from "./drawer.js";
 import { PageScrollContext, usePageGutter, usePageInsets } from "./page-scroll.js";
 import { Sidebar } from "./sidebar.js";
+import { useSidebarNoticeShown } from "./sidebar-notice.js";
 import { TopBarSlotContext } from "./top-bar-slot.js";
 import { TopBar } from "./top-bar.js";
 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, appName, appIcon, logo, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appName, appIcon, logo, actions, rightPanel, sidebarNotice, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
+	const noticeShown = useSidebarNoticeShown(sidebarMode);
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
 		if (desktop) setDrawerOpen(false);
@@ -24,9 +26,10 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appNam
 	const bottomBarRef = useRef(null);
 	usePageInsets(pageScroll, topBarRef, bottomBarRef, Boolean(tabs));
 	usePageGutter(pageScroll);
-	const sidebar = (mode, sticky = false) => /* @__PURE__ */ jsx(Sidebar, {
+	const sidebar = (mode, sticky = false, notice) => /* @__PURE__ */ jsx(Sidebar, {
 		mode,
 		sticky,
+		notice,
 		activeItem,
 		user,
 		workspace,
@@ -49,7 +52,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appNam
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn(pageScroll ? "flex min-h-full w-full overflow-x-clip bg-background" : "relative flex h-full min-h-0 w-full overflow-hidden bg-background", className),
 			children: [
-				desktop ? sidebar(sidebarMode, pageScroll) : /* @__PURE__ */ jsx(Drawer, {
+				desktop ? sidebar(sidebarMode, pageScroll, noticeShown && sidebarNotice) : /* @__PURE__ */ jsx(Drawer, {
 					id: drawerId,
 					open: drawerOpen,
 					onClose: () => setDrawerOpen(false),

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

@@ -0,0 +1,12 @@
+import { useIsDesktop } from "../lib/use-media-query.js";
+import { isTextMode } from "./sidebar-mode.js";
+//#region src/app-shell/sidebar-notice.ts
+/**
+* Whether the shell draws its `sidebarNotice`: where the sidebar shows at full width, from the `md` breakpoint up in a
+* text mode. Collapsed to icons, or a drawer on phones, it has no room, so the app says the same another way.
+*/
+const useSidebarNoticeShown = (mode) => {
+	return useIsDesktop() && isTextMode(mode);
+};
+//#endregion
+export { useSidebarNoticeShown };

package/dist/app-shell/sidebar.d.ts

@@ -1,4 +1,4 @@
 import "../primitives/route-link.js";
 import "./nav.js";
 import "./profile-menu.js";
-import { ComponentType } from "react";
+import { ComponentType, ReactNode } from "react";