@zendir/ui 0.1.0

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

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+
+export type LogSeverity = 'debug' | 'info' | 'warn' | 'error' | 'critical';
+export interface LogEntry {
+    /** Unique ID */
+    id: string | number;
+    /** Timestamp (ISO string or Date) */
+    timestamp: string | Date;
+    /** Severity level */
+    severity: LogSeverity;
+    /** Log message */
+    message: string;
+    /** Source component/system */
+    source?: string;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+}
+export interface LogViewerProps {
+    /** Array of log entries */
+    entries: LogEntry[];
+    /** Maximum entries to keep in memory (default: 5000). Older entries are pruned. */
+    maxEntries?: number;
+    /** Height of the viewer (default: 400) */
+    height?: number | string;
+    /** Title */
+    title?: string;
+    /** Show timestamps (default: true) */
+    showTimestamp?: boolean;
+    /** Show source column (default: true) */
+    showSource?: boolean;
+    /** Show severity filter toolbar (default: true) */
+    showFilters?: boolean;
+    /** Show search bar (default: true) */
+    showSearch?: boolean;
+    /** Initial severity filters (all enabled by default) */
+    defaultSeverities?: LogSeverity[];
+    /** Timestamp format: 'time', 'datetime', 'relative' (default: 'time') */
+    timestampFormat?: 'time' | 'datetime' | 'relative';
+    /** Called when an entry is clicked */
+    onEntryClick?: (entry: LogEntry) => void;
+    /** CSS class */
+    className?: string;
+    /** Show outer container border (default: true). Set false when embedded inside a Container/card. */
+    bordered?: boolean;
+    /** Custom style overrides for the outer container */
+    style?: React.CSSProperties;
+    /** Estimated row height in px for virtualization (default: 28). Enables smooth scroll through large logs. */
+    estimatedRowHeight?: number;
+    /** Number of rows to render above/below viewport for virtualization (default: 12). */
+    overscanCount?: number;
+    /**
+     * Enable pagination: show entries in pages with Previous/Next.
+     * Page 1 = newest entries. Use with large maxEntries so users can navigate to older pages.
+     * When set, scrolling is replaced by page navigation (better for very large logs).
+     */
+    pagination?: boolean | {
+        pageSize?: number;
+    };
+}
+export declare const LogViewer: React.NamedExoticComponent<LogViewerProps>;
+export default LogViewer;

package/dist/react/core/LogViewer.js

@@ -0,0 +1,599 @@
+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"];
+function formatTimestamp(ts, format) {
+  const d = typeof ts === "string" ? new Date(ts) : ts;
+  if (isNaN(d.getTime())) return String(ts);
+  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,
+          minWidth: 85,
+          fontSize: 11,
+          flexShrink: 0
+        }, children: formatTimestamp(entry.timestamp, 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 ts = formatTimestamp(e.timestamp, "datetime");
+      const src = e.source ? `[${e.source}]` : "";
+      return `${ts} [${e.severity.toUpperCase()}] ${src} ${e.message}`;
+    }).join("\n");
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(text);
+  }, [filteredEntries]);
+  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: `
+        .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" })
+      ]
+    }
+  );
+});
+export {
+  LogViewer
+};
+//# sourceMappingURL=LogViewer.js.map