@roxyapi/ui 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +13 -0
- package/README.md +1 -1
- package/THEMING.md +1 -1
- package/dist/cdn/components/ashtakavarga-grid.js +1 -1
- package/dist/cdn/components/ashtakavarga-grid.js.map +2 -2
- package/dist/cdn/components/biorhythm-chart.js +3 -3
- package/dist/cdn/components/biorhythm-chart.js.map +2 -2
- package/dist/cdn/components/choghadiya-grid.js +1 -1
- package/dist/cdn/components/choghadiya-grid.js.map +2 -2
- package/dist/cdn/components/compatibility-card.js +1 -1
- package/dist/cdn/components/compatibility-card.js.map +2 -2
- package/dist/cdn/components/dasha-timeline.js +3 -3
- package/dist/cdn/components/dasha-timeline.js.map +4 -4
- package/dist/cdn/components/divisional-chart.js +67 -1
- package/dist/cdn/components/divisional-chart.js.map +2 -2
- package/dist/cdn/components/endpoint-form.js +2 -2
- package/dist/cdn/components/endpoint-form.js.map +2 -2
- package/dist/cdn/components/guna-milan.js +1 -1
- package/dist/cdn/components/guna-milan.js.map +2 -2
- package/dist/cdn/components/hexagram.js +1 -1
- package/dist/cdn/components/hexagram.js.map +2 -2
- package/dist/cdn/components/horoscope-card.js +1 -1
- package/dist/cdn/components/horoscope-card.js.map +2 -2
- package/dist/cdn/components/kp-chart.js +1 -1
- package/dist/cdn/components/kp-chart.js.map +2 -2
- package/dist/cdn/components/kp-ruling-planets.js +1 -1
- package/dist/cdn/components/kp-ruling-planets.js.map +2 -2
- package/dist/cdn/components/location-search.js +1 -1
- package/dist/cdn/components/location-search.js.map +2 -2
- package/dist/cdn/components/nakshatra-card.js +1 -1
- package/dist/cdn/components/nakshatra-card.js.map +2 -2
- package/dist/cdn/components/natal-chart.js +12 -3
- package/dist/cdn/components/natal-chart.js.map +2 -2
- package/dist/cdn/components/numerology-card.js +2 -2
- package/dist/cdn/components/numerology-card.js.map +2 -2
- package/dist/cdn/components/panchang-table.js +3 -3
- package/dist/cdn/components/panchang-table.js.map +3 -3
- package/dist/cdn/components/shadbala-table.js +1 -1
- package/dist/cdn/components/shadbala-table.js.map +2 -2
- package/dist/cdn/components/synastry-chart.js +8 -2
- package/dist/cdn/components/synastry-chart.js.map +2 -2
- package/dist/cdn/components/transits-table.js +2 -2
- package/dist/cdn/components/transits-table.js.map +2 -2
- package/dist/cdn/components/vedic-kundli.js +67 -1
- package/dist/cdn/components/vedic-kundli.js.map +2 -2
- package/dist/cdn/components/vedic-planets-table.js +3 -3
- package/dist/cdn/components/vedic-planets-table.js.map +4 -4
- package/dist/cdn/components/yoga-list.js +2 -2
- package/dist/cdn/components/yoga-list.js.map +2 -2
- package/dist/cdn/roxy-ui.js +84 -3
- package/dist/cdn/roxy-ui.js.map +4 -4
- package/dist/components/ashtakavarga-grid.js +1 -1
- package/dist/components/ashtakavarga-grid.js.map +3 -3
- package/dist/components/biorhythm-chart.js +1 -1
- package/dist/components/biorhythm-chart.js.map +2 -2
- package/dist/components/choghadiya-grid.js +1 -1
- package/dist/components/choghadiya-grid.js.map +2 -2
- package/dist/components/compatibility-card.js +1 -1
- package/dist/components/compatibility-card.js.map +2 -2
- package/dist/components/dasha-timeline.d.ts.map +1 -1
- package/dist/components/dasha-timeline.js +1 -1
- package/dist/components/dasha-timeline.js.map +4 -4
- package/dist/components/divisional-chart.js +67 -1
- package/dist/components/divisional-chart.js.map +2 -2
- package/dist/components/endpoint-form.js +1 -1
- package/dist/components/endpoint-form.js.map +2 -2
- package/dist/components/guna-milan.js +1 -1
- package/dist/components/guna-milan.js.map +2 -2
- package/dist/components/hexagram.js +1 -1
- package/dist/components/hexagram.js.map +2 -2
- package/dist/components/horoscope-card.js +1 -1
- package/dist/components/horoscope-card.js.map +2 -2
- package/dist/components/kp-chart.js +1 -1
- package/dist/components/kp-chart.js.map +2 -2
- package/dist/components/kp-ruling-planets.js +1 -1
- package/dist/components/kp-ruling-planets.js.map +2 -2
- package/dist/components/location-search.js +1 -1
- package/dist/components/location-search.js.map +2 -2
- package/dist/components/nakshatra-card.js +1 -1
- package/dist/components/nakshatra-card.js.map +2 -2
- package/dist/components/natal-chart.js +10 -1
- package/dist/components/natal-chart.js.map +2 -2
- package/dist/components/numerology-card.js +1 -1
- package/dist/components/numerology-card.js.map +2 -2
- package/dist/components/panchang-table.d.ts +22 -1
- package/dist/components/panchang-table.d.ts.map +1 -1
- package/dist/components/panchang-table.js +1 -1
- package/dist/components/panchang-table.js.map +3 -3
- package/dist/components/shadbala-table.js +1 -1
- package/dist/components/shadbala-table.js.map +2 -2
- package/dist/components/synastry-chart.js +7 -1
- package/dist/components/synastry-chart.js.map +2 -2
- package/dist/components/transits-table.js +1 -1
- package/dist/components/transits-table.js.map +2 -2
- package/dist/components/vedic-kundli.js +67 -1
- package/dist/components/vedic-kundli.js.map +2 -2
- package/dist/components/vedic-planets-table.d.ts +14 -0
- package/dist/components/vedic-planets-table.d.ts.map +1 -1
- package/dist/components/vedic-planets-table.js +1 -1
- package/dist/components/vedic-planets-table.js.map +4 -4
- package/dist/components/yoga-list.js +1 -1
- package/dist/components/yoga-list.js.map +2 -2
- package/dist/index.cjs +82 -1
- package/dist/index.cjs.map +4 -4
- package/dist/index.js +82 -1
- package/dist/index.js.map +4 -4
- package/dist/styles/tokens.css +4 -4
- package/dist/types/types.gen.d.ts +679 -40
- package/dist/types/types.gen.d.ts.map +1 -1
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/ashtakavarga-grid.ts +1 -1
- package/src/components/biorhythm-chart.ts +1 -1
- package/src/components/choghadiya-grid.ts +1 -1
- package/src/components/compatibility-card.ts +2 -2
- package/src/components/dasha-timeline.ts +10 -19
- package/src/components/endpoint-form.ts +2 -2
- package/src/components/guna-milan.ts +1 -1
- package/src/components/hexagram.ts +3 -3
- package/src/components/horoscope-card.ts +1 -1
- package/src/components/kp-chart.ts +1 -1
- package/src/components/kp-ruling-planets.ts +1 -1
- package/src/components/location-search.ts +1 -1
- package/src/components/nakshatra-card.ts +1 -1
- package/src/components/natal-chart.ts +5 -5
- package/src/components/numerology-card.ts +2 -2
- package/src/components/panchang-table.ts +112 -18
- package/src/components/shadbala-table.ts +1 -1
- package/src/components/synastry-chart.ts +4 -4
- package/src/components/transits-table.ts +1 -1
- package/src/components/vedic-planets-table.ts +221 -3
- package/src/components/yoga-list.ts +1 -1
- package/src/styles/tokens.css +4 -4
- package/src/types/types.gen.ts +680 -41
- package/src/utils/kundli-styles.ts +2 -2
- package/src/utils/tablist.ts +1 -1
- package/src/version.ts +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/kp-chart.ts", "../../src/utils/base-styles.ts", "../../src/utils/format.ts", "../../src/utils/markup-data.ts"],
|
|
4
|
-
"sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { KpChartResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { formatNumber } from '../utils/format.js';\nimport { MarkupDataController } from '../utils/markup-data.js';\n\ntype Tab = 'planets' | 'cusps';\n\n/** A planet or node row, normalized so planets and Rahu/Ketu share a table. */\ninterface KpBody {\n\tname: string;\n\tsign?: string;\n\thouse?: number;\n\tnakshatra?: string;\n\tstarLord?: string;\n\tsubLord?: string;\n\tsubSubLord?: string;\n\tkpNumber?: number;\n\tretrograde?: boolean;\n}\n\n/**\n * KP (Krishnamurti Paddhati) chart. Renders /vedic-astrology/kp/chart: the\n * Ascendant with its full stellar hierarchy, a planets-and-nodes table, and a\n * Placidus cusps table. The cusp and planet sub lords are the primary\n * predictive surface in KP astrology, so each row carries star lord, sub lord,\n * sub-sub lord, and KP number (1-249).\n */\n@customElement('roxy-kp-chart')\nexport class RoxyKpChart extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);box-shadow:var(--roxy-shadow-sm);overflow:auto}.head{padding:var(--roxy-space-md,1rem);border-bottom:1px solid var(--roxy-border,#e4e4e7);gap:var(--roxy-space-xs,.25rem);display:grid}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.asc,.ayan{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}.asc strong{color:var(--roxy-fg,#0a0a0a)}.tablist{padding:0 var(--roxy-space-md,1rem);border-bottom:2px solid var(--roxy-border,#e4e4e7);gap:2px;display:flex}.tab{padding:var(--roxy-space-xs,.25rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-sm,.875rem);cursor:pointer;color:var(--roxy-muted,#71717a);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;font-family:inherit}.tab[aria-selected=true]{color:var(--roxy-accent-fg,#b45309);border-bottom-color:var(--roxy-accent,#f59e0b);font-weight:var(--roxy-weight-bold,600)}.tab:hover:not([aria-selected=true]){color:var(--roxy-fg,#0a0a0a)}table{border-collapse:collapse;width:100%;font-size:var(--roxy-text-sm,.875rem);min-width:620px}thead{background:color-mix(in srgb, var(--roxy-border,#e4e4e7) 20%, transparent)}th,td{padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);text-align:left;white-space:nowrap}th{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600);text-transform:uppercase;font-size:var(--roxy-text-xs,.75rem);letter-spacing:.04em}tbody tr{border-top:1px solid var(--roxy-border,#e4e4e7)}td.body{font-weight:var(--roxy-weight-bold,600);color:var(--roxy-fg,#0a0a0a)}.retro{color:var(--roxy-warning-fg,#9a3412);font-size:var(--roxy-text-xs,.75rem);font-weight:var(--roxy-weight-bold,600);margin-left:4px}.num{font-variant-numeric:tabular-nums}`,\n\t];\n\n\tconstructor() {\n\t\tsuper();\n\t\t// Enables hydrating `data` from a direct-child\n\t\t// <script type=\"application/json\" class=\"roxy-data\"> for server-rendered\n\t\t// and cached consumers. The JavaScript `data` property still wins.\n\t\tnew MarkupDataController(this);\n\t}\n\n\t@property({ attribute: false })\n\tdata: KpChartResponse | null = null;\n\n\t@state()\n\tprivate activeTab: Tab = 'planets';\n\n\t/** Merge the 7 planets and the two nodes into one ordered body list. */\n\tprivate bodies(): KpBody[] {\n\t\tconst d = this.data;\n\t\tif (!d) return [];\n\t\tconst rows: KpBody[] = (d.planets ?? []).map((p) => ({\n\t\t\tname: p.planet,\n\t\t\tsign: p.sign,\n\t\t\thouse: p.house,\n\t\t\tnakshatra: p.nakshatra,\n\t\t\tstarLord: p.starLord,\n\t\t\tsubLord: p.subLord,\n\t\t\tsubSubLord: p.subSubLord,\n\t\t\tkpNumber: p.kpNumber,\n\t\t\tretrograde: p.retrograde,\n\t\t}));\n\t\tconst nodes = d.nodes;\n\t\tfor (const [name, node] of [\n\t\t\t['Rahu', nodes?.rahu],\n\t\t\t['Ketu', nodes?.ketu],\n\t\t] as const) {\n\t\t\tif (node) {\n\t\t\t\trows.push({\n\t\t\t\t\tname,\n\t\t\t\t\tsign: node.sign,\n\t\t\t\t\thouse: node.house,\n\t\t\t\t\tnakshatra: node.nakshatra,\n\t\t\t\t\tstarLord: node.starLord,\n\t\t\t\t\tsubLord: node.subLord,\n\t\t\t\t\tsubSubLord: node.subSubLord,\n\t\t\t\t\tretrograde: true,\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn rows;\n\t}\n\n\tprivate onTabKeyDown(e: KeyboardEvent) {\n\t\tif (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;\n\t\te.preventDefault();\n\t\tthis.activeTab = this.activeTab === 'planets' ? 'cusps' : 'planets';\n\t\tconst next = this.activeTab;\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.shadowRoot\n\t\t\t\t?.querySelector<HTMLButtonElement>(`#tab-${next}`)\n\t\t\t\t?.focus();\n\t\t});\n\t}\n\n\trender() {\n\t\tif (!this.data)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No KP chart data</div>`;\n\t\tconst d = this.data;\n\t\tconst asc = d.ascendant;\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"KP chart\" tabindex=\"0\"><header class=\"head\"><h2 class=\"title\">KP chart</h2>${\n\t\t\t\t\tasc\n\t\t\t\t\t\t? html`<div class=\"asc\">Ascendant: <strong>${asc.sign ?? ''}</strong> ${asc.nakshatra ? html`\u00B7 ${asc.nakshatra}` : nothing} ${asc.subLord ? html`\u00B7 sub lord ${asc.subLord}` : nothing} ${typeof asc.kpNumber === 'number' ? html`\u00B7 KP ${asc.kpNumber}` : nothing}</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t} ${\n\t\t\t\t\ttypeof d.meta?.ayanamsa === 'number'\n\t\t\t\t\t\t? html`<div class=\"ayan\">${d.meta.ayanamsaType ?? 'Ayanamsa'}: ${formatNumber(d.meta.ayanamsa, 4)}\u00B0 ${d.meta.houseSystem ? html`\u00B7 ${d.meta.houseSystem} houses` : nothing}</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}</header><div class=\"tablist\" role=\"tablist\" aria-label=\"KP chart views\" @keydown=\"${this.onTabKeyDown}\">${(['planets', 'cusps'] as const).map(\n\t\t\t\t\t(t) => html`<button class=\"tab\" role=\"tab\" id=\"tab-${t}\" aria-selected=\"${this.activeTab === t ? 'true' : 'false'}\" aria-controls=\"panel-${t}\" tabindex=\"${this.activeTab === t ? '0' : '-1'}\" @click=\"${() => {\n\t\t\t\t\t\t\tthis.activeTab = t;\n\t\t\t\t\t\t}}\">${t === 'planets' ? 'Planets' : 'Cusps'}</button>`,\n\t\t\t\t)}</div><div id=\"panel-${this.activeTab}\" role=\"tabpanel\" aria-labelledby=\"tab-${this.activeTab}\">${this.activeTab === 'planets' ? this.renderPlanets() : this.renderCusps()}</div></div>`;\n\t}\n\n\tprivate renderPlanets() {\n\t\tconst bodies = this.bodies();\n\t\tif (!bodies.length)\n\t\t\treturn html`<p class=\"roxy-empty\" role=\"status\">No planets</p>`;\n\t\treturn html`<table role=\"table\" aria-label=\"KP planets and nodes\"><thead><tr><th scope=\"col\">Body</th><th scope=\"col\">Sign</th><th scope=\"col\">House</th><th scope=\"col\">Nakshatra</th><th scope=\"col\">Star lord</th><th scope=\"col\">Sub lord</th><th scope=\"col\">Sub sub lord</th><th scope=\"col\">KP no.</th></tr></thead><tbody>${bodies.map(\n\t\t\t\t\t(b) => html`<tr><td class=\"body\">${b.name}${b.retrograde ? html`<span class=\"retro\">R</span>` : nothing}</td><td>${b.sign ?? ''}</td><td class=\"num\">${typeof b.house === 'number' ? b.house : ''}</td><td>${b.nakshatra ?? ''}</td><td>${b.starLord ?? ''}</td><td>${b.subLord ?? ''}</td><td>${b.subSubLord ?? ''}</td><td class=\"num\">${typeof b.kpNumber === 'number' ? b.kpNumber : ''}</td></tr>`,\n\t\t\t\t)}</tbody></table>`;\n\t}\n\n\tprivate renderCusps() {\n\t\tconst cusps = this.data?.cusps ?? [];\n\t\tif (!cusps.length)\n\t\t\treturn html`<p class=\"roxy-empty\" role=\"status\">No cusps</p>`;\n\t\treturn html`<table role=\"table\" aria-label=\"KP Placidus cusps\"><thead><tr><th scope=\"col\">House</th><th scope=\"col\">Sign</th><th scope=\"col\">Sign lord</th><th scope=\"col\">Nakshatra</th><th scope=\"col\">Star lord</th><th scope=\"col\">Sub lord</th><th scope=\"col\">Sub sub lord</th><th scope=\"col\">KP no.</th></tr></thead><tbody>${cusps.map(\n\t\t\t\t\t(c) => html`<tr><td class=\"body num\">${c.house}</td><td>${c.sign ?? ''}</td><td>${c.signLord ?? ''}</td><td>${c.nakshatra ?? ''}</td><td>${c.starLord ?? ''}</td><td>${c.subLord ?? ''}</td><td>${c.subSubLord ?? ''}</td><td class=\"num\">${typeof c.kpNumber === 'number' ? c.kpNumber : ''}</td></tr>`,\n\t\t\t\t)}</tbody></table>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-kp-chart': RoxyKpChart;\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`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;\n", "/**\n * Display formatters for ISO timestamps and floats coming back from the API.\n * Every helper returns \"\" for nullish or unparseable input so it falls out of\n * template literals cleanly.\n */\n\nexport function formatTime(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tif (/^\\d{4}-\\d{2}-\\d{2}$/.test(input)) return '';\n\tconst bareTime = /^\\d{2}:\\d{2}(:\\d{2})?$/.test(input);\n\tconst iso = bareTime ? `1970-01-01T${input}` : input;\n\tconst d = new Date(iso);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleTimeString(undefined, {\n\t\thour: 'numeric',\n\t\tminute: '2-digit',\n\t\thour12: true,\n\t});\n}\n\nexport function formatDate(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tconst d = new Date(\n\t\t/^\\d{4}-\\d{2}-\\d{2}$/.test(input) ? `${input}T00:00:00` : input,\n\t);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleDateString(undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t\tyear: 'numeric',\n\t});\n}\n\nexport function formatTimeRange(\n\tt: { start?: string; end?: string } | undefined,\n): string {\n\tif (!t) return '';\n\tconst start = formatTime(t.start);\n\tconst end = formatTime(t.end);\n\tif (start && end) return `${start} - ${end}`;\n\treturn start || end || '';\n}\n\nexport function formatNumber(value: unknown, dp = 1): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn value.toFixed(dp).replace(/\\.?0+$/, '');\n}\n\nexport function formatPercent(value: unknown, dp = 1): string {\n\tconst n = formatNumber(value, dp);\n\treturn n ? `${n}%` : '';\n}\n\n/**\n * CSS class name per aspect type. Used by natal and synastry chart aspect\n * lines so the same color encoding (harmonious vs challenging) applies in\n * both wheels. Keys are lowercase canonical names, values are CSS class\n * suffixes the chart components define in their `:host` styles.\n */\nexport const ASPECT_CLASS: Record<string, string> = {\n\tconjunction: 'aspect-conjunction',\n\tsextile: 'aspect-sextile',\n\tsquare: 'aspect-square',\n\ttrine: 'aspect-trine',\n\topposition: 'aspect-opposition',\n};\n\n/**\n * Normalize the `type` field on an aspect entry to a lowercase, hyphen-separated\n * canonical name (`SEMI_SEXTILE` \u2192 `semi-sextile`). Accepts any aspect-shaped\n * object so both natal and synastry inter-aspect entries can share this.\n */\nexport function normalizeAspect(a: { type?: string }): string {\n\treturn (a.type ?? '').toLowerCase().replace(/_/g, '-');\n}\n", "import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Marker class on the inline JSON script a server emits inside a component.\n *\n * @example\n * ```html\n * <roxy-natal-chart>\n * <script type=\"application/json\" class=\"roxy-data\">{ ...response... }</script>\n * </roxy-natal-chart>\n * ```\n */\nconst ROXY_DATA_CLASS = 'roxy-data';\n\n/**\n * True when the element is a `<script type=\"application/json\">`. Uses tag name and attribute rather than `instanceof HTMLScriptElement` so the check holds in every DOM implementation, including server-rendered and hydration runtimes where the constructor global may be absent.\n */\nfunction isJsonScript(el: Element): boolean {\n\treturn (\n\t\tel.nodeName === 'SCRIPT' && el.getAttribute('type') === 'application/json'\n\t);\n}\n\n/**\n * Host shape the controller drives: any reactive element that exposes a public `data` slot. The controller only writes `data` when the host left it unset, so the JavaScript property path always wins.\n */\ninterface DataHost extends ReactiveControllerHost, HTMLElement {\n\tdata?: unknown;\n}\n\n/**\n * Reactive controller that lets a component hydrate its `data` from embedded markup when no `data` property was assigned in JavaScript.\n *\n * @remarks\n * The server-side and cached-render model: a backend renders the RoxyAPI response into a direct-child `<script type=\"application/json\" class=\"roxy-data\">` element, ships static HTML, and never runs per-element JavaScript to assign a property. On connect this controller reads that script, parses it, and feeds the result to the host. The JavaScript property path is untouched and authoritative: if `host.data` already holds a value when the host connects, the controller does nothing and the markup is ignored.\n *\n * Source resolution order on connect, first hit wins:\n *\n * 1. `host.data` already set in JavaScript -> leave it, read nothing.\n * 2. A direct-child `<script type=\"application/json\" class=\"roxy-data\">` -> parse and use. Direct-child only, so a nested component's own script is never read by an ancestor.\n *\n * Fetching from a URL is intentionally unsupported: that would require a browser-visible key and breaks the server-rendered, cached model these consumers rely on.\n *\n * Timing: {@link hostConnected} runs inside the host `connectedCallback`. For an element parsed from server HTML, its direct children are present by the time the custom element upgrades and connects, so the script is readable here. For an element created with `document.createElement` and connected before any child is appended, there is nothing to read and the property path is the only source, which is exactly the existing behavior.\n *\n * Failure is safe: malformed JSON or a missing script leaves `host.data` untouched, so the host renders its normal empty state.\n *\n * Reading the script never mutates it, and only the marked script is touched, so any sibling fallback markup a server nested inside the element (for no-JavaScript, AMP, or crawler rendering) is left in place.\n *\n * @example\n * ```ts\n * import { MarkupDataController } from '../utils/markup-data.js';\n *\n * export class RoxyExample extends LitElement {\n * constructor() {\n * super();\n * new MarkupDataController(this);\n * }\n *\n * @property({ attribute: false })\n * data: ExampleResponse | null = null;\n * }\n * ```\n */\nexport class MarkupDataController<T = unknown> implements ReactiveController {\n\tprivate readonly host: DataHost;\n\n\tconstructor(host: DataHost) {\n\t\tthis.host = host;\n\t\thost.addController(this);\n\t}\n\n\thostConnected() {\n\t\t// Property path wins. If the consumer (React, vanilla `.data =`, the\n\t\t// widgets script, an MCP agent) already set data, never look at markup.\n\t\tif (this.host.data != null) return;\n\n\t\tconst parsed = this.read();\n\t\tif (parsed === undefined) return;\n\n\t\tthis.host.data = parsed as T;\n\t\tthis.host.requestUpdate();\n\t}\n\n\t/**\n\t * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.\n\t */\n\tprivate read(): T | undefined {\n\t\tconst inline = this.findInlineScript();\n\t\treturn inline ? this.parse(inline.textContent) : undefined;\n\t}\n\n\t/**\n\t * Direct-child `<script type=\"application/json\" class=\"roxy-data\">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.\n\t */\n\tprivate findInlineScript(): Element | null {\n\t\tfor (const child of Array.from(this.host.children)) {\n\t\t\tif (isJsonScript(child) && child.classList.contains(ROXY_DATA_CLASS)) {\n\t\t\t\treturn child;\n\t\t\t}\n\t\t}\n\t\treturn null;\n\t}\n\n\tprivate parse(text: string | null): T | undefined {\n\t\tif (!text?.trim()) return undefined;\n\t\ttry {\n\t\t\treturn JSON.parse(text) as T;\n\t\t} catch {\n\t\t\t// Malformed embedded JSON: fail safe, leave the host empty state in\n\t\t\t// place rather than throwing during connect.\n\t\t\treturn undefined;\n\t\t}\n\t}\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { KpChartResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { formatNumber } from '../utils/format.js';\nimport { MarkupDataController } from '../utils/markup-data.js';\n\ntype Tab = 'planets' | 'cusps';\n\n/** A planet or node row, normalized so planets and Rahu/Ketu share a table. */\ninterface KpBody {\n\tname: string;\n\tsign?: string;\n\thouse?: number;\n\tnakshatra?: string;\n\tstarLord?: string;\n\tsubLord?: string;\n\tsubSubLord?: string;\n\tkpNumber?: number;\n\tretrograde?: boolean;\n}\n\n/**\n * KP (Krishnamurti Paddhati) chart. Renders /vedic-astrology/kp/chart: the\n * Ascendant with its full stellar hierarchy, a planets-and-nodes table, and a\n * Placidus cusps table. The cusp and planet sub lords are the primary\n * predictive surface in KP astrology, so each row carries star lord, sub lord,\n * sub-sub lord, and KP number (1-249).\n */\n@customElement('roxy-kp-chart')\nexport class RoxyKpChart extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);box-shadow:var(--roxy-shadow-sm);overflow:auto}.head{padding:var(--roxy-space-md,1rem);border-bottom:1px solid var(--roxy-border,#e4e4e7);gap:var(--roxy-space-xs,.25rem);display:grid}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.asc,.ayan{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}.asc strong{color:var(--roxy-fg,#0a0a0a)}.tablist{padding:0 var(--roxy-space-md,1rem);border-bottom:2px solid var(--roxy-border,#e4e4e7);gap:2px;display:flex}.tab{padding:var(--roxy-space-xs,.25rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-sm,.875rem);cursor:pointer;color:var(--roxy-muted,#71717a);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;font-family:inherit}.tab[aria-selected=true]{color:var(--roxy-accent-ink,#b45309);border-bottom-color:var(--roxy-accent,#f59e0b);font-weight:var(--roxy-weight-bold,600)}.tab:hover:not([aria-selected=true]){color:var(--roxy-fg,#0a0a0a)}table{border-collapse:collapse;width:100%;font-size:var(--roxy-text-sm,.875rem);min-width:620px}thead{background:color-mix(in srgb, var(--roxy-border,#e4e4e7) 20%, transparent)}th,td{padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);text-align:left;white-space:nowrap}th{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600);text-transform:uppercase;font-size:var(--roxy-text-xs,.75rem);letter-spacing:.04em}tbody tr{border-top:1px solid var(--roxy-border,#e4e4e7)}td.body{font-weight:var(--roxy-weight-bold,600);color:var(--roxy-fg,#0a0a0a)}.retro{color:var(--roxy-warning-fg,#9a3412);font-size:var(--roxy-text-xs,.75rem);font-weight:var(--roxy-weight-bold,600);margin-left:4px}.num{font-variant-numeric:tabular-nums}`,\n\t];\n\n\tconstructor() {\n\t\tsuper();\n\t\t// Enables hydrating `data` from a direct-child\n\t\t// <script type=\"application/json\" class=\"roxy-data\"> for server-rendered\n\t\t// and cached consumers. The JavaScript `data` property still wins.\n\t\tnew MarkupDataController(this);\n\t}\n\n\t@property({ attribute: false })\n\tdata: KpChartResponse | null = null;\n\n\t@state()\n\tprivate activeTab: Tab = 'planets';\n\n\t/** Merge the 7 planets and the two nodes into one ordered body list. */\n\tprivate bodies(): KpBody[] {\n\t\tconst d = this.data;\n\t\tif (!d) return [];\n\t\tconst rows: KpBody[] = (d.planets ?? []).map((p) => ({\n\t\t\tname: p.planet,\n\t\t\tsign: p.sign,\n\t\t\thouse: p.house,\n\t\t\tnakshatra: p.nakshatra,\n\t\t\tstarLord: p.starLord,\n\t\t\tsubLord: p.subLord,\n\t\t\tsubSubLord: p.subSubLord,\n\t\t\tkpNumber: p.kpNumber,\n\t\t\tretrograde: p.retrograde,\n\t\t}));\n\t\tconst nodes = d.nodes;\n\t\tfor (const [name, node] of [\n\t\t\t['Rahu', nodes?.rahu],\n\t\t\t['Ketu', nodes?.ketu],\n\t\t] as const) {\n\t\t\tif (node) {\n\t\t\t\trows.push({\n\t\t\t\t\tname,\n\t\t\t\t\tsign: node.sign,\n\t\t\t\t\thouse: node.house,\n\t\t\t\t\tnakshatra: node.nakshatra,\n\t\t\t\t\tstarLord: node.starLord,\n\t\t\t\t\tsubLord: node.subLord,\n\t\t\t\t\tsubSubLord: node.subSubLord,\n\t\t\t\t\tretrograde: true,\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn rows;\n\t}\n\n\tprivate onTabKeyDown(e: KeyboardEvent) {\n\t\tif (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;\n\t\te.preventDefault();\n\t\tthis.activeTab = this.activeTab === 'planets' ? 'cusps' : 'planets';\n\t\tconst next = this.activeTab;\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.shadowRoot\n\t\t\t\t?.querySelector<HTMLButtonElement>(`#tab-${next}`)\n\t\t\t\t?.focus();\n\t\t});\n\t}\n\n\trender() {\n\t\tif (!this.data)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No KP chart data</div>`;\n\t\tconst d = this.data;\n\t\tconst asc = d.ascendant;\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"KP chart\" tabindex=\"0\"><header class=\"head\"><h2 class=\"title\">KP chart</h2>${\n\t\t\t\t\tasc\n\t\t\t\t\t\t? html`<div class=\"asc\">Ascendant: <strong>${asc.sign ?? ''}</strong> ${asc.nakshatra ? html`\u00B7 ${asc.nakshatra}` : nothing} ${asc.subLord ? html`\u00B7 sub lord ${asc.subLord}` : nothing} ${typeof asc.kpNumber === 'number' ? html`\u00B7 KP ${asc.kpNumber}` : nothing}</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t} ${\n\t\t\t\t\ttypeof d.meta?.ayanamsa === 'number'\n\t\t\t\t\t\t? html`<div class=\"ayan\">${d.meta.ayanamsaType ?? 'Ayanamsa'}: ${formatNumber(d.meta.ayanamsa, 4)}\u00B0 ${d.meta.houseSystem ? html`\u00B7 ${d.meta.houseSystem} houses` : nothing}</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}</header><div class=\"tablist\" role=\"tablist\" aria-label=\"KP chart views\" @keydown=\"${this.onTabKeyDown}\">${(['planets', 'cusps'] as const).map(\n\t\t\t\t\t(t) => html`<button class=\"tab\" role=\"tab\" id=\"tab-${t}\" aria-selected=\"${this.activeTab === t ? 'true' : 'false'}\" aria-controls=\"panel-${t}\" tabindex=\"${this.activeTab === t ? '0' : '-1'}\" @click=\"${() => {\n\t\t\t\t\t\t\tthis.activeTab = t;\n\t\t\t\t\t\t}}\">${t === 'planets' ? 'Planets' : 'Cusps'}</button>`,\n\t\t\t\t)}</div><div id=\"panel-${this.activeTab}\" role=\"tabpanel\" aria-labelledby=\"tab-${this.activeTab}\">${this.activeTab === 'planets' ? this.renderPlanets() : this.renderCusps()}</div></div>`;\n\t}\n\n\tprivate renderPlanets() {\n\t\tconst bodies = this.bodies();\n\t\tif (!bodies.length)\n\t\t\treturn html`<p class=\"roxy-empty\" role=\"status\">No planets</p>`;\n\t\treturn html`<table role=\"table\" aria-label=\"KP planets and nodes\"><thead><tr><th scope=\"col\">Body</th><th scope=\"col\">Sign</th><th scope=\"col\">House</th><th scope=\"col\">Nakshatra</th><th scope=\"col\">Star lord</th><th scope=\"col\">Sub lord</th><th scope=\"col\">Sub sub lord</th><th scope=\"col\">KP no.</th></tr></thead><tbody>${bodies.map(\n\t\t\t\t\t(b) => html`<tr><td class=\"body\">${b.name}${b.retrograde ? html`<span class=\"retro\">R</span>` : nothing}</td><td>${b.sign ?? ''}</td><td class=\"num\">${typeof b.house === 'number' ? b.house : ''}</td><td>${b.nakshatra ?? ''}</td><td>${b.starLord ?? ''}</td><td>${b.subLord ?? ''}</td><td>${b.subSubLord ?? ''}</td><td class=\"num\">${typeof b.kpNumber === 'number' ? b.kpNumber : ''}</td></tr>`,\n\t\t\t\t)}</tbody></table>`;\n\t}\n\n\tprivate renderCusps() {\n\t\tconst cusps = this.data?.cusps ?? [];\n\t\tif (!cusps.length)\n\t\t\treturn html`<p class=\"roxy-empty\" role=\"status\">No cusps</p>`;\n\t\treturn html`<table role=\"table\" aria-label=\"KP Placidus cusps\"><thead><tr><th scope=\"col\">House</th><th scope=\"col\">Sign</th><th scope=\"col\">Sign lord</th><th scope=\"col\">Nakshatra</th><th scope=\"col\">Star lord</th><th scope=\"col\">Sub lord</th><th scope=\"col\">Sub sub lord</th><th scope=\"col\">KP no.</th></tr></thead><tbody>${cusps.map(\n\t\t\t\t\t(c) => html`<tr><td class=\"body num\">${c.house}</td><td>${c.sign ?? ''}</td><td>${c.signLord ?? ''}</td><td>${c.nakshatra ?? ''}</td><td>${c.starLord ?? ''}</td><td>${c.subLord ?? ''}</td><td>${c.subSubLord ?? ''}</td><td class=\"num\">${typeof c.kpNumber === 'number' ? c.kpNumber : ''}</td></tr>`,\n\t\t\t\t)}</tbody></table>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-kp-chart': RoxyKpChart;\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`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;\n", "/**\n * Display formatters for ISO timestamps and floats coming back from the API.\n * Every helper returns \"\" for nullish or unparseable input so it falls out of\n * template literals cleanly.\n */\n\nexport function formatTime(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tif (/^\\d{4}-\\d{2}-\\d{2}$/.test(input)) return '';\n\tconst bareTime = /^\\d{2}:\\d{2}(:\\d{2})?$/.test(input);\n\tconst iso = bareTime ? `1970-01-01T${input}` : input;\n\tconst d = new Date(iso);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleTimeString(undefined, {\n\t\thour: 'numeric',\n\t\tminute: '2-digit',\n\t\thour12: true,\n\t});\n}\n\nexport function formatDate(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tconst d = new Date(\n\t\t/^\\d{4}-\\d{2}-\\d{2}$/.test(input) ? `${input}T00:00:00` : input,\n\t);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleDateString(undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t\tyear: 'numeric',\n\t});\n}\n\nexport function formatTimeRange(\n\tt: { start?: string; end?: string } | undefined,\n): string {\n\tif (!t) return '';\n\tconst start = formatTime(t.start);\n\tconst end = formatTime(t.end);\n\tif (start && end) return `${start} - ${end}`;\n\treturn start || end || '';\n}\n\nexport function formatNumber(value: unknown, dp = 1): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn value.toFixed(dp).replace(/\\.?0+$/, '');\n}\n\nexport function formatPercent(value: unknown, dp = 1): string {\n\tconst n = formatNumber(value, dp);\n\treturn n ? `${n}%` : '';\n}\n\n/**\n * CSS class name per aspect type. Used by natal and synastry chart aspect\n * lines so the same color encoding (harmonious vs challenging) applies in\n * both wheels. Keys are lowercase canonical names, values are CSS class\n * suffixes the chart components define in their `:host` styles.\n */\nexport const ASPECT_CLASS: Record<string, string> = {\n\tconjunction: 'aspect-conjunction',\n\tsextile: 'aspect-sextile',\n\tsquare: 'aspect-square',\n\ttrine: 'aspect-trine',\n\topposition: 'aspect-opposition',\n};\n\n/**\n * Normalize the `type` field on an aspect entry to a lowercase, hyphen-separated\n * canonical name (`SEMI_SEXTILE` \u2192 `semi-sextile`). Accepts any aspect-shaped\n * object so both natal and synastry inter-aspect entries can share this.\n */\nexport function normalizeAspect(a: { type?: string }): string {\n\treturn (a.type ?? '').toLowerCase().replace(/_/g, '-');\n}\n", "import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Marker class on the inline JSON script a server emits inside a component.\n *\n * @example\n * ```html\n * <roxy-natal-chart>\n * <script type=\"application/json\" class=\"roxy-data\">{ ...response... }</script>\n * </roxy-natal-chart>\n * ```\n */\nconst ROXY_DATA_CLASS = 'roxy-data';\n\n/**\n * True when the element is a `<script type=\"application/json\">`. Uses tag name and attribute rather than `instanceof HTMLScriptElement` so the check holds in every DOM implementation, including server-rendered and hydration runtimes where the constructor global may be absent.\n */\nfunction isJsonScript(el: Element): boolean {\n\treturn (\n\t\tel.nodeName === 'SCRIPT' && el.getAttribute('type') === 'application/json'\n\t);\n}\n\n/**\n * Host shape the controller drives: any reactive element that exposes a public `data` slot. The controller only writes `data` when the host left it unset, so the JavaScript property path always wins.\n */\ninterface DataHost extends ReactiveControllerHost, HTMLElement {\n\tdata?: unknown;\n}\n\n/**\n * Reactive controller that lets a component hydrate its `data` from embedded markup when no `data` property was assigned in JavaScript.\n *\n * @remarks\n * The server-side and cached-render model: a backend renders the RoxyAPI response into a direct-child `<script type=\"application/json\" class=\"roxy-data\">` element, ships static HTML, and never runs per-element JavaScript to assign a property. On connect this controller reads that script, parses it, and feeds the result to the host. The JavaScript property path is untouched and authoritative: if `host.data` already holds a value when the host connects, the controller does nothing and the markup is ignored.\n *\n * Source resolution order on connect, first hit wins:\n *\n * 1. `host.data` already set in JavaScript -> leave it, read nothing.\n * 2. A direct-child `<script type=\"application/json\" class=\"roxy-data\">` -> parse and use. Direct-child only, so a nested component's own script is never read by an ancestor.\n *\n * Fetching from a URL is intentionally unsupported: that would require a browser-visible key and breaks the server-rendered, cached model these consumers rely on.\n *\n * Timing: {@link hostConnected} runs inside the host `connectedCallback`. For an element parsed from server HTML, its direct children are present by the time the custom element upgrades and connects, so the script is readable here. For an element created with `document.createElement` and connected before any child is appended, there is nothing to read and the property path is the only source, which is exactly the existing behavior.\n *\n * Failure is safe: malformed JSON or a missing script leaves `host.data` untouched, so the host renders its normal empty state.\n *\n * Reading the script never mutates it, and only the marked script is touched, so any sibling fallback markup a server nested inside the element (for no-JavaScript, AMP, or crawler rendering) is left in place.\n *\n * @example\n * ```ts\n * import { MarkupDataController } from '../utils/markup-data.js';\n *\n * export class RoxyExample extends LitElement {\n * constructor() {\n * super();\n * new MarkupDataController(this);\n * }\n *\n * @property({ attribute: false })\n * data: ExampleResponse | null = null;\n * }\n * ```\n */\nexport class MarkupDataController<T = unknown> implements ReactiveController {\n\tprivate readonly host: DataHost;\n\n\tconstructor(host: DataHost) {\n\t\tthis.host = host;\n\t\thost.addController(this);\n\t}\n\n\thostConnected() {\n\t\t// Property path wins. If the consumer (React, vanilla `.data =`, the\n\t\t// widgets script, an MCP agent) already set data, never look at markup.\n\t\tif (this.host.data != null) return;\n\n\t\tconst parsed = this.read();\n\t\tif (parsed === undefined) return;\n\n\t\tthis.host.data = parsed as T;\n\t\tthis.host.requestUpdate();\n\t}\n\n\t/**\n\t * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.\n\t */\n\tprivate read(): T | undefined {\n\t\tconst inline = this.findInlineScript();\n\t\treturn inline ? this.parse(inline.textContent) : undefined;\n\t}\n\n\t/**\n\t * Direct-child `<script type=\"application/json\" class=\"roxy-data\">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.\n\t */\n\tprivate findInlineScript(): Element | null {\n\t\tfor (const child of Array.from(this.host.children)) {\n\t\t\tif (isJsonScript(child) && child.classList.contains(ROXY_DATA_CLASS)) {\n\t\t\t\treturn child;\n\t\t\t}\n\t\t}\n\t\treturn null;\n\t}\n\n\tprivate parse(text: string | null): T | undefined {\n\t\tif (!text?.trim()) return undefined;\n\t\ttry {\n\t\t\treturn JSON.parse(text) as T;\n\t\t} catch {\n\t\t\t// Malformed embedded JSON: fail safe, leave the host empty state in\n\t\t\t// place rather than throwing during connect.\n\t\t\treturn undefined;\n\t\t}\n\t}\n}\n"],
|
|
5
|
+
"mappings": "wMAAA,OAAS,OAAAA,EAAK,QAAAC,EAAM,cAAAC,EAAY,WAAAC,MAAe,MAC/C,OAAS,iBAAAC,EAAe,YAAAC,EAAU,SAAAC,MAAa,oBCD/C,OAAS,OAAAC,MAAW,MAMb,IAAMC,EAAaD,myCCqCnB,SAASE,EAAaC,EAAgBC,EAAK,EAAW,CAC5D,OAAI,OAAOD,GAAU,UAAY,CAAC,OAAO,SAASA,CAAK,EAAU,GAC1DA,EAAM,QAAQC,CAAE,EAAE,QAAQ,SAAU,EAAE,CAC9C,CClCA,IAAMC,EAAkB,YAKxB,SAASC,EAAaC,EAAsB,CAC3C,OACCA,EAAG,WAAa,UAAYA,EAAG,aAAa,MAAM,IAAM,kBAE1D,CA2CO,IAAMC,EAAN,KAAsE,CAG5E,YAAYC,EAAgB,CAC3B,KAAK,KAAOA,EACZA,EAAK,cAAc,IAAI,CACxB,CAEA,eAAgB,CAGf,GAAI,KAAK,KAAK,MAAQ,KAAM,OAE5B,IAAMC,EAAS,KAAK,KAAK,EACrBA,IAAW,SAEf,KAAK,KAAK,KAAOA,EACjB,KAAK,KAAK,cAAc,EACzB,CAKQ,MAAsB,CAC7B,IAAMC,EAAS,KAAK,iBAAiB,EACrC,OAAOA,EAAS,KAAK,MAAMA,EAAO,WAAW,EAAI,MAClD,CAKQ,kBAAmC,CAC1C,QAAWC,KAAS,MAAM,KAAK,KAAK,KAAK,QAAQ,EAChD,GAAIN,EAAaM,CAAK,GAAKA,EAAM,UAAU,SAASP,CAAe,EAClE,OAAOO,EAGT,OAAO,IACR,CAEQ,MAAMC,EAAoC,CACjD,GAAKA,GAAM,KAAK,EAChB,GAAI,CACH,OAAO,KAAK,MAAMA,CAAI,CACvB,MAAQ,CAGP,MACD,CACD,CACD,EHpFO,IAAMC,EAAN,cAA0BC,CAAW,CAM3C,aAAc,CACb,MAAM,EAQP,UAA+B,KAG/B,KAAQ,UAAiB,UAPxB,IAAIC,EAAqB,IAAI,CAC9B,CASQ,QAAmB,CAC1B,IAAMC,EAAI,KAAK,KACf,GAAI,CAACA,EAAG,MAAO,CAAC,EAChB,IAAMC,GAAkBD,EAAE,SAAW,CAAC,GAAG,IAAKE,IAAO,CACpD,KAAMA,EAAE,OACR,KAAMA,EAAE,KACR,MAAOA,EAAE,MACT,UAAWA,EAAE,UACb,SAAUA,EAAE,SACZ,QAASA,EAAE,QACX,WAAYA,EAAE,WACd,SAAUA,EAAE,SACZ,WAAYA,EAAE,UACf,EAAE,EACIC,EAAQH,EAAE,MAChB,OAAW,CAACI,EAAMC,CAAI,GAAK,CAC1B,CAAC,OAAQF,GAAO,IAAI,EACpB,CAAC,OAAQA,GAAO,IAAI,CACrB,EACKE,GACHJ,EAAK,KAAK,CACT,KAAAG,EACA,KAAMC,EAAK,KACX,MAAOA,EAAK,MACZ,UAAWA,EAAK,UAChB,SAAUA,EAAK,SACf,QAASA,EAAK,QACd,WAAYA,EAAK,WACjB,WAAY,EACb,CAAC,EAGH,OAAOJ,CACR,CAEQ,aAAa,EAAkB,CACtC,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YAAa,OACrD,EAAE,eAAe,EACjB,KAAK,UAAY,KAAK,YAAc,UAAY,QAAU,UAC1D,IAAMK,EAAO,KAAK,UAClB,sBAAsB,IAAM,CAC3B,KAAK,YACF,cAAiC,QAAQA,CAAI,EAAE,GAC/C,MAAM,CACV,CAAC,CACF,CAEA,QAAS,CACR,GAAI,CAAC,KAAK,KACT,OAAOC,gEACR,IAAMP,EAAI,KAAK,KACTQ,EAAMR,EAAE,UAEd,OAAOO,6GACJC,EACGD,wCAA2CC,EAAI,MAAQ,EAAE,aAAaA,EAAI,UAAYD,MAASC,EAAI,SAAS,GAAKC,CAAO,IAAID,EAAI,QAAUD,eAAkBC,EAAI,OAAO,GAAKC,CAAO,IAAI,OAAOD,EAAI,UAAa,SAAWD,SAAYC,EAAI,QAAQ,GAAKC,CAAO,SAC9PA,CACJ,IACC,OAAOT,EAAE,MAAM,UAAa,SACzBO,sBAAyBP,EAAE,KAAK,cAAgB,UAAU,KAAKU,EAAaV,EAAE,KAAK,SAAU,CAAC,CAAC,KAAKA,EAAE,KAAK,YAAcO,MAASP,EAAE,KAAK,WAAW,UAAYS,CAAO,SACvKA,CACJ,sFAAsF,KAAK,YAAY,KAAM,CAAC,UAAW,OAAO,EAAY,IAC1IE,GAAMJ,2CAA8CI,CAAC,oBAAoB,KAAK,YAAcA,EAAI,OAAS,OAAO,0BAA0BA,CAAC,eAAe,KAAK,YAAcA,EAAI,IAAM,IAAI,aAAa,IAAM,CAC7M,KAAK,UAAYA,CAClB,CAAC,KAAKA,IAAM,UAAY,UAAY,OAAO,WAC7C,CAAC,wBAAwB,KAAK,SAAS,0CAA0C,KAAK,SAAS,KAAK,KAAK,YAAc,UAAY,KAAK,cAAc,EAAI,KAAK,YAAY,CAAC,cAC/K,CAEQ,eAAgB,CACvB,IAAMC,EAAS,KAAK,OAAO,EAC3B,OAAKA,EAAO,OAELL,0TAA6TK,EAAO,IACvUC,GAAMN,yBAA4BM,EAAE,IAAI,GAAGA,EAAE,WAAaN,gCAAqCE,CAAO,YAAYI,EAAE,MAAQ,EAAE,wBAAwB,OAAOA,EAAE,OAAU,SAAWA,EAAE,MAAQ,EAAE,YAAYA,EAAE,WAAa,EAAE,YAAYA,EAAE,UAAY,EAAE,YAAYA,EAAE,SAAW,EAAE,YAAYA,EAAE,YAAc,EAAE,wBAAwB,OAAOA,EAAE,UAAa,SAAWA,EAAE,SAAW,EAAE,YAC5X,CAAC,mBAHKN,qDAIT,CAEQ,aAAc,CACrB,IAAMO,EAAQ,KAAK,MAAM,OAAS,CAAC,EACnC,OAAKA,EAAM,OAEJP,4TAA+TO,EAAM,IACxUC,GAAMR,6BAAgCQ,EAAE,KAAK,YAAYA,EAAE,MAAQ,EAAE,YAAYA,EAAE,UAAY,EAAE,YAAYA,EAAE,WAAa,EAAE,YAAYA,EAAE,UAAY,EAAE,YAAYA,EAAE,SAAW,EAAE,YAAYA,EAAE,YAAc,EAAE,wBAAwB,OAAOA,EAAE,UAAa,SAAWA,EAAE,SAAW,EAAE,YAC7R,CAAC,mBAHKR,mDAIT,CACD,EA1GaV,EACL,OAAS,CACfmB,EACAC,2zDACD,EAWAC,EAAA,CADCC,EAAS,CAAE,UAAW,EAAM,CAAC,GAdlBtB,EAeZ,oBAGQqB,EAAA,CADPE,EAAM,GAjBKvB,EAkBJ,yBAlBIA,EAANqB,EAAA,CADNG,EAAc,eAAe,GACjBxB",
|
|
6
6
|
"names": ["css", "html", "LitElement", "nothing", "customElement", "property", "state", "css", "baseStyles", "formatNumber", "value", "dp", "ROXY_DATA_CLASS", "isJsonScript", "el", "MarkupDataController", "host", "parsed", "inline", "child", "text", "RoxyKpChart", "LitElement", "MarkupDataController", "d", "rows", "p", "nodes", "name", "node", "next", "html", "asc", "nothing", "formatNumber", "t", "bodies", "b", "cusps", "c", "baseStyles", "css", "__decorateClass", "property", "state", "customElement"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var x=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=(o,r,e,a)=>{for(var t=a>1?void 0:a?g(r,e):r,i=o.length-1,l;i>=0;i--)(l=o[i])&&(t=(a?l(r,e,t):l(t))||t);return a&&t&&x(r,e,t),t};import{css as v,html as n,LitElement as b,nothing as m}from"lit";import{customElement as h,property as S}from"lit/decorators.js";import{css as u}from"lit";var c=u`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;var y="roxy-data";function f(o){return o.nodeName==="SCRIPT"&&o.getAttribute("type")==="application/json"}var d=class{constructor(r){this.host=r,r.addController(this)}hostConnected(){if(this.host.data!=null)return;let r=this.read();r!==void 0&&(this.host.data=r,this.host.requestUpdate())}read(){let r=this.findInlineScript();return r?this.parse(r.textContent):void 0}findInlineScript(){for(let r of Array.from(this.host.children))if(f(r)&&r.classList.contains(y))return r;return null}parse(r){if(r?.trim())try{return JSON.parse(r)}catch{return}}};var s=class extends b{constructor(){super();this.data=null;new d(this)}render(){if(!this.data)return n`<div class="roxy-empty" role="status">No ruling planets data</div>`;let e=this.data,a=e.significators??[];return n`<div class="wrap" aria-label="KP ruling planets"><header><h2 class="title">KP ruling planets</h2>${e.dayLord?n`<div class="day-lord">Day lord: <strong>${e.dayLord}</strong></div>`:m}</header><div class="groups"><div class="group"><h3>Moon</h3><dl><dt>Sign lord</dt><dd>${e.moonSignLord??""}</dd><dt>Star lord</dt><dd>${e.moonStarLord??""}</dd><dt>Sub lord</dt><dd>${e.moonSublord??""}</dd><dt>Sub-sub lord</dt><dd>${e.moonSubSublord??""}</dd></dl></div><div class="group"><h3>Lagna</h3><dl><dt>Sign lord</dt><dd>${e.lagnaSignLord??""}</dd><dt>Star lord</dt><dd>${e.lagnaStarLord??""}</dd><dt>Sub lord</dt><dd>${e.lagnaSublord??""}</dd><dt>Sub-sub lord</dt><dd>${e.lagnaSubSublord??""}</dd></dl></div></div>${e.rulingPlanets?.length?n`<div class="rp-list" role="list" aria-label="Ruling planets by strength"><span class="rp-label">Ruling planets</span> ${e.rulingPlanets.map((t,i)=>n`<span class="rp" role="listitem"><span class="rank">${i+1}</span> ${t}</span>`)}</div>`:m} ${a.length?n`<table aria-label="House significators"><thead><tr><th scope="col">Planet</th><th scope="col">Signifies houses</th></tr></thead><tbody>${a.map(t=>n`<tr><td>${t.planet}</td><td>${(t.signifies??[]).join(", ")}</td></tr>`)}</tbody></table>`:m}</div>`}};s.styles=[c,v`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);padding:var(--roxy-space-md,1rem);gap:var(--roxy-space-md,1rem);box-shadow:var(--roxy-shadow-sm);display:grid}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.day-lord{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}.day-lord strong{color:var(--roxy-fg,#0a0a0a)}.groups{gap:var(--roxy-space-md,1rem);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));display:grid}.group h3{margin:0 0 var(--roxy-space-xs,.25rem);font-size:var(--roxy-text-xs,.75rem);font-weight:var(--roxy-weight-bold,600);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em}.group dl{gap:2px var(--roxy-space-sm,.5rem);font-size:var(--roxy-text-sm,.875rem);grid-template-columns:auto 1fr;margin:0;display:grid}.group dt{color:var(--roxy-muted,#71717a)}.group dd{color:var(--roxy-fg,#0a0a0a);font-weight:var(--roxy-weight-bold,600);margin:0}.rp-list{gap:var(--roxy-space-xs,.25rem);flex-wrap:wrap;align-items:center;display:flex}.rp-label{font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em;margin-right:var(--roxy-space-xs,.25rem)}.rp{font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600);background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 18%, transparent);color:var(--roxy-fg,#0a0a0a);border-radius:999px;align-items:center;gap:.3em;padding:.15em .6em;display:inline-flex}.rp .rank{font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-accent-
|
|
1
|
+
var x=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=(o,r,e,a)=>{for(var t=a>1?void 0:a?g(r,e):r,i=o.length-1,l;i>=0;i--)(l=o[i])&&(t=(a?l(r,e,t):l(t))||t);return a&&t&&x(r,e,t),t};import{css as v,html as n,LitElement as b,nothing as m}from"lit";import{customElement as h,property as S}from"lit/decorators.js";import{css as u}from"lit";var c=u`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;var y="roxy-data";function f(o){return o.nodeName==="SCRIPT"&&o.getAttribute("type")==="application/json"}var d=class{constructor(r){this.host=r,r.addController(this)}hostConnected(){if(this.host.data!=null)return;let r=this.read();r!==void 0&&(this.host.data=r,this.host.requestUpdate())}read(){let r=this.findInlineScript();return r?this.parse(r.textContent):void 0}findInlineScript(){for(let r of Array.from(this.host.children))if(f(r)&&r.classList.contains(y))return r;return null}parse(r){if(r?.trim())try{return JSON.parse(r)}catch{return}}};var s=class extends b{constructor(){super();this.data=null;new d(this)}render(){if(!this.data)return n`<div class="roxy-empty" role="status">No ruling planets data</div>`;let e=this.data,a=e.significators??[];return n`<div class="wrap" aria-label="KP ruling planets"><header><h2 class="title">KP ruling planets</h2>${e.dayLord?n`<div class="day-lord">Day lord: <strong>${e.dayLord}</strong></div>`:m}</header><div class="groups"><div class="group"><h3>Moon</h3><dl><dt>Sign lord</dt><dd>${e.moonSignLord??""}</dd><dt>Star lord</dt><dd>${e.moonStarLord??""}</dd><dt>Sub lord</dt><dd>${e.moonSublord??""}</dd><dt>Sub-sub lord</dt><dd>${e.moonSubSublord??""}</dd></dl></div><div class="group"><h3>Lagna</h3><dl><dt>Sign lord</dt><dd>${e.lagnaSignLord??""}</dd><dt>Star lord</dt><dd>${e.lagnaStarLord??""}</dd><dt>Sub lord</dt><dd>${e.lagnaSublord??""}</dd><dt>Sub-sub lord</dt><dd>${e.lagnaSubSublord??""}</dd></dl></div></div>${e.rulingPlanets?.length?n`<div class="rp-list" role="list" aria-label="Ruling planets by strength"><span class="rp-label">Ruling planets</span> ${e.rulingPlanets.map((t,i)=>n`<span class="rp" role="listitem"><span class="rank">${i+1}</span> ${t}</span>`)}</div>`:m} ${a.length?n`<table aria-label="House significators"><thead><tr><th scope="col">Planet</th><th scope="col">Signifies houses</th></tr></thead><tbody>${a.map(t=>n`<tr><td>${t.planet}</td><td>${(t.signifies??[]).join(", ")}</td></tr>`)}</tbody></table>`:m}</div>`}};s.styles=[c,v`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);padding:var(--roxy-space-md,1rem);gap:var(--roxy-space-md,1rem);box-shadow:var(--roxy-shadow-sm);display:grid}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.day-lord{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}.day-lord strong{color:var(--roxy-fg,#0a0a0a)}.groups{gap:var(--roxy-space-md,1rem);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));display:grid}.group h3{margin:0 0 var(--roxy-space-xs,.25rem);font-size:var(--roxy-text-xs,.75rem);font-weight:var(--roxy-weight-bold,600);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em}.group dl{gap:2px var(--roxy-space-sm,.5rem);font-size:var(--roxy-text-sm,.875rem);grid-template-columns:auto 1fr;margin:0;display:grid}.group dt{color:var(--roxy-muted,#71717a)}.group dd{color:var(--roxy-fg,#0a0a0a);font-weight:var(--roxy-weight-bold,600);margin:0}.rp-list{gap:var(--roxy-space-xs,.25rem);flex-wrap:wrap;align-items:center;display:flex}.rp-label{font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em;margin-right:var(--roxy-space-xs,.25rem)}.rp{font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600);background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 18%, transparent);color:var(--roxy-fg,#0a0a0a);border-radius:999px;align-items:center;gap:.3em;padding:.15em .6em;display:inline-flex}.rp .rank{font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-accent-ink,#b45309)}table{border-collapse:collapse;width:100%;font-size:var(--roxy-text-sm,.875rem)}th,td{padding:var(--roxy-space-xs,.25rem) var(--roxy-space-sm,.5rem);text-align:left;border-bottom:1px solid var(--roxy-border,#e4e4e7)}th{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600);text-transform:uppercase;font-size:var(--roxy-text-xs,.75rem);letter-spacing:.04em}`],p([S({attribute:!1})],s.prototype,"data",2),s=p([h("roxy-kp-ruling-planets")],s);export{s as RoxyKpRulingPlanets};
|
|
2
2
|
//# sourceMappingURL=kp-ruling-planets.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/kp-ruling-planets.ts", "../../src/utils/base-styles.ts", "../../src/utils/markup-data.ts"],
|
|
4
|
-
"sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { KpRulingPlanetsResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { MarkupDataController } from '../utils/markup-data.js';\n\n/**\n * KP ruling planets card. Renders /vedic-astrology/kp/ruling-planets: the day\n * lord, the Moon and Lagna stellar hierarchies (sign lord, star lord, sub\n * lord, sub-sub lord), the consolidated ruling-planet list ordered by\n * strength, and, when birth data is supplied, the house significators per\n * planet. The primary horary timing tool in KP astrology.\n */\n@customElement('roxy-kp-ruling-planets')\nexport class RoxyKpRulingPlanets extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);padding:var(--roxy-space-md,1rem);gap:var(--roxy-space-md,1rem);box-shadow:var(--roxy-shadow-sm);display:grid}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.day-lord{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}.day-lord strong{color:var(--roxy-fg,#0a0a0a)}.groups{gap:var(--roxy-space-md,1rem);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));display:grid}.group h3{margin:0 0 var(--roxy-space-xs,.25rem);font-size:var(--roxy-text-xs,.75rem);font-weight:var(--roxy-weight-bold,600);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em}.group dl{gap:2px var(--roxy-space-sm,.5rem);font-size:var(--roxy-text-sm,.875rem);grid-template-columns:auto 1fr;margin:0;display:grid}.group dt{color:var(--roxy-muted,#71717a)}.group dd{color:var(--roxy-fg,#0a0a0a);font-weight:var(--roxy-weight-bold,600);margin:0}.rp-list{gap:var(--roxy-space-xs,.25rem);flex-wrap:wrap;align-items:center;display:flex}.rp-label{font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em;margin-right:var(--roxy-space-xs,.25rem)}.rp{font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600);background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 18%, transparent);color:var(--roxy-fg,#0a0a0a);border-radius:999px;align-items:center;gap:.3em;padding:.15em .6em;display:inline-flex}.rp .rank{font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-accent-fg,#b45309)}table{border-collapse:collapse;width:100%;font-size:var(--roxy-text-sm,.875rem)}th,td{padding:var(--roxy-space-xs,.25rem) var(--roxy-space-sm,.5rem);text-align:left;border-bottom:1px solid var(--roxy-border,#e4e4e7)}th{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600);text-transform:uppercase;font-size:var(--roxy-text-xs,.75rem);letter-spacing:.04em}`,\n\t];\n\n\tconstructor() {\n\t\tsuper();\n\t\t// Enables hydrating `data` from a direct-child\n\t\t// <script type=\"application/json\" class=\"roxy-data\"> for server-rendered\n\t\t// and cached consumers. The JavaScript `data` property still wins.\n\t\tnew MarkupDataController(this);\n\t}\n\n\t@property({ attribute: false })\n\tdata: KpRulingPlanetsResponse | null = null;\n\n\trender() {\n\t\tif (!this.data)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No ruling planets data</div>`;\n\t\tconst d = this.data;\n\t\tconst significators = d.significators ?? [];\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"KP ruling planets\"><header><h2 class=\"title\">KP ruling planets</h2>${\n\t\t\t\t\td.dayLord\n\t\t\t\t\t\t? html`<div class=\"day-lord\">Day lord: <strong>${d.dayLord}</strong></div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}</header><div class=\"groups\"><div class=\"group\"><h3>Moon</h3><dl><dt>Sign lord</dt><dd>${d.moonSignLord ?? ''}</dd><dt>Star lord</dt><dd>${d.moonStarLord ?? ''}</dd><dt>Sub lord</dt><dd>${d.moonSublord ?? ''}</dd><dt>Sub-sub lord</dt><dd>${d.moonSubSublord ?? ''}</dd></dl></div><div class=\"group\"><h3>Lagna</h3><dl><dt>Sign lord</dt><dd>${d.lagnaSignLord ?? ''}</dd><dt>Star lord</dt><dd>${d.lagnaStarLord ?? ''}</dd><dt>Sub lord</dt><dd>${d.lagnaSublord ?? ''}</dd><dt>Sub-sub lord</dt><dd>${d.lagnaSubSublord ?? ''}</dd></dl></div></div>${\n\t\t\t\td.rulingPlanets?.length\n\t\t\t\t\t? html`<div class=\"rp-list\" role=\"list\" aria-label=\"Ruling planets by strength\"><span class=\"rp-label\">Ruling planets</span> ${d.rulingPlanets.map(\n\t\t\t\t\t\t\t(p, i) =>\n\t\t\t\t\t\t\t\thtml`<span class=\"rp\" role=\"listitem\"><span class=\"rank\">${i + 1}</span> ${p}</span>`,\n\t\t\t\t\t\t)}</div>`\n\t\t\t\t\t: nothing\n\t\t\t} ${\n\t\t\t\tsignificators.length\n\t\t\t\t\t? html`<table aria-label=\"House significators\"><thead><tr><th scope=\"col\">Planet</th><th scope=\"col\">Signifies houses</th></tr></thead><tbody>${significators.map(\n\t\t\t\t\t\t\t\t(s) => html`<tr><td>${s.planet}</td><td>${(s.signifies ?? []).join(', ')}</td></tr>`,\n\t\t\t\t\t\t\t)}</tbody></table>`\n\t\t\t\t\t: nothing\n\t\t\t}</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-kp-ruling-planets': RoxyKpRulingPlanets;\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`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;\n", "import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Marker class on the inline JSON script a server emits inside a component.\n *\n * @example\n * ```html\n * <roxy-natal-chart>\n * <script type=\"application/json\" class=\"roxy-data\">{ ...response... }</script>\n * </roxy-natal-chart>\n * ```\n */\nconst ROXY_DATA_CLASS = 'roxy-data';\n\n/**\n * True when the element is a `<script type=\"application/json\">`. Uses tag name and attribute rather than `instanceof HTMLScriptElement` so the check holds in every DOM implementation, including server-rendered and hydration runtimes where the constructor global may be absent.\n */\nfunction isJsonScript(el: Element): boolean {\n\treturn (\n\t\tel.nodeName === 'SCRIPT' && el.getAttribute('type') === 'application/json'\n\t);\n}\n\n/**\n * Host shape the controller drives: any reactive element that exposes a public `data` slot. The controller only writes `data` when the host left it unset, so the JavaScript property path always wins.\n */\ninterface DataHost extends ReactiveControllerHost, HTMLElement {\n\tdata?: unknown;\n}\n\n/**\n * Reactive controller that lets a component hydrate its `data` from embedded markup when no `data` property was assigned in JavaScript.\n *\n * @remarks\n * The server-side and cached-render model: a backend renders the RoxyAPI response into a direct-child `<script type=\"application/json\" class=\"roxy-data\">` element, ships static HTML, and never runs per-element JavaScript to assign a property. On connect this controller reads that script, parses it, and feeds the result to the host. The JavaScript property path is untouched and authoritative: if `host.data` already holds a value when the host connects, the controller does nothing and the markup is ignored.\n *\n * Source resolution order on connect, first hit wins:\n *\n * 1. `host.data` already set in JavaScript -> leave it, read nothing.\n * 2. A direct-child `<script type=\"application/json\" class=\"roxy-data\">` -> parse and use. Direct-child only, so a nested component's own script is never read by an ancestor.\n *\n * Fetching from a URL is intentionally unsupported: that would require a browser-visible key and breaks the server-rendered, cached model these consumers rely on.\n *\n * Timing: {@link hostConnected} runs inside the host `connectedCallback`. For an element parsed from server HTML, its direct children are present by the time the custom element upgrades and connects, so the script is readable here. For an element created with `document.createElement` and connected before any child is appended, there is nothing to read and the property path is the only source, which is exactly the existing behavior.\n *\n * Failure is safe: malformed JSON or a missing script leaves `host.data` untouched, so the host renders its normal empty state.\n *\n * Reading the script never mutates it, and only the marked script is touched, so any sibling fallback markup a server nested inside the element (for no-JavaScript, AMP, or crawler rendering) is left in place.\n *\n * @example\n * ```ts\n * import { MarkupDataController } from '../utils/markup-data.js';\n *\n * export class RoxyExample extends LitElement {\n * constructor() {\n * super();\n * new MarkupDataController(this);\n * }\n *\n * @property({ attribute: false })\n * data: ExampleResponse | null = null;\n * }\n * ```\n */\nexport class MarkupDataController<T = unknown> implements ReactiveController {\n\tprivate readonly host: DataHost;\n\n\tconstructor(host: DataHost) {\n\t\tthis.host = host;\n\t\thost.addController(this);\n\t}\n\n\thostConnected() {\n\t\t// Property path wins. If the consumer (React, vanilla `.data =`, the\n\t\t// widgets script, an MCP agent) already set data, never look at markup.\n\t\tif (this.host.data != null) return;\n\n\t\tconst parsed = this.read();\n\t\tif (parsed === undefined) return;\n\n\t\tthis.host.data = parsed as T;\n\t\tthis.host.requestUpdate();\n\t}\n\n\t/**\n\t * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.\n\t */\n\tprivate read(): T | undefined {\n\t\tconst inline = this.findInlineScript();\n\t\treturn inline ? this.parse(inline.textContent) : undefined;\n\t}\n\n\t/**\n\t * Direct-child `<script type=\"application/json\" class=\"roxy-data\">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.\n\t */\n\tprivate findInlineScript(): Element | null {\n\t\tfor (const child of Array.from(this.host.children)) {\n\t\t\tif (isJsonScript(child) && child.classList.contains(ROXY_DATA_CLASS)) {\n\t\t\t\treturn child;\n\t\t\t}\n\t\t}\n\t\treturn null;\n\t}\n\n\tprivate parse(text: string | null): T | undefined {\n\t\tif (!text?.trim()) return undefined;\n\t\ttry {\n\t\t\treturn JSON.parse(text) as T;\n\t\t} catch {\n\t\t\t// Malformed embedded JSON: fail safe, leave the host empty state in\n\t\t\t// place rather than throwing during connect.\n\t\t\treturn undefined;\n\t\t}\n\t}\n}\n"],
|
|
5
|
-
"mappings": "wMAAA,OAAS,OAAAA,EAAK,QAAAC,EAAM,cAAAC,EAAY,WAAAC,MAAe,MAC/C,OAAS,iBAAAC,EAAe,YAAAC,MAAgB,oBCDxC,OAAS,OAAAC,MAAW,MAMb,IAAMC,EAAaD,myCCM1B,IAAME,EAAkB,YAKxB,SAASC,EAAaC,EAAsB,CAC3C,OACCA,EAAG,WAAa,UAAYA,EAAG,aAAa,MAAM,IAAM,kBAE1D,CA2CO,IAAMC,EAAN,KAAsE,CAG5E,YAAYC,EAAgB,CAC3B,KAAK,KAAOA,EACZA,EAAK,cAAc,IAAI,CACxB,CAEA,eAAgB,CAGf,GAAI,KAAK,KAAK,MAAQ,KAAM,OAE5B,IAAMC,EAAS,KAAK,KAAK,EACrBA,IAAW,SAEf,KAAK,KAAK,KAAOA,EACjB,KAAK,KAAK,cAAc,EACzB,CAKQ,MAAsB,CAC7B,IAAMC,EAAS,KAAK,iBAAiB,EACrC,OAAOA,EAAS,KAAK,MAAMA,EAAO,WAAW,EAAI,MAClD,CAKQ,kBAAmC,CAC1C,QAAWC,KAAS,MAAM,KAAK,KAAK,KAAK,QAAQ,EAChD,GAAIN,EAAaM,CAAK,GAAKA,EAAM,UAAU,SAASP,CAAe,EAClE,OAAOO,EAGT,OAAO,IACR,CAEQ,MAAMC,EAAoC,CACjD,GAAKA,GAAM,KAAK,EAChB,GAAI,CACH,OAAO,KAAK,MAAMA,CAAI,CACvB,MAAQ,CAGP,MACD,CACD,CACD,EFpGO,IAAMC,EAAN,cAAkCC,CAAW,CAMnD,aAAc,CACb,MAAM,EAQP,UAAuC,KAJtC,IAAIC,EAAqB,IAAI,CAC9B,CAKA,QAAS,CACR,GAAI,CAAC,KAAK,KACT,OAAOC,sEACR,IAAMC,EAAI,KAAK,KACTC,EAAgBD,EAAE,eAAiB,CAAC,EAE1C,OAAOD,qGACJC,EAAE,QACCD,4CAA+CC,EAAE,OAAO,kBACxDE,CACJ,0FAA0FF,EAAE,cAAgB,EAAE,8BAA8BA,EAAE,cAAgB,EAAE,6BAA6BA,EAAE,aAAe,EAAE,iCAAiCA,EAAE,gBAAkB,EAAE,8EAA8EA,EAAE,eAAiB,EAAE,8BAA8BA,EAAE,eAAiB,EAAE,6BAA6BA,EAAE,cAAgB,EAAE,iCAAiCA,EAAE,iBAAmB,EAAE,yBACtgBA,EAAE,eAAe,OACdD,0HAA6HC,EAAE,cAAc,IAC7I,CAACG,EAAG,IACHJ,wDAA2D,EAAI,CAAC,WAAWI,CAAC,SAC9E,CAAC,SACAD,CACJ,IACCD,EAAc,OACXF,2IAA8IE,EAAc,IAC1JG,GAAML,YAAeK,EAAE,MAAM,aAAaA,EAAE,WAAa,CAAC,GAAG,KAAK,IAAI,CAAC,YACzE,CAAC,mBACDF,CACJ,QACF,CACD,EA1CaN,EACL,OAAS,CACfS,EACAC,
|
|
4
|
+
"sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { KpRulingPlanetsResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { MarkupDataController } from '../utils/markup-data.js';\n\n/**\n * KP ruling planets card. Renders /vedic-astrology/kp/ruling-planets: the day\n * lord, the Moon and Lagna stellar hierarchies (sign lord, star lord, sub\n * lord, sub-sub lord), the consolidated ruling-planet list ordered by\n * strength, and, when birth data is supplied, the house significators per\n * planet. The primary horary timing tool in KP astrology.\n */\n@customElement('roxy-kp-ruling-planets')\nexport class RoxyKpRulingPlanets extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);padding:var(--roxy-space-md,1rem);gap:var(--roxy-space-md,1rem);box-shadow:var(--roxy-shadow-sm);display:grid}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.day-lord{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}.day-lord strong{color:var(--roxy-fg,#0a0a0a)}.groups{gap:var(--roxy-space-md,1rem);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));display:grid}.group h3{margin:0 0 var(--roxy-space-xs,.25rem);font-size:var(--roxy-text-xs,.75rem);font-weight:var(--roxy-weight-bold,600);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em}.group dl{gap:2px var(--roxy-space-sm,.5rem);font-size:var(--roxy-text-sm,.875rem);grid-template-columns:auto 1fr;margin:0;display:grid}.group dt{color:var(--roxy-muted,#71717a)}.group dd{color:var(--roxy-fg,#0a0a0a);font-weight:var(--roxy-weight-bold,600);margin:0}.rp-list{gap:var(--roxy-space-xs,.25rem);flex-wrap:wrap;align-items:center;display:flex}.rp-label{font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em;margin-right:var(--roxy-space-xs,.25rem)}.rp{font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600);background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 18%, transparent);color:var(--roxy-fg,#0a0a0a);border-radius:999px;align-items:center;gap:.3em;padding:.15em .6em;display:inline-flex}.rp .rank{font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-accent-ink,#b45309)}table{border-collapse:collapse;width:100%;font-size:var(--roxy-text-sm,.875rem)}th,td{padding:var(--roxy-space-xs,.25rem) var(--roxy-space-sm,.5rem);text-align:left;border-bottom:1px solid var(--roxy-border,#e4e4e7)}th{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600);text-transform:uppercase;font-size:var(--roxy-text-xs,.75rem);letter-spacing:.04em}`,\n\t];\n\n\tconstructor() {\n\t\tsuper();\n\t\t// Enables hydrating `data` from a direct-child\n\t\t// <script type=\"application/json\" class=\"roxy-data\"> for server-rendered\n\t\t// and cached consumers. The JavaScript `data` property still wins.\n\t\tnew MarkupDataController(this);\n\t}\n\n\t@property({ attribute: false })\n\tdata: KpRulingPlanetsResponse | null = null;\n\n\trender() {\n\t\tif (!this.data)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No ruling planets data</div>`;\n\t\tconst d = this.data;\n\t\tconst significators = d.significators ?? [];\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"KP ruling planets\"><header><h2 class=\"title\">KP ruling planets</h2>${\n\t\t\t\t\td.dayLord\n\t\t\t\t\t\t? html`<div class=\"day-lord\">Day lord: <strong>${d.dayLord}</strong></div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}</header><div class=\"groups\"><div class=\"group\"><h3>Moon</h3><dl><dt>Sign lord</dt><dd>${d.moonSignLord ?? ''}</dd><dt>Star lord</dt><dd>${d.moonStarLord ?? ''}</dd><dt>Sub lord</dt><dd>${d.moonSublord ?? ''}</dd><dt>Sub-sub lord</dt><dd>${d.moonSubSublord ?? ''}</dd></dl></div><div class=\"group\"><h3>Lagna</h3><dl><dt>Sign lord</dt><dd>${d.lagnaSignLord ?? ''}</dd><dt>Star lord</dt><dd>${d.lagnaStarLord ?? ''}</dd><dt>Sub lord</dt><dd>${d.lagnaSublord ?? ''}</dd><dt>Sub-sub lord</dt><dd>${d.lagnaSubSublord ?? ''}</dd></dl></div></div>${\n\t\t\t\td.rulingPlanets?.length\n\t\t\t\t\t? html`<div class=\"rp-list\" role=\"list\" aria-label=\"Ruling planets by strength\"><span class=\"rp-label\">Ruling planets</span> ${d.rulingPlanets.map(\n\t\t\t\t\t\t\t(p, i) =>\n\t\t\t\t\t\t\t\thtml`<span class=\"rp\" role=\"listitem\"><span class=\"rank\">${i + 1}</span> ${p}</span>`,\n\t\t\t\t\t\t)}</div>`\n\t\t\t\t\t: nothing\n\t\t\t} ${\n\t\t\t\tsignificators.length\n\t\t\t\t\t? html`<table aria-label=\"House significators\"><thead><tr><th scope=\"col\">Planet</th><th scope=\"col\">Signifies houses</th></tr></thead><tbody>${significators.map(\n\t\t\t\t\t\t\t\t(s) => html`<tr><td>${s.planet}</td><td>${(s.signifies ?? []).join(', ')}</td></tr>`,\n\t\t\t\t\t\t\t)}</tbody></table>`\n\t\t\t\t\t: nothing\n\t\t\t}</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-kp-ruling-planets': RoxyKpRulingPlanets;\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`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;\n", "import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Marker class on the inline JSON script a server emits inside a component.\n *\n * @example\n * ```html\n * <roxy-natal-chart>\n * <script type=\"application/json\" class=\"roxy-data\">{ ...response... }</script>\n * </roxy-natal-chart>\n * ```\n */\nconst ROXY_DATA_CLASS = 'roxy-data';\n\n/**\n * True when the element is a `<script type=\"application/json\">`. Uses tag name and attribute rather than `instanceof HTMLScriptElement` so the check holds in every DOM implementation, including server-rendered and hydration runtimes where the constructor global may be absent.\n */\nfunction isJsonScript(el: Element): boolean {\n\treturn (\n\t\tel.nodeName === 'SCRIPT' && el.getAttribute('type') === 'application/json'\n\t);\n}\n\n/**\n * Host shape the controller drives: any reactive element that exposes a public `data` slot. The controller only writes `data` when the host left it unset, so the JavaScript property path always wins.\n */\ninterface DataHost extends ReactiveControllerHost, HTMLElement {\n\tdata?: unknown;\n}\n\n/**\n * Reactive controller that lets a component hydrate its `data` from embedded markup when no `data` property was assigned in JavaScript.\n *\n * @remarks\n * The server-side and cached-render model: a backend renders the RoxyAPI response into a direct-child `<script type=\"application/json\" class=\"roxy-data\">` element, ships static HTML, and never runs per-element JavaScript to assign a property. On connect this controller reads that script, parses it, and feeds the result to the host. The JavaScript property path is untouched and authoritative: if `host.data` already holds a value when the host connects, the controller does nothing and the markup is ignored.\n *\n * Source resolution order on connect, first hit wins:\n *\n * 1. `host.data` already set in JavaScript -> leave it, read nothing.\n * 2. A direct-child `<script type=\"application/json\" class=\"roxy-data\">` -> parse and use. Direct-child only, so a nested component's own script is never read by an ancestor.\n *\n * Fetching from a URL is intentionally unsupported: that would require a browser-visible key and breaks the server-rendered, cached model these consumers rely on.\n *\n * Timing: {@link hostConnected} runs inside the host `connectedCallback`. For an element parsed from server HTML, its direct children are present by the time the custom element upgrades and connects, so the script is readable here. For an element created with `document.createElement` and connected before any child is appended, there is nothing to read and the property path is the only source, which is exactly the existing behavior.\n *\n * Failure is safe: malformed JSON or a missing script leaves `host.data` untouched, so the host renders its normal empty state.\n *\n * Reading the script never mutates it, and only the marked script is touched, so any sibling fallback markup a server nested inside the element (for no-JavaScript, AMP, or crawler rendering) is left in place.\n *\n * @example\n * ```ts\n * import { MarkupDataController } from '../utils/markup-data.js';\n *\n * export class RoxyExample extends LitElement {\n * constructor() {\n * super();\n * new MarkupDataController(this);\n * }\n *\n * @property({ attribute: false })\n * data: ExampleResponse | null = null;\n * }\n * ```\n */\nexport class MarkupDataController<T = unknown> implements ReactiveController {\n\tprivate readonly host: DataHost;\n\n\tconstructor(host: DataHost) {\n\t\tthis.host = host;\n\t\thost.addController(this);\n\t}\n\n\thostConnected() {\n\t\t// Property path wins. If the consumer (React, vanilla `.data =`, the\n\t\t// widgets script, an MCP agent) already set data, never look at markup.\n\t\tif (this.host.data != null) return;\n\n\t\tconst parsed = this.read();\n\t\tif (parsed === undefined) return;\n\n\t\tthis.host.data = parsed as T;\n\t\tthis.host.requestUpdate();\n\t}\n\n\t/**\n\t * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.\n\t */\n\tprivate read(): T | undefined {\n\t\tconst inline = this.findInlineScript();\n\t\treturn inline ? this.parse(inline.textContent) : undefined;\n\t}\n\n\t/**\n\t * Direct-child `<script type=\"application/json\" class=\"roxy-data\">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.\n\t */\n\tprivate findInlineScript(): Element | null {\n\t\tfor (const child of Array.from(this.host.children)) {\n\t\t\tif (isJsonScript(child) && child.classList.contains(ROXY_DATA_CLASS)) {\n\t\t\t\treturn child;\n\t\t\t}\n\t\t}\n\t\treturn null;\n\t}\n\n\tprivate parse(text: string | null): T | undefined {\n\t\tif (!text?.trim()) return undefined;\n\t\ttry {\n\t\t\treturn JSON.parse(text) as T;\n\t\t} catch {\n\t\t\t// Malformed embedded JSON: fail safe, leave the host empty state in\n\t\t\t// place rather than throwing during connect.\n\t\t\treturn undefined;\n\t\t}\n\t}\n}\n"],
|
|
5
|
+
"mappings": "wMAAA,OAAS,OAAAA,EAAK,QAAAC,EAAM,cAAAC,EAAY,WAAAC,MAAe,MAC/C,OAAS,iBAAAC,EAAe,YAAAC,MAAgB,oBCDxC,OAAS,OAAAC,MAAW,MAMb,IAAMC,EAAaD,myCCM1B,IAAME,EAAkB,YAKxB,SAASC,EAAaC,EAAsB,CAC3C,OACCA,EAAG,WAAa,UAAYA,EAAG,aAAa,MAAM,IAAM,kBAE1D,CA2CO,IAAMC,EAAN,KAAsE,CAG5E,YAAYC,EAAgB,CAC3B,KAAK,KAAOA,EACZA,EAAK,cAAc,IAAI,CACxB,CAEA,eAAgB,CAGf,GAAI,KAAK,KAAK,MAAQ,KAAM,OAE5B,IAAMC,EAAS,KAAK,KAAK,EACrBA,IAAW,SAEf,KAAK,KAAK,KAAOA,EACjB,KAAK,KAAK,cAAc,EACzB,CAKQ,MAAsB,CAC7B,IAAMC,EAAS,KAAK,iBAAiB,EACrC,OAAOA,EAAS,KAAK,MAAMA,EAAO,WAAW,EAAI,MAClD,CAKQ,kBAAmC,CAC1C,QAAWC,KAAS,MAAM,KAAK,KAAK,KAAK,QAAQ,EAChD,GAAIN,EAAaM,CAAK,GAAKA,EAAM,UAAU,SAASP,CAAe,EAClE,OAAOO,EAGT,OAAO,IACR,CAEQ,MAAMC,EAAoC,CACjD,GAAKA,GAAM,KAAK,EAChB,GAAI,CACH,OAAO,KAAK,MAAMA,CAAI,CACvB,MAAQ,CAGP,MACD,CACD,CACD,EFpGO,IAAMC,EAAN,cAAkCC,CAAW,CAMnD,aAAc,CACb,MAAM,EAQP,UAAuC,KAJtC,IAAIC,EAAqB,IAAI,CAC9B,CAKA,QAAS,CACR,GAAI,CAAC,KAAK,KACT,OAAOC,sEACR,IAAMC,EAAI,KAAK,KACTC,EAAgBD,EAAE,eAAiB,CAAC,EAE1C,OAAOD,qGACJC,EAAE,QACCD,4CAA+CC,EAAE,OAAO,kBACxDE,CACJ,0FAA0FF,EAAE,cAAgB,EAAE,8BAA8BA,EAAE,cAAgB,EAAE,6BAA6BA,EAAE,aAAe,EAAE,iCAAiCA,EAAE,gBAAkB,EAAE,8EAA8EA,EAAE,eAAiB,EAAE,8BAA8BA,EAAE,eAAiB,EAAE,6BAA6BA,EAAE,cAAgB,EAAE,iCAAiCA,EAAE,iBAAmB,EAAE,yBACtgBA,EAAE,eAAe,OACdD,0HAA6HC,EAAE,cAAc,IAC7I,CAACG,EAAG,IACHJ,wDAA2D,EAAI,CAAC,WAAWI,CAAC,SAC9E,CAAC,SACAD,CACJ,IACCD,EAAc,OACXF,2IAA8IE,EAAc,IAC1JG,GAAML,YAAeK,EAAE,MAAM,aAAaA,EAAE,WAAa,CAAC,GAAG,KAAK,IAAI,CAAC,YACzE,CAAC,mBACDF,CACJ,QACF,CACD,EA1CaN,EACL,OAAS,CACfS,EACAC,k+DACD,EAWAC,EAAA,CADCC,EAAS,CAAE,UAAW,EAAM,CAAC,GAdlBZ,EAeZ,oBAfYA,EAANW,EAAA,CADNE,EAAc,wBAAwB,GAC1Bb",
|
|
6
6
|
"names": ["css", "html", "LitElement", "nothing", "customElement", "property", "css", "baseStyles", "ROXY_DATA_CLASS", "isJsonScript", "el", "MarkupDataController", "host", "parsed", "inline", "child", "text", "RoxyKpRulingPlanets", "LitElement", "MarkupDataController", "html", "d", "significators", "nothing", "p", "s", "baseStyles", "css", "__decorateClass", "property", "customElement"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var b=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var s=(d,o,e,t)=>{for(var r=t>1?void 0:t?g(o,e):o,n=d.length-1,a;n>=0;n--)(a=d[n])&&(r=(t?a(o,e,r):a(r))||r);return t&&r&&b(o,e,r),r};import{css as x,html as l,LitElement as k,nothing as
|
|
1
|
+
var b=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var s=(d,o,e,t)=>{for(var r=t>1?void 0:t?g(o,e):o,n=d.length-1,a;n>=0;n--)(a=d[n])&&(r=(t?a(o,e,r):a(r))||r);return t&&r&&b(o,e,r),r};import{css as x,html as l,LitElement as k,nothing as f}from"lit";import{customElement as w,property as u,state as p}from"lit/decorators.js";import{css as v}from"lit";var c=v`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;function y(d,o){let e,t=((...r)=>{e&&clearTimeout(e),e=setTimeout(()=>{e=void 0,d(...r)},o)});return t.cancel=()=>{e&&(clearTimeout(e),e=void 0)},t}var i=class extends k{constructor(){super(...arguments);this.endpoint="https://roxyapi.com/api/v2/location/search";this.placeholder="Search city";this.defaultValue="";this.query="";this.results=[];this.isOpen=!1;this.isLoading=!1;this.highlight=-1;this.secretKeyWarned=!1;this.debouncedFetch=y(e=>{this.fetchResults(e)},300);this.onInput=e=>{let t=e.target.value;if(this.query=t,t.length<2){this.results=[],this.isOpen=!1,this.highlight=-1;return}this.debouncedFetch(t)};this.onKeyDown=e=>{if(!this.isOpen||this.results.length===0){e.key==="ArrowDown"&&this.query.length>=2&&(this.fetchResults(this.query),e.preventDefault());return}if(e.key==="ArrowDown")e.preventDefault(),this.highlight=(this.highlight+1)%this.results.length;else if(e.key==="ArrowUp")e.preventDefault(),this.highlight=(this.highlight-1+this.results.length)%this.results.length;else if(e.key==="Enter"){e.preventDefault();let t=this.results[this.highlight]??this.results[0];t&&this.select(t)}else e.key==="Escape"&&(this.isOpen=!1)}}connectedCallback(){super.connectedCallback(),this.query=this.defaultValue,this.clickOutsideHandler=e=>{e.composedPath().includes(this)||(this.isOpen=!1)},document.addEventListener("mousedown",this.clickOutsideHandler)}disconnectedCallback(){super.disconnectedCallback(),this.clickOutsideHandler&&document.removeEventListener("mousedown",this.clickOutsideHandler),this.debouncedFetch.cancel(),this.abortController&&(this.abortController.abort(),this.abortController=void 0)}warnIfSecretKey(){if(this.secretKeyWarned||!this.apiKey||this.apiKey.startsWith("pk_"))return;this.secretKeyWarned=!0;let e="Possible secret key in client-side <roxy-location-search>; use a `pk_` publishable key with origin allowlist instead.";console.warn(e),this.dispatchEvent(new CustomEvent("roxy-validation-error",{detail:{reason:"possible-secret-key",message:e},bubbles:!0,composed:!0}))}async fetchResults(e){this.warnIfSecretKey(),this.abortController&&this.abortController.abort();let t=new AbortController;this.abortController=t,this.isLoading=!0;try{let r=new URL(this.endpoint);r.searchParams.set("q",e),r.searchParams.set("limit","8");let n={Accept:"application/json"};this.apiKey&&this.publishableKey&&console.warn("[roxy-location-search] both api-key and publishable-key set; using publishable-key. Remove api-key from your widget markup.");let a=this.publishableKey??this.apiKey;a&&(n["X-API-Key"]=a);let h=await fetch(r,{headers:n,signal:t.signal});if(!h.ok)throw new Error(`HTTP ${h.status}`);let m=await h.json();if(t.signal.aborted)return;this.results=m.cities??[],this.isOpen=this.results.length>0,this.highlight=this.results.length>0?0:-1}catch(r){if(r?.name==="AbortError")return;this.results=[],this.isOpen=!1}finally{this.abortController===t&&(this.abortController=void 0),t.signal.aborted||(this.isLoading=!1)}}select(e){this.query=`${e.city}${e.province?`, ${e.province}`:""}, ${e.country}`,this.isOpen=!1,this.results=[],this.dispatchEvent(new CustomEvent("roxy-location-select",{detail:e,bubbles:!0,composed:!0}))}render(){return l`<div class="field"><input type="text" role="combobox" aria-expanded="${this.isOpen?"true":"false"}" aria-controls="roxy-location-listbox" aria-activedescendant="${this.isOpen&&this.highlight>=0?`roxy-location-option-${this.highlight}`:""}" aria-autocomplete="list" autocomplete="off" placeholder="${this.placeholder}" .value="${this.query}" @input="${this.onInput}" @keydown="${this.onKeyDown}" @focus="${()=>{this.results.length>0&&(this.isOpen=!0)}}"> ${this.isLoading?l`<span class="spinner" role="status" aria-label="Loading"></span>`:f} ${this.isOpen?l`<ul id="roxy-location-listbox" class="results" role="listbox">${this.results.length===0?l`<li class="empty" role="status">No cities found</li>`:this.results.map((e,t)=>l`<li role="presentation"><button type="button" class="option" role="option" id="${`roxy-location-option-${t}`}" aria-selected="${this.highlight===t?"true":"false"}" @click="${()=>this.select(e)}" @mouseenter="${()=>{this.highlight=t}}"><span class="city">${e.city}</span> <span class="where">${e.province?l`${e.province},`:""}${e.country}</span> <span class="tz">UTC${e.utcOffset>=0?"+":""}${e.utcOffset}</span></button></li>`)}</ul>`:f}</div>`}};i.styles=[c,x`:host{display:block;position:relative}.field{position:relative}input{width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-base,1rem);color:var(--roxy-fg,#0a0a0a);background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);transition:border-color var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));box-sizing:border-box;font-family:inherit}input:focus{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px;border-color:var(--roxy-accent-ink,#b45309)}.spinner{border:2px solid var(--roxy-muted,#71717a);border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite roxy-spin;position:absolute;top:50%;right:12px;transform:translateY(-50%)}@keyframes roxy-spin{to{transform:translateY(-50%)rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.results{z-index:50;background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);box-shadow:var(--roxy-shadow-md);max-height:22rem;animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.option{align-items:baseline;gap:var(--roxy-space-sm,.5rem);width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);text-align:left;font-family:inherit;font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a);cursor:pointer;transition:background-color var(--roxy-motion-duration,.2s);background:0 0;border:0;display:flex}.option:hover,.option[aria-selected=true]{background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 10%, transparent)}.option .city{font-weight:var(--roxy-weight-bold,600)}.option .where{color:var(--roxy-muted,#71717a);flex-grow:1}.option .tz{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-xs,.75rem);font-variant-numeric:tabular-nums}.empty{padding:var(--roxy-space-md,1rem);color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}`],s([u({type:String,attribute:"api-key"})],i.prototype,"apiKey",2),s([u({type:String,attribute:"publishable-key"})],i.prototype,"publishableKey",2),s([u({type:String})],i.prototype,"endpoint",2),s([u({type:String})],i.prototype,"placeholder",2),s([u({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),s([p()],i.prototype,"query",2),s([p()],i.prototype,"results",2),s([p()],i.prototype,"isOpen",2),s([p()],i.prototype,"isLoading",2),s([p()],i.prototype,"highlight",2),i=s([w("roxy-location-search")],i);export{i as RoxyLocationSearch};
|
|
2
2
|
//# sourceMappingURL=location-search.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/location-search.ts", "../../src/utils/base-styles.ts", "../../src/utils/debounce.ts"],
|
|
4
|
-
"sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { SearchCitiesResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { debounce } from '../utils/debounce.js';\n\ntype CityResult = SearchCitiesResponse['cities'][number];\n\n/**\n * Stateful location search input. Calls /location/search and emits\n * `roxy-location-select` CustomEvent with the chosen city. Required for any\n * chart endpoint.\n *\n * Behavior: 300ms input debounce, click-outside dismiss, keyboard navigation\n * with arrow keys / Enter / Escape, AbortController on stale requests.\n *\n * Attributes:\n * api-key optional. Direct call to roxyapi.com when set.\n * publishable-key optional. Browser-safe pk_* key with allowed_origins.\n * endpoint optional. Override URL (default https://roxyapi.com/api/v2/location/search).\n * placeholder optional. Input placeholder.\n * default-value optional. Pre-filled query.\n */\n@customElement('roxy-location-search')\nexport class RoxyLocationSearch extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`:host{display:block;position:relative}.field{position:relative}input{width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-base,1rem);color:var(--roxy-fg,#0a0a0a);background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);transition:border-color var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));box-sizing:border-box;font-family:inherit}input:focus{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px;border-color:var(--roxy-accent-fg,#b45309)}.spinner{border:2px solid var(--roxy-muted,#71717a);border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite roxy-spin;position:absolute;top:50%;right:12px;transform:translateY(-50%)}@keyframes roxy-spin{to{transform:translateY(-50%)rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.results{z-index:50;background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);box-shadow:var(--roxy-shadow-md);max-height:22rem;animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.option{align-items:baseline;gap:var(--roxy-space-sm,.5rem);width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);text-align:left;font-family:inherit;font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a);cursor:pointer;transition:background-color var(--roxy-motion-duration,.2s);background:0 0;border:0;display:flex}.option:hover,.option[aria-selected=true]{background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 10%, transparent)}.option .city{font-weight:var(--roxy-weight-bold,600)}.option .where{color:var(--roxy-muted,#71717a);flex-grow:1}.option .tz{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-xs,.75rem);font-variant-numeric:tabular-nums}.empty{padding:var(--roxy-space-md,1rem);color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}`,\n\t];\n\n\t@property({ type: String, attribute: 'api-key' })\n\tapiKey?: string;\n\n\t@property({ type: String, attribute: 'publishable-key' })\n\tpublishableKey?: string;\n\n\t@property({ type: String })\n\tendpoint = 'https://roxyapi.com/api/v2/location/search';\n\n\t@property({ type: String })\n\tplaceholder = 'Search city';\n\n\t@property({ type: String, attribute: 'default-value' })\n\tdefaultValue = '';\n\n\t@state()\n\tprivate query = '';\n\n\t@state()\n\tprivate results: CityResult[] = [];\n\n\t@state()\n\tprivate isOpen = false;\n\n\t@state()\n\tprivate isLoading = false;\n\n\t@state()\n\tprivate highlight = -1;\n\n\tprivate clickOutsideHandler?: (e: MouseEvent) => void;\n\tprivate abortController?: AbortController;\n\tprivate secretKeyWarned = false;\n\tprivate debouncedFetch = debounce((q: string) => {\n\t\tvoid this.fetchResults(q);\n\t}, 300);\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.query = this.defaultValue;\n\t\tthis.clickOutsideHandler = (e: MouseEvent) => {\n\t\t\tconst path = e.composedPath();\n\t\t\tif (!path.includes(this)) this.isOpen = false;\n\t\t};\n\t\tdocument.addEventListener('mousedown', this.clickOutsideHandler);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tif (this.clickOutsideHandler) {\n\t\t\tdocument.removeEventListener('mousedown', this.clickOutsideHandler);\n\t\t}\n\t\tthis.debouncedFetch.cancel();\n\t\tif (this.abortController) {\n\t\t\tthis.abortController.abort();\n\t\t\tthis.abortController = undefined;\n\t\t}\n\t}\n\n\tprivate warnIfSecretKey() {\n\t\tif (this.secretKeyWarned) return;\n\t\tif (!this.apiKey) return;\n\t\t// Browser-safe publishable keys carry the `pk_` prefix and a server-side\n\t\t// origin allowlist. Anything else (a raw secret key, UUID-style token)\n\t\t// must not ship to the browser.\n\t\tif (this.apiKey.startsWith('pk_')) return;\n\t\tthis.secretKeyWarned = true;\n\t\tconst message =\n\t\t\t'Possible secret key in client-side <roxy-location-search>; use a `pk_` publishable key with origin allowlist instead.';\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(message);\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('roxy-validation-error', {\n\t\t\t\tdetail: { reason: 'possible-secret-key', message },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\tprivate async fetchResults(q: string) {\n\t\tthis.warnIfSecretKey();\n\t\t// Abort any in-flight request so a stale response cannot overwrite a\n\t\t// fresher one (debounced typing) or land after disconnect.\n\t\tif (this.abortController) this.abortController.abort();\n\t\tconst controller = new AbortController();\n\t\tthis.abortController = controller;\n\t\tthis.isLoading = true;\n\t\ttry {\n\t\t\tconst url = new URL(this.endpoint);\n\t\t\turl.searchParams.set('q', q);\n\t\t\turl.searchParams.set('limit', '8');\n\t\t\tconst headers: Record<string, string> = {\n\t\t\t\tAccept: 'application/json',\n\t\t\t};\n\t\t\t// publishable-key wins when both are set. Surfacing the conflict at the\n\t\t\t// console (not as a thrown error) avoids breaking widgets that legitimately\n\t\t\t// have a stale secret key around while migrating to publishable.\n\t\t\tif (this.apiKey && this.publishableKey) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'[roxy-location-search] both api-key and publishable-key set; using publishable-key. Remove api-key from your widget markup.',\n\t\t\t\t);\n\t\t\t}\n\t\t\tconst key = this.publishableKey ?? this.apiKey;\n\t\t\tif (key) headers['X-API-Key'] = key;\n\t\t\tconst res = await fetch(url, { headers, signal: controller.signal });\n\t\t\tif (!res.ok) throw new Error(`HTTP ${res.status}`);\n\t\t\tconst json = (await res.json()) as SearchCitiesResponse;\n\t\t\tif (controller.signal.aborted) return;\n\t\t\tthis.results = json.cities ?? [];\n\t\t\tthis.isOpen = this.results.length > 0;\n\t\t\tthis.highlight = this.results.length > 0 ? 0 : -1;\n\t\t} catch (err) {\n\t\t\tif ((err as { name?: string })?.name === 'AbortError') return;\n\t\t\tthis.results = [];\n\t\t\tthis.isOpen = false;\n\t\t} finally {\n\t\t\tif (this.abortController === controller) {\n\t\t\t\tthis.abortController = undefined;\n\t\t\t}\n\t\t\tif (!controller.signal.aborted) this.isLoading = false;\n\t\t}\n\t}\n\n\tprivate onInput = (e: Event) => {\n\t\tconst value = (e.target as HTMLInputElement).value;\n\t\tthis.query = value;\n\t\tif (value.length < 2) {\n\t\t\tthis.results = [];\n\t\t\tthis.isOpen = false;\n\t\t\tthis.highlight = -1;\n\t\t\treturn;\n\t\t}\n\t\tthis.debouncedFetch(value);\n\t};\n\n\tprivate select(city: CityResult) {\n\t\tthis.query = `${city.city}${city.province ? `, ${city.province}` : ''}, ${city.country}`;\n\t\tthis.isOpen = false;\n\t\tthis.results = [];\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('roxy-location-select', {\n\t\t\t\tdetail: city,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\tprivate onKeyDown = (e: KeyboardEvent) => {\n\t\tif (!this.isOpen || this.results.length === 0) {\n\t\t\tif (e.key === 'ArrowDown' && this.query.length >= 2) {\n\t\t\t\tvoid this.fetchResults(this.query);\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\tif (e.key === 'ArrowDown') {\n\t\t\te.preventDefault();\n\t\t\tthis.highlight = (this.highlight + 1) % this.results.length;\n\t\t} else if (e.key === 'ArrowUp') {\n\t\t\te.preventDefault();\n\t\t\tthis.highlight =\n\t\t\t\t(this.highlight - 1 + this.results.length) % this.results.length;\n\t\t} else if (e.key === 'Enter') {\n\t\t\te.preventDefault();\n\t\t\tconst target = this.results[this.highlight] ?? this.results[0];\n\t\t\tif (target) this.select(target);\n\t\t} else if (e.key === 'Escape') {\n\t\t\tthis.isOpen = false;\n\t\t}\n\t};\n\n\trender() {\n\t\treturn html`<div class=\"field\"><input type=\"text\" role=\"combobox\" aria-expanded=\"${this.isOpen ? 'true' : 'false'}\" aria-controls=\"roxy-location-listbox\" aria-activedescendant=\"${\n\t\t\t\t\tthis.isOpen && this.highlight >= 0\n\t\t\t\t\t\t? `roxy-location-option-${this.highlight}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\" aria-autocomplete=\"list\" autocomplete=\"off\" placeholder=\"${this.placeholder}\" .value=\"${this.query}\" @input=\"${this.onInput}\" @keydown=\"${this.onKeyDown}\" @focus=\"${() => {\n\t\t\t\t\tif (this.results.length > 0) this.isOpen = true;\n\t\t\t\t}}\"> ${this.isLoading ? html`<span class=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>` : nothing} ${\n\t\t\t\tthis.isOpen\n\t\t\t\t\t? html`<ul id=\"roxy-location-listbox\" class=\"results\" role=\"listbox\">${\n\t\t\t\t\t\t\tthis.results.length === 0\n\t\t\t\t\t\t\t\t? html`<li class=\"empty\" role=\"status\">No cities found</li>`\n\t\t\t\t\t\t\t\t: this.results.map(\n\t\t\t\t\t\t\t\t\t\t(city, idx) => html`<li role=\"presentation\"><button type=\"button\" class=\"option\" role=\"option\" id=\"${`roxy-location-option-${idx}`}\" aria-selected=\"${this.highlight === idx ? 'true' : 'false'}\" @click=\"${() => this.select(city)}\" @mouseenter=\"${() => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.highlight = idx;\n\t\t\t\t\t\t\t\t\t\t\t}}\"><span class=\"city\">${city.city}</span> <span class=\"where\">${city.province ? html`${city.province},` : ''}${city.country}</span> <span class=\"tz\">UTC${city.utcOffset >= 0 ? '+' : ''}${city.utcOffset}</span></button></li>`,\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}</ul>`\n\t\t\t\t\t: nothing\n\t\t\t}</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-location-search': RoxyLocationSearch;\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`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;\n", "/**\n * Lightweight debounce for input handlers. Used by location search.\n *\n * The returned function exposes a `.cancel()` method so callers can clear a\n * pending invocation when the host element disconnects, preventing the timer\n * from firing on a detached node and mutating reactive state after teardown.\n */\nexport interface Debounced<F extends (...args: never[]) => unknown> {\n\t(...args: Parameters<F>): void;\n\tcancel: () => void;\n}\n\nexport function debounce<F extends (...args: never[]) => unknown>(\n\tfn: F,\n\twait: number,\n): Debounced<F> {\n\tlet timer: ReturnType<typeof setTimeout> | undefined;\n\tconst debounced = ((...args: Parameters<F>) => {\n\t\tif (timer) clearTimeout(timer);\n\t\ttimer = setTimeout(() => {\n\t\t\ttimer = undefined;\n\t\t\tfn(...args);\n\t\t}, wait);\n\t}) as Debounced<F>;\n\tdebounced.cancel = () => {\n\t\tif (timer) {\n\t\t\tclearTimeout(timer);\n\t\t\ttimer = undefined;\n\t\t}\n\t};\n\treturn debounced;\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { SearchCitiesResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { debounce } from '../utils/debounce.js';\n\ntype CityResult = SearchCitiesResponse['cities'][number];\n\n/**\n * Stateful location search input. Calls /location/search and emits\n * `roxy-location-select` CustomEvent with the chosen city. Required for any\n * chart endpoint.\n *\n * Behavior: 300ms input debounce, click-outside dismiss, keyboard navigation\n * with arrow keys / Enter / Escape, AbortController on stale requests.\n *\n * Attributes:\n * api-key optional. Direct call to roxyapi.com when set.\n * publishable-key optional. Browser-safe pk_* key with allowed_origins.\n * endpoint optional. Override URL (default https://roxyapi.com/api/v2/location/search).\n * placeholder optional. Input placeholder.\n * default-value optional. Pre-filled query.\n */\n@customElement('roxy-location-search')\nexport class RoxyLocationSearch extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`:host{display:block;position:relative}.field{position:relative}input{width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-base,1rem);color:var(--roxy-fg,#0a0a0a);background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);transition:border-color var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));box-sizing:border-box;font-family:inherit}input:focus{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px;border-color:var(--roxy-accent-ink,#b45309)}.spinner{border:2px solid var(--roxy-muted,#71717a);border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite roxy-spin;position:absolute;top:50%;right:12px;transform:translateY(-50%)}@keyframes roxy-spin{to{transform:translateY(-50%)rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.results{z-index:50;background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);box-shadow:var(--roxy-shadow-md);max-height:22rem;animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.option{align-items:baseline;gap:var(--roxy-space-sm,.5rem);width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);text-align:left;font-family:inherit;font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a);cursor:pointer;transition:background-color var(--roxy-motion-duration,.2s);background:0 0;border:0;display:flex}.option:hover,.option[aria-selected=true]{background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 10%, transparent)}.option .city{font-weight:var(--roxy-weight-bold,600)}.option .where{color:var(--roxy-muted,#71717a);flex-grow:1}.option .tz{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-xs,.75rem);font-variant-numeric:tabular-nums}.empty{padding:var(--roxy-space-md,1rem);color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}`,\n\t];\n\n\t@property({ type: String, attribute: 'api-key' })\n\tapiKey?: string;\n\n\t@property({ type: String, attribute: 'publishable-key' })\n\tpublishableKey?: string;\n\n\t@property({ type: String })\n\tendpoint = 'https://roxyapi.com/api/v2/location/search';\n\n\t@property({ type: String })\n\tplaceholder = 'Search city';\n\n\t@property({ type: String, attribute: 'default-value' })\n\tdefaultValue = '';\n\n\t@state()\n\tprivate query = '';\n\n\t@state()\n\tprivate results: CityResult[] = [];\n\n\t@state()\n\tprivate isOpen = false;\n\n\t@state()\n\tprivate isLoading = false;\n\n\t@state()\n\tprivate highlight = -1;\n\n\tprivate clickOutsideHandler?: (e: MouseEvent) => void;\n\tprivate abortController?: AbortController;\n\tprivate secretKeyWarned = false;\n\tprivate debouncedFetch = debounce((q: string) => {\n\t\tvoid this.fetchResults(q);\n\t}, 300);\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.query = this.defaultValue;\n\t\tthis.clickOutsideHandler = (e: MouseEvent) => {\n\t\t\tconst path = e.composedPath();\n\t\t\tif (!path.includes(this)) this.isOpen = false;\n\t\t};\n\t\tdocument.addEventListener('mousedown', this.clickOutsideHandler);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tif (this.clickOutsideHandler) {\n\t\t\tdocument.removeEventListener('mousedown', this.clickOutsideHandler);\n\t\t}\n\t\tthis.debouncedFetch.cancel();\n\t\tif (this.abortController) {\n\t\t\tthis.abortController.abort();\n\t\t\tthis.abortController = undefined;\n\t\t}\n\t}\n\n\tprivate warnIfSecretKey() {\n\t\tif (this.secretKeyWarned) return;\n\t\tif (!this.apiKey) return;\n\t\t// Browser-safe publishable keys carry the `pk_` prefix and a server-side\n\t\t// origin allowlist. Anything else (a raw secret key, UUID-style token)\n\t\t// must not ship to the browser.\n\t\tif (this.apiKey.startsWith('pk_')) return;\n\t\tthis.secretKeyWarned = true;\n\t\tconst message =\n\t\t\t'Possible secret key in client-side <roxy-location-search>; use a `pk_` publishable key with origin allowlist instead.';\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(message);\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('roxy-validation-error', {\n\t\t\t\tdetail: { reason: 'possible-secret-key', message },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\tprivate async fetchResults(q: string) {\n\t\tthis.warnIfSecretKey();\n\t\t// Abort any in-flight request so a stale response cannot overwrite a\n\t\t// fresher one (debounced typing) or land after disconnect.\n\t\tif (this.abortController) this.abortController.abort();\n\t\tconst controller = new AbortController();\n\t\tthis.abortController = controller;\n\t\tthis.isLoading = true;\n\t\ttry {\n\t\t\tconst url = new URL(this.endpoint);\n\t\t\turl.searchParams.set('q', q);\n\t\t\turl.searchParams.set('limit', '8');\n\t\t\tconst headers: Record<string, string> = {\n\t\t\t\tAccept: 'application/json',\n\t\t\t};\n\t\t\t// publishable-key wins when both are set. Surfacing the conflict at the\n\t\t\t// console (not as a thrown error) avoids breaking widgets that legitimately\n\t\t\t// have a stale secret key around while migrating to publishable.\n\t\t\tif (this.apiKey && this.publishableKey) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'[roxy-location-search] both api-key and publishable-key set; using publishable-key. Remove api-key from your widget markup.',\n\t\t\t\t);\n\t\t\t}\n\t\t\tconst key = this.publishableKey ?? this.apiKey;\n\t\t\tif (key) headers['X-API-Key'] = key;\n\t\t\tconst res = await fetch(url, { headers, signal: controller.signal });\n\t\t\tif (!res.ok) throw new Error(`HTTP ${res.status}`);\n\t\t\tconst json = (await res.json()) as SearchCitiesResponse;\n\t\t\tif (controller.signal.aborted) return;\n\t\t\tthis.results = json.cities ?? [];\n\t\t\tthis.isOpen = this.results.length > 0;\n\t\t\tthis.highlight = this.results.length > 0 ? 0 : -1;\n\t\t} catch (err) {\n\t\t\tif ((err as { name?: string })?.name === 'AbortError') return;\n\t\t\tthis.results = [];\n\t\t\tthis.isOpen = false;\n\t\t} finally {\n\t\t\tif (this.abortController === controller) {\n\t\t\t\tthis.abortController = undefined;\n\t\t\t}\n\t\t\tif (!controller.signal.aborted) this.isLoading = false;\n\t\t}\n\t}\n\n\tprivate onInput = (e: Event) => {\n\t\tconst value = (e.target as HTMLInputElement).value;\n\t\tthis.query = value;\n\t\tif (value.length < 2) {\n\t\t\tthis.results = [];\n\t\t\tthis.isOpen = false;\n\t\t\tthis.highlight = -1;\n\t\t\treturn;\n\t\t}\n\t\tthis.debouncedFetch(value);\n\t};\n\n\tprivate select(city: CityResult) {\n\t\tthis.query = `${city.city}${city.province ? `, ${city.province}` : ''}, ${city.country}`;\n\t\tthis.isOpen = false;\n\t\tthis.results = [];\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('roxy-location-select', {\n\t\t\t\tdetail: city,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\tprivate onKeyDown = (e: KeyboardEvent) => {\n\t\tif (!this.isOpen || this.results.length === 0) {\n\t\t\tif (e.key === 'ArrowDown' && this.query.length >= 2) {\n\t\t\t\tvoid this.fetchResults(this.query);\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\tif (e.key === 'ArrowDown') {\n\t\t\te.preventDefault();\n\t\t\tthis.highlight = (this.highlight + 1) % this.results.length;\n\t\t} else if (e.key === 'ArrowUp') {\n\t\t\te.preventDefault();\n\t\t\tthis.highlight =\n\t\t\t\t(this.highlight - 1 + this.results.length) % this.results.length;\n\t\t} else if (e.key === 'Enter') {\n\t\t\te.preventDefault();\n\t\t\tconst target = this.results[this.highlight] ?? this.results[0];\n\t\t\tif (target) this.select(target);\n\t\t} else if (e.key === 'Escape') {\n\t\t\tthis.isOpen = false;\n\t\t}\n\t};\n\n\trender() {\n\t\treturn html`<div class=\"field\"><input type=\"text\" role=\"combobox\" aria-expanded=\"${this.isOpen ? 'true' : 'false'}\" aria-controls=\"roxy-location-listbox\" aria-activedescendant=\"${\n\t\t\t\t\tthis.isOpen && this.highlight >= 0\n\t\t\t\t\t\t? `roxy-location-option-${this.highlight}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\" aria-autocomplete=\"list\" autocomplete=\"off\" placeholder=\"${this.placeholder}\" .value=\"${this.query}\" @input=\"${this.onInput}\" @keydown=\"${this.onKeyDown}\" @focus=\"${() => {\n\t\t\t\t\tif (this.results.length > 0) this.isOpen = true;\n\t\t\t\t}}\"> ${this.isLoading ? html`<span class=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>` : nothing} ${\n\t\t\t\tthis.isOpen\n\t\t\t\t\t? html`<ul id=\"roxy-location-listbox\" class=\"results\" role=\"listbox\">${\n\t\t\t\t\t\t\tthis.results.length === 0\n\t\t\t\t\t\t\t\t? html`<li class=\"empty\" role=\"status\">No cities found</li>`\n\t\t\t\t\t\t\t\t: this.results.map(\n\t\t\t\t\t\t\t\t\t\t(city, idx) => html`<li role=\"presentation\"><button type=\"button\" class=\"option\" role=\"option\" id=\"${`roxy-location-option-${idx}`}\" aria-selected=\"${this.highlight === idx ? 'true' : 'false'}\" @click=\"${() => this.select(city)}\" @mouseenter=\"${() => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.highlight = idx;\n\t\t\t\t\t\t\t\t\t\t\t}}\"><span class=\"city\">${city.city}</span> <span class=\"where\">${city.province ? html`${city.province},` : ''}${city.country}</span> <span class=\"tz\">UTC${city.utcOffset >= 0 ? '+' : ''}${city.utcOffset}</span></button></li>`,\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}</ul>`\n\t\t\t\t\t: nothing\n\t\t\t}</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-location-search': RoxyLocationSearch;\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`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;\n", "/**\n * Lightweight debounce for input handlers. Used by location search.\n *\n * The returned function exposes a `.cancel()` method so callers can clear a\n * pending invocation when the host element disconnects, preventing the timer\n * from firing on a detached node and mutating reactive state after teardown.\n */\nexport interface Debounced<F extends (...args: never[]) => unknown> {\n\t(...args: Parameters<F>): void;\n\tcancel: () => void;\n}\n\nexport function debounce<F extends (...args: never[]) => unknown>(\n\tfn: F,\n\twait: number,\n): Debounced<F> {\n\tlet timer: ReturnType<typeof setTimeout> | undefined;\n\tconst debounced = ((...args: Parameters<F>) => {\n\t\tif (timer) clearTimeout(timer);\n\t\ttimer = setTimeout(() => {\n\t\t\ttimer = undefined;\n\t\t\tfn(...args);\n\t\t}, wait);\n\t}) as Debounced<F>;\n\tdebounced.cancel = () => {\n\t\tif (timer) {\n\t\t\tclearTimeout(timer);\n\t\t\ttimer = undefined;\n\t\t}\n\t};\n\treturn debounced;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["css", "html", "LitElement", "nothing", "customElement", "property", "state", "css", "baseStyles", "debounce", "fn", "wait", "timer", "debounced", "args", "RoxyLocationSearch", "LitElement", "debounce", "q", "value", "target", "message", "controller", "url", "headers", "key", "res", "json", "err", "city", "html", "nothing", "idx", "baseStyles", "css", "__decorateClass", "property", "state", "customElement"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var y=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var c=(s,e,r,t)=>{for(var n=t>1?void 0:t?x(e,r):e,m=s.length-1,l;m>=0;m--)(l=s[m])&&(n=(t?l(e,r,n):l(n))||n);return t&&n&&y(e,r,n),n};import{css as g,html as a,LitElement as h,nothing as o}from"lit";import{customElement as b,property as $}from"lit/decorators.js";import{css as f}from"lit";var p=f`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;var v="roxy-data";function u(s){return s.nodeName==="SCRIPT"&&s.getAttribute("type")==="application/json"}var d=class{constructor(e){this.host=e,e.addController(this)}hostConnected(){if(this.host.data!=null)return;let e=this.read();e!==void 0&&(this.host.data=e,this.host.requestUpdate())}read(){let e=this.findInlineScript();return e?this.parse(e.textContent):void 0}findInlineScript(){for(let e of Array.from(this.host.children))if(u(e)&&e.classList.contains(v))return e;return null}parse(e){if(e?.trim())try{return JSON.parse(e)}catch{return}}};var i=class extends h{constructor(){super();this.data=null;new d(this)}render(){if(!this.data)return a`<div class="roxy-empty" role="status">No nakshatra data</div>`;let r=this.data,t=r.remedies;return a`<article class="wrap" aria-label="${`Nakshatra ${r.name}`}"><header class="head"><h2 class="name">${r.name}</h2>${typeof r.number=="number"?a`<span class="number">Nakshatra ${r.number} of 27</span>`:o} ${r.range?a`<span class="range">${r.range}</span>`:o}</header><dl class="facts">${r.lord?a`<div class="fact"><dt>Lord</dt><dd>${r.lord}</dd></div>`:o} ${r.deity?a`<div class="fact"><dt>Deity</dt><dd>${r.deity}</dd></div>`:o} ${r.symbol?a`<div class="fact"><dt>Symbol</dt><dd>${r.symbol}</dd></div>`:o}</dl>${r.characteristics?a`<div class="section"><h3>Characteristics</h3><p>${r.characteristics}</p></div>`:o} ${t?a`<div class="section"><h3>Remedies</h3><div class="remedies">${t.mantras?a`<div class="remedy"><strong>Mantras:</strong> ${t.mantras}</div>`:o} ${t.gemstones?a`<div class="remedy"><strong>Gemstones:</strong> ${t.gemstones}</div>`:o} ${t.rituals?a`<div class="remedy"><strong>Rituals:</strong> ${t.rituals}</div>`:o}</div></div>`:o}</article>`}};i.styles=[p,g`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);padding:var(--roxy-space-md,1rem);gap:var(--roxy-space-md,1rem);box-shadow:var(--roxy-shadow-sm);display:grid}.head{align-items:baseline;gap:var(--roxy-space-sm,.5rem);flex-wrap:wrap;display:flex}.name{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.number{color:var(--roxy-accent-
|
|
1
|
+
var y=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var c=(s,e,r,t)=>{for(var n=t>1?void 0:t?x(e,r):e,m=s.length-1,l;m>=0;m--)(l=s[m])&&(n=(t?l(e,r,n):l(n))||n);return t&&n&&y(e,r,n),n};import{css as g,html as a,LitElement as h,nothing as o}from"lit";import{customElement as b,property as $}from"lit/decorators.js";import{css as f}from"lit";var p=f`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;var v="roxy-data";function u(s){return s.nodeName==="SCRIPT"&&s.getAttribute("type")==="application/json"}var d=class{constructor(e){this.host=e,e.addController(this)}hostConnected(){if(this.host.data!=null)return;let e=this.read();e!==void 0&&(this.host.data=e,this.host.requestUpdate())}read(){let e=this.findInlineScript();return e?this.parse(e.textContent):void 0}findInlineScript(){for(let e of Array.from(this.host.children))if(u(e)&&e.classList.contains(v))return e;return null}parse(e){if(e?.trim())try{return JSON.parse(e)}catch{return}}};var i=class extends h{constructor(){super();this.data=null;new d(this)}render(){if(!this.data)return a`<div class="roxy-empty" role="status">No nakshatra data</div>`;let r=this.data,t=r.remedies;return a`<article class="wrap" aria-label="${`Nakshatra ${r.name}`}"><header class="head"><h2 class="name">${r.name}</h2>${typeof r.number=="number"?a`<span class="number">Nakshatra ${r.number} of 27</span>`:o} ${r.range?a`<span class="range">${r.range}</span>`:o}</header><dl class="facts">${r.lord?a`<div class="fact"><dt>Lord</dt><dd>${r.lord}</dd></div>`:o} ${r.deity?a`<div class="fact"><dt>Deity</dt><dd>${r.deity}</dd></div>`:o} ${r.symbol?a`<div class="fact"><dt>Symbol</dt><dd>${r.symbol}</dd></div>`:o}</dl>${r.characteristics?a`<div class="section"><h3>Characteristics</h3><p>${r.characteristics}</p></div>`:o} ${t?a`<div class="section"><h3>Remedies</h3><div class="remedies">${t.mantras?a`<div class="remedy"><strong>Mantras:</strong> ${t.mantras}</div>`:o} ${t.gemstones?a`<div class="remedy"><strong>Gemstones:</strong> ${t.gemstones}</div>`:o} ${t.rituals?a`<div class="remedy"><strong>Rituals:</strong> ${t.rituals}</div>`:o}</div></div>`:o}</article>`}};i.styles=[p,g`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);padding:var(--roxy-space-md,1rem);gap:var(--roxy-space-md,1rem);box-shadow:var(--roxy-shadow-sm);display:grid}.head{align-items:baseline;gap:var(--roxy-space-sm,.5rem);flex-wrap:wrap;display:flex}.name{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.number{color:var(--roxy-accent-ink,#b45309);font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600)}.range{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}.facts{gap:var(--roxy-space-sm,.5rem);grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));display:grid}.fact{gap:2px;display:grid}.fact dt{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-xs,.75rem);text-transform:uppercase;letter-spacing:.05em}.fact dd{color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-sm,.875rem);margin:0}.section h3{margin:0 0 var(--roxy-space-xs,.25rem);font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em}.section p{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a);margin:0;line-height:1.5}.remedies{gap:var(--roxy-space-xs,.25rem);display:grid}.remedy{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a)}.remedy strong{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600)}`],c([$({attribute:!1})],i.prototype,"data",2),i=c([b("roxy-nakshatra-card")],i);export{i as RoxyNakshatraCard};
|
|
2
2
|
//# sourceMappingURL=nakshatra-card.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/nakshatra-card.ts", "../../src/utils/base-styles.ts", "../../src/utils/markup-data.ts"],
|
|
4
|
-
"sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { NakshatraResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { MarkupDataController } from '../utils/markup-data.js';\n\n/**\n * Nakshatra reference card. Renders /vedic-astrology/nakshatras/{id}: the\n * lunar mansion number, longitude range, ruling planet, presiding deity,\n * symbol, native characteristics, and traditional remedies.\n */\n@customElement('roxy-nakshatra-card')\nexport class RoxyNakshatraCard extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);padding:var(--roxy-space-md,1rem);gap:var(--roxy-space-md,1rem);box-shadow:var(--roxy-shadow-sm);display:grid}.head{align-items:baseline;gap:var(--roxy-space-sm,.5rem);flex-wrap:wrap;display:flex}.name{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.number{color:var(--roxy-accent-fg,#b45309);font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600)}.range{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}.facts{gap:var(--roxy-space-sm,.5rem);grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));display:grid}.fact{gap:2px;display:grid}.fact dt{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-xs,.75rem);text-transform:uppercase;letter-spacing:.05em}.fact dd{color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-sm,.875rem);margin:0}.section h3{margin:0 0 var(--roxy-space-xs,.25rem);font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em}.section p{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a);margin:0;line-height:1.5}.remedies{gap:var(--roxy-space-xs,.25rem);display:grid}.remedy{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a)}.remedy strong{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600)}`,\n\t];\n\n\tconstructor() {\n\t\tsuper();\n\t\t// Enables hydrating `data` from a direct-child\n\t\t// <script type=\"application/json\" class=\"roxy-data\"> for server-rendered\n\t\t// and cached consumers. The JavaScript `data` property still wins.\n\t\tnew MarkupDataController(this);\n\t}\n\n\t@property({ attribute: false })\n\tdata: NakshatraResponse | null = null;\n\n\trender() {\n\t\tif (!this.data)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No nakshatra data</div>`;\n\t\tconst n = this.data;\n\t\tconst remedies = n.remedies;\n\n\t\treturn html`<article class=\"wrap\" aria-label=\"${`Nakshatra ${n.name}`}\"><header class=\"head\"><h2 class=\"name\">${n.name}</h2>${\n\t\t\t\t\ttypeof n.number === 'number'\n\t\t\t\t\t\t? html`<span class=\"number\">Nakshatra ${n.number} of 27</span>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t} ${n.range ? html`<span class=\"range\">${n.range}</span>` : nothing}</header><dl class=\"facts\">${n.lord ? html`<div class=\"fact\"><dt>Lord</dt><dd>${n.lord}</dd></div>` : nothing} ${n.deity ? html`<div class=\"fact\"><dt>Deity</dt><dd>${n.deity}</dd></div>` : nothing} ${n.symbol ? html`<div class=\"fact\"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : nothing}</dl>${\n\t\t\t\tn.characteristics\n\t\t\t\t\t? html`<div class=\"section\"><h3>Characteristics</h3><p>${n.characteristics}</p></div>`\n\t\t\t\t\t: nothing\n\t\t\t} ${\n\t\t\t\tremedies\n\t\t\t\t\t? html`<div class=\"section\"><h3>Remedies</h3><div class=\"remedies\">${remedies.mantras ? html`<div class=\"remedy\"><strong>Mantras:</strong> ${remedies.mantras}</div>` : nothing} ${remedies.gemstones ? html`<div class=\"remedy\"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : nothing} ${remedies.rituals ? html`<div class=\"remedy\"><strong>Rituals:</strong> ${remedies.rituals}</div>` : nothing}</div></div>`\n\t\t\t\t\t: nothing\n\t\t\t}</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-nakshatra-card': RoxyNakshatraCard;\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`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;\n", "import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Marker class on the inline JSON script a server emits inside a component.\n *\n * @example\n * ```html\n * <roxy-natal-chart>\n * <script type=\"application/json\" class=\"roxy-data\">{ ...response... }</script>\n * </roxy-natal-chart>\n * ```\n */\nconst ROXY_DATA_CLASS = 'roxy-data';\n\n/**\n * True when the element is a `<script type=\"application/json\">`. Uses tag name and attribute rather than `instanceof HTMLScriptElement` so the check holds in every DOM implementation, including server-rendered and hydration runtimes where the constructor global may be absent.\n */\nfunction isJsonScript(el: Element): boolean {\n\treturn (\n\t\tel.nodeName === 'SCRIPT' && el.getAttribute('type') === 'application/json'\n\t);\n}\n\n/**\n * Host shape the controller drives: any reactive element that exposes a public `data` slot. The controller only writes `data` when the host left it unset, so the JavaScript property path always wins.\n */\ninterface DataHost extends ReactiveControllerHost, HTMLElement {\n\tdata?: unknown;\n}\n\n/**\n * Reactive controller that lets a component hydrate its `data` from embedded markup when no `data` property was assigned in JavaScript.\n *\n * @remarks\n * The server-side and cached-render model: a backend renders the RoxyAPI response into a direct-child `<script type=\"application/json\" class=\"roxy-data\">` element, ships static HTML, and never runs per-element JavaScript to assign a property. On connect this controller reads that script, parses it, and feeds the result to the host. The JavaScript property path is untouched and authoritative: if `host.data` already holds a value when the host connects, the controller does nothing and the markup is ignored.\n *\n * Source resolution order on connect, first hit wins:\n *\n * 1. `host.data` already set in JavaScript -> leave it, read nothing.\n * 2. A direct-child `<script type=\"application/json\" class=\"roxy-data\">` -> parse and use. Direct-child only, so a nested component's own script is never read by an ancestor.\n *\n * Fetching from a URL is intentionally unsupported: that would require a browser-visible key and breaks the server-rendered, cached model these consumers rely on.\n *\n * Timing: {@link hostConnected} runs inside the host `connectedCallback`. For an element parsed from server HTML, its direct children are present by the time the custom element upgrades and connects, so the script is readable here. For an element created with `document.createElement` and connected before any child is appended, there is nothing to read and the property path is the only source, which is exactly the existing behavior.\n *\n * Failure is safe: malformed JSON or a missing script leaves `host.data` untouched, so the host renders its normal empty state.\n *\n * Reading the script never mutates it, and only the marked script is touched, so any sibling fallback markup a server nested inside the element (for no-JavaScript, AMP, or crawler rendering) is left in place.\n *\n * @example\n * ```ts\n * import { MarkupDataController } from '../utils/markup-data.js';\n *\n * export class RoxyExample extends LitElement {\n * constructor() {\n * super();\n * new MarkupDataController(this);\n * }\n *\n * @property({ attribute: false })\n * data: ExampleResponse | null = null;\n * }\n * ```\n */\nexport class MarkupDataController<T = unknown> implements ReactiveController {\n\tprivate readonly host: DataHost;\n\n\tconstructor(host: DataHost) {\n\t\tthis.host = host;\n\t\thost.addController(this);\n\t}\n\n\thostConnected() {\n\t\t// Property path wins. If the consumer (React, vanilla `.data =`, the\n\t\t// widgets script, an MCP agent) already set data, never look at markup.\n\t\tif (this.host.data != null) return;\n\n\t\tconst parsed = this.read();\n\t\tif (parsed === undefined) return;\n\n\t\tthis.host.data = parsed as T;\n\t\tthis.host.requestUpdate();\n\t}\n\n\t/**\n\t * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.\n\t */\n\tprivate read(): T | undefined {\n\t\tconst inline = this.findInlineScript();\n\t\treturn inline ? this.parse(inline.textContent) : undefined;\n\t}\n\n\t/**\n\t * Direct-child `<script type=\"application/json\" class=\"roxy-data\">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.\n\t */\n\tprivate findInlineScript(): Element | null {\n\t\tfor (const child of Array.from(this.host.children)) {\n\t\t\tif (isJsonScript(child) && child.classList.contains(ROXY_DATA_CLASS)) {\n\t\t\t\treturn child;\n\t\t\t}\n\t\t}\n\t\treturn null;\n\t}\n\n\tprivate parse(text: string | null): T | undefined {\n\t\tif (!text?.trim()) return undefined;\n\t\ttry {\n\t\t\treturn JSON.parse(text) as T;\n\t\t} catch {\n\t\t\t// Malformed embedded JSON: fail safe, leave the host empty state in\n\t\t\t// place rather than throwing during connect.\n\t\t\treturn undefined;\n\t\t}\n\t}\n}\n"],
|
|
5
|
-
"mappings": "wMAAA,OAAS,OAAAA,EAAK,QAAAC,EAAM,cAAAC,EAAY,WAAAC,MAAe,MAC/C,OAAS,iBAAAC,EAAe,YAAAC,MAAgB,oBCDxC,OAAS,OAAAC,MAAW,MAMb,IAAMC,EAAaD,myCCM1B,IAAME,EAAkB,YAKxB,SAASC,EAAaC,EAAsB,CAC3C,OACCA,EAAG,WAAa,UAAYA,EAAG,aAAa,MAAM,IAAM,kBAE1D,CA2CO,IAAMC,EAAN,KAAsE,CAG5E,YAAYC,EAAgB,CAC3B,KAAK,KAAOA,EACZA,EAAK,cAAc,IAAI,CACxB,CAEA,eAAgB,CAGf,GAAI,KAAK,KAAK,MAAQ,KAAM,OAE5B,IAAMC,EAAS,KAAK,KAAK,EACrBA,IAAW,SAEf,KAAK,KAAK,KAAOA,EACjB,KAAK,KAAK,cAAc,EACzB,CAKQ,MAAsB,CAC7B,IAAMC,EAAS,KAAK,iBAAiB,EACrC,OAAOA,EAAS,KAAK,MAAMA,EAAO,WAAW,EAAI,MAClD,CAKQ,kBAAmC,CAC1C,QAAWC,KAAS,MAAM,KAAK,KAAK,KAAK,QAAQ,EAChD,GAAIN,EAAaM,CAAK,GAAKA,EAAM,UAAU,SAASP,CAAe,EAClE,OAAOO,EAGT,OAAO,IACR,CAEQ,MAAMC,EAAoC,CACjD,GAAKA,GAAM,KAAK,EAChB,GAAI,CACH,OAAO,KAAK,MAAMA,CAAI,CACvB,MAAQ,CAGP,MACD,CACD,CACD,EFtGO,IAAMC,EAAN,cAAgCC,CAAW,CAMjD,aAAc,CACb,MAAM,EAQP,UAAiC,KAJhC,IAAIC,EAAqB,IAAI,CAC9B,CAKA,QAAS,CACR,GAAI,CAAC,KAAK,KACT,OAAOC,iEACR,IAAMC,EAAI,KAAK,KACTC,EAAWD,EAAE,SAEnB,OAAOD,sCAAyC,aAAaC,EAAE,IAAI,EAAE,2CAA2CA,EAAE,IAAI,QACnH,OAAOA,EAAE,QAAW,SACjBD,mCAAsCC,EAAE,MAAM,gBAC9CE,CACJ,IAAIF,EAAE,MAAQD,wBAA2BC,EAAE,KAAK,UAAYE,CAAO,8BAA8BF,EAAE,KAAOD,uCAA0CC,EAAE,IAAI,cAAgBE,CAAO,IAAIF,EAAE,MAAQD,wCAA2CC,EAAE,KAAK,cAAgBE,CAAO,IAAIF,EAAE,OAASD,yCAA4CC,EAAE,MAAM,cAAgBE,CAAO,QAClWF,EAAE,gBACCD,oDAAuDC,EAAE,eAAe,aACxEE,CACJ,IACCD,EACGF,gEAAmEE,EAAS,QAAUF,kDAAqDE,EAAS,OAAO,SAAWC,CAAO,IAAID,EAAS,UAAYF,oDAAuDE,EAAS,SAAS,SAAWC,CAAO,IAAID,EAAS,QAAUF,kDAAqDE,EAAS,OAAO,SAAWC,CAAO,eAC/YA,CACJ,YACF,CACD,EArCaN,EACL,OAAS,CACfO,EACAC,
|
|
4
|
+
"sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { NakshatraResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { MarkupDataController } from '../utils/markup-data.js';\n\n/**\n * Nakshatra reference card. Renders /vedic-astrology/nakshatras/{id}: the\n * lunar mansion number, longitude range, ruling planet, presiding deity,\n * symbol, native characteristics, and traditional remedies.\n */\n@customElement('roxy-nakshatra-card')\nexport class RoxyNakshatraCard extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`.wrap{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);background:var(--roxy-bg,#fff);padding:var(--roxy-space-md,1rem);gap:var(--roxy-space-md,1rem);box-shadow:var(--roxy-shadow-sm);display:grid}.head{align-items:baseline;gap:var(--roxy-space-sm,.5rem);flex-wrap:wrap;display:flex}.name{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.number{color:var(--roxy-accent-ink,#b45309);font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600)}.range{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}.facts{gap:var(--roxy-space-sm,.5rem);grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));display:grid}.fact{gap:2px;display:grid}.fact dt{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-xs,.75rem);text-transform:uppercase;letter-spacing:.05em}.fact dd{color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-sm,.875rem);margin:0}.section h3{margin:0 0 var(--roxy-space-xs,.25rem);font-size:var(--roxy-text-sm,.875rem);font-weight:var(--roxy-weight-bold,600);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.05em}.section p{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a);margin:0;line-height:1.5}.remedies{gap:var(--roxy-space-xs,.25rem);display:grid}.remedy{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a)}.remedy strong{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600)}`,\n\t];\n\n\tconstructor() {\n\t\tsuper();\n\t\t// Enables hydrating `data` from a direct-child\n\t\t// <script type=\"application/json\" class=\"roxy-data\"> for server-rendered\n\t\t// and cached consumers. The JavaScript `data` property still wins.\n\t\tnew MarkupDataController(this);\n\t}\n\n\t@property({ attribute: false })\n\tdata: NakshatraResponse | null = null;\n\n\trender() {\n\t\tif (!this.data)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No nakshatra data</div>`;\n\t\tconst n = this.data;\n\t\tconst remedies = n.remedies;\n\n\t\treturn html`<article class=\"wrap\" aria-label=\"${`Nakshatra ${n.name}`}\"><header class=\"head\"><h2 class=\"name\">${n.name}</h2>${\n\t\t\t\t\ttypeof n.number === 'number'\n\t\t\t\t\t\t? html`<span class=\"number\">Nakshatra ${n.number} of 27</span>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t} ${n.range ? html`<span class=\"range\">${n.range}</span>` : nothing}</header><dl class=\"facts\">${n.lord ? html`<div class=\"fact\"><dt>Lord</dt><dd>${n.lord}</dd></div>` : nothing} ${n.deity ? html`<div class=\"fact\"><dt>Deity</dt><dd>${n.deity}</dd></div>` : nothing} ${n.symbol ? html`<div class=\"fact\"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : nothing}</dl>${\n\t\t\t\tn.characteristics\n\t\t\t\t\t? html`<div class=\"section\"><h3>Characteristics</h3><p>${n.characteristics}</p></div>`\n\t\t\t\t\t: nothing\n\t\t\t} ${\n\t\t\t\tremedies\n\t\t\t\t\t? html`<div class=\"section\"><h3>Remedies</h3><div class=\"remedies\">${remedies.mantras ? html`<div class=\"remedy\"><strong>Mantras:</strong> ${remedies.mantras}</div>` : nothing} ${remedies.gemstones ? html`<div class=\"remedy\"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : nothing} ${remedies.rituals ? html`<div class=\"remedy\"><strong>Rituals:</strong> ${remedies.rituals}</div>` : nothing}</div></div>`\n\t\t\t\t\t: nothing\n\t\t\t}</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-nakshatra-card': RoxyNakshatraCard;\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`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;\n", "import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Marker class on the inline JSON script a server emits inside a component.\n *\n * @example\n * ```html\n * <roxy-natal-chart>\n * <script type=\"application/json\" class=\"roxy-data\">{ ...response... }</script>\n * </roxy-natal-chart>\n * ```\n */\nconst ROXY_DATA_CLASS = 'roxy-data';\n\n/**\n * True when the element is a `<script type=\"application/json\">`. Uses tag name and attribute rather than `instanceof HTMLScriptElement` so the check holds in every DOM implementation, including server-rendered and hydration runtimes where the constructor global may be absent.\n */\nfunction isJsonScript(el: Element): boolean {\n\treturn (\n\t\tel.nodeName === 'SCRIPT' && el.getAttribute('type') === 'application/json'\n\t);\n}\n\n/**\n * Host shape the controller drives: any reactive element that exposes a public `data` slot. The controller only writes `data` when the host left it unset, so the JavaScript property path always wins.\n */\ninterface DataHost extends ReactiveControllerHost, HTMLElement {\n\tdata?: unknown;\n}\n\n/**\n * Reactive controller that lets a component hydrate its `data` from embedded markup when no `data` property was assigned in JavaScript.\n *\n * @remarks\n * The server-side and cached-render model: a backend renders the RoxyAPI response into a direct-child `<script type=\"application/json\" class=\"roxy-data\">` element, ships static HTML, and never runs per-element JavaScript to assign a property. On connect this controller reads that script, parses it, and feeds the result to the host. The JavaScript property path is untouched and authoritative: if `host.data` already holds a value when the host connects, the controller does nothing and the markup is ignored.\n *\n * Source resolution order on connect, first hit wins:\n *\n * 1. `host.data` already set in JavaScript -> leave it, read nothing.\n * 2. A direct-child `<script type=\"application/json\" class=\"roxy-data\">` -> parse and use. Direct-child only, so a nested component's own script is never read by an ancestor.\n *\n * Fetching from a URL is intentionally unsupported: that would require a browser-visible key and breaks the server-rendered, cached model these consumers rely on.\n *\n * Timing: {@link hostConnected} runs inside the host `connectedCallback`. For an element parsed from server HTML, its direct children are present by the time the custom element upgrades and connects, so the script is readable here. For an element created with `document.createElement` and connected before any child is appended, there is nothing to read and the property path is the only source, which is exactly the existing behavior.\n *\n * Failure is safe: malformed JSON or a missing script leaves `host.data` untouched, so the host renders its normal empty state.\n *\n * Reading the script never mutates it, and only the marked script is touched, so any sibling fallback markup a server nested inside the element (for no-JavaScript, AMP, or crawler rendering) is left in place.\n *\n * @example\n * ```ts\n * import { MarkupDataController } from '../utils/markup-data.js';\n *\n * export class RoxyExample extends LitElement {\n * constructor() {\n * super();\n * new MarkupDataController(this);\n * }\n *\n * @property({ attribute: false })\n * data: ExampleResponse | null = null;\n * }\n * ```\n */\nexport class MarkupDataController<T = unknown> implements ReactiveController {\n\tprivate readonly host: DataHost;\n\n\tconstructor(host: DataHost) {\n\t\tthis.host = host;\n\t\thost.addController(this);\n\t}\n\n\thostConnected() {\n\t\t// Property path wins. If the consumer (React, vanilla `.data =`, the\n\t\t// widgets script, an MCP agent) already set data, never look at markup.\n\t\tif (this.host.data != null) return;\n\n\t\tconst parsed = this.read();\n\t\tif (parsed === undefined) return;\n\n\t\tthis.host.data = parsed as T;\n\t\tthis.host.requestUpdate();\n\t}\n\n\t/**\n\t * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.\n\t */\n\tprivate read(): T | undefined {\n\t\tconst inline = this.findInlineScript();\n\t\treturn inline ? this.parse(inline.textContent) : undefined;\n\t}\n\n\t/**\n\t * Direct-child `<script type=\"application/json\" class=\"roxy-data\">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.\n\t */\n\tprivate findInlineScript(): Element | null {\n\t\tfor (const child of Array.from(this.host.children)) {\n\t\t\tif (isJsonScript(child) && child.classList.contains(ROXY_DATA_CLASS)) {\n\t\t\t\treturn child;\n\t\t\t}\n\t\t}\n\t\treturn null;\n\t}\n\n\tprivate parse(text: string | null): T | undefined {\n\t\tif (!text?.trim()) return undefined;\n\t\ttry {\n\t\t\treturn JSON.parse(text) as T;\n\t\t} catch {\n\t\t\t// Malformed embedded JSON: fail safe, leave the host empty state in\n\t\t\t// place rather than throwing during connect.\n\t\t\treturn undefined;\n\t\t}\n\t}\n}\n"],
|
|
5
|
+
"mappings": "wMAAA,OAAS,OAAAA,EAAK,QAAAC,EAAM,cAAAC,EAAY,WAAAC,MAAe,MAC/C,OAAS,iBAAAC,EAAe,YAAAC,MAAgB,oBCDxC,OAAS,OAAAC,MAAW,MAMb,IAAMC,EAAaD,myCCM1B,IAAME,EAAkB,YAKxB,SAASC,EAAaC,EAAsB,CAC3C,OACCA,EAAG,WAAa,UAAYA,EAAG,aAAa,MAAM,IAAM,kBAE1D,CA2CO,IAAMC,EAAN,KAAsE,CAG5E,YAAYC,EAAgB,CAC3B,KAAK,KAAOA,EACZA,EAAK,cAAc,IAAI,CACxB,CAEA,eAAgB,CAGf,GAAI,KAAK,KAAK,MAAQ,KAAM,OAE5B,IAAMC,EAAS,KAAK,KAAK,EACrBA,IAAW,SAEf,KAAK,KAAK,KAAOA,EACjB,KAAK,KAAK,cAAc,EACzB,CAKQ,MAAsB,CAC7B,IAAMC,EAAS,KAAK,iBAAiB,EACrC,OAAOA,EAAS,KAAK,MAAMA,EAAO,WAAW,EAAI,MAClD,CAKQ,kBAAmC,CAC1C,QAAWC,KAAS,MAAM,KAAK,KAAK,KAAK,QAAQ,EAChD,GAAIN,EAAaM,CAAK,GAAKA,EAAM,UAAU,SAASP,CAAe,EAClE,OAAOO,EAGT,OAAO,IACR,CAEQ,MAAMC,EAAoC,CACjD,GAAKA,GAAM,KAAK,EAChB,GAAI,CACH,OAAO,KAAK,MAAMA,CAAI,CACvB,MAAQ,CAGP,MACD,CACD,CACD,EFtGO,IAAMC,EAAN,cAAgCC,CAAW,CAMjD,aAAc,CACb,MAAM,EAQP,UAAiC,KAJhC,IAAIC,EAAqB,IAAI,CAC9B,CAKA,QAAS,CACR,GAAI,CAAC,KAAK,KACT,OAAOC,iEACR,IAAMC,EAAI,KAAK,KACTC,EAAWD,EAAE,SAEnB,OAAOD,sCAAyC,aAAaC,EAAE,IAAI,EAAE,2CAA2CA,EAAE,IAAI,QACnH,OAAOA,EAAE,QAAW,SACjBD,mCAAsCC,EAAE,MAAM,gBAC9CE,CACJ,IAAIF,EAAE,MAAQD,wBAA2BC,EAAE,KAAK,UAAYE,CAAO,8BAA8BF,EAAE,KAAOD,uCAA0CC,EAAE,IAAI,cAAgBE,CAAO,IAAIF,EAAE,MAAQD,wCAA2CC,EAAE,KAAK,cAAgBE,CAAO,IAAIF,EAAE,OAASD,yCAA4CC,EAAE,MAAM,cAAgBE,CAAO,QAClWF,EAAE,gBACCD,oDAAuDC,EAAE,eAAe,aACxEE,CACJ,IACCD,EACGF,gEAAmEE,EAAS,QAAUF,kDAAqDE,EAAS,OAAO,SAAWC,CAAO,IAAID,EAAS,UAAYF,oDAAuDE,EAAS,SAAS,SAAWC,CAAO,IAAID,EAAS,QAAUF,kDAAqDE,EAAS,OAAO,SAAWC,CAAO,eAC/YA,CACJ,YACF,CACD,EArCaN,EACL,OAAS,CACfO,EACAC,48CACD,EAWAC,EAAA,CADCC,EAAS,CAAE,UAAW,EAAM,CAAC,GAdlBV,EAeZ,oBAfYA,EAANS,EAAA,CADNE,EAAc,qBAAqB,GACvBX",
|
|
6
6
|
"names": ["css", "html", "LitElement", "nothing", "customElement", "property", "css", "baseStyles", "ROXY_DATA_CLASS", "isJsonScript", "el", "MarkupDataController", "host", "parsed", "inline", "child", "text", "RoxyNakshatraCard", "LitElement", "MarkupDataController", "html", "n", "remedies", "nothing", "baseStyles", "css", "__decorateClass", "property", "customElement"]
|
|
7
7
|
}
|