@reforma/components 0.1.5 → 0.2.0

package/dist/Scrollable/useScrollChrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollChrome.js","sources":["../../src/Scrollable/useScrollChrome.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';\n\nimport styles from './Scrollable.module.css';\n\nimport type { ScrollAxisSource } from './scrollAxisSource';\n\nexport type ScrollChromeEdges = {\n    atVerticalStart: boolean;\n    atVerticalEnd: boolean;\n    atHorizontalStart: boolean;\n    atHorizontalEnd: boolean;\n};\n\nexport type UseScrollChromeOptions = {\n    verticalSource?: ScrollAxisSource | null;\n    horizontalSource?: ScrollAxisSource | null;\n    /**\n     * When a source identity changes (e.g. external scroll target mounts),\n     * pass a new key so listeners and ResizeObserver re-bind.\n     */\n    sourceKey?: unknown;\n    gap?: number;\n    alwaysShowScrollbar?: boolean;\n    poolingInterval?: number;\n};\n\nexport type UseScrollChromeResult = {\n    rootRef: React.RefObject<HTMLDivElement | null>;\n    edgesRef: React.RefObject<ScrollChromeEdges>;\n    setScrollbarV: (el: HTMLDivElement | null) => void;\n    setScrollbarH: (el: HTMLDivElement | null) => void;\n    /** Force a chrome redraw (e.g. after layout that sources do not observe). */\n    redraw: () => void;\n    handlePointerDown: (e: React.PointerEvent) => void;\n    rootPointerHandlers: {\n        onPointerEnter: () => void;\n        onPointerLeave: () => void;\n    };\n};\n\ntype AxisEdgeKeys = {\n    start: keyof ScrollChromeEdges;\n    end: keyof ScrollChromeEdges;\n    startAttr: string;\n    endAttr: string;\n    showAttr: string;\n};\n\nconst VERTICAL_EDGES: AxisEdgeKeys = {\n    start: 'atVerticalStart',\n    end: 'atVerticalEnd',\n    startAttr: 'data-scroll-v-start',\n    endAttr: 'data-scroll-v-end',\n    showAttr: 'data-scroll-show-v',\n};\n\nconst HORIZONTAL_EDGES: AxisEdgeKeys = {\n    start: 'atHorizontalStart',\n    end: 'atHorizontalEnd',\n    startAttr: 'data-scroll-h-start',\n    endAttr: 'data-scroll-h-end',\n    showAttr: 'data-scroll-show-h',\n};\n\nfunction clearAxisEdges(\n    root: HTMLDivElement | null,\n    edges: ScrollChromeEdges,\n    keys: AxisEdgeKeys\n) {\n    edges[keys.start] = false;\n    edges[keys.end] = false;\n\n    if (root) {\n        root.removeAttribute(keys.startAttr);\n        root.removeAttribute(keys.endAttr);\n        root.removeAttribute(keys.showAttr);\n    }\n}\n\nfunction drawAxis(\n    root: HTMLDivElement | null,\n    source: ScrollAxisSource | null | undefined,\n    scrollbar: HTMLDivElement | null,\n    scrollSizeRef: { current: number },\n    edges: ScrollChromeEdges,\n    keys: AxisEdgeKeys,\n    gap: number\n) {\n    if (!source) {\n        clearAxisEdges(root, edges, keys);\n\n        return;\n    }\n\n    const metrics = source.getMetrics();\n\n    if (!metrics || metrics.clientSize <= 0 || metrics.scrollSize <= 0) {\n        clearAxisEdges(root, edges, keys);\n\n        return;\n    }\n\n    const { offset, scrollSize, clientSize } = metrics;\n    const edgeEpsilon = 1;\n    const gapPercent = (gap / clientSize) * 100;\n    const thumbLength = (clientSize / scrollSize * 100) - (gapPercent * 2);\n    const thumbOffset = (offset / scrollSize * 100) + gapPercent;\n    const show = thumbLength < 100 - (gapPercent * 2);\n    const atStart = show ? offset <= edgeEpsilon : true;\n    const atEnd = show ? offset + clientSize >= scrollSize - edgeEpsilon : true;\n\n    scrollSizeRef.current = scrollSize;\n\n    if (scrollbar) {\n        scrollbar.style.setProperty('--ms-thumb-length', `${ thumbLength }%`);\n        scrollbar.style.setProperty('--ms-thumb-offset', `${ thumbOffset }%`);\n    }\n\n    edges[keys.start] = atStart;\n    edges[keys.end] = atEnd;\n\n    if (root) {\n        root.setAttribute(keys.startAttr, String(atStart));\n        root.setAttribute(keys.endAttr, String(atEnd));\n        root.setAttribute(keys.showAttr, show ? 'true' : 'false');\n    }\n}\n\n/**\n * Custom scrollbar chrome driven by direct DOM updates — no React state on scroll.\n * Shared by {@link Scrollable} and app-local scroll chrome (e.g. layers tree, frame page).\n */\nexport function useScrollChrome({\n    verticalSource,\n    horizontalSource,\n    sourceKey,\n    gap = 0,\n    alwaysShowScrollbar,\n    poolingInterval,\n}: UseScrollChromeOptions): UseScrollChromeResult {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const scrollbarVRef = useRef<HTMLDivElement>(null);\n    const scrollbarHRef = useRef<HTMLDivElement>(null);\n\n    const edgesRef = useRef<ScrollChromeEdges>({\n        atVerticalStart: true,\n        atVerticalEnd: true,\n        atHorizontalStart: true,\n        atHorizontalEnd: true,\n    });\n\n    const rafIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n    const shouldForceDrawRef = useRef(false);\n\n    const dragMetaRef = useRef<{\n        source: ScrollAxisSource;\n        isVertical: boolean;\n        fromScrollOffset: number;\n        fromScrollSize: number;\n        fromOffset: number;\n        totalDistance: number;\n    } | null>(null);\n\n    const scrollSizeVRef = useRef(0);\n    const scrollSizeHRef = useRef(0);\n\n    const chromeRef = useRef({\n        hovered: false,\n        dragging: false,\n    });\n\n    const verticalSourceRef = useRef(verticalSource);\n    const horizontalSourceRef = useRef(horizontalSource);\n\n    verticalSourceRef.current = verticalSource;\n    horizontalSourceRef.current = horizontalSource;\n\n    const setScrollbarV = useCallback((el: HTMLDivElement | null) => {\n        scrollbarVRef.current = el;\n    }, []);\n\n    const setScrollbarH = useCallback((el: HTMLDivElement | null) => {\n        scrollbarHRef.current = el;\n    }, []);\n\n    const applyChromeClasses = useCallback(() => {\n        const root = rootRef.current;\n\n        if (!root) {\n            return;\n        }\n\n        const { hovered, dragging } = chromeRef.current;\n\n        root.classList.toggle(styles.hover, alwaysShowScrollbar || hovered);\n        root.classList.toggle(styles.inDrag, dragging);\n    }, [alwaysShowScrollbar]);\n\n    const draw = useCallback(() => {\n        shouldForceDrawRef.current = false;\n\n        const root = rootRef.current;\n        const edges = edgesRef.current;\n\n        drawAxis(\n            root,\n            verticalSourceRef.current,\n            scrollbarVRef.current,\n            scrollSizeVRef,\n            edges,\n            VERTICAL_EDGES,\n            gap\n        );\n        drawAxis(\n            root,\n            horizontalSourceRef.current,\n            scrollbarHRef.current,\n            scrollSizeHRef,\n            edges,\n            HORIZONTAL_EDGES,\n            gap\n        );\n    }, [gap]);\n\n    const startDrag = useCallback((e: React.PointerEvent, isVertical: boolean) => {\n        const source = isVertical ? verticalSourceRef.current : horizontalSourceRef.current;\n        const metrics = source?.getMetrics();\n\n        if (!source || !metrics || metrics.clientSize <= 0) {\n            return;\n        }\n\n        e.preventDefault();\n        e.stopPropagation();\n\n        dragMetaRef.current = {\n            source,\n            isVertical,\n            fromScrollOffset: metrics.offset,\n            fromScrollSize: metrics.scrollSize,\n            fromOffset: isVertical ? e.screenY : e.screenX,\n            totalDistance: metrics.clientSize - (gap * 2),\n        };\n    }, [gap]);\n\n    const processDrag = useCallback((e: PointerEvent) => {\n        const dragMeta = dragMetaRef.current;\n\n        if (!dragMeta || dragMeta.totalDistance === 0) {\n            return;\n        }\n\n        e.preventDefault();\n        e.stopPropagation();\n        e.stopImmediatePropagation();\n\n        const { source, isVertical, fromOffset, fromScrollOffset, fromScrollSize, totalDistance } = dragMeta;\n        const toOffset = isVertical ? e.screenY : e.screenX;\n        const movePercent = (toOffset - fromOffset) / totalDistance;\n\n        source.setOffset(fromScrollOffset + (fromScrollSize * movePercent));\n    }, []);\n\n    const endDrag = useCallback((e: PointerEvent) => {\n        e.preventDefault();\n        e.stopPropagation();\n        e.stopImmediatePropagation();\n\n        dragMetaRef.current = null;\n    }, []);\n\n    const handlePointerDown = useCallback((e: React.PointerEvent) => {\n        const isVertical = (e.target as HTMLElement).classList.contains(styles.scrollbarV);\n\n        startDrag(e, isVertical);\n        chromeRef.current.dragging = true;\n        applyChromeClasses();\n\n        const abortController = new AbortController();\n\n        document.addEventListener('pointermove', (ev: PointerEvent) => {\n            processDrag(ev);\n        }, {\n            signal: abortController.signal,\n            capture: true,\n        });\n\n        document.addEventListener('pointerup', (ev: PointerEvent) => {\n            abortController.abort();\n            processDrag(ev);\n            endDrag(ev);\n            chromeRef.current.dragging = false;\n            applyChromeClasses();\n        }, {\n            signal: abortController.signal,\n            capture: true,\n        });\n    }, [startDrag, processDrag, endDrag, applyChromeClasses]);\n\n    const rootPointerHandlers = useMemo(\n        () => ({\n            onPointerEnter: () => {\n                chromeRef.current.hovered = true;\n                applyChromeClasses();\n            },\n            onPointerLeave: () => {\n                chromeRef.current.hovered = false;\n                applyChromeClasses();\n            },\n        }),\n        [applyChromeClasses]\n    );\n\n    useLayoutEffect(() => {\n        applyChromeClasses();\n    }, [applyChromeClasses]);\n\n    useLayoutEffect(() => {\n        draw();\n    }, [draw, sourceKey, verticalSource, horizontalSource]);\n\n    useLayoutEffect(() => {\n        if (typeof ResizeObserver === 'undefined') {\n            return;\n        }\n\n        const observed = new Set<Element>();\n        const ro = new ResizeObserver(() => draw());\n\n        for (const source of [verticalSource, horizontalSource]) {\n            const el = source?.getObserveElement?.();\n\n            if (el && !observed.has(el)) {\n                observed.add(el);\n                ro.observe(el);\n            }\n        }\n\n        if (observed.size === 0) {\n            ro.disconnect();\n\n            return;\n        }\n\n        return () => {\n            ro.disconnect();\n        };\n    }, [draw, sourceKey, verticalSource, horizontalSource]);\n\n    useEffect(() => {\n        const disposers: Array<() => void> = [];\n        const subscribedElements = new Set<Element>();\n\n        const onChange = () => {\n            draw();\n            requestAnimationFrame(() => {\n                shouldForceDrawRef.current = true;\n            });\n        };\n\n        for (const source of [verticalSource, horizontalSource]) {\n            if (!source?.subscribe) {\n                continue;\n            }\n\n            // Same DOM node → one scroll listener (both axes on one element).\n            const el = source.getObserveElement?.();\n\n            if (el) {\n                if (subscribedElements.has(el)) {\n                    continue;\n                }\n\n                subscribedElements.add(el);\n            }\n\n            disposers.push(source.subscribe(onChange));\n        }\n\n        return () => {\n            disposers.forEach(dispose => dispose());\n        };\n    }, [draw, sourceKey, verticalSource, horizontalSource]);\n\n    useEffect(() => {\n        rafIntervalRef.current = setInterval(() => {\n            const vMetrics = verticalSourceRef.current?.getMetrics();\n            const hMetrics = horizontalSourceRef.current?.getMetrics();\n\n            const needsUpdate\n                = shouldForceDrawRef.current\n                  || (vMetrics != null && vMetrics.scrollSize !== scrollSizeVRef.current)\n                  || (hMetrics != null && hMetrics.scrollSize !== scrollSizeHRef.current);\n\n            if (needsUpdate) {\n                draw();\n            }\n        }, poolingInterval ?? 100);\n\n        return () => {\n            if (rafIntervalRef.current) {\n                clearInterval(rafIntervalRef.current);\n            }\n\n            dragMetaRef.current = null;\n        };\n    }, [draw, poolingInterval]);\n\n    return {\n        rootRef,\n        edgesRef,\n        setScrollbarV,\n        setScrollbarH,\n        redraw: draw,\n        handlePointerDown,\n        rootPointerHandlers,\n    };\n}\n"],"names":["VERTICAL_EDGES","HORIZONTAL_EDGES","clearAxisEdges","root","edges","keys","drawAxis","source","scrollbar","scrollSizeRef","gap","metrics","offset","scrollSize","clientSize","edgeEpsilon","gapPercent","thumbLength","thumbOffset","show","atStart","atEnd","useScrollChrome","verticalSource","horizontalSource","sourceKey","alwaysShowScrollbar","poolingInterval","rootRef","useRef","scrollbarVRef","scrollbarHRef","edgesRef","rafIntervalRef","shouldForceDrawRef","dragMetaRef","scrollSizeVRef","scrollSizeHRef","chromeRef","verticalSourceRef","horizontalSourceRef","setScrollbarV","useCallback","el","setScrollbarH","applyChromeClasses","hovered","dragging","styles","draw","startDrag","e","isVertical","processDrag","dragMeta","fromOffset","fromScrollOffset","fromScrollSize","totalDistance","movePercent","endDrag","handlePointerDown","abortController","ev","rootPointerHandlers","useMemo","useLayoutEffect","observed","ro","useEffect","disposers","subscribedElements","onChange","dispose","vMetrics","hMetrics"],"mappings":"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"}
+{"version":3,"file":"useScrollChrome.js","sources":["../../src/Scrollable/useScrollChrome.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';\n\nimport styles from './Scrollable.module.css';\n\nimport type { ScrollAxisSource } from './scrollAxisSource';\n\nexport type ScrollChromeEdges = {\n    atVerticalStart: boolean;\n    atVerticalEnd: boolean;\n    atHorizontalStart: boolean;\n    atHorizontalEnd: boolean;\n};\n\nexport type UseScrollChromeOptions = {\n    verticalSource?: ScrollAxisSource | null;\n    horizontalSource?: ScrollAxisSource | null;\n    /**\n     * When a source identity changes (e.g. external scroll target mounts),\n     * pass a new key so listeners and ResizeObserver re-bind.\n     */\n    sourceKey?: unknown;\n    gap?: number;\n    alwaysShowScrollbar?: boolean;\n};\n\nexport type UseScrollChromeResult = {\n    rootRef: React.RefObject<HTMLDivElement | null>;\n    edgesRef: React.RefObject<ScrollChromeEdges>;\n    setScrollbarV: (el: HTMLDivElement | null) => void;\n    setScrollbarH: (el: HTMLDivElement | null) => void;\n    /** Force a chrome redraw (e.g. after layout that sources do not observe). */\n    redraw: () => void;\n    handlePointerDown: (e: React.PointerEvent) => void;\n    rootPointerHandlers: {\n        onPointerEnter: () => void;\n        onPointerLeave: () => void;\n    };\n};\n\ntype AxisEdgeKeys = {\n    start: keyof ScrollChromeEdges;\n    end: keyof ScrollChromeEdges;\n    startAttr: string;\n    endAttr: string;\n    showAttr: string;\n};\n\nconst VERTICAL_EDGES: AxisEdgeKeys = {\n    start: 'atVerticalStart',\n    end: 'atVerticalEnd',\n    startAttr: 'data-scroll-v-start',\n    endAttr: 'data-scroll-v-end',\n    showAttr: 'data-scroll-show-v',\n};\n\nconst HORIZONTAL_EDGES: AxisEdgeKeys = {\n    start: 'atHorizontalStart',\n    end: 'atHorizontalEnd',\n    startAttr: 'data-scroll-h-start',\n    endAttr: 'data-scroll-h-end',\n    showAttr: 'data-scroll-show-h',\n};\n\nfunction clearAxisEdges(\n    root: HTMLDivElement | null,\n    edges: ScrollChromeEdges,\n    keys: AxisEdgeKeys\n) {\n    edges[keys.start] = false;\n    edges[keys.end] = false;\n\n    if (root) {\n        root.removeAttribute(keys.startAttr);\n        root.removeAttribute(keys.endAttr);\n        root.removeAttribute(keys.showAttr);\n    }\n}\n\nfunction drawAxis(\n    root: HTMLDivElement | null,\n    source: ScrollAxisSource | null | undefined,\n    scrollbar: HTMLDivElement | null,\n    edges: ScrollChromeEdges,\n    keys: AxisEdgeKeys,\n    gap: number\n) {\n    if (!source) {\n        clearAxisEdges(root, edges, keys);\n\n        return;\n    }\n\n    const metrics = source.getMetrics();\n\n    if (!metrics || metrics.clientSize <= 0 || metrics.scrollSize <= 0) {\n        clearAxisEdges(root, edges, keys);\n\n        return;\n    }\n\n    const { offset, scrollSize, clientSize } = metrics;\n    const edgeEpsilon = 1;\n    const gapPercent = (gap / clientSize) * 100;\n    const thumbLength = (clientSize / scrollSize * 100) - (gapPercent * 2);\n    const thumbOffset = (offset / scrollSize * 100) + gapPercent;\n    const show = thumbLength < 100 - (gapPercent * 2);\n    const atStart = show ? offset <= edgeEpsilon : true;\n    const atEnd = show ? offset + clientSize >= scrollSize - edgeEpsilon : true;\n\n    if (scrollbar) {\n        scrollbar.style.setProperty('--ms-thumb-length', `${ thumbLength }%`);\n        scrollbar.style.setProperty('--ms-thumb-offset', `${ thumbOffset }%`);\n    }\n\n    edges[keys.start] = atStart;\n    edges[keys.end] = atEnd;\n\n    if (root) {\n        root.setAttribute(keys.startAttr, String(atStart));\n        root.setAttribute(keys.endAttr, String(atEnd));\n        root.setAttribute(keys.showAttr, show ? 'true' : 'false');\n    }\n}\n\n/**\n * Custom scrollbar chrome driven by direct DOM updates — no React state on scroll.\n * Shared by {@link Scrollable} and app-local scroll chrome (e.g. layers tree, frame page).\n */\nexport function useScrollChrome({\n    verticalSource,\n    horizontalSource,\n    sourceKey,\n    gap = 0,\n    alwaysShowScrollbar,\n}: UseScrollChromeOptions): UseScrollChromeResult {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const scrollbarVRef = useRef<HTMLDivElement>(null);\n    const scrollbarHRef = useRef<HTMLDivElement>(null);\n\n    const edgesRef = useRef<ScrollChromeEdges>({\n        atVerticalStart: true,\n        atVerticalEnd: true,\n        atHorizontalStart: true,\n        atHorizontalEnd: true,\n    });\n\n    const dragMetaRef = useRef<{\n        source: ScrollAxisSource;\n        isVertical: boolean;\n        fromScrollOffset: number;\n        fromScrollSize: number;\n        fromOffset: number;\n        totalDistance: number;\n    } | null>(null);\n\n    const chromeRef = useRef({\n        hovered: false,\n        dragging: false,\n    });\n\n    const verticalSourceRef = useRef(verticalSource);\n    const horizontalSourceRef = useRef(horizontalSource);\n\n    verticalSourceRef.current = verticalSource;\n    horizontalSourceRef.current = horizontalSource;\n\n    const setScrollbarV = useCallback((el: HTMLDivElement | null) => {\n        scrollbarVRef.current = el;\n    }, []);\n\n    const setScrollbarH = useCallback((el: HTMLDivElement | null) => {\n        scrollbarHRef.current = el;\n    }, []);\n\n    const applyChromeClasses = useCallback(() => {\n        const root = rootRef.current;\n\n        if (!root) {\n            return;\n        }\n\n        const { hovered, dragging } = chromeRef.current;\n\n        root.classList.toggle(styles.hover, alwaysShowScrollbar || hovered);\n        root.classList.toggle(styles.inDrag, dragging);\n    }, [alwaysShowScrollbar]);\n\n    const draw = useCallback(() => {\n        const root = rootRef.current;\n        const edges = edgesRef.current;\n\n        drawAxis(\n            root,\n            verticalSourceRef.current,\n            scrollbarVRef.current,\n            edges,\n            VERTICAL_EDGES,\n            gap\n        );\n        drawAxis(\n            root,\n            horizontalSourceRef.current,\n            scrollbarHRef.current,\n            edges,\n            HORIZONTAL_EDGES,\n            gap\n        );\n    }, [gap]);\n\n    const startDrag = useCallback((e: React.PointerEvent, isVertical: boolean) => {\n        const source = isVertical ? verticalSourceRef.current : horizontalSourceRef.current;\n        const metrics = source?.getMetrics();\n\n        if (!source || !metrics || metrics.clientSize <= 0) {\n            return;\n        }\n\n        e.preventDefault();\n        e.stopPropagation();\n\n        dragMetaRef.current = {\n            source,\n            isVertical,\n            fromScrollOffset: metrics.offset,\n            fromScrollSize: metrics.scrollSize,\n            fromOffset: isVertical ? e.screenY : e.screenX,\n            totalDistance: metrics.clientSize - (gap * 2),\n        };\n    }, [gap]);\n\n    const processDrag = useCallback((e: PointerEvent) => {\n        const dragMeta = dragMetaRef.current;\n\n        if (!dragMeta || dragMeta.totalDistance === 0) {\n            return;\n        }\n\n        e.preventDefault();\n        e.stopPropagation();\n        e.stopImmediatePropagation();\n\n        const { source, isVertical, fromOffset, fromScrollOffset, fromScrollSize, totalDistance } = dragMeta;\n        const toOffset = isVertical ? e.screenY : e.screenX;\n        const movePercent = (toOffset - fromOffset) / totalDistance;\n\n        source.setOffset(fromScrollOffset + (fromScrollSize * movePercent));\n    }, []);\n\n    const endDrag = useCallback((e: PointerEvent) => {\n        e.preventDefault();\n        e.stopPropagation();\n        e.stopImmediatePropagation();\n\n        dragMetaRef.current = null;\n    }, []);\n\n    const handlePointerDown = useCallback((e: React.PointerEvent) => {\n        const isVertical = (e.target as HTMLElement).classList.contains(styles.scrollbarV);\n\n        startDrag(e, isVertical);\n        chromeRef.current.dragging = true;\n        applyChromeClasses();\n\n        const abortController = new AbortController();\n\n        document.addEventListener('pointermove', (ev: PointerEvent) => {\n            processDrag(ev);\n        }, {\n            signal: abortController.signal,\n            capture: true,\n        });\n\n        document.addEventListener('pointerup', (ev: PointerEvent) => {\n            abortController.abort();\n            processDrag(ev);\n            endDrag(ev);\n            chromeRef.current.dragging = false;\n            applyChromeClasses();\n        }, {\n            signal: abortController.signal,\n            capture: true,\n        });\n    }, [startDrag, processDrag, endDrag, applyChromeClasses]);\n\n    const rootPointerHandlers = useMemo(\n        () => ({\n            onPointerEnter: () => {\n                chromeRef.current.hovered = true;\n                applyChromeClasses();\n            },\n            onPointerLeave: () => {\n                chromeRef.current.hovered = false;\n                applyChromeClasses();\n            },\n        }),\n        [applyChromeClasses]\n    );\n\n    useLayoutEffect(() => {\n        applyChromeClasses();\n    }, [applyChromeClasses]);\n\n    useLayoutEffect(() => {\n        draw();\n    }, [draw, sourceKey, verticalSource, horizontalSource]);\n\n    useLayoutEffect(() => {\n        if (typeof ResizeObserver === 'undefined') {\n            return;\n        }\n\n        const observed = new Set<Element>();\n        const ro = new ResizeObserver(() => draw());\n        const ports: Element[] = [];\n\n        const watch = () => {\n            const next = new Set<Element>();\n\n            for (const source of [verticalSource, horizontalSource]) {\n                const el = source?.getObserveElement?.();\n\n                if (!el) {\n                    continue;\n                }\n\n                next.add(el);\n                // The port's own box does not change when content grows. The content\n                // child does, and that is what scrollHeight follows.\n                const content = el.firstElementChild;\n\n                if (content) {\n                    next.add(content);\n                }\n            }\n\n            for (const el of observed) {\n                if (!next.has(el)) {\n                    ro.unobserve(el);\n                    observed.delete(el);\n                }\n            }\n\n            for (const el of next) {\n                if (observed.has(el)) {\n                    continue;\n                }\n\n                observed.add(el);\n                ro.observe(el);\n            }\n        };\n\n        watch();\n\n        for (const source of [verticalSource, horizontalSource]) {\n            const el = source?.getObserveElement?.();\n\n            if (el && !ports.includes(el)) {\n                ports.push(el);\n            }\n        }\n\n        const mo = typeof MutationObserver === 'undefined'\n            ? null\n            : new MutationObserver(() => {\n                watch();\n                draw();\n            });\n\n        for (const el of ports) {\n            mo?.observe(el, { childList: true });\n        }\n\n        if (observed.size === 0) {\n            ro.disconnect();\n            mo?.disconnect();\n\n            return;\n        }\n\n        return () => {\n            ro.disconnect();\n            mo?.disconnect();\n        };\n    }, [draw, sourceKey, verticalSource, horizontalSource]);\n\n    useEffect(() => {\n        const disposers: Array<() => void> = [];\n        const subscribedElements = new Set<Element>();\n\n        let frame = 0;\n        const onChange = () => {\n            draw();\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(() => draw());\n        };\n\n        for (const source of [verticalSource, horizontalSource]) {\n            if (!source?.subscribe) {\n                continue;\n            }\n\n            // Same DOM node → one scroll listener (both axes on one element).\n            const el = source.getObserveElement?.();\n\n            if (el) {\n                if (subscribedElements.has(el)) {\n                    continue;\n                }\n\n                subscribedElements.add(el);\n            }\n\n            disposers.push(source.subscribe(onChange));\n        }\n\n        return () => {\n            cancelAnimationFrame(frame);\n            disposers.forEach(dispose => dispose());\n            dragMetaRef.current = null;\n        };\n    }, [draw, sourceKey, verticalSource, horizontalSource]);\n\n    return {\n        rootRef,\n        edgesRef,\n        setScrollbarV,\n        setScrollbarH,\n        redraw: draw,\n        handlePointerDown,\n        rootPointerHandlers,\n    };\n}\n"],"names":["VERTICAL_EDGES","HORIZONTAL_EDGES","clearAxisEdges","root","edges","keys","drawAxis","source","scrollbar","gap","metrics","offset","scrollSize","clientSize","edgeEpsilon","gapPercent","thumbLength","thumbOffset","show","atStart","atEnd","useScrollChrome","verticalSource","horizontalSource","sourceKey","alwaysShowScrollbar","rootRef","useRef","scrollbarVRef","scrollbarHRef","edgesRef","dragMetaRef","chromeRef","verticalSourceRef","horizontalSourceRef","setScrollbarV","useCallback","el","setScrollbarH","applyChromeClasses","hovered","dragging","styles","draw","startDrag","e","isVertical","processDrag","dragMeta","fromOffset","fromScrollOffset","fromScrollSize","totalDistance","movePercent","endDrag","handlePointerDown","abortController","ev","rootPointerHandlers","useMemo","useLayoutEffect","observed","ro","ports","watch","next","content","mo","useEffect","disposers","subscribedElements","frame","onChange","dispose"],"mappings":"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"}

package/dist/chat/ComposerBanner/ComposerBanner.d.ts

@@ -10,7 +10,8 @@ export type ComposerBannerStatusProps = HTMLAttributes<HTMLDivElement> & {
     children: ReactNode;
     action: string;
     onAction?: () => void;
+    icon?: ReactNode;
 };
 /** One status row inside {@link ComposerBanner} — message + action. */
-export declare function ComposerBannerStatus({ children, action, onAction, className, ...props }: ComposerBannerStatusProps): import("react").JSX.Element;
+export declare function ComposerBannerStatus({ children, action, onAction, icon, className, ...props }: ComposerBannerStatusProps): import("react").JSX.Element;
 //# sourceMappingURL=ComposerBanner.d.ts.map

package/dist/chat/ComposerBanner/ComposerBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerBanner.d.ts","sourceRoot":"","sources":["../../../src/chat/ComposerBanner/ComposerBanner.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yDAAyD;IACzD,KAAK,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,qDAAqD;AACrD,wBAAgB,cAAc,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACX,EAAE,mBAAmB,+BAYrB;AAED,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACrE,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,uEAAuE;AACvE,wBAAgB,oBAAoB,CAAC,EACjC,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACX,EAAE,yBAAyB,+BAkB3B"}
+{"version":3,"file":"ComposerBanner.d.ts","sourceRoot":"","sources":["../../../src/chat/ComposerBanner/ComposerBanner.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yDAAyD;IACzD,KAAK,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,qDAAqD;AACrD,wBAAgB,cAAc,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACX,EAAE,mBAAmB,+BAYrB;AAED,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACrE,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,uEAAuE;AACvE,wBAAgB,oBAAoB,CAAC,EACjC,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACX,EAAE,yBAAyB,+BAuB3B"}

package/dist/chat/ComposerBanner/ComposerBanner.js

@@ -1,50 +1,58 @@
 import { cn as i } from "@reforma/lib";
-import { Button as m } from "../../Button/Button.js";
-import { Text as l } from "../../Text/Text.js";
-import a from "./ComposerBanner.module.css.js";
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-function v({
-  children: o,
-  className: s,
+import { Button as l } from "../../Button/Button.js";
+import { Show as c } from "../../Show/Show.js";
+import { Text as d } from "../../Text/Text.js";
+import e from "./ComposerBanner.module.css.js";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+function B({
+  children: t,
+  className: a,
   color: r,
-  role: t,
-  ...e
+  role: s,
+  ...n
 }) {
-  return /* @__PURE__ */ n("div", {
+  return /* @__PURE__ */ o("div", {
     "data-slot": "composer-banner",
     "data-color": r,
-    role: t ?? (r === "danger" ? "alert" : void 0),
-    className: i(a.root, s),
-    ...e,
-    children: o
+    role: s ?? (r === "danger" ? "alert" : void 0),
+    className: i(e.root, a),
+    ...n,
+    children: t
   });
 }
-function h({
-  children: o,
-  action: s,
+function b({
+  children: t,
+  action: a,
   onAction: r,
-  className: t,
-  ...e
+  icon: s,
+  className: n,
+  ...m
 }) {
-  return /* @__PURE__ */ c("div", {
-    className: i(a.status, t),
-    ...e,
-    children: [/* @__PURE__ */ n(l, {
+  return /* @__PURE__ */ p("div", {
+    className: i(e.status, n),
+    ...m,
+    children: [/* @__PURE__ */ o(c, {
+      when: s,
+      children: /* @__PURE__ */ o("span", {
+        className: e.icon,
+        children: s
+      })
+    }), /* @__PURE__ */ o(d, {
       variant: "xs",
-      className: a.text,
-      children: o
-    }), /* @__PURE__ */ n(m, {
+      className: e.text,
+      children: t
+    }), /* @__PURE__ */ o(l, {
       size: "xs",
       variant: "ghost",
       color: "secondary",
       isDisabled: !r,
       onPress: r,
-      children: s
+      children: a
     })]
   });
 }
 export {
-  v as ComposerBanner,
-  h as ComposerBannerStatus
+  B as ComposerBanner,
+  b as ComposerBannerStatus
 };
 //# sourceMappingURL=ComposerBanner.js.map

package/dist/chat/ComposerBanner/ComposerBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerBanner.js","sources":["../../../src/chat/ComposerBanner/ComposerBanner.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\n\nimport { Button } from '../../Button';\nimport { Text } from '../../Text';\nimport styles from './ComposerBanner.module.css';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type ComposerBannerProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {\n    children?: ReactNode;\n    /** Plate tint. Default is the muted interrupt chrome. */\n    color?: 'danger';\n};\n\n/** Shared plate above the composer — chrome only. */\nexport function ComposerBanner({\n    children,\n    className,\n    color,\n    role,\n    ...props\n}: ComposerBannerProps) {\n    return (\n        <div\n            data-slot=\"composer-banner\"\n            data-color={ color }\n            role={ role ?? (color === 'danger' ? 'alert' : undefined) }\n            className={ cn(styles.root, className) }\n            { ...props }\n        >\n            { children }\n        </div>\n    );\n}\n\nexport type ComposerBannerStatusProps = HTMLAttributes<HTMLDivElement> & {\n    children: ReactNode;\n    action: string;\n    onAction?: () => void;\n};\n\n/** One status row inside {@link ComposerBanner} — message + action. */\nexport function ComposerBannerStatus({\n    children,\n    action,\n    onAction,\n    className,\n    ...props\n}: ComposerBannerStatusProps) {\n    return (\n        <div className={ cn(styles.status, className) } { ...props }>\n            <Text variant=\"xs\" className={ styles.text }>\n                { children }\n            </Text>\n\n            <Button\n                size=\"xs\"\n                variant=\"ghost\"\n                color=\"secondary\"\n                isDisabled={ !onAction }\n                onPress={ onAction }\n            >\n                { action }\n            </Button>\n        </div>\n    );\n}\n"],"names":["ComposerBanner","children","className","color","role","props","cn","styles","ComposerBannerStatus","action","onAction","_jsx","Text","Button"],"mappings":";;;;;AAMO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,2BAAyB,OAAO;AAAA,IAC9B,aAAa;AAAA,IACb,cAAcF;AAAA,IACd,MAAMC,MAASD,MAAU,WAAW,UAAU;AAAA,IAC9C,WAAWG,EAAGC,EAAO,MAAML,CAAS;AAAA,IACpC,GAAGG;AAAA,IACH,UAAAJ;AAAA,EAAA,CACD;AACH;AAEO,SAASO,EAAqB;AAAA,EACnC,UAAAP;AAAA,EACA,QAAAQ;AAAA,EACA,UAAAC;AAAA,EACA,WAAAR;AAAA,EACA,GAAGG;AACL,GAAG;AACD,2BAA0B,OAAO;AAAA,IAC/B,WAAWC,EAAGC,EAAO,QAAQL,CAAS;AAAA,IACtC,GAAGG;AAAA,IACH,UAAU,CAAcM,gBAAAA,EAAKC,GAAM;AAAA,MACjC,SAAS;AAAA,MACT,WAAWL,EAAO;AAAA,MAClB,UAAAN;AAAA,IAAA,CACD,GAAgBU,gBAAAA,EAAKE,GAAQ;AAAA,MAC5B,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY,CAACH;AAAA,MACb,SAASA;AAAA,MACT,UAAUD;AAAA,IAAA,CACX,CAAC;AAAA,EAAA,CACH;AACH;"}
+{"version":3,"file":"ComposerBanner.js","sources":["../../../src/chat/ComposerBanner/ComposerBanner.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\n\nimport { Button } from '../../Button';\nimport { Show } from '../../Show';\nimport { Text } from '../../Text';\nimport styles from './ComposerBanner.module.css';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type ComposerBannerProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {\n    children?: ReactNode;\n    /** Plate tint. Default is the muted interrupt chrome. */\n    color?: 'danger';\n};\n\n/** Shared plate above the composer — chrome only. */\nexport function ComposerBanner({\n    children,\n    className,\n    color,\n    role,\n    ...props\n}: ComposerBannerProps) {\n    return (\n        <div\n            data-slot=\"composer-banner\"\n            data-color={ color }\n            role={ role ?? (color === 'danger' ? 'alert' : undefined) }\n            className={ cn(styles.root, className) }\n            { ...props }\n        >\n            { children }\n        </div>\n    );\n}\n\nexport type ComposerBannerStatusProps = HTMLAttributes<HTMLDivElement> & {\n    children: ReactNode;\n    action: string;\n    onAction?: () => void;\n    icon?: ReactNode;\n};\n\n/** One status row inside {@link ComposerBanner} — message + action. */\nexport function ComposerBannerStatus({\n    children,\n    action,\n    onAction,\n    icon,\n    className,\n    ...props\n}: ComposerBannerStatusProps) {\n    return (\n        <div className={ cn(styles.status, className) } { ...props }>\n            <Show when={ icon }>\n                <span className={ styles.icon }>\n                    { icon }\n                </span>\n            </Show>\n            <Text variant=\"xs\" className={ styles.text }>\n                { children }\n            </Text>\n\n            <Button\n                size=\"xs\"\n                variant=\"ghost\"\n                color=\"secondary\"\n                isDisabled={ !onAction }\n                onPress={ onAction }\n            >\n                { action }\n            </Button>\n        </div>\n    );\n}\n"],"names":["ComposerBanner","children","className","color","role","props","cn","styles","ComposerBannerStatus","action","onAction","icon","_jsx","Show","Text","Button"],"mappings":";;;;;;AAOO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,2BAAyB,OAAO;AAAA,IAC9B,aAAa;AAAA,IACb,cAAcF;AAAA,IACd,MAAMC,MAASD,MAAU,WAAW,UAAU;AAAA,IAC9C,WAAWG,EAAGC,EAAO,MAAML,CAAS;AAAA,IACpC,GAAGG;AAAA,IACH,UAAAJ;AAAA,EAAA,CACD;AACH;AAEO,SAASO,EAAqB;AAAA,EACnC,UAAAP;AAAA,EACA,QAAAQ;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAT;AAAA,EACA,GAAGG;AACL,GAAG;AACD,2BAA0B,OAAO;AAAA,IAC/B,WAAWC,EAAGC,EAAO,QAAQL,CAAS;AAAA,IACtC,GAAGG;AAAA,IACH,UAAU,CAAcO,gBAAAA,EAAKC,GAAM;AAAA,MACjC,MAAMF;AAAA,MACN,4BAA4B,QAAQ;AAAA,QAClC,WAAWJ,EAAO;AAAA,QAClB,UAAUI;AAAA,MAAA,CACX;AAAA,IAAA,CACF,GAAgBC,gBAAAA,EAAKE,GAAM;AAAA,MAC1B,SAAS;AAAA,MACT,WAAWP,EAAO;AAAA,MAClB,UAAAN;AAAA,IAAA,CACD,GAAgBW,gBAAAA,EAAKG,GAAQ;AAAA,MAC5B,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY,CAACL;AAAA,MACb,SAASA;AAAA,MACT,UAAUD;AAAA,IAAA,CACX,CAAC;AAAA,EAAA,CACH;AACH;"}

package/dist/chat/ComposerBanner/ComposerBanner.module.css

@@ -1 +1 @@
-@layer components{.ComposerBanner_root_HyjFf2{display:flex;flex-direction:column;margin:0 var(--spacing-md);border-top-right-radius:calc(var(--radius-md) * var(--squircle-radius-factor));border-top-left-radius:calc(var(--radius-md) * var(--squircle-radius-factor));min-width:0;corner-shape:superellipse(var(--squircle-value)) superellipse(var(--squircle-value)) square square;background-color:var(--color-secondary-muted-light);overflow:hidden}.dark .ComposerBanner_root_HyjFf2:not([data-color]){background-color:var(--color-light-700)}.ComposerBanner_root_HyjFf2[data-color=danger]{background-color:var(--color-danger-muted-light);color:var(--color-danger-text)}.ComposerBanner_status_EIdxnS+.ComposerBanner_status_EIdxnS{position:relative}.ComposerBanner_status_EIdxnS+.ComposerBanner_status_EIdxnS:before{position:absolute;top:0;right:var(--spacing-sm);left:var(--spacing-sm);border-top:1px solid var(--color-secondary-muted-border);content:""}.ComposerBanner_root_HyjFf2[data-color=danger] .ComposerBanner_status_EIdxnS+.ComposerBanner_status_EIdxnS:before{border-top-color:var(--color-danger-muted-border)}.ComposerBanner_status_EIdxnS{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);word-wrap:break-word}.ComposerBanner_text_UFktfG{flex:1;max-height:3lh;overflow:hidden}}
+@layer components{.ComposerBanner_root_HyjFf2{display:flex;flex-direction:column;margin:0 var(--spacing-md);border-top-right-radius:calc(var(--radius-md) * var(--squircle-radius-factor));border-top-left-radius:calc(var(--radius-md) * var(--squircle-radius-factor));min-width:0;corner-shape:superellipse(var(--squircle-value)) superellipse(var(--squircle-value)) square square;background-color:var(--color-secondary-muted-light);overflow:hidden}.dark .ComposerBanner_root_HyjFf2:not([data-color]){background-color:var(--color-light-700)}.ComposerBanner_root_HyjFf2[data-color=danger]{background-color:var(--color-danger-muted-light);color:var(--color-danger-text)}.ComposerBanner_status_EIdxnS+.ComposerBanner_status_EIdxnS{position:relative}.ComposerBanner_status_EIdxnS+.ComposerBanner_status_EIdxnS:before{position:absolute;top:0;right:var(--spacing-sm);left:var(--spacing-sm);border-top:1px solid var(--color-secondary-muted-border);content:""}.ComposerBanner_root_HyjFf2[data-color=danger] .ComposerBanner_status_EIdxnS+.ComposerBanner_status_EIdxnS:before{border-top-color:var(--color-danger-muted-border)}.ComposerBanner_status_EIdxnS{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);word-wrap:break-word}.ComposerBanner_icon_5Md4lZ{display:flex;flex-shrink:0;color:var(--color-secondary-muted-text)}.ComposerBanner_text_UFktfG{flex:1;max-height:3lh;overflow:hidden}}

package/dist/chat/ComposerBanner/ComposerBanner.module.css.js

@@ -1,12 +1,14 @@
-const t = "ComposerBanner_root_HyjFf2", o = "ComposerBanner_status_EIdxnS", s = "ComposerBanner_text_UFktfG", e = {
+const t = "ComposerBanner_root_HyjFf2", o = "ComposerBanner_status_EIdxnS", s = "ComposerBanner_icon_5Md4lZ", n = "ComposerBanner_text_UFktfG", e = {
   root: t,
   status: o,
-  text: s
+  icon: s,
+  text: n
 };
 export {
   e as default,
+  s as icon,
   t as root,
   o as status,
-  s as text
+  n as text
 };
 //# sourceMappingURL=ComposerBanner.module.css.js.map

package/dist/chat/ComposerBanner/ComposerBanner.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerBanner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"ComposerBanner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/chat/Tool/agent/AgentTool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentTool.d.ts","sourceRoot":"","sources":["../../../../src/chat/Tool/agent/AgentTool.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA6IlD,2EAA2E;AAC3E,wBAAgB,oBAAoB,CAChC,IAAI,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAC3C;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAmB3E;AAED,qFAAqF;AACrF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CA0BpG;AAED,0EAA0E;AAC1E,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,MAAM,GAAG,SAAS,CAcrB;AAiFD,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAuB,iBAAiB;8BAAjB,iBAAiB;CA6C5D,CAAC"}
+{"version":3,"file":"AgentTool.d.ts","sourceRoot":"","sources":["../../../../src/chat/Tool/agent/AgentTool.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA6IlD,2EAA2E;AAC3E,wBAAgB,oBAAoB,CAChC,IAAI,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAC3C;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAW3E;AAED,qFAAqF;AACrF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CA0BpG;AAED,0EAA0E;AAC1E,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,MAAM,GAAG,SAAS,CAcrB;AAiFD,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAuB,iBAAiB;8BAAjB,iBAAiB;CA6C5D,CAAC"}

package/dist/chat/Tool/agent/AgentTool.js

@@ -1,33 +1,33 @@
-import { Message as N } from "@reforma/icons/14";
-import { ProgressLoader as k } from "@reforma/icons/assets";
-import { humanizeString as w, basename as T, plural as F } from "@reforma/lib";
-import { isToolUIPart as U, getToolName as B } from "ai";
-import { observer as G } from "mobx-react-lite";
+import { Message as x } from "@reforma/icons/14";
+import { ProgressLoader as I } from "@reforma/icons/assets";
+import { humanizeString as k, basename as T, plural as w } from "@reforma/lib";
+import { isToolUIPart as N, getToolName as F } from "ai";
+import { observer as U } from "mobx-react-lite";
 import { Box as S } from "../../../Box/Box.js";
-import { Pressable as M } from "react-aria-components";
-import { Shimmer as O } from "../../../Shimmer/Shimmer.js";
+import { Pressable as B } from "react-aria-components";
+import { Shimmer as G } from "../../../Shimmer/Shimmer.js";
 import { Show as f } from "../../../Show/Show.js";
 import { Text as m } from "../../../Text/Text.js";
-import { useChat as j } from "../../ChatContext.js";
-import { useMessageTurn as W } from "../../Message/turn/messageTurnContext.js";
-import { getToolFailureRowState as _, TOOL_INTERRUPTED_MESSAGE as D } from "../helpers.js";
-import { ToolShellCard as V } from "../shell/ToolShellCard.js";
-import { useToolProgress as z } from "../shell/toolProgress.js";
-import Y from "../shell/ToolShellCard.module.css.js";
+import { useChat as M } from "../../ChatContext.js";
+import { useMessageTurn as O } from "../../Message/turn/messageTurnContext.js";
+import { getToolFailureRowState as j, TOOL_INTERRUPTED_MESSAGE as W } from "../helpers.js";
+import { ToolShellCard as _ } from "../shell/ToolShellCard.js";
+import { useToolProgress as D } from "../shell/toolProgress.js";
+import V from "../shell/ToolShellCard.module.css.js";
 import h from "./AgentTool.module.css.js";
-import { jsx as i, jsxs as C } from "react/jsx-runtime";
-const q = {
+import { jsx as o, jsxs as C } from "react/jsx-runtime";
+const z = {
   research: "Explore",
   shell: "Shell",
   verify: "Verify",
   plan: "Plan"
-}, H = {
+}, Y = {
   research: "Exploring",
   shell: "Running",
   verify: "Verifying",
   plan: "Planning"
 };
-function J(e) {
+function q(e) {
   if (e == null || typeof e != "object")
     return;
   const t = e.error;
@@ -43,24 +43,24 @@ function R(e) {
   }
 }
 function p(e) {
-  const t = e?.trim() || "research", r = q[t];
+  const t = e?.trim() || "research", r = z[t];
   return r || t.charAt(0).toUpperCase() + t.slice(1);
 }
-function L(e) {
+function H(e) {
   const t = e?.trim() || "research", r = p(e);
   return {
-    live: H[t] ?? `Running ${r}`,
+    live: Y[t] ?? `Running ${r}`,
     done: `Ran ${r} agent`
   };
 }
-function o(e) {
+function i(e) {
   if (typeof e != "string")
     return;
   const t = e.trim();
   return t.length > 0 ? t : void 0;
 }
-function K(e) {
-  const t = o(e.path);
+function J(e) {
+  const t = i(e.path);
   if (t)
     return T(t);
   if (!Array.isArray(e.paths))
@@ -69,33 +69,33 @@ function K(e) {
   if (r.length === 1)
     return T(r[0]);
   if (r.length > 1)
-    return F(r.length, "file", "files");
+    return w(r.length, "file", "files");
 }
-function u(e, t) {
-  return (r) => `${e} ${K(r) ?? t}`;
+function d(e, t) {
+  return (r) => `${e} ${J(r) ?? t}`;
 }
-const Q = {
-  Read: u("Reading", "file"),
-  Write: u("Writing", "file"),
-  Edit: u("Editing", "file"),
-  ListDirectory: u("Listing", "files"),
-  CreateDirectory: u("Creating", "folder"),
-  MoveFile: u("Moving", "file"),
-  RemoveFile: u("Removing", "file"),
-  Grep: (e) => `Grepping ${o(e.pattern) ?? "code"}`,
-  Glob: (e) => `Finding ${o(e.glob) ?? "files"}`,
+const K = {
+  Read: d("Reading", "file"),
+  Write: d("Writing", "file"),
+  Edit: d("Editing", "file"),
+  ListDirectory: d("Listing", "files"),
+  CreateDirectory: d("Creating", "folder"),
+  MoveFile: d("Moving", "file"),
+  RemoveFile: d("Removing", "file"),
+  Grep: (e) => `Grepping ${i(e.pattern) ?? "code"}`,
+  Glob: (e) => `Finding ${i(e.glob) ?? "files"}`,
   GetBackgroundResult: () => "Background task",
   Bash: (e) => {
-    const t = o(e.command);
+    const t = i(e.command);
     return t ? `Running ${t}` : "Running command";
   },
-  Fetch: (e) => `Fetching ${o(e.url) ?? "page"}`,
-  Skill: (e) => `Loading ${o(e.name) ?? "skill"}`,
+  Fetch: (e) => `Fetching ${i(e.url) ?? "page"}`,
+  Skill: (e) => `Loading ${i(e.name) ?? "skill"}`,
   GetMcpResources: (e) => {
-    const t = o(e.uri);
+    const t = i(e.uri);
     return t ? `Reading ${t.replace(/\/+$/, "").split("/").pop()?.trim() || t}` : "Listing MCP resources";
   },
-  Preamble: (e) => o(e.content),
+  Preamble: (e) => i(e.content),
   ReadLints: () => "Checking lints",
   PageScreenshot: () => "Capturing screenshot",
   DevServerStatus: () => "Checking project",
@@ -105,27 +105,26 @@ const Q = {
   ReadPlan: () => "Reading plan"
 };
 function be(e, t) {
-  const r = R(e), n = p(r), a = t?.needsUser === !0, c = $(t), s = L(r).live, d = o(e.output?.childThreadId) ?? o(t?.childThreadId);
-  let l = s;
-  return a ? l = `${n} · Waiting for you` : c && (l = `${n} · ${c}`), {
-    text: l,
+  const r = R(e), n = p(r), a = t?.needsUser === !0, c = i(e.output?.childThreadId) ?? i(t?.childThreadId);
+  return {
+    text: a ? `${n} · Waiting for you` : `${n} Agent working`,
     label: n,
-    childThreadId: d,
+    childThreadId: c,
     waiting: a
   };
 }
-function $(e) {
+function Q(e) {
   if (!e)
     return;
   if (e.type === "text")
     return "Finishing reply";
   if (e.type === "reasoning")
     return "Thinking…";
-  const t = o(e.toolName);
+  const t = i(e.toolName);
   if (!t)
     return;
   const r = e.input, n = r != null && typeof r == "object" && !Array.isArray(r) ? r : {};
-  return Q[t]?.(n) ?? `Using ${o(e.title) ?? w(t)}`;
+  return K[t]?.(n) ?? `Using ${i(e.title) ?? k(t)}`;
 }
 function X(e) {
   if (!(e.failed || e.stalled)) {
@@ -143,103 +142,103 @@ function Z({
   stalled: a,
   onOpen: c
 }) {
-  const s = a ? D : e, d = /* @__PURE__ */ C(S, {
+  const l = a ? W : e, u = /* @__PURE__ */ C(S, {
     align: "center",
     direction: "row",
     fullWidth: !0,
     gap: "md",
     padding: "md",
-    children: [/* @__PURE__ */ i(f, {
+    children: [/* @__PURE__ */ o(f, {
       when: n,
-      fallback: /* @__PURE__ */ i(N, {
+      fallback: /* @__PURE__ */ o(x, {
         "aria-hidden": !0
       }),
-      children: /* @__PURE__ */ i(k, {
+      children: /* @__PURE__ */ o(I, {
         "aria-hidden": !0,
         size: 14
       })
     }), /* @__PURE__ */ C(S, {
       gap: "xxs",
       grow: !0,
-      children: [/* @__PURE__ */ i(f, {
+      children: [/* @__PURE__ */ o(f, {
         when: n,
-        fallback: /* @__PURE__ */ i(m, {
+        fallback: /* @__PURE__ */ o(m, {
           className: h.title,
           color: a ? "danger" : void 0,
-          children: s
+          children: l
         }),
-        children: /* @__PURE__ */ i(O, {
+        children: /* @__PURE__ */ o(G, {
           as: "span",
           className: h.title,
           duration: 1,
-          children: s
+          children: l
         })
-      }), /* @__PURE__ */ i(f, {
+      }), /* @__PURE__ */ o(f, {
         when: n ? t : void 0,
-        children: (l) => /* @__PURE__ */ i(m, {
+        children: (s) => /* @__PURE__ */ o(m, {
           color: "secondary",
           truncate: !0,
           variant: "sm",
-          children: l
+          children: s
         })
-      }), /* @__PURE__ */ i(f, {
+      }), /* @__PURE__ */ o(f, {
         when: r,
-        children: (l) => /* @__PURE__ */ i(m, {
+        children: (s) => /* @__PURE__ */ o(m, {
           color: "danger",
           variant: "xs",
-          children: l
+          children: s
         })
       })]
     })]
   });
-  return /* @__PURE__ */ i(V, {
+  return /* @__PURE__ */ o(_, {
     "aria-busy": n || void 0,
-    className: Y.tool,
+    className: V.tool,
     collapsible: !1,
     "data-slot": "agent-tool",
-    children: /* @__PURE__ */ i(f, {
+    children: /* @__PURE__ */ o(f, {
       when: c,
-      fallback: d,
-      children: (l) => /* @__PURE__ */ i(M, {
-        "aria-label": t ? `${s}. ${t}` : s,
+      fallback: u,
+      children: (s) => /* @__PURE__ */ o(B, {
+        "aria-label": t ? `${l}. ${t}` : l,
         className: h.hit,
-        onPress: l,
-        children: d
+        onPress: s,
+        children: u
       })
     })
   });
 }
-const Te = G(({
+const Te = U(({
   part: e
 }) => {
-  const t = W(), {
+  const t = O(), {
     onOpenSubagent: r
-  } = j(), n = t?.getToolMeta?.(e.toolCallId)?.patch, a = n?.needsUser === !0, {
+  } = M(), n = t?.getToolMeta?.(e.toolCallId)?.patch, a = n?.needsUser === !0, {
     live: c,
-    stalled: s
-  } = z(e.state, a);
-  if (!U(e) || B(e) !== "Agent")
+    stalled: l
+  } = D(e.state, a);
+  if (!N(e) || F(e) !== "Agent")
     return null;
-  const d = _(e), l = e.state === "output-available" ? J(e.output) : void 0, g = d.useFailureLabel || !!l, v = R(e), A = p(v), y = L(v), E = $(n), P = X({
+  const u = j(e), s = e.state === "output-available" ? q(e.output) : void 0, g = u.useFailureLabel || !!s, v = R(e), A = p(v), y = H(v), L = Q(n), E = X({
     live: c,
     failed: g,
-    stalled: s,
+    stalled: l,
     needsUser: a,
-    activity: E
-  }), b = o(e.output?.childThreadId) ?? o(n?.childThreadId), I = !!(b && r && !g), x = l ?? d.problemText ?? d.tooltip;
-  return /* @__PURE__ */ i(Z, {
-    activity: P,
-    errorText: x,
-    onOpen: I ? () => r?.(b, A) : void 0,
-    running: c && !g && !s,
-    stalled: s,
-    title: c && !g && !s ? y.live : y.done
+    activity: L
+  }), b = i(e.output?.childThreadId) ?? i(n?.childThreadId), P = !!(b && r && !g), $ = s ?? u.problemText ?? u.tooltip;
+  return /* @__PURE__ */ o(Z, {
+    activity: E,
+    errorText: $,
+    onOpen: P ? () => r?.(b, A) : void 0,
+    running: c && !g && !l,
+    stalled: l,
+    title: c && !g && !l ? y.live : y.done
   });
 });
 export {
   Te as AgentTool,
   X as agentStatusLine,
-  $ as subagentActivityLabel,
+  Q as subagentActivityLabel,
   be as subagentComposerCopy
 };
 //# sourceMappingURL=AgentTool.js.map