@lobehub/ui 5.32.4 → 5.32.6

package/es/base-ui/Segmented/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset-block-start: var(--active-item-top);\n    inset-inline-start: var(--active-item-left);\n\n    width: var(--active-item-width);\n    height: var(--active-item-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-pressed]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-pressed] {\n      color: ${cssVar.colorText};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  itemBlock: css`\n    flex: 1 1 0;\n  `,\n  itemIcon: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  itemLabel: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  itemLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  itemMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  itemSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 4px;\n    align-items: center;\n    align-self: flex-start;\n\n    box-sizing: border-box;\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n      align-self: stretch;\n    }\n  `,\n  listBlock: css`\n    display: flex;\n    align-self: stretch;\n    width: 100%;\n  `,\n  listFilled: css`\n    border: 1px solid ${cssVar.colorFillQuaternary};\n    background: ${cssVar.colorBgLayout};\n  `,\n  listGlass: lobeStaticStylish.blur,\n  listOutlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: transparent;\n  `,\n  listShadow: lobeStaticStylish.shadow,\n  root: css`\n    display: inline-flex;\n\n    &[data-block='true'] {\n      display: flex;\n      width: 100%;\n    }\n  `,\n}));\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    block: false,\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.listBlock,\n    },\n    glass: {\n      false: null,\n      true: styles.listGlass,\n    },\n    shadow: {\n      false: null,\n      true: styles.listShadow,\n    },\n    variant: {\n      filled: styles.listFilled,\n      outlined: styles.listOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: {\n    block: false,\n    size: 'middle',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.itemBlock,\n    },\n    size: {\n      large: styles.itemLarge,\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;;;;;qBAUK,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;kCAET,OAAO,cAAc;;;;;;;;CAQrD,MAAM,GAAG;;;;;;;;;;;;;;;;;aAiBE,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;uBAQT,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;;eAKtC,OAAO,UAAU;;;;;eAKjB,OAAO,kBAAkB;;;;;;;CAOtC,WAAW,GAAG;;;CAGd,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,YAAY,GAAG;;;qBAGI,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,eAAe;;;;;;;;CAQzC,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;wBACO,OAAO,oBAAoB;kBACjC,OAAO,cAAc;;CAErC,WAAWA,cAAkB;CAC7B,cAAc,GAAG;wBACK,OAAO,qBAAqB;;;CAGlD,YAAYA,cAAkB;CAC9B,MAAM,GAAG;;;;;;;;AAQX,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset-block-start: var(--active-item-top);\n    inset-inline-start: var(--active-item-left);\n\n    width: var(--active-item-width);\n    height: var(--active-item-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height;\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-item-right);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-pressed]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-pressed] {\n      color: ${cssVar.colorText};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  itemBlock: css`\n    flex: 1 1 0;\n  `,\n  itemIcon: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  itemLabel: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  itemLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  itemMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  itemSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 4px;\n    align-items: center;\n    align-self: flex-start;\n\n    box-sizing: border-box;\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n      align-self: stretch;\n    }\n  `,\n  listBlock: css`\n    display: flex;\n    align-self: stretch;\n    width: 100%;\n  `,\n  listFilled: css`\n    border: 1px solid ${cssVar.colorFillQuaternary};\n    background: ${cssVar.colorBgLayout};\n  `,\n  listGlass: lobeStaticStylish.blur,\n  listOutlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: transparent;\n  `,\n  listShadow: lobeStaticStylish.shadow,\n  root: css`\n    display: inline-flex;\n\n    &[data-block='true'] {\n      display: flex;\n      width: 100%;\n    }\n  `,\n}));\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    block: false,\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.listBlock,\n    },\n    glass: {\n      false: null,\n      true: styles.listGlass,\n    },\n    shadow: {\n      false: null,\n      true: styles.listShadow,\n    },\n    variant: {\n      filled: styles.listFilled,\n      outlined: styles.listOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: {\n    block: false,\n    size: 'middle',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.itemBlock,\n    },\n    size: {\n      large: styles.itemLarge,\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;;;;;qBAUK,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;kCAET,OAAO,cAAc;;;;;;;;;;;;CAYrD,MAAM,GAAG;;;;;;;;;;;;;;;;;aAiBE,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;uBAQT,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;;eAKtC,OAAO,UAAU;;;;;eAKjB,OAAO,kBAAkB;;;;;;;CAOtC,WAAW,GAAG;;;CAGd,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,YAAY,GAAG;;;qBAGI,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,eAAe;;;;;;;;CAQzC,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;wBACO,OAAO,oBAAoB;kBACjC,OAAO,cAAc;;CAErC,WAAWA,cAAkB;CAC7B,cAAc,GAAG;wBACK,OAAO,qBAAqB;;;CAGlD,YAAYA,cAAkB;CAC9B,MAAM,GAAG;;;;;;;;AAQX,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;CACF;AACF,CAAC"}

package/es/base-ui/Tabs/style.mjs

@@ -25,6 +25,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     border-radius: 50%;
 
     background: ${cssVar.colorPrimary};
+
+    [data-orientation='horizontal'] &:dir(rtl) {
+      inset-inline-start: calc(var(--active-tab-right) + var(--active-tab-width) / 2 - 2.5px);
+    }
   `,
 	indicatorRounded: css`
     inset-block-start: var(--active-tab-top);
@@ -36,6 +40,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     background: ${cssVar.colorBgElevated};
     box-shadow: ${cssVar.boxShadowTertiary};
+
+    [data-orientation='horizontal'] &:dir(rtl) {
+      inset-inline-start: var(--active-tab-right);
+    }
   `,
 	indicatorSquare: css`
     inset-block-end: 0;
@@ -45,6 +53,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     height: 2px;
 
     background: ${cssVar.colorPrimary};
+
+    [data-orientation='horizontal'] &:dir(rtl) {
+      inset-inline-start: var(--active-tab-right);
+    }
   `,
 	list: css`
     position: relative;

package/es/base-ui/Tabs/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorPoint: css`\n    inset-block-end: 6px;\n    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n\n    background: ${cssVar.colorPrimary};\n  `,\n  indicatorRounded: css`\n    inset-block-start: var(--active-tab-top);\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: var(--active-tab-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n  `,\n  indicatorSquare: css`\n    inset-block-end: 0;\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: 2px;\n\n    background: ${cssVar.colorPrimary};\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 2px;\n    align-items: center;\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  listRounded: css`\n    gap: 4px;\n    align-self: flex-start;\n\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: ${cssVar.colorBgLayout};\n\n    &[data-orientation='vertical'] {\n      align-self: stretch;\n    }\n  `,\n  listSquare: css`\n    gap: 16px;\n    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\n\n    &[data-orientation='vertical'] {\n      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    padding-block-start: 12px;\n    outline: none;\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 2px;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    &[data-orientation='vertical'] {\n      flex-direction: row;\n    }\n  `,\n  tab: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-active] {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  tabLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  tabMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  tabPoint: css`\n    height: auto;\n    padding-block: 8px 14px;\n  `,\n  tabSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  tabSquare: css`\n    height: auto;\n    padding-block: 8px;\n    border-radius: 0;\n  `,\n}));\n\nexport const tabVariants = cva(styles.tab, {\n  defaultVariants: {\n    size: 'middle',\n    variant: 'rounded',\n  },\n  variants: {\n    size: {\n      large: styles.tabLarge,\n      middle: styles.tabMiddle,\n      small: styles.tabSmall,\n    },\n    variant: {\n      point: styles.tabPoint,\n      rounded: null,\n      square: styles.tabSquare,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: styles.indicatorPoint,\n      rounded: styles.indicatorRounded,\n      square: styles.indicatorSquare,\n    },\n  },\n});\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: null,\n      rounded: styles.listRounded,\n      square: styles.listSquare,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;CAEpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;CAEzC,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;CAEpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,aAAa,GAAG;;;;;qBAKG,OAAO,eAAe;;kBAEzB,OAAO,cAAc;;;;;;CAMrC,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;;;uBAKW,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;CAInD,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;2BAQL,OAAO,mBAAmB;;;;;eAKtC,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;;CAIb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;;;AAKhB,EAAE;AAEF,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;EACjB;CACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorPoint: css`\n    inset-block-end: 6px;\n    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n\n    background: ${cssVar.colorPrimary};\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: calc(var(--active-tab-right) + var(--active-tab-width) / 2 - 2.5px);\n    }\n  `,\n  indicatorRounded: css`\n    inset-block-start: var(--active-tab-top);\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: var(--active-tab-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-tab-right);\n    }\n  `,\n  indicatorSquare: css`\n    inset-block-end: 0;\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: 2px;\n\n    background: ${cssVar.colorPrimary};\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-tab-right);\n    }\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 2px;\n    align-items: center;\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  listRounded: css`\n    gap: 4px;\n    align-self: flex-start;\n\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: ${cssVar.colorBgLayout};\n\n    &[data-orientation='vertical'] {\n      align-self: stretch;\n    }\n  `,\n  listSquare: css`\n    gap: 16px;\n    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\n\n    &[data-orientation='vertical'] {\n      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    padding-block-start: 12px;\n    outline: none;\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 2px;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    &[data-orientation='vertical'] {\n      flex-direction: row;\n    }\n  `,\n  tab: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-active] {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  tabLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  tabMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  tabPoint: css`\n    height: auto;\n    padding-block: 8px 14px;\n  `,\n  tabSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  tabSquare: css`\n    height: auto;\n    padding-block: 8px;\n    border-radius: 0;\n  `,\n}));\n\nexport const tabVariants = cva(styles.tab, {\n  defaultVariants: {\n    size: 'middle',\n    variant: 'rounded',\n  },\n  variants: {\n    size: {\n      large: styles.tabLarge,\n      middle: styles.tabMiddle,\n      small: styles.tabSmall,\n    },\n    variant: {\n      point: styles.tabPoint,\n      rounded: null,\n      square: styles.tabSquare,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: styles.indicatorPoint,\n      rounded: styles.indicatorRounded,\n      square: styles.indicatorSquare,\n    },\n  },\n});\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: null,\n      rounded: styles.listRounded,\n      square: styles.listSquare,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;;;;;CAMpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;;;;;CAMzC,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;;;;;CAMpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,aAAa,GAAG;;;;;qBAKG,OAAO,eAAe;;kBAEzB,OAAO,cAAc;;;;;;CAMrC,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;;;uBAKW,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;CAInD,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;2BAQL,OAAO,mBAAmB;;;;;eAKtC,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;;CAIb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;;;AAKhB,EAAE;AAEF,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;EACjB;CACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC"}

package/es/base-ui/Tooltip/style.mjs

@@ -46,6 +46,12 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	popup: css`
+
+    /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity
+       transition ends the browser otherwise drops the layer and re-rasterizes with pixel
+       snapping — a visible one-frame shift when the measured width is fractional
+       (single-line tooltips). */
+    will-change: transform, opacity;
     user-select: none;
 
     position: relative;
@@ -65,11 +71,21 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       0 1px 6px -1px rgb(0 0 0 / 2%),
       0 2px 4px 0 rgb(0 0 0 / 2%);
 
-    transition-timing-function: var(--lobe-tooltip-animation-ease-out);
-    transition-duration: var(--lobe-tooltip-animation-duration);
-    transition-property: opacity;
+    /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the
+       fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads
+       as a dropped frame. The spring stays on transform only. */
+    transition-timing-function:
+      var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);
+    transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);
+    transition-property: opacity, transform;
 
     &[data-layout-animation] {
+      transition-timing-function:
+        var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),
+        var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);
+      transition-duration:
+        var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),
+        var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);
       transition-property: opacity, transform, width, height;
     }
 
@@ -90,12 +106,71 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	positioner: css`
-    --lobe-tooltip-animation-duration: 100ms;
-    --lobe-tooltip-animation-duration-exit: 60ms;
-    --lobe-tooltip-animation-translate: 2px;
-    --lobe-tooltip-animation-scale: 0.98;
-    --lobe-tooltip-animation-ease-in: ease-in;
-    --lobe-tooltip-animation-ease-out: ${cssVar.motionEaseOut};
+    /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),
+       both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —
+       change them together with the curves, not independently. */
+    --lobe-tooltip-animation-duration: 280ms;
+    --lobe-tooltip-fade-duration: 160ms;
+    --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);
+    --lobe-tooltip-animation-duration-exit: 100ms;
+    --lobe-tooltip-animation-translate: 3px;
+    --lobe-tooltip-animation-scale: 0.97;
+    --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --lobe-tooltip-animation-ease-out: linear(
+      0,
+      0.041,
+      0.14,
+      0.268,
+      0.407,
+      0.541,
+      0.662,
+      0.765,
+      0.849,
+      0.915,
+      0.964,
+      0.998,
+      1.02,
+      1.032,
+      1.038,
+      1.039,
+      1.036,
+      1.032,
+      1.027,
+      1.022,
+      1.016,
+      1.012,
+      1.008,
+      1.005,
+      1.003
+    );
+    --lobe-tooltip-layout-duration: 380ms;
+    --lobe-tooltip-layout-ease: linear(
+      0,
+      0.041,
+      0.14,
+      0.268,
+      0.407,
+      0.541,
+      0.661,
+      0.765,
+      0.849,
+      0.915,
+      0.964,
+      0.998,
+      1.02,
+      1.032,
+      1.038,
+      1.039,
+      1.036,
+      1.032,
+      1.027,
+      1.022,
+      1.016,
+      1.012,
+      1.008,
+      1.005,
+      1.003
+    );
     --lobe-tooltip-translate-x: 0;
     --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);
 
@@ -111,6 +186,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     transition-property: none;
 
     &[data-layout-animation] {
+      transition-timing-function: var(--lobe-tooltip-layout-ease);
+      transition-duration: var(--lobe-tooltip-layout-duration);
       transition-property:
         inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;
     }
@@ -153,9 +230,17 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);
       --lobe-tooltip-translate-y: 0;
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      --lobe-tooltip-animation-duration: 0s;
+      --lobe-tooltip-fade-duration: 0s;
+      --lobe-tooltip-animation-duration-exit: 0s;
+      --lobe-tooltip-layout-duration: 0s;
+    }
   `,
 	viewport: css`
     --lobe-tooltip-viewport-inline-padding: 8px;
+    --lobe-tooltip-content-shift: 40%;
 
     position: relative;
 
@@ -181,9 +266,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       opacity: 1;
 
       transition:
-        transform var(--lobe-tooltip-animation-duration) var(--lobe-tooltip-animation-ease-out),
-        opacity calc(var(--lobe-tooltip-animation-duration) / 2)
-          var(--lobe-tooltip-animation-ease-out);
+        transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),
+        opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);
     }
 
     [data-previous] {
@@ -193,42 +277,42 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
 
     &[data-activation-direction~='right'] [data-previous][data-ending-style] {
-      transform: translateX(-50%);
+      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));
       opacity: 0;
     }
 
     &[data-activation-direction~='right'] [data-current][data-starting-style] {
-      transform: translateX(50%);
+      transform: translateX(var(--lobe-tooltip-content-shift));
       opacity: 0;
     }
 
     &[data-activation-direction~='left'] [data-previous][data-ending-style] {
-      transform: translateX(50%);
+      transform: translateX(var(--lobe-tooltip-content-shift));
       opacity: 0;
     }
 
     &[data-activation-direction~='left'] [data-current][data-starting-style] {
-      transform: translateX(-50%);
+      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));
       opacity: 0;
     }
 
     &[data-activation-direction~='down'] [data-previous][data-ending-style] {
-      transform: translateY(-50%);
+      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));
       opacity: 0;
     }
 
     &[data-activation-direction~='down'] [data-current][data-starting-style] {
-      transform: translateY(50%);
+      transform: translateY(var(--lobe-tooltip-content-shift));
       opacity: 0;
     }
 
     &[data-activation-direction~='up'] [data-previous][data-ending-style] {
-      transform: translateY(50%);
+      transform: translateY(var(--lobe-tooltip-content-shift));
       opacity: 0;
     }
 
     &[data-activation-direction~='up'] [data-current][data-starting-style] {
-      transform: translateY(-50%);
+      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));
       opacity: 0;
     }
   `

package/es/base-ui/Tooltip/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-tooltip-arrow-offset-block: 4px;\n    --lobe-tooltip-arrow-offset-inline: 6px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 8px;\n    height: 4px;\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      stroke: ${cssVar.colorBorderSecondary};\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    user-select: none;\n\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    max-width: min(320px, var(--available-width));\n    border: 1px solid ${cssVar.colorFill};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.2;\n    color: ${cssVar.colorTextLabel};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow:\n      0 1px 2px 0 rgb(0 0 0 / 3%),\n      0 1px 6px -1px rgb(0 0 0 / 2%),\n      0 2px 4px 0 rgb(0 0 0 / 2%);\n\n    transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-animation-duration);\n    transition-property: opacity;\n\n    &[data-layout-animation] {\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n        scale(var(--lobe-tooltip-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n      transition-duration: var(--lobe-tooltip-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    --lobe-tooltip-animation-duration: 100ms;\n    --lobe-tooltip-animation-duration-exit: 60ms;\n    --lobe-tooltip-animation-translate: 2px;\n    --lobe-tooltip-animation-scale: 0.98;\n    --lobe-tooltip-animation-ease-in: ease-in;\n    --lobe-tooltip-animation-ease-out: ${cssVar.motionEaseOut};\n    --lobe-tooltip-translate-x: 0;\n    --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n    will-change: transform, opacity;\n\n    z-index: 114514;\n\n    width: min(var(--positioner-width), 320px, var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n\n    /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n    &[data-anchor-hidden],\n    &[data-zero-origin='true'] {\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n      --lobe-tooltip-translate-y: 0;\n    }\n  `,\n\n  viewport: css`\n    --lobe-tooltip-viewport-inline-padding: 8px;\n\n    position: relative;\n\n    overflow: clip;\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    padding-block: 4px;\n    padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n    overflow-wrap: break-word;\n    white-space: normal;\n\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n\n      display: flex;\n      gap: 6px;\n      align-items: center;\n\n      opacity: 1;\n\n      transition:\n        transform var(--lobe-tooltip-animation-duration) var(--lobe-tooltip-animation-ease-out),\n        opacity calc(var(--lobe-tooltip-animation-duration) / 2)\n          var(--lobe-tooltip-animation-ease-out);\n    }\n\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 4px;\n      inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;cAkBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;wBAOY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BvC,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D5D,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ef,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-tooltip-arrow-offset-block: 4px;\n    --lobe-tooltip-arrow-offset-inline: 6px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 8px;\n    height: 4px;\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      stroke: ${cssVar.colorBorderSecondary};\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n\n    /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n       transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n       snapping — a visible one-frame shift when the measured width is fractional\n       (single-line tooltips). */\n    will-change: transform, opacity;\n    user-select: none;\n\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    max-width: min(320px, var(--available-width));\n    border: 1px solid ${cssVar.colorFill};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.2;\n    color: ${cssVar.colorTextLabel};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow:\n      0 1px 2px 0 rgb(0 0 0 / 3%),\n      0 1px 6px -1px rgb(0 0 0 / 2%),\n      0 2px 4px 0 rgb(0 0 0 / 2%);\n\n    /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n       fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n       as a dropped frame. The spring stays on transform only. */\n    transition-timing-function:\n      var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);\n    transition-property: opacity, transform;\n\n    &[data-layout-animation] {\n      transition-timing-function:\n        var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),\n        var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);\n      transition-duration:\n        var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),\n        var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n        scale(var(--lobe-tooltip-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n      transition-duration: var(--lobe-tooltip-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n       both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n       change them together with the curves, not independently. */\n    --lobe-tooltip-animation-duration: 280ms;\n    --lobe-tooltip-fade-duration: 160ms;\n    --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);\n    --lobe-tooltip-animation-duration-exit: 100ms;\n    --lobe-tooltip-animation-translate: 3px;\n    --lobe-tooltip-animation-scale: 0.97;\n    --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --lobe-tooltip-animation-ease-out: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.662,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-layout-duration: 380ms;\n    --lobe-tooltip-layout-ease: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.661,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-translate-x: 0;\n    --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n    will-change: transform, opacity;\n\n    z-index: 114514;\n\n    width: min(var(--positioner-width), 320px, var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-timing-function: var(--lobe-tooltip-layout-ease);\n      transition-duration: var(--lobe-tooltip-layout-duration);\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n\n    /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n    &[data-anchor-hidden],\n    &[data-zero-origin='true'] {\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      --lobe-tooltip-animation-duration: 0s;\n      --lobe-tooltip-fade-duration: 0s;\n      --lobe-tooltip-animation-duration-exit: 0s;\n      --lobe-tooltip-layout-duration: 0s;\n    }\n  `,\n\n  viewport: css`\n    --lobe-tooltip-viewport-inline-padding: 8px;\n    --lobe-tooltip-content-shift: 40%;\n\n    position: relative;\n\n    overflow: clip;\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    padding-block: 4px;\n    padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n    overflow-wrap: break-word;\n    white-space: normal;\n\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n\n      display: flex;\n      gap: 6px;\n      align-items: center;\n\n      opacity: 1;\n\n      transition:\n        transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n        opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);\n    }\n\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 4px;\n      inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;cAkBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;;;;;;;wBAaY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCvC,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIf,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ef,EAAE"}

package/es/hooks/useMarkdown/useMarkdownContent.mjs

@@ -1,13 +1,10 @@
 "use client";
-import { isLastFormulaRenderable } from "./latex.mjs";
 import { addToCache, contentCache, preprocessMarkdownContent } from "./utils.mjs";
 import { useMarkdownContext } from "../../Markdown/components/MarkdownProvider.mjs";
-import { useMemo, useRef, useState } from "react";
+import { useMemo } from "react";
 //#region src/hooks/useMarkdown/useMarkdownContent.ts
 const useMarkdownContent = (children) => {
-	const { animated, enableLatex = true, enableCustomFootnotes, citations } = useMarkdownContext();
-	const [validContent, setValidContent] = useState("");
-	const prevProcessedContent = useRef("");
+	const { enableLatex = true, enableCustomFootnotes, citations } = useMarkdownContext();
 	const citationsLength = citations?.length || 0;
 	const cacheKey = useMemo(() => `${children}|${enableLatex ? 1 : 0}|${enableCustomFootnotes ? 1 : 0}|${citationsLength}`, [
 		children,
@@ -17,18 +14,11 @@ const useMarkdownContent = (children) => {
 	]);
 	return useMemo(() => {
 		if (contentCache.has(cacheKey)) return contentCache.get(cacheKey);
-		let processedContent = preprocessMarkdownContent(children, {
+		const processedContent = preprocessMarkdownContent(children, {
 			citationsLength,
 			enableCustomFootnotes,
 			enableLatex
 		});
-		if (animated && enableLatex) {
-			if (!isLastFormulaRenderable(processedContent) && validContent) processedContent = validContent;
-		}
-		if (processedContent !== prevProcessedContent.current) {
-			setValidContent(processedContent);
-			prevProcessedContent.current = processedContent;
-		}
 		addToCache(cacheKey, processedContent);
 		return processedContent;
 	}, [
@@ -36,9 +26,7 @@ const useMarkdownContent = (children) => {
 		children,
 		enableLatex,
 		enableCustomFootnotes,
-		citationsLength,
-		animated,
-		validContent
+		citationsLength
 	]);
 };
 //#endregion

package/es/hooks/useMarkdown/useMarkdownContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMarkdownContent.mjs","names":[],"sources":["../../../src/hooks/useMarkdown/useMarkdownContent.ts"],"sourcesContent":["'use client';\n\nimport { useMemo, useRef, useState } from 'react';\n\nimport { useMarkdownContext } from '@/Markdown/components/MarkdownProvider';\n\nimport { isLastFormulaRenderable } from './latex';\nimport { addToCache, contentCache, preprocessMarkdownContent } from './utils';\n\nexport const useMarkdownContent = (children: string): string | undefined => {\n  const { animated, enableLatex = true, enableCustomFootnotes, citations } = useMarkdownContext();\n  const [validContent, setValidContent] = useState<string>('');\n  const prevProcessedContent = useRef<string>('');\n\n  const citationsLength = citations?.length || 0;\n\n  // Calculate cache key with fewer string concatenations and better performance\n  const cacheKey = useMemo(\n    () => `${children}|${enableLatex ? 1 : 0}|${enableCustomFootnotes ? 1 : 0}|${citationsLength}`,\n    [children, enableLatex, enableCustomFootnotes, citationsLength],\n  );\n\n  // Process content and use cache to avoid repeated calculations\n  return useMemo(() => {\n    // Try to get from cache first for best performance\n    if (contentCache.has(cacheKey)) {\n      return contentCache.get(cacheKey);\n    }\n\n    // Process new content only if needed\n    let processedContent = preprocessMarkdownContent(children, {\n      citationsLength,\n      enableCustomFootnotes,\n      enableLatex,\n    });\n\n    // Special handling for LaTeX content when animated\n    if (animated && enableLatex) {\n      const isRenderable = isLastFormulaRenderable(processedContent);\n      if (!isRenderable && validContent) {\n        processedContent = validContent;\n      }\n    }\n\n    // Only update state if content changed (prevents unnecessary re-renders)\n    if (processedContent !== prevProcessedContent.current) {\n      setValidContent(processedContent);\n      prevProcessedContent.current = processedContent;\n    }\n\n    // Cache the processed result\n    addToCache(cacheKey, processedContent);\n    return processedContent;\n  }, [\n    cacheKey,\n    children,\n    enableLatex,\n    enableCustomFootnotes,\n    citationsLength,\n    animated,\n    validContent,\n  ]);\n};\n"],"mappings":";;;;;;AASA,MAAa,sBAAsB,aAAyC;CAC1E,MAAM,EAAE,UAAU,cAAc,MAAM,uBAAuB,cAAc,mBAAmB;CAC9F,MAAM,CAAC,cAAc,mBAAmB,SAAiB,EAAE;CAC3D,MAAM,uBAAuB,OAAe,EAAE;CAE9C,MAAM,kBAAkB,WAAW,UAAU;CAG7C,MAAM,WAAW,cACT,GAAG,SAAS,GAAG,cAAc,IAAI,EAAE,GAAG,wBAAwB,IAAI,EAAE,GAAG,mBAC7E;EAAC;EAAU;EAAa;EAAuB;CAAe,CAChE;CAGA,OAAO,cAAc;EAEnB,IAAI,aAAa,IAAI,QAAQ,GAC3B,OAAO,aAAa,IAAI,QAAQ;EAIlC,IAAI,mBAAmB,0BAA0B,UAAU;GACzD;GACA;GACA;EACF,CAAC;EAGD,IAAI,YAAY,aAEV;OAAA,CADiB,wBAAwB,gBAC7B,KAAK,cACnB,mBAAmB;EAAA;EAKvB,IAAI,qBAAqB,qBAAqB,SAAS;GACrD,gBAAgB,gBAAgB;GAChC,qBAAqB,UAAU;EACjC;EAGA,WAAW,UAAU,gBAAgB;EACrC,OAAO;CACT,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"useMarkdownContent.mjs","names":[],"sources":["../../../src/hooks/useMarkdown/useMarkdownContent.ts"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useMarkdownContext } from '@/Markdown/components/MarkdownProvider';\n\nimport { addToCache, contentCache, preprocessMarkdownContent } from './utils';\n\nexport const useMarkdownContent = (children: string): string | undefined => {\n  const { enableLatex = true, enableCustomFootnotes, citations } = useMarkdownContext();\n\n  const citationsLength = citations?.length || 0;\n\n  const cacheKey = useMemo(\n    () => `${children}|${enableLatex ? 1 : 0}|${enableCustomFootnotes ? 1 : 0}|${citationsLength}`,\n    [children, enableLatex, enableCustomFootnotes, citationsLength],\n  );\n\n  return useMemo(() => {\n    if (contentCache.has(cacheKey)) {\n      return contentCache.get(cacheKey);\n    }\n\n    const processedContent = preprocessMarkdownContent(children, {\n      citationsLength,\n      enableCustomFootnotes,\n      enableLatex,\n    });\n\n    addToCache(cacheKey, processedContent);\n    return processedContent;\n  }, [cacheKey, children, enableLatex, enableCustomFootnotes, citationsLength]);\n};\n"],"mappings":";;;;;AAQA,MAAa,sBAAsB,aAAyC;CAC1E,MAAM,EAAE,cAAc,MAAM,uBAAuB,cAAc,mBAAmB;CAEpF,MAAM,kBAAkB,WAAW,UAAU;CAE7C,MAAM,WAAW,cACT,GAAG,SAAS,GAAG,cAAc,IAAI,EAAE,GAAG,wBAAwB,IAAI,EAAE,GAAG,mBAC7E;EAAC;EAAU;EAAa;EAAuB;CAAe,CAChE;CAEA,OAAO,cAAc;EACnB,IAAI,aAAa,IAAI,QAAQ,GAC3B,OAAO,aAAa,IAAI,QAAQ;EAGlC,MAAM,mBAAmB,0BAA0B,UAAU;GAC3D;GACA;GACA;EACF,CAAC;EAED,WAAW,UAAU,gBAAgB;EACrC,OAAO;CACT,GAAG;EAAC;EAAU;EAAU;EAAa;EAAuB;CAAe,CAAC;AAC9E"}

package/es/hooks/useMarkdown/utils.mjs

@@ -1,4 +1,4 @@
-import { preprocessLaTeX } from "./latex.mjs";
+import { preprocessLaTeX } from "@lobehub/streamdown";
 //#region src/hooks/useMarkdown/utils.ts
 const CACHE_SIZE = 50;
 /**

package/es/hooks/useMarkdown/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/hooks/useMarkdown/utils.ts"],"sourcesContent":["import { preprocessLaTeX } from './latex';\n\n// Cache configuration\nconst CACHE_SIZE = 50;\n\n/**\n * Cache for storing processed content to avoid redundant processing\n */\nexport const contentCache = new Map<string, string>();\n\n/**\n * Adds content to the cache with size limitation\n * Removes oldest entry if cache size limit is reached\n *\n * @param key The cache key\n * @param value The processed content to store\n */\nexport const addToCache = (key: string, value: string) => {\n  if (contentCache.size >= CACHE_SIZE) {\n    // Remove the oldest cache entry\n    const firstKey = contentCache.keys().next().value;\n    if (firstKey) contentCache.delete(firstKey);\n  }\n  contentCache.set(key, value);\n};\n\n/**\n * Transforms citation references in the format [n] to markdown links\n *\n * @param rawContent The markdown content with citation references\n * @param length The number of citations\n * @returns The content with citations transformed to markdown links\n */\nexport const transformCitations = (rawContent: string, length: number = 0) => {\n  if (length === 0) return rawContent;\n\n  // 生成引用索引\n  const citationIndices = Array.from({ length })\n    .fill('')\n    .map((_, index) => index + 1);\n\n  // 匹配所有潜在的引用\n  const pattern = new RegExp(`\\\\[(${citationIndices.join('|')})\\\\]`, 'g');\n  const matches: { id: string; index: number; length: number }[] = [];\n\n  let match;\n  while ((match = pattern.exec(rawContent)) !== null) {\n    matches.push({\n      id: match[1],\n      index: match.index,\n      length: match[0].length,\n    });\n  }\n\n  // 识别所有需要排除的区域\n  const excludedRanges: { end: number; start: number }[] = [];\n\n  // 查找LaTeX块 $$...$$\n  const latexBlockRegex = /\\$\\$([\\s\\S]*?)\\$\\$/g;\n  while ((match = latexBlockRegex.exec(rawContent)) !== null) {\n    excludedRanges.push({\n      end: match.index + match[0].length - 1,\n      start: match.index,\n    });\n  }\n\n  // 查找行内LaTeX $...$\n  const inlineLatexRegex = /\\$([^$]*)\\$/g;\n  while ((match = inlineLatexRegex.exec(rawContent)) !== null) {\n    excludedRanges.push({\n      end: match.index + match[0].length - 1,\n      start: match.index,\n    });\n  }\n\n  // 查找代码块 ```...```\n  const codeBlockRegex = /```([\\s\\S]*?)```/g;\n  while ((match = codeBlockRegex.exec(rawContent)) !== null) {\n    excludedRanges.push({\n      end: match.index + match[0].length - 1,\n      start: match.index,\n    });\n  }\n\n  // 查找行内代码 `...`\n  const inlineCodeRegex = /`([^`]*)`/g;\n  while ((match = inlineCodeRegex.exec(rawContent)) !== null) {\n    excludedRanges.push({\n      end: match.index + match[0].length - 1,\n      start: match.index,\n    });\n  }\n\n  // 过滤掉在排除区域内的引用\n  const validMatches = matches.filter((citation) => {\n    return !excludedRanges.some(\n      (range) => citation.index >= range.start && citation.index <= range.end,\n    );\n  });\n\n  // 从后向前替换，避免索引变化问题\n  let result = rawContent;\n  for (let i = validMatches.length - 1; i >= 0; i--) {\n    const citation = validMatches[i];\n    const before = result.slice(0, Math.max(0, citation.index));\n    const after = result.slice(Math.max(0, citation.index + citation.length));\n    result = before + `[#citation-${citation.id}](citation-${citation.id})` + after;\n  }\n\n  // 处理连续引用\n  return result.replaceAll('][', '] [');\n};\n\n/**\n * Preprocessing options for markdown content\n */\ninterface PreprocessOptions {\n  citationsLength?: number;\n  enableCustomFootnotes?: boolean;\n  enableLatex?: boolean;\n}\n\nexport const preprocessMarkdownContent = (\n  str: string,\n  { enableCustomFootnotes, enableLatex, citationsLength }: PreprocessOptions = {},\n) => {\n  let content = str;\n\n  // Process LaTeX expressions\n  if (enableLatex) {\n    content = preprocessLaTeX(content);\n  }\n\n  // Process custom footnotes/citations\n  if (enableCustomFootnotes) {\n    content = transformCitations(content, citationsLength);\n  }\n\n  return content;\n};\n"],"mappings":";;AAGA,MAAM,aAAa;;;;AAKnB,MAAa,+BAAe,IAAI,IAAoB;;;;;;;;AASpD,MAAa,cAAc,KAAa,UAAkB;CACxD,IAAI,aAAa,QAAQ,YAAY;EAEnC,MAAM,WAAW,aAAa,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;EAC5C,IAAI,UAAU,aAAa,OAAO,QAAQ;CAC5C;CACA,aAAa,IAAI,KAAK,KAAK;AAC7B;;;;;;;;AASA,MAAa,sBAAsB,YAAoB,SAAiB,MAAM;CAC5E,IAAI,WAAW,GAAG,OAAO;CAGzB,MAAM,kBAAkB,MAAM,KAAK,EAAE,OAAO,CAAC,CAAC,CAC3C,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UAAU,QAAQ,CAAC;CAG9B,MAAM,UAAU,IAAI,OAAO,OAAO,gBAAgB,KAAK,GAAG,EAAE,OAAO,GAAG;CACtE,MAAM,UAA2D,CAAC;CAElE,IAAI;CACJ,QAAQ,QAAQ,QAAQ,KAAK,UAAU,OAAO,MAC5C,QAAQ,KAAK;EACX,IAAI,MAAM;EACV,OAAO,MAAM;EACb,QAAQ,MAAM,EAAE,CAAC;CACnB,CAAC;CAIH,MAAM,iBAAmD,CAAC;CAG1D,MAAM,kBAAkB;CACxB,QAAQ,QAAQ,gBAAgB,KAAK,UAAU,OAAO,MACpD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,mBAAmB;CACzB,QAAQ,QAAQ,iBAAiB,KAAK,UAAU,OAAO,MACrD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,iBAAiB;CACvB,QAAQ,QAAQ,eAAe,KAAK,UAAU,OAAO,MACnD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,kBAAkB;CACxB,QAAQ,QAAQ,gBAAgB,KAAK,UAAU,OAAO,MACpD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,eAAe,QAAQ,QAAQ,aAAa;EAChD,OAAO,CAAC,eAAe,MACpB,UAAU,SAAS,SAAS,MAAM,SAAS,SAAS,SAAS,MAAM,GACtE;CACF,CAAC;CAGD,IAAI,SAAS;CACb,KAAK,IAAI,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;EACjD,MAAM,WAAW,aAAa;EAC9B,MAAM,SAAS,OAAO,MAAM,GAAG,KAAK,IAAI,GAAG,SAAS,KAAK,CAAC;EAC1D,MAAM,QAAQ,OAAO,MAAM,KAAK,IAAI,GAAG,SAAS,QAAQ,SAAS,MAAM,CAAC;EACxE,SAAS,SAAS,cAAc,SAAS,GAAG,aAAa,SAAS,GAAG,KAAK;CAC5E;CAGA,OAAO,OAAO,WAAW,MAAM,KAAK;AACtC;AAWA,MAAa,6BACX,KACA,EAAE,uBAAuB,aAAa,oBAAuC,CAAC,MAC3E;CACH,IAAI,UAAU;CAGd,IAAI,aACF,UAAU,gBAAgB,OAAO;CAInC,IAAI,uBACF,UAAU,mBAAmB,SAAS,eAAe;CAGvD,OAAO;AACT"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/hooks/useMarkdown/utils.ts"],"sourcesContent":["import { preprocessLaTeX } from '@lobehub/streamdown';\n\n// Cache configuration\nconst CACHE_SIZE = 50;\n\n/**\n * Cache for storing processed content to avoid redundant processing\n */\nexport const contentCache = new Map<string, string>();\n\n/**\n * Adds content to the cache with size limitation\n * Removes oldest entry if cache size limit is reached\n *\n * @param key The cache key\n * @param value The processed content to store\n */\nexport const addToCache = (key: string, value: string) => {\n  if (contentCache.size >= CACHE_SIZE) {\n    // Remove the oldest cache entry\n    const firstKey = contentCache.keys().next().value;\n    if (firstKey) contentCache.delete(firstKey);\n  }\n  contentCache.set(key, value);\n};\n\n/**\n * Transforms citation references in the format [n] to markdown links\n *\n * @param rawContent The markdown content with citation references\n * @param length The number of citations\n * @returns The content with citations transformed to markdown links\n */\nexport const transformCitations = (rawContent: string, length: number = 0) => {\n  if (length === 0) return rawContent;\n\n  // 生成引用索引\n  const citationIndices = Array.from({ length })\n    .fill('')\n    .map((_, index) => index + 1);\n\n  // 匹配所有潜在的引用\n  const pattern = new RegExp(`\\\\[(${citationIndices.join('|')})\\\\]`, 'g');\n  const matches: { id: string; index: number; length: number }[] = [];\n\n  let match;\n  while ((match = pattern.exec(rawContent)) !== null) {\n    matches.push({\n      id: match[1],\n      index: match.index,\n      length: match[0].length,\n    });\n  }\n\n  // 识别所有需要排除的区域\n  const excludedRanges: { end: number; start: number }[] = [];\n\n  // 查找LaTeX块 $$...$$\n  const latexBlockRegex = /\\$\\$([\\s\\S]*?)\\$\\$/g;\n  while ((match = latexBlockRegex.exec(rawContent)) !== null) {\n    excludedRanges.push({\n      end: match.index + match[0].length - 1,\n      start: match.index,\n    });\n  }\n\n  // 查找行内LaTeX $...$\n  const inlineLatexRegex = /\\$([^$]*)\\$/g;\n  while ((match = inlineLatexRegex.exec(rawContent)) !== null) {\n    excludedRanges.push({\n      end: match.index + match[0].length - 1,\n      start: match.index,\n    });\n  }\n\n  // 查找代码块 ```...```\n  const codeBlockRegex = /```([\\s\\S]*?)```/g;\n  while ((match = codeBlockRegex.exec(rawContent)) !== null) {\n    excludedRanges.push({\n      end: match.index + match[0].length - 1,\n      start: match.index,\n    });\n  }\n\n  // 查找行内代码 `...`\n  const inlineCodeRegex = /`([^`]*)`/g;\n  while ((match = inlineCodeRegex.exec(rawContent)) !== null) {\n    excludedRanges.push({\n      end: match.index + match[0].length - 1,\n      start: match.index,\n    });\n  }\n\n  // 过滤掉在排除区域内的引用\n  const validMatches = matches.filter((citation) => {\n    return !excludedRanges.some(\n      (range) => citation.index >= range.start && citation.index <= range.end,\n    );\n  });\n\n  // 从后向前替换，避免索引变化问题\n  let result = rawContent;\n  for (let i = validMatches.length - 1; i >= 0; i--) {\n    const citation = validMatches[i];\n    const before = result.slice(0, Math.max(0, citation.index));\n    const after = result.slice(Math.max(0, citation.index + citation.length));\n    result = before + `[#citation-${citation.id}](citation-${citation.id})` + after;\n  }\n\n  // 处理连续引用\n  return result.replaceAll('][', '] [');\n};\n\n/**\n * Preprocessing options for markdown content\n */\ninterface PreprocessOptions {\n  citationsLength?: number;\n  enableCustomFootnotes?: boolean;\n  enableLatex?: boolean;\n}\n\nexport const preprocessMarkdownContent = (\n  str: string,\n  { enableCustomFootnotes, enableLatex, citationsLength }: PreprocessOptions = {},\n) => {\n  let content = str;\n\n  // Process LaTeX expressions\n  if (enableLatex) {\n    content = preprocessLaTeX(content);\n  }\n\n  // Process custom footnotes/citations\n  if (enableCustomFootnotes) {\n    content = transformCitations(content, citationsLength);\n  }\n\n  return content;\n};\n"],"mappings":";;AAGA,MAAM,aAAa;;;;AAKnB,MAAa,+BAAe,IAAI,IAAoB;;;;;;;;AASpD,MAAa,cAAc,KAAa,UAAkB;CACxD,IAAI,aAAa,QAAQ,YAAY;EAEnC,MAAM,WAAW,aAAa,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;EAC5C,IAAI,UAAU,aAAa,OAAO,QAAQ;CAC5C;CACA,aAAa,IAAI,KAAK,KAAK;AAC7B;;;;;;;;AASA,MAAa,sBAAsB,YAAoB,SAAiB,MAAM;CAC5E,IAAI,WAAW,GAAG,OAAO;CAGzB,MAAM,kBAAkB,MAAM,KAAK,EAAE,OAAO,CAAC,CAAC,CAC3C,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UAAU,QAAQ,CAAC;CAG9B,MAAM,UAAU,IAAI,OAAO,OAAO,gBAAgB,KAAK,GAAG,EAAE,OAAO,GAAG;CACtE,MAAM,UAA2D,CAAC;CAElE,IAAI;CACJ,QAAQ,QAAQ,QAAQ,KAAK,UAAU,OAAO,MAC5C,QAAQ,KAAK;EACX,IAAI,MAAM;EACV,OAAO,MAAM;EACb,QAAQ,MAAM,EAAE,CAAC;CACnB,CAAC;CAIH,MAAM,iBAAmD,CAAC;CAG1D,MAAM,kBAAkB;CACxB,QAAQ,QAAQ,gBAAgB,KAAK,UAAU,OAAO,MACpD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,mBAAmB;CACzB,QAAQ,QAAQ,iBAAiB,KAAK,UAAU,OAAO,MACrD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,iBAAiB;CACvB,QAAQ,QAAQ,eAAe,KAAK,UAAU,OAAO,MACnD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,kBAAkB;CACxB,QAAQ,QAAQ,gBAAgB,KAAK,UAAU,OAAO,MACpD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,eAAe,QAAQ,QAAQ,aAAa;EAChD,OAAO,CAAC,eAAe,MACpB,UAAU,SAAS,SAAS,MAAM,SAAS,SAAS,SAAS,MAAM,GACtE;CACF,CAAC;CAGD,IAAI,SAAS;CACb,KAAK,IAAI,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;EACjD,MAAM,WAAW,aAAa;EAC9B,MAAM,SAAS,OAAO,MAAM,GAAG,KAAK,IAAI,GAAG,SAAS,KAAK,CAAC;EAC1D,MAAM,QAAQ,OAAO,MAAM,KAAK,IAAI,GAAG,SAAS,QAAQ,SAAS,MAAM,CAAC;EACxE,SAAS,SAAS,cAAc,SAAS,GAAG,aAAa,SAAS,GAAG,KAAK;CAC5E;CAGA,OAAO,OAAO,WAAW,MAAM,KAAK;AACtC;AAWA,MAAa,6BACX,KACA,EAAE,uBAAuB,aAAa,oBAAuC,CAAC,MAC3E;CACH,IAAI,UAAU;CAGd,IAAI,aACF,UAAU,gBAAgB,OAAO;CAInC,IAAI,uBACF,UAAU,mBAAmB,SAAS,eAAe;CAGvD,OAAO;AACT"}

package/es/index.d.mts

@@ -225,7 +225,6 @@ import "./Markdown/index.mjs";
 import SearchResultCards, { SearchResultCardsProps } from "./Markdown/components/SearchResultCards/index.mjs";
 import { rehypeCustomFootnotes } from "./Markdown/plugins/rehypeCustomFootnotes.mjs";
 import { rehypeKatexDir } from "./Markdown/plugins/rehypeKatexDir.mjs";
-import { rehypeStreamAnimated } from "./Markdown/plugins/rehypeStreamAnimated.mjs";
 import { remarkBr } from "./Markdown/plugins/remarkBr.mjs";
 import { remarkColor } from "./Markdown/plugins/remarkColor.mjs";
 import { remarkCustomFootnotes } from "./Markdown/plugins/remarkCustomFootnotes.mjs";
@@ -309,5 +308,6 @@ import { LayoutSidebar } from "./Layout/components/LayoutSidebar.mjs";
 import { LayoutSidebarInner } from "./Layout/components/LayoutSidebarInner.mjs";
 import { LayoutToc } from "./Layout/components/LayoutToc.mjs";
 import Layout from "./Layout/index.mjs";
+import { rehypeStreamAnimated } from "@lobehub/streamdown";
 import { ErrorBoundary, ErrorBoundaryProps } from "react-error-boundary";
 export { A, type AProps, Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionIcon, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconProps, type ActionIconSize, Alert, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type BaseMenuItemType, Block, type BlockProps, Burger, type BurgerProps, Button, type ButtonProps, type CDN, CLASSNAMES, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeDiff, type CodeDiffProps, CodeEditor, type CodeEditorProps, Collapse, type CollapseItemType, type CollapseProps, type ColorPalettes, type ColorPalettesAlpha, ColorSwatches, type ColorSwatchesProps, type ColorToken, type Config, ConfigProvider, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DiffViewMode, type DivProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggableSideNav, type DraggableSideNavProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type MenuItemType as DropdownMenuItemType, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, type DropdownProps, EditableText, type EditableTextProps, EditorSlashMenu, type EditorSlashMenuGroup, type EditorSlashMenuItems, type EditorSlashMenuOption, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, _default as FlexBasic, type FlexBasicProps, _default as Flexbox, type FlexboxProps, FluentEmoji, type FluentEmojiProps, FontLoader, type FontLoaderProps, Footer, type FooterProps, Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, FormModal, type FormModalProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, Freeze, type FreezeProps, type GenericItemType, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, HtmlPreview, HtmlPreviewIframe, type HtmlPreviewIframeProps, type HtmlPreviewMode, type HtmlPreviewProps, type HtmlPreviewStreamingMode, I18nProvider, type I18nProviderProps, Icon, type IconProps, IconProvider, type IconSize, Image, type ImagePreviewOptions, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, type ImgProps, type ImperativeModalProps, Input, InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, type ItemType, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, ListItem, type ListItemProps, type ListProps, type LobeCustomStylish, type LobeCustomToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, Menu, type MenuCheckboxItemType, type MenuInfo, type MenuItemType, type MenuProps, Mermaid, type MermaidProps, Meta, type MetaProps, Modal, ModalHost, type ModalHostProps, type ModalInstance, type ModalProps, ModalProvider, MotionComponent, type MotionComponentType, MotionProvider, NeuralNetworkLoading, type NeuralNetworkLoadingProps, NeutralColors, NeutralColorsObj, PatchDiff, type PatchDiffProps, type Placement, type PlacementConfig, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, PopoverPortal, type PopoverPortalAtomProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, type PresetColorKey, type PresetColorType, type PresetSystemColorKey, type PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, type RawModalComponent, type RawModalComponentProps, type RawModalInstance, type RawModalKeyOptions, type RawModalOptions, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedProps, Select, type SelectProps, _default$1 as ShikiLobeTheme, SideNav, type SideNavProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, SliderWithInput, type SliderWithInputProps, Snippet, type SnippetProps, SortableList, type SortableListProps, type SpanProps, type SvgProps, SyntaxHighlighter, type SyntaxHighlighterProps, SyntaxMermaid, type SyntaxMermaidProps, type SystemColorToken, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, type TextProps, ThemeProvider, type ThemeProviderProps, ThemeSwitch, type ThemeSwitchProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, Toc, type TocProps, Tooltip, TooltipGroup, type TooltipProps, type Trigger, Typography, type TypographyProps, Video, type VideoProps, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useToast, useTranslation };

package/es/index.mjs

@@ -146,7 +146,6 @@ import { remarkBr } from "./Markdown/plugins/remarkBr.mjs";
 import { remarkCustomFootnotes } from "./Markdown/plugins/remarkCustomFootnotes.mjs";
 import { remarkGfmPlus } from "./Markdown/plugins/remarkGfmPlus.mjs";
 import { remarkVideo } from "./Markdown/plugins/remarkVideo.mjs";
-import { rehypeStreamAnimated } from "./Markdown/plugins/rehypeStreamAnimated.mjs";
 import Typography from "./Markdown/Typography.mjs";
 import Markdown from "./Markdown/Markdown.mjs";
 import { remarkColor } from "./Markdown/plugins/remarkColor.mjs";
@@ -160,5 +159,6 @@ import SliderWithInput from "./SliderWithInput/SliderWithInput.mjs";
 import SortableList from "./SortableList/SortableList.mjs";
 import ThemeSwitch from "./ThemeSwitch/ThemeSwitch.mjs";
 import Toc from "./Toc/Toc.mjs";
+import { rehypeStreamAnimated } from "@lobehub/streamdown";
 import { ErrorBoundary } from "react-error-boundary";
 export { A, Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, AutoComplete, Avatar, AvatarGroup, Block, Burger, Button, CLASSNAMES, Center, Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapse, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, DraggableSideNav, Drawer, Dropdown, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FluentEmoji, FontLoader, Footer, Form, FormGroup, FormItem, FormModal, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input, InputNumber, InputOPT, InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, ListItem, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Menu, Mermaid, Meta, Modal, ModalHost, ModalProvider, MotionComponent, MotionProvider, NeuralNetworkLoading, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, Select, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonButton, SkeletonParagraph, SkeletonTags, SkeletonTitle, SliderWithInput, Snippet, SortableList, SyntaxHighlighter, SyntaxMermaid, Tabs, Tag, Text, TextArea, ThemeProvider, ThemeSwitch, ToastHost, Toc, Tooltip, TooltipGroup, Typography, Video, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useToast, useTranslation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.32.4",
+  "version": "5.32.6",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -136,24 +136,6 @@
     "test:update": "vitest -u",
     "type-check": "lobedocs typegen && tsc --noEmit && tsc --noEmit -p tsconfig.site.json"
   },
-  "lint-staged": {
-    "*.{md,mdx}": [
-      "prettier --write --no-error-on-unmatched-pattern"
-    ],
-    "*.json": [
-      "prettier --write --no-error-on-unmatched-pattern"
-    ],
-    "*.{js,jsx}": [
-      "prettier --write",
-      "stylelint --fix",
-      "eslint --fix"
-    ],
-    "*.{ts,tsx}": [
-      "prettier --parser=typescript --write",
-      "stylelint --fix",
-      "eslint --fix"
-    ]
-  },
   "dependencies": {
     "@ant-design/cssinjs": "^2.1.2",
     "@base-ui/react": "1.6.0",
@@ -166,6 +148,7 @@
     "@emotion/is-prop-valid": "^1.4.0",
     "@floating-ui/react": "^0.27.19",
     "@giscus/react": "^3.1.0",
+    "@lobehub/streamdown": "^1.0.0",
     "@mdx-js/mdx": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@pierre/diffs": "1.2.12",
@@ -229,75 +212,6 @@
     "vfile": "^6.0.3",
     "virtua": "^0.49.3"
   },
-  "devDependencies": {
-    "@ant-design/icons": "^6.3.2",
-    "@commitlint/cli": "^21.2.1",
-    "@lobehub/docs-kit": "workspace:*",
-    "@lobehub/eslint-config": "2.1.5",
-    "@lobehub/fluent-emoji": "^4.1.0",
-    "@lobehub/icons": "^5.10.1",
-    "@lobehub/lint": "^2.1.5",
-    "@mdx-js/rollup": "3.1.1",
-    "@playwright/test": "1.61.1",
-    "@react-router/dev": "8.2.0",
-    "@testing-library/react": "^16.3.2",
-    "@types/chroma-js": "^3.1.2",
-    "@types/hast": "^3.0.5",
-    "@types/mdx": "^2.0.14",
-    "@types/node": "26.1.1",
-    "@types/numeral": "^2.0.5",
-    "@types/pangu": "^4.0.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@types/unist": "^3.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.63.0",
-    "@typescript-eslint/parser": "^8.63.0",
-    "@vitest/coverage-v8": "^4.1.10",
-    "antd": "^6.5.0",
-    "cheerio": "^1.2.0",
-    "clean-package": "^2.2.0",
-    "code-inspector-plugin": "^1.6.6",
-    "commitlint": "^21.2.1",
-    "concurrently": "^10.0.3",
-    "conventional-changelog-gitmoji-config": "1.5.2",
-    "cross-env": "^10.1.0",
-    "dotenv": "^17.4.2",
-    "dpdm": "^4.2.0",
-    "eslint": "^9.39.5",
-    "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "figma-js": "1.16.1-0",
-    "husky": "^9.1.7",
-    "jsdom": "^29.1.1",
-    "lint-staged": "^17.0.8",
-    "mdast-util-to-markdown": "^2.1.2",
-    "next-themes": "^0.4.6",
-    "pagefind": "1.5.2",
-    "prettier": "^3.9.5",
-    "prettier-plugin-packagejson": "^3.0.2",
-    "prettier-plugin-sh": "^0.19.0",
-    "prettier-plugin-sort-json": "^4.2.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-live": "4.1.8",
-    "react-router": "8.2.0",
-    "remark": "^15.0.1",
-    "remark-cli": "^12.0.1",
-    "remark-frontmatter": "^5.0.0",
-    "remark-mdx-frontmatter": "^5.2.0",
-    "rollup-plugin-visualizer": "7.0.1",
-    "semantic-release": "^25.0.6",
-    "stylelint": "^16.26.1",
-    "svgo": "^4.0.1",
-    "tsdown": "^0.22.4",
-    "tsx": "^4.23.0",
-    "typescript": "^6.0.3",
-    "unist-util-is": "^6.0.1",
-    "unist-util-visit": "^5.1.0",
-    "vite": "8.1.4",
-    "vitest": "^4.1.10",
-    "yaml": "^2.9.0",
-    "zod": "^4.4.3"
-  },
   "peerDependencies": {
     "@lobehub/fluent-emoji": "^4.0.0",
     "@lobehub/icons": "^5.0.0",