@algolia/wizard 0.30.0 → 0.32.0

package/dist/main.js

@@ -4,7 +4,7 @@
 import { render } from "ink";
 
 // src/ui/App.tsx
-import { Box as Box19, Text as Text19, useApp, useInput as useInput7, useWindowSize as useWindowSize7 } from "ink";
+import { Box as Box19, Text as Text19, useApp, useInput as useInput6, useWindowSize as useWindowSize7 } from "ink";
 import Spinner2 from "ink-spinner";
 
 // src/core/store.ts
@@ -626,50 +626,107 @@ function Notices({
 }
 
 // src/ui/PromptInput.tsx
-import { Box as Box9, Text as Text9, useInput as useInput3 } from "ink";
+import { Box as Box9, Text as Text9 } from "ink";
 import TextInput from "ink-text-input";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 
 // src/ui/CommandApproval.tsx
+import { Box as Box6, Text as Text6 } from "ink";
+
+// src/ui/DecisionSelect.tsx
 import { Box as Box5, Text as Text5, useInput } from "ink";
+import { useState as useState3 } from "react";
 
-// src/ui/NextAction.tsx
+// src/ui/SelectRow.tsx
 import { Box as Box4, Text as Text4 } from "ink";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function NextAction({
-  action,
-  keyHint,
-  hierarchy = "primary"
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SelectRow({
+  highlighted,
+  label,
+  width,
+  labelWidth,
+  highlightBackground = true,
+  usePadding = false,
+  children
 }) {
-  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "row", gap: 1, children: [
-    hierarchy === "primary" && /* @__PURE__ */ jsx3(Text4, { color: COLORS.success, bold: true, children: `> ${action}` }),
-    hierarchy === "secondary" && /* @__PURE__ */ jsxs3(Fragment, { children: [
-      /* @__PURE__ */ jsx3(Text4, { color: COLORS.success, bold: true, children: `>` }),
-      /* @__PURE__ */ jsx3(Text4, { color: COLORS.primary, bold: true, children: action })
-    ] }),
-    /* @__PURE__ */ jsxs3(Box4, { children: [
-      /* @__PURE__ */ jsx3(Text4, { color: COLORS.muted, children: "press " }),
-      /* @__PURE__ */ jsx3(Text4, { color: COLORS.muted, children: `[` }),
-      /* @__PURE__ */ jsx3(Text4, { color: COLORS.primary, children: keyHint }),
-      /* @__PURE__ */ jsx3(Text4, { color: COLORS.muted, children: `]` })
+  const labelColor = highlighted ? highlightBackground ? COLORS.highlight.fg : COLORS.success : COLORS.primary;
+  return /* @__PURE__ */ jsxs3(
+    Box4,
+    {
+      width,
+      paddingX: usePadding ? 1 : 0,
+      paddingY: usePadding ? 1 : 0,
+      backgroundColor: highlighted && highlightBackground ? COLORS.highlight.bg : void 0,
+      children: [
+        /* @__PURE__ */ jsx3(Box4, { width: labelWidth, children: /* @__PURE__ */ jsxs3(
+          Text4,
+          {
+            color: labelColor,
+            bold: highlighted && !highlightBackground,
+            wrap: "truncate",
+            children: [
+              highlighted ? "\u276F   " : "    ",
+              label
+            ]
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+}
+
+// src/ui/DecisionSelect.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function DecisionSelect({
+  actions,
+  onDecide
+}) {
+  const [index, setIndex] = useState3(0);
+  useInput((input, key) => {
+    if (key.upArrow || input === "k") {
+      setIndex((i) => (i - 1 + actions.length) % actions.length);
+    } else if (key.downArrow || input === "j") {
+      setIndex((i) => (i + 1) % actions.length);
+    } else if (key.return) {
+      onDecide(actions[index].value);
+    } else if (key.escape) {
+      onDecide(actions[1].value);
+    }
+  });
+  return /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx4(Box5, { flexDirection: "column", children: actions.map((action, i) => /* @__PURE__ */ jsx4(
+      SelectRow,
+      {
+        highlighted: i === index,
+        highlightBackground: false,
+        label: action.label
+      },
+      action.label
+    )) }),
+    /* @__PURE__ */ jsxs4(Box5, { gap: 2, children: [
+      /* @__PURE__ */ jsxs4(Text5, { children: [
+        /* @__PURE__ */ jsx4(Text5, { color: COLORS.primary, children: "[\u2191] [\u2193]" }),
+        /* @__PURE__ */ jsx4(Text5, { color: COLORS.dim, children: " move" })
+      ] }),
+      /* @__PURE__ */ jsxs4(Text5, { children: [
+        /* @__PURE__ */ jsx4(Text5, { color: COLORS.primary, children: "[enter]" }),
+        /* @__PURE__ */ jsx4(Text5, { color: COLORS.dim, children: " confirm" })
+      ] })
     ] })
   ] });
 }
 
 // src/ui/CommandApproval.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function CommandApproval({
   command,
   onDecide
 }) {
-  useInput((_input, key) => {
-    if (key.return) onDecide("approve");
-    else if (key.escape) onDecide("reject");
-  });
-  return /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx4(Text5, { color: COLORS.primary, bold: true, children: "Run this command?" }),
-    /* @__PURE__ */ jsxs4(
-      Box5,
+  return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx5(Text6, { color: COLORS.primary, bold: true, children: "Run this command?" }),
+    /* @__PURE__ */ jsxs5(
+      Box6,
       {
         flexDirection: "column",
         paddingLeft: 2,
@@ -680,36 +737,42 @@ function CommandApproval({
         borderRight: false,
         gap: 1,
         children: [
-          /* @__PURE__ */ jsxs4(Box5, { children: [
-            /* @__PURE__ */ jsx4(Text5, { color: COLORS.muted, children: "$ " }),
-            /* @__PURE__ */ jsx4(Text5, { color: COLORS.strong, wrap: "wrap", children: command.command })
+          /* @__PURE__ */ jsxs5(Box6, { children: [
+            /* @__PURE__ */ jsx5(Text6, { color: COLORS.muted, children: "$ " }),
+            /* @__PURE__ */ jsx5(Text6, { color: COLORS.strong, wrap: "wrap", children: command.command })
           ] }),
-          /* @__PURE__ */ jsxs4(Box5, { gap: 1, children: [
-            /* @__PURE__ */ jsx4(Text5, { color: COLORS.muted, children: "in:" }),
-            /* @__PURE__ */ jsx4(Text5, { color: COLORS.muted, wrap: "wrap", children: command.cwd })
+          /* @__PURE__ */ jsxs5(Box6, { gap: 1, children: [
+            /* @__PURE__ */ jsx5(Text6, { color: COLORS.muted, children: "in:" }),
+            /* @__PURE__ */ jsx5(Text6, { color: COLORS.muted, wrap: "wrap", children: command.cwd })
           ] }),
-          command.explanation && /* @__PURE__ */ jsxs4(Box5, { gap: 1, children: [
-            /* @__PURE__ */ jsx4(Text5, { color: COLORS.muted, children: "why:" }),
-            /* @__PURE__ */ jsx4(Text5, { color: COLORS.accent, wrap: "wrap", children: command.explanation })
+          command.explanation && /* @__PURE__ */ jsxs5(Box6, { gap: 1, children: [
+            /* @__PURE__ */ jsx5(Text6, { color: COLORS.muted, children: "why:" }),
+            /* @__PURE__ */ jsx5(Text6, { color: COLORS.accent, wrap: "wrap", children: command.explanation })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx4(NextAction, { action: "approve", keyHint: "enter" }),
-      /* @__PURE__ */ jsx4(NextAction, { action: "reject", keyHint: "esc", hierarchy: "secondary" })
-    ] })
+    /* @__PURE__ */ jsx5(
+      DecisionSelect,
+      {
+        actions: [
+          { label: "approve", value: "approve" },
+          { label: "reject", value: "reject" }
+        ],
+        onDecide
+      }
+    )
   ] });
 }
 
 // src/ui/SelectPrompt.tsx
 import { Box as Box8, Text as Text8, useInput as useInput2, useWindowSize as useWindowSize4 } from "ink";
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState4 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState5 } from "react";
 
 // src/ui/ScrollView.tsx
-import { Box as Box6, Text as Text6, measureElement as measureElement2, useWindowSize as useWindowSize3 } from "ink";
-import { useCallback, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
-import { jsxs as jsxs5 } from "react/jsx-runtime";
+import { Box as Box7, Text as Text7, measureElement as measureElement2, useWindowSize as useWindowSize3 } from "ink";
+import { useCallback, useLayoutEffect, useRef as useRef2, useState as useState4 } from "react";
+import { jsxs as jsxs6 } from "react/jsx-runtime";
 var INDICATOR_ROWS = 2;
 function fittedWidth(node, columns) {
   let left = 0;
@@ -725,7 +788,7 @@ function useScrollWindow({
 }) {
   const viewportRef = useRef2(null);
   const { columns } = useWindowSize3();
-  const [size, setSize] = useState3(
+  const [size, setSize] = useState4(
     null
   );
   useLayoutEffect(() => {
@@ -738,7 +801,7 @@ function useScrollWindow({
   });
   const capacity = size === null || itemCount * rowHeight <= size.height ? itemCount : Math.max(Math.floor((size.height - INDICATOR_ROWS) / rowHeight), 1);
   const maxOffset = Math.max(itemCount - capacity, 0);
-  const [offset, setOffset] = useState3(0);
+  const [offset, setOffset] = useState4(0);
   const prevMaxOffsetRef = useRef2(0);
   useLayoutEffect(() => {
     const wasAtBottom = offset >= prevMaxOffsetRef.current;
@@ -779,14 +842,14 @@ function useScrollWindow({
   };
 }
 function ScrollView({ scroll, children }) {
-  return /* @__PURE__ */ jsxs5(Box6, { ref: scroll.viewportRef, flexDirection: "column", flexGrow: 1, children: [
-    scroll.hiddenAbove > 0 && /* @__PURE__ */ jsxs5(Text6, { color: COLORS.dim, children: [
+  return /* @__PURE__ */ jsxs6(Box7, { ref: scroll.viewportRef, flexDirection: "column", flexGrow: 1, children: [
+    scroll.hiddenAbove > 0 && /* @__PURE__ */ jsxs6(Text7, { color: COLORS.dim, children: [
       "\u2191 ",
       scroll.hiddenAbove,
       " more"
     ] }),
     children,
-    scroll.hiddenBelow > 0 && /* @__PURE__ */ jsxs5(Text6, { color: COLORS.dim, children: [
+    scroll.hiddenBelow > 0 && /* @__PURE__ */ jsxs6(Text7, { color: COLORS.dim, children: [
       "\u2193 ",
       scroll.hiddenBelow,
       " more"
@@ -794,45 +857,6 @@ function ScrollView({ scroll, children }) {
   ] });
 }
 
-// src/ui/SelectRow.tsx
-import { Box as Box7, Text as Text7 } from "ink";
-import { jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
-function SelectRow({
-  highlighted,
-  label,
-  width,
-  labelWidth,
-  highlightBackground = true,
-  usePadding = false,
-  children
-}) {
-  const labelColor = highlighted ? highlightBackground ? COLORS.highlight.fg : COLORS.success : void 0;
-  return /* @__PURE__ */ jsxs6(
-    Box7,
-    {
-      width,
-      paddingX: usePadding ? 1 : 0,
-      paddingY: usePadding ? 1 : 0,
-      backgroundColor: highlighted && highlightBackground ? COLORS.highlight.bg : void 0,
-      children: [
-        /* @__PURE__ */ jsx5(Box7, { width: labelWidth, children: /* @__PURE__ */ jsxs6(
-          Text7,
-          {
-            color: labelColor,
-            bold: highlighted && !highlightBackground,
-            wrap: "truncate",
-            children: [
-              highlighted ? "\u276F   " : "    ",
-              label
-            ]
-          }
-        ) }),
-        children
-      ]
-    }
-  );
-}
-
 // src/ui/SelectPrompt.tsx
 import { jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
 var CANCEL = "cancel";
@@ -853,10 +877,10 @@ function SelectPrompt({
   secondary,
   defaultSelectedIndex = 0
 }) {
-  const [index, setIndex] = useState4(
+  const [index, setIndex] = useState5(
     () => defaultSelectedIndex > 0 && defaultSelectedIndex < options.length ? defaultSelectedIndex : 0
   );
-  const [checked, setChecked] = useState4(() => /* @__PURE__ */ new Set());
+  const [checked, setChecked] = useState5(() => /* @__PURE__ */ new Set());
   const hasCancel = Boolean(multi || cancelable);
   const rows = hasCancel ? [...options, "Cancel"] : options;
   const cancelIndex = hasCancel ? options.length : -1;
@@ -866,7 +890,7 @@ function SelectPrompt({
   hints.push({ key: "[enter]", label: "confirm" });
   const containerRef = useRef3(null);
   const { columns } = useWindowSize4();
-  const [width, setWidth] = useState4(columns);
+  const [width, setWidth] = useState5(columns);
   useLayoutEffect2(() => {
     if (!containerRef.current) return;
     const measured = fittedWidth(containerRef.current, columns);
@@ -978,22 +1002,24 @@ function EnterToContinuePrompt({
   messages,
   onDecide
 }) {
-  useInput3((_input, key) => {
-    if (key.return) onDecide(true);
-    else if (key.escape) onDecide(false);
-  });
   return /* @__PURE__ */ jsxs8(Box9, { flexDirection: "column", gap: 1, children: [
     messages?.map((m, i) => /* @__PURE__ */ jsx7(Text9, { color: COLORS.muted, children: m }, `msg-${i}`)),
     question && /* @__PURE__ */ jsx7(Text9, { color: COLORS.primary, children: question }),
-    /* @__PURE__ */ jsxs8(Box9, { gap: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx7(NextAction, { action: "continue", keyHint: "enter" }),
-      /* @__PURE__ */ jsx7(NextAction, { action: "decline", keyHint: "esc", hierarchy: "secondary" })
-    ] })
+    /* @__PURE__ */ jsx7(
+      DecisionSelect,
+      {
+        actions: [
+          { label: "continue", value: true },
+          { label: "decline", value: false }
+        ],
+        onDecide
+      }
+    )
   ] });
 }
 function PromptInput() {
   const { phase, inputReq, submitInput } = useWizard();
-  const [draft, setDraft] = useState5("");
+  const [draft, setDraft] = useState6("");
   if (phase === "done" || phase === "error") {
     return /* @__PURE__ */ jsx7(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text9, { color: "gray", dimColor: true, children: "Press Enter or Esc to exit" }) });
   }
@@ -1093,8 +1119,8 @@ function PromptInput() {
 // src/ui/Welcome.tsx
 import { dirname as dirname2, join as join3 } from "node:path";
 import { fileURLToPath } from "node:url";
-import { useState as useState6 } from "react";
-import { Box as Box10, Spacer, Text as Text10, useInput as useInput4, useWindowSize as useWindowSize5 } from "ink";
+import { useState as useState7 } from "react";
+import { Box as Box10, Spacer, Text as Text10, useInput as useInput3, useWindowSize as useWindowSize5 } from "ink";
 
 // src/ui/copy/welcome.ts
 var sidebarItems = [
@@ -1152,8 +1178,8 @@ function Welcome() {
     { label: "start wizard", run: confirmStart },
     { label: "learn more", run: openLearnMore }
   ];
-  const [index, setIndex] = useState6(0);
-  useInput4((input, key) => {
+  const [index, setIndex] = useState7(0);
+  useInput3((input, key) => {
     if (key.upArrow || input === "k") {
       setIndex((i) => (i - 1 + actions.length) % actions.length);
     } else if (key.downArrow || input === "j") {
@@ -1239,8 +1265,8 @@ function Welcome() {
 }
 
 // src/ui/LearnMore.tsx
-import { Fragment as Fragment2 } from "react";
-import { Box as Box11, Text as Text11, useInput as useInput5, useWindowSize as useWindowSize6 } from "ink";
+import { Fragment } from "react";
+import { Box as Box11, Text as Text11, useInput as useInput4, useWindowSize as useWindowSize6 } from "ink";
 
 // src/ui/copy/learn-more.ts
 var accessIntro = "Everything runs locally on your machine. Nothing is written or sent without an explicit yes from you.";
@@ -1312,7 +1338,7 @@ function LearnMore() {
   const backToHome = useWizard((s) => s.backToHome);
   const { columns } = useWindowSize6();
   const dividerWidth = Math.max(0, columns - PADDING_X * 2);
-  useInput5((_input, key) => {
+  useInput4((_input, key) => {
     if (key.escape) backToHome();
     else if (key.return) confirmStart();
   });
@@ -1347,7 +1373,7 @@ function LearnMore() {
               segments: [{ text: "I NEVER", color: COLORS.danger, bold: true }]
             }
           ),
-          neverItems.map((item) => /* @__PURE__ */ jsxs10(Fragment2, { children: [
+          neverItems.map((item) => /* @__PURE__ */ jsxs10(Fragment, { children: [
             /* @__PURE__ */ jsx9(NeverLine, { width: dividerWidth }),
             /* @__PURE__ */ jsx9(
               NeverLine,
@@ -1520,10 +1546,10 @@ function Ribbon() {
 }
 
 // src/ui/App.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/ui/Logs.tsx
-import { Box as Box16, Text as Text16, useInput as useInput6 } from "ink";
+import { Box as Box16, Text as Text16, useInput as useInput5 } from "ink";
 import { jsx as jsx14, jsxs as jsxs15 } from "react/jsx-runtime";
 var KIND_COLOR = {
   tool: COLORS.primary,
@@ -1555,7 +1581,7 @@ function formatTimestamp(ms) {
 function Logs() {
   const logs = useWizard((s) => s.logs);
   const scroll = useScrollWindow({ itemCount: logs.length, followBottom: true });
-  useInput6((_input, key) => {
+  useInput5((_input, key) => {
     if (key.upArrow) scroll.scrollBy(-1);
     else if (key.downArrow) scroll.scrollBy(1);
   });
@@ -1771,7 +1797,7 @@ function track(event, payload) {
 }
 
 // src/ui/Tips.tsx
-import { useEffect as useEffect3, useState as useState7 } from "react";
+import { useEffect as useEffect3, useState as useState8 } from "react";
 import { Box as Box18, Text as Text18 } from "ink";
 import terminalLink from "terminal-link";
 
@@ -1998,8 +2024,8 @@ function TipContent({
   ) });
 }
 function Tips() {
-  const [tipIndex, setTipIndex] = useState7(0);
-  const [revealed, setRevealed] = useState7(0);
+  const [tipIndex, setTipIndex] = useState8(0);
+  const [revealed, setRevealed] = useState8(0);
   const tip = tips[tipIndex];
   const contentLength = tip.chunks.reduce((sum, c) => sum + c.value.length, 0);
   const totalLength = tip.title.length + contentLength;
@@ -2059,7 +2085,7 @@ function App() {
   } = useWizard();
   const { exit } = useApp();
   const { columns, rows } = useWindowSize7();
-  const [showLogs, setShowLogs] = useState8(false);
+  const [showLogs, setShowLogs] = useState9(false);
   const finished = phase === "done" || phase === "error";
   const currentStep = steps[currentStepIndex];
   const isInitialAnalysisStep = currentStepIndex === 0;
@@ -2067,7 +2093,7 @@ function App() {
   const showTips = phase === "running" && isInitialAnalysisStep && notices.length > 0;
   const showNoticesInMain = !isInitialAnalysisStep;
   const showNotices = !isAwaitingUserInput;
-  useInput7(
+  useInput6(
     (_input, key) => {
       if (key.return) {
         exit();
@@ -2075,7 +2101,7 @@ function App() {
     },
     { isActive: finished }
   );
-  useInput7((_input, key) => {
+  useInput6((_input, key) => {
     if (phase === "idle" || phase === "authenticating") return;
     if (key.tab) {
       setShowLogs(!showLogs);
@@ -2087,7 +2113,7 @@ function App() {
     }
   });
   const escOwnedElsewhere = phase === "idle" || phase === "authenticating" || phase === "awaitingInput" && (inputReq?.promptType === "enterToContinue" || inputReq?.promptType === "commandApproval");
-  useInput7((_input, key) => {
+  useInput6((_input, key) => {
     if (escOwnedElsewhere) return;
     if (key.escape) {
       track("AI Wizard Interaction", {
@@ -4038,7 +4064,7 @@ async function runAnalysis(mode, extraInstructions = []) {
 // package.json
 var package_default = {
   name: "@algolia/wizard",
-  version: "0.30.0",
+  version: "0.32.0",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {
@@ -4759,8 +4785,9 @@ function searchInstructions(input) {
     ] : [
       "No bundled Algolia SDK reference exists for this stack, so rely on the project's own conventions and Algolia's official client for its language. Do not invent APIs \u2014 keep to the documented search endpoint and its parameters."
     ],
-    `Add the search UI at ${input.searchLocation ? `"${input.searchLocation}"` : "the best shared, always-rendered layout location (e.g. a header/nav component)"} so it is reachable across the app \u2014 at least a working search input and results list against the target index.`,
-    "If a search box already exists, replace it with yours.",
+    `Create the search experience as its own component in a new file, following the project's existing component conventions (location, naming, styling approach). Do not write it inline into an existing file.`,
+    `Import and render that new component from ${input.searchLocation ? `"${input.searchLocation}"` : "the best shared, always-rendered layout location (e.g. a header/nav component)"} so it is reachable across the app \u2014 at least a working search input and results list against the target index.`,
+    "If a search box already exists, replace its usage with an import and render of your new component; remove the old implementation.",
     `Read the index name from the ${publicIndexNameVar(input.publicEnvVarPrefix)} env var, which the wizard sets to "${input.targetIndex}". Never hardcode an index name or derive one from the project, file, or component name.`,
     "Read the App ID, the search-only API key, and the index name from env vars; never hardcode them. A search-only key is safe to expose client-side.",
     // The key is provisioned only after verification passes, and the wizard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/wizard",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "description": "Magically implement Algolia functionality in your codebase",
   "type": "module",
   "engines": {