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

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

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

package/es/dashboard/ConsoleShell/style.mjs

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

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

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

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

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

package/es/dashboard/FilterSidebar/FilterSidebar.mjs

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

package/es/dashboard/FilterSidebar/FilterSidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSidebar.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/FilterSidebar/FilterSidebar.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/Button';\nimport { DraggablePanel } from '@/DraggablePanel';\nimport { Drawer } from '@/Drawer';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useIsCompact, useLocalStorage } from '../hooks';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { FilterSplitProvider } from './context';\nimport { styles } from './style';\nimport type { FilterOptionProps, FilterRowProps, FilterSidebarProps } from './type';\nimport { clampSidebarWidth, sidebarWidth } from './width';\n\nconst contentClassName = 'lobe-filter-sidebar-content';\n\nfunction usePageSidebar(wide: boolean | undefined, storageKey: string | undefined) {\n  const fallback = wide ? sidebarWidth.wide : sidebarWidth.narrow;\n  const [prefs, setPrefs] = useLocalStorage<{ expand?: boolean; width?: number }>(storageKey, {\n    expand: true,\n    width: fallback,\n  });\n  return {\n    expand: prefs.expand !== false,\n    onExpandChange: (expand: boolean) => setPrefs((current) => ({ ...current, expand })),\n    onSizeChange: (size: { width?: number | string }) => {\n      const next = typeof size.width === 'number' ? size.width : fallback;\n      setPrefs((current) => ({ ...current, width: clampSidebarWidth(next, fallback) }));\n    },\n    width: clampSidebarWidth(Number(prefs.width), fallback),\n  };\n}\n\nfunction FilterSidebar({\n  body,\n  children,\n  flush,\n  head,\n  header,\n  label,\n  storageKey,\n  summary,\n  wide,\n}: FilterSidebarProps) {\n  const isCompact = useIsCompact();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const sidebar = usePageSidebar(wide, storageKey);\n  const close = () => setDrawerOpen(false);\n\n  if (isCompact) {\n    return (\n      <FilterSplitProvider active={!flush}>\n        <div {...stylex.props(styles.layout)}>\n          {header}\n          <Button block icon={Filter} onClick={() => setDrawerOpen(true)}>\n            {summary}\n          </Button>\n          <Drawer open={drawerOpen} placement=\"left\" title={label} width={300} onClose={close}>\n            <div {...stylex.props(styles.drawerPanel)}>\n              {head?.(close)}\n              {body(close)}\n            </div>\n          </Drawer>\n          <div {...styleProps(styles.content, contentClassName)}>{children}</div>\n        </div>\n      </FilterSplitProvider>\n    );\n  }\n\n  return (\n    <FilterSplitProvider active={!flush}>\n      <div\n        {...stylex.props(\n          styles.layout,\n          flush ? styles.layoutFlush : [surfaceStyles.card, styles.layoutSplit],\n        )}\n        data-flush={flush ? true : undefined}\n        data-page-layout={flush ? 'flush' : undefined}\n        data-split-card={flush ? undefined : true}\n      >\n        <DraggablePanel\n          expandable\n          showHandleWhenCollapsed\n          aria-label={label}\n          className={stylex.props(styles.sidebar, flush && styles.sidebarFlush).className}\n          collapseThreshold={sidebarWidth.collapse}\n          data-flush={flush ? true : undefined}\n          defaultSize={{ width: wide ? sidebarWidth.wide : sidebarWidth.narrow }}\n          expand={sidebar.expand}\n          maxWidth={sidebarWidth.max}\n          minWidth={sidebarWidth.min}\n          mode=\"fixed\"\n          placement=\"left\"\n          showBorder={false}\n          size={{ width: sidebar.width }}\n          classNames={{\n            content: stylex.props(styles.panel, !flush && styles.panelSplit).className,\n          }}\n          onExpandChange={sidebar.onExpandChange}\n          onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n        >\n          {head ? <div {...stylex.props(styles.head)}>{head(close)}</div> : null}\n          <div\n            data-flush={flush ? true : undefined}\n            {...stylex.props(styles.body, flush && styles.bodyFlush)}\n          >\n            {body(close)}\n          </div>\n        </DraggablePanel>\n        <div\n          data-flush={flush ? true : undefined}\n          {...styleProps(\n            [styles.content, flush ? styles.contentFlush : styles.contentSplit],\n            contentClassName,\n          )}\n        >\n          {header}\n          {children}\n        </div>\n      </div>\n    </FilterSplitProvider>\n  );\n}\n\nFilterSidebar.displayName = 'FilterSidebar';\n\nfunction FilterRow({ count, name }: FilterRowProps) {\n  return (\n    <span {...stylex.props(styles.row)}>\n      <span {...stylex.props(styles.name)}>{name}</span>\n      {count !== undefined ? <span {...stylex.props(styles.count)}>{count}</span> : null}\n    </span>\n  );\n}\n\nFilterRow.displayName = 'FilterRow';\n\nfunction FilterOption({ count, icon, label, name, onClick, selected, title }: FilterOptionProps) {\n  return (\n    <button\n      aria-label={label}\n      aria-pressed={selected}\n      title={title}\n      type=\"button\"\n      onClick={onClick}\n      {...stylex.props(styles.option)}\n    >\n      {icon}\n      <span {...stylex.props(styles.name)}>{name}</span>\n      {count !== undefined ? <span {...stylex.props(styles.count)}>{count}</span> : null}\n    </button>\n  );\n}\n\nFilterOption.displayName = 'FilterOption';\n\nexport { FilterOption, FilterRow };\nexport default FilterSidebar;\n"],"mappings":"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"}
+{"version":3,"file":"FilterSidebar.mjs","names":[],"sources":["../../../src/dashboard/FilterSidebar/FilterSidebar.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/Button';\nimport { DraggablePanel } from '@/DraggablePanel';\nimport { Drawer } from '@/Drawer';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useIsCompact, useLocalStorage } from '../hooks';\nimport { useSurfaceCardStyles } from '../Surface/link';\nimport { FilterSplitProvider } from './context';\nimport { styles } from './style';\nimport type { FilterOptionProps, FilterRowProps, FilterSidebarProps } from './type';\nimport { clampSidebarWidth, sidebarWidth } from './width';\n\nconst contentClassName = 'lobe-filter-sidebar-content';\n\nfunction usePageSidebar(wide: boolean | undefined, storageKey: string | undefined) {\n  const fallback = wide ? sidebarWidth.wide : sidebarWidth.narrow;\n  const [prefs, setPrefs] = useLocalStorage<{ expand?: boolean; width?: number }>(storageKey, {\n    expand: true,\n    width: fallback,\n  });\n  return {\n    expand: prefs.expand !== false,\n    onExpandChange: (expand: boolean) => setPrefs((current) => ({ ...current, expand })),\n    onSizeChange: (size: { width?: number | string }) => {\n      const next = typeof size.width === 'number' ? size.width : fallback;\n      setPrefs((current) => ({ ...current, width: clampSidebarWidth(next, fallback) }));\n    },\n    width: clampSidebarWidth(Number(prefs.width), fallback),\n  };\n}\n\nfunction FilterSidebar({\n  body,\n  children,\n  flush,\n  head,\n  header,\n  label,\n  storageKey,\n  summary,\n  wide,\n}: FilterSidebarProps) {\n  const cardStyles = useSurfaceCardStyles();\n  const isCompact = useIsCompact();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const sidebar = usePageSidebar(wide, storageKey);\n  const close = () => setDrawerOpen(false);\n\n  if (isCompact) {\n    return (\n      <FilterSplitProvider active={!flush}>\n        <div {...stylex.props(styles.layout)}>\n          {header}\n          <Button block icon={Filter} onClick={() => setDrawerOpen(true)}>\n            {summary}\n          </Button>\n          <Drawer open={drawerOpen} placement=\"left\" title={label} width={300} onClose={close}>\n            <div {...stylex.props(styles.drawerPanel)}>\n              {head?.(close)}\n              {body(close)}\n            </div>\n          </Drawer>\n          <div {...styleProps(styles.content, contentClassName)}>{children}</div>\n        </div>\n      </FilterSplitProvider>\n    );\n  }\n\n  return (\n    <FilterSplitProvider active={!flush}>\n      <div\n        {...stylex.props(\n          styles.layout,\n          flush ? styles.layoutFlush : [cardStyles, styles.layoutSplit],\n        )}\n        data-flush={flush ? true : undefined}\n        data-page-layout={flush ? 'flush' : undefined}\n        data-split-card={flush ? undefined : true}\n      >\n        <DraggablePanel\n          expandable\n          showHandleWhenCollapsed\n          aria-label={label}\n          className={stylex.props(styles.sidebar, flush && styles.sidebarFlush).className}\n          collapseThreshold={sidebarWidth.collapse}\n          data-flush={flush ? true : undefined}\n          defaultSize={{ width: wide ? sidebarWidth.wide : sidebarWidth.narrow }}\n          expand={sidebar.expand}\n          maxWidth={sidebarWidth.max}\n          minWidth={sidebarWidth.min}\n          mode=\"fixed\"\n          placement=\"left\"\n          showBorder={false}\n          size={{ width: sidebar.width }}\n          classNames={{\n            content: stylex.props(styles.panel, !flush && styles.panelSplit).className,\n          }}\n          onExpandChange={sidebar.onExpandChange}\n          onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n        >\n          {head ? <div {...stylex.props(styles.head)}>{head(close)}</div> : null}\n          <div\n            data-flush={flush ? true : undefined}\n            {...stylex.props(styles.body, flush && styles.bodyFlush)}\n          >\n            {body(close)}\n          </div>\n        </DraggablePanel>\n        <div\n          data-flush={flush ? true : undefined}\n          {...styleProps(\n            [styles.content, flush ? styles.contentFlush : styles.contentSplit],\n            contentClassName,\n          )}\n        >\n          {header}\n          {children}\n        </div>\n      </div>\n    </FilterSplitProvider>\n  );\n}\n\nFilterSidebar.displayName = 'FilterSidebar';\n\nfunction FilterRow({ count, name }: FilterRowProps) {\n  return (\n    <span {...stylex.props(styles.row)}>\n      <span {...stylex.props(styles.name)}>{name}</span>\n      {count !== undefined ? <span {...stylex.props(styles.count)}>{count}</span> : null}\n    </span>\n  );\n}\n\nFilterRow.displayName = 'FilterRow';\n\nfunction FilterOption({ count, icon, label, name, onClick, selected, title }: FilterOptionProps) {\n  return (\n    <button\n      aria-label={label}\n      aria-pressed={selected}\n      title={title}\n      type=\"button\"\n      onClick={onClick}\n      {...stylex.props(styles.option)}\n    >\n      {icon}\n      <span {...stylex.props(styles.name)}>{name}</span>\n      {count !== undefined ? <span {...stylex.props(styles.count)}>{count}</span> : null}\n    </button>\n  );\n}\n\nFilterOption.displayName = 'FilterOption';\n\nexport { FilterOption, FilterRow };\nexport default FilterSidebar;\n"],"mappings":"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"}

package/es/dashboard/FilterSidebar/style.mjs

@@ -103,7 +103,7 @@ const styles = {
 	},
 	panel: {
 		kVQacm: "lbb3r6kr",
-		kBCPoo: "lb17bfco5",
+		kBCPoo: "lb1g588gv",
 		k8ry5P: "lb18b5jzi",
 		ke9TFa: "lb1lun4ml",
 		k1xSpc: "lb78zum5",
@@ -113,7 +113,7 @@ const styles = {
 	},
 	panelSplit: {
 		kZKoxP: "lb5yr21d",
-		kBCPoo: "lb1aht071",
+		kBCPoo: "lb4huikl",
 		$$css: true
 	},
 	row: {

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterSidebar/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 pressed = ':is([aria-pressed=\"true\"])';\n\nexport const styles = stylex.create({\n  body: {\n    paddingInline: 12,\n    maxBlockSize: 360,\n    paddingBlockEnd: 16,\n    overflowY: 'auto',\n  },\n  bodyFlush: {\n    flex: '1',\n    maxBlockSize: 'none',\n    minBlockSize: 0,\n  },\n  content: {\n    flex: '1',\n    gap: 16,\n    overflow: { default: null, [media.laptop]: 'visible' },\n    display: 'flex',\n    flexDirection: 'column',\n    minInlineSize: 0,\n    paddingInlineStart: { default: 20, [media.laptop]: 0 },\n  },\n  contentFlush: {\n    paddingBlock: 24,\n    paddingInlineEnd: 24,\n    paddingInlineStart: 24,\n    overflowY: 'auto',\n  },\n  contentSplit: {\n    paddingBlockEnd: '0',\n    paddingBlockStart: '16px',\n    paddingInlineEnd: 16,\n    paddingInlineStart: 16,\n  },\n  count: {\n    flex: 'none',\n    color: cssVar.colorTextTertiary,\n    fontSize: cssVar.fontSizeSM,\n    fontVariantNumeric: 'tabular-nums',\n  },\n  drawerPanel: {\n    gap: 8,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  head: {\n    padding: 12,\n    flex: 'none',\n    gap: 8,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  layout: {\n    gap: { default: null, [media.laptop]: 12 },\n    display: 'flex',\n    flexDirection: { default: null, [media.laptop]: 'column' },\n  },\n  layoutFlush: {\n    flex: '1',\n    minBlockSize: 0,\n  },\n  layoutSplit: {\n    overflow: 'hidden',\n    alignItems: 'stretch',\n  },\n  name: {\n    flex: '1',\n    overflow: 'hidden',\n    minInlineSize: 0,\n    textAlign: 'start',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  option: {\n    font: 'inherit',\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    gap: 6,\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': 'transparent',\n      [pressed]: cssVar.controlItemBgActive,\n      ':hover:not([aria-pressed=\"true\"])': cssVar.colorFillTertiary,\n    },\n    color: cssVar.colorText,\n    cursor: 'pointer',\n    display: 'flex',\n    fontWeight: { default: null, [pressed]: 500 },\n    inlineSize: '100%',\n    minBlockSize: 36,\n  },\n  panel: {\n    overflow: 'hidden',\n    borderInlineEndColor: cssVar.colorBorderSecondary,\n    borderInlineEndStyle: 'solid',\n    borderInlineEndWidth: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n  },\n  panelSplit: {\n    blockSize: '100%',\n    borderInlineEndColor: cssVar.colorBorder,\n  },\n  row: {\n    flex: '1',\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  sidebar: {\n    alignSelf: 'stretch',\n    minBlockSize: 0,\n  },\n  sidebarFlush: {\n    blockSize: '100%',\n  },\n});\n"],"mappings":";AAMA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterSidebar/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 pressed = ':is([aria-pressed=\"true\"])';\n\nexport const styles = stylex.create({\n  body: {\n    paddingInline: 12,\n    maxBlockSize: 360,\n    paddingBlockEnd: 16,\n    overflowY: 'auto',\n  },\n  bodyFlush: {\n    flex: '1',\n    maxBlockSize: 'none',\n    minBlockSize: 0,\n  },\n  content: {\n    flex: '1',\n    gap: 16,\n    overflow: { default: null, [media.laptop]: 'visible' },\n    display: 'flex',\n    flexDirection: 'column',\n    minInlineSize: 0,\n    paddingInlineStart: { default: 20, [media.laptop]: 0 },\n  },\n  contentFlush: {\n    paddingBlock: 24,\n    paddingInlineEnd: 24,\n    paddingInlineStart: 24,\n    overflowY: 'auto',\n  },\n  contentSplit: {\n    paddingBlockEnd: '0',\n    paddingBlockStart: '16px',\n    paddingInlineEnd: 16,\n    paddingInlineStart: 16,\n  },\n  count: {\n    flex: 'none',\n    color: cssVar.colorTextTertiary,\n    fontSize: cssVar.fontSizeSM,\n    fontVariantNumeric: 'tabular-nums',\n  },\n  drawerPanel: {\n    gap: 8,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  head: {\n    padding: 12,\n    flex: 'none',\n    gap: 8,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  layout: {\n    gap: { default: null, [media.laptop]: 12 },\n    display: 'flex',\n    flexDirection: { default: null, [media.laptop]: 'column' },\n  },\n  layoutFlush: {\n    flex: '1',\n    minBlockSize: 0,\n  },\n  layoutSplit: {\n    overflow: 'hidden',\n    alignItems: 'stretch',\n  },\n  name: {\n    flex: '1',\n    overflow: 'hidden',\n    minInlineSize: 0,\n    textAlign: 'start',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  option: {\n    font: 'inherit',\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    gap: 6,\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': 'transparent',\n      [pressed]: cssVar.controlItemBgActive,\n      ':hover:not([aria-pressed=\"true\"])': cssVar.colorFillTertiary,\n    },\n    color: cssVar.colorText,\n    cursor: 'pointer',\n    display: 'flex',\n    fontWeight: { default: null, [pressed]: 500 },\n    inlineSize: '100%',\n    minBlockSize: 36,\n  },\n  panel: {\n    overflow: 'hidden',\n    borderInlineEndColor: `var(--lobe-fill-border, ${cssVar.colorFill})`,\n    borderInlineEndStyle: 'solid',\n    borderInlineEndWidth: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n  },\n  panelSplit: {\n    blockSize: '100%',\n    borderInlineEndColor: `var(--lobe-fill-border-strong, ${cssVar.colorFill})`,\n  },\n  row: {\n    flex: '1',\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  sidebar: {\n    alignSelf: 'stretch',\n    minBlockSize: 0,\n  },\n  sidebarFlush: {\n    blockSize: '100%',\n  },\n});\n"],"mappings":";AAMA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/dashboard/FilterStrip/FilterStrip.d.mts

@@ -0,0 +1,11 @@
+import { FilterStripProps } from "./type.mjs";
+//#region src/dashboard/FilterStrip/FilterStrip.d.ts
+export declare const formatInteger: (count: number) => string;
+/** One surface of selectable counts. Peer filters share a seam instead of a row of equal cards. */
+declare const FilterStrip: {
+  ({ emptyText, formatCount, items, label, onChange, value }: FilterStripProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { FilterStrip as default };
+//# sourceMappingURL=FilterStrip.d.mts.map

package/es/dashboard/FilterStrip/FilterStrip.mjs

@@ -0,0 +1,55 @@
+"use client";
+import Skeleton from "../../Skeleton/index.mjs";
+import { styles } from "../Surface/style.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/dashboard/FilterStrip/FilterStrip.tsx
+const countStyles = {
+	danger: styles$1.countDanger,
+	warning: styles$1.countWarning
+};
+const integerFormat = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+const formatInteger = (count) => integerFormat.format(count);
+/** One surface of selectable counts. Peer filters share a seam instead of a row of equal cards. */
+const FilterStrip = ({ emptyText = "--", formatCount = formatInteger, items, label, onChange, value }) => /* @__PURE__ */ jsx(Surface, {
+	className: stylex.props(styles.clip).className,
+	children: /* @__PURE__ */ jsx("div", {
+		"aria-label": label,
+		role: "radiogroup",
+		...stylex.props(styles$1.frame),
+		children: /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles$1.grid),
+			children: items.map((item) => {
+				const active = item.key === value;
+				const missing = item.count === void 0 || item.count === null;
+				const emphasize = item.tone && typeof item.count === "number" && item.count > 0;
+				return /* @__PURE__ */ jsxs("button", {
+					"aria-checked": active,
+					role: "radio",
+					title: item.hint,
+					type: "button",
+					onClick: () => onChange(item.key),
+					...stylex.props(styles$1.cell, active && styles$1.cellActive),
+					children: [/* @__PURE__ */ jsx("span", {
+						...stylex.props(styles$1.label, active && styles$1.labelActive),
+						children: item.label
+					}), /* @__PURE__ */ jsx("span", {
+						...stylex.props(styles$1.count, emphasize && countStyles[item.tone]),
+						children: item.loading ? /* @__PURE__ */ jsx(Skeleton, {
+							height: 22,
+							radius: 6,
+							width: 48
+						}) : missing ? emptyText : formatCount(item.count)
+					})]
+				}, item.key);
+			})
+		})
+	})
+});
+FilterStrip.displayName = "FilterStrip";
+//#endregion
+export { FilterStrip as default, formatInteger };
+
+//# sourceMappingURL=FilterStrip.mjs.map

package/es/dashboard/FilterStrip/FilterStrip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterStrip.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/FilterStrip/FilterStrip.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport Skeleton from '@/Skeleton';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { FilterStripProps } from './type';\n\nconst countStyles = {\n  danger: styles.countDanger,\n  warning: styles.countWarning,\n} as const;\n\nconst integerFormat = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 });\n\nexport const formatInteger = (count: number) => integerFormat.format(count);\n\n/** One surface of selectable counts. Peer filters share a seam instead of a row of equal cards. */\nconst FilterStrip = ({\n  emptyText = '--',\n  formatCount = formatInteger,\n  items,\n  label,\n  onChange,\n  value,\n}: FilterStripProps) => (\n  <Surface className={stylex.props(surfaceStyles.clip).className}>\n    <div aria-label={label} role=\"radiogroup\" {...stylex.props(styles.frame)}>\n      <div {...stylex.props(styles.grid)}>\n        {items.map((item) => {\n          const active = item.key === value;\n          const missing = item.count === undefined || item.count === null;\n          const emphasize = item.tone && typeof item.count === 'number' && item.count > 0;\n\n          return (\n            <button\n              aria-checked={active}\n              key={item.key}\n              role=\"radio\"\n              title={item.hint}\n              type=\"button\"\n              onClick={() => onChange(item.key)}\n              {...stylex.props(styles.cell, active && styles.cellActive)}\n            >\n              <span {...stylex.props(styles.label, active && styles.labelActive)}>\n                {item.label}\n              </span>\n              <span {...stylex.props(styles.count, emphasize && countStyles[item.tone!])}>\n                {item.loading ? (\n                  <Skeleton height={22} radius={6} width={48} />\n                ) : missing ? (\n                  emptyText\n                ) : (\n                  formatCount(item.count!)\n                )}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  </Surface>\n);\n\nFilterStrip.displayName = 'FilterStrip';\n\nexport default FilterStrip;\n"],"mappings":";;;;;;;;AAQA,MAAM,cAAc;CAClB,QAAQA,SAAO;CACf,SAASA,SAAO;AAClB;AACA,MAAM,gBAAgB,IAAI,KAAK,aAAa,SAAS,EACnD,uBAAuB,EACzB,CAAC;AACD,MAAa,iBAAiB,UAAkB,cAAc,OAAO,KAAK;;AAG1E,MAAM,eAAe,EACnB,YAAY,MACZ,cAAc,eACd,OACA,OACA,UACA,YACsB,oBAAC,SAAD;CAAS,WAAW,OAAO,MAAMC,OAAc,IAAI,CAAC,CAAC;CACzE,UAAA,oBAAC,OAAD;EAAK,cAAY;EAAO,MAAK;EAAa,GAAI,OAAO,MAAMD,SAAO,KAAK;EACrE,UAAA,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAMA,SAAO,IAAI;GAC9B,UAAA,MAAM,KAAI,SAAQ;IACnB,MAAM,SAAS,KAAK,QAAQ;IAC5B,MAAM,UAAU,KAAK,UAAU,KAAA,KAAa,KAAK,UAAU;IAC3D,MAAM,YAAY,KAAK,QAAQ,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ;IAC9E,OAAO,qBAAC,UAAD;KAAQ,gBAAc;KAAuB,MAAK;KAAQ,OAAO,KAAK;KAAM,MAAK;KAAS,eAAe,SAAS,KAAK,GAAG;KAAG,GAAI,OAAO,MAAMA,SAAO,MAAM,UAAUA,SAAO,UAAU;KAAtL,UAAA,CACD,oBAAC,QAAD;MAAM,GAAI,OAAO,MAAMA,SAAO,OAAO,UAAUA,SAAO,WAAW;MAC9D,UAAA,KAAK;KACF,CAAA,GACN,oBAAC,QAAD;MAAM,GAAI,OAAO,MAAMA,SAAO,OAAO,aAAa,YAAY,KAAK,KAAM;MACtE,UAAA,KAAK,UAAU,oBAAC,UAAD;OAAU,QAAQ;OAAI,QAAQ;OAAG,OAAO;MAAK,CAAA,IAAI,UAAU,YAAY,YAAY,KAAK,KAAM;KAC1G,CAAA,CACA;IAP8B,GAAA,KAAK,GAOnC;GACd,CAAC;EACI,CAAA;CACF,CAAA;AACE,CAAA;AACX,YAAY,cAAc"}

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

@@ -0,0 +1,3 @@
+import { FilterStripItem, FilterStripProps } from "./type.mjs";
+import FilterStrip, { formatInteger } from "./FilterStrip.mjs";
+export { type FilterStripItem, type FilterStripProps, FilterStrip as default, formatInteger };

package/es/dashboard/FilterStrip/style.mjs

@@ -0,0 +1,78 @@
+//#region src/dashboard/FilterStrip/style.ts
+const styles = {
+	cell: {
+		kVVagm: "lbln7xf2",
+		kogj98: "lb1ghz6dp",
+		kMzoRj: "lbc342km",
+		kOIVth: "lb17d4w8g",
+		kg3NbH: "lb1hr3lfm",
+		kGNEyG: "lb1cy8zhl",
+		kWkggS: "lbjbqb8w lbql1cz1",
+		kGVxlE: "lb11szn1f",
+		kMwMTN: "lb1heor9g",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k7Eaqz: "lbeuugli",
+		kGO01o: "lb1l90r2v",
+		kLKAdn: "lbyinxu5",
+		kVAEAm: "lb1n2onr6",
+		k9WMMc: "lb1yc453h",
+		kcktkL: "lbb7ltuz",
+		ks3ayO: "lbyhc2n1",
+		k4zj60: "lbar2jh8",
+		k5JduY: "lb1s928wv",
+		k8Iv0R: "lbexwc5z",
+		kwXMNM: "lb1j6awrg",
+		$$css: true
+	},
+	cellActive: {
+		kWkggS: "lbaljia1",
+		ks3ayO: "lb1qvhnq6",
+		$$css: true
+	},
+	count: {
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lb1x0ry8x",
+		kcqcaj: "lbss6m8b",
+		k63SB2: "lb1s688f",
+		kLWn49: "lb1uo3zyz",
+		$$css: true
+	},
+	countDanger: {
+		kMwMTN: "lb12ap7uz",
+		$$css: true
+	},
+	countWarning: {
+		kMwMTN: "lbgyvj36",
+		$$css: true
+	},
+	frame: {
+		"--filter-seam": "lb1iv4l33",
+		kaIpWk: "lb1pjcqnp",
+		kVQacm: "lbb3r6kr",
+		$$css: true
+	},
+	grid: {
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lbwqfyl0",
+		kzqmXN: "lbjl7whj",
+		k1K539: "lb1jyxor1",
+		$$css: true
+	},
+	label: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb4z9k3i",
+		k63SB2: "lbk50ysn",
+		kLWn49: "lb37zpob",
+		$$css: true
+	},
+	labelActive: {
+		kMwMTN: "lb66ogz0",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterStrip/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  cell: {\n    'font': 'inherit',\n    'margin': 0,\n    'borderWidth': 0,\n    'gap': 6,\n    'paddingInline': 16,\n    'alignItems': 'flex-start',\n    'backgroundColor': { 'default': 'transparent', ':hover': cssVar.colorFillQuaternary },\n    'boxShadow': 'inset -1px 0 0 var(--filter-seam), inset 0 -1px 0 var(--filter-seam)',\n    'color': 'inherit',\n    'cursor': 'pointer',\n    'display': 'flex',\n    'flexDirection': 'column',\n    'minInlineSize': 0,\n    'paddingBlockEnd': 16,\n    'paddingBlockStart': 14,\n    'position': 'relative',\n    'textAlign': 'start',\n    '::after': {\n      insetInline: 0,\n      backgroundColor: 'transparent',\n      blockSize: 3,\n      content: '\"\"',\n      insetBlockEnd: 1,\n      position: 'absolute',\n    },\n  },\n  cellActive: {\n    'backgroundColor': cssVar.colorFillTertiary,\n    '::after': {\n      backgroundColor: cssVar.colorText,\n    },\n  },\n  count: {\n    color: cssVar.colorText,\n    fontSize: cssVar.fontSizeHeading4,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 600,\n    lineHeight: 1.15,\n  },\n  countDanger: {\n    color: cssVar.colorError,\n  },\n  countWarning: {\n    color: cssVar.colorWarning,\n  },\n  frame: {\n    '--filter-seam': `var(--lobe-fill-border, ${cssVar.colorFill})`,\n    'borderRadius': 'inherit',\n    'overflow': 'hidden',\n  },\n  grid: {\n    display: 'grid',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(148px, 1fr))',\n    inlineSize: 'calc(100% + 1px)',\n    marginBlockEnd: -1,\n  },\n  label: {\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    fontWeight: 500,\n    lineHeight: 1.4,\n  },\n  labelActive: {\n    color: cssVar.colorText,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,iBAAiB;EACjB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/dashboard/FilterStrip/type.d.ts
+export interface FilterStripItem {
+  count?: number;
+  /** Shown as the control's title. Definitions stay off the number so the row can be scanned. */
+  hint?: string;
+  key: string;
+  label: ReactNode;
+  loading?: boolean;
+  /** Colors the count only when it is greater than zero; a zero is not an incident. */
+  tone?: 'danger' | 'warning';
+}
+export interface FilterStripProps {
+  /** Shown when an item has no count. Defaults to `--`. */
+  emptyText?: ReactNode;
+  /** Formats a count. Defaults to a grouped integer, e.g. `12,345`. */
+  formatCount?: (count: number) => ReactNode;
+  items: FilterStripItem[];
+  /** Accessible name for the radio group. */
+  label: string;
+  onChange: (key: string) => void;
+  value: string;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/LabelWithKey/LabelWithKey.d.mts

@@ -0,0 +1,10 @@
+import { LabelWithKeyProps } from "./type.mjs";
+//#region src/dashboard/LabelWithKey/LabelWithKey.d.ts
+/** A human label followed by its machine key as a tag. */
+declare const LabelWithKey: {
+  ({ tag, title, ...rest }: LabelWithKeyProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { LabelWithKey as default };
+//# sourceMappingURL=LabelWithKey.d.mts.map

package/es/dashboard/LabelWithKey/LabelWithKey.mjs

@@ -0,0 +1,18 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Tag from "../../Tag/Tag.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/dashboard/LabelWithKey/LabelWithKey.tsx
+/** A human label followed by its machine key as a tag. */
+const LabelWithKey = ({ tag, title, ...rest }) => /* @__PURE__ */ jsxs(FlexBasic_default, {
+	horizontal: true,
+	align: "center",
+	gap: 8,
+	...rest,
+	children: [title, /* @__PURE__ */ jsx(Tag, { children: tag })]
+});
+LabelWithKey.displayName = "LabelWithKey";
+//#endregion
+export { LabelWithKey as default };
+
+//# sourceMappingURL=LabelWithKey.mjs.map

package/es/dashboard/LabelWithKey/LabelWithKey.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelWithKey.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/LabelWithKey/LabelWithKey.tsx"],"sourcesContent":["'use client';\n\nimport { Flexbox } from '@/Flex';\nimport Tag from '@/Tag';\n\nimport type { LabelWithKeyProps } from './type';\n\n/** A human label followed by its machine key as a tag. */\nconst LabelWithKey = ({ tag, title, ...rest }: LabelWithKeyProps) => (\n  <Flexbox horizontal align={'center'} gap={8} {...rest}>\n    {title}\n    <Tag>{tag}</Tag>\n  </Flexbox>\n);\n\nLabelWithKey.displayName = 'LabelWithKey';\n\nexport default LabelWithKey;\n"],"mappings":";;;;;;AAQA,MAAM,gBAAgB,EAAE,KAAK,OAAO,GAAG,WACrC,qBAACA,mBAAD;CAAS,YAAA;CAAW,OAAO;CAAU,KAAK;CAAG,GAAI;CAAjD,UAAA,CACG,OACD,oBAAC,KAAD,EAAA,UAAM,IAAS,CAAA,CACR;;AAGX,aAAa,cAAc"}

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

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

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

@@ -0,0 +1,11 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/LabelWithKey/type.d.ts
+export interface LabelWithKeyProps extends Omit<FlexboxProps, 'title'> {
+  /** The machine key shown as a tag after the label, e.g. a config or permission id. */
+  tag: ReactNode;
+  title: ReactNode;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map