@zendir/ui 0.1.0

package/dist/react/core/LogViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewer.js","sources":["../../../src/react/core/LogViewer.tsx"],"sourcesContent":["/**\n * @zendir/ui - LogViewer Component\n * \n * Real-time log/event viewer for mission operations and system monitoring.\n * Supports severity filtering, search, auto-scroll, pause/resume,\n * and timestamped entries with color-coded severity levels.\n * \n * Features:\n * - Severity levels: debug, info, warn, error, critical\n * - Color-coded entries with Astro status colors\n * - Real-time auto-scroll with pause/resume\n * - Search/filter by text\n * - Severity filter checkboxes\n * - Timestamp display\n * - Source/component tags\n * - Export log to clipboard or file\n * - Maximum log retention (auto-prune old entries)\n * - Virtualized rendering for large logs\n * \n * @example\n * ```tsx\n * <LogViewer\n *   entries={logEntries}\n *   maxEntries={5000}\n *   showTimestamp\n *   showSource\n * />\n * ```\n */\n\nimport React, { useState, useRef, useCallback, useEffect, useMemo, memo } from 'react';\nimport { useTheme } from '../theme';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type LogSeverity = 'debug' | 'info' | 'warn' | 'error' | 'critical';\n\nexport interface LogEntry {\n  /** Unique ID */\n  id: string | number;\n  /** Timestamp (ISO string or Date) */\n  timestamp: string | Date;\n  /** Severity level */\n  severity: LogSeverity;\n  /** Log message */\n  message: string;\n  /** Source component/system */\n  source?: string;\n  /** Additional metadata */\n  metadata?: Record<string, unknown>;\n}\n\nconst DEFAULT_ESTIMATED_ROW_HEIGHT = 28;\nconst DEFAULT_OVERSCAN_COUNT = 12;\n\nexport interface LogViewerProps {\n  /** Array of log entries */\n  entries: LogEntry[];\n  /** Maximum entries to keep in memory (default: 5000). Older entries are pruned. */\n  maxEntries?: number;\n  /** Height of the viewer (default: 400) */\n  height?: number | string;\n  /** Title */\n  title?: string;\n  /** Show timestamps (default: true) */\n  showTimestamp?: boolean;\n  /** Show source column (default: true) */\n  showSource?: boolean;\n  /** Show severity filter toolbar (default: true) */\n  showFilters?: boolean;\n  /** Show search bar (default: true) */\n  showSearch?: boolean;\n  /** Initial severity filters (all enabled by default) */\n  defaultSeverities?: LogSeverity[];\n  /** Timestamp format: 'time', 'datetime', 'relative' (default: 'time') */\n  timestampFormat?: 'time' | 'datetime' | 'relative';\n  /** Called when an entry is clicked */\n  onEntryClick?: (entry: LogEntry) => void;\n  /** CSS class */\n  className?: string;\n  /** Show outer container border (default: true). Set false when embedded inside a Container/card. */\n  bordered?: boolean;\n  /** Custom style overrides for the outer container */\n  style?: React.CSSProperties;\n  /** Estimated row height in px for virtualization (default: 28). Enables smooth scroll through large logs. */\n  estimatedRowHeight?: number;\n  /** Number of rows to render above/below viewport for virtualization (default: 12). */\n  overscanCount?: number;\n  /**\n   * Enable pagination: show entries in pages with Previous/Next.\n   * Page 1 = newest entries. Use with large maxEntries so users can navigate to older pages.\n   * When set, scrolling is replaced by page navigation (better for very large logs).\n   */\n  pagination?: boolean | { pageSize?: number };\n}\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\nconst SEVERITY_ORDER: LogSeverity[] = ['debug', 'info', 'warn', 'error', 'critical'];\n\nfunction formatTimestamp(ts: string | Date, format: 'time' | 'datetime' | 'relative'): string {\n  const d = typeof ts === 'string' ? new Date(ts) : ts;\n  if (isNaN(d.getTime())) return String(ts);\n  \n  if (format === 'time') {\n    return d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })\n      + '.' + d.getMilliseconds().toString().padStart(3, '0');\n  }\n  if (format === 'datetime') {\n    return d.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }) + ' '\n      + d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });\n  }\n  // relative\n  const diff = Date.now() - d.getTime();\n  if (diff < 1000) return 'just now';\n  if (diff < 60000) return `${Math.floor(diff / 1000)}s ago`;\n  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n  return `${Math.floor(diff / 3600000)}h ago`;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport const LogViewer = memo(function LogViewer({\n  entries,\n  maxEntries = 5000,\n  height = 400,\n  title,\n  showTimestamp = true,\n  showSource = true,\n  showFilters = true,\n  showSearch = true,\n  defaultSeverities,\n  timestampFormat = 'time',\n  onEntryClick,\n  className = '',\n  bordered = true,\n  style: styleProp,\n  estimatedRowHeight = DEFAULT_ESTIMATED_ROW_HEIGHT,\n  overscanCount = DEFAULT_OVERSCAN_COUNT,\n  pagination,\n}: LogViewerProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [paused, setPaused] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [severityFilter, setSeverityFilter] = useState<Set<LogSeverity>>(\n    new Set(defaultSeverities ?? SEVERITY_ORDER)\n  );\n  const [autoScroll, setAutoScroll] = useState(true);\n  const prevLengthRef = useRef(entries.length);\n  /** Scroll position and container height for virtualization */\n  const [scrollState, setScrollState] = useState({ scrollTop: 0, containerHeight: 300 });\n  const rafRef = useRef<number | null>(null);\n\n  const severityColors: Record<LogSeverity, string> = {\n    debug: tokens.colors.text.muted ?? tokens.colors.text.secondary,\n    info: tokens.colors.status.standby,\n    warn: tokens.colors.status.caution,\n    error: tokens.colors.status.serious,\n    critical: tokens.colors.status.critical,\n  };\n\n  /**\n   * Astro UX status shapes mapped to log severity levels:\n   *   debug → off (small dot ·), info → standby (ring ◯),\n   *   warn → caution (square ■), error → serious (diamond ◆),\n   *   critical → critical (triangle down ▼)\n   */\n  const severityShapes: Record<LogSeverity, string> = {\n    debug: '·',\n    info: '○',\n    warn: '■',\n    error: '◆',\n    critical: '▼',\n  };\n\n  const severityLabels: Record<LogSeverity, string> = {\n    debug: 'DBG',\n    info: 'INF',\n    warn: 'WRN',\n    error: 'ERR',\n    critical: 'CRT',\n  };\n\n  // Filter & limit entries: keep NEWEST maxEntries (entries[0] = newest)\n  const filteredEntries = useMemo(() => {\n    let filtered = entries.filter(e => severityFilter.has(e.severity));\n    if (searchQuery.trim()) {\n      const q = searchQuery.toLowerCase();\n      filtered = filtered.filter(e =>\n        e.message.toLowerCase().includes(q) ||\n        (e.source && e.source.toLowerCase().includes(q))\n      );\n    }\n    return filtered.slice(0, maxEntries);\n  }, [entries, severityFilter, searchQuery, maxEntries]);\n\n  const paginationConfig = pagination === true ? { pageSize: 200 } : (pagination || undefined);\n  const pageSize = paginationConfig?.pageSize ?? 200;\n  const totalPages = Math.max(1, Math.ceil(filteredEntries.length / pageSize));\n  const [currentPage, setCurrentPage] = useState(1);\n\n  // Clamp current page when totalPages shrinks (e.g. after filter change)\n  useEffect(() => {\n    setCurrentPage(p => Math.min(p, totalPages));\n  }, [totalPages]);\n\n  const paginationEntries = useMemo(() => {\n    if (!paginationConfig) return null;\n    const start = (currentPage - 1) * pageSize;\n    return filteredEntries.slice(start, start + pageSize);\n  }, [paginationConfig, currentPage, pageSize, filteredEntries]);\n\n  const totalHeight = filteredEntries.length * estimatedRowHeight;\n  const { scrollTop, containerHeight } = scrollState;\n  const visibleRange = useMemo(() => {\n    const start = Math.max(0, Math.floor(scrollTop / estimatedRowHeight) - overscanCount);\n    const end = Math.min(\n      filteredEntries.length,\n      Math.ceil((scrollTop + containerHeight) / estimatedRowHeight) + overscanCount\n    );\n    return { start, end };\n  }, [scrollTop, containerHeight, estimatedRowHeight, overscanCount, filteredEntries.length]);\n  const visibleEntries = useMemo(\n    () => filteredEntries.slice(visibleRange.start, visibleRange.end),\n    [filteredEntries, visibleRange.start, visibleRange.end],\n  );\n\n  const usePagination = !!paginationConfig;\n\n  const renderRow = useCallback((entry: LogEntry) => (\n    <div\n      key={entry.id}\n      role={onEntryClick ? 'button' : 'listitem'}\n      tabIndex={onEntryClick ? 0 : undefined}\n      aria-label={onEntryClick ? `${severityLabels[entry.severity]}: ${entry.message}` : undefined}\n      onClick={() => onEntryClick?.(entry)}\n      onKeyDown={onEntryClick ? (e) => (e.key === 'Enter' || e.key === ' ') && (e.preventDefault(), onEntryClick(entry)) : undefined}\n      style={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        minHeight: estimatedRowHeight,\n        boxSizing: 'border-box',\n        padding: '3px 12px',\n        borderBottom: `1px solid ${tokens.colors.border.muted}11`,\n        cursor: onEntryClick ? 'pointer' : 'default',\n        transition: 'background 150ms ease',\n      }}\n      onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.background = `${tokens.colors.background.surface}`; }}\n      onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.background = 'transparent'; }}\n    >\n      <span style={{\n        color: severityColors[entry.severity],\n        fontWeight: 700,\n        fontSize: tokens.typography.fontSize.xxs,\n        minWidth: 38,\n        textAlign: 'center',\n        background: `${severityColors[entry.severity]}18`,\n        borderRadius: tokens.borderRadius.sm,\n        padding: '1px 4px',\n        marginRight: 8,\n        marginTop: 1,\n        letterSpacing: '0.3px',\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 3,\n      }}>\n        <span style={{ fontSize: '8px', lineHeight: 1 }}>{severityShapes[entry.severity]}</span>\n        {severityLabels[entry.severity]}\n      </span>\n      {showTimestamp && (\n        <span style={{\n          color: tokens.colors.text.muted,\n          marginRight: 8,\n          minWidth: 85,\n          fontSize: 11,\n          flexShrink: 0,\n        }}>\n          {formatTimestamp(entry.timestamp, timestampFormat)}\n        </span>\n      )}\n      {showSource && entry.source && (\n        <span style={{\n          color: tokens.colors.interactive.default,\n          marginRight: 8,\n          fontSize: 11,\n          minWidth: 70,\n          maxWidth: 100,\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n          flexShrink: 0,\n        }}>\n          [{entry.source}]\n        </span>\n      )}\n      <span style={{\n        color: entry.severity === 'error' || entry.severity === 'critical'\n          ? severityColors[entry.severity]\n          : tokens.colors.text.primary,\n        flex: 1,\n        wordBreak: 'break-word',\n        lineHeight: 1.4,\n      }}>\n        {entry.message}\n      </span>\n    </div>\n  ), [severityColors, severityShapes, severityLabels, estimatedRowHeight, tokens, showTimestamp, showSource, timestampFormat, onEntryClick]);\n\n  // Measure scroll container height\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const ro = new ResizeObserver(() => {\n      setScrollState(s => ({ ...s, containerHeight: el.clientHeight }));\n    });\n    ro.observe(el);\n    setScrollState(s => ({ ...s, containerHeight: el.clientHeight }));\n    return () => ro.disconnect();\n  }, []);\n\n  const handleScroll = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollTop: st, scrollHeight, clientHeight } = el;\n    const atBottom = scrollHeight - st - clientHeight < 30;\n    setAutoScroll(atBottom);\n    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n      setScrollState(prev => ({ ...prev, scrollTop: el.scrollTop }));\n    });\n  }, []);\n\n  // Auto-scroll to bottom when new entries arrive and user is at bottom (scroll mode).\n  // In pagination mode: page 1 always shows newest entries (entries are prepended) so\n  // content updates automatically — no forced jump needed. The user decides when to\n  // follow new entries by clicking \"First\" (which sets autoScroll=true).\n  useEffect(() => {\n    if (entries.length <= prevLengthRef.current) {\n      prevLengthRef.current = entries.length;\n      return;\n    }\n    if (!usePagination && !paused && autoScroll && scrollRef.current) {\n      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;\n    }\n    prevLengthRef.current = entries.length;\n  }, [entries.length, paused, autoScroll, usePagination]);\n\n  useEffect(() => () => {\n    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);\n  }, []);\n\n  const toggleSeverity = useCallback((sev: LogSeverity) => {\n    setSeverityFilter(prev => {\n      const next = new Set(prev);\n      if (next.has(sev)) next.delete(sev);\n      else next.add(sev);\n      return next;\n    });\n  }, []);\n\n  const exportLog = useCallback(() => {\n    const text = filteredEntries.map(e => {\n      const ts = formatTimestamp(e.timestamp, 'datetime');\n      const src = e.source ? `[${e.source}]` : '';\n      return `${ts} [${e.severity.toUpperCase()}] ${src} ${e.message}`;\n    }).join('\\n');\n    navigator.clipboard?.writeText(text);\n  }, [filteredEntries]);\n\n  const clearFilters = useCallback(() => {\n    setSeverityFilter(new Set(SEVERITY_ORDER));\n    setSearchQuery('');\n  }, []);\n\n  // Counts by severity\n  const counts = useMemo(() => {\n    const c: Record<LogSeverity, number> = { debug: 0, info: 0, warn: 0, error: 0, critical: 0 };\n    entries.forEach(e => { c[e.severity]++; });\n    return c;\n  }, [entries]);\n\n  return (\n    <div\n      className={`log-viewer ${className}`}\n      style={{\n        height: typeof height === 'number' ? `${height}px` : height,\n        minHeight: typeof height === 'number' ? `${height}px` : height,\n        background: tokens.colors.background.base,\n        ...(bordered ? (tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }) : { border: 'none' }),\n        borderRadius: tokens.borderRadius.lg,\n        overflow: 'hidden',\n        display: 'flex',\n        flexDirection: 'column',\n        fontFamily: tokens.typography.fontFamily.mono,\n        ...styleProp,\n        fontSize: tokens.typography.fontSize.xs,\n        color: tokens.colors.text.primary,\n        backdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n      }}\n    >\n      {/* Header */}\n      {title && (\n        <div style={{\n          padding: '8px 12px',\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          background: tokens.colors.background.surface,\n          fontFamily: tokens.typography.fontFamily.primary,\n          backdropFilter: 'blur(8px)',\n        }}>\n          <span style={{ fontWeight: 600, fontSize: 13 }}>{title}</span>\n          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n            <span style={{ fontSize: 11, color: tokens.colors.text.muted }}>\n              {filteredEntries.length.toLocaleString()} entries\n            </span>\n          </div>\n        </div>\n      )}\n\n      {/* Toolbar */}\n      {(showFilters || showSearch) && (\n        <div style={{\n          padding: '6px 12px',\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n          display: 'flex',\n          alignItems: 'center',\n          gap: 8,\n          flexWrap: 'wrap',\n          background: tokens.colors.background.surface,\n          fontFamily: tokens.typography.fontFamily.primary,\n        }}>\n          {showFilters && SEVERITY_ORDER.map(sev => (\n            <button\n              key={sev}\n              onClick={() => toggleSeverity(sev)}\n              aria-pressed={severityFilter.has(sev)}\n              aria-label={`Filter ${sev} logs (${counts[sev]})`}\n              style={{\n                background: severityFilter.has(sev) ? `${severityColors[sev]}22` : 'transparent',\n                color: severityFilter.has(sev) ? severityColors[sev] : tokens.colors.text.muted,\n                border: `1px solid ${severityFilter.has(sev) ? severityColors[sev] + '66' : tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md,\n                padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n                fontSize: tokens.typography.fontSize.xxs,\n                fontWeight: tokens.typography.fontWeight.medium,\n                cursor: 'pointer',\n                textTransform: 'uppercase',\n                letterSpacing: '0.5px',\n                transition: 'all 150ms ease',\n              }}\n            >\n              <span aria-hidden=\"true\">{severityShapes[sev]}</span> {sev} ({counts[sev]})\n            </button>\n          ))}\n          <div style={{ flex: 1 }} />\n          {showSearch && (\n            <input\n              type=\"text\"\n              value={searchQuery}\n              onChange={e => setSearchQuery(e.target.value)}\n              placeholder=\"Filter messages...\"\n              aria-label=\"Filter log messages\"\n              style={{\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md,\n                padding: `3px ${tokens.spacing.sm}`,\n                fontSize: tokens.typography.fontSize.sm,\n                outline: 'none',\n                minWidth: 150,\n              }}\n            />\n          )}\n          <button\n            onClick={() => setPaused(p => !p)}\n            aria-label={paused ? 'Resume log stream' : 'Pause log stream'}\n            style={{\n              background: paused ? `${tokens.colors.status.caution}22` : tokens.colors.background.base,\n              color: paused ? tokens.colors.status.caution : tokens.colors.text.secondary,\n              border: `1px solid ${tokens.colors.border.muted}`,\n              borderRadius: tokens.borderRadius.md, padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n              fontSize: tokens.typography.fontSize.xxs, cursor: 'pointer',\n              fontWeight: tokens.typography.fontWeight.medium,\n              transition: 'all 150ms ease',\n            }}\n          >\n            {paused ? '\\u25B6 Resume' : '\\u23F8 Pause'}\n          </button>\n          <button onClick={exportLog} aria-label=\"Copy log to clipboard\" style={{\n            background: tokens.colors.background.base,\n            color: tokens.colors.text.secondary,\n            border: `1px solid ${tokens.colors.border.muted}`,\n            borderRadius: tokens.borderRadius.md, padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n            fontSize: tokens.typography.fontSize.xxs, cursor: 'pointer',\n            transition: 'all 150ms ease',\n          }}>\n            Copy\n          </button>\n          <button onClick={clearFilters} aria-label=\"Reset all filters\" style={{\n            background: tokens.colors.background.base,\n            color: tokens.colors.text.secondary,\n            border: `1px solid ${tokens.colors.border.muted}`,\n            borderRadius: tokens.borderRadius.md, padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n            fontSize: tokens.typography.fontSize.xxs, cursor: 'pointer',\n            transition: 'all 150ms ease',\n          }}>\n            Reset\n          </button>\n        </div>\n      )}\n\n      {/* Log entries — minHeight: 0 so flex child can shrink and scroll */}\n      <div\n        ref={scrollRef}\n        onScroll={handleScroll}\n        className=\"zendir-log-scroll\"\n        style={{\n          flex: 1,\n          minHeight: 0,\n          overflowY: 'auto',\n          overflowX: 'hidden',\n          padding: '2px 0',\n          overscrollBehavior: 'contain',\n          WebkitOverflowScrolling: 'touch',\n        }}\n      >\n        {filteredEntries.length === 0 ? (\n          <div style={{\n            display: 'flex', alignItems: 'center', justifyContent: 'center',\n            height: '100%', color: tokens.colors.text.muted, fontSize: 13,\n            fontFamily: tokens.typography.fontFamily.primary,\n          }}>\n            {entries.length === 0 ? 'No log entries' : 'No matching entries'}\n          </div>\n        ) : usePagination ? (\n          <div style={{ padding: '2px 0' }} role=\"list\" aria-label=\"Log entries\">\n            {(paginationEntries ?? []).map(entry => renderRow(entry))}\n          </div>\n        ) : (\n          <div\n            style={{\n              height: totalHeight,\n              position: 'relative',\n              width: '100%',\n            }}\n            role=\"list\"\n            aria-label=\"Log entries\"\n          >\n            {visibleRange.start > 0 && (\n              <div\n                style={{ height: visibleRange.start * estimatedRowHeight, width: '100%' }}\n                aria-hidden\n              />\n            )}\n            {visibleEntries.map(entry => renderRow(entry))}\n            {visibleRange.end < filteredEntries.length && (\n              <div\n                style={{\n                  height: (filteredEntries.length - visibleRange.end) * estimatedRowHeight,\n                  width: '100%',\n                }}\n                aria-hidden\n              />\n            )}\n          </div>\n        )}\n      </div>\n\n      {/* Pagination footer */}\n      {usePagination && filteredEntries.length > 0 && (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            flexWrap: 'wrap',\n            gap: tokens.spacing.sm,\n            padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n            borderTop: `1px solid ${tokens.colors.border.muted}`,\n            background: tokens.colors.background.surface,\n            fontFamily: tokens.typography.fontFamily.primary,\n            fontSize: tokens.typography.fontSize.xs,\n            color: tokens.colors.text.secondary,\n          }}\n        >\n          <span aria-live=\"polite\">\n            Page {currentPage} of {totalPages}\n            {filteredEntries.length > 0 && (\n              <span style={{ marginLeft: tokens.spacing.sm }}>\n                ({((currentPage - 1) * pageSize + 1).toLocaleString()}–{Math.min(currentPage * pageSize, filteredEntries.length).toLocaleString()} of {filteredEntries.length.toLocaleString()})\n              </span>\n            )}\n          </span>\n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs }}>\n            <button\n              type=\"button\"\n              onClick={() => { setCurrentPage(1); setAutoScroll(true); }}\n              disabled={currentPage <= 1}\n              aria-label=\"First page (newest)\"\n              style={{\n                padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md,\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                fontSize: tokens.typography.fontSize.xxs,\n                cursor: currentPage <= 1 ? 'not-allowed' : 'pointer',\n                opacity: currentPage <= 1 ? 0.5 : 1,\n              }}\n            >\n              First\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => { setCurrentPage(p => Math.max(1, p - 1)); setAutoScroll(false); }}\n              disabled={currentPage <= 1}\n              aria-label=\"Previous page\"\n              style={{\n                padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md,\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                fontSize: tokens.typography.fontSize.xxs,\n                cursor: currentPage <= 1 ? 'not-allowed' : 'pointer',\n                opacity: currentPage <= 1 ? 0.5 : 1,\n              }}\n            >\n              Previous\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => { setCurrentPage(p => Math.min(totalPages, p + 1)); setAutoScroll(false); }}\n              disabled={currentPage >= totalPages}\n              aria-label=\"Next page\"\n              style={{\n                padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md,\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                fontSize: tokens.typography.fontSize.xxs,\n                cursor: currentPage >= totalPages ? 'not-allowed' : 'pointer',\n                opacity: currentPage >= totalPages ? 0.5 : 1,\n              }}\n            >\n              Next\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => { setCurrentPage(totalPages); setAutoScroll(false); }}\n              disabled={currentPage >= totalPages}\n              aria-label=\"Last page (oldest)\"\n              style={{\n                padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md,\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                fontSize: tokens.typography.fontSize.xxs,\n                cursor: currentPage >= totalPages ? 'not-allowed' : 'pointer',\n                opacity: currentPage >= totalPages ? 0.5 : 1,\n              }}\n            >\n              Last\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Status bar */}\n      <style>{`\n        .zendir-log-scroll::-webkit-scrollbar { width: 6px; }\n        .zendir-log-scroll::-webkit-scrollbar-track { background: transparent; }\n        .zendir-log-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }\n        .zendir-log-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }\n        .zendir-log-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }\n      `}</style>\n\n      {paused && (\n        <div role=\"status\" style={{\n          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n          background: `${tokens.colors.status.caution}15`,\n          color: tokens.colors.status.caution,\n          fontSize: tokens.typography.fontSize.sm,\n          textAlign: 'center',\n          fontFamily: tokens.typography.fontFamily.primary,\n          fontWeight: tokens.typography.fontWeight.medium,\n        }}>\n          Log paused — new entries are buffered\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default LogViewer;\n"],"names":["LogViewer"],"mappings":"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"}

package/dist/react/core/MessageStream.d.ts

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+import { StatusLevel } from '../utils';
+import { AstroIconName } from './AstroIcon';
+
+export interface StreamMessage {
+    /** Unique identifier */
+    id: string;
+    /** Message text/label */
+    text: string;
+    /** Status level for color and shape */
+    status?: StatusLevel;
+    /** Optional timestamp */
+    timestamp?: Date | string;
+    /** Optional icon override */
+    icon?: AstroIconName;
+    /** Optional metadata/details */
+    details?: string;
+    /** Child messages (for hierarchical display) */
+    children?: StreamMessage[];
+    /** Whether this message is highlighted/active */
+    active?: boolean;
+}
+export interface MessageStreamProps {
+    /** Stream title */
+    title?: string;
+    /** Subtitle or description */
+    subtitle?: string;
+    /** Array of messages to display */
+    messages: StreamMessage[];
+    /** Maximum height before scrolling */
+    maxHeight?: number | string;
+    /** Show timestamps */
+    showTimestamps?: boolean;
+    /** Time format for timestamps */
+    timeFormat?: 'relative' | 'absolute' | 'time-only';
+    /** Variant: 'list' for vertical, 'tree' for hierarchical */
+    variant?: 'list' | 'tree' | 'compact';
+    /** Custom className */
+    className?: string;
+    /** Card size */
+    size?: 'sm' | 'md' | 'lg';
+    /** On message click */
+    onMessageClick?: (message: StreamMessage) => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Show connection lines (tree variant) */
+    showConnectors?: boolean;
+    /** Enable collapsible compact mode - shows condensed view that expands on hover/click */
+    collapsible?: boolean;
+    /** Start expanded when in collapsible mode (pinned state) */
+    defaultExpanded?: boolean;
+    /** Callback when pin state changes in collapsible mode */
+    onPinChange?: (isPinned: boolean) => void;
+}
+export declare const MessageStream: React.NamedExoticComponent<MessageStreamProps>;
+export default MessageStream;

package/dist/react/core/MessageStream.js

@@ -0,0 +1,455 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { classNames } from "../utils/index.js";
+import { Icon } from "./Icon.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { useCompactMode } from "../hooks/useCompactMode.js";
+const STATUS_SHAPES = {
+  off: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
+  standby: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: "none", stroke: color, strokeWidth: "2" }) }),
+  normal: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
+  caution: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: color }) }),
+  serious: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: color }) }),
+  critical: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: color }) })
+};
+function getStatusColor(status, tokens) {
+  switch (status) {
+    case "normal":
+      return tokens.colors.status.normal;
+    case "standby":
+      return tokens.colors.status.standby;
+    case "caution":
+      return tokens.colors.status.caution;
+    case "serious":
+      return tokens.colors.status.serious;
+    case "critical":
+      return tokens.colors.status.critical;
+    case "off":
+      return tokens.colors.status.off;
+    default:
+      return tokens.colors.status.standby;
+  }
+}
+function formatTimestamp(timestamp, format) {
+  if (!timestamp) return "";
+  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  if (format === "relative") {
+    const now = /* @__PURE__ */ new Date();
+    const diff = now.getTime() - date.getTime();
+    const seconds = Math.floor(diff / 1e3);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    if (seconds < 60) return "Just now";
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    return date.toLocaleDateString();
+  }
+  if (format === "time-only") {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  }
+  return date.toLocaleString();
+}
+const MessageCard = memo(function MessageCard2({
+  message,
+  tokens,
+  size,
+  showTimestamp,
+  timeFormat,
+  onClick,
+  variant
+}) {
+  const status = message.status || "standby";
+  const statusColor = getStatusColor(status, tokens);
+  const sizeConfig = {
+    sm: { padding: 8, fontSize: "0.75rem", fontSizeSmall: "0.625rem", iconSize: 10, gap: 6 },
+    // 12px / 10px in rem
+    md: { padding: 12, fontSize: "0.875rem", fontSizeSmall: "0.75rem", iconSize: 12, gap: 8 },
+    // 14px / 12px in rem
+    lg: { padding: 16, fontSize: "1rem", fontSizeSmall: "0.875rem", iconSize: 14, gap: 10 }
+    // 16px / 14px in rem
+  }[size];
+  const isCompact = variant === "compact";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listitem",
+      "aria-label": `${message.text} - ${status}`,
+      onClick: () => onClick == null ? void 0 : onClick(message),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: sizeConfig.gap,
+        padding: isCompact ? `${sizeConfig.padding / 2}px ${sizeConfig.padding}px` : sizeConfig.padding,
+        backgroundColor: tokens.colors.background.elevated,
+        border: `1.5px solid ${statusColor}`,
+        borderRadius: tokens.borderRadius.md,
+        cursor: onClick ? "pointer" : "default",
+        transition: "all 0.15s ease",
+        ...message.active && {
+          boxShadow: `0 0 0 2px ${statusColor}40`
+        }
+      },
+      onMouseEnter: (e) => {
+        if (onClick) {
+          e.currentTarget.style.backgroundColor = tokens.colors.background.surface;
+          e.currentTarget.style.transform = "translateY(-1px)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (onClick) {
+          e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
+          e.currentTarget.style.transform = "translateY(0)";
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { flexShrink: 0, display: "flex", alignItems: "center" }, children: STATUS_SHAPES[status](sizeConfig.iconSize, statusColor) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              flex: 1,
+              fontSize: sizeConfig.fontSize,
+              fontWeight: 500,
+              color: tokens.colors.text.primary,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: message.text
+          }
+        ),
+        message.details && !isCompact && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: sizeConfig.fontSizeSmall,
+              color: tokens.colors.text.tertiary
+            },
+            children: message.details
+          }
+        ),
+        showTimestamp && message.timestamp && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: sizeConfig.fontSizeSmall,
+              color: tokens.colors.text.tertiary,
+              fontFamily: tokens.typography.fontFamily.mono,
+              whiteSpace: "nowrap"
+            },
+            children: formatTimestamp(message.timestamp, timeFormat)
+          }
+        )
+      ]
+    }
+  );
+});
+const TreeNode = memo(function TreeNode2({
+  message,
+  tokens,
+  size,
+  showTimestamp,
+  timeFormat,
+  onClick,
+  depth,
+  showConnectors,
+  isLast
+}) {
+  const hasChildren = message.children && message.children.length > 0;
+  const indentSize = 32;
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    showConnectors && depth > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: (depth - 1) * indentSize + 16,
+            top: 0,
+            width: 2,
+            height: isLast ? "50%" : "100%",
+            backgroundColor: tokens.colors.border.muted
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: (depth - 1) * indentSize + 16,
+            top: "50%",
+            width: indentSize - 8,
+            height: 2,
+            backgroundColor: tokens.colors.border.muted
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { marginLeft: depth * indentSize }, children: /* @__PURE__ */ jsx(
+      MessageCard,
+      {
+        message,
+        tokens,
+        size,
+        showTimestamp,
+        timeFormat,
+        onClick,
+        variant: "tree"
+      }
+    ) }),
+    hasChildren && /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: message.children.map((child, index) => /* @__PURE__ */ jsx("div", { style: { marginTop: index > 0 ? 8 : 0 }, children: /* @__PURE__ */ jsx(
+      TreeNode2,
+      {
+        message: child,
+        tokens,
+        size,
+        showTimestamp,
+        timeFormat,
+        onClick,
+        depth: depth + 1,
+        showConnectors,
+        isLast: index === message.children.length - 1
+      }
+    ) }, child.id)) })
+  ] });
+});
+const MessageStream = memo(function MessageStream2({
+  title,
+  subtitle,
+  messages,
+  maxHeight,
+  showTimestamps = false,
+  timeFormat = "relative",
+  variant = "list",
+  className = "",
+  size = "md",
+  onMessageClick,
+  loading = false,
+  emptyMessage = "No messages",
+  showConnectors = true,
+  collapsible = false,
+  defaultExpanded = false,
+  onPinChange
+}) {
+  const { tokens, theme, prefersReducedMotion } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({
+    compact: collapsible,
+    defaultExpanded,
+    onPinChange
+  });
+  const containerStyle = useMemo(() => ({
+    backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+    ...isTransparentTheme && {
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)"
+    },
+    ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+    borderRadius: tokens.borderRadius.lg,
+    padding: tokens.spacing.md,
+    display: "flex",
+    flexDirection: "column"
+  }), [tokens, isTransparentTheme]);
+  const statusCounts = useMemo(() => {
+    const counts = { normal: 0, caution: 0, critical: 0, other: 0 };
+    messages.forEach((m) => {
+      if (m.status === "normal") counts.normal++;
+      else if (m.status === "caution") counts.caution++;
+      else if (m.status === "critical" || m.status === "serious") counts.critical++;
+      else counts.other++;
+    });
+    return counts;
+  }, [messages]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: classNames("zendir-message-stream", className),
+        style: containerStyle,
+        "aria-busy": "true",
+        "aria-label": "Loading messages",
+        children: [
+          title && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsx("div", { style: {
+              height: 18,
+              width: 120,
+              backgroundColor: tokens.colors.background.elevated,
+              borderRadius: 4,
+              marginBottom: 8
+            } }),
+            subtitle && /* @__PURE__ */ jsx("div", { style: {
+              height: 14,
+              width: 200,
+              backgroundColor: tokens.colors.background.elevated,
+              borderRadius: 4
+            } })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: 44,
+                backgroundColor: tokens.colors.background.elevated,
+                borderRadius: tokens.borderRadius.md,
+                border: `2px solid ${tokens.colors.border.muted}`
+              }
+            },
+            i
+          )) })
+        ]
+      }
+    );
+  }
+  if (collapsible && !expanded) {
+    return /* @__PURE__ */ jsx(
+      "article",
+      {
+        className: classNames("zendir-message-stream", "collapsed", className),
+        ...handlers,
+        style: {
+          ...containerStyle,
+          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+          cursor: "pointer",
+          transition: `all ${transitionDuration} ease-out`
+        },
+        onMouseEnter: (e) => {
+          handlers.onMouseEnter();
+          if (!prefersReducedMotion) {
+            e.currentTarget.style.transform = "scale(1.01)";
+            e.currentTarget.style.boxShadow = `0 4px 12px ${tokens.colors.accent.primary}20`;
+          }
+        },
+        onMouseLeave: (e) => {
+          handlers.onMouseLeave();
+          e.currentTarget.style.transform = "scale(1)";
+          e.currentTarget.style.boxShadow = "";
+        },
+        "aria-label": `${title || "Messages"} (collapsed)`,
+        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: tokens.spacing.md }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "message", size: 14, color: tokens.colors.accent.primary }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: tokens.typography.fontWeight.medium }, children: title ? title.split(" ")[0] : "Messages" }),
+            /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.text.tertiary, fontSize: tokens.typography.fontSize.xs }, children: [
+              "(",
+              messages.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
+            statusCounts.critical > 0 && /* @__PURE__ */ jsxs("span", { style: {
+              color: tokens.colors.status.critical,
+              fontSize: tokens.typography.fontSize.xs,
+              fontWeight: tokens.typography.fontWeight.medium
+            }, children: [
+              statusCounts.critical,
+              " critical"
+            ] }),
+            statusCounts.caution > 0 && /* @__PURE__ */ jsxs("span", { style: {
+              color: tokens.colors.status.caution,
+              fontSize: tokens.typography.fontSize.xs,
+              fontWeight: tokens.typography.fontWeight.medium
+            }, children: [
+              statusCounts.caution,
+              " warn"
+            ] }),
+            isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12, color: tokens.colors.accent.primary })
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-message-stream", collapsible ? "expanded" : "", className),
+      ...collapsible ? handlers : {},
+      role: collapsible ? handlers.role : "log",
+      tabIndex: collapsible ? handlers.tabIndex : void 0,
+      "aria-expanded": collapsible ? handlers["aria-expanded"] : void 0,
+      style: {
+        ...containerStyle,
+        cursor: collapsible ? "pointer" : void 0,
+        transition: collapsible ? `all ${transitionDuration} ease-out` : void 0
+      },
+      "aria-label": title || "Message stream",
+      "aria-live": "polite",
+      children: [
+        (title || subtitle) && /* @__PURE__ */ jsxs("header", { style: { marginBottom: 16 }, children: [
+          title && /* @__PURE__ */ jsx("h3", { style: {
+            fontSize: tokens.typography.fontSize.lg,
+            fontWeight: 500,
+            // AstroUXDS medium for headers
+            color: tokens.colors.text.primary,
+            margin: 0
+          }, children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { style: {
+            fontSize: tokens.typography.fontSize.sm,
+            color: tokens.colors.text.tertiary,
+            margin: "4px 0 0 0"
+          }, children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "list",
+            tabIndex: maxHeight ? 0 : void 0,
+            "aria-label": maxHeight ? `${title || "Messages"} scrollable list` : void 0,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: variant === "compact" ? 4 : 8,
+              ...maxHeight && {
+                maxHeight,
+                overflowY: "auto",
+                paddingRight: 8
+              }
+            },
+            children: messages.length === 0 ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  textAlign: "center",
+                  padding: 32,
+                  color: tokens.colors.text.tertiary,
+                  fontSize: tokens.typography.fontSize.sm
+                },
+                children: emptyMessage
+              }
+            ) : variant === "tree" ? messages.map((message, index) => /* @__PURE__ */ jsx(
+              TreeNode,
+              {
+                message,
+                tokens,
+                size,
+                showTimestamp: showTimestamps,
+                timeFormat,
+                onClick: onMessageClick,
+                depth: 0,
+                showConnectors,
+                isLast: index === messages.length - 1
+              },
+              message.id
+            )) : messages.map((message) => /* @__PURE__ */ jsx(
+              MessageCard,
+              {
+                message,
+                tokens,
+                size,
+                showTimestamp: showTimestamps,
+                timeFormat,
+                onClick: onMessageClick,
+                variant
+              },
+              message.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  MessageStream
+};
+//# sourceMappingURL=MessageStream.js.map