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

package/src/admin/components/ToastHost.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useToast } from '../composables/toast.js'
+
+const { toasts, dismiss } = useToast()
+</script>
+
+<template>
+  <div
+    class="pointer-events-none fixed bottom-4 right-4 z-50 flex w-full max-w-sm flex-col gap-2"
+    aria-live="polite"
+    aria-relevant="additions"
+  >
+    <div
+      v-for="toast in toasts"
+      :key="toast.id"
+      class="pointer-events-auto flex items-start gap-3 rounded-lg border px-4 py-3 text-sm shadow-lg"
+      :class="toast.kind === 'success'
+        ? 'border-emerald-200 bg-emerald-50 text-emerald-900'
+        : 'border-red-200 bg-red-50 text-red-900'"
+      role="status"
+    >
+      <span class="flex-1">{{ toast.message }}</span>
+      <button
+        type="button"
+        class="rounded px-1 text-xs opacity-70 hover:opacity-100"
+        aria-label="Dismiss notification"
+        @click="dismiss(toast.id)"
+      >
+        ✕
+      </button>
+    </div>
+  </div>
+</template>

package/src/admin/components/TreeRow.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { EntryNode } from '../../core/repos/entries.js'
+
+const props = defineProps<{
+  node: EntryNode
+  handle: string
+  depth: number
+  expandedSet: Set<string>
+  draggingId: string | null
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: [id: string]
+  'move-up': [id: string]
+  'move-down': [id: string]
+  outdent: [id: string]
+  indent: [id: string]
+  'drag-start': [event: DragEvent, id: string]
+  'drag-over': [event: DragEvent]
+  'drop-onto': [event: DragEvent, id: string | null]
+  destroy: [id: string, label: string]
+}>()
+
+const hasChildren = computed(() => props.node.children.length > 0)
+const isOpen = computed(() => props.expandedSet.has(props.node.id))
+const isDragging = computed(() => props.draggingId === props.node.id)
+
+function label(): string {
+  const c = props.node.content as Record<string, unknown>
+  return (
+    (c.title as string | undefined) ??
+    (c.name as string | undefined) ??
+    (c.label as string | undefined) ??
+    props.node.slug ??
+    props.node.id
+  )
+}
+</script>
+
+<template>
+  <li
+    :data-testid="`tree-row-${node.id}`"
+    :draggable="!disabled"
+    :class="['flex flex-col', isDragging ? 'opacity-50' : '']"
+    @dragstart="emit('drag-start', $event, node.id)"
+  >
+    <div
+      class="flex items-center gap-1 px-2 py-1.5 hover:bg-zinc-50"
+      :style="{ paddingLeft: `${depth * 1.25 + 0.5}rem` }"
+      @dragover="emit('drag-over', $event)"
+      @drop="emit('drop-onto', $event, node.id)"
+    >
+      <button
+        v-if="hasChildren"
+        type="button"
+        class="flex h-5 w-5 items-center justify-center rounded text-zinc-500 hover:bg-zinc-200"
+        :aria-expanded="isOpen"
+        :data-testid="`tree-toggle-${node.id}`"
+        @click="emit('toggle', node.id)"
+      >
+        {{ isOpen ? '▾' : '▸' }}
+      </button>
+      <span v-else class="inline-block h-5 w-5"></span>
+      <a
+        :href="`/admin/collections/${handle}/${node.id}`"
+        class="flex-1 truncate text-sm text-zinc-800 hover:underline"
+        :data-testid="`tree-link-${node.id}`"
+      >
+        {{ label() }}
+      </a>
+      <span
+        v-if="node.hasUnpublishedChanges"
+        class="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] text-amber-800"
+      >
+        draft
+      </span>
+      <span class="hidden text-[10px] text-zinc-400 sm:inline">#{{ node.sortOrder }}</span>
+      <div class="flex shrink-0 items-center gap-0.5 text-zinc-400">
+        <button
+          type="button"
+          class="rounded px-1.5 py-0.5 text-xs hover:bg-zinc-200 hover:text-zinc-700 disabled:opacity-40"
+          :disabled="disabled"
+          title="Move up"
+          :data-testid="`tree-up-${node.id}`"
+          @click="emit('move-up', node.id)"
+        >
+          ↑
+        </button>
+        <button
+          type="button"
+          class="rounded px-1.5 py-0.5 text-xs hover:bg-zinc-200 hover:text-zinc-700 disabled:opacity-40"
+          :disabled="disabled"
+          title="Move down"
+          :data-testid="`tree-down-${node.id}`"
+          @click="emit('move-down', node.id)"
+        >
+          ↓
+        </button>
+        <button
+          type="button"
+          class="rounded px-1.5 py-0.5 text-xs hover:bg-zinc-200 hover:text-zinc-700 disabled:opacity-40"
+          :disabled="disabled || node.parentId === null"
+          title="Outdent"
+          :data-testid="`tree-outdent-${node.id}`"
+          @click="emit('outdent', node.id)"
+        >
+          ⇤
+        </button>
+        <button
+          type="button"
+          class="rounded px-1.5 py-0.5 text-xs hover:bg-zinc-200 hover:text-zinc-700 disabled:opacity-40"
+          :disabled="disabled"
+          title="Indent"
+          :data-testid="`tree-indent-${node.id}`"
+          @click="emit('indent', node.id)"
+        >
+          ⇥
+        </button>
+        <a
+          :href="`/admin/collections/${handle}/new?parent_id=${node.id}`"
+          class="rounded px-1.5 py-0.5 text-xs hover:bg-zinc-200 hover:text-zinc-700"
+          title="Add child"
+          :data-testid="`tree-add-child-${node.id}`"
+        >
+          +
+        </a>
+        <button
+          type="button"
+          class="rounded px-1.5 py-0.5 text-xs text-red-500 hover:bg-red-50 disabled:opacity-40"
+          :disabled="disabled"
+          title="Delete"
+          :data-testid="`tree-delete-${node.id}`"
+          @click="emit('destroy', node.id, label())"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+    <ul v-if="hasChildren && isOpen" class="border-t border-zinc-100">
+      <TreeRow
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :handle="handle"
+        :depth="depth + 1"
+        :expanded-set="expandedSet"
+        :dragging-id="draggingId"
+        :disabled="disabled"
+        @toggle="(id) => emit('toggle', id)"
+        @move-up="(id) => emit('move-up', id)"
+        @move-down="(id) => emit('move-down', id)"
+        @outdent="(id) => emit('outdent', id)"
+        @indent="(id) => emit('indent', id)"
+        @drag-start="(e, id) => emit('drag-start', e, id)"
+        @drag-over="(e) => emit('drag-over', e)"
+        @drop-onto="(e, id) => emit('drop-onto', e, id)"
+        @destroy="(id, lbl) => emit('destroy', id, lbl)"
+      />
+    </ul>
+  </li>
+</template>

package/src/admin/components/UserEditor.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { adminApi } from '../client/api.js'
+
+const props = defineProps<{ userId: string }>()
+
+interface UserRecord {
+  id: string
+  email: string
+  name: string
+  role: 'admin' | 'editor' | 'member'
+  displayName: string | null
+}
+
+const form = reactive({
+  name: '',
+  displayName: '',
+  role: 'member' as UserRecord['role'],
+})
+const email = ref('')
+const loading = ref(true)
+const saving = ref(false)
+const resetSending = ref(false)
+const settingPassword = ref(false)
+const newPassword = ref('')
+const error = ref<string | null>(null)
+const notice = ref<string | null>(null)
+
+async function load() {
+  loading.value = true
+  error.value = null
+  try {
+    const user = await adminApi.get<UserRecord>(`/api/vulse/users/${props.userId}`)
+    email.value = user.email
+    form.name = user.name
+    form.displayName = user.displayName ?? ''
+    form.role = user.role
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load user'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+
+async function save() {
+  saving.value = true
+  error.value = null
+  notice.value = null
+  try {
+    await adminApi.patch(`/api/vulse/users/${props.userId}`, {
+      name: form.name,
+      displayName: form.displayName || null,
+      role: form.role,
+    })
+    notice.value = 'User saved.'
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Save failed'
+  } finally {
+    saving.value = false
+  }
+}
+
+async function sendResetEmail() {
+  resetSending.value = true
+  error.value = null
+  notice.value = null
+  try {
+    await adminApi.post(`/api/vulse/users/${props.userId}/reset-password`, { action: 'email' })
+    notice.value = 'Password reset email sent (or logged in development).'
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Could not send reset email'
+  } finally {
+    resetSending.value = false
+  }
+}
+
+async function setPassword() {
+  if (newPassword.value.length < 8) {
+    error.value = 'Password must be at least 8 characters.'
+    return
+  }
+  settingPassword.value = true
+  error.value = null
+  notice.value = null
+  try {
+    await adminApi.post(`/api/vulse/users/${props.userId}/reset-password`, {
+      action: 'set',
+      password: newPassword.value,
+    })
+    newPassword.value = ''
+    notice.value = 'Password updated.'
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Could not set password'
+  } finally {
+    settingPassword.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-6 flex items-center gap-3">
+      <a href="/admin/users" class="text-sm text-zinc-500 hover:text-zinc-800">← Users</a>
+    </div>
+
+    <div v-if="loading" class="text-sm text-zinc-500">Loading…</div>
+
+    <div v-else class="max-w-xl space-y-6">
+      <h1 class="text-2xl font-semibold">Edit user</h1>
+
+      <div class="space-y-4 rounded-xl border border-zinc-200 bg-white p-4">
+        <label class="block">
+          <span class="text-sm font-medium text-zinc-700">Email</span>
+          <input :value="email" disabled class="mt-1 w-full rounded-lg border border-zinc-300 bg-zinc-50 px-3 py-2 text-sm" />
+        </label>
+        <label class="block">
+          <span class="text-sm font-medium text-zinc-700">Name</span>
+          <input v-model="form.name" required 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">Display name</span>
+          <input v-model="form.displayName" class="mt-1 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm" />
+          <span class="mt-1 block text-xs text-zinc-500">Optional public-facing name.</span>
+        </label>
+        <label class="block">
+          <span class="text-sm font-medium text-zinc-700">Role</span>
+          <select v-model="form.role" class="mt-1 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm">
+            <option value="admin">admin</option>
+            <option value="editor">editor</option>
+            <option value="member">member</option>
+          </select>
+        </label>
+      </div>
+
+      <div class="space-y-4 rounded-xl border border-zinc-200 bg-white p-4">
+        <h2 class="text-sm font-semibold text-zinc-700">Password</h2>
+        <p class="text-sm text-zinc-500">Send a reset link to the user's email, or set a new password directly.</p>
+        <div class="flex flex-wrap gap-2">
+          <button
+            type="button"
+            class="rounded-lg border border-zinc-300 px-4 py-2 text-sm"
+            :disabled="resetSending"
+            @click="sendResetEmail"
+          >
+            {{ resetSending ? 'Sending…' : 'Send reset email' }}
+          </button>
+        </div>
+        <div class="flex flex-wrap items-end gap-2">
+          <label class="block flex-1 min-w-[12rem]">
+            <span class="text-sm font-medium text-zinc-700">Set new password</span>
+            <input
+              v-model="newPassword"
+              type="password"
+              minlength="8"
+              autocomplete="new-password"
+              class="mt-1 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm"
+              placeholder="At least 8 characters"
+            />
+          </label>
+          <button
+            type="button"
+            class="rounded-lg border border-zinc-300 px-4 py-2 text-sm"
+            :disabled="settingPassword || !newPassword"
+            @click="setPassword"
+          >
+            {{ settingPassword ? 'Updating…' : 'Set password' }}
+          </button>
+        </div>
+      </div>
+
+      <div v-if="error" class="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">{{ error }}</div>
+      <div v-if="notice" class="rounded-lg bg-green-50 px-3 py-2 text-sm text-green-700">{{ notice }}</div>
+
+      <button
+        type="button"
+        class="vulse-button-primary rounded-lg px-4 py-2 text-sm font-medium"
+        :disabled="saving"
+        @click="save"
+      >
+        {{ saving ? 'Saving…' : 'Save changes' }}
+      </button>
+    </div>
+  </div>
+</template>

package/src/admin/components/UserList.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { adminApi } from '../client/api'
+
+const users = ref<{ id: string; email: string; name: string; role: string }[]>([])
+
+onMounted(async () => { users.value = await adminApi.get('/api/vulse/users') })
+
+async function setRole(id: string, role: string) {
+  await adminApi.post(`/api/vulse/users/${id}/role`, { role })
+  users.value = users.value.map((u) => (u.id === id ? { ...u, role } : u))
+}
+</script>
+
+<template>
+  <table class="w-full bg-white border rounded text-sm">
+    <thead>
+      <tr class="border-b text-left">
+        <th class="p-3">Email</th>
+        <th class="p-3">Name</th>
+        <th class="p-3">Role</th>
+        <th class="p-3 w-24" />
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="u in users" :key="u.id" class="border-b">
+        <td class="p-3">{{ u.email }}</td>
+        <td class="p-3">{{ u.name }}</td>
+        <td class="p-3">
+          <select
+            :value="u.role"
+            class="rounded border px-2 py-1"
+            @change="setRole(u.id, ($event.target as HTMLSelectElement).value)"
+          >
+            <option>admin</option>
+            <option>editor</option>
+            <option>member</option>
+          </select>
+        </td>
+        <td class="p-3 text-right">
+          <a :href="`/admin/users/${u.id}`" class="text-brand hover:underline">Edit</a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

package/src/admin/components/blocks/BlockItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Block } from '../../../core/blocks/schema'
+import HeadingEdit from './edit/HeadingEdit.vue'
+import ParagraphEdit from './edit/ParagraphEdit.vue'
+import ImageEdit from './edit/ImageEdit.vue'
+import CodeEdit from './edit/CodeEdit.vue'
+import EmbedEdit from './edit/EmbedEdit.vue'
+import QuoteEdit from './edit/QuoteEdit.vue'
+import ListEdit from './edit/ListEdit.vue'
+
+defineProps<{ block: Block; index: number; total: number }>()
+defineEmits<{ (e: 'update', b: Block): void; (e: 'remove'): void; (e: 'move', dir: -1 | 1): void }>()
+</script>
+
+<template>
+  <div class="p-4 flex gap-3 group">
+    <div class="flex flex-col gap-1 text-zinc-400">
+      <button type="button" @click="$emit('move', -1)" :disabled="index === 0" class="text-sm">↑</button>
+      <button type="button" @click="$emit('move', 1)" :disabled="index === total - 1" class="text-sm">↓</button>
+      <button type="button" @click="$emit('remove')" class="text-sm text-red-600 opacity-0 group-hover:opacity-100">×</button>
+    </div>
+    <div class="flex-1">
+      <HeadingEdit v-if="block.type === 'heading'" :model-value="block" @update:modelValue="$emit('update', $event)" />
+      <ParagraphEdit v-else-if="block.type === 'paragraph'" :model-value="block" @update:modelValue="$emit('update', $event)" />
+      <ImageEdit v-else-if="block.type === 'image'" :model-value="block" @update:modelValue="$emit('update', $event)" />
+      <CodeEdit v-else-if="block.type === 'code'" :model-value="block" @update:modelValue="$emit('update', $event)" />
+      <EmbedEdit v-else-if="block.type === 'embed'" :model-value="block" @update:modelValue="$emit('update', $event)" />
+      <QuoteEdit v-else-if="block.type === 'quote'" :model-value="block" @update:modelValue="$emit('update', $event)" />
+      <ListEdit v-else-if="block.type === 'list'" :model-value="block" @update:modelValue="$emit('update', $event)" />
+    </div>
+  </div>
+</template>

package/src/admin/components/blocks/BlockToolbar.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { BlockType } from '../../../core/blocks/schema'
+import { BUILT_IN_BLOCK_TYPES } from '../../../core/blocks/schema'
+defineEmits<{ (e: 'add', t: BlockType): void }>()
+</script>
+<template>
+  <div class="p-2 flex flex-wrap gap-1 border-t bg-zinc-50">
+    <button v-for="t in BUILT_IN_BLOCK_TYPES" :key="t" type="button"
+      @click="$emit('add', t)"
+      class="px-3 py-1 rounded border bg-white text-sm hover:bg-zinc-100">+ {{ t }}</button>
+  </div>
+</template>

package/src/admin/components/blocks/edit/CodeEdit.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { z } from 'astro/zod'
+import { codeBlock } from '../../../../core/blocks/schema'
+type Block = z.infer<typeof codeBlock>
+const props = defineProps<{ modelValue: Block }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: Block): void }>()
+function update<K extends keyof Block>(k: K, v: Block[K]) {
+  emit('update:modelValue', { ...props.modelValue, [k]: v })
+}
+</script>
+<template>
+  <div class="space-y-2">
+    <input :value="modelValue.language" @input="update('language', ($event.target as HTMLInputElement).value)"
+      placeholder="Language" class="w-full rounded border px-3 py-2 text-sm" />
+    <textarea :value="modelValue.code" @input="update('code', ($event.target as HTMLTextAreaElement).value)"
+      rows="6" placeholder="Code…" class="w-full rounded border px-3 py-2 font-mono text-sm"></textarea>
+  </div>
+</template>

package/src/admin/components/blocks/edit/EmbedEdit.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { z } from 'astro/zod'
+import { embedBlock } from '../../../../core/blocks/schema'
+type Block = z.infer<typeof embedBlock>
+const props = defineProps<{ modelValue: Block }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: Block): void }>()
+function update<K extends keyof Block>(k: K, v: Block[K]) {
+  emit('update:modelValue', { ...props.modelValue, [k]: v })
+}
+</script>
+<template>
+  <input :value="modelValue.url" @input="update('url', ($event.target as HTMLInputElement).value)"
+    type="url" placeholder="https://…" class="w-full rounded border px-3 py-2" />
+</template>

package/src/admin/components/blocks/edit/HeadingEdit.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { z } from 'astro/zod'
+import { headingBlock } from '../../../../core/blocks/schema'
+type Block = z.infer<typeof headingBlock>
+const props = defineProps<{ modelValue: Block }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: Block): void }>()
+function update<K extends keyof Block>(k: K, v: Block[K]) {
+  emit('update:modelValue', { ...props.modelValue, [k]: v })
+}
+</script>
+<template>
+  <div class="space-y-2">
+    <select :value="modelValue.level" @change="update('level', Number(($event.target as HTMLSelectElement).value) as Block['level'])" class="rounded border px-2 py-1 text-sm">
+      <option :value="1">H1</option><option :value="2">H2</option><option :value="3">H3</option><option :value="4">H4</option>
+    </select>
+    <input :value="modelValue.text" @input="update('text', ($event.target as HTMLInputElement).value)"
+      placeholder="Heading…" class="w-full rounded border px-3 py-2" />
+  </div>
+</template>

package/src/admin/components/blocks/edit/ImageEdit.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { z } from 'astro/zod'
+import { imageBlock } from '../../../../core/blocks/schema'
+import MediaField from '../../fields/MediaField.vue'
+
+type Block = z.infer<typeof imageBlock>
+
+const props = defineProps<{ modelValue: Block }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: Block): void }>()
+
+function update<K extends keyof Block>(k: K, v: Block[K]) {
+  emit('update:modelValue', { ...props.modelValue, [k]: v })
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <MediaField
+      :model-value="modelValue.mediaId || null"
+      label="Image"
+      @update:modelValue="update('mediaId', $event ?? '')"
+    />
+    <label class="block">
+      <span class="vulse-label">Alt text</span>
+      <input
+        :value="modelValue.alt"
+        class="vulse-input mt-1"
+        @input="update('alt', ($event.target as HTMLInputElement).value)"
+      />
+    </label>
+    <label class="block">
+      <span class="vulse-label">Caption</span>
+      <input
+        :value="modelValue.caption ?? ''"
+        class="vulse-input mt-1"
+        @input="update('caption', ($event.target as HTMLInputElement).value)"
+      />
+    </label>
+  </div>
+</template>

package/src/admin/components/blocks/edit/ListEdit.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { z } from 'astro/zod'
+import { listBlock } from '../../../../core/blocks/schema'
+type Block = z.infer<typeof listBlock>
+const props = defineProps<{ modelValue: Block }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: Block): void }>()
+function updateItems(items: string[]) {
+  emit('update:modelValue', { ...props.modelValue, items })
+}
+function updateItem(i: number, v: string) {
+  const next = [...props.modelValue.items]
+  next[i] = v
+  updateItems(next)
+}
+function addItem() { updateItems([...props.modelValue.items, '']) }
+function removeItem(i: number) {
+  const next = [...props.modelValue.items]
+  next.splice(i, 1)
+  updateItems(next.length ? next : [''])
+}
+</script>
+<template>
+  <div class="space-y-2">
+    <label class="flex items-center gap-2 text-sm">
+      <input type="checkbox" :checked="modelValue.ordered"
+        @change="emit('update:modelValue', { ...modelValue, ordered: ($event.target as HTMLInputElement).checked })" />
+      Ordered list
+    </label>
+    <div v-for="(item, i) in modelValue.items" :key="i" class="flex gap-2">
+      <input :value="item" @input="updateItem(i, ($event.target as HTMLInputElement).value)"
+        class="flex-1 rounded border px-3 py-2" />
+      <button type="button" @click="removeItem(i)" class="text-sm text-red-600">×</button>
+    </div>
+    <button type="button" @click="addItem" class="text-sm rounded border px-3 py-1">Add item</button>
+  </div>
+</template>

package/src/admin/components/blocks/edit/ParagraphEdit.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { z } from 'astro/zod'
+import { paragraphBlock } from '../../../../core/blocks/schema'
+type Block = z.infer<typeof paragraphBlock>
+const props = defineProps<{ modelValue: Block }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: Block): void }>()
+function update<K extends keyof Block>(k: K, v: Block[K]) {
+  emit('update:modelValue', { ...props.modelValue, [k]: v })
+}
+</script>
+<template>
+  <textarea :value="modelValue.text" @input="update('text', ($event.target as HTMLTextAreaElement).value)"
+    rows="4" placeholder="Paragraph…" class="w-full rounded border px-3 py-2"></textarea>
+</template>

package/src/admin/components/blocks/edit/QuoteEdit.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { z } from 'astro/zod'
+import { quoteBlock } from '../../../../core/blocks/schema'
+type Block = z.infer<typeof quoteBlock>
+const props = defineProps<{ modelValue: Block }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: Block): void }>()
+function update<K extends keyof Block>(k: K, v: Block[K]) {
+  emit('update:modelValue', { ...props.modelValue, [k]: v })
+}
+</script>
+<template>
+  <div class="space-y-2">
+    <textarea :value="modelValue.text" @input="update('text', ($event.target as HTMLTextAreaElement).value)"
+      rows="3" placeholder="Quote…" class="w-full rounded border px-3 py-2"></textarea>
+    <input :value="modelValue.cite ?? ''" @input="update('cite', ($event.target as HTMLInputElement).value)"
+      placeholder="Citation" class="w-full rounded border px-3 py-2 text-sm" />
+  </div>
+</template>