@lobehub/ui 5.59.0 → 5.61.0

package/es/dashboard/AuthTools/style.mjs

@@ -0,0 +1,63 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/AuthTools/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	locale: css`
+    && {
+      inline-size: fit-content;
+      min-inline-size: 120px;
+      block-size: 28px;
+      border-radius: 28px;
+
+      background: ${cssVar.colorBgLayout};
+    }
+  `,
+	localeIcon: css`
+    margin-inline-end: 2px;
+  `,
+	theme: css`
+    && {
+      block-size: 28px;
+      padding: 2px;
+      border-radius: 28px;
+    }
+  `,
+	themeIcon: css`
+    inline-size: 16px;
+    block-size: 16px;
+  `,
+	themeIndicator: css`
+    && {
+      border-radius: 22px;
+    }
+  `,
+	themeItem: css`
+    && {
+      block-size: 22px;
+      padding-inline: 8px;
+      border-radius: 22px;
+    }
+  `,
+	themeLabel: css`
+    position: absolute;
+
+    overflow: hidden;
+
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    border: 0;
+
+    white-space: nowrap;
+
+    clip-path: inset(50%);
+  `,
+	toolRow: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthTools/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  locale: css`\n    && {\n      inline-size: fit-content;\n      min-inline-size: 120px;\n      block-size: 28px;\n      border-radius: 28px;\n\n      background: ${cssVar.colorBgLayout};\n    }\n  `,\n  localeIcon: css`\n    margin-inline-end: 2px;\n  `,\n  theme: css`\n    && {\n      block-size: 28px;\n      padding: 2px;\n      border-radius: 28px;\n    }\n  `,\n  themeIcon: css`\n    inline-size: 16px;\n    block-size: 16px;\n  `,\n  themeIndicator: css`\n    && {\n      border-radius: 22px;\n    }\n  `,\n  themeItem: css`\n    && {\n      block-size: 22px;\n      padding-inline: 8px;\n      border-radius: 22px;\n    }\n  `,\n  themeLabel: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n    padding: 0;\n    border: 0;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n  toolRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;oBAOO,OAAO,cAAc;;;CAGvC,YAAY,GAAG;;;CAGf,OAAO,GAAG;;;;;;;CAOV,WAAW,GAAG;;;;CAId,gBAAgB,GAAG;;;;;CAKnB,WAAW,GAAG;;;;;;;CAOd,YAAY,GAAG;;;;;;;;;;;;;;CAcf,SAAS,GAAG;;;;;AAKd,EAAE"}

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

@@ -0,0 +1,30 @@
+import { CSSProperties } from "react";
+//#region src/dashboard/AuthTools/type.d.ts
+type AuthThemeMode = 'auto' | 'dark' | 'light';
+interface AuthThemeSwitchProps {
+  className?: string;
+  /**
+   * Accessible names, also shown as tooltips. Labels are visually hidden.
+   * @default { auto: 'System', dark: 'Dark', light: 'Light' }
+   */
+  labels?: Partial<Record<AuthThemeMode, string>>;
+  onChange?: (mode: AuthThemeMode) => void;
+  style?: CSSProperties;
+  value?: AuthThemeMode;
+}
+interface AuthLocaleOption {
+  label: string;
+  value: string;
+}
+interface AuthLocaleSwitchProps {
+  /** Accessible name of the select. @default 'Language' */
+  'aria-label'?: string;
+  'className'?: string;
+  'onChange'?: (locale: string) => void;
+  'options': AuthLocaleOption[];
+  'style'?: CSSProperties;
+  'value'?: string;
+}
+//#endregion
+export { AuthLocaleOption, AuthLocaleSwitchProps, AuthThemeMode, AuthThemeSwitchProps };
+//# 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. */
+declare function ConsoleFooterSkeleton(): import("react").JSX.Element;
+//#endregion
+export { ConsoleFooterSkeleton, ConsoleNavSkeleton as default };
+//# sourceMappingURL=Skeleton.d.mts.map

package/es/dashboard/ConsoleNav/Skeleton.mjs

@@ -0,0 +1,81 @@
+"use client";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/ConsoleNav/Skeleton.tsx
+const DEFAULT_GROUPS = [
+	3,
+	6,
+	4,
+	3
+];
+const Row = ({ group, index }) => /* @__PURE__ */ jsxs("div", {
+	className: cx(styles.item, styles.skeletonRow),
+	"data-indent": 0,
+	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,
+		className: cx(styles.nav, className),
+		"data-console-nav-skeleton": "",
+		children: [Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx(Row, {
+			group: 0,
+			index
+		}, index)), counts.map((count, group) => /* @__PURE__ */ jsxs("div", {
+			className: styles.skeletonGroup,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cx(styles.groupHeader, styles.skeletonRow),
+				"data-level": 0,
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					height: 12,
+					radius: 4,
+					width: 64 + group % 2 * 16
+				})
+			}), Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx("div", {
+				className: cx(styles.item, styles.skeletonRow),
+				"data-indent": 1,
+				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,
+		className: 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 { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\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 className={cx(styles.item, styles.skeletonRow)} data-indent={0}>\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 className={cx(styles.nav, className)} data-console-nav-skeleton=\"\">\n      {Array.from({ length: items }, (_, index) => (\n        <Row group={0} index={index} key={index} />\n      ))}\n      {counts.map((count, group) => (\n        <div className={styles.skeletonGroup} key={group}>\n          <div className={cx(styles.groupHeader, styles.skeletonRow)} data-level={0}>\n            <Skeleton height={12} radius={4} width={64 + (group % 2) * 16} />\n          </div>\n          {Array.from({ length: count }, (_, index) => (\n            <div className={cx(styles.item, styles.skeletonRow)} data-indent={1} key={index}>\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 className={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":";;;;;;AASA,MAAM,iBAAiB;CAAC;CAAG;CAAG;CAAG;AAAC;AAElC,MAAM,OAAO,EAAE,OAAO,YACpB,qBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,OAAO,WAAW;CAAG,eAAa;CAAlE,UAAA,CACE,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,GAC7C,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO,MAAO,QAAQ,SAAS,IAAK;CAAK,CAAA,CACvE;;;;;;AAOP,SAAS,mBAAmB,EAC1B,WACA,SAAS,gBACT,QAAQ,KACkB;CAC1B,MAAM,SAAS,OAAO,KAAK,UACzB,OAAO,UAAU,WAAW,QAAS,MAAM,OAAO,UAAU,CAC9D;CACA,OACE,qBAAC,OAAD;EAAK,eAAA;EAAY,WAAW,GAAG,OAAO,KAAK,SAAS;EAAG,6BAA0B;EAAjF,UAAA,CACG,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACjC,oBAAC,KAAD;GAAK,OAAO;GAAU;EAAoB,GAAR,KAAQ,CAC3C,GACA,OAAO,KAAK,OAAO,UAClB,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,aAAa,OAAO,WAAW;IAAG,cAAY;IACtE,UAAA,oBAAC,UAAD;KAAU,QAAQ;KAAI,QAAQ;KAAG,OAAO,KAAM,QAAQ,IAAK;IAAK,CAAA;GAC7D,CAAA,GACJ,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACjC,oBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,MAAM,OAAO,WAAW;IAAG,eAAa;IAChE,UAAA,oBAAC,UAAD;KAAU,QAAQ;KAAI,QAAQ;KAAG,OAAO,MAAO,QAAQ,SAAS,IAAK;IAAK,CAAA;GACvE,GAFqE,KAErE,CACN,CACE;EATsC,GAAA,KAStC,CACN,CACE;;AAET;AAEA,mBAAmB,cAAc;;AAGjC,SAAgB,wBAAwB;CACtC,OACE,qBAAC,OAAD;EAAK,eAAA;EAAY,WAAW,OAAO;EAAnC,UAAA,CACE,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAI,OAAO;EAAK,CAAA,GAC9C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAO;EAAK,CAAA,CAC1C;;AAET"}

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

@@ -372,6 +372,21 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => {
       @starting-style {
         background: transparent;
       }
+    `,
+		skeletonFooter: css`
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      padding-inline: 4px;
+    `,
+		skeletonGroup: css`
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      margin-block-start: 12px;
+    `,
+		skeletonRow: css`
+      pointer-events: none;
     `,
 		topItems: css`
       display: flex;

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  // 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"}
+{"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    skeletonFooter: css`\n      display: flex;\n      gap: 10px;\n      align-items: center;\n      padding-inline: 4px;\n    `,\n    skeletonGroup: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      margin-block-start: 12px;\n    `,\n    skeletonRow: css`\n      pointer-events: none;\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,gBAAgB,GAAG;;;;;;EAMnB,eAAe,GAAG;;;;;;EAMlB,aAAa,GAAG;;;EAGhB,UAAU,GAAG;;;;;;;;;;;;sCAYqB,OAAO,qBAAqB;;;;;;;;;;;;;CAahE;AACF,CAAC"}

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

@@ -66,6 +66,19 @@ interface ConsoleNavProps {
   /** Persists which groups were opened or closed by hand. */
   storageKey?: string;
 }
+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
-export { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps };
+export { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps, ConsoleNavSkeletonProps };
 //# 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, closeNavigationLabel, collapseLabel, defaultCollapsed, expandLabel, footer, hotkey, navigation, onCollapsedChange, openNavigationLabel, skipToContentLabel, storageKey, 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, tools, ...rest }: ConsoleShellProps): import("react").JSX.Element;
 declare namespace ConsoleShell {
   var displayName: string;
 }

package/es/dashboard/ConsoleShell/ConsoleShell.mjs

@@ -4,9 +4,12 @@ import Button from "../../base-ui/Button/Button.mjs";
 import Drawer from "../../base-ui/Drawer/Drawer.mjs";
 import { ConsoleShellContext } from "./context.mjs";
 import { useIsCompact, useLocalStorage, usePrefersReducedMotion } from "../hooks.mjs";
+import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "../ConsoleNav/Skeleton.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 { useThemeMode } from "antd-style";
 import { PanelLeft, X } from "lucide-react";
 //#region src/dashboard/ConsoleShell/ConsoleShell.tsx
 function isTypingTarget(target) {
@@ -14,10 +17,14 @@ function isTypingTarget(target) {
 	const tag = target.tagName;
 	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
 }
-function ConsoleShell({ brand, breadcrumb, children, className, collapsed, closeNavigationLabel = "Close navigation", collapseLabel = "Collapse sidebar", defaultCollapsed = false, expandLabel = "Expand sidebar", footer, hotkey = true, navigation, onCollapsedChange, openNavigationLabel = "Open navigation", skipToContentLabel = "Skip to content", storageKey, 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, 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);
@@ -117,7 +124,7 @@ function ConsoleShell({ brand, breadcrumb, children, className, collapsed, close
 				})
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
-				className: styles.workspace,
+				className: isDarkMode ? styles.workspace : `${styles.workspace} ${styles.workspaceLight}`,
 				children: [/* @__PURE__ */ jsxs("header", {
 					className: styles.topbar,
 					children: [
@@ -141,10 +148,11 @@ function ConsoleShell({ brand, breadcrumb, children, className, collapsed, close
 						}) : null
 					]
 				}), /* @__PURE__ */ jsx("main", {
+					"aria-busy": loading || void 0,
 					className: styles.main,
 					id: mainId,
 					tabIndex: -1,
-					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 { PanelLeft, X } from 'lucide-react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { Drawer } from '@/base-ui/Drawer';\nimport { Flexbox } from '@/Flex';\n\nimport { useIsCompact, useLocalStorage, usePrefersReducedMotion } from '../hooks';\nimport { ConsoleShellContext } from './context';\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  closeNavigationLabel = 'Close navigation',\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  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 || isCompact ? (\n        <div className={styles.brand} data-collapsed={rail}>\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={styles.brandClose}\n              icon={X}\n              type=\"text\"\n              onClick={closeNavigation}\n            />\n          ) : null}\n        </div>\n      ) : null}\n      {navigation ? <div className={styles.navSlot}>{navigation}</div> : null}\n      {footer ? <div className={styles.sidebarBottom}>{footer}</div> : null}\n    </ConsoleShellContext>\n  );\n\n  const toggleLabel = isCompact ? openNavigationLabel : railed ? expandLabel : collapseLabel;\n\n  return (\n    <div\n      className={className ? `${styles.shell} ${className}` : styles.shell}\n      data-console-shell=\"\"\n      ref={shellRef}\n      {...rest}\n    >\n      <a\n        className={styles.skipLink}\n        href={`#${mainId}`}\n        onClick={(event) => {\n          event.preventDefault();\n          document.getElementById(mainId)?.focus();\n        }}\n      >\n        {skipToContentLabel}\n      </a>\n      <aside className={styles.sidebar} data-collapsed={railed} data-instant={reducedMotion}>\n        {!isCompact && sidebar(railed)}\n      </aside>\n      {isCompact ? (\n        <Drawer\n          noHeader\n          classNames={{ bodyContent: styles.drawerBody }}\n          closable={false}\n          open={drawerOpen}\n          placement=\"left\"\n          width={272}\n          onClose={closeNavigation}\n        >\n          <Flexbox height=\"100%\">{sidebar(false)}</Flexbox>\n        </Drawer>\n      ) : null}\n      <div className={styles.workspace}>\n        <header className={styles.topbar}>\n          <Button\n            aria-label={toggleLabel}\n            icon={PanelLeft}\n            type=\"text\"\n            onClick={toggleNavigation}\n          />\n          <span aria-hidden className={styles.topbarDivider} />\n          <div className={styles.topbarMain}>{breadcrumb}</div>\n          {tools ? <div className={styles.tools}>{tools}</div> : null}\n        </header>\n        <main className={styles.main} id={mainId} tabIndex={-1}>\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 { useThemeMode } from 'antd-style';\nimport { PanelLeft, X } from 'lucide-react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { Drawer } from '@/base-ui/Drawer';\nimport { Flexbox } from '@/Flex';\n\nimport ConsoleNavSkeleton, { ConsoleFooterSkeleton } from '../ConsoleNav/Skeleton';\nimport { useIsCompact, useLocalStorage, usePrefersReducedMotion } from '../hooks';\nimport PageLoading from '../PageSkeleton';\nimport { ConsoleShellContext } from './context';\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  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  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 className={styles.brand} data-collapsed={rail}>\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={styles.brandClose}\n              icon={X}\n              type=\"text\"\n              onClick={closeNavigation}\n            />\n          ) : null}\n        </div>\n      ) : null}\n      {navigation ? <div className={styles.navSlot}>{navigation}</div> : null}\n      {footer ? <div className={styles.sidebarBottom}>{footer}</div> : null}\n    </ConsoleShellContext>\n  );\n\n  const toggleLabel = isCompact ? openNavigationLabel : railed ? expandLabel : collapseLabel;\n\n  return (\n    <div\n      className={className ? `${styles.shell} ${className}` : styles.shell}\n      data-console-shell=\"\"\n      ref={shellRef}\n      {...rest}\n    >\n      <a\n        className={styles.skipLink}\n        href={`#${mainId}`}\n        onClick={(event) => {\n          event.preventDefault();\n          document.getElementById(mainId)?.focus();\n        }}\n      >\n        {skipToContentLabel}\n      </a>\n      <aside className={styles.sidebar} data-collapsed={railed} data-instant={reducedMotion}>\n        {!isCompact && sidebar(railed)}\n      </aside>\n      {isCompact ? (\n        <Drawer\n          noHeader\n          classNames={{ bodyContent: styles.drawerBody }}\n          closable={false}\n          open={drawerOpen}\n          placement=\"left\"\n          width={272}\n          onClose={closeNavigation}\n        >\n          <Flexbox height=\"100%\">{sidebar(false)}</Flexbox>\n        </Drawer>\n      ) : null}\n      <div\n        className={isDarkMode ? styles.workspace : `${styles.workspace} ${styles.workspaceLight}`}\n      >\n        <header className={styles.topbar}>\n          <Button\n            aria-label={toggleLabel}\n            icon={PanelLeft}\n            type=\"text\"\n            onClick={toggleNavigation}\n          />\n          <span aria-hidden className={styles.topbarDivider} />\n          <div className={styles.topbarMain}>{breadcrumb}</div>\n          {tools ? <div className={styles.tools}>{tools}</div> : null}\n        </header>\n        <main aria-busy={loading || undefined} className={styles.main} id={mainId} tabIndex={-1}>\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

@@ -197,6 +197,12 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     align-items: center;
 
     margin-inline-start: auto;
+  `,
+	/** Light only: the content area sits midway between the layout canvas and container white. */
+	workspaceLight: css`
+    && {
+      background: color-mix(in srgb, ${cssVar.colorBgLayout} 50%, ${cssVar.colorBgContainer});
+    }
   `,
 	workspace: css`
     overflow: hidden;

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;\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  /** Close button in the drawer's brand row: right edge, vertically centred with the brand. */\n  brandClose: css`\n    flex: none;\n    margin-inline: auto -7px;\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  /**\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.\n   */\n  drawerBody: css`\n    && {\n      min-block-size: 100%;\n      padding: 0;\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;;;;;CAKtB,YAAY,GAAG;;;;CAIf,aAAa,GAAG;;;;;;;;;;CAUhB,aAAa,GAAG;;;;;;CAMhB,WAAW,GAAG;;;;;;aAMH,OAAO,UAAU;;;;;;;;;;;;;;;;CAgB5B,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;MAqBL,WAAW,OAAO;;;;;;;;;CAStB,YAAY,GAAG;;;;;;CAMf,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"}
+{"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  /** Close button in the drawer's brand row: right edge, vertically centred with the brand. */\n  brandClose: css`\n    flex: none;\n    margin-inline: auto -7px;\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  /**\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.\n   */\n  drawerBody: css`\n    && {\n      min-block-size: 100%;\n      padding: 0;\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  /** Light only: the content area sits midway between the layout canvas and container white. */\n  workspaceLight: css`\n    && {\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 50%, ${cssVar.colorBgContainer});\n    }\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;;;;;CAKtB,YAAY,GAAG;;;;CAIf,aAAa,GAAG;;;;;;;;;;CAUhB,aAAa,GAAG;;;;;;CAMhB,WAAW,GAAG;;;;;;aAMH,OAAO,UAAU;;;;;;;;;;;;;;;;CAgB5B,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;MAqBL,WAAW,OAAO;;;;;;;;;CAStB,YAAY,GAAG;;;;;;CAMf,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;;;;;;;;;CASV,gBAAgB,GAAG;;uCAEkB,OAAO,cAAc,QAAQ,OAAO,iBAAiB;;;CAG1F,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/es/dashboard/ConsoleShell/type.d.mts

@@ -52,6 +52,15 @@ interface ConsoleShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    * @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

@@ -2,10 +2,10 @@
 import Button from "../../base-ui/Button/Button.mjs";
 import Drawer from "../../base-ui/Drawer/Drawer.mjs";
 import DraggablePanel from "../../base-ui/DraggablePanel/DraggablePanel.mjs";
-import { styles } from "../Surface/style.mjs";
+import { useSurfaceCardClassName } 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";
@@ -34,6 +34,7 @@ function usePageSidebar(wide, storageKey) {
 	};
 }
 function FilterSidebar({ body, children, flush, head, header, label, storageKey, summary, wide }) {
+	const cardClassName = useSurfaceCardClassName();
 	const isCompact = useIsCompact();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	const sidebar = usePageSidebar(wide, storageKey);
@@ -41,7 +42,7 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 	if (isCompact) return /* @__PURE__ */ jsx(FilterSplitProvider, {
 		active: !flush,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: styles$1.layout,
+			className: styles.layout,
 			children: [
 				header,
 				/* @__PURE__ */ jsx(Button, {
@@ -57,12 +58,12 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 					width: 300,
 					onClose: close,
 					children: /* @__PURE__ */ jsxs("div", {
-						className: styles$1.drawerPanel,
+						className: styles.drawerPanel,
 						children: [head?.(close), body(close)]
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: styles$1.content,
+					className: styles.content,
 					children
 				})
 			]
@@ -71,7 +72,7 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 	return /* @__PURE__ */ jsx(FilterSplitProvider, {
 		active: !flush,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: flush ? styles$1.layout : `${styles$1.layout} ${styles.card}`,
+			className: flush ? styles.layout : `${styles.layout} ${cardClassName}`,
 			"data-flush": flush ? true : void 0,
 			"data-page-layout": flush ? "flush" : void 0,
 			"data-split-card": flush ? void 0 : true,
@@ -79,8 +80,8 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 				expandable: true,
 				showHandleWhenCollapsed: true,
 				"aria-label": label,
-				className: styles$1.sidebar,
-				classNames: { content: styles$1.panel },
+				className: styles.sidebar,
+				classNames: { content: styles.panel },
 				collapseThreshold: sidebarWidth.collapse,
 				"data-flush": flush ? true : void 0,
 				defaultSize: { width: wide ? sidebarWidth.wide : sidebarWidth.narrow },
@@ -94,15 +95,15 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 				onExpandChange: sidebar.onExpandChange,
 				onSizeChange: (_delta, size) => sidebar.onSizeChange(size),
 				children: [head ? /* @__PURE__ */ jsx("div", {
-					className: styles$1.head,
+					className: styles.head,
 					children: head(close)
 				}) : null, /* @__PURE__ */ jsx("div", {
-					className: styles$1.body,
+					className: styles.body,
 					"data-flush": flush ? true : void 0,
 					children: body(close)
 				})]
 			}), /* @__PURE__ */ jsxs("div", {
-				className: styles$1.content,
+				className: styles.content,
 				"data-flush": flush ? true : void 0,
 				children: [header, children]
 			})]
@@ -112,12 +113,12 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 FilterSidebar.displayName = "FilterSidebar";
 function FilterRow({ count, name }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: styles$1.row,
+		className: styles.row,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: styles$1.name,
+			className: styles.name,
 			children: name
 		}), count !== void 0 ? /* @__PURE__ */ jsx("span", {
-			className: styles$1.count,
+			className: styles.count,
 			children: count
 		}) : null]
 	});
@@ -127,18 +128,18 @@ function FilterOption({ count, icon, label, name, onClick, selected, title }) {
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-label": label,
 		"aria-pressed": selected,
-		className: styles$1.option,
+		className: styles.option,
 		title,
 		type: "button",
 		onClick,
 		children: [
 			icon,
 			/* @__PURE__ */ jsx("span", {
-				className: styles$1.name,
+				className: styles.name,
 				children: name
 			}),
 			count !== void 0 ? /* @__PURE__ */ jsx("span", {
-				className: styles$1.count,
+				className: styles.count,
 				children: count
 			}) : null
 		]