@lobehub/ui 5.57.3 → 5.59.0

package/es/dashboard/Surface/style.mjs

@@ -7,7 +7,8 @@ import { createStaticStyles } from "antd-style";
 * The workspace is already that container, so a card inside it steps up to
 * `colorBgElevated` and `colorBorder`.
 */
-const styles = createStaticStyles(({ css, cssVar }) => ({ card: css`
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	card: css`
     &&,
     &&:hover {
       border: 1px solid ${cssVar.colorBorder};
@@ -15,7 +16,287 @@ const styles = createStaticStyles(({ css, cssVar }) => ({ card: css`
       background: ${cssVar.colorBgElevated};
       box-shadow: ${cssVar.boxShadowTertiary};
     }
-  ` }));
+  `,
+	chart: css`
+    min-inline-size: 0;
+  `,
+	/** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */
+	clip: css`
+    overflow: hidden;
+  `,
+	loading: css`
+    padding-block: 4px 8px;
+  `,
+	arrow: css`
+    flex: none;
+
+    margin-block-start: 2px;
+    margin-inline-start: auto;
+
+    color: ${cssVar.colorTextTertiary};
+
+    transition:
+      color 150ms ease-out,
+      transform 150ms ease-out;
+  `,
+	bleed: css`
+    && th,
+    && td {
+      padding-inline: 16px;
+    }
+
+    && th {
+      white-space: nowrap;
+    }
+  `,
+	body: css`
+    --surface-pad-inline: 16px;
+    --surface-pad-block: 16px;
+
+    padding: 16px;
+  `,
+	/** Table and header rules for the rich card. Kept off `card` so the shared class stays a plain frame. */
+	content: css`
+    min-inline-size: 0;
+
+    /* Table cells default to colorBgContainer, a step darker than this card.
+       Ant Design paints that color on .ant-table itself, so the body stays dark
+       even after the cells are cleared. */
+    && .ant-table,
+    && th,
+    && td {
+      background: transparent;
+    }
+
+    && .ant-table-css-var,
+    && .ant-table-wrapper {
+      --ant-table-border-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+      --ant-table-row-hover-bg: color-mix(
+        in srgb,
+        ${cssVar.colorText} 6%,
+        ${cssVar.colorBgElevated}
+      );
+    }
+
+    && th {
+      font-weight: 500;
+      color: ${cssVar.colorTextSecondary};
+      white-space: nowrap;
+
+      background: ${cssVar.colorBgElevated};
+      box-shadow: inset 0 -1px 0 color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+    }
+
+    /* Pinned body cells inherit the transparent body, so a scrolled cell paints
+       straight through them. Frost with the card color. Header pins stay the
+       same solid fill as the rest of the header — a translucent header reads
+       as a lighter strip in dark mode. */
+    && td.ant-table-cell-fix-start,
+    && td.ant-table-cell-fix-end {
+      background: color-mix(in srgb, ${cssVar.colorBgElevated} 82%, transparent);
+      backdrop-filter: blur(12px);
+    }
+
+    && td.ant-table-cell-fix-end-shadow-show::after {
+      background: linear-gradient(
+        to left,
+        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        transparent
+      );
+      backdrop-filter: blur(8px);
+    }
+
+    && td.ant-table-cell-fix-start-shadow-show::after {
+      background: linear-gradient(
+        to right,
+        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        transparent
+      );
+      backdrop-filter: blur(8px);
+    }
+
+    [dir='rtl'] && td.ant-table-cell-fix-end-shadow-show::after {
+      background: linear-gradient(
+        to right,
+        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        transparent
+      );
+    }
+
+    [dir='rtl'] && td.ant-table-cell-fix-start-shadow-show::after {
+      background: linear-gradient(
+        to left,
+        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        transparent
+      );
+    }
+
+    && td {
+      border-block-end-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+    }
+
+    && tr:hover > td,
+    && .ant-table-tbody > tr.ant-table-row:hover > td {
+      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});
+    }
+
+    /* base-ui Table pins with inline position:sticky, not .ant-table-cell-fix-*.
+       The transparent body rule above would let scrolled text show through. */
+    && td[style*='sticky'] {
+      background: ${cssVar.colorBgElevated};
+    }
+
+    && tr:hover > td[style*='sticky'] {
+      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});
+    }
+  `,
+	/** Whole card answers hover when its header drills into another page. */
+	cardLinked: css`
+    &&:hover,
+    &&:focus-within {
+      border-color: color-mix(in srgb, ${cssVar.colorText} 28%, transparent);
+    }
+
+    &&:hover [data-surface-arrow] {
+      transform: translate(1px, -1px);
+      color: ${cssVar.colorText};
+    }
+  `,
+	desc: css`
+    margin-block-start: 2px;
+
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.45;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	extra: css`
+    display: flex;
+    flex: none;
+    gap: 8px;
+    align-items: center;
+  `,
+	header: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	heading: css`
+    min-inline-size: 0;
+  `,
+	headingLink: css`
+    display: flex;
+    flex: 1;
+    gap: 12px;
+    align-items: flex-start;
+
+    min-inline-size: 0;
+
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      color: inherit;
+    }
+  `,
+	/**
+	* A table inside padded card body meets the card's left, right, and bottom
+	* edges. A table that is the only body content also meets the header.
+	* Padding amounts come from `--surface-pad-*` on the same element.
+	*/
+	tableBleed: css`
+    /* A table nested in a cell keeps the cell's own inset. */
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) {
+      width: calc(100% + 2 * var(--surface-pad-inline, 16px));
+      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));
+    }
+
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):last-child {
+      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));
+    }
+
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):first-child:last-child {
+      margin-block-start: calc(-1 * var(--surface-pad-block, 16px));
+    }
+
+    /* ProTable keeps its search and toolbar in the padding. The table itself
+       meets the card's left, right, and bottom edges. Lower-specificity
+       selectors stay above the :has(th/td) rules for stylelint. */
+    && .ant-table-css-var,
+    && .ant-table-wrapper {
+      --ant-table-cell-padding-inline: var(--surface-pad-inline, 16px);
+      --ant-table-cell-padding-inline-md: var(--surface-pad-inline, 16px);
+      --ant-table-cell-padding-inline-sm: var(--surface-pad-inline, 16px);
+      --ant-table-header-border-radius: 0;
+    }
+
+    && .ant-table-wrapper {
+      width: calc(100% + 2 * var(--surface-pad-inline, 16px));
+      max-width: none;
+      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));
+    }
+
+    /* A plain table that is the card body meets the header and the bottom edge.
+       Its own corner radius would otherwise float inside the card padding. */
+    && > .lobe-flex:only-child > .ant-table-wrapper:only-child {
+      margin-block: calc(-1 * var(--surface-pad-block, 16px));
+    }
+
+    && .ant-pro-table:last-child {
+      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));
+    }
+
+    && .ant-table-wrapper .ant-table,
+    && .ant-table-wrapper .ant-table-container,
+    && .ant-table-thead > tr > th,
+    && .ant-table-thead > tr > th:first-child,
+    && .ant-table-thead > tr > th:last-child {
+      border-radius: 0;
+    }
+
+    && .ant-table-wrapper .ant-table-cell {
+      padding-inline: var(--surface-pad-inline, 16px);
+    }
+
+    && .ant-table-wrapper .ant-pagination {
+      margin-block: 0;
+      padding-block: 12px;
+      padding-inline: var(--surface-pad-inline, 16px);
+    }
+
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) th,
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) td {
+      padding-inline: var(--surface-pad-inline, 16px);
+    }
+
+    /* The root's negative bottom margin includes this sibling. Without block
+       padding the pager sits on the card edge. Same inset as the ant pagination. */
+    &&
+      :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper]))
+      > :not([data-table-wrapper]) {
+      margin-block: 0;
+      padding-block: 12px;
+      padding-inline: var(--surface-pad-inline, 16px);
+    }
+  `,
+	title: css`
+    overflow: hidden;
+
+    min-inline-size: 0;
+
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: ${cssVar.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `
+}));
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Surface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n/**\n * A content card sitting on the workspace.\n *\n * Outlined `Block` uses `colorBorderSecondary` on `colorBgContainer`.\n * The workspace is already that container, so a card inside it steps up to\n * `colorBgElevated` and `colorBorder`.\n */\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  card: css`\n    &&,\n    &&:hover {\n      border: 1px solid ${cssVar.colorBorder};\n      border-radius: ${cssVar.borderRadiusLG};\n      background: ${cssVar.colorBgElevated};\n      box-shadow: ${cssVar.boxShadowTertiary};\n    }\n  `,\n}));\n"],"mappings":";;;;;;;;;AASA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc,EAC7D,MAAM,GAAG;;;0BAGe,OAAO,YAAY;uBACtB,OAAO,eAAe;oBACzB,OAAO,gBAAgB;oBACvB,OAAO,kBAAkB;;IAG7C,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Surface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n/**\n * A content card sitting on the workspace.\n *\n * Outlined `Block` uses `colorBorderSecondary` on `colorBgContainer`.\n * The workspace is already that container, so a card inside it steps up to\n * `colorBgElevated` and `colorBorder`.\n */\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  card: css`\n    &&,\n    &&:hover {\n      border: 1px solid ${cssVar.colorBorder};\n      border-radius: ${cssVar.borderRadiusLG};\n      background: ${cssVar.colorBgElevated};\n      box-shadow: ${cssVar.boxShadowTertiary};\n    }\n  `,\n  chart: css`\n    min-inline-size: 0;\n  `,\n  /** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */\n  clip: css`\n    overflow: hidden;\n  `,\n  loading: css`\n    padding-block: 4px 8px;\n  `,\n  arrow: css`\n    flex: none;\n\n    margin-block-start: 2px;\n    margin-inline-start: auto;\n\n    color: ${cssVar.colorTextTertiary};\n\n    transition:\n      color 150ms ease-out,\n      transform 150ms ease-out;\n  `,\n  bleed: css`\n    && th,\n    && td {\n      padding-inline: 16px;\n    }\n\n    && th {\n      white-space: nowrap;\n    }\n  `,\n  body: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 16px;\n\n    padding: 16px;\n  `,\n  /** Table and header rules for the rich card. Kept off `card` so the shared class stays a plain frame. */\n  content: css`\n    min-inline-size: 0;\n\n    /* Table cells default to colorBgContainer, a step darker than this card.\n       Ant Design paints that color on .ant-table itself, so the body stays dark\n       even after the cells are cleared. */\n    && .ant-table,\n    && th,\n    && td {\n      background: transparent;\n    }\n\n    && .ant-table-css-var,\n    && .ant-table-wrapper {\n      --ant-table-border-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n      --ant-table-row-hover-bg: color-mix(\n        in srgb,\n        ${cssVar.colorText} 6%,\n        ${cssVar.colorBgElevated}\n      );\n    }\n\n    && th {\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      white-space: nowrap;\n\n      background: ${cssVar.colorBgElevated};\n      box-shadow: inset 0 -1px 0 color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n    }\n\n    /* Pinned body cells inherit the transparent body, so a scrolled cell paints\n       straight through them. Frost with the card color. Header pins stay the\n       same solid fill as the rest of the header — a translucent header reads\n       as a lighter strip in dark mode. */\n    && td.ant-table-cell-fix-start,\n    && td.ant-table-cell-fix-end {\n      background: color-mix(in srgb, ${cssVar.colorBgElevated} 82%, transparent);\n      backdrop-filter: blur(12px);\n    }\n\n    && td.ant-table-cell-fix-end-shadow-show::after {\n      background: linear-gradient(\n        to left,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n      backdrop-filter: blur(8px);\n    }\n\n    && td.ant-table-cell-fix-start-shadow-show::after {\n      background: linear-gradient(\n        to right,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n      backdrop-filter: blur(8px);\n    }\n\n    [dir='rtl'] && td.ant-table-cell-fix-end-shadow-show::after {\n      background: linear-gradient(\n        to right,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n    }\n\n    [dir='rtl'] && td.ant-table-cell-fix-start-shadow-show::after {\n      background: linear-gradient(\n        to left,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n    }\n\n    && td {\n      border-block-end-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n    }\n\n    && tr:hover > td,\n    && .ant-table-tbody > tr.ant-table-row:hover > td {\n      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n    }\n\n    /* base-ui Table pins with inline position:sticky, not .ant-table-cell-fix-*.\n       The transparent body rule above would let scrolled text show through. */\n    && td[style*='sticky'] {\n      background: ${cssVar.colorBgElevated};\n    }\n\n    && tr:hover > td[style*='sticky'] {\n      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n    }\n  `,\n  /** Whole card answers hover when its header drills into another page. */\n  cardLinked: css`\n    &&:hover,\n    &&:focus-within {\n      border-color: color-mix(in srgb, ${cssVar.colorText} 28%, transparent);\n    }\n\n    &&:hover [data-surface-arrow] {\n      transform: translate(1px, -1px);\n      color: ${cssVar.colorText};\n    }\n  `,\n  desc: css`\n    margin-block-start: 2px;\n\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.45;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  extra: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  heading: css`\n    min-inline-size: 0;\n  `,\n  headingLink: css`\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: flex-start;\n\n    min-inline-size: 0;\n\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      color: inherit;\n    }\n  `,\n  /**\n   * A table inside padded card body meets the card's left, right, and bottom\n   * edges. A table that is the only body content also meets the header.\n   * Padding amounts come from `--surface-pad-*` on the same element.\n   */\n  tableBleed: css`\n    /* A table nested in a cell keeps the cell's own inset. */\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) {\n      width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):last-child {\n      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):first-child:last-child {\n      margin-block-start: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    /* ProTable keeps its search and toolbar in the padding. The table itself\n       meets the card's left, right, and bottom edges. Lower-specificity\n       selectors stay above the :has(th/td) rules for stylelint. */\n    && .ant-table-css-var,\n    && .ant-table-wrapper {\n      --ant-table-cell-padding-inline: var(--surface-pad-inline, 16px);\n      --ant-table-cell-padding-inline-md: var(--surface-pad-inline, 16px);\n      --ant-table-cell-padding-inline-sm: var(--surface-pad-inline, 16px);\n      --ant-table-header-border-radius: 0;\n    }\n\n    && .ant-table-wrapper {\n      width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n      max-width: none;\n      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n    }\n\n    /* A plain table that is the card body meets the header and the bottom edge.\n       Its own corner radius would otherwise float inside the card padding. */\n    && > .lobe-flex:only-child > .ant-table-wrapper:only-child {\n      margin-block: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && .ant-pro-table:last-child {\n      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && .ant-table-wrapper .ant-table,\n    && .ant-table-wrapper .ant-table-container,\n    && .ant-table-thead > tr > th,\n    && .ant-table-thead > tr > th:first-child,\n    && .ant-table-thead > tr > th:last-child {\n      border-radius: 0;\n    }\n\n    && .ant-table-wrapper .ant-table-cell {\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    && .ant-table-wrapper .ant-pagination {\n      margin-block: 0;\n      padding-block: 12px;\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) th,\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) td {\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    /* The root's negative bottom margin includes this sibling. Without block\n       padding the pager sits on the card edge. Same inset as the ant pagination. */\n    &&\n      :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper]))\n      > :not([data-table-wrapper]) {\n      margin-block: 0;\n      padding-block: 12px;\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n  `,\n  title: css`\n    overflow: hidden;\n\n    min-inline-size: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;;;;;;;;AASA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;0BAGe,OAAO,YAAY;uBACtB,OAAO,eAAe;oBACzB,OAAO,gBAAgB;oBACvB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;CAIV,MAAM,GAAG;;;CAGT,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;;;;aAMC,OAAO,kBAAkB;;;;;;CAMpC,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;CAOT,SAAS,GAAG;;;;;;;;;;;;;;qDAcuC,OAAO,UAAU;;;UAG5D,OAAO,UAAU;UACjB,OAAO,gBAAgB;;;;;;eAMlB,OAAO,mBAAmB;;;oBAGrB,OAAO,gBAAgB;sDACW,OAAO,UAAU;;;;;;;;;uCAShC,OAAO,gBAAgB;;;;;;;6BAOjC,OAAO,gBAAgB;;;;;;;;;6BASvB,OAAO,gBAAgB;;;;;;;;;6BASvB,OAAO,gBAAgB;;;;;;;;6BAQvB,OAAO,gBAAgB;;;;;;mDAMD,OAAO,UAAU;;;;;uCAK7B,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;;;oBAMlE,OAAO,gBAAgB;;;;uCAIJ,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;CAIpF,YAAY,GAAG;;;yCAGwB,OAAO,UAAU;;;;;eAK3C,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;;aAME,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;;;CAMV,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,SAAS,GAAG;;;CAGZ,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;CAoBhB,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Ef,OAAO,GAAG;;;;;;;;aAQC,OAAO,UAAU;;;;AAI9B,EAAE"}

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

@@ -1,8 +1,36 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/dashboard/Surface/type.d.ts
-interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
+interface SurfaceLinkProps {
+  children: ReactNode;
+  className?: string;
+  href: string;
+  rel?: string;
+  target?: string;
+}
+/** Renders a link with the app's router. Defaults to a plain `<a>`. */
+type SurfaceRenderLink = (props: SurfaceLinkProps) => ReactNode;
+interface SurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Drop body padding and widen table cells so a table sits on the card edges. */
+  bleed?: boolean;
+  /** Full-width slot under the body, for a chart that meets the card edges. */
+  chart?: ReactNode;
   children?: ReactNode;
+  description?: ReactNode;
+  extra?: ReactNode;
+  /** Makes the heading a link to the page this card summarises. */
+  href?: string;
+  /**
+   * First load: with no children the body is a placeholder block.
+   * A refresh with children keeps them and shows a small spinner in the header.
+   */
+  loading?: boolean;
+  /** Pad the body. Defaults to on for a card with a header and off for a bare card. */
+  padded?: boolean;
+  /** Overrides the link renderer from `SurfaceLinkProvider`. */
+  renderLink?: SurfaceRenderLink;
+  /** Visible heading. */
+  title?: ReactNode;
 }
 //#endregion
-export { SurfaceProps };
+export { SurfaceLinkProps, SurfaceProps, SurfaceRenderLink };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/TableIconActions/TableIconActions.d.mts

@@ -0,0 +1,17 @@
+import { TableIconActionProps, TableIconActionsProps } from "./type.mjs";
+//#region src/dashboard/TableIconActions/TableIconActions.d.ts
+/** Column width for a row of `count` small filled action icons. */
+declare const tableActionColumnWidth: (count: number) => number;
+/** Right-aligned row of icon actions for a table's last column. */
+declare const TableIconActions: {
+  ({ children }: TableIconActionsProps): import("react").JSX.Element;
+  displayName: string;
+};
+/** One row action: a small filled icon button whose label is its name and tooltip. */
+declare const TableIconAction: {
+  ({ danger, disabled, icon, label, loading, onClick }: TableIconActionProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { TableIconAction, TableIconActions as default, tableActionColumnWidth };
+//# sourceMappingURL=TableIconActions.d.mts.map

package/es/dashboard/TableIconActions/TableIconActions.mjs

@@ -0,0 +1,39 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import ActionIcon from "../../base-ui/ActionIcon/ActionIcon.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/dashboard/TableIconActions/TableIconActions.tsx
+/** `ActionIcon` `size="small"` is 24px. */
+const ACTION_ICON_SIZE = 24;
+const ACTION_ICON_GAP = 4;
+/** Table cell horizontal padding, so the icons are not clipped by the column. */
+const ACTION_CELL_PADDING = 32;
+/** Column width for a row of `count` small filled action icons. */
+const tableActionColumnWidth = (count) => count * ACTION_ICON_SIZE + Math.max(0, count - 1) * ACTION_ICON_GAP + ACTION_CELL_PADDING;
+/** Right-aligned row of icon actions for a table's last column. */
+const TableIconActions = ({ children }) => /* @__PURE__ */ jsx(FlexBasic_default, {
+	horizontal: true,
+	align: "center",
+	gap: ACTION_ICON_GAP,
+	justify: "flex-end",
+	width: "100%",
+	children
+});
+TableIconActions.displayName = "TableIconActions";
+/** One row action: a small filled icon button whose label is its name and tooltip. */
+const TableIconAction = ({ danger, disabled, icon, label, loading, onClick }) => /* @__PURE__ */ jsx(ActionIcon, {
+	"aria-label": label,
+	danger,
+	disabled,
+	icon,
+	loading,
+	size: "small",
+	title: label,
+	variant: "filled",
+	onClick
+});
+TableIconAction.displayName = "TableIconAction";
+//#endregion
+export { TableIconAction, TableIconActions as default, tableActionColumnWidth };
+
+//# sourceMappingURL=TableIconActions.mjs.map

package/es/dashboard/TableIconActions/TableIconActions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableIconActions.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/TableIconActions/TableIconActions.tsx"],"sourcesContent":["'use client';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport type { TableIconActionProps, TableIconActionsProps } from './type';\n\n/** `ActionIcon` `size=\"small\"` is 24px. */\nconst ACTION_ICON_SIZE = 24;\nconst ACTION_ICON_GAP = 4;\n/** Table cell horizontal padding, so the icons are not clipped by the column. */\nconst ACTION_CELL_PADDING = 32;\n\n/** Column width for a row of `count` small filled action icons. */\nexport const tableActionColumnWidth = (count: number) =>\n  count * ACTION_ICON_SIZE + Math.max(0, count - 1) * ACTION_ICON_GAP + ACTION_CELL_PADDING;\n\n/** Right-aligned row of icon actions for a table's last column. */\nconst TableIconActions = ({ children }: TableIconActionsProps) => (\n  <Flexbox horizontal align={'center'} gap={ACTION_ICON_GAP} justify={'flex-end'} width={'100%'}>\n    {children}\n  </Flexbox>\n);\n\nTableIconActions.displayName = 'TableIconActions';\n\n/** One row action: a small filled icon button whose label is its name and tooltip. */\nexport const TableIconAction = ({\n  danger,\n  disabled,\n  icon,\n  label,\n  loading,\n  onClick,\n}: TableIconActionProps) => (\n  <ActionIcon\n    aria-label={label}\n    danger={danger}\n    disabled={disabled}\n    icon={icon}\n    loading={loading}\n    size={'small'}\n    title={label}\n    variant={'filled'}\n    onClick={onClick}\n  />\n);\n\nTableIconAction.displayName = 'TableIconAction';\n\nexport default TableIconActions;\n"],"mappings":";;;;;;AAQA,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;;AAExB,MAAM,sBAAsB;;AAG5B,MAAa,0BAA0B,UACrC,QAAQ,mBAAmB,KAAK,IAAI,GAAG,QAAQ,CAAC,IAAI,kBAAkB;;AAGxE,MAAM,oBAAoB,EAAE,eAC1B,oBAACA,mBAAD;CAAS,YAAA;CAAW,OAAO;CAAU,KAAK;CAAiB,SAAS;CAAY,OAAO;CACpF;AACM,CAAA;AAGX,iBAAiB,cAAc;;AAG/B,MAAa,mBAAmB,EAC9B,QACA,UACA,MACA,OACA,SACA,cAEA,oBAAC,YAAD;CACE,cAAY;CACJ;CACE;CACJ;CACG;CACT,MAAM;CACN,OAAO;CACP,SAAS;CACA;AACV,CAAA;AAGH,gBAAgB,cAAc"}

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

@@ -0,0 +1,3 @@
+import { TableIconActionProps, TableIconActionsProps } from "./type.mjs";
+import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions.mjs";
+export { TableIconAction, type TableIconActionProps, type TableIconActionsProps, TableIconActions as default, tableActionColumnWidth };

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

@@ -0,0 +1,18 @@
+import { MouseEventHandler, ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+//#region src/dashboard/TableIconActions/type.d.ts
+interface TableIconActionsProps {
+  children?: ReactNode;
+}
+interface TableIconActionProps {
+  danger?: boolean;
+  disabled?: boolean;
+  icon: LucideIcon;
+  /** Accessible name and tooltip. Required: the button has no visible text. */
+  label: string;
+  loading?: boolean;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+}
+//#endregion
+export { TableIconActionProps, TableIconActionsProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/TitleWithTips/TitleWithTips.d.mts

@@ -0,0 +1,10 @@
+import { TitleWithTipsProps } from "./type.mjs";
+//#region src/dashboard/TitleWithTips/TitleWithTips.d.ts
+/** A column or field title with an info icon that explains it on hover. */
+declare const TitleWithTips: {
+  ({ className, tips, title }: TitleWithTipsProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { TitleWithTips as default };
+//# sourceMappingURL=TitleWithTips.d.mts.map

package/es/dashboard/TitleWithTips/TitleWithTips.mjs

@@ -0,0 +1,28 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import { Tooltip } from "../../base-ui/Tooltip/Tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar } from "antd-style";
+import { InfoIcon } from "lucide-react";
+//#region src/dashboard/TitleWithTips/TitleWithTips.tsx
+/** A column or field title with an info icon that explains it on hover. */
+const TitleWithTips = ({ className, tips, title }) => /* @__PURE__ */ jsxs(FlexBasic_default, {
+	horizontal: true,
+	align: "center",
+	className,
+	gap: 4,
+	children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx(Tooltip, {
+		title: tips,
+		children: /* @__PURE__ */ jsx(Icon, {
+			color: cssVar.colorTextTertiary,
+			icon: InfoIcon,
+			style: { cursor: "help" }
+		})
+	})]
+});
+TitleWithTips.displayName = "TitleWithTips";
+//#endregion
+export { TitleWithTips as default };
+
+//# sourceMappingURL=TitleWithTips.mjs.map

package/es/dashboard/TitleWithTips/TitleWithTips.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleWithTips.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/TitleWithTips/TitleWithTips.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { InfoIcon } from 'lucide-react';\n\nimport Tooltip from '@/base-ui/Tooltip';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport type { TitleWithTipsProps } from './type';\n\n/** A column or field title with an info icon that explains it on hover. */\nconst TitleWithTips = ({ className, tips, title }: TitleWithTipsProps) => (\n  <Flexbox horizontal align={'center'} className={className} gap={4}>\n    <span>{title}</span>\n    <Tooltip title={tips}>\n      <Icon color={cssVar.colorTextTertiary} icon={InfoIcon} style={{ cursor: 'help' }} />\n    </Tooltip>\n  </Flexbox>\n);\n\nTitleWithTips.displayName = 'TitleWithTips';\n\nexport default TitleWithTips;\n"],"mappings":";;;;;;;;;AAYA,MAAM,iBAAiB,EAAE,WAAW,MAAM,YACxC,qBAACA,mBAAD;CAAS,YAAA;CAAW,OAAO;CAAqB;CAAW,KAAK;CAAhE,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GACnB,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,oBAAC,MAAD;GAAM,OAAO,OAAO;GAAmB,MAAM;GAAU,OAAO,EAAE,QAAQ,OAAO;EAAI,CAAA;CAC5E,CAAA,CACF;;AAGX,cAAc,cAAc"}

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

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

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+//#region src/dashboard/TitleWithTips/type.d.ts
+interface TitleWithTipsProps {
+  className?: string;
+  /** Tooltip shown on the info icon. */
+  tips: ReactNode;
+  title: ReactNode;
+}
+//#endregion
+export { TitleWithTipsProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/index.d.mts

@@ -4,6 +4,9 @@ import "./AuthLayout/index.mjs";
 import { BreadcrumbItem, BreadcrumbProps } from "./Breadcrumb/type.mjs";
 import Breadcrumb from "./Breadcrumb/Breadcrumb.mjs";
 import "./Breadcrumb/index.mjs";
+import { ChartGridProps } from "./ChartGrid/type.mjs";
+import ChartGrid from "./ChartGrid/ChartGrid.mjs";
+import "./ChartGrid/index.mjs";
 import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavProps } from "./ConsoleNav/type.mjs";
 import { resolveActiveHref } from "./ConsoleNav/active.mjs";
 import ConsoleNav from "./ConsoleNav/ConsoleNav.mjs";
@@ -17,6 +20,16 @@ import { useInFilterSplit } from "./FilterSidebar/context.mjs";
 import { FilterOptionProps, FilterRowProps, FilterSidebarProps } from "./FilterSidebar/type.mjs";
 import FilterSidebar, { FilterOption, FilterRow } from "./FilterSidebar/FilterSidebar.mjs";
 import "./FilterSidebar/index.mjs";
+import { FilterStripItem, FilterStripProps } from "./FilterStrip/type.mjs";
+import FilterStrip, { formatInteger } from "./FilterStrip/FilterStrip.mjs";
+import "./FilterStrip/index.mjs";
+import { LabelWithKeyProps } from "./LabelWithKey/type.mjs";
+import LabelWithKey from "./LabelWithKey/LabelWithKey.mjs";
+import "./LabelWithKey/index.mjs";
+import { SurfaceLinkProps, SurfaceProps, SurfaceRenderLink } from "./Surface/type.mjs";
+import { MetricItem, MetricStripProps } from "./MetricStrip/type.mjs";
+import MetricStrip from "./MetricStrip/MetricStrip.mjs";
+import "./MetricStrip/index.mjs";
 import { PageHeaderProps } from "./PageHeader/type.mjs";
 import PageHeader from "./PageHeader/PageHeader.mjs";
 import "./PageHeader/index.mjs";
@@ -25,13 +38,28 @@ import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, Ta
 import { PageTab, PageTabsProps } from "./PageTabs/type.mjs";
 import PageTabs from "./PageTabs/PageTabs.mjs";
 import "./PageTabs/index.mjs";
+import { PageToolbarProps } from "./PageToolbar/type.mjs";
+import PageToolbar from "./PageToolbar/PageToolbar.mjs";
+import "./PageToolbar/index.mjs";
+import { PanelSurfaceProps } from "./PanelSurface/type.mjs";
+import PanelSurface from "./PanelSurface/PanelSurface.mjs";
+import "./PanelSurface/index.mjs";
 import { RouteProgressProps } from "./RouteProgress/type.mjs";
 import RouteProgress from "./RouteProgress/RouteProgress.mjs";
+import { SectionProps } from "./Section/type.mjs";
+import Section from "./Section/Section.mjs";
+import "./Section/index.mjs";
 import { StatCardProps, StatDirection } from "./StatCard/type.mjs";
 import StatCard from "./StatCard/StatCard.mjs";
 import "./StatCard/index.mjs";
+import { SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
 import { styles } from "./Surface/style.mjs";
-import { SurfaceProps } from "./Surface/type.mjs";
 import Surface from "./Surface/Surface.mjs";
 import "./Surface/index.mjs";
-export { AuthLayout, type AuthLayoutProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, ConsoleBrand, type ConsoleBrandProps, ConsoleNav, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleShell, type ConsoleShellProps, type ConsoleShellState, FilterOption, type FilterOptionProps, FilterRow, type FilterRowProps, FilterSidebar, type FilterSidebarProps, LoadingAnnouncer, PageHeader, type PageHeaderProps, PageHeaderSkeleton, PageLoading, type PageLoadingProps, type PageTab, PageTabs, type PageTabsProps, RouteProgress, type RouteProgressProps, StatCard, type StatCardProps, StatCardSkeleton, type StatDirection, Surface, type SurfaceProps, TableSkeleton, resolveActiveHref, styles as surfaceStyles, useConsoleShell, useInFilterSplit };
+import { TableIconActionProps, TableIconActionsProps } from "./TableIconActions/type.mjs";
+import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions/TableIconActions.mjs";
+import "./TableIconActions/index.mjs";
+import { TitleWithTipsProps } from "./TitleWithTips/type.mjs";
+import TitleWithTips from "./TitleWithTips/TitleWithTips.mjs";
+import "./TitleWithTips/index.mjs";
+export { AuthLayout, type AuthLayoutProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, ChartGrid, type ChartGridProps, ConsoleBrand, type ConsoleBrandProps, ConsoleNav, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleShell, type ConsoleShellProps, type ConsoleShellState, FilterOption, type FilterOptionProps, FilterRow, type FilterRowProps, FilterSidebar, type FilterSidebarProps, FilterStrip, type FilterStripItem, type FilterStripProps, LabelWithKey, type LabelWithKeyProps, LoadingAnnouncer, type MetricItem, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageHeaderSkeleton, PageLoading, type PageLoadingProps, type PageTab, PageTabs, type PageTabsProps, PageToolbar, type PageToolbarProps, PanelSurface, type PanelSurfaceProps, RouteProgress, type RouteProgressProps, Section, type SectionProps, StatCard, type StatCardProps, StatCardSkeleton, type StatDirection, Surface, type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, TableIconAction, type TableIconActionProps, TableIconActions, type TableIconActionsProps, TableSkeleton, TitleWithTips, type TitleWithTipsProps, formatInteger, resolveActiveHref, styles as surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceDepth, useSurfaceLink };

package/es/dashboard/index.mjs

@@ -1,6 +1,7 @@
 import { styles } from "./Surface/style.mjs";
 import AuthLayout from "./AuthLayout/AuthLayout.mjs";
 import Breadcrumb from "./Breadcrumb/Breadcrumb.mjs";
+import ChartGrid from "./ChartGrid/ChartGrid.mjs";
 import { resolveActiveHref } from "./ConsoleNav/active.mjs";
 import { useConsoleShell } from "./ConsoleShell/context.mjs";
 import ConsoleNav from "./ConsoleNav/ConsoleNav.mjs";
@@ -8,10 +9,19 @@ import ConsoleBrand from "./ConsoleShell/ConsoleBrand.mjs";
 import ConsoleShell from "./ConsoleShell/ConsoleShell.mjs";
 import { useInFilterSplit } from "./FilterSidebar/context.mjs";
 import FilterSidebar, { FilterOption, FilterRow } from "./FilterSidebar/FilterSidebar.mjs";
+import { SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
+import Surface from "./Surface/Surface.mjs";
+import FilterStrip, { formatInteger } from "./FilterStrip/FilterStrip.mjs";
+import LabelWithKey from "./LabelWithKey/LabelWithKey.mjs";
+import MetricStrip from "./MetricStrip/MetricStrip.mjs";
 import PageHeader from "./PageHeader/PageHeader.mjs";
 import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton } from "./PageSkeleton/PageSkeleton.mjs";
 import PageTabs from "./PageTabs/PageTabs.mjs";
+import PageToolbar from "./PageToolbar/PageToolbar.mjs";
+import PanelSurface from "./PanelSurface/PanelSurface.mjs";
 import RouteProgress from "./RouteProgress/RouteProgress.mjs";
+import Section from "./Section/Section.mjs";
 import StatCard from "./StatCard/StatCard.mjs";
-import Surface from "./Surface/Surface.mjs";
-export { AuthLayout, Breadcrumb, ConsoleBrand, ConsoleNav, ConsoleShell, FilterOption, FilterRow, FilterSidebar, LoadingAnnouncer, PageHeader, PageHeaderSkeleton, PageLoading, PageTabs, RouteProgress, StatCard, StatCardSkeleton, Surface, TableSkeleton, resolveActiveHref, styles as surfaceStyles, useConsoleShell, useInFilterSplit };
+import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions/TableIconActions.mjs";
+import TitleWithTips from "./TitleWithTips/TitleWithTips.mjs";
+export { AuthLayout, Breadcrumb, ChartGrid, ConsoleBrand, ConsoleNav, ConsoleShell, FilterOption, FilterRow, FilterSidebar, FilterStrip, LabelWithKey, LoadingAnnouncer, MetricStrip, PageHeader, PageHeaderSkeleton, PageLoading, PageTabs, PageToolbar, PanelSurface, RouteProgress, Section, StatCard, StatCardSkeleton, Surface, SurfaceLinkProvider, TableIconAction, TableIconActions, TableSkeleton, TitleWithTips, formatInteger, resolveActiveHref, styles as surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceDepth, useSurfaceLink };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.57.3",
+  "version": "5.59.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",