@lobehub/ui 5.58.0 → 5.60.0

package/es/dashboard/ConsoleShell/style.mjs

@@ -23,6 +23,11 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     ${responsive.laptop} {
       margin-block-start: 0;
     }
+  `,
+	/** Close button in the drawer's brand row: right edge, vertically centred with the brand. */
+	brandClose: css`
+    flex: none;
+    margin-inline: auto -7px;
   `,
 	brandAnchor: css`
     display: flex;
@@ -87,6 +92,16 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
       gap: 16px;
       padding: 16px;
     }
+  `,
+	/**
+	* The drawer body is the scroll container. Without its default padding the scrollbar sits on
+	* the panel edge; the brand row, nav and footer keep their own insets.
+	*/
+	drawerBody: css`
+    && {
+      min-block-size: 100%;
+      padding: 0;
+    }
   `,
 	navSlot: css`
     display: flex;
@@ -182,6 +197,12 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     align-items: center;
 
     margin-inline-start: auto;
+  `,
+	/** Light only: the content area sits midway between the layout canvas and container white. */
+	workspaceLight: css`
+    && {
+      background: color-mix(in srgb, ${cssVar.colorBgLayout} 50%, ${cssVar.colorBgContainer});
+    }
   `,
 	workspace: css`
     overflow: hidden;

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

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

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

@@ -38,6 +38,8 @@ interface ConsoleShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
   /** 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 @@ interface ConsoleShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    * @default true
    */
   hotkey?: boolean;
+  /**
+   * Swap navigation and footer for skeletons, and render `loadingContent` (default `PageLoading`)
+   * in place of children. Brand, tools and `storageKey` still come from the caller.
+   */
+  loading?: boolean;
+  /** Body while `loading`. Defaults to `<PageLoading />`. */
+  loadingContent?: ReactNode;
+  /** Skeleton nav shape while `loading`. Pass the real groups to mirror their row counts. */
+  loadingNavigation?: ReactNode;
   /** Grouped navigation. Collapsed state comes from the shell. */
   navigation?: ReactNode;
   onCollapsedChange?: (collapsed: boolean) => void;

package/es/dashboard/FilterSidebar/FilterSidebar.mjs

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

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 { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { DraggablePanel } from '@/base-ui/DraggablePanel';\nimport { Drawer } from '@/base-ui/Drawer';\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\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 className={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 className={styles.drawerPanel}>\n              {head?.(close)}\n              {body(close)}\n            </div>\n          </Drawer>\n          <div className={styles.content}>{children}</div>\n        </div>\n      </FilterSplitProvider>\n    );\n  }\n\n  return (\n    <FilterSplitProvider active={!flush}>\n      <div\n        className={flush ? styles.layout : `${styles.layout} ${surfaceStyles.card}`}\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={styles.sidebar}\n          classNames={{ content: styles.panel }}\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          onExpandChange={sidebar.onExpandChange}\n          onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n        >\n          {head ? <div className={styles.head}>{head(close)}</div> : null}\n          <div className={styles.body} data-flush={flush ? true : undefined}>\n            {body(close)}\n          </div>\n        </DraggablePanel>\n        <div className={styles.content} data-flush={flush ? true : undefined}>\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 className={styles.row}>\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={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      className={styles.option}\n      title={title}\n      type=\"button\"\n      onClick={onClick}\n    >\n      {icon}\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={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 { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { DraggablePanel } from '@/base-ui/DraggablePanel';\nimport { Drawer } from '@/base-ui/Drawer';\n\nimport { useIsCompact, useLocalStorage } from '../hooks';\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { FilterSplitProvider } from './context';\nimport { styles } from './style';\nimport type { FilterOptionProps, FilterRowProps, FilterSidebarProps } from './type';\nimport { clampSidebarWidth, sidebarWidth } from './width';\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 cardClassName = useSurfaceCardClassName();\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 className={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 className={styles.drawerPanel}>\n              {head?.(close)}\n              {body(close)}\n            </div>\n          </Drawer>\n          <div className={styles.content}>{children}</div>\n        </div>\n      </FilterSplitProvider>\n    );\n  }\n\n  return (\n    <FilterSplitProvider active={!flush}>\n      <div\n        className={flush ? styles.layout : `${styles.layout} ${cardClassName}`}\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={styles.sidebar}\n          classNames={{ content: styles.panel }}\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          onExpandChange={sidebar.onExpandChange}\n          onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n        >\n          {head ? <div className={styles.head}>{head(close)}</div> : null}\n          <div className={styles.body} data-flush={flush ? true : undefined}>\n            {body(close)}\n          </div>\n        </DraggablePanel>\n        <div className={styles.content} data-flush={flush ? true : undefined}>\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 className={styles.row}>\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={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      className={styles.option}\n      title={title}\n      type=\"button\"\n      onClick={onClick}\n    >\n      {icon}\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </button>\n  );\n}\n\nFilterOption.displayName = 'FilterOption';\n\nexport { FilterOption, FilterRow };\nexport default FilterSidebar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,SAAS,eAAe,MAA2B,YAAgC;CACjF,MAAM,WAAW,OAAO,aAAa,OAAO,aAAa;CACzD,MAAM,CAAC,OAAO,YAAY,gBAAsD,YAAY;EAC1F,QAAQ;EACR,OAAO;CACT,CAAC;CACD,OAAO;EACL,QAAQ,MAAM,WAAW;EACzB,iBAAiB,WAAoB,UAAU,aAAa;GAAE,GAAG;GAAS;EAAO,EAAE;EACnF,eAAe,SAAsC;GACnD,MAAM,OAAO,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ;GAC3D,UAAU,aAAa;IAAE,GAAG;IAAS,OAAO,kBAAkB,MAAM,QAAQ;GAAE,EAAE;EAClF;EACA,OAAO,kBAAkB,OAAO,MAAM,KAAK,GAAG,QAAQ;CACxD;AACF;AAEA,SAAS,cAAc,EACrB,MACA,UACA,OACA,MACA,QACA,OACA,YACA,SACA,QACqB;CACrB,MAAM,gBAAgB,wBAAwB;CAC9C,MAAM,YAAY,aAAa;CAC/B,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,UAAU,eAAe,MAAM,UAAU;CAC/C,MAAM,cAAc,cAAc,KAAK;CAEvC,IAAI,WACF,OACE,oBAAC,qBAAD;EAAqB,QAAQ,CAAC;EAC5B,UAAA,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA;IACG;IACD,oBAAC,QAAD;KAAQ,OAAA;KAAM,MAAM;KAAQ,eAAe,cAAc,IAAI;KAC1D,UAAA;IACK,CAAA;IACR,oBAAC,QAAD;KAAQ,MAAM;KAAY,WAAU;KAAO,OAAO;KAAO,OAAO;KAAK,SAAS;KAC5E,UAAA,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA,CACG,OAAO,KAAK,GACZ,KAAK,KAAK,CACR;;IACC,CAAA;IACR,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAU;IAAc,CAAA;GAC5C;;CACc,CAAA;CAIzB,OACE,oBAAC,qBAAD;EAAqB,QAAQ,CAAC;EAC5B,UAAA,qBAAC,OAAD;GACE,WAAW,QAAQ,OAAO,SAAS,GAAG,OAAO,OAAO,GAAG;GACvD,cAAY,QAAQ,OAAO,KAAA;GAC3B,oBAAkB,QAAQ,UAAU,KAAA;GACpC,mBAAiB,QAAQ,KAAA,IAAY;GAJvC,UAAA,CAME,qBAAC,gBAAD;IACE,YAAA;IACA,yBAAA;IACA,cAAY;IACZ,WAAW,OAAO;IAClB,YAAY,EAAE,SAAS,OAAO,MAAM;IACpC,mBAAmB,aAAa;IAChC,cAAY,QAAQ,OAAO,KAAA;IAC3B,aAAa,EAAE,OAAO,OAAO,aAAa,OAAO,aAAa,OAAO;IACrE,QAAQ,QAAQ;IAChB,UAAU,aAAa;IACvB,UAAU,aAAa;IACvB,MAAK;IACL,WAAU;IACV,YAAY;IACZ,MAAM,EAAE,OAAO,QAAQ,MAAM;IAC7B,gBAAgB,QAAQ;IACxB,eAAe,QAAQ,SAAS,QAAQ,aAAa,IAAI;IAjB3D,UAAA,CAmBG,OAAO,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAO,UAAA,KAAK,KAAK;IAAO,CAAA,IAAI,MAC3D,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAM,cAAY,QAAQ,OAAO,KAAA;KACrD,UAAA,KAAK,KAAK;IACR,CAAA,CACS;GAChB,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAS,cAAY,QAAQ,OAAO,KAAA;IAA3D,UAAA,CACG,QACA,QACE;GACF,CAAA,CAAA;;CACc,CAAA;AAEzB;AAEA,cAAc,cAAc;AAE5B,SAAS,UAAU,EAAE,OAAO,QAAwB;CAClD,OACE,qBAAC,QAAD;EAAM,WAAW,OAAO;EAAxB,UAAA,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA;EAAW,CAAA,GACzC,UAAU,KAAA,IAAY,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAQ,UAAA;EAAY,CAAA,IAAI,IACnE;;AAEV;AAEA,UAAU,cAAc;AAExB,SAAS,aAAa,EAAE,OAAO,MAAM,OAAO,MAAM,SAAS,UAAU,SAA4B;CAC/F,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,gBAAc;EACd,WAAW,OAAO;EACX;EACP,MAAK;EACI;EANX,UAAA;GAQG;GACD,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,UAAA;GAAW,CAAA;GACzC,UAAU,KAAA,IAAY,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAQ,UAAA;GAAY,CAAA,IAAI;EACjE;;AAEZ;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,11 @@
+import { FilterStripProps } from "./type.mjs";
+//#region src/dashboard/FilterStrip/FilterStrip.d.ts
+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, formatInteger };
+//# sourceMappingURL=FilterStrip.d.mts.map

package/es/dashboard/FilterStrip/FilterStrip.mjs

@@ -0,0 +1,55 @@
+"use client";
+import Skeleton from "../../base-ui/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 { cx } from "antd-style";
+//#region src/dashboard/FilterStrip/FilterStrip.tsx
+const countClass = {
+	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: styles.clip,
+	children: /* @__PURE__ */ jsx("div", {
+		"aria-label": label,
+		className: styles$1.frame,
+		role: "radiogroup",
+		children: /* @__PURE__ */ jsx("div", {
+			className: 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,
+					className: cx(styles$1.cell, active && styles$1.cellActive),
+					role: "radio",
+					title: item.hint,
+					type: "button",
+					onClick: () => onChange(item.key),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx(styles$1.label, active && styles$1.labelActive),
+						children: item.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: cx(styles$1.count, emphasize && countClass[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 { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/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 countClass = {\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={surfaceStyles.clip}>\n    <div aria-label={label} className={styles.frame} role=\"radiogroup\">\n      <div className={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              className={cx(styles.cell, active && styles.cellActive)}\n              key={item.key}\n              role=\"radio\"\n              title={item.hint}\n              type=\"button\"\n              onClick={() => onChange(item.key)}\n            >\n              <span className={cx(styles.label, active && styles.labelActive)}>{item.label}</span>\n              <span className={cx(styles.count, emphasize && countClass[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":";;;;;;;;AAWA,MAAM,aAAa;CACjB,QAAQA,SAAO;CACf,SAASA,SAAO;AAClB;AAEA,MAAM,gBAAgB,IAAI,KAAK,aAAa,SAAS,EAAE,uBAAuB,EAAE,CAAC;AAEjF,MAAa,iBAAiB,UAAkB,cAAc,OAAO,KAAK;;AAG1E,MAAM,eAAe,EACnB,YAAY,MACZ,cAAc,eACd,OACA,OACA,UACA,YAEA,oBAAC,SAAD;CAAS,WAAWC,OAAc;CAChC,UAAA,oBAAC,OAAD;EAAK,cAAY;EAAO,WAAWD,SAAO;EAAO,MAAK;EACpD,UAAA,oBAAC,OAAD;GAAK,WAAWA,SAAO;GACpB,UAAA,MAAM,KAAK,SAAS;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;IAE9E,OACE,qBAAC,UAAD;KACE,gBAAc;KACd,WAAW,GAAGA,SAAO,MAAM,UAAUA,SAAO,UAAU;KAEtD,MAAK;KACL,OAAO,KAAK;KACZ,MAAK;KACL,eAAe,SAAS,KAAK,GAAG;KAPlC,UAAA,CASE,oBAAC,QAAD;MAAM,WAAW,GAAGA,SAAO,OAAO,UAAUA,SAAO,WAAW;MAAI,UAAA,KAAK;KAAY,CAAA,GACnF,oBAAC,QAAD;MAAM,WAAW,GAAGA,SAAO,OAAO,aAAa,WAAW,KAAK,KAAM;MAClE,UAAA,KAAK,UACJ,oBAAC,UAAD;OAAU,QAAQ;OAAI,QAAQ;OAAG,OAAO;MAAK,CAAA,IAC3C,UACF,YAEA,YAAY,KAAK,KAAM;KAErB,CAAA,CACA;IAhBD,GAAA,KAAK,GAgBJ;GAEZ,CAAC;EACE,CAAA;CACF,CAAA;AACE,CAAA;AAGX,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,94 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/FilterStrip/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	cell: css`
+    cursor: pointer;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: flex-start;
+
+    min-inline-size: 0;
+    margin: 0;
+    padding-block: 14px 16px;
+    padding-inline: 16px;
+    border: 0;
+
+    font: inherit;
+    color: inherit;
+    text-align: start;
+
+    background: transparent;
+    box-shadow:
+      inset -1px 0 0 var(--filter-seam),
+      inset 0 -1px 0 var(--filter-seam);
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      inset-block-end: 1px;
+      inset-inline: 0;
+
+      block-size: 3px;
+
+      background: transparent;
+    }
+
+    &:hover {
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	cellActive: css`
+    background: ${cssVar.colorFillTertiary};
+
+    &::after {
+      background: ${cssVar.colorText};
+    }
+
+    &:hover {
+      background: ${cssVar.colorFillTertiary};
+    }
+  `,
+	count: css`
+    font-size: ${cssVar.fontSizeHeading4};
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.15;
+    color: ${cssVar.colorText};
+  `,
+	countDanger: css`
+    color: ${cssVar.colorError};
+  `,
+	countWarning: css`
+    color: ${cssVar.colorWarning};
+  `,
+	frame: css`
+    --filter-seam: ${cssVar.colorFillSecondary};
+
+    overflow: hidden;
+    border-radius: inherit;
+  `,
+	grid: css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
+    inline-size: calc(100% + 1px);
+    margin-block-end: -1px;
+  `,
+	label: css`
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	labelActive: css`
+    color: ${cssVar.colorText};
+  `
+}));
+//#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 { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-start;\n\n    min-inline-size: 0;\n    margin: 0;\n    padding-block: 14px 16px;\n    padding-inline: 16px;\n    border: 0;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    background: transparent;\n    box-shadow:\n      inset -1px 0 0 var(--filter-seam),\n      inset 0 -1px 0 var(--filter-seam);\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-end: 1px;\n      inset-inline: 0;\n\n      block-size: 3px;\n\n      background: transparent;\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  cellActive: css`\n    background: ${cssVar.colorFillTertiary};\n\n    &::after {\n      background: ${cssVar.colorText};\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n  count: css`\n    font-size: ${cssVar.fontSizeHeading4};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n  `,\n  countDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  countWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n  frame: css`\n    --filter-seam: ${cssVar.colorFillSecondary};\n\n    overflow: hidden;\n    border-radius: inherit;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  labelActive: css`\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAsCS,OAAO,oBAAoB;;;CAG7C,YAAY,GAAG;kBACC,OAAO,kBAAkB;;;oBAGvB,OAAO,UAAU;;;;oBAIjB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;iBACK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;CAE5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;CAE/B,OAAO,GAAG;qBACS,OAAO,mBAAmB;;;;;CAK7C,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,aAAa,GAAG;aACL,OAAO,UAAU;;AAE9B,EAAE"}

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

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+//#region src/dashboard/FilterStrip/type.d.ts
+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';
+}
+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
+export { FilterStripItem, FilterStripProps };
+//# 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 "../../base-ui/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 Tag from '@/base-ui/Tag';\nimport { Flexbox } from '@/Flex';\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,12 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/LabelWithKey/type.d.ts
+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
+export { LabelWithKeyProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/MetricStrip/MetricCell.mjs

@@ -0,0 +1,81 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
+import { useSurfaceLink } from "../Surface/link.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/MetricStrip/MetricCell.tsx
+const deltaClass = {
+	down: styles.deltaDown,
+	flat: styles.deltaFlat,
+	up: styles.deltaUp
+};
+const MetricBody = ({ item, loading }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsxs("div", {
+		className: styles.head,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.headCopy,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: styles.label,
+				children: item.label
+			}), item.action]
+		}), item.mark ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: styles.mark,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: item.mark,
+				size: 14
+			})
+		}) : null]
+	}),
+	loading ? /* @__PURE__ */ jsx(Skeleton, {
+		height: 28,
+		radius: 6,
+		width: 88
+	}) : /* @__PURE__ */ jsx("div", {
+		className: cx(styles.value, item.valueTone === "danger" && styles.valueDanger, item.valueTone === "warning" && styles.valueWarning),
+		children: item.value
+	}),
+	!loading && (item.delta || item.hint) ? /* @__PURE__ */ jsxs("div", {
+		className: styles.foot,
+		children: [item.delta ? /* @__PURE__ */ jsx("span", {
+			className: cx(styles.delta, deltaClass[item.direction ?? "flat"]),
+			children: item.delta
+		}) : null, item.hint ? /* @__PURE__ */ jsx("span", {
+			className: styles.hint,
+			children: item.hint
+		}) : null]
+	}) : null
+] });
+/** One metric: label row, figure, delta and hint. Shared by MetricStrip and StatCard. */
+const MetricCell = ({ item, loading, renderLink, seam = false }) => {
+	const link = useSurfaceLink(renderLink);
+	const body = /* @__PURE__ */ jsx(MetricBody, {
+		item,
+		loading: item.loading ?? loading
+	});
+	const cell = cx(styles.cell, seam && styles.cellSeam);
+	if (item.href) return /* @__PURE__ */ jsx("div", {
+		className: styles.slot,
+		children: link({
+			children: body,
+			className: cx(cell, styles.link),
+			href: item.href
+		})
+	});
+	if (item.onClick) return /* @__PURE__ */ jsx("button", {
+		className: cx(cell, styles.press),
+		type: "button",
+		onClick: item.onClick,
+		children: body
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cell,
+		children: body
+	});
+};
+//#endregion
+export { MetricCell as default };
+
+//# sourceMappingURL=MetricCell.mjs.map

package/es/dashboard/MetricStrip/MetricCell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCell.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/MetricCell.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Icon from '@/Icon';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport type { SurfaceRenderLink } from '../Surface/type';\nimport { styles } from './style';\nimport type { MetricItem } from './type';\n\nconst deltaClass = {\n  down: styles.deltaDown,\n  flat: styles.deltaFlat,\n  up: styles.deltaUp,\n} as const;\n\nconst MetricBody = ({ item, loading }: { item: MetricItem; loading?: boolean }) => (\n  <>\n    <div className={styles.head}>\n      <div className={styles.headCopy}>\n        <div className={styles.label}>{item.label}</div>\n        {item.action}\n      </div>\n      {item.mark ? (\n        <span aria-hidden className={styles.mark}>\n          <Icon icon={item.mark} size={14} />\n        </span>\n      ) : null}\n    </div>\n    {loading ? (\n      <Skeleton height={28} radius={6} width={88} />\n    ) : (\n      <div\n        className={cx(\n          styles.value,\n          item.valueTone === 'danger' && styles.valueDanger,\n          item.valueTone === 'warning' && styles.valueWarning,\n        )}\n      >\n        {item.value}\n      </div>\n    )}\n    {!loading && (item.delta || item.hint) ? (\n      <div className={styles.foot}>\n        {item.delta ? (\n          <span className={cx(styles.delta, deltaClass[item.direction ?? 'flat'])}>\n            {item.delta}\n          </span>\n        ) : null}\n        {item.hint ? <span className={styles.hint}>{item.hint}</span> : null}\n      </div>\n    ) : null}\n  </>\n);\n\nexport interface MetricCellProps {\n  item: MetricItem;\n  loading?: boolean;\n  renderLink?: SurfaceRenderLink;\n  /** Draw the joined-strip divider on the trailing and bottom edges. */\n  seam?: boolean;\n}\n\n/** One metric: label row, figure, delta and hint. Shared by MetricStrip and StatCard. */\nconst MetricCell = ({ item, loading, renderLink, seam = false }: MetricCellProps) => {\n  const link = useSurfaceLink(renderLink);\n  const body = <MetricBody item={item} loading={item.loading ?? loading} />;\n  const cell = cx(styles.cell, seam && styles.cellSeam);\n\n  if (item.href) {\n    return (\n      <div className={styles.slot}>\n        {link({ children: body, className: cx(cell, styles.link), href: item.href })}\n      </div>\n    );\n  }\n  if (item.onClick) {\n    return (\n      <button className={cx(cell, styles.press)} type=\"button\" onClick={item.onClick}>\n        {body}\n      </button>\n    );\n  }\n  return <div className={cell}>{body}</div>;\n};\n\nexport default MetricCell;\n"],"mappings":";;;;;;;;AAYA,MAAM,aAAa;CACjB,MAAM,OAAO;CACb,MAAM,OAAO;CACb,IAAI,OAAO;AACb;AAEA,MAAM,cAAc,EAAE,MAAM,cAC1B,qBAAA,UAAA,EAAA,UAAA;CACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,UAAA,KAAK;GAAW,CAAA,GAC9C,KAAK,MACH;EACJ,CAAA,GAAA,KAAK,OACJ,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAW,OAAO;GAClC,UAAA,oBAAC,MAAD;IAAM,MAAM,KAAK;IAAM,MAAM;GAAK,CAAA;EAC9B,CAAA,IACJ,IACD;;CACJ,UACC,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,IAE7C,oBAAC,OAAD;EACE,WAAW,GACT,OAAO,OACP,KAAK,cAAc,YAAY,OAAO,aACtC,KAAK,cAAc,aAAa,OAAO,YACzC;EAEC,UAAA,KAAK;CACH,CAAA;CAEN,CAAC,YAAY,KAAK,SAAS,KAAK,QAC/B,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,KAAK,QACJ,oBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,OAAO,WAAW,KAAK,aAAa,OAAO;GACnE,UAAA,KAAK;EACF,CAAA,IACJ,MACH,KAAK,OAAO,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA,KAAK;EAAW,CAAA,IAAI,IAC7D;CACH,CAAA,IAAA;AACJ,EAAA,CAAA;;AAYJ,MAAM,cAAc,EAAE,MAAM,SAAS,YAAY,OAAO,YAA6B;CACnF,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,OAAO,oBAAC,YAAD;EAAkB;EAAM,SAAS,KAAK,WAAW;CAAU,CAAA;CACxE,MAAM,OAAO,GAAG,OAAO,MAAM,QAAQ,OAAO,QAAQ;CAEpD,IAAI,KAAK,MACP,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EACpB,UAAA,KAAK;GAAE,UAAU;GAAM,WAAW,GAAG,MAAM,OAAO,IAAI;GAAG,MAAM,KAAK;EAAK,CAAC;CACxE,CAAA;CAGT,IAAI,KAAK,SACP,OACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,MAAM,OAAO,KAAK;EAAG,MAAK;EAAS,SAAS,KAAK;EACpE,UAAA;CACK,CAAA;CAGZ,OAAO,oBAAC,OAAD;EAAK,WAAW;EAAO,UAAA;CAAU,CAAA;AAC1C"}

package/es/dashboard/MetricStrip/MetricStrip.d.mts

@@ -0,0 +1,13 @@
+import { MetricStripProps } from "./type.mjs";
+//#region src/dashboard/MetricStrip/MetricStrip.d.ts
+/**
+ * Peer metrics. `joined` shares one card divided into cells; `split` gives each item its own card,
+ * identical to StatCard.
+ */
+declare const MetricStrip: {
+  ({ items, loading, renderLink, variant }: MetricStripProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { MetricStrip as default };
+//# sourceMappingURL=MetricStrip.d.mts.map