@gxp-dev/app-ui 0.1.0

package/src/composables/__demo__/UseChatMediaDemo.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useChatMedia, type ChatTrackKind } from '../useChatMedia'
+
+const log = ref<string[]>([])
+const pushLog = (msg: string): void => {
+  log.value.unshift(`${new Date().toLocaleTimeString()} · ${msg}`)
+  if (log.value.length > 12) log.value.pop()
+}
+
+const media = useChatMedia({
+  handlers: {
+    onTrackStarted: (track, kind: ChatTrackKind) => pushLog(`onTrackStarted(${kind})`),
+    onTrackStopping: (kind: ChatTrackKind) => pushLog(`onTrackStopping(${kind})`),
+    onAudioPaused: () => pushLog('onAudioPaused'),
+    onAudioResumed: () => pushLog('onAudioResumed'),
+    onVideoPaused: () => pushLog('onVideoPaused'),
+    onVideoResumed: () => pushLog('onVideoResumed'),
+  },
+})
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+const screenRef = ref<HTMLVideoElement | null>(null)
+
+const wrap = async (label: string, fn: () => Promise<unknown> | unknown): Promise<void> => {
+  try {
+    await fn()
+  } catch (err) {
+    pushLog(`${label} failed: ${(err as Error).message}`)
+  }
+}
+
+const startAudio = (): Promise<void> => wrap('startAudio', () => media.startAudioCapture())
+const startVideo = (): Promise<void> =>
+  wrap('startVideo', async () => {
+    await media.startVideoCapture()
+    if (videoRef.value && media.localVideoStream.value) {
+      videoRef.value.srcObject = media.localVideoStream.value
+    }
+  })
+const startScreen = (): Promise<void> =>
+  wrap('startScreen', async () => {
+    await media.startScreenShare()
+    if (screenRef.value && media.localScreenStream.value) {
+      screenRef.value.srcObject = media.localScreenStream.value
+    }
+  })
+
+const summary = computed(() => ({
+  hasAudio: media.hasAudio.value,
+  hasVideo: media.hasVideo.value,
+  isMuted: media.isMuted.value,
+  isVideoOff: media.isVideoOff.value,
+  isScreenSharing: media.isScreenSharing.value,
+  participants: media.participantStreams.value.size,
+}))
+</script>
+
+<template>
+  <div class="space-y-4 rounded-lg border border-border bg-card p-4 text-card-foreground w-[640px] max-w-full">
+    <h3 class="text-base font-semibold">useChatMedia demo</h3>
+
+    <div class="flex flex-wrap gap-2">
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="startAudio">
+        Start audio
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="media.toggleMute()">
+        {{ media.isMuted.value ? 'Unmute' : 'Mute' }}
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="startVideo">
+        Start video
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="media.toggleVideo()">
+        Toggle video
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="startScreen">
+        Start screen
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground" @click="media.cleanup()">
+        Cleanup
+      </button>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <p class="mb-1 text-xs text-muted-foreground">local video</p>
+        <video ref="videoRef" autoplay playsinline muted class="h-32 w-full rounded-md bg-black object-cover" />
+      </div>
+      <div>
+        <p class="mb-1 text-xs text-muted-foreground">screen share</p>
+        <video ref="screenRef" autoplay playsinline muted class="h-32 w-full rounded-md bg-black object-cover" />
+      </div>
+    </div>
+
+    <pre class="rounded-md bg-muted p-3 font-mono text-xs">{{ summary }}</pre>
+
+    <div>
+      <p class="mb-1 text-xs font-semibold text-muted-foreground">handler log</p>
+      <ul class="max-h-32 space-y-0.5 overflow-y-auto rounded-md bg-background p-2 font-mono text-xs">
+        <li v-for="(line, i) in log" :key="i">{{ line }}</li>
+        <li v-if="!log.length" class="text-muted-foreground italic">no events yet</li>
+      </ul>
+    </div>
+  </div>
+</template>

package/src/composables/__demo__/UseChatMessagesDemo.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useChatMessages, type ChatMessage, type ChatMessagesApi } from '../useChatMessages'
+
+let nextId = 0
+
+// In-memory mock api so the demo is fully self-contained.
+const seed: ChatMessage[] = [
+  { id: ++nextId, content: 'Welcome to the demo room 👋' },
+  { id: ++nextId, content: 'Try sending a message, then click "Simulate inbound" to see the push handler.' },
+]
+
+const mockApi: ChatMessagesApi = {
+  loadHistory: async () => ({ messages: [...seed], hasMore: false }),
+  sendMessage: async (input) => {
+    await new Promise((r) => setTimeout(r, 250))
+    return { id: ++nextId, content: input.content, reply_to: input.reply_to ?? null }
+  },
+  editMessage: async () => undefined,
+  deleteMessage: async () => undefined,
+  addReaction: async () => undefined,
+  removeReaction: async () => undefined,
+}
+
+const chat = useChatMessages({ api: mockApi })
+chat.loadHistory()
+
+const draft = ref('')
+
+const send = async (): Promise<void> => {
+  if (!draft.value.trim()) return
+  const created = await chat.sendMessage(draft.value)
+  chat.handleNewMessage(created)
+  draft.value = ''
+}
+
+const simulateInbound = (): void => {
+  chat.handleNewMessage({
+    id: ++nextId,
+    content: 'A wild bot appears 🤖',
+  })
+}
+
+const reactTo = (messageId: ChatMessage['id'], emoji: string): void => {
+  chat.handleReactionAdded({ messageId, emoji, participantId: 'me' })
+}
+</script>
+
+<template>
+  <div class="space-y-3 rounded-lg border border-border bg-card p-4 text-card-foreground w-[500px] max-w-full">
+    <h3 class="text-base font-semibold">useChatMessages demo</h3>
+
+    <div class="h-64 space-y-2 overflow-y-auto rounded-md border border-border bg-background p-3">
+      <div
+        v-for="m in chat.messages.value"
+        :key="m.id"
+        class="rounded-md bg-muted p-2 text-sm"
+        :class="{ 'opacity-50': m.is_deleted }"
+      >
+        <p>{{ m.content }}</p>
+        <div class="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+          <span>#{{ m.id }}</span>
+          <span v-if="m.is_edited">(edited)</span>
+          <button class="hover:text-primary" @click="reactTo(m.id, '👍')">👍</button>
+          <button class="hover:text-primary" @click="reactTo(m.id, '🎉')">🎉</button>
+          <button v-if="!m.is_deleted" class="hover:text-destructive" @click="chat.deleteMessage(m.id)">delete</button>
+          <span v-if="m.reactions?.length" class="ml-auto flex gap-1">
+            <span v-for="r in m.reactions" :key="r.emoji" class="rounded-full bg-primary/10 px-2 py-0.5 text-xs">
+              {{ r.emoji }} {{ r.count }}
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex gap-2">
+      <input
+        v-model="draft"
+        class="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm"
+        placeholder="Type a message…"
+        @keyup.enter="send"
+      />
+      <button class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground" @click="send">
+        Send
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-2 text-sm font-medium text-secondary-foreground" @click="simulateInbound">
+        Simulate inbound
+      </button>
+    </div>
+
+    <div class="rounded-md bg-muted p-3 font-mono text-xs">
+      <div>count: {{ chat.messageCount.value }} · loading: {{ chat.isLoading.value }} · hasMore: {{ chat.hasMore.value }}</div>
+    </div>
+  </div>
+</template>

package/src/composables/__demo__/UseErrorsDemo.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useErrors } from '../useErrors'
+
+const { errorMessages, addError, removeError, clearErrors } = useErrors()
+const draft = ref('Something went wrong')
+</script>
+
+<template>
+  <div class="space-y-3 rounded-lg border border-border bg-card p-4 text-card-foreground w-[480px] max-w-full">
+    <h3 class="text-base font-semibold">useErrors demo</h3>
+
+    <div class="flex gap-2">
+      <input
+        v-model="draft"
+        class="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm"
+        placeholder="Error message…"
+      />
+      <button class="rounded-md bg-destructive px-3 py-2 text-sm font-medium text-destructive-foreground" @click="addError(draft)">
+        addError
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-2 text-sm font-medium text-secondary-foreground" @click="clearErrors">
+        clear all
+      </button>
+    </div>
+
+    <ul v-if="errorMessages.length" class="space-y-1">
+      <li
+        v-for="(msg, i) in errorMessages"
+        :key="i"
+        class="flex items-center justify-between gap-2 rounded-md border border-destructive bg-destructive/10 p-2 text-sm text-destructive"
+      >
+        <span>{{ msg }}</span>
+        <button class="text-xs underline hover:no-underline" @click="removeError(i)">remove</button>
+      </li>
+    </ul>
+    <p v-else class="text-sm italic text-muted-foreground">no errors</p>
+
+    <pre class="rounded-md bg-muted p-3 font-mono text-xs">{{ { count: errorMessages.length, errorMessages } }}</pre>
+  </div>
+</template>

package/src/composables/__demo__/UseExperienceDemo.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { defineComponent, h } from 'vue'
+import { useExperience, ExperienceFlow } from '@/experience'
+
+const StubPage = (name: string, color: string) =>
+  defineComponent({
+    name,
+    emits: ['next', 'back'],
+    setup(_, { emit }) {
+      return () =>
+        h(
+          'section',
+          {
+            class: 'flex h-full w-full flex-col items-center justify-center gap-4 p-8 text-center',
+            style: { background: color },
+          },
+          [
+            h('h1', { class: 'text-2xl font-bold text-white drop-shadow' }, name),
+            h('div', { class: 'flex gap-2' }, [
+              h(
+                'button',
+                { class: 'rounded-md bg-white/20 px-3 py-1 text-sm text-white', onClick: () => emit('back') },
+                'back',
+              ),
+              h(
+                'button',
+                { class: 'rounded-md bg-white px-3 py-1 text-sm font-semibold text-foreground', onClick: () => emit('next') },
+                'next →',
+              ),
+            ]),
+          ],
+        )
+    },
+  })
+
+const flow = useExperience({
+  pages: [
+    { name: 'one', component: StubPage('Page One', '#0ea5e9') },
+    { name: 'two', component: StubPage('Page Two', '#9333ea') },
+    { name: 'three', component: StubPage('Page Three', '#16a34a') },
+  ],
+  onComplete: () => flow.reset(),
+})
+</script>
+
+<template>
+  <div class="grid h-[420px] w-[640px] grid-cols-[200px_1fr] overflow-hidden rounded-lg border border-border bg-card">
+    <aside class="space-y-3 border-r border-border bg-muted p-3 text-xs">
+      <div>
+        <div class="font-mono text-base"><strong>{{ flow.pageName.value }}</strong></div>
+        <div class="text-muted-foreground">
+          index {{ flow.index.value }} · busy {{ flow.busy.value }}
+        </div>
+      </div>
+      <div class="flex flex-wrap gap-1">
+        <button
+          v-for="p in flow.pages.value"
+          :key="p.name"
+          class="rounded-md border bg-card px-2 py-0.5 hover:bg-background"
+          :class="{ 'border-primary bg-primary/10': flow.pageName.value === p.name }"
+          @click="flow.goTo(p.name)"
+        >
+          {{ p.name }}
+        </button>
+      </div>
+      <button class="rounded-md bg-secondary px-3 py-1 text-secondary-foreground" @click="flow.reset()">reset</button>
+    </aside>
+    <main class="relative">
+      <ExperienceFlow :flow="flow" />
+    </main>
+  </div>
+</template>

package/src/composables/__demo__/UseMediaDemo.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useMedia } from '../useMedia'
+
+const media = useMedia()
+const videoRef = ref<HTMLVideoElement | null>(null)
+const audioRef = ref<HTMLAudioElement | null>(null)
+
+watch(media.videoStream, (stream) => {
+  if (videoRef.value) videoRef.value.srcObject = stream
+})
+watch(media.audioURL, (url) => {
+  if (audioRef.value) audioRef.value.src = url ?? ''
+})
+
+const log = ref<string[]>([])
+const push = (msg: string): void => {
+  log.value.unshift(`${new Date().toLocaleTimeString()} · ${msg}`)
+  if (log.value.length > 12) log.value.pop()
+}
+
+const wrap = async (label: string, fn: () => Promise<unknown> | unknown): Promise<void> => {
+  try {
+    await fn()
+    push(`${label} ok`)
+  } catch (err) {
+    push(`${label} failed: ${(err as Error).message}`)
+  }
+}
+
+const takePhoto = (): void => {
+  if (!videoRef.value) return
+  const { canvas, ctx, s } = media.scaleCanvas(videoRef.value, 1)
+  if (!ctx) return
+  media.drawToCanvas(canvas, ctx, s, videoRef.value, true)
+  canvas.toBlob((blob) => {
+    if (blob) {
+      media.photoBlob.value = blob
+      push('photo captured')
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-3 rounded-lg border border-border bg-card p-4 text-card-foreground w-[640px] max-w-full">
+    <h3 class="text-base font-semibold">useMedia demo</h3>
+
+    <div class="flex flex-wrap gap-2">
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="wrap('setVideoDevice', () => media.setVideoDevice({ facingMode: 'user' }))">
+        camera
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="wrap('setAudioDevice', () => media.setAudioDevice())">
+        mic
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="takePhoto" :disabled="!media.videoStream.value">
+        photo
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="wrap('startRecording', () => media.startRecording({ audio: true, video: videoRef ?? undefined }))">
+        start record
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground" @click="media.stopRecording()">
+        stop record
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground" @click="media.resetState()">
+        reset
+      </button>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <p class="mb-1 text-xs text-muted-foreground">live video</p>
+        <video ref="videoRef" autoplay playsinline muted class="aspect-square w-full rounded-md bg-black object-cover" />
+      </div>
+      <div>
+        <p class="mb-1 text-xs text-muted-foreground">last photo</p>
+        <img v-if="media.photoURL.value" :src="media.photoURL.value" class="aspect-square w-full rounded-md object-cover" />
+        <div v-else class="grid aspect-square w-full place-items-center rounded-md bg-muted text-sm text-muted-foreground">none</div>
+      </div>
+    </div>
+
+    <div v-if="media.audioURL.value">
+      <p class="mb-1 text-xs text-muted-foreground">last audio</p>
+      <audio ref="audioRef" controls class="w-full" />
+    </div>
+
+    <pre class="rounded-md bg-muted p-3 font-mono text-xs">{{ {
+      hasVideo: !!media.videoStream.value,
+      hasAudio: !!media.audioStream.value,
+      facingMode: media.currentFacingMode.value,
+      isMobile: media.isMobileDevice(),
+      devicesCount: media.devices.value.length,
+    } }}</pre>
+
+    <ul class="max-h-32 space-y-0.5 overflow-y-auto rounded-md bg-background p-2 font-mono text-xs">
+      <li v-for="(line, i) in log" :key="i">{{ line }}</li>
+      <li v-if="!log.length" class="italic text-muted-foreground">no events</li>
+    </ul>
+  </div>
+</template>

package/src/composables/__demo__/UseNfcListenerDemo.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { ref, onBeforeUnmount } from 'vue'
+import { useNfcListener, simulateNfcScan, type NfcScanData } from '../useNfcListener'
+
+const log = ref<NfcScanData[]>([])
+const { registerHandler } = useNfcListener()
+
+const unregister = registerHandler((data) => {
+  log.value.unshift(data)
+  if (log.value.length > 8) log.value.pop()
+})
+
+onBeforeUnmount(unregister)
+
+const fire = (): void => simulateNfcScan(crypto.randomUUID().slice(0, 8), 'iso-14443-a')
+</script>
+
+<template>
+  <div class="space-y-3 rounded-lg border border-border bg-card p-4 text-card-foreground w-[460px] max-w-full">
+    <h3 class="text-base font-semibold">useNfcListener demo</h3>
+
+    <button class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground" @click="fire">
+      simulateNfcScan()
+    </button>
+
+    <div>
+      <p class="mb-1 text-xs font-semibold text-muted-foreground">scan log</p>
+      <ul class="max-h-48 space-y-1 overflow-y-auto rounded-md bg-muted p-2 font-mono text-xs">
+        <li v-for="(entry, i) in log" :key="i">
+          uid={{ entry.uid }} type={{ entry.tagType }} t={{ entry.timestamp }}
+        </li>
+        <li v-if="!log.length" class="text-muted-foreground italic">no scans yet</li>
+      </ul>
+    </div>
+  </div>
+</template>

package/src/composables/__demo__/UseQuestionDemo.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { useQuestion, type QuestionDefinition } from '../useQuestion'
+
+const props = defineProps<{
+  questionDef?: QuestionDefinition
+  disabled?: boolean
+  readonly?: boolean
+  showResult?: boolean
+  isCorrect?: boolean | null
+  feedback?: string | null
+}>()
+
+const lastEvent = ref<string | null>(null)
+
+const proxyProps = reactive({
+  question: props.questionDef ?? { label: 'What is 2 + 2?', points: 5, feedbackCorrect: 'Yes!' },
+  modelValue: '',
+  disabled: props.disabled ?? false,
+  readonly: props.readonly ?? false,
+  showResult: props.showResult ?? false,
+  isCorrect: props.isCorrect ?? null,
+  feedback: props.feedback ?? null,
+})
+
+const emit = (event: 'update:modelValue' | 'answer', value: unknown): void => {
+  lastEvent.value = `${event}(${JSON.stringify(value)})`
+  if (event === 'update:modelValue') proxyProps.modelValue = String(value ?? '')
+}
+
+const q = useQuestion(proxyProps, emit)
+</script>
+
+<template>
+  <div class="space-y-4 rounded-lg border border-border bg-card p-6 text-card-foreground">
+    <div>
+      <h3 class="text-lg font-semibold">{{ q.questionText.value }}</h3>
+      <p v-if="q.questionHint.value" class="text-sm text-muted-foreground">{{ q.questionHint.value }}</p>
+      <p class="mt-1 text-xs text-muted-foreground">
+        worth {{ q.points.value }} pts · interactive: {{ q.isInteractive.value }}
+      </p>
+    </div>
+
+    <input
+      v-model="proxyProps.modelValue"
+      type="text"
+      :disabled="!q.isInteractive.value"
+      class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
+      placeholder="Your answer…"
+      @input="q.updateAnswer(($event.target as HTMLInputElement).value)"
+    />
+
+    <button
+      type="button"
+      class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+      :disabled="!q.isInteractive.value"
+      @click="q.submitAnswer()"
+    >
+      Submit answer
+    </button>
+
+    <div v-if="q.displayFeedback.value" class="rounded-md p-3 text-sm" :class="q.resultClass.value === 'question--correct' ? 'bg-green-100 text-green-900' : 'bg-red-100 text-red-900'">
+      <strong>Feedback:</strong> {{ q.displayFeedback.value }}
+      <p v-if="q.explanation.value" class="mt-1 text-xs opacity-80">{{ q.explanation.value }}</p>
+    </div>
+
+    <div class="rounded-md bg-muted p-3 font-mono text-xs">
+      <div><strong>last event:</strong> {{ lastEvent ?? '(none)' }}</div>
+      <div><strong>modelValue:</strong> {{ JSON.stringify(proxyProps.modelValue) }}</div>
+    </div>
+  </div>
+</template>

package/src/composables/__demo__/UseScanningDemo.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { useScanning } from '../useScanning'
+
+const { scanIsOpen, registeredQuagga, ocr, openScanner, closeScanner, resetScanState } = useScanning()
+
+const dispatchResetAll = (): void => {
+  document.body.dispatchEvent(new Event('reset-all'))
+}
+</script>
+
+<template>
+  <div class="space-y-3 rounded-lg border border-border bg-card p-4 text-card-foreground w-[420px] max-w-full">
+    <h3 class="text-base font-semibold">useScanning demo</h3>
+
+    <div class="flex flex-wrap gap-2">
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="openScanner">
+        Open
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground" @click="closeScanner">
+        Close
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground" @click="resetScanState">
+        Reset
+      </button>
+      <button class="rounded-md bg-muted px-3 py-1.5 text-sm font-medium" @click="dispatchResetAll">
+        Dispatch 'reset-all'
+      </button>
+    </div>
+
+    <div class="rounded-md bg-muted p-3 font-mono text-xs">
+      scanIsOpen: <strong>{{ scanIsOpen }}</strong><br/>
+      registeredQuagga: <strong>{{ registeredQuagga }}</strong><br/>
+      ocr: <strong>{{ ocr }}</strong>
+    </div>
+
+    <div v-if="scanIsOpen" class="rounded-md border border-primary bg-primary/10 p-3 text-sm">
+      Scanner is open. (In a real app this would mount BarcodeScanner.)
+    </div>
+  </div>
+</template>

package/src/composables/__demo__/UseStreamingAudioDemo.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useStreamingAudio } from '../useStreamingAudio'
+
+const log = ref<string[]>([])
+const pushLog = (msg: string): void => {
+  log.value.unshift(`${new Date().toLocaleTimeString()} · ${msg}`)
+  if (log.value.length > 12) log.value.pop()
+}
+
+const audio = useStreamingAudio()
+audio.setSpeechDetectionCallback((level) => pushLog(`speech detected at level ${level}`))
+
+const wrap = async (label: string, fn: () => Promise<unknown> | void): Promise<void> => {
+  try {
+    await fn()
+    pushLog(label + ' ok')
+  } catch (err) {
+    pushLog(`${label} failed: ${(err as Error).message}`)
+  }
+}
+
+const onStart = (): Promise<void> => wrap('startCapture', () => audio.startCapture())
+
+/**
+ * Generate a 250ms 440Hz sine-wave PCM16 chunk and feed it through the
+ * playback queue so users can hear the scheduler at work.
+ */
+const playTone = (): void => {
+  const rate = 24000
+  const length = rate * 0.25
+  const buffer = new Int16Array(length)
+  for (let i = 0; i < length; i++) {
+    buffer[i] = Math.sin((i / rate) * Math.PI * 2 * 440) * 0.3 * 32767
+  }
+  audio.playPCMChunk(buffer, rate)
+  pushLog('queued 250ms 440Hz tone')
+}
+
+const playSequence = async (): Promise<void> => {
+  // 4 chunks in rapid succession to demonstrate seamless concatenation.
+  for (let i = 0; i < 4; i++) {
+    playTone()
+    await new Promise((r) => setTimeout(r, 30))
+  }
+}
+
+const summary = computed(() => ({
+  isCapturing: audio.isCapturing.value,
+  isMuted: audio.isMuted.value,
+  level: audio.audioLevel.value,
+  hasContext: audio.audioContext.value !== null,
+}))
+</script>
+
+<template>
+  <div class="space-y-4 rounded-lg border border-border bg-card p-4 text-card-foreground w-[520px] max-w-full">
+    <h3 class="text-base font-semibold">useStreamingAudio demo</h3>
+
+    <div class="flex flex-wrap gap-2">
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="audio.initialize()">
+        Initialize
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="onStart">
+        Start capture
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="audio.toggleMute()">
+        {{ audio.isMuted.value ? 'Unmute' : 'Mute' }}
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="playTone">
+        Play tone
+      </button>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" @click="playSequence">
+        Play 4-chunk sequence
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground" @click="audio.interruptPlayback()">
+        Interrupt
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground" @click="audio.cleanup()">
+        Cleanup
+      </button>
+    </div>
+
+    <div class="h-3 w-full overflow-hidden rounded-full bg-muted">
+      <div
+        class="h-full bg-primary transition-[width] duration-100"
+        :style="{ width: audio.audioLevel.value + '%' }"
+      />
+    </div>
+
+    <pre class="rounded-md bg-muted p-3 font-mono text-xs">{{ summary }}</pre>
+
+    <div>
+      <p class="mb-1 text-xs font-semibold text-muted-foreground">log</p>
+      <ul class="max-h-32 space-y-0.5 overflow-y-auto rounded-md bg-background p-2 font-mono text-xs">
+        <li v-for="(line, i) in log" :key="i">{{ line }}</li>
+        <li v-if="!log.length" class="text-muted-foreground italic">no events yet</li>
+      </ul>
+    </div>
+  </div>
+</template>