@roxyapi/ui 0.0.1 → 0.1.1

package/dist/components/tarot-card.js

@@ -0,0 +1,281 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// packages/ui/src/components/tarot-card.ts
+import { css as css2, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// packages/ui/src/utils/base-styles.ts
+import { css } from "lit";
+var baseStyles = css`
+	:host {
+		display: block;
+		container-type: inline-size;
+		font-family: var(
+			--roxy-font-sans,
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			sans-serif
+		);
+		color: var(--roxy-fg, #0a0a0a);
+		background: transparent;
+		font-size: var(--roxy-text-base, 1rem);
+		line-height: var(--roxy-leading-normal, 1.5);
+		animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	@keyframes roxy-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(2px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			animation: none;
+		}
+	}
+
+	.roxy-skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--roxy-border, #e4e4e7) 0%,
+			color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
+			var(--roxy-border, #e4e4e7) 100%
+		);
+		background-size: 200% 100%;
+		animation: roxy-shimmer 1.4s ease-in-out infinite;
+		border-radius: var(--roxy-radius-md, 8px);
+	}
+
+	@keyframes roxy-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.roxy-skeleton {
+			animation: none;
+		}
+	}
+
+	.roxy-empty {
+		padding: var(--roxy-space-lg, 1.5rem);
+		color: var(--roxy-muted, #71717a);
+		text-align: center;
+		font-size: var(--roxy-text-sm, 0.875rem);
+	}
+
+	:host(:focus-within) .roxy-card {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+	}
+`;
+
+// packages/ui/src/components/tarot-card.ts
+var RoxyTarotCard = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.flipped = false;
+    this.toggleFlip = () => {
+      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)
+      return html`<div class="roxy-empty" role="status">No tarot data</div>`;
+    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;
+    return html`<article class="card" aria-label=${card.name ?? "Tarot card"}>
+			<div class="image-wrap">
+				${card.imageUrl ? html`<img
+							class=${`image ${isReversed ? "reversed" : ""}`}
+							src=${card.imageUrl}
+							alt=${card.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)"
+						>
+							${card.name ?? "?"}
+						</div>`}
+			</div>
+			<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>`)}
+						</div>` : nothing}
+				<button
+					class="flip"
+					type="button"
+					@click=${this.toggleFlip}
+					aria-pressed=${this.flipped ? "true" : "false"}
+				>
+					Flip card
+				</button>
+			</div>
+		</article>`;
+  }
+};
+RoxyTarotCard.styles = [
+  baseStyles,
+  css2`
+			.card {
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				box-shadow: var(--roxy-shadow-sm);
+				display: grid;
+				grid-template-columns: minmax(0, 9rem) 1fr;
+				gap: var(--roxy-space-lg, 1.5rem);
+				align-items: start;
+			}
+
+			@container (max-width: 480px) {
+				.card {
+					grid-template-columns: 1fr;
+				}
+			}
+
+			.image-wrap {
+				perspective: 800px;
+			}
+			.image {
+				display: block;
+				width: 100%;
+				height: auto;
+				border-radius: var(--roxy-radius-md, 8px);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+				transition:
+					transform var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+				cursor: pointer;
+			}
+			.image.reversed {
+				transform: rotate(180deg);
+			}
+			.image:focus-visible {
+				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+				outline-offset: 2px;
+			}
+
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-xl, 1.5rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				letter-spacing: var(--roxy-tracking-tight);
+			}
+			.meta {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				text-transform: uppercase;
+				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);
+				margin: var(--roxy-space-sm, 0.5rem) 0 var(--roxy-space-md, 1rem);
+			}
+
+			.chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				margin-top: var(--roxy-space-sm, 0.5rem);
+			}
+			.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);
+			}
+
+			.flip {
+				margin-top: var(--roxy-space-sm, 0.5rem);
+				background: transparent;
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: 4px 12px;
+				font-family: inherit;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-secondary, #475569);
+				cursor: pointer;
+				transition:
+					transform var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+			.flip:hover {
+				transform: scale(1.02);
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyTarotCard.prototype, "data", 2);
+__decorateClass([
+  state()
+], RoxyTarotCard.prototype, "flipped", 2);
+RoxyTarotCard = __decorateClass([
+  customElement("roxy-tarot-card")
+], RoxyTarotCard);
+export {
+  RoxyTarotCard
+};
+//# sourceMappingURL=tarot-card.js.map

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

@@ -0,0 +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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",
+  "names": ["css", "css"]
+}

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

@@ -0,0 +1,42 @@
+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;
+}
+/**
+ * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},
+ * /tarot/yes-no, /tarot/draw responses.
+ */
+export declare class RoxyTarotSpread extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: TarotSpreadData | null;
+    spread: 'three-card' | 'celtic-cross' | 'love' | 'yes-no' | 'draw';
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'roxy-tarot-spread': RoxyTarotSpread;
+    }
+}
+export {};
+//# sourceMappingURL=tarot-spread.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/tarot-spread.js

@@ -0,0 +1,271 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// packages/ui/src/components/tarot-spread.ts
+import { css as css2, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// packages/ui/src/utils/base-styles.ts
+import { css } from "lit";
+var baseStyles = css`
+	:host {
+		display: block;
+		container-type: inline-size;
+		font-family: var(
+			--roxy-font-sans,
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			sans-serif
+		);
+		color: var(--roxy-fg, #0a0a0a);
+		background: transparent;
+		font-size: var(--roxy-text-base, 1rem);
+		line-height: var(--roxy-leading-normal, 1.5);
+		animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	@keyframes roxy-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(2px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			animation: none;
+		}
+	}
+
+	.roxy-skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--roxy-border, #e4e4e7) 0%,
+			color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
+			var(--roxy-border, #e4e4e7) 100%
+		);
+		background-size: 200% 100%;
+		animation: roxy-shimmer 1.4s ease-in-out infinite;
+		border-radius: var(--roxy-radius-md, 8px);
+	}
+
+	@keyframes roxy-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.roxy-skeleton {
+			animation: none;
+		}
+	}
+
+	.roxy-empty {
+		padding: var(--roxy-space-lg, 1.5rem);
+		color: var(--roxy-muted, #71717a);
+		text-align: center;
+		font-size: var(--roxy-text-sm, 0.875rem);
+	}
+
+	:host(:focus-within) .roxy-card {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+	}
+`;
+
+// packages/ui/src/components/tarot-spread.ts
+var RoxyTarotSpread = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.spread = "three-card";
+  }
+  render() {
+    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, "") : "";
+    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}
+			</header>
+			${isYesNo ? html`<div>
+						<span class=${`answer ${answerClass}`}>${d.answer}</span>
+						${d.strength ? html`<small> · ${d.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>
+								<div class="image">
+									${p.card?.imageUrl ? html`<img
+												src=${p.card.imageUrl}
+												alt=${p.card.name ?? "tarot card"}
+												class=${p.card.reversed ? "reversed" : ""}
+											/>` : html`${p.card?.name ?? "?"}`}
+								</div>
+								<p class="name">
+									${p.card?.name ?? ""}
+									${p.card?.reversed ? html`<small>(reversed)</small>` : nothing}
+								</p>
+								${p.interpretation ? html`<p class="interp">${p.interpretation}</p>` : nothing}
+							</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}
+		</article>`;
+  }
+};
+RoxyTarotSpread.styles = [
+  baseStyles,
+  css2`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.head {
+				display: flex;
+				justify-content: space-between;
+				gap: var(--roxy-space-md, 1rem);
+				flex-wrap: wrap;
+				align-items: baseline;
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: capitalize;
+			}
+			.question {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-style: italic;
+			}
+
+			.answer {
+				display: inline-block;
+				padding: 4px 14px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-weight: var(--roxy-weight-bold, 600);
+				font-size: var(--roxy-text-base, 1rem);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.answer.yes {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
+				color: var(--roxy-success, #16a34a);
+			}
+			.answer.no {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
+				color: var(--roxy-danger, #dc2626);
+			}
+			.answer.maybe {
+				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 16%, transparent);
+				color: var(--roxy-warning, #ea580c);
+			}
+
+			.grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.card {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-sm, 0.5rem);
+				background: var(--roxy-bg, #fff);
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.label {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				margin: 0;
+			}
+			.image {
+				width: 100%;
+				aspect-ratio: 0.6;
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+				border-radius: var(--roxy-radius-sm, 4px);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				overflow: hidden;
+			}
+			.image img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				transition:
+					transform var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+			.image img.reversed {
+				transform: rotate(180deg);
+			}
+			.name {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.interp {
+				margin: 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-secondary, #475569);
+			}
+
+			.reading {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyTarotSpread.prototype, "data", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], RoxyTarotSpread.prototype, "spread", 2);
+RoxyTarotSpread = __decorateClass([
+  customElement("roxy-tarot-spread")
+], RoxyTarotSpread);
+export {
+  RoxyTarotSpread
+};
+//# sourceMappingURL=tarot-spread.js.map

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

@@ -0,0 +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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",
+  "names": ["css", "css"]
+}