diff --git a/README.md b/README.md
index 37a7d0c..3883329 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,9 @@ Formatting and linting use Oxfmt and Oxlint. The production build compiles the R
 
 CI additionally builds the Stack CLI revision pinned in [`scripts/docs-validation.config.mjs`](./scripts/docs-validation.config.mjs) with its minimum supported Rust version, then runs `npm run docs:smoke` through `STACK_CLI_BIN`. This checks the documented version, help surface, and safe executable examples without adding Rust to normal Web builds. Intentional locale or execution differences must be declared in the same configuration with a non-empty reason; the validator rejects stale exceptions.
 
-The example gallery is generated from the public specification commit pinned in [`scripts/example-corpus.config.mjs`](./scripts/example-corpus.config.mjs). [`example-corpus`](./example-corpus) is a hermetic snapshot for the Playground and documentation build; CI checks every catalog, schema, and `.stack` source byte against the pinned provider commit. `npm run examples:check` checks and renders all examples, resolves every namespaced icon against the published provider catalog, and detects stale SVG thumbnails. To intentionally advance the corpus, check out the new pinned specification revision, run `STACK_SPECIFICATION_ROOT=/path/to/specification npm run examples:sync`, and then run `npm run examples:generate`.
+The example gallery loads canonical `.stack` sources from the public specification commit pinned in [`scripts/example-corpus.config.mjs`](./scripts/example-corpus.config.mjs). [`example-corpus`](./example-corpus) is a hermetic source snapshot shared with the Playground; CI checks every catalog, schema, and `.stack` source byte against the pinned provider commit. Previews render on the visitor's device with the same pinned WASM engine and adapter as the Playground. They are not checked-in or build-generated SVGs, so updating the site's engine also updates its example rendering. The browser loads examples near the viewport, displays engine SVG as a Blob-backed image, and releases image URLs on navigation. A source link remains available without JavaScript; operational failures offer retry, and engine diagnostics are shown separately. Provider artwork is not fetched or redistributed by the gallery: examples use the engine's fallback shapes unless the caller explicitly supplies icon packs.
+
+`npm run examples:check` checks and renders all examples in memory, resolves every namespaced icon against the published provider catalog, and checks safe SVG output without writing images. To intentionally advance the corpus, check out the new pinned specification revision, run `STACK_SPECIFICATION_ROOT=/path/to/specification npm run examples:sync`, then run `npm run examples:check`. Approved engine regression snapshots are separate test artifacts, not documentation previews.
 
 ## Brand mark
 
diff --git a/docs/.vitepress/theme/components/ExampleGallery.vue b/docs/.vitepress/theme/components/ExampleGallery.vue
index 3e169e3..356d142 100644
--- a/docs/.vitepress/theme/components/ExampleGallery.vue
+++ b/docs/.vitepress/theme/components/ExampleGallery.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import corpus from "../../../../example-corpus/catalog.json"
 import { exampleCorpusSource } from "../../../../scripts/example-corpus.config.mjs"
+import ExamplePreview from "./ExamplePreview.vue"
 
 type Locale = "en" | "ja" | "zh" | "ko"
 type LearningStage = "starter" | "intermediate" | "advanced"
@@ -84,13 +85,12 @@ function featureLabel(feature: string) {
           class="stack-example-card"
           :aria-labelledby="`example-${example.id}`"
         >
-          <a class="stack-example-card__preview" :href="sourceUrl(example.source)">
-            <img
-              :src="`/docs/examples/${example.id}.svg`"
-              :alt="example.thumbnail.alt"
-              loading="lazy"
-            />
-          </a>
+          <ExamplePreview
+            :source="example.source"
+            :source-url="sourceUrl(example.source)"
+            :alt="example.thumbnail.alt"
+            :locale="locale"
+          />
           <div class="stack-example-card__body">
             <div class="stack-example-card__heading">
               <h3 :id="`example-${example.id}`">{{ example.title }}</h3>
diff --git a/docs/.vitepress/theme/components/ExamplePreview.vue b/docs/.vitepress/theme/components/ExamplePreview.vue
new file mode 100644
index 0000000..55e52ef
--- /dev/null
+++ b/docs/.vitepress/theme/components/ExamplePreview.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+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"
+
+const props = defineProps<{
+  source: string
+  sourceUrl: string
+  alt: string
+  locale: "en" | "ja" | "zh" | "ko"
+}>()
+const labels = {
+  en: {
+    loading: "Rendering this example on your device…",
+    unavailable: "The preview could not be loaded.",
+    errors: "This example reported rendering errors.",
+    diagnostics: "Rendering diagnostics (provider icons may use fallback shapes)",
+    retry: "Retry preview",
+    source: "View .stack source",
+    noScript: "Enable JavaScript to render this example, or read its .stack source.",
+  },
+  ja: {
+    loading: "この端末で作例を描画しています…",
+    unavailable: "プレビューを読み込めませんでした。",
+    errors: "作例の描画でエラーが報告されました。",
+    diagnostics: "描画の診断（Provider iconは代替図形になる場合があります）",
+    retry: "プレビューを再試行",
+    source: ".stackソースを見る",
+    noScript: "JavaScriptを有効にして作例を描画するか、.stackソースをご覧ください。",
+  },
+  zh: {
+    loading: "正在您的设备上渲染此示例…",
+    unavailable: "无法加载预览。",
+    errors: "此示例报告了渲染错误。",
+    diagnostics: "渲染诊断（服务商图标可能显示为替代图形）",
+    retry: "重试预览",
+    source: "查看 .stack 源码",
+    noScript: "请启用 JavaScript 渲染此示例，或阅读其 .stack 源码。",
+  },
+  ko: {
+    loading: "이 기기에서 예제를 렌더링하고 있습니다…",
+    unavailable: "미리보기를 불러올 수 없습니다.",
+    errors: "이 예제에서 렌더링 오류가 보고되었습니다.",
+    diagnostics: "렌더링 진단 (제공자 아이콘이 대체 도형으로 표시될 수 있음)",
+    retry: "미리보기 다시 시도",
+    source: ".stack 소스 보기",
+    noScript: "JavaScript를 활성화하여 예제를 렌더링하거나 .stack 소스를 읽어 보세요.",
+  },
+} as const
+const text = computed(() => labels[props.locale])
+const element = ref<HTMLElement>()
+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 : []))
+let observer: IntersectionObserver | undefined
+let activated = false
+
+function load() {
+  activated = true
+  observer?.disconnect()
+  void preview.load(props.source)
+}
+
+onMounted(() => {
+  if (!("IntersectionObserver" in window)) {
+    load()
+    return
+  }
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) load()
+    },
+    { rootMargin: "200px" },
+  )
+  if (element.value) observer.observe(element.value)
+})
+watch(
+  () => props.source,
+  () => {
+    if (activated) load()
+  },
+)
+onUnmounted(() => {
+  observer?.disconnect()
+  preview.dispose()
+})
+</script>
+
+<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">
+        <img :src="state.url" :alt="alt" @error="state = { status: 'unavailable' }" />
+      </a>
+      <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>
+        <p v-else-if="state.status === 'diagnostics'" role="status">{{ text.errors }}</p>
+        <a :href="sourceUrl">{{ text.source }}</a>
+        <button
+          v-if="state.status === 'unavailable' || state.status === 'diagnostics'"
+          type="button"
+          @click="load"
+        >
+          {{ text.retry }}
+        </button>
+        <noscript>{{ text.noScript }}</noscript>
+      </div>
+    </div>
+    <details v-if="diagnostics.length" class="stack-example-preview__diagnostics">
+      <summary>{{ text.diagnostics }}</summary>
+      <ul>
+        <li v-for="(diagnostic, index) in diagnostics" :key="index">
+          <code>{{ diagnostic.code }}</code> {{ diagnostic.message }}
+        </li>
+      </ul>
+    </details>
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index bead330..69c0b99 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -632,7 +632,7 @@ body {
   grid-template-rows: auto 1fr;
 }
 
-.stack-example-card__preview {
+.stack-example-preview__image {
   display: grid;
   min-height: 12rem;
   padding: 1rem;
@@ -641,7 +641,11 @@ body {
   place-items: center;
 }
 
-.stack-example-card__preview img {
+.stack-example-preview__image a {
+  width: 100%;
+}
+
+.stack-example-preview__image img {
   display: block;
   width: 100%;
   height: 11rem;
@@ -649,6 +653,29 @@ body {
   object-fit: contain;
 }
 
+.stack-example-preview__fallback {
+  display: grid;
+  align-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: 11rem;
+  overflow: auto;
+  text-align: center;
+}
+
+.stack-example-preview__fallback button {
+  padding: 0.5rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 0.375rem;
+  color: var(--vp-c-text-1);
+}
+
+.stack-example-preview__diagnostics {
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  overflow-wrap: anywhere;
+}
+
 .stack-example-card__body {
   display: flex;
   min-width: 0;
diff --git a/docs/public/examples/application-and-data.svg b/docs/public/examples/application-and-data.svg
deleted file mode 100644
index 49ea47a..0000000
--- a/docs/public/examples/application-and-data.svg
+++ /dev/null
@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="443.7" height="174.6" viewBox="0 0 443700 174600" role="img" aria-labelledby="stack-title stack-description" data-engine-version="0.7.0" data-theme-id="light" data-theme-version="0.5.0" data-theme-revision="sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53">
-  <title id="stack-title">Application and datastore</title>
-  <desc id="stack-description">Architecture diagram with 2 nodes, 0 groups, and 1 relationship.</desc>
-  <metadata>stack-engine 0.7.0; language 1.0; theme 0.5.0 at sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53</metadata>
-  <rect x="0" y="0" width="443700" height="174600" fill="#FAF9F6"/>
-  <defs>
-    <marker id="stack-arrow" markerUnits="userSpaceOnUse" markerWidth="6500" markerHeight="6500" refX="9000" refY="5000" viewBox="0 0 10000 10000" orient="auto-start-reverse">
-      <path d="M 0 0 L 10000 5000 L 0 10000 z" fill="#57534E"/>
-    </marker>
-  </defs>
-  <text x="32000" y="50200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Application and datastore</text>
-  <g data-stack-layer="groups">
-  </g>
-  <g data-stack-layer="edges">
-    <g role="group" aria-label="Application flows to Primary database: SQL" data-edge-kind="data" data-edge-direction="forward">
-      <title>Application flows to Primary database: SQL</title>
-      <polyline points="192000,106400 216000,106400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-  </g>
-  <g data-stack-layer="nodes">
-    <g role="group" aria-label="Application: Business logic" data-stack-id="app" data-node-kind="service">
-      <title>Application: Business logic</title>
-      <rect x="32000" y="70200" width="160000" height="72400" rx="8000" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="52000" y="94400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="server"><rect x="3" y="3" width="18" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <rect x="3" y="14" width="18" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M7 6.5h.01M7 17.5h.01M11 6.5h7M11 17.5h7" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> </svg>
-      <text x="88000" y="97400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Application</text>
-      <text x="88000" y="116400" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="12000" font-weight="400">Business logic</text>
-    </g>
-    <g role="group" aria-label="Primary database: PostgreSQL" data-stack-id="db" data-node-kind="database">
-      <title>Primary database: PostgreSQL</title>
-      <path d="M 216000 80200 V 132600 C 216000 142600 411700 142600 411700 132600 V 80200 C 411700 70200 216000 70200 216000 80200 Z" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <ellipse cx="313850" cy="80200" rx="97850" ry="10000" fill="none" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="236000" y="94400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-database"><ellipse cx="12" cy="5" rx="8" ry="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M4 5v7c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12v7c0 1.7 3.6 3 8 3s8-1.3 8-3v-7" fill="none" stroke="currentColor" stroke-width="1.5"/> </svg>
-      <text x="272000" y="97400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Primary database</text>
-      <text x="272000" y="116400" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="12000" font-weight="400">PostgreSQL</text>
-    </g>
-  </g>
-  <g data-stack-layer="edge-labels" aria-hidden="true">
-    <g data-edge-label="SQL">
-      <rect x="188100" y="38800" width="31800" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="204000" y="50500" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">SQL</text>
-    </g>
-  </g>
-</svg>
diff --git a/docs/public/examples/aws-serverless-checkout.svg b/docs/public/examples/aws-serverless-checkout.svg
deleted file mode 100644
index 9c5a8f6..0000000
--- a/docs/public/examples/aws-serverless-checkout.svg
+++ /dev/null
@@ -1,142 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="1658.8" height="262.2" viewBox="0 0 1658800 262200" role="img" aria-labelledby="stack-title stack-description" data-engine-version="0.7.0" data-theme-id="light" data-theme-version="0.5.0" data-theme-revision="sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53">
-  <title id="stack-title">AWS serverless checkout</title>
-  <desc id="stack-description">Architecture diagram with 8 nodes, 3 groups, and 7 relationships.</desc>
-  <metadata>stack-engine 0.7.0; language 1.0; theme 0.5.0 at sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53</metadata>
-  <rect x="0" y="0" width="1658800" height="262200" fill="#FAF9F6"/>
-  <defs>
-    <marker id="stack-arrow" markerUnits="userSpaceOnUse" markerWidth="6500" markerHeight="6500" refX="9000" refY="5000" viewBox="0 0 10000 10000" orient="auto-start-reverse">
-      <path d="M 0 0 L 10000 5000 L 0 10000 z" fill="#57534E"/>
-    </marker>
-  </defs>
-  <text x="32000" y="50200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">AWS serverless checkout</text>
-  <g data-stack-layer="groups">
-    <g role="group" aria-label="Edge" data-stack-id="edge">
-      <title>Edge</title>
-      <rect x="216000" y="70200" width="392000" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="240000" y="107200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Edge</text>
-    </g>
-    <g role="group" aria-label="Serverless compute" data-stack-id="compute">
-      <title>Serverless compute</title>
-      <rect x="632000" y="70200" width="578800" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="656000" y="107200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Serverless compute</text>
-    </g>
-    <g role="group" aria-label="Data" data-stack-id="data">
-      <title>Data</title>
-      <rect x="1234800" y="70200" width="392000" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="1258800" y="107200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Data</text>
-    </g>
-  </g>
-  <g data-stack-layer="edges">
-    <g role="group" aria-label="Customer flows to CloudFront: HTTPS" data-edge-kind="request" data-edge-direction="forward">
-      <title>Customer flows to CloudFront: HTTPS</title>
-      <polyline points="192000,150200 192000,160400 240000,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="CloudFront flows to API Gateway: API request" data-edge-kind="request" data-edge-direction="forward">
-      <title>CloudFront flows to API Gateway: API request</title>
-      <polyline points="400000,160400 424000,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="API Gateway flows to Checkout: Invoke" data-edge-kind="request" data-edge-direction="forward">
-      <title>API Gateway flows to Checkout: Invoke</title>
-      <polyline points="584000,160400 656000,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Checkout flows to Orders: Write order" data-edge-kind="data" data-edge-direction="forward">
-      <title>Checkout flows to Orders: Write order</title>
-      <polyline points="816000,160400 816000,196400 1258800,196400 1258800,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Checkout flows to Order events: OrderPlaced" data-edge-kind="event" data-edge-direction="forward">
-      <title>Checkout flows to Order events: OrderPlaced</title>
-      <polyline points="816000,160400 840000,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Order events flows to Fulfillment: Dispatch" data-edge-kind="event" data-edge-direction="forward">
-      <title>Order events flows to Fulfillment: Dispatch</title>
-      <polyline points="1002800,160400 1026800,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Fulfillment flows to Receipts: Archive" data-edge-kind="data" data-edge-direction="forward">
-      <title>Fulfillment flows to Receipts: Archive</title>
-      <polyline points="1186800,160400 1186800,196400 1442800,196400 1442800,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-  </g>
-  <g data-stack-layer="nodes">
-    <g role="group" aria-label="Customer" data-stack-id="customer" data-node-kind="actor">
-      <title>Customer</title>
-      <circle cx="112000" cy="150200" r="80000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="52000" y="138200" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-actor"><circle cx="12" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M5 20c.8-4 3-6 7-6s6.2 2 7 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> </svg>
-      <text x="88000" y="150200" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Customer</text>
-    </g>
-    <g role="group" aria-label="CloudFront" data-stack-id="cdn" data-node-kind="service">
-      <title>CloudFront</title>
-      <rect x="240000" y="124400" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="260000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="296000" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">CloudFront</text>
-    </g>
-    <g role="group" aria-label="API Gateway" data-stack-id="gateway" data-node-kind="service">
-      <title>API Gateway</title>
-      <rect x="424000" y="124400" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="444000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="480000" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">API Gateway</text>
-    </g>
-    <g role="group" aria-label="Checkout" data-stack-id="checkout" data-node-kind="function">
-      <title>Checkout</title>
-      <polygon points="672000,124400 800000,124400 816000,160400 800000,196400 672000,196400 656000,160400" fill="#EEEAE3" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="676000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="712000" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Checkout</text>
-    </g>
-    <g role="group" aria-label="Order events" data-stack-id="events" data-node-kind="queue">
-      <title>Order events</title>
-      <rect x="840000" y="124400" width="162800" height="72000" rx="16000" fill="#EEEAE3" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="860000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="896000" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Order events</text>
-    </g>
-    <g role="group" aria-label="Fulfillment" data-stack-id="fulfillment" data-node-kind="worker">
-      <title>Fulfillment</title>
-      <rect x="1026800" y="124400" width="160000" height="72000" rx="16000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="1046800" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="1082800" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Fulfillment</text>
-    </g>
-    <g role="group" aria-label="Orders" data-stack-id="orders" data-node-kind="database">
-      <title>Orders</title>
-      <path d="M 1258800 134400 V 186400 C 1258800 196400 1418800 196400 1418800 186400 V 134400 C 1418800 124400 1258800 124400 1258800 134400 Z" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <ellipse cx="1338800" cy="134400" rx="80000" ry="10000" fill="none" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="1278800" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="1314800" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Orders</text>
-    </g>
-    <g role="group" aria-label="Receipts" data-stack-id="receipts" data-node-kind="storage">
-      <title>Receipts</title>
-      <rect x="1442800" y="124400" width="160000" height="72000" rx="4000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="1462800" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="1498800" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Receipts</text>
-    </g>
-  </g>
-  <g data-stack-layer="edge-labels" aria-hidden="true">
-    <g data-edge-label="HTTPS">
-      <rect x="188400" y="238200" width="45000" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="210900" y="249900" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">HTTPS</text>
-    </g>
-    <g data-edge-label="API request">
-      <rect x="375750" y="93000" width="72500" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="412000" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">API request</text>
-    </g>
-    <g data-edge-label="Invoke">
-      <rect x="595850" y="148700" width="48300" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="620000" y="160400" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Invoke</text>
-    </g>
-    <g data-edge-label="Write order">
-      <rect x="1001975" y="204400" width="70850" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="1037400" y="216100" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Write order</text>
-    </g>
-    <g data-edge-label="OrderPlaced">
-      <rect x="789825" y="93000" width="76350" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="828000" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">OrderPlaced</text>
-    </g>
-    <g data-edge-label="Dispatch">
-      <rect x="985700" y="93000" width="58200" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="1014800" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Dispatch</text>
-    </g>
-    <g data-edge-label="Archive">
-      <rect x="1288725" y="204400" width="52150" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="1314800" y="216100" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Archive</text>
-    </g>
-  </g>
-</svg>
diff --git a/docs/public/examples/azure-event-platform.svg b/docs/public/examples/azure-event-platform.svg
deleted file mode 100644
index 479b942..0000000
--- a/docs/public/examples/azure-event-platform.svg
+++ /dev/null
@@ -1,142 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="1756.8" height="262.2" viewBox="0 0 1756800 262200" role="img" aria-labelledby="stack-title stack-description" data-engine-version="0.7.0" data-theme-id="light" data-theme-version="0.5.0" data-theme-revision="sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53">
-  <title id="stack-title">Azure event platform</title>
-  <desc id="stack-description">Architecture diagram with 8 nodes, 3 groups, and 7 relationships.</desc>
-  <metadata>stack-engine 0.7.0; language 1.0; theme 0.5.0 at sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53</metadata>
-  <rect x="0" y="0" width="1756800" height="262200" fill="#FAF9F6"/>
-  <defs>
-    <marker id="stack-arrow" markerUnits="userSpaceOnUse" markerWidth="6500" markerHeight="6500" refX="9000" refY="5000" viewBox="0 0 10000 10000" orient="auto-start-reverse">
-      <path d="M 0 0 L 10000 5000 L 0 10000 z" fill="#57534E"/>
-    </marker>
-  </defs>
-  <text x="32000" y="50200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Azure event platform</text>
-  <g data-stack-layer="groups">
-    <g role="group" aria-label="Delivery" data-stack-id="delivery">
-      <title>Delivery</title>
-      <rect x="216000" y="70200" width="392000" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="240000" y="107200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Delivery</text>
-    </g>
-    <g role="group" aria-label="Event processing" data-stack-id="processing">
-      <title>Event processing</title>
-      <rect x="632000" y="70200" width="649500" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="656000" y="107200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Event processing</text>
-    </g>
-    <g role="group" aria-label="Data" data-stack-id="data">
-      <title>Data</title>
-      <rect x="1305500" y="70200" width="419300" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="1329500" y="107200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Data</text>
-    </g>
-  </g>
-  <g data-stack-layer="edges">
-    <g role="group" aria-label="Customer flows to Front Door: HTTPS" data-edge-kind="request" data-edge-direction="forward">
-      <title>Customer flows to Front Door: HTTPS</title>
-      <polyline points="192000,150200 192000,160400 240000,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Front Door flows to App Service: Route" data-edge-kind="request" data-edge-direction="forward">
-      <title>Front Door flows to App Service: Route</title>
-      <polyline points="400000,160400 424000,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="App Service flows to Ingest function: Submit" data-edge-kind="request" data-edge-direction="forward">
-      <title>App Service flows to Ingest function: Submit</title>
-      <polyline points="584000,160400 656000,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Ingest function flows to Service Bus: Work item" data-edge-kind="event" data-edge-direction="forward">
-      <title>Ingest function flows to Service Bus: Work item</title>
-      <polyline points="833500,160400 857500,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Service Bus flows to Background function: Dispatch" data-edge-kind="event" data-edge-direction="forward">
-      <title>Service Bus flows to Background function: Dispatch</title>
-      <polyline points="1017500,160400 1041500,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Background function flows to Cosmos DB: Persist" data-edge-kind="data" data-edge-direction="forward">
-      <title>Background function flows to Cosmos DB: Persist</title>
-      <polyline points="1257500,160400 1329500,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Background function flows to Storage account: Archive" data-edge-kind="data" data-edge-direction="forward">
-      <title>Background function flows to Storage account: Archive</title>
-      <polyline points="1257500,160400 1257500,196400 1513500,196400 1513500,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-  </g>
-  <g data-stack-layer="nodes">
-    <g role="group" aria-label="Customer" data-stack-id="customer" data-node-kind="actor">
-      <title>Customer</title>
-      <circle cx="112000" cy="150200" r="80000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="52000" y="138200" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-actor"><circle cx="12" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M5 20c.8-4 3-6 7-6s6.2 2 7 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> </svg>
-      <text x="88000" y="150200" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Customer</text>
-    </g>
-    <g role="group" aria-label="Front Door" data-stack-id="frontdoor" data-node-kind="service">
-      <title>Front Door</title>
-      <rect x="240000" y="124400" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="260000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="296000" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Front Door</text>
-    </g>
-    <g role="group" aria-label="App Service" data-stack-id="app" data-node-kind="service">
-      <title>App Service</title>
-      <rect x="424000" y="124400" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="444000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="480000" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">App Service</text>
-    </g>
-    <g role="group" aria-label="Ingest function" data-stack-id="ingest" data-node-kind="function">
-      <title>Ingest function</title>
-      <polygon points="672000,124400 817500,124400 833500,160400 817500,196400 672000,196400 656000,160400" fill="#EEEAE3" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="676000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="712000" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Ingest function</text>
-    </g>
-    <g role="group" aria-label="Service Bus" data-stack-id="bus" data-node-kind="queue">
-      <title>Service Bus</title>
-      <rect x="857500" y="124400" width="160000" height="72000" rx="16000" fill="#EEEAE3" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="877500" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="913500" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Service Bus</text>
-    </g>
-    <g role="group" aria-label="Background function" data-stack-id="worker" data-node-kind="worker">
-      <title>Background function</title>
-      <rect x="1041500" y="124400" width="216000" height="72000" rx="16000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="1061500" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="1097500" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Background function</text>
-    </g>
-    <g role="group" aria-label="Cosmos DB" data-stack-id="database" data-node-kind="database">
-      <title>Cosmos DB</title>
-      <path d="M 1329500 134400 V 186400 C 1329500 196400 1489500 196400 1489500 186400 V 134400 C 1489500 124400 1329500 124400 1329500 134400 Z" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <ellipse cx="1409500" cy="134400" rx="80000" ry="10000" fill="none" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="1349500" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="1385500" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Cosmos DB</text>
-    </g>
-    <g role="group" aria-label="Storage account" data-stack-id="archive" data-node-kind="storage">
-      <title>Storage account</title>
-      <rect x="1513500" y="124400" width="187300" height="72000" rx="4000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="1533500" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="1569500" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Storage account</text>
-    </g>
-  </g>
-  <g data-stack-layer="edge-labels" aria-hidden="true">
-    <g data-edge-label="HTTPS">
-      <rect x="188400" y="238200" width="45000" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="210900" y="249900" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">HTTPS</text>
-    </g>
-    <g data-edge-label="Route">
-      <rect x="390875" y="93000" width="42250" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="412000" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Route</text>
-    </g>
-    <g data-edge-label="Submit">
-      <rect x="595850" y="148700" width="48300" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="620000" y="160400" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Submit</text>
-    </g>
-    <g data-edge-label="Work item">
-      <rect x="812825" y="93000" width="65350" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="845500" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Work item</text>
-    </g>
-    <g data-edge-label="Dispatch">
-      <rect x="1000400" y="93000" width="58200" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="1029500" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Dispatch</text>
-    </g>
-    <g data-edge-label="Persist">
-      <rect x="1268800" y="148700" width="49400" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="1293500" y="160400" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Persist</text>
-    </g>
-    <g data-edge-label="Archive">
-      <rect x="1359425" y="204400" width="52150" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="1385500" y="216100" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Archive</text>
-    </g>
-  </g>
-</svg>
diff --git a/docs/public/examples/commerce-platform.svg b/docs/public/examples/commerce-platform.svg
deleted file mode 100644
index bbce95c..0000000
--- a/docs/public/examples/commerce-platform.svg
+++ /dev/null
@@ -1,239 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="2960.9" height="262.2" viewBox="0 0 2960900 262200" role="img" aria-labelledby="stack-title stack-description" data-engine-version="0.7.0" data-theme-id="default" data-theme-version="0.5.0" data-theme-revision="sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53">
-  <title id="stack-title">Commerce platform</title>
-  <desc id="stack-description">Architecture diagram with 13 nodes, 5 groups, and 12 relationships.</desc>
-  <metadata>stack-engine 0.7.0; language 1.0; theme 0.5.0 at sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53</metadata>
-  <rect x="0" y="0" width="2960900" height="262200" fill="#F3F6FA"/>
-  <defs>
-    <marker id="stack-arrow" markerUnits="userSpaceOnUse" markerWidth="7000" markerHeight="7000" refX="9000" refY="5000" viewBox="0 0 10000 10000" orient="auto-start-reverse">
-      <path d="M 0 0 L 10000 5000 L 0 10000 z" fill="#475569"/>
-    </marker>
-  </defs>
-  <text x="32000" y="50200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">Commerce platform</text>
-  <g data-stack-layer="groups">
-    <g role="group" aria-label="Storefront" data-stack-id="storefront">
-      <title>Storefront</title>
-      <rect x="216000" y="70200" width="420000" height="150600" rx="12000" fill="#E5EBF3" fill-opacity="0.55" stroke="#64748B" stroke-width="1000"/>
-      <text x="240000" y="107200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">Storefront</text>
-    </g>
-    <g role="group" aria-label="Commerce services" data-stack-id="commerce">
-      <title>Commerce services</title>
-      <rect x="660000" y="70200" width="456200" height="150600" rx="12000" fill="#E5EBF3" fill-opacity="0.55" stroke="#64748B" stroke-width="1000"/>
-      <text x="684000" y="107200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">Commerce services</text>
-    </g>
-    <g role="group" aria-label="Asynchronous processing" data-stack-id="asynchronous">
-      <title>Asynchronous processing</title>
-      <rect x="1140200" y="70200" width="655800" height="150200" rx="12000" fill="#E5EBF3" fill-opacity="0.55" stroke="#64748B" stroke-width="1000"/>
-      <text x="1164200" y="107200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">Asynchronous processing</text>
-    </g>
-    <g role="group" aria-label="Data" data-stack-id="data">
-      <title>Data</title>
-      <rect x="1820000" y="70200" width="644600" height="150200" rx="12000" fill="#E5EBF3" fill-opacity="0.55" stroke="#64748B" stroke-width="1000"/>
-      <text x="1844000" y="107200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">Data</text>
-    </g>
-    <g role="group" aria-label="External systems" data-stack-id="partners">
-      <title>External systems</title>
-      <rect x="2488600" y="70200" width="440300" height="150200" rx="12000" fill="#E5EBF3" fill-opacity="0.55" stroke="#64748B" stroke-width="1000"/>
-      <text x="2512600" y="107200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">External systems</text>
-    </g>
-  </g>
-  <g data-stack-layer="edges">
-    <g role="group" aria-label="Customer flows to Web storefront: Browse and buy" data-edge-kind="request" data-edge-direction="forward">
-      <title>Customer flows to Web storefront: Browse and buy</title>
-      <polyline points="192000,150200 192000,160600 240000,160600" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Web storefront flows to Edge gateway: HTTPS" data-edge-kind="request" data-edge-direction="forward">
-      <title>Web storefront flows to Edge gateway: HTTPS</title>
-      <polyline points="416800,160600 416800,160400 440800,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Edge gateway flows to Catalog API: Catalog requests" data-edge-kind="request" data-edge-direction="forward">
-      <title>Edge gateway flows to Catalog API: Catalog requests</title>
-      <polyline points="612000,160400 612000,160600 684000,160600" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Edge gateway flows to Checkout API: Checkout requests" data-edge-kind="request" data-edge-direction="forward">
-      <title>Edge gateway flows to Checkout API: Checkout requests</title>
-      <polyline points="612000,160400 612000,124400 903400,124400 903400,160600" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Catalog API flows to Product database: SQL" data-edge-kind="data" data-edge-direction="forward">
-      <title>Catalog API flows to Product database: SQL</title>
-      <polyline points="879400,160600 879400,124400 1844000,124400 1844000,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Catalog API flows to Product media: Media URLs" data-edge-kind="data" data-edge-direction="forward">
-      <title>Catalog API flows to Product media: Media URLs</title>
-      <polyline points="879400,160600 879400,124400 2267300,124400 2267300,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Checkout API flows to Order database: Transactions" data-edge-kind="data" data-edge-direction="forward">
-      <title>Checkout API flows to Order database: Transactions</title>
-      <polyline points="1092200,160600 1092200,196400 2063700,196400 2063700,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Checkout API flows to Payment provider: Payment API" data-edge-kind="request" data-edge-direction="forward">
-      <title>Checkout API flows to Payment provider: Payment API</title>
-      <polyline points="1092200,160600 1092200,196400 2512600,196400 2512600,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Checkout API flows to Event bus: OrderPlaced" data-edge-kind="event" data-edge-direction="forward">
-      <title>Checkout API flows to Event bus: OrderPlaced</title>
-      <polyline points="1092200,160600 1092200,160400 1164200,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Event bus flows to Fulfillment worker: OrderPlaced" data-edge-kind="event" data-edge-direction="forward">
-      <title>Event bus flows to Fulfillment worker: OrderPlaced</title>
-      <polyline points="1324200,160400 1348200,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Event bus flows to Notification worker: OrderPlaced" data-edge-kind="event" data-edge-direction="forward">
-      <title>Event bus flows to Notification worker: OrderPlaced</title>
-      <polyline points="1324200,160400 1324200,124400 1569300,124400 1569300,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Notification worker flows to Email provider: Send receipt" data-edge-kind="request" data-edge-direction="forward">
-      <title>Notification worker flows to Email provider: Send receipt</title>
-      <polyline points="1772000,160400 1772000,124400 2732300,124400 2732300,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-  </g>
-  <g data-stack-layer="nodes">
-    <g role="group" aria-label="Customer" data-stack-id="customer" data-node-kind="actor">
-      <title>Customer</title>
-      <circle cx="112000" cy="150200" r="80000" fill="#FFFFFF" stroke="#64748B" stroke-width="1500"/>
-      <svg x="52000" y="138200" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-actor"><circle cx="12" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M5 20c.8-4 3-6 7-6s6.2 2 7 6" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> </svg>
-      <text x="88000" y="150200" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Customer</text>
-    </g>
-    <g role="group" aria-label="Web storefront: Next.js" data-stack-id="web" data-node-kind="client">
-      <title>Web storefront: Next.js</title>
-      <rect x="240000" y="124400" width="176800" height="72400" rx="8000" fill="#FFFFFF" stroke="#64748B" stroke-width="1500"/>
-      <svg x="260000" y="148600" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="web"><rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M3 8h18M7 6h.01M10 6h.01" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> </svg>
-      <text x="296000" y="151600" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Web storefront</text>
-      <text x="296000" y="170600" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="12000" font-weight="400">Next.js</text>
-    </g>
-    <g role="group" aria-label="Edge gateway" data-stack-id="gateway" data-node-kind="service">
-      <title>Edge gateway</title>
-      <rect x="440800" y="124400" width="171200" height="72000" rx="8000" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="460800" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="gateway"><rect x="8" y="4" width="8" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M3 8h5M5.5 5.5 8 8l-2.5 2.5M21 16h-5M18.5 13.5 16 16l2.5 2.5" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="496800" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Edge gateway</text>
-    </g>
-    <g role="group" aria-label="Catalog API: Products and pricing" data-stack-id="catalog" data-node-kind="service">
-      <title>Catalog API: Products and pricing</title>
-      <rect x="684000" y="124400" width="195400" height="72400" rx="8000" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="704000" y="148600" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-service"><rect x="4" y="4" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <rect x="4" y="15" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M8 9v6M16 9v6" fill="none" stroke="currentColor" stroke-width="1.75"/> </svg>
-      <text x="740000" y="151600" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Catalog API</text>
-      <text x="740000" y="170600" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="12000" font-weight="400">Products and pricing</text>
-    </g>
-    <g role="group" aria-label="Checkout API: Order orchestration" data-stack-id="checkout" data-node-kind="service">
-      <title>Checkout API: Order orchestration</title>
-      <rect x="903400" y="124400" width="188800" height="72400" rx="8000" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="923400" y="148600" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-service"><rect x="4" y="4" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <rect x="4" y="15" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M8 9v6M16 9v6" fill="none" stroke="currentColor" stroke-width="1.75"/> </svg>
-      <text x="959400" y="151600" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Checkout API</text>
-      <text x="959400" y="170600" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="12000" font-weight="400">Order orchestration</text>
-    </g>
-    <g role="group" aria-label="Event bus" data-stack-id="events" data-node-kind="queue">
-      <title>Event bus</title>
-      <rect x="1164200" y="124400" width="160000" height="72000" rx="16000" fill="#E5EBF3" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="1184200" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-queue"><circle cx="5" cy="7" r="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <circle cx="5" cy="17" r="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M7 7h10l3 3-3 3H7M7 17h12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="1220200" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Event bus</text>
-    </g>
-    <g role="group" aria-label="Fulfillment worker" data-stack-id="fulfillment" data-node-kind="worker">
-      <title>Fulfillment worker</title>
-      <rect x="1348200" y="124400" width="197100" height="72000" rx="16000" fill="#FFFFFF" stroke="#64748B" stroke-width="1500"/>
-      <svg x="1368200" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-worker"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> </svg>
-      <text x="1404200" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Fulfillment worker</text>
-    </g>
-    <g role="group" aria-label="Notification worker" data-stack-id="notifications" data-node-kind="worker">
-      <title>Notification worker</title>
-      <rect x="1569300" y="124400" width="202700" height="72000" rx="16000" fill="#FFFFFF" stroke="#64748B" stroke-width="1500"/>
-      <svg x="1589300" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-worker"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> </svg>
-      <text x="1625300" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Notification worker</text>
-    </g>
-    <g role="group" aria-label="Product database" data-stack-id="products" data-node-kind="database">
-      <title>Product database</title>
-      <path d="M 1844000 134400 V 186400 C 1844000 196400 2039700 196400 2039700 186400 V 134400 C 2039700 124400 1844000 124400 1844000 134400 Z" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <ellipse cx="1941850" cy="134400" rx="97850" ry="10000" fill="none" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="1864000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-database"><ellipse cx="12" cy="5" rx="8" ry="3" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M4 5v7c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12v7c0 1.7 3.6 3 8 3s8-1.3 8-3v-7" fill="none" stroke="currentColor" stroke-width="1.75"/> </svg>
-      <text x="1900000" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Product database</text>
-    </g>
-    <g role="group" aria-label="Order database" data-stack-id="orders" data-node-kind="database">
-      <title>Order database</title>
-      <path d="M 2063700 134400 V 186400 C 2063700 196400 2243300 196400 2243300 186400 V 134400 C 2243300 124400 2063700 124400 2063700 134400 Z" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <ellipse cx="2153500" cy="134400" rx="89800" ry="10000" fill="none" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="2083700" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-database"><ellipse cx="12" cy="5" rx="8" ry="3" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M4 5v7c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12v7c0 1.7 3.6 3 8 3s8-1.3 8-3v-7" fill="none" stroke="currentColor" stroke-width="1.75"/> </svg>
-      <text x="2119700" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Order database</text>
-    </g>
-    <g role="group" aria-label="Product media" data-stack-id="assets" data-node-kind="storage">
-      <title>Product media</title>
-      <rect x="2267300" y="124400" width="173300" height="72000" rx="4000" fill="#FFFFFF" stroke="#64748B" stroke-width="1500"/>
-      <svg x="2287300" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-storage"><path d="M3 6h7l2 3h9v10H3V6Z" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
-  <path d="M3 9h18" fill="none" stroke="currentColor" stroke-width="1.75"/> </svg>
-      <text x="2323300" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Product media</text>
-    </g>
-    <g role="group" aria-label="Payment provider" data-stack-id="payment" data-node-kind="external">
-      <title>Payment provider</title>
-      <polygon points="2528600,124400 2692300,124400 2708300,160400 2692300,196400 2528600,196400 2512600,160400" fill="#E5EBF3" stroke="#64748B" stroke-width="1500"/>
-      <svg x="2532600" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="2568600" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Payment provider</text>
-    </g>
-    <g role="group" aria-label="Email provider" data-stack-id="email" data-node-kind="external">
-      <title>Email provider</title>
-      <polygon points="2748300,124400 2888900,124400 2904900,160400 2888900,196400 2748300,196400 2732300,160400" fill="#E5EBF3" stroke="#64748B" stroke-width="1500"/>
-      <svg x="2752300" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="2788300" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Email provider</text>
-    </g>
-  </g>
-  <g data-stack-layer="edge-labels" aria-hidden="true">
-    <g data-edge-label="Browse and buy">
-      <rect x="162450" y="238200" width="96700" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="210800" y="249900" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">Browse and buy</text>
-    </g>
-    <g data-edge-label="HTTPS">
-      <rect x="406200" y="93000" width="45000" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="428700" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">HTTPS</text>
-    </g>
-    <g data-edge-label="Catalog requests">
-      <rect x="596800" y="204400" width="102200" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="647900" y="216100" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">Catalog requests</text>
-    </g>
-    <g data-edge-label="Checkout requests">
-      <rect x="701475" y="93000" width="112650" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="757800" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">Checkout requests</text>
-    </g>
-    <g data-edge-label="SQL">
-      <rect x="1345700" y="93000" width="31800" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="1361600" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">SQL</text>
-    </g>
-    <g data-edge-label="Media URLs">
-      <rect x="1536725" y="93000" width="73050" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="1573250" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">Media URLs</text>
-    </g>
-    <g data-edge-label="Transactions">
-      <rect x="1536850" y="204400" width="82400" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="1578050" y="216100" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">Transactions</text>
-    </g>
-    <g data-edge-label="Payment API">
-      <rect x="1763500" y="204400" width="78000" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="1802500" y="216100" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">Payment API</text>
-    </g>
-    <g data-edge-label="OrderPlaced">
-      <rect x="1089925" y="93000" width="76350" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="1128100" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">OrderPlaced</text>
-    </g>
-    <g data-edge-label="OrderPlaced">
-      <rect x="1298025" y="204400" width="76350" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="1336200" y="216100" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">OrderPlaced</text>
-    </g>
-    <g data-edge-label="OrderPlaced">
-      <rect x="1408575" y="93000" width="76350" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="1446750" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">OrderPlaced</text>
-    </g>
-    <g data-edge-label="Send receipt">
-      <rect x="2212875" y="93000" width="78550" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="2252150" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">Send receipt</text>
-    </g>
-  </g>
-</svg>
diff --git a/docs/public/examples/gcp-data-service.svg b/docs/public/examples/gcp-data-service.svg
deleted file mode 100644
index 60396b1..0000000
--- a/docs/public/examples/gcp-data-service.svg
+++ /dev/null
@@ -1,111 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="1255.4" height="340.4" viewBox="0 0 1255400 340400" role="img" aria-labelledby="stack-title stack-description" data-engine-version="0.7.0" data-theme-id="light" data-theme-version="0.5.0" data-theme-revision="sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53">
-  <title id="stack-title">GCP data service</title>
-  <desc id="stack-description">Architecture diagram with 6 nodes, 2 groups, and 5 relationships.</desc>
-  <metadata>stack-engine 0.7.0; language 1.0; theme 0.5.0 at sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53</metadata>
-  <rect x="0" y="0" width="1255400" height="340400" fill="#FAF9F6"/>
-  <defs>
-    <marker id="stack-arrow" markerUnits="userSpaceOnUse" markerWidth="6500" markerHeight="6500" refX="9000" refY="5000" viewBox="0 0 10000 10000" orient="auto-start-reverse">
-      <path d="M 0 0 L 10000 5000 L 0 10000 z" fill="#57534E"/>
-    </marker>
-  </defs>
-  <text x="32000" y="50200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">GCP data service</text>
-  <g data-stack-layer="groups">
-    <g role="group" aria-label="Application" data-stack-id="application">
-      <title>Application</title>
-      <rect x="216000" y="70200" width="591400" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="240000" y="107200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Application</text>
-    </g>
-    <g role="group" aria-label="Analytics" data-stack-id="analytics">
-      <title>Analytics</title>
-      <rect x="831400" y="70200" width="392000" height="238200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="855400" y="107200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Analytics</text>
-    </g>
-  </g>
-  <g data-stack-layer="edges">
-    <g role="group" aria-label="Web client flows to Cloud Run API: HTTPS" data-edge-kind="request" data-edge-direction="forward">
-      <title>Web client flows to Cloud Run API: HTTPS</title>
-      <polyline points="192000,106200 192000,160400 240000,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Cloud Run API flows to Cloud SQL: SQL" data-edge-kind="data" data-edge-direction="forward">
-      <title>Cloud Run API flows to Cloud SQL: SQL</title>
-      <polyline points="406300,160400 430300,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Cloud Run API flows to Cloud Storage: Uploads" data-edge-kind="data" data-edge-direction="forward">
-      <title>Cloud Run API flows to Cloud Storage: Uploads</title>
-      <polyline points="406300,160400 406300,196400 614300,196400 614300,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Cloud Run API flows to BigQuery: Events" data-edge-kind="event" data-edge-direction="forward">
-      <title>Cloud Run API flows to BigQuery: Events</title>
-      <polyline points="406300,160400 406300,196400 855400,196400 855400,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Analyst flows to BigQuery: Queries" data-edge-kind="request" data-edge-direction="forward">
-      <title>Analyst flows to BigQuery: Queries</title>
-      <polyline points="1039400,204400 1039400,160400 1015400,160400" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-  </g>
-  <g data-stack-layer="nodes">
-    <g role="group" aria-label="Web client" data-stack-id="client" data-node-kind="client">
-      <title>Web client</title>
-      <rect x="32000" y="70200" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="52000" y="94200" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="web"><rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M3 8h18M7 6h.01M10 6h.01" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> </svg>
-      <text x="88000" y="106200" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Web client</text>
-    </g>
-    <g role="group" aria-label="Cloud Run API" data-stack-id="api" data-node-kind="service">
-      <title>Cloud Run API</title>
-      <rect x="240000" y="124400" width="166300" height="72000" rx="8000" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="260000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="296000" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Cloud Run API</text>
-    </g>
-    <g role="group" aria-label="Cloud SQL" data-stack-id="database" data-node-kind="database">
-      <title>Cloud SQL</title>
-      <path d="M 430300 134400 V 186400 C 430300 196400 590300 196400 590300 186400 V 134400 C 590300 124400 430300 124400 430300 134400 Z" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <ellipse cx="510300" cy="134400" rx="80000" ry="10000" fill="none" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="450300" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="486300" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Cloud SQL</text>
-    </g>
-    <g role="group" aria-label="Cloud Storage" data-stack-id="objects" data-node-kind="storage">
-      <title>Cloud Storage</title>
-      <rect x="614300" y="124400" width="169100" height="72000" rx="4000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="634300" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="670300" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Cloud Storage</text>
-    </g>
-    <g role="group" aria-label="BigQuery" data-stack-id="warehouse" data-node-kind="database">
-      <title>BigQuery</title>
-      <path d="M 855400 134400 V 186400 C 855400 196400 1015400 196400 1015400 186400 V 134400 C 1015400 124400 855400 124400 855400 134400 Z" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <ellipse cx="935400" cy="134400" rx="80000" ry="10000" fill="none" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="875400" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="911400" y="160400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">BigQuery</text>
-    </g>
-    <g role="group" aria-label="Analyst" data-stack-id="analyst" data-node-kind="actor">
-      <title>Analyst</title>
-      <circle cx="1119400" cy="204400" r="80000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="1059400" y="192400" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-actor"><circle cx="12" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M5 20c.8-4 3-6 7-6s6.2 2 7 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> </svg>
-      <text x="1095400" y="204400" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Analyst</text>
-    </g>
-  </g>
-  <g data-stack-layer="edge-labels" aria-hidden="true">
-    <g data-edge-label="HTTPS">
-      <rect x="169500" y="145600" width="45000" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="192000" y="157300" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">HTTPS</text>
-    </g>
-    <g data-edge-label="SQL">
-      <rect x="402400" y="93000" width="31800" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="418300" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">SQL</text>
-    </g>
-    <g data-edge-label="Uploads">
-      <rect x="483125" y="204400" width="54350" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="510300" y="216100" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Uploads</text>
-    </g>
-    <g data-edge-label="Events">
-      <rect x="606425" y="204400" width="48850" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="630850" y="216100" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Events</text>
-    </g>
-    <g data-edge-label="Queries">
-      <rect x="1013325" y="93000" width="52150" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="1039400" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Queries</text>
-    </g>
-  </g>
-</svg>
diff --git a/docs/public/examples/github-delivery-workflow.svg b/docs/public/examples/github-delivery-workflow.svg
deleted file mode 100644
index a42b011..0000000
--- a/docs/public/examples/github-delivery-workflow.svg
+++ /dev/null
@@ -1,94 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="1099.4" height="262.2" viewBox="0 0 1099400 262200" role="img" aria-labelledby="stack-title stack-description" data-engine-version="0.7.0" data-theme-id="dark" data-theme-version="0.5.0" data-theme-revision="sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53">
-  <title id="stack-title">GitHub delivery workflow</title>
-  <desc id="stack-description">Architecture diagram with 5 nodes, 2 groups, and 4 relationships.</desc>
-  <metadata>stack-engine 0.7.0; language 1.0; theme 0.5.0 at sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53</metadata>
-  <rect x="0" y="0" width="1099400" height="262200" fill="#0B1020"/>
-  <defs>
-    <marker id="stack-arrow" markerUnits="userSpaceOnUse" markerWidth="7500" markerHeight="7500" refX="9000" refY="5000" viewBox="0 0 10000 10000" orient="auto-start-reverse">
-      <path d="M 0 0 L 10000 5000 L 0 10000 z" fill="#CBD5E1"/>
-    </marker>
-  </defs>
-  <text x="32000" y="50200" fill="#F8FAFC" font-family="system-ui" font-size="13000" font-weight="600">GitHub delivery workflow</text>
-  <g data-stack-layer="groups">
-    <g role="group" aria-label="Source" data-stack-id="source">
-      <title>Source</title>
-      <rect x="216000" y="70200" width="435400" height="150200" rx="12000" fill="#1E293B" fill-opacity="0.55" stroke="#94A3B8" stroke-width="1000"/>
-      <text x="240000" y="107200" fill="#F8FAFC" font-family="system-ui" font-size="13000" font-weight="600">Source</text>
-    </g>
-    <g role="group" aria-label="Delivery" data-stack-id="delivery">
-      <title>Delivery</title>
-      <rect x="675400" y="70200" width="392000" height="150200" rx="12000" fill="#1E293B" fill-opacity="0.55" stroke="#94A3B8" stroke-width="1000"/>
-      <text x="699400" y="107200" fill="#F8FAFC" font-family="system-ui" font-size="13000" font-weight="600">Delivery</text>
-    </g>
-  </g>
-  <g data-stack-layer="edges">
-    <g role="group" aria-label="Developer flows to GitHub repository: Push" data-edge-kind="data" data-edge-direction="forward">
-      <title>Developer flows to GitHub repository: Push</title>
-      <polyline points="192000,150200 192000,160400 240000,160400" fill="none" stroke="#CBD5E1" stroke-width="1750" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="GitHub repository flows to GitHub Actions: Workflow" data-edge-kind="event" data-edge-direction="forward">
-      <title>GitHub repository flows to GitHub Actions: Workflow</title>
-      <polyline points="431500,160400 455500,160400" fill="none" stroke="#CBD5E1" stroke-width="1750" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="GitHub Actions flows to Vercel: Deploy" data-edge-kind="dependency" data-edge-direction="forward">
-      <title>GitHub Actions flows to Vercel: Deploy</title>
-      <polyline points="627400,160400 699400,160400" fill="none" stroke="#CBD5E1" stroke-width="1750" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Vercel flows to Sentry: Report errors" data-edge-kind="event" data-edge-direction="forward">
-      <title>Vercel flows to Sentry: Report errors</title>
-      <polyline points="859400,160400 883400,160400" fill="none" stroke="#CBD5E1" stroke-width="1750" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-  </g>
-  <g data-stack-layer="nodes">
-    <g role="group" aria-label="Developer" data-stack-id="developer" data-node-kind="actor">
-      <title>Developer</title>
-      <circle cx="112000" cy="150200" r="80000" fill="#141B2D" stroke="#94A3B8" stroke-width="1500"/>
-      <svg x="52000" y="138200" width="24000" height="24000" viewBox="0 0 24 24" color="#69A7FF" aria-hidden="true" focusable="false" data-icon-id="kind-actor"><circle cx="12" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="2"/>
-  <path d="M5 20c.8-4 3-6 7-6s6.2 2 7 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg>
-      <text x="88000" y="150200" dominant-baseline="middle" fill="#F8FAFC" font-family="system-ui" font-size="14000" font-weight="600">Developer</text>
-    </g>
-    <g role="group" aria-label="GitHub repository" data-stack-id="github" data-node-kind="service">
-      <title>GitHub repository</title>
-      <rect x="240000" y="124400" width="191500" height="72000" rx="8000" fill="#141B2D" stroke="#69A7FF" stroke-width="1500"/>
-      <svg x="260000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#69A7FF" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="296000" y="160400" dominant-baseline="middle" fill="#F8FAFC" font-family="system-ui" font-size="14000" font-weight="600">GitHub repository</text>
-    </g>
-    <g role="group" aria-label="GitHub Actions" data-stack-id="actions" data-node-kind="worker">
-      <title>GitHub Actions</title>
-      <rect x="455500" y="124400" width="171900" height="72000" rx="16000" fill="#141B2D" stroke="#94A3B8" stroke-width="1500"/>
-      <svg x="475500" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#69A7FF" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="511500" y="160400" dominant-baseline="middle" fill="#F8FAFC" font-family="system-ui" font-size="14000" font-weight="600">GitHub Actions</text>
-    </g>
-    <g role="group" aria-label="Vercel" data-stack-id="web" data-node-kind="external">
-      <title>Vercel</title>
-      <polygon points="715400,124400 843400,124400 859400,160400 843400,196400 715400,196400 699400,160400" fill="#1E293B" stroke="#94A3B8" stroke-width="1500"/>
-      <svg x="719400" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#69A7FF" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="755400" y="160400" dominant-baseline="middle" fill="#F8FAFC" font-family="system-ui" font-size="14000" font-weight="600">Vercel</text>
-    </g>
-    <g role="group" aria-label="Sentry" data-stack-id="errors" data-node-kind="external">
-      <title>Sentry</title>
-      <polygon points="899400,124400 1027400,124400 1043400,160400 1027400,196400 899400,196400 883400,160400" fill="#1E293B" stroke="#94A3B8" stroke-width="1500"/>
-      <svg x="903400" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#69A7FF" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="939400" y="160400" dominant-baseline="middle" fill="#F8FAFC" font-family="system-ui" font-size="14000" font-weight="600">Sentry</text>
-    </g>
-  </g>
-  <g data-stack-layer="edge-labels" aria-hidden="true">
-    <g data-edge-label="Push">
-      <rect x="193600" y="148700" width="38400" height="23400" rx="4000" fill="#0B1020"/>
-      <text x="212800" y="160400" text-anchor="middle" dominant-baseline="middle" fill="#CBD5E1" font-family="system-ui" font-size="11000">Push</text>
-    </g>
-    <g data-edge-label="Workflow">
-      <rect x="412750" y="93000" width="61500" height="23400" rx="4000" fill="#0B1020"/>
-      <text x="443500" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#CBD5E1" font-family="system-ui" font-size="11000">Workflow</text>
-    </g>
-    <g data-edge-label="Deploy">
-      <rect x="639525" y="148700" width="47750" height="23400" rx="4000" fill="#0B1020"/>
-      <text x="663400" y="160400" text-anchor="middle" dominant-baseline="middle" fill="#CBD5E1" font-family="system-ui" font-size="11000">Deploy</text>
-    </g>
-    <g data-edge-label="Report errors">
-      <rect x="830200" y="93000" width="82400" height="23400" rx="4000" fill="#0B1020"/>
-      <text x="871400" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#CBD5E1" font-family="system-ui" font-size="11000">Report errors</text>
-    </g>
-  </g>
-</svg>
diff --git a/docs/public/examples/groups-and-layout.svg b/docs/public/examples/groups-and-layout.svg
deleted file mode 100644
index d19d7f7..0000000
--- a/docs/public/examples/groups-and-layout.svg
+++ /dev/null
@@ -1,100 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="1117.6" height="252.4" viewBox="0 0 1117600 252400" role="img" aria-labelledby="stack-title stack-description" data-engine-version="0.7.0" data-theme-id="default" data-theme-version="0.5.0" data-theme-revision="sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53">
-  <title id="stack-title">Public application</title>
-  <desc id="stack-description">Architecture diagram with 5 nodes, 2 groups, and 4 relationships.</desc>
-  <metadata>stack-engine 0.7.0; language 1.0; theme 0.5.0 at sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53</metadata>
-  <rect x="0" y="0" width="1117600" height="252400" fill="#F3F6FA"/>
-  <defs>
-    <marker id="stack-arrow" markerUnits="userSpaceOnUse" markerWidth="7000" markerHeight="7000" refX="9000" refY="5000" viewBox="0 0 10000 10000" orient="auto-start-reverse">
-      <path d="M 0 0 L 10000 5000 L 0 10000 z" fill="#475569"/>
-    </marker>
-  </defs>
-  <text x="32000" y="50200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">Public application</text>
-  <g data-stack-layer="groups">
-    <g role="group" aria-label="Clients" data-stack-id="clients">
-      <title>Clients</title>
-      <rect x="32000" y="70200" width="392000" height="150200" rx="12000" fill="#E5EBF3" fill-opacity="0.55" stroke="#64748B" stroke-width="1000"/>
-      <text x="56000" y="107200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">Clients</text>
-    </g>
-    <g role="group" aria-label="Platform" data-stack-id="platform">
-      <title>Platform</title>
-      <rect x="643200" y="70200" width="442400" height="150200" rx="12000" fill="#E5EBF3" fill-opacity="0.55" stroke="#64748B" stroke-width="1000"/>
-      <text x="667200" y="107200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">Platform</text>
-    </g>
-  </g>
-  <g data-stack-layer="edges">
-    <g role="group" aria-label="Browser flows to Edge gateway: HTTPS" data-edge-kind="request" data-edge-direction="forward">
-      <title>Browser flows to Edge gateway: HTTPS</title>
-      <polyline points="216000,160400 216000,106200 448000,106200" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Mobile app flows to Edge gateway: HTTPS" data-edge-kind="request" data-edge-direction="forward">
-      <title>Mobile app flows to Edge gateway: HTTPS</title>
-      <polyline points="400000,160400 400000,106200 448000,106200" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Edge gateway flows to Application API: HTTPS" data-edge-kind="request" data-edge-direction="forward">
-      <title>Edge gateway flows to Application API: HTTPS</title>
-      <polyline points="619200,106200 619200,160400 667200,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Application API flows to Primary database: SQL" data-edge-kind="data" data-edge-direction="forward">
-      <title>Application API flows to Primary database: SQL</title>
-      <polyline points="841900,160400 865900,160400" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-  </g>
-  <g data-stack-layer="nodes">
-    <g role="group" aria-label="Browser" data-stack-id="browser" data-node-kind="client">
-      <title>Browser</title>
-      <rect x="56000" y="124400" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#64748B" stroke-width="1500"/>
-      <svg x="76000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="web"><rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M3 8h18M7 6h.01M10 6h.01" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> </svg>
-      <text x="112000" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Browser</text>
-    </g>
-    <g role="group" aria-label="Mobile app" data-stack-id="mobile" data-node-kind="client">
-      <title>Mobile app</title>
-      <rect x="240000" y="124400" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#64748B" stroke-width="1500"/>
-      <svg x="260000" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="mobile"><rect x="6" y="2" width="12" height="20" rx="3" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M10 5h4M11 19h2" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> </svg>
-      <text x="296000" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Mobile app</text>
-    </g>
-    <g role="group" aria-label="Edge gateway" data-stack-id="gateway" data-node-kind="service">
-      <title>Edge gateway</title>
-      <rect x="448000" y="70200" width="171200" height="72000" rx="8000" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="468000" y="94200" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="gateway"><rect x="8" y="4" width="8" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M3 8h5M5.5 5.5 8 8l-2.5 2.5M21 16h-5M18.5 13.5 16 16l2.5 2.5" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="504000" y="106200" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Edge gateway</text>
-    </g>
-    <g role="group" aria-label="Application API" data-stack-id="api" data-node-kind="service">
-      <title>Application API</title>
-      <rect x="667200" y="124400" width="174700" height="72000" rx="8000" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="687200" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-service"><rect x="4" y="4" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <rect x="4" y="15" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M8 9v6M16 9v6" fill="none" stroke="currentColor" stroke-width="1.75"/> </svg>
-      <text x="723200" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Application API</text>
-    </g>
-    <g role="group" aria-label="Primary database" data-stack-id="db" data-node-kind="database">
-      <title>Primary database</title>
-      <path d="M 865900 134400 V 186400 C 865900 196400 1061600 196400 1061600 186400 V 134400 C 1061600 124400 865900 124400 865900 134400 Z" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <ellipse cx="963750" cy="134400" rx="97850" ry="10000" fill="none" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="885900" y="148400" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-database"><ellipse cx="12" cy="5" rx="8" ry="3" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M4 5v7c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12v7c0 1.7 3.6 3 8 3s8-1.3 8-3v-7" fill="none" stroke="currentColor" stroke-width="1.75"/> </svg>
-      <text x="921900" y="160400" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Primary database</text>
-    </g>
-  </g>
-  <g data-stack-layer="edge-labels" aria-hidden="true">
-    <g data-edge-label="HTTPS">
-      <rect x="282400" y="94500" width="45000" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="304900" y="106200" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">HTTPS</text>
-    </g>
-    <g data-edge-label="HTTPS">
-      <rect x="377500" y="97600" width="45000" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="400000" y="109300" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">HTTPS</text>
-    </g>
-    <g data-edge-label="HTTPS">
-      <rect x="596700" y="145600" width="45000" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="619200" y="157300" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">HTTPS</text>
-    </g>
-    <g data-edge-label="SQL">
-      <rect x="838000" y="93000" width="31800" height="23400" rx="4000" fill="#F3F6FA"/>
-      <text x="853900" y="104700" text-anchor="middle" dominant-baseline="middle" fill="#475569" font-family="system-ui" font-size="11000">SQL</text>
-    </g>
-  </g>
-</svg>
diff --git a/docs/public/examples/hello-stack.svg b/docs/public/examples/hello-stack.svg
deleted file mode 100644
index 36d97c7..0000000
--- a/docs/public/examples/hello-stack.svg
+++ /dev/null
@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="408" height="174.2" viewBox="0 0 408000 174200" role="img" aria-labelledby="stack-title stack-description" data-engine-version="0.7.0" data-theme-id="default" data-theme-version="0.5.0" data-theme-revision="sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53">
-  <title id="stack-title">Hello Stack</title>
-  <desc id="stack-description">Architecture diagram with 2 nodes, 0 groups, and 1 relationship.</desc>
-  <metadata>stack-engine 0.7.0; language 1.0; theme 0.5.0 at sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53</metadata>
-  <rect x="0" y="0" width="408000" height="174200" fill="#F3F6FA"/>
-  <defs>
-    <marker id="stack-arrow" markerUnits="userSpaceOnUse" markerWidth="7000" markerHeight="7000" refX="9000" refY="5000" viewBox="0 0 10000 10000" orient="auto-start-reverse">
-      <path d="M 0 0 L 10000 5000 L 0 10000 z" fill="#475569"/>
-    </marker>
-  </defs>
-  <text x="32000" y="50200" fill="#142033" font-family="system-ui" font-size="13000" font-weight="600">Hello Stack</text>
-  <g data-stack-layer="groups">
-  </g>
-  <g data-stack-layer="edges">
-    <g role="group" aria-label="Web app flows to API" data-edge-kind="flow" data-edge-direction="forward">
-      <title>Web app flows to API</title>
-      <polyline points="192000,106200 216000,106200" fill="none" stroke="#475569" stroke-width="1500" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-  </g>
-  <g data-stack-layer="nodes">
-    <g role="group" aria-label="Web app" data-stack-id="web" data-node-kind="service">
-      <title>Web app</title>
-      <rect x="32000" y="70200" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="52000" y="94200" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-service"><rect x="4" y="4" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <rect x="4" y="15" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M8 9v6M16 9v6" fill="none" stroke="currentColor" stroke-width="1.75"/> </svg>
-      <text x="88000" y="106200" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">Web app</text>
-    </g>
-    <g role="group" aria-label="API" data-stack-id="api" data-node-kind="service">
-      <title>API</title>
-      <rect x="216000" y="70200" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#1D63D8" stroke-width="1500"/>
-      <svg x="236000" y="94200" width="24000" height="24000" viewBox="0 0 24 24" color="#1D63D8" aria-hidden="true" focusable="false" data-icon-id="kind-service"><rect x="4" y="4" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <rect x="4" y="15" width="16" height="5" rx="2" fill="none" stroke="currentColor" stroke-width="1.75"/>
-  <path d="M8 9v6M16 9v6" fill="none" stroke="currentColor" stroke-width="1.75"/> </svg>
-      <text x="272000" y="106200" dominant-baseline="middle" fill="#142033" font-family="system-ui" font-size="14000" font-weight="600">API</text>
-    </g>
-  </g>
-  <g data-stack-layer="edge-labels" aria-hidden="true">
-  </g>
-</svg>
diff --git a/docs/public/examples/mixed-provider-platform.svg b/docs/public/examples/mixed-provider-platform.svg
deleted file mode 100644
index 79ec4b8..0000000
--- a/docs/public/examples/mixed-provider-platform.svg
+++ /dev/null
@@ -1,133 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="713.2" height="679" viewBox="0 0 713200 679000" role="img" aria-labelledby="stack-title stack-description" data-engine-version="0.7.0" data-theme-id="light" data-theme-version="0.5.0" data-theme-revision="sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53">
-  <title id="stack-title">Mixed-provider platform</title>
-  <desc id="stack-description">Architecture diagram with 7 nodes, 4 groups, and 6 relationships.</desc>
-  <metadata>stack-engine 0.7.0; language 1.0; theme 0.5.0 at sha256:3bfd66e1a96628b29b95b7273b54373bcce952f7285aefa506b4255a629eaf53</metadata>
-  <rect x="0" y="0" width="713200" height="679000" fill="#FAF9F6"/>
-  <defs>
-    <marker id="stack-arrow" markerUnits="userSpaceOnUse" markerWidth="6500" markerHeight="6500" refX="9000" refY="5000" viewBox="0 0 10000 10000" orient="auto-start-reverse">
-      <path d="M 0 0 L 10000 5000 L 0 10000 z" fill="#57534E"/>
-    </marker>
-  </defs>
-  <text x="32000" y="50200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Mixed-provider platform</text>
-  <g data-stack-layer="groups">
-    <g role="group" aria-label="Platform" data-stack-id="platform">
-      <title>Platform</title>
-      <rect x="216000" y="70200" width="465200" height="576800" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="240000" y="107200" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Platform</text>
-    </g>
-    <g role="group" aria-label="Experience" data-stack-id="experience">
-      <title>Experience</title>
-      <rect x="240000" y="124400" width="415100" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="264000" y="161400" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Experience</text>
-    </g>
-    <g role="group" aria-label="Processing" data-stack-id="processing">
-      <title>Processing</title>
-      <rect x="240000" y="298600" width="394800" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="264000" y="335600" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Processing</text>
-    </g>
-    <g role="group" aria-label="Operations" data-stack-id="operations">
-      <title>Operations</title>
-      <rect x="240000" y="472800" width="417200" height="150200" rx="12000" fill="#EEEAE3" fill-opacity="0.55" stroke="#78716C" stroke-width="1000"/>
-      <text x="264000" y="509800" fill="#1C1917" font-family="system-ui" font-size="13000" font-weight="600">Operations</text>
-    </g>
-  </g>
-  <g data-stack-layer="edges">
-    <g role="group" aria-label="Customer flows to Web application: HTTPS" data-edge-kind="request" data-edge-direction="forward">
-      <title>Customer flows to Web application: HTTPS</title>
-      <polyline points="192000,150200 192000,214600 264000,214600" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Web application is connected bidirectionally with Public API: Live checkout" data-edge-kind="flow" data-edge-direction="bidirectional">
-      <title>Web application is connected bidirectionally with Public API: Live checkout</title>
-      <polyline points="447100,214600 471100,214600" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-start="url(#stack-arrow)" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Public API flows to Checkout: Invoke" data-edge-kind="dependency" data-edge-direction="forward">
-      <title>Public API flows to Checkout: Invoke</title>
-      <polyline points="471100,214600 447100,214600 447100,388800 424000,388800" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Checkout flows to Order events: OrderPlaced" data-edge-kind="event" data-edge-direction="forward">
-      <title>Checkout flows to Order events: OrderPlaced</title>
-      <polyline points="424000,388800 448000,388800" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Checkout flows to Orders: Transaction" data-edge-kind="data" data-edge-direction="forward">
-      <title>Checkout flows to Orders: Transaction</title>
-      <polyline points="344000,424800 344000,527000" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#stack-arrow)" />
-    </g>
-    <g role="group" aria-label="Public API is associated with Error monitoring: Telemetry" data-edge-kind="data" data-edge-direction="association">
-      <title>Public API is associated with Error monitoring: Telemetry</title>
-      <polyline points="631100,214600 633200,214600 633200,563000" fill="none" stroke="#57534E" stroke-width="1250" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8000 6000" />
-    </g>
-  </g>
-  <g data-stack-layer="nodes">
-    <g role="group" aria-label="Customer" data-stack-id="customer" data-node-kind="actor">
-      <title>Customer</title>
-      <circle cx="112000" cy="150200" r="80000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="52000" y="138200" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-actor"><circle cx="12" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
-  <path d="M5 20c.8-4 3-6 7-6s6.2 2 7 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> </svg>
-      <text x="88000" y="150200" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Customer</text>
-    </g>
-    <g role="group" aria-label="Web application" data-stack-id="web" data-node-kind="client">
-      <title>Web application</title>
-      <rect x="264000" y="178600" width="183100" height="72000" rx="8000" fill="#FFFFFF" stroke="#78716C" stroke-width="1500"/>
-      <svg x="284000" y="202600" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="320000" y="214600" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Web application</text>
-    </g>
-    <g role="group" aria-label="Public API" data-stack-id="api" data-node-kind="service">
-      <title>Public API</title>
-      <rect x="471100" y="178600" width="160000" height="72000" rx="8000" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="491100" y="202600" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="527100" y="214600" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Public API</text>
-    </g>
-    <g role="group" aria-label="Checkout" data-stack-id="checkout" data-node-kind="function">
-      <title>Checkout</title>
-      <polygon points="280000,352800 408000,352800 424000,388800 408000,424800 280000,424800 264000,388800" fill="#EEEAE3" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="284000" y="376800" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="320000" y="388800" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Checkout</text>
-    </g>
-    <g role="group" aria-label="Order events" data-stack-id="events" data-node-kind="queue">
-      <title>Order events</title>
-      <rect x="448000" y="352800" width="162800" height="72000" rx="16000" fill="#EEEAE3" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="468000" y="376800" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="504000" y="388800" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Order events</text>
-    </g>
-    <g role="group" aria-label="Orders" data-stack-id="database" data-node-kind="database">
-      <title>Orders</title>
-      <path d="M 264000 537000 V 589000 C 264000 599000 424000 599000 424000 589000 V 537000 C 424000 527000 264000 527000 264000 537000 Z" fill="#FFFFFF" stroke="#005DBB" stroke-width="1500"/>
-      <ellipse cx="344000" cy="537000" rx="80000" ry="10000" fill="none" stroke="#005DBB" stroke-width="1500"/>
-      <svg x="284000" y="551000" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="320000" y="563000" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Orders</text>
-    </g>
-    <g role="group" aria-label="Error monitoring" data-stack-id="monitoring" data-node-kind="external">
-      <title>Error monitoring</title>
-      <polygon points="464000,527000 617200,527000 633200,563000 617200,599000 464000,599000 448000,563000" fill="#EEEAE3" stroke="#78716C" stroke-width="1500"/>
-      <svg x="468000" y="551000" width="24000" height="24000" viewBox="0 0 24 24" color="#005DBB" aria-hidden="true" focusable="false" data-icon-id="kind-external"><path d="M11 5H5v14h14v-6M13 5h6v6M19 5l-9 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
-      <text x="504000" y="563000" dominant-baseline="middle" fill="#1C1917" font-family="system-ui" font-size="14000" font-weight="600">Error monitoring</text>
-    </g>
-  </g>
-  <g data-stack-layer="edge-labels" aria-hidden="true">
-    <g data-edge-label="HTTPS">
-      <rect x="200000" y="202900" width="45000" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="222500" y="214600" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">HTTPS</text>
-    </g>
-    <g data-edge-label="Live checkout">
-      <rect x="415425" y="147200" width="87350" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="459100" y="158900" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Live checkout</text>
-    </g>
-    <g data-edge-label="Invoke">
-      <rect x="422950" y="289550" width="48300" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="447100" y="301250" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Invoke</text>
-    </g>
-    <g data-edge-label="OrderPlaced">
-      <rect x="397825" y="321400" width="76350" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="436000" y="333100" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">OrderPlaced</text>
-    </g>
-    <g data-edge-label="Transaction">
-      <rect x="306100" y="464200" width="75800" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="344000" y="475900" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Transaction</text>
-    </g>
-    <g data-edge-label="Telemetry">
-      <rect x="618800" y="376050" width="65900" height="23400" rx="4000" fill="#FAF9F6"/>
-      <text x="651750" y="387750" text-anchor="middle" dominant-baseline="middle" fill="#57534E" font-family="system-ui" font-size="11000">Telemetry</text>
-    </g>
-  </g>
-</svg>
diff --git a/package.json b/package.json
index a960e55..74a96b4 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
     "docs:preview": "vitepress preview docs",
     "examples:check": "node scripts/validate-example-corpus.mjs",
     "examples:check:source": "node scripts/sync-example-corpus.mjs --check",
-    "examples:generate": "node scripts/validate-example-corpus.mjs --write-thumbnails",
     "examples:sync": "node scripts/sync-example-corpus.mjs",
     "format": "oxfmt --write .",
     "format:check": "oxfmt --check .",
diff --git a/scripts/docs-source.json b/scripts/docs-source.json
index 69e33bb..333db85 100644
--- a/scripts/docs-source.json
+++ b/scripts/docs-source.json
@@ -1,5 +1,5 @@
 {
   "repository": "stack-sh/docs",
-  "revision": "86c51be1ddcabd48b326bacdb6088eb2a2ff79bf",
-  "manifestSha256": "9e41cdce9df59d8b63e81691cce3da595df206d02c6ed79c7a1adec8e0f6d500"
+  "revision": "d61b1031cf54c90f10a009c804b77a9e3719c6e6",
+  "manifestSha256": "0c347301fd55ef39d24f02915d5ec0e78a313b072b37887d48b8ded69c28b7ae"
 }
diff --git a/scripts/runtime-examples.test.mjs b/scripts/runtime-examples.test.mjs
new file mode 100644
index 0000000..3c0af4c
--- /dev/null
+++ b/scripts/runtime-examples.test.mjs
@@ -0,0 +1,21 @@
+import assert from "node:assert/strict"
+import { readFile, readdir } from "node:fs/promises"
+import test from "node:test"
+
+test("documentation examples cannot retain pre-rendered SVG counterparts", async () => {
+  const catalog = JSON.parse(await readFile("example-corpus/catalog.json", "utf8"))
+  for (const root of ["public", "docs/public"]) {
+    const files = await readdir(root, { recursive: true })
+    for (const example of catalog.examples) {
+      assert.ok(
+        !files.some((file) => file.endsWith(`${example.id}.svg`)),
+        `${example.id} must render at runtime`,
+      )
+    }
+  }
+  const gallery = await readFile("docs/.vitepress/theme/components/ExampleGallery.vue", "utf8")
+  assert.match(gallery, /<ExamplePreview/)
+  assert.doesNotMatch(gallery, /\.svg/)
+  const scripts = JSON.parse(await readFile("package.json", "utf8")).scripts
+  assert.ok(!("examples:generate" in scripts))
+})
diff --git a/scripts/validate-docs-output.mjs b/scripts/validate-docs-output.mjs
index d25a318..1da3d08 100644
--- a/scripts/validate-docs-output.mjs
+++ b/scripts/validate-docs-output.mjs
@@ -109,11 +109,14 @@ for (const locale of ["", "ja/", "zh/", "ko/"]) {
   const page = `${locale}examples/index.html`
   const html = await readFile(path.join(outputRoot, page), "utf8")
   const cards = html.match(/class="stack-example-card"/g)?.length ?? 0
-  const thumbnails = html.match(/class="stack-example-card__preview"/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 (thumbnails !== 9) {
-    throw new Error(`${page} contains ${thumbnails} example thumbnails instead of 9`)
+  if (previews !== 9) {
+    throw new Error(`${page} contains ${previews} runtime example previews instead of 9`)
+  }
+  if (/src="[^"]*\/examples\/[^"]+\.svg/.test(html)) {
+    throw new Error(`${page} references a pre-rendered example SVG`)
   }
 }
 
diff --git a/scripts/validate-example-corpus.mjs b/scripts/validate-example-corpus.mjs
index bc3a852..1dc2f43 100644
--- a/scripts/validate-example-corpus.mjs
+++ b/scripts/validate-example-corpus.mjs
@@ -1,13 +1,16 @@
 import assert from "node:assert/strict"
-import { mkdir, readFile, readdir, writeFile } from "node:fs/promises"
+import { readFile, readdir } from "node:fs/promises"
 import path from "node:path"
 
 import init, { check, render } from "@stack-sh/engine"
 
-const writeThumbnails = process.argv.includes("--write-thumbnails")
+assert.equal(
+  process.argv.length,
+  2,
+  "Examples are rendered at runtime; no image generation flags are supported",
+)
 const corpusRoot = path.resolve("example-corpus")
 const sourceRoot = path.join(corpusRoot, "sources")
-const thumbnailRoot = path.resolve("docs/public/examples")
 const catalog = JSON.parse(await readFile(path.join(corpusRoot, "catalog.json"), "utf8"))
 const providerCatalog = JSON.parse(
   await readFile(path.resolve("docs/.vitepress/theme/data/provider-catalogs.json"), "utf8"),
@@ -26,7 +29,6 @@ function declarations(source, declaration) {
   return source.match(new RegExp(`^\\s*${declaration}\\s+`, "gm"))?.length ?? 0
 }
 
-const expectedThumbnails = []
 for (const example of catalog.examples) {
   const source = await readFile(path.join(sourceRoot, example.source), "utf8")
   for (const field of ["nodes", "groups", "edges"]) {
@@ -71,30 +73,8 @@ for (const example of catalog.examples) {
   assert.ok(rendered.svg, `${example.id} did not produce an SVG`)
   assert.match(rendered.svg, /<svg\b[^>]*\bviewBox="[^"]+"/)
   assert.doesNotMatch(rendered.svg, /<script\b|<foreignObject\b|\b(?:href|src)="https?:/i)
-
-  const thumbnail = `${example.id}.svg`
-  expectedThumbnails.push(thumbnail)
-  const destination = path.join(thumbnailRoot, thumbnail)
-  if (writeThumbnails) {
-    await mkdir(thumbnailRoot, { recursive: true })
-    await writeFile(destination, rendered.svg)
-  } else {
-    assert.equal(
-      await readFile(destination, "utf8"),
-      rendered.svg,
-      `${thumbnail} is stale; run npm run examples:generate`,
-    )
-  }
 }
 
-const actualThumbnails = (await readdir(thumbnailRoot))
-  .filter((entry) => entry.endsWith(".svg"))
-  .sort()
-assert.deepEqual(
-  actualThumbnails,
-  expectedThumbnails.sort(),
-  "Example thumbnail inventory has drifted",
-)
 console.log(
-  `${writeThumbnails ? "Generated" : "Validated"} ${catalog.examples.length} checked, rendered, and provider-resolved example thumbnails with @stack-sh/engine 0.7.0.`,
+  `Validated ${catalog.examples.length} canonical examples with @stack-sh/engine 0.7.0; no SVG files are generated.`,
 )
diff --git a/src/lib/example-preview.test.ts b/src/lib/example-preview.test.ts
new file mode 100644
index 0000000..0270469
--- /dev/null
+++ b/src/lib/example-preview.test.ts
@@ -0,0 +1,121 @@
+import type { RenderResult } from "@stack-sh/engine"
+import { expect, it, vi } from "vitest"
+import { createExamplePreview } from "./example-preview"
+
+const result = {
+  svg: '<svg xmlns="http://www.w3.org/2000/svg"/>',
+  diagnostics: [],
+} as unknown as RenderResult
+
+it("renders into an isolated image and releases URLs on replacement and disposal", async () => {
+  const update = vi.fn()
+  const render = vi.fn().mockResolvedValue(result)
+  const preview = createExamplePreview(render, update)
+  await preview.load("first.stack")
+  expect(URL.createObjectURL).toHaveBeenCalledWith(expect.any(Blob))
+  expect(update).toHaveBeenLastCalledWith({ status: "ready", result, url: "blob:stack-preview" })
+  await preview.load("second.stack")
+  expect(URL.revokeObjectURL).toHaveBeenCalledTimes(1)
+  preview.dispose()
+  expect(URL.revokeObjectURL).toHaveBeenCalledTimes(2)
+  await preview.load("third.stack")
+  expect(render).toHaveBeenCalledTimes(2)
+})
+
+it("drops an obsolete render after a source change", async () => {
+  let finish!: (result: RenderResult) => void
+  const update = vi.fn()
+  const render = vi
+    .fn()
+    .mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve
+        }),
+    )
+    .mockResolvedValue(result)
+  const preview = createExamplePreview(render, update)
+  const pending = preview.load("old.stack")
+  await preview.load("new.stack")
+  finish(result)
+  await pending
+  expect(URL.createObjectURL).toHaveBeenCalledOnce()
+  preview.dispose()
+})
+
+it("does not allocate or publish a late image after navigation", async () => {
+  let finish!: (result: RenderResult) => void
+  const update = vi.fn()
+  const preview = createExamplePreview(
+    () =>
+      new Promise((resolve) => {
+        finish = resolve
+      }),
+    update,
+  )
+  const pending = preview.load("example.stack")
+  preview.dispose()
+  finish(result)
+  await pending
+  expect(URL.createObjectURL).not.toHaveBeenCalled()
+  expect(update).toHaveBeenCalledTimes(1)
+})
+
+it("keeps errors separate from operational failures and retains warning diagnostics", async () => {
+  const update = vi.fn()
+  const diagnosticFields = {
+    range: {
+      start: { byteOffset: 0, line: 1, column: 1 },
+      end: { byteOffset: 1, line: 1, column: 2 },
+    },
+    expected: [],
+    help: null,
+    related: [],
+  }
+  const errors: RenderResult = {
+    ...result,
+    diagnostics: [
+      { ...diagnosticFields, severity: "error", code: "STK1001", message: "Invalid source" },
+    ],
+  }
+  const warnings: RenderResult = {
+    ...result,
+    diagnostics: [
+      {
+        ...diagnosticFields,
+        severity: "warning",
+        code: "STK5001",
+        message: "Missing provider icon",
+      },
+    ],
+  }
+  const render = vi.fn().mockResolvedValueOnce(errors).mockResolvedValueOnce(warnings)
+  const preview = createExamplePreview(render, update)
+  await preview.load("example.stack")
+  expect(update).toHaveBeenLastCalledWith({ status: "diagnostics", result: errors })
+  expect(URL.createObjectURL).not.toHaveBeenCalled()
+  await preview.load("example.stack")
+  expect(update).toHaveBeenLastCalledWith({
+    status: "ready",
+    result: warnings,
+    url: "blob:stack-preview",
+  })
+  preview.dispose()
+})
+
+it("offers a recoverable operational state for loading failures or missing SVG", async () => {
+  const update = vi.fn()
+  const render = vi
+    .fn()
+    .mockRejectedValueOnce(new Error("network"))
+    .mockResolvedValueOnce({ ...result, svg: null })
+    .mockResolvedValue(result)
+  const preview = createExamplePreview(render, update)
+  for (let attempt = 0; attempt < 2; attempt++) {
+    await preview.load("example.stack")
+    expect(update).toHaveBeenLastCalledWith({ status: "unavailable" })
+  }
+  await preview.load("example.stack")
+  expect(update).toHaveBeenLastCalledWith({ status: "ready", result, url: "blob:stack-preview" })
+  preview.dispose()
+})
diff --git a/src/lib/example-preview.ts b/src/lib/example-preview.ts
new file mode 100644
index 0000000..c443387
--- /dev/null
+++ b/src/lib/example-preview.ts
@@ -0,0 +1,48 @@
+import type { RenderResult } from "@stack-sh/engine"
+
+export type ExamplePreviewState =
+  | { status: "idle" | "loading" | "unavailable" }
+  | { status: "diagnostics"; result: RenderResult }
+  | { status: "ready"; result: RenderResult; url: string }
+
+/** Own image URLs and discard late results after navigation or source changes. */
+export function createExamplePreview(
+  render: (filename: string) => Promise<RenderResult>,
+  update: (state: ExamplePreviewState) => void,
+) {
+  let generation = 0
+  let disposed = false
+  let imageUrl: string | undefined
+
+  function releaseImage() {
+    if (imageUrl) URL.revokeObjectURL(imageUrl)
+    imageUrl = undefined
+  }
+
+  return {
+    async load(filename: string) {
+      if (disposed) return
+      const current = ++generation
+      releaseImage()
+      update({ status: "loading" })
+      try {
+        const result = await render(filename)
+        if (disposed || current !== generation) return
+        if (result.diagnostics.some((diagnostic) => diagnostic.severity === "error")) {
+          update({ status: "diagnostics", result })
+          return
+        }
+        if (!result.svg) throw new Error("Example did not produce an SVG")
+        imageUrl = URL.createObjectURL(new Blob([result.svg], { type: "image/svg+xml" }))
+        update({ status: "ready", result, url: imageUrl })
+      } catch {
+        if (!disposed && current === generation) update({ status: "unavailable" })
+      }
+    },
+    dispose() {
+      disposed = true
+      generation++
+      releaseImage()
+    },
+  }
+}
diff --git a/src/lib/render-example.test.ts b/src/lib/render-example.test.ts
new file mode 100644
index 0000000..e5d3457
--- /dev/null
+++ b/src/lib/render-example.test.ts
@@ -0,0 +1,37 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import corpus from "../../example-corpus/catalog.json"
+import { EXAMPLE_SOURCE } from "./example"
+import { renderExample } from "./render-example"
+import { initializeStackEngine, renderStack } from "./stack-engine"
+
+vi.mock("./stack-engine", () => ({
+  initializeStackEngine: vi.fn().mockResolvedValue(undefined),
+  renderStack: vi.fn().mockReturnValue({ svg: "<svg/>", diagnostics: [] }),
+}))
+
+beforeEach(() => vi.mocked(initializeStackEngine).mockResolvedValue(undefined))
+
+describe("canonical runtime examples", () => {
+  it("renders every catalog source through the shared Playground adapter", async () => {
+    for (const example of corpus.examples) {
+      await renderExample(example.source)
+      expect(renderStack).toHaveBeenLastCalledWith(expect.stringContaining("stack 1.0"))
+    }
+    expect(initializeStackEngine).toHaveBeenCalledTimes(corpus.examples.length)
+    await renderExample("04-commerce-platform.stack")
+    expect(renderStack).toHaveBeenLastCalledWith(EXAMPLE_SOURCE)
+  })
+
+  it("rejects unknown paths without fetching or initializing the engine", async () => {
+    await expect(renderExample("../../private.stack")).rejects.toThrow("Unknown canonical example")
+    expect(initializeStackEngine).not.toHaveBeenCalled()
+  })
+
+  it("can retry after a failed engine load", async () => {
+    vi.mocked(initializeStackEngine).mockRejectedValueOnce(new Error("offline"))
+    await expect(renderExample("04-commerce-platform.stack")).rejects.toThrow("offline")
+    expect(renderStack).not.toHaveBeenCalled()
+    await renderExample("04-commerce-platform.stack")
+    expect(renderStack).toHaveBeenCalledOnce()
+  })
+})
diff --git a/src/lib/render-example.ts b/src/lib/render-example.ts
new file mode 100644
index 0000000..9689cfb
--- /dev/null
+++ b/src/lib/render-example.ts
@@ -0,0 +1,13 @@
+const sources = import.meta.glob<string>("../../example-corpus/sources/*.stack", {
+  query: "?raw",
+  import: "default",
+})
+
+/** Load the pinned source, never a separately generated image. */
+export async function renderExample(filename: string) {
+  const loadSource = sources[`../../example-corpus/sources/${filename}`]
+  if (!loadSource) throw new Error("Unknown canonical example")
+  const [source, engine] = await Promise.all([loadSource(), import("./stack-engine")])
+  await engine.initializeStackEngine()
+  return engine.renderStack(source)
+}
diff --git a/src/lib/stack-engine.test.ts b/src/lib/stack-engine.test.ts
new file mode 100644
index 0000000..821d727
--- /dev/null
+++ b/src/lib/stack-engine.test.ts
@@ -0,0 +1,18 @@
+import { expect, it, vi } from "vitest"
+import init from "@stack-sh/engine"
+import { initializeStackEngine } from "./stack-engine"
+
+vi.mock("@stack-sh/engine", () => ({ default: vi.fn() }))
+
+it("shares WASM initialization and permits a fresh attempt after failure", async () => {
+  vi.mocked(init).mockRejectedValueOnce(new Error("offline"))
+  const first = initializeStackEngine()
+  expect(initializeStackEngine()).toBe(first)
+  await expect(first).rejects.toThrow("offline")
+  vi.mocked(init).mockResolvedValueOnce({} as Awaited<ReturnType<typeof init>>)
+  const retry = initializeStackEngine()
+  expect(retry).not.toBe(first)
+  await retry
+  expect(initializeStackEngine()).toBe(retry)
+  expect(init).toHaveBeenCalledTimes(2)
+})
diff --git a/src/lib/stack-engine.ts b/src/lib/stack-engine.ts
index 1498033..366a4bc 100644
--- a/src/lib/stack-engine.ts
+++ b/src/lib/stack-engine.ts
@@ -19,7 +19,12 @@ import init, {
 let initialization: Promise<void> | undefined
 
 export function initializeStackEngine(): Promise<void> {
-  initialization ??= init().then(() => undefined)
+  initialization ??= init()
+    .then(() => undefined)
+    .catch((error) => {
+      initialization = undefined
+      throw error
+    })
   return initialization
 }