@shell-shock/plugin-prompts 0.2.1 → 0.2.3

package/dist/components/prompts-builtin.mjs

@@ -207,7 +207,7 @@ function BasePromptDeclarations() {
 					}),
 					createComponent(Spacing, {}),
 					createComponent(InterfaceMember, {
-						name: "maskSubmitted",
+						name: "maskCompleted",
 						optional: true,
 						type: "(input: string) => string",
 						doc: "A function that masks the value submitted by the user so that it can then be used in the console output or elsewhere without exposing sensitive information. If not provided, the prompt will use the same mask function for both input and submitted value masking."
@@ -254,6 +254,20 @@ function BasePromptDeclarations() {
 						type: "TValue"
 					}),
 					createIntrinsic("hbr", {}),
+					createComponent(ClassField, {
+						name: "isKeyPressed",
+						isPrivateMember: true,
+						type: "boolean",
+						children: code`false; `
+					}),
+					createIntrinsic("hbr", {}),
+					createComponent(ClassField, {
+						name: "isDirty",
+						isPrivateMember: true,
+						type: "boolean",
+						children: code`false; `
+					}),
+					createIntrinsic("hbr", {}),
 					createComponent(ClassField, {
 						name: "isClosed",
 						isPrivateMember: true,
@@ -381,7 +395,7 @@ function BasePromptDeclarations() {
 					}),
 					createIntrinsic("hbr", {}),
 					createComponent(ClassField, {
-						name: "maskSubmitted",
+						name: "maskCompleted",
 						"protected": true,
 						type: "(input: string) => string"
 					}),
@@ -432,14 +446,14 @@ function BasePromptDeclarations() {
             this.formatter = config.format.bind(this);
           }
 
-          if (config.maskSubmitted) {
-            this.maskSubmitted = config.maskSubmitted;
+          if (config.maskCompleted) {
+            this.maskCompleted = config.maskCompleted;
           }
           if (config.mask) {
             this.mask = config.mask;
           }
-          if (!this.maskSubmitted) {
-            this.maskSubmitted = this.mask;
+          if (!this.maskCompleted) {
+            this.maskCompleted = this.mask;
           }
 
           if (config.timeout !== undefined && !Number.isNaN(config.timeout)) {
@@ -462,7 +476,11 @@ function BasePromptDeclarations() {
             this.input.setRawMode(true);
           }
 
-          this.input.on("keypress", this.onKeypress.bind(this));
+          this.input.on("keypress", this.keypress.bind(this));
+        }
+
+        [Symbol.dispose]() {
+          this.close();
         } `,
 					createComponent(Spacing, {}),
 					createComponent(ClassPropertyGet, {
@@ -498,24 +516,42 @@ function BasePromptDeclarations() {
 						"protected": true,
 						name: "isPlaceholder",
 						type: "boolean",
-						children: code`return this.config.initialValue !== undefined && this.displayValue === this.formatter(this.initialValue); `
+						children: code`return (this.displayValue === this.formatter(this.parser(this.initialValue)) && !this.#isDirty) || !this.#isKeyPressed; `
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassPropertyGet, {
 						"protected": true,
 						name: "status",
 						type: "string",
-						children: code`return this.isCompleted ? "" : \` \\n    \${
+						children: code`return this.isSubmitted ? "" : \` \\n    \${
               colors.italic(
                 this.isError
                   ? colors.text.prompt.description.error(splitText(this.errorMessage, "3/4").join("\\n"))
-                  : this.description
-                    ? colors.text.prompt.description.active(splitText(this.description, "3/4").join("\\n"))
-                    : ""
+                  : this.isCancelled
+                    ? colors.text.prompt.description.cancelled(splitText("Input was cancelled by user", "3/4").join("\\n"))
+                    : this.description
+                      ? colors.text.prompt.description.active(splitText(this.description, "3/4").join("\\n"))
+                      : ""
               )
             }\`; `
 					}),
 					createComponent(Spacing, {}),
+					createComponent(ClassPropertyGet, {
+						doc: "A property to check if the cursor is at the start",
+						name: "isCursorAtStart",
+						"protected": true,
+						type: "boolean",
+						children: code`return this.cursor === 0 || (this.isPlaceholder && this.cursor === 1); `
+					}),
+					createComponent(Spacing, {}),
+					createComponent(ClassPropertyGet, {
+						doc: "A property to check if the cursor is at the end",
+						name: "isCursorAtEnd",
+						"protected": true,
+						type: "boolean",
+						children: code`return this.cursor === this.displayValue.length || (this.isPlaceholder && this.cursor === this.displayValue.length - 1); `
+					}),
+					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
 						doc: "A method to change the prompt value, which also updates the display value and fires a state update event. This method can be called by subclasses whenever the prompt value needs to be updated based on user input or other interactions.",
 						name: "changeValue",
@@ -524,7 +560,9 @@ function BasePromptDeclarations() {
 							name: "value",
 							type: "TValue"
 						}],
-						children: code`let updatedValue = value;
+						children: code`const previousValue = this.value;
+
+          let updatedValue = value;
           if (value === undefined || value === "") {
             updatedValue = this.initialValue;
           } else {
@@ -533,6 +571,12 @@ function BasePromptDeclarations() {
 
           this.displayValue = this.mask(this.formatter(updatedValue));
           this.#value = updatedValue;
+
+          if (!this.#isDirty && this.#value !== this.initialValue) {
+            this.#isDirty = true;
+          }
+
+          this.onChange(previousValue);
           setTimeout(() => {
             Promise.resolve(this.validate(updatedValue)).then(() => this.sync());
           }, 0);
@@ -552,7 +596,7 @@ function BasePromptDeclarations() {
             isCancelled: this.isCancelled,
             isCompleted: this.isCompleted
           });
-          this.invokeRender(); `
+          this.render(); `
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
@@ -563,26 +607,35 @@ function BasePromptDeclarations() {
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to handle keypress events and determine the corresponding action",
-						name: "onKeypress",
+						doc: "A method to render the prompt",
+						name: "onRender",
+						"protected": true,
+						returnType: "string",
+						children: code`return this.isPlaceholder
+            ? colors.text.prompt.input.disabled(this.displayValue)
+            : this.isError
+              ? colors.text.prompt.input.error(this.displayValue)
+              : this.isSubmitted
+                ? colors.text.prompt.input.submitted(this.maskCompleted(this.displayValue))
+                : this.isCancelled
+                  ? colors.text.prompt.input.cancelled(this.maskCompleted(this.displayValue))
+              : colors.bold(colors.text.prompt.input.active(this.displayValue)); `
+					}),
+					createComponent(Spacing, {}),
+					createComponent(ClassMethod, {
+						doc: "A method to handle changes in the prompt value",
+						name: "onChange",
 						"protected": true,
 						parameters: [{
-							name: "char",
-							type: "string"
-						}, {
-							name: "key",
-							type: "readline.Key"
+							name: "previousValue",
+							type: "TValue"
 						}],
-						children: code`if (this.#isClosed) {
-            return;
-          }
-
-          return this.keypress(char, key); `
+						children: code` // can be implemented by subclasses to handle value changes if needed, this method is called whenever the prompt value changes and receives the previous value as an argument for reference`
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to handle keypress events and determine the corresponding action",
-						name: "keypress",
+						doc: "A method to handle key press events and determine the corresponding action",
+						name: "onKeyPress",
 						"protected": true,
 						parameters: [{
 							name: "char",
@@ -592,11 +645,11 @@ function BasePromptDeclarations() {
 							type: "readline.Key"
 						}],
 						children: code`const action = this.getAction(key);
-            if (!action) {
-              this.bell();
-            } else if (typeof (this as any)[action] === "function") {
-              (this as any)[action](key);
-            } `
+          if (!action) {
+            this.bell();
+          } else if (typeof (this as any)[action] === "function") {
+            (this as any)[action](key);
+          } `
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
@@ -604,8 +657,12 @@ function BasePromptDeclarations() {
 						name: "close",
 						async: true,
 						"protected": true,
-						children: code`this.output.write(cursor.show);
-          this.input.removeListener("keypress", this.onKeypress);
+						children: code`if (this.#isClosed) {
+            return;
+          }
+
+          this.output.write(cursor.show);
+          this.input.removeListener("keypress", this.keypress);
 
           if (this.input.isTTY) {
             this.input.setRawMode(false);
@@ -636,7 +693,7 @@ function BasePromptDeclarations() {
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to route keypress events to specific prompt actions based on the key pressed. This method maps various key combinations and keys to corresponding actions that can be handled by the prompt, such as submitting, cancelling, navigating, etc.",
+						doc: "A method to route key press events to specific prompt actions based on the key pressed. This method maps various key combinations and keys to corresponding actions that can be handled by the prompt, such as submitting, cancelling, navigating, etc.",
 						name: "getAction",
 						"protected": true,
 						parameters: [{
@@ -675,6 +732,70 @@ function BasePromptDeclarations() {
           if (key.name === "left") action = "left";
 
           return action || false; `
+					}),
+					createComponent(Spacing, {}),
+					createComponent(ClassMethod, {
+						doc: "A method to move the cursor to the left or right by a \\`count\\` of positions",
+						name: "moveCursor",
+						parameters: [{
+							name: "count",
+							type: "number"
+						}],
+						"protected": true,
+						children: code`
+          this.cursor += count;
+          this.cursorOffset += count; `
+					}),
+					createComponent(Spacing, {}),
+					createComponent(ClassMethod, {
+						doc: "A method to delete the character backward of the cursor",
+						name: "delete",
+						"protected": true,
+						children: code`if (this.isCursorAtStart) {
+            return this.bell();
+          }
+
+          if (this.displayValue === "") {
+            return this.bell();
+          }
+
+          this.changeValue(\`\${
+            this.displayValue.slice(0, this.cursor - 1)
+          }\${
+            this.displayValue.slice(this.cursor)
+          }\`);
+
+          if (this.isCursorAtStart) {
+            this.cursorOffset = 0;
+          } else {
+            this.cursorOffset++;
+            this.moveCursor(-1);
+          }
+
+          this.sync(); `
+					}),
+					createComponent(Spacing, {}),
+					createComponent(ClassMethod, {
+						doc: "A method to delete the character forward of the cursor",
+						name: "deleteForward",
+						"protected": true,
+						children: code`if (this.cursor >= this.displayValue.length) {
+            return this.bell();
+          }
+
+          this.changeValue(\`\${
+            this.displayValue.slice(0, this.cursor)
+          }\${
+            this.displayValue.slice(this.cursor + 1)
+          }\`);
+
+          if (this.isCursorAtEnd) {
+            this.cursorOffset = 0;
+          } else {
+            this.cursorOffset++;
+          }
+
+          this.sync(); `
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
@@ -728,8 +849,8 @@ function BasePromptDeclarations() {
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
 						doc: "A method to render the prompt",
-						name: "invokeRender",
-						"protected": true,
+						name: "render",
+						"private": true,
 						get children() {
 							return code`if (this.#isClosed) {
             return;
@@ -764,7 +885,7 @@ function BasePromptDeclarations() {
                 : (process.platform === "win32" ? "»" : "›")
             )
           } \`;
-          this.consoleOutput += this.render();
+          this.consoleOutput += this.onRender();
 
           if (this.isInitial) {
             this.isInitial = false;
@@ -776,19 +897,25 @@ function BasePromptDeclarations() {
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to render the prompt",
-						name: "render",
-						"protected": true,
-						returnType: "string",
-						children: code`return this.isPlaceholder
-            ? colors.text.prompt.input.disabled(this.displayValue)
-            : this.isError
-              ? colors.text.prompt.input.error(this.displayValue)
-              : this.isSubmitted
-                ? colors.text.prompt.input.submitted(this.maskSubmitted(this.displayValue))
-                : this.isCancelled
-                  ? colors.text.prompt.input.cancelled(this.displayValue)
-              : colors.bold(colors.text.prompt.input.active(this.displayValue)); `
+						doc: "A method to handle key press events and determine the corresponding action",
+						name: "keypress",
+						"private": true,
+						parameters: [{
+							name: "char",
+							type: "string"
+						}, {
+							name: "key",
+							type: "readline.Key"
+						}],
+						children: code`if (this.#isClosed) {
+            return;
+          }
+
+          if (!this.#isKeyPressed) {
+            this.#isKeyPressed = true;
+          }
+
+          return this.onKeyPress(char, key); `
 					})
 				];
 			}
@@ -918,8 +1045,8 @@ function TextPromptDeclarations() {
         } `,
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to handle keypress events and determine the corresponding action",
-						name: "keypress",
+						doc: "A method to handle onKeyPress events and determine the corresponding action",
+						name: "onKeyPress",
 						override: true,
 						"protected": true,
 						parameters: [{
@@ -938,31 +1065,38 @@ function TextPromptDeclarations() {
             return this.bell();
           }
 
-          const value = \`\${this.value.slice(0, this.cursor)}\${char}\${this.value.slice(this.cursor)}\`;
-          this.#isInvalid = false;
-          this.cursor = this.isPlaceholder ? 0 : this.value.slice(0, this.cursor).length + 1;
+          const value = \`\${
+            this.value.slice(0, this.cursor)
+          }\${
+            char
+          }\${
+            this.value.slice(this.cursor)
+          }\`;
 
           this.changeValue(value);
           this.sync(); `
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to reset the prompt input",
-						name: "reset",
+						doc: "A method to handle changes in the prompt value",
+						name: "onChange",
 						override: true,
 						"protected": true,
+						parameters: [{
+							name: "previousValue",
+							type: "TValue"
+						}],
 						children: code`this.#isInvalid = false;
-          this.cursor = Number(!!this.initialValue);
-          super.reset(); `
+          this.cursor = this.displayValue.slice(0, this.cursor).length + 1; `
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to cancel the prompt input",
-						name: "cancel",
+						doc: "A method to reset the prompt input",
+						name: "reset",
 						override: true,
 						"protected": true,
-						children: code`this.#isInvalid = false;
-          super.cancel(); `
+						children: code`this.cursor = Number(!!this.initialValue);
+          super.reset(); `
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
@@ -979,73 +1113,8 @@ function TextPromptDeclarations() {
 						doc: "A method to move the cursor to the end of the input",
 						name: "next",
 						"protected": true,
-						children: code`if (!this.isPlaceholder) {
-            return this.bell();
-          }
-
-          this.changeValue(this.initialValue);
+						children: code`this.changeValue(this.initialValue);
           this.cursor = this.displayValue.length;
-          this.sync(); `
-					}),
-					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to move the cursor to the left or right by a \\`count\\` of positions",
-						name: "moveCursor",
-						parameters: [{
-							name: "count",
-							type: "number"
-						}],
-						"protected": true,
-						children: code`if (this.isPlaceholder) {
-            return;
-          }
-
-          this.cursor = this.cursor + count;
-          this.cursorOffset += count; `
-					}),
-					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to delete the character backward of the cursor",
-						name: "delete",
-						"protected": true,
-						children: code`if (this.isCursorAtStart()) {
-            return this.bell();
-          }
-
-          this.changeValue(\`\${this.value.slice(0, this.cursor - 1)}\${this.value.slice(this.cursor)}\`);
-          this.#isInvalid = false;
-
-          if (this.isCursorAtStart()) {
-            this.cursorOffset = 0
-          } else {
-            this.cursorOffset++;
-            this.moveCursor(-1);
-          }
-
-          this.sync(); `
-					}),
-					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to delete the character forward of the cursor",
-						name: "deleteForward",
-						"protected": true,
-						children: code`if (this.cursor >= this.displayValue.length || this.isPlaceholder) {
-            return this.bell();
-          }
-
-          this.changeValue(\`\${
-            this.value.slice(0, this.cursor)
-          }\${
-            this.value.slice(this.cursor + 1)
-          }\`);
-          this.#isInvalid = false;
-
-          if (this.isCursorAtEnd()) {
-            this.cursorOffset = 0;
-          } else {
-            this.cursorOffset++;
-          }
-
           this.sync(); `
 					}),
 					createComponent(Spacing, {}),
@@ -1069,7 +1138,7 @@ function TextPromptDeclarations() {
 						doc: "A method to move the cursor to the left",
 						name: "left",
 						"protected": true,
-						children: code`if (this.cursor <= 0 || this.isPlaceholder) {
+						children: code`if (this.cursor <= 0) {
             return this.bell();
           }
 
@@ -1081,7 +1150,7 @@ function TextPromptDeclarations() {
 						doc: "A method to move the cursor to the right",
 						name: "right",
 						"protected": true,
-						children: code`if (this.cursor >= this.displayValue.length || this.isPlaceholder) {
+						children: code`if (this.cursor >= this.displayValue.length) {
             return this.bell();
           }
 
@@ -1089,23 +1158,9 @@ function TextPromptDeclarations() {
           this.sync(); `
 					}),
 					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to check if the cursor is at the start",
-						name: "isCursorAtStart",
-						"protected": true,
-						children: code`return this.cursor === 0 || (this.isPlaceholder && this.cursor === 1); `
-					}),
-					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to check if the cursor is at the end",
-						name: "isCursorAtEnd",
-						"protected": true,
-						children: code`return this.cursor === this.displayValue.length || (this.isPlaceholder && this.cursor === this.displayValue.length + 1); `
-					}),
-					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
 						doc: "A method to render the prompt",
-						name: "render",
+						name: "onRender",
 						override: true,
 						"protected": true,
 						returnType: "string",
@@ -1174,7 +1229,7 @@ run(); ` }),
 
             prompt.on("state", state => config.onState?.(state));
             prompt.on("submit", value => response(value));
-            prompt.on("cancel", event => reject(CANCEL_SYMBOL));
+            prompt.on("cancel", event => response(CANCEL_SYMBOL));
           });`
 		})
 	];
@@ -1402,7 +1457,7 @@ function SelectPromptDeclarations() {
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to route keypress events to specific prompt actions based on the key pressed. This method maps various key combinations and keys to corresponding actions that can be handled by the prompt, such as submitting, cancelling, navigating, etc.",
+						doc: "A method to route key press events to specific prompt actions based on the key pressed. This method maps various key combinations and keys to corresponding actions that can be handled by the prompt, such as submitting, cancelling, navigating, etc.",
 						name: "getAction",
 						override: true,
 						"protected": true,
@@ -1457,6 +1512,7 @@ function SelectPromptDeclarations() {
 							name: "count",
 							type: "number"
 						}],
+						override: true,
 						"protected": true,
 						children: code`this.cursor = count;
 
@@ -1516,7 +1572,7 @@ function SelectPromptDeclarations() {
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
 						doc: "A method to render the prompt",
-						name: "render",
+						name: "onRender",
 						override: true,
 						"protected": true,
 						children: code`const spacing = Math.max(...this.options.map(option => option.label?.length || 0)) + 2;
@@ -1568,7 +1624,7 @@ function SelectPromptDeclarations() {
             }
           } else {
             this.displayValue = this.selectedOption?.label || String(this.value);
-            output += super.render();
+            output += super.onRender();
           }
 
           return output; `
@@ -1638,7 +1694,7 @@ run(); ` }),
 
             prompt.on("state", state => config.onState?.(state));
             prompt.on("submit", value => response(value));
-            prompt.on("cancel", event => reject(CANCEL_SYMBOL));
+            prompt.on("cancel", event => response(CANCEL_SYMBOL));
           });`
 		})
 	];
@@ -1755,20 +1811,6 @@ function NumericPromptDeclarations() {
 						type: "number",
 						children: code`Number.POSITIVE_INFINITY; `
 					}),
-					createIntrinsic("hbr", {}),
-					createComponent(ClassField, {
-						name: "currentInput",
-						"protected": true,
-						type: "string",
-						children: code`""; `
-					}),
-					createIntrinsic("hbr", {}),
-					createComponent(ClassField, {
-						name: "inputTimestamp",
-						"protected": true,
-						type: "number",
-						children: code`0; `
-					}),
 					createComponent(Spacing, {}),
 					code`constructor(config: NumberPromptConfig) {
           super(config);
@@ -1805,23 +1847,13 @@ function NumericPromptDeclarations() {
             this.validator = validator.bind(this);
           }
 
+          this.changeValue(this.initialValue);
           this.sync();
-          this.last();
         } `,
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to reset the prompt input",
-						name: "reset",
-						override: true,
-						"protected": true,
-						children: code`super.reset();
-          this.currentInput = "";
-          `
-					}),
-					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to handle keypress events and determine the corresponding action",
-						name: "keypress",
+						doc: "A method to handle key press events and determine the corresponding action",
+						name: "onKeyPress",
 						override: true,
 						"protected": true,
 						parameters: [{
@@ -1836,25 +1868,55 @@ function NumericPromptDeclarations() {
             return (this as any)[action]();
           }
 
-          if (char !== "-" && !(char === "." && this.isFloat) && !/[0-9]/.test(char)) {
+          if ((char !== "-" || (char === "-" && this.cursor !== 0)) && !(char === "." && this.isFloat) && !/[0-9]/.test(char)) {
             return this.bell();
           }
 
-          this.displayValue += char;
-          if ((char === "-" || char === ".") && this.displayValue.length === 1) {
-            return this.sync();
-          }
+          const displayValue = \`\${
+            this.displayValue.slice(0, this.cursor)
+          }\${
+            char
+          }\${
+            this.displayValue.slice(this.cursor)
+          }\`;
 
-          let value = Math.min(this.parser(this.displayValue), this.max);
-          if (value > this.max) {
-            value = this.max;
-          }
-          if (value < this.min) {
-            value = this.min;
+          let value = this.parser(displayValue);
+          if (!Number.isNaN(value)) {
+
+            value = Math.min(value, this.max);
+            if (value > this.max) {
+              value = this.max;
+            }
+            if (value < this.min) {
+              value = this.min;
+            }
           }
 
           this.changeValue(value);
           this.sync(); `
+					}),
+					createComponent(Spacing, {}),
+					createComponent(ClassMethod, {
+						doc: "A method to handle changes in the prompt value",
+						name: "onChange",
+						override: true,
+						"protected": true,
+						parameters: [{
+							name: "previousValue",
+							type: "TValue"
+						}],
+						children: code`this.#isInvalid = false;
+          this.cursor = this.displayValue.slice(0, this.cursor).length + 1; `
+					}),
+					createComponent(Spacing, {}),
+					createComponent(ClassMethod, {
+						doc: "A method to validate the prompt input",
+						name: "validate",
+						override: true,
+						async: true,
+						"protected": true,
+						children: code`await super.validate(this.value);
+          this.#isInvalid = this.isError; `
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
@@ -1899,7 +1961,7 @@ function NumericPromptDeclarations() {
 						doc: "A method to move the cursor to the left",
 						name: "left",
 						"protected": true,
-						children: code`if (this.cursor <= 0 || this.isPlaceholder) {
+						children: code`if (this.cursor <= 0) {
             return this.bell();
           }
 
@@ -1911,76 +1973,11 @@ function NumericPromptDeclarations() {
 						doc: "A method to move the cursor to the right",
 						name: "right",
 						"protected": true,
-						children: code`if (this.cursor >= this.displayValue.length || this.isPlaceholder) {
+						children: code`if (this.cursor >= this.displayValue.length) {
             return this.bell();
           }
 
           this.moveCursor(1);
-          this.sync(); `
-					}),
-					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to move the cursor to the left or right by a \\`count\\` of positions",
-						name: "moveCursor",
-						parameters: [{
-							name: "count",
-							type: "number"
-						}],
-						"protected": true,
-						children: code`if (this.isPlaceholder) {
-            return;
-          }
-
-          this.cursor = this.cursor + count;
-          this.cursorOffset += count; `
-					}),
-					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to delete the character backward of the cursor",
-						name: "delete",
-						"protected": true,
-						children: code`if (this.isCursorAtStart()) {
-            return this.bell();
-          }
-
-          if (this.displayValue === "") {
-            return this.bell();
-          }
-
-          this.changeValue(\`\${this.displayValue.slice(0, this.cursor - 1)}\${this.displayValue.slice(this.cursor)}\`);
-          this.#isInvalid = false;
-
-          if (this.isCursorAtStart()) {
-            this.cursorOffset = 0
-          } else {
-            this.cursorOffset++;
-            this.moveCursor(-1);
-          }
-
-          this.sync(); `
-					}),
-					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to delete the character forward of the cursor",
-						name: "deleteForward",
-						"protected": true,
-						children: code`if (this.cursor >= this.displayValue.length || this.isPlaceholder) {
-            return this.bell();
-          }
-
-          this.changeValue(\`\${
-            this.displayValue.slice(0, this.cursor)
-          }\${
-            this.displayValue.slice(this.cursor + 1)
-          }\`);
-          this.#isInvalid = false;
-
-          if (this.isCursorAtEnd()) {
-            this.cursorOffset = 0;
-          } else {
-            this.cursorOffset++;
-          }
-
           this.sync(); `
 					}),
 					createComponent(Spacing, {}),
@@ -2001,17 +1998,20 @@ function NumericPromptDeclarations() {
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to check if the cursor is at the start",
-						name: "isCursorAtStart",
-						"protected": true,
-						children: code`return this.cursor === 0 || (this.isPlaceholder && this.cursor === 1); `
-					}),
-					createComponent(Spacing, {}),
-					createComponent(ClassMethod, {
-						doc: "A method to check if the cursor is at the end",
-						name: "isCursorAtEnd",
+						doc: "A method to render the prompt",
+						name: "onRender",
+						override: true,
 						"protected": true,
-						children: code`return this.cursor === this.displayValue.length || (this.isPlaceholder && this.cursor === this.displayValue.length + 1); `
+						returnType: "string",
+						children: code`return this.isPlaceholder
+            ? colors.text.prompt.input.disabled(this.displayValue)
+            : this.#isInvalid
+              ? colors.text.prompt.input.error(this.displayValue)
+              : this.isSubmitted
+                ? colors.text.prompt.input.submitted(this.displayValue)
+                : this.isCancelled
+                  ? colors.text.prompt.input.cancelled(this.displayValue)
+              : colors.bold(colors.text.prompt.input.active(this.displayValue)); `
 					})
 				];
 			}
@@ -2067,7 +2067,7 @@ run(); ` }),
 
             prompt.on("state", state => config.onState?.(state));
             prompt.on("submit", value => response(value));
-            prompt.on("cancel", event => reject(CANCEL_SYMBOL));
+            prompt.on("cancel", event => response(CANCEL_SYMBOL));
           });`
 		})
 	];
@@ -2181,8 +2181,8 @@ function TogglePromptDeclarations() {
 					}),
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to handle keypress events and determine the corresponding action",
-						name: "keypress",
+						doc: "A method to handle key press events and determine the corresponding action",
+						name: "onKeyPress",
 						override: true,
 						"protected": true,
 						parameters: [{
@@ -2255,7 +2255,7 @@ function TogglePromptDeclarations() {
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
 						doc: "A method to render the prompt",
-						name: "render",
+						name: "onRender",
 						override: true,
 						"protected": true,
 						returnType: "string",
@@ -2321,7 +2321,7 @@ run(); ` }),
 
             prompt.on("state", state => config.onState?.(state));
             prompt.on("submit", value => response(value));
-            prompt.on("cancel", event => reject(CANCEL_SYMBOL));
+            prompt.on("cancel", event => response(CANCEL_SYMBOL));
           });`
 		})
 	];
@@ -2484,8 +2484,8 @@ function ConfirmPromptDeclarations() {
         } `,
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
-						doc: "A method to handle keypress events and determine the corresponding action",
-						name: "keypress",
+						doc: "A method to handle key press events and determine the corresponding action",
+						name: "onKeyPress",
 						override: true,
 						"protected": true,
 						parameters: [{
@@ -2515,7 +2515,7 @@ function ConfirmPromptDeclarations() {
 					createComponent(Spacing, {}),
 					createComponent(ClassMethod, {
 						doc: "A method to render the prompt",
-						name: "render",
+						name: "onRender",
 						override: true,
 						"protected": true,
 						returnType: "string",
@@ -2577,7 +2577,7 @@ run(); ` }),
 
             prompt.on("state", state => config.onState?.(state));
             prompt.on("submit", value => response(value));
-            prompt.on("cancel", event => reject(CANCEL_SYMBOL));
+            prompt.on("cancel", event => response(CANCEL_SYMBOL));
           }); `
 		})
 	];
@@ -2603,7 +2603,7 @@ function PasswordPromptDeclaration() {
 		createComponent(TypeDeclaration, {
 			name: "PasswordConfig",
 			"export": true,
-			children: code`Omit<TextConfig, "mask" | "maskSubmitted">; `
+			children: code`Omit<TextConfig, "mask" | "maskCompleted">; `
 		}),
 		createComponent(Spacing, {}),
 		createComponent(TSDoc, {
@@ -2647,7 +2647,7 @@ run(); ` }),
 			children: code`return text({
             ...config,
             mask: passwordMask,
-            maskSubmitted: () => "*******"
+            maskCompleted: () => "*******"
           });`
 		})
 	];