@roxyapi/ui 0.9.0 → 0.10.0

package/dist/manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../src/manifest.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,WAAW,aAAa;IAC7B,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,WAAW,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EA+XnD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../src/manifest.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,WAAW,aAAa;IAC7B,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,WAAW,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAmbnD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/manifest.json

@@ -10,6 +10,7 @@
     "ashtakavarga-grid",
     "forecast-timeline",
     "shadbala-table",
+    "angel-number-lookup",
     "choghadiya-grid",
     "kp-planets-table",
     "kp-ruling-planets",
@@ -19,9 +20,12 @@
     "data",
     "vedic-planets-table",
     "hexagram",
+    "crystal-grid",
     "kp-chart",
     "transits-table",
     "vedic-kundli",
+    "dream-card",
+    "angel-number-card",
     "guna-milan",
     "yoga-list",
     "natal-chart",

package/dist/utils/kundli-render.d.ts

@@ -43,6 +43,7 @@ export type ChartStyle = 'south' | 'north' | 'east';
  *
  * @param meta - Graha-keyed map; missing rashi entries are skipped.
  * @param divisionLabel - Optional title written inside the chart centre.
+ * @param lagnaOverride - Optional rashi/sign name (case-insensitive, e.g. `"cancer"`) that replaces the `meta.Lagna`-derived ascendant. Drives the Chandra Lagna (Moon-as-ascendant) and other reference-point views: the `meta` of a `/birth-chart` response always carries the Janma Lagna as its `Lagna` key, so this is the only way to pivot the houses without a second request. Ignored when it does not resolve to a known sign.
  */
 export declare function toKundliViewModel(meta: Record<string, {
     graha?: string;
@@ -55,7 +56,7 @@ export declare function toKundliViewModel(meta: Record<string, {
     };
     isRetrograde?: boolean;
     awastha?: string;
-}>, divisionLabel?: string): KundliViewModel;
+}>, divisionLabel?: string, lagnaOverride?: string): KundliViewModel;
 /**
  * Render the kundli body for the requested style. Returns the SVG inner
  * content; the caller wraps it in an `<svg>` element with the canonical

package/dist/utils/kundli-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAgC1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAsGpD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,MAAM,CACX,MAAM,EACN;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CACD,EACD,aAAa,CAAC,EAAE,MAAM,GACpB,eAAe,CAoBjB;AA8dD;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,UAAU,GACf,cAAc,CAShB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAClC,cAAc,CAQhB"}
+{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAgC1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAsGpD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,MAAM,CACX,MAAM,EACN;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CACD,EACD,aAAa,CAAC,EAAE,MAAM,EACtB,aAAa,CAAC,EAAE,MAAM,GACpB,eAAe,CAyBjB;AA8dD;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,UAAU,GACf,cAAc,CAShB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAClC,cAAc,CAQhB"}

package/dist/utils/markup-data.d.ts

@@ -1,4 +1,38 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Serialize a RoxyAPI response for embedding inside an inline `<script type="application/json" class="roxy-data">`. This is the safe writer counterpart to {@link MarkupDataController}, the reader: server-rendered and cached consumers (WordPress, JSX SSR, static HTML) emit the script with this, and the component hydrates `data` from it on connect.
+ *
+ * @remarks
+ * Use this instead of a bare `JSON.stringify`. A raw stringify of a response that contains the literal text `</script>` (common in long interpretation prose) closes the script element early, corrupting the page and creating an HTML-injection vector. This escapes the script-unsafe characters to their `\uXXXX` JSON escapes, which `JSON.parse` restores to the original characters, so the value the component receives is identical to the response you passed.
+ *
+ * `<` is the load-bearing escape (it defeats `</script>` and `<!--`). `>` and `&` are escaped for defence in depth, and U+2028 / U+2029 because they are valid in JSON yet are line terminators in a `<script>` context and break some parsers. The escapes introduce only `\uXXXX` sequences, so the replacements never feed each other and order is irrelevant.
+ *
+ * Pass the unwrapped RoxyAPI response, the same shape you would assign to `element.data`. Do not pass the SDK envelope (`{ data, error, request, response }`).
+ *
+ * @example
+ * ```ts
+ * import { serializeRoxyData } from '@roxyapi/ui';
+ *
+ * const { data } = await roxy.dreams.getDreamSymbol({ path: { id: 'water' } });
+ * const html = `<roxy-dream-card><script type="application/json" class="roxy-data">${serializeRoxyData(data)}</script></roxy-dream-card>`;
+ * ```
+ */
+export declare function serializeRoxyData(data: unknown): string;
+/**
+ * Build the complete `<script type="application/json" class="roxy-data">…</script>` element a server nests inside a `roxy-*` component for the no-JavaScript hydration path. The payload is escaped via {@link serializeRoxyData}, so it is safe to drop straight into HTML output.
+ *
+ * @remarks
+ * The element carries both `type="application/json"` and `class="roxy-data"` because {@link MarkupDataController} reads only a direct-child script that has both. Emit one of these inside the target component; the JavaScript `data` property still wins if it is later assigned.
+ *
+ * @example
+ * ```ts
+ * import { roxyDataScript } from '@roxyapi/ui';
+ *
+ * const { data } = await roxy.crystals.getCrystal({ path: { id: 'amethyst' } });
+ * const html = `<roxy-crystal-grid>${roxyDataScript(data)}</roxy-crystal-grid>`;
+ * ```
+ */
+export declare function roxyDataScript(data: unknown): string;
 /**
  * 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.
  */

package/dist/utils/markup-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markup-data.d.ts","sourceRoot":"","sources":["../../src/utils/markup-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAuBtE;;GAEG;AACH,UAAU,QAAS,SAAQ,sBAAsB,EAAE,WAAW;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBAAa,oBAAoB,CAAC,CAAC,GAAG,OAAO,CAAE,YAAW,kBAAkB;IAC3E,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAW;gBAEpB,IAAI,EAAE,QAAQ;IAK1B,aAAa;IAYb;;OAEG;IACH,OAAO,CAAC,IAAI;IAKZ;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,KAAK;CAUb"}
+{"version":3,"file":"markup-data.d.ts","sourceRoot":"","sources":["../../src/utils/markup-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AActE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAOvD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAEpD;AAWD;;GAEG;AACH,UAAU,QAAS,SAAQ,sBAAsB,EAAE,WAAW;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBAAa,oBAAoB,CAAC,CAAC,GAAG,OAAO,CAAE,YAAW,kBAAkB;IAC3E,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAW;gBAEpB,IAAI,EAAE,QAAQ;IAK1B,aAAa;IAYb;;OAEG;IACH,OAAO,CAAC,IAAI;IAKZ;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,KAAK;CAUb"}

package/dist/version.d.ts

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

package/dist/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,UAAU,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Web components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and more. One key, beautiful in 30 minutes.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/angel-number-card.ts

@@ -0,0 +1,234 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { GetAngelNumberResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
+
+/**
+ * Life-area sections of an angel-number meaning, in display order. Keyed to the response `meaning` object so an absent area is simply skipped.
+ */
+const MEANING_SECTIONS: ReadonlyArray<{
+	key: 'spiritual' | 'love' | 'career' | 'twinFlame';
+	label: string;
+}> = [
+	{ key: 'spiritual', label: 'Spiritual' },
+	{ key: 'love', label: 'Love' },
+	{ key: 'career', label: 'Career' },
+	{ key: 'twinFlame', label: 'Twin flame' },
+];
+
+/**
+ * Angel number card. Renders /angel-numbers/numbers/{number}: the number as a hero numeral, its title and core message, the pattern type / digit root / energy badges, keyword chips, the four life-area interpretations as an exclusive accordion, the affirmation, and the action steps.
+ */
+@customElement('roxy-angel-number-card')
+export class RoxyAngelNumberCard extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.card {
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				box-shadow: var(--roxy-shadow-sm);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.hero {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.numeral {
+				font-size: 3rem;
+				line-height: 1;
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-ink, #b45309);
+				font-variant-numeric: tabular-nums;
+			}
+			.label {
+				margin: 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.core {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: 1.6;
+			}
+			.badges {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.badge {
+				display: inline-flex;
+				align-items: center;
+				gap: var(--roxy-space-xs, 0.25rem);
+				padding: 3px 10px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 35%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+				text-transform: capitalize;
+			}
+			.badge.positive {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
+				color: var(--roxy-success-fg, #166534);
+			}
+			.badge.cautionary {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+			.badge.neutral {
+				background: color-mix(in srgb, var(--roxy-info, #0284c7) 16%, transparent);
+				color: var(--roxy-info-fg, #075985);
+			}
+			.chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.chips span {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+			.sections {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding-top: var(--roxy-space-md, 1rem);
+			}
+			details {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-sm, 4px);
+				overflow: hidden;
+			}
+			summary {
+				cursor: pointer;
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				list-style-position: inside;
+			}
+			details p {
+				margin: 0;
+				padding: 0 var(--roxy-space-md, 1rem) var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: 1.6;
+			}
+			.affirmation {
+				margin: 0;
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
+				border-left: 3px solid var(--roxy-accent, #f59e0b);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				border-radius: var(--roxy-radius-sm, 4px);
+				font-style: italic;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.steps h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.steps ul {
+				margin: 0;
+				padding-left: var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+				display: grid;
+				gap: 2px;
+			}
+		`,
+	];
+
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
+	@property({ attribute: false })
+	data: GetAngelNumberResponse | null = null;
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No angel number</div>`;
+
+		const energy = (d.energy ?? '').toLowerCase();
+		const energyClass =
+			energy === 'positive' || energy === 'cautionary' || energy === 'neutral'
+				? energy
+				: '';
+		const keywords = d.keywords ?? [];
+		const steps = d.actionSteps ?? [];
+
+		return html`<article class="card" aria-label=${`Angel number ${d.number ?? ''}`}>
+			<div class="hero">
+				${d.number ? html`<div class="numeral">${d.number}</div>` : nothing}
+				<div>
+					<p class="label">Angel number</p>
+					${d.title ? html`<h2 class="title">${d.title}</h2>` : nothing}
+				</div>
+			</div>
+			${d.coreMessage ? html`<p class="core">${d.coreMessage}</p>` : nothing}
+			<div class="badges">
+				${d.type ? html`<span class="badge">${d.type}</span>` : nothing}
+				${typeof d.digitRoot === 'number' ? html`<span class="badge">Digit root ${d.digitRoot}</span>` : nothing}
+				${d.energy ? html`<span class=${`badge ${energyClass}`}>${d.energy}</span>` : nothing}
+			</div>
+			${
+				keywords.length > 0
+					? html`<div class="chips">${keywords.map((k) => html`<span>${k}</span>`)}</div>`
+					: nothing
+			}
+			${this.renderSections(d)}
+			${d.affirmation ? html`<p class="affirmation">${d.affirmation}</p>` : nothing}
+			${
+				steps.length > 0
+					? html`<div class="steps">
+						<h3>Action steps</h3>
+						<ul>${steps.map((s) => html`<li>${s}</li>`)}</ul>
+					</div>`
+					: nothing
+			}
+		</article>`;
+	}
+
+	private renderSections(d: NonNullable<GetAngelNumberResponse>) {
+		const meaning = d.meaning;
+		if (!meaning) return nothing;
+		const present = MEANING_SECTIONS.filter((s) => meaning[s.key]);
+		if (present.length === 0) return nothing;
+		return html`<div class="sections">
+			${present.map(
+				(s, i) => html`<details name="angel-meaning" ?open=${i === 0}>
+					<summary>${s.label}</summary>
+					<p>${meaning[s.key]}</p>
+				</details>`,
+			)}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-angel-number-card': RoxyAngelNumberCard;
+	}
+}

package/src/components/angel-number-lookup.ts

@@ -0,0 +1,208 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { AnalyzeNumberSequenceResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
+
+const MEANING_SECTIONS: ReadonlyArray<{
+	key: 'spiritual' | 'love' | 'career' | 'twinFlame';
+	label: string;
+}> = [
+	{ key: 'spiritual', label: 'Spiritual' },
+	{ key: 'love', label: 'Love' },
+	{ key: 'career', label: 'Career' },
+	{ key: 'twinFlame', label: 'Twin flame' },
+];
+
+/**
+ * Angel number lookup card. Renders /angel-numbers/lookup: the analysed sequence with its pattern classification (type, digit count, unique digits, palindrome, repeating), the known angel-number meaning when the sequence is in the database, and the foundational digit-root meaning that interprets any sequence. Built for synchronicity trackers where users enter arbitrary numbers.
+ */
+@customElement('roxy-angel-number-lookup')
+export class RoxyAngelNumberLookup extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.card {
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				box-shadow: var(--roxy-shadow-sm);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.hero {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.numeral {
+				font-size: 3rem;
+				line-height: 1;
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-ink, #b45309);
+				font-variant-numeric: tabular-nums;
+			}
+			.label {
+				margin: 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.badges {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.badge {
+				display: inline-flex;
+				align-items: center;
+				padding: 3px 10px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 35%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+				text-transform: capitalize;
+			}
+			.badge.flag {
+				background: color-mix(in srgb, var(--roxy-info, #0284c7) 16%, transparent);
+				color: var(--roxy-info-fg, #075985);
+			}
+			.section {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding-top: var(--roxy-space-md, 1rem);
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.section > .label {
+				margin: 0;
+			}
+			.section h3 {
+				margin: 0;
+				font-size: var(--roxy-text-base, 1rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.section p {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: 1.6;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.chips span {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+			details {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-sm, 4px);
+				overflow: hidden;
+			}
+			summary {
+				cursor: pointer;
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				list-style-position: inside;
+			}
+			details p {
+				padding: 0 var(--roxy-space-md, 1rem) var(--roxy-space-md, 1rem);
+			}
+		`,
+	];
+
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
+	@property({ attribute: false })
+	data: AnalyzeNumberSequenceResponse | null = null;
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No number analysis</div>`;
+
+		const known = d.knownMeaning;
+		const root = d.digitRootMeaning;
+		const heading = known?.title ?? 'Number analysis';
+
+		return html`<article class="card" aria-label=${`Number ${d.number ?? ''}`}>
+			<div class="hero">
+				${d.number ? html`<div class="numeral">${d.number}</div>` : nothing}
+				<div>
+					<p class="label">Number analysis</p>
+					<h2 class="title">${heading}</h2>
+				</div>
+			</div>
+			<div class="badges">
+				${d.type ? html`<span class="badge">${d.type}</span>` : nothing}
+				${typeof d.digits === 'number' ? html`<span class="badge">${d.digits} digits</span>` : nothing}
+				${typeof d.uniqueDigits === 'number' ? html`<span class="badge">${d.uniqueDigits} unique</span>` : nothing}
+				${typeof d.digitRoot === 'number' ? html`<span class="badge">Digit root ${d.digitRoot}</span>` : nothing}
+				${d.isPalindrome ? html`<span class="badge flag">Palindrome</span>` : nothing}
+				${d.isRepeating ? html`<span class="badge flag">Repeating</span>` : nothing}
+			</div>
+			${
+				known
+					? html`<div class="section">
+						<p class="label">Known angel number</p>
+						${known.coreMessage ? html`<p>${known.coreMessage}</p>` : nothing}
+						${
+							known.keywords && known.keywords.length > 0
+								? html`<div class="chips">${known.keywords.map((k) => html`<span>${k}</span>`)}</div>`
+								: nothing
+						}
+						${this.renderMeaning(known.meaning)}
+						${known.affirmation ? html`<p><em>${known.affirmation}</em></p>` : nothing}
+					</div>`
+					: nothing
+			}
+			${
+				root
+					? html`<div class="section">
+						<p class="label">Foundational digit root${root.number ? ` (${root.number})` : ''}</p>
+						${root.title ? html`<h3>${root.title}</h3>` : nothing}
+						${root.coreMessage ? html`<p>${root.coreMessage}</p>` : nothing}
+					</div>`
+					: nothing
+			}
+		</article>`;
+	}
+
+	private renderMeaning(meaning: Record<string, string> | undefined) {
+		if (!meaning) return nothing;
+		const present = MEANING_SECTIONS.filter((s) => meaning[s.key]);
+		if (present.length === 0) return nothing;
+		return html`${present.map(
+			(s, i) => html`<details name="lookup-meaning" ?open=${i === 0}>
+				<summary>${s.label}</summary>
+				<p>${meaning[s.key]}</p>
+			</details>`,
+		)}`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-angel-number-lookup': RoxyAngelNumberLookup;
+	}
+}