+ Three styles, and a real job for the segment bar +
++ Drawn on the formulation sheet, which stresses the layout hardest: four domain themes, twelve domains, + twelve mechanisms, four presets, thirteen domain chips and the longest title in the app. The three + directions share one set of craft fixes and differ only in how the options are arranged — flat, carded, or + listed. +
+
+ Counts are live, from the 12 mechanisms in{" "}
+ src/data/formulation-content.json. All three frames share one
+ selection and one scope, so a domain chosen anywhere updates the whole page.
+
+ The shipped formulation sheet +
++ Reproduced from the live component. The problems are craft, but two of them are also correctness. +
+-
+ {TODAY_DEFECTS.map((defect) => (
+
-
+
{defect.label}
+{defect.detail}
+
+ ))}
+
+ The craft fixes, shared by all three +
++ These are the parts that are not a matter of taste between the directions. +
+-
+ {craft.map((entry, index) => (
+
- {entry.term} +
- {entry.detail} +
+ Before this becomes production +
+-
+
- + + Biological, Social and Cultural should be fixed, not just labelled. + {" "} + Counts make three dead chips visible, which is an improvement — but the real answer is either to tag + mechanisms into those domains or to stop offering them. Shipping a permanent “0” is a worse admission than + shipping nothing. + +
- + Scope needs a home in the URL. If it is + not round-tripped, a shared link silently reverts to the current-results scope and the recipient sees a + different set from the sender. + +
- + The pattern group is still a navigation.{" "} + These comps show only the domain dimension restyled; patterns replace the query, so they need the + separated, arrow-marked treatment from the earlier study rather than a checkbox. + +
-
+
+ Style C’s sticky headings need a scroll-owner check.
+ {" "}
+ A sticky element inside the sheet body is a second scroll context on phones — read{" "}
+
docs/search-chrome-behaviour.mdbefore adopting it. +
+ -
+ Mockups skip two gates, not all of them.{" "}
+ Every control here is at
min-h-tap(48px) on phone; do not + relax to 44px for generic a11y guidance, which reintroduces a known{" "} +ui-smokeflake. +
+