@roxyapi/ui 0.1.2 → 0.2.0

package/dist/components/yoga-list.js

@@ -0,0 +1,389 @@
+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/yoga-list.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/utils/debounce.ts
+function debounce(fn, wait) {
+  let timer;
+  const debounced = ((...args) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = void 0;
+      fn(...args);
+    }, wait);
+  });
+  debounced.cancel = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+  };
+  return debounced;
+}
+
+// packages/ui/src/components/yoga-list.ts
+var RoxyYogaList = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.filter = "";
+    this.handleInput = debounce((e) => {
+      this.filter = e.target.value;
+    }, 200);
+  }
+  renderQualityChip(quality) {
+    const cls = `quality-chip quality-${quality}`;
+    return html`<span class=${cls}>${quality}</span>`;
+  }
+  renderDetailCard(yoga) {
+    return html`<div class="detail-card">
+			<p class="detail-name">
+				${yoga.name}
+				${yoga.quality ? this.renderQualityChip(yoga.quality) : nothing}
+			</p>
+			${yoga.description ? html`<p class="description">${yoga.description}</p>` : nothing}
+			${yoga.result ? html`<details>
+						<summary>Effects</summary>
+						<div class="result-body">${yoga.result}</div>
+					</details>` : nothing}
+		</div>`;
+  }
+  render() {
+    if (!this.data)
+      return html`<div class="roxy-empty" role="status">No yoga data</div>`;
+    const d = this.data;
+    const lc = this.filter.toLowerCase();
+    if ("description" in d && typeof d.description === "string") {
+      const yoga = d;
+      return html`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
+    }
+    if ("yogas" in d && Array.isArray(d.yogas)) {
+      const allYogas = d.yogas;
+      const isDetailArray = allYogas.length > 0 && "description" in allYogas[0];
+      if (isDetailArray) {
+        const detailYogas = allYogas;
+        const filtered2 = lc ? detailYogas.filter((y) => y.name.toLowerCase().includes(lc)) : detailYogas;
+        const total2 = d.total;
+        return html`<div class="wrap">
+					<div class="head">
+						<h2 class="title">Yoga catalog</h2>
+						${total2 !== void 0 ? html`<span class="count">${total2} total</span>` : nothing}
+					</div>
+					<div class="search-wrap">
+						<input
+							class="search"
+							type="search"
+							placeholder="Filter yogas..."
+							aria-label="Filter yoga list by name"
+							.value=${this.filter}
+							@input=${this.handleInput}
+						/>
+					</div>
+					<div
+						class="detail-grid"
+						role="region"
+						aria-live="polite"
+						aria-label="Yoga results"
+					>
+						${filtered2.length > 0 ? filtered2.map((y) => this.renderDetailCard(y)) : html`<p class="no-results">No yogas match your search.</p>`}
+					</div>
+				</div>`;
+      }
+      const catalogYogas = allYogas;
+      const filtered = lc ? catalogYogas.filter((y) => y.name.toLowerCase().includes(lc)) : catalogYogas;
+      const total = d.total;
+      return html`<div class="wrap">
+				<div class="head">
+					<h2 class="title">Yoga catalog</h2>
+					${total !== void 0 ? html`<span class="count">${total} total</span>` : nothing}
+				</div>
+				<div class="search-wrap">
+					<input
+						class="search"
+						type="search"
+						placeholder="Filter yogas..."
+						aria-label="Filter yoga list by name"
+						.value=${this.filter}
+						@input=${this.handleInput}
+					/>
+				</div>
+				<div
+					class="grid"
+					role="region"
+					aria-live="polite"
+					aria-label="Yoga results"
+				>
+					${filtered.length > 0 ? filtered.map(
+        (y) => html`<div class="yoga-chip">
+									${y.name}
+									<span class="yoga-id">${y.id}</span>
+								</div>`
+      ) : html`<p class="no-results">No yogas match your search.</p>`}
+				</div>
+			</div>`;
+    }
+    return html`<div class="roxy-empty" role="status">No yoga data</div>`;
+  }
+};
+RoxyYogaList.styles = [
+  baseStyles,
+  css2`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.head {
+				display: flex;
+				justify-content: space-between;
+				align-items: baseline;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			.count {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+			}
+			.search-wrap {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.search {
+				width: 100%;
+				max-width: 280px;
+				padding: 0.35em 0.75em;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-family: var(--roxy-font-sans);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				outline: none;
+			}
+			.search::placeholder {
+				color: var(--roxy-fg, #0a0a0a);
+				opacity: 0.65;
+			}
+			.search:focus {
+				border-color: var(--roxy-accent, #f59e0b);
+				box-shadow: 0 0 0 2px color-mix(in srgb, var(--roxy-accent, #f59e0b) 30%, transparent);
+			}
+			.grid {
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+				grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+			}
+			.yoga-chip {
+				padding: 0.4em 0.8em;
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				background: var(--roxy-bg, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				word-break: break-word;
+			}
+			.yoga-chip .yoga-id {
+				display: block;
+				font-size: 0.7em;
+				color: var(--roxy-fg, #0a0a0a);
+				opacity: 0.75;
+				margin-top: 0.15em;
+			}
+			.detail-card {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				background: var(--roxy-bg, #fff);
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.detail-name {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+				flex-wrap: wrap;
+			}
+			.quality-chip {
+				display: inline-block;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: 600;
+				padding: 0.15em 0.6em;
+				border-radius: 999px;
+			}
+			.quality-Positive {
+				background: color-mix(in srgb, var(--roxy-success, #22c55e) 18%, transparent);
+				color: var(--roxy-success-fg, #15803d);
+				border: 1px solid color-mix(in srgb, var(--roxy-success, #22c55e) 40%, transparent);
+			}
+			.quality-Negative {
+				background: color-mix(in srgb, var(--roxy-danger, #ef4444) 18%, transparent);
+				color: var(--roxy-danger-fg, #b91c1c);
+				border: 1px solid color-mix(in srgb, var(--roxy-danger, #ef4444) 40%, transparent);
+			}
+			.quality-Both {
+				background: color-mix(in srgb, var(--roxy-warning, #f59e0b) 18%, transparent);
+				color: var(--roxy-warning-fg, #b45309);
+				border: 1px solid color-mix(in srgb, var(--roxy-warning, #f59e0b) 40%, transparent);
+			}
+			.description {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				margin: 0;
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
+			details {
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			details summary {
+				cursor: pointer;
+				color: var(--roxy-accent-fg, #b45309);
+				font-weight: 500;
+				padding: 0.25em 0;
+				list-style: none;
+				display: flex;
+				align-items: center;
+				gap: 0.4em;
+			}
+			details summary::before {
+				content: '+';
+				font-size: 1.1em;
+				line-height: 1;
+			}
+			details[open] summary::before {
+				content: '-';
+			}
+			details .result-body {
+				padding-top: var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
+			.no-results {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				padding: var(--roxy-space-md, 1rem) 0;
+				text-align: center;
+			}
+			.detail-grid {
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyYogaList.prototype, "data", 2);
+__decorateClass([
+  state()
+], RoxyYogaList.prototype, "filter", 2);
+RoxyYogaList = __decorateClass([
+  customElement("roxy-yoga-list")
+], RoxyYogaList);
+export {
+  RoxyYogaList
+};
+//# sourceMappingURL=yoga-list.js.map

package/dist/components/yoga-list.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/yoga-list.ts", "../../src/utils/base-styles.ts", "../../src/utils/debounce.ts"],
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { GetYogaResponse, ListYogasResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { debounce } from '../utils/debounce.js';\n\ntype YogaListData =\n\t| ListYogasResponse\n\t| GetYogaResponse\n\t| { yogas: Array<GetYogaResponse> };\n\n/**\n * Yoga catalog and detail renderer. Accepts three data modes:\n *   - Catalog: ListYogasResponse (yogas array of {id, name} + total)\n *   - Detail: GetYogaResponse (single yoga with description, result, quality)\n *   - Detail array: { yogas: Array<GetYogaResponse> } for pre-filtered sets\n *\n * Catalog and detail-array modes include a live search filter.\n */\n@customElement('roxy-yoga-list')\nexport class RoxyYogaList 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\t\t\t.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: baseline;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t\t.title {\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\tmargin: 0;\n\t\t\t}\n\t\t\t.count {\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t}\n\t\t\t.search-wrap {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t\t.search {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 280px;\n\t\t\t\tpadding: 0.35em 0.75em;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-family: var(--roxy-font-sans);\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\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t\t.search::placeholder {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\topacity: 0.65;\n\t\t\t}\n\t\t\t.search:focus {\n\t\t\t\tborder-color: var(--roxy-accent, #f59e0b);\n\t\t\t\tbox-shadow: 0 0 0 2px color-mix(in srgb, var(--roxy-accent, #f59e0b) 30%, transparent);\n\t\t\t}\n\t\t\t.grid {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tgrid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n\t\t\t}\n\t\t\t.yoga-chip {\n\t\t\t\tpadding: 0.4em 0.8em;\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\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tword-break: break-word;\n\t\t\t}\n\t\t\t.yoga-chip .yoga-id {\n\t\t\t\tdisplay: block;\n\t\t\t\tfont-size: 0.7em;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\topacity: 0.75;\n\t\t\t\tmargin-top: 0.15em;\n\t\t\t}\n\t\t\t.detail-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-md, 1rem);\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t\t.detail-name {\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\tmargin: 0;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\t\t\t.quality-chip {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tfont-weight: 600;\n\t\t\t\tpadding: 0.15em 0.6em;\n\t\t\t\tborder-radius: 999px;\n\t\t\t}\n\t\t\t.quality-Positive {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #22c55e) 18%, transparent);\n\t\t\t\tcolor: var(--roxy-success-fg, #15803d);\n\t\t\t\tborder: 1px solid color-mix(in srgb, var(--roxy-success, #22c55e) 40%, transparent);\n\t\t\t}\n\t\t\t.quality-Negative {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #ef4444) 18%, transparent);\n\t\t\t\tcolor: var(--roxy-danger-fg, #b91c1c);\n\t\t\t\tborder: 1px solid color-mix(in srgb, var(--roxy-danger, #ef4444) 40%, transparent);\n\t\t\t}\n\t\t\t.quality-Both {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #f59e0b) 18%, transparent);\n\t\t\t\tcolor: var(--roxy-warning-fg, #b45309);\n\t\t\t\tborder: 1px solid color-mix(in srgb, var(--roxy-warning, #f59e0b) 40%, transparent);\n\t\t\t}\n\t\t\t.description {\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tmargin: 0;\n\t\t\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\t\t}\n\t\t\tdetails {\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\tdetails summary {\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-weight: 500;\n\t\t\t\tpadding: 0.25em 0;\n\t\t\t\tlist-style: none;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 0.4em;\n\t\t\t}\n\t\t\tdetails summary::before {\n\t\t\t\tcontent: '+';\n\t\t\t\tfont-size: 1.1em;\n\t\t\t\tline-height: 1;\n\t\t\t}\n\t\t\tdetails[open] summary::before {\n\t\t\t\tcontent: '-';\n\t\t\t}\n\t\t\tdetails .result-body {\n\t\t\t\tpadding-top: var(--roxy-space-xs, 0.25rem);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\t\t}\n\t\t\t.no-results {\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\tpadding: var(--roxy-space-md, 1rem) 0;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t.detail-grid {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: YogaListData | null = null;\n\n\t@state()\n\tprivate filter = '';\n\n\tprivate readonly handleInput = debounce((e: Event) => {\n\t\tthis.filter = (e.target as HTMLInputElement).value;\n\t}, 200);\n\n\tprivate renderQualityChip(quality: string) {\n\t\tconst cls = `quality-chip quality-${quality}`;\n\t\treturn html`<span class=${cls}>${quality}</span>`;\n\t}\n\n\tprivate renderDetailCard(yoga: GetYogaResponse) {\n\t\treturn html`<div class=\"detail-card\">\n\t\t\t<p class=\"detail-name\">\n\t\t\t\t${yoga.name}\n\t\t\t\t${yoga.quality ? this.renderQualityChip(yoga.quality) : nothing}\n\t\t\t</p>\n\t\t\t${\n\t\t\t\tyoga.description\n\t\t\t\t\t? html`<p class=\"description\">${yoga.description}</p>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\tyoga.result\n\t\t\t\t\t? html`<details>\n\t\t\t\t\t\t<summary>Effects</summary>\n\t\t\t\t\t\t<div class=\"result-body\">${yoga.result}</div>\n\t\t\t\t\t</details>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</div>`;\n\t}\n\n\trender() {\n\t\tif (!this.data)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No yoga data</div>`;\n\n\t\tconst d = this.data;\n\t\tconst lc = this.filter.toLowerCase();\n\n\t\t// Detail mode: single GetYogaResponse\n\t\tif (\n\t\t\t'description' in d &&\n\t\t\ttypeof (d as GetYogaResponse).description === 'string'\n\t\t) {\n\t\t\tconst yoga = d as GetYogaResponse;\n\t\t\treturn html`<div class=\"wrap\">${this.renderDetailCard(yoga)}</div>`;\n\t\t}\n\n\t\t// Detail-array mode: { yogas: Array<GetYogaResponse> } where items have description\n\t\tif ('yogas' in d && Array.isArray((d as { yogas: unknown[] }).yogas)) {\n\t\t\tconst allYogas = (\n\t\t\t\td as { yogas: Array<GetYogaResponse | { id: string; name: string }> }\n\t\t\t).yogas;\n\t\t\tconst isDetailArray = allYogas.length > 0 && 'description' in allYogas[0];\n\n\t\t\tif (isDetailArray) {\n\t\t\t\tconst detailYogas = allYogas as GetYogaResponse[];\n\t\t\t\tconst filtered = lc\n\t\t\t\t\t? detailYogas.filter((y) => y.name.toLowerCase().includes(lc))\n\t\t\t\t\t: detailYogas;\n\t\t\t\tconst total = (d as ListYogasResponse).total;\n\t\t\t\treturn html`<div class=\"wrap\">\n\t\t\t\t\t<div class=\"head\">\n\t\t\t\t\t\t<h2 class=\"title\">Yoga catalog</h2>\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\ttotal !== undefined\n\t\t\t\t\t\t\t\t? html`<span class=\"count\">${total} total</span>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"search-wrap\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t\ttype=\"search\"\n\t\t\t\t\t\t\tplaceholder=\"Filter yogas...\"\n\t\t\t\t\t\t\taria-label=\"Filter yoga list by name\"\n\t\t\t\t\t\t\t.value=${this.filter}\n\t\t\t\t\t\t\t@input=${this.handleInput}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"detail-grid\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-label=\"Yoga results\"\n\t\t\t\t\t>\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\tfiltered.length > 0\n\t\t\t\t\t\t\t\t? filtered.map((y) => this.renderDetailCard(y))\n\t\t\t\t\t\t\t\t: html`<p class=\"no-results\">No yogas match your search.</p>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>`;\n\t\t\t}\n\n\t\t\t// Catalog mode: ListYogasResponse with {id, name} items\n\t\t\tconst catalogYogas = allYogas as Array<{ id: string; name: string }>;\n\t\t\tconst filtered = lc\n\t\t\t\t? catalogYogas.filter((y) => y.name.toLowerCase().includes(lc))\n\t\t\t\t: catalogYogas;\n\t\t\tconst total = (d as ListYogasResponse).total;\n\t\t\treturn html`<div class=\"wrap\">\n\t\t\t\t<div class=\"head\">\n\t\t\t\t\t<h2 class=\"title\">Yoga catalog</h2>\n\t\t\t\t\t${\n\t\t\t\t\t\ttotal !== undefined\n\t\t\t\t\t\t\t? html`<span class=\"count\">${total} total</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<div class=\"search-wrap\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\ttype=\"search\"\n\t\t\t\t\t\tplaceholder=\"Filter yogas...\"\n\t\t\t\t\t\taria-label=\"Filter yoga list by name\"\n\t\t\t\t\t\t.value=${this.filter}\n\t\t\t\t\t\t@input=${this.handleInput}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"grid\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-label=\"Yoga results\"\n\t\t\t\t>\n\t\t\t\t\t${\n\t\t\t\t\t\tfiltered.length > 0\n\t\t\t\t\t\t\t? filtered.map(\n\t\t\t\t\t\t\t\t\t(y) => html`<div class=\"yoga-chip\">\n\t\t\t\t\t\t\t\t\t${y.name}\n\t\t\t\t\t\t\t\t\t<span class=\"yoga-id\">${y.id}</span>\n\t\t\t\t\t\t\t\t</div>`,\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t: html`<p class=\"no-results\">No yogas match your search.</p>`\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>`;\n\t\t}\n\n\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No yoga data</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-yoga-list': RoxyYogaList;\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", "/**\n * Lightweight debounce for input handlers. Used by location search.\n *\n * The returned function exposes a `.cancel()` method so callers can clear a\n * pending invocation when the host element disconnects, preventing the timer\n * from firing on a detached node and mutating reactive state after teardown.\n */\nexport interface Debounced<F extends (...args: never[]) => unknown> {\n\t(...args: Parameters<F>): void;\n\tcancel: () => void;\n}\n\nexport function debounce<F extends (...args: never[]) => unknown>(\n\tfn: F,\n\twait: number,\n): Debounced<F> {\n\tlet timer: ReturnType<typeof setTimeout> | undefined;\n\tconst debounced = ((...args: Parameters<F>) => {\n\t\tif (timer) clearTimeout(timer);\n\t\ttimer = setTimeout(() => {\n\t\t\ttimer = undefined;\n\t\t\tfn(...args);\n\t\t}, wait);\n\t}) as Debounced<F>;\n\tdebounced.cancel = () => {\n\t\tif (timer) {\n\t\t\tclearTimeout(timer);\n\t\t\ttimer = undefined;\n\t\t}\n\t};\n\treturn debounced;\n}\n"],
+  "mappings": "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",
+  "names": ["css", "filtered", "total", "css"]
+}