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

package/src/admin/components/FormEditor.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { adminApi, AdminApiError } from '../client/api.js'
+import type { FormDefinition, FormFieldDefinition } from '../../core/forms/definition.js'
+
+interface FormRow {
+  handle: string
+  label: string
+  definition: FormDefinition
+  enabled: boolean
+}
+
+const props = defineProps<{ handle: string | null }>()
+
+const tab = ref<'fields' | 'settings' | 'emails' | 'embed'>('fields')
+const handle = ref('')
+const label = ref('')
+const fields = reactive<FormFieldDefinition[]>([])
+const settings = reactive({
+  enabled: true,
+  successMessage: 'Thank you!',
+  redirectTo: '',
+  honeypotField: '_hp',
+  notifyEmails: [] as string[],
+  confirmationEmail: {
+    enabled: false,
+    toField: 'email',
+    subject: 'Thanks for your submission',
+    bodyTemplate: 'We received your message.',
+  },
+})
+const saving = ref(false)
+const error = ref<string | null>(null)
+const handleLocked = ref(false)
+
+const isCreate = computed(() => props.handle === null)
+
+const embedSnippet = computed(() => `<FormRenderer form="${handle.value || 'my-form'}">
+  <!-- your field markup -->
+</FormRenderer>`)
+
+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 row = await adminApi.get<FormRow>(`/api/vulse/forms/${props.handle}`)
+  handle.value = row.handle
+  label.value = row.label
+  handleLocked.value = true
+  fields.splice(0, fields.length, ...row.definition.fields)
+  Object.assign(settings, {
+    enabled: row.enabled,
+    successMessage: row.definition.settings.successMessage ?? 'Thank you!',
+    redirectTo: row.definition.settings.redirectTo ?? '',
+    honeypotField: row.definition.settings.honeypotField ?? '_hp',
+    notifyEmails: row.definition.settings.notifyEmails ?? [],
+    confirmationEmail: row.definition.settings.confirmationEmail ?? settings.confirmationEmail,
+  })
+}
+
+function formatApiError(e: unknown): string {
+  if (!(e instanceof AdminApiError)) return e instanceof Error ? e.message : 'Save failed'
+  const issues = (e.details as { issues?: Array<{ path?: (string | number)[]; message?: string }> } | undefined)?.issues
+  if (issues?.length) {
+    return issues.map((issue) => {
+      const path = issue.path?.length ? issue.path.join('.') : 'form'
+      return `${path}: ${issue.message ?? 'invalid'}`
+    }).join('; ')
+  }
+  return e.message
+}
+
+onMounted(load)
+watch(() => props.handle, load)
+
+function addField() {
+  fields.push({ name: '', ui: { kind: 'text' }, optional: false })
+}
+
+function buildDefinition(): FormDefinition {
+  return {
+    handle: handle.value,
+    label: label.value,
+    fields: [...fields],
+    settings: {
+      enabled: settings.enabled,
+      successMessage: settings.successMessage,
+      redirectTo: settings.redirectTo || undefined,
+      honeypotField: settings.honeypotField,
+      notifyEmails: settings.notifyEmails.filter(Boolean),
+      confirmationEmail: settings.confirmationEmail.enabled ? settings.confirmationEmail : undefined,
+    },
+    actions: [],
+  }
+}
+
+async function save() {
+  error.value = null
+  for (const field of fields) {
+    if (!field.name.trim()) {
+      error.value = 'Each field must have a name.'
+      return
+    }
+  }
+  saving.value = true
+  try {
+    const body = buildDefinition()
+    if (isCreate.value) {
+      await adminApi.post('/api/vulse/forms', body)
+      window.location.href = `/admin/forms/${handle.value}`
+    } else {
+      await adminApi.put(`/api/vulse/forms/${props.handle}`, body)
+    }
+  } catch (e) {
+    error.value = formatApiError(e)
+  } finally {
+    saving.value = false
+  }
+}
+
+async function destroy() {
+  if (!props.handle || !confirm(`Delete form "${props.handle}"?`)) return
+  await adminApi.delete(`/api/vulse/forms/${props.handle}`)
+  window.location.href = '/admin/forms'
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-4 flex items-center justify-between">
+      <h1 class="text-2xl font-semibold">{{ isCreate ? 'New form' : label }}</h1>
+      <a v-if="!isCreate" :href="`/admin/forms/${handle}/submissions`" class="text-sm text-zinc-600 hover:underline">View submissions</a>
+    </div>
+
+    <div class="mb-4 flex gap-2 border-b border-zinc-200">
+      <button v-for="t in ['fields', 'settings', 'emails', 'embed'] as const" :key="t" type="button"
+        class="px-3 py-2 text-sm capitalize" :class="tab === t && 'border-b-2 border-zinc-900 font-medium'" @click="tab = t">
+        {{ t }}
+      </button>
+    </div>
+
+    <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" />
+        </label>
+      </div>
+
+      <div v-show="tab === 'fields'" 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" />
+            <input v-model="f.label" placeholder="label" 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="email">email</option>
+              <option value="number">number</option>
+              <option value="select">select</option>
+              <option value="checkbox">checkbox</option>
+              <option value="radio">radio</option>
+              <option value="date">date</option>
+              <option value="file">file</option>
+              <option value="hidden">hidden</option>
+              <option value="honeypot">honeypot</option>
+              <option value="submit">submit</option>
+            </select>
+            <label class="flex items-center gap-1 text-xs"><input v-model="f.optional" type="checkbox" /> optional</label>
+            <label v-if="f.validation" class="flex items-center gap-1 text-xs"><input v-model="f.validation.unique" type="checkbox" /> unique</label>
+            <button type="button" class="text-xs text-red-600" @click="fields.splice(i, 1)">Remove</button>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="tab === 'settings'" class="space-y-3 rounded-xl border border-zinc-200 bg-white p-4">
+        <label class="flex items-center gap-2 text-sm"><input v-model="settings.enabled" type="checkbox" /> Enabled</label>
+        <label class="block text-sm">Success message<input v-model="settings.successMessage" class="mt-1 w-full rounded border border-zinc-300 px-2 py-1" /></label>
+        <label class="block text-sm">Redirect URL (optional)<input v-model="settings.redirectTo" class="mt-1 w-full rounded border border-zinc-300 px-2 py-1" /></label>
+        <label class="block text-sm">Honeypot field<input v-model="settings.honeypotField" class="mt-1 w-full rounded border border-zinc-300 px-2 py-1" /></label>
+      </div>
+
+      <div v-show="tab === 'emails'" class="space-y-3 rounded-xl border border-zinc-200 bg-white p-4">
+        <label class="block text-sm">Notify emails (comma-separated)
+          <input :value="settings.notifyEmails.join(', ')" class="mt-1 w-full rounded border border-zinc-300 px-2 py-1"
+            @input="settings.notifyEmails = ($event.target as HTMLInputElement).value.split(',').map((s) => s.trim()).filter(Boolean)" />
+        </label>
+        <label class="flex items-center gap-2 text-sm"><input v-model="settings.confirmationEmail.enabled" type="checkbox" /> Send confirmation email</label>
+        <template v-if="settings.confirmationEmail.enabled">
+          <label class="block text-sm">To field<input v-model="settings.confirmationEmail.toField" class="mt-1 w-full rounded border border-zinc-300 px-2 py-1" /></label>
+          <label class="block text-sm">Subject<input v-model="settings.confirmationEmail.subject" class="mt-1 w-full rounded border border-zinc-300 px-2 py-1" /></label>
+          <label class="block text-sm">Body<textarea v-model="settings.confirmationEmail.bodyTemplate" class="mt-1 w-full rounded border border-zinc-300 px-2 py-1" rows="4" /></label>
+        </template>
+      </div>
+
+      <div v-show="tab === 'embed'" class="rounded-xl border border-zinc-200 bg-white p-4">
+        <pre class="overflow-x-auto rounded bg-zinc-50 p-3 text-xs">{{ embedSnippet }}</pre>
+      </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="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white disabled:opacity-50" :disabled="saving" @click="save">{{ saving ? 'Saving…' : 'Save' }}</button>
+        <button v-if="!isCreate" type="button" class="rounded-lg border border-red-200 px-4 py-2 text-sm text-red-700" @click="destroy">Delete</button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/admin/components/FormList.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { adminApi } from '../client/api.js'
+
+interface FormRow {
+  handle: string
+  label: string
+  enabled: boolean
+  submissionCount?: number
+}
+
+const forms = ref<FormRow[]>([])
+const loading = ref(true)
+
+onMounted(async () => {
+  forms.value = await adminApi.get<FormRow[]>('/api/vulse/forms')
+  loading.value = false
+})
+</script>
+
+<template>
+  <div>
+    <div class="mb-6 flex items-center justify-between">
+      <h1 class="text-2xl font-semibold">Forms</h1>
+      <a href="/admin/forms/new" class="rounded-lg bg-zinc-900 px-3 py-2 text-sm text-white">New form</a>
+    </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-4">Label</th>
+          <th class="py-2 pr-4">Handle</th>
+          <th class="py-2 pr-4">Enabled</th>
+          <th class="py-2 pr-4">Submissions</th>
+          <th class="py-2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="f in forms" :key="f.handle" class="border-b border-zinc-100">
+          <td class="py-2 pr-4">{{ f.label }}</td>
+          <td class="py-2 pr-4 font-mono text-xs">{{ f.handle }}</td>
+          <td class="py-2 pr-4">{{ f.enabled ? 'Yes' : 'No' }}</td>
+          <td class="py-2 pr-4">{{ f.submissionCount ?? 0 }}</td>
+          <td class="py-2 text-right">
+            <a :href="`/admin/forms/${f.handle}`" class="text-zinc-700 hover:underline">Edit</a>
+            ·
+            <a :href="`/admin/forms/${f.handle}/submissions`" class="text-zinc-700 hover:underline">Submissions</a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-if="!loading && forms.length === 0" class="mt-4 text-sm text-zinc-500">No forms yet.</p>
+  </div>
+</template>

package/src/admin/components/GlobalSetEditor.vue

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { adminApi, AdminApiError } from '../client/api.js'
+import { fieldDescriptorsFromDefinitions } from '../client/form-from-zod.js'
+import type { FieldDescriptor } from '../client/form-from-zod.js'
+import type { FieldDefinition } from '../../core/blueprints/definition.js'
+import FieldRenderer from './fields/FieldRenderer.vue'
+
+const props = defineProps<{ handle: string | null }>()
+
+const handle = ref('')
+const label = ref('')
+const fields = reactive<FieldDefinition[]>([])
+const content = reactive<Record<string, unknown>>({})
+const fieldErrors = reactive<Record<string, string>>({})
+const savingDefinition = ref(false)
+const savingValue = ref(false)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const handleLocked = ref(false)
+
+const isCreate = computed(() => props.handle === null)
+const fieldDescriptors = computed<FieldDescriptor[]>(() => fieldDescriptorsFromDefinitions(fields))
+const canEditValue = computed(() => !isCreate.value && fields.length > 0)
+
+function slugify(input: string): string {
+  return input.toLowerCase().normalize('NFKD').replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '').replace(/^[^a-z]+/, '')
+}
+
+function defaultFor(kind: string): unknown {
+  if (kind === 'boolean') return false
+  if (kind === 'blocks') return { type: 'doc', content: [{ type: 'paragraph' }] }
+  if (kind === 'date') {
+    const d = new Date()
+    const pad = (n: number) => String(n).padStart(2, '0')
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+  }
+  return ''
+}
+
+function ensureContentFields() {
+  for (const field of fields) {
+    if (!(field.name in content)) content[field.name] = field.default ?? defaultFor(field.ui.kind)
+  }
+}
+
+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() {
+  for (const key of Object.keys(content)) delete content[key]
+  for (const key of Object.keys(fieldErrors)) delete fieldErrors[key]
+  error.value = null
+
+  if (props.handle === null) {
+    handle.value = ''
+    label.value = ''
+    fields.splice(0)
+    handleLocked.value = false
+    return
+  }
+
+  loading.value = true
+  try {
+    const result = await adminApi.get<{
+      set: { handle: string; label: string; fields: FieldDefinition[] }
+      value: { content: Record<string, unknown> } | null
+    }>(`/api/vulse/globals/${props.handle}`)
+    handle.value = result.set.handle
+    label.value = result.set.label
+    fields.splice(0, fields.length, ...result.set.fields)
+    handleLocked.value = true
+    ensureContentFields()
+    Object.assign(content, result.value?.content ?? {})
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+watch(() => props.handle, load)
+
+function addField() {
+  fields.push({ name: '', ui: { kind: 'text' }, optional: false })
+}
+
+function removeField(index: number) {
+  const [field] = fields.splice(index, 1)
+  if (field?.name) delete content[field.name]
+}
+
+function updateFieldName(index: number, event: Event) {
+  const field = fields[index]
+  if (!field) return
+  const oldName = field.name
+  const newName = (event.target as HTMLInputElement).value
+  field.name = newName
+  if (oldName && oldName in content && !(newName in content)) {
+    content[newName] = content[oldName]
+    delete content[oldName]
+  }
+}
+
+function formatApiError(e: unknown): string {
+  if (!(e instanceof AdminApiError)) return e instanceof Error ? e.message : 'Save failed'
+  const issues = (e.details as { issues?: Array<{ path?: (string | number)[]; message?: string }> } | undefined)?.issues
+  if (issues?.length) {
+    return issues.map((issue) => {
+      const path = issue.path?.length ? issue.path.join('.') : 'form'
+      return `${path}: ${issue.message ?? 'invalid'}`
+    }).join('; ')
+  }
+  return e.message
+}
+
+function applyValueErrors(e: AdminApiError) {
+  for (const key of Object.keys(fieldErrors)) delete fieldErrors[key]
+  const issues = (e.details as { issues?: Array<{ path?: (string | number)[]; message?: string }> } | undefined)?.issues
+  if (issues?.length) {
+    for (const issue of issues) {
+      const field = String(issue.path?.[0] ?? '')
+      if (field) fieldErrors[field] = issue.message ?? 'Invalid'
+    }
+    return
+  }
+  error.value = e.message
+}
+
+async function saveDefinition() {
+  error.value = null
+  for (const field of fields) {
+    if (!field.name.trim()) {
+      error.value = 'Each field must have a name.'
+      return
+    }
+  }
+  savingDefinition.value = true
+  try {
+    const body = { handle: handle.value, label: label.value, fields: [...fields] }
+    if (isCreate.value) {
+      await adminApi.post('/api/vulse/globals', body)
+      window.location.href = `/admin/settings/globals/${handle.value}`
+    } else {
+      await adminApi.put(`/api/vulse/globals/${props.handle}`, body)
+      ensureContentFields()
+    }
+  } catch (e) {
+    error.value = formatApiError(e)
+  } finally {
+    savingDefinition.value = false
+  }
+}
+
+async function saveValue() {
+  if (isCreate.value) return
+  error.value = null
+  for (const key of Object.keys(fieldErrors)) delete fieldErrors[key]
+  savingValue.value = true
+  try {
+    await adminApi.put(`/api/vulse/globals/${props.handle}/value`, { ...content })
+  } catch (e) {
+    if (e instanceof AdminApiError) applyValueErrors(e)
+    else error.value = 'Save failed'
+  } finally {
+    savingValue.value = false
+  }
+}
+
+async function destroy() {
+  if (!props.handle || !confirm(`Delete global set "${props.handle}"?`)) return
+  await adminApi.delete(`/api/vulse/globals/${props.handle}`)
+  window.location.href = '/admin/settings/globals'
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-6 flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-semibold">{{ isCreate ? 'New global set' : label }}</h1>
+        <p class="mt-1 text-sm text-zinc-500">Globals are site-wide content available to the frontend on every page.</p>
+      </div>
+      <button v-if="!isCreate" type="button" class="rounded-lg border border-red-200 px-4 py-2 text-sm text-red-700" @click="destroy">Delete</button>
+    </div>
+
+    <p v-if="loading" class="text-sm text-zinc-500">Loading…</p>
+    <div v-else class="grid max-w-5xl gap-6 lg:grid-cols-2">
+      <section class="space-y-4 rounded-xl border border-zinc-200 bg-white p-4">
+        <div>
+          <h2 class="text-sm font-semibold text-zinc-700">Definition</h2>
+          <p class="mt-1 text-xs text-zinc-500">Define the fields editors can fill in for this global set.</p>
+        </div>
+
+        <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 exposed by the public globals API (<code>/api/vulse/public/globals/{{ handle || 'handle' }}</code>) and used by any frontend code that reads this global.
+            </template>
+            <template v-else>
+              Locked — changing it would break the public API path and any frontend code that loads this global by handle. Create a new global to rename.
+            </template>
+          </span>
+        </label>
+
+        <div>
+          <div class="mb-3 flex items-center justify-between">
+            <h3 class="text-sm font-semibold text-zinc-700">Fields</h3>
+            <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 :value="f.name" placeholder="name" class="flex-1 rounded border border-zinc-300 px-2 py-1 text-sm" @input="updateFieldName(i, $event)" />
+              <input v-model="f.label" placeholder="label" 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="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="removeField(i)">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>
+        <button type="button" class="vulse-button-primary rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50" :disabled="savingDefinition" @click="saveDefinition">
+          {{ savingDefinition ? 'Saving…' : (isCreate ? 'Create set' : 'Save definition') }}
+        </button>
+      </section>
+
+      <section class="space-y-4 rounded-xl border border-zinc-200 bg-white p-4">
+        <div>
+          <h2 class="text-sm font-semibold text-zinc-700">Content</h2>
+          <p class="mt-1 text-xs text-zinc-500">Values exposed via the public globals API.</p>
+        </div>
+
+        <p v-if="isCreate" class="text-sm text-zinc-500">Save the definition first to edit content.</p>
+        <p v-else-if="fields.length === 0" class="text-sm text-zinc-500">Add fields to the definition to edit content.</p>
+        <template v-else>
+          <FieldRenderer
+            v-for="fd in fieldDescriptors"
+            :key="fd.path"
+            :field="fd"
+            :model-value="content[fd.path]"
+            :field-errors="fieldErrors"
+            @update:modelValue="content[fd.path] = $event"
+          />
+          <button type="button" class="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white disabled:opacity-50" :disabled="savingValue || !canEditValue" @click="saveValue">
+            {{ savingValue ? 'Saving…' : 'Save content' }}
+          </button>
+        </template>
+      </section>
+    </div>
+  </div>
+</template>

package/src/admin/components/GlobalSetList.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { adminApi } from '../client/api.js'
+
+interface GlobalSetListItem {
+  handle: string
+  label: string
+  fieldCount: number
+}
+
+const sets = ref<GlobalSetListItem[]>([])
+const loading = ref(true)
+
+onMounted(async () => {
+  sets.value = await adminApi.get<GlobalSetListItem[]>('/api/vulse/globals')
+  loading.value = false
+})
+
+async function destroy(handle: string) {
+  if (!confirm(`Delete global set "${handle}"?`)) return
+  await adminApi.delete(`/api/vulse/globals/${handle}`)
+  sets.value = sets.value.filter((s) => s.handle !== handle)
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-6 flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-semibold tracking-tight">Globals</h1>
+        <p class="mt-1 text-sm text-zinc-500">Site-wide content available on every page.</p>
+      </div>
+      <a href="/admin/settings/globals/new" class="vulse-button-primary rounded-lg px-4 py-2 text-sm font-medium">+ New global set</a>
+    </div>
+
+    <p v-if="loading" class="text-sm text-zinc-500">Loading…</p>
+    <div v-else class="rounded-xl border border-zinc-200 bg-white">
+      <div
+        v-for="s in sets"
+        :key="s.handle"
+        class="flex items-center justify-between border-b border-zinc-100 px-4 py-3 text-sm last:border-0"
+      >
+        <div>
+          <div class="font-medium">{{ s.label }}</div>
+          <div class="font-mono text-xs text-zinc-500">{{ s.handle }} · {{ s.fieldCount }} field{{ s.fieldCount === 1 ? '' : 's' }}</div>
+        </div>
+        <div class="flex items-center gap-3">
+          <a :href="`/admin/settings/globals/${s.handle}`" class="text-zinc-700 hover:underline">Edit</a>
+          <button type="button" class="text-red-600 hover:underline" @click="destroy(s.handle)">Delete</button>
+        </div>
+      </div>
+      <p v-if="sets.length === 0" class="px-4 py-6 text-sm text-zinc-500">No global sets yet.</p>
+    </div>
+  </div>
+</template>