refactor(interp): one keyword chip renderer instead of four copies

Author: ph33nx

packages/ui/src/components/natal-chart.ts

@@ -31,6 +31,7 @@ import {
 import {
 	type InterpSection,
 	interpAccordionStyles,
+	renderKeywordChips,
 } from '../utils/interp-accordion.js';
 import { display, displayList } from '../utils/localized.js';
 import { capitalize, lookupKey } from '../utils/string.js';
@@ -1169,11 +1170,7 @@ export class RoxyNatalChart extends RoxyDataElement<WheelChart> {
 					aside: [display(p, 'sign'), deg].filter(Boolean).join(' '),
 					body: lead,
 					extra: html`${detail ? html`<p>${detail}</p>` : nothing}
-					${
-						interp.keywords?.length
-							? html`<div class="interp-keywords">${interp.keywords.map((k) => html`<span class="kw">${k}</span>`)}</div>`
-							: nothing
-					}`,
+					${renderKeywordChips(interp.keywords)}`,
 				};
 			});
 		return this.renderInterpretation(

packages/ui/src/components/synastry-chart.ts

@@ -14,7 +14,10 @@ import {
 	formatNumber,
 	normalizeAspect,
 } from '../utils/format.js';
-import { interpAccordionStyles } from '../utils/interp-accordion.js';
+import {
+	interpAccordionStyles,
+	renderKeywordChips,
+} from '../utils/interp-accordion.js';
 import { display } from '../utils/localized.js';
 import { capitalize } from '../utils/string.js';
 
@@ -583,11 +586,7 @@ export class RoxySynastryChart extends RoxyDataElement<CalculateSynastryResponse
 						: nothing
 				}
 				${meaning.description?.short ? html`<p>${meaning.description.short}</p>` : nothing}
-				${
-					meaning.keywords?.length
-						? html`<div class="interp-keywords">${meaning.keywords.map((k) => html`<span class="kw">${k}</span>`)}</div>`
-						: nothing
-				}
+				${renderKeywordChips(meaning.keywords)}
 			</div>
 		</details>`;
 	}

packages/ui/src/components/transit-wheel.ts

@@ -28,6 +28,7 @@ import {
 import {
 	type InterpSection,
 	interpAccordionStyles,
+	renderKeywordChips,
 } from '../utils/interp-accordion.js';
 import { display } from '../utils/localized.js';
 import { capitalize } from '../utils/string.js';
@@ -1035,11 +1036,7 @@ export class RoxyTransitWheel extends RoxyDataElement<CalculateTransitAspectsRes
 					extra: html`${t.impact ? html`<p><strong>${this.t('Impact')}:</strong> ${t.impact}</p>` : nothing}
 					${t.timing ? html`<p><strong>${this.t('Timing')}:</strong> ${t.timing}</p>` : nothing}
 					${t.guidance ? html`<p><strong>${this.t('Guidance')}:</strong> ${t.guidance}</p>` : nothing}
-					${
-						t.keywords?.length
-							? html`<div class="interp-keywords">${t.keywords.map((k) => html`<span class="kw">${k}</span>`)}</div>`
-							: nothing
-					}`,
+					${renderKeywordChips(t.keywords)}`,
 				};
 			});
 		return this.renderInterpretation(

packages/ui/src/utils/interp-accordion.ts

@@ -142,6 +142,12 @@ export const interpAccordionStyles = css`
 	${readingDetailStyles}
 `;
 
+/** The keyword chips a reading carries, or nothing. One renderer because four components drew the identical row, and the markup has to match {@link readingDetailStyles}, which is the pairing that drifts when it is copied. */
+export function renderKeywordChips(keywords: readonly string[] | undefined) {
+	if (!keywords?.length) return nothing;
+	return html`<div class="interp-keywords">${keywords.map((k) => html`<span class="kw">${k}</span>`)}</div>`;
+}
+
 /** The prose an endpoint returns ABOUT one contact: a summary, up to three labelled lines, and the keyword chips under them. Every field is optional, so a narrower response renders fewer rows rather than empty ones. */
 export interface ReadingDetail {
 	summary?: string;
@@ -161,11 +167,7 @@ export function renderReadingDetail(
 		value ? html`<p><strong>${t(label)}</strong> ${value}</p>` : nothing;
 	return html`${d.summary ? html`<p>${d.summary}</p>` : nothing}
 		${line('Impact:', d.impact)}${line('Timing:', d.timing)}${line('Guidance:', d.guidance)}
-		${
-			d.keywords?.length
-				? html`<div class="interp-keywords">${d.keywords.map((k) => html`<span class="kw">${k}</span>`)}</div>`
-				: nothing
-		}`;
+		${renderKeywordChips(d.keywords)}`;
 }
 
 /**

packages/ui/tests/utils.test.ts

@@ -1024,15 +1024,22 @@ describe('utils/interp-accordion', () => {
 	 * @remarks
 	 * The markup and its CSS live in one module precisely so they cannot drift, but nothing stops a caller from importing only the renderer: the chips then arrive unstyled, which reads as a design choice rather than a defect and no snapshot, axe pass or layout gate reports it. That is how one card ended up with a hand-copied copy of these rules that had drifted in two ways.
 	 */
-	test('every caller of renderReadingDetail ships its styles', async () => {
+	test('every caller of the shared reading renderers ships their styles', async () => {
 		const { readdir } = await import('node:fs/promises');
 		const dir = 'packages/ui/src/components';
 		const offenders: string[] = [];
 		let callers = 0;
 		for (const file of await readdir(dir)) {
 			if (!file.endsWith('.ts') || file.endsWith('.test.ts')) continue;
 			const src = await Bun.file(`${dir}/${file}`).text();
-			if (!src.includes('renderReadingDetail(')) continue;
+			// Either helper emits `.interp-keywords`, so either one obliges the caller
+			// to ship the styles for it.
+			if (
+				!src.includes('renderReadingDetail(') &&
+				!src.includes('renderKeywordChips(')
+			) {
+				continue;
+			}
 			callers++;
 			// Read the `static styles` array itself, never the whole file: the import
 			// line alone satisfies a file-wide search, so a component that imports the