effect 4.0.0-rc.111 → 4.0.0-rc.113

package/src/unstable/cli/Prompt.ts

@@ -13,6 +13,7 @@
 import * as Arr from "../../Array.ts"
 import type { NoSuchElementError } from "../../Cause.ts"
 import type * as Cause from "../../Cause.ts"
+import * as Context from "../../Context.ts"
 import * as Data from "../../Data.ts"
 import * as Effect from "../../Effect.ts"
 import * as Effectable from "../../Effectable.ts"
@@ -147,6 +148,67 @@ export interface Handlers<State, Output, Input = Terminal.UserInput> {
   ) => Effect.Effect<string, never, Environment>
 }
 
+/**
+ * Defines the symbols used to render built-in prompts.
+ *
+ * **Details**
+ *
+ * Set a symbol to an empty string to omit both the symbol and its adjacent
+ * spacing.
+ *
+ * @category models
+ * @since 4.0.0
+ */
+export interface Theme {
+  /** The leading symbol on an active prompt line. */
+  readonly prefix: string
+  /** The marker for the highlighted choice. */
+  readonly pointer: string
+  /** The trailing prompt and validation marker. */
+  readonly pointerSmall: string
+  /** The marker shown when a prompt has been submitted. */
+  readonly ellipsis: string
+  /** The leading symbol on a completed prompt line. */
+  readonly tick: string
+  /** The marker indicating choices above the current page. */
+  readonly arrowUp: string
+  /** The marker indicating choices below the current page. */
+  readonly arrowDown: string
+  /** The marker for a selected multi-select choice. */
+  readonly checkboxOn: string
+  /** The marker for an unselected multi-select choice. */
+  readonly checkboxOff: string
+  /** The separator between a choice and its description. */
+  readonly descriptionSeparator: string
+  /** The character used to mask password input. */
+  readonly passwordMask: string
+  /** The separator between toggle labels. */
+  readonly toggleSeparator: string
+  /** The color used for active prompt elements. */
+  readonly primaryColor: string
+  /** The color used for secondary prompt elements. */
+  readonly mutedColor: string
+  /** The color used for completed prompt markers. */
+  readonly successColor: string
+  /** The color used for validation errors. */
+  readonly errorColor: string
+  /** The color used for submitted values. */
+  readonly submittedColor: string
+}
+
+/**
+ * Options shared by built-in prompts that support theme overrides.
+ *
+ * @category options
+ * @since 4.0.0
+ */
+export interface ThemeOptions {
+  /** Overrides the context theme for this prompt. */
+  readonly theme?: Partial<Theme>
+}
+
+type OptionsReq<A> = Required<Omit<A, "theme">> & ThemeOptions
+
 /**
  * Options for a confirmation prompt that asks the user to choose a boolean
  * yes/no value.
@@ -154,15 +216,11 @@ export interface Handlers<State, Output, Input = Terminal.UserInput> {
  * @category options
  * @since 4.0.0
  */
-export interface ConfirmOptions {
+export interface ConfirmOptions extends ThemeOptions {
   /**
    * The message to display in the prompt.
    */
   readonly message: string
-  /**
-   * The single-column prefix to display at the start of the prompt (defaults to `"?"`).
-   */
-  readonly prefix?: string
   /**
    * The initial value of the confirm prompt (defaults to `false`).
    */
@@ -204,15 +262,11 @@ export interface ConfirmOptions {
  * @category options
  * @since 4.0.0
  */
-export interface DateOptions {
+export interface DateOptions extends ThemeOptions {
   /**
    * The message to display in the prompt.
    */
   readonly message: string
-  /**
-   * The single-column prefix to display at the start of the prompt (defaults to `"?"`).
-   */
-  readonly prefix?: string
   /**
    * The initial date value to display in the prompt (defaults to the current
    * date).
@@ -283,15 +337,11 @@ export interface DateOptions {
  * @category options
  * @since 4.0.0
  */
-export interface IntegerOptions {
+export interface IntOptions extends ThemeOptions {
   /**
    * The message to display in the prompt.
    */
   readonly message: string
-  /**
-   * The single-column prefix to display at the start of the prompt (defaults to `"?"`).
-   */
-  readonly prefix?: string
   /**
    * The default value of the integer prompt.
    */
@@ -322,17 +372,12 @@ export interface IntegerOptions {
 }
 
 /**
- * Options for a floating-point number prompt.
- *
- * **Details**
- *
- * In addition to the numeric bounds and step settings from `IntegerOptions`,
- * the prompt can be configured with a display precision.
+ * Options for `Number`, extending `IntOptions` with display precision.
  *
  * @category options
  * @since 4.0.0
  */
-export interface FloatOptions extends IntegerOptions {
+export interface NumberOptions extends IntOptions {
   /**
    * The precision to use for the floating point value (defaults to `2`).
    */
@@ -364,7 +409,7 @@ export interface ListOptions extends TextOptions {
  * @category options
  * @since 4.0.0
  */
-export interface FileOptions {
+export interface FileOptions extends ThemeOptions {
   /**
    * The path type that will be selected, defaulting to `"file"`.
    */
@@ -373,11 +418,6 @@ export interface FileOptions {
    * The message to display in the prompt, defaulting to `"Choose a file"`.
    */
   readonly message?: string
-  /**
-   * The single-column prefix to display at the start of the directory traversal
-   * confirmation prompt (defaults to `"?"`).
-   */
-  readonly prefix?: string
   /**
    * Where the user will initially be prompted to select files from, defaulting
    * to the current working directory.
@@ -405,15 +445,11 @@ export interface FileOptions {
  * @category options
  * @since 4.0.0
  */
-export interface SelectOptions<A> {
+export interface SelectOptions<A> extends ThemeOptions {
   /**
    * The message to display in the prompt.
    */
   readonly message: string
-  /**
-   * The single-column prefix to display at the start of the prompt (defaults to `"?"`).
-   */
-  readonly prefix?: string
   /**
    * The choices to display to the user.
    */
@@ -514,15 +550,11 @@ export interface SelectChoice<A> {
  * @category options
  * @since 4.0.0
  */
-export interface TextOptions {
+export interface TextOptions extends ThemeOptions {
   /**
    * The message to display in the prompt.
    */
   readonly message: string
-  /**
-   * The single-column prefix to display at the start of the prompt (defaults to `"?"`).
-   */
-  readonly prefix?: string
   /**
    * The default value of the text option.
    */
@@ -541,15 +573,11 @@ export interface TextOptions {
  * @category options
  * @since 4.0.0
  */
-export interface ToggleOptions {
+export interface ToggleOptions extends ThemeOptions {
   /**
    * The message to display in the prompt.
    */
   readonly message: string
-  /**
-   * The single-column prefix to display at the start of the prompt (defaults to `"?"`).
-   */
-  readonly prefix?: string
   /**
    * The intitial value of the toggle prompt (defaults to `false`).
    */
@@ -566,47 +594,64 @@ export interface ToggleOptions {
   readonly inactive?: string
 }
 
-const defaultFigures = {
+const defaultTheme: Theme = {
+  prefix: "?",
   arrowUp: "↑",
   arrowDown: "↓",
-  arrowLeft: "←",
-  arrowRight: "→",
-  radioOn: "◉",
-  radioOff: "◯",
   checkboxOn: "☒",
   checkboxOff: "☐",
   tick: "✔",
-  cross: "✖",
   ellipsis: "…",
   pointerSmall: "›",
-  line: "─",
-  pointer: "❯"
-}
-
-const DEFAULT_PREFIX = "?"
-
-const windowsFigures = {
-  arrowUp: defaultFigures.arrowUp,
-  arrowDown: defaultFigures.arrowDown,
-  arrowLeft: defaultFigures.arrowLeft,
-  arrowRight: defaultFigures.arrowRight,
-  radioOn: "(*)",
-  radioOff: "( )",
+  pointer: "❯",
+  descriptionSeparator: "- ",
+  passwordMask: "*",
+  toggleSeparator: "/",
+  primaryColor: Ansi.cyanBright,
+  mutedColor: Ansi.blackBright,
+  successColor: Ansi.green,
+  errorColor: Ansi.red,
+  submittedColor: Ansi.white
+}
+
+const windowsTheme: Theme = {
+  ...defaultTheme,
   checkboxOn: "[*]",
   checkboxOff: "[ ]",
   tick: "√",
-  cross: "×",
   ellipsis: "...",
   pointerSmall: "»",
-  line: "─",
   pointer: ">"
 }
 
-/** @internal */
-export const platformFigures = Effect.map(
-  Effect.sync(() => process.platform === "win32"),
-  (isWindows) => isWindows ? windowsFigures : defaultFigures
-)
+/**
+ * Creates a prompt theme using the current platform defaults.
+ *
+ * @category constructors
+ * @since 4.0.0
+ */
+export const makeTheme = (options?: Partial<Theme>): Theme => ({
+  ...(process.platform === "win32" ? windowsTheme : defaultTheme),
+  ...options
+})
+
+/**
+ * Context reference for the theme used by built-in prompts.
+ *
+ * **Details**
+ *
+ * Provide this reference once to theme every prompt in an application. A
+ * prompt's `theme` option takes precedence over the context value.
+ *
+ * @category services
+ * @since 4.0.0
+ */
+export const Theme: Context.Reference<Theme> = Context.Reference("effect/unstable/cli/Prompt/Theme", {
+  defaultValue: makeTheme
+})
+
+const getTheme = (options: ThemeOptions): Effect.Effect<Theme> =>
+  Effect.map(Theme, (theme) => ({ ...theme, ...options.theme }))
 
 /**
  * Type alias for any `Prompt`, regardless of its output type.
@@ -753,7 +798,21 @@ export const all: <
 }
 
 const annotateLine = (line: string): string => Ansi.annotate(line, Ansi.bold)
-const annotateErrorLine = (line: string): string => Ansi.annotate(line, Ansi.combine(Ansi.italicized, Ansi.red))
+const annotateErrorLine = (line: string, color: string): string =>
+  Ansi.annotate(line, Ansi.combine(Ansi.italicized, color))
+const annotateSymbol = (symbol: string, ...styles: Array<string | Array<string>>): string =>
+  symbol.length === 0 ? "" : Ansi.annotate(symbol, ...styles)
+const separateSymbol = (symbol: string, text: string): string => symbol.length === 0 ? text : symbol + " " + text
+const renderPagingPrefix = (theme: Theme, showArrowUp: boolean, showArrowDown: boolean): string => {
+  const width = Math.max(theme.arrowUp.length, theme.arrowDown.length)
+  if (showArrowUp) {
+    return theme.arrowUp.padEnd(width)
+  }
+  if (showArrowDown) {
+    return theme.arrowDown.padEnd(width)
+  }
+  return " ".repeat(width)
+}
 
 /**
  * Creates a confirmation prompt that asks the user to choose a boolean yes/no
@@ -768,16 +827,15 @@ const annotateErrorLine = (line: string): string => Ansi.annotate(line, Ansi.com
  * `initial` defaults to `false`. Enter submits the current default, yes-style
  * input submits `true`, no-style input submits `false`, and other input beeps.
  *
- * @see {@link toggle} for an interactive switch-before-submit boolean prompt
+ * @see {@link Toggle} for an interactive switch-before-submit boolean prompt
  *
  * @category constructors
  * @since 4.0.0
  */
-export const confirm = (options: ConfirmOptions): Prompt<boolean> => {
-  const opts: Required<ConfirmOptions> = {
+export const Confirm = (options: ConfirmOptions): Prompt<boolean> => {
+  const opts: ConfirmOptionsReq = {
     initial: false,
     ...options,
-    prefix: options.prefix ?? DEFAULT_PREFIX,
     label: {
       confirm: "yes",
       deny: "no",
@@ -790,7 +848,7 @@ export const confirm = (options: ConfirmOptions): Prompt<boolean> => {
     }
   }
   const initialState: ConfirmState = { value: opts.initial }
-  return custom(initialState, {
+  return Custom(initialState, {
     render: handleConfirmRender(opts),
     process: (input) => handleConfirmProcess(input, opts.initial),
     clear: handleConfirmClear(opts)
@@ -819,7 +877,7 @@ export const confirm = (options: ConfirmOptions): Prompt<boolean> => {
  * @category constructors
  * @since 4.0.0
  */
-export const custom: {
+export const Custom: {
   /**
    * Creates a custom `Prompt` from the specified initial state and handlers.
    *
@@ -913,13 +971,12 @@ export const custom: {
  * @category constructors
  * @since 4.0.0
  */
-export const date = (options: DateOptions): Prompt<Date> => {
-  const opts: Required<DateOptions> = {
-    initial: new Date(),
+export const Date = (options: DateOptions): Prompt<globalThis.Date> => {
+  const opts: DateOptionsReq = {
+    initial: new globalThis.Date(),
     dateMask: "YYYY-MM-DD HH:mm:ss",
     validate: Effect.succeed,
     ...options,
-    prefix: options.prefix ?? DEFAULT_PREFIX,
     locales: {
       ...defaultLocales,
       ...options.locales
@@ -934,7 +991,7 @@ export const date = (options: DateOptions): Prompt<Date> => {
     value: opts.initial,
     error: Option.none()
   }
-  return custom(initialState, {
+  return Custom(initialState, {
     render: handleDateRender(opts),
     process: handleDateProcess(opts),
     clear: handleDateClear(opts)
@@ -949,14 +1006,19 @@ export const date = (options: DateOptions): Prompt<Date> => {
  * The prompt can be configured to select files, directories, or either path
  * type.
  *
+ * You can also type to filter the listed entries. Every printable character is
+ * appended to the filter query, so navigation is bound to the arrow keys,
+ * `tab`, and the `Ctrl+P` / `Ctrl+N` chords used by `readline` and `fzf`
+ * (`Ctrl+K` also moves up). `Ctrl+U` clears the query.
+ *
  * @category constructors
  * @since 4.0.0
  */
-export const file = (options: FileOptions = {}): Prompt<string> => {
+export const File = (options: FileOptions = {}): Prompt<string> => {
   const opts: FileOptionsReq = {
+    ...options,
     type: options.type ?? "file",
     message: options.message ?? `Choose a file`,
-    prefix: options.prefix ?? DEFAULT_PREFIX,
     startingPath: Option.fromUndefinedOr(options.startingPath),
     default: Option.fromUndefinedOr(options.default),
     maxPerPage: options.maxPerPage ?? 10,
@@ -982,10 +1044,10 @@ export const file = (options: FileOptions = {}): Prompt<string> => {
         return index === -1 ? 0 : index
       }
     })
-    const confirm = Confirm.Hide()
+    const confirm = FileConfirm.Hide()
     return { cursor, files, allFiles: files, query: "", path: Option.map(defaultPath, path.dirname), confirm }
   })
-  return custom(initialState, {
+  return Custom(initialState, {
     render: handleFileRender(opts),
     process: handleFileProcess(opts),
     clear: handleFileClear(opts)
@@ -1035,11 +1097,11 @@ export const flatMap: {
  * @category constructors
  * @since 4.0.0
  */
-export const float = (options: FloatOptions): Prompt<number> => {
-  const opts: FloatOptionsReq = {
+export const Number = (options: NumberOptions): Prompt<number> => {
+  const opts: NumberOptionsReq = {
     default: 0,
-    min: Number.NEGATIVE_INFINITY,
-    max: Number.POSITIVE_INFINITY,
+    min: globalThis.Number.NEGATIVE_INFINITY,
+    max: globalThis.Number.POSITIVE_INFINITY,
     incrementBy: 1,
     decrementBy: 1,
     precision: 2,
@@ -1052,8 +1114,7 @@ export const float = (options: FloatOptions): Prompt<number> => {
       }
       return Effect.succeed(n)
     },
-    ...options,
-    prefix: options.prefix ?? DEFAULT_PREFIX
+    ...options
   }
   const initialValue = options.default === undefined ? "" : `${opts.default}`
   const initialState: NumberState = {
@@ -1061,7 +1122,7 @@ export const float = (options: FloatOptions): Prompt<number> => {
     value: initialValue,
     error: Option.none()
   }
-  return custom(initialState, {
+  return Custom(initialState, {
     render: handleRenderFloat(opts),
     process: handleProcessFloat(opts),
     clear: handleNumberClear(opts)
@@ -1074,7 +1135,7 @@ export const float = (options: FloatOptions): Prompt<number> => {
  * @category constructors
  * @since 4.0.0
  */
-export const hidden = (
+export const Hidden = (
   options: TextOptions
 ): Prompt<Redacted.Redacted> => basePrompt(options, "hidden").pipe(map(Redacted.make))
 
@@ -1089,11 +1150,11 @@ export const hidden = (
  * @category constructors
  * @since 4.0.0
  */
-export const integer = (options: IntegerOptions): Prompt<number> => {
-  const opts: IntegerOptionsReq = {
+export const Int = (options: IntOptions): Prompt<number> => {
+  const opts: IntOptionsReq = {
     default: 0,
-    min: Number.NEGATIVE_INFINITY,
-    max: Number.POSITIVE_INFINITY,
+    min: globalThis.Number.NEGATIVE_INFINITY,
+    max: globalThis.Number.POSITIVE_INFINITY,
     incrementBy: 1,
     decrementBy: 1,
     validate: (n) => {
@@ -1105,8 +1166,7 @@ export const integer = (options: IntegerOptions): Prompt<number> => {
       }
       return Effect.succeed(n)
     },
-    ...options,
-    prefix: options.prefix ?? DEFAULT_PREFIX
+    ...options
   }
   const initialValue = options.default === undefined ? "" : `${opts.default}`
   const initialState: NumberState = {
@@ -1114,7 +1174,7 @@ export const integer = (options: IntegerOptions): Prompt<number> => {
     value: initialValue,
     error: Option.none()
   }
-  return custom(initialState, {
+  return Custom(initialState, {
     render: handleRenderInteger(opts),
     process: handleProcessInteger(opts),
     clear: handleNumberClear(opts)
@@ -1128,8 +1188,8 @@ export const integer = (options: IntegerOptions): Prompt<number> => {
  * @category constructors
  * @since 4.0.0
  */
-export const list = (options: ListOptions): Prompt<Array<string>> =>
-  text(options).pipe(
+export const List = (options: ListOptions): Prompt<Array<string>> =>
+  String(options).pipe(
     map((output) => output.split(options.delimiter || ","))
   )
 
@@ -1166,7 +1226,7 @@ export const map: {
  * @category constructors
  * @since 4.0.0
  */
-export const password = (
+export const Password = (
   options: TextOptions
 ): Prompt<Redacted.Redacted> => basePrompt(options, "password").pipe(map(Redacted.make))
 
@@ -1205,7 +1265,7 @@ const getSelectInitialIndex = <A>(choices: ReadonlyArray<SelectChoice<A>>): numb
     const choice = choices[i] as SelectChoice<A>
     if (choice.selected === true) {
       if (seenSelected !== -1) {
-        throw new Error("InvalidArgumentException: only a single choice can be selected by default for Prompt.select")
+        throw new Error("InvalidArgumentException: only a single choice can be selected by default for Prompt.Select")
       }
       seenSelected = i
     }
@@ -1227,14 +1287,13 @@ const getSelectInitialIndex = <A>(choices: ReadonlyArray<SelectChoice<A>>): numb
  * @category constructors
  * @since 4.0.0
  */
-export const select = <const A>(options: SelectOptions<A>): Prompt<A> => {
+export const Select = <const A>(options: SelectOptions<A>): Prompt<A> => {
   const opts: SelectOptionsReq<A> = {
     maxPerPage: 10,
-    ...options,
-    prefix: options.prefix ?? DEFAULT_PREFIX
+    ...options
   }
   const initialIndex = getSelectInitialIndex(opts.choices)
-  return custom(initialIndex, {
+  return Custom(initialIndex, {
     render: handleSelectRender(opts),
     process: handleSelectProcess(opts),
     clear: handleSelectClear(opts)
@@ -1244,12 +1303,18 @@ export const select = <const A>(options: SelectOptions<A>): Prompt<A> => {
 /**
  * Creates a prompt that lets users filter select choices by typing.
  *
+ * **Details**
+ *
+ * Every printable character is appended to the filter query, so navigation is
+ * bound to the arrow keys, `tab`, and the `Ctrl+P` / `Ctrl+N` chords used by
+ * `readline` and `fzf` (`Ctrl+K` also moves up). `Ctrl+U` clears the query.
+ *
  * **Example** (Filtering choices with autocomplete)
  *
  * ```ts import.meta.vitest
  * import { Prompt } from "effect/unstable/cli"
  *
- * const language = Prompt.autoComplete({
+ * const language = Prompt.AutoComplete({
  *   message: "Choose a language",
  *   choices: [
  *     { title: "TypeScript", value: "ts" },
@@ -1264,14 +1329,13 @@ export const select = <const A>(options: SelectOptions<A>): Prompt<A> => {
  * @category constructors
  * @since 4.0.0
  */
-export const autoComplete = <const A>(options: AutoCompleteOptions<A>): Prompt<A> => {
+export const AutoComplete = <const A>(options: AutoCompleteOptions<A>): Prompt<A> => {
   const opts: AutoCompleteOptionsReq<A> = {
     maxPerPage: 10,
     filterLabel: "filter",
     filterPlaceholder: "type to filter",
     emptyMessage: "No matches",
-    ...options,
-    prefix: options.prefix ?? DEFAULT_PREFIX
+    ...options
   }
   const initialIndex = getSelectInitialIndex(opts.choices)
   const filtered = filterAutoCompleteChoices(opts.choices, "")
@@ -1285,7 +1349,7 @@ export const autoComplete = <const A>(options: AutoCompleteOptions<A>): Prompt<A
     index,
     filtered
   }
-  return custom(initialState, {
+  return Custom(initialState, {
     render: handleAutoCompleteRender(opts),
     process: handleAutoCompleteProcess(opts),
     clear: handleAutoCompleteClear(opts)
@@ -1304,13 +1368,12 @@ export const autoComplete = <const A>(options: AutoCompleteOptions<A>): Prompt<A
  * @category constructors
  * @since 4.0.0
  */
-export const multiSelect = <const A>(
+export const MultiSelect = <const A>(
   options: SelectOptions<A> & MultiSelectOptions
 ): Prompt<Array<A>> => {
   const opts: SelectOptionsReq<A> & MultiSelectOptionsReq = {
     maxPerPage: 10,
-    ...options,
-    prefix: options.prefix ?? DEFAULT_PREFIX
+    ...options
   }
   // Seed initial selection from choices marked as selected: true
   const initialSelected = new Set<number>()
@@ -1321,7 +1384,7 @@ export const multiSelect = <const A>(
     }
   }
   const initialState: MultiSelectState = { index: 0, selectedIndices: initialSelected, error: Option.none() }
-  return custom(initialState, {
+  return Custom(initialState, {
     render: handleMultiSelectRender(opts),
     process: handleMultiSelectProcess(opts),
     clear: handleMultiSelectClear(opts)
@@ -1353,7 +1416,7 @@ export const succeed = <A>(value: A): Prompt<A> => {
  * @category constructors
  * @since 4.0.0
  */
-export const text = (
+export const String = (
   options: TextOptions
 ): Prompt<string> => basePrompt(options, "text")
 
@@ -1364,15 +1427,14 @@ export const text = (
  * @category constructors
  * @since 4.0.0
  */
-export const toggle = (options: ToggleOptions): Prompt<boolean> => {
+export const Toggle = (options: ToggleOptions): Prompt<boolean> => {
   const opts: ToggleOptionsReq = {
     initial: false,
     active: "on",
     inactive: "off",
-    ...options,
-    prefix: options.prefix ?? DEFAULT_PREFIX
+    ...options
   }
-  return custom(opts.initial, {
+  return Custom(opts.initial, {
     render: handleToggleRender(opts),
     process: handleToggleProcess,
     clear: () => handleToggleClear(opts)
@@ -1474,9 +1536,11 @@ const runLoop = Effect.fnUntraced(
   ) {
     let state = Effect.isEffect(loop.initialState) ? yield* loop.initialState : loop.initialState
     let action: Action<unknown, unknown> = Action.NextFrame({ state })
+    let clear = ""
     while (true) {
       const msg = yield* loop.render(state, action)
-      yield* Effect.orDie(terminal.display(msg))
+      yield* Effect.orDie(terminal.display(clear + msg))
+      clear = ""
       if (loop.events) {
         const takeInput = Queue.take(input).pipe(
           Effect.map((input) => ({ _tag: "Input" as const, input }))
@@ -1494,14 +1558,14 @@ const runLoop = Effect.fnUntraced(
         case "Beep":
           continue
         case "NextFrame": {
-          yield* Effect.orDie(terminal.display(yield* loop.clear(state, action)))
+          clear = yield* loop.clear(state, action)
           state = action.state
           continue
         }
         case "Submit": {
-          yield* Effect.orDie(terminal.display(yield* loop.clear(state, action)))
+          clear = yield* loop.clear(state, action)
           const msg = yield* loop.render(state, action)
-          yield* Effect.orDie(terminal.display(msg))
+          yield* Effect.orDie(terminal.display(clear + msg))
           return action.value
         }
       }
@@ -1546,7 +1610,7 @@ const clearOutputWithError = (outputText: string, columns: number, errorText?: s
   return eraseText(outputText, columns)
 }
 
-interface ConfirmOptionsReq extends Required<ConfirmOptions> {}
+interface ConfirmOptionsReq extends OptionsReq<ConfirmOptions> {}
 
 interface ConfirmState {
   readonly value: boolean
@@ -1560,13 +1624,13 @@ const handleConfirmClear = (options: ConfirmOptionsReq) => {
   return Effect.fnUntraced(function*(state: ConfirmState, _: Action<ConfirmState, boolean>) {
     const terminal = yield* Terminal.Terminal
     const columns = yield* terminal.columns
-    const figures = yield* platformFigures
+    const figures = yield* getTheme(options)
     const confirmMessage = state.value
       ? options.placeholder.defaultConfirm!
       : options.placeholder.defaultDeny!
     const promptText = renderConfirmOutput(
       confirmMessage,
-      options.prefix,
+      figures.prefix,
       figures.pointerSmall,
       options,
       { plain: true }
@@ -1586,24 +1650,24 @@ const renderConfirmOutput = (
 ) => renderPrompt(confirm, options.message, leadingSymbol, trailingSymbol, renderOptions)
 
 const renderConfirmNextFrame = Effect.fnUntraced(function*(state: ConfirmState, options: ConfirmOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(options.prefix, Ansi.cyanBright)
-  const trailingSymbol = Ansi.annotate(figures.pointerSmall, Ansi.blackBright)
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.prefix, figures.primaryColor)
+  const trailingSymbol = annotateSymbol(figures.pointerSmall, figures.mutedColor)
   // Marking these explicitly as present with `!` because they always will be
   // and there is really no value in adding a `DeepRequired` type helper just
   // for these internal cases
   const confirmMessage = state.value
     ? options.placeholder.defaultConfirm!
     : options.placeholder.defaultDeny!
-  const confirm = Ansi.annotate(confirmMessage, Ansi.blackBright)
+  const confirm = Ansi.annotate(confirmMessage, figures.mutedColor)
   const promptMsg = renderConfirmOutput(confirm, leadingSymbol, trailingSymbol, options)
   return Ansi.cursorHide + promptMsg
 })
 
 const renderConfirmSubmission = Effect.fnUntraced(function*(value: boolean, options: ConfirmOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-  const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+  const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
   const confirmMessage = value ? options.label.confirm : options.label.deny
   const promptMsg = renderConfirmOutput(confirmMessage, leadingSymbol, trailingSymbol, options)
   return promptMsg + "\n"
@@ -1636,7 +1700,7 @@ const handleConfirmProcess = (input: Terminal.UserInput, defaultValue: boolean)
   return Effect.succeed(Action.Beep())
 }
 
-interface DateOptionsReq extends Required<DateOptions> {}
+interface DateOptionsReq extends OptionsReq<DateOptions> {}
 
 interface DateState {
   readonly typed: string
@@ -1650,14 +1714,14 @@ const handleDateClear = (options: DateOptionsReq) => {
   return Effect.fnUntraced(function*(state: DateState, _: Action<DateState, globalThis.Date>) {
     const terminal = yield* Terminal.Terminal
     const columns = yield* terminal.columns
-    const figures = yield* platformFigures
+    const figures = yield* getTheme(options)
     const resetCurrentLine = Ansi.eraseLine + Ansi.cursorLeft
     const parts = Arr.reduce(state.dateParts, "", (doc, part) => doc + part.toString())
-    const promptText = renderDateOutput(options.prefix, figures.pointerSmall, parts, options, { plain: true })
+    const promptText = renderDateOutput(figures.prefix, figures.pointerSmall, parts, options, { plain: true })
     const errorText = Option.isSome(state.error)
       ? Arr.match(state.error.value.split(NEWLINE_REGEXP), {
         onEmpty: () => "",
-        onNonEmpty: (errorLines) => `${figures.pointerSmall} ${errorLines.join("\n")}`
+        onNonEmpty: (errorLines) => separateSymbol(figures.pointerSmall, errorLines.join("\n"))
       })
       : ""
     const clearOutput = clearOutputWithError(promptText, columns, errorText)
@@ -1665,26 +1729,26 @@ const handleDateClear = (options: DateOptionsReq) => {
   })
 }
 
-const renderDateError = (state: DateState, pointer: string): string => {
+const renderDateError = (state: DateState, pointer: string, theme: Theme): string => {
   if (Option.isSome(state.error)) {
     const errorLines = state.error.value.split(NEWLINE_REGEXP)
     if (Arr.isReadonlyArrayNonEmpty(errorLines)) {
-      const prefix = Ansi.annotate(pointer, Ansi.red) + " "
-      const lines = Arr.map(errorLines, (str) => annotateErrorLine(str))
-      return Ansi.cursorSavePosition + "\n" + prefix + lines.join("\n") + Ansi.cursorRestorePosition
+      const prefix = annotateSymbol(pointer, theme.errorColor)
+      const lines = Arr.map(errorLines, (str) => annotateErrorLine(str, theme.errorColor))
+      return Ansi.cursorSavePosition + "\n" + separateSymbol(prefix, lines.join("\n")) + Ansi.cursorRestorePosition
     }
   }
   return ""
 }
 
-const renderParts = (state: DateState, submitted: boolean = false) => {
+const renderParts = (state: DateState, theme: Theme, submitted: boolean = false) => {
   return Arr.reduce(
     state.dateParts,
     "",
     (doc, part, currentIndex) => {
       const partDoc = part.toString()
       if (currentIndex === state.cursor && !submitted) {
-        const annotation = Ansi.combine(Ansi.underlined, Ansi.cyanBright)
+        const annotation = Ansi.combine(Ansi.underlined, theme.primaryColor)
         return doc + Ansi.annotate(partDoc, annotation)
       }
       return doc + partDoc
@@ -1701,20 +1765,20 @@ const renderDateOutput = (
 ) => renderPrompt(parts, options.message, leadingSymbol, trailingSymbol, renderOptions)
 
 const renderDateNextFrame = Effect.fnUntraced(function*(state: DateState, options: DateOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(options.prefix, Ansi.cyanBright)
-  const trailingSymbol = Ansi.annotate(figures.pointerSmall, Ansi.blackBright)
-  const parts = renderParts(state)
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.prefix, figures.primaryColor)
+  const trailingSymbol = annotateSymbol(figures.pointerSmall, figures.mutedColor)
+  const parts = renderParts(state, figures)
   const promptMsg = renderDateOutput(leadingSymbol, trailingSymbol, parts, options)
-  const errorMsg = renderDateError(state, figures.pointerSmall)
+  const errorMsg = renderDateError(state, figures.pointerSmall, figures)
   return Ansi.cursorHide + promptMsg + errorMsg
 })
 
 const renderDateSubmission = Effect.fnUntraced(function*(state: DateState, options: DateOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-  const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
-  const parts = renderParts(state, true)
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+  const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
+  const parts = renderParts(state, figures, true)
   const promptMsg = renderDateOutput(leadingSymbol, trailingSymbol, parts, options)
   return promptMsg + "\n"
 })
@@ -1768,7 +1832,7 @@ const processDateNext = (state: DateState) => {
     onSome: (next) => state.dateParts.indexOf(next)
   })
   return Action.NextFrame({
-    state: { ...state, cursor }
+    state: { ...state, typed: "", cursor }
   })
 }
 
@@ -1915,7 +1979,7 @@ abstract class DatePart {
   constructor(params: DatePartParams) {
     this.token = params.token
     this.locales = params.locales
-    this.date = params.date || new Date()
+    this.date = params.date || new globalThis.Date()
     this.parts = params.parts || [this]
   }
 
@@ -1961,7 +2025,7 @@ abstract class DatePart {
   }
 
   toString() {
-    return String(this.date)
+    return globalThis.String(this.date)
   }
 }
 
@@ -1993,7 +2057,7 @@ class Milliseconds extends DatePart {
   }
 
   setValue(value: string): void {
-    this.date.setMilliseconds(Number.parseInt(value.slice(-this.token.length)))
+    this.date.setMilliseconds(globalThis.Number.parseInt(value.slice(-this.token.length)))
   }
 
   override toString() {
@@ -2012,7 +2076,7 @@ class Seconds extends DatePart {
   }
 
   setValue(value: string): void {
-    this.date.setSeconds(Number.parseInt(value.slice(-2)))
+    this.date.setSeconds(globalThis.Number.parseInt(value.slice(-2)))
   }
 
   override toString() {
@@ -2033,7 +2097,7 @@ class Minutes extends DatePart {
   }
 
   setValue(value: string): void {
-    this.date.setMinutes(Number.parseInt(value.slice(-2)))
+    this.date.setMinutes(globalThis.Number.parseInt(value.slice(-2)))
   }
 
   override toString() {
@@ -2054,7 +2118,7 @@ class Hours extends DatePart {
   }
 
   setValue(value: string): void {
-    this.date.setHours(Number.parseInt(value.slice(-2)))
+    this.date.setHours(globalThis.Number.parseInt(value.slice(-2)))
   }
 
   override toString() {
@@ -2077,7 +2141,7 @@ class Day extends DatePart {
   }
 
   setValue(value: string): void {
-    this.date.setDate(Number.parseInt(value.slice(-2)))
+    this.date.setDate(globalThis.Number.parseInt(value.slice(-2)))
   }
 
   override toString() {
@@ -2126,7 +2190,7 @@ class Month extends DatePart {
   }
 
   setValue(value: string): void {
-    const month = Number.parseInt(value.slice(-2)) - 1
+    const month = globalThis.Number.parseInt(value.slice(-2)) - 1
     this.date.setMonth(month < 0 ? 0 : month)
   }
 
@@ -2155,7 +2219,7 @@ class Year extends DatePart {
   }
 
   setValue(value: string): void {
-    this.date.setFullYear(Number.parseInt(value.slice(-4)))
+    this.date.setFullYear(globalThis.Number.parseInt(value.slice(-4)))
   }
 
   override toString() {
@@ -2185,7 +2249,7 @@ class Meridiem extends DatePart {
   }
 }
 
-interface FileOptionsReq extends Required<Omit<FileOptions, "startingPath" | "default">> {
+interface FileOptionsReq extends OptionsReq<Omit<FileOptions, "startingPath" | "default">> {
   readonly startingPath: Option.Option<string>
   readonly default: Option.Option<string>
 }
@@ -2196,20 +2260,20 @@ interface FileState {
   readonly allFiles: ReadonlyArray<string>
   readonly query: string
   readonly path: Option.Option<string>
-  readonly confirm: Confirm
+  readonly confirm: FileConfirm
 }
 
 const CONFIRM_MESSAGE = "The selected directory contains files. Would you like to traverse the selected directory?"
 const FILE_FILTER_LABEL = "filter"
 const FILE_FILTER_PLACEHOLDER = "type to filter"
 const FILE_EMPTY_MESSAGE = "No matches"
-type Confirm = Data.TaggedEnum<{
+type FileConfirm = Data.TaggedEnum<{
   readonly Show: {}
   readonly Hide: {}
 }>
-const Confirm = Data.taggedEnum<Confirm>()
+const FileConfirm = Data.taggedEnum<FileConfirm>()
 
-const showConfirmation = Confirm.$is("Show")
+const showConfirmation = FileConfirm.$is("Show")
 
 const resolveCurrentPath = (
   path: Option.Option<string>,
@@ -2296,17 +2360,23 @@ const handleFileClear = (options: FileOptionsReq) => {
     const terminal = yield* Terminal.Terminal
     const columns = yield* terminal.columns
     const path = yield* Path.Path
-    const figures = yield* platformFigures
+    const figures = yield* getTheme(options)
     const currentPath = yield* resolveCurrentPath(state.path, options)
     const selectedPath = state.files[state.cursor]
     const resolvedPath = selectedPath === undefined ? currentPath : path.resolve(currentPath, selectedPath)
-    const resolvedPathText = `${figures.pointerSmall} ${resolvedPath}`
+    const resolvedPathText = separateSymbol(figures.pointerSmall, resolvedPath)
     const isConfirming = showConfirmation(state.confirm)
     const promptText = isConfirming
-      ? renderPrompt("(Y/n)", CONFIRM_MESSAGE, options.prefix, figures.pointerSmall, { plain: true })
-      : renderPrompt(renderFileFilter(state, { plain: true }), options.message, figures.tick, figures.ellipsis, {
-        plain: true
-      })
+      ? renderPrompt("(Y/n)", CONFIRM_MESSAGE, figures.prefix, figures.pointerSmall, { plain: true })
+      : renderPrompt(
+        renderFileFilter(state, figures, { plain: true }),
+        options.message,
+        figures.tick,
+        figures.ellipsis,
+        {
+          plain: true
+        }
+      )
     const filesText = isConfirming
       ? ""
       : renderFiles(state, state.files, figures, options, { plain: true })
@@ -2330,15 +2400,27 @@ const renderPrompt = (
   trailingSymbol: string,
   options?: RenderOptions | undefined
 ) => {
-  const prefix = leadingSymbol + " "
+  const prefix = leadingSymbol.length === 0 ? "" : leadingSymbol + " "
+  const renderLine = (line: string) => {
+    let output = prefix + line
+    if (trailingSymbol.length > 0) {
+      output += " " + trailingSymbol
+    }
+    if (confirm.length > 0) {
+      output += " " + confirm
+    } else if (trailingSymbol.length > 0) {
+      output += " "
+    }
+    return output
+  }
   const annotate = options?.plain === true
     ? (line: string) => line
     : annotateLine
   return Arr.match(message.split(NEWLINE_REGEXP), {
-    onEmpty: () => prefix + " " + trailingSymbol + " " + confirm,
+    onEmpty: () => renderLine(""),
     onNonEmpty: (promptLines) => {
       const lines = Arr.map(promptLines, (line) => annotate(line))
-      return prefix + lines.join("\n") + " " + trailingSymbol + " " + confirm
+      return renderLine(lines.join("\n"))
     }
   })
 }
@@ -2348,47 +2430,51 @@ const renderPrefix = (
   toDisplay: { readonly startIndex: number; readonly endIndex: number },
   currentIndex: number,
   length: number,
-  figures: Effect.Success<typeof platformFigures>,
+  figures: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
-  let prefix = " "
-  if (currentIndex === toDisplay.startIndex && toDisplay.startIndex > 0) {
-    prefix = figures.arrowUp
-  } else if (currentIndex === toDisplay.endIndex - 1 && toDisplay.endIndex < length) {
-    prefix = figures.arrowDown
-  }
+  const prefix = renderPagingPrefix(
+    figures,
+    currentIndex === toDisplay.startIndex && toDisplay.startIndex > 0,
+    currentIndex === toDisplay.endIndex - 1 && toDisplay.endIndex < length
+  )
   if (state.cursor === currentIndex) {
     return renderOptions?.plain === true
       ? figures.pointer + prefix
-      : Ansi.annotate(figures.pointer, Ansi.cyanBright) + prefix
+      : annotateSymbol(figures.pointer, figures.primaryColor) + prefix
   }
-  return prefix + " "
+  return prefix + " ".repeat(figures.pointer.length)
 }
 
-const renderFileName = (file: string, isSelected: boolean, renderOptions?: RenderOptions | undefined) => {
+const renderFileName = (
+  file: string,
+  isSelected: boolean,
+  theme: Theme,
+  renderOptions?: RenderOptions | undefined
+) => {
   if (renderOptions?.plain === true) {
     return file
   }
   return isSelected
-    ? Ansi.annotate(file, Ansi.combine(Ansi.underlined, Ansi.cyanBright))
+    ? Ansi.annotate(file, Ansi.combine(Ansi.underlined, theme.primaryColor))
     : file
 }
 
-const renderFileFilter = (state: FileState, renderOptions?: RenderOptions | undefined) => {
+const renderFileFilter = (state: FileState, theme: Theme, renderOptions?: RenderOptions | undefined) => {
   const filterValue = state.query.length === 0
     ? renderOptions?.plain === true
       ? FILE_FILTER_PLACEHOLDER
-      : Ansi.annotate(FILE_FILTER_PLACEHOLDER, Ansi.blackBright)
+      : Ansi.annotate(FILE_FILTER_PLACEHOLDER, theme.mutedColor)
     : renderOptions?.plain === true
     ? state.query
-    : Ansi.annotate(state.query, Ansi.combine(Ansi.underlined, Ansi.cyanBright))
+    : Ansi.annotate(state.query, Ansi.combine(Ansi.underlined, theme.primaryColor))
   return `[${FILE_FILTER_LABEL}: ${filterValue}]`
 }
 
 const renderFiles = (
   state: FileState,
   files: ReadonlyArray<string>,
-  figures: Effect.Success<typeof platformFigures>,
+  figures: Theme,
   options: FileOptionsReq,
   renderOptions?: RenderOptions | undefined
 ) => {
@@ -2396,14 +2482,14 @@ const renderFiles = (
   if (length === 0) {
     return renderOptions?.plain === true
       ? FILE_EMPTY_MESSAGE
-      : Ansi.annotate(FILE_EMPTY_MESSAGE, Ansi.blackBright)
+      : Ansi.annotate(FILE_EMPTY_MESSAGE, figures.mutedColor)
   }
   const toDisplay = entriesToDisplay(state.cursor, length, options.maxPerPage)
   const documents: Array<string> = []
   for (let index = toDisplay.startIndex; index < toDisplay.endIndex; index++) {
     const isSelected = state.cursor === index
     const prefix = renderPrefix(state, toDisplay, index, length, figures, renderOptions)
-    const fileName = renderFileName(files[index], isSelected, renderOptions)
+    const fileName = renderFileName(files[index], isSelected, figures, renderOptions)
     documents.push(prefix + fileName)
   }
   return documents.join("\n")
@@ -2411,32 +2497,32 @@ const renderFiles = (
 
 const renderFileNextFrame = Effect.fnUntraced(function*(state: FileState, options: FileOptionsReq) {
   const path = yield* Path.Path
-  const figures = yield* platformFigures
+  const figures = yield* getTheme(options)
   const currentPath = yield* resolveCurrentPath(state.path, options)
   const selectedPath = state.files[state.cursor]
   const resolvedPath = selectedPath === undefined ? currentPath : path.resolve(currentPath, selectedPath)
-  const resolvedPathMsg = Ansi.annotate(figures.pointerSmall + " " + resolvedPath, Ansi.blackBright)
+  const resolvedPathMsg = Ansi.annotate(separateSymbol(figures.pointerSmall, resolvedPath), figures.mutedColor)
 
   if (showConfirmation(state.confirm)) {
-    const leadingSymbol = Ansi.annotate(options.prefix, Ansi.cyanBright)
-    const trailingSymbol = Ansi.annotate(figures.pointerSmall, Ansi.blackBright)
-    const confirm = Ansi.annotate("(Y/n)", Ansi.blackBright)
+    const leadingSymbol = annotateSymbol(figures.prefix, figures.primaryColor)
+    const trailingSymbol = annotateSymbol(figures.pointerSmall, figures.mutedColor)
+    const confirm = Ansi.annotate("(Y/n)", figures.mutedColor)
     const promptMsg = renderPrompt(confirm, CONFIRM_MESSAGE, leadingSymbol, trailingSymbol)
     return Ansi.cursorHide + promptMsg + "\n" + resolvedPathMsg
   }
-  const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-  const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
-  const promptMsg = renderPrompt(renderFileFilter(state), options.message, leadingSymbol, trailingSymbol)
+  const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+  const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
+  const promptMsg = renderPrompt(renderFileFilter(state, figures), options.message, leadingSymbol, trailingSymbol)
   const files = renderFiles(state, state.files, figures, options)
   return Ansi.cursorHide + promptMsg + "\n" + resolvedPathMsg + "\n" + files
 })
 
 const renderFileSubmission = Effect.fnUntraced(function*(state: FileState, value: string, options: FileOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-  const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
-  const promptMsg = renderPrompt(renderFileFilter(state), options.message, leadingSymbol, trailingSymbol)
-  return promptMsg + " " + Ansi.annotate(value, Ansi.white) + "\n"
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+  const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
+  const promptMsg = renderPrompt(renderFileFilter(state, figures), options.message, leadingSymbol, trailingSymbol)
+  return promptMsg + " " + Ansi.annotate(value, figures.submittedColor) + "\n"
 })
 
 const handleFileRender = (options: FileOptionsReq) => {
@@ -2512,7 +2598,7 @@ const processSelection = Effect.fnUntraced(function*(state: FileState, options:
         ? Action.Submit({ value: resolvedPath })
         // Directory has contents - show confirmation to user
         : Action.NextFrame({
-          state: { ...state, confirm: Confirm.Show() }
+          state: { ...state, confirm: FileConfirm.Show() }
         })
     }
     return Action.NextFrame({
@@ -2522,7 +2608,7 @@ const processSelection = Effect.fnUntraced(function*(state: FileState, options:
         allFiles: files,
         query: "",
         path: Option.some(resolvedPath),
-        confirm: Confirm.Hide()
+        confirm: FileConfirm.Hide()
       }
     })
   }
@@ -2531,21 +2617,32 @@ const processSelection = Effect.fnUntraced(function*(state: FileState, options:
 
 const handleFileProcess = (options: FileOptionsReq) => {
   return Effect.fnUntraced(function*(input: Terminal.UserInput, state: FileState) {
+    // Navigation is bound to ctrl chords rather than bare `j`/`k`, so that every
+    // printable character reaches the filter input.
     if (input.key.ctrl) {
-      if (input.key.name === "u") {
-        if (showConfirmation(state.confirm)) {
+      switch (input.key.name) {
+        case "u": {
+          if (showConfirmation(state.confirm)) {
+            return Action.Beep()
+          }
+          return yield* processFileClear(state)
+        }
+        case "p":
+        case "k": {
+          return yield* processFileCursorUp(state)
+        }
+        case "n": {
+          return yield* processFileCursorDown(state)
+        }
+        default: {
           return Action.Beep()
         }
-        return yield* processFileClear(state)
       }
-      return Action.Beep()
     }
     switch (input.key.name) {
-      case "k":
       case "up": {
         return yield* processFileCursorUp(state)
       }
-      case "j":
       case "down":
       case "tab": {
         return yield* processFileCursorDown(state)
@@ -2575,7 +2672,7 @@ const handleFileProcess = (options: FileOptionsReq) => {
               allFiles: files,
               query: "",
               path: Option.some(resolvedPath),
-              confirm: Confirm.Hide()
+              confirm: FileConfirm.Hide()
             }
           })
         }
@@ -2602,7 +2699,7 @@ const handleFileProcess = (options: FileOptionsReq) => {
   })
 }
 
-interface SelectOptionsReq<A> extends Required<SelectOptions<A>> {}
+interface SelectOptionsReq<A> extends OptionsReq<SelectOptions<A>> {}
 interface MultiSelectOptionsReq extends MultiSelectOptions {}
 
 type MultiSelectState = {
@@ -2614,6 +2711,7 @@ type MultiSelectState = {
 const renderMultiSelectError = (
   state: MultiSelectState,
   pointer: string,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined
 ): string => {
   if (Option.isSome(state.error)) {
@@ -2621,11 +2719,11 @@ const renderMultiSelectError = (
       onEmpty: () => "",
       onNonEmpty: (errorLines) => {
         if (renderOptions?.plain === true) {
-          return `${pointer} ${errorLines.join("\n")}`
+          return separateSymbol(pointer, errorLines.join("\n"))
         }
-        const prefix = Ansi.annotate(pointer, Ansi.red) + " "
-        const lines = Arr.map(errorLines, (str) => annotateErrorLine(str))
-        return Ansi.cursorSavePosition + "\n" + prefix + lines.join("\n") + Ansi.cursorRestorePosition
+        const prefix = annotateSymbol(pointer, theme.errorColor)
+        const lines = Arr.map(errorLines, (str) => annotateErrorLine(str, theme.errorColor))
+        return Ansi.cursorSavePosition + "\n" + separateSymbol(prefix, lines.join("\n")) + Ansi.cursorRestorePosition
       }
     })
   }
@@ -2635,12 +2733,14 @@ const renderMultiSelectError = (
 const renderChoiceDescription = <A>(
   choice: SelectChoice<A>,
   isActive: boolean,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
   if (!choice.disabled && choice.description && isActive) {
+    const text = theme.descriptionSeparator + choice.description
     return renderOptions?.plain === true
-      ? "- " + choice.description
-      : Ansi.annotate("- " + choice.description, Ansi.blackBright)
+      ? text
+      : Ansi.annotate(text, theme.mutedColor)
   }
   return ""
 }
@@ -2650,21 +2750,23 @@ const metaOptionsCount = 2
 const renderMultiSelectTitle = (
   title: string,
   isHighlighted: boolean,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
   if (renderOptions?.plain === true || !isHighlighted) {
     return title
   }
-  return Ansi.annotate(title, Ansi.combine(Ansi.underlined, Ansi.cyanBright))
+  return Ansi.annotate(title, Ansi.combine(Ansi.underlined, theme.primaryColor))
 }
 
 const renderMultiSelectChoices = <A>(
   state: MultiSelectState,
   options: SelectOptionsReq<A> & MultiSelectOptionsReq,
-  figures: Effect.Success<typeof platformFigures>,
+  figures: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
   const choices = options.choices
+  const checkboxWidth = Math.max(figures.checkboxOn.length, figures.checkboxOff.length)
   const selectableCount = choices.filter((choice) => !choice.disabled).length
   const selectedCount = Array.from(state.selectedIndices).filter((index) => !choices[index].disabled).length
   const allSelected = selectedCount === selectableCount
@@ -2685,28 +2787,32 @@ const renderMultiSelectChoices = <A>(
   for (let index = toDisplay.startIndex; index < toDisplay.endIndex; index++) {
     const choice = allChoices[index]
     const isHighlighted = state.index === index
-    let prefix = " "
-    if (index === toDisplay.startIndex && toDisplay.startIndex > 0) {
-      prefix = figures.arrowUp
-    } else if (index === toDisplay.endIndex - 1 && toDisplay.endIndex < allChoices.length) {
-      prefix = figures.arrowDown
-    }
+    const prefix = renderPagingPrefix(
+      figures,
+      index === toDisplay.startIndex && toDisplay.startIndex > 0,
+      index === toDisplay.endIndex - 1 && toDisplay.endIndex < allChoices.length
+    )
     if (index < metaOptions.length) {
       // Meta options
-      const title = renderMultiSelectTitle(choice.title, isHighlighted, renderOptions)
-      documents.push(prefix + " " + title)
+      const title = renderMultiSelectTitle(choice.title, isHighlighted, figures, renderOptions)
+      documents.push(prefix + (prefix.length === 0 ? "" : " ") + title)
     } else {
       // Regular choices
       const choiceIndex = index - metaOptions.length
       const isSelected = state.selectedIndices.has(choiceIndex)
       const checkbox = isSelected ? figures.checkboxOn : figures.checkboxOff
       const annotatedCheckbox = isHighlighted && renderOptions?.plain !== true
-        ? Ansi.annotate(checkbox, Ansi.cyanBright)
+        ? Ansi.annotate(checkbox, figures.primaryColor)
         : checkbox
       const selectChoice = choice as SelectChoice<A>
-      const title = renderChoiceTitle(selectChoice, isHighlighted, renderOptions)
-      const description = renderChoiceDescription(selectChoice, isHighlighted, renderOptions)
-      documents.push(prefix + " " + annotatedCheckbox + " " + title + " " + description)
+      const title = renderChoiceTitle(selectChoice, isHighlighted, figures, renderOptions)
+      const description = renderChoiceDescription(selectChoice, isHighlighted, figures, renderOptions)
+      const checkboxPrefix = checkboxWidth === 0
+        ? ""
+        : annotatedCheckbox + " ".repeat(checkboxWidth - checkbox.length + 1)
+      documents.push(
+        prefix + (prefix.length === 0 ? "" : " ") + checkboxPrefix + title + " " + description
+      )
     }
   }
   return documents.join("\n")
@@ -2714,27 +2820,27 @@ const renderMultiSelectChoices = <A>(
 
 const renderMultiSelectNextFrame = Effect.fnUntraced(
   function*<A>(state: MultiSelectState, options: SelectOptionsReq<A>) {
-    const figures = yield* platformFigures
+    const figures = yield* getTheme(options)
     const choices = renderMultiSelectChoices(state, options, figures)
-    const leadingSymbol = Ansi.annotate(options.prefix, Ansi.cyanBright)
-    const trailingSymbol = Ansi.annotate(figures.pointerSmall, Ansi.blackBright)
+    const leadingSymbol = annotateSymbol(figures.prefix, figures.primaryColor)
+    const trailingSymbol = annotateSymbol(figures.pointerSmall, figures.mutedColor)
     const promptMsg = renderSelectOutput(leadingSymbol, trailingSymbol, options)
-    const error = renderMultiSelectError(state, figures.pointer)
+    const error = renderMultiSelectError(state, figures.pointer, figures)
     return Ansi.cursorHide + promptMsg + "\n" + choices + error
   }
 )
 
 const renderMultiSelectSubmission = Effect.fnUntraced(
   function*<A>(state: MultiSelectState, options: SelectOptionsReq<A>) {
-    const figures = yield* platformFigures
+    const figures = yield* getTheme(options)
     const selectedChoices = Array.from(state.selectedIndices).sort(EffectNumber.Order).map((index) =>
       options.choices[index].title
     )
     const selectedText = selectedChoices.join(", ")
-    const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-    const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
+    const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+    const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
     const promptMsg = renderSelectOutput(leadingSymbol, trailingSymbol, options)
-    return promptMsg + " " + Ansi.annotate(selectedText, Ansi.white) + "\n"
+    return promptMsg + " " + Ansi.annotate(selectedText, figures.submittedColor) + "\n"
   }
 )
 
@@ -2790,11 +2896,11 @@ const handleMultiSelectClear = <A>(options: SelectOptionsReq<A>) =>
   Effect.fnUntraced(function*(state: MultiSelectState, _: Action<MultiSelectState, Array<A>>) {
     const terminal = yield* Terminal.Terminal
     const columns = yield* terminal.columns
-    const figures = yield* platformFigures
+    const figures = yield* getTheme(options)
     const clearPrompt = Ansi.eraseLine + Ansi.cursorLeft
-    const promptText = renderSelectOutput(options.prefix, figures.pointerSmall, options, { plain: true })
+    const promptText = renderSelectOutput(figures.prefix, figures.pointerSmall, options, { plain: true })
     const choicesText = renderMultiSelectChoices(state, options, figures, { plain: true })
-    const errorText = renderMultiSelectError(state, figures.pointer, { plain: true })
+    const errorText = renderMultiSelectError(state, figures.pointer, figures, { plain: true })
     const clearOutput = clearOutputWithError(`${promptText}\n${choicesText}`, columns, errorText)
     return clearOutput + clearPrompt
   })
@@ -2849,8 +2955,8 @@ const handleMultiSelectRender = <A>(options: SelectOptionsReq<A>) => {
   }
 }
 
-interface IntegerOptionsReq extends Required<IntegerOptions> {}
-interface FloatOptionsReq extends Required<FloatOptions> {}
+interface IntOptionsReq extends OptionsReq<IntOptions> {}
+interface NumberOptionsReq extends OptionsReq<NumberOptions> {}
 
 interface NumberState {
   readonly cursor: number
@@ -2858,14 +2964,16 @@ interface NumberState {
   readonly error: Option.Option<string>
 }
 
-const handleNumberClear = (options: IntegerOptionsReq) => {
+const handleNumberClear = (options: IntOptionsReq) => {
   return Effect.fnUntraced(function*(state: NumberState, _: Action<NumberState, number>) {
     const terminal = yield* Terminal.Terminal
     const columns = yield* terminal.columns
-    const figures = yield* platformFigures
+    const figures = yield* getTheme(options)
     const resetCurrentLine = Ansi.eraseLine + Ansi.cursorLeft
-    const errorText = renderNumberError(state, figures.pointerSmall, { plain: true })
-    const promptText = renderNumberOutput(state, options.prefix, figures.pointerSmall, options, { plain: true })
+    const errorText = renderNumberError(state, figures.pointerSmall, figures, { plain: true })
+    const promptText = renderNumberOutput(state, figures.prefix, figures.pointerSmall, options, figures, {
+      plain: true
+    })
     const clearOutput = clearOutputWithError(promptText, columns, errorText)
     return clearOutput + resetCurrentLine
   })
@@ -2874,6 +2982,7 @@ const handleNumberClear = (options: IntegerOptionsReq) => {
 const renderNumberInput = (
   state: NumberState,
   submitted: boolean,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined
 ): string => {
   const value = state.value === "" ? "" : `${state.value}`
@@ -2881,14 +2990,15 @@ const renderNumberInput = (
     return value
   }
   const annotation = Option.isSome(state.error) ?
-    Ansi.red :
-    Ansi.combine(Ansi.underlined, Ansi.cyanBright)
+    theme.errorColor :
+    Ansi.combine(Ansi.underlined, theme.primaryColor)
   return Ansi.annotate(value, annotation)
 }
 
 const renderNumberError = (
   state: NumberState,
   pointer: string,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
   if (Option.isSome(state.error)) {
@@ -2896,11 +3006,11 @@ const renderNumberError = (
       onEmpty: () => "",
       onNonEmpty: (errorLines) => {
         if (renderOptions?.plain === true) {
-          return `${pointer} ${errorLines.join("\n")}`
+          return separateSymbol(pointer, errorLines.join("\n"))
         }
-        const prefix = Ansi.annotate(pointer, Ansi.red) + " "
-        const lines = Arr.map(errorLines, (str) => annotateErrorLine(str))
-        return Ansi.cursorSavePosition + "\n" + prefix + lines.join("\n") + Ansi.cursorRestorePosition
+        const prefix = annotateSymbol(pointer, theme.errorColor)
+        const lines = Arr.map(errorLines, (str) => annotateErrorLine(str, theme.errorColor))
+        return Ansi.cursorSavePosition + "\n" + separateSymbol(prefix, lines.join("\n")) + Ansi.cursorRestorePosition
       }
     })
   }
@@ -2911,28 +3021,29 @@ const renderNumberOutput = (
   state: NumberState,
   leadingSymbol: string,
   trailingSymbol: string,
-  options: IntegerOptionsReq,
+  options: IntOptionsReq,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined,
   submitted: boolean = false
 ) => {
-  const value = renderNumberInput(state, submitted, renderOptions)
+  const value = renderNumberInput(state, submitted, theme, renderOptions)
   return renderPrompt(value, options.message, leadingSymbol, trailingSymbol, renderOptions)
 }
 
-const renderNumberNextFrame = Effect.fnUntraced(function*(state: NumberState, options: IntegerOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(options.prefix, Ansi.cyanBright)
-  const trailingSymbol = Ansi.annotate(figures.pointerSmall, Ansi.blackBright)
-  const errorMsg = renderNumberError(state, figures.pointerSmall)
-  const promptMsg = renderNumberOutput(state, leadingSymbol, trailingSymbol, options)
+const renderNumberNextFrame = Effect.fnUntraced(function*(state: NumberState, options: IntOptionsReq) {
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.prefix, figures.primaryColor)
+  const trailingSymbol = annotateSymbol(figures.pointerSmall, figures.mutedColor)
+  const errorMsg = renderNumberError(state, figures.pointerSmall, figures)
+  const promptMsg = renderNumberOutput(state, leadingSymbol, trailingSymbol, options, figures)
   return promptMsg + errorMsg
 })
 
-const renderNumberSubmission = Effect.fnUntraced(function*(nextState: NumberState, options: IntegerOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-  const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
-  const promptMsg = renderNumberOutput(nextState, leadingSymbol, trailingSymbol, options, undefined, true)
+const renderNumberSubmission = Effect.fnUntraced(function*(nextState: NumberState, options: IntOptionsReq) {
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+  const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
+  const promptMsg = renderNumberOutput(nextState, leadingSymbol, trailingSymbol, options, figures, undefined, true)
   return promptMsg + "\n"
 })
 
@@ -2958,8 +3069,8 @@ const defaultIntProcessor = (input: string, state: NumberState) => {
     }))
   }
 
-  const parsed = Number.parseInt(state.value + input)
-  if (Number.isNaN(parsed)) {
+  const parsed = globalThis.Number.parseInt(state.value + input)
+  if (globalThis.Number.isNaN(parsed)) {
     return Effect.succeed(Action.Beep())
   } else {
     return Effect.succeed(Action.NextFrame({
@@ -2978,8 +3089,8 @@ const defaultFloatProcessor = (input: string, state: NumberState) => {
     }))
   }
 
-  const parsed = Number.parseFloat(state.value + input)
-  if (Number.isNaN(parsed)) {
+  const parsed = globalThis.Number.parseFloat(state.value + input)
+  if (globalThis.Number.isNaN(parsed)) {
     return Effect.succeed(Action.Beep())
   } else {
     return Effect.succeed(Action.NextFrame({
@@ -2996,7 +3107,7 @@ const defaultFloatProcessor = (input: string, state: NumberState) => {
   }
 }
 
-const handleRenderInteger = (options: IntegerOptionsReq) => {
+const handleRenderInteger = (options: IntOptionsReq) => {
   return (state: NumberState, action: Action<NumberState, number>) => {
     return Action.$match(action, {
       Beep: () => Effect.succeed(renderBeep),
@@ -3006,7 +3117,7 @@ const handleRenderInteger = (options: IntegerOptionsReq) => {
   }
 }
 
-const handleProcessInteger = (options: IntegerOptionsReq) => {
+const handleProcessInteger = (options: IntOptionsReq) => {
   return (input: Terminal.UserInput, state: NumberState) => {
     if (input.key.ctrl && input.key.name === "u") {
       return processNumberClear(state)
@@ -3022,7 +3133,7 @@ const handleProcessInteger = (options: IntegerOptionsReq) => {
             ...state,
             value: state.value === "" || state.value === "-"
               ? `${options.incrementBy}`
-              : `${Number.parseInt(state.value) + options.incrementBy}`,
+              : `${globalThis.Number.parseInt(state.value) + options.incrementBy}`,
             error: Option.none()
           }
         }))
@@ -3034,15 +3145,15 @@ const handleProcessInteger = (options: IntegerOptionsReq) => {
             ...state,
             value: state.value === "" || state.value === "-"
               ? `-${options.decrementBy}`
-              : `${Number.parseInt(state.value) - options.decrementBy}`,
+              : `${globalThis.Number.parseInt(state.value) - options.decrementBy}`,
             error: Option.none()
           }
         }))
       }
       case "enter":
       case "return": {
-        const parsed = Number.parseInt(state.value)
-        if (Number.isNaN(parsed)) {
+        const parsed = globalThis.Number.parseInt(state.value)
+        if (globalThis.Number.isNaN(parsed)) {
           return Effect.succeed(Action.NextFrame({
             state: {
               ...state,
@@ -3069,7 +3180,7 @@ const handleProcessInteger = (options: IntegerOptionsReq) => {
   }
 }
 
-const handleRenderFloat = (options: FloatOptionsReq) => {
+const handleRenderFloat = (options: NumberOptionsReq) => {
   return (state: NumberState, action: Action<NumberState, number>) => {
     return Action.$match(action, {
       Beep: () => Effect.succeed(renderBeep),
@@ -3079,7 +3190,7 @@ const handleRenderFloat = (options: FloatOptionsReq) => {
   }
 }
 
-const handleProcessFloat = (options: FloatOptionsReq) => {
+const handleProcessFloat = (options: NumberOptionsReq) => {
   return (input: Terminal.UserInput, state: NumberState) => {
     if (input.key.ctrl && input.key.name === "u") {
       return processNumberClear(state)
@@ -3095,7 +3206,7 @@ const handleProcessFloat = (options: FloatOptionsReq) => {
             ...state,
             value: state.value === "" || state.value === "-"
               ? `${options.incrementBy}`
-              : `${Number.parseFloat(state.value) + options.incrementBy}`,
+              : `${globalThis.Number.parseFloat(state.value) + options.incrementBy}`,
             error: Option.none()
           }
         }))
@@ -3107,15 +3218,15 @@ const handleProcessFloat = (options: FloatOptionsReq) => {
             ...state,
             value: state.value === "" || state.value === "-"
               ? `-${options.decrementBy}`
-              : `${Number.parseFloat(state.value) - options.decrementBy}`,
+              : `${globalThis.Number.parseFloat(state.value) - options.decrementBy}`,
             error: Option.none()
           }
         }))
       }
       case "enter":
       case "return": {
-        const parsed = Number.parseFloat(state.value)
-        if (Number.isNaN(parsed)) {
+        const parsed = globalThis.Number.parseFloat(state.value)
+        if (globalThis.Number.isNaN(parsed)) {
           return Effect.succeed(Action.NextFrame({
             state: {
               ...state,
@@ -3154,8 +3265,8 @@ type AutoCompleteState = {
   readonly filtered: ReadonlyArray<number>
 }
 
-interface SelectOptionsReq<A> extends Required<SelectOptions<A>> {}
-interface AutoCompleteOptionsReq<A> extends Required<AutoCompleteOptions<A>> {}
+interface SelectOptionsReq<A> extends OptionsReq<SelectOptions<A>> {}
+interface AutoCompleteOptionsReq<A> extends OptionsReq<AutoCompleteOptions<A>> {}
 
 const filterAutoCompleteChoices = <A>(choices: ReadonlyArray<SelectChoice<A>>, query: string) => {
   const normalizedQuery = query.toLowerCase()
@@ -3196,15 +3307,16 @@ const renderSelectOutput = <A>(
 const renderAutoCompleteFilter = <A>(
   state: AutoCompleteState,
   options: AutoCompleteOptionsReq<A>,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
   const filterValue = state.query.length === 0
     ? renderOptions?.plain === true
       ? options.filterPlaceholder
-      : Ansi.annotate(options.filterPlaceholder, Ansi.blackBright)
+      : Ansi.annotate(options.filterPlaceholder, theme.mutedColor)
     : renderOptions?.plain === true
     ? state.query
-    : Ansi.annotate(state.query, Ansi.combine(Ansi.underlined, Ansi.cyanBright))
+    : Ansi.annotate(state.query, Ansi.combine(Ansi.underlined, theme.primaryColor))
   return `[${options.filterLabel}: ${filterValue}]`
 }
 
@@ -3213,9 +3325,10 @@ const renderAutoCompleteOutput = <A>(
   leadingSymbol: string,
   trailingSymbol: string,
   options: AutoCompleteOptionsReq<A>,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
-  const filter = renderAutoCompleteFilter(state, options, renderOptions)
+  const filter = renderAutoCompleteFilter(state, options, theme, renderOptions)
   return renderPrompt(filter, options.message, leadingSymbol, trailingSymbol, renderOptions)
 }
 
@@ -3224,29 +3337,28 @@ const renderChoicePrefix = <A>(
   choices: SelectOptionsReq<A>["choices"],
   toDisplay: { readonly startIndex: number; readonly endIndex: number },
   currentIndex: number,
-  figures: Effect.Success<typeof platformFigures>,
+  figures: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
-  let prefix = " "
-  if (currentIndex === toDisplay.startIndex && toDisplay.startIndex > 0) {
-    prefix = figures.arrowUp
-  } else if (currentIndex === toDisplay.endIndex - 1 && toDisplay.endIndex < choices.length) {
-    prefix = figures.arrowDown
-  }
+  const prefix = renderPagingPrefix(
+    figures,
+    currentIndex === toDisplay.startIndex && toDisplay.startIndex > 0,
+    currentIndex === toDisplay.endIndex - 1 && toDisplay.endIndex < choices.length
+  )
   if (renderOptions?.plain === true) {
     return state === currentIndex
       ? figures.pointer + prefix
-      : prefix + " "
+      : prefix + " ".repeat(figures.pointer.length)
   }
   if (choices[currentIndex].disabled) {
-    const annotation = Ansi.combine(Ansi.bold, Ansi.blackBright)
+    const annotation = Ansi.combine(Ansi.bold, figures.mutedColor)
     return state === currentIndex
-      ? Ansi.annotate(figures.pointer, annotation) + prefix
-      : prefix + " "
+      ? annotateSymbol(figures.pointer, annotation) + prefix
+      : prefix + " ".repeat(figures.pointer.length)
   }
   return state === currentIndex
-    ? Ansi.annotate(figures.pointer, Ansi.cyanBright) + prefix
-    : prefix + " "
+    ? annotateSymbol(figures.pointer, figures.primaryColor) + prefix
+    : prefix + " ".repeat(figures.pointer.length)
 }
 
 const renderAutoCompleteChoicePrefix = <A>(
@@ -3254,36 +3366,36 @@ const renderAutoCompleteChoicePrefix = <A>(
   options: AutoCompleteOptionsReq<A>,
   toDisplay: { readonly startIndex: number; readonly endIndex: number },
   currentIndex: number,
-  figures: Effect.Success<typeof platformFigures>,
+  figures: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
-  let prefix = " "
-  if (currentIndex === toDisplay.startIndex && toDisplay.startIndex > 0) {
-    prefix = figures.arrowUp
-  } else if (currentIndex === toDisplay.endIndex - 1 && toDisplay.endIndex < state.filtered.length) {
-    prefix = figures.arrowDown
-  }
+  const prefix = renderPagingPrefix(
+    figures,
+    currentIndex === toDisplay.startIndex && toDisplay.startIndex > 0,
+    currentIndex === toDisplay.endIndex - 1 && toDisplay.endIndex < state.filtered.length
+  )
   const choiceIndex = state.filtered[currentIndex]
   if (renderOptions?.plain === true) {
     return state.index === choiceIndex
       ? figures.pointer + prefix
-      : prefix + " "
+      : prefix + " ".repeat(figures.pointer.length)
   }
   const choice = options.choices[choiceIndex]
   if (choice.disabled) {
-    const annotation = Ansi.combine(Ansi.bold, Ansi.blackBright)
+    const annotation = Ansi.combine(Ansi.bold, figures.mutedColor)
     return state.index === choiceIndex
-      ? Ansi.annotate(figures.pointer, annotation) + prefix
-      : prefix + " "
+      ? annotateSymbol(figures.pointer, annotation) + prefix
+      : prefix + " ".repeat(figures.pointer.length)
   }
   return state.index === choiceIndex
-    ? Ansi.annotate(figures.pointer, Ansi.cyanBright) + prefix
-    : prefix + " "
+    ? annotateSymbol(figures.pointer, figures.primaryColor) + prefix
+    : prefix + " ".repeat(figures.pointer.length)
 }
 
 const renderChoiceTitle = <A>(
   choice: SelectChoice<A>,
   isSelected: boolean,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
   if (renderOptions?.plain === true) {
@@ -3292,18 +3404,18 @@ const renderChoiceTitle = <A>(
   const title = choice.title
   if (isSelected) {
     return choice.disabled
-      ? Ansi.annotate(title, Ansi.combine(Ansi.underlined, Ansi.blackBright))
-      : Ansi.annotate(title, Ansi.combine(Ansi.underlined, Ansi.cyanBright))
+      ? Ansi.annotate(title, Ansi.combine(Ansi.underlined, theme.mutedColor))
+      : Ansi.annotate(title, Ansi.combine(Ansi.underlined, theme.primaryColor))
   }
   return choice.disabled
-    ? Ansi.annotate(title, Ansi.combine(Ansi.strikethrough, Ansi.blackBright))
+    ? Ansi.annotate(title, Ansi.combine(Ansi.strikethrough, theme.mutedColor))
     : title
 }
 
 const renderSelectChoices = <A>(
   state: SelectState,
   options: SelectOptionsReq<A>,
-  figures: Effect.Success<typeof platformFigures>,
+  figures: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
   const choices = options.choices
@@ -3313,8 +3425,8 @@ const renderSelectChoices = <A>(
     const choice = choices[index]
     const isSelected = state === index
     const prefix = renderChoicePrefix(state, choices, toDisplay, index, figures, renderOptions)
-    const title = renderChoiceTitle(choice, isSelected, renderOptions)
-    const description = renderChoiceDescription(choice, isSelected, renderOptions)
+    const title = renderChoiceTitle(choice, isSelected, figures, renderOptions)
+    const description = renderChoiceDescription(choice, isSelected, figures, renderOptions)
     documents.push(prefix + title + " " + description)
   }
   return documents.join("\n")
@@ -3323,13 +3435,13 @@ const renderSelectChoices = <A>(
 const renderAutoCompleteChoices = <A>(
   state: AutoCompleteState,
   options: AutoCompleteOptionsReq<A>,
-  figures: Effect.Success<typeof platformFigures>,
+  figures: Theme,
   renderOptions?: RenderOptions | undefined
 ) => {
   if (state.filtered.length === 0) {
     return renderOptions?.plain === true
       ? options.emptyMessage
-      : Ansi.annotate(options.emptyMessage, Ansi.blackBright)
+      : Ansi.annotate(options.emptyMessage, figures.mutedColor)
   }
   const cursor = autoCompleteCursor(state)
   const toDisplay = entriesToDisplay(cursor, state.filtered.length, options.maxPerPage)
@@ -3339,18 +3451,18 @@ const renderAutoCompleteChoices = <A>(
     const choice = options.choices[choiceIndex]
     const isSelected = state.index === choiceIndex
     const prefix = renderAutoCompleteChoicePrefix(state, options, toDisplay, index, figures, renderOptions)
-    const title = renderChoiceTitle(choice, isSelected, renderOptions)
-    const description = renderChoiceDescription(choice, isSelected, renderOptions)
+    const title = renderChoiceTitle(choice, isSelected, figures, renderOptions)
+    const description = renderChoiceDescription(choice, isSelected, figures, renderOptions)
     documents.push(prefix + title + " " + description)
   }
   return documents.join("\n")
 }
 
 const renderSelectNextFrame = Effect.fnUntraced(function*<A>(state: SelectState, options: SelectOptionsReq<A>) {
-  const figures = yield* platformFigures
+  const figures = yield* getTheme(options)
   const choices = renderSelectChoices(state, options, figures)
-  const leadingSymbol = Ansi.annotate(options.prefix, Ansi.cyanBright)
-  const trailingSymbol = Ansi.annotate(figures.pointerSmall, Ansi.blackBright)
+  const leadingSymbol = annotateSymbol(figures.prefix, figures.primaryColor)
+  const trailingSymbol = annotateSymbol(figures.pointerSmall, figures.mutedColor)
   const promptMsg = renderSelectOutput(leadingSymbol, trailingSymbol, options)
   return Ansi.cursorHide + promptMsg + "\n" + choices
 })
@@ -3359,33 +3471,33 @@ const renderAutoCompleteNextFrame = Effect.fnUntraced(function*<A>(
   state: AutoCompleteState,
   options: AutoCompleteOptionsReq<A>
 ) {
-  const figures = yield* platformFigures
+  const figures = yield* getTheme(options)
   const choices = renderAutoCompleteChoices(state, options, figures)
-  const leadingSymbol = Ansi.annotate(options.prefix, Ansi.cyanBright)
-  const trailingSymbol = Ansi.annotate(figures.pointerSmall, Ansi.blackBright)
-  const promptMsg = renderAutoCompleteOutput(state, leadingSymbol, trailingSymbol, options)
+  const leadingSymbol = annotateSymbol(figures.prefix, figures.primaryColor)
+  const trailingSymbol = annotateSymbol(figures.pointerSmall, figures.mutedColor)
+  const promptMsg = renderAutoCompleteOutput(state, leadingSymbol, trailingSymbol, options, figures)
   return Ansi.cursorHide + promptMsg + "\n" + choices
 })
 
 const renderSelectSubmission = Effect.fnUntraced(function*<A>(state: SelectState, options: SelectOptionsReq<A>) {
-  const figures = yield* platformFigures
+  const figures = yield* getTheme(options)
   const selected = options.choices[state].title
-  const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-  const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
+  const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+  const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
   const promptMsg = renderSelectOutput(leadingSymbol, trailingSymbol, options)
-  return promptMsg + " " + Ansi.annotate(selected, Ansi.white) + "\n"
+  return promptMsg + " " + Ansi.annotate(selected, figures.submittedColor) + "\n"
 })
 
 const renderAutoCompleteSubmission = Effect.fnUntraced(function*<A>(
   state: AutoCompleteState,
   options: AutoCompleteOptionsReq<A>
 ) {
-  const figures = yield* platformFigures
+  const figures = yield* getTheme(options)
   const selected = options.choices[state.index].title
-  const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-  const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
-  const promptMsg = renderAutoCompleteOutput(state, leadingSymbol, trailingSymbol, options)
-  return promptMsg + " " + Ansi.annotate(selected, Ansi.white) + "\n"
+  const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+  const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
+  const promptMsg = renderAutoCompleteOutput(state, leadingSymbol, trailingSymbol, options, figures)
+  return promptMsg + " " + Ansi.annotate(selected, figures.submittedColor) + "\n"
 })
 
 const processSelectCursorUp = <A>(state: SelectState, choices: SelectOptionsReq<A>["choices"]) => {
@@ -3469,9 +3581,9 @@ const handleSelectClear = <A>(options: SelectOptionsReq<A>) =>
   Effect.fnUntraced(function*(state: SelectState, _: Action<SelectState, A>) {
     const terminal = yield* Terminal.Terminal
     const columns = yield* terminal.columns
-    const figures = yield* platformFigures
+    const figures = yield* getTheme(options)
     const clearPrompt = Ansi.eraseLine + Ansi.cursorLeft
-    const promptText = renderSelectOutput(options.prefix, figures.pointerSmall, options, { plain: true })
+    const promptText = renderSelectOutput(figures.prefix, figures.pointerSmall, options, { plain: true })
     const choicesText = renderSelectChoices(state, options, figures, { plain: true })
     const clearOutput = eraseText(`${promptText}\n${choicesText}`, columns)
     return clearOutput + clearPrompt
@@ -3481,9 +3593,16 @@ const handleAutoCompleteClear = <A>(options: AutoCompleteOptionsReq<A>) =>
   Effect.fnUntraced(function*(state: AutoCompleteState, _: Action<AutoCompleteState, A>) {
     const terminal = yield* Terminal.Terminal
     const columns = yield* terminal.columns
-    const figures = yield* platformFigures
+    const figures = yield* getTheme(options)
     const clearPrompt = Ansi.eraseLine + Ansi.cursorLeft
-    const promptText = renderAutoCompleteOutput(state, options.prefix, figures.pointerSmall, options, { plain: true })
+    const promptText = renderAutoCompleteOutput(
+      state,
+      figures.prefix,
+      figures.pointerSmall,
+      options,
+      figures,
+      { plain: true }
+    )
     const choicesText = renderAutoCompleteChoices(state, options, figures, { plain: true })
     const clearOutput = eraseText(`${promptText}\n${choicesText}`, columns)
     return clearOutput + clearPrompt
@@ -3520,18 +3639,29 @@ const handleSelectProcess = <A>(options: SelectOptionsReq<A>) => {
 
 const handleAutoCompleteProcess = <A>(options: AutoCompleteOptionsReq<A>) => {
   return (input: Terminal.UserInput, state: AutoCompleteState) => {
+    // Navigation is bound to ctrl chords rather than bare `j`/`k`, so that every
+    // printable character reaches the filter input.
     if (input.key.ctrl) {
-      if (input.key.name === "u") {
-        return processAutoCompleteClear(state, options)
+      switch (input.key.name) {
+        case "u": {
+          return processAutoCompleteClear(state, options)
+        }
+        case "p":
+        case "k": {
+          return processAutoCompleteCursorUp(state)
+        }
+        case "n": {
+          return processAutoCompleteCursorDown(state)
+        }
+        default: {
+          return Effect.succeed(Action.Beep())
+        }
       }
-      return Effect.succeed(Action.Beep())
     }
     switch (input.key.name) {
-      case "k":
       case "up": {
         return processAutoCompleteCursorUp(state)
       }
-      case "j":
       case "down": {
         return processAutoCompleteCursorDown(state)
       }
@@ -3559,7 +3689,7 @@ const handleAutoCompleteProcess = <A>(options: AutoCompleteOptionsReq<A>) => {
   }
 }
 
-interface TextOptionsReq extends Required<TextOptions> {
+interface TextOptionsReq extends OptionsReq<TextOptions> {
   /**
    * The type of the text option.
    */
@@ -3575,11 +3705,11 @@ interface TextState {
 const renderClearScreen = Effect.fnUntraced(function*(state: TextState, options: TextOptionsReq) {
   const terminal = yield* Terminal.Terminal
   const columns = yield* terminal.columns
-  const figures = yield* platformFigures
+  const figures = yield* getTheme(options)
   const resetCurrentLine = Ansi.eraseLine + Ansi.cursorLeft
-  const errorText = renderTextError(state, figures.pointerSmall, { plain: true })
+  const errorText = renderTextError(state, figures.pointerSmall, figures, { plain: true })
   const clearOutput = clearOutputWithError(
-    renderTextOutput(state, options.prefix, figures.pointerSmall, options, { plain: true }),
+    renderTextOutput(state, figures.prefix, figures.pointerSmall, options, figures, { plain: true }),
     columns,
     errorText
   )
@@ -3589,6 +3719,7 @@ const renderClearScreen = Effect.fnUntraced(function*(state: TextState, options:
 const renderTextInput = (
   nextState: TextState,
   options: TextOptionsReq,
+  theme: Theme,
   submitted: boolean,
   renderOptions?: RenderOptions | undefined
 ) => {
@@ -3599,7 +3730,7 @@ const renderTextInput = (
         return ""
       }
       case "password": {
-        return "*".repeat(text.length)
+        return theme.passwordMask.repeat(text.length)
       }
       case "text": {
         return text
@@ -3607,20 +3738,24 @@ const renderTextInput = (
     }
   }
 
+  if (text.length === 0) {
+    // Avoid wrapping an empty value in ANSI codes, which would make renderPrompt
+    // add spacing for content that occupies no terminal columns.
+    return ""
+  }
+
   const annotation = Option.isSome(nextState.error) ?
-    Ansi.red
+    theme.errorColor
     : submitted ?
-    Ansi.white
-    : nextState.value.length === 0 ?
-    Ansi.blackBright
-    : Ansi.combine(Ansi.underlined, Ansi.cyanBright)
+    theme.submittedColor
+    : Ansi.combine(Ansi.underlined, theme.primaryColor)
 
   switch (options.type) {
     case "hidden": {
       return ""
     }
     case "password": {
-      return Ansi.annotate("*".repeat(text.length), annotation)
+      return annotateSymbol(theme.passwordMask.repeat(text.length), annotation)
     }
     case "text": {
       return Ansi.annotate(text, annotation)
@@ -3631,6 +3766,7 @@ const renderTextInput = (
 const renderTextError = (
   nextState: TextState,
   pointer: string,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined
 ): string => {
   if (Option.isSome(nextState.error)) {
@@ -3638,11 +3774,11 @@ const renderTextError = (
       onEmpty: () => "",
       onNonEmpty: (errorLines) => {
         if (renderOptions?.plain === true) {
-          return `${pointer} ${errorLines.join("\n")}`
+          return separateSymbol(pointer, errorLines.join("\n"))
         }
-        const prefix = Ansi.annotate(pointer, Ansi.red) + " "
-        const lines = Arr.map(errorLines, (str) => annotateErrorLine(str))
-        return Ansi.cursorSavePosition + "\n" + prefix + lines.join("\n") + Ansi.cursorRestorePosition
+        const prefix = annotateSymbol(pointer, theme.errorColor)
+        const lines = Arr.map(errorLines, (str) => annotateErrorLine(str, theme.errorColor))
+        return Ansi.cursorSavePosition + "\n" + separateSymbol(prefix, lines.join("\n")) + Ansi.cursorRestorePosition
       }
     })
   }
@@ -3654,28 +3790,30 @@ const renderTextOutput = (
   leadingSymbol: string,
   trailingSymbol: string,
   options: TextOptionsReq,
+  theme: Theme,
   renderOptions?: RenderOptions | undefined,
   submitted: boolean = false
 ) => {
-  const value = renderTextInput(nextState, options, submitted, renderOptions)
+  const value = renderTextInput(nextState, options, theme, submitted, renderOptions)
   return renderPrompt(value, options.message, leadingSymbol, trailingSymbol, renderOptions)
 }
 
 const renderTextNextFrame = Effect.fnUntraced(function*(state: TextState, options: TextOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(options.prefix, Ansi.cyanBright)
-  const trailingSymbol = Ansi.annotate(figures.pointerSmall, Ansi.blackBright)
-  const promptMsg = renderTextOutput(state, leadingSymbol, trailingSymbol, options)
-  const errorMsg = renderTextError(state, figures.pointerSmall)
-  const offset = state.cursor - state.value.length
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.prefix, figures.primaryColor)
+  const trailingSymbol = annotateSymbol(figures.pointerSmall, figures.mutedColor)
+  const promptMsg = renderTextOutput(state, leadingSymbol, trailingSymbol, options, figures)
+  const errorMsg = renderTextError(state, figures.pointerSmall, figures)
+  const cursorWidth = options.type === "password" ? figures.passwordMask.length : 1
+  const offset = (state.cursor - state.value.length) * cursorWidth
   return promptMsg + errorMsg + Ansi.cursorMove(offset)
 })
 
 const renderTextSubmission = Effect.fnUntraced(function*(state: TextState, options: TextOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-  const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
-  const promptMsg = renderTextOutput(state, leadingSymbol, trailingSymbol, options, undefined, true)
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+  const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
+  const promptMsg = renderTextOutput(state, leadingSymbol, trailingSymbol, options, figures, undefined, true)
   return promptMsg + "\n"
 })
 
@@ -3842,8 +3980,7 @@ const basePrompt = (
     default: "",
     type,
     validate: Effect.succeed,
-    ...options,
-    prefix: options.prefix ?? DEFAULT_PREFIX
+    ...options
   }
 
   const initialState: TextState = {
@@ -3851,24 +3988,24 @@ const basePrompt = (
     value: opts.default,
     error: Option.none()
   }
-  return custom(initialState, {
+  return Custom(initialState, {
     render: handleTextRender(opts),
     process: handleTextProcess(opts),
     clear: handleTextClear(opts)
   })
 }
 
-interface ToggleOptionsReq extends Required<ToggleOptions> {}
+interface ToggleOptionsReq extends OptionsReq<ToggleOptions> {}
 
 type ToggleState = boolean
 
 const handleToggleClear = Effect.fnUntraced(function*(options: ToggleOptionsReq) {
   const terminal = yield* Terminal.Terminal
   const columns = yield* terminal.columns
-  const figures = yield* platformFigures
+  const figures = yield* getTheme(options)
   const clearPrompt = Ansi.eraseLine + Ansi.cursorLeft
-  const toggleText = `${options.active} / ${options.inactive}`
-  const promptText = renderPrompt(toggleText, options.message, options.prefix, figures.pointerSmall, { plain: true })
+  const toggleText = options.active + " " + separateSymbol(figures.toggleSeparator, options.inactive)
+  const promptText = renderPrompt(toggleText, options.message, figures.prefix, figures.pointerSmall, { plain: true })
   const clearOutput = eraseText(promptText, columns)
   return clearOutput + clearPrompt
 })
@@ -3876,17 +4013,21 @@ const handleToggleClear = Effect.fnUntraced(function*(options: ToggleOptionsReq)
 const renderToggle = (
   value: boolean,
   options: ToggleOptionsReq,
+  theme: Theme,
   submitted: boolean = false
 ) => {
-  const separator = Ansi.annotate("/", Ansi.blackBright)
-  const selectedAnnotation = Ansi.combine(Ansi.underlined, submitted ? Ansi.white : Ansi.cyanBright)
+  const separator = annotateSymbol(theme.toggleSeparator, theme.mutedColor)
+  const selectedAnnotation = Ansi.combine(
+    Ansi.underlined,
+    submitted ? theme.submittedColor : theme.primaryColor
+  )
   const inactive = value
     ? options.inactive
     : Ansi.annotate(options.inactive, selectedAnnotation)
   const active = value
     ? Ansi.annotate(options.active, selectedAnnotation)
     : options.active
-  return active + " " + separator + " " + inactive
+  return active + " " + separateSymbol(separator, inactive)
 }
 
 const renderToggleOutput = (
@@ -3895,29 +4036,23 @@ const renderToggleOutput = (
   trailingSymbol: string,
   options: ToggleOptionsReq
 ) => {
-  const promptLines = options.message.split(NEWLINE_REGEXP)
-  const prefix = leadingSymbol + " "
-  if (Arr.isReadonlyArrayNonEmpty(promptLines)) {
-    const lines = Arr.map(promptLines, (line) => annotateLine(line))
-    return prefix + lines.join("\n") + " " + trailingSymbol + " " + toggle
-  }
-  return prefix + " " + trailingSymbol + " " + toggle
+  return renderPrompt(toggle, options.message, leadingSymbol, trailingSymbol)
 }
 
 const renderToggleNextFrame = Effect.fnUntraced(function*(state: ToggleState, options: ToggleOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(options.prefix, Ansi.cyanBright)
-  const trailingSymbol = Ansi.annotate(figures.pointerSmall, Ansi.blackBright)
-  const toggle = renderToggle(state, options)
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.prefix, figures.primaryColor)
+  const trailingSymbol = annotateSymbol(figures.pointerSmall, figures.mutedColor)
+  const toggle = renderToggle(state, options, figures)
   const promptMsg = renderToggleOutput(toggle, leadingSymbol, trailingSymbol, options)
   return Ansi.cursorHide + promptMsg
 })
 
 const renderToggleSubmission = Effect.fnUntraced(function*(value: boolean, options: ToggleOptionsReq) {
-  const figures = yield* platformFigures
-  const leadingSymbol = Ansi.annotate(figures.tick, Ansi.green)
-  const trailingSymbol = Ansi.annotate(figures.ellipsis, Ansi.blackBright)
-  const toggle = renderToggle(value, options, true)
+  const figures = yield* getTheme(options)
+  const leadingSymbol = annotateSymbol(figures.tick, figures.successColor)
+  const trailingSymbol = annotateSymbol(figures.ellipsis, figures.mutedColor)
+  const toggle = renderToggle(value, options, figures, true)
   const promptMsg = renderToggleOutput(toggle, leadingSymbol, trailingSymbol, options)
   return promptMsg + "\n"
 })