@posthog/wizard 2.79.0 → 2.79.1

package/dist/PickerMenu-dG5DQCZA.js

@@ -0,0 +1,758 @@
+import { $ as wordWrap, it as Icons, rt as Colors } from "./mint-failure-u8xQKNOn.js";
+import { Box, Text, useInput, useStdout } from "ink";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Fuse from "fuse.js";
+//#region src/ui/tui/primitives/picker-filter.ts
+/**
+* Filter-as-you-type matching for PickerMenu. Split out from the component so the
+* ranking is testable on its own — the component only decides when to call it.
+*/
+/**
+* Fuzzy fallback config. `ignoreLocation` because a term matching at the end of a
+* description is as good as one at the start, and Fuse's default distance window
+* would score the late match away. 0.5 is the loosest threshold that still bottoms
+* out: below it `gthb` misses `GitHub` entirely, which is the whole point of having
+* a fuzzy pass; above it the tail grows without surfacing anything new at the top.
+*/
+const FUSE_OPTIONS = {
+	keys: [
+		{
+			name: "label",
+			weight: 3
+		},
+		{
+			name: "hint",
+			weight: 1
+		},
+		{
+			name: "description",
+			weight: 1
+		}
+	],
+	ignoreLocation: true,
+	threshold: .5,
+	includeScore: true
+};
+function buildPickerIndex(options) {
+	return new Fuse(options, FUSE_OPTIONS);
+}
+function haystack(option) {
+	return `${option.label} ${option.hint ?? ""} ${option.description ?? ""}`.toLowerCase();
+}
+/**
+* Rank options against a query, best first, or `null` for an empty query.
+*
+* Two passes, literal before fuzzy. Anything that literally contains every
+* whitespace-separated term wins outright, in the list's own order — that covers how
+* people actually type (`git iss` → `GitHub issues`) and keeps the common case as
+* tight as a plain substring filter, which fuzzy matching on its own is not: Fuse at
+* a threshold loose enough to forgive `gthb` also lets a third of the list through
+* on `replay`.
+*
+* Only when nothing matches literally does Fuse get a turn, so a typo degrades to a
+* ranked guess instead of an empty list. Terms are AND-ed there too, each matched
+* fuzzily on its own — Fuse's bitap pass over the whole query would otherwise need
+* `git iss` to be a near-edit of the text it's matching. Scores are distances (0 is
+* exact) and sum across terms, hence the ascending sort; ties keep the order the
+* first term put them in, since the sort is stable.
+*/
+function rankOptions(fuse, options, query) {
+	const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+	if (!terms.length) return null;
+	const literal = options.filter((option) => terms.every((term) => haystack(option).includes(term)));
+	if (literal.length) return literal;
+	let surviving = null;
+	for (const term of terms) {
+		const hits = new Map(fuse.search(term).map(({ item, score }) => [item, score ?? 0]));
+		if (surviving === null) {
+			surviving = hits;
+			continue;
+		}
+		for (const [option, total] of surviving) {
+			const score = hits.get(option);
+			if (score === void 0) surviving.delete(option);
+			else surviving.set(option, total + score);
+		}
+	}
+	return [...surviving ?? []].sort(([, a], [, b]) => a - b).map(([option]) => option);
+}
+//#endregion
+//#region src/ui/tui/primitives/PromptLabel.tsx
+/**
+* PromptLabel — Compact inline label for input prompts.
+*
+* Renders: [!] message
+* where [!] is black text on accent background.
+*/
+const PromptLabel = ({ message }) => {
+	if (!message) return null;
+	return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, {
+		bold: true,
+		color: Colors.accent,
+		children: [" ", message]
+	}) });
+};
+//#endregion
+//#region src/ui/tui/primitives/ConfirmButton.tsx
+/**
+* ConfirmButton — the confirm row used to submit a selection.
+*
+* Pure render. Multi-select menus (PickerMenu mode="multi", GroupedPickerMenu)
+* append this below their options as the final focusable row: the user toggles
+* options with enter, then arrows down onto this row and presses enter to
+* submit. This replaces the older "enter anywhere submits" pattern, which
+* confused people who expected enter to toggle the focused item.
+*
+* Renders flat, mirroring the option rows — a focus triangle and the label,
+* accent and bold when focused, dimmed otherwise — so it lines up under the
+* options instead of sitting in a separate boxed target.
+*/
+const ConfirmButton = ({ label = "Confirm", focused, count }) => {
+	const text = count && count > 0 ? `${label} (${count})` : label;
+	return /* @__PURE__ */ jsxs(Text, {
+		color: focused ? Colors.accent : void 0,
+		bold: focused,
+		dimColor: !focused,
+		children: [
+			focused ? Icons.triangleSmallRight : " ",
+			" ",
+			text
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/hooks/useStdoutDimensions.ts
+/**
+* useStdoutDimensions — Returns [columns, rows] and re-renders on terminal resize.
+*
+* Ink's useStdout() does not subscribe to resize events, so layout only updates
+* when something else causes a re-render. This hook listens to the stream's
+* 'resize' event (Node TTY) and updates state so the component re-renders
+* with the new dimensions.
+*/
+function useStdoutDimensions() {
+	const { stdout } = useStdout();
+	const [size, setSize] = useState(() => [stdout.columns || 80, stdout.rows || 24]);
+	useEffect(() => {
+		setSize([stdout.columns || 80, stdout.rows || 24]);
+		const stream = stdout;
+		if (typeof stream.on !== "function") return;
+		const onResize = () => {
+			const c = stdout.columns || 80;
+			const r = stdout.rows || 24;
+			if (c > 0 && r > 0) setSize([c, r]);
+		};
+		stream.on("resize", onResize);
+		return () => {
+			stream.off?.("resize", onResize);
+		};
+	}, [stdout]);
+	return size;
+}
+//#endregion
+//#region src/ui/tui/hooks/keyboard-hints-utils.ts
+/** Default priorities by key type. */
+const DEFAULT_PRIORITY = {
+	["upArrow"]: 0,
+	["downArrow"]: 0,
+	["leftArrow"]: 1,
+	["rightArrow"]: 1,
+	["space"]: 10,
+	["printable"]: 12,
+	["backspace"]: 13,
+	["escape"]: 20,
+	["return"]: 21
+};
+/** Get the default display priority for a key match. */
+function getDefaultPriority(match) {
+	return DEFAULT_PRIORITY[Array.isArray(match) ? match[0] : match] ?? 15;
+}
+/** Check if a KeyMatchOrChar matches the given input string and key flags. */
+function matchesKey(m, input, key) {
+	switch (m) {
+		case "upArrow": return !!key.upArrow;
+		case "downArrow": return !!key.downArrow;
+		case "leftArrow": return !!key.leftArrow;
+		case "rightArrow": return !!key.rightArrow;
+		case "return": return !!key.return;
+		case "escape": return !!key.escape;
+		case "space": return input === " ";
+		case "backspace": return !!key.backspace || !!key.delete;
+		case "printable": return input.length === 1 && input >= " " && input !== "" && Object.entries(key).every(([flag, on]) => !on || flag === "shift");
+		default: return input === m;
+	}
+}
+/** Serialize hints for comparison. */
+function hintsKey(hints) {
+	return hints.map((h) => `${h.label}:${h.action}`).join("|");
+}
+/** Deduplicate hints by label+action and sort by priority. */
+function deduplicateAndSort(hints) {
+	const seen = /* @__PURE__ */ new Set();
+	const deduped = [];
+	for (const hint of hints) {
+		const k = `${hint.label}:${hint.action}`;
+		if (!seen.has(k)) {
+			seen.add(k);
+			deduped.push(hint);
+		}
+	}
+	deduped.sort((a, b) => a.priority - b.priority);
+	return deduped;
+}
+//#endregion
+//#region src/ui/tui/hooks/useKeyboardHints.tsx
+/**
+* KeyboardHintsProvider — Context for collecting and displaying keyboard hints.
+*
+* Input components register their hints via useKeyBindings. The provider
+* flattens, deduplicates, and sorts them. The hints bar stays visible for as
+* long as a screen has registered hints — it never auto-dismisses.
+*/
+const KeyboardHintsContext = createContext({
+	register: () => void 0,
+	unregister: () => void 0,
+	hints: []
+});
+const useKeyboardHintsContext = () => useContext(KeyboardHintsContext);
+const KeyboardHintsProvider = ({ children }) => {
+	const registrationsRef = useRef(/* @__PURE__ */ new Map());
+	const [hints, setHints] = useState([]);
+	const prevHintsKeyRef = useRef("");
+	const recompute = useCallback(() => {
+		const all = [];
+		for (const h of registrationsRef.current.values()) all.push(...h);
+		const deduped = deduplicateAndSort(all);
+		const newKey = hintsKey(deduped);
+		if (newKey !== prevHintsKeyRef.current) {
+			prevHintsKeyRef.current = newKey;
+			setHints(deduped);
+		}
+	}, []);
+	const register = useCallback((id, h) => {
+		registrationsRef.current.set(id, h);
+		recompute();
+	}, [recompute]);
+	const unregister = useCallback((id) => {
+		registrationsRef.current.delete(id);
+		recompute();
+	}, [recompute]);
+	return /* @__PURE__ */ jsx(KeyboardHintsContext.Provider, {
+		value: {
+			register,
+			unregister,
+			hints
+		},
+		children
+	});
+};
+//#endregion
+//#region src/ui/tui/hooks/useKeyBindings.ts
+/**
+* useKeyBindings — Declarative keyboard input + automatic hint registration.
+*
+* Replaces raw `useInput` in input components. Define bindings as data;
+* the hook wires up the Ink input handler AND registers hints in the
+* KeyboardHintsProvider. One source of truth for keys and their labels.
+*/
+/**
+* Declarative key bindings hook. Replaces `useInput` in input components.
+* Registers hints automatically with the KeyboardHintsProvider.
+*
+* @param id Unique identifier for this component's hints registration
+* @param bindings Array of key binding definitions
+*/
+function useKeyBindings(id, bindings) {
+	const ctx = useKeyboardHintsContext();
+	const hintsRef = useRef("");
+	const hints = bindings.map((b) => ({
+		label: b.label,
+		action: b.action,
+		priority: b.priority ?? getDefaultPriority(b.match)
+	}));
+	const serialized = hints.map((h) => `${h.label}:${h.action}:${h.priority}`).join("|");
+	useEffect(() => {
+		if (serialized !== hintsRef.current) {
+			hintsRef.current = serialized;
+			ctx.register(id, hints);
+		}
+		return () => ctx.unregister(id);
+	}, [id, serialized]);
+	useInput((input, key) => {
+		for (const binding of bindings) if ((Array.isArray(binding.match) ? binding.match : [binding.match]).some((m) => matchesKey(m, input, key))) {
+			binding.handler(input, key);
+			return;
+		}
+	});
+}
+//#endregion
+//#region src/ui/tui/primitives/PickerMenu.tsx
+/**
+* PickerMenu — Single and multi select.
+* Single mode: custom renderer with small triangle indicator; enter selects.
+* Multi mode: checkbox glyphs toggled with enter, plus a focusable
+*   Confirm button below the options. The cursor moves onto the button and
+*   enter submits — see MultiPickerMenu for the rationale.
+*
+* Key bindings are declared via useKeyBindings, which auto-registers
+* hints in the KeyboardHintsBar.
+*/
+/**
+* Step through a column's options in `dir`, wrapping, until an enabled
+* option is found. Returns `from` unchanged if the column is entirely
+* disabled.
+*/
+function stepEnabled(options, rows, from, dir) {
+	const colStart = Math.floor(from / rows) * rows;
+	const colLen = Math.min(rows, options.length - colStart);
+	let row = from % rows;
+	for (let i = 0; i < colLen; i++) {
+		row = (row + dir + colLen) % colLen;
+		const idx = colStart + row;
+		if (!options[idx]?.disabled) return idx;
+	}
+	return from;
+}
+/** First enabled option in [start, end), for initial focus and for entering
+*  a page from the Confirm button. */
+function firstEnabled(options, start = 0, end = options.length) {
+	for (let i = start; i < end; i++) if (!options[i]?.disabled) return i;
+	return start;
+}
+/** Last enabled option in [start, end), for wrapping from the button onto
+*  the bottom of the page. */
+function lastEnabled(options, start = 0, end = options.length) {
+	for (let i = end - 1; i >= start; i--) if (!options[i]?.disabled) return i;
+	return end - 1;
+}
+/**
+* Rows the surrounding screen or overlay consumes above and below a picker —
+* border + padding, title, prompt text, and the keyboard-hints bar. A
+* deliberately generous estimate: overshooting just shows a few fewer rows,
+* whereas undershooting lets a long list overflow the viewport (the bug this
+* windowing guards against). Mirrors GroupedPickerMenu's budgeting.
+*/
+const CHROME_OVERHEAD = 13;
+/**
+* Max visual rows a picker renders regardless of terminal height. Without a
+* ceiling a tall terminal lets a long list fill the whole viewport, which
+* reads as a wall of options; ~12 rows keeps the menu scannable and leaves
+* known breathing room above and below.
+*/
+const MAX_LIST_ROWS = 12;
+/** Extra rows a multi-select adds below its options: marginTop + Confirm button. */
+const CONFIRM_CHROME = 3;
+/** Lists shorter than this never page — tall rows would split 2-3 options into pages of one. */
+const MIN_COUNT_TO_PAGE = 5;
+/** Width the multi-select wraps option descriptions to (matches the render). */
+const DESCRIPTION_WIDTH = 56;
+/**
+* Pages a single-column option list to the terminal height. The visible page
+* is derived from the focused index — no scroll state — so ↑/↓ flip pages as
+* focus crosses a page edge and n/p jump a whole page. Pages hold a fixed
+* option count sized to the tallest row (`rowCost`), trading a sparser page
+* on mixed-height lists for arithmetic-only paging. Engages only for
+* single-column pickers — multi-column grids already compress vertically.
+*/
+function usePickerViewport(count, rowCost, chromeBelow, enabled, focused) {
+	const [, termRows] = useStdoutDimensions();
+	const budget = Math.max(5, Math.min(termRows - CHROME_OVERHEAD - chromeBelow, MAX_LIST_ROWS));
+	const needsScroll = enabled && count >= MIN_COUNT_TO_PAGE && count * rowCost > budget;
+	const perPage = needsScroll ? Math.max(1, Math.floor((budget - 2) / rowCost)) : count;
+	const pageCount = Math.max(1, Math.ceil(count / perPage));
+	const start = Math.floor(focused / perPage) * perPage;
+	const end = Math.min(start + perPage, count);
+	return {
+		needsScroll,
+		start,
+		end,
+		hiddenAbove: start,
+		hiddenBelow: count - end,
+		pageStep: (f, dir) => (Math.floor(f / perPage) + dir + pageCount) % pageCount * perPage
+	};
+}
+/** Lists at least this long get filtering. Shorter ones fit on a page or two,
+*  where a filter row costs more rows than it saves. */
+const FILTER_MIN_OPTIONS = 10;
+const PickerMenu = ({ message, options, mode = "single", centered = false, columns = 1, optionMarginBottom = 0, filterable, onSelect }) => {
+	const canFilter = filterable ?? options.length >= FILTER_MIN_OPTIONS;
+	const [filter, setFilter] = useState("");
+	const fuse = useMemo(() => canFilter ? buildPickerIndex(options) : null, [options, canFilter]);
+	const visible = useMemo(() => fuse ? rankOptions(fuse, options, filter) ?? options : options, [
+		fuse,
+		options,
+		filter
+	]);
+	const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+	const shared = {
+		message,
+		options: visible,
+		centered,
+		optionMarginBottom,
+		onSelect,
+		filter: canFilter ? filter : null,
+		setFilter,
+		totalCount: options.length
+	};
+	const key = String(filter);
+	if (mode === "multi") return /* @__PURE__ */ jsx(MultiPickerMenu, {
+		...shared,
+		columns,
+		allOptions: options,
+		selected,
+		setSelected
+	}, key);
+	return /* @__PURE__ */ jsx(SinglePickerMenu, {
+		...shared,
+		columns
+	}, key);
+};
+/**
+* Backspace and free typing. Append these last: `Printable` matches almost any
+* key, and bindings resolve in order, so anything specific has to be registered
+* first to keep working. Both share a label/action so the hints bar shows one.
+*/
+function filterBindings(filter, setFilter) {
+	return [{
+		match: "backspace",
+		label: "type",
+		action: "filter",
+		handler: () => setFilter(filter.slice(0, -1))
+	}, {
+		match: "printable",
+		label: "type",
+		action: "filter",
+		handler: (input) => setFilter(filter + input)
+	}];
+}
+/** The filter row above a filterable list: what's typed, and how much it left. */
+const FilterRow = ({ filter, shown, total }) => /* @__PURE__ */ jsx(Box, {
+	paddingLeft: 1,
+	children: /* @__PURE__ */ jsx(Text, {
+		dimColor: true,
+		children: filter ? `Filter: ${filter} (${shown} of ${total})` : `Type to filter ${total} options`
+	})
+});
+/** Custom single-select with triangle indicator and accent highlight. */
+const SinglePickerMenu = ({ message, options, centered = false, columns = 1, optionMarginBottom = 0, filter, setFilter, totalCount, onSelect }) => {
+	const [focused, setFocused] = useState(() => firstEnabled(options));
+	const rows = Math.ceil(options.length / columns);
+	const viewport = usePickerViewport(options.length, 1 + optionMarginBottom, filter !== null ? 1 : 0, columns === 1, focused);
+	useEffect(() => {
+		if (focused >= options.length || options[focused]?.disabled) setFocused(firstEnabled(options));
+	}, [options, focused]);
+	const bindings = [
+		{
+			match: ["upArrow", "downArrow"],
+			label: "↑↓",
+			action: "navigate",
+			handler: (_input, key) => {
+				setFocused(stepEnabled(options, rows, focused, key.upArrow ? -1 : 1));
+			}
+		},
+		...viewport.needsScroll && filter === null ? [{
+			match: ["n", "p"],
+			label: "n/p",
+			action: "page",
+			handler: (input) => {
+				const target = viewport.pageStep(focused, input === "n" ? 1 : -1);
+				setFocused(options[target]?.disabled ? stepEnabled(options, rows, target, 1) : target);
+			}
+		}] : [],
+		{
+			match: "return",
+			label: "enter",
+			action: "select",
+			handler: () => {
+				const selected = options[focused];
+				if (selected && !selected.disabled) onSelect(selected.value);
+			}
+		}
+	];
+	if (columns > 1) bindings.splice(1, 0, {
+		match: ["leftArrow", "rightArrow"],
+		label: "←→",
+		action: "navigate",
+		handler: (_input, key) => {
+			const col = Math.floor(focused / rows);
+			const row = focused % rows;
+			let next = focused;
+			if (key.leftArrow) {
+				const prevCol = col > 0 ? col - 1 : columns - 1;
+				next = Math.min(prevCol * rows + row, options.length - 1);
+			}
+			if (key.rightArrow) {
+				const nextCol = col < columns - 1 ? col + 1 : 0;
+				next = Math.min(nextCol * rows + row, options.length - 1);
+			}
+			if (options[next]?.disabled) next = stepEnabled(options, rows, next, 1);
+			setFocused(next);
+		}
+	});
+	if (filter !== null) bindings.push(...filterBindings(filter, setFilter));
+	useKeyBindings("single-picker", bindings);
+	const columnArrays = [];
+	for (let c = 0; c < columns; c++) columnArrays.push(options.slice(c * rows, c * rows + rows));
+	const align = centered ? "center" : void 0;
+	const renderOption = (opt, flatIdx) => {
+		const isFocused = flatIdx === focused;
+		const base = opt.hint ? `${opt.label} (${opt.hint})` : opt.label;
+		const label = opt.indent ? `  ${base}` : base;
+		return /* @__PURE__ */ jsxs(Box, {
+			gap: 1,
+			marginBottom: optionMarginBottom,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					color: isFocused ? Colors.accent : void 0,
+					dimColor: !isFocused,
+					children: isFocused && !opt.header ? Icons.triangleSmallRight : " "
+				}),
+				opt.icon && /* @__PURE__ */ jsx(Text, {
+					color: opt.icon.color,
+					children: opt.icon.glyph
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					color: opt.header ? void 0 : opt.disabled ? Colors.muted : isFocused ? Colors.accent : void 0,
+					bold: opt.header || isFocused && !opt.disabled,
+					dimColor: !opt.header && (!isFocused || opt.disabled),
+					children: label
+				})
+			]
+		}, flatIdx);
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		alignItems: align,
+		children: [
+			/* @__PURE__ */ jsx(PromptLabel, { message }),
+			filter !== null && /* @__PURE__ */ jsx(FilterRow, {
+				filter,
+				shown: options.length,
+				total: totalCount
+			}),
+			filter && options.length === 0 ? /* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "No options match. Backspace to widen the filter."
+			}) : viewport.needsScroll ? /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: viewport.hiddenAbove > 0 ? `↑ ${viewport.hiddenAbove} more${filter === null ? " [P] for previous page" : ""}` : " "
+					}),
+					options.slice(viewport.start, viewport.end).map((opt, relIdx) => renderOption(opt, viewport.start + relIdx)),
+					/* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: viewport.hiddenBelow > 0 ? `↓ ${viewport.hiddenBelow} more${filter === null ? " [N] for next page" : ""}` : " "
+					})
+				]
+			}) : /* @__PURE__ */ jsx(Box, {
+				flexDirection: "row",
+				gap: 4,
+				children: columnArrays.map((colOpts, colIdx) => /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					children: colOpts.map((opt, rowIdx) => renderOption(opt, colIdx * rows + rowIdx))
+				}, colIdx))
+			})
+		]
+	});
+};
+/**
+* Custom multi-select with checkbox glyphs and accent highlight.
+*
+* Interaction model (shared with GroupedPickerMenu):
+*   - \u2191\u2193 move the cursor through the options AND onto the Confirm button,
+*     which lives just past the last option.
+*   - enter toggles the focused option (no more "space toggles but enter
+*     advances" split that tripped people up). Space is kept as an
+*     undocumented alias, but the hints bar advertises only enter.
+*   - moving onto the Confirm button and pressing enter submits the
+*     current selection.
+*/
+const MultiPickerMenu = ({ message, options, centered = false, columns = 1, optionMarginBottom = 0, filter, setFilter, totalCount, allOptions, selected, setSelected, onSelect }) => {
+	const [focused, setFocused] = useState(() => firstEnabled(options));
+	const [onButton, setOnButton] = useState(false);
+	const rows = Math.ceil(options.length / columns);
+	const rowCost = options.reduce((max, opt) => Math.max(max, 1 + optionMarginBottom + (opt.description ? wordWrap(opt.description, DESCRIPTION_WIDTH).length : 0)), 1);
+	const viewport = usePickerViewport(options.length, rowCost, CONFIRM_CHROME + (filter !== null ? 1 : 0), columns === 1, focused);
+	useEffect(() => {
+		if (focused >= options.length || options[focused]?.disabled) setFocused(firstEnabled(options));
+	}, [options, focused]);
+	const confirm = () => {
+		onSelect(allOptions.filter((option) => selected.has(option.label)).map((option) => option.value));
+	};
+	const bindings = [
+		{
+			match: ["upArrow", "downArrow"],
+			label: "↑↓",
+			action: "navigate",
+			handler: (_input, key) => {
+				const dir = key.upArrow ? -1 : 1;
+				if (onButton) {
+					setOnButton(false);
+					setFocused(dir === -1 ? lastEnabled(options, viewport.start, viewport.end) : firstEnabled(options, viewport.start, viewport.end));
+					return;
+				}
+				const col = Math.floor(focused / rows);
+				const row = focused % rows;
+				const colLen = Math.min(rows, options.length - col * rows);
+				let r = row + dir;
+				while (r >= 0 && r < colLen && options[col * rows + r]?.disabled) r += dir;
+				if (r >= 0 && r < colLen) setFocused(col * rows + r);
+				else setOnButton(true);
+			}
+		},
+		...viewport.needsScroll && filter === null ? [{
+			match: ["n", "p"],
+			label: "n/p",
+			action: "page",
+			handler: (input) => {
+				const target = viewport.pageStep(focused, input === "n" ? 1 : -1);
+				setOnButton(false);
+				setFocused(options[target]?.disabled ? stepEnabled(options, rows, target, 1) : target);
+			}
+		}] : [],
+		{
+			match: filter !== null ? "return" : ["space", "return"],
+			label: "enter",
+			action: "select",
+			handler: () => {
+				if (onButton) {
+					confirm();
+					return;
+				}
+				const option = options[focused];
+				if (!option || option.disabled) return;
+				const label = option.label;
+				setSelected((prev) => {
+					const next = new Set(prev);
+					if (next.has(label)) {
+						next.delete(label);
+						return next;
+					}
+					if (option.exclusive) return new Set([label]);
+					for (const picked of next) if (allOptions.find((o) => o.label === picked)?.exclusive) next.delete(picked);
+					next.add(label);
+					return next;
+				});
+			}
+		}
+	];
+	if (columns > 1) bindings.splice(1, 0, {
+		match: ["leftArrow", "rightArrow"],
+		label: "←→",
+		action: "navigate",
+		handler: (_input, key) => {
+			if (onButton) return;
+			const col = Math.floor(focused / rows);
+			const row = focused % rows;
+			let next = focused;
+			if (key.leftArrow) {
+				const prevCol = col > 0 ? col - 1 : columns - 1;
+				next = Math.min(prevCol * rows + row, options.length - 1);
+			}
+			if (key.rightArrow) {
+				const nextCol = col < columns - 1 ? col + 1 : 0;
+				next = Math.min(nextCol * rows + row, options.length - 1);
+			}
+			if (options[next]?.disabled) next = stepEnabled(options, rows, next, 1);
+			setFocused(next);
+		}
+	});
+	if (filter !== null) bindings.push(...filterBindings(filter, setFilter));
+	useKeyBindings("multi-picker", bindings);
+	const columnArrays = [];
+	for (let c = 0; c < columns; c++) columnArrays.push(options.slice(c * rows, c * rows + rows));
+	const renderOption = (opt, flatIdx) => {
+		const isFocused = !onButton && flatIdx === focused;
+		const isSelected = selected.has(opt.label);
+		const label = opt.hint ? `${opt.label} (${opt.hint})` : opt.label;
+		const checkbox = isSelected ? Icons.squareFilled : Icons.squareOpen;
+		return /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			marginBottom: optionMarginBottom,
+			children: [/* @__PURE__ */ jsxs(Box, {
+				gap: 1,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						color: isSelected ? "white" : Colors.muted,
+						dimColor: !isFocused && !isSelected,
+						children: checkbox
+					}),
+					opt.icon && /* @__PURE__ */ jsx(Text, {
+						color: opt.icon.color,
+						children: opt.icon.glyph
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: opt.disabled ? Colors.muted : isFocused ? Colors.accent : void 0,
+						bold: isFocused && !opt.disabled,
+						dimColor: !isFocused || opt.disabled,
+						children: label
+					})
+				]
+			}), opt.description && /* @__PURE__ */ jsx(Box, {
+				marginLeft: 4,
+				width: DESCRIPTION_WIDTH,
+				children: /* @__PURE__ */ jsx(Text, {
+					dimColor: true,
+					wrap: "wrap",
+					children: opt.description
+				})
+			})]
+		}, flatIdx);
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		alignItems: centered ? "center" : void 0,
+		children: [
+			/* @__PURE__ */ jsx(PromptLabel, { message }),
+			filter !== null && /* @__PURE__ */ jsx(FilterRow, {
+				filter,
+				shown: options.length,
+				total: totalCount
+			}),
+			filter && options.length === 0 && /* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "No options match. Backspace to widen the filter."
+			}),
+			viewport.needsScroll ? /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				marginLeft: centered ? 0 : 2,
+				marginTop: message ? 1 : 0,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: viewport.hiddenAbove > 0 ? `↑ ${viewport.hiddenAbove} more${filter === null ? " [P] for previous page" : ""}` : " "
+					}),
+					options.slice(viewport.start, viewport.end).map((opt, relIdx) => renderOption(opt, viewport.start + relIdx)),
+					/* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: viewport.hiddenBelow > 0 ? `↓ ${viewport.hiddenBelow} more${filter === null ? " [N] for next page" : ""}` : " "
+					})
+				]
+			}) : /* @__PURE__ */ jsx(Box, {
+				flexDirection: "row",
+				gap: 4,
+				marginLeft: centered ? 0 : 2,
+				marginTop: message ? 1 : 0,
+				children: columnArrays.map((colOpts, colIdx) => /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					children: colOpts.map((opt, rowIdx) => renderOption(opt, colIdx * rows + rowIdx))
+				}, colIdx))
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				marginLeft: centered ? 0 : 2,
+				children: /* @__PURE__ */ jsx(ConfirmButton, {
+					focused: onButton,
+					count: selected.size
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { useStdoutDimensions as a, useKeyboardHintsContext as i, useKeyBindings as n, ConfirmButton as o, KeyboardHintsProvider as r, PromptLabel as s, PickerMenu as t };
+
+//# sourceMappingURL=PickerMenu-dG5DQCZA.js.map