@lobehub/ui 5.58.0 → 5.60.0

package/es/dashboard/Surface/style.mjs

@@ -3,19 +3,369 @@ import { createStaticStyles } from "antd-style";
 /**
 * 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.
 */
-const styles = createStaticStyles(({ css, cssVar }) => ({ card: css`
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	card: css`
+    --lobe-surface-bg: ${cssVar.colorBgContainer};
+    --lobe-surface-bg-solid: ${cssVar.colorBgContainer};
+
     &&,
     &&:hover {
-      border: 1px solid ${cssVar.colorBorder};
+      border: 1px solid ${cssVar.colorFillSecondary};
       border-radius: ${cssVar.borderRadiusLG};
-      background: ${cssVar.colorBgElevated};
-      box-shadow: ${cssVar.boxShadowTertiary};
+      background: var(--lobe-surface-bg);
+      box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;
+    }
+  `,
+	cardDark: css`
+    &&& {
+      --lobe-surface-bg: ${cssVar.colorFillTertiary};
+
+      /* colorFillTertiary is white 6% in dark; blend the same amount onto the page. */
+      --lobe-surface-bg-solid: color-mix(
+        in srgb,
+        #fff 6%,
+        var(--lobe-surface-canvas, ${cssVar.colorBgContainer})
+      );
+    }
+  `,
+	cardNested: css`
+    &&&,
+    &&&:hover {
+      background: transparent;
+    }
+  `,
+	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: 8px;
+    margin-inline-start: auto;
+
+    color: ${cssVar.colorTextTertiary};
+
+    transition:
+      color 150ms ease-out,
+      transform 150ms ease-out;
+  `,
+	arrowLink: css`
+    display: flex;
+    flex: none;
+    align-items: center;
+    color: inherit;
+
+    & [data-surface-arrow] {
+      margin-block-start: 0;
+    }
+  `,
+	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;
+
+    /* Ant Design paints its own container color on .ant-table and the cells.
+       Clear it so the card background shows through; the card owns the fill. */
+    && .ant-table,
+    && th,
+    && td {
+      background: transparent;
+    }
+
+    && .ant-table-css-var,
+    && .ant-table-wrapper {
+      --ant-table-border-color: ${cssVar.colorFillSecondary};
+      --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: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});
+      box-shadow: inset 0 -1px 0 ${cssVar.colorFillSecondary};
+    }
+
+    /* 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: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});
+      backdrop-filter: blur(12px);
+    }
+
+    && td.ant-table-cell-fix-end-shadow-show::after {
+      background: linear-gradient(
+        to left,
+        color-mix(
+          in srgb,
+          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 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,
+          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 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,
+          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,
+          transparent
+        ),
+        transparent
+      );
+    }
+
+    [dir='rtl'] && td.ant-table-cell-fix-start-shadow-show::after {
+      background: linear-gradient(
+        to left,
+        color-mix(
+          in srgb,
+          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,
+          transparent
+        ),
+        transparent
+      );
+    }
+
+    && td {
+      border-block-end-color: ${cssVar.colorFillSecondary};
+    }
+
+    && 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: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});
+    }
+
+    && 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: ${cssVar.colorFill};
+    }
+
+    &&:hover [data-surface-arrow] {
+      transform: translate(1px, -1px);
+      color: ${cssVar.colorText};
+    }
+  `,
+	desc: css`
+    margin-block-start: -4px;
+
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.45;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	extra: css`
+    display: flex;
+    flex: none;
+    gap: 8px;
+    align-items: center;
+
+    block-size: 32px;
+  `,
+	header: css`
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    box-sizing: border-box;
+    min-block-size: 48px;
+    padding-block: 8px;
+    padding-inline: 16px;
+    border-block-end: 1px solid ${cssVar.colorFillSecondary};
+  `,
+	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;
+
+    /* The title line is the 32px control row; extra and the arrow center on it, and a
+       description adds its own line below without moving them. */
+    line-height: 32px;
+    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 * Backgrounds: light mode uses `colorBgContainer`. Dark mode uses the translucent\n * `colorFillTertiary` (white 6%): on the #0d0d0d workspace it reads as about #1c1c1c, a subtle\n * raised step. `colorFillQuaternary` (white 2%, about #111) would barely separate from the page.\n *\n * Borders and inner dividers (table, header and cell lines, PageSkeleton) use `colorFillSecondary`\n * (white 10% / black 6%); hover and focus use the stronger `colorFill`. Painted over the dark card\n * the border lands near #2f2f2f against #1c1c1c, and in light near #f0f0f0 against #ffffff.\n *\n * Anything that must hide content scrolled beneath it (table header cells, pinned and sticky\n * cells, their scroll shadows) uses `--lobe-surface-bg-solid`: the same white 6% blended onto\n * `--lobe-surface-canvas` (default `colorBgContainer`, the ConsoleShell workspace). `color-mix`\n * in srgb with an opaque base is plain alpha compositing, so it matches the translucent card.\n * Set `--lobe-surface-canvas` when a card sits on another page color.\n *\n * A Surface inside another Surface (`useSurfaceDepth() > 0`) drops its own fill so fills do not\n * stack. Row hover backgrounds keep their own mix. Layout containers (ConsoleShell, ConsoleNav,\n * FilterSidebar split divider, AuthLayout page canvas) keep their own tokens.\n *\n * Apply the card with `useSurfaceCardClassName()`; plain `surfaceStyles.card` is the light look.\n */\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  card: css`\n    --lobe-surface-bg: ${cssVar.colorBgContainer};\n    --lobe-surface-bg-solid: ${cssVar.colorBgContainer};\n\n    &&,\n    &&:hover {\n      border: 1px solid ${cssVar.colorFillSecondary};\n      border-radius: ${cssVar.borderRadiusLG};\n      background: var(--lobe-surface-bg);\n      box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;\n    }\n  `,\n  cardDark: css`\n    &&& {\n      --lobe-surface-bg: ${cssVar.colorFillTertiary};\n\n      /* colorFillTertiary is white 6% in dark; blend the same amount onto the page. */\n      --lobe-surface-bg-solid: color-mix(\n        in srgb,\n        #fff 6%,\n        var(--lobe-surface-canvas, ${cssVar.colorBgContainer})\n      );\n    }\n  `,\n  cardNested: css`\n    &&&,\n    &&&:hover {\n      background: transparent;\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: 8px;\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  arrowLink: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n    color: inherit;\n\n    & [data-surface-arrow] {\n      margin-block-start: 0;\n    }\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    /* Ant Design paints its own container color on .ant-table and the cells.\n       Clear it so the card background shows through; the card owns the fill. */\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: ${cssVar.colorFillSecondary};\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: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});\n      box-shadow: inset 0 -1px 0 ${cssVar.colorFillSecondary};\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: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});\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(\n          in srgb,\n          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,\n          transparent\n        ),\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(\n          in srgb,\n          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,\n          transparent\n        ),\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(\n          in srgb,\n          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,\n          transparent\n        ),\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(\n          in srgb,\n          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,\n          transparent\n        ),\n        transparent\n      );\n    }\n\n    && td {\n      border-block-end-color: ${cssVar.colorFillSecondary};\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: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});\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: ${cssVar.colorFill};\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: -4px;\n\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.45;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  /* One fixed control row (32px, the height of a small Segmented or a default ActionIcon), so a\n     header with controls is exactly as tall as one without, and the controls sit centered with\n     8px clear above the divider. */\n  extra: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n\n    block-size: 32px;\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    box-sizing: border-box;\n    min-block-size: 48px;\n    padding-block: 8px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\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\n    /* The title line is the 32px control row; extra and the arrow center on it, and a\n       description adds its own line below without moving them. */\n    line-height: 32px;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;yBACc,OAAO,iBAAiB;+BAClB,OAAO,iBAAiB;;;;0BAI7B,OAAO,mBAAmB;uBAC7B,OAAO,eAAe;;;;;CAK3C,UAAU,GAAG;;2BAEY,OAAO,kBAAkB;;;;;;qCAMf,OAAO,iBAAiB;;;;CAI3D,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;CAIV,MAAM,GAAG;;;CAGT,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;;;;aAMC,OAAO,kBAAkB;;;;;;CAMpC,WAAW,GAAG;;;;;;;;;;CAUd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;CAOT,SAAS,GAAG;;;;;;;;;;;;;kCAaoB,OAAO,mBAAmB;;;UAGlD,OAAO,UAAU;UACjB,OAAO,gBAAgB;;;;;;eAMlB,OAAO,mBAAmB;;;iDAGQ,OAAO,iBAAiB;mCACtC,OAAO,mBAAmB;;;;;;;;;iDASZ,OAAO,iBAAiB;;;;;;;;;yCAShC,OAAO,iBAAiB;;;;;;;;;;;;;yCAaxB,OAAO,iBAAiB;;;;;;;;;;;;;yCAaxB,OAAO,iBAAiB;;;;;;;;;;;;yCAYxB,OAAO,iBAAiB;;;;;;;;gCAQjC,OAAO,mBAAmB;;;;;uCAKnB,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;;;iDAMrC,OAAO,iBAAiB;;;;uCAIlC,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;CAIpF,YAAY,GAAG;;;sBAGK,OAAO,UAAU;;;;;eAKxB,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;;aAME,OAAO,mBAAmB;;CAKrC,OAAO,GAAG;;;;;;;;CAQV,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,SAAS,GAAG;;;CAGZ,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;CAoBhB,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Ef,OAAO,GAAG;;;;;;;;;;;aAWC,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