@protobase/ui 0.12.6 → 0.12.8

package/dist/app/app.js

@@ -86,7 +86,8 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const group = groups.find((entry) => entry.items.some((item) => item.id === place));
 	const model = resource ? meta.resources[resource] : void 0;
 	const record = useRecord(shown?.resource ?? "", shown?.key ?? "", Boolean(model && shown));
-	const title = model && shown && record.data ? recordTitle(model, view, record.data.record, shown.key) : shown?.key;
+	const title = model && shown && record.data ? recordTitle(model, view, record.data.record, shown.key) : void 0;
+	const titleLoading = Boolean(shown) && (record.isLoading || drawnFrom?.state === "loading");
 	const { shell } = useProjectUi();
 	const Actions = shell?.actions;
 	const RightPanel = shell?.rightPanel;
@@ -126,7 +127,8 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		group: group?.label,
 		page,
 		resourceLabel: view?.names?.plural ?? (resource && humanize(resource)),
-		recordTitle: title
+		recordTitle: title,
+		recordLoading: titleLoading
 	});
 	const content = path === "/-/account" ? /* @__PURE__ */ jsx(AccountSecurityPage, { email: user.email }) : path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
 		title: "Admins only",

package/dist/app/breadcrumb-for.js

@@ -1,7 +1,7 @@
 import { appPath } from "@protobase/schema";
 //#region src/app/breadcrumb-for.ts
 /** Group, then the page or resource list, then the record (or "New"): each with a page of its own links to it. */
-const breadcrumbFor = ({ basePath, address, group, page, resourceLabel, recordTitle }) => {
+const breadcrumbFor = ({ basePath, address, group, page, resourceLabel, recordTitle, recordLoading }) => {
 	const groupCrumb = group ? [group] : [];
 	if (page) return [...groupCrumb, {
 		label: page.title,
@@ -19,12 +19,17 @@ const breadcrumbFor = ({ basePath, address, group, page, resourceLabel, recordTi
 		}, basePath)
 	}] : [];
 	if (address.kind === "list") return [...groupCrumb, ...resource];
+	const href = appPath(address, basePath);
 	const record = address.kind === "create" ? {
 		label: "New",
-		href: appPath(address, basePath)
+		href
+	} : recordTitle === void 0 && recordLoading ? {
+		label: "Loading record",
+		href,
+		loading: true
 	} : {
 		label: recordTitle ?? address.key,
-		href: appPath(address, basePath)
+		href
 	};
 	return [
 		...groupCrumb,

package/dist/app/displays/cards-display.js

@@ -1,4 +1,5 @@
 import { Badge } from "../../primitives/badge.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { cardFields } from "./list-displays.js";
@@ -7,7 +8,6 @@ import { displayValue } from "../../live/display-value.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
-import { Skeleton } from "../../primitives/skeleton.js";
 import { toneFor } from "../../live/columns-from-model.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/app/displays/display-controls.js

@@ -20,6 +20,7 @@ const DisplaySwitch = ({ view, value, onChange }) => {
 	if (choices.length < 2) return null;
 	return /* @__PURE__ */ jsx(Segmented, {
 		label: "Display",
+		size: "md",
 		value,
 		onChange,
 		options: choices.map((choice) => ({
@@ -40,7 +41,7 @@ const SortMenu = ({ model, view, display, orderBy, onChange }) => {
 		"aria-label": "Sort",
 		value: `${current.columnId} ${current.direction}`,
 		onChange: (event) => onChange(event.target.value),
-		className: "h-7 rounded-md border border-border-strong bg-background px-2 text-xs shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
+		className: "h-8 rounded-md border border-border-strong bg-background px-2.5 text-[13px] shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
 		children: names.flatMap((name) => directions.map(([direction, word]) => /* @__PURE__ */ jsxs("option", {
 			value: `${name} ${direction}`,
 			children: [

package/dist/app/list-page.js

@@ -15,6 +15,7 @@ import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
 import { ActiveFilterChips } from "../filter-panel/active-filter-chips.js";
 import { activeChips, emptyFilterState, removeChip } from "../filter-panel/filter-state.js";
+import { ToolbarRow } from "../filter-panel/toolbar-row.js";
 import { FilterPanel } from "../filter-panel/filter-panel.js";
 import { columnsFromModel } from "../live/columns-from-model.js";
 import { stateToText, textToState } from "../live/filter-string.js";
@@ -124,11 +125,29 @@ const LoadedList = ({ model, address }) => {
 		setFilter(state, text ? [...others, where.search(text)] : others);
 	};
 	const plural = view?.names?.plural ?? humanize(resource);
+	const sortMenu = display && /* @__PURE__ */ jsx(SortMenu, {
+		model,
+		view,
+		display,
+		orderBy,
+		onChange: (next) => set({ orderBy: next })
+	});
+	const searchBox = model.search?.length ? /* @__PURE__ */ jsx(ListSearch, {
+		value: search?.kind === "search" ? search.text : "",
+		onCommit: commitSearch,
+		placeholder: `Search ${plural.toLowerCase()}`
+	}) : null;
 	const panel = /* @__PURE__ */ jsx(FilterPanel, {
 		layout,
 		config,
 		value: state,
-		onChange: setFilter
+		onChange: setFilter,
+		leading: sortMenu,
+		trailing: searchBox
+	});
+	const desktopToolbar = layout === "bar" ? panel : /* @__PURE__ */ jsx(ToolbarRow, {
+		groups: [sortMenu ? [sortMenu] : []],
+		trailing: searchBox
 	});
 	const chips = activeChips(config, state);
 	const phoneFilters = /* @__PURE__ */ jsxs("div", {
@@ -217,18 +236,8 @@ const LoadedList = ({ model, address }) => {
 						value: display?.name ?? tableDisplay,
 						onChange: (name) => set({ display: name })
 					}),
-					display && /* @__PURE__ */ jsx(SortMenu, {
-						model,
-						view,
-						display,
-						orderBy,
-						onChange: (next) => set({ orderBy: next })
-					}),
-					model.search?.length ? /* @__PURE__ */ jsx(ListSearch, {
-						value: search?.kind === "search" ? search.text : "",
-						onCommit: commitSearch,
-						placeholder: `Search ${plural.toLowerCase()}`
-					}) : null,
+					!desktop && sortMenu,
+					!desktop && searchBox,
 					can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
 						variant: "primary",
 						onClick: () => go({
@@ -258,7 +267,7 @@ const LoadedList = ({ model, address }) => {
 				noun: plural.toLowerCase(),
 				filter: parsed.ok ? filterText : ""
 			}),
-			!desktop ? phoneFilters : layout === "bar" && panel,
+			desktop ? desktopToolbar : phoneFilters,
 			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",
 				children: [panel, shown]

package/dist/app/list-search.js

@@ -17,7 +17,7 @@ const ListSearch = ({ value, onCommit, placeholder }) => {
 		onCommit
 	]);
 	return /* @__PURE__ */ jsx(Input, {
-		wrapperClassName: "min-w-0 flex-1 sm:w-72 sm:flex-none",
+		wrapperClassName: "min-w-0 flex-1 sm:w-72 sm:flex-initial",
 		leading: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
 		placeholder,
 		"aria-label": "Search",

package/dist/app/pages/blocks/card-row.js

@@ -1,6 +1,6 @@
+import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { ErrorBanner } from "../../error-banner.js";
-import { Skeleton } from "../../../primitives/skeleton.js";
 import { RecordScope } from "../record-scope.js";
 import { scopeOf, useListPage } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";

package/dist/app/pages/blocks/field.js

@@ -1,6 +1,6 @@
+import { Skeleton } from "../../../primitives/skeleton.js";
 import { humanize } from "../../../live/naming.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { Skeleton } from "../../../primitives/skeleton.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { FieldValue } from "../field-value.js";

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

@@ -1,6 +1,6 @@
+import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { ErrorBanner } from "../../error-banner.js";
-import { Skeleton } from "../../../primitives/skeleton.js";
 import { RecordScope } from "../record-scope.js";
 import { useFirstRecord } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";

package/dist/app/pages/blocks/stat.js

@@ -1,6 +1,6 @@
+import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { AppLink } from "../../use-app-address.js";
-import { Skeleton } from "../../../primitives/skeleton.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { useCount } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";

package/dist/app/pages/blocks/table.js

@@ -1,6 +1,6 @@
+import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { ErrorBanner } from "../../error-banner.js";
-import { Skeleton } from "../../../primitives/skeleton.js";
 import { useListPage } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame, Quiet } from "./card-frame.js";

package/dist/app/related-section.js

@@ -1,9 +1,9 @@
+import { Skeleton } from "../primitives/skeleton.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { useAdminMeta } from "./meta-gate.js";
 import { ErrorBanner } from "./error-banner.js";
 import { Section } from "../record-view/section.js";
-import { Skeleton } from "../primitives/skeleton.js";
 import { RecordTable } from "./pages/record-table.js";
 import { defaultColumns } from "./pages/blocks/table.js";
 import { useState } from "react";

package/dist/app-shell/breadcrumb.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { Skeleton } from "../primitives/skeleton.js";
 import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/breadcrumb.tsx
@@ -9,26 +10,32 @@ const Breadcrumb = ({ parts, onNavigate }) => /* @__PURE__ */ jsx("nav", {
 	className: "flex min-w-0 items-center gap-1.5 text-[13px]",
 	children: parts.map((part, index) => {
 		const last = index === parts.length - 1;
-		const { label, href } = typeof part === "string" ? {
+		const { label, href, loading } = typeof part === "string" ? {
 			label: part,
-			href: void 0
+			href: void 0,
+			loading: false
 		} : part;
+		const content = loading ? /* @__PURE__ */ jsx(Skeleton, { className: "w-24" }) : label;
 		const text = cn("truncate", last ? "font-semibold" : "text-muted-foreground");
 		return /* @__PURE__ */ jsxs("span", {
 			className: cn("min-w-0 items-center gap-1.5", last ? "flex" : "hidden md:flex"),
 			children: [index > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "hidden size-3.5 shrink-0 text-faint-foreground md:block" }), href ? /* @__PURE__ */ jsx("a", {
 				href,
 				"aria-current": last ? "page" : void 0,
+				"aria-label": loading ? label : void 0,
+				"aria-busy": loading || void 0,
 				onClick: (event) => {
 					if (!onNavigate || !inApp(event)) return;
 					event.preventDefault();
 					onNavigate(href);
 				},
 				className: cn(text, "rounded-sm hover:text-foreground hover:underline"),
-				children: label
+				children: content
 			}) : /* @__PURE__ */ jsx("span", {
 				className: text,
-				children: label
+				"aria-label": loading ? label : void 0,
+				"aria-busy": loading || void 0,
+				children: content
 			})]
 		}, `${index}-${label}`);
 	})

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

@@ -1,9 +1,9 @@
 import { cn } from "../lib/cn.js";
+import { Skeleton } from "../primitives/skeleton.js";
 import { formatInt } from "../format/number.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
-import { Skeleton } from "../primitives/skeleton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/grid-row.tsx
 const frameStyle = (frame) => ({

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

@@ -6,10 +6,12 @@ import { FilterMenu } from "./filter-menu.js";
 import { FilterSection } from "./filter-section.js";
 import { RangeFilter } from "./range-filter.js";
 import { ToggleRow } from "./toggle-row.js";
+import { ToolbarRow, toolbarShows } from "./toolbar-row.js";
 import { useFilterState } from "./use-filter-state.js";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/filter-panel.tsx
-const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabels, defaultOpenMenu, fullWidth }) => {
+const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabels, defaultOpenMenu, fullWidth, leading, trailing }) => {
 	const [state, setState] = useFilterState(value, defaultValue, onChange);
 	const chips = activeChips(config, state);
 	const chipsView = /* @__PURE__ */ jsx(ActiveFilterChips, {
@@ -76,35 +78,41 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 			})
 		]
 	});
+	const menus = [
+		...config.facets.map((group) => /* @__PURE__ */ jsx(FilterMenu, {
+			label: group.label,
+			activeCount: (state.facets[group.id] ?? []).length,
+			defaultOpen: defaultOpenMenu === group.id,
+			children: facetView(group)
+		}, group.id)),
+		...config.range ? [/* @__PURE__ */ jsx(FilterMenu, {
+			label: config.range.label,
+			activeCount: state.range ? 1 : 0,
+			width: 280,
+			defaultOpen: defaultOpenMenu === config.range.id,
+			children: rangeView
+		}, "range")] : [],
+		...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",
+		children: /* @__PURE__ */ jsx(ToggleRow, {
+			label: toggle.label,
+			checked: state.toggles.includes(toggle.id),
+			onChange: () => setState(toggleFlag(state, toggle.id))
+		})
+	}, toggle.id));
+	const groups = [
+		leading ? [/* @__PURE__ */ jsx(Fragment, { children: leading }, "leading")] : [],
+		menus,
+		toggles
+	];
+	if (!toolbarShows(groups, trailing) && chips.length === 0 && !lockedLabels?.length) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: [
-				config.facets.map((group) => /* @__PURE__ */ jsx(FilterMenu, {
-					label: group.label,
-					activeCount: (state.facets[group.id] ?? []).length,
-					defaultOpen: defaultOpenMenu === group.id,
-					children: facetView(group)
-				}, group.id)),
-				config.range && /* @__PURE__ */ jsx(FilterMenu, {
-					label: config.range.label,
-					activeCount: state.range ? 1 : 0,
-					width: 280,
-					defaultOpen: defaultOpenMenu === config.range.id,
-					children: rangeView
-				}),
-				dateView,
-				config.toggles && /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-border" }),
-				config.toggles?.map((toggle) => /* @__PURE__ */ jsx("div", {
-					className: "flex items-center gap-2 text-[13px] text-muted-foreground",
-					children: /* @__PURE__ */ jsx(ToggleRow, {
-						label: toggle.label,
-						checked: state.toggles.includes(toggle.id),
-						onChange: () => setState(toggleFlag(state, toggle.id))
-					})
-				}, toggle.id))
-			]
+		children: [/* @__PURE__ */ jsx(ToolbarRow, {
+			groups,
+			trailing
 		}), chipsView]
 	});
 };

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

@@ -0,0 +1,22 @@
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-panel/toolbar-row.tsx
+/** Whether a toolbar row with these groups and trailing control shows anything. */
+const toolbarShows = (groups, trailing) => groups.some((group) => group.length > 0) || Boolean(trailing);
+/**
+* One row of list controls: the non-empty groups in order with a divider between each two, then the trailing control
+* at the right end, narrowing before it wraps. Nothing at all when it would show nothing.
+*/
+const ToolbarRow = ({ groups, trailing }) => {
+	if (!toolbarShows(groups, trailing)) return null;
+	const shown = groups.filter((group) => group.length > 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-2",
+		children: [shown.map((group, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-border" }), group] }, index)), trailing && /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-32 flex-1 justify-end",
+			children: trailing
+		})]
+	});
+};
+//#endregion
+export { ToolbarRow, toolbarShows };

package/dist/package.js

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

package/dist/primitives/segmented.js

@@ -1,15 +1,25 @@
 import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/segmented.tsx
-const Segmented = ({ value, options, onChange, label }) => /* @__PURE__ */ jsx("span", {
+const sizes = {
+	sm: {
+		group: "h-7",
+		option: "px-2.5 text-xs"
+	},
+	md: {
+		group: "h-8",
+		option: "px-3 text-[13px]"
+	}
+};
+const Segmented = ({ value, options, onChange, label, size = "sm" }) => /* @__PURE__ */ jsx("span", {
 	role: "group",
 	"aria-label": label,
-	className: "inline-flex h-7 rounded-md bg-muted p-0.5",
+	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,
 		onClick: () => onChange(option.value),
-		className: cn("inline-flex items-center gap-1.5 rounded px-2.5 text-xs font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		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]
 	}, option.value))
 });