de24e633f9
The Driver's ask, and his negotiating point with the DX-life author depends on it being true: the components cloned from their /regions page must be REUSABLE, PARAMETERIZED components in the shared library, not private to one plugin. He named the failure mode himself — someone opens the regions plugin folder and finds the components are not reusable after all. I checked before building, and for the UI he named he was right: only the DATA and LOGIC had been promoted. So library/components/regions/RegionSectionCard.vue takes title, summary, countries and footerLabel, emits what was clicked, and knows nothing about where regions come from. The plugin version fetched its own data and owned the layout, which is exactly what made it unusable anywhere else. THE DESIGN TRAVELS WITH IT. The card carries the region-card, countries-grid and country-link CSS lifted unchanged — including the RTL chevron rules, where a "forward" chevron must mirror in Arabic while a disclosure caret must not, and where [dir="rtl"] .region-card__icon at 0-2-0 would otherwise beat the 0-1-0 --open modifier. A consumer gets the look, not a lookalike. It needs dir on an ancestor for that mirroring, which is documented in the file as a requirement. ★ THE CARD OWNS THE DISCLOSURE ROW, after the first cut got it wrong. I put the "View country posters" toggle in the consumer's slot — and immediately had to copy the footer-link styling and the rotating caret back into the plugin, re-creating the duplication this extraction exists to remove. A disclosure inside a card is a card feature; only the revealed CONTENT is the consumer's, so PosterWall stays in the slot with its fourteen props and does not become every consumer's API. ★ THE CHEVRON IS INLINE, NOT A <use href="#id">. The plugin declared the symbol once and every card referenced it. A shadow-root id is scoped to that root, so the same card mounted elsewhere would reference a symbol that does not exist — and an unresolved <use> renders NOTHING, silently. The plugin's own comment warns about that class for external hrefs; a cross-root id fails the same way. check:regions-uses-library is registered and asserts BOTH halves: the plugin imports from @map/ and renders the component, AND no longer holds the markup or the CSS it delegated. A reusability claim only a human can audit is one that rots; this one fails the day someone re-inlines a copy. Two negative controls keep it honest — the plugin still uses its own .rl-root classes, and the other tab is asserted NOT to use the card yet, so the check describes what is extracted rather than what I hope for. Two of my own mechanical edits produced valid JS and broken content on the way here, both caught by checking rather than by the parser: a line-numbered splice that dropped PosterWall's closing /> (fixed by locating boundaries by CONTENT), and a line-filtered CSS deletion that left 9 orphaned declarations and braces at 12/21 (fixed by removing rules brace-aware, then re-validating the concatenated stylesheet rather than trusting check:sfc-parse, which only proves the JS parses). |
||
|---|---|---|
| .. | ||
| charts | ||
| hints | ||
| legends | ||
| map-controls | ||
| poster | ||
| qa | ||
| regions | ||
| search | ||
| tables | ||
| PeopleGroupDetail.vue | ||
| README.md | ||
| ResearchMapFilterPanel.vue | ||
| ResearchMapSideMenu.vue | ||
| SideMenuDrawer.vue | ||
| ViewSelect.vue | ||
| WARNING.md | ||
library/components/ — shared Vue components
The map UI, built from parameterized pieces every app-profile reuses. Fix one here and every map benefits — never edit a shared component to customize one map.
library/components/
┌───────────────────────────────────────────┐
│ legends/ map-controls/ poster/ │
│ charts/ tables/ │
│ PeopleGroupDetail.vue SideMenuDrawer.vue │
│ ResearchMapFilterPanel.vue …SideMenu.vue │
└───────────────────────────────────────────┘
reused by every app-profile via @map/components/…
legends/,map-controls/,poster/each have their own README.- Every component uses
<script setup>, callsuseShadowStyles(), and reaches stores viainject('mapStore' | 'uiStore' | 'dataStore')— never a direct store import.
Full catalog + conventions:
../../documentation/architecture/components.md ·
per-file roles: ../../documentation/reference.md.