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

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

@@ -1,1316 +0,0 @@
-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 };