framepexls-ui-lib 2.1.0 → 2.2.0

package/dist/Sidebar.mjs

@@ -44,7 +44,10 @@ function groupItems(items) {
   return Array.from(byGroup.entries());
 }
 function GroupHeader({ title }) {
-  return /* @__PURE__ */ jsx("div", { className: "mb-2.5 px-2 text-[0.6875rem] font-semibold uppercase tracking-[0.16em] text-[var(--muted)] select-none text-left", children: title });
+  return /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-3 px-2 select-none", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[0.6875rem] font-semibold uppercase tracking-[0.18em] text-[var(--muted)] text-left", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[linear-gradient(90deg,color-mix(in_oklab,var(--border)_72%,transparent),transparent)]" })
+  ] });
 }
 function safeParseSidebarNavLayout(raw) {
   if (!raw) return null;
@@ -148,54 +151,29 @@ function pickWorkspaceId(workspaces, preferred) {
   return (primary != null ? primary : list[0]).id;
 }
 const WRAP_ACTIVE = {
-  accent: "bg-[color-mix(in_oklab,var(--primary)_14%,transparent)] ring-1 ring-inset ring-[color-mix(in_oklab,var(--ring)_35%,transparent)] dark:bg-[color-mix(in_oklab,var(--primary)_18%,transparent)]",
-  slate: "bg-slate-600/20 ring-1 ring-inset ring-slate-300 dark:bg-slate-600/25",
-  gray: "bg-gray-600/20 ring-1 ring-inset ring-gray-300 dark:bg-gray-600/25",
-  zinc: "bg-zinc-600/20 ring-1 ring-inset ring-zinc-300 dark:bg-zinc-600/25",
-  neutral: "bg-neutral-600/20 ring-1 ring-inset ring-neutral-300 dark:bg-neutral-600/25",
-  stone: "bg-stone-600/20 ring-1 ring-inset ring-stone-300 dark:bg-stone-600/25",
-  red: "bg-red-600/20 ring-1 ring-inset ring-red-300 dark:bg-red-600/25",
-  orange: "bg-orange-600/20 ring-1 ring-inset ring-orange-300 dark:bg-orange-600/25",
-  amber: "bg-amber-600/20 ring-1 ring-inset ring-amber-300 dark:bg-amber-600/25",
-  yellow: "bg-yellow-500/20 ring-1 ring-inset ring-yellow-300 dark:bg-yellow-500/25",
-  lime: "bg-lime-600/20 ring-1 ring-inset ring-lime-300 dark:bg-lime-600/25",
-  green: "bg-green-600/20 ring-1 ring-inset ring-green-300 dark:bg-green-600/25",
-  emerald: "bg-emerald-600/20 ring-1 ring-inset ring-emerald-300 dark:bg-emerald-600/25",
-  teal: "bg-teal-600/20 ring-1 ring-inset ring-teal-300 dark:bg-teal-600/25",
-  cyan: "bg-cyan-600/20 ring-1 ring-inset ring-cyan-300 dark:bg-cyan-600/25",
-  sky: "bg-sky-600/20 ring-1 ring-inset ring-sky-300 dark:bg-sky-600/25",
-  blue: "bg-blue-600/20 ring-1 ring-inset ring-blue-300 dark:bg-blue-600/25",
-  indigo: "bg-indigo-600/20 ring-1 ring-inset ring-indigo-300 dark:bg-indigo-600/25",
-  violet: "bg-violet-600/20 ring-1 ring-inset ring-violet-300 dark:bg-violet-600/25",
-  purple: "bg-purple-600/20 ring-1 ring-inset ring-purple-300 dark:bg-purple-600/25",
-  fuchsia: "bg-fuchsia-600/20 ring-1 ring-inset ring-fuchsia-300 dark:bg-fuchsia-600/25",
-  pink: "bg-pink-600/20 ring-1 ring-inset ring-pink-300 dark:bg-pink-600/25",
-  rose: "bg-rose-600/20 ring-1 ring-inset ring-rose-300 dark:bg-rose-600/25"
-};
-const ICON_BORDER_ACTIVE = {
-  accent: "border-[color-mix(in_oklab,var(--ring)_32%,transparent)] dark:border-[color-mix(in_oklab,var(--ring)_26%,transparent)]",
-  slate: "border-slate-300/60 dark:border-slate-700/40",
-  gray: "border-gray-300/60 dark:border-gray-700/40",
-  zinc: "border-zinc-300/60 dark:border-zinc-700/40",
-  neutral: "border-neutral-300/60 dark:border-neutral-700/40",
-  stone: "border-stone-300/60 dark:border-stone-700/40",
-  red: "border-red-300/60 dark:border-red-700/40",
-  orange: "border-orange-300/60 dark:border-orange-700/40",
-  amber: "border-amber-300/60 dark:border-amber-700/40",
-  yellow: "border-yellow-300/60 dark:border-yellow-700/40",
-  lime: "border-lime-300/60 dark:border-lime-700/40",
-  green: "border-green-300/60 dark:border-green-700/40",
-  emerald: "border-emerald-300/60 dark:border-emerald-700/40",
-  teal: "border-teal-300/60 dark:border-teal-700/40",
-  cyan: "border-cyan-300/60 dark:border-cyan-700/40",
-  sky: "border-sky-300/60 dark:border-sky-700/40",
-  blue: "border-blue-300/60 dark:border-blue-700/40",
-  indigo: "border-indigo-300/60 dark:border-indigo-700/40",
-  violet: "border-violet-300/60 dark:border-violet-700/40",
-  purple: "border-purple-300/60 dark:border-purple-700/40",
-  fuchsia: "border-fuchsia-300/60 dark:border-fuchsia-700/40",
-  pink: "border-pink-300/60 dark:border-pink-700/40",
-  rose: "border-rose-300/60 dark:border-rose-700/40"
+  accent: "bg-transparent ring-0",
+  slate: "bg-transparent ring-0",
+  gray: "bg-transparent ring-0",
+  zinc: "bg-transparent ring-0",
+  neutral: "bg-transparent ring-0",
+  stone: "bg-transparent ring-0",
+  red: "bg-transparent ring-0",
+  orange: "bg-transparent ring-0",
+  amber: "bg-transparent ring-0",
+  yellow: "bg-transparent ring-0",
+  lime: "bg-transparent ring-0",
+  green: "bg-transparent ring-0",
+  emerald: "bg-transparent ring-0",
+  teal: "bg-transparent ring-0",
+  cyan: "bg-transparent ring-0",
+  sky: "bg-transparent ring-0",
+  blue: "bg-transparent ring-0",
+  indigo: "bg-transparent ring-0",
+  violet: "bg-transparent ring-0",
+  purple: "bg-transparent ring-0",
+  fuchsia: "bg-transparent ring-0",
+  pink: "bg-transparent ring-0",
+  rose: "bg-transparent ring-0"
 };
 const TOGGLE_BORDER_ACTIVE = {
   accent: "border-[color-mix(in_oklab,var(--ring)_28%,transparent)] dark:border-[color-mix(in_oklab,var(--ring)_22%,transparent)]",
@@ -223,30 +201,41 @@ const TOGGLE_BORDER_ACTIVE = {
   rose: "border-rose-200 dark:border-rose-700/40"
 };
 const SUBITEM_ACTIVE = {
-  accent: "bg-[color-mix(in_oklab,var(--primary)_10%,transparent)] text-slate-900 ring-1 ring-[color-mix(in_oklab,var(--ring)_22%,transparent)] dark:bg-[color-mix(in_oklab,var(--primary)_18%,transparent)] dark:text-white dark:ring-[color-mix(in_oklab,var(--ring)_24%,transparent)] rounded-xl",
-  slate: "bg-slate-50 text-slate-700 ring-1 ring-slate-200 dark:bg-slate-900/20 dark:text-slate-200 dark:ring-slate-700/40 rounded-xl",
-  gray: "bg-gray-50 text-gray-700 ring-1 ring-gray-200 dark:bg-gray-900/20 dark:text-gray-200 dark:ring-gray-700/40 rounded-xl",
-  zinc: "bg-zinc-50 text-zinc-700 ring-1 ring-zinc-200 dark:bg-zinc-900/20 dark:text-zinc-200 dark:ring-zinc-700/40 rounded-xl",
-  neutral: "bg-neutral-50 text-neutral-700 ring-1 ring-neutral-200 dark:bg-neutral-900/20 dark:text-neutral-200 dark:ring-neutral-700/40 rounded-xl",
-  stone: "bg-stone-50 text-stone-700 ring-1 ring-stone-200 dark:bg-stone-900/20 dark:text-stone-200 dark:ring-stone-700/40 rounded-xl",
-  red: "bg-red-50 text-red-700 ring-1 ring-red-200 dark:bg-red-900/20 dark:text-red-200 dark:ring-red-700/40 rounded-xl",
-  orange: "bg-orange-50 text-orange-700 ring-1 ring-orange-200 dark:bg-orange-900/20 dark:text-orange-200 dark:ring-orange-700/40 rounded-xl",
-  amber: "bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-900/20 dark:text-amber-200 dark:ring-amber-700/40 rounded-xl",
-  yellow: "bg-yellow-50 text-yellow-700 ring-1 ring-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-200 dark:ring-yellow-700/40 rounded-xl",
-  lime: "bg-lime-50 text-lime-700 ring-1 ring-lime-200 dark:bg-lime-900/20 dark:text-lime-200 dark:ring-lime-700/40 rounded-xl",
-  green: "bg-green-50 text-green-700 ring-1 ring-green-200 dark:bg-green-900/20 dark:text-green-200 dark:ring-green-700/40 rounded-xl",
-  emerald: "bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-200 dark:ring-emerald-700/40 rounded-xl",
-  teal: "bg-teal-50 text-teal-700 ring-1 ring-teal-200 dark:bg-teal-900/20 dark:text-teal-200 dark:ring-teal-700/40 rounded-xl",
-  cyan: "bg-cyan-50 text-cyan-700 ring-1 ring-cyan-200 dark:bg-cyan-900/20 dark:text-cyan-200 dark:ring-cyan-700/40 rounded-xl",
-  sky: "bg-sky-50 text-sky-700 ring-1 ring-sky-200 dark:bg-sky-900/20 dark:text-sky-200 dark:ring-sky-700/40 rounded-xl",
-  blue: "bg-blue-50 text-blue-700 ring-1 ring-blue-200 dark:bg-blue-900/20 dark:text-blue-200 dark:ring-blue-700/40 rounded-xl",
-  indigo: "bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-900/20 dark:text-indigo-200 dark:ring-indigo-700/40 rounded-xl",
-  violet: "bg-violet-50 text-violet-700 ring-1 ring-violet-200 dark:bg-violet-900/20 dark:text-violet-200 dark:ring-violet-700/40 rounded-xl",
-  purple: "bg-purple-50 text-purple-700 ring-1 ring-purple-200 dark:bg-purple-900/20 dark:text-purple-200 dark:ring-purple-700/40 rounded-xl",
-  fuchsia: "bg-fuchsia-50 text-fuchsia-700 ring-1 ring-fuchsia-200 dark:bg-fuchsia-900/20 dark:text-fuchsia-200 dark:ring-fuchsia-700/40 rounded-xl",
-  pink: "bg-pink-50 text-pink-700 ring-1 ring-pink-200 dark:bg-pink-900/20 dark:text-pink-200 dark:ring-pink-700/40 rounded-xl",
-  rose: "bg-rose-50 text-rose-700 ring-1 ring-rose-200 dark:bg-rose-900/20 dark:text-rose-200 dark:ring-rose-700/40 rounded-xl"
+  accent: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  slate: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  gray: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  zinc: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  neutral: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  stone: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  red: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  orange: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  amber: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  yellow: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  lime: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  green: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  emerald: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  teal: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  cyan: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  sky: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  blue: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  indigo: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  violet: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  purple: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  fuchsia: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  pink: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl",
+  rose: "bg-transparent text-[var(--foreground)] ring-0 rounded-xl"
 };
+const PANEL_SURFACE = "border-r border-[color-mix(in_oklab,var(--border)_76%,transparent)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--card)_98.5%,transparent)_0%,color-mix(in_oklab,var(--surface)_90%,transparent)_100%)] shadow-[18px_0_42px_-38px_color-mix(in_oklab,var(--foreground)_16%,transparent)] backdrop-blur-lg";
+const TILE_SURFACE = "border border-[color-mix(in_oklab,var(--border)_74%,transparent)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--card)_98%,transparent)_0%,color-mix(in_oklab,var(--surface)_84%,transparent)_100%)] shadow-[0_12px_28px_-26px_color-mix(in_oklab,var(--foreground)_18%,transparent)]";
+const ITEM_IDLE = "text-[color-mix(in_oklab,var(--foreground)_86%,var(--muted))] hover:text-[var(--foreground)] hover:bg-[color-mix(in_oklab,var(--foreground)_4%,transparent)]";
+const TOP_PANEL_SURFACE = "rounded-[1.4rem] border border-[color-mix(in_oklab,var(--border)_62%,transparent)] bg-[color-mix(in_oklab,var(--foreground)_1.5%,transparent)]";
+const SOFT_BUTTON_SURFACE = "border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--foreground)_3.5%,transparent)]";
+const ITEM_ICON_IDLE = "text-[color-mix(in_oklab,var(--foreground)_78%,var(--muted))] group-hover:text-[var(--foreground)]";
+const ITEM_ICON_ACTIVE = "text-[var(--primary)] drop-shadow-[0_8px_20px_color-mix(in_oklab,var(--primary)_28%,transparent)]";
+const ACTIVE_ROW_BAR = "pointer-events-none absolute bottom-2 left-0 top-2 z-[1] w-[3px] rounded-full bg-[var(--primary)] shadow-[0_0_0_1px_color-mix(in_oklab,var(--primary)_14%,transparent),0_10px_24px_-14px_color-mix(in_oklab,var(--primary)_72%,transparent)]";
+const SUBMENU_GUIDE_BAR = "pointer-events-none absolute bottom-2 left-4 top-2 w-px bg-[color-mix(in_oklab,var(--muted)_72%,var(--foreground)_28%)]";
+const SIDEBAR_COLLAPSE_EASE = [0.22, 1, 0.36, 1];
+const SIDEBAR_COLLAPSE_TRANSITION = { duration: 0.24, ease: SIDEBAR_COLLAPSE_EASE };
 function Sidebar({
   items,
   activeKey,
@@ -597,25 +586,25 @@ function Sidebar({
         activeWorkspace ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--muted)] text-left", children: activeWorkspace.name }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       motion.aside,
       {
         className: [
-          "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-[var(--border)] relative overflow-hidden bg-[var(--card)] xl:py-6 z-40",
-          collapsed ? "xl:px-2" : "xl:px-4"
+          "relative z-40 hidden overflow-hidden xl:fixed xl:inset-y-0 xl:left-0 xl:flex xl:flex-col"
         ].join(" "),
         initial: false,
         animate: { width: sidebarWidth },
         transition: sidebarWidthTransition,
         style: { width: sidebarWidth, willChange: motionEnabled ? "width" : void 0 },
-        children: [
+        children: /* @__PURE__ */ jsxs("div", { className: cx("relative z-10 flex h-full min-h-0 flex-1 overflow-hidden", PANEL_SURFACE), children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               "aria-hidden": "true",
-              className: "pointer-events-none absolute inset-x-0 bottom-0 z-0 h-[520px] bg-[radial-gradient(900px_520px_at_22%_120%,color-mix(in_oklab,var(--primary)_18%,transparent)_0%,transparent_64%),radial-gradient(720px_460px_at_86%_112%,color-mix(in_oklab,var(--ring)_12%,transparent)_0%,transparent_70%)]"
+              className: "pointer-events-none absolute inset-0 z-0 bg-[radial-gradient(720px_420px_at_14%_0%,color-mix(in_oklab,var(--primary)_5%,transparent)_0%,transparent_44%),radial-gradient(860px_540px_at_20%_118%,color-mix(in_oklab,var(--primary)_8%,transparent)_0%,transparent_56%),radial-gradient(700px_460px_at_86%_114%,color-mix(in_oklab,var(--ring)_6%,transparent)_0%,transparent_60%)]"
             }
           ),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-10 right-0 z-0 w-px bg-[linear-gradient(180deg,transparent,color-mix(in_oklab,var(--ring)_30%,transparent),transparent)]" }),
           /* @__PURE__ */ jsx("div", { className: "relative z-10 flex-1 min-h-0", children: /* @__PURE__ */ jsx(
             SidebarInner,
             {
@@ -662,7 +651,7 @@ function Sidebar({
               skeleton
             }
           ) })
-        ]
+        ] })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -676,26 +665,27 @@ function Sidebar({
       }
     ),
     /* @__PURE__ */ jsx(AnimatePresence, { children: drawerOpen && /* @__PURE__ */ jsxs(motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
+      /* @__PURE__ */ jsx(motion.div, { className: "absolute inset-0 bg-black/42 backdrop-blur-[2px]", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }),
       /* @__PURE__ */ jsxs(
         motion.div,
         {
           role: "dialog",
           "aria-modal": "true",
-          initial: { x: -340 },
-          animate: { x: 0 },
-          exit: { x: -340 },
-          transition: { type: "tween", duration: 0.22, ease: "easeOut" },
-          className: "relative h-full w-[88%] max-w-80 overflow-hidden bg-[var(--card)] px-5 py-6 shadow-2xl",
-          style: { willChange: "transform" },
+          initial: { x: -340, opacity: 0.84, scale: 0.98 },
+          animate: { x: 0, opacity: 1, scale: 1 },
+          exit: { x: -340, opacity: 0.84, scale: 0.985 },
+          transition: { type: "tween", duration: 0.26, ease: [0.22, 1, 0.36, 1] },
+          className: cx("relative h-full w-[88%] max-w-80 overflow-hidden px-5 py-6", TOP_PANEL_SURFACE, "bg-[linear-gradient(180deg,color-mix(in_oklab,var(--card)_98%,transparent)_0%,color-mix(in_oklab,var(--surface)_82%,transparent)_100%)] shadow-2xl backdrop-blur-xl"),
+          style: { willChange: "transform, opacity" },
           children: [
             /* @__PURE__ */ jsx(
               "div",
               {
                 "aria-hidden": "true",
-                className: "pointer-events-none absolute inset-x-0 bottom-0 z-0 h-[520px] bg-[radial-gradient(900px_520px_at_22%_120%,color-mix(in_oklab,var(--primary)_18%,transparent)_0%,transparent_64%),radial-gradient(720px_460px_at_86%_112%,color-mix(in_oklab,var(--ring)_12%,transparent)_0%,transparent_70%)]"
+                className: "pointer-events-none absolute inset-0 z-0 bg-[radial-gradient(720px_420px_at_14%_0%,color-mix(in_oklab,var(--primary)_5%,transparent)_0%,transparent_44%),radial-gradient(860px_540px_at_20%_118%,color-mix(in_oklab,var(--primary)_8%,transparent)_0%,transparent_56%),radial-gradient(700px_460px_at_86%_114%,color-mix(in_oklab,var(--ring)_6%,transparent)_0%,transparent_60%)]"
               }
             ),
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-8 top-0 z-0 h-px bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--ring)_30%,transparent),transparent)]" }),
             /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
               /* @__PURE__ */ jsx(
                 Button,
@@ -705,7 +695,7 @@ function Sidebar({
                   variant: "ghost",
                   size: "sm",
                   leftIcon: /* @__PURE__ */ jsx(CloseIcon, {}),
-                  className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-sm hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]"
+                  className: cx("h-9 w-9 rounded-2xl p-0 !gap-0 text-[var(--foreground)] transition-transform hover:-translate-y-0.5 active:translate-y-0", TILE_SURFACE)
                 }
               ),
               /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--muted)]", children: "Men\xFA" })
@@ -1836,84 +1826,129 @@ function SidebarInner({
   const skShowTopPanel = (_c = skeleton == null ? void 0 : skeleton.showTopPanel) != null ? _c : true;
   const skShowFooter = (_d = skeleton == null ? void 0 : skeleton.showFooter) != null ? _d : true;
   const hasQuickActions = Boolean(quickActions == null ? void 0 : quickActions.length);
-  const QuickIcon = ({ children }) => /* @__PURE__ */ jsx("span", { className: "grid h-10 w-10 place-items-center rounded-2xl border border-[var(--border)] bg-[var(--card)] shadow-sm", children: /* @__PURE__ */ jsx("span", { className: "text-[var(--foreground)]", children }) });
+  const topPanelClass = cx("overflow-hidden rounded-[1.4rem]", TOP_PANEL_SURFACE);
+  const calmFadeEase = [0.22, 1, 0.36, 1];
+  const calmFadeTransition = { duration: 0.26, ease: calmFadeEase };
+  const calmFadeInitial = { opacity: 0, y: 4, filter: "blur(6px)" };
+  const calmFadeAnimate = { opacity: 1, y: 0, filter: "blur(0px)" };
+  const calmFadeExit = { opacity: 0, y: 2, filter: "blur(6px)" };
+  const QuickIcon = ({ children }) => /* @__PURE__ */ jsx("span", { className: "grid h-9 w-9 place-items-center rounded-2xl text-[var(--muted)] transition-all duration-300 group-hover:scale-[1.04] group-hover:text-[var(--foreground)]", children: /* @__PURE__ */ jsx("span", { className: "text-[var(--foreground)]", children }) });
   const QuickActionsSection = () => {
     if (!hasQuickActions) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "pt-5", children: [
-      /* @__PURE__ */ jsx("div", { className: ["flex items-center justify-between gap-2 px-2", collapsed ? "justify-center" : ""].join(" "), children: !collapsed ? /* @__PURE__ */ jsx("div", { className: "text-[0.6875rem] font-semibold uppercase tracking-wider text-[var(--muted)]", children: quickActionsTitle != null ? quickActionsTitle : "Accesos r\xE1pidos" }) : null }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (quickActions != null ? quickActions : []).map((a) => {
-        var _a2;
-        const disabled = Boolean(a.disabled);
-        const base = [
-          "group flex w-full items-center gap-3.5 rounded-2xl px-3.5 py-2.5 text-left transition active:scale-[0.99]",
-          disabled ? "opacity-60 cursor-not-allowed" : "text-[var(--foreground)] hover:bg-[color-mix(in_oklab,var(--surface)_65%,transparent)]",
-          collapsed ? "justify-center" : ""
-        ].join(" ");
-        const button = /* @__PURE__ */ jsxs(
-          Button,
-          {
-            unstyled: true,
-            type: "button",
-            onClick: () => {
-              if (disabled) return;
-              onQuickAction == null ? void 0 : onQuickAction(a);
-            },
-            className: base,
-            title: void 0,
-            children: [
-              /* @__PURE__ */ jsx(QuickIcon, { children: (_a2 = a.icon) != null ? _a2 : /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4", "aria-hidden": true }) }),
-              !collapsed ? /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-[0.9375rem] font-medium text-[var(--foreground)]", children: a.label }),
-                a.description ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-xs text-[var(--muted)] text-left", children: a.description }) : null
-              ] }) : null,
-              !collapsed && a.badge ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: a.badge }) : null
-            ]
-          }
-        );
-        if (!collapsed) return /* @__PURE__ */ jsx("div", { children: button }, a.id);
-        return /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            content: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate text-[0.75rem] font-semibold", children: a.label }),
-              a.description ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-[0.6875rem] text-white/70", children: a.description }) : null
-            ] }),
-            placement: "right",
-            offset: 12,
-            children: button
-          },
-          a.id
-        );
-      }) })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "pt-5",
+        initial: calmFadeInitial,
+        animate: calmFadeAnimate,
+        transition: calmFadeTransition,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: ["flex items-center justify-between gap-2 px-2", collapsed ? "justify-center" : ""].join(" "), children: !collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[0.6875rem] font-semibold uppercase tracking-[0.18em] text-[var(--muted)]", children: quickActionsTitle != null ? quickActionsTitle : "Accesos r\xE1pidos" }),
+            /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[linear-gradient(90deg,color-mix(in_oklab,var(--border)_72%,transparent),transparent)]" })
+          ] }) : null }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (quickActions != null ? quickActions : []).map((a, index) => {
+            var _a2;
+            const disabled = Boolean(a.disabled);
+            const base = [
+              "group flex w-full items-center gap-3.5 rounded-[1.35rem] px-3.5 py-2.5 text-left transition-all duration-300 active:scale-[0.99]",
+              disabled ? "opacity-60 cursor-not-allowed" : ITEM_IDLE,
+              collapsed ? "justify-center" : ""
+            ].join(" ");
+            const button = /* @__PURE__ */ jsxs(
+              Button,
+              {
+                unstyled: true,
+                type: "button",
+                onClick: () => {
+                  if (disabled) return;
+                  onQuickAction == null ? void 0 : onQuickAction(a);
+                },
+                className: base,
+                title: void 0,
+                children: [
+                  /* @__PURE__ */ jsx(QuickIcon, { children: (_a2 = a.icon) != null ? _a2 : /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4", "aria-hidden": true }) }),
+                  !collapsed ? /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block truncate text-[0.9375rem] font-medium text-[var(--foreground)]", children: a.label }),
+                    a.description ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-xs text-[var(--muted)] text-left", children: a.description }) : null
+                  ] }) : null,
+                  !collapsed && a.badge ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: a.badge }) : null
+                ]
+              }
+            );
+            if (!collapsed) {
+              return /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { opacity: 0, filter: "blur(6px)" },
+                  animate: { opacity: 1, filter: "blur(0px)" },
+                  transition: { duration: 0.22, delay: index * 0.025, ease: calmFadeEase },
+                  children: button
+                },
+                a.id
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "truncate text-[0.75rem] font-semibold", children: a.label }),
+                  a.description ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-[0.6875rem] text-white/70", children: a.description }) : null
+                ] }),
+                placement: "right",
+                offset: 12,
+                children: /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0, filter: "blur(6px)" },
+                    animate: { opacity: 1, filter: "blur(0px)" },
+                    transition: { duration: 0.2, delay: index * 0.025, ease: calmFadeEase },
+                    children: button
+                  }
+                )
+              },
+              a.id
+            );
+          }) })
+        ]
+      }
+    );
   };
   const showNavTools = Boolean(navEditable && onNavConfigure);
   const showQuickTools = Boolean(quickActionsEditable && onQuickActionsConfigure);
   const showSidebarTools = showNavTools || showQuickTools;
   const showCollapseToggle = !mobile && typeof toggleCollapsed === "function";
   const renderCollapseToggle = (opts) => {
-    var _a2;
     if (!showCollapseToggle) return null;
     if (loading) return /* @__PURE__ */ jsx("div", { className: "fx-skeleton shrink-0", style: { width: 40, height: 40, borderRadius: 16 } });
-    const size = (_a2 = opts == null ? void 0 : opts.size) != null ? _a2 : "md";
-    return /* @__PURE__ */ jsx(Tooltip, { content: collapsed ? "Expandir barra lateral" : "Contraer barra lateral", placement: "right", offset: 10, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(motion.div, { layout: true, transition: SIDEBAR_COLLAPSE_TRANSITION, children: /* @__PURE__ */ jsx(Tooltip, { content: collapsed ? "Expandir barra lateral" : "Contraer barra lateral", placement: "right", offset: 10, children: /* @__PURE__ */ jsx(
       Button,
       {
+        unstyled: true,
         noPaddingX: true,
         "aria-label": collapsed ? "Expandir barra lateral" : "Contraer barra lateral",
         onClick: toggleCollapsed,
-        variant: "ghost",
-        size: "sm",
-        leftIcon: collapsed ? /* @__PURE__ */ jsx(CaretLineRightIcon, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(CaretLineLeftIcon, { className: "h-4 w-4", "aria-hidden": true }),
         className: cx(
-          "shrink-0 p-0 !gap-0 rounded-2xl border border-[var(--border)] text-[var(--foreground)]",
-          collapsed ? "!bg-[var(--surface)] shadow-md" : "bg-[var(--card)] shadow-sm",
-          "hover:bg-[color-mix(in_oklab,var(--surface)_88%,var(--card))] active:scale-95",
-          size === "sm" ? "h-9 w-9" : "h-10 w-10"
+          "inline-flex h-10 w-10 shrink-0 items-center justify-center overflow-visible rounded-[1.1rem] p-0 transition-all duration-300",
+          "border border-[color-mix(in_oklab,var(--border)_82%,transparent)]",
+          "bg-[color-mix(in_oklab,var(--card)_96%,var(--surface))] text-[var(--foreground)]",
+          "backdrop-blur-sm",
+          "shadow-[0_14px_30px_-24px_color-mix(in_oklab,var(--foreground)_38%,transparent)]",
+          "hover:-translate-y-0.5 hover:bg-[color-mix(in_oklab,var(--card)_94%,var(--surface))] hover:shadow-[0_18px_36px_-24px_color-mix(in_oklab,var(--foreground)_44%,transparent)]",
+          "active:translate-y-0 active:scale-95"
         ),
-        title: void 0
+        title: void 0,
+        children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "grid place-items-center text-[color-mix(in_oklab,var(--foreground)_92%,var(--muted))]",
+            animate: { x: collapsed ? 0.5 : -0.5, scale: collapsed ? 0.98 : 1 },
+            transition: { type: "spring", stiffness: 420, damping: 30 },
+            children: collapsed ? /* @__PURE__ */ jsx(CaretLineRightIcon, { className: "h-[1.1rem] w-[1.1rem]", "aria-hidden": true }) : /* @__PURE__ */ jsx(CaretLineLeftIcon, { className: "h-[1.1rem] w-[1.1rem]", "aria-hidden": true })
+          }
+        )
       }
-    ) });
+    ) }) });
   };
   const SidebarTools = ({ condensed }) => {
     if (!showSidebarTools) return null;
@@ -1959,9 +1994,9 @@ function SidebarInner({
     }, []);
     if (!condensedMode) {
       const btnClass = cx(
-        "h-9 w-9 rounded-xl",
-        "p-0 !gap-0 border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-sm",
-        "hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] active:scale-[0.98]"
+        "h-9 w-9 rounded-2xl p-0 !gap-0 text-[var(--foreground)]",
+        SOFT_BUTTON_SURFACE,
+        "hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98]"
       );
       return /* @__PURE__ */ jsxs("div", { className: cx("flex items-center gap-2"), children: [
         showNavTools ? /* @__PURE__ */ jsx(Tooltip, { content: navCustomizeLabel != null ? navCustomizeLabel : "Personalizar", placement: "bottom", offset: 12, children: /* @__PURE__ */ jsx(
@@ -1995,9 +2030,9 @@ function SidebarInner({
       ] });
     }
     const iconBtnClass = cx(
-      "grid place-items-center h-9 w-9 rounded-2xl",
-      "p-0 !gap-0 border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-sm",
-      "hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] active:scale-[0.98]"
+      "grid h-9 w-9 place-items-center rounded-2xl p-0 !gap-0 text-[var(--foreground)]",
+      SOFT_BUTTON_SURFACE,
+      "hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98]"
     );
     const menuItemClass = cx(
       "w-full flex items-center gap-3 rounded-2xl px-3 py-2 text-left text-sm",
@@ -2012,7 +2047,7 @@ function SidebarInner({
           className: "fixed z-[200] w-[240px]",
           role: "menu",
           "aria-label": "Opciones del sidebar",
-          children: /* @__PURE__ */ jsx("div", { className: "rounded-3xl border border-[var(--border)] bg-[var(--card)] shadow-xl overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "p-1.5", children: [
+          children: /* @__PURE__ */ jsx("div", { className: cx("overflow-hidden rounded-3xl", TOP_PANEL_SURFACE, "bg-[var(--card)] shadow-xl backdrop-blur-xl"), children: /* @__PURE__ */ jsxs("div", { className: "p-1.5", children: [
             showNavTools ? /* @__PURE__ */ jsxs(
               "button",
               {
@@ -2024,7 +2059,7 @@ function SidebarInner({
                   onNavConfigure == null ? void 0 : onNavConfigure();
                 },
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: "grid h-9 w-9 place-items-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]", children: /* @__PURE__ */ jsx(PencilIcon, { className: "h-4 w-4", "aria-hidden": true }) }),
+                  /* @__PURE__ */ jsx("span", { className: cx("grid h-9 w-9 place-items-center rounded-2xl", SOFT_BUTTON_SURFACE), children: /* @__PURE__ */ jsx(PencilIcon, { className: "h-4 w-4", "aria-hidden": true }) }),
                   /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
                     /* @__PURE__ */ jsx("span", { className: "block font-semibold text-[var(--foreground)]", children: navCustomizeLabel != null ? navCustomizeLabel : "Personalizar" }),
                     /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--muted)] text-left", children: "Ordena y ajusta la navegaci\xF3n" })
@@ -2043,7 +2078,7 @@ function SidebarInner({
                   onQuickActionsConfigure == null ? void 0 : onQuickActionsConfigure();
                 },
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: "grid h-9 w-9 place-items-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]", children: /* @__PURE__ */ jsx(ListStarIcon, { className: "h-4 w-4", "aria-hidden": true }) }),
+                  /* @__PURE__ */ jsx("span", { className: cx("grid h-9 w-9 place-items-center rounded-2xl", SOFT_BUTTON_SURFACE), children: /* @__PURE__ */ jsx(ListStarIcon, { className: "h-4 w-4", "aria-hidden": true }) }),
                   /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
                     /* @__PURE__ */ jsx("span", { className: "block font-semibold text-[var(--foreground)]", children: "Accesos r\xE1pidos" }),
                     /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--muted)] text-left", children: "Ancla tus acciones favoritas" })
@@ -2079,7 +2114,7 @@ function SidebarInner({
     ] });
   };
   return /* @__PURE__ */ jsxs("div", { className: ["flex h-full flex-col", loading ? "pointer-events-none select-none" : ""].join(" "), "aria-busy": loading ? "true" : void 0, children: [
-    /* @__PURE__ */ jsx("div", { className: collapsed ? "px-1" : "pl-1 pr-2", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: collapsed ? "px-3 pt-4" : "px-5 pt-5", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: ["flex min-w-0 flex-1 items-center gap-3", collapsed ? "justify-center" : ""].join(" "), children: [
         /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: collapsed ? 44 : 40, height: collapsed ? 44 : 40, borderRadius: 16 } }),
         !collapsed ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
@@ -2088,60 +2123,77 @@ function SidebarInner({
         ] }) : null
       ] }),
       renderCollapseToggle()
-    ] }) : showBrand ? /* @__PURE__ */ jsxs("div", { className: cx("relative flex items-center gap-2"), children: [
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          unstyled: true,
-          type: "button",
-          onClick: onBrandClick,
-          className: cx(
-            "flex items-center gap-3",
-            collapsed ? "w-full justify-start px-2 py-2" : "min-w-0 flex-1 justify-start px-2 py-2"
-          ),
-          title: "Ir al inicio",
-          children: [
-            /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                layout: "size",
-                transition: { type: "spring", stiffness: 520, damping: 46, mass: 0.9 },
-                className: "shrink-0",
-                children: /* @__PURE__ */ jsx(
-                  AvatarSquare,
+    ] }) : showBrand ? /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        layout: true,
+        transition: SIDEBAR_COLLAPSE_TRANSITION,
+        className: "relative flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              unstyled: true,
+              type: "button",
+              onClick: onBrandClick,
+              className: cx(
+                "flex items-center gap-3",
+                "min-w-0 flex-1 justify-start py-2",
+                collapsed ? "px-1" : "px-2"
+              ),
+              title: "Ir al inicio",
+              children: [
+                /* @__PURE__ */ jsx(
+                  motion.div,
                   {
-                    size: collapsed ? 56 : 40,
-                    src: brandLogoSrc != null ? brandLogoSrc : void 0,
-                    alt: brandTitle,
-                    initials: brandInitials,
-                    imageFit: brandLogoSrc ? "contain" : "cover",
-                    radiusClass: "rounded-2xl",
-                    color,
-                    className: "ring-0"
+                    layout: "size",
+                    transition: { type: "spring", stiffness: 520, damping: 46, mass: 0.9 },
+                    className: "shrink-0",
+                    children: /* @__PURE__ */ jsx(
+                      AvatarSquare,
+                      {
+                        size: collapsed ? 44 : 40,
+                        src: brandLogoSrc != null ? brandLogoSrc : void 0,
+                        alt: brandTitle,
+                        initials: brandInitials,
+                        imageFit: brandLogoSrc ? "contain" : "cover",
+                        radiusClass: "rounded-2xl",
+                        color,
+                        className: "ring-0"
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
-              motion.div,
-              {
-                initial: { opacity: 0, x: -10, filter: "blur(6px)" },
-                animate: { opacity: 1, x: 0, filter: "blur(0px)" },
-                exit: { opacity: 0, x: -14, filter: "blur(8px)" },
-                transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
-                className: "leading-tight",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight text-left", children: brandTitle }),
-                  /* @__PURE__ */ jsx("div", { className: "text-[0.6875rem] uppercase tracking-wide text-[var(--muted)] text-left", children: brandSubtitle })
-                ]
-              },
-              "brand-meta"
-            ) })
-          ]
-        }
-      ),
-      collapsed ? /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0", children: renderCollapseToggle({ size: "sm" }) }) : renderCollapseToggle({ size: "md" })
-    ] }) : hasWorkspace ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                ),
+                /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    initial: calmFadeInitial,
+                    animate: calmFadeAnimate,
+                    exit: calmFadeExit,
+                    transition: calmFadeTransition,
+                    className: "leading-tight",
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight text-left", children: brandTitle }),
+                      /* @__PURE__ */ jsx("div", { className: "text-[0.6875rem] uppercase tracking-wide text-[var(--muted)] text-left", children: brandSubtitle })
+                    ]
+                  },
+                  "brand-meta"
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layout: true,
+              transition: SIDEBAR_COLLAPSE_TRANSITION,
+              className: "shrink-0 self-start",
+              children: renderCollapseToggle({ size: collapsed ? "sm" : "md" })
+            }
+          )
+        ]
+      }
+    ) : hasWorkspace ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
           WorkspaceSwitcher,
@@ -2164,7 +2216,7 @@ function SidebarInner({
       /* @__PURE__ */ jsx("div", { className: ["min-w-0 flex-1 text-sm font-semibold text-[var(--muted)]", collapsed ? "text-center" : ""].join(" "), children: "Navegaci\xF3n" }),
       renderCollapseToggle()
     ] }) }),
-    showTopPanel || loading && skShowTopPanel ? /* @__PURE__ */ jsx("div", { className: cx("mt-5", collapsed ? "px-1" : "px-2"), children: loading ? /* @__PURE__ */ jsx("div", { className: collapsed ? "rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] p-2 shadow-sm" : "overflow-hidden rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] shadow-sm", children: collapsed ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+    showTopPanel || loading && skShowTopPanel ? /* @__PURE__ */ jsx("div", { className: cx("mt-4", collapsed ? "px-4" : "px-5"), children: loading ? /* @__PURE__ */ jsx("div", { className: collapsed ? cx("rounded-3xl p-2", TOP_PANEL_SURFACE) : topPanelClass, children: collapsed ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
       /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: 44, height: 44, borderRadius: 16 } }),
       /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: 56, height: 12, borderRadius: 10 } })
     ] }) : /* @__PURE__ */ jsxs("div", { className: "px-2 py-2", children: [
@@ -2184,7 +2236,7 @@ function SidebarInner({
           /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: "66%", height: 10, borderRadius: 10, opacity: 0.9 } })
         ] })
       ] }) })
-    ] }) }) : collapsed ? /* @__PURE__ */ jsx("div", { className: "rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] p-1.5 shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+    ] }) }) : collapsed ? /* @__PURE__ */ jsx("div", { className: cx("rounded-3xl p-1.5", TOP_PANEL_SURFACE), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
       showWorkspaceInTopPanel ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           WorkspaceSwitcher,
@@ -2217,7 +2269,7 @@ function SidebarInner({
         userMenuSlot ? /* @__PURE__ */ jsx("div", { children: userMenuSlot }) : null
       ] }) : null,
       sidebarSlotCollapsed ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: sidebarSlotCollapsed }) : null
-    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] shadow-sm", children: [
+    ] }) }) : /* @__PURE__ */ jsxs("div", { className: topPanelClass, children: [
       showWorkspaceInTopPanel ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-3", children: [
         /* @__PURE__ */ jsx(
           WorkspaceSwitcher,
@@ -2232,10 +2284,10 @@ function SidebarInner({
             color
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "mt-2.5 px-1", children: /* @__PURE__ */ jsx(SidebarTools, {}) })
+        /* @__PURE__ */ jsx("div", { className: "mt-2.5 border-t border-[color-mix(in_oklab,var(--border)_58%,transparent)] pt-2.5", children: /* @__PURE__ */ jsx(SidebarTools, {}) })
       ] }) : null,
-      showWorkspaceInTopPanel ? /* @__PURE__ */ jsx("div", { className: "h-px bg-[var(--border)] opacity-70" }) : null,
-      showUser ? /* @__PURE__ */ jsx("div", { className: "px-3 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5 rounded-2xl px-3 py-2.5 hover:bg-[color-mix(in_oklab,var(--surface)_65%,transparent)]", children: [
+      showWorkspaceInTopPanel ? /* @__PURE__ */ jsx("div", { className: "h-px bg-[color-mix(in_oklab,var(--border)_58%,transparent)]" }) : null,
+      showUser ? /* @__PURE__ */ jsx("div", { className: "px-3 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5 rounded-2xl px-1 py-1", children: [
         /* @__PURE__ */ jsx(
           AvatarSquare,
           {
@@ -2254,7 +2306,7 @@ function SidebarInner({
         userMenuSlot ? /* @__PURE__ */ jsx("div", { className: "ml-auto", children: userMenuSlot }) : null
       ] }) }) : null,
       sidebarSlot ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "h-px bg-[var(--border)] opacity-70" }),
+        /* @__PURE__ */ jsx("div", { className: "h-px bg-[color-mix(in_oklab,var(--border)_58%,transparent)]" }),
         /* @__PURE__ */ jsx("div", { className: "px-3 py-3", children: sidebarSlot })
       ] }) : null
     ] }) }) : null,
@@ -2263,8 +2315,8 @@ function SidebarInner({
       {
         ref: navRef,
         className: cx(
-          "mt-6 flex-1 space-y-7 overflow-y-auto overflow-x-hidden py-3",
-          collapsed ? "px-2" : "px-3"
+          "mt-5 flex-1 space-y-6 overflow-y-auto overflow-x-hidden py-2",
+          "px-5"
         ),
         children: loading ? /* @__PURE__ */ jsx("div", { className: "space-y-7", children: Array.from({ length: skGroups }).map((_, g) => /* @__PURE__ */ jsxs("div", { children: [
           !collapsed ? /* @__PURE__ */ jsx("div", { className: "mb-3 px-1", children: /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: g % 2 === 0 ? "6.5rem" : "7.5rem", height: 10, borderRadius: 10 } }) }) : null,
@@ -2290,30 +2342,49 @@ function SidebarInner({
             });
             return visibles.length > 0;
           })) == null ? void 0 : _a2[0]) != null ? _b2 : null;
-          const renderedGroups = groups.map(([groupName, items]) => {
+          const renderedGroups = groups.map(([groupName, items], groupIndex) => {
             const visibles = items.filter((i) => {
               var _a3;
               return ((_a3 = i.children) == null ? void 0 : _a3.length) ? i.children.some((c) => c) : true;
             });
             if (visibles.length === 0) return null;
-            return /* @__PURE__ */ jsxs("div", { children: [
-              !collapsed && /* @__PURE__ */ jsx(GroupHeader, { title: groupName }),
-              /* @__PURE__ */ jsx("div", { className: "space-y-2", children: visibles.map((item) => /* @__PURE__ */ jsx(
-                RenderItem,
-                {
-                  item,
-                  collapsed: collapsed != null ? collapsed : false,
-                  activeKey,
-                  go,
-                  color
-                },
-                item.key
-              )) }),
-              !inserted && quick && firstGroupNameWithItems === groupName ? /* @__PURE__ */ jsx(React.Fragment, { children: (() => {
-                inserted = true;
-                return quick;
-              })() }) : null
-            ] }, groupName);
+            return /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                layout: true,
+                initial: calmFadeInitial,
+                animate: calmFadeAnimate,
+                transition: { duration: 0.24, delay: groupIndex * 0.03, ease: calmFadeEase },
+                children: [
+                  !collapsed ? /* @__PURE__ */ jsx(GroupHeader, { title: groupName }) : null,
+                  /* @__PURE__ */ jsx("div", { className: "space-y-2", children: visibles.map((item, itemIndex) => /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      layout: true,
+                      initial: { opacity: 0, filter: "blur(6px)" },
+                      animate: { opacity: 1, filter: "blur(0px)" },
+                      transition: { duration: 0.2, delay: itemIndex * 0.02, ease: calmFadeEase },
+                      children: /* @__PURE__ */ jsx(
+                        RenderItem,
+                        {
+                          item,
+                          collapsed: collapsed != null ? collapsed : false,
+                          activeKey,
+                          go,
+                          color
+                        }
+                      )
+                    },
+                    item.key
+                  )) }),
+                  !inserted && quick && firstGroupNameWithItems === groupName ? /* @__PURE__ */ jsx(React.Fragment, { children: (() => {
+                    inserted = true;
+                    return quick;
+                  })() }) : null
+                ]
+              },
+              groupName
+            );
           });
           if (!inserted && quick) {
             renderedGroups.push(
@@ -2338,7 +2409,9 @@ function RenderItem({
   const Icon = (_a = item.icon) != null ? _a : (() => null);
   const hasChildren = !!((_b = item.children) == null ? void 0 : _b.length);
   const children = ((_c = item.children) != null ? _c : []).filter(Boolean);
-  const isActive = item.key === activeKey || hasChildren && children.some((ch) => ch.key === activeKey);
+  const isDirectActive = item.key === activeKey;
+  const hasActiveChild = hasChildren && children.some((ch) => ch.key === activeKey);
+  const isActive = isDirectActive || hasActiveChild;
   const [open, setOpen] = useState(false);
   useEffect(() => {
     if (!hasChildren) return;
@@ -2362,46 +2435,23 @@ function RenderItem({
     } catch {
     }
   }, [hasChildren, open, item.key]);
-  if (hasChildren && collapsed) {
-    return /* @__PURE__ */ jsx(Tooltip, { content: item.label, placement: "right", offset: 12, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        unstyled: true,
-        type: "button",
-        onClick: () => go(item.key),
-        title: void 0,
-        "data-fx-sidebar-key": item.key,
-        className: [
-          "group flex w-full items-center gap-3.5 rounded-2xl px-3.5 py-2.5 text-left text-[0.9375rem] transition justify-center active:scale-[0.99]",
-          isActive ? `${WRAP_ACTIVE[color]} text-[var(--foreground)]` : "text-[var(--foreground)] hover:bg-[color-mix(in_oklab,var(--surface)_65%,transparent)]"
-        ].join(" "),
-        children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: [
-              "grid h-10 w-10 place-items-center rounded-2xl border transition",
-              isActive ? `${ICON_BORDER_ACTIVE[color]} bg-[var(--card)] shadow-sm` : "border-[var(--border)] bg-[var(--card)] shadow-sm"
-            ].join(" "),
-            children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
-          }
-        )
-      }
-    ) });
-  }
   if (hasChildren) {
-    return /* @__PURE__ */ jsxs("div", { children: [
+    const content = /* @__PURE__ */ jsxs(motion.div, { layout: true, transition: SIDEBAR_COLLAPSE_TRANSITION, children: [
       /* @__PURE__ */ jsxs(
-        "div",
+        motion.div,
         {
+          layout: true,
+          transition: SIDEBAR_COLLAPSE_TRANSITION,
           className: [
-            "relative flex w-full min-w-0 items-center rounded-2xl px-3.5 py-2.5 text-[0.9375rem] transition gap-2.5 active:scale-[0.99]",
-            isActive ? `${WRAP_ACTIVE[color]} text-[var(--foreground)]` : "text-[var(--foreground)] hover:bg-[color-mix(in_oklab,var(--surface)_65%,transparent)]"
+            "relative isolate flex w-full min-w-0 items-center gap-2.5 rounded-[1.2rem] px-3 py-2.5 text-[0.9375rem] transition-all duration-300 active:scale-[0.99]",
+            isActive ? `${WRAP_ACTIVE[color]} text-[var(--foreground)]` : ITEM_IDLE
           ].join(" "),
           children: [
+            !collapsed && isActive ? /* @__PURE__ */ jsx("span", { className: ACTIVE_ROW_BAR }) : null,
             /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isActive && /* @__PURE__ */ jsx(
               motion.span,
               {
-                className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
+                className: `pointer-events-none absolute inset-0 rounded-[1.2rem] ${WRAP_ACTIVE[color]}`,
                 initial: { opacity: 0 },
                 animate: { opacity: 1 },
                 exit: { opacity: 0 },
@@ -2410,75 +2460,148 @@ function RenderItem({
               },
               `active-${item.key}`
             ) }),
-            /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: [
-                    "grid h-10 w-10 place-items-center rounded-2xl border transition",
-                    isActive ? `${ICON_BORDER_ACTIVE[color]} bg-[var(--card)] shadow-sm` : "border-[var(--border)] bg-[var(--card)] shadow-sm"
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "truncate", "data-fx-sidebar-key": item.key, children: item.label })
-            ] }),
             /* @__PURE__ */ jsx(
               Button,
               {
-                iconOnly: true,
-                noPaddingX: true,
+                unstyled: true,
                 type: "button",
-                "aria-label": open ? "Contraer submen\xFA" : "Expandir submen\xFA",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setOpen(!open);
-                },
-                variant: "ghost",
-                size: "sm",
-                leftIcon: /* @__PURE__ */ jsx(ChevronDownIcon, { className: `h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`, "aria-hidden": true }),
-                className: [
-                  "h-8 w-8 shrink-0 rounded-lg p-0 !gap-0 border",
-                  isActive ? `${TOGGLE_BORDER_ACTIVE[color]} bg-[color-mix(in_oklab,var(--card)_80%,transparent)]` : "border-[var(--border)] bg-[var(--card)]"
-                ].join(" ")
+                onClick: () => go(item.key),
+                "data-fx-sidebar-key": item.key,
+                className: "relative z-[1] flex min-w-0 flex-1 items-center",
+                children: /* @__PURE__ */ jsxs(
+                  motion.span,
+                  {
+                    layout: true,
+                    transition: SIDEBAR_COLLAPSE_TRANSITION,
+                    className: cx(
+                      "flex min-w-0 items-center",
+                      collapsed ? "w-full justify-start" : "w-full gap-3"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: [
+                            "grid h-10 w-10 shrink-0 place-items-center rounded-2xl transition-all duration-300 group-hover:scale-[1.04]",
+                            isActive ? ITEM_ICON_ACTIVE : ITEM_ICON_IDLE
+                          ].join(" "),
+                          children: /* @__PURE__ */ jsx(
+                            Icon,
+                            {
+                              className: "h-5 w-5",
+                              ...isActive ? {
+                                fill: "var(--primary)",
+                                color: "var(--primary)",
+                                style: { color: "var(--primary)" }
+                              } : void 0
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed ? /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          "data-fx-sidebar-key": item.key,
+                          initial: { opacity: 0, width: 0 },
+                          animate: { opacity: 1, width: "auto" },
+                          exit: { opacity: 0, width: 0 },
+                          transition: SIDEBAR_COLLAPSE_TRANSITION,
+                          className: "overflow-hidden",
+                          children: /* @__PURE__ */ jsx("span", { className: "block truncate", children: item.label })
+                        },
+                        `label-${item.key}`
+                      ) : null })
+                    ]
+                  }
+                )
               }
-            )
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed ? /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, width: 0 },
+                animate: { opacity: 1, width: "auto" },
+                exit: { opacity: 0, width: 0 },
+                transition: SIDEBAR_COLLAPSE_TRANSITION,
+                className: "overflow-hidden",
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    iconOnly: true,
+                    noPaddingX: true,
+                    type: "button",
+                    "aria-label": open ? "Contraer submen\xFA" : "Expandir submen\xFA",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setOpen(!open);
+                    },
+                    variant: "ghost",
+                    size: "sm",
+                    leftIcon: /* @__PURE__ */ jsx(ChevronDownIcon, { className: `h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`, "aria-hidden": true }),
+                    className: [
+                      "relative z-[1] h-8 w-8 shrink-0 rounded-xl p-0 !gap-0 hover:text-[var(--foreground)]",
+                      isActive ? `${SOFT_BUTTON_SURFACE} ${TOGGLE_BORDER_ACTIVE[color]} ${hasActiveChild ? "text-[var(--primary)]" : "text-[var(--muted)]"}` : "border-transparent bg-transparent text-[var(--muted)]"
+                    ].join(" ")
+                  }
+                )
+              },
+              `toggle-${item.key}`
+            ) : null })
           ]
         }
       ),
-      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && !collapsed && /* @__PURE__ */ jsx(
         motion.div,
         {
-          initial: { height: 0, opacity: 0, y: -4 },
-          animate: { height: "auto", opacity: 1, y: 0 },
-          exit: { height: 0, opacity: 0, y: -4 },
-          transition: { type: "tween", duration: 0.18 },
+          initial: { height: 0, opacity: 0, filter: "blur(6px)" },
+          animate: { height: "auto", opacity: 1, filter: "blur(0px)" },
+          exit: { height: 0, opacity: 0, filter: "blur(6px)" },
+          transition: { type: "tween", duration: 0.24, ease: [0.22, 1, 0.36, 1] },
           className: "mt-1 overflow-hidden",
-          style: { willChange: "height, opacity, transform" },
-          children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] shadow-sm divide-y divide-[var(--border)]", children: children.map((ch) => {
-            const active2 = ch.key === activeKey;
-            return /* @__PURE__ */ jsx(
-              Button,
-              {
-                unstyled: true,
-                onClick: () => go(ch.key),
-                "data-fx-sidebar-key": ch.key,
-                className: [
-                  "block w-full text-left px-3.5 py-2.5 text-[0.875rem] transition",
-                  active2 ? SUBITEM_ACTIVE[color] : "text-[var(--foreground)] hover:bg-[color-mix(in_oklab,var(--surface)_65%,transparent)]"
-                ].join(" "),
-                children: ch.label
-              },
-              ch.key
-            );
-          }) })
+          style: { willChange: "height, opacity, filter" },
+          children: /* @__PURE__ */ jsxs("div", { className: "relative pl-4", children: [
+            /* @__PURE__ */ jsx("div", { className: SUBMENU_GUIDE_BAR }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-1 pl-3", children: children.map((ch, index) => {
+              const active2 = ch.key === activeKey;
+              return /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  className: "relative",
+                  initial: { opacity: 0, filter: "blur(5px)" },
+                  animate: { opacity: 1, filter: "blur(0px)" },
+                  transition: { duration: 0.18, delay: index * 0.02, ease: [0.22, 1, 0.36, 1] },
+                  children: [
+                    active2 ? /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute bottom-2 -left-3 top-2 z-[1] w-px bg-[var(--primary)] shadow-[0_0_0_1px_color-mix(in_oklab,var(--primary)_14%,transparent),0_10px_24px_-14px_color-mix(in_oklab,var(--primary)_72%,transparent)]" }) : null,
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        unstyled: true,
+                        onClick: () => go(ch.key),
+                        "data-fx-sidebar-key": ch.key,
+                        className: [
+                          "relative isolate block w-full rounded-xl px-3 py-2.5 text-left text-[0.875rem] transition-all duration-300",
+                          active2 ? SUBITEM_ACTIVE[color] : ITEM_IDLE
+                        ].join(" "),
+                        children: /* @__PURE__ */ jsx("span", { className: "relative z-[1] block truncate", children: ch.label })
+                      }
+                    )
+                  ]
+                },
+                ch.key
+              );
+            }) })
+          ] })
         },
         `submenu-${item.key}`
       ) })
     ] });
+    if (collapsed) {
+      return /* @__PURE__ */ jsx(Tooltip, { content: item.label, placement: "right", offset: 12, children: content });
+    }
+    return content;
   }
   const active = item.key === activeKey;
-  const node = /* @__PURE__ */ jsxs(
+  const node = /* @__PURE__ */ jsx(motion.div, { layout: true, transition: SIDEBAR_COLLAPSE_TRANSITION, children: /* @__PURE__ */ jsxs(
     Button,
     {
       unstyled: true,
@@ -2487,15 +2610,15 @@ function RenderItem({
       title: void 0,
       "data-fx-sidebar-key": item.key,
       className: [
-        "group relative flex w-full min-w-0 items-center gap-3.5 rounded-2xl px-3.5 py-2.5 text-left text-[0.9375rem] transition active:scale-[0.99]",
-        active ? `${WRAP_ACTIVE[color]} text-[var(--foreground)]` : "text-[var(--foreground)] hover:bg-[color-mix(in_oklab,var(--surface)_65%,transparent)]",
-        collapsed ? "justify-center" : ""
+        "group relative isolate flex w-full min-w-0 items-center gap-3.5 rounded-[1.2rem] px-3 py-2.5 text-left text-[0.9375rem] transition-all duration-300 active:scale-[0.99]",
+        active ? `${WRAP_ACTIVE[color]} text-[var(--foreground)]` : ITEM_IDLE
       ].join(" "),
       children: [
+        !collapsed && active ? /* @__PURE__ */ jsx("span", { className: ACTIVE_ROW_BAR }) : null,
         /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: active && /* @__PURE__ */ jsx(
           motion.span,
           {
-            className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
+            className: `pointer-events-none absolute inset-0 rounded-[1.2rem] ${WRAP_ACTIVE[color]}`,
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             exit: { opacity: 0 },
@@ -2504,20 +2627,54 @@ function RenderItem({
           },
           `active-${item.key}`
         ) }),
-        /* @__PURE__ */ jsx(
-          "span",
+        /* @__PURE__ */ jsxs(
+          motion.span,
           {
-            className: [
-              "grid h-10 w-10 place-items-center rounded-2xl border text-[var(--foreground)] transition group-hover:scale-105",
-              active ? `${ICON_BORDER_ACTIVE[color]} bg-[var(--card)] shadow-sm` : "border-[var(--border)] bg-[var(--card)] shadow-sm"
-            ].join(" "),
-            children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
+            layout: true,
+            transition: SIDEBAR_COLLAPSE_TRANSITION,
+            className: cx(
+              "relative z-[1] flex min-w-0 items-center",
+              collapsed ? "w-full justify-start" : "w-full gap-3.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: [
+                    "grid h-10 w-10 shrink-0 place-items-center rounded-2xl transition-all duration-300 group-hover:scale-[1.04]",
+                    active ? ITEM_ICON_ACTIVE : ITEM_ICON_IDLE
+                  ].join(" "),
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      className: "h-5 w-5",
+                      ...active ? {
+                        fill: "var(--primary)",
+                        color: "var(--primary)",
+                        style: { color: "var(--primary)" }
+                      } : void 0
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed ? /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: { opacity: 0, width: 0 },
+                  animate: { opacity: 1, width: "auto" },
+                  exit: { opacity: 0, width: 0 },
+                  transition: SIDEBAR_COLLAPSE_TRANSITION,
+                  className: "relative z-[1] overflow-hidden",
+                  children: /* @__PURE__ */ jsx("span", { className: "block truncate", children: item.label })
+                },
+                `label-${item.key}`
+              ) : null })
+            ]
           }
-        ),
-        !collapsed && /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+        )
       ]
     }
-  );
+  ) });
   if (!collapsed) return node;
   return /* @__PURE__ */ jsx(Tooltip, { content: item.label, placement: "right", offset: 12, children: node });
 }