slidev-theme-watabegg 1.1.3 → 1.2.0

package/README.md

@@ -1,179 +1,261 @@
 # slidev-theme-watabegg
 
-[![NPM version](https://img.shields.io/npm/v/slidev-theme-watabegg?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-watabegg)
-
-English README (Japanese version: see `README.ja.md`).
-
-## Overview
-Education-focused Slidev theme for exam prep & classroom lessons, optimized for Japanese typography, high readability, structured question hierarchies, and keyboard-centric navigation. Originally built for personal teaching use.
-
-## Features
-- Minimal design specialized for teaching
-- Japanese typography (M PLUS 2) + monospace Fira Code
-- Automatic footer (date + current/total page) on all layouts except `cover` / `image` / `image-scroll`
-- Shortcuts: Enter (next) / Backspace (previous)
-- Layouts: `cover`, `two-cols`, `image`, `image-scroll`, `end`
-- Frontmatter `color` switch: `red | yellow | green | blue | purple`
-- Components: `QuestionList`, `TextBox`, `KaTexReveal`
-- Multi-level labels: circled numbers / Katakana / Hiragana / kanji numerals (1–19) / alphabet / custom
-- Utility classes: `.text-highlight`, `.card`
-- Shiki themes: `vitesse-light` / `vitesse-dark`
-
-## Install
-Add to your slide frontmatter:
+A personal Slidev theme for research presentations and progress reports, with Japanese typography, compact content layouts, and optional larger text.
+
+[日本語ドキュメント](./README.ja.md)
+
+## Requirements and installation
+
+Node.js **22.12+**, Slidev **53+**. This repository uses pnpm **11.1.3**.
+
 ```yaml
 ---
 theme: slidev-theme-watabegg
 ---
 ```
-Local development (cloned repository):
+
+For local development:
+
+```sh
+pnpm install
+pnpm dev
+```
+
+The example deck uses `theme: ./` and demonstrates the theme’s layouts and components.
+
+## Deck configuration
+
 ```yaml
 ---
-theme: ./
+theme: slidev-theme-watabegg
+title: Research progress
+date: '2026/10/05'
+themeConfig:
+  watabegg:
+    color: blue
+    density: research
+    footer:
+      text: Lab meeting · Progress report
 ---
 ```
 
-## Frontmatter Example
+Colors: `red | yellow | green | blue | purple` (default: green). Per-slide `color` overrides the deck setting.
+
+## Density
+
+| Setting | Body | Title | Horizontal / top padding |
+|:--|:--|:--|:--|
+| `research` (default) | 20px | 30px | 28px / 24px |
+| `comfortable` | 24px | 40px | 32px / 32px |
+
+The bottom margin is 36px with a footer and 24px without one. Paragraphs, lists, columns, and cards also adjust their spacing. Headings stay in normal flow. Set `themeConfig.watabegg.density` once for the deck. Per-slide density values are ignored.
+
+## Footer
+
+A small, transparent footer displays the date on the left, optional text in the center, and current / total pages on the right. It is hidden on `cover`, `image`, and `image-scroll` layouts.
+
 ```yaml
-title: Theme Demo
-subtitle: Subtitle
-author: Instructor Name
-date: '2025/08/03'
-color: green # red | yellow | green | blue | purple
-link: 'https://example.com' # optional footer link
-transition: fade
+themeConfig:
+  watabegg:
+    footer:
+      text: Conference presentation
 ```
 
-If `color` is omitted, the default `green` palette is used.
+Center text comes only from `themeConfig.watabegg.footer.text` and stays the same throughout the deck. The other slide footer fields merge with the deck settings. The date falls back to the slide's `date`, then the deck's `date`. Use `footer: false` to hide it on one slide or across the deck. A slide's `footer: true` can enable it when disabled deck-wide on a regular layout. Long footer text is truncated. The viewer footer stays outside slide transitions; overview and export pages retain their own page numbers.
 
-Below: `color: blue` example.
+## Agenda and section layouts
 
-![Frontmatter Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/0.png)
+By default, the agenda is generated from `section` slides in slide order. Agenda numbers and section badges use the same single-level outline. Titles come from `title` in frontmatter or the slide's Markdown heading:
 
-## Layouts
-| Name | Purpose | Notes |
-|------|---------|-------|
-| cover | Title slide | Gradient wave + title/subtitle/author |
-| two-cols | Two columns | Slots: `::left::` / `::right::` |
-| image | Background image | Use `image:` + absolutely placed `TextBox` |
-| image-scroll | Background image (vertical scroll) | Use `image:` with tall background + `TextBox` |
-| end | Ending slide | Simple finish screen |
-
-### two-cols Example
-```markdown
+```yaml
 ---
-layout: two-cols
+layout: agenda
+title: Agenda
 ---
-::left::
-Left
-::right::
-Right
-```
 
-![two-cols Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/1.png)
+---
+layout: section
+title: Background
+---
 
-### image Example
-```markdown
 ---
-layout: image
-image: /path/to/bg.jpg
+layout: section
+title: Methods
 ---
-<TextBox :x="120" :y="160" :width="360">Note</TextBox>
 ```
 
-### image-scroll Example
-```markdown
+This produces **1 Background / 2 Methods**. Reordering section slides updates both the agenda and section numbers. Ordinary content slides are excluded.
+
+To write an outline explicitly, set `agenda` on the **first** agenda slide. All agenda and section slides then share that outline:
+
+```yaml
 ---
-layout: image-scroll
-image: /path/to/long-bg.jpg
-imageScroll:
-  offsetY: -120
+layout: agenda
+title: Agenda
+agenda:
+  - Background
+  - Methods
+  - Results
+agendaActive: 2
 ---
 ```
 
-![image-scroll Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
+Items may be strings or objects with a `title`. Section slides match manual agenda items by their unique title. Use `sectionNumber: 2` on a section slide when titles differ or are repeated. An unmatched section has no number badge. Later agenda slides need only `layout: agenda`; they reuse the first outline.
 
-image-scroll options (frontmatter `imageScroll`):
-- `offsetY`: initial scroll offset from image center in px
+`agendaActive` selects an item by its number. When omitted, an agenda after a section automatically emphasizes that section in bold. All item titles keep the body text color. `agendaActive: 0` disables emphasis.
 
-Controls:
-- Wheel / trackpad: vertical scroll
-- Touch: vertical scroll
+Agenda text is 30px (36px in `comfortable`). All number badges are theme-colored circles with white numbers in M PLUS 2 using tabular numerals. Longer numbers shrink to fit the circle. The outline is inset from the heading, with consistent gaps between chapters. Section slides use a white background, the same numbered badge at a larger size, and a theme-colored underline. Neither layout displays a subtitle. Both accept optional body content.
 
-Example with initial position:
-```markdown
----
-layout: image-scroll
-image: /path/to/long-bg.jpg
-imageScroll:
-  offsetY: 180
----
+The shared outline follows the [USTC theme's section-derived agenda](https://github.com/luocfprime/slidev-theme-ustc/blob/main/utils/sectionModel.ts); no additional theme dependency is required.
+
+## Mermaid
+
+Slidev [supports Mermaid natively](https://sli.dev/features/mermaid.html). The theme uses M PLUS 2, a classic appearance, compact flowchart spacing, and wide, short sequence actor boxes. Mermaid retains its default palette. Diagram-specific YAML configuration can override these defaults; see [Mermaid's sequence configuration](https://mermaid.js.org/syntax/sequenceDiagram.html).
+
+Wrap a single diagram in `DiagramFrame` to fit and center its SVG automatically. It preserves the aspect ratio and leaves room for following paragraphs and references:
+
+````md
+Description above the diagram.
+
+<DiagramFrame>
+
+```mermaid
+flowchart LR
+  A[Input] --> B[Process] --> C[Output]
 ```
 
+</DiagramFrame>
+
+Description below the diagram.
+````
+
+`height` sets the frame's maximum logical slide height (default 260px). `max-scale` limits scale relative to the original SVG (default 1, so small diagrams are not enlarged). Use these props instead of combining automatic fitting with the fence's `scale` option. Shrinking also shrinks labels. To align flowchart node heights, use matching shapes and label line counts; the theme does not alter the graph's internal geometry.
+
+The example includes a complex flowchart with matching rectangular nodes and a wide sequence diagram, both between paragraphs.
+
+## Other layouts
+
+| Layout | Usage |
+|:--|:--|
+| `cover` | Wave background with `title`, `subtitle`, `author`, `date` |
+| `two-cols` | Optional `title` and `::left::` / `::right::` slots |
+| `image` | Background from `image:` with optional annotations |
+| `image-scroll` | Wheel / touch scrolling, initial `imageScroll.offsetY` |
+| `end` | Custom `title` and optional body; no return link |
+
+Slidev's built-in layouts such as `default` and `center` remain available. Colors can vary by slide. Density and the footer caption are deck-wide settings. Overview thumbnails and exports retain the appropriate footer for each slide. Markdown tables have a bottom margin of twice the paragraph spacing (20px by default).
+
 ## Components
+
+### FigureGrid
+
+Display **2–4 images** in a single row with one shared caption. Each image occupies a square box and preserves its aspect ratio without cropping. The default maximum height of 380 logical pixels includes the caption and before/after text; image sizes adapt to the remaining height and row width.
+
+```vue
+<FigureGrid
+  :images="[{ src: '/plots/a.png', alt: 'Result A' }, { src: '/plots/b.png', alt: 'Result B' }]"
+  caption="Figure 1. Comparison"
+>
+  <template #before><p>First line.<br>Second line.</p></template>
+  <template #after><p>First note.<br>Second note.</p></template>
+</FigureGrid>
+```
+
+The `before` and `after` slots allow 2–3 lines each. The `caption` slot replaces the caption prop and can contain `Cite`. Optional `height` further limits the total size. Use normal flow layouts; long text and references leave less space for images.
+
+### SmallText
+
+Supplementary text at 16px (`research`) or 18px (`comfortable`). It renders a block by default; `inline` renders a span.
+
+```vue
+<SmallText><p>Supplementary explanation.</p></SmallText>
+<p>Body text <SmallText inline>(additional note)</SmallText></p>
+```
+
+### SlideReferences and Cite
+
+One bibliography panel per slide, at 11px in muted gray above the footer. Its measured height adds bottom padding to normal flow content. Long URLs wrap. Absolute annotations need their own positioning.
+
+```vue
+<p>Source text<Cite :number="1" /></p>
+<SlideReferences :items="[
+  { number: 1, type: 'web', title: 'Slidev Documentation', url: 'https://sli.dev/', accessed: '2026-10-05' },
+  { number: 2, type: 'book', title: 'Pattern Recognition and Machine Learning', authors: ['Christopher M. Bishop'], publisher: 'Springer', year: 2006 },
+  { number: 3, type: 'article', title: 'Attention Is All You Need', authors: ['Ashish Vaswani et al.'], venue: 'NeurIPS', year: 2017, url: 'https://arxiv.org/abs/1706.03762' }
+]" />
+```
+
+| Type | Required fields | Optional fields |
+|:--|:--|:--|
+| All | `number`: unique positive integer in the panel; `type`; `title` | — |
+| `web` | `url`, `accessed` | `authors` |
+| `book` | `authors`, `year`, `publisher` | `url`, `accessed` |
+| `article` | `authors`, `year`, `venue` | `url`, `accessed` |
+
+Authors are a nonempty array of names; year is a positive integer. URLs must be absolute HTTP(S) URLs. Access dates use valid `YYYY-MM-DD` dates. Invalid data or duplicate numbers produce a visible authoring error. Entries use a fixed order: authors, title, publisher/venue, year, access date, URL. Metadata is plain text.
+
+`Cite` is optional and displays a small raised `[1]`. Clicking it or pressing Enter focuses the matching reference **on the same slide** without scrolling or changing slides. Assign numbers explicitly and reuse them consistently across the deck; numbering is not automatic. The bibliography is separate from the deck-wide footer caption.
+
 ### QuestionList
-Nested questions/answers with per-level styles and Markdown rendering.
+
+Nested questions with Markdown, per-level labels, and KaTeX formulas:
+
 ```vue
 <QuestionList
-  :items="['First **OK**', { text: 'Second', items: ['Child A','Child B'] }]"
-  :styles="['decimal-circle','katakana-paren','loweralpha-dot']"
-  :start="[1,1,'c']"
+  :items="['First **item**', { text: 'Second', items: ['A', 'B'] }]"
+  :styles="['decimal-circle', 'katakana-paren', 'loweralpha-dot']"
+  :start="[1, 1, 'c']"
 />
 ```
-Counter types: `decimal | hiragana | katakana | kanji | upperalpha | loweralpha | none`  
-Decorators: `circle | square | paren | dot | q | big-q | none`  
-If an item includes a `label`, it overrides the computed label.
 
-![QuestionList Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/3.png)
+Counters: `decimal | hiragana | katakana | kanji | upperalpha | loweralpha | none`. Decorators: `circle | square | paren | dot | q | big-q | none`. An item's `label` overrides the generated label. Formula items support `formula` and `block`. Raw HTML is escaped; links accept HTTP(S), mailto, tel, and supported relative URLs.
 
 ### TextBox
-Absolutely positioned overlay (useful on `image` / `image-scroll` or for callouts).
+
+Absolute annotations on image slides:
+
 ```vue
-<TextBox :x="100" :y="220" :width="400" textBg="green" v-click="1">Memo</TextBox>
+<TextBox :x="100" :y="220" :width="400" textBg="green">Annotation</TextBox>
 ```
-Props: `x`, `y`, `width`, `height`, `textBg`, `color`, `vClick`
+
+Props: `x`, `y`, `width`, `height`, `textBg`, `color`, `vClick`.
 
 ### KaTexReveal
-KaTeX renderer to ensure math always draws. Slidev auto-registers `components/*.vue`, so drop it directly into Markdown or `QuestionList` items that contain TeX.
+
 ```vue
-<KaTexReveal formula="\\int_0^{2\\pi} \\sin x\\,dx = 0" block class="text-2xl" />
 <KaTexReveal formula="E = mc^2" :block="false" v-click="1" />
 ```
-Props: `formula` (required), `block` (default `false`), `tag` (auto `div`/`span`), other attrs (`class`, `v-click`, etc.) are forwarded.
 
-![KaTeX Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/4.png)
+Required `formula`, optional `block` (default false) and `tag`. Attributes such as `class` and `v-click` are forwarded.
 
-## Footer & Shortcuts
-- Footer (except on `cover` / `image` / `image-scroll`): shows `date` + current/total pages.
-- Enter: next fragment or slide.
-- Backspace: previous fragment or slide.
+## Embedded viewer navigation
 
-## Utility Classes
-- `.text-highlight` line-marker style highlight
-- `.card` rounded box with padding and border
+The legacy `link` field no longer adds a footer or end-slide link. For embedded slides, explicitly add a return action to Slidev's viewer controls:
 
-![Utility Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
+```yaml
+themeConfig:
+  watabegg:
+    navigation:
+      href: 'https://example.com/research'
+      label: Back to presentations
+```
+
+Move the pointer near the bottom-left to show the controls. The link targets `_top` to leave the iframe. It is outside the slide and excluded from exports. Empty or unsafe URLs produce no link.
 
 ## Development
-```bash
-pnpm install
+
+```sh
 pnpm dev
+pnpm dev:polling  # Linux watcher-limit fallback
+pnpm typecheck
+pnpm run lint
+pnpm format:check
+pnpm check       # tests, types, lint, formatting, build, package contents
 pnpm build
 pnpm export
 pnpm screenshot
 ```
 
-## FAQ
-**Q. Do I need to configure fonts manually?**  
-No. Google Fonts are loaded inside the theme.
-
-**Q. How can I remove the footer?**  
-Override `global-bottom.vue` in your own custom theme.
-
-**Q. How do I change the numbering start?**  
-Use `:start="[1,'c']"` (array per hierarchy level).
-
-## See Also
-Japanese documentation: `README.ja.md`
+Use `pnpm run lint` explicitly because pnpm 11 also has a built-in lint command. CI additionally audits production dependencies. TypeScript stays on 6.x for vue-tsc compatibility. Markdown-it 14 is used for Slidev 53's Comark adapter, which imports a private module absent in Markdown-it 15. FloatingVue is kept at 5.2.2 for Shiki Twoslash compatibility, and transitive DOMPurify copies are upgraded to 3.4.16. For release 1.2.0, `@slidev/types` moved to `devDependencies` by exporting setup functions directly with type-only imports and `satisfies` checks, without altering settings or shortcuts. As a result, the production dependency graph no longer includes the unfixed [braces advisory](https://github.com/advisories/GHSA-vfj7-8cjw-p6xm), and production audits remain enabled without exceptions. Note that development dependencies still include `braces` through Slidev's build tooling.
 
-Happy teaching! 🎓
+Fonts: M PLUS 2 / Fira Code. Shiki: vitesse-light / vitesse-dark. Utilities: `.text-highlight`, `.card`. Shortcuts: **Enter** next slide / fragment, **Backspace** previous.

package/components/AgendaList.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { AgendaItem } from '../utils/agenda'
+import SectionNumber from './SectionNumber.vue'
+
+defineProps<{ items: AgendaItem[]; active?: string }>()
+</script>
+
+<template>
+  <ol class="agenda-list">
+    <li v-for="item in items" :key="item.number" class="agenda-item">
+      <div
+        class="agenda-row"
+        :class="{ 'is-active': active === item.number }"
+        :aria-current="active === item.number ? 'step' : undefined"
+      >
+        <SectionNumber :number="item.number" />
+        <span>{{ item.title }}</span>
+      </div>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.agenda-list {
+  --section-number-size: var(--watabegg-agenda-badge-size);
+  display: grid;
+  gap: 24px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.agenda-item {
+  margin: 0;
+  padding: 0;
+}
+
+.agenda-row {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  color: var(--slidev-theme-text);
+  line-height: 1.35;
+}
+
+.agenda-row.is-active {
+  font-weight: 600;
+}
+</style>

package/components/Cite.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref, unref } from 'vue'
+import { useSlideContext } from '@slidev/client'
+
+defineProps<{ number: number }>()
+const { $page } = useSlideContext()
+const root = ref<HTMLAnchorElement | null>(null)
+
+function focusReference(number: number) {
+  const page = root.value?.closest('.slidev-page')
+  page?.querySelector<HTMLElement>(`[data-reference-number="${number}"]`)?.focus({ preventScroll: true })
+}
+</script>
+
+<template>
+  <a ref="root" class="citation-label" :href="`#reference-${unref($page)}-${number}`" :aria-label="`参考文献 ${number}`" @click.prevent="focusReference(number)">[{{ number }}]</a>
+</template>
+
+<style scoped>
+.citation-label {
+  font-size: 0.75em;
+  line-height: 1;
+  vertical-align: super;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  margin-left: 0.15em;
+}
+</style>

package/components/DiagramFrame.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { fitDiagram } from '../utils/figure'
+import { useAvailableHeight } from '../utils/useAvailableHeight'
+
+const props = withDefaults(defineProps<{ height?: number; maxScale?: number }>(), {
+  height: 260,
+  maxScale: 1,
+})
+const root = ref<HTMLElement | null>(null)
+const height = useAvailableHeight(root, computed(() => props.height))
+let resize: ResizeObserver | undefined
+let frame = 0
+let mounted = false
+const observers = new Map<Node, MutationObserver>()
+
+function schedule() {
+  if (!mounted || frame) return
+  frame = requestAnimationFrame(() => {
+    frame = 0
+    fit()
+  })
+}
+
+function inspect(node: HTMLElement | ShadowRoot) {
+  if (!observers.has(node)) {
+    const observer = new MutationObserver(schedule)
+    observer.observe(node, { childList: true, subtree: true, attributes: true, attributeFilter: ['viewBox', 'width', 'height', 'style'] })
+    observers.set(node, observer)
+  }
+  const svgs = [...node.querySelectorAll<SVGSVGElement>('svg[viewBox]')]
+  for (const child of node.querySelectorAll('*')) {
+    if (child.shadowRoot) svgs.push(...inspect(child.shadowRoot))
+  }
+  return svgs
+}
+
+function fit() {
+  const element = root.value
+  if (!element) return
+  for (const svg of inspect(element)) {
+    const viewBox = svg.viewBox.baseVal
+    const size = fitDiagram(viewBox.width, viewBox.height, element.clientWidth, element.clientHeight, props.maxScale)
+    for (const [name, value] of Object.entries(size)) {
+      const text = String(value)
+      if (svg.getAttribute(name) !== text) svg.setAttribute(name, text)
+    }
+    if (svg.style.maxWidth !== 'none') svg.style.maxWidth = 'none'
+    if (svg.style.display !== 'block') svg.style.display = 'block'
+  }
+}
+
+onMounted(() => {
+  mounted = true
+  resize = new ResizeObserver(schedule)
+  if (root.value) resize.observe(root.value)
+  schedule()
+})
+watch(() => props.maxScale, schedule)
+onUnmounted(() => {
+  mounted = false
+  cancelAnimationFrame(frame)
+  resize?.disconnect()
+  for (const observer of observers.values()) observer.disconnect()
+})
+</script>
+
+<template>
+  <div ref="root" class="diagram-frame" :style="{ height: `${height}px` }">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.diagram-frame {
+  display: grid;
+  place-items: center;
+  min-height: 0;
+  margin: 12px 0;
+  line-height: 0;
+}
+
+.diagram-frame :deep(.mermaid) {
+  line-height: 0;
+}
+
+.diagram-frame :deep(pre) {
+  max-height: 100%;
+  overflow: auto;
+  line-height: 1.4;
+}
+</style>

package/components/FigureGrid.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useAvailableHeight } from '../utils/useAvailableHeight'
+
+interface FigureImage {
+  src: string
+  alt: string
+}
+
+const props = withDefaults(defineProps<{ images: FigureImage[]; caption?: string; height?: number }>(), {
+  caption: '',
+  height: 380,
+})
+const root = ref<HTMLElement | null>(null)
+const plots = ref<HTMLElement | null>(null)
+const height = useAvailableHeight(root, computed(() => props.height))
+const side = ref(0)
+const validCount = computed(() => props.images.length >= 2 && props.images.length <= 4)
+let resize: ResizeObserver | undefined
+
+function measure() {
+  const element = plots.value
+  if (!element || !validCount.value) return
+  const gap = Number.parseFloat(getComputedStyle(element).gap)
+  side.value = Math.max(0, Math.min(element.clientHeight, (element.clientWidth - gap * (props.images.length - 1)) / props.images.length))
+}
+
+onMounted(() => {
+  resize = new ResizeObserver(measure)
+  if (plots.value) resize.observe(plots.value)
+  measure()
+})
+watch(() => props.images.length, () => nextTick(measure))
+onUnmounted(() => resize?.disconnect())
+</script>
+
+<template>
+  <div v-if="!validCount" class="figure-error">FigureGridには画像を2〜4枚指定してください。</div>
+  <div v-else ref="root" class="figure-grid" :style="{ height: `${height}px` }">
+    <div v-if="$slots.before" class="figure-copy"><slot name="before" /></div>
+    <figure class="figure-group">
+      <div ref="plots" class="figure-images" :style="{ '--figure-side': `${side}px` }">
+        <img
+          v-for="(image, index) in images"
+          :key="index"
+          :src="image.src"
+          :alt="image.alt"
+          class="figure-image"
+        />
+      </div>
+      <figcaption v-if="caption || $slots.caption" class="figure-caption">
+        <slot name="caption">{{ caption }}</slot>
+      </figcaption>
+    </figure>
+    <div v-if="$slots.after" class="figure-copy"><slot name="after" /></div>
+  </div>
+</template>
+
+<style scoped>
+.figure-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.figure-copy {
+  flex: none;
+}
+
+.figure-copy :deep(p),
+.figure-caption :deep(p) {
+  margin: 0;
+}
+
+.figure-group {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  margin: 0;
+}
+
+.figure-images {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  min-height: 0;
+}
+
+.figure-image {
+  flex: none;
+  width: var(--figure-side);
+  height: var(--figure-side);
+  object-fit: contain;
+}
+
+.figure-caption {
+  flex: none;
+  color: var(--slidev-theme-text-secondary);
+  font-size: var(--watabegg-small-text-size);
+  line-height: 1.35;
+  text-align: center;
+}
+</style>