@mechane-ai/elements 0.4.0 → 0.5.0

package/dist/layout.js

@@ -1,19 +1,19 @@
 import { a as e } from "./src-CfDf8TY8.js";
-import { v as t, y as n } from "./src-CbYaLvhD.js";
-import { mergeProps as r } from "@base-ui/react/merge-props";
+import { i as t, n, v as r, y as i } from "./src-CbYaLvhD.js";
+import { mergeProps as a } from "@base-ui/react/merge-props";
 import "@stylexjs/stylex";
-import { createContext as i, useContext as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { PanelLeft as p, X as m } from "lucide-react";
-import { Group as h, Panel as g, Separator as _ } from "react-resizable-panels";
+import { createContext as o, useContext as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { ArrowLeft as h, PanelLeft as g, X as _ } from "lucide-react";
+import { Group as v, Panel as y, Separator as b } from "react-resizable-panels";
 // packages/layout/src/frame.stylex.ts
-var v = {
+var x = {
 	sidebarMobile: "@media (max-width:800px)",
 	sidebarDesktopQuery: "(min-width:801px)",
 	sidebarCoarse: "@media (min-width:801px) and (pointer: coarse)",
 	detailMobile: "@media (max-width:720px)",
 	toolbarCompact: "@container toolbar (max-width:600px)"
-}, y = i(null), b = {
+}, S = o(null), C = {
 	navigationControl: {
 		kjj79g: "x1nhvcw1",
 		kOIVth: "x1hnptsi",
@@ -48,47 +48,47 @@ var v = {
 		$$css: !0
 	}
 };
-function x({ header: e, footer: t, close: n, children: r }) {
-	return /* @__PURE__ */ f(u, { children: [
-		/* @__PURE__ */ f("div", {
+function w({ header: e, footer: t, close: n, children: r }) {
+	return /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ m("div", {
 			...{
 				0: { className: "x9f619 x78zum5 x1qjc9v5 xcn9na3 x2lah0s xeuugli xso031l x1q0q8m5 x1qndepd" },
 				1: { className: "x9f619 x1qjc9v5 xcn9na3 x2lah0s xeuugli xso031l x1q0q8m5 x1qndepd x1s85apg x1rhi5y4" }
 			}[e == null | 0],
-			children: [/* @__PURE__ */ d("div", {
+			children: [/* @__PURE__ */ p("div", {
 				className: "x78zum5 x6s0dn4 x98rzlu xeuugli",
 				children: e
 			}), n]
 		}),
-		/* @__PURE__ */ d("div", {
+		/* @__PURE__ */ p("div", {
 			role: "region",
 			"aria-label": "Navigation links",
 			tabIndex: 0,
 			className: "x98rzlu x2lwn1j x1odjw0f xish69e x7d1sxj x13qnu6 x9v5kkp x19rmrnh x1bqaal",
 			children: r
 		}),
-		t != null && /* @__PURE__ */ d("div", {
+		t != null && /* @__PURE__ */ p("div", {
 			className: "xr1yuqi x153jb6y",
 			children: t
 		})
 	] });
 }
-function S() {
-	return /* @__PURE__ */ d(e.Close, {
-		render: /* @__PURE__ */ d(n, {
+function T() {
+	return /* @__PURE__ */ p(e.Close, {
+		render: /* @__PURE__ */ p(i, {
 			variant: "ghost",
 			"aria-label": "Close navigation",
-			xstyle: b.close
+			xstyle: C.close
 		}),
-		children: /* @__PURE__ */ d(m, {
+		children: /* @__PURE__ */ p(_, {
 			size: 16,
 			"aria-hidden": !0
 		})
 	});
 }
-function C({ children: e, label: t = "Main" }) {
-	let n = a(y), r = n !== null && !n.isExpanded;
-	return /* @__PURE__ */ d("nav", {
+function E({ children: e, label: t = "Main" }) {
+	let n = s(S), r = n !== null && !n.isExpanded;
+	return /* @__PURE__ */ p("nav", {
 		"aria-label": t,
 		...{
 			0: { className: "x78zum5 xdt5ytf xfko13i xksvo5r" },
@@ -97,29 +97,29 @@ function C({ children: e, label: t = "Main" }) {
 		children: e
 	});
 }
-function w({ children: e, icon: n, selected: r = !1, onClick: i, ...o }) {
-	let c = a(y), l = s(), u = c !== null && !c.isExpanded;
-	return /* @__PURE__ */ d("div", {
+function D({ children: e, icon: t, selected: n = !1, onClick: i, ...a }) {
+	let o = s(S), c = l(), u = o !== null && !o.isExpanded;
+	return /* @__PURE__ */ p("div", {
 		...{
 			0: { className: "x78zum5 xeuugli x1ok0vyi" },
 			1: { className: "x78zum5 xeuugli x1ok0vyi x1r7kqkb" }
-		}[!!r | 0],
-		children: /* @__PURE__ */ f(t, {
-			...o,
+		}[!!n | 0],
+		children: /* @__PURE__ */ m(r, {
+			...a,
 			variant: "ghost",
-			"aria-current": r ? "page" : void 0,
-			"aria-labelledby": o["aria-labelledby"] ?? l,
-			title: o.title ?? (typeof e == "string" ? e : void 0),
+			"aria-current": n ? "page" : void 0,
+			"aria-labelledby": a["aria-labelledby"] ?? c,
+			title: a.title ?? (typeof e == "string" ? e : void 0),
 			onClick: (e) => {
-				i !== void 0 && i(e), !e.defaultPrevented && c !== null && c.onNavigate();
+				i !== void 0 && i(e), !e.defaultPrevented && o !== null && o.onNavigate();
 			},
-			xstyle: [b.navigationControl, u && b.collapsedButton],
-			children: [n != null && /* @__PURE__ */ d("span", {
+			xstyle: [C.navigationControl, u && C.collapsedButton],
+			children: [t != null && /* @__PURE__ */ p("span", {
 				"aria-hidden": !0,
 				className: "x3nfvp2 x6s0dn4 xl56j7k xtwnzbg x18utl2x x2lah0s",
-				children: n
-			}), /* @__PURE__ */ d("span", {
-				id: l,
+				children: t
+			}), /* @__PURE__ */ p("span", {
+				id: c,
 				...{
 					0: { className: "xeuugli xb3r6kr xlyipyv xuxw1ft" },
 					1: { className: "xeuugli xb3r6kr xlyipyv xuxw1ft x1s85apg xeod2sa" }
@@ -129,45 +129,45 @@ function w({ children: e, icon: n, selected: r = !1, onClick: i, ...o }) {
 		})
 	});
 }
-function T({ children: e, icon: t, selected: n = !1, onClick: r, className: i, style: o, ...c }) {
-	let l = a(y), u = s(), p = l !== null && !l.isExpanded, m = {
+function O({ children: e, icon: t, selected: n = !1, onClick: r, className: i, style: a, ...o }) {
+	let c = s(S), u = l(), d = c !== null && !c.isExpanded, f = {
 		0: { className: "x9f619 x78zum5 x6s0dn4 x1ok0vyi xbixft xjbqb8w x1hz01jw xtqrqnz x1778rvt xo1l8bm xvmahel xdpxx8g xkrqix3 xzro8vx x13qnu6 x9v5kkp x19rmrnh x1bqaal x1nhvcw1 x1hnptsi x15rya3k x17kqdoe x1avwmir xh8yej3 xeuugli xt970qd xksvo5r" },
 		2: { className: "x9f619 x78zum5 x6s0dn4 x1ok0vyi xbixft xjbqb8w x1hz01jw xtqrqnz x1778rvt xo1l8bm xvmahel xdpxx8g xkrqix3 xzro8vx x13qnu6 x9v5kkp x19rmrnh x1bqaal x1hnptsi x15rya3k x17kqdoe x1avwmir xh8yej3 xeuugli xt970qd xksvo5r xl56j7k x1l31gyv" },
 		1: { className: "x9f619 x78zum5 x6s0dn4 x1ok0vyi xbixft x1hz01jw xtqrqnz x1778rvt xo1l8bm xvmahel xdpxx8g xkrqix3 xzro8vx x13qnu6 x9v5kkp x19rmrnh x1bqaal x1nhvcw1 x1hnptsi x15rya3k x17kqdoe x1avwmir xh8yej3 xeuugli xt970qd xksvo5r x1r7kqkb" },
 		3: { className: "x9f619 x78zum5 x6s0dn4 x1ok0vyi xbixft x1hz01jw xtqrqnz x1778rvt xo1l8bm xvmahel xdpxx8g xkrqix3 xzro8vx x13qnu6 x9v5kkp x19rmrnh x1bqaal x1hnptsi x15rya3k x17kqdoe x1avwmir xh8yej3 xeuugli xt970qd xksvo5r xl56j7k x1l31gyv x1r7kqkb" }
-	}[!!p << 1 | !!n];
-	return /* @__PURE__ */ f("a", {
-		...c,
+	}[!!d << 1 | !!n];
+	return /* @__PURE__ */ m("a", {
+		...o,
 		"aria-current": n ? "page" : void 0,
-		"aria-labelledby": c["aria-labelledby"] ?? u,
-		title: c.title ?? (typeof e == "string" ? e : void 0),
+		"aria-labelledby": o["aria-labelledby"] ?? u,
+		title: o.title ?? (typeof e == "string" ? e : void 0),
 		onClick: (e) => {
-			if (r !== void 0 && r(e), l === null || e.button !== 0) return;
+			if (r !== void 0 && r(e), c === null || e.button !== 0) return;
 			let t = e.metaKey || e.ctrlKey, n = e.shiftKey || e.altKey;
-			t || n || l.onNavigate();
+			t || n || c.onNavigate();
 		},
-		className: [m.className, i].filter(Boolean).join(" "),
+		className: [f.className, i].filter(Boolean).join(" "),
 		style: {
-			...m.style,
-			...o
+			...f.style,
+			...a
 		},
-		children: [t != null && /* @__PURE__ */ d("span", {
+		children: [t != null && /* @__PURE__ */ p("span", {
 			"aria-hidden": !0,
 			className: "x3nfvp2 x6s0dn4 xl56j7k xtwnzbg x18utl2x x2lah0s",
 			children: t
-		}), /* @__PURE__ */ d("span", {
+		}), /* @__PURE__ */ p("span", {
 			id: u,
 			...{
 				0: { className: "xeuugli xb3r6kr xlyipyv xuxw1ft" },
 				1: { className: "xeuugli xb3r6kr xlyipyv xuxw1ft x1s85apg xeod2sa" }
-			}[!!p | 0],
+			}[!!d | 0],
 			children: e
 		})]
 	});
 }
-function E({ children: e, grow: t = !1 }) {
-	let n = a(y), r = n !== null && !n.isExpanded;
-	return /* @__PURE__ */ d("span", {
+function k({ children: e, grow: t = !1 }) {
+	let n = s(S), r = n !== null && !n.isExpanded;
+	return /* @__PURE__ */ p("span", {
 		...{
 			0: { className: "xeuugli xb3r6kr xlyipyv xuxw1ft" },
 			2: { className: "xeuugli xb3r6kr xlyipyv xuxw1ft x78zum5 x6s0dn4 x1hnptsi x98rzlu" },
@@ -177,9 +177,9 @@ function E({ children: e, grow: t = !1 }) {
 		children: e
 	});
 }
-function D({ children: e }) {
-	let t = a(y), n = t !== null && !t.isExpanded;
-	return /* @__PURE__ */ d("div", {
+function A({ children: e }) {
+	let t = s(S), n = t !== null && !t.isExpanded;
+	return /* @__PURE__ */ p("div", {
 		...{
 			0: { className: "x9f619 x78zum5 x6s0dn4 x1hnptsi x1uxtkha x11sw1hy x178xt8z x13fuv20 xhjagg4 x153jb6y xy8obcc xas2l8k xuxw1ft" },
 			1: { className: "x9f619 x78zum5 x6s0dn4 x1hnptsi x1uxtkha x178xt8z x13fuv20 xhjagg4 x153jb6y xy8obcc xas2l8k xuxw1ft xl56j7k x1l31gyv xnjsko4 xn5eaz9" }
@@ -187,33 +187,34 @@ function D({ children: e }) {
 		children: e
 	});
 }
-function O() {
-	let t = a(y);
-	return t === null ? null : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+function j() {
+	let t = s(S);
+	return t === null ? null : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
 		className: "x9f619 x2lah0s xrlepb6 xs1s249 x32b0ac xelkwwr x78zum5 x1ykma7f",
-		children: /* @__PURE__ */ d(n, {
+		children: /* @__PURE__ */ p(i, {
 			ref: t.navigationToggleRef,
 			variant: "ghost",
 			"aria-label": t.isExpanded ? "Collapse navigation" : "Expand navigation",
 			"aria-controls": t.sidebarId,
 			"aria-expanded": t.isExpanded,
 			onClick: t.onToggle,
-			xstyle: b.toggle,
-			children: /* @__PURE__ */ d(p, {
+			xstyle: C.toggle,
+			children: /* @__PURE__ */ p(g, {
 				size: 16,
 				"aria-hidden": !0
 			})
 		})
-	}), /* @__PURE__ */ d("div", {
+	}), /* @__PURE__ */ p("div", {
 		className: "x9f619 x2lah0s xrlepb6 xs1s249 x32b0ac xelkwwr x1s85apg x1rhi5y4",
-		children: /* @__PURE__ */ d(e.Trigger, {
+		children: /* @__PURE__ */ p(e.Trigger, {
+			ref: t.mobileNavigationToggleRef,
 			handle: t.drawerHandle,
-			render: /* @__PURE__ */ d(n, {
+			render: /* @__PURE__ */ p(i, {
 				variant: "ghost",
 				"aria-label": "Open navigation",
-				xstyle: b.toggle
+				xstyle: C.toggle
 			}),
-			children: /* @__PURE__ */ d(p, {
+			children: /* @__PURE__ */ p(g, {
 				size: 16,
 				"aria-hidden": !0
 			})
@@ -221,62 +222,63 @@ function O() {
 	})] });
 }
 // packages/layout/src/app-shell.tsx
-var k = { drawer: {
+var M = { drawer: {
 	kzqmXN: "x68ju84",
 	ks0D6T: "x1recik0",
 	$$css: !0
 } };
-function A({ sidebarHeader: t, sidebar: n, footer: r, children: i }) {
-	let [a, u] = l(!0), [p, m] = l(!1), [h] = l(() => e.createHandle()), g = s(), _ = c(null);
-	return o(() => {
-		let e = globalThis.matchMedia(v.sidebarDesktopQuery);
+function N({ sidebarHeader: t, sidebar: n, footer: r, children: i, mainId: a = "main" }) {
+	let [o, s] = d(!0), [f, h] = d(!1), [g] = d(() => e.createHandle()), _ = l(), v = u(null), y = u(null);
+	return c(() => {
+		let e = globalThis.matchMedia(x.sidebarDesktopQuery);
 		function t() {
-			e.matches && m(!1);
+			e.matches && h(!1);
 		}
 		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
-	}, []), /* @__PURE__ */ f(y.Provider, {
+	}, []), /* @__PURE__ */ m(S.Provider, {
 		value: {
-			isExpanded: a,
-			sidebarId: g,
-			drawerHandle: h,
-			navigationToggleRef: _,
-			onToggle: () => u((e) => !e),
-			onNavigate: () => m(!1)
+			isExpanded: o,
+			sidebarId: _,
+			drawerHandle: g,
+			navigationToggleRef: v,
+			mobileNavigationToggleRef: y,
+			onToggle: () => s((e) => !e),
+			onNavigate: () => h(!1)
 		},
-		children: [/* @__PURE__ */ f("div", {
+		children: [/* @__PURE__ */ m("div", {
 			className: "x9f619 x1ov3xa9 x78zum5 xpvm0e4 xbixft x1hz01jw xtqrqnz x1778rvt xvmahel",
-			children: [/* @__PURE__ */ d("aside", {
-				id: g,
+			children: [/* @__PURE__ */ p("aside", {
+				id: _,
 				"aria-label": "Navigation",
 				...{
 					0: { className: "x9f619 x78zum5 x1ykma7f xdt5ytf xs1s249 x32b0ac xelkwwr xpvm0e4 x7wzq59 x13vifvy xtdtrs8 x68ju84 x2lah0s x2lwn1j xeuugli" },
 					1: { className: "x9f619 x78zum5 x1ykma7f xdt5ytf xs1s249 x32b0ac xelkwwr xpvm0e4 x7wzq59 x13vifvy xtdtrs8 x2lah0s x2lwn1j xeuugli xrlepb6" }
-				}[!a | 0],
-				children: /* @__PURE__ */ d(x, {
+				}[!o | 0],
+				children: /* @__PURE__ */ p(w, {
 					header: t,
 					footer: r,
 					children: n
 				})
-			}), /* @__PURE__ */ d("main", {
-				id: "main",
+			}), /* @__PURE__ */ p("main", {
+				id: a,
 				tabIndex: -1,
 				className: "xeuugli x98rzlu",
 				children: i
 			})]
-		}), /* @__PURE__ */ d(e.Root, {
-			handle: h,
-			open: p,
-			onOpenChange: m,
-			children: /* @__PURE__ */ f(e.Portal, { children: [/* @__PURE__ */ d(e.Backdrop, {}), /* @__PURE__ */ d(e.Viewport, { children: /* @__PURE__ */ f(e.Popup, {
-				xstyle: k.drawer,
-				finalFocus: () => !globalThis.matchMedia(v.sidebarDesktopQuery).matches || _.current,
-				children: [/* @__PURE__ */ d(e.Title, {
+		}), /* @__PURE__ */ p(e.Root, {
+			handle: g,
+			open: f,
+			onOpenChange: h,
+			children: /* @__PURE__ */ m(e.Portal, { children: [/* @__PURE__ */ p(e.Backdrop, {}), /* @__PURE__ */ p(e.Viewport, { children: /* @__PURE__ */ m(e.Popup, {
+				xstyle: M.drawer,
+				finalFocus: () => globalThis.matchMedia(x.sidebarDesktopQuery).matches ? v.current : y.current,
+				children: [/* @__PURE__ */ p(e.Title, {
 					visuallyHidden: !0,
 					children: "Navigation"
-				}), /* @__PURE__ */ d(x, {
+				}), /* @__PURE__ */ p(w, {
 					header: t,
 					footer: r,
-					close: /* @__PURE__ */ d(S, {}),
+					close: /* @__PURE__ */ p(T, {}),
 					children: n
 				})]
 			}) })] })
@@ -284,14 +286,14 @@ function A({ sidebarHeader: t, sidebar: n, footer: r, children: i }) {
 	});
 }
 // packages/layout/src/detail-page.tsx
-function j({ children: e }) {
-	return /* @__PURE__ */ d("div", {
+function P({ children: e }) {
+	return /* @__PURE__ */ p("div", {
 		className: "x9f619 x13na7z x96idz6 x9g60mw xeuugli xvueqy4 xnjsko4 x10gdey3 x14y0u4g x1foqgtu x1uwsqpk x14oio8y",
 		children: e
 	});
 }
 // packages/layout/src/page-toolbar.tsx
-var M = { action: {
+var F = { action: {
 	kZKoxP: "x5yr21d",
 	k7Eaqz: "x167izq3",
 	k8WAf4: "xt970qd",
@@ -300,80 +302,152 @@ var M = { action: {
 	kOIVth: "x1hnptsi",
 	$$css: !0
 } };
-function N({ title: e, actions: t, breadcrumb: n = !1, navigation: r = !0 }) {
-	return /* @__PURE__ */ f("header", {
-		className: "x9f619 x78zum5 x12h1iku x14ut1dr x1qjc9v5 xcn9na3 xso031l x1q0q8m5 x1qndepd xpvm0e4 xbixft x1hz01jw x12myhf4 x1778rvt xvmahel xeuugli",
+function I({ title: e, actions: t, breadcrumb: n = !1, navigation: r = !0 }) {
+	return /* @__PURE__ */ m("div", {
+		className: "x9f619 x78zum5 x12h1iku x14ut1dr x1qjc9v5 xcn9na3 x2lah0s xso031l x1q0q8m5 x1qndepd xpvm0e4 xbixft x1hz01jw x12myhf4 x1778rvt xvmahel xeuugli",
 		children: [
-			r && /* @__PURE__ */ d(O, {}),
-			/* @__PURE__ */ d(n ? "nav" : "h1", {
+			r && /* @__PURE__ */ p(j, {}),
+			/* @__PURE__ */ p(n ? "nav" : "h1", {
+				tabIndex: n ? void 0 : -1,
 				"aria-label": n ? "Breadcrumb" : void 0,
 				className: "x78zum5 x6s0dn4 x1hnptsi x1m92p3w xeuugli xs83m0k x1ghz6dp x1qlqyl8 xo1l8bm",
-				children: /* @__PURE__ */ d("span", {
+				children: /* @__PURE__ */ p("span", {
 					className: "xeuugli xb3r6kr xlyipyv xuxw1ft",
 					children: e
 				})
 			}),
-			t != null && /* @__PURE__ */ d("div", {
+			t != null && /* @__PURE__ */ p("div", {
 				className: "x78zum5 x1qjc9v5 xeuugli x2lah0s x8x9d4c",
 				children: t
 			})
 		]
 	});
 }
-function P({ icon: e, children: n, ...r }) {
+function L({ icon: e, children: t, ...n }) {
 	let i = e != null;
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ p("div", {
 		className: "x9f619 x78zum5 x1qjc9v5 xeuugli xe0pwq x19ypqd9 x1l3ounx",
-		children: /* @__PURE__ */ f(t, {
-			...r,
+		children: /* @__PURE__ */ m(r, {
+			...n,
 			variant: "ghost",
 			size: "md",
-			"aria-label": r["aria-label"] ?? (typeof n == "string" ? n : void 0),
-			xstyle: M.action,
-			children: [e, i ? /* @__PURE__ */ d("span", {
+			"aria-label": n["aria-label"] ?? (typeof t == "string" ? t : void 0),
+			xstyle: F.action,
+			children: [e, i ? /* @__PURE__ */ p("span", {
 				className: "xeuugli xb3r6kr xlyipyv xuxw1ft xt0psk2 xlllsrz",
-				children: n
-			}) : n]
+				children: t
+			}) : t]
+		})
+	});
+}
+// packages/layout/src/record-page.tsx
+function R({ children: e }) {
+	return /* @__PURE__ */ p("div", {
+		className: "x78zum5 xdt5ytf xeuugli xbixft x1hz01jw xtqrqnz x1778rvt xvmahel",
+		children: e
+	});
+}
+function z({ backLabel: e, backHref: t, onBack: n, actions: r, navigation: i = !0 }) {
+	return /* @__PURE__ */ p(I, {
+		breadcrumb: !0,
+		navigation: i,
+		actions: r,
+		title: /* @__PURE__ */ m("a", {
+			href: t,
+			className: "x3nfvp2 x6s0dn4 x1hnptsi xid9utz xbixft xkrqix3 x9p3ypd x13qnu6 x9v5kkp x19rmrnh x1bqaal",
+			onClick: (e) => {
+				if (n === void 0 || e.defaultPrevented || e.button !== 0) return;
+				let t = e.metaKey || e.ctrlKey, r = e.shiftKey || e.altKey;
+				t || r || (e.preventDefault(), n());
+			},
+			children: [/* @__PURE__ */ p(h, {
+				size: 16,
+				"aria-hidden": !0
+			}), e]
 		})
 	});
 }
+function B({ children: e }) {
+	return /* @__PURE__ */ p(P, { children: /* @__PURE__ */ p("div", {
+		className: "x78zum5 x1a02dak x1cy8zhl x1m6b44x xeuugli",
+		children: e
+	}) });
+}
+function V({ children: e }) {
+	return /* @__PURE__ */ p("div", {
+		className: "x78zum5 xdt5ytf x1ewej1i x1iyjqo2 x1j825kq xeuugli",
+		children: e
+	});
+}
+function H({ title: e, description: r, icon: i, titleRef: a }) {
+	return /* @__PURE__ */ m("header", {
+		className: "xrvj5dj x1n8ia3y xeuugli",
+		children: [/* @__PURE__ */ m("div", {
+			className: "x78zum5 x6s0dn4 x1n8ia3y xeuugli",
+			children: [i != null && /* @__PURE__ */ p("span", {
+				"aria-hidden": !0,
+				className: "x3nfvp2 x6s0dn4 x2lah0s",
+				children: i
+			}), /* @__PURE__ */ p(n, {
+				ref: a,
+				tabIndex: -1,
+				children: e
+			})]
+		}), r != null && /* @__PURE__ */ p(t, { children: r })]
+	});
+}
+function U({ children: e, label: t = "Properties" }) {
+	return /* @__PURE__ */ p("aside", {
+		"aria-label": t,
+		className: "x78zum5 xdt5ytf x1irul0l x1iyjqo2 x1j825kq xeuugli",
+		children: e
+	});
+}
+var W = {
+	Root: R,
+	Toolbar: z,
+	Body: B,
+	Content: V,
+	Header: H,
+	Aside: U
+};
 // packages/layout/src/resizable.tsx
-function F({ orientation: e = "horizontal", initialSizes: t, onSizesChange: n, disabled: i, ref: a, ...o }) {
-	return /* @__PURE__ */ d(h, {
+function G({ orientation: e = "horizontal", initialSizes: t, onSizesChange: n, disabled: r, ref: i, ...o }) {
+	return /* @__PURE__ */ p(v, {
 		orientation: e,
 		defaultLayout: t,
 		onLayoutChanged: (e, t) => {
 			t.isUserInteraction && n?.(e);
 		},
-		disabled: i,
-		elementRef: a,
+		disabled: r,
+		elementRef: i,
 		resizeTargetMinimumSize: {
 			coarse: 44,
 			fine: 12
 		},
-		...r({ className: "xeuugli x2lwn1j xh8yej3 x5yr21d" }, o)
+		...a({ className: "xeuugli x2lwn1j xh8yej3 x5yr21d" }, o)
 	});
 }
-function I({ id: e, initialSizePercent: t, minimumSizePercent: n = 10, maximumSizePercent: i = 100, collapsible: a = !1, ref: o, ...s }) {
-	return /* @__PURE__ */ d(g, {
+function K({ id: e, initialSizePercent: t, minimumSizePercent: n = 10, maximumSizePercent: r = 100, collapsible: i = !1, ref: o, ...s }) {
+	return /* @__PURE__ */ p(y, {
 		id: e,
 		defaultSize: t === void 0 ? void 0 : `${t}%`,
 		minSize: `${n}%`,
-		maxSize: `${i}%`,
-		collapsible: a,
+		maxSize: `${r}%`,
+		collapsible: i,
 		elementRef: o,
-		...r({ className: "xeuugli x2lwn1j xysyzu8" }, s)
+		...a({ className: "xeuugli x2lwn1j xysyzu8" }, s)
 	});
 }
-function L({ ref: e, ...t }) {
-	return /* @__PURE__ */ d(_, {
+function q({ ref: e, ...t }) {
+	return /* @__PURE__ */ p(b, {
 		elementRef: e,
-		...r({ className: "x1fa40ue x1i1rx1s xgc0pbm xir5lan xfaai28 x1rbdpqn x8wp5i9 x13qnu6 x9v5kkp x19rmrnh x13iak60" }, t)
+		...a({ className: "x1fa40ue x1i1rx1s xgc0pbm xir5lan xfaai28 x1rbdpqn x8wp5i9 x13qnu6 x9v5kkp x19rmrnh x13iak60" }, t)
 	});
 }
-var R = {
-	Root: F,
-	Pane: I,
-	Handle: L
+var J = {
+	Root: G,
+	Pane: K,
+	Handle: q
 };
-export { A as AppShell, j as DetailPage, C as Navigation, w as NavigationItem, T as NavigationLink, N as PageToolbar, R as Resizable, D as SidebarFooter, E as SidebarLabel, P as ToolbarAction };
+export { N as AppShell, P as DetailPage, E as Navigation, D as NavigationItem, O as NavigationLink, I as PageToolbar, W as RecordPage, J as Resizable, A as SidebarFooter, k as SidebarLabel, L as ToolbarAction };

package/dist/navigation/commands.js

@@ -1,4 +1,4 @@
-import { c as e } from "../src-CvpS9XIR.js";
+import { l as e } from "../src-CjnbzSgq.js";
 import { s as t } from "../src-CfDf8TY8.js";
 import { n } from "../navigation-yxK3iQXo.js";
 import "@stylexjs/stylex";

package/dist/navigation.js

@@ -4,12 +4,37 @@ import { mergeProps as r } from "@base-ui/react/merge-props";
 import "@stylexjs/stylex";
 import { jsx as i } from "react/jsx-runtime";
 import { Tabs as a } from "@base-ui/react/tabs";
+// packages/navigation/src/page-navigation.tsx
+function o({ items: e, selectedId: t, onNavigate: n, label: r = "Page sections", embedded: a = !1 }) {
+	return /* @__PURE__ */ i("nav", {
+		"aria-label": r,
+		tabIndex: 0,
+		...{
+			0: { className: "x78zum5 x1j825kq xeuugli xw2csxc xso031l x1q0q8m5 x1qndepd x1hz01jw x12myhf4 x1778rvt xvmahel x13qnu6 x9v5kkp x19rmrnh x1bqaal" },
+			1: { className: "x78zum5 x1j825kq xeuugli xw2csxc x1q0q8m5 x1qndepd x1hz01jw x12myhf4 x1778rvt xvmahel x13qnu6 x9v5kkp x19rmrnh x1bqaal x1qhh985" }
+		}[!!a | 0],
+		children: e.map((e) => /* @__PURE__ */ i("a", {
+			href: e.href,
+			"aria-current": e.id === t ? "page" : void 0,
+			...{
+				0: { className: "x9f619 x3nfvp2 x6s0dn4 x2lah0s xid9utz xn9t2bk xlxy82 x1q0q8m5 x16stqrj xkrqix3 xuxw1ft x153jb6y x1mkgjtd x13qnu6 x9v5kkp x19rmrnh x1bqaal" },
+				1: { className: "x9f619 x3nfvp2 x6s0dn4 x2lah0s xid9utz xn9t2bk xlxy82 x1q0q8m5 xkrqix3 xuxw1ft x1mkgjtd x13qnu6 x9v5kkp x19rmrnh x1bqaal xbixft xdjqune" }
+			}[e.id === t | 0],
+			onClick: (t) => {
+				if (n === void 0 || t.defaultPrevented || t.button !== 0) return;
+				let r = t.metaKey || t.ctrlKey, i = t.shiftKey || t.altKey;
+				r || i || (t.preventDefault(), n(e.id));
+			},
+			children: e.label
+		}, e.id))
+	});
+}
 // packages/navigation/src/skip-link.tsx
-function o(e) {
+function s(e) {
 	return /* @__PURE__ */ i("a", { ...r({ className: "xixxii4 x1ridm32 x12hha37 xkwijxb x174j0rr x1mvvolr x9f619 xvv7f4i x1ok0vyi xpvm0e4 xbixft x1hz01jw xtqrqnz x1778rvt xvmahel xujl8zx x1wfrlr2 x1tkds87 x1de710j x1gnsi0 x1cm8ssg" }, e) });
 }
 // packages/navigation/src/tabs.tsx
-function s({ className: e, style: t, ...r }) {
+function c({ className: e, style: t, ...r }) {
 	return /* @__PURE__ */ i(a.Root, {
 		...r,
 		...n({
@@ -19,7 +44,7 @@ function s({ className: e, style: t, ...r }) {
 		})
 	});
 }
-function c({ className: e, style: t, ...r }) {
+function l({ className: e, style: t, ...r }) {
 	return /* @__PURE__ */ i(a.List, {
 		...r,
 		...n({
@@ -29,7 +54,7 @@ function c({ className: e, style: t, ...r }) {
 		})
 	});
 }
-function l({ className: e, style: t, ...r }) {
+function u({ className: e, style: t, ...r }) {
 	return /* @__PURE__ */ i(a.Tab, {
 		...r,
 		...n({
@@ -39,7 +64,7 @@ function l({ className: e, style: t, ...r }) {
 		})
 	});
 }
-function u({ className: e, style: t, ...r }) {
+function d({ className: e, style: t, ...r }) {
 	return /* @__PURE__ */ i(a.Panel, {
 		...r,
 		...n({
@@ -49,10 +74,10 @@ function u({ className: e, style: t, ...r }) {
 		})
 	});
 }
-var d = {
-	Root: s,
-	List: c,
-	Tab: l,
-	Panel: u
+var f = {
+	Root: c,
+	List: l,
+	Tab: u,
+	Panel: d
 };
-export { t as Breadcrumb, e as Kbd, o as SkipLink, d as Tabs };
+export { t as Breadcrumb, e as Kbd, o as PageNavigation, s as SkipLink, f as Tabs };

package/dist/packages/collections/src/collection-scroll.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export type CollectionEndProps = {
+    readonly status: 'ready' | 'error';
+    readonly onLoadMore: () => void;
+    readonly message?: string;
+} | {
+    readonly status: 'loading' | 'complete';
+    readonly onLoadMore?: never;
+    readonly message?: string;
+};
+export declare function CollectionEnd(props: CollectionEndProps): ReactNode;
+export type CollectionScrollProps = {
+    readonly children: ReactNode;
+    readonly endContent?: ReactNode;
+    readonly onEndReached?: (() => void) | undefined;
+    readonly fill?: boolean;
+    readonly endPosition?: 'start' | 'end';
+};
+export declare function CollectionScroll({ children, endContent, onEndReached, fill, endPosition, }: CollectionScrollProps): ReactNode;