Styleguide: the element card becomes the shared item row (no dimming, actions reachable on touch), plus the search field #346

New issue

Closed

opened 2026-10-24 10:35:57 +02:00 by dominik.polakovics · 0 comments

dominik.polakovics commented

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

Owner

Mockup (definition agreed 2026-10-24): https://claude.ai/artifact/VKDHiP5SA6Nxdx5Ery762Q — sections "Proposal" (pins 5, 7, 9), "Row menu and statuses", "Decisions" G and I, "What changes where".

The first of three issues redrawing the Forms module against docs/styleguide/. This one touches no module screen: it promotes the content element card to a shared component so the module list (#2 of the chain) can reuse it instead of inventing a row design.

What changes

docs/styleguide/components.css gains two shared pieces, each with a sample and rules in styleguide.html §5:

The item row, the element card renamed by role: .item, .item__icon (28px tile), .item__head, .item__label, .item__id (mono, muted), .item__summary, .item__digest (count · rows · "+n"), .item__acts, .item__grip; modifiers --disabled, --inherited, --dense, --dragging, --cut. Geometry and order exactly as web/src/styles.css draws .ecard* today, every value a token. Two details change on the way in:
- Disabled is not dimmed. --disabled is the warn-tone tile (--tone-warn-bg / --tone-warn-strong), the eye-off mark and the .badge--warn "Disabled"; the 72% opacity goes. The 1px shadow literal goes (or becomes a token, if a shadow is kept).
- Actions on touch. .item__acts stay hover/focus-revealed with a pointer and are always visible under @media (hover: none).
- Rule text beside "List row": a thing with content is an item row; facts with actions are a list row; comparable columns are a table.
The search field: an .input with a leading icon (.search or similar role name), sample in §5 "Forms".

web/src: ElementCard.tsx renders .item*; .ecard* is renamed, not aliased (tests, styles.css, any selector in LayoutGrid/UnusedContent/drag code). The editor keeps only what the card needs beyond the shared rules (drag image, insert rows).

Documents: docs/styleguide/styleguide.html (samples, rules, the name map in §7 and brief E-list), docs/styleguide/README.md if it lists components. Nothing in the README or AGENTS.md: no engine behaviour changes.

Rule owners: none new. The card's summary/title/digest stay the server's verdicts on the node.

Skills: none; the element set and the template contract are unchanged.

Acceptance

python3 docs/styleguide/check-contrast.py exits 0; the web/ styles drift test passes (no colour literal, opacity only in disabled-control rules — the card's dim is gone, so this is what makes it pass).
styleguide.html shows the item row in every state (plain, disabled, inherited, dense, with digest, with summary) and the search field; the samples and ElementCard agree side by side.
grep -r ecard web/src finds nothing.
Existing ElementCard tests pass under the new names; a test asserts the actions are visible without hover when (hover: none) matches (or the CSS rule is covered by the styles test).

Mockup (definition agreed 2026-10-24): https://claude.ai/artifact/VKDHiP5SA6Nxdx5Ery762Q — sections "Proposal" (pins 5, 7, 9), "Row menu and statuses", "Decisions" G and I, "What changes where". The first of three issues redrawing the Forms module against `docs/styleguide/`. This one touches no module screen: it promotes the content element card to a shared component so the module list (#2 of the chain) can reuse it instead of inventing a row design. ## What changes **`docs/styleguide/components.css`** gains two shared pieces, each with a sample and rules in `styleguide.html` §5: - **The item row**, the element card renamed by role: `.item`, `.item__icon` (28px tile), `.item__head`, `.item__label`, `.item__id` (mono, muted), `.item__summary`, `.item__digest` (count · rows · "+n"), `.item__acts`, `.item__grip`; modifiers `--disabled`, `--inherited`, `--dense`, `--dragging`, `--cut`. Geometry and order exactly as `web/src/styles.css` draws `.ecard*` today, every value a token. Two details change on the way in: - **Disabled is not dimmed.** `--disabled` is the warn-tone tile (`--tone-warn-bg` / `--tone-warn-strong`), the eye-off mark and the `.badge--warn` "Disabled"; the 72% opacity goes. The 1px shadow literal goes (or becomes a token, if a shadow is kept). - **Actions on touch.** `.item__acts` stay hover/focus-revealed with a pointer and are always visible under `@media (hover: none)`. - Rule text beside "List row": a thing with content is an item row; facts with actions are a list row; comparable columns are a table. - **The search field**: an `.input` with a leading icon (`.search` or similar role name), sample in §5 "Forms". **`web/src`**: `ElementCard.tsx` renders `.item*`; `.ecard*` is renamed, not aliased (tests, `styles.css`, any selector in `LayoutGrid`/`UnusedContent`/drag code). The editor keeps only what the card needs beyond the shared rules (drag image, insert rows). **Documents**: `docs/styleguide/styleguide.html` (samples, rules, the name map in §7 and brief E-list), `docs/styleguide/README.md` if it lists components. Nothing in the README or AGENTS.md: no engine behaviour changes. **Rule owners**: none new. The card's summary/title/digest stay the server's verdicts on the node. **Skills**: none; the element set and the template contract are unchanged. ## Acceptance - `python3 docs/styleguide/check-contrast.py` exits 0; the `web/` styles drift test passes (no colour literal, `opacity` only in disabled-control rules — the card's dim is gone, so this is what makes it pass). - `styleguide.html` shows the item row in every state (plain, disabled, inherited, dense, with digest, with summary) and the search field; the samples and `ElementCard` agree side by side. - `grep -r ecard web/src` finds nothing. - Existing ElementCard tests pass under the new names; a test asserts the actions are visible without hover when `(hover: none)` matches (or the CSS rule is covered by the styles test).

dominik.polakovics added the

enhancement

ready-for-agent

labels

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

dominik.polakovics referenced this issue

2026-10-24 10:36:10 +02:00

Feature modules: the list on item rows, and tree: pages | hidden with auto-open, container tabs and a prompt that is a screen #347

dominik.polakovics referenced this issue

2026-10-24 10:36:19 +02:00

Page picker: one TreeList for both pickers, tree or list view by module and param, the page field's value row #348

dominik.polakovics referenced this issue from a commit