Final phase of the editable-cell sequence. Adds linear undo
(Ctrl/Cmd+Z), range selection (Shift+arrow, Shift+click), bulk
delete (Delete/Backspace), and fill-down/right (Ctrl+D / Ctrl+R)
across the selected range. Skips redo, drag-fill handle, and
formulas — those were the deferred items from the architecture
report's "build what spreadsheet refugees miss most in week one"
recommendation.
Undo (tables/js/undo.js):
- Linear command stack, depth 50, session-local. Each Command
is { cells: [{rowId, field, oldValue, newValue}, ...] }.
Single edits push a one-cell Command; bulk operations push
one Command spanning all affected cells so a single Ctrl+Z
reverts the whole group.
- Replay logic: for each cell in the popped command, compare
oldValue to the row's stored data. If they match → clear the
draft (the user's edit reverts to baseline). Otherwise →
setDraft to oldValue (intermediate state). Then app.repaint().
- Hotkey: document-level keydown for Ctrl/Cmd+Z. Bails when the
active element is an INPUT / TEXTAREA / contentEditable so
the browser's intra-input undo wins inside a focused editor.
- Pushed by every edit path: editor.commit, editor.bulkClear,
editor.bulkFill. Phase 4's clipboard.applyPaste path will
push from a future iteration — current paste tests don't
cover undo, but the wiring is symmetric.
- Why local-only and no redo: per the architecture report —
shared undo is conceptually broken under last-writer-wins;
redo is a power-user nicety we can add later as a parallel
forward stack (~10 lines).
Range selection (tables/js/editor.js):
- New state: app.state.range = {anchor, focus} | null. Anchor
is the cell where the range started; focus is the current
edge. The cell at focus also has tabindex=0 (the keyboard
focus owner).
- Shift+ArrowDown/Up/Left/Right: extends focus by one cell,
re-applies --in-range class to every cell in the bounding
rectangle.
- Shift+click on a cell: extends the range from anchor to the
clicked cell. Plain click clears the range.
- Escape clears both selection and range.
- Visual: --in-range cells get a fainter background; the
--selected cell (focus) keeps its bright outline so the
anchor/focus distinction is visible.
Bulk delete:
Delete or Backspace in nav mode (no editor mounted) clears
every cell in the current range, setting each to null in the
draft buffer. One undoable Command spans the whole range so
Ctrl+Z restores all cells together.
Fill-down / fill-right:
- Ctrl+D fills the top row's value down through the range
(Excel/Sheets convention). Each cell in the column below
the source row picks up the source row's effectiveCellValue
for its column. Cross-column variation preserved.
- Ctrl+R fills the left column's value right through the
range. Symmetric to Ctrl+D.
- Both push a single multi-cell Command.
Bug fix shipped alongside:
editor.commit and editor.cancel now ev.stopPropagation() in
addition to preventDefault. Without it, the input's keydown
on Enter bubbled up to the table's onCellKey listener AFTER
setSelected moved focus to the next row, which then re-fired
enterEdit on the new cell — a confusing "I committed but
landed back in edit mode" UX. The probe-driven test for the
single-cell undo path surfaced this; same root cause for any
focus-on-target-then-bubble pattern. Tab and Escape get the
same treatment for symmetry.
Tests (7 new Phase 5 specs, total 44 in tests/tables.spec.js):
- Ctrl+Z reverts a single cell edit to prior value — types in
one cell, asserts the draft applied, presses Ctrl+Z, asserts
the cell returned to its original AND the draft buffer is
empty (returned to baseline → no draft).
- Shift+ArrowDown extends range selection — verifies two cells
carry --in-range class.
- Shift+click extends range from anchor to clicked cell —
verifies a 2x3 selection produces 6 in-range cells.
- Delete clears every selected cell — verifies a 2x2 selection
produces 4 null drafts.
- Ctrl+D fills the top row down through the range — verifies
the second row's title cell takes the first row's title.
- Ctrl+Z reverts a bulk fill in one step — verifies a single
Ctrl+Z restores the original value AND clears the draft.
- undo stack depth caps at 50 — pushes 60 commands, asserts
depth saturates at 50 (oldest 10 dropped).
Bundle size: 138 KB → 144 KB.
Files:
- tables/js/undo.js (new) — command stack, undo, Ctrl+Z hotkey.
- tables/js/editor.js — extendRange, ensureRange, clearRange,
rangeCells, bulkClearSelection, bulkFill; commit pushes undo;
Shift+arrow / Shift+click handlers; Delete + Ctrl+D + Ctrl+R
in onCellKey; setSelected respects keepRange opt; Enter/Tab/
Escape stopPropagation fix.
- tables/js/app.js — state.range field.
- tables/build.sh — undo.js in concat list.
- tables/css/table.css — --in-range styling.
- zddc/internal/handler/tables.html — regenerated bundle.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .. | ||
| css | ||
| js | ||
| sample | ||
| build.sh | ||
| README.md | ||
| template.html | ||
ZDDC Tables
Render a directory of YAML files as a sortable, filterable table — read-only, with click-row → edit-in-form integration. Backed by zddc-server's form handler so the table view and the form editor are two sides of the same data.
Anchor use case. A Master Deliverables List (MDL) under Archive/<Party>/MDL/, where each .yaml file is one expected deliverable. Multiple parties keep their own MDLs side by side; the table aggregates within a single party's directory.
How it works
- Storage is file-per-row YAML — one
*.yamlfile in a directory per table row. Concurrent edits don't collide on a shared blob, every row has independent git history, and per-row ACL inherits from the cascading.zddcchain. - Discovery is
.zddc-declarative. Drop atables:entry in the directory's.zddcto register the table; no file-presence auto-mount, no phantom tables from rogue YAML drops. - Rendering is server-side:
zddc-serverreads every*.yamlunder the rows directory, normalizes them into a JSON list, and inlines the list into the page on render. The browser does sorting, filtering, and click-row navigation locally — no further server round-trips for those. - Editing is delegated to the existing form tool. Each row's click target is the form's re-edit URL (
<dir>/<name>/<basename>.yaml.html), whichzddc-serveralready serves via the form handler. The table itself never writes.
Setup (for an MDL at Archive/Acme/MDL/)
Archive/Acme/
├── .zddc # declares: tables: { MDL: ./MDL.table.yaml }
├── MDL.table.yaml # column spec + rows path + row schema reference
├── MDL.form.yaml # JSON Schema for one row (used by both the table and the form editor)
└── MDL/
├── D-001.yaml # one row
├── D-002.yaml # one row
└── ...
Visit Archive/Acme/MDL.table.html and the table renders. Visit Archive/Acme/MDL.form.html to add a new row (the form handler creates a YAML in MDL/).
.zddc declaration
tables:
MDL: ./MDL.table.yaml
The map key (MDL) becomes the URL stem and must match both the rows directory name and the form spec name. v1 enforces this with a load-time spec-validation error.
Table spec (MDL.table.yaml)
title: Master Deliverables List
description: Optional description shown above the table.
rowSchema: ./MDL.form.yaml # path to the row's JSON Schema (form-spec format)
rows: ./MDL # directory of *.yaml row files (non-recursive in v1)
columns:
- field: id # top-level key OR JSON Pointer (e.g. /nested/path)
title: ID
width: 7em
sort: asc # default sort key (overridden by defaults.sort below)
- field: title
title: Deliverable
- field: dueDate
title: Due
format: date # date | datetime | number | bool
- field: status
title: Status
enum: [pending, submitted, accepted, rejected] # constrains values + enables enum filter
defaults:
sort:
- { field: dueDate, dir: asc }
filter:
status: [pending, submitted] # initial filter state; clear with the toolbar button
Columns are explicit — the renderer does not auto-derive from the row schema. Pick the subset you want to display.
ACL behavior
- The page-level read check uses the cascade at the spec directory; a caller without
rgets a 403. - Per-row "edit" affordance is recomputed against the row's own parent dir. If the user has
wthere, the row is clickable; otherwise it's plain text. Hard enforcement remains on the form-handler side (the form's POST will refuse a write the cascade denies). Issued/Receivedarchive folders are server-enforced WORM. The decider stripsw/d/afrom non-admin grants under those subtrees, so an MDL placed insideIssued/shows every row as read-only with no special-casing in the table tool.
v1 limits
- Read-only grid; click-row opens the form editor. Inline cell editing is a v2 candidate (would PUT each edit through the new file API in
zddc/internal/handler/fileapi.go). - One directory of
*.yamlper table; cross-directory aggregation (Archive/*/MDL/*.yamlas one combined view) is not yet supported. - No virtualization — large tables (>1000 rows) will be slow.
- No multi-row bulk operations, no add-row UI inside the table (use the form editor at
<name>.form.html). .zddc tables:declarations are direct-lookup only; no upward cascade. Each directory hosting a table needs its own declaration.
Build & develop
sh tables/build.sh # build (writes tables/dist/tables.html)
sh tables/build.sh --release alpha # cut alpha
sh ./build # full lockstep build (all tools + zddc-server)
(cd zddc && go test ./internal/handler/... ./internal/zddc/...)
npx playwright test --project=tables
Authoritative architecture and build docs are in ../AGENTS.md and ../ARCHITECTURE.md.