@lobehub/ui 5.50.2 → 5.50.3

package/es/base-ui/Segmented/style.mjs

@@ -24,6 +24,10 @@ const styles = createStaticStyles(({ css, cssVar }) => {
     transition-duration: 240ms;
     transition-property: inset-inline-start, inset-block-start, width, height;
 
+    [data-variant='outlined'] > & {
+      background: ${cssVar.colorFillSecondary};
+    }
+
     [data-orientation='horizontal'] &:dir(rtl) {
       inset-inline-start: var(--active-item-right);
     }

package/es/base-ui/Segmented/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const indicator = css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset-block-start: var(--active-item-top);\n    inset-inline-start: var(--active-item-left);\n\n    width: var(--active-item-width);\n    height: var(--active-item-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: none;\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height;\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-item-right);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `;\n\n  return {\n    indicator,\n    item: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n      z-index: 1;\n\n      display: inline-flex;\n      flex-shrink: 0;\n      gap: 6px;\n      align-items: center;\n      justify-content: center;\n\n      box-sizing: border-box;\n      border: 0;\n      border-radius: ${cssVar.borderRadius};\n\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      white-space: nowrap;\n\n      background: transparent;\n      outline: none;\n\n      transition:\n        color 120ms ${cssVar.motionEaseOut},\n        transform 120ms ${cssVar.motionEaseOut};\n\n      &:hover:not([data-disabled], [data-pressed]) {\n        color: ${cssVar.colorText};\n      }\n\n      &:active:not([data-disabled]) {\n        transform: scale(0.98);\n      }\n\n      ${focusRing};\n\n      &[data-pressed] {\n        color: ${cssVar.colorText};\n      }\n\n      &[data-disabled] {\n        cursor: not-allowed;\n        color: ${cssVar.colorTextDisabled};\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition-duration: 0s;\n      }\n    `,\n    itemBlock: css`\n      flex: 1 1 0;\n    `,\n    itemIcon: css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    `,\n    itemLabel: css`\n      display: inline-flex;\n      align-items: center;\n    `,\n    itemLarge: css`\n      height: 36px;\n      padding-inline: 16px;\n      border-radius: ${cssVar.borderRadius};\n      font-size: 14px;\n    `,\n    itemMiddle: css`\n      height: 32px;\n      padding-inline: 12px;\n      border-radius: ${cssVar.borderRadius};\n      font-size: 13px;\n    `,\n    itemSmall: css`\n      height: 26px;\n      padding-inline: 10px;\n      border-radius: ${cssVar.borderRadius};\n      font-size: 12px;\n    `,\n    list: css`\n      position: relative;\n\n      display: inline-flex;\n      flex-wrap: nowrap;\n      gap: 4px;\n      align-items: center;\n      align-self: flex-start;\n\n      box-sizing: border-box;\n      padding: 3px;\n      border-radius: ${cssVar.borderRadiusLG};\n\n      &[data-orientation='vertical'] {\n        flex-direction: column;\n        align-items: stretch;\n        align-self: stretch;\n      }\n    `,\n    listBlock: css`\n      display: flex;\n      align-self: stretch;\n      width: 100%;\n    `,\n    listFilled: css`\n      border: 1px solid ${cssVar.colorFillQuaternary};\n      background: ${cssVar.colorBgLayout};\n    `,\n    listGlass: lobeStaticStylish.blur,\n    listOutlined: css`\n      border: 1px solid ${cssVar.colorBorderSecondary};\n      background: transparent;\n    `,\n    listShadow: lobeStaticStylish.shadow,\n    root: css`\n      display: inline-flex;\n\n      &[data-block='true'] {\n        display: flex;\n        width: 100%;\n      }\n    `,\n  };\n});\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    block: false,\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.listBlock,\n    },\n    glass: {\n      false: null,\n      true: styles.listGlass,\n    },\n    shadow: {\n      false: null,\n      true: styles.listShadow,\n    },\n    variant: {\n      filled: styles.listFilled,\n      outlined: styles.listOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: {\n    block: false,\n    size: 'middle',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.itemBlock,\n    },\n    size: {\n      large: styles.itemLarge,\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CA6B5D,OAAO;EACL,WA7BgB,GAAG;;;;;;;;;;qBAUF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;;kCAGP,OAAO,cAAc;;;;;;;;;;;;EAenD,MAAM,GAAG;;;;;;;;;;;;;;;uBAeU,OAAO,aAAa;;;eAG5B,OAAO,mBAAmB;;;;;;;sBAOnB,OAAO,cAAc;0BACjB,OAAO,cAAc;;;iBAG9B,OAAO,UAAU;;;;;;;QAO1B,UAAU;;;iBAGD,OAAO,UAAU;;;;;iBAKjB,OAAO,kBAAkB;;;;;;;EAOtC,WAAW,GAAG;;;EAGd,UAAU,GAAG;;;;;EAKb,WAAW,GAAG;;;;EAId,WAAW,GAAG;;;uBAGK,OAAO,aAAa;;;EAGvC,YAAY,GAAG;;;uBAGI,OAAO,aAAa;;;EAGvC,WAAW,GAAG;;;uBAGK,OAAO,aAAa;;;EAGvC,MAAM,GAAG;;;;;;;;;;;uBAWU,OAAO,eAAe;;;;;;;;EAQzC,WAAW,GAAG;;;;;EAKd,YAAY,GAAG;0BACO,OAAO,oBAAoB;oBACjC,OAAO,cAAc;;EAErC,WAAWA,cAAkB;EAC7B,cAAc,GAAG;0BACK,OAAO,qBAAqB;;;EAGlD,YAAYA,cAAkB;EAC9B,MAAM,GAAG;;;;;;;;CAQX;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const indicator = css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset-block-start: var(--active-item-top);\n    inset-inline-start: var(--active-item-left);\n\n    width: var(--active-item-width);\n    height: var(--active-item-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: none;\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height;\n\n    [data-variant='outlined'] > & {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-item-right);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `;\n\n  return {\n    indicator,\n    item: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n      z-index: 1;\n\n      display: inline-flex;\n      flex-shrink: 0;\n      gap: 6px;\n      align-items: center;\n      justify-content: center;\n\n      box-sizing: border-box;\n      border: 0;\n      border-radius: ${cssVar.borderRadius};\n\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      white-space: nowrap;\n\n      background: transparent;\n      outline: none;\n\n      transition:\n        color 120ms ${cssVar.motionEaseOut},\n        transform 120ms ${cssVar.motionEaseOut};\n\n      &:hover:not([data-disabled], [data-pressed]) {\n        color: ${cssVar.colorText};\n      }\n\n      &:active:not([data-disabled]) {\n        transform: scale(0.98);\n      }\n\n      ${focusRing};\n\n      &[data-pressed] {\n        color: ${cssVar.colorText};\n      }\n\n      &[data-disabled] {\n        cursor: not-allowed;\n        color: ${cssVar.colorTextDisabled};\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition-duration: 0s;\n      }\n    `,\n    itemBlock: css`\n      flex: 1 1 0;\n    `,\n    itemIcon: css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    `,\n    itemLabel: css`\n      display: inline-flex;\n      align-items: center;\n    `,\n    itemLarge: css`\n      height: 36px;\n      padding-inline: 16px;\n      border-radius: ${cssVar.borderRadius};\n      font-size: 14px;\n    `,\n    itemMiddle: css`\n      height: 32px;\n      padding-inline: 12px;\n      border-radius: ${cssVar.borderRadius};\n      font-size: 13px;\n    `,\n    itemSmall: css`\n      height: 26px;\n      padding-inline: 10px;\n      border-radius: ${cssVar.borderRadius};\n      font-size: 12px;\n    `,\n    list: css`\n      position: relative;\n\n      display: inline-flex;\n      flex-wrap: nowrap;\n      gap: 4px;\n      align-items: center;\n      align-self: flex-start;\n\n      box-sizing: border-box;\n      padding: 3px;\n      border-radius: ${cssVar.borderRadiusLG};\n\n      &[data-orientation='vertical'] {\n        flex-direction: column;\n        align-items: stretch;\n        align-self: stretch;\n      }\n    `,\n    listBlock: css`\n      display: flex;\n      align-self: stretch;\n      width: 100%;\n    `,\n    listFilled: css`\n      border: 1px solid ${cssVar.colorFillQuaternary};\n      background: ${cssVar.colorBgLayout};\n    `,\n    listGlass: lobeStaticStylish.blur,\n    listOutlined: css`\n      border: 1px solid ${cssVar.colorBorderSecondary};\n      background: transparent;\n    `,\n    listShadow: lobeStaticStylish.shadow,\n    root: css`\n      display: inline-flex;\n\n      &[data-block='true'] {\n        display: flex;\n        width: 100%;\n      }\n    `,\n  };\n});\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    block: false,\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.listBlock,\n    },\n    glass: {\n      false: null,\n      true: styles.listGlass,\n    },\n    shadow: {\n      false: null,\n      true: styles.listShadow,\n    },\n    variant: {\n      filled: styles.listFilled,\n      outlined: styles.listOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: {\n    block: false,\n    size: 'middle',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.itemBlock,\n    },\n    size: {\n      large: styles.itemLarge,\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAiC5D,OAAO;EACL,WAjCgB,GAAG;;;;;;;;;;qBAUF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;;kCAGP,OAAO,cAAc;;;;;oBAKnC,OAAO,mBAAmB;;;;;;;;;;;EAc1C,MAAM,GAAG;;;;;;;;;;;;;;;uBAeU,OAAO,aAAa;;;eAG5B,OAAO,mBAAmB;;;;;;;sBAOnB,OAAO,cAAc;0BACjB,OAAO,cAAc;;;iBAG9B,OAAO,UAAU;;;;;;;QAO1B,UAAU;;;iBAGD,OAAO,UAAU;;;;;iBAKjB,OAAO,kBAAkB;;;;;;;EAOtC,WAAW,GAAG;;;EAGd,UAAU,GAAG;;;;;EAKb,WAAW,GAAG;;;;EAId,WAAW,GAAG;;;uBAGK,OAAO,aAAa;;;EAGvC,YAAY,GAAG;;;uBAGI,OAAO,aAAa;;;EAGvC,WAAW,GAAG;;;uBAGK,OAAO,aAAa;;;EAGvC,MAAM,GAAG;;;;;;;;;;;uBAWU,OAAO,eAAe;;;;;;;;EAQzC,WAAW,GAAG;;;;;EAKd,YAAY,GAAG;0BACO,OAAO,oBAAoB;oBACjC,OAAO,cAAc;;EAErC,WAAWA,cAAkB;EAC7B,cAAc,GAAG;0BACK,OAAO,qBAAqB;;;EAGlD,YAAYA,cAAkB;EAC9B,MAAM,GAAG;;;;;;;;CAQX;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;CACF;AACF,CAAC"}

package/es/dashboard/ConsoleNav/ConsoleNav.mjs

@@ -11,48 +11,72 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, Play } from "lucide-react";
 //#region src/dashboard/ConsoleNav/ConsoleNav.tsx
 const PANEL_TRANSITION_MS = 160;
+const RAIL_TRANSITION_MS = 200;
 /** Older builds stored the closed group keys as an array. */
 function readOverrides(value) {
 	if (Array.isArray(value)) return Object.fromEntries(value.map((key) => [String(key), false]));
 	return value && typeof value === "object" ? value : {};
 }
-function scrollActiveIntoView(container) {
+function scrollActiveIntoView(container, behavior = "auto") {
 	const link = container.querySelector("[aria-current=\"page\"]") ?? [...container.querySelectorAll("button[data-active=\"true\"]")].at(-1);
 	if (!link) return;
 	const containerRect = container.getBoundingClientRect();
 	const linkRect = link.getBoundingClientRect();
 	if (linkRect.top >= containerRect.top && linkRect.bottom <= containerRect.bottom) return;
-	container.scrollTop += linkRect.top - containerRect.top - (containerRect.height - linkRect.height) / 2;
+	container.scrollBy({
+		behavior,
+		top: linkRect.top - containerRect.top - (containerRect.height - linkRect.height) / 2
+	});
+}
+function renderAnchor(context, linkProps, onFollow) {
+	if (context.renderLink) return context.renderLink(linkProps);
+	return /* @__PURE__ */ jsx("a", {
+		"aria-current": linkProps["aria-current"],
+		"aria-label": linkProps["aria-label"],
+		className: linkProps.className,
+		"data-active": linkProps["data-active"],
+		"data-collapsed": linkProps["data-collapsed"],
+		"data-indent": linkProps["data-indent"],
+		href: linkProps.href,
+		rel: linkProps.external ? "noreferrer" : void 0,
+		target: linkProps.external ? "_blank" : void 0,
+		title: linkProps.title,
+		onClick: (event) => {
+			if (context.onNavigate && !linkProps.external) event.preventDefault();
+			onFollow();
+		},
+		children: linkProps.children
+	});
 }
-function NavLink({ active, collapsed, context, href, icon, indent = 0, item, name }) {
+function NavLink({ active, collapsed, context, href, icon, indent = 0, item, name, overlay = false }) {
 	const shell = useConsoleShellState();
 	const label = item?.label ?? name;
 	const follow = () => {
 		context.onNavigate?.(href);
 		shell?.closeNavigation();
 	};
-	const linkProps = {
+	const link = renderAnchor(context, {
 		"aria-current": active ? "page" : void 0,
 		"aria-label": collapsed ? name : void 0,
-		"children": /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		"children": overlay ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			icon ? /* @__PURE__ */ jsx(Icon, {
 				icon,
 				size: 18
 			}) : null,
-			collapsed ? null : /* @__PURE__ */ jsx("span", {
+			/* @__PURE__ */ jsx("span", {
 				className: styles.itemLabel,
 				children: label
 			}),
-			!collapsed && item?.badge ? /* @__PURE__ */ jsx("span", {
+			item?.badge ? /* @__PURE__ */ jsx("span", {
 				className: styles.badge,
 				children: item.badge
 			}) : null,
-			collapsed && item?.badge ? /* @__PURE__ */ jsx("span", {
+			item?.badge ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
 				className: styles.dot
 			}) : null
 		] }),
-		"className": styles.item,
+		"className": overlay ? styles.railLink : styles.item,
 		"data-active": active,
 		"data-collapsed": collapsed,
 		"data-indent": indent,
@@ -60,31 +84,24 @@ function NavLink({ active, collapsed, context, href, icon, indent = 0, item, nam
 		href,
 		"onClick": follow,
 		"title": collapsed ? void 0 : label
-	};
-	const link = context.renderLink ? context.renderLink(linkProps) : /* @__PURE__ */ jsx("a", {
-		"aria-current": linkProps["aria-current"],
-		"aria-label": linkProps["aria-label"],
-		className: linkProps.className,
-		"data-active": active,
-		"data-collapsed": collapsed,
-		"data-indent": indent,
-		href,
-		rel: item?.external ? "noreferrer" : void 0,
-		target: item?.external ? "_blank" : void 0,
-		title: linkProps.title,
-		onClick: (event) => {
-			if (context.onNavigate && !item?.external) event.preventDefault();
-			follow();
-		},
-		children: linkProps.children
-	});
-	if (!collapsed) return link;
+	}, follow);
+	if (!icon && !overlay) return link;
 	return /* @__PURE__ */ jsx(Tooltip, {
+		disabled: !collapsed,
 		placement: "right",
 		title: name,
 		children: link
 	});
 }
+function Fold({ children, folded }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": folded || void 0,
+		className: styles.fold,
+		"data-folded": folded,
+		inert: folded || void 0,
+		children: /* @__PURE__ */ jsx("div", { children })
+	});
+}
 function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups = [], items = [], label = "Primary", onNavigate, pathname, renderLink, storageKey }) {
 	const id = useId();
 	const navRef = useRef(null);
@@ -124,132 +141,111 @@ function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups
 		return () => window.clearTimeout(timer);
 	}, [
 		activeHref,
-		collapsed,
 		pathname,
 		reducedMotion
 	]);
-	const renderItems = (list, indent, groupLabel) => list.map((item) => /* @__PURE__ */ jsx(NavLink, {
-		active: item.href === activeHref,
-		collapsed: false,
-		context,
-		href: item.href,
-		icon: item.icon,
-		indent: item.icon ? Math.max(0, indent - 1) : indent,
-		item,
-		name: groupLabel ? `${groupLabel} / ${item.label}` : item.label
-	}, item.href));
-	if (collapsed) {
-		const railItems = (list, groupLabel) => list.filter((item) => item.icon).map((item) => /* @__PURE__ */ jsx(NavLink, {
-			collapsed: true,
+	useEffect(() => {
+		const container = navRef.current;
+		if (!container) return;
+		const timer = window.setTimeout(() => scrollActiveIntoView(container, reducedMotion ? "auto" : "smooth"), reducedMotion ? 0 : RAIL_TRANSITION_MS);
+		return () => window.clearTimeout(timer);
+	}, [collapsed, reducedMotion]);
+	const renderItems = (list, indent, groupLabel, foldable) => list.map((item) => {
+		const link = /* @__PURE__ */ jsx(NavLink, {
 			active: item.href === activeHref,
+			collapsed,
 			context,
 			href: item.href,
 			icon: item.icon,
+			indent: item.icon ? Math.max(0, indent - 1) : indent,
 			item,
 			name: groupLabel ? `${groupLabel} / ${item.label}` : item.label
-		}, item.href));
-		const topRail = railItems(items);
-		const iconGroups = groups.filter((group) => group.icon);
-		return /* @__PURE__ */ jsxs(ScrollShadow, {
-			"aria-label": label,
-			as: "nav",
-			className: styles.nav,
-			"data-collapsed": "",
-			orientation: "vertical",
-			ref: navRef,
-			size: 8,
+		}, item.href);
+		if (item.icon || !foldable) return link;
+		return /* @__PURE__ */ jsx(Fold, {
+			folded: collapsed,
+			children: link
+		}, item.href);
+	});
+	const renderGroup = (group, level, indent, underRailIcon) => {
+		const expanded = isExpanded(group);
+		const panelId = `${id}-${group.key}`;
+		const childIndent = indent + (group.icon ? 1 : 0);
+		const active = activeBranch.includes(group.key);
+		const railIcon = level === 0 && Boolean(group.icon);
+		const onRail = collapsed && !underRailIcon;
+		const open = onRail ? !railIcon : expanded;
+		const railHref = railIcon ? group.href ?? collectNavItems([group])[0]?.href : void 0;
+		const railEmpty = !railIcon && !collectNavItems([group]).some((item) => item.icon);
+		const header = /* @__PURE__ */ jsxs("button", {
+			"aria-controls": panelId,
+			"aria-expanded": open,
+			"aria-hidden": onRail && railIcon || void 0,
+			className: styles.groupHeader,
+			"data-active": active,
+			"data-icon": Boolean(group.icon),
+			"data-indent": indent,
+			"data-level": level,
+			tabIndex: onRail && railIcon ? -1 : void 0,
+			type: "button",
+			onClick: () => toggleGroup(group.key, expanded),
 			children: [
-				topRail.length > 0 ? /* @__PURE__ */ jsx("div", {
-					className: styles.railTop,
-					children: topRail
+				group.icon ? /* @__PURE__ */ jsx(Icon, {
+					icon: group.icon,
+					size: 16
 				}) : null,
-				iconGroups.length > 0 ? /* @__PURE__ */ jsx("div", {
-					className: styles.railGroup,
-					"data-first": topRail.length === 0,
-					role: "group",
-					children: iconGroups.map((group) => {
-						const href = group.href ?? collectNavItems([group])[0]?.href;
-						if (!href) return null;
-						return /* @__PURE__ */ jsx(NavLink, {
-							collapsed: true,
-							active: activeBranch[0] === group.key,
-							context,
-							href,
-							icon: group.icon,
-							name: group.label
-						}, group.key);
+				/* @__PURE__ */ jsx("span", {
+					className: styles.itemLabel,
+					"data-label": "",
+					children: group.label
+				}),
+				level === 0 ? /* @__PURE__ */ jsx(Icon, {
+					className: styles.chevron,
+					"data-expanded": expanded,
+					icon: ChevronDown,
+					size: 14
+				}) : /* @__PURE__ */ jsx("span", {
+					className: styles.indicator,
+					"data-expanded": expanded,
+					children: /* @__PURE__ */ jsx(Play, {
+						fill: "currentColor",
+						size: 7,
+						strokeWidth: 1
 					})
-				}) : null,
-				groups.filter((group) => !group.icon).map((group, index) => {
-					const rail = railItems(collectNavItems([group]), group.label);
-					if (rail.length === 0) return null;
-					return /* @__PURE__ */ jsxs("div", {
-						className: styles.railGroup,
-						"data-first": topRail.length === 0 && iconGroups.length === 0 && index === 0,
-						role: "group",
-						children: [/* @__PURE__ */ jsx("h2", {
-							className: styles.srOnly,
-							children: group.label
-						}), rail]
-					}, group.key);
 				})
 			]
 		});
-	}
-	const renderGroup = (group, level, indent) => {
-		const expanded = isExpanded(group);
-		const panelId = `${id}-${group.key}`;
-		const childIndent = indent + (group.icon ? 1 : 0);
-		const active = activeBranch.includes(group.key);
+		let head = header;
+		if (railIcon) head = /* @__PURE__ */ jsxs("div", {
+			className: styles.groupHead,
+			children: [header, onRail && railHref ? /* @__PURE__ */ jsx(NavLink, {
+				collapsed: true,
+				overlay: true,
+				active: activeBranch[0] === group.key,
+				context,
+				href: railHref,
+				name: group.label
+			}) : null]
+		});
+		else if (!underRailIcon) head = /* @__PURE__ */ jsx(Fold, {
+			folded: onRail,
+			children: header
+		});
 		return /* @__PURE__ */ jsxs("div", {
 			className: styles.group,
 			"data-icon": Boolean(group.icon),
 			"data-level": level,
-			children: [/* @__PURE__ */ jsxs("button", {
-				"aria-controls": panelId,
-				"aria-expanded": expanded,
-				className: styles.groupHeader,
-				"data-active": active,
-				"data-icon": Boolean(group.icon),
-				"data-indent": indent,
-				"data-level": level,
-				type: "button",
-				onClick: () => toggleGroup(group.key, expanded),
-				children: [
-					group.icon ? /* @__PURE__ */ jsx(Icon, {
-						icon: group.icon,
-						size: 16
-					}) : null,
-					/* @__PURE__ */ jsx("span", {
-						className: styles.itemLabel,
-						"data-label": "",
-						children: group.label
-					}),
-					level === 0 ? /* @__PURE__ */ jsx(Icon, {
-						className: styles.chevron,
-						"data-expanded": expanded,
-						icon: ChevronDown,
-						size: 14
-					}) : /* @__PURE__ */ jsx("span", {
-						className: styles.indicator,
-						"data-expanded": expanded,
-						children: /* @__PURE__ */ jsx(Play, {
-							fill: "currentColor",
-							size: 7,
-							strokeWidth: 1
-						})
-					})
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				"aria-hidden": !expanded,
+			"data-rail-empty": railEmpty,
+			children: [head, /* @__PURE__ */ jsx("div", {
+				"aria-hidden": !open,
 				className: styles.groupPanel,
-				"data-expanded": expanded,
+				"data-expanded": open,
 				"data-instant": reducedMotion,
 				id: panelId,
-				inert: expanded ? void 0 : true,
+				inert: open ? void 0 : true,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: styles.groupItems,
-					children: [renderItems(group.items ?? [], childIndent, group.label), (group.groups ?? []).map((child) => renderGroup(child, level + 1, childIndent))]
+					children: [renderItems(group.items ?? [], childIndent, group.label, !(underRailIcon || railIcon)), (group.groups ?? []).map((child) => renderGroup(child, level + 1, childIndent, underRailIcon || railIcon))]
 				})
 			})]
 		}, group.key);
@@ -258,14 +254,16 @@ function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups
 		"aria-label": label,
 		as: "nav",
 		className: styles.nav,
+		"data-collapsed": collapsed,
 		orientation: "vertical",
 		ref: navRef,
 		size: 4,
 		children: [items.length > 0 ? /* @__PURE__ */ jsx("div", {
 			className: styles.topItems,
 			"data-divided": groups.length > 0,
-			children: renderItems(items, 0)
-		}) : null, groups.map((group) => renderGroup(group, 0, 0))]
+			"data-rail-empty": !items.some((item) => item.icon),
+			children: renderItems(items, 0, void 0, true)
+		}) : null, groups.map((group) => renderGroup(group, 0, 0, false))]
 	});
 }
 ConsoleNav.displayName = "ConsoleNav";

package/es/dashboard/ConsoleNav/ConsoleNav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConsoleNav.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/ConsoleNav.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, Play } from 'lucide-react';\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport Tooltip from '@/base-ui/Tooltip';\nimport Icon from '@/Icon';\nimport ScrollShadow from '@/ScrollShadow';\n\nimport { useConsoleShellState } from '../ConsoleShell/context';\nimport { useLocalStorage, usePrefersReducedMotion } from '../hooks';\nimport { collectNavItems, findActiveBranch, resolveActiveHref } from './active';\nimport { styles } from './style';\nimport type { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps } from './type';\n\nconst PANEL_TRANSITION_MS = 160;\n\ntype ExpandedOverrides = Record<string, boolean>;\n\n/** Older builds stored the closed group keys as an array. */\nfunction readOverrides(value: unknown): ExpandedOverrides {\n  if (Array.isArray(value)) {\n    return Object.fromEntries(value.map((key) => [String(key), false]));\n  }\n  return value && typeof value === 'object' ? (value as ExpandedOverrides) : {};\n}\n\nfunction scrollActiveIntoView(container: HTMLElement) {\n  const link =\n    container.querySelector<HTMLElement>('[aria-current=\"page\"]') ??\n    [...container.querySelectorAll<HTMLElement>('button[data-active=\"true\"]')].at(-1);\n  if (!link) return;\n  const containerRect = container.getBoundingClientRect();\n  const linkRect = link.getBoundingClientRect();\n  if (linkRect.top >= containerRect.top && linkRect.bottom <= containerRect.bottom) return;\n  container.scrollTop +=\n    linkRect.top - containerRect.top - (containerRect.height - linkRect.height) / 2;\n}\n\ninterface LinkContext {\n  onNavigate?: (href: string) => void;\n  renderLink?: ConsoleNavProps['renderLink'];\n}\n\nfunction NavLink({\n  active,\n  collapsed,\n  context,\n  href,\n  icon,\n  indent = 0,\n  item,\n  name,\n}: {\n  active: boolean;\n  collapsed: boolean;\n  context: LinkContext;\n  href: string;\n  icon?: ConsoleNavItem['icon'];\n  indent?: number;\n  item?: ConsoleNavItem;\n  name: string;\n}) {\n  const shell = useConsoleShellState();\n  const label = item?.label ?? name;\n  const follow = () => {\n    context.onNavigate?.(href);\n    shell?.closeNavigation();\n  };\n  const linkProps: ConsoleNavLinkProps = {\n    'aria-current': active ? 'page' : undefined,\n    'aria-label': collapsed ? name : undefined,\n    'children': (\n      <>\n        {icon ? <Icon icon={icon} size={18} /> : null}\n        {collapsed ? null : <span className={styles.itemLabel}>{label}</span>}\n        {!collapsed && item?.badge ? <span className={styles.badge}>{item.badge}</span> : null}\n        {collapsed && item?.badge ? <span aria-hidden className={styles.dot} /> : null}\n      </>\n    ),\n    'className': styles.item,\n    'data-active': active,\n    'data-collapsed': collapsed,\n    'data-indent': indent,\n    'external': item?.external,\n    href,\n    'onClick': follow,\n    'title': collapsed ? undefined : label,\n  };\n\n  const link = context.renderLink ? (\n    context.renderLink(linkProps)\n  ) : (\n    <a\n      aria-current={linkProps['aria-current']}\n      aria-label={linkProps['aria-label']}\n      className={linkProps.className}\n      data-active={active}\n      data-collapsed={collapsed}\n      data-indent={indent}\n      href={href}\n      rel={item?.external ? 'noreferrer' : undefined}\n      target={item?.external ? '_blank' : undefined}\n      title={linkProps.title}\n      onClick={(event) => {\n        if (context.onNavigate && !item?.external) event.preventDefault();\n        follow();\n      }}\n    >\n      {linkProps.children}\n    </a>\n  );\n\n  if (!collapsed) return link;\n  return (\n    <Tooltip placement=\"right\" title={name}>\n      {link}\n    </Tooltip>\n  );\n}\n\nfunction ConsoleNav({\n  collapsed: collapsedProp,\n  defaultExpanded = 'all',\n  groups = [],\n  items = [],\n  label = 'Primary',\n  onNavigate,\n  pathname,\n  renderLink,\n  storageKey,\n}: ConsoleNavProps) {\n  const id = useId();\n  const navRef = useRef<HTMLDivElement>(null);\n  const shell = useConsoleShellState();\n  const collapsed = collapsedProp ?? shell?.collapsed ?? false;\n  const reducedMotion = usePrefersReducedMotion();\n  const [storedOverrides, setStoredOverrides] = useLocalStorage<unknown>(storageKey, {});\n  const overrides = readOverrides(storedOverrides);\n  const context: LinkContext = { onNavigate, renderLink };\n\n  const activeHref = resolveActiveHref(pathname, [...items, ...collectNavItems(groups)]);\n  const activeBranch = findActiveBranch(pathname, groups, activeHref);\n\n  // Arriving on a page reopens its branch even if it was closed by hand earlier.\n  const [trackedPathname, setTrackedPathname] = useState(pathname);\n  if (trackedPathname !== pathname) {\n    setTrackedPathname(pathname);\n    if (activeBranch.some((key) => overrides[key] === false)) {\n      const next = { ...overrides };\n      for (const key of activeBranch) delete next[key];\n      setStoredOverrides(next);\n    }\n  }\n\n  const isExpanded = (group: ConsoleNavGroup) =>\n    overrides[group.key] ??\n    (activeBranch.includes(group.key) || (group.defaultExpanded ?? defaultExpanded === 'all'));\n\n  const toggleGroup = useCallback(\n    (key: string, expanded: boolean) => {\n      setStoredOverrides((current: unknown) => ({ ...readOverrides(current), [key]: !expanded }));\n    },\n    [setStoredOverrides],\n  );\n\n  useEffect(() => {\n    const container = navRef.current;\n    if (!container) return;\n    scrollActiveIntoView(container);\n    if (reducedMotion) return;\n    const timer = window.setTimeout(() => scrollActiveIntoView(container), PANEL_TRANSITION_MS);\n    return () => window.clearTimeout(timer);\n  }, [activeHref, collapsed, pathname, reducedMotion]);\n\n  const renderItems = (list: ConsoleNavItem[], indent: number, groupLabel?: string) =>\n    list.map((item) => (\n      <NavLink\n        active={item.href === activeHref}\n        collapsed={false}\n        context={context}\n        href={item.href}\n        icon={item.icon}\n        indent={item.icon ? Math.max(0, indent - 1) : indent}\n        item={item}\n        key={item.href}\n        name={groupLabel ? `${groupLabel} / ${item.label}` : item.label}\n      />\n    ));\n\n  if (collapsed) {\n    const railItems = (list: ConsoleNavItem[], groupLabel?: string) =>\n      list\n        .filter((item) => item.icon)\n        .map((item) => (\n          <NavLink\n            collapsed\n            active={item.href === activeHref}\n            context={context}\n            href={item.href}\n            icon={item.icon}\n            item={item}\n            key={item.href}\n            name={groupLabel ? `${groupLabel} / ${item.label}` : item.label}\n          />\n        ));\n    const topRail = railItems(items);\n    const iconGroups = groups.filter((group) => group.icon);\n\n    return (\n      <ScrollShadow\n        aria-label={label}\n        as={'nav'}\n        className={styles.nav}\n        data-collapsed=\"\"\n        orientation={'vertical'}\n        ref={navRef}\n        size={8}\n      >\n        {topRail.length > 0 ? <div className={styles.railTop}>{topRail}</div> : null}\n        {iconGroups.length > 0 ? (\n          <div className={styles.railGroup} data-first={topRail.length === 0} role=\"group\">\n            {iconGroups.map((group) => {\n              const href = group.href ?? collectNavItems([group])[0]?.href;\n              if (!href) return null;\n              return (\n                <NavLink\n                  collapsed\n                  active={activeBranch[0] === group.key}\n                  context={context}\n                  href={href}\n                  icon={group.icon}\n                  key={group.key}\n                  name={group.label}\n                />\n              );\n            })}\n          </div>\n        ) : null}\n        {groups\n          .filter((group) => !group.icon)\n          .map((group, index) => {\n            const rail = railItems(collectNavItems([group]), group.label);\n            if (rail.length === 0) return null;\n            return (\n              <div\n                className={styles.railGroup}\n                data-first={topRail.length === 0 && iconGroups.length === 0 && index === 0}\n                key={group.key}\n                role=\"group\"\n              >\n                <h2 className={styles.srOnly}>{group.label}</h2>\n                {rail}\n              </div>\n            );\n          })}\n      </ScrollShadow>\n    );\n  }\n\n  const renderGroup = (group: ConsoleNavGroup, level: number, indent: number) => {\n    const expanded = isExpanded(group);\n    const panelId = `${id}-${group.key}`;\n    // Nested groups are headings over their items, so the items keep the same indent.\n    const childIndent = indent + (group.icon ? 1 : 0);\n    const active = activeBranch.includes(group.key);\n\n    return (\n      <div\n        className={styles.group}\n        data-icon={Boolean(group.icon)}\n        data-level={level}\n        key={group.key}\n      >\n        <button\n          aria-controls={panelId}\n          aria-expanded={expanded}\n          className={styles.groupHeader}\n          data-active={active}\n          data-icon={Boolean(group.icon)}\n          data-indent={indent}\n          data-level={level}\n          type=\"button\"\n          onClick={() => toggleGroup(group.key, expanded)}\n        >\n          {group.icon ? <Icon icon={group.icon} size={16} /> : null}\n          <span className={styles.itemLabel} data-label=\"\">\n            {group.label}\n          </span>\n          {level === 0 ? (\n            <Icon\n              className={styles.chevron}\n              data-expanded={expanded}\n              icon={ChevronDown}\n              size={14}\n            />\n          ) : (\n            <span className={styles.indicator} data-expanded={expanded}>\n              <Play fill={'currentColor'} size={7} strokeWidth={1} />\n            </span>\n          )}\n        </button>\n        <div\n          aria-hidden={!expanded}\n          className={styles.groupPanel}\n          data-expanded={expanded}\n          data-instant={reducedMotion}\n          id={panelId}\n          inert={expanded ? undefined : true}\n        >\n          <div className={styles.groupItems}>\n            {renderItems(group.items ?? [], childIndent, group.label)}\n            {(group.groups ?? []).map((child) => renderGroup(child, level + 1, childIndent))}\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <ScrollShadow\n      aria-label={label}\n      as={'nav'}\n      className={styles.nav}\n      orientation={'vertical'}\n      ref={navRef}\n      size={4}\n    >\n      {items.length > 0 ? (\n        <div className={styles.topItems} data-divided={groups.length > 0}>\n          {renderItems(items, 0)}\n        </div>\n      ) : null}\n      {groups.map((group) => renderGroup(group, 0, 0))}\n    </ScrollShadow>\n  );\n}\n\nConsoleNav.displayName = 'ConsoleNav';\n\nexport default ConsoleNav;\n"],"mappings":"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"}
+{"version":3,"file":"ConsoleNav.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/ConsoleNav.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, Play } from 'lucide-react';\nimport { type ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport Tooltip from '@/base-ui/Tooltip';\nimport Icon from '@/Icon';\nimport ScrollShadow from '@/ScrollShadow';\n\nimport { useConsoleShellState } from '../ConsoleShell/context';\nimport { useLocalStorage, usePrefersReducedMotion } from '../hooks';\nimport { collectNavItems, findActiveBranch, resolveActiveHref } from './active';\nimport { styles } from './style';\nimport type { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps } from './type';\n\nconst PANEL_TRANSITION_MS = 160;\nconst RAIL_TRANSITION_MS = 200;\n\ntype ExpandedOverrides = Record<string, boolean>;\n\n/** Older builds stored the closed group keys as an array. */\nfunction readOverrides(value: unknown): ExpandedOverrides {\n  if (Array.isArray(value)) {\n    return Object.fromEntries(value.map((key) => [String(key), false]));\n  }\n  return value && typeof value === 'object' ? (value as ExpandedOverrides) : {};\n}\n\nfunction scrollActiveIntoView(container: HTMLElement, behavior: ScrollBehavior = 'auto') {\n  const link =\n    container.querySelector<HTMLElement>('[aria-current=\"page\"]') ??\n    [...container.querySelectorAll<HTMLElement>('button[data-active=\"true\"]')].at(-1);\n  if (!link) return;\n  const containerRect = container.getBoundingClientRect();\n  const linkRect = link.getBoundingClientRect();\n  if (linkRect.top >= containerRect.top && linkRect.bottom <= containerRect.bottom) return;\n  container.scrollBy({\n    behavior,\n    top: linkRect.top - containerRect.top - (containerRect.height - linkRect.height) / 2,\n  });\n}\n\ninterface LinkContext {\n  onNavigate?: (href: string) => void;\n  renderLink?: ConsoleNavProps['renderLink'];\n}\n\nfunction renderAnchor(context: LinkContext, linkProps: ConsoleNavLinkProps, onFollow: () => void) {\n  if (context.renderLink) return context.renderLink(linkProps);\n  return (\n    <a\n      aria-current={linkProps['aria-current']}\n      aria-label={linkProps['aria-label']}\n      className={linkProps.className}\n      data-active={linkProps['data-active']}\n      data-collapsed={linkProps['data-collapsed']}\n      data-indent={linkProps['data-indent']}\n      href={linkProps.href}\n      rel={linkProps.external ? 'noreferrer' : undefined}\n      target={linkProps.external ? '_blank' : undefined}\n      title={linkProps.title}\n      onClick={(event) => {\n        if (context.onNavigate && !linkProps.external) event.preventDefault();\n        onFollow();\n      }}\n    >\n      {linkProps.children}\n    </a>\n  );\n}\n\nfunction NavLink({\n  active,\n  collapsed,\n  context,\n  href,\n  icon,\n  indent = 0,\n  item,\n  name,\n  overlay = false,\n}: {\n  active: boolean;\n  collapsed: boolean;\n  context: LinkContext;\n  href: string;\n  icon?: ConsoleNavItem['icon'];\n  indent?: number;\n  item?: ConsoleNavItem;\n  name: string;\n  overlay?: boolean;\n}) {\n  const shell = useConsoleShellState();\n  const label = item?.label ?? name;\n  const follow = () => {\n    context.onNavigate?.(href);\n    shell?.closeNavigation();\n  };\n  const linkProps: ConsoleNavLinkProps = {\n    'aria-current': active ? 'page' : undefined,\n    'aria-label': collapsed ? name : undefined,\n    'children': overlay ? null : (\n      <>\n        {icon ? <Icon icon={icon} size={18} /> : null}\n        <span className={styles.itemLabel}>{label}</span>\n        {item?.badge ? <span className={styles.badge}>{item.badge}</span> : null}\n        {item?.badge ? <span aria-hidden className={styles.dot} /> : null}\n      </>\n    ),\n    'className': overlay ? styles.railLink : styles.item,\n    'data-active': active,\n    'data-collapsed': collapsed,\n    'data-indent': indent,\n    'external': item?.external,\n    href,\n    'onClick': follow,\n    'title': collapsed ? undefined : label,\n  };\n\n  const link = renderAnchor(context, linkProps, follow);\n\n  if (!icon && !overlay) return link;\n  // Always mounted so toggling the rail keeps the same link element and its label can fade.\n  return (\n    <Tooltip disabled={!collapsed} placement=\"right\" title={name}>\n      {link}\n    </Tooltip>\n  );\n}\n\nfunction Fold({ children, folded }: { children: ReactNode; folded: boolean }) {\n  return (\n    <div\n      aria-hidden={folded || undefined}\n      className={styles.fold}\n      data-folded={folded}\n      inert={folded || undefined}\n    >\n      <div>{children}</div>\n    </div>\n  );\n}\n\nfunction ConsoleNav({\n  collapsed: collapsedProp,\n  defaultExpanded = 'all',\n  groups = [],\n  items = [],\n  label = 'Primary',\n  onNavigate,\n  pathname,\n  renderLink,\n  storageKey,\n}: ConsoleNavProps) {\n  const id = useId();\n  const navRef = useRef<HTMLDivElement>(null);\n  const shell = useConsoleShellState();\n  const collapsed = collapsedProp ?? shell?.collapsed ?? false;\n  const reducedMotion = usePrefersReducedMotion();\n  const [storedOverrides, setStoredOverrides] = useLocalStorage<unknown>(storageKey, {});\n  const overrides = readOverrides(storedOverrides);\n  const context: LinkContext = { onNavigate, renderLink };\n\n  const activeHref = resolveActiveHref(pathname, [...items, ...collectNavItems(groups)]);\n  const activeBranch = findActiveBranch(pathname, groups, activeHref);\n\n  // Arriving on a page reopens its branch even if it was closed by hand earlier.\n  const [trackedPathname, setTrackedPathname] = useState(pathname);\n  if (trackedPathname !== pathname) {\n    setTrackedPathname(pathname);\n    if (activeBranch.some((key) => overrides[key] === false)) {\n      const next = { ...overrides };\n      for (const key of activeBranch) delete next[key];\n      setStoredOverrides(next);\n    }\n  }\n\n  const isExpanded = (group: ConsoleNavGroup) =>\n    overrides[group.key] ??\n    (activeBranch.includes(group.key) || (group.defaultExpanded ?? defaultExpanded === 'all'));\n\n  const toggleGroup = useCallback(\n    (key: string, expanded: boolean) => {\n      setStoredOverrides((current: unknown) => ({ ...readOverrides(current), [key]: !expanded }));\n    },\n    [setStoredOverrides],\n  );\n\n  useEffect(() => {\n    const container = navRef.current;\n    if (!container) return;\n    scrollActiveIntoView(container);\n    if (reducedMotion) return;\n    const timer = window.setTimeout(() => scrollActiveIntoView(container), PANEL_TRANSITION_MS);\n    return () => window.clearTimeout(timer);\n  }, [activeHref, pathname, reducedMotion]);\n\n  useEffect(() => {\n    const container = navRef.current;\n    if (!container) return;\n    const timer = window.setTimeout(\n      () => scrollActiveIntoView(container, reducedMotion ? 'auto' : 'smooth'),\n      reducedMotion ? 0 : RAIL_TRANSITION_MS,\n    );\n    return () => window.clearTimeout(timer);\n  }, [collapsed, reducedMotion]);\n\n  // The rail folds rows out of this same tree instead of rendering its own, so icons stay put\n  // while the sidebar width animates.\n  const renderItems = (\n    list: ConsoleNavItem[],\n    indent: number,\n    groupLabel: string | undefined,\n    foldable: boolean,\n  ) =>\n    list.map((item) => {\n      const link = (\n        <NavLink\n          active={item.href === activeHref}\n          collapsed={collapsed}\n          context={context}\n          href={item.href}\n          icon={item.icon}\n          indent={item.icon ? Math.max(0, indent - 1) : indent}\n          item={item}\n          key={item.href}\n          name={groupLabel ? `${groupLabel} / ${item.label}` : item.label}\n        />\n      );\n      if (item.icon || !foldable) return link;\n      return (\n        <Fold folded={collapsed} key={item.href}>\n          {link}\n        </Fold>\n      );\n    });\n\n  const renderGroup = (\n    group: ConsoleNavGroup,\n    level: number,\n    indent: number,\n    underRailIcon: boolean,\n  ) => {\n    const expanded = isExpanded(group);\n    const panelId = `${id}-${group.key}`;\n    // Nested groups are headings over their items, so the items keep the same indent.\n    const childIndent = indent + (group.icon ? 1 : 0);\n    const active = activeBranch.includes(group.key);\n    const railIcon = level === 0 && Boolean(group.icon);\n    const onRail = collapsed && !underRailIcon;\n    const open = onRail ? !railIcon : expanded;\n    const railHref = railIcon ? (group.href ?? collectNavItems([group])[0]?.href) : undefined;\n    const railEmpty = !railIcon && !collectNavItems([group]).some((item) => item.icon);\n\n    const header = (\n      <button\n        aria-controls={panelId}\n        aria-expanded={open}\n        aria-hidden={(onRail && railIcon) || undefined}\n        className={styles.groupHeader}\n        data-active={active}\n        data-icon={Boolean(group.icon)}\n        data-indent={indent}\n        data-level={level}\n        tabIndex={onRail && railIcon ? -1 : undefined}\n        type=\"button\"\n        onClick={() => toggleGroup(group.key, expanded)}\n      >\n        {group.icon ? <Icon icon={group.icon} size={16} /> : null}\n        <span className={styles.itemLabel} data-label=\"\">\n          {group.label}\n        </span>\n        {level === 0 ? (\n          <Icon className={styles.chevron} data-expanded={expanded} icon={ChevronDown} size={14} />\n        ) : (\n          <span className={styles.indicator} data-expanded={expanded}>\n            <Play fill={'currentColor'} size={7} strokeWidth={1} />\n          </span>\n        )}\n      </button>\n    );\n\n    let head: ReactNode = header;\n    if (railIcon) {\n      head = (\n        <div className={styles.groupHead}>\n          {header}\n          {onRail && railHref ? (\n            <NavLink\n              collapsed\n              overlay\n              active={activeBranch[0] === group.key}\n              context={context}\n              href={railHref}\n              name={group.label}\n            />\n          ) : null}\n        </div>\n      );\n    } else if (!underRailIcon) {\n      head = <Fold folded={onRail}>{header}</Fold>;\n    }\n\n    return (\n      <div\n        className={styles.group}\n        data-icon={Boolean(group.icon)}\n        data-level={level}\n        data-rail-empty={railEmpty}\n        key={group.key}\n      >\n        {head}\n        <div\n          aria-hidden={!open}\n          className={styles.groupPanel}\n          data-expanded={open}\n          data-instant={reducedMotion}\n          id={panelId}\n          inert={open ? undefined : true}\n        >\n          <div className={styles.groupItems}>\n            {renderItems(group.items ?? [], childIndent, group.label, !(underRailIcon || railIcon))}\n            {(group.groups ?? []).map((child) =>\n              renderGroup(child, level + 1, childIndent, underRailIcon || railIcon),\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <ScrollShadow\n      aria-label={label}\n      as={'nav'}\n      className={styles.nav}\n      data-collapsed={collapsed}\n      orientation={'vertical'}\n      ref={navRef}\n      size={4}\n    >\n      {items.length > 0 ? (\n        <div\n          className={styles.topItems}\n          data-divided={groups.length > 0}\n          data-rail-empty={!items.some((item) => item.icon)}\n        >\n          {renderItems(items, 0, undefined, true)}\n        </div>\n      ) : null}\n      {groups.map((group) => renderGroup(group, 0, 0, false))}\n    </ScrollShadow>\n  );\n}\n\nConsoleNav.displayName = 'ConsoleNav';\n\nexport default ConsoleNav;\n"],"mappings":"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"}

package/es/dashboard/ConsoleNav/style.mjs

@@ -1,282 +1,405 @@
 import { createStaticStyles } from "antd-style";
 //#region src/dashboard/ConsoleNav/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	badge: css`
-    flex: none;
-
-    min-inline-size: 20px;
-    padding-inline: 6px;
-    border-radius: 999px;
-
-    font-size: ${cssVar.fontSizeSM};
-    font-variant-numeric: tabular-nums;
-    color: ${cssVar.colorError};
-    text-align: center;
-
-    background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);
-  `,
-	chevron: css`
-    flex: none;
-    transition: transform 160ms ease;
-
-    &[data-expanded='false'] {
-      transform: rotate(-90deg);
+const styles = createStaticStyles(({ css, cssVar, responsive }) => {
+	const railFade = `
+    transition: opacity 120ms ease 80ms;
+
+    [data-collapsed='true'] & {
+      opacity: 0;
+      transition-delay: 0s;
     }
-  `,
-	indicator: css`
-    display: flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
 
-    width: 18px;
-    height: 18px;
-    margin-inline-start: -6px;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  `;
+	return {
+		badge: css`
+      flex: none;
 
-    color: ${cssVar.colorTextDescription};
+      min-inline-size: 20px;
+      padding-inline: 6px;
+      border-radius: 999px;
 
-    transition: transform 160ms ease;
+      font-size: ${cssVar.fontSizeSM};
+      font-variant-numeric: tabular-nums;
+      color: ${cssVar.colorError};
+      text-align: center;
 
-    &[data-expanded='true'] {
-      transform: rotate(90deg);
-    }
-  `,
-	dot: css`
-    position: absolute;
-    inset-block-start: 7px;
-    inset-inline-end: 9px;
-
-    inline-size: 7px;
-    block-size: 7px;
-    border-radius: 999px;
-
-    background: ${cssVar.colorError};
-  `,
-	group: css`
-    display: flex;
-    flex-direction: column;
-    margin-block-start: 12px;
-
-    &[data-level='0'][data-icon='true'] {
-      margin-block-start: 2px;
-    }
+      background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);
 
-    &:not([data-level='0']) {
-      margin-block-start: 6px;
-    }
-  `,
-	groupHeader: css`
-    cursor: pointer;
-
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: space-between;
-
-    min-block-size: 32px;
-    padding-inline: 10px;
-    border: none;
-    border-radius: ${cssVar.borderRadius};
-
-    font-size: ${cssVar.fontSizeSM};
-    font-weight: 500;
-    color: ${cssVar.colorTextSecondary};
-    text-align: start;
-
-    background: none;
-
-    &:hover,
-    &[data-active='true'] {
-      color: ${cssVar.colorText};
-    }
+      ${railFade}
+    `,
+		chevron: css`
+      flex: none;
+      transition:
+        transform 160ms ease,
+        opacity 120ms ease 80ms;
 
-    &[data-icon='true'] {
-      gap: 12px;
-      justify-content: flex-start;
-      min-block-size: 36px;
-      font-size: ${cssVar.fontSize};
-    }
+      &[data-expanded='false'] {
+        transform: rotate(-90deg);
+      }
 
-    &[data-level='0'][data-icon='true']:hover {
-      background: ${cssVar.colorFillTertiary};
-    }
+      [data-collapsed='true'] & {
+        opacity: 0;
+        transition-delay: 0s;
+      }
 
-    /* Nested groups read as quiet subheadings with the indicator right after the label. */
-    &:not([data-level='0']) {
-      gap: 8px;
-      justify-content: flex-start;
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `,
+		indicator: css`
+      display: flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
 
-      min-block-size: 26px;
+      width: 18px;
+      height: 18px;
+      margin-inline-start: -6px;
 
-      font-size: ${cssVar.fontSizeSM};
-      font-weight: 400;
       color: ${cssVar.colorTextDescription};
 
-      > [data-label] {
-        flex: 0 1 auto;
+      transition: transform 160ms ease;
+
+      &[data-expanded='true'] {
+        transform: rotate(90deg);
       }
+    `,
+		dot: css`
+      position: absolute;
+      inset-block-start: 7px;
+      inset-inline-end: 9px;
 
-      &:hover,
-      &[data-active='true'] {
-        color: ${cssVar.colorTextSecondary};
+      inline-size: 7px;
+      block-size: 7px;
+      border-radius: 999px;
+
+      opacity: 0;
+      background: ${cssVar.colorError};
+
+      transition: opacity 120ms ease;
+
+      [data-collapsed='true'] & {
+        opacity: 1;
       }
-    }
 
-    &[data-indent='1'] {
-      padding-inline-start: 38px;
-    }
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `,
+		fold: css`
+      display: grid;
+      grid-template-rows: 1fr;
+      transition:
+        grid-template-rows 200ms ease,
+        margin 200ms ease,
+        opacity 120ms ease;
+
+      > div {
+        overflow: hidden;
+        min-block-size: 0;
+      }
 
-    &[data-indent='2'] {
-      padding-inline-start: 56px;
-    }
+      &[data-folded='true'] {
+        grid-template-rows: 0fr;
+        opacity: 0;
+      }
+
+      &[data-folded='true']:not(:first-child) {
+        margin-block-start: -2px;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `,
+		group: css`
+      position: relative;
 
-    > [role='img'] {
       display: flex;
-      flex: none;
-    }
-  `,
-	groupItems: css`
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-block-size: 0;
-  `,
-	groupPanel: css`
-    display: grid;
-    grid-template-rows: 1fr;
-    transition: grid-template-rows 160ms ease;
-
-    > div {
-      overflow: hidden;
-    }
+      flex-direction: column;
 
-    &[data-expanded='false'] {
-      grid-template-rows: 0fr;
-    }
+      margin-block-start: 12px;
 
-    &[data-instant='true'] {
-      transition: none;
-    }
-  `,
-	item: css`
-    position: relative;
+      transition: margin 200ms ease;
 
-    display: flex;
-    gap: 10px;
-    align-items: center;
+      &::before {
+        content: '';
 
-    min-block-size: 36px;
-    padding-inline: 10px;
-    border-radius: ${cssVar.borderRadius};
+        position: absolute;
+        inset-block-start: -6px;
+        inset-inline: 0;
 
-    color: ${cssVar.colorTextSecondary};
-    text-decoration: none;
+        block-size: 1px;
 
-    transition:
-      background 120ms ease,
-      color 120ms ease;
+        opacity: 0;
+        background: ${cssVar.colorBorderSecondary};
 
-    &:hover {
-      color: ${cssVar.colorText};
-      background: ${cssVar.colorFillTertiary};
-    }
+        transition: opacity 200ms ease;
+      }
 
-    &[data-active='true'] {
-      font-weight: 500;
-      color: ${cssVar.colorText};
-      background: ${cssVar.colorFillSecondary};
-    }
+      &[data-level='0'][data-icon='true'] {
+        margin-block-start: 2px;
+      }
+
+      &:not([data-level='0']) {
+        margin-block-start: 6px;
+      }
+
+      [data-collapsed='true'] & + &[data-level='0'][data-icon='false']::before {
+        opacity: 1;
+      }
+
+      [data-collapsed='true'] &[data-rail-empty='true'] {
+        margin-block-start: 0;
+
+        &::before {
+          opacity: 0;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+
+        &::before {
+          transition: none;
+        }
+      }
+    `,
+		groupHead: css`
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    `,
+		groupHeader: css`
+      cursor: pointer;
+
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: space-between;
 
-    &[data-indent='1'],
-    &[data-indent='2'] {
       min-block-size: 32px;
-      color: ${cssVar.colorText};
-    }
+      padding-inline: 10px;
+      border: none;
+      border-radius: ${cssVar.borderRadius};
 
-    &[data-indent='1'] {
-      padding-inline-start: 38px;
-    }
+      font-size: ${cssVar.fontSizeSM};
+      font-weight: 500;
+      color: ${cssVar.colorTextSecondary};
+      text-align: start;
+      white-space: nowrap;
 
-    &[data-indent='2'] {
-      padding-inline-start: 56px;
-    }
+      background: none;
 
-    > [role='img'] {
+      &:hover,
+      &[data-active='true'] {
+        color: ${cssVar.colorText};
+      }
+
+      &[data-icon='true'] {
+        gap: 10px;
+        justify-content: flex-start;
+        min-block-size: 36px;
+        font-size: ${cssVar.fontSize};
+
+        > [role='img'] {
+          justify-content: center;
+          inline-size: 18px;
+        }
+      }
+
+      &[data-level='0'][data-icon='true']:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+
+      /* Nested groups read as quiet subheadings with the indicator right after the label. */
+      &:not([data-level='0']) {
+        gap: 8px;
+        justify-content: flex-start;
+
+        min-block-size: 26px;
+
+        font-size: ${cssVar.fontSizeSM};
+        font-weight: 400;
+        color: ${cssVar.colorTextDescription};
+
+        > [data-label] {
+          flex: 0 1 auto;
+        }
+
+        &:hover,
+        &[data-active='true'] {
+          color: ${cssVar.colorTextSecondary};
+        }
+      }
+
+      &[data-indent='1'] {
+        padding-inline-start: 38px;
+      }
+
+      &[data-indent='2'] {
+        padding-inline-start: 56px;
+      }
+
+      > [role='img'] {
+        display: flex;
+        flex: none;
+      }
+    `,
+		groupItems: css`
       display: flex;
-      flex: none;
-    }
+      flex-direction: column;
+      gap: 2px;
+      min-block-size: 0;
+    `,
+		groupPanel: css`
+      display: grid;
+      grid-template-rows: 1fr;
+      transition: grid-template-rows 160ms ease;
+
+      > div {
+        overflow: hidden;
+      }
 
-    &[data-collapsed='true'] {
-      justify-content: center;
-      min-block-size: 40px;
-      padding-inline: 0;
-    }
+      &[data-expanded='false'] {
+        grid-template-rows: 0fr;
+      }
 
-    ${responsive.mobile} {
-      min-block-size: 44px;
-    }
-  `,
-	itemLabel: css`
-    overflow: hidden;
-    flex: 1;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-	nav: css`
-    scrollbar-width: thin;
-
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: 2px;
-
-    min-block-size: 0;
-    padding-block-end: 12px;
-    padding-inline: 8px;
-  `,
-	railGroup: css`
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    margin-block-start: 6px;
-    padding-block-start: 6px;
-    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
-
-    &[data-first='true'] {
-      margin-block-start: 0;
-      border-block-start: none;
-    }
-  `,
-	railTop: css`
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  `,
-	topItems: css`
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    &[data-divided='true'] {
-      margin-block-end: 6px;
-      padding-block-end: 8px;
-      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
-    }
-  `,
-	srOnly: css`
-    position: absolute;
+      &[data-instant='true'] {
+        transition: none;
+      }
+    `,
+		item: css`
+      position: relative;
 
-    overflow: hidden;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+
+      min-block-size: 36px;
+      padding-inline: 10px;
+      border-radius: ${cssVar.borderRadius};
 
-    inline-size: 1px;
-    block-size: 1px;
+      color: ${cssVar.colorTextSecondary};
+      text-decoration: none;
+      white-space: nowrap;
 
-    white-space: nowrap;
+      transition:
+        background 120ms ease,
+        color 120ms ease;
 
-    clip-path: inset(50%);
-  `
-}));
+      &:hover {
+        color: ${cssVar.colorText};
+        background: ${cssVar.colorFillTertiary};
+      }
+
+      &[data-active='true'] {
+        font-weight: 500;
+        color: ${cssVar.colorText};
+        background: ${cssVar.colorFillSecondary};
+      }
+
+      &[data-indent='1'],
+      &[data-indent='2'] {
+        min-block-size: 32px;
+        color: ${cssVar.colorText};
+      }
+
+      &[data-indent='1'] {
+        padding-inline-start: 38px;
+      }
+
+      &[data-indent='2'] {
+        padding-inline-start: 56px;
+      }
+
+      [data-collapsed='true'] &:not([data-indent='0']) {
+        padding-inline-start: 10px;
+      }
+
+      > [role='img'] {
+        display: flex;
+        flex: none;
+      }
+
+      ${responsive.mobile} {
+        min-block-size: 44px;
+      }
+    `,
+		itemLabel: css`
+      overflow: hidden;
+      flex: 1;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      [data-collapsed='true'] & {
+        text-overflow: clip;
+      }
+
+      ${railFade}
+    `,
+		nav: css`
+      /* Scroll anchoring would jump the list in one frame while rail rows fold and unfold. */
+      overflow-anchor: none;
+      scrollbar-width: thin;
+
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: 2px;
+
+      min-block-size: 0;
+      padding-block-end: 12px;
+      padding-inline: 8px;
+    `,
+		railLink: css`
+      position: absolute;
+      inset: 0;
+      border-radius: ${cssVar.borderRadius};
+      transition: background 120ms ease;
+
+      &:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+
+      &[data-active='true'] {
+        background: ${cssVar.colorFillSecondary};
+      }
+
+      @starting-style {
+        background: transparent;
+      }
+    `,
+		topItems: css`
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      transition:
+        margin 200ms ease,
+        padding 200ms ease,
+        border-color 200ms ease;
+
+      &[data-divided='true'] {
+        margin-block-end: 6px;
+        padding-block-end: 8px;
+        border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+      }
+
+      [data-collapsed='true'] &[data-rail-empty='true'] {
+        margin-block-end: 0;
+        padding-block-end: 0;
+        border-block-end-color: transparent;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `
+	};
+});
 //#endregion
 export { styles };
 

package/es/dashboard/ConsoleNav/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  badge: css`\n    flex: none;\n\n    min-inline-size: 20px;\n    padding-inline: 6px;\n    border-radius: 999px;\n\n    font-size: ${cssVar.fontSizeSM};\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorError};\n    text-align: center;\n\n    background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);\n  `,\n  chevron: css`\n    flex: none;\n    transition: transform 160ms ease;\n\n    &[data-expanded='false'] {\n      transform: rotate(-90deg);\n    }\n  `,\n  indicator: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 18px;\n    height: 18px;\n    margin-inline-start: -6px;\n\n    color: ${cssVar.colorTextDescription};\n\n    transition: transform 160ms ease;\n\n    &[data-expanded='true'] {\n      transform: rotate(90deg);\n    }\n  `,\n  dot: css`\n    position: absolute;\n    inset-block-start: 7px;\n    inset-inline-end: 9px;\n\n    inline-size: 7px;\n    block-size: 7px;\n    border-radius: 999px;\n\n    background: ${cssVar.colorError};\n  `,\n  group: css`\n    display: flex;\n    flex-direction: column;\n    margin-block-start: 12px;\n\n    &[data-level='0'][data-icon='true'] {\n      margin-block-start: 2px;\n    }\n\n    &:not([data-level='0']) {\n      margin-block-start: 6px;\n    }\n  `,\n  groupHeader: css`\n    cursor: pointer;\n\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    min-block-size: 32px;\n    padding-inline: 10px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: ${cssVar.fontSizeSM};\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    text-align: start;\n\n    background: none;\n\n    &:hover,\n    &[data-active='true'] {\n      color: ${cssVar.colorText};\n    }\n\n    &[data-icon='true'] {\n      gap: 12px;\n      justify-content: flex-start;\n      min-block-size: 36px;\n      font-size: ${cssVar.fontSize};\n    }\n\n    &[data-level='0'][data-icon='true']:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    /* Nested groups read as quiet subheadings with the indicator right after the label. */\n    &:not([data-level='0']) {\n      gap: 8px;\n      justify-content: flex-start;\n\n      min-block-size: 26px;\n\n      font-size: ${cssVar.fontSizeSM};\n      font-weight: 400;\n      color: ${cssVar.colorTextDescription};\n\n      > [data-label] {\n        flex: 0 1 auto;\n      }\n\n      &:hover,\n      &[data-active='true'] {\n        color: ${cssVar.colorTextSecondary};\n      }\n    }\n\n    &[data-indent='1'] {\n      padding-inline-start: 38px;\n    }\n\n    &[data-indent='2'] {\n      padding-inline-start: 56px;\n    }\n\n    > [role='img'] {\n      display: flex;\n      flex: none;\n    }\n  `,\n  groupItems: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-block-size: 0;\n  `,\n  groupPanel: css`\n    display: grid;\n    grid-template-rows: 1fr;\n    transition: grid-template-rows 160ms ease;\n\n    > div {\n      overflow: hidden;\n    }\n\n    &[data-expanded='false'] {\n      grid-template-rows: 0fr;\n    }\n\n    &[data-instant='true'] {\n      transition: none;\n    }\n  `,\n  item: css`\n    position: relative;\n\n    display: flex;\n    gap: 10px;\n    align-items: center;\n\n    min-block-size: 36px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorTextSecondary};\n    text-decoration: none;\n\n    transition:\n      background 120ms ease,\n      color 120ms ease;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[data-active='true'] {\n      font-weight: 500;\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-indent='1'],\n    &[data-indent='2'] {\n      min-block-size: 32px;\n      color: ${cssVar.colorText};\n    }\n\n    &[data-indent='1'] {\n      padding-inline-start: 38px;\n    }\n\n    &[data-indent='2'] {\n      padding-inline-start: 56px;\n    }\n\n    > [role='img'] {\n      display: flex;\n      flex: none;\n    }\n\n    &[data-collapsed='true'] {\n      justify-content: center;\n      min-block-size: 40px;\n      padding-inline: 0;\n    }\n\n    ${responsive.mobile} {\n      min-block-size: 44px;\n    }\n  `,\n  itemLabel: css`\n    overflow: hidden;\n    flex: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  nav: css`\n    scrollbar-width: thin;\n\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 2px;\n\n    min-block-size: 0;\n    padding-block-end: 12px;\n    padding-inline: 8px;\n  `,\n  railGroup: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n\n    margin-block-start: 6px;\n    padding-block-start: 6px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n\n    &[data-first='true'] {\n      margin-block-start: 0;\n      border-block-start: none;\n    }\n  `,\n  railTop: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  `,\n  topItems: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n\n    &[data-divided='true'] {\n      margin-block-end: 6px;\n      padding-block-end: 8px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;;iBAOK,OAAO,WAAW;;aAEtB,OAAO,WAAW;;;qCAGM,OAAO,WAAW;;CAErD,SAAS,GAAG;;;;;;;;CAQZ,WAAW,GAAG;;;;;;;;;;aAUH,OAAO,qBAAqB;;;;;;;;CAQvC,KAAK,GAAG;;;;;;;;;kBASQ,OAAO,WAAW;;CAElC,OAAO,GAAG;;;;;;;;;;;;;CAaV,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,aAAa;;iBAExB,OAAO,WAAW;;aAEtB,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;;;;;;;mBAOb,OAAO,SAAS;;;;oBAIf,OAAO,kBAAkB;;;;;;;;;;mBAU1B,OAAO,WAAW;;eAEtB,OAAO,qBAAqB;;;;;;;;iBAQ1B,OAAO,mBAAmB;;;;;;;;;;;;;;;;;CAiBzC,YAAY,GAAG;;;;;;CAMf,YAAY,GAAG;;;;;;;;;;;;;;;;;CAiBf,MAAM,GAAG;;;;;;;;;qBASU,OAAO,aAAa;;aAE5B,OAAO,mBAAmB;;;;;;;;eAQxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;eAK9B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;eAM/B,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;MAsB1B,WAAW,OAAO;;;;CAItB,WAAW,GAAG;;;;;;CAMd,KAAK,GAAG;;;;;;;;;;;;CAYR,WAAW,GAAG;;;;;;;oCAOoB,OAAO,qBAAqB;;;;;;;CAO9D,SAAS,GAAG;;;;;CAKZ,UAAU,GAAG;;;;;;;;oCAQqB,OAAO,qBAAqB;;;CAG9D,QAAQ,GAAG;;;;;;;;;;;;AAYb,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => {\n  // Fades out at once on collapse, but waits on expand until the width has room for the text.\n  const railFade = `\n    transition: opacity 120ms ease 80ms;\n\n    [data-collapsed='true'] & {\n      opacity: 0;\n      transition-delay: 0s;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `;\n\n  return {\n    badge: css`\n      flex: none;\n\n      min-inline-size: 20px;\n      padding-inline: 6px;\n      border-radius: 999px;\n\n      font-size: ${cssVar.fontSizeSM};\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorError};\n      text-align: center;\n\n      background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);\n\n      ${railFade}\n    `,\n    chevron: css`\n      flex: none;\n      transition:\n        transform 160ms ease,\n        opacity 120ms ease 80ms;\n\n      &[data-expanded='false'] {\n        transform: rotate(-90deg);\n      }\n\n      [data-collapsed='true'] & {\n        opacity: 0;\n        transition-delay: 0s;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    indicator: css`\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      width: 18px;\n      height: 18px;\n      margin-inline-start: -6px;\n\n      color: ${cssVar.colorTextDescription};\n\n      transition: transform 160ms ease;\n\n      &[data-expanded='true'] {\n        transform: rotate(90deg);\n      }\n    `,\n    dot: css`\n      position: absolute;\n      inset-block-start: 7px;\n      inset-inline-end: 9px;\n\n      inline-size: 7px;\n      block-size: 7px;\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorError};\n\n      transition: opacity 120ms ease;\n\n      [data-collapsed='true'] & {\n        opacity: 1;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    fold: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition:\n        grid-template-rows 200ms ease,\n        margin 200ms ease,\n        opacity 120ms ease;\n\n      > div {\n        overflow: hidden;\n        min-block-size: 0;\n      }\n\n      &[data-folded='true'] {\n        grid-template-rows: 0fr;\n        opacity: 0;\n      }\n\n      &[data-folded='true']:not(:first-child) {\n        margin-block-start: -2px;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    group: css`\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      margin-block-start: 12px;\n\n      transition: margin 200ms ease;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-start: -6px;\n        inset-inline: 0;\n\n        block-size: 1px;\n\n        opacity: 0;\n        background: ${cssVar.colorBorderSecondary};\n\n        transition: opacity 200ms ease;\n      }\n\n      &[data-level='0'][data-icon='true'] {\n        margin-block-start: 2px;\n      }\n\n      &:not([data-level='0']) {\n        margin-block-start: 6px;\n      }\n\n      [data-collapsed='true'] & + &[data-level='0'][data-icon='false']::before {\n        opacity: 1;\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-start: 0;\n\n        &::before {\n          opacity: 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n\n        &::before {\n          transition: none;\n        }\n      }\n    `,\n    groupHead: css`\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    `,\n    groupHeader: css`\n      cursor: pointer;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      min-block-size: 32px;\n      padding-inline: 10px;\n      border: none;\n      border-radius: ${cssVar.borderRadius};\n\n      font-size: ${cssVar.fontSizeSM};\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      text-align: start;\n      white-space: nowrap;\n\n      background: none;\n\n      &:hover,\n      &[data-active='true'] {\n        color: ${cssVar.colorText};\n      }\n\n      &[data-icon='true'] {\n        gap: 10px;\n        justify-content: flex-start;\n        min-block-size: 36px;\n        font-size: ${cssVar.fontSize};\n\n        > [role='img'] {\n          justify-content: center;\n          inline-size: 18px;\n        }\n      }\n\n      &[data-level='0'][data-icon='true']:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      /* Nested groups read as quiet subheadings with the indicator right after the label. */\n      &:not([data-level='0']) {\n        gap: 8px;\n        justify-content: flex-start;\n\n        min-block-size: 26px;\n\n        font-size: ${cssVar.fontSizeSM};\n        font-weight: 400;\n        color: ${cssVar.colorTextDescription};\n\n        > [data-label] {\n          flex: 0 1 auto;\n        }\n\n        &:hover,\n        &[data-active='true'] {\n          color: ${cssVar.colorTextSecondary};\n        }\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n    `,\n    groupItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-block-size: 0;\n    `,\n    groupPanel: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition: grid-template-rows 160ms ease;\n\n      > div {\n        overflow: hidden;\n      }\n\n      &[data-expanded='false'] {\n        grid-template-rows: 0fr;\n      }\n\n      &[data-instant='true'] {\n        transition: none;\n      }\n    `,\n    item: css`\n      position: relative;\n\n      display: flex;\n      gap: 10px;\n      align-items: center;\n\n      min-block-size: 36px;\n      padding-inline: 10px;\n      border-radius: ${cssVar.borderRadius};\n\n      color: ${cssVar.colorTextSecondary};\n      text-decoration: none;\n      white-space: nowrap;\n\n      transition:\n        background 120ms ease,\n        color 120ms ease;\n\n      &:hover {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        font-weight: 500;\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      &[data-indent='1'],\n      &[data-indent='2'] {\n        min-block-size: 32px;\n        color: ${cssVar.colorText};\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      [data-collapsed='true'] &:not([data-indent='0']) {\n        padding-inline-start: 10px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n\n      ${responsive.mobile} {\n        min-block-size: 44px;\n      }\n    `,\n    itemLabel: css`\n      overflow: hidden;\n      flex: 1;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n\n      [data-collapsed='true'] & {\n        text-overflow: clip;\n      }\n\n      ${railFade}\n    `,\n    nav: css`\n      /* Scroll anchoring would jump the list in one frame while rail rows fold and unfold. */\n      overflow-anchor: none;\n      scrollbar-width: thin;\n\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: 2px;\n\n      min-block-size: 0;\n      padding-block-end: 12px;\n      padding-inline: 8px;\n    `,\n    railLink: css`\n      position: absolute;\n      inset: 0;\n      border-radius: ${cssVar.borderRadius};\n      transition: background 120ms ease;\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      @starting-style {\n        background: transparent;\n      }\n    `,\n    topItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      transition:\n        margin 200ms ease,\n        padding 200ms ease,\n        border-color 200ms ease;\n\n      &[data-divided='true'] {\n        margin-block-end: 6px;\n        padding-block-end: 8px;\n        border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-end: 0;\n        padding-block-end: 0;\n        border-block-end-color: transparent;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,iBAAiB;CAExE,MAAM,WAAW;;;;;;;;;;;;CAajB,OAAO;EACL,OAAO,GAAG;;;;;;;mBAOK,OAAO,WAAW;;eAEtB,OAAO,WAAW;;;uCAGM,OAAO,WAAW;;QAEjD,SAAS;;EAEb,SAAS,GAAG;;;;;;;;;;;;;;;;;;;EAmBZ,WAAW,GAAG;;;;;;;;;;eAUH,OAAO,qBAAqB;;;;;;;;EAQvC,KAAK,GAAG;;;;;;;;;;oBAUQ,OAAO,WAAW;;;;;;;;;;;;EAYlC,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BT,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;sBAoBQ,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC9C,WAAW,GAAG;;;;;EAKd,aAAa,GAAG;;;;;;;;;;;uBAWG,OAAO,aAAa;;mBAExB,OAAO,WAAW;;eAEtB,OAAO,mBAAmB;;;;;;;;iBAQxB,OAAO,UAAU;;;;;;;qBAOb,OAAO,SAAS;;;;;;;;;sBASf,OAAO,kBAAkB;;;;;;;;;;qBAU1B,OAAO,WAAW;;iBAEtB,OAAO,qBAAqB;;;;;;;;mBAQ1B,OAAO,mBAAmB;;;;;;;;;;;;;;;;;EAiBzC,YAAY,GAAG;;;;;;EAMf,YAAY,GAAG;;;;;;;;;;;;;;;;;EAiBf,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;eAE5B,OAAO,mBAAmB;;;;;;;;;iBASxB,OAAO,UAAU;sBACZ,OAAO,kBAAkB;;;;;iBAK9B,OAAO,UAAU;sBACZ,OAAO,mBAAmB;;;;;;iBAM/B,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;QAoB1B,WAAW,OAAO;;;;EAItB,WAAW,GAAG;;;;;;;;;;QAUV,SAAS;;EAEb,KAAK,GAAG;;;;;;;;;;;;;;EAcR,UAAU,GAAG;;;uBAGM,OAAO,aAAa;;;;sBAIrB,OAAO,kBAAkB;;;;sBAIzB,OAAO,mBAAmB;;;;;;;EAO5C,UAAU,GAAG;;;;;;;;;;;;sCAYqB,OAAO,qBAAqB;;;;;;;;;;;;;CAahE;AACF,CAAC"}

package/es/dashboard/ConsoleShell/ConsoleBrand.mjs

@@ -5,15 +5,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/dashboard/ConsoleShell/ConsoleBrand.tsx
 function ConsoleBrand({ href = "/", label, logo, renderLink, title }) {
 	const shell = useConsoleShellState();
-	const collapsed = shell?.collapsed ?? false;
-	const lockup = title == null || title === false || title === "" ? logo : /* @__PURE__ */ jsxs("span", {
+	const content = title == null || title === false || title === "" ? logo : /* @__PURE__ */ jsxs("span", {
 		className: styles.brandLockup,
 		children: [logo, /* @__PURE__ */ jsx("span", {
 			className: styles.brandName,
 			children: title
 		})]
 	});
-	const content = collapsed ? logo : lockup;
 	const linkProps = {
 		"aria-label": label ?? (typeof title === "string" ? title : "Home"),
 		"children": content,

package/es/dashboard/ConsoleShell/ConsoleBrand.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConsoleBrand.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/ConsoleBrand.tsx"],"sourcesContent":["'use client';\n\nimport { useConsoleShellState } from './context';\nimport { styles } from './style';\nimport type { ConsoleBrandProps } from './type';\n\nfunction ConsoleBrand({ href = '/', label, logo, renderLink, title }: ConsoleBrandProps) {\n  const shell = useConsoleShellState();\n  const collapsed = shell?.collapsed ?? false;\n  const lockup =\n    title == null || title === false || title === '' ? (\n      logo\n    ) : (\n      <span className={styles.brandLockup}>\n        {logo}\n        <span className={styles.brandName}>{title}</span>\n      </span>\n    );\n  const content = collapsed ? logo : lockup;\n  const linkProps = {\n    'aria-label': label ?? (typeof title === 'string' ? title : 'Home'),\n    'children': content,\n    'className': styles.brandAnchor,\n    href,\n    'onClick': () => shell?.closeNavigation(),\n  };\n  if (renderLink) return renderLink(linkProps);\n  return (\n    <a\n      aria-label={linkProps['aria-label']}\n      className={linkProps.className}\n      href={href}\n      onClick={linkProps.onClick}\n    >\n      {content}\n    </a>\n  );\n}\n\nConsoleBrand.displayName = 'ConsoleBrand';\n\nexport default ConsoleBrand;\n"],"mappings":";;;;;AAMA,SAAS,aAAa,EAAE,OAAO,KAAK,OAAO,MAAM,YAAY,SAA4B;CACvF,MAAM,QAAQ,qBAAqB;CACnC,MAAM,YAAY,OAAO,aAAa;CACtC,MAAM,SACJ,SAAS,QAAQ,UAAU,SAAS,UAAU,KAC5C,OAEA,qBAAC,QAAD;EAAM,WAAW,OAAO;EAAxB,UAAA,CACG,MACD,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAY,UAAA;EAAY,CAAA,CAC5C;;CAEV,MAAM,UAAU,YAAY,OAAO;CACnC,MAAM,YAAY;EAChB,cAAc,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC5D,YAAY;EACZ,aAAa,OAAO;EACpB;EACA,iBAAiB,OAAO,gBAAgB;CAC1C;CACA,IAAI,YAAY,OAAO,WAAW,SAAS;CAC3C,OACE,oBAAC,KAAD;EACE,cAAY,UAAU;EACtB,WAAW,UAAU;EACf;EACN,SAAS,UAAU;EAElB,UAAA;CACA,CAAA;AAEP;AAEA,aAAa,cAAc"}
+{"version":3,"file":"ConsoleBrand.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/ConsoleBrand.tsx"],"sourcesContent":["'use client';\n\nimport { useConsoleShellState } from './context';\nimport { styles } from './style';\nimport type { ConsoleBrandProps } from './type';\n\nfunction ConsoleBrand({ href = '/', label, logo, renderLink, title }: ConsoleBrandProps) {\n  const shell = useConsoleShellState();\n  const content =\n    title == null || title === false || title === '' ? (\n      logo\n    ) : (\n      <span className={styles.brandLockup}>\n        {logo}\n        <span className={styles.brandName}>{title}</span>\n      </span>\n    );\n  const linkProps = {\n    'aria-label': label ?? (typeof title === 'string' ? title : 'Home'),\n    'children': content,\n    'className': styles.brandAnchor,\n    href,\n    'onClick': () => shell?.closeNavigation(),\n  };\n  if (renderLink) return renderLink(linkProps);\n  return (\n    <a\n      aria-label={linkProps['aria-label']}\n      className={linkProps.className}\n      href={href}\n      onClick={linkProps.onClick}\n    >\n      {content}\n    </a>\n  );\n}\n\nConsoleBrand.displayName = 'ConsoleBrand';\n\nexport default ConsoleBrand;\n"],"mappings":";;;;;AAMA,SAAS,aAAa,EAAE,OAAO,KAAK,OAAO,MAAM,YAAY,SAA4B;CACvF,MAAM,QAAQ,qBAAqB;CACnC,MAAM,UACJ,SAAS,QAAQ,UAAU,SAAS,UAAU,KAC5C,OAEA,qBAAC,QAAD;EAAM,WAAW,OAAO;EAAxB,UAAA,CACG,MACD,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAY,UAAA;EAAY,CAAA,CAC5C;;CAEV,MAAM,YAAY;EAChB,cAAc,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC5D,YAAY;EACZ,aAAa,OAAO;EACpB;EACA,iBAAiB,OAAO,gBAAgB;CAC1C;CACA,IAAI,YAAY,OAAO,WAAW,SAAS;CAC3C,OACE,oBAAC,KAAD;EACE,cAAY,UAAU;EACtB,WAAW,UAAU;EACf;EACN,SAAS,UAAU;EAElB,UAAA;CACA,CAAA;AAEP;AAEA,aAAa,cAAc"}

package/es/dashboard/ConsoleShell/style.mjs

@@ -1,7 +1,7 @@
 import { createStaticStyles } from "antd-style";
 //#region src/dashboard/ConsoleShell/style.ts
 const SIDEBAR_INLINE_SIZE = 248;
-const SIDEBAR_RAIL_INLINE_SIZE = 64;
+const SIDEBAR_RAIL_INLINE_SIZE = 54;
 const WORKSPACE_INSET = 8;
 /**
 * `responsive.laptop`, not `responsive.tablet`. The aliases are named for
@@ -15,19 +15,10 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
 
     block-size: 56px;
     margin-block-start: ${WORKSPACE_INSET}px;
-    padding-inline: 16px;
+    padding-inline: 15px;
 
     color: ${cssVar.colorText};
-
-    &[data-collapsed='true'] {
-      justify-content: center;
-      padding-inline: 0;
-
-      > * {
-        justify-content: center;
-        inline-size: auto;
-      }
-    }
+    white-space: nowrap;
 
     ${responsive.laptop} {
       margin-block-start: 0;
@@ -58,6 +49,18 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     color: ${cssVar.colorText};
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    transition: opacity 120ms ease 80ms;
+
+    [data-collapsed='true'] & {
+      text-overflow: clip;
+      opacity: 0;
+      transition-delay: 0s;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `,
 	main: css`
     overflow: auto;
@@ -102,6 +105,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     background: ${cssVar.colorBgLayout};
   `,
 	sidebar: css`
+    overflow: hidden;
     display: flex;
     flex: none;
     flex-direction: column;

package/es/dashboard/ConsoleShell/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst SIDEBAR_INLINE_SIZE = 248;\nconst SIDEBAR_RAIL_INLINE_SIZE = 64;\nconst WORKSPACE_INSET = 8;\n\n/**\n * `responsive.laptop`, not `responsive.tablet`. The aliases are named for\n * devices, and only `laptop` (max-width 991px) lines up with `useIsCompact`.\n */\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  brand: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n\n    block-size: 56px;\n    margin-block-start: ${WORKSPACE_INSET}px;\n    padding-inline: 16px;\n\n    color: ${cssVar.colorText};\n\n    &[data-collapsed='true'] {\n      justify-content: center;\n      padding-inline: 0;\n\n      > * {\n        justify-content: center;\n        inline-size: auto;\n      }\n    }\n\n    ${responsive.laptop} {\n      margin-block-start: 0;\n    }\n  `,\n  brandAnchor: css`\n    display: flex;\n    align-items: center;\n\n    inline-size: 100%;\n    min-inline-size: 0;\n\n    color: inherit;\n    text-decoration: none;\n  `,\n  brandLockup: css`\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    min-inline-size: 0;\n  `,\n  brandName: css`\n    overflow: hidden;\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  main: css`\n    overflow: auto;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 20px;\n\n    min-inline-size: 0;\n    min-block-size: 0;\n    padding: 24px;\n\n    /*\n     * A page that owns a full-height split sets data-page-layout=\"flush\" and\n     * takes over padding and scrolling, so its sidebar can sit on the card edge.\n     */\n    &:has([data-page-layout='flush']) {\n      overflow: hidden;\n      gap: 0;\n      padding: 0;\n    }\n\n    ${responsive.mobile} {\n      gap: 16px;\n      padding: 16px;\n    }\n  `,\n  navSlot: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-block-size: 0;\n  `,\n  shell: css`\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n\n    block-size: 100%;\n    min-block-size: 0;\n\n    background: ${cssVar.colorBgLayout};\n  `,\n  sidebar: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n\n    inline-size: ${SIDEBAR_INLINE_SIZE}px;\n    block-size: 100%;\n    min-block-size: 0;\n\n    transition: inline-size 200ms ease;\n\n    &[data-collapsed='true'] {\n      inline-size: ${SIDEBAR_RAIL_INLINE_SIZE}px;\n    }\n\n    &[data-instant='true'] {\n      transition: none;\n    }\n\n    ${responsive.laptop} {\n      display: none;\n    }\n  `,\n  sidebarBottom: css`\n    flex: none;\n    padding: 8px;\n  `,\n  skipLink: css`\n    position: fixed;\n    z-index: 2000;\n    inset-block-start: -100px;\n    inset-inline-start: 12px;\n\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n\n    &:focus {\n      inset-block-start: 12px;\n    }\n  `,\n  topbar: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n\n    block-size: 56px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  topbarDivider: css`\n    flex: none;\n\n    inline-size: 1px;\n    block-size: 18px;\n    margin-inline: 2px;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n  topbarMain: css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n    min-inline-size: 0;\n  `,\n  tools: css`\n    display: flex;\n    flex: none;\n    gap: 6px;\n    align-items: center;\n\n    margin-inline-start: auto;\n  `,\n  workspace: css`\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-inline-size: 0;\n    min-block-size: 0;\n    margin-block: ${WORKSPACE_INSET}px;\n    margin-inline: 0 ${WORKSPACE_INSET}px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    ${responsive.laptop} {\n      margin: 0;\n      border: none;\n      border-radius: 0;\n      box-shadow: none;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,sBAAsB;AAC5B,MAAM,2BAA2B;AACjC,MAAM,kBAAkB;;;;;AAMxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;0BAMc,gBAAgB;;;aAG7B,OAAO,UAAU;;;;;;;;;;;;MAYxB,WAAW,OAAO;;;;CAItB,aAAa,GAAG;;;;;;;;;;CAUhB,aAAa,GAAG;;;;;;CAMhB,WAAW,GAAG;;;;;;aAMH,OAAO,UAAU;;;;CAI5B,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;MAqBL,WAAW,OAAO;;;;;CAKtB,SAAS,GAAG;;;;;;CAMZ,OAAO,GAAG;;;;;;;;kBAQM,OAAO,cAAc;;CAErC,SAAS,GAAG;;;;;mBAKK,oBAAoB;;;;;;;qBAOlB,yBAAyB;;;;;;;MAOxC,WAAW,OAAO;;;;CAItB,eAAe,GAAG;;;;CAIlB,UAAU,GAAG;;;;;;;;qBAQM,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;CAMvC,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;;kBAOF,OAAO,qBAAqB;;CAE5C,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;;;;CAQV,WAAW,GAAG;;;;;;;;oBAQI,gBAAgB;uBACb,gBAAgB;wBACf,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;kBAEzB,OAAO,iBAAiB;kBACxB,OAAO,kBAAkB;;MAErC,WAAW,OAAO;;;;;;;AAOxB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst SIDEBAR_INLINE_SIZE = 248;\n// Twice the nav icon inset (8px nav padding + 10px item padding) plus the 18px icon, so the icons\n// land centered on the rail without moving sideways.\nconst SIDEBAR_RAIL_INLINE_SIZE = 54;\nconst WORKSPACE_INSET = 8;\n\n/**\n * `responsive.laptop`, not `responsive.tablet`. The aliases are named for\n * devices, and only `laptop` (max-width 991px) lines up with `useIsCompact`.\n */\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  brand: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n\n    block-size: 56px;\n    margin-block-start: ${WORKSPACE_INSET}px;\n    padding-inline: 15px;\n\n    color: ${cssVar.colorText};\n    white-space: nowrap;\n\n    ${responsive.laptop} {\n      margin-block-start: 0;\n    }\n  `,\n  brandAnchor: css`\n    display: flex;\n    align-items: center;\n\n    inline-size: 100%;\n    min-inline-size: 0;\n\n    color: inherit;\n    text-decoration: none;\n  `,\n  brandLockup: css`\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    min-inline-size: 0;\n  `,\n  brandName: css`\n    overflow: hidden;\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    transition: opacity 120ms ease 80ms;\n\n    [data-collapsed='true'] & {\n      text-overflow: clip;\n      opacity: 0;\n      transition-delay: 0s;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `,\n  main: css`\n    overflow: auto;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 20px;\n\n    min-inline-size: 0;\n    min-block-size: 0;\n    padding: 24px;\n\n    /*\n     * A page that owns a full-height split sets data-page-layout=\"flush\" and\n     * takes over padding and scrolling, so its sidebar can sit on the card edge.\n     */\n    &:has([data-page-layout='flush']) {\n      overflow: hidden;\n      gap: 0;\n      padding: 0;\n    }\n\n    ${responsive.mobile} {\n      gap: 16px;\n      padding: 16px;\n    }\n  `,\n  navSlot: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-block-size: 0;\n  `,\n  shell: css`\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n\n    block-size: 100%;\n    min-block-size: 0;\n\n    background: ${cssVar.colorBgLayout};\n  `,\n  sidebar: css`\n    overflow: hidden;\n    display: flex;\n    flex: none;\n    flex-direction: column;\n\n    inline-size: ${SIDEBAR_INLINE_SIZE}px;\n    block-size: 100%;\n    min-block-size: 0;\n\n    transition: inline-size 200ms ease;\n\n    &[data-collapsed='true'] {\n      inline-size: ${SIDEBAR_RAIL_INLINE_SIZE}px;\n    }\n\n    &[data-instant='true'] {\n      transition: none;\n    }\n\n    ${responsive.laptop} {\n      display: none;\n    }\n  `,\n  sidebarBottom: css`\n    flex: none;\n    padding: 8px;\n  `,\n  skipLink: css`\n    position: fixed;\n    z-index: 2000;\n    inset-block-start: -100px;\n    inset-inline-start: 12px;\n\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n\n    &:focus {\n      inset-block-start: 12px;\n    }\n  `,\n  topbar: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n\n    block-size: 56px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  topbarDivider: css`\n    flex: none;\n\n    inline-size: 1px;\n    block-size: 18px;\n    margin-inline: 2px;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n  topbarMain: css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n    min-inline-size: 0;\n  `,\n  tools: css`\n    display: flex;\n    flex: none;\n    gap: 6px;\n    align-items: center;\n\n    margin-inline-start: auto;\n  `,\n  workspace: css`\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-inline-size: 0;\n    min-block-size: 0;\n    margin-block: ${WORKSPACE_INSET}px;\n    margin-inline: 0 ${WORKSPACE_INSET}px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    ${responsive.laptop} {\n      margin: 0;\n      border: none;\n      border-radius: 0;\n      box-shadow: none;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,sBAAsB;AAG5B,MAAM,2BAA2B;AACjC,MAAM,kBAAkB;;;;;AAMxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;0BAMc,gBAAgB;;;aAG7B,OAAO,UAAU;;;MAGxB,WAAW,OAAO;;;;CAItB,aAAa,GAAG;;;;;;;;;;CAUhB,aAAa,GAAG;;;;;;CAMhB,WAAW,GAAG;;;;;;aAMH,OAAO,UAAU;;;;;;;;;;;;;;;;CAgB5B,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;MAqBL,WAAW,OAAO;;;;;CAKtB,SAAS,GAAG;;;;;;CAMZ,OAAO,GAAG;;;;;;;;kBAQM,OAAO,cAAc;;CAErC,SAAS,GAAG;;;;;;mBAMK,oBAAoB;;;;;;;qBAOlB,yBAAyB;;;;;;;MAOxC,WAAW,OAAO;;;;CAItB,eAAe,GAAG;;;;CAIlB,UAAU,GAAG;;;;;;;;qBAQM,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;CAMvC,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;;kBAOF,OAAO,qBAAqB;;CAE5C,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;;;;CAQV,WAAW,GAAG;;;;;;;;oBAQI,gBAAgB;uBACb,gBAAgB;wBACf,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;kBAEzB,OAAO,iBAAiB;kBACxB,OAAO,kBAAkB;;MAErC,WAAW,OAAO;;;;;;;AAOxB,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.50.2",
+  "version": "5.50.3",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",