@roxyapi/ui 0.0.1 → 0.1.1

package/dist/styles/tokens.css

@@ -0,0 +1,147 @@
+/**
+ * Roxy UI design tokens. ~30 CSS custom properties that every component reads
+ * via :host selector. Light + dark defaults. Host page overrides at :root or
+ * per element. No Tailwind, no class-name overrides, no JS theme switcher.
+ *
+ * Light is the default. Dark applies under any of:
+ *   - prefers-color-scheme: dark
+ *   - [data-theme="dark"] on :root or any ancestor
+ *   - .dark class on :root or any ancestor
+ *
+ * Motion gating:
+ *   - --roxy-motion-duration defaults to 200ms. Set to 0ms to disable.
+ *   - prefers-reduced-motion: reduce forces 0ms regardless of host overrides.
+ */
+
+:root,
+:host {
+	/* Color: brand */
+	--roxy-primary: #0f172a;
+	--roxy-secondary: #475569;
+	--roxy-accent: #f59e0b;
+	/* Text-safe accent variant. amber-500 hits 2.14:1 on white which fails
+	 * WCAG AA for body text. amber-700 hits 4.5:1, used wherever the accent
+	 * tone is applied to text. Fills (planet glyphs, chart accents, badges
+	 * with non-text use) keep --roxy-accent. */
+	--roxy-accent-fg: #b45309;
+
+	/* Color: status */
+	--roxy-success: #16a34a;
+	--roxy-warning: #ea580c;
+	--roxy-danger: #dc2626;
+	--roxy-info: #0284c7;
+
+	/* Color: surface */
+	--roxy-bg: #ffffff;
+	--roxy-fg: #0a0a0a;
+	--roxy-muted: #71717a;
+	--roxy-border: #e4e4e7;
+	--roxy-ring: rgba(245, 158, 11, 0.4);
+
+	/* Typography */
+	--roxy-font-sans:
+		"Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		sans-serif;
+	--roxy-font-mono:
+		"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
+		monospace;
+
+	--roxy-text-xs: 0.75rem;
+	--roxy-text-sm: 0.875rem;
+	--roxy-text-base: 1rem;
+	--roxy-text-lg: 1.125rem;
+	--roxy-text-xl: 1.5rem;
+
+	--roxy-weight-normal: 400;
+	--roxy-weight-bold: 600;
+
+	--roxy-leading-tight: 1.2;
+	--roxy-leading-normal: 1.5;
+
+	--roxy-tracking-tight: -0.02em;
+	--roxy-tracking-normal: 0em;
+
+	/* Spacing */
+	--roxy-space-xs: 0.25rem;
+	--roxy-space-sm: 0.5rem;
+	--roxy-space-md: 1rem;
+	--roxy-space-lg: 1.5rem;
+	--roxy-space-xl: 2.5rem;
+
+	/* Radius */
+	--roxy-radius-sm: 4px;
+	--roxy-radius-md: 8px;
+	--roxy-radius-lg: 12px;
+	--roxy-radius-full: 9999px;
+
+	/* Shadow */
+	--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+	--roxy-shadow-md:
+		0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
+	--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.14);
+
+	/* Motion */
+	--roxy-motion-duration: 200ms;
+	--roxy-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Dark theme via system preference */
+@media (prefers-color-scheme: dark) {
+	:root,
+	:host {
+		--roxy-primary: #f8fafc;
+		--roxy-secondary: #94a3b8;
+		--roxy-accent: #fbbf24;
+		--roxy-accent-fg: #fbbf24;
+
+		--roxy-success: #22c55e;
+		--roxy-warning: #fb923c;
+		--roxy-danger: #ef4444;
+		--roxy-info: #38bdf8;
+
+		--roxy-bg: #0a0a0a;
+		--roxy-fg: #fafafa;
+		--roxy-muted: #a1a1aa;
+		--roxy-border: #27272a;
+		--roxy-ring: rgba(251, 191, 36, 0.45);
+
+		--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+		--roxy-shadow-md:
+			0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
+		--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
+	}
+}
+
+/* Dark theme via host opt-in */
+:root[data-theme="dark"],
+:host([data-theme="dark"]),
+.dark :host {
+	--roxy-primary: #f8fafc;
+	--roxy-secondary: #94a3b8;
+	--roxy-accent: #fbbf24;
+	--roxy-accent-fg: #fbbf24;
+
+	--roxy-success: #22c55e;
+	--roxy-warning: #fb923c;
+	--roxy-danger: #ef4444;
+	--roxy-info: #38bdf8;
+
+	--roxy-bg: #0a0a0a;
+	--roxy-fg: #fafafa;
+	--roxy-muted: #a1a1aa;
+	--roxy-border: #27272a;
+	--roxy-ring: rgba(251, 191, 36, 0.45);
+
+	--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+	--roxy-shadow-md:
+		0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
+	--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
+}
+
+/* Reduced motion override */
+@media (prefers-reduced-motion: reduce) {
+	:root,
+	:host {
+		--roxy-motion-duration: 0ms;
+	}
+}

package/dist/tokens/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Symbol constants used across components. Single source of truth so chart
+ * wheels, card headers, hexagram displays, and panchang tables stay visually
+ * consistent.
+ */
+export declare const PLANET_GLYPH: Record<string, string>;
+export declare const PLANET_ABBR: Record<string, string>;
+export declare const SIGN_GLYPH: Record<string, string>;
+export declare const SIGN_ABBR: Record<string, string>;
+export declare const SIGNS_ORDER: readonly ["Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius", "Capricorn", "Aquarius", "Pisces"];
+/** Aspect symbols. Used by synastry and natal chart aspect tables. */
+export declare const ASPECT_SYMBOL: Record<string, string>;
+/** Trigrams used by I Ching hexagrams. Eight trigrams compose 64 hexagrams. */
+export declare const TRIGRAM_GLYPH: Record<string, string>;
+/** Moon phase emoji set. Used by moon phase card. */
+export declare const MOON_PHASE_EMOJI: Record<string, string>;
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkB/C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAe9C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa7C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,eAAO,MAAM,WAAW,wIAad,CAAC;AAEX,sEAAsE;AACtE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQhD,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiBhD,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CASnD,CAAC"}

package/dist/utils/base-styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared host styles every component pulls in. Sets default font, color,
+ * container query support, and the entry fade-in.
+ */
+export declare const baseStyles: import("lit").CSSResult;
+//# sourceMappingURL=base-styles.d.ts.map

package/dist/utils/base-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-styles.d.ts","sourceRoot":"","sources":["../../src/utils/base-styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,UAAU,yBAkFtB,CAAC"}

package/dist/utils/debounce.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Lightweight debounce for input handlers. Used by location search.
+ */
+export declare function debounce<F extends (...args: never[]) => unknown>(fn: F, wait: number): F;
+//# sourceMappingURL=debounce.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAC/D,EAAE,EAAE,CAAC,EACL,IAAI,EAAE,MAAM,GACV,CAAC,CAMH"}

package/dist/utils/degree.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Math helpers for converting raw ecliptic longitude decimals into the
+ * sign / degree / minute / second triplet used across chart components.
+ */
+export interface SignPosition {
+    sign: string;
+    signIndex: number;
+    degree: number;
+    minute: number;
+    second: number;
+}
+/**
+ * Wrap longitude into [0, 360) so negative or out-of-range values still
+ * resolve to a real sign. Robust to wonky upstream data.
+ */
+export declare function normalizeLongitude(lon: number): number;
+/**
+ * Convert decimal ecliptic longitude (0-360) into sign/degree/minute/second.
+ * Used by every chart wheel and aspect table.
+ */
+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;
+/** Polar to cartesian for SVG wheel positioning. Angle in degrees, 0 at 3 o'clock. */
+export declare function polarToCartesian(cx: number, cy: number, radius: number, angleDeg: number): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=degree.d.ts.map

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

@@ -0,0 +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,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/motion.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Motion guard. All component animations honor:
+ *   1. --roxy-motion-duration CSS variable (set to 0ms to disable)
+ *   2. prefers-reduced-motion: reduce media query (forces 0ms regardless)
+ *
+ * Components apply transitions and entry animations using the duration var
+ * directly. The reduced-motion override is enforced at the tokens.css layer.
+ */
+export declare function prefersReducedMotion(): boolean;
+/** CSS snippet that components paste into their styles to read the motion duration. */
+export declare const MOTION_DURATION = "var(--roxy-motion-duration, 200ms)";
+export declare const MOTION_EASING = "var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1))";
+//# sourceMappingURL=motion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/utils/motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,wBAAgB,oBAAoB,IAAI,OAAO,CAG9C;AAED,uFAAuF;AACvF,eAAO,MAAM,eAAe,uCAAuC,CAAC;AACpE,eAAO,MAAM,aAAa,4DACgC,CAAC"}

package/package.json

@@ -1,8 +1,74 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.0.1",
-  "description": "Open source web components for the RoxyAPI catalog. One key, 10 spiritual domains, beautiful charts and forms in 30 minutes. Real release coming soon.",
+  "version": "0.1.1",
+  "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",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./styles/tokens.css": "./dist/styles/tokens.css",
+    "./registry/*": "./dist/registry/*.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "AGENTS.md",
+    "THEMING.md"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "custom-elements",
+    "shadow-dom",
+    "astrology",
+    "vedic",
+    "tarot",
+    "numerology",
+    "horoscope",
+    "kundli",
+    "natal-chart",
+    "birth-chart",
+    "iching",
+    "crystals",
+    "angel-numbers",
+    "dreams",
+    "biorhythm",
+    "shadcn",
+    "jsdelivr",
+    "roxyapi"
+  ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RoxyAPI/ui.git",
+    "directory": "packages/ui"
+  },
   "homepage": "https://roxyapi.com/ui",
-  "repository": { "type": "git", "url": "https://github.com/RoxyAPI/ui.git" }
+  "bugs": {
+    "url": "https://github.com/RoxyAPI/ui/issues"
+  },
+  "sideEffects": [
+    "./dist/components/*.js",
+    "./dist/cdn/*.js"
+  ],
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "dependencies": {
+    "lit": "^3.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
 }

package/src/components/biorhythm-chart.ts

@@ -0,0 +1,290 @@
+import { css, html, LitElement, nothing, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface DailyBiorhythm {
+	birthDate?: string;
+	targetDate?: string;
+	daysSinceBirth?: number;
+	cycles?: Record<string, number>;
+	energyRating?: number;
+	overallPhase?: string;
+	interpretation?: string;
+	advice?: string;
+	criticalAlerts?: string[];
+}
+
+interface BiorhythmDay {
+	date?: string;
+	cycles?: Record<string, number>;
+	energyRating?: number;
+}
+
+interface BiorhythmForecast {
+	birthDate?: string;
+	startDate?: string;
+	endDate?: string;
+	totalDays?: number;
+	summary?: {
+		bestDay?: string;
+		worstDay?: string;
+		criticalDayCount?: number;
+		averageEnergy?: number;
+		periodAdvice?: string;
+	};
+	days?: BiorhythmDay[];
+}
+
+interface CriticalDay {
+	date?: string;
+	cycle?: string;
+	period?: string;
+	direction?: string;
+	severity?: string;
+	advisory?: string;
+}
+
+interface CriticalDays {
+	birthDate?: string;
+	startDate?: string;
+	endDate?: string;
+	totalCriticalDays?: number;
+	criticalDays?: CriticalDay[];
+}
+
+type BiorhythmData = DailyBiorhythm & BiorhythmForecast & CriticalDays;
+
+const CYCLE_COLOR: Record<string, string> = {
+	physical: '#dc2626',
+	emotional: '#0284c7',
+	intellectual: '#16a34a',
+	intuitive: '#a855f7',
+	aesthetic: '#f59e0b',
+	awareness: '#ec4899',
+	spiritual: '#14b8a6',
+	passion: '#ef4444',
+	mastery: '#6366f1',
+	wisdom: '#475569',
+};
+
+/**
+ * Biorhythm chart. Renders /biorhythm/{daily,forecast,critical-days}.
+ */
+@customElement('roxy-biorhythm-chart')
+export class RoxyBiorhythmChart extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.head {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.energy {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-accent-fg, #b45309);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.bars {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.bar {
+				display: grid;
+				grid-template-columns: 8rem 1fr 3.5rem;
+				gap: var(--roxy-space-sm, 0.5rem);
+				align-items: center;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.track {
+				height: 14px;
+				background: var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-full, 9999px);
+				overflow: hidden;
+				position: relative;
+			}
+			.fill {
+				display: block;
+				height: 100%;
+				transition:
+					width var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+			.value {
+				font-variant-numeric: tabular-nums;
+				text-align: right;
+				color: var(--roxy-muted, #71717a);
+			}
+			.advice {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.alert {
+				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);
+				border: 1px solid color-mix(in srgb, var(--roxy-warning, #ea580c) 32%, transparent);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-sm, 0.5rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+			svg {
+				display: block;
+				width: 100%;
+				height: auto;
+			}
+			.crit {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);
+				border-radius: var(--roxy-radius-sm, 4px);
+				padding: 4px 8px;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				display: inline-block;
+				margin: 2px;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: BiorhythmData | null = null;
+
+	@property({ type: String, reflect: true })
+	mode: 'daily' | 'forecast' | 'critical-days' = 'daily';
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No biorhythm data</div>`;
+
+		if (this.mode === 'critical-days' && d.criticalDays?.length) {
+			return this.renderCritical(d);
+		}
+		if (this.mode === 'forecast' && d.days?.length) {
+			return this.renderForecast(d);
+		}
+		return this.renderDaily(d);
+	}
+
+	private renderDaily(d: DailyBiorhythm) {
+		const cycles = d.cycles ?? {};
+		const entries = Object.entries(cycles);
+		return html`<section class="wrap" aria-label="Daily biorhythm">
+			<header class="head">
+				<h2 class="title">Biorhythm</h2>
+				${
+					typeof d.energyRating === 'number'
+						? html`<span class="energy">Energy ${d.energyRating}/10</span>`
+						: nothing
+				}
+			</header>
+			<div class="bars" role="list">
+				${entries.map(([cycle, value]) => {
+					const v = typeof value === 'number' ? value : 0;
+					const pct = ((v + 1) / 2) * 100; // -1..1 -> 0..100
+					const color = CYCLE_COLOR[cycle] ?? 'var(--roxy-accent, #f59e0b)';
+					return html`<div class="bar" role="listitem">
+						<span style="text-transform: capitalize">${cycle}</span>
+						<span class="track">
+							<span
+								class="fill"
+								style="width: ${pct}%; background: ${color}"
+							></span>
+						</span>
+						<span class="value">${(v * 100).toFixed(0)}%</span>
+					</div>`;
+				})}
+			</div>
+			${d.interpretation ? html`<p class="advice">${d.interpretation}</p>` : nothing}
+			${d.advice ? html`<p class="advice">${d.advice}</p>` : nothing}
+			${
+				d.criticalAlerts?.length
+					? html`<div>
+						${d.criticalAlerts.map((a) => html`<p class="alert">${a}</p>`)}
+					</div>`
+					: nothing
+			}
+		</section>`;
+	}
+
+	private renderForecast(d: BiorhythmForecast) {
+		const days = d.days ?? [];
+		if (days.length === 0)
+			return html`<div class="roxy-empty" role="status">No forecast</div>`;
+		const w = 600;
+		const h = 160;
+		const xStep = w / Math.max(days.length - 1, 1);
+		const cycles = Object.keys(days[0]?.cycles ?? {});
+		return html`<section class="wrap" aria-label="Biorhythm forecast">
+			<header class="head">
+				<h2 class="title">Forecast</h2>
+				<span class="energy"
+					>${d.startDate ?? ''} - ${d.endDate ?? ''}</span
+				>
+			</header>
+			<svg
+				viewBox="0 0 ${w} ${h}"
+				role="img"
+				aria-label="Biorhythm cycle lines across the forecast window"
+			>
+				<title>Biorhythm forecast</title>
+				<line
+					x1="0"
+					y1=${h / 2}
+					x2=${w}
+					y2=${h / 2}
+					stroke="var(--roxy-border, #e4e4e7)"
+					stroke-width="1"
+				/>
+				${cycles.map((cycle) => {
+					const points = days
+						.map((day, i) => {
+							const v = day.cycles?.[cycle] ?? 0;
+							const x = i * xStep;
+							const y = h / 2 - v * (h / 2 - 8);
+							return `${x.toFixed(2)},${y.toFixed(2)}`;
+						})
+						.join(' ');
+					const color = CYCLE_COLOR[cycle] ?? '#475569';
+					return svg`<polyline points=${points} fill="none" stroke=${color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />`;
+				})}
+			</svg>
+			${
+				d.summary?.periodAdvice
+					? html`<p class="advice">${d.summary.periodAdvice}</p>`
+					: nothing
+			}
+		</section>`;
+	}
+
+	private renderCritical(d: CriticalDays) {
+		return html`<section class="wrap" aria-label="Critical days">
+			<header class="head">
+				<h2 class="title">Critical days</h2>
+				<span class="energy"
+					>${d.totalCriticalDays ?? d.criticalDays?.length ?? 0} total</span
+				>
+			</header>
+			<div>
+				${(d.criticalDays ?? []).map(
+					(day) => html`<span class="crit"
+						>${day.date} · ${day.cycle ?? ''} ${day.severity ?? ''}</span
+					>`,
+				)}
+			</div>
+		</section>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-biorhythm-chart': RoxyBiorhythmChart;
+	}
+}