@lobehub/ui 5.62.1 → 5.63.1

package/es/dashboard/Surface/style.mjs

@@ -4,16 +4,18 @@ import { createStaticStyles } from "antd-style";
 * A content card sitting on the workspace.
 *
 * 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.
+* `colorFillQuaternary` (white 2%), one step below `colorFillTertiary`, for a quieter raised
+* step on the workspace.
 *
-* Borders and inner dividers (table, header and cell lines, PageSkeleton) use `colorFillSecondary`
-* (white 10% in dark, black 6% in light); hover and focus use the stronger `colorFill`. The light
-* card outline itself is one step darker (`colorFill`); dark keeps `colorFillSecondary`, which over
-* the dark card lands near #2f2f2f against #1c1c1c.
+* Borders and inner dividers (table, header and cell lines, PageSkeleton, strip seams) all use
+* `--lobe-fill-border` (`colorFill` in light, `colorFillSecondary` in dark; set on `:root` by
+* ThemeProvider). Hover / focus / stronger edges use `--lobe-fill-border-strong` (light:
+* `colorFill` mixed 15% toward `colorText`; dark: `colorFill`). Light is Block `outlined`
+* (`colorBgContainer` + border); dark uses translucent `colorFillQuaternary` with the same
+* border var.
 *
 * 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
+* cells, their scroll shadows) uses `--lobe-surface-bg-solid`: the same white 2% 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.
@@ -31,7 +33,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     &&,
     &&:hover {
-      border: 1px solid ${cssVar.colorFill};
+      border: 1px solid var(--lobe-fill-border, ${cssVar.colorFill});
       border-radius: ${cssVar.borderRadiusLG};
       background: var(--lobe-surface-bg);
       box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;
@@ -39,17 +41,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	cardDark: css`
     &&& {
-      --lobe-surface-bg: ${cssVar.colorFillTertiary};
+      --lobe-surface-bg: ${cssVar.colorFillQuaternary};
 
-      /* colorFillTertiary is white 6% in dark; blend the same amount onto the page. */
+      /* colorFillQuaternary is white 2% in dark; blend the same amount onto the page. */
       --lobe-surface-bg-solid: color-mix(
         in srgb,
-        #fff 6%,
+        #fff 2%,
         var(--lobe-surface-canvas, ${cssVar.colorBgContainer})
       );
 
-      /* Dark keeps the lighter border; light mode uses the slightly darker colorFill. */
-      border-color: ${cssVar.colorFillSecondary};
+      /* Border: --lobe-fill-border (dark: colorFillSecondary) from \`card\`. */
     }
   `,
 	cardNested: css`
@@ -61,9 +62,13 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	chart: css`
     min-inline-size: 0;
   `,
-	/** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */
+	/**
+	* Rounded corners clip whatever reaches the edge: a bled table, header rule, chart, or a
+	* tab / segmented indicator. \`clip\` (not \`hidden\`) creates no scroll container, so sticky
+	* table headers keep sticking to the page scroller; popups are portaled and unaffected.
+	*/
 	clip: css`
-    overflow: hidden;
+    overflow: clip;
   `,
 	loading: css`
     padding-block: 4px 8px;
@@ -120,7 +125,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     && .ant-table-css-var,
     && .ant-table-wrapper {
-      --ant-table-border-color: ${cssVar.colorFillSecondary};
+      --ant-table-border-color: var(--lobe-fill-border, ${cssVar.colorFill});
       --ant-table-row-hover-bg: color-mix(
         in srgb,
         ${cssVar.colorText} 6%,
@@ -134,7 +139,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       white-space: nowrap;
 
       background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});
-      box-shadow: inset 0 -1px 0 ${cssVar.colorFillSecondary};
+      box-shadow: inset 0 -1px 0 var(--lobe-fill-border, ${cssVar.colorFill});
     }
 
     /* Pinned body cells inherit the transparent body, so a scrolled cell paints
@@ -198,7 +203,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
 
     && td {
-      border-block-end-color: ${cssVar.colorFillSecondary};
+      border-block-end-color: var(--lobe-fill-border, ${cssVar.colorFill});
     }
 
     && tr:hover > td,
@@ -220,7 +225,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	cardLinked: css`
     &&:hover,
     &&:focus-within {
-      border-color: ${cssVar.colorFill};
+      border-color: var(--lobe-fill-border-strong, ${cssVar.colorFill});
     }
 
     &&:hover [data-surface-arrow] {
@@ -254,7 +259,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     min-block-size: 48px;
     padding-block: 8px;
     padding-inline: 16px;
-    border-block-end: 1px solid ${cssVar.colorFillSecondary};
+    border-block-end: 1px solid var(--lobe-fill-border, ${cssVar.colorFill});
   `,
 	heading: css`
     min-inline-size: 0;

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 * 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% in dark, black 6% in light); hover and focus use the stronger `colorFill`. The light\n * card outline itself is one step darker (`colorFill`); dark keeps `colorFillSecondary`, which over\n * the dark card lands near #2f2f2f against #1c1c1c.\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.colorFill};\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      /* Dark keeps the lighter border; light mode uses the slightly darker colorFill. */\n      border-color: ${cssVar.colorFillSecondary};\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;yBACc,OAAO,iBAAiB;+BAClB,OAAO,iBAAiB;;;;0BAI7B,OAAO,UAAU;uBACpB,OAAO,eAAe;;;;;CAK3C,UAAU,GAAG;;2BAEY,OAAO,kBAAkB;;;;;;qCAMf,OAAO,iBAAiB;;;;sBAIvC,OAAO,mBAAmB;;;CAG9C,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"}
+{"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 * `colorFillQuaternary` (white 2%), one step below `colorFillTertiary`, for a quieter raised\n * step on the workspace.\n *\n * Borders and inner dividers (table, header and cell lines, PageSkeleton, strip seams) all use\n * `--lobe-fill-border` (`colorFill` in light, `colorFillSecondary` in dark; set on `:root` by\n * ThemeProvider). Hover / focus / stronger edges use `--lobe-fill-border-strong` (light:\n * `colorFill` mixed 15% toward `colorText`; dark: `colorFill`). Light is Block `outlined`\n * (`colorBgContainer` + border); dark uses translucent `colorFillQuaternary` with the same\n * border var.\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 2% 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 var(--lobe-fill-border, ${cssVar.colorFill});\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.colorFillQuaternary};\n\n      /* colorFillQuaternary is white 2% in dark; blend the same amount onto the page. */\n      --lobe-surface-bg-solid: color-mix(\n        in srgb,\n        #fff 2%,\n        var(--lobe-surface-canvas, ${cssVar.colorBgContainer})\n      );\n\n      /* Border: --lobe-fill-border (dark: colorFillSecondary) from \\`card\\`. */\n    }\n  `,\n  cardNested: css`\n    &&&,\n    &&&:hover {\n      background: transparent;\n    }\n  `,\n  chart: css`\n    min-inline-size: 0;\n  `,\n  /**\n   * Rounded corners clip whatever reaches the edge: a bled table, header rule, chart, or a\n   * tab / segmented indicator. \\`clip\\` (not \\`hidden\\`) creates no scroll container, so sticky\n   * table headers keep sticking to the page scroller; popups are portaled and unaffected.\n   */\n  clip: css`\n    overflow: clip;\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: var(--lobe-fill-border, ${cssVar.colorFill});\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 var(--lobe-fill-border, ${cssVar.colorFill});\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: var(--lobe-fill-border, ${cssVar.colorFill});\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: var(--lobe-fill-border-strong, ${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 var(--lobe-fill-border, ${cssVar.colorFill});\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;yBACc,OAAO,iBAAiB;+BAClB,OAAO,iBAAiB;;;;kDAIL,OAAO,UAAU;uBAC5C,OAAO,eAAe;;;;;CAK3C,UAAU,GAAG;;2BAEY,OAAO,oBAAoB;;;;;;qCAMjB,OAAO,iBAAiB;;;;;;CAM3D,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;;;;CAQV,MAAM,GAAG;;;CAGT,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;;;;aAMC,OAAO,kBAAkB;;;;;;CAMpC,WAAW,GAAG;;;;;;;;;;CAUd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;CAOT,SAAS,GAAG;;;;;;;;;;;;;0DAa4C,OAAO,UAAU;;;UAGjE,OAAO,UAAU;UACjB,OAAO,gBAAgB;;;;;;eAMlB,OAAO,mBAAmB;;;iDAGQ,OAAO,iBAAiB;2DACd,OAAO,UAAU;;;;;;;;;iDAS3B,OAAO,iBAAiB;;;;;;;;;yCAShC,OAAO,iBAAiB;;;;;;;;;;;;;yCAaxB,OAAO,iBAAiB;;;;;;;;;;;;;yCAaxB,OAAO,iBAAiB;;;;;;;;;;;;yCAYxB,OAAO,iBAAiB;;;;;;;;wDAQT,OAAO,UAAU;;;;;uCAKlC,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;;;iDAMrC,OAAO,iBAAiB;;;;uCAIlC,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;CAIpF,YAAY,GAAG;;;qDAGoC,OAAO,UAAU;;;;;eAKvD,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;;aAME,OAAO,mBAAmB;;CAKrC,OAAO,GAAG;;;;;;;;CAQV,QAAQ,GAAG;;;;;;;;;;0DAU6C,OAAO,UAAU;;CAEzE,SAAS,GAAG;;;CAGZ,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;CAoBhB,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Ef,OAAO,GAAG;;;;;;;;;;;aAWC,OAAO,UAAU;;;;AAI9B,EAAE"}

package/package.json

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