@lobehub/ui 6.0.0-beta.6 → 6.0.0-beta.8

package/es/HtmlPreview/HtmlPreview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HtmlPreview.mjs","names":["Flexbox"],"sources":["../../src/HtmlPreview/HtmlPreview.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Download, Expand } 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 { actionsHoverCls, rootClassName, rootStyles } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport Segmented, { type SegmentedStyles } from '@/Segmented';\nimport Spin from '@/Spin';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport { styles } from './style';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\nconst segmentedStyles: SegmentedStyles = {\n  indicator: { borderRadius: cssVar.borderRadiusXS },\n  item: {\n    borderRadius: cssVar.borderRadiusXS,\n    fontSize: 14,\n    fontWeight: 400,\n    height: 23,\n    paddingInline: 7,\n  },\n  root: { borderRadius: cssVar.borderRadiusSM, gap: 0, padding: 2 },\n};\n\nconst themeBackground = (theme?: 'light' | 'dark') => {\n  if (theme === 'dark') return '#1f1f1f';\n  if (theme === 'light') return '#ffffff';\n  return undefined;\n};\n\nconst downloadHtml = async (content: string, fileName: string) => {\n  const blob = new Blob([content], { type: 'text/html;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  try {\n    await downloadBlob(url, fileName);\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nconst HtmlPreview = memo<HtmlPreviewProps>(\n  ({\n    actionIconSize,\n    actionsRender,\n    animated,\n    bodyRender,\n    children,\n    className,\n    classNames,\n    copyable = true,\n    defaultHeight,\n    defaultMode = 'preview',\n    downloadable = true,\n    fileName,\n    language = 'html',\n    onExpand,\n    sandbox,\n    shadow,\n    streamingMode = 'auto',\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    // `fullFeatured` / `showLanguage` / `defaultExpand` are accepted for API\n    // compatibility with the rest of the Pre family but no longer drive a\n    // separate header — the inline toolbar is always rendered.\n    fullFeatured: _fullFeatured,\n    showLanguage: _showLanguage,\n    defaultExpand: _defaultExpand,\n    ...rest\n  }) => {\n    const trimmedChildren = useMemo(() => (children || '').trim(), [children]);\n    const isFragment = useMemo(() => !isFullHtmlDocument(trimmedChildren), [trimmedChildren]);\n\n    // Per-session tracking. Reset on `animated` edge false → true.\n    const [scriptLocked, setScriptLocked] = useState(false);\n    const [headClosed, setHeadClosed] = useState(false);\n    const [liveCommitted, setLiveCommitted] = useState(false);\n    const prevAnimatedRef = useRef(animated);\n    const lastCommitRef = useRef(0);\n    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const latestContentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      latestContentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n    useEffect(() => {\n      if (animated && !prevAnimatedRef.current) {\n        setScriptLocked(false);\n        setHeadClosed(false);\n        setLiveCommitted(false);\n        lastCommitRef.current = 0;\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n      }\n      prevAnimatedRef.current = animated;\n    }, [animated]);\n\n    // Sticky script detection: once a `<script>` appears in this session,\n    // auto mode locks into defer.\n    useEffect(() => {\n      if (animated && !scriptLocked && containsScript(trimmedChildren)) {\n        setScriptLocked(true);\n      }\n    }, [trimmedChildren, animated, scriptLocked]);\n\n    // Track whether the head section has closed. Until it does, the iframe\n    // would render either nothing or invalid HTML (style tag mid-stream).\n    // After `</head>` (or `</style>` as a fallback for documents that skip\n    // an explicit head close) we know the visual baseline is locked in.\n    useEffect(() => {\n      if (animated && !headClosed) {\n        const lowered = trimmedChildren.toLowerCase();\n        if (lowered.includes('</head>') || lowered.includes('</style>')) {\n          setHeadClosed(true);\n        }\n      }\n    }, [trimmedChildren, animated, headClosed]);\n\n    // Two-phase streaming commit:\n    //   Phase 1 (head still streaming) — don't mount iframe at all. There's\n    //     nothing meaningful to render and styles aren't applied yet.\n    //   Phase 2 (head closed, body streaming) — commit at most once every\n    //     ~250ms. Important: this is a TRUE throttle, not a debounce. The\n    //     pending timer is held in a ref so it survives effect re-runs;\n    //     when it fires it commits the latest content (via another ref)\n    //     and clears itself, allowing a fresh schedule. If chunks come in\n    //     faster than the throttle window (which they do at ~50/sec) we\n    //     still get a commit every 250ms instead of waiting for streaming\n    //     to pause.\n    //   On streaming end → flush immediately, cancel any pending timer.\n    const [throttledContent, setThrottledContent] = useState(trimmedChildren);\n    useEffect(() => {\n      if (!animated) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = Date.now();\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n      if (!headClosed) return;\n\n      const throttleMs = 250;\n      const now = Date.now();\n      const elapsed = now - lastCommitRef.current;\n\n      if (elapsed >= throttleMs) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = now;\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n\n      // Schedule a future commit, but only if one isn't already pending —\n      // every chunk arrival re-runs this effect; we don't want to reset\n      // the timer each time (that's debounce, and during continuous\n      // streaming it would never fire).\n      if (pendingTimerRef.current === null) {\n        pendingTimerRef.current = setTimeout(() => {\n          lastCommitRef.current = Date.now();\n          pendingTimerRef.current = null;\n          setThrottledContent(latestContentRef.current);\n        }, throttleMs - elapsed);\n      }\n    }, [trimmedChildren, animated, headClosed]);\n    useEffect(\n      () => () => {\n        if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);\n      },\n      [],\n    );\n\n    // Live-streaming commitment is sticky for the rest of the session. The\n    // decision is made the moment the head seals:\n    //   • `live` → commit unconditionally\n    //   • `auto` → commit only if no `<script>` has appeared yet (script-\n    //     bearing docs go down the defer path to avoid running setup() on\n    //     partial source)\n    //   • `defer` → never commit; wait for `</html>`\n    // Sticky-ness matters for `auto`: if a `<script>` arrives *after* the\n    // head has already closed and we've started live-streaming, we keep\n    // streaming rather than yanking the rendered content back into a\n    // loading state mid-flight. The shell→static swap at end of streaming\n    // re-runs the document cleanly anyway.\n    useEffect(() => {\n      if (!animated || liveCommitted || !headClosed) return;\n      if (streamingMode === 'live' || (streamingMode === 'auto' && !scriptLocked)) {\n        setLiveCommitted(true);\n      }\n    }, [animated, headClosed, liveCommitted, scriptLocked, streamingMode]);\n\n    // Streaming gate. The iframe can mount in three situations:\n    //   1. content is no longer animating\n    //   2. `</html>` has arrived\n    //   3. live streaming has been committed this session\n    const isStable = !animated || isHtmlContentClosed(trimmedChildren) || liveCommitted;\n\n    const [mode, setMode] = useState<HtmlPreviewMode>(defaultMode);\n\n    // Fragments cannot meaningfully render in preview — force source view.\n    // For streaming content that's not yet stable we keep the user's mode\n    // choice and substitute a loading placeholder in the body instead, so\n    // the toggle UI doesn't flip back and forth as content arrives.\n    const effectiveMode: HtmlPreviewMode = isFragment ? 'source' : mode;\n\n    const contentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      contentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n\n    // Tail-follow the streaming source visible during Phase 1 — anchor\n    // the scroll position to the latest tokens so a slow model's output\n    // doesn't sit pinned to the document head while the user waits.\n    const loadingSourceRef = useRef<HTMLDivElement | null>(null);\n    useEffect(() => {\n      if (isStable) return;\n      const node = loadingSourceRef.current;\n      if (!node) return;\n      node.scrollTop = node.scrollHeight;\n    }, [trimmedChildren, isStable]);\n\n    const getCopyContent = useCallback(() => contentRef.current, []);\n\n    const handleDownload = useCallback(() => {\n      void downloadHtml(contentRef.current, fileName || 'preview.html');\n    }, [fileName]);\n\n    const handleExpand = useCallback(() => {\n      onExpand?.(contentRef.current);\n    }, [onExpand]);\n\n    const background = themeBackground(theme);\n\n    const sourceBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          language={'html'}\n          style={{ height: '100%', ...customStyles?.content }}\n          variant={variant}\n        >\n          {trimmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [animated, classNames?.content, customStyles?.content, trimmedChildren, variant],\n    );\n\n    const iframeBody = useMemo(\n      () => (\n        <HtmlPreviewIframe\n          animated={animated}\n          background={background}\n          className={classNames?.iframe}\n          content={throttledContent}\n          defaultHeight={defaultHeight}\n          sandbox={sandbox}\n          style={customStyles?.iframe}\n        />\n      ),\n      [\n        background,\n        classNames?.iframe,\n        customStyles?.iframe,\n        defaultHeight,\n        sandbox,\n        throttledContent,\n      ],\n    );\n\n    // Shown when the user is on preview mode but the iframe isn't ready\n    // yet (Phase 1 of streaming: head still arriving). Holds the eventual\n    // iframe height to avoid layout shift on mount.\n    //\n    // Stream the raw source through `SyntaxHighlighter` at low opacity so\n    // the user sees real progress on slow models (a 30-tps DeepSeek\n    // pumping a ~5 KB head can otherwise sit on a static spinner for\n    // 20+ seconds). A small \"Preparing preview…\" badge keeps the loading\n    // state unambiguous. Tail-follow keeps the visible region anchored\n    // to the latest tokens — see the `useEffect` below.\n    const loadingBody = useMemo(\n      () => (\n        <div\n          {...stylex.props(styles.loadingRoot)}\n          style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}\n        >\n          <div\n            ref={loadingSourceRef}\n            {...styleProps(styles.loadingSource, 'lobe-html-preview-loading-source')}\n          >\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div {...stylex.props(styles.loadingBackdrop)} />\n          <div {...stylex.props(styles.loadingBadge)}>\n            <Spin size={16} variant=\"network\" />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, trimmedChildren],\n    );\n\n    const previewBody = isStable ? iframeBody : loadingBody;\n\n    const defaultBody = effectiveMode === 'preview' ? previewBody : sourceBody;\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({\n        content: trimmedChildren,\n        mode: effectiveMode,\n        originalNode: defaultBody,\n      });\n    }, [bodyRender, defaultBody, effectiveMode, trimmedChildren]);\n\n    const segmentOptions = useMemo(\n      () => [\n        { label: 'Preview', value: 'preview' as const },\n        { label: 'Source', value: 'source' as const },\n      ],\n      [],\n    );\n\n    const iconSize = actionIconSize || 'small';\n\n    const originalActions: ReactNode = (\n      <>\n        {!isFragment && (\n          <Segmented\n            options={segmentOptions}\n            size={'small'}\n            styles={segmentedStyles}\n            value={effectiveMode}\n            onChange={(v) => setMode(v as HtmlPreviewMode)}\n          />\n        )}\n        {copyable && <CopyButton content={getCopyContent} size={iconSize} />}\n        {downloadable && (\n          <ActionIcon\n            icon={Download}\n            size={iconSize}\n            title={'Download HTML'}\n            onClick={handleDownload}\n          />\n        )}\n        {onExpand && (\n          <ActionIcon\n            icon={Expand}\n            size={iconSize}\n            title={'Open full preview'}\n            onClick={handleExpand}\n          />\n        )}\n      </>\n    );\n\n    const actions = actionsRender\n      ? actionsRender({\n          actionIconSize: iconSize,\n          content: trimmedChildren,\n          getContent: getCopyContent,\n          mode: effectiveMode,\n          originalNode: originalActions,\n          setMode,\n        })\n      : originalActions;\n\n    return (\n      <div\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(false, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          flex={'none'}\n          gap={4}\n          padding={4}\n          onClick={stopPropagation}\n          {...styleProps(\n            styles.toolbar,\n            clsx(actionsHoverCls, classNames?.header),\n            customStyles?.header,\n          )}\n        >\n          {actions}\n        </Flexbox>\n        {body}\n      </div>\n    );\n  },\n);\n\nHtmlPreview.displayName = 'HtmlPreview';\n\nexport default HtmlPreview;\n"],"mappings":"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"}
+{"version":3,"file":"HtmlPreview.mjs","names":["Flexbox","clsx"],"sources":["../../src/HtmlPreview/HtmlPreview.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Download, Expand } 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 { actionsHoverCls, rootClassName, rootStyles } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport Segmented, { type SegmentedStyles } from '@/Segmented';\nimport Spin from '@/Spin';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport { styles } from './style';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\nconst segmentedStyles: SegmentedStyles = {\n  indicator: { borderRadius: cssVar.borderRadiusXS },\n  item: {\n    borderRadius: cssVar.borderRadiusXS,\n    fontSize: 14,\n    fontWeight: 400,\n    height: 23,\n    paddingInline: 7,\n  },\n  root: { borderRadius: cssVar.borderRadiusSM, gap: 0, padding: 2 },\n};\n\nconst themeBackground = (theme?: 'light' | 'dark') => {\n  if (theme === 'dark') return '#1f1f1f';\n  if (theme === 'light') return '#ffffff';\n  return undefined;\n};\n\nconst downloadHtml = async (content: string, fileName: string) => {\n  const blob = new Blob([content], { type: 'text/html;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  try {\n    await downloadBlob(url, fileName);\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nconst HtmlPreview = memo<HtmlPreviewProps>(\n  ({\n    actionIconSize,\n    actionsRender,\n    animated,\n    bodyRender,\n    children,\n    className,\n    classNames,\n    copyable = true,\n    defaultHeight,\n    defaultMode = 'preview',\n    downloadable = true,\n    fileName,\n    language = 'html',\n    onExpand,\n    sandbox,\n    shadow,\n    streamingMode = 'auto',\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    // `fullFeatured` / `showLanguage` / `defaultExpand` are accepted for API\n    // compatibility with the rest of the Pre family but no longer drive a\n    // separate header — the inline toolbar is always rendered.\n    fullFeatured: _fullFeatured,\n    showLanguage: _showLanguage,\n    defaultExpand: _defaultExpand,\n    ...rest\n  }) => {\n    const trimmedChildren = useMemo(() => (children || '').trim(), [children]);\n    const isFragment = useMemo(() => !isFullHtmlDocument(trimmedChildren), [trimmedChildren]);\n\n    // Per-session tracking. Reset on `animated` edge false → true.\n    const [scriptLocked, setScriptLocked] = useState(false);\n    const [headClosed, setHeadClosed] = useState(false);\n    const [liveCommitted, setLiveCommitted] = useState(false);\n    const prevAnimatedRef = useRef(animated);\n    const lastCommitRef = useRef(0);\n    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const latestContentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      latestContentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n    useEffect(() => {\n      if (animated && !prevAnimatedRef.current) {\n        setScriptLocked(false);\n        setHeadClosed(false);\n        setLiveCommitted(false);\n        lastCommitRef.current = 0;\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n      }\n      prevAnimatedRef.current = animated;\n    }, [animated]);\n\n    // Sticky script detection: once a `<script>` appears in this session,\n    // auto mode locks into defer.\n    useEffect(() => {\n      if (animated && !scriptLocked && containsScript(trimmedChildren)) {\n        setScriptLocked(true);\n      }\n    }, [trimmedChildren, animated, scriptLocked]);\n\n    // Track whether the head section has closed. Until it does, the iframe\n    // would render either nothing or invalid HTML (style tag mid-stream).\n    // After `</head>` (or `</style>` as a fallback for documents that skip\n    // an explicit head close) we know the visual baseline is locked in.\n    useEffect(() => {\n      if (animated && !headClosed) {\n        const lowered = trimmedChildren.toLowerCase();\n        if (lowered.includes('</head>') || lowered.includes('</style>')) {\n          setHeadClosed(true);\n        }\n      }\n    }, [trimmedChildren, animated, headClosed]);\n\n    // Two-phase streaming commit:\n    //   Phase 1 (head still streaming) — don't mount iframe at all. There's\n    //     nothing meaningful to render and styles aren't applied yet.\n    //   Phase 2 (head closed, body streaming) — commit at most once every\n    //     ~250ms. Important: this is a TRUE throttle, not a debounce. The\n    //     pending timer is held in a ref so it survives effect re-runs;\n    //     when it fires it commits the latest content (via another ref)\n    //     and clears itself, allowing a fresh schedule. If chunks come in\n    //     faster than the throttle window (which they do at ~50/sec) we\n    //     still get a commit every 250ms instead of waiting for streaming\n    //     to pause.\n    //   On streaming end → flush immediately, cancel any pending timer.\n    const [throttledContent, setThrottledContent] = useState(trimmedChildren);\n    useEffect(() => {\n      if (!animated) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = Date.now();\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n      if (!headClosed) return;\n\n      const throttleMs = 250;\n      const now = Date.now();\n      const elapsed = now - lastCommitRef.current;\n\n      if (elapsed >= throttleMs) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = now;\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n\n      // Schedule a future commit, but only if one isn't already pending —\n      // every chunk arrival re-runs this effect; we don't want to reset\n      // the timer each time (that's debounce, and during continuous\n      // streaming it would never fire).\n      if (pendingTimerRef.current === null) {\n        pendingTimerRef.current = setTimeout(() => {\n          lastCommitRef.current = Date.now();\n          pendingTimerRef.current = null;\n          setThrottledContent(latestContentRef.current);\n        }, throttleMs - elapsed);\n      }\n    }, [trimmedChildren, animated, headClosed]);\n    useEffect(\n      () => () => {\n        if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);\n      },\n      [],\n    );\n\n    // Live-streaming commitment is sticky for the rest of the session. The\n    // decision is made the moment the head seals:\n    //   • `live` → commit unconditionally\n    //   • `auto` → commit only if no `<script>` has appeared yet (script-\n    //     bearing docs go down the defer path to avoid running setup() on\n    //     partial source)\n    //   • `defer` → never commit; wait for `</html>`\n    // Sticky-ness matters for `auto`: if a `<script>` arrives *after* the\n    // head has already closed and we've started live-streaming, we keep\n    // streaming rather than yanking the rendered content back into a\n    // loading state mid-flight. The shell→static swap at end of streaming\n    // re-runs the document cleanly anyway.\n    useEffect(() => {\n      if (!animated || liveCommitted || !headClosed) return;\n      if (streamingMode === 'live' || (streamingMode === 'auto' && !scriptLocked)) {\n        setLiveCommitted(true);\n      }\n    }, [animated, headClosed, liveCommitted, scriptLocked, streamingMode]);\n\n    // Streaming gate. The iframe can mount in three situations:\n    //   1. content is no longer animating\n    //   2. `</html>` has arrived\n    //   3. live streaming has been committed this session\n    const isStable = !animated || isHtmlContentClosed(trimmedChildren) || liveCommitted;\n\n    const [mode, setMode] = useState<HtmlPreviewMode>(defaultMode);\n\n    // Fragments cannot meaningfully render in preview — force source view.\n    // For streaming content that's not yet stable we keep the user's mode\n    // choice and substitute a loading placeholder in the body instead, so\n    // the toggle UI doesn't flip back and forth as content arrives.\n    const effectiveMode: HtmlPreviewMode = isFragment ? 'source' : mode;\n\n    const contentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      contentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n\n    // Tail-follow the streaming source visible during Phase 1 — anchor\n    // the scroll position to the latest tokens so a slow model's output\n    // doesn't sit pinned to the document head while the user waits.\n    const loadingSourceRef = useRef<HTMLDivElement | null>(null);\n    useEffect(() => {\n      if (isStable) return;\n      const node = loadingSourceRef.current;\n      if (!node) return;\n      node.scrollTop = node.scrollHeight;\n    }, [trimmedChildren, isStable]);\n\n    const getCopyContent = useCallback(() => contentRef.current, []);\n\n    const handleDownload = useCallback(() => {\n      void downloadHtml(contentRef.current, fileName || 'preview.html');\n    }, [fileName]);\n\n    const handleExpand = useCallback(() => {\n      onExpand?.(contentRef.current);\n    }, [onExpand]);\n\n    const background = themeBackground(theme);\n\n    const sourceBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          language={'html'}\n          style={{ height: '100%', ...customStyles?.content }}\n          variant={variant}\n        >\n          {trimmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [animated, classNames?.content, customStyles?.content, trimmedChildren, variant],\n    );\n\n    const iframeBody = useMemo(\n      () => (\n        <HtmlPreviewIframe\n          animated={animated}\n          background={background}\n          className={classNames?.iframe}\n          content={throttledContent}\n          defaultHeight={defaultHeight}\n          sandbox={sandbox}\n          style={customStyles?.iframe}\n        />\n      ),\n      [\n        background,\n        classNames?.iframe,\n        customStyles?.iframe,\n        defaultHeight,\n        sandbox,\n        throttledContent,\n      ],\n    );\n\n    // Shown when the user is on preview mode but the iframe isn't ready\n    // yet (Phase 1 of streaming: head still arriving). Holds the eventual\n    // iframe height to avoid layout shift on mount.\n    //\n    // Stream the raw source through `SyntaxHighlighter` at low opacity so\n    // the user sees real progress on slow models (a 30-tps DeepSeek\n    // pumping a ~5 KB head can otherwise sit on a static spinner for\n    // 20+ seconds). A small \"Preparing preview…\" badge keeps the loading\n    // state unambiguous. Tail-follow keeps the visible region anchored\n    // to the latest tokens — see the `useEffect` below.\n    const loadingBody = useMemo(\n      () => (\n        <div\n          {...stylex.props(styles.loadingRoot)}\n          style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}\n        >\n          <div\n            ref={loadingSourceRef}\n            {...styleProps(styles.loadingSource, 'lobe-html-preview-loading-source')}\n          >\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div {...stylex.props(styles.loadingBackdrop)} />\n          <div {...stylex.props(styles.loadingBadge)}>\n            <Spin size={16} variant=\"network\" />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, trimmedChildren],\n    );\n\n    const previewBody = isStable ? iframeBody : loadingBody;\n\n    const defaultBody = effectiveMode === 'preview' ? previewBody : sourceBody;\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({\n        content: trimmedChildren,\n        mode: effectiveMode,\n        originalNode: defaultBody,\n      });\n    }, [bodyRender, defaultBody, effectiveMode, trimmedChildren]);\n\n    const segmentOptions = useMemo(\n      () => [\n        { label: 'Preview', value: 'preview' as const },\n        { label: 'Source', value: 'source' as const },\n      ],\n      [],\n    );\n\n    const iconSize = actionIconSize || 'small';\n\n    const originalActions: ReactNode = (\n      <>\n        {!isFragment && (\n          <Segmented\n            options={segmentOptions}\n            size={'small'}\n            styles={segmentedStyles}\n            value={effectiveMode}\n            onChange={(v) => setMode(v as HtmlPreviewMode)}\n          />\n        )}\n        {copyable && <CopyButton content={getCopyContent} size={iconSize} />}\n        {downloadable && (\n          <ActionIcon\n            icon={Download}\n            size={iconSize}\n            title={'Download HTML'}\n            onClick={handleDownload}\n          />\n        )}\n        {onExpand && (\n          <ActionIcon\n            icon={Expand}\n            size={iconSize}\n            title={'Open full preview'}\n            onClick={handleExpand}\n          />\n        )}\n      </>\n    );\n\n    const actions = actionsRender\n      ? actionsRender({\n          actionIconSize: iconSize,\n          content: trimmedChildren,\n          getContent: getCopyContent,\n          mode: effectiveMode,\n          originalNode: originalActions,\n          setMode,\n        })\n      : originalActions;\n\n    return (\n      <div\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(false, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          flex={'none'}\n          gap={4}\n          padding={4}\n          onClick={stopPropagation}\n          {...styleProps(\n            styles.toolbar,\n            clsx(actionsHoverCls, classNames?.header),\n            customStyles?.header,\n          )}\n        >\n          {actions}\n        </Flexbox>\n        {body}\n      </div>\n    );\n  },\n);\n\nHtmlPreview.displayName = 'HtmlPreview';\n\nexport default HtmlPreview;\n"],"mappings":"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"}

package/es/Icon/Icon.mjs

@@ -5,7 +5,7 @@ import { calcSize } from "./components/utils.mjs";
 import { styles } from "./style.mjs";
 import { isValidElement, memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Icon/Icon.tsx
 const Icon = memo(({ icon, size: iconSize, color, fill = "transparent", className, focusable, spin, fillRule, fillOpacity, ref, ...rest }) => {
 	const { color: colorConfig, fill: fillConfig, fillOpacity: fillOpacityConfig, fillRule: fillRuleConfig, focusable: focusableConfig, className: classNameConfig, size: sizeConfig, ...restConfig } = useIconContext();
@@ -13,7 +13,7 @@ const Icon = memo(({ icon, size: iconSize, color, fill = "transparent", classNam
 	const SvgIcon = icon;
 	return /* @__PURE__ */ jsx("span", {
 		role: "img",
-		className: styleProps([styles.root, spin && styles.spin], clsx("anticon", classNameConfig, className)).className,
+		className: styleProps([styles.root, spin && styles.spin], clsx$1("anticon", classNameConfig, className)).className,
 		...restConfig,
 		...rest,
 		children: icon && (isValidElement(icon) ? icon : /* @__PURE__ */ jsx(SvgIcon, {

package/es/Icon/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","names":[],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { LucideIcon } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useIconContext } from './components/IconProvider';\nimport { calcSize } from './components/utils';\nimport { styles } from './style';\nimport type { IconProps } from './type';\n\nconst Icon = memo<IconProps>(\n  ({\n    icon,\n    size: iconSize,\n    color,\n    fill = 'transparent',\n    className,\n    focusable,\n    spin,\n    fillRule,\n    fillOpacity,\n    ref,\n    ...rest\n  }) => {\n    const {\n      color: colorConfig,\n      fill: fillConfig,\n      fillOpacity: fillOpacityConfig,\n      fillRule: fillRuleConfig,\n      focusable: focusableConfig,\n      className: classNameConfig,\n      size: sizeConfig,\n      ...restConfig\n    } = useIconContext();\n\n    const { size, strokeWidth } = useMemo(\n      () => calcSize(iconSize || sizeConfig),\n      [iconSize, sizeConfig],\n    );\n\n    const SvgIcon = icon as LucideIcon;\n\n    return (\n      <span\n        role=\"img\"\n        className={\n          styleProps(\n            [styles.root, spin && styles.spin],\n            clsx('anticon', classNameConfig, className),\n          ).className\n        }\n        {...restConfig}\n        {...rest}\n      >\n        {icon &&\n          (isValidElement(icon) ? (\n            icon\n          ) : (\n            <SvgIcon\n              color={color || colorConfig}\n              fill={fill || fillConfig}\n              fillOpacity={fillOpacity || fillOpacityConfig}\n              fillRule={fillRule || fillRuleConfig}\n              focusable={focusable || focusableConfig}\n              height={size}\n              ref={ref}\n              size={size}\n              strokeWidth={strokeWidth}\n              width={size}\n            />\n          ))}\n      </span>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;;;;AAaA,MAAM,OAAO,MACV,EACC,MACA,MAAM,UACN,OACA,OAAO,eACP,WACA,WACA,MACA,UACA,aACA,KACA,GAAG,WACC;CACJ,MAAM,EACJ,OAAO,aACP,MAAM,YACN,aAAa,mBACb,UAAU,gBACV,WAAW,iBACX,WAAW,iBACX,MAAM,YACN,GAAG,eACD,eAAe;CAEnB,MAAM,EAAE,MAAM,gBAAgB,cACtB,SAAS,YAAY,UAAU,GACrC,CAAC,UAAU,UAAU,CACvB;CAEA,MAAM,UAAU;CAEhB,OACE,oBAAC,QAAD;EACE,MAAK;EACL,WACE,WACE,CAAC,OAAO,MAAM,QAAQ,OAAO,IAAI,GACjC,KAAK,WAAW,iBAAiB,SAAS,CAC5C,CAAC,CAAC;EAEJ,GAAI;EACJ,GAAI;EAEH,UAAA,SACE,eAAe,IAAI,IAClB,OAEA,oBAAC,SAAD;GACE,OAAO,SAAS;GAChB,MAAM,QAAQ;GACd,aAAa,eAAe;GAC5B,UAAU,YAAY;GACtB,WAAW,aAAa;GACxB,QAAQ;GACH;GACC;GACO;GACb,OAAO;EACR,CAAA;CAED,CAAA;AAEV,CACF;AAEA,KAAK,cAAc"}
+{"version":3,"file":"Icon.mjs","names":["clsx"],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { LucideIcon } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useIconContext } from './components/IconProvider';\nimport { calcSize } from './components/utils';\nimport { styles } from './style';\nimport type { IconProps } from './type';\n\nconst Icon = memo<IconProps>(\n  ({\n    icon,\n    size: iconSize,\n    color,\n    fill = 'transparent',\n    className,\n    focusable,\n    spin,\n    fillRule,\n    fillOpacity,\n    ref,\n    ...rest\n  }) => {\n    const {\n      color: colorConfig,\n      fill: fillConfig,\n      fillOpacity: fillOpacityConfig,\n      fillRule: fillRuleConfig,\n      focusable: focusableConfig,\n      className: classNameConfig,\n      size: sizeConfig,\n      ...restConfig\n    } = useIconContext();\n\n    const { size, strokeWidth } = useMemo(\n      () => calcSize(iconSize || sizeConfig),\n      [iconSize, sizeConfig],\n    );\n\n    const SvgIcon = icon as LucideIcon;\n\n    return (\n      <span\n        role=\"img\"\n        className={\n          styleProps(\n            [styles.root, spin && styles.spin],\n            clsx('anticon', classNameConfig, className),\n          ).className\n        }\n        {...restConfig}\n        {...rest}\n      >\n        {icon &&\n          (isValidElement(icon) ? (\n            icon\n          ) : (\n            <SvgIcon\n              color={color || colorConfig}\n              fill={fill || fillConfig}\n              fillOpacity={fillOpacity || fillOpacityConfig}\n              fillRule={fillRule || fillRuleConfig}\n              focusable={focusable || focusableConfig}\n              height={size}\n              ref={ref}\n              size={size}\n              strokeWidth={strokeWidth}\n              width={size}\n            />\n          ))}\n      </span>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;;;;AAaA,MAAM,OAAO,MACV,EACC,MACA,MAAM,UACN,OACA,OAAO,eACP,WACA,WACA,MACA,UACA,aACA,KACA,GAAG,WACC;CACJ,MAAM,EACJ,OAAO,aACP,MAAM,YACN,aAAa,mBACb,UAAU,gBACV,WAAW,iBACX,WAAW,iBACX,MAAM,YACN,GAAG,eACD,eAAe;CAEnB,MAAM,EAAE,MAAM,gBAAgB,cACtB,SAAS,YAAY,UAAU,GACrC,CAAC,UAAU,UAAU,CACvB;CAEA,MAAM,UAAU;CAEhB,OACE,oBAAC,QAAD;EACE,MAAK;EACL,WACE,WACE,CAAC,OAAO,MAAM,QAAQ,OAAO,IAAI,GACjCA,OAAK,WAAW,iBAAiB,SAAS,CAC5C,CAAC,CAAC;EAEJ,GAAI;EACJ,GAAI;EAEH,UAAA,SACE,eAAe,IAAI,IAClB,OAEA,oBAAC,SAAD;GACE,OAAO,SAAS;GAChB,MAAM,QAAQ;GACd,aAAa,eAAe;GAC5B,UAAU,YAAY;GACtB,WAAW,aAAa;GACxB,QAAQ;GACH;GACC;GACO;GACb,OAAO;EACR,CAAA;CAED,CAAA;AAEV,CACF;AAEA,KAAK,cAAc"}

package/es/List/ListRow.mjs

@@ -7,7 +7,7 @@ import { listItemMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/List/ListRow.tsx
 const ListRow = memo(({ active, classNames, compact, item, onSelect, styles: customStyles, xstyle }) => {
@@ -27,7 +27,7 @@ const ListRow = memo(({ active, classNames, compact, item, onSelect, styles: cus
 		danger && styles.danger,
 		disabled && styles.disabled,
 		xstyle?.(item, active)
-	], clsx(classNames?.item, item.className)).className;
+	], clsx$1(classNames?.item, item.className)).className;
 	const rowStyle = {
 		...customStyles?.item,
 		...item.style
@@ -40,7 +40,7 @@ const ListRow = memo(({ active, classNames, compact, item, onSelect, styles: cus
 		/* @__PURE__ */ jsxs("span", {
 			...stylex.props(styles.body),
 			children: [/* @__PURE__ */ jsx("span", {
-				...styleProps(styles.label, clsx("lobe-list-label", classNames?.label), customStyles?.label),
+				...styleProps(styles.label, clsx$1("lobe-list-label", classNames?.label), customStyles?.label),
 				children: label
 			}), description != null && /* @__PURE__ */ jsx("span", {
 				...styleProps(styles.description, classNames?.description, customStyles?.description),

package/es/List/ListRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListRow.mjs","names":[],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, type MouseEvent } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { listItemMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { ListItemType, ListProps } from './type';\n\nexport type ListRowXstyle = (\n  item: ListItemType,\n  active: boolean,\n) => Parameters<typeof styleProps>[0];\n\ninterface ListRowProps {\n  active: boolean;\n  classNames?: ListProps['classNames'];\n  compact: boolean;\n  item: ListItemType;\n  onSelect: (item: ListItemType, event: MouseEvent<HTMLElement>) => void;\n  styles?: ListProps['styles'];\n  xstyle?: ListRowXstyle;\n}\n\nconst ListRow = memo<ListRowProps>(\n  ({ active, classNames, compact, item, onSelect, styles: customStyles, xstyle }) => {\n    const { actions, avatar, danger, description, disabled, extra, href, icon, label, showAction } =\n      item;\n\n    const handleClick = (event: MouseEvent<HTMLElement>) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n      onSelect(item, event);\n    };\n\n    const rowClassName = styleProps(\n      [\n        focusRing.info,\n        styles.row,\n        compact && styles.compactRow,\n        active && styles.active,\n        danger && styles.danger,\n        disabled && styles.disabled,\n        xstyle?.(item, active),\n      ],\n      clsx(classNames?.item, item.className),\n    ).className;\n    const rowStyle = { ...customStyles?.item, ...item.style };\n\n    const content = (\n      <>\n        {avatar ?? (icon ? <Icon icon={icon} size={16} /> : null)}\n        <span {...stylex.props(styles.body)}>\n          <span\n            {...styleProps(\n              styles.label,\n              clsx('lobe-list-label', classNames?.label),\n              customStyles?.label,\n            )}\n          >\n            {label}\n          </span>\n          {description != null && (\n            <span\n              {...styleProps(\n                styles.description,\n                classNames?.description,\n                customStyles?.description,\n              )}\n            >\n              {description}\n            </span>\n          )}\n        </span>\n        {extra != null && (\n          <span {...styleProps(styles.extra, classNames?.extra, customStyles?.extra)}>{extra}</span>\n        )}\n      </>\n    );\n\n    return (\n      <li {...stylex.props(styles.item, listItemMarker)}>\n        {href && !disabled ? (\n          <A\n            aria-current={active ? 'page' : undefined}\n            className={rowClassName}\n            href={href}\n            style={rowStyle}\n            onClick={handleClick}\n          >\n            {content}\n          </A>\n        ) : (\n          <button\n            aria-current={active ? 'true' : undefined}\n            aria-disabled={disabled || undefined}\n            className={rowClassName}\n            style={rowStyle}\n            type=\"button\"\n            onClick={handleClick}\n          >\n            {content}\n          </button>\n        )}\n        {actions != null && (\n          <span\n            {...styleProps(\n              [styles.actions, showAction && styles.showAction],\n              classNames?.actions,\n              customStyles?.actions,\n            )}\n          >\n            {actions}\n          </span>\n        )}\n      </li>\n    );\n  },\n);\n\nListRow.displayName = 'ListRow';\n\nexport default ListRow;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,UAAU,MAAoB,EAClC,QACA,YACA,SACA,MACA,UACA,QAAQ,cACR,aACI;CACJ,MAAM,EACJ,SACA,QACA,QACA,aACA,UACA,OACA,MACA,MACA,OACA,eACE;CACJ,MAAM,eAAe,UAAmC;EACtD,IAAI,UAAU;GACZ,MAAM,eAAe;GACrB;EACF;EACA,SAAS,MAAM,KAAK;CACtB;CACA,MAAM,eAAe,WAAW;EAAC,UAAU;EAAM,OAAO;EAAK,WAAW,OAAO;EAAY,UAAU,OAAO;EAAQ,UAAU,OAAO;EAAQ,YAAY,OAAO;EAAU,SAAS,MAAM,MAAM;CAAC,GAAG,KAAK,YAAY,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC;CAC3O,MAAM,WAAW;EACf,GAAG,cAAc;EACjB,GAAG,KAAK;CACV;CACA,MAAM,UAAU,qBAAA,YAAA,EAAA,UAAA;EACT,WAAW,OAAO,oBAAC,MAAD;GAAY;GAAM,MAAM;EAAK,CAAA,IAAI;EACpD,qBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,IAAI;GAAlC,UAAA,CACE,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,OAAO,KAAK,mBAAmB,YAAY,KAAK,GAAG,cAAc,KAAK;IAC/F,UAAA;GACG,CAAA,GACL,eAAe,QAAQ,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,aAAa,YAAY,aAAa,cAAc,WAAW;IAC9G,UAAA;GACG,CAAA,CACJ;;EACL,SAAS,QAAQ,oBAAC,QAAD;GAAM,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;GAAI,UAAA;EAAY,CAAA;CAC3G,EAAA,CAAA;CACN,OAAO,qBAAC,MAAD;EAAI,GAAI,OAAO,MAAM,OAAO,MAAM,cAAc;EAAhD,UAAA,CACA,QAAQ,CAAC,WAAW,oBAAC,GAAD;GAAG,gBAAc,SAAS,SAAS,KAAA;GAAW,WAAW;GAAoB;GAAM,OAAO;GAAU,SAAS;GAC7H,UAAA;EACA,CAAA,IAAI,oBAAC,UAAD;GAAQ,gBAAc,SAAS,SAAS,KAAA;GAAW,iBAAe,YAAY,KAAA;GAAW,WAAW;GAAc,OAAO;GAAU,MAAK;GAAS,SAAS;GAC9J,UAAA;EACK,CAAA,GACT,WAAW,QAAQ,oBAAC,QAAD;GAAM,GAAI,WAAW,CAAC,OAAO,SAAS,cAAc,OAAO,UAAU,GAAG,YAAY,SAAS,cAAc,OAAO;GACjI,UAAA;EACG,CAAA,CACN;;AACV,CAAC;AACD,QAAQ,cAAc"}
+{"version":3,"file":"ListRow.mjs","names":["clsx"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, type MouseEvent } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { listItemMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { ListItemType, ListProps } from './type';\n\nexport type ListRowXstyle = (\n  item: ListItemType,\n  active: boolean,\n) => Parameters<typeof styleProps>[0];\n\ninterface ListRowProps {\n  active: boolean;\n  classNames?: ListProps['classNames'];\n  compact: boolean;\n  item: ListItemType;\n  onSelect: (item: ListItemType, event: MouseEvent<HTMLElement>) => void;\n  styles?: ListProps['styles'];\n  xstyle?: ListRowXstyle;\n}\n\nconst ListRow = memo<ListRowProps>(\n  ({ active, classNames, compact, item, onSelect, styles: customStyles, xstyle }) => {\n    const { actions, avatar, danger, description, disabled, extra, href, icon, label, showAction } =\n      item;\n\n    const handleClick = (event: MouseEvent<HTMLElement>) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n      onSelect(item, event);\n    };\n\n    const rowClassName = styleProps(\n      [\n        focusRing.info,\n        styles.row,\n        compact && styles.compactRow,\n        active && styles.active,\n        danger && styles.danger,\n        disabled && styles.disabled,\n        xstyle?.(item, active),\n      ],\n      clsx(classNames?.item, item.className),\n    ).className;\n    const rowStyle = { ...customStyles?.item, ...item.style };\n\n    const content = (\n      <>\n        {avatar ?? (icon ? <Icon icon={icon} size={16} /> : null)}\n        <span {...stylex.props(styles.body)}>\n          <span\n            {...styleProps(\n              styles.label,\n              clsx('lobe-list-label', classNames?.label),\n              customStyles?.label,\n            )}\n          >\n            {label}\n          </span>\n          {description != null && (\n            <span\n              {...styleProps(\n                styles.description,\n                classNames?.description,\n                customStyles?.description,\n              )}\n            >\n              {description}\n            </span>\n          )}\n        </span>\n        {extra != null && (\n          <span {...styleProps(styles.extra, classNames?.extra, customStyles?.extra)}>{extra}</span>\n        )}\n      </>\n    );\n\n    return (\n      <li {...stylex.props(styles.item, listItemMarker)}>\n        {href && !disabled ? (\n          <A\n            aria-current={active ? 'page' : undefined}\n            className={rowClassName}\n            href={href}\n            style={rowStyle}\n            onClick={handleClick}\n          >\n            {content}\n          </A>\n        ) : (\n          <button\n            aria-current={active ? 'true' : undefined}\n            aria-disabled={disabled || undefined}\n            className={rowClassName}\n            style={rowStyle}\n            type=\"button\"\n            onClick={handleClick}\n          >\n            {content}\n          </button>\n        )}\n        {actions != null && (\n          <span\n            {...styleProps(\n              [styles.actions, showAction && styles.showAction],\n              classNames?.actions,\n              customStyles?.actions,\n            )}\n          >\n            {actions}\n          </span>\n        )}\n      </li>\n    );\n  },\n);\n\nListRow.displayName = 'ListRow';\n\nexport default ListRow;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,UAAU,MAAoB,EAClC,QACA,YACA,SACA,MACA,UACA,QAAQ,cACR,aACI;CACJ,MAAM,EACJ,SACA,QACA,QACA,aACA,UACA,OACA,MACA,MACA,OACA,eACE;CACJ,MAAM,eAAe,UAAmC;EACtD,IAAI,UAAU;GACZ,MAAM,eAAe;GACrB;EACF;EACA,SAAS,MAAM,KAAK;CACtB;CACA,MAAM,eAAe,WAAW;EAAC,UAAU;EAAM,OAAO;EAAK,WAAW,OAAO;EAAY,UAAU,OAAO;EAAQ,UAAU,OAAO;EAAQ,YAAY,OAAO;EAAU,SAAS,MAAM,MAAM;CAAC,GAAGA,OAAK,YAAY,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC;CAC3O,MAAM,WAAW;EACf,GAAG,cAAc;EACjB,GAAG,KAAK;CACV;CACA,MAAM,UAAU,qBAAA,YAAA,EAAA,UAAA;EACT,WAAW,OAAO,oBAAC,MAAD;GAAY;GAAM,MAAM;EAAK,CAAA,IAAI;EACpD,qBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,IAAI;GAAlC,UAAA,CACE,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,OAAOA,OAAK,mBAAmB,YAAY,KAAK,GAAG,cAAc,KAAK;IAC/F,UAAA;GACG,CAAA,GACL,eAAe,QAAQ,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,aAAa,YAAY,aAAa,cAAc,WAAW;IAC9G,UAAA;GACG,CAAA,CACJ;;EACL,SAAS,QAAQ,oBAAC,QAAD;GAAM,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;GAAI,UAAA;EAAY,CAAA;CAC3G,EAAA,CAAA;CACN,OAAO,qBAAC,MAAD;EAAI,GAAI,OAAO,MAAM,OAAO,MAAM,cAAc;EAAhD,UAAA,CACA,QAAQ,CAAC,WAAW,oBAAC,GAAD;GAAG,gBAAc,SAAS,SAAS,KAAA;GAAW,WAAW;GAAoB;GAAM,OAAO;GAAU,SAAS;GAC7H,UAAA;EACA,CAAA,IAAI,oBAAC,UAAD;GAAQ,gBAAc,SAAS,SAAS,KAAA;GAAW,iBAAe,YAAY,KAAA;GAAW,WAAW;GAAc,OAAO;GAAU,MAAK;GAAS,SAAS;GAC9J,UAAA;EACK,CAAA,GACT,WAAW,QAAQ,oBAAC,QAAD;GAAM,GAAI,WAAW,CAAC,OAAO,SAAS,cAAc,OAAO,UAAU,GAAG,YAAY,SAAS,cAAc,OAAO;GACjI,UAAA;EACG,CAAA,CACN;;AACV,CAAC;AACD,QAAQ,cAAc"}

package/es/Markdown/Markdown.mjs

@@ -9,7 +9,7 @@ import { StreamdownRender } from "./SyntaxMarkdown/StreamdownRender.mjs";
 import { TypographyImpl } from "./Typography.mjs";
 import { memo, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Markdown/Markdown.tsx
 const Markdown = memo((props) => {
 	const { ref, children = "", className, style, fullFeaturedCodeBlock, onDoubleClick, animated, enableHtmlPreview = false, enableLatex = true, enableMermaid = true, enableImageGallery, enableCustomFootnotes, enableGithubAlert, enableStream = true, componentProps, rehypePluginsAhead, allowHtml, borderRadius, fontSize = props.variant === "chat" ? 14 : void 0, headerMultiple = props.variant === "chat" ? .25 : void 0, marginMultiple = props.variant === "chat" ? 1 : void 0, variant = "default", reactMarkdownProps, lineHeight = props.variant === "chat" ? 1.6 : void 0, rehypePlugins, remarkPlugins, remarkPluginsAhead, components = {}, customRender, showFootnotes = true, streamAnimationGranularity, streamSmoothingPreset, citations, ...rest } = props;
@@ -35,7 +35,7 @@ const Markdown = memo((props) => {
 			ref,
 			style,
 			xstyle: rootStyles.root,
-			className: clsx(variant === "chat" && styles.chat, enableLatex && styles.latex, styles.gfm, className),
+			className: clsx$1(variant === "chat" && styles.chat, enableLatex && styles.latex, styles.gfm, className),
 			onDoubleClick,
 			...rest,
 			children: /* @__PURE__ */ jsx(MarkdownProvider, {

package/es/Markdown/Markdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.mjs","names":["MarkdownRender"],"sources":["../../src/Markdown/Markdown.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useCallback } from 'react';\n\nimport { useStableValue } from '@/hooks/useStableValue';\nimport { PreviewGroup } from '@/Image';\n\nimport { MarkdownProvider } from './components/MarkdownProvider';\nimport { useDelayedAnimated } from './components/useDelayedAnimated';\nimport { rootStyles, styles } from './style';\nimport { MarkdownRender, StreamdownRender } from './SyntaxMarkdown';\nimport { type MarkdownProps } from './type';\nimport { TypographyImpl } from './Typography';\n\nconst Markdown = memo<MarkdownProps>((props) => {\n  const {\n    ref,\n    children = '',\n    className,\n    style,\n    fullFeaturedCodeBlock,\n    onDoubleClick,\n    animated,\n    enableHtmlPreview = false,\n    enableLatex = true,\n    enableMermaid = true,\n    enableImageGallery,\n    enableCustomFootnotes,\n    enableGithubAlert,\n    enableStream = true,\n    componentProps,\n    rehypePluginsAhead,\n    allowHtml,\n    borderRadius,\n    fontSize = props.variant === 'chat' ? 14 : undefined,\n    headerMultiple = props.variant === 'chat' ? 0.25 : undefined,\n    marginMultiple = props.variant === 'chat' ? 1 : undefined,\n    variant = 'default',\n    reactMarkdownProps,\n    lineHeight = props.variant === 'chat' ? 1.6 : undefined,\n    rehypePlugins,\n    remarkPlugins,\n    remarkPluginsAhead,\n    components = {},\n    customRender,\n    showFootnotes = true,\n    streamAnimationGranularity,\n    streamSmoothingPreset,\n    citations,\n    ...rest\n  } = props;\n\n  const delayedAnimated = useDelayedAnimated(animated);\n\n  // Stabilise structural props so an inline `componentProps={{ html:\n  // {...} }}` from the caller doesn't cascade through MarkdownProvider →\n  // useMarkdownComponents → react-markdown's `components` and remount the\n  // entire code-block subtree (including the HtmlPreview iframe) on\n  // every parent render. The deep-equal compare treats inline literals\n  // as the same object as long as their structure matches. Inline\n  // callbacks (`actionsRender`, custom `components`) still need\n  // `useCallback` at the call site — function bodies aren't compared.\n  const stableComponentProps = useStableValue(componentProps);\n  const stableComponents = useStableValue(components);\n\n  const Render = useCallback(\n    ({\n      enableStream,\n      children,\n      reactMarkdownProps,\n    }: Pick<MarkdownProps, 'children' | 'enableStream' | 'reactMarkdownProps'>) => {\n      const DefaultRender = enableStream ? StreamdownRender : MarkdownRender;\n      const defaultDOM = <DefaultRender {...reactMarkdownProps}>{children}</DefaultRender>;\n      return customRender ? customRender(defaultDOM, { text: children }) : defaultDOM;\n    },\n    [customRender],\n  );\n\n  return (\n    <PreviewGroup enable={enableImageGallery}>\n      <TypographyImpl\n        borderRadius={borderRadius}\n        data-code-type=\"markdown\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        ref={ref}\n        style={style}\n        xstyle={rootStyles.root}\n        className={clsx(\n          variant === 'chat' && styles.chat,\n          enableLatex && styles.latex,\n          styles.gfm,\n          className,\n        )}\n        onDoubleClick={onDoubleClick}\n        {...rest}\n      >\n        <MarkdownProvider\n          allowHtml={allowHtml}\n          animated={delayedAnimated}\n          citations={citations}\n          componentProps={stableComponentProps}\n          components={stableComponents}\n          enableCustomFootnotes={enableCustomFootnotes}\n          enableGithubAlert={enableGithubAlert}\n          enableHtmlPreview={enableHtmlPreview}\n          enableLatex={enableLatex}\n          enableMermaid={enableMermaid}\n          fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n          rehypePlugins={rehypePlugins}\n          rehypePluginsAhead={rehypePluginsAhead}\n          remarkPlugins={remarkPlugins}\n          remarkPluginsAhead={remarkPluginsAhead}\n          showFootnotes={showFootnotes}\n          streamAnimationGranularity={streamAnimationGranularity}\n          streamSmoothingPreset={streamSmoothingPreset}\n          variant={variant}\n        >\n          <Render\n            enableStream={enableStream && delayedAnimated}\n            reactMarkdownProps={reactMarkdownProps}\n          >\n            {children}\n          </Render>\n        </MarkdownProvider>\n      </TypographyImpl>\n    </PreviewGroup>\n  );\n});\n\nMarkdown.displayName = 'Markdown';\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,WAAW,MAAqB,UAAU;CAC9C,MAAM,EACJ,KACA,WAAW,IACX,WACA,OACA,uBACA,eACA,UACA,oBAAoB,OACpB,cAAc,MACd,gBAAgB,MAChB,oBACA,uBACA,mBACA,eAAe,MACf,gBACA,oBACA,WACA,cACA,WAAW,MAAM,YAAY,SAAS,KAAK,KAAA,GAC3C,iBAAiB,MAAM,YAAY,SAAS,MAAO,KAAA,GACnD,iBAAiB,MAAM,YAAY,SAAS,IAAI,KAAA,GAChD,UAAU,WACV,oBACA,aAAa,MAAM,YAAY,SAAS,MAAM,KAAA,GAC9C,eACA,eACA,oBACA,aAAa,CAAC,GACd,cACA,gBAAgB,MAChB,4BACA,uBACA,WACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB,QAAQ;CAUnD,MAAM,uBAAuB,eAAe,cAAc;CAC1D,MAAM,mBAAmB,eAAe,UAAU;CAElD,MAAM,SAAS,aACZ,EACC,cACA,UACA,yBAC6E;EAE7E,MAAM,aAAa,oBADG,eAAe,mBAAmBA,kBACrC;GAAe,GAAI;GAAqB;EAAwB,CAAA;EACnF,OAAO,eAAe,aAAa,YAAY,EAAE,MAAM,SAAS,CAAC,IAAI;CACvE,GACA,CAAC,YAAY,CACf;CAEA,OACE,oBAAC,cAAD;EAAc,QAAQ;EACpB,UAAA,oBAAC,gBAAD;GACgB;GACd,kBAAe;GACL;GACM;GACJ;GACI;GACX;GACE;GACP,QAAQ,WAAW;GACnB,WAAW,KACT,YAAY,UAAU,OAAO,MAC7B,eAAe,OAAO,OACtB,OAAO,KACP,SACF;GACe;GACf,GAAI;GAEJ,UAAA,oBAAC,kBAAD;IACa;IACX,UAAU;IACC;IACX,gBAAgB;IAChB,YAAY;IACW;IACJ;IACA;IACN;IACE;IACQ;IACR;IACK;IACL;IACK;IACL;IACa;IACL;IACd;IAET,UAAA,oBAAC,QAAD;KACE,cAAc,gBAAgB;KACV;KAEnB;IACK,CAAA;GACQ,CAAA;EACJ,CAAA;CACJ,CAAA;AAElB,CAAC;AAED,SAAS,cAAc"}
+{"version":3,"file":"Markdown.mjs","names":["MarkdownRender","clsx"],"sources":["../../src/Markdown/Markdown.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useCallback } from 'react';\n\nimport { useStableValue } from '@/hooks/useStableValue';\nimport { PreviewGroup } from '@/Image';\n\nimport { MarkdownProvider } from './components/MarkdownProvider';\nimport { useDelayedAnimated } from './components/useDelayedAnimated';\nimport { rootStyles, styles } from './style';\nimport { MarkdownRender, StreamdownRender } from './SyntaxMarkdown';\nimport { type MarkdownProps } from './type';\nimport { TypographyImpl } from './Typography';\n\nconst Markdown = memo<MarkdownProps>((props) => {\n  const {\n    ref,\n    children = '',\n    className,\n    style,\n    fullFeaturedCodeBlock,\n    onDoubleClick,\n    animated,\n    enableHtmlPreview = false,\n    enableLatex = true,\n    enableMermaid = true,\n    enableImageGallery,\n    enableCustomFootnotes,\n    enableGithubAlert,\n    enableStream = true,\n    componentProps,\n    rehypePluginsAhead,\n    allowHtml,\n    borderRadius,\n    fontSize = props.variant === 'chat' ? 14 : undefined,\n    headerMultiple = props.variant === 'chat' ? 0.25 : undefined,\n    marginMultiple = props.variant === 'chat' ? 1 : undefined,\n    variant = 'default',\n    reactMarkdownProps,\n    lineHeight = props.variant === 'chat' ? 1.6 : undefined,\n    rehypePlugins,\n    remarkPlugins,\n    remarkPluginsAhead,\n    components = {},\n    customRender,\n    showFootnotes = true,\n    streamAnimationGranularity,\n    streamSmoothingPreset,\n    citations,\n    ...rest\n  } = props;\n\n  const delayedAnimated = useDelayedAnimated(animated);\n\n  // Stabilise structural props so an inline `componentProps={{ html:\n  // {...} }}` from the caller doesn't cascade through MarkdownProvider →\n  // useMarkdownComponents → react-markdown's `components` and remount the\n  // entire code-block subtree (including the HtmlPreview iframe) on\n  // every parent render. The deep-equal compare treats inline literals\n  // as the same object as long as their structure matches. Inline\n  // callbacks (`actionsRender`, custom `components`) still need\n  // `useCallback` at the call site — function bodies aren't compared.\n  const stableComponentProps = useStableValue(componentProps);\n  const stableComponents = useStableValue(components);\n\n  const Render = useCallback(\n    ({\n      enableStream,\n      children,\n      reactMarkdownProps,\n    }: Pick<MarkdownProps, 'children' | 'enableStream' | 'reactMarkdownProps'>) => {\n      const DefaultRender = enableStream ? StreamdownRender : MarkdownRender;\n      const defaultDOM = <DefaultRender {...reactMarkdownProps}>{children}</DefaultRender>;\n      return customRender ? customRender(defaultDOM, { text: children }) : defaultDOM;\n    },\n    [customRender],\n  );\n\n  return (\n    <PreviewGroup enable={enableImageGallery}>\n      <TypographyImpl\n        borderRadius={borderRadius}\n        data-code-type=\"markdown\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        ref={ref}\n        style={style}\n        xstyle={rootStyles.root}\n        className={clsx(\n          variant === 'chat' && styles.chat,\n          enableLatex && styles.latex,\n          styles.gfm,\n          className,\n        )}\n        onDoubleClick={onDoubleClick}\n        {...rest}\n      >\n        <MarkdownProvider\n          allowHtml={allowHtml}\n          animated={delayedAnimated}\n          citations={citations}\n          componentProps={stableComponentProps}\n          components={stableComponents}\n          enableCustomFootnotes={enableCustomFootnotes}\n          enableGithubAlert={enableGithubAlert}\n          enableHtmlPreview={enableHtmlPreview}\n          enableLatex={enableLatex}\n          enableMermaid={enableMermaid}\n          fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n          rehypePlugins={rehypePlugins}\n          rehypePluginsAhead={rehypePluginsAhead}\n          remarkPlugins={remarkPlugins}\n          remarkPluginsAhead={remarkPluginsAhead}\n          showFootnotes={showFootnotes}\n          streamAnimationGranularity={streamAnimationGranularity}\n          streamSmoothingPreset={streamSmoothingPreset}\n          variant={variant}\n        >\n          <Render\n            enableStream={enableStream && delayedAnimated}\n            reactMarkdownProps={reactMarkdownProps}\n          >\n            {children}\n          </Render>\n        </MarkdownProvider>\n      </TypographyImpl>\n    </PreviewGroup>\n  );\n});\n\nMarkdown.displayName = 'Markdown';\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,WAAW,MAAqB,UAAU;CAC9C,MAAM,EACJ,KACA,WAAW,IACX,WACA,OACA,uBACA,eACA,UACA,oBAAoB,OACpB,cAAc,MACd,gBAAgB,MAChB,oBACA,uBACA,mBACA,eAAe,MACf,gBACA,oBACA,WACA,cACA,WAAW,MAAM,YAAY,SAAS,KAAK,KAAA,GAC3C,iBAAiB,MAAM,YAAY,SAAS,MAAO,KAAA,GACnD,iBAAiB,MAAM,YAAY,SAAS,IAAI,KAAA,GAChD,UAAU,WACV,oBACA,aAAa,MAAM,YAAY,SAAS,MAAM,KAAA,GAC9C,eACA,eACA,oBACA,aAAa,CAAC,GACd,cACA,gBAAgB,MAChB,4BACA,uBACA,WACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB,QAAQ;CAUnD,MAAM,uBAAuB,eAAe,cAAc;CAC1D,MAAM,mBAAmB,eAAe,UAAU;CAElD,MAAM,SAAS,aACZ,EACC,cACA,UACA,yBAC6E;EAE7E,MAAM,aAAa,oBADG,eAAe,mBAAmBA,kBACrC;GAAe,GAAI;GAAqB;EAAwB,CAAA;EACnF,OAAO,eAAe,aAAa,YAAY,EAAE,MAAM,SAAS,CAAC,IAAI;CACvE,GACA,CAAC,YAAY,CACf;CAEA,OACE,oBAAC,cAAD;EAAc,QAAQ;EACpB,UAAA,oBAAC,gBAAD;GACgB;GACd,kBAAe;GACL;GACM;GACJ;GACI;GACX;GACE;GACP,QAAQ,WAAW;GACnB,WAAWC,OACT,YAAY,UAAU,OAAO,MAC7B,eAAe,OAAO,OACtB,OAAO,KACP,SACF;GACe;GACf,GAAI;GAEJ,UAAA,oBAAC,kBAAD;IACa;IACX,UAAU;IACC;IACX,gBAAgB;IAChB,YAAY;IACW;IACJ;IACA;IACN;IACE;IACQ;IACR;IACK;IACL;IACK;IACL;IACa;IACL;IACd;IAET,UAAA,oBAAC,QAAD;KACE,cAAc,gBAAgB;KACV;KAEnB;IACK,CAAA;GACQ,CAAA;EACJ,CAAA;CACJ,CAAA;AAElB,CAAC;AAED,SAAS,cAAc"}

package/es/Markdown/Typography.mjs

@@ -2,12 +2,12 @@
 import { styleProps } from "../styles/stylex/props.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Markdown/Typography.tsx
 const TypographyImpl = ({ ref, children, className, fontSize = 16, headerMultiple = 1, marginMultiple = 2, lineHeight = 1.8, borderRadius = 8, style, xstyle, ...rest }) => {
 	return /* @__PURE__ */ jsx("article", {
 		ref,
-		...styleProps(xstyle, clsx("lobe-markdown", className), {
+		...styleProps(xstyle, clsx$1("lobe-markdown", className), {
 			"--lobe-markdown-border-radius": borderRadius,
 			"--lobe-markdown-font-size": `${fontSize}px`,
 			"--lobe-markdown-header-multiple": headerMultiple,

package/es/Markdown/Typography.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.mjs","names":[],"sources":["../../src/Markdown/Typography.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { TypographyProps } from './type';\n\nexport const TypographyImpl = ({\n  ref,\n  children,\n  className,\n  fontSize = 16,\n  headerMultiple = 1,\n  marginMultiple = 2,\n  lineHeight = 1.8,\n  borderRadius = 8,\n  style,\n  xstyle,\n  ...rest\n}: TypographyProps & { xstyle?: Parameters<typeof styleProps>[0] }) => {\n  return (\n    <article\n      ref={ref}\n      {...styleProps(xstyle, clsx('lobe-markdown', className), {\n        '--lobe-markdown-border-radius': borderRadius,\n        '--lobe-markdown-font-size': `${fontSize}px`,\n        '--lobe-markdown-header-multiple': headerMultiple,\n        '--lobe-markdown-line-height': lineHeight,\n        '--lobe-markdown-margin-multiple': marginMultiple,\n        ...style,\n      } as CSSProperties)}\n      {...rest}\n    >\n      {children}\n    </article>\n  );\n};\n\nconst Typography = memo<TypographyProps>((props) => <TypographyImpl {...props} />);\n\nTypography.displayName = 'Typography';\n\nexport default Typography;\n"],"mappings":";;;;;;AAWA,MAAa,kBAAkB,EAC7B,KACA,UACA,WACA,WAAW,IACX,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,KACb,eAAe,GACf,OACA,QACA,GAAG,WACkE;CACrE,OACE,oBAAC,WAAD;EACO;EACL,GAAI,WAAW,QAAQ,KAAK,iBAAiB,SAAS,GAAG;GACvD,iCAAiC;GACjC,6BAA6B,GAAG,SAAS;GACzC,mCAAmC;GACnC,+BAA+B;GAC/B,mCAAmC;GACnC,GAAG;EACL,CAAkB;EAClB,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAM,aAAa,MAAuB,UAAU,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA,CAAC;AAEjF,WAAW,cAAc"}
+{"version":3,"file":"Typography.mjs","names":["clsx"],"sources":["../../src/Markdown/Typography.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { TypographyProps } from './type';\n\nexport const TypographyImpl = ({\n  ref,\n  children,\n  className,\n  fontSize = 16,\n  headerMultiple = 1,\n  marginMultiple = 2,\n  lineHeight = 1.8,\n  borderRadius = 8,\n  style,\n  xstyle,\n  ...rest\n}: TypographyProps & { xstyle?: Parameters<typeof styleProps>[0] }) => {\n  return (\n    <article\n      ref={ref}\n      {...styleProps(xstyle, clsx('lobe-markdown', className), {\n        '--lobe-markdown-border-radius': borderRadius,\n        '--lobe-markdown-font-size': `${fontSize}px`,\n        '--lobe-markdown-header-multiple': headerMultiple,\n        '--lobe-markdown-line-height': lineHeight,\n        '--lobe-markdown-margin-multiple': marginMultiple,\n        ...style,\n      } as CSSProperties)}\n      {...rest}\n    >\n      {children}\n    </article>\n  );\n};\n\nconst Typography = memo<TypographyProps>((props) => <TypographyImpl {...props} />);\n\nTypography.displayName = 'Typography';\n\nexport default Typography;\n"],"mappings":";;;;;;AAWA,MAAa,kBAAkB,EAC7B,KACA,UACA,WACA,WAAW,IACX,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,KACb,eAAe,GACf,OACA,QACA,GAAG,WACkE;CACrE,OACE,oBAAC,WAAD;EACO;EACL,GAAI,WAAW,QAAQA,OAAK,iBAAiB,SAAS,GAAG;GACvD,iCAAiC;GACjC,6BAA6B,GAAG,SAAS;GACzC,mCAAmC;GACnC,+BAA+B;GAC/B,mCAAmC;GACnC,GAAG;EACL,CAAkB;EAClB,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAM,aAAa,MAAuB,UAAU,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA,CAAC;AAEjF,WAAW,cAAc"}

package/es/Mermaid/FullFeatured.mjs

@@ -9,7 +9,7 @@ import CopyButton from "../CopyButton/CopyButton.mjs";
 import { bodyStyles, headerFlexProps, headerStyles, rootClassName, rootStyles } from "../Highlighter/style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { ChevronDown, ChevronRight } from "lucide-react";
 //#region src/Mermaid/FullFeatured.tsx
 const MermaidHeaderLanguage = memo(({ fileName, language, showLanguage }) => {
@@ -106,7 +106,7 @@ const MermaidFullFeatured = memo(({ showLanguage, styles: customStyles, classNam
 			})]
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
 			height: expand ? void 0 : 0,
-			...styleProps(bodyStyles(expand, variant), clsx(expand && "ant-highlighter-highlighter-body-expand", classNames?.body), customStyles?.body),
+			...styleProps(bodyStyles(expand, variant), clsx$1(expand && "ant-highlighter-highlighter-body-expand", classNames?.body), customStyles?.body),
 			children
 		})]
 	});

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 clsx from 'clsx';\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 {\n  bodyStyles,\n  expandCls,\n  headerFlexProps,\n  headerStyles,\n  rootClassName,\n  rootStyles,\n} from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\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={'language-title'}\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        data-code-type=\"mermaid\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(false, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          {...headerFlexProps(variant)}\n          {...styleProps(headerStyles(variant), classNames?.header, customStyles?.header)}\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          height={expand ? undefined : 0}\n          {...styleProps(\n            bodyStyles(expand, variant),\n            clsx(expand && expandCls, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MermaidFullFeatured;\n"],"mappings":";;;;;;;;;;;;;;AAwBA,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,kBAAe;EACf,OAAO;EACP,GAAI;EACJ,GAAI,WAAW,WAAW;GAAE;GAAQ;EAAQ,CAAC,GAAG,cAAc,OAAO,SAAS,GAAG,KAAK;EAJxF,UAAA,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,SAAS;GACT,SAAS;GACT,GAAI,gBAAgB,OAAO;GAC3B,GAAI,WAAW,aAAa,OAAO,GAAG,YAAY,QAAQ,cAAc,MAAM;GANhF,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,QAAQ,SAAS,KAAA,IAAY;GAC7B,GAAI,WACF,WAAW,QAAQ,OAAO,GAC1B,KAAK,UAAA,2CAAqB,YAAY,IAAI,GAC1C,cAAc,IAChB;GAEC;EACM,CAAA,CACF;;AAEb,CACF"}
+{"version":3,"file":"FullFeatured.mjs","names":["Flexbox","clsx"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\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 {\n  bodyStyles,\n  expandCls,\n  headerFlexProps,\n  headerStyles,\n  rootClassName,\n  rootStyles,\n} from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\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={'language-title'}\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        data-code-type=\"mermaid\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(false, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          {...headerFlexProps(variant)}\n          {...styleProps(headerStyles(variant), classNames?.header, customStyles?.header)}\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          height={expand ? undefined : 0}\n          {...styleProps(\n            bodyStyles(expand, variant),\n            clsx(expand && expandCls, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MermaidFullFeatured;\n"],"mappings":";;;;;;;;;;;;;;AAwBA,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,kBAAe;EACf,OAAO;EACP,GAAI;EACJ,GAAI,WAAW,WAAW;GAAE;GAAQ;EAAQ,CAAC,GAAG,cAAc,OAAO,SAAS,GAAG,KAAK;EAJxF,UAAA,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,SAAS;GACT,SAAS;GACT,GAAI,gBAAgB,OAAO;GAC3B,GAAI,WAAW,aAAa,OAAO,GAAG,YAAY,QAAQ,cAAc,MAAM;GANhF,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,QAAQ,SAAS,KAAA,IAAY;GAC7B,GAAI,WACF,WAAW,QAAQ,OAAO,GAC1BC,OAAK,UAAA,2CAAqB,YAAY,IAAI,GAC1C,cAAc,IAChB;GAEC;EACM,CAAA,CACF;;AAEb,CACF"}

package/es/Mermaid/SyntaxMermaid/index.mjs

@@ -5,20 +5,20 @@ import StreamMermaid from "./StreamMermaid.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Mermaid/SyntaxMermaid/index.tsx
 const SyntaxMermaid = memo(({ animated, children, className, fallbackClassName, ref, style, theme: customTheme, variant = "borderless" }) => {
 	const isDefaultTheme = customTheme === "lobe-theme" || !customTheme;
 	const showBackground = !isDefaultTheme && variant === "filled";
 	const resolvedTheme = isDefaultTheme ? void 0 : customTheme;
-	const classes = clsx(!showBackground && "lobe-mermaid-transparent", animated && "lobe-mermaid-animated");
+	const classes = clsx$1(!showBackground && "lobe-mermaid-transparent", animated && "lobe-mermaid-animated");
 	const padded = variant !== "borderless" && styles.padded;
-	const mermaidClassName = styleProps([styles.root, padded], clsx("ant-mermaid-mermaid lobe-mermaid", classes, className)).className;
+	const mermaidClassName = styleProps([styles.root, padded], clsx$1("ant-mermaid-mermaid lobe-mermaid", classes, className)).className;
 	const fallback = styleProps([
 		styles.root,
 		styles.unmermaid,
 		padded
-	], clsx(classes, fallbackClassName)).className;
+	], clsx$1(classes, fallbackClassName)).className;
 	if (animated) return /* @__PURE__ */ jsx(StreamMermaid, {
 		className: mermaidClassName,
 		fallbackClassName: fallback,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { SyntaxMermaidProps } from '../type';\nimport StaticMermaid from './StaticMermaid';\nimport StreamMermaid from './StreamMermaid';\nimport { styles } from './style';\n\nconst SyntaxMermaid = memo<SyntaxMermaidProps>(\n  ({\n    animated,\n    children,\n    className,\n    fallbackClassName,\n    ref,\n    style,\n    theme: customTheme,\n    variant = 'borderless',\n  }) => {\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : customTheme;\n\n    const classes = clsx(\n      !showBackground && 'lobe-mermaid-transparent',\n      animated && 'lobe-mermaid-animated',\n    );\n    const padded = variant !== 'borderless' && styles.padded;\n    const mermaidClassName = styleProps(\n      [styles.root, padded],\n      clsx('ant-mermaid-mermaid lobe-mermaid', classes, className),\n    ).className;\n    const fallback = styleProps(\n      [styles.root, styles.unmermaid, padded],\n      clsx(classes, fallbackClassName),\n    ).className;\n\n    if (animated) {\n      return (\n        <StreamMermaid\n          className={mermaidClassName}\n          fallbackClassName={fallback}\n          ref={ref}\n          style={style}\n          theme={resolvedTheme}\n          variant={variant}\n        >\n          {children}\n        </StreamMermaid>\n      );\n    }\n\n    return (\n      <StaticMermaid\n        className={mermaidClassName}\n        fallbackClassName={fallback}\n        ref={ref}\n        style={style}\n        theme={resolvedTheme}\n        variant={variant}\n      >\n        {children}\n      </StaticMermaid>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.animated === nextProps.animated,\n);\n\nSyntaxMermaid.displayName = 'SyntaxMermaid';\n\nexport default SyntaxMermaid;\n"],"mappings":";;;;;;;;;AAYA,MAAM,gBAAgB,MACnB,EACC,UACA,UACA,WACA,mBACA,KACA,OACA,OAAO,aACP,UAAU,mBACN;CACJ,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CACxD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,UAAU,KACd,CAAC,kBAAkB,4BACnB,YAAY,uBACd;CACA,MAAM,SAAS,YAAY,gBAAgB,OAAO;CAClD,MAAM,mBAAmB,WACvB,CAAC,OAAO,MAAM,MAAM,GACpB,KAAK,oCAAoC,SAAS,SAAS,CAC7D,CAAC,CAAC;CACF,MAAM,WAAW,WACf;EAAC,OAAO;EAAM,OAAO;EAAW;CAAM,GACtC,KAAK,SAAS,iBAAiB,CACjC,CAAC,CAAC;CAEF,IAAI,UACF,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;CAInB,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;AAEnB,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/Mermaid/SyntaxMermaid/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { SyntaxMermaidProps } from '../type';\nimport StaticMermaid from './StaticMermaid';\nimport StreamMermaid from './StreamMermaid';\nimport { styles } from './style';\n\nconst SyntaxMermaid = memo<SyntaxMermaidProps>(\n  ({\n    animated,\n    children,\n    className,\n    fallbackClassName,\n    ref,\n    style,\n    theme: customTheme,\n    variant = 'borderless',\n  }) => {\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : customTheme;\n\n    const classes = clsx(\n      !showBackground && 'lobe-mermaid-transparent',\n      animated && 'lobe-mermaid-animated',\n    );\n    const padded = variant !== 'borderless' && styles.padded;\n    const mermaidClassName = styleProps(\n      [styles.root, padded],\n      clsx('ant-mermaid-mermaid lobe-mermaid', classes, className),\n    ).className;\n    const fallback = styleProps(\n      [styles.root, styles.unmermaid, padded],\n      clsx(classes, fallbackClassName),\n    ).className;\n\n    if (animated) {\n      return (\n        <StreamMermaid\n          className={mermaidClassName}\n          fallbackClassName={fallback}\n          ref={ref}\n          style={style}\n          theme={resolvedTheme}\n          variant={variant}\n        >\n          {children}\n        </StreamMermaid>\n      );\n    }\n\n    return (\n      <StaticMermaid\n        className={mermaidClassName}\n        fallbackClassName={fallback}\n        ref={ref}\n        style={style}\n        theme={resolvedTheme}\n        variant={variant}\n      >\n        {children}\n      </StaticMermaid>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.animated === nextProps.animated,\n);\n\nSyntaxMermaid.displayName = 'SyntaxMermaid';\n\nexport default SyntaxMermaid;\n"],"mappings":";;;;;;;;;AAYA,MAAM,gBAAgB,MACnB,EACC,UACA,UACA,WACA,mBACA,KACA,OACA,OAAO,aACP,UAAU,mBACN;CACJ,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CACxD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,UAAUA,OACd,CAAC,kBAAkB,4BACnB,YAAY,uBACd;CACA,MAAM,SAAS,YAAY,gBAAgB,OAAO;CAClD,MAAM,mBAAmB,WACvB,CAAC,OAAO,MAAM,MAAM,GACpBA,OAAK,oCAAoC,SAAS,SAAS,CAC7D,CAAC,CAAC;CACF,MAAM,WAAW,WACf;EAAC,OAAO;EAAM,OAAO;EAAW;CAAM,GACtCA,OAAK,SAAS,iBAAiB,CACjC,CAAC,CAAC;CAEF,IAAI,UACF,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;CAInB,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;AAEnB,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,cAAc,cAAc"}

package/es/Modal/atoms.mjs

@@ -11,7 +11,7 @@ import { ModalLayerProvider, useModalLayer } from "./ModalLayerContext.mjs";
 import { styles } from "./style.mjs";
 import { cloneElement, createContext, createElement, isValidElement, use, useCallback, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { X } from "lucide-react";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -20,8 +20,8 @@ import { AnimatePresence } from "motion/react";
 //#region src/Modal/atoms.tsx
 const mergeStateClassName = (xstyle, className) => {
 	const base = stylex.props(xstyle).className;
-	if (typeof className === "function") return (state) => clsx(base, className(state));
-	return clsx(base, className);
+	if (typeof className === "function") return (state) => clsx$1(base, className(state));
+	return clsx$1(base, className);
 };
 const ModalOpenContext = createContext(null);
 const ModalActionsContext = createContext(null);
@@ -100,7 +100,7 @@ const ModalBackdrop = ({ className, style, ...rest }) => {
 	const layerStyle = layer?.zIndex !== void 0 ? { zIndex: layer.zIndex } : void 0;
 	if (open !== null) return /* @__PURE__ */ jsx(Dialog.Backdrop, {
 		...rest,
-		className: clsx(stylex.props(styles.backdrop).className, className),
+		className: clsx$1(stylex.props(styles.backdrop).className, className),
 		style: {
 			...layerStyle,
 			...style,
@@ -130,7 +130,7 @@ const ModalPopupImpl = ({ className, children, width, style, motionProps, panelC
 	const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);
 	if (open !== null && actions) return /* @__PURE__ */ jsx(Dialog.Popup, {
 		...rest,
-		className: clsx(stylex.props(styles.popup, xstyle).className, className),
+		className: clsx$1(stylex.props(styles.popup, xstyle).className, className),
 		ref: composedRef,
 		style: {
 			...popupZIndexStyle,
@@ -147,7 +147,7 @@ const ModalPopupImpl = ({ className, children, width, style, motionProps, panelC
 					transition: "none",
 					...style
 				},
-				className: clsx(stylex.props(styles.popupInner, panelXstyle).className, panelClassName)
+				className: clsx$1(stylex.props(styles.popupInner, panelXstyle).className, panelClassName)
 			}, children) : null
 		})
 	});

package/es/Modal/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopupImpl = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  xstyle,\n  ...rest\n}: ModalPopupProps & { panelXstyle?: XStyle; xstyle?: XStyle }) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(styles.popup, xstyle).className, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n              className={clsx(\n                stylex.props(styles.popupInner, panelXstyle).className,\n                panelClassName,\n              )}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName([styles.popup, xstyle], className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        {...styleProps([styles.popupInner, panelXstyle], panelClassName, {\n          maxWidth: width ?? undefined,\n          ...style,\n        })}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const ModalPopup: React.FC<ModalPopupProps> = ModalPopupImpl;\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeaderImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalHeaderProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.header, xstyle], className, style)} />\n);\nexport const ModalHeader: React.FC<ModalHeaderProps> = ModalHeaderImpl;\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitleImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: ModalTitleProps & { xstyle?: XStyle }) => (\n  <Dialog.Title\n    {...rest}\n    className={mergeStateClassName([styles.title, xstyle], className as any) as any}\n  />\n);\nexport const ModalTitle: React.FC<ModalTitleProps> = ModalTitleImpl;\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const ModalContent: React.FC<ModalContentProps> = ModalContentImpl;\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooterImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalFooterProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.footer, xstyle], className, style)} />\n);\nexport const ModalFooter: React.FC<ModalFooterProps> = ModalFooterImpl;\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalCloseImpl = ({\n  className,\n  children,\n  xstyle,\n  ...rest\n}: ModalCloseProps & { xstyle?: XStyle }) => (\n  <Dialog.Close\n    {...rest}\n    className={\n      mergeStateClassName(\n        [styles.closeInline, styles.close, focusRing.info, xstyle],\n        className as any,\n      ) as any\n    }\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\nexport const ModalClose: React.FC<ModalCloseProps> = ModalCloseImpl;\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopupImpl = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  xstyle,\n  ...rest\n}: ModalPopupProps & { panelXstyle?: XStyle; xstyle?: XStyle }) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(styles.popup, xstyle).className, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n              className={clsx(\n                stylex.props(styles.popupInner, panelXstyle).className,\n                panelClassName,\n              )}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName([styles.popup, xstyle], className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        {...styleProps([styles.popupInner, panelXstyle], panelClassName, {\n          maxWidth: width ?? undefined,\n          ...style,\n        })}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const ModalPopup: React.FC<ModalPopupProps> = ModalPopupImpl;\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeaderImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalHeaderProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.header, xstyle], className, style)} />\n);\nexport const ModalHeader: React.FC<ModalHeaderProps> = ModalHeaderImpl;\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitleImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: ModalTitleProps & { xstyle?: XStyle }) => (\n  <Dialog.Title\n    {...rest}\n    className={mergeStateClassName([styles.title, xstyle], className as any) as any}\n  />\n);\nexport const ModalTitle: React.FC<ModalTitleProps> = ModalTitleImpl;\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const ModalContent: React.FC<ModalContentProps> = ModalContentImpl;\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooterImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalFooterProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.footer, xstyle], className, style)} />\n);\nexport const ModalFooter: React.FC<ModalFooterProps> = ModalFooterImpl;\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalCloseImpl = ({\n  className,\n  children,\n  xstyle,\n  ...rest\n}: ModalCloseProps & { xstyle?: XStyle }) => (\n  <Dialog.Close\n    {...rest}\n    className={\n      mergeStateClassName(\n        [styles.closeInline, styles.close, focusRing.info, xstyle],\n        className as any,\n      ) as any\n    }\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\nexport const ModalClose: React.FC<ModalCloseProps> = ModalCloseImpl;\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}