formalconf 2.0.1 → 2.0.2

package/dist/formalconf.js

@@ -1,78 +1,18 @@
 #!/usr/bin/env node
 // src/cli/formalconf.tsx
-import { useState as useState5, useEffect as useEffect4, useMemo as useMemo2, useCallback, useRef } from "react";
-import { render, Box as Box12, Text as Text11, useApp, useInput as useInput5 } from "ink";
-import { Spinner } from "@inkjs/ui";
-
-// src/components/ui/VimSelect.tsx
-import { useState } from "react";
-import { Box, Text, useInput } from "ink";
-
-// src/lib/theme.ts
-var colors = {
-  primary: "#5eead4",
-  primaryDim: "#2dd4bf",
-  accent: "#06b6d4",
-  success: "#22c55e",
-  error: "#ef4444",
-  warning: "#f59e0b",
-  info: "#3b82f6",
-  text: "white",
-  textDim: "gray",
-  border: "#374151",
-  borderLight: "#4b5563"
-};
-var borderStyles = {
-  panel: "round",
-  header: "round",
-  footer: "single"
-};
-
-// src/components/ui/VimSelect.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
-function VimSelect({ options, onChange, isDisabled = false }) {
-  const [index, setIndex] = useState(0);
-  useInput((input, key) => {
-    if (isDisabled)
-      return;
-    if (input === "j" || key.downArrow) {
-      setIndex((i) => i < options.length - 1 ? i + 1 : i);
-    }
-    if (input === "k" || key.upArrow) {
-      setIndex((i) => i > 0 ? i - 1 : i);
-    }
-    if (input === "l" || key.return) {
-      onChange(options[index].value);
-    }
-  });
-  return /* @__PURE__ */ jsxDEV(Box, {
-    flexDirection: "column",
-    children: options.map((opt, i) => /* @__PURE__ */ jsxDEV(Box, {
-      children: /* @__PURE__ */ jsxDEV(Text, {
-        color: i === index ? colors.primary : undefined,
-        children: [
-          i === index ? "❯" : " ",
-          " ",
-          opt.label
-        ]
-      }, undefined, true, undefined, this)
-    }, opt.value, false, undefined, this))
-  }, undefined, false, undefined, this);
-}
-
-// src/cli/formalconf.tsx
-import { readdirSync as readdirSync5, existsSync as existsSync6 } from "fs";
-import { join as join5 } from "path";
+import { useState as useState9, useEffect as useEffect6 } from "react";
+import { render, useApp as useApp2, useInput as useInput9 } from "ink";
+import { Spinner as Spinner2 } from "@inkjs/ui";
 
 // src/components/layout/Layout.tsx
-import { Box as Box6 } from "ink";
+import { Box as Box5 } from "ink";
 
 // src/hooks/useTerminalSize.ts
 import { useStdout } from "ink";
-import { useState as useState2, useEffect } from "react";
+import { useState, useEffect } from "react";
 function useTerminalSize() {
   const { stdout } = useStdout();
-  const [size, setSize] = useState2({
+  const [size, setSize] = useState({
     columns: stdout.columns || 80,
     rows: stdout.rows || 24
   });
@@ -92,10 +32,10 @@ function useTerminalSize() {
 }
 
 // src/components/Header.tsx
-import { Box as Box3, Text as Text3 } from "ink";
+import { Box as Box2, Text as Text2 } from "ink";
 
 // src/hooks/useSystemStatus.ts
-import { useState as useState3, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
 import { existsSync, readlinkSync, readdirSync, lstatSync } from "fs";
 
 // src/lib/paths.ts
@@ -358,7 +298,7 @@ async function ensureConfigDir() {
 // src/hooks/useSystemStatus.ts
 import { basename, dirname as dirname2, join as join2 } from "path";
 function useSystemStatus() {
-  const [status, setStatus] = useState3({
+  const [status, setStatus] = useState2({
     currentTheme: null,
     configsLinked: false,
     loading: true
@@ -395,8 +335,30 @@ function useSystemStatus() {
 }
 
 // src/components/ui/StatusIndicator.tsx
-import { Box as Box2, Text as Text2 } from "ink";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+import { Box, Text } from "ink";
+
+// src/lib/theme.ts
+var colors = {
+  primary: "#5eead4",
+  primaryDim: "#2dd4bf",
+  accent: "#06b6d4",
+  success: "#22c55e",
+  error: "#ef4444",
+  warning: "#f59e0b",
+  info: "#3b82f6",
+  text: "white",
+  textDim: "gray",
+  border: "#374151",
+  borderLight: "#4b5563"
+};
+var borderStyles = {
+  panel: "round",
+  header: "round",
+  footer: "single"
+};
+
+// src/components/ui/StatusIndicator.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
 function StatusIndicator({
   label,
   value,
@@ -414,17 +376,17 @@ function StatusIndicator({
     error: "●",
     neutral: "○"
   };
-  return /* @__PURE__ */ jsxDEV2(Box2, {
+  return /* @__PURE__ */ jsxDEV(Box, {
     gap: 1,
     children: [
-      /* @__PURE__ */ jsxDEV2(Text2, {
+      /* @__PURE__ */ jsxDEV(Text, {
         dimColor: true,
         children: [
           label,
           ":"
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2(Text2, {
+      /* @__PURE__ */ jsxDEV(Text, {
         color: statusColors[status],
         children: [
           icon[status],
@@ -438,7 +400,7 @@ function StatusIndicator({
 // package.json
 var package_default = {
   name: "formalconf",
-  version: "2.0.1",
+  version: "2.0.2",
   description: "Dotfiles management TUI for macOS - config management, package sync, and theme switching",
   type: "module",
   main: "./dist/formalconf.js",
@@ -491,11 +453,11 @@ var package_default = {
 };
 
 // src/components/Header.tsx
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 function Header() {
   const { columns } = useTerminalSize();
   const { currentTheme, configsLinked, loading } = useSystemStatus();
-  return /* @__PURE__ */ jsxDEV3(Box3, {
+  return /* @__PURE__ */ jsxDEV2(Box2, {
     flexDirection: "column",
     width: columns - 2,
     borderStyle: borderStyles.header,
@@ -503,24 +465,24 @@ function Header() {
     paddingX: 2,
     marginBottom: 1,
     children: [
-      /* @__PURE__ */ jsxDEV3(Box3, {
+      /* @__PURE__ */ jsxDEV2(Box2, {
         justifyContent: "space-between",
         width: "100%",
         children: [
-          /* @__PURE__ */ jsxDEV3(Box3, {
+          /* @__PURE__ */ jsxDEV2(Box2, {
             children: [
-              /* @__PURE__ */ jsxDEV3(Text3, {
+              /* @__PURE__ */ jsxDEV2(Text2, {
                 bold: true,
                 color: colors.primary,
                 children: "FormalConf"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3(Text3, {
+              /* @__PURE__ */ jsxDEV2(Text2, {
                 dimColor: true,
                 children: " - Dotfiles Manager"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV3(Text3, {
+          /* @__PURE__ */ jsxDEV2(Text2, {
             dimColor: true,
             children: [
               "v",
@@ -529,16 +491,16 @@ function Header() {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      !loading && /* @__PURE__ */ jsxDEV3(Box3, {
+      !loading && /* @__PURE__ */ jsxDEV2(Box2, {
         marginTop: 1,
         gap: 4,
         children: [
-          /* @__PURE__ */ jsxDEV3(StatusIndicator, {
+          /* @__PURE__ */ jsxDEV2(StatusIndicator, {
             label: "Theme",
             value: currentTheme,
             status: currentTheme ? "success" : "neutral"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatusIndicator, {
+          /* @__PURE__ */ jsxDEV2(StatusIndicator, {
             label: "Configs",
             value: configsLinked ? "Linked" : "Not linked",
             status: configsLinked ? "success" : "warning"
@@ -550,8 +512,8 @@ function Header() {
 }
 
 // src/components/layout/Footer.tsx
-import { Box as Box4, Text as Text4 } from "ink";
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+import { Box as Box3, Text as Text3 } from "ink";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
 var defaultShortcuts = [
   { key: "↑↓/jk", label: "Navigate" },
   { key: "Enter/l", label: "Select" },
@@ -560,7 +522,7 @@ var defaultShortcuts = [
 ];
 function Footer({ shortcuts = defaultShortcuts }) {
   const { columns } = useTerminalSize();
-  return /* @__PURE__ */ jsxDEV4(Box4, {
+  return /* @__PURE__ */ jsxDEV3(Box3, {
     width: columns - 2,
     borderStyle: borderStyles.footer,
     borderColor: colors.border,
@@ -568,15 +530,15 @@ function Footer({ shortcuts = defaultShortcuts }) {
     marginTop: 1,
     justifyContent: "center",
     gap: 2,
-    children: shortcuts.map((shortcut, index) => /* @__PURE__ */ jsxDEV4(Box4, {
+    children: shortcuts.map((shortcut, index) => /* @__PURE__ */ jsxDEV3(Box3, {
       gap: 1,
       children: [
-        /* @__PURE__ */ jsxDEV4(Text4, {
+        /* @__PURE__ */ jsxDEV3(Text3, {
           color: colors.primary,
           bold: true,
           children: shortcut.key
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV4(Text4, {
+        /* @__PURE__ */ jsxDEV3(Text3, {
           dimColor: true,
           children: shortcut.label
         }, undefined, false, undefined, this)
@@ -586,14 +548,14 @@ function Footer({ shortcuts = defaultShortcuts }) {
 }
 
 // src/components/layout/Breadcrumb.tsx
-import React2 from "react";
-import { Box as Box5, Text as Text5 } from "ink";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import React from "react";
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
 function Breadcrumb({ path }) {
-  return /* @__PURE__ */ jsxDEV5(Box5, {
-    children: path.map((segment, index) => /* @__PURE__ */ jsxDEV5(React2.Fragment, {
+  return /* @__PURE__ */ jsxDEV4(Box4, {
+    children: path.map((segment, index) => /* @__PURE__ */ jsxDEV4(React.Fragment, {
       children: [
-        index > 0 && /* @__PURE__ */ jsxDEV5(Text5, {
+        index > 0 && /* @__PURE__ */ jsxDEV4(Text4, {
           color: colors.textDim,
           children: [
             " ",
@@ -601,7 +563,7 @@ function Breadcrumb({ path }) {
             " "
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV5(Text5, {
+        /* @__PURE__ */ jsxDEV4(Text4, {
           color: index === path.length - 1 ? colors.primary : colors.textDim,
           bold: index === path.length - 1,
           children: segment
@@ -612,39 +574,39 @@ function Breadcrumb({ path }) {
 }
 
 // src/components/layout/Layout.tsx
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
 function Layout({
   children,
   breadcrumb = ["Main"],
   showFooter = true
 }) {
   const { columns } = useTerminalSize();
-  return /* @__PURE__ */ jsxDEV6(Box6, {
+  return /* @__PURE__ */ jsxDEV5(Box5, {
     flexDirection: "column",
     width: columns,
     padding: 1,
     children: [
-      /* @__PURE__ */ jsxDEV6(Header, {}, undefined, false, undefined, this),
-      breadcrumb.length > 1 && /* @__PURE__ */ jsxDEV6(Box6, {
+      /* @__PURE__ */ jsxDEV5(Header, {}, undefined, false, undefined, this),
+      breadcrumb.length > 1 && /* @__PURE__ */ jsxDEV5(Box5, {
         marginBottom: 1,
         marginLeft: 1,
-        children: /* @__PURE__ */ jsxDEV6(Breadcrumb, {
+        children: /* @__PURE__ */ jsxDEV5(Breadcrumb, {
           path: breadcrumb
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV6(Box6, {
+      /* @__PURE__ */ jsxDEV5(Box5, {
         flexDirection: "column",
         flexGrow: 1,
         children
       }, undefined, false, undefined, this),
-      showFooter && /* @__PURE__ */ jsxDEV6(Footer, {}, undefined, false, undefined, this)
+      showFooter && /* @__PURE__ */ jsxDEV5(Footer, {}, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 
 // src/components/layout/Panel.tsx
-import { Box as Box7, Text as Text6 } from "ink";
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+import { Box as Box6, Text as Text5 } from "ink";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
 function Panel({
   title,
   children,
@@ -652,7 +614,7 @@ function Panel({
   flexGrow,
   borderColor = colors.border
 }) {
-  return /* @__PURE__ */ jsxDEV7(Box7, {
+  return /* @__PURE__ */ jsxDEV6(Box6, {
     flexDirection: "column",
     width,
     flexGrow,
@@ -660,9 +622,9 @@ function Panel({
     borderColor,
     paddingX: 1,
     children: [
-      title && /* @__PURE__ */ jsxDEV7(Box7, {
+      title && /* @__PURE__ */ jsxDEV6(Box6, {
         marginBottom: 1,
-        children: /* @__PURE__ */ jsxDEV7(Text6, {
+        children: /* @__PURE__ */ jsxDEV6(Text5, {
           bold: true,
           color: colors.primary,
           children: title
@@ -673,34 +635,144 @@ function Panel({
   }, undefined, true, undefined, this);
 }
 
-// src/components/CommandOutput.tsx
+// src/components/PrerequisiteError.tsx
+import { Box as Box7, Text as Text6, useInput } from "ink";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function PrerequisiteError({ missing, onExit }) {
+  useInput(() => onExit());
+  return /* @__PURE__ */ jsxDEV7(Layout, {
+    breadcrumb: ["Error"],
+    children: /* @__PURE__ */ jsxDEV7(Panel, {
+      title: "Missing Prerequisites",
+      borderColor: colors.error,
+      children: [
+        /* @__PURE__ */ jsxDEV7(Text6, {
+          color: colors.error,
+          children: "Required tools are not installed:"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV7(Box7, {
+          flexDirection: "column",
+          marginTop: 1,
+          children: missing.map((dep) => /* @__PURE__ */ jsxDEV7(Box7, {
+            children: [
+              /* @__PURE__ */ jsxDEV7(Text6, {
+                color: colors.warning,
+                children: [
+                  "• ",
+                  dep.name
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV7(Text6, {
+                dimColor: true,
+                children: [
+                  " — Install: ",
+                  dep.install
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, dep.name, true, undefined, this))
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV7(Box7, {
+          marginTop: 1,
+          children: /* @__PURE__ */ jsxDEV7(Text6, {
+            dimColor: true,
+            children: "Press any key to exit..."
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/menus/MainMenu.tsx
+import { useApp } from "ink";
+
+// src/components/ui/VimSelect.tsx
+import { useState as useState3 } from "react";
 import { Box as Box8, Text as Text7, useInput as useInput2 } from "ink";
 import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+function VimSelect({ options, onChange, isDisabled = false }) {
+  const [index, setIndex] = useState3(0);
+  useInput2((input, key) => {
+    if (isDisabled)
+      return;
+    if (input === "j" || key.downArrow) {
+      setIndex((i) => i < options.length - 1 ? i + 1 : i);
+    }
+    if (input === "k" || key.upArrow) {
+      setIndex((i) => i > 0 ? i - 1 : i);
+    }
+    if (input === "l" || key.return) {
+      onChange(options[index].value);
+    }
+  });
+  return /* @__PURE__ */ jsxDEV8(Box8, {
+    flexDirection: "column",
+    children: options.map((opt, i) => /* @__PURE__ */ jsxDEV8(Box8, {
+      children: /* @__PURE__ */ jsxDEV8(Text7, {
+        color: i === index ? colors.primary : undefined,
+        children: [
+          i === index ? "❯" : " ",
+          " ",
+          opt.label
+        ]
+      }, undefined, true, undefined, this)
+    }, opt.value, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+
+// src/components/menus/MainMenu.tsx
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function MainMenu({ onSelect }) {
+  const { exit } = useApp();
+  return /* @__PURE__ */ jsxDEV9(Panel, {
+    title: "Main Menu",
+    children: /* @__PURE__ */ jsxDEV9(VimSelect, {
+      options: [
+        { label: "Config Manager", value: "config" },
+        { label: "Package Sync", value: "packages" },
+        { label: "Set Theme", value: "themes" },
+        { label: "Exit", value: "exit" }
+      ],
+      onChange: (value) => {
+        if (value === "exit") {
+          exit();
+          return;
+        }
+        onSelect(value);
+      }
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/CommandOutput.tsx
+import { Box as Box9, Text as Text8, useInput as useInput3 } from "ink";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
 function CommandOutput({
   title,
   output,
   success = true,
   onDismiss
 }) {
-  useInput2(() => {
+  useInput3(() => {
     onDismiss();
   });
-  return /* @__PURE__ */ jsxDEV8(Panel, {
+  return /* @__PURE__ */ jsxDEV10(Panel, {
     title,
     borderColor: success ? colors.success : colors.error,
     children: [
-      output && /* @__PURE__ */ jsxDEV8(Box8, {
+      output && /* @__PURE__ */ jsxDEV10(Box9, {
         flexDirection: "column",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsxDEV8(Text7, {
+        children: /* @__PURE__ */ jsxDEV10(Text8, {
           children: output
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV8(Text7, {
+      /* @__PURE__ */ jsxDEV10(Text8, {
         color: success ? colors.success : colors.error,
         children: success ? "Done" : "Failed"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV8(Text7, {
+      /* @__PURE__ */ jsxDEV10(Text8, {
         dimColor: true,
         children: "Press any key to continue..."
       }, undefined, false, undefined, this)
@@ -708,246 +780,61 @@ function CommandOutput({
   }, undefined, true, undefined, this);
 }
 
-// src/components/ThemeCard.tsx
-import { Box as Box9, Text as Text8 } from "ink";
-import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
-function ThemeCard({ theme, isSelected, width }) {
-  const borderColor = isSelected ? colors.accent : colors.border;
-  const nameColor = isSelected ? colors.primary : colors.text;
-  const indicators = [];
-  if (theme.hasBackgrounds)
-    indicators.push("bg");
-  if (theme.isLightMode)
-    indicators.push("light");
-  const indicatorText = indicators.length > 0 ? ` [${indicators.join(" ")}]` : "";
-  return /* @__PURE__ */ jsxDEV9(Box9, {
-    flexDirection: "column",
-    width,
-    borderStyle: borderStyles.panel,
-    borderColor,
-    paddingX: 1,
-    children: /* @__PURE__ */ jsxDEV9(Box9, {
-      children: [
-        /* @__PURE__ */ jsxDEV9(Text8, {
-          color: isSelected ? colors.accent : colors.primaryDim,
-          children: isSelected ? "● " : "  "
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV9(Text8, {
-          color: nameColor,
-          bold: true,
-          wrap: "truncate",
-          children: theme.name
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV9(Text8, {
-          color: colors.primaryDim,
-          children: indicatorText
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
+// src/components/LoadingPanel.tsx
+import { Spinner } from "@inkjs/ui";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+function LoadingPanel({ title, label = "Processing..." }) {
+  return /* @__PURE__ */ jsxDEV11(Panel, {
+    title,
+    children: /* @__PURE__ */ jsxDEV11(Spinner, {
+      label
+    }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 
-// src/components/ScrollableLog.tsx
-import { useState as useState4, useEffect as useEffect3, useMemo } from "react";
-import { Box as Box10, Text as Text9, useInput as useInput3 } from "ink";
-import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
-function ScrollableLog({
-  lines,
-  maxHeight,
-  autoScroll = true,
-  showScrollHint = true
+// src/hooks/useMenuAction.ts
+import { useState as useState4, useCallback } from "react";
+function useMenuAction() {
+  const [state, setState] = useState4("menu");
+  const [output, setOutput] = useState4("");
+  const [success, setSuccess] = useState4(true);
+  const execute = useCallback(async (action) => {
+    setState("running");
+    const result = await action();
+    setOutput(result.output);
+    setSuccess(result.success);
+    setState("result");
+  }, []);
+  const reset = useCallback(() => {
+    setState("menu");
+  }, []);
+  return {
+    state,
+    output,
+    success,
+    isRunning: state === "running",
+    isResult: state === "result",
+    execute,
+    reset
+  };
+}
+
+// src/hooks/useBackNavigation.ts
+import { useInput as useInput4 } from "ink";
+function useBackNavigation({
+  enabled = true,
+  onBack
 }) {
-  const { rows } = useTerminalSize();
-  const visibleLines = maxHeight || Math.max(5, rows - 12);
-  const [scrollOffset, setScrollOffset] = useState4(0);
-  const [isAutoScrolling, setIsAutoScrolling] = useState4(autoScroll);
-  const totalLines = lines.length;
-  const maxOffset = Math.max(0, totalLines - visibleLines);
-  useEffect3(() => {
-    if (isAutoScrolling) {
-      setScrollOffset(maxOffset);
-    }
-  }, [totalLines, maxOffset, isAutoScrolling]);
-  useInput3((input, key) => {
-    if (key.downArrow || input === "j") {
-      setIsAutoScrolling(false);
-      setScrollOffset((prev) => Math.min(prev + 1, maxOffset));
-    }
-    if (key.upArrow || input === "k") {
-      setIsAutoScrolling(false);
-      setScrollOffset((prev) => Math.max(prev - 1, 0));
-    }
-    if (input === "G") {
-      setIsAutoScrolling(true);
-      setScrollOffset(maxOffset);
-    }
-    if (input === "g") {
-      setIsAutoScrolling(false);
-      setScrollOffset(0);
-    }
-  });
-  const visibleContent = useMemo(() => {
-    return lines.slice(scrollOffset, scrollOffset + visibleLines);
-  }, [lines, scrollOffset, visibleLines]);
-  const showScrollUp = scrollOffset > 0;
-  const showScrollDown = scrollOffset < maxOffset;
-  return /* @__PURE__ */ jsxDEV10(Box10, {
-    flexDirection: "column",
-    children: [
-      showScrollHint && showScrollUp && /* @__PURE__ */ jsxDEV10(Text9, {
-        dimColor: true,
-        children: [
-          "  ↑ ",
-          scrollOffset,
-          " more line",
-          scrollOffset !== 1 ? "s" : ""
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV10(Box10, {
-        flexDirection: "column",
-        height: visibleLines,
-        overflow: "hidden",
-        children: visibleContent.map((line, i) => /* @__PURE__ */ jsxDEV10(Text9, {
-          children: line
-        }, scrollOffset + i, false, undefined, this))
-      }, undefined, false, undefined, this),
-      showScrollHint && showScrollDown && /* @__PURE__ */ jsxDEV10(Text9, {
-        dimColor: true,
-        children: [
-          "  ↓ ",
-          maxOffset - scrollOffset,
-          " more line",
-          maxOffset - scrollOffset !== 1 ? "s" : ""
-        ]
-      }, undefined, true, undefined, this),
-      showScrollHint && totalLines > visibleLines && /* @__PURE__ */ jsxDEV10(Text9, {
-        dimColor: true,
-        children: [
-          "j/k scroll • g top • G bottom ",
-          isAutoScrolling ? "(auto-scroll)" : ""
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/PromptInput.tsx
-import { Box as Box11, Text as Text10, useInput as useInput4 } from "ink";
-import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
-function PromptInput({
-  question,
-  options = ["y", "n"],
-  onAnswer
-}) {
-  useInput4((input) => {
-    const lower = input.toLowerCase();
-    if (options.includes(lower)) {
-      onAnswer(lower);
+  useInput4((input, key) => {
+    if (enabled && (key.escape || key.leftArrow || input === "h")) {
+      onBack();
     }
   });
-  return /* @__PURE__ */ jsxDEV11(Box11, {
-    marginTop: 1,
-    borderStyle: "single",
-    borderColor: colors.accent,
-    paddingX: 1,
-    children: /* @__PURE__ */ jsxDEV11(Text10, {
-      children: [
-        question,
-        " ",
-        /* @__PURE__ */ jsxDEV11(Text10, {
-          color: colors.accent,
-          children: [
-            "[",
-            options.join("/"),
-            "]"
-          ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV11(Text10, {
-          dimColor: true,
-          children: ": "
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/lib/theme-parser.ts
-import { existsSync as existsSync2, readdirSync as readdirSync2 } from "fs";
-import { join as join3 } from "path";
-function parseYaml(content) {
-  const result = {};
-  const lines = content.split(`
-`);
-  let currentSection = null;
-  let currentKey = "";
-  for (const line of lines) {
-    const trimmed = line.trim();
-    if (!trimmed || trimmed.startsWith("#"))
-      continue;
-    const indentLevel = line.search(/\S/);
-    const match = trimmed.match(/^([\w-]+):\s*(.*)$/);
-    if (match) {
-      const [, key, value] = match;
-      if (indentLevel === 0) {
-        if (value) {
-          result[key] = value.replace(/^["']|["']$/g, "");
-        } else {
-          currentKey = key;
-          currentSection = {};
-          result[key] = currentSection;
-        }
-      } else if (currentSection) {
-        currentSection[key] = value.replace(/^["']|["']$/g, "");
-      }
-    }
-  }
-  return result;
-}
-async function parseThemeMetadata(themePath) {
-  const yamlPath = join3(themePath, "theme.yaml");
-  if (!existsSync2(yamlPath)) {
-    return;
-  }
-  try {
-    const content = await readText(yamlPath);
-    const parsed = parseYaml(content);
-    return {
-      name: parsed.name || "",
-      author: parsed.author,
-      description: parsed.description,
-      version: parsed.version,
-      source: parsed.source,
-      colors: parsed.colors
-    };
-  } catch {
-    return;
-  }
-}
-function parseThemeFiles(themePath) {
-  const entries = readdirSync2(themePath, { withFileTypes: true });
-  return entries.filter((e) => e.isFile() && !e.name.startsWith(".") && e.name !== "theme.yaml" && e.name !== "light.mode").map((e) => ({
-    name: e.name,
-    path: join3(themePath, e.name),
-    application: e.name.replace(/\.(conf|theme|lua|toml|css|json|ini)$/, "")
-  }));
-}
-async function parseTheme(themePath, themeName) {
-  const files = parseThemeFiles(themePath);
-  const metadata = await parseThemeMetadata(themePath);
-  return {
-    name: metadata?.name || themeName,
-    path: themePath,
-    files,
-    metadata,
-    hasBackgrounds: existsSync2(join3(themePath, "backgrounds")),
-    hasPreview: existsSync2(join3(themePath, "preview.png")),
-    isLightMode: existsSync2(join3(themePath, "light.mode"))
-  };
 }
 
 // src/cli/config-manager.ts
 import { parseArgs } from "util";
-import { readdirSync as readdirSync3, existsSync as existsSync3, lstatSync as lstatSync2, readlinkSync as readlinkSync2 } from "fs";
+import { readdirSync as readdirSync2, existsSync as existsSync2, lstatSync as lstatSync2, readlinkSync as readlinkSync2 } from "fs";
 var colors2 = {
   red: "\x1B[0;31m",
   green: "\x1B[0;32m",
@@ -963,7 +850,7 @@ async function checkStow() {
   }
 }
 function listPackages() {
-  const entries = readdirSync3(CONFIGS_DIR, { withFileTypes: true });
+  const entries = readdirSync2(CONFIGS_DIR, { withFileTypes: true });
   return entries.filter((e) => e.isDirectory()).map((e) => ({
     name: e.name,
     path: `${CONFIGS_DIR}/${e.name}`,
@@ -972,12 +859,12 @@ function listPackages() {
 }
 function checkPackageStowed(packageName) {
   const packageDir = `${CONFIGS_DIR}/${packageName}`;
-  if (!existsSync3(packageDir))
+  if (!existsSync2(packageDir))
     return false;
-  const entries = readdirSync3(packageDir, { withFileTypes: true });
+  const entries = readdirSync2(packageDir, { withFileTypes: true });
   for (const entry of entries) {
     const targetPath = `${HOME_DIR}/${entry.name}`;
-    if (!existsSync3(targetPath))
+    if (!existsSync2(targetPath))
       return false;
     try {
       const stat = lstatSync2(targetPath);
@@ -1242,73 +1129,241 @@ if (isMainModule) {
   main().catch(console.error);
 }
 
-// src/cli/pkg-sync.ts
-import { parseArgs as parseArgs2 } from "util";
-
-// src/lib/config.ts
-import { existsSync as existsSync4 } from "fs";
-var DEFAULT_CONFIG = {
-  config: {
-    purge: false,
-    purgeInteractive: true,
-    autoUpdate: true
-  },
-  taps: [],
-  packages: [],
-  casks: [],
-  mas: {}
-};
-async function loadPkgConfig(path) {
-  await ensureConfigDir();
-  const configPath = path || PKG_CONFIG_PATH;
-  if (!existsSync4(configPath)) {
-    await savePkgConfig(DEFAULT_CONFIG, configPath);
-    return DEFAULT_CONFIG;
+// src/components/menus/ConfigMenu.tsx
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+function ConfigMenu({ onBack }) {
+  const { state, output, success, isRunning, isResult, execute, reset } = useMenuAction();
+  useBackNavigation({ enabled: state === "menu", onBack });
+  const handleAction = async (action) => {
+    if (action === "back") {
+      onBack();
+      return;
+    }
+    await execute(() => runConfigManager([action]));
+  };
+  if (isRunning) {
+    return /* @__PURE__ */ jsxDEV12(LoadingPanel, {
+      title: "Config Manager"
+    }, undefined, false, undefined, this);
   }
-  return readJson(configPath);
-}
-async function savePkgConfig(config, path) {
-  await ensureConfigDir();
-  const configPath = path || PKG_CONFIG_PATH;
-  await writeFile(configPath, JSON.stringify(config, null, 2));
-}
-async function loadPkgLock() {
-  if (!existsSync4(PKG_LOCK_PATH)) {
-    return null;
+  if (isResult) {
+    return /* @__PURE__ */ jsxDEV12(CommandOutput, {
+      title: "Config Manager",
+      output,
+      success,
+      onDismiss: reset
+    }, undefined, false, undefined, this);
   }
-  return readJson(PKG_LOCK_PATH);
-}
-async function savePkgLock(lock) {
-  await ensureConfigDir();
-  await writeFile(PKG_LOCK_PATH, JSON.stringify(lock, null, 2));
+  return /* @__PURE__ */ jsxDEV12(Panel, {
+    title: "Config Manager",
+    children: /* @__PURE__ */ jsxDEV12(VimSelect, {
+      options: [
+        { label: "Stow all packages", value: "stow-all" },
+        { label: "Unstow all packages", value: "unstow-all" },
+        { label: "Check status", value: "status" },
+        { label: "List packages", value: "list" },
+        { label: "Back", value: "back" }
+      ],
+      onChange: handleAction
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 }
 
-// src/lib/lockfile.ts
-async function fetchInstalledVersions() {
-  const config = await loadPkgConfig();
-  const now = new Date().toISOString();
-  const formulas = {};
-  const casks = {};
-  if (config.packages.length > 0) {
-    const result = await exec([
-      "brew",
-      "info",
-      "--json=v2",
-      ...config.packages
-    ]);
-    if (result.success && result.stdout) {
-      const info = JSON.parse(result.stdout);
-      for (const formula of info.formulae) {
-        if (formula.installed.length > 0) {
-          formulas[formula.name] = {
-            version: formula.installed[0].version,
-            tap: formula.tap,
-            installedAt: now
-          };
-        }
-      }
+// src/components/menus/PackageMenu.tsx
+import { useState as useState6, useCallback as useCallback2, useMemo as useMemo2, useRef } from "react";
+import { Box as Box12, Text as Text11, useInput as useInput7 } from "ink";
+
+// src/components/ScrollableLog.tsx
+import { useState as useState5, useEffect as useEffect3, useMemo } from "react";
+import { Box as Box10, Text as Text9, useInput as useInput5 } from "ink";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+function ScrollableLog({
+  lines,
+  maxHeight,
+  autoScroll = true,
+  showScrollHint = true
+}) {
+  const { rows } = useTerminalSize();
+  const visibleLines = maxHeight || Math.max(5, rows - 12);
+  const [scrollOffset, setScrollOffset] = useState5(0);
+  const [isAutoScrolling, setIsAutoScrolling] = useState5(autoScroll);
+  const totalLines = lines.length;
+  const maxOffset = Math.max(0, totalLines - visibleLines);
+  useEffect3(() => {
+    if (isAutoScrolling) {
+      setScrollOffset(maxOffset);
     }
-  }
+  }, [totalLines, maxOffset, isAutoScrolling]);
+  useInput5((input, key) => {
+    if (key.downArrow || input === "j") {
+      setIsAutoScrolling(false);
+      setScrollOffset((prev) => Math.min(prev + 1, maxOffset));
+    }
+    if (key.upArrow || input === "k") {
+      setIsAutoScrolling(false);
+      setScrollOffset((prev) => Math.max(prev - 1, 0));
+    }
+    if (input === "G") {
+      setIsAutoScrolling(true);
+      setScrollOffset(maxOffset);
+    }
+    if (input === "g") {
+      setIsAutoScrolling(false);
+      setScrollOffset(0);
+    }
+  });
+  const visibleContent = useMemo(() => {
+    return lines.slice(scrollOffset, scrollOffset + visibleLines);
+  }, [lines, scrollOffset, visibleLines]);
+  const showScrollUp = scrollOffset > 0;
+  const showScrollDown = scrollOffset < maxOffset;
+  return /* @__PURE__ */ jsxDEV13(Box10, {
+    flexDirection: "column",
+    children: [
+      showScrollHint && showScrollUp && /* @__PURE__ */ jsxDEV13(Text9, {
+        dimColor: true,
+        children: [
+          "  ↑ ",
+          scrollOffset,
+          " more line",
+          scrollOffset !== 1 ? "s" : ""
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13(Box10, {
+        flexDirection: "column",
+        height: visibleLines,
+        overflow: "hidden",
+        children: visibleContent.map((line, i) => /* @__PURE__ */ jsxDEV13(Text9, {
+          children: line
+        }, scrollOffset + i, false, undefined, this))
+      }, undefined, false, undefined, this),
+      showScrollHint && showScrollDown && /* @__PURE__ */ jsxDEV13(Text9, {
+        dimColor: true,
+        children: [
+          "  ↓ ",
+          maxOffset - scrollOffset,
+          " more line",
+          maxOffset - scrollOffset !== 1 ? "s" : ""
+        ]
+      }, undefined, true, undefined, this),
+      showScrollHint && totalLines > visibleLines && /* @__PURE__ */ jsxDEV13(Text9, {
+        dimColor: true,
+        children: [
+          "j/k scroll • g top • G bottom ",
+          isAutoScrolling ? "(auto-scroll)" : ""
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/PromptInput.tsx
+import { Box as Box11, Text as Text10, useInput as useInput6 } from "ink";
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+function PromptInput({
+  question,
+  options = ["y", "n"],
+  onAnswer
+}) {
+  useInput6((input) => {
+    const lower = input.toLowerCase();
+    if (options.includes(lower)) {
+      onAnswer(lower);
+    }
+  });
+  return /* @__PURE__ */ jsxDEV14(Box11, {
+    marginTop: 1,
+    borderStyle: "single",
+    borderColor: colors.accent,
+    paddingX: 1,
+    children: /* @__PURE__ */ jsxDEV14(Text10, {
+      children: [
+        question,
+        " ",
+        /* @__PURE__ */ jsxDEV14(Text10, {
+          color: colors.accent,
+          children: [
+            "[",
+            options.join("/"),
+            "]"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV14(Text10, {
+          dimColor: true,
+          children: ": "
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/cli/pkg-sync.ts
+import { parseArgs as parseArgs2 } from "util";
+
+// src/lib/config.ts
+import { existsSync as existsSync3 } from "fs";
+var DEFAULT_CONFIG = {
+  config: {
+    purge: false,
+    purgeInteractive: true,
+    autoUpdate: true
+  },
+  taps: [],
+  packages: [],
+  casks: [],
+  mas: {}
+};
+async function loadPkgConfig(path) {
+  await ensureConfigDir();
+  const configPath = path || PKG_CONFIG_PATH;
+  if (!existsSync3(configPath)) {
+    await savePkgConfig(DEFAULT_CONFIG, configPath);
+    return DEFAULT_CONFIG;
+  }
+  return readJson(configPath);
+}
+async function savePkgConfig(config, path) {
+  await ensureConfigDir();
+  const configPath = path || PKG_CONFIG_PATH;
+  await writeFile(configPath, JSON.stringify(config, null, 2));
+}
+async function loadPkgLock() {
+  if (!existsSync3(PKG_LOCK_PATH)) {
+    return null;
+  }
+  return readJson(PKG_LOCK_PATH);
+}
+async function savePkgLock(lock) {
+  await ensureConfigDir();
+  await writeFile(PKG_LOCK_PATH, JSON.stringify(lock, null, 2));
+}
+
+// src/lib/lockfile.ts
+async function fetchInstalledVersions() {
+  const config = await loadPkgConfig();
+  const now = new Date().toISOString();
+  const formulas = {};
+  const casks = {};
+  if (config.packages.length > 0) {
+    const result = await exec([
+      "brew",
+      "info",
+      "--json=v2",
+      ...config.packages
+    ]);
+    if (result.success && result.stdout) {
+      const info = JSON.parse(result.stdout);
+      for (const formula of info.formulae) {
+        if (formula.installed.length > 0) {
+          formulas[formula.name] = {
+            version: formula.installed[0].version,
+            tap: formula.tap,
+            installedAt: now
+          };
+        }
+      }
+    }
+  }
   if (config.casks.length > 0) {
     const result = await exec([
       "brew",
@@ -2054,277 +2109,36 @@ if (isMainModule3) {
   main3().catch(console.error);
 }
 
-// src/cli/set-theme.ts
-import { parseArgs as parseArgs4 } from "util";
-import { readdirSync as readdirSync4, existsSync as existsSync5, rmSync, symlinkSync, unlinkSync } from "fs";
-import { join as join4 } from "path";
-var colors5 = {
-  red: "\x1B[0;31m",
-  green: "\x1B[0;32m",
-  blue: "\x1B[0;34m",
-  yellow: "\x1B[1;33m",
-  cyan: "\x1B[0;36m",
-  dim: "\x1B[2m",
-  reset: "\x1B[0m"
-};
-async function listThemes() {
-  await ensureConfigDir();
-  if (!existsSync5(THEMES_DIR)) {
-    return [];
-  }
-  const entries = readdirSync4(THEMES_DIR, { withFileTypes: true });
-  const themes = [];
-  for (const entry of entries) {
-    if (entry.isDirectory()) {
-      const themePath = join4(THEMES_DIR, entry.name);
-      const theme = await parseTheme(themePath, entry.name);
-      themes.push(theme);
+// src/components/menus/PackageMenu.tsx
+import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+function PackageMenu({ onBack }) {
+  const [state, setState] = useState6("menu");
+  const [lines, setLines] = useState6([]);
+  const [output, setOutput] = useState6("");
+  const [isStreamingOp, setIsStreamingOp] = useState6(true);
+  const [pendingPrompt, setPendingPrompt] = useState6(null);
+  const [success, setSuccess] = useState6(true);
+  const isRunningRef = useRef(false);
+  useInput7((input, key) => {
+    if (state === "menu" && (key.escape || key.leftArrow || input === "h")) {
+      onBack();
     }
-  }
-  return themes;
-}
-function clearDirectory(dir) {
-  if (existsSync5(dir)) {
-    const entries = readdirSync4(dir, { withFileTypes: true });
-    for (const entry of entries) {
-      const fullPath = join4(dir, entry.name);
-      if (entry.isSymbolicLink() || entry.isFile()) {
-        unlinkSync(fullPath);
-      } else if (entry.isDirectory()) {
-        rmSync(fullPath, { recursive: true, force: true });
-      }
+    if (state === "result") {
+      setState("menu");
+      setLines([]);
     }
-  }
-}
-function createSymlink(source, target) {
-  if (existsSync5(target)) {
-    unlinkSync(target);
-  }
-  symlinkSync(source, target);
-}
-async function applyTheme(themeName) {
-  const themeDir = join4(THEMES_DIR, themeName);
-  if (!existsSync5(themeDir)) {
-    return { output: `Theme '${themeName}' not found`, success: false };
-  }
-  await ensureConfigDir();
-  await ensureDir2(THEME_TARGET_DIR);
-  const theme = await parseTheme(themeDir, themeName);
-  clearDirectory(THEME_TARGET_DIR);
-  if (existsSync5(BACKGROUNDS_TARGET_DIR)) {
-    rmSync(BACKGROUNDS_TARGET_DIR, { recursive: true, force: true });
-  }
-  const entries = readdirSync4(themeDir, { withFileTypes: true });
-  for (const entry of entries) {
-    const source = join4(themeDir, entry.name);
-    if (entry.isFile() && entry.name !== "theme.yaml" && entry.name !== "light.mode") {
-      const target = join4(THEME_TARGET_DIR, entry.name);
-      createSymlink(source, target);
-    }
-  }
-  if (theme.hasBackgrounds) {
-    const backgroundsSource = join4(themeDir, "backgrounds");
-    createSymlink(backgroundsSource, BACKGROUNDS_TARGET_DIR);
-  }
-  let output = `Theme '${theme.name}' applied successfully`;
-  if (theme.metadata?.author) {
-    output += `
-Author: ${theme.metadata.author}`;
-  }
-  if (theme.hasBackgrounds) {
-    output += `
-Wallpapers available at: ~/.config/formalconf/current/backgrounds/`;
-  }
-  if (theme.isLightMode) {
-    output += `
-Note: This is a light mode theme`;
-  }
-  return { output, success: true };
-}
-async function showThemeInfo(themeName) {
-  const themeDir = join4(THEMES_DIR, themeName);
-  if (!existsSync5(themeDir)) {
-    console.error(`${colors5.red}Error: Theme '${themeName}' not found${colors5.reset}`);
-    process.exit(1);
-  }
-  const theme = await parseTheme(themeDir, themeName);
-  console.log(`
-${colors5.cyan}Theme: ${theme.name}${colors5.reset}`);
-  if (theme.metadata) {
-    if (theme.metadata.author)
-      console.log(`Author: ${theme.metadata.author}`);
-    if (theme.metadata.description)
-      console.log(`Description: ${theme.metadata.description}`);
-    if (theme.metadata.version)
-      console.log(`Version: ${theme.metadata.version}`);
-    if (theme.metadata.source)
-      console.log(`Source: ${theme.metadata.source}`);
-  }
-  console.log(`
-Files (${theme.files.length}):`);
-  for (const file of theme.files) {
-    console.log(`  ${colors5.blue}•${colors5.reset} ${file.name}`);
-  }
-  if (theme.hasBackgrounds) {
-    console.log(`
-${colors5.green}Has wallpapers${colors5.reset}`);
-  }
-  if (theme.hasPreview) {
-    console.log(`${colors5.green}Has preview image${colors5.reset}`);
-  }
-  if (theme.isLightMode) {
-    console.log(`${colors5.yellow}Light mode theme${colors5.reset}`);
-  }
-}
-async function runSetTheme(themeName) {
-  return applyTheme(themeName);
-}
-async function main4() {
-  const { positionals, values } = parseArgs4({
-    args: process.argv.slice(2),
-    options: {
-      info: { type: "boolean", short: "i" }
-    },
-    allowPositionals: true
-  });
-  const [themeName] = positionals;
-  if (!themeName) {
-    const themes = await listThemes();
-    if (themes.length === 0) {
-      console.log(`${colors5.yellow}No themes available.${colors5.reset}`);
-      console.log(`This system is compatible with omarchy themes.`);
-      console.log(`
-Add themes to: ${colors5.cyan}~/.config/formalconf/themes/${colors5.reset}`);
-      process.exit(0);
-    }
-    console.log(`${colors5.cyan}Usage: formalconf theme <theme-name>${colors5.reset}`);
-    console.log(`       formalconf theme --info <theme-name>
-`);
-    console.log("Available themes:");
-    for (const theme of themes) {
-      const extras = [];
-      if (theme.hasBackgrounds)
-        extras.push("wallpapers");
-      if (theme.isLightMode)
-        extras.push("light");
-      const suffix = extras.length ? ` ${colors5.dim}(${extras.join(", ")})${colors5.reset}` : "";
-      console.log(`  ${colors5.blue}•${colors5.reset} ${theme.name}${suffix}`);
-    }
-    process.exit(0);
-  }
-  if (values.info) {
-    await showThemeInfo(themeName);
-  } else {
-    const result = await applyTheme(themeName);
-    console.log(result.success ? `${colors5.green}${result.output}${colors5.reset}` : `${colors5.red}${result.output}${colors5.reset}`);
-  }
-}
-var isMainModule4 = process.argv[1]?.includes("set-theme");
-if (isMainModule4) {
-  main4().catch(console.error);
-}
-
-// src/cli/formalconf.tsx
-import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
-function MainMenu({ onSelect }) {
-  const { exit } = useApp();
-  return /* @__PURE__ */ jsxDEV12(Panel, {
-    title: "Main Menu",
-    children: /* @__PURE__ */ jsxDEV12(VimSelect, {
-      options: [
-        { label: "Config Manager", value: "config" },
-        { label: "Package Sync", value: "packages" },
-        { label: "Set Theme", value: "themes" },
-        { label: "Exit", value: "exit" }
-      ],
-      onChange: (value) => {
-        if (value === "exit") {
-          exit();
-          return;
-        }
-        onSelect(value);
-      }
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-function ConfigMenu({ onBack }) {
-  const [state, setState] = useState5("menu");
-  const [output, setOutput] = useState5("");
-  const [success, setSuccess] = useState5(true);
-  useInput5((input, key) => {
-    if (state === "menu" && (key.escape || key.leftArrow || input === "h")) {
-      onBack();
-    }
-  });
-  const handleAction = async (action) => {
-    if (action === "back") {
-      onBack();
-      return;
-    }
-    setState("running");
-    const result = await runConfigManager([action]);
-    setOutput(result.output);
-    setSuccess(result.success);
-    setState("result");
-  };
-  if (state === "running") {
-    return /* @__PURE__ */ jsxDEV12(Panel, {
-      title: "Config Manager",
-      children: /* @__PURE__ */ jsxDEV12(Spinner, {
-        label: "Processing..."
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  if (state === "result") {
-    return /* @__PURE__ */ jsxDEV12(CommandOutput, {
-      title: "Config Manager",
-      output,
-      success,
-      onDismiss: () => setState("menu")
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV12(Panel, {
-    title: "Config Manager",
-    children: /* @__PURE__ */ jsxDEV12(VimSelect, {
-      options: [
-        { label: "Stow all packages", value: "stow-all" },
-        { label: "Unstow all packages", value: "unstow-all" },
-        { label: "Check status", value: "status" },
-        { label: "List packages", value: "list" },
-        { label: "Back", value: "back" }
-      ],
-      onChange: handleAction
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-function PackageMenu({ onBack }) {
-  const [state, setState] = useState5("menu");
-  const [lines, setLines] = useState5([]);
-  const [output, setOutput] = useState5("");
-  const [isStreamingOp, setIsStreamingOp] = useState5(true);
-  const [pendingPrompt, setPendingPrompt] = useState5(null);
-  const [success, setSuccess] = useState5(true);
-  const isRunningRef = useRef(false);
-  useInput5((input, key) => {
-    if (state === "menu" && (key.escape || key.leftArrow || input === "h")) {
-      onBack();
-    }
-    if (state === "result") {
-      setState("menu");
-      setLines([]);
-    }
-  });
-  const callbacks = useMemo2(() => ({
-    onLog: (line) => {
-      setLines((prev) => [...prev, line]);
-    },
-    onPrompt: (question, options) => {
-      return new Promise((resolve) => {
-        setPendingPrompt({ question, options, resolve });
-      });
+  });
+  const callbacks = useMemo2(() => ({
+    onLog: (line) => {
+      setLines((prev) => [...prev, line]);
+    },
+    onPrompt: (question, options) => {
+      return new Promise((resolve) => {
+        setPendingPrompt({ question, options, resolve });
+      });
     }
   }), []);
-  const handlePromptAnswer = useCallback((answer) => {
+  const handlePromptAnswer = useCallback2((answer) => {
     if (pendingPrompt) {
       setLines((prev) => [...prev, `> ${answer}`]);
       pendingPrompt.resolve(answer);
@@ -2382,20 +2196,17 @@ function PackageMenu({ onBack }) {
   };
   if (state === "running") {
     if (!isStreamingOp) {
-      return /* @__PURE__ */ jsxDEV12(Panel, {
-        title: "Package Sync",
-        children: /* @__PURE__ */ jsxDEV12(Spinner, {
-          label: "Processing..."
-        }, undefined, false, undefined, this)
+      return /* @__PURE__ */ jsxDEV15(LoadingPanel, {
+        title: "Package Sync"
       }, undefined, false, undefined, this);
     }
-    return /* @__PURE__ */ jsxDEV12(Panel, {
+    return /* @__PURE__ */ jsxDEV15(Panel, {
       title: "Package Sync",
       children: [
-        /* @__PURE__ */ jsxDEV12(ScrollableLog, {
+        /* @__PURE__ */ jsxDEV15(ScrollableLog, {
           lines
         }, undefined, false, undefined, this),
-        pendingPrompt && /* @__PURE__ */ jsxDEV12(PromptInput, {
+        pendingPrompt && /* @__PURE__ */ jsxDEV15(PromptInput, {
           question: pendingPrompt.question,
           options: pendingPrompt.options,
           onAnswer: handlePromptAnswer
@@ -2405,38 +2216,38 @@ function PackageMenu({ onBack }) {
   }
   if (state === "result") {
     if (!isStreamingOp) {
-      return /* @__PURE__ */ jsxDEV12(CommandOutput, {
+      return /* @__PURE__ */ jsxDEV15(CommandOutput, {
         title: "Package Sync",
         output,
         success,
         onDismiss: () => setState("menu")
       }, undefined, false, undefined, this);
     }
-    return /* @__PURE__ */ jsxDEV12(Panel, {
+    return /* @__PURE__ */ jsxDEV15(Panel, {
       title: "Package Sync",
       borderColor: success ? colors.success : colors.error,
       children: [
-        /* @__PURE__ */ jsxDEV12(ScrollableLog, {
+        /* @__PURE__ */ jsxDEV15(ScrollableLog, {
           lines,
           autoScroll: false
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12(Box12, {
+        /* @__PURE__ */ jsxDEV15(Box12, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsxDEV12(Text11, {
+          children: /* @__PURE__ */ jsxDEV15(Text11, {
             color: success ? colors.success : colors.error,
             children: success ? "Done" : "Failed"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12(Text11, {
+        /* @__PURE__ */ jsxDEV15(Text11, {
           dimColor: true,
           children: "Press any key to continue..."
         }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV12(Panel, {
+  return /* @__PURE__ */ jsxDEV15(Panel, {
     title: "Package Sync",
-    children: /* @__PURE__ */ jsxDEV12(VimSelect, {
+    children: /* @__PURE__ */ jsxDEV15(VimSelect, {
       options: [
         { label: "Sync packages", value: "sync" },
         { label: "Sync with purge", value: "sync-purge" },
@@ -2450,32 +2261,74 @@ function PackageMenu({ onBack }) {
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
-function ThemeMenu({ onBack }) {
-  const [themes, setThemes] = useState5([]);
-  const [loading, setLoading] = useState5(true);
-  const [selectedIndex, setSelectedIndex] = useState5(0);
-  const [state, setState] = useState5("menu");
-  const [output, setOutput] = useState5("");
-  const [success, setSuccess] = useState5(true);
+
+// src/components/menus/ThemeMenu.tsx
+import { useState as useState8, useEffect as useEffect5, useMemo as useMemo4 } from "react";
+import { Box as Box14, Text as Text13 } from "ink";
+import { existsSync as existsSync6, readdirSync as readdirSync5 } from "fs";
+import { join as join5 } from "path";
+
+// src/components/ThemeCard.tsx
+import { Box as Box13, Text as Text12 } from "ink";
+import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
+function ThemeCard({ theme, isSelected, width }) {
+  const borderColor = isSelected ? colors.accent : colors.border;
+  const nameColor = isSelected ? colors.primary : colors.text;
+  const indicators = [];
+  if (theme.hasBackgrounds)
+    indicators.push("bg");
+  if (theme.isLightMode)
+    indicators.push("light");
+  const indicatorText = indicators.length > 0 ? ` [${indicators.join(" ")}]` : "";
+  return /* @__PURE__ */ jsxDEV16(Box13, {
+    flexDirection: "column",
+    width,
+    borderStyle: borderStyles.panel,
+    borderColor,
+    paddingX: 1,
+    children: /* @__PURE__ */ jsxDEV16(Box13, {
+      children: [
+        /* @__PURE__ */ jsxDEV16(Text12, {
+          color: isSelected ? colors.accent : colors.primaryDim,
+          children: isSelected ? "● " : "  "
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV16(Text12, {
+          color: nameColor,
+          bold: true,
+          wrap: "truncate",
+          children: theme.name
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV16(Text12, {
+          color: colors.primaryDim,
+          children: indicatorText
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/hooks/useThemeGrid.ts
+import { useState as useState7, useEffect as useEffect4 } from "react";
+import { useInput as useInput8 } from "ink";
+function useThemeGrid({
+  itemCount,
+  cardHeight = 3,
+  layoutOverhead = 20,
+  minCardWidth = 28,
+  onSelect,
+  onBack,
+  enabled = true
+}) {
   const { columns, rows } = useTerminalSize();
-  const CARD_HEIGHT = 3;
-  const LAYOUT_OVERHEAD = 20;
-  const cardWidth = useMemo2(() => {
-    const availableWidth = columns - 6;
-    const cardsPerRow2 = Math.max(1, Math.floor(availableWidth / 28));
-    return Math.floor(availableWidth / cardsPerRow2);
-  }, [columns]);
-  const cardsPerRow = useMemo2(() => {
-    const availableWidth = columns - 6;
-    return Math.max(1, Math.floor(availableWidth / 28));
-  }, [columns]);
-  const visibleRows = useMemo2(() => {
-    const availableHeight = rows - LAYOUT_OVERHEAD;
-    return Math.max(1, Math.floor(availableHeight / CARD_HEIGHT));
-  }, [rows]);
+  const [selectedIndex, setSelectedIndex] = useState7(0);
+  const [scrollOffset, setScrollOffset] = useState7(0);
+  const availableWidth = columns - 6;
+  const cardsPerRow = Math.max(1, Math.floor(availableWidth / minCardWidth));
+  const cardWidth = Math.floor(availableWidth / cardsPerRow);
+  const availableHeight = rows - layoutOverhead;
+  const visibleRows = Math.max(1, Math.floor(availableHeight / cardHeight));
   const selectedRow = Math.floor(selectedIndex / cardsPerRow);
-  const totalRows = Math.ceil(themes.length / cardsPerRow);
-  const [scrollOffset, setScrollOffset] = useState5(0);
+  const totalRows = Math.ceil(itemCount / cardsPerRow);
   useEffect4(() => {
     if (selectedRow < scrollOffset) {
       setScrollOffset(selectedRow);
@@ -2483,21 +2336,15 @@ function ThemeMenu({ onBack }) {
       setScrollOffset(selectedRow - visibleRows + 1);
     }
   }, [selectedRow, scrollOffset, visibleRows]);
-  const visibleThemes = useMemo2(() => {
-    const startIdx = scrollOffset * cardsPerRow;
-    const endIdx = (scrollOffset + visibleRows) * cardsPerRow;
-    return themes.slice(startIdx, endIdx);
-  }, [themes, scrollOffset, visibleRows, cardsPerRow]);
-  const visibleStartIndex = scrollOffset * cardsPerRow;
-  useInput5((input, key) => {
-    if (state !== "menu" || loading)
+  useInput8((input, key) => {
+    if (!enabled)
       return;
-    if (key.escape) {
+    if (key.escape && onBack) {
       onBack();
       return;
     }
     if (key.rightArrow || input === "l") {
-      if (selectedIndex < themes.length - 1) {
+      if (selectedIndex < itemCount - 1) {
         setSelectedIndex((i) => i + 1);
       }
     }
@@ -2508,7 +2355,7 @@ function ThemeMenu({ onBack }) {
     }
     if (key.downArrow || input === "j") {
       const nextIndex = selectedIndex + cardsPerRow;
-      if (nextIndex < themes.length) {
+      if (nextIndex < itemCount) {
         setSelectedIndex(nextIndex);
       }
     }
@@ -2518,78 +2365,348 @@ function ThemeMenu({ onBack }) {
         setSelectedIndex(prevIndex);
       }
     }
-    if (key.return) {
-      applyTheme2(themes[selectedIndex]);
+    if (key.return && onSelect) {
+      onSelect(selectedIndex);
     }
   });
-  useEffect4(() => {
-    async function loadThemes() {
-      if (!existsSync6(THEMES_DIR)) {
-        setThemes([]);
-        setLoading(false);
-        return;
-      }
-      const entries = readdirSync5(THEMES_DIR, { withFileTypes: true });
-      const loadedThemes = [];
-      for (const entry of entries) {
-        if (entry.isDirectory()) {
-          const themePath = join5(THEMES_DIR, entry.name);
-          const theme = await parseTheme(themePath, entry.name);
-          loadedThemes.push(theme);
+  const visibleStartIndex = scrollOffset * cardsPerRow;
+  const visibleEndIndex = (scrollOffset + visibleRows) * cardsPerRow;
+  return {
+    cardsPerRow,
+    cardWidth,
+    visibleRows,
+    scrollOffset,
+    selectedIndex,
+    visibleStartIndex,
+    visibleEndIndex,
+    showScrollUp: scrollOffset > 0,
+    showScrollDown: scrollOffset + visibleRows < totalRows,
+    gridHeight: visibleRows * cardHeight,
+    totalRows
+  };
+}
+
+// src/lib/theme-parser.ts
+import { existsSync as existsSync4, readdirSync as readdirSync3 } from "fs";
+import { join as join3 } from "path";
+function parseYaml(content) {
+  const result = {};
+  const lines = content.split(`
+`);
+  let currentSection = null;
+  let currentKey = "";
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#"))
+      continue;
+    const indentLevel = line.search(/\S/);
+    const match = trimmed.match(/^([\w-]+):\s*(.*)$/);
+    if (match) {
+      const [, key, value] = match;
+      if (indentLevel === 0) {
+        if (value) {
+          result[key] = value.replace(/^["']|["']$/g, "");
+        } else {
+          currentKey = key;
+          currentSection = {};
+          result[key] = currentSection;
         }
+      } else if (currentSection) {
+        currentSection[key] = value.replace(/^["']|["']$/g, "");
       }
-      setThemes(loadedThemes);
+    }
+  }
+  return result;
+}
+async function parseThemeMetadata(themePath) {
+  const yamlPath = join3(themePath, "theme.yaml");
+  if (!existsSync4(yamlPath)) {
+    return;
+  }
+  try {
+    const content = await readText(yamlPath);
+    const parsed = parseYaml(content);
+    return {
+      name: parsed.name || "",
+      author: parsed.author,
+      description: parsed.description,
+      version: parsed.version,
+      source: parsed.source,
+      colors: parsed.colors
+    };
+  } catch {
+    return;
+  }
+}
+function parseThemeFiles(themePath) {
+  const entries = readdirSync3(themePath, { withFileTypes: true });
+  return entries.filter((e) => e.isFile() && !e.name.startsWith(".") && e.name !== "theme.yaml" && e.name !== "light.mode").map((e) => ({
+    name: e.name,
+    path: join3(themePath, e.name),
+    application: e.name.replace(/\.(conf|theme|lua|toml|css|json|ini)$/, "")
+  }));
+}
+async function parseTheme(themePath, themeName) {
+  const files = parseThemeFiles(themePath);
+  const metadata = await parseThemeMetadata(themePath);
+  return {
+    name: metadata?.name || themeName,
+    path: themePath,
+    files,
+    metadata,
+    hasBackgrounds: existsSync4(join3(themePath, "backgrounds")),
+    hasPreview: existsSync4(join3(themePath, "preview.png")),
+    isLightMode: existsSync4(join3(themePath, "light.mode"))
+  };
+}
+
+// src/cli/set-theme.ts
+import { parseArgs as parseArgs4 } from "util";
+import { readdirSync as readdirSync4, existsSync as existsSync5, rmSync, symlinkSync, unlinkSync } from "fs";
+import { join as join4 } from "path";
+var colors5 = {
+  red: "\x1B[0;31m",
+  green: "\x1B[0;32m",
+  blue: "\x1B[0;34m",
+  yellow: "\x1B[1;33m",
+  cyan: "\x1B[0;36m",
+  dim: "\x1B[2m",
+  reset: "\x1B[0m"
+};
+async function listThemes() {
+  await ensureConfigDir();
+  if (!existsSync5(THEMES_DIR)) {
+    return [];
+  }
+  const entries = readdirSync4(THEMES_DIR, { withFileTypes: true });
+  const themes = [];
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      const themePath = join4(THEMES_DIR, entry.name);
+      const theme = await parseTheme(themePath, entry.name);
+      themes.push(theme);
+    }
+  }
+  return themes;
+}
+function clearDirectory(dir) {
+  if (existsSync5(dir)) {
+    const entries = readdirSync4(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = join4(dir, entry.name);
+      if (entry.isSymbolicLink() || entry.isFile()) {
+        unlinkSync(fullPath);
+      } else if (entry.isDirectory()) {
+        rmSync(fullPath, { recursive: true, force: true });
+      }
+    }
+  }
+}
+function createSymlink(source, target) {
+  if (existsSync5(target)) {
+    unlinkSync(target);
+  }
+  symlinkSync(source, target);
+}
+async function applyTheme(themeName) {
+  const themeDir = join4(THEMES_DIR, themeName);
+  if (!existsSync5(themeDir)) {
+    return { output: `Theme '${themeName}' not found`, success: false };
+  }
+  await ensureConfigDir();
+  await ensureDir2(THEME_TARGET_DIR);
+  const theme = await parseTheme(themeDir, themeName);
+  clearDirectory(THEME_TARGET_DIR);
+  if (existsSync5(BACKGROUNDS_TARGET_DIR)) {
+    rmSync(BACKGROUNDS_TARGET_DIR, { recursive: true, force: true });
+  }
+  const entries = readdirSync4(themeDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const source = join4(themeDir, entry.name);
+    if (entry.isFile() && entry.name !== "theme.yaml" && entry.name !== "light.mode") {
+      const target = join4(THEME_TARGET_DIR, entry.name);
+      createSymlink(source, target);
+    }
+  }
+  if (theme.hasBackgrounds) {
+    const backgroundsSource = join4(themeDir, "backgrounds");
+    createSymlink(backgroundsSource, BACKGROUNDS_TARGET_DIR);
+  }
+  let output = `Theme '${theme.name}' applied successfully`;
+  if (theme.metadata?.author) {
+    output += `
+Author: ${theme.metadata.author}`;
+  }
+  if (theme.hasBackgrounds) {
+    output += `
+Wallpapers available at: ~/.config/formalconf/current/backgrounds/`;
+  }
+  if (theme.isLightMode) {
+    output += `
+Note: This is a light mode theme`;
+  }
+  return { output, success: true };
+}
+async function showThemeInfo(themeName) {
+  const themeDir = join4(THEMES_DIR, themeName);
+  if (!existsSync5(themeDir)) {
+    console.error(`${colors5.red}Error: Theme '${themeName}' not found${colors5.reset}`);
+    process.exit(1);
+  }
+  const theme = await parseTheme(themeDir, themeName);
+  console.log(`
+${colors5.cyan}Theme: ${theme.name}${colors5.reset}`);
+  if (theme.metadata) {
+    if (theme.metadata.author)
+      console.log(`Author: ${theme.metadata.author}`);
+    if (theme.metadata.description)
+      console.log(`Description: ${theme.metadata.description}`);
+    if (theme.metadata.version)
+      console.log(`Version: ${theme.metadata.version}`);
+    if (theme.metadata.source)
+      console.log(`Source: ${theme.metadata.source}`);
+  }
+  console.log(`
+Files (${theme.files.length}):`);
+  for (const file of theme.files) {
+    console.log(`  ${colors5.blue}•${colors5.reset} ${file.name}`);
+  }
+  if (theme.hasBackgrounds) {
+    console.log(`
+${colors5.green}Has wallpapers${colors5.reset}`);
+  }
+  if (theme.hasPreview) {
+    console.log(`${colors5.green}Has preview image${colors5.reset}`);
+  }
+  if (theme.isLightMode) {
+    console.log(`${colors5.yellow}Light mode theme${colors5.reset}`);
+  }
+}
+async function runSetTheme(themeName) {
+  return applyTheme(themeName);
+}
+async function main4() {
+  const { positionals, values } = parseArgs4({
+    args: process.argv.slice(2),
+    options: {
+      info: { type: "boolean", short: "i" }
+    },
+    allowPositionals: true
+  });
+  const [themeName] = positionals;
+  if (!themeName) {
+    const themes = await listThemes();
+    if (themes.length === 0) {
+      console.log(`${colors5.yellow}No themes available.${colors5.reset}`);
+      console.log(`This system is compatible with omarchy themes.`);
+      console.log(`
+Add themes to: ${colors5.cyan}~/.config/formalconf/themes/${colors5.reset}`);
+      process.exit(0);
+    }
+    console.log(`${colors5.cyan}Usage: formalconf theme <theme-name>${colors5.reset}`);
+    console.log(`       formalconf theme --info <theme-name>
+`);
+    console.log("Available themes:");
+    for (const theme of themes) {
+      const extras = [];
+      if (theme.hasBackgrounds)
+        extras.push("wallpapers");
+      if (theme.isLightMode)
+        extras.push("light");
+      const suffix = extras.length ? ` ${colors5.dim}(${extras.join(", ")})${colors5.reset}` : "";
+      console.log(`  ${colors5.blue}•${colors5.reset} ${theme.name}${suffix}`);
+    }
+    process.exit(0);
+  }
+  if (values.info) {
+    await showThemeInfo(themeName);
+  } else {
+    const result = await applyTheme(themeName);
+    console.log(result.success ? `${colors5.green}${result.output}${colors5.reset}` : `${colors5.red}${result.output}${colors5.reset}`);
+  }
+}
+var isMainModule4 = process.argv[1]?.includes("set-theme");
+if (isMainModule4) {
+  main4().catch(console.error);
+}
+
+// src/components/menus/ThemeMenu.tsx
+import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
+function ThemeMenu({ onBack }) {
+  const [themes, setThemes] = useState8([]);
+  const [loading, setLoading] = useState8(true);
+  const { state, output, success, isRunning, isResult, execute, reset } = useMenuAction();
+  const grid = useThemeGrid({
+    itemCount: themes.length,
+    onSelect: (index) => applyTheme2(themes[index]),
+    onBack,
+    enabled: state === "menu" && !loading && themes.length > 0
+  });
+  useEffect5(() => {
+    async function loadThemes() {
+      if (!existsSync6(THEMES_DIR)) {
+        setThemes([]);
+        setLoading(false);
+        return;
+      }
+      const entries = readdirSync5(THEMES_DIR, { withFileTypes: true });
+      const loadedThemes = [];
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          const themePath = join5(THEMES_DIR, entry.name);
+          const theme = await parseTheme(themePath, entry.name);
+          loadedThemes.push(theme);
+        }
+      }
+      setThemes(loadedThemes);
       setLoading(false);
     }
     loadThemes();
   }, []);
   const applyTheme2 = async (theme) => {
-    setState("running");
     const themeName = theme.path.split("/").pop();
-    const result = await runSetTheme(themeName);
-    setOutput(result.output);
-    setSuccess(result.success);
-    setState("result");
+    await execute(() => runSetTheme(themeName));
   };
-  if (loading || state === "running") {
-    return /* @__PURE__ */ jsxDEV12(Panel, {
+  const visibleThemes = useMemo4(() => {
+    return themes.slice(grid.visibleStartIndex, grid.visibleEndIndex);
+  }, [themes, grid.visibleStartIndex, grid.visibleEndIndex]);
+  if (loading || isRunning) {
+    return /* @__PURE__ */ jsxDEV17(LoadingPanel, {
       title: "Select Theme",
-      children: /* @__PURE__ */ jsxDEV12(Spinner, {
-        label: loading ? "Loading themes..." : "Applying theme..."
-      }, undefined, false, undefined, this)
+      label: loading ? "Loading themes..." : "Applying theme..."
     }, undefined, false, undefined, this);
   }
-  if (state === "result") {
-    return /* @__PURE__ */ jsxDEV12(CommandOutput, {
+  if (isResult) {
+    return /* @__PURE__ */ jsxDEV17(CommandOutput, {
       title: "Select Theme",
       output,
       success,
-      onDismiss: () => setState("menu")
+      onDismiss: reset
     }, undefined, false, undefined, this);
   }
   if (themes.length === 0) {
-    return /* @__PURE__ */ jsxDEV12(Panel, {
+    return /* @__PURE__ */ jsxDEV17(Panel, {
       title: "Select Theme",
       children: [
-        /* @__PURE__ */ jsxDEV12(Box12, {
+        /* @__PURE__ */ jsxDEV17(Box14, {
           flexDirection: "column",
           children: [
-            /* @__PURE__ */ jsxDEV12(Text11, {
+            /* @__PURE__ */ jsxDEV17(Text13, {
               color: colors.warning,
               children: "No themes available."
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV12(Text11, {
+            /* @__PURE__ */ jsxDEV17(Text13, {
               children: "This system is compatible with omarchy themes."
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV12(Text11, {
+            /* @__PURE__ */ jsxDEV17(Text13, {
               dimColor: true,
               children: "Add themes to ~/.config/formalconf/themes/"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV12(Box12, {
+        /* @__PURE__ */ jsxDEV17(Box14, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsxDEV12(VimSelect, {
+          children: /* @__PURE__ */ jsxDEV17(VimSelect, {
             options: [{ label: "Back", value: "back" }],
             onChange: () => onBack()
           }, undefined, false, undefined, this)
@@ -2597,44 +2714,43 @@ function ThemeMenu({ onBack }) {
       ]
     }, undefined, true, undefined, this);
   }
-  const showScrollUp = scrollOffset > 0;
-  const showScrollDown = scrollOffset + visibleRows < totalRows;
-  const gridHeight = visibleRows * CARD_HEIGHT;
-  return /* @__PURE__ */ jsxDEV12(Panel, {
+  return /* @__PURE__ */ jsxDEV17(Panel, {
     title: "Select Theme",
     children: [
-      showScrollUp && /* @__PURE__ */ jsxDEV12(Text11, {
+      grid.showScrollUp && /* @__PURE__ */ jsxDEV17(Text13, {
         dimColor: true,
         children: [
-          "  ↑ ",
-          scrollOffset,
+          "  ",
+          "↑ ",
+          grid.scrollOffset,
           " more row",
-          scrollOffset > 1 ? "s" : ""
+          grid.scrollOffset > 1 ? "s" : ""
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV12(Box12, {
+      /* @__PURE__ */ jsxDEV17(Box14, {
         flexDirection: "row",
         flexWrap: "wrap",
-        height: gridHeight,
+        height: grid.gridHeight,
         overflow: "hidden",
-        children: visibleThemes.map((theme, index) => /* @__PURE__ */ jsxDEV12(ThemeCard, {
+        children: visibleThemes.map((theme, index) => /* @__PURE__ */ jsxDEV17(ThemeCard, {
           theme,
-          isSelected: visibleStartIndex + index === selectedIndex,
-          width: cardWidth
+          isSelected: grid.visibleStartIndex + index === grid.selectedIndex,
+          width: grid.cardWidth
         }, theme.path, false, undefined, this))
       }, undefined, false, undefined, this),
-      showScrollDown && /* @__PURE__ */ jsxDEV12(Text11, {
+      grid.showScrollDown && /* @__PURE__ */ jsxDEV17(Text13, {
         dimColor: true,
         children: [
-          "  ↓ ",
-          totalRows - scrollOffset - visibleRows,
+          "  ",
+          "↓ ",
+          grid.totalRows - grid.scrollOffset - grid.visibleRows,
           " more row",
-          totalRows - scrollOffset - visibleRows > 1 ? "s" : ""
+          grid.totalRows - grid.scrollOffset - grid.visibleRows > 1 ? "s" : ""
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV12(Box12, {
+      /* @__PURE__ */ jsxDEV17(Box14, {
         marginTop: 1,
-        children: /* @__PURE__ */ jsxDEV12(Text11, {
+        children: /* @__PURE__ */ jsxDEV17(Text13, {
           dimColor: true,
           children: "←→↑↓/hjkl navigate • Enter select • Esc back"
         }, undefined, false, undefined, this)
@@ -2642,65 +2758,25 @@ function ThemeMenu({ onBack }) {
     ]
   }, undefined, true, undefined, this);
 }
-function PrerequisiteError({
-  missing,
-  onExit
-}) {
-  useInput5(() => onExit());
-  return /* @__PURE__ */ jsxDEV12(Layout, {
-    breadcrumb: ["Error"],
-    children: /* @__PURE__ */ jsxDEV12(Panel, {
-      title: "Missing Prerequisites",
-      borderColor: colors.error,
-      children: [
-        /* @__PURE__ */ jsxDEV12(Text11, {
-          color: colors.error,
-          children: "Required tools are not installed:"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12(Box12, {
-          flexDirection: "column",
-          marginTop: 1,
-          children: missing.map((dep) => /* @__PURE__ */ jsxDEV12(Box12, {
-            children: [
-              /* @__PURE__ */ jsxDEV12(Text11, {
-                color: colors.warning,
-                children: [
-                  "• ",
-                  dep.name
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV12(Text11, {
-                dimColor: true,
-                children: [
-                  " — Install: ",
-                  dep.install
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, dep.name, true, undefined, this))
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12(Box12, {
-          marginTop: 1,
-          children: /* @__PURE__ */ jsxDEV12(Text11, {
-            dimColor: true,
-            children: "Press any key to exit..."
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
+
+// src/cli/formalconf.tsx
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+var BREADCRUMBS = {
+  main: ["Main"],
+  config: ["Main", "Config Manager"],
+  packages: ["Main", "Package Sync"],
+  themes: ["Main", "Themes"]
+};
 function App() {
-  const [appState, setAppState] = useState5("loading");
-  const [missingDeps, setMissingDeps] = useState5([]);
-  const [screen, setScreen] = useState5("main");
-  const { exit } = useApp();
-  useInput5((input) => {
-    if (input === "q") {
+  const [appState, setAppState] = useState9("loading");
+  const [missingDeps, setMissingDeps] = useState9([]);
+  const [screen, setScreen] = useState9("main");
+  const { exit } = useApp2();
+  useInput9((input) => {
+    if (input === "q")
       exit();
-    }
   });
-  useEffect4(() => {
+  useEffect6(() => {
     async function init() {
       ensureConfigDir();
       const result = await checkPrerequisites();
@@ -2713,51 +2789,40 @@ function App() {
     }
     init();
   }, []);
-  const getBreadcrumb = () => {
-    switch (screen) {
-      case "config":
-        return ["Main", "Config Manager"];
-      case "packages":
-        return ["Main", "Package Sync"];
-      case "themes":
-        return ["Main", "Themes"];
-      default:
-        return ["Main"];
-    }
-  };
   if (appState === "loading") {
-    return /* @__PURE__ */ jsxDEV12(Layout, {
+    return /* @__PURE__ */ jsxDEV18(Layout, {
       breadcrumb: ["Loading"],
-      children: /* @__PURE__ */ jsxDEV12(Panel, {
+      children: /* @__PURE__ */ jsxDEV18(Panel, {
         title: "FormalConf",
-        children: /* @__PURE__ */ jsxDEV12(Spinner, {
+        children: /* @__PURE__ */ jsxDEV18(Spinner2, {
           label: "Checking prerequisites..."
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
   if (appState === "error") {
-    return /* @__PURE__ */ jsxDEV12(PrerequisiteError, {
+    return /* @__PURE__ */ jsxDEV18(PrerequisiteError, {
       missing: missingDeps,
       onExit: exit
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV12(Layout, {
-    breadcrumb: getBreadcrumb(),
+  const goBack = () => setScreen("main");
+  return /* @__PURE__ */ jsxDEV18(Layout, {
+    breadcrumb: BREADCRUMBS[screen],
     children: [
-      screen === "main" && /* @__PURE__ */ jsxDEV12(MainMenu, {
+      screen === "main" && /* @__PURE__ */ jsxDEV18(MainMenu, {
         onSelect: setScreen
       }, undefined, false, undefined, this),
-      screen === "config" && /* @__PURE__ */ jsxDEV12(ConfigMenu, {
-        onBack: () => setScreen("main")
+      screen === "config" && /* @__PURE__ */ jsxDEV18(ConfigMenu, {
+        onBack: goBack
       }, undefined, false, undefined, this),
-      screen === "packages" && /* @__PURE__ */ jsxDEV12(PackageMenu, {
-        onBack: () => setScreen("main")
+      screen === "packages" && /* @__PURE__ */ jsxDEV18(PackageMenu, {
+        onBack: goBack
       }, undefined, false, undefined, this),
-      screen === "themes" && /* @__PURE__ */ jsxDEV12(ThemeMenu, {
-        onBack: () => setScreen("main")
+      screen === "themes" && /* @__PURE__ */ jsxDEV18(ThemeMenu, {
+        onBack: goBack
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-render(/* @__PURE__ */ jsxDEV12(App, {}, undefined, false, undefined, this));
+render(/* @__PURE__ */ jsxDEV18(App, {}, undefined, false, undefined, this));