@lobehub/ui 5.57.3 → 5.59.0

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  workspace: css`\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-inline-size: 0;\n    min-block-size: 0;\n    margin-block: ${WORKSPACE_INSET}px;\n    margin-inline: 0 ${WORKSPACE_INSET}px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    ${responsive.laptop} {\n      margin: 0;\n      border: none;\n      border-radius: 0;\n      box-shadow: none;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,sBAAsB;AAG5B,MAAM,2BAA2B;AACjC,MAAM,kBAAkB;;;;;AAMxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;0BAMc,gBAAgB;;;aAG7B,OAAO,UAAU;;;MAGxB,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;CAIf,aAAa,GAAG;;;;;;;;;;CAUhB,aAAa,GAAG;;;;;;CAMhB,WAAW,GAAG;;;;;;aAMH,OAAO,UAAU;;;;;;;;;;;;;;;;CAgB5B,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;MAqBL,WAAW,OAAO;;;;;;;;;CAStB,YAAY,GAAG;;;;;;CAMf,SAAS,GAAG;;;;;;CAMZ,OAAO,GAAG;;;;;;;;kBAQM,OAAO,cAAc;;CAErC,SAAS,GAAG;;;;;;mBAMK,oBAAoB;;;;;;;qBAOlB,yBAAyB;;;;;;;MAOxC,WAAW,OAAO;;;;CAItB,eAAe,GAAG;;;;CAIlB,UAAU,GAAG;;;;;;;;qBAQM,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;CAMvC,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;;kBAOF,OAAO,qBAAqB;;CAE5C,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;;;;CAQV,WAAW,GAAG;;;;;;;;oBAQI,gBAAgB;uBACb,gBAAgB;wBACf,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;kBAEzB,OAAO,iBAAiB;kBACxB,OAAO,kBAAkB;;MAErC,WAAW,OAAO;;;;;;;AAOxB,EAAE"}

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;

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,51 @@
+"use client";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles } 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.countDanger,
+	warning: styles.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, { children: /* @__PURE__ */ jsx("div", {
+	"aria-label": label,
+	className: styles.frame,
+	role: "radiogroup",
+	children: /* @__PURE__ */ jsx("div", {
+		className: styles.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.cell, active && styles.cellActive),
+				role: "radio",
+				title: item.hint,
+				type: "button",
+				onClick: () => onChange(item.key),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cx(styles.label, active && styles.labelActive),
+					children: item.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: cx(styles.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":[],"sources":["../../../src/dashboard/FilterStrip/FilterStrip.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\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>\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":";;;;;;;AAUA,MAAM,aAAa;CACjB,QAAQ,OAAO;CACf,SAAS,OAAO;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,EAAA,UACE,oBAAC,OAAD;CAAK,cAAY;CAAO,WAAW,OAAO;CAAO,MAAK;CACpD,UAAA,oBAAC,OAAD;EAAK,WAAW,OAAO;EACpB,UAAA,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,KAAK,QAAQ;GAC5B,MAAM,UAAU,KAAK,UAAU,KAAA,KAAa,KAAK,UAAU;GAC3D,MAAM,YAAY,KAAK,QAAQ,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ;GAE9E,OACE,qBAAC,UAAD;IACE,gBAAc;IACd,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,UAAU;IAEtD,MAAK;IACL,OAAO,KAAK;IACZ,MAAK;IACL,eAAe,SAAS,KAAK,GAAG;IAPlC,UAAA,CASE,oBAAC,QAAD;KAAM,WAAW,GAAG,OAAO,OAAO,UAAU,OAAO,WAAW;KAAI,UAAA,KAAK;IAAY,CAAA,GACnF,oBAAC,QAAD;KAAM,WAAW,GAAG,OAAO,OAAO,aAAa,WAAW,KAAK,KAAM;KAClE,UAAA,KAAK,UACJ,oBAAC,UAAD;MAAU,QAAQ;MAAI,QAAQ;MAAG,OAAO;KAAK,CAAA,IAC3C,UACF,YAEA,YAAY,KAAK,KAAM;IAErB,CAAA,CACA;GAhBD,GAAA,KAAK,GAgBJ;EAEZ,CAAC;CACE,CAAA;AACF,CAAA,EACE,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,93 @@
+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: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+
+    overflow: hidden;
+  `,
+	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: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n\n    overflow: hidden;\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;wCAC4B,OAAO,UAAU;;;;CAIvD,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/MetricStrip.d.mts

@@ -0,0 +1,10 @@
+import { MetricStripProps } from "./type.mjs";
+//#region src/dashboard/MetricStrip/MetricStrip.d.ts
+/** One card, divided into metrics. Peer numbers share a surface instead of a row of equal cards. */
+declare const MetricStrip: {
+  ({ items, loading, renderLink }: MetricStripProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { MetricStrip as default };
+//# sourceMappingURL=MetricStrip.d.mts.map

package/es/dashboard/MetricStrip/MetricStrip.mjs

@@ -0,0 +1,76 @@
+"use client";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
+import { useSurfaceLink } from "../Surface/link.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/MetricStrip/MetricStrip.tsx
+const deltaClass = {
+	down: styles.deltaDown,
+	flat: styles.deltaFlat,
+	up: styles.deltaUp
+};
+const MetricBody = ({ item, loading }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx("div", {
+		className: styles.label,
+		children: item.label
+	}),
+	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 card, divided into metrics. Peer numbers share a surface instead of a row of equal cards. */
+const MetricStrip = ({ items, loading, renderLink }) => {
+	const link = useSurfaceLink(renderLink);
+	return /* @__PURE__ */ jsx(Surface, { children: /* @__PURE__ */ jsx("div", {
+		className: styles.frame,
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles.grid,
+			children: items.map((item, index) => {
+				const body = /* @__PURE__ */ jsx(MetricBody, {
+					item,
+					loading: item.loading ?? loading
+				});
+				if (item.href) return /* @__PURE__ */ jsx("div", {
+					className: styles.slot,
+					children: link({
+						children: body,
+						className: cx(styles.cell, styles.link),
+						href: item.href
+					})
+				}, `${index}:${item.href}`);
+				if (item.onClick) return /* @__PURE__ */ jsx("button", {
+					className: cx(styles.cell, styles.press),
+					type: "button",
+					onClick: item.onClick,
+					children: body
+				}, index);
+				return /* @__PURE__ */ jsx("div", {
+					className: styles.cell,
+					children: body
+				}, index);
+			})
+		})
+	}) });
+};
+MetricStrip.displayName = "MetricStrip";
+//#endregion
+export { MetricStrip as default };
+
+//# sourceMappingURL=MetricStrip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricStrip.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/MetricStrip.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { MetricItem, MetricStripProps } 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.label}>{item.label}</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\n/** One card, divided into metrics. Peer numbers share a surface instead of a row of equal cards. */\nconst MetricStrip = ({ items, loading, renderLink }: MetricStripProps) => {\n  const link = useSurfaceLink(renderLink);\n\n  return (\n    <Surface>\n      <div className={styles.frame}>\n        <div className={styles.grid}>\n          {items.map((item, index) => {\n            const body = <MetricBody item={item} loading={item.loading ?? loading} />;\n            if (item.href) {\n              return (\n                <div className={styles.slot} key={`${index}:${item.href}`}>\n                  {link({\n                    children: body,\n                    className: cx(styles.cell, styles.link),\n                    href: item.href,\n                  })}\n                </div>\n              );\n            }\n            if (item.onClick) {\n              return (\n                <button\n                  className={cx(styles.cell, styles.press)}\n                  key={index}\n                  type=\"button\"\n                  onClick={item.onClick}\n                >\n                  {body}\n                </button>\n              );\n            }\n            return (\n              <div className={styles.cell} key={index}>\n                {body}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </Surface>\n  );\n};\n\nMetricStrip.displayName = 'MetricStrip';\n\nexport default MetricStrip;\n"],"mappings":";;;;;;;;AAWA,MAAM,aAAa;CACjB,MAAM,OAAO;CACb,MAAM,OAAO;CACb,IAAI,OAAO;AACb;AAEA,MAAM,cAAc,EAAE,MAAM,cAC1B,qBAAA,UAAA,EAAA,UAAA;CACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAQ,UAAA,KAAK;CAAW,CAAA;CAC9C,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;;AAIJ,MAAM,eAAe,EAAE,OAAO,SAAS,iBAAmC;CACxE,MAAM,OAAO,eAAe,UAAU;CAEtC,OACE,oBAAC,SAAD,EAAA,UACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAW,OAAO;GACpB,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,OAAO,oBAAC,YAAD;KAAkB;KAAM,SAAS,KAAK,WAAW;IAAU,CAAA;IACxE,IAAI,KAAK,MACP,OACE,oBAAC,OAAD;KAAK,WAAW,OAAO;KACpB,UAAA,KAAK;MACJ,UAAU;MACV,WAAW,GAAG,OAAO,MAAM,OAAO,IAAI;MACtC,MAAM,KAAK;KACb,CAAC;IACE,GAN6B,GAAG,MAAM,GAAG,KAAK,MAM9C;IAGT,IAAI,KAAK,SACP,OACE,oBAAC,UAAD;KACE,WAAW,GAAG,OAAO,MAAM,OAAO,KAAK;KAEvC,MAAK;KACL,SAAS,KAAK;KAEb,UAAA;IACK,GALD,KAKC;IAGZ,OACE,oBAAC,OAAD;KAAK,WAAW,OAAO;KACpB,UAAA;IACE,GAF6B,KAE7B;GAET,CAAC;EACE,CAAA;CACF,CAAA,EACE,CAAA;AAEb;AAEA,YAAY,cAAc"}

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

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

package/es/dashboard/MetricStrip/style.mjs

@@ -0,0 +1,116 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/MetricStrip/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	cell: css`
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    min-inline-size: 0;
+    padding-block: 16px;
+    padding-inline: 20px;
+
+    background: ${cssVar.colorBgElevated};
+    box-shadow:
+      inset -1px 0 0 var(--metric-seam),
+      inset 0 -1px 0 var(--metric-seam);
+  `,
+	delta: css`
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.4;
+  `,
+	deltaDown: css`
+    color: ${cssVar.colorError};
+  `,
+	deltaFlat: css`
+    color: ${cssVar.colorTextSecondary};
+  `,
+	deltaUp: css`
+    color: ${cssVar.colorSuccess};
+  `,
+	foot: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: baseline;
+  `,
+	/**
+	* Clips the seam that would otherwise sit on the card's trailing and bottom
+	* edges. A short last row used to show the seam color across the empty
+	* track, which reads louder than the cells.
+	*/
+	frame: css`
+    --metric-seam: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+
+    overflow: hidden;
+    background: ${cssVar.colorBgElevated};
+  `,
+	grid: css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+
+    inline-size: calc(100% + 1px);
+    margin-block-end: -1px;
+
+    background: ${cssVar.colorBgElevated};
+  `,
+	hint: css`
+    font-size: 13px;
+    line-height: 1.4;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	label: css`
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	link: css`
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	press: css`
+    cursor: pointer;
+
+    border: none;
+
+    font: inherit;
+    color: inherit;
+    text-align: start;
+
+    &:hover {
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	/** Grid cell around a rendered link, so the link fills it. */
+	slot: css`
+    display: grid;
+    min-inline-size: 0;
+  `,
+	value: css`
+    overflow: hidden;
+
+    font-size: ${cssVar.fontSizeHeading3};
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.15;
+    color: ${cssVar.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	valueDanger: css`
+    color: ${cssVar.colorError};
+  `,
+	valueWarning: css`
+    color: ${cssVar.colorWarning};
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n\n    min-inline-size: 0;\n    padding-block: 16px;\n    padding-inline: 20px;\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow:\n      inset -1px 0 0 var(--metric-seam),\n      inset 0 -1px 0 var(--metric-seam);\n  `,\n  delta: css`\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n  `,\n  deltaDown: css`\n    color: ${cssVar.colorError};\n  `,\n  deltaFlat: css`\n    color: ${cssVar.colorTextSecondary};\n  `,\n  deltaUp: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  foot: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: baseline;\n  `,\n  /**\n   * Clips the seam that would otherwise sit on the card's trailing and bottom\n   * edges. A short last row used to show the seam color across the empty\n   * track, which reads louder than the cells.\n   */\n  frame: css`\n    --metric-seam: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n\n    overflow: hidden;\n    background: ${cssVar.colorBgElevated};\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  hint: css`\n    font-size: 13px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  link: css`\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  press: css`\n    cursor: pointer;\n\n    border: none;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  value: css`\n    overflow: hidden;\n\n    font-size: ${cssVar.fontSizeHeading3};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  valueDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  valueWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;kBASO,OAAO,gBAAgB;;;;;CAKvC,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;wCAC4B,OAAO,UAAU;;;kBAGvC,OAAO,gBAAgB;;CAEvC,MAAM,GAAG;;;;;;;kBAOO,OAAO,gBAAgB;;CAEvC,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}

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

@@ -0,0 +1,25 @@
+import { SurfaceRenderLink } from "../Surface/type.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/MetricStrip/type.d.ts
+interface MetricItem {
+  delta?: ReactNode;
+  direction?: 'up' | 'down' | 'flat';
+  hint?: ReactNode;
+  href?: string;
+  label: ReactNode;
+  /** This cell only. Cells fed by different queries arrive at different times. */
+  loading?: boolean;
+  onClick?: () => void;
+  value: ReactNode;
+  /** Color the figure when the number itself is the thing to act on. */
+  valueTone?: 'danger' | 'warning';
+}
+interface MetricStripProps {
+  items: MetricItem[];
+  /** First load only: values become placeholders, labels stay. */
+  loading?: boolean;
+  renderLink?: SurfaceRenderLink;
+}
+//#endregion
+export { MetricItem, MetricStripProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/PageToolbar/PageToolbar.d.mts

@@ -0,0 +1,10 @@
+import { PageToolbarProps } from "./type.mjs";
+//#region src/dashboard/PageToolbar/PageToolbar.d.ts
+/** Filters start at the left edge; actions hold the right edge, also after wrapping. */
+declare const PageToolbar: {
+  ({ actions, children, className }: PageToolbarProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { PageToolbar as default };
+//# sourceMappingURL=PageToolbar.d.mts.map

package/es/dashboard/PageToolbar/PageToolbar.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/PageToolbar/PageToolbar.tsx
+/** Filters start at the left edge; actions hold the right edge, also after wrapping. */
+const PageToolbar = ({ actions, children, className }) => /* @__PURE__ */ jsxs("div", {
+	className: cx(styles.root, className),
+	children: [children ? /* @__PURE__ */ jsx("div", {
+		className: styles.filters,
+		children
+	}) : null, actions ? /* @__PURE__ */ jsx("div", {
+		className: styles.actions,
+		children: actions
+	}) : null]
+});
+PageToolbar.displayName = "PageToolbar";
+//#endregion
+export { PageToolbar as default };
+
+//# sourceMappingURL=PageToolbar.mjs.map

package/es/dashboard/PageToolbar/PageToolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageToolbar.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/PageToolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { styles } from './style';\nimport type { PageToolbarProps } from './type';\n\n/** Filters start at the left edge; actions hold the right edge, also after wrapping. */\nconst PageToolbar = ({ actions, children, className }: PageToolbarProps) => (\n  <div className={cx(styles.root, className)}>\n    {children ? <div className={styles.filters}>{children}</div> : null}\n    {actions ? <div className={styles.actions}>{actions}</div> : null}\n  </div>\n);\n\nPageToolbar.displayName = 'PageToolbar';\n\nexport default PageToolbar;\n"],"mappings":";;;;;;AAQA,MAAM,eAAe,EAAE,SAAS,UAAU,gBACxC,qBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAzC,UAAA,CACG,WAAW,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAU;CAAc,CAAA,IAAI,MAC9D,UAAU,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAU,UAAA;CAAa,CAAA,IAAI,IAC1D;;AAGP,YAAY,cAAc"}

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

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

package/es/dashboard/PageToolbar/style.mjs

@@ -0,0 +1,34 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/PageToolbar/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	actions: css`
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+
+    margin-inline-start: auto;
+  `,
+	filters: css`
+    display: flex;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+
+    min-inline-size: 0;
+  `,
+	root: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    align-items: center;
+
+    min-inline-size: 0;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  actions: css`\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    margin-inline-start: auto;\n  `,\n  filters: css`\n    display: flex;\n    flex: 0 1 auto;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  root: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 12px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,SAAS,GAAG;;;;;;;;;CASZ,SAAS,GAAG;;;;;;;;;CASZ,MAAM,GAAG;;;;;;;;AAQX,EAAE"}

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

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+//#region src/dashboard/PageToolbar/type.d.ts
+interface PageToolbarProps {
+  /** Right side: refresh, export, the page's own buttons. */
+  actions?: ReactNode;
+  /** Left side: range, scope, search, whatever narrows the page. */
+  children?: ReactNode;
+  className?: string;
+}
+//#endregion
+export { PageToolbarProps };
+//# sourceMappingURL=type.d.mts.map