@protobase/ui 0.12.6 → 0.12.7

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/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/package.js

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