@kopexa/sidebar 17.2.1 → 17.3.0

package/dist/{chunk-YW3JMPRU.mjs → chunk-5VE25P3M.mjs}

@@ -1,11 +1,13 @@
 "use client";
-import {
-  panelItemHasChildren,
-  panelItemIsSection
-} from "./chunk-SDMGFB6V.mjs";
 import {
   useSidebarV2
-} from "./chunk-AIRHHM7Z.mjs";
+} from "./chunk-XBTONQ3L.mjs";
+import {
+  normalizePath,
+  panelItemHasChildren,
+  panelItemIsSection,
+  pathMatchLength
+} from "./chunk-BFZFZSUC.mjs";
 
 // src/v2/components.tsx
 import { IconButton } from "@kopexa/button";
@@ -17,7 +19,10 @@ import {
 import { cn } from "@kopexa/shared-utils";
 import { sidebarMenuButton } from "@kopexa/theme";
 import { Tooltip } from "@kopexa/tooltip";
-import { forwardRef } from "react";
+import {
+  forwardRef,
+  useMemo
+} from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function SidebarV2Inset({
   className,
@@ -222,31 +227,34 @@ function SidebarV2PanelLeaf({
     children: /* @__PURE__ */ jsxs(Fragment, { children: [
       Icon && /* @__PURE__ */ jsx(Icon, { className: styles.panelLeafIcon() }),
       /* @__PURE__ */ jsx("span", { className: styles.panelLeafLabel(), children: item.label }),
+      item.tag && /* @__PURE__ */ jsx("span", { className: styles.panelLeafTag(), children: item.tag }),
       item.badge != null && /* @__PURE__ */ 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__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
@@ -269,7 +277,7 @@ function SidebarV2PanelGroup({
       }
     ),
     open && /* @__PURE__ */ jsx("div", { className: styles.panelTree(), children: item.children.map((child) => {
-      const active = child.href === bestChildHref;
+      const active = normalizePath(child.href) === winner;
       return /* @__PURE__ */ jsx("span", { children: renderLink({
         href: child.href,
         "data-active": active,
@@ -283,15 +291,47 @@ function SidebarV2PanelGroup({
 function SidebarV2PanelItems({
   items
 }) {
+  const { activeHref } = useSidebarV2();
+  const winningHref = 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__ */ jsx(Fragment, { children: items.map((item, idx) => {
     var _a;
     if (panelItemIsSection(item)) {
       return /* @__PURE__ */ jsx(SidebarV2PanelLabel, { children: item.section }, `section-${item.section}-${idx}`);
     }
     if (panelItemHasChildren(item)) {
-      return /* @__PURE__ */ jsx(SidebarV2PanelGroup, { item }, (_a = item.value) != null ? _a : item.label);
+      return /* @__PURE__ */ jsx(
+        SidebarV2PanelGroup,
+        {
+          item,
+          winningHref
+        },
+        (_a = item.value) != null ? _a : item.label
+      );
     }
-    return /* @__PURE__ */ jsx(SidebarV2PanelLeaf, { item }, item.href);
+    return /* @__PURE__ */ jsx(
+      SidebarV2PanelLeaf,
+      {
+        item,
+        active: winningHref != null && normalizePath(item.href) === winningHref
+      },
+      item.href
+    );
   }) });
 }
 function SidebarV2Trigger({

package/dist/{chunk-LCCZNS2E.mjs → chunk-6H2EH7LL.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   SidebarV2FromConfig
-} from "./chunk-KLYPP6QE.mjs";
+} from "./chunk-G2J7EJQ6.mjs";
 import {
   SidebarV2Inset,
   SidebarV2Panel,
@@ -15,10 +15,10 @@ import {
   SidebarV2RailSpacer,
   SidebarV2Trigger,
   SidebarV2Workspace
-} from "./chunk-YW3JMPRU.mjs";
+} from "./chunk-5VE25P3M.mjs";
 import {
   SidebarV2Provider
-} from "./chunk-AIRHHM7Z.mjs";
+} from "./chunk-XBTONQ3L.mjs";
 
 // src/v2/index.tsx
 var SidebarV2 = SidebarV2Provider;

package/dist/chunk-BFZFZSUC.mjs

@@ -0,0 +1,27 @@
+"use client";
+
+// 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;
+}
+
+export {
+  normalizePath,
+  pathMatchLength,
+  panelItemHasChildren,
+  panelItemIsSection
+};

package/dist/{chunk-KLYPP6QE.mjs → chunk-G2J7EJQ6.mjs}

@@ -5,14 +5,16 @@ import {
   SidebarV2Rail,
   SidebarV2RailItem,
   SidebarV2RailLink
-} from "./chunk-YW3JMPRU.mjs";
-import {
-  panelItemHasChildren,
-  panelItemIsSection
-} from "./chunk-SDMGFB6V.mjs";
+} from "./chunk-5VE25P3M.mjs";
 import {
   useSidebarV2
-} from "./chunk-AIRHHM7Z.mjs";
+} from "./chunk-XBTONQ3L.mjs";
+import {
+  normalizePath,
+  panelItemHasChildren,
+  panelItemIsSection,
+  pathMatchLength
+} from "./chunk-BFZFZSUC.mjs";
 
 // src/v2/from-config.tsx
 import { Drawer } from "@kopexa/drawer";
@@ -51,7 +53,7 @@ function SidebarV2FromConfig({
     closeFlyout,
     selectedRail,
     setSelectedRail,
-    isActive,
+    activeHref,
     isMobile,
     drawerOpen,
     setDrawerOpen,
@@ -97,14 +99,21 @@ function SidebarV2FromConfig({
     [items]
   );
   const activeRailValue = 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/{chunk-YVQVW5EP.mjs → chunk-WIP5GNGJ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useSidebarV2
-} from "./chunk-AIRHHM7Z.mjs";
+} from "./chunk-XBTONQ3L.mjs";
 
 // src/v2/app-shell.tsx
 import {

package/dist/{chunk-AIRHHM7Z.mjs → chunk-XBTONQ3L.mjs}

@@ -1,4 +1,8 @@
 "use client";
+import {
+  normalizePath,
+  pathMatchLength
+} from "./chunk-BFZFZSUC.mjs";
 
 // src/v2/context.tsx
 import { createContext } from "@kopexa/react-utils";
@@ -77,7 +81,7 @@ function SidebarV2Provider({
     setOpenGroup((curr) => curr === key ? null : key);
   }, []);
   const isActive = useCallback(
-    (href) => activeHref === href || href !== "/" && activeHref.startsWith(`${href}/`),
+    (href) => pathMatchLength(normalizePath(activeHref), href) >= 0,
     [activeHref]
   );
   const value = useMemo(

package/dist/index.js

@@ -540,6 +540,27 @@ var import_theme2 = require("@kopexa/theme");
 var import_tooltip2 = require("@kopexa/tooltip");
 var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
 var import_react2 = 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_runtime2 = require("react/jsx-runtime");
 var PIN_COOKIE = "kpx_sidebar_v2_pinned";
 var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -606,7 +627,7 @@ function SidebarV2Provider({
     setOpenGroup((curr) => curr === key ? null : key);
   }, []);
   const isActive = (0, import_react2.useCallback)(
-    (href) => activeHref === href || href !== "/" && activeHref.startsWith(`${href}/`),
+    (href) => pathMatchLength(normalizePath(activeHref), href) >= 0,
     [activeHref]
   );
   const value = (0, import_react2.useMemo)(
@@ -767,16 +788,6 @@ var import_shared_utils = require("@kopexa/shared-utils");
 var import_theme3 = require("@kopexa/theme");
 var import_tooltip3 = require("@kopexa/tooltip");
 var import_react4 = 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_runtime4 = require("react/jsx-runtime");
 function SidebarV2Inset({
   className,
@@ -981,31 +992,34 @@ function SidebarV2PanelLeaf({
     children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
       Icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: styles.panelLeafIcon() }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.panelLeafLabel(), children: item.label }),
+      item.tag && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.panelLeafTag(), children: item.tag }),
       item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -1028,7 +1042,7 @@ function SidebarV2PanelGroup({
       }
     ),
     open && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("span", { children: renderLink({
         href: child.href,
         "data-active": active,
@@ -1042,15 +1056,47 @@ function SidebarV2PanelGroup({
 function SidebarV2PanelItems({
   items
 }) {
+  const { activeHref } = useSidebarV2();
+  const winningHref = (0, import_react4.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_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: items.map((item, idx) => {
     var _a;
     if (panelItemIsSection(item)) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SidebarV2PanelLabel, { children: item.section }, `section-${item.section}-${idx}`);
     }
     if (panelItemHasChildren(item)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SidebarV2PanelGroup, { item }, (_a = item.value) != null ? _a : item.label);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        SidebarV2PanelGroup,
+        {
+          item,
+          winningHref
+        },
+        (_a = item.value) != null ? _a : item.label
+      );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SidebarV2PanelLeaf, { item }, item.href);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      SidebarV2PanelLeaf,
+      {
+        item,
+        active: winningHref != null && normalizePath(item.href) === winningHref
+      },
+      item.href
+    );
   }) });
 }
 function SidebarV2Trigger({
@@ -1103,7 +1149,7 @@ function SidebarV2FromConfig({
     closeFlyout,
     selectedRail,
     setSelectedRail,
-    isActive,
+    activeHref,
     isMobile,
     drawerOpen,
     setDrawerOpen,
@@ -1149,14 +1195,21 @@ function SidebarV2FromConfig({
     [items]
   );
   const activeRailValue = (0, import_react6.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/index.mjs

@@ -23,7 +23,7 @@ import {
 } from "./chunk-FPVGSRAX.mjs";
 import {
   SidebarV2
-} from "./chunk-LCCZNS2E.mjs";
+} from "./chunk-6H2EH7LL.mjs";
 import {
   AppShell,
   AppShellAside,
@@ -31,10 +31,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,
@@ -48,12 +48,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,

package/dist/v2/app-shell.mjs

@@ -7,8 +7,9 @@ import {
   AppShellMain,
   AppShellPanelContent,
   AppShellRoot
-} from "../chunk-YVQVW5EP.mjs";
-import "../chunk-AIRHHM7Z.mjs";
+} from "../chunk-WIP5GNGJ.mjs";
+import "../chunk-XBTONQ3L.mjs";
+import "../chunk-BFZFZSUC.mjs";
 export {
   AppShell,
   AppShellAside,

package/dist/v2/components.d.mts

@@ -65,10 +65,16 @@ declare function SidebarV2PanelLeaf({ item, active: activeProp, }: {
     /** Override the derived active state (e.g. for custom page routing rules). */
     active?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function SidebarV2PanelGroup({ item, }: {
+declare function SidebarV2PanelGroup({ item, winningHref, }: {
     item: Extract<SidebarV2PanelItem, {
         children: unknown;
     }>;
+    /**
+     * Panel-level winning href (most-specific match across all sibling items).
+     * Provided by <SidebarV2PanelItems> so a sibling leaf can out-rank our children.
+     * Omit for standalone use — then the best child among our own is computed.
+     */
+    winningHref?: string | null;
 }): react_jsx_runtime.JSX.Element;
 declare function SidebarV2PanelItems({ items, }: {
     items: SidebarV2PanelItem[];

package/dist/v2/components.d.ts

@@ -65,10 +65,16 @@ declare function SidebarV2PanelLeaf({ item, active: activeProp, }: {
     /** Override the derived active state (e.g. for custom page routing rules). */
     active?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function SidebarV2PanelGroup({ item, }: {
+declare function SidebarV2PanelGroup({ item, winningHref, }: {
     item: Extract<SidebarV2PanelItem, {
         children: unknown;
     }>;
+    /**
+     * Panel-level winning href (most-specific match across all sibling items).
+     * Provided by <SidebarV2PanelItems> so a sibling leaf can out-rank our children.
+     * Omit for standalone use — then the best child among our own is computed.
+     */
+    winningHref?: string | null;
 }): react_jsx_runtime.JSX.Element;
 declare function SidebarV2PanelItems({ items, }: {
     items: SidebarV2PanelItem[];