@ekrist1/vulse 0.1.6-alpha.3 → 0.1.7-alpha.4

package/src/admin/components/SetEditor.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { adminApi } from '../client/api.js'
+import type { NestedFieldDefinition } from '../../core/blueprints/definition.js'
+import type { SetDefinition } from '../../core/sets/definition.js'
+
+const props = defineProps<{ handle: string | null }>()
+
+const handle = ref('')
+const label = ref('')
+const fields = reactive<NestedFieldDefinition[]>([])
+const saving = ref(false)
+const error = ref<string | null>(null)
+const handleLocked = ref(false)
+
+const isCreate = computed(() => props.handle === null)
+
+function slugify(input: string): string {
+  return input.toLowerCase().normalize('NFKD').replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '').replace(/^[^a-z]+/, '')
+}
+
+watch(label, (v) => {
+  if (isCreate.value && !handleLocked.value) handle.value = slugify(v)
+})
+
+function onHandleInput(e: Event) {
+  handleLocked.value = true
+  handle.value = (e.target as HTMLInputElement).value
+}
+
+async function load() {
+  if (props.handle === null) {
+    handle.value = ''
+    label.value = ''
+    fields.splice(0)
+    handleLocked.value = false
+    return
+  }
+  const s = await adminApi.get<SetDefinition>(`/api/vulse/sets/${props.handle}`)
+  handle.value = s.handle
+  label.value = s.label
+  handleLocked.value = true
+  fields.splice(0, fields.length, ...s.fields)
+}
+
+onMounted(load)
+watch(() => props.handle, load)
+
+function addField() {
+  fields.push({ name: '', ui: { kind: 'text' }, optional: false })
+}
+
+async function save() {
+  saving.value = true
+  error.value = null
+  try {
+    const body = { handle: handle.value, label: label.value, fields: [...fields] }
+    if (isCreate.value) {
+      await adminApi.post('/api/vulse/sets', body)
+      window.location.href = '/admin/settings/sets'
+    } else {
+      await adminApi.patch(`/api/vulse/sets/${props.handle}`, body)
+      window.location.href = '/admin/settings/sets'
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Save failed'
+  } finally {
+    saving.value = false
+  }
+}
+
+async function destroy() {
+  if (!props.handle || !confirm(`Delete set "${props.handle}"?`)) return
+  await adminApi.delete(`/api/vulse/sets/${props.handle}`)
+  window.location.href = '/admin/settings/sets'
+}
+</script>
+
+<template>
+  <div>
+    <h1 class="mb-6 text-2xl font-semibold">{{ isCreate ? 'New set' : `Edit ${handle}` }}</h1>
+    <div class="max-w-3xl space-y-4">
+      <div class="space-y-3 rounded-xl border border-zinc-200 bg-white p-4">
+        <label class="block">
+          <span class="text-sm font-medium text-zinc-700">Label</span>
+          <input v-model="label" class="mt-1 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm" />
+        </label>
+        <label class="block">
+          <span class="text-sm font-medium text-zinc-700">Handle</span>
+          <input :value="handle" :disabled="!isCreate" class="mt-1 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm disabled:bg-zinc-100" @input="onHandleInput" />
+          <span class="mt-1 block text-xs text-zinc-500">
+            <template v-if="isCreate">
+              Stable identifier referenced by blueprints (in <code>blocks</code> and <code>replicator</code> fields) and any frontend code that renders this set.
+            </template>
+            <template v-else>
+              Locked — changing it would break every blueprint and frontend reference to this set. Create a new set and migrate to rename.
+            </template>
+          </span>
+        </label>
+      </div>
+
+      <div class="rounded-xl border border-zinc-200 bg-white p-4">
+        <div class="mb-3 flex items-center justify-between">
+          <h2 class="text-sm font-semibold text-zinc-700">Fields</h2>
+          <button type="button" class="rounded-lg border border-zinc-300 px-2 py-1 text-xs" @click="addField">+ Add field</button>
+        </div>
+        <div v-for="(f, i) in fields" :key="i" class="mb-3 rounded-lg border border-zinc-100 p-3">
+          <div class="flex flex-wrap items-center gap-2">
+            <input v-model="f.name" placeholder="name" class="flex-1 rounded border border-zinc-300 px-2 py-1 text-sm" />
+            <select v-model="f.ui.kind" class="rounded border border-zinc-300 px-2 py-1 text-sm">
+              <option value="text">text</option>
+              <option value="textarea">textarea</option>
+              <option value="blocks">blocks</option>
+              <option value="date">date</option>
+              <option value="boolean">boolean</option>
+              <option value="select">select</option>
+              <option value="relationship">relationship</option>
+              <option value="entry">entry</option>
+              <option value="entries">entries</option>
+              <option value="link">link</option>
+              <option value="asset">asset</option>
+            </select>
+            <label class="flex items-center gap-1 text-xs"><input v-model="f.optional" type="checkbox" /> optional</label>
+            <button type="button" class="text-xs text-red-600" @click="fields.splice(i, 1)">Remove</button>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="error" class="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">{{ error }}</div>
+      <div class="flex items-center gap-2">
+        <button type="button" class="vulse-button-primary rounded-lg px-4 py-2 text-sm font-medium" :disabled="saving" @click="save">{{ saving ? 'Saving…' : 'Save' }}</button>
+        <button v-if="!isCreate" type="button" class="ml-auto rounded-lg border border-red-300 px-4 py-2 text-sm text-red-600" @click="destroy">Delete</button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/admin/components/SetList.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { adminApi } from '../client/api.js'
+import type { SetDefinition } from '../../core/sets/definition.js'
+
+const sets = ref<SetDefinition[]>([])
+
+onMounted(async () => {
+  sets.value = await adminApi.get<SetDefinition[]>('/api/vulse/sets')
+})
+</script>
+
+<template>
+  <div>
+    <div class="mb-6 flex items-center justify-between">
+      <h1 class="text-2xl font-semibold tracking-tight">Sets</h1>
+      <a href="/admin/settings/sets/new" class="vulse-button-primary rounded-lg px-4 py-2 text-sm font-medium">+ New set</a>
+    </div>
+    <div class="rounded-xl border border-zinc-200 bg-white">
+      <a
+        v-for="s in sets"
+        :key="s.handle"
+        :href="`/admin/settings/sets/${s.handle}`"
+        class="flex items-center justify-between border-b border-zinc-100 px-4 py-3 text-sm last:border-0 hover:bg-zinc-50"
+      >
+        <span class="font-medium">{{ s.label }}</span>
+        <span class="font-mono text-xs text-zinc-500">{{ s.handle }}</span>
+      </a>
+      <p v-if="sets.length === 0" class="px-4 py-6 text-sm text-zinc-500">No sets yet.</p>
+    </div>
+  </div>
+</template>

package/src/admin/components/SettingsForm.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { adminApi, AdminApiError } from '../client/api'
+
+interface Values {
+  siteName: string
+  deployHookUrl: string
+  defaultLocale: string
+  locales: string[]
+}
+
+const values = ref<Values>({ siteName: '', deployHookUrl: '', defaultLocale: 'default', locales: ['default'] })
+const initial = ref<Values>({ siteName: '', deployHookUrl: '', defaultLocale: 'default', locales: ['default'] })
+const loading = ref(true)
+const saving = ref(false)
+const saved = ref(false)
+const error = ref<string | null>(null)
+const localesText = ref('default')
+
+const LOCALE_RE = /^[a-z]{2,3}(-[A-Z]{2})?$|^default$/
+
+const localesValid = computed(() => {
+  const codes = parseLocales(localesText.value)
+  if (codes.length === 0) return 'Add at least one locale.'
+  for (const c of codes) {
+    if (!LOCALE_RE.test(c)) return `Invalid locale code: ${c}`
+  }
+  if (!codes.includes(values.value.defaultLocale)) return `Default locale "${values.value.defaultLocale}" must appear in the supported list.`
+  return null
+})
+
+function parseLocales(text: string): string[] {
+  return text.split(',').map((s) => s.trim()).filter(Boolean)
+}
+
+const supportedLocales = computed(() => parseLocales(localesText.value))
+
+watch(localesText, () => {
+  const codes = supportedLocales.value
+  if (codes.length > 0 && !codes.includes(values.value.defaultLocale)) {
+    values.value.defaultLocale = codes[0]
+  }
+})
+
+async function load() {
+  loading.value = true
+  try {
+    const all = await adminApi.get<Record<string, unknown>>('/api/vulse/settings')
+    const locales = Array.isArray(all.locales) && all.locales.length
+      ? (all.locales as string[])
+      : ['default']
+    const defaultLocale = typeof all.defaultLocale === 'string' ? all.defaultLocale : 'default'
+    const next: Values = {
+      siteName: String(all.siteName ?? ''),
+      deployHookUrl: String(all.deployHookUrl ?? ''),
+      defaultLocale,
+      locales,
+    }
+    values.value = { ...next }
+    initial.value = { ...next, locales: [...next.locales] }
+    localesText.value = locales.join(', ')
+  } finally {
+    loading.value = false
+  }
+}
+
+function dirty(key: keyof Values): boolean {
+  if (key === 'locales') {
+    const a = parseLocales(localesText.value)
+    const b = initial.value.locales
+    return a.length !== b.length || a.some((v, i) => v !== b[i])
+  }
+  return values.value[key] !== initial.value[key]
+}
+
+function anyDirty(): boolean {
+  return dirty('siteName') || dirty('deployHookUrl') || dirty('defaultLocale') || dirty('locales')
+}
+
+async function save() {
+  if (!anyDirty()) return
+  if (localesValid.value) {
+    error.value = localesValid.value
+    return
+  }
+  saving.value = true
+  saved.value = false
+  error.value = null
+  try {
+    values.value.locales = parseLocales(localesText.value)
+    if (dirty('siteName')) await adminApi.put('/api/vulse/settings/siteName', { value: values.value.siteName })
+    if (dirty('deployHookUrl')) await adminApi.put('/api/vulse/settings/deployHookUrl', { value: values.value.deployHookUrl })
+    if (dirty('defaultLocale')) await adminApi.put('/api/vulse/settings/defaultLocale', { value: values.value.defaultLocale })
+    if (dirty('locales')) await adminApi.put('/api/vulse/settings/locales', { value: values.value.locales })
+    initial.value = { ...values.value, locales: [...values.value.locales] }
+    saved.value = true
+  } catch (e) {
+    error.value = e instanceof AdminApiError ? e.message : 'Save failed'
+  } finally {
+    saving.value = false
+  }
+}
+
+function onInput() {
+  saved.value = false
+  error.value = null
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <form class="vulse-panel max-w-md space-y-4" @submit.prevent="save">
+    <p v-if="loading" class="text-sm text-zinc-500">Loading…</p>
+    <template v-else>
+      <label class="block">
+        <span class="text-sm font-medium text-zinc-700">Site name</span>
+        <input
+          v-model="values.siteName"
+          class="mt-1 w-full rounded border border-zinc-300 px-3 py-2 text-sm"
+          @input="onInput"
+        />
+      </label>
+      <label class="block">
+        <span class="text-sm font-medium text-zinc-700">Deploy hook URL</span>
+        <input
+          v-model="values.deployHookUrl"
+          class="mt-1 w-full rounded border border-zinc-300 px-3 py-2 text-sm"
+          placeholder="https://api.cloudflare.com/client/v4/pages/…/deploy_hooks/…"
+          @input="onInput"
+        />
+        <span class="mt-1 block text-xs text-zinc-500">
+          Called after publishing entries to trigger a rebuild (e.g. a Cloudflare Pages deploy hook).
+        </span>
+      </label>
+
+      <fieldset class="space-y-3 rounded border border-zinc-200 bg-white p-4">
+        <legend class="text-sm font-semibold text-zinc-700">Locales</legend>
+        <p class="text-xs text-zinc-500">
+          Each entry can be authored once per supported locale. The default locale is used when callers don't pass one.
+        </p>
+        <label class="block">
+          <span class="text-sm font-medium text-zinc-700">Supported locales</span>
+          <input
+            v-model="localesText"
+            class="mt-1 w-full rounded border border-zinc-300 px-3 py-2 font-mono text-sm"
+            placeholder="default, en, nb-NO"
+            @input="onInput"
+          />
+          <span class="mt-1 block text-xs text-zinc-500">
+            Comma-separated BCP-47 codes (e.g. <code>en</code>, <code>nb-NO</code>). The literal <code>default</code> is allowed for sites that don't ship multilingual content.
+          </span>
+        </label>
+        <label class="block">
+          <span class="text-sm font-medium text-zinc-700">Default locale</span>
+          <select
+            v-if="supportedLocales.length"
+            v-model="values.defaultLocale"
+            class="mt-1 w-full rounded border border-zinc-300 px-3 py-2 font-mono text-sm"
+            @change="onInput"
+          >
+            <option v-for="code in supportedLocales" :key="code" :value="code">{{ code }}</option>
+          </select>
+          <input
+            v-else
+            v-model="values.defaultLocale"
+            class="mt-1 w-full rounded border border-zinc-300 px-3 py-2 font-mono text-sm"
+            disabled
+            placeholder="Add supported locales first"
+          />
+        </label>
+        <p v-if="localesValid" class="rounded bg-red-50 px-3 py-2 text-sm text-red-700">{{ localesValid }}</p>
+      </fieldset>
+
+      <p v-if="error" class="rounded bg-red-50 px-3 py-2 text-sm text-red-700">{{ error }}</p>
+      <div class="flex items-center gap-3 pt-2">
+        <button
+          type="submit"
+          class="vulse-button-primary rounded px-4 py-2 text-sm font-medium disabled:opacity-50"
+          :disabled="saving || !anyDirty() || !!localesValid"
+        >
+          {{ saving ? 'Saving…' : 'Save' }}
+        </button>
+        <span v-if="saved" class="text-sm text-zinc-500">Saved.</span>
+        <span v-else-if="anyDirty()" class="text-sm text-amber-600">Unsaved changes</span>
+      </div>
+    </template>
+  </form>
+</template>

package/src/admin/components/SideNav.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import CollectionKindIcon from './CollectionKindIcon.vue'
+
+const logoUrl = new URL('../assets/logo-mark.svg', import.meta.url).href
+
+const props = defineProps<{
+  collections: { name: string; label: string; singleton?: boolean }[]
+  activePath?: string
+  userEmail?: string
+  isAdmin?: boolean
+}>()
+
+const schemaOpen = ref(false)
+
+const SCHEMA_OPEN_KEY = 'vulse.sidebar.schema.open'
+
+onMounted(() => {
+  try {
+    schemaOpen.value = localStorage.getItem(SCHEMA_OPEN_KEY) === '1'
+  } catch {
+    // ignore
+  }
+})
+
+watch(schemaOpen, (v) => {
+  try { localStorage.setItem(SCHEMA_OPEN_KEY, v ? '1' : '0') } catch { /* ignore */ }
+})
+
+function navClass(href: string) {
+  const active = props.activePath === href || (href !== '/admin' && props.activePath?.startsWith(href))
+  return ['vulse-nav-link rounded-xl text-sm text-zinc-800', active && 'vulse-nav-link-active'].filter(Boolean)
+}
+
+function subNavClass(href: string, exact = false) {
+  const active = exact ? props.activePath === href : props.activePath?.startsWith(href)
+  return ['block rounded px-2 py-1.5 text-sm hover:bg-zinc-100', active && 'bg-zinc-100 font-medium']
+    .filter(Boolean)
+    .join(' ')
+}
+
+async function signOut() {
+  await fetch('/api/auth/sign-out', {
+    method: 'POST',
+    credentials: 'same-origin',
+    headers: { 'content-type': 'application/json' },
+    body: '{}',
+  })
+  window.location.href = '/admin/login'
+}
+</script>
+
+<template>
+  <aside class="w-[var(--vulse-sidebar-width)] min-h-screen border-r border-zinc-200 bg-white shrink-0">
+    <div class="px-4 py-3 font-semibold tracking-tight flex items-center gap-2">
+      <img class="h-8 w-8" :src="logoUrl" alt="Vulse" />
+      Vulse
+    </div>
+
+    <div v-if="userEmail" class="border-y border-zinc-100 px-4 py-2 text-xs">
+      <div class="font-mono text-zinc-700">{{ userEmail }}</div>
+      <button type="button" class="mt-1 text-zinc-500 hover:text-zinc-900" @click="signOut">
+        Sign out
+      </button>
+    </div>
+
+    <nav class="px-2 pb-6">
+      <div class="px-2 pt-2 text-xs uppercase tracking-wide text-zinc-500">Collections</div>
+      <a
+        v-for="c in collections"
+        :key="`coll-${c.name}`"
+        :href="`/admin/collections/${c.name}`"
+        :class="navClass(`/admin/collections/${c.name}`)"
+      >
+        <span class="flex items-center gap-2">
+          <CollectionKindIcon :singleton="c.singleton" />
+          <span>{{ c.label }}</span>
+        </span>
+      </a>
+
+      <div class="px-2 pt-4 text-xs uppercase tracking-wide text-zinc-500">Forms</div>
+      <a href="/admin/forms" :class="navClass('/admin/forms')">
+        <span class="flex items-center gap-2">
+          <svg class="h-4 w-4 shrink-0 text-zinc-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M2.5 4A1.5 1.5 0 0 1 4 2.5h12A1.5 1.5 0 0 1 17.5 4v12a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 16V4ZM4 4v12h12V4H4Zm2 2h8v1.5H6V6Zm0 3h8v1.5H6V9Zm0 3h5v1.5H6V12Z" />
+          </svg>
+          <span>Forms</span>
+        </span>
+      </a>
+
+      <div class="px-2 pt-4 text-xs uppercase tracking-wide text-zinc-500">Media</div>
+      <a href="/admin/media" :class="navClass('/admin/media')">
+        <span class="flex items-center gap-2">
+          <svg class="h-4 w-4 shrink-0 text-zinc-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M3 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2 0v8.586l2.293-2.293a1 1 0 0 1 1.414 0L11 13.586l2.293-2.293a1 1 0 0 1 1.414 0L15 11.586V5H5Zm9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd" />
+          </svg>
+          <span>Assets</span>
+        </span>
+      </a>
+
+      <div class="px-2 pt-4 text-xs uppercase tracking-wide text-zinc-500">Schema</div>
+      <button
+        type="button"
+        class="flex w-full items-center gap-1 rounded px-2 py-1.5 text-left text-sm hover:bg-zinc-100"
+        :aria-expanded="schemaOpen"
+        @click="schemaOpen = !schemaOpen"
+      >
+        <span class="inline-block w-3 text-zinc-400">{{ schemaOpen ? '▾' : '▸' }}</span>
+        <span>Collections</span>
+      </button>
+      <div v-if="schemaOpen" class="ml-4">
+        <a
+          v-for="c in collections"
+          :key="`schema-${c.name}`"
+          :href="`/admin/schema/${c.name}`"
+          :class="navClass(`/admin/schema/${c.name}`)"
+        >
+          <span class="flex items-center gap-2">
+            <CollectionKindIcon :singleton="c.singleton" />
+            <span>{{ c.label }}</span>
+          </span>
+        </a>
+        <a href="/admin/schema/new" :class="navClass('/admin/schema/new')" class="text-zinc-600">
+          + New collection
+        </a>
+      </div>
+      <a
+        v-if="isAdmin"
+        href="/admin/settings/sets"
+        :class="subNavClass('/admin/settings/sets')"
+      >
+        Sets
+      </a>
+      <a
+        v-if="isAdmin"
+        href="/admin/settings/globals"
+        :class="subNavClass('/admin/settings/globals')"
+      >
+        Globals
+      </a>
+
+      <template v-if="isAdmin">
+        <div class="px-2 pt-4 text-xs uppercase tracking-wide text-zinc-500">Users</div>
+        <a href="/admin/users" :class="subNavClass('/admin/users')">Users</a>
+
+        <div class="px-2 pt-4 text-xs uppercase tracking-wide text-zinc-500">Settings</div>
+        <a href="/admin/settings" :class="subNavClass('/admin/settings', true)">Site</a>
+        <a href="/admin/settings/auth" :class="subNavClass('/admin/settings/auth', true)">Auth</a>
+      </template>
+    </nav>
+  </aside>
+</template>

package/src/admin/components/SubmissionDetail.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { adminApi } from '../client/api.js'
+
+const props = defineProps<{ formHandle: string; submissionId: string }>()
+
+interface SubmissionRow {
+  id: string
+  payload: Record<string, unknown>
+  fileRefs: { field: string; mediaId: string }[]
+  status: string
+  error: string | null
+  createdAt: string
+}
+
+const row = ref<SubmissionRow | null>(null)
+
+onMounted(async () => {
+  row.value = await adminApi.get<SubmissionRow>(`/api/vulse/forms/${props.formHandle}/submissions/${props.submissionId}`)
+})
+
+async function destroy() {
+  if (!confirm('Delete this submission?')) return
+  await adminApi.delete(`/api/vulse/forms/${props.formHandle}/submissions/${props.submissionId}`)
+  window.location.href = `/admin/forms/${props.formHandle}/submissions`
+}
+</script>
+
+<template>
+  <div v-if="row">
+    <div class="mb-6 flex items-center justify-between">
+      <h1 class="text-2xl font-semibold">Submission</h1>
+      <button type="button" class="rounded border border-red-200 px-3 py-1 text-sm text-red-700" @click="destroy">Delete</button>
+    </div>
+    <p class="mb-2 text-sm text-zinc-500">Status: <span class="rounded bg-zinc-100 px-2 py-0.5">{{ row.status }}</span></p>
+    <p v-if="row.error" class="mb-4 text-sm text-red-600">{{ row.error }}</p>
+    <pre class="rounded-xl border border-zinc-200 bg-white p-4 text-xs">{{ JSON.stringify(row.payload, null, 2) }}</pre>
+    <div v-if="row.fileRefs.length" class="mt-4">
+      <h2 class="text-sm font-semibold">Files</h2>
+      <ul class="mt-2 text-sm">
+        <li v-for="f in row.fileRefs" :key="f.mediaId">{{ f.field }}: {{ f.mediaId }}</li>
+      </ul>
+    </div>
+  </div>
+</template>

package/src/admin/components/SubmissionList.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { adminApi } from '../client/api.js'
+
+const props = defineProps<{ formHandle: string }>()
+
+interface SubmissionRow {
+  id: string
+  payload: Record<string, unknown>
+  status: string
+  createdAt: string
+}
+
+const rows = ref<SubmissionRow[]>([])
+const selected = ref<Set<string>>(new Set())
+const loading = ref(true)
+
+const previewField = computed(() => {
+  const first = rows.value[0]
+  if (!first) return null
+  const entry = Object.entries(first.payload).find(([k]) => !k.startsWith('_'))
+  return entry?.[1]
+})
+
+onMounted(async () => {
+  rows.value = await adminApi.get<SubmissionRow[]>(`/api/vulse/forms/${props.formHandle}/submissions`)
+  loading.value = false
+})
+
+function toggle(id: string) {
+  if (selected.value.has(id)) selected.value.delete(id)
+  else selected.value.add(id)
+}
+
+async function bulkDelete() {
+  if (selected.value.size === 0 || !confirm(`Delete ${selected.value.size} submission(s)?`)) return
+  await adminApi.post(`/api/vulse/forms/${props.formHandle}/submissions/delete`, { ids: [...selected.value] })
+  rows.value = rows.value.filter((r) => !selected.value.has(r.id))
+  selected.value.clear()
+}
+
+function exportCsv() {
+  if (rows.value.length === 0) return
+  const keys = [...new Set(rows.value.flatMap((r) => Object.keys(r.payload)))]
+  const lines = [keys.join(',')]
+  for (const r of rows.value) {
+    lines.push(keys.map((k) => JSON.stringify(r.payload[k] ?? '')).join(','))
+  }
+  const blob = new Blob([lines.join('\n')], { type: 'text/csv' })
+  const a = document.createElement('a')
+  a.href = URL.createObjectURL(blob)
+  a.download = `${props.formHandle}-submissions.csv`
+  a.click()
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-6 flex items-center justify-between">
+      <h1 class="text-2xl font-semibold">Submissions</h1>
+      <div class="flex gap-2">
+        <button type="button" class="rounded border border-zinc-300 px-3 py-1 text-sm" @click="exportCsv">Export CSV</button>
+        <button type="button" class="rounded border border-red-200 px-3 py-1 text-sm text-red-700" :disabled="selected.size === 0" @click="bulkDelete">Delete selected</button>
+      </div>
+    </div>
+    <p v-if="loading" class="text-sm text-zinc-500">Loading…</p>
+    <table v-else class="w-full text-sm">
+      <thead>
+        <tr class="border-b border-zinc-200 text-left text-zinc-500">
+          <th class="py-2 pr-2"></th>
+          <th class="py-2 pr-4">Preview</th>
+          <th class="py-2 pr-4">Status</th>
+          <th class="py-2 pr-4">Created</th>
+          <th class="py-2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="r in rows" :key="r.id" class="border-b border-zinc-100">
+          <td class="py-2 pr-2"><input type="checkbox" :checked="selected.has(r.id)" @change="toggle(r.id)" /></td>
+          <td class="py-2 pr-4 max-w-xs truncate">{{ Object.values(r.payload)[0] }}</td>
+          <td class="py-2 pr-4"><span class="rounded bg-zinc-100 px-2 py-0.5 text-xs">{{ r.status }}</span></td>
+          <td class="py-2 pr-4 text-xs text-zinc-500">{{ new Date(r.createdAt).toLocaleString() }}</td>
+          <td class="py-2"><a :href="`/admin/forms/${formHandle}/submissions/${r.id}`" class="hover:underline">View</a></td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-if="!loading && rows.length === 0" class="text-sm text-zinc-500">No submissions yet.</p>
+  </div>
+</template>