formalconf 2.0.2 → 2.0.4

package/dist/formalconf.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 // src/cli/formalconf.tsx
-import { useState as useState9, useEffect as useEffect6 } from "react";
-import { render, useApp as useApp2, useInput as useInput9 } from "ink";
+import { useState as useState11, useEffect as useEffect6 } from "react";
+import { render, useApp as useApp2, useInput as useInput11 } from "ink";
 import { Spinner as Spinner2 } from "@inkjs/ui";
 
 // src/components/layout/Layout.tsx
@@ -41,6 +41,7 @@ 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";
@@ -294,6 +295,19 @@ 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";
@@ -400,7 +414,7 @@ function StatusIndicator({
 // package.json
 var package_default = {
   name: "formalconf",
-  version: "2.0.2",
+  version: "2.0.4",
   description: "Dotfiles management TUI for macOS - config management, package sync, and theme switching",
   type: "module",
   main: "./dist/formalconf.js",
@@ -684,8 +698,9 @@ function PrerequisiteError({ missing, onExit }) {
   }, undefined, false, undefined, this);
 }
 
-// src/components/menus/MainMenu.tsx
-import { useApp } from "ink";
+// 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";
@@ -721,13 +736,502 @@ function VimSelect({ options, onChange, isDisabled = false }) {
   }, undefined, false, undefined, this);
 }
 
-// src/components/menus/MainMenu.tsx
+// 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: [
+          /* @__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)
+    }, 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: [
+          /* @__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, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function ThemesStep({
+  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", "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__ */ 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/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__ */ jsxDEV9(Panel, {
+  return /* @__PURE__ */ jsxDEV10(Panel, {
     title: "Main Menu",
-    children: /* @__PURE__ */ jsxDEV9(VimSelect, {
+    children: /* @__PURE__ */ jsxDEV10(VimSelect, {
       options: [
         { label: "Config Manager", value: "config" },
         { label: "Package Sync", value: "packages" },
@@ -746,33 +1250,33 @@ function MainMenu({ onSelect }) {
 }
 
 // src/components/CommandOutput.tsx
-import { Box as Box9, Text as Text8, useInput as useInput3 } from "ink";
-import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+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
 }) {
-  useInput3(() => {
+  useInput4(() => {
     onDismiss();
   });
-  return /* @__PURE__ */ jsxDEV10(Panel, {
+  return /* @__PURE__ */ jsxDEV11(Panel, {
     title,
     borderColor: success ? colors.success : colors.error,
     children: [
-      output && /* @__PURE__ */ jsxDEV10(Box9, {
+      output && /* @__PURE__ */ jsxDEV11(Box10, {
         flexDirection: "column",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsxDEV10(Text8, {
+        children: /* @__PURE__ */ jsxDEV11(Text9, {
           children: output
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV10(Text8, {
+      /* @__PURE__ */ jsxDEV11(Text9, {
         color: success ? colors.success : colors.error,
         children: success ? "Done" : "Failed"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV10(Text8, {
+      /* @__PURE__ */ jsxDEV11(Text9, {
         dimColor: true,
         children: "Press any key to continue..."
       }, undefined, false, undefined, this)
@@ -782,22 +1286,22 @@ function CommandOutput({
 
 // src/components/LoadingPanel.tsx
 import { Spinner } from "@inkjs/ui";
-import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
 function LoadingPanel({ title, label = "Processing..." }) {
-  return /* @__PURE__ */ jsxDEV11(Panel, {
+  return /* @__PURE__ */ jsxDEV12(Panel, {
     title,
-    children: /* @__PURE__ */ jsxDEV11(Spinner, {
+    children: /* @__PURE__ */ jsxDEV12(Spinner, {
       label
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 
 // src/hooks/useMenuAction.ts
-import { useState as useState4, useCallback } from "react";
+import { useState as useState5, useCallback } from "react";
 function useMenuAction() {
-  const [state, setState] = useState4("menu");
-  const [output, setOutput] = useState4("");
-  const [success, setSuccess] = useState4(true);
+  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();
@@ -820,12 +1324,12 @@ function useMenuAction() {
 }
 
 // src/hooks/useBackNavigation.ts
-import { useInput as useInput4 } from "ink";
+import { useInput as useInput5 } from "ink";
 function useBackNavigation({
   enabled = true,
   onBack
 }) {
-  useInput4((input, key) => {
+  useInput5((input, key) => {
     if (enabled && (key.escape || key.leftArrow || input === "h")) {
       onBack();
     }
@@ -834,7 +1338,7 @@ function useBackNavigation({
 
 // src/cli/config-manager.ts
 import { parseArgs } from "util";
-import { readdirSync as readdirSync2, existsSync as existsSync2, 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",
@@ -859,12 +1363,12 @@ function listPackages() {
 }
 function checkPackageStowed(packageName) {
   const packageDir = `${CONFIGS_DIR}/${packageName}`;
-  if (!existsSync2(packageDir))
+  if (!existsSync3(packageDir))
     return false;
   const entries = readdirSync2(packageDir, { withFileTypes: true });
   for (const entry of entries) {
     const targetPath = `${HOME_DIR}/${entry.name}`;
-    if (!existsSync2(targetPath))
+    if (!existsSync3(targetPath))
       return false;
     try {
       const stat = lstatSync2(targetPath);
@@ -1130,7 +1634,7 @@ if (isMainModule) {
 }
 
 // src/components/menus/ConfigMenu.tsx
-import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+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 });
@@ -1142,21 +1646,21 @@ function ConfigMenu({ onBack }) {
     await execute(() => runConfigManager([action]));
   };
   if (isRunning) {
-    return /* @__PURE__ */ jsxDEV12(LoadingPanel, {
+    return /* @__PURE__ */ jsxDEV13(LoadingPanel, {
       title: "Config Manager"
     }, undefined, false, undefined, this);
   }
   if (isResult) {
-    return /* @__PURE__ */ jsxDEV12(CommandOutput, {
+    return /* @__PURE__ */ jsxDEV13(CommandOutput, {
       title: "Config Manager",
       output,
       success,
       onDismiss: reset
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV12(Panel, {
+  return /* @__PURE__ */ jsxDEV13(Panel, {
     title: "Config Manager",
-    children: /* @__PURE__ */ jsxDEV12(VimSelect, {
+    children: /* @__PURE__ */ jsxDEV13(VimSelect, {
       options: [
         { label: "Stow all packages", value: "stow-all" },
         { label: "Unstow all packages", value: "unstow-all" },
@@ -1170,13 +1674,13 @@ function ConfigMenu({ onBack }) {
 }
 
 // src/components/menus/PackageMenu.tsx
-import { useState as useState6, useCallback as useCallback2, useMemo as useMemo2, useRef } from "react";
-import { Box as Box12, Text as Text11, useInput as useInput7 } from "ink";
+import { useState as useState8, useCallback as useCallback2, useMemo as useMemo2, useRef } from "react";
+import { Box as Box14, Text as Text13, useInput as useInput9 } from "ink";
 
 // src/components/ScrollableLog.tsx
-import { useState as useState5, useEffect as useEffect3, useMemo } from "react";
-import { Box as Box10, Text as Text9, useInput as useInput5 } from "ink";
-import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+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,
@@ -1185,8 +1689,8 @@ function ScrollableLog({
 }) {
   const { rows } = useTerminalSize();
   const visibleLines = maxHeight || Math.max(5, rows - 12);
-  const [scrollOffset, setScrollOffset] = useState5(0);
-  const [isAutoScrolling, setIsAutoScrolling] = useState5(autoScroll);
+  const [scrollOffset, setScrollOffset] = useState6(0);
+  const [isAutoScrolling, setIsAutoScrolling] = useState6(autoScroll);
   const totalLines = lines.length;
   const maxOffset = Math.max(0, totalLines - visibleLines);
   useEffect3(() => {
@@ -1194,7 +1698,7 @@ function ScrollableLog({
       setScrollOffset(maxOffset);
     }
   }, [totalLines, maxOffset, isAutoScrolling]);
-  useInput5((input, key) => {
+  useInput6((input, key) => {
     if (key.downArrow || input === "j") {
       setIsAutoScrolling(false);
       setScrollOffset((prev) => Math.min(prev + 1, maxOffset));
@@ -1217,10 +1721,10 @@ function ScrollableLog({
   }, [lines, scrollOffset, visibleLines]);
   const showScrollUp = scrollOffset > 0;
   const showScrollDown = scrollOffset < maxOffset;
-  return /* @__PURE__ */ jsxDEV13(Box10, {
+  return /* @__PURE__ */ jsxDEV14(Box11, {
     flexDirection: "column",
     children: [
-      showScrollHint && showScrollUp && /* @__PURE__ */ jsxDEV13(Text9, {
+      showScrollHint && showScrollUp && /* @__PURE__ */ jsxDEV14(Text10, {
         dimColor: true,
         children: [
           "  ↑ ",
@@ -1229,15 +1733,15 @@ function ScrollableLog({
           scrollOffset !== 1 ? "s" : ""
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV13(Box10, {
+      /* @__PURE__ */ jsxDEV14(Box11, {
         flexDirection: "column",
         height: visibleLines,
         overflow: "hidden",
-        children: visibleContent.map((line, i) => /* @__PURE__ */ jsxDEV13(Text9, {
+        children: visibleContent.map((line, i) => /* @__PURE__ */ jsxDEV14(Text10, {
           children: line
         }, scrollOffset + i, false, undefined, this))
       }, undefined, false, undefined, this),
-      showScrollHint && showScrollDown && /* @__PURE__ */ jsxDEV13(Text9, {
+      showScrollHint && showScrollDown && /* @__PURE__ */ jsxDEV14(Text10, {
         dimColor: true,
         children: [
           "  ↓ ",
@@ -1246,7 +1750,7 @@ function ScrollableLog({
           maxOffset - scrollOffset !== 1 ? "s" : ""
         ]
       }, undefined, true, undefined, this),
-      showScrollHint && totalLines > visibleLines && /* @__PURE__ */ jsxDEV13(Text9, {
+      showScrollHint && totalLines > visibleLines && /* @__PURE__ */ jsxDEV14(Text10, {
         dimColor: true,
         children: [
           "j/k scroll • g top • G bottom ",
@@ -1258,29 +1762,29 @@ function ScrollableLog({
 }
 
 // src/components/PromptInput.tsx
-import { Box as Box11, Text as Text10, useInput as useInput6 } from "ink";
-import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+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
 }) {
-  useInput6((input) => {
+  useInput7((input) => {
     const lower = input.toLowerCase();
     if (options.includes(lower)) {
       onAnswer(lower);
     }
   });
-  return /* @__PURE__ */ jsxDEV14(Box11, {
+  return /* @__PURE__ */ jsxDEV15(Box12, {
     marginTop: 1,
     borderStyle: "single",
     borderColor: colors.accent,
     paddingX: 1,
-    children: /* @__PURE__ */ jsxDEV14(Text10, {
+    children: /* @__PURE__ */ jsxDEV15(Text11, {
       children: [
         question,
         " ",
-        /* @__PURE__ */ jsxDEV14(Text10, {
+        /* @__PURE__ */ jsxDEV15(Text11, {
           color: colors.accent,
           children: [
             "[",
@@ -1288,7 +1792,7 @@ function PromptInput({
             "]"
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV14(Text10, {
+        /* @__PURE__ */ jsxDEV15(Text11, {
           dimColor: true,
           children: ": "
         }, undefined, false, undefined, this)
@@ -1297,11 +1801,147 @@ function PromptInput({
   }, undefined, false, undefined, this);
 }
 
+// src/components/OrphanTable.tsx
+import { useState as useState7 } from "react";
+import { Box as Box13, Text as Text12, useInput as useInput8 } from "ink";
+import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
+function OrphanTable({ result, onAction, onDismiss }) {
+  const [selectedIndex, setSelectedIndex] = useState7(0);
+  const { orphans } = result;
+  useInput8((input, key) => {
+    if (orphans.length > 0) {
+      if (input === "j" || key.downArrow) {
+        setSelectedIndex((i) => Math.min(i + 1, orphans.length - 1));
+      }
+      if (input === "k" || key.upArrow) {
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      }
+      if (input === "a") {
+        onAction("add", orphans[selectedIndex]);
+      }
+      if (input === "x") {
+        onAction("uninstall", orphans[selectedIndex]);
+      }
+    }
+    if (key.escape || input === "h" || key.leftArrow) {
+      onDismiss();
+    }
+  });
+  const borderColor = orphans.length > 0 ? colors.warning : colors.success;
+  return /* @__PURE__ */ jsxDEV16(Panel, {
+    title: "Orphaned Packages",
+    borderColor,
+    children: [
+      /* @__PURE__ */ jsxDEV16(Box13, {
+        marginBottom: 1,
+        children: /* @__PURE__ */ jsxDEV16(Text12, {
+          dimColor: true,
+          children: [
+            "Config: ",
+            result.configFormulas,
+            " formulas, ",
+            result.configCasks,
+            " casks | Installed: ",
+            result.installedLeaves,
+            " leaves, ",
+            result.installedCasks,
+            " ",
+            "casks"
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      orphans.length === 0 ? /* @__PURE__ */ jsxDEV16(Box13, {
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ jsxDEV16(Text12, {
+            color: colors.success,
+            children: "No orphaned packages found!"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV16(Text12, {
+            dimColor: true,
+            children: "All installed packages are in your config."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV16(Box13, {
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ jsxDEV16(Text12, {
+            color: colors.warning,
+            children: [
+              "Found ",
+              orphans.length,
+              " orphaned package",
+              orphans.length !== 1 ? "s" : "",
+              ":"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV16(Box13, {
+            marginTop: 1,
+            flexDirection: "column",
+            children: [
+              /* @__PURE__ */ jsxDEV16(Box13, {
+                children: [
+                  /* @__PURE__ */ jsxDEV16(Text12, {
+                    bold: true,
+                    children: [
+                      "  ",
+                      "Name"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV16(Text12, {
+                    bold: true,
+                    children: [
+                      " ".repeat(28),
+                      "Type"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV16(Text12, {
+                color: colors.border,
+                children: "─".repeat(50)
+              }, undefined, false, undefined, this),
+              orphans.map((pkg, i) => {
+                const isSelected = i === selectedIndex;
+                return /* @__PURE__ */ jsxDEV16(Box13, {
+                  children: [
+                    /* @__PURE__ */ jsxDEV16(Text12, {
+                      color: isSelected ? colors.primary : undefined,
+                      children: [
+                        isSelected ? "❯ " : "  ",
+                        pkg.name.padEnd(30)
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV16(Text12, {
+                      color: pkg.type === "formula" ? colors.info : colors.accent,
+                      children: pkg.type
+                    }, undefined, false, undefined, this)
+                  ]
+                }, `${pkg.type}-${pkg.name}`, true, undefined, this);
+              })
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV16(Box13, {
+        marginTop: 1,
+        children: orphans.length > 0 ? /* @__PURE__ */ jsxDEV16(Text12, {
+          dimColor: true,
+          children: "j/k navigate | a add to config | x uninstall | esc/h back | q quit"
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV16(Text12, {
+          dimColor: true,
+          children: "esc/h back | q quit"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/cli/pkg-sync.ts
 import { parseArgs as parseArgs2 } from "util";
 
 // src/lib/config.ts
-import { existsSync as existsSync3 } from "fs";
+import { existsSync as existsSync4 } from "fs";
 var DEFAULT_CONFIG = {
   config: {
     purge: false,
@@ -1316,7 +1956,7 @@ var DEFAULT_CONFIG = {
 async function loadPkgConfig(path) {
   await ensureConfigDir();
   const configPath = path || PKG_CONFIG_PATH;
-  if (!existsSync3(configPath)) {
+  if (!existsSync4(configPath)) {
     await savePkgConfig(DEFAULT_CONFIG, configPath);
     return DEFAULT_CONFIG;
   }
@@ -1328,7 +1968,7 @@ async function savePkgConfig(config, path) {
   await writeFile(configPath, JSON.stringify(config, null, 2));
 }
 async function loadPkgLock() {
-  if (!existsSync3(PKG_LOCK_PATH)) {
+  if (!existsSync4(PKG_LOCK_PATH)) {
     return null;
   }
   return readJson(PKG_LOCK_PATH);
@@ -2109,21 +2749,88 @@ if (isMainModule3) {
   main3().catch(console.error);
 }
 
+// src/lib/orphan-detector.ts
+function getPackageName(fullName) {
+  const parts = fullName.split("/");
+  return parts[parts.length - 1];
+}
+async function detectOrphanedPackages() {
+  const config = await loadPkgConfig();
+  const leavesResult = await exec(["brew", "leaves"]);
+  const installedLeaves = leavesResult.success ? leavesResult.stdout.split(`
+`).filter(Boolean) : [];
+  const casksResult = await exec(["brew", "list", "--cask"]);
+  const installedCasks = casksResult.success ? casksResult.stdout.split(`
+`).filter(Boolean) : [];
+  const orphans = [];
+  const configPackages = config.packages.map((pkg) => ({
+    full: pkg,
+    short: getPackageName(pkg)
+  }));
+  for (const installed of installedLeaves) {
+    const installedShort = getPackageName(installed);
+    const isInConfig = configPackages.some((cfg) => installed === cfg.full || installed === cfg.short || installedShort === cfg.full || installedShort === cfg.short || installed.endsWith(`/${cfg.short}`));
+    if (!isInConfig) {
+      orphans.push({ name: installed, type: "formula" });
+    }
+  }
+  const configCasksSet = new Set(config.casks);
+  for (const cask of installedCasks) {
+    if (!configCasksSet.has(cask)) {
+      orphans.push({ name: cask, type: "cask" });
+    }
+  }
+  orphans.sort((a, b) => {
+    if (a.type !== b.type)
+      return a.type === "formula" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+  return {
+    orphans,
+    configFormulas: config.packages.length,
+    configCasks: config.casks.length,
+    installedLeaves: installedLeaves.length,
+    installedCasks: installedCasks.length
+  };
+}
+async function addToConfig(pkg) {
+  const config = await loadPkgConfig();
+  if (pkg.type === "formula") {
+    if (!config.packages.includes(pkg.name)) {
+      config.packages.push(pkg.name);
+      config.packages.sort();
+    }
+  } else {
+    if (!config.casks.includes(pkg.name)) {
+      config.casks.push(pkg.name);
+      config.casks.sort();
+    }
+  }
+  await savePkgConfig(config);
+}
+async function uninstallPackage(pkg) {
+  const cmd = pkg.type === "cask" ? ["brew", "uninstall", "--cask", pkg.name] : ["brew", "uninstall", pkg.name];
+  const result = await exec(cmd);
+  return result.success;
+}
+
 // src/components/menus/PackageMenu.tsx
-import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
 function PackageMenu({ onBack }) {
-  const [state, setState] = useState6("menu");
-  const [lines, setLines] = useState6([]);
-  const [output, setOutput] = useState6("");
-  const [isStreamingOp, setIsStreamingOp] = useState6(true);
-  const [pendingPrompt, setPendingPrompt] = useState6(null);
-  const [success, setSuccess] = useState6(true);
+  const [state, setState] = useState8("menu");
+  const [lines, setLines] = useState8([]);
+  const [output, setOutput] = useState8("");
+  const [isStreamingOp, setIsStreamingOp] = useState8(true);
+  const [pendingPrompt, setPendingPrompt] = useState8(null);
+  const [success, setSuccess] = useState8(true);
+  const [orphanResult, setOrphanResult] = useState8(null);
+  const [isOrphanView, setIsOrphanView] = useState8(false);
   const isRunningRef = useRef(false);
-  useInput7((input, key) => {
+  useInput9((input, key) => {
     if (state === "menu" && (key.escape || key.leftArrow || input === "h")) {
       onBack();
     }
-    if (state === "result") {
+    if (state === "result" && !isOrphanView) {
       setState("menu");
       setLines([]);
     }
@@ -2185,6 +2892,13 @@ function PackageMenu({ onBack }) {
         result = await runPkgLock(["status"]);
         setOutput(result.output);
         break;
+      case "orphans":
+        setIsStreamingOp(false);
+        setIsOrphanView(true);
+        const orphanData = await detectOrphanedPackages();
+        setOrphanResult(orphanData);
+        result = { output: "", success: true };
+        break;
       default:
         setIsStreamingOp(false);
         result = { output: "Unknown action", success: false };
@@ -2196,17 +2910,17 @@ function PackageMenu({ onBack }) {
   };
   if (state === "running") {
     if (!isStreamingOp) {
-      return /* @__PURE__ */ jsxDEV15(LoadingPanel, {
+      return /* @__PURE__ */ jsxDEV17(LoadingPanel, {
         title: "Package Sync"
       }, undefined, false, undefined, this);
     }
-    return /* @__PURE__ */ jsxDEV15(Panel, {
+    return /* @__PURE__ */ jsxDEV17(Panel, {
       title: "Package Sync",
       children: [
-        /* @__PURE__ */ jsxDEV15(ScrollableLog, {
+        /* @__PURE__ */ jsxDEV17(ScrollableLog, {
           lines
         }, undefined, false, undefined, this),
-        pendingPrompt && /* @__PURE__ */ jsxDEV15(PromptInput, {
+        pendingPrompt && /* @__PURE__ */ jsxDEV17(PromptInput, {
           question: pendingPrompt.question,
           options: pendingPrompt.options,
           onAnswer: handlePromptAnswer
@@ -2215,39 +2929,58 @@ function PackageMenu({ onBack }) {
     }, undefined, true, undefined, this);
   }
   if (state === "result") {
+    if (isOrphanView && orphanResult) {
+      const handleOrphanAction = async (action, pkg) => {
+        if (action === "add") {
+          await addToConfig(pkg);
+        } else {
+          await uninstallPackage(pkg);
+        }
+        const updated = await detectOrphanedPackages();
+        setOrphanResult(updated);
+      };
+      return /* @__PURE__ */ jsxDEV17(OrphanTable, {
+        result: orphanResult,
+        onAction: handleOrphanAction,
+        onDismiss: () => {
+          setIsOrphanView(false);
+          setState("menu");
+        }
+      }, undefined, false, undefined, this);
+    }
     if (!isStreamingOp) {
-      return /* @__PURE__ */ jsxDEV15(CommandOutput, {
+      return /* @__PURE__ */ jsxDEV17(CommandOutput, {
         title: "Package Sync",
         output,
         success,
         onDismiss: () => setState("menu")
       }, undefined, false, undefined, this);
     }
-    return /* @__PURE__ */ jsxDEV15(Panel, {
+    return /* @__PURE__ */ jsxDEV17(Panel, {
       title: "Package Sync",
       borderColor: success ? colors.success : colors.error,
       children: [
-        /* @__PURE__ */ jsxDEV15(ScrollableLog, {
+        /* @__PURE__ */ jsxDEV17(ScrollableLog, {
           lines,
           autoScroll: false
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV15(Box12, {
+        /* @__PURE__ */ jsxDEV17(Box14, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsxDEV15(Text11, {
+          children: /* @__PURE__ */ jsxDEV17(Text13, {
             color: success ? colors.success : colors.error,
             children: success ? "Done" : "Failed"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV15(Text11, {
+        /* @__PURE__ */ jsxDEV17(Text13, {
           dimColor: true,
           children: "Press any key to continue..."
         }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV15(Panel, {
+  return /* @__PURE__ */ jsxDEV17(Panel, {
     title: "Package Sync",
-    children: /* @__PURE__ */ jsxDEV15(VimSelect, {
+    children: /* @__PURE__ */ jsxDEV17(VimSelect, {
       options: [
         { label: "Sync packages", value: "sync" },
         { label: "Sync with purge", value: "sync-purge" },
@@ -2255,6 +2988,7 @@ function PackageMenu({ onBack }) {
         { label: "Upgrade interactive", value: "upgrade-interactive" },
         { label: "Update lockfile", value: "lock-update" },
         { label: "Lockfile status", value: "lock-status" },
+        { label: "Find orphaned packages", value: "orphans" },
         { label: "Back", value: "back" }
       ],
       onChange: handleAction
@@ -2263,14 +2997,14 @@ function PackageMenu({ onBack }) {
 }
 
 // src/components/menus/ThemeMenu.tsx
-import { useState as useState8, useEffect as useEffect5, useMemo as useMemo4 } from "react";
-import { Box as Box14, Text as Text13 } from "ink";
-import { existsSync as existsSync6, readdirSync as readdirSync5 } from "fs";
-import { join as join5 } from "path";
+import { useState as useState10, useEffect as useEffect5, useMemo as useMemo4 } from "react";
+import { Box as Box16, Text as Text15 } from "ink";
+import { existsSync as existsSync7, readdirSync as readdirSync5 } from "fs";
+import { join as join6 } from "path";
 
 // src/components/ThemeCard.tsx
-import { Box as Box13, Text as Text12 } from "ink";
-import { jsxDEV as jsxDEV16 } from "react/jsx-dev-runtime";
+import { Box as Box15, Text as Text14 } from "ink";
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
 function ThemeCard({ theme, isSelected, width }) {
   const borderColor = isSelected ? colors.accent : colors.border;
   const nameColor = isSelected ? colors.primary : colors.text;
@@ -2280,25 +3014,25 @@ function ThemeCard({ theme, isSelected, width }) {
   if (theme.isLightMode)
     indicators.push("light");
   const indicatorText = indicators.length > 0 ? ` [${indicators.join(" ")}]` : "";
-  return /* @__PURE__ */ jsxDEV16(Box13, {
+  return /* @__PURE__ */ jsxDEV18(Box15, {
     flexDirection: "column",
     width,
     borderStyle: borderStyles.panel,
     borderColor,
     paddingX: 1,
-    children: /* @__PURE__ */ jsxDEV16(Box13, {
+    children: /* @__PURE__ */ jsxDEV18(Box15, {
       children: [
-        /* @__PURE__ */ jsxDEV16(Text12, {
+        /* @__PURE__ */ jsxDEV18(Text14, {
           color: isSelected ? colors.accent : colors.primaryDim,
           children: isSelected ? "● " : "  "
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV16(Text12, {
+        /* @__PURE__ */ jsxDEV18(Text14, {
           color: nameColor,
           bold: true,
           wrap: "truncate",
           children: theme.name
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV16(Text12, {
+        /* @__PURE__ */ jsxDEV18(Text14, {
           color: colors.primaryDim,
           children: indicatorText
         }, undefined, false, undefined, this)
@@ -2308,8 +3042,8 @@ function ThemeCard({ theme, isSelected, width }) {
 }
 
 // src/hooks/useThemeGrid.ts
-import { useState as useState7, useEffect as useEffect4 } from "react";
-import { useInput as useInput8 } from "ink";
+import { useState as useState9, useEffect as useEffect4 } from "react";
+import { useInput as useInput10 } from "ink";
 function useThemeGrid({
   itemCount,
   cardHeight = 3,
@@ -2320,8 +3054,8 @@ function useThemeGrid({
   enabled = true
 }) {
   const { columns, rows } = useTerminalSize();
-  const [selectedIndex, setSelectedIndex] = useState7(0);
-  const [scrollOffset, setScrollOffset] = useState7(0);
+  const [selectedIndex, setSelectedIndex] = useState9(0);
+  const [scrollOffset, setScrollOffset] = useState9(0);
   const availableWidth = columns - 6;
   const cardsPerRow = Math.max(1, Math.floor(availableWidth / minCardWidth));
   const cardWidth = Math.floor(availableWidth / cardsPerRow);
@@ -2336,7 +3070,7 @@ function useThemeGrid({
       setScrollOffset(selectedRow - visibleRows + 1);
     }
   }, [selectedRow, scrollOffset, visibleRows]);
-  useInput8((input, key) => {
+  useInput10((input, key) => {
     if (!enabled)
       return;
     if (key.escape && onBack) {
@@ -2387,8 +3121,8 @@ function useThemeGrid({
 }
 
 // src/lib/theme-parser.ts
-import { existsSync as existsSync4, readdirSync as readdirSync3 } from "fs";
-import { join as join3 } from "path";
+import { existsSync as existsSync5, readdirSync as readdirSync3 } from "fs";
+import { join as join4 } from "path";
 function parseYaml(content) {
   const result = {};
   const lines = content.split(`
@@ -2419,8 +3153,8 @@ function parseYaml(content) {
   return result;
 }
 async function parseThemeMetadata(themePath) {
-  const yamlPath = join3(themePath, "theme.yaml");
-  if (!existsSync4(yamlPath)) {
+  const yamlPath = join4(themePath, "theme.yaml");
+  if (!existsSync5(yamlPath)) {
     return;
   }
   try {
@@ -2442,7 +3176,7 @@ function parseThemeFiles(themePath) {
   const entries = readdirSync3(themePath, { withFileTypes: true });
   return entries.filter((e) => e.isFile() && !e.name.startsWith(".") && e.name !== "theme.yaml" && e.name !== "light.mode").map((e) => ({
     name: e.name,
-    path: join3(themePath, e.name),
+    path: join4(themePath, e.name),
     application: e.name.replace(/\.(conf|theme|lua|toml|css|json|ini)$/, "")
   }));
 }
@@ -2454,16 +3188,16 @@ async function parseTheme(themePath, themeName) {
     path: themePath,
     files,
     metadata,
-    hasBackgrounds: existsSync4(join3(themePath, "backgrounds")),
-    hasPreview: existsSync4(join3(themePath, "preview.png")),
-    isLightMode: existsSync4(join3(themePath, "light.mode"))
+    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 existsSync5, rmSync, symlinkSync, unlinkSync } from "fs";
-import { join as join4 } from "path";
+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",
@@ -2475,14 +3209,14 @@ var colors5 = {
 };
 async function listThemes() {
   await ensureConfigDir();
-  if (!existsSync5(THEMES_DIR)) {
+  if (!existsSync6(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 themePath = join5(THEMES_DIR, entry.name);
       const theme = await parseTheme(themePath, entry.name);
       themes.push(theme);
     }
@@ -2490,10 +3224,10 @@ async function listThemes() {
   return themes;
 }
 function clearDirectory(dir) {
-  if (existsSync5(dir)) {
+  if (existsSync6(dir)) {
     const entries = readdirSync4(dir, { withFileTypes: true });
     for (const entry of entries) {
-      const fullPath = join4(dir, entry.name);
+      const fullPath = join5(dir, entry.name);
       if (entry.isSymbolicLink() || entry.isFile()) {
         unlinkSync(fullPath);
       } else if (entry.isDirectory()) {
@@ -2503,33 +3237,33 @@ function clearDirectory(dir) {
   }
 }
 function createSymlink(source, target) {
-  if (existsSync5(target)) {
+  if (existsSync6(target)) {
     unlinkSync(target);
   }
   symlinkSync(source, target);
 }
 async function applyTheme(themeName) {
-  const themeDir = join4(THEMES_DIR, themeName);
-  if (!existsSync5(themeDir)) {
+  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 (existsSync5(BACKGROUNDS_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 = join4(themeDir, entry.name);
+    const source = join5(themeDir, entry.name);
     if (entry.isFile() && entry.name !== "theme.yaml" && entry.name !== "light.mode") {
-      const target = join4(THEME_TARGET_DIR, entry.name);
+      const target = join5(THEME_TARGET_DIR, entry.name);
       createSymlink(source, target);
     }
   }
   if (theme.hasBackgrounds) {
-    const backgroundsSource = join4(themeDir, "backgrounds");
+    const backgroundsSource = join5(themeDir, "backgrounds");
     createSymlink(backgroundsSource, BACKGROUNDS_TARGET_DIR);
   }
   let output = `Theme '${theme.name}' applied successfully`;
@@ -2548,8 +3282,8 @@ Note: This is a light mode theme`;
   return { output, success: true };
 }
 async function showThemeInfo(themeName) {
-  const themeDir = join4(THEMES_DIR, themeName);
-  if (!existsSync5(themeDir)) {
+  const themeDir = join5(THEMES_DIR, themeName);
+  if (!existsSync6(themeDir)) {
     console.error(`${colors5.red}Error: Theme '${themeName}' not found${colors5.reset}`);
     process.exit(1);
   }
@@ -2631,10 +3365,10 @@ if (isMainModule4) {
 }
 
 // src/components/menus/ThemeMenu.tsx
-import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19 } from "react/jsx-dev-runtime";
 function ThemeMenu({ onBack }) {
-  const [themes, setThemes] = useState8([]);
-  const [loading, setLoading] = useState8(true);
+  const [themes, setThemes] = useState10([]);
+  const [loading, setLoading] = useState10(true);
   const { state, output, success, isRunning, isResult, execute, reset } = useMenuAction();
   const grid = useThemeGrid({
     itemCount: themes.length,
@@ -2644,7 +3378,7 @@ function ThemeMenu({ onBack }) {
   });
   useEffect5(() => {
     async function loadThemes() {
-      if (!existsSync6(THEMES_DIR)) {
+      if (!existsSync7(THEMES_DIR)) {
         setThemes([]);
         setLoading(false);
         return;
@@ -2653,7 +3387,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);
         }
@@ -2671,13 +3405,13 @@ function ThemeMenu({ onBack }) {
     return themes.slice(grid.visibleStartIndex, grid.visibleEndIndex);
   }, [themes, grid.visibleStartIndex, grid.visibleEndIndex]);
   if (loading || isRunning) {
-    return /* @__PURE__ */ jsxDEV17(LoadingPanel, {
+    return /* @__PURE__ */ jsxDEV19(LoadingPanel, {
       title: "Select Theme",
       label: loading ? "Loading themes..." : "Applying theme..."
     }, undefined, false, undefined, this);
   }
   if (isResult) {
-    return /* @__PURE__ */ jsxDEV17(CommandOutput, {
+    return /* @__PURE__ */ jsxDEV19(CommandOutput, {
       title: "Select Theme",
       output,
       success,
@@ -2685,28 +3419,28 @@ function ThemeMenu({ onBack }) {
     }, undefined, false, undefined, this);
   }
   if (themes.length === 0) {
-    return /* @__PURE__ */ jsxDEV17(Panel, {
+    return /* @__PURE__ */ jsxDEV19(Panel, {
       title: "Select Theme",
       children: [
-        /* @__PURE__ */ jsxDEV17(Box14, {
+        /* @__PURE__ */ jsxDEV19(Box16, {
           flexDirection: "column",
           children: [
-            /* @__PURE__ */ jsxDEV17(Text13, {
+            /* @__PURE__ */ jsxDEV19(Text15, {
               color: colors.warning,
               children: "No themes available."
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV17(Text13, {
+            /* @__PURE__ */ jsxDEV19(Text15, {
               children: "This system is compatible with omarchy themes."
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV17(Text13, {
+            /* @__PURE__ */ jsxDEV19(Text15, {
               dimColor: true,
               children: "Add themes to ~/.config/formalconf/themes/"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV17(Box14, {
+        /* @__PURE__ */ jsxDEV19(Box16, {
           marginTop: 1,
-          children: /* @__PURE__ */ jsxDEV17(VimSelect, {
+          children: /* @__PURE__ */ jsxDEV19(VimSelect, {
             options: [{ label: "Back", value: "back" }],
             onChange: () => onBack()
           }, undefined, false, undefined, this)
@@ -2714,10 +3448,10 @@ function ThemeMenu({ onBack }) {
       ]
     }, undefined, true, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV17(Panel, {
+  return /* @__PURE__ */ jsxDEV19(Panel, {
     title: "Select Theme",
     children: [
-      grid.showScrollUp && /* @__PURE__ */ jsxDEV17(Text13, {
+      grid.showScrollUp && /* @__PURE__ */ jsxDEV19(Text15, {
         dimColor: true,
         children: [
           "  ",
@@ -2727,18 +3461,18 @@ function ThemeMenu({ onBack }) {
           grid.scrollOffset > 1 ? "s" : ""
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV17(Box14, {
+      /* @__PURE__ */ jsxDEV19(Box16, {
         flexDirection: "row",
         flexWrap: "wrap",
         height: grid.gridHeight,
         overflow: "hidden",
-        children: visibleThemes.map((theme, index) => /* @__PURE__ */ jsxDEV17(ThemeCard, {
+        children: visibleThemes.map((theme, index) => /* @__PURE__ */ jsxDEV19(ThemeCard, {
           theme,
           isSelected: grid.visibleStartIndex + index === grid.selectedIndex,
           width: grid.cardWidth
         }, theme.path, false, undefined, this))
       }, undefined, false, undefined, this),
-      grid.showScrollDown && /* @__PURE__ */ jsxDEV17(Text13, {
+      grid.showScrollDown && /* @__PURE__ */ jsxDEV19(Text15, {
         dimColor: true,
         children: [
           "  ",
@@ -2748,9 +3482,9 @@ function ThemeMenu({ onBack }) {
           grid.totalRows - grid.scrollOffset - grid.visibleRows > 1 ? "s" : ""
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV17(Box14, {
+      /* @__PURE__ */ jsxDEV19(Box16, {
         marginTop: 1,
-        children: /* @__PURE__ */ jsxDEV17(Text13, {
+        children: /* @__PURE__ */ jsxDEV19(Text15, {
           dimColor: true,
           children: "←→↑↓/hjkl navigate • Enter select • Esc back"
         }, undefined, false, undefined, this)
@@ -2760,7 +3494,7 @@ function ThemeMenu({ onBack }) {
 }
 
 // src/cli/formalconf.tsx
-import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV20 } from "react/jsx-dev-runtime";
 var BREADCRUMBS = {
   main: ["Main"],
   config: ["Main", "Config Manager"],
@@ -2768,61 +3502,71 @@ var BREADCRUMBS = {
   themes: ["Main", "Themes"]
 };
 function App() {
-  const [appState, setAppState] = useState9("loading");
-  const [missingDeps, setMissingDeps] = useState9([]);
-  const [screen, setScreen] = useState9("main");
+  const [appState, setAppState] = useState11("loading");
+  const [missingDeps, setMissingDeps] = useState11([]);
+  const [screen, setScreen] = useState11("main");
   const { exit } = useApp2();
-  useInput9((input) => {
+  useInput11((input) => {
     if (input === "q")
       exit();
   });
   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();
   }, []);
   if (appState === "loading") {
-    return /* @__PURE__ */ jsxDEV18(Layout, {
+    return /* @__PURE__ */ jsxDEV20(Layout, {
       breadcrumb: ["Loading"],
-      children: /* @__PURE__ */ jsxDEV18(Panel, {
+      children: /* @__PURE__ */ jsxDEV20(Panel, {
         title: "FormalConf",
-        children: /* @__PURE__ */ jsxDEV18(Spinner2, {
+        children: /* @__PURE__ */ jsxDEV20(Spinner2, {
           label: "Checking prerequisites..."
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
   if (appState === "error") {
-    return /* @__PURE__ */ jsxDEV18(PrerequisiteError, {
+    return /* @__PURE__ */ jsxDEV20(PrerequisiteError, {
       missing: missingDeps,
       onExit: exit
     }, undefined, false, undefined, this);
   }
+  if (appState === "onboarding") {
+    return /* @__PURE__ */ jsxDEV20(Onboarding, {
+      onComplete: () => setAppState("ready")
+    }, undefined, false, undefined, this);
+  }
   const goBack = () => setScreen("main");
-  return /* @__PURE__ */ jsxDEV18(Layout, {
+  return /* @__PURE__ */ jsxDEV20(Layout, {
     breadcrumb: BREADCRUMBS[screen],
     children: [
-      screen === "main" && /* @__PURE__ */ jsxDEV18(MainMenu, {
+      screen === "main" && /* @__PURE__ */ jsxDEV20(MainMenu, {
         onSelect: setScreen
       }, undefined, false, undefined, this),
-      screen === "config" && /* @__PURE__ */ jsxDEV18(ConfigMenu, {
+      screen === "config" && /* @__PURE__ */ jsxDEV20(ConfigMenu, {
         onBack: goBack
       }, undefined, false, undefined, this),
-      screen === "packages" && /* @__PURE__ */ jsxDEV18(PackageMenu, {
+      screen === "packages" && /* @__PURE__ */ jsxDEV20(PackageMenu, {
         onBack: goBack
       }, undefined, false, undefined, this),
-      screen === "themes" && /* @__PURE__ */ jsxDEV18(ThemeMenu, {
+      screen === "themes" && /* @__PURE__ */ jsxDEV20(ThemeMenu, {
         onBack: goBack
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-render(/* @__PURE__ */ jsxDEV18(App, {}, undefined, false, undefined, this));
+render(/* @__PURE__ */ jsxDEV20(App, {}, undefined, false, undefined, this));