From d482f4c74b3d6b7ace2899db75b428084a74d2b8 Mon Sep 17 00:00:00 2001
From: konojunya <junya03dance@gmail.com>
Date: Sun, 6 Sep 2026 12:22:00 +0900
Subject: [PATCH] Expand built-in documentation examples in an accessible
 dialog

---
 README.md                                     |   2 +-
 .../theme/components/ExampleGallery.vue       |  44 +-----
 .../theme/components/ExampleLightbox.vue      |  56 +++++++
 .../theme/components/ExamplePreview.vue       |  25 ++-
 docs/.vitepress/theme/style.css               | 145 +++++++++++-------
 scripts/docs-source.json                      |   4 +-
 scripts/image-dialog.mjs                      |  31 ++++
 scripts/image-dialog.test.mjs                 |  77 ++++++++++
 scripts/runtime-examples.test.mjs             |  15 ++
 scripts/validate-docs-output.mjs              |  16 +-
 10 files changed, 311 insertions(+), 104 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/ExampleLightbox.vue
 create mode 100644 scripts/image-dialog.mjs
 create mode 100644 scripts/image-dialog.test.mjs

diff --git a/README.md b/README.md
index 02e2f9b..74d262a 100644
--- a/README.md
+++ b/README.md
@@ -111,7 +111,7 @@ Authentication, persistence, collaboration, and paid themes remain outside this
 
 The editor keeps a native textarea as the input surface and layers Shiki presentation behind it. Highlighting consumes the raw `@stack-sh/language/grammar` export and does not determine whether source is valid. The Web-owned Shiki themes map grammar scopes to accessible light and dark colors. Validation and diagnostic guidance continue to come only from `@stack-sh/engine`.
 
-Language intelligence runs locally through `@stack-sh/engine` 0.7.0 WebAssembly; it does not start an LSP server or send source to a server. Suggestions follow typing or `Ctrl Space`; use arrow keys to choose, `Enter` or `Tab` to accept, and `Escape` to dismiss. The Context panel follows the caret or pointer. Imported provider packs supply their icon catalog to the same engine APIs. The adapter converts browser UTF-16 selections to engine source positions, rejects stale document results, and suspends completion during IME composition. Diagnostics and preview refresh from the same source snapshot after editing, while explicit actions remain available.
+Language intelligence runs locally through the pinned `@stack-sh/engine` WebAssembly package; it does not start an LSP server or send source to a server. Suggestions follow typing or `Ctrl Space`; use arrow keys to choose, `Enter` or `Tab` to accept, and `Escape` to dismiss. The Context panel follows the caret or pointer. Imported provider packs supply their icon catalog to the same engine APIs. The adapter converts browser UTF-16 selections to engine source positions, rejects stale document results, and suspends completion during IME composition. Diagnostics and preview refresh from the same source snapshot after editing, while explicit actions remain available.
 
 ## License
 
diff --git a/docs/.vitepress/theme/components/ExampleGallery.vue b/docs/.vitepress/theme/components/ExampleGallery.vue
index 356d142..ee74dbd 100644
--- a/docs/.vitepress/theme/components/ExampleGallery.vue
+++ b/docs/.vitepress/theme/components/ExampleGallery.vue
@@ -12,57 +12,39 @@ const stages: LearningStage[] = ["starter", "intermediate", "advanced"]
 const labels = {
   en: {
     stage: { starter: "Start small", intermediate: "Build fluency", advanced: "Model systems" },
-    packs: "Icon packs",
-    core: "Built-in icons",
-    expected: "Expected output",
     structure: { nodes: "nodes", groups: "groups", edges: "edges" },
-    features: "Syntax features",
     source: "View canonical .stack source",
     contract: "Pinned source",
   },
   ja: {
     stage: { starter: "小さく始める", intermediate: "表現を広げる", advanced: "Systemを描く" },
-    packs: "Icon pack",
-    core: "組み込みicon",
-    expected: "期待する出力",
     structure: { nodes: "node", groups: "group", edges: "edge" },
-    features: "Syntax feature",
     source: "Canonical .stack sourceを見る",
     contract: "Pin済みsource",
   },
   zh: {
     stage: { starter: "从小处开始", intermediate: "扩展表达", advanced: "描述系统" },
-    packs: "图标包",
-    core: "内置图标",
-    expected: "预期输出",
     structure: { nodes: "节点", groups: "分组", edges: "连线" },
-    features: "语法特性",
     source: "查看规范 .stack 源码",
     contract: "固定源版本",
   },
   ko: {
     stage: { starter: "작게 시작하기", intermediate: "표현 넓히기", advanced: "시스템 모델링" },
-    packs: "아이콘 팩",
-    core: "기본 아이콘",
-    expected: "예상 출력",
     structure: { nodes: "노드", groups: "그룹", edges: "엣지" },
-    features: "문법 기능",
     source: "Canonical .stack 소스 보기",
     contract: "고정된 소스",
   },
 } as const
 
 function examplesFor(stage: LearningStage) {
-  return corpus.examples.filter((example) => example.learningStage === stage)
+  return corpus.examples.filter(
+    (example) => example.learningStage === stage && example.providers.length === 0,
+  )
 }
 
 function sourceUrl(source: string) {
   return `https://raw.githubusercontent.com/${exampleCorpusSource.repository}/${exampleCorpusSource.revision}/examples/${source}`
 }
-
-function featureLabel(feature: string) {
-  return feature.replaceAll("-", " ")
-}
 </script>
 
 <template>
@@ -98,17 +80,6 @@ function featureLabel(feature: string) {
             </div>
             <p>{{ example.summary }}</p>
 
-            <div class="stack-example-card__meta">
-              <div>
-                <strong>{{ labels[locale].packs }}</strong>
-                <span>{{ example.providers.join(", ") || labels[locale].core }}</span>
-              </div>
-              <div>
-                <strong>{{ labels[locale].expected }}</strong>
-                <span>{{ example.expected.description }}</span>
-              </div>
-            </div>
-
             <dl class="stack-example-card__counts">
               <div v-for="field in ['nodes', 'groups', 'edges'] as const" :key="field">
                 <dt>{{ labels[locale].structure[field] }}</dt>
@@ -116,15 +87,6 @@ function featureLabel(feature: string) {
               </div>
             </dl>
 
-            <details class="stack-example-card__features">
-              <summary>{{ labels[locale].features }}</summary>
-              <ul>
-                <li v-for="feature in example.features" :key="feature">
-                  {{ featureLabel(feature) }}
-                </li>
-              </ul>
-            </details>
-
             <a class="stack-example-card__source" :href="sourceUrl(example.source)">
               {{ labels[locale].source }}
             </a>
diff --git a/docs/.vitepress/theme/components/ExampleLightbox.vue b/docs/.vitepress/theme/components/ExampleLightbox.vue
new file mode 100644
index 0000000..82c2779
--- /dev/null
+++ b/docs/.vitepress/theme/components/ExampleLightbox.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from "vue"
+import { createImageDialog } from "../../../../scripts/image-dialog.mjs"
+
+const props = defineProps<{ url: string; alt: string; locale: "en" | "ja" | "zh" | "ko" }>()
+const labels = {
+  en: { title: "Expanded diagram", close: "Close", actual: "Actual size", fit: "Fit to screen" },
+  ja: { title: "作例を拡大", close: "閉じる", actual: "実寸で見る", fit: "画面に合わせる" },
+  zh: { title: "放大图表", close: "关闭", actual: "实际大小", fit: "适应屏幕" },
+  ko: { title: "다이어그램 확대", close: "닫기", actual: "실제 크기", fit: "화면에 맞추기" },
+} as const
+const text = computed(() => labels[props.locale])
+const dialog = ref<HTMLDialogElement>()
+const actualSize = ref(false)
+let controller: ReturnType<typeof createImageDialog> | undefined
+onMounted(() => {
+  controller = createImageDialog(dialog.value!, () => (actualSize.value = false))
+})
+watch(
+  () => props.url,
+  () => controller?.close(),
+)
+onUnmounted(() => controller?.dispose())
+function backdrop(event: MouseEvent) {
+  if (event.target !== dialog.value) return
+  const bounds = dialog.value!.getBoundingClientRect()
+  if (
+    event.clientX < bounds.left ||
+    event.clientX > bounds.right ||
+    event.clientY < bounds.top ||
+    event.clientY > bounds.bottom
+  )
+    controller?.close()
+}
+defineExpose({ open: () => controller?.open() })
+</script>
+
+<template>
+  <dialog ref="dialog" class="stack-example-lightbox" :aria-label="text.title" @click="backdrop">
+    <header class="stack-example-lightbox__toolbar">
+      <strong>{{ text.title }}</strong>
+      <button type="button" :aria-pressed="actualSize" @click="actualSize = !actualSize">
+        {{ actualSize ? text.fit : text.actual }}
+      </button>
+      <button type="button" autofocus @click="controller?.close()">{{ text.close }}</button>
+    </header>
+    <div
+      class="stack-example-lightbox__canvas"
+      :class="{ 'is-actual-size': actualSize }"
+      tabindex="0"
+      :aria-label="alt"
+    >
+      <img :src="url" :alt="alt" />
+    </div>
+  </dialog>
+</template>
diff --git a/docs/.vitepress/theme/components/ExamplePreview.vue b/docs/.vitepress/theme/components/ExamplePreview.vue
index 55e52ef..315ef5e 100644
--- a/docs/.vitepress/theme/components/ExamplePreview.vue
+++ b/docs/.vitepress/theme/components/ExamplePreview.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from "vue"
 import { createExamplePreview, type ExamplePreviewState } from "../../../../src/lib/example-preview"
 import { renderExample } from "../../../../src/lib/render-example"
+import ExampleLightbox from "./ExampleLightbox.vue"
 
 const props = defineProps<{
   source: string
@@ -11,6 +12,7 @@ const props = defineProps<{
 }>()
 const labels = {
   en: {
+    enlarge: "Enlarge diagram",
     loading: "Rendering this example on your device…",
     unavailable: "The preview could not be loaded.",
     errors: "This example reported rendering errors.",
@@ -20,6 +22,7 @@ const labels = {
     noScript: "Enable JavaScript to render this example, or read its .stack source.",
   },
   ja: {
+    enlarge: "作例を拡大",
     loading: "この端末で作例を描画しています…",
     unavailable: "プレビューを読み込めませんでした。",
     errors: "作例の描画でエラーが報告されました。",
@@ -29,6 +32,7 @@ const labels = {
     noScript: "JavaScriptを有効にして作例を描画するか、.stackソースをご覧ください。",
   },
   zh: {
+    enlarge: "放大图表",
     loading: "正在您的设备上渲染此示例…",
     unavailable: "无法加载预览。",
     errors: "此示例报告了渲染错误。",
@@ -38,6 +42,7 @@ const labels = {
     noScript: "请启用 JavaScript 渲染此示例，或阅读其 .stack 源码。",
   },
   ko: {
+    enlarge: "다이어그램 확대",
     loading: "이 기기에서 예제를 렌더링하고 있습니다…",
     unavailable: "미리보기를 불러올 수 없습니다.",
     errors: "이 예제에서 렌더링 오류가 보고되었습니다.",
@@ -49,6 +54,7 @@ const labels = {
 } as const
 const text = computed(() => labels[props.locale])
 const element = ref<HTMLElement>()
+const lightbox = ref<InstanceType<typeof ExampleLightbox>>()
 const state = shallowRef<ExamplePreviewState>({ status: "idle" })
 const preview = createExamplePreview(renderExample, (next) => (state.value = next))
 const diagnostics = computed(() => ("result" in state.value ? state.value.result.diagnostics : []))
@@ -89,9 +95,17 @@ onUnmounted(() => {
 <template>
   <div ref="element" class="stack-example-preview" :data-preview-status="state.status">
     <div class="stack-example-preview__image" :aria-busy="state.status === 'loading'">
-      <a v-if="state.status === 'ready'" :href="sourceUrl">
+      <button
+        v-if="state.status === 'ready'"
+        type="button"
+        class="stack-example-preview__enlarge"
+        aria-haspopup="dialog"
+        :aria-label="`${text.enlarge}: ${alt}`"
+        @click="lightbox?.open()"
+      >
         <img :src="state.url" :alt="alt" @error="state = { status: 'unavailable' }" />
-      </a>
+        <span class="stack-example-preview__hint">{{ text.enlarge }} ↗</span>
+      </button>
       <div v-else class="stack-example-preview__fallback">
         <p v-if="state.status === 'loading'" role="status">{{ text.loading }}</p>
         <p v-else-if="state.status === 'unavailable'" role="status">{{ text.unavailable }}</p>
@@ -115,5 +129,12 @@ onUnmounted(() => {
         </li>
       </ul>
     </details>
+    <ExampleLightbox
+      v-if="state.status === 'ready'"
+      ref="lightbox"
+      :url="state.url"
+      :alt="alt"
+      :locale="locale"
+    />
   </div>
 </template>
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 431fb7f..0de1714 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -657,8 +657,91 @@ body {
   place-items: center;
 }
 
-.stack-example-preview__image a {
+.stack-example-preview__enlarge {
   width: 100%;
+  cursor: zoom-in;
+}
+
+.stack-example-preview__hint {
+  display: block;
+  margin-top: 0.5rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.75rem;
+  text-align: right;
+}
+
+.stack-example-lightbox {
+  width: min(90rem, calc(100vw - 2rem));
+  max-width: none;
+  max-height: calc(100dvh - 2rem);
+  padding: 0;
+  margin: auto;
+  overflow: hidden;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 0.5rem;
+}
+
+.stack-example-lightbox[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.stack-example-lightbox::backdrop {
+  background: var(--vp-backdrop-bg-color);
+}
+
+.stack-example-lightbox__toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  font-size: 0.875rem;
+}
+
+.stack-example-lightbox__toolbar strong {
+  margin-right: auto;
+}
+
+.stack-example-lightbox__toolbar button {
+  min-height: 2.75rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 0.375rem;
+  background: var(--vp-c-bg-soft);
+}
+
+.stack-example-lightbox__canvas {
+  display: grid;
+  place-items: center;
+  min-height: 0;
+  padding: 1rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.stack-example-lightbox__canvas img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  max-height: calc(100dvh - 10rem);
+  margin: auto;
+  object-fit: contain;
+}
+
+.stack-example-lightbox__canvas.is-actual-size {
+  display: block;
+}
+
+.stack-example-lightbox__canvas.is-actual-size img {
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
 }
 
 .stack-example-preview__image img {
@@ -727,30 +810,6 @@ body {
   line-height: 1.55;
 }
 
-.stack-example-card__meta {
-  display: grid;
-  gap: 0.625rem;
-  padding-top: 0.875rem;
-  margin-top: 0.875rem;
-  border-top: 1px solid var(--vp-c-divider);
-}
-
-.stack-example-card__meta > div {
-  display: grid;
-  gap: 0.125rem;
-}
-
-.stack-example-card__meta strong,
-.stack-example-card__meta span {
-  font-size: 0.75rem;
-  line-height: 1.45;
-}
-
-.stack-example-card__meta strong {
-  color: var(--vp-c-text-3);
-  font-weight: 500;
-}
-
 .stack-example-card__counts {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -778,35 +837,6 @@ body {
   font-weight: 600;
 }
 
-.stack-example-card__features {
-  margin-top: 0.875rem;
-  color: var(--vp-c-text-2);
-  font-size: 0.75rem;
-}
-
-.stack-example-card__features summary {
-  width: fit-content;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.stack-example-card__features ul {
-  display: flex;
-  padding: 0;
-  margin: 0.625rem 0 0;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  list-style: none;
-}
-
-.stack-example-card__features li {
-  padding: 0.125rem 0.375rem;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 0.25rem;
-  line-height: 1.35;
-}
-
 .stack-example-card__source {
   width: fit-content;
   margin-top: auto;
@@ -816,12 +846,17 @@ body {
 }
 
 .stack-example-gallery a:focus-visible,
-.stack-example-card__features summary:focus-visible {
+.stack-example-gallery button:focus-visible,
+.stack-example-lightbox__canvas:focus-visible {
   outline: 2px solid var(--vp-c-brand-1);
   outline-offset: 3px;
 }
 
 @media (max-width: 639px) {
+  .stack-example-lightbox__toolbar strong {
+    flex-basis: 100%;
+  }
+
   .vp-doc table {
     display: block;
   }
diff --git a/scripts/docs-source.json b/scripts/docs-source.json
index c0b55c7..85e749f 100644
--- a/scripts/docs-source.json
+++ b/scripts/docs-source.json
@@ -1,5 +1,5 @@
 {
   "repository": "stack-sh/docs",
-  "revision": "29c9b54e3b711ce8e5954c40be13d0894383c15b",
-  "manifestSha256": "d28d90cba1e3eff970206fe7e260f31c2e0eac3231367cefbe945f0f76c5c5e2"
+  "revision": "1a3085d27fae1cf0995e1e6bc0ce55b438791f69",
+  "manifestSha256": "22b0dfca62de756728ead25c8113ffbbefdb3d252136b9d1dcf8aef75accb085"
 }
diff --git a/scripts/image-dialog.mjs b/scripts/image-dialog.mjs
new file mode 100644
index 0000000..3d98dae
--- /dev/null
+++ b/scripts/image-dialog.mjs
@@ -0,0 +1,31 @@
+// Native dialog owns focus trapping, Escape, and focus restoration.
+export function createImageDialog(dialog, reset) {
+  const style = dialog.ownerDocument.documentElement.style
+  let previousOverflow
+  function release() {
+    if (dialog.open) return
+    if (previousOverflow !== undefined) {
+      style.overflow = previousOverflow
+      previousOverflow = undefined
+      reset()
+    }
+  }
+  dialog.addEventListener("close", release)
+  return {
+    open() {
+      if (dialog.open) return
+      dialog.showModal()
+      previousOverflow ??= style.overflow
+      style.overflow = "hidden"
+    },
+    close() {
+      if (dialog.open) dialog.close()
+      release()
+    },
+    dispose() {
+      if (dialog.open) dialog.close()
+      release()
+      dialog.removeEventListener("close", release)
+    },
+  }
+}
diff --git a/scripts/image-dialog.test.mjs b/scripts/image-dialog.test.mjs
new file mode 100644
index 0000000..f1557cf
--- /dev/null
+++ b/scripts/image-dialog.test.mjs
@@ -0,0 +1,77 @@
+import assert from "node:assert/strict"
+import test from "node:test"
+import { createImageDialog } from "./image-dialog.mjs"
+
+function fixture() {
+  const dialog = new EventTarget()
+  const style = { overflow: "auto" }
+  dialog.ownerDocument = { documentElement: { style } }
+  dialog.open = false
+  dialog.showModal = () => {
+    dialog.open = true
+  }
+  dialog.close = () => {
+    dialog.open = false
+    dialog.dispatchEvent(new Event("close"))
+  }
+  let resets = 0
+  const controller = createImageDialog(dialog, () => {
+    resets += 1
+  })
+  return { dialog, style, controller, resets: () => resets }
+}
+
+test("opening locks the page and closing restores its previous overflow", () => {
+  const f = fixture()
+  f.controller.open()
+  assert.equal(f.dialog.open, true)
+  assert.equal(f.style.overflow, "hidden")
+  f.controller.close()
+  assert.equal(f.style.overflow, "auto")
+  assert.equal(f.resets(), 1)
+})
+
+test("repeated open cannot lose the original scroll state", () => {
+  const f = fixture()
+  f.controller.open()
+  f.controller.open()
+  f.controller.close()
+  assert.equal(f.style.overflow, "auto")
+})
+
+test("native Escape dismissal restores scrolling and resets image sizing", () => {
+  const f = fixture()
+  f.controller.open()
+  f.dialog.close()
+  assert.equal(f.style.overflow, "auto")
+  assert.equal(f.resets(), 1)
+})
+
+test("unmounting an open dialog restores scrolling and removes listeners", () => {
+  const f = fixture()
+  f.controller.open()
+  f.controller.dispose()
+  assert.equal(f.dialog.open, false)
+  assert.equal(f.style.overflow, "auto")
+  const resets = f.resets()
+  f.dialog.dispatchEvent(new Event("close"))
+  assert.equal(f.resets(), resets)
+})
+
+test("failed modal activation never locks the page", () => {
+  const f = fixture()
+  f.dialog.showModal = () => {
+    throw new Error("detached dialog")
+  }
+  assert.throws(() => f.controller.open(), /detached/)
+  assert.equal(f.style.overflow, "auto")
+})
+
+test("a delayed close event cannot unlock a reopened dialog", () => {
+  const f = fixture()
+  f.controller.open()
+  f.dialog.dispatchEvent(new Event("close"))
+  assert.equal(f.style.overflow, "hidden")
+  assert.equal(f.resets(), 0)
+  f.controller.dispose()
+})
diff --git a/scripts/runtime-examples.test.mjs b/scripts/runtime-examples.test.mjs
index 3c0af4c..a3282fe 100644
--- a/scripts/runtime-examples.test.mjs
+++ b/scripts/runtime-examples.test.mjs
@@ -19,3 +19,18 @@ test("documentation examples cannot retain pre-rendered SVG counterparts", async
   const scripts = JSON.parse(await readFile("package.json", "utf8")).scripts
   assert.ok(!("examples:generate" in scripts))
 })
+
+test("the Docs gallery only presents self-contained built-in examples", async () => {
+  const gallery = await readFile("docs/.vitepress/theme/components/ExampleGallery.vue", "utf8")
+  assert.match(gallery, /example\.providers\.length === 0/)
+  assert.doesNotMatch(gallery, /__meta|__features|labels\[locale\]\.packs|expected\.description/)
+  assert.match(gallery, /stack-example-card__source/)
+})
+
+test("ready previews open a native image dialog instead of navigating to source", async () => {
+  const preview = await readFile("docs/.vitepress/theme/components/ExamplePreview.vue", "utf8")
+  assert.match(preview, /<button\s+v-if="state.status === 'ready'"/)
+  assert.match(preview, /aria-haspopup="dialog"/)
+  assert.match(preview, /<ExampleLightbox/)
+  assert.doesNotMatch(preview, /<a v-if="state.status === 'ready'"/)
+})
diff --git a/scripts/validate-docs-output.mjs b/scripts/validate-docs-output.mjs
index 1176995..9c6d72e 100644
--- a/scripts/validate-docs-output.mjs
+++ b/scripts/validate-docs-output.mjs
@@ -121,9 +121,19 @@ for (const locale of ["", "ja/", "zh/", "ko/"]) {
   const cards = html.match(/class="stack-example-card"/g)?.length ?? 0
   const previews = html.match(/class="stack-example-preview"/g)?.length ?? 0
 
-  if (cards !== 9) throw new Error(`${page} contains ${cards} example cards instead of 9`)
-  if (previews !== 9) {
-    throw new Error(`${page} contains ${previews} runtime example previews instead of 9`)
+  if (cards !== 4) throw new Error(`${page} contains ${cards} built-in example cards instead of 4`)
+  if (previews !== 4) {
+    throw new Error(`${page} contains ${previews} runtime example previews instead of 4`)
+  }
+  if (
+    /example-(aws-serverless-checkout|gcp-data-service|azure-event-platform|github-delivery-workflow|mixed-provider-platform)"/.test(
+      html,
+    )
+  ) {
+    throw new Error(`${page} must not present examples requiring provider packs`)
+  }
+  if (/stack-example-card__(meta|features)/.test(html)) {
+    throw new Error(`${page} retains removed example details`)
   }
   if (/src="[^"]*\/examples\/[^"]+\.svg/.test(html)) {
     throw new Error(`${page} references a pre-rendered example SVG`)