@kopexa/sidebar 17.2.1 → 17.3.0

package/dist/v2/components.js

@@ -49,14 +49,19 @@ 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");
-var import_jsx_runtime = require("react/jsx-runtime");
-var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-var [Provider, useSidebarV2] = (0, import_react_utils.createContext)({
-  name: "SidebarV2Context",
-  errorMessage: "useSidebarV2 must be used within <SidebarV2> (the provider component)."
-});
 
 // 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);
 }
@@ -64,6 +69,14 @@ function panelItemIsSection(item) {
   return "section" in item;
 }
 
+// src/v2/context.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var [Provider, useSidebarV2] = (0, import_react_utils.createContext)({
+  name: "SidebarV2Context",
+  errorMessage: "useSidebarV2 must be used within <SidebarV2> (the provider component)."
+});
+
 // src/v2/components.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function SidebarV2Inset({
@@ -269,31 +282,34 @@ function SidebarV2PanelLeaf({
     children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
       Icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: styles.panelLeafIcon() }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.panelLeafLabel(), children: item.label }),
+      item.tag && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.panelLeafTag(), children: item.tag }),
       item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.panelLeafBadge(), children: item.badge })
     ] })
   }) });
 }
 function SidebarV2PanelGroup({
-  item
+  item,
+  winningHref
 }) {
   var _a;
   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_runtime2.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -316,7 +332,7 @@ function SidebarV2PanelGroup({
       }
     ),
     open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.panelTree(), children: item.children.map((child) => {
-      const active = child.href === bestChildHref;
+      const active = normalizePath(child.href) === winner;
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: renderLink({
         href: child.href,
         "data-active": active,
@@ -330,15 +346,47 @@ function SidebarV2PanelGroup({
 function SidebarV2PanelItems({
   items
 }) {
+  const { activeHref } = useSidebarV2();
+  const winningHref = (0, import_react2.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_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: items.map((item, idx) => {
     var _a;
     if (panelItemIsSection(item)) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SidebarV2PanelLabel, { children: item.section }, `section-${item.section}-${idx}`);
     }
     if (panelItemHasChildren(item)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SidebarV2PanelGroup, { item }, (_a = item.value) != null ? _a : item.label);
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        SidebarV2PanelGroup,
+        {
+          item,
+          winningHref
+        },
+        (_a = item.value) != null ? _a : item.label
+      );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SidebarV2PanelLeaf, { item }, item.href);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      SidebarV2PanelLeaf,
+      {
+        item,
+        active: winningHref != null && normalizePath(item.href) === winningHref
+      },
+      item.href
+    );
   }) });
 }
 function SidebarV2Trigger({

package/dist/v2/components.mjs

@@ -13,9 +13,9 @@ import {
   SidebarV2RailSpacer,
   SidebarV2Trigger,
   SidebarV2Workspace
-} from "../chunk-YW3JMPRU.mjs";
-import "../chunk-SDMGFB6V.mjs";
-import "../chunk-AIRHHM7Z.mjs";
+} from "../chunk-5VE25P3M.mjs";
+import "../chunk-XBTONQ3L.mjs";
+import "../chunk-BFZFZSUC.mjs";
 export {
   SidebarV2Inset,
   SidebarV2Panel,

package/dist/v2/context.js

@@ -31,6 +31,21 @@ 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;
+}
+
+// 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;
@@ -97,7 +112,7 @@ 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)(

package/dist/v2/context.mjs

@@ -3,7 +3,8 @@
 import {
   SidebarV2Provider,
   useSidebarV2
-} from "../chunk-AIRHHM7Z.mjs";
+} from "../chunk-XBTONQ3L.mjs";
+import "../chunk-BFZFZSUC.mjs";
 export {
   SidebarV2Provider,
   useSidebarV2

package/dist/v2/from-config.js

@@ -44,14 +44,19 @@ 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");
-var import_jsx_runtime = require("react/jsx-runtime");
-var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-var [Provider, useSidebarV2] = (0, import_react_utils.createContext)({
-  name: "SidebarV2Context",
-  errorMessage: "useSidebarV2 must be used within <SidebarV2> (the provider component)."
-});
 
 // 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);
 }
@@ -59,6 +64,14 @@ function panelItemIsSection(item) {
   return "section" in item;
 }
 
+// src/v2/context.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var [Provider, useSidebarV2] = (0, import_react_utils.createContext)({
+  name: "SidebarV2Context",
+  errorMessage: "useSidebarV2 must be used within <SidebarV2> (the provider component)."
+});
+
 // src/v2/components.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function SidebarV2Rail({ className, ...props }) {
@@ -247,31 +260,34 @@ function SidebarV2PanelLeaf({
     children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
       Icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: styles.panelLeafIcon() }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.panelLeafLabel(), children: item.label }),
+      item.tag && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.panelLeafTag(), children: item.tag }),
       item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.panelLeafBadge(), children: item.badge })
     ] })
   }) });
 }
 function SidebarV2PanelGroup({
-  item
+  item,
+  winningHref
 }) {
   var _a;
   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_runtime2.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -294,7 +310,7 @@ function SidebarV2PanelGroup({
       }
     ),
     open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.panelTree(), children: item.children.map((child) => {
-      const active = child.href === bestChildHref;
+      const active = normalizePath(child.href) === winner;
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: renderLink({
         href: child.href,
         "data-active": active,
@@ -308,15 +324,47 @@ function SidebarV2PanelGroup({
 function SidebarV2PanelItems({
   items
 }) {
+  const { activeHref } = useSidebarV2();
+  const winningHref = (0, import_react2.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_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: items.map((item, idx) => {
     var _a;
     if (panelItemIsSection(item)) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SidebarV2PanelLabel, { children: item.section }, `section-${item.section}-${idx}`);
     }
     if (panelItemHasChildren(item)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SidebarV2PanelGroup, { item }, (_a = item.value) != null ? _a : item.label);
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        SidebarV2PanelGroup,
+        {
+          item,
+          winningHref
+        },
+        (_a = item.value) != null ? _a : item.label
+      );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SidebarV2PanelLeaf, { item }, item.href);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      SidebarV2PanelLeaf,
+      {
+        item,
+        active: winningHref != null && normalizePath(item.href) === winningHref
+      },
+      item.href
+    );
   }) });
 }
 
@@ -347,7 +395,7 @@ function SidebarV2FromConfig({
     closeFlyout,
     selectedRail,
     setSelectedRail,
-    isActive,
+    activeHref,
     isMobile,
     drawerOpen,
     setDrawerOpen,
@@ -393,14 +441,21 @@ function SidebarV2FromConfig({
     [items]
   );
   const activeRailValue = (0, import_react4.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");

package/dist/v2/from-config.mjs

@@ -2,10 +2,10 @@
 "use client";
 import {
   SidebarV2FromConfig
-} from "../chunk-KLYPP6QE.mjs";
-import "../chunk-YW3JMPRU.mjs";
-import "../chunk-SDMGFB6V.mjs";
-import "../chunk-AIRHHM7Z.mjs";
+} from "../chunk-G2J7EJQ6.mjs";
+import "../chunk-5VE25P3M.mjs";
+import "../chunk-XBTONQ3L.mjs";
+import "../chunk-BFZFZSUC.mjs";
 export {
   SidebarV2FromConfig
 };

package/dist/v2/index.js

@@ -57,6 +57,27 @@ 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;
@@ -123,7 +144,7 @@ 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)(
@@ -284,16 +305,6 @@ 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,
@@ -498,31 +509,34 @@ function SidebarV2PanelLeaf({
     children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       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, 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)(
@@ -545,7 +559,7 @@ function SidebarV2PanelGroup({
       }
     ),
     open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.panelTree(), children: item.children.map((child) => {
-      const active = child.href === bestChildHref;
+      const active = normalizePath(child.href) === winner;
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: renderLink({
         href: child.href,
         "data-active": active,
@@ -559,15 +573,47 @@ function SidebarV2PanelGroup({
 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({
@@ -620,7 +666,7 @@ function SidebarV2FromConfig({
     closeFlyout,
     selectedRail,
     setSelectedRail,
-    isActive,
+    activeHref,
     isMobile,
     drawerOpen,
     setDrawerOpen,
@@ -666,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");

package/dist/v2/index.mjs

@@ -2,7 +2,7 @@
 "use client";
 import {
   SidebarV2
-} from "../chunk-LCCZNS2E.mjs";
+} from "../chunk-6H2EH7LL.mjs";
 import {
   AppShell,
   AppShellAside,
@@ -10,10 +10,10 @@ import {
   AppShellMain,
   AppShellPanelContent,
   AppShellRoot
-} from "../chunk-YVQVW5EP.mjs";
+} from "../chunk-WIP5GNGJ.mjs";
 import {
   SidebarV2FromConfig
-} from "../chunk-KLYPP6QE.mjs";
+} from "../chunk-G2J7EJQ6.mjs";
 import {
   SidebarV2Inset,
   SidebarV2Panel,
@@ -27,12 +27,12 @@ import {
   SidebarV2RailSpacer,
   SidebarV2Trigger,
   SidebarV2Workspace
-} from "../chunk-YW3JMPRU.mjs";
-import "../chunk-SDMGFB6V.mjs";
+} from "../chunk-5VE25P3M.mjs";
 import {
   SidebarV2Provider,
   useSidebarV2
-} from "../chunk-AIRHHM7Z.mjs";
+} from "../chunk-XBTONQ3L.mjs";
+import "../chunk-BFZFZSUC.mjs";
 export {
   AppShell,
   AppShellAside,