@roxyapi/ui 0.0.1 → 0.1.1

package/dist/components/compatibility-card.js

@@ -0,0 +1,279 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// packages/ui/src/components/compatibility-card.ts
+import { css as css2, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// packages/ui/src/utils/base-styles.ts
+import { css } from "lit";
+var baseStyles = css`
+	:host {
+		display: block;
+		container-type: inline-size;
+		font-family: var(
+			--roxy-font-sans,
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			sans-serif
+		);
+		color: var(--roxy-fg, #0a0a0a);
+		background: transparent;
+		font-size: var(--roxy-text-base, 1rem);
+		line-height: var(--roxy-leading-normal, 1.5);
+		animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	@keyframes roxy-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(2px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			animation: none;
+		}
+	}
+
+	.roxy-skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--roxy-border, #e4e4e7) 0%,
+			color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
+			var(--roxy-border, #e4e4e7) 100%
+		);
+		background-size: 200% 100%;
+		animation: roxy-shimmer 1.4s ease-in-out infinite;
+		border-radius: var(--roxy-radius-md, 8px);
+	}
+
+	@keyframes roxy-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.roxy-skeleton {
+			animation: none;
+		}
+	}
+
+	.roxy-empty {
+		padding: var(--roxy-space-lg, 1.5rem);
+		color: var(--roxy-muted, #71717a);
+		text-align: center;
+		font-size: var(--roxy-text-sm, 0.875rem);
+	}
+
+	:host(:focus-within) .roxy-card {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+	}
+`;
+
+// packages/ui/src/components/compatibility-card.ts
+var RoxyCompatibilityCard = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.mode = "astrology";
+  }
+  getBreakdown() {
+    const d = this.data;
+    if (!d) return {};
+    if (d.categoryScores) return d.categoryScores;
+    if (d.categoryBreakdown) return d.categoryBreakdown;
+    const inferred = {};
+    if (typeof d.emotional === "number") inferred.emotional = d.emotional;
+    if (typeof d.communication === "number")
+      inferred.communication = d.communication;
+    if (typeof d.romance === "number") inferred.romance = d.romance;
+    if (d.elementBalance) Object.assign(inferred, d.elementBalance);
+    return inferred;
+  }
+  render() {
+    const d = this.data;
+    if (!d)
+      return html`<div class="roxy-empty" role="status">No compatibility data</div>`;
+    const score = d.overallScore ?? d.score;
+    const breakdown = this.getBreakdown();
+    return html`<article
+			class="card"
+			aria-label=${`Compatibility (${this.mode})`}
+		>
+			<div class="head">
+				<h2>${this.mode} compatibility</h2>
+				<div>
+					${typeof score === "number" ? html`<div class="score">${score}</div>` : nothing}
+					${d.rating ? html`<div class="rating">${d.rating}</div>` : nothing}
+				</div>
+			</div>
+
+			${Object.keys(breakdown).length > 0 ? html`<div role="list">
+						${Object.entries(breakdown).map(
+      ([k, v]) => html`<div class="bar-row" role="listitem">
+								<span style="text-transform: capitalize">${k}</span>
+								<span class="bar"
+									><span style="width: ${Math.max(0, Math.min(100, v))}%"></span
+								></span>
+								<span>${v}</span>
+							</div>`
+    )}
+					</div>` : nothing}
+			${d.relationshipArchetype ? html`<p>
+						<span class="archetype">${d.relationshipArchetype}</span>
+					</p>` : nothing}
+			${d.summary ? html`<p>${d.summary}</p>` : nothing}
+			${d.advice ? html`<p>${d.advice}</p>` : nothing}
+			${(d.strengths?.length ?? 0) > 0 || (d.challenges?.length ?? 0) > 0 ? html`<div class="lists">
+						${d.strengths?.length ? html`<div>
+									<h3>Strengths</h3>
+									<ul>
+										${d.strengths.map((s) => html`<li>${s}</li>`)}
+									</ul>
+								</div>` : nothing}
+						${d.challenges?.length ? html`<div>
+									<h3>Challenges</h3>
+									<ul>
+										${d.challenges.map((s) => html`<li>${s}</li>`)}
+									</ul>
+								</div>` : nothing}
+						${d.keyAspects?.length ? html`<div>
+									<h3>Key aspects</h3>
+									<ul>
+										${d.keyAspects.map((s) => html`<li>${s}</li>`)}
+									</ul>
+								</div>` : nothing}
+					</div>` : nothing}
+		</article>`;
+  }
+};
+RoxyCompatibilityCard.styles = [
+  baseStyles,
+  css2`
+			.card {
+				background: var(--roxy-bg, #fff);
+				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);
+			}
+
+			.head {
+				display: grid;
+				grid-template-columns: 1fr auto;
+				align-items: center;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.head h2 {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: capitalize;
+			}
+
+			.score {
+				font-variant-numeric: tabular-nums;
+				font-size: 2rem;
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				line-height: 1;
+			}
+			.rating {
+				color: var(--roxy-secondary, #475569);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			.bar-row {
+				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);
+			}
+			.bar {
+				height: 8px;
+				background: var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-full, 9999px);
+				overflow: hidden;
+			}
+			.bar > span {
+				display: block;
+				height: 100%;
+				background: var(--roxy-accent, #f59e0b);
+				transition:
+					width var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+			.bar-row > span:last-child {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-muted, #71717a);
+				text-align: right;
+			}
+
+			.archetype {
+				color: var(--roxy-info, #0284c7);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.lists {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.lists h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.lists ul {
+				margin: 0;
+				padding-left: var(--roxy-space-md, 1rem);
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyCompatibilityCard.prototype, "data", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], RoxyCompatibilityCard.prototype, "mode", 2);
+RoxyCompatibilityCard = __decorateClass([
+  customElement("roxy-compatibility-card")
+], RoxyCompatibilityCard);
+export {
+  RoxyCompatibilityCard
+};
+//# sourceMappingURL=compatibility-card.js.map

package/dist/components/compatibility-card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/compatibility-card.ts", "../../src/utils/base-styles.ts"],
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ninterface CompatibilityData {\n\toverallScore?: number;\n\tscore?: number;\n\trating?: string;\n\trelationshipArchetype?: string;\n\tadvice?: string;\n\tsummary?: string;\n\tcategoryScores?: Record<string, number>;\n\tcategoryBreakdown?: Record<string, number>;\n\temotional?: number;\n\tcommunication?: number;\n\tromance?: number;\n\tstrengths?: string[];\n\tchallenges?: string[];\n\tkeyAspects?: string[];\n\telementBalance?: Record<string, number>;\n\tperson1?: { name?: string; sign?: string; lifePath?: number };\n\tperson2?: { name?: string; sign?: string; lifePath?: number };\n}\n\n/**\n * Cross-domain compatibility card. Renders /astrology/compatibility-score,\n * /numerology/compatibility, or /biorhythm/compatibility responses.\n */\n@customElement('roxy-compatibility-card')\nexport class RoxyCompatibilityCard extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.card {\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.head {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: 1fr auto;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\t.head h2 {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\n\t\t\t.score {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tfont-size: 2rem;\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tline-height: 1;\n\t\t\t}\n\t\t\t.rating {\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\n\t\t\t.bar-row {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: 8rem 1fr 3.5rem;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\talign-items: center;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\t.bar {\n\t\t\t\theight: 8px;\n\t\t\t\tbackground: var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t.bar > span {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 100%;\n\t\t\t\tbackground: var(--roxy-accent, #f59e0b);\n\t\t\t\ttransition:\n\t\t\t\t\twidth var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.bar-row > span:last-child {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t.archetype {\n\t\t\t\tcolor: var(--roxy-info, #0284c7);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\n\t\t\t.lists {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\t.lists h3 {\n\t\t\t\tmargin: 0 0 var(--roxy-space-xs, 0.25rem);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t\t.lists ul {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-left: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: CompatibilityData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tmode: 'astrology' | 'numerology' | 'biorhythm' = 'astrology';\n\n\tprivate getBreakdown(): Record<string, number> {\n\t\tconst d = this.data;\n\t\tif (!d) return {};\n\t\tif (d.categoryScores) return d.categoryScores;\n\t\tif (d.categoryBreakdown) return d.categoryBreakdown;\n\t\tconst inferred: Record<string, number> = {};\n\t\tif (typeof d.emotional === 'number') inferred.emotional = d.emotional;\n\t\tif (typeof d.communication === 'number')\n\t\t\tinferred.communication = d.communication;\n\t\tif (typeof d.romance === 'number') inferred.romance = d.romance;\n\t\tif (d.elementBalance) Object.assign(inferred, d.elementBalance);\n\t\treturn inferred;\n\t}\n\n\trender() {\n\t\tconst d = this.data;\n\t\tif (!d)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No compatibility data</div>`;\n\t\tconst score = d.overallScore ?? d.score;\n\t\tconst breakdown = this.getBreakdown();\n\n\t\treturn html`<article\n\t\t\tclass=\"card\"\n\t\t\taria-label=${`Compatibility (${this.mode})`}\n\t\t>\n\t\t\t<div class=\"head\">\n\t\t\t\t<h2>${this.mode} compatibility</h2>\n\t\t\t\t<div>\n\t\t\t\t\t${\n\t\t\t\t\t\ttypeof score === 'number'\n\t\t\t\t\t\t\t? html`<div class=\"score\">${score}</div>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t\t${d.rating ? html`<div class=\"rating\">${d.rating}</div>` : nothing}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t${\n\t\t\t\tObject.keys(breakdown).length > 0\n\t\t\t\t\t? html`<div role=\"list\">\n\t\t\t\t\t\t${Object.entries(breakdown).map(\n\t\t\t\t\t\t\t([k, v]) => html`<div class=\"bar-row\" role=\"listitem\">\n\t\t\t\t\t\t\t\t<span style=\"text-transform: capitalize\">${k}</span>\n\t\t\t\t\t\t\t\t<span class=\"bar\"\n\t\t\t\t\t\t\t\t\t><span style=\"width: ${Math.max(0, Math.min(100, v))}%\"></span\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t<span>${v}</span>\n\t\t\t\t\t\t\t</div>`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\td.relationshipArchetype\n\t\t\t\t\t? html`<p>\n\t\t\t\t\t\t<span class=\"archetype\">${d.relationshipArchetype}</span>\n\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${d.summary ? html`<p>${d.summary}</p>` : nothing}\n\t\t\t${d.advice ? html`<p>${d.advice}</p>` : nothing}\n\t\t\t${\n\t\t\t\t(d.strengths?.length ?? 0) > 0 || (d.challenges?.length ?? 0) > 0\n\t\t\t\t\t? html`<div class=\"lists\">\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\td.strengths?.length\n\t\t\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t\t\t<h3>Strengths</h3>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t${d.strengths.map((s) => html`<li>${s}</li>`)}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\td.challenges?.length\n\t\t\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t\t\t<h3>Challenges</h3>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t${d.challenges.map((s) => html`<li>${s}</li>`)}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\td.keyAspects?.length\n\t\t\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t\t\t<h3>Key aspects</h3>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t${d.keyAspects.map((s) => html`<li>${s}</li>`)}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-compatibility-card': RoxyCompatibilityCard;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n"],
+  "mappings": "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",
+  "names": ["css", "css"]
+}

package/dist/components/dasha-timeline.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+interface DashaPeriod {
+    mahadashaLord?: string;
+    antardashaLord?: string;
+    pratyantardashaLord?: string;
+    lord?: string;
+    planet?: string;
+    startDate?: string;
+    endDate?: string;
+    years?: number;
+    durationYears?: number;
+}
+interface DashaData {
+    moonNakshatra?: string;
+    nakshatraName?: string;
+    nakshatraLord?: string;
+    mahadasha?: DashaPeriod;
+    antardasha?: DashaPeriod;
+    pratyantardasha?: DashaPeriod;
+    mahadashas?: DashaPeriod[];
+    antardashas?: DashaPeriod[];
+    mahadashaLord?: string;
+    mahadashaPeriod?: DashaPeriod;
+    birthDashaBalance?: {
+        lord?: string;
+        years?: number;
+    };
+    totalYears?: number;
+    remainingInMahadasha?: number;
+    remainingInAntardasha?: number;
+    remainingInPratyantardasha?: number;
+}
+/**
+ * Dasha timeline. Renders /vedic-astrology/dasha/{current,major,sub/{...}}.
+ * Default mode shows the active mahadasha + antardasha + pratyantardasha.
+ * Switch to period="major" for the full 120-year Vimshottari timeline.
+ */
+export declare class RoxyDashaTimeline extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: DashaData | null;
+    period: 'current' | 'major' | 'sub';
+    render(): import("lit").TemplateResult<1>;
+    private renderCurrent;
+    private collectPeriods;
+    private renderBar;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'roxy-dasha-timeline': RoxyDashaTimeline;
+    }
+}
+export {};
+//# sourceMappingURL=dasha-timeline.d.ts.map

package/dist/components/dasha-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dasha-timeline.d.ts","sourceRoot":"","sources":["../../src/components/dasha-timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,UAAU,WAAW;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,SAAS;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,iBAAiB,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACpC;AAED;;;;GAIG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BA8EX;IAGF,IAAI,EAAE,SAAS,GAAG,IAAI,CAAQ;IAG9B,MAAM,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,CAAa;IAEhD,MAAM;IA0CN,OAAO,CAAC,aAAa;IAkDrB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,SAAS;CAcjB;AAOD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}

package/dist/components/dasha-timeline.js

@@ -0,0 +1,269 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// packages/ui/src/components/dasha-timeline.ts
+import { css as css2, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// packages/ui/src/utils/base-styles.ts
+import { css } from "lit";
+var baseStyles = css`
+	:host {
+		display: block;
+		container-type: inline-size;
+		font-family: var(
+			--roxy-font-sans,
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			sans-serif
+		);
+		color: var(--roxy-fg, #0a0a0a);
+		background: transparent;
+		font-size: var(--roxy-text-base, 1rem);
+		line-height: var(--roxy-leading-normal, 1.5);
+		animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	@keyframes roxy-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(2px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			animation: none;
+		}
+	}
+
+	.roxy-skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--roxy-border, #e4e4e7) 0%,
+			color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
+			var(--roxy-border, #e4e4e7) 100%
+		);
+		background-size: 200% 100%;
+		animation: roxy-shimmer 1.4s ease-in-out infinite;
+		border-radius: var(--roxy-radius-md, 8px);
+	}
+
+	@keyframes roxy-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.roxy-skeleton {
+			animation: none;
+		}
+	}
+
+	.roxy-empty {
+		padding: var(--roxy-space-lg, 1.5rem);
+		color: var(--roxy-muted, #71717a);
+		text-align: center;
+		font-size: var(--roxy-text-sm, 0.875rem);
+	}
+
+	:host(:focus-within) .roxy-card {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+	}
+`;
+
+// packages/ui/src/components/dasha-timeline.ts
+var RoxyDashaTimeline = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.period = "current";
+  }
+  render() {
+    const d = this.data;
+    if (!d)
+      return html`<div class="roxy-empty" role="status">No dasha data</div>`;
+    const periods = this.collectPeriods(d);
+    const maxYears = periods.length ? Math.max(...periods.map((p) => p.durationYears ?? p.years ?? 1)) : 0;
+    return html`<div class="wrap" aria-label="Dasha timeline">
+			<header class="head">
+				<h2 class="title">
+					${this.period === "major" ? "Vimshottari Mahadasha" : this.period === "sub" ? "Antardasha" : "Active dashas"}
+				</h2>
+				${d.nakshatraName || d.moonNakshatra ? html`<div class="nakshatra">
+							Moon nakshatra: ${d.nakshatraName ?? d.moonNakshatra}
+							${d.nakshatraLord ? html`(lord ${d.nakshatraLord})` : nothing}
+						</div>` : nothing}
+			</header>
+
+			${this.period === "current" ? this.renderCurrent(d) : nothing}
+			${periods.length > 0 ? html`<div class="timeline" role="list">
+						${periods.map((p) => this.renderBar(p, maxYears))}
+					</div>` : nothing}
+		</div>`;
+  }
+  renderCurrent(d) {
+    return html`<div class="current">
+			${d.mahadasha ? html`<div>
+						<span>Mahadasha</span>
+						<strong>${d.mahadasha.lord ?? d.mahadasha.mahadashaLord}</strong>
+						${typeof d.remainingInMahadasha === "number" ? html`<small>${d.remainingInMahadasha.toFixed(1)} years left</small>` : nothing}
+					</div>` : nothing}
+			${d.antardasha ? html`<div>
+						<span>Antardasha</span>
+						<strong>${d.antardasha.lord ?? d.antardasha.antardashaLord}</strong>
+						${typeof d.remainingInAntardasha === "number" ? html`<small>${d.remainingInAntardasha.toFixed(1)} years left</small>` : nothing}
+					</div>` : nothing}
+			${d.pratyantardasha ? html`<div>
+						<span>Pratyantardasha</span>
+						<strong
+							>${d.pratyantardasha.lord ?? d.pratyantardasha.pratyantardashaLord}</strong
+						>
+						${typeof d.remainingInPratyantardasha === "number" ? html`<small
+									>${d.remainingInPratyantardasha.toFixed(2)} years left</small
+								>` : nothing}
+					</div>` : nothing}
+		</div>`;
+  }
+  collectPeriods(d) {
+    if (this.period === "major" && d.mahadashas?.length) return d.mahadashas;
+    if (this.period === "sub" && d.antardashas?.length) return d.antardashas;
+    return d.mahadashas ?? d.antardashas ?? [];
+  }
+  renderBar(p, max) {
+    const lord = p.lord ?? p.mahadashaLord ?? p.antardashaLord ?? p.planet ?? "";
+    const years = p.durationYears ?? p.years ?? 0;
+    const width = max > 0 ? years / max * 100 : 0;
+    return html`<div class="bar" role="listitem">
+			<span>${lord}</span>
+			<span class="bar-track"><span style="width: ${width}%"></span></span>
+			<span class="dates">
+				${p.startDate ? formatYear(p.startDate) : ""}
+				${p.endDate ? html`- ${formatYear(p.endDate)}` : ""}
+			</span>
+		</div>`;
+  }
+};
+RoxyDashaTimeline.styles = [
+  baseStyles,
+  css2`
+			.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);
+			}
+			.nakshatra {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			.current {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.current div span:first-child {
+				display: block;
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.current div strong {
+				font-size: var(--roxy-text-base, 1rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			.timeline {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.bar {
+				display: grid;
+				grid-template-columns: 5rem 1fr 8rem;
+				gap: var(--roxy-space-sm, 0.5rem);
+				align-items: center;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.bar-track {
+				height: 14px;
+				background: var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-full, 9999px);
+				overflow: hidden;
+			}
+			.bar-track > span {
+				display: block;
+				height: 100%;
+				background: var(--roxy-accent, #f59e0b);
+				transition:
+					width var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+			.dates {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-variant-numeric: tabular-nums;
+				text-align: right;
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyDashaTimeline.prototype, "data", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], RoxyDashaTimeline.prototype, "period", 2);
+RoxyDashaTimeline = __decorateClass([
+  customElement("roxy-dasha-timeline")
+], RoxyDashaTimeline);
+function formatYear(s) {
+  const m = s.match(/^(\d{4})/);
+  return m ? m[1] : s;
+}
+export {
+  RoxyDashaTimeline
+};
+//# sourceMappingURL=dasha-timeline.js.map

package/dist/components/dasha-timeline.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/dasha-timeline.ts", "../../src/utils/base-styles.ts"],
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ninterface DashaPeriod {\n\tmahadashaLord?: string;\n\tantardashaLord?: string;\n\tpratyantardashaLord?: string;\n\tlord?: string;\n\tplanet?: string;\n\tstartDate?: string;\n\tendDate?: string;\n\tyears?: number;\n\tdurationYears?: number;\n}\n\ninterface DashaData {\n\tmoonNakshatra?: string;\n\tnakshatraName?: string;\n\tnakshatraLord?: string;\n\tmahadasha?: DashaPeriod;\n\tantardasha?: DashaPeriod;\n\tpratyantardasha?: DashaPeriod;\n\tmahadashas?: DashaPeriod[];\n\tantardashas?: DashaPeriod[];\n\tmahadashaLord?: string;\n\tmahadashaPeriod?: DashaPeriod;\n\tbirthDashaBalance?: { lord?: string; years?: number };\n\ttotalYears?: number;\n\tremainingInMahadasha?: number;\n\tremainingInAntardasha?: number;\n\tremainingInPratyantardasha?: number;\n}\n\n/**\n * Dasha timeline. Renders /vedic-astrology/dasha/{current,major,sub/{...}}.\n * Default mode shows the active mahadasha + antardasha + pratyantardasha.\n * Switch to period=\"major\" for the full 120-year Vimshottari timeline.\n */\n@customElement('roxy-dasha-timeline')\nexport class RoxyDashaTimeline extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.wrap {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\t.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: center;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t\t.title {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.nakshatra {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\n\t\t\t.current {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-md, 1rem);\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\n\t\t\t}\n\t\t\t.current div span:first-child {\n\t\t\t\tdisplay: block;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t\t.current div strong {\n\t\t\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\n\t\t\t.timeline {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.bar {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: 5rem 1fr 8rem;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\talign-items: center;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\t.bar-track {\n\t\t\t\theight: 14px;\n\t\t\t\tbackground: var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t.bar-track > span {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 100%;\n\t\t\t\tbackground: var(--roxy-accent, #f59e0b);\n\t\t\t\ttransition:\n\t\t\t\t\twidth var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.dates {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: DashaData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tperiod: 'current' | 'major' | 'sub' = 'current';\n\n\trender() {\n\t\tconst d = this.data;\n\t\tif (!d)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No dasha data</div>`;\n\n\t\tconst periods = this.collectPeriods(d);\n\t\tconst maxYears = periods.length\n\t\t\t? Math.max(...periods.map((p) => p.durationYears ?? p.years ?? 1))\n\t\t\t: 0;\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"Dasha timeline\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">\n\t\t\t\t\t${\n\t\t\t\t\t\tthis.period === 'major'\n\t\t\t\t\t\t\t? 'Vimshottari Mahadasha'\n\t\t\t\t\t\t\t: this.period === 'sub'\n\t\t\t\t\t\t\t\t? 'Antardasha'\n\t\t\t\t\t\t\t\t: 'Active dashas'\n\t\t\t\t\t}\n\t\t\t\t</h2>\n\t\t\t\t${\n\t\t\t\t\td.nakshatraName || d.moonNakshatra\n\t\t\t\t\t\t? html`<div class=\"nakshatra\">\n\t\t\t\t\t\t\tMoon nakshatra: ${d.nakshatraName ?? d.moonNakshatra}\n\t\t\t\t\t\t\t${d.nakshatraLord ? html`(lord ${d.nakshatraLord})` : nothing}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t</header>\n\n\t\t\t${this.period === 'current' ? this.renderCurrent(d) : nothing}\n\t\t\t${\n\t\t\t\tperiods.length > 0\n\t\t\t\t\t? html`<div class=\"timeline\" role=\"list\">\n\t\t\t\t\t\t${periods.map((p) => this.renderBar(p, maxYears))}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</div>`;\n\t}\n\n\tprivate renderCurrent(d: DashaData) {\n\t\treturn html`<div class=\"current\">\n\t\t\t${\n\t\t\t\td.mahadasha\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<span>Mahadasha</span>\n\t\t\t\t\t\t<strong>${d.mahadasha.lord ?? d.mahadasha.mahadashaLord}</strong>\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\ttypeof d.remainingInMahadasha === 'number'\n\t\t\t\t\t\t\t\t? html`<small>${d.remainingInMahadasha.toFixed(1)} years left</small>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\td.antardasha\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<span>Antardasha</span>\n\t\t\t\t\t\t<strong>${d.antardasha.lord ?? d.antardasha.antardashaLord}</strong>\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\ttypeof d.remainingInAntardasha === 'number'\n\t\t\t\t\t\t\t\t? html`<small>${d.remainingInAntardasha.toFixed(1)} years left</small>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\td.pratyantardasha\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<span>Pratyantardasha</span>\n\t\t\t\t\t\t<strong\n\t\t\t\t\t\t\t>${\n\t\t\t\t\t\t\t\td.pratyantardasha.lord ?? d.pratyantardasha.pratyantardashaLord\n\t\t\t\t\t\t\t}</strong\n\t\t\t\t\t\t>\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\ttypeof d.remainingInPratyantardasha === 'number'\n\t\t\t\t\t\t\t\t? html`<small\n\t\t\t\t\t\t\t\t\t>${d.remainingInPratyantardasha.toFixed(2)} years left</small\n\t\t\t\t\t\t\t\t>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</div>`;\n\t}\n\n\tprivate collectPeriods(d: DashaData): DashaPeriod[] {\n\t\tif (this.period === 'major' && d.mahadashas?.length) return d.mahadashas;\n\t\tif (this.period === 'sub' && d.antardashas?.length) return d.antardashas;\n\t\treturn d.mahadashas ?? d.antardashas ?? [];\n\t}\n\n\tprivate renderBar(p: DashaPeriod, max: number) {\n\t\tconst lord =\n\t\t\tp.lord ?? p.mahadashaLord ?? p.antardashaLord ?? p.planet ?? '';\n\t\tconst years = p.durationYears ?? p.years ?? 0;\n\t\tconst width = max > 0 ? (years / max) * 100 : 0;\n\t\treturn html`<div class=\"bar\" role=\"listitem\">\n\t\t\t<span>${lord}</span>\n\t\t\t<span class=\"bar-track\"><span style=\"width: ${width}%\"></span></span>\n\t\t\t<span class=\"dates\">\n\t\t\t\t${p.startDate ? formatYear(p.startDate) : ''}\n\t\t\t\t${p.endDate ? html`- ${formatYear(p.endDate)}` : ''}\n\t\t\t</span>\n\t\t</div>`;\n\t}\n}\n\nfunction formatYear(s: string): string {\n\tconst m = s.match(/^(\\d{4})/);\n\treturn m ? m[1] : s;\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-dasha-timeline': RoxyDashaTimeline;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n"],
+  "mappings": "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",
+  "names": ["css", "css"]
+}