@lobehub/ui 5.61.0 → 5.62.0

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

@@ -1 +1 @@
-{"version":3,"file":"MetricCell.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/MetricCell.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Icon from '@/Icon';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport type { SurfaceRenderLink } from '../Surface/type';\nimport { styles } from './style';\nimport type { MetricItem } from './type';\n\nconst deltaClass = {\n  down: styles.deltaDown,\n  flat: styles.deltaFlat,\n  up: styles.deltaUp,\n} as const;\n\nconst MetricBody = ({ item, loading }: { item: MetricItem; loading?: boolean }) => (\n  <>\n    <div className={styles.head}>\n      <div className={styles.headCopy}>\n        <div className={styles.label}>{item.label}</div>\n        {item.action}\n      </div>\n      {item.mark ? (\n        <span aria-hidden className={styles.mark}>\n          <Icon icon={item.mark} size={14} />\n        </span>\n      ) : null}\n    </div>\n    {loading ? (\n      <Skeleton height={28} radius={6} width={88} />\n    ) : (\n      <div\n        className={cx(\n          styles.value,\n          item.valueTone === 'danger' && styles.valueDanger,\n          item.valueTone === 'warning' && styles.valueWarning,\n        )}\n      >\n        {item.value}\n      </div>\n    )}\n    {!loading && (item.delta || item.hint) ? (\n      <div className={styles.foot}>\n        {item.delta ? (\n          <span className={cx(styles.delta, deltaClass[item.direction ?? 'flat'])}>\n            {item.delta}\n          </span>\n        ) : null}\n        {item.hint ? <span className={styles.hint}>{item.hint}</span> : null}\n      </div>\n    ) : null}\n  </>\n);\n\nexport interface MetricCellProps {\n  item: MetricItem;\n  loading?: boolean;\n  renderLink?: SurfaceRenderLink;\n  /** Draw the joined-strip divider on the trailing and bottom edges. */\n  seam?: boolean;\n}\n\n/** One metric: label row, figure, delta and hint. Shared by MetricStrip and StatCard. */\nconst MetricCell = ({ item, loading, renderLink, seam = false }: MetricCellProps) => {\n  const link = useSurfaceLink(renderLink);\n  const body = <MetricBody item={item} loading={item.loading ?? loading} />;\n  const cell = cx(styles.cell, seam && styles.cellSeam);\n\n  if (item.href) {\n    return (\n      <div className={styles.slot}>\n        {link({ children: body, className: cx(cell, styles.link), href: item.href })}\n      </div>\n    );\n  }\n  if (item.onClick) {\n    return (\n      <button className={cx(cell, styles.press)} type=\"button\" onClick={item.onClick}>\n        {body}\n      </button>\n    );\n  }\n  return <div className={cell}>{body}</div>;\n};\n\nexport default MetricCell;\n"],"mappings":";;;;;;;;AAYA,MAAM,aAAa;CACjB,MAAM,OAAO;CACb,MAAM,OAAO;CACb,IAAI,OAAO;AACb;AAEA,MAAM,cAAc,EAAE,MAAM,cAC1B,qBAAA,UAAA,EAAA,UAAA;CACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,UAAA,KAAK;GAAW,CAAA,GAC9C,KAAK,MACH;EACJ,CAAA,GAAA,KAAK,OACJ,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAW,OAAO;GAClC,UAAA,oBAAC,MAAD;IAAM,MAAM,KAAK;IAAM,MAAM;GAAK,CAAA;EAC9B,CAAA,IACJ,IACD;;CACJ,UACC,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,IAE7C,oBAAC,OAAD;EACE,WAAW,GACT,OAAO,OACP,KAAK,cAAc,YAAY,OAAO,aACtC,KAAK,cAAc,aAAa,OAAO,YACzC;EAEC,UAAA,KAAK;CACH,CAAA;CAEN,CAAC,YAAY,KAAK,SAAS,KAAK,QAC/B,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,KAAK,QACJ,oBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,OAAO,WAAW,KAAK,aAAa,OAAO;GACnE,UAAA,KAAK;EACF,CAAA,IACJ,MACH,KAAK,OAAO,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA,KAAK;EAAW,CAAA,IAAI,IAC7D;CACH,CAAA,IAAA;AACJ,EAAA,CAAA;;AAYJ,MAAM,cAAc,EAAE,MAAM,SAAS,YAAY,OAAO,YAA6B;CACnF,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,OAAO,oBAAC,YAAD;EAAkB;EAAM,SAAS,KAAK,WAAW;CAAU,CAAA;CACxE,MAAM,OAAO,GAAG,OAAO,MAAM,QAAQ,OAAO,QAAQ;CAEpD,IAAI,KAAK,MACP,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EACpB,UAAA,KAAK;GAAE,UAAU;GAAM,WAAW,GAAG,MAAM,OAAO,IAAI;GAAG,MAAM,KAAK;EAAK,CAAC;CACxE,CAAA;CAGT,IAAI,KAAK,SACP,OACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,MAAM,OAAO,KAAK;EAAG,MAAK;EAAS,SAAS,KAAK;EACpE,UAAA;CACK,CAAA;CAGZ,OAAO,oBAAC,OAAD;EAAK,WAAW;EAAO,UAAA;CAAU,CAAA;AAC1C"}
+{"version":3,"file":"MetricCell.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/MetricCell.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Icon from '@/Icon';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport type { SurfaceRenderLink } from '../Surface/type';\nimport { styles } from './style';\nimport type { MetricItem } from './type';\n\nconst deltaClass = {\n  down: styles.deltaDown,\n  flat: styles.deltaFlat,\n  up: styles.deltaUp,\n} as const;\n\nconst MetricBody = ({ item, loading }: { item: MetricItem; loading?: boolean }) => (\n  <>\n    <div className={styles.head}>\n      <div className={styles.headCopy}>\n        <div className={styles.label}>{item.label}</div>\n      </div>\n      {item.action ? <div className={styles.headAction}>{item.action}</div> : null}\n      {item.mark ? (\n        <span aria-hidden className={styles.mark}>\n          <Icon icon={item.mark} size={14} />\n        </span>\n      ) : null}\n    </div>\n    {loading ? (\n      <Skeleton height={28} radius={6} width={88} />\n    ) : (\n      <div\n        className={cx(\n          styles.value,\n          item.valueTone === 'danger' && styles.valueDanger,\n          item.valueTone === 'warning' && styles.valueWarning,\n        )}\n      >\n        {item.value}\n      </div>\n    )}\n    {!loading && (item.delta || item.hint) ? (\n      <div className={styles.foot}>\n        {item.delta ? (\n          <span className={cx(styles.delta, deltaClass[item.direction ?? 'flat'])}>\n            {item.delta}\n          </span>\n        ) : null}\n        {item.hint ? <span className={styles.hint}>{item.hint}</span> : null}\n      </div>\n    ) : null}\n    {!loading && item.chart ? <div className={styles.chart}>{item.chart}</div> : null}\n  </>\n);\n\nexport interface MetricCellProps {\n  item: MetricItem;\n  loading?: boolean;\n  renderLink?: SurfaceRenderLink;\n  /** Draw the joined-strip divider on the trailing and bottom edges. */\n  seam?: boolean;\n}\n\n/** One metric: label row, figure, delta and hint. Shared by MetricStrip and StatCard. */\nconst MetricCell = ({ item, loading, renderLink, seam = false }: MetricCellProps) => {\n  const link = useSurfaceLink(renderLink);\n  const body = <MetricBody item={item} loading={item.loading ?? loading} />;\n  const cell = cx(styles.cell, seam && styles.cellSeam);\n\n  if (item.href) {\n    return (\n      <div className={styles.slot}>\n        {link({ children: body, className: cx(cell, styles.link), href: item.href })}\n      </div>\n    );\n  }\n  if (item.onClick) {\n    return (\n      <button className={cx(cell, styles.press)} type=\"button\" onClick={item.onClick}>\n        {body}\n      </button>\n    );\n  }\n  return <div className={cell}>{body}</div>;\n};\n\nexport default MetricCell;\n"],"mappings":";;;;;;;;AAYA,MAAM,aAAa;CACjB,MAAM,OAAO;CACb,MAAM,OAAO;CACb,IAAI,OAAO;AACb;AAEA,MAAM,cAAc,EAAE,MAAM,cAC1B,qBAAA,UAAA,EAAA,UAAA;CACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA;GACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IACrB,UAAA,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA,KAAK;IAAW,CAAA;GAC5C,CAAA;GACJ,KAAK,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAa,UAAA,KAAK;GAAY,CAAA,IAAI;GACvE,KAAK,OACJ,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAW,OAAO;IAClC,UAAA,oBAAC,MAAD;KAAM,MAAM,KAAK;KAAM,MAAM;IAAK,CAAA;GAC9B,CAAA,IACJ;EACD;;CACJ,UACC,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,IAE7C,oBAAC,OAAD;EACE,WAAW,GACT,OAAO,OACP,KAAK,cAAc,YAAY,OAAO,aACtC,KAAK,cAAc,aAAa,OAAO,YACzC;EAEC,UAAA,KAAK;CACH,CAAA;CAEN,CAAC,YAAY,KAAK,SAAS,KAAK,QAC/B,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,KAAK,QACJ,oBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,OAAO,WAAW,KAAK,aAAa,OAAO;GACnE,UAAA,KAAK;EACF,CAAA,IACJ,MACH,KAAK,OAAO,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA,KAAK;EAAW,CAAA,IAAI,IAC7D;CACH,CAAA,IAAA;CACH,CAAC,WAAW,KAAK,QAAQ,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAQ,UAAA,KAAK;CAAW,CAAA,IAAI;AAC7E,EAAA,CAAA;;AAYJ,MAAM,cAAc,EAAE,MAAM,SAAS,YAAY,OAAO,YAA6B;CACnF,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,OAAO,oBAAC,YAAD;EAAkB;EAAM,SAAS,KAAK,WAAW;CAAU,CAAA;CACxE,MAAM,OAAO,GAAG,OAAO,MAAM,QAAQ,OAAO,QAAQ;CAEpD,IAAI,KAAK,MACP,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EACpB,UAAA,KAAK;GAAE,UAAU;GAAM,WAAW,GAAG,MAAM,OAAO,IAAI;GAAG,MAAM,KAAK;EAAK,CAAC;CACxE,CAAA;CAGT,IAAI,KAAK,SACP,OACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,MAAM,OAAO,KAAK;EAAG,MAAK;EAAS,SAAS,KAAK;EACpE,UAAA;CACK,CAAA;CAGZ,OAAO,oBAAC,OAAD;EAAK,WAAW;EAAO,UAAA;CAAU,CAAA;AAC1C"}

package/es/dashboard/MetricStrip/style.mjs

@@ -35,9 +35,23 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	headCopy: css`
     display: flex;
+    flex: 1;
     gap: 6px;
     align-items: center;
+
+    min-inline-size: 0;
+  `,
+	/** Label-row control, pushed to the trailing edge. */
+	headAction: css`
+    display: flex;
+    flex: none;
+    align-items: center;
+  `,
+	/** Full-width chart slot under the delta and hint. */
+	chart: css`
+    inline-size: 100%;
     min-inline-size: 0;
+    margin-block-start: 6px;
   `,
 	mark: css`
     display: inline-flex;

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n\n    min-inline-size: 0;\n    padding-block: 16px;\n    padding-inline: 20px;\n\n    background: transparent;\n  `,\n  /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n  cellSeam: css`\n    box-shadow:\n      inset -1px 0 0 var(--metric-seam),\n      inset 0 -1px 0 var(--metric-seam);\n  `,\n  /** Split strip and StatCard: one card per item. */\n  card: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must not push the value down, so cells with and\n     without header controls line up across a split strip or a row of StatCards. */\n  head: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    box-sizing: border-box;\n    min-inline-size: 0;\n    block-size: 32px;\n  `,\n  headCopy: css`\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    min-inline-size: 0;\n  `,\n  mark: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    inline-size: 24px;\n    block-size: 24px;\n    border: 1px solid ${cssVar.colorFillSecondary};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  split: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  delta: css`\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n  `,\n  deltaDown: css`\n    color: ${cssVar.colorError};\n  `,\n  deltaFlat: css`\n    color: ${cssVar.colorTextSecondary};\n  `,\n  deltaUp: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  foot: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: baseline;\n  `,\n  /**\n   * Clips the seam that would otherwise sit on the card's trailing and bottom\n   * edges. A short last row used to show the seam color across the empty\n   * track, which reads louder than the cells.\n   */\n  frame: css`\n    --metric-seam: ${cssVar.colorFillSecondary};\n\n    overflow: hidden;\n    border-radius: inherit;\n    background: transparent;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n\n    background: transparent;\n  `,\n  hint: css`\n    font-size: 13px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  link: css`\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  press: css`\n    cursor: pointer;\n\n    border: none;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  value: css`\n    overflow: hidden;\n\n    font-size: ${cssVar.fontSizeHeading3};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  valueDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  valueWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;CAYT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAMT,MAAM,GAAG;;;;;;;;;;CAUT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;;;;;wBAQa,OAAO,mBAAmB;qBAC7B,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;kBAEpB,OAAO,kBAAkB;;CAEzC,OAAO,GAAG;;;;;CAKV,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;qBACS,OAAO,mBAAmB;;;;;;CAM7C,MAAM,GAAG;;;;;;;;;CAST,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n\n    min-inline-size: 0;\n    padding-block: 16px;\n    padding-inline: 20px;\n\n    background: transparent;\n  `,\n  /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n  cellSeam: css`\n    box-shadow:\n      inset -1px 0 0 var(--metric-seam),\n      inset 0 -1px 0 var(--metric-seam);\n  `,\n  /** Split strip and StatCard: one card per item. */\n  card: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must not push the value down, so cells with and\n     without header controls line up across a split strip or a row of StatCards. */\n  head: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    box-sizing: border-box;\n    min-inline-size: 0;\n    block-size: 32px;\n  `,\n  headCopy: css`\n    display: flex;\n    flex: 1;\n    gap: 6px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  /** Label-row control, pushed to the trailing edge. */\n  headAction: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n  `,\n  /** Full-width chart slot under the delta and hint. */\n  chart: css`\n    inline-size: 100%;\n    min-inline-size: 0;\n    margin-block-start: 6px;\n  `,\n  mark: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    inline-size: 24px;\n    block-size: 24px;\n    border: 1px solid ${cssVar.colorFillSecondary};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  split: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  delta: css`\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n  `,\n  deltaDown: css`\n    color: ${cssVar.colorError};\n  `,\n  deltaFlat: css`\n    color: ${cssVar.colorTextSecondary};\n  `,\n  deltaUp: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  foot: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: baseline;\n  `,\n  /**\n   * Clips the seam that would otherwise sit on the card's trailing and bottom\n   * edges. A short last row used to show the seam color across the empty\n   * track, which reads louder than the cells.\n   */\n  frame: css`\n    --metric-seam: ${cssVar.colorFillSecondary};\n\n    overflow: hidden;\n    border-radius: inherit;\n    background: transparent;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n\n    background: transparent;\n  `,\n  hint: css`\n    font-size: 13px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  link: css`\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  press: css`\n    cursor: pointer;\n\n    border: none;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  value: css`\n    overflow: hidden;\n\n    font-size: ${cssVar.fontSizeHeading3};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  valueDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  valueWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;CAYT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAMT,MAAM,GAAG;;;;;;;;;;CAUT,UAAU,GAAG;;;;;;;;;CASb,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;CAKV,MAAM,GAAG;;;;;;;;wBAQa,OAAO,mBAAmB;qBAC7B,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;kBAEpB,OAAO,kBAAkB;;CAEzC,OAAO,GAAG;;;;;CAKV,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;qBACS,OAAO,mBAAmB;;;;;;CAM7C,MAAM,GAAG;;;;;;;;;CAST,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}

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

@@ -6,6 +6,8 @@ import { ReactNode } from "react";
 interface MetricItem {
   /** Control on the label row, such as a menu. */
   action?: ReactNode;
+  /** Full-width chart (sparkline, area) under the delta and hint. */
+  chart?: ReactNode;
   delta?: ReactNode;
   direction?: 'up' | 'down' | 'flat';
   hint?: ReactNode;

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

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

package/es/dashboard/StatCard/StatCard.mjs

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 //#region src/dashboard/StatCard/StatCard.tsx
 /** One metric in its own card: the same item as a `split` MetricStrip. */
-function StatCard({ action, className, delta, direction = "flat", hint, href, label, loading, mark, onClick, renderLink, value, valueTone }) {
+function StatCard({ action, chart, className, delta, direction = "flat", hint, href, label, loading, mark, onClick, renderLink, value, valueTone }) {
 	const cardClassName = useSurfaceCardClassName();
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(styles$1.card, cardClassName, styles.clip, className),
@@ -15,6 +15,7 @@ function StatCard({ action, className, delta, direction = "flat", hint, href, la
 			renderLink,
 			item: {
 				action,
+				chart,
 				delta,
 				direction,
 				hint,

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

@@ -1 +1 @@
-{"version":3,"file":"StatCard.mjs","names":["metricStyles","surfaceStyles"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport MetricCell from '../MetricStrip/MetricCell';\nimport { styles as metricStyles } from '../MetricStrip/style';\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport type { StatCardProps } from './type';\n\n/** One metric in its own card: the same item as a `split` MetricStrip. */\nfunction StatCard({\n  action,\n  className,\n  delta,\n  direction = 'flat',\n  hint,\n  href,\n  label,\n  loading,\n  mark,\n  onClick,\n  renderLink,\n  value,\n  valueTone,\n}: StatCardProps) {\n  const cardClassName = useSurfaceCardClassName();\n\n  return (\n    <div className={cx(metricStyles.card, cardClassName, surfaceStyles.clip, className)}>\n      <MetricCell\n        renderLink={renderLink}\n        item={{\n          action,\n          delta,\n          direction,\n          hint,\n          href,\n          label,\n          loading,\n          mark,\n          onClick,\n          value,\n          valueTone,\n        }}\n      />\n    </div>\n  );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;AAWA,SAAS,SAAS,EAChB,QACA,WACA,OACA,YAAY,QACZ,MACA,MACA,OACA,SACA,MACA,SACA,YACA,OACA,aACgB;CAChB,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,SAAa,MAAM,eAAeC,OAAc,MAAM,SAAS;EAChF,UAAA,oBAAC,YAAD;GACc;GACZ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACD,CAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}
+{"version":3,"file":"StatCard.mjs","names":["metricStyles","surfaceStyles"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport MetricCell from '../MetricStrip/MetricCell';\nimport { styles as metricStyles } from '../MetricStrip/style';\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport type { StatCardProps } from './type';\n\n/** One metric in its own card: the same item as a `split` MetricStrip. */\nfunction StatCard({\n  action,\n  chart,\n  className,\n  delta,\n  direction = 'flat',\n  hint,\n  href,\n  label,\n  loading,\n  mark,\n  onClick,\n  renderLink,\n  value,\n  valueTone,\n}: StatCardProps) {\n  const cardClassName = useSurfaceCardClassName();\n\n  return (\n    <div className={cx(metricStyles.card, cardClassName, surfaceStyles.clip, className)}>\n      <MetricCell\n        renderLink={renderLink}\n        item={{\n          action,\n          chart,\n          delta,\n          direction,\n          hint,\n          href,\n          label,\n          loading,\n          mark,\n          onClick,\n          value,\n          valueTone,\n        }}\n      />\n    </div>\n  );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;AAWA,SAAS,SAAS,EAChB,QACA,OACA,WACA,OACA,YAAY,QACZ,MACA,MACA,OACA,SACA,MACA,SACA,YACA,OACA,aACgB;CAChB,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,SAAa,MAAM,eAAeC,OAAc,MAAM,SAAS;EAChF,UAAA,oBAAC,YAAD;GACc;GACZ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACD,CAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}

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

@@ -9,6 +9,8 @@ type StatWash = 'gray';
 interface StatCardProps {
   /** Control rendered on the label row, such as a menu. */
   action?: ReactNode;
+  /** Full-width chart (sparkline, area) under the delta and hint. */
+  chart?: ReactNode;
   className?: string;
   /** Change amount, colored by `direction`. */
   delta?: ReactNode;

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

@@ -7,8 +7,9 @@
  * 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.
+ * (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.
  *
  * 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

package/es/dashboard/Surface/style.mjs

@@ -8,8 +8,9 @@ import { createStaticStyles } from "antd-style";
 * 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.
+* (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.
 *
 * 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
@@ -30,7 +31,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     &&,
     &&:hover {
-      border: 1px solid ${cssVar.colorFillSecondary};
+      border: 1px solid ${cssVar.colorFill};
       border-radius: ${cssVar.borderRadiusLG};
       background: var(--lobe-surface-bg);
       box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;
@@ -46,6 +47,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
         #fff 6%,
         var(--lobe-surface-canvas, ${cssVar.colorBgContainer})
       );
+
+      /* Dark keeps the lighter border; light mode uses the slightly darker colorFill. */
+      border-color: ${cssVar.colorFillSecondary};
     }
   `,
 	cardNested: css`

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% / 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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.61.0",
+  "version": "5.62.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -85,6 +85,10 @@
       "types": "./es/base-ui/FormKit/index.d.mts",
       "import": "./es/base-ui/FormKit/index.mjs"
     },
+    "./base-ui/pro-table": {
+      "types": "./es/base-ui/ProTable/index.d.mts",
+      "import": "./es/base-ui/ProTable/index.mjs"
+    },
     "./eslint": {
       "types": "./es/eslint/index.d.mts",
       "import": "./es/eslint/index.mjs"