cdd-cli 4.1.0 → 4.2.0

package/README.es.md

@@ -3,9 +3,6 @@
 <p align="center">
   <img src="https://img.shields.io/npm/v/cdd-cli?color=blue&label=npm%20package" alt="npm version"/>
   <img src="https://img.shields.io/npm/dt/cdd-cli?color=green&label=downloads" alt="npm downloads"/>
-  <a href="https://github.com/caertos/cdd/actions/workflows/ci.yml">
-    <img src="https://github.com/caertos/cdd/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI status" />
-  </a>
   <a href="https://deepwiki.com/Caertos/cdd"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a>
 </p>
 
@@ -13,20 +10,33 @@
 
 ---
 
-## 🎉 Novedades en v4.1
+## 🎉 Novedades en v4.2
 
-**Abrí un shell dentro de cualquier contenedor con una sola tecla.**
+**Campos de texto editables con cursor visible en el asistente de creación.**
 
-Presiona `S` y CDD te lleva a un shell interactivo completo (`bash` o `sh`) dentro del contenedor seleccionado — sin necesidad de escribir `docker exec`.
+Ahora los campos de texto del asistente se comportan como un campo de texto normal: un cursor que se ve, que se mueve con las flechas, que inserta y borra donde está.
 
-- **Shell auto-detectado** — CDD sondea el contenedor y elige `bash` o `sh` automáticamente
-- **Soporte de terminal completo** — ejecutá `psql`, `python3`, `node`, `redis-cli`, o cualquier comando dentro del contenedor
-- **Salida limpia** — escribí `exit` o presioná `Ctrl+D` para volver al dashboard
+- **Navegación con cursor** — `←` / `→` mueven el cursor dentro del campo
+- **Inicio / Fin** — saltan al principio o al final del texto
+- **Edición completa** — `Backspace` y `Delete` funcionan en cualquier posición
+- **Atajos de teclado** — `Ctrl+A/E/W/U/K` para edición rápida
+- **Pegado** — pegar texto lo inserta completo en la posición del cursor
+- **Acentos y emojis** — manejo correcto por punto de código
 
 ---
 
 ## Versiones anteriores
 
+### v4.1 — Shell interactivo
+
+**Abre un shell dentro de cualquier contenedor con una sola tecla.**
+
+Presiona `S` y CDD te lleva a un shell interactivo completo (`bash` o `sh`) dentro del contenedor seleccionado — sin necesidad de escribir `docker exec`.
+
+- **Shell auto-detectado** — CDD sondea el contenedor y elige `bash` o `sh` automáticamente
+- **Soporte de terminal completo** — ejecuta `psql`, `python3`, `node`, `redis-cli`, o cualquier comando dentro del contenedor
+- **Salida limpia** — escribe `exit` o presiona `Ctrl+D` para volver al dashboard
+
 ### v3.2 — Asistente de creación interactivo
 
 Olvídate de los flags de `docker run`, las variables de entorno olvidadas y los tags `:latest` que fallan en silencio. Presiona `C` y CDD te guía para crear un contenedor en segundos:
@@ -85,18 +95,18 @@ cdd
 
 Usa `↑` / `↓` para navegar por los contenedores. Atajos de teclado disponibles:
 
-| Tecla | Acción |
-|-------|--------|
-| `↑` / `↓` | Navegar la lista de contenedores |
-| `I` | Iniciar el contenedor seleccionado |
-| `P` | Detener el contenedor seleccionado |
-| `R` | Reiniciar el contenedor seleccionado |
-| `C` | Abrir el asistente de creación |
-| `L` | Ver logs del contenedor seleccionado en tiempo real |
-| `S` | Abrir shell interactivo dentro del contenedor seleccionado |
-| `E` | Eliminar el contenedor seleccionado — requiere confirmación |
-| `D` | Activar/desactivar panel de debug en vivo |
-| `Q` | Salir |
+| Tecla     | Acción                                                      |
+| --------- | ----------------------------------------------------------- |
+| `↑` / `↓` | Navegar la lista de contenedores                            |
+| `I`       | Iniciar el contenedor seleccionado                          |
+| `P`       | Detener el contenedor seleccionado                          |
+| `R`       | Reiniciar el contenedor seleccionado                        |
+| `C`       | Abrir el asistente de creación                              |
+| `L`       | Ver logs del contenedor seleccionado en tiempo real         |
+| `S`       | Abrir shell interactivo dentro del contenedor seleccionado  |
+| `E`       | Eliminar el contenedor seleccionado — requiere confirmación |
+| `D`       | Activar/desactivar panel de debug en vivo                   |
+| `Q`       | Salir                                                       |
 
 ---
 
@@ -124,13 +134,13 @@ Ingresa un mapeo de puertos en formato `HOST:CONTENEDOR`, por ejemplo `8080:80`,
 
 Ingresa pares `CLAVE=VALOR` de a uno. Las **sugerencias contextuales** muestran variables recomendadas para la imagen seleccionada:
 
-| Imagen | Variables sugeridas |
-|--------|---------------------|
-| postgres | `POSTGRES_USER`, `POSTGRES_PASSWORD`, `POSTGRES_DB` |
-| mysql | `MYSQL_ROOT_PASSWORD`, `MYSQL_DATABASE` |
-| redis | *(sin variables requeridas)* |
-| mongo | `MONGO_INITDB_ROOT_USERNAME`, `MONGO_INITDB_ROOT_PASSWORD` |
-| node / nginx / otros | Variables de runtime comunes según corresponda |
+| Imagen               | Variables sugeridas                                        |
+| -------------------- | ---------------------------------------------------------- |
+| postgres             | `POSTGRES_USER`, `POSTGRES_PASSWORD`, `POSTGRES_DB`        |
+| mysql                | `MYSQL_ROOT_PASSWORD`, `MYSQL_DATABASE`                    |
+| redis                | _(sin variables requeridas)_                               |
+| mongo                | `MONGO_INITDB_ROOT_USERNAME`, `MONGO_INITDB_ROOT_PASSWORD` |
+| node / nginx / otros | Variables de runtime comunes según corresponda             |
 
 Presiona `Enter` en una línea vacía para terminar y crear el contenedor.
 
@@ -144,9 +154,9 @@ Presiona `S` desde el dashboard con un contenedor en ejecución seleccionado. CD
 2. Abrirá una sesión de terminal interactiva completa
 3. Te dejará en el shell del contenedor
 
-Desde ahí podés ejecutar cualquier comando — `psql` para PostgreSQL, `python3` para Python, `node` para Node.js, `redis-cli` para Redis, etc.
+Desde ahí puedes ejecutar cualquier comando — `psql` para PostgreSQL, `python3` para Python, `node` para Node.js, `redis-cli` para Redis, etc.
 
-Escribí `exit` o presioná `Ctrl+D` para salir del shell y volver al dashboard de CDD.
+Escribe `exit` o presiona `Ctrl+D` para salir del shell y volver al dashboard de CDD.
 
 ---
 

package/README.md

@@ -3,9 +3,6 @@
 <p align="center">
   <img src="https://img.shields.io/npm/v/cdd-cli?color=blue&label=npm%20package" alt="npm version"/>
   <img src="https://img.shields.io/npm/dt/cdd-cli?color=green&label=downloads" alt="npm downloads"/>
-  <a href="https://github.com/caertos/cdd/actions/workflows/ci.yml">
-    <img src="https://github.com/caertos/cdd/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI status" />
-  </a>
   <a href="https://deepwiki.com/Caertos/cdd"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a>
 </p>
 
@@ -13,7 +10,24 @@
 
 ---
 
-## 🎉 What's new in v4.1
+## 🎉 What's new in v4.2
+
+**Editable text fields with visible cursor in the creation wizard.**
+
+Text fields in the wizard now behave like a proper text input: a visible cursor that moves with arrow keys, inserts and deletes where it stands.
+
+- **Cursor navigation** — `←` / `→` move the cursor within the field
+- **Home / End** — jump to the start or end of the text
+- **Full editing** — `Backspace` and `Delete` work at any cursor position
+- **Keyboard shortcuts** — `Ctrl+A/E/W/U/K` for fast text editing
+- **Paste support** — pasted text inserts at the cursor position
+- **Accents and emojis** — correct handling via code-point segmentation
+
+---
+
+## Previous releases
+
+### v4.1 — Interactive shell
 
 **Open a shell inside any container with a single keystroke.**
 
@@ -23,10 +37,6 @@ Press `S` and CDD drops you into a full interactive shell (`bash` or `sh`) insid
 - **Full terminal support** — run `psql`, `python3`, `node`, `redis-cli`, or any command inside the container
 - **Clean exit** — type `exit` or press `Ctrl+D` to return to the dashboard
 
----
-
-## Previous releases
-
 ### v3.2 — Interactive creation wizard
 
 Forget `docker run` flags, forgotten env vars, and broken `:latest` tags. Press `C` and CDD guides you through creating a container in seconds:
@@ -85,18 +95,18 @@ cdd
 
 Use `↑` / `↓` to navigate containers. Available keyboard shortcuts:
 
-| Key | Action |
-|-----|--------|
-| `↑` / `↓` | Navigate container list |
-| `I` | Start selected container |
-| `P` | Stop selected container |
-| `R` | Restart selected container |
-| `C` | Open creation wizard |
-| `L` | Stream logs for selected container |
-| `S` | Open interactive shell inside selected container |
-| `E` | Erase (remove) selected container — confirmation required |
-| `D` | Toggle live debug panel |
-| `Q` | Quit |
+| Key       | Action                                                    |
+| --------- | --------------------------------------------------------- |
+| `↑` / `↓` | Navigate container list                                   |
+| `I`       | Start selected container                                  |
+| `P`       | Stop selected container                                   |
+| `R`       | Restart selected container                                |
+| `C`       | Open creation wizard                                      |
+| `L`       | Stream logs for selected container                        |
+| `S`       | Open interactive shell inside selected container          |
+| `E`       | Erase (remove) selected container — confirmation required |
+| `D`       | Toggle live debug panel                                   |
+| `Q`       | Quit                                                      |
 
 ---
 
@@ -124,13 +134,13 @@ Enter a port mapping in `HOST:CONTAINER` format, e.g. `8080:80`, `5432:5432`. Le
 
 Enter `KEY=VALUE` pairs one at a time. **Contextual hints** show recommended variables for the selected image:
 
-| Image | Suggested vars |
-|-------|---------------|
-| postgres | `POSTGRES_USER`, `POSTGRES_PASSWORD`, `POSTGRES_DB` |
-| mysql | `MYSQL_ROOT_PASSWORD`, `MYSQL_DATABASE` |
-| redis | *(no required vars)* |
-| mongo | `MONGO_INITDB_ROOT_USERNAME`, `MONGO_INITDB_ROOT_PASSWORD` |
-| node / nginx / others | Common runtime vars as applicable |
+| Image                 | Suggested vars                                             |
+| --------------------- | ---------------------------------------------------------- |
+| postgres              | `POSTGRES_USER`, `POSTGRES_PASSWORD`, `POSTGRES_DB`        |
+| mysql                 | `MYSQL_ROOT_PASSWORD`, `MYSQL_DATABASE`                    |
+| redis                 | _(no required vars)_                                       |
+| mongo                 | `MONGO_INITDB_ROOT_USERNAME`, `MONGO_INITDB_ROOT_PASSWORD` |
+| node / nginx / others | Common runtime vars as applicable                          |
 
 Press `Enter` on an empty line to finish and create the container.
 

package/dist/App.js

@@ -31,6 +31,7 @@ export default function App() {
       containerName: controls.containerNameInput,
       portInput: controls.portInput,
       envInput: controls.envInput,
+      cursors: controls.creation.cursors,
       message: controls.message,
       messageColor: controls.messageColor,
       suggestions: controls.creation.suggestions,

package/dist/components/ContainerCreationPrompt.js

@@ -29,6 +29,8 @@ export default function ContainerCreationPrompt(props) {
     containerName = props.containerName,
     portInput = props.portInput,
     envInput = props.envInput,
+    _props$cursors = props.cursors,
+    cursors = _props$cursors === void 0 ? {} : _props$cursors,
     message = props.message,
     messageColor = props.messageColor,
     _props$suggestions = props.suggestions,
@@ -46,23 +48,28 @@ export default function ContainerCreationPrompt(props) {
   var prompts = [{
     label: 'Name of the image to create (e.g., nginx:1.27-alpine):',
     value: imageName,
+    cursor: cursors.imageName,
     required: true
   }, {
     label: 'Name of the container (optional):',
     value: containerName,
+    cursor: cursors.containerName,
     required: false
   }, {
     label: 'Ports (optional, format 8080:80,443:443):',
     value: portInput,
+    cursor: cursors.portInput,
     required: false
   }, {
     label: 'Environment variables (optional, format VAR1=val1,VAR2=val2):',
     value: envInput,
+    cursor: cursors.envInput,
     required: false
   }];
   var _ref = prompts[step] || {},
     label = _ref.label,
     value = _ref.value,
+    cursor = _ref.cursor,
     required = _ref.required;
   var activeItems = hubResults !== null && hubResults !== void 0 ? hubResults : suggestions;
   var showSuggestions = step === 0 && (isSearchingHub || activeItems.length > 0);
@@ -75,6 +82,7 @@ export default function ContainerCreationPrompt(props) {
   }, /*#__PURE__*/React.createElement(PromptField, {
     label: label,
     value: value,
+    cursor: cursor,
     required: required
   }), showSuggestions && /*#__PURE__*/React.createElement(SuggestionPanel, {
     items: activeItems,
@@ -97,6 +105,12 @@ ContainerCreationPrompt.propTypes = {
   containerName: PropTypes.string,
   portInput: PropTypes.string,
   envInput: PropTypes.string,
+  cursors: PropTypes.shape({
+    imageName: PropTypes.number,
+    containerName: PropTypes.number,
+    portInput: PropTypes.number,
+    envInput: PropTypes.number
+  }),
   message: PropTypes.string,
   messageColor: PropTypes.string,
   suggestions: PropTypes.arrayOf(PropTypes.string),

package/dist/components/PromptField.js

@@ -1,26 +1,32 @@
 import React from 'react';
+import { TextField } from './TextField.js';
 import { Text } from 'ink';
 import PropTypes from 'prop-types';
 
 /**
  * PromptField shows a label and the current typed value for an input field.
- * The cursor is represented with a trailing underscore.
+ * Wraps TextField with cursor rendering.
  *
  * @param {Object} props
  * @param {string} props.label - Label shown above the input value
  * @param {string} props.value - Current value of the input
+ * @param {number} [props.cursor] - Cursor position (0..value.length). When
+ *   omitted the cursor defaults to the end of the value.
  * @param {boolean} [props.required=false] - Whether the field is required
  * @returns {JSX.Element}
  */
 export function PromptField(_ref) {
   var label = _ref.label,
     value = _ref.value,
+    cursor = _ref.cursor,
     required = _ref.required;
-  // If the field is required and empty, show in red
-  var isEmpty = required && !value.trim();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, label), /*#__PURE__*/React.createElement(Text, {
-    color: isEmpty ? 'red' : 'cyan'
-  }, value, "_"));
+  var cursorPos = cursor !== undefined ? cursor : (value || '').length;
+  return /*#__PURE__*/React.createElement(TextField, {
+    label: label,
+    value: value || '',
+    cursor: cursorPos,
+    required: required
+  });
 }
 
 /**
@@ -42,6 +48,7 @@ export function PromptMessage(_ref2) {
 PromptField.propTypes = {
   label: PropTypes.string,
   value: PropTypes.string,
+  cursor: PropTypes.number,
   required: PropTypes.bool
 };
 PromptMessage.propTypes = {

package/dist/components/TextField.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Text } from 'ink';
+import PropTypes from 'prop-types';
+
+/**
+ * TextField renders a single-line text input with a visible cursor.
+ * Purely presentational — does not capture keyboard input.
+ *
+ * The cursor inverts the character under it. When the cursor is at the end
+ * of the text, a block cursor (inverted space) is shown.
+ *
+ * @param {Object} props
+ * @param {string}  props.label      - Label shown above the field
+ * @param {string}  props.value      - Current text content
+ * @param {number}  props.cursor     - Cursor position (0..value.length)
+ * @param {boolean} [props.required=false] - Show in red if empty
+ * @param {boolean} [props.masked=false]   - Reserved for TASK-5 (secrets)
+ * @param {string}  [props.placeholder]    - Dimmed text when empty
+ */
+export function TextField(_ref) {
+  var _chars$clampedCursor;
+  var label = _ref.label,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$cursor = _ref.cursor,
+    cursor = _ref$cursor === void 0 ? 0 : _ref$cursor,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$masked = _ref.masked,
+    masked = _ref$masked === void 0 ? false : _ref$masked;
+  var isEmpty = required && !value.trim();
+  var displayValue = masked ? '*'.repeat(value.length) : value;
+  var chars = Array.from(displayValue);
+  var clampedCursor = Math.max(0, Math.min(chars.length, cursor));
+  var before = chars.slice(0, clampedCursor).join('');
+  var atCursor = (_chars$clampedCursor = chars[clampedCursor]) !== null && _chars$clampedCursor !== void 0 ? _chars$clampedCursor : '';
+  var after = chars.slice(clampedCursor + 1).join('');
+  var color = isEmpty ? 'red' : 'cyan';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, label), /*#__PURE__*/React.createElement(Text, {
+    color: color
+  }, before, atCursor ? /*#__PURE__*/React.createElement(Text, {
+    inverse: true
+  }, atCursor) : /*#__PURE__*/React.createElement(Text, {
+    inverse: true
+  }, " "), after));
+}
+TextField.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  cursor: PropTypes.number,
+  required: PropTypes.bool,
+  masked: PropTypes.bool,
+  placeholder: PropTypes.string
+};

package/dist/helpers/textEditing.js

@@ -0,0 +1,293 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * @typedef {Object} TextState
+ * @property {string} value  - Current field content
+ * @property {number} cursor - Cursor position (0..value.length)
+ */
+
+/**
+ * @typedef {Object} EditResult
+ * @property {TextState} state   - Resulting state (same object if no change)
+ * @property {boolean}  handled  - true if the key was consumed by the editor
+ */
+
+var BREAK_CHARS = ' \t./\\,;:|(){}[]<>!@#$%^&*+=~`"\'-';
+
+/**
+ * Splits a string into code points (handles emojis via Array.from).
+ * @param {string} s
+ * @returns {string[]}
+ */
+function chars(s) {
+  return Array.from(s);
+}
+
+/**
+ * Returns the index of the start of the word before cursor.
+ * A word boundary is any non-alphanumeric, non-underscore character.
+ *
+ * @param {string} value
+ * @param {number} cursor
+ * @returns {number}
+ */
+export function wordStartBefore(value, cursor) {
+  var arr = chars(value);
+  if (cursor <= 0) return 0;
+  var i = cursor - 1;
+  // Skip trailing non-word chars
+  while (i > 0 && BREAK_CHARS.includes(arr[i])) i--;
+  // Skip word chars
+  while (i > 0 && !BREAK_CHARS.includes(arr[i - 1])) i--;
+  return i;
+}
+
+/**
+ * Returns the index of the start of the word after cursor.
+ *
+ * @param {string} value
+ * @param {number} cursor
+ * @returns {number}
+ */
+export function wordStartAfter(value, cursor) {
+  var arr = chars(value);
+  if (cursor >= arr.length) return arr.length;
+  var i = cursor;
+  // Skip current word chars
+  while (i < arr.length && !BREAK_CHARS.includes(arr[i])) i++;
+  // Skip non-word chars (whitespace, punctuation)
+  while (i < arr.length && BREAK_CHARS.includes(arr[i])) i++;
+  return i;
+}
+
+/**
+ * Inserts text at the cursor position and leaves the cursor after the insertion.
+ *
+ * @param {TextState} state
+ * @param {string} text
+ * @returns {TextState}
+ */
+export function insertAt(state, text) {
+  if (!text) return state;
+  var arr = chars(state.value);
+  var before = arr.slice(0, state.cursor);
+  var after = arr.slice(state.cursor);
+  var result = [].concat(_toConsumableArray(before), _toConsumableArray(chars(text)), _toConsumableArray(after)).join('');
+  return {
+    value: result,
+    cursor: state.cursor + chars(text).length
+  };
+}
+
+/**
+ * Deletes the character before the cursor.
+ *
+ * @param {TextState} state
+ * @returns {TextState}
+ */
+export function deleteBackward(state) {
+  var arr = chars(state.value);
+  if (state.cursor <= 0) return state;
+  var before = arr.slice(0, state.cursor - 1);
+  var after = arr.slice(state.cursor);
+  return {
+    value: before.concat(after).join(''),
+    cursor: state.cursor - 1
+  };
+}
+
+/**
+ * Deletes the character under the cursor.
+ *
+ * @param {TextState} state
+ * @returns {TextState}
+ */
+export function deleteForward(state) {
+  var arr = chars(state.value);
+  if (state.cursor >= arr.length) return state;
+  var before = arr.slice(0, state.cursor);
+  var after = arr.slice(state.cursor + 1);
+  return {
+    value: before.concat(after).join(''),
+    cursor: state.cursor
+  };
+}
+
+/**
+ * Applies a keypress to a text state.
+ * Pure function: reads and writes nothing outside its arguments.
+ *
+ * @param {TextState} state
+ * @param {string} input - Raw Ink input (1 char, a paste, or '')
+ * @param {import('ink').Key} key - Ink special key object
+ * @returns {EditResult}
+ */
+export function applyKeyToText(state, input, key) {
+  // No key combinations from this function
+  if (key.ctrl) {
+    if (input === 'a') {
+      // Ctrl+A → move to start
+      return {
+        state: _objectSpread(_objectSpread({}, state), {}, {
+          cursor: 0
+        }),
+        handled: true
+      };
+    }
+    if (input === 'e') {
+      // Ctrl+E → move to end
+      return {
+        state: _objectSpread(_objectSpread({}, state), {}, {
+          cursor: chars(state.value).length
+        }),
+        handled: true
+      };
+    }
+    if (input === 'w') {
+      // Ctrl+W → delete word before cursor
+      var newCursor = wordStartBefore(state.value, state.cursor);
+      var arr = chars(state.value);
+      var before = arr.slice(0, newCursor);
+      var after = arr.slice(state.cursor);
+      return {
+        state: {
+          value: before.concat(after).join(''),
+          cursor: newCursor
+        },
+        handled: true
+      };
+    }
+    if (input === 'u') {
+      // Ctrl+U → delete from start to cursor
+      var _arr = chars(state.value);
+      var _after = _arr.slice(state.cursor);
+      return {
+        state: {
+          value: _after.join(''),
+          cursor: 0
+        },
+        handled: true
+      };
+    }
+    if (input === 'k') {
+      // Ctrl+K → delete from cursor to end
+      var _arr2 = chars(state.value);
+      var _before = _arr2.slice(0, state.cursor);
+      return {
+        state: {
+          value: _before.join(''),
+          cursor: state.cursor
+        },
+        handled: true
+      };
+    }
+    // Other ctrl combos: not handled
+    return {
+      state: state,
+      handled: false
+    };
+  }
+  if (key.meta) {
+    return {
+      state: state,
+      handled: false
+    };
+  }
+  if (key.leftArrow) {
+    var _newCursor = Math.max(0, state.cursor - 1);
+    return {
+      state: _objectSpread(_objectSpread({}, state), {}, {
+        cursor: _newCursor
+      }),
+      handled: true
+    };
+  }
+  if (key.rightArrow) {
+    var len = chars(state.value).length;
+    var _newCursor2 = Math.min(len, state.cursor + 1);
+    return {
+      state: _objectSpread(_objectSpread({}, state), {}, {
+        cursor: _newCursor2
+      }),
+      handled: true
+    };
+  }
+  if (key.home) {
+    return {
+      state: _objectSpread(_objectSpread({}, state), {}, {
+        cursor: 0
+      }),
+      handled: true
+    };
+  }
+  if (key.end) {
+    return {
+      state: _objectSpread(_objectSpread({}, state), {}, {
+        cursor: chars(state.value).length
+      }),
+      handled: true
+    };
+  }
+  if (key.backspace) {
+    var newState = deleteBackward(state);
+    return {
+      state: newState,
+      handled: true
+    };
+  }
+  if (key["delete"]) {
+    var _newState = deleteForward(state);
+    return {
+      state: _newState,
+      handled: true
+    };
+  }
+
+  // Safety net: \x7f (DEL) is what most terminals send for Backspace.
+  // Ink v6 maps it to key.delete, but if we receive the raw char directly
+  // (e.g. from tests or non-Ink callers), handle it as backspace.
+  if (input === '\x7f' || input === '\b') {
+    var _newState2 = deleteBackward(state);
+    return {
+      state: _newState2,
+      handled: true
+    };
+  }
+
+  // Regular text input (single char or paste)
+  if (input && input.length >= 1) {
+    var _newState3 = insertAt(state, input);
+    return {
+      state: _newState3,
+      handled: true
+    };
+  }
+  return {
+    state: state,
+    handled: false
+  };
+}
+
+/**
+ * Creates a TextState from a string, with cursor at the end.
+ *
+ * @param {string} value
+ * @returns {TextState}
+ */
+export function textStateOf() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return {
+    value: value,
+    cursor: chars(value).length
+  };
+}

package/dist/hooks/creation/useContainerCreation.js

@@ -19,6 +19,7 @@ import { validatePorts, validateEnvVars } from '../../helpers/validationHelpers.
 import { IMAGE_PROFILES, resolveImageTag } from '../../helpers/constants.js';
 import { safeCall } from '../../helpers/safeCall.js';
 import { searchDockerHub, formatHubResult } from '../../helpers/dockerHubService.js';
+import { applyKeyToText } from '../../helpers/textEditing.js';
 var MAX_VISIBLE = 6;
 var INITIAL_FORM = {
   step: 0,
@@ -26,6 +27,12 @@ var INITIAL_FORM = {
   containerName: '',
   portInput: '',
   envInput: '',
+  cursors: {
+    imageName: 0,
+    containerName: 0,
+    portInput: 0,
+    envInput: 0
+  },
   message: '',
   messageColor: 'yellow',
   suggestions: [],
@@ -76,6 +83,7 @@ export function useContainerCreation(_ref) {
     containerName = form.containerName,
     portInput = form.portInput,
     envInput = form.envInput,
+    cursors = form.cursors,
     message = form.message,
     messageColor = form.messageColor,
     suggestions = form.suggestions,
@@ -183,6 +191,76 @@ export function useContainerCreation(_ref) {
     }
   };
 
+  /**
+   * Sets a field's text value and cursor position together.
+   * @param {'imageName'|'containerName'|'portInput'|'envInput'} fieldName
+   * @param {string} value
+   * @param {number} cursor
+   */
+  function setFieldText(fieldName, value, cursor) {
+    dispatch({
+      type: 'SET',
+      payload: _defineProperty(_defineProperty({}, fieldName, value), "cursors", _objectSpread(_objectSpread({}, form.cursors), {}, _defineProperty({}, fieldName, cursor)))
+    });
+  }
+
+  /**
+   * Returns the field name associated with a wizard step.
+   * @param {number} step
+   * @returns {'imageName'|'containerName'|'portInput'|'envInput'|null}
+   */
+  function fieldForStep(step) {
+    var _step;
+    return (_step = ['imageName', 'containerName', 'portInput', 'envInput'][step]) !== null && _step !== void 0 ? _step : null;
+  }
+
+  /**
+   * Applies a keypress to the field associated with the current step.
+   * When the edited field is imageName, recalculates suggestions.
+   * @param {string} input - Raw Ink input
+   * @param {import('ink').Key} key - Ink key object
+   * @returns {boolean} true if the key was consumed
+   */
+  function handleFieldKey(input, key) {
+    var fieldName = fieldForStep(step);
+    if (!fieldName) return false;
+    var currentState = {
+      value: form[fieldName],
+      cursor: cursors[fieldName]
+    };
+    var _applyKeyToText = applyKeyToText(currentState, input, key),
+      newState = _applyKeyToText.state,
+      handled = _applyKeyToText.handled;
+    if (!handled) return false;
+    if (fieldName === 'imageName') {
+      var _activeHubRequestRef$;
+      // Recalculate suggestions when image name changes
+      (_activeHubRequestRef$ = activeHubRequestRef.current.controller) === null || _activeHubRequestRef$ === void 0 || _activeHubRequestRef$.abort();
+      activeHubRequestRef.current.requestId += 1;
+      setIsSearchingHub(false);
+      setHubResults(null);
+      var lower = newState.value.toLowerCase();
+      var matches = newState.value.trim() ? Object.keys(imageProfiles).filter(function (key) {
+        return key.includes(lower);
+      }) : [];
+      dispatch({
+        type: 'SET',
+        payload: {
+          imageName: newState.value,
+          cursors: _objectSpread(_objectSpread({}, form.cursors), {}, {
+            imageName: newState.cursor
+          }),
+          selectedSuggestionIndex: -1,
+          visibleOffset: 0,
+          suggestions: matches
+        }
+      });
+    } else {
+      setFieldText(fieldName, newState.value, newState.cursor);
+    }
+    return true;
+  }
+
   // Docker Hub search state (kept as useState because they are independent of form)
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -249,15 +327,19 @@ export function useContainerCreation(_ref) {
 
   /**
    * Updates the image name input and recalculates autocomplete suggestions.
+   * Accepts either a plain string (backward compatible) or a TextState object.
    * Resets selectedSuggestionIndex to -1 on every keystroke.
    * Also aborts any in-flight Hub search and clears Hub results.
    *
-   * @param {string} value - New raw image name typed by user
+   * @param {string|TextState} input - New image name (string or {value, cursor})
    */
-  function updateImageInput(value) {
-    var _activeHubRequestRef$;
+  function updateImageInput(input) {
+    var _input$cursor, _activeHubRequestRef$2;
+    var value = typeof input === 'string' ? input : input.value;
+    var cursor = typeof input === 'string' ? value.length : (_input$cursor = input.cursor) !== null && _input$cursor !== void 0 ? _input$cursor : value.length;
+
     // Abort any in-flight Hub search and clear its state
-    (_activeHubRequestRef$ = activeHubRequestRef.current.controller) === null || _activeHubRequestRef$ === void 0 || _activeHubRequestRef$.abort();
+    (_activeHubRequestRef$2 = activeHubRequestRef.current.controller) === null || _activeHubRequestRef$2 === void 0 || _activeHubRequestRef$2.abort();
     activeHubRequestRef.current.requestId += 1;
     setIsSearchingHub(false);
     setHubResults(null);
@@ -269,6 +351,9 @@ export function useContainerCreation(_ref) {
       type: 'SET',
       payload: {
         imageName: value,
+        cursors: _objectSpread(_objectSpread({}, form.cursors), {}, {
+          imageName: cursor
+        }),
         selectedSuggestionIndex: -1,
         visibleOffset: 0,
         suggestions: matches
@@ -293,7 +378,7 @@ export function useContainerCreation(_ref) {
    */
   function _triggerHubSearch() {
     _triggerHubSearch = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-      var _activeHubRequestRef$2;
+      var _activeHubRequestRef$3;
       var query, requestId, controller, results, _t;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
@@ -313,7 +398,7 @@ export function useContainerCreation(_ref) {
           case 2:
             // Abort previous request (should already be aborted from updateImageInput,
             // but guard here too)
-            (_activeHubRequestRef$2 = activeHubRequestRef.current.controller) === null || _activeHubRequestRef$2 === void 0 || _activeHubRequestRef$2.abort();
+            (_activeHubRequestRef$3 = activeHubRequestRef.current.controller) === null || _activeHubRequestRef$3 === void 0 || _activeHubRequestRef$3.abort();
             requestId = activeHubRequestRef.current.requestId + 1;
             activeHubRequestRef.current.requestId = requestId;
             controller = new AbortController();
@@ -386,10 +471,14 @@ export function useContainerCreation(_ref) {
   function applyFocusedSuggestion() {
     if (selectedSuggestionIndex < 0 || selectedSuggestionIndex >= suggestions.length) return;
     var chosen = suggestions[selectedSuggestionIndex];
+    var resolved = resolveImageTag(chosen, imageProfiles);
     dispatch({
       type: 'SET',
       payload: {
-        imageName: resolveImageTag(chosen, imageProfiles),
+        imageName: resolved,
+        cursors: _objectSpread(_objectSpread({}, form.cursors), {}, {
+          imageName: resolved.length
+        }),
         suggestions: [],
         selectedSuggestionIndex: -1,
         visibleOffset: 0
@@ -411,6 +500,9 @@ export function useContainerCreation(_ref) {
         type: 'SET',
         payload: {
           imageName: resolved,
+          cursors: _objectSpread(_objectSpread({}, form.cursors), {}, {
+            imageName: resolved.length
+          }),
           step: 1
         }
       });
@@ -519,7 +611,10 @@ export function useContainerCreation(_ref) {
     dispatch({
       type: 'SET',
       payload: {
-        envInput: newEnvInput
+        envInput: newEnvInput,
+        cursors: _objectSpread(_objectSpread({}, form.cursors), {}, {
+          envInput: newEnvInput.length
+        })
       }
     });
   }
@@ -540,6 +635,7 @@ export function useContainerCreation(_ref) {
     setPortInput: setPortInput,
     envInput: envInput,
     setEnvInput: setEnvInput,
+    cursors: cursors,
     message: message,
     setMessage: setMessage,
     messageColor: messageColor,
@@ -557,6 +653,8 @@ export function useContainerCreation(_ref) {
     cancelCreation: cancelCreation,
     resetCreation: resetCreation,
     insertNextSuggestedEnv: insertNextSuggestedEnv,
-    hasSuggestedEnv: hasSuggestedEnv
+    hasSuggestedEnv: hasSuggestedEnv,
+    fieldForStep: fieldForStep,
+    handleFieldKey: handleFieldKey
   };
 }

package/dist/hooks/useControls.js

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -197,14 +203,6 @@ export function useControls() {
    */
   var processCreationInput = React.useCallback(function (input, key) {
     var step = creation.step;
-    var removeLastChar = function removeLastChar(setter) {
-      return setter(function (value) {
-        return (value || '').slice(0, -1);
-      });
-    };
-    var appendChar = function appendChar(setter, current, ch) {
-      return setter((current || '') + ch);
-    };
     if (key.escape) {
       creation.cancelCreation();
       setCreatingContainer(false);
@@ -243,24 +241,16 @@ export function useControls() {
         return;
       }
     }
-    if (key.backspace || key["delete"]) {
-      if (step === 0) {
-        var newValue = (creation.imageName || '').slice(0, -1);
-        creation.updateImageInput(newValue);
-      }
-      if (step === 1) removeLastChar(creation.setContainerName);
-      if (step === 2) removeLastChar(creation.setPortInput);
-      if (step === 3) removeLastChar(creation.setEnvInput);
-      return;
-    }
-    if (input && input.length === 1 && !key.ctrl && !key.meta) {
-      if (step === 0) {
-        creation.updateImageInput((creation.imageName || '') + input);
-      }
-      if (step === 1) appendChar(creation.setContainerName, creation.containerName, input);
-      if (step === 2) appendChar(creation.setPortInput, creation.portInput, input);
-      if (step === 3) appendChar(creation.setEnvInput, creation.envInput, input);
-    }
+
+    // Ink v6 maps \x7f (Backspace on most terminals) to key.delete instead
+    // of key.backspace. Normalize so text editing always receives backspace.
+    var normalizedKey = key["delete"] && !key.backspace ? _objectSpread(_objectSpread({}, key), {}, {
+      "delete": false,
+      backspace: true
+    }) : key;
+
+    // Delegate to the text editor for all field input
+    if (creation.handleFieldKey(input, normalizedKey)) return;
   }, [creation, setCreatingContainer, triggerHubSearch, isSearchingHub, insertNextSuggestedEnv]);
 
   // Single keyboard entry point

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdd-cli",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "CLI Docker Dashboard",
   "main": "index.js",
   "scripts": {