@lobehub/ui 6.0.0-beta.4 → 6.0.0-beta.6

package/es/dashboard/ChartGrid/ChartGrid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartGrid.mjs","names":[],"sources":["../../../src/dashboard/ChartGrid/ChartGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ChartGridProps } from './type';\n\n/** Peer charts and ranked lists, two-up, one column below 640px. Not for label/value rows. */\nconst ChartGrid = ({ children, className }: ChartGridProps) => (\n  <div {...stylex.props(styles.frame)}>\n    <div {...styleProps(styles.root, className)}>{children}</div>\n  </div>\n);\n\nChartGrid.displayName = 'ChartGrid';\n\nexport default ChartGrid;\n"],"mappings":";;;;;;;AAQA,MAAM,aAAa,EACjB,UACA,gBACoB,oBAAC,OAAD;CAAK,GAAI,OAAO,MAAM,OAAO,KAAK;CACpD,UAAA,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,SAAS;EAAI;CAAc,CAAA;AACzD,CAAA;AACP,UAAU,cAAc"}

package/es/dashboard/ChartGrid/index.d.mts

@@ -0,0 +1,3 @@
+import { ChartGridProps } from "./type.mjs";
+import ChartGrid from "./ChartGrid.mjs";
+export { type ChartGridProps, ChartGrid as default };

package/es/dashboard/ChartGrid/style.mjs

@@ -0,0 +1,18 @@
+//#region src/dashboard/ChartGrid/style.ts
+const styles = {
+	frame: {
+		k9g6sI: "lb12h1iku",
+		$$css: true
+	},
+	root: {
+		kOIVth: "lbou54vl",
+		kGNEyG: "lb1qjc9v5",
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lbnby9oq lb91szb2 lb43xpz4 lbb8zp9c",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ChartGrid/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  /**\n   * The frame is the container. A query on the grid itself would not see its own width.\n   * Charts stay two-up so a trend and its switch stay readable; one child does not\n   * stretch across the page.\n   */\n  frame: {\n    containerType: 'inline-size',\n  },\n  root: {\n    gap: 16,\n    alignItems: 'stretch',\n    display: 'grid',\n    gridTemplateColumns: {\n      'default': 'repeat(2, minmax(0, 1fr))',\n      ':has(> :only-child)': 'minmax(0, min(100%, 560px))',\n      '@container (max-width: 640px)': {\n        'default': 'minmax(0, 1fr)',\n        ':has(> :only-child)': 'minmax(0, min(100%, 560px))',\n      },\n    },\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/dashboard/ChartGrid/type.d.mts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+//#region src/dashboard/ChartGrid/type.d.ts
+export interface ChartGridProps {
+  children?: ReactNode;
+  className?: string;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/ConsoleNav/Skeleton.d.mts

@@ -0,0 +1,15 @@
+import { ConsoleNavSkeletonProps } from "./type.mjs";
+//#region src/dashboard/ConsoleNav/Skeleton.d.ts
+/**
+ * Placeholder for `ConsoleNav` while the session or menu loads. Rows use the nav's own item,
+ * group header and indent metrics, so swapping in the real nav does not shift anything.
+ */
+declare function ConsoleNavSkeleton({ className, groups, items }: ConsoleNavSkeletonProps): import("react").JSX.Element;
+declare namespace ConsoleNavSkeleton {
+  var displayName: string;
+}
+/** Footer placeholder matching an account row: avatar plus name. */
+export declare function ConsoleFooterSkeleton(): import("react").JSX.Element;
+//#endregion
+export { ConsoleNavSkeleton as default };
+//# sourceMappingURL=Skeleton.d.mts.map

package/es/dashboard/ConsoleNav/Skeleton.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import Skeleton from "../../Skeleton/index.mjs";
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/dashboard/ConsoleNav/Skeleton.tsx
+const DEFAULT_GROUPS = [
+	3,
+	6,
+	4,
+	3
+];
+const Row = ({ group, index }) => /* @__PURE__ */ jsxs("div", {
+	"data-indent": 0,
+	...stylex.props(styles.item, styles.skeletonRow),
+	children: [/* @__PURE__ */ jsx(Skeleton, {
+		height: 16,
+		radius: 4,
+		width: 16
+	}), /* @__PURE__ */ jsx(Skeleton, {
+		height: 14,
+		radius: 4,
+		width: 56 + (index + group) % 3 * 20
+	})]
+});
+/**
+* Placeholder for `ConsoleNav` while the session or menu loads. Rows use the nav's own item,
+* group header and indent metrics, so swapping in the real nav does not shift anything.
+*/
+function ConsoleNavSkeleton({ className, groups = DEFAULT_GROUPS, items = 1 }) {
+	const counts = groups.map((group) => typeof group === "number" ? group : group.items?.length ?? 0);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		"data-console-nav-skeleton": "",
+		...styleProps(styles.nav, className),
+		children: [Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx(Row, {
+			group: 0,
+			index
+		}, index)), counts.map((count, group) => /* @__PURE__ */ jsxs("div", {
+			...stylex.props(styles.skeletonGroup),
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-level": 0,
+				...stylex.props(styles.groupHeader, styles.skeletonRow),
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					height: 12,
+					radius: 4,
+					width: 64 + group % 2 * 16
+				})
+			}), Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx("div", {
+				"data-indent": 1,
+				...stylex.props(styles.item, styles.itemIndented, styles.itemIndent1, styles.skeletonRow),
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					height: 14,
+					radius: 4,
+					width: 56 + (index + group) % 3 * 20
+				})
+			}, index))]
+		}, group))]
+	});
+}
+ConsoleNavSkeleton.displayName = "ConsoleNavSkeleton";
+/** Footer placeholder matching an account row: avatar plus name. */
+function ConsoleFooterSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		...stylex.props(styles.skeletonFooter),
+		children: [/* @__PURE__ */ jsx(Skeleton, {
+			height: 32,
+			radius: 16,
+			width: 32
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			height: 14,
+			radius: 4,
+			width: 96
+		})]
+	});
+}
+//#endregion
+export { ConsoleFooterSkeleton, ConsoleNavSkeleton as default };
+
+//# sourceMappingURL=Skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport Skeleton from '@/Skeleton';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ConsoleNavGroup, ConsoleNavSkeletonProps } from './type';\n\nconst DEFAULT_GROUPS = [3, 6, 4, 3];\n\nconst Row = ({ group, index }: { group: number; index: number }) => (\n  <div data-indent={0} {...stylex.props(styles.item, styles.skeletonRow)}>\n    <Skeleton height={16} radius={4} width={16} />\n    <Skeleton height={14} radius={4} width={56 + ((index + group) % 3) * 20} />\n  </div>\n);\n\n/**\n * Placeholder for `ConsoleNav` while the session or menu loads. Rows use the nav's own item,\n * group header and indent metrics, so swapping in the real nav does not shift anything.\n */\nfunction ConsoleNavSkeleton({\n  className,\n  groups = DEFAULT_GROUPS,\n  items = 1,\n}: ConsoleNavSkeletonProps) {\n  const counts = groups.map((group: number | ConsoleNavGroup) =>\n    typeof group === 'number' ? group : (group.items?.length ?? 0),\n  );\n  return (\n    <div aria-hidden data-console-nav-skeleton=\"\" {...styleProps(styles.nav, className)}>\n      {Array.from({ length: items }, (_, index) => (\n        <Row group={0} index={index} key={index} />\n      ))}\n      {counts.map((count, group) => (\n        <div key={group} {...stylex.props(styles.skeletonGroup)}>\n          <div data-level={0} {...stylex.props(styles.groupHeader, styles.skeletonRow)}>\n            <Skeleton height={12} radius={4} width={64 + (group % 2) * 16} />\n          </div>\n          {Array.from({ length: count }, (_, index) => (\n            <div\n              data-indent={1}\n              key={index}\n              {...stylex.props(\n                styles.item,\n                styles.itemIndented,\n                styles.itemIndent1,\n                styles.skeletonRow,\n              )}\n            >\n              <Skeleton height={14} radius={4} width={56 + ((index + group) % 3) * 20} />\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nConsoleNavSkeleton.displayName = 'ConsoleNavSkeleton';\n\n/** Footer placeholder matching an account row: avatar plus name. */\nexport function ConsoleFooterSkeleton() {\n  return (\n    <div aria-hidden {...stylex.props(styles.skeletonFooter)}>\n      <Skeleton height={32} radius={16} width={32} />\n      <Skeleton height={14} radius={4} width={96} />\n    </div>\n  );\n}\n\nexport default ConsoleNavSkeleton;\n"],"mappings":";;;;;;;AAOA,MAAM,iBAAiB;CAAC;CAAG;CAAG;CAAG;AAAC;AAClC,MAAM,OAAO,EACX,OACA,YAII,qBAAC,OAAD;CAAK,eAAa;CAAG,GAAI,OAAO,MAAM,OAAO,MAAM,OAAO,WAAW;CAArE,UAAA,CACF,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,GAC7C,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO,MAAM,QAAQ,SAAS,IAAI;CAAK,CAAA,CACrE;;;;;;AAMP,SAAS,mBAAmB,EAC1B,WACA,SAAS,gBACT,QAAQ,KACkB;CAC1B,MAAM,SAAS,OAAO,KAAK,UAAoC,OAAO,UAAU,WAAW,QAAQ,MAAM,OAAO,UAAU,CAAC;CAC3H,OAAO,qBAAC,OAAD;EAAK,eAAA;EAAY,6BAA0B;EAAG,GAAI,WAAW,OAAO,KAAK,SAAS;EAAlF,UAAA,CACF,MAAM,KAAK,EACZ,QAAQ,MACV,IAAI,GAAG,UAAU,oBAAC,KAAD;GAAK,OAAO;GAAU;EAAoB,GAAR,KAAQ,CAAC,GACzD,OAAO,KAAK,OAAO,UAAU,qBAAC,OAAD;GAAiB,GAAI,OAAO,MAAM,OAAO,aAAa;GAAtD,UAAA,CAC1B,oBAAC,OAAD;IAAK,cAAY;IAAG,GAAI,OAAO,MAAM,OAAO,aAAa,OAAO,WAAW;IACzE,UAAA,oBAAC,UAAD;KAAU,QAAQ;KAAI,QAAQ;KAAG,OAAO,KAAK,QAAQ,IAAI;IAAK,CAAA;GAC3D,CAAA,GACJ,MAAM,KAAK,EACd,QAAQ,MACV,IAAI,GAAG,UAAU,oBAAC,OAAD;IAAK,eAAa;IAAe,GAAI,OAAO,MAAM,OAAO,MAAM,OAAO,cAAc,OAAO,aAAa,OAAO,WAAW;IACnI,UAAA,oBAAC,UAAD;KAAU,QAAQ;KAAI,QAAQ;KAAG,OAAO,MAAM,QAAQ,SAAS,IAAI;IAAK,CAAA;GACrE,GAFgC,KAEhC,CAAC,CACL;EATiC,GAAA,KASjC,CAAC,CACL;;AACT;AACA,mBAAmB,cAAc;;AAGjC,SAAgB,wBAAwB;CACtC,OAAO,qBAAC,OAAD;EAAK,eAAA;EAAY,GAAI,OAAO,MAAM,OAAO,cAAc;EAAvD,UAAA,CACH,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAI,OAAO;EAAK,CAAA,GAC9C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAO;EAAK,CAAA,CAC1C;;AACT"}

package/es/dashboard/ConsoleNav/index.d.mts

@@ -1,4 +1,5 @@
-import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps } from "./type.mjs";
+import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps, ConsoleNavSkeletonProps } from "./type.mjs";
 import { resolveActiveHref } from "./active.mjs";
 import ConsoleNav from "./ConsoleNav.mjs";
-export { type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleNav as default, resolveActiveHref };
+import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "./Skeleton.mjs";
+export { ConsoleFooterSkeleton, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleNavSkeleton, type ConsoleNavSkeletonProps, ConsoleNav as default, resolveActiveHref };

package/es/dashboard/ConsoleNav/style.mjs

@@ -291,6 +291,24 @@ const styles = {
 		kWkggS: "lbjjy28o",
 		$$css: true
 	},
+	skeletonFooter: {
+		kOIVth: "lb883omv",
+		kg3NbH: "lbfn1xvj",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	skeletonGroup: {
+		kOIVth: "lb195vfkc",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		keoZOQ: "lb14vqqas",
+		$$css: true
+	},
+	skeletonRow: {
+		kfzvcC: "lb47corl",
+		$$css: true
+	},
 	topItems: {
 		kOIVth: "lb195vfkc",
 		kmkexE: "lbn0nhwh lb9kvfbb",

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const styles = stylex.create({\n  badge: {\n    borderRadius: 999,\n    flex: 'none',\n    paddingInline: 6,\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorError} 12%, transparent)`,\n    color: cssVar.colorError,\n    fontSize: cssVar.fontSizeSM,\n    fontVariantNumeric: 'tabular-nums',\n    minInlineSize: 20,\n    textAlign: 'center',\n  },\n  chevron: {\n    flex: 'none',\n    transition: {\n      default: 'transform 160ms ease, opacity 120ms ease 80ms',\n      [reducedMotion]: 'none',\n    },\n  },\n  chevronFolded: {\n    transform: 'rotate(-90deg)',\n  },\n  dot: {\n    borderRadius: 999,\n    transition: { default: 'opacity 120ms ease', [reducedMotion]: 'none' },\n    backgroundColor: cssVar.colorError,\n    blockSize: 7,\n    inlineSize: 7,\n    insetBlockStart: 7,\n    insetInlineEnd: 9,\n    opacity: 0,\n    position: 'absolute',\n  },\n  dotRail: {\n    opacity: 1,\n  },\n  fold: {\n    transition: {\n      default: 'grid-template-rows 200ms ease, margin 200ms ease, opacity 120ms ease',\n      [reducedMotion]: 'none',\n    },\n    display: 'grid',\n    gridTemplateRows: '1fr',\n  },\n  foldBody: {\n    overflow: 'hidden',\n    minBlockSize: 0,\n  },\n  folded: {\n    gridTemplateRows: '0fr',\n    marginBlockStart: { 'default': null, ':not(:first-child)': -2 },\n    opacity: 0,\n  },\n  group: {\n    'transition': { default: 'margin 200ms ease', [reducedMotion]: 'none' },\n    'display': 'flex',\n    'flexDirection': 'column',\n    'marginBlockStart': 12,\n    'position': 'relative',\n    '::before': {\n      insetInline: 0,\n      transition: { default: 'opacity 200ms ease', [reducedMotion]: 'none' },\n      backgroundColor: cssVar.colorBorderSecondary,\n      blockSize: 1,\n      content: '\"\"',\n      insetBlockStart: -6,\n      opacity: 0,\n      position: 'absolute',\n    },\n  },\n  groupDivider: {\n    '::before': {\n      opacity: 1,\n    },\n  },\n  groupHead: {\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n  },\n  groupHeader: {\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    gap: 8,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'flex',\n    fontSize: cssVar.fontSizeSM,\n    fontWeight: 500,\n    justifyContent: 'space-between',\n    minBlockSize: 32,\n    paddingInlineEnd: 10,\n    paddingInlineStart: 10,\n    textAlign: 'start',\n    whiteSpace: 'nowrap',\n  },\n  groupHeaderActive: {\n    color: cssVar.colorText,\n  },\n  groupHeaderIcon: {\n    gap: 10,\n    fontSize: cssVar.fontSize,\n    justifyContent: 'flex-start',\n    minBlockSize: 36,\n  },\n  groupHeaderIndent1: {\n    paddingInlineStart: 38,\n  },\n  groupHeaderIndent2: {\n    paddingInlineStart: 56,\n  },\n  groupHeaderNested: {\n    gap: 8,\n    color: { 'default': cssVar.colorTextDescription, ':hover': cssVar.colorTextSecondary },\n    fontSize: cssVar.fontSizeSM,\n    fontWeight: 400,\n    justifyContent: 'flex-start',\n    minBlockSize: 26,\n  },\n  groupHeaderNestedActive: {\n    color: cssVar.colorTextSecondary,\n  },\n  groupHeaderRailIcon: {\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillTertiary },\n  },\n  groupItems: {\n    gap: 2,\n    overflow: 'hidden',\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n  },\n  groupLabelNested: {\n    flexBasis: 'auto',\n    flexGrow: '0',\n    flexShrink: '1',\n  },\n  groupLevelIcon: {\n    marginBlockStart: 2,\n  },\n  groupNested: {\n    marginBlockStart: 6,\n  },\n  groupPanel: {\n    transition: 'grid-template-rows 160ms ease',\n    display: 'grid',\n    gridTemplateRows: '1fr',\n  },\n  groupPanelCollapsed: {\n    gridTemplateRows: '0fr',\n  },\n  groupPanelInstant: {\n    transition: 'none',\n  },\n  groupRailEmpty: {\n    marginBlockStart: 0,\n  },\n  headerIcon: {\n    flex: 'none',\n    display: 'flex',\n  },\n  headerIconWide: {\n    inlineSize: 18,\n    justifyContent: 'center',\n  },\n  indicator: {\n    flex: 'none',\n    transition: 'transform 160ms ease',\n    alignItems: 'center',\n    color: cssVar.colorTextDescription,\n    display: 'flex',\n    justifyContent: 'center',\n    marginInlineStart: -6,\n    height: 18,\n    width: 18,\n  },\n  indicatorExpanded: {\n    transform: 'rotate(90deg)',\n  },\n  item: {\n    borderRadius: cssVar.borderRadius,\n    gap: 10,\n    textDecoration: 'none',\n    transition: 'background 120ms ease, color 120ms ease',\n    alignItems: 'center',\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    display: 'flex',\n    minBlockSize: { default: 36, [media.mobile]: 44 },\n    paddingInlineEnd: 10,\n    paddingInlineStart: 10,\n    position: 'relative',\n    whiteSpace: 'nowrap',\n  },\n  itemActive: {\n    backgroundColor: cssVar.colorFillSecondary,\n    color: cssVar.colorText,\n    fontWeight: 500,\n  },\n  itemIndent1: {\n    paddingInlineStart: 38,\n  },\n  itemIndent2: {\n    paddingInlineStart: 56,\n  },\n  itemIndented: {\n    color: cssVar.colorText,\n    minBlockSize: 32,\n  },\n  itemLabel: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  itemLabelRail: {\n    textOverflow: 'clip',\n  },\n  itemRailIndent: {\n    paddingInlineStart: 10,\n  },\n  nav: {\n    flex: '1',\n    gap: 2,\n    paddingInline: 8,\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n    overflowAnchor: 'none',\n    paddingBlockEnd: 12,\n    scrollbarWidth: 'thin',\n  },\n  navIcon: {\n    flex: 'none',\n    display: 'flex',\n  },\n  railFade: {\n    transition: { default: 'opacity 120ms ease 80ms', [reducedMotion]: 'none' },\n  },\n  railFaded: {\n    opacity: 0,\n    transitionDelay: '0s',\n  },\n  railLink: {\n    inset: 0,\n    borderRadius: cssVar.borderRadius,\n    transition: 'background 120ms ease',\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n    position: 'absolute',\n  },\n  railLinkActive: {\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n  topItems: {\n    gap: 2,\n    transition: {\n      default: 'margin 200ms ease, padding 200ms ease, border-color 200ms ease',\n      [reducedMotion]: 'none',\n    },\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  topItemsDivided: {\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    marginBlockEnd: 6,\n    paddingBlockEnd: 8,\n  },\n  topItemsRailEmpty: {\n    borderBlockEndColor: 'transparent',\n    marginBlockEnd: 0,\n    paddingBlockEnd: 0,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const styles = stylex.create({\n  badge: {\n    borderRadius: 999,\n    flex: 'none',\n    paddingInline: 6,\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorError} 12%, transparent)`,\n    color: cssVar.colorError,\n    fontSize: cssVar.fontSizeSM,\n    fontVariantNumeric: 'tabular-nums',\n    minInlineSize: 20,\n    textAlign: 'center',\n  },\n  chevron: {\n    flex: 'none',\n    transition: {\n      default: 'transform 160ms ease, opacity 120ms ease 80ms',\n      [reducedMotion]: 'none',\n    },\n  },\n  chevronFolded: {\n    transform: 'rotate(-90deg)',\n  },\n  dot: {\n    borderRadius: 999,\n    transition: { default: 'opacity 120ms ease', [reducedMotion]: 'none' },\n    backgroundColor: cssVar.colorError,\n    blockSize: 7,\n    inlineSize: 7,\n    insetBlockStart: 7,\n    insetInlineEnd: 9,\n    opacity: 0,\n    position: 'absolute',\n  },\n  dotRail: {\n    opacity: 1,\n  },\n  fold: {\n    transition: {\n      default: 'grid-template-rows 200ms ease, margin 200ms ease, opacity 120ms ease',\n      [reducedMotion]: 'none',\n    },\n    display: 'grid',\n    gridTemplateRows: '1fr',\n  },\n  foldBody: {\n    overflow: 'hidden',\n    minBlockSize: 0,\n  },\n  folded: {\n    gridTemplateRows: '0fr',\n    marginBlockStart: { 'default': null, ':not(:first-child)': -2 },\n    opacity: 0,\n  },\n  group: {\n    'transition': { default: 'margin 200ms ease', [reducedMotion]: 'none' },\n    'display': 'flex',\n    'flexDirection': 'column',\n    'marginBlockStart': 12,\n    'position': 'relative',\n    '::before': {\n      insetInline: 0,\n      transition: { default: 'opacity 200ms ease', [reducedMotion]: 'none' },\n      backgroundColor: cssVar.colorBorderSecondary,\n      blockSize: 1,\n      content: '\"\"',\n      insetBlockStart: -6,\n      opacity: 0,\n      position: 'absolute',\n    },\n  },\n  groupDivider: {\n    '::before': {\n      opacity: 1,\n    },\n  },\n  groupHead: {\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n  },\n  groupHeader: {\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    gap: 8,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'flex',\n    fontSize: cssVar.fontSizeSM,\n    fontWeight: 500,\n    justifyContent: 'space-between',\n    minBlockSize: 32,\n    paddingInlineEnd: 10,\n    paddingInlineStart: 10,\n    textAlign: 'start',\n    whiteSpace: 'nowrap',\n  },\n  groupHeaderActive: {\n    color: cssVar.colorText,\n  },\n  groupHeaderIcon: {\n    gap: 10,\n    fontSize: cssVar.fontSize,\n    justifyContent: 'flex-start',\n    minBlockSize: 36,\n  },\n  groupHeaderIndent1: {\n    paddingInlineStart: 38,\n  },\n  groupHeaderIndent2: {\n    paddingInlineStart: 56,\n  },\n  groupHeaderNested: {\n    gap: 8,\n    color: { 'default': cssVar.colorTextDescription, ':hover': cssVar.colorTextSecondary },\n    fontSize: cssVar.fontSizeSM,\n    fontWeight: 400,\n    justifyContent: 'flex-start',\n    minBlockSize: 26,\n  },\n  groupHeaderNestedActive: {\n    color: cssVar.colorTextSecondary,\n  },\n  groupHeaderRailIcon: {\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillTertiary },\n  },\n  groupItems: {\n    gap: 2,\n    overflow: 'hidden',\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n  },\n  groupLabelNested: {\n    flexBasis: 'auto',\n    flexGrow: '0',\n    flexShrink: '1',\n  },\n  groupLevelIcon: {\n    marginBlockStart: 2,\n  },\n  groupNested: {\n    marginBlockStart: 6,\n  },\n  groupPanel: {\n    transition: 'grid-template-rows 160ms ease',\n    display: 'grid',\n    gridTemplateRows: '1fr',\n  },\n  groupPanelCollapsed: {\n    gridTemplateRows: '0fr',\n  },\n  groupPanelInstant: {\n    transition: 'none',\n  },\n  groupRailEmpty: {\n    marginBlockStart: 0,\n  },\n  headerIcon: {\n    flex: 'none',\n    display: 'flex',\n  },\n  headerIconWide: {\n    inlineSize: 18,\n    justifyContent: 'center',\n  },\n  indicator: {\n    flex: 'none',\n    transition: 'transform 160ms ease',\n    alignItems: 'center',\n    color: cssVar.colorTextDescription,\n    display: 'flex',\n    justifyContent: 'center',\n    marginInlineStart: -6,\n    height: 18,\n    width: 18,\n  },\n  indicatorExpanded: {\n    transform: 'rotate(90deg)',\n  },\n  item: {\n    borderRadius: cssVar.borderRadius,\n    gap: 10,\n    textDecoration: 'none',\n    transition: 'background 120ms ease, color 120ms ease',\n    alignItems: 'center',\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    display: 'flex',\n    minBlockSize: { default: 36, [media.mobile]: 44 },\n    paddingInlineEnd: 10,\n    paddingInlineStart: 10,\n    position: 'relative',\n    whiteSpace: 'nowrap',\n  },\n  itemActive: {\n    backgroundColor: cssVar.colorFillSecondary,\n    color: cssVar.colorText,\n    fontWeight: 500,\n  },\n  itemIndent1: {\n    paddingInlineStart: 38,\n  },\n  itemIndent2: {\n    paddingInlineStart: 56,\n  },\n  itemIndented: {\n    color: cssVar.colorText,\n    minBlockSize: 32,\n  },\n  itemLabel: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  itemLabelRail: {\n    textOverflow: 'clip',\n  },\n  itemRailIndent: {\n    paddingInlineStart: 10,\n  },\n  nav: {\n    flex: '1',\n    gap: 2,\n    paddingInline: 8,\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n    overflowAnchor: 'none',\n    paddingBlockEnd: 12,\n    scrollbarWidth: 'thin',\n  },\n  navIcon: {\n    flex: 'none',\n    display: 'flex',\n  },\n  railFade: {\n    transition: { default: 'opacity 120ms ease 80ms', [reducedMotion]: 'none' },\n  },\n  railFaded: {\n    opacity: 0,\n    transitionDelay: '0s',\n  },\n  railLink: {\n    inset: 0,\n    borderRadius: cssVar.borderRadius,\n    transition: 'background 120ms ease',\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n    position: 'absolute',\n  },\n  railLinkActive: {\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n  skeletonFooter: {\n    gap: 10,\n    paddingInline: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  skeletonGroup: {\n    gap: 2,\n    display: 'flex',\n    flexDirection: 'column',\n    marginBlockStart: 12,\n  },\n  skeletonRow: {\n    pointerEvents: 'none',\n  },\n  topItems: {\n    gap: 2,\n    transition: {\n      default: 'margin 200ms ease, padding 200ms ease, border-color 200ms ease',\n      [reducedMotion]: 'none',\n    },\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  topItemsDivided: {\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    marginBlockEnd: 6,\n    paddingBlockEnd: 8,\n  },\n  topItemsRailEmpty: {\n    borderBlockEndColor: 'transparent',\n    marginBlockEnd: 0,\n    paddingBlockEnd: 0,\n  },\n});\n"],"mappings":"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"}

package/es/dashboard/ConsoleNav/type.d.mts

@@ -66,5 +66,18 @@ export interface ConsoleNavProps {
   /** Persists which groups were opened or closed by hand. */
   storageKey?: string;
 }
+export interface ConsoleNavSkeletonProps {
+  className?: string;
+  /**
+   * Rows per group. Pass counts, or the real `ConsoleNavGroup[]` to mirror its item counts.
+   * @default [3, 6, 4, 3]
+   */
+  groups?: Array<number | ConsoleNavGroup>;
+  /**
+   * Ungrouped rows before the groups.
+   * @default 1
+   */
+  items?: number;
+}
 //#endregion
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/ConsoleShell/ConsoleShell.d.mts

@@ -1,6 +1,6 @@
 import { ConsoleShellProps } from "./type.mjs";
 //#region src/dashboard/ConsoleShell/ConsoleShell.d.ts
-declare function ConsoleShell({ brand, breadcrumb, children, className, collapsed, collapseLabel, defaultCollapsed, expandLabel, footer, hotkey, navigation, onCollapsedChange, openNavigationLabel, skipToContentLabel, storageKey, style, tools, ...rest }: ConsoleShellProps): import("react").JSX.Element;
+declare function ConsoleShell({ brand, breadcrumb, children, className, collapsed, closeNavigationLabel, collapseLabel, defaultCollapsed, expandLabel, footer: footerProp, loading, loadingContent, loadingNavigation, hotkey, navigation: navigationProp, onCollapsedChange, openNavigationLabel, skipToContentLabel, storageKey, style, tools, ...rest }: ConsoleShellProps): import("react").JSX.Element;
 declare namespace ConsoleShell {
   var displayName: string;
 }

package/es/dashboard/ConsoleShell/ConsoleShell.mjs

@@ -2,25 +2,36 @@
 import { styleProps } from "../../styles/stylex/props.mjs";
 import Button from "../../Button/Button.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
 import Drawer from "../../Drawer/Drawer.mjs";
 import { ConsoleShellContext } from "./context.mjs";
 import { useIsCompact, useLocalStorage, usePrefersReducedMotion } from "../hooks.mjs";
+import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "../ConsoleNav/Skeleton.mjs";
 import { consoleBrandMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
+import PageLoading from "../PageSkeleton/PageSkeleton.mjs";
 import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
-import { PanelLeft } from "lucide-react";
+import { PanelLeft, X } from "lucide-react";
 //#region src/dashboard/ConsoleShell/ConsoleShell.tsx
+const drawerBodyStyle = {
+	minBlockSize: "100%",
+	padding: 0
+};
 function isTypingTarget(target) {
 	if (!(target instanceof HTMLElement)) return false;
 	const tag = target.tagName;
 	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
 }
-function ConsoleShell({ brand, breadcrumb, children, className, collapsed, collapseLabel = "Collapse sidebar", defaultCollapsed = false, expandLabel = "Expand sidebar", footer, hotkey = true, navigation, onCollapsedChange, openNavigationLabel = "Open navigation", skipToContentLabel = "Skip to content", storageKey, style, tools, ...rest }) {
+function ConsoleShell({ brand, breadcrumb, children, className, collapsed, closeNavigationLabel = "Close navigation", collapseLabel = "Collapse sidebar", defaultCollapsed = false, expandLabel = "Expand sidebar", footer: footerProp, loading, loadingContent, loadingNavigation, hotkey = true, navigation: navigationProp, onCollapsedChange, openNavigationLabel = "Open navigation", skipToContentLabel = "Skip to content", storageKey, style, tools, ...rest }) {
+	const navigation = loading ? loadingNavigation ?? /* @__PURE__ */ jsx(ConsoleNavSkeleton, {}) : navigationProp;
+	const footer = loading ? /* @__PURE__ */ jsx(ConsoleFooterSkeleton, {}) : footerProp;
+	const body = loading ? loadingContent ?? /* @__PURE__ */ jsx(PageLoading, {}) : children;
 	const mainId = `console-main-${useId().replaceAll(":", "")}`;
 	const shellRef = useRef(null);
 	const isCompact = useIsCompact();
+	const { isDarkMode } = useThemeMode();
 	const reducedMotion = usePrefersReducedMotion();
 	const [storedCollapsed, setStoredCollapsed] = useLocalStorage(storageKey, defaultCollapsed);
 	const [drawerOpen, setDrawerOpen] = useState(false);
@@ -63,10 +74,16 @@ function ConsoleShell({ brand, breadcrumb, children, className, collapsed, colla
 	const sidebar = (rail) => /* @__PURE__ */ jsxs(ConsoleShellContext, {
 		value: stateFor(rail),
 		children: [
-			brand ? /* @__PURE__ */ jsx("div", {
+			brand || isCompact ? /* @__PURE__ */ jsxs("div", {
 				"data-collapsed": rail,
 				...stylex.props(styles.brand, consoleBrandMarker),
-				children: brand
+				children: [brand, isCompact ? /* @__PURE__ */ jsx(Button, {
+					"aria-label": closeNavigationLabel,
+					className: stylex.props(styles.brandClose).className,
+					icon: X,
+					type: "text",
+					onClick: closeNavigation
+				}) : null]
 			}) : null,
 			navigation ? /* @__PURE__ */ jsx("div", {
 				...stylex.props(styles.navSlot),
@@ -102,8 +119,10 @@ function ConsoleShell({ brand, breadcrumb, children, className, collapsed, colla
 			}),
 			isCompact ? /* @__PURE__ */ jsx(Drawer, {
 				noHeader: true,
+				closable: false,
 				open: drawerOpen,
 				placement: "left",
+				styles: { bodyContent: drawerBodyStyle },
 				width: 272,
 				onClose: closeNavigation,
 				children: /* @__PURE__ */ jsx(FlexBasic_default, {
@@ -112,7 +131,7 @@ function ConsoleShell({ brand, breadcrumb, children, className, collapsed, colla
 				})
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
-				...stylex.props(styles.workspace),
+				...stylex.props(styles.workspace, !isDarkMode && styles.workspaceLight),
 				children: [/* @__PURE__ */ jsxs("header", {
 					...stylex.props(styles.topbar),
 					children: [
@@ -136,10 +155,11 @@ function ConsoleShell({ brand, breadcrumb, children, className, collapsed, colla
 						}) : null
 					]
 				}), /* @__PURE__ */ jsx("main", {
+					"aria-busy": loading || void 0,
 					id: mainId,
 					tabIndex: -1,
 					...stylex.props(styles.main),
-					children
+					children: body
 				})]
 			})
 		]

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

@@ -1 +1 @@
-{"version":3,"file":"ConsoleShell.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/ConsoleShell/ConsoleShell.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { PanelLeft } from 'lucide-react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport Button from '@/Button';\nimport { Drawer } from '@/Drawer';\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useIsCompact, useLocalStorage, usePrefersReducedMotion } from '../hooks';\nimport { ConsoleShellContext } from './context';\nimport { consoleBrandMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { ConsoleShellProps, ConsoleShellState } from './type';\n\nfunction isTypingTarget(target: EventTarget | null) {\n  if (!(target instanceof HTMLElement)) return false;\n  const tag = target.tagName;\n  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;\n}\n\nfunction ConsoleShell({\n  brand,\n  breadcrumb,\n  children,\n  className,\n  collapsed,\n  collapseLabel = 'Collapse sidebar',\n  defaultCollapsed = false,\n  expandLabel = 'Expand sidebar',\n  footer,\n  hotkey = true,\n  navigation,\n  onCollapsedChange,\n  openNavigationLabel = 'Open navigation',\n  skipToContentLabel = 'Skip to content',\n  storageKey,\n  style,\n  tools,\n  ...rest\n}: ConsoleShellProps) {\n  const mainId = `console-main-${useId().replaceAll(':', '')}`;\n  const shellRef = useRef<HTMLDivElement>(null);\n  const isCompact = useIsCompact();\n  const reducedMotion = usePrefersReducedMotion();\n  const [storedCollapsed, setStoredCollapsed] = useLocalStorage(storageKey, defaultCollapsed);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const isControlled = collapsed !== undefined;\n  const railCollapsed = isControlled ? collapsed : storedCollapsed;\n  const railed = railCollapsed && !isCompact;\n\n  const setCollapsed = (next: boolean) => {\n    if (!isControlled) setStoredCollapsed(next);\n    onCollapsedChange?.(next);\n  };\n\n  const closeNavigation = () => setDrawerOpen(false);\n  const toggleNavigation = () => {\n    if (isCompact) {\n      setDrawerOpen((open) => !open);\n      return;\n    }\n    setCollapsed(!railCollapsed);\n  };\n  const toggleRef = useRef(toggleNavigation);\n  toggleRef.current = toggleNavigation;\n\n  useEffect(() => {\n    if (!hotkey) return;\n    const node = shellRef.current;\n    if (!node) return;\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() !== 'b' || !(event.metaKey || event.ctrlKey) || event.altKey) {\n        return;\n      }\n      if (event.repeat || isTypingTarget(event.target)) return;\n      if (!node.contains(event.target as Node)) return;\n      event.preventDefault();\n      toggleRef.current();\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [hotkey]);\n\n  const stateFor = (rail: boolean): ConsoleShellState => ({\n    closeNavigation,\n    collapsed: rail,\n    compact: isCompact,\n  });\n\n  const sidebar = (rail: boolean) => (\n    <ConsoleShellContext value={stateFor(rail)}>\n      {brand ? (\n        <div data-collapsed={rail} {...stylex.props(styles.brand, consoleBrandMarker)}>\n          {brand}\n        </div>\n      ) : null}\n      {navigation ? <div {...stylex.props(styles.navSlot)}>{navigation}</div> : null}\n      {footer ? <div {...stylex.props(styles.sidebarBottom)}>{footer}</div> : null}\n    </ConsoleShellContext>\n  );\n\n  const toggleLabel = isCompact ? openNavigationLabel : railed ? expandLabel : collapseLabel;\n\n  return (\n    <div\n      data-console-shell=\"\"\n      ref={shellRef}\n      {...styleProps(styles.shell, className, style)}\n      {...rest}\n    >\n      <a\n        href={`#${mainId}`}\n        onClick={(event) => {\n          event.preventDefault();\n          document.getElementById(mainId)?.focus();\n        }}\n        {...stylex.props(styles.skipLink)}\n      >\n        {skipToContentLabel}\n      </a>\n      <aside\n        data-collapsed={railed}\n        data-instant={reducedMotion}\n        {...stylex.props(\n          styles.sidebar,\n          railed && styles.sidebarCollapsed,\n          reducedMotion && styles.sidebarInstant,\n        )}\n      >\n        {!isCompact && sidebar(railed)}\n      </aside>\n      {isCompact ? (\n        <Drawer noHeader open={drawerOpen} placement=\"left\" width={272} onClose={closeNavigation}>\n          <Flexbox height=\"100%\">{sidebar(false)}</Flexbox>\n        </Drawer>\n      ) : null}\n      <div {...stylex.props(styles.workspace)}>\n        <header {...stylex.props(styles.topbar)}>\n          <Button\n            aria-label={toggleLabel}\n            icon={PanelLeft}\n            type=\"text\"\n            onClick={toggleNavigation}\n          />\n          <span aria-hidden {...stylex.props(styles.topbarDivider)} />\n          <div {...stylex.props(styles.topbarMain)}>{breadcrumb}</div>\n          {tools ? <div {...stylex.props(styles.tools)}>{tools}</div> : null}\n        </header>\n        <main id={mainId} tabIndex={-1} {...stylex.props(styles.main)}>\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n}\n\nConsoleShell.displayName = 'ConsoleShell';\n\nexport default ConsoleShell;\n"],"mappings":"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"}
+{"version":3,"file":"ConsoleShell.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/ConsoleShell/ConsoleShell.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { PanelLeft, X } from 'lucide-react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport Button from '@/Button';\nimport { Drawer } from '@/Drawer';\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport ConsoleNavSkeleton, { ConsoleFooterSkeleton } from '../ConsoleNav/Skeleton';\nimport { useIsCompact, useLocalStorage, usePrefersReducedMotion } from '../hooks';\nimport PageLoading from '../PageSkeleton';\nimport { ConsoleShellContext } from './context';\nimport { consoleBrandMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { ConsoleShellProps, ConsoleShellState } from './type';\n\n// The drawer body is the scroll container. Without its default padding the scrollbar sits on\n// the panel edge; the brand row, nav and footer keep their own insets.\nconst drawerBodyStyle = { minBlockSize: '100%', padding: 0 };\n\nfunction isTypingTarget(target: EventTarget | null) {\n  if (!(target instanceof HTMLElement)) return false;\n  const tag = target.tagName;\n  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;\n}\n\nfunction ConsoleShell({\n  brand,\n  breadcrumb,\n  children,\n  className,\n  collapsed,\n  closeNavigationLabel = 'Close navigation',\n  collapseLabel = 'Collapse sidebar',\n  defaultCollapsed = false,\n  expandLabel = 'Expand sidebar',\n  footer: footerProp,\n  loading,\n  loadingContent,\n  loadingNavigation,\n  hotkey = true,\n  navigation: navigationProp,\n  onCollapsedChange,\n  openNavigationLabel = 'Open navigation',\n  skipToContentLabel = 'Skip to content',\n  storageKey,\n  style,\n  tools,\n  ...rest\n}: ConsoleShellProps) {\n  const navigation = loading ? (loadingNavigation ?? <ConsoleNavSkeleton />) : navigationProp;\n  const footer = loading ? <ConsoleFooterSkeleton /> : footerProp;\n  const body = loading ? (loadingContent ?? <PageLoading />) : children;\n  const mainId = `console-main-${useId().replaceAll(':', '')}`;\n  const shellRef = useRef<HTMLDivElement>(null);\n  const isCompact = useIsCompact();\n  const { isDarkMode } = useThemeMode();\n  const reducedMotion = usePrefersReducedMotion();\n  const [storedCollapsed, setStoredCollapsed] = useLocalStorage(storageKey, defaultCollapsed);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const isControlled = collapsed !== undefined;\n  const railCollapsed = isControlled ? collapsed : storedCollapsed;\n  const railed = railCollapsed && !isCompact;\n\n  const setCollapsed = (next: boolean) => {\n    if (!isControlled) setStoredCollapsed(next);\n    onCollapsedChange?.(next);\n  };\n\n  const closeNavigation = () => setDrawerOpen(false);\n  const toggleNavigation = () => {\n    if (isCompact) {\n      setDrawerOpen((open) => !open);\n      return;\n    }\n    setCollapsed(!railCollapsed);\n  };\n  const toggleRef = useRef(toggleNavigation);\n  toggleRef.current = toggleNavigation;\n\n  useEffect(() => {\n    if (!hotkey) return;\n    const node = shellRef.current;\n    if (!node) return;\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() !== 'b' || !(event.metaKey || event.ctrlKey) || event.altKey) {\n        return;\n      }\n      if (event.repeat || isTypingTarget(event.target)) return;\n      if (!node.contains(event.target as Node)) return;\n      event.preventDefault();\n      toggleRef.current();\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [hotkey]);\n\n  const stateFor = (rail: boolean): ConsoleShellState => ({\n    closeNavigation,\n    collapsed: rail,\n    compact: isCompact,\n  });\n\n  const sidebar = (rail: boolean) => (\n    <ConsoleShellContext value={stateFor(rail)}>\n      {brand || isCompact ? (\n        <div data-collapsed={rail} {...stylex.props(styles.brand, consoleBrandMarker)}>\n          {brand}\n          {isCompact ? (\n            // In the drawer the close button sits in the brand row's flow, so it never\n            // overlaps a brand switcher the way the drawer's floating close button did.\n            <Button\n              aria-label={closeNavigationLabel}\n              className={stylex.props(styles.brandClose).className}\n              icon={X}\n              type=\"text\"\n              onClick={closeNavigation}\n            />\n          ) : null}\n        </div>\n      ) : null}\n      {navigation ? <div {...stylex.props(styles.navSlot)}>{navigation}</div> : null}\n      {footer ? <div {...stylex.props(styles.sidebarBottom)}>{footer}</div> : null}\n    </ConsoleShellContext>\n  );\n\n  const toggleLabel = isCompact ? openNavigationLabel : railed ? expandLabel : collapseLabel;\n\n  return (\n    <div\n      data-console-shell=\"\"\n      ref={shellRef}\n      {...styleProps(styles.shell, className, style)}\n      {...rest}\n    >\n      <a\n        href={`#${mainId}`}\n        onClick={(event) => {\n          event.preventDefault();\n          document.getElementById(mainId)?.focus();\n        }}\n        {...stylex.props(styles.skipLink)}\n      >\n        {skipToContentLabel}\n      </a>\n      <aside\n        data-collapsed={railed}\n        data-instant={reducedMotion}\n        {...stylex.props(\n          styles.sidebar,\n          railed && styles.sidebarCollapsed,\n          reducedMotion && styles.sidebarInstant,\n        )}\n      >\n        {!isCompact && sidebar(railed)}\n      </aside>\n      {isCompact ? (\n        <Drawer\n          noHeader\n          closable={false}\n          open={drawerOpen}\n          placement=\"left\"\n          styles={{ bodyContent: drawerBodyStyle }}\n          width={272}\n          onClose={closeNavigation}\n        >\n          <Flexbox height=\"100%\">{sidebar(false)}</Flexbox>\n        </Drawer>\n      ) : null}\n      <div {...stylex.props(styles.workspace, !isDarkMode && styles.workspaceLight)}>\n        <header {...stylex.props(styles.topbar)}>\n          <Button\n            aria-label={toggleLabel}\n            icon={PanelLeft}\n            type=\"text\"\n            onClick={toggleNavigation}\n          />\n          <span aria-hidden {...stylex.props(styles.topbarDivider)} />\n          <div {...stylex.props(styles.topbarMain)}>{breadcrumb}</div>\n          {tools ? <div {...stylex.props(styles.tools)}>{tools}</div> : null}\n        </header>\n        <main\n          aria-busy={loading || undefined}\n          id={mainId}\n          tabIndex={-1}\n          {...stylex.props(styles.main)}\n        >\n          {body}\n        </main>\n      </div>\n    </div>\n  );\n}\n\nConsoleShell.displayName = 'ConsoleShell';\n\nexport default ConsoleShell;\n"],"mappings":"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"}

package/es/dashboard/ConsoleShell/style.mjs

@@ -15,6 +15,12 @@ const styles = {
 		khDVqt: "lbuxw1ft",
 		$$css: true
 	},
+	brandClose: {
+		kUk6DE: "lb1okw0bk",
+		k71WvV: "lbrqqxx7",
+		keTefX: "lbvc5jky",
+		$$css: true
+	},
 	brandAnchor: {
 		kybGjl: "lb1hl2dhg",
 		kGNEyG: "lb6s0dn4",
@@ -142,6 +148,10 @@ const styles = {
 		keTefX: "lbvc5jky",
 		$$css: true
 	},
+	workspaceLight: {
+		kWkggS: "lb8ezckp",
+		$$css: true
+	},
 	workspace: {
 		kVAM5u: "lb10cypdb lb1sbdsi5",
 		kaIpWk: "lb1ndkxwp lbc7dp1m",

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nimport { consoleBrandMarker } from './marker.stylex';\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\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst flushPage = ':has([data-page-layout=\"flush\"])';\n\n/**\n * `media.laptop`, not `media.tablet`. The aliases are named for\n * devices, and only `laptop` (max-width 991px) lines up with `useIsCompact`.\n */\nexport const styles = stylex.create({\n  brand: {\n    flex: 'none',\n    paddingInline: 15,\n    alignItems: 'center',\n    blockSize: 56,\n    color: cssVar.colorText,\n    display: 'flex',\n    marginBlockStart: { default: WORKSPACE_INSET, [media.laptop]: 0 },\n    whiteSpace: 'nowrap',\n  },\n  brandAnchor: {\n    textDecoration: 'none',\n    alignItems: 'center',\n    color: 'inherit',\n    display: 'flex',\n    inlineSize: '100%',\n    minInlineSize: 0,\n  },\n  brandLockup: {\n    gap: 10,\n    alignItems: 'center',\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  brandName: {\n    overflow: 'hidden',\n    transition: { default: 'opacity 120ms ease 80ms', [reducedMotion]: 'none' },\n    color: cssVar.colorText,\n    fontSize: 14,\n    fontWeight: 600,\n    lineHeight: 1.3,\n    opacity: {\n      default: null,\n      [stylex.when.ancestor('[data-collapsed=\"true\"]', consoleBrandMarker)]: 0,\n    },\n    textOverflow: {\n      default: 'ellipsis',\n      [stylex.when.ancestor('[data-collapsed=\"true\"]', consoleBrandMarker)]: 'clip',\n    },\n    transitionDelay: {\n      default: null,\n      [stylex.when.ancestor('[data-collapsed=\"true\"]', consoleBrandMarker)]: '0s',\n    },\n    whiteSpace: 'nowrap',\n  },\n  main: {\n    padding: {\n      default: 24,\n      [flushPage]: 0,\n      [media.mobile]: { default: 16, [flushPage]: 0 },\n    },\n    flex: '1',\n    gap: {\n      default: 20,\n      [flushPage]: 0,\n      [media.mobile]: { default: 16, [flushPage]: 0 },\n    },\n    overflow: { default: 'auto', [flushPage]: 'hidden' },\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n    minInlineSize: 0,\n  },\n  navSlot: {\n    flex: '1',\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n  },\n  shell: {\n    flex: '1',\n    overflow: 'hidden',\n    backgroundColor: cssVar.colorBgLayout,\n    blockSize: '100%',\n    display: 'flex',\n    minBlockSize: 0,\n  },\n  sidebar: {\n    flex: 'none',\n    overflow: 'hidden',\n    transition: 'inline-size 200ms ease',\n    blockSize: '100%',\n    display: { default: 'flex', [media.laptop]: 'none' },\n    flexDirection: 'column',\n    inlineSize: SIDEBAR_INLINE_SIZE,\n    minBlockSize: 0,\n  },\n  sidebarCollapsed: {\n    inlineSize: SIDEBAR_RAIL_INLINE_SIZE,\n  },\n  sidebarInstant: {\n    transition: 'none',\n  },\n  sidebarBottom: {\n    padding: 8,\n    flex: 'none',\n  },\n  skipLink: {\n    borderRadius: cssVar.borderRadius,\n    paddingBlock: 8,\n    paddingInline: 12,\n    backgroundColor: cssVar.colorBgElevated,\n    color: cssVar.colorText,\n    insetBlockStart: { 'default': -100, ':focus': 12 },\n    insetInlineStart: 12,\n    position: 'fixed',\n    zIndex: 2000,\n  },\n  topbar: {\n    flex: 'none',\n    gap: 8,\n    paddingInline: 12,\n    alignItems: 'center',\n    blockSize: 56,\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    display: 'flex',\n  },\n  topbarDivider: {\n    flex: 'none',\n    marginInline: 2,\n    backgroundColor: cssVar.colorBorderSecondary,\n    blockSize: 18,\n    inlineSize: 1,\n  },\n  topbarMain: {\n    flex: '1',\n    alignItems: 'center',\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  tools: {\n    flex: 'none',\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    marginInlineStart: 'auto',\n  },\n  workspace: {\n    borderColor: { default: cssVar.colorBorderSecondary, [media.laptop]: 'currentcolor' },\n    borderRadius: { default: cssVar.borderRadiusLG, [media.laptop]: 0 },\n    borderStyle: { default: 'solid', [media.laptop]: 'none' },\n    borderWidth: { default: 1, [media.laptop]: 'medium' },\n    flex: '1',\n    marginBlock: { default: WORKSPACE_INSET, [media.laptop]: 0 },\n    marginInline: { default: `0 ${WORKSPACE_INSET}px`, [media.laptop]: 0 },\n    overflow: 'hidden',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: { default: cssVar.boxShadowTertiary, [media.laptop]: 'none' },\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n    minInlineSize: 0,\n  },\n});\n"],"mappings":";;;;;AAmBA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nimport { consoleBrandMarker } from './marker.stylex';\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\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst flushPage = ':has([data-page-layout=\"flush\"])';\n\n/**\n * `media.laptop`, not `media.tablet`. The aliases are named for\n * devices, and only `laptop` (max-width 991px) lines up with `useIsCompact`.\n */\nexport const styles = stylex.create({\n  brand: {\n    flex: 'none',\n    paddingInline: 15,\n    alignItems: 'center',\n    blockSize: 56,\n    color: cssVar.colorText,\n    display: 'flex',\n    marginBlockStart: { default: WORKSPACE_INSET, [media.laptop]: 0 },\n    whiteSpace: 'nowrap',\n  },\n  /** Close button in the drawer's brand row: right edge, vertically centred with the brand. */\n  brandClose: {\n    flex: 'none',\n    marginInlineEnd: '-7px',\n    marginInlineStart: 'auto',\n  },\n  brandAnchor: {\n    textDecoration: 'none',\n    alignItems: 'center',\n    color: 'inherit',\n    display: 'flex',\n    inlineSize: '100%',\n    minInlineSize: 0,\n  },\n  brandLockup: {\n    gap: 10,\n    alignItems: 'center',\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  brandName: {\n    overflow: 'hidden',\n    transition: { default: 'opacity 120ms ease 80ms', [reducedMotion]: 'none' },\n    color: cssVar.colorText,\n    fontSize: 14,\n    fontWeight: 600,\n    lineHeight: 1.3,\n    opacity: {\n      default: null,\n      [stylex.when.ancestor('[data-collapsed=\"true\"]', consoleBrandMarker)]: 0,\n    },\n    textOverflow: {\n      default: 'ellipsis',\n      [stylex.when.ancestor('[data-collapsed=\"true\"]', consoleBrandMarker)]: 'clip',\n    },\n    transitionDelay: {\n      default: null,\n      [stylex.when.ancestor('[data-collapsed=\"true\"]', consoleBrandMarker)]: '0s',\n    },\n    whiteSpace: 'nowrap',\n  },\n  main: {\n    padding: {\n      default: 24,\n      [flushPage]: 0,\n      [media.mobile]: { default: 16, [flushPage]: 0 },\n    },\n    flex: '1',\n    gap: {\n      default: 20,\n      [flushPage]: 0,\n      [media.mobile]: { default: 16, [flushPage]: 0 },\n    },\n    overflow: { default: 'auto', [flushPage]: 'hidden' },\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n    minInlineSize: 0,\n  },\n  navSlot: {\n    flex: '1',\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n  },\n  shell: {\n    flex: '1',\n    overflow: 'hidden',\n    backgroundColor: cssVar.colorBgLayout,\n    blockSize: '100%',\n    display: 'flex',\n    minBlockSize: 0,\n  },\n  sidebar: {\n    flex: 'none',\n    overflow: 'hidden',\n    transition: 'inline-size 200ms ease',\n    blockSize: '100%',\n    display: { default: 'flex', [media.laptop]: 'none' },\n    flexDirection: 'column',\n    inlineSize: SIDEBAR_INLINE_SIZE,\n    minBlockSize: 0,\n  },\n  sidebarCollapsed: {\n    inlineSize: SIDEBAR_RAIL_INLINE_SIZE,\n  },\n  sidebarInstant: {\n    transition: 'none',\n  },\n  sidebarBottom: {\n    padding: 8,\n    flex: 'none',\n  },\n  skipLink: {\n    borderRadius: cssVar.borderRadius,\n    paddingBlock: 8,\n    paddingInline: 12,\n    backgroundColor: cssVar.colorBgElevated,\n    color: cssVar.colorText,\n    insetBlockStart: { 'default': -100, ':focus': 12 },\n    insetInlineStart: 12,\n    position: 'fixed',\n    zIndex: 2000,\n  },\n  topbar: {\n    flex: 'none',\n    gap: 8,\n    paddingInline: 12,\n    alignItems: 'center',\n    blockSize: 56,\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    display: 'flex',\n  },\n  topbarDivider: {\n    flex: 'none',\n    marginInline: 2,\n    backgroundColor: cssVar.colorBorderSecondary,\n    blockSize: 18,\n    inlineSize: 1,\n  },\n  topbarMain: {\n    flex: '1',\n    alignItems: 'center',\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  tools: {\n    flex: 'none',\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    marginInlineStart: 'auto',\n  },\n  /** Light only: the content area sits midway between the layout canvas and container white. */\n  workspaceLight: {\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorBgLayout} 50%, ${cssVar.colorBgContainer})`,\n  },\n  workspace: {\n    borderColor: { default: cssVar.colorBorderSecondary, [media.laptop]: 'currentcolor' },\n    borderRadius: { default: cssVar.borderRadiusLG, [media.laptop]: 0 },\n    borderStyle: { default: 'solid', [media.laptop]: 'none' },\n    borderWidth: { default: 1, [media.laptop]: 'medium' },\n    flex: '1',\n    marginBlock: { default: WORKSPACE_INSET, [media.laptop]: 0 },\n    marginInline: { default: `0 ${WORKSPACE_INSET}px`, [media.laptop]: 0 },\n    overflow: 'hidden',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: { default: cssVar.boxShadowTertiary, [media.laptop]: 'none' },\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n    minInlineSize: 0,\n  },\n});\n"],"mappings":";;;;;AAmBA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/dashboard/ConsoleShell/type.d.mts

@@ -38,6 +38,8 @@ export interface ConsoleShellProps extends Omit<HTMLAttributes<HTMLDivElement>,
   /** Location shown in the top bar, usually a `Breadcrumb`. */
   breadcrumb?: ReactNode;
   children?: ReactNode;
+  /** Accessible name of the close button in the compact navigation drawer. */
+  closeNavigationLabel?: string;
   /** Collapse the sidebar to an icon rail. Ignored while compact. */
   collapsed?: boolean;
   collapseLabel?: string;
@@ -50,6 +52,15 @@ export interface ConsoleShellProps extends Omit<HTMLAttributes<HTMLDivElement>,
    * @default true
    */
   hotkey?: boolean;
+  /**
+   * Swap navigation and footer for skeletons, and render `loadingContent` (default `PageLoading`)
+   * in place of children. Brand, tools and `storageKey` still come from the caller.
+   */
+  loading?: boolean;
+  /** Body while `loading`. Defaults to `<PageLoading />`. */
+  loadingContent?: ReactNode;
+  /** Skeleton nav shape while `loading`. Pass the real groups to mirror their row counts. */
+  loadingNavigation?: ReactNode;
   /** Grouped navigation. Collapsed state comes from the shell. */
   navigation?: ReactNode;
   onCollapsedChange?: (collapsed: boolean) => void;

package/es/dashboard/FilterSidebar/FilterSidebar.mjs

@@ -3,10 +3,10 @@ import { styleProps } from "../../styles/stylex/props.mjs";
 import Button from "../../Button/Button.mjs";
 import Drawer from "../../Drawer/Drawer.mjs";
 import DraggablePanel from "../../DraggablePanel/DraggablePanel.mjs";
-import { styles } from "../Surface/style.mjs";
+import { useSurfaceCardStyles } from "../Surface/link.mjs";
 import { useIsCompact, useLocalStorage } from "../hooks.mjs";
 import { FilterSplitProvider } from "./context.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { clampSidebarWidth, sidebarWidth } from "./width.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -37,6 +37,7 @@ function usePageSidebar(wide, storageKey) {
 	};
 }
 function FilterSidebar({ body, children, flush, head, header, label, storageKey, summary, wide }) {
+	const cardStyles = useSurfaceCardStyles();
 	const isCompact = useIsCompact();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	const sidebar = usePageSidebar(wide, storageKey);
@@ -44,7 +45,7 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 	if (isCompact) return /* @__PURE__ */ jsx(FilterSplitProvider, {
 		active: !flush,
 		children: /* @__PURE__ */ jsxs("div", {
-			...stylex.props(styles$1.layout),
+			...stylex.props(styles.layout),
 			children: [
 				header,
 				/* @__PURE__ */ jsx(Button, {
@@ -60,12 +61,12 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 					width: 300,
 					onClose: close,
 					children: /* @__PURE__ */ jsxs("div", {
-						...stylex.props(styles$1.drawerPanel),
+						...stylex.props(styles.drawerPanel),
 						children: [head?.(close), body(close)]
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
-					...styleProps(styles$1.content, contentClassName),
+					...styleProps(styles.content, contentClassName),
 					children
 				})
 			]
@@ -74,7 +75,7 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 	return /* @__PURE__ */ jsx(FilterSplitProvider, {
 		active: !flush,
 		children: /* @__PURE__ */ jsxs("div", {
-			...stylex.props(styles$1.layout, flush ? styles$1.layoutFlush : [styles.card, styles$1.layoutSplit]),
+			...stylex.props(styles.layout, flush ? styles.layoutFlush : [cardStyles, styles.layoutSplit]),
 			"data-flush": flush ? true : void 0,
 			"data-page-layout": flush ? "flush" : void 0,
 			"data-split-card": flush ? void 0 : true,
@@ -82,7 +83,7 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 				expandable: true,
 				showHandleWhenCollapsed: true,
 				"aria-label": label,
-				className: stylex.props(styles$1.sidebar, flush && styles$1.sidebarFlush).className,
+				className: stylex.props(styles.sidebar, flush && styles.sidebarFlush).className,
 				collapseThreshold: sidebarWidth.collapse,
 				"data-flush": flush ? true : void 0,
 				defaultSize: { width: wide ? sidebarWidth.wide : sidebarWidth.narrow },
@@ -93,20 +94,20 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 				placement: "left",
 				showBorder: false,
 				size: { width: sidebar.width },
-				classNames: { content: stylex.props(styles$1.panel, !flush && styles$1.panelSplit).className },
+				classNames: { content: stylex.props(styles.panel, !flush && styles.panelSplit).className },
 				onExpandChange: sidebar.onExpandChange,
 				onSizeChange: (_delta, size) => sidebar.onSizeChange(size),
 				children: [head ? /* @__PURE__ */ jsx("div", {
-					...stylex.props(styles$1.head),
+					...stylex.props(styles.head),
 					children: head(close)
 				}) : null, /* @__PURE__ */ jsx("div", {
 					"data-flush": flush ? true : void 0,
-					...stylex.props(styles$1.body, flush && styles$1.bodyFlush),
+					...stylex.props(styles.body, flush && styles.bodyFlush),
 					children: body(close)
 				})]
 			}), /* @__PURE__ */ jsxs("div", {
 				"data-flush": flush ? true : void 0,
-				...styleProps([styles$1.content, flush ? styles$1.contentFlush : styles$1.contentSplit], contentClassName),
+				...styleProps([styles.content, flush ? styles.contentFlush : styles.contentSplit], contentClassName),
 				children: [header, children]
 			})]
 		})
@@ -115,12 +116,12 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 FilterSidebar.displayName = "FilterSidebar";
 function FilterRow({ count, name }) {
 	return /* @__PURE__ */ jsxs("span", {
-		...stylex.props(styles$1.row),
+		...stylex.props(styles.row),
 		children: [/* @__PURE__ */ jsx("span", {
-			...stylex.props(styles$1.name),
+			...stylex.props(styles.name),
 			children: name
 		}), count !== void 0 ? /* @__PURE__ */ jsx("span", {
-			...stylex.props(styles$1.count),
+			...stylex.props(styles.count),
 			children: count
 		}) : null]
 	});
@@ -133,15 +134,15 @@ function FilterOption({ count, icon, label, name, onClick, selected, title }) {
 		title,
 		type: "button",
 		onClick,
-		...stylex.props(styles$1.option),
+		...stylex.props(styles.option),
 		children: [
 			icon,
 			/* @__PURE__ */ jsx("span", {
-				...stylex.props(styles$1.name),
+				...stylex.props(styles.name),
 				children: name
 			}),
 			count !== void 0 ? /* @__PURE__ */ jsx("span", {
-				...stylex.props(styles$1.count),
+				...stylex.props(styles.count),
 				children: count
 			}) : null
 		]