entangle-ui 0.9.0 → 0.10.0

package/dist/esm/components/feedback/LogView/LogView.css.js

@@ -0,0 +1,35 @@
+import './../../../assets/src/components/feedback/LogView/LogView.css.ts.vanilla-nB5ENOpw.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var DENSITY_ROW_HEIGHT = {comfortable:30,compact:26,dense:22};
+var bodyDensityRecipe = createRuntimeFn({defaultClassName:'LogView__1koarpap',variantClassNames:{density:{comfortable:'LogView_bodyDensityRecipe_density_comfortable__1koarpaq',compact:'LogView_bodyDensityRecipe_density_compact__1koarpar',dense:'LogView_bodyDensityRecipe_density_dense__1koarpas'}},defaultVariants:{density:'compact'},compoundVariants:[]});
+var bodyStyle = 'LogView_bodyStyle__1koarpan';
+var chipCountStyle = 'LogView_chipCountStyle__1koarpam';
+var copyLineButtonStyle = 'LogView_copyLineButtonStyle__1koarpa1e';
+var emptyStateStyle = 'LogView_emptyStateStyle__1koarpa1f';
+var footerStyle = 'LogView_footerStyle__1koarpa9';
+var highlightStyle = 'LogView_highlightStyle__1koarpa1d';
+var jumpBadgeStyle = 'LogView_jumpBadgeStyle__1koarpa1j';
+var jumpButtonRecipe = createRuntimeFn({defaultClassName:'LogView_jumpButtonRecipe__1koarpa1g',variantClassNames:{visible:{true:'LogView_jumpButtonRecipe_visible_true__1koarpa1h',false:'LogView_jumpButtonRecipe_visible_false__1koarpa1i'}},defaultVariants:{visible:false},compoundVariants:[]});
+var levelChipRecipe = createRuntimeFn({defaultClassName:'LogView_levelChipRecipe__1koarpac',variantClassNames:{level:{debug:'LogView_levelChipRecipe_level_debug__1koarpad',info:'LogView_levelChipRecipe_level_info__1koarpae',warn:'LogView_levelChipRecipe_level_warn__1koarpaf',error:'LogView_levelChipRecipe_level_error__1koarpag',custom:'LogView_levelChipRecipe_level_custom__1koarpah'},active:{true:'LogView_levelChipRecipe_active_true__1koarpai',false:'LogView_levelChipRecipe_active_false__1koarpaj'}},defaultVariants:{active:true},compoundVariants:[]});
+var levelColorVar = 'var(--levelColorVar__1koarpa2)';
+var levelDotStyle = 'LogView_levelDotStyle__1koarpal';
+var levelFilterStyle = 'LogView_levelFilterStyle__1koarpab';
+var levelGlyphStyle = 'LogView_levelGlyphStyle__1koarpak';
+var messageRecipe = createRuntimeFn({defaultClassName:'LogView_messageRecipe__1koarpa1a',variantClassNames:{wrap:{true:'LogView_messageRecipe_wrap_true__1koarpa1b',false:'LogView_messageRecipe_wrap_false__1koarpa1c'}},defaultVariants:{wrap:false},compoundVariants:[]});
+var plainBodyStyle = 'LogView_plainBodyStyle__1koarpau';
+var rootRecipe = createRuntimeFn({defaultClassName:'LogView_rootRecipe__1koarpa3',variantClassNames:{density:{comfortable:'LogView_rootRecipe_density_comfortable__1koarpa4',compact:'LogView_rootRecipe_density_compact__1koarpa5',dense:'LogView_rootRecipe_density_dense__1koarpa6'}},defaultVariants:{density:'compact'},compoundVariants:[]});
+var rowGlyphStyle = 'LogView_rowGlyphStyle__1koarpa17';
+var rowRecipe = createRuntimeFn({defaultClassName:'LogView_rowRecipe__1koarpav',variantClassNames:{level:{debug:'LogView_rowRecipe_level_debug__1koarpaw',info:'LogView_rowRecipe_level_info__1koarpax',warn:'LogView_rowRecipe_level_warn__1koarpay',error:'LogView_rowRecipe_level_error__1koarpaz',custom:'LogView_rowRecipe_level_custom__1koarpa10'},virtualized:{true:'LogView_rowRecipe_virtualized_true__1koarpa11'},interactive:{true:'LogView_rowRecipe_interactive_true__1koarpa12'},selected:{true:'LogView_rowRecipe_selected_true__1koarpa13'},align:{center:'LogView_rowRecipe_align_center__1koarpa14',start:'LogView_rowRecipe_align_start__1koarpa15'}},defaultVariants:{align:'center'},compoundVariants:[]});
+var scrollViewportStyle = 'LogView_scrollViewportStyle__1koarpao';
+var searchWrapperStyle = 'LogView_searchWrapperStyle__1koarpaa';
+var sourceCellStyle = 'LogView_sourceCellStyle__1koarpa18';
+var sourceTagStyle = 'LogView_sourceTagStyle__1koarpa19';
+var timestampStyle = 'LogView_timestampStyle__1koarpa16';
+var toolbarSpacerStyle = 'LogView_toolbarSpacerStyle__1koarpa8';
+var toolbarStyle = 'LogView_toolbarStyle__1koarpa7';
+var totalHeightVar = 'var(--totalHeightVar__1koarpa0)';
+var virtualBodyStyle = 'LogView_virtualBodyStyle__1koarpat';
+
+export { DENSITY_ROW_HEIGHT, bodyDensityRecipe, bodyStyle, chipCountStyle, copyLineButtonStyle, emptyStateStyle, footerStyle, highlightStyle, jumpBadgeStyle, jumpButtonRecipe, levelChipRecipe, levelColorVar, levelDotStyle, levelFilterStyle, levelGlyphStyle, messageRecipe, plainBodyStyle, rootRecipe, rowGlyphStyle, rowRecipe, scrollViewportStyle, searchWrapperStyle, sourceCellStyle, sourceTagStyle, timestampStyle, toolbarSpacerStyle, toolbarStyle, totalHeightVar, virtualBodyStyle };
+//# sourceMappingURL=LogView.css.js.map

package/dist/esm/components/feedback/LogView/LogView.css.js.map

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

package/dist/esm/components/feedback/LogView/LogView.js

@@ -0,0 +1,297 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useId, useMemo, useLayoutEffect, useEffect, useState, useCallback, useImperativeHandle } from 'react';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import { cx } from '../../../utils/cx.js';
+import { devWarn } from '../../../utils/devWarn.js';
+import { toolbarSpacerStyle, rootRecipe } from './LogView.css.js';
+import { LogViewBody } from './LogViewBody.js';
+import { LogViewContext } from './LogViewContext.js';
+import { resolveLogViewLabels } from './logViewLabels.js';
+import { resolveLevelOrder, resolveLevelDefinition } from './logViewLevels.js';
+import { LogViewToolbar, LogViewSearch, LogViewLevelFilter, LogViewCopy, LogViewClear, LogViewFooter } from './LogViewParts.js';
+import { LogViewStore } from './LogViewStore.js';
+import { filterEntries, defaultFormatTimestamp } from './logViewUtils.js';
+
+const LogViewRoot = ({ entries, defaultEntries, maxEntries, getEntryId, query: queryProp, defaultQuery, onQueryChange, caseSensitive = false, levels: levelsProp, defaultLevels, onLevelsChange, levelConfig, levelOrder: levelOrderProp, follow: followProp, defaultFollow = true, onFollowChange, wrap = false, density = 'compact', showTimestamps = false, formatTimestamp = defaultFormatTimestamp, showSource = true, showToolbar = true, showSearch = true, showLevelFilter = true, showClear = true, showCopy = true, virtualized = 'auto', virtualizationThreshold = 100, estimatedRowHeight, overscan = 12, selectionMode = false, selectedIds: selectedIdsProp, defaultSelectedIds, onSelectionChange, height = 320, maxHeight, renderEntry, emptyState, footer, onClear, onEntryClick, onCopy, labels: labelsProp, slotProps, children, className, style, testId, ref, 'aria-label': ariaLabel, ...rest }) => {
+    const rootRef = useRef(null);
+    const setRootRef = useMergedRef(rootRef);
+    const bodyId = useId();
+    // Resolved i18n strings: English defaults merged with the `labels` override.
+    const labels = useMemo(() => resolveLogViewLabels(labelsProp), [labelsProp]);
+    // One store per LogView instance. Created once; later prop changes flow
+    // through the effects below (the same per-instance store pattern as Viewport).
+    const store = useMemo(() => new LogViewStore({
+        initial: entries ?? defaultEntries,
+        maxEntries,
+        getEntryId,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- store is created once; prop updates are mirrored via effects.
+    []);
+    const isControlled = entries !== undefined;
+    const isControlledRef = useLatest(isControlled);
+    // Mirror the controlled entries prop into the store.
+    useLayoutEffect(() => {
+        if (entries !== undefined)
+            store.setEntries(entries);
+    }, [entries, store]);
+    useEffect(() => {
+        store.setMaxEntries(maxEntries);
+    }, [maxEntries, store]);
+    useEffect(() => {
+        store.setGetEntryId(getEntryId);
+    }, [getEntryId, store]);
+    useEffect(() => () => {
+        store.dispose();
+    }, [store]);
+    // ── Levels ──
+    const levelOrder = useMemo(() => resolveLevelOrder(levelConfig, levelOrderProp), [levelConfig, levelOrderProp]);
+    const knownLevels = useMemo(() => new Set(levelOrder), [levelOrder]);
+    // Visibility is tracked as the set of *hidden* levels (uncontrolled) so the
+    // active set can be derived as "known minus hidden". A level introduced later
+    // via `levelConfig` is therefore visible by default, while an explicit
+    // toggle-off survives changes to `levelOrder`. In controlled mode the
+    // `levels` prop is the source of truth and this state is unused.
+    const isLevelsControlled = levelsProp !== undefined;
+    const [hiddenLevels, setHiddenLevels] = useState(() => defaultLevels === undefined
+        ? new Set()
+        : new Set(levelOrder.filter(level => !defaultLevels.includes(level))));
+    const activeLevels = useMemo(() => {
+        if (isLevelsControlled)
+            return new Set(levelsProp);
+        return new Set(levelOrder.filter(level => !hiddenLevels.has(level)));
+    }, [isLevelsControlled, levelsProp, levelOrder, hiddenLevels]);
+    const isLevelActive = useCallback((level) => activeLevels.has(level), [activeLevels]);
+    // Read live values through refs so the toggle handler stays identity-stable.
+    const onLevelsChangeRef = useLatest(onLevelsChange);
+    const activeLevelsRef = useLatest(activeLevels);
+    const levelOrderRef = useLatest(levelOrder);
+    const isLevelsControlledRef = useLatest(isLevelsControlled);
+    const toggleLevel = useCallback((level) => {
+        const willHide = activeLevelsRef.current.has(level);
+        if (!isLevelsControlledRef.current) {
+            setHiddenLevels(prev => {
+                const next = new Set(prev);
+                if (willHide)
+                    next.add(level);
+                else
+                    next.delete(level);
+                return next;
+            });
+        }
+        // Emit the next visible set, ordered by `levelOrder`, in both modes.
+        const visible = levelOrderRef.current.filter(other => other === level ? !willHide : activeLevelsRef.current.has(other));
+        onLevelsChangeRef.current?.(visible);
+    }, [activeLevelsRef, isLevelsControlledRef, levelOrderRef, onLevelsChangeRef]);
+    const getLevelDefinition = useCallback((level) => resolveLevelDefinition(level, levelConfig), [levelConfig]);
+    // ── Filter / follow state ──
+    const [query, setQuery] = useControlledState({
+        value: queryProp,
+        defaultValue: defaultQuery,
+        onChange: onQueryChange,
+        fallback: '',
+    });
+    const queryRef = useLatest(query);
+    const [follow, setFollow] = useControlledState({
+        value: followProp,
+        defaultValue: defaultFollow,
+        onChange: onFollowChange,
+        fallback: true,
+    });
+    // ── Selection ──
+    const [selection, setSelection] = useControlledState({
+        value: selectedIdsProp,
+        defaultValue: defaultSelectedIds,
+        onChange: onSelectionChange,
+        fallback: [],
+    });
+    const selectedIds = useMemo(() => new Set(selection), [selection]);
+    const setSelectedIds = useCallback((ids) => {
+        setSelection([...ids]);
+    }, [setSelection]);
+    // ── Actions ──
+    const onClearRef = useLatest(onClear);
+    const clearLog = useCallback(() => {
+        if (!isControlledRef.current)
+            store.clear();
+        setSelection([]);
+        onClearRef.current?.();
+    }, [store, isControlledRef, onClearRef, setSelection]);
+    // Uses the live query (via ref), not the body's deferred query: this powers
+    // Copy, an explicit user action, so it should reflect exactly what is typed.
+    const getVisibleEntries = useCallback(() => filterEntries(store.getEntries(), {
+        query: queryRef.current,
+        caseSensitive,
+        knownLevels,
+        activeLevels,
+    }), [store, queryRef, caseSensitive, knownLevels, activeLevels]);
+    const selectedIdsRef = useLatest(selectedIds);
+    const getCopyEntries = useCallback(() => {
+        const ids = selectedIdsRef.current;
+        if (ids.size > 0) {
+            return store.getEntries().filter(entry => ids.has(entry.id));
+        }
+        return getVisibleEntries();
+    }, [store, selectedIdsRef, getVisibleEntries]);
+    // ── Imperative handle ──
+    useImperativeHandle(ref, () => ({
+        append: (entry) => {
+            if (isControlledRef.current) {
+                devWarn('[LogView] handle.append() is a no-op while `entries` is controlled. ' +
+                    'Append to your `entries` state instead, or drop the prop to go uncontrolled.');
+                return;
+            }
+            store.append(entry);
+        },
+        appendMany: (next) => {
+            if (isControlledRef.current) {
+                devWarn('[LogView] handle.appendMany() is a no-op while `entries` is controlled.');
+                return;
+            }
+            store.appendMany(next);
+        },
+        clear: clearLog,
+        scrollToBottom: () => {
+            store.scrollToBottom();
+        },
+        scrollToIndex: (index) => {
+            store.scrollToIndex(index);
+        },
+        getEntries: () => store.getEntries(),
+        getElement: () => rootRef.current,
+    }), [store, isControlledRef, clearLog]);
+    // ── Context ──
+    const contextValue = useMemo(() => ({
+        store,
+        query,
+        setQuery,
+        caseSensitive,
+        activeLevels,
+        knownLevels,
+        isLevelActive,
+        toggleLevel,
+        follow,
+        setFollow,
+        levelOrder,
+        getLevelDefinition,
+        wrap,
+        density,
+        showTimestamps,
+        formatTimestamp,
+        showSource,
+        virtualized,
+        virtualizationThreshold,
+        estimatedRowHeight,
+        overscan,
+        selectionMode,
+        selectedIds,
+        setSelectedIds,
+        renderEntry,
+        emptyState,
+        labels,
+        onEntryClick,
+        onCopy,
+        clearLog,
+        bodyId,
+        getVisibleEntries,
+        getCopyEntries,
+    }), [
+        store,
+        query,
+        setQuery,
+        caseSensitive,
+        activeLevels,
+        knownLevels,
+        isLevelActive,
+        toggleLevel,
+        follow,
+        setFollow,
+        levelOrder,
+        getLevelDefinition,
+        wrap,
+        density,
+        showTimestamps,
+        formatTimestamp,
+        showSource,
+        virtualized,
+        virtualizationThreshold,
+        estimatedRowHeight,
+        overscan,
+        selectionMode,
+        selectedIds,
+        setSelectedIds,
+        renderEntry,
+        emptyState,
+        labels,
+        onEntryClick,
+        onCopy,
+        clearLog,
+        bodyId,
+        getVisibleEntries,
+        getCopyEntries,
+    ]);
+    const rootStyle = {
+        height: typeof height === 'number' ? `${height}px` : height,
+        ...(maxHeight !== undefined
+            ? {
+                maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+            }
+            : {}),
+        ...style,
+    };
+    const defaultComposition = (jsxs(Fragment, { children: [showToolbar && (jsxs(LogViewToolbar, { ...slotProps?.toolbar, children: [showSearch && jsx(LogViewSearch, { ...slotProps?.search }), showLevelFilter && (jsx(LogViewLevelFilter, { ...slotProps?.levelFilter })), jsx("div", { className: toolbarSpacerStyle }), showCopy && jsx(LogViewCopy, { ...slotProps?.copy }), showClear && jsx(LogViewClear, { ...slotProps?.clear })] })), jsx(LogViewBody, { ...slotProps?.body }), footer != null && (jsx(LogViewFooter, { ...slotProps?.footer, children: footer }))] }));
+    return (jsx(LogViewContext.Provider, { value: contextValue, children: jsx("div", { ref: setRootRef, className: cx(rootRecipe({ density }), className), style: rootStyle, "data-testid": testId, "aria-label": ariaLabel ?? labels.regionLabel, ...rest, children: children ?? defaultComposition }) }));
+};
+LogViewRoot.displayName = 'LogView';
+/**
+ * A virtualized console / log output panel.
+ *
+ * Renders a large, append-only stream of {@link LogEntry} efficiently
+ * (virtualized via `@tanstack/react-virtual`), with level coloring, level
+ * filtering, text search with match highlighting, follow-tail auto-scroll, per
+ * line and bulk copy, timestamps, and source tags.
+ *
+ * **Data flow.** Pass a controlled `entries` array, or go uncontrolled and push
+ * via the imperative handle — `ref.append(entry)` / `appendMany` / `clear` are
+ * rAF-batched, so a high-frequency stream collapses to one render per frame.
+ *
+ * **Composition.** Use it batteries-included (default toolbar + body), or
+ * compose the slots yourself: `LogView.Toolbar`, `LogView.Search`,
+ * `LogView.LevelFilter`, `LogView.Copy`, `LogView.Clear`, `LogView.Body`.
+ *
+ * @example Uncontrolled streaming
+ * ```tsx
+ * const ref = useRef<LogViewHandle>(null);
+ * useEffect(() => {
+ *   const id = setInterval(() => {
+ *     ref.current?.append({ level: 'info', message: 'tick', timestamp: Date.now() });
+ *   }, 50);
+ *   return () => clearInterval(id);
+ * }, []);
+ * return <LogView ref={ref} showTimestamps height={360} />;
+ * ```
+ *
+ * @example Custom composition
+ * ```tsx
+ * <LogView entries={entries} wrap>
+ *   <LogView.Toolbar>
+ *     <LogView.LevelFilter />
+ *     <LogView.Search />
+ *   </LogView.Toolbar>
+ *   <LogView.Body />
+ * </LogView>
+ * ```
+ */
+const LogView = LogViewRoot;
+LogView.Toolbar = LogViewToolbar;
+LogView.Footer = LogViewFooter;
+LogView.Search = LogViewSearch;
+LogView.LevelFilter = LogViewLevelFilter;
+LogView.Clear = LogViewClear;
+LogView.Copy = LogViewCopy;
+LogView.Body = LogViewBody;
+
+export { LogView };
+//# sourceMappingURL=LogView.js.map

package/dist/esm/components/feedback/LogView/LogView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogView.js","sources":["../../../../../../src/components/feedback/LogView/LogView.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6CA;AAqDE;AACA;AACA;;AAGA;;;;;;;;;AAYE;AAGF;AACA;;;;AAI6B;AAC7B;;AAGE;AACF;;AAGE;AACF;AAEA;;AAGE;;;AAUF;;;;;;AAUA;AACA;;;AAMA;AACE;AAAwB;;;;;AAU1B;AACA;AACA;AACA;AAEA;;AAGI;;AAEI;AACA;AAAc;;AACT;AACL;AACF;;;AAGF;AAGA;;;;AAYJ;AACE;AACA;AACA;AACA;AACD;AACD;AAEA;AACE;AACA;AACA;AACA;AACD;;AAGD;AACE;AACA;AACA;AAGA;AACD;AACD;AACA;AAEI;AACF;;AAKF;AACA;;;;AAGE;;;;AAKF;;;;;AAOK;AAIL;AACA;AACE;AACA;;;;;;AAOF;AAGI;AACE;AACE;AAEI;;;AAIN;;AAEF;AACE;;;;AAMA;;AAEF;;;;AAIA;AACE;;AAEF;AACA;;;AAMJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;AAGH;AACE;;AAEE;AACI;AAED;;AAEL;;AAGF;;AAkCF;AAEA;AAcA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AACI;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;"}

package/dist/esm/components/feedback/LogView/LogViewBody.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React, { memo, useDeferredValue, useMemo, useRef, useEffect, useCallback } from 'react';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { CopyIcon } from '../../Icons/CopyIcon.js';
+import { Badge } from '../../primitives/Badge/Badge.js';
+import { Button } from '../../primitives/Button/Button.js';
+import { IconButton } from '../../primitives/IconButton/IconButton.js';
+import { useClipboard } from '../../../hooks/useClipboard/useClipboard.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import { cx } from '../../../utils/cx.js';
+import { levelColorVar, timestampStyle, rowGlyphStyle, sourceCellStyle, sourceTagStyle, highlightStyle, messageRecipe, copyLineButtonStyle, rowRecipe, DENSITY_ROW_HEIGHT, scrollViewportStyle, emptyStateStyle, virtualBodyStyle, totalHeightVar, plainBodyStyle, jumpBadgeStyle, jumpButtonRecipe, bodyDensityRecipe, bodyStyle } from './LogView.css.js';
+import { useLogViewContext, useLogEntries } from './LogViewContext.js';
+import { levelVariant } from './logViewLevels.js';
+import { getHighlightSegments, filterEntries, entryToText, entriesToText } from './logViewUtils.js';
+import { useFollowTail } from './useFollowTail.js';
+import { useLogSelection } from './useLogSelection.js';
+
+/**
+ * True when there is an active (non-collapsed) text selection whose anchor is
+ * inside `container`. Scoped to the log body so a selection elsewhere on the
+ * page does not suppress a row click or the copy shortcut.
+ */
+function hasTextSelectionWithin(container) {
+    if (container === null ||
+        typeof window === 'undefined' ||
+        typeof window.getSelection !== 'function')
+        return false;
+    const selection = window.getSelection();
+    if (selection === null ||
+        selection.isCollapsed ||
+        selection.toString() === '')
+        return false;
+    return (selection.anchorNode !== null && container.contains(selection.anchorNode));
+}
+/** A single log line. Memoized so scrolling only renders newly-visible rows. */
+const LogRow = memo(function LogRow({ entry, index, query, caseSensitive, levelDef, wrap, showTimestamps, formatTimestamp, showSource, interactive, selectable, selected, renderEntry, onRowClick, onRowKeyDown, onCopyLine, copyLineLabel, virtualized, start, measureRef, }) {
+    const Icon = levelDef.icon;
+    const hasSource = entry.source != null && entry.source !== '';
+    const rowStyle = {};
+    if (virtualized)
+        rowStyle.transform = `translateY(${start}px)`;
+    if (!levelDef.isBuiltIn && levelDef.color !== undefined) {
+        Object.assign(rowStyle, assignInlineVars({ [levelColorVar]: levelDef.color }));
+    }
+    const handleClick = interactive
+        ? (event) => {
+            onRowClick(entry, index, event);
+        }
+        : undefined;
+    const handleKeyDown = interactive
+        ? (event) => {
+            onRowKeyDown(entry, index, event);
+        }
+        : undefined;
+    const segments = getHighlightSegments(entry.message, query, caseSensitive);
+    return (jsxs("div", { ref: measureRef, "data-index": index, "data-log-row": true, "data-log-copy-host": true, "data-level": entry.level, "data-selected": selected || undefined, role: interactive ? 'button' : undefined, tabIndex: interactive ? 0 : undefined, "aria-pressed": selectable ? selected : undefined, className: cx(rowRecipe({
+            level: levelVariant(levelDef),
+            virtualized: virtualized || undefined,
+            interactive: interactive || undefined,
+            selected: selected || undefined,
+            align: wrap ? 'start' : 'center',
+        })), style: rowStyle, onClick: handleClick, onKeyDown: handleKeyDown, children: [showTimestamps && (jsx("span", { className: timestampStyle, "data-log-time": true, children: entry.timestamp != null ? formatTimestamp(entry.timestamp) : '' })), jsx("span", { className: rowGlyphStyle, "aria-hidden": "true", children: Icon ? jsx(Icon, { size: "md", color: "currentColor" }) : null }), showSource && (jsx("span", { className: sourceCellStyle, "data-log-source": true, title: hasSource ? entry.source : undefined, children: hasSource ? (jsx(Badge, { variant: "subtle", size: "xs", className: sourceTagStyle, children: entry.source })) : null })), jsx("span", { className: messageRecipe({ wrap }), children: renderEntry
+                    ? renderEntry({ entry, index, query })
+                    : segments.map((segment, i) => segment.match ? (jsx("mark", { className: highlightStyle, children: segment.text }, i)) : (jsx(React.Fragment, { children: segment.text }, i))) }), jsx("span", { className: copyLineButtonStyle, "data-log-copy": true, children: jsx(IconButton, { "aria-label": copyLineLabel, size: "sm", variant: "ghost", onClick: event => {
+                        event.stopPropagation();
+                        onCopyLine(entry);
+                    }, children: jsx(CopyIcon, { size: "md" }) }) })] }));
+});
+/**
+ * The virtualized log body. Reads the entry stream from the store, applies the
+ * deferred search + level filter, and renders only the visible window via
+ * `@tanstack/react-virtual` (mirroring `DataTable`). Owns follow-tail behavior
+ * and the floating jump-to-bottom button.
+ */
+const LogViewBody = ({ className, style, testId, ref, ...rest }) => {
+    const ctx = useLogViewContext();
+    const { store, query, caseSensitive, activeLevels, knownLevels, follow, setFollow, getLevelDefinition, wrap, density, showTimestamps, formatTimestamp, showSource, virtualized, virtualizationThreshold, estimatedRowHeight, overscan, selectionMode, selectedIds, setSelectedIds, getCopyEntries, renderEntry, emptyState, onEntryClick, onCopy, bodyId, labels, } = ctx;
+    const entries = useLogEntries(store);
+    const deferredQuery = useDeferredValue(query);
+    const allLevelsActive = useMemo(() => {
+        for (const level of knownLevels) {
+            if (!activeLevels.has(level))
+                return false;
+        }
+        return true;
+    }, [knownLevels, activeLevels]);
+    const filtered = useMemo(() => {
+        if (deferredQuery.trim() === '' && allLevelsActive)
+            return entries;
+        return filterEntries(entries, {
+            query: deferredQuery,
+            caseSensitive,
+            knownLevels,
+            activeLevels,
+        });
+    }, [
+        entries,
+        deferredQuery,
+        caseSensitive,
+        knownLevels,
+        activeLevels,
+        allLevelsActive,
+    ]);
+    // A prefix column is only reserved when its field is actually present in the
+    // data. If nothing has a timestamp / source there is no column at all (the
+    // message sits right after the icon, as if columns didn't exist); once at
+    // least one entry uses the field, every row reserves it so they stay aligned.
+    // Keyed off the full entry set (not the filtered view) so filtering can't make
+    // a column appear/disappear and shift the layout.
+    const hasAnyTimestamp = useMemo(() => showTimestamps && entries.some(entry => entry.timestamp != null), [showTimestamps, entries]);
+    const hasAnySource = useMemo(() => showSource &&
+        entries.some(entry => entry.source != null && entry.source !== ''), [showSource, entries]);
+    const scrollRef = useRef(null);
+    const shouldVirtualize = virtualized === true ||
+        (virtualized === 'auto' && filtered.length > virtualizationThreshold);
+    const rowHeightPx = estimatedRowHeight ?? DENSITY_ROW_HEIGHT[density];
+    // TanStack Virtual returns functions that can't be memoized; the Compiler
+    // flags it as an incompatible library. Reads are imperative per render.
+    // eslint-disable-next-line react-hooks/incompatible-library
+    const virtualizer = useVirtualizer({
+        count: shouldVirtualize ? filtered.length : 0,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => rowHeightPx,
+        overscan,
+    });
+    const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
+    const totalSize = shouldVirtualize ? virtualizer.getTotalSize() : 0;
+    const { scrollToBottom, isDetached, newSinceDetach } = useFollowTail({
+        scrollRef,
+        follow,
+        setFollow,
+        entryCount: filtered.length,
+    });
+    // Let the imperative handle's scrollToBottom reach this body.
+    useEffect(() => store.registerScroller(scrollToBottom), [store, scrollToBottom]);
+    // Let the imperative handle's scrollToIndex reach this body.
+    const scrollToIndex = useCallback((index) => {
+        if (shouldVirtualize) {
+            virtualizer.scrollToIndex(index, { align: 'auto' });
+            return;
+        }
+        const el = scrollRef.current?.querySelector(`[data-index="${index}"]`);
+        el?.scrollIntoView({ block: 'nearest' });
+    }, [shouldVirtualize, virtualizer]);
+    useEffect(() => store.registerScrollToIndex(scrollToIndex), [store, scrollToIndex]);
+    const { copy } = useClipboard();
+    const onCopyRef = useLatest(onCopy);
+    const handleCopyLine = useCallback((entry) => {
+        const text = entryToText(entry, { showTimestamps, formatTimestamp });
+        void copy(text);
+        onCopyRef.current?.(text);
+    }, [copy, showTimestamps, formatTimestamp, onCopyRef]);
+    const selectable = selectionMode !== false;
+    const interactive = selectable || onEntryClick !== undefined;
+    const copySelectionOrVisible = useCallback(() => {
+        const entries = getCopyEntries();
+        if (entries.length === 0)
+            return;
+        const text = entriesToText(entries, { showTimestamps, formatTimestamp });
+        void copy(text);
+        onCopyRef.current?.(text);
+    }, [getCopyEntries, showTimestamps, formatTimestamp, copy, onCopyRef]);
+    // Scoped to the scroll viewport so a selection elsewhere on the page doesn't
+    // suppress a row click or the copy shortcut.
+    const isTextSelected = useCallback(() => hasTextSelectionWithin(scrollRef.current), []);
+    const { handleRowClick, handleRowKeyDown } = useLogSelection({
+        selectionMode,
+        selectedIds,
+        setSelectedIds,
+        filtered,
+        onEntryClick,
+        isTextSelected,
+        onCopyShortcut: copySelectionOrVisible,
+    });
+    // Resolve level definitions through a per-render-stable cache: `LogRow` is
+    // memoized, so handing it a fresh definition object each render would defeat
+    // the memo. The cache resets whenever `getLevelDefinition` (i.e. levelConfig)
+    // changes.
+    const resolveLevelDef = useMemo(() => {
+        const cache = new Map();
+        return (level) => {
+            const cached = cache.get(level);
+            if (cached !== undefined)
+                return cached;
+            const def = getLevelDefinition(level);
+            cache.set(level, def);
+            return def;
+        };
+    }, [getLevelDefinition]);
+    const renderRow = (entry, index, start) => (jsx(LogRow, { entry: entry, index: index, query: deferredQuery, caseSensitive: caseSensitive, levelDef: resolveLevelDef(entry.level), wrap: wrap, showTimestamps: hasAnyTimestamp, formatTimestamp: formatTimestamp, showSource: hasAnySource, interactive: interactive, selectable: selectable, selected: selectedIds.has(entry.id), renderEntry: renderEntry, onRowClick: handleRowClick, onRowKeyDown: handleRowKeyDown, onCopyLine: handleCopyLine, copyLineLabel: labels.copyLineLabel, virtualized: shouldVirtualize, start: start, measureRef: shouldVirtualize && wrap ? virtualizer.measureElement : undefined }, entry.id));
+    const isEmpty = filtered.length === 0;
+    return (jsxs("div", { ref: ref, className: cx(bodyStyle, bodyDensityRecipe({ density }), className), style: style, "data-testid": testId, ...rest, children: [jsx("div", { ref: scrollRef, id: bodyId, role: "log", "aria-live": "off", className: scrollViewportStyle, children: isEmpty ? (jsx("div", { className: emptyStateStyle, children: emptyState ?? labels.emptyLabel })) : shouldVirtualize ? (jsx("div", { className: virtualBodyStyle, style: assignInlineVars({ [totalHeightVar]: `${totalSize}px` }), children: virtualItems.map(item => {
+                        const entry = filtered[item.index];
+                        if (entry === undefined)
+                            return null;
+                        return renderRow(entry, item.index, item.start);
+                    }) })) : (jsx("div", { className: plainBodyStyle, children: filtered.map((entry, index) => renderRow(entry, index, 0)) })) }), jsx("div", { "data-log-jump": true, className: jumpButtonRecipe({ visible: isDetached || undefined }), "aria-hidden": !isDetached, children: jsx(Button, { size: "sm", variant: "default", icon: jsx(ChevronDownIcon, { size: "md" }), onClick: scrollToBottom, "aria-label": labels.jumpToBottomLabel, tabIndex: isDetached ? 0 : -1, children: newSinceDetach > 0 ? (jsx("span", { className: jumpBadgeStyle, children: labels.newLinesLabel(newSinceDetach) })) : (labels.jumpToBottomLabel) }) })] }));
+};
+LogViewBody.displayName = 'LogView.Body';
+
+export { LogViewBody };
+//# sourceMappingURL=LogViewBody.js.map

package/dist/esm/components/feedback/LogView/LogViewBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewBody.js","sources":["../../../../../../src/components/feedback/LogView/LogViewBody.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA8DA;;;;AAIG;AACH;;;AAII;AAEA;AACF;;AAGE;AACA;AAEA;AACF;AAGF;AAiCA;AACA;AAsBE;AACA;;AAGA;AAAiB;;AAEf;;;AAOA;AACI;;;;AAIJ;AACI;;;AAIN;;AAeQ;;;;;AAKD;;AAiCC;;;AAmBA;AAOV;AAEA;;;;;AAKG;AACI;AAOL;;AA+BA;AACA;AAEA;AACE;AACE;AAA8B;;AAEhC;AACF;AAEA;AACE;AAAoD;;AAElD;;;;AAID;AACH;;;;;;;AAOC;;;;;;;AAQD;AAIA;;AAOA;AAEA;;;;;;;;AAWE;AACA;;AAED;AAED;AACA;;;;;;AAOC;;AAGD;;AAMA;;;;;AAMI;;AAIF;AAIF;AAKA;AACA;AAEA;AAEI;AACA;AACA;;AAKJ;AACA;AAEA;AACE;AACA;;AACA;AACA;AACA;AACF;;;AAIA;AAKA;;;;;;;AAOE;AACD;;;;;AAMD;AACE;;;;AAG4B;AAC1B;AACA;AACA;AACF;AACF;AAEA;AA4BA;;;;AA4BqC;AACzB;AACF;AAiCZ;AAEA;;"}

package/dist/esm/components/feedback/LogView/LogViewContext.js

@@ -0,0 +1,31 @@
+"use client";
+import { createContext, useContext, useSyncExternalStore } from 'react';
+
+const LogViewContext = 
+/*#__PURE__*/ createContext(null);
+/** Read the LogView context. Throws when used outside `<LogView>`. */
+function useLogViewContext() {
+    const ctx = useContext(LogViewContext);
+    if (ctx === null) {
+        throw new Error('LogView compound components must be rendered inside <LogView>.');
+    }
+    return ctx;
+}
+/** Subscribe to the store's entry stream. Re-renders on each (rAF-batched) commit. */
+function useLogEntries(store) {
+    return useSyncExternalStore(store.subscribeEntries, store.getEntries, store.getEntries);
+}
+/** Subscribe to the store's per-level counts. */
+function useLogCounts(store) {
+    return useSyncExternalStore(store.subscribeCounts, store.getCounts, store.getCounts);
+}
+/** Live stats for the current LogView. Call inside `<LogView>` (e.g. in a footer). */
+function useLogViewStats() {
+    const { store } = useLogViewContext();
+    const entries = useLogEntries(store);
+    const counts = useLogCounts(store);
+    return { total: entries.length, counts };
+}
+
+export { LogViewContext, useLogCounts, useLogEntries, useLogViewContext, useLogViewStats };
+//# sourceMappingURL=LogViewContext.js.map

package/dist/esm/components/feedback/LogView/LogViewContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewContext.js","sources":["../../../../../../src/components/feedback/LogView/LogViewContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAsFE;AAEF;;AAEE;AACA;AACE;;AAIF;AACF;AAEA;AACM;AAGJ;AAKF;AAEA;AACM;AACJ;AAKF;AAEA;;AAEE;AACA;AACA;;AAEF;;"}