# Phase 1 — Quick Wins Design

**Status:** Approved
**Date:** 2026-02-13
**Scope:** New field types, keyboard navigation, form import/export

---

## Overview

Phase 1 adds three categories of improvements to Formfire:
1. Three new field types (slider, color, time)
2. Keyboard navigation in the form modal
3. Form import/export via JSON files

These features extend existing patterns with minimal architectural changes.

---

## 1. New Field Types

### Type System Changes (`types.ts`)

Extend `FieldType` union with `'slider' | 'color' | 'time'`.

Add optional properties to `FormField`:
- `min?: number` — slider minimum (default: 0)
- `max?: number` — slider maximum (default: 100)
- `step?: number` — slider step increment (default: 1)

### Renderers (`field-renderers.ts`)

| Type | HTML Element | getValue() | Notes |
|------|-------------|------------|-------|
| `slider` | `<input type="range">` + value label | `number` | Live value display, min/max/step from FormField |
| `color` | `<input type="color">` + hex label | `string` (#hex) | Default: `#000000` |
| `time` | `<input type="time">` | `string` (HH:MM) | Mirrors existing date renderer pattern |

All three implement the standard `RenderedField` interface (getValue/setValue/setError).

### Builder Changes (`form-builder.ts`)

- Add `'slider'`, `'color'`, `'time'` to `FIELD_TYPES` array
- Show Min/Max/Step settings when field type is `slider`
- Placeholder support for `time` (same as date)

### Validation (`validators.ts`)

- Slider: validate value is within min/max range

---

## 2. Keyboard Navigation

### Form Modal (`form-modal.ts`)

Single `keydown` listener on modal contentEl with event delegation:

- **Ctrl+Enter** → Submit form (always)
- **Enter** on single-line inputs (text, number, date, time, color, dropdown) → Submit, unless a suggest dropdown is open
- **Enter** on textarea → normal line break (no submit)
- **Escape** → Close modal (already handled by Obsidian's Modal base class)

### Field Renderer Accessibility (`field-renderers.ts`)

- **Toggle**: Add `tabindex="0"`, Space/Enter to toggle
- **Rating**: Add `tabindex="0"`, Arrow Left/Right to change value, Enter to confirm
- **Tags**: Input already has focus handling, just needs tab-order

Tab order follows field definition order naturally via DOM order.

---

## 3. Form Import/Export

### New Module: `src/utils/form-io.ts`

Two pure functions:

```typescript
exportForms(forms: FormDefinition[]): string
```
Serializes to JSON with version wrapper: `{ version: 1, forms: [...] }`.

```typescript
importForms(json: string): FormDefinition[]
```
Parses JSON, validates structure (forms array, each form has id/name/fields), generates new UUIDs for imported forms to prevent ID collisions.

### Settings Tab Changes (`settings-tab.ts`)

New buttons below "New Form":
- **Export All** — Creates JSON blob, triggers browser download as `formfire-export.json`
- **Import** — Opens native file input (`<input type="file" accept=".json">`), reads file, validates, adds forms to store

Per-form **Export** button in the form list (alongside Edit/Duplicate/Delete). Exports single form.

### Error Handling

- Invalid JSON → `Notice("Invalid JSON file")`
- Missing required fields → `Notice("Invalid form format")`
- Success → `Notice("Imported X form(s)")`

No import preview modal — validation is sufficient. YAGNI.

---

## Files Changed

| File | Change |
|------|--------|
| `src/types.ts` | Extend FieldType, add min/max/step to FormField |
| `src/ui/field-renderers.ts` | Add slider, color, time renderers; add tabindex/keyboard to toggle, rating |
| `src/ui/form-modal.ts` | Add keydown listener for Ctrl+Enter, Enter submit |
| `src/ui/form-builder.ts` | Extend FIELD_TYPES, add slider-specific settings |
| `src/utils/validators.ts` | Add slider range validation |
| `src/utils/form-io.ts` | **New** — exportForms, importForms |
| `src/ui/settings-tab.ts` | Add Export All, Import, per-form Export buttons |
| `styles.css` | Styles for slider, color, time fields |

## Out of Scope

- Import preview/diff modal
- Clipboard-based import/export
- Cloud sync or sharing
- Migration logic between form versions