@riebeckite/plugin-flashcards 0.0.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 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 Rerurate_514
+
+   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

@@ -0,0 +1,120 @@
+# @riebeckite/plugin-flashcards
+
+Turn a `flashcards` code block into a study island: a small deck of cards that
+shows a question, reveals the answer, and can be navigated and shuffled in the
+browser. The build emits an accessible static list first, so the deck stays
+readable with no JavaScript at all.
+
+[日本語](./README_ja.md)
+
+## Overview
+
+`flashcards()` recognises fenced blocks
+
+````md
+```flashcards
+What is the capital of France? :: Paris
+
+What is 2 + 2? :: 4
+```
+````
+
+and replaces them with an interactive deck.
+
+## Usage
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { flashcardsPlugin } from "@riebeckite/plugin-flashcards";
+
+export default defineConfig({
+  // ...
+  plugins: [flashcardsPlugin()],
+});
+```
+
+The plugin adds `style.css` and a client entry. The script tag is emitted by the
+site layout; the plugin only declares it.
+
+## Block syntax
+
+A block holds one or more cards. Each card is a `Question :: Answer` pair. Cards
+are separated by a blank line or by a `---` line, and an answer may span
+multiple lines:
+
+````md
+```flashcards
+Which language is this plugin written in? :: TypeScript
+
+What does the client render? :: An interactive deck
+---
+Describe the fallback. :: A static ordered list.
+It stays readable without JavaScript.
+```
+````
+
+A block with no cards, a card without `::`, or a card with an empty side is
+reported as a diagnostic (`invalid-flashcards`) and left as a code block.
+
+## Output
+
+At build time the block becomes
+
+```html
+<div class="rb-flashcards" data-flashcards data-flashcards-count="2">
+  <script type="application/json" data-flashcards-payload>
+    {"cards":[{"front":"...","back":"..."}]}
+  </script>
+  <ol class="rb-flashcards__list" data-flashcards-fallback>
+    <li class="rb-flashcards__item">
+      <span class="rb-flashcards__front">...</span>
+      <span class="rb-flashcards__back">...</span>
+    </li>
+  </ol>
+</div>
+```
+
+The payload is inert and escaped, so card text containing `<`, `>`, or `&` can
+never close the script element. The ordered list is the no-JavaScript fallback.
+
+## Client behaviour
+
+`initFlashcards()` reads the payload of every `[data-flashcards]` element and
+adds an interactive deck above the fallback. It supports:
+
+- Reveal / hide the answer
+- Previous and next card with wrap-around
+- Shuffle
+- A live card counter
+- Keyboard control: `Space` reveals, `ArrowLeft` / `ArrowRight` navigate
+
+On success the root gets `data-flashcards="ready"` and the static list is
+hidden. If the payload is missing or invalid the client leaves the fallback
+untouched. No options are passed from the build to the client; the deck reads
+`data-flashcards-shuffle` when it is present.
+
+## Options
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `className` | `string` | `"rb-flashcards"` | Root CSS class for the deck |
+| `language` | `string` | `"flashcards"` | Fence language to target |
+| `shuffle` | `boolean` | `false` | Start the deck in a shuffled order |
+| `fallback` | `boolean` | `true` | Emit the static ordered list |
+
+## Exports
+
+- `flashcards(options?)` / `flashcardsPlugin(options?)` — plugin factory
+- `initFlashcards(root?)` — client initializer
+- `parseFlashcards(source)` — parse a block into cards
+- `splitFlashcardGroups(source)` — split a block into card groups
+- `remarkFlashcards(options?)` — the remark transform on its own
+- `renderFlashcards(cards, options)` / `renderFlashcardsPayload(cards)` /
+  `renderFlashcardsFallback(cards, className?)` — build-time rendering helpers
+- `resolveFlashcardsOptions(options?)`, `createFlashcardsRuntime(options?)`
+- Types: `FlashcardsOptions`, `FlashcardsCard`, `FlashcardsPayload`,
+  `ResolvedFlashcardsOptions`
+
+## See also
+
+- [Plugin guide](../../../docs/en/plugin-system.md)

package/README_ja.md

@@ -0,0 +1,93 @@
+# @riebeckite/plugin-flashcards
+
+`flashcards` コードブロックを学習用のカードデッキに変えるプラグインです。質問を表示して答えをめくり、前後の移動とシャッフルができます。ビルド時には静的なリストを先に出力するため、JavaScript がなくても内容を読めます。
+
+[English](./README.md)
+
+## 設定する
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { flashcardsPlugin } from "@riebeckite/plugin-flashcards";
+
+export default defineConfig({
+  // ...
+  plugins: [flashcardsPlugin()],
+});
+```
+
+このプラグインは `style.css` とクライアントエントリを追加します。script タグの出力はサイトのレイアウト側が行い、プラグインは宣言だけを担います。
+
+## ブロックの書き方
+
+ブロックには 1 枚以上のカードを書きます。カードは `質問 :: 答え` の組です。カード同士は空行または `---` の行で区切り、答えは複数行にまたがってもかまいません。
+
+````md
+```flashcards
+Which language is this plugin written in? :: TypeScript
+
+What does the client render? :: An interactive deck
+---
+Describe the fallback. :: A static ordered list.
+It stays readable without JavaScript.
+```
+````
+
+カードが 1 枚もない、`::` のないカードがある、どちらかの側が空である、といった場合は `invalid-flashcards` の診断を出し、コードブロックのまま残します。
+
+## 出力
+
+ビルド時に、ブロックは次の要素に置き換わります。
+
+```html
+<div class="rb-flashcards" data-flashcards data-flashcards-count="2">
+  <script type="application/json" data-flashcards-payload>
+    {"cards":[{"front":"...","back":"..."}]}
+  </script>
+  <ol class="rb-flashcards__list" data-flashcards-fallback>
+    <li class="rb-flashcards__item">
+      <span class="rb-flashcards__front">...</span>
+      <span class="rb-flashcards__back">...</span>
+    </li>
+  </ol>
+</div>
+```
+
+payload は実行されない JSON で、`<` `>` `&` はエスケープ済みです。カードの文言にこれらの文字が含まれていても script 要素を閉じることはできません。順序付きリストは JavaScript がない場合の代替表示です。
+
+## クライアントの動作
+
+`initFlashcards()` は各 `[data-flashcards]` 要素の payload を読み、代替リストの上に操作できるデッキを組み立てます。対応している操作は次のとおりです。
+
+- 答えの表示・非表示
+- 前後のカードへの移動（端で折り返す）
+- シャッフル
+- カード位置の表示
+- キーボード操作: `Space` で答えを表示、`ArrowLeft` / `ArrowRight` で移動
+
+成功するとルートに `data-flashcards="ready"` が付き、静的なリストは非表示になります。payload がない、または壊れている場合は代替表示をそのまま残します。ビルドからクライアントへオプションは渡しません。シャッフルの初期状態は `data-flashcards-shuffle` 属性で伝えます。
+
+## オプション
+
+| 項目 | 型 | 既定値 | 説明 |
+| --- | --- | --- | --- |
+| `className` | `string` | `"rb-flashcards"` | デッキのルート CSS クラス |
+| `language` | `string` | `"flashcards"` | 対象にするフェンス言語 |
+| `shuffle` | `boolean` | `false` | 最初からシャッフルした順で表示する |
+| `fallback` | `boolean` | `true` | 静的な順序付きリストを出力する |
+
+## 主なエクスポート
+
+- `flashcards(options?)` / `flashcardsPlugin(options?)`: プラグインを作成する
+- `initFlashcards(root?)`: クライアント側を初期化する
+- `parseFlashcards(source)`: ブロックをカードに分解する
+- `splitFlashcardGroups(source)`: ブロックをカードのまとまりに分割する
+- `remarkFlashcards(options?)`: remark 変換を単体で使う
+- `renderFlashcards(cards, options)` / `renderFlashcardsPayload(cards)` /
+  `renderFlashcardsFallback(cards, className?)`: ビルド時の描画ヘルパー
+- `resolveFlashcardsOptions(options?)`、`createFlashcardsRuntime(options?)`
+- 型: `FlashcardsOptions`、`FlashcardsCard`、`FlashcardsPayload`、`ResolvedFlashcardsOptions`
+
+## 関連資料
+
+- [プラグインシステム](../../../docs/ja/plugin-system.md)

package/dist/client.d.ts

@@ -0,0 +1,2 @@
+export { initFlashcards } from "./src/init.js";
+export type { FlashcardsCard, FlashcardsPayload } from "./src/types.js";

package/dist/client.js

@@ -0,0 +1,177 @@
+// src/init.ts
+var ROOT_SELECTOR = "[data-flashcards]";
+var PAYLOAD_SELECTOR = "script[data-flashcards-payload]";
+var FALLBACK_SELECTOR = "[data-flashcards-fallback]";
+var DEFAULT_CLASS = "rb-flashcards";
+function initFlashcards(root = document) {
+  const decks = Array.from(root.querySelectorAll(ROOT_SELECTOR));
+  const cleanups = [];
+  for (const deck of decks) {
+    const cleanup = initializeDeck(deck);
+    if (cleanup) cleanups.push(cleanup);
+  }
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+function initializeDeck(deck) {
+  if (deck.dataset.flashcards === "ready") return null;
+  let cards;
+  try {
+    cards = readCards(deck);
+  } catch {
+    return null;
+  }
+  if (cards.length === 0) return null;
+  try {
+    return buildDeck(deck, cards);
+  } catch {
+    return null;
+  }
+}
+function buildDeck(deck, cards) {
+  const prefix = classPrefix(deck);
+  const order = cards.map((_card, index) => index);
+  if (deck.dataset.flashcardsShuffle === "true") shuffleOrder(order);
+  const state = { position: 0, revealed: false };
+  const ui = createDeckUi(deck.ownerDocument, prefix);
+  ui.root.tabIndex = 0;
+  const render = () => {
+    const card = cards[order[state.position]];
+    if (!card) return;
+    ui.question.textContent = card.front;
+    ui.answer.textContent = card.back;
+    ui.answer.hidden = !state.revealed;
+    ui.reveal.textContent = state.revealed ? "Hide answer" : "Show answer";
+    ui.reveal.setAttribute("aria-pressed", state.revealed ? "true" : "false");
+    ui.counter.textContent = `${state.position + 1} / ${cards.length}`;
+  };
+  const toggle = () => {
+    state.revealed = !state.revealed;
+    render();
+  };
+  const move = (delta) => {
+    const total = order.length;
+    state.position = (state.position + delta + total) % total;
+    state.revealed = false;
+    render();
+  };
+  const handleReveal = () => toggle();
+  const handlePrev = () => move(-1);
+  const handleNext = () => move(1);
+  const handleShuffle = () => {
+    shuffleOrder(order);
+    state.position = 0;
+    state.revealed = false;
+    render();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      handleNext();
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      handlePrev();
+      return;
+    }
+    if (event.key === " " || event.key === "Spacebar") {
+      if (event.target instanceof HTMLButtonElement) return;
+      event.preventDefault();
+      toggle();
+    }
+  };
+  ui.reveal.addEventListener("click", handleReveal);
+  ui.prev.addEventListener("click", handlePrev);
+  ui.next.addEventListener("click", handleNext);
+  ui.shuffle.addEventListener("click", handleShuffle);
+  ui.root.addEventListener("keydown", handleKeyDown);
+  const fallback = deck.querySelector(FALLBACK_SELECTOR);
+  deck.insertBefore(ui.root, fallback ?? null);
+  if (fallback) fallback.hidden = true;
+  deck.dataset.flashcards = "ready";
+  render();
+  return () => {
+    ui.reveal.removeEventListener("click", handleReveal);
+    ui.prev.removeEventListener("click", handlePrev);
+    ui.next.removeEventListener("click", handleNext);
+    ui.shuffle.removeEventListener("click", handleShuffle);
+    ui.root.removeEventListener("keydown", handleKeyDown);
+    ui.root.remove();
+    if (fallback) fallback.hidden = false;
+    delete deck.dataset.flashcards;
+  };
+}
+function createDeckUi(doc, prefix) {
+  const root = doc.createElement("div");
+  root.className = `${prefix}__deck`;
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", "Flashcards");
+  const counter = doc.createElement("p");
+  counter.className = `${prefix}__counter`;
+  counter.setAttribute("aria-live", "polite");
+  const card = doc.createElement("div");
+  card.className = `${prefix}__card`;
+  const question = doc.createElement("p");
+  question.className = `${prefix}__question`;
+  const answer = doc.createElement("p");
+  answer.className = `${prefix}__answer`;
+  answer.hidden = true;
+  card.append(question, answer);
+  const controls = doc.createElement("div");
+  controls.className = `${prefix}__controls`;
+  const prev = createButton(doc, prefix, "prev", "Previous card");
+  const reveal = createButton(doc, prefix, "reveal", "Show answer");
+  const next = createButton(doc, prefix, "next", "Next card");
+  const shuffle = createButton(doc, prefix, "shuffle", "Shuffle cards");
+  reveal.setAttribute("aria-pressed", "false");
+  controls.append(prev, reveal, next, shuffle);
+  root.append(counter, card, controls);
+  return { root, counter, question, answer, reveal, prev, next, shuffle };
+}
+function createButton(doc, prefix, action, label) {
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = `${prefix}__button`;
+  button.dataset.flashcardsAction = action;
+  button.textContent = label;
+  return button;
+}
+function readCards(deck) {
+  const script = deck.querySelector(PAYLOAD_SELECTOR);
+  if (!script) throw new Error("Missing flashcards payload");
+  return parsePayload(script.textContent ?? "").cards;
+}
+function parsePayload(raw) {
+  const parsed = JSON.parse(raw);
+  if (!isPayload(parsed)) throw new Error("Invalid flashcards payload");
+  return parsed;
+}
+function isPayload(value) {
+  if (!value || typeof value !== "object") return false;
+  const cards = value.cards;
+  return Array.isArray(cards) && cards.every(isCard);
+}
+function isCard(value) {
+  if (!value || typeof value !== "object") return false;
+  const card = value;
+  return typeof card.front === "string" && typeof card.back === "string";
+}
+function classPrefix(deck) {
+  for (const name of deck.className.split(/\s+/)) {
+    if (name.length > 0) return name;
+  }
+  return DEFAULT_CLASS;
+}
+function shuffleOrder(order) {
+  for (let index = order.length - 1; index > 0; index -= 1) {
+    const swap = Math.floor(Math.random() * (index + 1));
+    const current = order[index];
+    order[index] = order[swap];
+    order[swap] = current;
+  }
+}
+export {
+  initFlashcards
+};

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import type { FlashcardsOptions } from "./src/types.js";
+export { initFlashcards } from "./src/init.js";
+export { DEFAULT_FLASHCARDS_CLASS, DEFAULT_FLASHCARDS_LANGUAGE, resolveFlashcardsOptions, } from "./src/options.js";
+export { parseFlashcards, splitFlashcardGroups } from "./src/parse.js";
+export { createFlashcardsPlaceholder, createFlashcardsPlaceholderPattern, decodeFlashcardsSource, encodeFlashcardsSource, FLASHCARDS_ATTRIBUTE, } from "./src/placeholder.js";
+export { remarkFlashcards } from "./src/remark.js";
+export { renderFlashcards, renderFlashcardsFallback, renderFlashcardsPayload, } from "./src/render.js";
+export { createFlashcardsRuntime } from "./src/runtime.js";
+export type { FlashcardsRuntime } from "./src/runtime.js";
+export type { FlashcardsCard, FlashcardsOptions, FlashcardsParseFailure, FlashcardsParseResult, FlashcardsParseSuccess, FlashcardsPayload, ResolvedFlashcardsOptions, } from "./src/types.js";
+export declare function flashcards(options?: FlashcardsOptions): import("@riebeckite/core").RiebeckitePlugin<FlashcardsOptions>;
+export declare const flashcardsPlugin: typeof flashcards;

package/dist/index.js

@@ -0,0 +1,448 @@
+// index.ts
+import {
+  createClientEntry,
+  createStyleAsset,
+  definePlugin
+} from "@riebeckite/core";
+
+// src/options.ts
+var DEFAULT_FLASHCARDS_CLASS = "rb-flashcards";
+var DEFAULT_FLASHCARDS_LANGUAGE = "flashcards";
+function resolveFlashcardsOptions(options = {}) {
+  return {
+    className: options.className ?? DEFAULT_FLASHCARDS_CLASS,
+    language: options.language ?? DEFAULT_FLASHCARDS_LANGUAGE,
+    shuffle: options.shuffle ?? false,
+    fallback: options.fallback ?? true
+  };
+}
+
+// src/remark.ts
+import { visit } from "unist-util-visit";
+
+// src/placeholder.ts
+var FLASHCARDS_ATTRIBUTE = "data-rr-flashcards-spec";
+function encodeFlashcardsSource(source) {
+  return encodeURIComponent(source);
+}
+function decodeFlashcardsSource(encoded) {
+  return decodeURIComponent(encoded);
+}
+function createFlashcardsPlaceholder(source) {
+  return `<div ${FLASHCARDS_ATTRIBUTE}="${encodeFlashcardsSource(source)}"></div>`;
+}
+function createFlashcardsPlaceholderPattern() {
+  return new RegExp(
+    `<div\\b[^>]*\\b${FLASHCARDS_ATTRIBUTE}="([^"]*)"[^>]*>\\s*</div>`,
+    "g"
+  );
+}
+
+// src/parse.ts
+var SEPARATOR_LINE = /^[ \t]*-{3,}[ \t]*$/gm;
+var GROUP_BREAK = /\n[ \t]*\n/;
+var CARD_DELIMITER = "::";
+function parseFlashcards(source) {
+  const groups = splitFlashcardGroups(source);
+  if (groups.length === 0) {
+    return { ok: false, reason: "is empty" };
+  }
+  const cards = [];
+  for (const group of groups) {
+    const parsed = parseCard(group);
+    if (typeof parsed === "string") {
+      return { ok: false, reason: parsed };
+    }
+    cards.push(parsed);
+  }
+  return { ok: true, cards };
+}
+function splitFlashcardGroups(source) {
+  return source.replace(/\r\n?/g, "\n").replace(SEPARATOR_LINE, "").split(GROUP_BREAK).map((group) => group.trim()).filter((group) => group.length > 0);
+}
+function parseCard(group) {
+  const delimiter = group.indexOf(CARD_DELIMITER);
+  if (delimiter < 0) {
+    return 'has a card without the "::" separator';
+  }
+  const front = group.slice(0, delimiter).trim();
+  const back = group.slice(delimiter + CARD_DELIMITER.length).trim();
+  if (front.length === 0 || back.length === 0) {
+    return "has a card with an empty question or answer";
+  }
+  return { front, back };
+}
+
+// src/remark.ts
+var FLASHCARDS_DIAGNOSTIC_SOURCE = "@riebeckite/plugin-flashcards";
+function remarkFlashcards(options = {}) {
+  const language = options.language ?? "flashcards";
+  return (tree, file) => {
+    visit(tree, "code", (node, index, parent) => {
+      if (node.lang !== language) return;
+      if (!parent || index === void 0) return;
+      const parsed = parseFlashcards(node.value);
+      if (parsed.ok === false) {
+        reportInvalidBlock(file, parsed.reason);
+        return;
+      }
+      const html = {
+        type: "html",
+        value: createFlashcardsPlaceholder(node.value)
+      };
+      parent.children.splice(index, 1, html);
+    });
+  };
+}
+function reportInvalidBlock(file, reason) {
+  const reporter = file?.message;
+  if (typeof reporter !== "function") return;
+  const diagnostic = reporter.call(
+    file,
+    `Invalid flashcards block: ${reason}.`
+  );
+  if (diagnostic && typeof diagnostic === "object") {
+    Object.assign(diagnostic, {
+      source: FLASHCARDS_DIAGNOSTIC_SOURCE,
+      ruleId: "invalid-flashcards"
+    });
+  }
+}
+
+// src/runtime.ts
+import {
+  escapeHtml as escapeHtml2
+} from "@riebeckite/core";
+
+// src/render.ts
+import { escapeHtml, escapeHtmlAttribute } from "@riebeckite/core";
+function renderFlashcards(cards, options) {
+  const { className } = options;
+  const attributes = [
+    `class="${escapeHtmlAttribute(className)}"`,
+    "data-flashcards",
+    `data-flashcards-count="${cards.length}"`
+  ];
+  if (options.shuffle) {
+    attributes.push('data-flashcards-shuffle="true"');
+  }
+  const children = [renderFlashcardsPayload(cards)];
+  if (options.fallback) {
+    children.push(renderFlashcardsFallback(cards, className));
+  }
+  return `<div ${attributes.join(" ")}>${children.join("")}</div>`;
+}
+function renderFlashcardsPayload(cards) {
+  const payload = { cards: [...cards] };
+  return `<script type="application/json" data-flashcards-payload>${escapeJsonForScript(JSON.stringify(payload))}</script>`;
+}
+function renderFlashcardsFallback(cards, className = "rb-flashcards") {
+  const items = cards.map((card) => renderFallbackItem(card, className)).join("");
+  return `<ol class="${escapeHtmlAttribute(className)}__list" data-flashcards-fallback>${items}</ol>`;
+}
+function renderFallbackItem(card, className) {
+  const front = escapeHtml(card.front).replace(/\n/g, "<br>");
+  const back = escapeHtml(card.back).replace(/\n/g, "<br>");
+  return [
+    `<li class="${escapeHtmlAttribute(className)}__item">`,
+    `<span class="${escapeHtmlAttribute(className)}__front">${front}</span>`,
+    `<span class="${escapeHtmlAttribute(className)}__back">${back}</span>`,
+    "</li>"
+  ].join("");
+}
+function escapeJsonForScript(json) {
+  return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+
+// src/runtime.ts
+function createFlashcardsRuntime(options) {
+  const resolved = resolveFlashcardsOptions(options);
+  const tracked = /* @__PURE__ */ new Map();
+  return {
+    track(slug, content) {
+      tracked.set(slug, content);
+    },
+    resolve(manifest, diagnostics) {
+      for (const entry of manifest.entries) {
+        if (!entry.html.includes(FLASHCARDS_ATTRIBUTE)) continue;
+        const html = replacePlaceholders(entry, resolved, diagnostics);
+        if (html === entry.html) continue;
+        entry.html = html;
+        const content = tracked.get(entry.slug);
+        if (content) content.html = html;
+      }
+    }
+  };
+}
+function replacePlaceholders(entry, options, diagnostics) {
+  const pattern = createFlashcardsPlaceholderPattern();
+  return entry.html.replace(pattern, (_match, encoded) => {
+    let source;
+    try {
+      source = decodeFlashcardsSource(encoded);
+    } catch (error) {
+      return reportInvalid(
+        entry,
+        options,
+        diagnostics,
+        `could not be decoded (${formatError(error)})`,
+        ""
+      );
+    }
+    const parsed = parseFlashcards(source);
+    if (parsed.ok === false) {
+      return reportInvalid(entry, options, diagnostics, parsed.reason, source);
+    }
+    return renderFlashcards(parsed.cards, options);
+  });
+}
+function reportInvalid(entry, options, diagnostics, reason, source) {
+  const message = `Flashcards block in \`${entry.slug}\` ${reason}.`;
+  diagnostics.push({
+    code: "flashcards-invalid",
+    severity: "error",
+    pluginName: "flashcards",
+    slug: entry.slug,
+    message
+  });
+  const className = escapeHtml2(options.className);
+  return `<pre class="${className} ${className}--invalid"><code>${escapeHtml2(source)}</code></pre>`;
+}
+function formatError(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+
+// src/init.ts
+var ROOT_SELECTOR = "[data-flashcards]";
+var PAYLOAD_SELECTOR = "script[data-flashcards-payload]";
+var FALLBACK_SELECTOR = "[data-flashcards-fallback]";
+var DEFAULT_CLASS = "rb-flashcards";
+function initFlashcards(root = document) {
+  const decks = Array.from(root.querySelectorAll(ROOT_SELECTOR));
+  const cleanups = [];
+  for (const deck of decks) {
+    const cleanup = initializeDeck(deck);
+    if (cleanup) cleanups.push(cleanup);
+  }
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+function initializeDeck(deck) {
+  if (deck.dataset.flashcards === "ready") return null;
+  let cards;
+  try {
+    cards = readCards(deck);
+  } catch {
+    return null;
+  }
+  if (cards.length === 0) return null;
+  try {
+    return buildDeck(deck, cards);
+  } catch {
+    return null;
+  }
+}
+function buildDeck(deck, cards) {
+  const prefix = classPrefix(deck);
+  const order = cards.map((_card, index) => index);
+  if (deck.dataset.flashcardsShuffle === "true") shuffleOrder(order);
+  const state = { position: 0, revealed: false };
+  const ui = createDeckUi(deck.ownerDocument, prefix);
+  ui.root.tabIndex = 0;
+  const render = () => {
+    const card = cards[order[state.position]];
+    if (!card) return;
+    ui.question.textContent = card.front;
+    ui.answer.textContent = card.back;
+    ui.answer.hidden = !state.revealed;
+    ui.reveal.textContent = state.revealed ? "Hide answer" : "Show answer";
+    ui.reveal.setAttribute("aria-pressed", state.revealed ? "true" : "false");
+    ui.counter.textContent = `${state.position + 1} / ${cards.length}`;
+  };
+  const toggle = () => {
+    state.revealed = !state.revealed;
+    render();
+  };
+  const move = (delta) => {
+    const total = order.length;
+    state.position = (state.position + delta + total) % total;
+    state.revealed = false;
+    render();
+  };
+  const handleReveal = () => toggle();
+  const handlePrev = () => move(-1);
+  const handleNext = () => move(1);
+  const handleShuffle = () => {
+    shuffleOrder(order);
+    state.position = 0;
+    state.revealed = false;
+    render();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      handleNext();
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      handlePrev();
+      return;
+    }
+    if (event.key === " " || event.key === "Spacebar") {
+      if (event.target instanceof HTMLButtonElement) return;
+      event.preventDefault();
+      toggle();
+    }
+  };
+  ui.reveal.addEventListener("click", handleReveal);
+  ui.prev.addEventListener("click", handlePrev);
+  ui.next.addEventListener("click", handleNext);
+  ui.shuffle.addEventListener("click", handleShuffle);
+  ui.root.addEventListener("keydown", handleKeyDown);
+  const fallback = deck.querySelector(FALLBACK_SELECTOR);
+  deck.insertBefore(ui.root, fallback ?? null);
+  if (fallback) fallback.hidden = true;
+  deck.dataset.flashcards = "ready";
+  render();
+  return () => {
+    ui.reveal.removeEventListener("click", handleReveal);
+    ui.prev.removeEventListener("click", handlePrev);
+    ui.next.removeEventListener("click", handleNext);
+    ui.shuffle.removeEventListener("click", handleShuffle);
+    ui.root.removeEventListener("keydown", handleKeyDown);
+    ui.root.remove();
+    if (fallback) fallback.hidden = false;
+    delete deck.dataset.flashcards;
+  };
+}
+function createDeckUi(doc, prefix) {
+  const root = doc.createElement("div");
+  root.className = `${prefix}__deck`;
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", "Flashcards");
+  const counter = doc.createElement("p");
+  counter.className = `${prefix}__counter`;
+  counter.setAttribute("aria-live", "polite");
+  const card = doc.createElement("div");
+  card.className = `${prefix}__card`;
+  const question = doc.createElement("p");
+  question.className = `${prefix}__question`;
+  const answer = doc.createElement("p");
+  answer.className = `${prefix}__answer`;
+  answer.hidden = true;
+  card.append(question, answer);
+  const controls = doc.createElement("div");
+  controls.className = `${prefix}__controls`;
+  const prev = createButton(doc, prefix, "prev", "Previous card");
+  const reveal = createButton(doc, prefix, "reveal", "Show answer");
+  const next = createButton(doc, prefix, "next", "Next card");
+  const shuffle = createButton(doc, prefix, "shuffle", "Shuffle cards");
+  reveal.setAttribute("aria-pressed", "false");
+  controls.append(prev, reveal, next, shuffle);
+  root.append(counter, card, controls);
+  return { root, counter, question, answer, reveal, prev, next, shuffle };
+}
+function createButton(doc, prefix, action, label) {
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = `${prefix}__button`;
+  button.dataset.flashcardsAction = action;
+  button.textContent = label;
+  return button;
+}
+function readCards(deck) {
+  const script = deck.querySelector(PAYLOAD_SELECTOR);
+  if (!script) throw new Error("Missing flashcards payload");
+  return parsePayload(script.textContent ?? "").cards;
+}
+function parsePayload(raw) {
+  const parsed = JSON.parse(raw);
+  if (!isPayload(parsed)) throw new Error("Invalid flashcards payload");
+  return parsed;
+}
+function isPayload(value) {
+  if (!value || typeof value !== "object") return false;
+  const cards = value.cards;
+  return Array.isArray(cards) && cards.every(isCard);
+}
+function isCard(value) {
+  if (!value || typeof value !== "object") return false;
+  const card = value;
+  return typeof card.front === "string" && typeof card.back === "string";
+}
+function classPrefix(deck) {
+  for (const name of deck.className.split(/\s+/)) {
+    if (name.length > 0) return name;
+  }
+  return DEFAULT_CLASS;
+}
+function shuffleOrder(order) {
+  for (let index = order.length - 1; index > 0; index -= 1) {
+    const swap = Math.floor(Math.random() * (index + 1));
+    const current = order[index];
+    order[index] = order[swap];
+    order[swap] = current;
+  }
+}
+
+// index.ts
+function flashcards(options = {}) {
+  const resolved = resolveFlashcardsOptions(options);
+  const runtime = createFlashcardsRuntime(options);
+  return definePlugin({
+    name: "flashcards",
+    options,
+    validateOptions: validateFlashcardsOptions,
+    extendMarkdownPipeline: (pipeline) => {
+      pipeline.use(remarkFlashcards, { language: resolved.language });
+    },
+    onPostProcessed: (context) => {
+      runtime.track(context.slug, context.content);
+    },
+    onManifestCreated: (context) => {
+      runtime.resolve(context.manifest, context.diagnostics);
+    },
+    assets: [createStyleAsset("flashcards")],
+    clientEntries: [createClientEntry("flashcards", "initFlashcards")]
+  });
+}
+var flashcardsPlugin = flashcards;
+function validateFlashcardsOptions(options) {
+  if (!options) return [];
+  const issues = [];
+  if (options.className !== void 0 && (typeof options.className !== "string" || options.className.trim() === "")) {
+    issues.push({ path: "className", message: "Expected a non-empty string." });
+  }
+  if (options.language !== void 0 && (typeof options.language !== "string" || options.language.trim() === "")) {
+    issues.push({ path: "language", message: "Expected a non-empty string." });
+  }
+  if (options.shuffle !== void 0 && typeof options.shuffle !== "boolean") {
+    issues.push({ path: "shuffle", message: "Expected a boolean." });
+  }
+  if (options.fallback !== void 0 && typeof options.fallback !== "boolean") {
+    issues.push({ path: "fallback", message: "Expected a boolean." });
+  }
+  return issues;
+}
+export {
+  DEFAULT_FLASHCARDS_CLASS,
+  DEFAULT_FLASHCARDS_LANGUAGE,
+  FLASHCARDS_ATTRIBUTE,
+  createFlashcardsPlaceholder,
+  createFlashcardsPlaceholderPattern,
+  createFlashcardsRuntime,
+  decodeFlashcardsSource,
+  encodeFlashcardsSource,
+  flashcards,
+  flashcardsPlugin,
+  initFlashcards,
+  parseFlashcards,
+  remarkFlashcards,
+  renderFlashcards,
+  renderFlashcardsFallback,
+  renderFlashcardsPayload,
+  resolveFlashcardsOptions,
+  splitFlashcardGroups
+};

package/dist/src/init.d.ts

@@ -0,0 +1 @@
+export declare function initFlashcards(root?: ParentNode): () => void;

package/dist/src/options.d.ts

@@ -0,0 +1,4 @@
+import type { FlashcardsOptions, ResolvedFlashcardsOptions } from "./types.js";
+export declare const DEFAULT_FLASHCARDS_CLASS = "rb-flashcards";
+export declare const DEFAULT_FLASHCARDS_LANGUAGE = "flashcards";
+export declare function resolveFlashcardsOptions(options?: FlashcardsOptions): ResolvedFlashcardsOptions;

package/dist/src/parse.d.ts

@@ -0,0 +1,3 @@
+import type { FlashcardsParseResult } from "./types.js";
+export declare function parseFlashcards(source: string): FlashcardsParseResult;
+export declare function splitFlashcardGroups(source: string): string[];

package/dist/src/placeholder.d.ts

@@ -0,0 +1,5 @@
+export declare const FLASHCARDS_ATTRIBUTE = "data-rr-flashcards-spec";
+export declare function encodeFlashcardsSource(source: string): string;
+export declare function decodeFlashcardsSource(encoded: string): string;
+export declare function createFlashcardsPlaceholder(source: string): string;
+export declare function createFlashcardsPlaceholderPattern(): RegExp;

package/dist/src/remark.d.ts

@@ -0,0 +1,6 @@
+import type { Root } from "mdast";
+export declare const FLASHCARDS_DIAGNOSTIC_SOURCE = "@riebeckite/plugin-flashcards";
+export type RemarkFlashcardsOptions = {
+    language?: string;
+};
+export declare function remarkFlashcards(options?: RemarkFlashcardsOptions): (tree: Root, file?: unknown) => void;

package/dist/src/render.d.ts

@@ -0,0 +1,4 @@
+import type { FlashcardsCard, ResolvedFlashcardsOptions } from "./types.js";
+export declare function renderFlashcards(cards: readonly FlashcardsCard[], options: ResolvedFlashcardsOptions): string;
+export declare function renderFlashcardsPayload(cards: readonly FlashcardsCard[]): string;
+export declare function renderFlashcardsFallback(cards: readonly FlashcardsCard[], className?: string): string;

package/dist/src/runtime.d.ts

@@ -0,0 +1,7 @@
+import { type ContentManifest, type Diagnostic, type PostContent } from "@riebeckite/core";
+import type { FlashcardsOptions } from "./types.js";
+export type FlashcardsRuntime = {
+    track(slug: string, content: PostContent): void;
+    resolve(manifest: ContentManifest, diagnostics: Diagnostic[]): void;
+};
+export declare function createFlashcardsRuntime(options: FlashcardsOptions): FlashcardsRuntime;

package/dist/src/types.d.ts

@@ -0,0 +1,28 @@
+export type FlashcardsCard = {
+    front: string;
+    back: string;
+};
+export type FlashcardsOptions = {
+    className?: string;
+    language?: string;
+    shuffle?: boolean;
+    fallback?: boolean;
+};
+export type ResolvedFlashcardsOptions = {
+    className: string;
+    language: string;
+    shuffle: boolean;
+    fallback: boolean;
+};
+export type FlashcardsParseSuccess = {
+    ok: true;
+    cards: FlashcardsCard[];
+};
+export type FlashcardsParseFailure = {
+    ok: false;
+    reason: string;
+};
+export type FlashcardsParseResult = FlashcardsParseSuccess | FlashcardsParseFailure;
+export type FlashcardsPayload = {
+    cards: FlashcardsCard[];
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@riebeckite/plugin-flashcards",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "source": "./index.ts",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "source": "./client.ts",
+      "default": "./dist/client.js"
+    },
+    "./style.css": "./style.css"
+  },
+  "dependencies": {
+    "@types/mdast": "^4.0.4",
+    "unist-util-visit": "^5.1.0",
+    "@riebeckite/core": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "README_ja.md",
+    "dist",
+    "style.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rerurate514/riebeckite.git",
+    "directory": "packages/plugins/flashcards"
+  },
+  "homepage": "https://github.com/Rerurate514/riebeckite#readme",
+  "bugs": {
+    "url": "https://github.com/Rerurate514/riebeckite/issues"
+  },
+  "description": "Interactive flashcard decks from Riebeckite code blocks.",
+  "keywords": [
+    "riebeckite",
+    "plugin",
+    "flashcards",
+    "learning"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "sideEffects": [
+    "./style.css"
+  ],
+  "scripts": {
+    "build": "node ../../../scripts/build_package.mjs"
+  }
+}

package/style.css

@@ -0,0 +1,116 @@
+.rb-flashcards {
+  --rb-flashcards-ink: var(--rb-color-ink, #000000);
+  --rb-flashcards-paper: var(--rb-color-paper, #ffffff);
+  --rb-flashcards-muted: var(--rb-color-muted, #69645c);
+  --rb-flashcards-accent: var(--rb-color-accent, #686868);
+  --rb-flashcards-rule: var(
+    --rb-color-border,
+    color-mix(in srgb, var(--rb-flashcards-ink) 18%, transparent)
+  );
+
+  margin: 1.5rem 0;
+  color: var(--rb-flashcards-ink);
+}
+
+.rb-flashcards__list {
+  display: grid;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rb-flashcards__item {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--rb-flashcards-rule);
+}
+
+.rb-flashcards__front {
+  font-weight: 600;
+  white-space: pre-line;
+}
+
+.rb-flashcards__back {
+  color: var(--rb-flashcards-muted);
+  white-space: pre-line;
+}
+
+.rb-flashcards__deck {
+  display: grid;
+  gap: 1rem;
+  outline-offset: 4px;
+}
+
+.rb-flashcards__deck:focus-visible {
+  outline: 2px solid var(--rb-flashcards-accent);
+}
+
+.rb-flashcards__counter {
+  margin: 0;
+  color: var(--rb-flashcards-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.rb-flashcards__card {
+  padding: 1.25rem 1.5rem;
+  border: 1px solid var(--rb-flashcards-rule);
+}
+
+.rb-flashcards__question {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  line-height: 1.6;
+  white-space: pre-line;
+}
+
+.rb-flashcards__answer {
+  margin: 0.75rem 0 0;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--rb-flashcards-rule);
+  line-height: 1.7;
+  white-space: pre-line;
+}
+
+.rb-flashcards__answer[hidden] {
+  display: none;
+}
+
+.rb-flashcards__controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.rb-flashcards__button {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--rb-flashcards-ink);
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.rb-flashcards__button:hover,
+.rb-flashcards__button:focus-visible {
+  border-color: var(--rb-flashcards-accent);
+  color: var(--rb-flashcards-accent);
+  outline: none;
+}
+
+.rb-flashcards--invalid {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--rb-flashcards-ink);
+  font-size: 0.875rem;
+}
+
+html[data-theme="dark"] .rb-flashcards,
+html.dark .rb-flashcards {
+  --rb-flashcards-ink: var(--rb-color-paper, #ffffff);
+  --rb-flashcards-paper: var(--rb-color-ink, #000000);
+}