formalconf 2.0.1 → 2.0.3

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 useState10, useEffect as useEffect6 } from "react";
+import { render, useApp as useApp2, useInput as useInput10 } 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,15 +32,16 @@ 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
 import { homedir } from "os";
 import { join } from "path";
+import { readdir } from "fs/promises";
 
 // src/lib/runtime.ts
 import { spawn as nodeSpawn } from "child_process";
@@ -354,11 +295,24 @@ async function ensureConfigDir() {
   await ensureDir2(THEME_TARGET_DIR);
   await ensureDir2(BACKGROUNDS_TARGET_DIR);
 }
+async function dirHasContents(path) {
+  try {
+    const entries = await readdir(path);
+    return entries.length > 0;
+  } catch {
+    return false;
+  }
+}
+async function isFirstRun() {
+  const configsExist = await dirHasContents(CONFIGS_DIR);
+  const themesExist = await dirHasContents(THEMES_DIR);
+  return !configsExist && !themesExist;
+}
 
 // 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 +349,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 +390,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 +414,7 @@ function StatusIndicator({
 // package.json
 var package_default = {
   name: "formalconf",
-  version: "2.0.1",
+  version: "2.0.3",
   description: "Dotfiles management TUI for macOS - config management, package sync, and theme switching",
   type: "module",
   main: "./dist/formalconf.js",
@@ -491,11 +467,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 +479,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 +505,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 +526,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 +536,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 +544,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 +562,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 +577,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 +588,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 +628,7 @@ function Panel({
   flexGrow,
   borderColor = colors.border
 }) {
-  return /* @__PURE__ */ jsxDEV7(Box7, {
+  return /* @__PURE__ */ jsxDEV6(Box6, {
     flexDirection: "column",
     width,
     flexGrow,
@@ -660,9 +636,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,281 +649,696 @@ function Panel({
   }, undefined, true, undefined, this);
 }
 
-// src/components/CommandOutput.tsx
-import { Box as Box8, Text as Text7, useInput as useInput2 } from "ink";
-import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
-function CommandOutput({
-  title,
-  output,
-  success = true,
-  onDismiss
-}) {
-  useInput2(() => {
-    onDismiss();
-  });
-  return /* @__PURE__ */ jsxDEV8(Panel, {
-    title,
-    borderColor: success ? colors.success : colors.error,
-    children: [
-      output && /* @__PURE__ */ jsxDEV8(Box8, {
-        flexDirection: "column",
-        marginBottom: 1,
-        children: /* @__PURE__ */ jsxDEV8(Text7, {
-          children: output
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV8(Text7, {
-        color: success ? colors.success : colors.error,
-        children: success ? "Done" : "Failed"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV8(Text7, {
-        dimColor: true,
-        children: "Press any key to continue..."
-      }, undefined, false, undefined, this)
-    ]
-  }, 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, {
+// 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__ */ jsxDEV9(Text8, {
-          color: isSelected ? colors.accent : colors.primaryDim,
-          children: isSelected ? "● " : "  "
+        /* @__PURE__ */ jsxDEV7(Text6, {
+          color: colors.error,
+          children: "Required tools are not installed:"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV9(Text8, {
-          color: nameColor,
-          bold: true,
-          wrap: "truncate",
-          children: theme.name
+        /* @__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__ */ jsxDEV9(Text8, {
-          color: colors.primaryDim,
-          children: indicatorText
+        /* @__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/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
-}) {
-  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));
+// src/components/Onboarding.tsx
+import { useState as useState4 } from "react";
+import { Box as Box9, Text as Text8, useInput as useInput3 } 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 === "G") {
-      setIsAutoScrolling(true);
-      setScrollOffset(maxOffset);
+    if (input === "k" || key.upArrow) {
+      setIndex((i) => i > 0 ? i - 1 : i);
     }
-    if (input === "g") {
-      setIsAutoScrolling(false);
-      setScrollOffset(0);
+    if (input === "l" || key.return) {
+      onChange(options[index].value);
     }
   });
-  const visibleContent = useMemo(() => {
-    return lines.slice(scrollOffset, scrollOffset + visibleLines);
-  }, [lines, scrollOffset, visibleLines]);
-  const showScrollUp = scrollOffset > 0;
-  const showScrollDown = scrollOffset < maxOffset;
-  return /* @__PURE__ */ jsxDEV10(Box10, {
+  return /* @__PURE__ */ jsxDEV8(Box8, {
     flexDirection: "column",
-    children: [
-      showScrollHint && showScrollUp && /* @__PURE__ */ jsxDEV10(Text9, {
-        dimColor: true,
+    children: options.map((opt, i) => /* @__PURE__ */ jsxDEV8(Box8, {
+      children: /* @__PURE__ */ jsxDEV8(Text7, {
+        color: i === index ? colors.primary : undefined,
         children: [
-          "  ↑ ",
-          scrollOffset,
-          " more line",
-          scrollOffset !== 1 ? "s" : ""
+          i === index ? "❯" : " ",
+          " ",
+          opt.label
         ]
-      }, 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,
+      }, undefined, true, undefined, this)
+    }, opt.value, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+
+// src/lib/templates.ts
+import { join as join3 } from "path";
+import { existsSync as existsSync2 } from "fs";
+var EXAMPLE_CONFIG_README = `# Example Stow Config Package
+
+This is an example dotfiles package for use with GNU Stow.
+
+## Structure
+Files are organized to mirror your home directory:
+- \`.config/example-app/config.toml\` -> \`~/.config/example-app/config.toml\`
+- \`.example-app-rc\` -> \`~/.example-app-rc\`
+
+## Usage
+1. Place your dotfiles in this directory structure
+2. Run \`formalconf\` and use Config Manager -> Stow
+3. Symlinks will be created from your home directory
+
+## Creating Your Own
+1. Copy this directory and rename it (e.g., \`git\`, \`zsh\`, \`nvim\`)
+2. Add your dotfiles mirroring your home directory structure
+3. Stow the package to create symlinks
+`;
+var EXAMPLE_CONFIG_TOML = `# Example configuration file
+# This will be symlinked to ~/.config/example-app/config.toml
+
+[settings]
+theme = "default"
+auto_save = true
+
+[keybindings]
+quit = "q"
+save = "ctrl+s"
+`;
+var EXAMPLE_RC = `# Example rc file
+# This will be symlinked to ~/.example-app-rc
+export EXAMPLE_VAR="hello"
+`;
+var EXAMPLE_THEME_YAML = `name: Example Theme
+author: Your Name
+description: A template theme for FormalConf
+version: 1.0.0
+
+colors:
+  primary: "#5eead4"
+  secondary: "#2dd4bf"
+  background: "#1a1a2e"
+  foreground: "#e4e4e7"
+  accent: "#06b6d4"
+`;
+var EXAMPLE_NEOVIM_LUA = `-- Neovim colorscheme configuration
+-- This file is symlinked when the theme is applied
+return {
+  {
+    "your-colorscheme/nvim",
+    name = "example-theme",
+    priority = 1000,
+  },
+  {
+    "LazyVim/LazyVim",
+    opts = {
+      colorscheme = "example-theme",
+    },
+  },
+}
+`;
+var EXAMPLE_GHOSTTY_CONF = `# Ghostty terminal theme
+# Add your terminal colors here
+theme = example-theme
+`;
+var THEME_README = `# Example Theme
+
+This is a template theme for FormalConf.
+
+## Structure
+- \`theme.yaml\` - Theme metadata and color definitions
+- \`neovim.lua\` - Neovim colorscheme config
+- \`ghostty.conf\` - Ghostty terminal theme
+- \`backgrounds/\` - Wallpaper images (optional)
+
+## Creating Your Own Theme
+1. Copy this directory and rename it
+2. Update \`theme.yaml\` with your theme info
+3. Add config files for your applications
+4. Files are symlinked to ~/.config/formalconf/current/theme/
+`;
+var BACKGROUNDS_README = `# Backgrounds
+
+Place wallpaper images here:
+- Supported formats: PNG, JPG
+- These will be available at ~/.config/formalconf/current/backgrounds/
+`;
+var CONFIGS_README = `# Configs Directory
+
+This directory contains your stow packages - collections of dotfiles
+that are symlinked to your home directory.
+
+## Creating a Config Package
+
+1. Create a new directory: \`mkdir my-app\`
+2. Add files mirroring your home directory structure
+3. Use FormalConf to stow the package
+
+## Example Structure
+\`\`\`
+my-app/
+  .config/
+    my-app/
+      config.toml    -> ~/.config/my-app/config.toml
+  .my-app-rc         -> ~/.my-app-rc
+\`\`\`
+
+## Commands
+- Stow: Creates symlinks from home directory to these files
+- Unstow: Removes the symlinks
+- Status: Shows which packages are stowed
+`;
+var THEMES_README = `# Themes Directory
+
+Themes contain application-specific config files that define colors and styling.
+
+## Theme Structure
+\`\`\`
+my-theme/
+  theme.yaml         # Theme metadata (required)
+  neovim.lua         # Neovim colorscheme
+  ghostty.conf       # Terminal theme
+  backgrounds/       # Wallpaper images
+\`\`\`
+
+## Applying Themes
+Select a theme in FormalConf to symlink its files to:
+\`~/.config/formalconf/current/theme/\`
+
+Your applications should source files from this location.
+`;
+async function installExampleConfig() {
+  const dest = join3(CONFIGS_DIR, "example-config");
+  if (existsSync2(dest))
+    return;
+  await ensureDir2(dest);
+  await ensureDir2(join3(dest, ".config", "example-app"));
+  await writeFile(join3(dest, "README.md"), EXAMPLE_CONFIG_README);
+  await writeFile(join3(dest, ".config", "example-app", "config.toml"), EXAMPLE_CONFIG_TOML);
+  await writeFile(join3(dest, ".example-app-rc"), EXAMPLE_RC);
+}
+async function installExampleTheme() {
+  const dest = join3(THEMES_DIR, "example-theme");
+  if (existsSync2(dest))
+    return;
+  await ensureDir2(dest);
+  await ensureDir2(join3(dest, "backgrounds"));
+  await writeFile(join3(dest, "theme.yaml"), EXAMPLE_THEME_YAML);
+  await writeFile(join3(dest, "neovim.lua"), EXAMPLE_NEOVIM_LUA);
+  await writeFile(join3(dest, "ghostty.conf"), EXAMPLE_GHOSTTY_CONF);
+  await writeFile(join3(dest, "backgrounds", "README.md"), BACKGROUNDS_README);
+  await writeFile(join3(dest, "README.md"), THEME_README);
+}
+async function installReadmes() {
+  const configsReadme = join3(CONFIGS_DIR, "README.md");
+  const themesReadme = join3(THEMES_DIR, "README.md");
+  if (!existsSync2(configsReadme)) {
+    await writeFile(configsReadme, CONFIGS_README);
+  }
+  if (!existsSync2(themesReadme)) {
+    await writeFile(themesReadme, THEMES_README);
+  }
+}
+var DEFAULT_PKG_CONFIG = {
+  config: {
+    purge: false,
+    purgeInteractive: true,
+    autoUpdate: true
+  },
+  taps: [],
+  packages: [],
+  casks: [],
+  mas: {}
+};
+async function installPkgConfig() {
+  if (existsSync2(PKG_CONFIG_PATH))
+    return;
+  await writeFile(PKG_CONFIG_PATH, JSON.stringify(DEFAULT_PKG_CONFIG, null, 2));
+}
+
+// src/components/Onboarding.tsx
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function Onboarding({ onComplete }) {
+  const [step, setStep] = useState4("welcome");
+  const [createdItems, setCreatedItems] = useState4([]);
+  const addCreatedItem = (item) => {
+    setCreatedItems((prev) => [...prev, item]);
+  };
+  switch (step) {
+    case "welcome":
+      return /* @__PURE__ */ jsxDEV9(WelcomeStep, {
+        onNext: () => setStep("configs")
+      }, undefined, false, undefined, this);
+    case "configs":
+      return /* @__PURE__ */ jsxDEV9(ConfigsStep, {
+        onNext: () => setStep("themes"),
+        onCreate: async () => {
+          await installExampleConfig();
+          addCreatedItem("Example config package");
+        }
+      }, undefined, false, undefined, this);
+    case "themes":
+      return /* @__PURE__ */ jsxDEV9(ThemesStep, {
+        onNext: () => setStep("packages"),
+        onCreate: async () => {
+          await installExampleTheme();
+          addCreatedItem("Example theme");
+        }
+      }, undefined, false, undefined, this);
+    case "packages":
+      return /* @__PURE__ */ jsxDEV9(PackagesStep, {
+        onNext: async () => {
+          await installPkgConfig();
+          setStep("complete");
+        }
+      }, undefined, false, undefined, this);
+    case "complete":
+      return /* @__PURE__ */ jsxDEV9(CompleteStep, {
+        createdItems,
+        onComplete: async () => {
+          await installReadmes();
+          onComplete();
+        }
+      }, undefined, false, undefined, this);
+  }
+}
+function WelcomeStep({ onNext }) {
+  useInput3((_, key) => {
+    if (key.return)
+      onNext();
+  });
+  return /* @__PURE__ */ jsxDEV9(Layout, {
+    breadcrumb: ["Setup"],
+    showFooter: false,
+    children: /* @__PURE__ */ jsxDEV9(Panel, {
+      title: "Welcome to FormalConf",
+      children: /* @__PURE__ */ jsxDEV9(Box9, {
+        flexDirection: "column",
+        gap: 1,
         children: [
-          "  ↓ ",
-          maxOffset - scrollOffset,
-          " more line",
-          maxOffset - scrollOffset !== 1 ? "s" : ""
+          /* @__PURE__ */ jsxDEV9(Text8, {
+            children: "FormalConf helps you manage your dotfiles and system configuration."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Text8, {
+            dimColor: true,
+            children: "This setup will walk you through the basics and optionally create example files to get you started."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Box9, {
+            marginTop: 1,
+            children: /* @__PURE__ */ jsxDEV9(Text8, {
+              color: colors.primary,
+              children: "Press Enter to continue..."
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this),
-      showScrollHint && totalLines > visibleLines && /* @__PURE__ */ jsxDEV10(Text9, {
-        dimColor: true,
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function ConfigsStep({
+  onNext,
+  onCreate
+}) {
+  const [isCreating, setIsCreating] = useState4(false);
+  const handleSelect = async (value) => {
+    if (value === "create") {
+      setIsCreating(true);
+      await onCreate();
+    }
+    onNext();
+  };
+  return /* @__PURE__ */ jsxDEV9(Layout, {
+    breadcrumb: ["Setup", "Config Packages"],
+    showFooter: false,
+    children: /* @__PURE__ */ jsxDEV9(Panel, {
+      title: "Config Packages",
+      children: /* @__PURE__ */ jsxDEV9(Box9, {
+        flexDirection: "column",
+        gap: 1,
         children: [
-          "j/k scroll • g top • G bottom ",
-          isAutoScrolling ? "(auto-scroll)" : ""
+          /* @__PURE__ */ jsxDEV9(Text8, {
+            children: "Config packages are directories containing your dotfiles."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Text8, {
+            dimColor: true,
+            children: "FormalConf uses GNU Stow to create symlinks from your home directory."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Box9, {
+            marginTop: 1,
+            flexDirection: "column",
+            children: [
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                dimColor: true,
+                children: "Example structure:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                children: "  my-config/"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                children: "    .config/"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                children: "      app/config.toml"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Box9, {
+            marginTop: 1,
+            children: /* @__PURE__ */ jsxDEV9(VimSelect, {
+              options: [
+                { label: "Create example config package", value: "create" },
+                { label: "Skip", value: "skip" }
+              ],
+              onChange: handleSelect,
+              isDisabled: isCreating
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+    }, undefined, false, undefined, this)
+  }, undefined, false, 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
+function ThemesStep({
+  onNext,
+  onCreate
 }) {
-  useInput4((input) => {
-    const lower = input.toLowerCase();
-    if (options.includes(lower)) {
-      onAnswer(lower);
+  const [isCreating, setIsCreating] = useState4(false);
+  const handleSelect = async (value) => {
+    if (value === "create") {
+      setIsCreating(true);
+      await onCreate();
+    }
+    onNext();
+  };
+  return /* @__PURE__ */ jsxDEV9(Layout, {
+    breadcrumb: ["Setup", "Themes"],
+    showFooter: false,
+    children: /* @__PURE__ */ jsxDEV9(Panel, {
+      title: "Themes",
+      children: /* @__PURE__ */ jsxDEV9(Box9, {
+        flexDirection: "column",
+        gap: 1,
+        children: [
+          /* @__PURE__ */ jsxDEV9(Text8, {
+            children: "Themes contain application configs for colors and styling."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Text8, {
+            dimColor: true,
+            children: "When applied, theme files are symlinked to a central location your apps can source from."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Box9, {
+            marginTop: 1,
+            flexDirection: "column",
+            children: [
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                dimColor: true,
+                children: "Theme structure:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                children: "  my-theme/"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                children: "    theme.yaml"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                children: "    neovim.lua"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                children: "    backgrounds/"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Box9, {
+            marginTop: 1,
+            children: /* @__PURE__ */ jsxDEV9(VimSelect, {
+              options: [
+                { label: "Create example theme", value: "create" },
+                { label: "Skip", value: "skip" }
+              ],
+              onChange: handleSelect,
+              isDisabled: isCreating
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function PackagesStep({ onNext }) {
+  const [isCreating, setIsCreating] = useState4(false);
+  useInput3(async (_, key) => {
+    if (key.return && !isCreating) {
+      setIsCreating(true);
+      await onNext();
     }
   });
-  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)
+  return /* @__PURE__ */ jsxDEV9(Layout, {
+    breadcrumb: ["Setup", "Package Sync"],
+    showFooter: false,
+    children: /* @__PURE__ */ jsxDEV9(Panel, {
+      title: "Package Sync",
+      children: /* @__PURE__ */ jsxDEV9(Box9, {
+        flexDirection: "column",
+        gap: 1,
+        children: [
+          /* @__PURE__ */ jsxDEV9(Text8, {
+            children: "FormalConf can sync your Homebrew packages from a config file."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Text8, {
+            dimColor: true,
+            children: "Edit ~/.config/formalconf/pkg-config.json to define your packages, then run Package Sync from the main menu."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Box9, {
+            marginTop: 1,
+            children: /* @__PURE__ */ jsxDEV9(Text8, {
+              color: colors.primary,
+              children: "Press Enter to continue..."
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function CompleteStep({
+  createdItems,
+  onComplete
+}) {
+  const [isFinishing, setIsFinishing] = useState4(false);
+  useInput3(async (_, key) => {
+    if (key.return && !isFinishing) {
+      setIsFinishing(true);
+      await onComplete();
+    }
+  });
+  return /* @__PURE__ */ jsxDEV9(Layout, {
+    breadcrumb: ["Setup", "Complete"],
+    showFooter: false,
+    children: /* @__PURE__ */ jsxDEV9(Panel, {
+      title: "Setup Complete",
+      children: /* @__PURE__ */ jsxDEV9(Box9, {
+        flexDirection: "column",
+        gap: 1,
+        children: [
+          /* @__PURE__ */ jsxDEV9(Text8, {
+            color: colors.success,
+            children: "You're all set!"
+          }, undefined, false, undefined, this),
+          createdItems.length > 0 && /* @__PURE__ */ jsxDEV9(Box9, {
+            flexDirection: "column",
+            marginTop: 1,
+            children: [
+              /* @__PURE__ */ jsxDEV9(Text8, {
+                dimColor: true,
+                children: "Created:"
+              }, undefined, false, undefined, this),
+              createdItems.map((item, i) => /* @__PURE__ */ jsxDEV9(Text8, {
+                children: [
+                  "  - ",
+                  item
+                ]
+              }, i, true, undefined, this))
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Box9, {
+            marginTop: 1,
+            children: /* @__PURE__ */ jsxDEV9(Text8, {
+              dimColor: true,
+              children: "README files have been added to help you get started."
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9(Box9, {
+            marginTop: 1,
+            children: /* @__PURE__ */ jsxDEV9(Text8, {
+              color: colors.primary,
+              children: "Press Enter to start..."
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, 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;
+// src/components/menus/MainMenu.tsx
+import { useApp } from "ink";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+function MainMenu({ onSelect }) {
+  const { exit } = useApp();
+  return /* @__PURE__ */ jsxDEV10(Panel, {
+    title: "Main Menu",
+    children: /* @__PURE__ */ jsxDEV10(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;
         }
-      } else if (currentSection) {
-        currentSection[key] = value.replace(/^["']|["']$/g, "");
+        onSelect(value);
       }
-    }
-  }
-  return result;
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 }
-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;
-  }
+
+// src/components/CommandOutput.tsx
+import { Box as Box10, Text as Text9, useInput as useInput4 } from "ink";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+function CommandOutput({
+  title,
+  output,
+  success = true,
+  onDismiss
+}) {
+  useInput4(() => {
+    onDismiss();
+  });
+  return /* @__PURE__ */ jsxDEV11(Panel, {
+    title,
+    borderColor: success ? colors.success : colors.error,
+    children: [
+      output && /* @__PURE__ */ jsxDEV11(Box10, {
+        flexDirection: "column",
+        marginBottom: 1,
+        children: /* @__PURE__ */ jsxDEV11(Text9, {
+          children: output
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV11(Text9, {
+        color: success ? colors.success : colors.error,
+        children: success ? "Done" : "Failed"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV11(Text9, {
+        dimColor: true,
+        children: "Press any key to continue..."
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-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)$/, "")
-  }));
+
+// src/components/LoadingPanel.tsx
+import { Spinner } from "@inkjs/ui";
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+function LoadingPanel({ title, label = "Processing..." }) {
+  return /* @__PURE__ */ jsxDEV12(Panel, {
+    title,
+    children: /* @__PURE__ */ jsxDEV12(Spinner, {
+      label
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 }
-async function parseTheme(themePath, themeName) {
-  const files = parseThemeFiles(themePath);
-  const metadata = await parseThemeMetadata(themePath);
+
+// src/hooks/useMenuAction.ts
+import { useState as useState5, useCallback } from "react";
+function useMenuAction() {
+  const [state, setState] = useState5("menu");
+  const [output, setOutput] = useState5("");
+  const [success, setSuccess] = useState5(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 {
-    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"))
+    state,
+    output,
+    success,
+    isRunning: state === "running",
+    isResult: state === "result",
+    execute,
+    reset
   };
 }
 
+// src/hooks/useBackNavigation.ts
+import { useInput as useInput5 } from "ink";
+function useBackNavigation({
+  enabled = true,
+  onBack
+}) {
+  useInput5((input, key) => {
+    if (enabled && (key.escape || key.leftArrow || input === "h")) {
+      onBack();
+    }
+  });
+}
+
 // 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 existsSync3, lstatSync as lstatSync2, readlinkSync as readlinkSync2 } from "fs";
 var colors2 = {
   red: "\x1B[0;31m",
   green: "\x1B[0;32m",
@@ -963,7 +1354,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}`,
@@ -974,7 +1365,7 @@ function checkPackageStowed(packageName) {
   const packageDir = `${CONFIGS_DIR}/${packageName}`;
   if (!existsSync3(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))
@@ -1237,9 +1628,177 @@ ${colors2.cyan}Available packages:${colors2.reset}`);
       break;
   }
 }
-var isMainModule = process.argv[1]?.includes("config-manager");
-if (isMainModule) {
-  main().catch(console.error);
+var isMainModule = process.argv[1]?.includes("config-manager");
+if (isMainModule) {
+  main().catch(console.error);
+}
+
+// src/components/menus/ConfigMenu.tsx
+import { jsxDEV as jsxDEV13 } 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__ */ jsxDEV13(LoadingPanel, {
+      title: "Config Manager"
+    }, undefined, false, undefined, this);
+  }
+  if (isResult) {
+    return /* @__PURE__ */ jsxDEV13(CommandOutput, {
+      title: "Config Manager",
+      output,
+      success,
+      onDismiss: reset
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV13(Panel, {
+    title: "Config Manager",
+    children: /* @__PURE__ */ jsxDEV13(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/components/menus/PackageMenu.tsx
+import { useState as useState7, useCallback as useCallback2, useMemo as useMemo2, useRef } from "react";
+import { Box as Box13, Text as Text12, useInput as useInput8 } from "ink";
+
+// src/components/ScrollableLog.tsx
+import { useState as useState6, useEffect as useEffect3, useMemo } from "react";
+import { Box as Box11, Text as Text10, useInput as useInput6 } from "ink";
+import { jsxDEV as jsxDEV14 } 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] = useState6(0);
+  const [isAutoScrolling, setIsAutoScrolling] = useState6(autoScroll);
+  const totalLines = lines.length;
+  const maxOffset = Math.max(0, totalLines - visibleLines);
+  useEffect3(() => {
+    if (isAutoScrolling) {
+      setScrollOffset(maxOffset);
+    }
+  }, [totalLines, maxOffset, isAutoScrolling]);
+  useInput6((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__ */ jsxDEV14(Box11, {
+    flexDirection: "column",
+    children: [
+      showScrollHint && showScrollUp && /* @__PURE__ */ jsxDEV14(Text10, {
+        dimColor: true,
+        children: [
+          "  ↑ ",
+          scrollOffset,
+          " more line",
+          scrollOffset !== 1 ? "s" : ""
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV14(Box11, {
+        flexDirection: "column",
+        height: visibleLines,
+        overflow: "hidden",
+        children: visibleContent.map((line, i) => /* @__PURE__ */ jsxDEV14(Text10, {
+          children: line
+        }, scrollOffset + i, false, undefined, this))
+      }, undefined, false, undefined, this),
+      showScrollHint && showScrollDown && /* @__PURE__ */ jsxDEV14(Text10, {
+        dimColor: true,
+        children: [
+          "  ↓ ",
+          maxOffset - scrollOffset,
+          " more line",
+          maxOffset - scrollOffset !== 1 ? "s" : ""
+        ]
+      }, undefined, true, undefined, this),
+      showScrollHint && totalLines > visibleLines && /* @__PURE__ */ jsxDEV14(Text10, {
+        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 Box12, Text as Text11, useInput as useInput7 } from "ink";
+import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+function PromptInput({
+  question,
+  options = ["y", "n"],
+  onAnswer
+}) {
+  useInput7((input) => {
+    const lower = input.toLowerCase();
+    if (options.includes(lower)) {
+      onAnswer(lower);
+    }
+  });
+  return /* @__PURE__ */ jsxDEV15(Box12, {
+    marginTop: 1,
+    borderStyle: "single",
+    borderColor: colors.accent,
+    paddingX: 1,
+    children: /* @__PURE__ */ jsxDEV15(Text11, {
+      children: [
+        question,
+        " ",
+        /* @__PURE__ */ jsxDEV15(Text11, {
+          color: colors.accent,
+          children: [
+            "[",
+            options.join("/"),
+            "]"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV15(Text11, {
+          dimColor: true,
+          children: ": "
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 
 // src/cli/pkg-sync.ts
@@ -2025,287 +2584,46 @@ async function main3() {
     case "update": {
       console.log(`${colors4.cyan}Updating lockfile...${colors4.reset}`);
       const lock = await updateLockfile();
-      const total = Object.keys(lock.formulas).length + Object.keys(lock.casks).length;
-      console.log(`${colors4.green}Lockfile updated with ${total} packages.${colors4.reset}`);
-      break;
-    }
-    case "status":
-      await showStatus2();
-      break;
-    case "reset": {
-      console.log(`${colors4.cyan}Regenerating lockfile...${colors4.reset}`);
-      const lock = await generateLockfile();
-      await savePkgLock(lock);
-      const total = Object.keys(lock.formulas).length + Object.keys(lock.casks).length;
-      console.log(`${colors4.green}Lockfile regenerated with ${total} packages.${colors4.reset}`);
-      break;
-    }
-    case "show":
-      await showLockfile();
-      break;
-    default:
-      console.error(`${colors4.red}Unknown command: ${command}${colors4.reset}`);
-      printUsage3();
-      process.exit(1);
-  }
-}
-var isMainModule3 = process.argv[1]?.includes("pkg-lock");
-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);
-    }
-  }
-  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/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 total = Object.keys(lock.formulas).length + Object.keys(lock.casks).length;
+      console.log(`${colors4.green}Lockfile updated with ${total} packages.${colors4.reset}`);
+      break;
     }
-  });
-  const handleAction = async (action) => {
-    if (action === "back") {
-      onBack();
-      return;
+    case "status":
+      await showStatus2();
+      break;
+    case "reset": {
+      console.log(`${colors4.cyan}Regenerating lockfile...${colors4.reset}`);
+      const lock = await generateLockfile();
+      await savePkgLock(lock);
+      const total = Object.keys(lock.formulas).length + Object.keys(lock.casks).length;
+      console.log(`${colors4.green}Lockfile regenerated with ${total} packages.${colors4.reset}`);
+      break;
     }
-    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);
+    case "show":
+      await showLockfile();
+      break;
+    default:
+      console.error(`${colors4.red}Unknown command: ${command}${colors4.reset}`);
+      printUsage3();
+      process.exit(1);
   }
-  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);
 }
+var isMainModule3 = process.argv[1]?.includes("pkg-lock");
+if (isMainModule3) {
+  main3().catch(console.error);
+}
+
+// src/components/menus/PackageMenu.tsx
+import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
 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 [state, setState] = useState7("menu");
+  const [lines, setLines] = useState7([]);
+  const [output, setOutput] = useState7("");
+  const [isStreamingOp, setIsStreamingOp] = useState7(true);
+  const [pendingPrompt, setPendingPrompt] = useState7(null);
+  const [success, setSuccess] = useState7(true);
   const isRunningRef = useRef(false);
-  useInput5((input, key) => {
+  useInput8((input, key) => {
     if (state === "menu" && (key.escape || key.leftArrow || input === "h")) {
       onBack();
     }
@@ -2324,7 +2642,7 @@ function PackageMenu({ onBack }) {
       });
     }
   }), []);
-  const handlePromptAnswer = useCallback((answer) => {
+  const handlePromptAnswer = useCallback2((answer) => {
     if (pendingPrompt) {
       setLines((prev) => [...prev, `> ${answer}`]);
       pendingPrompt.resolve(answer);
@@ -2382,20 +2700,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__ */ jsxDEV16(LoadingPanel, {
+        title: "Package Sync"
       }, undefined, false, undefined, this);
     }
-    return /* @__PURE__ */ jsxDEV12(Panel, {
+    return /* @__PURE__ */ jsxDEV16(Panel, {
       title: "Package Sync",
       children: [
-        /* @__PURE__ */ jsxDEV12(ScrollableLog, {
+        /* @__PURE__ */ jsxDEV16(ScrollableLog, {
           lines
         }, undefined, false, undefined, this),
-        pendingPrompt && /* @__PURE__ */ jsxDEV12(PromptInput, {
+        pendingPrompt && /* @__PURE__ */ jsxDEV16(PromptInput, {
           question: pendingPrompt.question,
           options: pendingPrompt.options,
           onAnswer: handlePromptAnswer
@@ -2405,126 +2720,435 @@ function PackageMenu({ onBack }) {
   }
   if (state === "result") {
     if (!isStreamingOp) {
-      return /* @__PURE__ */ jsxDEV12(CommandOutput, {
+      return /* @__PURE__ */ jsxDEV16(CommandOutput, {
         title: "Package Sync",
         output,
         success,
         onDismiss: () => setState("menu")
       }, undefined, false, undefined, this);
     }
-    return /* @__PURE__ */ jsxDEV12(Panel, {
-      title: "Package Sync",
-      borderColor: success ? colors.success : colors.error,
-      children: [
-        /* @__PURE__ */ jsxDEV12(ScrollableLog, {
-          lines,
-          autoScroll: false
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12(Box12, {
-          marginTop: 1,
-          children: /* @__PURE__ */ jsxDEV12(Text11, {
-            color: success ? colors.success : colors.error,
-            children: success ? "Done" : "Failed"
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12(Text11, {
-          dimColor: true,
-          children: "Press any key to continue..."
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this);
+    return /* @__PURE__ */ jsxDEV16(Panel, {
+      title: "Package Sync",
+      borderColor: success ? colors.success : colors.error,
+      children: [
+        /* @__PURE__ */ jsxDEV16(ScrollableLog, {
+          lines,
+          autoScroll: false
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV16(Box13, {
+          marginTop: 1,
+          children: /* @__PURE__ */ jsxDEV16(Text12, {
+            color: success ? colors.success : colors.error,
+            children: success ? "Done" : "Failed"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV16(Text12, {
+          dimColor: true,
+          children: "Press any key to continue..."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV16(Panel, {
+    title: "Package Sync",
+    children: /* @__PURE__ */ jsxDEV16(VimSelect, {
+      options: [
+        { label: "Sync packages", value: "sync" },
+        { label: "Sync with purge", value: "sync-purge" },
+        { label: "Upgrade all (with verification)", value: "upgrade" },
+        { label: "Upgrade interactive", value: "upgrade-interactive" },
+        { label: "Update lockfile", value: "lock-update" },
+        { label: "Lockfile status", value: "lock-status" },
+        { label: "Back", value: "back" }
+      ],
+      onChange: handleAction
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/menus/ThemeMenu.tsx
+import { useState as useState9, useEffect as useEffect5, useMemo as useMemo4 } from "react";
+import { Box as Box15, Text as Text14 } from "ink";
+import { existsSync as existsSync7, readdirSync as readdirSync5 } from "fs";
+import { join as join6 } from "path";
+
+// src/components/ThemeCard.tsx
+import { Box as Box14, Text as Text13 } from "ink";
+import { jsxDEV as jsxDEV17 } 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__ */ jsxDEV17(Box14, {
+    flexDirection: "column",
+    width,
+    borderStyle: borderStyles.panel,
+    borderColor,
+    paddingX: 1,
+    children: /* @__PURE__ */ jsxDEV17(Box14, {
+      children: [
+        /* @__PURE__ */ jsxDEV17(Text13, {
+          color: isSelected ? colors.accent : colors.primaryDim,
+          children: isSelected ? "● " : "  "
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV17(Text13, {
+          color: nameColor,
+          bold: true,
+          wrap: "truncate",
+          children: theme.name
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV17(Text13, {
+          color: colors.primaryDim,
+          children: indicatorText
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/hooks/useThemeGrid.ts
+import { useState as useState8, useEffect as useEffect4 } from "react";
+import { useInput as useInput9 } from "ink";
+function useThemeGrid({
+  itemCount,
+  cardHeight = 3,
+  layoutOverhead = 20,
+  minCardWidth = 28,
+  onSelect,
+  onBack,
+  enabled = true
+}) {
+  const { columns, rows } = useTerminalSize();
+  const [selectedIndex, setSelectedIndex] = useState8(0);
+  const [scrollOffset, setScrollOffset] = useState8(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(itemCount / cardsPerRow);
+  useEffect4(() => {
+    if (selectedRow < scrollOffset) {
+      setScrollOffset(selectedRow);
+    } else if (selectedRow >= scrollOffset + visibleRows) {
+      setScrollOffset(selectedRow - visibleRows + 1);
+    }
+  }, [selectedRow, scrollOffset, visibleRows]);
+  useInput9((input, key) => {
+    if (!enabled)
+      return;
+    if (key.escape && onBack) {
+      onBack();
+      return;
+    }
+    if (key.rightArrow || input === "l") {
+      if (selectedIndex < itemCount - 1) {
+        setSelectedIndex((i) => i + 1);
+      }
+    }
+    if (key.leftArrow || input === "h") {
+      if (selectedIndex > 0) {
+        setSelectedIndex((i) => i - 1);
+      }
+    }
+    if (key.downArrow || input === "j") {
+      const nextIndex = selectedIndex + cardsPerRow;
+      if (nextIndex < itemCount) {
+        setSelectedIndex(nextIndex);
+      }
+    }
+    if (key.upArrow || input === "k") {
+      const prevIndex = selectedIndex - cardsPerRow;
+      if (prevIndex >= 0) {
+        setSelectedIndex(prevIndex);
+      }
+    }
+    if (key.return && onSelect) {
+      onSelect(selectedIndex);
+    }
+  });
+  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 existsSync5, readdirSync as readdirSync3 } from "fs";
+import { join as join4 } 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 = join4(themePath, "theme.yaml");
+  if (!existsSync5(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: join4(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: existsSync5(join4(themePath, "backgrounds")),
+    hasPreview: existsSync5(join4(themePath, "preview.png")),
+    isLightMode: existsSync5(join4(themePath, "light.mode"))
+  };
+}
+
+// src/cli/set-theme.ts
+import { parseArgs as parseArgs4 } from "util";
+import { readdirSync as readdirSync4, existsSync as existsSync6, rmSync, symlinkSync, unlinkSync } from "fs";
+import { join as join5 } 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 (!existsSync6(THEMES_DIR)) {
+    return [];
+  }
+  const entries = readdirSync4(THEMES_DIR, { withFileTypes: true });
+  const themes = [];
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      const themePath = join5(THEMES_DIR, entry.name);
+      const theme = await parseTheme(themePath, entry.name);
+      themes.push(theme);
+    }
   }
-  return /* @__PURE__ */ jsxDEV12(Panel, {
-    title: "Package Sync",
-    children: /* @__PURE__ */ jsxDEV12(VimSelect, {
-      options: [
-        { label: "Sync packages", value: "sync" },
-        { label: "Sync with purge", value: "sync-purge" },
-        { label: "Upgrade all (with verification)", value: "upgrade" },
-        { label: "Upgrade interactive", value: "upgrade-interactive" },
-        { label: "Update lockfile", value: "lock-update" },
-        { label: "Lockfile status", value: "lock-status" },
-        { label: "Back", value: "back" }
-      ],
-      onChange: handleAction
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+  return themes;
 }
-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);
-  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 selectedRow = Math.floor(selectedIndex / cardsPerRow);
-  const totalRows = Math.ceil(themes.length / cardsPerRow);
-  const [scrollOffset, setScrollOffset] = useState5(0);
-  useEffect4(() => {
-    if (selectedRow < scrollOffset) {
-      setScrollOffset(selectedRow);
-    } else if (selectedRow >= scrollOffset + visibleRows) {
-      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)
-      return;
-    if (key.escape) {
-      onBack();
-      return;
-    }
-    if (key.rightArrow || input === "l") {
-      if (selectedIndex < themes.length - 1) {
-        setSelectedIndex((i) => i + 1);
-      }
-    }
-    if (key.leftArrow || input === "h") {
-      if (selectedIndex > 0) {
-        setSelectedIndex((i) => i - 1);
+function clearDirectory(dir) {
+  if (existsSync6(dir)) {
+    const entries = readdirSync4(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = join5(dir, entry.name);
+      if (entry.isSymbolicLink() || entry.isFile()) {
+        unlinkSync(fullPath);
+      } else if (entry.isDirectory()) {
+        rmSync(fullPath, { recursive: true, force: true });
       }
     }
-    if (key.downArrow || input === "j") {
-      const nextIndex = selectedIndex + cardsPerRow;
-      if (nextIndex < themes.length) {
-        setSelectedIndex(nextIndex);
-      }
+  }
+}
+function createSymlink(source, target) {
+  if (existsSync6(target)) {
+    unlinkSync(target);
+  }
+  symlinkSync(source, target);
+}
+async function applyTheme(themeName) {
+  const themeDir = join5(THEMES_DIR, themeName);
+  if (!existsSync6(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 (existsSync6(BACKGROUNDS_TARGET_DIR)) {
+    rmSync(BACKGROUNDS_TARGET_DIR, { recursive: true, force: true });
+  }
+  const entries = readdirSync4(themeDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const source = join5(themeDir, entry.name);
+    if (entry.isFile() && entry.name !== "theme.yaml" && entry.name !== "light.mode") {
+      const target = join5(THEME_TARGET_DIR, entry.name);
+      createSymlink(source, target);
     }
-    if (key.upArrow || input === "k") {
-      const prevIndex = selectedIndex - cardsPerRow;
-      if (prevIndex >= 0) {
-        setSelectedIndex(prevIndex);
-      }
+  }
+  if (theme.hasBackgrounds) {
+    const backgroundsSource = join5(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 = join5(THEMES_DIR, themeName);
+  if (!existsSync6(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);
     }
-    if (key.return) {
-      applyTheme2(themes[selectedIndex]);
+    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 jsxDEV18 } from "react/jsx-dev-runtime";
+function ThemeMenu({ onBack }) {
+  const [themes, setThemes] = useState9([]);
+  const [loading, setLoading] = useState9(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
   });
-  useEffect4(() => {
+  useEffect5(() => {
     async function loadThemes() {
-      if (!existsSync6(THEMES_DIR)) {
+      if (!existsSync7(THEMES_DIR)) {
         setThemes([]);
         setLoading(false);
         return;
@@ -2533,7 +3157,7 @@ function ThemeMenu({ onBack }) {
       const loadedThemes = [];
       for (const entry of entries) {
         if (entry.isDirectory()) {
-          const themePath = join5(THEMES_DIR, entry.name);
+          const themePath = join6(THEMES_DIR, entry.name);
           const theme = await parseTheme(themePath, entry.name);
           loadedThemes.push(theme);
         }
@@ -2544,52 +3168,49 @@ function ThemeMenu({ onBack }) {
     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__ */ jsxDEV18(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__ */ jsxDEV18(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__ */ jsxDEV18(Panel, {
       title: "Select Theme",
       children: [
-        /* @__PURE__ */ jsxDEV12(Box12, {
+        /* @__PURE__ */ jsxDEV18(Box15, {
           flexDirection: "column",
           children: [
-            /* @__PURE__ */ jsxDEV12(Text11, {
+            /* @__PURE__ */ jsxDEV18(Text14, {
               color: colors.warning,
               children: "No themes available."
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV12(Text11, {
+            /* @__PURE__ */ jsxDEV18(Text14, {
               children: "This system is compatible with omarchy themes."
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV12(Text11, {
+            /* @__PURE__ */ jsxDEV18(Text14, {
               dimColor: true,
               children: "Add themes to ~/.config/formalconf/themes/"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV12(Box12, {
+        /* @__PURE__ */ jsxDEV18(Box15, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsxDEV12(VimSelect, {
+          children: /* @__PURE__ */ jsxDEV18(VimSelect, {
             options: [{ label: "Back", value: "back" }],
             onChange: () => onBack()
           }, undefined, false, undefined, this)
@@ -2597,44 +3218,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__ */ jsxDEV18(Panel, {
     title: "Select Theme",
     children: [
-      showScrollUp && /* @__PURE__ */ jsxDEV12(Text11, {
+      grid.showScrollUp && /* @__PURE__ */ jsxDEV18(Text14, {
         dimColor: true,
         children: [
-          "  ↑ ",
-          scrollOffset,
+          "  ",
+          "↑ ",
+          grid.scrollOffset,
           " more row",
-          scrollOffset > 1 ? "s" : ""
+          grid.scrollOffset > 1 ? "s" : ""
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV12(Box12, {
+      /* @__PURE__ */ jsxDEV18(Box15, {
         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__ */ jsxDEV18(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__ */ jsxDEV18(Text14, {
         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__ */ jsxDEV18(Box15, {
         marginTop: 1,
-        children: /* @__PURE__ */ jsxDEV12(Text11, {
+        children: /* @__PURE__ */ jsxDEV18(Text14, {
           dimColor: true,
           children: "←→↑↓/hjkl navigate • Enter select • Esc back"
         }, undefined, false, undefined, this)
@@ -2642,122 +3262,81 @@ 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 jsxDEV19 } 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] = useState10("loading");
+  const [missingDeps, setMissingDeps] = useState10([]);
+  const [screen, setScreen] = useState10("main");
+  const { exit } = useApp2();
+  useInput10((input) => {
+    if (input === "q")
       exit();
-    }
   });
-  useEffect4(() => {
+  useEffect6(() => {
     async function init() {
-      ensureConfigDir();
+      await ensureConfigDir();
       const result = await checkPrerequisites();
       if (!result.ok) {
         setMissingDeps(result.missing);
         setAppState("error");
-      } else {
-        setAppState("ready");
+        return;
+      }
+      const firstRun = await isFirstRun();
+      if (firstRun) {
+        setAppState("onboarding");
+        return;
       }
+      setAppState("ready");
     }
     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__ */ jsxDEV19(Layout, {
       breadcrumb: ["Loading"],
-      children: /* @__PURE__ */ jsxDEV12(Panel, {
+      children: /* @__PURE__ */ jsxDEV19(Panel, {
         title: "FormalConf",
-        children: /* @__PURE__ */ jsxDEV12(Spinner, {
+        children: /* @__PURE__ */ jsxDEV19(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__ */ jsxDEV19(PrerequisiteError, {
       missing: missingDeps,
       onExit: exit
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV12(Layout, {
-    breadcrumb: getBreadcrumb(),
+  if (appState === "onboarding") {
+    return /* @__PURE__ */ jsxDEV19(Onboarding, {
+      onComplete: () => setAppState("ready")
+    }, undefined, false, undefined, this);
+  }
+  const goBack = () => setScreen("main");
+  return /* @__PURE__ */ jsxDEV19(Layout, {
+    breadcrumb: BREADCRUMBS[screen],
     children: [
-      screen === "main" && /* @__PURE__ */ jsxDEV12(MainMenu, {
+      screen === "main" && /* @__PURE__ */ jsxDEV19(MainMenu, {
         onSelect: setScreen
       }, undefined, false, undefined, this),
-      screen === "config" && /* @__PURE__ */ jsxDEV12(ConfigMenu, {
-        onBack: () => setScreen("main")
+      screen === "config" && /* @__PURE__ */ jsxDEV19(ConfigMenu, {
+        onBack: goBack
       }, undefined, false, undefined, this),
-      screen === "packages" && /* @__PURE__ */ jsxDEV12(PackageMenu, {
-        onBack: () => setScreen("main")
+      screen === "packages" && /* @__PURE__ */ jsxDEV19(PackageMenu, {
+        onBack: goBack
       }, undefined, false, undefined, this),
-      screen === "themes" && /* @__PURE__ */ jsxDEV12(ThemeMenu, {
-        onBack: () => setScreen("main")
+      screen === "themes" && /* @__PURE__ */ jsxDEV19(ThemeMenu, {
+        onBack: goBack
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-render(/* @__PURE__ */ jsxDEV12(App, {}, undefined, false, undefined, this));
+render(/* @__PURE__ */ jsxDEV19(App, {}, undefined, false, undefined, this));