Respect withGuide: false in autocomplete and multiselect prompts

.changeset/tangy-meals-allow.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": patch
+---
+
+Respect `withGuide: false` in autocomplete and multiselect prompts.

packages/prompts/src/autocomplete.ts

@@ -285,8 +285,11 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 		input: opts.input,
 		output: opts.output,
 		render() {
+			const hasGuide = opts.withGuide ?? settings.withGuide;
 			// Title and symbol
-			const title = `${styleText('gray', S_BAR)}\n${symbol(this.state)}  ${opts.message}\n`;
+			const title = `${hasGuide ? `${styleText('gray', S_BAR)}\n` : ''}${symbol(this.state)}  ${
+				opts.message
+			}\n`;
 
 			// Selection counter
 			const userInput = this.userInput;
@@ -312,13 +315,21 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 			// Render prompt state
 			switch (this.state) {
 				case 'submit': {
-					return `${title}${styleText('gray', S_BAR)}  ${styleText('dim', `${this.selectedValues.length} items selected`)}`;
+					return `${title}${hasGuide ? `${styleText('gray', S_BAR)}  ` : ''}${styleText(
+						'dim',
+						`${this.selectedValues.length} items selected`
+					)}`;
 				}
 				case 'cancel': {
-					return `${title}${styleText('gray', S_BAR)}  ${styleText(['strikethrough', 'dim'], userInput)}`;
+					return `${title}${hasGuide ? `${styleText('gray', S_BAR)}  ` : ''}${styleText(
+						['strikethrough', 'dim'],
+						userInput
+					)}`;
 				}
 				default: {
 					const barStyle = this.state === 'error' ? 'yellow' : 'cyan';
+					const guidePrefix = hasGuide ? `${styleText(barStyle, S_BAR)}  ` : '';
+					const guidePrefixEnd = hasGuide ? styleText(barStyle, S_BAR_END) : '';
 					// Instructions
 					const instructions = [
 						`${styleText('dim', '↑/↓')} to navigate`,
@@ -330,25 +341,20 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 					// No results message
 					const noResults =
 						this.filteredOptions.length === 0 && userInput
-							? [`${styleText(barStyle, S_BAR)}  ${styleText('yellow', 'No matches found')}`]
+							? [`${guidePrefix}${styleText('yellow', 'No matches found')}`]
 							: [];
 
 					const errorMessage =
-						this.state === 'error'
-							? [`${styleText(barStyle, S_BAR)}  ${styleText('yellow', this.error)}`]
-							: [];
+						this.state === 'error' ? [`${guidePrefix}${styleText('yellow', this.error)}`] : [];
 
 					// Calculate header and footer line counts for rowPadding
 					const headerLines = [
-						...`${title}${styleText(barStyle, S_BAR)}`.split('\n'),
-						`${styleText(barStyle, S_BAR)}  ${styleText('dim', 'Search:')} ${searchText}${matches}`,
+						...`${title}${hasGuide ? styleText(barStyle, S_BAR) : ''}`.split('\n'),
+						`${guidePrefix}${styleText('dim', 'Search:')} ${searchText}${matches}`,
 						...noResults,
 						...errorMessage,
 					];
-					const footerLines = [
-						`${styleText(barStyle, S_BAR)}  ${instructions.join(' • ')}`,
-						styleText(barStyle, S_BAR_END),
-					];
+					const footerLines = [`${guidePrefix}${instructions.join(' • ')}`, guidePrefixEnd];
 
 					// Get limited options for display
 					const displayOptions = limitOptions({
@@ -364,7 +370,7 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 					// Build the prompt display
 					return [
 						...headerLines,
-						...displayOptions.map((option) => `${styleText(barStyle, S_BAR)}  ${option}`),
+						...displayOptions.map((option) => `${guidePrefix}${option}`),
 						...footerLines,
 					].join('\n');
 				}

packages/prompts/src/group-multi-select.ts

@@ -1,5 +1,5 @@
 import { styleText } from 'node:util';
-import { GroupMultiSelectPrompt } from '@clack/core';
+import { GroupMultiSelectPrompt, settings } from '@clack/core';
 import {
 	type CommonOptions,
 	S_BAR,
@@ -104,7 +104,8 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 				)}`;
 		},
 		render() {
-			const title = `${styleText('gray', S_BAR)}\n${symbol(this.state)}  ${opts.message}\n`;
+			const hasGuide = opts.withGuide ?? settings.withGuide;
+			const title = `${hasGuide ? `${styleText('gray', S_BAR)}\n` : ''}${symbol(this.state)}  ${opts.message}\n`;
 			const value = this.value ?? [];
 
 			switch (this.state) {
@@ -114,25 +115,27 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 						.map((option) => opt(option, 'submitted'));
 					const optionsText =
 						selectedOptions.length === 0 ? '' : `  ${selectedOptions.join(styleText('dim', ', '))}`;
-					return `${title}${styleText('gray', S_BAR)}${optionsText}`;
+					return `${title}${hasGuide ? styleText('gray', S_BAR) : ''}${optionsText}`;
 				}
 				case 'cancel': {
 					const label = this.options
 						.filter(({ value: optionValue }) => value.includes(optionValue))
 						.map((option) => opt(option, 'cancelled'))
 						.join(styleText('dim', ', '));
-					return `${title}${styleText('gray', S_BAR)}  ${
-						label.trim() ? `${label}\n${styleText('gray', S_BAR)}` : ''
+					return `${title}${hasGuide ? `${styleText('gray', S_BAR)}  ` : ''}${
+						label.trim() ? `${label}${hasGuide ? `\n${styleText('gray', S_BAR)}` : ''}` : ''
 					}`;
 				}
 				case 'error': {
 					const footer = this.error
 						.split('\n')
 						.map((ln, i) =>
-							i === 0 ? `${styleText('yellow', S_BAR_END)}  ${styleText('yellow', ln)}` : `   ${ln}`
+							i === 0
+								? `${hasGuide ? `${styleText('yellow', S_BAR_END)}  ` : ''}${styleText('yellow', ln)}`
+								: `   ${ln}`
 						)
 						.join('\n');
-					return `${title}${styleText('yellow', S_BAR)}  ${this.options
+					return `${title}${hasGuide ? `${styleText('yellow', S_BAR)}  ` : ''}${this.options
 						.map((option, i, options) => {
 							const selected =
 								value.includes(option.value) ||
@@ -153,7 +156,7 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 							}
 							return opt(option, active ? 'active' : 'inactive', options);
 						})
-						.join(`\n${styleText('yellow', S_BAR)}  `)}\n${footer}\n`;
+						.join(`\n${hasGuide ? `${styleText('yellow', S_BAR)}  ` : ''}`)}\n${footer}\n`;
 				}
 				default: {
 					const optionsText = this.options
@@ -183,9 +186,11 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 							const prefix = i !== 0 && !optionText.startsWith('\n') ? '  ' : '';
 							return `${prefix}${optionText}`;
 						})
-						.join(`\n${styleText('cyan', S_BAR)}`);
+						.join(`\n${hasGuide ? styleText('cyan', S_BAR) : ''}`);
 					const optionsPrefix = optionsText.startsWith('\n') ? '' : '  ';
-					return `${title}${styleText('cyan', S_BAR)}${optionsPrefix}${optionsText}\n${styleText('cyan', S_BAR_END)}\n`;
+					return `${title}${hasGuide ? styleText('cyan', S_BAR) : ''}${optionsPrefix}${optionsText}\n${
+						hasGuide ? styleText('cyan', S_BAR_END) : ''
+					}\n`;
 				}
 			}
 		},

packages/prompts/src/multi-select.ts

@@ -1,5 +1,5 @@
 import { styleText } from 'node:util';
-import { MultiSelectPrompt, wrapTextWithPrefix } from '@clack/core';
+import { MultiSelectPrompt, settings, wrapTextWithPrefix } from '@clack/core';
 import {
 	type CommonOptions,
 	S_BAR,
@@ -93,13 +93,14 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
 				)}`;
 		},
 		render() {
+			const hasGuide = opts.withGuide ?? settings.withGuide;
 			const wrappedMessage = wrapTextWithPrefix(
 				opts.output,
 				opts.message,
-				`${symbolBar(this.state)}  `,
+				hasGuide ? `${symbolBar(this.state)}  ` : '',
 				`${symbol(this.state)}  `
 			);
-			const title = `${styleText('gray', S_BAR)}\n${wrappedMessage}\n`;
+			const title = `${hasGuide ? `${styleText('gray', S_BAR)}\n` : ''}${wrappedMessage}\n`;
 			const value = this.value ?? [];
 
 			const styleOption = (option: Option<Value>, active: boolean) => {
@@ -126,7 +127,7 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
 					const wrappedSubmitText = wrapTextWithPrefix(
 						opts.output,
 						submitText,
-						`${styleText('gray', S_BAR)}  `
+						hasGuide ? `${styleText('gray', S_BAR)}  ` : ''
 					);
 					return `${title}${wrappedSubmitText}`;
 				}
@@ -141,16 +142,18 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
 					const wrappedLabel = wrapTextWithPrefix(
 						opts.output,
 						label,
-						`${styleText('gray', S_BAR)}  `
+						hasGuide ? `${styleText('gray', S_BAR)}  ` : ''
 					);
-					return `${title}${wrappedLabel}\n${styleText('gray', S_BAR)}`;
+					return `${title}${wrappedLabel}${hasGuide ? `\n${styleText('gray', S_BAR)}` : ''}`;
 				}
 				case 'error': {
-					const prefix = `${styleText('yellow', S_BAR)}  `;
+					const prefix = hasGuide ? `${styleText('yellow', S_BAR)}  ` : '';
 					const footer = this.error
 						.split('\n')
 						.map((ln, i) =>
-							i === 0 ? `${styleText('yellow', S_BAR_END)}  ${styleText('yellow', ln)}` : `   ${ln}`
+							i === 0
+								? `${hasGuide ? `${styleText('yellow', S_BAR_END)}  ` : ''}${styleText('yellow', ln)}`
+								: `   ${ln}`
 						)
 						.join('\n');
 					// Calculate rowPadding: title lines + footer lines (error message + trailing newline)
@@ -167,10 +170,10 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
 					}).join(`\n${prefix}`)}\n${footer}\n`;
 				}
 				default: {
-					const prefix = `${styleText('cyan', S_BAR)}  `;
+					const prefix = hasGuide ? `${styleText('cyan', S_BAR)}  ` : '';
 					// Calculate rowPadding: title lines + footer lines (S_BAR_END + trailing newline)
 					const titleLineCount = title.split('\n').length;
-					const footerLineCount = 2; // S_BAR_END + trailing newline
+					const footerLineCount = hasGuide ? 2 : 1; // S_BAR_END + trailing newline
 					return `${title}${prefix}${limitOptions({
 						output: opts.output,
 						options: this.options,
@@ -179,7 +182,7 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
 						columnPadding: prefix.length,
 						rowPadding: titleLineCount + footerLineCount,
 						style: styleOption,
-					}).join(`\n${prefix}`)}\n${styleText('cyan', S_BAR_END)}\n`;
+					}).join(`\n${prefix}`)}\n${hasGuide ? styleText('cyan', S_BAR_END) : ''}\n`;
 				}
 			}
 		},

packages/prompts/test/__snapshots__/autocomplete.test.ts.snap

@@ -1,5 +1,83 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`autocomplete > autocompleteMultiselect respects global withGuide: false 1`] = `
+[
+  "<cursor.hide>",
+  "◆  Select fruits
+
+Search: _
+◻ Apple
+◻ Banana
+◻ Cherry
+◻ Grape
+◻ Orange
+↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search
+",
+  "<cursor.backward count=999><cursor.up count=9>",
+  "<cursor.down count=2>",
+  "<erase.down>",
+  "Search: 
+◻ Apple
+◻ Banana
+◻ Cherry
+◻ Grape
+◻ Orange
+↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search
+",
+  "<cursor.backward count=999><cursor.up count=9>",
+  "<cursor.down count=4>",
+  "<erase.line><cursor.left count=1>",
+  "◼ Banana",
+  "<cursor.down count=5>",
+  "<cursor.backward count=999><cursor.up count=9>",
+  "<erase.down>",
+  "◇  Select fruits
+1 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`autocomplete > autocompleteMultiselect respects withGuide: false 1`] = `
+[
+  "<cursor.hide>",
+  "◆  Select fruits
+
+Search: _
+◻ Apple
+◻ Banana
+◻ Cherry
+◻ Grape
+◻ Orange
+↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search
+",
+  "<cursor.backward count=999><cursor.up count=9>",
+  "<cursor.down count=2>",
+  "<erase.down>",
+  "Search: 
+◻ Apple
+◻ Banana
+◻ Cherry
+◻ Grape
+◻ Orange
+↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search
+",
+  "<cursor.backward count=999><cursor.up count=9>",
+  "<cursor.down count=4>",
+  "<erase.line><cursor.left count=1>",
+  "◼ Banana",
+  "<cursor.down count=5>",
+  "<cursor.backward count=999><cursor.up count=9>",
+  "<erase.down>",
+  "◇  Select fruits
+1 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`autocomplete > can be aborted by a signal 1`] = `
 [
   "<cursor.hide>",