@zendir/ui 0.4.1 → 0.6.0

package/dist/react/core/navigation/SideNav.js

@@ -1,620 +1,875 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { memo, useState, useEffect, useCallback, useContext, useLayoutEffect, createContext } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-import { safeAccentText } from "../../utils/index.js";
 import { Icon } from "../display/Icon.js";
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-const SIDENAV_STATUS_COLORS = {
-  off: "#a4abb6",
-  standby: "#2dccff",
-  normal: "#56f000",
-  caution: "#fce83a",
-  serious: "#ffb302",
-  critical: "#ff3838"
-};
+import { safeAccentText } from "../../utils/index.js";
+import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/navigation/SideNav.tsx
+/**
+* @zendir/ui - SideNav Component
+*
+* Persistent sidebar navigation for operator dashboards. Compound component
+* pattern with Header, Item, Section, Divider, and Footer subcomponents.
+*
+* Responsive: Full sidebar on desktop, hamburger overlay on mobile.
+*
+* Astro UX Compliance:
+* - Persistent side navigation pattern (AstroUXDS Navigation)
+* - Status indicator integration
+* - Active state highlighting with accent color
+* - Keyboard navigation support
+* - Reduced motion support
+*
+* @example
+* ```tsx
+* <SideNav>
+*   <SideNav.Header logo={<Icon name="satellite" size={24} />} title="Space Range" badge="Operator" />
+*   <SideNav.Section title="Operations">
+*     <SideNav.Item icon="controls" label="Controls" description="System command interface" href="/controls" active />
+*     <SideNav.Item icon="telemetry" label="Telemetry" href="/telemetry" badge={3} tag="LIVE" tagVariant="success" />
+*     <SideNav.Item icon="images" label="Images" href="/images" />
+*   </SideNav.Section>
+*   <SideNav.Divider />
+*   <SideNav.Section title="Analysis">
+*     <SideNav.Item icon="chart" label="Plots" href="/plots" />
+*     <SideNav.Item icon="map" label="Map" href="/map" />
+*   </SideNav.Section>
+*   <SideNav.Footer>
+*     <SideNav.Item icon="settings" label="Settings" href="/settings" />
+*   </SideNav.Footer>
+* </SideNav>
+* ```
+*/
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
+* Content that only renders when expanded (item labels, section titles, the
+* header meta block) fades and slides in rather than popping, so widening the
+* rail reads as material flowing in. Injected once as a stylesheet because
+* keyframes can't be expressed inline; honours `prefers-reduced-motion`.
+*/
+var SIDENAV_REVEAL_STYLE_ID = "zendir-sidenav-reveal";
+function ensureSideNavReveal() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById(SIDENAV_REVEAL_STYLE_ID)) return;
+	const el = document.createElement("style");
+	el.id = SIDENAV_REVEAL_STYLE_ID;
+	el.textContent = "@keyframes zsn-reveal{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}.zsn-reveal{animation:zsn-reveal 220ms cubic-bezier(0.22,1,0.36,1)}.zsn-label{transition:opacity 220ms cubic-bezier(0.22,1,0.36,1),transform 220ms cubic-bezier(0.22,1,0.36,1)}.zsn-label[data-collapsed=\"true\"]{opacity:0;transform:translateX(-6px);pointer-events:none}@media (prefers-reduced-motion: reduce){.zsn-reveal,.zsn-label{animation:none;transition:none}}";
+	document.head.appendChild(el);
+}
+/** Astro UX dual-coded status shape (color + geometry). */
 function NavStatusShape({ status, size = 8 }) {
-  const color = SIDENAV_STATUS_COLORS[status] ?? SIDENAV_STATUS_COLORS.off;
-  const glow = `${color}50`;
-  const style = { flexShrink: 0, filter: `drop-shadow(0 0 3px ${glow})` };
-  switch (status) {
-    case "caution":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: color }) });
-    case "serious":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: color }) });
-    case "critical":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: color }) });
-    case "standby":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" }) });
-    case "off":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: color }) });
-    default:
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) });
-  }
+	const { tokens } = useTheme();
+	const color = tokens.colors.status[status] ?? tokens.colors.status.off;
+	const style = {
+		flexShrink: 0,
+		filter: `drop-shadow(0 0 3px ${`${color}50`})`
+	};
+	switch (status) {
+		case "caution": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("rect", {
+				x: "1",
+				y: "1",
+				width: "10",
+				height: "10",
+				fill: color
+			})
+		});
+		case "serious": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("polygon", {
+				points: "6,1 11,6 6,11 1,6",
+				fill: color
+			})
+		});
+		case "critical": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("polygon", {
+				points: "6,11 1,2 11,2",
+				fill: color
+			})
+		});
+		case "standby": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3.5",
+				fill: "none",
+				stroke: color,
+				strokeWidth: "2"
+			})
+		});
+		case "off": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3",
+				fill: color
+			})
+		});
+		default: return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "5",
+				fill: color
+			})
+		});
+	}
 }
-const SIDENAV_BREAKPOINTS = {
-  mobile: 768,
-  tablet: 1024
+var SIDENAV_BREAKPOINTS = {
+	mobile: 768,
+	tablet: 1024
 };
 function getSideNavMode(width) {
-  if (width < SIDENAV_BREAKPOINTS.mobile) return "mobile";
-  if (width < SIDENAV_BREAKPOINTS.tablet) return "tablet";
-  return "desktop";
+	if (width < SIDENAV_BREAKPOINTS.mobile) return "mobile";
+	if (width < SIDENAV_BREAKPOINTS.tablet) return "tablet";
+	return "desktop";
 }
-const SideNavContext = createContext({
-  collapsed: false,
-  mobileOpen: false,
-  mode: "desktop",
-  showCollapseToggle: true,
-  setMobileOpen: () => {
-  },
-  toggleCollapse: () => {
-  }
+var SideNavContext = createContext({
+	collapsed: false,
+	mobileOpen: false,
+	mode: "desktop",
+	density: "default",
+	showCollapseToggle: true,
+	setMobileOpen: () => {},
+	toggleCollapse: () => {}
 });
-const SideNavRoot = memo(function SideNav2({
-  collapsed,
-  onCollapsedChange,
-  showCollapseToggle = true,
-  width = 260,
-  collapsedWidth = 64,
-  mobileVariant = "drawer",
-  children,
-  style
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const [userCollapsed, setUserCollapsed] = useState(null);
-  const [viewMode, setViewMode] = useState("desktop");
-  useIsomorphicLayoutEffect(() => {
-    if (typeof window === "undefined") return;
-    setViewMode(getSideNavMode(window.innerWidth));
-    let rafId;
-    const handleResize = () => {
-      cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(() => setViewMode(getSideNavMode(window.innerWidth)));
-    };
-    window.addEventListener("resize", handleResize, { passive: true });
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      cancelAnimationFrame(rafId);
-    };
-  }, []);
-  const effectiveMode = mobileVariant === "collapsed" && viewMode === "mobile" ? "tablet" : viewMode;
-  useEffect(() => {
-    setUserCollapsed(null);
-  }, [effectiveMode]);
-  useEffect(() => {
-    if (effectiveMode !== "mobile" && mobileOpen) setMobileOpen(false);
-  }, [effectiveMode, mobileOpen]);
-  useEffect(() => {
-    if (!mobileOpen) return;
-    const handleEsc = (e) => {
-      if (e.key === "Escape") setMobileOpen(false);
-    };
-    document.addEventListener("keydown", handleEsc);
-    return () => document.removeEventListener("keydown", handleEsc);
-  }, [mobileOpen]);
-  const autoCollapsed = effectiveMode === "tablet";
-  const isCollapsed = collapsed !== void 0 ? collapsed : userCollapsed !== null ? userCollapsed : autoCollapsed;
-  const isMobile = effectiveMode === "mobile";
-  const navWidth = isCollapsed ? collapsedWidth : width;
-  const handleToggleCollapse = useCallback(() => {
-    const next = !isCollapsed;
-    setUserCollapsed(next);
-    onCollapsedChange == null ? void 0 : onCollapsedChange(next);
-  }, [isCollapsed, onCollapsedChange]);
-  const navStyle = {
-    display: "flex",
-    flexDirection: "column",
-    width: isMobile ? 280 : navWidth,
-    height: "100%",
-    backgroundColor: isTransparentTheme ? "rgba(15, 12, 30, 0.7)" : tokens.colors.background.surface,
-    borderRight: `1px solid ${tokens.colors.border.muted}`,
-    transition: "width 0.25s ease, transform 0.25s ease",
-    overflowX: "hidden",
-    overflowY: "auto",
-    flexShrink: 0,
-    fontFamily: tokens.typography.fontFamily.primary,
-    ...isTransparentTheme ? {
-      backdropFilter: "blur(16px)",
-      WebkitBackdropFilter: "blur(16px)"
-    } : {},
-    ...style
-  };
-  const contextValue = { collapsed: isCollapsed, mobileOpen, mode: effectiveMode, showCollapseToggle, setMobileOpen, toggleCollapse: handleToggleCollapse };
-  if (isMobile) {
-    return /* @__PURE__ */ jsxs(SideNavContext.Provider, { value: contextValue, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          "aria-label": "Open navigation",
-          onClick: () => setMobileOpen(true),
-          style: {
-            position: "fixed",
-            top: 6,
-            left: 6,
-            zIndex: 1001,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 32,
-            height: 32,
-            border: "none",
-            borderRadius: tokens.borderRadius.sm,
-            backgroundColor: "transparent",
-            color: tokens.colors.text.primary,
-            cursor: "pointer",
-            padding: 0,
-            transition: tokens.animation.fast
-          },
-          children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
-            /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-            /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
-            /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": "true",
-          style: {
-            position: "fixed",
-            inset: 0,
-            zIndex: 1002,
-            backgroundColor: `${tokens.colors.background.base}99`,
-            backdropFilter: "blur(4px)",
-            opacity: mobileOpen ? 1 : 0,
-            pointerEvents: mobileOpen ? "auto" : "none",
-            transition: "opacity 0.25s ease"
-          },
-          onClick: () => setMobileOpen(false)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "nav",
-        {
-          role: "navigation",
-          "aria-label": "Main navigation",
-          style: {
-            ...navStyle,
-            position: "fixed",
-            top: 0,
-            left: 0,
-            zIndex: 1003,
-            transform: mobileOpen ? "translateX(0)" : "translateX(-100%)",
-            boxShadow: mobileOpen ? tokens.shadows.xl : "none"
-          },
-          children
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx(SideNavContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("nav", { role: "navigation", "aria-label": "Main navigation", style: navStyle, children }) });
+var SideNavRoot = memo(function SideNav({ collapsed, onCollapsedChange, showCollapseToggle = true, width = 260, collapsedWidth = 64, density = "default", mobileVariant = "drawer", children, style }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const [mobileOpen, setMobileOpen] = useState(false);
+	const [userCollapsed, setUserCollapsed] = useState(null);
+	const [viewMode, setViewMode] = useState("desktop");
+	useIsomorphicLayoutEffect(() => {
+		if (typeof window === "undefined") return;
+		setViewMode(getSideNavMode(window.innerWidth));
+		let rafId;
+		const handleResize = () => {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(() => setViewMode(getSideNavMode(window.innerWidth)));
+		};
+		window.addEventListener("resize", handleResize, { passive: true });
+		return () => {
+			window.removeEventListener("resize", handleResize);
+			cancelAnimationFrame(rafId);
+		};
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		ensureSideNavReveal();
+	}, []);
+	const effectiveMode = mobileVariant === "collapsed" && viewMode === "mobile" ? "tablet" : viewMode;
+	useEffect(() => {
+		setUserCollapsed(null);
+	}, [effectiveMode]);
+	useEffect(() => {
+		if (effectiveMode !== "mobile" && mobileOpen) setMobileOpen(false);
+	}, [effectiveMode, mobileOpen]);
+	useEffect(() => {
+		if (!mobileOpen) return;
+		const handleEsc = (e) => {
+			if (e.key === "Escape") setMobileOpen(false);
+		};
+		document.addEventListener("keydown", handleEsc);
+		return () => document.removeEventListener("keydown", handleEsc);
+	}, [mobileOpen]);
+	const isCollapsed = collapsed !== void 0 ? collapsed : userCollapsed !== null ? userCollapsed : effectiveMode === "tablet";
+	const isMobile = effectiveMode === "mobile";
+	const navWidth = isCollapsed ? collapsedWidth : width;
+	const handleToggleCollapse = useCallback(() => {
+		const next = !isCollapsed;
+		setUserCollapsed(next);
+		onCollapsedChange?.(next);
+	}, [isCollapsed, onCollapsedChange]);
+	const navStyle = {
+		display: "flex",
+		flexDirection: "column",
+		width: isMobile ? 280 : navWidth,
+		height: "100%",
+		backgroundColor: isTransparentTheme ? "rgba(15, 12, 30, 0.7)" : tokens.colors.background.surface,
+		borderRight: `1px solid ${tokens.colors.border.muted}`,
+		transition: "width 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s ease",
+		overflowX: "hidden",
+		overflowY: "auto",
+		flexShrink: 0,
+		fontFamily: tokens.typography.fontFamily.primary,
+		...isTransparentTheme ? {
+			backdropFilter: "blur(16px)",
+			WebkitBackdropFilter: "blur(16px)"
+		} : {},
+		...style
+	};
+	const contextValue = {
+		collapsed: isCollapsed,
+		mobileOpen,
+		mode: effectiveMode,
+		density,
+		showCollapseToggle,
+		setMobileOpen,
+		toggleCollapse: handleToggleCollapse
+	};
+	if (isMobile) return /* @__PURE__ */ jsxs(SideNavContext.Provider, {
+		value: contextValue,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": "Open navigation",
+				onClick: () => setMobileOpen(true),
+				style: {
+					position: "fixed",
+					top: 6,
+					left: 6,
+					zIndex: 1001,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: 32,
+					height: 32,
+					border: "none",
+					borderRadius: tokens.borderRadius.sm,
+					backgroundColor: "transparent",
+					color: tokens.colors.text.primary,
+					cursor: "pointer",
+					padding: 0,
+					transition: tokens.animation.fast
+				},
+				children: /* @__PURE__ */ jsxs("svg", {
+					width: "18",
+					height: "18",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					children: [
+						/* @__PURE__ */ jsx("line", {
+							x1: "3",
+							y1: "6",
+							x2: "21",
+							y2: "6"
+						}),
+						/* @__PURE__ */ jsx("line", {
+							x1: "3",
+							y1: "12",
+							x2: "21",
+							y2: "12"
+						}),
+						/* @__PURE__ */ jsx("line", {
+							x1: "3",
+							y1: "18",
+							x2: "21",
+							y2: "18"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				style: {
+					position: "fixed",
+					inset: 0,
+					zIndex: 1002,
+					backgroundColor: `${tokens.colors.background.base}99`,
+					backdropFilter: "blur(4px)",
+					opacity: mobileOpen ? 1 : 0,
+					pointerEvents: mobileOpen ? "auto" : "none",
+					transition: "opacity 0.25s ease"
+				},
+				onClick: () => setMobileOpen(false)
+			}),
+			/* @__PURE__ */ jsx("nav", {
+				role: "navigation",
+				"aria-label": "Main navigation",
+				style: {
+					...navStyle,
+					position: "fixed",
+					top: 0,
+					left: 0,
+					zIndex: 1003,
+					transform: mobileOpen ? "translateX(0)" : "translateX(-100%)",
+					boxShadow: mobileOpen ? tokens.shadows.xl : "none"
+				},
+				children
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(SideNavContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("nav", {
+			role: "navigation",
+			"aria-label": "Main navigation",
+			style: navStyle,
+			children
+		})
+	});
 });
-const SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX = 44;
+/** Default height for the logo row so dashboard / operator / other apps align the same mark. */
+var SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX = 44;
+/** Chevron toggle button for collapsing/expanding the sidebar. */
 function CollapseToggleButton() {
-  const { tokens } = useTheme();
-  const { collapsed, toggleCollapse } = useContext(SideNavContext);
-  const [hovered, setHovered] = useState(false);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-      onClick: toggleCollapse,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 28,
-        height: 28,
-        border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,
-        borderRadius: tokens.borderRadius.md,
-        backgroundColor: hovered ? `${tokens.colors.accent.primary}15` : "transparent",
-        color: hovered ? tokens.colors.accent.primary : tokens.colors.text.tertiary,
-        cursor: "pointer",
-        flexShrink: 0,
-        padding: 0,
-        transition: tokens.animation.fast,
-        outline: "none"
-      },
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          width: "14",
-          height: "14",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          style: {
-            transition: "transform 0.25s ease",
-            transform: collapsed ? "rotate(180deg)" : "rotate(0deg)"
-          },
-          children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
-        }
-      )
-    }
-  );
+	const { tokens } = useTheme();
+	const { collapsed, toggleCollapse } = useContext(SideNavContext);
+	const [hovered, setHovered] = useState(false);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+		onClick: toggleCollapse,
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 28,
+			height: 28,
+			border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,
+			borderRadius: tokens.borderRadius.md,
+			backgroundColor: hovered ? `${tokens.colors.accent.primary}15` : "transparent",
+			color: hovered ? tokens.colors.accent.primary : tokens.colors.text.tertiary,
+			cursor: "pointer",
+			flexShrink: 0,
+			padding: 0,
+			transition: tokens.animation.fast,
+			outline: "none"
+		},
+		children: /* @__PURE__ */ jsx("svg", {
+			width: "14",
+			height: "14",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			style: {
+				transition: "transform 0.25s ease",
+				transform: collapsed ? "rotate(180deg)" : "rotate(0deg)"
+			},
+			children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+		})
+	});
 }
-const SideNavHeader = memo(function SideNavHeader2({
-  logo,
-  collapsedLogo,
-  title,
-  subtitle,
-  badge,
-  badgeVariant = "info",
-  logoSlotHeight = SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX,
-  children
-}) {
-  const { tokens } = useTheme();
-  const { collapsed, mode, showCollapseToggle, toggleCollapse } = useContext(SideNavContext);
-  const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;
-  const showToggle = showCollapseToggle && mode !== "mobile";
-  const hasMeta = Boolean(title || subtitle || badge);
-  const slotH = logoSlotHeight;
-  const badgeColors = {
-    info: tokens.colors.accent.primary,
-    success: tokens.colors.status.normal,
-    warning: tokens.colors.status.caution,
-    caution: tokens.colors.status.serious
-  };
-  const metaBlock = !collapsed && hasMeta ? /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, width: "100%" }, children: [
-    title ? /* @__PURE__ */ jsx("div", { style: {
-      fontSize: tokens.typography.fontSize.sm,
-      fontWeight: tokens.typography.fontWeight.bold,
-      color: tokens.colors.text.primary,
-      lineHeight: tokens.typography.lineHeight.tight,
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis"
-    }, children: title }) : null,
-    subtitle || badge ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs, marginTop: title ? "2px" : 0, flexWrap: "wrap" }, children: [
-      subtitle ? /* @__PURE__ */ jsx("span", { style: {
-        fontSize: tokens.typography.fontSize.xxs,
-        color: tokens.colors.text.tertiary
-      }, children: subtitle }) : null,
-      badge ? /* @__PURE__ */ jsx("span", { style: {
-        fontSize: "0.6rem",
-        fontWeight: tokens.typography.fontWeight.bold,
-        color: badgeColors[badgeVariant] || safeAccentText(tokens.colors.accent.primary),
-        backgroundColor: `${badgeColors[badgeVariant] || tokens.colors.accent.primary}18`,
-        border: `1px solid ${badgeColors[badgeVariant] || tokens.colors.accent.primary}30`,
-        padding: "1px 6px",
-        borderRadius: tokens.borderRadius.sm,
-        textTransform: "uppercase",
-        letterSpacing: "0.05em"
-      }, children: badge }) : null
-    ] }) : null
-  ] }) : null;
-  const logoSlot = displayLogo ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        height: slotH,
-        minHeight: slotH,
-        maxHeight: slotH,
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: collapsed ? "center" : "flex-start",
-        overflow: "hidden",
-        boxSizing: "border-box",
-        marginBottom: !collapsed && hasMeta && displayLogo ? tokens.spacing.sm : 0
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            maxHeight: "100%",
-            maxWidth: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: collapsed ? "center" : "flex-start",
-            minWidth: 0,
-            cursor: collapsed && showToggle ? "pointer" : void 0
-          },
-          onClick: collapsed && showToggle ? toggleCollapse : void 0,
-          children: displayLogo
-        }
-      )
-    }
-  ) : null;
-  if (children) {
-    return /* @__PURE__ */ jsx("div", { style: {
-      padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,
-      borderBottom: `1px solid ${tokens.colors.border.muted}`,
-      flexShrink: 0,
-      boxSizing: "border-box",
-      position: "relative"
-    }, children });
-  }
-  if (collapsed) {
-    return /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      padding: `${tokens.spacing.md} ${tokens.spacing.sm}`,
-      minHeight: slotH + 24,
-      borderBottom: `1px solid ${tokens.colors.border.muted}`,
-      flexShrink: 0,
-      boxSizing: "border-box",
-      position: "relative",
-      justifyContent: "center"
-    }, children: [
-      logoSlot,
-      showToggle ? /* @__PURE__ */ jsx("div", { style: { position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsx(CollapseToggleButton, {}) }) : null
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { style: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,
-    borderBottom: `1px solid ${tokens.colors.border.muted}`,
-    flexShrink: 0,
-    boxSizing: "border-box",
-    position: "relative"
-  }, children: [
-    showToggle ? /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: tokens.spacing.sm, right: tokens.spacing.sm, zIndex: 1 }, children: /* @__PURE__ */ jsx(CollapseToggleButton, {}) }) : null,
-    /* @__PURE__ */ jsxs("div", { style: { paddingRight: showToggle ? 36 : 0, width: "100%", minWidth: 0 }, children: [
-      logoSlot,
-      metaBlock
-    ] })
-  ] });
+var SideNavHeader = memo(function SideNavHeader({ logo, collapsedLogo, title, subtitle, badge, badgeVariant = "info", logoSlotHeight = 44, children }) {
+	const { tokens } = useTheme();
+	const { collapsed, mode, showCollapseToggle, toggleCollapse } = useContext(SideNavContext);
+	const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;
+	const showToggle = showCollapseToggle && mode !== "mobile";
+	const hasMeta = Boolean(title || subtitle || badge);
+	const slotH = logoSlotHeight;
+	const badgeColors = {
+		info: tokens.colors.accent.primary,
+		success: tokens.colors.status.normal,
+		warning: tokens.colors.status.caution,
+		caution: tokens.colors.status.serious
+	};
+	const metaBlock = !collapsed && hasMeta ? /* @__PURE__ */ jsxs("div", {
+		className: "zsn-reveal",
+		style: {
+			flex: 1,
+			minWidth: 0,
+			width: "100%"
+		},
+		children: [title ? /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: tokens.typography.fontSize.sm,
+				fontWeight: tokens.typography.fontWeight.bold,
+				color: tokens.colors.text.primary,
+				lineHeight: tokens.typography.lineHeight.tight,
+				whiteSpace: "nowrap",
+				overflow: "hidden",
+				textOverflow: "ellipsis"
+			},
+			children: title
+		}) : null, subtitle || badge ? /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: tokens.spacing.xs,
+				marginTop: title ? "2px" : 0,
+				flexWrap: "wrap"
+			},
+			children: [subtitle ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.tertiary
+				},
+				children: subtitle
+			}) : null, badge ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: "0.6rem",
+					fontWeight: tokens.typography.fontWeight.bold,
+					color: badgeColors[badgeVariant] || safeAccentText(tokens.colors.accent.primary),
+					backgroundColor: `${badgeColors[badgeVariant] || tokens.colors.accent.primary}18`,
+					border: `1px solid ${badgeColors[badgeVariant] || tokens.colors.accent.primary}30`,
+					padding: "1px 6px",
+					borderRadius: tokens.borderRadius.sm,
+					textTransform: "uppercase",
+					letterSpacing: "0.05em"
+				},
+				children: badge
+			}) : null]
+		}) : null]
+	}) : null;
+	const logoSlot = displayLogo ? /* @__PURE__ */ jsx("div", {
+		style: {
+			height: slotH,
+			minHeight: slotH,
+			maxHeight: slotH,
+			width: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: collapsed ? "center" : "flex-start",
+			overflow: "hidden",
+			boxSizing: "border-box",
+			marginBottom: !collapsed && hasMeta && displayLogo ? tokens.spacing.sm : 0
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				maxHeight: "100%",
+				maxWidth: "100%",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: collapsed ? "center" : "flex-start",
+				minWidth: 0,
+				cursor: collapsed && showToggle ? "pointer" : void 0
+			},
+			onClick: collapsed && showToggle ? toggleCollapse : void 0,
+			children: displayLogo
+		})
+	}) : null;
+	if (children) return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,
+			borderBottom: `1px solid ${tokens.colors.border.muted}`,
+			flexShrink: 0,
+			boxSizing: "border-box",
+			position: "relative"
+		},
+		children
+	});
+	if (collapsed) return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			padding: `${tokens.spacing.md} ${tokens.spacing.sm}`,
+			minHeight: slotH + 24,
+			borderBottom: `1px solid ${tokens.colors.border.muted}`,
+			flexShrink: 0,
+			boxSizing: "border-box",
+			position: "relative",
+			justifyContent: "center"
+		},
+		children: [logoSlot, showToggle ? /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				right: 4,
+				top: "50%",
+				transform: "translateY(-50%)"
+			},
+			children: /* @__PURE__ */ jsx(CollapseToggleButton, {})
+		}) : null]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "stretch",
+			padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,
+			borderBottom: `1px solid ${tokens.colors.border.muted}`,
+			flexShrink: 0,
+			boxSizing: "border-box",
+			position: "relative"
+		},
+		children: [showToggle ? /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				top: tokens.spacing.sm,
+				right: tokens.spacing.sm,
+				zIndex: 1
+			},
+			children: /* @__PURE__ */ jsx(CollapseToggleButton, {})
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			style: {
+				paddingRight: showToggle ? 36 : 0,
+				width: "100%",
+				minWidth: 0
+			},
+			children: [logoSlot, metaBlock]
+		})]
+	});
 });
-const TAG_COLORS = {
-  default: { bg: "#ffffff10", fg: "#9590a8", border: "#ffffff15" },
-  info: { bg: "#8a2be218", fg: "#c4a0ff", border: "#8a2be230" },
-  success: { bg: "#56f00018", fg: "#56f000", border: "#56f00030" },
-  warning: { bg: "#fce83a18", fg: "#fce83a", border: "#fce83a30" },
-  danger: { bg: "#ff383818", fg: "#ff3838", border: "#ff383830" }
+var TAG_COLORS = {
+	default: {
+		bg: "#ffffff10",
+		fg: "#9590a8",
+		border: "#ffffff15"
+	},
+	info: {
+		bg: "#8a2be218",
+		fg: "#c4a0ff",
+		border: "#8a2be230"
+	},
+	success: {
+		bg: "#56f00018",
+		fg: "#56f000",
+		border: "#56f00030"
+	},
+	warning: {
+		bg: "#fce83a18",
+		fg: "#fce83a",
+		border: "#fce83a30"
+	},
+	danger: {
+		bg: "#ff383818",
+		fg: "#ff3838",
+		border: "#ff383830"
+	}
 };
-const SideNavItem = memo(function SideNavItem2({
-  icon,
-  label,
-  description,
-  tag,
-  tagVariant = "default",
-  href,
-  onClick,
-  active = false,
-  disabled = false,
-  badge,
-  external = false,
-  status,
-  statusLabel,
-  suffix
-}) {
-  const { tokens } = useTheme();
-  const { collapsed, setMobileOpen } = useContext(SideNavContext);
-  const [isHovered, setIsHovered] = useState(false);
-  const handleClick = useCallback((e) => {
-    if (disabled) return;
-    if (onClick && href && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
-      e.preventDefault();
-    }
-    setMobileOpen(false);
-    onClick == null ? void 0 : onClick();
-  }, [disabled, onClick, href, setMobileOpen]);
-  const statusColor = status ? SIDENAV_STATUS_COLORS[status] ?? void 0 : void 0;
-  const accentColor = statusColor && active ? statusColor : safeAccentText(tokens.colors.accent.primary);
-  const hasDescription = !!description && !collapsed;
-  const iconElement = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size: hasDescription ? 22 : 20, color: active ? accentColor : tokens.colors.text.secondary }) : icon;
-  const itemStyle = {
-    display: "flex",
-    alignItems: hasDescription ? "flex-start" : "center",
-    gap: tokens.spacing.sm,
-    padding: collapsed ? `${tokens.spacing.sm} 0` : hasDescription ? `10px 16px 10px 12px` : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,
-    justifyContent: collapsed ? "center" : "flex-start",
-    color: active ? accentColor : disabled ? tokens.colors.text.tertiary : tokens.colors.text.secondary,
-    backgroundColor: active ? `${accentColor}12` : isHovered && !disabled ? `${accentColor}08` : "transparent",
-    fontSize: tokens.typography.fontSize.sm,
-    fontWeight: active ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,
-    fontFamily: tokens.typography.fontFamily.primary,
-    cursor: disabled ? "not-allowed" : "pointer",
-    textDecoration: "none",
-    borderTop: "none",
-    borderRight: "none",
-    borderBottom: "none",
-    borderLeft: active ? `3px solid ${accentColor}` : "3px solid transparent",
-    outline: "none",
-    width: "100%",
-    boxSizing: "border-box",
-    transition: tokens.animation.fast,
-    position: "relative",
-    opacity: disabled ? 0.5 : 1
-  };
-  const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    iconElement && /* @__PURE__ */ jsxs("span", { style: { flexShrink: 0, display: "flex", position: "relative", marginTop: hasDescription ? "2px" : 0 }, children: [
-      iconElement,
-      collapsed && status && /* @__PURE__ */ jsx(
-        "span",
-        {
-          style: {
-            position: "absolute",
-            top: -3,
-            left: -4,
-            lineHeight: 0
-          },
-          title: statusLabel ?? status,
-          children: /* @__PURE__ */ jsx(NavStatusShape, { status, size: 7 })
-        }
-      )
-    ] }),
-    !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("span", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
-        /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          /* @__PURE__ */ jsx("span", { style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: label }),
-          tag && /* @__PURE__ */ jsx("span", { style: {
-            fontSize: "0.6rem",
-            fontWeight: tokens.typography.fontWeight.bold,
-            color: tagColors.fg,
-            backgroundColor: tagColors.bg,
-            border: `1px solid ${tagColors.border}`,
-            padding: "1px 5px",
-            borderRadius: tokens.borderRadius.sm,
-            textTransform: "uppercase",
-            letterSpacing: "0.04em",
-            flexShrink: 0,
-            lineHeight: "1.3",
-            whiteSpace: "nowrap"
-          }, children: tag })
-        ] }),
-        description && /* @__PURE__ */ jsx("span", { style: {
-          display: "block",
-          fontSize: tokens.typography.fontSize.xxs,
-          color: tokens.colors.text.tertiary,
-          lineHeight: tokens.typography.lineHeight.normal,
-          marginTop: "2px",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          fontWeight: tokens.typography.fontWeight.normal
-        }, children: description })
-      ] }),
-      (badge !== void 0 && badge > 0 || status || suffix || external) && /* @__PURE__ */ jsxs("span", { style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 8,
-        flexShrink: 0,
-        marginTop: hasDescription ? "2px" : 0
-      }, children: [
-        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx("span", { style: {
-          fontSize: "0.65rem",
-          fontWeight: tokens.typography.fontWeight.bold,
-          color: "#fff",
-          backgroundColor: tokens.colors.status.critical,
-          borderRadius: tokens.borderRadius.full,
-          minWidth: "18px",
-          height: "18px",
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "0 5px",
-          flexShrink: 0,
-          lineHeight: 1,
-          boxSizing: "border-box"
-        }, children: badge > 99 ? "99+" : badge }),
-        status && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: { display: "inline-flex", alignItems: "center", flexShrink: 0 },
-            role: "status",
-            "aria-label": `Status: ${statusLabel ?? status}`,
-            title: statusLabel ?? status,
-            children: /* @__PURE__ */ jsx(NavStatusShape, { status, size: 8 })
-          }
-        ),
-        suffix && /* @__PURE__ */ jsx("span", { style: { flexShrink: 0, display: "inline-flex", alignItems: "center" }, children: suffix }),
-        external && /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", style: { flexShrink: 0, opacity: 0.5 }, children: [
-          /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
-          /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
-          /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
-        ] })
-      ] })
-    ] })
-  ] });
-  const props = {
-    style: itemStyle,
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false),
-    title: collapsed ? label : void 0,
-    "aria-current": active ? "page" : void 0,
-    "aria-disabled": disabled
-  };
-  if (href && !disabled) {
-    return /* @__PURE__ */ jsx("a", { href, onClick: handleClick, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, ...props, children: content });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, disabled, ...props, children: content });
+var SideNavItem = memo(function SideNavItem({ icon, label, description, tag, tagVariant = "default", href, onClick, active = false, disabled = false, badge, external = false, status, statusLabel, suffix }) {
+	const { tokens } = useTheme();
+	const { collapsed, setMobileOpen, density } = useContext(SideNavContext);
+	const compact = density === "compact" && !collapsed;
+	const [isHovered, setIsHovered] = useState(false);
+	const handleClick = useCallback((e) => {
+		if (disabled) return;
+		if (onClick && href && !e.metaKey && !e.ctrlKey && !e.shiftKey) e.preventDefault();
+		setMobileOpen(false);
+		onClick?.();
+	}, [
+		disabled,
+		onClick,
+		href,
+		setMobileOpen
+	]);
+	const statusColor = status ? tokens.colors.status[status] ?? void 0 : void 0;
+	const accentColor = statusColor && active ? statusColor : safeAccentText(tokens.colors.accent.primary);
+	const hasDescription = !!description && !collapsed;
+	const iconElement = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+		name: icon,
+		size: hasDescription ? 22 : 20,
+		color: active ? accentColor : tokens.colors.text.secondary
+	}) : icon;
+	const itemStyle = {
+		display: "flex",
+		alignItems: hasDescription ? "flex-start" : "center",
+		gap: tokens.spacing.sm,
+		padding: collapsed ? `${tokens.spacing.sm} 12px` : compact ? "7px 8px" : hasDescription ? `10px 16px 10px 12px` : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,
+		borderRadius: compact ? tokens.borderRadius.md : 0,
+		justifyContent: "flex-start",
+		color: active ? accentColor : disabled ? tokens.colors.text.tertiary : tokens.colors.text.secondary,
+		backgroundColor: active ? `${accentColor}12` : isHovered && !disabled ? `${accentColor}08` : "transparent",
+		fontSize: compact ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,
+		fontWeight: active ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,
+		fontFamily: tokens.typography.fontFamily.primary,
+		cursor: disabled ? "not-allowed" : "pointer",
+		textDecoration: "none",
+		borderTop: "none",
+		borderRight: "none",
+		borderBottom: "none",
+		borderLeft: compact ? "none" : active ? `3px solid ${accentColor}` : "3px solid transparent",
+		outline: "none",
+		width: "100%",
+		boxSizing: "border-box",
+		transition: tokens.animation.fast,
+		position: "relative",
+		opacity: disabled ? .5 : 1
+	};
+	const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		iconElement && /* @__PURE__ */ jsxs("span", {
+			style: {
+				flexShrink: 0,
+				display: "flex",
+				position: "relative",
+				marginTop: hasDescription ? "2px" : 0
+			},
+			children: [iconElement, collapsed && status && /* @__PURE__ */ jsx("span", {
+				style: {
+					position: "absolute",
+					top: -3,
+					left: -4,
+					lineHeight: 0
+				},
+				title: statusLabel ?? status,
+				children: /* @__PURE__ */ jsx(NavStatusShape, {
+					status,
+					size: 7
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "zsn-label",
+			"data-collapsed": collapsed ? "true" : "false",
+			style: {
+				flex: 1,
+				minWidth: 0,
+				overflow: "hidden"
+			},
+			children: [/* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					style: {
+						whiteSpace: "nowrap",
+						overflow: "hidden",
+						textOverflow: "ellipsis"
+					},
+					children: label
+				}), tag && /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: "0.6rem",
+						fontWeight: tokens.typography.fontWeight.bold,
+						color: tagColors.fg,
+						backgroundColor: tagColors.bg,
+						border: `1px solid ${tagColors.border}`,
+						padding: "1px 5px",
+						borderRadius: tokens.borderRadius.sm,
+						textTransform: "uppercase",
+						letterSpacing: "0.04em",
+						flexShrink: 0,
+						lineHeight: "1.3",
+						whiteSpace: "nowrap"
+					},
+					children: tag
+				})]
+			}), description && !collapsed && /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "block",
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.tertiary,
+					lineHeight: tokens.typography.lineHeight.normal,
+					marginTop: "2px",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					fontWeight: tokens.typography.fontWeight.normal
+				},
+				children: description
+			})]
+		}),
+		!collapsed && (badge !== void 0 && badge > 0 || status || suffix || external) && /* @__PURE__ */ jsxs("span", {
+			className: "zsn-reveal",
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 8,
+				flexShrink: 0,
+				marginTop: hasDescription ? "2px" : 0
+			},
+			children: [
+				badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: "0.65rem",
+						fontWeight: tokens.typography.fontWeight.bold,
+						color: "#fff",
+						backgroundColor: tokens.colors.status.critical,
+						borderRadius: tokens.borderRadius.full,
+						minWidth: "18px",
+						height: "18px",
+						display: "inline-flex",
+						alignItems: "center",
+						justifyContent: "center",
+						padding: "0 5px",
+						flexShrink: 0,
+						lineHeight: 1,
+						boxSizing: "border-box"
+					},
+					children: badge > 99 ? "99+" : badge
+				}),
+				status && /* @__PURE__ */ jsx("span", {
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						flexShrink: 0
+					},
+					role: "status",
+					"aria-label": `Status: ${statusLabel ?? status}`,
+					title: statusLabel ?? status,
+					children: /* @__PURE__ */ jsx(NavStatusShape, {
+						status,
+						size: 8
+					})
+				}),
+				suffix && /* @__PURE__ */ jsx("span", {
+					style: {
+						flexShrink: 0,
+						display: "inline-flex",
+						alignItems: "center"
+					},
+					children: suffix
+				}),
+				external && /* @__PURE__ */ jsxs("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					style: {
+						flexShrink: 0,
+						opacity: .5
+					},
+					children: [
+						/* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+						/* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+						/* @__PURE__ */ jsx("line", {
+							x1: "10",
+							y1: "14",
+							x2: "21",
+							y2: "3"
+						})
+					]
+				})
+			]
+		})
+	] });
+	const props = {
+		style: itemStyle,
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		title: collapsed ? label : void 0,
+		"aria-current": active ? "page" : void 0,
+		"aria-disabled": disabled
+	};
+	if (href && !disabled) return /* @__PURE__ */ jsx("a", {
+		href,
+		onClick: handleClick,
+		target: external ? "_blank" : void 0,
+		rel: external ? "noopener noreferrer" : void 0,
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: handleClick,
+		disabled,
+		...props,
+		children: content
+	});
 });
-const SideNavSection = memo(function SideNavSection2({
-  title,
-  children
-}) {
-  const { tokens } = useTheme();
-  const { collapsed } = useContext(SideNavContext);
-  return /* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacing.sm }, children: [
-    title && !collapsed && /* @__PURE__ */ jsx("div", { style: {
-      padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,
-      fontSize: tokens.typography.fontSize.xxs,
-      fontWeight: tokens.typography.fontWeight.bold,
-      color: tokens.colors.text.tertiary,
-      textTransform: "uppercase",
-      letterSpacing: "0.08em"
-    }, children: title }),
-    collapsed && title && /* @__PURE__ */ jsx("div", { style: {
-      width: "60%",
-      height: "1px",
-      backgroundColor: tokens.colors.border.muted,
-      margin: `${tokens.spacing.xs} auto`
-    } }),
-    children
-  ] });
+var SideNavSection = memo(function SideNavSection({ title, children }) {
+	const { tokens } = useTheme();
+	const { collapsed } = useContext(SideNavContext);
+	return /* @__PURE__ */ jsxs("div", {
+		style: { marginTop: tokens.spacing.sm },
+		children: [
+			title && !collapsed && /* @__PURE__ */ jsx("div", {
+				className: "zsn-reveal",
+				style: {
+					padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,
+					fontSize: tokens.typography.fontSize.xxs,
+					fontWeight: tokens.typography.fontWeight.bold,
+					color: tokens.colors.text.tertiary,
+					textTransform: "uppercase",
+					letterSpacing: "0.08em"
+				},
+				children: title
+			}),
+			collapsed && title && /* @__PURE__ */ jsx("div", { style: {
+				width: "60%",
+				height: "1px",
+				backgroundColor: tokens.colors.border.muted,
+				margin: `${tokens.spacing.xs} auto`
+			} }),
+			children
+		]
+	});
 });
-const SideNavDivider = memo(function SideNavDivider2({
-  label
-}) {
-  const { tokens } = useTheme();
-  const { collapsed } = useContext(SideNavContext);
-  if (collapsed) {
-    return /* @__PURE__ */ jsx("div", { style: {
-      width: "60%",
-      height: "1px",
-      backgroundColor: tokens.colors.border.muted,
-      margin: `${tokens.spacing.sm} auto`
-    } });
-  }
-  if (label) {
-    return /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: tokens.spacing.sm,
-      padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`
-    }, children: [
-      /* @__PURE__ */ jsx("div", { style: { flex: 1, height: "1px", backgroundColor: tokens.colors.border.muted } }),
-      /* @__PURE__ */ jsx("span", { style: {
-        fontSize: tokens.typography.fontSize.xxs,
-        color: tokens.colors.text.tertiary,
-        textTransform: "uppercase",
-        letterSpacing: "0.06em",
-        whiteSpace: "nowrap"
-      }, children: label }),
-      /* @__PURE__ */ jsx("div", { style: { flex: 1, height: "1px", backgroundColor: tokens.colors.border.muted } })
-    ] });
-  }
-  return /* @__PURE__ */ jsx("div", { style: {
-    height: "1px",
-    backgroundColor: tokens.colors.border.muted,
-    margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`
-  } });
+var SideNavDivider = memo(function SideNavDivider({ label }) {
+	const { tokens } = useTheme();
+	const { collapsed } = useContext(SideNavContext);
+	if (collapsed) return /* @__PURE__ */ jsx("div", { style: {
+		width: "60%",
+		height: "1px",
+		backgroundColor: tokens.colors.border.muted,
+		margin: `${tokens.spacing.sm} auto`
+	} });
+	if (label) return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing.sm,
+			padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", { style: {
+				flex: 1,
+				height: "1px",
+				backgroundColor: tokens.colors.border.muted
+			} }),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.tertiary,
+					textTransform: "uppercase",
+					letterSpacing: "0.06em",
+					whiteSpace: "nowrap"
+				},
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", { style: {
+				flex: 1,
+				height: "1px",
+				backgroundColor: tokens.colors.border.muted
+			} })
+		]
+	});
+	return /* @__PURE__ */ jsx("div", { style: {
+		height: "1px",
+		backgroundColor: tokens.colors.border.muted,
+		margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`
+	} });
 });
-const SideNavFooter = memo(function SideNavFooter2({
-  children
-}) {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsx("div", { style: {
-    marginTop: "auto",
-    borderTop: `1px solid ${tokens.colors.border.muted}`,
-    paddingTop: tokens.spacing.xs,
-    paddingBottom: tokens.spacing.xs
-  }, children });
+var SideNavFooter = memo(function SideNavFooter({ children }) {
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			marginTop: "auto",
+			borderTop: `1px solid ${tokens.colors.border.muted}`,
+			paddingTop: tokens.spacing.xs,
+			paddingBottom: tokens.spacing.xs
+		},
+		children
+	});
 });
-const SideNav = Object.assign(SideNavRoot, {
-  Header: SideNavHeader,
-  Item: SideNavItem,
-  Section: SideNavSection,
-  Divider: SideNavDivider,
-  Footer: SideNavFooter
+var SideNav = Object.assign(SideNavRoot, {
+	Header: SideNavHeader,
+	Item: SideNavItem,
+	Section: SideNavSection,
+	Divider: SideNavDivider,
+	Footer: SideNavFooter
 });
-export {
-  SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX,
-  SideNav
-};
-//# sourceMappingURL=SideNav.js.map
+//#endregion
+export { SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, SideNav, SideNav as default };
+
+//# sourceMappingURL=SideNav.js.map