entangle-ui 0.9.0 → 0.11.0

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":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useLatest } from '@/hooks/useLatest';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { cx } from '@/utils/cx';\nimport { devWarn } from '@/utils/devWarn';\n\nimport { rootRecipe, toolbarSpacerStyle } from './LogView.css';\nimport { LogViewBody } from './LogViewBody';\nimport { LogViewContext } from './LogViewContext';\nimport { resolveLogViewLabels } from './logViewLabels';\nimport { resolveLevelDefinition, resolveLevelOrder } from './logViewLevels';\nimport {\n  LogViewClear,\n  LogViewCopy,\n  LogViewFooter,\n  LogViewLevelFilter,\n  LogViewSearch,\n  LogViewToolbar,\n} from './LogViewParts';\nimport { LogViewStore } from './LogViewStore';\nimport { defaultFormatTimestamp, filterEntries } from './logViewUtils';\n\nimport type {\n  LogEntry,\n  LogLevel,\n  LogViewHandle,\n  LogViewProps,\n  ResolvedLogEntry,\n} from './LogView.types';\nimport type { LogViewContextValue } from './LogViewContext';\nimport type { ResolvedLevelDefinition } from './logViewLevels';\n\nconst LogViewRoot = ({\n  entries,\n  defaultEntries,\n  maxEntries,\n  getEntryId,\n  query: queryProp,\n  defaultQuery,\n  onQueryChange,\n  caseSensitive = false,\n  levels: levelsProp,\n  defaultLevels,\n  onLevelsChange,\n  levelConfig,\n  levelOrder: levelOrderProp,\n  follow: followProp,\n  defaultFollow = true,\n  onFollowChange,\n  wrap = false,\n  density = 'compact',\n  showTimestamps = false,\n  formatTimestamp = defaultFormatTimestamp,\n  showSource = true,\n  showToolbar = true,\n  showSearch = true,\n  showLevelFilter = true,\n  showClear = true,\n  showCopy = true,\n  virtualized = 'auto',\n  virtualizationThreshold = 100,\n  estimatedRowHeight,\n  overscan = 12,\n  selectionMode = false,\n  selectedIds: selectedIdsProp,\n  defaultSelectedIds,\n  onSelectionChange,\n  height = 320,\n  maxHeight,\n  renderEntry,\n  emptyState,\n  footer,\n  onClear,\n  onEntryClick,\n  onCopy,\n  labels: labelsProp,\n  slotProps,\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  'aria-label': ariaLabel,\n  ...rest\n}: LogViewProps): React.ReactElement => {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const setRootRef = useMergedRef<HTMLDivElement>(rootRef);\n  const bodyId = useId();\n\n  // Resolved i18n strings: English defaults merged with the `labels` override.\n  const labels = useMemo(() => resolveLogViewLabels(labelsProp), [labelsProp]);\n\n  // One store per LogView instance. Created once; later prop changes flow\n  // through the effects below (the same per-instance store pattern as Viewport).\n  const store = useMemo(\n    () =>\n      new LogViewStore({\n        initial: entries ?? defaultEntries,\n        maxEntries,\n        getEntryId,\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- store is created once; prop updates are mirrored via effects.\n    []\n  );\n\n  const isControlled = entries !== undefined;\n  const isControlledRef = useLatest(isControlled);\n\n  // Mirror the controlled entries prop into the store.\n  useLayoutEffect(() => {\n    if (entries !== undefined) store.setEntries(entries);\n  }, [entries, store]);\n\n  useEffect(() => {\n    store.setMaxEntries(maxEntries);\n  }, [maxEntries, store]);\n\n  useEffect(() => {\n    store.setGetEntryId(getEntryId);\n  }, [getEntryId, store]);\n\n  useEffect(\n    () => () => {\n      store.dispose();\n    },\n    [store]\n  );\n\n  // ── Levels ──\n  const levelOrder = useMemo(\n    () => resolveLevelOrder(levelConfig, levelOrderProp),\n    [levelConfig, levelOrderProp]\n  );\n\n  const knownLevels = useMemo(\n    () => new Set<LogLevel>(levelOrder),\n    [levelOrder]\n  );\n\n  // Visibility is tracked as the set of *hidden* levels (uncontrolled) so the\n  // active set can be derived as \"known minus hidden\". A level introduced later\n  // via `levelConfig` is therefore visible by default, while an explicit\n  // toggle-off survives changes to `levelOrder`. In controlled mode the\n  // `levels` prop is the source of truth and this state is unused.\n  const isLevelsControlled = levelsProp !== undefined;\n  const [hiddenLevels, setHiddenLevels] = useState<ReadonlySet<LogLevel>>(() =>\n    defaultLevels === undefined\n      ? new Set<LogLevel>()\n      : new Set(levelOrder.filter(level => !defaultLevels.includes(level)))\n  );\n\n  const activeLevels = useMemo<ReadonlySet<LogLevel>>(() => {\n    if (isLevelsControlled) return new Set(levelsProp);\n    return new Set(levelOrder.filter(level => !hiddenLevels.has(level)));\n  }, [isLevelsControlled, levelsProp, levelOrder, hiddenLevels]);\n\n  const isLevelActive = useCallback(\n    (level: LogLevel) => activeLevels.has(level),\n    [activeLevels]\n  );\n\n  // Read live values through refs so the toggle handler stays identity-stable.\n  const onLevelsChangeRef = useLatest(onLevelsChange);\n  const activeLevelsRef = useLatest(activeLevels);\n  const levelOrderRef = useLatest(levelOrder);\n  const isLevelsControlledRef = useLatest(isLevelsControlled);\n\n  const toggleLevel = useCallback(\n    (level: LogLevel) => {\n      const willHide = activeLevelsRef.current.has(level);\n      if (!isLevelsControlledRef.current) {\n        setHiddenLevels(prev => {\n          const next = new Set(prev);\n          if (willHide) next.add(level);\n          else next.delete(level);\n          return next;\n        });\n      }\n      // Emit the next visible set, ordered by `levelOrder`, in both modes.\n      const visible = levelOrderRef.current.filter(other =>\n        other === level ? !willHide : activeLevelsRef.current.has(other)\n      );\n      onLevelsChangeRef.current?.(visible);\n    },\n    [activeLevelsRef, isLevelsControlledRef, levelOrderRef, onLevelsChangeRef]\n  );\n\n  const getLevelDefinition = useCallback(\n    (level: LogLevel): ResolvedLevelDefinition =>\n      resolveLevelDefinition(level, levelConfig),\n    [levelConfig]\n  );\n\n  // ── Filter / follow state ──\n  const [query, setQuery] = useControlledState<string>({\n    value: queryProp,\n    defaultValue: defaultQuery,\n    onChange: onQueryChange,\n    fallback: '',\n  });\n  const queryRef = useLatest(query);\n\n  const [follow, setFollow] = useControlledState<boolean>({\n    value: followProp,\n    defaultValue: defaultFollow,\n    onChange: onFollowChange,\n    fallback: true,\n  });\n\n  // ── Selection ──\n  const [selection, setSelection] = useControlledState<readonly string[]>({\n    value: selectedIdsProp,\n    defaultValue: defaultSelectedIds,\n    onChange: onSelectionChange as\n      | ((value: readonly string[]) => void)\n      | undefined,\n    fallback: [],\n  });\n  const selectedIds = useMemo(() => new Set(selection), [selection]);\n  const setSelectedIds = useCallback(\n    (ids: ReadonlySet<string>) => {\n      setSelection([...ids]);\n    },\n    [setSelection]\n  );\n\n  // ── Actions ──\n  const onClearRef = useLatest(onClear);\n  const clearLog = useCallback(() => {\n    if (!isControlledRef.current) store.clear();\n    setSelection([]);\n    onClearRef.current?.();\n  }, [store, isControlledRef, onClearRef, setSelection]);\n\n  // Uses the live query (via ref), not the body's deferred query: this powers\n  // Copy, an explicit user action, so it should reflect exactly what is typed.\n  const getVisibleEntries = useCallback(\n    (): ResolvedLogEntry[] =>\n      filterEntries(store.getEntries(), {\n        query: queryRef.current,\n        caseSensitive,\n        knownLevels,\n        activeLevels,\n      }),\n    [store, queryRef, caseSensitive, knownLevels, activeLevels]\n  );\n\n  const selectedIdsRef = useLatest(selectedIds);\n  const getCopyEntries = useCallback((): ResolvedLogEntry[] => {\n    const ids = selectedIdsRef.current;\n    if (ids.size > 0) {\n      return store.getEntries().filter(entry => ids.has(entry.id));\n    }\n    return getVisibleEntries();\n  }, [store, selectedIdsRef, getVisibleEntries]);\n\n  // ── Imperative handle ──\n  useImperativeHandle(\n    ref,\n    (): LogViewHandle => ({\n      append: (entry: LogEntry) => {\n        if (isControlledRef.current) {\n          devWarn(\n            '[LogView] handle.append() is a no-op while `entries` is controlled. ' +\n              'Append to your `entries` state instead, or drop the prop to go uncontrolled.'\n          );\n          return;\n        }\n        store.append(entry);\n      },\n      appendMany: (next: readonly LogEntry[]) => {\n        if (isControlledRef.current) {\n          devWarn(\n            '[LogView] handle.appendMany() is a no-op while `entries` is controlled.'\n          );\n          return;\n        }\n        store.appendMany(next);\n      },\n      clear: clearLog,\n      scrollToBottom: () => {\n        store.scrollToBottom();\n      },\n      scrollToIndex: (index: number) => {\n        store.scrollToIndex(index);\n      },\n      getEntries: () => store.getEntries(),\n      getElement: () => rootRef.current,\n    }),\n    [store, isControlledRef, clearLog]\n  );\n\n  // ── Context ──\n  const contextValue = useMemo<LogViewContextValue>(\n    () => ({\n      store,\n      query,\n      setQuery,\n      caseSensitive,\n      activeLevels,\n      knownLevels,\n      isLevelActive,\n      toggleLevel,\n      follow,\n      setFollow,\n      levelOrder,\n      getLevelDefinition,\n      wrap,\n      density,\n      showTimestamps,\n      formatTimestamp,\n      showSource,\n      virtualized,\n      virtualizationThreshold,\n      estimatedRowHeight,\n      overscan,\n      selectionMode,\n      selectedIds,\n      setSelectedIds,\n      renderEntry,\n      emptyState,\n      labels,\n      onEntryClick,\n      onCopy,\n      clearLog,\n      bodyId,\n      getVisibleEntries,\n      getCopyEntries,\n    }),\n    [\n      store,\n      query,\n      setQuery,\n      caseSensitive,\n      activeLevels,\n      knownLevels,\n      isLevelActive,\n      toggleLevel,\n      follow,\n      setFollow,\n      levelOrder,\n      getLevelDefinition,\n      wrap,\n      density,\n      showTimestamps,\n      formatTimestamp,\n      showSource,\n      virtualized,\n      virtualizationThreshold,\n      estimatedRowHeight,\n      overscan,\n      selectionMode,\n      selectedIds,\n      setSelectedIds,\n      renderEntry,\n      emptyState,\n      labels,\n      onEntryClick,\n      onCopy,\n      clearLog,\n      bodyId,\n      getVisibleEntries,\n      getCopyEntries,\n    ]\n  );\n\n  const rootStyle: React.CSSProperties = {\n    height: typeof height === 'number' ? `${height}px` : height,\n    ...(maxHeight !== undefined\n      ? {\n          maxHeight:\n            typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\n        }\n      : {}),\n    ...style,\n  };\n\n  const defaultComposition = (\n    <>\n      {showToolbar && (\n        <LogViewToolbar {...slotProps?.toolbar}>\n          {showSearch && <LogViewSearch {...slotProps?.search} />}\n          {showLevelFilter && (\n            <LogViewLevelFilter {...slotProps?.levelFilter} />\n          )}\n          <div className={toolbarSpacerStyle} />\n          {showCopy && <LogViewCopy {...slotProps?.copy} />}\n          {showClear && <LogViewClear {...slotProps?.clear} />}\n        </LogViewToolbar>\n      )}\n      <LogViewBody {...slotProps?.body} />\n      {footer != null && (\n        <LogViewFooter {...slotProps?.footer}>{footer}</LogViewFooter>\n      )}\n    </>\n  );\n\n  return (\n    <LogViewContext.Provider value={contextValue}>\n      <div\n        ref={setRootRef}\n        className={cx(rootRecipe({ density }), className)}\n        style={rootStyle}\n        data-testid={testId}\n        aria-label={ariaLabel ?? labels.regionLabel}\n        {...rest}\n      >\n        {children ?? defaultComposition}\n      </div>\n    </LogViewContext.Provider>\n  );\n};\n\nLogViewRoot.displayName = 'LogView';\n\ninterface LogViewComponent {\n  (props: LogViewProps): React.ReactElement;\n  displayName?: string;\n  Toolbar: typeof LogViewToolbar;\n  Footer: typeof LogViewFooter;\n  Search: typeof LogViewSearch;\n  LevelFilter: typeof LogViewLevelFilter;\n  Clear: typeof LogViewClear;\n  Copy: typeof LogViewCopy;\n  Body: typeof LogViewBody;\n}\n\n/**\n * A virtualized console / log output panel.\n *\n * Renders a large, append-only stream of {@link LogEntry} efficiently\n * (virtualized via `@tanstack/react-virtual`), with level coloring, level\n * filtering, text search with match highlighting, follow-tail auto-scroll, per\n * line and bulk copy, timestamps, and source tags.\n *\n * **Data flow.** Pass a controlled `entries` array, or go uncontrolled and push\n * via the imperative handle — `ref.append(entry)` / `appendMany` / `clear` are\n * rAF-batched, so a high-frequency stream collapses to one render per frame.\n *\n * **Composition.** Use it batteries-included (default toolbar + body), or\n * compose the slots yourself: `LogView.Toolbar`, `LogView.Search`,\n * `LogView.LevelFilter`, `LogView.Copy`, `LogView.Clear`, `LogView.Body`.\n *\n * @example Uncontrolled streaming\n * ```tsx\n * const ref = useRef<LogViewHandle>(null);\n * useEffect(() => {\n *   const id = setInterval(() => {\n *     ref.current?.append({ level: 'info', message: 'tick', timestamp: Date.now() });\n *   }, 50);\n *   return () => clearInterval(id);\n * }, []);\n * return <LogView ref={ref} showTimestamps height={360} />;\n * ```\n *\n * @example Custom composition\n * ```tsx\n * <LogView entries={entries} wrap>\n *   <LogView.Toolbar>\n *     <LogView.LevelFilter />\n *     <LogView.Search />\n *   </LogView.Toolbar>\n *   <LogView.Body />\n * </LogView>\n * ```\n */\nexport const LogView = LogViewRoot as LogViewComponent;\n\nLogView.Toolbar = LogViewToolbar;\nLogView.Footer = LogViewFooter;\nLogView.Search = LogViewSearch;\nLogView.LevelFilter = LogViewLevelFilter;\nLogView.Clear = LogViewClear;\nLogView.Copy = LogViewCopy;\nLogView.Body = LogViewBody;\n"],"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":["'use client';\n\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, {\n  memo,\n  useCallback,\n  useDeferredValue,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { ChevronDownIcon } from '@/components/Icons/ChevronDownIcon';\nimport { CopyIcon } from '@/components/Icons/CopyIcon';\nimport { Badge } from '@/components/primitives/Badge';\nimport { Button } from '@/components/primitives/Button';\nimport { IconButton } from '@/components/primitives/IconButton';\nimport { useClipboard } from '@/hooks/useClipboard';\nimport { useLatest } from '@/hooks/useLatest';\nimport { cx } from '@/utils/cx';\n\nimport {\n  DENSITY_ROW_HEIGHT,\n  bodyDensityRecipe,\n  bodyStyle,\n  copyLineButtonStyle,\n  emptyStateStyle,\n  highlightStyle,\n  jumpBadgeStyle,\n  jumpButtonRecipe,\n  levelColorVar,\n  messageRecipe,\n  plainBodyStyle,\n  rowGlyphStyle,\n  rowRecipe,\n  scrollViewportStyle,\n  sourceCellStyle,\n  sourceTagStyle,\n  timestampStyle,\n  totalHeightVar,\n  virtualBodyStyle,\n} from './LogView.css';\nimport { useLogEntries, useLogViewContext } from './LogViewContext';\nimport { levelVariant } from './logViewLevels';\nimport {\n  entriesToText,\n  entryToText,\n  filterEntries,\n  getHighlightSegments,\n} from './logViewUtils';\nimport { useFollowTail } from './useFollowTail';\nimport { useLogSelection } from './useLogSelection';\n\nimport type {\n  LogEntryRenderInfo,\n  LogLevel,\n  LogViewBodyProps,\n  ResolvedLogEntry,\n} from './LogView.types';\nimport type { ResolvedLevelDefinition } from './logViewLevels';\n\n/**\n * True when there is an active (non-collapsed) text selection whose anchor is\n * inside `container`. Scoped to the log body so a selection elsewhere on the\n * page does not suppress a row click or the copy shortcut.\n */\nfunction hasTextSelectionWithin(container: HTMLElement | null): boolean {\n  if (\n    container === null ||\n    typeof window === 'undefined' ||\n    typeof window.getSelection !== 'function'\n  )\n    return false;\n  const selection = window.getSelection();\n  if (\n    selection === null ||\n    selection.isCollapsed ||\n    selection.toString() === ''\n  )\n    return false;\n  return (\n    selection.anchorNode !== null && container.contains(selection.anchorNode)\n  );\n}\n\ninterface LogRowProps {\n  entry: ResolvedLogEntry;\n  index: number;\n  query: string;\n  caseSensitive: boolean;\n  levelDef: ResolvedLevelDefinition;\n  wrap: boolean;\n  showTimestamps: boolean;\n  formatTimestamp: (timestamp: number | Date) => string;\n  showSource: boolean;\n  interactive: boolean;\n  selectable: boolean;\n  selected: boolean;\n  renderEntry: ((info: LogEntryRenderInfo) => React.ReactNode) | undefined;\n  onRowClick: (\n    entry: ResolvedLogEntry,\n    index: number,\n    event: React.MouseEvent | React.KeyboardEvent\n  ) => void;\n  onRowKeyDown: (\n    entry: ResolvedLogEntry,\n    index: number,\n    event: React.KeyboardEvent<HTMLDivElement>\n  ) => void;\n  onCopyLine: (entry: ResolvedLogEntry) => void;\n  copyLineLabel: string;\n  virtualized: boolean;\n  start: number;\n  measureRef?: (node: Element | null) => void;\n}\n\n/** A single log line. Memoized so scrolling only renders newly-visible rows. */\nconst LogRow = memo(function LogRow({\n  entry,\n  index,\n  query,\n  caseSensitive,\n  levelDef,\n  wrap,\n  showTimestamps,\n  formatTimestamp,\n  showSource,\n  interactive,\n  selectable,\n  selected,\n  renderEntry,\n  onRowClick,\n  onRowKeyDown,\n  onCopyLine,\n  copyLineLabel,\n  virtualized,\n  start,\n  measureRef,\n}: LogRowProps): React.ReactElement {\n  const Icon = levelDef.icon;\n  const hasSource = entry.source != null && entry.source !== '';\n\n  const rowStyle: React.CSSProperties = {};\n  if (virtualized) rowStyle.transform = `translateY(${start}px)`;\n  if (!levelDef.isBuiltIn && levelDef.color !== undefined) {\n    Object.assign(\n      rowStyle,\n      assignInlineVars({ [levelColorVar]: levelDef.color })\n    );\n  }\n\n  const handleClick = interactive\n    ? (event: React.MouseEvent<HTMLDivElement>) => {\n        onRowClick(entry, index, event);\n      }\n    : undefined;\n  const handleKeyDown = interactive\n    ? (event: React.KeyboardEvent<HTMLDivElement>) => {\n        onRowKeyDown(entry, index, event);\n      }\n    : undefined;\n\n  const segments = getHighlightSegments(entry.message, query, caseSensitive);\n\n  return (\n    <div\n      ref={measureRef}\n      data-index={index}\n      data-log-row\n      data-log-copy-host\n      data-level={entry.level}\n      data-selected={selected || undefined}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-pressed={selectable ? selected : undefined}\n      className={cx(\n        rowRecipe({\n          level: levelVariant(levelDef),\n          virtualized: virtualized || undefined,\n          interactive: interactive || undefined,\n          selected: selected || undefined,\n          align: wrap ? 'start' : 'center',\n        })\n      )}\n      style={rowStyle}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      {showTimestamps && (\n        <span className={timestampStyle} data-log-time>\n          {entry.timestamp != null ? formatTimestamp(entry.timestamp) : ''}\n        </span>\n      )}\n\n      <span className={rowGlyphStyle} aria-hidden=\"true\">\n        {Icon ? <Icon size=\"md\" color=\"currentColor\" /> : null}\n      </span>\n\n      {showSource && (\n        <span\n          className={sourceCellStyle}\n          data-log-source\n          title={hasSource ? entry.source : undefined}\n        >\n          {hasSource ? (\n            <Badge variant=\"subtle\" size=\"xs\" className={sourceTagStyle}>\n              {entry.source}\n            </Badge>\n          ) : null}\n        </span>\n      )}\n\n      <span className={messageRecipe({ wrap })}>\n        {renderEntry\n          ? renderEntry({ entry, index, query })\n          : segments.map((segment, i) =>\n              segment.match ? (\n                <mark key={i} className={highlightStyle}>\n                  {segment.text}\n                </mark>\n              ) : (\n                <React.Fragment key={i}>{segment.text}</React.Fragment>\n              )\n            )}\n      </span>\n\n      <span className={copyLineButtonStyle} data-log-copy>\n        <IconButton\n          aria-label={copyLineLabel}\n          size=\"sm\"\n          variant=\"ghost\"\n          onClick={event => {\n            event.stopPropagation();\n            onCopyLine(entry);\n          }}\n        >\n          <CopyIcon size=\"md\" />\n        </IconButton>\n      </span>\n    </div>\n  );\n});\n\n/**\n * The virtualized log body. Reads the entry stream from the store, applies the\n * deferred search + level filter, and renders only the visible window via\n * `@tanstack/react-virtual` (mirroring `DataTable`). Owns follow-tail behavior\n * and the floating jump-to-bottom button.\n */\nexport const LogViewBody = ({\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}: LogViewBodyProps): React.ReactElement => {\n  const ctx = useLogViewContext();\n  const {\n    store,\n    query,\n    caseSensitive,\n    activeLevels,\n    knownLevels,\n    follow,\n    setFollow,\n    getLevelDefinition,\n    wrap,\n    density,\n    showTimestamps,\n    formatTimestamp,\n    showSource,\n    virtualized,\n    virtualizationThreshold,\n    estimatedRowHeight,\n    overscan,\n    selectionMode,\n    selectedIds,\n    setSelectedIds,\n    getCopyEntries,\n    renderEntry,\n    emptyState,\n    onEntryClick,\n    onCopy,\n    bodyId,\n    labels,\n  } = ctx;\n\n  const entries = useLogEntries(store);\n  const deferredQuery = useDeferredValue(query);\n\n  const allLevelsActive = useMemo(() => {\n    for (const level of knownLevels) {\n      if (!activeLevels.has(level)) return false;\n    }\n    return true;\n  }, [knownLevels, activeLevels]);\n\n  const filtered = useMemo<readonly ResolvedLogEntry[]>(() => {\n    if (deferredQuery.trim() === '' && allLevelsActive) return entries;\n    return filterEntries(entries, {\n      query: deferredQuery,\n      caseSensitive,\n      knownLevels,\n      activeLevels,\n    });\n  }, [\n    entries,\n    deferredQuery,\n    caseSensitive,\n    knownLevels,\n    activeLevels,\n    allLevelsActive,\n  ]);\n\n  // A prefix column is only reserved when its field is actually present in the\n  // data. If nothing has a timestamp / source there is no column at all (the\n  // message sits right after the icon, as if columns didn't exist); once at\n  // least one entry uses the field, every row reserves it so they stay aligned.\n  // Keyed off the full entry set (not the filtered view) so filtering can't make\n  // a column appear/disappear and shift the layout.\n  const hasAnyTimestamp = useMemo(\n    () => showTimestamps && entries.some(entry => entry.timestamp != null),\n    [showTimestamps, entries]\n  );\n  const hasAnySource = useMemo(\n    () =>\n      showSource &&\n      entries.some(entry => entry.source != null && entry.source !== ''),\n    [showSource, entries]\n  );\n\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const shouldVirtualize =\n    virtualized === true ||\n    (virtualized === 'auto' && filtered.length > virtualizationThreshold);\n\n  const rowHeightPx = estimatedRowHeight ?? DENSITY_ROW_HEIGHT[density];\n\n  // TanStack Virtual returns functions that can't be memoized; the Compiler\n  // flags it as an incompatible library. Reads are imperative per render.\n  // eslint-disable-next-line react-hooks/incompatible-library\n  const virtualizer = useVirtualizer({\n    count: shouldVirtualize ? filtered.length : 0,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => rowHeightPx,\n    overscan,\n  });\n\n  const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];\n  const totalSize = shouldVirtualize ? virtualizer.getTotalSize() : 0;\n\n  const { scrollToBottom, isDetached, newSinceDetach } = useFollowTail({\n    scrollRef,\n    follow,\n    setFollow,\n    entryCount: filtered.length,\n  });\n\n  // Let the imperative handle's scrollToBottom reach this body.\n  useEffect(\n    () => store.registerScroller(scrollToBottom),\n    [store, scrollToBottom]\n  );\n\n  // Let the imperative handle's scrollToIndex reach this body.\n  const scrollToIndex = useCallback(\n    (index: number) => {\n      if (shouldVirtualize) {\n        virtualizer.scrollToIndex(index, { align: 'auto' });\n        return;\n      }\n      const el = scrollRef.current?.querySelector<HTMLElement>(\n        `[data-index=\"${index}\"]`\n      );\n      el?.scrollIntoView({ block: 'nearest' });\n    },\n    [shouldVirtualize, virtualizer]\n  );\n\n  useEffect(\n    () => store.registerScrollToIndex(scrollToIndex),\n    [store, scrollToIndex]\n  );\n\n  const { copy } = useClipboard();\n  const onCopyRef = useLatest(onCopy);\n\n  const handleCopyLine = useCallback(\n    (entry: ResolvedLogEntry) => {\n      const text = entryToText(entry, { showTimestamps, formatTimestamp });\n      void copy(text);\n      onCopyRef.current?.(text);\n    },\n    [copy, showTimestamps, formatTimestamp, onCopyRef]\n  );\n\n  const selectable = selectionMode !== false;\n  const interactive = selectable || onEntryClick !== undefined;\n\n  const copySelectionOrVisible = useCallback(() => {\n    const entries = getCopyEntries();\n    if (entries.length === 0) return;\n    const text = entriesToText(entries, { showTimestamps, formatTimestamp });\n    void copy(text);\n    onCopyRef.current?.(text);\n  }, [getCopyEntries, showTimestamps, formatTimestamp, copy, onCopyRef]);\n\n  // Scoped to the scroll viewport so a selection elsewhere on the page doesn't\n  // suppress a row click or the copy shortcut.\n  const isTextSelected = useCallback(\n    () => hasTextSelectionWithin(scrollRef.current),\n    []\n  );\n\n  const { handleRowClick, handleRowKeyDown } = useLogSelection({\n    selectionMode,\n    selectedIds,\n    setSelectedIds,\n    filtered,\n    onEntryClick,\n    isTextSelected,\n    onCopyShortcut: copySelectionOrVisible,\n  });\n\n  // Resolve level definitions through a per-render-stable cache: `LogRow` is\n  // memoized, so handing it a fresh definition object each render would defeat\n  // the memo. The cache resets whenever `getLevelDefinition` (i.e. levelConfig)\n  // changes.\n  const resolveLevelDef = useMemo(() => {\n    const cache = new Map<LogLevel, ResolvedLevelDefinition>();\n    return (level: LogLevel): ResolvedLevelDefinition => {\n      const cached = cache.get(level);\n      if (cached !== undefined) return cached;\n      const def = getLevelDefinition(level);\n      cache.set(level, def);\n      return def;\n    };\n  }, [getLevelDefinition]);\n\n  const renderRow = (entry: ResolvedLogEntry, index: number, start: number) => (\n    <LogRow\n      key={entry.id}\n      entry={entry}\n      index={index}\n      query={deferredQuery}\n      caseSensitive={caseSensitive}\n      levelDef={resolveLevelDef(entry.level)}\n      wrap={wrap}\n      showTimestamps={hasAnyTimestamp}\n      formatTimestamp={formatTimestamp}\n      showSource={hasAnySource}\n      interactive={interactive}\n      selectable={selectable}\n      selected={selectedIds.has(entry.id)}\n      renderEntry={renderEntry}\n      onRowClick={handleRowClick}\n      onRowKeyDown={handleRowKeyDown}\n      onCopyLine={handleCopyLine}\n      copyLineLabel={labels.copyLineLabel}\n      virtualized={shouldVirtualize}\n      start={start}\n      measureRef={\n        shouldVirtualize && wrap ? virtualizer.measureElement : undefined\n      }\n    />\n  );\n\n  const isEmpty = filtered.length === 0;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(bodyStyle, bodyDensityRecipe({ density }), className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <div\n        ref={scrollRef}\n        id={bodyId}\n        role=\"log\"\n        aria-live=\"off\"\n        className={scrollViewportStyle}\n      >\n        {isEmpty ? (\n          <div className={emptyStateStyle}>\n            {emptyState ?? labels.emptyLabel}\n          </div>\n        ) : shouldVirtualize ? (\n          <div\n            className={virtualBodyStyle}\n            style={assignInlineVars({ [totalHeightVar]: `${totalSize}px` })}\n          >\n            {virtualItems.map(item => {\n              const entry = filtered[item.index];\n              if (entry === undefined) return null;\n              return renderRow(entry, item.index, item.start);\n            })}\n          </div>\n        ) : (\n          <div className={plainBodyStyle}>\n            {filtered.map((entry, index) => renderRow(entry, index, 0))}\n          </div>\n        )}\n      </div>\n\n      <div\n        data-log-jump\n        className={jumpButtonRecipe({ visible: isDetached || undefined })}\n        aria-hidden={!isDetached}\n      >\n        <Button\n          size=\"sm\"\n          variant=\"default\"\n          icon={<ChevronDownIcon size=\"md\" />}\n          onClick={scrollToBottom}\n          aria-label={labels.jumpToBottomLabel}\n          tabIndex={isDetached ? 0 : -1}\n        >\n          {newSinceDetach > 0 ? (\n            <span className={jumpBadgeStyle}>\n              {labels.newLinesLabel(newSinceDetach)}\n            </span>\n          ) : (\n            labels.jumpToBottomLabel\n          )}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nLogViewBody.displayName = 'LogView.Body';\n"],"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":["'use client';\n\nimport { createContext, useContext, useSyncExternalStore } from 'react';\n\nimport type {\n  LogEntryRenderInfo,\n  LogLevel,\n  LogViewDensity,\n  LogViewLabels,\n  LogViewSelectionMode,\n  LogViewVirtualizationMode,\n  ResolvedLogEntry,\n} from './LogView.types';\nimport type { ResolvedLevelDefinition } from './logViewLevels';\nimport type { LogLevelCounts, LogViewStore } from './LogViewStore';\nimport type React from 'react';\n\n/**\n * Value shared by `<LogView>` and its compound slots.\n *\n * It carries only **low-frequency** state — filter query, visible levels,\n * follow flag, and static config. The high-frequency entry stream is *not*\n * here: the body and level filter read it through {@link useLogEntries} /\n * {@link useLogCounts}, which subscribe to the store directly so a streaming\n * append re-renders only those two slots, not every consumer of the context.\n */\nexport interface LogViewContextValue {\n  store: LogViewStore;\n\n  // Filtering\n  query: string;\n  setQuery: (query: string) => void;\n  caseSensitive: boolean;\n  activeLevels: ReadonlySet<LogLevel>;\n  knownLevels: ReadonlySet<LogLevel>;\n  isLevelActive: (level: LogLevel) => boolean;\n  toggleLevel: (level: LogLevel) => void;\n\n  // Follow / auto-scroll\n  follow: boolean;\n  setFollow: (follow: boolean) => void;\n\n  // Levels\n  levelOrder: LogLevel[];\n  getLevelDefinition: (level: LogLevel) => ResolvedLevelDefinition;\n\n  // Layout / display config\n  wrap: boolean;\n  density: LogViewDensity;\n  showTimestamps: boolean;\n  formatTimestamp: (timestamp: number | Date) => string;\n  showSource: boolean;\n\n  // Virtualization config\n  virtualized: LogViewVirtualizationMode;\n  virtualizationThreshold: number;\n  estimatedRowHeight: number | undefined;\n  overscan: number;\n\n  // Rendering\n  renderEntry: ((info: LogEntryRenderInfo) => React.ReactNode) | undefined;\n  emptyState: React.ReactNode;\n\n  // i18n — resolved UI strings (defaults merged with the `labels` prop)\n  labels: LogViewLabels;\n\n  // Selection\n  selectionMode: LogViewSelectionMode;\n  selectedIds: ReadonlySet<string>;\n  setSelectedIds: (ids: ReadonlySet<string>) => void;\n\n  // Events / actions\n  onEntryClick: ((entry: ResolvedLogEntry, index: number) => void) | undefined;\n  onCopy: ((text: string) => void) | undefined;\n  clearLog: () => void;\n\n  // Ids\n  bodyId: string;\n\n  /** Compute the currently-visible (filtered) entries on demand (used by Copy). */\n  getVisibleEntries: () => ResolvedLogEntry[];\n  /** Entries to copy: the current selection if non-empty, else all visible. */\n  getCopyEntries: () => ResolvedLogEntry[];\n}\n\nexport const LogViewContext =\n  /*#__PURE__*/ createContext<LogViewContextValue | null>(null);\n\n/** Read the LogView context. Throws when used outside `<LogView>`. */\nexport function useLogViewContext(): LogViewContextValue {\n  const ctx = useContext(LogViewContext);\n  if (ctx === null) {\n    throw new Error(\n      'LogView compound components must be rendered inside <LogView>.'\n    );\n  }\n  return ctx;\n}\n\n/** Subscribe to the store's entry stream. Re-renders on each (rAF-batched) commit. */\nexport function useLogEntries(\n  store: LogViewStore\n): readonly ResolvedLogEntry[] {\n  return useSyncExternalStore(\n    store.subscribeEntries,\n    store.getEntries,\n    store.getEntries\n  );\n}\n\n/** Subscribe to the store's per-level counts. */\nexport function useLogCounts(store: LogViewStore): LogLevelCounts {\n  return useSyncExternalStore(\n    store.subscribeCounts,\n    store.getCounts,\n    store.getCounts\n  );\n}\n\n/** Live stats for the current LogView. Call inside `<LogView>` (e.g. in a footer). */\nexport function useLogViewStats(): { total: number; counts: LogLevelCounts } {\n  const { store } = useLogViewContext();\n  const entries = useLogEntries(store);\n  const counts = useLogCounts(store);\n  return { total: entries.length, counts };\n}\n"],"names":[],"mappings":";;;;AAsFE;AAEF;;AAEE;AACA;AACE;;AAIF;AACF;AAEA;AACM;AAGJ;AAKF;AAEA;AACM;AACJ;AAKF;AAEA;;AAEE;AACA;AACA;;AAEF;;"}