@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthTools/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  localeIcon: {\n    marginInlineEnd: 2,\n  },\n  themeIcon: {\n    blockSize: 16,\n    inlineSize: 16,\n  },\n  themeLabel: {\n    padding: 0,\n    borderWidth: 0,\n    overflow: 'hidden',\n    blockSize: 1,\n    clipPath: 'inset(50%)',\n    inlineSize: 1,\n    position: 'absolute',\n    whiteSpace: 'nowrap',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -0,0 +1,29 @@
+import { CSSProperties } from "react";
+//#region src/dashboard/AuthTools/type.d.ts
+export type AuthThemeMode = 'auto' | 'dark' | 'light';
+export 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;
+}
+export interface AuthLocaleOption {
+  label: string;
+  value: string;
+}
+export 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
+//# sourceMappingURL=type.d.mts.map

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

@@ -0,0 +1,10 @@
+import { ChartGridProps } from "./type.mjs";
+//#region src/dashboard/ChartGrid/ChartGrid.d.ts
+/** Peer charts and ranked lists, two-up, one column below 640px. Not for label/value rows. */
+declare const ChartGrid: {
+  ({ children, className }: ChartGridProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { ChartGrid as default };
+//# sourceMappingURL=ChartGrid.d.mts.map

package/es/dashboard/ChartGrid/ChartGrid.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { styles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/dashboard/ChartGrid/ChartGrid.tsx
+/** Peer charts and ranked lists, two-up, one column below 640px. Not for label/value rows. */
+const ChartGrid = ({ children, className }) => /* @__PURE__ */ jsx("div", {
+	...stylex.props(styles.frame),
+	children: /* @__PURE__ */ jsx("div", {
+		...styleProps(styles.root, className),
+		children
+	})
+});
+ChartGrid.displayName = "ChartGrid";
+//#endregion
+export { ChartGrid as default };
+
+//# sourceMappingURL=ChartGrid.mjs.map

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/ConsoleNav.mjs

@@ -8,7 +8,7 @@ import { useLocalStorage, usePrefersReducedMotion } from "../hooks.mjs";
 import { styles } from "./style.mjs";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronDown, Play } from "lucide-react";
 //#region src/dashboard/ConsoleNav/ConsoleNav.tsx
@@ -90,7 +90,7 @@ function NavLink({ active, collapsed, context, href, icon, indent = 0, item, nam
 				...stylex.props(styles.dot, collapsed && styles.dotRail)
 			}) : null
 		] }),
-		"className": overlay ? clsx(stylex.props(styles.railLink, active && styles.railLinkActive).className, railLinkClassName) : stylex.props(styles.item, active && styles.itemActive, (indent === 1 || indent === 2) && styles.itemIndented, itemIndentStyles[indent], collapsed && indent !== 0 && styles.itemRailIndent).className ?? "",
+		"className": overlay ? clsx$1(stylex.props(styles.railLink, active && styles.railLinkActive).className, railLinkClassName) : stylex.props(styles.item, active && styles.itemActive, (indent === 1 || indent === 2) && styles.itemIndented, itemIndentStyles[indent], collapsed && indent !== 0 && styles.itemRailIndent).className ?? "",
 		"data-active": active,
 		"data-collapsed": collapsed,
 		"data-indent": indent,
@@ -223,7 +223,7 @@ function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups
 					"data-expanded": expanded,
 					icon: ChevronDown,
 					size: 14,
-					className: clsx(headerIconClassName, stylex.props(styles.chevron, !expanded && styles.chevronFolded, collapsed && styles.railFaded).className)
+					className: clsx$1(headerIconClassName, stylex.props(styles.chevron, !expanded && styles.chevronFolded, collapsed && styles.railFaded).className)
 				}) : /* @__PURE__ */ jsx("span", {
 					"data-expanded": expanded,
 					...stylex.props(styles.indicator, expanded && styles.indicatorExpanded),

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

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

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

@@ -62,7 +62,7 @@ const styles = {
 		kVAEAm: "lb1n2onr6",
 		kpsdNU: "lbm4btww",
 		k2g4ti: "lb1qc4mfg lb1fgujza",
-		kLkRvE: "lbv1378s",
+		kLkRvE: "lb4uv7w2",
 		kgzTxl: "lby80zi5",
 		kgeoSG: "lb1cpjm7i",
 		k96MEf: "lb1mpa3hi",
@@ -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",
@@ -299,7 +317,7 @@ const styles = {
 		$$css: true
 	},
 	topItemsDivided: {
-		kL6WhQ: "lb1nkj3if",
+		kL6WhQ: "lb1fmh5c5",
 		kfdmCh: "lb1q0q8m5",
 		kt9PQ7: "lbso031l",
 		k1K539: "lbzueoph",

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: `var(--lobe-fill-border, ${cssVar.colorFill})`,\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: `var(--lobe-fill-border, ${cssVar.colorFill})`,\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
 				})]
 			})
 		]