feat(tables): editable cells phase 2 — schema-driven editor widgets

Replaces the always-text-input cell editor with a per-property
widget factory keyed off the row's JSON Schema (form.yaml). The
table view now picks the right editor for each cell automatically:
strings get text inputs, enums get dropdowns, integers get number
inputs with min/max, dates get date pickers, booleans get
checkboxes, multi-select arrays get a multi-select. Cells whose
schema is a complex type (nested object, generic array, oneOf /
anyOf / allOf) can't be inline-edited and punt to the row's
form-mode editor on Enter / double-click.

Schema discovery:

context.js walkServer fetches <currentdir>/form.yaml as a
companion to <currentdir>/table.yaml — same file the form-mode
renderer already loads, just from the table view's perspective.
Best-effort: a directory with table.yaml but no form.yaml still
renders as a sortable/filterable table; cells just fall back to
plain text inputs without per-property hints. The schema is
exposed as ctx.rowSchema and consumed by the editor's
propertySchemaFor() helper, which walks dot-separated field
names through schema.properties to locate each column's
property schema.

Editor factory (editor.js):

- propertySchemaFor(col) — schema lookup keyed by col.field.
- isComplexSchema(s) — true for nested object, generic array,
  oneOf/anyOf/allOf. Multi-select-friendly arrays
  (string-enum + uniqueItems) are NOT complex; they get an
  inline multi-select widget.
- makeWidget(propSchema, col, initialValue) — dispatches to one
  of the widget builders below based on schema type / format /
  enum + column-spec hints (col.format / col.enum) for tables
  without a form.yaml.

Widget builders, each returning {element, getValue, focus}:

- widgetText        — plain <input type=text>, default fallback.
- widgetTextarea    — for string with maxLength > 200 (long
                      narrative fields).
- widgetTyped(type) — typed inputs the browser can help validate;
                      used for date / date-time / email.
- widgetNumber      — <input type=number> with min/max/step
                      derived from schema.minimum/maximum/
                      multipleOf. Integer schemas force step=1.
                      getValue returns Number, not string, so
                      the draft buffer holds the right type for
                      JSON serialization later.
- widgetCheckbox    — <input type=checkbox>; getValue returns
                      bool. initial value coerces from "true"/
                      true string-or-bool.
- widgetSelect      — <select> with empty placeholder + one
                      option per enum choice; getValue returns
                      the chosen string or null.
- widgetMultiSelect — <select multiple> with size = min(6, N);
                      getValue returns the array of selected
                      values (preserves order in the option list).

Complex-type cells:

isComplexSchema(propSchema) → enterEdit calls navigateToRowForm,
which routes to row.url (already the <id>.yaml.html re-edit URL
the row tracker holds). Phase 5 may swap this for an inline
side-panel mount of form-mode in the same bundle, but the
current navigate-out path delivers the same eventual UX without
needing the side-panel scaffolding.

Type-aware draft equality:

The pre-Phase-2 commit treated every value as a string and
compared via String() equality, which would mark any number-
column edit dirty even when the user re-typed the same number.
The new sameValue() helper handles bool/object via JSON-string
equality and falls back to loose string compare so 42 == "42"
isn't a false dirty. Drafts hold typed values (number, bool,
array) instead of all strings, so when Phase 3 wires the row PUT
the body shape matches the JSON Schema the server validates
against without an additional coercion pass.

Tests (tests/tables.spec.js — 7 new specs, total 22 in the
table view, all 27 in the file):

- enum column edits via select dropdown — verifies the empty
  placeholder + 3 enum options render and the chosen value
  displays back in the cell.
- integer column gives a number input with min/max — verifies
  the type/min/max/step attributes derive from the schema, AND
  the draft buffer holds typeof === 'number'.
- boolean column gives a checkbox — verifies type=checkbox and
  the draft holds true after Space-toggle. (Toggle via Space,
  not Playwright's .check() helper, to dodge the click+blur
  race a focused-checkbox-inside-grid-cell hits.)
- format:date column gives a date input — verifies type=date
  and the existing value pre-populates as YYYY-MM-DD.
- multi-select enum-array column gives a multi-select.
- complex (object) column navigates to the row form on edit —
  verifies no inline editor mounts AND the navigate seam
  receives the row's URL.
- no rowSchema → falls back to plain text editor — verifies the
  best-effort behavior for directories with only table.yaml.

Bundle size: 124 KB → 127 KB (+3 KB for the factory + widget
builders).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

tables/js/context.js

@@ -84,6 +84,22 @@
             throw new Error('Spec table.yaml missing columns[]');
         }
 
+        // Optional row schema from <dir>/form.yaml — same JSON Schema
+        // the form-mode renderer uses. Phase 2 derives per-cell editor
+        // widgets from it (text/number/date/select/checkbox).
+        // Best-effort: a directory with only table.yaml still renders
+        // as a sortable/filterable table; cells fall back to plain
+        // text inputs without per-property hints.
+        let rowSchema = null;
+        try {
+            const formSpec = await readYaml(dir, 'form.yaml');
+            if (formSpec && formSpec.schema) {
+                rowSchema = formSpec.schema;
+            }
+        } catch (_) {
+            // form.yaml missing or unreadable; carry on without it.
+        }
+
         // Rows are every *.yaml in <currentdir> EXCEPT the spec
         // (table.yaml) and the row-edit form (form.yaml). They live
         // in the same directory by design — copying the directory
@@ -95,6 +111,7 @@
             description: spec.description,
             columns: spec.columns,
             defaults: spec.defaults,
+            rowSchema: rowSchema,
             rows: rows
         };
     }

tables/js/editor.js

@@ -189,45 +189,47 @@
         const col = colAt(c);
         if (!row || !col) return;
 
-        const currentText = (initial != null)
+        const propSchema = propertySchemaFor(col);
-            ? String(initial)
-            : (effectiveCellValue(row, col) == null ? '' : String(effectiveCellValue(row, col)));
 
-        const input = document.createElement('input');
+        // Complex-type cells (nested object, generic array, oneOf)
-        input.type = 'text';
+        // can't be inline-edited cleanly — punt to the row's form
-        input.className = 'zddc-table__cell-input';
+        // editor in a side panel / new page. Phase 2 ships the
-        input.value = currentText;
+        // navigation; Phase 5 may add a side-panel mount.
-        input.setAttribute('aria-label', 'Edit ' + (col.title || col.field));
+        if (isComplexSchema(propSchema)) {
+            navigateToRowForm(row);
+            return;
+        }
 
-        // Replace the cell's text content with the input. We don't
+        const currentValue = effectiveCellValue(row, col);
-        // wipe innerHTML — preserves any error-marker spans Phase 2
+        const widget = makeWidget(propSchema, col, initial != null ? initial : currentValue);
-        // adds — but wrap the input in a way that overlays the text.
+        const inputEl = widget.element;
-        // For now: stash the original text in dataset, swap in input.
+        inputEl.classList.add('zddc-table__cell-input');
+        inputEl.setAttribute('aria-label', 'Edit ' + (col.title || col.field));
+
+        // Replace the cell's text content with the editor widget.
+        // Stash the original text in dataset so cancel can restore it
+        // verbatim without re-running the formatCell logic.
         cell.setAttribute('data-display', cell.textContent || '');
         cell.textContent = '';
-        cell.appendChild(input);
+        cell.appendChild(inputEl);
-        input.focus();
+        widget.focus();
-        // If user pressed Enter/F2, position cursor at end. If they
-        // started typing a printable char, that char already replaced
-        // the value; cursor is at end naturally.
-        try { input.setSelectionRange(input.value.length, input.value.length); }
-        catch (_) { /* type=text supports it; defensive */ }
 
         app.state.editing = true;
 
         function commit() {
             if (!app.state.editing) return;
-            const newValue = input.value;
+            const newValue = widget.getValue();
             const oldRaw = app.modules.util.resolveField(row.data, col.field);
-            const oldStr = oldRaw == null ? '' : String(oldRaw);
+            // Compare by JSON-string equality so number 42 == "42"
-            if (newValue === oldStr) {
+            // entered into a number input doesn't false-positive as
-                // No change — clear any draft entry for this field
+            // a change. resolveField already returns the raw typed
-                // so we don't show a "dirty" badge for a no-op edit.
+            // value from row.data.
+            if (sameValue(oldRaw, newValue)) {
                 clearDraftField(rowKey(row), col.field);
             } else {
-                setDraft(rowKey(row), col.field, coerceForSchema(newValue, col));
+                setDraft(rowKey(row), col.field, newValue);
             }
-            tearDown(coerceForSchema(newValue, col));
+            tearDown(newValue);
         }
 
         function cancel() {
@@ -235,9 +237,9 @@
         }
 
         function tearDown(displayValue) {
-            input.removeEventListener('keydown', onKey);
+            inputEl.removeEventListener('keydown', onKey);
-            input.removeEventListener('blur', onBlur);
+            inputEl.removeEventListener('blur', onBlur);
-            const display = (displayValue != null)
+            const display = (displayValue !== undefined && displayValue !== null)
                 ? renderableText(displayValue, col)
                 : (cell.getAttribute('data-display') || '');
             cell.removeAttribute('data-display');
@@ -275,26 +277,242 @@
             }
         }
 
-        input.addEventListener('keydown', onKey);
+        inputEl.addEventListener('keydown', onKey);
-        input.addEventListener('blur', onBlur);
+        inputEl.addEventListener('blur', onBlur);
-    }
-
-    function coerceForSchema(text, col) {
-        // Phase 1 stores raw strings as drafts. Phase 2 will type-coerce
-        // here based on the row schema (integer→Number, boolean→bool,
-        // etc.). Until then, also handle the obvious case so number
-        // columns don't display "42" as a string in the table.
-        if (col.format === 'number' || col.format === 'integer') {
-            const n = Number(text);
-            if (!Number.isNaN(n) && text.trim() !== '') return n;
-        }
-        return text;
     }
 
     function renderableText(value, col) {
         return app.modules.util.formatCell(value, col.format);
     }
 
+    // --- Schema → editor widget factory --------------------------------
+
+    function propertySchemaFor(col) {
+        // Walk the row schema for this column's field. Returns null
+        // when no schema is present (best-effort: cells fall back to
+        // plain text editors). Supports a single dot-separated path
+        // — `properties.a.properties.b` for `field: "a.b"` — to mirror
+        // the existing util.resolveField conventions.
+        const ctx = app.context || {};
+        if (!ctx.rowSchema) return null;
+        const parts = String(col.field || '').split('.').filter(Boolean);
+        let s = ctx.rowSchema;
+        for (let i = 0; i < parts.length; i++) {
+            if (!s || !s.properties || !s.properties[parts[i]]) return null;
+            s = s.properties[parts[i]];
+        }
+        return s;
+    }
+
+    function isComplexSchema(s) {
+        if (!s) return false;
+        if (Array.isArray(s.oneOf) && s.oneOf.length > 0) return true;
+        if (Array.isArray(s.anyOf) && s.anyOf.length > 0) return true;
+        if (Array.isArray(s.allOf) && s.allOf.length > 0) return true;
+        if (s.type === 'object') return true;
+        if (s.type === 'array') {
+            // Multi-select-friendly arrays (string-enum + uniqueItems)
+            // get inline editing; everything else is complex.
+            const items = s.items || {};
+            const isMultiSelect = items.type === 'string'
+                && Array.isArray(items.enum) && items.enum.length > 0
+                && s.uniqueItems === true;
+            return !isMultiSelect;
+        }
+        return false;
+    }
+
+    function makeWidget(propSchema, col, initialValue) {
+        // Prefers explicit JSON Schema hints; falls back to column-spec
+        // hints (col.format / col.enum) for tables without a form.yaml;
+        // defaults to a plain text input.
+        const s = propSchema || {};
+        const colHint = col || {};
+
+        // Boolean → checkbox.
+        if (s.type === 'boolean') {
+            return widgetCheckbox(initialValue);
+        }
+
+        // Enum (string with explicit choices) → select dropdown.
+        const enumChoices = (Array.isArray(s.enum) && s.enum)
+            || (Array.isArray(colHint.enum) && colHint.enum)
+            || null;
+        if (enumChoices) {
+            return widgetSelect(enumChoices, initialValue);
+        }
+
+        // Multi-select (array of string-enum with uniqueItems).
+        if (s.type === 'array'
+            && s.items && s.items.type === 'string'
+            && Array.isArray(s.items.enum) && s.uniqueItems === true) {
+            return widgetMultiSelect(s.items.enum, initialValue);
+        }
+
+        // Number / integer → number input with min/max/step.
+        if (s.type === 'number' || s.type === 'integer'
+            || colHint.format === 'number' || colHint.format === 'integer') {
+            return widgetNumber(s, initialValue);
+        }
+
+        // Date / date-time / email — typed inputs the browser can
+        // help validate.
+        const fmt = s.format || colHint.format;
+        if (fmt === 'date')      return widgetTyped('date',  initialValue);
+        if (fmt === 'date-time') return widgetTyped('datetime-local', initialValue);
+        if (fmt === 'email')     return widgetTyped('email', initialValue);
+
+        // Long text → textarea (still inline; Phase 5 may add expand).
+        if (s.type === 'string' && Number(s.maxLength) > 200) {
+            return widgetTextarea(initialValue);
+        }
+
+        // Default: plain text input.
+        return widgetText(initialValue);
+    }
+
+    function widgetText(initial) {
+        const el = document.createElement('input');
+        el.type = 'text';
+        el.value = stringify(initial);
+        return {
+            element: el,
+            getValue: () => el.value,
+            focus: () => { el.focus(); try { el.setSelectionRange(el.value.length, el.value.length); } catch (_) {} }
+        };
+    }
+
+    function widgetTextarea(initial) {
+        const el = document.createElement('textarea');
+        el.rows = 1;
+        el.value = stringify(initial);
+        return {
+            element: el,
+            getValue: () => el.value,
+            focus: () => { el.focus(); try { el.setSelectionRange(el.value.length, el.value.length); } catch (_) {} }
+        };
+    }
+
+    function widgetTyped(htmlType, initial) {
+        const el = document.createElement('input');
+        el.type = htmlType;
+        el.value = stringify(initial);
+        return {
+            element: el,
+            getValue: () => el.value,
+            focus: () => el.focus()
+        };
+    }
+
+    function widgetNumber(s, initial) {
+        const el = document.createElement('input');
+        el.type = 'number';
+        if (s.minimum != null) el.min = String(s.minimum);
+        if (s.maximum != null) el.max = String(s.maximum);
+        if (s.type === 'integer') el.step = '1';
+        else if (s.multipleOf != null) el.step = String(s.multipleOf);
+        el.value = (initial == null || initial === '') ? '' : String(initial);
+        return {
+            element: el,
+            getValue: () => {
+                const v = el.value;
+                if (v === '') return null;
+                const n = Number(v);
+                return Number.isNaN(n) ? v : n;
+            },
+            focus: () => el.focus()
+        };
+    }
+
+    function widgetCheckbox(initial) {
+        const el = document.createElement('input');
+        el.type = 'checkbox';
+        el.checked = initial === true || initial === 'true';
+        return {
+            element: el,
+            getValue: () => el.checked,
+            focus: () => el.focus()
+        };
+    }
+
+    function widgetSelect(choices, initial) {
+        const el = document.createElement('select');
+        // Empty option lets the cell go back to "unset" without typing.
+        const empty = document.createElement('option');
+        empty.value = '';
+        empty.textContent = '—';
+        el.appendChild(empty);
+        for (let i = 0; i < choices.length; i++) {
+            const opt = document.createElement('option');
+            opt.value = String(choices[i]);
+            opt.textContent = String(choices[i]);
+            el.appendChild(opt);
+        }
+        el.value = initial == null ? '' : String(initial);
+        return {
+            element: el,
+            getValue: () => (el.value === '' ? null : el.value),
+            focus: () => el.focus()
+        };
+    }
+
+    function widgetMultiSelect(choices, initial) {
+        const el = document.createElement('select');
+        el.multiple = true;
+        el.size = Math.min(6, choices.length);
+        const initialSet = {};
+        const initArr = Array.isArray(initial) ? initial : [];
+        for (let i = 0; i < initArr.length; i++) initialSet[String(initArr[i])] = true;
+        for (let i = 0; i < choices.length; i++) {
+            const opt = document.createElement('option');
+            opt.value = String(choices[i]);
+            opt.textContent = String(choices[i]);
+            if (initialSet[opt.value]) opt.selected = true;
+            el.appendChild(opt);
+        }
+        return {
+            element: el,
+            getValue: () => {
+                const out = [];
+                for (let i = 0; i < el.options.length; i++) {
+                    if (el.options[i].selected) out.push(el.options[i].value);
+                }
+                return out;
+            },
+            focus: () => el.focus()
+        };
+    }
+
+    function stringify(v) {
+        if (v == null) return '';
+        if (typeof v === 'object') {
+            try { return JSON.stringify(v); } catch (_) { return String(v); }
+        }
+        return String(v);
+    }
+
+    function sameValue(a, b) {
+        if (a === b) return true;
+        if (a == null && b == null) return true;
+        if (a == null || b == null) return false;
+        if (typeof a === 'object' || typeof b === 'object') {
+            try { return JSON.stringify(a) === JSON.stringify(b); }
+            catch (_) { return false; }
+        }
+        // Loose-string compare so number 42 == "42" from a text input.
+        return String(a) === String(b);
+    }
+
+    function navigateToRowForm(row) {
+        // Complex-type cells punt to the row's full form editor.
+        // The url field on each context row already points at
+        // <dir>/<id>.yaml.html — the form-mode re-edit URL.
+        if (!row || !row.url) return;
+        const nav = (window.tablesApp && window.tablesApp.navigateTo)
+            || function (u) { window.location.assign(u); };
+        nav(row.url);
+    }
+
     // --- Keyboard nav -------------------------------------------------
 
     function moveSelection(dir) {

tests/tables.spec.js

@@ -340,4 +340,217 @@ test.describe('tables/ — directory-of-YAML table view', () => {
         await expect(page.locator('#table-root tbody tr')).toHaveCount(0);
         await expect(page.locator('#table-empty')).toBeHidden();
     });
+
+    // --- Phase 2: schema-driven cell editor widgets -----------------------
+
+    // A small JSON Schema covering the inline-editable types the
+    // factory recognises: string, integer with min/max, boolean,
+    // string-enum, format:date, array<enum>+uniqueItems.
+    const ROW_SCHEMA = {
+        type: 'object',
+        properties: {
+            id:       { type: 'string' },
+            title:    { type: 'string' },
+            party:    { type: 'string', enum: ['Acme', 'Beta', 'Gamma'] },
+            dueDate:  { type: 'string', format: 'date' },
+            status:   { type: 'string', enum: ['pending', 'submitted', 'accepted'] },
+            priority: { type: 'integer', minimum: 1, maximum: 5 },
+            done:     { type: 'boolean' },
+            tags: {
+                type: 'array',
+                uniqueItems: true,
+                items: { type: 'string', enum: ['blue', 'green', 'red'] },
+            },
+            // A nested-object cell — should punt to navigation rather
+            // than mount an inline editor.
+            owner: {
+                type: 'object',
+                properties: {
+                    name:  { type: 'string' },
+                    email: { type: 'string', format: 'email' },
+                },
+            },
+        },
+    };
+
+    const SCHEMA_COLUMNS = [
+        { field: 'id',       title: 'ID',       width: '6em' },
+        { field: 'title',    title: 'Title' },
+        { field: 'party',    title: 'Party' },
+        { field: 'dueDate',  title: 'Due',      format: 'date' },
+        { field: 'status',   title: 'Status' },
+        { field: 'priority', title: 'Priority' },
+        { field: 'done',     title: 'Done' },
+        { field: 'tags',     title: 'Tags' },
+        { field: 'owner',    title: 'Owner' },
+    ];
+
+    function makeSchemaRow(over) {
+        return {
+            url: `/Working/MDL/${over.id || 'D-001'}.yaml.html`,
+            data: Object.assign({
+                id: 'D-001', title: 'Sample', party: 'Acme', dueDate: '2026-05-12',
+                status: 'pending', priority: 3, done: false, tags: ['blue'],
+                owner: { name: 'Casey', email: 'c@example.com' },
+            }, over.data || {}),
+            editable: true,
+        };
+    }
+
+    const SCHEMA_ROWS = [makeSchemaRow({ id: 'D-001' }), makeSchemaRow({ id: 'D-002' })];
+
+    function colIdx(field) {
+        return SCHEMA_COLUMNS.findIndex(c => c.field === field);
+    }
+
+    test('Phase 2: enum column edits via select dropdown', async ({ page }) => {
+        await loadTableWithContext(page, {
+            columns: SCHEMA_COLUMNS,
+            rows: SCHEMA_ROWS,
+            rowSchema: ROW_SCHEMA,
+        });
+        await page.waitForSelector('#table-root tbody tr');
+
+        const partyCell = page.locator('#table-root tbody tr').nth(0)
+            .locator('[role="gridcell"]').nth(colIdx('party'));
+        await partyCell.dblclick();
+        const select = partyCell.locator('select.zddc-table__cell-input');
+        await expect(select).toBeVisible();
+        // Empty placeholder + 3 enum options.
+        await expect(select.locator('option')).toHaveCount(4);
+        await select.selectOption('Beta');
+        await page.keyboard.press('Enter');
+        await expect(partyCell).toContainText('Beta');
+    });
+
+    test('Phase 2: integer column gives a number input with min/max', async ({ page }) => {
+        await loadTableWithContext(page, {
+            columns: SCHEMA_COLUMNS,
+            rows: SCHEMA_ROWS,
+            rowSchema: ROW_SCHEMA,
+        });
+        await page.waitForSelector('#table-root tbody tr');
+
+        const cell = page.locator('#table-root tbody tr').nth(0)
+            .locator('[role="gridcell"]').nth(colIdx('priority'));
+        await cell.dblclick();
+        const input = cell.locator('input.zddc-table__cell-input');
+        await expect(input).toHaveAttribute('type', 'number');
+        await expect(input).toHaveAttribute('min', '1');
+        await expect(input).toHaveAttribute('max', '5');
+        await expect(input).toHaveAttribute('step', '1');
+
+        await input.fill('4');
+        await page.keyboard.press('Enter');
+        await expect(cell).toContainText('4');
+
+        // Draft holds a Number, not a string.
+        const draftType = await page.evaluate(() => {
+            const drafts = window.tablesApp.state.drafts;
+            const rowId = Object.keys(drafts)[0];
+            return typeof drafts[rowId].priority;
+        });
+        expect(draftType).toBe('number');
+    });
+
+    test('Phase 2: boolean column gives a checkbox', async ({ page }) => {
+        await loadTableWithContext(page, {
+            columns: SCHEMA_COLUMNS,
+            rows: SCHEMA_ROWS,
+            rowSchema: ROW_SCHEMA,
+        });
+        await page.waitForSelector('#table-root tbody tr');
+
+        const cell = page.locator('#table-root tbody tr').nth(0)
+            .locator('[role="gridcell"]').nth(colIdx('done'));
+        await cell.dblclick();
+        const cb = cell.locator('input.zddc-table__cell-input');
+        await expect(cb).toHaveAttribute('type', 'checkbox');
+        // Toggle via Space (the keyboard contract a screen-reader user
+        // would use). Avoids the click+blur race that Playwright's
+        // .check() helper hits on a focused-checkbox-inside-grid-cell.
+        await page.keyboard.press('Space');
+        await page.keyboard.press('Enter');
+
+        const draftValue = await page.evaluate(() => {
+            const drafts = window.tablesApp.state.drafts;
+            const rowId = Object.keys(drafts)[0];
+            return drafts[rowId].done;
+        });
+        expect(draftValue).toBe(true);
+    });
+
+    test('Phase 2: format:date column gives a date input', async ({ page }) => {
+        await loadTableWithContext(page, {
+            columns: SCHEMA_COLUMNS,
+            rows: SCHEMA_ROWS,
+            rowSchema: ROW_SCHEMA,
+        });
+        await page.waitForSelector('#table-root tbody tr');
+
+        const cell = page.locator('#table-root tbody tr').nth(0)
+            .locator('[role="gridcell"]').nth(colIdx('dueDate'));
+        await cell.dblclick();
+        const input = cell.locator('input.zddc-table__cell-input');
+        await expect(input).toHaveAttribute('type', 'date');
+        await expect(input).toHaveValue('2026-05-12');
+    });
+
+    test('Phase 2: multi-select enum-array column gives a multi-select', async ({ page }) => {
+        await loadTableWithContext(page, {
+            columns: SCHEMA_COLUMNS,
+            rows: SCHEMA_ROWS,
+            rowSchema: ROW_SCHEMA,
+        });
+        await page.waitForSelector('#table-root tbody tr');
+
+        const cell = page.locator('#table-root tbody tr').nth(0)
+            .locator('[role="gridcell"]').nth(colIdx('tags'));
+        await cell.dblclick();
+        const select = cell.locator('select.zddc-table__cell-input');
+        await expect(select).toBeVisible();
+        await expect(select).toHaveAttribute('multiple', '');
+    });
+
+    test('Phase 2: complex (object) column navigates to the row form on edit', async ({ page }) => {
+        await loadTableWithContext(page, {
+            columns: SCHEMA_COLUMNS,
+            rows: SCHEMA_ROWS,
+            rowSchema: ROW_SCHEMA,
+        });
+        await page.waitForSelector('#table-root tbody tr');
+
+        // Stub navigation seam — see how the editor punts to the
+        // form for inline-uneditable types.
+        await page.evaluate(() => {
+            window.__navTarget = null;
+            window.tablesApp.navigateTo = url => { window.__navTarget = url; };
+        });
+
+        const cell = page.locator('#table-root tbody tr').nth(0)
+            .locator('[role="gridcell"]').nth(colIdx('owner'));
+        await cell.dblclick();
+        // No inline editor mounted.
+        await expect(cell.locator('.zddc-table__cell-input')).toHaveCount(0);
+        const target = await page.evaluate(() => window.__navTarget);
+        expect(target).toContain('.yaml.html');
+    });
+
+    test('Phase 2: no rowSchema → falls back to plain text editor', async ({ page }) => {
+        await loadTableWithContext(page, {
+            // No rowSchema in the context — same as a directory with
+            // table.yaml but no form.yaml.
+            columns: SCHEMA_COLUMNS,
+            rows: SCHEMA_ROWS,
+        });
+        await page.waitForSelector('#table-root tbody tr');
+
+        const cell = page.locator('#table-root tbody tr').nth(0)
+            .locator('[role="gridcell"]').nth(colIdx('party'));
+        await cell.dblclick();
+        // Default text input — even for a column that COULD have been
+        // an enum dropdown if the schema had been provided.
+        const input = cell.locator('input.zddc-table__cell-input');
+        await expect(input).toHaveAttribute('type', 'text');
+    });
 });

zddc/internal/handler/tables.html

@@ -891,7 +891,7 @@ body.help-open .app-header {
             </svg>
             <div class="header-title-group">
                 <span class="app-header__title" id="table-title">ZDDC Table</span>
-                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-alpha · 2026-05-09 14:15:35 · e6d9966-dirty</span></span>
+                <span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-alpha · 2026-05-09 15:17:08 · 08ce8a1-dirty</span></span>
             </div>
         </div>
         <div class="header-right">
@@ -2068,6 +2068,22 @@ body.help-open .app-header {
             throw new Error('Spec table.yaml missing columns[]');
         }
 
+        // Optional row schema from <dir>/form.yaml — same JSON Schema
+        // the form-mode renderer uses. Phase 2 derives per-cell editor
+        // widgets from it (text/number/date/select/checkbox).
+        // Best-effort: a directory with only table.yaml still renders
+        // as a sortable/filterable table; cells fall back to plain
+        // text inputs without per-property hints.
+        let rowSchema = null;
+        try {
+            const formSpec = await readYaml(dir, 'form.yaml');
+            if (formSpec && formSpec.schema) {
+                rowSchema = formSpec.schema;
+            }
+        } catch (_) {
+            // form.yaml missing or unreadable; carry on without it.
+        }
+
         // Rows are every *.yaml in <currentdir> EXCEPT the spec
         // (table.yaml) and the row-edit form (form.yaml). They live
         // in the same directory by design — copying the directory
@@ -2079,6 +2095,7 @@ body.help-open .app-header {
             description: spec.description,
             columns: spec.columns,
             defaults: spec.defaults,
+            rowSchema: rowSchema,
             rows: rows
         };
     }
@@ -2687,45 +2704,47 @@ body.help-open .app-header {
         const col = colAt(c);
         if (!row || !col) return;
 
-        const currentText = (initial != null)
+        const propSchema = propertySchemaFor(col);
-            ? String(initial)
-            : (effectiveCellValue(row, col) == null ? '' : String(effectiveCellValue(row, col)));
 
-        const input = document.createElement('input');
+        // Complex-type cells (nested object, generic array, oneOf)
-        input.type = 'text';
+        // can't be inline-edited cleanly — punt to the row's form
-        input.className = 'zddc-table__cell-input';
+        // editor in a side panel / new page. Phase 2 ships the
-        input.value = currentText;
+        // navigation; Phase 5 may add a side-panel mount.
-        input.setAttribute('aria-label', 'Edit ' + (col.title || col.field));
+        if (isComplexSchema(propSchema)) {
+            navigateToRowForm(row);
+            return;
+        }
 
-        // Replace the cell's text content with the input. We don't
+        const currentValue = effectiveCellValue(row, col);
-        // wipe innerHTML — preserves any error-marker spans Phase 2
+        const widget = makeWidget(propSchema, col, initial != null ? initial : currentValue);
-        // adds — but wrap the input in a way that overlays the text.
+        const inputEl = widget.element;
-        // For now: stash the original text in dataset, swap in input.
+        inputEl.classList.add('zddc-table__cell-input');
+        inputEl.setAttribute('aria-label', 'Edit ' + (col.title || col.field));
+
+        // Replace the cell's text content with the editor widget.
+        // Stash the original text in dataset so cancel can restore it
+        // verbatim without re-running the formatCell logic.
         cell.setAttribute('data-display', cell.textContent || '');
         cell.textContent = '';
-        cell.appendChild(input);
+        cell.appendChild(inputEl);
-        input.focus();
+        widget.focus();
-        // If user pressed Enter/F2, position cursor at end. If they
-        // started typing a printable char, that char already replaced
-        // the value; cursor is at end naturally.
-        try { input.setSelectionRange(input.value.length, input.value.length); }
-        catch (_) { /* type=text supports it; defensive */ }
 
         app.state.editing = true;
 
         function commit() {
             if (!app.state.editing) return;
-            const newValue = input.value;
+            const newValue = widget.getValue();
             const oldRaw = app.modules.util.resolveField(row.data, col.field);
-            const oldStr = oldRaw == null ? '' : String(oldRaw);
+            // Compare by JSON-string equality so number 42 == "42"
-            if (newValue === oldStr) {
+            // entered into a number input doesn't false-positive as
-                // No change — clear any draft entry for this field
+            // a change. resolveField already returns the raw typed
-                // so we don't show a "dirty" badge for a no-op edit.
+            // value from row.data.
+            if (sameValue(oldRaw, newValue)) {
                 clearDraftField(rowKey(row), col.field);
             } else {
-                setDraft(rowKey(row), col.field, coerceForSchema(newValue, col));
+                setDraft(rowKey(row), col.field, newValue);
             }
-            tearDown(coerceForSchema(newValue, col));
+            tearDown(newValue);
         }
 
         function cancel() {
@@ -2733,9 +2752,9 @@ body.help-open .app-header {
         }
 
         function tearDown(displayValue) {
-            input.removeEventListener('keydown', onKey);
+            inputEl.removeEventListener('keydown', onKey);
-            input.removeEventListener('blur', onBlur);
+            inputEl.removeEventListener('blur', onBlur);
-            const display = (displayValue != null)
+            const display = (displayValue !== undefined && displayValue !== null)
                 ? renderableText(displayValue, col)
                 : (cell.getAttribute('data-display') || '');
             cell.removeAttribute('data-display');
@@ -2773,26 +2792,242 @@ body.help-open .app-header {
             }
         }
 
-        input.addEventListener('keydown', onKey);
+        inputEl.addEventListener('keydown', onKey);
-        input.addEventListener('blur', onBlur);
+        inputEl.addEventListener('blur', onBlur);
-    }
-
-    function coerceForSchema(text, col) {
-        // Phase 1 stores raw strings as drafts. Phase 2 will type-coerce
-        // here based on the row schema (integer→Number, boolean→bool,
-        // etc.). Until then, also handle the obvious case so number
-        // columns don't display "42" as a string in the table.
-        if (col.format === 'number' || col.format === 'integer') {
-            const n = Number(text);
-            if (!Number.isNaN(n) && text.trim() !== '') return n;
-        }
-        return text;
     }
 
     function renderableText(value, col) {
         return app.modules.util.formatCell(value, col.format);
     }
 
+    // --- Schema → editor widget factory --------------------------------
+
+    function propertySchemaFor(col) {
+        // Walk the row schema for this column's field. Returns null
+        // when no schema is present (best-effort: cells fall back to
+        // plain text editors). Supports a single dot-separated path
+        // — `properties.a.properties.b` for `field: "a.b"` — to mirror
+        // the existing util.resolveField conventions.
+        const ctx = app.context || {};
+        if (!ctx.rowSchema) return null;
+        const parts = String(col.field || '').split('.').filter(Boolean);
+        let s = ctx.rowSchema;
+        for (let i = 0; i < parts.length; i++) {
+            if (!s || !s.properties || !s.properties[parts[i]]) return null;
+            s = s.properties[parts[i]];
+        }
+        return s;
+    }
+
+    function isComplexSchema(s) {
+        if (!s) return false;
+        if (Array.isArray(s.oneOf) && s.oneOf.length > 0) return true;
+        if (Array.isArray(s.anyOf) && s.anyOf.length > 0) return true;
+        if (Array.isArray(s.allOf) && s.allOf.length > 0) return true;
+        if (s.type === 'object') return true;
+        if (s.type === 'array') {
+            // Multi-select-friendly arrays (string-enum + uniqueItems)
+            // get inline editing; everything else is complex.
+            const items = s.items || {};
+            const isMultiSelect = items.type === 'string'
+                && Array.isArray(items.enum) && items.enum.length > 0
+                && s.uniqueItems === true;
+            return !isMultiSelect;
+        }
+        return false;
+    }
+
+    function makeWidget(propSchema, col, initialValue) {
+        // Prefers explicit JSON Schema hints; falls back to column-spec
+        // hints (col.format / col.enum) for tables without a form.yaml;
+        // defaults to a plain text input.
+        const s = propSchema || {};
+        const colHint = col || {};
+
+        // Boolean → checkbox.
+        if (s.type === 'boolean') {
+            return widgetCheckbox(initialValue);
+        }
+
+        // Enum (string with explicit choices) → select dropdown.
+        const enumChoices = (Array.isArray(s.enum) && s.enum)
+            || (Array.isArray(colHint.enum) && colHint.enum)
+            || null;
+        if (enumChoices) {
+            return widgetSelect(enumChoices, initialValue);
+        }
+
+        // Multi-select (array of string-enum with uniqueItems).
+        if (s.type === 'array'
+            && s.items && s.items.type === 'string'
+            && Array.isArray(s.items.enum) && s.uniqueItems === true) {
+            return widgetMultiSelect(s.items.enum, initialValue);
+        }
+
+        // Number / integer → number input with min/max/step.
+        if (s.type === 'number' || s.type === 'integer'
+            || colHint.format === 'number' || colHint.format === 'integer') {
+            return widgetNumber(s, initialValue);
+        }
+
+        // Date / date-time / email — typed inputs the browser can
+        // help validate.
+        const fmt = s.format || colHint.format;
+        if (fmt === 'date')      return widgetTyped('date',  initialValue);
+        if (fmt === 'date-time') return widgetTyped('datetime-local', initialValue);
+        if (fmt === 'email')     return widgetTyped('email', initialValue);
+
+        // Long text → textarea (still inline; Phase 5 may add expand).
+        if (s.type === 'string' && Number(s.maxLength) > 200) {
+            return widgetTextarea(initialValue);
+        }
+
+        // Default: plain text input.
+        return widgetText(initialValue);
+    }
+
+    function widgetText(initial) {
+        const el = document.createElement('input');
+        el.type = 'text';
+        el.value = stringify(initial);
+        return {
+            element: el,
+            getValue: () => el.value,
+            focus: () => { el.focus(); try { el.setSelectionRange(el.value.length, el.value.length); } catch (_) {} }
+        };
+    }
+
+    function widgetTextarea(initial) {
+        const el = document.createElement('textarea');
+        el.rows = 1;
+        el.value = stringify(initial);
+        return {
+            element: el,
+            getValue: () => el.value,
+            focus: () => { el.focus(); try { el.setSelectionRange(el.value.length, el.value.length); } catch (_) {} }
+        };
+    }
+
+    function widgetTyped(htmlType, initial) {
+        const el = document.createElement('input');
+        el.type = htmlType;
+        el.value = stringify(initial);
+        return {
+            element: el,
+            getValue: () => el.value,
+            focus: () => el.focus()
+        };
+    }
+
+    function widgetNumber(s, initial) {
+        const el = document.createElement('input');
+        el.type = 'number';
+        if (s.minimum != null) el.min = String(s.minimum);
+        if (s.maximum != null) el.max = String(s.maximum);
+        if (s.type === 'integer') el.step = '1';
+        else if (s.multipleOf != null) el.step = String(s.multipleOf);
+        el.value = (initial == null || initial === '') ? '' : String(initial);
+        return {
+            element: el,
+            getValue: () => {
+                const v = el.value;
+                if (v === '') return null;
+                const n = Number(v);
+                return Number.isNaN(n) ? v : n;
+            },
+            focus: () => el.focus()
+        };
+    }
+
+    function widgetCheckbox(initial) {
+        const el = document.createElement('input');
+        el.type = 'checkbox';
+        el.checked = initial === true || initial === 'true';
+        return {
+            element: el,
+            getValue: () => el.checked,
+            focus: () => el.focus()
+        };
+    }
+
+    function widgetSelect(choices, initial) {
+        const el = document.createElement('select');
+        // Empty option lets the cell go back to "unset" without typing.
+        const empty = document.createElement('option');
+        empty.value = '';
+        empty.textContent = '—';
+        el.appendChild(empty);
+        for (let i = 0; i < choices.length; i++) {
+            const opt = document.createElement('option');
+            opt.value = String(choices[i]);
+            opt.textContent = String(choices[i]);
+            el.appendChild(opt);
+        }
+        el.value = initial == null ? '' : String(initial);
+        return {
+            element: el,
+            getValue: () => (el.value === '' ? null : el.value),
+            focus: () => el.focus()
+        };
+    }
+
+    function widgetMultiSelect(choices, initial) {
+        const el = document.createElement('select');
+        el.multiple = true;
+        el.size = Math.min(6, choices.length);
+        const initialSet = {};
+        const initArr = Array.isArray(initial) ? initial : [];
+        for (let i = 0; i < initArr.length; i++) initialSet[String(initArr[i])] = true;
+        for (let i = 0; i < choices.length; i++) {
+            const opt = document.createElement('option');
+            opt.value = String(choices[i]);
+            opt.textContent = String(choices[i]);
+            if (initialSet[opt.value]) opt.selected = true;
+            el.appendChild(opt);
+        }
+        return {
+            element: el,
+            getValue: () => {
+                const out = [];
+                for (let i = 0; i < el.options.length; i++) {
+                    if (el.options[i].selected) out.push(el.options[i].value);
+                }
+                return out;
+            },
+            focus: () => el.focus()
+        };
+    }
+
+    function stringify(v) {
+        if (v == null) return '';
+        if (typeof v === 'object') {
+            try { return JSON.stringify(v); } catch (_) { return String(v); }
+        }
+        return String(v);
+    }
+
+    function sameValue(a, b) {
+        if (a === b) return true;
+        if (a == null && b == null) return true;
+        if (a == null || b == null) return false;
+        if (typeof a === 'object' || typeof b === 'object') {
+            try { return JSON.stringify(a) === JSON.stringify(b); }
+            catch (_) { return false; }
+        }
+        // Loose-string compare so number 42 == "42" from a text input.
+        return String(a) === String(b);
+    }
+
+    function navigateToRowForm(row) {
+        // Complex-type cells punt to the row's full form editor.
+        // The url field on each context row already points at
+        // <dir>/<id>.yaml.html — the form-mode re-edit URL.
+        if (!row || !row.url) return;
+        const nav = (window.tablesApp && window.tablesApp.navigateTo)
+            || function (u) { window.location.assign(u); };
+        nav(row.url);
+    }
+
     // --- Keyboard nav -------------------------------------------------
 
     function moveSelection(dir) {