@logicplanes/kaeso-ui 0.4.1 → 0.4.3

package/dist/chunks/{sidebar-DifJ5KgE.js → sidebar-3r1ZRXlN.js}

@@ -1,31 +1,31 @@
 "use client";
-import { t as e } from "./cn-Isw2DnQX.js";
-import { r as t } from "./link-provider-BsUxhZKG.js";
+import { t as e } from "./cn-Dj6sRgkF.js";
+import { r as t } from "./link-provider-cvl8lSTT.js";
 import { i as n } from "./context-BELWW79w.js";
-import { t as r } from "./icon-D5uD_mnL.js";
-import { a as i, l as a, o, r as s, s as c } from "./tooltip-CRApbLF6.js";
-import { t as l } from "./observe-resize-DhxhmoyB.js";
-import { t as u } from "./nav-wordmark-CjWM3NYa.js";
-import { r as d } from "./skeleton-Cu74kGJA.js";
-import { n as f, r as p } from "./hidden-description-B2zSmLcn.js";
-import { t as m } from "./when-idle-Cy3pinqO.js";
-import { createContext as h, forwardRef as g, useCallback as _, useContext as v, useEffect as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C, useSyncExternalStore as w } from "react";
-import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
-import { ArrowLeft01Icon as O, SidebarLeftIcon as k, UnfoldMoreIcon as A } from "@hugeicons/core-free-icons";
-import { Collapsible as j } from "@base-ui/react/collapsible";
+import { t as r } from "./icon-D7ja-_Yk.js";
+import { a as i, c as a, o, r as s, s as c, u as l } from "./tooltip-OcwO0VUT.js";
+import { t as u } from "./observe-resize-DhxhmoyB.js";
+import { t as d } from "./nav-wordmark-_pjheAsZ.js";
+import { r as f } from "./skeleton-Dcz57Zyp.js";
+import { n as p, r as m } from "./hidden-description-B2zSmLcn.js";
+import { t as h } from "./when-idle-Cy3pinqO.js";
+import { createContext as g, forwardRef as _, useCallback as v, useContext as y, useEffect as b, useLayoutEffect as x, useMemo as S, useRef as C, useState as w, useSyncExternalStore as T } from "react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { ArrowLeft01Icon as k, SidebarLeftIcon as A, UnfoldMoreIcon as j } from "@hugeicons/core-free-icons";
+import { Collapsible as M } from "@base-ui/react/collapsible";
 //#region src/hooks/use-stored-state.ts
-var M, N;
+var N, P;
 function ee(e) {
 	try {
 		let t = localStorage.getItem(e);
 		if (t !== null) return t;
 	} catch {}
-	return N?.get(e) ?? null;
+	return P?.get(e) ?? null;
 }
 function te(e, t) {
-	M ??= /* @__PURE__ */ new Map();
-	let n = M.get(e);
-	n || M.set(e, n = /* @__PURE__ */ new Set()), n.add(t);
+	N ??= /* @__PURE__ */ new Map();
+	let n = N.get(e);
+	n || N.set(e, n = /* @__PURE__ */ new Set()), n.add(t);
 	let r = (n) => {
 		n.key === e && t();
 	};
@@ -34,14 +34,14 @@ function te(e, t) {
 	};
 }
 var ne = () => () => void 0, re = () => null;
-function P(e, t) {
-	let n = e ? `kaeso:${e}` : void 0, [r, i] = C(t), a = _((e) => n ? te(n, e) : () => void 0, [n]), o = _(() => n ? ee(n) : null, [n]), s = w(n ? a : ne, o, re), c = x(() => {
+function F(e, t) {
+	let n = e ? `kaeso:${e}` : void 0, [r, i] = w(t), a = v((e) => n ? te(n, e) : () => void 0, [n]), o = v(() => n ? ee(n) : null, [n]), s = T(n ? a : ne, o, re), c = S(() => {
 		if (s !== null) try {
 			return { value: JSON.parse(s) };
 		} catch {
 			return;
 		}
-	}, [s]), l = _((e) => {
+	}, [s]), l = v((e) => {
 		if (!n) {
 			i(e);
 			return;
@@ -50,18 +50,18 @@ function P(e, t) {
 		try {
 			localStorage.setItem(n, t);
 		} catch {
-			(N ??= /* @__PURE__ */ new Map()).set(n, t);
+			(P ??= /* @__PURE__ */ new Map()).set(n, t);
 		}
-		M?.get(n)?.forEach((e) => e());
+		N?.get(n)?.forEach((e) => e());
 	}, [n]);
 	return [n ? c ? c.value : t : r, l];
 }
 //#endregion
 //#region src/components/sidebar/sidebar.tsx
-var F = (e) => e.split("**").map((e, t) => t % 2 ? /* @__PURE__ */ E("span", {
+var I = (e) => e.split("**").map((e, t) => t % 2 ? /* @__PURE__ */ D("span", {
 	className: "font-semibold text-fg",
 	children: e
-}, t) : e), I = {
+}, t) : e), L = {
 	mode: {
 		expanded: { classes: "w-(--k-sidebar-width)" },
 		rail: { classes: "w-60" }
@@ -78,7 +78,7 @@ var F = (e) => e.split("**").map((e, t) => t % 2 ? /* @__PURE__ */ E("span", {
 	mode: "expanded",
 	item: "default",
 	caption: "secondary"
-}, L = /* @__PURE__ */ h({
+}, R = /* @__PURE__ */ g({
 	rail: !1,
 	setRail: () => void 0,
 	collapsed: !1,
@@ -89,13 +89,13 @@ var F = (e) => e.split("**").map((e, t) => t % 2 ? /* @__PURE__ */ E("span", {
 	setWidth: () => void 0,
 	previewWidth: () => void 0,
 	storageKey: void 0
-}), R = () => v(L), z = /* @__PURE__ */ h(!1), B = /* @__PURE__ */ h(null);
-function V({ children: e, storageKey: t, defaultRail: n = !1, shortcut: r = !0 }) {
-	let [i, a] = P(t ? `${t}:rail` : void 0, n), [o, s] = P(t ? `${t}:width` : void 0, 248), [c, l] = C(null), u = H(c ?? o), [d, f] = P(t ? `${t}:collapsed` : void 0, !1), [p, m] = C(!1), h = _((e) => {
+}), z = () => y(R), B = /* @__PURE__ */ g(!1), V = /* @__PURE__ */ g(null);
+function H({ children: e, storageKey: t, defaultRail: n = !1, shortcut: r = !0 }) {
+	let [i, a] = F(t ? `${t}:rail` : void 0, n), [o, s] = F(t ? `${t}:width` : void 0, 248), [c, l] = w(null), u = U(c ?? o), [d, f] = F(t ? `${t}:collapsed` : void 0, !1), [p, m] = w(!1), h = v((e) => {
 		let t = e && !!document.activeElement?.closest("[data-sidebar-root]");
 		f(e), m(!1), t && requestAnimationFrame(() => document.querySelector("[data-sidebar-expand]")?.focus());
 	}, [f]);
-	y(() => {
+	b(() => {
 		if (!r) return;
 		let e = (e) => {
 			let t = e.target;
@@ -107,7 +107,7 @@ function V({ children: e, storageKey: t, defaultRail: n = !1, shortcut: r = !0 }
 		h,
 		r
 	]);
-	let g = x(() => ({
+	let g = S(() => ({
 		rail: i,
 		setRail: a,
 		collapsed: d,
@@ -128,22 +128,22 @@ function V({ children: e, storageKey: t, defaultRail: n = !1, shortcut: r = !0 }
 		s,
 		t
 	]);
-	return /* @__PURE__ */ E(L.Provider, {
+	return /* @__PURE__ */ D(R.Provider, {
 		value: g,
 		children: e
 	});
 }
-process.env.NODE_ENV !== "production" && (V.displayName = "Sidebar.Provider");
-var ae = 232, oe = 280, H = (e) => Math.round(Math.min(280, Math.max(232, Number.isFinite(e) ? e : 248))), U = /* @__PURE__ */ g(function({ resizable: t = !0, className: r, children: i, style: a, "aria-label": o, ...s }, c) {
-	let { rail: l, width: u, setWidth: d, previewWidth: f, collapsed: p, setCollapsed: m } = R(), h = n(), [g, b] = C(null), [x, w] = C(!1), T = S(null);
-	y(() => () => T.current?.(), []);
-	let O = _((e) => {
+process.env.NODE_ENV !== "production" && (H.displayName = "Sidebar.Provider");
+var ae = 232, oe = 280, U = (e) => Math.round(Math.min(280, Math.max(232, Number.isFinite(e) ? e : 248))), W = /* @__PURE__ */ _(function({ resizable: t = !0, className: r, children: i, style: a, "aria-label": o, ...s }, c) {
+	let { rail: l, width: u, setWidth: d, previewWidth: f, collapsed: p, setCollapsed: m } = z(), h = n(), [g, _] = w(null), [x, S] = w(!1), T = C(null);
+	b(() => () => T.current?.(), []);
+	let E = v((e) => {
 		if (e.button !== 0) return;
 		e.preventDefault(), T.current?.();
 		let t = e.currentTarget, n = e.clientX, r = u, i = !1, a = r, o = (e) => {
-			Math.abs(e.clientX - n) > 3 && (i = !0, w(!0)), i && (a = H(r + e.clientX - n), f(a));
+			Math.abs(e.clientX - n) > 3 && (i = !0, S(!0)), i && (a = U(r + e.clientX - n), f(a));
 		}, s = () => {
-			t.removeEventListener("pointermove", o), t.removeEventListener("pointerup", c), t.removeEventListener("pointercancel", s), document.body.style.cursor = "", document.body.style.userSelect = "", T.current = null, w(!1), i && d(a), f(null);
+			t.removeEventListener("pointermove", o), t.removeEventListener("pointerup", c), t.removeEventListener("pointercancel", s), document.body.style.cursor = "", document.body.style.userSelect = "", T.current = null, S(!1), i && d(a), f(null);
 		}, c = () => {
 			s(), i || m(!0);
 		};
@@ -153,12 +153,12 @@ var ae = 232, oe = 280, H = (e) => Math.round(Math.min(280, Math.max(232, Number
 		d,
 		f,
 		m
-	]), k = v(z), A = p && !k, j = /* @__PURE__ */ E("nav", {
+	]), k = y(B), A = p && !k, j = /* @__PURE__ */ D("nav", {
 		ref: c,
 		"aria-label": o ?? h("sidebar.main", "Main"),
 		"data-rail": l || void 0,
 		"data-sidebar-root": "",
-		className: e("group/sidebar relative flex h-full shrink-0 flex-col bg-chrome text-fg", l ? I.mode.rail.classes : I.mode.expanded.classes, r),
+		className: e("group/sidebar relative flex h-full shrink-0 flex-col bg-chrome text-fg", l ? L.mode.rail.classes : L.mode.expanded.classes, r),
 		style: {
 			"--k-sidebar-width": `${u}px`,
 			...a
@@ -166,9 +166,9 @@ var ae = 232, oe = 280, H = (e) => Math.round(Math.min(280, Math.max(232, Number
 		...s,
 		children: i
 	});
-	return k ? j : /* @__PURE__ */ D("div", {
+	return k ? j : /* @__PURE__ */ O("div", {
 		className: "relative flex h-full shrink-0",
-		children: [/* @__PURE__ */ E("div", {
+		children: [/* @__PURE__ */ D("div", {
 			className: "sidebar-motion relative h-full shrink-0",
 			style: { width: A ? 8 : l ? 60 : u },
 			...A ? {
@@ -176,12 +176,12 @@ var ae = 232, oe = 280, H = (e) => Math.round(Math.min(280, Math.max(232, Number
 				inert: !0,
 				"aria-hidden": !0
 			} : {},
-			children: /* @__PURE__ */ E("div", {
+			children: /* @__PURE__ */ D("div", {
 				className: "sidebar-content-motion h-full",
 				style: { width: l ? 60 : u },
 				children: j
 			})
-		}), t && !l && !A && /* @__PURE__ */ E("div", {
+		}), t && !l && !A && /* @__PURE__ */ D("div", {
 			role: "separator",
 			"aria-orientation": "vertical",
 			"aria-label": h("sidebar.resizeOrCollapse", "Resize sidebar; click to collapse"),
@@ -189,300 +189,315 @@ var ae = 232, oe = 280, H = (e) => Math.round(Math.min(280, Math.max(232, Number
 			"aria-valuemax": 280,
 			"aria-valuenow": u,
 			tabIndex: 0,
-			onPointerDown: O,
-			onPointerMove: (e) => b(Math.round(e.clientY - e.currentTarget.getBoundingClientRect().top)),
-			onPointerLeave: () => b(null),
+			onPointerDown: E,
+			onPointerMove: (e) => _(Math.round(e.clientY - e.currentTarget.getBoundingClientRect().top)),
+			onPointerLeave: () => _(null),
 			onKeyDown: (e) => {
-				e.key === "ArrowLeft" && d(H(u - 8)), e.key === "ArrowRight" && d(H(u + 8)), (e.key === "Enter" || e.key === " ") && m(!0);
+				e.key === "ArrowLeft" && d(U(u - 8)), e.key === "ArrowRight" && d(U(u + 8)), (e.key === "Enter" || e.key === " ") && m(!0);
 			},
 			className: "absolute top-0 right-0 z-10 h-full w-8 cursor-col-resize rounded-pill focus-ring-inset",
-			children: g !== null && !x && /* @__PURE__ */ D("span", {
+			children: g !== null && !x && /* @__PURE__ */ O("span", {
 				"aria-hidden": !0,
 				className: "pointer-events-none absolute left-16 flex w-max flex-col gap-2 rounded-tooltip bg-tooltip px-12 py-8 text-small text-fg-secondary shadow-raised",
 				style: { top: Math.max(8, (g ?? 0) - 24) },
-				children: [/* @__PURE__ */ E("span", { children: F(h("sidebar.dragToResize", "**Drag** to resize")) }), /* @__PURE__ */ E("span", { children: F(h("sidebar.clickToCollapse", "**Click** to collapse")) })]
+				children: [/* @__PURE__ */ D("span", { children: I(h("sidebar.dragToResize", "**Drag** to resize")) }), /* @__PURE__ */ D("span", { children: I(h("sidebar.clickToCollapse", "**Click** to collapse")) })]
 			})
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (U.displayName = "Sidebar");
-var W = /* @__PURE__ */ g(function({ className: t, ...n }, r) {
-	return /* @__PURE__ */ E("div", {
+process.env.NODE_ENV !== "production" && (W.displayName = "Sidebar");
+var G = /* @__PURE__ */ _(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ D("div", {
 		ref: r,
 		className: e("mt-8 flex h-52 shrink-0 items-center gap-4 px-8", t),
 		...n
 	});
 });
-process.env.NODE_ENV !== "production" && (W.displayName = "Sidebar.Header");
-var G = /* @__PURE__ */ g(function({ href: t, label: n = "Kaeso", children: r, className: i }, a) {
-	let { rail: o } = R();
-	return o ? /* @__PURE__ */ E(W, {
+process.env.NODE_ENV !== "production" && (G.displayName = "Sidebar.Header");
+var K = /* @__PURE__ */ _(function({ href: t, label: n = "Kaeso", children: r, className: i }, a) {
+	let { rail: o } = z();
+	return o ? /* @__PURE__ */ D(G, {
 		ref: a,
 		className: e("justify-center px-0", i),
 		children: r
-	}) : /* @__PURE__ */ D(W, {
+	}) : /* @__PURE__ */ O(G, {
 		ref: a,
 		className: e("justify-between pr-16 pl-28", i),
-		children: [/* @__PURE__ */ E(K, {
+		children: [/* @__PURE__ */ D(q, {
 			href: t,
 			label: n
-		}), r && /* @__PURE__ */ E("span", {
+		}), r && /* @__PURE__ */ D("span", {
 			className: "flex items-center",
 			children: r
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (G.displayName = "Sidebar.Brand");
-function K({ href: e, label: n = "Kaeso" }) {
-	let r = t();
-	return e ? /* @__PURE__ */ E(r, {
+process.env.NODE_ENV !== "production" && (K.displayName = "Sidebar.Brand");
+var q = /* @__PURE__ */ _(function({ href: e, label: n = "Kaeso" }, r) {
+	let i = t();
+	return e ? /* @__PURE__ */ D(i, {
+		ref: r,
 		href: e,
 		"aria-label": n,
 		className: "-mx-4 flex h-32 items-center rounded-code px-4 text-fg focus-ring",
-		children: /* @__PURE__ */ E(u, { decorative: !0 })
-	}) : /* @__PURE__ */ E(u, {
+		children: /* @__PURE__ */ D(d, { decorative: !0 })
+	}) : /* @__PURE__ */ D(d, {
+		ref: r,
 		title: n,
 		className: "text-fg"
 	});
-}
-process.env.NODE_ENV !== "production" && (K.displayName = "Sidebar.BrandWordmark");
-var se = /* @__PURE__ */ c(() => import("./sidebar-menu-XKOiwrQp.js"), { base: () => import.meta.url });
-function q({ trigger: e, side: t, header: n, footer: r, children: s }) {
-	let [c, l] = C(!1), [u, d] = C(!1), f = a(se, u || c, () => {
-		d(!1), l(!1);
-	}), [p] = C(o), h = S(null), g = c && !f;
-	y(() => m(() => d(!0)), []), y(() => {
-		if (!g) return;
-		let e = h.current?.ownerDocument ?? document, t = (e) => {
-			e.key === "Escape" && (e.stopPropagation(), l(!1));
+});
+process.env.NODE_ENV !== "production" && (q.displayName = "BrandWordmark");
+var se = /* @__PURE__ */ a(() => import("./sidebar-menu-BN3jkTlK.js"), { base: () => import.meta.url });
+function J({ trigger: e, side: t, header: n, footer: r, children: a }) {
+	let [s, u] = w(!1), [d, f] = w(!1), p = l(se, d || s, () => {
+		f(!1), u(!1);
+	}), [m] = w(o), g = C(null), _ = e.props.ref, v = S(() => c(g, _), [_]), y = s && !p;
+	b(() => h(() => f(!0)), []), b(() => {
+		if (!y) return;
+		let e = g.current?.ownerDocument ?? document, t = (e) => {
+			e.key === "Escape" && (e.stopPropagation(), u(!1));
 		}, n = (e) => {
-			h.current?.contains(e.target) || l(!1);
+			g.current?.contains(e.target) || u(!1);
 		};
 		return e.addEventListener("keydown", t, !0), e.addEventListener("pointerdown", n, !0), () => {
 			e.removeEventListener("keydown", t, !0), e.removeEventListener("pointerdown", n, !0);
 		};
-	}, [g]);
-	let _ = () => d(!0), v = f ? { ref: h } : {
-		ref: h,
+	}, [y]);
+	let x = () => f(!0), T = p ? { ref: v } : {
+		ref: v,
 		"aria-haspopup": "menu",
-		"aria-expanded": c,
-		...c ? { "data-popup-open": "" } : {},
-		onPointerEnter: _,
-		onFocus: _,
-		onClick: () => l((e) => !e),
+		"aria-expanded": s,
+		...s ? { "data-popup-open": "" } : {},
+		onPointerEnter: x,
+		onFocus: x,
+		onClick: () => u((e) => !e),
 		onKeyDown: (e) => {
-			(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), l(!0));
+			(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), u(!0));
 		},
 		onBlur: (e) => {
-			c && e.relatedTarget && !e.currentTarget.contains(e.relatedTarget) && l(!1);
+			s && e.relatedTarget && !e.currentTarget.contains(e.relatedTarget) && u(!1);
 		}
 	};
-	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(i, {
-		store: p,
-		merge: f?.mergeTriggerProps,
-		extra: v,
+	return /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(i, {
+		store: m,
+		merge: p?.mergeTriggerProps,
+		extra: T,
 		children: e
-	}), f && /* @__PURE__ */ E(f.SidebarMenuRoot, {
-		open: c,
-		onOpenChange: l,
-		triggerProps: p,
+	}), p && /* @__PURE__ */ D(p.SidebarMenuRoot, {
+		open: s,
+		onOpenChange: u,
+		triggerProps: m,
 		side: t,
 		header: n,
 		footer: r,
-		children: s
+		children: a
 	})] });
 }
-process.env.NODE_ENV !== "production" && (q.displayName = "Sidebar.Menu");
-function J({ avatar: t, label: i, trailing: a, caption: o, captionTone: s = "secondary", children: c, header: l, footer: u, "aria-label": d, className: m, "data-force": h }) {
-	let { rail: g } = R(), _ = n(), v = f(o), y = f(i), b = d ?? _("sidebar.switchOrOpenSettings", "Switch or open settings"), x = p(y ? b : void 0);
-	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(q, {
+process.env.NODE_ENV !== "production" && (J.displayName = "Sidebar.Menu");
+var Y = /* @__PURE__ */ _(function({ avatar: t, label: i, trailing: a, caption: o, captionTone: s = "secondary", children: c, header: l, footer: u, "aria-label": d, className: f, "data-force": h }, g) {
+	let { rail: _ } = z(), v = n(), y = p(o), b = p(i), x = d ?? v("sidebar.switchOrOpenSettings", "Switch or open settings"), S = m(b ? x : void 0);
+	return /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(J, {
 		side: "top",
 		header: l,
 		footer: u,
-		trigger: /* @__PURE__ */ D("button", {
+		trigger: /* @__PURE__ */ O("button", {
+			ref: g,
 			type: "button",
-			...y ? { "aria-describedby": x.id } : { "aria-label": b },
+			...b ? { "aria-describedby": S.id } : { "aria-label": x },
 			...h ? { "data-force": h } : {},
-			className: e("group/sw flex h-36 w-full min-w-0 cursor-pointer items-center gap-8 rounded-pill px-12 text-left text-body font-medium text-fg transition-control hover:bg-fill-2 open:bg-fill-3 focus-ring-inset", g && "justify-center px-0", m),
+			className: e("group/sw flex h-36 w-full min-w-0 cursor-pointer items-center gap-8 rounded-pill px-12 text-left text-body font-medium text-fg transition-control hover:bg-fill-2 open:bg-fill-3 focus-ring-inset", _ && "justify-center px-0", f),
 			children: [
 				t,
-				!g && (v ? /* @__PURE__ */ D("span", {
+				!_ && (y ? /* @__PURE__ */ O("span", {
 					className: "flex min-w-0 flex-1 flex-col",
-					children: [/* @__PURE__ */ E("span", {
+					children: [/* @__PURE__ */ D("span", {
 						className: "truncate",
 						children: i
-					}), /* @__PURE__ */ E("span", {
-						className: e("truncate text-caption font-regular", I.caption[s].classes),
+					}), /* @__PURE__ */ D("span", {
+						className: e("truncate text-caption font-regular", L.caption[s].classes),
 						children: o
 					})]
-				}) : /* @__PURE__ */ E("span", {
+				}) : /* @__PURE__ */ D("span", {
 					className: "min-w-0 flex-1 truncate",
 					children: i
 				})),
-				g && y && /* @__PURE__ */ E("span", {
+				_ && b && /* @__PURE__ */ D("span", {
 					className: "sr-only",
 					children: i
 				}),
-				g && v && /* @__PURE__ */ E("span", {
+				_ && y && /* @__PURE__ */ D("span", {
 					className: "sr-only",
 					children: o
 				}),
-				!g && a,
-				!g && /* @__PURE__ */ E(r, {
-					icon: A,
+				!_ && a,
+				!_ && /* @__PURE__ */ D(r, {
+					icon: j,
 					size: "sm",
 					className: "text-fg-tertiary transition-control group-hover/sw:text-fg-secondary"
 				})
 			]
 		}),
 		children: c
-	}), x.node] });
-}
-process.env.NODE_ENV !== "production" && (J.displayName = "Sidebar.Switcher");
-function Y({ avatar: i, label: a, children: o, href: c, header: l, footer: u, "aria-label": d, className: m, "data-force": h }) {
-	let { rail: g } = R(), _ = n(), v = t(), y = f(a), b = o ? d ?? _("sidebar.switchPlace", "Switch") : d, x = p(y ? b : void 0), S = y ? x.id ? { "aria-describedby": x.id } : {} : b ? { "aria-label": b } : {}, C = e("group/place flex h-36 w-full min-w-0 items-center gap-8 rounded-pill px-12 text-left text-body font-semibold text-fg", (o || c) && "cursor-pointer transition-control hover:bg-fill-2 open:bg-fill-3 focus-ring-inset", g && "justify-center px-0", m), w = /* @__PURE__ */ D(T, { children: [
-		/* @__PURE__ */ E("span", {
+	}), S.node] });
+});
+process.env.NODE_ENV !== "production" && (Y.displayName = "Sidebar.Switcher");
+var X = /* @__PURE__ */ _(function({ avatar: i, label: a, children: o, href: c, header: l, footer: u, "aria-label": d, className: f, "data-force": h }, g) {
+	let { rail: _ } = z(), v = n(), y = t(), b = p(a), x = o ? d ?? v("sidebar.switchPlace", "Switch") : d, S = m(b ? x : void 0), C = b ? S.id ? { "aria-describedby": S.id } : {} : x ? { "aria-label": x } : {}, w = e("group/place flex h-36 w-full min-w-0 items-center gap-8 rounded-pill px-12 text-left text-body font-semibold text-fg", (o || c) && "cursor-pointer transition-control hover:bg-fill-2 open:bg-fill-3 focus-ring-inset", _ && "justify-center px-0", f), T = /* @__PURE__ */ O(E, { children: [
+		/* @__PURE__ */ D("span", {
 			className: "flex size-18 shrink-0 items-center justify-center",
 			children: i
 		}),
-		g ? /* @__PURE__ */ E("span", {
+		_ ? /* @__PURE__ */ D("span", {
 			className: "sr-only",
 			children: a
-		}) : /* @__PURE__ */ E(ce, { label: a }),
-		!g && o && /* @__PURE__ */ E(r, {
-			icon: A,
+		}) : /* @__PURE__ */ D(ce, { label: a }),
+		!_ && o && /* @__PURE__ */ D(r, {
+			icon: j,
 			size: "sm",
 			className: "text-fg-tertiary transition-control group-hover/place:text-fg-secondary"
 		})
-	] }), O = {
-		className: C,
+	] }), k = {
+		className: w,
 		...h ? { "data-force": h } : {}
 	};
-	if (o) return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(q, {
+	if (o) return /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(J, {
 		side: "bottom",
 		header: l,
 		footer: u,
-		trigger: /* @__PURE__ */ E("button", {
+		trigger: /* @__PURE__ */ D("button", {
+			ref: g,
 			type: "button",
-			...S,
-			...O,
-			children: w
+			...C,
+			...k,
+			children: T
 		}),
 		children: o
-	}), x.node] });
-	let k = c ? /* @__PURE__ */ E(v, {
+	}), S.node] });
+	let A = c ? /* @__PURE__ */ D(y, {
+		ref: g,
 		href: c,
-		...S,
-		...O,
-		children: w
-	}) : /* @__PURE__ */ E("div", {
-		...O,
-		children: w
+		...C,
+		...k,
+		children: T
+	}) : /* @__PURE__ */ D("div", {
+		ref: g,
+		...k,
+		children: T
 	});
-	return /* @__PURE__ */ D(T, { children: [g ? /* @__PURE__ */ E(s, {
+	return /* @__PURE__ */ O(E, { children: [_ ? /* @__PURE__ */ D(s, {
 		content: a,
 		side: "right",
-		children: k
-	}) : k, c && x.node] });
-}
-process.env.NODE_ENV !== "production" && (Y.displayName = "Sidebar.Place");
+		children: A
+	}) : A, c && S.node] });
+});
+process.env.NODE_ENV !== "production" && (X.displayName = "Sidebar.Place");
 function ce({ label: e }) {
-	let t = S(null), [n, r] = C(!1);
-	return b(() => {
+	let t = C(null), [n, r] = w(!1);
+	return x(() => {
 		let e = t.current;
 		if (!e || typeof ResizeObserver > "u") return;
 		let n = () => r(e.scrollWidth > e.clientWidth);
-		return n(), l([e], n);
-	}, [e]), /* @__PURE__ */ E(s, {
+		return n(), u([e], n);
+	}, [e]), /* @__PURE__ */ D(s, {
 		content: e,
 		side: "right",
 		disabled: !n,
-		children: /* @__PURE__ */ E("span", {
+		children: /* @__PURE__ */ D("span", {
 			ref: t,
 			className: "min-w-0 flex-1 truncate",
 			children: e
 		})
 	});
 }
-var X = /* @__PURE__ */ g(function({ className: t, ...n }, r) {
-	let { rail: i } = R();
-	return /* @__PURE__ */ E("div", {
-		ref: r,
+var Z = /* @__PURE__ */ _(function({ className: t, ...n }, r) {
+	let { rail: i } = z(), a = C(null), o = S(() => c(a, r), [r]);
+	return b(() => {
+		let e = a.current, t = e?.closest("[data-sidebar-root]");
+		if (!e || !t) return;
+		let n = () => t.toggleAttribute("data-scrolled-under", e.scrollHeight - e.scrollTop - e.clientHeight > 1);
+		n(), e.addEventListener("scroll", n, { passive: !0 });
+		let r = u([e, ...e.children], n);
+		return () => {
+			e.removeEventListener("scroll", n), r(), t.removeAttribute("data-scrolled-under");
+		};
+	}, []), /* @__PURE__ */ D("div", {
+		ref: o,
 		className: e("flex min-h-0 flex-1 flex-col gap-16 overflow-y-auto overscroll-contain pt-8 pb-16 scrollbar-quiet", i ? "px-8" : "px-16", t),
 		...n
 	});
 });
-process.env.NODE_ENV !== "production" && (X.displayName = "Sidebar.Content");
-var Z = /* @__PURE__ */ g(function({ className: t, ...n }, r) {
-	let { rail: i } = R();
-	return /* @__PURE__ */ E("div", {
+process.env.NODE_ENV !== "production" && (Z.displayName = "Sidebar.Content");
+var Q = /* @__PURE__ */ _(function({ className: t, ...n }, r) {
+	let { rail: i } = z();
+	return /* @__PURE__ */ D("div", {
 		ref: r,
-		className: e("flex shrink-0 items-center gap-4 pt-8 pb-12", i ? "px-8" : "px-16", t),
+		className: e("flex shrink-0 items-center gap-4 pt-8 pb-12 transition-control group-data-scrolled-under/sidebar:hairline-t-strong", i ? "px-8" : "px-16", t),
 		...n
 	});
 });
-process.env.NODE_ENV !== "production" && (Z.displayName = "Sidebar.Footer");
-var Q = /* @__PURE__ */ g(function({ label: t, id: n, defaultOpen: r = !0, collapsible: i = !0, children: a, className: o }, s) {
-	let { storageKey: c, rail: l } = R(), [u, d] = P(c && n ? `${c}:group:${n}` : void 0, r);
-	return !t || !i || l ? /* @__PURE__ */ D("div", {
+process.env.NODE_ENV !== "production" && (Q.displayName = "Sidebar.Footer");
+var $ = /* @__PURE__ */ _(function({ label: t, id: n, defaultOpen: r = !0, collapsible: i = !0, children: a, className: o }, s) {
+	let { storageKey: c, rail: l } = z(), [u, d] = F(c && n ? `${c}:group:${n}` : void 0, r);
+	return !t || !i || l ? /* @__PURE__ */ O("div", {
 		ref: s,
 		role: "group",
 		className: e("flex flex-col", o),
-		children: [t && !l && /* @__PURE__ */ E("div", {
+		children: [t && !l && /* @__PURE__ */ D("div", {
 			className: "flex h-28 items-center px-12 text-caption font-medium text-fg-secondary",
 			children: t
-		}), /* @__PURE__ */ E("ul", {
+		}), /* @__PURE__ */ D("ul", {
 			className: "flex flex-col gap-2",
 			children: a
 		})]
-	}) : /* @__PURE__ */ D(j.Root, {
+	}) : /* @__PURE__ */ O(M.Root, {
 		ref: s,
 		open: u,
 		onOpenChange: (e) => d(e),
 		className: e("flex flex-col", o),
-		children: [/* @__PURE__ */ D(j.Trigger, {
+		children: [/* @__PURE__ */ O(M.Trigger, {
 			className: "group/gl relative -mx-0 flex h-28 w-full cursor-pointer items-center gap-4 rounded-pill px-12 text-left text-caption font-medium text-fg-secondary transition-control hover:text-fg focus-ring tap-target",
-			children: [/* @__PURE__ */ E("span", { children: t }), /* @__PURE__ */ E("svg", {
+			children: [/* @__PURE__ */ D("span", { children: t }), /* @__PURE__ */ D("svg", {
 				viewBox: "0 0 8 8",
 				className: "size-8 text-fg-tertiary transition-transform duration-180 group-data-panel-open/gl:rotate-90",
 				"aria-hidden": !0,
-				children: /* @__PURE__ */ E("path", {
+				children: /* @__PURE__ */ D("path", {
 					d: "M2.5 1.5 5.5 4l-3 2.5z",
 					fill: "currentColor"
 				})
 			})]
-		}), /* @__PURE__ */ E(j.Panel, {
+		}), /* @__PURE__ */ D(M.Panel, {
 			className: "collapse-motion",
-			children: /* @__PURE__ */ E("ul", {
+			children: /* @__PURE__ */ D("ul", {
 				className: "flex flex-col gap-2 pt-2",
 				children: a
 			})
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (Q.displayName = "Sidebar.Group");
+process.env.NODE_ENV !== "production" && ($.displayName = "Sidebar.Group");
 var le = [
 	"",
 	"pl-32",
 	"pl-52"
-], $ = /* @__PURE__ */ g(function({ children: n, icon: i, leading: a, href: o, onClick: c, active: l, count: u, trailing: d, depth: f = 0, shortcut: p, className: m, "data-force": h }, g) {
-	let { rail: _ } = R(), v = t(), y = e("group/si flex h-32 w-full min-w-0 cursor-pointer items-center gap-8 rounded-pill px-12 text-left text-body font-medium transition-control focus-ring-inset", l ? I.item.active.classes : I.item.default.classes, !_ && le[f], _ && "justify-center px-0", m), b = /* @__PURE__ */ D(T, { children: [
-		a ? /* @__PURE__ */ E("span", {
+], ue = /* @__PURE__ */ _(function({ children: n, icon: i, leading: a, href: o, onClick: c, active: l, count: u, trailing: d, depth: f = 0, shortcut: p, className: m, "data-force": h }, g) {
+	let { rail: _ } = z(), v = t(), y = e("group/si flex h-32 w-full min-w-0 cursor-pointer items-center gap-8 rounded-pill px-12 text-left text-body font-medium transition-control focus-ring-inset", l ? L.item.active.classes : L.item.default.classes, !_ && le[f], _ && "justify-center px-0", m), b = /* @__PURE__ */ O(E, { children: [
+		a ? /* @__PURE__ */ D("span", {
 			className: "flex size-18 shrink-0 items-center justify-center",
 			children: a
-		}) : i && /* @__PURE__ */ E(r, {
+		}) : i && /* @__PURE__ */ D(r, {
 			icon: i,
 			size: "md",
 			className: e("text-fg-secondary transition-control group-hover/si:text-fg", l && "text-fg")
 		}),
-		_ ? /* @__PURE__ */ E("span", {
+		_ ? /* @__PURE__ */ D("span", {
 			className: "sr-only",
 			children: n
-		}) : /* @__PURE__ */ E("span", {
+		}) : /* @__PURE__ */ D("span", {
 			className: "min-w-0 flex-1 truncate",
 			children: n
 		}),
-		!_ && u !== void 0 && /* @__PURE__ */ E("span", {
+		!_ && u !== void 0 && /* @__PURE__ */ D("span", {
 			className: e("text-caption font-medium tabular", l ? "text-fg" : "text-fg-tertiary"),
 			children: u
 		}),
@@ -491,22 +506,22 @@ var le = [
 		className: y,
 		...l ? { "aria-current": "page" } : {},
 		...h ? { "data-force": h } : {}
-	}, S = o ? /* @__PURE__ */ E(v, {
+	}, S = o ? /* @__PURE__ */ D(v, {
 		ref: g,
 		href: o,
 		...x,
 		...c ? { onClick: c } : {},
 		children: b
-	}) : /* @__PURE__ */ E("button", {
+	}) : /* @__PURE__ */ D("button", {
 		ref: g,
 		type: "button",
 		...x,
 		...c ? { onClick: c } : {},
 		children: b
 	});
-	return /* @__PURE__ */ E("li", {
+	return /* @__PURE__ */ D("li", {
 		className: "flex",
-		children: _ ? /* @__PURE__ */ E(s, {
+		children: _ ? /* @__PURE__ */ D(s, {
 			content: n,
 			side: "right",
 			...p ? { shortcut: p } : {},
@@ -514,90 +529,93 @@ var le = [
 		}) : S
 	});
 });
-process.env.NODE_ENV !== "production" && ($.displayName = "Sidebar.Item");
-var ue = /* @__PURE__ */ g(function({ href: i, children: a, className: o }, s) {
+process.env.NODE_ENV !== "production" && (ue.displayName = "Sidebar.Item");
+var de = /* @__PURE__ */ _(function({ href: i, children: a, className: o }, s) {
 	let c = t(), l = n();
-	return /* @__PURE__ */ D(c, {
+	return /* @__PURE__ */ O(c, {
 		ref: s,
 		href: i,
 		className: e("flex h-32 items-center gap-8 rounded-pill px-12 text-body font-medium text-fg-secondary transition-control hover:bg-fill-2 hover:text-fg focus-ring-inset", o),
-		children: [/* @__PURE__ */ E(r, {
-			icon: O,
+		children: [/* @__PURE__ */ D(r, {
+			icon: k,
 			size: "md"
 		}), a ?? l("sidebar.backToApp", "Back to app")]
 	});
 });
-process.env.NODE_ENV !== "production" && (ue.displayName = "Sidebar.BackLink");
-function de({ rows: e = 5 }) {
-	return /* @__PURE__ */ E("div", {
+process.env.NODE_ENV !== "production" && (de.displayName = "Sidebar.BackLink");
+var fe = /* @__PURE__ */ _(function({ rows: e = 5 }, t) {
+	return /* @__PURE__ */ D("div", {
+		ref: t,
 		className: "flex flex-col gap-2",
 		"aria-busy": !0,
-		children: Array.from({ length: e }, (e, t) => /* @__PURE__ */ D("div", {
+		children: Array.from({ length: e }, (e, t) => /* @__PURE__ */ O("div", {
 			className: "flex h-32 items-center gap-8 px-12",
-			children: [/* @__PURE__ */ E(d, { className: "size-18 rounded-pill" }), /* @__PURE__ */ E(d, {
+			children: [/* @__PURE__ */ D(f, { className: "size-18 rounded-pill" }), /* @__PURE__ */ D(f, {
 				className: "h-12 rounded-pill",
 				style: { width: `${48 + t * 37 % 40}%` }
 			})]
 		}, t))
 	});
-}
-process.env.NODE_ENV !== "production" && (de.displayName = "Sidebar.Loading");
-function fe({ className: t }) {
-	let { collapsed: i, setCollapsed: a } = R(), o = v(B), c = n(), l = o ? o.peek ? c("sidebar.keepOpen", "Keep sidebar open") : c("sidebar.closeNavigation", "Close navigation") : i ? c("sidebar.expand", "Expand sidebar") : c("sidebar.collapse", "Collapse sidebar"), u = () => {
-		o?.peek ? a(!1) : o ? o.close() : a(!i);
+});
+process.env.NODE_ENV !== "production" && (fe.displayName = "Sidebar.Loading");
+var pe = /* @__PURE__ */ _(function({ className: t }, i) {
+	let { collapsed: a, setCollapsed: o } = z(), c = y(V), l = n(), u = c ? c.peek ? l("sidebar.keepOpen", "Keep sidebar open") : l("sidebar.closeNavigation", "Close navigation") : a ? l("sidebar.expand", "Expand sidebar") : l("sidebar.collapse", "Collapse sidebar"), d = () => {
+		c?.peek ? o(!1) : c ? c.close() : o(!a);
 	};
-	return /* @__PURE__ */ E(s, {
-		content: l,
-		...o && !o.peek ? {} : { shortcut: ["["] },
-		children: /* @__PURE__ */ E("button", {
+	return /* @__PURE__ */ D(s, {
+		content: u,
+		...c && !c.peek ? {} : { shortcut: ["["] },
+		children: /* @__PURE__ */ D("button", {
+			ref: i,
 			type: "button",
-			"aria-label": l,
-			...o ? {} : { "aria-expanded": !i },
-			onClick: u,
+			"aria-label": u,
+			...c ? {} : { "aria-expanded": !a },
+			onClick: d,
 			className: e("inline-flex size-32 cursor-pointer items-center justify-center rounded-pill text-fg-secondary transition-control hover:bg-fill-2 hover:text-fg focus-ring", t),
-			children: /* @__PURE__ */ E(r, {
-				icon: k,
+			children: /* @__PURE__ */ D(r, {
+				icon: A,
 				size: "sm"
 			})
 		})
 	});
-}
-process.env.NODE_ENV !== "production" && (fe.displayName = "Sidebar.CollapseToggle");
-function pe({ className: t }) {
-	let { rail: i, setRail: a } = R(), o = n(), c = i ? o("sidebar.expand", "Expand sidebar") : o("sidebar.collapse", "Collapse sidebar");
-	return /* @__PURE__ */ E(s, {
-		content: c,
+});
+process.env.NODE_ENV !== "production" && (pe.displayName = "Sidebar.CollapseToggle");
+var me = /* @__PURE__ */ _(function({ className: t }, i) {
+	let { rail: a, setRail: o } = z(), c = n(), l = a ? c("sidebar.expand", "Expand sidebar") : c("sidebar.collapse", "Collapse sidebar");
+	return /* @__PURE__ */ D(s, {
+		content: l,
 		side: "right",
-		children: /* @__PURE__ */ E("button", {
+		children: /* @__PURE__ */ D("button", {
+			ref: i,
 			type: "button",
-			"aria-label": c,
-			"aria-pressed": i,
-			onClick: () => a(!i),
+			"aria-label": l,
+			"aria-pressed": a,
+			onClick: () => o(!a),
 			className: e("inline-flex size-32 items-center justify-center rounded-pill text-fg-secondary transition-control hover:bg-fill-2 hover:text-fg focus-ring", t),
-			children: /* @__PURE__ */ E(r, {
-				icon: k,
+			children: /* @__PURE__ */ D(r, {
+				icon: A,
 				size: "sm"
 			})
 		})
 	});
-}
-process.env.NODE_ENV !== "production" && (pe.displayName = "Sidebar.RailToggle");
-var me = /* @__PURE__ */ Object.assign(U, {
-	Provider: V,
-	Header: W,
-	Brand: G,
-	Switcher: J,
-	Place: Y,
-	Content: X,
-	Footer: Z,
-	Group: Q,
-	Item: $,
-	BackLink: ue,
-	Loading: de,
-	RailToggle: pe,
-	CollapseToggle: fe
+});
+process.env.NODE_ENV !== "production" && (me.displayName = "Sidebar.RailToggle");
+var he = /* @__PURE__ */ Object.assign(W, {
+	Provider: H,
+	Header: G,
+	Brand: K,
+	Switcher: Y,
+	Place: X,
+	Content: Z,
+	Footer: Q,
+	Group: $,
+	Item: ue,
+	BackLink: de,
+	Loading: fe,
+	RailToggle: me,
+	CollapseToggle: pe
 });
 //#endregion
-export { ae as a, B as c, oe as i, R as l, ie as n, me as o, I as r, z as s, K as t };
+export { ae as a, V as c, oe as i, z as l, ie as n, he as o, L as r, B as s, q as t };
 
-//# sourceMappingURL=sidebar-DifJ5KgE.js.map
+//# sourceMappingURL=sidebar-3r1ZRXlN.js.map