@lobehub/ui 5.59.0 → 5.61.0

package/es/dashboard/PageSkeleton/PageSkeleton.mjs

@@ -1,7 +1,7 @@
 "use client";
 import Skeleton from "../../base-ui/Skeleton/index.mjs";
-import { styles } from "../Surface/style.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import { useSurfaceCardClassName } from "../Surface/link.mjs";
+import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/dashboard/PageSkeleton/PageSkeleton.tsx
 const bone = {
@@ -17,7 +17,7 @@ const lineWidths = [
 function LoadingAnnouncer({ label }) {
 	return /* @__PURE__ */ jsx("output", {
 		"aria-live": "polite",
-		className: styles$1.srOnly,
+		className: styles.srOnly,
 		children: label
 	});
 }
@@ -25,43 +25,44 @@ LoadingAnnouncer.displayName = "LoadingAnnouncer";
 function PageHeaderSkeleton({ action = true }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		className: styles$1.header,
+		className: styles.header,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: styles$1.headerCopy,
+			className: styles.headerCopy,
 			children: [/* @__PURE__ */ jsx(Skeleton, {
-				className: styles$1.title,
+				className: styles.title,
 				style: bone
 			}), /* @__PURE__ */ jsx(Skeleton.Text, {
 				fontSize: 14,
 				width: "46%"
 			})]
 		}), action ? /* @__PURE__ */ jsx(Skeleton, {
-			className: styles$1.action,
+			className: styles.action,
 			style: bone
 		}) : null]
 	});
 }
 PageHeaderSkeleton.displayName = "PageHeaderSkeleton";
 function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
+	const cardClassName = useSurfaceCardClassName();
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		className: framed ? `${styles$1.table} ${styles.card}` : styles$1.table,
+		className: framed ? `${styles.table} ${cardClassName}` : styles.table,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: styles$1.thead,
+			className: styles.thead,
 			children: [
 				96,
 				72,
 				64,
 				48
 			].map((width, index) => /* @__PURE__ */ jsx(Skeleton, {
-				className: styles$1.theadCell,
+				className: styles.theadCell,
 				style: {
 					...bone,
 					width
 				}
 			}, index))
 		}), Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", {
-			className: styles$1.row,
+			className: styles.row,
 			children: [
 				leading === "avatar" ? /* @__PURE__ */ jsx(Skeleton.Avatar, {
 					shape: "circle",
@@ -72,7 +73,7 @@ function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
 					size: 24
 				}) : null,
 				/* @__PURE__ */ jsx("div", {
-					className: styles$1.copy,
+					className: styles.copy,
 					children: /* @__PURE__ */ jsx(Skeleton.Text, {
 						fontSize: 14,
 						rows: 2,
@@ -80,11 +81,11 @@ function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
 					})
 				}),
 				/* @__PURE__ */ jsx(Skeleton, {
-					className: styles$1.tag,
+					className: styles.tag,
 					style: bone
 				}),
 				/* @__PURE__ */ jsx(Skeleton, {
-					className: styles$1.cell,
+					className: styles.cell,
 					style: bone
 				})
 			]
@@ -93,16 +94,17 @@ function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
 }
 TableSkeleton.displayName = "TableSkeleton";
 function StatCardSkeleton() {
+	const cardClassName = useSurfaceCardClassName();
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		className: `${styles$1.stat} ${styles.card}`,
+		className: `${styles.stat} ${cardClassName}`,
 		children: [
 			/* @__PURE__ */ jsx(Skeleton.Text, {
 				fontSize: 14,
 				width: 72
 			}),
 			/* @__PURE__ */ jsx(Skeleton, {
-				className: styles$1.statValue,
+				className: styles.statValue,
 				style: bone
 			}),
 			/* @__PURE__ */ jsx(Skeleton.Text, {
@@ -116,13 +118,13 @@ StatCardSkeleton.displayName = "StatCardSkeleton";
 function PageLoading({ header = true, label = "Loading", stats = 4 }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-busy": "true",
-		className: styles$1.page,
+		className: styles.page,
 		children: [
 			/* @__PURE__ */ jsx(LoadingAnnouncer, { label }),
 			header ? /* @__PURE__ */ jsx(PageHeaderSkeleton, {}) : null,
 			/* @__PURE__ */ jsx("section", {
 				"aria-hidden": true,
-				className: styles$1.statGrid,
+				className: styles.statGrid,
 				children: Array.from({ length: stats }, (_, index) => /* @__PURE__ */ jsx(StatCardSkeleton, {}, index))
 			}),
 			/* @__PURE__ */ jsx(TableSkeleton, {})

package/es/dashboard/PageSkeleton/PageSkeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageSkeleton.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/PageSkeleton/PageSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type {\n  LoadingAnnouncerProps,\n  PageHeaderSkeletonProps,\n  PageLoadingProps,\n  TableSkeletonProps,\n} from './type';\n\nconst bone = { height: undefined, width: undefined };\nconst lineWidths = [\n  ['68%', '36%'],\n  ['52%', '28%'],\n  ['76%', '42%'],\n  ['58%', '32%'],\n] as const;\n\nfunction LoadingAnnouncer({ label }: LoadingAnnouncerProps) {\n  return (\n    <output aria-live=\"polite\" className={styles.srOnly}>\n      {label}\n    </output>\n  );\n}\n\nLoadingAnnouncer.displayName = 'LoadingAnnouncer';\n\nfunction PageHeaderSkeleton({ action = true }: PageHeaderSkeletonProps) {\n  return (\n    <div aria-hidden className={styles.header}>\n      <div className={styles.headerCopy}>\n        <Skeleton className={styles.title} style={bone} />\n        <Skeleton.Text fontSize={14} width=\"46%\" />\n      </div>\n      {action ? <Skeleton className={styles.action} style={bone} /> : null}\n    </div>\n  );\n}\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nfunction TableSkeleton({ framed = true, leading = 'text', rows = 6 }: TableSkeletonProps) {\n  const head = [96, 72, 64, 48];\n  return (\n    <div aria-hidden className={framed ? `${styles.table} ${surfaceStyles.card}` : styles.table}>\n      <div className={styles.thead}>\n        {head.map((width, index) => (\n          <Skeleton className={styles.theadCell} key={index} style={{ ...bone, width }} />\n        ))}\n      </div>\n      {Array.from({ length: rows }, (_, index) => (\n        <div className={styles.row} key={index}>\n          {leading === 'avatar' ? <Skeleton.Avatar shape=\"circle\" size={24} /> : null}\n          {leading === 'icon' ? <Skeleton.Avatar shape=\"square\" size={24} /> : null}\n          <div className={styles.copy}>\n            <Skeleton.Text\n              fontSize={14}\n              rows={2}\n              width={[...lineWidths[index % lineWidths.length]]}\n            />\n          </div>\n          <Skeleton className={styles.tag} style={bone} />\n          <Skeleton className={styles.cell} style={bone} />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nTableSkeleton.displayName = 'TableSkeleton';\n\nfunction StatCardSkeleton() {\n  return (\n    <div aria-hidden className={`${styles.stat} ${surfaceStyles.card}`}>\n      <Skeleton.Text fontSize={14} width={72} />\n      <Skeleton className={styles.statValue} style={bone} />\n      <Skeleton.Text fontSize={14} width=\"68%\" />\n    </div>\n  );\n}\n\nStatCardSkeleton.displayName = 'StatCardSkeleton';\n\nfunction PageLoading({ header = true, label = 'Loading', stats = 4 }: PageLoadingProps) {\n  return (\n    <div aria-busy=\"true\" className={styles.page}>\n      <LoadingAnnouncer label={label} />\n      {header ? <PageHeaderSkeleton /> : null}\n      <section aria-hidden className={styles.statGrid}>\n        {Array.from({ length: stats }, (_, index) => (\n          <StatCardSkeleton key={index} />\n        ))}\n      </section>\n      <TableSkeleton />\n    </div>\n  );\n}\n\nPageLoading.displayName = 'PageLoading';\n\nexport { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton };\nexport default PageLoading;\n"],"mappings":"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"}
+{"version":3,"file":"PageSkeleton.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/PageSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { styles } from './style';\nimport type {\n  LoadingAnnouncerProps,\n  PageHeaderSkeletonProps,\n  PageLoadingProps,\n  TableSkeletonProps,\n} from './type';\n\nconst bone = { height: undefined, width: undefined };\nconst lineWidths = [\n  ['68%', '36%'],\n  ['52%', '28%'],\n  ['76%', '42%'],\n  ['58%', '32%'],\n] as const;\n\nfunction LoadingAnnouncer({ label }: LoadingAnnouncerProps) {\n  return (\n    <output aria-live=\"polite\" className={styles.srOnly}>\n      {label}\n    </output>\n  );\n}\n\nLoadingAnnouncer.displayName = 'LoadingAnnouncer';\n\nfunction PageHeaderSkeleton({ action = true }: PageHeaderSkeletonProps) {\n  return (\n    <div aria-hidden className={styles.header}>\n      <div className={styles.headerCopy}>\n        <Skeleton className={styles.title} style={bone} />\n        <Skeleton.Text fontSize={14} width=\"46%\" />\n      </div>\n      {action ? <Skeleton className={styles.action} style={bone} /> : null}\n    </div>\n  );\n}\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nfunction TableSkeleton({ framed = true, leading = 'text', rows = 6 }: TableSkeletonProps) {\n  const cardClassName = useSurfaceCardClassName();\n  const head = [96, 72, 64, 48];\n  return (\n    <div aria-hidden className={framed ? `${styles.table} ${cardClassName}` : styles.table}>\n      <div className={styles.thead}>\n        {head.map((width, index) => (\n          <Skeleton className={styles.theadCell} key={index} style={{ ...bone, width }} />\n        ))}\n      </div>\n      {Array.from({ length: rows }, (_, index) => (\n        <div className={styles.row} key={index}>\n          {leading === 'avatar' ? <Skeleton.Avatar shape=\"circle\" size={24} /> : null}\n          {leading === 'icon' ? <Skeleton.Avatar shape=\"square\" size={24} /> : null}\n          <div className={styles.copy}>\n            <Skeleton.Text\n              fontSize={14}\n              rows={2}\n              width={[...lineWidths[index % lineWidths.length]]}\n            />\n          </div>\n          <Skeleton className={styles.tag} style={bone} />\n          <Skeleton className={styles.cell} style={bone} />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nTableSkeleton.displayName = 'TableSkeleton';\n\nfunction StatCardSkeleton() {\n  const cardClassName = useSurfaceCardClassName();\n  return (\n    <div aria-hidden className={`${styles.stat} ${cardClassName}`}>\n      <Skeleton.Text fontSize={14} width={72} />\n      <Skeleton className={styles.statValue} style={bone} />\n      <Skeleton.Text fontSize={14} width=\"68%\" />\n    </div>\n  );\n}\n\nStatCardSkeleton.displayName = 'StatCardSkeleton';\n\nfunction PageLoading({ header = true, label = 'Loading', stats = 4 }: PageLoadingProps) {\n  return (\n    <div aria-busy=\"true\" className={styles.page}>\n      <LoadingAnnouncer label={label} />\n      {header ? <PageHeaderSkeleton /> : null}\n      <section aria-hidden className={styles.statGrid}>\n        {Array.from({ length: stats }, (_, index) => (\n          <StatCardSkeleton key={index} />\n        ))}\n      </section>\n      <TableSkeleton />\n    </div>\n  );\n}\n\nPageLoading.displayName = 'PageLoading';\n\nexport { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton };\nexport default PageLoading;\n"],"mappings":";;;;;;AAaA,MAAM,OAAO;CAAE,QAAQ,KAAA;CAAW,OAAO,KAAA;AAAU;AACnD,MAAM,aAAa;CACjB,CAAC,OAAO,KAAK;CACb,CAAC,OAAO,KAAK;CACb,CAAC,OAAO,KAAK;CACb,CAAC,OAAO,KAAK;AACf;AAEA,SAAS,iBAAiB,EAAE,SAAgC;CAC1D,OACE,oBAAC,UAAD;EAAQ,aAAU;EAAS,WAAW,OAAO;EAC1C,UAAA;CACK,CAAA;AAEZ;AAEA,iBAAiB,cAAc;AAE/B,SAAS,mBAAmB,EAAE,SAAS,QAAiC;CACtE,OACE,qBAAC,OAAD;EAAK,eAAA;EAAY,WAAW,OAAO;EAAnC,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,UAAD;IAAU,WAAW,OAAO;IAAO,OAAO;GAAO,CAAA,GACjD,oBAAC,SAAS,MAAV;IAAe,UAAU;IAAI,OAAM;GAAO,CAAA,CACvC;EACJ,CAAA,GAAA,SAAS,oBAAC,UAAD;GAAU,WAAW,OAAO;GAAQ,OAAO;EAAO,CAAA,IAAI,IAC7D;;AAET;AAEA,mBAAmB,cAAc;AAEjC,SAAS,cAAc,EAAE,SAAS,MAAM,UAAU,QAAQ,OAAO,KAAyB;CACxF,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,qBAAC,OAAD;EAAK,eAAA;EAAY,WAAW,SAAS,GAAG,OAAO,MAAM,GAAG,kBAAkB,OAAO;EAAjF,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACpB,UAAA;IAJO;IAAI;IAAI;IAAI;GAIhB,CAAC,CAAC,KAAK,OAAO,UAChB,oBAAC,UAAD;IAAU,WAAW,OAAO;IAAuB,OAAO;KAAE,GAAG;KAAM;IAAM;GAAI,GAAnC,KAAmC,CAChF;EACE,CAAA,GACJ,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,UAChC,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA;IACG,YAAY,WAAW,oBAAC,SAAS,QAAV;KAAiB,OAAM;KAAS,MAAM;IAAK,CAAA,IAAI;IACtE,YAAY,SAAS,oBAAC,SAAS,QAAV;KAAiB,OAAM;KAAS,MAAM;IAAK,CAAA,IAAI;IACrE,oBAAC,OAAD;KAAK,WAAW,OAAO;KACrB,UAAA,oBAAC,SAAS,MAAV;MACE,UAAU;MACV,MAAM;MACN,OAAO,CAAC,GAAG,WAAW,QAAQ,WAAW,OAAO;KACjD,CAAA;IACE,CAAA;IACL,oBAAC,UAAD;KAAU,WAAW,OAAO;KAAK,OAAO;IAAO,CAAA;IAC/C,oBAAC,UAAD;KAAU,WAAW,OAAO;KAAM,OAAO;IAAO,CAAA;GAC7C;EAZ4B,GAAA,KAY5B,CACN,CACE;;AAET;AAEA,cAAc,cAAc;AAE5B,SAAS,mBAAmB;CAC1B,MAAM,gBAAgB,wBAAwB;CAC9C,OACE,qBAAC,OAAD;EAAK,eAAA;EAAY,WAAW,GAAG,OAAO,KAAK,GAAG;EAA9C,UAAA;GACE,oBAAC,SAAS,MAAV;IAAe,UAAU;IAAI,OAAO;GAAK,CAAA;GACzC,oBAAC,UAAD;IAAU,WAAW,OAAO;IAAW,OAAO;GAAO,CAAA;GACrD,oBAAC,SAAS,MAAV;IAAe,UAAU;IAAI,OAAM;GAAO,CAAA;EACvC;;AAET;AAEA,iBAAiB,cAAc;AAE/B,SAAS,YAAY,EAAE,SAAS,MAAM,QAAQ,WAAW,QAAQ,KAAuB;CACtF,OACE,qBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,OAAO;EAAxC,UAAA;GACE,oBAAC,kBAAD,EAAyB,MAAQ,CAAA;GAChC,SAAS,oBAAC,oBAAD,CAAqB,CAAA,IAAI;GACnC,oBAAC,WAAD;IAAS,eAAA;IAAY,WAAW,OAAO;IACpC,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACjC,oBAAC,kBAAD,CAA+B,GAAR,KAAQ,CAChC;GACM,CAAA;GACT,oBAAC,eAAD,CAAgB,CAAA;EACb;;AAET;AAEA,YAAY,cAAc"}

package/es/dashboard/PageSkeleton/style.mjs

@@ -52,7 +52,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     min-block-size: 54px;
     padding-block: 12px;
     padding-inline: 16px;
-    border-block-end: 1px solid ${cssVar.colorBorder};
+    border-block-end: 1px solid ${cssVar.colorFillSecondary};
 
     &:last-child {
       border-block-end: none;

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  action: css`\n    flex: none;\n    inline-size: 96px;\n    block-size: 32px;\n\n    ${responsive.mobile} {\n      inline-size: 100%;\n      block-size: 44px;\n    }\n  `,\n  cell: css`\n    flex: none;\n    inline-size: 88px;\n    block-size: 14px;\n  `,\n  copy: css`\n    flex: 1;\n    min-inline-size: 0;\n  `,\n  header: css`\n    display: flex;\n    gap: 16px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  headerCopy: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 8px;\n\n    min-inline-size: 0;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  `,\n  row: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 54px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorder};\n\n    &:last-child {\n      border-block-end: none;\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n  statGrid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  stat: css`\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n  `,\n  statValue: css`\n    inline-size: 42%;\n    block-size: ${cssVar.fontSizeHeading2};\n    margin-block: 6px 14px;\n  `,\n  table: css`\n    overflow: hidden;\n    min-inline-size: 0;\n  `,\n  tag: css`\n    flex: none;\n    inline-size: 72px;\n    block-size: 22px;\n    border-radius: ${cssVar.borderRadiusSM};\n  `,\n  thead: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 39px;\n    padding-block: 10px;\n    padding-inline: 16px;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  theadCell: css`\n    flex: none;\n    block-size: 12px;\n  `,\n  title: css`\n    inline-size: 220px;\n    max-inline-size: 70%;\n    block-size: ${cssVar.fontSizeHeading3};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,QAAQ,GAAG;;;;;MAKP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;CAKT,MAAM,GAAG;;;;CAIT,QAAQ,GAAG;;;;;;MAMP,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;;;;;CAQf,MAAM,GAAG;;;;;CAKT,KAAK,GAAG;;;;;;;;kCAQwB,OAAO,YAAY;;;;;;CAMnD,QAAQ,GAAG;;;;;;;;;;;;CAYX,UAAU,GAAG;;;;;CAKb,MAAM,GAAG;;;;;CAKT,WAAW,GAAG;;kBAEE,OAAO,iBAAiB;;;CAGxC,OAAO,GAAG;;;;CAIV,KAAK,GAAG;;;;qBAIW,OAAO,eAAe;;CAEzC,OAAO,GAAG;;;;;;;;;kBASM,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;kBAGM,OAAO,iBAAiB;;AAE1C,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  action: css`\n    flex: none;\n    inline-size: 96px;\n    block-size: 32px;\n\n    ${responsive.mobile} {\n      inline-size: 100%;\n      block-size: 44px;\n    }\n  `,\n  cell: css`\n    flex: none;\n    inline-size: 88px;\n    block-size: 14px;\n  `,\n  copy: css`\n    flex: 1;\n    min-inline-size: 0;\n  `,\n  header: css`\n    display: flex;\n    gap: 16px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  headerCopy: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 8px;\n\n    min-inline-size: 0;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  `,\n  row: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 54px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n\n    &:last-child {\n      border-block-end: none;\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n  statGrid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  stat: css`\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n  `,\n  statValue: css`\n    inline-size: 42%;\n    block-size: ${cssVar.fontSizeHeading2};\n    margin-block: 6px 14px;\n  `,\n  table: css`\n    overflow: hidden;\n    min-inline-size: 0;\n  `,\n  tag: css`\n    flex: none;\n    inline-size: 72px;\n    block-size: 22px;\n    border-radius: ${cssVar.borderRadiusSM};\n  `,\n  thead: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 39px;\n    padding-block: 10px;\n    padding-inline: 16px;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  theadCell: css`\n    flex: none;\n    block-size: 12px;\n  `,\n  title: css`\n    inline-size: 220px;\n    max-inline-size: 70%;\n    block-size: ${cssVar.fontSizeHeading3};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,QAAQ,GAAG;;;;;MAKP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;CAKT,MAAM,GAAG;;;;CAIT,QAAQ,GAAG;;;;;;MAMP,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;;;;;CAQf,MAAM,GAAG;;;;;CAKT,KAAK,GAAG;;;;;;;;kCAQwB,OAAO,mBAAmB;;;;;;CAM1D,QAAQ,GAAG;;;;;;;;;;;;CAYX,UAAU,GAAG;;;;;CAKb,MAAM,GAAG;;;;;CAKT,WAAW,GAAG;;kBAEE,OAAO,iBAAiB;;;CAGxC,OAAO,GAAG;;;;CAIV,KAAK,GAAG;;;;qBAIW,OAAO,eAAe;;CAEzC,OAAO,GAAG;;;;;;;;;kBASM,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;kBAGM,OAAO,iBAAiB;;AAE1C,EAAE"}

package/es/dashboard/PanelSurface/PanelSurface.mjs

@@ -11,7 +11,10 @@ import { cx } from "antd-style";
 const PanelSurface = ({ title, description, extra, href, loading, renderLink, size = "default", className, style, children }) => /* @__PURE__ */ jsx(Surface, {
 	className,
 	description,
-	extra: loading && children ? /* @__PURE__ */ jsx(Spin, { size: "small" }) : extra,
+	extra: loading && children ? /* @__PURE__ */ jsx(Spin, {
+		size: "small",
+		variant: "network"
+	}) : extra,
 	href,
 	padded: false,
 	renderLink,

package/es/dashboard/PanelSurface/PanelSurface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSurface.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/PanelSurface/PanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { PanelSurfaceProps } from './type';\n\n/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */\nconst PanelSurface = ({\n  title,\n  description,\n  extra,\n  href,\n  loading,\n  renderLink,\n  size = 'default',\n  className,\n  style,\n  children,\n}: PanelSurfaceProps) => (\n  <Surface\n    className={className}\n    description={description}\n    extra={loading && children ? <Spin size=\"small\" /> : extra}\n    href={href}\n    padded={false}\n    renderLink={renderLink}\n    style={style}\n    title={title}\n  >\n    {loading && !children ? (\n      <div aria-busy=\"true\" className={styles.loadingBody}>\n        <Skeleton height={220} radius={8} />\n      </div>\n    ) : (\n      <div\n        className={cx(size === 'small' ? styles.bodySmall : styles.body, surfaceStyles.tableBleed)}\n      >\n        {children}\n      </div>\n    )}\n  </Surface>\n);\n\nPanelSurface.displayName = 'PanelSurface';\n\nexport default PanelSurface;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,OACA,aACA,OACA,MACA,SACA,YACA,OAAO,WACP,WACA,OACA,eAEA,oBAAC,SAAD;CACa;CACE;CACb,OAAO,WAAW,WAAW,oBAAC,MAAD,EAAM,MAAK,QAAS,CAAA,IAAI;CAC/C;CACN,QAAQ;CACI;CACL;CACA;CAEN,UAAA,WAAW,CAAC,WACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAWA,SAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL,oBAAC,OAAD;EACE,WAAW,GAAG,SAAS,UAAUA,SAAO,YAAYA,SAAO,MAAMC,OAAc,UAAU;EAExF;CACE,CAAA;AAEA,CAAA;AAGX,aAAa,cAAc"}
+{"version":3,"file":"PanelSurface.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/PanelSurface/PanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { PanelSurfaceProps } from './type';\n\n/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */\nconst PanelSurface = ({\n  title,\n  description,\n  extra,\n  href,\n  loading,\n  renderLink,\n  size = 'default',\n  className,\n  style,\n  children,\n}: PanelSurfaceProps) => (\n  <Surface\n    className={className}\n    description={description}\n    extra={loading && children ? <Spin size=\"small\" variant=\"network\" /> : extra}\n    href={href}\n    padded={false}\n    renderLink={renderLink}\n    style={style}\n    title={title}\n  >\n    {loading && !children ? (\n      <div aria-busy=\"true\" className={styles.loadingBody}>\n        <Skeleton height={220} radius={8} />\n      </div>\n    ) : (\n      <div\n        className={cx(size === 'small' ? styles.bodySmall : styles.body, surfaceStyles.tableBleed)}\n      >\n        {children}\n      </div>\n    )}\n  </Surface>\n);\n\nPanelSurface.displayName = 'PanelSurface';\n\nexport default PanelSurface;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,OACA,aACA,OACA,MACA,SACA,YACA,OAAO,WACP,WACA,OACA,eAEA,oBAAC,SAAD;CACa;CACE;CACb,OAAO,WAAW,WAAW,oBAAC,MAAD;EAAM,MAAK;EAAQ,SAAQ;CAAW,CAAA,IAAI;CACjE;CACN,QAAQ;CACI;CACL;CACA;CAEN,UAAA,WAAW,CAAC,WACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAWA,SAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL,oBAAC,OAAD;EACE,WAAW,GAAG,SAAS,UAAUA,SAAO,YAAYA,SAAO,MAAMC,OAAc,UAAU;EAExF;CACE,CAAA;AAEA,CAAA;AAGX,aAAa,cAAc"}

package/es/dashboard/StatCard/StatCard.d.mts

@@ -1,6 +1,7 @@
 import { StatCardProps } from "./type.mjs";
 //#region src/dashboard/StatCard/StatCard.d.ts
-declare function StatCard({ action, delta, direction, hint, label, mark, prominent, value, wash }: StatCardProps): import("react").JSX.Element;
+/** One metric in its own card: the same item as a `split` MetricStrip. */
+declare function StatCard({ action, className, delta, direction, hint, href, label, loading, mark, onClick, renderLink, value, valueTone }: StatCardProps): import("react").JSX.Element;
 declare namespace StatCard {
   var displayName: string;
 }

package/es/dashboard/StatCard/StatCard.mjs

@@ -1,79 +1,31 @@
 "use client";
-import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import Block from "../../Block/Block.mjs";
-import Icon from "../../Icon/Icon.mjs";
-import Text from "../../base-ui/Text/Text.mjs";
 import { styles } from "../Surface/style.mjs";
-import { styles as styles$1 } from "./style.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Minus, TrendingDown, TrendingUp } from "lucide-react";
+import { useSurfaceCardClassName } from "../Surface/link.mjs";
+import { styles as styles$1 } from "../MetricStrip/style.mjs";
+import MetricCell from "../MetricStrip/MetricCell.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 //#region src/dashboard/StatCard/StatCard.tsx
-const deltaIcon = {
-	down: TrendingDown,
-	flat: Minus,
-	up: TrendingUp
-};
-function StatCard({ action, delta, direction = "flat", hint, label, mark, prominent = false, value, wash }) {
-	const deltaClass = {
-		down: styles$1.deltaDown,
-		flat: styles$1.deltaFlat,
-		up: styles$1.deltaUp
-	}[direction];
+/** One metric in its own card: the same item as a `split` MetricStrip. */
+function StatCard({ action, className, delta, direction = "flat", hint, href, label, loading, mark, onClick, renderLink, value, valueTone }) {
+	const cardClassName = useSurfaceCardClassName();
 	return /* @__PURE__ */ jsx("div", {
-		className: styles$1.lift,
-		children: /* @__PURE__ */ jsx(Block, {
-			className: `${styles$1.root} ${styles.card}${wash ? ` ${styles$1.wash} ${styles$1[wash]}` : ""} ${styles$1.frame}`,
-			variant: "borderless",
-			children: /* @__PURE__ */ jsxs(FlexBasic_default, {
-				className: styles$1.body,
-				gap: prominent ? 0 : 8,
-				children: [
-					/* @__PURE__ */ jsxs(FlexBasic_default, {
-						horizontal: true,
-						align: "center",
-						justify: "space-between",
-						children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
-							horizontal: true,
-							align: "center",
-							className: styles$1.copy,
-							gap: 6,
-							children: [/* @__PURE__ */ jsx(Text, {
-								ellipsis: true,
-								className: prominent ? styles$1.metricLabel : styles$1.label,
-								children: label
-							}), action]
-						}), mark ? /* @__PURE__ */ jsx("span", {
-							"aria-hidden": true,
-							className: styles$1.badge,
-							children: /* @__PURE__ */ jsx(Icon, {
-								icon: mark,
-								size: 14
-							})
-						}) : null]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: prominent ? styles$1.metricValue : styles$1.value,
-						children: value
-					}),
-					delta || hint ? /* @__PURE__ */ jsxs(FlexBasic_default, {
-						horizontal: true,
-						align: "center",
-						className: prominent ? styles$1.metricFoot : void 0,
-						gap: 8,
-						wrap: "wrap",
-						children: [delta ? /* @__PURE__ */ jsxs("span", {
-							className: `${styles$1.delta} ${deltaClass}`,
-							children: [/* @__PURE__ */ jsx(Icon, {
-								icon: deltaIcon[direction],
-								size: 14
-							}), delta]
-						}) : null, hint ? /* @__PURE__ */ jsx(Text, {
-							className: prominent ? styles$1.metricHint : styles$1.hint,
-							children: hint
-						}) : null]
-					}) : null
-				]
-			})
+		className: cx(styles$1.card, cardClassName, styles.clip, className),
+		children: /* @__PURE__ */ jsx(MetricCell, {
+			renderLink,
+			item: {
+				action,
+				delta,
+				direction,
+				hint,
+				href,
+				label,
+				loading,
+				mark,
+				onClick,
+				value,
+				valueTone
+			}
 		})
 	});
 }

package/es/dashboard/StatCard/StatCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.mjs","names":["styles","surfaceStyles","Flexbox"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { Minus, TrendingDown, TrendingUp } from 'lucide-react';\n\nimport Text from '@/base-ui/Text';\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type { StatCardProps, StatDirection } from './type';\n\nconst deltaIcon = {\n  down: TrendingDown,\n  flat: Minus,\n  up: TrendingUp,\n} satisfies Record<StatDirection, typeof Minus>;\n\nfunction StatCard({\n  action,\n  delta,\n  direction = 'flat',\n  hint,\n  label,\n  mark,\n  prominent = false,\n  value,\n  wash,\n}: StatCardProps) {\n  const deltaClass = {\n    down: styles.deltaDown,\n    flat: styles.deltaFlat,\n    up: styles.deltaUp,\n  }[direction];\n\n  return (\n    <div className={styles.lift}>\n      <Block\n        className={`${styles.root} ${surfaceStyles.card}${wash ? ` ${styles.wash} ${styles[wash]}` : ''} ${styles.frame}`}\n        variant=\"borderless\"\n      >\n        <Flexbox className={styles.body} gap={prominent ? 0 : 8}>\n          <Flexbox horizontal align=\"center\" justify=\"space-between\">\n            <Flexbox horizontal align=\"center\" className={styles.copy} gap={6}>\n              <Text ellipsis className={prominent ? styles.metricLabel : styles.label}>\n                {label}\n              </Text>\n              {action}\n            </Flexbox>\n            {mark ? (\n              <span aria-hidden className={styles.badge}>\n                <Icon icon={mark} size={14} />\n              </span>\n            ) : null}\n          </Flexbox>\n          <div className={prominent ? styles.metricValue : styles.value}>{value}</div>\n          {delta || hint ? (\n            <Flexbox\n              horizontal\n              align=\"center\"\n              className={prominent ? styles.metricFoot : undefined}\n              gap={8}\n              wrap=\"wrap\"\n            >\n              {delta ? (\n                <span className={`${styles.delta} ${deltaClass}`}>\n                  <Icon icon={deltaIcon[direction]} size={14} />\n                  {delta}\n                </span>\n              ) : null}\n              {hint ? (\n                <Text className={prominent ? styles.metricHint : styles.hint}>{hint}</Text>\n              ) : null}\n            </Flexbox>\n          ) : null}\n        </Flexbox>\n      </Block>\n    </div>\n  );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY;CAChB,MAAM;CACN,MAAM;CACN,IAAI;AACN;AAEA,SAAS,SAAS,EAChB,QACA,OACA,YAAY,QACZ,MACA,OACA,MACA,YAAY,OACZ,OACA,QACgB;CAChB,MAAM,aAAa;EACjB,MAAMA,SAAO;EACb,MAAMA,SAAO;EACb,IAAIA,SAAO;CACb,EAAE;CAEF,OACE,oBAAC,OAAD;EAAK,WAAWA,SAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAW,GAAGA,SAAO,KAAK,GAAGC,OAAc,OAAO,OAAO,IAAID,SAAO,KAAK,GAAGA,SAAO,UAAU,GAAG,GAAGA,SAAO;GAC1G,SAAQ;GAER,UAAA,qBAACE,mBAAD;IAAS,WAAWF,SAAO;IAAM,KAAK,YAAY,IAAI;IAAtD,UAAA;KACE,qBAACE,mBAAD;MAAS,YAAA;MAAW,OAAM;MAAS,SAAQ;MAA3C,UAAA,CACE,qBAACA,mBAAD;OAAS,YAAA;OAAW,OAAM;OAAS,WAAWF,SAAO;OAAM,KAAK;OAAhE,UAAA,CACE,oBAAC,MAAD;QAAM,UAAA;QAAS,WAAW,YAAYA,SAAO,cAAcA,SAAO;QAC/D,UAAA;OACG,CAAA,GACL,MACM;MACR,CAAA,GAAA,OACC,oBAAC,QAAD;OAAM,eAAA;OAAY,WAAWA,SAAO;OAClC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAM,MAAM;OAAK,CAAA;MACzB,CAAA,IACJ,IACG;;KACT,oBAAC,OAAD;MAAK,WAAW,YAAYA,SAAO,cAAcA,SAAO;MAAQ,UAAA;KAAW,CAAA;KAC1E,SAAS,OACR,qBAACE,mBAAD;MACE,YAAA;MACA,OAAM;MACN,WAAW,YAAYF,SAAO,aAAa,KAAA;MAC3C,KAAK;MACL,MAAK;MALP,UAAA,CAOG,QACC,qBAAC,QAAD;OAAM,WAAW,GAAGA,SAAO,MAAM,GAAG;OAApC,UAAA,CACE,oBAAC,MAAD;QAAM,MAAM,UAAU;QAAY,MAAM;OAAK,CAAA,GAC5C,KACG;MACJ,CAAA,IAAA,MACH,OACC,oBAAC,MAAD;OAAM,WAAW,YAAYA,SAAO,aAAaA,SAAO;OAAO,UAAA;MAAW,CAAA,IACxE,IACG;KACP,CAAA,IAAA;IACG;;EACJ,CAAA;CACJ,CAAA;AAET;AAEA,SAAS,cAAc"}
+{"version":3,"file":"StatCard.mjs","names":["metricStyles","surfaceStyles"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport MetricCell from '../MetricStrip/MetricCell';\nimport { styles as metricStyles } from '../MetricStrip/style';\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport type { StatCardProps } from './type';\n\n/** One metric in its own card: the same item as a `split` MetricStrip. */\nfunction StatCard({\n  action,\n  className,\n  delta,\n  direction = 'flat',\n  hint,\n  href,\n  label,\n  loading,\n  mark,\n  onClick,\n  renderLink,\n  value,\n  valueTone,\n}: StatCardProps) {\n  const cardClassName = useSurfaceCardClassName();\n\n  return (\n    <div className={cx(metricStyles.card, cardClassName, surfaceStyles.clip, className)}>\n      <MetricCell\n        renderLink={renderLink}\n        item={{\n          action,\n          delta,\n          direction,\n          hint,\n          href,\n          label,\n          loading,\n          mark,\n          onClick,\n          value,\n          valueTone,\n        }}\n      />\n    </div>\n  );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;AAWA,SAAS,SAAS,EAChB,QACA,WACA,OACA,YAAY,QACZ,MACA,MACA,OACA,SACA,MACA,SACA,YACA,OACA,aACgB;CAChB,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,SAAa,MAAM,eAAeC,OAAc,MAAM,SAAS;EAChF,UAAA,oBAAC,YAAD;GACc;GACZ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACD,CAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}

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

@@ -1,24 +1,35 @@
 import { IconProps } from "../../Icon/type.mjs";
 import "../../Icon/index.mjs";
+import { SurfaceRenderLink } from "../Surface/type.mjs";
 import { ReactNode } from "react";
 //#region src/dashboard/StatCard/type.d.ts
 type StatDirection = 'up' | 'down' | 'flat';
-/** Top-to-bottom gray wash. Decorative color fields stay in the app. */
+/** @deprecated StatCard renders as a MetricStrip item and no longer draws a wash. */
 type StatWash = 'gray';
 interface StatCardProps {
   /** Control rendered on the label row, such as a menu. */
   action?: ReactNode;
+  className?: string;
   /** Change amount, colored by `direction`. */
-  delta?: string;
+  delta?: ReactNode;
   direction?: StatDirection;
-  /** Line under the figure. */
-  hint?: string;
+  /** Line after the delta. */
+  hint?: ReactNode;
+  /** Makes the card a link (through `renderLink` / `SurfaceLinkProvider`). */
+  href?: string;
   label: ReactNode;
+  /** Value placeholder while loading; the label stays. */
+  loading?: boolean;
   /** Corner glyph. Hidden from assistive tech so it does not repeat the label. */
   mark?: IconProps['icon'];
-  /** Overview scale: label, then a large figure, then the note. */
+  onClick?: () => void;
+  /** @deprecated Ignored. StatCard always uses the MetricStrip item scale. */
   prominent?: boolean;
+  renderLink?: SurfaceRenderLink;
   value: ReactNode;
+  /** Color the figure when the number itself is the thing to act on. */
+  valueTone?: 'danger' | 'warning';
+  /** @deprecated Ignored. StatCard renders as a MetricStrip item without a wash. */
   wash?: StatWash;
 }
 //#endregion

package/es/dashboard/Surface/Surface.mjs

@@ -2,7 +2,7 @@
 import Spin from "../../base-ui/Spin/Spin.mjs";
 import Skeleton from "../../base-ui/Skeleton/index.mjs";
 import { styles } from "./style.mjs";
-import { SurfaceDepthContext, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
+import { SurfaceDepthContext, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { ArrowUpRight } from "lucide-react";
@@ -16,6 +16,7 @@ const defined = (node) => node !== null && node !== void 0 && node !== false;
 function Surface({ bleed = false, chart, children, className, description, extra, href, loading, padded, renderLink, title, ...rest }) {
 	const depth = useSurfaceDepth();
 	const link = useSurfaceLink(renderLink);
+	const cardClassName = useSurfaceCardClassName();
 	const refreshing = Boolean(loading) && defined(children);
 	const placeholder = Boolean(loading) && !defined(children);
 	const hasHeader = defined(title) || defined(description) || defined(extra) || refreshing;
@@ -39,26 +40,41 @@ function Surface({ bleed = false, chart, children, className, description, extra
 			radius: 8
 		})
 	}) : children;
+	const trailing = refreshing || defined(extra);
+	const arrow = /* @__PURE__ */ jsx(ArrowUpRight, {
+		"aria-hidden": true,
+		"data-surface-arrow": true,
+		className: styles.arrow,
+		size: 16
+	});
 	return /* @__PURE__ */ jsx(SurfaceDepthContext, {
 		value: depth + 1,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: cx(styles.card, styles.content, clip && styles.clip, href && styles.cardLinked, bleed && styles.bleed, className),
+			className: cx(cardClassName, styles.content, clip && styles.clip, href && styles.cardLinked, bleed && styles.bleed, className),
 			...rest,
 			children: [
 				hasHeader ? /* @__PURE__ */ jsxs("div", {
 					className: styles.header,
 					children: [href ? link({
-						children: /* @__PURE__ */ jsxs(Fragment, { children: [heading, /* @__PURE__ */ jsx(ArrowUpRight, {
-							"aria-hidden": true,
-							"data-surface-arrow": true,
-							className: styles.arrow,
-							size: 16
-						})] }),
+						children: /* @__PURE__ */ jsxs(Fragment, { children: [heading, trailing ? null : arrow] }),
 						className: styles.headingLink,
 						href
-					}) : heading, refreshing || defined(extra) ? /* @__PURE__ */ jsxs("div", {
+					}) : heading, trailing ? /* @__PURE__ */ jsxs("div", {
 						className: styles.extra,
-						children: [refreshing ? /* @__PURE__ */ jsx(Spin, { size: "small" }) : null, extra]
+						children: [
+							refreshing ? /* @__PURE__ */ jsx(Spin, {
+								size: "small",
+								variant: "network"
+							}) : null,
+							extra,
+							href ? link({
+								"aria-hidden": true,
+								"children": arrow,
+								"className": styles.arrowLink,
+								href,
+								"tabIndex": -1
+							}) : null
+						]
 					}) : null]
 				}) : null,
 				pad ? /* @__PURE__ */ jsx("div", {

package/es/dashboard/Surface/Surface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.mjs","names":[],"sources":["../../../src/dashboard/Surface/Surface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ArrowUpRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport { SurfaceDepthContext, useSurfaceDepth, useSurfaceLink } from './link';\nimport { styles } from './style';\nimport type { SurfaceProps } from './type';\n\nconst defined = (node: ReactNode) => node !== null && node !== undefined && node !== false;\n\n/**\n * Elevated card on a workspace canvas. Bare, it is a plain frame. With `title`,\n * `description` or `extra` it gets a header and a padded body that lets a\n * trailing table meet the card edges.\n */\nfunction Surface({\n  bleed = false,\n  chart,\n  children,\n  className,\n  description,\n  extra,\n  href,\n  loading,\n  padded,\n  renderLink,\n  title,\n  ...rest\n}: SurfaceProps) {\n  const depth = useSurfaceDepth();\n  const link = useSurfaceLink(renderLink);\n  const refreshing = Boolean(loading) && defined(children);\n  const placeholder = Boolean(loading) && !defined(children);\n  const hasHeader = defined(title) || defined(description) || defined(extra) || refreshing;\n  const pad = bleed ? false : (padded ?? (hasHeader || placeholder));\n  const clip = hasHeader || bleed || pad || defined(chart);\n\n  const heading = (\n    <div className={styles.heading}>\n      {defined(title) ? <div className={styles.title}>{title}</div> : null}\n      {defined(description) ? <div className={styles.desc}>{description}</div> : null}\n    </div>\n  );\n\n  const body = placeholder ? (\n    <div aria-busy=\"true\" className={styles.loading}>\n      <Skeleton height={220} radius={8} />\n    </div>\n  ) : (\n    children\n  );\n\n  return (\n    <SurfaceDepthContext value={depth + 1}>\n      <div\n        className={cx(\n          styles.card,\n          styles.content,\n          clip && styles.clip,\n          href && styles.cardLinked,\n          bleed && styles.bleed,\n          className,\n        )}\n        {...rest}\n      >\n        {hasHeader ? (\n          <div className={styles.header}>\n            {href\n              ? link({\n                  children: (\n                    <>\n                      {heading}\n                      <ArrowUpRight\n                        aria-hidden\n                        data-surface-arrow\n                        className={styles.arrow}\n                        size={16}\n                      />\n                    </>\n                  ),\n                  className: styles.headingLink,\n                  href,\n                })\n              : heading}\n            {refreshing || defined(extra) ? (\n              <div className={styles.extra}>\n                {refreshing ? <Spin size=\"small\" /> : null}\n                {extra}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n        {pad ? <div className={cx(styles.body, styles.tableBleed)}>{body}</div> : body}\n        {defined(chart) ? <div className={styles.chart}>{chart}</div> : null}\n      </div>\n    </SurfaceDepthContext>\n  );\n}\n\nSurface.displayName = 'Surface';\n\nexport default Surface;\n"],"mappings":";;;;;;;;;AAaA,MAAM,WAAW,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;;;;;;AAOrF,SAAS,QAAQ,EACf,QAAQ,OACR,OACA,UACA,WACA,aACA,OACA,MACA,SACA,QACA,YACA,OACA,GAAG,QACY;CACf,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,aAAa,QAAQ,OAAO,KAAK,QAAQ,QAAQ;CACvD,MAAM,cAAc,QAAQ,OAAO,KAAK,CAAC,QAAQ,QAAQ;CACzD,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,WAAW,KAAK,QAAQ,KAAK,KAAK;CAC9E,MAAM,MAAM,QAAQ,QAAS,WAAW,aAAa;CACrD,MAAM,OAAO,aAAa,SAAS,OAAO,QAAQ,KAAK;CAEvD,MAAM,UACJ,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,QAAQ,KAAK,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAQ,UAAA;EAAW,CAAA,IAAI,MAC/D,QAAQ,WAAW,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAO,UAAA;EAAiB,CAAA,IAAI,IACxE;;CAGP,MAAM,OAAO,cACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,OAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL;CAGF,OACE,oBAAC,qBAAD;EAAqB,OAAO,QAAQ;EAClC,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,OAAO,MACP,OAAO,SACP,QAAQ,OAAO,MACf,QAAQ,OAAO,YACf,SAAS,OAAO,OAChB,SACF;GACA,GAAI;GATN,UAAA;IAWG,YACC,qBAAC,OAAD;KAAK,WAAW,OAAO;KAAvB,UAAA,CACG,OACG,KAAK;MACH,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACD,oBAAC,cAAD;OACE,eAAA;OACA,sBAAA;OACA,WAAW,OAAO;OAClB,MAAM;MACP,CAAA,CACD,EAAA,CAAA;MAEJ,WAAW,OAAO;MAClB;KACF,CAAC,IACD,SACH,cAAc,QAAQ,KAAK,IAC1B,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA,CACG,aAAa,oBAAC,MAAD,EAAM,MAAK,QAAS,CAAA,IAAI,MACrC,KACE;KACH,CAAA,IAAA,IACD;IACH,CAAA,IAAA;IACH,MAAM,oBAAC,OAAD;KAAK,WAAW,GAAG,OAAO,MAAM,OAAO,UAAU;KAAI,UAAA;IAAU,CAAA,IAAI;IACzE,QAAQ,KAAK,IAAI,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,IAAI;GAC7D;;CACc,CAAA;AAEzB;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"Surface.mjs","names":[],"sources":["../../../src/dashboard/Surface/Surface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ArrowUpRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport {\n  SurfaceDepthContext,\n  useSurfaceCardClassName,\n  useSurfaceDepth,\n  useSurfaceLink,\n} from './link';\nimport { styles } from './style';\nimport type { SurfaceProps } from './type';\n\nconst defined = (node: ReactNode) => node !== null && node !== undefined && node !== false;\n\n/**\n * Elevated card on a workspace canvas. Bare, it is a plain frame. With `title`,\n * `description` or `extra` it gets a header and a padded body that lets a\n * trailing table meet the card edges.\n */\nfunction Surface({\n  bleed = false,\n  chart,\n  children,\n  className,\n  description,\n  extra,\n  href,\n  loading,\n  padded,\n  renderLink,\n  title,\n  ...rest\n}: SurfaceProps) {\n  const depth = useSurfaceDepth();\n  const link = useSurfaceLink(renderLink);\n  const cardClassName = useSurfaceCardClassName();\n  const refreshing = Boolean(loading) && defined(children);\n  const placeholder = Boolean(loading) && !defined(children);\n  const hasHeader = defined(title) || defined(description) || defined(extra) || refreshing;\n  const pad = bleed ? false : (padded ?? (hasHeader || placeholder));\n  const clip = hasHeader || bleed || pad || defined(chart);\n\n  const heading = (\n    <div className={styles.heading}>\n      {defined(title) ? <div className={styles.title}>{title}</div> : null}\n      {defined(description) ? <div className={styles.desc}>{description}</div> : null}\n    </div>\n  );\n\n  const body = placeholder ? (\n    <div aria-busy=\"true\" className={styles.loading}>\n      <Skeleton height={220} radius={8} />\n    </div>\n  ) : (\n    children\n  );\n\n  // With header actions, the arrow sits after them as the rightmost item.\n  const trailing = refreshing || defined(extra);\n  const arrow = <ArrowUpRight aria-hidden data-surface-arrow className={styles.arrow} size={16} />;\n\n  return (\n    <SurfaceDepthContext value={depth + 1}>\n      <div\n        className={cx(\n          cardClassName,\n          styles.content,\n          clip && styles.clip,\n          href && styles.cardLinked,\n          bleed && styles.bleed,\n          className,\n        )}\n        {...rest}\n      >\n        {hasHeader ? (\n          <div className={styles.header}>\n            {href\n              ? link({\n                  children: (\n                    <>\n                      {heading}\n                      {trailing ? null : arrow}\n                    </>\n                  ),\n                  className: styles.headingLink,\n                  href,\n                })\n              : heading}\n            {trailing ? (\n              <div className={styles.extra}>\n                {refreshing ? <Spin size=\"small\" variant=\"network\" /> : null}\n                {extra}\n                {href\n                  ? link({\n                      'aria-hidden': true,\n                      'children': arrow,\n                      'className': styles.arrowLink,\n                      href,\n                      'tabIndex': -1,\n                    } as any)\n                  : null}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n        {pad ? <div className={cx(styles.body, styles.tableBleed)}>{body}</div> : body}\n        {defined(chart) ? <div className={styles.chart}>{chart}</div> : null}\n      </div>\n    </SurfaceDepthContext>\n  );\n}\n\nSurface.displayName = 'Surface';\n\nexport default Surface;\n"],"mappings":";;;;;;;;;AAkBA,MAAM,WAAW,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;;;;;;AAOrF,SAAS,QAAQ,EACf,QAAQ,OACR,OACA,UACA,WACA,aACA,OACA,MACA,SACA,QACA,YACA,OACA,GAAG,QACY;CACf,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,gBAAgB,wBAAwB;CAC9C,MAAM,aAAa,QAAQ,OAAO,KAAK,QAAQ,QAAQ;CACvD,MAAM,cAAc,QAAQ,OAAO,KAAK,CAAC,QAAQ,QAAQ;CACzD,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,WAAW,KAAK,QAAQ,KAAK,KAAK;CAC9E,MAAM,MAAM,QAAQ,QAAS,WAAW,aAAa;CACrD,MAAM,OAAO,aAAa,SAAS,OAAO,QAAQ,KAAK;CAEvD,MAAM,UACJ,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,QAAQ,KAAK,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAQ,UAAA;EAAW,CAAA,IAAI,MAC/D,QAAQ,WAAW,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAO,UAAA;EAAiB,CAAA,IAAI,IACxE;;CAGP,MAAM,OAAO,cACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,OAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL;CAIF,MAAM,WAAW,cAAc,QAAQ,KAAK;CAC5C,MAAM,QAAQ,oBAAC,cAAD;EAAc,eAAA;EAAY,sBAAA;EAAmB,WAAW,OAAO;EAAO,MAAM;CAAK,CAAA;CAE/F,OACE,oBAAC,qBAAD;EAAqB,OAAO,QAAQ;EAClC,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,eACA,OAAO,SACP,QAAQ,OAAO,MACf,QAAQ,OAAO,YACf,SAAS,OAAO,OAChB,SACF;GACA,GAAI;GATN,UAAA;IAWG,YACC,qBAAC,OAAD;KAAK,WAAW,OAAO;KAAvB,UAAA,CACG,OACG,KAAK;MACH,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACA,WAAW,OAAO,KACnB,EAAA,CAAA;MAEJ,WAAW,OAAO;MAClB;KACF,CAAC,IACD,SACH,WACC,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA;OACG,aAAa,oBAAC,MAAD;QAAM,MAAK;QAAQ,SAAQ;OAAW,CAAA,IAAI;OACvD;OACA,OACG,KAAK;QACH,eAAe;QACf,YAAY;QACZ,aAAa,OAAO;QACpB;QACA,YAAY;OACd,CAAQ,IACR;MACD;KACH,CAAA,IAAA,IACD;IACH,CAAA,IAAA;IACH,MAAM,oBAAC,OAAD;KAAK,WAAW,GAAG,OAAO,MAAM,OAAO,UAAU;KAAI,UAAA;IAAU,CAAA,IAAI;IACzE,QAAQ,KAAK,IAAI,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,IAAI;GAC7D;;CACc,CAAA;AAEzB;AAEA,QAAQ,cAAc"}

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

@@ -1,5 +1,5 @@
 import { SurfaceLinkProps, SurfaceProps, SurfaceRenderLink } from "./type.mjs";
-import { SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
+import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
 import { styles } from "./style.mjs";
 import Surface from "./Surface.mjs";
-export { type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, Surface as default, styles as surfaceStyles, useSurfaceDepth, useSurfaceLink };
+export { type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, Surface as default, styles as surfaceStyles, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };

package/es/dashboard/Surface/link.d.mts

@@ -9,6 +9,11 @@ declare const SurfaceLinkProvider: ({ children, renderLink }: {
 declare const useSurfaceLink: (override?: SurfaceRenderLink) => SurfaceRenderLink;
 /** How many Surface cards wrap this node. A table can skip its own card when already inside one. */
 declare const useSurfaceDepth: () => number;
+/**
+ * Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillTertiary` in
+ * dark, and no fill of its own when nested in another Surface.
+ */
+declare const useSurfaceCardClassName: () => string;
 //#endregion
-export { SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink };
+export { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };
 //# sourceMappingURL=link.d.mts.map

package/es/dashboard/Surface/link.mjs

@@ -1,6 +1,8 @@
 "use client";
+import { styles } from "./style.mjs";
 import { createContext, use } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
 //#region src/dashboard/Surface/link.tsx
 const defaultRenderLink = ({ children, ...rest }) => /* @__PURE__ */ jsx("a", {
 	...rest,
@@ -16,7 +18,16 @@ const SurfaceLinkProvider = ({ children, renderLink }) => /* @__PURE__ */ jsx(Su
 const useSurfaceLink = (override) => override ?? use(SurfaceLinkContext);
 /** How many Surface cards wrap this node. A table can skip its own card when already inside one. */
 const useSurfaceDepth = () => use(SurfaceDepthContext);
+/**
+* Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillTertiary` in
+* dark, and no fill of its own when nested in another Surface.
+*/
+const useSurfaceCardClassName = () => {
+	const { isDarkMode } = useThemeMode();
+	const depth = useSurfaceDepth();
+	return cx(styles.card, isDarkMode && styles.cardDark, depth > 0 && styles.cardNested);
+};
 //#endregion
-export { SurfaceDepthContext, SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink };
+export { SurfaceDepthContext, SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };
 
 //# sourceMappingURL=link.mjs.map

package/es/dashboard/Surface/link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"link.mjs","names":[],"sources":["../../../src/dashboard/Surface/link.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type ReactNode, use } from 'react';\n\nimport type { SurfaceLinkProps, SurfaceRenderLink } from './type';\n\nconst defaultRenderLink: SurfaceRenderLink = ({ children, ...rest }: SurfaceLinkProps) => (\n  <a {...rest}>{children}</a>\n);\n\nconst SurfaceLinkContext = createContext<SurfaceRenderLink>(defaultRenderLink);\n\nconst SurfaceDepthContext = createContext(0);\n\n/** Plugs the app router into every dashboard card link (Surface, MetricStrip, Section). */\nexport const SurfaceLinkProvider = ({\n  children,\n  renderLink,\n}: {\n  children?: ReactNode;\n  renderLink: SurfaceRenderLink;\n}) => <SurfaceLinkContext value={renderLink}>{children}</SurfaceLinkContext>;\n\nexport const useSurfaceLink = (override?: SurfaceRenderLink) => override ?? use(SurfaceLinkContext);\n\n/** How many Surface cards wrap this node. A table can skip its own card when already inside one. */\nexport const useSurfaceDepth = () => use(SurfaceDepthContext);\n\nexport { SurfaceDepthContext };\n"],"mappings":";;;;AAMA,MAAM,qBAAwC,EAAE,UAAU,GAAG,WAC3D,oBAAC,KAAD;CAAG,GAAI;CAAO;AAAY,CAAA;AAG5B,MAAM,qBAAqB,cAAiC,iBAAiB;AAE7E,MAAM,sBAAsB,cAAc,CAAC;;AAG3C,MAAa,uBAAuB,EAClC,UACA,iBAII,oBAAC,oBAAD;CAAoB,OAAO;CAAa;AAA6B,CAAA;AAE3E,MAAa,kBAAkB,aAAiC,YAAY,IAAI,kBAAkB;;AAGlG,MAAa,wBAAwB,IAAI,mBAAmB"}
+{"version":3,"file":"link.mjs","names":[],"sources":["../../../src/dashboard/Surface/link.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { createContext, type ReactNode, use } from 'react';\n\nimport { styles } from './style';\nimport type { SurfaceLinkProps, SurfaceRenderLink } from './type';\n\nconst defaultRenderLink: SurfaceRenderLink = ({ children, ...rest }: SurfaceLinkProps) => (\n  <a {...rest}>{children}</a>\n);\n\nconst SurfaceLinkContext = createContext<SurfaceRenderLink>(defaultRenderLink);\n\nconst SurfaceDepthContext = createContext(0);\n\n/** Plugs the app router into every dashboard card link (Surface, MetricStrip, Section). */\nexport const SurfaceLinkProvider = ({\n  children,\n  renderLink,\n}: {\n  children?: ReactNode;\n  renderLink: SurfaceRenderLink;\n}) => <SurfaceLinkContext value={renderLink}>{children}</SurfaceLinkContext>;\n\nexport const useSurfaceLink = (override?: SurfaceRenderLink) => override ?? use(SurfaceLinkContext);\n\n/** How many Surface cards wrap this node. A table can skip its own card when already inside one. */\nexport const useSurfaceDepth = () => use(SurfaceDepthContext);\n\nexport { SurfaceDepthContext };\n\n/**\n * Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillTertiary` in\n * dark, and no fill of its own when nested in another Surface.\n */\nexport const useSurfaceCardClassName = () => {\n  const { isDarkMode } = useThemeMode();\n  const depth = useSurfaceDepth();\n  return cx(styles.card, isDarkMode && styles.cardDark, depth > 0 && styles.cardNested);\n};\n"],"mappings":";;;;;;AAQA,MAAM,qBAAwC,EAAE,UAAU,GAAG,WAC3D,oBAAC,KAAD;CAAG,GAAI;CAAO;AAAY,CAAA;AAG5B,MAAM,qBAAqB,cAAiC,iBAAiB;AAE7E,MAAM,sBAAsB,cAAc,CAAC;;AAG3C,MAAa,uBAAuB,EAClC,UACA,iBAII,oBAAC,oBAAD;CAAoB,OAAO;CAAa;AAA6B,CAAA;AAE3E,MAAa,kBAAkB,aAAiC,YAAY,IAAI,kBAAkB;;AAGlG,MAAa,wBAAwB,IAAI,mBAAmB;;;;;AAQ5D,MAAa,gCAAgC;CAC3C,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,QAAQ,gBAAgB;CAC9B,OAAO,GAAG,OAAO,MAAM,cAAc,OAAO,UAAU,QAAQ,KAAK,OAAO,UAAU;AACtF"}

package/es/dashboard/Surface/style.d.mts

@@ -2,17 +2,36 @@
 /**
  * A content card sitting on the workspace.
  *
- * Outlined `Block` uses `colorBorderSecondary` on `colorBgContainer`.
- * The workspace is already that container, so a card inside it steps up to
- * `colorBgElevated` and `colorBorder`.
+ * Backgrounds: light mode uses `colorBgContainer`. Dark mode uses the translucent
+ * `colorFillTertiary` (white 6%): on the #0d0d0d workspace it reads as about #1c1c1c, a subtle
+ * raised step. `colorFillQuaternary` (white 2%, about #111) would barely separate from the page.
+ *
+ * Borders and inner dividers (table, header and cell lines, PageSkeleton) use `colorFillSecondary`
+ * (white 10% / black 6%); hover and focus use the stronger `colorFill`. Painted over the dark card
+ * the border lands near #2f2f2f against #1c1c1c, and in light near #f0f0f0 against #ffffff.
+ *
+ * Anything that must hide content scrolled beneath it (table header cells, pinned and sticky
+ * cells, their scroll shadows) uses `--lobe-surface-bg-solid`: the same white 6% blended onto
+ * `--lobe-surface-canvas` (default `colorBgContainer`, the ConsoleShell workspace). `color-mix`
+ * in srgb with an opaque base is plain alpha compositing, so it matches the translucent card.
+ * Set `--lobe-surface-canvas` when a card sits on another page color.
+ *
+ * A Surface inside another Surface (`useSurfaceDepth() > 0`) drops its own fill so fills do not
+ * stack. Row hover backgrounds keep their own mix. Layout containers (ConsoleShell, ConsoleNav,
+ * FilterSidebar split divider, AuthLayout page canvas) keep their own tokens.
+ *
+ * Apply the card with `useSurfaceCardClassName()`; plain `surfaceStyles.card` is the light look.
  */
 declare const styles: {
   card: string;
+  cardDark: string;
+  cardNested: string;
   chart: string;
   /** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */
   clip: string;
   loading: string;
   arrow: string;
+  arrowLink: string;
   bleed: string;
   body: string;
   /** Table and header rules for the rich card. Kept off `card` so the shared class stays a plain frame. */