@viglet/viglet-design-system 2026.3.2 → 2026.3.4

package/dist/router.es.js

@@ -1,197 +1,28 @@
-import { $t as e, A as t, At as n, C as r, Dt as i, F as a, Ft as o, Gt as s, Ht as c, Jt as l, Kt as u, N as d, Nt as f, Ot as p, P as m, Pt as h, Q as g, Qt as _, T as v, Tt as y, V as b, Wt as x, X as S, Z as ee, Zt as C, _ as w, an as te, at as ne, b as re, ct as T, d as ie, et as ae, f as oe, ft as E, g as D, ht as se, i as ce, kt as O, l as le, lt as ue, m as k, mt as A, n as de, ot as fe, pt as pe, qt as me, st as j, u as he, ut as M, v as ge, w as N, wt as P, x as F, yt as _e } from "./breadcrumb.context-C7VCfh49.js";
+"use client";
+import { E as e, _ as t, f as n, g as r, h as i, l as a, m as o, u as s, x as c } from "./badge-locale-BxI9TwkE.js";
+import { $ as l, A as u, D as d, H as f, K as p, M as m, Q as h, S as g, U as _, W as v, Z as y, _ as b, b as x, c as S, ct as C, d as w, dt as T, ft as E, h as D, ht as O, i as ee, j as k, l as te, lt as ne, m as A, mt as re, n as ie, ot as ae, p as j, pt as M, ut as oe, v as N, x as P } from "./breadcrumb.context-CGqjI0-U.js";
+import { i as F, n as se, r as ce, t as le } from "./loading-provider-CMnOuvdR.js";
 import I, { useState as L } from "react";
 import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";
-import { IconAlertTriangle as ve, IconAlertTriangleFilled as ye, IconChevronLeft as be, IconChevronRight as xe, IconDotsVertical as V, IconDownload as Se, IconLogout as Ce, IconPlus as H, IconSearch as U, IconTrash as W, IconUserCircle as we } from "@tabler/icons-react";
-import { useTranslation as G } from "react-i18next";
-import { NavLink as K, Outlet as q, useLocation as J, useNavigate as Y } from "react-router-dom";
-import { getCoreRowModel as Te, getFilteredRowModel as Ee, getPaginationRowModel as De, getSortedRowModel as Oe, useReactTable as ke } from "@tanstack/react-table";
-import { Icon as Ae } from "@iconify/react";
-//#region src/components/router/gradient-button-link.tsx
-function X({ className: e, variant: t, size: n, to: r, onClick: i, children: a }) {
-	return /* @__PURE__ */ z(K, {
-		to: r,
-		"data-slot": "gradient-button",
-		className: te(ue({
-			variant: t,
-			size: n,
-			className: e
-		})),
-		onClick: (e) => {
-			let t = typeof r == "string" ? r : r.pathname;
-			t && globalThis.location.pathname === t && globalThis.location.reload(), i && i(e);
-		},
-		children: a
-	});
+import { IconChevronLeft as ue, IconChevronRight as de, IconDotsVertical as V, IconDownload as fe, IconLogout as pe, IconPlus as H, IconSearch as U, IconUserCircle as me } from "@tabler/icons-react";
+import { useTranslation as W } from "react-i18next";
+import { Icon as he } from "@iconify/react";
+import { NavLink as G, Outlet as K, useLocation as q, useNavigate as J } from "react-router-dom";
+import { columnFilteringFeature as ge, createCoreRowModel as _e, createFilteredRowModel as ve, createPaginatedRowModel as ye, createSortedRowModel as be, globalFilteringFeature as xe, rowPaginationFeature as Se, rowSortingFeature as Ce, useTable as we } from "@tanstack/react-table";
+//#region src/lib/react-markers.ts
+function Y(e) {
+	return typeof e.type == "string" ? void 0 : e.type.displayName;
 }
 //#endregion
-//#region src/components/router/blank-slate.tsx
-var Z = ({ icon: e, title: t, description: n, urlNew: r, buttonText: i }) => /* @__PURE__ */ z("div", {
-	className: "flex items-center justify-center px-6 py-16",
-	children: /* @__PURE__ */ z("div", {
-		className: "relative w-full max-w-md overflow-hidden rounded-2xl border border-border/50 bg-card/80 backdrop-blur-sm shadow-xl",
-		children: /* @__PURE__ */ B("div", {
-			className: "relative flex flex-col items-center text-center px-8 py-12 space-y-6",
-			children: [
-				/* @__PURE__ */ B("div", {
-					className: "relative",
-					children: [/* @__PURE__ */ z("div", { className: "absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20 blur-xl animate-pulse" }), /* @__PURE__ */ z("div", {
-						className: "relative inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-500/25 ring-4 ring-blue-500/10",
-						children: /* @__PURE__ */ z(e, {
-							className: "text-white",
-							size: 30
-						})
-					})]
-				}),
-				/* @__PURE__ */ B("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ z("h2", {
-						className: "text-xl font-semibold tracking-tight",
-						children: t
-					}), /* @__PURE__ */ z("p", {
-						className: "text-sm text-muted-foreground leading-relaxed max-w-xs mx-auto",
-						children: n
-					})]
-				}),
-				r && /* @__PURE__ */ z(X, {
-					size: "lg",
-					to: r,
-					children: i
-				})
-			]
-		})
-	})
-}), Q = ({ feature: e, name: t, onDelete: r, open: a, setOpen: o, trigger: s, blockedBy: c, title: l, description: u, confirmLabel: d }) => {
-	let m = c && c.length > 0, g = Y(), { t: _ } = G(), [v, b] = L(""), x = v === t;
-	function S(e) {
-		o(e), e || b("");
-	}
-	return /* @__PURE__ */ B(y, {
-		open: a,
-		onOpenChange: S,
-		children: [s !== null && /* @__PURE__ */ z(h, {
-			asChild: !0,
-			children: s ?? /* @__PURE__ */ z(T, {
-				variant: "ghost",
-				size: "icon-sm",
-				children: /* @__PURE__ */ z(W, { className: "size-5!" })
-			})
-		}), /* @__PURE__ */ z(i, {
-			className: "sm:max-w-md",
-			children: m ? /* @__PURE__ */ B(R, { children: [
-				/* @__PURE__ */ B(n, { children: [
-					/* @__PURE__ */ z("div", {
-						className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-amber-500/10 ring-1 ring-amber-500/20 mb-2",
-						children: /* @__PURE__ */ z(ve, { className: "size-6 text-amber-500" })
-					}),
-					/* @__PURE__ */ z(f, {
-						className: "text-center",
-						children: _("dialog.cannotDelete", { feature: e })
-					}),
-					/* @__PURE__ */ z(p, {
-						className: "text-center",
-						children: _("dialog.inUse", { name: t })
-					})
-				] }),
-				/* @__PURE__ */ B("div", {
-					className: "space-y-3",
-					children: [
-						/* @__PURE__ */ z("p", {
-							className: "text-sm text-muted-foreground",
-							children: _("dialog.dependingSites", { feature: e })
-						}),
-						/* @__PURE__ */ z("div", {
-							className: "flex flex-wrap gap-2",
-							children: c.map((e) => {
-								let t = e.language ? le(e.language) : void 0;
-								return /* @__PURE__ */ z(he, {
-									text: e.name,
-									href: e.href,
-									onClick: (e) => {
-										o(!1), e && g(e);
-									},
-									prefix: t ? /* @__PURE__ */ z("img", {
-										src: `https://flagcdn.com/w40/${t}.png`,
-										alt: e.language,
-										className: "w-4 h-3 object-cover rounded-sm"
-									}) : void 0
-								}, e.id);
-							})
-						}),
-						/* @__PURE__ */ z("p", {
-							className: "text-xs text-muted-foreground",
-							children: _("dialog.removeDependencies", { feature: e })
-						})
-					]
-				}),
-				/* @__PURE__ */ z(O, { children: /* @__PURE__ */ z(T, {
-					onClick: () => o(!1),
-					variant: "outline",
-					className: "w-full",
-					children: _("dialog.understood")
-				}) })
-			] }) : /* @__PURE__ */ B(R, { children: [
-				/* @__PURE__ */ B(n, { children: [
-					/* @__PURE__ */ z("div", {
-						className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 ring-1 ring-red-500/20 mb-2",
-						children: /* @__PURE__ */ z(W, { className: "size-6 text-red-500" })
-					}),
-					/* @__PURE__ */ z(f, {
-						className: "text-center",
-						children: l ?? _("dialog.deleteFeature", { feature: e })
-					}),
-					/* @__PURE__ */ z(p, {
-						className: "text-center",
-						children: u ?? _("dialog.permanentDelete", { name: t })
-					})
-				] }),
-				/* @__PURE__ */ B("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ B("label", {
-						className: "text-sm text-muted-foreground",
-						children: [
-							_("dialog.typeToConfirm"),
-							" ",
-							/* @__PURE__ */ z("span", {
-								className: "font-mono font-semibold text-foreground bg-muted px-1.5 py-0.5 rounded",
-								children: t
-							}),
-							" ",
-							_("dialog.toConfirm")
-						]
-					}), /* @__PURE__ */ z(j, {
-						value: v,
-						onChange: (e) => b(e.target.value),
-						placeholder: t,
-						className: "font-mono text-sm",
-						autoFocus: !0
-					})]
-				}),
-				/* @__PURE__ */ B(O, {
-					className: "flex-col gap-2 sm:flex-col",
-					children: [/* @__PURE__ */ B(T, {
-						onClick: r,
-						variant: "destructive",
-						disabled: !x,
-						className: "w-full",
-						children: [/* @__PURE__ */ z(W, { className: "size-4" }), d ?? _("dialog.deleteFeature", { feature: e })]
-					}), /* @__PURE__ */ z(T, {
-						onClick: () => S(!1),
-						variant: "ghost",
-						className: "w-full",
-						children: _("common.cancel")
-					})]
-				})
-			] })
-		})]
-	});
-}, je = () => null;
-je.displayName = "GridListNewButton";
-var Me = () => null;
-Me.displayName = "GridListAction";
-var Ne = () => null;
-Ne.displayName = "GridListItemAction";
-var Pe = [
-	"from-blue-500 to-indigo-500",
+//#region src/components/router/grid.list.tsx
+var X = () => null;
+X.displayName = "GridListNewButton";
+var Z = () => null;
+Z.displayName = "GridListAction";
+var Te = () => null;
+Te.displayName = "GridListItemAction";
+var Ee = [
+	"vg-accent-solid",
 	"from-emerald-500 to-teal-500",
 	"from-violet-500 to-purple-500",
 	"from-amber-500 to-orange-500",
@@ -200,15 +31,24 @@ var Pe = [
 	"from-fuchsia-500 to-pink-500",
 	"from-lime-500 to-emerald-500"
 ];
-function Fe(e) {
+function De(e) {
 	let t = 0;
 	for (let n = 0; n < e.length; n++) t = (e.codePointAt(n) ?? 0) + ((t << 5) - t);
-	return Pe[Math.abs(t) % Pe.length];
+	return Ee[Math.abs(t) % Ee.length];
 }
-function Ie(e) {
+function Oe(e) {
 	return e.split(/[\s\-_]+/).filter(Boolean).slice(0, 2).map((e) => e[0].toUpperCase()).join("");
 }
-var Le = [
+var ke = {
+	columnFilteringFeature: ge,
+	globalFilteringFeature: xe,
+	rowPaginationFeature: Se,
+	rowSortingFeature: Ce,
+	coreRowModel: _e(),
+	filteredRowModel: ve(),
+	paginatedRowModel: ye(),
+	sortedRowModel: be()
+}, Ae = [
 	{
 		accessorKey: "name",
 		header: "Name"
@@ -221,16 +61,16 @@ var Le = [
 		accessorKey: "url",
 		header: "URL"
 	}
-], Re = Object.assign(({ gridItemList: e, children: t }) => {
-	let { t: n } = G(), r = Y(), i = [], a = [];
-	I.Children.forEach(t, (e) => {
+], je = Object.assign(({ gridItemList: t, children: i }) => {
+	let { t: c } = W(), u = J(), d = [], f = [];
+	I.Children.forEach(i, (e) => {
 		if (I.isValidElement(e)) {
-			if (e.type?.displayName === "GridListNewButton") {
+			if (Y(e) === "GridListNewButton") {
 				let { to: t, label: n } = e.props;
-				i.push({
+				d.push({
 					key: `new-${n}`,
-					render: () => /* @__PURE__ */ B(A, {
-						onClick: () => r(t),
+					render: () => /* @__PURE__ */ B(r, {
+						onClick: () => u(t),
 						children: [
 							/* @__PURE__ */ z(H, { className: "size-4 mr-2" }),
 							"New ",
@@ -238,16 +78,16 @@ var Le = [
 						]
 					})
 				});
-			} else if (e.type?.displayName === "GridListAction") {
+			} else if (Y(e) === "GridListAction") {
 				let { children: t } = e.props;
-				i.push({
-					key: `action-${i.length}`,
+				d.push({
+					key: `action-${d.length}`,
 					render: () => /* @__PURE__ */ z(R, { children: t })
 				});
-			} else if (e.type?.displayName === "GridListItemAction") {
+			} else if (Y(e) === "GridListItemAction") {
 				let t = e.props;
-				a.push({
-					key: `item-action-${a.length}`,
+				f.push({
+					key: `item-action-${f.length}`,
 					icon: t.icon,
 					label: t.label,
 					onClick: t.onClick,
@@ -256,26 +96,23 @@ var Le = [
 			}
 		}
 	});
-	let s = a.length > 0, c = a.filter((e) => e.position === "left"), l = a.filter((e) => e.position === "right"), [u, d] = L({
+	let m = f.length > 0, g = f.filter((e) => e.position === "left"), b = f.filter((e) => e.position === "right"), [x, S] = L({
 		pageIndex: 0,
 		pageSize: 12
-	}), [f, p] = I.useState([]), [m, h] = L(""), _ = ke({
-		data: e,
-		columns: Le,
-		onSortingChange: p,
-		getCoreRowModel: Te(),
-		getPaginationRowModel: De(),
-		getSortedRowModel: Oe(),
-		getFilteredRowModel: Ee(),
+	}), [C, w] = I.useState([]), [T, E] = L(""), D = we({
+		features: ke,
+		data: t,
+		columns: Ae,
+		onSortingChange: w,
 		state: {
-			globalFilter: m,
-			pagination: u,
-			sorting: f
+			globalFilter: T,
+			pagination: x,
+			sorting: C
 		},
-		onGlobalFilterChange: h,
+		onGlobalFilterChange: E,
 		getColumnCanGlobalFilter: (e) => e.id === "name" || e.id === "description",
-		onPaginationChange: d
-	}), v = _.getRowModel().rows;
+		onPaginationChange: S
+	}), O = D.getRowModel().rows;
 	return /* @__PURE__ */ B("div", {
 		className: "px-6",
 		children: [
@@ -284,133 +121,133 @@ var Le = [
 				children: [
 					/* @__PURE__ */ B("div", {
 						className: "relative flex-1 max-w-sm",
-						children: [/* @__PURE__ */ z(U, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ z(j, {
-							placeholder: n("forms.common.search"),
-							value: m ?? "",
-							onChange: (e) => h(e.target.value),
+						children: [/* @__PURE__ */ z(U, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ z(a, {
+							placeholder: c("forms.common.search"),
+							value: T ?? "",
+							onChange: (e) => E(e.target.value),
 							className: "pl-9"
 						})]
 					}),
 					/* @__PURE__ */ B("span", {
 						className: "text-sm text-muted-foreground whitespace-nowrap",
 						children: [
-							_.getFilteredRowModel().rows.length,
+							D.getFilteredRowModel().rows.length,
 							" ",
-							_.getFilteredRowModel().rows.length === 1 ? n("forms.common.item") : n("forms.common.items")
+							D.getFilteredRowModel().rows.length === 1 ? c("forms.common.item") : c("forms.common.items")
 						]
 					}),
-					i.length > 0 && /* @__PURE__ */ z("div", {
+					d.length > 0 && /* @__PURE__ */ z("div", {
 						className: "ml-auto",
-						children: /* @__PURE__ */ B(M, { children: [/* @__PURE__ */ z(P, {
+						children: /* @__PURE__ */ B(n, { children: [/* @__PURE__ */ z(e, {
 							asChild: !0,
-							children: /* @__PURE__ */ B(T, {
+							children: /* @__PURE__ */ B(s, {
 								variant: "outline",
 								size: "sm",
 								className: "gap-1.5",
 								children: [/* @__PURE__ */ z(V, { className: "size-4" }), /* @__PURE__ */ z("span", {
 									className: "hidden sm:inline",
-									children: n("forms.common.actions")
+									children: c("forms.common.actions")
 								})]
 							})
-						}), /* @__PURE__ */ z(E, {
+						}), /* @__PURE__ */ z(o, {
 							align: "end",
-							children: i.map((e) => /* @__PURE__ */ z(I.Fragment, { children: e.render() }, e.key))
+							children: d.map((e) => /* @__PURE__ */ z(I.Fragment, { children: e.render() }, e.key))
 						})] })
 					})
 				]
 			}),
-			v.length > 0 ? /* @__PURE__ */ z("div", {
+			O.length > 0 ? /* @__PURE__ */ z("div", {
 				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
-				children: v.map((e) => {
-					let t = e.getValue("name"), r = e.getValue("description"), i = e.getValue("url"), a = e.original.icon ?? void 0, u = Fe(t), d = Ie(t), f = /* @__PURE__ */ B(o, {
-						className: "relative overflow-hidden p-0 h-full transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/10 hover:-translate-y-0.5 border-border/60 hover:border-blue-500/30 dark:hover:border-blue-400/30",
-						children: [/* @__PURE__ */ z("div", { className: `h-1.5 bg-linear-to-r ${u} opacity-70 group-hover:opacity-100 transition-opacity` }), /* @__PURE__ */ B("div", {
+				children: O.map((e) => {
+					let t = e.getValue("name"), n = e.getValue("description"), r = e.getValue("url"), i = e.original.icon ?? void 0, a = De(t), o = Oe(t), s = /* @__PURE__ */ B(l, {
+						className: "relative overflow-hidden p-0 h-full transition-all duration-200 hover:shadow-lg hover:shadow-[var(--vg-accent-surface)] hover:-translate-y-0.5 border-border/60 hover:border-[var(--vg-accent-line)]",
+						children: [/* @__PURE__ */ z("div", { className: `h-1.5 bg-linear-to-r ${a} opacity-70 group-hover:opacity-100 transition-opacity` }), /* @__PURE__ */ B("div", {
 							className: "p-4 flex items-start gap-3",
 							children: [
-								s && c.length > 0 && /* @__PURE__ */ z("div", {
+								m && g.length > 0 && /* @__PURE__ */ z("div", {
 									className: "flex items-center gap-1 shrink-0 mt-0.5",
-									children: c.map((t) => /* @__PURE__ */ z("button", {
+									children: g.map((t) => /* @__PURE__ */ z("button", {
 										type: "button",
 										title: t.label,
 										onClick: () => t.onClick(e.original),
-										className: "inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 dark:hover:text-blue-400 dark:hover:bg-blue-400/10 transition-colors cursor-pointer",
+										className: "inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-[var(--vg-accent-fg)] hover:bg-[var(--vg-accent-surface)] transition-colors cursor-pointer",
 										children: t.icon
 									}, t.key))
 								}),
 								/* @__PURE__ */ z("div", {
-									className: `shrink-0 w-10 h-10 rounded-lg bg-linear-to-br ${u} flex items-center justify-center text-white text-sm font-semibold shadow-sm`,
-									children: a ? /* @__PURE__ */ z(Ae, {
-										icon: a,
+									className: `shrink-0 w-10 h-10 rounded-lg bg-linear-to-br ${a} flex items-center justify-center text-white text-sm font-semibold shadow-sm`,
+									children: i ? /* @__PURE__ */ z(he, {
+										icon: i,
 										className: "size-5"
-									}) : d
+									}) : o
 								}),
 								/* @__PURE__ */ B("div", {
 									className: "flex-1 min-w-0",
 									children: [/* @__PURE__ */ z("h3", {
-										className: "font-medium text-sm truncate group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors",
+										className: "font-medium text-sm truncate group-hover:text-[var(--vg-accent-fg)] transition-colors",
 										children: t
-									}), r ? /* @__PURE__ */ z("p", {
+									}), n ? /* @__PURE__ */ z("p", {
 										className: "text-xs text-muted-foreground mt-1 line-clamp-2 leading-relaxed",
-										children: r
+										children: n
 									}) : /* @__PURE__ */ z("p", {
 										className: "text-xs text-muted-foreground/50 mt-1 italic",
-										children: n("forms.common.noDescription")
+										children: c("forms.common.noDescription")
 									})]
 								}),
-								s ? l.length > 0 && /* @__PURE__ */ z("div", {
+								m ? b.length > 0 && /* @__PURE__ */ z("div", {
 									className: "flex items-center gap-1 shrink-0 mt-0.5",
-									children: l.map((t) => /* @__PURE__ */ z("button", {
+									children: b.map((t) => /* @__PURE__ */ z("button", {
 										type: "button",
 										title: t.label,
 										onClick: () => t.onClick(e.original),
-										className: "inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 dark:hover:text-blue-400 dark:hover:bg-blue-400/10 transition-colors cursor-pointer",
+										className: "inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-[var(--vg-accent-fg)] hover:bg-[var(--vg-accent-surface)] transition-colors cursor-pointer",
 										children: t.icon
 									}, t.key))
-								}) : /* @__PURE__ */ z(xe, { className: "h-4 w-4 text-muted-foreground/40 group-hover:text-blue-500 transition-all group-hover:translate-x-0.5 mt-0.5 shrink-0" })
+								}) : /* @__PURE__ */ z(de, { className: "h-4 w-4 text-muted-foreground/40 group-hover:text-[var(--vg-accent-fg)] transition-all group-hover:translate-x-0.5 mt-0.5 shrink-0" })
 							]
 						})]
 					});
-					return s ? /* @__PURE__ */ z("div", {
+					return m ? /* @__PURE__ */ z("div", {
 						className: "group",
-						children: f
-					}, e.id) : /* @__PURE__ */ z(K, {
-						to: i,
+						children: s
+					}, e.id) : /* @__PURE__ */ z(G, {
+						to: r,
 						className: "group",
-						children: f
+						children: s
 					}, e.id);
 				})
-			}) : /* @__PURE__ */ z(o, {
+			}) : /* @__PURE__ */ z(l, {
 				className: "p-8",
 				children: /* @__PURE__ */ B("div", {
 					className: "text-center text-muted-foreground",
 					children: [/* @__PURE__ */ z(U, { className: "h-8 w-8 mx-auto mb-2 opacity-40" }), /* @__PURE__ */ z("p", {
 						className: "text-sm",
-						children: n("forms.common.noResults")
+						children: c("forms.common.noResults")
 					})]
 				})
 			}),
-			_.getPageCount() > 1 && /* @__PURE__ */ B("div", {
+			D.getPageCount() > 1 && /* @__PURE__ */ B("div", {
 				className: "flex items-center justify-end space-x-2 mt-4",
 				children: [
 					/* @__PURE__ */ B("div", {
 						className: "flex items-center space-x-2",
 						children: [/* @__PURE__ */ z("p", {
 							className: "text-sm text-muted-foreground",
-							children: n("forms.common.perPage")
-						}), /* @__PURE__ */ B(ee, {
-							value: `${_.getState().pagination.pageSize}`,
-							onValueChange: (e) => _.setPageSize(Number(e)),
-							children: [/* @__PURE__ */ z(ne, {
+							children: c("forms.common.perPage")
+						}), /* @__PURE__ */ B(_, {
+							value: `${D.state.pagination.pageSize}`,
+							onValueChange: (e) => D.setPageSize(Number(e)),
+							children: [/* @__PURE__ */ z(y, {
 								className: "h-8 w-17.5",
-								children: /* @__PURE__ */ z(fe, { placeholder: _.getState().pagination.pageSize })
-							}), /* @__PURE__ */ z(g, {
+								children: /* @__PURE__ */ z(h, { placeholder: D.state.pagination.pageSize })
+							}), /* @__PURE__ */ z(v, {
 								side: "top",
 								children: [
 									12,
 									24,
 									36,
 									48
-								].map((e) => /* @__PURE__ */ z(ae, {
+								].map((e) => /* @__PURE__ */ z(p, {
 									value: `${e}`,
 									children: e
 								}, e))
@@ -419,25 +256,25 @@ var Le = [
 					}),
 					/* @__PURE__ */ z("div", {
 						className: "flex w-25 items-center justify-center text-sm font-medium",
-						children: n("forms.common.pageOf", {
-							index: _.getState().pagination.pageIndex + 1,
-							count: _.getPageCount()
+						children: c("forms.common.pageOf", {
+							index: D.state.pagination.pageIndex + 1,
+							count: D.getPageCount()
 						})
 					}),
 					/* @__PURE__ */ B("div", {
 						className: "flex items-center space-x-2",
-						children: [/* @__PURE__ */ z(T, {
+						children: [/* @__PURE__ */ z(s, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => _.previousPage(),
-							disabled: !_.getCanPreviousPage(),
+							onClick: () => D.previousPage(),
+							disabled: !D.getCanPreviousPage(),
 							className: "h-8 w-8 p-0",
 							children: /* @__PURE__ */ z("span", { children: "<" })
-						}), /* @__PURE__ */ z(T, {
+						}), /* @__PURE__ */ z(s, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => _.nextPage(),
-							disabled: !_.getCanNextPage(),
+							onClick: () => D.nextPage(),
+							disabled: !D.getCanNextPage(),
 							className: "h-8 w-8 p-0",
 							children: /* @__PURE__ */ z("span", { children: ">" })
 						})]
@@ -447,118 +284,97 @@ var Le = [
 		]
 	});
 }, {
-	NewButton: je,
-	Action: Me,
-	ItemAction: Ne
-}), ze = (e) => (e ?? 0).toLocaleString(), Be = (e, t, n, r, i) => e.map((e) => /* @__PURE__ */ B(v, { children: [/* @__PURE__ */ z(N, {
+	NewButton: X,
+	Action: Z,
+	ItemAction: Te
+}), Me = (e) => !e.url && (e.children?.length ?? 0) > 0, Ne = (e, t, n) => {
+	if (e.url) {
+		let r = (t ?? "") + e.url;
+		if (n === r || n.startsWith(r + "/")) return !0;
+	}
+	return e.children?.some((e) => Ne(e, t, n)) ?? !1;
+}, Pe = (e) => (e ?? 0).toLocaleString(), Q = (e, t, n, r, i) => e.map((e) => /* @__PURE__ */ B(g, { children: [/* @__PURE__ */ z(P, {
 	tooltip: e.title,
-	isActive: n.startsWith((t ?? "") + e.url),
+	isActive: Ne(e, t, n),
 	asChild: !0,
-	children: /* @__PURE__ */ B(K, {
-		to: (t ?? "") + e.url,
+	children: /* @__PURE__ */ B(G, {
+		to: (t ?? "") + (e.url ?? ""),
 		onClick: i,
 		children: [e.icon && /* @__PURE__ */ z(e.icon, { className: "size-5!" }), /* @__PURE__ */ z("span", { children: e.title })]
 	})
-}), !r && e.children && e.children.length > 0 && /* @__PURE__ */ z(F, {
+}), !r && e.children && e.children.length > 0 && /* @__PURE__ */ z(N, {
 	className: "ml-4",
-	children: Be(e.children, t, n, r, i)
-})] }, e.title)), Ve = ({ icon: e, feature: t, name: n, urlBase: i, isNew: a, data: o, onDelete: s, onExport: c, open: l, setOpen: u }) => {
-	let { t: d } = G(), f = J().pathname, { state: p, isMobile: h, setOpenMobile: g } = m(), _ = p === "collapsed", y = h ? () => g(!1) : void 0;
-	return /* @__PURE__ */ B(ie, {
+	children: Q(e.children, t, n, r, i)
+})] }, e.title)), $ = ({ icon: e, feature: t, name: n, urlBase: r, isNew: i, data: a, onDelete: o, onExport: c, open: l, setOpen: u }) => {
+	let { t: d } = W(), f = q().pathname, { state: p, isMobile: m, setOpenMobile: h } = k(), _ = p === "collapsed", v = m ? () => h(!1) : void 0;
+	return /* @__PURE__ */ B(S, {
 		collapsible: "icon",
 		variant: "inset",
 		position: "absolute",
-		children: [/* @__PURE__ */ z(ge, {
+		children: [/* @__PURE__ */ z(D, {
 			className: "pb-3",
-			children: /* @__PURE__ */ z(F, { children: /* @__PURE__ */ B(v, {
+			children: /* @__PURE__ */ z(N, { children: /* @__PURE__ */ B(g, {
 				className: "flex items-center",
-				children: [/* @__PURE__ */ z(N, {
+				children: [/* @__PURE__ */ z(P, {
 					asChild: !0,
 					className: "data-[slot=sidebar-menu-button]:p-1.5!",
-					children: /* @__PURE__ */ B(K, {
-						to: i ?? "#",
+					children: /* @__PURE__ */ B(G, {
+						to: r ?? "#",
 						className: "flex items-center gap-2.5",
 						children: [/* @__PURE__ */ z("div", {
-							className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-blue-500/10 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/20 ring-1 ring-blue-500/10 dark:ring-blue-400/10",
-							children: /* @__PURE__ */ z(e, { className: "size-5! text-blue-600 dark:text-blue-400" })
+							className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg vg-accent-chip ring-1",
+							children: /* @__PURE__ */ z(e, { className: "size-5! vg-accent-text" })
 						}), !_ && /* @__PURE__ */ z("span", {
 							className: "text-sm font-semibold whitespace-nowrap truncate",
-							children: a ? d("sidebar.new", { feature: t }) : n
+							children: i ? d("sidebar.new", { feature: t }) : n
 						})]
 					})
 				}), !_ && /* @__PURE__ */ B("div", {
 					className: "flex items-center gap-1 mr-auto",
-					children: [!a && c && /* @__PURE__ */ z(T, {
+					children: [!i && c && /* @__PURE__ */ z(s, {
 						variant: "ghost",
 						size: "icon-sm",
 						onClick: c,
-						children: /* @__PURE__ */ z(Se, { className: "size-5!" })
-					}), !a && s && u && /* @__PURE__ */ z(Q, {
+						children: /* @__PURE__ */ z(fe, { className: "size-5!" })
+					}), !i && o && u && /* @__PURE__ */ z(F, {
 						feature: t,
 						name: n,
-						onDelete: s,
+						onDelete: o,
 						open: l ?? !1,
 						setOpen: u
 					})]
 				})]
 			}) })
-		}), /* @__PURE__ */ B(oe, { children: [o?.counts && o.counts.length > 0 && /* @__PURE__ */ B(k, { children: [/* @__PURE__ */ z(w, { children: d("sidebar.indexing") }), /* @__PURE__ */ z(D, {
+		}), /* @__PURE__ */ B(te, { children: [a?.counts && a.counts.length > 0 && /* @__PURE__ */ B(w, { children: [/* @__PURE__ */ z(A, { children: d("sidebar.indexing") }), /* @__PURE__ */ z(j, {
 			className: "flex flex-col gap-2 pt-4",
-			children: /* @__PURE__ */ z(F, { children: o.counts.map((e) => /* @__PURE__ */ B(v, { children: [/* @__PURE__ */ B(N, {
-				tooltip: e.title + ": " + ze(e.count),
+			children: /* @__PURE__ */ z(N, { children: a.counts.map((e) => /* @__PURE__ */ B(g, { children: [/* @__PURE__ */ B(P, {
+				tooltip: e.title + ": " + Pe(e.count),
 				variant: "outline",
 				children: [e.icon && /* @__PURE__ */ z(e.icon, { className: "size-5!" }), /* @__PURE__ */ z("span", { children: e.title })]
-			}), !_ && /* @__PURE__ */ z(r, { children: ze(e.count) })] }, e.title)) })
-		})] }), /* @__PURE__ */ B(k, { children: [/* @__PURE__ */ z(w, { children: t }), /* @__PURE__ */ z(D, {
-			className: "flex flex-col gap-2",
-			children: /* @__PURE__ */ z(F, { children: o?.navMain && Be(a ? o.navMain.filter((e) => e.url === "/detail") : o.navMain, i, f, _, y) })
-		})] })] })]
+			}), !_ && /* @__PURE__ */ z(x, { children: Pe(e.count) })] }, e.title)) })
+		})] }), (() => {
+			let e = a?.navMain ?? [], n = i ? e.filter((e) => e.showOnNew ?? e.url === "/detail") : e, o = n.filter((e) => !Me(e)), s = n.filter(Me);
+			return /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ B(w, { children: [/* @__PURE__ */ z(A, { children: t }), /* @__PURE__ */ z(j, {
+				className: "flex flex-col gap-2",
+				children: /* @__PURE__ */ z(N, { children: Q(o, r, f, _, v) })
+			})] }), s.map((e) => /* @__PURE__ */ B(w, { children: [/* @__PURE__ */ z(A, { children: e.title }), /* @__PURE__ */ z(j, {
+				className: "flex flex-col gap-2",
+				children: /* @__PURE__ */ z(N, { children: Q(e.children ?? [], r, f, _, v) })
+			})] }, e.title))] });
+		})()] })]
 	});
-}, He = ({ checkIsNotUndefined: e, error: t, tryAgainUrl: n, children: r }) => {
-	let { t: i } = G();
-	return t ? /* @__PURE__ */ z(Z, {
-		icon: ye,
-		title: i("common.errorLoading"),
-		description: t,
-		buttonText: i("common.tryAgain"),
-		urlNew: n
-	}) : e === void 0 && !t ? /* @__PURE__ */ B("div", {
-		className: "space-y-6 py-8 px-6 animate-pulse",
-		children: [
-			/* @__PURE__ */ z(b, { className: "h-8 w-1/3 rounded-md" }),
-			/* @__PURE__ */ z("div", {
-				className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
-				children: [
-					"skeleton-1",
-					"skeleton-2",
-					"skeleton-3"
-				].map((e) => /* @__PURE__ */ B("div", {
-					className: "space-y-3 p-4 border rounded-xl bg-slate-50/50 dark:bg-slate-900/20",
-					children: [
-						/* @__PURE__ */ z(b, { className: "h-5 w-2/3" }),
-						/* @__PURE__ */ z(b, { className: "h-12 w-full" }),
-						/* @__PURE__ */ z(b, { className: "h-4 w-5/6" })
-					]
-				}, e))
-			}),
-			/* @__PURE__ */ z("div", {
-				className: "pt-4",
-				children: /* @__PURE__ */ z(b, { className: "h-10 w-32 rounded-lg" })
-			})
-		]
-	}) : /* @__PURE__ */ z(R, { children: r });
 };
 //#endregion
 //#region src/components/router/nav-main.tsx
-function Ue({ groups: e }) {
-	let t = J().pathname, { isMobile: n, setOpenMobile: r } = m();
-	return /* @__PURE__ */ z(R, { children: e.map((e) => /* @__PURE__ */ B(k, { children: [e.label && /* @__PURE__ */ z(w, { children: e.label }), /* @__PURE__ */ z(D, {
+function Fe({ groups: e }) {
+	let t = q().pathname, { isMobile: n, setOpenMobile: r } = k();
+	return /* @__PURE__ */ z(R, { children: e.map((e) => /* @__PURE__ */ B(w, { children: [e.label && /* @__PURE__ */ z(A, { children: e.label }), /* @__PURE__ */ z(j, {
 		className: "flex flex-col gap-2",
-		children: /* @__PURE__ */ z(F, { children: e.items.map((e) => /* @__PURE__ */ z(v, { children: /* @__PURE__ */ z(N, {
+		children: /* @__PURE__ */ z(N, { children: e.items.map((e) => /* @__PURE__ */ z(g, { children: /* @__PURE__ */ z(P, {
 			tooltip: e.title,
 			isActive: t.startsWith(e.url),
 			asChild: !0,
-			children: /* @__PURE__ */ B(K, {
+			children: /* @__PURE__ */ B(G, {
 				to: e.url,
 				onClick: () => n && r(!1),
 				children: [e.icon && /* @__PURE__ */ z(e.icon, { className: "size-6!" }), /* @__PURE__ */ z("span", { children: e.title })]
@@ -568,29 +384,29 @@ function Ue({ groups: e }) {
 }
 //#endregion
 //#region src/components/router/nav-user.tsx
-function We({ user: t, accountUrl: n, logoutUrl: r, onLogout: i }) {
-	let { t: a } = G(), { isMobile: o } = m(), s = () => {
-		i ? i() : r && (globalThis.location.href = r);
-	}, c = I.useMemo(() => {
-		let e = t.firstName || "", n = t.lastName || "";
-		if (!e && !n) return " ";
-		let r = `${e} ${n}`.trim().split(" ").filter(Boolean);
-		return r.length === 1 ? r[0].charAt(0).toUpperCase() : r[0].charAt(0).toUpperCase() + (r.at(-1)?.charAt(0).toUpperCase() ?? "");
-	}, [t]), l = t?.avatarUrl || "";
-	return /* @__PURE__ */ z(F, { children: /* @__PURE__ */ z(v, { children: /* @__PURE__ */ B(M, { children: [/* @__PURE__ */ z(P, {
+function Ie({ user: a, accountUrl: s, logoutUrl: l, onLogout: u }) {
+	let { t: d } = W(), { isMobile: f } = k(), p = () => {
+		u ? u() : l && (globalThis.location.href = l);
+	}, m = I.useMemo(() => {
+		let e = a.firstName || "", t = a.lastName || "";
+		if (!e && !t) return " ";
+		let n = `${e} ${t}`.trim().split(" ").filter(Boolean);
+		return n.length === 1 ? n[0].charAt(0).toUpperCase() : n[0].charAt(0).toUpperCase() + (n.at(-1)?.charAt(0).toUpperCase() ?? "");
+	}, [a]), h = a?.avatarUrl || "";
+	return /* @__PURE__ */ z(N, { children: /* @__PURE__ */ z(g, { children: /* @__PURE__ */ B(n, { children: [/* @__PURE__ */ z(e, {
 		asChild: !0,
-		children: /* @__PURE__ */ B(N, {
+		children: /* @__PURE__ */ B(P, {
 			size: "lg",
 			className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
 			children: [
-				/* @__PURE__ */ B(C, {
+				/* @__PURE__ */ B(M, {
 					className: "h-8 w-8 rounded-lg",
-					children: [l && /* @__PURE__ */ z(e, {
-						src: l,
-						alt: t.username
-					}), /* @__PURE__ */ z(_, {
+					children: [h && /* @__PURE__ */ z(O, {
+						src: h,
+						alt: a.username
+					}), /* @__PURE__ */ z(re, {
 						className: "rounded-lg",
-						children: c
+						children: m
 					})]
 				}),
 				/* @__PURE__ */ B("div", {
@@ -598,102 +414,102 @@ function We({ user: t, accountUrl: n, logoutUrl: r, onLogout: i }) {
 					children: [/* @__PURE__ */ B("span", {
 						className: "truncate font-medium",
 						children: [
-							t.firstName,
+							a.firstName,
 							" ",
-							t.lastName
+							a.lastName
 						]
 					}), /* @__PURE__ */ z("span", {
 						className: "text-muted-foreground truncate text-xs",
-						children: t.email
+						children: a.email
 					})]
 				}),
 				/* @__PURE__ */ z(V, { className: "ml-auto size-4" })
 			]
 		})
-	}), /* @__PURE__ */ B(E, {
+	}), /* @__PURE__ */ B(o, {
 		className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
-		side: o ? "bottom" : "right",
+		side: f ? "bottom" : "right",
 		align: "end",
 		sideOffset: 4,
 		children: [
-			/* @__PURE__ */ z(se, {
+			/* @__PURE__ */ z(t, {
 				className: "p-0 font-normal",
 				children: /* @__PURE__ */ B("div", {
 					className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm",
-					children: [/* @__PURE__ */ B(C, {
+					children: [/* @__PURE__ */ B(M, {
 						className: "h-8 w-8 rounded-lg",
-						children: [l && /* @__PURE__ */ z(e, {
-							src: l,
-							alt: t.username
-						}), /* @__PURE__ */ z(_, {
+						children: [h && /* @__PURE__ */ z(O, {
+							src: h,
+							alt: a.username
+						}), /* @__PURE__ */ z(re, {
 							className: "rounded-lg",
-							children: c
+							children: m
 						})]
 					}), /* @__PURE__ */ B("div", {
 						className: "grid flex-1 text-left text-sm leading-tight",
 						children: [/* @__PURE__ */ B("span", {
 							className: "truncate font-medium",
 							children: [
-								t.firstName,
+								a.firstName,
 								" ",
-								t.lastName
+								a.lastName
 							]
 						}), /* @__PURE__ */ z("span", {
 							className: "text-muted-foreground truncate text-xs",
-							children: t.email
+							children: a.email
 						})]
 					})]
 				})
 			}),
-			/* @__PURE__ */ z(_e, {}),
-			n && /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(pe, { children: /* @__PURE__ */ z(K, {
-				to: n,
+			/* @__PURE__ */ z(c, {}),
+			s && /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(i, { children: /* @__PURE__ */ z(G, {
+				to: s,
 				className: "w-full",
-				children: /* @__PURE__ */ B(A, { children: [/* @__PURE__ */ z(we, {}), a("nav.account")] })
-			}) }), /* @__PURE__ */ z(_e, {})] }),
-			/* @__PURE__ */ B(A, {
-				onClick: s,
+				children: /* @__PURE__ */ B(r, { children: [/* @__PURE__ */ z(me, {}), d("nav.account")] })
+			}) }), /* @__PURE__ */ z(c, {})] }),
+			/* @__PURE__ */ B(r, {
+				onClick: p,
 				className: "cursor-pointer",
-				children: [/* @__PURE__ */ z(Ce, {}), /* @__PURE__ */ z("span", { children: a("nav.logOut") })]
+				children: [/* @__PURE__ */ z(pe, {}), /* @__PURE__ */ z("span", { children: d("nav.logOut") })]
 			})
 		]
 	})] }) }) });
 }
 //#endregion
 //#region src/components/router/page-content.tsx
-var $ = () => /* @__PURE__ */ z("div", {
+var Le = () => /* @__PURE__ */ z("div", {
 	className: "flex flex-1 flex-col",
 	children: /* @__PURE__ */ z("div", {
 		className: "@container/main flex flex-1 flex-col gap-2",
 		children: /* @__PURE__ */ z("div", {
 			className: "flex flex-col gap-2 px-1 py-1 md:gap-3 md:px-2 md:py-2",
-			children: /* @__PURE__ */ z(q, {})
+			children: /* @__PURE__ */ z(K, {})
 		})
 	})
-}), Ge = ({ icon: e, title: t, urlBase: n, children: r }) => {
-	let { items: i } = de(), a = Y(), { t: o } = G(), f = i.length > 0 ? i[i.length - 1] : null, p = i.length > 1 ? i[i.length - 2] : null;
+}), Re = ({ icon: e, title: t, urlBase: n, children: r }) => {
+	let { items: i } = ie(), a = J(), { t: o } = W(), s = i.length > 0 ? i[i.length - 1] : null, c = i.length > 1 ? i[i.length - 2] : null;
 	return /* @__PURE__ */ z("header", {
 		className: "flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)",
 		children: /* @__PURE__ */ B("div", {
 			className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6",
 			children: [
-				/* @__PURE__ */ z(d, { className: "-ml-1 hidden md:flex" }),
-				/* @__PURE__ */ z(S, {
+				/* @__PURE__ */ z(u, { className: "-ml-1 hidden md:flex" }),
+				/* @__PURE__ */ z(f, {
 					orientation: "vertical",
 					className: "mx-2 data-[orientation=vertical]:h-4 hidden md:block"
 				}),
 				/* @__PURE__ */ B("div", {
 					className: "hidden md:flex items-center gap-1",
 					children: [e && /* @__PURE__ */ z("div", {
-						className: "flex h-8 w-8 items-center justify-center rounded-lg bg-linear-to-br from-blue-500/10 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/20 ring-1 ring-blue-500/10 dark:ring-blue-400/10 mr-1",
-						children: /* @__PURE__ */ z(e, { className: "size-4.5! text-blue-600 dark:text-blue-400" })
-					}), n ? /* @__PURE__ */ z(c, { children: /* @__PURE__ */ z(u, { children: i.map((e, t) => /* @__PURE__ */ B(I.Fragment, { children: [t > 0 && /* @__PURE__ */ z(l, {}), /* @__PURE__ */ z(x, { children: e.href ? /* @__PURE__ */ z(s, {
+						className: "flex h-8 w-8 items-center justify-center rounded-lg vg-accent-chip ring-1 mr-1",
+						children: /* @__PURE__ */ z(e, { className: "size-4.5! vg-accent-text" })
+					}), n ? /* @__PURE__ */ z(ae, { children: /* @__PURE__ */ z(oe, { children: i.map((e, t) => /* @__PURE__ */ B(I.Fragment, { children: [t > 0 && /* @__PURE__ */ z(E, {}), /* @__PURE__ */ z(C, { children: e.href ? /* @__PURE__ */ z(ne, {
 						asChild: !0,
-						children: /* @__PURE__ */ z(K, {
+						children: /* @__PURE__ */ z(G, {
 							to: e.href,
 							children: e.label
 						})
-					}) : /* @__PURE__ */ z(me, { children: e.label }) })] }, e.label)) }) }) : /* @__PURE__ */ z("h1", {
+					}) : /* @__PURE__ */ z(T, { children: e.label }) })] }, e.label)) }) }) : /* @__PURE__ */ z("h1", {
 						className: "text-base font-semibold",
 						children: t
 					})]
@@ -701,20 +517,20 @@ var $ = () => /* @__PURE__ */ z("div", {
 				/* @__PURE__ */ B("div", {
 					className: "flex md:hidden items-center gap-2 min-w-0 flex-1",
 					children: [
-						p?.href && /* @__PURE__ */ z("button", {
+						c?.href && /* @__PURE__ */ z("button", {
 							type: "button",
 							title: o("common.goBack"),
-							onClick: () => a(p.href),
+							onClick: () => a(c.href),
 							className: "shrink-0 flex items-center justify-center size-8 rounded-lg hover:bg-muted transition-colors",
-							children: /* @__PURE__ */ z(be, { className: "size-4" })
+							children: /* @__PURE__ */ z(ue, { className: "size-4" })
 						}),
 						e && /* @__PURE__ */ z("div", {
-							className: "flex shrink-0 h-7 w-7 items-center justify-center rounded-lg bg-linear-to-br from-blue-500/10 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/20 ring-1 ring-blue-500/10 dark:ring-blue-400/10",
-							children: /* @__PURE__ */ z(e, { className: "size-3.5! text-blue-600 dark:text-blue-400" })
+							className: "flex shrink-0 h-7 w-7 items-center justify-center rounded-lg vg-accent-chip ring-1",
+							children: /* @__PURE__ */ z(e, { className: "size-3.5! vg-accent-text" })
 						}),
 						/* @__PURE__ */ z("span", {
 							className: "text-sm font-semibold truncate",
-							children: f?.label ?? t
+							children: s?.label ?? t
 						})
 					]
 				}),
@@ -727,31 +543,31 @@ var $ = () => /* @__PURE__ */ z("div", {
 						}),
 						/* @__PURE__ */ z("div", {
 							className: "hidden md:block",
-							children: /* @__PURE__ */ z(ce, {})
+							children: /* @__PURE__ */ z(ee, {})
 						}),
-						/* @__PURE__ */ z(d, { className: "md:hidden" })
+						/* @__PURE__ */ z(u, { className: "md:hidden" })
 					]
 				})
 			]
 		})
 	});
-}, Ke = ({ icon: e, title: t, urlBase: n }) => /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(Ge, {
+}, ze = ({ icon: e, title: t, urlBase: n }) => /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(Re, {
 	icon: e,
 	title: t,
 	urlBase: n
-}), /* @__PURE__ */ z($, {})] }), qe = ({ icon: e, feature: t, description: n, urlBase: r }) => {
-	let i = a(), o = i?.isMobile ?? !1, s = i?.toggleSidebar ?? (() => {}), c = /* @__PURE__ */ B("div", {
+}), /* @__PURE__ */ z(Le, {})] }), Be = ({ icon: e, feature: t, description: n, urlBase: r }) => {
+	let i = m(), a = i?.isMobile ?? !1, o = i?.toggleSidebar ?? (() => {}), s = /* @__PURE__ */ B("div", {
 		className: "flex items-center gap-3",
 		children: [/* @__PURE__ */ z("div", {
-			className: `flex h-9 w-9 items-center justify-center rounded-lg bg-linear-to-br from-blue-500/10 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/20 ring-1 ring-blue-500/10 dark:ring-blue-400/10 ${o ? "cursor-pointer active:scale-95 transition-transform" : ""}`,
-			onClick: o ? s : void 0,
-			onKeyDown: o ? (e) => {
-				(e.key === "Enter" || e.key === " ") && s();
+			className: `flex h-9 w-9 items-center justify-center rounded-lg vg-accent-chip ring-1 ${a ? "cursor-pointer active:scale-95 transition-transform" : ""}`,
+			onClick: a ? o : void 0,
+			onKeyDown: a ? (e) => {
+				(e.key === "Enter" || e.key === " ") && o();
 			} : void 0,
-			tabIndex: o ? 0 : void 0,
-			role: o ? "button" : void 0,
-			title: o ? "Open navigation" : void 0,
-			children: /* @__PURE__ */ z(e, { className: "size-5! text-blue-600 dark:text-blue-400" })
+			tabIndex: a ? 0 : void 0,
+			role: a ? "button" : void 0,
+			title: a ? "Open navigation" : void 0,
+			children: /* @__PURE__ */ z(e, { className: "size-5! vg-accent-text" })
 		}), /* @__PURE__ */ B("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ z("h1", {
@@ -763,54 +579,54 @@ var $ = () => /* @__PURE__ */ z("div", {
 			})]
 		})]
 	});
-	return r && !o ? /* @__PURE__ */ z("div", {
+	return r && !a ? /* @__PURE__ */ z("div", {
 		className: "min-w-0 flex-1",
-		children: /* @__PURE__ */ z(K, {
+		children: /* @__PURE__ */ z(G, {
 			to: r,
 			className: "group inline-flex max-w-full",
-			children: c
+			children: s
 		})
 	}) : /* @__PURE__ */ z("div", {
 		className: "min-w-0 flex-1",
-		children: c
+		children: s
 	});
 };
-qe.displayName = "StickyPageHeaderTitle";
-var Je = () => null;
-Je.displayName = "StickyPageHeaderAction";
-var Ye = ({ children: e, menuLabel: t }) => {
-	let n = Y(), { t: r } = G(), i = [], a = [];
-	I.Children.forEach(e, (e) => {
-		I.isValidElement(e) && e.type?.displayName === "StickyPageHeaderAction" ? i.push(e.props) : a.push(e);
+Be.displayName = "StickyPageHeaderTitle";
+var Ve = () => null;
+Ve.displayName = "StickyPageHeaderAction";
+var He = ({ children: t, menuLabel: i }) => {
+	let a = J(), { t: c } = W(), l = [], u = [];
+	I.Children.forEach(t, (e) => {
+		I.isValidElement(e) && e.type?.displayName === "StickyPageHeaderAction" ? l.push(e.props) : u.push(e);
 	});
-	let o = t ?? r("common.actions");
+	let d = i ?? c("common.actions");
 	return /* @__PURE__ */ B("div", {
 		className: "flex items-center gap-2 shrink-0",
-		children: [a, i.length > 0 && /* @__PURE__ */ B(M, { children: [/* @__PURE__ */ z(P, {
+		children: [u, l.length > 0 && /* @__PURE__ */ B(n, { children: [/* @__PURE__ */ z(e, {
 			asChild: !0,
-			children: t ? /* @__PURE__ */ B(T, {
+			children: i ? /* @__PURE__ */ B(s, {
 				variant: "outline",
 				size: "sm",
 				className: "gap-1.5",
 				children: [/* @__PURE__ */ z(V, { className: "size-4" }), /* @__PURE__ */ z("span", {
 					className: "hidden sm:inline",
-					children: t
+					children: i
 				})]
-			}) : /* @__PURE__ */ z(T, {
+			}) : /* @__PURE__ */ z(s, {
 				variant: "ghost",
 				size: "icon-sm",
-				"aria-label": o,
-				title: o,
+				"aria-label": d,
+				title: d,
 				children: /* @__PURE__ */ z(V, { className: "size-5!" })
 			})
-		}), /* @__PURE__ */ z(E, {
+		}), /* @__PURE__ */ z(o, {
 			align: "end",
-			children: i.map((e) => {
+			children: l.map((e) => {
 				let t = e.icon ?? H;
-				return /* @__PURE__ */ B(A, {
+				return /* @__PURE__ */ B(r, {
 					disabled: e.disabled,
 					onClick: () => {
-						e.href && n(e.href), e.onClick && e.onClick();
+						e.href && a(e.href), e.onClick && e.onClick();
 					},
 					children: [/* @__PURE__ */ z(t, { className: "size-4 mr-2" }), e.label]
 				}, e.label);
@@ -818,70 +634,84 @@ var Ye = ({ children: e, menuLabel: t }) => {
 		})] })]
 	});
 };
-Ye.displayName = "StickyPageHeaderActions";
-var Xe = Object.assign(({ children: e }) => /* @__PURE__ */ z("header", {
+He.displayName = "StickyPageHeaderActions";
+var Ue = Object.assign(({ children: e }) => /* @__PURE__ */ z("header", {
 	className: "sticky top-0 z-10 -mx-4 lg:-mx-6 mb-5 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80",
 	children: /* @__PURE__ */ B("div", {
 		className: "flex w-full items-center gap-3 px-4 lg:px-6 py-3",
 		children: [/* @__PURE__ */ B("div", {
 			className: "hidden md:flex items-center gap-1",
-			children: [/* @__PURE__ */ z(d, { className: "-ml-1" }), /* @__PURE__ */ z(S, {
+			children: [/* @__PURE__ */ z(u, { className: "-ml-1" }), /* @__PURE__ */ z(f, {
 				orientation: "vertical",
 				className: "mx-2 data-[orientation=vertical]:h-4"
 			})]
 		}), e]
 	})
 }), {
-	Title: qe,
-	Actions: Ye,
-	Action: Je
-}), Ze = (e) => /* @__PURE__ */ z("div", {
-	className: "w-full px-1 md:px-6 lg:px-8 py-1 md:py-4 min-h-[calc(100svh-10.5rem)]",
-	children: /* @__PURE__ */ z("div", {
-		className: "flex min-h-full w-full md:rounded-xl md:border md:bg-sidebar md:shadow-sm",
-		children: /* @__PURE__ */ B(t, {
-			defaultOpen: !0,
-			className: "min-h-0!",
-			style: {
-				"--sidebar-width": "calc(var(--spacing) * 72)",
-				"--header-height": "calc(var(--spacing) * 12)",
-				minHeight: 0
-			},
-			children: [/* @__PURE__ */ z(Ve, { ...e }), /* @__PURE__ */ z(re, {
-				className: "md:mr-1.5 md:my-1.5 md:rounded-xl md:border bg-background md:shadow-sm",
-				children: /* @__PURE__ */ z("main", {
-					className: "flex flex-1 flex-col pt-2 md:pt-4 max-md:[&_.px-6]:px-2",
-					children: /* @__PURE__ */ z(q, {})
-				})
-			})]
+	Title: Be,
+	Actions: He,
+	Action: Ve
+}), We = {
+	comfortable: {
+		outer: "px-1 md:px-6 lg:px-8 py-1 md:py-4",
+		inset: "md:mr-1.5 md:my-1.5",
+		main: "pt-2 md:pt-4"
+	},
+	compact: {
+		outer: "px-0 py-0",
+		inset: "min-w-0 md:mx-1.5",
+		main: "pt-1 md:pt-2"
+	}
+}, Ge = ({ outletContext: e, density: t = "comfortable", ...n }) => {
+	let r = We[t];
+	return /* @__PURE__ */ z("div", {
+		className: `w-full ${r.outer} min-h-[calc(100svh-10.5rem)]`,
+		children: /* @__PURE__ */ z("div", {
+			className: "flex min-h-full w-full md:rounded-xl md:border md:bg-sidebar md:shadow-sm",
+			children: /* @__PURE__ */ B(d, {
+				defaultOpen: !0,
+				className: "min-h-0!",
+				style: {
+					"--sidebar-width": "calc(var(--spacing) * 72)",
+					"--header-height": "calc(var(--spacing) * 12)",
+					minHeight: 0
+				},
+				children: [/* @__PURE__ */ z($, { ...n }), /* @__PURE__ */ z(b, {
+					className: `${r.inset} md:rounded-xl md:border bg-background md:shadow-sm`,
+					children: /* @__PURE__ */ z("main", {
+						className: `flex flex-1 flex-col ${r.main} max-md:[&_.px-6]:px-2`,
+						children: /* @__PURE__ */ z(K, { context: e })
+					})
+				})]
+			})
 		})
-	})
-}), Qe = () => null;
-Qe.displayName = "SubPageHeaderAction";
-var $e = Object.assign(({ icon: e, feature: t, name: n, description: r, urlBase: i, onDelete: o, open: s, setOpen: c, children: l }) => {
-	let u = a(), f = u?.isMobile ?? !1, p = u?.toggleSidebar ?? (() => {}), m = Y(), h = [];
-	I.Children.forEach(l, (e) => {
-		I.isValidElement(e) && e.type?.displayName === "SubPageHeaderAction" && h.push(e.props);
 	});
-	let g = /* @__PURE__ */ B("div", {
+}, Ke = () => null;
+Ke.displayName = "SubPageHeaderAction";
+var qe = Object.assign(({ icon: t, feature: i, name: a, description: c, urlBase: l, onDelete: d, open: p, setOpen: h, children: g }) => {
+	let _ = m(), v = _?.isMobile ?? !1, y = _?.toggleSidebar ?? (() => {}), b = J(), x = [];
+	I.Children.forEach(g, (e) => {
+		I.isValidElement(e) && Y(e) === "SubPageHeaderAction" && x.push(e.props);
+	});
+	let S = /* @__PURE__ */ B("div", {
 		className: "flex items-center gap-3",
-		children: [e && /* @__PURE__ */ z("div", {
-			className: `flex h-9 w-9 items-center justify-center rounded-lg bg-linear-to-br from-blue-500/10 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/20 ring-1 ring-blue-500/10 dark:ring-blue-400/10 ${f ? "cursor-pointer active:scale-95 transition-transform" : ""}`,
-			onClick: f ? p : void 0,
-			onKeyDown: f ? (e) => {
-				(e.key === "Enter" || e.key === " ") && p();
+		children: [t && /* @__PURE__ */ z("div", {
+			className: `flex h-9 w-9 items-center justify-center rounded-lg vg-accent-chip ring-1 ${v ? "cursor-pointer active:scale-95 transition-transform" : ""}`,
+			onClick: v ? y : void 0,
+			onKeyDown: v ? (e) => {
+				(e.key === "Enter" || e.key === " ") && y();
 			} : void 0,
-			tabIndex: f ? 0 : void 0,
-			title: f ? "Open navigation" : void 0,
-			children: /* @__PURE__ */ z(e, { className: "size-5! text-blue-600 dark:text-blue-400" })
+			tabIndex: v ? 0 : void 0,
+			title: v ? "Open navigation" : void 0,
+			children: /* @__PURE__ */ z(t, { className: "size-5! vg-accent-text" })
 		}), /* @__PURE__ */ B("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ z("h1", {
 				className: "text-base font-semibold leading-tight text-foreground",
-				children: t
+				children: i
 			}), /* @__PURE__ */ z("p", {
 				className: "hidden md:block text-xs text-muted-foreground leading-relaxed mt-0.5",
-				children: r
+				children: c
 			})]
 		})]
 	});
@@ -892,24 +722,24 @@ var $e = Object.assign(({ icon: e, feature: t, name: n, description: r, urlBase:
 			children: [
 				/* @__PURE__ */ B("div", {
 					className: "hidden md:flex items-center gap-1",
-					children: [/* @__PURE__ */ z(d, { className: "-ml-1" }), /* @__PURE__ */ z(S, {
+					children: [/* @__PURE__ */ z(u, { className: "-ml-1" }), /* @__PURE__ */ z(f, {
 						orientation: "vertical",
 						className: "mx-2 data-[orientation=vertical]:h-4"
 					})]
 				}),
 				/* @__PURE__ */ z("div", {
 					className: "min-w-0 flex-1",
-					children: i && !f ? /* @__PURE__ */ z(K, {
-						to: i,
+					children: l && !v ? /* @__PURE__ */ z(G, {
+						to: l,
 						className: "group inline-flex",
-						children: g
-					}) : g
+						children: S
+					}) : S
 				}),
 				/* @__PURE__ */ B("div", {
 					className: "flex items-center gap-2",
-					children: [h.length > 0 && /* @__PURE__ */ B(M, { children: [/* @__PURE__ */ z(P, {
+					children: [x.length > 0 && /* @__PURE__ */ B(n, { children: [/* @__PURE__ */ z(e, {
 						asChild: !0,
-						children: /* @__PURE__ */ B(T, {
+						children: /* @__PURE__ */ B(s, {
 							variant: "outline",
 							size: "sm",
 							className: "gap-1.5",
@@ -918,29 +748,29 @@ var $e = Object.assign(({ icon: e, feature: t, name: n, description: r, urlBase:
 								children: "Actions"
 							})]
 						})
-					}), /* @__PURE__ */ z(E, {
+					}), /* @__PURE__ */ z(o, {
 						align: "end",
-						children: h.map((e) => {
+						children: x.map((e) => {
 							let t = e.icon ?? H;
-							return /* @__PURE__ */ B(A, {
+							return /* @__PURE__ */ B(r, {
 								disabled: e.disabled,
 								onClick: () => {
-									e.href && m(e.href), e.onClick && e.onClick();
+									e.href && b(e.href), e.onClick && e.onClick();
 								},
 								children: [/* @__PURE__ */ z(t, { className: "size-4 mr-2" }), e.label]
 							}, e.label);
 						})
-					})] }), s !== void 0 && o !== void 0 && c !== void 0 && /* @__PURE__ */ z(Q, {
-						feature: t,
-						name: n,
-						onDelete: o,
-						open: s,
-						setOpen: c
+					})] }), p !== void 0 && d !== void 0 && h !== void 0 && /* @__PURE__ */ z(F, {
+						feature: i,
+						name: a,
+						onDelete: d,
+						open: p,
+						setOpen: h
 					})]
 				})
 			]
-		}), /* @__PURE__ */ z(S, { className: "mt-3" })]
+		}), /* @__PURE__ */ z(f, { className: "mt-3" })]
 	});
-}, { Action: Qe });
+}, { Action: Ke });
 //#endregion
-export { Z as BlankSlate, Q as DialogDelete, X as GradientButtonLink, Re as GridList, Ve as InternalSidebar, He as LoadProvider, Ue as NavMain, We as NavUser, Ke as Page, $ as PageContent, Ge as PageHeader, Xe as StickyPageHeader, Ze as SubPage, $e as SubPageHeader };
+export { se as BlankSlate, F as DialogDelete, ce as GradientButtonLink, je as GridList, $ as InternalSidebar, le as LoadProvider, Fe as NavMain, Ie as NavUser, ze as Page, Le as PageContent, Re as PageHeader, Ue as StickyPageHeader, Ge as SubPage, qe as SubPageHeader };