@protobase/ui 0.40.7 → 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,7 @@ 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";
@@ -142,7 +144,8 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		url: runtimeUrl,
 		client: runtime
 	});
-	const reloadButton = meta.versionChange && /* @__PURE__ */ jsx(NewVersionButton, {});
+	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;
@@ -244,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,
@@ -289,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__ */ jsxs(ToastProvider, { children: [/* @__PURE__ */ jsx(NewVersionToast, {}), /* @__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,

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

@@ -6,14 +6,18 @@ const text = defineMessages({
 		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"
+		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"
+		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

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/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/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-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";

package/dist/app-shell/sidebar.js

@@ -11,7 +11,7 @@ import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo, notice }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -51,6 +51,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						}, item.id))]
 					}, group.label))
 				}),
+				notice,
 				/* @__PURE__ */ jsx("div", {
 					className: cn("shrink-0 border-t p-2", mode !== "text-large" && mode !== "text-small" && !expanding && "flex justify-center"),
 					children: user ? /* @__PURE__ */ jsx(ProfileMenu, {

package/dist/package.js

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

package/dist/primitives/snap-row-width.js

@@ -0,0 +1,13 @@
+//#region src/primitives/snap-row-width.ts
+/** The space between the items of a `SnapRow`, Tailwind's `gap-3`. */
+const snapRowGap = "0.75rem";
+/**
+* How wide an item of a row is at `share` of the row's width, the gaps taken off so that `1 / share` items fill it
+* exactly: a third leaves room for three items and the two gaps between them.
+*/
+const snapItemWidth = (share) => {
+	if (!(share > 0 && share <= 1)) throw new Error(`An item's share of a row is above 0 and at most 1, not ${share}`);
+	return `calc((100% + ${snapRowGap}) * ${share} - ${snapRowGap})`;
+};
+//#endregion
+export { snapItemWidth, snapRowGap };

package/dist/primitives/snap-row.js

@@ -0,0 +1,21 @@
+import { snapItemWidth, snapRowGap } from "./snap-row-width.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/snap-row.tsx
+/**
+* A list laid out as one row that scrolls sideways, by touch, trackpad, wheel or its scrollbar, and snaps each item to
+* its left edge. Each item is `share` of the row wide, but never narrower than 12rem or the row, so narrow shares stay
+* readable on a phone; the items are top aligned. The row scrolls on its own because the page cannot scroll sideways,
+* and only sideways: it is as tall as its tallest item. A swipe past its last item stops there.
+*/
+const SnapRow = ({ share, label, children }) => /* @__PURE__ */ jsx("ul", {
+	"aria-label": label,
+	className: "flex snap-x snap-mandatory items-start overflow-x-auto overflow-y-hidden overscroll-x-contain pb-1 *:w-(--snap-item-width) *:min-w-[min(100%,12rem)] *:shrink-0 *:snap-start",
+	style: {
+		gap: snapRowGap,
+		scrollbarWidth: "thin",
+		"--snap-item-width": snapItemWidth(share)
+	},
+	children
+});
+//#endregion
+export { SnapRow };