` per accordion, and a detect response puts thirty-odd of these inside verdict groups, so each card would grow a Reading heading of its own. It is the same compact expander the verdict group above it uses, and it carries `part="reading"` so one `::part(reading)` rule still reaches it. */ private renderEffects(result: string | undefined) { if (!result || this.hideReadings) return nothing; return html`

${this.t('Effects')}

${result}

`; } /** * Detect-mode card: the three-way verdict, the classical family, and the evidence behind it. * * An outranked card names the family that silenced it (`Outranked by Akriti`) rather than saying only that something did. It is exact rather than parsed out of prose, and it reads the same under any `lang`. */ private renderDetectCard(y: DetectedYoga) { const by = y.present ? undefined : suppressor(y); const [cls, label] = y.present ? ['is-present', 'Present'] : by ? ['is-outranked', `Outranked by ${capitalize(by)}`] : ['is-absent', 'Not present']; return html`

${y.name} ${y.quality ? this.renderQualityChip(y.quality) : nothing} ${this.renderFamilyChip(y)} ${label}

${y.description && !this.hideReadings ? html`

${y.description}

` : nothing} ${y.present ? this.renderEffects(y.result) : nothing} ${y.evidence ? html`

${y.evidence}

` : nothing}

`; } protected renderData(d: YogaListData) { const lc = this.filter.toLowerCase(); // Detail mode: single GetYogaResponse if ( 'description' in d && typeof (d as GetYogaResponse).description === 'string' ) { const yoga = d as GetYogaResponse; return html`

${this.renderDetailCard(yoga)}

`; } // Detail-array mode: { yogas: Array } where items have description if ('yogas' in d && Array.isArray((d as { yogas: unknown[] }).yogas)) { const allYogas = ( d as { yogas: Array } ).yogas; // Detect mode: every entry carries a `present` verdict. Group by verdict, // badge each present, outranked or not present, and surface the classical // evidence. Must precede the detail-array check because detect entries // also carry `description`. if (allYogas.length > 0 && 'present' in allYogas[0]) { const detected = allYogas as DetectedYoga[]; const filtered = lc ? detected.filter((y) => y.name.toLowerCase().includes(lc)) : detected; const presentCount = (d as DetectYogasResponse).total ?? detected.filter((y) => y.present).length; return html`

${this.t('Detected yogas')}

${this.t('{{count}} of {{total}} present', { count: presentCount, total: detected.length })}

${renderFrameCaption(this.effectiveLang(), (d as DetectYogasResponse).frame, this.translator)}

${ filtered.length > 0 ? VERDICTS.map((v) => this.renderVerdictGroup( v, filtered.filter((y) => this.verdictOf(y) === v.id), ), ) : html`

${this.t('No yogas match your search.')}

` }

`; } const isDetailArray = allYogas.length > 0 && 'description' in allYogas[0]; if (isDetailArray) { const detailYogas = allYogas as GetYogaResponse[]; const filtered = lc ? detailYogas.filter((y) => y.name.toLowerCase().includes(lc)) : detailYogas; const total = (d as ListYogasResponse).total; return html`

${this.t('Yoga catalog')}

${ total !== undefined ? html`${this.t('{{count}} total', { count: total })}` : nothing }

${ filtered.length > 0 ? filtered.map((y) => this.renderDetailCard(y)) : html`

${this.t('No yogas match your search.')}

` }

`; } // Catalog mode: ListYogasResponse with {id, name} items const catalogYogas = allYogas as Array<{ id: string; name: string }>; const filtered = lc ? catalogYogas.filter((y) => y.name.toLowerCase().includes(lc)) : catalogYogas; const total = (d as ListYogasResponse).total; return html`

${this.t('Yoga catalog')}

${ total !== undefined ? html`${this.t('{{count}} total', { count: total })}` : nothing }

${ filtered.length > 0 ? filtered.map( (y) => html`

${y.name}

`, ) : html`

${this.t('No yogas match your search.')}

` }

`; } return html`

${this.t('No yoga data')}

`; } } declare global { interface HTMLElementTagNameMap { 'roxy-yoga-list': RoxyYogaList; } }