@molecule/app-flashcard-card-angular 0.0.0-stage → 0.0.1-stage

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,361 @@
-# Temporary Holding Version
+<!--
+AUTO-GENERATED — DO NOT EDIT THIS FILE.
+Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
+Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
+To change this document, edit the module-level JSDoc in src/index.ts.
+Generated: 2026-11-15T09:11:48.313Z
+-->
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @molecule/app-flashcard-card-angular
+
+Angular flashcard study card — the counterpart of
+`@molecule/app-flashcard-card-react`: the same props and the same DOM for
+the same input.
+
+Exports `<FlashcardCard>` — it shows the front (prompt), a "Show answer"
+reveal button, then the back (answer) with four SM-2-compatible grade
+buttons (Again / Hard / Good / Easy). The app owns the spaced-repetition
+scheduling; the card only reports the grade.
+
+> **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
+> It is written to be read by coding agents as much as by people, and is generated from this
+> package's source — edit `src/index.ts` JSDoc, not this file.
+
+## Quick Start
+
+```ts
+import { Component } from '@angular/core'
+import { FlashcardCard } from '@molecule/app-flashcard-card-angular'
+
+@Component({
+  selector: 'app-study',
+  standalone: true,
+  imports: [FlashcardCard],
+  template: `
+    <div mol-flashcard-card [progress]="'Card 3 of 20'" [onGrade]="onGrade">
+      <span slot="front">What is the capital of France?</span>
+      <span slot="back">Paris</span>
+    </div>
+  `,
+})
+export class StudyView {
+  onGrade(grade: string): void {
+    console.log(grade)
+  }
+}
+```
+
+## Type
+
+`feature`
+
+## Installation
+
+```bash
+npm install @molecule/app-flashcard-card-angular @angular/common @angular/core @angular/platform-browser @molecule/app-angular @molecule/app-ui @molecule/app-ui-angular
+```
+
+## API
+
+### Interfaces
+
+#### `FlashcardCardProps`
+
+Props accepted by {@link FlashcardCard} — the same props
+`@molecule/app-flashcard-card-react` accepts. Node props (`front`, `back`,
+`progress`) are projected content in Angular (an input cannot carry a node),
+so they are typed `unknown`: pass them as `[slot=front]` / `[slot=back]` /
+`[slot=progress]` content, or as plain strings.
+
+```typescript
+interface FlashcardCardProps {
+  /** Front content (prompt), projected as `[slot=front]` content or a string. */
+  front?: unknown
+  /** Back content (answer), projected as `[slot=back]` content or a string. */
+  back?: unknown
+  /** Optional progress / position, projected as `[slot=progress]` content or a string. */
+  progress?: unknown
+  /** Called when the user grades the card after revealing the answer. */
+  onGrade?: (grade: SrsGrade) => void
+  /** Initially show the answer. Read once, like React's `useState`. */
+  defaultRevealed?: boolean
+  /** Extra classes on the card. */
+  className?: string
+}
+```
+
+### Types
+
+#### `SrsGrade`
+
+SM-2-compatible grade values the caller uses to schedule the next review.
+Same union as React's `SrsGrade`.
+
+```typescript
+type SrsGrade = 'again' | 'hard' | 'good' | 'easy'
+```
+
+### Classes
+
+#### `FlashcardCard`
+
+FlashcardCard component.
+
+Flashcard study component — front face → reveal back → SM-2 style grade
+buttons (Again / Hard / Good / Easy). The host IS React's root `<div>`
+(`div[mol-flashcard-card]`), carrying the `Card` classes exactly as React's
+`Card` does. `front` / `back` / `progress` are projected content
+(`[slot=front]`, `[slot=back]`, `[slot=progress]`) or plain string inputs;
+the button labels go through `useTranslation()` with React's exact keys and
+English defaults. Grading flips the card back to its front face.
+
+```typescript
+@Component({
+  selector: 'div[mol-flashcard-card]',
+  standalone: true,
+  imports: [Button],
+  inputs: ['front', 'back', 'progress', 'onGrade', 'defaultRevealed', 'className'],
+  host: {
+    '[class]': 'cardClasses()',
+  },
+  // prettier-ignore
+  template: `<div [class]="stackClasses()"><div #progressWrap [class]="progressClasses()">@if (hasProgress) {<ng-container>{{ progress }}</ng-container>}<ng-content select="[slot=progress]"></ng-content></div><div [class]="faceClasses()" #face>@if (revealed()) {@if (hasBack) {<ng-container>{{ back }}</ng-container>}<ng-content select="[slot=back]"></ng-content>} @else {@if (hasFront) {<ng-container>{{ front }}</ng-container>}<ng-content select="[slot=front]"></ng-content>}</div>@if (!revealed()) {<button mol-button [variant]="'solid'" [color]="'primary'" (click)="reveal()">{{ revealLabel() }}</button>} @else {<div [class]="gridClasses()"><button mol-button [variant]="'outline'" [color]="'error'" (click)="grade('again')">{{ againLabel() }}</button><button mol-button [variant]="'outline'" [color]="'warning'" (click)="grade('hard')">{{ hardLabel() }}</button><button mol-button [variant]="'outline'" [color]="'primary'" (click)="grade('good')">{{ goodLabel() }}</button><button mol-button [variant]="'outline'" [color]="'success'" (click)="grade('easy')">{{ easyLabel() }}</button></div>}</div>`,
+})
+export class FlashcardCard implements AfterViewInit, DoCheck {
+  /** Front content (prompt) — a string input, or `[slot=front]` projected content. */
+  front?: unknown
+  /** Back content (answer) — a string input, or `[slot=back]` projected content. */
+  back?: unknown
+  /** Optional progress / position — a string input, or `[slot=progress]` content. */
+  progress?: unknown
+  /** Called when the user grades the card after revealing the answer. */
+  onGrade?: (grade: SrsGrade) => void
+  /** Initially show the answer. Read once, like React's `useState`. */
+  defaultRevealed?: boolean
+  /** Extra classes on the card. */
+  className?: string
+
+  /** The progress wrapper (always in the template; detached when empty). */
+  @ViewChild('progressWrap') private progressWrap?: ElementRef<HTMLDivElement>
+  /** The face element the front/back content renders into. */
+  @ViewChild('face') private face?: ElementRef<HTMLDivElement>
+
+  /** The i18n provider above the card (the button labels). */
+  private readonly i18n = useTranslation()
+
+  /** Whether the answer face is showing. */
+  private readonly revealedState = signal(false)
+
+  /** Whether a `[slot=progress]` projection landed (an empty wrapper is removed). */
+  private progressProjected = false
+
+  /** Whether the view queries have been read (nothing is withdrawn before). */
+  private viewReady = false
+
+  /**
+   * The current class map.
+   * @returns The UIClassMap.
+   */
+  cm(): UIClassMap {
+    return getClassMap()
+  }
+
+  /**
+   * Computes the card class list — React's `Card` with the default
+   * `elevated` variant and `md` padding, plus `className`.
+   * @returns The class string.
+   */
+  cardClasses(): string {
+    const cm = this.cm()
+    return cm.cn(cm.card({ variant: 'elevated' }), cm.cardPadding('md'), this.className)
+  }
+
+  /**
+   * The outer stack class list.
+   * @returns The class string.
+   */
+  stackClasses(): string {
+    return this.cm().stack(4)
+  }
+
+  /**
+   * The progress row class list.
+   * @returns The class string.
+   */
+  progressClasses(): string {
+    const cm = this.cm()
+    return cm.cn(cm.textSize('xs'), cm.fontWeight('semibold'), cm.textCenter)
+  }
+
+  /**
+   * The face class list.
+   * @returns The class string.
+   */
+  faceClasses(): string {
+    const cm = this.cm()
+    return cm.cn(cm.sp('p', 6), cm.textCenter, cm.cn(cm.textSize('xl')))
+  }
+
+  /**
+   * The grade-button grid class list.
+   * @returns The class string.
+   */
+  gridClasses(): string {
+    return this.cm().grid({ cols: 4, gap: 'sm' })
+  }
+
+  /**
+   * Whether the answer face is showing.
+   * @returns True when revealed.
+   */
+  revealed(): boolean {
+    return this.revealedState()
+  }
+
+  /**
+   * Whether the front arrives as a text input (projected content otherwise).
+   * @returns True when `front` is a non-empty string.
+   */
+  get hasFront(): boolean {
+    return typeof this.front === 'string' && this.front.length > 0
+  }
+
+  /**
+   * Whether the back arrives as a text input (projected content otherwise).
+   * @returns True when `back` is a non-empty string.
+   */
+  get hasBack(): boolean {
+    return typeof this.back === 'string' && this.back.length > 0
+  }
+
+  /**
+   * Whether the progress row renders at all — React's `{progress && …}`.
+   * @returns True when a text or projected progress row exists.
+   */
+  get hasProgress(): boolean {
+    return (typeof this.progress === 'string' && this.progress.length > 0) || this.progressProjected
+  }
+
+  /**
+   * The reveal button's label.
+   * @returns The translated text.
+   */
+  revealLabel(): string {
+    return this.i18n.t('flashcard.reveal', {}, { defaultValue: 'Show answer' })
+  }
+
+  /**
+   * The Again button's label.
+   * @returns The translated text.
+   */
+  againLabel(): string {
+    return this.i18n.t('flashcard.again', {}, { defaultValue: 'Again' })
+  }
+
+  /**
+   * The Hard button's label.
+   * @returns The translated text.
+   */
+  hardLabel(): string {
+    return this.i18n.t('flashcard.hard', {}, { defaultValue: 'Hard' })
+  }
+
+  /**
+   * The Good button's label.
+   * @returns The translated text.
+   */
+  goodLabel(): string {
+    return this.i18n.t('flashcard.good', {}, { defaultValue: 'Good' })
+  }
+
+  /**
+   * The Easy button's label.
+   * @returns The translated text.
+   */
+  easyLabel(): string {
+    return this.i18n.t('flashcard.easy', {}, { defaultValue: 'Easy' })
+  }
+
+  /** Reveals the answer face. */
+  reveal(): void {
+    this.revealedState.set(true)
+  }
+
+  /**
+   * Forwards the selected grade to the parent and resets the card to hidden.
+   * @param grade - The selected SM-2 grade.
+   */
+  grade(grade: SrsGrade): void {
+    this.onGrade?.(grade)
+    this.revealedState.set(false)
+  }
+
+  /** Reads the initial `defaultRevealed` once — React's `useState` semantics. */
+  ngOnInit(): void {
+    this.revealedState.set(!!this.defaultRevealed)
+  }
+
+  /**
+   * Reads whether a progress row was projected, then withdraws the wrapper
+   * when neither a text input nor projected content landed (React renders no
+   * wrapper at all in that case). View queries resolve only at view init.
+   */
+  ngAfterViewInit(): void {
+    const wrap = this.progressWrap?.nativeElement
+    if (wrap) this.progressProjected = hasNodes(wrap)
+    this.viewReady = true
+    this.withdrawEmptyProgress()
+  }
+
+  /**
+   * Withdraws the progress wrapper once nothing fills it (React renders
+   * `{progress && <div>…</div>}` — nothing when progress is absent).
+   */
+  ngDoCheck(): void {
+    if (this.viewReady) this.withdrawEmptyProgress()
+  }
+
+  /** Detaches the progress row when neither a text nor a projected input fills it. */
+  private withdrawEmptyProgress(): void {
+    const wrap = this.progressWrap?.nativeElement
+    if (!wrap || !wrap.isConnected || this.hasProgress) return
+    wrap.remove()
+  }
+}
+```
+
+## Injection Notes
+
+### Requirements
+
+Peer dependencies:
+
+- `@angular/common` ^22.0.0
+- `@angular/core` ^22.0.0
+- `@angular/platform-browser` ^22.0.0
+- `@molecule/app-angular` ^3.5.0
+- `@molecule/app-ui` ^1.0.1
+- `@molecule/app-ui-angular` ^1.1.0
+
+### Runtime Dependencies
+
+- `@angular/common`
+- `@angular/core`
+- `@angular/platform-browser`
+- `@molecule/app-angular`
+- `@molecule/app-ui`
+- `@molecule/app-ui-angular`
+
+Grading flips the card back to its FRONT face (ready for the next card) —
+swap the projected content to advance the deck after `onGrade` fires. There
+is no flip animation; the reveal is an instant content swap.
+
+The host element is the card surface itself (`div[mol-flashcard-card]`),
+carrying the `Card` classes React renders. The buttons come from
+`@molecule/app-ui-angular`'s `Button` (`button[mol-button]`); their labels
+translate via `@molecule/app-locales-flashcard-card` with English fallbacks
+inline.
+
+## Translations
+
+Translation strings are provided by `@molecule/app-locales-flashcard-card`.

package/dist/flashcard-card.component.d.ts

@@ -0,0 +1,147 @@
+/**
+ * FlashcardCard component (React parity).
+ *
+ * @module
+ */
+import { type AfterViewInit, type DoCheck } from '@angular/core';
+import type { UIClassMap } from '@molecule/app-ui';
+import type { SrsGrade } from './types.js';
+import * as i0 from "@angular/core";
+/**
+ * FlashcardCard component.
+ *
+ * Flashcard study component — front face → reveal back → SM-2 style grade
+ * buttons (Again / Hard / Good / Easy). The host IS React's root `<div>`
+ * (`div[mol-flashcard-card]`), carrying the `Card` classes exactly as React's
+ * `Card` does. `front` / `back` / `progress` are projected content
+ * (`[slot=front]`, `[slot=back]`, `[slot=progress]`) or plain string inputs;
+ * the button labels go through `useTranslation()` with React's exact keys and
+ * English defaults. Grading flips the card back to its front face.
+ */
+export declare class FlashcardCard implements AfterViewInit, DoCheck {
+    /** Front content (prompt) — a string input, or `[slot=front]` projected content. */
+    front?: unknown;
+    /** Back content (answer) — a string input, or `[slot=back]` projected content. */
+    back?: unknown;
+    /** Optional progress / position — a string input, or `[slot=progress]` content. */
+    progress?: unknown;
+    /** Called when the user grades the card after revealing the answer. */
+    onGrade?: (grade: SrsGrade) => void;
+    /** Initially show the answer. Read once, like React's `useState`. */
+    defaultRevealed?: boolean;
+    /** Extra classes on the card. */
+    className?: string;
+    /** The progress wrapper (always in the template; detached when empty). */
+    private progressWrap?;
+    /** The face element the front/back content renders into. */
+    private face?;
+    /** The i18n provider above the card (the button labels). */
+    private readonly i18n;
+    /** Whether the answer face is showing. */
+    private readonly revealedState;
+    /** Whether a `[slot=progress]` projection landed (an empty wrapper is removed). */
+    private progressProjected;
+    /** Whether the view queries have been read (nothing is withdrawn before). */
+    private viewReady;
+    /**
+     * The current class map.
+     * @returns The UIClassMap.
+     */
+    cm(): UIClassMap;
+    /**
+     * Computes the card class list — React's `Card` with the default
+     * `elevated` variant and `md` padding, plus `className`.
+     * @returns The class string.
+     */
+    cardClasses(): string;
+    /**
+     * The outer stack class list.
+     * @returns The class string.
+     */
+    stackClasses(): string;
+    /**
+     * The progress row class list.
+     * @returns The class string.
+     */
+    progressClasses(): string;
+    /**
+     * The face class list.
+     * @returns The class string.
+     */
+    faceClasses(): string;
+    /**
+     * The grade-button grid class list.
+     * @returns The class string.
+     */
+    gridClasses(): string;
+    /**
+     * Whether the answer face is showing.
+     * @returns True when revealed.
+     */
+    revealed(): boolean;
+    /**
+     * Whether the front arrives as a text input (projected content otherwise).
+     * @returns True when `front` is a non-empty string.
+     */
+    get hasFront(): boolean;
+    /**
+     * Whether the back arrives as a text input (projected content otherwise).
+     * @returns True when `back` is a non-empty string.
+     */
+    get hasBack(): boolean;
+    /**
+     * Whether the progress row renders at all — React's `{progress && …}`.
+     * @returns True when a text or projected progress row exists.
+     */
+    get hasProgress(): boolean;
+    /**
+     * The reveal button's label.
+     * @returns The translated text.
+     */
+    revealLabel(): string;
+    /**
+     * The Again button's label.
+     * @returns The translated text.
+     */
+    againLabel(): string;
+    /**
+     * The Hard button's label.
+     * @returns The translated text.
+     */
+    hardLabel(): string;
+    /**
+     * The Good button's label.
+     * @returns The translated text.
+     */
+    goodLabel(): string;
+    /**
+     * The Easy button's label.
+     * @returns The translated text.
+     */
+    easyLabel(): string;
+    /** Reveals the answer face. */
+    reveal(): void;
+    /**
+     * Forwards the selected grade to the parent and resets the card to hidden.
+     * @param grade - The selected SM-2 grade.
+     */
+    grade(grade: SrsGrade): void;
+    /** Reads the initial `defaultRevealed` once — React's `useState` semantics. */
+    ngOnInit(): void;
+    /**
+     * Reads whether a progress row was projected, then withdraws the wrapper
+     * when neither a text input nor projected content landed (React renders no
+     * wrapper at all in that case). View queries resolve only at view init.
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Withdraws the progress wrapper once nothing fills it (React renders
+     * `{progress && <div>…</div>}` — nothing when progress is absent).
+     */
+    ngDoCheck(): void;
+    /** Detaches the progress row when neither a text nor a projected input fills it. */
+    private withdrawEmptyProgress;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlashcardCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlashcardCard, "div[mol-flashcard-card]", never, { "front": { "alias": "front"; "required": false; }; "back": { "alias": "back"; "required": false; }; "progress": { "alias": "progress"; "required": false; }; "onGrade": { "alias": "onGrade"; "required": false; }; "defaultRevealed": { "alias": "defaultRevealed"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, {}, never, ["[slot=progress]", "[slot=back]", "[slot=front]"], true, never>;
+}
+//# sourceMappingURL=flashcard-card.component.d.ts.map

package/dist/flashcard-card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flashcard-card.component.d.ts","sourceRoot":"","sources":["../src/flashcard-card.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,OAAO,EAIb,MAAM,eAAe,CAAA;AAGtB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAIlD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;;AAiB1C;;;;;;;;;;GAUG;AACH,qBAWa,aAAc,YAAW,aAAa,EAAE,OAAO;IAC1D,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kFAAkF;IAClF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uEAAuE;IACvE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAA;IACnC,qEAAqE;IACrE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,0EAA0E;IAC/C,OAAO,CAAC,YAAY,CAAC,CAA4B;IAC5E,4DAA4D;IACzC,OAAO,CAAC,IAAI,CAAC,CAA4B;IAE5D,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmB;IAExC,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgB;IAE9C,mFAAmF;IACnF,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,6EAA6E;IAC7E,OAAO,CAAC,SAAS,CAAQ;IAEzB;;;OAGG;IACH,EAAE,IAAI,UAAU;IAIhB;;;;OAIG;IACH,WAAW,IAAI,MAAM;IAKrB;;;OAGG;IACH,YAAY,IAAI,MAAM;IAItB;;;OAGG;IACH,eAAe,IAAI,MAAM;IAKzB;;;OAGG;IACH,WAAW,IAAI,MAAM;IAKrB;;;OAGG;IACH,WAAW,IAAI,MAAM;IAIrB;;;OAGG;IACH,QAAQ,IAAI,OAAO;IAInB;;;OAGG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;OAGG;IACH,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED;;;OAGG;IACH,WAAW,IAAI,MAAM;IAIrB;;;OAGG;IACH,UAAU,IAAI,MAAM;IAIpB;;;OAGG;IACH,SAAS,IAAI,MAAM;IAInB;;;OAGG;IACH,SAAS,IAAI,MAAM;IAInB;;;OAGG;IACH,SAAS,IAAI,MAAM;IAInB,+BAA+B;IAC/B,MAAM,IAAI,IAAI;IAId;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAK5B,+EAA+E;IAC/E,QAAQ,IAAI,IAAI;IAIhB;;;;OAIG;IACH,eAAe,IAAI,IAAI;IAOvB;;;OAGG;IACH,SAAS,IAAI,IAAI;IAIjB,oFAAoF;IACpF,OAAO,CAAC,qBAAqB;yCAnMlB,aAAa;2CAAb,aAAa;CAwMzB"}

package/dist/flashcard-card.component.js

@@ -0,0 +1,367 @@
+/**
+ * FlashcardCard component (React parity).
+ *
+ * @module
+ */
+import { Component, signal, ViewChild, } from '@angular/core';
+import { useTranslation } from '@molecule/app-angular';
+import { getClassMap } from '@molecule/app-ui';
+import { Button } from '@molecule/app-ui-angular';
+import * as i0 from "@angular/core";
+const _c0 = ["progressWrap"];
+const _c1 = ["face"];
+const _c2 = [[["", "slot", "progress"]], [["", "slot", "back"]], [["", "slot", "front"]]];
+const _c3 = ["[slot=progress]", "[slot=back]", "[slot=front]"];
+function FlashcardCard_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.progress);
+} }
+function FlashcardCard_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.back);
+} }
+function FlashcardCard_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, FlashcardCard_Conditional_7_Conditional_0_Template, 2, 1, "ng-container");
+    i0.ɵɵprojection(1, 1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.hasBack ? 0 : -1);
+} }
+function FlashcardCard_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.front);
+} }
+function FlashcardCard_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, FlashcardCard_Conditional_8_Conditional_0_Template, 2, 1, "ng-container");
+    i0.ɵɵprojection(1, 2);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.hasFront ? 0 : -1);
+} }
+function FlashcardCard_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 4);
+    i0.ɵɵlistener("click", function FlashcardCard_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.reveal()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("variant", "solid")("color", "primary");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.revealLabel());
+} }
+function FlashcardCard_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "button", 4);
+    i0.ɵɵlistener("click", function FlashcardCard_Conditional_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.grade("again")); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 4);
+    i0.ɵɵlistener("click", function FlashcardCard_Conditional_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.grade("hard")); });
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 4);
+    i0.ɵɵlistener("click", function FlashcardCard_Conditional_10_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.grade("good")); });
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 4);
+    i0.ɵɵlistener("click", function FlashcardCard_Conditional_10_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.grade("easy")); });
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r0.gridClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("variant", "outline")("color", "error");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.againLabel());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("variant", "outline")("color", "warning");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.hardLabel());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("variant", "outline")("color", "primary");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.goodLabel());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("variant", "outline")("color", "success");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.easyLabel());
+} }
+/**
+ * Whether an ng-content wrapper captured any element or text node.
+ *
+ * @param el - The wrapper element.
+ * @returns True when at least one projected node exists.
+ */
+const hasNodes = (el) => {
+    if (!el)
+        return false;
+    for (const node of Array.from(el.childNodes)) {
+        if (node.nodeType === 1)
+            return true;
+        if (node.nodeType === 3 && (node.textContent ?? '').trim())
+            return true;
+    }
+    return false;
+};
+/**
+ * FlashcardCard component.
+ *
+ * Flashcard study component — front face → reveal back → SM-2 style grade
+ * buttons (Again / Hard / Good / Easy). The host IS React's root `<div>`
+ * (`div[mol-flashcard-card]`), carrying the `Card` classes exactly as React's
+ * `Card` does. `front` / `back` / `progress` are projected content
+ * (`[slot=front]`, `[slot=back]`, `[slot=progress]`) or plain string inputs;
+ * the button labels go through `useTranslation()` with React's exact keys and
+ * English defaults. Grading flips the card back to its front face.
+ */
+export class FlashcardCard {
+    /** Front content (prompt) — a string input, or `[slot=front]` projected content. */
+    front;
+    /** Back content (answer) — a string input, or `[slot=back]` projected content. */
+    back;
+    /** Optional progress / position — a string input, or `[slot=progress]` content. */
+    progress;
+    /** Called when the user grades the card after revealing the answer. */
+    onGrade;
+    /** Initially show the answer. Read once, like React's `useState`. */
+    defaultRevealed;
+    /** Extra classes on the card. */
+    className;
+    /** The progress wrapper (always in the template; detached when empty). */
+    progressWrap;
+    /** The face element the front/back content renders into. */
+    face;
+    /** The i18n provider above the card (the button labels). */
+    i18n = useTranslation();
+    /** Whether the answer face is showing. */
+    revealedState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealedState" }] : /* istanbul ignore next */ []));
+    /** Whether a `[slot=progress]` projection landed (an empty wrapper is removed). */
+    progressProjected = false;
+    /** Whether the view queries have been read (nothing is withdrawn before). */
+    viewReady = false;
+    /**
+     * The current class map.
+     * @returns The UIClassMap.
+     */
+    cm() {
+        return getClassMap();
+    }
+    /**
+     * Computes the card class list — React's `Card` with the default
+     * `elevated` variant and `md` padding, plus `className`.
+     * @returns The class string.
+     */
+    cardClasses() {
+        const cm = this.cm();
+        return cm.cn(cm.card({ variant: 'elevated' }), cm.cardPadding('md'), this.className);
+    }
+    /**
+     * The outer stack class list.
+     * @returns The class string.
+     */
+    stackClasses() {
+        return this.cm().stack(4);
+    }
+    /**
+     * The progress row class list.
+     * @returns The class string.
+     */
+    progressClasses() {
+        const cm = this.cm();
+        return cm.cn(cm.textSize('xs'), cm.fontWeight('semibold'), cm.textCenter);
+    }
+    /**
+     * The face class list.
+     * @returns The class string.
+     */
+    faceClasses() {
+        const cm = this.cm();
+        return cm.cn(cm.sp('p', 6), cm.textCenter, cm.cn(cm.textSize('xl')));
+    }
+    /**
+     * The grade-button grid class list.
+     * @returns The class string.
+     */
+    gridClasses() {
+        return this.cm().grid({ cols: 4, gap: 'sm' });
+    }
+    /**
+     * Whether the answer face is showing.
+     * @returns True when revealed.
+     */
+    revealed() {
+        return this.revealedState();
+    }
+    /**
+     * Whether the front arrives as a text input (projected content otherwise).
+     * @returns True when `front` is a non-empty string.
+     */
+    get hasFront() {
+        return typeof this.front === 'string' && this.front.length > 0;
+    }
+    /**
+     * Whether the back arrives as a text input (projected content otherwise).
+     * @returns True when `back` is a non-empty string.
+     */
+    get hasBack() {
+        return typeof this.back === 'string' && this.back.length > 0;
+    }
+    /**
+     * Whether the progress row renders at all — React's `{progress && …}`.
+     * @returns True when a text or projected progress row exists.
+     */
+    get hasProgress() {
+        return (typeof this.progress === 'string' && this.progress.length > 0) || this.progressProjected;
+    }
+    /**
+     * The reveal button's label.
+     * @returns The translated text.
+     */
+    revealLabel() {
+        return this.i18n.t('flashcard.reveal', {}, { defaultValue: 'Show answer' });
+    }
+    /**
+     * The Again button's label.
+     * @returns The translated text.
+     */
+    againLabel() {
+        return this.i18n.t('flashcard.again', {}, { defaultValue: 'Again' });
+    }
+    /**
+     * The Hard button's label.
+     * @returns The translated text.
+     */
+    hardLabel() {
+        return this.i18n.t('flashcard.hard', {}, { defaultValue: 'Hard' });
+    }
+    /**
+     * The Good button's label.
+     * @returns The translated text.
+     */
+    goodLabel() {
+        return this.i18n.t('flashcard.good', {}, { defaultValue: 'Good' });
+    }
+    /**
+     * The Easy button's label.
+     * @returns The translated text.
+     */
+    easyLabel() {
+        return this.i18n.t('flashcard.easy', {}, { defaultValue: 'Easy' });
+    }
+    /** Reveals the answer face. */
+    reveal() {
+        this.revealedState.set(true);
+    }
+    /**
+     * Forwards the selected grade to the parent and resets the card to hidden.
+     * @param grade - The selected SM-2 grade.
+     */
+    grade(grade) {
+        this.onGrade?.(grade);
+        this.revealedState.set(false);
+    }
+    /** Reads the initial `defaultRevealed` once — React's `useState` semantics. */
+    ngOnInit() {
+        this.revealedState.set(!!this.defaultRevealed);
+    }
+    /**
+     * Reads whether a progress row was projected, then withdraws the wrapper
+     * when neither a text input nor projected content landed (React renders no
+     * wrapper at all in that case). View queries resolve only at view init.
+     */
+    ngAfterViewInit() {
+        const wrap = this.progressWrap?.nativeElement;
+        if (wrap)
+            this.progressProjected = hasNodes(wrap);
+        this.viewReady = true;
+        this.withdrawEmptyProgress();
+    }
+    /**
+     * Withdraws the progress wrapper once nothing fills it (React renders
+     * `{progress && <div>…</div>}` — nothing when progress is absent).
+     */
+    ngDoCheck() {
+        if (this.viewReady)
+            this.withdrawEmptyProgress();
+    }
+    /** Detaches the progress row when neither a text nor a projected input fills it. */
+    withdrawEmptyProgress() {
+        const wrap = this.progressWrap?.nativeElement;
+        if (!wrap || !wrap.isConnected || this.hasProgress)
+            return;
+        wrap.remove();
+    }
+    static ɵfac = function FlashcardCard_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlashcardCard)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlashcardCard, selectors: [["div", "mol-flashcard-card", ""]], viewQuery: function FlashcardCard_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.progressWrap = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.face = _t.first);
+        } }, hostVars: 2, hostBindings: function FlashcardCard_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassMap(ctx.cardClasses());
+        } }, inputs: { front: "front", back: "back", progress: "progress", onGrade: "onGrade", defaultRevealed: "defaultRevealed", className: "className" }, ngContentSelectors: _c3, decls: 11, vars: 9, consts: [["progressWrap", ""], ["face", ""], ["mol-button", "", 3, "variant", "color"], [3, "class"], ["mol-button", "", 3, "click", "variant", "color"]], template: function FlashcardCard_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c2);
+            i0.ɵɵelementStart(0, "div")(1, "div", null, 0);
+            i0.ɵɵconditionalCreate(3, FlashcardCard_Conditional_3_Template, 2, 1, "ng-container");
+            i0.ɵɵprojection(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", null, 1);
+            i0.ɵɵconditionalCreate(7, FlashcardCard_Conditional_7_Template, 2, 1)(8, FlashcardCard_Conditional_8_Template, 2, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(9, FlashcardCard_Conditional_9_Template, 2, 3, "button", 2)(10, FlashcardCard_Conditional_10_Template, 9, 14, "div", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.stackClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.progressClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.hasProgress ? 3 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassMap(ctx.faceClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.revealed() ? 7 : 8);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.revealed() ? 9 : 10);
+        } }, dependencies: [Button], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlashcardCard, [{
+        type: Component,
+        args: [{
+                selector: 'div[mol-flashcard-card]',
+                standalone: true,
+                imports: [Button],
+                inputs: ['front', 'back', 'progress', 'onGrade', 'defaultRevealed', 'className'],
+                host: {
+                    '[class]': 'cardClasses()',
+                },
+                // prettier-ignore
+                template: `<div [class]="stackClasses()"><div #progressWrap [class]="progressClasses()">@if (hasProgress) {<ng-container>{{ progress }}</ng-container>}<ng-content select="[slot=progress]"></ng-content></div><div [class]="faceClasses()" #face>@if (revealed()) {@if (hasBack) {<ng-container>{{ back }}</ng-container>}<ng-content select="[slot=back]"></ng-content>} @else {@if (hasFront) {<ng-container>{{ front }}</ng-container>}<ng-content select="[slot=front]"></ng-content>}</div>@if (!revealed()) {<button mol-button [variant]="'solid'" [color]="'primary'" (click)="reveal()">{{ revealLabel() }}</button>} @else {<div [class]="gridClasses()"><button mol-button [variant]="'outline'" [color]="'error'" (click)="grade('again')">{{ againLabel() }}</button><button mol-button [variant]="'outline'" [color]="'warning'" (click)="grade('hard')">{{ hardLabel() }}</button><button mol-button [variant]="'outline'" [color]="'primary'" (click)="grade('good')">{{ goodLabel() }}</button><button mol-button [variant]="'outline'" [color]="'success'" (click)="grade('easy')">{{ easyLabel() }}</button></div>}</div>`,
+            }]
+    }], null, { progressWrap: [{
+            type: ViewChild,
+            args: ['progressWrap']
+        }], face: [{
+            type: ViewChild,
+            args: ['face']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlashcardCard, { className: "FlashcardCard", filePath: "flashcard-card.component.ts", lineNumber: 60 }); })();
+//# sourceMappingURL=flashcard-card.component.js.map

package/dist/flashcard-card.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flashcard-card.component.js","sourceRoot":"","sources":["../src/flashcard-card.component.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Angular flashcard study card — the counterpart of
+ * `@molecule/app-flashcard-card-react`: the same props and the same DOM for
+ * the same input.
+ *
+ * Exports `<FlashcardCard>` — it shows the front (prompt), a "Show answer"
+ * reveal button, then the back (answer) with four SM-2-compatible grade
+ * buttons (Again / Hard / Good / Easy). The app owns the spaced-repetition
+ * scheduling; the card only reports the grade.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core'
+ * import { FlashcardCard } from '@molecule/app-flashcard-card-angular'
+ *
+ * @Component({
+ *   selector: 'app-study',
+ *   standalone: true,
+ *   imports: [FlashcardCard],
+ *   template: `
+ *     <div mol-flashcard-card [progress]="'Card 3 of 20'" [onGrade]="onGrade">
+ *       <span slot="front">What is the capital of France?</span>
+ *       <span slot="back">Paris</span>
+ *     </div>
+ *   `,
+ * })
+ * export class StudyView {
+ *   onGrade(grade: string): void {
+ *     console.log(grade)
+ *   }
+ * }
+ * ```
+ *
+ * @remarks
+ * Grading flips the card back to its FRONT face (ready for the next card) —
+ * swap the projected content to advance the deck after `onGrade` fires. There
+ * is no flip animation; the reveal is an instant content swap.
+ *
+ * The host element is the card surface itself (`div[mol-flashcard-card]`),
+ * carrying the `Card` classes React renders. The buttons come from
+ * `@molecule/app-ui-angular`'s `Button` (`button[mol-button]`); their labels
+ * translate via `@molecule/app-locales-flashcard-card` with English fallbacks
+ * inline.
+ *
+ * @module
+ */
+export * from './flashcard-card.component.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,cAAc,+BAA+B,CAAA;AAC7C,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,49 @@
+/**
+ * Angular flashcard study card — the counterpart of
+ * `@molecule/app-flashcard-card-react`: the same props and the same DOM for
+ * the same input.
+ *
+ * Exports `<FlashcardCard>` — it shows the front (prompt), a "Show answer"
+ * reveal button, then the back (answer) with four SM-2-compatible grade
+ * buttons (Again / Hard / Good / Easy). The app owns the spaced-repetition
+ * scheduling; the card only reports the grade.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core'
+ * import { FlashcardCard } from '@molecule/app-flashcard-card-angular'
+ *
+ * @Component({
+ *   selector: 'app-study',
+ *   standalone: true,
+ *   imports: [FlashcardCard],
+ *   template: `
+ *     <div mol-flashcard-card [progress]="'Card 3 of 20'" [onGrade]="onGrade">
+ *       <span slot="front">What is the capital of France?</span>
+ *       <span slot="back">Paris</span>
+ *     </div>
+ *   `,
+ * })
+ * export class StudyView {
+ *   onGrade(grade: string): void {
+ *     console.log(grade)
+ *   }
+ * }
+ * ```
+ *
+ * @remarks
+ * Grading flips the card back to its FRONT face (ready for the next card) —
+ * swap the projected content to advance the deck after `onGrade` fires. There
+ * is no flip animation; the reveal is an instant content swap.
+ *
+ * The host element is the card surface itself (`div[mol-flashcard-card]`),
+ * carrying the `Card` classes React renders. The buttons come from
+ * `@molecule/app-ui-angular`'s `Button` (`button[mol-button]`); their labels
+ * translate via `@molecule/app-locales-flashcard-card` with English fallbacks
+ * inline.
+ *
+ * @module
+ */
+export * from './flashcard-card.component.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,cAAc,+BAA+B,CAAA;AAC7C,cAAc,YAAY,CAAA"}

package/dist/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Types of `@molecule/app-flashcard-card-angular` — the Angular counterpart of
+ * `@molecule/app-flashcard-card-react`, same props and DOM.
+ *
+ * @module
+ */
+/**
+ * SM-2-compatible grade values the caller uses to schedule the next review.
+ * Same union as React's `SrsGrade`.
+ */
+export type SrsGrade = 'again' | 'hard' | 'good' | 'easy';
+/**
+ * Props accepted by {@link FlashcardCard} — the same props
+ * `@molecule/app-flashcard-card-react` accepts. Node props (`front`, `back`,
+ * `progress`) are projected content in Angular (an input cannot carry a node),
+ * so they are typed `unknown`: pass them as `[slot=front]` / `[slot=back]` /
+ * `[slot=progress]` content, or as plain strings.
+ */
+export interface FlashcardCardProps {
+    /** Front content (prompt), projected as `[slot=front]` content or a string. */
+    front?: unknown;
+    /** Back content (answer), projected as `[slot=back]` content or a string. */
+    back?: unknown;
+    /** Optional progress / position, projected as `[slot=progress]` content or a string. */
+    progress?: unknown;
+    /** Called when the user grades the card after revealing the answer. */
+    onGrade?: (grade: SrsGrade) => void;
+    /** Initially show the answer. Read once, like React's `useState`. */
+    defaultRevealed?: boolean;
+    /** Extra classes on the card. */
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AAEzD;;;;;;GAMG;AACH,MAAM,WAAW,kBAAkB;IACjC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uEAAuE;IACvE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAA;IACnC,qEAAqE;IACrE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/types.js

@@ -0,0 +1,8 @@
+/**
+ * Types of `@molecule/app-flashcard-card-angular` — the Angular counterpart of
+ * `@molecule/app-flashcard-card-react`, same props and DOM.
+ *
+ * @module
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "@molecule/app-flashcard-card-angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1-stage",
+  "description": "Flashcard flip component with front/back + spaced-repetition grade buttons",
+  "homepage": "https://www.molecule.dev/packages/app-flashcard-card-angular",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "ngc",
+    "dev": "ngc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "molecule",
+    "flashcard-card",
+    "angular"
+  ],
+  "author": "Molecule Dev, Inc. (https://molecule.dev)",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/molecule-dev/molecule.git",
+    "directory": "packages/app/features/flashcard-card-angular"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "bugs": "https://github.com/molecule-dev/molecule/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@molecule/app-angular": "^3.5.0",
+    "@molecule/app-ui": "^1.0.1",
+    "@molecule/app-ui-angular": "^1.1.0"
+  },
+  "devDependencies": {
+    "@angular/common": "22.2.3",
+    "@angular/compiler": "22.2.3",
+    "@angular/compiler-cli": "22.2.3",
+    "@angular/core": "22.2.3",
+    "@angular/platform-browser": "22.2.3",
+    "@molecule/app-angular": "3.6.0",
+    "@molecule/app-framework-conformance": "0.0.0",
+    "@molecule/app-i18n": "1.2.1",
+    "@molecule/app-icons": "1.0.4",
+    "@molecule/app-ui": "1.3.11",
+    "@molecule/app-ui-angular": "1.1.2",
+    "@types/node": "26.6.5",
+    "jsdom": "30.1.3",
+    "rxjs": "7.8.2",
+    "typescript": "6.0.3",
+    "vitest": "4.1.12",
+    "zone.js": "0.16.3"
+  }
+}