@roxyapi/ui 0.1.2 → 0.2.0

package/dist/components/tarot-card.d.ts

@@ -1,42 +1,18 @@
 import { LitElement } from 'lit';
-interface TarotCard {
-    id?: string;
-    name?: string;
-    arcana?: 'major' | 'minor' | string;
-    number?: number | string;
-    position?: string;
-    reversed?: boolean;
-    keywords?: string[];
-    meaning?: string | {
-        upright?: string;
-        reversed?: string;
-        spiritual?: string;
-        emotional?: string;
-        physical?: string;
-    };
-    imageUrl?: string;
-    upright?: {
-        meaning?: string;
-        keywords?: string[];
-    };
-}
-interface TarotData {
-    date?: string;
-    seed?: string;
-    card?: TarotCard;
-    dailyMessage?: string;
-}
+import type { GetCardResponse, GetDailyCardResponse } from '../types/index.js';
+type TarotData = GetCardResponse | GetDailyCardResponse;
 /**
  * Tarot card. Renders /tarot/cards/{id} or /tarot/daily. Click to flip
  * between upright and reversed where the data shape supports it.
  */
 export declare class RoxyTarotCard extends LitElement {
     static styles: import("lit").CSSResult[];
-    data: TarotData | TarotCard | null;
+    data: TarotData | null;
     private flipped;
-    private getCard;
     private toggleFlip;
     render(): import("lit").TemplateResult<1>;
+    private renderDailyCard;
+    private renderFullCard;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/tarot-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tarot-card.d.ts","sourceRoot":"","sources":["../../src/components/tarot-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,UAAU,SAAS;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EACL,MAAM,GACN;QACA,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACL,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CACpD;AAED,UAAU,SAAS;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BAkGX;IAGF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAQ;IAG1C,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,UAAU,CAEhB;IAEF,MAAM;CA0EN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
+{"version":3,"file":"tarot-card.d.ts","sourceRoot":"","sources":["../../src/components/tarot-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG/E,KAAK,SAAS,GAAG,eAAe,GAAG,oBAAoB,CAAC;AAExD;;;GAGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BA6FX;IAGF,IAAI,EAAE,SAAS,GAAG,IAAI,CAAQ;IAG9B,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAEhB;IAEF,MAAM;IASN,OAAO,CAAC,eAAe;IAyDvB,OAAO,CAAC,cAAc;CA0DtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}

package/dist/components/tarot-card.js

@@ -109,18 +109,17 @@ var RoxyTarotCard = class extends LitElement {
       this.flipped = !this.flipped;
     };
   }
-  getCard() {
-    if (!this.data) return null;
-    if ("card" in this.data && this.data.card) return this.data.card;
-    return this.data;
-  }
   render() {
-    const card = this.getCard();
-    if (!card)
+    const d = this.data;
+    if (!d)
       return html`<div class="roxy-empty" role="status">No tarot data</div>`;
+    if ("card" in d) return this.renderDailyCard(d);
+    return this.renderFullCard(d);
+  }
+  renderDailyCard(d) {
+    const card = d.card;
     const isReversed = this.flipped !== Boolean(card.reversed);
-    const meaning = typeof card.meaning === "string" ? card.meaning : (isReversed ? card.meaning?.reversed : card.meaning?.upright) ?? card.meaning?.spiritual ?? card.upright?.meaning;
-    const dailyMessage = this.data && "dailyMessage" in this.data ? this.data.dailyMessage : void 0;
+    const keywords = card.keywords ?? [];
     return html`<article class="card" aria-label=${card.name ?? "Tarot card"}>
 			<div class="image-wrap">
 				${card.imageUrl ? html`<img
@@ -145,15 +144,60 @@ var RoxyTarotCard = class extends LitElement {
 			<div>
 				<div class="meta">
 					${card.arcana ? html`${card.arcana} arcana` : nothing}
-					${card.number !== void 0 && card.number !== null ? html` · ${card.number}` : nothing}
 					${isReversed ? html` · reversed` : nothing}
-					${card.position ? html`<span class="position">${card.position}</span>` : nothing}
 				</div>
 				<h2 class="title">${card.name ?? "Tarot card"}</h2>
-				${dailyMessage ? html`<p class="message">${dailyMessage}</p>` : nothing}
-				${meaning ? html`<p>${meaning}</p>` : nothing}
-				${card.keywords?.length ? html`<div class="chips">
-							${card.keywords.map((k) => html`<span>${k}</span>`)}
+				${d.dailyMessage ? html`<p class="message">${d.dailyMessage}</p>` : nothing}
+				${card.meaning ? html`<p>${card.meaning}</p>` : nothing}
+				${keywords.length > 0 ? html`<div class="chips">
+							${keywords.map((k) => html`<span>${k}</span>`)}
+						</div>` : nothing}
+				<button
+					class="flip"
+					type="button"
+					@click=${this.toggleFlip}
+					aria-pressed=${this.flipped ? "true" : "false"}
+				>
+					Flip card
+				</button>
+			</div>
+		</article>`;
+  }
+  renderFullCard(d) {
+    const isReversed = this.flipped;
+    const orientedMeaning = isReversed ? d.reversed : d.upright;
+    const keywords = isReversed ? d.keywords?.reversed ?? [] : d.keywords?.upright ?? [];
+    return html`<article class="card" aria-label=${d.name ?? "Tarot card"}>
+			<div class="image-wrap">
+				${d.imageUrl ? html`<img
+							class=${`image ${isReversed ? "reversed" : ""}`}
+							src=${d.imageUrl}
+							alt=${d.name ?? "Tarot card"}
+							tabindex="0"
+							@click=${this.toggleFlip}
+							@keydown=${(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.toggleFlip();
+      }
+    }}
+						/>` : html`<div
+							class=${`image ${isReversed ? "reversed" : ""}`}
+							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
+						>
+							${d.name ?? "?"}
+						</div>`}
+			</div>
+			<div>
+				<div class="meta">
+					${d.arcana ? html`${d.arcana} arcana` : nothing}
+					${d.number !== void 0 && d.number !== null ? html` · ${d.number}` : nothing}
+					${isReversed ? html` · reversed` : nothing}
+				</div>
+				<h2 class="title">${d.name ?? "Tarot card"}</h2>
+				${orientedMeaning?.description ? html`<p>${orientedMeaning.description}</p>` : nothing}
+				${keywords.length > 0 ? html`<div class="chips">
+							${keywords.map((k) => html`<span>${k}</span>`)}
 						</div>` : nothing}
 				<button
 					class="flip"
@@ -223,11 +267,6 @@ RoxyTarotCard.styles = [
 				letter-spacing: 0.06em;
 				margin-bottom: var(--roxy-space-sm, 0.5rem);
 			}
-			.position {
-				color: var(--roxy-info, #0284c7);
-				margin-left: var(--roxy-space-xs, 0.25rem);
-				text-transform: capitalize;
-			}
 
 			.message {
 				color: var(--roxy-fg, #0a0a0a);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/tarot-card.ts", "../../src/utils/base-styles.ts"],
-  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ninterface TarotCard {\n\tid?: string;\n\tname?: string;\n\tarcana?: 'major' | 'minor' | string;\n\tnumber?: number | string;\n\tposition?: string;\n\treversed?: boolean;\n\tkeywords?: string[];\n\tmeaning?:\n\t\t| string\n\t\t| {\n\t\t\t\tupright?: string;\n\t\t\t\treversed?: string;\n\t\t\t\tspiritual?: string;\n\t\t\t\temotional?: string;\n\t\t\t\tphysical?: string;\n\t\t  };\n\timageUrl?: string;\n\tupright?: { meaning?: string; keywords?: string[] };\n}\n\ninterface TarotData {\n\tdate?: string;\n\tseed?: string;\n\tcard?: TarotCard;\n\tdailyMessage?: string;\n}\n\n/**\n * Tarot card. Renders /tarot/cards/{id} or /tarot/daily. Click to flip\n * between upright and reversed where the data shape supports it.\n */\n@customElement('roxy-tarot-card')\nexport class RoxyTarotCard extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.card {\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: minmax(0, 9rem) 1fr;\n\t\t\t\tgap: var(--roxy-space-lg, 1.5rem);\n\t\t\t\talign-items: start;\n\t\t\t}\n\n\t\t\t@container (max-width: 480px) {\n\t\t\t\t.card {\n\t\t\t\t\tgrid-template-columns: 1fr;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.image-wrap {\n\t\t\t\tperspective: 800px;\n\t\t\t}\n\t\t\t.image {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: auto;\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t\ttransition:\n\t\t\t\t\ttransform var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t.image.reversed {\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\t\t\t.image:focus-visible {\n\t\t\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\t\t\toutline-offset: 2px;\n\t\t\t}\n\n\t\t\t.title {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-xl, 1.5rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tletter-spacing: var(--roxy-tracking-tight);\n\t\t\t}\n\t\t\t.meta {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t\tmargin-bottom: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t\t.position {\n\t\t\t\tcolor: var(--roxy-info, #0284c7);\n\t\t\t\tmargin-left: var(--roxy-space-xs, 0.25rem);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tmargin: var(--roxy-space-sm, 0.5rem) 0 var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.chips {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t\tmargin-top: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t\t.chips span {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);\n\t\t\t\tpadding: 2px 8px;\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t}\n\n\t\t\t.flip {\n\t\t\t\tmargin-top: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: 4px 12px;\n\t\t\t\tfont-family: inherit;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t\tcursor: pointer;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.flip:hover {\n\t\t\t\ttransform: scale(1.02);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: TarotData | TarotCard | null = null;\n\n\t@state()\n\tprivate flipped = false;\n\n\tprivate getCard(): TarotCard | null {\n\t\tif (!this.data) return null;\n\t\tif ('card' in this.data && this.data.card) return this.data.card;\n\t\treturn this.data as TarotCard;\n\t}\n\n\tprivate toggleFlip = () => {\n\t\tthis.flipped = !this.flipped;\n\t};\n\n\trender() {\n\t\tconst card = this.getCard();\n\t\tif (!card)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No tarot data</div>`;\n\n\t\tconst isReversed = this.flipped !== Boolean(card.reversed); // start at server-provided orientation, toggle on click\n\t\tconst meaning =\n\t\t\ttypeof card.meaning === 'string'\n\t\t\t\t? card.meaning\n\t\t\t\t: ((isReversed ? card.meaning?.reversed : card.meaning?.upright) ??\n\t\t\t\t\tcard.meaning?.spiritual ??\n\t\t\t\t\tcard.upright?.meaning);\n\t\tconst dailyMessage =\n\t\t\tthis.data && 'dailyMessage' in this.data\n\t\t\t\t? this.data.dailyMessage\n\t\t\t\t: undefined;\n\n\t\treturn html`<article class=\"card\" aria-label=${card.name ?? 'Tarot card'}>\n\t\t\t<div class=\"image-wrap\">\n\t\t\t\t${\n\t\t\t\t\tcard.imageUrl\n\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\tclass=${`image ${isReversed ? 'reversed' : ''}`}\n\t\t\t\t\t\t\tsrc=${card.imageUrl}\n\t\t\t\t\t\t\talt=${card.name ?? 'Tarot card'}\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t@click=${this.toggleFlip}\n\t\t\t\t\t\t\t@keydown=${(e: KeyboardEvent) => {\n\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\tthis.toggleFlip();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>`\n\t\t\t\t\t\t: html`<div\n\t\t\t\t\t\t\tclass=${`image ${isReversed ? 'reversed' : ''}`}\n\t\t\t\t\t\t\tstyle=\"aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${card.name ?? '?'}\n\t\t\t\t\t\t</div>`\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<div class=\"meta\">\n\t\t\t\t\t${card.arcana ? html`${card.arcana} arcana` : nothing}\n\t\t\t\t\t${card.number !== undefined && card.number !== null ? html` \u00B7 ${card.number}` : nothing}\n\t\t\t\t\t${isReversed ? html` \u00B7 reversed` : nothing}\n\t\t\t\t\t${\n\t\t\t\t\t\tcard.position\n\t\t\t\t\t\t\t? html`<span class=\"position\">${card.position}</span>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t\t<h2 class=\"title\">${card.name ?? 'Tarot card'}</h2>\n\t\t\t\t${dailyMessage ? html`<p class=\"message\">${dailyMessage}</p>` : nothing}\n\t\t\t\t${meaning ? html`<p>${meaning}</p>` : nothing}\n\t\t\t\t${\n\t\t\t\t\tcard.keywords?.length\n\t\t\t\t\t\t? html`<div class=\"chips\">\n\t\t\t\t\t\t\t${card.keywords.map((k) => html`<span>${k}</span>`)}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t\t<button\n\t\t\t\t\tclass=\"flip\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t@click=${this.toggleFlip}\n\t\t\t\t\taria-pressed=${this.flipped ? 'true' : 'false'}\n\t\t\t\t>\n\t\t\t\t\tFlip card\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-tarot-card': RoxyTarotCard;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { GetCardResponse, GetDailyCardResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ntype TarotData = GetCardResponse | GetDailyCardResponse;\n\n/**\n * Tarot card. Renders /tarot/cards/{id} or /tarot/daily. Click to flip\n * between upright and reversed where the data shape supports it.\n */\n@customElement('roxy-tarot-card')\nexport class RoxyTarotCard extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.card {\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: minmax(0, 9rem) 1fr;\n\t\t\t\tgap: var(--roxy-space-lg, 1.5rem);\n\t\t\t\talign-items: start;\n\t\t\t}\n\n\t\t\t@container (max-width: 480px) {\n\t\t\t\t.card {\n\t\t\t\t\tgrid-template-columns: 1fr;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.image-wrap {\n\t\t\t\tperspective: 800px;\n\t\t\t}\n\t\t\t.image {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: auto;\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t\ttransition:\n\t\t\t\t\ttransform var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t.image.reversed {\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\t\t\t.image:focus-visible {\n\t\t\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\t\t\toutline-offset: 2px;\n\t\t\t}\n\n\t\t\t.title {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-xl, 1.5rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tletter-spacing: var(--roxy-tracking-tight);\n\t\t\t}\n\t\t\t.meta {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t\tmargin-bottom: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tmargin: var(--roxy-space-sm, 0.5rem) 0 var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.chips {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t\tmargin-top: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t\t.chips span {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);\n\t\t\t\tpadding: 2px 8px;\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t}\n\n\t\t\t.flip {\n\t\t\t\tmargin-top: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: 4px 12px;\n\t\t\t\tfont-family: inherit;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t\tcursor: pointer;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.flip:hover {\n\t\t\t\ttransform: scale(1.02);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: TarotData | null = null;\n\n\t@state()\n\tprivate flipped = false;\n\n\tprivate toggleFlip = () => {\n\t\tthis.flipped = !this.flipped;\n\t};\n\n\trender() {\n\t\tconst d = this.data;\n\t\tif (!d)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No tarot data</div>`;\n\n\t\tif ('card' in d) return this.renderDailyCard(d);\n\t\treturn this.renderFullCard(d);\n\t}\n\n\tprivate renderDailyCard(d: GetDailyCardResponse) {\n\t\tconst card = d.card;\n\t\tconst isReversed = this.flipped !== Boolean(card.reversed);\n\t\tconst keywords = card.keywords ?? [];\n\n\t\treturn html`<article class=\"card\" aria-label=${card.name ?? 'Tarot card'}>\n\t\t\t<div class=\"image-wrap\">\n\t\t\t\t${\n\t\t\t\t\tcard.imageUrl\n\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\tclass=${`image ${isReversed ? 'reversed' : ''}`}\n\t\t\t\t\t\t\tsrc=${card.imageUrl}\n\t\t\t\t\t\t\talt=${card.name ?? 'Tarot card'}\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t@click=${this.toggleFlip}\n\t\t\t\t\t\t\t@keydown=${(e: KeyboardEvent) => {\n\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\tthis.toggleFlip();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>`\n\t\t\t\t\t\t: html`<div\n\t\t\t\t\t\t\tclass=${`image ${isReversed ? 'reversed' : ''}`}\n\t\t\t\t\t\t\tstyle=\"aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${card.name ?? '?'}\n\t\t\t\t\t\t</div>`\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<div class=\"meta\">\n\t\t\t\t\t${card.arcana ? html`${card.arcana} arcana` : nothing}\n\t\t\t\t\t${isReversed ? html` \u00B7 reversed` : nothing}\n\t\t\t\t</div>\n\t\t\t\t<h2 class=\"title\">${card.name ?? 'Tarot card'}</h2>\n\t\t\t\t${d.dailyMessage ? html`<p class=\"message\">${d.dailyMessage}</p>` : nothing}\n\t\t\t\t${card.meaning ? html`<p>${card.meaning}</p>` : nothing}\n\t\t\t\t${\n\t\t\t\t\tkeywords.length > 0\n\t\t\t\t\t\t? html`<div class=\"chips\">\n\t\t\t\t\t\t\t${keywords.map((k) => html`<span>${k}</span>`)}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t\t<button\n\t\t\t\t\tclass=\"flip\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t@click=${this.toggleFlip}\n\t\t\t\t\taria-pressed=${this.flipped ? 'true' : 'false'}\n\t\t\t\t>\n\t\t\t\t\tFlip card\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</article>`;\n\t}\n\n\tprivate renderFullCard(d: GetCardResponse) {\n\t\tconst isReversed = this.flipped;\n\t\tconst orientedMeaning = isReversed ? d.reversed : d.upright;\n\t\tconst keywords = isReversed\n\t\t\t? (d.keywords?.reversed ?? [])\n\t\t\t: (d.keywords?.upright ?? []);\n\n\t\treturn html`<article class=\"card\" aria-label=${d.name ?? 'Tarot card'}>\n\t\t\t<div class=\"image-wrap\">\n\t\t\t\t${\n\t\t\t\t\td.imageUrl\n\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\tclass=${`image ${isReversed ? 'reversed' : ''}`}\n\t\t\t\t\t\t\tsrc=${d.imageUrl}\n\t\t\t\t\t\t\talt=${d.name ?? 'Tarot card'}\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t@click=${this.toggleFlip}\n\t\t\t\t\t\t\t@keydown=${(e: KeyboardEvent) => {\n\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\tthis.toggleFlip();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>`\n\t\t\t\t\t\t: html`<div\n\t\t\t\t\t\t\tclass=${`image ${isReversed ? 'reversed' : ''}`}\n\t\t\t\t\t\t\tstyle=\"aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${d.name ?? '?'}\n\t\t\t\t\t\t</div>`\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<div class=\"meta\">\n\t\t\t\t\t${d.arcana ? html`${d.arcana} arcana` : nothing}\n\t\t\t\t\t${d.number !== undefined && d.number !== null ? html` \u00B7 ${d.number}` : nothing}\n\t\t\t\t\t${isReversed ? html` \u00B7 reversed` : nothing}\n\t\t\t\t</div>\n\t\t\t\t<h2 class=\"title\">${d.name ?? 'Tarot card'}</h2>\n\t\t\t\t${orientedMeaning?.description ? html`<p>${orientedMeaning.description}</p>` : nothing}\n\t\t\t\t${\n\t\t\t\t\tkeywords.length > 0\n\t\t\t\t\t\t? html`<div class=\"chips\">\n\t\t\t\t\t\t\t${keywords.map((k) => html`<span>${k}</span>`)}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t\t<button\n\t\t\t\t\tclass=\"flip\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t@click=${this.toggleFlip}\n\t\t\t\t\taria-pressed=${this.flipped ? 'true' : 'false'}\n\t\t\t\t>\n\t\t\t\t\tFlip card\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-tarot-card': RoxyTarotCard;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n"],
+  "mappings": "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",
   "names": ["css", "css"]
 }

package/dist/components/tarot-spread.d.ts

@@ -1,28 +1,6 @@
 import { LitElement } from 'lit';
-interface TarotPosition {
-    number?: number;
-    label?: string;
-    name?: string;
-    position?: string;
-    card?: {
-        name?: string;
-        imageUrl?: string;
-        reversed?: boolean;
-        keywords?: string[];
-        arcana?: string;
-    };
-    interpretation?: string;
-}
-interface TarotSpreadData {
-    spread?: string;
-    positions?: TarotPosition[];
-    cards?: TarotPosition[];
-    reading?: string;
-    question?: string;
-    answer?: 'Yes' | 'No' | 'Maybe' | string;
-    strength?: string;
-    interpretation?: string;
-}
+import type { CastCelticCrossResponse, CastLoveSpreadResponse, CastReadingResponse, CastThreeCardResponse, CastYesNoResponse, DrawCardsResponse } from '../types/index.js';
+type TarotSpreadData = CastThreeCardResponse | CastCelticCrossResponse | CastLoveSpreadResponse | CastYesNoResponse | CastReadingResponse | DrawCardsResponse;
 /**
  * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},
  * /tarot/yes-no, /tarot/draw responses.

package/dist/components/tarot-spread.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tarot-spread.d.ts","sourceRoot":"","sources":["../../src/components/tarot-spread.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,UAAU,aAAa;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,eAAe;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,4BA6GX;IAGF,IAAI,EAAE,eAAe,GAAG,IAAI,CAAQ;IAGpC,MAAM,EAAE,YAAY,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CACpD;IAEd,MAAM;CA+DN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"tarot-spread.d.ts","sourceRoot":"","sources":["../../src/components/tarot-spread.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EACX,uBAAuB,EACvB,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EACjB,MAAM,mBAAmB,CAAC;AAG3B,KAAK,eAAe,GACjB,qBAAqB,GACrB,uBAAuB,GACvB,sBAAsB,GACtB,iBAAiB,GACjB,mBAAmB,GACnB,iBAAiB,CAAC;AAErB;;;GAGG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,4BA6GX;IAGF,IAAI,EAAE,eAAe,GAAG,IAAI,CAAQ;IAGpC,MAAM,EAAE,YAAY,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CACpD;IAEd,MAAM;CAoGN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/dist/components/tarot-spread.js

@@ -110,22 +110,30 @@ var RoxyTarotSpread = class extends LitElement {
     const d = this.data;
     if (!d)
       return html`<div class="roxy-empty" role="status">No tarot spread</div>`;
-    const positions = d.positions ?? d.cards ?? [];
-    const isYesNo = !!d.answer;
-    const answerClass = isYesNo ? (d.answer ?? "").toLowerCase().replace(/[^a-z]/g, "") : "";
+    const isYesNo = "answer" in d;
+    const isDrawn = "cards" in d && !("spread" in d);
+    const positions = isDrawn ? [] : "positions" in d ? d.positions ?? [] : [];
+    const cards = isDrawn && "cards" in d ? d.cards : [];
+    const answer = isYesNo ? d.answer : void 0;
+    const strength = isYesNo ? d.strength : void 0;
+    const spreadLabel = "spread" in d ? d.spread : this.spread.replace(/-/g, " ");
+    const question = "question" in d ? d.question : void 0;
+    const summary = "summary" in d ? d.summary : void 0;
+    const yesNoInterp = isYesNo ? d.interpretation : void 0;
+    const answerClass = answer ? answer.toLowerCase().replace(/[^a-z]/g, "") : "";
     return html`<article class="wrap" aria-label="Tarot spread">
 			<header class="head">
-				<h2 class="title">${d.spread ?? this.spread.replace(/-/g, " ")}</h2>
-				${d.question ? html`<span class="question">"${d.question}"</span>` : nothing}
+				<h2 class="title">${spreadLabel}</h2>
+				${question ? html`<span class="question">"${question}"</span>` : nothing}
 			</header>
 			${isYesNo ? html`<div>
-						<span class=${`answer ${answerClass}`}>${d.answer}</span>
-						${d.strength ? html`<small> · ${d.strength}</small>` : nothing}
+						<span class=${`answer ${answerClass}`}>${answer}</span>
+						${strength ? html`<small> · ${strength}</small>` : nothing}
 					</div>` : nothing}
 			${positions.length > 0 ? html`<div class="grid">
 						${positions.map(
       (p) => html`<div class="card">
-								<p class="label">${p.label ?? p.name ?? p.position ?? ""}</p>
+								<p class="label">${p.name ?? ""}</p>
 								<div class="image">
 									${p.card?.imageUrl ? html`<img
 												src=${p.card.imageUrl}
@@ -141,8 +149,26 @@ var RoxyTarotSpread = class extends LitElement {
 							</div>`
     )}
 					</div>` : nothing}
-			${d.reading ? html`<p class="reading">${d.reading}</p>` : nothing}
-			${d.interpretation && !d.reading ? html`<p class="reading">${d.interpretation}</p>` : nothing}
+			${cards.length > 0 ? html`<div class="grid">
+						${cards.map(
+      (c) => html`<div class="card">
+								<div class="image">
+									${c.imageUrl ? html`<img
+												src=${c.imageUrl}
+												alt=${c.name ?? "tarot card"}
+												class=${c.reversed ? "reversed" : ""}
+											/>` : html`${c.name ?? "?"}`}
+								</div>
+								<p class="name">
+									${c.name ?? ""}
+									${c.reversed ? html`<small>(reversed)</small>` : nothing}
+								</p>
+								${c.meaning ? html`<p class="interp">${c.meaning}</p>` : nothing}
+							</div>`
+    )}
+					</div>` : nothing}
+			${summary ? html`<p class="reading">${summary}</p>` : nothing}
+			${yesNoInterp ? html`<p class="reading">${yesNoInterp}</p>` : nothing}
 		</article>`;
   }
 };
@@ -184,15 +210,15 @@ RoxyTarotSpread.styles = [
 			}
 			.answer.yes {
 				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
-				color: var(--roxy-success, #16a34a);
+				color: var(--roxy-success-fg, #166534);
 			}
 			.answer.no {
 				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
-				color: var(--roxy-danger, #dc2626);
+				color: var(--roxy-danger-fg, #991b1b);
 			}
 			.answer.maybe {
 				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 16%, transparent);
-				color: var(--roxy-warning, #ea580c);
+				color: var(--roxy-warning-fg, #9a3412);
 			}
 
 			.grid {

package/dist/components/tarot-spread.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/tarot-spread.ts", "../../src/utils/base-styles.ts"],
-  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ninterface TarotPosition {\n\tnumber?: number;\n\tlabel?: string;\n\tname?: string;\n\tposition?: string;\n\tcard?: {\n\t\tname?: string;\n\t\timageUrl?: string;\n\t\treversed?: boolean;\n\t\tkeywords?: string[];\n\t\tarcana?: string;\n\t};\n\tinterpretation?: string;\n}\n\ninterface TarotSpreadData {\n\tspread?: string;\n\tpositions?: TarotPosition[];\n\tcards?: TarotPosition[];\n\treading?: string;\n\tquestion?: string;\n\tanswer?: 'Yes' | 'No' | 'Maybe' | string;\n\tstrength?: string;\n\tinterpretation?: string;\n}\n\n/**\n * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},\n * /tarot/yes-no, /tarot/draw responses.\n */\n@customElement('roxy-tarot-spread')\nexport class RoxyTarotSpread extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.wrap {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\talign-items: baseline;\n\t\t\t}\n\t\t\t.title {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t\t.question {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-style: italic;\n\t\t\t}\n\n\t\t\t.answer {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpadding: 4px 14px;\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t\t.answer.yes {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-success, #16a34a);\n\t\t\t}\n\t\t\t.answer.no {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-danger, #dc2626);\n\t\t\t}\n\t\t\t.answer.maybe {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #ea580c) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-warning, #ea580c);\n\t\t\t}\n\n\t\t\t.grid {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.card {\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.label {\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t\t.image {\n\t\t\t\twidth: 100%;\n\t\t\t\taspect-ratio: 0.6;\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t.image img {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.image img.reversed {\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\t\t\t.name {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.interp {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t}\n\n\t\t\t.reading {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: TarotSpreadData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tspread: 'three-card' | 'celtic-cross' | 'love' | 'yes-no' | 'draw' =\n\t\t'three-card';\n\n\trender() {\n\t\tconst d = this.data;\n\t\tif (!d)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No tarot spread</div>`;\n\n\t\tconst positions = d.positions ?? d.cards ?? [];\n\t\tconst isYesNo = !!d.answer;\n\t\tconst answerClass = isYesNo\n\t\t\t? (d.answer ?? '').toLowerCase().replace(/[^a-z]/g, '')\n\t\t\t: '';\n\n\t\treturn html`<article class=\"wrap\" aria-label=\"Tarot spread\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">${d.spread ?? this.spread.replace(/-/g, ' ')}</h2>\n\t\t\t\t${d.question ? html`<span class=\"question\">\"${d.question}\"</span>` : nothing}\n\t\t\t</header>\n\t\t\t${\n\t\t\t\tisYesNo\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<span class=${`answer ${answerClass}`}>${d.answer}</span>\n\t\t\t\t\t\t${d.strength ? html`<small> \u00B7 ${d.strength}</small>` : nothing}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\tpositions.length > 0\n\t\t\t\t\t? html`<div class=\"grid\">\n\t\t\t\t\t\t${positions.map(\n\t\t\t\t\t\t\t(p) => html`<div class=\"card\">\n\t\t\t\t\t\t\t\t<p class=\"label\">${p.label ?? p.name ?? p.position ?? ''}</p>\n\t\t\t\t\t\t\t\t<div class=\"image\">\n\t\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\t\tp.card?.imageUrl\n\t\t\t\t\t\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=${p.card.imageUrl}\n\t\t\t\t\t\t\t\t\t\t\t\talt=${p.card.name ?? 'tarot card'}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=${p.card.reversed ? 'reversed' : ''}\n\t\t\t\t\t\t\t\t\t\t\t/>`\n\t\t\t\t\t\t\t\t\t\t\t: html`${p.card?.name ?? '?'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p class=\"name\">\n\t\t\t\t\t\t\t\t\t${p.card?.name ?? ''}\n\t\t\t\t\t\t\t\t\t${p.card?.reversed ? html`<small>(reversed)</small>` : nothing}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\tp.interpretation\n\t\t\t\t\t\t\t\t\t\t? html`<p class=\"interp\">${p.interpretation}</p>`\n\t\t\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${d.reading ? html`<p class=\"reading\">${d.reading}</p>` : nothing}\n\t\t\t${\n\t\t\t\td.interpretation && !d.reading\n\t\t\t\t\t? html`<p class=\"reading\">${d.interpretation}</p>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-tarot-spread': RoxyTarotSpread;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n\tCastCelticCrossResponse,\n\tCastLoveSpreadResponse,\n\tCastReadingResponse,\n\tCastThreeCardResponse,\n\tCastYesNoResponse,\n\tDrawCardsResponse,\n} from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ntype TarotSpreadData =\n\t| CastThreeCardResponse\n\t| CastCelticCrossResponse\n\t| CastLoveSpreadResponse\n\t| CastYesNoResponse\n\t| CastReadingResponse\n\t| DrawCardsResponse;\n\n/**\n * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},\n * /tarot/yes-no, /tarot/draw responses.\n */\n@customElement('roxy-tarot-spread')\nexport class RoxyTarotSpread extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.wrap {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\talign-items: baseline;\n\t\t\t}\n\t\t\t.title {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t\t.question {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-style: italic;\n\t\t\t}\n\n\t\t\t.answer {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpadding: 4px 14px;\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t\t.answer.yes {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-success-fg, #166534);\n\t\t\t}\n\t\t\t.answer.no {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-danger-fg, #991b1b);\n\t\t\t}\n\t\t\t.answer.maybe {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #ea580c) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-warning-fg, #9a3412);\n\t\t\t}\n\n\t\t\t.grid {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.card {\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.label {\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t\t.image {\n\t\t\t\twidth: 100%;\n\t\t\t\taspect-ratio: 0.6;\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t.image img {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.image img.reversed {\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\t\t\t.name {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.interp {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t}\n\n\t\t\t.reading {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: TarotSpreadData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tspread: 'three-card' | 'celtic-cross' | 'love' | 'yes-no' | 'draw' =\n\t\t'three-card';\n\n\trender() {\n\t\tconst d = this.data;\n\t\tif (!d)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No tarot spread</div>`;\n\n\t\tconst isYesNo = 'answer' in d;\n\t\tconst isDrawn = 'cards' in d && !('spread' in d);\n\t\tconst positions = isDrawn\n\t\t\t? []\n\t\t\t: 'positions' in d\n\t\t\t\t? (d.positions ?? [])\n\t\t\t\t: [];\n\t\tconst cards = isDrawn && 'cards' in d ? (d as DrawCardsResponse).cards : [];\n\t\tconst answer = isYesNo ? (d as CastYesNoResponse).answer : undefined;\n\t\tconst strength = isYesNo ? (d as CastYesNoResponse).strength : undefined;\n\t\tconst spreadLabel =\n\t\t\t'spread' in d\n\t\t\t\t? (d as CastThreeCardResponse).spread\n\t\t\t\t: this.spread.replace(/-/g, ' ');\n\t\tconst question =\n\t\t\t'question' in d ? (d as CastThreeCardResponse).question : undefined;\n\t\tconst summary =\n\t\t\t'summary' in d ? (d as CastThreeCardResponse).summary : undefined;\n\t\tconst yesNoInterp = isYesNo\n\t\t\t? (d as CastYesNoResponse).interpretation\n\t\t\t: undefined;\n\t\tconst answerClass = answer\n\t\t\t? answer.toLowerCase().replace(/[^a-z]/g, '')\n\t\t\t: '';\n\n\t\treturn html`<article class=\"wrap\" aria-label=\"Tarot spread\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">${spreadLabel}</h2>\n\t\t\t\t${question ? html`<span class=\"question\">\"${question}\"</span>` : nothing}\n\t\t\t</header>\n\t\t\t${\n\t\t\t\tisYesNo\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<span class=${`answer ${answerClass}`}>${answer}</span>\n\t\t\t\t\t\t${strength ? html`<small> \u00B7 ${strength}</small>` : nothing}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\tpositions.length > 0\n\t\t\t\t\t? html`<div class=\"grid\">\n\t\t\t\t\t\t${positions.map(\n\t\t\t\t\t\t\t(p) => html`<div class=\"card\">\n\t\t\t\t\t\t\t\t<p class=\"label\">${p.name ?? ''}</p>\n\t\t\t\t\t\t\t\t<div class=\"image\">\n\t\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\t\tp.card?.imageUrl\n\t\t\t\t\t\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=${p.card.imageUrl}\n\t\t\t\t\t\t\t\t\t\t\t\talt=${p.card.name ?? 'tarot card'}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=${p.card.reversed ? 'reversed' : ''}\n\t\t\t\t\t\t\t\t\t\t\t/>`\n\t\t\t\t\t\t\t\t\t\t\t: html`${p.card?.name ?? '?'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p class=\"name\">\n\t\t\t\t\t\t\t\t\t${p.card?.name ?? ''}\n\t\t\t\t\t\t\t\t\t${p.card?.reversed ? html`<small>(reversed)</small>` : nothing}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t${p.interpretation ? html`<p class=\"interp\">${p.interpretation}</p>` : nothing}\n\t\t\t\t\t\t\t</div>`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\tcards.length > 0\n\t\t\t\t\t? html`<div class=\"grid\">\n\t\t\t\t\t\t${cards.map(\n\t\t\t\t\t\t\t(c) => html`<div class=\"card\">\n\t\t\t\t\t\t\t\t<div class=\"image\">\n\t\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\t\tc.imageUrl\n\t\t\t\t\t\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=${c.imageUrl}\n\t\t\t\t\t\t\t\t\t\t\t\talt=${c.name ?? 'tarot card'}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=${c.reversed ? 'reversed' : ''}\n\t\t\t\t\t\t\t\t\t\t\t/>`\n\t\t\t\t\t\t\t\t\t\t\t: html`${c.name ?? '?'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p class=\"name\">\n\t\t\t\t\t\t\t\t\t${c.name ?? ''}\n\t\t\t\t\t\t\t\t\t${c.reversed ? html`<small>(reversed)</small>` : nothing}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t${c.meaning ? html`<p class=\"interp\">${c.meaning}</p>` : nothing}\n\t\t\t\t\t\t\t</div>`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${summary ? html`<p class=\"reading\">${summary}</p>` : nothing}\n\t\t\t${yesNoInterp ? html`<p class=\"reading\">${yesNoInterp}</p>` : nothing}\n\t\t</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-tarot-spread': RoxyTarotSpread;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n"],
+  "mappings": "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",
   "names": ["css", "css"]
 }

package/dist/components/transits-table.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import type { TransitsResponse } from '../types/index.js';
+/**
+ * Transit positions and aspect table. Pass `data` from /astrology/transits.
+ * When natalChart is included in the request, `data.transitAspects` and
+ * `data.summary` are present and rendered automatically.
+ */
+export declare class RoxyTransitsTable extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: TransitsResponse | null;
+    render(): import("lit").TemplateResult<1>;
+    private renderSummaryPills;
+    private renderPlanetsTable;
+    private renderAspectsTable;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'roxy-transits-table': RoxyTransitsTable;
+    }
+}
+//# sourceMappingURL=transits-table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"transits-table.d.ts","sourceRoot":"","sources":["../../src/components/transits-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAK1D;;;;GAIG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BAyKX;IAGF,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAErC,MAAM;IA6CN,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,kBAAkB;IA4C1B,OAAO,CAAC,kBAAkB;CA8C1B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}