@roxyapi/ui 0.0.1 → 0.1.1

package/dist/components/numerology-card.js

@@ -0,0 +1,274 @@
+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/numerology-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/numerology-card.ts
+var RoxyNumerologyCard = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.type = "life-path";
+  }
+  render() {
+    const d = this.data;
+    if (!d)
+      return html`<div class="roxy-empty" role="status">No numerology data</div>`;
+    const headerLabel = LABELS[this.type] ?? this.type;
+    const number = d.personalYear ?? d.number;
+    const cores = d.coreNumbers ? Object.entries(d.coreNumbers).filter(
+      ([, v]) => v !== null && v !== void 0
+    ) : [];
+    return html`<article
+			class="card"
+			aria-label=${headerLabel}
+		>
+			<div class="hero">
+				${typeof number === "number" ? html`<div class="numeral">${number}</div>` : nothing}
+				<div>
+					<p class="label">${headerLabel}</p>
+					${d.title ? html`<h2 class="title">${d.title}</h2>` : d.type ? html`<h2 class="title">
+									${d.type === "master" ? "Master number" : "Single digit"}
+								</h2>` : nothing}
+				</div>
+			</div>
+			${d.theme ? html`<p><strong>Theme:</strong> ${d.theme}</p>` : nothing}
+			${d.meaning ? html`<p class="meaning">${d.meaning}</p>` : nothing}
+			${d.advice ? html`<p>${d.advice}</p>` : nothing}
+			${d.calculation ? html`<pre class="calc">${d.calculation}</pre>` : nothing}
+			${d.keywords?.length ? html`<div class="chips">
+						${d.keywords.map((k) => html`<span>${k}</span>`)}
+					</div>` : nothing}
+			${cores.length > 0 ? html`<div class="cores">
+						${cores.map(([k, v]) => {
+      const value = typeof v === "number" ? v : v.number;
+      return html`<div class="item">
+								<span>${humanize(k)}</span>
+								<strong>${value ?? ""}</strong>
+							</div>`;
+    })}
+					</div>` : nothing}
+			${d.hasKarmicDebt && d.karmicDebtNumber ? html`<div class="karmic">
+						Karmic debt ${d.karmicDebtNumber}.
+						${d.karmicDebtMeaning ? d.karmicDebtMeaning : ""}
+					</div>` : nothing}
+		</article>`;
+  }
+};
+RoxyNumerologyCard.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);
+			}
+
+			.hero {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.numeral {
+				font-size: 4rem;
+				line-height: 1;
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				font-variant-numeric: tabular-nums;
+			}
+			.label {
+				margin: 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.meaning {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			.calc {
+				margin: 0;
+				font-family: var(--roxy-font-mono);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 30%, transparent);
+				padding: var(--roxy-space-sm, 0.5rem);
+				border-radius: var(--roxy-radius-sm, 4px);
+				word-break: break-all;
+			}
+
+			.chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.chips span {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+
+			.cores {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+				gap: var(--roxy-space-sm, 0.5rem);
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding-top: var(--roxy-space-md, 1rem);
+			}
+			.cores .item {
+				display: flex;
+				align-items: baseline;
+				gap: var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.cores .item span:first-child {
+				color: var(--roxy-muted, #71717a);
+				text-transform: capitalize;
+			}
+			.cores .item strong {
+				color: var(--roxy-accent-fg, #b45309);
+				font-variant-numeric: tabular-nums;
+				font-size: var(--roxy-text-base, 1rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.karmic {
+				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);
+				border: 1px solid color-mix(in srgb, var(--roxy-warning, #ea580c) 32%, transparent);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				border-radius: var(--roxy-radius-md, 8px);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyNumerologyCard.prototype, "data", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], RoxyNumerologyCard.prototype, "type", 2);
+RoxyNumerologyCard = __decorateClass([
+  customElement("roxy-numerology-card")
+], RoxyNumerologyCard);
+var LABELS = {
+  "life-path": "Life Path",
+  expression: "Expression",
+  "personal-year": "Personal Year",
+  chart: "Numerology chart"
+};
+function humanize(s) {
+  return s.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^\w/, (c) => c.toUpperCase());
+}
+export {
+  RoxyNumerologyCard
+};
+//# sourceMappingURL=numerology-card.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/numerology-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 NumerologyCommon {\n\tnumber?: number;\n\tcalculation?: string;\n\ttype?: 'single' | 'master' | string;\n\thasKarmicDebt?: boolean;\n\tkarmicDebtNumber?: number;\n\tkarmicDebtMeaning?: string;\n\tmeaning?: string;\n}\n\ninterface CoreNumber {\n\tnumber?: number;\n\ttype?: string;\n\tmeaning?: string;\n\tcalculation?: string;\n}\n\ninterface FullChart {\n\tprofile?: { fullName?: string; birthDate?: string };\n\tcoreNumbers?: Record<string, CoreNumber | number>;\n\tadditionalInsights?: Record<string, unknown>;\n\tbirthDayProfile?: Record<string, unknown>;\n\tmaturityStatus?: string;\n\tluckyAssociations?: Record<string, unknown>;\n\tsummary?: string;\n}\n\ninterface PersonalYear {\n\tyear?: number;\n\tpersonalYear?: number;\n\ttitle?: string;\n\ttheme?: string;\n\tkeywords?: string[];\n\tmeaning?: string;\n\tadvice?: string;\n}\n\ntype NumerologyData = NumerologyCommon & FullChart & PersonalYear;\n\n/**\n * Numerology card. Renders /numerology/{life-path,expression,personal-year,chart}.\n * Use the `type` attribute to switch the layout.\n */\n@customElement('roxy-numerology-card')\nexport class RoxyNumerologyCard 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.hero {\n\t\t\t\tdisplay: flex;\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.numeral {\n\t\t\t\tfont-size: 4rem;\n\t\t\t\tline-height: 1;\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\tfont-variant-numeric: tabular-nums;\n\t\t\t}\n\t\t\t.label {\n\t\t\t\tmargin: 0;\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.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.meaning {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\n\t\t\t.calc {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-family: var(--roxy-font-mono);\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\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 30%, transparent);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tword-break: break-all;\n\t\t\t}\n\n\t\t\t.chips {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.chips span {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);\n\t\t\t\tpadding: 2px 8px;\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t}\n\n\t\t\t.cores {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tborder-top: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tpadding-top: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\t.cores .item {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: baseline;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\t.cores .item span:first-child {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t\t.cores .item strong {\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\n\t\t\t.karmic {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);\n\t\t\t\tborder: 1px solid color-mix(in srgb, var(--roxy-warning, #ea580c) 32%, transparent);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: NumerologyData | null = null;\n\n\t@property({ type: String, reflect: true })\n\ttype: 'life-path' | 'expression' | 'personal-year' | 'chart' = 'life-path';\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 numerology data</div>`;\n\n\t\tconst headerLabel = LABELS[this.type] ?? this.type;\n\t\tconst number = d.personalYear ?? d.number;\n\t\tconst cores = d.coreNumbers\n\t\t\t? Object.entries(d.coreNumbers).filter(\n\t\t\t\t\t([, v]) => v !== null && v !== undefined,\n\t\t\t\t)\n\t\t\t: [];\n\n\t\treturn html`<article\n\t\t\tclass=\"card\"\n\t\t\taria-label=${headerLabel}\n\t\t>\n\t\t\t<div class=\"hero\">\n\t\t\t\t${typeof number === 'number' ? html`<div class=\"numeral\">${number}</div>` : nothing}\n\t\t\t\t<div>\n\t\t\t\t\t<p class=\"label\">${headerLabel}</p>\n\t\t\t\t\t${\n\t\t\t\t\t\td.title\n\t\t\t\t\t\t\t? html`<h2 class=\"title\">${d.title}</h2>`\n\t\t\t\t\t\t\t: d.type\n\t\t\t\t\t\t\t\t? html`<h2 class=\"title\">\n\t\t\t\t\t\t\t\t\t${d.type === 'master' ? 'Master number' : 'Single digit'}\n\t\t\t\t\t\t\t\t</h2>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t${d.theme ? html`<p><strong>Theme:</strong> ${d.theme}</p>` : nothing}\n\t\t\t${d.meaning ? html`<p class=\"meaning\">${d.meaning}</p>` : nothing}\n\t\t\t${d.advice ? html`<p>${d.advice}</p>` : nothing}\n\t\t\t${d.calculation ? html`<pre class=\"calc\">${d.calculation}</pre>` : nothing}\n\t\t\t${\n\t\t\t\td.keywords?.length\n\t\t\t\t\t? html`<div class=\"chips\">\n\t\t\t\t\t\t${d.keywords.map((k) => html`<span>${k}</span>`)}\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\tcores.length > 0\n\t\t\t\t\t? html`<div class=\"cores\">\n\t\t\t\t\t\t${cores.map(([k, v]) => {\n\t\t\t\t\t\t\tconst value =\n\t\t\t\t\t\t\t\ttypeof v === 'number' ? v : (v as CoreNumber).number;\n\t\t\t\t\t\t\treturn html`<div class=\"item\">\n\t\t\t\t\t\t\t\t<span>${humanize(k)}</span>\n\t\t\t\t\t\t\t\t<strong>${value ?? ''}</strong>\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.hasKarmicDebt && d.karmicDebtNumber\n\t\t\t\t\t? html`<div class=\"karmic\">\n\t\t\t\t\t\tKarmic debt ${d.karmicDebtNumber}.\n\t\t\t\t\t\t${d.karmicDebtMeaning ? d.karmicDebtMeaning : ''}\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\nconst LABELS: Record<string, string> = {\n\t'life-path': 'Life Path',\n\texpression: 'Expression',\n\t'personal-year': 'Personal Year',\n\tchart: 'Numerology chart',\n};\n\nfunction humanize(s: string): string {\n\treturn s\n\t\t.replace(/[_-]+/g, ' ')\n\t\t.replace(/([a-z])([A-Z])/g, '$1 $2')\n\t\t.replace(/^\\w/, (c) => c.toUpperCase());\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-numerology-card': RoxyNumerologyCard;\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/panchang-table.d.ts

@@ -0,0 +1,77 @@
+import { LitElement } from 'lit';
+interface PanchangTime {
+    start?: string;
+    end?: string;
+}
+interface PanchangData {
+    date?: string;
+    location?: {
+        name?: string;
+        latitude?: number;
+        longitude?: number;
+    };
+    vara?: string;
+    sunrise?: string;
+    sunset?: string;
+    moonrise?: string;
+    moonset?: string;
+    sunSign?: string;
+    moonSign?: string;
+    sunNakshatra?: string;
+    tithi?: string | {
+        name?: string;
+        phase?: string;
+        end?: string;
+    };
+    nakshatra?: string | {
+        name?: string;
+        lord?: string;
+        end?: string;
+    };
+    yoga?: string | {
+        name?: string;
+        end?: string;
+    };
+    karana?: string | {
+        name?: string;
+        end?: string;
+    };
+    hora?: string;
+    rahuKaal?: PanchangTime;
+    yamaganda?: PanchangTime;
+    gulika?: PanchangTime;
+    abhijitMuhurta?: PanchangTime;
+    brahmaMuhurta?: PanchangTime;
+    vijayaMuhurta?: PanchangTime;
+    nishitaMuhurta?: PanchangTime;
+    godhuliMuhurta?: PanchangTime;
+    pratahSandhya?: PanchangTime;
+    sayahnaSandhya?: PanchangTime;
+    durMuhurta?: PanchangTime[];
+    varjyam?: PanchangTime[];
+    amritKalam?: PanchangTime[];
+    chandrabalam?: string | string[];
+    tarabalam?: string;
+    panchaka?: string;
+    bhadra?: string;
+    sunLongitude?: number;
+    moonLongitude?: number;
+}
+/**
+ * Panchang table for /vedic-astrology/panchang/{basic,detailed}. Detailed mode
+ * renders 15+ muhurtas. Basic mode renders the five elements only.
+ */
+export declare class RoxyPanchangTable extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: PanchangData | null;
+    detail: 'basic' | 'detailed';
+    render(): import("lit").TemplateResult<1>;
+    private formatPart;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'roxy-panchang-table': RoxyPanchangTable;
+    }
+}
+export {};
+//# sourceMappingURL=panchang-table.d.ts.map

package/dist/components/panchang-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panchang-table.d.ts","sourceRoot":"","sources":["../../src/components/panchang-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,UAAU,YAAY;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED,UAAU,YAAY;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BA6DX;IAGF,IAAI,EAAE,YAAY,GAAG,IAAI,CAAQ;IAGjC,MAAM,EAAE,OAAO,GAAG,UAAU,CAAc;IAE1C,MAAM;IAgHN,OAAO,CAAC,UAAU;CAmBlB;AAQD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}

package/dist/components/panchang-table.js

@@ -0,0 +1,285 @@
+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/panchang-table.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/panchang-table.ts
+var RoxyPanchangTable = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.detail = "detailed";
+  }
+  render() {
+    const d = this.data;
+    if (!d)
+      return html`<div class="roxy-empty" role="status">No panchang data</div>`;
+    const fivefold = [
+      ["Tithi", this.formatPart(d.tithi)],
+      ["Nakshatra", this.formatPart(d.nakshatra)],
+      ["Yoga", this.formatPart(d.yoga)],
+      ["Karana", this.formatPart(d.karana)],
+      ["Vara", d.vara ?? ""]
+    ];
+    const muhurtas = [
+      ["Brahma Muhurta", d.brahmaMuhurta],
+      ["Abhijit Muhurta", d.abhijitMuhurta],
+      ["Vijaya Muhurta", d.vijayaMuhurta],
+      ["Godhuli Muhurta", d.godhuliMuhurta],
+      ["Nishita Muhurta", d.nishitaMuhurta],
+      ["Pratah Sandhya", d.pratahSandhya],
+      ["Sayahna Sandhya", d.sayahnaSandhya]
+    ];
+    const inauspicious = [
+      ["Rahu Kaal", d.rahuKaal],
+      ["Yamaganda", d.yamaganda],
+      ["Gulika", d.gulika]
+    ];
+    return html`<div class="wrap" aria-label="Panchang">
+			<header class="head">
+				<h2 class="title">Panchang</h2>
+				<span class="date">${d.date ?? ""}</span>
+			</header>
+			<table>
+				<tbody>
+					${fivefold.map(
+      ([k, v]) => html`<tr>
+							<th>${k}</th>
+							<td>${v}</td>
+						</tr>`
+    )}
+					${d.sunrise ? html`<tr>
+								<th>Sunrise</th>
+								<td>${d.sunrise}</td>
+							</tr>` : nothing}
+					${d.sunset ? html`<tr>
+								<th>Sunset</th>
+								<td>${d.sunset}</td>
+							</tr>` : nothing}
+					${d.moonrise ? html`<tr>
+								<th>Moonrise</th>
+								<td>${d.moonrise}</td>
+							</tr>` : nothing}
+					${d.moonset ? html`<tr>
+								<th>Moonset</th>
+								<td>${d.moonset}</td>
+							</tr>` : nothing}
+				</tbody>
+			</table>
+			${this.detail === "detailed" && (muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1])) ? html`
+						<div class="section">Auspicious muhurtas</div>
+						<table>
+							<tbody>
+								${muhurtas.filter(([, v]) => !!v).map(
+      ([k, v]) => html`<tr>
+											<th>${k}</th>
+											<td>${formatRange(v)}</td>
+										</tr>`
+    )}
+							</tbody>
+						</table>
+						<div class="section">Inauspicious periods</div>
+						<table>
+							<tbody>
+								${inauspicious.filter(([, v]) => !!v).map(
+      ([k, v]) => html`<tr>
+											<th>${k}</th>
+											<td>${formatRange(v)}</td>
+										</tr>`
+    )}
+							</tbody>
+						</table>
+					` : nothing}
+		</div>`;
+  }
+  formatPart(v) {
+    if (!v) return "";
+    if (typeof v === "string") return v;
+    if (typeof v === "object") {
+      const obj = v;
+      const parts = [
+        obj.name,
+        obj.lord ? `(${obj.lord})` : "",
+        obj.phase
+      ].filter(Boolean);
+      return parts.join(" ");
+    }
+    return String(v);
+  }
+};
+RoxyPanchangTable.styles = [
+  baseStyles,
+  css2`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				overflow: hidden;
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				display: flex;
+				justify-content: space-between;
+				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);
+			}
+			.date {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			tbody tr:nth-child(odd) {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 24%, transparent);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				vertical-align: top;
+			}
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				width: 38%;
+				text-transform: capitalize;
+			}
+			td {
+				color: var(--roxy-fg, #0a0a0a);
+				font-variant-numeric: tabular-nums;
+			}
+			.section {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyPanchangTable.prototype, "data", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], RoxyPanchangTable.prototype, "detail", 2);
+RoxyPanchangTable = __decorateClass([
+  customElement("roxy-panchang-table")
+], RoxyPanchangTable);
+function formatRange(t) {
+  if (!t) return "";
+  if (t.start && t.end) return `${t.start} - ${t.end}`;
+  return t.start ?? t.end ?? "";
+}
+export {
+  RoxyPanchangTable
+};
+//# sourceMappingURL=panchang-table.js.map