diff --git a/packages/tui/src/component/prompt/index.tsx b/packages/tui/src/component/prompt/index.tsx index dcad59b64d..f20daa2259 100644 --- a/packages/tui/src/component/prompt/index.tsx +++ b/packages/tui/src/component/prompt/index.tsx @@ -5,7 +5,6 @@ import { MouseEvent, PasteEvent, decodePasteBytes, - type ColorInput, type KeyEvent, } from "@opentui/core" import { createEffect, createMemo, onMount, createSignal, onCleanup, on, Show, Switch, Match, For } from "solid-js" @@ -13,6 +12,7 @@ import path from "path" import { useLocal } from "../../context/local" import { useTheme, useThemes } from "../../context/theme" import { tint } from "../../theme/color" +import { createAnimatable, tween } from "../../ui/animation" import { EmptyBorder, SplitBorder } from "../../ui/border" import { useTuiPaths, useTuiTerminalEnvironment } from "../../context/runtime" import { useClipboard } from "../../context/clipboard" @@ -110,14 +110,37 @@ function fadeColor(color: RGBA, alpha: number) { export function PromptInterruptStatus(props: { armed: boolean - text: ColorInput - subdued: ColorInput - warning: ColorInput + animations?: boolean + text: RGBA + subdued: RGBA + warning: RGBA + flash?: RGBA }) { + const ignition = createAnimatable( + { level: 0 }, + { enabled: () => props.animations ?? false, transition: tween({ duration: 0.22 }) }, + ) + createEffect( + on( + () => props.armed, + (armed) => { + if (!armed || !props.animations) return ignition.jump({ level: 0 }) + ignition.jump({ level: 0.75 }) + ignition.animate({ level: 0 }) + }, + { defer: true }, + ), + ) + const armedColor = createMemo(() => { + const level = ignition.value().level + if (level === 0 || !props.flash) return props.warning + return tint(props.warning, props.flash, level) + }) + return ( - + esc{" "} - + {props.armed ? "again to interrupt" : "interrupt"} @@ -1823,9 +1846,11 @@ export function Prompt(props: PromptProps) { 0} + animations={animationsEnabled()} text={theme.text.default} subdued={theme.text.subdued} warning={theme.text.feedback.warning.default} + flash={theme.decrease(theme.text.feedback.warning.default, 2)} />