@roxyapi/ui 0.11.0 → 0.12.0

package/dist/utils/degree.d.ts

@@ -21,6 +21,8 @@ export declare function normalizeLongitude(lon: number): number;
 export declare function longitudeToSignPosition(longitude: number): SignPosition;
 /** Compact display string like "12° Leo 34'". Used in chart labels. */
 export declare function formatSignPosition(longitude: number): string;
+/** Format a within-sign decimal degree (0-30) as degree-and-minute, e.g. 17.99 to "17°59'". The reference-grade form astrologers read when the sign is already known (asteroids, lots, directed points, fixed stars). */
+export declare function formatDegreeInSign(deg: number): string;
 /**
  * The point diametrically opposite a longitude (e.g. Descendant from
  * Ascendant, IC from MC). Exact derivation, always 180 degrees away.

package/dist/utils/degree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"degree.d.ts","sourceRoot":"","sources":["../../src/utils/degree.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,CAevE;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAG5D;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAK9D;AAED,sFAAsF;AACtF,wBAAgB,gBAAgB,CAC/B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACd;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAM1B"}
+{"version":3,"file":"degree.d.ts","sourceRoot":"","sources":["../../src/utils/degree.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,CAevE;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAG5D;AAED,yNAAyN;AACzN,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAQtD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAK9D;AAED,sFAAsF;AACtF,wBAAgB,gBAAgB,CAC/B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACd;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAM1B"}

package/dist/utils/planet-color.d.ts

@@ -0,0 +1,3 @@
+/** Theme-token color for a body, by name with an index fallback. {@link capitalize} matches the canonical TitleCase keys; unmapped or localized names cycle by `index`. */
+export declare function planetColor(name: string, index?: number): string;
+//# sourceMappingURL=planet-color.d.ts.map

package/dist/utils/planet-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"planet-color.d.ts","sourceRoot":"","sources":["../../src/utils/planet-color.ts"],"names":[],"mappings":"AAqCA,2KAA2K;AAC3K,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,SAAI,GAAG,MAAM,CAM3D"}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ROXY_UI_VERSION = "0.11.0";
+export declare const ROXY_UI_VERSION = "0.12.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Web components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and more. One key, beautiful in 30 minutes.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -66,6 +66,7 @@
     "url": "https://github.com/RoxyAPI/ui/issues"
   },
   "sideEffects": [
+    "./src/components/*.ts",
     "./dist/components/*.js",
     "./dist/cdn/*.js"
   ],

package/src/components/astrocartography-map.ts

@@ -0,0 +1,436 @@
+import { css, html, nothing, svg } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { AstrocartographyResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { chevron, disclosureStyles } from '../utils/disclosure.js';
+import { planetColor } from '../utils/planet-color.js';
+
+type LineSet = AstrocartographyResponse['lines'][number];
+type GeoPoint = LineSet['ascendant']['points'][number];
+
+// Equirectangular (plate carree) projection in a 360x180 unit canvas: one unit
+// per degree. The SVG scales to the container width; the 2:1 aspect ratio holds.
+const W = 360;
+const H = 180;
+const lonToX = (lon: number): number => lon + 180;
+const latToY = (lat: number): number => 90 - lat;
+
+// Reference parallels (degrees). Tropics and polar circles use the current mean
+// obliquity; drawn as dashed guides so the curved rising/setting lines read
+// against real climate bands, not just a bare grid.
+const TROPIC = 23.44;
+const POLAR = 66.56;
+
+const formatLon = (lon: number): string =>
+	lon === 0 ? '0' : `${Math.abs(lon)}°${lon > 0 ? 'E' : 'W'}`;
+const formatLat = (lat: number): string =>
+	lat === 0 ? '0' : `${Math.abs(lat)}°${lat > 0 ? 'N' : 'S'}`;
+
+/**
+ * Split a rising/setting line into screen polylines, breaking the path wherever
+ * consecutive samples jump more than 180 degrees of longitude. Without the
+ * split, a line that crosses the antimeridian draws a stray horizontal streak
+ * straight across the whole map.
+ */
+function toSegments(points: GeoPoint[]): string[] {
+	const segments: string[][] = [];
+	let current: string[] = [];
+	let prevLon: number | null = null;
+	for (const p of points) {
+		if (prevLon !== null && Math.abs(p.longitude - prevLon) > 180) {
+			if (current.length) segments.push(current);
+			current = [];
+		}
+		current.push(`${lonToX(p.longitude)},${latToY(p.latitude)}`);
+		prevLon = p.longitude;
+	}
+	if (current.length) segments.push(current);
+	return segments.filter((s) => s.length > 1).map((s) => s.join(' '));
+}
+
+const ANGLE_LABEL: Record<string, string> = {
+	mc: 'MC',
+	ic: 'IC',
+	ascendant: 'AC',
+	descendant: 'DC',
+};
+
+/**
+ * Astrocartography (relocation) world map. Plots the four planetary lines for
+ * every body from a /astrology/astrocartography response over a labeled
+ * graticule: MC and IC as straight meridians, the Ascendant and Descendant as
+ * latitude-sampled curves. Color is per body and theme-token driven; solid
+ * lines are the Ascendant and Midheaven, dashed are the Descendant and IC.
+ */
+@customElement('roxy-astrocartography-map')
+export class RoxyAstrocartographyMap extends RoxyDataElement<AstrocartographyResponse> {
+	static styles = [
+		baseStyles,
+		disclosureStyles,
+		css`
+			.wrap {
+				width: 100%;
+				background: var(--roxy-surface, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				box-shadow: var(--roxy-shadow-sm);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+				color: var(--roxy-primary, #0f172a);
+			}
+			.meta {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			svg {
+				display: block;
+				width: 100%;
+				height: auto;
+				border-radius: var(--roxy-radius-sm, 4px);
+			}
+			.map-frame {
+				fill: color-mix(in srgb, var(--roxy-border, #e4e4e7) 12%, transparent);
+				stroke: var(--roxy-border, #e4e4e7);
+				stroke-width: 0.8;
+			}
+			.grat {
+				stroke: var(--roxy-border, #e4e4e7);
+				stroke-width: 0.4;
+				fill: none;
+			}
+			.grat-axis {
+				stroke: var(--roxy-muted, #71717a);
+				stroke-width: 0.6;
+				opacity: 0.6;
+			}
+			.grat-ref {
+				stroke: var(--roxy-secondary, #475569);
+				stroke-width: 0.4;
+				stroke-dasharray: 2 2;
+				opacity: 0.5;
+				fill: none;
+			}
+			.axis-label {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 5px;
+				font-family: var(--roxy-font-sans);
+			}
+			.acg-line {
+				fill: none;
+				stroke-width: 1;
+				opacity: 0.95;
+			}
+			.acg-line.dashed {
+				stroke-dasharray: 4 2.5;
+			}
+			.acg-glyph {
+				font-size: 8px;
+				font-family: var(--roxy-font-sans);
+				font-weight: 600;
+			}
+			.birthplace {
+				fill: var(--roxy-fg, #0a0a0a);
+				font-size: 9px;
+			}
+			.legend {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+			}
+			.legend-item {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.3rem;
+			}
+			.legend-swatch {
+				width: 14px;
+				height: 0;
+				border-top-width: 2px;
+				border-top-style: solid;
+			}
+			.legend-note {
+				width: 100%;
+				color: var(--roxy-muted, #71717a);
+			}
+			.summary {
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+			.interpretations h3 {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: 600;
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				margin: 0 0 var(--roxy-space-sm, 0.5rem);
+			}
+			.interp-card {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				margin-bottom: var(--roxy-space-xs, 0.25rem);
+			}
+			.interp-card summary {
+				cursor: pointer;
+				font-weight: 500;
+				color: var(--roxy-fg, #0a0a0a);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.interp-head {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.5rem;
+			}
+			.interp-dot {
+				width: 10px;
+				height: 10px;
+				border-radius: 50%;
+			}
+			.interp-body {
+				margin-top: var(--roxy-space-sm, 0.5rem);
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.interp-line {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.interp-line .code {
+				font-weight: 600;
+				color: var(--roxy-accent-ink, #b45309);
+				margin-right: 0.4rem;
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No astrocartography data</div>`;
+	}
+
+	protected renderData(data: AstrocartographyResponse) {
+		const lines = data.lines ?? [];
+		const bd = data.birthDetails;
+		return html`<div class="wrap">
+			<header>
+				<h2 class="title">Astrocartography</h2>
+				${
+					bd
+						? html`<div class="meta">
+							${[bd.date, bd.time].filter(Boolean).join(' · ')} ·
+							${formatLat(Math.round(bd.latitude))} ${formatLon(Math.round(bd.longitude))}
+						</div>`
+						: nothing
+				}
+			</header>
+			${this.renderMap(lines, bd)}
+			${this.renderLegend(lines)}
+			${data.summary ? html`<p class="summary">${data.summary}</p>` : nothing}
+			${this.renderInterpretations(lines)}
+		</div>`;
+	}
+
+	private renderMap(
+		lines: LineSet[],
+		bd: AstrocartographyResponse['birthDetails'],
+	) {
+		return html`<svg
+			viewBox="0 0 ${W} ${H}"
+			role="img"
+			aria-label="World map of planetary astrocartography lines"
+		>
+			<title>Astrocartography world map</title>
+			<desc>
+				Equirectangular world map. Each body has a Midheaven and Imum Coeli
+				meridian and a curved Ascendant and Descendant line, colored per body.
+			</desc>
+			<rect class="map-frame" x="0" y="0" width=${W} height=${H} />
+			${this.renderGraticule()}
+			${lines.map((l, i) => this.renderBodyLines(l, i))}
+			${
+				bd
+					? svg`<text class="birthplace" x=${lonToX(bd.longitude)} y=${latToY(bd.latitude)} text-anchor="middle" dominant-baseline="central"><title>Birthplace</title>★</text>`
+					: nothing
+			}
+		</svg>`;
+	}
+
+	private renderGraticule() {
+		const meridians = [];
+		for (let lon = -150; lon <= 150; lon += 30) {
+			const x = lonToX(lon);
+			const axis = lon === 0;
+			meridians.push(
+				svg`<line class=${axis ? 'grat-axis' : 'grat'} x1=${x} y1="0" x2=${x} y2=${H} />`,
+			);
+			meridians.push(
+				svg`<text class="axis-label" x=${x} y=${H - 2} text-anchor="middle">${formatLon(lon)}</text>`,
+			);
+		}
+		const parallels = [];
+		for (let lat = -60; lat <= 60; lat += 30) {
+			const y = latToY(lat);
+			const axis = lat === 0;
+			parallels.push(
+				svg`<line class=${axis ? 'grat-axis' : 'grat'} x1="0" y1=${y} x2=${W} y2=${y} />`,
+			);
+			parallels.push(
+				svg`<text class="axis-label" x="2" y=${y - 1}>${formatLat(lat)}</text>`,
+			);
+		}
+		// Tropics and polar circles as dashed climate-band references.
+		const refs = [TROPIC, -TROPIC, POLAR, -POLAR].map(
+			(lat) =>
+				svg`<line class="grat-ref" x1="0" y1=${latToY(lat)} x2=${W} y2=${latToY(lat)} />`,
+		);
+		return svg`${meridians}${parallels}${refs}`;
+	}
+
+	private renderBodyLines(line: LineSet, index: number) {
+		const color = planetColor(line.planet, index);
+		const glyph = line.symbol || line.planet.slice(0, 2);
+		const items = [
+			this.renderMeridian(
+				line.mc.longitude,
+				color,
+				glyph,
+				line.planet,
+				'mc',
+				false,
+			),
+			this.renderMeridian(
+				line.ic.longitude,
+				color,
+				glyph,
+				line.planet,
+				'ic',
+				true,
+			),
+			this.renderCurve(
+				line.ascendant.points,
+				color,
+				glyph,
+				line.planet,
+				'ascendant',
+				false,
+			),
+			this.renderCurve(
+				line.descendant.points,
+				color,
+				glyph,
+				line.planet,
+				'descendant',
+				true,
+			),
+		];
+		return svg`${items}`;
+	}
+
+	private renderMeridian(
+		lon: number,
+		color: string,
+		glyph: string,
+		planet: string,
+		angle: string,
+		dashed: boolean,
+	) {
+		const x = lonToX(lon);
+		// MC label rides the top edge, IC the bottom, so the two meridians of one
+		// body never stack their glyphs at the same point.
+		const labelY = angle === 'ic' ? H - 7 : 9;
+		return svg`<g>
+			<line class=${`acg-line${dashed ? ' dashed' : ''}`} stroke=${color} x1=${x} y1="0" x2=${x} y2=${H}><title>${planet} ${ANGLE_LABEL[angle]} line</title></line>
+			<text class="acg-glyph" fill=${color} x=${x} y=${labelY} text-anchor="middle" dominant-baseline="central">${glyph}</text>
+		</g>`;
+	}
+
+	private renderCurve(
+		points: GeoPoint[],
+		color: string,
+		glyph: string,
+		planet: string,
+		angle: string,
+		dashed: boolean,
+	) {
+		const segments = toSegments(points ?? []);
+		if (segments.length === 0) return nothing;
+		// Label at the sample nearest the equator, the most visible band.
+		const anchor = (points ?? []).reduce(
+			(best, p) => (Math.abs(p.latitude) < Math.abs(best.latitude) ? p : best),
+			points[0] ?? { latitude: 0, longitude: 0 },
+		);
+		return svg`<g>
+			${segments.map(
+				(pts) =>
+					svg`<polyline class=${`acg-line${dashed ? ' dashed' : ''}`} stroke=${color} points=${pts}><title>${planet} ${ANGLE_LABEL[angle]} line</title></polyline>`,
+			)}
+			<text class="acg-glyph" fill=${color} x=${lonToX(anchor.longitude)} y=${latToY(anchor.latitude)} text-anchor="middle" dominant-baseline="central">${glyph}</text>
+		</g>`;
+	}
+
+	private renderLegend(lines: LineSet[]) {
+		if (lines.length === 0) return nothing;
+		return html`<div class="legend">
+			${lines.map((l, i) => {
+				const color = planetColor(l.planet, i);
+				return html`<span class="legend-item">
+					<span class="legend-swatch" style=${`border-top-color: ${color}`}></span>
+					${l.symbol ? html`${l.symbol} ` : nothing}${l.planet}
+				</span>`;
+			})}
+			<span class="legend-note">Solid lines are the Ascendant and Midheaven, dashed are the Descendant and IC.</span>
+		</div>`;
+	}
+
+	private renderInterpretations(lines: LineSet[]) {
+		if (lines.length === 0) return nothing;
+		return html`<section class="interpretations">
+			<h3>Planetary lines</h3>
+			${lines.map((l, i) => {
+				const color = planetColor(l.planet, i);
+				const rows: Array<[string, string]> = [
+					['MC', l.mc.interpretation],
+					['IC', l.ic.interpretation],
+					['AC', l.ascendant.interpretation],
+					['DC', l.descendant.interpretation],
+				];
+				return html`<details class="interp-card" name="acg-lines" ?open=${i === 0}>
+					<summary>
+						<span class="interp-head">
+							<span class="interp-dot" style=${`background: ${color}`}></span>
+							${l.symbol ? html`${l.symbol} ` : nothing}${l.planet}
+						</span>
+						${chevron()}
+					</summary>
+					<div class="interp-body">
+						${rows
+							.filter(([, text]) => text)
+							.map(
+								([code, text]) =>
+									html`<p class="interp-line"><span class="code">${code}</span>${text}</p>`,
+							)}
+					</div>
+				</details>`;
+			})}
+		</section>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-astrocartography-map': RoxyAstrocartographyMap;
+	}
+}

package/src/components/dosha-card.ts

@@ -47,6 +47,18 @@ export class RoxyDoshaCard extends RoxyDataElement<DoshaData> {
 				font-weight: var(--roxy-weight-bold, 600);
 				text-transform: capitalize;
 			}
+			.subtype {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.subtype .subtype-label {
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				margin-right: 0.4rem;
+			}
 			.badge {
 				display: inline-flex;
 				align-items: center;
@@ -135,14 +147,15 @@ export class RoxyDoshaCard extends RoxyDataElement<DoshaData> {
 						? 1
 						: 0;
 		const pct = tier * 33;
+		// A present dosha is never "good news": keep the ramp in the warning/danger
+		// family so a Mild severity does not paint green and read as benign. The bar
+		// width already conveys the tier.
 		const barColor =
 			tier === 3
 				? 'var(--roxy-danger)'
-				: tier === 2
+				: tier >= 1
 					? 'var(--roxy-warning)'
-					: tier === 1
-						? 'var(--roxy-success)'
-						: 'transparent';
+					: 'transparent';
 
 		return html`<article
 			class="card"
@@ -154,6 +167,13 @@ export class RoxyDoshaCard extends RoxyDataElement<DoshaData> {
 					${present ? 'Present' : 'Absent'}
 				</span>
 			</header>
+			${
+				'type' in d && d.type
+					? html`<p class="subtype">
+						<span class="subtype-label">${this.type === 'sadhesati' ? 'Current phase' : 'Type'}</span>${d.type}
+					</p>`
+					: nothing
+			}
 			${
 				d.severity
 					? html`<div
@@ -195,18 +215,30 @@ export class RoxyDoshaCard extends RoxyDataElement<DoshaData> {
 
 	private renderEffects(d: DoshaData) {
 		if (!d.effects) return nothing;
-		const entries = Object.entries(d.effects).filter(
-			([, v]) => typeof v === 'string' && v.length > 0,
-		);
-		if (entries.length === 0) return nothing;
-		return html`<div class="effects">
-			${entries.map(
-				([k, v]) => html`<div>
-					<h3>${k}</h3>
-					<p>${v}</p>
-				</div>`,
-			)}
-		</div>`;
+		// Effects mix flat string fields (marriage, career...) with a nested map
+		// (Sadhesati effects.phases: { Rising, Peak, Setting }). Render both; the
+		// old string-only filter silently dropped the phase-specific effects, which
+		// are the substance of a Sade Sati reading.
+		const sections: unknown[] = [];
+		for (const [key, value] of Object.entries(
+			d.effects as Record<string, unknown>,
+		)) {
+			if (typeof value === 'string' && value.length > 0) {
+				sections.push(html`<div><h3>${key}</h3><p>${value}</p></div>`);
+			} else if (value && typeof value === 'object') {
+				for (const [nestedKey, nestedValue] of Object.entries(
+					value as Record<string, unknown>,
+				)) {
+					if (typeof nestedValue === 'string' && nestedValue.length > 0) {
+						sections.push(
+							html`<div><h3>${nestedKey}</h3><p>${nestedValue}</p></div>`,
+						);
+					}
+				}
+			}
+		}
+		if (sections.length === 0) return nothing;
+		return html`<div class="effects">${sections}</div>`;
 	}
 }