@kopexa/sidebar 17.1.74 → 17.2.0

package/dist/index.js

@@ -21,6 +21,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AppShell: () => AppShell,
+  AppShellAside: () => AppShellAside,
+  AppShellHeader: () => AppShellHeader,
+  AppShellMain: () => AppShellMain,
+  AppShellPanelContent: () => AppShellPanelContent,
+  AppShellRoot: () => AppShellRoot,
   Sidebar: () => Sidebar,
   SidebarContent: () => SidebarContent,
   SidebarFooter: () => SidebarFooter,
@@ -40,7 +46,23 @@ __export(index_exports, {
   SidebarRoot: () => SidebarRoot,
   SidebarSeparator: () => SidebarSeparator,
   SidebarTrigger: () => SidebarTrigger,
-  useSidebar: () => useSidebar
+  SidebarV2: () => SidebarV2,
+  SidebarV2FromConfig: () => SidebarV2FromConfig,
+  SidebarV2Inset: () => SidebarV2Inset,
+  SidebarV2Panel: () => SidebarV2Panel,
+  SidebarV2PanelGroup: () => SidebarV2PanelGroup,
+  SidebarV2PanelItems: () => SidebarV2PanelItems,
+  SidebarV2PanelLabel: () => SidebarV2PanelLabel,
+  SidebarV2PanelLeaf: () => SidebarV2PanelLeaf,
+  SidebarV2Provider: () => SidebarV2Provider,
+  SidebarV2Rail: () => SidebarV2Rail,
+  SidebarV2RailItem: () => SidebarV2RailItem,
+  SidebarV2RailLink: () => SidebarV2RailLink,
+  SidebarV2RailSpacer: () => SidebarV2RailSpacer,
+  SidebarV2Trigger: () => SidebarV2Trigger,
+  SidebarV2Workspace: () => SidebarV2Workspace,
+  useSidebar: () => useSidebar,
+  useSidebarV2: () => useSidebarV2
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -507,8 +529,952 @@ var Sidebar = Object.assign(SidebarRoot, {
   MenuButton: SidebarMenuButton,
   MenuAction: SidebarMenuAction
 });
+
+// src/v2/app-shell.tsx
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/v2/context.tsx
+var import_react_utils2 = require("@kopexa/react-utils");
+var import_tooltip2 = require("@kopexa/tooltip");
+var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PIN_COOKIE = "kpx_sidebar_v2_pinned";
+var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var [Provider2, useSidebarV2] = (0, import_react_utils2.createContext)({
+  name: "SidebarV2Context",
+  errorMessage: "useSidebarV2 must be used within <SidebarV2> (the provider component)."
+});
+var defaultRenderLink = (props) => {
+  const { href, className, children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href, className, ...rest, children });
+};
+function SidebarV2Provider({
+  children,
+  tone = "dark",
+  flyoutTrigger = "click",
+  activeHref,
+  renderLink = defaultRenderLink,
+  pinned: pinnedProp,
+  onPinnedChange,
+  defaultPinned = true
+}) {
+  const isMobile = (0, import_use_is_mobile2.useIsMobile)();
+  const [drawerOpen, setDrawerOpen] = (0, import_react2.useState)(false);
+  const [flyoutValue, setFlyoutValue] = (0, import_react2.useState)(null);
+  const [selectedRail, setSelectedRail] = (0, import_react2.useState)(null);
+  const [openGroup, setOpenGroup] = (0, import_react2.useState)(null);
+  const [pinnedUncontrolled, setPinnedUncontrolled] = (0, import_react2.useState)(defaultPinned);
+  const pinned = pinnedProp != null ? pinnedProp : pinnedUncontrolled;
+  const [panelHost, setPanelHost] = (0, import_react2.useState)(null);
+  const [overrideCount, setOverrideCount] = (0, import_react2.useState)(0);
+  const registerPanelOverride = (0, import_react2.useCallback)(() => {
+    setOverrideCount((c) => c + 1);
+    return () => setOverrideCount((c) => c - 1);
+  }, []);
+  const panelOverrideActive = overrideCount > 0;
+  const navPreviewActive = pinned ? selectedRail !== null : flyoutValue !== null;
+  const setPinned = (0, import_react2.useCallback)(
+    (value2) => {
+      onPinnedChange == null ? void 0 : onPinnedChange(value2);
+      if (pinnedProp === void 0) {
+        setPinnedUncontrolled(value2);
+      }
+      document.cookie = `${PIN_COOKIE}=${value2}; path=/; max-age=${PIN_COOKIE_MAX_AGE}`;
+    },
+    [onPinnedChange, pinnedProp]
+  );
+  const togglePin = (0, import_react2.useCallback)(() => {
+    setPinned(!pinned);
+    setFlyoutValue(null);
+  }, [pinned, setPinned]);
+  const openFlyout = (0, import_react2.useCallback)((value2) => {
+    setFlyoutValue((curr) => curr === value2 ? null : value2);
+  }, []);
+  const setFlyout = (0, import_react2.useCallback)((value2) => {
+    setFlyoutValue(value2);
+  }, []);
+  const closeFlyout = (0, import_react2.useCallback)(() => setFlyoutValue(null), []);
+  const resetPanelSelection = (0, import_react2.useCallback)(() => {
+    setSelectedRail(null);
+    setFlyoutValue(null);
+  }, []);
+  const toggleGroup = (0, import_react2.useCallback)((key) => {
+    setOpenGroup((curr) => curr === key ? null : key);
+  }, []);
+  const isActive = (0, import_react2.useCallback)(
+    (href) => activeHref === href || href !== "/" && activeHref.startsWith(`${href}/`),
+    [activeHref]
+  );
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      tone,
+      pinned,
+      togglePin,
+      setPinned,
+      selectedRail,
+      setSelectedRail,
+      flyoutTrigger,
+      flyoutValue,
+      openFlyout,
+      setFlyout,
+      closeFlyout,
+      resetPanelSelection,
+      openGroup,
+      toggleGroup,
+      setOpenGroup,
+      activeHref,
+      isActive,
+      renderLink,
+      isMobile,
+      drawerOpen,
+      setDrawerOpen,
+      panelHost,
+      setPanelHost,
+      panelOverrideActive,
+      registerPanelOverride,
+      navPreviewActive
+    }),
+    [
+      tone,
+      pinned,
+      togglePin,
+      setPinned,
+      selectedRail,
+      flyoutTrigger,
+      flyoutValue,
+      openFlyout,
+      setFlyout,
+      closeFlyout,
+      resetPanelSelection,
+      openGroup,
+      toggleGroup,
+      activeHref,
+      isActive,
+      renderLink,
+      isMobile,
+      drawerOpen,
+      panelHost,
+      panelOverrideActive,
+      registerPanelOverride,
+      navPreviewActive
+    ]
+  );
+  (0, import_react2.useEffect)(() => {
+    setDrawerOpen(false);
+    setFlyoutValue(null);
+    setSelectedRail(null);
+    setOpenGroup(null);
+  }, [activeHref]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Provider2, { value, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip2.TooltipProvider, { delayDuration: 0, children }) });
+}
+
+// src/v2/app-shell.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RAIL_WIDTH = "4rem";
+var PANEL_WIDTH = "15rem";
+function AppShellRoot({
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const { tone } = useSidebarV2();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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
+      ),
+      style: {
+        "--kpx-rail-width": RAIL_WIDTH,
+        "--kpx-panel-width": PANEL_WIDTH,
+        gridTemplateAreas: '"header header header header" "rail panel main aside"',
+        gridTemplateRows: "auto 1fr",
+        gridTemplateColumns: "auto auto 1fr auto",
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function AppShellHeader({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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),
+      style: { gridArea: "header", ...style },
+      ...props
+    }
+  );
+}
+function AppShellMain({ className, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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
+      ),
+      style: { gridArea: "main", ...style },
+      ...props
+    }
+  );
+}
+function AppShellAside({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "aside",
+    {
+      "data-slot": "app-shell-aside",
+      className: (0, import_shared_utils.cn)("min-h-0 min-w-0 overflow-hidden", className),
+      style: { gridArea: "aside", ...style },
+      ...props
+    }
+  );
+}
+function AppShellPanelContent({ children }) {
+  const { panelHost, registerPanelOverride, navPreviewActive } = useSidebarV2();
+  (0, import_react3.useEffect)(() => registerPanelOverride(), [registerPanelOverride]);
+  if (!panelHost || navPreviewActive) return null;
+  return (0, import_react_dom.createPortal)(children, panelHost);
+}
+var AppShell = AppShellRoot;
+AppShell.Header = AppShellHeader;
+AppShell.Main = AppShellMain;
+AppShell.Aside = AppShellAside;
+AppShell.PanelContent = AppShellPanelContent;
+
+// src/v2/components.tsx
+var import_button2 = require("@kopexa/button");
+var import_icons2 = require("@kopexa/icons");
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_theme2 = 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,
+  ...props
+}) {
+  const { tone } = useSidebarV2();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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
+      ),
+      ...props
+    }
+  );
+}
+function SidebarV2Rail({ className, ...props }) {
+  const { tone } = useSidebarV2();
+  const light = tone === "light";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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
+      ),
+      ...props
+    }
+  );
+}
+function SidebarV2RailSpacer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "aria-hidden": true, className: "flex-1" });
+}
+var SidebarV2Workspace = (0, import_react4.forwardRef)(({ name, role, logo, className, appearance = "rail", ...props }, ref) => {
+  if (appearance === "bar") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        ref,
+        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
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("span", { className: "flex min-w-0 flex-col text-left leading-tight", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-sm font-semibold text-foreground", children: name }),
+            role && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: role })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.ChevronDownIcon, { className: "size-4 shrink-0 text-muted-foreground" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      ref,
+      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
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.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: [
+        logo != null ? logo : name.charAt(0).toUpperCase(),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.ChevronDownIcon, { className: "absolute -right-1 -bottom-1 size-3.5 rounded-full bg-sidebar p-px text-sidebar-foreground/60" })
+      ] })
+    }
+  );
+});
+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
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(Icon, { className: "size-5 shrink-0" }),
+    badge != null && /* @__PURE__ */ (0, import_jsx_runtime4.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 })
+  ] });
+}
+function SidebarV2RailLink({
+  icon,
+  label,
+  href,
+  badge
+}) {
+  const { renderLink, isActive, resetPanelSelection } = useSidebarV2();
+  const active = isActive(href);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tooltip3.Tooltip, { content: label, side: "right", children: renderLink({
+    href,
+    className: railButtonClasses(active),
+    "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_runtime4.jsx)(RailInner, { icon, label, active, badge })
+  }) });
+}
+function SidebarV2RailItem({
+  icon,
+  label,
+  active,
+  hasPanel,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  badge
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tooltip3.Tooltip, { content: label, side: "right", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-active": active,
+      "aria-label": label,
+      "aria-expanded": hasPanel ? active : void 0,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      className: railButtonClasses(active),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RailInner, { icon, label, active, badge })
+    }
+  ) });
+}
+function SidebarV2Panel({
+  title,
+  subtitle,
+  floating,
+  hidePin,
+  action,
+  children,
+  className
+}) {
+  const { togglePin, pinned, tone } = useSidebarV2();
+  const light = tone === "light";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start gap-2 px-3 pt-3 pb-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(
+              "div",
+              {
+                className: (0, import_shared_utils2.cn)(
+                  "truncate text-xs",
+                  light ? "text-muted-foreground" : "text-sidebar-foreground/70"
+                ),
+                children: subtitle
+              }
+            )
+          ] }),
+          action != null ? action : !hidePin && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_tooltip3.Tooltip,
+            {
+              content: pinned ? "Panel l\xF6sen" : "Panel anheften",
+              side: "bottom",
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_button2.IconButton,
+                {
+                  variant: "ghost",
+                  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"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.PanelLeftIcon, { className: "size-4" })
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-auto p-2", 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();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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
+      ),
+      ...props
+    }
+  );
+}
+function SidebarV2PanelLeaf({
+  item,
+  active: activeProp
+}) {
+  const { renderLink, isActive, tone } = useSidebarV2();
+  const light = tone === "light";
+  const Icon = item.icon;
+  const active = activeProp != null ? activeProp : isActive(item.href);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: renderLink({
+    href: item.href,
+    "data-active": active,
+    "aria-current": active ? "page" : void 0,
+    className: light ? panelRowLight(active) : (0, import_theme2.sidebarMenuButton)({ size: "md" }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      Icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Icon,
+        {
+          className: (0, import_shared_utils2.cn)(
+            light ? active ? void 0 : "text-muted-foreground" : "text-sidebar-foreground/75"
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+      item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime4.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
+        }
+      )
+    ] })
+  }) });
+}
+function SidebarV2PanelGroup({
+  item
+}) {
+  var _a;
+  const { openGroup, toggleGroup, activeHref, renderLink, tone } = 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;
+    }
+  }
+  const containsActive = bestChildHref !== null;
+  const open = openGroup === key || openGroup === null && containsActive;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-state": open ? "open" : "closed",
+        "aria-expanded": open,
+        onClick: () => toggleGroup(key),
+        className: (0, import_shared_utils2.cn)(
+          light ? panelRowLight(false) : (0, import_theme2.sidebarMenuButton)({ size: "md" }),
+          "cursor-pointer",
+          containsActive && (light ? "font-medium text-foreground" : "font-medium")
+        ),
+        children: [
+          Icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Icon,
+            {
+              className: light ? "text-muted-foreground" : "text-sidebar-foreground/75"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_icons2.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"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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);
+        })
+      }
+    )
+  ] });
+}
+function SidebarV2PanelItems({
+  items
+}) {
+  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)(SidebarV2PanelLeaf, { item }, item.href);
+  }) });
+}
+function SidebarV2Trigger({
+  className,
+  ...props
+}) {
+  const { setDrawerOpen, drawerOpen } = useSidebarV2();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_button2.IconButton,
+    {
+      variant: "ghost",
+      size: "md",
+      "aria-label": "Navigation \xF6ffnen",
+      onClick: () => setDrawerOpen(!drawerOpen),
+      className,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.PanelLeftIcon, { className: "size-5" })
+    }
+  );
+}
+
+// src/v2/from-config.tsx
+var import_drawer2 = require("@kopexa/drawer");
+var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_react5 = require("motion/react");
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var RAIL_WIDTH2 = "4rem";
+var PANEL_WIDTH2 = "15rem";
+var railVars = {
+  "--kpx-rail-width": RAIL_WIDTH2,
+  "--kpx-panel-width": PANEL_WIDTH2
+};
+function entryValue(entry) {
+  var _a;
+  if (entry.type === "divider") return "divider";
+  return entry.type === "panel" ? (_a = entry.value) != null ? _a : entry.label : entry.label;
+}
+function SidebarV2FromConfig({
+  items,
+  header
+}) {
+  var _a, _b, _c;
+  const {
+    pinned,
+    flyoutTrigger,
+    flyoutValue,
+    openFlyout,
+    setFlyout,
+    closeFlyout,
+    selectedRail,
+    setSelectedRail,
+    isActive,
+    isMobile,
+    drawerOpen,
+    setDrawerOpen,
+    setPanelHost,
+    panelOverrideActive,
+    navPreviewActive
+  } = useSidebarV2();
+  const hoverMode = flyoutTrigger === "hover" && !pinned && !isMobile;
+  const closeTimer = (0, import_react6.useRef)(null);
+  const cancelClose = (0, import_react6.useCallback)(() => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  }, []);
+  const scheduleClose = (0, import_react6.useCallback)(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => closeFlyout(), 160);
+  }, [cancelClose, closeFlyout]);
+  (0, import_react6.useEffect)(() => cancelClose, [cancelClose]);
+  (0, import_react6.useEffect)(() => {
+    if (pinned || isMobile || !flyoutValue) return;
+    const onPointerDown = (event) => {
+      const t = event.target;
+      if (!t) return;
+      if (t.closest('[data-slot="sidebar-v2-rail"]')) return;
+      if (t.closest('[data-floating="true"]')) return;
+      closeFlyout();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") closeFlyout();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [pinned, isMobile, flyoutValue, closeFlyout]);
+  const panels = (0, import_react6.useMemo)(
+    () => items.filter(
+      (e) => e.type === "panel"
+    ),
+    [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]);
+  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");
+  const bottomEntries = items.filter((e) => e.slot === "bottom");
+  function renderRailEntry(entry, index) {
+    if (entry.type === "divider") {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "mx-3 my-1.5 h-px shrink-0 bg-sidebar-border/70"
+        },
+        `rail-divider-${index}`
+      );
+    }
+    const value = entryValue(entry);
+    if (entry.type === "link") {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        SidebarV2RailLink,
+        {
+          icon: entry.icon,
+          label: entry.label,
+          href: entry.href,
+          badge: entry.badge
+        },
+        value
+      );
+    }
+    if (entry.type === "action") {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        SidebarV2RailItem,
+        {
+          icon: entry.icon,
+          label: entry.label,
+          active: false,
+          onClick: entry.onSelect
+        },
+        value
+      );
+    }
+    const active = flyoutValue ? value === flyoutValue : value === (selectedRail != null ? selectedRail : activeRailValue);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SidebarV2RailItem,
+      {
+        icon: entry.icon,
+        label: entry.label,
+        active,
+        hasPanel: true,
+        onClick: () => {
+          if (pinned) setSelectedRail(value);
+          else openFlyout(value);
+        },
+        onMouseEnter: hoverMode ? () => {
+          cancelClose();
+          setFlyout(value);
+        } : void 0,
+        onMouseLeave: hoverMode ? scheduleClose : void 0
+      },
+      value
+    );
+  }
+  const railContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        header,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-3 my-1 h-px shrink-0 bg-sidebar-border/60" })
+      ] }),
+      topEntries.map(renderRailEntry)
+    ] }),
+    bottomEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex shrink-0 flex-col gap-1 pt-1", children: bottomEntries.map(renderRailEntry) })
+  ] });
+  const navData = pinned && shownPanel && (navPreviewActive || !panelOverrideActive) ? shownPanel : null;
+  const [bufferedPanel, setBufferedPanel] = (0, import_react6.useState)(navData);
+  (0, import_react6.useEffect)(() => {
+    if (navData) {
+      setBufferedPanel(navData);
+      return;
+    }
+    const t = setTimeout(() => setBufferedPanel(null), 220);
+    return () => clearTimeout(t);
+  }, [navData]);
+  const navToRender = navData != null ? navData : bufferedPanel;
+  const renderNav = (!panelOverrideActive || navPreviewActive) && navToRender;
+  const panelContent = navToRender && renderNav ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SidebarV2Panel,
+    {
+      title: (_b = navToRender.title) != null ? _b : navToRender.label,
+      subtitle: navToRender.subtitle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SidebarV2PanelItems, { items: navToRender.items })
+    },
+    entryValue(navToRender)
+  ) : null;
+  const docked = Boolean(navData) || panelOverrideActive;
+  const showFlyout = !pinned && Boolean(shownPanel);
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_drawer2.Drawer.Root,
+      {
+        open: drawerOpen,
+        onOpenChange: setDrawerOpen,
+        placement: "left",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_drawer2.Drawer.Content, { className: "w-auto max-w-[85vw] border-0 bg-sidebar p-0 [&>button]:hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_drawer2.Drawer.Header, { className: "sr-only", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_drawer2.Drawer.Title, { children: "Navigation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_drawer2.Drawer.Description, { children: "Hauptnavigation" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex h-full", style: railVars, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SidebarV2Rail, { children: railContent }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                ref: setPanelHost,
+                "data-slot": "sidebar-v2-panel-zone",
+                className: "flex min-h-0",
+                children: panelContent
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SidebarV2Rail, { style: { gridArea: "rail" }, children: railContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        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"
+        ),
+        style: { gridArea: "panel", width: docked ? PANEL_WIDTH2 : "0px" },
+        children: [
+          panelContent,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.AnimatePresence, { children: showFlyout && shownPanel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_react5.motion.div,
+            {
+              "data-floating": "true",
+              className: "absolute inset-y-2 left-1 z-30",
+              initial: { x: -14, opacity: 0 },
+              animate: { x: 0, opacity: 1 },
+              exit: { x: -14, opacity: 0 },
+              transition: { duration: 0.16, ease: "easeOut" },
+              onMouseEnter: hoverMode ? cancelClose : void 0,
+              onMouseLeave: hoverMode ? scheduleClose : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                SidebarV2Panel,
+                {
+                  floating: true,
+                  title: (_c = shownPanel.title) != null ? _c : shownPanel.label,
+                  subtitle: shownPanel.subtitle,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SidebarV2PanelItems, { items: shownPanel.items })
+                }
+              )
+            },
+            "sidebar-v2-flyout"
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/v2/index.tsx
+var SidebarV2 = SidebarV2Provider;
+SidebarV2.FromConfig = SidebarV2FromConfig;
+SidebarV2.Inset = SidebarV2Inset;
+SidebarV2.Trigger = SidebarV2Trigger;
+SidebarV2.Rail = SidebarV2Rail;
+SidebarV2.RailItem = SidebarV2RailItem;
+SidebarV2.RailLink = SidebarV2RailLink;
+SidebarV2.RailSpacer = SidebarV2RailSpacer;
+SidebarV2.Workspace = SidebarV2Workspace;
+SidebarV2.Panel = SidebarV2Panel;
+SidebarV2.PanelItems = SidebarV2PanelItems;
+SidebarV2.PanelLeaf = SidebarV2PanelLeaf;
+SidebarV2.PanelGroup = SidebarV2PanelGroup;
+SidebarV2.PanelLabel = SidebarV2PanelLabel;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AppShell,
+  AppShellAside,
+  AppShellHeader,
+  AppShellMain,
+  AppShellPanelContent,
+  AppShellRoot,
   Sidebar,
   SidebarContent,
   SidebarFooter,
@@ -528,5 +1494,21 @@ var Sidebar = Object.assign(SidebarRoot, {
   SidebarRoot,
   SidebarSeparator,
   SidebarTrigger,
-  useSidebar
+  SidebarV2,
+  SidebarV2FromConfig,
+  SidebarV2Inset,
+  SidebarV2Panel,
+  SidebarV2PanelGroup,
+  SidebarV2PanelItems,
+  SidebarV2PanelLabel,
+  SidebarV2PanelLeaf,
+  SidebarV2Provider,
+  SidebarV2Rail,
+  SidebarV2RailItem,
+  SidebarV2RailLink,
+  SidebarV2RailSpacer,
+  SidebarV2Trigger,
+  SidebarV2Workspace,
+  useSidebar,
+  useSidebarV2
 });