PUI-42 feat(tree-index): dim rows outside the query's matching keys #115

Merged

pienter merged 3 commits from feature/PUI-42-dimming-search-and-filters-on-treeindex into main

2026-09-22 21:26:07 +00:00

pienter commented

2026-09-22 21:02:16 +00:00

Owner

Search and filters that dim rather than remove (ADR 0012, Goal Tree Index, milestone 31, page 45).

TreeIndex takes queryOptions (owning a loaderless useIndexQuery; load is now optional there) or a definition-owned state, provides it, and renders the search box, the filters slot and the active-filter chips. The chips row moves into an internal ActiveFilters component shared with Index; Index behaviour is unchanged.
It never reloads for a query: it emits query with the committed { search, filters } (TreeQuery) and takes matching, a set of row keys; undefined matches everything.
TreeTable takes matching and matchLabels, sets data-dimmed on rows outside the set, dims only the content cells with --opacity-disabled (the level, move and select cells stay usable) and appends a hidden "Does not match." to the row header. The count is announced as "n of m match." through the table's live region.
Playground: the Pages view owns a URL-synced loaderless query state, answers the query locally with listPageMatches, and puts the status filter in the page aside. Storybook: Layout/TreeIndex → Filters with a play.
AUDIT.md for tree-index and tree-table, CONVENTIONS.md, CMS_PLAYGROUND.md; ### Added under ## Unreleased in packages/ui/CHANGELOG.md.

Checks: typecheck, lint, format:check, bun test (165), build:vue, build:storybook. Browser: search and status filter dim with the tree shape kept, URL sync, match announcements and cue, a dimmed row moved by pointer and keyboard, clear restores every row; the Filters story play runs clean.

Stacked below: the PUI-43 pull request (Tree contract section and schema definitions) targets this branch.

Search and filters that dim rather than remove (ADR 0012, Goal Tree Index, milestone 31, page 45). - `TreeIndex` takes `queryOptions` (owning a loaderless `useIndexQuery`; `load` is now optional there) or a definition-owned `state`, provides it, and renders the search box, the `filters` slot and the active-filter chips. The chips row moves into an internal `ActiveFilters` component shared with `Index`; `Index` behaviour is unchanged. - It never reloads for a query: it emits `query` with the committed `{ search, filters }` (`TreeQuery`) and takes `matching`, a set of row keys; `undefined` matches everything. - `TreeTable` takes `matching` and `matchLabels`, sets `data-dimmed` on rows outside the set, dims only the content cells with `--opacity-disabled` (the level, move and select cells stay usable) and appends a hidden "Does not match." to the row header. The count is announced as "n of m match." through the table's live region. - Playground: the Pages view owns a URL-synced loaderless query state, answers the query locally with `listPageMatches`, and puts the status filter in the page aside. Storybook: `Layout/TreeIndex → Filters` with a play. - AUDIT.md for tree-index and tree-table, CONVENTIONS.md, CMS_PLAYGROUND.md; `### Added` under `## Unreleased` in `packages/ui/CHANGELOG.md`. Checks: typecheck, lint, format:check, bun test (165), build:vue, build:storybook. Browser: search and status filter dim with the tree shape kept, URL sync, match announcements and cue, a dimmed row moved by pointer and keyboard, clear restores every row; the Filters story play runs clean. Stacked below: the PUI-43 pull request (Tree contract section and schema definitions) targets this branch.

pienter added 3 commits

2026-09-22 21:02:16 +00:00

feat(tree-index): dim rows outside the query's matching keys 9b81b2134e

TreeIndex owns the same query state as Index (useIndexQuery without a
load, or a definition-owned state) and provides it, so the filter
controls, the filters slot and the active-filter chips work unchanged.
It never reloads for a query: it emits the committed search and filters
and takes matching, a set of row keys; the rest are dimmed, keep their
move button and stay offered as destinations. The count is announced and
a dimmed row carries a hidden cue (ADR 0012). The chips row moves into an
internal ActiveFilters component shared with Index.

Refs: PUI-42

chore(examples): search and filter the Pages tree by dimming 6a19b77dd5

The Pages view owns a loaderless useIndexQuery synced to the URL, answers
TreeIndex's query event with listPageMatches (the same search and status
rule as listPages) and passes the ids as matching; the status filter sits
in the page aside.

Refs: PUI-42

test(storybook): anchor the TreeIndex Filters play on the level cue

ci / typecheck (pull_request) Successful in 47s

Details

ci / format (pull_request) Successful in 58s

Details

ci / release (pull_request) Has been skipped

Details

ci / lint (pull_request) Successful in 51s

Details

7cc2cfec4b

The level cue is part of every row header's accessible name and Team
offers two destinations, so the queries were ambiguous and the expected
announcement counted one child too few.

Refs: PUI-42

pienter merged commit 53a7c3352b into main

2026-09-22 21:26:07 +00:00

pienter deleted branch feature/PUI-42-dimming-search-and-filters-on-treeindex

2026-09-22 21:26:07 +00:00

pienter referenced this pull request from a commit

2026-09-22 21:26:09 +00:00

Merge pull request 'PUI-42 feat(tree-index): dim rows outside the query's matching keys' (#115) from feature/PUI-42-dimming-search-and-filters-on-treeindex into main