diff --git a/docs/app/components/intelligent-ui/BikeDiagram.vue b/docs/app/components/intelligent-ui/BikeDiagram.vue
new file mode 100644
index 00000000..1370214f
--- /dev/null
+++ b/docs/app/components/intelligent-ui/BikeDiagram.vue
@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { whenever } from '@vueuse/core'
+
+type SystemId = 'frame' | 'wheels' | 'drivetrain' | 'brakes' | 'cockpit'
+
+interface System {
+  label?: string
+  title?: string
+  description?: string
+}
+
+const props = defineProps<{
+  title?: string
+  systems?: Partial<Record<SystemId | 'all', System>>
+}>()
+
+const SYSTEMS: { id: SystemId; label: string; anchor: [number, number] }[] = [
+  { id: 'frame', label: 'Frame', anchor: [215, 84] },
+  { id: 'wheels', label: 'Wheels', anchor: [305, 96] },
+  { id: 'drivetrain', label: 'Drivetrain', anchor: [175, 138] },
+  { id: 'brakes', label: 'Brakes', anchor: [131, 108] },
+  { id: 'cockpit', label: 'Cockpit', anchor: [272, 57] },
+]
+
+// Offset of each part at full explosion, in viewBox units.
+const OFFSETS: Record<string, [number, number]> = {
+  frame: [0, -8],
+  rearWheel: [-48, 16],
+  frontWheel: [48, 16],
+  drivetrain: [0, 42],
+  brakes: [0, -34],
+  cockpit: [0, -40],
+}
+const ANCHOR_PART: Record<SystemId, string> = {
+  frame: 'frame',
+  wheels: 'frontWheel',
+  drivetrain: 'drivetrain',
+  brakes: 'brakes',
+  cockpit: 'cockpit',
+}
+
+const explode = ref(0)
+const active = ref<SystemId | null>(null)
+
+const SPOKES = Array.from({ length: 12 }, (_, i) => (i * Math.PI) / 6)
+
+const caption = computed(() => props.systems?.[active.value ?? 'all'])
+const activeSystem = computed(() => SYSTEMS.find((system) => system.id === active.value))
+
+const label = computed(() => {
+  const system = activeSystem.value
+  if (!system) return null
+  const [x, y] = system.anchor
+  const [dx, dy] = OFFSETS[ANCHOR_PART[system.id]]!
+  const e = explode.value / 100
+  return { x: x + dx * e, y: y + dy * e, text: props.systems?.[system.id]?.label ?? system.label }
+})
+
+function part(name: string, system: SystemId) {
+  const [dx, dy] = OFFSETS[name]!
+  const e = explode.value / 100
+  return {
+    transform: `translate(${dx * e}px, ${dy * e}px)`,
+    opacity: active.value && active.value !== system ? 0.2 : 1,
+  }
+}
+
+function select(id: SystemId | null) {
+  active.value = id
+  // A part is easier to spot once the bike is pulled apart.
+  if (id && explode.value < 60) explode.value = 80
+}
+
+// A demo that hides this diagram until later provides when it shows.
+const visible = inject<Ref<boolean>>('intelligent-ui:visible', ref(true))
+
+// Pull the bike apart once, so the reader sees that the diagram moves.
+onMounted(() => {
+  whenever(visible, () => setTimeout(() => (explode.value = Math.max(explode.value, 60)), 700), {
+    immediate: true,
+    once: true,
+  })
+})
+</script>
+
+<template>
+  <div class="not-prose my-4">
+    <p
+      v-if="title"
+      class="mb-3 text-lg font-semibold text-highlighted"
+    >
+      {{ title }}
+    </p>
+
+    <div class="overflow-hidden rounded-xl bg-elevated text-default">
+      <svg
+        viewBox="0 0 400 230"
+        class="block w-full"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        role="img"
+        aria-label="Diagram of a 7-speed bicycle"
+      >
+        <g
+          class="bike-part"
+          :style="part('rearWheel', 'wheels')"
+        >
+          <circle
+            cx="95"
+            cy="150"
+            r="55"
+            stroke-width="5"
+          />
+          <line
+            v-for="angle in SPOKES"
+            :key="angle"
+            x1="95"
+            y1="150"
+            :x2="95 + Math.cos(angle) * 52"
+            :y2="150 + Math.sin(angle) * 52"
+            stroke-width="1"
+          />
+        </g>
+        <g
+          class="bike-part"
+          :style="part('frontWheel', 'wheels')"
+        >
+          <circle
+            cx="305"
+            cy="150"
+            r="55"
+            stroke-width="5"
+          />
+          <line
+            v-for="angle in SPOKES"
+            :key="angle"
+            x1="305"
+            y1="150"
+            :x2="305 + Math.cos(angle) * 52"
+            :y2="150 + Math.sin(angle) * 52"
+            stroke-width="1"
+          />
+        </g>
+        <g
+          class="bike-part"
+          :style="part('frame', 'frame')"
+        >
+          <path d="M175 155 L160 75 L270 72 L276 95 Z M175 155 L95 150 L160 75 M276 95 L305 150" />
+        </g>
+        <g
+          class="bike-part"
+          :style="part('drivetrain', 'drivetrain')"
+        >
+          <circle
+            cx="175"
+            cy="155"
+            r="17"
+          />
+          <circle
+            cx="95"
+            cy="150"
+            r="8"
+          />
+          <path
+            d="M175 138 L95 142 M175 172 L95 158"
+            stroke-width="1.5"
+          />
+          <path d="M175 155 L186 180 M179 182 L193 182 M95 158 L92 172 L100 176" />
+        </g>
+        <g
+          class="bike-part"
+          :style="part('brakes', 'brakes')"
+        >
+          <path d="M124 104 Q131 114 138 104 M273 97 Q280 107 287 97" />
+          <path
+            d="M281 58 L290 66 M131 104 Q150 80 210 74"
+            stroke-width="1.5"
+          />
+        </g>
+        <g
+          class="bike-part"
+          :style="part('cockpit', 'cockpit')"
+        >
+          <path d="M270 72 L272 58 M254 62 Q266 53 284 56 L294 61 M160 75 L155 50" />
+          <path
+            d="M138 48 Q152 42 172 47 Q156 54 138 48 Z"
+            fill="currentColor"
+          />
+        </g>
+
+        <g
+          v-if="label"
+          class="text-primary"
+        >
+          <line
+            :x1="label.x"
+            y1="22"
+            :x2="label.x"
+            :y2="label.y"
+            stroke-width="1"
+          />
+          <circle
+            :cx="label.x"
+            :cy="label.y"
+            r="3"
+            fill="currentColor"
+          />
+          <text
+            :x="label.x"
+            y="16"
+            text-anchor="middle"
+            stroke="none"
+            fill="currentColor"
+            font-size="9"
+            font-weight="600"
+          >
+            {{ label.text }}
+          </text>
+        </g>
+      </svg>
+    </div>
+
+    <USlider
+      v-model="explode"
+      :min="0"
+      :max="100"
+      size="sm"
+      class="mt-4"
+      aria-label="Pull the parts apart"
+    />
+
+    <div class="mt-4 flex flex-wrap gap-1.5">
+      <UButton
+        label="All"
+        size="xs"
+        color="neutral"
+        :variant="active ? 'outline' : 'solid'"
+        class="rounded-full"
+        @click="select(null)"
+      />
+      <UButton
+        v-for="system in SYSTEMS"
+        :key="system.id"
+        :label="systems?.[system.id]?.label ?? system.label"
+        size="xs"
+        color="neutral"
+        :variant="active === system.id ? 'solid' : 'outline'"
+        class="rounded-full"
+        @click="select(system.id)"
+      />
+    </div>
+
+    <Transition
+      name="bike-caption"
+      mode="out-in"
+    >
+      <div
+        :key="active ?? 'all'"
+        class="mt-4 min-h-20"
+      >
+        <p class="font-semibold text-highlighted">
+          {{ caption?.title }}
+        </p>
+        <p class="mt-1 text-sm text-muted">
+          {{ caption?.description }}
+        </p>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.bike-part {
+  transition:
+    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.3s ease;
+}
+.bike-caption-enter-active,
+.bike-caption-leave-active {
+  transition: opacity 0.2s ease;
+}
+.bike-caption-enter-from,
+.bike-caption-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/docs/app/components/intelligent-ui/ImageCollage.vue b/docs/app/components/intelligent-ui/ImageCollage.vue
new file mode 100644
index 00000000..8d3fa704
--- /dev/null
+++ b/docs/app/components/intelligent-ui/ImageCollage.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  images?: { src?: string; alt?: string }[]
+}>()
+</script>
+
+<template>
+  <div class="not-prose my-4 grid aspect-[16/9] grid-cols-[2fr_1fr] grid-rows-2 gap-1.5 overflow-hidden rounded-xl">
+    <template
+      v-for="(image, index) in (images ?? []).slice(0, 3)"
+      :key="index"
+    >
+      <img
+        v-if="image.src"
+        :src="image.src"
+        :alt="image.alt ?? ''"
+        class="size-full bg-elevated object-cover"
+        :class="index === 0 ? 'row-span-2' : ''"
+      />
+      <div
+        v-else
+        class="bg-elevated"
+        :class="index === 0 ? 'row-span-2' : ''"
+      />
+    </template>
+  </div>
+</template>
diff --git a/docs/app/components/intelligent-ui/MediaList.vue b/docs/app/components/intelligent-ui/MediaList.vue
new file mode 100644
index 00000000..5a652c90
--- /dev/null
+++ b/docs/app/components/intelligent-ui/MediaList.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  items?: { image?: string; title?: string; description?: string }[]
+}>()
+</script>
+
+<template>
+  <ul class="not-prose my-4 divide-y divide-default">
+    <li
+      v-for="(item, index) in items"
+      :key="index"
+      class="flex gap-4 py-3"
+    >
+      <img
+        v-if="item.image"
+        :src="item.image"
+        :alt="item.title ?? ''"
+        class="size-16 shrink-0 rounded-lg bg-elevated object-cover"
+      />
+      <div class="min-w-0">
+        <p class="font-semibold text-highlighted">
+          {{ item.title }}
+        </p>
+        <p class="mt-0.5 text-sm text-muted">
+          {{ item.description }}
+        </p>
+      </div>
+    </li>
+  </ul>
+</template>
diff --git a/docs/app/components/intelligent-ui/QuantityCalculator.vue b/docs/app/components/intelligent-ui/QuantityCalculator.vue
new file mode 100644
index 00000000..865e8ce9
--- /dev/null
+++ b/docs/app/components/intelligent-ui/QuantityCalculator.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+interface Item {
+  name?: string
+  perGuest?: number
+  unit?: string
+}
+
+const props = defineProps<{ guests?: number; items?: Item[] }>()
+
+// Model values are untrusted: keep only positive, finite numbers.
+const positive = (value: unknown) =>
+  typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : undefined
+
+// After the user changes the count, new `guests` props from the stream don't override it.
+const edited = ref<number>()
+const count = computed(() => edited.value ?? positive(props.guests) ?? 4)
+
+function format(item: Item): string {
+  const total = item.perGuest! * count.value
+  if (item.unit === 'g' && total >= 1000) return `${(total / 1000).toFixed(1)} kg`
+  return `${Math.ceil(total)}${item.unit ? ` ${item.unit}` : ''}`
+}
+
+const rows = computed(() =>
+  (props.items ?? [])
+    .filter((item) => item.name && positive(item.perGuest))
+    .map((item) => ({ name: item.name!, quantity: format(item) }))
+)
+
+const { copy, copied } = useClipboard({ copiedDuring: 1500 })
+
+function copyList() {
+  copy(rows.value.map((row) => `- ${row.name}: ${row.quantity}`).join('\n'))
+}
+</script>
+
+<template>
+  <div class="not-prose my-4 rounded-xl border border-default">
+    <div class="flex flex-col items-center gap-1 border-b border-default px-5 py-4">
+      <p class="text-xs font-medium tracking-wide text-muted uppercase">Number of people</p>
+      <div class="flex items-center gap-6">
+        <UButton
+          icon="i-lucide-minus"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          class="rounded-full"
+          aria-label="Fewer people"
+          :disabled="count <= 1"
+          @click="edited = count - 1"
+        />
+        <div class="min-w-16 text-center">
+          <p class="text-2xl font-semibold text-highlighted tabular-nums">
+            {{ count }}
+          </p>
+          <p class="text-xs text-muted">People</p>
+        </div>
+        <UButton
+          icon="i-lucide-plus"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          class="rounded-full"
+          aria-label="More people"
+          :disabled="count >= 20"
+          @click="edited = count + 1"
+        />
+      </div>
+    </div>
+
+    <div class="px-5 py-4">
+      <p class="mb-2 text-sm font-semibold text-highlighted">Your shopping quantities</p>
+      <ul class="divide-y divide-default text-sm">
+        <li
+          v-for="row in rows"
+          :key="row.name"
+          class="flex justify-between gap-4 py-2"
+        >
+          <span>{{ row.name }}</span>
+          <span class="font-semibold text-highlighted tabular-nums">{{ row.quantity }}</span>
+        </li>
+      </ul>
+      <div class="mt-2 text-xs text-muted [&_p]:m-0">
+        <slot />
+      </div>
+      <UButton
+        :label="copied ? 'Copied' : 'Copy shopping list'"
+        :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
+        color="neutral"
+        variant="outline"
+        size="sm"
+        class="mt-3 rounded-full"
+        :disabled="!rows.length"
+        @click="copyList"
+      />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/intelligent-ui/SummaryCard.vue b/docs/app/components/intelligent-ui/SummaryCard.vue
new file mode 100644
index 00000000..e9d3b520
--- /dev/null
+++ b/docs/app/components/intelligent-ui/SummaryCard.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string
+  title?: string
+}>()
+</script>
+
+<template>
+  <div class="my-4 rounded-xl border border-default px-5 py-4">
+    <p
+      v-if="label"
+      class="m-0 text-xs font-medium tracking-wide text-muted uppercase"
+    >
+      {{ label }}
+    </p>
+    <p
+      v-if="title"
+      class="mt-1 mb-0 text-lg font-semibold text-highlighted"
+    >
+      {{ title }}
+    </p>
+    <div class="text-sm [&_ul]:my-2">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/intelligent-ui/Timeline.vue b/docs/app/components/intelligent-ui/Timeline.vue
new file mode 100644
index 00000000..cb267a4c
--- /dev/null
+++ b/docs/app/components/intelligent-ui/Timeline.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+interface Step {
+  time?: string
+  title?: string
+  detail?: string
+}
+
+const props = defineProps<{ title?: string; items?: Step[] }>()
+
+// Ticked steps are user state, keyed by position so a growing `items` prop keeps them.
+const done = ref(new Set<number>())
+const steps = computed(() => (props.items ?? []).filter((step) => step.title))
+
+function toggle(index: number) {
+  const next = new Set(done.value)
+  if (!next.delete(index)) next.add(index)
+  done.value = next
+}
+</script>
+
+<template>
+  <div class="not-prose my-4 rounded-xl border border-default">
+    <div class="flex items-center justify-between border-b border-default px-5 py-3">
+      <p class="text-sm font-semibold text-highlighted">
+        {{ title ?? 'Checklist' }}
+      </p>
+      <p class="text-xs text-muted tabular-nums">{{ done.size }} of {{ steps.length }}</p>
+    </div>
+    <ol class="divide-y divide-default">
+      <li
+        v-for="(step, index) in steps"
+        :key="index"
+      >
+        <button
+          type="button"
+          class="flex w-full gap-3 px-5 py-3 text-left transition-colors hover:bg-elevated/50"
+          :aria-pressed="done.has(index)"
+          @click="toggle(index)"
+        >
+          <UIcon
+            :name="done.has(index) ? 'i-lucide-circle-check' : 'i-lucide-circle'"
+            class="mt-0.5 size-5 shrink-0"
+            :class="done.has(index) ? 'text-primary' : 'text-dimmed'"
+          />
+          <span
+            class="min-w-0"
+            :class="done.has(index) ? 'text-dimmed line-through' : ''"
+          >
+            <span class="block text-xs text-muted">{{ step.time }}</span>
+            <span
+              class="block font-semibold"
+              :class="done.has(index) ? '' : 'text-highlighted'"
+              >{{ step.title }}</span
+            >
+            <span class="mt-0.5 block text-sm text-muted">{{ step.detail }}</span>
+          </span>
+        </button>
+      </li>
+    </ol>
+  </div>
+</template>
diff --git a/docs/app/components/prose/IntelligentUiComparison.vue b/docs/app/components/prose/IntelligentUiComparison.vue
new file mode 100644
index 00000000..64ef359c
--- /dev/null
+++ b/docs/app/components/prose/IntelligentUiComparison.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import ImageCollage from '../intelligent-ui/ImageCollage.vue'
+import MediaList from '../intelligent-ui/MediaList.vue'
+import QuantityCalculator from '../intelligent-ui/QuantityCalculator.vue'
+import SummaryCard from '../intelligent-ui/SummaryCard.vue'
+import Timeline from '../intelligent-ui/Timeline.vue'
+import { roastMarkdown, roastPlainMarkdown, roastPrompt } from '~/constants/intelligent-ui'
+
+const components = {
+  'image-collage': ImageCollage,
+  'summary-card': SummaryCard,
+  'media-list': MediaList,
+  'quantity-calculator': QuantityCalculator,
+  timeline: Timeline,
+}
+
+const source = `\`\`\`mdc\n${roastMarkdown}\`\`\``
+
+const showSource = ref(false)
+const text = ref(roastMarkdown)
+const isStreaming = ref(false)
+const scrollRef = ref<HTMLElement | null>(null)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+// Lines with a URL land whole, so images never request a half-written address.
+const chunks = roastMarkdown
+  .split(/(?<=\n)/)
+  .flatMap((line) => (line.includes('http') ? [line] : (line.match(/[\s\S]{1,6}/g) ?? [])))
+
+// Replays the answer like a model stream.
+function replay() {
+  clearTimeout(timer)
+  showSource.value = false
+  text.value = ''
+  isStreaming.value = true
+  let i = 0
+
+  function next() {
+    if (i >= chunks.length) {
+      isStreaming.value = false
+      return
+    }
+    text.value += chunks[i++]
+    if (scrollRef.value) scrollRef.value.scrollTop = scrollRef.value.scrollHeight
+    timer = setTimeout(next, 16)
+  }
+  next()
+}
+
+onBeforeUnmount(() => clearTimeout(timer))
+</script>
+
+<template>
+  <div class="not-prose my-8 grid gap-4 md:grid-cols-2">
+    <div class="flex min-w-0 flex-col rounded-2xl border border-default bg-muted/30">
+      <div class="flex h-11 items-center border-b border-default px-4">
+        <p class="text-sm font-medium text-muted">Markdown only</p>
+      </div>
+      <div class="h-[36rem] overflow-y-auto p-4 [&_.comark-content>:last-child]:mb-0">
+        <p class="ml-auto max-w-[85%] rounded-2xl bg-elevated px-4 py-2 text-sm text-highlighted">
+          {{ roastPrompt }}
+        </p>
+        <Markdown
+          :value="roastPlainMarkdown"
+          class="mt-4 text-sm"
+        />
+      </div>
+    </div>
+
+    <div class="flex min-w-0 flex-col rounded-2xl border border-default bg-muted/30">
+      <div class="flex h-11 items-center justify-between gap-2 border-b border-default px-4">
+        <p class="text-sm font-medium text-highlighted">With Comark components</p>
+        <div class="flex gap-1">
+          <UButton
+            :label="isStreaming ? 'Streaming' : 'Replay'"
+            icon="i-lucide-play"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :loading="isStreaming"
+            @click="replay"
+          />
+          <UButton
+            :label="showSource ? 'Preview' : 'Source'"
+            :icon="showSource ? 'i-lucide-eye' : 'i-lucide-code'"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :disabled="isStreaming"
+            @click="showSource = !showSource"
+          />
+        </div>
+      </div>
+      <div
+        ref="scrollRef"
+        class="h-[36rem] overflow-y-auto p-4 [&_.comark-content>:last-child]:mb-0"
+      >
+        <p class="ml-auto max-w-[85%] rounded-2xl bg-primary/10 px-4 py-2 text-sm text-highlighted">
+          {{ roastPrompt }}
+        </p>
+        <Markdown
+          v-show="!showSource"
+          :value="text"
+          :streaming="isStreaming"
+          :components="components"
+          :caret="isStreaming"
+          class="mt-4 text-sm"
+        />
+        <Markdown
+          v-show="showSource"
+          :value="source"
+          class="mt-4"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/prose/IntelligentUiHero.vue b/docs/app/components/prose/IntelligentUiHero.vue
new file mode 100644
index 00000000..42f38123
--- /dev/null
+++ b/docs/app/components/prose/IntelligentUiHero.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useIntervalFn, useIntersectionObserver } from '@vueuse/core'
+import BikeDiagram from '../intelligent-ui/BikeDiagram.vue'
+import { bikePrompt, bikeStages } from '~/constants/intelligent-ui'
+
+const components = { 'bike-diagram': BikeDiagram }
+const sources = bikeStages.map((item) => `\`\`\`mdc\n${item.markdown}\n\`\`\``)
+
+const stage = ref(0)
+const showSource = ref(false)
+const rootRef = ref<HTMLElement | null>(null)
+
+// Lets the diagram play its intro once its stage shows.
+provide(
+  'intelligent-ui:visible',
+  computed(() => stage.value === bikeStages.length - 1 && !showSource.value)
+)
+
+// Walk through the stages once, the first time the demo scrolls into view.
+const { pause, resume } = useIntervalFn(
+  () => {
+    if (stage.value < bikeStages.length - 1) stage.value++
+    else pause()
+  },
+  1800,
+  { immediate: false }
+)
+
+const { stop } = useIntersectionObserver(
+  rootRef,
+  ([entry]) => {
+    if (!entry?.isIntersecting) return
+    stop()
+    resume()
+  },
+  { threshold: 0.5 }
+)
+
+function select(index: number) {
+  pause()
+  stop()
+  stage.value = index
+}
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="not-prose my-8 rounded-2xl border border-default bg-muted/30 p-4 sm:p-6"
+  >
+    <div class="flex justify-end">
+      <p class="max-w-xs rounded-2xl bg-primary/10 px-4 py-2 text-sm text-highlighted">
+        {{ bikePrompt }}
+      </p>
+    </div>
+
+    <div class="mt-6 flex items-center justify-between gap-2 border-b border-default">
+      <div
+        class="flex gap-4"
+        role="tablist"
+      >
+        <button
+          v-for="(item, index) in bikeStages"
+          :key="item.label"
+          type="button"
+          role="tab"
+          :aria-selected="stage === index"
+          class="-mb-px border-b-2 pb-2 text-sm transition-colors"
+          :class="
+            stage === index
+              ? 'border-primary font-medium text-highlighted'
+              : 'border-transparent text-muted hover:text-default'
+          "
+          @click="select(index)"
+        >
+          {{ item.label }}
+        </button>
+      </div>
+      <UButton
+        :label="showSource ? 'Preview' : 'Source'"
+        :icon="showSource ? 'i-lucide-eye' : 'i-lucide-code'"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        class="mb-1"
+        @click="showSource = !showSource"
+      />
+    </div>
+
+    <!-- Every stage stays mounted in the same cell, so the box keeps the tallest height. -->
+    <div class="grid pt-4">
+      <div
+        v-for="(item, index) in bikeStages"
+        :key="item.label"
+        class="col-start-1 row-start-1 transition-all duration-300 [&_.comark-content>:first-child]:mt-0 [&_.comark-content>:last-child]:mb-0"
+        :class="
+          stage === index ? 'translate-y-0 opacity-100' : 'pointer-events-none invisible translate-y-1.5 opacity-0'
+        "
+        :aria-hidden="stage !== index"
+      >
+        <Markdown
+          v-show="!showSource"
+          :value="item.markdown"
+          :components="components"
+        />
+        <Markdown
+          v-show="showSource"
+          :value="sources[index]"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/constants/intelligent-ui.ts b/docs/app/constants/intelligent-ui.ts
new file mode 100644
index 00000000..55dcb170
--- /dev/null
+++ b/docs/app/constants/intelligent-ui.ts
@@ -0,0 +1,199 @@
+// Answers rendered by the demos on /use-cases/intelligent-ui.
+
+const unsplash = (id: string, w = 400, h = 400) => `https://images.unsplash.com/photo-${id}?w=${w}&h=${h}&fit=crop&q=80`
+
+export const bikePrompt = 'Break down how a 7-speed bike is built'
+
+const bikeIntro = `### 7-speed bicycle
+
+A 7-speed bicycle is five systems working together. The frame carries the rider, the wheels roll, the drivetrain turns pedaling into motion across seven gears, the brakes slow you down, and the cockpit is where you steer and sit.`
+
+export const bikeStages: { label: string; markdown: string }[] = [
+  { label: 'Chat', markdown: bikeIntro },
+  {
+    label: 'Images',
+    markdown: `### 7-speed bicycle
+
+![Line drawing of a 7-speed bicycle](/intelligent-ui/bicycle.svg)
+
+Upright handlebars for steering, seven gears for effort, and hand brakes for speed.`,
+  },
+  {
+    label: 'Intelligent UI',
+    markdown: `::bike-diagram{title="7-speed bicycle"}
+---
+systems:
+  all:
+    title: Five systems, one machine
+    description: The frame carries you, the drivetrain moves you, and the rest steers and stops. Pick a system to see where it sits.
+  frame:
+    title: A diamond of tubes
+    description: The frame holds every other part, and carries the rider's weight down to both wheels.
+  wheels:
+    title: Two wheels
+    description: Spokes keep each rim true under load, and the tires grip the road and soak up bumps.
+  drivetrain:
+    title: Seven gears
+    description: The pedals turn the chainring, the chain turns the rear cogs, and the derailleur moves the chain across seven of them for climbs, flats and descents.
+  brakes:
+    title: Rim brakes
+    description: Each hand lever pulls a cable that squeezes two pads against the rim.
+  cockpit:
+    title: Where you meet the bike
+    description: The handlebar, the stem and the saddle set how you sit and steer.
+---
+::`,
+  },
+]
+
+export const roastPrompt = 'Plan a Sunday lamb roast for friends, I still don’t know how many people are coming'
+
+export const roastMarkdown = `### A Sunday lamb roast for friends
+
+A slow Sunday dinner: rosemary and garlic lamb, potatoes with crisp edges, honey-glazed roots, and something green to cut through the richness. Your guest list is still moving, so the shopping list follows your headcount.
+
+::image-collage
+---
+images:
+  - src: ${unsplash('1529692236671-f1f6cf9683ba', 800, 600)}
+    alt: Roast meat carved on a wooden board
+  - src: ${unsplash('1780304223294-d901e0378bb8', 400, 300)}
+    alt: A roast dinner with gravy and vegetables
+  - src: ${unsplash('1688437307687-fe226bddfab1', 400, 300)}
+    alt: A long table set for dinner with candles
+---
+::
+
+::summary-card{label="Your dinner plan" title="Sunday roast with friends"}
+- **Style:** relaxed and generous, served family-style
+- **Prep:** most of it done before anyone arrives
+- **Oven time:** about 2 to 3 hours, depending on the lamb
+- **Dessert:** baked the day before
+::
+
+#### 1. The menu
+
+::media-list
+---
+items:
+  - image: ${unsplash('1529692236671-f1f6cf9683ba')}
+    title: Rosemary and garlic leg of lamb
+    description: Rubbed with lemon, garlic, rosemary and olive oil. Carve it at the table, with gravy and mint sauce.
+  - image: ${unsplash('1552661397-4233881ea8c8')}
+    title: Crisp roast potatoes
+    description: Parboiled, shaken until the edges go fluffy, then roasted until deep golden.
+  - image: ${unsplash('1548869206-93b036288d7e')}
+    title: Honey-glazed carrots and parsnips
+    description: Roasted with thyme and a spoonful of honey.
+  - image: ${unsplash('1631255444970-d06bbdd2c04f')}
+    title: Lemony greens
+    description: Tenderstem broccoli with toasted almonds and lemon zest.
+  - image: ${unsplash('1506127946181-abb01a32593c')}
+    title: Apple crumble
+    description: Baked the day before, warmed while you eat the main course. Serve with vanilla ice cream.
+---
+::
+
+#### 2. What to buy
+
+Change the number of people, and the quantities follow.
+
+::quantity-calculator{:guests="5"}
+---
+items:
+  - name: Bone-in leg of lamb
+    perGuest: 400
+    unit: g
+  - name: Potatoes
+    perGuest: 300
+    unit: g
+  - name: Carrots
+    perGuest: 1.5
+  - name: Parsnips
+    perGuest: 1
+  - name: Tenderstem broccoli
+    perGuest: 125
+    unit: g
+  - name: Apples for the crumble
+    perGuest: 0.8
+---
+Generous portions. The lamb weight includes the bone.
+::
+
+Also pick up garlic, rosemary, thyme, lemons, honey, almonds, gravy ingredients, mint sauce and vanilla ice cream.
+
+#### 3. Cooking timeline
+
+Timed for dinner at 7 pm with a 2.4 kg leg of lamb. Adjust the roasting time to your joint.
+
+::timeline{title="Cooking checklist"}
+---
+items:
+  - time: Saturday
+    title: Get ahead
+    detail: Bake the crumble, mix the marinade and set the table.
+  - time: 3:30 pm
+    title: Season the lamb
+    detail: Rub in the marinade and let the lamb come to room temperature.
+  - time: 4:30 pm
+    title: Lamb in the oven
+    detail: Roast it, and trust a meat thermometer more than the clock.
+  - time: 5:15 pm
+    title: Prepare the sides
+    detail: Peel the roots, parboil the potatoes and rough up their edges.
+  - time: 6:15 pm
+    title: Rest the lamb
+    detail: Cover it loosely. Turn the oven up and roast the potatoes and roots.
+  - time: 6:45 pm
+    title: Finish
+    detail: Make the gravy, cook the greens and warm the plates.
+  - time: 7:00 pm
+    title: Dinner
+    detail: Carve at the table. Warm the crumble while everyone eats.
+---
+::
+
+Cook the lamb to at least 63 °C (145 °F) inside, then let it rest for 3 minutes or more.
+
+#### 4. Three hosting tips
+
+- **Buy the lamb last**, once your numbers are final.
+- **Free up oven space**: the lamb and the potatoes both need room.
+- **Put out something to nibble**, such as olives, bread and whipped feta, while you finish cooking.
+`
+
+export const roastPlainMarkdown = `Sure! Since you don't know the headcount yet, only the lamb really needs to scale. Most sides stretch for a couple of extra guests.
+
+### Sunday roast menu
+
+- **Main:** rosemary and garlic leg of lamb
+- **Sides:** roast potatoes, honey-glazed carrots and parsnips, lemony broccoli
+- **Sauce:** gravy and mint sauce
+- **Dessert:** apple crumble with vanilla ice cream
+
+### How much to buy
+
+| Guests | Lamb (bone-in) | Potatoes |
+| --- | --- | --- |
+| 4 | 1.6 kg | 1.2 kg |
+| 6 | 2.4 kg | 1.8 kg |
+| 8 | 3.2 kg | 2.4 kg |
+
+### Timeline for dinner at 7 pm
+
+1. **Saturday:** bake the crumble and mix the marinade.
+2. **3:30 pm:** season the lamb.
+3. **4:30 pm:** lamb in the oven.
+4. **5:15 pm:** parboil the potatoes and prepare the roots.
+5. **6:15 pm:** rest the lamb, roast the potatoes and roots.
+6. **6:45 pm:** gravy and greens.
+7. **7:00 pm:** carve and serve.
+
+Cook the lamb to at least 63 °C (145 °F) inside, then let it rest for 3 minutes or more.
+
+### Tips
+
+- Buy the lamb once your numbers are final.
+- The lamb and the potatoes both need oven space.
+- Put out olives and bread while you finish cooking.
+`
diff --git a/docs/content/10.use-cases/1.intelligent-ui.md b/docs/content/10.use-cases/1.intelligent-ui.md
index 71fa0572..db713be9 100644
--- a/docs/content/10.use-cases/1.intelligent-ui.md
+++ b/docs/content/10.use-cases/1.intelligent-ui.md
@@ -21,6 +21,11 @@ links:
 
 An intelligent UI answers with interactive components, such as a calculator, a timeline, or a chart, instead of text only. With Comark, the model writes component syntax in its Markdown answer, and your app renders your own components while the answer streams.
 
+::intelligent-ui-hero
+::
+
+Each step above is one Markdown answer rendered by Comark. Select **Source** to see what the model writes: the last step adds a `::bike-diagram` component, and the app renders it as an interactive diagram.
+
 ## The pattern
 
 On October 7, 2026, OpenAI introduced [Intelligent UI in ChatGPT](https://openai.com/index/gpt-6-for-everyone/). ChatGPT can now answer with graphics, buttons, forms, charts, and small tools. OpenAI describes how it works:
@@ -40,32 +45,41 @@ Comark isn't affiliated with OpenAI, and ChatGPT doesn't use Comark. This page s
 
 ## What the model writes
 
-The model answers in Markdown, and places a component where it helps. Here, a dinner plan includes a calculator for quantities and a timeline:
+The model answers in Markdown, and places a component where it helps. Here is the same dinner plan twice: as plain Markdown, and with components for the photos, the menu, the quantities, and the timeline. Change the number of people, tick the steps, select **Replay** to stream the answer again, or **Source** to read it:
 
-```mdc
-## Pizza night for friends
+::intelligent-ui-comparison
+::
 
-Here is a plan that scales with your guest count.
+The calculator and the timeline come from this part of the answer:
 
-::quantity-calculator{:guests="6"}
+```mdc
+::quantity-calculator{:guests="5"}
 ---
 items:
-  - name: Pizza dough balls
-    perGuest: 1.5
-    unit: balls
-  - name: Mozzarella
-    perGuest: 80
+  - name: Bone-in leg of lamb
+    perGuest: 400
+    unit: g
+  - name: Potatoes
+    perGuest: 300
     unit: g
 ---
+Generous portions. The lamb weight includes the bone.
 ::
 
-::timeline
-- **4:00 pm** Take the dough out of the fridge.
-- **6:30 pm** Heat the oven to its highest setting.
+::timeline{title="Cooking checklist"}
+---
+items:
+  - time: 3:30 pm
+    title: Season the lamb
+    detail: Rub in the marinade and let the lamb come to room temperature.
+  - time: 4:30 pm
+    title: Lamb in the oven
+    detail: Roast it, and trust a meat thermometer more than the clock.
+---
 ::
 ```
 
-The `:` prefix gives a typed value: `guests` is the number `6`. The YAML block passes `items` as an array of objects. The list inside `::timeline` is the default slot. See [component syntax](/syntax/components) for props, slots, and nesting.
+The `:` prefix gives a typed value: `guests` is the number `5`. The YAML block passes `items` as an array of objects. The text after the YAML block is the default slot. See [component syntax](/syntax/components) for props, slots, and nesting.
 
 ## Write streamable components
 
@@ -73,7 +87,7 @@ A component renders on the first frame that contains its opening line, and gets
 
 1. While the model writes `{:guests="`, the `guests` prop is `undefined`.
 2. While it writes the YAML block, `items` is missing.
-3. Then `items` grows one entry at a time, and the last entry can miss fields, for example `{ name: 'Mozzarel' }`.
+3. Then `items` grows one entry at a time, and the last entry can miss fields, for example `{ name: 'Potat' }`.
 
 Make every prop optional, and render what you have. Check model values before you use them, and keep the user's edits separate from the props, so a later frame doesn't overwrite them:
 
@@ -216,9 +230,9 @@ export const catalog: CatalogEntry[] = [
   },
   {
     tag: 'timeline',
-    description: 'Shows ordered steps with times. The default slot is a Markdown list.',
+    description: 'Shows timed steps that the user can tick off.',
     useWhen: 'The answer is a schedule or a sequence of timed steps.',
-    example: '::timeline\n- **9:00** Arrive.\n- **9:30** Start.\n::',
+    example: '::timeline{title="Checklist"}\n---\nitems:\n  - time: "9:00"\n    title: Arrive\n    detail: Check in at the front desk.\n---\n::',
   },
 ]
 
diff --git a/docs/public/intelligent-ui/bicycle.svg b/docs/public/intelligent-ui/bicycle.svg
new file mode 100644
index 00000000..6fa07959
--- /dev/null
+++ b/docs/public/intelligent-ui/bicycle.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" fill="none" stroke="#e4e4e7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+<rect width="400" height="230" fill="#27272a" stroke="none"/>
+<circle cx="95" cy="150" r="55" stroke-width="5"/><line x1="95" y1="150" x2="147.0" y2="150.0" stroke-width="1"/><line x1="95" y1="150" x2="140.0" y2="176.0" stroke-width="1"/><line x1="95" y1="150" x2="121.0" y2="195.0" stroke-width="1"/><line x1="95" y1="150" x2="95.0" y2="202.0" stroke-width="1"/><line x1="95" y1="150" x2="69.0" y2="195.0" stroke-width="1"/><line x1="95" y1="150" x2="50.0" y2="176.0" stroke-width="1"/><line x1="95" y1="150" x2="43.0" y2="150.0" stroke-width="1"/><line x1="95" y1="150" x2="50.0" y2="124.0" stroke-width="1"/><line x1="95" y1="150" x2="69.0" y2="105.0" stroke-width="1"/><line x1="95" y1="150" x2="95.0" y2="98.0" stroke-width="1"/><line x1="95" y1="150" x2="121.0" y2="105.0" stroke-width="1"/><line x1="95" y1="150" x2="140.0" y2="124.0" stroke-width="1"/>
+<circle cx="305" cy="150" r="55" stroke-width="5"/><line x1="305" y1="150" x2="357.0" y2="150.0" stroke-width="1"/><line x1="305" y1="150" x2="350.0" y2="176.0" stroke-width="1"/><line x1="305" y1="150" x2="331.0" y2="195.0" stroke-width="1"/><line x1="305" y1="150" x2="305.0" y2="202.0" stroke-width="1"/><line x1="305" y1="150" x2="279.0" y2="195.0" stroke-width="1"/><line x1="305" y1="150" x2="260.0" y2="176.0" stroke-width="1"/><line x1="305" y1="150" x2="253.0" y2="150.0" stroke-width="1"/><line x1="305" y1="150" x2="260.0" y2="124.0" stroke-width="1"/><line x1="305" y1="150" x2="279.0" y2="105.0" stroke-width="1"/><line x1="305" y1="150" x2="305.0" y2="98.0" stroke-width="1"/><line x1="305" y1="150" x2="331.0" y2="105.0" stroke-width="1"/><line x1="305" y1="150" x2="350.0" y2="124.0" stroke-width="1"/>
+<path d="M175 155 L160 75 L270 72 L276 95 Z M175 155 L95 150 L160 75 M276 95 L305 150"/>
+<circle cx="175" cy="155" r="17"/><circle cx="95" cy="150" r="8"/>
+<path d="M175 138 L95 142 M175 172 L95 158" stroke-width="1.5"/>
+<path d="M175 155 L186 180 M179 182 L193 182 M95 158 L92 172 L100 176"/>
+<path d="M124 104 Q131 114 138 104 M273 97 Q280 107 287 97"/>
+<path d="M281 58 L290 66 M131 104 Q150 80 210 74" stroke-width="1.5"/>
+<path d="M270 72 L272 58 M254 62 Q266 53 284 56 L294 61 M160 75 L155 50"/>
+<path d="M138 48 Q152 42 172 47 Q156 54 138 48 Z" fill="#e4e4e7"/>
+</svg>