bare-tui-form 0.0.1 → 0.0.2

package/fields/file.js

@@ -0,0 +1,129 @@
+// file — a path field you can either type or browse.
+//
+// It wraps bare-tui's textinput (the editable path, and the field's string
+// value) and lazily opens bare-tui's filepicker as an overlay — the same
+// host-the-control-and-expose-an-overlay shape as fields/select.js. The picker
+// is created the first time you open it, so a form full of file fields doesn't
+// pull in bare-fs until one is actually browsed.
+//
+// Interaction (mirrors select's "space opens, never steals enter"):
+//   closed  — type a path; SPACE on an empty input opens the picker
+//   open    — ↑/↓ move, →/l descend, ↵ open/select, ⌫ up a dir, esc closes
+// While open the field claims enter (wantsEnter) so the form's enter reaches the
+// picker instead of advancing; on a pick the chosen path fills the input.
+//
+// `pick: 'file' | 'dir'` chooses the picker mode. `fs`/`path`/`cwd`/`height`/
+// `showHidden` are forwarded to filepicker.create — `fs`/`path` let tests inject
+// filepicker.mock with no real I/O.
+const { textinput, filepicker, key } = require('bare-tui')
+const { Field } = require('./base')
+
+const openKey = key.binding({ keys: ['space'] })
+const closeKey = key.binding({ keys: ['esc'] })
+
+class FileField extends Field {
+  constructor(opts = {}) {
+    super(opts)
+    this.pick = opts.pick === 'dir' ? 'dir' : 'file'
+    this.input = textinput.create({
+      value: opts.value || '',
+      placeholder:
+        opts.placeholder ||
+        (this.pick === 'dir' ? 'choose a directory…' : 'type a path or browse…'),
+      prompt: opts.prompt ?? '> ',
+      charLimit: opts.charLimit || 0
+    })
+    // The base delegates focus()/blur()/`focused` to this.control — point it at
+    // the text input (the picker is a transient overlay, not the resting state).
+    this.control = this.input
+    this._pickerOpts = {
+      pick: this.pick,
+      cwd: opts.cwd,
+      height: opts.height,
+      showHidden: opts.showHidden,
+      fs: opts.fs,
+      path: opts.path
+    }
+    this.picker = null
+  }
+
+  value() {
+    return this.input.value
+  }
+
+  setValue(v) {
+    this.input.setValue(v === null || v === undefined ? '' : v)
+    return this
+  }
+
+  // While the picker is open, enter belongs to it (descend/select), so the form
+  // must not treat enter as confirm/advance.
+  get isOpen() {
+    return this.picker !== null
+  }
+
+  wantsEnter() {
+    return this.isOpen
+  }
+
+  update(msg) {
+    if (this.picker) return this._updateOpen(msg)
+
+    // Closed: SPACE on an empty input opens the browser; otherwise the text
+    // input handles the key (so you can type, and type spaces in a real path).
+    if (msg && msg.type === 'key' && key.matches(msg, openKey) && this.input.value === '') {
+      return this._open()
+    }
+    const [c, cmd] = this.input.update(msg)
+    this.input = c
+    if (this.error) this.error = null
+    return [this, cmd]
+  }
+
+  _updateOpen(msg) {
+    if (msg && msg.type === 'filepicker.select') {
+      this.setValue(msg.path)
+      this.picker = null
+      this.error = null
+      return [this, null]
+    }
+    if (msg && msg.type === 'key' && key.matches(msg, closeKey)) {
+      this.picker = null
+      return [this, null]
+    }
+    const [p, cmd] = this.picker.update(msg)
+    this.picker = p
+    return [this, cmd]
+  }
+
+  _open() {
+    this.picker = filepicker.create(this._pickerOpts)
+    // The first directory read is a Cmd; thread it up so the form/program runs it.
+    return [this, this.picker.init()]
+  }
+
+  // Tab-away (or any focus change) closes the overlay so it can't linger.
+  blur() {
+    this.picker = null
+    return super.blur()
+  }
+
+  menuView() {
+    return this.picker ? this.picker.view() : ''
+  }
+
+  controlView() {
+    const view = this.input.view()
+    if (this.isOpen) return view
+    const hint = this.theme.help(
+      this.pick === 'dir' ? '  space to browse folders' : '  space to browse'
+    )
+    return view + '\n' + hint
+  }
+}
+
+function file(opts) {
+  return new FileField(opts)
+}
+
+module.exports = { file, FileField }

package/fields/list.js

@@ -0,0 +1,158 @@
+// list — an editable list of scalar text values (add / remove rows).
+//
+// For a repeatable value with no fixed option set — tags, waypoints, a flag the
+// CLI accepts many times — where multiselect (a fixed enum) and array (a
+// repeatable OBJECT subform) don't fit. Each row is a bare-tui textinput; the
+// field is one focus stop in the form and manages its own row cursor:
+//
+//   ↑/↓   move between rows
+//   ↵     add a new row below and focus it
+//   ⌫     on an EMPTY row, remove it (otherwise deletes a character)
+//   tab   leave the field (the form's focus ring)
+//
+// value() is a plain array of the non-empty rows, in order — so a multi-valued
+// CLI flag round-trips as ["a","b"], not a single space-joined string.
+const { key, textinput } = require('bare-tui')
+const { Field } = require('./base')
+
+const keys = {
+  up: key.binding({ keys: ['up'] }),
+  down: key.binding({ keys: ['down'] }),
+  add: key.binding({ keys: ['enter'] }),
+  back: key.binding({ keys: ['backspace'] })
+}
+
+class ListField extends Field {
+  constructor(opts = {}) {
+    super(opts)
+    this.itemPlaceholder = opts.itemPlaceholder || 'type a value…'
+    this.min = Math.max(0, opts.minItems || 0)
+    this.max = opts.maxItems > 0 ? opts.maxItems : 0 // 0 = unbounded
+    this.cursor = 0
+    this._focused = false
+    const seed = Array.isArray(opts.value) ? opts.value.map(String) : []
+    // Always keep at least one (editable) row, even when minItems is 0; empty
+    // rows are dropped from value().
+    this.rows = (seed.length ? seed : ['']).map((v) => this._mkRow(v))
+    // No single wrapped control — the delegating methods are overridden below.
+    this.control = null
+  }
+
+  _mkRow(value) {
+    return textinput.create({ value, placeholder: this.itemPlaceholder, prompt: '' })
+  }
+
+  _floor() {
+    return Math.max(this.min, 1) // never collapse below one editable row
+  }
+
+  focus() {
+    this._focused = true
+    this._syncFocus()
+    return this
+  }
+
+  blur() {
+    this._focused = false
+    for (const r of this.rows) r.blur()
+    return this
+  }
+
+  get focused() {
+    return this._focused
+  }
+
+  // Enter belongs to the field (it adds a row) whenever it's focused, so the form
+  // doesn't treat enter as confirm/advance. Tab still moves to the next field.
+  wantsEnter() {
+    return this._focused
+  }
+
+  value() {
+    return this.rows.map((r) => r.value).filter((v) => v.trim() !== '')
+  }
+
+  setValue(values) {
+    const seed = Array.isArray(values) ? values.map(String) : []
+    this.rows = (seed.length ? seed : ['']).map((v) => this._mkRow(v))
+    this.cursor = 0
+    this._syncFocus()
+    return this
+  }
+
+  isEmpty(v) {
+    return !Array.isArray(v) || v.length === 0
+  }
+
+  update(msg) {
+    if (!this._focused || !msg || msg.type !== 'key') return [this, null]
+    const row = this.rows[this.cursor]
+
+    if (key.matches(msg, keys.up)) {
+      this._move(-1)
+      return [this, null]
+    }
+    if (key.matches(msg, keys.down)) {
+      this._move(1)
+      return [this, null]
+    }
+    if (key.matches(msg, keys.add)) {
+      this._addRow()
+      return [this, null]
+    }
+    // Backspace on an EMPTY row removes it; otherwise it edits (deletes a char).
+    if (
+      key.matches(msg, keys.back) &&
+      row &&
+      row.value === '' &&
+      this.rows.length > this._floor()
+    ) {
+      this._removeRow()
+      return [this, null]
+    }
+
+    const [c] = row.update(msg)
+    this.rows[this.cursor] = c
+    if (this.error) this.error = null
+    return [this, null]
+  }
+
+  _move(delta) {
+    this.cursor = Math.max(0, Math.min(this.cursor + delta, this.rows.length - 1))
+    this._syncFocus()
+  }
+
+  _addRow() {
+    if (this.max && this.rows.length >= this.max) return
+    this.rows.splice(this.cursor + 1, 0, this._mkRow(''))
+    this.cursor++
+    this._syncFocus()
+  }
+
+  _removeRow() {
+    this.rows.splice(this.cursor, 1)
+    this.cursor = Math.max(0, Math.min(this.cursor, this.rows.length - 1))
+    this._syncFocus()
+    if (this.error) this.error = null
+  }
+
+  _syncFocus() {
+    this.rows.forEach((r, i) => (this._focused && i === this.cursor ? r.focus() : r.blur()))
+  }
+
+  controlView() {
+    const t = this.theme
+    const lines = this.rows.map((r, i) => {
+      const pointer = this._focused && i === this.cursor ? '› ' : '  '
+      return pointer + r.view()
+    })
+    if (this._focused) lines.push(t.help('  ↵ add · ⌫ on an empty row removes'))
+    return lines.join('\n')
+  }
+}
+
+function list(opts) {
+  return new ListField(opts)
+}
+
+module.exports = { list, ListField, keys }

package/form.js

@@ -47,6 +47,8 @@ const { radio } = require('./fields/radio')
 const { confirm } = require('./fields/confirm')
 const { multiselect } = require('./fields/multiselect')
 const { constant } = require('./fields/constant')
+const { file } = require('./fields/file')
+const { list } = require('./fields/list')
 const { action } = require('./fields/action')
 const { SectionToggleField } = require('./fields/section')
 const { Field } = require('./fields/base')
@@ -83,7 +85,18 @@ function mergeKeys(user) {
 }
 const SEP = '\u0000' // path/cache-key segment separator: a NUL, which never appears in a JSON key
 
-const builders = { text, textarea, number, select, radio, confirm, multiselect, constant }
+const builders = {
+  text,
+  textarea,
+  number,
+  select,
+  radio,
+  confirm,
+  multiselect,
+  constant,
+  file,
+  list
+}
 
 // Turn a leaf field definition object into a field instance; pass instances
 // through untouched. Object/variant/conditional/array groups are handled by

package/index.js

@@ -32,6 +32,8 @@ const { select, SelectField } = require('./fields/select')
 const { radio, RadioField } = require('./fields/radio')
 const { confirm, ConfirmField } = require('./fields/confirm')
 const { multiselect, MultiSelectField } = require('./fields/multiselect')
+const { file, FileField } = require('./fields/file')
+const { list, ListField } = require('./fields/list')
 const { section, SectionToggleField } = require('./fields/section')
 const { constant, ConstField } = require('./fields/constant')
 const { action, ActionField } = require('./fields/action')
@@ -57,6 +59,8 @@ module.exports = {
   radio,
   confirm,
   multiselect,
+  file, // a type-or-browse path field (filepicker overlay); ui:widget 'file' / 'directory'
+  list, // an editable list of scalar text rows (array of string items)
   section, // the optional-section gate (usually produced by fromSchema, not hand-written)
   constant, // a fixed value (JSON Schema const); usually produced by fromSchema
   action, // a focusable button (array add/remove); usually produced by fromSchema
@@ -74,6 +78,8 @@ module.exports = {
   RadioField,
   ConfirmField,
   MultiSelectField,
+  FileField,
+  ListField,
   SectionToggleField,
   ConstField,
   ActionField

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bare-tui-form",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A declarative form builder for bare-tui",
   "main": "index.js",
   "exports": {
@@ -23,7 +23,7 @@
     "README.md"
   ],
   "dependencies": {
-    "bare-tui": "^0.0.2"
+    "bare-tui": "^0.0.3"
   },
   "devDependencies": {
     "bare-fs": "^4.7.1",

package/schema.js

@@ -18,6 +18,7 @@
 //     integer / boolean
 //   enum                     → select (single choice)
 //   array + items.enum       → multiselect (choose many)
+//   array + items: string    → an editable list of scalar text rows (add/remove)
 //   array + items: object    → a repeatable subform the user grows/shrinks
 //     (minItems / maxItems)     (each entry is the item object's fields)
 //   required[]               → required fields
@@ -28,9 +29,9 @@
 //     pattern / format
 //   minimum / maximum        → number bounds
 //
-// Not yet: arrays of primitives or free-form items, nested arrays, allOf (schema
-// merge), $ref. Unsupported shapes throw a clear error rather than silently
-// producing the wrong form.
+// Not yet: arrays of non-string primitives (number/boolean items), nested arrays,
+// allOf (schema merge), $ref. Unsupported shapes throw a clear error rather than
+// silently producing the wrong form.
 //
 // SECURITY: a JSON Schema is frequently untrusted input — produced by an LLM or
 // received from a peer — and this function is the boundary where it becomes
@@ -201,6 +202,18 @@ function applyWidget(def, ui, ctx, name, prop) {
       if (def.type !== 'select') return widgetMismatch(def, ctx, name, widget, 'enum')
       def.type = 'radio' // radio takes the same options/selected as select
       return def
+    case 'file':
+    case 'directory': {
+      if (def.type !== 'text') return widgetMismatch(def, ctx, name, widget, 'string')
+      def.type = 'file' // a type-or-browse path field; opens a filepicker overlay
+      def.pick = widget === 'directory' ? 'dir' : 'file'
+      const cwd = uiGet(ui, 'cwd')
+      if (typeof cwd === 'string') def.cwd = harden.cleanText(cwd, ctx.limits.maxTextLength)
+      const height = harden.safeNumber(uiGet(ui, 'height'))
+      if (height) def.height = Math.min(height, 100)
+      if (uiGet(ui, 'showHidden')) def.showHidden = true
+      return def
+    }
     case 'select':
     case 'checkbox':
     case 'checkboxes':
@@ -445,8 +458,8 @@ function withoutNested(sub) {
   return { properties: sub.properties || {}, required: sub.required || [] }
 }
 
-// array → multiselect (items.enum) or a repeatable object subform (items is an
-// object). Other array shapes (primitive items, nested arrays) are refused.
+// array → multiselect (items.enum), an editable scalar list (string items), or a
+// repeatable object subform (object items). Nested arrays are refused.
 // `ui` supplies item presentation (ui.items) and add/remove gating.
 function arrayProperty(name, base, prop, ctx, depth, ui = {}) {
   const items = prop.items || {}
@@ -462,6 +475,27 @@ function arrayProperty(name, base, prop, ctx, depth, ui = {}) {
     }
   }
 
+  // string (or untyped) primitive items → an editable list of scalar text rows.
+  if (!items.properties && (typeOf(items) === 'string' || typeOf(items) === undefined)) {
+    countLeaf(ctx)
+    const cap = ctx.limits.maxArrayItems
+    const maxItems = Math.min(harden.safeNumber(prop.maxItems) ?? cap, cap)
+    const minItems = Math.min(Math.max(harden.safeNumber(prop.minItems) ?? 0, 0), maxItems)
+    const def = Array.isArray(prop.default) ? prop.default.slice(0, cap) : []
+    const placeholder = uiGet(ui, 'placeholder')
+    return {
+      ...base,
+      type: 'list',
+      value: def.map((v) => harden.cleanText(String(v), ctx.limits.maxTextLength)),
+      minItems,
+      maxItems,
+      itemPlaceholder:
+        typeof placeholder === 'string'
+          ? harden.cleanText(placeholder, ctx.limits.maxTextLength)
+          : undefined
+    }
+  }
+
   if (items && typeof items === 'object' && (items.properties || typeOf(items) === 'object')) {
     if (ctx.inArray) {
       throw new Error(`fromSchema: nested arrays ("${name}") are not supported yet`)