@roxyapi/ui 0.9.0 → 0.11.0

package/dist/utils/angel-sections.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Ordered angel-number interpretation sections, shared by the angel-number card and lookup components so the field list, labels, and display order live in one place instead of being duplicated per component.
+ *
+ * @remarks The life-area keys (`spiritual`, `love`, `career`, `money`, `twinFlame`) mirror the `meaning` object in the angel-numbers OpenAPI response; `biblical` and `shadow` are top-level siblings present only on a known meaning, not on the digit-root fallback. Any absent field is skipped, so the one builder serves a full known meaning and the leaner digit-root reading alike.
+ */
+export interface MeaningSection {
+    label: string;
+    body: string;
+}
+/**
+ * Build the present-only interpretation sections in canonical order: the life areas first, then the optional `biblical` and `shadow` readings. An empty or missing field is omitted so the caller can render whatever the response actually carries.
+ */
+export declare function buildMeaningSections(meaning: Record<string, string> | undefined, biblical?: string, shadow?: string): MeaningSection[];
+//# sourceMappingURL=angel-sections.d.ts.map

package/dist/utils/angel-sections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"angel-sections.d.ts","sourceRoot":"","sources":["../../src/utils/angel-sections.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb;AAUD;;GAEG;AACH,wBAAgB,oBAAoB,CACnC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,EAC3C,QAAQ,CAAC,EAAE,MAAM,EACjB,MAAM,CAAC,EAAE,MAAM,GACb,cAAc,EAAE,CAWlB"}

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

@@ -0,0 +1,73 @@
+import { type CSSResultGroup, LitElement, type PropertyValues } from 'lit';
+/**
+ * Shared base for every data-driven Roxy component. Consolidates the things every component used to repeat by hand and adds the self-contained, drop-in behavior: controlled-mode hydration, an opt-in self-fetch (form, request, loading, error, empty), the typed `data` slot, and the render switch. A subclass implements one method, {@link RoxyDataElement.renderData}.
+ *
+ * @remarks
+ * Two render modes, one component, which is the whole drop-in contract:
+ *
+ * - Controlled: a server (WordPress, JSX SSR, static HTML) fetches the response and injects it as a direct-child `<script type="application/json" class="roxy-data">`. {@link MarkupDataController} hydrates `data` from it on connect. No key reaches the browser. This is the path the WordPress plugin drives, and it is unchanged by the base class.
+ * - Uncontrolled: no data is injected, but a `data-endpoint` and a `pk_` `publishable-key` are set. The component renders its own `<roxy-endpoint-form>` (an internal detail, never placed by the consumer), and on submit fetches through {@link FetchController}, which refuses any non-publishable key. The result populates `data` and the component renders it.
+ *
+ * The JavaScript `data` property always wins over markup, so a host that assigns `el.data = …` after upgrade is authoritative.
+ *
+ * Self-fetch needs `<roxy-endpoint-form>` (and `<roxy-location-search>`) registered. The CDN bundle and the full `@roxyapi/ui` entry register everything; per-component ESM consumers that want self-fetch import the form component too.
+ *
+ * @example
+ * ```ts
+ * @customElement('roxy-dream-card')
+ * export class RoxyDreamCard extends RoxyDataElement<GetDreamSymbolResponse> {
+ *   static styles = [baseStyles, css`.card { … }`];
+ *   protected renderData(d: GetDreamSymbolResponse) {
+ *     return html`<article class="card">…</article>`;
+ *   }
+ *   protected renderEmpty() {
+ *     return html`<div class="roxy-empty" role="status">No dream symbol</div>`;
+ *   }
+ * }
+ * ```
+ */
+export declare abstract class RoxyDataElement<T = unknown> extends LitElement {
+    static styles: CSSResultGroup;
+    /** Typed RoxyAPI response. Assigned in JavaScript, hydrated from the roxy-data island, or set by a self-fetch. */
+    data: T | null;
+    /** Endpoint path for self-fetch, e.g. "astrology/natal-chart" or "dreams/symbols/{id}". Empty disables self-fetch (controlled mode only). */
+    endpoint: string;
+    /** HTTP method for self-fetch. */
+    method: 'GET' | 'POST';
+    /** Browser-safe publishable key (pk_) for self-fetch. A secret key is refused client-side. */
+    publishableKey?: string;
+    /** Override the API origin for self-hosted or proxied deployments. */
+    baseUrl?: string;
+    /** Override the OpenAPI spec URL the self-fetch form introspects. */
+    specUrl?: string;
+    /** Consumer backend route that proxies the request (holds the secret key). When set, self-fetch POSTs the request here instead of calling RoxyAPI directly, so no key reaches the browser. The server-rendered (WordPress) path. */
+    submitUrl?: string;
+    /** Persist the last self-fetch form values in sessionStorage (keyed by endpoint) and prefill the form on reload. */
+    remember: boolean;
+    /** True while an uncontrolled self-fetch is in flight. Public so {@link FetchController} can drive it. */
+    loading: boolean;
+    /** Message from a failed self-fetch, or null. Public so {@link FetchController} can drive it. */
+    error: string | null;
+    private fetcher;
+    constructor();
+    protected willUpdate(changed: PropertyValues): void;
+    render(): unknown;
+    /** Render the populated response. The single method every component implements. */
+    protected abstract renderData(data: T): unknown;
+    /** The data-absent branch: the self-fetch form when an endpoint is set, otherwise the empty state. */
+    protected renderNoData(): unknown;
+    /** Internal self-fetch form. Reuses the introspecting `<roxy-endpoint-form>`; the consumer never places it. */
+    protected renderForm(): unknown;
+    private onFormSubmit;
+    /** sessionStorage key for this component's remembered form values, scoped by endpoint. */
+    private rememberKey;
+    private readRemembered;
+    private writeRemembered;
+    /** Terminal empty state. Subclasses override for a domain-specific message. */
+    protected renderEmpty(): unknown;
+    /** Loading placeholder shown during a self-fetch. */
+    protected renderLoading(): unknown;
+    /** Error state shown when a self-fetch fails. Keeps the form in view so the request can be retried. */
+    protected renderError(message: string): unknown;
+}
+//# sourceMappingURL=base-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-element.d.ts","sourceRoot":"","sources":["../../src/utils/base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,MAAM,KAAK,CAAC;AAOb;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,8BAAsB,eAAe,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,UAAU;IACpE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAgB;IAE7C,kHAAkH;IAElH,IAAI,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEtB,6IAA6I;IAE7I,QAAQ,SAAM;IAEd,kCAAkC;IAElC,MAAM,EAAE,KAAK,GAAG,MAAM,CAAU;IAEhC,8FAA8F;IAE9F,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,sEAAsE;IAEtE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,qEAAqE;IAErE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,oOAAoO;IAEpO,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oHAAoH;IAEpH,QAAQ,UAAS;IAEjB,0GAA0G;IAE1G,OAAO,UAAS;IAEhB,iGAAiG;IAEjG,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5B,OAAO,CAAC,OAAO,CAAqB;;IAUpC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYnD,MAAM,IAAI,OAAO;IAOjB,mFAAmF;IACnF,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO;IAE/C,sGAAsG;IACtG,SAAS,CAAC,YAAY,IAAI,OAAO;IAIjC,+GAA+G;IAC/G,SAAS,CAAC,UAAU,IAAI,OAAO;IAU/B,OAAO,CAAC,YAAY,CAQlB;IAEF,0FAA0F;IAC1F,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,eAAe;IAQvB,+EAA+E;IAC/E,SAAS,CAAC,WAAW,IAAI,OAAO;IAIhC,qDAAqD;IACrD,SAAS,CAAC,aAAa,IAAI,OAAO;IASlC,uGAAuG;IACvG,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;CAI/C"}

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

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

package/dist/utils/fetch-controller.d.ts

@@ -0,0 +1,60 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Host slots the controller drives. {@link RoxyDataElement} satisfies this, so
+ * the form mixin can attach a controller without the component wiring state by hand.
+ */
+interface FetchHost<T> extends ReactiveControllerHost {
+    data: T | null;
+    loading: boolean;
+    error: string | null;
+}
+/** A single request the controller issues on the component's behalf. */
+export interface RoxyRequest {
+    /** Path under the API base, e.g. "/dreams/symbols/water" or "/astrology/natal-chart". */
+    path: string;
+    method?: 'GET' | 'POST';
+    /** JSON body for POST endpoints. */
+    body?: unknown;
+    /** Query string parameters; nullish values are dropped. */
+    query?: Record<string, string | number | undefined>;
+}
+/**
+ * Client-side fetch for uncontrolled (self-fetching) components: drives `host.data` / `host.loading` / `host.error` and cancels a stale request when a newer one starts or the host disconnects.
+ *
+ * @remarks
+ * Security boundary. The only credential this ever sends is a `pk_` publishable key, which carries a server-side origin allowlist. A secret (`sk_`) or legacy unprefixed key is refused before any network call and surfaced as an error, so a server secret cannot leak into a browser request. This centralizes the guard that originated in `<roxy-location-search>` so every self-fetching component enforces it identically.
+ *
+ * Controlled-mode components never construct this. When a server injects the response as a `<script class="roxy-data">` island, there is no key and no fetch, which is the path server-rendered consumers (WordPress, JSX SSR, static HTML) rely on.
+ */
+export declare class FetchController<T = unknown> implements ReactiveController {
+    private readonly host;
+    private abort?;
+    /** Browser-safe publishable key. Set by the host from its `publishable-key` attribute. */
+    publishableKey?: string;
+    /** API origin, overridable for self-hosted or proxied deployments. */
+    baseUrl: string;
+    /**
+     * Consumer backend route that holds the secret key. When set, the request is POSTed here as `{ path, method, body, query }` instead of called against RoxyAPI directly, so no key (publishable or secret) is sent from the browser. This is the canonical path for server-rendered hosts (WordPress); the backend proxies the request with its own `sk_` key and returns the JSON response.
+     */
+    submitUrl?: string;
+    constructor(host: FetchHost<T>);
+    hostDisconnected(): void;
+    /**
+     * Issue the request and resolve once `host.data` (success) or `host.error`
+     * (failure) is set. A no-op return when a non-publishable key is present:
+     * the error is already surfaced and nothing is sent.
+     */
+    run(req: RoxyRequest): Promise<void>;
+    /** Direct call against RoxyAPI with the publishable key (the no-backend path). */
+    private callApi;
+    /** True when a key is set and it is not a browser-safe `pk_` publishable key. Surfaces the error and refuses to send. */
+    private secretKeyRefused;
+    /** Surface the `{ error, code }` message the API returns on failure, falling back to the status code. */
+    private readError;
+}
+/**
+ * Translate flat form values into a {@link RoxyRequest} for an endpoint. The `{name}` segments in the endpoint template are substituted from the values and removed; the rest become the JSON body for POST or query parameters for GET. This is the spec-light request builder the base element uses to turn a `<roxy-endpoint-form>` submission into a self-fetch, so a component needs no per-endpoint glue.
+ */
+export declare function buildRequest(endpoint: string, method: 'GET' | 'POST', values: Record<string, unknown>): RoxyRequest;
+export {};
+//# sourceMappingURL=fetch-controller.d.ts.map

package/dist/utils/fetch-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetch-controller.d.ts","sourceRoot":"","sources":["../../src/utils/fetch-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE;;;GAGG;AACH,UAAU,SAAS,CAAC,CAAC,CAAE,SAAQ,sBAAsB;IACpD,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAKD,wEAAwE;AACxE,MAAM,WAAW,WAAW;IAC3B,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;CACpD;AAED;;;;;;;GAOG;AACH,qBAAa,eAAe,CAAC,CAAC,GAAG,OAAO,CAAE,YAAW,kBAAkB;IACtE,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAe;IACpC,OAAO,CAAC,KAAK,CAAC,CAAkB;IAEhC,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,OAAO,SAAoB;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;gBAEP,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAK9B,gBAAgB;IAKhB;;;;OAIG;IACG,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAiC1C,kFAAkF;IAClF,OAAO,CAAC,OAAO;IAgBf,yHAAyH;IACzH,OAAO,CAAC,gBAAgB;IAexB,yGAAyG;YAC3F,SAAS;CASvB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC3B,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,KAAK,GAAG,MAAM,EACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC7B,WAAW,CAkBb"}

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/kundli-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kundli-styles.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,yBA+ExB,CAAC"}
+{"version":3,"file":"kundli-styles.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,yBAqFxB,CAAC"}

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.11.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.11.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",
@@ -27,6 +27,7 @@
   "files": [
     "dist",
     "src",
+    "components-catalog.json",
     "README.md",
     "LICENSE",
     "AGENTS.md",

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

@@ -0,0 +1,210 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { GetAngelNumberResponse } from '../types/index.js';
+import { buildMeaningSections } from '../utils/angel-sections.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+/**
+ * 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 life-area interpretations (spiritual, love, career, money, twin flame) plus the biblical and shadow readings as an exclusive accordion, the affirmation, and the action steps.
+ */
+@customElement('roxy-angel-number-card')
+export class RoxyAngelNumberCard extends RoxyDataElement<GetAngelNumberResponse> {
+	static styles = [
+		baseStyles,
+		css`
+			.card {
+				background: var(--roxy-surface, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				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;
+			}
+		`,
+	];
+
+	protected renderData(d: GetAngelNumberResponse) {
+		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>`;
+	}
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No angel number</div>`;
+	}
+
+	private renderSections(d: NonNullable<GetAngelNumberResponse>) {
+		const sections = buildMeaningSections(d.meaning, d.biblical, d.shadow);
+		if (sections.length === 0) return nothing;
+		return html`<div class="sections">
+			${sections.map(
+				(s, i) => html`<details name="angel-meaning" ?open=${i === 0}>
+					<summary>${s.label}</summary>
+					<p>${s.body}</p>
+				</details>`,
+			)}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-angel-number-card': RoxyAngelNumberCard;
+	}
+}