create-skaff 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skaff",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Interactive Next.js project scaffolder: Tailwind, shadcn/ui, Motion, Lucide, Oxlint, Oxfmt, Ultracite, Claude and Codex config",
   "type": "module",
   "bin": {

package/src/components/package-manager-prompt.tsx

@@ -1,32 +1,34 @@
-import type { SelectOption } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import { useState } from "react";
 import { type PackageManager, packageManagers } from "../lib/package-manager";
 
-type PackageManagerPromptProps = { onSelect: (packageManager: PackageManager) => void };
+type PackageManagerPromptProps = { initialValue: PackageManager; onSelect: (packageManager: PackageManager) => void };
 
-const options: SelectOption[] = packageManagers.map((value) => ({ name: value, value, description: "" }));
+export function PackageManagerPrompt({ initialValue, onSelect }: PackageManagerPromptProps) {
+  const [index, setIndex] = useState(Math.max(0, packageManagers.indexOf(initialValue)));
+
+  useKeyboard((key) => {
+    if (key.name === "up" || key.name === "k") {
+      setIndex((current) => (current + packageManagers.length - 1) % packageManagers.length);
+    } else if (key.name === "down" || key.name === "j") {
+      setIndex((current) => (current + 1) % packageManagers.length);
+    } else if (key.name === "return") {
+      onSelect(packageManagers[index]);
+    }
+  });
 
-export function PackageManagerPrompt({ onSelect }: PackageManagerPromptProps) {
   return (
     <box flexDirection="column">
       <text>
         <span fg="#a78bfa">◆</span>  <strong>Package manager</strong>
       </text>
-      <box flexDirection="row">
-        <text fg="#a78bfa">│  </text>
-        <box width={20} height={packageManagers.length}>
-          <select
-            focused
-            options={options}
-            showDescription={false}
-            selectedIndex={1}
-            onSelect={(_index, option) => {
-              if (option && packageManagers.includes(option.value as PackageManager)) {
-                onSelect(option.value as PackageManager);
-              }
-            }}
-          />
-        </box>
-      </box>
+      {packageManagers.map((value, i) => (
+        <text key={value}>
+          <span fg="#a78bfa">│  </span>
+          {i === index ? <span fg="#4ade80">◉ </span> : <span fg="#555555">○ </span>}
+          <span fg={i === index ? "#ffffff" : "#888888"}>{value}</span>
+        </text>
+      ))}
       <text>
         <span fg="#a78bfa">│  </span>
         <span fg="#666666">↑↓ to move · Enter to continue · Esc to go back</span>

package/src/components/wizard-app.tsx

@@ -63,6 +63,7 @@ export function WizardApp({ initialName, cwd }: WizardAppProps) {
       ) : null}
       {screen === "packageManager" ? (
         <PackageManagerPrompt
+          initialValue={packageManager}
           onSelect={(value) => {
             setPackageManager(value);
             setScreen("confirm");