feat(styleguide): the element card becomes the shared item row, plus the search field #355

Merged

dominik.polakovics merged 1 commit from afk/346 into main

2026-10-24 10:57:35 +02:00

dominik.polakovics commented

2026-10-24 10:49:30 +02:00

Owner

Closes #346

What changes

docs/styleguide/components.css gains two shared pieces:

The item row: the element card, renamed by role. Slots: .item, __grip (optional; the grid uses :has(> .item__grip) so a module entry can drop it), __icon, __main, __head, __label, __mark (the eye-off), __id, __summary, __digest (with -count, -sep, -row, -more), __acts. Modifiers: --disabled, --inherited, --cut, --dragging, --dense. The geometry and order are the card's; every colour is a token.
The search field (.search): an .input with a leading icon.

docs/styleguide/styleguide.html:

§5 has a new item board: plain, with digest, disabled, inherited, cut, dense, and a module entry with no grip. Four rules go with it.
The item / list / table rule sits beside "List row". The panel rule now says element cards are item rows.
§5 "Forms" has the search sample and its rule.
§7 has a name-map row, and E3 and E5 each got a note.
check-contrast.py names the disabled tile beside "Note bar warn"; it is the same pair, so no new token was needed.

web/src:

.ecard* → .item*, renamed rather than aliased (__uid → __id, __actions → __acts, __disabled → __mark). This covers ElementCard.tsx, four other components, ten test files and styles.css. grep -rn ecard web/src finds nothing.
styles.css draws the shared rules value for value. Editor-only extras sit after them: lock marker, thumbnails, --opens, --outdated, __extra, and the drag-time hide.
styles.css has no styleguide tokens yet (brief E1 is still pending). So its :root gains the five names from tokens.css that the rules need, with the same values: --color-bg, --color-surface, --color-surface-sunken, --tone-warn-bg, --tone-warn-strong. E1 deletes them along with the rest of that block.
New web/src/test/itemRow.test.ts parses both stylesheets. It asserts:
- the @media (hover: none) rule reveals .item__acts (jsdom can't evaluate media queries, so the CSS rule is what's tested);
- item rules set opacity only for the actions' reveal or a disabled state;
- item rules contain no colour literal or primitive token;
- the editor styles every class the shared row names.

Changes made on the way in

Disabled is not dimmed. It is the warn tile (--tone-warn-bg / --tone-warn-strong), the eye-off mark and the Disabled badge. The 72% opacity is gone.
The 1px shadow literal is gone.
Cut and dragging no longer use opacity. I went beyond the issue's text here: the issue only names the disabled dim, but cut (.55) and dragging (.35) also dimmed with opacity, and the styleguide's rule allows opacity only for disabled controls. Both are now a dashed edge on the sunken ground. The cut card keeps its "Cut" badge, so the state is still in words.
The id (#uid) is muted, not faint, because faint is for icons only.
On touch, the actions are always visible, under @media (hover: none).

Left as is

.item__digest-row--disabled still uses opacity. Its selector names a disabled state, and brief E3 covers dimmed text.
.item__lock and .item--outdated keep their amber primitives until E1. The test lists them as known exceptions.
The dense row's label can wrap at phone width, exactly as .ecard--dense did before.

Docs and skills

No engine behaviour changes, so README.md, scaffold/site/AGENTS.md and the skills are untouched.
The card's summary, title and digest are still the server's verdicts; no new rule owner.

Verification

npx vitest run: 133 files / 3382 tests pass.
npx tsc --noEmit -p .: OK.
npm run build: OK.
python3 docs/styleguide/check-contrast.py: 47 pairs, 0 failing.
go test ./docs/ ./internal/server/ ./cmd/harness/: OK.
The styleguide samples were checked in headless Chromium at 1100px and 390px.

🤖 Generated with Claude Code

Closes #346 ## What changes **`docs/styleguide/components.css`** gains two shared pieces: - **The item row**: the element card, renamed by role. Slots: `.item`, `__grip` (optional; the grid uses `:has(> .item__grip)` so a module entry can drop it), `__icon`, `__main`, `__head`, `__label`, `__mark` (the eye-off), `__id`, `__summary`, `__digest` (with `-count`, `-sep`, `-row`, `-more`), `__acts`. Modifiers: `--disabled`, `--inherited`, `--cut`, `--dragging`, `--dense`. The geometry and order are the card's; every colour is a token. - **The search field** (`.search`): an `.input` with a leading icon. **`docs/styleguide/styleguide.html`**: - §5 has a new item board: plain, with digest, disabled, inherited, cut, dense, and a module entry with no grip. Four rules go with it. - The item / list / table rule sits beside "List row". The panel rule now says element cards are item rows. - §5 "Forms" has the search sample and its rule. - §7 has a name-map row, and E3 and E5 each got a note. - `check-contrast.py` names the disabled tile beside "Note bar warn"; it is the same pair, so no new token was needed. **`web/src`**: - `.ecard*` → `.item*`, renamed rather than aliased (`__uid` → `__id`, `__actions` → `__acts`, `__disabled` → `__mark`). This covers `ElementCard.tsx`, four other components, ten test files and `styles.css`. `grep -rn ecard web/src` finds nothing. - `styles.css` draws the shared rules value for value. Editor-only extras sit after them: lock marker, thumbnails, `--opens`, `--outdated`, `__extra`, and the drag-time hide. - `styles.css` has no styleguide tokens yet (brief E1 is still pending). So its `:root` gains the five names from `tokens.css` that the rules need, with the same values: `--color-bg`, `--color-surface`, `--color-surface-sunken`, `--tone-warn-bg`, `--tone-warn-strong`. E1 deletes them along with the rest of that block. - New `web/src/test/itemRow.test.ts` parses both stylesheets. It asserts: - the `@media (hover: none)` rule reveals `.item__acts` (jsdom can't evaluate media queries, so the CSS rule is what's tested); - item rules set `opacity` only for the actions' reveal or a disabled state; - item rules contain no colour literal or primitive token; - the editor styles every class the shared row names. ## Changes made on the way in - **Disabled is not dimmed.** It is the warn tile (`--tone-warn-bg` / `--tone-warn-strong`), the eye-off mark and the Disabled badge. The 72% opacity is gone. - **The 1px shadow literal is gone.** - **Cut and dragging no longer use opacity.** I went beyond the issue's text here: the issue only names the disabled dim, but cut (`.55`) and dragging (`.35`) also dimmed with opacity, and the styleguide's rule allows opacity only for disabled controls. Both are now a dashed edge on the sunken ground. The cut card keeps its "Cut" badge, so the state is still in words. - **The id (`#uid`) is muted, not faint**, because faint is for icons only. - **On touch, the actions are always visible**, under `@media (hover: none)`. ## Left as is - `.item__digest-row--disabled` still uses opacity. Its selector names a disabled state, and brief E3 covers dimmed text. - `.item__lock` and `.item--outdated` keep their amber primitives until E1. The test lists them as known exceptions. - The dense row's label can wrap at phone width, exactly as `.ecard--dense` did before. ## Docs and skills - No engine behaviour changes, so `README.md`, `scaffold/site/AGENTS.md` and the skills are untouched. - The card's summary, title and digest are still the server's verdicts; no new rule owner. ## Verification - `npx vitest run`: 133 files / 3382 tests pass. - `npx tsc --noEmit -p .`: OK. - `npm run build`: OK. - `python3 docs/styleguide/check-contrast.py`: 47 pairs, 0 failing. - `go test ./docs/ ./internal/server/ ./cmd/harness/`: OK. - The styleguide samples were checked in headless Chromium at 1100px and 390px. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

dominik.polakovics added 1 commit

2026-10-24 10:49:30 +02:00

feat(styleguide): the element card becomes the shared item row, plus the search field

ci / build-and-test (pull_request) Successful in 4m56s

Details

ci / release (pull_request) Has been skipped

Details

ccf488a8ba

components.css gains the item row (.item, __grip, __icon, __main, __head,
__label, __mark, __id, __summary, __digest*, __acts; --disabled,
--inherited, --cut, --dragging, --dense) with the element card's geometry
in tokens, and the search field (.search: an .input with a leading icon).
styleguide.html samples both, in every state, with their rules, the
item/list/table rule beside "List row", the name map row and E3/E5 notes.

On the way in the row stops dimming: disabled is the warn tile, the
eye-off mark and the Disabled badge (the 72% opacity goes), cut and
dragging are a dashed edge on the sunken ground, the 1px shadow literal
goes and the id is muted rather than faint. The actions stay revealed by
hover or focus with a pointer and always show under (hover: none).

The editor renames .ecard* to .item* (no alias), adds the five
tokens.css names the rules need to its :root ahead of brief E1, and a
test parses both stylesheets: the (hover: none) reveal, no dimming, no
colour literal or primitive, and every shared slot drawn by the editor.

Closes #346

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

dominik.polakovics commented

2026-10-24 10:57:34 +02:00

Author

Owner

[autoland] verdict: pass

PASS. Signal: ci / build-and-test success (vite build, vitest, go vet, go test ./... incl. docs contrast + route/command drift tests); tsc --noEmit run locally (CI does not type-check): OK. Conventions: Conventional Commits title, Closes #346, scope matches the issue (the types.ts comment edit is needed for the 'grep -r ecard web/src finds nothing' acceptance, since 'sidecardir' contains 'ecard'). The 18px grip column now comes from :has(> .item__grip); ElementCard always renders the grip, so the geometry is the same. The five tokens added to styles.css were unused before and match tokens.css. Removing the cut and dragging dims goes beyond the issue's text, but the 'opacity only in disabled rules' acceptance requires it, and the PR says so.

[autoland] verdict: pass PASS. Signal: ci / build-and-test success (vite build, vitest, go vet, go test ./... incl. docs contrast + route/command drift tests); tsc --noEmit run locally (CI does not type-check): OK. Conventions: Conventional Commits title, Closes #346, scope matches the issue (the types.ts comment edit is needed for the 'grep -r ecard web/src finds nothing' acceptance, since 'sidecardir' contains 'ecard'). The 18px grip column now comes from :has(> .item__grip); ElementCard always renders the grip, so the geometry is the same. The five tokens added to styles.css were unused before and match tokens.css. Removing the cut and dragging dims goes beyond the issue's text, but the 'opacity only in disabled rules' acceptance requires it, and the PR says so.

dominik.polakovics merged commit 17f53ad064 into main

2026-10-24 10:57:35 +02:00

dominik.polakovics referenced this pull request from a commit

2026-10-24 10:57:35 +02:00

Merge pull request 'feat(styleguide): the element card becomes the shared item row, plus the search field' (#355) from afk/346 into main

dominik.polakovics referenced this pull request

2026-10-24 11:44:19 +02:00

feat(modules): the list as item rows, and tree: pages | hidden with auto-open, container tabs and a prompt that is a screen #356

dominik.polakovics referenced this pull request

2026-10-24 11:52:31 +02:00

feat(modules): the list as item rows, and tree: pages | hidden with auto-open, container tabs and a prompt that is a screen #356

dominik.polakovics referenced this pull request