@zendir/ui 0.5.0 → 0.6.0

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

@@ -1,619 +1,723 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useRef, useState, useMemo, useEffect, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-const DEFAULT_ESTIMATED_ROW_HEIGHT = 28;
-const DEFAULT_OVERSCAN_COUNT = 12;
-const SEVERITY_ORDER = ["debug", "info", "warn", "error", "critical"];
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/LogViewer.tsx
+/**
+* @zendir/ui - LogViewer Component
+*
+* Real-time log/event viewer for mission operations and system monitoring.
+* Supports severity filtering, search, auto-scroll, pause/resume,
+* and timestamped entries with color-coded severity levels.
+*
+* Features:
+* - Severity levels: debug, info, warn, error, critical
+* - Color-coded entries with Astro status colors
+* - Real-time auto-scroll with pause/resume
+* - Search/filter by text
+* - Severity filter checkboxes
+* - Timestamp display
+* - Source/component tags
+* - Export log to clipboard or file
+* - Maximum log retention (auto-prune old entries)
+* - Virtualized rendering for large logs
+*
+* @example
+* ```tsx
+* <LogViewer
+*   entries={logEntries}
+*   maxEntries={5000}
+*   showTimestamp
+*   showSource
+* />
+* ```
+*/
+var DEFAULT_ESTIMATED_ROW_HEIGHT = 28;
+var DEFAULT_OVERSCAN_COUNT = 12;
+var SEVERITY_ORDER = [
+	"debug",
+	"info",
+	"warn",
+	"error",
+	"critical"
+];
 function formatSimElapsed(seconds) {
-  const sign = seconds < 0 ? "-" : "+";
-  const abs = Math.abs(seconds);
-  const h = Math.floor(abs / 3600);
-  const m = Math.floor(abs % 3600 / 60);
-  const s = abs % 60;
-  const whole = Math.floor(s);
-  const tenths = Math.floor((s - whole) * 10);
-  return `T${sign}${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(whole).padStart(2, "0")}.${tenths}`;
+	const sign = seconds < 0 ? "-" : "+";
+	const abs = Math.abs(seconds);
+	const h = Math.floor(abs / 3600);
+	const m = Math.floor(abs % 3600 / 60);
+	const s = abs % 60;
+	const whole = Math.floor(s);
+	const tenths = Math.floor((s - whole) * 10);
+	return `T${sign}${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(whole).padStart(2, "0")}.${tenths}`;
 }
 function formatTimestamp(entry, format) {
-  if (format === "sim-elapsed" && typeof entry.simTime === "number" && Number.isFinite(entry.simTime)) {
-    return formatSimElapsed(entry.simTime);
-  }
-  const ts = entry.timestamp;
-  const d = typeof ts === "string" ? new Date(ts) : ts;
-  if (isNaN(d.getTime())) return String(ts);
-  if (format === "sim-elapsed") {
-    return d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
-  }
-  if (format === "time") {
-    return d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }) + "." + d.getMilliseconds().toString().padStart(3, "0");
-  }
-  if (format === "datetime") {
-    return d.toLocaleDateString("en-US", { month: "short", day: "2-digit" }) + " " + d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
-  }
-  const diff = Date.now() - d.getTime();
-  if (diff < 1e3) return "just now";
-  if (diff < 6e4) return `${Math.floor(diff / 1e3)}s ago`;
-  if (diff < 36e5) return `${Math.floor(diff / 6e4)}m ago`;
-  return `${Math.floor(diff / 36e5)}h ago`;
+	if (format === "sim-elapsed" && typeof entry.simTime === "number" && Number.isFinite(entry.simTime)) return formatSimElapsed(entry.simTime);
+	const ts = entry.timestamp;
+	const d = typeof ts === "string" ? new Date(ts) : ts;
+	if (isNaN(d.getTime())) return String(ts);
+	if (format === "sim-elapsed") return d.toLocaleTimeString("en-US", {
+		hour12: false,
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+	if (format === "time") return d.toLocaleTimeString("en-US", {
+		hour12: false,
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	}) + "." + d.getMilliseconds().toString().padStart(3, "0");
+	if (format === "datetime") return d.toLocaleDateString("en-US", {
+		month: "short",
+		day: "2-digit"
+	}) + " " + d.toLocaleTimeString("en-US", {
+		hour12: false,
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+	const diff = Date.now() - d.getTime();
+	if (diff < 1e3) return "just now";
+	if (diff < 6e4) return `${Math.floor(diff / 1e3)}s ago`;
+	if (diff < 36e5) return `${Math.floor(diff / 6e4)}m ago`;
+	return `${Math.floor(diff / 36e5)}h ago`;
 }
-const LogViewer = memo(function LogViewer2({
-  entries,
-  maxEntries = 5e3,
-  height = 400,
-  title,
-  showTimestamp = true,
-  showSource = true,
-  showFilters = true,
-  showSearch = true,
-  defaultSeverities,
-  timestampFormat = "time",
-  onEntryClick,
-  className = "",
-  bordered = true,
-  style: styleProp,
-  estimatedRowHeight = DEFAULT_ESTIMATED_ROW_HEIGHT,
-  overscanCount = DEFAULT_OVERSCAN_COUNT,
-  pagination
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const scrollRef = useRef(null);
-  const [paused, setPaused] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [severityFilter, setSeverityFilter] = useState(
-    new Set(defaultSeverities ?? SEVERITY_ORDER)
-  );
-  const [autoScroll, setAutoScroll] = useState(true);
-  const prevLengthRef = useRef(entries.length);
-  const [scrollState, setScrollState] = useState({ scrollTop: 0, containerHeight: 300 });
-  const rafRef = useRef(null);
-  const severityColors = {
-    debug: tokens.colors.text.muted ?? tokens.colors.text.secondary,
-    info: tokens.colors.status.standby,
-    warn: tokens.colors.status.caution,
-    error: tokens.colors.status.serious,
-    critical: tokens.colors.status.critical
-  };
-  const severityShapes = {
-    debug: "·",
-    info: "○",
-    warn: "■",
-    error: "◆",
-    critical: "▼"
-  };
-  const severityLabels = {
-    debug: "DBG",
-    info: "INF",
-    warn: "WRN",
-    error: "ERR",
-    critical: "CRT"
-  };
-  const filteredEntries = useMemo(() => {
-    let filtered = entries.filter((e) => severityFilter.has(e.severity));
-    if (searchQuery.trim()) {
-      const q = searchQuery.toLowerCase();
-      filtered = filtered.filter(
-        (e) => e.message.toLowerCase().includes(q) || e.source && e.source.toLowerCase().includes(q)
-      );
-    }
-    return filtered.slice(0, maxEntries);
-  }, [entries, severityFilter, searchQuery, maxEntries]);
-  const paginationConfig = pagination === true ? { pageSize: 200 } : pagination || void 0;
-  const pageSize = (paginationConfig == null ? void 0 : paginationConfig.pageSize) ?? 200;
-  const totalPages = Math.max(1, Math.ceil(filteredEntries.length / pageSize));
-  const [currentPage, setCurrentPage] = useState(1);
-  useEffect(() => {
-    setCurrentPage((p) => Math.min(p, totalPages));
-  }, [totalPages]);
-  const paginationEntries = useMemo(() => {
-    if (!paginationConfig) return null;
-    const start = (currentPage - 1) * pageSize;
-    return filteredEntries.slice(start, start + pageSize);
-  }, [paginationConfig, currentPage, pageSize, filteredEntries]);
-  const totalHeight = filteredEntries.length * estimatedRowHeight;
-  const { scrollTop, containerHeight } = scrollState;
-  const visibleRange = useMemo(() => {
-    const start = Math.max(0, Math.floor(scrollTop / estimatedRowHeight) - overscanCount);
-    const end = Math.min(
-      filteredEntries.length,
-      Math.ceil((scrollTop + containerHeight) / estimatedRowHeight) + overscanCount
-    );
-    return { start, end };
-  }, [scrollTop, containerHeight, estimatedRowHeight, overscanCount, filteredEntries.length]);
-  const visibleEntries = useMemo(
-    () => filteredEntries.slice(visibleRange.start, visibleRange.end),
-    [filteredEntries, visibleRange.start, visibleRange.end]
-  );
-  const usePagination = !!paginationConfig;
-  const renderRow = useCallback((entry) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: onEntryClick ? "button" : "listitem",
-      tabIndex: onEntryClick ? 0 : void 0,
-      "aria-label": onEntryClick ? `${severityLabels[entry.severity]}: ${entry.message}` : void 0,
-      onClick: () => onEntryClick == null ? void 0 : onEntryClick(entry),
-      onKeyDown: onEntryClick ? (e) => (e.key === "Enter" || e.key === " ") && (e.preventDefault(), onEntryClick(entry)) : void 0,
-      style: {
-        display: "flex",
-        alignItems: "flex-start",
-        minHeight: estimatedRowHeight,
-        boxSizing: "border-box",
-        padding: "3px 12px",
-        borderBottom: `1px solid ${tokens.colors.border.muted}11`,
-        cursor: onEntryClick ? "pointer" : "default",
-        transition: "background 150ms ease"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.background = `${tokens.colors.background.surface}`;
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.background = "transparent";
-      },
-      children: [
-        /* @__PURE__ */ jsxs("span", { style: {
-          color: severityColors[entry.severity],
-          fontWeight: 700,
-          fontSize: tokens.typography.fontSize.xxs,
-          minWidth: 38,
-          textAlign: "center",
-          background: `${severityColors[entry.severity]}18`,
-          borderRadius: tokens.borderRadius.sm,
-          padding: "1px 4px",
-          marginRight: 8,
-          marginTop: 1,
-          letterSpacing: "0.3px",
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 3
-        }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "8px", lineHeight: 1 }, children: severityShapes[entry.severity] }),
-          severityLabels[entry.severity]
-        ] }),
-        showTimestamp && /* @__PURE__ */ jsx("span", { style: {
-          color: tokens.colors.text.muted,
-          marginRight: 8,
-          // 'sim-elapsed' renders T+HH:MM:SS.s which is wider than the wall-clock formats.
-          minWidth: timestampFormat === "sim-elapsed" ? 110 : 85,
-          fontSize: 11,
-          flexShrink: 0,
-          fontFamily: tokens.typography.fontFamily.mono
-        }, children: formatTimestamp(entry, timestampFormat) }),
-        showSource && entry.source && /* @__PURE__ */ jsxs("span", { style: {
-          color: tokens.colors.interactive.default,
-          marginRight: 8,
-          fontSize: 11,
-          minWidth: 70,
-          maxWidth: 100,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          flexShrink: 0
-        }, children: [
-          "[",
-          entry.source,
-          "]"
-        ] }),
-        /* @__PURE__ */ jsx("span", { style: {
-          color: entry.severity === "error" || entry.severity === "critical" ? severityColors[entry.severity] : tokens.colors.text.primary,
-          flex: 1,
-          wordBreak: "break-word",
-          lineHeight: 1.4
-        }, children: entry.message })
-      ]
-    },
-    entry.id
-  ), [severityColors, severityShapes, severityLabels, estimatedRowHeight, tokens, showTimestamp, showSource, timestampFormat, onEntryClick]);
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const ro = new ResizeObserver(() => {
-      setScrollState((s) => ({ ...s, containerHeight: el.clientHeight }));
-    });
-    ro.observe(el);
-    setScrollState((s) => ({ ...s, containerHeight: el.clientHeight }));
-    return () => ro.disconnect();
-  }, []);
-  const handleScroll = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const { scrollTop: st, scrollHeight, clientHeight } = el;
-    const atBottom = scrollHeight - st - clientHeight < 30;
-    setAutoScroll(atBottom);
-    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null;
-      setScrollState((prev) => ({ ...prev, scrollTop: el.scrollTop }));
-    });
-  }, []);
-  useEffect(() => {
-    if (entries.length <= prevLengthRef.current) {
-      prevLengthRef.current = entries.length;
-      return;
-    }
-    if (!usePagination && !paused && autoScroll && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-    prevLengthRef.current = entries.length;
-  }, [entries.length, paused, autoScroll, usePagination]);
-  useEffect(() => () => {
-    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-  }, []);
-  const toggleSeverity = useCallback((sev) => {
-    setSeverityFilter((prev) => {
-      const next = new Set(prev);
-      if (next.has(sev)) next.delete(sev);
-      else next.add(sev);
-      return next;
-    });
-  }, []);
-  const exportLog = useCallback(() => {
-    var _a;
-    const text = filteredEntries.map((e) => {
-      const wall = formatTimestamp(e, "datetime");
-      const sim = timestampFormat === "sim-elapsed" && typeof e.simTime === "number" ? ` ${formatSimElapsed(e.simTime)}` : "";
-      const src = e.source ? `[${e.source}]` : "";
-      return `${wall}${sim} [${e.severity.toUpperCase()}] ${src} ${e.message}`;
-    }).join("\n");
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(text);
-  }, [filteredEntries, timestampFormat]);
-  const clearFilters = useCallback(() => {
-    setSeverityFilter(new Set(SEVERITY_ORDER));
-    setSearchQuery("");
-  }, []);
-  const counts = useMemo(() => {
-    const c = { debug: 0, info: 0, warn: 0, error: 0, critical: 0 };
-    entries.forEach((e) => {
-      c[e.severity]++;
-    });
-    return c;
-  }, [entries]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `log-viewer ${className}`,
-      style: {
-        height: typeof height === "number" ? `${height}px` : height,
-        minHeight: typeof height === "number" ? `${height}px` : height,
-        background: tokens.colors.background.base,
-        ...bordered ? tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` } : { border: "none" },
-        borderRadius: tokens.borderRadius.lg,
-        overflow: "hidden",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: tokens.typography.fontFamily.mono,
-        ...styleProp,
-        fontSize: tokens.typography.fontSize.xs,
-        color: tokens.colors.text.primary,
-        backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
-        WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0
-      },
-      children: [
-        title && /* @__PURE__ */ jsxs("div", { style: {
-          padding: "8px 12px",
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          background: tokens.colors.background.surface,
-          fontFamily: tokens.typography.fontFamily.primary,
-          backdropFilter: "blur(8px)"
-        }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 13 }, children: title }),
-          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: tokens.colors.text.muted }, children: [
-            filteredEntries.length.toLocaleString(),
-            " entries"
-          ] }) })
-        ] }),
-        (showFilters || showSearch) && /* @__PURE__ */ jsxs("div", { style: {
-          padding: "6px 12px",
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          flexWrap: "wrap",
-          background: tokens.colors.background.surface,
-          fontFamily: tokens.typography.fontFamily.primary
-        }, children: [
-          showFilters && SEVERITY_ORDER.map((sev) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => toggleSeverity(sev),
-              "aria-pressed": severityFilter.has(sev),
-              "aria-label": `Filter ${sev} logs (${counts[sev]})`,
-              style: {
-                background: severityFilter.has(sev) ? `${severityColors[sev]}22` : "transparent",
-                color: severityFilter.has(sev) ? severityColors[sev] : tokens.colors.text.muted,
-                border: `1px solid ${severityFilter.has(sev) ? severityColors[sev] + "66" : tokens.colors.border.muted}`,
-                borderRadius: tokens.borderRadius.md,
-                padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
-                fontSize: tokens.typography.fontSize.xxs,
-                fontWeight: tokens.typography.fontWeight.medium,
-                cursor: "pointer",
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
-                transition: "all 150ms ease"
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: severityShapes[sev] }),
-                " ",
-                sev,
-                " (",
-                counts[sev],
-                ")"
-              ]
-            },
-            sev
-          )),
-          /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-          showSearch && /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              value: searchQuery,
-              onChange: (e) => setSearchQuery(e.target.value),
-              placeholder: "Filter messages...",
-              "aria-label": "Filter log messages",
-              style: {
-                background: tokens.colors.background.base,
-                color: tokens.colors.text.primary,
-                border: `1px solid ${tokens.colors.border.muted}`,
-                borderRadius: tokens.borderRadius.md,
-                padding: `3px ${tokens.spacing.sm}`,
-                fontSize: tokens.typography.fontSize.sm,
-                outline: "none",
-                minWidth: 150
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setPaused((p) => !p),
-              "aria-label": paused ? "Resume log stream" : "Pause log stream",
-              style: {
-                background: paused ? `${tokens.colors.status.caution}22` : tokens.colors.background.base,
-                color: paused ? tokens.colors.status.caution : tokens.colors.text.secondary,
-                border: `1px solid ${tokens.colors.border.muted}`,
-                borderRadius: tokens.borderRadius.md,
-                padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
-                fontSize: tokens.typography.fontSize.xxs,
-                cursor: "pointer",
-                fontWeight: tokens.typography.fontWeight.medium,
-                transition: "all 150ms ease"
-              },
-              children: paused ? "▶ Resume" : "⏸ Pause"
-            }
-          ),
-          /* @__PURE__ */ jsx("button", { onClick: exportLog, "aria-label": "Copy log to clipboard", style: {
-            background: tokens.colors.background.base,
-            color: tokens.colors.text.secondary,
-            border: `1px solid ${tokens.colors.border.muted}`,
-            borderRadius: tokens.borderRadius.md,
-            padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
-            fontSize: tokens.typography.fontSize.xxs,
-            cursor: "pointer",
-            transition: "all 150ms ease"
-          }, children: "Copy" }),
-          /* @__PURE__ */ jsx("button", { onClick: clearFilters, "aria-label": "Reset all filters", style: {
-            background: tokens.colors.background.base,
-            color: tokens.colors.text.secondary,
-            border: `1px solid ${tokens.colors.border.muted}`,
-            borderRadius: tokens.borderRadius.md,
-            padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
-            fontSize: tokens.typography.fontSize.xxs,
-            cursor: "pointer",
-            transition: "all 150ms ease"
-          }, children: "Reset" })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: scrollRef,
-            onScroll: handleScroll,
-            className: "zendir-log-scroll",
-            style: {
-              flex: 1,
-              minHeight: 0,
-              overflowY: "auto",
-              overflowX: "hidden",
-              padding: "2px 0",
-              overscrollBehavior: "contain",
-              WebkitOverflowScrolling: "touch"
-            },
-            children: filteredEntries.length === 0 ? /* @__PURE__ */ jsx("div", { style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              height: "100%",
-              color: tokens.colors.text.muted,
-              fontSize: 13,
-              fontFamily: tokens.typography.fontFamily.primary
-            }, children: entries.length === 0 ? "No log entries" : "No matching entries" }) : usePagination ? /* @__PURE__ */ jsx("div", { style: { padding: "2px 0" }, role: "list", "aria-label": "Log entries", children: (paginationEntries ?? []).map((entry) => renderRow(entry)) }) : /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  height: totalHeight,
-                  position: "relative",
-                  width: "100%"
-                },
-                role: "list",
-                "aria-label": "Log entries",
-                children: [
-                  visibleRange.start > 0 && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: { height: visibleRange.start * estimatedRowHeight, width: "100%" },
-                      "aria-hidden": true
-                    }
-                  ),
-                  visibleEntries.map((entry) => renderRow(entry)),
-                  visibleRange.end < filteredEntries.length && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        height: (filteredEntries.length - visibleRange.end) * estimatedRowHeight,
-                        width: "100%"
-                      },
-                      "aria-hidden": true
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
-        usePagination && filteredEntries.length > 0 && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              flexWrap: "wrap",
-              gap: tokens.spacing.sm,
-              padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-              borderTop: `1px solid ${tokens.colors.border.muted}`,
-              background: tokens.colors.background.surface,
-              fontFamily: tokens.typography.fontFamily.primary,
-              fontSize: tokens.typography.fontSize.xs,
-              color: tokens.colors.text.secondary
-            },
-            children: [
-              /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
-                "Page ",
-                currentPage,
-                " of ",
-                totalPages,
-                filteredEntries.length > 0 && /* @__PURE__ */ jsxs("span", { style: { marginLeft: tokens.spacing.sm }, children: [
-                  "(",
-                  ((currentPage - 1) * pageSize + 1).toLocaleString(),
-                  "–",
-                  Math.min(currentPage * pageSize, filteredEntries.length).toLocaleString(),
-                  " of ",
-                  filteredEntries.length.toLocaleString(),
-                  ")"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs }, children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setCurrentPage(1);
-                      setAutoScroll(true);
-                    },
-                    disabled: currentPage <= 1,
-                    "aria-label": "First page (newest)",
-                    style: {
-                      padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
-                      border: `1px solid ${tokens.colors.border.muted}`,
-                      borderRadius: tokens.borderRadius.md,
-                      background: tokens.colors.background.base,
-                      color: tokens.colors.text.primary,
-                      fontSize: tokens.typography.fontSize.xxs,
-                      cursor: currentPage <= 1 ? "not-allowed" : "pointer",
-                      opacity: currentPage <= 1 ? 0.5 : 1
-                    },
-                    children: "First"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setCurrentPage((p) => Math.max(1, p - 1));
-                      setAutoScroll(false);
-                    },
-                    disabled: currentPage <= 1,
-                    "aria-label": "Previous page",
-                    style: {
-                      padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
-                      border: `1px solid ${tokens.colors.border.muted}`,
-                      borderRadius: tokens.borderRadius.md,
-                      background: tokens.colors.background.base,
-                      color: tokens.colors.text.primary,
-                      fontSize: tokens.typography.fontSize.xxs,
-                      cursor: currentPage <= 1 ? "not-allowed" : "pointer",
-                      opacity: currentPage <= 1 ? 0.5 : 1
-                    },
-                    children: "Previous"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setCurrentPage((p) => Math.min(totalPages, p + 1));
-                      setAutoScroll(false);
-                    },
-                    disabled: currentPage >= totalPages,
-                    "aria-label": "Next page",
-                    style: {
-                      padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
-                      border: `1px solid ${tokens.colors.border.muted}`,
-                      borderRadius: tokens.borderRadius.md,
-                      background: tokens.colors.background.base,
-                      color: tokens.colors.text.primary,
-                      fontSize: tokens.typography.fontSize.xxs,
-                      cursor: currentPage >= totalPages ? "not-allowed" : "pointer",
-                      opacity: currentPage >= totalPages ? 0.5 : 1
-                    },
-                    children: "Next"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setCurrentPage(totalPages);
-                      setAutoScroll(false);
-                    },
-                    disabled: currentPage >= totalPages,
-                    "aria-label": "Last page (oldest)",
-                    style: {
-                      padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
-                      border: `1px solid ${tokens.colors.border.muted}`,
-                      borderRadius: tokens.borderRadius.md,
-                      background: tokens.colors.background.base,
-                      color: tokens.colors.text.primary,
-                      fontSize: tokens.typography.fontSize.xxs,
-                      cursor: currentPage >= totalPages ? "not-allowed" : "pointer",
-                      opacity: currentPage >= totalPages ? 0.5 : 1
-                    },
-                    children: "Last"
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
+var LogViewer = memo(function LogViewer({ entries, maxEntries = 5e3, height = 400, title, showTimestamp = true, showSource = true, showFilters = true, showSearch = true, defaultSeverities, timestampFormat = "time", onEntryClick, className = "", bordered = true, style: styleProp, estimatedRowHeight = DEFAULT_ESTIMATED_ROW_HEIGHT, overscanCount = DEFAULT_OVERSCAN_COUNT, pagination }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const scrollRef = useRef(null);
+	const [paused, setPaused] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [severityFilter, setSeverityFilter] = useState(new Set(defaultSeverities ?? SEVERITY_ORDER));
+	const [autoScroll, setAutoScroll] = useState(true);
+	const prevLengthRef = useRef(entries.length);
+	/** Scroll position and container height for virtualization */
+	const [scrollState, setScrollState] = useState({
+		scrollTop: 0,
+		containerHeight: 300
+	});
+	const rafRef = useRef(null);
+	const severityColors = {
+		debug: tokens.colors.text.muted ?? tokens.colors.text.secondary,
+		info: tokens.colors.status.standby,
+		warn: tokens.colors.status.caution,
+		error: tokens.colors.status.serious,
+		critical: tokens.colors.status.critical
+	};
+	/**
+	* Astro UX status shapes mapped to log severity levels:
+	*   debug → off (small dot ·), info → standby (ring ◯),
+	*   warn → caution (square ■), error → serious (diamond ◆),
+	*   critical → critical (triangle down ▼)
+	*/
+	const severityShapes = {
+		debug: "·",
+		info: "○",
+		warn: "■",
+		error: "◆",
+		critical: "▼"
+	};
+	const severityLabels = {
+		debug: "DBG",
+		info: "INF",
+		warn: "WRN",
+		error: "ERR",
+		critical: "CRT"
+	};
+	const filteredEntries = useMemo(() => {
+		let filtered = entries.filter((e) => severityFilter.has(e.severity));
+		if (searchQuery.trim()) {
+			const q = searchQuery.toLowerCase();
+			filtered = filtered.filter((e) => e.message.toLowerCase().includes(q) || e.source && e.source.toLowerCase().includes(q));
+		}
+		return filtered.slice(0, maxEntries);
+	}, [
+		entries,
+		severityFilter,
+		searchQuery,
+		maxEntries
+	]);
+	const paginationConfig = pagination === true ? { pageSize: 200 } : pagination || void 0;
+	const pageSize = paginationConfig?.pageSize ?? 200;
+	const totalPages = Math.max(1, Math.ceil(filteredEntries.length / pageSize));
+	const [currentPage, setCurrentPage] = useState(1);
+	useEffect(() => {
+		setCurrentPage((p) => Math.min(p, totalPages));
+	}, [totalPages]);
+	const paginationEntries = useMemo(() => {
+		if (!paginationConfig) return null;
+		const start = (currentPage - 1) * pageSize;
+		return filteredEntries.slice(start, start + pageSize);
+	}, [
+		paginationConfig,
+		currentPage,
+		pageSize,
+		filteredEntries
+	]);
+	const totalHeight = filteredEntries.length * estimatedRowHeight;
+	const { scrollTop, containerHeight } = scrollState;
+	const visibleRange = useMemo(() => {
+		return {
+			start: Math.max(0, Math.floor(scrollTop / estimatedRowHeight) - overscanCount),
+			end: Math.min(filteredEntries.length, Math.ceil((scrollTop + containerHeight) / estimatedRowHeight) + overscanCount)
+		};
+	}, [
+		scrollTop,
+		containerHeight,
+		estimatedRowHeight,
+		overscanCount,
+		filteredEntries.length
+	]);
+	const visibleEntries = useMemo(() => filteredEntries.slice(visibleRange.start, visibleRange.end), [
+		filteredEntries,
+		visibleRange.start,
+		visibleRange.end
+	]);
+	const usePagination = !!paginationConfig;
+	const renderRow = useCallback((entry) => /* @__PURE__ */ jsxs("div", {
+		role: onEntryClick ? "button" : "listitem",
+		tabIndex: onEntryClick ? 0 : void 0,
+		"aria-label": onEntryClick ? `${severityLabels[entry.severity]}: ${entry.message}` : void 0,
+		onClick: () => onEntryClick?.(entry),
+		onKeyDown: onEntryClick ? (e) => (e.key === "Enter" || e.key === " ") && (e.preventDefault(), onEntryClick(entry)) : void 0,
+		style: {
+			display: "flex",
+			alignItems: "flex-start",
+			minHeight: estimatedRowHeight,
+			boxSizing: "border-box",
+			padding: "3px 12px",
+			borderBottom: `1px solid ${tokens.colors.border.muted}11`,
+			cursor: onEntryClick ? "pointer" : "default",
+			transition: "background 150ms ease"
+		},
+		onMouseEnter: (e) => {
+			e.currentTarget.style.background = `${tokens.colors.background.surface}`;
+		},
+		onMouseLeave: (e) => {
+			e.currentTarget.style.background = "transparent";
+		},
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					color: severityColors[entry.severity],
+					fontWeight: 700,
+					fontSize: tokens.typography.fontSize.xxs,
+					minWidth: 38,
+					textAlign: "center",
+					background: `${severityColors[entry.severity]}18`,
+					borderRadius: tokens.borderRadius.sm,
+					padding: "1px 4px",
+					marginRight: 8,
+					marginTop: 1,
+					letterSpacing: "0.3px",
+					display: "inline-flex",
+					alignItems: "center",
+					justifyContent: "center",
+					gap: 3
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: "8px",
+						lineHeight: 1
+					},
+					children: severityShapes[entry.severity]
+				}), severityLabels[entry.severity]]
+			}),
+			showTimestamp && /* @__PURE__ */ jsx("span", {
+				style: {
+					color: tokens.colors.text.muted,
+					marginRight: 8,
+					minWidth: timestampFormat === "sim-elapsed" ? 110 : 85,
+					fontSize: 11,
+					flexShrink: 0,
+					fontFamily: tokens.typography.fontFamily.mono
+				},
+				children: formatTimestamp(entry, timestampFormat)
+			}),
+			showSource && entry.source && /* @__PURE__ */ jsxs("span", {
+				style: {
+					color: tokens.colors.interactive.default,
+					marginRight: 8,
+					fontSize: 11,
+					minWidth: 70,
+					maxWidth: 100,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					flexShrink: 0
+				},
+				children: [
+					"[",
+					entry.source,
+					"]"
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					color: entry.severity === "error" || entry.severity === "critical" ? severityColors[entry.severity] : tokens.colors.text.primary,
+					flex: 1,
+					wordBreak: "break-word",
+					lineHeight: 1.4
+				},
+				children: entry.message
+			})
+		]
+	}, entry.id), [
+		severityColors,
+		severityShapes,
+		severityLabels,
+		estimatedRowHeight,
+		tokens,
+		showTimestamp,
+		showSource,
+		timestampFormat,
+		onEntryClick
+	]);
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver(() => {
+			setScrollState((s) => ({
+				...s,
+				containerHeight: el.clientHeight
+			}));
+		});
+		ro.observe(el);
+		setScrollState((s) => ({
+			...s,
+			containerHeight: el.clientHeight
+		}));
+		return () => ro.disconnect();
+	}, []);
+	const handleScroll = useCallback(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const { scrollTop: st, scrollHeight, clientHeight } = el;
+		const atBottom = scrollHeight - st - clientHeight < 30;
+		setAutoScroll(atBottom);
+		if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+		rafRef.current = requestAnimationFrame(() => {
+			rafRef.current = null;
+			setScrollState((prev) => ({
+				...prev,
+				scrollTop: el.scrollTop
+			}));
+		});
+	}, []);
+	useEffect(() => {
+		if (entries.length <= prevLengthRef.current) {
+			prevLengthRef.current = entries.length;
+			return;
+		}
+		if (!usePagination && !paused && autoScroll && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		prevLengthRef.current = entries.length;
+	}, [
+		entries.length,
+		paused,
+		autoScroll,
+		usePagination
+	]);
+	useEffect(() => () => {
+		if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+	}, []);
+	const toggleSeverity = useCallback((sev) => {
+		setSeverityFilter((prev) => {
+			const next = new Set(prev);
+			if (next.has(sev)) next.delete(sev);
+			else next.add(sev);
+			return next;
+		});
+	}, []);
+	const exportLog = useCallback(() => {
+		const text = filteredEntries.map((e) => {
+			const wall = formatTimestamp(e, "datetime");
+			const sim = timestampFormat === "sim-elapsed" && typeof e.simTime === "number" ? ` ${formatSimElapsed(e.simTime)}` : "";
+			const src = e.source ? `[${e.source}]` : "";
+			return `${wall}${sim} [${e.severity.toUpperCase()}] ${src} ${e.message}`;
+		}).join("\n");
+		navigator.clipboard?.writeText(text);
+	}, [filteredEntries, timestampFormat]);
+	const clearFilters = useCallback(() => {
+		setSeverityFilter(new Set(SEVERITY_ORDER));
+		setSearchQuery("");
+	}, []);
+	const counts = useMemo(() => {
+		const c = {
+			debug: 0,
+			info: 0,
+			warn: 0,
+			error: 0,
+			critical: 0
+		};
+		entries.forEach((e) => {
+			c[e.severity]++;
+		});
+		return c;
+	}, [entries]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `log-viewer ${className}`,
+		style: {
+			height: typeof height === "number" ? `${height}px` : height,
+			minHeight: typeof height === "number" ? `${height}px` : height,
+			background: tokens.colors.background.base,
+			...bordered ? tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` } : { border: "none" },
+			borderRadius: tokens.borderRadius.lg,
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			fontFamily: tokens.typography.fontFamily.mono,
+			...styleProp,
+			fontSize: tokens.typography.fontSize.xs,
+			color: tokens.colors.text.primary,
+			backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+			WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0
+		},
+		children: [
+			title && /* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: "8px 12px",
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					background: tokens.colors.background.surface,
+					fontFamily: tokens.typography.fontFamily.primary,
+					backdropFilter: "blur(8px)"
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					style: {
+						fontWeight: 600,
+						fontSize: 13
+					},
+					children: title
+				}), /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 8
+					},
+					children: /* @__PURE__ */ jsxs("span", {
+						style: {
+							fontSize: 11,
+							color: tokens.colors.text.muted
+						},
+						children: [filteredEntries.length.toLocaleString(), " entries"]
+					})
+				})]
+			}),
+			(showFilters || showSearch) && /* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: "6px 12px",
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					flexWrap: "wrap",
+					background: tokens.colors.background.surface,
+					fontFamily: tokens.typography.fontFamily.primary
+				},
+				children: [
+					showFilters && SEVERITY_ORDER.map((sev) => /* @__PURE__ */ jsxs("button", {
+						onClick: () => toggleSeverity(sev),
+						"aria-pressed": severityFilter.has(sev),
+						"aria-label": `Filter ${sev} logs (${counts[sev]})`,
+						style: {
+							background: severityFilter.has(sev) ? `${severityColors[sev]}22` : "transparent",
+							color: severityFilter.has(sev) ? severityColors[sev] : tokens.colors.text.muted,
+							border: `1px solid ${severityFilter.has(sev) ? severityColors[sev] + "66" : tokens.colors.border.muted}`,
+							borderRadius: tokens.borderRadius.md,
+							padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
+							fontSize: tokens.typography.fontSize.xxs,
+							fontWeight: tokens.typography.fontWeight.medium,
+							cursor: "pointer",
+							textTransform: "uppercase",
+							letterSpacing: "0.5px",
+							transition: "all 150ms ease"
+						},
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: severityShapes[sev]
+							}),
+							" ",
+							sev,
+							" (",
+							counts[sev],
+							")"
+						]
+					}, sev)),
+					/* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+					showSearch && /* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: searchQuery,
+						onChange: (e) => setSearchQuery(e.target.value),
+						placeholder: "Filter messages...",
+						"aria-label": "Filter log messages",
+						style: {
+							background: tokens.colors.background.base,
+							color: tokens.colors.text.primary,
+							border: `1px solid ${tokens.colors.border.muted}`,
+							borderRadius: tokens.borderRadius.md,
+							padding: `3px ${tokens.spacing.sm}`,
+							fontSize: tokens.typography.fontSize.sm,
+							outline: "none",
+							minWidth: 150
+						}
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => setPaused((p) => !p),
+						"aria-label": paused ? "Resume log stream" : "Pause log stream",
+						style: {
+							background: paused ? `${tokens.colors.status.caution}22` : tokens.colors.background.base,
+							color: paused ? tokens.colors.status.caution : tokens.colors.text.secondary,
+							border: `1px solid ${tokens.colors.border.muted}`,
+							borderRadius: tokens.borderRadius.md,
+							padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
+							fontSize: tokens.typography.fontSize.xxs,
+							cursor: "pointer",
+							fontWeight: tokens.typography.fontWeight.medium,
+							transition: "all 150ms ease"
+						},
+						children: paused ? "▶ Resume" : "⏸ Pause"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: exportLog,
+						"aria-label": "Copy log to clipboard",
+						style: {
+							background: tokens.colors.background.base,
+							color: tokens.colors.text.secondary,
+							border: `1px solid ${tokens.colors.border.muted}`,
+							borderRadius: tokens.borderRadius.md,
+							padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
+							fontSize: tokens.typography.fontSize.xxs,
+							cursor: "pointer",
+							transition: "all 150ms ease"
+						},
+						children: "Copy"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: clearFilters,
+						"aria-label": "Reset all filters",
+						style: {
+							background: tokens.colors.background.base,
+							color: tokens.colors.text.secondary,
+							border: `1px solid ${tokens.colors.border.muted}`,
+							borderRadius: tokens.borderRadius.md,
+							padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
+							fontSize: tokens.typography.fontSize.xxs,
+							cursor: "pointer",
+							transition: "all 150ms ease"
+						},
+						children: "Reset"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				onScroll: handleScroll,
+				className: "zendir-log-scroll",
+				style: {
+					flex: 1,
+					minHeight: 0,
+					overflowY: "auto",
+					overflowX: "hidden",
+					padding: "2px 0",
+					overscrollBehavior: "contain",
+					WebkitOverflowScrolling: "touch"
+				},
+				children: filteredEntries.length === 0 ? /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						height: "100%",
+						color: tokens.colors.text.muted,
+						fontSize: 13,
+						fontFamily: tokens.typography.fontFamily.primary
+					},
+					children: entries.length === 0 ? "No log entries" : "No matching entries"
+				}) : usePagination ? /* @__PURE__ */ jsx("div", {
+					style: { padding: "2px 0" },
+					role: "list",
+					"aria-label": "Log entries",
+					children: (paginationEntries ?? []).map((entry) => renderRow(entry))
+				}) : /* @__PURE__ */ jsxs("div", {
+					style: {
+						height: totalHeight,
+						position: "relative",
+						width: "100%"
+					},
+					role: "list",
+					"aria-label": "Log entries",
+					children: [
+						visibleRange.start > 0 && /* @__PURE__ */ jsx("div", {
+							style: {
+								height: visibleRange.start * estimatedRowHeight,
+								width: "100%"
+							},
+							"aria-hidden": true
+						}),
+						visibleEntries.map((entry) => renderRow(entry)),
+						visibleRange.end < filteredEntries.length && /* @__PURE__ */ jsx("div", {
+							style: {
+								height: (filteredEntries.length - visibleRange.end) * estimatedRowHeight,
+								width: "100%"
+							},
+							"aria-hidden": true
+						})
+					]
+				})
+			}),
+			usePagination && filteredEntries.length > 0 && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					flexWrap: "wrap",
+					gap: tokens.spacing.sm,
+					padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					fontFamily: tokens.typography.fontFamily.primary,
+					fontSize: tokens.typography.fontSize.xs,
+					color: tokens.colors.text.secondary
+				},
+				children: [/* @__PURE__ */ jsxs("span", {
+					"aria-live": "polite",
+					children: [
+						"Page ",
+						currentPage,
+						" of ",
+						totalPages,
+						filteredEntries.length > 0 && /* @__PURE__ */ jsxs("span", {
+							style: { marginLeft: tokens.spacing.sm },
+							children: [
+								"(",
+								((currentPage - 1) * pageSize + 1).toLocaleString(),
+								"–",
+								Math.min(currentPage * pageSize, filteredEntries.length).toLocaleString(),
+								" ",
+								"of ",
+								filteredEntries.length.toLocaleString(),
+								")"
+							]
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.xs
+					},
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								setCurrentPage(1);
+								setAutoScroll(true);
+							},
+							disabled: currentPage <= 1,
+							"aria-label": "First page (newest)",
+							style: {
+								padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
+								border: `1px solid ${tokens.colors.border.muted}`,
+								borderRadius: tokens.borderRadius.md,
+								background: tokens.colors.background.base,
+								color: tokens.colors.text.primary,
+								fontSize: tokens.typography.fontSize.xxs,
+								cursor: currentPage <= 1 ? "not-allowed" : "pointer",
+								opacity: currentPage <= 1 ? .5 : 1
+							},
+							children: "First"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								setCurrentPage((p) => Math.max(1, p - 1));
+								setAutoScroll(false);
+							},
+							disabled: currentPage <= 1,
+							"aria-label": "Previous page",
+							style: {
+								padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
+								border: `1px solid ${tokens.colors.border.muted}`,
+								borderRadius: tokens.borderRadius.md,
+								background: tokens.colors.background.base,
+								color: tokens.colors.text.primary,
+								fontSize: tokens.typography.fontSize.xxs,
+								cursor: currentPage <= 1 ? "not-allowed" : "pointer",
+								opacity: currentPage <= 1 ? .5 : 1
+							},
+							children: "Previous"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								setCurrentPage((p) => Math.min(totalPages, p + 1));
+								setAutoScroll(false);
+							},
+							disabled: currentPage >= totalPages,
+							"aria-label": "Next page",
+							style: {
+								padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
+								border: `1px solid ${tokens.colors.border.muted}`,
+								borderRadius: tokens.borderRadius.md,
+								background: tokens.colors.background.base,
+								color: tokens.colors.text.primary,
+								fontSize: tokens.typography.fontSize.xxs,
+								cursor: currentPage >= totalPages ? "not-allowed" : "pointer",
+								opacity: currentPage >= totalPages ? .5 : 1
+							},
+							children: "Next"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								setCurrentPage(totalPages);
+								setAutoScroll(false);
+							},
+							disabled: currentPage >= totalPages,
+							"aria-label": "Last page (oldest)",
+							style: {
+								padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,
+								border: `1px solid ${tokens.colors.border.muted}`,
+								borderRadius: tokens.borderRadius.md,
+								background: tokens.colors.background.base,
+								color: tokens.colors.text.primary,
+								fontSize: tokens.typography.fontSize.xxs,
+								cursor: currentPage >= totalPages ? "not-allowed" : "pointer",
+								opacity: currentPage >= totalPages ? .5 : 1
+							},
+							children: "Last"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
         .zendir-log-scroll::-webkit-scrollbar { width: 6px; }
         .zendir-log-scroll::-webkit-scrollbar-track { background: transparent; }
         .zendir-log-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
         .zendir-log-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
         .zendir-log-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
       ` }),
-        paused && /* @__PURE__ */ jsx("div", { role: "status", style: {
-          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-          borderTop: `1px solid ${tokens.colors.border.muted}`,
-          background: `${tokens.colors.status.caution}15`,
-          color: tokens.colors.status.caution,
-          fontSize: tokens.typography.fontSize.sm,
-          textAlign: "center",
-          fontFamily: tokens.typography.fontFamily.primary,
-          fontWeight: tokens.typography.fontWeight.medium
-        }, children: "Log paused — new entries are buffered" })
-      ]
-    }
-  );
+			paused && /* @__PURE__ */ jsx("div", {
+				role: "status",
+				style: {
+					padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					background: `${tokens.colors.status.caution}15`,
+					color: tokens.colors.status.caution,
+					fontSize: tokens.typography.fontSize.sm,
+					textAlign: "center",
+					fontFamily: tokens.typography.fontFamily.primary,
+					fontWeight: tokens.typography.fontWeight.medium
+				},
+				children: "Log paused — new entries are buffered"
+			})
+		]
+	});
 });
-export {
-  LogViewer
-};
-//# sourceMappingURL=LogViewer.js.map
+//#endregion
+export { LogViewer, LogViewer as default };
+
+//# sourceMappingURL=LogViewer.js.map