@lobehub/ui 5.23.5 → 5.25.0

package/es/Markdown/components/SearchResultCards/SearchResultCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultCard.mjs","names":["Flexbox"],"sources":["../../../../src/Markdown/components/SearchResultCards/SearchResultCard.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type Ref, useMemo } from 'react';\n\nimport A from '@/A';\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Img from '@/Img';\nimport Text from '@/Text';\nimport { type AProps } from '@/types';\n\nimport { styles } from './style';\n\nexport interface SearchResultCardProps extends AProps {\n  alt?: string;\n  ref?: Ref<HTMLAnchorElement>;\n  title?: string;\n  url: string;\n}\n\nconst SearchResultCard = memo<SearchResultCardProps>(({ ref, url, title, alt, ...rest }) => {\n  const [displayTitle, domain, host] = useMemo(() => {\n    try {\n      const urlObj = new URL(url);\n      const domain = urlObj.hostname.replace('www.', '');\n      const hostForUrl = urlObj.host;\n\n      let displayTitle = title;\n      if (title === url) {\n        displayTitle = hostForUrl + urlObj.pathname;\n      }\n\n      return [displayTitle, domain, hostForUrl];\n    } catch {\n      return [title, url, url];\n    }\n  }, [url, title]);\n\n  return (\n    <A href={url} ref={ref} rel=\"noreferrer\" target={'_blank'} {...rest}>\n      <Block\n        clickable\n        className={styles.container}\n        gap={2}\n        justify={'space-between'}\n        key={url}\n        paddingBlock={6}\n        paddingInline={8}\n        variant={'outlined'}\n      >\n        <Text ellipsis={{ rows: 2 }}>{displayTitle}</Text>\n        <Flexbox horizontal align={'center'} gap={4}>\n          <Img\n            alt={alt || title || url}\n            height={14}\n            src={`https://icons.duckduckgo.com/ip3/${host}.ico`}\n            width={14}\n          />\n          <Text ellipsis className={styles.url} type={'secondary'}>\n            {domain}\n          </Text>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n});\n\nSearchResultCard.displayName = 'SearchResultCard';\n\nexport default SearchResultCard;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,mBAAmB,MAA6B,EAAE,KAAK,KAAK,OAAO,KAAK,GAAG,WAAW;CAC1F,MAAM,CAAC,cAAc,QAAQ,QAAQ,cAAc;EACjD,IAAI;GACF,MAAM,SAAS,IAAI,IAAI,GAAG;GAC1B,MAAM,SAAS,OAAO,SAAS,QAAQ,QAAQ,EAAE;GACjD,MAAM,aAAa,OAAO;GAE1B,IAAI,eAAe;GACnB,IAAI,UAAU,KACZ,eAAe,aAAa,OAAO;GAGrC,OAAO;IAAC;IAAc;IAAQ;GAAU;EAC1C,QAAQ;GACN,OAAO;IAAC;IAAO;IAAK;GAAG;EACzB;CACF,GAAG,CAAC,KAAK,KAAK,CAAC;CAEf,OACE,oBAAC,GAAD;EAAG,MAAM;EAAU;EAAK,KAAI;EAAa,QAAQ;EAAU,GAAI;YAC7D,qBAAC,OAAD;GACE,WAAA;GACA,WAAW,OAAO;GAClB,KAAK;GACL,SAAS;GAET,cAAc;GACd,eAAe;GACf,SAAS;aARX,CAUE,oBAAC,MAAD;IAAM,UAAU,EAAE,MAAM,EAAE;cAAI;GAAmB,CAAA,GACjD,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;cAA1C,CACE,oBAAC,KAAD;KACE,KAAK,OAAO,SAAS;KACrB,QAAQ;KACR,KAAK,oCAAoC,KAAK;KAC9C,OAAO;IACR,CAAA,GACD,oBAAC,MAAD;KAAM,UAAA;KAAS,WAAW,OAAO;KAAK,MAAM;eACzC;IACG,CAAA,CACC;KACJ;KAjBA,GAiBA;CACN,CAAA;AAEP,CAAC;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"SearchResultCard.mjs","names":["Flexbox"],"sources":["../../../../src/Markdown/components/SearchResultCards/SearchResultCard.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type Ref, useMemo } from 'react';\n\nimport A from '@/A';\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Img from '@/Img';\nimport Text from '@/Text';\nimport { type AProps } from '@/types';\n\nimport { styles } from './style';\n\nexport interface SearchResultCardProps extends AProps {\n  alt?: string;\n  ref?: Ref<HTMLAnchorElement>;\n  title?: string;\n  url: string;\n}\n\nconst SearchResultCard = memo<SearchResultCardProps>(({ ref, url, title, alt, ...rest }) => {\n  const [displayTitle, domain, host] = useMemo(() => {\n    try {\n      const urlObj = new URL(url);\n      const domain = urlObj.hostname.replace('www.', '');\n      const hostForUrl = urlObj.host;\n\n      let displayTitle = title;\n      if (title === url) {\n        displayTitle = hostForUrl + urlObj.pathname;\n      }\n\n      return [displayTitle, domain, hostForUrl];\n    } catch {\n      return [title, url, url];\n    }\n  }, [url, title]);\n\n  return (\n    <A href={url} ref={ref} rel=\"noreferrer\" target={'_blank'} {...rest}>\n      <Block\n        clickable\n        className={styles.container}\n        gap={2}\n        justify={'space-between'}\n        key={url}\n        paddingBlock={6}\n        paddingInline={8}\n        variant={'outlined'}\n      >\n        <Text ellipsis={{ rows: 2 }}>{displayTitle}</Text>\n        <Flexbox horizontal align={'center'} gap={4}>\n          <Img\n            alt={alt || title || url}\n            height={14}\n            src={`https://icons.duckduckgo.com/ip3/${host}.ico`}\n            width={14}\n          />\n          <Text ellipsis className={styles.url} type={'secondary'}>\n            {domain}\n          </Text>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n});\n\nSearchResultCard.displayName = 'SearchResultCard';\n\nexport default SearchResultCard;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,mBAAmB,MAA6B,EAAE,KAAK,KAAK,OAAO,KAAK,GAAG,WAAW;CAC1F,MAAM,CAAC,cAAc,QAAQ,QAAQ,cAAc;EACjD,IAAI;GACF,MAAM,SAAS,IAAI,IAAI,GAAG;GAC1B,MAAM,SAAS,OAAO,SAAS,QAAQ,QAAQ,EAAE;GACjD,MAAM,aAAa,OAAO;GAE1B,IAAI,eAAe;GACnB,IAAI,UAAU,KACZ,eAAe,aAAa,OAAO;GAGrC,OAAO;IAAC;IAAc;IAAQ;GAAU;EAC1C,QAAQ;GACN,OAAO;IAAC;IAAO;IAAK;GAAG;EACzB;CACF,GAAG,CAAC,KAAK,KAAK,CAAC;CAEf,OACE,oBAAC,GAAD;EAAG,MAAM;EAAU;EAAK,KAAI;EAAa,QAAQ;EAAU,GAAI;EAC7D,UAAA,qBAAC,OAAD;GACE,WAAA;GACA,WAAW,OAAO;GAClB,KAAK;GACL,SAAS;GAET,cAAc;GACd,eAAe;GACf,SAAS;GARX,UAAA,CAUE,oBAAC,MAAD;IAAM,UAAU,EAAE,MAAM,EAAE;IAAI,UAAA;GAAmB,CAAA,GACjD,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;IAA1C,UAAA,CACE,oBAAC,KAAD;KACE,KAAK,OAAO,SAAS;KACrB,QAAQ;KACR,KAAK,oCAAoC,KAAK;KAC9C,OAAO;IACR,CAAA,GACD,oBAAC,MAAD;KAAM,UAAA;KAAS,WAAW,OAAO;KAAK,MAAM;KACzC,UAAA;IACG,CAAA,CACC;GACJ,CAAA,CAAA;EAjBA,GAAA,GAiBA;CACN,CAAA;AAEP,CAAC;AAED,iBAAiB,cAAc"}

package/es/Markdown/components/SearchResultCards/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/Markdown/components/SearchResultCards/index.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type Ref } from 'react';\n\nimport { type FlexboxProps } from '@/Flex';\nimport ScrollShadow from '@/ScrollShadow';\n\nimport SearchResultCard from './SearchResultCard';\n\nexport interface SearchResultItem {\n  alt?: string;\n  summary?: string;\n  title?: string;\n  url: string;\n}\n\nexport interface SearchResultCardsProps extends FlexboxProps {\n  dataSource: string[] | SearchResultItem[];\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst SearchResultCards = memo<SearchResultCardsProps>(({ ref, dataSource, style, ...rest }) => {\n  return (\n    <ScrollShadow\n      hideScrollBar\n      horizontal\n      gap={12}\n      orientation={'horizontal'}\n      ref={ref}\n      size={10}\n      style={{ minHeight: 80, overflowX: 'scroll', paddingInlineEnd: 24, width: '100%', ...style }}\n      {...rest}\n    >\n      {dataSource.map((link) =>\n        typeof link === 'string' ? (\n          <SearchResultCard key={link} url={link} />\n        ) : (\n          <SearchResultCard key={link.url} {...link} />\n        ),\n      )}\n    </ScrollShadow>\n  );\n});\n\nSearchResultCards.displayName = 'SearchResultCards';\n\nexport default SearchResultCards;\n"],"mappings":";;;;;;AAqBA,MAAM,oBAAoB,MAA8B,EAAE,KAAK,YAAY,OAAO,GAAG,WAAW;CAC9F,OACE,oBAAC,cAAD;EACE,eAAA;EACA,YAAA;EACA,KAAK;EACL,aAAa;EACR;EACL,MAAM;EACN,OAAO;GAAE,WAAW;GAAI,WAAW;GAAU,kBAAkB;GAAI,OAAO;GAAQ,GAAG;EAAM;EAC3F,GAAI;YAEH,WAAW,KAAK,SACf,OAAO,SAAS,WACd,oBAAC,kBAAD,EAA6B,KAAK,KAAO,GAAlB,IAAkB,IAEzC,oBAAC,kBAAD,EAAiC,GAAI,KAAO,GAArB,KAAK,GAAgB,CAEhD;CACY,CAAA;AAElB,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/Markdown/components/SearchResultCards/index.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type Ref } from 'react';\n\nimport { type FlexboxProps } from '@/Flex';\nimport ScrollShadow from '@/ScrollShadow';\n\nimport SearchResultCard from './SearchResultCard';\n\nexport interface SearchResultItem {\n  alt?: string;\n  summary?: string;\n  title?: string;\n  url: string;\n}\n\nexport interface SearchResultCardsProps extends FlexboxProps {\n  dataSource: string[] | SearchResultItem[];\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst SearchResultCards = memo<SearchResultCardsProps>(({ ref, dataSource, style, ...rest }) => {\n  return (\n    <ScrollShadow\n      hideScrollBar\n      horizontal\n      gap={12}\n      orientation={'horizontal'}\n      ref={ref}\n      size={10}\n      style={{ minHeight: 80, overflowX: 'scroll', paddingInlineEnd: 24, width: '100%', ...style }}\n      {...rest}\n    >\n      {dataSource.map((link) =>\n        typeof link === 'string' ? (\n          <SearchResultCard key={link} url={link} />\n        ) : (\n          <SearchResultCard key={link.url} {...link} />\n        ),\n      )}\n    </ScrollShadow>\n  );\n});\n\nSearchResultCards.displayName = 'SearchResultCards';\n\nexport default SearchResultCards;\n"],"mappings":";;;;;;AAqBA,MAAM,oBAAoB,MAA8B,EAAE,KAAK,YAAY,OAAO,GAAG,WAAW;CAC9F,OACE,oBAAC,cAAD;EACE,eAAA;EACA,YAAA;EACA,KAAK;EACL,aAAa;EACR;EACL,MAAM;EACN,OAAO;GAAE,WAAW;GAAI,WAAW;GAAU,kBAAkB;GAAI,OAAO;GAAQ,GAAG;EAAM;EAC3F,GAAI;EAEH,UAAA,WAAW,KAAK,SACf,OAAO,SAAS,WACd,oBAAC,kBAAD,EAA6B,KAAK,KAAO,GAAlB,IAAkB,IAEzC,oBAAC,kBAAD,EAAiC,GAAI,KAAO,GAArB,KAAK,GAAgB,CAEhD;CACY,CAAA;AAElB,CAAC;AAED,kBAAkB,cAAc"}

package/es/MaterialFileTypeIcon/MaterialFileTypeIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MaterialFileTypeIcon.mjs","names":[],"sources":["../../src/MaterialFileTypeIcon/MaterialFileTypeIcon.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useMemo } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport FileTypeIcon from '@/FileTypeIcon';\nimport { Center } from '@/Flex';\nimport Img from '@/Img';\n\nimport type { MaterialFileTypeIconProps } from './type';\nimport { getIconUrlForDirectoryPath, getIconUrlForFilePath } from './utils';\n\nconst MaterialFileTypeIcon: FC<MaterialFileTypeIconProps> = ({\n  fallbackUnknownType = true,\n  filename,\n  size = 48,\n  variant = 'raw',\n  type,\n  style,\n  open,\n  ...rest\n}) => {\n  const genCdnUrl = useCdnFn();\n  const ICONS_URL = genCdnUrl({\n    path: 'assets',\n    pkg: '@lobehub/assets-fileicon',\n    version: '1.0.0',\n  });\n\n  const iconUrl: string = useMemo(() => {\n    return type === 'file'\n      ? getIconUrlForFilePath({ fallbackUnknownType, iconsUrl: ICONS_URL, path: filename })\n      : getIconUrlForDirectoryPath({\n          fallbackUnknownType,\n          iconsUrl: ICONS_URL,\n          open,\n          path: filename,\n        });\n  }, [ICONS_URL, type, filename, open]);\n\n  if (!iconUrl)\n    return (\n      <FileTypeIcon\n        className={rest.className}\n        filetype={filename.split('.')[1]}\n        size={size}\n        type={type}\n        variant={'mono'}\n      />\n    );\n\n  if (variant === 'raw')\n    return <Img alt={filename} height={size} src={iconUrl} style={style} width={size} {...rest} />;\n\n  return (\n    <Center\n      flex={'none'}\n      height={size}\n      style={{ position: 'relative', ...style }}\n      width={size}\n      {...rest}\n    >\n      <FileTypeIcon size={size} type={variant} variant={'mono'} />\n      <Img\n        alt={filename}\n        height={size / 2}\n        src={iconUrl}\n        style={{ position: 'absolute', top: size / 3 }}\n        width={size / 2}\n        {...rest}\n      />\n    </Center>\n  );\n};\n\nMaterialFileTypeIcon.displayName = 'MaterialFileTypeIcon';\n\nexport default MaterialFileTypeIcon;\n"],"mappings":";;;;;;;;;AAYA,MAAM,wBAAuD,EAC3D,sBAAsB,MACtB,UACA,OAAO,IACP,UAAU,OACV,MACA,OACA,MACA,GAAG,WACC;CAEJ,MAAM,YADY,SACQ,CAAC,CAAC;EAC1B,MAAM;EACN,KAAK;EACL,SAAS;CACX,CAAC;CAED,MAAM,UAAkB,cAAc;EACpC,OAAO,SAAS,SACZ,sBAAsB;GAAE;GAAqB,UAAU;GAAW,MAAM;EAAS,CAAC,IAClF,2BAA2B;GACzB;GACA,UAAU;GACV;GACA,MAAM;EACR,CAAC;CACP,GAAG;EAAC;EAAW;EAAM;EAAU;CAAI,CAAC;CAEpC,IAAI,CAAC,SACH,OACE,oBAAC,cAAD;EACE,WAAW,KAAK;EAChB,UAAU,SAAS,MAAM,GAAG,CAAC,CAAC;EACxB;EACA;EACN,SAAS;CACV,CAAA;CAGL,IAAI,YAAY,OACd,OAAO,oBAAC,KAAD;EAAK,KAAK;EAAU,QAAQ;EAAM,KAAK;EAAgB;EAAO,OAAO;EAAM,GAAI;CAAO,CAAA;CAE/F,OACE,qBAAC,QAAD;EACE,MAAM;EACN,QAAQ;EACR,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EACxC,OAAO;EACP,GAAI;YALN,CAOE,oBAAC,cAAD;GAAoB;GAAM,MAAM;GAAS,SAAS;EAAS,CAAA,GAC3D,oBAAC,KAAD;GACE,KAAK;GACL,QAAQ,OAAO;GACf,KAAK;GACL,OAAO;IAAE,UAAU;IAAY,KAAK,OAAO;GAAE;GAC7C,OAAO,OAAO;GACd,GAAI;EACL,CAAA,CACK;;AAEZ;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"MaterialFileTypeIcon.mjs","names":[],"sources":["../../src/MaterialFileTypeIcon/MaterialFileTypeIcon.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useMemo } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport FileTypeIcon from '@/FileTypeIcon';\nimport { Center } from '@/Flex';\nimport Img from '@/Img';\n\nimport type { MaterialFileTypeIconProps } from './type';\nimport { getIconUrlForDirectoryPath, getIconUrlForFilePath } from './utils';\n\nconst MaterialFileTypeIcon: FC<MaterialFileTypeIconProps> = ({\n  fallbackUnknownType = true,\n  filename,\n  size = 48,\n  variant = 'raw',\n  type,\n  style,\n  open,\n  ...rest\n}) => {\n  const genCdnUrl = useCdnFn();\n  const ICONS_URL = genCdnUrl({\n    path: 'assets',\n    pkg: '@lobehub/assets-fileicon',\n    version: '1.0.0',\n  });\n\n  const iconUrl: string = useMemo(() => {\n    return type === 'file'\n      ? getIconUrlForFilePath({ fallbackUnknownType, iconsUrl: ICONS_URL, path: filename })\n      : getIconUrlForDirectoryPath({\n          fallbackUnknownType,\n          iconsUrl: ICONS_URL,\n          open,\n          path: filename,\n        });\n  }, [ICONS_URL, type, filename, open]);\n\n  if (!iconUrl)\n    return (\n      <FileTypeIcon\n        className={rest.className}\n        filetype={filename.split('.')[1]}\n        size={size}\n        type={type}\n        variant={'mono'}\n      />\n    );\n\n  if (variant === 'raw')\n    return <Img alt={filename} height={size} src={iconUrl} style={style} width={size} {...rest} />;\n\n  return (\n    <Center\n      flex={'none'}\n      height={size}\n      style={{ position: 'relative', ...style }}\n      width={size}\n      {...rest}\n    >\n      <FileTypeIcon size={size} type={variant} variant={'mono'} />\n      <Img\n        alt={filename}\n        height={size / 2}\n        src={iconUrl}\n        style={{ position: 'absolute', top: size / 3 }}\n        width={size / 2}\n        {...rest}\n      />\n    </Center>\n  );\n};\n\nMaterialFileTypeIcon.displayName = 'MaterialFileTypeIcon';\n\nexport default MaterialFileTypeIcon;\n"],"mappings":";;;;;;;;;AAYA,MAAM,wBAAuD,EAC3D,sBAAsB,MACtB,UACA,OAAO,IACP,UAAU,OACV,MACA,OACA,MACA,GAAG,WACC;CAEJ,MAAM,YADY,SACQ,CAAC,CAAC;EAC1B,MAAM;EACN,KAAK;EACL,SAAS;CACX,CAAC;CAED,MAAM,UAAkB,cAAc;EACpC,OAAO,SAAS,SACZ,sBAAsB;GAAE;GAAqB,UAAU;GAAW,MAAM;EAAS,CAAC,IAClF,2BAA2B;GACzB;GACA,UAAU;GACV;GACA,MAAM;EACR,CAAC;CACP,GAAG;EAAC;EAAW;EAAM;EAAU;CAAI,CAAC;CAEpC,IAAI,CAAC,SACH,OACE,oBAAC,cAAD;EACE,WAAW,KAAK;EAChB,UAAU,SAAS,MAAM,GAAG,CAAC,CAAC;EACxB;EACA;EACN,SAAS;CACV,CAAA;CAGL,IAAI,YAAY,OACd,OAAO,oBAAC,KAAD;EAAK,KAAK;EAAU,QAAQ;EAAM,KAAK;EAAgB;EAAO,OAAO;EAAM,GAAI;CAAO,CAAA;CAE/F,OACE,qBAAC,QAAD;EACE,MAAM;EACN,QAAQ;EACR,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EACxC,OAAO;EACP,GAAI;EALN,UAAA,CAOE,oBAAC,cAAD;GAAoB;GAAM,MAAM;GAAS,SAAS;EAAS,CAAA,GAC3D,oBAAC,KAAD;GACE,KAAK;GACL,QAAQ,OAAO;GACf,KAAK;GACL,OAAO;IAAE,UAAU;IAAY,KAAK,OAAO;GAAE;GAC7C,OAAO,OAAO;GACd,GAAI;EACL,CAAA,CACK;;AAEZ;AAEA,qBAAqB,cAAc"}

package/es/Menu/Menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.mjs","names":["Menu","AntdMenu"],"sources":["../../src/Menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport { ConfigProvider, Menu as AntdMenu } from 'antd';\nimport { cx, useTheme } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { IconProvider } from '@/Icon';\nimport { mapItems } from '@/Menu/utils';\n\nimport { variants } from './style';\nimport { type MenuProps } from './type';\n\nconst Menu = memo<MenuProps>(\n  ({\n    compact,\n    shadow,\n    variant = 'borderless',\n    className,\n    selectable,\n    iconProps,\n    items,\n    ref,\n    ...rest\n  }) => {\n    const theme = useTheme();\n\n    const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\n\n    return (\n      <ConfigProvider\n        theme={{\n          components: {\n            Menu: {\n              controlHeightLG: 36,\n              iconMarginInlineEnd: 8,\n              iconSize: 16,\n              itemActiveBg: theme.isDarkMode ? theme.colorFillQuaternary : theme.colorFillSecondary,\n              itemBorderRadius: theme.borderRadius,\n              itemColor: theme.colorTextSecondary,\n              itemHoverBg: theme.colorFillTertiary,\n              itemMarginBlock: 4,\n              itemMarginInline: 4,\n              itemSelectedBg: theme.colorFillSecondary,\n            },\n          },\n        }}\n      >\n        <IconProvider\n          config={{\n            size: 'small',\n            ...iconProps,\n          }}\n        >\n          <AntdMenu\n            className={cx(variants({ compact, shadow, variant }), className)}\n            inlineIndent={12}\n            items={antdItems}\n            mode=\"vertical\"\n            ref={ref}\n            selectable={selectable}\n            {...rest}\n          />\n        </IconProvider>\n      </ConfigProvider>\n    );\n  },\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":";;;;;;;;;AAYA,MAAMA,SAAO,MACV,EACC,SACA,QACA,UAAU,cACV,WACA,YACA,WACA,OACA,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,SAAS;CAEvB,MAAM,YAAY,cAAc,MAAM,KAAK,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;CAE5E,OACE,oBAAC,gBAAD;EACE,OAAO,EACL,YAAY,EACV,MAAM;GACJ,iBAAiB;GACjB,qBAAqB;GACrB,UAAU;GACV,cAAc,MAAM,aAAa,MAAM,sBAAsB,MAAM;GACnE,kBAAkB,MAAM;GACxB,WAAW,MAAM;GACjB,aAAa,MAAM;GACnB,iBAAiB;GACjB,kBAAkB;GAClB,gBAAgB,MAAM;EACxB,EACF,EACF;YAEA,oBAAC,cAAD;GACE,QAAQ;IACN,MAAM;IACN,GAAG;GACL;aAEA,oBAACC,MAAD;IACE,WAAW,GAAG,SAAS;KAAE;KAAS;KAAQ;IAAQ,CAAC,GAAG,SAAS;IAC/D,cAAc;IACd,OAAO;IACP,MAAK;IACA;IACO;IACZ,GAAI;GACL,CAAA;EACW,CAAA;CACA,CAAA;AAEpB,CACF;AAEA,OAAK,cAAc"}
+{"version":3,"file":"Menu.mjs","names":["Menu","AntdMenu"],"sources":["../../src/Menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport { ConfigProvider, Menu as AntdMenu } from 'antd';\nimport { cx, useTheme } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { IconProvider } from '@/Icon';\nimport { mapItems } from '@/Menu/utils';\n\nimport { variants } from './style';\nimport { type MenuProps } from './type';\n\nconst Menu = memo<MenuProps>(\n  ({\n    compact,\n    shadow,\n    variant = 'borderless',\n    className,\n    selectable,\n    iconProps,\n    items,\n    ref,\n    ...rest\n  }) => {\n    const theme = useTheme();\n\n    const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\n\n    return (\n      <ConfigProvider\n        theme={{\n          components: {\n            Menu: {\n              controlHeightLG: 36,\n              iconMarginInlineEnd: 8,\n              iconSize: 16,\n              itemActiveBg: theme.isDarkMode ? theme.colorFillQuaternary : theme.colorFillSecondary,\n              itemBorderRadius: theme.borderRadius,\n              itemColor: theme.colorTextSecondary,\n              itemHoverBg: theme.colorFillTertiary,\n              itemMarginBlock: 4,\n              itemMarginInline: 4,\n              itemSelectedBg: theme.colorFillSecondary,\n            },\n          },\n        }}\n      >\n        <IconProvider\n          config={{\n            size: 'small',\n            ...iconProps,\n          }}\n        >\n          <AntdMenu\n            className={cx(variants({ compact, shadow, variant }), className)}\n            inlineIndent={12}\n            items={antdItems}\n            mode=\"vertical\"\n            ref={ref}\n            selectable={selectable}\n            {...rest}\n          />\n        </IconProvider>\n      </ConfigProvider>\n    );\n  },\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":";;;;;;;;;AAYA,MAAMA,SAAO,MACV,EACC,SACA,QACA,UAAU,cACV,WACA,YACA,WACA,OACA,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,SAAS;CAEvB,MAAM,YAAY,cAAc,MAAM,KAAK,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;CAE5E,OACE,oBAAC,gBAAD;EACE,OAAO,EACL,YAAY,EACV,MAAM;GACJ,iBAAiB;GACjB,qBAAqB;GACrB,UAAU;GACV,cAAc,MAAM,aAAa,MAAM,sBAAsB,MAAM;GACnE,kBAAkB,MAAM;GACxB,WAAW,MAAM;GACjB,aAAa,MAAM;GACnB,iBAAiB;GACjB,kBAAkB;GAClB,gBAAgB,MAAM;EACxB,EACF,EACF;EAEA,UAAA,oBAAC,cAAD;GACE,QAAQ;IACN,MAAM;IACN,GAAG;GACL;GAEA,UAAA,oBAACC,MAAD;IACE,WAAW,GAAG,SAAS;KAAE;KAAS;KAAQ;IAAQ,CAAC,GAAG,SAAS;IAC/D,cAAc;IACd,OAAO;IACP,MAAK;IACA;IACO;IACZ,GAAI;GACL,CAAA;EACW,CAAA;CACA,CAAA;AAEpB,CACF;AAEA,OAAK,cAAc"}

package/es/Mermaid/FullFeatured.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { bodyVariants, headerVariants, variants } from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { type MermaidProps } from './type';\n\nconst MermaidHeaderLanguage = memo(\n  ({\n    fileName,\n    language,\n    showLanguage,\n  }: {\n    fileName?: string;\n    language: string;\n    showLanguage?: boolean;\n  }) => {\n    if (!showLanguage) return null;\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={'languageTitle'}\n        flex={1}\n        gap={4}\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        <MaterialFileTypeIcon\n          fallbackUnknownType={false}\n          filename={fileName || language}\n          size={18}\n          type={'file'}\n          variant={'raw'}\n        />\n\n        <Text ellipsis fontSize={13}>\n          {fileName || 'Mermaid'}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.fileName === next.fileName &&\n    prev.language === next.language &&\n    prev.showLanguage === next.showLanguage,\n);\n\nexport interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {\n  children: ReactNode;\n  content: string;\n}\n\nexport const MermaidFullFeatured = memo<MermaidFullFeaturedProps>(\n  ({\n    showLanguage,\n    styles: customStyles,\n    classNames,\n    content,\n    children,\n    className,\n    copyable,\n    actionsRender,\n    style,\n    variant,\n    shadow,\n    language = 'mermaid',\n    fileName,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, originalActions]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"mermaid\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(headerVariants({ variant }), classNames?.header)}\n          justify={'space-between'}\n          style={customStyles?.header}\n          onClick={handleToggleExpand}\n        >\n          <MermaidHeaderLanguage\n            fileName={fileName}\n            language={language}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          className={cx(bodyVariants({ expand }), classNames?.body)}\n          style={customStyles?.body}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MermaidFullFeatured;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,wBAAwB,MAC3B,EACC,UACA,UACA,mBAKI;CACJ,IAAI,CAAC,cAAc,OAAO;CAE1B,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL,SAAS;EACT,eAAe;YAPjB,CASE,oBAAC,sBAAD;GACE,qBAAqB;GACrB,UAAU,YAAY;GACtB,MAAM;GACN,MAAM;GACN,SAAS;EACV,CAAA,GAED,oBAAC,MAAD;GAAM,UAAA;GAAS,UAAU;aACtB,YAAY;EACT,CAAA,CACC;;AAEb,IACC,MAAM,SACL,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,iBAAiB,KAAK,YAC/B;AAOA,MAAa,sBAAsB,MAChC,EACC,cACA,QAAQ,cACR,YACA,SACA,UACA,WACA,UACA,eACA,OACA,SACA,QACA,WAAW,WACX,UACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,WAAW,UAAU;CACvB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB,WAAW,SAAS,CAAC,CAAC;CAE3D,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,oBAAC,YAAD;GAAY,SAAS;GAAY,MAAM;EAAU,CAAA;CAC1D,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,gBAAgB;GAChB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAS;EAAY;CAAe,CAAC;CAExD,MAAM,qBAAqB,kBAAkB;EAC3C,WAAW,SAAS,CAAC,IAAI;CAC3B,GAAG,CAAC,CAAC;CAEL,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,kBAAe;EACR;EACP,GAAI;YAJN,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,YAAY,MAAM;GAC7D,SAAS;GACT,OAAO,cAAc;GACrB,SAAS;aANX,CAQE,oBAAC,uBAAD;IACY;IACA;IACI;GACf,CAAA,GACD,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,MAAM;IAAQ,KAAK;IAAG,SAAS;cAApE,CACE,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW;KAAiB,MAAM;KAAQ,KAAK;eACjF;IACM,CAAA,GACT,oBAAC,YAAD;KACE,MAAM,SAAS,cAAc;KAC7B,MAAM;KACN,SAAS;IACV,CAAA,CACM;KACF;MACT,oBAACA,mBAAD;GACE,WAAW,GAAG,aAAa,EAAE,OAAO,CAAC,GAAG,YAAY,IAAI;GACxD,OAAO,cAAc;GAEpB;EACM,CAAA,CACF;;AAEb,CACF"}
+{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { bodyVariants, headerVariants, variants } from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { type MermaidProps } from './type';\n\nconst MermaidHeaderLanguage = memo(\n  ({\n    fileName,\n    language,\n    showLanguage,\n  }: {\n    fileName?: string;\n    language: string;\n    showLanguage?: boolean;\n  }) => {\n    if (!showLanguage) return null;\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={'languageTitle'}\n        flex={1}\n        gap={4}\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        <MaterialFileTypeIcon\n          fallbackUnknownType={false}\n          filename={fileName || language}\n          size={18}\n          type={'file'}\n          variant={'raw'}\n        />\n\n        <Text ellipsis fontSize={13}>\n          {fileName || 'Mermaid'}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.fileName === next.fileName &&\n    prev.language === next.language &&\n    prev.showLanguage === next.showLanguage,\n);\n\nexport interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {\n  children: ReactNode;\n  content: string;\n}\n\nexport const MermaidFullFeatured = memo<MermaidFullFeaturedProps>(\n  ({\n    showLanguage,\n    styles: customStyles,\n    classNames,\n    content,\n    children,\n    className,\n    copyable,\n    actionsRender,\n    style,\n    variant,\n    shadow,\n    language = 'mermaid',\n    fileName,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, originalActions]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"mermaid\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(headerVariants({ variant }), classNames?.header)}\n          justify={'space-between'}\n          style={customStyles?.header}\n          onClick={handleToggleExpand}\n        >\n          <MermaidHeaderLanguage\n            fileName={fileName}\n            language={language}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          className={cx(bodyVariants({ expand }), classNames?.body)}\n          style={customStyles?.body}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MermaidFullFeatured;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,wBAAwB,MAC3B,EACC,UACA,UACA,mBAKI;CACJ,IAAI,CAAC,cAAc,OAAO;CAE1B,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL,SAAS;EACT,eAAe;EAPjB,UAAA,CASE,oBAAC,sBAAD;GACE,qBAAqB;GACrB,UAAU,YAAY;GACtB,MAAM;GACN,MAAM;GACN,SAAS;EACV,CAAA,GAED,oBAAC,MAAD;GAAM,UAAA;GAAS,UAAU;GACtB,UAAA,YAAY;EACT,CAAA,CACC;;AAEb,IACC,MAAM,SACL,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,iBAAiB,KAAK,YAC/B;AAOA,MAAa,sBAAsB,MAChC,EACC,cACA,QAAQ,cACR,YACA,SACA,UACA,WACA,UACA,eACA,OACA,SACA,QACA,WAAW,WACX,UACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,WAAW,UAAU;CACvB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB,WAAW,SAAS,CAAC,CAAC;CAE3D,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,oBAAC,YAAD;GAAY,SAAS;GAAY,MAAM;EAAU,CAAA;CAC1D,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,gBAAgB;GAChB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAS;EAAY;CAAe,CAAC;CAExD,MAAM,qBAAqB,kBAAkB;EAC3C,WAAW,SAAS,CAAC,IAAI;CAC3B,GAAG,CAAC,CAAC;CAEL,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,kBAAe;EACR;EACP,GAAI;EAJN,UAAA,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,YAAY,MAAM;GAC7D,SAAS;GACT,OAAO,cAAc;GACrB,SAAS;GANX,UAAA,CAQE,oBAAC,uBAAD;IACY;IACA;IACI;GACf,CAAA,GACD,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,MAAM;IAAQ,KAAK;IAAG,SAAS;IAApE,UAAA,CACE,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW;KAAiB,MAAM;KAAQ,KAAK;KACjF,UAAA;IACM,CAAA,GACT,oBAAC,YAAD;KACE,MAAM,SAAS,cAAc;KAC7B,MAAM;KACN,SAAS;IACV,CAAA,CACM;GACF,CAAA,CAAA;EACT,CAAA,GAAA,oBAACA,mBAAD;GACE,WAAW,GAAG,aAAa,EAAE,OAAO,CAAC,GAAG,YAAY,IAAI;GACxD,OAAO,cAAc;GAEpB;EACM,CAAA,CACF;;AAEb,CACF"}

package/es/Mermaid/Mermaid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Mermaid.mjs","names":["FullFeatured","Flexbox"],"sources":["../../src/Mermaid/Mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { styles, variants } from '@/Highlighter/style';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport SyntaxMermaid from './SyntaxMermaid';\nimport type { MermaidProps } from './type';\n\nconst Mermaid = memo<MermaidProps>(\n  ({\n    actionIconSize,\n    animated,\n    bodyRender,\n    children,\n    classNames,\n    className,\n    copyable = true,\n    defaultExpand = true,\n    fileName,\n    fullFeatured,\n    language = 'mermaid',\n    actionsRender,\n    shadow,\n    showLanguage = true,\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    ...rest\n  }) => {\n    const tirmedChildren = children.trim();\n    const copyContentRef = useRef(tirmedChildren);\n\n    useEffect(() => {\n      copyContentRef.current = tirmedChildren;\n    }, [tirmedChildren]);\n\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return (\n        <CopyButton content={getCopyContent} size={actionIconSize || { blockSize: 28, size: 16 }} />\n      );\n    }, [actionIconSize, copyable, getCopyContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize,\n        content: tirmedChildren,\n        getContent: getCopyContent,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, originalActions, tirmedChildren]);\n\n    const defaultBody = useMemo(\n      () => (\n        <SyntaxMermaid\n          animated={animated}\n          className={classNames?.content}\n          style={customStyles?.content}\n          theme={theme}\n          variant={variant}\n        >\n          {tirmedChildren}\n        </SyntaxMermaid>\n      ),\n      [animated, theme, tirmedChildren, variant, classNames?.content, customStyles?.content],\n    );\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({ content: tirmedChildren, originalNode: defaultBody });\n    }, [bodyRender, defaultBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          language={language}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          style={style}\n          styles={customStyles}\n          variant={variant}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <div\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"mermaid\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox horizontal align={'center'} className={styles.actions} flex={'none'} gap={4}>\n          {actions}\n        </Flexbox>\n        {showLanguage && <Tag className={styles.lang}>{language.toLowerCase()}</Tag>}\n        {body}\n      </div>\n    );\n  },\n);\n\nMermaid.displayName = 'Mermaid';\n\nexport default Mermaid;\n\nexport { type MermaidProps } from './type';\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,UAAU,MACb,EACC,gBACA,UACA,YACA,UACA,YACA,WACA,WAAW,MACX,gBAAgB,MAChB,UACA,cACA,WAAW,WACX,eACA,QACA,eAAe,MACf,OACA,QAAQ,cACR,OACA,UAAU,UACV,GAAG,WACC;CACJ,MAAM,iBAAiB,SAAS,KAAK;CACrC,MAAM,iBAAiB,OAAO,cAAc;CAE5C,gBAAgB;EACd,eAAe,UAAU;CAC3B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,CAAC,CAAC;CAEnE,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OACE,oBAAC,YAAD;GAAY,SAAS;GAAgB,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;GAAG;EAAI,CAAA;CAE/F,GAAG;EAAC;EAAgB;EAAU;CAAc,CAAC;CAE7C,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAgB;EAAe;EAAgB;EAAiB;CAAc,CAAC;CAEnF,MAAM,cAAc,cAEhB,oBAAC,eAAD;EACY;EACV,WAAW,YAAY;EACvB,OAAO,cAAc;EACd;EACE;YAER;CACY,CAAA,GAEjB;EAAC;EAAU;EAAO;EAAgB;EAAS,YAAY;EAAS,cAAc;CAAO,CACvF;CAEA,MAAM,OAAO,cAAc;EACzB,IAAI,CAAC,YAAY,OAAO;EACxB,OAAO,WAAW;GAAE,SAAS;GAAgB,cAAc;EAAY,CAAC;CAC1E,GAAG;EAAC;EAAY;EAAa;CAAc,CAAC;CAE5C,IAAI,cACF,OACE,oBAACA,qBAAD;EACiB;EACJ;EACC;EACZ,SAAS;EACC;EACK;EACL;EACA;EACF;EACM;EACP;EACP,QAAQ;EACC;EACT,GAAI;YAEH;CACW,CAAA;CAGlB,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,kBAAe;EACR;EACP,GAAI;YAJN;GAME,oBAACC,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;cAChF;GACM,CAAA;GACR,gBAAgB,oBAAC,KAAD;IAAK,WAAW,OAAO;cAAO,SAAS,YAAY;GAAO,CAAA;GAC1E;EACE;;AAET,CACF;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"Mermaid.mjs","names":["FullFeatured","Flexbox"],"sources":["../../src/Mermaid/Mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { styles, variants } from '@/Highlighter/style';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport SyntaxMermaid from './SyntaxMermaid';\nimport type { MermaidProps } from './type';\n\nconst Mermaid = memo<MermaidProps>(\n  ({\n    actionIconSize,\n    animated,\n    bodyRender,\n    children,\n    classNames,\n    className,\n    copyable = true,\n    defaultExpand = true,\n    fileName,\n    fullFeatured,\n    language = 'mermaid',\n    actionsRender,\n    shadow,\n    showLanguage = true,\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    ...rest\n  }) => {\n    const tirmedChildren = children.trim();\n    const copyContentRef = useRef(tirmedChildren);\n\n    useEffect(() => {\n      copyContentRef.current = tirmedChildren;\n    }, [tirmedChildren]);\n\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return (\n        <CopyButton content={getCopyContent} size={actionIconSize || { blockSize: 28, size: 16 }} />\n      );\n    }, [actionIconSize, copyable, getCopyContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize,\n        content: tirmedChildren,\n        getContent: getCopyContent,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, originalActions, tirmedChildren]);\n\n    const defaultBody = useMemo(\n      () => (\n        <SyntaxMermaid\n          animated={animated}\n          className={classNames?.content}\n          style={customStyles?.content}\n          theme={theme}\n          variant={variant}\n        >\n          {tirmedChildren}\n        </SyntaxMermaid>\n      ),\n      [animated, theme, tirmedChildren, variant, classNames?.content, customStyles?.content],\n    );\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({ content: tirmedChildren, originalNode: defaultBody });\n    }, [bodyRender, defaultBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          language={language}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          style={style}\n          styles={customStyles}\n          variant={variant}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <div\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"mermaid\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox horizontal align={'center'} className={styles.actions} flex={'none'} gap={4}>\n          {actions}\n        </Flexbox>\n        {showLanguage && <Tag className={styles.lang}>{language.toLowerCase()}</Tag>}\n        {body}\n      </div>\n    );\n  },\n);\n\nMermaid.displayName = 'Mermaid';\n\nexport default Mermaid;\n\nexport { type MermaidProps } from './type';\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,UAAU,MACb,EACC,gBACA,UACA,YACA,UACA,YACA,WACA,WAAW,MACX,gBAAgB,MAChB,UACA,cACA,WAAW,WACX,eACA,QACA,eAAe,MACf,OACA,QAAQ,cACR,OACA,UAAU,UACV,GAAG,WACC;CACJ,MAAM,iBAAiB,SAAS,KAAK;CACrC,MAAM,iBAAiB,OAAO,cAAc;CAE5C,gBAAgB;EACd,eAAe,UAAU;CAC3B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,CAAC,CAAC;CAEnE,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OACE,oBAAC,YAAD;GAAY,SAAS;GAAgB,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;GAAG;EAAI,CAAA;CAE/F,GAAG;EAAC;EAAgB;EAAU;CAAc,CAAC;CAE7C,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAgB;EAAe;EAAgB;EAAiB;CAAc,CAAC;CAEnF,MAAM,cAAc,cAEhB,oBAAC,eAAD;EACY;EACV,WAAW,YAAY;EACvB,OAAO,cAAc;EACd;EACE;EAER,UAAA;CACY,CAAA,GAEjB;EAAC;EAAU;EAAO;EAAgB;EAAS,YAAY;EAAS,cAAc;CAAO,CACvF;CAEA,MAAM,OAAO,cAAc;EACzB,IAAI,CAAC,YAAY,OAAO;EACxB,OAAO,WAAW;GAAE,SAAS;GAAgB,cAAc;EAAY,CAAC;CAC1E,GAAG;EAAC;EAAY;EAAa;CAAc,CAAC;CAE5C,IAAI,cACF,OACE,oBAACA,qBAAD;EACiB;EACJ;EACC;EACZ,SAAS;EACC;EACK;EACL;EACA;EACF;EACM;EACP;EACP,QAAQ;EACC;EACT,GAAI;EAEH,UAAA;CACW,CAAA;CAGlB,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,kBAAe;EACR;EACP,GAAI;EAJN,UAAA;GAME,oBAACC,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAChF,UAAA;GACM,CAAA;GACR,gBAAgB,oBAAC,KAAD;IAAK,WAAW,OAAO;IAAO,UAAA,SAAS,YAAY;GAAO,CAAA;GAC1E;EACE;;AAET,CACF;AAEA,QAAQ,cAAc"}

package/es/Mermaid/SyntaxMermaid/MermaidFallback.mjs

@@ -0,0 +1,35 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Text from "../../Text/Text.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Mermaid/SyntaxMermaid/MermaidFallback.tsx
+const MermaidFallback = memo(({ children, className, message, style }) => /* @__PURE__ */ jsx("div", {
+	className,
+	style,
+	children: /* @__PURE__ */ jsxs(FlexBasic_default, {
+		gap: 8,
+		padding: 16,
+		children: [/* @__PURE__ */ jsx(Text, {
+			fontSize: 12,
+			type: "secondary",
+			children: message
+		}), /* @__PURE__ */ jsx(Text, {
+			code: true,
+			as: "pre",
+			fontSize: 12,
+			style: {
+				margin: 0,
+				overflowX: "auto",
+				whiteSpace: "pre-wrap",
+				wordBreak: "break-word"
+			},
+			children
+		})]
+	})
+}));
+MermaidFallback.displayName = "MermaidFallback";
+//#endregion
+export { MermaidFallback as default };
+
+//# sourceMappingURL=MermaidFallback.mjs.map

package/es/Mermaid/SyntaxMermaid/MermaidFallback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidFallback.mjs","names":["Flexbox"],"sources":["../../../src/Mermaid/SyntaxMermaid/MermaidFallback.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Text from '@/Text';\n\nimport { type SyntaxMermaidProps } from '../type';\n\ninterface MermaidFallbackProps {\n  children: string;\n  className?: string;\n  message: string;\n  style?: SyntaxMermaidProps['style'];\n}\n\nconst MermaidFallback = memo<MermaidFallbackProps>(({ children, className, message, style }) => (\n  <div className={className} style={style}>\n    <Flexbox gap={8} padding={16}>\n      <Text fontSize={12} type={'secondary'}>\n        {message}\n      </Text>\n      <Text\n        code\n        as={'pre'}\n        fontSize={12}\n        style={{ margin: 0, overflowX: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}\n      >\n        {children}\n      </Text>\n    </Flexbox>\n  </div>\n));\n\nMermaidFallback.displayName = 'MermaidFallback';\n\nexport default MermaidFallback;\n"],"mappings":";;;;;;AAgBA,MAAM,kBAAkB,MAA4B,EAAE,UAAU,WAAW,SAAS,YAClF,oBAAC,OAAD;CAAgB;CAAkB;CAChC,UAAA,qBAACA,mBAAD;EAAS,KAAK;EAAG,SAAS;EAA1B,UAAA,CACE,oBAAC,MAAD;GAAM,UAAU;GAAI,MAAM;GACvB,UAAA;EACG,CAAA,GACN,oBAAC,MAAD;GACE,MAAA;GACA,IAAI;GACJ,UAAU;GACV,OAAO;IAAE,QAAQ;IAAG,WAAW;IAAQ,YAAY;IAAY,WAAW;GAAa;GAEtF;EACG,CAAA,CACC;;AACN,CAAA,CACN;AAED,gBAAgB,cAAc"}

package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { toStandaloneSvgString } from "./prepareInlineSvg.mjs";
+import { prepareMermaidSvgString } from "./prepareMermaidSvg.mjs";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Image } from "antd";
+//#region src/Mermaid/SyntaxMermaid/MermaidSvg.tsx
+const MermaidSvg = memo(({ className, ref, style, svg }) => {
+	const containerRef = useRef(null);
+	const [previewUrl, setPreviewUrl] = useState();
+	const [open, setOpen] = useState(false);
+	useEffect(() => {
+		return () => {
+			if (previewUrl) URL.revokeObjectURL(previewUrl);
+		};
+	}, [previewUrl]);
+	const handleOpen = useCallback(() => {
+		const element = containerRef.current?.querySelector("svg");
+		if (!element) return;
+		const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));
+		setPreviewUrl((previous) => {
+			if (previous) URL.revokeObjectURL(previous);
+			return URL.createObjectURL(new Blob([standalone], { type: "image/svg+xml" }));
+		});
+		setOpen(true);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		ref,
+		style,
+		children: [/* @__PURE__ */ jsx("div", {
+			dangerouslySetInnerHTML: { __html: svg },
+			ref: containerRef,
+			style: { cursor: "zoom-in" },
+			onClick: handleOpen
+		}), previewUrl && /* @__PURE__ */ jsx(Image, {
+			preview: {
+				onVisibleChange: setOpen,
+				src: previewUrl,
+				visible: open
+			},
+			src: previewUrl,
+			style: { display: "none" },
+			wrapperStyle: { display: "none" }
+		})]
+	});
+});
+MermaidSvg.displayName = "MermaidSvg";
+//#endregion
+export { MermaidSvg as default };
+
+//# sourceMappingURL=MermaidSvg.mjs.map

package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidSvg.mjs","names":["AntImage"],"sources":["../../../src/Mermaid/SyntaxMermaid/MermaidSvg.tsx"],"sourcesContent":["'use client';\n\nimport { Image as AntImage } from 'antd';\nimport { memo, type Ref, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { toStandaloneSvgString } from './prepareInlineSvg';\nimport { prepareMermaidSvgString } from './prepareMermaidSvg';\n\ninterface MermaidSvgProps {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: React.CSSProperties;\n  svg: string;\n}\n\nconst MermaidSvg = memo<MermaidSvgProps>(({ className, ref, style, svg }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [previewUrl, setPreviewUrl] = useState<string>();\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    return () => {\n      if (previewUrl) URL.revokeObjectURL(previewUrl);\n    };\n  }, [previewUrl]);\n\n  // The preview copy is only built on demand: it has to bake in the resolved\n  // CSS variables and be XML-well-formed, neither of which the inline copy needs.\n  const handleOpen = useCallback(() => {\n    const element = containerRef.current?.querySelector('svg');\n    if (!element) return;\n\n    const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));\n    setPreviewUrl((previous) => {\n      if (previous) URL.revokeObjectURL(previous);\n      return URL.createObjectURL(new Blob([standalone], { type: 'image/svg+xml' }));\n    });\n    setOpen(true);\n  }, []);\n\n  return (\n    <div className={className} ref={ref} style={style}>\n      <div\n        dangerouslySetInnerHTML={{ __html: svg }}\n        ref={containerRef}\n        style={{ cursor: 'zoom-in' }}\n        onClick={handleOpen}\n      />\n      {previewUrl && (\n        <AntImage\n          preview={{ onVisibleChange: setOpen, src: previewUrl, visible: open }}\n          src={previewUrl}\n          style={{ display: 'none' }}\n          wrapperStyle={{ display: 'none' }}\n        />\n      )}\n    </div>\n  );\n});\n\nMermaidSvg.displayName = 'MermaidSvg';\n\nexport default MermaidSvg;\n"],"mappings":";;;;;;;AAeA,MAAM,aAAa,MAAuB,EAAE,WAAW,KAAK,OAAO,UAAU;CAC3E,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAiB;CACrD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,gBAAgB;EACd,aAAa;GACX,IAAI,YAAY,IAAI,gBAAgB,UAAU;EAChD;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,aAAa,kBAAkB;EACnC,MAAM,UAAU,aAAa,SAAS,cAAc,KAAK;EACzD,IAAI,CAAC,SAAS;EAEd,MAAM,aAAa,wBAAwB,sBAAsB,OAAO,CAAC;EACzE,eAAe,aAAa;GAC1B,IAAI,UAAU,IAAI,gBAAgB,QAAQ;GAC1C,OAAO,IAAI,gBAAgB,IAAI,KAAK,CAAC,UAAU,GAAG,EAAE,MAAM,gBAAgB,CAAC,CAAC;EAC9E,CAAC;EACD,QAAQ,IAAI;CACd,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,OAAD;EAAgB;EAAgB;EAAY;EAA5C,UAAA,CACE,oBAAC,OAAD;GACE,yBAAyB,EAAE,QAAQ,IAAI;GACvC,KAAK;GACL,OAAO,EAAE,QAAQ,UAAU;GAC3B,SAAS;EACV,CAAA,GACA,cACC,oBAACA,OAAD;GACE,SAAS;IAAE,iBAAiB;IAAS,KAAK;IAAY,SAAS;GAAK;GACpE,KAAK;GACL,OAAO,EAAE,SAAS,OAAO;GACzB,cAAc,EAAE,SAAS,OAAO;EACjC,CAAA,CAEA;;AAET,CAAC;AAED,WAAW,cAAc"}

package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs

@@ -1,10 +1,10 @@
 "use client";
-import Image from "../../Image/index.mjs";
 import { mermaidThemes } from "../const.mjs";
 import { useMermaid } from "../../hooks/useMermaid.mjs";
-import { memo, useEffect, useId, useMemo, useState } from "react";
+import MermaidFallback from "./MermaidFallback.mjs";
+import MermaidSvg from "./MermaidSvg.mjs";
+import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { kebabCase } from "es-toolkit/compat";
 //#region src/Mermaid/SyntaxMermaid/StaticMermaid.tsx
 const StaticMermaid = memo(({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {
 	const safeChildren = children ?? "";
@@ -13,36 +13,7 @@ const StaticMermaid = memo(({ children, className, fallbackClassName, ref, style
 		if (isDefaultTheme) return;
 		return mermaidThemes.find((item) => item.id === customTheme)?.background;
 	}, [isDefaultTheme, customTheme]);
-	const data = useMermaid(safeChildren, {
-		id: kebabCase(`mermaid-${useId()}`),
-		theme: isDefaultTheme ? void 0 : customTheme
-	});
-	const isLoading = !data;
-	const [blobUrl, setBlobUrl] = useState();
-	useEffect(() => {
-		return () => {
-			if (blobUrl) URL.revokeObjectURL(blobUrl);
-		};
-	}, [blobUrl]);
-	useEffect(() => {
-		if (isLoading || !data) return;
-		let finalSvgString = data;
-		if (typeof window !== "undefined" && typeof navigator !== "undefined" && navigator.userAgent.includes("Firefox")) {
-			const svgDoc = new DOMParser().parseFromString(data, "image/svg+xml");
-			const svgElement = svgDoc.documentElement;
-			if (svgElement && svgElement.hasAttribute("viewBox")) {
-				const viewBoxParts = svgElement.getAttribute("viewBox").split(" ");
-				if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {
-					svgElement.setAttribute("width", viewBoxParts[2]);
-					svgElement.setAttribute("height", viewBoxParts[3]);
-				}
-				finalSvgString = new XMLSerializer().serializeToString(svgDoc);
-			}
-		}
-		const svgBlob = new Blob([finalSvgString], { type: "image/svg+xml" });
-		const url = URL.createObjectURL(svgBlob);
-		setBlobUrl(url);
-	}, [isLoading, data]);
+	const { svg, error, loading } = useMermaid(safeChildren, { theme: isDefaultTheme ? void 0 : customTheme });
 	const containerStyle = {
 		background: variant === "filled" ? background : void 0,
 		margin: 0,
@@ -52,7 +23,13 @@ const StaticMermaid = memo(({ children, className, fallbackClassName, ref, style
 		width: "100%",
 		...style
 	};
-	if (!blobUrl) return /* @__PURE__ */ jsx("div", {
+	if (error && !loading) return /* @__PURE__ */ jsx(MermaidFallback, {
+		className: fallbackClassName,
+		message: error,
+		style,
+		children: safeChildren
+	});
+	if (!svg) return /* @__PURE__ */ jsx("div", {
 		className: fallbackClassName,
 		style,
 		children: /* @__PURE__ */ jsx("div", {
@@ -60,17 +37,11 @@ const StaticMermaid = memo(({ children, className, fallbackClassName, ref, style
 			children: "Loading..."
 		})
 	});
-	return /* @__PURE__ */ jsx(Image, {
-		alt: "mermaid",
+	return /* @__PURE__ */ jsx(MermaidSvg, {
 		className,
-		maxHeight: 480,
-		minWidth: 300,
-		objectFit: "contain",
 		ref,
-		src: blobUrl,
 		style: containerStyle,
-		variant: "borderless",
-		width: "100%"
+		svg
 	});
 });
 StaticMermaid.displayName = "StaticMermaid";

package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StaticMermaid.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/StaticMermaid.tsx"],"sourcesContent":["'use client';\n\nimport { kebabCase } from 'es-toolkit/compat';\nimport { type Ref } from 'react';\nimport { memo, useEffect, useId, useMemo, useState } from 'react';\n\nimport { useMermaid } from '@/hooks/useMermaid';\nimport Image from '@/Image';\n\nimport { mermaidThemes } from '../const';\nimport { type SyntaxMermaidProps } from '../type';\n\ninterface StaticMermaidProps {\n  children: string;\n  className?: string;\n  fallbackClassName?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: SyntaxMermaidProps['style'];\n  theme?: SyntaxMermaidProps['theme'];\n  variant?: SyntaxMermaidProps['variant'];\n}\n\nconst StaticMermaid = memo<StaticMermaidProps>(\n  ({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {\n    const safeChildren = children ?? '';\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n\n    const background = useMemo(() => {\n      if (isDefaultTheme) return;\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\n    }, [isDefaultTheme, customTheme]);\n\n    const id = useId();\n    const mermaidId = kebabCase(`mermaid-${id}`);\n    const data = useMermaid(safeChildren, {\n      id: mermaidId,\n      theme: isDefaultTheme ? undefined : customTheme,\n    });\n    const isLoading = !data;\n    const [blobUrl, setBlobUrl] = useState<string>();\n\n    // 组件卸载时清理 Blob URL，避免内存泄漏\n    useEffect(() => {\n      return () => {\n        if (blobUrl) URL.revokeObjectURL(blobUrl);\n      };\n    }, [blobUrl]);\n\n    useEffect(() => {\n      if (isLoading || !data) return;\n      let finalSvgString = data;\n\n      // 修复Firefox点击预览mermaid图时宽高为0导致不显示的异常\n      if (\n        typeof window !== 'undefined' &&\n        typeof navigator !== 'undefined' &&\n        navigator.userAgent.includes('Firefox')\n      ) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n        const svgElement = svgDoc.documentElement;\n        if (svgElement && svgElement.hasAttribute('viewBox')) {\n          const viewBox = svgElement.getAttribute('viewBox')!;\n          const viewBoxParts = viewBox.split(' ');\n          if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {\n            svgElement.setAttribute('width', viewBoxParts[2]);\n            svgElement.setAttribute('height', viewBoxParts[3]);\n          }\n          finalSvgString = new XMLSerializer().serializeToString(svgDoc);\n        }\n      }\n\n      // 创建Blob对象\n      const svgBlob = new Blob([finalSvgString], { type: 'image/svg+xml' });\n      // 创建并保存Blob URL\n      const url = URL.createObjectURL(svgBlob);\n      setBlobUrl(url);\n    }, [isLoading, data]);\n\n    const containerStyle = {\n      background: variant === 'filled' ? background : undefined,\n      margin: 0,\n      minWidth: 300,\n      padding: variant === 'borderless' ? 0 : 16,\n      position: 'relative' as const,\n      width: '100%',\n      ...style,\n    };\n\n    if (!blobUrl) {\n      return (\n        <div className={fallbackClassName} style={style}>\n          <div style={{ padding: 16 }}>Loading...</div>\n        </div>\n      );\n    }\n\n    return (\n      <Image\n        alt={'mermaid'}\n        className={className}\n        maxHeight={480}\n        minWidth={300}\n        objectFit={'contain'}\n        ref={ref}\n        src={blobUrl}\n        style={containerStyle}\n        variant={'borderless'}\n        width={'100%'}\n      />\n    );\n  },\n);\n\nStaticMermaid.displayName = 'StaticMermaid';\n\nexport default StaticMermaid;\n"],"mappings":";;;;;;;;AAsBA,MAAM,gBAAgB,MACnB,EAAE,UAAU,WAAW,mBAAmB,KAAK,OAAO,OAAO,aAAa,cAAc;CACvF,MAAM,eAAe,YAAY;CACjC,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CAExD,MAAM,aAAa,cAAc;EAC/B,IAAI,gBAAgB;EACpB,OAAO,cAAc,MAAM,SAAS,KAAK,OAAO,WAAW,CAAC,EAAE;CAChE,GAAG,CAAC,gBAAgB,WAAW,CAAC;CAIhC,MAAM,OAAO,WAAW,cAAc;EACpC,IAFgB,UAAU,WADjB,MAC6B,GAE1B;EACZ,OAAO,iBAAiB,KAAA,IAAY;CACtC,CAAC;CACD,MAAM,YAAY,CAAC;CACnB,MAAM,CAAC,SAAS,cAAc,SAAiB;CAG/C,gBAAgB;EACd,aAAa;GACX,IAAI,SAAS,IAAI,gBAAgB,OAAO;EAC1C;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,gBAAgB;EACd,IAAI,aAAa,CAAC,MAAM;EACxB,IAAI,iBAAiB;EAGrB,IACE,OAAO,WAAW,eAClB,OAAO,cAAc,eACrB,UAAU,UAAU,SAAS,SAAS,GACtC;GAEA,MAAM,SAAS,IADI,UACC,CAAC,CAAC,gBAAgB,MAAM,eAAe;GAC3D,MAAM,aAAa,OAAO;GAC1B,IAAI,cAAc,WAAW,aAAa,SAAS,GAAG;IAEpD,MAAM,eADU,WAAW,aAAa,SACb,CAAC,CAAC,MAAM,GAAG;IACtC,IAAI,MAAM,QAAQ,YAAY,KAAK,aAAa,WAAW,GAAG;KAC5D,WAAW,aAAa,SAAS,aAAa,EAAE;KAChD,WAAW,aAAa,UAAU,aAAa,EAAE;IACnD;IACA,iBAAiB,IAAI,cAAc,CAAC,CAAC,kBAAkB,MAAM;GAC/D;EACF;EAGA,MAAM,UAAU,IAAI,KAAK,CAAC,cAAc,GAAG,EAAE,MAAM,gBAAgB,CAAC;EAEpE,MAAM,MAAM,IAAI,gBAAgB,OAAO;EACvC,WAAW,GAAG;CAChB,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,MAAM,iBAAiB;EACrB,YAAY,YAAY,WAAW,aAAa,KAAA;EAChD,QAAQ;EACR,UAAU;EACV,SAAS,YAAY,eAAe,IAAI;EACxC,UAAU;EACV,OAAO;EACP,GAAG;CACL;CAEA,IAAI,CAAC,SACH,OACE,oBAAC,OAAD;EAAK,WAAW;EAA0B;YACxC,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,GAAG;aAAG;EAAe,CAAA;CACzC,CAAA;CAIT,OACE,oBAAC,OAAD;EACE,KAAK;EACM;EACX,WAAW;EACX,UAAU;EACV,WAAW;EACN;EACL,KAAK;EACL,OAAO;EACP,SAAS;EACT,OAAO;CACR,CAAA;AAEL,CACF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"StaticMermaid.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/StaticMermaid.tsx"],"sourcesContent":["'use client';\n\nimport { type Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport { useMermaid } from '@/hooks/useMermaid';\n\nimport { mermaidThemes } from '../const';\nimport { type SyntaxMermaidProps } from '../type';\nimport MermaidFallback from './MermaidFallback';\nimport MermaidSvg from './MermaidSvg';\n\ninterface StaticMermaidProps {\n  children: string;\n  className?: string;\n  fallbackClassName?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: SyntaxMermaidProps['style'];\n  theme?: SyntaxMermaidProps['theme'];\n  variant?: SyntaxMermaidProps['variant'];\n}\n\nconst StaticMermaid = memo<StaticMermaidProps>(\n  ({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {\n    const safeChildren = children ?? '';\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n\n    const background = useMemo(() => {\n      if (isDefaultTheme) return;\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\n    }, [isDefaultTheme, customTheme]);\n\n    const { svg, error, loading } = useMermaid(safeChildren, {\n      theme: isDefaultTheme ? undefined : customTheme,\n    });\n\n    const containerStyle = {\n      background: variant === 'filled' ? background : undefined,\n      margin: 0,\n      minWidth: 300,\n      padding: variant === 'borderless' ? 0 : 16,\n      position: 'relative' as const,\n      width: '100%',\n      ...style,\n    };\n\n    if (error && !loading) {\n      return (\n        <MermaidFallback className={fallbackClassName} message={error} style={style}>\n          {safeChildren}\n        </MermaidFallback>\n      );\n    }\n\n    if (!svg) {\n      return (\n        <div className={fallbackClassName} style={style}>\n          <div style={{ padding: 16 }}>Loading...</div>\n        </div>\n      );\n    }\n\n    return <MermaidSvg className={className} ref={ref} style={containerStyle} svg={svg} />;\n  },\n);\n\nStaticMermaid.displayName = 'StaticMermaid';\n\nexport default StaticMermaid;\n"],"mappings":";;;;;;;;AAsBA,MAAM,gBAAgB,MACnB,EAAE,UAAU,WAAW,mBAAmB,KAAK,OAAO,OAAO,aAAa,cAAc;CACvF,MAAM,eAAe,YAAY;CACjC,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CAExD,MAAM,aAAa,cAAc;EAC/B,IAAI,gBAAgB;EACpB,OAAO,cAAc,MAAM,SAAS,KAAK,OAAO,WAAW,CAAC,EAAE;CAChE,GAAG,CAAC,gBAAgB,WAAW,CAAC;CAEhC,MAAM,EAAE,KAAK,OAAO,YAAY,WAAW,cAAc,EACvD,OAAO,iBAAiB,KAAA,IAAY,YACtC,CAAC;CAED,MAAM,iBAAiB;EACrB,YAAY,YAAY,WAAW,aAAa,KAAA;EAChD,QAAQ;EACR,UAAU;EACV,SAAS,YAAY,eAAe,IAAI;EACxC,UAAU;EACV,OAAO;EACP,GAAG;CACL;CAEA,IAAI,SAAS,CAAC,SACZ,OACE,oBAAC,iBAAD;EAAiB,WAAW;EAAmB,SAAS;EAAc;EACnE,UAAA;CACc,CAAA;CAIrB,IAAI,CAAC,KACH,OACE,oBAAC,OAAD;EAAK,WAAW;EAA0B;EACxC,UAAA,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,GAAG;GAAG,UAAA;EAAe,CAAA;CACzC,CAAA;CAIT,OAAO,oBAAC,YAAD;EAAuB;EAAgB;EAAK,OAAO;EAAqB;CAAM,CAAA;AACvF,CACF;AAEA,cAAc,cAAc"}

package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs

@@ -1,10 +1,10 @@
 "use client";
-import Image from "../../Image/index.mjs";
 import { mermaidThemes } from "../const.mjs";
+import MermaidFallback from "./MermaidFallback.mjs";
+import MermaidSvg from "./MermaidSvg.mjs";
 import { useStreamMermaid } from "../../hooks/useStreamMermaid.mjs";
-import { memo, useEffect, useId, useMemo, useState } from "react";
+import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { kebabCase } from "es-toolkit/compat";
 //#region src/Mermaid/SyntaxMermaid/StreamMermaid.tsx
 const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {
 	const safeChildren = children ?? "";
@@ -13,40 +13,10 @@ const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style
 		if (isDefaultTheme) return;
 		return mermaidThemes.find((item) => item.id === customTheme)?.background;
 	}, [isDefaultTheme, customTheme]);
-	const data = useStreamMermaid(safeChildren, {
+	const { svg, error, loading } = useStreamMermaid(safeChildren, {
 		enabled: true,
-		id: kebabCase(`mermaid-${useId()}`),
 		theme: isDefaultTheme ? void 0 : customTheme
 	});
-	const isLoading = !data;
-	const [blobUrl, setBlobUrl] = useState();
-	useEffect(() => {
-		return () => {
-			if (blobUrl) URL.revokeObjectURL(blobUrl);
-		};
-	}, [blobUrl]);
-	useEffect(() => {
-		if (isLoading || !data) {
-			setBlobUrl(void 0);
-			return;
-		}
-		let finalSvgString = data;
-		if (typeof window !== "undefined" && typeof navigator !== "undefined" && navigator.userAgent.includes("Firefox")) {
-			const svgDoc = new DOMParser().parseFromString(data, "image/svg+xml");
-			const svgElement = svgDoc.documentElement;
-			if (svgElement && svgElement.hasAttribute("viewBox")) {
-				const viewBoxParts = svgElement.getAttribute("viewBox").split(" ");
-				if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {
-					svgElement.setAttribute("width", viewBoxParts[2]);
-					svgElement.setAttribute("height", viewBoxParts[3]);
-				}
-				finalSvgString = new XMLSerializer().serializeToString(svgDoc);
-			}
-		}
-		const svgBlob = new Blob([finalSvgString], { type: "image/svg+xml" });
-		const url = URL.createObjectURL(svgBlob);
-		setBlobUrl(url);
-	}, [isLoading, data]);
 	const containerStyle = {
 		background: variant === "filled" ? background : void 0,
 		margin: 0,
@@ -56,7 +26,13 @@ const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style
 		width: "100%",
 		...style
 	};
-	if (!blobUrl) return /* @__PURE__ */ jsx("div", {
+	if (error && !loading) return /* @__PURE__ */ jsx(MermaidFallback, {
+		className: fallbackClassName,
+		message: error,
+		style,
+		children: safeChildren
+	});
+	if (!svg) return /* @__PURE__ */ jsx("div", {
 		className: fallbackClassName,
 		style,
 		children: /* @__PURE__ */ jsx("div", {
@@ -64,17 +40,11 @@ const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style
 			children: "Rendering..."
 		})
 	});
-	return /* @__PURE__ */ jsx(Image, {
-		alt: "mermaid",
+	return /* @__PURE__ */ jsx(MermaidSvg, {
 		className,
-		maxHeight: 480,
-		minWidth: 300,
-		objectFit: "contain",
 		ref,
-		src: blobUrl,
 		style: containerStyle,
-		variant: "borderless",
-		width: "100%"
+		svg
 	});
 });
 StreamMermaid.displayName = "StreamMermaid";

package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StreamMermaid.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/StreamMermaid.tsx"],"sourcesContent":["'use client';\n\nimport { kebabCase } from 'es-toolkit/compat';\nimport { type Ref } from 'react';\nimport { memo, useEffect, useId, useMemo, useState } from 'react';\n\nimport { useStreamMermaid } from '@/hooks/useStreamMermaid';\nimport Image from '@/Image';\n\nimport { mermaidThemes } from '../const';\nimport { type SyntaxMermaidProps } from '../type';\n\ninterface StreamMermaidProps {\n  children: string;\n  className?: string;\n  fallbackClassName?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: SyntaxMermaidProps['style'];\n  theme?: SyntaxMermaidProps['theme'];\n  variant?: SyntaxMermaidProps['variant'];\n}\n\nconst StreamMermaid = memo<StreamMermaidProps>(\n  ({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {\n    const safeChildren = children ?? '';\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n\n    const background = useMemo(() => {\n      if (isDefaultTheme) return;\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\n    }, [isDefaultTheme, customTheme]);\n\n    const id = useId();\n    const mermaidId = kebabCase(`mermaid-${id}`);\n    const data = useStreamMermaid(safeChildren, {\n      enabled: true,\n      id: mermaidId,\n      theme: isDefaultTheme ? undefined : customTheme,\n    });\n    const isLoading = !data;\n    const [blobUrl, setBlobUrl] = useState<string>();\n\n    // 组件卸载时清理 Blob URL，避免内存泄漏\n    useEffect(() => {\n      return () => {\n        if (blobUrl) URL.revokeObjectURL(blobUrl);\n      };\n    }, [blobUrl]);\n\n    useEffect(() => {\n      if (isLoading || !data) {\n        // Clear blob URL when loading or no data\n        setBlobUrl(undefined);\n        return;\n      }\n\n      let finalSvgString = data;\n\n      // 修复Firefox点击预览mermaid图时宽高为0导致不显示的异常\n      if (\n        typeof window !== 'undefined' &&\n        typeof navigator !== 'undefined' &&\n        navigator.userAgent.includes('Firefox')\n      ) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n        const svgElement = svgDoc.documentElement;\n        if (svgElement && svgElement.hasAttribute('viewBox')) {\n          const viewBox = svgElement.getAttribute('viewBox')!;\n          const viewBoxParts = viewBox.split(' ');\n          if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {\n            svgElement.setAttribute('width', viewBoxParts[2]);\n            svgElement.setAttribute('height', viewBoxParts[3]);\n          }\n          finalSvgString = new XMLSerializer().serializeToString(svgDoc);\n        }\n      }\n\n      // 创建Blob对象\n      const svgBlob = new Blob([finalSvgString], { type: 'image/svg+xml' });\n      // 创建并保存Blob URL\n      const url = URL.createObjectURL(svgBlob);\n      setBlobUrl(url);\n    }, [isLoading, data]);\n\n    const containerStyle = {\n      background: variant === 'filled' ? background : undefined,\n      margin: 0,\n      minWidth: 300,\n      padding: variant === 'borderless' ? 0 : 16,\n      position: 'relative' as const,\n      width: '100%',\n      ...style,\n    };\n\n    if (!blobUrl) {\n      return (\n        <div className={fallbackClassName} style={style}>\n          <div style={{ padding: 16 }}>Rendering...</div>\n        </div>\n      );\n    }\n\n    return (\n      <Image\n        alt={'mermaid'}\n        className={className}\n        maxHeight={480}\n        minWidth={300}\n        objectFit={'contain'}\n        ref={ref}\n        src={blobUrl}\n        style={containerStyle}\n        variant={'borderless'}\n        width={'100%'}\n      />\n    );\n  },\n);\n\nStreamMermaid.displayName = 'StreamMermaid';\n\nexport default StreamMermaid;\n"],"mappings":";;;;;;;;AAsBA,MAAM,gBAAgB,MACnB,EAAE,UAAU,WAAW,mBAAmB,KAAK,OAAO,OAAO,aAAa,cAAc;CACvF,MAAM,eAAe,YAAY;CACjC,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CAExD,MAAM,aAAa,cAAc;EAC/B,IAAI,gBAAgB;EACpB,OAAO,cAAc,MAAM,SAAS,KAAK,OAAO,WAAW,CAAC,EAAE;CAChE,GAAG,CAAC,gBAAgB,WAAW,CAAC;CAIhC,MAAM,OAAO,iBAAiB,cAAc;EAC1C,SAAS;EACT,IAHgB,UAAU,WADjB,MAC6B,GAG1B;EACZ,OAAO,iBAAiB,KAAA,IAAY;CACtC,CAAC;CACD,MAAM,YAAY,CAAC;CACnB,MAAM,CAAC,SAAS,cAAc,SAAiB;CAG/C,gBAAgB;EACd,aAAa;GACX,IAAI,SAAS,IAAI,gBAAgB,OAAO;EAC1C;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,gBAAgB;EACd,IAAI,aAAa,CAAC,MAAM;GAEtB,WAAW,KAAA,CAAS;GACpB;EACF;EAEA,IAAI,iBAAiB;EAGrB,IACE,OAAO,WAAW,eAClB,OAAO,cAAc,eACrB,UAAU,UAAU,SAAS,SAAS,GACtC;GAEA,MAAM,SAAS,IADI,UACC,CAAC,CAAC,gBAAgB,MAAM,eAAe;GAC3D,MAAM,aAAa,OAAO;GAC1B,IAAI,cAAc,WAAW,aAAa,SAAS,GAAG;IAEpD,MAAM,eADU,WAAW,aAAa,SACb,CAAC,CAAC,MAAM,GAAG;IACtC,IAAI,MAAM,QAAQ,YAAY,KAAK,aAAa,WAAW,GAAG;KAC5D,WAAW,aAAa,SAAS,aAAa,EAAE;KAChD,WAAW,aAAa,UAAU,aAAa,EAAE;IACnD;IACA,iBAAiB,IAAI,cAAc,CAAC,CAAC,kBAAkB,MAAM;GAC/D;EACF;EAGA,MAAM,UAAU,IAAI,KAAK,CAAC,cAAc,GAAG,EAAE,MAAM,gBAAgB,CAAC;EAEpE,MAAM,MAAM,IAAI,gBAAgB,OAAO;EACvC,WAAW,GAAG;CAChB,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,MAAM,iBAAiB;EACrB,YAAY,YAAY,WAAW,aAAa,KAAA;EAChD,QAAQ;EACR,UAAU;EACV,SAAS,YAAY,eAAe,IAAI;EACxC,UAAU;EACV,OAAO;EACP,GAAG;CACL;CAEA,IAAI,CAAC,SACH,OACE,oBAAC,OAAD;EAAK,WAAW;EAA0B;YACxC,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,GAAG;aAAG;EAAiB,CAAA;CAC3C,CAAA;CAIT,OACE,oBAAC,OAAD;EACE,KAAK;EACM;EACX,WAAW;EACX,UAAU;EACV,WAAW;EACN;EACL,KAAK;EACL,OAAO;EACP,SAAS;EACT,OAAO;CACR,CAAA;AAEL,CACF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"StreamMermaid.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/StreamMermaid.tsx"],"sourcesContent":["'use client';\n\nimport { type Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport { useStreamMermaid } from '@/hooks/useStreamMermaid';\n\nimport { mermaidThemes } from '../const';\nimport { type SyntaxMermaidProps } from '../type';\nimport MermaidFallback from './MermaidFallback';\nimport MermaidSvg from './MermaidSvg';\n\ninterface StreamMermaidProps {\n  children: string;\n  className?: string;\n  fallbackClassName?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: SyntaxMermaidProps['style'];\n  theme?: SyntaxMermaidProps['theme'];\n  variant?: SyntaxMermaidProps['variant'];\n}\n\nconst StreamMermaid = memo<StreamMermaidProps>(\n  ({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {\n    const safeChildren = children ?? '';\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n\n    const background = useMemo(() => {\n      if (isDefaultTheme) return;\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\n    }, [isDefaultTheme, customTheme]);\n\n    const { svg, error, loading } = useStreamMermaid(safeChildren, {\n      enabled: true,\n      theme: isDefaultTheme ? undefined : customTheme,\n    });\n\n    const containerStyle = {\n      background: variant === 'filled' ? background : undefined,\n      margin: 0,\n      minWidth: 300,\n      padding: variant === 'borderless' ? 0 : 16,\n      position: 'relative' as const,\n      width: '100%',\n      ...style,\n    };\n\n    if (error && !loading) {\n      return (\n        <MermaidFallback className={fallbackClassName} message={error} style={style}>\n          {safeChildren}\n        </MermaidFallback>\n      );\n    }\n\n    if (!svg) {\n      return (\n        <div className={fallbackClassName} style={style}>\n          <div style={{ padding: 16 }}>Rendering...</div>\n        </div>\n      );\n    }\n\n    return <MermaidSvg className={className} ref={ref} style={containerStyle} svg={svg} />;\n  },\n);\n\nStreamMermaid.displayName = 'StreamMermaid';\n\nexport default StreamMermaid;\n"],"mappings":";;;;;;;;AAsBA,MAAM,gBAAgB,MACnB,EAAE,UAAU,WAAW,mBAAmB,KAAK,OAAO,OAAO,aAAa,cAAc;CACvF,MAAM,eAAe,YAAY;CACjC,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CAExD,MAAM,aAAa,cAAc;EAC/B,IAAI,gBAAgB;EACpB,OAAO,cAAc,MAAM,SAAS,KAAK,OAAO,WAAW,CAAC,EAAE;CAChE,GAAG,CAAC,gBAAgB,WAAW,CAAC;CAEhC,MAAM,EAAE,KAAK,OAAO,YAAY,iBAAiB,cAAc;EAC7D,SAAS;EACT,OAAO,iBAAiB,KAAA,IAAY;CACtC,CAAC;CAED,MAAM,iBAAiB;EACrB,YAAY,YAAY,WAAW,aAAa,KAAA;EAChD,QAAQ;EACR,UAAU;EACV,SAAS,YAAY,eAAe,IAAI;EACxC,UAAU;EACV,OAAO;EACP,GAAG;CACL;CAEA,IAAI,SAAS,CAAC,SACZ,OACE,oBAAC,iBAAD;EAAiB,WAAW;EAAmB,SAAS;EAAc;EACnE,UAAA;CACc,CAAA;CAIrB,IAAI,CAAC,KACH,OACE,oBAAC,OAAD;EAAK,WAAW;EAA0B;EACxC,UAAA,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,GAAG;GAAG,UAAA;EAAiB,CAAA;CAC3C,CAAA;CAIT,OAAO,oBAAC,YAAD;EAAuB;EAAgB;EAAK,OAAO;EAAqB;CAAM,CAAA;AACvF,CACF;AAEA,cAAc,cAAc"}

package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs

@@ -0,0 +1,52 @@
+//#region src/Mermaid/SyntaxMermaid/prepareInlineSvg.ts
+/**
+* Root custom properties beautiful-mermaid reads; everything else in its
+* stylesheet is derived from these via color-mix().
+*/
+const MERMAID_ROOT_VARS = [
+	"--bg",
+	"--fg",
+	"--line",
+	"--accent",
+	"--muted",
+	"--surface",
+	"--border"
+];
+const styleBlockPattern = /<style>([\s\S]*?)<\/style>/;
+const scopeCssSelectors = (css, scope) => css.replaceAll(/(^|})([^{}@]+)\{/g, (_match, tail, selectors) => {
+	return `${tail}\n${selectors.split(",").map((selector) => selector.trim()).filter(Boolean).map((selector) => selector === "svg" ? scope : `${scope} ${selector}`).join(", ")} {`;
+});
+/**
+* A <style> element inside inline SVG applies to the whole document, so the
+* generated rules must be scoped to this diagram before being injected. The
+* font @import is dropped because inline rendering would actually issue the
+* Google Fonts request that an <img>-loaded SVG silently blocks, and the bare
+* `text` rule is dropped so page CSS can supply the theme font instead.
+*/
+const prepareInlineMermaidSvg = (svg, scopeId) => {
+	if (!svg) return svg;
+	return svg.replace(/<svg\b/, `<svg id="${scopeId}"`).replace(styleBlockPattern, (_match, css) => {
+		const withoutFontRule = css.replaceAll(/@import[^;]*;/g, "").replaceAll(/(^|})\s*text\s*\{[^{}]*\}/g, "$1");
+		return `<style>${scopeCssSelectors(withoutFontRule, `#${scopeId}`)}</style>`;
+	});
+};
+/**
+* Inline SVG resolves `var(--ant-*)` from the page, but a Blob-loaded copy is an
+* isolated document with no access to them, so the root variables are baked in
+* as literal values before serializing for preview or download.
+*/
+const toStandaloneSvgString = (element) => {
+	const clone = element.cloneNode(true);
+	const computed = globalThis.getComputedStyle(element);
+	for (const name of MERMAID_ROOT_VARS) {
+		const value = computed.getPropertyValue(name).trim();
+		if (value) clone.style.setProperty(name, value);
+	}
+	const fontFamily = computed.fontFamily;
+	if (fontFamily) clone.style.setProperty("font-family", fontFamily);
+	return new XMLSerializer().serializeToString(clone);
+};
+//#endregion
+export { MERMAID_ROOT_VARS, prepareInlineMermaidSvg, toStandaloneSvgString };
+
+//# sourceMappingURL=prepareInlineSvg.mjs.map

package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"prepareInlineSvg.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/prepareInlineSvg.ts"],"sourcesContent":["/**\n * Root custom properties beautiful-mermaid reads; everything else in its\n * stylesheet is derived from these via color-mix().\n */\nexport const MERMAID_ROOT_VARS = [\n  '--bg',\n  '--fg',\n  '--line',\n  '--accent',\n  '--muted',\n  '--surface',\n  '--border',\n];\n\nconst styleBlockPattern = /<style>([\\s\\S]*?)<\\/style>/;\n\nconst scopeCssSelectors = (css: string, scope: string): string =>\n  css.replaceAll(/(^|})([^{}@]+)\\{/g, (_match, tail: string, selectors: string) => {\n    const scoped = selectors\n      .split(',')\n      .map((selector) => selector.trim())\n      .filter(Boolean)\n      // The generated sheet targets `svg` for the root itself, not a descendant\n      .map((selector) => (selector === 'svg' ? scope : `${scope} ${selector}`))\n      .join(', ');\n\n    return `${tail}\\n${scoped} {`;\n  });\n\n/**\n * A <style> element inside inline SVG applies to the whole document, so the\n * generated rules must be scoped to this diagram before being injected. The\n * font @import is dropped because inline rendering would actually issue the\n * Google Fonts request that an <img>-loaded SVG silently blocks, and the bare\n * `text` rule is dropped so page CSS can supply the theme font instead.\n */\nexport const prepareInlineMermaidSvg = (svg: string, scopeId: string): string => {\n  if (!svg) return svg;\n\n  const withId = svg.replace(/<svg\\b/, `<svg id=\"${scopeId}\"`);\n\n  return withId.replace(styleBlockPattern, (_match, css: string) => {\n    const withoutImports = css.replaceAll(/@import[^;]*;/g, '');\n    const withoutFontRule = withoutImports.replaceAll(/(^|})\\s*text\\s*\\{[^{}]*\\}/g, '$1');\n\n    return `<style>${scopeCssSelectors(withoutFontRule, `#${scopeId}`)}</style>`;\n  });\n};\n\n/**\n * Inline SVG resolves `var(--ant-*)` from the page, but a Blob-loaded copy is an\n * isolated document with no access to them, so the root variables are baked in\n * as literal values before serializing for preview or download.\n */\nexport const toStandaloneSvgString = (element: SVGElement): string => {\n  const clone = element.cloneNode(true) as SVGElement;\n  const computed = globalThis.getComputedStyle(element);\n\n  for (const name of MERMAID_ROOT_VARS) {\n    const value = computed.getPropertyValue(name).trim();\n    if (value) clone.style.setProperty(name, value);\n  }\n\n  const fontFamily = computed.fontFamily;\n  if (fontFamily) clone.style.setProperty('font-family', fontFamily);\n\n  return new XMLSerializer().serializeToString(clone);\n};\n"],"mappings":";;;;;AAIA,MAAa,oBAAoB;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB,KAAa,UACtC,IAAI,WAAW,sBAAsB,QAAQ,MAAc,cAAsB;CAS/E,OAAO,GAAG,KAAK,IARA,UACZ,MAAM,GAAG,CAAC,CACV,KAAK,aAAa,SAAS,KAAK,CAAC,CAAC,CAClC,OAAO,OAAO,CAAC,CAEf,KAAK,aAAc,aAAa,QAAQ,QAAQ,GAAG,MAAM,GAAG,UAAW,CAAC,CACxE,KAAK,IAEgB,EAAE;AAC5B,CAAC;;;;;;;;AASH,MAAa,2BAA2B,KAAa,YAA4B;CAC/E,IAAI,CAAC,KAAK,OAAO;CAIjB,OAFe,IAAI,QAAQ,UAAU,YAAY,QAAQ,EAE7C,CAAC,CAAC,QAAQ,oBAAoB,QAAQ,QAAgB;EAEhE,MAAM,kBADiB,IAAI,WAAW,kBAAkB,EACnB,CAAC,CAAC,WAAW,8BAA8B,IAAI;EAEpF,OAAO,UAAU,kBAAkB,iBAAiB,IAAI,SAAS,EAAE;CACrE,CAAC;AACH;;;;;;AAOA,MAAa,yBAAyB,YAAgC;CACpE,MAAM,QAAQ,QAAQ,UAAU,IAAI;CACpC,MAAM,WAAW,WAAW,iBAAiB,OAAO;CAEpD,KAAK,MAAM,QAAQ,mBAAmB;EACpC,MAAM,QAAQ,SAAS,iBAAiB,IAAI,CAAC,CAAC,KAAK;EACnD,IAAI,OAAO,MAAM,MAAM,YAAY,MAAM,KAAK;CAChD;CAEA,MAAM,aAAa,SAAS;CAC5B,IAAI,YAAY,MAAM,MAAM,YAAY,eAAe,UAAU;CAEjE,OAAO,IAAI,cAAc,CAAC,CAAC,kBAAkB,KAAK;AACpD"}

package/es/Mermaid/SyntaxMermaid/prepareMermaidSvg.mjs

@@ -0,0 +1,20 @@
+//#region src/Mermaid/SyntaxMermaid/prepareMermaidSvg.ts
+const voidElementPattern = new RegExp(`<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)((?:\\s[^>]*?)?)\\s*/?>`, "gi");
+const ensureXmlSafeVoidElements = (svg) => svg.replaceAll(voidElementPattern, "<$1$2/>");
+const applyFirefoxSizeFix = (svg) => {
+	if (typeof window === "undefined" || typeof navigator === "undefined" || !navigator.userAgent.includes("Firefox") || typeof DOMParser === "undefined") return svg;
+	const svgDoc = new DOMParser().parseFromString(svg, "image/svg+xml");
+	if (svgDoc.querySelector("parsererror")) return svg;
+	const svgElement = svgDoc.documentElement;
+	if (!svgElement || svgElement.localName !== "svg" || !svgElement.hasAttribute("viewBox")) return svg;
+	const viewBoxParts = svgElement.getAttribute("viewBox").split(" ");
+	if (viewBoxParts.length !== 4) return svg;
+	svgElement.setAttribute("width", viewBoxParts[2]);
+	svgElement.setAttribute("height", viewBoxParts[3]);
+	return new XMLSerializer().serializeToString(svgDoc);
+};
+const prepareMermaidSvgString = (svg) => applyFirefoxSizeFix(ensureXmlSafeVoidElements(svg));
+//#endregion
+export { prepareMermaidSvgString };
+
+//# sourceMappingURL=prepareMermaidSvg.mjs.map

package/es/Mermaid/SyntaxMermaid/prepareMermaidSvg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"prepareMermaidSvg.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/prepareMermaidSvg.ts"],"sourcesContent":["const VOID_ELEMENTS = 'area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr';\nconst voidElementPattern = new RegExp(`<(${VOID_ELEMENTS})((?:\\\\s[^>]*?)?)\\\\s*/?>`, 'gi');\n\n// Mermaid serializes HTML labels (foreignObject) with HTML rules, leaving void elements\n// like <br> unclosed. When that SVG string is loaded as a standalone image/svg+xml Blob,\n// the browser parses it as strict XML, rejects the unclosed tag, and fails the whole image.\nconst ensureXmlSafeVoidElements = (svg: string): string =>\n  svg.replaceAll(voidElementPattern, '<$1$2/>');\n\nconst applyFirefoxSizeFix = (svg: string): string => {\n  if (\n    typeof window === 'undefined' ||\n    typeof navigator === 'undefined' ||\n    !navigator.userAgent.includes('Firefox') ||\n    typeof DOMParser === 'undefined'\n  ) {\n    return svg;\n  }\n\n  const svgDoc = new DOMParser().parseFromString(svg, 'image/svg+xml');\n  if (svgDoc.querySelector('parsererror')) return svg;\n\n  const svgElement = svgDoc.documentElement;\n  if (!svgElement || svgElement.localName !== 'svg' || !svgElement.hasAttribute('viewBox')) {\n    return svg;\n  }\n\n  const viewBoxParts = svgElement.getAttribute('viewBox')!.split(' ');\n  if (viewBoxParts.length !== 4) return svg;\n\n  svgElement.setAttribute('width', viewBoxParts[2]!);\n  svgElement.setAttribute('height', viewBoxParts[3]!);\n  return new XMLSerializer().serializeToString(svgDoc);\n};\n\nexport const prepareMermaidSvgString = (svg: string): string =>\n  applyFirefoxSizeFix(ensureXmlSafeVoidElements(svg));\n"],"mappings":";AACA,MAAM,qBAAqB,IAAI,OAAO,kGAA8C,IAAI;AAKxF,MAAM,6BAA6B,QACjC,IAAI,WAAW,oBAAoB,SAAS;AAE9C,MAAM,uBAAuB,QAAwB;CACnD,IACE,OAAO,WAAW,eAClB,OAAO,cAAc,eACrB,CAAC,UAAU,UAAU,SAAS,SAAS,KACvC,OAAO,cAAc,aAErB,OAAO;CAGT,MAAM,SAAS,IAAI,UAAU,CAAC,CAAC,gBAAgB,KAAK,eAAe;CACnE,IAAI,OAAO,cAAc,aAAa,GAAG,OAAO;CAEhD,MAAM,aAAa,OAAO;CAC1B,IAAI,CAAC,cAAc,WAAW,cAAc,SAAS,CAAC,WAAW,aAAa,SAAS,GACrF,OAAO;CAGT,MAAM,eAAe,WAAW,aAAa,SAAS,CAAC,CAAE,MAAM,GAAG;CAClE,IAAI,aAAa,WAAW,GAAG,OAAO;CAEtC,WAAW,aAAa,SAAS,aAAa,EAAG;CACjD,WAAW,aAAa,UAAU,aAAa,EAAG;CAClD,OAAO,IAAI,cAAc,CAAC,CAAC,kBAAkB,MAAM;AACrD;AAEA,MAAa,2BAA2B,QACtC,oBAAoB,0BAA0B,GAAG,CAAC"}

package/es/Mermaid/SyntaxMermaid/style.mjs

@@ -23,6 +23,17 @@ const styles = createStaticStyles(({ css, cssVar }) => {
           width: 100%;
           height: auto;
         }
+
+        svg {
+          display: block;
+          width: 100%;
+          height: auto;
+          max-height: 480px;
+        }
+
+        svg text {
+          font-family: ${cssVar.fontFamily};
+        }
       `),
 		noBackground: css`
       img {

package/es/Mermaid/SyntaxMermaid/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/style.ts"],"sourcesContent":["import { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst fadeIn = keyframes`\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    animated: css`\n      img {\n        opacity: 1;\n        animation: ${fadeIn} 0.5s ease-in-out;\n      }\n    `,\n\n    mermaid: cx(\n      'ant-mermaid-mermaid',\n      css`\n        img {\n          display: block;\n          width: 100%;\n          height: auto;\n        }\n      `,\n    ),\n\n    noBackground: css`\n      img {\n        background: transparent !important;\n      }\n    `,\n\n    noPadding: css`\n      padding: 0;\n    `,\n\n    padding: css`\n      padding: 16px;\n    `,\n\n    root: css`\n      direction: ltr;\n      margin: 0;\n      padding: 0;\n      text-align: start;\n    `,\n\n    unmermaid: css`\n      color: ${cssVar.colorTextDescription};\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    animated: false,\n    mermaid: true,\n    showBackground: false,\n    variant: 'borderless',\n  },\n\n  variants: {\n    mermaid: {\n      false: styles.unmermaid,\n      true: styles.mermaid,\n    },\n    showBackground: {\n      false: styles.noBackground,\n      true: null,\n    },\n    animated: {\n      true: styles.animated,\n      false: null,\n    },\n    variant: {\n      filled: styles.padding,\n      outlined: styles.padding,\n      borderless: styles.noPadding,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,UAAU,GAAG;;;qBAGI,OAAO;;;EAIxB,SAAS,GACP,uBACA,GAAG;;;;;;OAOL;EAEA,cAAc,GAAG;;;;;EAMjB,WAAW,GAAG;;;EAId,SAAS,GAAG;;;EAIZ,MAAM,GAAG;;;;;;EAOT,WAAW,GAAG;eACH,OAAO,qBAAqB;;CAEzC;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,gBAAgB;EAChB,SAAS;CACX;CAEA,UAAU;EACR,SAAS;GACP,OAAO,OAAO;GACd,MAAM,OAAO;EACf;EACA,gBAAgB;GACd,OAAO,OAAO;GACd,MAAM;EACR;EACA,UAAU;GACR,MAAM,OAAO;GACb,OAAO;EACT;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/style.ts"],"sourcesContent":["import { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst fadeIn = keyframes`\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    animated: css`\n      img {\n        opacity: 1;\n        animation: ${fadeIn} 0.5s ease-in-out;\n      }\n    `,\n\n    mermaid: cx(\n      'ant-mermaid-mermaid',\n      css`\n        img {\n          display: block;\n          width: 100%;\n          height: auto;\n        }\n\n        svg {\n          display: block;\n          width: 100%;\n          height: auto;\n          max-height: 480px;\n        }\n\n        svg text {\n          font-family: ${cssVar.fontFamily};\n        }\n      `,\n    ),\n\n    noBackground: css`\n      img {\n        background: transparent !important;\n      }\n    `,\n\n    noPadding: css`\n      padding: 0;\n    `,\n\n    padding: css`\n      padding: 16px;\n    `,\n\n    root: css`\n      direction: ltr;\n      margin: 0;\n      padding: 0;\n      text-align: start;\n    `,\n\n    unmermaid: css`\n      color: ${cssVar.colorTextDescription};\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    animated: false,\n    mermaid: true,\n    showBackground: false,\n    variant: 'borderless',\n  },\n\n  variants: {\n    mermaid: {\n      false: styles.unmermaid,\n      true: styles.mermaid,\n    },\n    showBackground: {\n      false: styles.noBackground,\n      true: null,\n    },\n    animated: {\n      true: styles.animated,\n      false: null,\n    },\n    variant: {\n      filled: styles.padding,\n      outlined: styles.padding,\n      borderless: styles.noPadding,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,UAAU,GAAG;;;qBAGI,OAAO;;;EAIxB,SAAS,GACP,uBACA,GAAG;;;;;;;;;;;;;;;yBAegB,OAAO,WAAW;;OAGvC;EAEA,cAAc,GAAG;;;;;EAMjB,WAAW,GAAG;;;EAId,SAAS,GAAG;;;EAIZ,MAAM,GAAG;;;;;;EAOT,WAAW,GAAG;eACH,OAAO,qBAAqB;;CAEzC;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,gBAAgB;EAChB,SAAS;CACX;CAEA,UAAU;EACR,SAAS;GACP,OAAO,OAAO;GACd,MAAM,OAAO;EACf;EACA,gBAAgB;GACd,OAAO,OAAO;GACd,MAAM;EACR;EACA,UAAU;GACR,MAAM,OAAO;GACb,OAAO;EACT;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;CACF;AACF,CAAC"}