@visulima/vis 1.0.0-alpha.10 → 1.0.0-alpha.11

package/dist/packem_shared/VisUpdateApp-D-Yz_wvg.js

@@ -0,0 +1,1316 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useWindowSize, Box, Spinner, Text, ScrollView, Tabs, Tab, ScrollBar, useApp, useInput, Dialog } from '@visulima/tui';
+import { useSyncExternalStore, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { j as scoreColor, _ as QuitDialog } from '../packem_chunks/bin.js';
+import { u as useMeasuredHeight } from './use-measured-height-CNP0vT4M.js';
+
+function CheckProgressApp({ current, total }) {
+  const { columns: termColumns } = useWindowSize();
+  const cols = termColumns || 80;
+  const percent = total > 0 ? Math.min(1, current / total) : 0;
+  const pctText = `${String(Math.round(percent * 100)).padStart(3)}%`;
+  const counter = `${String(current)}/${String(total)}`;
+  const barWidth = Math.max(10, cols - 2 - pctText.length - 1);
+  const filled = Math.round(barWidth * percent);
+  const empty = barWidth - filled;
+  return jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+    jsxs(Box, { children: [
+      jsx(Spinner, { type: "dots" }),
+      jsx(Text, { children: " Checking catalog dependencies " }),
+      jsx(Text, { dimColor: true, children: counter })
+    ] }),
+    jsxs(Box, { children: [
+      jsx(Text, { color: "cyan", children: "━".repeat(filled) }),
+      jsx(Text, { dimColor: true, children: "─".repeat(empty) }),
+      jsxs(Text, { dimColor: true, children: [
+        " ",
+        pctText
+      ] })
+    ] })
+  ] });
+}
+
+const groupByCatalog = (entries) => {
+  const map = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    const group = map.get(entry.catalogName);
+    if (group) {
+      group.push(entry);
+    } else {
+      map.set(entry.catalogName, [entry]);
+    }
+  }
+  return map;
+};
+const filterEntries = (entries, filterType, filterText) => {
+  let filtered = entries;
+  if (filterType !== "all") {
+    filtered = filterType === "security" ? filtered.filter((e) => e.vulnerabilities && e.vulnerabilities.length > 0 || e.socketReport && e.socketReport.alerts.length > 0) : filtered.filter((e) => e.updateType === filterType);
+  }
+  if (filterText) {
+    const lower = filterText.toLowerCase();
+    filtered = filtered.filter((e) => e.packageName.toLowerCase().includes(lower));
+  }
+  return filtered;
+};
+class UpdateStore {
+  #state;
+  #listeners = /* @__PURE__ */ new Set();
+  #allEntries;
+  #recommendationMap = null;
+  constructor(entries, aiResult = null) {
+    this.#allEntries = entries;
+    if (aiResult) {
+      this.#recommendationMap = new Map(aiResult.recommendations.map((r) => [r.package, r]));
+    }
+    this.#state = {
+      aiResult,
+      allChecked: true,
+      applyProgress: null,
+      checkedEntries: new Set(entries.map((e) => e.packageName)),
+      entries,
+      error: null,
+      filterActive: false,
+      filterText: "",
+      filterType: "all",
+      focusedPanel: "list",
+      groupedByCatalog: groupByCatalog(entries),
+      phase: "browsing",
+      selectedIndex: 0
+    };
+  }
+  // ── React integration ───────────────────────────────────────────
+  getSnapshot = () => this.#state;
+  subscribe = (listener) => {
+    this.#listeners.add(listener);
+    return () => {
+      this.#listeners.delete(listener);
+    };
+  };
+  // ── Derived data ────────────────────────────────────────────────
+  /** Get the currently filtered + visible entries. */
+  getFilteredEntries() {
+    return filterEntries(this.#allEntries, this.#state.filterType, this.#state.filterText);
+  }
+  /** Get AI recommendation for a specific package. */
+  getRecommendation(packageName) {
+    return this.#recommendationMap?.get(packageName);
+  }
+  /** Get the list of checked entries (for apply). */
+  getCheckedEntries() {
+    return this.#allEntries.filter((e) => this.#state.checkedEntries.has(e.packageName));
+  }
+  // ── Navigation ──────────────────────────────────────────────────
+  setSelectedIndex(index) {
+    const filtered = this.getFilteredEntries();
+    const clamped = Math.max(0, Math.min(index, filtered.length - 1));
+    if (clamped !== this.#state.selectedIndex) {
+      this.#emit({ ...this.#state, selectedIndex: clamped });
+    }
+  }
+  setFocusedPanel(panel) {
+    if (panel !== this.#state.focusedPanel) {
+      this.#emit({ ...this.#state, focusedPanel: panel });
+    }
+  }
+  // ── Filtering ───────────────────────────────────────────────────
+  setFilterType(type) {
+    if (type !== this.#state.filterType) {
+      const newEntries = filterEntries(this.#allEntries, type, this.#state.filterText);
+      this.#emit({
+        ...this.#state,
+        entries: newEntries,
+        filterType: type,
+        groupedByCatalog: groupByCatalog(newEntries),
+        selectedIndex: 0
+      });
+    }
+  }
+  setFilter(text) {
+    const newEntries = filterEntries(this.#allEntries, this.#state.filterType, text);
+    this.#emit({
+      ...this.#state,
+      entries: newEntries,
+      filterText: text,
+      groupedByCatalog: groupByCatalog(newEntries),
+      selectedIndex: 0
+    });
+  }
+  setFilterActive(active) {
+    if (active !== this.#state.filterActive) {
+      if (active) {
+        this.#emit({ ...this.#state, filterActive: true });
+      } else {
+        const newEntries = filterEntries(this.#allEntries, this.#state.filterType, "");
+        this.#emit({
+          ...this.#state,
+          entries: newEntries,
+          filterActive: false,
+          filterText: "",
+          groupedByCatalog: groupByCatalog(newEntries),
+          selectedIndex: 0
+        });
+      }
+    }
+  }
+  // ── Selection ───────────────────────────────────────────────────
+  toggleCheck(packageName) {
+    const checked = new Set(this.#state.checkedEntries);
+    if (checked.has(packageName)) {
+      checked.delete(packageName);
+    } else {
+      checked.add(packageName);
+    }
+    this.#emit({
+      ...this.#state,
+      allChecked: checked.size === this.#allEntries.length,
+      checkedEntries: checked
+    });
+  }
+  checkAll() {
+    this.#emit({
+      ...this.#state,
+      allChecked: true,
+      checkedEntries: new Set(this.#allEntries.map((e) => e.packageName))
+    });
+  }
+  uncheckAll() {
+    this.#emit({
+      ...this.#state,
+      allChecked: false,
+      checkedEntries: /* @__PURE__ */ new Set()
+    });
+  }
+  toggleAll() {
+    if (this.#state.allChecked) {
+      this.uncheckAll();
+    } else {
+      this.checkAll();
+    }
+  }
+  // ── Apply lifecycle ─────────────────────────────────────────────
+  startApply() {
+    const checked = this.getCheckedEntries();
+    this.#emit({
+      ...this.#state,
+      applyProgress: { current: 0, total: checked.length },
+      phase: "applying"
+    });
+  }
+  updateApplyProgress(current) {
+    if (this.#state.applyProgress) {
+      this.#emit({
+        ...this.#state,
+        applyProgress: { ...this.#state.applyProgress, current }
+      });
+    }
+  }
+  markDone() {
+    this.#emit({ ...this.#state, phase: "done" });
+  }
+  setError(error) {
+    this.#emit({ ...this.#state, error, phase: "error" });
+  }
+  // ── Internal ────────────────────────────────────────────────────
+  #emit(newState) {
+    this.#state = newState;
+    for (const listener of this.#listeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
+}
+
+const UPDATE_TYPE_COLORS$1 = {
+  major: "red",
+  minor: "yellow",
+  patch: "green"
+};
+const SEVERITY_COLORS = {
+  CRITICAL: "red",
+  HIGH: "red",
+  LOW: "gray",
+  MODERATE: "yellow",
+  UNKNOWN: "gray"
+};
+const SOCKET_SEVERITY_COLORS = {
+  critical: "red",
+  high: "red",
+  low: "gray",
+  medium: "yellow"
+};
+const RISK_COLORS = {
+  critical: "red",
+  high: "red",
+  low: "green",
+  medium: "yellow"
+};
+const ACTION_COLORS = {
+  defer: "gray",
+  review: "yellow",
+  skip: "red",
+  update: "green"
+};
+const PackageDetailPanel = ({ changelogUrl, entry, focused, recommendation, scrollRef }) => {
+  const borderColor = focused ? "white" : "gray";
+  if (!entry) {
+    return jsx(Box, { alignItems: "center", borderColor: "gray", borderStyle: "single", flexDirection: "column", flexGrow: 1, justifyContent: "center", children: jsx(Text, { dimColor: true, children: "No package selected" }) });
+  }
+  const typeColor = UPDATE_TYPE_COLORS$1[entry.updateType] ?? "white";
+  const hasVulnerabilities = entry.vulnerabilities && entry.vulnerabilities.length > 0;
+  const socketScore = entry.socketReport?.score.overall ?? 0;
+  const socketScoreColor = entry.socketReport ? scoreColor(socketScore) : "gray";
+  return jsxs(Box, { borderColor, borderStyle: "single", flexDirection: "column", flexGrow: 1, children: [
+    jsx(Box, { flexShrink: 0, paddingTop: 1, paddingX: 2, children: jsx(Text, { bold: true, color: "white", children: entry.packageName }) }),
+    jsxs(ScrollView, { flexGrow: 1, flexShrink: 1, paddingX: 2, ref: scrollRef, scrollbar: true, scrollbarColor: "gray", scrollbarStyle: "block", children: [
+      jsx(Text, {}),
+      jsxs(Box, { children: [
+        jsx(Box, { width: 12, children: jsx(Text, { dimColor: true, children: "Current:" }) }),
+        jsx(Text, { children: entry.currentRange })
+      ] }),
+      jsxs(Box, { children: [
+        jsx(Box, { width: 12, children: jsx(Text, { dimColor: true, children: "Target:" }) }),
+        jsx(Text, { children: entry.newRange }),
+        jsxs(Text, { bold: true, color: typeColor, children: [
+          " ",
+          "(",
+          entry.updateType,
+          ")"
+        ] })
+      ] }),
+      jsxs(Box, { children: [
+        jsx(Box, { width: 12, children: jsx(Text, { dimColor: true, children: "Version:" }) }),
+        jsx(Text, { children: entry.targetVersion })
+      ] }),
+      jsxs(Box, { children: [
+        jsx(Box, { width: 12, children: jsx(Text, { dimColor: true, children: "Catalog:" }) }),
+        jsx(Text, { children: entry.catalogName })
+      ] }),
+      entry.acceptedRisk && jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+        jsx(Text, { color: "gray", children: "── " }),
+        jsx(Text, { bold: true, color: "gray", children: "ACKNOWLEDGED RISK" }),
+        jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Reason: " }),
+            jsx(Text, { children: entry.acceptedRisk.reason })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Accepted: " }),
+            jsx(Text, { children: entry.acceptedRisk.acceptedAt.slice(0, 10) })
+          ] })
+        ] })
+      ] }),
+      hasVulnerabilities && jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+        jsx(Text, { dimColor: true, children: "── " }),
+        jsx(Text, { bold: true, color: "red", children: "SECURITY" }),
+        jsx(Text, {}),
+        entry.vulnerabilities.map((vuln) => jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+          jsxs(Box, { gap: 1, children: [
+            jsxs(Text, { bold: true, color: SEVERITY_COLORS[vuln.severity] ?? "gray", children: [
+              "⚠",
+              " ",
+              vuln.severity
+            ] }),
+            jsx(Text, { bold: true, children: vuln.id })
+          ] }),
+          jsx(Box, { paddingLeft: 2, children: jsx(Text, { children: vuln.summary }) }),
+          jsxs(Box, { gap: 2, paddingLeft: 2, children: [
+            vuln.cvssScore !== void 0 && jsxs(Text, { dimColor: true, children: [
+              "CVSS:",
+              String(vuln.cvssScore)
+            ] }),
+            vuln.fixedVersions.length > 0 && jsxs(Text, { dimColor: true, children: [
+              "Fixed in:",
+              vuln.fixedVersions.join(", ")
+            ] })
+          ] })
+        ] }, vuln.id))
+      ] }),
+      entry.socketReport && jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+        jsx(Text, { dimColor: true, children: "── " }),
+        jsx(Text, { bold: true, color: "cyan", children: "SOCKET.DEV" }),
+        jsx(Text, {}),
+        jsxs(Box, { gap: 2, children: [
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Overall: " }),
+            jsxs(Text, { bold: true, color: socketScoreColor, children: [
+              String(Math.round(socketScore * 100)),
+              "%"
+            ] })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Supply Chain: " }),
+            jsxs(Text, { children: [
+              String(Math.round(entry.socketReport.score.supplyChain * 100)),
+              "%"
+            ] })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Quality: " }),
+            jsxs(Text, { children: [
+              String(Math.round(entry.socketReport.score.quality * 100)),
+              "%"
+            ] })
+          ] })
+        ] }),
+        jsxs(Box, { gap: 2, children: [
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Maintenance: " }),
+            jsxs(Text, { children: [
+              String(Math.round(entry.socketReport.score.maintenance * 100)),
+              "%"
+            ] })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Vulnerability: " }),
+            jsxs(Text, { children: [
+              String(Math.round(entry.socketReport.score.vulnerability * 100)),
+              "%"
+            ] })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "License: " }),
+            jsxs(Text, { children: [
+              entry.socketReport.license || "unknown",
+              " (",
+              String(Math.round(entry.socketReport.score.license * 100)),
+              "%)"
+            ] })
+          ] })
+        ] }),
+        entry.socketReport.alerts.length > 0 && jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+          jsxs(Text, { bold: true, color: "yellow", children: [
+            "⚠",
+            " ",
+            String(entry.socketReport.alerts.length),
+            " alert",
+            entry.socketReport.alerts.length === 1 ? "" : "s",
+            ":"
+          ] }),
+          entry.socketReport.alerts.map((alert) => jsxs(Box, { gap: 1, paddingLeft: 2, children: [
+            jsxs(Text, { bold: true, color: SOCKET_SEVERITY_COLORS[alert.severity] ?? "gray", children: [
+              "[",
+              alert.severity.toUpperCase(),
+              "]"
+            ] }),
+            jsx(Text, { children: alert.type }),
+            jsxs(Text, { dimColor: true, children: [
+              "(",
+              alert.category,
+              ")"
+            ] })
+          ] }, alert.key))
+        ] })
+      ] }),
+      recommendation && jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+        jsx(Text, { dimColor: true, children: "── " }),
+        jsx(Text, { bold: true, color: "white", children: "AI ANALYSIS" }),
+        jsx(Text, {}),
+        jsxs(Box, { gap: 2, children: [
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Action: " }),
+            jsx(Text, { bold: true, color: ACTION_COLORS[recommendation.action] ?? "white", children: recommendation.action })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Risk: " }),
+            jsx(Text, { bold: true, color: RISK_COLORS[recommendation.riskLevel] ?? "white", children: recommendation.riskLevel })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "Effort: " }),
+            jsx(Text, { bold: true, children: recommendation.effort })
+          ] })
+        ] }),
+        recommendation.reason && jsx(Box, { marginTop: 1, paddingLeft: 2, children: jsx(Text, { children: recommendation.reason }) }),
+        recommendation.breakingChanges.length > 0 && jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, children: [
+          jsx(Text, { bold: true, color: "yellow", children: "Breaking changes:" }),
+          recommendation.breakingChanges.map((change, i) => jsxs(Text, { children: [
+            " ",
+            "•",
+            " ",
+            change
+          ] }, String(i)))
+        ] })
+      ] }),
+      changelogUrl && jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+        jsx(Text, { dimColor: true, children: "── " }),
+        jsx(Text, { bold: true, color: "white", children: "CHANGELOG" }),
+        jsx(Box, { marginTop: 1, paddingLeft: 2, children: jsx(Text, { color: "cyan", underline: true, children: changelogUrl }) })
+      ] }),
+      jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+        jsx(Text, { dimColor: true, children: "── " }),
+        jsx(Text, { bold: true, color: "white", children: "LINKS" }),
+        jsx(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, children: jsxs(Text, { color: "cyan", underline: true, children: [
+          "https://npmx.dev/",
+          entry.packageName
+        ] }) })
+      ] }),
+      !recommendation && jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+        jsx(Text, { dimColor: true, children: "── " }),
+        jsx(Text, { bold: true, color: "white", children: "GUIDANCE" }),
+        jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, children: [
+          entry.updateType === "major" && jsxs(Fragment, { children: [
+            jsxs(Text, { color: "red", children: [
+              "⚠",
+              " Major update — likely contains breaking changes."
+            ] }),
+            jsx(Text, { dimColor: true, children: " Review the changelog before updating." }),
+            jsx(Text, { dimColor: true, children: " Use --changelog to fetch release URLs." })
+          ] }),
+          entry.updateType === "minor" && jsxs(Fragment, { children: [
+            jsxs(Text, { color: "yellow", children: [
+              "ℹ",
+              " Minor update — new features, backward compatible."
+            ] }),
+            jsx(Text, { dimColor: true, children: " Generally safe to update." })
+          ] }),
+          entry.updateType === "patch" && jsxs(Fragment, { children: [
+            jsxs(Text, { color: "green", children: [
+              "✓",
+              " Patch update — bug fixes only."
+            ] }),
+            jsx(Text, { dimColor: true, children: " Safe to update." })
+          ] }),
+          !recommendation && jsx(Text, { dimColor: true, children: " Use --ai to get AI-powered analysis." })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+const UPDATE_TYPE_COLORS = {
+  major: "red",
+  minor: "yellow",
+  patch: "green"
+};
+const FILTER_TABS = [
+  { id: "all", label: "All" },
+  { id: "major", label: "Major" },
+  { id: "minor", label: "Minor" },
+  { id: "patch", label: "Patch" },
+  { id: "security", label: "Security" }
+];
+const PackageRow = ({ checked, entry, isSelected }) => {
+  const typeColor = UPDATE_TYPE_COLORS[entry.updateType] ?? "white";
+  const hasSecurity = entry.vulnerabilities && entry.vulnerabilities.length > 0;
+  const hasSocketAlerts = entry.socketReport && entry.socketReport.alerts.length > 0;
+  const isAcknowledged = Boolean(entry.acceptedRisk);
+  const checkbox = checked ? "☑" : "☐";
+  const scoreText = entry.socketReport ? `${String(Math.round(entry.socketReport.score.overall * 100))}%` : "";
+  const scoreColorName = entry.socketReport ? scoreColor(entry.socketReport.score.overall) : "gray";
+  return jsxs(Box, { flexShrink: 0, height: 1, children: [
+    jsx(Text, { children: isSelected ? ">" : " " }),
+    jsxs(Text, { color: checked ? "white" : "gray", children: [
+      " ",
+      checkbox,
+      " "
+    ] }),
+    hasSecurity || hasSocketAlerts ? jsx(Text, { color: isAcknowledged ? "gray" : "red", children: isAcknowledged ? "✓ " : "⚠ " }) : jsx(Text, { children: "  " }),
+    jsx(Box, { flexGrow: 1, children: jsxs(Text, { bold: isSelected, inverse: isSelected, wrap: "truncate", children: [
+      entry.packageName,
+      isAcknowledged ? " [ack]" : ""
+    ] }) }),
+    scoreText && jsxs(Text, { color: scoreColorName, children: [
+      " ",
+      scoreText
+    ] }),
+    jsxs(Text, { dimColor: true, children: [
+      " ",
+      entry.currentRange
+    ] }),
+    jsxs(Text, { dimColor: true, children: [
+      " ",
+      "→",
+      " "
+    ] }),
+    jsxs(Text, { children: [
+      entry.newRange,
+      " "
+    ] }),
+    jsx(Text, { bold: true, color: typeColor, children: entry.updateType })
+  ] });
+};
+const CatalogHeader = ({ count, name }) => jsxs(Box, { flexShrink: 0, height: 1, marginTop: 1, children: [
+  jsxs(Text, { dimColor: true, children: [
+    "▼",
+    " "
+  ] }),
+  jsx(Text, { bold: true, color: "white", children: name.toUpperCase() }),
+  jsxs(Text, { dimColor: true, children: [
+    " (",
+    count,
+    ")"
+  ] })
+] });
+const PackageListPanel = ({
+  checkedEntries,
+  entries,
+  filterActive,
+  filteredOutCount,
+  filterText,
+  filterType,
+  focused,
+  groupedByCatalog,
+  isDryRun,
+  onViewportHeightChange,
+  scrollOffset,
+  selectedIndex,
+  totalCatalogEntries,
+  totalChecked,
+  totalEntries,
+  viewportHeight
+}) => {
+  const borderColor = focused ? "white" : "gray";
+  const { measuredHeight: measuredViewportHeight, ref: contentRowRef } = useMeasuredHeight(viewportHeight, onViewportHeightChange);
+  let majors = 0;
+  let minors = 0;
+  let patches = 0;
+  let secCount = 0;
+  for (const e of entries) {
+    if (e.updateType === "major") {
+      majors++;
+    } else if (e.updateType === "minor") {
+      minors++;
+    } else {
+      patches++;
+    }
+    if (e.vulnerabilities && e.vulnerabilities.length > 0 || e.socketReport && e.socketReport.alerts.length > 0) {
+      secCount++;
+    }
+  }
+  const summaryParts = [];
+  if (majors > 0) {
+    summaryParts.push(`${majors} major`);
+  }
+  if (minors > 0) {
+    summaryParts.push(`${minors} minor`);
+  }
+  if (patches > 0) {
+    summaryParts.push(`${patches} patch`);
+  }
+  if (secCount > 0) {
+    summaryParts.push(`${secCount} vulnerable`);
+  }
+  const summaryText = summaryParts.length > 0 ? ` (${summaryParts.join(", ")})` : "";
+  let checkedCount = 0;
+  for (const e of entries) {
+    if (checkedEntries.has(e.packageName)) {
+      checkedCount++;
+    }
+  }
+  const rows = [];
+  let flatIndex = 0;
+  for (const [catalogName, catalogEntries] of groupedByCatalog) {
+    rows.push(jsx(CatalogHeader, { count: catalogEntries.length, name: catalogName }, `hdr-${catalogName}`));
+    for (const entry of catalogEntries) {
+      const currentFlatIndex = flatIndex;
+      rows.push(
+        jsx(
+          PackageRow,
+          {
+            checked: checkedEntries.has(entry.packageName),
+            entry,
+            isSelected: currentFlatIndex === selectedIndex
+          },
+          entry.packageName
+        )
+      );
+      flatIndex++;
+    }
+  }
+  let contentHeight = 0;
+  for (const [, catalogEntries] of groupedByCatalog) {
+    contentHeight += 2 + catalogEntries.length;
+  }
+  const showScrollbar = contentHeight > measuredViewportHeight && measuredViewportHeight > 0;
+  return jsxs(Box, { borderColor, borderStyle: "single", flexDirection: "column", flexGrow: 1, children: [
+    jsxs(Box, { flexShrink: 0, gap: 1, paddingX: 1, children: [
+      jsx(Text, { bold: true, inverse: true, children: " VIS " }),
+      jsxs(Text, { wrap: "truncate", children: [
+        totalEntries,
+        totalChecked > 0 ? `/${totalChecked}` : "",
+        " outdated",
+        summaryText,
+        totalCatalogEntries > totalChecked ? ` · ${totalCatalogEntries - totalChecked} dupes` : ""
+      ] }),
+      !isDryRun && checkedCount > 0 && jsxs(Text, { dimColor: true, children: [
+        " —",
+        checkedCount,
+        " selected"
+      ] })
+    ] }),
+    jsx(Box, { flexShrink: 0, paddingX: 1, paddingY: 1, children: jsx(
+      Tabs,
+      {
+        isFocused: focused,
+        keyMap: { next: [], previous: [], useNumbers: false, useTab: false },
+        onChange: () => {
+        },
+        showIndex: false,
+        value: filterType,
+        children: FILTER_TABS.map(({ id, label }) => jsx(Tab, { name: id, children: label }, id))
+      }
+    ) }),
+    filterActive && jsxs(Box, { flexShrink: 0, paddingX: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "/ " }),
+      jsx(Text, { children: filterText }),
+      jsx(Text, { inverse: true, children: " " })
+    ] }),
+    filteredOutCount > 0 && jsx(Box, { flexShrink: 0, paddingX: 1, children: jsxs(Text, { color: "yellow", children: [
+      "⚠",
+      " ",
+      filteredOutCount,
+      " package",
+      filteredOutCount === 1 ? "" : "s",
+      " filtered out by target constraint — press",
+      " ",
+      jsx(Text, { bold: true, color: "white", children: "f" }),
+      " ",
+      "to view"
+    ] }) }),
+    jsxs(Box, { flexDirection: "row", flexGrow: 1, overflow: "hidden", ref: contentRowRef, children: [
+      jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", paddingLeft: 1, children: jsx(Box, { flexDirection: "column", marginTop: -scrollOffset, children: rows }) }),
+      showScrollbar && jsx(Box, { flexShrink: 0, marginLeft: 1, marginRight: 1, children: jsx(
+        ScrollBar,
+        {
+          contentHeight,
+          placement: "inset",
+          scrollOffset,
+          style: "block",
+          viewportHeight: measuredViewportHeight
+        }
+      ) })
+    ] }, `list-${filterType}-${filterText}`)
+  ] });
+};
+
+const MIN_HORIZONTAL_WIDTH = 100;
+const MIN_VIEWPORT_WIDTH = 40;
+const MIN_VIEWPORT_HEIGHT = 10;
+const EMPTY_ENTRIES = [];
+const VisUpdateApp = ({
+  autoExitSeconds = 0,
+  changelogUrls,
+  checkedCount = 0,
+  filteredOutEntries = EMPTY_ENTRIES,
+  isDryRun,
+  store,
+  totalCatalogEntries = 0
+}) => {
+  const { exit } = useApp();
+  const { columns, rows } = useWindowSize();
+  const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const [helpVisible, setHelpVisible] = useState(false);
+  const [filteredOutVisible, setFilteredOutVisible] = useState(false);
+  const helpScrollRef = useRef(null);
+  const filteredOutScrollRef = useRef(null);
+  const detailScrollRef = useRef(null);
+  const confirmScrollRef = useRef(null);
+  const [listScrollOffset, setListScrollOffset] = useState(0);
+  const [confirmVisible, setConfirmVisible] = useState(false);
+  const [quitDialogVisible, setQuitDialogVisible] = useState(false);
+  const filteredEntries = useMemo(() => store.getFilteredEntries(), [state.entries, state.filterType, state.filterText]);
+  const selectedEntry = filteredEntries[state.selectedIndex] ?? null;
+  const selectedRecommendation = selectedEntry ? store.getRecommendation(selectedEntry.packageName) : void 0;
+  const selectedChangelog = selectedEntry && changelogUrls ? changelogUrls.get(selectedEntry.packageName) : void 0;
+  const getRowForIndex = useCallback(
+    (index) => {
+      let row = 0;
+      let count = 0;
+      for (const [, catalogEntries] of state.groupedByCatalog) {
+        row += 2;
+        for (let i = 0; i < catalogEntries.length; i++) {
+          if (count === index) {
+            return row;
+          }
+          row += 1;
+          count++;
+        }
+      }
+      return row;
+    },
+    [state.groupedByCatalog]
+  );
+  const estimatedViewportHeight = Math.max(1, rows - 8 - (state.filterActive ? 1 : 0));
+  const [measuredViewportHeight, setMeasuredViewportHeight] = useState(estimatedViewportHeight);
+  const listViewportHeight = measuredViewportHeight > 0 ? measuredViewportHeight : estimatedViewportHeight;
+  const scrollToIndex = useCallback(
+    (index) => {
+      const targetRow = getRowForIndex(index);
+      setListScrollOffset((current) => {
+        if (targetRow > current + listViewportHeight - 2) {
+          return Math.max(0, targetRow - listViewportHeight + 2);
+        }
+        if (targetRow < current + 1) {
+          return Math.max(0, targetRow - 1);
+        }
+        return current;
+      });
+    },
+    [getRowForIndex, listViewportHeight]
+  );
+  useEffect(() => {
+    detailScrollRef.current?.scrollToTop();
+  }, [selectedEntry?.packageName]);
+  useInput(
+    (input, key) => {
+      if (input === "c" && key.ctrl) {
+        exit();
+        return;
+      }
+      if (quitDialogVisible) {
+        return;
+      }
+      if (filteredOutVisible) {
+        if (key.escape || input === "f" || input === "q") {
+          setFilteredOutVisible(false);
+        } else if (key.downArrow || input === "j") {
+          filteredOutScrollRef.current?.scrollBy(1);
+        } else if (key.upArrow || input === "k") {
+          filteredOutScrollRef.current?.scrollBy(-1);
+        }
+        return;
+      }
+      if (confirmVisible) {
+        if (input === "u" || key.return) {
+          setConfirmVisible(false);
+          store.startApply();
+          exit(store.getCheckedEntries());
+        } else if (key.escape || input === "q") {
+          setConfirmVisible(false);
+        } else if (key.downArrow || input === "j") {
+          confirmScrollRef.current?.scrollBy(1);
+        } else if (key.upArrow || input === "k") {
+          confirmScrollRef.current?.scrollBy(-1);
+        } else if (key.pageDown) {
+          confirmScrollRef.current?.scrollBy(5);
+        } else if (key.pageUp) {
+          confirmScrollRef.current?.scrollBy(-5);
+        }
+        return;
+      }
+      if (helpVisible) {
+        if (key.escape || input === "?") {
+          setHelpVisible(false);
+        } else if (input === "q") {
+          setHelpVisible(false);
+          setQuitDialogVisible(true);
+        } else if (key.downArrow || input === "j") {
+          helpScrollRef.current?.scrollBy(1);
+        } else if (key.upArrow || input === "k") {
+          helpScrollRef.current?.scrollBy(-1);
+        }
+        return;
+      }
+      if (input === "?") {
+        setHelpVisible(true);
+        return;
+      }
+      if (input === "q") {
+        setQuitDialogVisible(true);
+        return;
+      }
+      if (key.tab) {
+        store.setFocusedPanel(state.focusedPanel === "list" ? "detail" : "list");
+        return;
+      }
+      if (state.focusedPanel === "list" && (key.leftArrow || key.rightArrow)) {
+        const tabs = ["all", "major", "minor", "patch", "security"];
+        const currentIndex = tabs.indexOf(state.filterType);
+        const nextIndex = key.rightArrow ? (currentIndex + 1) % tabs.length : (currentIndex - 1 + tabs.length) % tabs.length;
+        setListScrollOffset(0);
+        detailScrollRef.current?.scrollToTop();
+        store.setFilterType(tabs[nextIndex]);
+        return;
+      }
+      if (input === "f" && filteredOutEntries.length > 0) {
+        setFilteredOutVisible((previous) => !previous);
+        return;
+      }
+      if (state.filterActive) {
+        if (key.escape) {
+          store.setFilterActive(false);
+          return;
+        }
+        if (key.return) {
+          store.setFilterActive(false);
+          return;
+        }
+        if (key.backspace) {
+          setListScrollOffset(0);
+          store.setFilter(state.filterText.slice(0, -1));
+          return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+          setListScrollOffset(0);
+          store.setFilter(state.filterText + input);
+          return;
+        }
+        return;
+      }
+      if (state.focusedPanel === "list") {
+        if (key.downArrow || input === "j") {
+          const next = Math.min(state.selectedIndex + 1, filteredEntries.length - 1);
+          store.setSelectedIndex(next);
+          scrollToIndex(next);
+          return;
+        }
+        if (key.upArrow || input === "k") {
+          const next = Math.max(state.selectedIndex - 1, 0);
+          store.setSelectedIndex(next);
+          scrollToIndex(next);
+          return;
+        }
+        if (key.pageDown) {
+          const next = Math.min(state.selectedIndex + 10, filteredEntries.length - 1);
+          store.setSelectedIndex(next);
+          scrollToIndex(next);
+          return;
+        }
+        if (key.pageUp) {
+          const next = Math.max(state.selectedIndex - 10, 0);
+          store.setSelectedIndex(next);
+          scrollToIndex(next);
+          return;
+        }
+        if (key.home) {
+          store.setSelectedIndex(0);
+          setListScrollOffset(0);
+          return;
+        }
+        if (key.end) {
+          const last = filteredEntries.length - 1;
+          store.setSelectedIndex(last);
+          scrollToIndex(last);
+          return;
+        }
+        if (input === " " || key.return) {
+          if (selectedEntry) {
+            store.toggleCheck(selectedEntry.packageName);
+          }
+          return;
+        }
+        if (input === "a") {
+          store.toggleAll();
+          return;
+        }
+        if (input === "/") {
+          store.setFilterActive(true);
+          return;
+        }
+        if (input === "u" && !isDryRun && state.checkedEntries.size > 0) {
+          setConfirmVisible(true);
+          return;
+        }
+        if (key.rightArrow) {
+          store.setFocusedPanel("detail");
+          return;
+        }
+        return;
+      }
+      if (state.focusedPanel === "detail") {
+        if (key.escape || key.leftArrow) {
+          store.setFocusedPanel("list");
+          return;
+        }
+        if (key.downArrow || input === "j") {
+          detailScrollRef.current?.scrollBy(1);
+          return;
+        }
+        if (key.upArrow || input === "k") {
+          detailScrollRef.current?.scrollBy(-1);
+          return;
+        }
+        if (key.pageDown) {
+          detailScrollRef.current?.scrollBy(10);
+          return;
+        }
+        if (key.pageUp) {
+          detailScrollRef.current?.scrollBy(-10);
+          return;
+        }
+        if (key.home) {
+          detailScrollRef.current?.scrollToTop();
+          return;
+        }
+        if (key.end) {
+          detailScrollRef.current?.scrollToBottom();
+        }
+      }
+    },
+    { isActive: true }
+  );
+  if (columns < MIN_VIEWPORT_WIDTH || rows < MIN_VIEWPORT_HEIGHT) {
+    return jsx(Box, { alignItems: "center", height: rows, justifyContent: "center", width: columns, children: jsxs(Text, { color: "yellow", children: [
+      "Terminal too small (",
+      columns,
+      "x",
+      rows,
+      ")"
+    ] }) });
+  }
+  const isHorizontal = columns >= MIN_HORIZONTAL_WIDTH;
+  const footerItems = [
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "q" }),
+      jsx(Text, { dimColor: true, children: "QUIT" })
+    ] }, "q"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "?" }),
+      jsx(Text, { dimColor: true, children: "HELP" })
+    ] }, "?"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+      jsx(Text, { dimColor: true, children: "NAV" })
+    ] }, "nav"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "Space" }),
+      jsx(Text, { dimColor: true, children: "CHECK" })
+    ] }, "sp"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "a" }),
+      jsx(Text, { dimColor: true, children: "ALL" })
+    ] }, "a")
+  ];
+  if (!isDryRun && state.checkedEntries.size > 0) {
+    footerItems.push(
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "green", children: "u" }),
+        jsx(Text, { dimColor: true, children: "APPLY" })
+      ] }, "u")
+    );
+  }
+  if (filteredOutEntries.length > 0) {
+    footerItems.push(
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "yellow", children: "f" }),
+        jsxs(Text, { dimColor: true, children: [
+          "FILTERED (",
+          filteredOutEntries.length,
+          ")"
+        ] })
+      ] }, "fo")
+    );
+  }
+  footerItems.push(
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "←→" }),
+      jsx(Text, { dimColor: true, children: "FILTER" })
+    ] }, "lr"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "/" }),
+      jsx(Text, { dimColor: true, children: "SEARCH" })
+    ] }, "f"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "Tab" }),
+      jsx(Text, { dimColor: true, children: "PANEL" })
+    ] }, "t")
+  );
+  const footer = jsx(Box, { borderBottom: false, borderColor: "gray", borderLeft: false, borderRight: false, borderStyle: "single", flexShrink: 0, children: jsx(Box, { flexWrap: "wrap", gap: 2, paddingX: 1, children: footerItems }) });
+  const helpPopup = jsxs(
+    Dialog,
+    {
+      footer: jsxs(Text, { dimColor: true, children: [
+        jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+        " ",
+        "scroll",
+        " ",
+        jsx(Text, { bold: true, color: "white", children: "?" }),
+        "/",
+        jsx(Text, { bold: true, color: "white", children: "Esc" }),
+        " ",
+        "close"
+      ] }),
+      scrollRef: helpScrollRef,
+      title: "KEYBOARD SHORTCUTS",
+      visible: helpVisible,
+      width: 52,
+      children: [
+        jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "NAVIGATION" })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Box, { width: 24, children: jsxs(Text, { children: [
+              jsxs(Text, { bold: true, color: "white", children: [
+                " ",
+                "↑",
+                "/k"
+              ] }),
+              jsx(Text, { dimColor: true, children: " Move up" })
+            ] }) }),
+            jsxs(Text, { children: [
+              jsxs(Text, { bold: true, color: "white", children: [
+                " ",
+                "↓",
+                "/j"
+              ] }),
+              jsx(Text, { dimColor: true, children: " Move down" })
+            ] })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "Tab"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Switch panel" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "→",
+              "/",
+              "←"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Focus detail/list" })
+          ] })
+        ] }),
+        jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "SELECTION" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "Space"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Toggle check on package" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "a"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Toggle check all" })
+          ] })
+        ] }),
+        jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "FILTERS" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "←→"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Switch filter tab" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "/"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Text filter" })
+          ] }),
+          filteredOutEntries.length > 0 && jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "f"
+            ] }),
+            jsx(Text, { dimColor: true, children: " View filtered-out packages" })
+          ] })
+        ] }),
+        jsxs(Box, { flexDirection: "column", children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "ACTIONS" })
+          ] }),
+          !isDryRun && jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "u"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Apply selected updates" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "q"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Quit" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "?"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Toggle help" })
+          ] })
+        ] })
+      ]
+    }
+  );
+  const checkedList = store.getCheckedEntries();
+  const majorCount = checkedList.filter((e) => e.updateType === "major").length;
+  const confirmFooter = jsxs(Box, { alignItems: "center", flexDirection: "column", children: [
+    majorCount > 0 && jsx(Box, { marginBottom: 1, marginTop: 1, children: jsxs(Text, { color: "yellow", children: [
+      "⚠",
+      " ",
+      majorCount,
+      " major update",
+      majorCount === 1 ? "" : "s",
+      " — review breaking changes"
+    ] }) }),
+    jsxs(Text, { dimColor: true, children: [
+      "Press",
+      " ",
+      jsx(Text, { bold: true, color: "white", children: "u" }),
+      " ",
+      "or",
+      " ",
+      jsx(Text, { bold: true, color: "white", children: "Enter" }),
+      " ",
+      "to confirm,",
+      " ",
+      jsx(Text, { bold: true, color: "white", children: "Esc" }),
+      " ",
+      "to cancel"
+    ] })
+  ] });
+  const confirmDialog = jsx(
+    Dialog,
+    {
+      footer: confirmFooter,
+      scrollRef: confirmScrollRef,
+      title: `Apply ${checkedList.length} update${checkedList.length === 1 ? "" : "s"}?`,
+      visible: confirmVisible,
+      width: 70,
+      children: checkedList.map((e) => jsxs(Box, { gap: 1, children: [
+        jsxs(Text, { children: [
+          " ",
+          e.packageName
+        ] }),
+        jsxs(Text, { dimColor: true, children: [
+          e.currentRange,
+          " ",
+          "→",
+          " ",
+          e.newRange
+        ] }),
+        jsx(Text, { bold: true, color: e.updateType === "major" ? "red" : e.updateType === "minor" ? "yellow" : "green", children: e.updateType })
+      ] }, e.packageName))
+    }
+  );
+  const filteredOutDialog = filteredOutEntries.length > 0 ? jsx(
+    Dialog,
+    {
+      footer: jsxs(Text, { dimColor: true, children: [
+        jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+        " ",
+        "scroll",
+        "  ",
+        jsx(Text, { bold: true, color: "white", children: "f" }),
+        "/",
+        jsx(Text, { bold: true, color: "white", children: "Esc" }),
+        " ",
+        "close"
+      ] }),
+      scrollRef: filteredOutScrollRef,
+      title: `${filteredOutEntries.length} PACKAGE${filteredOutEntries.length === 1 ? "" : "S"} FILTERED BY TARGET`,
+      visible: filteredOutVisible,
+      width: 70,
+      children: jsxs(Box, { flexDirection: "column", children: [
+        jsx(Box, { marginBottom: 1, children: jsxs(Text, { dimColor: true, children: [
+          "These packages have newer versions available but are excluded by the current target constraint. Use",
+          " ",
+          jsx(Text, { bold: true, color: "white", children: "--target latest" }),
+          " ",
+          "to include them."
+        ] }) }),
+        filteredOutEntries.map((e) => jsxs(Box, { gap: 1, children: [
+          jsxs(Text, { children: [
+            " ",
+            e.packageName
+          ] }),
+          jsxs(Text, { dimColor: true, children: [
+            e.currentRange,
+            " ",
+            "→",
+            " ",
+            e.newRange
+          ] }),
+          jsx(Text, { bold: true, color: e.updateType === "major" ? "red" : e.updateType === "minor" ? "yellow" : "green", children: e.updateType })
+        ] }, e.packageName))
+      ] })
+    }
+  ) : null;
+  const listPanel = jsx(
+    PackageListPanel,
+    {
+      checkedEntries: state.checkedEntries,
+      entries: filteredEntries,
+      filterActive: state.filterActive,
+      filteredOutCount: filteredOutEntries.length,
+      filterText: state.filterText,
+      filterType: state.filterType,
+      focused: state.focusedPanel === "list",
+      groupedByCatalog: state.groupedByCatalog,
+      isDryRun,
+      onViewportHeightChange: setMeasuredViewportHeight,
+      scrollOffset: listScrollOffset,
+      selectedIndex: state.selectedIndex,
+      totalCatalogEntries,
+      totalChecked: checkedCount,
+      totalEntries: filteredEntries.length,
+      viewportHeight: listViewportHeight
+    }
+  );
+  const detailPanel = jsx(
+    PackageDetailPanel,
+    {
+      changelogUrl: selectedChangelog,
+      entry: selectedEntry,
+      focused: state.focusedPanel === "detail",
+      recommendation: selectedRecommendation,
+      scrollRef: detailScrollRef
+    }
+  );
+  if (isHorizontal) {
+    const detailWidth = Math.floor(columns * 0.35);
+    return jsxs(Box, { flexDirection: "column", height: rows, width: columns, children: [
+      jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [
+        jsx(Box, { flexGrow: 1, children: listPanel }),
+        jsx(Box, { width: detailWidth, children: detailPanel })
+      ] }),
+      footer,
+      confirmDialog,
+      filteredOutDialog,
+      jsx(
+        QuitDialog,
+        {
+          autoExitSeconds: autoExitSeconds || 3,
+          onCancel: () => {
+            setQuitDialogVisible(false);
+          },
+          visible: quitDialogVisible
+        }
+      ),
+      helpPopup
+    ] });
+  }
+  const listHeight = Math.floor(rows * 0.55);
+  return jsxs(Box, { flexDirection: "column", height: rows, width: columns, children: [
+    jsx(Box, { height: listHeight, children: listPanel }),
+    jsx(Box, { flexGrow: 1, children: detailPanel }),
+    footer,
+    confirmDialog,
+    filteredOutDialog,
+    jsx(
+      QuitDialog,
+      {
+        autoExitSeconds: autoExitSeconds || 3,
+        onCancel: () => {
+          setQuitDialogVisible(false);
+        },
+        visible: quitDialogVisible
+      }
+    ),
+    helpPopup
+  ] });
+};
+
+export { CheckProgressApp as C, UpdateStore as U, VisUpdateApp as V };