@object-ui/layout 3.3.0 → 3.3.1

package/dist/index.js

@@ -1,17 +1,17 @@
 import { ComponentRegistry as e } from "@object-ui/core";
 import t, { createContext as n, memo as r, useCallback as i, useContext as a, useEffect as o, useLayoutEffect as s, useMemo as c, useReducer as l, useRef as u, useState as d } from "react";
-import { Badge as f, Collapsible as p, CollapsibleContent as m, CollapsibleTrigger as h, Input as g, Separator as _, Sidebar as v, SidebarContent as y, SidebarFooter as b, SidebarGroup as x, SidebarGroupContent as S, SidebarGroupLabel as C, SidebarHeader as w, SidebarInput as T, SidebarInset as E, SidebarMenu as D, SidebarMenuAction as ee, SidebarMenuButton as O, SidebarMenuItem as k, SidebarMenuSub as A, SidebarMenuSubButton as te, SidebarMenuSubItem as ne, SidebarProvider as j, SidebarTrigger as re, cn as M } from "@object-ui/components";
-import { Link as N, NavLink as ie, useLocation as P } from "react-router-dom";
+import { Badge as f, Collapsible as p, CollapsibleContent as m, CollapsibleTrigger as h, Input as g, Separator as _, Sidebar as v, SidebarContent as y, SidebarFooter as b, SidebarGroup as x, SidebarGroupContent as S, SidebarGroupLabel as C, SidebarHeader as w, SidebarInput as T, SidebarInset as E, SidebarMenu as D, SidebarMenuAction as ee, SidebarMenuButton as O, SidebarMenuItem as k, SidebarMenuSub as A, SidebarMenuSubButton as te, SidebarMenuSubItem as ne, SidebarProvider as j, cn as M } from "@object-ui/components";
+import { Link as N, NavLink as P, useLocation as re } from "react-router-dom";
 import * as F from "lucide-react";
-import { ChevronRight as ae, Search as oe } from "lucide-react";
-import { createPortal as I, unstable_batchedUpdates as se } from "react-dom";
-import { menuItemToNavigationItem as ce } from "@object-ui/types";
-import { SchemaRenderer as le } from "@object-ui/react";
+import { ChevronRight as ie, Search as ae } from "lucide-react";
+import { createPortal as I, unstable_batchedUpdates as oe } from "react-dom";
+import { menuItemToNavigationItem as L } from "@object-ui/types";
+import { SchemaRenderer as se } from "@object-ui/react";
 //#region \0rolldown/runtime.js
-var L = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), R = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+var R = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), ce = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
 	if (typeof require < "u") return require.apply(this, arguments);
 	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), ue = /* @__PURE__ */ L(((e) => {
+}), z = /* @__PURE__ */ R(((e) => {
 	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
 	function r(e, n, r) {
 		var i = null;
@@ -26,7 +26,7 @@ var L = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), R
 		};
 	}
 	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), z = /* @__PURE__ */ L(((e) => {
+})), le = /* @__PURE__ */ R(((e) => {
 	process.env.NODE_ENV !== "production" && (function() {
 		function t(e) {
 			if (e == null) return null;
@@ -157,7 +157,7 @@ var L = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), R
 				var m = Object.keys(n).filter(function(e) {
 					return e !== "key";
 				});
-				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", N[p + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, p, m, p), N[p + o] = !0);
+				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", P[p + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, p, m, p), P[p + o] = !0);
 			}
 			if (p = null, i !== void 0 && (r(i), p = "" + i), s(n) && (r(n.key), p = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
 			else i = n;
@@ -169,41 +169,41 @@ var L = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), R
 		function p(e) {
 			return typeof e == "object" && !!e && e.$$typeof === h;
 		}
-		var m = R("react"), h = Symbol.for("react.transitional.element"), g = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), b = Symbol.for("react.consumer"), x = Symbol.for("react.context"), S = Symbol.for("react.forward_ref"), C = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), O = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, k = Object.prototype.hasOwnProperty, A = Array.isArray, te = console.createTask ? console.createTask : function() {
+		var m = ce("react"), h = Symbol.for("react.transitional.element"), g = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), b = Symbol.for("react.consumer"), x = Symbol.for("react.context"), S = Symbol.for("react.forward_ref"), C = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), O = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, k = Object.prototype.hasOwnProperty, A = Array.isArray, te = console.createTask ? console.createTask : function() {
 			return null;
 		};
 		m = { react_stack_bottom_frame: function(e) {
 			return e();
 		} };
-		var ne, j = {}, re = m.react_stack_bottom_frame.bind(m, o)(), M = te(i(o)), N = {};
+		var ne, j = {}, M = m.react_stack_bottom_frame.bind(m, o)(), N = te(i(o)), P = {};
 		e.Fragment = _, e.jsx = function(e, t, n) {
 			var r = 1e4 > O.recentlyCreatedOwnerStacks++;
-			return d(e, t, n, !1, r ? Error("react-stack-top-frame") : re, r ? te(i(e)) : M);
+			return d(e, t, n, !1, r ? Error("react-stack-top-frame") : M, r ? te(i(e)) : N);
 		}, e.jsxs = function(e, t, n) {
 			var r = 1e4 > O.recentlyCreatedOwnerStacks++;
-			return d(e, t, n, !0, r ? Error("react-stack-top-frame") : re, r ? te(i(e)) : M);
+			return d(e, t, n, !0, r ? Error("react-stack-top-frame") : M, r ? te(i(e)) : N);
 		};
 	})();
-})), B = (/* @__PURE__ */ L(((e, t) => {
-	process.env.NODE_ENV === "production" ? t.exports = ue() : t.exports = z();
+})), B = (/* @__PURE__ */ R(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = z() : t.exports = le();
 })))();
-function V({ title: e, description: t, action: n, className: r, children: i, ...a }) {
+function ue({ title: e, description: t, action: n, className: r, children: i, ...a }) {
 	return /* @__PURE__ */ (0, B.jsx)("div", {
 		className: M("flex flex-col gap-4 pb-4 md:pb-8", r),
 		...a,
 		children: /* @__PURE__ */ (0, B.jsxs)("div", {
-			className: "flex items-center justify-between gap-4",
+			className: "flex flex-wrap items-end gap-x-4 gap-y-2",
 			children: [/* @__PURE__ */ (0, B.jsxs)("div", {
-				className: "flex flex-col gap-1",
+				className: "flex flex-col gap-1 min-w-0",
 				children: [/* @__PURE__ */ (0, B.jsx)("h1", {
-					className: "text-2xl font-bold tracking-tight md:text-3xl",
+					className: "text-2xl font-bold tracking-tight md:text-3xl truncate",
 					children: e
 				}), t && /* @__PURE__ */ (0, B.jsx)("p", {
 					className: "text-sm text-muted-foreground",
 					children: t
 				})]
 			}), (n || i) && /* @__PURE__ */ (0, B.jsxs)("div", {
-				className: "flex items-center gap-2",
+				className: "flex items-center gap-2 ml-auto sm:ml-0",
 				children: [n, i]
 			})]
 		})
@@ -211,7 +211,7 @@ function V({ title: e, description: t, action: n, className: r, children: i, ...
 }
 //#endregion
 //#region src/AppShell.tsx
-function de(e) {
+function V(e) {
 	let t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
 	if (!t) return null;
 	let n = parseInt(t[1], 16) / 255, r = parseInt(t[2], 16) / 255, i = parseInt(t[3], 16) / 255, a = Math.max(n, r, i), o = Math.min(n, r, i), s = 0, c = 0, l = (a + o) / 2;
@@ -231,23 +231,32 @@ function de(e) {
 	}
 	return `${Math.round(s * 360)} ${Math.round(c * 100)}% ${Math.round(l * 100)}%`;
 }
+function de(e) {
+	let t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+	if (!t) return "0 0% 100%";
+	let n = (e) => {
+		let t = e / 255;
+		return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+	}, r = n(parseInt(t[1], 16)), i = n(parseInt(t[2], 16)), a = n(parseInt(t[3], 16));
+	return .2126 * r + .7152 * i + .0722 * a > .6 ? "222 47% 11%" : "0 0% 100%";
+}
 function fe(e, t) {
 	o(() => {
 		let n = document.documentElement;
 		if (e?.primaryColor) {
-			let t = de(e.primaryColor);
-			t && (n.style.setProperty("--brand-primary", e.primaryColor), n.style.setProperty("--brand-primary-hsl", t));
-		} else n.style.removeProperty("--brand-primary"), n.style.removeProperty("--brand-primary-hsl");
+			let t = V(e.primaryColor);
+			t && (n.style.setProperty("--brand-primary", e.primaryColor), n.style.setProperty("--brand-primary-hsl", t), n.style.setProperty("--primary", t), n.style.setProperty("--primary-foreground", de(e.primaryColor)), n.style.setProperty("--ring", t), n.style.setProperty("--sidebar-primary", t), n.style.setProperty("--sidebar-ring", t));
+		} else n.style.removeProperty("--brand-primary"), n.style.removeProperty("--brand-primary-hsl"), n.style.removeProperty("--primary"), n.style.removeProperty("--primary-foreground"), n.style.removeProperty("--ring"), n.style.removeProperty("--sidebar-primary"), n.style.removeProperty("--sidebar-ring");
 		if (e?.accentColor) {
-			let t = de(e.accentColor);
-			t && (n.style.setProperty("--brand-accent", e.accentColor), n.style.setProperty("--brand-accent-hsl", t));
-		} else n.style.removeProperty("--brand-accent"), n.style.removeProperty("--brand-accent-hsl");
+			let t = V(e.accentColor);
+			t && (n.style.setProperty("--brand-accent", e.accentColor), n.style.setProperty("--brand-accent-hsl", t), n.style.setProperty("--accent", t), n.style.setProperty("--accent-foreground", de(e.accentColor)));
+		} else n.style.removeProperty("--brand-accent"), n.style.removeProperty("--brand-accent-hsl"), n.style.removeProperty("--accent"), n.style.removeProperty("--accent-foreground");
 		if (e?.favicon) {
 			let t = document.querySelector("#favicon") || document.querySelector("link[rel=\"icon\"]");
 			t && (t.href = e.favicon);
 		}
 		return t && (document.title = t), () => {
-			n.style.removeProperty("--brand-primary"), n.style.removeProperty("--brand-primary-hsl"), n.style.removeProperty("--brand-accent"), n.style.removeProperty("--brand-accent-hsl");
+			n.style.removeProperty("--brand-primary"), n.style.removeProperty("--brand-primary-hsl"), n.style.removeProperty("--brand-accent"), n.style.removeProperty("--brand-accent-hsl"), n.style.removeProperty("--primary"), n.style.removeProperty("--primary-foreground"), n.style.removeProperty("--ring"), n.style.removeProperty("--sidebar-primary"), n.style.removeProperty("--sidebar-ring"), n.style.removeProperty("--accent"), n.style.removeProperty("--accent-foreground");
 		};
 	}, [
 		e?.primaryColor,
@@ -259,17 +268,20 @@ function fe(e, t) {
 function pe({ sidebar: e, navbar: t, children: n, className: r, defaultOpen: i = !0, branding: a }) {
 	return fe(a, a?.title), /* @__PURE__ */ (0, B.jsxs)(j, {
 		defaultOpen: i,
-		children: [e, /* @__PURE__ */ (0, B.jsxs)(E, { children: [/* @__PURE__ */ (0, B.jsxs)("header", {
-			className: "flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4",
-			children: [
-				/* @__PURE__ */ (0, B.jsx)(re, { className: "-ml-1 hidden md:inline-flex" }),
-				/* @__PURE__ */ (0, B.jsx)("div", { className: "w-px h-4 bg-border mx-1 sm:mx-2 hidden md:block" }),
-				t
-			]
-		}), /* @__PURE__ */ (0, B.jsx)("main", {
-			className: M("flex-1 min-w-0 overflow-auto p-3 sm:p-4 md:p-6", r),
-			children: n
-		})] })]
+		className: "!flex-col",
+		children: [/* @__PURE__ */ (0, B.jsx)("header", {
+			className: "sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4",
+			children: t
+		}), /* @__PURE__ */ (0, B.jsxs)("div", {
+			className: "flex flex-1 min-h-0 w-full",
+			children: [e, /* @__PURE__ */ (0, B.jsx)(E, {
+				className: "min-w-0",
+				children: /* @__PURE__ */ (0, B.jsx)("main", {
+					className: M("flex-1 min-w-0 overflow-auto p-3 sm:p-4 md:p-6", r),
+					children: n
+				})
+			})]
+		})]
 	});
 }
 //#endregion
@@ -1883,24 +1895,24 @@ var Kn = /* @__PURE__ */ r(function(e) {
 		id: w,
 		data: ee?.data ?? Mn,
 		rect: O
-	}, [w, ee]), A = u(null), [te, ne] = d(null), [j, re] = d(null), M = Te(g, Object.values(g)), N = Ae("DndDescribedBy", n), ie = c(() => D.getEnabled(), [D]), P = Hn(m), { droppableRects: F, measureDroppableContainers: ae, measuringScheduled: oe } = fn(ie, {
+	}, [w, ee]), A = u(null), [te, ne] = d(null), [j, M] = d(null), N = Te(g, Object.values(g)), P = Ae("DndDescribedBy", n), re = c(() => D.getEnabled(), [D]), F = Hn(m), { droppableRects: ie, measureDroppableContainers: ae, measuringScheduled: I } = fn(re, {
 		dragging: C,
 		dependencies: [E.x, E.y],
-		config: P.droppable
-	}), I = sn(T, w), ce = c(() => j ? Le(j) : null, [j]), le = Pe(), L = mn(I, P.draggable.measure);
+		config: F.droppable
+	}), L = sn(T, w), se = c(() => j ? Le(j) : null, [j]), R = Pe(), ce = mn(L, F.draggable.measure);
 	Un({
 		activeNode: w == null ? null : T.get(w),
-		config: le.layoutShiftCompensation,
-		initialRect: L,
-		measure: P.draggable.measure
+		config: R.layoutShiftCompensation,
+		initialRect: ce,
+		measure: F.draggable.measure
 	});
-	let R = vn(I, P.draggable.measure, L), ue = vn(I ? I.parentElement : null), z = u({
+	let z = vn(L, F.draggable.measure, ce), le = vn(L ? L.parentElement : null), B = u({
 		activatorEvent: null,
 		active: null,
-		activeNode: I,
+		activeNode: L,
 		collisionRect: null,
 		collisions: null,
-		droppableRects: F,
+		droppableRects: ie,
 		draggableNodes: T,
 		draggingNode: null,
 		draggingNodeRect: null,
@@ -1908,7 +1920,7 @@ var Kn = /* @__PURE__ */ r(function(e) {
 		over: null,
 		scrollableAncestors: [],
 		scrollAdjustedTranslate: null
-	}), B = D.getNodeFor(z.current.over?.id), V = An({ measure: P.dragOverlay.measure }), de = V.nodeRef.current ?? I, fe = C ? V.rect ?? R : null, pe = !!(V.nodeRef.current && V.rect), me = yn(pe ? null : R), he = En(de ? U(de) : null), H = xn(C ? B ?? I : null), ge = On(H), _e = Vn(h, {
+	}), ue = D.getNodeFor(B.current.over?.id), V = An({ measure: F.dragOverlay.measure }), de = V.nodeRef.current ?? L, fe = C ? V.rect ?? z : null, pe = !!(V.nodeRef.current && V.rect), me = yn(pe ? null : z), he = En(de ? U(de) : null), H = xn(C ? ue ?? L : null), ge = On(H), _e = Vn(h, {
 		transform: {
 			x: E.x - me.x,
 			y: E.y - me.y,
@@ -1917,21 +1929,21 @@ var Kn = /* @__PURE__ */ r(function(e) {
 		},
 		activatorEvent: j,
 		active: k,
-		activeNodeRect: R,
-		containerNodeRect: ue,
+		activeNodeRect: z,
+		containerNodeRect: le,
 		draggingNodeRect: fe,
-		over: z.current.over,
+		over: B.current.over,
 		overlayNodeRect: V.rect,
 		scrollableAncestors: H,
 		scrollableAncestorRects: ge,
 		windowRect: he
-	}), ve = ce ? Me(ce, E) : null, ye = Sn(H), be = Cn(ye), xe = Cn(ye, [R]), W = Me(_e, be), G = fe ? dt(fe, _e) : null, Se = k && G ? p({
+	}), ve = se ? Me(se, E) : null, ye = Sn(H), be = Cn(ye), xe = Cn(ye, [z]), W = Me(_e, be), G = fe ? dt(fe, _e) : null, Se = k && G ? p({
 		active: k,
 		collisionRect: G,
-		droppableRects: F,
-		droppableContainers: ie,
+		droppableRects: ie,
+		droppableContainers: re,
 		pointerCoordinates: ve
-	}) : null, Ce = rt(Se, "id"), [q, we] = d(null), Ee = ct(pe ? _e : Me(_e, xe), q?.rect ?? null, R), De = u(null), Oe = i((e, t) => {
+	}) : null, Ce = rt(Se, "id"), [q, we] = d(null), Ee = ct(pe ? _e : Me(_e, xe), q?.rect ?? null, z), De = u(null), Oe = i((e, t) => {
 		let { sensor: n, options: r } = t;
 		if (A.current == null) return;
 		let i = T.get(A.current);
@@ -1942,10 +1954,10 @@ var Kn = /* @__PURE__ */ r(function(e) {
 			activeNode: i,
 			event: a,
 			options: r,
-			context: z,
+			context: B,
 			onAbort(e) {
 				if (!T.get(e)) return;
-				let { onDragAbort: t } = M.current, n = { id: e };
+				let { onDragAbort: t } = N.current, n = { id: e };
 				t?.(n), y({
 					type: "onDragAbort",
 					event: n
@@ -1953,7 +1965,7 @@ var Kn = /* @__PURE__ */ r(function(e) {
 			},
 			onPending(e, t, n, r) {
 				if (!T.get(e)) return;
-				let { onDragPending: i } = M.current, a = {
+				let { onDragPending: i } = N.current, a = {
 					id: e,
 					constraint: t,
 					initialCoordinates: n,
@@ -1969,7 +1981,7 @@ var Kn = /* @__PURE__ */ r(function(e) {
 				if (t == null) return;
 				let n = T.get(t);
 				if (!n) return;
-				let { onDragStart: r } = M.current, i = {
+				let { onDragStart: r } = N.current, i = {
 					activatorEvent: a,
 					active: {
 						id: t,
@@ -1977,7 +1989,7 @@ var Kn = /* @__PURE__ */ r(function(e) {
 						rect: O
 					}
 				};
-				se(() => {
+				oe(() => {
 					r?.(i), S(Gn.Initializing), v({
 						type: J.DragStart,
 						initialCoordinates: e,
@@ -1985,7 +1997,7 @@ var Kn = /* @__PURE__ */ r(function(e) {
 					}), y({
 						type: "onDragStart",
 						event: i
-					}), ne(De.current), re(a);
+					}), ne(De.current), M(a);
 				});
 			},
 			onMove(e) {
@@ -1999,9 +2011,9 @@ var Kn = /* @__PURE__ */ r(function(e) {
 		});
 		function o(e) {
 			return async function() {
-				let { active: t, collisions: n, over: r, scrollAdjustedTranslate: i } = z.current, o = null;
+				let { active: t, collisions: n, over: r, scrollAdjustedTranslate: i } = B.current, o = null;
 				if (t && i) {
-					let { cancelDrop: s } = M.current;
+					let { cancelDrop: s } = N.current;
 					o = {
 						activatorEvent: a,
 						active: t,
@@ -2010,11 +2022,11 @@ var Kn = /* @__PURE__ */ r(function(e) {
 						over: r
 					}, e === J.DragEnd && typeof s == "function" && await Promise.resolve(s(o)) && (e = J.DragCancel);
 				}
-				A.current = null, se(() => {
-					v({ type: e }), S(Gn.Uninitialized), we(null), ne(null), re(null), De.current = null;
+				A.current = null, oe(() => {
+					v({ type: e }), S(Gn.Uninitialized), we(null), ne(null), M(null), De.current = null;
 					let t = e === J.DragEnd ? "onDragEnd" : "onDragCancel";
 					if (o) {
-						let e = M.current[t];
+						let e = N.current[t];
 						e?.(o), y({
 							type: t,
 							event: o
@@ -2030,9 +2042,9 @@ var Kn = /* @__PURE__ */ r(function(e) {
 		e(n, t.options, o) === !0 && (i.dndKit = { capturedBy: t.sensor }, A.current = r, Oe(n, t));
 	}, [T, Oe]));
 	wn(f), K(() => {
-		R && x === Gn.Initializing && S(Gn.Initialized);
-	}, [R, x]), o(() => {
-		let { onDragMove: e } = M.current, { active: t, activatorEvent: n, collisions: r, over: i } = z.current;
+		z && x === Gn.Initializing && S(Gn.Initialized);
+	}, [z, x]), o(() => {
+		let { onDragMove: e } = N.current, { active: t, activatorEvent: n, collisions: r, over: i } = B.current;
 		if (!t || !n) return;
 		let a = {
 			active: t,
@@ -2044,16 +2056,16 @@ var Kn = /* @__PURE__ */ r(function(e) {
 			},
 			over: i
 		};
-		se(() => {
+		oe(() => {
 			e?.(a), y({
 				type: "onDragMove",
 				event: a
 			});
 		});
 	}, [W.x, W.y]), o(() => {
-		let { active: e, activatorEvent: t, collisions: n, droppableContainers: r, scrollAdjustedTranslate: i } = z.current;
+		let { active: e, activatorEvent: t, collisions: n, droppableContainers: r, scrollAdjustedTranslate: i } = B.current;
 		if (!e || A.current == null || !t || !i) return;
-		let { onDragOver: a } = M.current, o = r.get(Ce), s = o && o.rect.current ? {
+		let { onDragOver: a } = N.current, o = r.get(Ce), s = o && o.rect.current ? {
 			id: o.id,
 			rect: o.rect.current,
 			data: o.data,
@@ -2068,20 +2080,20 @@ var Kn = /* @__PURE__ */ r(function(e) {
 			},
 			over: s
 		};
-		se(() => {
+		oe(() => {
 			we(s), a?.(c), y({
 				type: "onDragOver",
 				event: c
 			});
 		});
 	}, [Ce]), K(() => {
-		z.current = {
+		B.current = {
 			activatorEvent: j,
 			active: k,
-			activeNode: I,
+			activeNode: L,
 			collisionRect: G,
 			collisions: Se,
-			droppableRects: F,
+			droppableRects: ie,
 			draggableNodes: T,
 			draggingNode: de,
 			draggingNodeRect: fe,
@@ -2095,19 +2107,19 @@ var Kn = /* @__PURE__ */ r(function(e) {
 		};
 	}, [
 		k,
-		I,
+		L,
 		Se,
 		G,
 		T,
 		de,
 		fe,
-		F,
+		ie,
 		D,
 		q,
 		H,
 		W
 	]), rn({
-		...le,
+		...R,
 		delta: E,
 		draggingRect: G,
 		pointerCoordinates: ve,
@@ -2116,46 +2128,46 @@ var Kn = /* @__PURE__ */ r(function(e) {
 	});
 	let je = c(() => ({
 		active: k,
-		activeNode: I,
-		activeNodeRect: R,
+		activeNode: L,
+		activeNodeRect: z,
 		activatorEvent: j,
 		collisions: Se,
-		containerNodeRect: ue,
+		containerNodeRect: le,
 		dragOverlay: V,
 		draggableNodes: T,
 		droppableContainers: D,
-		droppableRects: F,
+		droppableRects: ie,
 		over: q,
 		measureDroppableContainers: ae,
 		scrollableAncestors: H,
 		scrollableAncestorRects: ge,
-		measuringConfiguration: P,
-		measuringScheduled: oe,
+		measuringConfiguration: F,
+		measuringScheduled: I,
 		windowRect: he
 	}), [
 		k,
-		I,
-		R,
+		L,
+		z,
 		j,
 		Se,
-		ue,
+		le,
 		V,
 		T,
 		D,
-		F,
+		ie,
 		q,
 		ae,
 		H,
 		ge,
-		P,
-		oe,
+		F,
+		I,
 		he
 	]), Ne = c(() => ({
 		activatorEvent: j,
 		activators: ke,
 		active: k,
-		activeNodeRect: R,
-		ariaDescribedById: { draggable: N },
+		activeNodeRect: z,
+		ariaDescribedById: { draggable: P },
 		dispatch: v,
 		draggableNodes: T,
 		over: q,
@@ -2164,16 +2176,16 @@ var Kn = /* @__PURE__ */ r(function(e) {
 		j,
 		ke,
 		k,
-		R,
+		z,
 		v,
-		N,
+		P,
 		T,
 		q,
 		ae
 	]);
 	return t.createElement(Ge.Provider, { value: b }, t.createElement(In.Provider, { value: Ne }, t.createElement(Ln.Provider, { value: je }, t.createElement(Wn.Provider, { value: Ee }, s)), t.createElement(Bn, { disabled: r?.restoreFocus === !1 })), t.createElement(Xe, {
 		...r,
-		hiddenTextDescribedById: N
+		hiddenTextDescribedById: P
 	}));
 	function Pe() {
 		let e = te?.autoScrollEnabled === !1, t = typeof a == "object" ? a.enabled === !1 : a === !1, n = C && !e && !t;
@@ -2459,7 +2471,7 @@ function br(e) {
 			updateMeasurementsFor: E,
 			...f
 		}
-	}), { active: A, activatorEvent: te, activeNodeRect: ne, attributes: j, setNodeRef: re, listeners: M, isDragging: N, over: ie, setActivatorNodeRef: P, transform: F } = Xn({
+	}), { active: A, activatorEvent: te, activeNodeRect: ne, attributes: j, setNodeRef: M, listeners: N, isDragging: P, over: re, setActivatorNodeRef: F, transform: ie } = Xn({
 		id: l,
 		data: T,
 		attributes: {
@@ -2467,84 +2479,84 @@ function br(e) {
 			...n
 		},
 		disabled: C.draggable
-	}), ae = ve(k, re), oe = !!A, I = oe && !v && rr(g) && rr(b), se = !x && N, ce = I ? (se && I ? F : null) ?? (d ?? S)({
+	}), ae = ve(k, M), I = !!A, oe = I && !v && rr(g) && rr(b), L = !x && P, se = oe ? (L && oe ? ie : null) ?? (d ?? S)({
 		rects: y,
 		activeNodeRect: ne,
 		activeIndex: g,
 		overIndex: b,
 		index: w
-	}) : null, le = rr(g) && rr(b) ? s({
+	}) : null, R = rr(g) && rr(b) ? s({
 		id: l,
 		items: m,
 		activeIndex: g,
 		overIndex: b
-	}) : w, L = A?.id, R = u({
-		activeId: L,
+	}) : w, ce = A?.id, z = u({
+		activeId: ce,
 		items: m,
-		newIndex: le,
+		newIndex: R,
 		containerId: h
-	}), ue = m !== R.current.items, z = t({
+	}), le = m !== z.current.items, B = t({
 		active: A,
 		containerId: h,
-		isDragging: N,
-		isSorting: oe,
+		isDragging: P,
+		isSorting: I,
 		id: l,
 		index: w,
 		items: m,
-		newIndex: R.current.newIndex,
-		previousItems: R.current.items,
-		previousContainerId: R.current.containerId,
+		newIndex: z.current.newIndex,
+		previousItems: z.current.items,
+		previousContainerId: z.current.containerId,
 		transition: p,
-		wasDragging: R.current.activeId != null
-	}), B = yr({
-		disabled: !z,
+		wasDragging: z.current.activeId != null
+	}), ue = yr({
+		disabled: !B,
 		index: w,
 		node: ee,
 		rect: D
 	});
 	return o(() => {
-		oe && R.current.newIndex !== le && (R.current.newIndex = le), h !== R.current.containerId && (R.current.containerId = h), m !== R.current.items && (R.current.items = m);
+		I && z.current.newIndex !== R && (z.current.newIndex = R), h !== z.current.containerId && (z.current.containerId = h), m !== z.current.items && (z.current.items = m);
 	}, [
-		oe,
-		le,
+		I,
+		R,
 		h,
 		m
 	]), o(() => {
-		if (L === R.current.activeId) return;
-		if (L != null && R.current.activeId == null) {
-			R.current.activeId = L;
+		if (ce === z.current.activeId) return;
+		if (ce != null && z.current.activeId == null) {
+			z.current.activeId = ce;
 			return;
 		}
 		let e = setTimeout(() => {
-			R.current.activeId = L;
+			z.current.activeId = ce;
 		}, 50);
 		return () => clearTimeout(e);
-	}, [L]), {
+	}, [ce]), {
 		active: A,
 		activeIndex: g,
 		attributes: j,
 		data: T,
 		rect: D,
 		index: w,
-		newIndex: le,
+		newIndex: R,
 		items: m,
 		isOver: O,
-		isSorting: oe,
-		isDragging: N,
-		listeners: M,
+		isSorting: I,
+		isDragging: P,
+		listeners: N,
 		node: ee,
 		overIndex: b,
-		over: ie,
+		over: re,
 		setNodeRef: ae,
-		setActivatorNodeRef: P,
+		setActivatorNodeRef: F,
 		setDroppableNodeRef: k,
-		setDraggableNodeRef: re,
-		transform: B ?? ce,
+		setDraggableNodeRef: M,
+		transform: ue ?? se,
 		transition: V()
 	};
 	function V() {
-		if (B || ue && R.current.newIndex === w) return _r;
-		if (!(se && !Fe(te) || !p) && (oe || z)) return Re.Transition.toString({
+		if (ue || le && z.current.newIndex === w) return _r;
+		if (!(L && !Fe(te) || !p) && (I || B)) return Re.Transition.toString({
 			...p,
 			property: gr
 		});
@@ -2663,7 +2675,7 @@ function Ar({ item: e, basePath: t, evalVis: n, checkPerm: r, onAction: i, enabl
 	});
 }
 function jr({ item: e, basePath: t, evalVis: n, checkPerm: r, onAction: i, enablePinning: a, onPinToggle: o, dragListeners: s, resolveObjectLabel: c, t: l }) {
-	let u = P(), [g, v] = d(e.defaultOpen !== !1);
+	let u = re(), [g, v] = d(e.defaultOpen !== !1);
 	if (!n(e.visible) || e.requiredPermissions?.length && !r(e.requiredPermissions)) return null;
 	if (e.type === "separator") return /* @__PURE__ */ (0, B.jsx)(_, { className: "my-2" });
 	if (e.type === "group") {
@@ -2841,7 +2853,7 @@ function Pr({ areas: e, activeAreaId: t, onAreaChange: n, evalVis: r, checkPerm:
 	}) }) })] });
 }
 function Fr({ items: e, basePath: t }) {
-	let n = P(), r = e.filter((e) => e.type !== "group" && e.type !== "separator").slice(0, 5);
+	let n = re(), r = e.filter((e) => e.type !== "group" && e.type !== "separator").slice(0, 5);
 	return r.length === 0 ? null : /* @__PURE__ */ (0, B.jsx)("div", {
 		className: "fixed bottom-0 left-0 right-0 z-50 flex items-center justify-around border-t bg-background/95 backdrop-blur-sm px-2 py-1 sm:hidden safe-area-bottom",
 		role: "navigation",
@@ -2919,7 +2931,7 @@ function Ir({ schema: e, basePath: t, evalVis: n, checkPerm: r, onAction: i, sid
 	});
 }
 function Lr({ schema: e, basePath: t = "", mobileNavMode: n = "drawer", evaluateVisibility: r, checkPermission: i, onAction: a, navbar: s, sidebarHeader: l, sidebarFooter: u, sidebarExtra: f, children: p, className: m, defaultOpen: h = !0, enableSearch: g, enablePinning: _, onPinToggle: v, enableReorder: y, onReorder: b }) {
-	let x = r ?? ((e) => !(e === !1 || e === "false")), S = i ?? (() => !0), C = c(() => (e.menu ?? []).map((e, t) => ce(e, t)), [e.menu]), w = e.navigation ?? C, T = e.areas ?? [], [E, D] = d(() => T.length > 0 ? T[0].id : null), ee = T.map((e) => e.id).join(",");
+	let x = r ?? ((e) => !(e === !1 || e === "false")), S = i ?? (() => !0), C = c(() => (e.menu ?? []).map((e, t) => L(e, t)), [e.menu]), w = e.navigation ?? C, T = e.areas ?? [], [E, D] = d(() => T.length > 0 ? T[0].id : null), ee = T.map((e) => e.id).join(",");
 	o(() => {
 		T.length > 0 ? D((e) => T.some((t) => t.id === e) ? e : T[0].id) : D(null);
 	}, [e.name, ee]);
@@ -2966,12 +2978,12 @@ function zr({ schema: e, className: t, style: n, id: r, ...i }) {
 		id: r || e.id,
 		className: M("flex flex-col h-full space-y-4", t),
 		style: n,
-		children: [/* @__PURE__ */ (0, B.jsx)(V, {
+		children: [/* @__PURE__ */ (0, B.jsx)(ue, {
 			title: e.title,
 			description: e.description
 		}), /* @__PURE__ */ (0, B.jsx)("div", {
 			className: "flex-1 overflow-auto",
-			children: a.map((e, t) => /* @__PURE__ */ (0, B.jsx)(le, {
+			children: a.map((e, t) => /* @__PURE__ */ (0, B.jsx)(se, {
 				schema: e,
 				...i
 			}, e?.id || t))
@@ -3000,13 +3012,13 @@ function Vr({ item: e, pathname: t }) {
 						className: "ml-auto mr-1 h-5 min-w-5 px-1 text-xs",
 						children: e.badge
 					}),
-					/* @__PURE__ */ (0, B.jsx)(ae, { className: "ml-auto h-4 w-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+					/* @__PURE__ */ (0, B.jsx)(ie, { className: "ml-auto h-4 w-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
 				]
 			})
 		}), /* @__PURE__ */ (0, B.jsx)(m, { children: /* @__PURE__ */ (0, B.jsx)(A, { children: e.children.map((e) => /* @__PURE__ */ (0, B.jsx)(ne, { children: /* @__PURE__ */ (0, B.jsx)(te, {
 			asChild: !0,
 			isActive: t === e.href,
-			children: /* @__PURE__ */ (0, B.jsxs)(ie, {
+			children: /* @__PURE__ */ (0, B.jsxs)(P, {
 				to: e.href,
 				children: [
 					e.icon && /* @__PURE__ */ (0, B.jsx)(e.icon, {}),
@@ -3023,7 +3035,7 @@ function Vr({ item: e, pathname: t }) {
 		asChild: !0,
 		isActive: t === e.href,
 		tooltip: e.title,
-		children: /* @__PURE__ */ (0, B.jsxs)(ie, {
+		children: /* @__PURE__ */ (0, B.jsxs)(P, {
 			to: e.href,
 			children: [
 				e.icon && /* @__PURE__ */ (0, B.jsx)(e.icon, {}),
@@ -3038,7 +3050,7 @@ function Vr({ item: e, pathname: t }) {
 	}) });
 }
 function Hr({ items: e, title: n = "Application", className: r, collapsible: i = "icon", searchEnabled: a = !1, searchPlaceholder: o = "Search..." }) {
-	let s = P(), [c, l] = t.useState(""), u = t.useMemo(() => e.length === 0 ? [] : Br(e[0]) ? e.map((e) => ({
+	let s = re(), [c, l] = t.useState(""), u = t.useMemo(() => e.length === 0 ? [] : Br(e[0]) ? e.map((e) => ({
 		groupLabel: e.label,
 		items: e.items
 	})) : [{ items: e }], [e]), d = t.useMemo(() => {
@@ -3056,7 +3068,7 @@ function Hr({ items: e, title: n = "Application", className: r, collapsible: i =
 			className: "px-3 py-2",
 			children: /* @__PURE__ */ (0, B.jsxs)("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ (0, B.jsx)(oe, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ (0, B.jsx)(g, {
+				children: [/* @__PURE__ */ (0, B.jsx)(ae, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ (0, B.jsx)(g, {
 					type: "search",
 					placeholder: o,
 					value: c,
@@ -3064,16 +3076,26 @@ function Hr({ items: e, title: n = "Application", className: r, collapsible: i =
 					className: "pl-8 h-9"
 				})]
 			})
-		}), d.map((e, t) => /* @__PURE__ */ (0, B.jsxs)(x, { children: [/* @__PURE__ */ (0, B.jsx)(C, { children: e.groupLabel || n }), /* @__PURE__ */ (0, B.jsx)(S, { children: /* @__PURE__ */ (0, B.jsx)(D, { children: e.items.map((e) => /* @__PURE__ */ (0, B.jsx)(Vr, {
-			item: e,
-			pathname: s.pathname
-		}, e.href)) }) })] }, e.groupLabel || t))] })
+		}), d.map((e, t) => /* @__PURE__ */ (0, B.jsxs)(x, { children: [
+			t > 0 && /* @__PURE__ */ (0, B.jsx)("div", {
+				className: "mx-3 mb-1 h-px bg-sidebar-border/60",
+				"aria-hidden": !0
+			}),
+			/* @__PURE__ */ (0, B.jsx)(C, {
+				className: "text-[10px] font-semibold uppercase tracking-wider text-sidebar-foreground/60",
+				children: e.groupLabel || n
+			}),
+			/* @__PURE__ */ (0, B.jsx)(S, { children: /* @__PURE__ */ (0, B.jsx)(D, { children: e.items.map((e) => /* @__PURE__ */ (0, B.jsx)(Vr, {
+				item: e,
+				pathname: s.pathname
+			}, e.href)) }) })
+		] }, e.groupLabel || t))] })
 	});
 }
 //#endregion
 //#region src/index.ts
 function Ur() {
-	e.register("page-header", V, {
+	e.register("page-header", ue, {
 		namespace: "layout",
 		label: "Page Header",
 		category: "Layout",
@@ -3084,7 +3106,7 @@ function Ur() {
 			name: "description",
 			type: "string"
 		}]
-	}), e.register("page:header", V, { namespace: "layout" }), e.register("page:card", me, {
+	}), e.register("page:header", ue, { namespace: "layout" }), e.register("page:card", me, {
 		namespace: "layout",
 		label: "Page Card",
 		category: "Layout",
@@ -3141,4 +3163,4 @@ try {
 	Ur();
 } catch {}
 //#endregion
-export { Lr as AppSchemaRenderer, pe as AppShell, Mr as NavigationRenderer, zr as Page, me as PageCard, V as PageHeader, _e as ResponsiveGrid, Hr as SidebarNav, Or as filterNavigationItems, Ur as registerLayout, Cr as resolveIcon, $ as resolveLabel, fe as useAppShellBranding };
+export { Lr as AppSchemaRenderer, pe as AppShell, Mr as NavigationRenderer, zr as Page, me as PageCard, ue as PageHeader, _e as ResponsiveGrid, Hr as SidebarNav, Or as filterNavigationItems, Ur as registerLayout, Cr as resolveIcon, $ as resolveLabel, fe as useAppShellBranding };