@algolia/wizard 0.4.0 → 0.5.0-rc.45.14

package/dist/main.js

@@ -4,7 +4,7 @@
 import { render } from "ink";
 
 // src/ui/App.tsx
-import { Box as Box13, Text as Text13, useApp, useInput as useInput6, useWindowSize as useWindowSize6 } from "ink";
+import { Box as Box13, Text as Text13, useApp, useInput as useInput6, useWindowSize as useWindowSize7 } from "ink";
 
 // src/core/store.ts
 import { create } from "zustand";
@@ -525,10 +525,20 @@ function NextAction({
 }
 
 // src/ui/SelectPrompt.tsx
-import { Box as Box4, Text as Text4, useInput } from "ink";
-import { useState as useState3 } from "react";
+import { Box as Box4, Text as Text4, measureElement as measureElement2, useInput, useWindowSize as useWindowSize3 } from "ink";
+import { useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var CANCEL = "cancel";
+var ARROW_WIDTH = 4;
+var COLUMN_GAP = 2;
+var BAR_PADDING = 2;
+function fittedWidth(node, columns) {
+  let left = 0;
+  for (let n = node; n; n = n.parentNode) {
+    left += n.yogaNode?.getComputedLeft() ?? 0;
+  }
+  return Math.max(Math.min(measureElement2(node).width, columns - left), 0);
+}
 function SelectPrompt({
   options,
   onSelect,
@@ -553,12 +563,29 @@ function SelectPrompt({
   if (rows.length > 1) hints.push({ key: "[\u2191] [\u2193]", label: "move" });
   if (multi) hints.push({ key: "[space]", label: "select" });
   hints.push({ key: "[enter]", label: "confirm" });
-  const labelColWidth = 6 + Math.max(0, ...rows.map((opt) => opt.length));
-  const secondaryWidth = Math.max(
+  const containerRef = useRef2(null);
+  const { columns } = useWindowSize3();
+  const [width, setWidth] = useState3(columns);
+  useLayoutEffect(() => {
+    if (containerRef.current) {
+      setWidth(fittedWidth(containerRef.current, columns));
+    }
+  }, [columns]);
+  const inner = Math.max(width - BAR_PADDING, 0);
+  const labelWidth = Math.min(
+    ARROW_WIDTH + (multi ? 2 : 0) + Math.max(0, ...rows.map((opt) => opt.length)) + COLUMN_GAP,
+    inner
+  );
+  const badgeWidth = Math.max(
     0,
-    ...rows.map((_, i) => secondary?.[i]?.value.length ?? 0)
+    ...rows.map((_, i) => {
+      const s = secondary?.[i];
+      return s?.kind === "badge" ? s.value.length : 0;
+    })
   );
-  const rowWidth = labelColWidth + (secondaryWidth ? secondaryWidth + 2 : 0) + 6;
+  const barWidth = Math.min(labelWidth + badgeWidth + BAR_PADDING, width);
+  const barLabelWidth = Math.max(barWidth - BAR_PADDING - badgeWidth, 0);
+  const textWidth = inner - labelWidth;
   useInput((input, key) => {
     if (rows.length === 0) return;
     if (key.upArrow || input === "k") {
@@ -582,7 +609,7 @@ function SelectPrompt({
       }
     }
   });
-  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", gap: 1, children: [
+  return /* @__PURE__ */ jsx4(Box4, { ref: containerRef, flexGrow: 1, children: /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", gap: 1, width, children: [
     error && /* @__PURE__ */ jsx4(Text4, { color: COLORS.danger, children: error }),
     messages?.map((m, i) => /* @__PURE__ */ jsx4(Text4, { color: COLORS.muted, children: m }, `msg-${i}`)),
     table && /* @__PURE__ */ jsx4(Table, { columns: table.columns, rows: table.rows }),
@@ -596,29 +623,36 @@ function SelectPrompt({
       const bullet = multi && !isCancel ? checked.has(i) ? "\u25CF " : "\u25CB " : "";
       const sec = isCancel ? void 0 : secondary?.[i];
       const labelColor = highlighted ? COLORS.highlight.fg : void 0;
-      const label = /* @__PURE__ */ jsxs3(Text4, { color: labelColor, children: [
+      const label = /* @__PURE__ */ jsxs3(Text4, { color: labelColor, wrap: "truncate", children: [
         highlighted ? "\u276F   " : "    ",
         bullet,
         option
       ] });
+      const isText = sec?.kind === "text";
       return /* @__PURE__ */ jsxs3(
         Box4,
         {
-          width: rowWidth,
+          width: isText ? "100%" : barWidth,
           paddingX: 1,
           paddingY: 1,
           backgroundColor: highlighted ? COLORS.highlight.bg : void 0,
           children: [
-            sec?.kind === "text" ? /* @__PURE__ */ jsx4(Box4, { width: labelColWidth, flexShrink: 0, children: label }) : label,
-            sec?.kind === "text" && /* @__PURE__ */ jsx4(Text4, { color: highlighted ? COLORS.primary : COLORS.muted, children: sec.value }),
-            /* @__PURE__ */ jsx4(Box4, { flexGrow: 1 }),
-            sec?.kind === "badge" && /* @__PURE__ */ jsx4(Text4, { color: COLORS.badge, children: sec.value })
+            /* @__PURE__ */ jsx4(Box4, { width: isText ? labelWidth : barLabelWidth, children: label }),
+            isText && textWidth > 0 && /* @__PURE__ */ jsx4(Box4, { width: textWidth, children: /* @__PURE__ */ jsx4(
+              Text4,
+              {
+                wrap: "truncate",
+                color: highlighted ? COLORS.primary : COLORS.muted,
+                children: sec.value
+              }
+            ) }),
+            sec?.kind === "badge" && /* @__PURE__ */ jsx4(Box4, { width: badgeWidth, justifyContent: "flex-end", children: /* @__PURE__ */ jsx4(Text4, { color: COLORS.badge, wrap: "truncate", children: sec.value }) })
           ]
         },
         `row-${i}`
       );
     }) }),
-    /* @__PURE__ */ jsx4(Box4, { children: hints.map(({ key, label }, i) => /* @__PURE__ */ jsxs3(Text4, { children: [
+    /* @__PURE__ */ jsx4(Text4, { children: hints.map(({ key, label }, i) => /* @__PURE__ */ jsxs3(Text4, { children: [
       i > 0 ? "   " : "",
       /* @__PURE__ */ jsx4(Text4, { color: COLORS.primary, children: key }),
       /* @__PURE__ */ jsxs3(Text4, { color: COLORS.dim, children: [
@@ -626,7 +660,7 @@ function SelectPrompt({
         label
       ] })
     ] }, label)) })
-  ] });
+  ] }) });
 }
 
 // src/ui/PromptInput.tsx
@@ -749,7 +783,7 @@ function PromptInput() {
 // src/ui/Welcome.tsx
 import { dirname as dirname2, join as join3 } from "node:path";
 import { fileURLToPath } from "node:url";
-import { Box as Box6, Spacer, Text as Text6, useInput as useInput3, useWindowSize as useWindowSize3 } from "ink";
+import { Box as Box6, Spacer, Text as Text6, useInput as useInput3, useWindowSize as useWindowSize4 } from "ink";
 
 // src/ui/copy/welcome.ts
 var sidebarItems = [
@@ -797,7 +831,7 @@ function SidebarItem({
 function Welcome() {
   const confirmStart = useWizard((s) => s.confirmStart);
   const openLearnMore = useWizard((s) => s.openLearnMore);
-  const { rows } = useWindowSize3();
+  const { rows } = useWindowSize4();
   useInput3((input) => {
     if (input === " ") confirmStart();
     else if (input === "i") openLearnMore();
@@ -865,7 +899,7 @@ function Welcome() {
 
 // src/ui/LearnMore.tsx
 import { Fragment as Fragment2 } from "react";
-import { Box as Box7, Text as Text7, useInput as useInput4, useWindowSize as useWindowSize4 } from "ink";
+import { Box as Box7, Text as Text7, useInput as useInput4, useWindowSize as useWindowSize5 } 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.";
@@ -929,7 +963,7 @@ function NeverLine({
 function LearnMore() {
   const confirmStart = useWizard((s) => s.confirmStart);
   const backToHome = useWizard((s) => s.backToHome);
-  const { columns } = useWindowSize4();
+  const { columns } = useWindowSize5();
   const dividerWidth = Math.max(0, columns - PADDING_X * 2);
   useInput4((input, key) => {
     if (key.escape) backToHome();
@@ -1142,8 +1176,8 @@ function Ribbon() {
 import { useState as useState6 } from "react";
 
 // src/ui/Logs.tsx
-import { useLayoutEffect, useRef as useRef2, useState as useState5 } from "react";
-import { Box as Box12, Text as Text12, measureElement as measureElement2, useInput as useInput5, useWindowSize as useWindowSize5 } from "ink";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState5 } from "react";
+import { Box as Box12, Text as Text12, measureElement as measureElement3, useInput as useInput5, useWindowSize as useWindowSize6 } from "ink";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var KIND_COLOR = {
   tool: COLORS.primary,
@@ -1174,15 +1208,15 @@ function formatTimestamp(ms) {
 }
 function Logs() {
   const logs = useWizard((s) => s.logs);
-  const { rows, columns } = useWindowSize5();
-  const viewportRef = useRef2(null);
+  const { rows, columns } = useWindowSize6();
+  const viewportRef = useRef3(null);
   const [viewportHeight, setViewportHeight] = useState5(0);
   const [viewportWidth, setViewportWidth] = useState5(0);
   const [scrollOffset, setScrollOffset] = useState5(0);
-  const prevMaxOffsetRef = useRef2(0);
-  useLayoutEffect(() => {
+  const prevMaxOffsetRef = useRef3(0);
+  useLayoutEffect2(() => {
     if (!viewportRef.current) return;
-    const { width, height } = measureElement2(viewportRef.current);
+    const { width, height } = measureElement3(viewportRef.current);
     setViewportHeight(height);
     setViewportWidth(width);
   }, [rows, columns, logs.length === 0]);
@@ -1197,7 +1231,7 @@ function Logs() {
   }
   const capacityAtBottom = logs.length > viewportHeight ? Math.max(viewportHeight - 1, 0) : viewportHeight;
   const maxOffset = Math.max(logs.length - capacityAtBottom, 0);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const wasAtBottom = scrollOffset >= prevMaxOffsetRef.current;
     prevMaxOffsetRef.current = maxOffset;
     setScrollOffset((o) => wasAtBottom ? maxOffset : Math.min(o, maxOffset));
@@ -1270,7 +1304,7 @@ import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function App() {
   const { phase, error, homeScreen, currentStepIndex, steps, inputReq } = useWizard();
   const { exit } = useApp();
-  const { columns, rows } = useWindowSize6();
+  const { columns, rows } = useWindowSize7();
   const [showLogs, setShowLogs] = useState6(false);
   const finished = phase === "done" || phase === "error";
   const currentStep = steps[currentStepIndex];
@@ -1324,6 +1358,25 @@ function App() {
             width: "100%",
             justifyContent: "space-between",
             children: [
+              /* @__PURE__ */ jsxs12(
+                Box13,
+                {
+                  flexDirection: "column",
+                  paddingX: 4,
+                  paddingY: 2,
+                  width: showSidebar ? 70 : "100%",
+                  flexGrow: showSidebar ? 1 : 0,
+                  children: [
+                    /* @__PURE__ */ jsx13(Notices, {}),
+                    /* @__PURE__ */ jsx13(PromptInput, {}),
+                    phase === "running" && showSidebar && /* @__PURE__ */ jsx13(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx13(CurrentStep, {}) }),
+                    phase === "error" && error && /* @__PURE__ */ jsx13(Box13, { marginTop: 1, children: /* @__PURE__ */ jsxs12(Text13, { color: COLORS.status.error, children: [
+                      "\u2716 ",
+                      error
+                    ] }) })
+                  ]
+                }
+              ),
               showLogs ? /* @__PURE__ */ jsx13(Logs, {}) : /* @__PURE__ */ jsxs12(Box13, { flexDirection: "column", paddingX: 4, paddingY: 2, width: 70, children: [
                 /* @__PURE__ */ jsx13(Notices, {}),
                 /* @__PURE__ */ jsx13(PromptInput, {}),
@@ -2648,7 +2701,7 @@ async function runAnalysis(mode, extraInstructions = []) {
 // package.json
 var package_default = {
   name: "@algolia/wizard",
-  version: "0.4.0",
+  version: "0.5.0-rc.45.14",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/wizard",
-  "version": "0.4.0",
+  "version": "0.5.0-rc.45.14",
   "description": "Magically implement Algolia functionality in your codebase",
   "type": "module",
   "engines": {