ZDDC
d3cd662740
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>
197 lines
5.8 KiB
CSS
197 lines
5.8 KiB
CSS
/* tables/ — directory-of-YAML table view. Reuses tokens from shared/base.css. */
|
|
|
|
.table-main {
|
|
padding: var(--spacing-md);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.table-description {
|
|
margin: 0 0 var(--spacing-md);
|
|
color: var(--color-text-muted);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.table-status {
|
|
margin: 0 0 var(--spacing-md);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background: var(--color-bg-warning, #fff8e6);
|
|
border: 1px solid var(--color-border, #d6cfa3);
|
|
border-radius: var(--radius-sm, 4px);
|
|
}
|
|
|
|
.table-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
margin: 0 0 var(--spacing-sm);
|
|
}
|
|
|
|
.table-toolbar__left,
|
|
.table-toolbar__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
#table-add-row {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.table-rowcount {
|
|
color: var(--color-text-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.table-scroll {
|
|
overflow: auto;
|
|
max-height: calc(100vh - 200px);
|
|
border: 1px solid var(--color-border, #d8d8d8);
|
|
border-radius: var(--radius-sm, 4px);
|
|
}
|
|
|
|
.zddc-table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.zddc-table thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
background: var(--color-bg-elevated, #f5f5f5);
|
|
}
|
|
|
|
.zddc-table__title-row .zddc-table__th {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: left;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid var(--color-border, #d8d8d8);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.zddc-table__title-row .zddc-table__th:hover {
|
|
background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
|
|
}
|
|
|
|
.zddc-table__filter-row .zddc-table__filter-cell {
|
|
padding: 4px var(--spacing-sm);
|
|
border-bottom: 1px solid var(--color-border, #d8d8d8);
|
|
background: var(--color-bg-elevated, #f5f5f5);
|
|
}
|
|
|
|
.zddc-table__filter-text,
|
|
.zddc-table__filter-enum {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 2px 4px;
|
|
font-size: 0.85rem;
|
|
border: 1px solid var(--color-border, #d0d0d0);
|
|
border-radius: 3px;
|
|
background: var(--color-bg, #fff);
|
|
color: var(--color-text, #111);
|
|
}
|
|
|
|
.zddc-table__filter-enum {
|
|
min-height: 1.8em;
|
|
}
|
|
|
|
.zddc-table__row:nth-child(even) {
|
|
background: var(--color-bg-zebra, rgba(0, 0, 0, 0.02));
|
|
}
|
|
|
|
.zddc-table__row--readonly {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.zddc-table__cell {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-bottom: 1px solid var(--color-border-soft, rgba(0, 0, 0, 0.06));
|
|
vertical-align: top;
|
|
cursor: cell;
|
|
/* Hide the browser's default outline; the grid pattern renders
|
|
its own selection chrome via the --selected class. */
|
|
outline: none;
|
|
}
|
|
|
|
/* Currently-selected cell — Excel-style focus ring. The 2px outset
|
|
border doesn't push surrounding cells around because outline is
|
|
used instead of border. */
|
|
.zddc-table__cell--selected {
|
|
outline: 2px solid var(--color-accent, #2868c8);
|
|
outline-offset: -2px;
|
|
background: var(--color-bg-selected, rgba(40, 104, 200, 0.08));
|
|
}
|
|
|
|
/* Cells in the multi-cell range get a fainter highlight; the focus
|
|
cell (the one with --selected) stays brighter so the anchor /
|
|
focus distinction is visible. */
|
|
.zddc-table__cell--in-range:not(.zddc-table__cell--selected) {
|
|
background: var(--color-bg-range, rgba(40, 104, 200, 0.05));
|
|
}
|
|
|
|
/* Inline cell-editor input: occupies the cell verbatim, no border so
|
|
it visually replaces the cell text. The selected outline on the
|
|
surrounding td still shows. */
|
|
.zddc-table__cell-input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
background: var(--color-bg, #fff);
|
|
color: var(--color-text, #111);
|
|
font: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
/* Row-save state markers (Phase 3). The first cell of the row gets a
|
|
left-border swatch; the row tooltip on hover surfaces the state.
|
|
Colors track the state's urgency: dirty (subtle), saving (info),
|
|
queued (warm), invalid/stale (warning), errored (alert). */
|
|
.zddc-table__row--dirty td:first-child { box-shadow: inset 3px 0 0 var(--color-info, #4a90e2); }
|
|
.zddc-table__row--saving td:first-child { box-shadow: inset 3px 0 0 var(--color-muted, #888); }
|
|
.zddc-table__row--queued td:first-child { box-shadow: inset 3px 0 0 var(--color-warm, #d4a017); }
|
|
.zddc-table__row--stale td:first-child { box-shadow: inset 3px 0 0 var(--color-warning, #e8a33d); background: var(--color-bg-warning, rgba(232, 163, 61, 0.06)); }
|
|
.zddc-table__row--invalid td:first-child { box-shadow: inset 3px 0 0 var(--color-warning, #e8a33d); }
|
|
.zddc-table__row--errored td:first-child { box-shadow: inset 3px 0 0 var(--color-error, #c14242); background: var(--color-bg-error, rgba(193, 66, 66, 0.06)); }
|
|
|
|
/* Per-cell invalid marker — small red corner triangle, Excel-style.
|
|
The hover tooltip carries the validation message via title attr. */
|
|
.zddc-table__cell--invalid {
|
|
position: relative;
|
|
}
|
|
.zddc-table__cell--invalid::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 0 6px 6px 0;
|
|
border-color: transparent var(--color-error, #c14242) transparent transparent;
|
|
}
|
|
|
|
/* Status bar (table-status) when used as the stale-row prompt host. */
|
|
.table-status.table-status--prompt {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background: var(--color-bg-warning, rgba(232, 163, 61, 0.08));
|
|
border: 1px solid var(--color-warning, #e8a33d);
|
|
border-radius: var(--radius-sm, 4px);
|
|
margin-bottom: var(--spacing-sm);
|
|
color: var(--color-text, #111);
|
|
}
|
|
|
|
.table-empty {
|
|
padding: var(--spacing-lg) var(--spacing-md);
|
|
text-align: center;
|
|
color: var(--color-text-muted);
|
|
font-style: italic;
|
|
}
|