First step toward the Excel-like editable-table the user asked for.
Architecture decisions in this phase came from a focused research
pass over Notion / Airtable / AG Grid / Handsontable / Glide / W3C
ARIA APG; the design notes are in this commit's predecessor as a
research synthesis. Five phases planned; this is phase 1 of 5 and
ships the cell-selection + keyboard-navigation + per-cell editor
mount-on-demand foundation. Edits in this phase live in a client-
side draft buffer only; row-level save + ETag conflict UX is
phase 3.
Scope:
- ARIA grid pattern verbatim (W3C WAI-ARIA APG): role=grid on the
table, role=row on rows, role=gridcell on cells, roving
tabindex (only one cell carries tabindex=0; arrows move it).
This makes the grid one tab stop in the page tab order — the
documented spreadsheet UX, and also the basis for screen-reader
correctness.
- Click selects a cell. Arrow keys move selection. Tab and
Shift-Tab move with row-wrap. Home / End jump within row;
Ctrl/Cmd+Home / End jump to grid corners. Enter, F2, double-
click, or any printable character all enter edit mode. In edit
mode: Enter commits and moves down (Excel convention), Tab
commits and moves right (with row-wrap), Escape cancels and
restores the prior value, blur commits.
- Mount-on-demand cell editor: one <input> at a time is
instantiated inside the selected cell. Survives 1000-row tables
without the focus-ring churn an always-editable design would
hit, and lets Phase 2 swap the input for schema-driven widgets
(number / date / select / etc.) without restructuring.
- Draft buffer at app.state.drafts keyed by row id (the row's
re-edit URL — stable across sort and filter). When a cell
commits with a value different from row.data, the draft entry
is set; render reads from the draft via effectiveCellValue() so
the visible cell content reflects unsaved edits. No-op edits
(commit returns the original value) clear any pending draft.
- Selection survives re-paints. Sort / filter / spec changes
trigger a re-render; the editor's setSelected at end of paint()
clamps to new bounds and rebinds tabindex. The user's cell
doesn't disappear when they sort the column they're editing.
- Numeric coercion fast-path: cells whose column declares
format=number/integer coerce the input string to Number on
commit. Phase 2 will generalize this to schema-driven coercion
for date, boolean, enum, etc.
UX consequence — single-click semantics change:
The pre-existing row-click-navigates-to-form-edit behavior is
gone. Single click now selects a cell (spreadsheet-native). The
"open this row in the form editor" affordance moves to phase 2
(an explicit "Edit…" button or an icon column). The row-click-
navigation tests in tests/tables.spec.js are replaced with seven
new tests covering the editor lifecycle.
What this phase does NOT do (and which phases own it):
- Phase 2: schema-driven editor widgets (right input type per
column). Server-side validation 422 → red-corner marks. Complex
types (object, generic array, oneOf) get an "Edit…" button that
opens the side-panel form-render mode the unified bundle
already ships.
- Phase 3: row-level save on row-blur via PUT + If-Match. Stale-
row badge with "Use mine" / "Reload" on 412. Outbox carries the
offline path transparently via the existing source.js layer.
- Phase 4: copy/paste from Excel/Sheets via TSV parser, spill-
from-anchor or fill-all into a selection range.
- Phase 5: undo (linear command stack, Ctrl+Z, session-local) and
multi-cell ops (range select, bulk delete, Ctrl+D / Ctrl+R fill).
Tests (tests/tables.spec.js, all 15 pass):
- clicking a cell selects it (replaces the old row-click-navigates
test; verifies single-click does NOT navigate)
- arrow keys move cell selection
- Tab and Shift-Tab traverse cells with row-wrap
- Enter enters edit mode; Enter commits and moves down (verifies
draft is applied to visible cell + selection moves)
- Escape cancels edit, restoring prior value (verifies no-op on
draft buffer)
- typing a printable char enters edit and replaces the value
- double-click also enters edit mode
- non-editable rows still get the readonly class (cosmetic guard
for an existing convention; phase 3 will gate write submission)
Files:
- tables/js/editor.js (new) — selection + keyboard handling +
edit-mode lifecycle + draft buffer.
- tables/js/app.js — state.selected / state.editing / state.drafts
fields.
- tables/js/render.js — ARIA roles + editor.attachToCell wiring;
cells render via editor.effectiveCellValue so drafts show.
- tables/js/main.js — paint()-end editor.attachToTable +
setSelected restore.
- tables/css/table.css — selected-cell focus ring (outline,
doesn't shift surrounding cells); cell-input bare-inside-cell
styling.
- tables/build.sh — editor.js in the concat list.
- zddc/internal/handler/tables.html — regenerated bundle.
Bundle size: 117 KB → 124 KB (+7 KB for editor.js + ARIA + draft
machinery). Well within the budget the library survey identified
(Tabulator would have been +100 KB; SlickGrid +34 KB; custom is
+7 KB and we keep the no-third-party-deps invariant).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tables is the eighth HTML tool: a read-only tabular view over a
directory of YAML files declared via `tables:` in `.zddc`. Anchor use
case is the Master Deliverables List, where each row is one
`<tracking>.yaml` under `Archive/<Party>/MDL/`. Rows click through to
the existing form renderer for editing.
Schema (zddc/internal/zddc/file.go)
- New `Tables map[string]string` on ZddcFile. Map key becomes the URL
stem (`tables[MDL]` → `<dir>/MDL.table.html`); the value is a path
relative to the .zddc pointing at a `*.table.yaml` spec describing
columns + the rows directory. No upward cascade in v1 — each
directory hosting a table declares it directly.
Server handler (zddc/internal/handler/tablehandler.go)
- `RecognizeTableRequest` matches GET `/<dir>/<name>.table.html`
against the cascade's `tables:` declarations. Dispatch routes
table requests before the form-system intercept.
- `ServeTable` ACL-gates with `policy.ActionRead` and serves the
embedded `tables.html` template; client walks the directory itself
via the listing JSON or FS Access API.
- tables.html embedded via //go:embed — same pattern as form.html.
Frontend (tables/)
- Vanilla JS: app/context/util/filters/sort/render/main modules.
- Reads spec + row YAML files via window.zddc.source (HTTP polyfill
or local FS handle); js-yaml 4.1.0 vendored in shared/vendor for
client-side parsing.
- Sample fixtures under tables/sample/ for local testing.
Build + CI
- Lockstep build registers tables alongside the other 7 tools (HTML
output, embed mirror, versions.txt, release-output, tags).
- Playwright project added; `npx playwright test --project=tables`
is part of `npm test`.
Drive-by: rename mdedit Playwright selectors `#select-directory` →
`#addDirectoryBtn` to fix three pre-existing failing tests.
Drive-by: ignore locally-built `zddc/zddc-server` binary so it doesn't
get accidentally staged.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
