unity-hub-cli 0.9.0 → 0.10.1

package/dist/index.js

@@ -621,55 +621,136 @@ var UnityTempDirectoryCleaner = class {
 
 // src/presentation/App.tsx
 import clipboard from "clipboardy";
-import { Box, Text, useApp, useInput, useStdout } from "ink";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { Box as Box5, Text as Text3, useApp, useInput, useStdout as useStdout2 } from "ink";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
 
-// src/infrastructure/config.ts
-import { mkdir, readFile as readFile3, writeFile as writeFile2 } from "fs/promises";
-var defaultPreferences = {
-  favoritesFirst: true,
-  primary: "updated",
-  direction: "desc"
-};
-var getConfigDir = () => {
-  const home = process.env.HOME ?? "";
-  return `${home}/Library/Application Support/UnityHubCli`;
+// src/presentation/components/LayoutManager.tsx
+import { Box } from "ink";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getLayoutMode = () => {
+  const value = process.env.UNITYHUBCLI_LAYOUT;
+  if (value === "right") return "rightPanel";
+  if (value === "screen") return "screenSwitch";
+  return "screenSwitch";
 };
-var getConfigPath = () => `${getConfigDir()}/config.json`;
-var isValidPrimary = (value) => value === "updated" || value === "name";
-var isValidDirection = (value) => value === "asc" || value === "desc";
-var sanitizePreferences = (input) => {
-  if (!input || typeof input !== "object") {
-    return defaultPreferences;
+var LayoutManager = ({
+  layoutMode,
+  panelVisible,
+  list,
+  panel,
+  statusBar
+}) => {
+  if (layoutMode === "rightPanel") {
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+        /* @__PURE__ */ jsx(Box, { flexGrow: 1, children: list }),
+        panelVisible ? /* @__PURE__ */ jsx(Box, { marginLeft: 1, children: panel }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Box, { children: statusBar })
+    ] });
   }
-  const record = input;
-  const favoritesFirst = typeof record.favoritesFirst === "boolean" ? record.favoritesFirst : defaultPreferences.favoritesFirst;
-  const primary = isValidPrimary(record.primary) ? record.primary : defaultPreferences.primary;
-  const direction = isValidDirection(record.direction) ? record.direction : defaultPreferences.direction;
-  return { favoritesFirst, primary, direction };
+  if (layoutMode === "screenSwitch") {
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(Box, { children: panelVisible ? panel : list }),
+      /* @__PURE__ */ jsx(Box, { children: statusBar })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Box, { children: list }),
+    panelVisible ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: panel }) : null,
+    /* @__PURE__ */ jsx(Box, { children: statusBar })
+  ] });
 };
-var readSortPreferences = async () => {
-  try {
-    const content = await readFile3(getConfigPath(), "utf8");
-    const json = JSON.parse(content);
-    return sanitizePreferences(json);
-  } catch {
-    return defaultPreferences;
+
+// src/presentation/components/ProjectList.tsx
+import { Box as Box3 } from "ink";
+import { useMemo } from "react";
+
+// src/presentation/utils/path.ts
+var homeDirectory = process.env.HOME ?? process.env.USERPROFILE ?? "";
+var normalizedHomeDirectory = homeDirectory.replace(/\\/g, "/");
+var homePrefix = normalizedHomeDirectory ? `${normalizedHomeDirectory}/` : "";
+var shortenHomePath = (targetPath) => {
+  if (!normalizedHomeDirectory) {
+    return targetPath;
+  }
+  const normalizedTarget = targetPath.replace(/\\/g, "/");
+  if (normalizedTarget === normalizedHomeDirectory) {
+    return "~";
   }
+  if (homePrefix && normalizedTarget.startsWith(homePrefix)) {
+    return `~/${normalizedTarget.slice(homePrefix.length)}`;
+  }
+  return targetPath;
 };
-var writeSortPreferences = async (prefs) => {
-  try {
-    await mkdir(getConfigDir(), { recursive: true });
-  } catch {
+var buildCdCommand = (targetPath) => {
+  if (process.platform === "win32") {
+    const escapedForWindows = targetPath.replace(/"/g, '""');
+    return `cd "${escapedForWindows}"`;
   }
-  const sanitized = sanitizePreferences(prefs);
-  const json = JSON.stringify(sanitized, void 0, 2);
-  await writeFile2(getConfigPath(), json, "utf8");
+  const escapedForPosix = targetPath.replace(/'/g, "'\\''");
+  return `cd '${escapedForPosix}'`;
 };
-var getDefaultSortPreferences = () => defaultPreferences;
 
-// src/presentation/App.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/presentation/components/ProjectRow.tsx
+import { Box as Box2, Text, useStdout } from "ink";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProjectRow = ({
+  isSelected,
+  selectionBar,
+  projectName,
+  projectColor,
+  versionLabel,
+  updatedText,
+  statusLabel,
+  statusColor,
+  branchLine,
+  pathLine,
+  showBranch,
+  showPath,
+  scrollbar
+}) => {
+  const { stdout } = useStdout();
+  const computedCenterWidth = typeof stdout?.columns === "number" ? Math.max(0, stdout.columns - 6) : void 0;
+  const centerWidth = typeof computedCenterWidth === "number" ? Math.max(0, computedCenterWidth - (isSelected ? 1 : 0)) : void 0;
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "row", children: [
+    /* @__PURE__ */ jsxs2(Box2, { width: 1, flexDirection: "column", alignItems: "center", marginLeft: 0, children: [
+      /* @__PURE__ */ jsx2(Text, { color: isSelected ? "green" : void 0, children: selectionBar }),
+      showBranch ? /* @__PURE__ */ jsx2(Text, { color: isSelected ? "green" : void 0, children: selectionBar }) : null,
+      showPath ? /* @__PURE__ */ jsx2(Text, { color: isSelected ? "green" : void 0, children: selectionBar }) : null
+    ] }),
+    /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginLeft: isSelected ? 2 : 1, width: centerWidth, children: [
+      /* @__PURE__ */ jsxs2(Text, { wrap: "truncate", children: [
+        /* @__PURE__ */ jsx2(Text, { color: projectColor, bold: true, children: projectName }),
+        /* @__PURE__ */ jsxs2(Text, { children: [
+          " ",
+          versionLabel
+        ] }),
+        updatedText ? /* @__PURE__ */ jsx2(Text, { children: `  ${updatedText}` }) : null,
+        statusLabel && statusColor ? /* @__PURE__ */ jsx2(Text, { color: statusColor, children: `  ${statusLabel}` }) : null
+      ] }),
+      showBranch ? /* @__PURE__ */ jsx2(Text, { color: "#e3839c", wrap: "truncate", children: branchLine }) : null,
+      showPath ? /* @__PURE__ */ jsx2(Text, { color: "#719bd8", wrap: "truncate", children: pathLine }) : null,
+      /* @__PURE__ */ jsx2(Text, { children: " " })
+    ] }),
+    /* @__PURE__ */ jsxs2(Box2, { marginLeft: 1, width: 1, flexDirection: "column", alignItems: "center", children: [
+      /* @__PURE__ */ jsx2(Text, { children: scrollbar.title }),
+      showBranch ? /* @__PURE__ */ jsx2(Text, { children: scrollbar.branch }) : null,
+      showPath ? /* @__PURE__ */ jsx2(Text, { children: scrollbar.path }) : null,
+      /* @__PURE__ */ jsx2(Text, { children: scrollbar.spacer })
+    ] })
+  ] });
+};
+
+// src/presentation/components/ProjectList.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PROJECT_COLOR = "#abd8e7";
+var LOCK_COLOR = "yellow";
+var STATUS_LABELS = {
+  idle: "",
+  running: "[running]",
+  crashed: "[crash]"
+};
 var extractRootFolder = (repository) => {
   if (!repository?.root) {
     return void 0;
@@ -680,13 +761,13 @@ var extractRootFolder = (repository) => {
   }
   return segments[segments.length - 1];
 };
-var formatProjectName = (project, repository, useGitRootName) => {
+var formatProjectName = (projectTitle, repository, useGitRootName) => {
   if (!useGitRootName) {
-    return project.title;
+    return projectTitle;
   }
   const rootFolder = extractRootFolder(repository);
   if (!rootFolder) {
-    return project.title;
+    return projectTitle;
   }
   return rootFolder;
 };
@@ -750,76 +831,269 @@ var formatUpdatedText = (lastModified) => {
   }
   return `${UPDATED_LABEL} ${relativeTime}`;
 };
-var homeDirectory = process.env.HOME ?? "";
-var homePrefix = homeDirectory ? `${homeDirectory}/` : "";
-var minimumVisibleProjectCount = 4;
-var defaultHintMessage = "Select: j/k \xB7 Open: o \xB7 Quit: q \xB7 Refresh: r \xB7 CopyPath: c \xB7 Sort: s \xB7 Close: ctrl + c";
-var PROJECT_COLOR = "#abd8e7";
-var BRANCH_COLOR = "#e3839c";
-var PATH_COLOR = "#719bd8";
-var LOCK_COLOR = "yellow";
-var STATUS_LABELS = {
-  idle: "",
-  running: "[running]",
-  crashed: "[crash]"
+var ProjectList = ({
+  visibleProjects,
+  startIndex,
+  selectedIndex,
+  linesPerProject,
+  showBranch,
+  showPath,
+  useGitRootName,
+  releasedProjects,
+  launchedProjects,
+  totalProjects
+}) => {
+  const scrollbarChars = useMemo(() => {
+    const totalLines = totalProjects * linesPerProject;
+    const windowProjects = visibleProjects.length;
+    const visibleLines = windowProjects * linesPerProject;
+    if (totalLines === 0 || visibleLines === 0) {
+      return [];
+    }
+    if (totalLines <= visibleLines) {
+      return Array.from({ length: visibleLines }, () => "\u2588");
+    }
+    const trackLength = visibleLines;
+    const sliderSize = Math.max(1, Math.round(visibleLines / totalLines * trackLength));
+    const maxSliderStart = Math.max(0, trackLength - sliderSize);
+    const topLine = startIndex * linesPerProject;
+    const denominator = Math.max(1, totalLines - visibleLines);
+    const sliderStart = Math.min(
+      maxSliderStart,
+      Math.round(topLine / denominator * maxSliderStart)
+    );
+    return Array.from({ length: trackLength }, (_, position) => {
+      if (position >= sliderStart && position < sliderStart + sliderSize) {
+        return "\u2588";
+      }
+      return "|";
+    });
+  }, [linesPerProject, startIndex, totalProjects, visibleProjects.length]);
+  const rows = useMemo(() => {
+    return visibleProjects.map(({ project, repository, launchStatus }, offset) => {
+      const rowIndex = startIndex + offset;
+      const isSelected = rowIndex === selectedIndex;
+      const selectionBar = isSelected ? "\u2503" : " ";
+      const projectName = formatProjectName(project.title, repository, useGitRootName);
+      const versionLabel = `(${project.version.value})`;
+      const updatedText = formatUpdatedText(project.lastModified);
+      const pathLine = shortenHomePath(project.path);
+      const branchLine = formatBranch(repository?.branch);
+      const hasReleasedLock = releasedProjects.has(project.id);
+      const isLocallyLaunched = launchedProjects.has(project.id);
+      const displayStatus = (() => {
+        if (isLocallyLaunched) {
+          return "running";
+        }
+        if (hasReleasedLock) {
+          return "idle";
+        }
+        return launchStatus;
+      })();
+      const baseScrollbarIndex = offset * linesPerProject;
+      const titleScrollbar = scrollbarChars[baseScrollbarIndex] ?? " ";
+      const branchScrollbar = showBranch ? scrollbarChars[baseScrollbarIndex + 1] ?? " " : " ";
+      const pathScrollbar = showPath ? scrollbarChars[baseScrollbarIndex + 1 + (showBranch ? 1 : 0)] ?? " " : " ";
+      const spacerScrollbar = scrollbarChars[baseScrollbarIndex + linesPerProject - 1] ?? " ";
+      const statusLabel = STATUS_LABELS[displayStatus];
+      const statusColor = displayStatus === "running" ? LOCK_COLOR : displayStatus === "crashed" ? "red" : void 0;
+      return /* @__PURE__ */ jsx3(
+        ProjectRow,
+        {
+          isSelected,
+          selectionBar,
+          projectName,
+          projectColor: PROJECT_COLOR,
+          versionLabel,
+          updatedText,
+          statusLabel,
+          statusColor,
+          branchLine,
+          pathLine,
+          showBranch,
+          showPath,
+          scrollbar: {
+            title: titleScrollbar,
+            branch: branchScrollbar,
+            path: pathScrollbar,
+            spacer: spacerScrollbar
+          }
+        },
+        project.id
+      );
+    });
+  }, [
+    launchedProjects,
+    releasedProjects,
+    scrollbarChars,
+    selectedIndex,
+    showBranch,
+    showPath,
+    startIndex,
+    useGitRootName,
+    visibleProjects,
+    linesPerProject
+  ]);
+  return /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", children: rows.length === 0 ? null : rows });
 };
-var shortenHomePath = (targetPath) => {
-  if (!homeDirectory) {
-    return targetPath;
-  }
-  if (targetPath === homeDirectory) {
-    return "~";
-  }
-  if (homePrefix && targetPath.startsWith(homePrefix)) {
-    return `~/${targetPath.slice(homePrefix.length)}`;
+
+// src/presentation/components/SortPanel.tsx
+import { Box as Box4, Text as Text2 } from "ink";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var lineForPrimary = (primary) => {
+  return `Primary: ${primary === "updated" ? "Updated" : "Name (Git root)"}`;
+};
+var lineForDirection = (prefs) => {
+  if (prefs.primary === "updated") {
+    return `Direction: ${prefs.direction === "desc" ? "New to Old" : "Old to New"}`;
   }
-  return targetPath;
+  return `Direction: ${prefs.direction === "asc" ? "A to Z" : "Z to A"}`;
 };
-var buildCdCommand = (targetPath) => {
-  return `cd ${targetPath}`;
+var lineForFavorites = (favoritesFirst) => {
+  return `Favorites first: ${favoritesFirst ? "ON" : "OFF"}`;
 };
-var getCopyTargetPath = (view) => {
-  const root = view.repository?.root;
-  return root && root.length > 0 ? root : view.project.path;
+var SortPanel = ({ sortPreferences, focusedIndex, width }) => {
+  const primaryLine = lineForPrimary(sortPreferences.primary);
+  const directionLine = lineForDirection(sortPreferences);
+  const favoritesLine = lineForFavorites(sortPreferences.favoritesFirst);
+  const Item = ({ label, selected }) => {
+    const prefix = selected ? "> " : "  ";
+    return /* @__PURE__ */ jsxs3(Text2, { children: [
+      selected ? /* @__PURE__ */ jsx4(Text2, { color: "green", children: prefix }) : prefix,
+      label
+    ] });
+  };
+  return /* @__PURE__ */ jsxs3(
+    Box4,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "green",
+      paddingX: 1,
+      width,
+      children: [
+        /* @__PURE__ */ jsx4(Item, { label: primaryLine, selected: focusedIndex === 0 }),
+        /* @__PURE__ */ jsx4(Item, { label: directionLine, selected: focusedIndex === 1 }),
+        /* @__PURE__ */ jsx4(Item, { label: favoritesLine, selected: focusedIndex === 2 })
+      ]
+    }
+  );
 };
-var isControl = (code) => code >= 0 && code < 32 || code >= 127 && code < 160;
-var isFullwidth = (code) => {
-  if (code >= 4352 && (code <= 4447 || // Hangul Jamo
-  code === 9001 || code === 9002 || code >= 11904 && code <= 42191 && code !== 12351 || // CJK ... Yi
-  code >= 44032 && code <= 55203 || // Hangul Syllables
-  code >= 63744 && code <= 64255 || // CJK Compatibility Ideographs
-  code >= 65040 && code <= 65049 || // Vertical forms
-  code >= 65072 && code <= 65135 || // CJK Compatibility Forms
-  code >= 65280 && code <= 65376 || // Fullwidth forms
-  code >= 65504 && code <= 65510 || code >= 127744 && code <= 128591 || // Emojis
-  code >= 129280 && code <= 129535 || code >= 131072 && code <= 262141)) {
-    return true;
+
+// src/presentation/hooks/useSortPreferences.ts
+import { useEffect, useState } from "react";
+
+// src/infrastructure/config.ts
+import { mkdir, readFile as readFile3, writeFile as writeFile2 } from "fs/promises";
+var defaultPreferences = {
+  favoritesFirst: true,
+  primary: "updated",
+  direction: "desc"
+};
+var getConfigDir = () => {
+  const home = process.env.HOME ?? "";
+  return `${home}/Library/Application Support/UnityHubCli`;
+};
+var getConfigPath = () => `${getConfigDir()}/config.json`;
+var isValidPrimary = (value) => value === "updated" || value === "name";
+var isValidDirection = (value) => value === "asc" || value === "desc";
+var sanitizePreferences = (input) => {
+  if (!input || typeof input !== "object") {
+    return defaultPreferences;
+  }
+  const record = input;
+  const favoritesFirst = typeof record.favoritesFirst === "boolean" ? record.favoritesFirst : defaultPreferences.favoritesFirst;
+  const primary = isValidPrimary(record.primary) ? record.primary : defaultPreferences.primary;
+  const direction = isValidDirection(record.direction) ? record.direction : defaultPreferences.direction;
+  return { favoritesFirst, primary, direction };
+};
+var readSortPreferences = async () => {
+  try {
+    const content = await readFile3(getConfigPath(), "utf8");
+    const json = JSON.parse(content);
+    return sanitizePreferences(json);
+  } catch {
+    return defaultPreferences;
+  }
+};
+var writeSortPreferences = async (prefs) => {
+  try {
+    await mkdir(getConfigDir(), { recursive: true });
+  } catch {
   }
-  return false;
+  const sanitized = sanitizePreferences(prefs);
+  const json = JSON.stringify(sanitized, void 0, 2);
+  await writeFile2(getConfigPath(), json, "utf8");
+};
+var getDefaultSortPreferences = () => defaultPreferences;
+
+// src/presentation/hooks/useSortPreferences.ts
+var useSortPreferences = () => {
+  const [sortPreferences, setSortPreferences] = useState(getDefaultSortPreferences());
+  const [isLoaded, setIsLoaded] = useState(false);
+  useEffect(() => {
+    void (async () => {
+      try {
+        const prefs = await readSortPreferences();
+        setSortPreferences(prefs);
+      } finally {
+        setIsLoaded(true);
+      }
+    })();
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      return;
+    }
+    void writeSortPreferences(sortPreferences);
+  }, [isLoaded, sortPreferences]);
+  return { sortPreferences, setSortPreferences, isLoaded };
 };
-var charWidth = (char) => {
-  const code = char.codePointAt(0);
-  if (code === void 0) return 0;
-  if (isControl(code)) return 0;
-  return isFullwidth(code) ? 2 : 1;
+
+// src/presentation/hooks/useVisibleCount.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var useVisibleCount = (stdout, linesPerProject, panelVisible, panelHeight, minimumVisibleProjectCount2) => {
+  const compute = () => {
+    if (!stdout || typeof stdout.columns !== "number" || typeof stdout.rows !== "number") {
+      return minimumVisibleProjectCount2;
+    }
+    const borderRows = 2;
+    const hintRows = 1;
+    const reservedRows = borderRows + hintRows + (panelVisible ? panelHeight : 0);
+    const availableRows = Math.max(0, stdout.rows - reservedRows);
+    const rowsPerProject = Math.max(linesPerProject, 1);
+    const calculatedCount = Math.max(1, Math.floor(availableRows / rowsPerProject));
+    return calculatedCount;
+  };
+  const [visibleCount, setVisibleCount] = useState2(compute);
+  useEffect2(() => {
+    const updateVisible = () => setVisibleCount(compute());
+    updateVisible();
+    stdout?.on("resize", updateVisible);
+    return () => {
+      stdout?.off("resize", updateVisible);
+    };
+  }, [stdout, linesPerProject, panelVisible, panelHeight]);
+  return visibleCount;
 };
-var stringWidth = (text) => {
-  let width = 0;
-  for (const ch of text) {
-    width += charWidth(ch);
+
+// src/presentation/App.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var extractRootFolder2 = (repository) => {
+  if (!repository?.root) {
+    return void 0;
   }
-  return width;
+  const segments = repository.root.split("/").filter((segment) => segment.length > 0);
+  if (segments.length === 0) {
+    return void 0;
+  }
+  return segments[segments.length - 1];
 };
-var truncateToWidth = (text, maxWidth) => {
-  let width = 0;
-  let result = "";
-  for (const ch of text) {
-    const w = charWidth(ch);
-    if (width + w > maxWidth) break;
-    result += ch;
-    width += w;
-  }
-  return result;
+var minimumVisibleProjectCount = 4;
+var defaultHintMessage = "Select: j/k \xB7 Open: o \xB7 Quit: q \xB7 Refresh: r \xB7 CopyPath: c \xB7 Sort: s \xB7 Close: ctrl + c";
+var getCopyTargetPath = (view) => {
+  const root = view.repository?.root;
+  return root && root.length > 0 ? root : view.project.path;
 };
 var App = ({
   projects,
@@ -831,31 +1105,24 @@ var App = ({
   showPath = true
 }) => {
   const { exit } = useApp();
-  const { stdout } = useStdout();
-  const [projectViews, setProjectViews] = useState(projects);
-  const [visibleCount, setVisibleCount] = useState(minimumVisibleProjectCount);
-  const [index, setIndex] = useState(0);
-  const [hint, setHint] = useState(defaultHintMessage);
-  const [windowStart, setWindowStart] = useState(0);
-  const [releasedProjects, setReleasedProjects] = useState(/* @__PURE__ */ new Set());
-  const [launchedProjects, setLaunchedProjects] = useState(/* @__PURE__ */ new Set());
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [isSortMenuOpen, setIsSortMenuOpen] = useState(false);
-  const [sortMenuIndex, setSortMenuIndex] = useState(0);
-  const [sortPreferences, setSortPreferences] = useState(getDefaultSortPreferences());
-  const [isSortPreferencesLoaded, setIsSortPreferencesLoaded] = useState(false);
-  const [renderEpoch, setRenderEpoch] = useState(0);
+  const { stdout } = useStdout2();
+  const [projectViews, setProjectViews] = useState3(projects);
+  const [isSortMenuOpen, setIsSortMenuOpen] = useState3(false);
   const linesPerProject = (showBranch ? 1 : 0) + (showPath ? 1 : 0) + 2;
-  const forceFullRepaint = useCallback(() => {
-    if (!stdout) {
-      return;
-    }
-    stdout.write("\x1B[2J\x1B[3J\x1B[H");
-  }, [stdout]);
-  const sortedProjects = useMemo(() => {
+  const panelHeight = 6;
+  const visibleCount = useVisibleCount(stdout, linesPerProject, isSortMenuOpen, panelHeight, minimumVisibleProjectCount);
+  const [index, setIndex] = useState3(0);
+  const [hint, setHint] = useState3(defaultHintMessage);
+  const [windowStart, setWindowStart] = useState3(0);
+  const [releasedProjects, setReleasedProjects] = useState3(/* @__PURE__ */ new Set());
+  const [launchedProjects, setLaunchedProjects] = useState3(/* @__PURE__ */ new Set());
+  const [isRefreshing, setIsRefreshing] = useState3(false);
+  const [sortMenuIndex, setSortMenuIndex] = useState3(0);
+  const { sortPreferences, setSortPreferences } = useSortPreferences();
+  const sortedProjects = useMemo2(() => {
     const fallbackTime = 0;
     const getNameKey = (view) => {
-      const rootName = extractRootFolder(view.repository);
+      const rootName = extractRootFolder2(view.repository);
       const base = rootName || view.project.title;
       return base.toLocaleLowerCase();
     };
@@ -904,24 +1171,7 @@ var App = ({
       return tieBreaker(a).localeCompare(tieBreaker(b));
     });
   }, [projectViews, sortPreferences]);
-  useEffect(() => {
-    void (async () => {
-      try {
-        const prefs = await readSortPreferences();
-        setSortPreferences(prefs);
-      } catch {
-      } finally {
-        setIsSortPreferencesLoaded(true);
-      }
-    })();
-  }, []);
-  useEffect(() => {
-    if (!isSortPreferencesLoaded) {
-      return;
-    }
-    void writeSortPreferences(sortPreferences);
-  }, [sortPreferences, isSortPreferencesLoaded]);
-  useEffect(() => {
+  useEffect3(() => {
     const handleSigint = () => {
       exit();
     };
@@ -930,26 +1180,6 @@ var App = ({
       process.off("SIGINT", handleSigint);
     };
   }, [exit]);
-  useEffect(() => {
-    const updateVisibleCount = () => {
-      if (!stdout || typeof stdout.columns !== "number" || typeof stdout.rows !== "number") {
-        setVisibleCount(minimumVisibleProjectCount);
-        return;
-      }
-      const borderRows = 2;
-      const hintRows = 1;
-      const reservedRows = borderRows + hintRows;
-      const availableRows = Math.max(0, stdout.rows - reservedRows);
-      const rowsPerProject = Math.max(linesPerProject, 1);
-      const calculatedCount = Math.max(1, Math.floor(availableRows / rowsPerProject));
-      setVisibleCount(calculatedCount);
-    };
-    updateVisibleCount();
-    stdout?.on("resize", updateVisibleCount);
-    return () => {
-      stdout?.off("resize", updateVisibleCount);
-    };
-  }, [linesPerProject, stdout]);
   const limit = Math.max(1, visibleCount);
   const move = useCallback(
     (delta) => {
@@ -994,7 +1224,7 @@ var App = ({
     },
     [index, limit, sortedProjects.length]
   );
-  useEffect(() => {
+  useEffect3(() => {
     setWindowStart((prevStart) => {
       if (sortedProjects.length <= limit) {
         return prevStart === 0 ? prevStart : 0;
@@ -1137,7 +1367,7 @@ var App = ({
       }, 3e3);
     }
   }, [index, onTerminate, sortedProjects]);
-  useEffect(() => {
+  useEffect3(() => {
     setProjectViews(projects);
     setReleasedProjects(/* @__PURE__ */ new Set());
     setLaunchedProjects(/* @__PURE__ */ new Set());
@@ -1198,10 +1428,7 @@ var App = ({
   useInput((input, key) => {
     if (isSortMenuOpen) {
       if (key.escape || input === "\x1B") {
-        clearOverlay();
-        forceFullRepaint();
         setIsSortMenuOpen(false);
-        setRenderEpoch((prev) => prev + 1);
         return;
       }
       if (input === "j") {
@@ -1262,7 +1489,7 @@ var App = ({
       copyProjectPath();
     }
   });
-  const { startIndex, visibleProjects } = useMemo(() => {
+  const { startIndex, visibleProjects } = useMemo2(() => {
     if (sortedProjects.length <= limit) {
       return {
         startIndex: 0,
@@ -1277,219 +1504,53 @@ var App = ({
       visibleProjects: sortedProjects.slice(clampedStart, end)
     };
   }, [limit, sortedProjects, windowStart]);
-  const scrollbarChars = useMemo(() => {
-    const totalProjects = projectViews.length;
-    const totalLines = totalProjects * linesPerProject;
-    const windowProjects = visibleProjects.length;
-    const visibleLines = windowProjects * linesPerProject;
-    if (totalLines === 0 || visibleLines === 0) {
-      return [];
-    }
-    if (totalLines <= visibleLines) {
-      return Array.from({ length: visibleLines }, () => "\u2588");
-    }
-    const trackLength = visibleLines;
-    const sliderSize = Math.max(1, Math.round(visibleLines / totalLines * trackLength));
-    const maxSliderStart = Math.max(0, trackLength - sliderSize);
-    const topLine = startIndex * linesPerProject;
-    const denominator = Math.max(1, totalLines - visibleLines);
-    const sliderStart = Math.min(
-      maxSliderStart,
-      Math.round(topLine / denominator * maxSliderStart)
-    );
-    return Array.from({ length: trackLength }, (_, position) => {
-      if (position >= sliderStart && position < sliderStart + sliderSize) {
-        return "\u2588";
-      }
-      return "|";
-    });
-  }, [linesPerProject, projectViews.length, startIndex, visibleProjects]);
-  const rows = useMemo(() => {
-    return visibleProjects.map(({ project, repository, launchStatus }, offset) => {
-      const rowIndex = startIndex + offset;
-      const isSelected = rowIndex === index;
-      const selectionBar = isSelected ? "\u2503" : " ";
-      const projectName = formatProjectName(project, repository, useGitRootName);
-      const versionLabel = `(${project.version.value})`;
-      const updatedText = formatUpdatedText(project.lastModified);
-      const pathLine = shortenHomePath(project.path);
-      const branchLine = formatBranch(repository?.branch);
-      const hasReleasedLock = releasedProjects.has(project.id);
-      const isLocallyLaunched = launchedProjects.has(project.id);
-      const displayStatus = (() => {
-        if (isLocallyLaunched) {
-          return "running";
-        }
-        if (hasReleasedLock) {
-          return "idle";
+  return /* @__PURE__ */ jsx5(
+    LayoutManager,
+    {
+      layoutMode: getLayoutMode(),
+      panelVisible: isSortMenuOpen,
+      list: /* @__PURE__ */ jsx5(
+        Box5,
+        {
+          flexDirection: "column",
+          borderStyle: "round",
+          borderColor: "green",
+          width: typeof stdout?.columns === "number" ? stdout.columns : void 0,
+          children: sortedProjects.length === 0 ? /* @__PURE__ */ jsx5(Text3, { children: "No Unity Hub projects were found." }) : /* @__PURE__ */ jsx5(
+            ProjectList,
+            {
+              visibleProjects,
+              startIndex,
+              selectedIndex: index,
+              linesPerProject,
+              showBranch,
+              showPath,
+              useGitRootName,
+              releasedProjects,
+              launchedProjects,
+              totalProjects: sortedProjects.length
+            }
+          )
         }
-        return launchStatus;
-      })();
-      const baseScrollbarIndex = offset * linesPerProject;
-      const titleScrollbar = scrollbarChars[baseScrollbarIndex] ?? " ";
-      const branchScrollbar = showBranch ? scrollbarChars[baseScrollbarIndex + 1] ?? " " : " ";
-      const pathScrollbar = showPath ? scrollbarChars[baseScrollbarIndex + 1 + (showBranch ? 1 : 0)] ?? " " : " ";
-      const spacerScrollbar = scrollbarChars[baseScrollbarIndex + linesPerProject - 1] ?? " ";
-      const statusLabel = STATUS_LABELS[displayStatus];
-      const statusColor = displayStatus === "running" ? LOCK_COLOR : displayStatus === "crashed" ? "red" : void 0;
-      return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-        /* @__PURE__ */ jsxs(Box, { width: 1, flexDirection: "column", alignItems: "center", marginLeft: isSelected ? 1 : 0, children: [
-          /* @__PURE__ */ jsx(Text, { color: isSelected ? "green" : void 0, children: selectionBar }),
-          showBranch ? /* @__PURE__ */ jsx(Text, { color: isSelected ? "green" : void 0, children: selectionBar }) : null,
-          showPath ? /* @__PURE__ */ jsx(Text, { color: isSelected ? "green" : void 0, children: selectionBar }) : null
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { flexGrow: 1, flexDirection: "column", marginLeft: isSelected ? 2 : 1, children: [
-          /* @__PURE__ */ jsxs(Text, { wrap: "truncate", children: [
-            /* @__PURE__ */ jsx(Text, { color: PROJECT_COLOR, bold: true, children: projectName }),
-            /* @__PURE__ */ jsxs(Text, { children: [
-              " ",
-              versionLabel
-            ] }),
-            updatedText ? /* @__PURE__ */ jsx(Text, { children: `  ${updatedText}` }) : null,
-            statusLabel && statusColor ? /* @__PURE__ */ jsx(Text, { color: statusColor, children: `  ${statusLabel}` }) : null
-          ] }),
-          showBranch ? /* @__PURE__ */ jsx(Text, { color: BRANCH_COLOR, wrap: "truncate", children: branchLine }) : null,
-          showPath ? /* @__PURE__ */ jsx(Text, { color: PATH_COLOR, wrap: "truncate", children: pathLine }) : null,
-          /* @__PURE__ */ jsx(Text, { children: " " })
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { marginLeft: 1, width: 1, flexDirection: "column", alignItems: "center", children: [
-          /* @__PURE__ */ jsx(Text, { children: titleScrollbar }),
-          showBranch ? /* @__PURE__ */ jsx(Text, { children: branchScrollbar }) : null,
-          showPath ? /* @__PURE__ */ jsx(Text, { children: pathScrollbar }) : null,
-          /* @__PURE__ */ jsx(Text, { children: spacerScrollbar })
-        ] })
-      ] }, project.id);
-    });
-  }, [
-    index,
-    launchedProjects,
-    releasedProjects,
-    scrollbarChars,
-    showBranch,
-    showPath,
-    startIndex,
-    useGitRootName,
-    visibleProjects
-  ]);
-  useEffect(() => {
-    if (!isSortMenuOpen || !stdout) {
-      return;
-    }
-    const columns = typeof stdout.columns === "number" ? stdout.columns : 80;
-    const contentRows = rows.length === 0 ? 1 : visibleProjects.length * linesPerProject;
-    const contentWidth = Math.max(10, columns - 2);
-    const modalInnerWidth = Math.min(60, Math.max(28, contentWidth - 6));
-    const modalWidth = Math.min(contentWidth, modalInnerWidth);
-    const leftPadding = Math.max(0, Math.floor((contentWidth - modalWidth) / 2));
-    const title = "Sort Menu (Select: j/k, Toggle: Space, Close: Esc)";
-    const linePrimary = `Primary: ${sortPreferences.primary === "updated" ? "Updated" : "Name (Git root)"}`;
-    const lineDirection = `Direction: ${sortPreferences.primary === "updated" ? sortPreferences.direction === "desc" ? "New to Old" : "Old to New" : sortPreferences.direction === "asc" ? "A to Z" : "Z to A"}`;
-    const lineFav = `Favorites first: ${sortPreferences.favoritesFirst ? "ON" : "OFF"}`;
-    const innerWidth = modalWidth - 2;
-    const BORDER_ON = "\x1B[32m";
-    const BORDER_OFF = "\x1B[39m";
-    const fixedPrefixWidth = 2;
-    const buildContentLine = (label, selected) => {
-      const arrow = selected ? "> " : "  ";
-      const maxLabelWidth = Math.max(0, innerWidth - fixedPrefixWidth);
-      const rawLabel = label;
-      const limitedLabel = stringWidth(rawLabel) > maxLabelWidth ? `${truncateToWidth(rawLabel, Math.max(0, maxLabelWidth - 3))}...` : rawLabel;
-      const visibleBase = `${arrow}${limitedLabel}`;
-      const colored = selected ? `\x1B[32m${visibleBase}\x1B[39m` : visibleBase;
-      const pad = Math.max(0, innerWidth - stringWidth(visibleBase));
-      return `${BORDER_ON}\u2502${BORDER_OFF}${colored}${" ".repeat(pad)}${BORDER_ON}\u2502${BORDER_OFF}`;
-    };
-    const contentLines = [
-      (() => {
-        const prefix = "  ";
-        const maxTitleWidth = Math.max(0, innerWidth - fixedPrefixWidth);
-        const visibleTitle = stringWidth(title) > maxTitleWidth ? `${truncateToWidth(title, Math.max(0, maxTitleWidth - 3))}...` : title;
-        const content = `${prefix}${visibleTitle}`;
-        const pad = Math.max(0, innerWidth - stringWidth(content));
-        return `${BORDER_ON}\u2502${BORDER_OFF}${content}${" ".repeat(pad)}${BORDER_ON}\u2502${BORDER_OFF}`;
-      })(),
-      `${BORDER_ON}\u2502${BORDER_OFF}${" ".repeat(innerWidth)}${BORDER_ON}\u2502${BORDER_OFF}`,
-      buildContentLine(linePrimary, sortMenuIndex === 0),
-      buildContentLine(lineDirection, sortMenuIndex === 1),
-      buildContentLine(lineFav, sortMenuIndex === 2)
-    ];
-    const topBorder = `${BORDER_ON}\u250C${"\u2500".repeat(modalWidth - 2)}\u2510${BORDER_OFF}`;
-    const bottomBorder = `${BORDER_ON}\u2514${"\u2500".repeat(modalWidth - 2)}\u2518${BORDER_OFF}`;
-    const overlayLines = [topBorder, ...contentLines, bottomBorder];
-    const overlayHeight = overlayLines.length;
-    const overlayTopWithinContent = Math.max(0, Math.floor((contentRows - overlayHeight) / 2));
-    const overlayTopRelativeToComponent = 1 + overlayTopWithinContent;
-    const bottomIndex = contentRows + 2;
-    const moveUp = Math.max(0, bottomIndex - overlayTopRelativeToComponent);
-    const moveRight = 1 + leftPadding;
-    stdout.write("\x1B7");
-    if (moveUp > 0) {
-      stdout.write(`\x1B[${moveUp}A`);
-    }
-    stdout.write("\r");
-    for (let i = 0; i < overlayLines.length; i++) {
-      stdout.write("\r");
-      if (moveRight > 0) {
-        stdout.write(`\x1B[${moveRight}C`);
-      }
-      stdout.write(" ".repeat(Math.max(0, modalWidth)));
-      stdout.write(`\x1B[${Math.max(0, modalWidth)}D`);
-      stdout.write(overlayLines[i]);
-      if (i < overlayLines.length - 1) {
-        stdout.write("\r\n");
-      }
-    }
-    stdout.write("\x1B8");
-  }, [
-    isSortMenuOpen,
-    linesPerProject,
-    rows,
-    sortPreferences,
-    sortMenuIndex,
-    stdout,
-    visibleProjects.length
-  ]);
-  const clearOverlay = useCallback(() => {
-    if (!stdout) {
-      return;
-    }
-    const columns = typeof stdout.columns === "number" ? stdout.columns : 80;
-    const contentRows = rows.length === 0 ? 1 : visibleProjects.length * linesPerProject;
-    const contentWidth = Math.max(10, columns - 2);
-    const modalInnerWidth = Math.min(60, Math.max(28, contentWidth - 6));
-    const modalWidth = Math.min(contentWidth, modalInnerWidth);
-    const leftPadding = Math.max(0, Math.floor((contentWidth - modalWidth) / 2));
-    const overlayHeight = 6;
-    const overlayTopWithinContent = Math.max(0, Math.floor((contentRows - overlayHeight) / 2));
-    const overlayTopRelativeToComponent = 1 + overlayTopWithinContent;
-    const bottomIndex = contentRows + 2;
-    const moveUp = Math.max(0, bottomIndex - overlayTopRelativeToComponent);
-    const moveRight = 1 + leftPadding;
-    stdout.write("\x1B7");
-    if (moveUp > 0) {
-      stdout.write(`\x1B[${moveUp}A`);
-    }
-    stdout.write("\r");
-    for (let i = 0; i < overlayHeight; i++) {
-      stdout.write("\r");
-      if (moveRight > 0) {
-        stdout.write(`\x1B[${moveRight}C`);
-      }
-      stdout.write(" ".repeat(Math.max(0, modalWidth)));
-      if (i < overlayHeight - 1) {
-        stdout.write("\r\n");
-      }
+      ),
+      panel: /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", width: typeof stdout?.columns === "number" ? stdout.columns : void 0, children: [
+        /* @__PURE__ */ jsx5(Text3, { children: "Sort Settings" }),
+        /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(
+          SortPanel,
+          {
+            sortPreferences,
+            focusedIndex: sortMenuIndex,
+            width: typeof stdout?.columns === "number" ? stdout.columns : void 0
+          }
+        ) })
+      ] }),
+      statusBar: isSortMenuOpen ? /* @__PURE__ */ jsx5(Text3, { wrap: "truncate", children: "Select: j/k, Toggle: Space, Back: Esc" }) : /* @__PURE__ */ jsx5(Text3, { wrap: "truncate", children: hint })
     }
-    stdout.write("\x1B8");
-  }, [linesPerProject, rows.length, visibleProjects.length, stdout]);
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", children: rows.length === 0 ? /* @__PURE__ */ jsx(Text, { children: "No Unity Hub projects were found." }) : rows }),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { wrap: "truncate", children: hint }) })
-  ] }, renderEpoch);
+  );
 };
 
 // src/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var bootstrap = async () => {
   const unityHubReader = new UnityHubProjectsReader();
   const gitRepositoryInfoReader = new GitRepositoryInfoReader();
@@ -1525,7 +1586,7 @@ var bootstrap = async () => {
   try {
     const projects = await listProjectsUseCase.execute();
     const { waitUntilExit } = render(
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx6(
         App,
         {
           projects,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unity-hub-cli",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "A CLI tool that reads Unity Hub's projects and launches Unity Editor with an interactive TUI",
   "main": "dist/index.js",
   "scripts": {