@kopexa/sidebar 17.2.0 → 17.3.0

package/dist/v2/index.js

@@ -48,15 +48,36 @@ __export(v2_exports, {
 module.exports = __toCommonJS(v2_exports);
 
 // src/v2/app-shell.tsx
-var import_shared_utils = require("@kopexa/shared-utils");
 var import_react2 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/v2/context.tsx
 var import_react_utils = require("@kopexa/react-utils");
+var import_theme = require("@kopexa/theme");
 var import_tooltip = require("@kopexa/tooltip");
 var import_use_is_mobile = require("@kopexa/use-is-mobile");
 var import_react = require("react");
+
+// src/v2/types.ts
+function normalizePath(href) {
+  const path = href.split("#")[0].split("?")[0].replace(/\/+$/, "");
+  return path === "" ? "/" : path;
+}
+function pathMatchLength(currentPath, href) {
+  const target = normalizePath(href);
+  if (currentPath === target) return target.length;
+  if (target !== "/" && currentPath.startsWith(`${target}/`))
+    return target.length;
+  return -1;
+}
+function panelItemHasChildren(item) {
+  return "children" in item && Array.isArray(item.children);
+}
+function panelItemIsSection(item) {
+  return "section" in item;
+}
+
+// src/v2/context.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var PIN_COOKIE = "kpx_sidebar_v2_pinned";
 var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -93,6 +114,7 @@ function SidebarV2Provider({
   }, []);
   const panelOverrideActive = overrideCount > 0;
   const navPreviewActive = pinned ? selectedRail !== null : flyoutValue !== null;
+  const styles = (0, import_react.useMemo)(() => (0, import_theme.sidebarV2)({ tone }), [tone]);
   const setPinned = (0, import_react.useCallback)(
     (value2) => {
       onPinnedChange == null ? void 0 : onPinnedChange(value2);
@@ -122,12 +144,13 @@ function SidebarV2Provider({
     setOpenGroup((curr) => curr === key ? null : key);
   }, []);
   const isActive = (0, import_react.useCallback)(
-    (href) => activeHref === href || href !== "/" && activeHref.startsWith(`${href}/`),
+    (href) => pathMatchLength(normalizePath(activeHref), href) >= 0,
     [activeHref]
   );
   const value = (0, import_react.useMemo)(
     () => ({
       tone,
+      styles,
       pinned,
       togglePin,
       setPinned,
@@ -156,6 +179,7 @@ function SidebarV2Provider({
     }),
     [
       tone,
+      styles,
       pinned,
       togglePin,
       setPinned,
@@ -198,17 +222,13 @@ function AppShellRoot({
   children,
   ...props
 }) {
-  const { tone } = useSidebarV2();
+  const { tone, styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       "data-slot": "app-shell",
       "data-tone": tone,
-      className: (0, import_shared_utils.cn)(
-        "relative isolate grid h-svh w-full overflow-hidden antialiased",
-        tone === "light" ? "bg-muted text-foreground" : "bg-sidebar text-sidebar-foreground",
-        className
-      ),
+      className: styles.shell({ className }),
       style: {
         "--kpx-rail-width": RAIL_WIDTH,
         "--kpx-panel-width": PANEL_WIDTH,
@@ -227,26 +247,24 @@ function AppShellHeader({
   style,
   ...props
 }) {
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "header",
     {
       "data-slot": "app-shell-header",
-      className: (0, import_shared_utils.cn)("z-20 flex h-14 items-center gap-3 px-2", className),
+      className: styles.header({ className }),
       style: { gridArea: "header", ...style },
       ...props
     }
   );
 }
 function AppShellMain({ className, style, ...props }) {
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "main",
     {
       "data-slot": "app-shell-main",
-      className: (0, import_shared_utils.cn)(
-        "relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background",
-        "m-2 rounded-xl shadow-sm",
-        className
-      ),
+      className: styles.main({ className }),
       style: { gridArea: "main", ...style },
       ...props
     }
@@ -257,11 +275,12 @@ function AppShellAside({
   style,
   ...props
 }) {
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "aside",
     {
       "data-slot": "app-shell-aside",
-      className: (0, import_shared_utils.cn)("min-h-0 min-w-0 overflow-hidden", className),
+      className: styles.aside({ className }),
       style: { gridArea: "aside", ...style },
       ...props
     }
@@ -282,56 +301,32 @@ AppShell.PanelContent = AppShellPanelContent;
 // src/v2/components.tsx
 var import_button = require("@kopexa/button");
 var import_icons = require("@kopexa/icons");
-var import_shared_utils2 = require("@kopexa/shared-utils");
-var import_theme = require("@kopexa/theme");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
 var import_tooltip2 = require("@kopexa/tooltip");
 var import_react3 = require("react");
-
-// src/v2/types.ts
-function panelItemHasChildren(item) {
-  return "children" in item && Array.isArray(item.children);
-}
-function panelItemIsSection(item) {
-  return "section" in item;
-}
-
-// src/v2/components.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function SidebarV2Inset({
   className,
   ...props
 }) {
-  const { tone } = useSidebarV2();
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "main",
     {
       "data-slot": "sidebar-v2-inset",
-      className: (0, import_shared_utils2.cn)(
-        "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background",
-        "md:m-2 md:rounded-xl md:shadow-sm",
-        // On a light surround the white card needs a hairline to define its
-        // edge; on the dark surround a border would read as a seam.
-        tone === "light" && "md:border md:border-border/70",
-        className
-      ),
+      className: styles.inset({ className }),
       ...props
     }
   );
 }
 function SidebarV2Rail({ className, ...props }) {
-  const { tone } = useSidebarV2();
-  const light = tone === "light";
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "nav",
     {
       "data-slot": "sidebar-v2-rail",
-      className: (0, import_shared_utils2.cn)(
-        "flex w-(--kpx-rail-width) shrink-0 flex-col overflow-hidden bg-sidebar py-2 text-sidebar-foreground",
-        // Light tone: the dark rail floats as a rounded card on the light
-        // surround. Dark tone: full-height, flush to the edge.
-        light ? "m-2 rounded-2xl shadow-sm" : "h-full",
-        className
-      ),
+      className: styles.rail({ className }),
       ...props
     }
   );
@@ -340,6 +335,7 @@ function SidebarV2RailSpacer() {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "aria-hidden": true, className: "flex-1" });
 }
 var SidebarV2Workspace = (0, import_react3.forwardRef)(({ name, role, logo, className, appearance = "rail", ...props }, ref) => {
+  const { styles } = useSidebarV2();
   if (appearance === "bar") {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
@@ -348,19 +344,15 @@ var SidebarV2Workspace = (0, import_react3.forwardRef)(({ name, role, logo, clas
         type: "button",
         "data-slot": "sidebar-v2-workspace",
         "aria-label": role ? `${name} \u2013 ${role}` : name,
-        className: (0, import_shared_utils2.cn)(
-          "group/ws flex cursor-pointer items-center gap-2 rounded-lg py-1 pr-2 pl-1",
-          "outline-hidden ring-ring transition-colors hover:bg-foreground/5 focus-visible:ring-2",
-          className
-        ),
+        className: styles.workspaceBar({ className }),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-semibold text-primary-foreground", children: logo != null ? logo : name.charAt(0).toUpperCase() }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "flex min-w-0 flex-col text-left leading-tight", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate text-sm font-semibold text-foreground", children: name }),
-            role && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: role })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.workspaceBarLogo(), children: logo != null ? logo : name.charAt(0).toUpperCase() }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles.workspaceBarText(), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.workspaceBarName(), children: name }),
+            role && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.workspaceBarRole(), children: role })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ChevronDownIcon, { className: "size-4 shrink-0 text-muted-foreground" })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ChevronDownIcon, { className: styles.workspaceBarChevron() })
         ]
       }
     );
@@ -372,48 +364,25 @@ var SidebarV2Workspace = (0, import_react3.forwardRef)(({ name, role, logo, clas
       type: "button",
       "data-slot": "sidebar-v2-workspace",
       "aria-label": role ? `${name} \u2013 ${role}` : name,
-      className: (0, import_shared_utils2.cn)(
-        "group/ws relative mx-auto mt-1 flex cursor-pointer items-center justify-center rounded-lg p-1",
-        "outline-hidden ring-sidebar-ring transition-colors",
-        "hover:bg-sidebar-accent focus-visible:ring-2",
-        className
-      ),
+      className: styles.workspaceRail({ className }),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "relative flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-semibold text-primary-foreground", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles.workspaceRailLogo(), children: [
         logo != null ? logo : name.charAt(0).toUpperCase(),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ChevronDownIcon, { className: "absolute -right-1 -bottom-1 size-3.5 rounded-full bg-sidebar p-px text-sidebar-foreground/60" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ChevronDownIcon, { className: styles.workspaceRailChevron() })
       ] })
     }
   );
 });
 SidebarV2Workspace.displayName = "SidebarV2Workspace";
-function railButtonClasses(active) {
-  return (0, import_shared_utils2.cn)(
-    "group/rail relative mx-auto flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-xl",
-    "outline-hidden ring-sidebar-ring transition-colors",
-    "text-sidebar-foreground/85 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-    "focus-visible:ring-2",
-    active && "bg-sidebar-accent text-sidebar-accent-foreground"
-  );
-}
 function RailInner({
   icon: Icon,
-  active,
   badge
 }) {
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "span",
-      {
-        "aria-hidden": true,
-        className: (0, import_shared_utils2.cn)(
-          "absolute top-1/2 left-0 h-5 w-0.5 -translate-x-[0.6rem] -translate-y-1/2 rounded-r bg-primary transition-opacity",
-          active ? "opacity-100" : "opacity-0"
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "size-5 shrink-0" }),
-    badge != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.5625rem] font-semibold text-primary-foreground", children: badge })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: styles.railIndicator() }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: styles.railIcon() }),
+    badge != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.railBadge(), children: badge })
   ] });
 }
 function SidebarV2RailLink({
@@ -422,18 +391,18 @@ function SidebarV2RailLink({
   href,
   badge
 }) {
-  const { renderLink, isActive, resetPanelSelection } = useSidebarV2();
+  const { renderLink, isActive, resetPanelSelection, styles } = useSidebarV2();
   const active = isActive(href);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tooltip2.Tooltip, { content: label, side: "right", children: renderLink({
     href,
-    className: railButtonClasses(active),
+    className: styles.railButton(),
     "data-active": active,
     "aria-current": active ? "page" : void 0,
     "aria-label": label,
     // Navigating to a destination link clears any open panel preview,
     // even when the route doesn't change (e.g. already on it).
     onClick: resetPanelSelection,
-    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RailInner, { icon, label, active, badge })
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RailInner, { icon, badge })
   }) });
 }
 function SidebarV2RailItem({
@@ -446,6 +415,7 @@ function SidebarV2RailItem({
   onMouseLeave,
   badge
 }) {
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tooltip2.Tooltip, { content: label, side: "right", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
@@ -456,8 +426,8 @@ function SidebarV2RailItem({
       onClick,
       onMouseEnter,
       onMouseLeave,
-      className: railButtonClasses(active),
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RailInner, { icon, label, active, badge })
+      className: styles.railButton(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RailInner, { icon, badge })
     }
   ) });
 }
@@ -470,54 +440,18 @@ function SidebarV2Panel({
   children,
   className
 }) {
-  const { togglePin, pinned, tone } = useSidebarV2();
-  const light = tone === "light";
+  const { togglePin, pinned, styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       "data-slot": "sidebar-v2-panel",
-      "data-floating": floating,
-      className: (0, import_shared_utils2.cn)(
-        "flex h-full w-(--kpx-panel-width) shrink-0 flex-col",
-        // Surface. The flyout is a distinct floating card (white on light),
-        // so it reads as an overlay rather than a flat full-height slab.
-        floating ? light ? "bg-background text-foreground" : "bg-sidebar text-sidebar-foreground" : light ? "bg-muted text-foreground" : "bg-sidebar text-sidebar-foreground",
-        floating ? (
-          // Floating card: rounded, soft layered shadow, hairline ring.
-          (0, import_shared_utils2.cn)(
-            "overflow-hidden rounded-2xl shadow-2xl shadow-black/20 ring-1",
-            light ? "ring-black/5" : "ring-white/10"
-          )
-        ) : (
-          // Pinned: light blends into the surround (no border); dark keeps a
-          // hairline against the rail.
-          light ? "" : "border-l border-sidebar-border/40"
-        ),
-        className
-      ),
+      "data-floating": floating ? "true" : "false",
+      className: styles.panel({ className }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start gap-2 px-3 pt-3 pb-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles.panelHeader(), children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "div",
-              {
-                className: (0, import_shared_utils2.cn)(
-                  "truncate text-sm font-semibold",
-                  light ? "text-foreground" : "text-sidebar-foreground"
-                ),
-                children: title
-              }
-            ),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "div",
-              {
-                className: (0, import_shared_utils2.cn)(
-                  "truncate text-xs",
-                  light ? "text-muted-foreground" : "text-sidebar-foreground/70"
-                ),
-                children: subtitle
-              }
-            )
+            title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.panelTitle(), children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.panelSubtitle(), children: subtitle })
           ] }),
           action != null ? action : !hidePin && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_tooltip2.Tooltip,
@@ -531,41 +465,28 @@ function SidebarV2Panel({
                   size: "sm",
                   "aria-label": pinned ? "Panel l\xF6sen" : "Panel anheften",
                   onClick: togglePin,
-                  className: (0, import_shared_utils2.cn)(
-                    "-mr-1 shrink-0",
-                    light ? "text-muted-foreground hover:bg-foreground/5 hover:text-foreground" : "text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-                  ),
+                  className: styles.panelPin(),
                   children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.PanelLeftIcon, { className: "size-4" })
                 }
               )
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-auto p-2", children })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.panelBody(), children })
       ]
     }
   );
 }
-function panelRowLight(active) {
-  return (0, import_shared_utils2.cn)(
-    "flex h-8 w-full items-center gap-2.5 rounded-md px-2 text-sm outline-hidden ring-ring transition-colors focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-    active ? "bg-primary/10 font-medium text-primary" : "text-foreground/80 hover:bg-foreground/5"
-  );
-}
 function SidebarV2PanelLabel({
   className,
   ...props
 }) {
-  const { tone } = useSidebarV2();
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       "data-slot": "sidebar-v2-panel-label",
-      className: (0, import_shared_utils2.cn)(
-        "px-2 pt-3 pb-1 text-[0.6875rem] font-medium uppercase tracking-wide",
-        tone === "light" ? "text-muted-foreground" : "text-sidebar-foreground/50",
-        className
-      ),
+      className: styles.panelLabel({ className }),
       ...props
     }
   );
@@ -574,7 +495,7 @@ function SidebarV2PanelLeaf({
   item,
   active: activeProp
 }) {
-  const { renderLink, isActive, tone } = useSidebarV2();
+  const { renderLink, isActive, tone, styles } = useSidebarV2();
   const light = tone === "light";
   const Icon = item.icon;
   const active = activeProp != null ? activeProp : isActive(item.href);
@@ -582,51 +503,40 @@ function SidebarV2PanelLeaf({
     href: item.href,
     "data-active": active,
     "aria-current": active ? "page" : void 0,
-    className: light ? panelRowLight(active) : (0, import_theme.sidebarMenuButton)({ size: "md" }),
+    // Light tone uses the recipe's leaf slot (group/leaf + data-active);
+    // dark tone reuses the existing sidebarMenuButton recipe.
+    className: light ? styles.panelLeaf() : (0, import_theme2.sidebarMenuButton)({ size: "md" }),
     children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      Icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        Icon,
-        {
-          className: (0, import_shared_utils2.cn)(
-            light ? active ? void 0 : "text-muted-foreground" : "text-sidebar-foreground/75"
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
-      item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "span",
-        {
-          className: (0, import_shared_utils2.cn)(
-            "ml-auto rounded-full px-1.5 text-[0.625rem] font-medium",
-            light ? "bg-foreground/10 text-foreground/70" : "bg-sidebar-accent text-sidebar-accent-foreground"
-          ),
-          children: item.badge
-        }
-      )
+      Icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: styles.panelLeafIcon() }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.panelLeafLabel(), children: item.label }),
+      item.tag && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.panelLeafTag(), children: item.tag }),
+      item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.panelLeafBadge(), children: item.badge })
     ] })
   }) });
 }
 function SidebarV2PanelGroup({
-  item
+  item,
+  winningHref
 }) {
   var _a;
-  const { openGroup, toggleGroup, activeHref, renderLink, tone } = useSidebarV2();
+  const { openGroup, toggleGroup, activeHref, renderLink, tone, styles } = useSidebarV2();
   const light = tone === "light";
   const Icon = item.icon;
   const key = (_a = item.value) != null ? _a : item.label;
-  let bestChildHref = null;
-  let bestLen = -1;
-  for (const c of item.children) {
-    if (activeHref === c.href) {
-      bestChildHref = c.href;
-      break;
-    }
-    if (activeHref.startsWith(`${c.href}/`) && c.href.length > bestLen) {
-      bestChildHref = c.href;
-      bestLen = c.href.length;
+  let winner = winningHref;
+  if (winner === void 0) {
+    const current = normalizePath(activeHref);
+    let len = -1;
+    winner = null;
+    for (const c of item.children) {
+      const l = pathMatchLength(current, c.href);
+      if (l > len) {
+        len = l;
+        winner = normalizePath(c.href);
+      }
     }
   }
-  const containsActive = bestChildHref !== null;
+  const containsActive = winner != null && item.children.some((c) => normalizePath(c.href) === winner);
   const open = openGroup === key || openGroup === null && containsActive;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -634,71 +544,76 @@ function SidebarV2PanelGroup({
       {
         type: "button",
         "data-state": open ? "open" : "closed",
+        "data-contains-active": containsActive,
         "aria-expanded": open,
         onClick: () => toggleGroup(key),
-        className: (0, import_shared_utils2.cn)(
-          light ? panelRowLight(false) : (0, import_theme.sidebarMenuButton)({ size: "md" }),
-          "cursor-pointer",
-          containsActive && (light ? "font-medium text-foreground" : "font-medium")
+        className: (0, import_shared_utils.cn)(
+          light ? styles.panelLeaf() : (0, import_theme2.sidebarMenuButton)({ size: "md" }),
+          styles.panelGroupButton()
         ),
         children: [
-          Icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            Icon,
-            {
-              className: light ? "text-muted-foreground" : "text-sidebar-foreground/75"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_icons.ChevronRightIcon,
-            {
-              className: (0, import_shared_utils2.cn)(
-                "size-3.5! shrink-0 transition-transform",
-                light ? "text-muted-foreground" : "text-sidebar-foreground/60",
-                open && "rotate-90"
-              )
-            }
-          )
+          Icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: styles.panelGroupIcon() }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.panelGroupLabel(), children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ChevronRightIcon, { className: styles.panelGroupChevron() })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
-      {
-        className: (0, import_shared_utils2.cn)(
-          "my-0.5 ml-[1.05rem] flex flex-col border-l pl-3",
-          light ? "border-border" : "border-sidebar-border"
-        ),
-        children: item.children.map((child) => {
-          const active = child.href === bestChildHref;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: renderLink({
-            href: child.href,
-            "data-active": active,
-            "aria-current": active ? "page" : void 0,
-            className: (0, import_shared_utils2.cn)(
-              "relative block rounded-md px-2 py-1.5 text-[0.8125rem] outline-hidden transition-colors focus-visible:ring-2",
-              "before:absolute before:top-1/2 before:-left-3 before:h-px before:w-2.5",
-              light ? active ? "bg-primary/10 font-medium text-primary ring-ring before:bg-primary" : "text-muted-foreground ring-ring hover:bg-foreground/5 hover:text-foreground before:bg-border" : active ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground ring-sidebar-ring before:bg-primary" : "text-sidebar-foreground/80 ring-sidebar-ring hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground before:bg-sidebar-foreground/30"
-            ),
-            children: child.label
-          }) }, child.href);
-        })
-      }
-    )
+    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.panelTree(), children: item.children.map((child) => {
+      const active = normalizePath(child.href) === winner;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: renderLink({
+        href: child.href,
+        "data-active": active,
+        "aria-current": active ? "page" : void 0,
+        className: styles.subItem(),
+        children: child.label
+      }) }, child.href);
+    }) })
   ] });
 }
 function SidebarV2PanelItems({
   items
 }) {
+  const { activeHref } = useSidebarV2();
+  const winningHref = (0, import_react3.useMemo)(() => {
+    const current = normalizePath(activeHref);
+    let href = null;
+    let len = -1;
+    for (const item of items) {
+      if (panelItemIsSection(item)) continue;
+      const hrefs = panelItemHasChildren(item) ? item.children.map((c) => c.href) : [item.href];
+      for (const h of hrefs) {
+        const l = pathMatchLength(current, h);
+        if (l > len) {
+          len = l;
+          href = normalizePath(h);
+        }
+      }
+    }
+    return href;
+  }, [items, activeHref]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: items.map((item, idx) => {
     var _a;
     if (panelItemIsSection(item)) {
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SidebarV2PanelLabel, { children: item.section }, `section-${item.section}-${idx}`);
     }
     if (panelItemHasChildren(item)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SidebarV2PanelGroup, { item }, (_a = item.value) != null ? _a : item.label);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        SidebarV2PanelGroup,
+        {
+          item,
+          winningHref
+        },
+        (_a = item.value) != null ? _a : item.label
+      );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SidebarV2PanelLeaf, { item }, item.href);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      SidebarV2PanelLeaf,
+      {
+        item,
+        active: winningHref != null && normalizePath(item.href) === winningHref
+      },
+      item.href
+    );
   }) });
 }
 function SidebarV2Trigger({
@@ -722,7 +637,7 @@ function SidebarV2Trigger({
 
 // src/v2/from-config.tsx
 var import_drawer = require("@kopexa/drawer");
-var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_shared_utils2 = require("@kopexa/shared-utils");
 var import_react4 = require("motion/react");
 var import_react5 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -751,13 +666,14 @@ function SidebarV2FromConfig({
     closeFlyout,
     selectedRail,
     setSelectedRail,
-    isActive,
+    activeHref,
     isMobile,
     drawerOpen,
     setDrawerOpen,
     setPanelHost,
     panelOverrideActive,
-    navPreviewActive
+    navPreviewActive,
+    styles
   } = useSidebarV2();
   const hoverMode = flyoutTrigger === "hover" && !pinned && !isMobile;
   const closeTimer = (0, import_react5.useRef)(null);
@@ -796,14 +712,21 @@ function SidebarV2FromConfig({
     [items]
   );
   const activeRailValue = (0, import_react5.useMemo)(() => {
-    const match = panels.find(
-      (p) => p.items.some((item) => {
-        if (panelItemIsSection(item)) return false;
-        return panelItemHasChildren(item) ? item.children.some((c) => isActive(c.href)) : isActive(item.href);
-      })
-    );
-    return match ? entryValue(match) : null;
-  }, [panels, isActive]);
+    var _a2, _b2;
+    const current = normalizePath(activeHref);
+    let best = null;
+    for (const p of panels) {
+      for (const item of p.items) {
+        if (panelItemIsSection(item)) continue;
+        const hrefs = panelItemHasChildren(item) ? item.children.map((c) => c.href) : [item.href];
+        for (const href of hrefs) {
+          const len = pathMatchLength(current, href);
+          if (len > ((_a2 = best == null ? void 0 : best.len) != null ? _a2 : -1)) best = { value: entryValue(p), len };
+        }
+      }
+    }
+    return (_b2 = best == null ? void 0 : best.value) != null ? _b2 : null;
+  }, [panels, activeHref]);
   const shownValue = pinned ? selectedRail != null ? selectedRail : activeRailValue : flyoutValue;
   const shownPanel = (_a = panels.find((p) => entryValue(p) === shownValue)) != null ? _a : null;
   const topEntries = items.filter((e) => e.slot !== "bottom");
@@ -814,7 +737,7 @@ function SidebarV2FromConfig({
         "div",
         {
           "aria-hidden": true,
-          className: "mx-3 my-1.5 h-px shrink-0 bg-sidebar-border/70"
+          className: styles.railDivider()
         },
         `rail-divider-${index}`
       );
@@ -866,14 +789,14 @@ function SidebarV2FromConfig({
     );
   }
   const railContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles.railScroll(), children: [
       header && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         header,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-3 my-1 h-px shrink-0 bg-sidebar-border/60" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles.railHeaderDivider() })
       ] }),
       topEntries.map(renderRailEntry)
     ] }),
-    bottomEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex shrink-0 flex-col gap-1 pt-1", children: bottomEntries.map(renderRailEntry) })
+    bottomEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles.railBottom(), children: bottomEntries.map(renderRailEntry) })
   ] });
   const navData = pinned && shownPanel && (navPreviewActive || !panelOverrideActive) ? shownPanel : null;
   const [bufferedPanel, setBufferedPanel] = (0, import_react5.useState)(navData);
@@ -905,7 +828,7 @@ function SidebarV2FromConfig({
         open: drawerOpen,
         onOpenChange: setDrawerOpen,
         placement: "left",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_drawer.Drawer.Content, { className: "w-auto max-w-[85vw] border-0 bg-sidebar p-0 [&>button]:hidden", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_drawer.Drawer.Content, { className: styles.mobileDrawer(), children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_drawer.Drawer.Header, { className: "sr-only", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_drawer.Drawer.Title, { children: "Navigation" }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_drawer.Drawer.Description, { children: "Hauptnavigation" })
@@ -933,10 +856,7 @@ function SidebarV2FromConfig({
       {
         ref: setPanelHost,
         "data-slot": "sidebar-v2-panel-zone",
-        className: (0, import_shared_utils3.cn)(
-          "relative shrink-0 transition-[width] duration-200 ease-out motion-reduce:transition-none",
-          pinned && "overflow-hidden"
-        ),
+        className: (0, import_shared_utils2.cn)(styles.panelZone(), pinned && "overflow-hidden"),
         style: { gridArea: "panel", width: docked ? PANEL_WIDTH2 : "0px" },
         children: [
           panelContent,
@@ -944,7 +864,7 @@ function SidebarV2FromConfig({
             import_react4.motion.div,
             {
               "data-floating": "true",
-              className: "absolute inset-y-2 left-1 z-30",
+              className: styles.flyout(),
               initial: { x: -14, opacity: 0 },
               animate: { x: 0, opacity: 1 },
               exit: { x: -14, opacity: 0 },